diff --git a/web/components/post-card.tsx b/web/components/post-card.tsx
index 50b378e6..f3e673fb 100644
--- a/web/components/post-card.tsx
+++ b/web/components/post-card.tsx
@@ -8,6 +8,7 @@ import { fromNow } from 'web/lib/util/time'
 import { Avatar } from './avatar'
 import { Card } from './card'
 import { CardHighlightOptions } from './contract/contracts-grid'
+import { Row } from './layout/row'
 import { UserLink } from './user-link'
 
 export function PostCard(props: {
@@ -19,30 +20,28 @@ export function PostCard(props: {
   const { itemIds: itemIds, highlightClassName } = highlightOptions || {}
 
   return (
-    <div className="relative py-1">
-      <Card
-        className={clsx(
-          'relative flex gap-3 py-2 px-3',
-          itemIds?.includes(post.id) && highlightClassName
-        )}
-      >
-        <div className="flex-shrink-0">
-          <Avatar className="h-12 w-12" username={post.creatorUsername} />
-        </div>
+    <Card
+      className={clsx(
+        'group relative flex gap-3 py-2 px-3',
+        itemIds?.includes(post.id) && highlightClassName
+      )}
+    >
+      <Row className="flex grow  justify-between">
         <div className="">
-          <div className="text-sm text-gray-500">
+          <Row className="items-center text-sm ">
+            <Avatar className="mx-1 h-7 w-7" username={post.creatorUsername} />
             <UserLink
-              className="text-neutral"
+              className=" text-gray-400"
               name={post.creatorName}
               username={post.creatorUsername}
             />
-            <span className="mx-1">•</span>
-            <span className="text-gray-500">{fromNow(post.createdTime)}</span>
-          </div>
-          <div className=" break-words text-lg font-medium  text-gray-900">
+            <span className="mx-1 text-gray-400">•</span>
+            <span className="text-gray-400">{fromNow(post.createdTime)}</span>
+          </Row>
+          <div className=" break-words text-lg font-semibold  text-indigo-700 group-hover:underline group-hover:decoration-indigo-400 group-hover:decoration-2">
             {post.title}
           </div>
-          <div className="font-small  text-md  break-words text-gray-500">
+          <div className="font-small  text-md  break-words text-indigo-400">
             {post.subtitle}
           </div>
         </div>
@@ -52,7 +51,7 @@ export function PostCard(props: {
             Post
           </span>
         </div>
-      </Card>
+      </Row>
       {onPostClick ? (
         <a
           className="absolute top-0 left-0 right-0 bottom-0"
@@ -83,7 +82,7 @@ export function PostCard(props: {
           />
         </Link>
       )}
-    </div>
+    </Card>
   )
 }