diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx
index f83e5496..17b44795 100644
--- a/web/components/contract/contract-details.tsx
+++ b/web/components/contract/contract-details.tsx
@@ -62,8 +62,10 @@ export function AbbrContractDetails(props: {
           />
         </Row>
 
-        <Row className="gap-3">
-          {categories.length > 0 && <TagsList tags={categories} noLabel />}
+        <Row className="gap-3 text-gray-400">
+          {categories.length > 0 && (
+            <TagsList className="text-gray-400" tags={categories} noLabel />
+          )}
 
           {showHotVolume ? (
             <Row className="gap-0.5">
diff --git a/web/components/tags-list.tsx b/web/components/tags-list.tsx
index 703e060d..5eec05ce 100644
--- a/web/components/tags-list.tsx
+++ b/web/components/tags-list.tsx
@@ -11,7 +11,7 @@ function Hashtag(props: { tag: string; noLink?: boolean }) {
 
   const body = (
     <div className={clsx('', !noLink && 'cursor-pointer')}>
-      <span className="text-sm text-gray-500">#{category ?? tag} </span>
+      <span className="text-sm">#{category ?? tag} </span>
     </div>
   )
 
@@ -33,7 +33,7 @@ export function TagsList(props: {
   const { tags, className, noLink, noLabel, label } = props
   return (
     <Row className={clsx('flex-wrap items-center gap-2', className)}>
-      {!noLabel && <div className="mr-1 text-gray-500">{label || 'Tags'}</div>}
+      {!noLabel && <div className="mr-1">{label || 'Tags'}</div>}
       {tags.map((tag) => (
         <Hashtag
           key={tag}