diff --git a/09-with-tests/src/app/globals.css b/09-with-tests/src/app/globals.css
index 4253a14..9d4b5a1 100644
--- a/09-with-tests/src/app/globals.css
+++ b/09-with-tests/src/app/globals.css
@@ -45,71 +45,73 @@
 
 :root {
   --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.147 0.004 49.25);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.147 0.004 49.25);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.147 0.004 49.25);
-  --primary: oklch(0.216 0.006 56.043);
-  --primary-foreground: oklch(0.985 0.001 106.423);
-  --secondary: oklch(0.97 0.001 106.424);
-  --secondary-foreground: oklch(0.216 0.006 56.043);
-  --muted: oklch(0.97 0.001 106.424);
-  --muted-foreground: oklch(0.553 0.013 58.071);
-  --accent: oklch(0.97 0.001 106.424);
-  --accent-foreground: oklch(0.216 0.006 56.043);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.923 0.003 48.717);
-  --input: oklch(0.923 0.003 48.717);
-  --ring: oklch(0.709 0.01 56.259);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0.001 106.423);
-  --sidebar-foreground: oklch(0.147 0.004 49.25);
-  --sidebar-primary: oklch(0.216 0.006 56.043);
-  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-accent: oklch(0.97 0.001 106.424);
-  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
-  --sidebar-border: oklch(0.923 0.003 48.717);
-  --sidebar-ring: oklch(0.709 0.01 56.259);
+  /* Make the site use a maroon primary (#85144b) with white accents and a white background */
+  --background: #ffffff;
+  --foreground: #0f172a; /* slate-900 */
+  --card: #ffffff;
+  --card-foreground: #0f172a;
+  --popover: #ffffff;
+  --popover-foreground: #0f172a;
+  --primary: #85144b;
+  --primary-foreground: #ffffff;
+  --secondary: #f3f4f6; /* gray-100 */
+  --secondary-foreground: #0f172a;
+  --muted: #f8fafc; /* gray-50 */
+  --muted-foreground: #6b7280; /* gray-500 */
+  --accent: #85144b;
+  --accent-foreground: #ffffff;
+  --destructive: #ef4444;
+  --border: #e6e7ea;
+  --input: #f8fafc;
+  --ring: rgba(133, 20, 75, 0.15);
+  --chart-1: #7c2b4a;
+  --chart-2: #a14b6b;
+  --chart-3: #d5a3b8;
+  --chart-4: #f0cfe1;
+  --chart-5: #fdeef5;
+  --sidebar: #ffffff;
+  --sidebar-foreground: #0f172a;
+  --sidebar-primary: #85144b;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #85144b;
+  --sidebar-accent-foreground: #ffffff;
+  --sidebar-border: #e6e7ea;
+  --sidebar-ring: rgba(133, 20, 75, 0.15);
 }
 
 .dark {
-  --background: oklch(0.147 0.004 49.25);
-  --foreground: oklch(0.985 0.001 106.423);
-  --card: oklch(0.216 0.006 56.043);
-  --card-foreground: oklch(0.985 0.001 106.423);
-  --popover: oklch(0.216 0.006 56.043);
-  --popover-foreground: oklch(0.985 0.001 106.423);
-  --primary: oklch(0.923 0.003 48.717);
-  --primary-foreground: oklch(0.216 0.006 56.043);
-  --secondary: oklch(0.268 0.007 34.298);
-  --secondary-foreground: oklch(0.985 0.001 106.423);
-  --muted: oklch(0.268 0.007 34.298);
-  --muted-foreground: oklch(0.709 0.01 56.259);
-  --accent: oklch(0.268 0.007 34.298);
-  --accent-foreground: oklch(0.985 0.001 106.423);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.553 0.013 58.071);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.216 0.006 56.043);
-  --sidebar-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-accent: oklch(0.268 0.007 34.298);
-  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.553 0.013 58.071);
+  /* Dark theme: keep the maroon primary but swap background/foreground */
+  --background: #0f172a; /* slate-900 */
+  --foreground: #ffffff;
+  --card: #0f172a;
+  --card-foreground: #ffffff;
+  --popover: #0f172a;
+  --popover-foreground: #ffffff;
+  --primary: #85144b;
+  --primary-foreground: #ffffff;
+  --secondary: #1f2937;
+  --secondary-foreground: #ffffff;
+  --muted: #1f2937;
+  --muted-foreground: #9ca3af;
+  --accent: #85144b;
+  --accent-foreground: #ffffff;
+  --destructive: #ef4444;
+  --border: rgba(255, 255, 255, 0.08);
+  --input: rgba(255, 255, 255, 0.04);
+  --ring: rgba(133, 20, 75, 0.2);
+  --chart-1: #7c2b4a;
+  --chart-2: #a14b6b;
+  --chart-3: #d5a3b8;
+  --chart-4: #f0cfe1;
+  --chart-5: #fdeef5;
+  --sidebar: #0f172a;
+  --sidebar-foreground: #ffffff;
+  --sidebar-primary: #85144b;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #85144b;
+  --sidebar-accent-foreground: #ffffff;
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+  --sidebar-ring: rgba(133, 20, 75, 0.2);
 }
 
 @layer base {
@@ -121,6 +123,18 @@
   }
 }
 
+/* Make headings use the primary maroon color */
+@layer base {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--primary);
+  }
+}
+
 /* React MD Editor styles */
 .w-md-editor {
   background-color: hsl(var(--background));
diff --git a/09-with-tests/src/components/nav/nav-bar.tsx b/09-with-tests/src/components/nav/nav-bar.tsx
index e4771d5..134ca65 100644
--- a/09-with-tests/src/components/nav/nav-bar.tsx
+++ b/09-with-tests/src/components/nav/nav-bar.tsx
@@ -17,7 +17,7 @@ export default async function NavBar() {
         <div className="flex items-center gap-2">
           <Link
             href="/"
-            className="font-bold text-xl tracking-tight text-gray-900"
+            className="font-bold text-xl tracking-tight text-primary"
           >
             Wikimasters
           </Link>
diff --git a/09-with-tests/src/components/ui/wiki-card.tsx b/09-with-tests/src/components/ui/wiki-card.tsx
index bf9bed2..bc48fbe 100644
--- a/09-with-tests/src/components/ui/wiki-card.tsx
+++ b/09-with-tests/src/components/ui/wiki-card.tsx
@@ -31,7 +31,7 @@ export function WikiCard({
           <span>•</span>
           <span>{date}</span>
         </div>
-        <CardTitle className="text-lg">{title}</CardTitle>
+        <CardTitle className="text-lg text-primary">{title}</CardTitle>
       </CardHeader>
       <CardContent className="py-0">
         <CardDescription>{summary}</CardDescription>
@@ -39,7 +39,7 @@ export function WikiCard({
       <CardFooter className="pt-2">
         <Link
           href={href}
-          className="text-blue-600 hover:underline text-sm font-medium w-fit"
+          className="text-primary hover:underline text-sm font-medium w-fit"
         >
           Read article &rarr;
         </Link>
diff --git a/09-with-tests/src/components/wiki-article-viewer.tsx b/09-with-tests/src/components/wiki-article-viewer.tsx
index 2c7b7b8..0283fad 100644
--- a/09-with-tests/src/components/wiki-article-viewer.tsx
+++ b/09-with-tests/src/components/wiki-article-viewer.tsx
@@ -74,13 +74,13 @@ export default function WikiArticleViewer({
           Home
         </Link>
         <ChevronRight className="h-4 w-4" />
-        <span className="text-foreground font-medium">{article.title}</span>
+        <span className="text-primary font-medium">{article.title}</span>
       </nav>
 
       {/* Article Header */}
       <div className="flex justify-between items-start mb-6">
         <div className="flex-1">
-          <h1 className="text-4xl font-bold text-foreground mb-4">
+          <h1 className="text-4xl font-bold text-primary mb-4">
             {article.title}
           </h1>
 
@@ -155,17 +155,17 @@ export default function WikiArticleViewer({
               components={{
                 // Customize heading styles
                 h1: ({ children }) => (
-                  <h1 className="text-3xl font-bold mt-8 mb-4 text-foreground">
+                  <h1 className="text-3xl font-bold mt-8 mb-4 text-primary">
                     {children}
                   </h1>
                 ),
                 h2: ({ children }) => (
-                  <h2 className="text-2xl font-semibold mt-6 mb-3 text-foreground">
+                  <h2 className="text-2xl font-semibold mt-6 mb-3 text-primary">
                     {children}
                   </h2>
                 ),
                 h3: ({ children }) => (
-                  <h3 className="text-xl font-semibold mt-4 mb-2 text-foreground">
+                  <h3 className="text-xl font-semibold mt-4 mb-2 text-primary">
                     {children}
                   </h3>
                 ),