diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index d1c7dd31..8f287bdf 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -9,7 +9,6 @@ import {
   getBinaryProbPercent,
 } from 'web/lib/firebase/contracts'
 import { Col } from '../layout/col'
-import { Spacer } from '../layout/spacer'
 import {
   Binary,
   CPMM,
@@ -25,6 +24,8 @@ import {
 } from '../outcome-label'
 import { getOutcomeProbability, getTopAnswer } from 'common/calculate'
 import { AbbrContractDetails } from './contract-details'
+import { TagsList } from '../tags-list'
+import { CATEGORY_LIST } from 'common/categories'
 
 export function ContractCard(props: {
   contract: Contract
@@ -35,11 +36,16 @@ export function ContractCard(props: {
   const { contract, showHotVolume, showCloseTime, className } = props
   const { question, outcomeType, resolution } = contract
 
+  const { tags } = contract
+  const categories = tags.filter((tag) =>
+    CATEGORY_LIST.includes(tag.toLowerCase())
+  )
+
   return (
     <div>
-      <div
+      <Col
         className={clsx(
-          'relative rounded-lg bg-white p-6 shadow-md hover:bg-gray-100',
+          'relative gap-3 rounded-lg bg-white p-6 shadow-md hover:bg-gray-100',
           className
         )}
       >
@@ -52,35 +58,39 @@ export function ContractCard(props: {
           showHotVolume={showHotVolume}
           showCloseTime={showCloseTime}
         />
-        <Spacer h={3} />
 
-        <Row
-          className={clsx(
-            'justify-between gap-4',
-            outcomeType === 'FREE_RESPONSE' && 'flex-col items-start !gap-2'
-          )}
-        >
-          <p
-            className="break-words font-medium text-indigo-700"
-            style={{ /* For iOS safari */ wordBreak: 'break-word' }}
-          >
-            {question}
-          </p>
+        <Row className={clsx('justify-between gap-4')}>
+          <Col className="gap-3">
+            <p
+              className="break-words font-medium text-indigo-700"
+              style={{ /* For iOS safari */ wordBreak: 'break-word' }}
+            >
+              {question}
+            </p>
+            {outcomeType !== 'FREE_RESPONSE' && categories.length > 0 && (
+              <TagsList tags={categories} noLabel />
+            )}
+          </Col>
           {outcomeType === 'BINARY' && (
             <BinaryResolutionOrChance
               className="items-center"
               contract={contract}
             />
           )}
-          {outcomeType === 'FREE_RESPONSE' && (
-            <FreeResponseResolutionOrChance
-              className="self-end text-gray-600"
-              contract={contract as FullContract<DPM, FreeResponse>}
-              truncate="long"
-            />
-          )}
         </Row>
-      </div>
+
+        {outcomeType === 'FREE_RESPONSE' && (
+          <FreeResponseResolutionOrChance
+            className="self-end text-gray-600"
+            contract={contract as FullContract<DPM, FreeResponse>}
+            truncate="long"
+          />
+        )}
+
+        {outcomeType === 'FREE_RESPONSE' && categories.length > 0 && (
+          <TagsList tags={categories} noLabel />
+        )}
+      </Col>
     </div>
   )
 }
diff --git a/web/components/contract/contract-description.tsx b/web/components/contract/contract-description.tsx
index dd748f50..d1ffdaae 100644
--- a/web/components/contract/contract-description.tsx
+++ b/web/components/contract/contract-description.tsx
@@ -39,7 +39,9 @@ export function ContractDescription(props: {
   if (!isCreator && !contract.description.trim()) return null
 
   const { tags } = contract
-  const category = tags.find((tag) => CATEGORY_LIST.includes(tag.toLowerCase()))
+  const categories = tags.filter((tag) =>
+    CATEGORY_LIST.includes(tag.toLowerCase())
+  )
 
   return (
     <div
@@ -50,9 +52,9 @@ export function ContractDescription(props: {
     >
       <Linkify text={contract.description} />
 
-      {category && (
+      {categories.length > 0 && (
         <div className="mt-4">
-          <TagsList tags={[category]} label="Category" />
+          <TagsList tags={categories} label="Category" />
         </div>
       )}