diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx
index 955f0e10..536f00e5 100644
--- a/web/components/contract/contract-tabs.tsx
+++ b/web/components/contract/contract-tabs.tsx
@@ -149,81 +149,77 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
     </Row>
   )
 
-  if (contract.outcomeType === 'FREE_RESPONSE') {
-    const sortedAnswers = sortBy(
-      contract.answers,
-      (a) => -getOutcomeProbability(contract, a.id)
-    )
-    const commentsByOutcome = groupBy(
-      sortedComments,
-      (c) => c.answerOutcome ?? c.betOutcome ?? '_'
-    )
-    const generalTopLevelComments = topLevelComments.filter(
-      (c) => c.answerOutcome === undefined && c.betId === undefined
-    )
+  // if (contract.outcomeType === 'FREE_RESPONSE') {
+  //   const sortedAnswers = sortBy(
+  //     contract.answers,
+  //     (a) => -getOutcomeProbability(contract, a.id)
+  //   )
+  //   const commentsByOutcome = groupBy(
+  //     sortedComments,
+  //     (c) => c.answerOutcome ?? c.betOutcome ?? '_'
+  //   )
+  //   const generalTopLevelComments = topLevelComments.filter(
+  //     (c) => c.answerOutcome === undefined && c.betId === undefined
+  //   )
 
-    return (
-      <>
-        <Col className="flex w-full">
-          <div className="mb-4 w-full border-gray-200" />
-          {sortedAnswers.map((answer) => {
-            const answerComments =
-              commentsByOutcome[answer.number.toString()] ?? []
-            if (answerComments.length > 0) {
-              return (
-                <div key={answer.id} className="relative pb-4">
-                  {/* <span
-                    className="absolute top-5 left-5 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200"
-                    aria-hidden="true"
-                  /> */}
-                  <FeedAnswerCommentGroup
-                    contract={contract}
-                    answer={answer}
-                    answerComments={
-                      commentsByOutcome[answer.number.toString()] ?? []
-                    }
-                    tips={tips}
-                  />
-                </div>
-              )
-            } else {
-              return <></>
-            }
-          })}
-          {sortRow}
-          <ContractCommentInput className="mb-5" contract={contract} />
-          {generalTopLevelComments.map((comment) => (
-            <FeedCommentThread
-              key={comment.id}
-              contract={contract}
-              parentComment={comment}
-              threadComments={commentsByParent[comment.id] ?? []}
-              tips={tips}
-            />
-          ))}
-        </Col>
-      </>
-    )
-  } else {
-    return (
-      <>
-        {sortRow}
-        <ContractCommentInput className="mb-5" contract={contract} />
-        {topLevelComments.map((parent) => (
-          <FeedCommentThread
-            key={parent.id}
-            contract={contract}
-            parentComment={parent}
-            threadComments={sortBy(
-              commentsByParent[parent.id] ?? [],
-              (c) => c.createdTime
-            )}
-            tips={tips}
-          />
-        ))}
-      </>
-    )
-  }
+  //   return (
+  //     <>
+  //       <Col className="flex w-full">
+  //         <div className="mb-4 w-full border-gray-200" />
+  //         {sortedAnswers.map((answer) => {
+  //           const answerComments =
+  //             commentsByOutcome[answer.number.toString()] ?? []
+  //           if (answerComments.length > 0) {
+  //             return (
+  //               <div key={answer.id} className="relative pb-4">
+  //                 <FeedAnswerCommentGroup
+  //                   contract={contract}
+  //                   answer={answer}
+  //                   answerComments={
+  //                     commentsByOutcome[answer.number.toString()] ?? []
+  //                   }
+  //                   tips={tips}
+  //                 />
+  //               </div>
+  //             )
+  //           } else {
+  //             return <></>
+  //           }
+  //         })}
+  //         <ContractCommentInput className="mb-5" contract={contract} />
+  //         {sortRow}
+  //         {generalTopLevelComments.map((comment) => (
+  //           <FeedCommentThread
+  //             key={comment.id}
+  //             contract={contract}
+  //             parentComment={comment}
+  //             threadComments={commentsByParent[comment.id] ?? []}
+  //             tips={tips}
+  //           />
+  //         ))}
+  //       </Col>
+  //     </>
+  //   )
+  // } else {
+  return (
+    <>
+      {sortRow}
+      <ContractCommentInput className="mb-5" contract={contract} />
+      {topLevelComments.map((parent) => (
+        <FeedCommentThread
+          key={parent.id}
+          contract={contract}
+          parentComment={parent}
+          threadComments={sortBy(
+            commentsByParent[parent.id] ?? [],
+            (c) => c.createdTime
+          )}
+          tips={tips}
+        />
+      ))}
+    </>
+  )
+  // }
 })
 
 const BetsTabContent = memo(function BetsTabContent(props: {
diff --git a/web/components/contract/tip-button.tsx b/web/components/contract/tip-button.tsx
index 0315c676..344e4e20 100644
--- a/web/components/contract/tip-button.tsx
+++ b/web/components/contract/tip-button.tsx
@@ -37,7 +37,7 @@ export function TipButton(props: {
         <Col className={'relative items-center sm:flex-row'}>
           <HeartIcon
             className={clsx(
-              'h-5 w-5 sm:h-6 sm:w-6',
+              'h-5 w-5',
               totalTipped > 0 ? 'mr-2' : '',
               userTipped ? 'fill-green-700 text-green-700' : ''
             )}
diff --git a/web/components/feed/feed-answer-comment-group.tsx b/web/components/feed/feed-answer-comment-group.tsx
index 877f2f40..55b4ac06 100644
--- a/web/components/feed/feed-answer-comment-group.tsx
+++ b/web/components/feed/feed-answer-comment-group.tsx
@@ -51,15 +51,7 @@ export function FeedAnswerCommentGroup(props: {
         ref={answerRef}
         id={answerElementId}
       >
-        <Col>
-          <Avatar username={username} avatarUrl={avatarUrl} size="xs" />
-          {seeReplies && (
-            <span
-              className="mx-auto h-full w-0.5 bg-gray-200"
-              aria-hidden="true"
-            />
-          )}
-        </Col>
+        <Avatar username={username} avatarUrl={avatarUrl} size="sm" />
         <Col className="min-w-0 flex-1">
           <div className="text-greyscale-6 text-xs">
             <UserLink username={username} name={name} /> answered
@@ -93,7 +85,7 @@ export function FeedAnswerCommentGroup(props: {
         </Col>
       </Row>
       {seeReplies && (
-        <Col className="gap-3 pl-1">
+        <Col className="w-full gap-3 pl-1">
           {answerComments.map((comment) => (
             <FeedComment
               key={comment.id}
diff --git a/web/components/feed/feed-comments.tsx b/web/components/feed/feed-comments.tsx
index c7085a0e..b672fbde 100644
--- a/web/components/feed/feed-comments.tsx
+++ b/web/components/feed/feed-comments.tsx
@@ -20,6 +20,8 @@ import { Editor } from '@tiptap/react'
 import { UserLink } from 'web/components/user-link'
 import { CommentInput } from '../comment-input'
 import { AwardBountyButton } from 'web/components/award-bounty-button'
+import { ReplyIcon } from '@heroicons/react/solid'
+import { Button } from '../button'
 
 export type ReplyTo = { id: string; username: string }
 
@@ -34,10 +36,6 @@ export function FeedCommentThread(props: {
 
   return (
     <Col className="relative w-full items-stretch gap-3 pb-4">
-      <span
-        className="absolute top-5 left-4 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200"
-        aria-hidden="true"
-      />
       {[parentComment].concat(threadComments).map((comment, commentIdx) => (
         <FeedComment
           key={comment.id}
@@ -76,26 +74,7 @@ export function FeedComment(props: {
   onReplyClick?: () => void
 }) {
   const { contract, comment, tips, indent, onReplyClick } = props
-  const {
-    text,
-    content,
-    userUsername,
-    userName,
-    userAvatarUrl,
-    commenterPositionProb,
-    commenterPositionShares,
-    commenterPositionOutcome,
-    createdTime,
-    bountiesAwarded,
-  } = comment
-  const betOutcome = comment.betOutcome
-  let bought: string | undefined
-  let money: string | undefined
-  if (comment.betAmount != null) {
-    bought = comment.betAmount >= 0 ? 'bought' : 'sold'
-    money = formatMoney(Math.abs(comment.betAmount))
-  }
-  const totalAwarded = bountiesAwarded ?? 0
+  const { text, content, userUsername, userAvatarUrl } = comment
 
   const router = useRouter()
   const highlighted = router.asPath.endsWith(`#${comment.id}`)
@@ -107,88 +86,64 @@ export function FeedComment(props: {
     }
   }, [highlighted])
 
+  const [showActions, setShowActions] = useState(false)
+
   return (
     <Row
       ref={commentRef}
       id={comment.id}
       className={clsx(
-        'relative',
-        indent ? 'ml-6' : '',
+        'hover:bg-greyscale-1 gap-2 transition-colors',
+        indent ? 'ml-8' : '',
         highlighted ? `-m-1.5 rounded bg-indigo-500/[0.2] p-1.5` : ''
       )}
+      onMouseOver={() => setShowActions(true)}
+      onMouseLeave={() => setShowActions(false)}
     >
-      {/*draw a gray line from the comment to the left:*/}
-      {indent ? (
-        <span
-          className="bg-greyscale-2 absolute -left-1 -ml-[1px] mt-[0.8rem] h-2 w-0.5 rotate-90"
-          aria-hidden="true"
+      <Col className={clsx(indent ? '-ml-3' : '')}>
+        <Avatar
+          size={indent ? 'xs' : 'sm'}
+          username={userUsername}
+          avatarUrl={userAvatarUrl}
         />
-      ) : null}
-      <Avatar size="xs" username={userUsername} avatarUrl={userAvatarUrl} />
-      <div>
-        <div className="text-greyscale-6 mt-0.5 text-xs">
-          <UserLink username={userUsername} name={userName} />{' '}
-          <span className="text-greyscale-4">
-            {comment.betId == null &&
-              commenterPositionProb != null &&
-              commenterPositionOutcome != null &&
-              commenterPositionShares != null &&
-              commenterPositionShares > 0 &&
-              contract.outcomeType !== 'NUMERIC' && (
-                <>
-                  {'is '}
-                  <CommentStatus
-                    prob={commenterPositionProb}
-                    outcome={commenterPositionOutcome}
-                    contract={contract}
-                  />
-                </>
-              )}
-            {bought} {money}
-            {contract.outcomeType !== 'FREE_RESPONSE' && betOutcome && (
-              <>
-                {' '}
-                of{' '}
-                <OutcomeLabel
-                  outcome={betOutcome ? betOutcome : ''}
-                  contract={contract}
-                  truncate="short"
-                />
-              </>
-            )}
-          </span>
-          <CopyLinkDateTimeComponent
-            prefix={contract.creatorUsername}
-            slug={contract.slug}
-            createdTime={createdTime}
-            elementId={comment.id}
+        {indent && (
+          <span
+            className="bg-greyscale-2 mx-auto h-full w-0.5"
+            aria-hidden="true"
           />
-          {totalAwarded > 0 && (
-            <span className=" text-primary ml-2 text-sm">
-              +{formatMoney(totalAwarded)}
-            </span>
-          )}
-        </div>
-        <Content
-          className="mt-2 text-[12px] text-gray-700"
-          content={content || text}
-          smallImage
-        />
-        <Row className="mt-2 items-center gap-6 text-xs text-gray-500">
-          {onReplyClick && (
-            <button
-              className="font-bold hover:underline"
-              onClick={onReplyClick}
-            >
-              Reply
-            </button>
-          )}
-          {tips && <Tipper comment={comment} tips={tips} />}
-          {(contract.openCommentBounties ?? 0) > 0 && (
-            <AwardBountyButton comment={comment} contract={contract} />
-          )}
+        )}
+      </Col>
+      <Col className="w-full">
+        <FeedCommentHeader comment={comment} contract={contract} />
+        <Row>
+          <Content
+            className="text-greyscale-7 mt-2 grow text-[14px]"
+            content={content || text}
+            smallImage
+          />
+          <Row
+            className={clsx(
+              'ml-2 items-center gap-2 text-xs text-gray-500 transition-opacity',
+              showActions ? '' : 'opacity-0'
+            )}
+          >
+            {onReplyClick && (
+              <Button
+                className="font-bold hover:underline"
+                onClick={onReplyClick}
+                size="2xs"
+                color="gray-white"
+              >
+                <ReplyIcon className="h-5 w-5" />
+              </Button>
+            )}
+            {tips && <Tipper comment={comment} tips={tips} />}
+            {(contract.openCommentBounties ?? 0) > 0 && (
+              <AwardBountyButton comment={comment} contract={contract} />
+            )}
+          </Row>
         </Row>
-      </div>
+      </Col>
     </Row>
   )
 }
@@ -246,3 +201,74 @@ export function ContractCommentInput(props: {
     />
   )
 }
+
+export function FeedCommentHeader(props: {
+  comment: ContractComment
+  contract: Contract
+}) {
+  const { comment, contract } = props
+  const {
+    userUsername,
+    userName,
+    commenterPositionProb,
+    commenterPositionShares,
+    commenterPositionOutcome,
+    createdTime,
+    bountiesAwarded,
+  } = comment
+  const betOutcome = comment.betOutcome
+  let bought: string | undefined
+  let money: string | undefined
+  if (comment.betAmount != null) {
+    bought = comment.betAmount >= 0 ? 'bought' : 'sold'
+    money = formatMoney(Math.abs(comment.betAmount))
+  }
+  const totalAwarded = bountiesAwarded ?? 0
+  return (
+    <Row>
+      <div className="text-greyscale-6 mt-0.5 text-xs">
+        <UserLink username={userUsername} name={userName} />{' '}
+        <span className="text-greyscale-4">
+          {comment.betId == null &&
+            commenterPositionProb != null &&
+            commenterPositionOutcome != null &&
+            commenterPositionShares != null &&
+            commenterPositionShares > 0 &&
+            contract.outcomeType !== 'NUMERIC' && (
+              <>
+                {'is '}
+                <CommentStatus
+                  prob={commenterPositionProb}
+                  outcome={commenterPositionOutcome}
+                  contract={contract}
+                />
+              </>
+            )}
+          {bought} {money}
+          {contract.outcomeType !== 'FREE_RESPONSE' && betOutcome && (
+            <>
+              {' '}
+              of{' '}
+              <OutcomeLabel
+                outcome={betOutcome ? betOutcome : ''}
+                contract={contract}
+                truncate="short"
+              />
+            </>
+          )}
+        </span>
+        <CopyLinkDateTimeComponent
+          prefix={contract.creatorUsername}
+          slug={contract.slug}
+          createdTime={createdTime}
+          elementId={comment.id}
+        />
+        {totalAwarded > 0 && (
+          <span className=" text-primary ml-2 text-sm">
+            +{formatMoney(totalAwarded)}
+          </span>
+        )}
+      </div>
+    </Row>
+  )
+}