diff --git a/sql/auth/user_preferences.sql b/sql/auth/user_preferences.sql
index b16b5ab..8078c4f 100644
--- a/sql/auth/user_preferences.sql
+++ b/sql/auth/user_preferences.sql
@@ -3,37 +3,35 @@ CREATE TABLE IF NOT EXISTS user_preferences (
   id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
   user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
   hide_from_leaderboard BOOLEAN NOT NULL DEFAULT false,
+  theme TEXT NOT NULL DEFAULT 'light',
   created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
   updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
   UNIQUE(user_id)
 );
-
 -- Create RLS policies for user_preferences table
 ALTER TABLE user_preferences ENABLE ROW LEVEL SECURITY;
-
+-- Drop existing policies if they exist
+DROP POLICY IF EXISTS "Users can read their own preferences" ON user_preferences;
+DROP POLICY IF EXISTS "Users can insert their own preferences" ON user_preferences;
+DROP POLICY IF EXISTS "Users can update their own preferences" ON user_preferences;
 -- Users can read their own preferences
 CREATE POLICY "Users can read their own preferences" ON user_preferences FOR
 SELECT USING (auth.uid() = user_id);
-
 -- Users can insert their own preferences
 CREATE POLICY "Users can insert their own preferences" ON user_preferences FOR
 INSERT WITH CHECK (auth.uid() = user_id);
-
 -- Users can update their own preferences
 CREATE POLICY "Users can update their own preferences" ON user_preferences FOR
 UPDATE USING (auth.uid() = user_id);
-
 -- Create function to automatically create user preferences on new user creation
-CREATE OR REPLACE FUNCTION public.handle_new_user_preferences() RETURNS TRIGGER AS $$ 
-BEGIN
-  INSERT INTO public.user_preferences (user_id, hide_from_leaderboard)
-  VALUES (NEW.id, false);
-  RETURN NEW;
+CREATE OR REPLACE FUNCTION public.handle_new_user_preferences() RETURNS TRIGGER AS $$ BEGIN
+INSERT INTO public.user_preferences (user_id, hide_from_leaderboard, theme)
+VALUES (NEW.id, false, 'light');
+RETURN NEW;
 END;
 $$ LANGUAGE plpgsql SECURITY DEFINER;
-
 -- Create trigger to call the function when a new user is created
 DROP TRIGGER IF EXISTS on_auth_user_created_preferences ON auth.users;
 CREATE TRIGGER on_auth_user_created_preferences
-AFTER INSERT ON auth.users 
-FOR EACH ROW EXECUTE FUNCTION public.handle_new_user_preferences();
+AFTER
+INSERT ON auth.users FOR EACH ROW EXECUTE FUNCTION public.handle_new_user_preferences();
\ No newline at end of file
diff --git a/src/app.css b/src/app.css
index 14a18ea..54ff7d0 100644
--- a/src/app.css
+++ b/src/app.css
@@ -5,27 +5,27 @@
 @layer theme {
   :root {
     /* Fonts */
-    --font-sans:
-      Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-      'Open Sans', 'Helvetica Neue', sans-serif;
+    --font-sans: 'Courier New', Courier, monospace;
     --font-mono: 'Fira Mono', monospace;
 
-    /* Colors */
+    /* Colors - Retro Computer Theme - Blue & Pink */
+    /* These are the default colors that will be overridden by theme selection */
+    /* The same variables are defined in src/lib/theme-options/retro-blue-light.js */
     --color-white: oklch(1 0 0);
     --color-black: oklch(0 0 0);
-    --color-primary: oklch(0.12 0 0);
-    --color-secondary: oklch(0.19 0 0);
-    --color-tertiary: oklch(0.28 0 0);
-    --color-accent: oklch(0.65 0.26 296.88);
-    --color-heading: oklch(1 0 0 / 0.87);
-    --color-text: oklch(1 0 0 / 0.6);
-    --color-text-muted: oklch(1 0 0 / 0.4);
-    --color-background: oklch(0.19 0 0 / 0.7);
-    --color-border: oklch(0.44 0 0);
-    --color-link: oklch(0.65 0.26 296.88);
-    --color-link-subtle: oklch(0.8 0.1 296.88);
-    --color-link-nav: oklch(1 0 0 / 0.8);
-    --color-username: oklch(0.65 0.26 296.88); /* Purple color for usernames */
+    --color-primary: oklch(0.9 0.03 240); /* Light blue background */
+    --color-secondary: oklch(0.95 0.02 240); /* Lighter blue for cards */
+    --color-tertiary: oklch(0.85 0.04 240); /* Slightly darker blue for headers */
+    --color-accent: oklch(0.7 0.2 350); /* Pink accent */
+    --color-heading: oklch(0.2 0 0 / 0.9); /* Dark text for headings */
+    --color-text: oklch(0.2 0 0 / 0.8); /* Dark text for body */
+    --color-text-muted: oklch(0.2 0 0 / 0.5); /* Muted dark text */
+    --color-background: oklch(0.9 0.03 240 / 0.7); /* Transparent blue background */
+    --color-border: oklch(0.75 0.05 240); /* Border color */
+    --color-link: oklch(0.7 0.2 350); /* Pink links */
+    --color-link-subtle: oklch(0.75 0.15 350); /* Subtle pink links */
+    --color-link-nav: oklch(0.2 0 0 / 0.9); /* Dark nav links */
+    --color-username: oklch(0.6 0.25 30); /* Orange for usernames */
     --color-solved-row: color-mix(
       in oklab,
       rgb(34 197 94) 15%,
@@ -74,6 +74,12 @@ body {
   background-color: var(--color-primary);
   color: var(--color-text);
   overscroll-behavior: none;
+  font-family: var(--font-sans);
+  background-image: linear-gradient(
+    to bottom,
+    var(--color-primary),
+    color-mix(in oklab, var(--color-primary) 90%, var(--color-tertiary))
+  );
 }
 
 #app {
@@ -190,31 +196,34 @@ img {
 /* Component styles */
 .card {
   background-color: var(--color-secondary);
-  border-radius: 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--color-border);
   padding: 1.5rem;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
   margin-bottom: 1rem;
 }
 
 .table {
   width: 100%;
   border-collapse: collapse;
+  border: 1px solid var(--color-border);
 }
 
 .table th {
   text-align: left;
   padding: 0.75rem;
-  border-bottom: 1px solid var(--color-tertiary);
+  border-bottom: 1px solid var(--color-border);
   color: var(--color-heading);
+  background-color: var(--color-tertiary);
 }
 
 .table td {
   padding: 0.75rem;
-  border-bottom: 1px solid var(--color-tertiary);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .table tr:hover {
-  background-color: var(--color-tertiary);
+  background-color: color-mix(in oklab, var(--color-tertiary) 50%, transparent);
 }
 
 .badge {
@@ -228,16 +237,19 @@ img {
 .badge-easy {
   background-color: oklch(0.73 0.2 142.5);
   color: white;
+  border: 1px solid oklch(0.63 0.2 142.5);
 }
 
 .badge-medium {
   background-color: oklch(0.71 0.19 54.65);
   color: white;
+  border: 1px solid oklch(0.61 0.19 54.65);
 }
 
 .badge-hard {
   background-color: oklch(0.65 0.27 29.23);
   color: white;
+  border: 1px solid oklch(0.55 0.27 29.23);
 }
 
 /* Responsive utilities */
@@ -302,3 +314,14 @@ img {
   width: 100%;
   margin: 0 auto;
 }
+
+/* Dark theme specific overrides */
+body.dark-theme .text-red-500,
+body.dark-theme .text-red-600,
+body.dark-theme .text-red-700 {
+  color: rgb(252, 165, 165) !important; /* lighter red for dark theme */
+}
+
+body.dark-theme .text-[var(--color-accent)] {
+  color: rgb(252, 165, 165) !important; /* lighter red for dark theme */
+}
diff --git a/src/app.html b/src/app.html
index 7c51eb5..c7852f5 100644
--- a/src/app.html
+++ b/src/app.html
@@ -7,6 +7,69 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
     />
+    <!-- Preload styles to prevent theme flashing -->
+    <style>
+      :root {
+        /* Default light theme colors to prevent flashing */
+        --color-primary: oklch(0.9 0.03 240);
+        --color-secondary: oklch(0.95 0.02 240);
+        --color-tertiary: oklch(0.85 0.04 240);
+        --color-accent: oklch(0.7 0.2 350);
+        --color-heading: oklch(0.2 0 0 / 0.9);
+        --color-text: oklch(0.2 0 0 / 0.8);
+        --color-text-muted: oklch(0.2 0 0 / 0.5);
+        --color-background: oklch(0.9 0.03 240 / 0.7);
+        --color-border: oklch(0.75 0.05 240);
+      }
+
+      body {
+        background-color: var(--color-primary);
+        color: var(--color-text);
+        font-family: 'Courier New', Courier, monospace;
+        transition:
+          background-color 0.3s ease,
+          color 0.3s ease;
+      }
+    </style>
+
+    <!-- Script to apply theme from localStorage immediately -->
+    <script>
+      (function () {
+        try {
+          const storedTheme = localStorage.getItem('gitgud-theme');
+          if (storedTheme === 'dark') {
+            // Add dark theme class to body
+            document.body.classList.add('dark-theme');
+            document.body.classList.remove('light-theme');
+
+            // Apply dark theme immediately
+            document.documentElement.style.setProperty('--color-primary', 'oklch(0.2 0.05 240)');
+            document.documentElement.style.setProperty('--color-secondary', 'oklch(0.25 0.04 240)');
+            document.documentElement.style.setProperty('--color-tertiary', 'oklch(0.15 0.06 240)');
+            document.documentElement.style.setProperty('--color-heading', 'oklch(0.9 0 0 / 0.9)');
+            document.documentElement.style.setProperty('--color-text', 'oklch(0.9 0 0 / 0.8)');
+            document.documentElement.style.setProperty(
+              '--color-text-muted',
+              'oklch(0.9 0 0 / 0.5)'
+            );
+            document.documentElement.style.setProperty(
+              '--color-background',
+              'oklch(0.2 0.05 240 / 0.7)'
+            );
+            document.documentElement.style.setProperty('--color-border', 'oklch(0.3 0.08 240)');
+            document.documentElement.style.setProperty('--color-link-nav', 'oklch(0.9 0 0 / 0.9)');
+            document.documentElement.style.setProperty('--color-link', 'oklch(0.85 0.25 350)');
+            document.documentElement.style.setProperty('--color-link-subtle', 'oklch(0.8 0.2 350)');
+          } else {
+            // Add light theme class to body
+            document.body.classList.add('light-theme');
+            document.body.classList.remove('dark-theme');
+          }
+        } catch (e) {
+          console.error('Error applying theme:', e);
+        }
+      })();
+    </script>
     %sveltekit.head%
   </head>
   <body>
diff --git a/src/lib/components/ContestTable.svelte b/src/lib/components/ContestTable.svelte
index e06c386..c1df5f5 100644
--- a/src/lib/components/ContestTable.svelte
+++ b/src/lib/components/ContestTable.svelte
@@ -148,14 +148,16 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
 </script>
 
 <div class="mt-4 w-full">
-  <div class="table-wrapper rounded-lg bg-[var(--color-secondary)] shadow-sm">
+  <div
+    class="table-wrapper rounded-md border-2 border-[var(--color-border)] bg-[var(--color-secondary)] shadow-[2px_2px_0_rgba(0,0,0,0.1)]"
+  >
     <table
-      class="w-full min-w-[900px] table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)]"
+      class="w-full min-w-[900px] table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)] font-mono text-sm"
     >
       <thead>
         <tr>
           <th
-            class="sticky top-0 z-10 w-[5%] cursor-pointer bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
+            class="sticky top-0 z-10 w-[5%] cursor-pointer border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
             on:click={handleParticipatedFilter}
             title="Filter by participation status"
           >
@@ -213,7 +215,7 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
             </div>
           </th>
           <th
-            class="sticky top-0 z-10 w-[6%] cursor-pointer bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
+            class="sticky top-0 z-10 w-[6%] cursor-pointer border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
             style="min-width: 50px;"
             on:click={handleTypeFilter}
             title="Filter by contest type"
@@ -224,7 +226,7 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
                   <div class="relative">
                     <img src={icpcLogo} alt="ICPC" class="h-6 w-6 object-contain" />
                     <div
-                      class="absolute -right-1 -bottom-1 h-3 w-3 rounded-full border border-white bg-[rgb(34_197_94)]"
+                      class="absolute -right-1 -bottom-1 h-3 w-3 rounded border border-white bg-[rgb(34_197_94)]"
                     ></div>
                   </div>
                 </span>
@@ -233,7 +235,7 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
                   <div class="relative">
                     <img src={codeforcesLogo} alt="Codeforces" class="h-5 w-5 object-contain" />
                     <div
-                      class="absolute -right-1 -bottom-1 h-3 w-3 rounded-full border border-white bg-[rgb(239_68_68)]"
+                      class="absolute -right-1 -bottom-1 h-3 w-3 rounded border border-white bg-[rgb(239_68_68)]"
                     ></div>
                   </div>
                 </span>
@@ -256,16 +258,18 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
               {/if}
             </div>
           </th>
-          <th class="sticky top-0 z-10 w-[34%] bg-[var(--color-tertiary)] p-3 text-left font-bold">
+          <th
+            class="sticky top-0 z-10 w-[34%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-left font-bold"
+          >
             Contest
           </th>
           <th
-            class="sticky top-0 z-10 w-[12%] bg-[var(--color-tertiary)] p-3 text-center font-bold"
+            class="sticky top-0 z-10 w-[12%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-center font-bold"
           >
             Duration
           </th>
           <th
-            class="sticky top-0 z-10 w-[15%] cursor-pointer bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
+            class="sticky top-0 z-10 w-[15%] cursor-pointer border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
             on:click={handleDifficultySort}
             title="Click to sort by difficulty"
           >
@@ -285,7 +289,9 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
               <span>Difficulty</span>
             </div>
           </th>
-          <th class="sticky top-0 z-10 w-[21%] bg-[var(--color-tertiary)] p-3 text-left font-bold">
+          <th
+            class="sticky top-0 z-10 w-[21%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-left font-bold"
+          >
             <div class="flex items-center gap-2">
               <RecommendersFilter
                 authors={uniqueAuthors}
@@ -298,7 +304,8 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
               />
             </div>
           </th>
-          <th class="sticky top-0 z-10 w-[5%] bg-[var(--color-tertiary)] p-3 text-right font-bold"
+          <th
+            class="sticky top-0 z-10 w-[5%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-right font-bold"
           ></th>
         </tr>
       </thead>
@@ -308,16 +315,16 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
             class="relative border-b border-[var(--color-border)] transition-colors duration-200 last:border-b-0
             ${contest.id && userParticipation.has(contest.id)
               ? 'border-l-4 border-l-[rgb(34_197_94)] bg-[var(--color-solved-row)]'
-              : 'hover:bg-black/5'}"
+              : 'hover:bg-[var(--color-tertiary)]/30'}"
           >
             <td class="p-3 text-center">
               {#if contest.id}
                 {@const hasParticipated = userParticipation.has(contest.id)}
                 <button
-                  class={`flex h-8 w-8 cursor-pointer items-center justify-center rounded-full shadow-sm transition-all duration-300
+                  class={`flex h-8 w-8 cursor-pointer items-center justify-center rounded shadow-[1px_1px_0_rgba(0,0,0,0.1)] transition-all duration-300
                     ${hasParticipated
-                      ? 'solved-button bg-[rgb(34_197_94)] text-white shadow-[0_0_8px_rgba(34,197,94,0.4)]'
-                      : 'border border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[rgb(34_197_94)] hover:bg-[color-mix(in_oklab,rgb(34_197_94)_10%,transparent)] hover:text-[rgb(34_197_94)] hover:shadow-[0_0_5px_rgba(34,197,94,0.2)]'
+                      ? 'bg-[rgb(34_197_94)] text-white'
+                      : 'border-2 border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[rgb(34_197_94)] hover:bg-[color-mix(in_oklab,rgb(34_197_94)_10%,transparent)] hover:text-[rgb(34_197_94)]'
                     } ${!isAuthenticated ? 'cursor-not-allowed opacity-50' : ''}`}
                   on:click={() => isAuthenticated && onToggleParticipation(contest.id!, !hasParticipated)}
                   title={hasParticipated ? 'Mark as not participated' : 'Mark as participated'}
@@ -326,8 +333,8 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
+                    width="18"
+                    height="18"
                     viewBox="0 0 24 24"
                     fill="none"
                     stroke="currentColor"
@@ -367,7 +374,7 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
             </td>
             <td class="p-3 text-center">
               {#if contest.difficulty !== undefined}
-                <span class={`text-lg font-bold ${getDifficultyColorClass(contest.difficulty)}`}>
+                <span class={`text-2xl font-bold ${getDifficultyColorClass(contest.difficulty)}`}>
                   {getDifficultyStars(contest.difficulty)}
                 </span>
               {:else}
@@ -392,7 +399,7 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
 
                   <!-- Like button -->
                   <button
-                    class={`flex cursor-pointer items-center gap-1 rounded border px-2 py-1 transition-all duration-200
+                    class={`flex cursor-pointer items-center gap-1 rounded border-2 px-2 py-1 transition-all duration-200
                       ${hasLiked
                         ? 'border-[color-mix(in_oklab,rgb(34_197_94)_50%,transparent)] bg-[color-mix(in_oklab,rgb(34_197_94)_10%,transparent)] text-[rgb(34_197_94)]'
                         : 'border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[color-mix(in_oklab,rgb(34_197_94)_50%,transparent)] hover:bg-[color-mix(in_oklab,rgb(34_197_94)_10%,transparent)] hover:text-[rgb(34_197_94)]'
@@ -407,8 +414,8 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
                   >
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
+                      width="18"
+                      height="18"
                       viewBox="0 0 24 24"
                       fill="none"
                       stroke="currentColor"
@@ -426,7 +433,7 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
 
                   <!-- Dislike button -->
                   <button
-                    class={`flex cursor-pointer items-center gap-1 rounded border px-2 py-1 transition-all duration-200
+                    class={`flex cursor-pointer items-center gap-1 rounded border-2 px-2 py-1 transition-all duration-200
                       ${hasDisliked
                         ? 'border-[color-mix(in_oklab,rgb(239_68_68)_50%,transparent)] bg-[color-mix(in_oklab,rgb(239_68_68)_10%,transparent)] text-[rgb(239_68_68)]'
                         : 'border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[color-mix(in_oklab,rgb(239_68_68)_50%,transparent)] hover:bg-[color-mix(in_oklab,rgb(239_68_68)_10%,transparent)] hover:text-[rgb(239_68_68)]'
@@ -441,8 +448,8 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
                   >
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
+                      width="18"
+                      height="18"
                       viewBox="0 0 24 24"
                       fill="none"
                       stroke="currentColor"
@@ -474,14 +481,14 @@ function getDifficultyColorClass(difficulty: number | undefined): string {
   position: relative;
 }
 
-/* Add smooth transitions for solved button */
-.solved-button {
-  transition: all 0.3s ease;
+/* Add smooth transitions for buttons */
+button {
+  transition: all 0.2s ease;
 }
 
 /* Add hover effects */
-tr:hover .solved-button:not(:hover) {
-  transform: scale(1.05);
+button:hover {
+  transform: translateY(1px);
 }
 
 /* Ensure proper text truncation */
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index bf7cbd1..5475327 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -123,7 +123,9 @@ $: if ($page) {
 }
 </script>
 
-<header class="sticky top-0 z-50 w-full bg-[var(--color-secondary)] py-3 shadow-sm">
+<header
+  class="sticky top-0 z-50 w-full border-b-2 border-[var(--color-border)] bg-[var(--color-secondary)] py-3 shadow-[2px_2px_0_rgba(0,0,0,0.1)]"
+>
   <div class="mx-auto flex max-w-[1200px] items-center justify-between px-3 sm:px-4 md:px-5">
     <div class="flex items-center">
       <a
@@ -132,15 +134,17 @@ $: if ($page) {
         class="flex items-center gap-2 pr-2 text-xl font-bold text-[var(--color-heading)] no-underline lg:pr-4"
       >
         <img src="/favicon.png" alt="gitgud Logo" class="h-12 w-12 object-contain" />
-        <span class="flex">
-          <span>gitgud</span><span class="hidden sm:inline">.cc</span>
+        <span class="flex font-bold tracking-wide">
+          <span class="text-[var(--color-accent)]">gitgud</span><span
+            class="hidden text-[var(--color-heading)] sm:inline">.cc</span
+          >
         </span>
       </a>
     </div>
 
     <!-- Mobile menu button -->
     <button
-      class="flex items-center rounded-md border border-[var(--color-border)] px-2 py-1 text-[var(--color-text)] lg:hidden"
+      class="flex items-center rounded-md border-2 border-[var(--color-border)] px-2 py-1 text-[var(--color-text)] transition-colors hover:bg-[var(--color-tertiary)] lg:hidden"
       aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
       on:click={toggleMobileMenu}
     >
@@ -173,7 +177,7 @@ $: if ($page) {
         >
           <a
             href="/"
-            class="block py-2 text-sm font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
+            class="block py-2 text-sm font-bold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
             >Problems</a
           >
         </li>
@@ -184,7 +188,7 @@ $: if ($page) {
         >
           <a
             href="/contests"
-            class="block py-2 text-sm font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
+            class="block py-2 text-sm font-bold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
             >Contests</a
           >
         </li>
@@ -195,7 +199,7 @@ $: if ($page) {
         >
           <a
             href="/leaderboard"
-            class="block py-2 text-sm font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
+            class="block py-2 text-sm font-bold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
             >Leaderboard</a
           >
         </li>
@@ -206,7 +210,7 @@ $: if ($page) {
         >
           <a
             href="/about"
-            class="block py-2 text-sm font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
+            class="block py-2 text-sm font-bold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
             >About</a
           >
         </li>
@@ -218,7 +222,7 @@ $: if ($page) {
           >
             <a
               href="/submit"
-              class="block py-2 text-sm font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
+              class="block py-2 text-sm font-bold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] lg:text-base"
               >Submit</a
             >
           </li>
@@ -264,7 +268,7 @@ $: if ($page) {
               </svg>
             </a>
             <button
-              class="cursor-pointer rounded border border-[var(--color-border)] bg-transparent px-3 py-1.5 text-sm font-semibold text-[var(--color-text)] transition-all duration-200 hover:bg-[color-mix(in_oklab,black_5%,transparent)]"
+              class="cursor-pointer rounded border-2 border-[var(--color-border)] bg-transparent px-3 py-1.5 text-sm font-bold text-[var(--color-text)] shadow-[1px_1px_0_rgba(0,0,0,0.1)] transition-all duration-200 hover:bg-[var(--color-tertiary)]"
               on:click={handleLogout}
             >
               Logout
@@ -272,7 +276,7 @@ $: if ($page) {
           </div>
         {:else}
           <button
-            class="cursor-pointer rounded border border-[#4285f4] bg-[#4285f4] px-3 py-1.5 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:border-[#3367d6] hover:bg-[#3367d6] hover:shadow"
+            class="cursor-pointer rounded border-2 border-[var(--color-accent)] bg-[var(--color-accent)] px-3 py-1.5 text-sm font-bold text-white shadow-[2px_2px_0_rgba(0,0,0,0.1)] transition-all duration-200 hover:shadow-[1px_1px_0_rgba(0,0,0,0.1)] hover:brightness-110"
             on:click={handleLogin}
             title="Login with GitHub"
           >
@@ -286,35 +290,35 @@ $: if ($page) {
   <!-- Mobile menu -->
   {#if mobileMenuOpen}
     <div
-      class="mt-3 border-t border-[var(--color-border)] bg-[var(--color-secondary)] px-4 py-4 shadow-md lg:hidden"
+      class="mt-3 border-t-2 border-[var(--color-border)] bg-[var(--color-secondary)] px-4 py-4 shadow-[2px_2px_0_rgba(0,0,0,0.1)] lg:hidden"
     >
       <nav class="flex flex-col gap-4">
         <ul class="m-0 flex list-none flex-col gap-4 p-0">
           <li>
             <a
               href="/"
-              class="block py-2 text-base font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/' ? 'text-[var(--color-accent)]' : ''}"
+              class="block py-2 text-base font-bold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/' ? 'text-[var(--color-accent)]' : ''}"
               >Problems</a
             >
           </li>
           <li>
             <a
               href="/contests"
-              class="block py-2 text-base font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/contests' ? 'text-[var(--color-accent)]' : ''}"
+              class="block py-2 text-base font-bold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/contests' ? 'text-[var(--color-accent)]' : ''}"
               >Contests</a
             >
           </li>
           <li>
             <a
               href="/leaderboard"
-              class="block py-2 text-base font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/leaderboard' ? 'text-[var(--color-accent)]' : ''}"
+              class="block py-2 text-base font-bold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/leaderboard' ? 'text-[var(--color-accent)]' : ''}"
               >Leaderboard</a
             >
           </li>
           <li>
             <a
               href="/about"
-              class="block py-2 text-base font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/about' ? 'text-[var(--color-accent)]' : ''}"
+              class="block py-2 text-base font-bold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/about' ? 'text-[var(--color-accent)]' : ''}"
               >About</a
             >
           </li>
@@ -322,7 +326,7 @@ $: if ($page) {
             <li>
               <a
                 href="/submit"
-                class="block py-2 text-base font-semibold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/submit' ? 'text-[var(--color-accent)]' : ''}"
+                class="block py-2 text-base font-bold text-[var(--color-heading)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)] {$page.url.pathname === '/submit' ? 'text-[var(--color-accent)]' : ''}"
                 >Submit</a
               >
             </li>
@@ -367,14 +371,14 @@ $: if ($page) {
               </a>
             </div>
             <button
-              class="cursor-pointer rounded border border-[var(--color-border)] bg-transparent px-3 py-1.5 text-sm font-semibold text-[var(--color-text)] transition-all duration-200 hover:bg-[color-mix(in_oklab,black_5%,transparent)]"
+              class="cursor-pointer rounded border-2 border-[var(--color-border)] bg-transparent px-3 py-1.5 text-sm font-bold text-[var(--color-text)] shadow-[1px_1px_0_rgba(0,0,0,0.1)] transition-all duration-200 hover:bg-[var(--color-tertiary)]"
               on:click={handleLogout}
             >
               Logout
             </button>
           {:else}
             <button
-              class="cursor-pointer rounded border border-[#4285f4] bg-[#4285f4] px-3 py-1.5 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:border-[#3367d6] hover:bg-[#3367d6] hover:shadow"
+              class="cursor-pointer rounded border-2 border-[var(--color-accent)] bg-[var(--color-accent)] px-3 py-1.5 text-sm font-bold text-white shadow-[2px_2px_0_rgba(0,0,0,0.1)] transition-all duration-200 hover:shadow-[1px_1px_0_rgba(0,0,0,0.1)] hover:brightness-110"
               on:click={handleLogin}
               title="Login with GitHub"
             >
@@ -410,12 +414,24 @@ header {
   right: 0;
 }
 
-/* Ensure username is always purple */
+/* Ensure username is always blue */
 a[href*='github.com'] {
   color: var(--color-username) !important;
+  text-decoration: none;
+  position: relative;
 }
 
 a[href*='github.com']:hover {
   color: color-mix(in oklab, var(--color-username) 80%, white) !important;
 }
+
+/* Add retro underline effect to nav links */
+li.relative a:hover {
+  text-decoration: none;
+}
+
+/* Add pixel-style border to buttons on hover */
+button:hover {
+  transform: translateY(1px);
+}
 </style>
diff --git a/src/lib/components/LeaderboardTable.svelte b/src/lib/components/LeaderboardTable.svelte
index ac1be4e..4120230 100644
--- a/src/lib/components/LeaderboardTable.svelte
+++ b/src/lib/components/LeaderboardTable.svelte
@@ -11,22 +11,26 @@ function formatNumber(num: number): string {
 </script>
 
 <div class="mt-4 w-full">
-  <div class="table-wrapper rounded-lg bg-[var(--color-secondary)] shadow-sm">
-    <table class="w-full table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)]">
+  <div
+    class="table-wrapper rounded-md border-2 border-[var(--color-border)] bg-[var(--color-secondary)] shadow-[2px_2px_0_rgba(0,0,0,0.1)]"
+  >
+    <table
+      class="w-full table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)] font-mono text-sm"
+    >
       <thead>
         <tr>
           <th
-            class="sticky top-0 z-10 w-[15%] bg-[var(--color-tertiary)] p-2 text-center font-bold sm:w-[10%] sm:p-3"
+            class="sticky top-0 z-10 w-[15%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-center font-bold sm:w-[10%] sm:p-3"
           >
             Rank
           </th>
           <th
-            class="sticky top-0 z-10 w-[55%] bg-[var(--color-tertiary)] p-2 text-left font-bold sm:w-[60%] sm:p-3"
+            class="sticky top-0 z-10 w-[55%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-left font-bold sm:w-[60%] sm:p-3"
           >
             User
           </th>
           <th
-            class="sticky top-0 z-10 w-[30%] bg-[var(--color-tertiary)] p-2 text-center font-bold sm:p-3"
+            class="sticky top-0 z-10 w-[30%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-2 text-center font-bold sm:p-3"
           >
             Solves
           </th>
@@ -35,25 +39,25 @@ function formatNumber(num: number): string {
       <tbody>
         {#each leaderboardEntries as entry}
           <tr
-            class="relative border-b border-[var(--color-border)] transition-colors duration-200 last:border-b-0 hover:bg-black/5"
+            class="relative border-b border-[var(--color-border)] transition-colors duration-200 last:border-b-0 hover:bg-[var(--color-tertiary)]/30"
           >
             <td class="p-2 text-center sm:p-3">
               <!-- Rank with special styling for top 3 -->
               {#if entry.rank === 1}
                 <span
-                  class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-[var(--color-legendary-grandmaster)] font-bold text-white"
+                  class="inline-flex h-8 w-8 items-center justify-center rounded bg-[var(--color-legendary-grandmaster)] font-bold text-white shadow-[1px_1px_0_rgba(0,0,0,0.1)]"
                 >
                   {entry.rank}
                 </span>
               {:else if entry.rank === 2}
                 <span
-                  class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-[var(--color-specialist)] font-bold text-white"
+                  class="inline-flex h-8 w-8 items-center justify-center rounded bg-[var(--color-specialist)] font-bold text-white shadow-[1px_1px_0_rgba(0,0,0,0.1)]"
                 >
                   {entry.rank}
                 </span>
               {:else if entry.rank === 3}
                 <span
-                  class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-[var(--color-pupil)] font-bold text-white"
+                  class="inline-flex h-8 w-8 items-center justify-center rounded bg-[var(--color-pupil)] font-bold text-white shadow-[1px_1px_0_rgba(0,0,0,0.1)]"
                 >
                   {entry.rank}
                 </span>
@@ -67,11 +71,11 @@ function formatNumber(num: number): string {
                   <img
                     src={entry.avatarUrl}
                     alt={entry.username}
-                    class="h-8 w-8 rounded-full border border-[var(--color-border)] sm:h-10 sm:w-10"
+                    class="h-8 w-8 rounded sm:h-10 sm:w-10"
                   />
                 {:else}
                   <div
-                    class="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--color-tertiary)] text-xs font-medium sm:h-10 sm:w-10 sm:text-sm"
+                    class="flex h-8 w-8 items-center justify-center rounded bg-[var(--color-tertiary)] text-xs font-medium shadow-[1px_1px_0_rgba(0,0,0,0.1)] sm:h-10 sm:w-10 sm:text-sm"
                   >
                     {entry.username.substring(0, 2).toUpperCase()}
                   </div>
diff --git a/src/lib/components/ProblemTable.svelte b/src/lib/components/ProblemTable.svelte
index d068212..f1d2095 100644
--- a/src/lib/components/ProblemTable.svelte
+++ b/src/lib/components/ProblemTable.svelte
@@ -127,14 +127,16 @@ function getDifficultyTooltip(problem: Problem): string {
 </script>
 
 <div class="mt-4 w-full">
-  <div class="table-wrapper rounded-lg bg-[var(--color-secondary)] shadow-sm">
+  <div
+    class="table-wrapper rounded-md border-2 border-[var(--color-border)] bg-[var(--color-secondary)] shadow-[2px_2px_0_rgba(0,0,0,0.1)]"
+  >
     <table
-      class="w-full min-w-[900px] table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)]"
+      class="w-full min-w-[900px] table-fixed border-collapse overflow-hidden bg-[var(--color-secondary)] font-mono text-sm"
     >
       <thead>
         <tr>
           <th
-            class="sticky top-0 z-10 w-[5%] cursor-pointer bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
+            class="sticky top-0 z-10 w-[5%] cursor-pointer border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
             on:click={handleSolvedFilter}
             title="Filter by solved status"
           >
@@ -194,7 +196,7 @@ function getDifficultyTooltip(problem: Problem): string {
             </div>
           </th>
           <th
-            class="sticky top-0 z-10 w-[5%] cursor-pointer bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
+            class="sticky top-0 z-10 w-[5%] cursor-pointer border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
             on:click={handleSourceFilter}
             title="Filter by source"
           >
@@ -204,7 +206,7 @@ function getDifficultyTooltip(problem: Problem): string {
                   <div class="relative">
                     <img src={codeforcesLogo} alt="Codeforces" class="h-5 w-5 object-contain" />
                     <div
-                      class="absolute -right-1 -bottom-1 h-3 w-3 rounded-full border border-white bg-[#3B5998]"
+                      class="absolute -right-1 -bottom-1 h-3 w-3 rounded border border-white bg-[#3B5998]"
                     ></div>
                   </div>
                 </span>
@@ -213,7 +215,7 @@ function getDifficultyTooltip(problem: Problem): string {
                   <div class="relative">
                     <img src={kattisLogo} alt="Kattis" class="h-5 w-5 object-contain" />
                     <div
-                      class="absolute -right-1 -bottom-1 h-3 w-3 rounded-full border border-white bg-[#f2ae00]"
+                      class="absolute -right-1 -bottom-1 h-3 w-3 rounded border border-white bg-[#f2ae00]"
                     ></div>
                   </div>
                 </span>
@@ -236,11 +238,12 @@ function getDifficultyTooltip(problem: Problem): string {
               {/if}
             </div>
           </th>
-          <th class="sticky top-0 z-10 w-[25%] bg-[var(--color-tertiary)] p-3 text-left font-bold"
+          <th
+            class="sticky top-0 z-10 w-[25%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-left font-bold"
             >Problem</th
           >
           <th
-            class="sticky top-0 z-10 w-[10%] cursor-pointer bg-[var(--color-tertiary)] p-3 py-4 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
+            class="sticky top-0 z-10 w-[10%] cursor-pointer border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 py-4 text-center font-bold transition-colors duration-200 hover:bg-[color-mix(in_oklab,var(--color-tertiary)_90%,var(--color-accent)_10%,transparent)]"
             on:click={handleDifficultySort}
             title="Click to sort by difficulty"
           >
@@ -260,10 +263,13 @@ function getDifficultyTooltip(problem: Problem): string {
               <span class="font-bold">Difficulty</span>
             </div>
           </th>
-          <th class="sticky top-0 z-10 w-[10%] bg-[var(--color-tertiary)] p-3 text-left font-bold"
+          <th
+            class="sticky top-0 z-10 w-[10%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-left font-bold"
             >Topic</th
           >
-          <th class="sticky top-0 z-10 w-[22%] bg-[var(--color-tertiary)] p-3 text-left font-bold">
+          <th
+            class="sticky top-0 z-10 w-[22%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-left font-bold"
+          >
             <div class="flex items-center gap-2">
               <RecommendersFilter
                 authors={uniqueAuthors}
@@ -275,7 +281,8 @@ function getDifficultyTooltip(problem: Problem): string {
               />
             </div>
           </th>
-          <th class="sticky top-0 z-10 w-[20%] bg-[var(--color-tertiary)] p-3 text-right font-bold"
+          <th
+            class="sticky top-0 z-10 w-[20%] border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-3 text-right font-bold"
           ></th>
         </tr>
       </thead>
@@ -285,16 +292,16 @@ function getDifficultyTooltip(problem: Problem): string {
             class="relative border-b border-[var(--color-border)] transition-colors duration-200 last:border-b-0
             ${problem.id && userSolvedProblems.has(problem.id)
               ? 'border-l-4 border-l-[rgb(34_197_94)] bg-[var(--color-solved-row)]'
-              : 'hover:bg-black/5'}"
+              : 'hover:bg-[var(--color-tertiary)]/30'}"
           >
             <td class="p-3 text-center">
               {#if problem.id}
                 {@const isSolved = userSolvedProblems.has(problem.id)}
                 <button
-                  class={`flex h-8 w-8 cursor-pointer items-center justify-center rounded-full shadow-sm transition-all duration-300
+                  class={`flex h-8 w-8 cursor-pointer items-center justify-center rounded shadow-[1px_1px_0_rgba(0,0,0,0.1)] transition-all duration-300
                     ${isSolved
-                      ? 'solved-button bg-[rgb(34_197_94)] text-white shadow-[0_0_8px_rgba(34,197,94,0.4)]'
-                      : 'border border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[rgb(34_197_94)] hover:bg-[color-mix(in_oklab,rgb(34_197_94)_10%,transparent)] hover:text-[rgb(34_197_94)] hover:shadow-[0_0_5px_rgba(34,197,94,0.2)]'
+                      ? 'bg-[rgb(34_197_94)] text-white'
+                      : 'border-2 border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[rgb(34_197_94)] hover:bg-[color-mix(in_oklab,rgb(34_197_94)_10%,transparent)] hover:text-[rgb(34_197_94)]'
                     } ${!isAuthenticated ? 'cursor-not-allowed opacity-50' : ''}`}
                   on:click={() => isAuthenticated && onToggleSolved(problem.id!, !isSolved)}
                   title={!isAuthenticated
@@ -336,7 +343,7 @@ function getDifficultyTooltip(problem: Problem): string {
                 href={problem.url}
                 target="_blank"
                 rel="noopener noreferrer"
-                class="text-[var(--color-text)] hover:text-[var(--color-accent)] hover:underline"
+                class="font-bold text-[var(--color-text)] hover:text-[var(--color-accent)] hover:underline"
                 title={problem.name}
               >
                 {problem.name}
@@ -344,7 +351,7 @@ function getDifficultyTooltip(problem: Problem): string {
             </td>
             <td class="p-3 text-center">
               <span
-                class="group relative inline-block rounded px-2 py-1 font-bold
+                class="group relative inline-block rounded border px-2 py-1 font-bold
                   text-white
                    {problem.source === 'codeforces' ? 'cursor-default' : 'cursor-help'}"
                 style="background-color: var(--color-{getRatingColor(problem.difficulty)})"
@@ -362,7 +369,7 @@ function getDifficultyTooltip(problem: Problem): string {
             <td class="p-3">
               {#if problem.type}
                 <span
-                  class="inline-block rounded bg-[var(--color-tertiary)] px-2 py-1 text-sm text-[var(--color-text)]"
+                  class="inline-block rounded border border-[var(--color-border)] bg-[var(--color-tertiary)] px-2 py-1 text-sm text-[var(--color-text)]"
                 >
                   {problem.type}
                 </span>
@@ -389,7 +396,7 @@ function getDifficultyTooltip(problem: Problem): string {
 
                   <!-- Like button -->
                   <button
-                    class={`flex cursor-pointer items-center gap-1 rounded border px-2 py-1 transition-all duration-200
+                    class={`flex cursor-pointer items-center gap-1 rounded border-2 px-2 py-1 shadow-[1px_1px_0_rgba(0,0,0,0.1)] transition-all duration-200
                       ${hasLiked
                         ? 'border-[color-mix(in_oklab,rgb(34_197_94)_50%,transparent)] bg-[color-mix(in_oklab,rgb(34_197_94)_10%,transparent)] text-[rgb(34_197_94)]'
                         : 'border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[color-mix(in_oklab,rgb(34_197_94)_50%,transparent)] hover:bg-[color-mix(in_oklab,rgb(34_197_94)_10%,transparent)] hover:text-[rgb(34_197_94)]'
@@ -423,7 +430,7 @@ function getDifficultyTooltip(problem: Problem): string {
 
                   <!-- Dislike button -->
                   <button
-                    class={`flex cursor-pointer items-center gap-1 rounded border px-2 py-1 transition-all duration-200
+                    class={`flex cursor-pointer items-center gap-1 rounded border-2 px-2 py-1 shadow-[1px_1px_0_rgba(0,0,0,0.1)] transition-all duration-200
                       ${hasDisliked
                         ? 'border-[color-mix(in_oklab,rgb(239_68_68)_50%,transparent)] bg-[color-mix(in_oklab,rgb(239_68_68)_10%,transparent)] text-[rgb(239_68_68)]'
                         : 'border-[var(--color-border)] bg-transparent text-[var(--color-text)] hover:border-[color-mix(in_oklab,rgb(239_68_68)_50%,transparent)] hover:bg-[color-mix(in_oklab,rgb(239_68_68)_10%,transparent)] hover:text-[rgb(239_68_68)]'
@@ -497,22 +504,18 @@ td:last-child {
   width: 100%;
 }
 
-/* Add subtle animation for solved problems */
+/* Basic styling for elements */
 tr {
   overflow: hidden;
 }
 
-/* Checkmark animation */
-.solved-button {
-  animation: pulse 1.5s infinite alternate;
+/* Button transitions */
+button {
+  transition: all 0.2s ease;
 }
 
 .checkmark-icon {
-  transition: transform 0.3s ease;
-}
-
-.solved-button .checkmark-icon {
-  transform: scale(1.1);
+  transition: transform 0.2s ease;
 }
 
 /* Sortable header styles */
@@ -522,21 +525,19 @@ th {
 
 /* Select styling is now handled in the RecommendersFilter component */
 
-/* Ensure username is always purple */
+/* Ensure username is always blue */
 a[href*='github.com'] {
   color: var(--color-username) !important;
+  text-decoration: none;
 }
 
 a[href*='github.com']:hover {
   color: color-mix(in oklab, var(--color-username) 80%, white) !important;
+  text-decoration: underline;
 }
 
-@keyframes pulse {
-  0% {
-    box-shadow: 0 0 5px rgba(34, 197, 94, 0.4);
-  }
-  100% {
-    box-shadow: 0 0 10px rgba(34, 197, 94, 0.7);
-  }
+/* Add pixel-style border to buttons on hover */
+button:hover {
+  transform: translateY(1px);
 }
 </style>
diff --git a/src/lib/components/ThemeSwitcher.svelte b/src/lib/components/ThemeSwitcher.svelte
new file mode 100644
index 0000000..b66923a
--- /dev/null
+++ b/src/lib/components/ThemeSwitcher.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+import { browser } from '$app/environment';
+import { onMount } from 'svelte';
+import { AVAILABLE_THEMES } from '../theme';
+import { retroBeigeTheme } from '../theme-options/retro-beige';
+import { retroPurpleTheme } from '../theme-options/retro-purple';
+import { retroTealTheme } from '../theme-options/retro-teal';
+import { retroBlueLightTheme } from '../theme-options/retro-blue-light';
+import { retroBlueDarkTheme } from '../theme-options/retro-blue-dark';
+
+// Current theme (default is the blue light theme)
+let currentTheme = 'retro-blue-light';
+
+// Use the themes from the constants
+const themes = AVAILABLE_THEMES;
+
+// Load theme from localStorage on mount
+onMount(() => {
+  if (browser) {
+    const savedTheme = localStorage.getItem('gitgud-theme');
+    if (savedTheme) {
+      applyTheme(savedTheme);
+    } else {
+      // Apply default theme (blue light)
+      applyTheme('retro-blue-light');
+    }
+  }
+});
+
+// Function to apply a theme
+function applyTheme(themeId: string) {
+  currentTheme = themeId;
+
+  // Save theme preference to localStorage
+  if (browser) {
+    localStorage.setItem('gitgud-theme', themeId);
+  }
+
+  // Apply the selected theme
+  let themeColors = '';
+
+  switch (themeId) {
+    case 'retro-blue-light':
+      themeColors = retroBlueLightTheme.colors;
+      break;
+    case 'retro-blue-dark':
+      themeColors = retroBlueDarkTheme.colors;
+      break;
+    case 'retro-beige':
+      themeColors = retroBeigeTheme.colors;
+      break;
+    case 'retro-purple':
+      themeColors = retroPurpleTheme.colors;
+      break;
+    case 'retro-teal':
+      themeColors = retroTealTheme.colors;
+      break;
+    default:
+      // Use the blue-pink theme that's already in app.css
+      break;
+  }
+
+  // If we have theme colors to apply, create a style element and add it to the head
+  if (themeColors) {
+    // Remove any existing theme style element
+    const existingTheme = document.getElementById('theme-colors');
+    if (existingTheme) {
+      existingTheme.remove();
+    }
+
+    // Create a new style element
+    const style = document.createElement('style');
+    style.id = 'theme-colors';
+    style.textContent = `:root {${themeColors}}`;
+    document.head.appendChild(style);
+  }
+}
+</script>
+
+<div
+  class="theme-switcher rounded border-2 border-[var(--color-border)] bg-[var(--color-secondary)] p-4 shadow-[2px_2px_0_rgba(0,0,0,0.1)]"
+>
+  <h3 class="mb-3 font-bold">Theme Switcher</h3>
+  <div class="flex flex-wrap gap-2">
+    {#each themes as theme}
+      <button
+        class="rounded border-2 border-[var(--color-border)] px-3 py-2 text-sm font-bold shadow-[1px_1px_0_rgba(0,0,0,0.1)] transition-all duration-200 hover:bg-[var(--color-tertiary)] hover:shadow-none {currentTheme === theme.id ? 'bg-[var(--color-accent)] text-white' : 'bg-[var(--color-secondary)] text-[var(--color-text)]'}"
+        on:click={() => applyTheme(theme.id)}
+        title={theme.description}
+      >
+        {theme.name}
+      </button>
+    {/each}
+  </div>
+</div>
+
+<style>
+.theme-switcher {
+  max-width: 100%;
+  margin-bottom: 1rem;
+}
+
+button:hover {
+  transform: translateY(1px);
+}
+</style>
diff --git a/src/lib/components/TopicSidebar.svelte b/src/lib/components/TopicSidebar.svelte
index 60a112c..9b69ff5 100644
--- a/src/lib/components/TopicSidebar.svelte
+++ b/src/lib/components/TopicSidebar.svelte
@@ -106,8 +106,8 @@ onMount(() => {
       <button
         class={`w-full rounded-md px-3 py-2 text-left transition-all duration-200 ${
           selectedTopic === null
-            ? 'scale-102 bg-[var(--color-secondary)] text-white shadow-sm'
-            : 'text-[var(--color-text)] hover:scale-102 hover:bg-[var(--color-tertiary)] hover:shadow-sm'
+            ? 'scale-102 bg-[var(--color-accent)] text-white shadow-sm'
+            : 'text-[var(--color-heading)] hover:scale-102 hover:bg-[var(--color-tertiary)] hover:text-[var(--color-heading)] hover:shadow-sm'
         }`}
         on:click={() => onSelectTopic(null)}
       >
@@ -118,8 +118,8 @@ onMount(() => {
         <button
           class={`w-full rounded-md px-3 py-2 text-left transition-all duration-200 ${
             selectedTopic === topic
-              ? 'scale-102 bg-[var(--color-secondary)] text-white shadow-sm'
-              : 'text-[var(--color-text)] hover:scale-102 hover:bg-[var(--color-tertiary)] hover:shadow-sm'
+              ? 'scale-102 bg-[var(--color-accent)] text-white shadow-sm'
+              : 'text-[var(--color-heading)] hover:scale-102 hover:bg-[var(--color-tertiary)] hover:text-[var(--color-heading)] hover:shadow-sm'
           }`}
           on:click={() => onSelectTopic(topic)}
         >
@@ -140,8 +140,8 @@ onMount(() => {
       <button
         class={`w-full rounded-md px-3 py-2 text-left transition-all duration-200 ${
           selectedTopic === null
-            ? 'scale-102 bg-[var(--color-primary)] text-white shadow-sm'
-            : 'text-[var(--color-text)] hover:scale-102 hover:bg-[var(--color-tertiary)] hover:shadow-sm'
+            ? 'scale-102 bg-[var(--color-accent)] text-white shadow-sm'
+            : 'text-[var(--color-heading)] hover:scale-102 hover:bg-[var(--color-tertiary)] hover:text-[var(--color-heading)] hover:shadow-sm'
         }`}
         on:click={() => onSelectTopic(null)}
       >
@@ -152,8 +152,8 @@ onMount(() => {
         <button
           class={`w-full rounded-md px-3 py-2 text-left transition-all duration-200 ${
             selectedTopic === topic
-              ? 'scale-102 bg-[var(--color-primary)] text-white shadow-sm'
-              : 'text-[var(--color-text)] hover:scale-102 hover:bg-[var(--color-tertiary)] hover:shadow-sm'
+              ? 'scale-102 bg-[var(--color-accent)] text-white shadow-sm'
+              : 'text-[var(--color-heading)] hover:scale-102 hover:bg-[var(--color-tertiary)] hover:text-[var(--color-heading)] hover:shadow-sm'
           }`}
           on:click={() => onSelectTopic(topic)}
         >
diff --git a/src/lib/services/theme.ts b/src/lib/services/theme.ts
new file mode 100644
index 0000000..c057121
--- /dev/null
+++ b/src/lib/services/theme.ts
@@ -0,0 +1,114 @@
+/**
+ * Theme management service
+ */
+import { browser } from '$app/environment';
+import { writable, get } from 'svelte/store';
+import { retroBlueLightTheme } from '../theme-options/retro-blue-light';
+import { retroBlueDarkTheme } from '../theme-options/retro-blue-dark';
+import { fetchUserPreferences, updateUserPreferences } from './user';
+import { user } from './auth';
+
+// Theme store
+export const currentTheme = writable<string>('light');
+
+/**
+ * Apply a theme to the document
+ * @param theme - The theme to apply ('light' or 'dark')
+ */
+export function applyTheme(theme: string): void {
+  if (!browser) return;
+
+  // Update the store
+  currentTheme.set(theme);
+
+  // Apply the selected theme
+  let themeColors = '';
+
+  switch (theme) {
+    case 'dark':
+      themeColors = retroBlueDarkTheme.colors;
+      // Add a class to the body for easier CSS targeting
+      document.body.classList.add('dark-theme');
+      document.body.classList.remove('light-theme');
+      break;
+    case 'light':
+    default:
+      themeColors = retroBlueLightTheme.colors;
+      // Add a class to the body for easier CSS targeting
+      document.body.classList.add('light-theme');
+      document.body.classList.remove('dark-theme');
+      break;
+  }
+
+  // If we have theme colors to apply, create a style element and add it to the head
+  if (themeColors) {
+    // Remove any existing theme style element
+    const existingTheme = document.getElementById('theme-colors');
+    if (existingTheme) {
+      existingTheme.remove();
+    }
+
+    // Create a new style element
+    const style = document.createElement('style');
+    style.id = 'theme-colors';
+    style.textContent = `:root {${themeColors}}`;
+    document.head.appendChild(style);
+  }
+}
+
+/**
+ * Save theme preference to database
+ * @param theme - The theme to save ('light' or 'dark')
+ */
+export async function saveThemePreference(theme: string): Promise<boolean> {
+  if (!browser) return false;
+
+  // Check if user is authenticated
+  const currentUser = get(user);
+  if (!currentUser) return false;
+
+  try {
+    // Get current preferences
+    const preferences = await fetchUserPreferences();
+    if (!preferences) return false;
+
+    // Update theme preference
+    preferences.theme = theme;
+
+    // Save to database
+    return await updateUserPreferences(preferences);
+  } catch (err) {
+    console.error('Failed to save theme preference:', err);
+    return false;
+  }
+}
+
+/**
+ * Load theme preference from database
+ */
+export async function loadThemePreference(): Promise<void> {
+  if (!browser) return;
+
+  try {
+    // Get current preferences
+    const preferences = await fetchUserPreferences();
+    if (!preferences) return;
+
+    // Apply theme
+    applyTheme(preferences.theme);
+
+    // Also save to localStorage for faster loading on next visit
+    localStorage.setItem('gitgud-theme', preferences.theme);
+  } catch (err) {
+    console.error('Failed to load theme preference:', err);
+  }
+}
+
+/**
+ * Toggle between light and dark themes
+ */
+export async function toggleTheme(): Promise<void> {
+  const theme = get(currentTheme) === 'light' ? 'dark' : 'light';
+  applyTheme(theme);
+  await saveThemePreference(theme);
+}
diff --git a/src/lib/services/user.ts b/src/lib/services/user.ts
index 750a781..f5ee9e7 100644
--- a/src/lib/services/user.ts
+++ b/src/lib/services/user.ts
@@ -10,6 +10,7 @@ import { get } from 'svelte/store';
  */
 export type UserPreferences = {
   hideFromLeaderboard: boolean;
+  theme: string;
 };
 
 /**
@@ -19,6 +20,7 @@ export type UserPreferencesRecord = {
   id: string;
   user_id: string;
   hide_from_leaderboard: boolean;
+  theme: string;
   created_at: string;
   updated_at: string;
 };
@@ -65,13 +67,15 @@ export async function fetchUserPreferences(): Promise<UserPreferences | null> {
         console.log('fetchUserPreferences: No preferences found, creating default');
         // Create default preferences
         const result = await updateUserPreferences({
-          hideFromLeaderboard: false
+          hideFromLeaderboard: false,
+          theme: 'light'
         });
 
         if (result) {
           console.log('fetchUserPreferences: Default preferences created');
           return {
-            hideFromLeaderboard: false
+            hideFromLeaderboard: false,
+            theme: 'light'
           };
         }
       }
@@ -86,7 +90,8 @@ export async function fetchUserPreferences(): Promise<UserPreferences | null> {
     console.log('fetchUserPreferences: Preferences found', data);
     const record = data as UserPreferencesRecord;
     return {
-      hideFromLeaderboard: record.hide_from_leaderboard
+      hideFromLeaderboard: record.hide_from_leaderboard,
+      theme: record.theme || 'light' // Provide default if not present
     };
   } catch (err) {
     console.error('fetchUserPreferences: Exception', err);
@@ -144,6 +149,7 @@ export async function updateUserPreferences(preferences: UserPreferences): Promi
         .from('user_preferences')
         .update({
           hide_from_leaderboard: preferences.hideFromLeaderboard,
+          theme: preferences.theme,
           updated_at: new Date().toISOString()
         })
         .eq('user_id', currentUser.id);
@@ -153,6 +159,7 @@ export async function updateUserPreferences(preferences: UserPreferences): Promi
       result = await supabase.from('user_preferences').insert({
         user_id: currentUser.id,
         hide_from_leaderboard: preferences.hideFromLeaderboard,
+        theme: preferences.theme,
         created_at: new Date().toISOString(),
         updated_at: new Date().toISOString()
       });
@@ -171,6 +178,7 @@ export async function updateUserPreferences(preferences: UserPreferences): Promi
           .from('user_preferences')
           .update({
             hide_from_leaderboard: preferences.hideFromLeaderboard,
+            theme: preferences.theme,
             updated_at: new Date().toISOString()
           })
           .eq('user_id', currentUser.id);
diff --git a/src/lib/theme-options/retro-beige.js b/src/lib/theme-options/retro-beige.js
new file mode 100644
index 0000000..b09882f
--- /dev/null
+++ b/src/lib/theme-options/retro-beige.js
@@ -0,0 +1,25 @@
+// Retro Beige Theme Configuration
+export const retroBeigeTheme = {
+  name: 'retro-beige',
+  description: 'A warm retro-inspired theme with beige background and brown accents',
+  author: 'gitgud team',
+  version: '1.0.0',
+  colors: `
+    /* Colors - Retro Beige Theme */
+    --color-white: oklch(1 0 0);
+    --color-black: oklch(0 0 0);
+    --color-primary: oklch(0.9 0.05 90); /* Light beige background */
+    --color-secondary: oklch(0.95 0.03 90); /* Lighter beige for cards */
+    --color-tertiary: oklch(0.85 0.07 90); /* Slightly darker beige for headers */
+    --color-accent: oklch(0.55 0.15 60); /* Brown accent */
+    --color-heading: oklch(0.2 0 0 / 0.9); /* Dark text for headings */
+    --color-text: oklch(0.2 0 0 / 0.8); /* Dark text for body */
+    --color-text-muted: oklch(0.2 0 0 / 0.5); /* Muted dark text */
+    --color-background: oklch(0.9 0.05 90 / 0.7); /* Transparent beige background */
+    --color-border: oklch(0.75 0.1 90); /* Border color */
+    --color-link: oklch(0.55 0.15 60); /* Brown links */
+    --color-link-subtle: oklch(0.6 0.1 60); /* Subtle brown links */
+    --color-link-nav: oklch(0.2 0 0 / 0.9); /* Dark nav links */
+    --color-username: oklch(0.5 0.2 200); /* Teal for usernames */
+  `
+};
diff --git a/src/lib/theme-options/retro-blue-dark.js b/src/lib/theme-options/retro-blue-dark.js
new file mode 100644
index 0000000..c44889d
--- /dev/null
+++ b/src/lib/theme-options/retro-blue-dark.js
@@ -0,0 +1,30 @@
+// Retro Blue Dark Theme Configuration
+export const retroBlueDarkTheme = {
+  name: 'retro-blue-dark',
+  description: 'A dark retro-inspired theme with deep blue background and pink accents',
+  author: 'gitgud team',
+  version: '1.0.0',
+  colors: `
+    /* Colors - Retro Blue Dark Theme */
+    --color-white: oklch(1 0 0);
+    --color-black: oklch(0 0 0);
+    --color-primary: oklch(0.2 0.05 240); /* Dark blue background */
+    --color-secondary: oklch(0.25 0.04 240); /* Slightly lighter blue for cards */
+    --color-tertiary: oklch(0.15 0.06 240); /* Darker blue for headers */
+    --color-accent: oklch(0.8 0.25 350); /* Brighter pink accent for dark theme */
+    --color-heading: oklch(0.9 0 0 / 0.9); /* Light text for headings */
+    --color-text: oklch(0.9 0 0 / 0.8); /* Light text for body */
+    --color-text-muted: oklch(0.9 0 0 / 0.5); /* Muted light text */
+    --color-background: oklch(0.2 0.05 240 / 0.7); /* Transparent dark blue background */
+    --color-border: oklch(0.3 0.08 240); /* Border color */
+    --color-link: oklch(0.85 0.25 350); /* Brighter pink links for better visibility */
+    --color-link-subtle: oklch(0.8 0.2 350); /* Brighter subtle pink links */
+    --color-link-nav: oklch(0.9 0 0 / 0.9); /* Light nav links */
+    --color-username: oklch(0.6 0.25 30); /* Orange for usernames */
+    --color-solved-row: color-mix(
+      in oklab,
+      rgb(34 197 94) 25%,
+      transparent
+    ); /* Dark green for solved rows */
+  `
+};
diff --git a/src/lib/theme-options/retro-blue-light.js b/src/lib/theme-options/retro-blue-light.js
new file mode 100644
index 0000000..c75a6e5
--- /dev/null
+++ b/src/lib/theme-options/retro-blue-light.js
@@ -0,0 +1,30 @@
+// Retro Blue Light Theme Configuration
+export const retroBlueLightTheme = {
+  name: 'retro-blue-light',
+  description: 'A retro-inspired theme with light blue background and pink accents',
+  author: 'gitgud team',
+  version: '1.0.0',
+  colors: `
+    /* Colors - Retro Blue Light Theme */
+    --color-white: oklch(1 0 0);
+    --color-black: oklch(0 0 0);
+    --color-primary: oklch(0.9 0.03 240); /* Light blue background */
+    --color-secondary: oklch(0.95 0.02 240); /* Lighter blue for cards */
+    --color-tertiary: oklch(0.85 0.04 240); /* Slightly darker blue for headers */
+    --color-accent: oklch(0.7 0.2 350); /* Pink accent */
+    --color-heading: oklch(0.2 0 0 / 0.9); /* Dark text for headings */
+    --color-text: oklch(0.2 0 0 / 0.8); /* Dark text for body */
+    --color-text-muted: oklch(0.2 0 0 / 0.5); /* Muted dark text */
+    --color-background: oklch(0.9 0.03 240 / 0.7); /* Transparent blue background */
+    --color-border: oklch(0.75 0.05 240); /* Border color */
+    --color-link: oklch(0.7 0.2 350); /* Pink links */
+    --color-link-subtle: oklch(0.75 0.15 350); /* Subtle pink links */
+    --color-link-nav: oklch(0.2 0 0 / 0.9); /* Dark nav links */
+    --color-username: oklch(0.6 0.25 30); /* Orange for usernames */
+    --color-solved-row: color-mix(
+      in oklab,
+      rgb(34 197 94) 15%,
+      transparent
+    ); /* Light green for solved rows */
+  `
+};
diff --git a/src/lib/theme-options/retro-purple.js b/src/lib/theme-options/retro-purple.js
new file mode 100644
index 0000000..48daf3d
--- /dev/null
+++ b/src/lib/theme-options/retro-purple.js
@@ -0,0 +1,25 @@
+// Retro Purple Theme Configuration
+export const retroPurpleTheme = {
+  name: 'retro-purple',
+  description: 'A vibrant retro-inspired theme with purple background and yellow accents',
+  author: 'gitgud team',
+  version: '1.0.0',
+  colors: `
+    /* Colors - Retro Purple Theme */
+    --color-white: oklch(1 0 0);
+    --color-black: oklch(0 0 0);
+    --color-primary: oklch(0.8 0.1 300); /* Light purple background */
+    --color-secondary: oklch(0.85 0.08 300); /* Lighter purple for cards */
+    --color-tertiary: oklch(0.75 0.12 300); /* Slightly darker purple for headers */
+    --color-accent: oklch(0.8 0.18 90); /* Yellow accent */
+    --color-heading: oklch(0.2 0 0 / 0.9); /* Dark text for headings */
+    --color-text: oklch(0.2 0 0 / 0.8); /* Dark text for body */
+    --color-text-muted: oklch(0.2 0 0 / 0.5); /* Muted dark text */
+    --color-background: oklch(0.8 0.1 300 / 0.7); /* Transparent purple background */
+    --color-border: oklch(0.7 0.15 300); /* Border color */
+    --color-link: oklch(0.8 0.18 90); /* Yellow links */
+    --color-link-subtle: oklch(0.75 0.15 90); /* Subtle yellow links */
+    --color-link-nav: oklch(0.2 0 0 / 0.9); /* Dark nav links */
+    --color-username: oklch(0.7 0.2 160); /* Green for usernames */
+  `
+};
diff --git a/src/lib/theme-options/retro-teal.js b/src/lib/theme-options/retro-teal.js
new file mode 100644
index 0000000..612cd65
--- /dev/null
+++ b/src/lib/theme-options/retro-teal.js
@@ -0,0 +1,25 @@
+// Retro Teal Theme Configuration
+export const retroTealTheme = {
+  name: 'retro-teal',
+  description: 'A fresh retro-inspired theme with teal background and coral accents',
+  author: 'gitgud team',
+  version: '1.0.0',
+  colors: `
+    /* Colors - Retro Teal Theme */
+    --color-white: oklch(1 0 0);
+    --color-black: oklch(0 0 0);
+    --color-primary: oklch(0.85 0.1 190); /* Light teal background */
+    --color-secondary: oklch(0.9 0.08 190); /* Lighter teal for cards */
+    --color-tertiary: oklch(0.8 0.12 190); /* Slightly darker teal for headers */
+    --color-accent: oklch(0.7 0.18 30); /* Coral accent */
+    --color-heading: oklch(0.2 0 0 / 0.9); /* Dark text for headings */
+    --color-text: oklch(0.2 0 0 / 0.8); /* Dark text for body */
+    --color-text-muted: oklch(0.2 0 0 / 0.5); /* Muted dark text */
+    --color-background: oklch(0.85 0.1 190 / 0.7); /* Transparent teal background */
+    --color-border: oklch(0.75 0.15 190); /* Border color */
+    --color-link: oklch(0.7 0.18 30); /* Coral links */
+    --color-link-subtle: oklch(0.75 0.15 30); /* Subtle coral links */
+    --color-link-nav: oklch(0.2 0 0 / 0.9); /* Dark nav links */
+    --color-username: oklch(0.6 0.2 270); /* Purple for usernames */
+  `
+};
diff --git a/src/lib/theme.js b/src/lib/theme.js
new file mode 100644
index 0000000..4bf4082
--- /dev/null
+++ b/src/lib/theme.js
@@ -0,0 +1,29 @@
+// Theme configuration
+export const theme = {
+  name: 'retro-blue',
+  description: 'A retro-inspired theme with blue background and pink accents',
+  author: 'gitgud team',
+  version: '1.0.0'
+};
+
+// Theme types
+export const THEME_TYPES = {
+  LIGHT: 'light',
+  DARK: 'dark'
+};
+
+// Available themes
+export const AVAILABLE_THEMES = [
+  {
+    id: 'light',
+    name: 'Light Mode',
+    type: THEME_TYPES.LIGHT,
+    description: 'Light blue background with pink accents'
+  },
+  {
+    id: 'dark',
+    name: 'Dark Mode',
+    type: THEME_TYPES.DARK,
+    description: 'Dark blue background with pink accents'
+  }
+];
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 62089e5..0a40015 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,7 +3,9 @@ import Footer from '$lib/components/Footer.svelte';
 import Header from '$lib/components/Header.svelte';
 import '../app.css';
 import { onMount } from 'svelte';
-import { initAuth } from '$lib/services/auth';
+import { initAuth, user } from '$lib/services/auth';
+import { loadThemePreference, applyTheme } from '$lib/services/theme';
+import { browser } from '$app/environment';
 
 let authSubscription: { subscription: { unsubscribe: () => void } } | null = null;
 
@@ -11,6 +13,26 @@ onMount(() => {
   // Initialize authentication
   const initializeAuth = async () => {
     authSubscription = await initAuth();
+
+    // Apply theme immediately to prevent flashing
+    if (browser) {
+      // Try to get theme from localStorage first for immediate application
+      // This prevents flashing while we wait for the database
+      const storedTheme = localStorage.getItem('gitgud-theme');
+      if (storedTheme) {
+        applyTheme(storedTheme);
+      } else {
+        // Default to light theme if nothing in localStorage
+        applyTheme('light');
+      }
+
+      // Load user's theme preference from database once authenticated
+      user.subscribe(async (currentUser) => {
+        if (currentUser) {
+          await loadThemePreference();
+        }
+      });
+    }
   };
 
   initializeAuth();
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index f736757..37fe6a1 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -9,7 +9,7 @@
 
 <div class="mx-auto max-w-3xl px-4 py-8">
   <section class="mb-10">
-    <h2 class="text-accent mb-4 text-2xl">gitgud</h2>
+    <h2 class="mb-4 text-2xl text-[var(--color-accent)]">gitgud.cc</h2>
     <p class="mb-4 leading-relaxed">
       gitgud is a collection of hand-picked problems. If you are new to competitive programming you
       can learn the fundamentals at some of these sites:
@@ -113,7 +113,7 @@
       </li>
     </ul>
 
-    <h3 class="text-accent mb-4 text-xl">Optimized for ICPC</h3>
+    <h3 class="mb-4 text-xl text-[var(--color-accent)]">Optimized for ICPC</h3>
     <ul class="mb-4 ml-6">
       <li class="mb-2 leading-relaxed">
         <a
@@ -245,7 +245,7 @@
   </section>
 
   <section class="mb-10">
-    <h2 class="text-accent mb-4 text-2xl">Contribute</h2>
+    <h2 class="mb-4 text-2xl text-[var(--color-accent)]">Contribute</h2>
     <p class="mb-4 leading-relaxed">
       gitgud is an open-source project, and we welcome contributions from the community. If you'd
       like to help improve gitgud, please check out our <a
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 1d4dac9..988cb51 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -6,9 +6,11 @@ import { fetchUserPreferences, updateUserPreferences } from '$lib/services/user'
 import type { UserPreferences } from '$lib/services/user';
 import type { Unsubscriber } from 'svelte/store';
 import { supabase } from '$lib/services/database';
+import { applyTheme } from '$lib/services/theme';
 
 let preferences: UserPreferences = {
-  hideFromLeaderboard: false
+  hideFromLeaderboard: false,
+  theme: 'light'
 };
 
 let loading: boolean = true;
@@ -28,18 +30,23 @@ async function loadPreferences(): Promise<void> {
     if (userPrefs) {
       console.log('loadPreferences: User preferences loaded', userPrefs);
       preferences = userPrefs;
+
+      // Apply theme immediately
+      applyTheme(preferences.theme);
     } else {
       console.log('loadPreferences: No preferences returned, using defaults');
       // If no preferences were returned, try to create them
       const result = await updateUserPreferences({
-        hideFromLeaderboard: false
+        hideFromLeaderboard: false,
+        theme: 'light'
       });
 
       if (result) {
         console.log('loadPreferences: Default preferences created');
         // Set the default preferences in the UI
         preferences = {
-          hideFromLeaderboard: false
+          hideFromLeaderboard: false,
+          theme: 'light'
         };
       } else {
         console.log('loadPreferences: Failed to create default preferences');
@@ -86,6 +93,25 @@ function toggleHideFromLeaderboard(): void {
   savePreferences();
 }
 
+// Toggle the theme setting
+function toggleTheme(): void {
+  // Toggle the theme
+  const newTheme = preferences.theme === 'light' ? 'dark' : 'light';
+  preferences.theme = newTheme;
+
+  // Apply theme immediately for better UX
+  applyTheme(newTheme);
+
+  // Save to localStorage for immediate persistence
+  localStorage.setItem('gitgud-theme', newTheme);
+
+  // Force a re-render by creating a new object
+  preferences = { ...preferences };
+
+  // Save to database
+  savePreferences();
+}
+
 // Initialize auth state and load preferences
 onMount(() => {
   // Create a flag to track if we've already checked auth
@@ -128,15 +154,19 @@ onMount(() => {
 
           const { data: prefData, error } = await supabase
             .from('user_preferences')
-            .select('hide_from_leaderboard')
+            .select('hide_from_leaderboard, theme')
             .eq('user_id', userId)
             .single();
 
           if (prefData && !error) {
             console.log('Direct preference check result:', prefData);
             preferences = {
-              hideFromLeaderboard: prefData.hide_from_leaderboard
+              hideFromLeaderboard: prefData.hide_from_leaderboard,
+              theme: prefData.theme || 'light'
             };
+
+            // Apply the theme immediately
+            applyTheme(preferences.theme);
             loading = false;
             return;
           } else {
@@ -203,10 +233,24 @@ onMount(() => {
 
 <div class="mx-auto w-full max-w-[1200px] px-4 py-6">
   {#if loading}
-    <div class="flex h-[200px] items-center justify-center">
-      <div
-        class="h-8 w-8 animate-spin rounded-full border-2 border-[var(--color-tertiary)] border-t-[var(--color-primary)]"
-      ></div>
+    <div class="flex h-[calc(100vh-4rem)] items-center justify-center py-2 text-center">
+      <div>
+        <svg
+          class="mx-auto h-10 w-10 animate-spin"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
+          ></circle>
+          <path
+            class="opacity-75"
+            fill="var(--color-primary)"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
+        </svg>
+        <p class="mt-2 text-[var(--color-text-muted)]">Loading settings...</p>
+      </div>
     </div>
   {:else}
     <div class="mb-4 flex h-6 justify-end">
@@ -218,8 +262,10 @@ onMount(() => {
       {/if}
     </div>
 
-    <div class="overflow-hidden rounded">
-      <div class="border-b border-[var(--color-border)] bg-[var(--color-tertiary)] p-4">
+    <div
+      class="overflow-hidden rounded-none border-2 border-[var(--color-border)] shadow-[2px_2px_0_rgba(0,0,0,0.1)]"
+    >
+      <div class="border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-4">
         <div class="flex items-center gap-2">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -240,10 +286,13 @@ onMount(() => {
         </div>
       </div>
 
-      <div class="bg-[var(--color-tertiary)] p-4">
+      <div class="bg-[var(--color-secondary)] p-4">
         <div class="flex items-center justify-between">
           <div>
             <p class="font-medium text-[var(--color-text)]">Hide from leaderboard</p>
+            <p class="text-sm text-[var(--color-text-muted)]">
+              Your profile will not be visible on the public leaderboard
+            </p>
           </div>
 
           <div class="w-11 flex-shrink-0">
@@ -251,21 +300,78 @@ onMount(() => {
               type="button"
               role="switch"
               aria-checked={preferences.hideFromLeaderboard}
-              class="relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2 focus:outline-none"
+              class="relative inline-flex h-6 w-11 cursor-pointer items-center rounded focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2 focus:outline-none"
               on:click={toggleHideFromLeaderboard}
               disabled={saving}
             >
               <span class="sr-only">Hide from leaderboard</span>
               <span
-                class="absolute h-full w-full rounded-full transition-colors duration-200 {preferences.hideFromLeaderboard ? 'bg-[var(--color-accent)]' : 'bg-[var(--color-text-muted)]'} {saving ? 'opacity-50' : ''}"
+                class="absolute h-full w-full rounded transition-colors duration-200 {preferences.hideFromLeaderboard ? 'bg-[var(--color-accent)]' : 'bg-[var(--color-text-muted)]'} {saving ? 'opacity-50' : ''}"
               ></span>
               <span
-                class="absolute top-0.5 left-0.5 h-5 w-5 transform rounded-full bg-white transition-transform duration-200 {preferences.hideFromLeaderboard ? 'translate-x-5' : ''} {saving ? 'opacity-50' : ''}"
+                class="absolute top-0.5 left-0.5 h-5 w-5 transform rounded bg-white transition-transform duration-200 {preferences.hideFromLeaderboard ? 'translate-x-5' : ''} {saving ? 'opacity-50' : ''}"
               ></span>
             </button>
           </div>
         </div>
       </div>
     </div>
+
+    <!-- Theme Settings Section -->
+    {#if !loading}
+      <div
+        class="mt-6 overflow-hidden rounded-none border-2 border-[var(--color-border)] shadow-[2px_2px_0_rgba(0,0,0,0.1)]"
+      >
+        <div class="border-b-2 border-[var(--color-border)] bg-[var(--color-tertiary)] p-4">
+          <div class="flex items-center gap-2">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-5 w-5 text-[var(--color-text-muted)]"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path
+                d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"
+              />
+            </svg>
+            <span class="font-bold text-[var(--color-heading)]">Theme</span>
+          </div>
+        </div>
+
+        <div class="bg-[var(--color-secondary)] p-4">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="font-medium text-[var(--color-text)]">Dark mode</p>
+              <p class="text-sm text-[var(--color-text-muted)]">
+                Switch between light and dark theme
+              </p>
+            </div>
+
+            <div class="w-11 flex-shrink-0">
+              <button
+                type="button"
+                role="switch"
+                aria-checked={preferences.theme === 'dark'}
+                class="relative inline-flex h-6 w-11 cursor-pointer items-center rounded focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2 focus:outline-none"
+                on:click={toggleTheme}
+                disabled={saving}
+              >
+                <span class="sr-only">Toggle dark mode</span>
+                <span
+                  class="absolute h-full w-full rounded transition-colors duration-200 {preferences.theme === 'dark' ? 'bg-[var(--color-accent)]' : 'bg-[var(--color-text-muted)]'} {saving ? 'opacity-50' : ''}"
+                ></span>
+                <span
+                  class="absolute top-0.5 left-0.5 h-5 w-5 transform rounded bg-white transition-transform duration-200 {preferences.theme === 'dark' ? 'translate-x-5' : ''} {saving ? 'opacity-50' : ''}"
+                ></span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    {/if}
   {/if}
 </div>