diff --git a/.cursor/rules/README.md b/.cursor/rules/README.md
new file mode 100644
index 0000000..1fd6b36
--- /dev/null
+++ b/.cursor/rules/README.md
@@ -0,0 +1,3 @@
+All of the rules are directly a result of the knowledge cutoff
+
+I shouldn't have to do this
diff --git a/.cursor/rules/database.mdc b/.cursor/rules/database.mdc
index ee530e8..cc6f972 100644
--- a/.cursor/rules/database.mdc
+++ b/.cursor/rules/database.mdc
@@ -1,6 +1,6 @@
 ---
 description: database interactions in python
-globs: 
+globs: *.py
 alwaysApply: false
 ---
 use psycopg3
\ No newline at end of file
diff --git a/.cursor/rules/styles.mdc b/.cursor/rules/styles.mdc
new file mode 100644
index 0000000..a1450f8
--- /dev/null
+++ b/.cursor/rules/styles.mdc
@@ -0,0 +1,6 @@
+---
+description: Styling the project
+globs: *.css
+alwaysApply: false
+---
+use tailwind css v4
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
index 3897265..ccff4c4 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -11,3 +11,6 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+
+# Ignore scripts folder
+scripts/
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
index 5f4511a..ab87293 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,5 +2,6 @@
   "useTabs": false,
   "singleQuote": true,
   "trailingComma": "none",
-  "printWidth": 100
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/package.json b/package.json
index 2bdbc23..dfd9a1b 100644
--- a/package.json
+++ b/package.json
@@ -40,5 +40,10 @@
     "@fontsource/fira-mono": "^4.5.0",
     "@supabase/supabase-js": "^2.49.1",
     "supabase": "^2.15.8"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
   }
 }
diff --git a/src/app.css b/src/app.css
index 6d23624..00b9095 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,50 +1,69 @@
 @import '@fontsource/fira-mono';
 
-:root {
-  font-family:
-    Arial,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Open Sans',
-    'Helvetica Neue',
-    sans-serif;
-  --font-mono: 'Fira Mono', monospace;
-  --pure-white: #ffffff;
-  --pure-black: #000000;
-  --primary-color: #121212;
-  --secondary-color: #1e1e1e;
-  --tertiary-color: #2d2d2d;
-  --accent-color: #7c4dff;
-  --heading-color: rgba(255, 255, 255, 0.87);
-  --text-color: rgba(255, 255, 255, 0.6);
-  --background-without-opacity: rgba(30, 30, 30, 0.7);
-  --column-width: 42rem;
-  --column-margin-top: 4rem;
-  --border-color: #444444;
-
-  /* Codeforces rating colors */
-  --legendary-grandmaster-color: #ff0000;
-  --international-grandmaster-color: #ff0000;
-  --grandmaster-color: #ff0000;
-  --international-master-color: #ff8c00;
-  --master-color: #ff8c00;
-  --candidate-master-color: #aa00aa;
-  --expert-color: #0000ff;
-  --specialist-color: #03a89e;
-  --pupil-color: #008000;
-  --newbie-color: #808080;
+@import 'tailwindcss';
+
+@layer theme {
+  :root {
+    /* Fonts */
+    --font-sans:
+      Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+      'Open Sans', 'Helvetica Neue', sans-serif;
+    --font-mono: 'Fira Mono', monospace;
+
+    /* Colors */
+    --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);
+
+    /* Codeforces rating colors */
+    --color-legendary-grandmaster: oklch(0.65 0.27 29.23);
+    --color-international-grandmaster: oklch(0.65 0.27 29.23);
+    --color-grandmaster: oklch(0.65 0.27 29.23);
+    --color-international-master: oklch(0.71 0.19 54.65);
+    --color-master: oklch(0.71 0.19 54.65);
+    --color-candidate-master: oklch(0.55 0.32 328.88);
+    --color-expert: oklch(0.45 0.26 264.05);
+    --color-specialist: oklch(0.6 0.17 196.09);
+    --color-pupil: oklch(0.51 0.18 142.5);
+    --color-newbie: oklch(0.54 0 0);
+
+    /* Spacing */
+    --spacing: 0.25rem;
+
+    /* Shadows */
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+
+    /* Border radius */
+    --rounded-sm: 0.125rem;
+    --rounded: 0.25rem;
+    --rounded-md: 0.375rem;
+    --rounded-lg: 0.5rem;
+    --rounded-xl: 0.75rem;
+    --rounded-2xl: 1rem;
+    --rounded-full: 9999px;
+  }
 }
 
+/* Base styles */
 body {
   min-height: 100vh;
   margin: 0;
-  background-color: var(--primary-color);
-  color: var(--text-color);
+  background-color: var(--color-primary);
+  color: var(--color-text);
 }
 
 #svelte {
@@ -56,41 +75,32 @@ body {
 h1,
 h2,
 p {
-  font-weight: 400;
-  color: var(--heading-color);
+  font-weight: normal;
+  color: var(--color-heading);
 }
 
 p {
   line-height: 1.5;
 }
 
-a {
-  color: var(--accent-color);
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
 h1 {
   font-size: 2rem;
   text-align: center;
 }
 
 h2 {
-  font-size: 1rem;
+  font-size: 1.25rem;
 }
 
 pre {
-  font-size: 16px;
+  font-size: 1rem;
   font-family: var(--font-mono);
-  background-color: rgba(0, 0, 0, 0.3);
-  border-radius: 3px;
-  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
-  padding: 0.5em;
+  background-color: color-mix(in oklab, black 30%, transparent);
+  border-radius: 0.25rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  padding: 0.5rem;
   overflow-x: auto;
-  color: var(--heading-color);
+  color: var(--color-heading);
 }
 
 input,
@@ -99,15 +109,72 @@ button {
   font-family: inherit;
 }
 
-button:focus:not(:focus-visible) {
-  outline: none;
+a {
+  color: var(--color-text);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+a:hover {
+  color: var(--color-heading);
+  text-decoration: underline;
+}
+
+/* Primary/accent links - use for important actions or main navigation */
+a.link-accent,
+.content a,
+nav.main-nav a {
+  color: var(--color-accent);
+}
+
+a.link-accent:hover,
+.content a:hover,
+nav.main-nav a:hover {
+  color: color-mix(in oklab, var(--color-accent) 80%, white);
+}
+
+/* Table links - more subtle styling for dense information displays */
+.table a,
+table a {
+  color: var(--color-text);
+  font-weight: 500;
+}
+
+/* User links in tables - keep them purple */
+.table a[href*='github.com'],
+table a[href*='github.com'],
+table td:nth-child(5) a {
+  color: var(--color-accent);
+}
+
+.table a[href*='github.com']:hover,
+table a[href*='github.com']:hover,
+table td:nth-child(5) a:hover {
+  color: color-mix(in oklab, var(--color-accent) 80%, white);
+}
+
+.table a:hover,
+table a:hover {
+  color: var(--color-heading);
+}
+
+/* Keep header home link behavior */
+header a[aria-label='Home']:hover {
+  text-decoration: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: inline-block;
 }
 
+/* Component styles */
 .card {
-  background-color: var(--secondary-color);
-  border-radius: 8px;
+  background-color: var(--color-secondary);
+  border-radius: 0.5rem;
   padding: 1.5rem;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   margin-bottom: 1rem;
 }
 
@@ -119,44 +186,45 @@ button:focus:not(:focus-visible) {
 .table th {
   text-align: left;
   padding: 0.75rem;
-  border-bottom: 1px solid var(--tertiary-color);
-  color: var(--heading-color);
+  border-bottom: 1px solid var(--color-tertiary);
+  color: var(--color-heading);
 }
 
 .table td {
   padding: 0.75rem;
-  border-bottom: 1px solid var(--tertiary-color);
+  border-bottom: 1px solid var(--color-tertiary);
 }
 
 .table tr:hover {
-  background-color: var(--tertiary-color);
+  background-color: var(--color-tertiary);
 }
 
 .badge {
   display: inline-block;
   padding: 0.25rem 0.5rem;
-  border-radius: 4px;
+  border-radius: 0.25rem;
   font-size: 0.75rem;
   font-weight: 600;
 }
 
 .badge-easy {
-  background-color: #4caf50;
+  background-color: oklch(0.73 0.2 142.5);
   color: white;
 }
 
 .badge-medium {
-  background-color: #ff9800;
+  background-color: oklch(0.71 0.19 54.65);
   color: white;
 }
 
 .badge-hard {
-  background-color: #f44336;
+  background-color: oklch(0.65 0.27 29.23);
   color: white;
 }
 
+/* Responsive utilities */
 @media (min-width: 720px) {
   h1 {
-    font-size: 2.4rem;
+    font-size: 3rem;
   }
 }
diff --git a/src/lib/Counter.svelte b/src/lib/Counter.svelte
deleted file mode 100644
index dd7aa09..0000000
--- a/src/lib/Counter.svelte
+++ /dev/null
@@ -1,107 +0,0 @@
-<script>
-	import { spring } from 'svelte/motion';
-
-	let count = 0;
-
-	const displayed_count = spring();
-	$: displayed_count.set(count);
-	$: offset = modulo($displayed_count, 1);
-
-	/**
-	 * @param {number} n
-	 * @param {number} m
-	 */
-	function modulo(n, m) {
-		// handle negative numbers
-		return ((n % m) + m) % m;
-	}
-</script>
-
-<div class="counter">
-	<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
-		<svg aria-hidden="true" viewBox="0 0 1 1">
-			<path d="M0,0.5 L1,0.5" />
-		</svg>
-	</button>
-
-	<div class="counter-viewport">
-		<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
-			<strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
-			<strong>{Math.floor($displayed_count)}</strong>
-		</div>
-	</div>
-
-	<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
-		<svg aria-hidden="true" viewBox="0 0 1 1">
-			<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
-		</svg>
-	</button>
-</div>
-
-<style>
-	.counter {
-		display: flex;
-		border-top: 1px solid rgba(0, 0, 0, 0.1);
-		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-		margin: 1rem 0;
-	}
-
-	.counter button {
-		width: 2em;
-		padding: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border: 0;
-		background-color: transparent;
-		touch-action: manipulation;
-		color: var(--text-color);
-		font-size: 2rem;
-	}
-
-	.counter button:hover {
-		background-color: var(--secondary-color);
-	}
-
-	svg {
-		width: 25%;
-		height: 25%;
-	}
-
-	path {
-		vector-effect: non-scaling-stroke;
-		stroke-width: 2px;
-		stroke: var(--text-color);
-	}
-
-	.counter-viewport {
-		width: 8em;
-		height: 4em;
-		overflow: hidden;
-		text-align: center;
-		position: relative;
-	}
-
-	.counter-viewport strong {
-		position: absolute;
-		display: flex;
-		width: 100%;
-		height: 100%;
-		font-weight: 400;
-		color: var(--accent-color);
-		font-size: 4rem;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.counter-digits {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-	}
-
-	.hidden {
-		top: -100%;
-		user-select: none;
-	}
-</style>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index ff4b81b..362dbc7 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -2,23 +2,26 @@
   // Footer component
 </script>
 
-<footer>
-  <div class="container">
-    <div class="footer-content">
-      <div class="copyright">
+<footer
+  class="bg-[var(--color-secondary)] py-6 mt-auto border-t border-[color-mix(in_oklab,black_10%,transparent)]"
+>
+  <div class="max-w-7xl mx-auto px-6 md:px-4 sm:px-3">
+    <div class="flex justify-between items-center">
+      <div class="text-[var(--color-text)] text-sm">
         © {new Date().getFullYear()} AlgoHub
       </div>
-      <div class="links">
+      <div class="flex gap-6">
         <a
           href="https://github.com/cameroncuster/AlgoHub"
           target="_blank"
           rel="noopener noreferrer"
           aria-label="GitHub Repository"
+          class="flex items-center gap-2 text-[var(--color-text)] no-underline text-sm transition-colors duration-200 hover:text-[var(--color-accent)]"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            width="20"
-            height="20"
+            width="24"
+            height="24"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
@@ -36,81 +39,3 @@
     </div>
   </div>
 </footer>
-
-<style>
-  footer {
-    background-color: var(--secondary-color);
-    padding: 1.5rem 0;
-    margin-top: auto;
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-  }
-
-  .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 1.5rem;
-  }
-
-  .footer-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .copyright {
-    color: var(--text-color);
-    font-size: 0.9rem;
-  }
-
-  .links {
-    display: flex;
-    gap: 1.5rem;
-  }
-
-  .links a {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    color: var(--text-color);
-    text-decoration: none;
-    font-size: 0.9rem;
-    transition: color 0.2s ease;
-  }
-
-  .links a:hover {
-    color: var(--accent-color);
-  }
-
-  @media (max-width: 768px) {
-    .container {
-      padding: 0 1rem;
-    }
-
-    .footer-content {
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      gap: 0.5rem;
-    }
-  }
-
-  @media (max-width: 480px) {
-    footer {
-      padding: 1.25rem 0;
-    }
-
-    .container {
-      padding: 0 0.75rem;
-    }
-
-    .copyright,
-    .links a {
-      font-size: 0.8rem;
-    }
-
-    .links a svg {
-      width: 18px;
-      height: 18px;
-    }
-  }
-</style>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 764f374..003bd16 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,266 +1,216 @@
 <script lang="ts">
-  import { page } from '$app/stores';
-  import { user } from '$lib/services/auth';
-  import { signInWithGithub, signOut } from '$lib/services/auth';
-  import { onMount } from 'svelte';
-
-  // Add a loading state to prevent button flash
-  let authLoading = true;
-
-  // Use a flag to ensure we've fully mounted before showing anything
-  let isMounted = false;
-
-  onMount(() => {
-    // Mark component as mounted
-    isMounted = true;
-
-    // Set up a subscription to the user store
-    const unsubscribe = user.subscribe((value) => {
-      // Only set authLoading to false if we're mounted
-      if (isMounted) {
-        // Small delay to ensure DOM is ready
-        authLoading = false;
-      }
-    });
-
-    // Clean up subscription on component unmount
-    return () => {
-      isMounted = false;
-      unsubscribe();
-    };
-  });
-
-  async function handleLogin() {
-    try {
-      await signInWithGithub();
-    } catch (error) {
-      console.error('Login error:', error);
+import { page } from '$app/stores';
+import { user } from '$lib/services/auth';
+import { signInWithGithub, signOut } from '$lib/services/auth';
+import { onMount } from 'svelte';
+
+// Add a loading state to prevent button flash
+let authLoading = true;
+
+// Use a flag to ensure we've fully mounted before showing anything
+let isMounted = false;
+
+// Mobile menu state
+let mobileMenuOpen = false;
+
+onMount(() => {
+  // Mark component as mounted
+  isMounted = true;
+
+  // Set up a subscription to the user store
+  const unsubscribe = user.subscribe((value) => {
+    // Only set authLoading to false if we're mounted
+    if (isMounted) {
+      // Small delay to ensure DOM is ready
+      authLoading = false;
     }
-  }
+  });
 
-  async function handleLogout() {
-    try {
-      await signOut();
-    } catch (error) {
-      console.error('Logout error:', error);
-    }
-  }
+  // Clean up subscription on component unmount
+  return () => {
+    isMounted = false;
+    unsubscribe();
+  };
+});
+
+async function handleLogin() {
+  try {
+    await signInWithGithub();
+    mobileMenuOpen = false;
+  } catch (error) {
+    console.error('Login error:', error);
+  }
+}
+
+async function handleLogout() {
+  try {
+    await signOut();
+    mobileMenuOpen = false;
+  } catch (error) {
+    console.error('Logout error:', error);
+  }
+}
+
+function toggleMobileMenu() {
+  mobileMenuOpen = !mobileMenuOpen;
+}
+
+// Close mobile menu when navigating to a new page
+$: if ($page) {
+  mobileMenuOpen = false;
+}
 </script>
 
-<header>
-  <div class="container">
-    <div class="logo">
-      <a href="/" aria-label="Home">
-        <img src="/favicon.png" alt="AlgoHub Logo" class="favicon" />
+<header class="sticky top-0 z-50 bg-[var(--color-secondary)] py-3 shadow-sm">
+  <div class="mx-auto flex max-w-7xl items-center justify-between px-3 sm:px-4 md:px-6">
+    <div class="flex items-center">
+      <a
+        href="/"
+        aria-label="Home"
+        class="flex items-center gap-2 text-xl font-bold text-[var(--color-heading)] no-underline"
+      >
+        <img src="/favicon.png" alt="AlgoHub Logo" class="h-6 w-6 object-contain" />
         <span>AlgoHub</span>
       </a>
     </div>
 
-    <nav>
-      <ul>
-        <li class:active={$page.url.pathname === '/'}>
-          <a href="/">Problems</a>
+    <!-- Mobile menu button -->
+    <button
+      class="flex items-center rounded-md border border-[var(--color-border)] px-2 py-1 text-[var(--color-text)] md:hidden"
+      aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
+      on:click={toggleMobileMenu}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        {#if mobileMenuOpen}
+          <path d="M18 6L6 18M6 6l12 12"></path>
+        {:else}
+          <path d="M3 12h18M3 6h18M3 18h18"></path>
+        {/if}
+      </svg>
+    </button>
+
+    <!-- Desktop navigation -->
+    <nav class="hidden items-center gap-6 md:flex md:gap-4">
+      <ul class="m-0 flex list-none gap-6 p-0 md:gap-4">
+        <li
+          class="relative {$page.url.pathname === '/'
+            ? "after:absolute after:-bottom-2 after:left-0 after:h-0.5 after:w-full after:rounded-sm after:bg-[var(--color-accent)] after:content-['']"
+            : ''}"
+        >
+          <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)]"
+            >Problems</a
+          >
         </li>
-        <li class:active={$page.url.pathname === '/about'}>
-          <a href="/about">About</a>
+        <li
+          class="relative {$page.url.pathname === '/about'
+            ? "after:absolute after:-bottom-2 after:left-0 after:h-0.5 after:w-full after:rounded-sm after:bg-[var(--color-accent)] after:content-['']"
+            : ''}"
+        >
+          <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)]"
+            >About</a
+          >
         </li>
       </ul>
-      <div class="auth-buttons" class:hidden={authLoading}>
+      <div
+        class="flex min-w-[70px] items-center justify-end opacity-100 transition-opacity duration-200 {authLoading
+          ? 'invisible opacity-0'
+          : ''}"
+      >
         {#if $user}
-          <button class="logout-button" on:click={handleLogout}>Logout</button>
+          <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)]"
+            on:click={handleLogout}
+          >
+            Logout
+          </button>
         {:else}
-          <button class="login-button" on:click={handleLogin} title="Login with GitHub">
-            <span class="login-text">Sign in</span>
+          <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"
+            on:click={handleLogin}
+            title="Login with GitHub"
+          >
+            <span>Sign in</span>
           </button>
         {/if}
       </div>
     </nav>
   </div>
+
+  <!-- Mobile menu -->
+  {#if mobileMenuOpen}
+    <div
+      class="mt-3 border-t border-[var(--color-border)] bg-[var(--color-secondary)] px-3 py-4 shadow-md md: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)]' : ''}"
+              >Problems</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)]' : ''}"
+              >About</a
+            >
+          </li>
+        </ul>
+        <div
+          class="mt-2 flex items-center justify-start {authLoading ? 'invisible opacity-0' : ''}"
+        >
+          {#if $user}
+            <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)]"
+              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"
+              on:click={handleLogin}
+              title="Login with GitHub"
+            >
+              <span>Sign in</span>
+            </button>
+          {/if}
+        </div>
+      </nav>
+    </div>
+  {/if}
 </header>
 
 <style>
-  header {
-    background-color: var(--secondary-color);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    position: sticky;
-    top: 0;
-    z-index: 100;
-    padding: 0.75rem 0;
-  }
-
-  .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 1.5rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .logo {
-    display: flex;
-    align-items: center;
-  }
-
-  .logo a {
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    color: var(--heading-color);
-    font-weight: 700;
-    font-size: 1.25rem;
-    gap: 0.5rem;
-  }
-
-  .favicon {
-    width: 24px;
-    height: 24px;
-    object-fit: contain;
-  }
-
-  nav {
-    display: flex;
-    align-items: center;
-    gap: 1.5rem;
-  }
-
-  ul {
-    display: flex;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    gap: 1.5rem;
-  }
-
-  li {
-    position: relative;
-  }
-
-  li.active::after {
-    content: '';
-    position: absolute;
-    bottom: -0.5rem;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    background-color: var(--accent-color);
-    border-radius: 1px;
-  }
-
-  nav a {
-    color: var(--heading-color);
-    font-weight: 600;
-    text-decoration: none;
-    transition: color 0.2s ease;
-    font-size: 1rem;
-    padding: 0.5rem 0;
-    display: block;
-  }
-
-  a:hover {
-    color: var(--accent-color);
-  }
-
-  .auth-buttons {
-    display: flex;
-    align-items: center;
-    min-width: 70px; /* Ensure consistent width to prevent layout shift */
-    justify-content: flex-end;
-    opacity: 1;
-    transition: opacity 0.2s ease;
-  }
-
-  .auth-buttons.hidden {
+/* Add smooth transitions for mobile menu */
+@keyframes slideDown {
+  from {
     opacity: 0;
-    visibility: hidden;
-  }
-
-  .login-button,
-  .logout-button {
-    border: none;
-    border-radius: 4px;
-    padding: 0.4rem 0.75rem;
-    font-size: 0.8rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s;
-    display: flex;
-    align-items: center;
-    gap: 0.4rem;
-  }
-
-  .login-button {
-    background-color: #4285f4;
-    color: white;
-    border: 1px solid #4285f4;
-    border-radius: 4px;
-    padding: 0.4rem 0.75rem;
-    font-size: 0.8rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  }
-
-  .login-button:hover {
-    background-color: #3367d6;
-    border-color: #3367d6;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-  }
-
-  .logout-button {
-    background-color: transparent;
-    color: var(--text-color);
-    border: 1px solid var(--border-color);
+    transform: translateY(-10px);
   }
-
-  .logout-button:hover {
-    background-color: rgba(0, 0, 0, 0.05);
-    color: var(--text-color);
-  }
-
-  @media (max-width: 768px) {
-    .container {
-      padding: 0 1rem;
-    }
-
-    nav {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 1rem;
-    }
-
-    ul {
-      gap: 1rem;
-    }
-
-    .login-button,
-    .logout-button {
-      padding: 0.3rem 0.6rem;
-      font-size: 0.75rem;
-    }
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
+}
 
-  @media (max-width: 480px) {
-    .container {
-      padding: 0 0.75rem;
-    }
-
-    .logo span {
-      font-size: 1.1rem;
-    }
-
-    nav {
-      gap: 0.75rem;
-    }
-
-    ul {
-      gap: 0.75rem;
-    }
-
-    nav a {
-      font-size: 0.9rem;
-    }
-  }
+div.md\:hidden {
+  animation: slideDown 0.2s ease-out;
+}
 </style>
diff --git a/src/lib/components/ProblemSubmitForm.svelte b/src/lib/components/ProblemSubmitForm.svelte
index a8913fd..3d10c4b 100644
--- a/src/lib/components/ProblemSubmitForm.svelte
+++ b/src/lib/components/ProblemSubmitForm.svelte
@@ -10,7 +10,7 @@
   // Props
   export let title: string;
   export let platformName: string;
-  export let platformIcon: any = null;
+  export let platformIcon: string | null = null;
   export let handlePlaceholder: string = 'Enter your handle (optional)';
   export let urlsPlaceholder: string = 'Enter problem URLs';
   export let urlsDescription: string = `Enter ${platformName} problem URLs`;
@@ -203,36 +203,49 @@
   }
 </script>
 
-<div class="container">
-  <div class="submit-form">
-    <h1>
+<div class="max-w-4xl mx-auto px-4 py-6 w-full box-border">
+  <div class="bg-[var(--color-secondary)] rounded-lg p-8 shadow-md">
+    <h1
+      class="m-0 mb-8 text-[var(--color-heading)] text-4xl text-center flex items-center justify-center gap-4"
+    >
       {#if platformIcon}
-        <img src={platformIcon} alt={`${platformName} icon`} class="platform-icon" />
+        <img
+          src={platformIcon}
+          alt={`${platformName} icon`}
+          class="h-14 w-14 inline-block align-middle"
+          width="56"
+          height="56"
+        />
       {/if}
       {title}
     </h1>
 
     {#if checkingAdmin}
-      <div class="loading-message">Checking permissions...</div>
+      <div class="text-center py-4 mb-6 text-blue-400">Checking permissions...</div>
     {:else if error && !processingResults.length}
-      <div class="error-message">{error}</div>
+      <div class="text-center py-4 mb-6 text-red-500">{error}</div>
     {/if}
 
     {#if isAdminUser && !checkingAdmin}
       <form on:submit|preventDefault={processProblems}>
-        <div class="form-group">
-          <label for="handle">{platformName} Handle</label>
+        <div class="mb-6">
+          <label for="handle" class="block mb-2 font-semibold text-[var(--color-heading)]"
+            >{platformName} Handle</label
+          >
           <input
             type="text"
             id="handle"
             bind:value={handle}
             placeholder={handlePlaceholder}
             disabled={loading}
+            class="w-full p-3 border border-[var(--color-border)] rounded-md bg-[var(--color-background)] text-[var(--color-text)] text-base box-border font-inherit placeholder:text-[var(--color-text-muted)] placeholder:opacity-70 disabled:opacity-60 disabled:cursor-not-allowed focus:outline-none focus:border-[var(--color-primary)] focus:shadow-sm"
           />
         </div>
 
-        <div class="form-group">
-          <label for="problemUrls">Problem URLs <span class="required">*</span></label>
+        <div class="mb-6">
+          <label for="problemUrls" class="block mb-2 font-semibold text-[var(--color-heading)]">
+            Problem URLs <span class="text-red-500">*</span>
+          </label>
           <textarea
             id="problemUrls"
             bind:value={problemUrls}
@@ -240,39 +253,52 @@
             required
             disabled={loading}
             rows="8"
+            class="w-full p-3 border border-[var(--color-border)] rounded-md bg-[var(--color-background)] text-[var(--color-text)] text-base box-border font-inherit resize-y min-h-[150px] placeholder:text-[var(--color-text-muted)] placeholder:opacity-70 disabled:opacity-60 disabled:cursor-not-allowed focus:outline-none focus:border-[var(--color-primary)] focus:shadow-sm"
           ></textarea>
-          <small>{urlsDescription}</small>
+          <small class="block mt-2 text-[var(--color-text-muted)] text-sm">{urlsDescription}</small>
         </div>
 
-        <div class="form-actions">
-          <button type="submit" class="submit-button" disabled={loading}>
+        <div>
+          <button
+            type="submit"
+            class="w-full py-3 px-3 bg-[var(--color-primary)] text-white border-none rounded-md text-base font-semibold cursor-pointer transition-colors duration-200 hover:opacity-90 disabled:opacity-60 disabled:cursor-not-allowed"
+            disabled={loading}
+          >
             {loading ? 'Processing...' : 'Submit Problems'}
           </button>
         </div>
       </form>
 
       {#if processingResults.length > 0}
-        <div class="results">
-          <h2>Results</h2>
-          <div class="results-list">
+        <div class="mt-8">
+          <h2 class="mt-8 mb-4 text-[var(--color-heading)] text-2xl">Results</h2>
+          <div class="flex flex-col gap-2">
             {#each processingResults as result}
               <div
-                class="result-item"
-                class:success={result.status === 'success'}
-                class:error={result.status === 'error'}
+                class="flex justify-between items-center p-3 bg-[var(--color-background)] rounded border-l-4 {result.status ===
+                'success'
+                  ? 'border-l-green-500'
+                  : result.status === 'error'
+                    ? 'border-l-red-500'
+                    : 'border-l-[var(--color-border)]'}"
               >
-                <div class="result-url">
-                  <a href={result.url} target="_blank" rel="noopener noreferrer">
+                <div class="font-medium break-all">
+                  <a
+                    href={result.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-[var(--color-text)] no-underline hover:text-[var(--color-primary)] hover:underline"
+                  >
                     {formatResultUrl(result.url, result.name)}
                   </a>
                 </div>
-                <div class="result-status">
+                <div class="whitespace-nowrap ml-4">
                   {#if result.status === 'pending'}
-                    <span class="pending">Pending</span>
+                    <span class="text-blue-400">Pending</span>
                   {:else if result.status === 'success'}
-                    <span class="success-text">✓ {result.message}</span>
+                    <span class="text-green-500">✓ {result.message}</span>
                   {:else}
-                    <span class="error-text">✗ {result.message}</span>
+                    <span class="text-red-500">✗ {result.message}</span>
                   {/if}
                 </div>
               </div>
@@ -283,212 +309,3 @@
     {/if}
   </div>
 </div>
-
-<style>
-  .container {
-    max-width: 900px;
-    margin: 0 auto;
-    padding: 1.5rem 1rem;
-    width: 100%;
-    box-sizing: border-box;
-  }
-
-  .submit-form {
-    background-color: var(--secondary-color);
-    border-radius: 8px;
-    padding: 2rem;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  }
-
-  h1 {
-    margin: 0 0 2rem;
-    color: var(--heading-color);
-    font-size: 2rem;
-    text-align: center;
-  }
-
-  h2 {
-    margin: 2rem 0 1rem;
-    color: var(--heading-color);
-    font-size: 1.5rem;
-  }
-
-  .form-group {
-    margin-bottom: 1.5rem;
-  }
-
-  label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 600;
-    color: var(--heading-color);
-  }
-
-  .required {
-    color: #f44336;
-  }
-
-  input,
-  textarea {
-    width: 100%;
-    padding: 0.75rem;
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    background-color: var(--background-color);
-    color: var(--text-color);
-    font-size: 1rem;
-    box-sizing: border-box;
-    font-family: inherit;
-  }
-
-  input::placeholder,
-  textarea::placeholder {
-    color: var(--text-muted);
-    opacity: 0.7;
-  }
-
-  input:disabled,
-  textarea:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    background-color: var(--background-color);
-    color: var(--text-color);
-  }
-
-  textarea {
-    resize: vertical;
-    min-height: 150px;
-  }
-
-  input:focus,
-  textarea:focus {
-    outline: none;
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
-  }
-
-  small {
-    display: block;
-    margin-top: 0.5rem;
-    color: var(--text-muted);
-    font-size: 0.875rem;
-  }
-
-  .submit-button {
-    width: 100%;
-    padding: 0.75rem;
-    background-color: var(--primary-color);
-    color: white;
-    border: none;
-    border-radius: 6px;
-    font-size: 1rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background-color 0.2s;
-  }
-
-  .submit-button:hover {
-    background-color: var(--primary-color-dark);
-  }
-
-  .submit-button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .loading-message,
-  .error-message {
-    text-align: center;
-    padding: 1rem;
-    margin-bottom: 1.5rem;
-  }
-
-  .loading-message {
-    color: #2196f3;
-  }
-  .error-message {
-    color: #f44336;
-  }
-
-  .results-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .result-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.75rem 1rem;
-    background-color: var(--background-color);
-    border-radius: 4px;
-    border-left: 4px solid var(--border-color);
-  }
-
-  .result-item.success {
-    border-left-color: #4caf50;
-  }
-  .result-item.error {
-    border-left-color: #f44336;
-  }
-
-  .result-url {
-    font-weight: 500;
-    word-break: break-all;
-  }
-
-  .result-url a {
-    color: var(--text-color);
-    text-decoration: none;
-  }
-
-  .result-url a:hover {
-    color: var(--primary-color);
-    text-decoration: underline;
-  }
-
-  .result-status {
-    white-space: nowrap;
-    margin-left: 1rem;
-  }
-
-  .pending {
-    color: #2196f3;
-  }
-  .success-text {
-    color: #4caf50;
-  }
-  .error-text {
-    color: #f44336;
-  }
-
-  @media (max-width: 768px) {
-    .container {
-      padding: 1rem 0.75rem;
-    }
-    .submit-form {
-      padding: 1.5rem;
-    }
-    h1 {
-      font-size: 1.75rem;
-    }
-
-    .result-item {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 0.5rem;
-    }
-
-    .result-status {
-      margin-left: 0;
-    }
-  }
-
-  .platform-icon {
-    height: 1.5rem;
-    width: auto;
-    vertical-align: middle;
-    margin-right: 0.5rem;
-  }
-</style>
diff --git a/src/lib/components/ProblemTable.svelte b/src/lib/components/ProblemTable.svelte
index 26dea80..622223f 100644
--- a/src/lib/components/ProblemTable.svelte
+++ b/src/lib/components/ProblemTable.svelte
@@ -1,161 +1,199 @@
 <script lang="ts">
-  import type { Problem } from '$lib/services/problem';
-  import codeforcesLogo from '../../assets/codeforces.png';
-  import kattisLogo from '../../assets/kattis.png';
-
-  // Props
-  export let problems: Problem[] = [];
-  export let userFeedback: Record<string, 'like' | 'dislike' | null> = {};
-  export let onLike: (problemId: string, isLike: boolean) => Promise<void>;
-
-  // Define common tiers
-  const TIERS = [
-    [3000, 'Legendary Grandmaster'],
-    [2600, 'International Grandmaster'],
-    [2400, 'Grandmaster'],
-    [2300, 'International Master'],
-    [2100, 'Master'],
-    [1900, 'Candidate Master'],
-    [1600, 'Expert'],
-    [1400, 'Specialist'],
-    [1200, 'Pupil']
-  ] as const;
-
-  // Get rating color class
-  function getRatingColor(rating: number | undefined): string {
-    if (!rating) return 'unrated';
-    const tier = TIERS.find(([min]) => rating >= min)?.[1];
-    if (!tier) return 'newbie';
-    return tier.toLowerCase().replace(' ', '-');
-  }
-
-  // Get rating tier display name
-  function getRatingTierName(rating: number | undefined): string {
-    if (!rating) return 'Unrated';
-    return TIERS.find(([min]) => rating >= min)?.[1] || 'Newbie';
-  }
-
-  // Function to get difficulty tooltip text
-  function getDifficultyTooltip(problem: Problem): string {
-    if (problem.source === 'kattis') {
-      return `Kattis difficulty mapped from 1-10 scale to 800-3500 rating range`;
-    } else {
-      return `${getRatingTierName(problem.difficulty)}`;
-    }
-  }
-
-  // Function to determine if a problem is in the first few rows
-  function isTopRow(index: number): boolean {
-    return index < 3; // Consider first 3 rows as "top rows"
-  }
+import type { Problem } from '$lib/services/problem';
+// Use static image paths instead of imports
+const codeforcesLogo = '/images/codeforces.png';
+const kattisLogo = '/images/kattis.png';
+
+// Props
+export let problems: Problem[] = [];
+export let userFeedback: Record<string, 'like' | 'dislike' | null> = {};
+export let onLike: (problemId: string, isLike: boolean) => Promise<void>;
+
+// Define common tiers
+const TIERS = [
+  [3000, 'Legendary Grandmaster'],
+  [2600, 'International Grandmaster'],
+  [2400, 'Grandmaster'],
+  [2300, 'International Master'],
+  [2100, 'Master'],
+  [1900, 'Candidate Master'],
+  [1600, 'Expert'],
+  [1400, 'Specialist'],
+  [1200, 'Pupil']
+] as const;
+
+// Get rating color class
+function getRatingColor(rating: number | undefined): string {
+  if (!rating) return 'unrated';
+  const tier = TIERS.find(([min]) => rating >= min)?.[1];
+  if (!tier) return 'newbie';
+  return tier.toLowerCase().replace(' ', '-');
+}
+
+// Get rating tier display name
+function getRatingTierName(rating: number | undefined): string {
+  if (!rating) return 'Unrated';
+  return TIERS.find(([min]) => rating >= min)?.[1] || 'Newbie';
+}
+
+// Function to get difficulty tooltip text
+function getDifficultyTooltip(problem: Problem): string {
+  if (problem.source === 'kattis') {
+    return `Kattis difficulty mapped from 1-10 scale to 800-3500 rating range`;
+  } else {
+    return `${getRatingTierName(problem.difficulty)}`;
+  }
+}
 </script>
 
-<div class="table-container">
-  <table class="table">
+<div class="mt-4 overflow-x-auto rounded-lg bg-[var(--color-secondary)] shadow-sm">
+  <table class="w-full min-w-[900px] border-collapse overflow-hidden bg-[var(--color-secondary)]">
     <thead>
       <tr>
-        <th class="col-source"></th>
-        <th class="col-name">Problem</th>
-        <th class="col-difficulty">Difficulty</th>
-        <th class="col-topic">Topic</th>
-        <th class="col-author">Added By</th>
-        <th class="col-feedback"></th>
+        <th
+          class="sticky top-0 z-10 w-10 min-w-10 bg-[var(--color-tertiary)] p-3 text-center font-bold"
+        ></th>
+        <th
+          class="sticky top-0 z-10 w-[30%] min-w-[180px] bg-[var(--color-tertiary)] p-3 text-left font-bold"
+          >Problem</th
+        >
+        <th
+          class="sticky top-0 z-10 w-20 min-w-20 bg-[var(--color-tertiary)] p-3 text-center font-bold"
+          >Difficulty</th
+        >
+        <th
+          class="sticky top-0 z-10 w-[15%] min-w-[120px] bg-[var(--color-tertiary)] p-3 text-left font-bold"
+          >Topic</th
+        >
+        <th
+          class="sticky top-0 z-10 w-[15%] min-w-[120px] bg-[var(--color-tertiary)] p-3 text-left font-bold"
+          >Added By</th
+        >
+        <th
+          class="sticky top-0 z-10 w-[15%] min-w-[150px] bg-[var(--color-tertiary)] p-3 text-center font-bold"
+        ></th>
       </tr>
     </thead>
     <tbody>
       {#each problems as problem, index}
-        <tr>
-          <td class="col-source">
-            <span class="problem-source {problem.source}">
+        <tr class="border-b border-[var(--color-border)] last:border-b-0 hover:bg-black/5">
+          <td class="p-3">
+            <span class="flex items-center justify-center">
               <img
                 src={problem.source === 'codeforces' ? codeforcesLogo : kattisLogo}
                 alt={problem.source}
-                class="source-icon-small"
+                class="h-6 w-6 object-contain"
               />
             </span>
           </td>
-          <td class="col-name">
-            <a href={problem.url} target="_blank" rel="noopener noreferrer">
+          <td class="p-3">
+            <a
+              href={problem.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-[var(--color-text)] hover:text-[var(--color-accent)] hover:underline"
+            >
               {problem.name}
             </a>
           </td>
-          <td class="col-difficulty">
+          <td class="p-3 text-center">
             <span
-              class="rating-badge tooltip {isTopRow(index)
-                ? 'tooltip-bottom'
-                : ''} {problem.source === 'codeforces' ? 'tooltip-no-cursor' : ''}"
-              style="background-color: var(--{getRatingColor(problem.difficulty)}-color)"
+              class="group relative inline-block rounded px-2 py-1 font-bold
+                text-white
+                 {problem.source === 'codeforces' ? 'cursor-default' : 'cursor-help'}"
+              style="background-color: var(--color-{getRatingColor(problem.difficulty)})"
             >
               {problem.difficulty}
-              <span class="tooltip-text {problem.source === 'codeforces' ? 'tooltip-compact' : ''}"
-                >{getDifficultyTooltip(problem)}</span
+              <span
+                class="invisible absolute bottom-full left-1/2 z-50 -translate-x-1/2 transform rounded-md border border-[var(--color-border)] bg-[var(--color-secondary)] text-left text-xs leading-relaxed font-normal whitespace-pre-line text-[var(--color-text)] opacity-0 shadow-md transition-opacity duration-300 group-hover:visible group-hover:opacity-100 {problem.source === 'codeforces'
+                  ? 'w-auto max-w-fit min-w-0 p-1.5 px-3 text-center whitespace-nowrap'
+                  : 'w-[280px] p-2.5'} mb-1"
               >
+                {getDifficultyTooltip(problem)}
+              </span>
             </span>
           </td>
-          <td class="col-topic">
+          <td class="p-3">
             {#if problem.type}
-              <span class="topic-badge">{problem.type}</span>
+              <span
+                class="inline-block rounded bg-[var(--color-tertiary)] px-2 py-1 text-sm text-[var(--color-text)]"
+              >
+                {problem.type}
+              </span>
             {/if}
           </td>
-          <td class="col-author">
-            <a href={problem.addedByUrl} target="_blank" rel="noopener noreferrer">
+          <td class="p-3">
+            <a
+              href={problem.addedByUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-[var(--color-text)] hover:text-[var(--color-accent)] hover:underline"
+            >
               @{problem.addedBy}
             </a>
           </td>
-          <td class="col-feedback">
-            <div class="feedback-buttons">
-              <button
-                class="like-button"
-                class:active={problem.id && userFeedback[problem.id] === 'like'}
-                on:click={() => problem.id && onLike(problem.id, true)}
-                title={problem.id && userFeedback[problem.id] === 'like'
-                  ? 'Undo like'
-                  : 'Like this problem'}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  class="thumbs-up"
+          <td class="p-3 text-right">
+            <div class="flex justify-end gap-2">
+              {#if problem.id}
+                {@const hasLiked = userFeedback[problem.id] === 'like'}
+                {@const hasDisliked = userFeedback[problem.id] === 'dislike'}
+
+                <button
+                  class={`flex cursor-pointer items-center gap-1 rounded border 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)]'
+                    }`}
+                  on:click={() => onLike(problem.id!, true)}
+                  title={hasLiked ? 'Undo like' : 'Like this problem'}
                 >
-                  <path
-                    d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
-                  ></path>
-                </svg>
-                <span>{problem.likes}</span>
-              </button>
-              <button
-                class="dislike-button"
-                class:active={problem.id && userFeedback[problem.id] === 'dislike'}
-                on:click={() => problem.id && onLike(problem.id, false)}
-                title={problem.id && userFeedback[problem.id] === 'dislike'
-                  ? 'Undo dislike'
-                  : 'Dislike this problem'}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  class="thumbs-down"
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    class="stroke-2"
+                  >
+                    <path
+                      d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
+                    ></path>
+                  </svg>
+                  <span>{problem.likes}</span>
+                </button>
+
+                <button
+                  class={`flex cursor-pointer items-center gap-1 rounded border 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)]'
+                    }`}
+                  on:click={() => onLike(problem.id!, false)}
+                  title={hasDisliked ? 'Undo dislike' : 'Dislike this problem'}
                 >
-                  <path
-                    d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-3"
-                  ></path>
-                </svg>
-                <span>{problem.dislikes}</span>
-              </button>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    class="stroke-2"
+                  >
+                    <path
+                      d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-3"
+                    ></path>
+                  </svg>
+                  <span>{problem.dislikes}</span>
+                </button>
+              {/if}
             </div>
           </td>
         </tr>
@@ -163,360 +201,3 @@
     </tbody>
   </table>
 </div>
-
-<style>
-  .table-container {
-    overflow-x: auto;
-    border-radius: 8px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    margin-top: 1rem;
-    background-color: var(--secondary-color);
-  }
-
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    background-color: var(--secondary-color);
-    overflow: hidden;
-  }
-
-  th,
-  td {
-    padding: 0.8rem;
-    text-align: left;
-    border-bottom: 1px solid var(--border-color);
-  }
-
-  th {
-    font-weight: bold;
-    background-color: var(--tertiary-color);
-    position: sticky;
-    top: 0;
-    z-index: 10;
-  }
-
-  tr:last-child td {
-    border-bottom: none;
-  }
-
-  tr:hover {
-    background-color: rgba(var(--primary-color-rgb), 0.05);
-  }
-
-  /* Fixed column widths */
-  .col-source {
-    width: 40px;
-    min-width: 40px;
-  }
-
-  .col-name {
-    width: 30%;
-    min-width: 180px;
-  }
-
-  .col-difficulty {
-    width: 80px;
-    min-width: 80px;
-    text-align: center;
-  }
-
-  .col-topic {
-    width: 15%;
-    min-width: 120px;
-  }
-
-  .col-author {
-    width: 15%;
-    min-width: 120px;
-  }
-
-  .col-feedback {
-    width: 15%;
-    min-width: 150px;
-    text-align: right;
-  }
-
-  /* Update table styles to handle fixed widths */
-  .table {
-    table-layout: fixed;
-    width: 100%;
-    min-width: 900px; /* Increased minimum width to accommodate new column */
-  }
-
-  /* Topic badge styling */
-  .topic-badge {
-    display: inline-block;
-    padding: 0.2rem 0.5rem;
-    border-radius: 4px;
-    background-color: var(--tertiary-color);
-    font-size: 0.85rem;
-  }
-
-  .topic-badge.empty {
-    color: var(--text-muted-color);
-    background-color: transparent;
-  }
-
-  .problem-source {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .source-icon-small {
-    width: 20px;
-    height: 20px;
-    object-fit: contain;
-  }
-
-  .rating-badge {
-    display: inline-block;
-    padding: 0.2rem 0.5rem;
-    border-radius: 4px;
-    color: white;
-    font-weight: bold;
-  }
-
-  .feedback-buttons {
-    display: flex;
-    gap: 0.5rem;
-    justify-content: flex-end;
-  }
-
-  .like-button,
-  .dislike-button {
-    display: flex;
-    align-items: center;
-    gap: 0.3rem;
-    background: none;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    padding: 0.3rem 0.5rem;
-    cursor: pointer;
-    transition: all 0.2s;
-    color: var(--text-color);
-  }
-
-  .like-button svg,
-  .dislike-button svg {
-    stroke: var(--text-color);
-  }
-
-  .like-button:hover {
-    background-color: rgba(0, 200, 0, 0.1);
-    border-color: rgba(0, 200, 0, 0.5);
-    color: #4caf50;
-  }
-
-  .dislike-button:hover {
-    background-color: rgba(200, 0, 0, 0.1);
-    border-color: rgba(200, 0, 0, 0.5);
-    color: #f44336;
-  }
-
-  .thumbs-up,
-  .thumbs-down {
-    stroke-width: 2;
-  }
-
-  .like-button:hover .thumbs-up {
-    stroke: #4caf50;
-  }
-
-  .dislike-button:hover .thumbs-down {
-    stroke: #f44336;
-  }
-
-  .like-button.active {
-    background-color: rgba(0, 200, 0, 0.1);
-    border-color: rgba(0, 200, 0, 0.5);
-    color: #4caf50;
-  }
-
-  .dislike-button.active {
-    background-color: rgba(200, 0, 0, 0.1);
-    border-color: rgba(200, 0, 0, 0.5);
-    color: #f44336;
-  }
-
-  .like-button.active .thumbs-up {
-    stroke: #4caf50;
-  }
-
-  .dislike-button.active .thumbs-down {
-    stroke: #f44336;
-  }
-
-  .tooltip {
-    position: relative;
-    cursor: help;
-  }
-
-  .tooltip.tooltip-no-cursor {
-    cursor: default;
-  }
-
-  .tooltip .tooltip-text {
-    visibility: hidden;
-    width: 280px;
-    background-color: var(--secondary-color);
-    color: var(--text-color);
-    text-align: left;
-    border-radius: 6px;
-    padding: 10px;
-    position: absolute;
-    z-index: 1000;
-    bottom: 125%;
-    left: 50%;
-    transform: translateX(-50%);
-    opacity: 0;
-    transition: opacity 0.3s;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    border: 1px solid var(--border-color);
-    font-weight: normal;
-    font-size: 0.8rem;
-    white-space: pre-line;
-    line-height: 1.4;
-  }
-
-  .tooltip .tooltip-text.tooltip-compact {
-    width: auto;
-    min-width: 0;
-    max-width: fit-content;
-    padding: 6px 10px;
-    text-align: center;
-    white-space: nowrap;
-  }
-
-  .tooltip .tooltip-text::after {
-    content: '';
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: var(--secondary-color) transparent transparent transparent;
-  }
-
-  .tooltip:hover .tooltip-text {
-    visibility: visible;
-    opacity: 1;
-  }
-
-  /* Tooltip that appears below the element instead of above */
-  .tooltip.tooltip-bottom .tooltip-text {
-    bottom: auto;
-    top: 125%;
-  }
-
-  .tooltip.tooltip-bottom .tooltip-text::after {
-    top: auto;
-    bottom: 100%;
-    border-color: transparent transparent var(--secondary-color) transparent;
-  }
-
-  /* Mobile responsiveness */
-  @media (max-width: 768px) {
-    th,
-    td {
-      padding: 0.6rem;
-    }
-
-    .feedback-buttons {
-      white-space: nowrap;
-      display: flex;
-      justify-content: flex-end;
-      gap: 0.3rem;
-    }
-
-    .like-button,
-    .dislike-button {
-      padding: 0.4rem;
-      min-width: 40px;
-      justify-content: center;
-    }
-
-    .like-button span,
-    .dislike-button span {
-      font-size: 0.8rem;
-    }
-
-    .thumbs-up,
-    .thumbs-down {
-      width: 14px;
-      height: 14px;
-    }
-
-    /* Adjust column widths for mobile */
-    .col-source {
-      width: 30px;
-      min-width: 30px;
-    }
-
-    .col-name {
-      min-width: 140px;
-    }
-
-    .col-topic {
-      width: 80px;
-      min-width: 80px;
-    }
-
-    .col-difficulty {
-      width: 60px;
-      min-width: 60px;
-    }
-
-    .col-author {
-      width: 90px;
-      min-width: 90px;
-    }
-
-    .col-feedback {
-      width: 90px;
-      min-width: 90px;
-    }
-
-    .tooltip .tooltip-text {
-      width: 220px;
-      font-size: 0.75rem;
-      left: 0;
-      transform: translateX(0);
-    }
-
-    .tooltip .tooltip-text::after {
-      left: 10%;
-    }
-
-    /* Ensure tooltip doesn't get cut off on the right edge */
-    tr:last-child .tooltip .tooltip-text,
-    tr:nth-last-child(2) .tooltip .tooltip-text {
-      left: auto;
-      right: 0;
-      transform: translateX(0);
-    }
-
-    tr:last-child .tooltip .tooltip-text::after,
-    tr:nth-last-child(2) .tooltip .tooltip-text::after {
-      left: auto;
-      right: 10%;
-    }
-  }
-
-  @media (max-width: 480px) {
-    th {
-      font-size: 0.8rem;
-    }
-
-    .feedback-buttons {
-      gap: 0.2rem;
-    }
-
-    .like-button,
-    .dislike-button {
-      padding: 0.3rem;
-      min-width: 36px;
-    }
-  }
-</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0e8e345..9dcf9c7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -24,10 +24,10 @@
   });
 </script>
 
-<div class="app">
+<div class="flex flex-col min-h-screen">
   <Header />
 
-  <main>
+  <main class="flex-1 flex flex-col w-full mx-auto box-border overflow-x-hidden">
     <slot />
   </main>
 
@@ -35,22 +35,7 @@
 </div>
 
 <style>
-  .app {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-  }
-
-  main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    margin: 0 auto;
-    box-sizing: border-box;
-    overflow-x: hidden; /* Prevent horizontal scrolling */
-  }
-
+  /* Global styles that can't be handled with Tailwind directly */
   :global(body) {
     overflow-x: hidden;
     max-width: 100vw;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 704e437..5c2754a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,281 +1,223 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import { fetchProblems, updateProblemFeedback } from '$lib/services/problem';
-  import type { Problem } from '$lib/services/problem';
-  import ProblemTable from '$lib/components/ProblemTable.svelte';
-
-  let problems: Problem[] = [];
-  let loading: boolean = false;
-  let error: string | null = null;
-  let userFeedback: Record<string, 'like' | 'dislike' | null> = {};
-
-  // Filtering options
-  let selectedSource: 'all' | 'codeforces' | 'kattis' = 'all';
-  let filteredProblems: Problem[] = [];
-
-  // Function to calculate problem score (likes - dislikes)
-  function calculateScore(problem: Problem): number {
-    return problem.likes - problem.dislikes;
-  }
-
-  // Function to sort problems by score (likes - dislikes)
-  function sortProblemsByScore(problemsToSort: Problem[]): Problem[] {
-    // Group problems by score
-    const problemsByScore: Record<number, Problem[]> = {};
+import { onMount } from 'svelte';
+import { fetchProblems, updateProblemFeedback } from '$lib/services/problem';
+import type { Problem } from '$lib/services/problem';
+import ProblemTable from '$lib/components/ProblemTable.svelte';
+
+let problems: Problem[] = [];
+let loading: boolean = false;
+let error: string | null = null;
+let userFeedback: Record<string, 'like' | 'dislike' | null> = {};
+
+// Function to calculate problem score (likes - dislikes)
+function calculateScore(problem: Problem): number {
+  return problem.likes - problem.dislikes;
+}
+
+// Function to sort problems by score (likes - dislikes)
+function sortProblemsByScore(problemsToSort: Problem[]): Problem[] {
+  // Group problems by score
+  const problemsByScore: Record<number, Problem[]> = {};
+
+  // Calculate score for each problem and group them
+  problemsToSort.forEach((problem) => {
+    const score = calculateScore(problem);
+    if (!problemsByScore[score]) {
+      problemsByScore[score] = [];
+    }
+    problemsByScore[score].push(problem);
+  });
 
-    // Calculate score for each problem and group them
-    problemsToSort.forEach((problem) => {
-      const score = calculateScore(problem);
-      if (!problemsByScore[score]) {
-        problemsByScore[score] = [];
+  Object.values(problemsByScore).forEach((group) => {
+    group.sort((a, b) => {
+      if (a.id && b.id) {
+        return a.id.localeCompare(b.id);
       }
-      problemsByScore[score].push(problem);
-    });
-
-    Object.values(problemsByScore).forEach((group) => {
-      group.sort((a, b) => {
-        if (a.id && b.id) {
-          return a.id.localeCompare(b.id);
-        }
-        return 0;
-      });
+      return 0;
     });
+  });
 
-    // Get all scores and sort them in descending order
-    const scores = Object.keys(problemsByScore)
-      .map(Number)
-      .sort((a, b) => b - a);
-
-    // Flatten the groups in order of score
-    return scores.flatMap((score) => problemsByScore[score]);
-  }
-
-  // Function to handle like/dislike actions
-  async function handleLike(problemId: string, isLike: boolean): Promise<void> {
-    try {
-      // Check if user has already provided feedback for this problem
-      const currentFeedback = userFeedback[problemId];
-
-      // If user already gave the same feedback, treat as an "undo"
-      if ((isLike && currentFeedback === 'like') || (!isLike && currentFeedback === 'dislike')) {
-        // Update UI optimistically
-        problems = problems.map((problem) => {
-          if (problem.id === problemId) {
-            if (isLike) {
-              return { ...problem, likes: problem.likes - 1 };
-            } else {
-              return { ...problem, dislikes: problem.dislikes - 1 };
-            }
-          }
-          return problem;
-        });
-
-        // Remove the user's feedback
-        userFeedback[problemId] = null;
-
-        // Update filtered problems without resorting
-        filteredProblems = filterProblems(problems);
+  // Get all scores and sort them in descending order
+  const scores = Object.keys(problemsByScore)
+    .map(Number)
+    .sort((a, b) => b - a);
 
-        // Save feedback to localStorage
-        localStorage.setItem('userFeedback', JSON.stringify(userFeedback));
+  // Flatten the groups in order of score
+  return scores.flatMap((score) => problemsByScore[score]);
+}
 
-        // Update the database
-        await updateProblemFeedback(problemId, isLike, true);
-        return;
-      }
+// Function to handle like/dislike actions
+async function handleLike(problemId: string, isLike: boolean): Promise<void> {
+  try {
+    // Check if user has already provided feedback for this problem
+    const currentFeedback = userFeedback[problemId];
 
-      // Handle switching feedback (like to dislike or vice versa)
-      if (currentFeedback) {
-        // Update UI optimistically
-        problems = problems.map((problem) => {
-          if (problem.id === problemId) {
-            if (isLike) {
-              // Switching from dislike to like
-              return {
-                ...problem,
-                likes: problem.likes + 1,
-                dislikes: problem.dislikes - 1
-              };
-            } else {
-              // Switching from like to dislike
-              return {
-                ...problem,
-                likes: problem.likes - 1,
-                dislikes: problem.dislikes + 1
-              };
-            }
+    // If user already gave the same feedback, treat as an "undo"
+    if ((isLike && currentFeedback === 'like') || (!isLike && currentFeedback === 'dislike')) {
+      // Update UI optimistically
+      problems = problems.map((problem) => {
+        if (problem.id === problemId) {
+          if (isLike) {
+            return { ...problem, likes: problem.likes - 1 };
+          } else {
+            return { ...problem, dislikes: problem.dislikes - 1 };
           }
-          return problem;
-        });
-
-        // Update user feedback
-        userFeedback[problemId] = isLike ? 'like' : 'dislike';
+        }
+        return problem;
+      });
 
-        // Update filtered problems without resorting
-        filteredProblems = filterProblems(problems);
+      // Remove the user's feedback
+      userFeedback = {
+        ...userFeedback,
+        [problemId]: null
+      };
 
-        // Save feedback to localStorage
-        localStorage.setItem('userFeedback', JSON.stringify(userFeedback));
+      // Save feedback to localStorage
+      localStorage.setItem('userFeedback', JSON.stringify(userFeedback));
 
-        // Update the database
-        await updateProblemFeedback(problemId, isLike, false, currentFeedback);
-        return;
-      }
+      // Update the database
+      await updateProblemFeedback(problemId, isLike, true);
+      return;
+    }
 
-      // Handle new feedback
+    // Handle switching feedback (like to dislike or vice versa)
+    if (currentFeedback) {
       // Update UI optimistically
       problems = problems.map((problem) => {
         if (problem.id === problemId) {
           if (isLike) {
-            return { ...problem, likes: problem.likes + 1 };
+            // Switching from dislike to like
+            return {
+              ...problem,
+              likes: problem.likes + 1,
+              dislikes: problem.dislikes - 1
+            };
           } else {
-            return { ...problem, dislikes: problem.dislikes + 1 };
+            // Switching from like to dislike
+            return {
+              ...problem,
+              likes: problem.likes - 1,
+              dislikes: problem.dislikes + 1
+            };
           }
         }
         return problem;
       });
 
-      // Update user feedback
-      userFeedback[problemId] = isLike ? 'like' : 'dislike';
-
-      // Update filtered problems without resorting
-      filteredProblems = filterProblems(problems);
+      // Update user feedback - create a new object to ensure reactivity
+      userFeedback = {
+        ...userFeedback,
+        [problemId]: isLike ? 'like' : 'dislike'
+      };
 
       // Save feedback to localStorage
       localStorage.setItem('userFeedback', JSON.stringify(userFeedback));
 
       // Update the database
-      await updateProblemFeedback(problemId, isLike);
-    } catch (err) {
-      console.error('Error updating feedback:', err);
-      // If there's an error, reload problems to ensure UI is in sync with server
-      loadProblems();
+      await updateProblemFeedback(problemId, isLike, false, currentFeedback);
+      return;
     }
-  }
 
-  // Function to load problems
-  async function loadProblems() {
-    loading = true;
-    error = null;
+    // Handle new feedback
+    // Update UI optimistically
+    problems = problems.map((problem) => {
+      if (problem.id === problemId) {
+        if (isLike) {
+          return { ...problem, likes: problem.likes + 1 };
+        } else {
+          return { ...problem, dislikes: problem.dislikes + 1 };
+        }
+      }
+      return problem;
+    });
 
-    try {
-      // Fetch problems
-      const fetchedProblems = await fetchProblems();
+    // Update user feedback - create a new object to ensure reactivity
+    userFeedback = {
+      ...userFeedback,
+      [problemId]: isLike ? 'like' : 'dislike'
+    };
 
-      // Sort by score only on initial load
-      problems = sortProblemsByScore(fetchedProblems);
+    // Save feedback to localStorage
+    localStorage.setItem('userFeedback', JSON.stringify(userFeedback));
 
-      // Update filtered problems
-      filteredProblems = filterProblems(problems);
-    } catch (e) {
-      console.error('Error loading problems:', e);
-      error = 'Failed to load problems. Please try again later.';
-    } finally {
-      loading = false;
-    }
+    // Update the database
+    await updateProblemFeedback(problemId, isLike);
+  } catch (err) {
+    console.error('Error updating feedback:', err);
+    // If there's an error, reload problems to ensure UI is in sync with server
+    loadProblems();
   }
-
-  // Function to filter problems based on selected source
-  function filterProblems(problemsToFilter: Problem[]): Problem[] {
-    if (selectedSource === 'all') return problemsToFilter;
-    return problemsToFilter.filter((problem) => problem.source === selectedSource);
+}
+
+// Function to load problems
+async function loadProblems() {
+  loading = true;
+  error = null;
+
+  try {
+    // Fetch problems
+    const fetchedProblems = await fetchProblems();
+
+    // Sort by score only on initial load
+    problems = sortProblemsByScore(fetchedProblems);
+  } catch (e) {
+    console.error('Error loading problems:', e);
+    error = 'Failed to load problems. Please try again later.';
+  } finally {
+    loading = false;
   }
+}
 
-  // Load problems on mount
-  onMount(() => {
-    loadProblems();
+// Load problems on mount
+onMount(() => {
+  loadProblems();
 
-    // Load user feedback from localStorage
-    const savedFeedback = localStorage.getItem('userFeedback');
-    if (savedFeedback) {
-      try {
-        userFeedback = JSON.parse(savedFeedback);
-      } catch (e) {
-        console.error('Failed to parse saved feedback', e);
-        userFeedback = {};
-      }
+  // Load user feedback from localStorage
+  const savedFeedback = localStorage.getItem('userFeedback');
+  if (savedFeedback) {
+    try {
+      userFeedback = JSON.parse(savedFeedback);
+    } catch (e) {
+      console.error('Failed to parse saved feedback', e);
+      userFeedback = {};
     }
-  });
+  }
+});
 
-  // Save user feedback to localStorage when it changes
-  $: {
-    if (Object.keys(userFeedback).length > 0) {
-      localStorage.setItem('userFeedback', JSON.stringify(userFeedback));
-    }
+// Save user feedback to localStorage when it changes
+$: {
+  if (Object.keys(userFeedback).length > 0) {
+    localStorage.setItem('userFeedback', JSON.stringify(userFeedback));
   }
+}
 </script>
 
 <svelte:head>
   <title>AlgoHub</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
 </svelte:head>
 
-<div class="container">
+<div class="mx-auto w-full max-w-[1200px] px-3 py-4 sm:px-4 md:py-6">
   {#if loading}
-    <div class="loading">
-      <div class="spinner"></div>
+    <div class="py-6 text-center sm:py-8">
+      <div
+        class="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-4 border-[rgba(0,0,0,0.1)] border-l-[var(--color-primary)] sm:h-9 sm:w-9"
+      ></div>
       <p>Loading problems...</p>
     </div>
   {:else if error}
-    <div class="error">
+    <div class="py-6 text-center text-red-500 sm:py-8">
       <p>{error}</p>
-      <button on:click={() => window.location.reload()}>Try Again</button>
+      <button
+        class="hover:bg-opacity-90 mt-4 rounded bg-[var(--color-primary)] px-4 py-2 text-white transition-colors"
+        on:click={() => window.location.reload()}>Try Again</button
+      >
     </div>
   {:else if problems.length === 0}
-    <div class="empty-state">
+    <div class="py-6 text-center text-[var(--color-text-muted)] sm:py-8">
       <p>No problems found. Check back later or submit some problems!</p>
     </div>
   {:else}
-    <ProblemTable problems={filteredProblems} {userFeedback} onLike={handleLike} />
+    <ProblemTable problems={problems} userFeedback={userFeedback} onLike={handleLike} />
   {/if}
 </div>
-
-<style>
-  .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 1.5rem 1rem;
-    overflow-x: auto; /* Allow horizontal scrolling for the table */
-  }
-
-  .loading,
-  .error {
-    text-align: center;
-    padding: 2rem;
-  }
-
-  .error {
-    color: #f44336;
-  }
-
-  .empty-state {
-    text-align: center;
-    padding: 2rem;
-    color: var(--text-muted);
-  }
-
-  .spinner {
-    border: 4px solid rgba(0, 0, 0, 0.1);
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    border-left-color: var(--primary-color);
-    animation: spin 1s linear infinite;
-    margin: 0 auto 1rem;
-  }
-
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  /* Mobile responsiveness */
-  @media (max-width: 768px) {
-    .container {
-      padding: 1rem 0.5rem;
-    }
-  }
-</style>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 462a382..e0f289f 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -7,39 +7,39 @@
   <meta name="description" content="About this app" />
 </svelte:head>
 
-<div class="container">
-  <section>
-    <h2>AlgoHub</h2>
-    <p>
+<div class="max-w-3xl mx-auto px-4 py-8">
+  <section class="mb-10">
+    <h2 class="text-2xl mb-4 text-accent">AlgoHub</h2>
+    <p class="mb-4 leading-relaxed">
       AlgoHub is a collection of hand-picked problems. If you are new to competitive programming you
       can learn the fundamentals at some of these sites:
     </p>
-    <ul>
-      <li>
+    <ul class="ml-6 mb-4">
+      <li class="mb-2 leading-relaxed">
         <a href="https://cses.fi/" target="_blank" rel="noopener noreferrer">CSES Problem Set</a>
       </li>
-      <li>
+      <li class="mb-2 leading-relaxed">
         <a href="https://cp-algorithms.com/" target="_blank" rel="noopener noreferrer"
           >CP Algorithms</a
         >
       </li>
-      <li>
+      <li class="mb-2 leading-relaxed">
         <a href="https://usaco.guide/" target="_blank" rel="noopener noreferrer">USACO Guide</a>
       </li>
-      <li>
+      <li class="mb-2 leading-relaxed">
         <a href="https://atcoder.jp/contests/dp" target="_blank" rel="noopener noreferrer"
           >AtCoder DP Contest</a
         >
       </li>
-      <li>
+      <li class="mb-2 leading-relaxed">
         <a href="https://codeforces.com/edu/courses" target="_blank" rel="noopener noreferrer"
           >Codeforces EDU</a
         >
       </li>
     </ul>
 
-    <h3>Beyond the Fundamentals</h3>
-    <p>
+    <h3 class="text-xl mb-4 text-accent">Beyond the Fundamentals</h3>
+    <p class="mb-4 leading-relaxed">
       But what about once you've learned the fundamentals? How should you practice then? Experts
       like Umnik recommend working through an archive of problems (as described in this
       <a href="https://codeforces.com/blog/entry/98806" target="_blank" rel="noopener noreferrer">
@@ -47,44 +47,44 @@
       >).
     </p>
 
-    <p>
+    <p class="mb-4 leading-relaxed">
       It's a great approach, but the quality of problems on any given archive can vary greatly. If
       only there were a way to extract the highest quality problems available on the internet. We
       think we can do this! AlgoHub is a social site that allows users to curate and maintain their
       own lists of recommendations.
     </p>
 
-    <h3>Canon Problems</h3>
-    <p>
+    <h3 class="text-xl mb-4 text-accent">Canon Problems</h3>
+    <p class="mb-4 leading-relaxed">
       Inspired by "Canon Events" from <i>Across the Spiderverse</i>, Canon Problems are the problems
       that after solving, fundamentally changed the way you approach competitive programming
       problems.
     </p>
-    <p>
+    <p class="mb-4 leading-relaxed">
       AlgoHub aims to collect these Canon Problems to enable you to maximize the effectiveness of
       your practice by leveraging the collective knowledge of the competitive programming community.
     </p>
   </section>
 
-  <section>
-    <h2>On Practicing</h2>
-    <ul>
-      <li>
+  <section class="mb-10">
+    <h2 class="text-2xl mb-4 text-accent">On Practicing</h2>
+    <ul class="ml-6 mb-4">
+      <li class="mb-2 leading-relaxed">
         <a href="https://codeforces.com/blog/entry/98806" target="_blank" rel="noopener noreferrer">
           How to practice Competitive Programming [Um_nik version]
         </a>
       </li>
-      <li>
+      <li class="mb-2 leading-relaxed">
         <a href="https://codeforces.com/blog/entry/98621" target="_blank" rel="noopener noreferrer">
           Self-deception: maybe why you're still grey after practicing every day
         </a>
       </li>
-      <li>
+      <li class="mb-2 leading-relaxed">
         <a href="https://codeforces.com/blog/entry/91114" target="_blank" rel="noopener noreferrer">
           My opinion on how to practice competitive programming
         </a>
       </li>
-      <li>
+      <li class="mb-2 leading-relaxed">
         <a
           href="https://codeforces.com/blog/entry/118882"
           target="_blank"
@@ -96,12 +96,12 @@
     </ul>
   </section>
 
-  <section>
-    <h2>Algorithm Libraries</h2>
+  <section class="mb-10">
+    <h2 class="text-2xl mb-4 text-accent">Algorithm Libraries</h2>
 
-    <h3>AlgoHub's Library of Choice</h3>
-    <ul>
-      <li>
+    <h3 class="text-xl mb-4 text-accent">AlgoHub's Library of Choice</h3>
+    <ul class="ml-6 mb-4">
+      <li class="mb-2 leading-relaxed">
         <a
           href="https://github.com/programming-team-code"
           target="_blank"
@@ -113,30 +113,30 @@
       </li>
     </ul>
 
-    <h3>Optimized for ICPC</h3>
-    <ul>
-      <li>
+    <h3 class="text-xl mb-4 text-accent">Optimized for ICPC</h3>
+    <ul class="ml-6 mb-4">
+      <li class="mb-2 leading-relaxed">
         <a
           href="https://github.com/kth-competitive-programming/kactl"
           target="_blank"
           rel="noopener noreferrer">KACTL</a
         > - KTH Algorithm Competition Template Library
       </li>
-      <li>
+      <li class="mb-2 leading-relaxed">
         <a
           href="https://github.com/ucf-programming-team/hackpack-cpp"
           target="_blank"
           rel="noopener noreferrer">UCF Hackpack</a
         > - University of Central Florida's team reference document
       </li>
-      <li>
+      <li class="mb-2 leading-relaxed">
         <a
           href="https://github.com/foreverbell/acm-icpc-cheat-sheet"
           target="_blank"
           rel="noopener noreferrer">ACM-ICPC Cheat Sheet</a
         > - Comprehensive reference
       </li>
-      <li>
+      <li class="mb-2 leading-relaxed">
         <a
           href="https://github.com/UCF-Apocalypse-Attack/hackpack"
           target="_blank"
@@ -145,9 +145,9 @@
       </li>
     </ul>
 
-    <h3>Optimized for Online Contests</h3>
-    <ul>
-      <li>
+    <h3 class="text-xl mb-4 text-accent">Optimized for Online Contests</h3>
+    <ul class="ml-6 mb-4">
+      <li class="mb-2 leading-relaxed">
         <a
           href="https://github.com/yosupo06/library-checker-problems"
           target="_blank"
@@ -156,23 +156,23 @@
       </li>
     </ul>
 
-    <h3>Extensive Libraries</h3>
-    <ul>
-      <li>
+    <h3 class="text-xl mb-4 text-accent">Extensive Libraries</h3>
+    <ul class="ml-6 mb-4">
+      <li class="mb-2 leading-relaxed">
         <a
           href="https://github.com/koosaga/olympiad/tree/master/Library/codes"
           target="_blank"
           rel="noopener noreferrer">Koosaga's Library</a
         > - Comprehensive collection
       </li>
-      <li>
+      <li class="mb-2 leading-relaxed">
         <a
           href="https://github.com/ShahjalalShohag/code-library"
           target="_blank"
           rel="noopener noreferrer">Shahjalal Shohag's Code Library</a
         > - Extensive algorithm collection
       </li>
-      <li>
+      <li class="mb-2 leading-relaxed">
         <a
           href="https://github.com/dacin21/dacin21_codebook"
           target="_blank"
@@ -181,16 +181,16 @@
       </li>
     </ul>
 
-    <h3>Clean Implementations</h3>
-    <ul>
-      <li>
+    <h3 class="text-xl mb-4 text-accent">Clean Implementations</h3>
+    <ul class="ml-6 mb-4">
+      <li class="mb-2 leading-relaxed">
         <a
           href="https://github.com/demidenko/olymp-cpp-lib"
           target="_blank"
           rel="noopener noreferrer">Olymp C++ Lib</a
         > - Clean and readable implementations
       </li>
-      <li>
+      <li class="mb-2 leading-relaxed">
         <a
           href="https://github.com/brunomaletta/Biblioteca"
           target="_blank"
@@ -199,31 +199,31 @@
       </li>
     </ul>
 
-    <h3>Top Competitive Programmers' Libraries</h3>
-    <ul>
-      <li>
+    <h3 class="text-xl mb-4 text-accent">Top Competitive Programmers' Libraries</h3>
+    <ul class="ml-6 mb-4">
+      <li class="mb-2 leading-relaxed">
         <a href="https://github.com/ecnerwala/cp-book" target="_blank" rel="noopener noreferrer"
           >ecnerwala's CP Book</a
         > - High-quality implementations
       </li>
-      <li>
+      <li class="mb-2 leading-relaxed">
         <a href="https://github.com/the-tourist/algo" target="_blank" rel="noopener noreferrer"
           >tourist's Algorithms</a
         > - Library by one of the world's top competitive programmers
       </li>
-      <li>
+      <li class="mb-2 leading-relaxed">
         <a
           href="https://github.com/nealwu/competitive-programming"
           target="_blank"
           rel="noopener noreferrer">Neal Wu's Competitive Programming</a
         > - Comprehensive collection
       </li>
-      <li>
+      <li class="mb-2 leading-relaxed">
         <a href="https://github.com/bqi343/cp-notebook" target="_blank" rel="noopener noreferrer"
           >bqi343's CP Notebook</a
         > - Extensive reference
       </li>
-      <li>
+      <li class="mb-2 leading-relaxed">
         <a
           href="https://github.com/suisen-cp/cp-library-cpp"
           target="_blank"
@@ -232,9 +232,9 @@
       </li>
     </ul>
 
-    <h3>Python</h3>
-    <ul>
-      <li>
+    <h3 class="text-xl mb-4 text-accent">Python</h3>
+    <ul class="ml-6 mb-4">
+      <li class="mb-2 leading-relaxed">
         <a
           href="https://github.com/cheran-senthil/PyRival"
           target="_blank"
@@ -244,9 +244,9 @@
     </ul>
   </section>
 
-  <section>
-    <h2>Contribute</h2>
-    <p>
+  <section class="mb-10">
+    <h2 class="text-2xl mb-4 text-accent">Contribute</h2>
+    <p class="mb-4 leading-relaxed">
       AlgoHub is an open-source project, and we welcome contributions from the community. If you'd
       like to help improve AlgoHub, please check out our <a
         href="https://github.com/cameroncuster/AlgoHub"
@@ -256,36 +256,3 @@
     </p>
   </section>
 </div>
-
-<style>
-  .container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 2rem 1rem;
-  }
-
-  section {
-    margin-bottom: 2.5rem;
-  }
-
-  h2 {
-    font-size: 1.5rem;
-    margin-bottom: 1rem;
-    color: var(--accent-color);
-  }
-
-  p {
-    margin-bottom: 1rem;
-    line-height: 1.6;
-  }
-
-  ul {
-    margin-left: 1.5rem;
-    margin-bottom: 1rem;
-  }
-
-  li {
-    margin-bottom: 0.5rem;
-    line-height: 1.6;
-  }
-</style>
diff --git a/src/routes/submit/+page.svelte b/src/routes/submit/+page.svelte
index b8e672f..cbe7c39 100644
--- a/src/routes/submit/+page.svelte
+++ b/src/routes/submit/+page.svelte
@@ -6,8 +6,9 @@
   import { supabase } from '$lib/services/database';
   import type { Unsubscriber } from 'svelte/store';
 
-  import codeforcesLogo from '../../assets/codeforces.png';
-  import kattisLogo from '../../assets/kattis.png';
+  // Use static image paths instead of imports
+  const codeforcesLogo = '/images/codeforces.png';
+  const kattisLogo = '/images/kattis.png';
 
   let isAdminUser = false;
   let checkingAdmin = true;
@@ -53,130 +54,35 @@
   <title>Submit Problems - AlgoHub</title>
 </svelte:head>
 
-<div class="container">
-  <div class="submit-options">
-    <h1>Submit Problems</h1>
+<div class="p-4 sm:p-6 w-full flex items-center justify-center">
+  <div class="w-full max-w-[500px]">
+    <h1 class="text-2xl font-semibold text-center mb-6">Submit Problems</h1>
 
     {#if checkingAdmin}
-      <div class="loading-message">Checking permissions...</div>
+      <div class="text-center text-blue-500 p-4">Checking permissions...</div>
     {:else if error}
-      <div class="error-message">{error}</div>
+      <div class="text-center text-red-500 p-4">{error}</div>
     {:else if isAdminUser}
-      <div class="platform-buttons">
-        <a href="/submit/codeforces" class="platform-button">
-          <img src={codeforcesLogo} alt="Codeforces" class="platform-icon" />
-          <div class="platform-info">
-            <h2>Codeforces</h2>
+      <div class="flex flex-col gap-6">
+        <a
+          href="/submit/codeforces"
+          class="flex items-center gap-6 p-4 sm:p-6 bg-background border border-border rounded-lg no-underline text-text transition-all duration-200 hover:translate-y-[-2px] hover:shadow-md hover:border-primary"
+        >
+          <img src={codeforcesLogo} alt="Codeforces" class="w-12 h-12 object-contain" />
+          <div>
+            <h2 class="m-0 text-xl text-heading">Codeforces</h2>
           </div>
         </a>
-        <a href="/submit/kattis" class="platform-button">
-          <img src={kattisLogo} alt="Kattis" class="platform-icon" />
-          <div class="platform-info">
-            <h2>Kattis</h2>
+        <a
+          href="/submit/kattis"
+          class="flex items-center gap-6 p-4 sm:p-6 bg-background border border-border rounded-lg no-underline text-text transition-all duration-200 hover:translate-y-[-2px] hover:shadow-md hover:border-primary"
+        >
+          <img src={kattisLogo} alt="Kattis" class="w-12 h-12 object-contain" />
+          <div>
+            <h2 class="m-0 text-xl text-heading">Kattis</h2>
           </div>
         </a>
       </div>
     {/if}
   </div>
 </div>
-
-<style>
-  .container {
-    max-width: 900px;
-    margin: 0 auto;
-    padding: 1.5rem 1rem;
-    box-sizing: border-box;
-    width: 100%;
-  }
-
-  .submit-options {
-    background-color: var(--secondary-color);
-    border-radius: 8px;
-    padding: 2.5rem;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    width: 100%;
-    box-sizing: border-box;
-  }
-
-  h1 {
-    margin-top: 0;
-    color: var(--heading-color);
-    font-size: 2rem;
-    margin-bottom: 2rem;
-    text-align: center;
-  }
-
-  .platform-buttons {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    max-width: 500px;
-    margin: 0 auto;
-  }
-
-  .platform-button {
-    display: flex;
-    align-items: center;
-    gap: 1.5rem;
-    padding: 1.5rem;
-    background-color: var(--background-color);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    text-decoration: none;
-    color: var(--text-color);
-    transition: all 0.2s;
-  }
-
-  .platform-button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    border-color: var(--primary-color);
-  }
-
-  .platform-icon {
-    width: 48px;
-    height: 48px;
-    object-fit: contain;
-  }
-
-  .platform-info h2 {
-    margin: 0;
-    font-size: 1.25rem;
-    color: var(--heading-color);
-  }
-
-  .loading-message {
-    text-align: center;
-    color: #2196f3;
-    padding: 1rem;
-  }
-
-  .error-message {
-    text-align: center;
-    color: #f44336;
-    padding: 1rem;
-  }
-
-  @media (max-width: 768px) {
-    .container {
-      padding: 1rem 0.75rem;
-    }
-
-    .submit-options {
-      padding: 1.5rem;
-    }
-
-    .platform-buttons {
-      grid-template-columns: 1fr;
-    }
-
-    .platform-button {
-      padding: 1rem;
-    }
-
-    .platform-icon {
-      width: 36px;
-      height: 36px;
-    }
-  }
-</style>
diff --git a/src/routes/submit/codeforces/+page.svelte b/src/routes/submit/codeforces/+page.svelte
index 90e38d3..b9876bd 100644
--- a/src/routes/submit/codeforces/+page.svelte
+++ b/src/routes/submit/codeforces/+page.svelte
@@ -6,7 +6,6 @@
     formatCodeforcesUrl,
     extractCodeforcesUrls
   } from '$lib/services/codeforces';
-  import codeforcesIcon from '../../../assets/codeforces.png';
 </script>
 
 <svelte:head>
@@ -16,7 +15,7 @@
 <ProblemSubmitForm
   title="Submit Codeforces Problems"
   platformName="Codeforces"
-  platformIcon={codeforcesIcon}
+  platformIcon="/images/codeforces.png"
   handlePlaceholder="Enter your Codeforces handle (optional)"
   urlsPlaceholder="https://codeforces.com/contest/1234/problem/A&#10;https://codeforces.com/problemset/problem/1234/A&#10;https://codeforces.com/gym/102253/problem/C"
   urlsDescription="Enter Codeforces problem URLs (contest, problemset, or gym)"
diff --git a/src/routes/submit/kattis/+page.svelte b/src/routes/submit/kattis/+page.svelte
index 2e14929..d2dc38d 100644
--- a/src/routes/submit/kattis/+page.svelte
+++ b/src/routes/submit/kattis/+page.svelte
@@ -6,7 +6,6 @@
     formatKattisUrl,
     extractKattisUrls
   } from '$lib/services/kattis';
-  import kattisIcon from '../../../assets/kattis.png';
 </script>
 
 <svelte:head>
@@ -16,7 +15,7 @@
 <ProblemSubmitForm
   title="Submit Kattis Problems"
   platformName="Kattis"
-  platformIcon={kattisIcon}
+  platformIcon="/images/kattis.png"
   handlePlaceholder="Enter your Kattis handle (optional)"
   urlsPlaceholder="kattis.com/problems/hello&#10;open.kattis.com/problems/twostones&#10;customscontrols"
   urlsDescription="Enter Kattis problem URLs or problem IDs"
diff --git a/src/assets/codeforces.png b/static/images/codeforces.png
similarity index 100%
rename from src/assets/codeforces.png
rename to static/images/codeforces.png
diff --git a/src/assets/kattis.png b/static/images/kattis.png
similarity index 100%
rename from src/assets/kattis.png
rename to static/images/kattis.png
diff --git a/vite.config.ts b/vite.config.ts
index 526c028..3a90547 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,9 @@
+import tailwindcss from '@tailwindcss/vite';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  plugins: [sveltekit()],
+  plugins: [sveltekit(), tailwindcss()],
   define: {
     'import.meta.env.VERCEL_ANALYTICS_ID': JSON.stringify(process.env.VERCEL_ANALYTICS_ID)
   }