diff --git a/sql/init.sql b/sql/init.sql
index d1c3fdc..6131d54 100644
--- a/sql/init.sql
+++ b/sql/init.sql
@@ -2,26 +2,21 @@
 -- This file includes all the necessary SQL files to set up the database schema
 -- Enable UUID extension if not already enabled
 CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
-
 -- Common utility functions
 \ i common / utility_functions.sql -- Authentication and user management
 \ i auth / user_roles.sql \ i auth / user_triggers.sql \ i auth / user_preferences.sql -- Problem-related tables and functions
-\ i problems / problems.sql \ i problems / user_problem_feedback.sql \ i problems / user_solved_problems.sql \ i problems / problem_functions.sql -- Contest-related tables and functions
+\ i problems / problems.sql \ i problems / user_problem_feedback.sql \ i problems / user_solved_problems.sql \ i problems / problem_functions.sql \ i problems / get_user_solved_problems.sql -- Contest-related tables and functions
 \ i contests / contests.sql \ i contests / user_contest_participation.sql \ i contests / user_contest_feedback.sql \ i contests / contest_functions.sql -- Leaderboard functions
 \ i leaderboard / leaderboard_functions.sql -- Grant necessary permissions
-
 GRANT USAGE ON SCHEMA public TO anon,
   authenticated,
   service_role;
-
 GRANT ALL ON ALL TABLES IN SCHEMA public TO anon,
   authenticated,
   service_role;
-
 GRANT ALL ON ALL FUNCTIONS IN SCHEMA public TO anon,
   authenticated,
   service_role;
-
 GRANT ALL ON ALL SEQUENCES IN SCHEMA public TO anon,
   authenticated,
   service_role;
\ No newline at end of file
diff --git a/sql/problems/get_user_solved_problems.sql b/sql/problems/get_user_solved_problems.sql
new file mode 100644
index 0000000..c1dfaf2
--- /dev/null
+++ b/sql/problems/get_user_solved_problems.sql
@@ -0,0 +1,16 @@
+-- Function to get solved problems for a specific user
+CREATE OR REPLACE FUNCTION get_user_solved_problems(p_user_id UUID)
+RETURNS TABLE (problem_id UUID) AS $$
+BEGIN
+  RETURN QUERY
+  SELECT usp.problem_id
+  FROM user_solved_problems usp
+  JOIN auth.users u ON usp.user_id = u.id
+  LEFT JOIN user_preferences up ON u.id = up.user_id
+  WHERE usp.user_id = p_user_id
+  AND COALESCE(up.hide_from_leaderboard, false) = false;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+-- Grant permissions
+GRANT EXECUTE ON FUNCTION get_user_solved_problems TO authenticated, anon;
diff --git a/src/lib/components/LeaderboardTable.svelte b/src/lib/components/LeaderboardTable.svelte
index a7695d5..43dacc5 100644
--- a/src/lib/components/LeaderboardTable.svelte
+++ b/src/lib/components/LeaderboardTable.svelte
@@ -111,15 +111,39 @@ function getRankTierName(rank: number): string {
                     {entry.username.substring(0, 2).toUpperCase()}
                   </div>
                 {/if}
-                <a
-                  href={entry.githubUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="text-[var(--color-username)] hover:text-[color-mix(in_oklab,var(--color-username)_80%,white)] hover:underline"
-                  title={"@" + entry.username}
-                >
-                  @{entry.username}
-                </a>
+                <div class="flex items-center gap-2">
+                  <a
+                    href={`/user/${entry.userId}`}
+                    class="text-[var(--color-username)] hover:text-[color-mix(in_oklab,var(--color-username)_80%,white)] hover:underline"
+                    title={"View @" + entry.username + "'s solved problems"}
+                  >
+                    @{entry.username}
+                  </a>
+                  <a
+                    href={entry.githubUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-[var(--color-text-muted)] hover:text-[var(--color-text)] hover:underline"
+                    title={"View @" + entry.username + "'s GitHub profile"}
+                    aria-label={"View @" + entry.username + "'s GitHub profile"}
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="14"
+                      height="14"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+                      <polyline points="15 3 21 3 21 9"></polyline>
+                      <line x1="10" y1="14" x2="21" y2="3"></line>
+                    </svg>
+                  </a>
+                </div>
               </div>
             </td>
             <td class="p-2 text-center font-medium sm:p-3">
@@ -182,11 +206,11 @@ function getRankTierName(rank: number): string {
 }
 
 /* Ensure username is always purple */
-a[href*='github.com'] {
+a[href^='/user/'] {
   color: var(--color-username) !important;
 }
 
-a[href*='github.com']:hover {
+a[href^='/user/']:hover {
   color: color-mix(in oklab, var(--color-username) 80%, white) !important;
 }
 </style>
diff --git a/src/lib/components/ProblemDisplay.svelte b/src/lib/components/ProblemDisplay.svelte
new file mode 100644
index 0000000..acc9fb0
--- /dev/null
+++ b/src/lib/components/ProblemDisplay.svelte
@@ -0,0 +1,537 @@
+<script lang="ts">
+import { onMount } from 'svelte';
+import { browser } from '$app/environment';
+import {
+  fetchProblems,
+  updateProblemFeedback,
+  fetchUserFeedback,
+  fetchUserSolvedProblems,
+  fetchUserSolvedProblemsByUserId,
+  toggleProblemSolved
+} from '$lib/services/problem';
+import type { Problem } from '$lib/services/problem';
+import { fetchLeaderboard } from '$lib/services/leaderboard';
+import type { LeaderboardEntry } from '$lib/services/leaderboard';
+import { user } from '$lib/services/auth';
+import ProblemTable from '$lib/components/ProblemTable.svelte';
+import TopicSidebar from '$lib/components/TopicSidebar.svelte';
+
+// Props
+export let pageTitle = 'Problems';
+export let targetUserId: string | null = null;
+export let defaultSolvedFilterState: 'all' | 'solved' | 'unsolved' = 'all';
+
+// State variables
+let problems: Problem[] = [];
+let filteredProblems: Problem[] = [];
+let loading: boolean = false;
+let error: string | null = null;
+let userFeedback: Record<string, 'like' | 'dislike' | null> = {};
+let userSolvedProblems: Set<string> = new Set();
+let selectedTopic: string | null = null;
+let selectedAuthor: string | null = null;
+let selectedSource: 'codeforces' | 'kattis' | null = null;
+let solvedFilterState: 'all' | 'solved' | 'unsolved' = defaultSolvedFilterState;
+let sidebarOpen = false; // Default closed on mobile
+let isMobile = false;
+let isAuthenticated = false;
+let availableAuthors: string[] = [];
+let leaderboardEntries: LeaderboardEntry[] = [];
+let targetUserSolvedProblems: Set<string> = new Set();
+let targetUser: LeaderboardEntry | null = null;
+
+// Problem types
+const PROBLEM_TYPES = ['graph', 'array', 'string', 'math', 'tree', 'queries', 'geometry', 'misc'];
+
+// 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);
+  });
+
+  Object.values(problemsByScore).forEach((group) => {
+    group.sort((a, b) => {
+      if (a.id && b.id) {
+        return a.id.localeCompare(b.id);
+      }
+      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 sort problems by difficulty
+function sortProblemsByDifficulty(
+  problemsToSort: Problem[],
+  direction: 'asc' | 'desc' | null
+): Problem[] {
+  if (direction === null) {
+    // If no direction specified, return to default sort (by score)
+    return sortProblemsByScore([...problemsToSort]);
+  }
+
+  return [...problemsToSort].sort((a, b) => {
+    // Handle undefined difficulties
+    const diffA = a.difficulty ?? 0;
+    const diffB = b.difficulty ?? 0;
+
+    // Sort based on direction
+    return direction === 'asc' ? diffA - diffB : diffB - diffA;
+  });
+}
+
+// Special topic value for NEW problems
+const NEW_TOPIC = 'NEW';
+
+// Function to get problems filtered by everything except author
+function getProblemsWithoutAuthorFilter(): Problem[] {
+  let filtered = [...problems];
+
+  // Apply topic filter if selected
+  if (selectedTopic) {
+    if (selectedTopic === NEW_TOPIC) {
+      // For NEW topic, filter problems with null or undefined type
+      filtered = filtered.filter((problem) => !problem.type);
+    } else {
+      filtered = filtered.filter((problem) => {
+        // If topic is "misc", include problems with no type or with "misc" type
+        if (selectedTopic === 'misc') {
+          return !problem.type || problem.type === 'misc';
+        }
+        return problem.type === selectedTopic;
+      });
+    }
+  }
+
+  // Apply solved filter based on the appropriate solved problems set
+  if (solvedFilterState !== 'all') {
+    filtered = filtered.filter((problem) => {
+      // If we're viewing a specific user's page, use their solved problems
+      // Otherwise use the current user's solved problems
+      const solvedProblemsSet = targetUserId ? targetUserSolvedProblems : userSolvedProblems;
+      const isSolved = problem.id && solvedProblemsSet.has(problem.id);
+      return solvedFilterState === 'solved' ? isSolved : !isSolved;
+    });
+  }
+
+  // Apply source filter if selected
+  if (selectedSource) {
+    filtered = filtered.filter((problem) => problem.source === selectedSource);
+  }
+
+  return filtered;
+}
+
+// Function to filter problems by topic, solved status, and author
+function filterProblems(): void {
+  // Get problems filtered by everything except author
+  let filtered = getProblemsWithoutAuthorFilter();
+
+  // Update available authors based on current filters (except author filter)
+  availableAuthors = [...new Set(filtered.map((p) => p.addedBy))].sort();
+
+  // Apply author filter if selected
+  if (selectedAuthor) {
+    filtered = filtered.filter((problem) => problem.addedBy === selectedAuthor);
+  }
+
+  // Update filtered problems
+  filteredProblems = filtered;
+
+  // Auto-close sidebar on mobile after selection
+  if (isMobile) {
+    sidebarOpen = false;
+  }
+}
+
+// Function to filter problems by topic
+function filterProblemsByTopic(topic: string | null): void {
+  selectedTopic = topic;
+  filterProblems();
+}
+
+// Function to handle topic selection
+function handleTopicSelect(topic: string | null): void {
+  filterProblemsByTopic(topic);
+}
+
+// Function to toggle sidebar visibility
+function toggleSidebar(): void {
+  sidebarOpen = !sidebarOpen;
+}
+
+// Check if mobile
+function checkMobile(): void {
+  if (!browser) return;
+  isMobile = window.innerWidth < 768;
+}
+
+// Function to handle like/dislike actions
+async function handleLike(problemId: string, isLike: boolean): Promise<void> {
+  try {
+    // Check if user is authenticated
+    if (!isAuthenticated) {
+      error = 'You must be signed in to like or dislike problems';
+      return;
+    }
+
+    // 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 = {
+        ...userFeedback,
+        [problemId]: null
+      };
+
+      // Update the database
+      await updateProblemFeedback(problemId, isLike, true);
+
+      // Update filtered problems
+      filterProblems();
+      return;
+    }
+
+    // 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
+            };
+          }
+        }
+        return problem;
+      });
+
+      // Update user feedback - create a new object to ensure reactivity
+      userFeedback = {
+        ...userFeedback,
+        [problemId]: isLike ? 'like' : 'dislike'
+      };
+
+      // Update the database
+      await updateProblemFeedback(problemId, isLike, false, currentFeedback);
+
+      // Update filtered problems
+      filterProblems();
+      return;
+    }
+
+    // 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;
+    });
+
+    // Update user feedback - create a new object to ensure reactivity
+    userFeedback = {
+      ...userFeedback,
+      [problemId]: isLike ? 'like' : 'dislike'
+    };
+
+    // Update the database
+    await updateProblemFeedback(problemId, isLike);
+
+    // Update filtered problems
+    filterProblems();
+  } 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 handle marking problems as solved/unsolved
+async function handleToggleSolved(problemId: string, isSolved: boolean): Promise<void> {
+  try {
+    // Check if user is authenticated
+    if (!isAuthenticated) {
+      error = 'You must be signed in to mark problems as solved';
+      return;
+    }
+
+    // Update UI optimistically
+    if (isSolved) {
+      userSolvedProblems = new Set([...userSolvedProblems, problemId]);
+    } else {
+      userSolvedProblems = new Set([...userSolvedProblems].filter((id) => id !== problemId));
+    }
+
+    // Update the database
+    const success = await toggleProblemSolved(problemId, isSolved);
+
+    if (!success) {
+      // If there's an error, reload solved problems to ensure UI is in sync with server
+      if (isAuthenticated) {
+        userSolvedProblems = await fetchUserSolvedProblems();
+      }
+    }
+  } catch (err) {
+    console.error('Error updating solved status:', err);
+    // If there's an error, reload solved problems to ensure UI is in sync with server
+    if (isAuthenticated) {
+      userSolvedProblems = await fetchUserSolvedProblems();
+    }
+  }
+}
+
+// Function to handle difficulty sorting
+function handleDifficultySort({ detail }: CustomEvent<{ direction: 'asc' | 'desc' | null }>) {
+  // Get problems with all filters except author
+  const problemsWithoutAuthorFilter = getProblemsWithoutAuthorFilter();
+
+  // Update available authors
+  availableAuthors = [...new Set(problemsWithoutAuthorFilter.map((p) => p.addedBy))].sort();
+
+  // Sort the problems by difficulty
+  filteredProblems = sortProblemsByDifficulty(filteredProblems, detail.direction);
+}
+
+// Function to handle solved filter
+function handleSolvedFilter({ detail }: CustomEvent<{ state: 'all' | 'solved' | 'unsolved' }>) {
+  solvedFilterState = detail.state;
+  filterProblems();
+}
+
+// Function to handle author filter
+function handleAuthorFilter({ detail }: CustomEvent<{ author: string | null }>) {
+  selectedAuthor = detail.author;
+  filterProblems();
+}
+
+// Function to handle source filter
+function handleSourceFilter({ detail }: CustomEvent<{ source: 'codeforces' | 'kattis' | null }>) {
+  selectedSource = detail.source;
+  filterProblems();
+}
+
+// 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);
+
+    // If we're viewing a specific user's page
+    if (targetUserId) {
+      // Fetch leaderboard data
+      leaderboardEntries = await fetchLeaderboard();
+
+      // Find the target user in the leaderboard
+      targetUser = leaderboardEntries.find((entry) => entry.userId === targetUserId) || null;
+
+      if (!targetUser) {
+        error = 'User not found or is hidden from the leaderboard';
+        loading = false;
+        return;
+      }
+
+      // Fetch the target user's solved problems
+      targetUserSolvedProblems = await fetchUserSolvedProblemsByUserId(targetUserId);
+    }
+
+    // Initialize available authors with all authors
+    availableAuthors = [...new Set(problems.map((p) => p.addedBy))].sort();
+
+    // Initialize filtered problems using our filter function
+    filterProblems();
+
+    // Load user feedback and solved problems from database if authenticated
+    if (isAuthenticated) {
+      userFeedback = await fetchUserFeedback();
+      userSolvedProblems = await fetchUserSolvedProblems();
+    }
+  } catch (e) {
+    console.error('Error loading problems:', e);
+    error = 'Failed to load problems. Please try again later.';
+  } finally {
+    loading = false;
+  }
+}
+
+// Initialize component
+onMount(() => {
+  // If we're viewing a specific user's page and targetUserId wasn't provided as a prop
+  if (!targetUserId && window.location.pathname.includes('/user/')) {
+    // Get the userId from the URL
+    const pathParts = window.location.pathname.split('/');
+    targetUserId = pathParts[pathParts.length - 1];
+  }
+
+  loadProblems();
+
+  // Subscribe to auth state changes
+  const unsubscribe = user.subscribe((value) => {
+    isAuthenticated = !!value;
+
+    // Reload user feedback and solved problems when auth state changes
+    if (isAuthenticated) {
+      fetchUserFeedback().then((feedback) => {
+        userFeedback = feedback;
+      });
+      fetchUserSolvedProblems().then((solved) => {
+        userSolvedProblems = solved;
+      });
+    } else {
+      userFeedback = {};
+      userSolvedProblems = new Set();
+    }
+  });
+
+  // Check if mobile
+  checkMobile();
+
+  // Add resize event listener
+  window.addEventListener('resize', checkMobile);
+
+  // Cleanup function
+  return () => {
+    unsubscribe();
+    window.removeEventListener('resize', checkMobile);
+  };
+});
+</script>
+
+<svelte:head>
+  <title>{targetUser ? `${targetUser.username}'s Solved Problems` : pageTitle}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+</svelte:head>
+
+<div class="mx-auto w-full max-w-[1200px] px-0">
+  {#if loading}
+    <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-gray-600">Loading problems...</p>
+      </div>
+    </div>
+  {:else if error}
+    <div class="flex h-[calc(100vh-4rem)] items-center justify-center py-2 text-center">
+      <p class="text-lg text-red-500">{error}</p>
+    </div>
+  {:else}
+    <div class="relative flex min-h-[calc(100vh-2rem)]">
+      <!-- Topic Sidebar Component -->
+      <TopicSidebar
+        topics={PROBLEM_TYPES}
+        selectedTopic={selectedTopic}
+        onSelectTopic={handleTopicSelect}
+        isMobile={isMobile}
+        isOpen={sidebarOpen}
+        onToggle={toggleSidebar}
+      />
+
+      <!-- Main content -->
+      <div class="flex w-full flex-1 md:pl-[14rem]">
+        <div class="w-full min-w-0 px-0 py-2 pb-6">
+          <div class="problem-table-container w-full">
+            <ProblemTable
+              problems={filteredProblems}
+              userFeedback={userFeedback}
+              userSolvedProblems={userSolvedProblems}
+              allAuthors={availableAuthors}
+              onLike={handleLike}
+              onToggleSolved={handleToggleSolved}
+              on:sortDifficulty={handleDifficultySort}
+              on:filterSolved={handleSolvedFilter}
+              on:filterAuthor={handleAuthorFilter}
+              on:filterSource={handleSourceFilter}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+@media (max-width: 767px) {
+  :global(body) {
+    overflow-x: hidden;
+  }
+}
+
+/* Remove excess margin from table container */
+.problem-table-container {
+  width: 100%;
+  margin: 0;
+}
+
+@media (min-width: 768px) {
+  .problem-table-container {
+    margin: 0;
+  }
+}
+</style>
diff --git a/src/lib/services/problem.ts b/src/lib/services/problem.ts
index 77e1579..38dffc5 100644
--- a/src/lib/services/problem.ts
+++ b/src/lib/services/problem.ts
@@ -260,6 +260,34 @@ export async function fetchUserSolvedProblems(): Promise<Set<string>> {
   }
 }
 
+/**
+ * Fetches solved problems for a specific user
+ * @param userId - User ID to fetch solved problems for
+ * @returns Set of solved problem IDs
+ */
+export async function fetchUserSolvedProblemsByUserId(userId: string): Promise<Set<string>> {
+  if (!userId) {
+    return new Set();
+  }
+
+  try {
+    // Use the RPC function to get solved problems for a user who isn't hidden from the leaderboard
+    const { data, error } = await supabase.rpc('get_user_solved_problems', {
+      p_user_id: userId
+    });
+
+    if (error) {
+      console.error(`Error fetching solved problems for user ${userId}:`, error);
+      return new Set();
+    }
+
+    return new Set(data.map((item: { problem_id: string }) => item.problem_id));
+  } catch (err) {
+    console.error(`Failed to fetch solved problems for user ${userId}:`, err);
+    return new Set();
+  }
+}
+
 /**
  * Marks a problem as solved or unsolved by the current user
  * @param problemId - Problem ID
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index af81d1e..a441197 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,503 +1,5 @@
 <script lang="ts">
-import { onMount } from 'svelte';
-import { browser } from '$app/environment';
-import {
-  fetchProblems,
-  updateProblemFeedback,
-  fetchUserFeedback,
-  fetchUserSolvedProblems,
-  toggleProblemSolved
-} from '$lib/services/problem';
-import type { Problem } from '$lib/services/problem';
-import { user } from '$lib/services/auth';
-import ProblemTable from '$lib/components/ProblemTable.svelte';
-import TopicSidebar from '$lib/components/TopicSidebar.svelte';
-
-let problems: Problem[] = [];
-let filteredProblems: Problem[] = [];
-let loading: boolean = false;
-let error: string | null = null;
-let userFeedback: Record<string, 'like' | 'dislike' | null> = {};
-let userSolvedProblems: Set<string> = new Set();
-let selectedTopic: string | null = null;
-let selectedAuthor: string | null = null;
-let selectedSource: 'codeforces' | 'kattis' | null = null;
-let solvedFilterState: 'all' | 'solved' | 'unsolved' = 'all';
-let sidebarOpen = false; // Default closed on mobile
-let isMobile = false;
-let isAuthenticated = false;
-let availableAuthors: string[] = [];
-
-// Problem types
-const PROBLEM_TYPES = ['graph', 'array', 'string', 'math', 'tree', 'queries', 'geometry', 'misc'];
-
-// 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);
-  });
-
-  Object.values(problemsByScore).forEach((group) => {
-    group.sort((a, b) => {
-      if (a.id && b.id) {
-        return a.id.localeCompare(b.id);
-      }
-      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 sort problems by difficulty
-function sortProblemsByDifficulty(
-  problemsToSort: Problem[],
-  direction: 'asc' | 'desc' | null
-): Problem[] {
-  if (direction === null) {
-    // If no direction specified, return to default sort (by score)
-    return sortProblemsByScore([...problemsToSort]);
-  }
-
-  return [...problemsToSort].sort((a, b) => {
-    // Handle undefined difficulties
-    const diffA = a.difficulty ?? 0;
-    const diffB = b.difficulty ?? 0;
-
-    // Sort based on direction
-    return direction === 'asc' ? diffA - diffB : diffB - diffA;
-  });
-}
-
-// Filter states
-
-// Special topic value for NEW problems
-const NEW_TOPIC = 'NEW';
-
-// Function to get problems filtered by everything except author
-function getProblemsWithoutAuthorFilter(): Problem[] {
-  let filtered = [...problems];
-
-  // Apply topic filter if selected
-  if (selectedTopic) {
-    if (selectedTopic === NEW_TOPIC) {
-      // For NEW topic, filter problems with null or undefined type
-      filtered = filtered.filter((problem) => !problem.type);
-    } else {
-      filtered = filtered.filter((problem) => {
-        // If topic is "misc", include problems with no type or with "misc" type
-        if (selectedTopic === 'misc') {
-          return !problem.type || problem.type === 'misc';
-        }
-        return problem.type === selectedTopic;
-      });
-    }
-  }
-
-  // Apply solved filter if not 'all'
-  if (solvedFilterState !== 'all') {
-    filtered = filtered.filter((problem) => {
-      const isSolved = problem.id && userSolvedProblems.has(problem.id);
-      return solvedFilterState === 'solved' ? isSolved : !isSolved;
-    });
-  }
-
-  // Apply source filter if selected
-  if (selectedSource) {
-    filtered = filtered.filter((problem) => problem.source === selectedSource);
-  }
-
-  return filtered;
-}
-
-// Function to filter problems by topic, solved status, and author
-function filterProblems(): void {
-  // Get problems filtered by everything except author
-  let filtered = getProblemsWithoutAuthorFilter();
-
-  // Update available authors based on current filters (except author filter)
-  availableAuthors = [...new Set(filtered.map((p) => p.addedBy))].sort();
-
-  // Apply author filter if selected
-  if (selectedAuthor) {
-    filtered = filtered.filter((problem) => problem.addedBy === selectedAuthor);
-  }
-
-  // Update filtered problems
-  filteredProblems = filtered;
-
-  // Auto-close sidebar on mobile after selection
-  if (isMobile) {
-    sidebarOpen = false;
-  }
-}
-
-// Function to filter problems by topic
-function filterProblemsByTopic(topic: string | null): void {
-  selectedTopic = topic;
-  filterProblems();
-}
-
-// Function to handle topic selection
-function handleTopicSelect(topic: string | null): void {
-  filterProblemsByTopic(topic);
-}
-
-// Function to toggle sidebar visibility
-function toggleSidebar(): void {
-  sidebarOpen = !sidebarOpen;
-}
-
-// Check if mobile
-function checkMobile(): void {
-  if (!browser) return;
-  isMobile = window.innerWidth < 768;
-}
-
-// Function to handle like/dislike actions
-async function handleLike(problemId: string, isLike: boolean): Promise<void> {
-  try {
-    // Check if user is authenticated
-    if (!isAuthenticated) {
-      error = 'You must be signed in to like or dislike problems';
-      return;
-    }
-
-    // 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 = {
-        ...userFeedback,
-        [problemId]: null
-      };
-
-      // Update the database
-      await updateProblemFeedback(problemId, isLike, true);
-
-      // Update filtered problems
-      filterProblems();
-      return;
-    }
-
-    // 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
-            };
-          }
-        }
-        return problem;
-      });
-
-      // Update user feedback - create a new object to ensure reactivity
-      userFeedback = {
-        ...userFeedback,
-        [problemId]: isLike ? 'like' : 'dislike'
-      };
-
-      // Update the database
-      await updateProblemFeedback(problemId, isLike, false, currentFeedback);
-
-      // Update filtered problems
-      filterProblems();
-      return;
-    }
-
-    // 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;
-    });
-
-    // Update user feedback - create a new object to ensure reactivity
-    userFeedback = {
-      ...userFeedback,
-      [problemId]: isLike ? 'like' : 'dislike'
-    };
-
-    // Update the database
-    await updateProblemFeedback(problemId, isLike);
-
-    // Update filtered problems
-    filterProblems();
-  } 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 handle marking problems as solved/unsolved
-async function handleToggleSolved(problemId: string, isSolved: boolean): Promise<void> {
-  try {
-    // Check if user is authenticated
-    if (!isAuthenticated) {
-      error = 'You must be signed in to mark problems as solved';
-      return;
-    }
-
-    // Update UI optimistically
-    if (isSolved) {
-      userSolvedProblems = new Set([...userSolvedProblems, problemId]);
-    } else {
-      userSolvedProblems = new Set([...userSolvedProblems].filter((id) => id !== problemId));
-    }
-
-    // Update the database
-    const success = await toggleProblemSolved(problemId, isSolved);
-
-    if (!success) {
-      // If there's an error, reload solved problems to ensure UI is in sync with server
-      if (isAuthenticated) {
-        userSolvedProblems = await fetchUserSolvedProblems();
-      }
-    }
-  } catch (err) {
-    console.error('Error updating solved status:', err);
-    // If there's an error, reload solved problems to ensure UI is in sync with server
-    if (isAuthenticated) {
-      userSolvedProblems = await fetchUserSolvedProblems();
-    }
-  }
-}
-
-// Function to handle difficulty sorting
-function handleDifficultySort({ detail }: CustomEvent<{ direction: 'asc' | 'desc' | null }>) {
-  // Get problems with all filters except author
-  const problemsWithoutAuthorFilter = getProblemsWithoutAuthorFilter();
-
-  // Update available authors
-  availableAuthors = [...new Set(problemsWithoutAuthorFilter.map((p) => p.addedBy))].sort();
-
-  // Sort the problems by difficulty
-  filteredProblems = sortProblemsByDifficulty(filteredProblems, detail.direction);
-}
-
-// Function to handle solved filter
-function handleSolvedFilter({ detail }: CustomEvent<{ state: 'all' | 'solved' | 'unsolved' }>) {
-  solvedFilterState = detail.state;
-  filterProblems();
-}
-
-// Function to handle author filter
-function handleAuthorFilter({ detail }: CustomEvent<{ author: string | null }>) {
-  selectedAuthor = detail.author;
-  filterProblems();
-}
-
-// Function to handle source filter
-function handleSourceFilter({ detail }: CustomEvent<{ source: 'codeforces' | 'kattis' | null }>) {
-  selectedSource = detail.source;
-  filterProblems();
-}
-
-// 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);
-
-    // Initialize available authors with all authors
-    availableAuthors = [...new Set(problems.map((p) => p.addedBy))].sort();
-
-    // Initialize filtered problems using our filter function
-    filterProblems();
-
-    // Load user feedback and solved problems from database if authenticated
-    if (isAuthenticated) {
-      userFeedback = await fetchUserFeedback();
-      userSolvedProblems = await fetchUserSolvedProblems();
-    }
-  } 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();
-
-  // Subscribe to auth state changes
-  const unsubscribe = user.subscribe((value) => {
-    isAuthenticated = !!value;
-
-    // Reload user feedback and solved problems when auth state changes
-    if (isAuthenticated) {
-      fetchUserFeedback().then((feedback) => {
-        userFeedback = feedback;
-      });
-      fetchUserSolvedProblems().then((solved) => {
-        userSolvedProblems = solved;
-      });
-    } else {
-      userFeedback = {};
-      userSolvedProblems = new Set();
-    }
-  });
-
-  // Check if mobile
-  checkMobile();
-
-  // Add resize event listener
-  window.addEventListener('resize', checkMobile);
-
-  // Cleanup function
-  return () => {
-    unsubscribe();
-    window.removeEventListener('resize', checkMobile);
-  };
-});
+import ProblemDisplay from '$lib/components/ProblemDisplay.svelte';
 </script>
 
-<svelte:head>
-  <title>Problems</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
-</svelte:head>
-
-<div class="mx-auto w-full max-w-[1200px] px-0">
-  {#if loading}
-    <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-gray-600">Loading problems...</p>
-      </div>
-    </div>
-  {:else if error}
-    <div class="py-2 text-center text-red-500">
-      <p>{error}</p>
-      <button
-        class="hover:bg-opacity-90 mt-2 rounded bg-[var(--color-primary)] px-4 py-2 text-white transition-colors"
-        on:click={() => window.location.reload()}>Try Again</button
-      >
-    </div>
-  {:else}
-    <div class="relative flex min-h-[calc(100vh-2rem)]">
-      <!-- Topic Sidebar Component -->
-      <TopicSidebar
-        topics={PROBLEM_TYPES}
-        selectedTopic={selectedTopic}
-        onSelectTopic={handleTopicSelect}
-        isMobile={isMobile}
-        isOpen={sidebarOpen}
-        onToggle={toggleSidebar}
-      />
-
-      <!-- Main content -->
-      <div class="flex w-full flex-1 md:pl-[14rem]">
-        <div class="w-full min-w-0 px-0 py-2 pb-6">
-          <div class="problem-table-container w-full">
-            <ProblemTable
-              problems={filteredProblems}
-              userFeedback={userFeedback}
-              userSolvedProblems={userSolvedProblems}
-              allAuthors={availableAuthors}
-              onLike={handleLike}
-              onToggleSolved={handleToggleSolved}
-              on:sortDifficulty={handleDifficultySort}
-              on:filterSolved={handleSolvedFilter}
-              on:filterAuthor={handleAuthorFilter}
-              on:filterSource={handleSourceFilter}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style>
-@media (max-width: 767px) {
-  :global(body) {
-    overflow-x: hidden;
-  }
-}
-
-/* Remove excess margin from table container */
-.problem-table-container {
-  width: 100%;
-  margin: 0;
-}
-
-@media (min-width: 768px) {
-  .problem-table-container {
-    margin: 0;
-  }
-}
-</style>
+<ProblemDisplay pageTitle="Problems" defaultSolvedFilterState="all" />
diff --git a/src/routes/user/[userId]/+page.svelte b/src/routes/user/[userId]/+page.svelte
new file mode 100644
index 0000000..d72fe5f
--- /dev/null
+++ b/src/routes/user/[userId]/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+import ProblemDisplay from '$lib/components/ProblemDisplay.svelte';
+
+// The userId will be extracted from the URL in the ProblemDisplay component
+</script>
+
+<ProblemDisplay pageTitle="User Problems" defaultSolvedFilterState="solved" />
diff --git a/src/routes/user/[userId]/+page.ts b/src/routes/user/[userId]/+page.ts
new file mode 100644
index 0000000..4b82490
--- /dev/null
+++ b/src/routes/user/[userId]/+page.ts
@@ -0,0 +1,7 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = ({ params }) => {
+  return {
+    userId: params.userId
+  };
+};