diff --git a/apps/govquests-frontend/public/badges/track1.png b/apps/govquests-frontend/public/badges/track1.png
new file mode 100644
index 0000000..7f826d6
Binary files /dev/null and b/apps/govquests-frontend/public/badges/track1.png differ
diff --git a/apps/govquests-frontend/src/app/globals.css b/apps/govquests-frontend/src/app/globals.css
index e61a5bb..786a982 100644
--- a/apps/govquests-frontend/src/app/globals.css
+++ b/apps/govquests-frontend/src/app/globals.css
@@ -57,8 +57,8 @@
     --primary: 0 0% 100%; /* White */
     --primary-foreground: 0 0% 0% /* Black text */;
 
-    --secondary: 228 9% 23%; /* Dark grey #333640 */
-    --secondary-foreground: 0 0% 100%;
+    --secondary: 0 0% 82%; /* Dark grey 210 210 210 */
+    --secondary-foreground: 0 0% 0%;
 
     --muted: 228 9% 23%;
     --muted-foreground: 0 0% 64%;
diff --git a/apps/govquests-frontend/src/components/IndicatorPill.tsx b/apps/govquests-frontend/src/components/IndicatorPill.tsx
index 09c3b2a..e02aeb2 100644
--- a/apps/govquests-frontend/src/components/IndicatorPill.tsx
+++ b/apps/govquests-frontend/src/components/IndicatorPill.tsx
@@ -6,7 +6,12 @@ export const IndicatorPill = ({
   ...props
 }: ComponentProps<"span">) => {
   return (
-    <div className="relative border shadow-[1px_1px_0px_0px_#000000] bg-primary border-primary-foreground items-center text-center rounded-lg justify-center flex py-1 px-4">
+    <div
+      className={cn(
+        "relative border shadow-[1px_1px_0px_0px_#000000] bg-primary border-primary-foreground items-center text-center rounded-lg justify-center flex py-1 px-4",
+        className,
+      )}
+    >
       <AnchorPoint className="absolute top-1 left-1 " />
       <span
         className="text-primary-foreground text-xs font-bold whitespace-nowrap flex items-center"
diff --git a/apps/govquests-frontend/src/domains/questing/components/QuestCard.tsx b/apps/govquests-frontend/src/domains/questing/components/QuestCard.tsx
index 66bfe7a..c7802ea 100644
--- a/apps/govquests-frontend/src/domains/questing/components/QuestCard.tsx
+++ b/apps/govquests-frontend/src/domains/questing/components/QuestCard.tsx
@@ -1,10 +1,9 @@
 import Link from "next/link";
 import type React from "react";
 
-import Image from "@/components/ui/Image";
-import { Quests } from "../types/questTypes";
+import { IndicatorPill } from "@/components/IndicatorPill";
 import { cn } from "@/lib/utils";
-import RewardIndicator from "@/components/RewardIndicator";
+import { Quests } from "../types/questTypes";
 
 interface QuestProps {
   quest: Quests[number];
@@ -12,71 +11,35 @@ interface QuestProps {
 
 const QuestCard: React.FC<QuestProps> = ({ quest }) => {
   const status = quest.userQuests?.[0]?.status || "unstarted";
-  const disabled = status === "completed";
-
-  const peelClassName =
-    "bg-primary/50 text-white backdrop-blur-sm border border-primary/20";
+  const isCompleted = status === "completed";
 
   return (
-    <Link
-      href={`/quests/${quest.slug}`}
-      className={cn(
-        "group flex flex-col bg-primary/10 border border-primary/20 rounded-lg overflow-hidden transition-all duration-200",
-        disabled ? "cursor-default" : "hover:shadow-md hover:bg-primary/15",
-      )}
-    >
-      <div className="relative w-full h-48 overflow-hidden">
-        <div className="absolute w-21 left-0 right-0 top-0 z-10 p-3 flex flex-col gap-3 justify-between items-start">
-          {disabled ? (
-            <span
-              className={cn(
-                "bg-secondary font-normal py-1 px-2 rounded-md text-sm ml-1 flex gap-1 p-auto w-21",
-                peelClassName,
-              )}
-            >
-              Completed
-            </span>
-          ) : (
-            quest.rewardPools
-              .toReversed()
-              .map(({ rewardDefinition: reward }) => (
-                <RewardIndicator
-                  key={reward.type}
-                  reward={reward}
-                  className={peelClassName}
-                />
-              ))
-          )}
-        </div>
-        {quest.displayData.imageUrl ? (
-          <Image
-            src={quest.displayData.imageUrl}
-            alt={`QuestCard ${quest.displayData.title} image`}
-            className={cn(
-              "object-cover w-full h-full transition-transform duration-200",
-              !disabled && "group-hover:scale-105",
-            )}
-          />
-        ) : (
-          <div className="w-full h-full bg-primary/5" />
-        )}
-      </div>
-      <div className={cn("flex flex-col p-7 gap-4", disabled && "opacity-60")}>
-        <h3
+    <Link href={`/quests/${quest.slug}`}>
+      <div className="rounded-lg overflow-hidden group transition-all duration-300 hover:shadow-lg">
+        <div
           className={cn(
-            "font-semibold text-lg leading-tight line-clamp-2 transition-colors flex gap-2",
-            !disabled && "group-hover:text-primary/90",
+            "relative bg-secondary flex justify-center items-center p-6",
+            isCompleted && "bg-gradient-to-b from-[#80F2FF] to-[#A1E0D2]",
           )}
         >
-          {quest.displayData.title}
-        </h3>
-        <p className="text-sm text-foreground/70 line-clamp-3">
-          <span
-            dangerouslySetInnerHTML={{
-              __html: quest.displayData.intro || "",
-            }}
-          />
-        </p>
+          <div className="w-full text-center text-primary-foreground font-bold text-lg py-3 bg-primary border border-primary-foreground shadow-[1px_1px_0px_0px_#000000] rounded-lg transition-all duration-300 group-hover:shadow-[2px_2px_0px_0px_#000000] group-hover:scale-105">
+            {quest.displayData.title}
+          </div>
+          <IndicatorPill className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2">
+            {isCompleted
+              ? "Completed"
+              : quest.rewardPools[0].rewardDefinition.amount + " points"}
+          </IndicatorPill>
+        </div>
+        <div className="bg-background/60 h-full p-7">
+          <p className="text-sm text-foreground line-clamp-4">
+            <span
+              dangerouslySetInnerHTML={{
+                __html: quest.displayData.intro || "",
+              }}
+            />
+          </p>
+        </div>
       </div>
     </Link>
   );
diff --git a/apps/govquests-frontend/src/domains/questing/components/track/BadgeCard.tsx b/apps/govquests-frontend/src/domains/questing/components/track/BadgeCard.tsx
index ae0f67f..c01c795 100644
--- a/apps/govquests-frontend/src/domains/questing/components/track/BadgeCard.tsx
+++ b/apps/govquests-frontend/src/domains/questing/components/track/BadgeCard.tsx
@@ -9,6 +9,7 @@ interface BadgeCardProps {
 }
 
 export const BadgeCard = ({ badge, isCompleted }: BadgeCardProps) => {
+  // TODO - Add badge image - OP-671
   return (
     <div className="relative items-center justify-center min-w-52 h-60 col-span-2">
       <Link href={`/badges/${badge.id}`}>
diff --git a/apps/govquests-frontend/src/domains/questing/components/track/TrackAccordion.tsx b/apps/govquests-frontend/src/domains/questing/components/track/TrackAccordion.tsx
index 0be0d60..4ec090e 100644
--- a/apps/govquests-frontend/src/domains/questing/components/track/TrackAccordion.tsx
+++ b/apps/govquests-frontend/src/domains/questing/components/track/TrackAccordion.tsx
@@ -10,18 +10,21 @@ import { TrackAccordionHeader } from "./TrackAccordionHeader";
 import { TrackDescription } from "./TrackDescription";
 
 export const TrackAccordion = ({ track }: { track: Tracks[number] }) => {
+  const isCompleted = track.quests
+    .map((quest) => quest.userQuests[0]?.status)
+    .every((status) => status === "completed");
   return (
     <Accordion
       type="single"
       collapsible
-      className="border rounded-lg bg-background/60"
+      className="border border-primary-foreground/10 rounded-lg bg-background/60"
     >
       <AccordionItem value="item-1">
         <AccordionTrigger className="px-10 py-5 text-foreground">
-          <TrackAccordionHeader track={track} />
+          <TrackAccordionHeader track={track} isCompleted={isCompleted} />
         </AccordionTrigger>
         <AccordionContent>
-          <TrackDescription track={track} />
+          <TrackDescription track={track} isCompleted={isCompleted} />
           <QuestCarousel quests={track.quests} />
         </AccordionContent>
       </AccordionItem>
diff --git a/apps/govquests-frontend/src/domains/questing/components/track/TrackAccordionHeader.tsx b/apps/govquests-frontend/src/domains/questing/components/track/TrackAccordionHeader.tsx
index 3e7aeef..0e39518 100644
--- a/apps/govquests-frontend/src/domains/questing/components/track/TrackAccordionHeader.tsx
+++ b/apps/govquests-frontend/src/domains/questing/components/track/TrackAccordionHeader.tsx
@@ -3,9 +3,13 @@ import { Tracks } from "../../types/trackTypes";
 
 interface TrackAccordionHeader {
   track: Tracks[number];
+  isCompleted: boolean;
 }
 
-export const TrackAccordionHeader = ({ track }: TrackAccordionHeader) => {
+export const TrackAccordionHeader = ({
+  track,
+  isCompleted,
+}: TrackAccordionHeader) => {
   return (
     <div className="flex justify-between items-center w-full pr-10">
       <h1 className="text-2xl font-bold flex gap-2">
@@ -13,7 +17,9 @@ export const TrackAccordionHeader = ({ track }: TrackAccordionHeader) => {
       </h1>
       <div className="flex gap-4 hover:no-underline">
         <IndicatorPill>{track.quests.length} quests</IndicatorPill>
-        <IndicatorPill>{track.points} points</IndicatorPill>
+        <IndicatorPill>
+          {isCompleted ? "Completed" : track.points + " points"}
+        </IndicatorPill>
       </div>
     </div>
   );
diff --git a/apps/govquests-frontend/src/domains/questing/components/track/TrackDescription.tsx b/apps/govquests-frontend/src/domains/questing/components/track/TrackDescription.tsx
index 683c259..22e61c4 100644
--- a/apps/govquests-frontend/src/domains/questing/components/track/TrackDescription.tsx
+++ b/apps/govquests-frontend/src/domains/questing/components/track/TrackDescription.tsx
@@ -1,7 +1,15 @@
 import { BadgeCard } from "./BadgeCard";
 import { Tracks } from "../../types/trackTypes";
 
-export const TrackDescription = ({ track }: { track: Tracks[number] }) => {
+interface TrackDescriptionProps {
+  track: Tracks[number];
+  isCompleted: boolean;
+}
+
+export const TrackDescription = ({
+  track,
+  isCompleted,
+}: TrackDescriptionProps) => {
   const badge = { id: "1", image: "/badge/track1.png", title: "Track Badge" };
 
   return (
@@ -14,8 +22,15 @@ export const TrackDescription = ({ track }: { track: Tracks[number] }) => {
         <div className="border-b h-0 w-full" />
       </div>
       <div className="items-center justify-center flex gap-12 mx-20">
-        <BadgeCard badge={badge} isCompleted={false} />
-        <div className="col-span-8 w-full">{track.displayData.description}</div>
+        <BadgeCard badge={badge} isCompleted={isCompleted} />
+        <div className="flex flex-col gap-4 col-span-8 w-full font-bold">
+          <span>{track.displayData.description}</span>
+          <span>
+            {isCompleted
+              ? `Track completed — ${badge.title} unlocked. `
+              : "Complete all quests to Unlock this Track Badge."}
+          </span>
+        </div>
       </div>
     </div>
   );
diff --git a/apps/govquests-frontend/src/domains/questing/components/track/TrackList.tsx b/apps/govquests-frontend/src/domains/questing/components/track/TrackList.tsx
index b210ee8..bdf3a9a 100644
--- a/apps/govquests-frontend/src/domains/questing/components/track/TrackList.tsx
+++ b/apps/govquests-frontend/src/domains/questing/components/track/TrackList.tsx
@@ -8,8 +8,8 @@ export const TrackList = () => {
     data && (
       <div className="max-w-[1200px] mx-auto">
         <div className="flex flex-col border-b mb-7 pb-2 gap-2">
-          <h1 className="text-2xl font-bold text-black/80"># Tracks</h1>
-          <h2 className="text-xl font-normal text-black/80">
+          <h1 className="text-2xl font-bold"># Tracks</h1>
+          <h2 className="text-xl font-normal">
             Complete quests to earn points and unlock rewards.
           </h2>
         </div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7f2aa57..aa50e8a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1331,8 +1331,8 @@ packages:
         integrity: sha512-b1oh54x4DMCdGsB4/7ahiSrViXxaBwRPotiZNnYXjLha9vfuURSAZErki6qjDoSIV0eXx5v57XnTGVtGwnfp2g==,
       }
     peerDependencies:
-      "@types/react": "*"
-      "@types/react-dom": "*"
+      "@types/react": npm:types-react@19.0.0-rc.1
+      "@types/react-dom": npm:types-react-dom@19.0.0-rc.1
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
@@ -1395,7 +1395,7 @@ packages:
         integrity: sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==,
       }
     peerDependencies:
-      "@types/react": "*"
+      "@types/react": npm:types-react@19.0.0-rc.1
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       "@types/react":
@@ -1431,8 +1431,8 @@ packages:
         integrity: sha512-onrWn/72lQoEucDmJnr8uczSNTujT0vJnA/X5+3AkChVPowr8n1yvIKIabhWyMQeMvvmdpsvcyDqx3X1LEXCPg==,
       }
     peerDependencies:
-      "@types/react": "*"
-      "@types/react-dom": "*"
+      "@types/react": npm:types-react@19.0.0-rc.1
+      "@types/react-dom": npm:types-react-dom@19.0.0-rc.1
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
@@ -1459,8 +1459,8 @@ packages:
         integrity: sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA==,
       }
     peerDependencies:
-      "@types/react": "*"
-      "@types/react-dom": "*"
+      "@types/react": npm:types-react@19.0.0-rc.1
+      "@types/react-dom": npm:types-react-dom@19.0.0-rc.1
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
@@ -1511,8 +1511,8 @@ packages:
         integrity: sha512-3kn5Me69L+jv82EKRuQCXdYyf1DqHwD2U/sxoNgBGCB7K9TRc3bQamQ+5EPM9EvyPdli0W41sROd+ZU1dTCztw==,
       }
     peerDependencies:
-      "@types/react": "*"
-      "@types/react-dom": "*"
+      "@types/react": npm:types-react@19.0.0-rc.1
+      "@types/react-dom": npm:types-react-dom@19.0.0-rc.1
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
@@ -1527,8 +1527,8 @@ packages:
         integrity: sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==,
       }
     peerDependencies:
-      "@types/react": "*"
-      "@types/react-dom": "*"
+      "@types/react": npm:types-react@19.0.0-rc.1
+      "@types/react-dom": npm:types-react-dom@19.0.0-rc.1
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
@@ -1543,8 +1543,8 @@ packages:
         integrity: sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==,
       }
     peerDependencies:
-      "@types/react": "*"
-      "@types/react-dom": "*"
+      "@types/react": npm:types-react@19.0.0-rc.1
+      "@types/react-dom": npm:types-react-dom@19.0.0-rc.1
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
@@ -1559,8 +1559,8 @@ packages:
         integrity: sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==,
       }
     peerDependencies:
-      "@types/react": "*"
-      "@types/react-dom": "*"
+      "@types/react": npm:types-react@19.0.0-rc.1
+      "@types/react-dom": npm:types-react-dom@19.0.0-rc.1
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
@@ -1691,8 +1691,8 @@ packages:
         integrity: sha512-vVfA2IZ9q/J+gEamvj761Oq1FpWgCDaNOOIfbPVp2MVPLEomUr5+Vf7kJGwQ24YxZSlQVar7Bes8kyTo5Dshpg==,
       }
     peerDependencies:
-      "@types/react": "*"
-      "@types/react-dom": "*"
+      "@types/react": npm:types-react@19.0.0-rc.1
+      "@types/react-dom": npm:types-react-dom@19.0.0-rc.1
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
@@ -6267,6 +6267,12 @@ packages:
         integrity: sha512-u7IEgvEgACYFDGtaqBgh5tqtYxkfPgtE7sl3RjfsT4QTpRM9FADXoWomFYZVi55Upii3LUcaZYrKFyHqUTHpew==,
       }
 
+  types-react@19.0.0-rc.1:
+    resolution:
+      {
+        integrity: sha512-RshndUfqTW6K3STLPis8BtAYCGOkMbtvYsi90gmVNDZBXUyUc5juf2PE9LfS/JmOlUIRO8cWTS/1MTnmhjDqyQ==,
+      }
+
   typescript@5.7.2:
     resolution:
       {
@@ -10948,12 +10954,16 @@ snapshots:
 
   types-react-dom@19.0.0-rc.1:
     dependencies:
-      "@types/react": 19.0.3
+      "@types/react": types-react@19.0.0-rc.1
 
   types-react@19.0.0-alpha.3:
     dependencies:
       csstype: 3.1.3
 
+  types-react@19.0.0-rc.1:
+    dependencies:
+      csstype: 3.1.3
+
   typescript@5.7.2: {}
 
   ufo@1.5.4: {}