diff --git a/src/app/leaderboards/page.tsx b/src/app/leaderboards/page.tsx
index 6101ae8..1d9f1ad 100644
--- a/src/app/leaderboards/page.tsx
+++ b/src/app/leaderboards/page.tsx
@@ -170,7 +170,7 @@ const weeklyLeaderboard = [
   },
 ];
 
-const Leaderboards = () => {
+export default function Leaderboards() {
   const [activeTab, setActiveTab] = useState<"global" | "weekly">("global");
 
   const categories = ["Any%", "100%", "Easy Only", "No DP", "Blind"];
@@ -268,9 +268,7 @@ const Leaderboards = () => {
       </div>
     </div>
   );
-};
-
-export default Leaderboards;
+}
 
 /* ---------- helpers ---------- */
 
diff --git a/src/app/problems/page.tsx b/src/app/problems/page.tsx
index b0112c6..7af1c4f 100644
--- a/src/app/problems/page.tsx
+++ b/src/app/problems/page.tsx
@@ -1,180 +1,78 @@
 "use client";
 
 import { Search, Grid, List } from "lucide-react";
-import ProblemCard from "@/components/app/ProblemCard";
 import { useState } from "react";
 
+import ProblemCard from "@/components/app/ProblemCard";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+
 const Problems = () => {
   const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
 
-  const problems = [
-    {
-      name: "Two Sum Dash",
-      difficulty: "easy" as const,
-      tags: ["arrays", "hash-map"],
-      bestTime: "0:42",
-      attempts: 12453,
-    },
-    {
-      name: "Binary Sprint",
-      difficulty: "easy" as const,
-      tags: ["binary-search"],
-      bestTime: "0:38",
-      attempts: 8921,
-    },
-    {
-      name: "Linked List Rush",
-      difficulty: "medium" as const,
-      tags: ["linked-list", "pointers"],
-      bestTime: "1:24",
-      attempts: 6234,
-    },
-    {
-      name: "Tree Traverse Blitz",
-      difficulty: "medium" as const,
-      tags: ["trees", "recursion"],
-      bestTime: "2:01",
-      attempts: 5102,
-    },
-    {
-      name: "DP Gauntlet",
-      difficulty: "hard" as const,
-      tags: ["dynamic-programming"],
-      bestTime: "4:32",
-      attempts: 2341,
-    },
-    {
-      name: "Graph Navigator",
-      difficulty: "hard" as const,
-      tags: ["graphs", "bfs", "dfs"],
-      bestTime: "3:45",
-      attempts: 3456,
-    },
-    {
-      name: "String Scramble",
-      difficulty: "easy" as const,
-      tags: ["strings", "manipulation"],
-      bestTime: "0:55",
-      attempts: 9876,
-    },
-    {
-      name: "Stack Overflow",
-      difficulty: "medium" as const,
-      tags: ["stacks", "queues"],
-      bestTime: "1:42",
-      attempts: 4567,
-    },
-    {
-      name: "Heap Hero",
-      difficulty: "hard" as const,
-      tags: ["heaps", "priority-queue"],
-      bestTime: "3:21",
-      attempts: 1890,
-    },
-    {
-      name: "Sliding Window Slam",
-      difficulty: "medium" as const,
-      tags: ["sliding-window", "arrays"],
-      bestTime: "1:56",
-      attempts: 5678,
-    },
-    {
-      name: "Trie Triumph",
-      difficulty: "hard" as const,
-      tags: ["trie", "strings"],
-      bestTime: "4:12",
-      attempts: 1234,
-    },
-    {
-      name: "Backtrack Blaster",
-      difficulty: "hard" as const,
-      tags: ["backtracking", "recursion"],
-      bestTime: "5:01",
-      attempts: 987,
-    },
-  ];
-
   const categories = ["All", "Arrays", "Trees", "Graphs", "DP", "Strings"];
   const difficulties = ["All", "Easy", "Medium", "Hard"];
 
   return (
     <div className="min-h-screen pt-24 pb-16">
-      <div className="container mx-auto px-6">
+      <div className="container mx-auto px-6 space-y-8">
         {/* Header */}
-        <div className="mb-10">
-          <h1 className="text-4xl font-bold text-foreground mb-2">Problems</h1>
+        <div>
+          <h1 className="text-4xl font-bold">Problems</h1>
           <p className="text-muted-foreground">
             Choose your battleground. Each run brings you closer to your PB.
           </p>
         </div>
 
         {/* Filters */}
-        <div className="flex flex-col lg:flex-row gap-4 mb-8">
+        <div className="flex flex-col lg:flex-row gap-4 items-start lg:items-center">
           {/* Search */}
           <div className="relative flex-1 max-w-md">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
-            <input
-              type="text"
-              placeholder="Search problems..."
-              className="w-full pl-10 pr-4 py-2.5 bg-card border border-border rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all"
-            />
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input placeholder="Search problems..." className="pl-9" />
           </div>
 
           {/* Category Filter */}
-          <div className="flex gap-2 flex-wrap">
-            {categories.map((cat) => (
-              <button
+          <div className="flex flex-wrap gap-2">
+            {categories.map((cat, i) => (
+              <Badge
                 key={cat}
-                className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
-                  cat === "All"
-                    ? "bg-primary text-primary-foreground"
-                    : "bg-secondary text-muted-foreground hover:text-foreground hover:bg-secondary/80"
-                }`}
+                variant={i === 0 ? "default" : "secondary"}
+                className="cursor-pointer"
               >
                 {cat}
-              </button>
+              </Badge>
             ))}
           </div>
 
           {/* Difficulty Filter */}
           <div className="flex gap-2">
-            {difficulties.map((diff) => (
-              <button
+            {difficulties.map((diff, i) => (
+              <Button
                 key={diff}
-                className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${
-                  diff === "All"
-                    ? "bg-primary/10 text-primary border border-primary/30"
-                    : "bg-card text-muted-foreground hover:text-foreground border border-border hover:border-primary/30"
-                }`}
+                variant={i === 0 ? "outline" : "ghost"}
+                size="sm"
               >
                 {diff}
-              </button>
+              </Button>
             ))}
           </div>
 
           {/* View Toggle */}
-          <div className="flex gap-1 bg-card border border-border rounded-lg p-1">
-            <button
-              onClick={() => setViewMode("grid")}
-              className={`p-2 rounded-md transition-all ${
-                viewMode === "grid"
-                  ? "bg-primary text-primary-foreground"
-                  : "text-muted-foreground hover:text-foreground"
-              }`}
-            >
+          <ToggleGroup
+            type="single"
+            value={viewMode}
+            onValueChange={(v) => v && setViewMode(v as "grid" | "list")}
+          >
+            <ToggleGroupItem value="grid" aria-label="Grid view">
               <Grid className="h-4 w-4" />
-            </button>
-            <button
-              onClick={() => setViewMode("list")}
-              className={`p-2 rounded-md transition-all ${
-                viewMode === "list"
-                  ? "bg-primary text-primary-foreground"
-                  : "text-muted-foreground hover:text-foreground"
-              }`}
-            >
+            </ToggleGroupItem>
+            <ToggleGroupItem value="list" aria-label="List view">
               <List className="h-4 w-4" />
-            </button>
-          </div>
+            </ToggleGroupItem>
+          </ToggleGroup>
         </div>
 
         {/* Problem Grid */}
@@ -195,3 +93,92 @@ const Problems = () => {
 };
 
 export default Problems;
+
+/* ---------------- data ---------------- */
+
+const problems = [
+  {
+    name: "Two Sum Dash",
+    difficulty: "easy" as const,
+    tags: ["arrays", "hash-map"],
+    bestTime: "0:42",
+    attempts: 12453,
+  },
+  {
+    name: "Binary Sprint",
+    difficulty: "easy" as const,
+    tags: ["binary-search"],
+    bestTime: "0:38",
+    attempts: 8921,
+  },
+  {
+    name: "Linked List Rush",
+    difficulty: "medium" as const,
+    tags: ["linked-list", "pointers"],
+    bestTime: "1:24",
+    attempts: 6234,
+  },
+  {
+    name: "Tree Traverse Blitz",
+    difficulty: "medium" as const,
+    tags: ["trees", "recursion"],
+    bestTime: "2:01",
+    attempts: 5102,
+  },
+  {
+    name: "DP Gauntlet",
+    difficulty: "hard" as const,
+    tags: ["dynamic-programming"],
+    bestTime: "4:32",
+    attempts: 2341,
+  },
+  {
+    name: "Graph Navigator",
+    difficulty: "hard" as const,
+    tags: ["graphs", "bfs", "dfs"],
+    bestTime: "3:45",
+    attempts: 3456,
+  },
+  {
+    name: "String Scramble",
+    difficulty: "easy" as const,
+    tags: ["strings", "manipulation"],
+    bestTime: "0:55",
+    attempts: 9876,
+  },
+  {
+    name: "Stack Overflow",
+    difficulty: "medium" as const,
+    tags: ["stacks", "queues"],
+    bestTime: "1:42",
+    attempts: 4567,
+  },
+  {
+    name: "Heap Hero",
+    difficulty: "hard" as const,
+    tags: ["heaps", "priority-queue"],
+    bestTime: "3:21",
+    attempts: 1890,
+  },
+  {
+    name: "Sliding Window Slam",
+    difficulty: "medium" as const,
+    tags: ["sliding-window", "arrays"],
+    bestTime: "1:56",
+    attempts: 5678,
+  },
+  {
+    name: "Trie Triumph",
+    difficulty: "hard" as const,
+    tags: ["trie", "strings"],
+    bestTime: "4:12",
+    attempts: 1234,
+  },
+  {
+    name: "Backtrack Blaster",
+    difficulty: "hard" as const,
+    tags: ["backtracking", "recursion"],
+    bestTime: "5:01",
+    attempts: 987,
+  },
+];
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..8916905
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/src/components/ui/toggle-group.tsx b/src/components/ui/toggle-group.tsx
new file mode 100644
index 0000000..9894607
--- /dev/null
+++ b/src/components/ui/toggle-group.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
+        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/src/components/ui/toggle.tsx b/src/components/ui/toggle.tsx
new file mode 100644
index 0000000..901c7f4
--- /dev/null
+++ b/src/components/ui/toggle.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Toggle as TogglePrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }