From a891d264b9436d430467c75df64d08fb89eda50e Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Mon, 2 Feb 2026 20:35:56 +0100
Subject: [PATCH 01/28] Locked the cursor in place

---
 src/app/run/page.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/app/run/page.tsx b/src/app/run/page.tsx
index 7ed19bf..0cada5a 100644
--- a/src/app/run/page.tsx
+++ b/src/app/run/page.tsx
@@ -1,7 +1,11 @@
 "use client";
 
 import { FileTree } from "@sinm/react-file-tree";
-import CodeMirror, { ReactCodeMirrorRef } from "@uiw/react-codemirror";
+import CodeMirror, {
+  EditorState,
+  EditorView,
+  ReactCodeMirrorRef,
+} from "@uiw/react-codemirror";
 import { vscodeDark } from "@uiw/codemirror-theme-vscode";
 import { useEffect, useRef } from "react";
 
@@ -99,7 +103,14 @@ export default function Run() {
               readOnly
               className="w-full h-full"
               value="yo"
-              extensions={[]}
+              extensions={[
+                EditorState.transactionFilter.of((tr) => {
+                  if (tr.selection && tr.isUserEvent("select")) {
+                    return [];
+                  }
+                  return tr;
+                }),
+              ]}
               theme={vscodeDark}
               onCreateEditor={(view) => {
                 view.focus();

From 0493733afebd7ea19d73f3d376435f1f58af614e Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Mon, 2 Feb 2026 20:55:20 +0100
Subject: [PATCH 02/28] Removed profile from nav

---
 src/components/app/Navbar.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/app/Navbar.tsx b/src/components/app/Navbar.tsx
index 5906f8c..62a3d63 100644
--- a/src/components/app/Navbar.tsx
+++ b/src/components/app/Navbar.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { Timer, Trophy, User, Zap } from "lucide-react";
+import { Radio, Trophy, Zap } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
 
@@ -18,14 +18,9 @@ const navs = [
   },
   {
     link: "/runs",
-    icon: Timer,
+    icon: Radio,
     name: "Runs",
   },
-  {
-    link: "/profile",
-    icon: User,
-    name: "Profile",
-  },
 ];
 
 const Navbar = () => {

From b0e481134f5d73a4b01d5f62e18164b53d247f5b Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Mon, 2 Feb 2026 23:08:14 +0100
Subject: [PATCH 03/28] Shadcnified leaderboards

---
 package-lock.json                | 406 ++++++++++++++++++++++++
 package.json                     |   1 +
 src/app/leaderboards/page.tsx    | 522 +++++++++++++++----------------
 src/components/ui/badge.tsx      |  48 +++
 src/components/ui/card.tsx       |  92 ++++++
 src/components/ui/pagination.tsx | 127 ++++++++
 src/components/ui/table.tsx      | 116 +++++++
 src/components/ui/tabs.tsx       |  91 ++++++
 8 files changed, 1137 insertions(+), 266 deletions(-)
 create mode 100644 src/components/ui/badge.tsx
 create mode 100644 src/components/ui/card.tsx
 create mode 100644 src/components/ui/pagination.tsx
 create mode 100644 src/components/ui/table.tsx
 create mode 100644 src/components/ui/tabs.tsx

diff --git a/package-lock.json b/package-lock.json
index 2416fec..08d0f02 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,6 +45,7 @@
         "embla-carousel-react": "^8.6.0",
         "lucide-react": "^0.563.0",
         "next": "16.1.6",
+        "radix-ui": "^1.4.3",
         "react": "19.2.3",
         "react-day-picker": "^9.13.0",
         "react-dom": "19.2.3",
@@ -923,6 +924,29 @@
       "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-accessible-icon": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.1.7.tgz",
+      "integrity": "sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-accordion": {
       "version": "1.2.12",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
@@ -1461,6 +1485,57 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-form": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.1.8.tgz",
+      "integrity": "sha512-QM70k4Zwjttifr5a4sZFts9fn8FzHYvQ5PiB19O2HsYibaHSVt9fH9rzB0XZo/YcM+b7t/p7lYCT/F5eOeF5yQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-label": "2.1.7",
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-label": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
+      "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-hover-card": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.15.tgz",
@@ -1682,6 +1757,70 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-one-time-password-field": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-one-time-password-field/-/react-one-time-password-field-0.1.8.tgz",
+      "integrity": "sha512-ycS4rbwURavDPVjCb5iS3aG4lURFDILi6sKI/WITUMZ13gMmn/xGjpLoqBAalhJaDk8I3UbCM5GzKHrnzwHbvg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-password-toggle-field": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-password-toggle-field/-/react-password-toggle-field-0.1.3.tgz",
+      "integrity": "sha512-/UuCrDBWravcaMix4TdT+qlNdVwOM1Nck9kWx/vafXsdfj1ChfhOdfi3cy9SGBpWgTXwYCuboT/oYpJy3clqfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-is-hydrated": "0.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popover": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz",
@@ -2319,6 +2458,58 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toolbar": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.1.11.tgz",
+      "integrity": "sha512-4ol06/1bLoFu1nwUqzdD4Y5RZ9oDdKeiHIsntug54Hcr1pgaHiPqHFEaXI1IFP/EsOfROQZ8Mig9VTIRza6Tjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-separator": "1.1.7",
+        "@radix-ui/react-toggle-group": "1.1.11"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar/node_modules/@radix-ui/react-separator": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
+      "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
@@ -3872,6 +4063,221 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/radix-ui": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/radix-ui/-/radix-ui-1.4.3.tgz",
+      "integrity": "sha512-aWizCQiyeAenIdUbqEpXgRA1ya65P13NKn/W8rWkcN0OPkRDxdBVLWnIEDsS2RpwCK2nobI7oMUSmexzTDyAmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-accessible-icon": "1.1.7",
+        "@radix-ui/react-accordion": "1.2.12",
+        "@radix-ui/react-alert-dialog": "1.1.15",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-aspect-ratio": "1.1.7",
+        "@radix-ui/react-avatar": "1.1.10",
+        "@radix-ui/react-checkbox": "1.3.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-context-menu": "2.2.16",
+        "@radix-ui/react-dialog": "1.1.15",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-dropdown-menu": "2.1.16",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-form": "0.1.8",
+        "@radix-ui/react-hover-card": "1.1.15",
+        "@radix-ui/react-label": "2.1.7",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-menubar": "1.1.16",
+        "@radix-ui/react-navigation-menu": "1.2.14",
+        "@radix-ui/react-one-time-password-field": "0.1.8",
+        "@radix-ui/react-password-toggle-field": "0.1.3",
+        "@radix-ui/react-popover": "1.1.15",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-progress": "1.1.7",
+        "@radix-ui/react-radio-group": "1.3.8",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-scroll-area": "1.2.10",
+        "@radix-ui/react-select": "2.2.6",
+        "@radix-ui/react-separator": "1.1.7",
+        "@radix-ui/react-slider": "1.3.6",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-switch": "1.2.6",
+        "@radix-ui/react-tabs": "1.1.13",
+        "@radix-ui/react-toast": "1.2.15",
+        "@radix-ui/react-toggle": "1.1.10",
+        "@radix-ui/react-toggle-group": "1.1.11",
+        "@radix-ui/react-toolbar": "1.1.11",
+        "@radix-ui/react-tooltip": "1.2.8",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-escape-keydown": "1.1.1",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/radix-ui/node_modules/@radix-ui/react-aspect-ratio": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.7.tgz",
+      "integrity": "sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/radix-ui/node_modules/@radix-ui/react-avatar": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz",
+      "integrity": "sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/radix-ui/node_modules/@radix-ui/react-label": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
+      "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/radix-ui/node_modules/@radix-ui/react-progress": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.7.tgz",
+      "integrity": "sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/radix-ui/node_modules/@radix-ui/react-separator": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
+      "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/radix-ui/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react": {
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
diff --git a/package.json b/package.json
index 924bf88..cc7a044 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "embla-carousel-react": "^8.6.0",
     "lucide-react": "^0.563.0",
     "next": "16.1.6",
+    "radix-ui": "^1.4.3",
     "react": "19.2.3",
     "react-day-picker": "^9.13.0",
     "react-dom": "19.2.3",
diff --git a/src/app/leaderboards/page.tsx b/src/app/leaderboards/page.tsx
index 93974f9..6101ae8 100644
--- a/src/app/leaderboards/page.tsx
+++ b/src/app/leaderboards/page.tsx
@@ -1,305 +1,295 @@
 "use client";
 
 import { Trophy, Calendar, Globe, TrendingUp } from "lucide-react";
-import LeaderboardRow from "@/components/app/LeaderboardRow";
 import { useState } from "react";
 
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Table,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+
+import LeaderboardRow from "@/components/app/LeaderboardRow";
+
+const globalLeaderboard = [
+  {
+    rank: 1,
+    username: "speedmaster_x",
+    pb: "2:34.21",
+    runsCount: 2341,
+    category: "Any%",
+  },
+  {
+    rank: 2,
+    username: "algo_ninja",
+    pb: "2:38.54",
+    runsCount: 1876,
+    category: "Any%",
+  },
+  {
+    rank: 3,
+    username: "clockwork",
+    pb: "2:41.02",
+    runsCount: 3102,
+    category: "Any%",
+  },
+  {
+    rank: 4,
+    username: "fastfingers99",
+    pb: "2:45.33",
+    runsCount: 987,
+    category: "Any%",
+  },
+  {
+    rank: 5,
+    username: "recursion_queen",
+    pb: "2:47.89",
+    runsCount: 1543,
+    category: "Any%",
+  },
+  {
+    rank: 6,
+    username: "bitshifter",
+    pb: "2:52.11",
+    runsCount: 2109,
+    category: "Any%",
+  },
+  {
+    rank: 7,
+    username: "nullpointer",
+    pb: "2:54.67",
+    runsCount: 876,
+    category: "Any%",
+  },
+  {
+    rank: 8,
+    username: "stackattack",
+    pb: "2:58.23",
+    runsCount: 1234,
+    category: "Any%",
+  },
+  {
+    rank: 9,
+    username: "looplegend",
+    pb: "3:01.45",
+    runsCount: 654,
+    category: "Any%",
+  },
+  {
+    rank: 10,
+    username: "coderunner",
+    pb: "3:05.78",
+    runsCount: 1098,
+    category: "Any%",
+  },
+];
+const weeklyLeaderboard = [
+  {
+    rank: 1,
+    username: "weekly_warrior",
+    pb: "2:51.33",
+    runsCount: 156,
+    category: "Any%",
+  },
+  {
+    rank: 2,
+    username: "speedmaster_x",
+    pb: "2:53.12",
+    runsCount: 89,
+    category: "Any%",
+  },
+  {
+    rank: 3,
+    username: "newbie_grinder",
+    pb: "2:58.67",
+    runsCount: 234,
+    category: "Any%",
+  },
+  {
+    rank: 4,
+    username: "algo_ninja",
+    pb: "3:02.45",
+    runsCount: 67,
+    category: "Any%",
+  },
+  {
+    rank: 5,
+    username: "fresh_runner",
+    pb: "3:05.89",
+    runsCount: 45,
+    category: "Any%",
+  },
+  {
+    rank: 6,
+    username: "practice_makes",
+    pb: "3:08.12",
+    runsCount: 112,
+    category: "Any%",
+  },
+  {
+    rank: 7,
+    username: "splitmaster",
+    pb: "3:12.34",
+    runsCount: 78,
+    category: "Any%",
+  },
+  {
+    rank: 8,
+    username: "grindtime",
+    pb: "3:15.56",
+    runsCount: 92,
+    category: "Any%",
+  },
+  {
+    rank: 9,
+    username: "pb_hunter",
+    pb: "3:18.90",
+    runsCount: 56,
+    category: "Any%",
+  },
+  {
+    rank: 10,
+    username: "reset_king",
+    pb: "3:22.11",
+    runsCount: 187,
+    category: "Any%",
+  },
+];
+
 const Leaderboards = () => {
   const [activeTab, setActiveTab] = useState<"global" | "weekly">("global");
 
-  const globalLeaderboard = [
-    {
-      rank: 1,
-      username: "speedmaster_x",
-      pb: "2:34.21",
-      runsCount: 2341,
-      category: "Any%",
-    },
-    {
-      rank: 2,
-      username: "algo_ninja",
-      pb: "2:38.54",
-      runsCount: 1876,
-      category: "Any%",
-    },
-    {
-      rank: 3,
-      username: "clockwork",
-      pb: "2:41.02",
-      runsCount: 3102,
-      category: "Any%",
-    },
-    {
-      rank: 4,
-      username: "fastfingers99",
-      pb: "2:45.33",
-      runsCount: 987,
-      category: "Any%",
-    },
-    {
-      rank: 5,
-      username: "recursion_queen",
-      pb: "2:47.89",
-      runsCount: 1543,
-      category: "Any%",
-    },
-    {
-      rank: 6,
-      username: "bitshifter",
-      pb: "2:52.11",
-      runsCount: 2109,
-      category: "Any%",
-    },
-    {
-      rank: 7,
-      username: "nullpointer",
-      pb: "2:54.67",
-      runsCount: 876,
-      category: "Any%",
-    },
-    {
-      rank: 8,
-      username: "stackattack",
-      pb: "2:58.23",
-      runsCount: 1234,
-      category: "Any%",
-    },
-    {
-      rank: 9,
-      username: "looplegend",
-      pb: "3:01.45",
-      runsCount: 654,
-      category: "Any%",
-    },
-    {
-      rank: 10,
-      username: "coderunner",
-      pb: "3:05.78",
-      runsCount: 1098,
-      category: "Any%",
-    },
-  ];
-
-  const weeklyLeaderboard = [
-    {
-      rank: 1,
-      username: "weekly_warrior",
-      pb: "2:51.33",
-      runsCount: 156,
-      category: "Any%",
-    },
-    {
-      rank: 2,
-      username: "speedmaster_x",
-      pb: "2:53.12",
-      runsCount: 89,
-      category: "Any%",
-    },
-    {
-      rank: 3,
-      username: "newbie_grinder",
-      pb: "2:58.67",
-      runsCount: 234,
-      category: "Any%",
-    },
-    {
-      rank: 4,
-      username: "algo_ninja",
-      pb: "3:02.45",
-      runsCount: 67,
-      category: "Any%",
-    },
-    {
-      rank: 5,
-      username: "fresh_runner",
-      pb: "3:05.89",
-      runsCount: 45,
-      category: "Any%",
-    },
-    {
-      rank: 6,
-      username: "practice_makes",
-      pb: "3:08.12",
-      runsCount: 112,
-      category: "Any%",
-    },
-    {
-      rank: 7,
-      username: "splitmaster",
-      pb: "3:12.34",
-      runsCount: 78,
-      category: "Any%",
-    },
-    {
-      rank: 8,
-      username: "grindtime",
-      pb: "3:15.56",
-      runsCount: 92,
-      category: "Any%",
-    },
-    {
-      rank: 9,
-      username: "pb_hunter",
-      pb: "3:18.90",
-      runsCount: 56,
-      category: "Any%",
-    },
-    {
-      rank: 10,
-      username: "reset_king",
-      pb: "3:22.11",
-      runsCount: 187,
-      category: "Any%",
-    },
-  ];
-
   const categories = ["Any%", "100%", "Easy Only", "No DP", "Blind"];
 
+  const data = activeTab === "global" ? globalLeaderboard : weeklyLeaderboard;
+
   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">
-            Leaderboards
-          </h1>
+        <div>
+          <h1 className="text-4xl font-bold">Leaderboards</h1>
           <p className="text-muted-foreground">
             The fastest runners in the game. Will you claim a spot?
           </p>
         </div>
 
-        {/* Stats Row */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-          <div className="bg-card border border-border rounded-xl p-4 text-center">
-            <Globe className="h-5 w-5 text-primary mx-auto mb-2" />
-            <p className="text-2xl font-bold font-mono text-foreground">
-              12,453
-            </p>
-            <p className="text-xs text-muted-foreground">Total Runners</p>
-          </div>
-          <div className="bg-card border border-border rounded-xl p-4 text-center">
-            <Trophy className="h-5 w-5 text-gold mx-auto mb-2" />
-            <p className="text-2xl font-bold font-mono text-foreground">
-              2:34.21
-            </p>
-            <p className="text-xs text-muted-foreground">World Record</p>
-          </div>
-          <div className="bg-card border border-border rounded-xl p-4 text-center">
-            <TrendingUp className="h-5 w-5 text-emerald-400 mx-auto mb-2" />
-            <p className="text-2xl font-bold font-mono text-foreground">847K</p>
-            <p className="text-xs text-muted-foreground">Runs This Week</p>
-          </div>
-          <div className="bg-card border border-border rounded-xl p-4 text-center">
-            <Calendar className="h-5 w-5 text-primary mx-auto mb-2" />
-            <p className="text-2xl font-bold font-mono text-foreground">
-              5d 12h
-            </p>
-            <p className="text-xs text-muted-foreground">Until Reset</p>
-          </div>
+        {/* Stats */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <StatCard icon={Globe} label="Total Runners" value="12,453" />
+          <StatCard icon={Trophy} label="World Record" value="2:34.21" />
+          <StatCard icon={TrendingUp} label="Runs This Week" value="847K" />
+          <StatCard icon={Calendar} label="Until Reset" value="5d 12h" />
         </div>
 
-        {/* Tabs and Filters */}
-        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-6">
-          {/* Global/Weekly Toggle */}
-          <div className="flex gap-1 bg-card border border-border rounded-lg p-1">
-            <button
-              onClick={() => setActiveTab("global")}
-              className={`flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all ${
-                activeTab === "global"
-                  ? "bg-primary text-primary-foreground"
-                  : "text-muted-foreground hover:text-foreground"
-              }`}
-            >
-              <Globe className="h-4 w-4" />
-              Global
-            </button>
-            <button
-              onClick={() => setActiveTab("weekly")}
-              className={`flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all ${
-                activeTab === "weekly"
-                  ? "bg-primary text-primary-foreground"
-                  : "text-muted-foreground hover:text-foreground"
-              }`}
-            >
-              <Calendar className="h-4 w-4" />
-              Weekly
-            </button>
-          </div>
+        {/* Tabs + Filters */}
+        <div className="flex flex-col md:flex-row gap-4 justify-between">
+          <Tabs
+            value={activeTab}
+            onValueChange={(v) => setActiveTab(v as "global" | "weekly")}
+          >
+            <TabsList>
+              <TabsTrigger value="global">
+                <Globe className="mr-2 h-4 w-4" />
+                Global
+              </TabsTrigger>
+              <TabsTrigger value="weekly">
+                <Calendar className="mr-2 h-4 w-4" />
+                Weekly
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
 
-          {/* Category Filter */}
-          <div className="flex gap-2 flex-wrap">
+          <div className="flex flex-wrap gap-2">
             {categories.map((cat, i) => (
-              <button
+              <Badge
                 key={cat}
-                className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${
-                  i === 0
-                    ? "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 ? "default" : "outline"}
+                className="cursor-pointer"
               >
                 {cat}
-              </button>
+              </Badge>
             ))}
           </div>
         </div>
 
-        {/* Leaderboard Table */}
-        <div className="bg-card border border-border rounded-xl overflow-hidden">
-          <table className="w-full">
-            <thead className="bg-secondary/50">
-              <tr>
-                <th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-                  Rank
-                </th>
-                <th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-                  Runner
-                </th>
-                <th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-                  PB
-                </th>
-                <th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-                  Runs
-                </th>
-                <th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-                  Category
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {(activeTab === "global"
-                ? globalLeaderboard
-                : weeklyLeaderboard
-              ).map((entry, i) => (
+        {/* Table */}
+        <Card>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Rank</TableHead>
+                <TableHead>Runner</TableHead>
+                <TableHead>PB</TableHead>
+                <TableHead>Runs</TableHead>
+                <TableHead>Category</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {data.map((entry, i) => (
                 <LeaderboardRow key={entry.username} {...entry} index={i} />
               ))}
-            </tbody>
-          </table>
-        </div>
+            </TableBody>
+          </Table>
+        </Card>
 
         {/* Pagination */}
-        <div className="flex items-center justify-center gap-2 mt-6">
-          <button className="px-3 py-1.5 rounded-lg bg-secondary text-muted-foreground hover:text-foreground transition-all">
-            Previous
-          </button>
-          {[1, 2, 3, 50].map((page, i) => (
-            <button
-              key={i}
-              className={`px-3 py-1.5 rounded-lg transition-all ${
-                page === 1
-                  ? "bg-primary text-primary-foreground"
-                  : "bg-secondary text-muted-foreground hover:text-foreground"
-              }`}
-            >
-              {page}
-            </button>
-          ))}
-          <button className="px-3 py-1.5 rounded-lg bg-secondary text-muted-foreground hover:text-foreground transition-all">
-            Next
-          </button>
-        </div>
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious />
+            </PaginationItem>
+
+            {[1, 2, 3, 50].map((p) => (
+              <PaginationItem key={p}>
+                <PaginationLink isActive={p === 1}>{p}</PaginationLink>
+              </PaginationItem>
+            ))}
+
+            <PaginationItem>
+              <PaginationNext />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
       </div>
     </div>
   );
 };
 
 export default Leaderboards;
+
+/* ---------- helpers ---------- */
+
+function StatCard({
+  icon: Icon,
+  label,
+  value,
+}: {
+  icon: any;
+  label: string;
+  value: string;
+}) {
+  return (
+    <Card>
+      <CardHeader className="pb-2 text-center">
+        <Icon className="mx-auto h-5 w-5 text-primary" />
+        <CardTitle className="font-mono text-2xl">{value}</CardTitle>
+        <p className="text-xs text-muted-foreground">{label}</p>
+      </CardHeader>
+    </Card>
+  );
+}
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 0000000..beb56ed
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,48 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none 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 transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..681ad98
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
new file mode 100644
index 0000000..1dcfb0c
--- /dev/null
+++ b/src/components/ui/pagination.tsx
@@ -0,0 +1,127 @@
+import * as React from "react"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants, type Button } from "@/components/ui/button"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex flex-row items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size,
+        }),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
new file mode 100644
index 0000000..51b74dd
--- /dev/null
+++ b/src/components/ui/table.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..7f73dcd
--- /dev/null
+++ b/src/components/ui/tabs.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
+        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

From d0b4a53f8099f840006e5b522c32bc7d2a5db94c Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Mon, 2 Feb 2026 23:10:13 +0100
Subject: [PATCH 04/28] Shadcnified problems

---
 src/app/leaderboards/page.tsx      |   6 +-
 src/app/problems/page.tsx          | 257 ++++++++++++++---------------
 src/components/ui/input.tsx        |  21 +++
 src/components/ui/toggle-group.tsx |  83 ++++++++++
 src/components/ui/toggle.tsx       |  47 ++++++
 5 files changed, 275 insertions(+), 139 deletions(-)
 create mode 100644 src/components/ui/input.tsx
 create mode 100644 src/components/ui/toggle-group.tsx
 create mode 100644 src/components/ui/toggle.tsx

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 }

From 0951ad47990e9f72c1842d1af2e3a5147b72ae3b Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Mon, 2 Feb 2026 23:13:09 +0100
Subject: [PATCH 05/28] Profile

---
 src/app/problems/page.tsx       |   6 +-
 src/app/profile/page.tsx        | 439 +++++++++++++++-----------------
 src/components/ui/separator.tsx |  28 ++
 3 files changed, 237 insertions(+), 236 deletions(-)
 create mode 100644 src/components/ui/separator.tsx

diff --git a/src/app/problems/page.tsx b/src/app/problems/page.tsx
index 7af1c4f..57764bd 100644
--- a/src/app/problems/page.tsx
+++ b/src/app/problems/page.tsx
@@ -9,7 +9,7 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
-const Problems = () => {
+export default function Problems() {
   const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
 
   const categories = ["All", "Arrays", "Trees", "Graphs", "DP", "Strings"];
@@ -90,9 +90,7 @@ const Problems = () => {
       </div>
     </div>
   );
-};
-
-export default Problems;
+}
 
 /* ---------------- data ---------------- */
 
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 30bda86..879b001 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -1,15 +1,15 @@
-import {
-  Trophy,
-  Timer,
-  Zap,
-  Target,
-  Calendar,
-  TrendingUp,
-  Award,
-} from "lucide-react";
+"use client";
+
+import { Trophy, Timer, Zap, Target, Calendar, Award } from "lucide-react";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+
 import StatCard from "@/components/app/StatCard";
 
-const Profile = () => {
+export default function Profile() {
   const user = {
     username: "speedmaster_x",
     joinDate: "Jan 2024",
@@ -21,139 +21,49 @@ const Profile = () => {
     favoriteCategory: "Any%",
   };
 
-  const recentRuns = [
-    {
-      id: 1,
-      category: "Any%",
-      time: "2:38.54",
-      date: "2 hours ago",
-      status: "clean",
-    },
-    {
-      id: 2,
-      category: "Any%",
-      time: "2:45.12",
-      date: "3 hours ago",
-      status: "clean",
-    },
-    {
-      id: 3,
-      category: "Easy Only",
-      time: "1:23.45",
-      date: "5 hours ago",
-      status: "clean",
-    },
-    {
-      id: 4,
-      category: "Any%",
-      time: "--:--",
-      date: "5 hours ago",
-      status: "reset",
-    },
-    {
-      id: 5,
-      category: "Any%",
-      time: "2:51.33",
-      date: "Yesterday",
-      status: "clean",
-    },
-    {
-      id: 6,
-      category: "No DP",
-      time: "3:45.67",
-      date: "Yesterday",
-      status: "clean",
-    },
-  ];
-
-  const achievements = [
-    {
-      name: "First Blood",
-      description: "Complete your first run",
-      icon: Zap,
-      unlocked: true,
-    },
-    {
-      name: "Sub-3 Club",
-      description: "Finish a run under 3 minutes",
-      icon: Timer,
-      unlocked: true,
-    },
-    {
-      name: "World Record",
-      description: "Hold a world record",
-      icon: Trophy,
-      unlocked: true,
-    },
-    {
-      name: "Century",
-      description: "Complete 100 runs",
-      icon: Target,
-      unlocked: true,
-    },
-    {
-      name: "Perfectionist",
-      description: "100 clean runs",
-      icon: Award,
-      unlocked: false,
-    },
-    {
-      name: "Marathon",
-      description: "10 hours of running",
-      icon: Calendar,
-      unlocked: true,
-    },
-  ];
-
   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">
         {/* Profile Header */}
-        <div className="bg-card border border-border rounded-2xl p-8 mb-8 relative overflow-hidden">
-          {/* Background gradient */}
-          <div className="absolute inset-0 bg-linear-to-r from-primary/10 via-transparent to-transparent pointer-events-none" />
+        <Card className="relative overflow-hidden">
+          <div className="absolute inset-0 bg-linear-to-r from-primary/10 via-transparent to-transparent" />
 
-          <div className="relative flex flex-col md:flex-row items-start md:items-center gap-6">
+          <CardContent className="relative p-8 flex flex-col md:flex-row gap-6">
             {/* Avatar */}
             <div className="relative">
-              <div className="w-24 h-24 rounded-2xl bg-linear-to-br from-primary to-primary/50 flex items-center justify-center text-3xl font-bold text-primary-foreground glow-purple">
-                {user.username.charAt(0).toUpperCase()}
+              <div className="w-24 h-24 rounded-2xl bg-linear-to-br from-primary to-primary/60 flex items-center justify-center text-3xl font-bold text-primary-foreground glow-purple">
+                {user.username[0].toUpperCase()}
               </div>
               <div className="absolute -bottom-2 -right-2 w-8 h-8 rounded-lg rank-gold flex items-center justify-center text-sm font-bold glow-gold">
-                #1
+                #{user.rank}
               </div>
             </div>
 
             {/* User Info */}
             <div className="flex-1">
-              <h1 className="text-3xl font-bold text-foreground mb-1">
-                {user.username}
-              </h1>
+              <h1 className="text-3xl font-bold">{user.username}</h1>
               <p className="text-muted-foreground mb-3">
                 Runner since {user.joinDate}
               </p>
-              <div className="flex flex-wrap gap-3">
-                <span className="px-3 py-1 rounded-lg bg-primary/10 text-primary text-sm font-medium border border-primary/30">
-                  World Record Holder
-                </span>
-                <span className="px-3 py-1 rounded-lg bg-secondary text-secondary-foreground text-sm">
-                  {user.favoriteCategory} Main
-                </span>
+
+              <div className="flex flex-wrap gap-2">
+                <Badge>World Record Holder</Badge>
+                <Badge variant="secondary">{user.favoriteCategory} Main</Badge>
               </div>
             </div>
 
-            {/* Quick Stats */}
+            {/* PB */}
             <div className="text-right">
               <p className="text-4xl font-bold font-mono text-primary text-glow">
                 {user.pb}
               </p>
               <p className="text-sm text-muted-foreground">Personal Best</p>
             </div>
-          </div>
-        </div>
+          </CardContent>
+        </Card>
 
-        {/* Stats Grid */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+        {/* Stats */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
           <StatCard
             label="Total Runs"
             value={user.totalRuns.toLocaleString()}
@@ -183,80 +93,71 @@ const Profile = () => {
 
         <div className="grid lg:grid-cols-3 gap-8">
           {/* Recent Runs */}
-          <div className="lg:col-span-2">
-            <div className="bg-card border border-border rounded-xl p-6">
-              <div className="flex items-center justify-between mb-6">
-                <h2 className="text-xl font-bold text-foreground">
-                  Recent Runs
-                </h2>
-                <button className="text-sm text-primary hover:underline">
-                  View All
-                </button>
-              </div>
+          <Card className="lg:col-span-2">
+            <CardHeader className="flex flex-row items-center justify-between">
+              <CardTitle>Recent Runs</CardTitle>
+              <Button variant="link" size="sm">
+                View all
+              </Button>
+            </CardHeader>
 
-              <div className="space-y-3">
-                {recentRuns.map((run, i) => (
-                  <div
-                    key={run.id}
-                    className="flex items-center justify-between py-3 px-4 rounded-lg bg-secondary/30 hover:bg-secondary/50 transition-colors animate-fade-in opacity-0"
-                    style={{
-                      animationDelay: `${i * 0.1}s`,
-                      animationFillMode: "forwards",
-                    }}
-                  >
-                    <div className="flex items-center gap-4">
-                      <div
-                        className={`w-2 h-2 rounded-full ${
-                          run.status === "clean"
-                            ? "bg-emerald-400"
-                            : "bg-red-400"
-                        }`}
-                      />
-                      <div>
-                        <p className="font-medium text-foreground">
-                          {run.category}
-                        </p>
-                        <p className="text-xs text-muted-foreground">
-                          {run.date}
-                        </p>
-                      </div>
-                    </div>
-                    <div className="text-right">
-                      <p
-                        className={`font-mono font-semibold ${
-                          run.status === "reset"
-                            ? "text-red-400"
-                            : "text-foreground"
-                        }`}
-                      >
-                        {run.time}
-                      </p>
-                      <p className="text-xs text-muted-foreground capitalize">
-                        {run.status}
+            <CardContent className="space-y-3">
+              {recentRuns.map((run, i) => (
+                <div
+                  key={run.id}
+                  className="flex items-center justify-between rounded-lg px-4 py-3 bg-secondary/30 hover:bg-secondary/50 transition animate-fade-in opacity-0"
+                  style={{
+                    animationDelay: `${i * 0.1}s`,
+                    animationFillMode: "forwards",
+                  }}
+                >
+                  <div className="flex items-center gap-4">
+                    <div
+                      className={`w-2 h-2 rounded-full ${
+                        run.status === "clean" ? "bg-emerald-400" : "bg-red-400"
+                      }`}
+                    />
+                    <div>
+                      <p className="font-medium">{run.category}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {run.date}
                       </p>
                     </div>
                   </div>
-                ))}
-              </div>
-            </div>
-          </div>
 
-          {/* Achievements */}
-          <div className="lg:col-span-1">
-            <div className="bg-card border border-border rounded-xl p-6">
-              <div className="flex items-center justify-between mb-6">
-                <h2 className="text-xl font-bold text-foreground">
-                  Achievements
-                </h2>
-                <span className="text-sm text-muted-foreground">5/6</span>
-              </div>
+                  <div className="text-right">
+                    <p
+                      className={`font-mono font-semibold ${
+                        run.status === "reset"
+                          ? "text-red-400"
+                          : "text-foreground"
+                      }`}
+                    >
+                      {run.time}
+                    </p>
+                    <p className="text-xs text-muted-foreground capitalize">
+                      {run.status}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
 
-              <div className="space-y-3">
-                {achievements.map((achievement, i) => (
+          {/* Achievements + PB */}
+          <div className="space-y-4">
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between">
+                <CardTitle>Achievements</CardTitle>
+                <span className="text-sm text-muted-foreground">5 / 6</span>
+              </CardHeader>
+
+              <CardContent className="space-y-3">
+                {achievements.map((a, i) => (
                   <div
-                    key={achievement.name}
-                    className={`flex items-center gap-3 p-3 rounded-lg transition-all animate-fade-in opacity-0 ${
-                      achievement.unlocked
+                    key={a.name}
+                    className={`flex items-center gap-3 rounded-lg p-3 animate-fade-in opacity-0 ${
+                      a.unlocked
                         ? "bg-primary/10 border border-primary/20"
                         : "bg-secondary/30 opacity-50"
                     }`}
@@ -267,39 +168,33 @@ const Profile = () => {
                   >
                     <div
                       className={`p-2 rounded-lg ${
-                        achievement.unlocked
+                        a.unlocked
                           ? "bg-primary/20 text-primary"
                           : "bg-secondary text-muted-foreground"
                       }`}
                     >
-                      <achievement.icon className="h-4 w-4" />
+                      <a.icon className="h-4 w-4" />
                     </div>
+
                     <div className="flex-1">
-                      <p
-                        className={`text-sm font-medium ${
-                          achievement.unlocked
-                            ? "text-foreground"
-                            : "text-muted-foreground"
-                        }`}
-                      >
-                        {achievement.name}
-                      </p>
+                      <p className="text-sm font-medium">{a.name}</p>
                       <p className="text-xs text-muted-foreground">
-                        {achievement.description}
+                        {a.description}
                       </p>
                     </div>
-                    {achievement.unlocked && (
+
+                    {a.unlocked && (
                       <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center">
                         <svg
                           className="w-3 h-3 text-primary-foreground"
-                          fill="none"
                           viewBox="0 0 24 24"
+                          fill="none"
                           stroke="currentColor"
+                          strokeWidth={3}
                         >
                           <path
                             strokeLinecap="round"
                             strokeLinejoin="round"
-                            strokeWidth={3}
                             d="M5 13l4 4L19 7"
                           />
                         </svg>
@@ -307,44 +202,124 @@ const Profile = () => {
                     )}
                   </div>
                 ))}
-              </div>
-            </div>
+              </CardContent>
+            </Card>
 
             {/* PB History */}
-            <div className="bg-card border border-border rounded-xl p-6 mt-4">
-              <h2 className="text-xl font-bold text-foreground mb-4">
-                PB History
-              </h2>
-              <div className="space-y-2">
-                <div className="flex justify-between items-center py-2 border-b border-border">
-                  <span className="text-muted-foreground text-sm">2:34.21</span>
-                  <span className="text-xs text-muted-foreground">Today</span>
-                </div>
-                <div className="flex justify-between items-center py-2 border-b border-border">
-                  <span className="text-muted-foreground text-sm">2:38.54</span>
-                  <span className="text-xs text-muted-foreground">
-                    3 days ago
-                  </span>
-                </div>
-                <div className="flex justify-between items-center py-2 border-b border-border">
-                  <span className="text-muted-foreground text-sm">2:45.12</span>
-                  <span className="text-xs text-muted-foreground">
-                    1 week ago
-                  </span>
-                </div>
-                <div className="flex justify-between items-center py-2">
-                  <span className="text-muted-foreground text-sm">2:52.33</span>
-                  <span className="text-xs text-muted-foreground">
-                    2 weeks ago
-                  </span>
-                </div>
-              </div>
-            </div>
+            <Card>
+              <CardHeader>
+                <CardTitle>PB History</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-2">
+                {pbHistory.map((pb, i) => (
+                  <div key={i}>
+                    <div className="flex justify-between text-sm">
+                      <span className="text-muted-foreground">{pb.time}</span>
+                      <span className="text-muted-foreground">{pb.date}</span>
+                    </div>
+                    {i !== pbHistory.length - 1 && (
+                      <Separator className="my-2" />
+                    )}
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
           </div>
         </div>
       </div>
     </div>
   );
-};
+}
 
-export default Profile;
+/* ---------------- data ---------------- */
+
+const recentRuns = [
+  {
+    id: 1,
+    category: "Any%",
+    time: "2:38.54",
+    date: "2 hours ago",
+    status: "clean",
+  },
+  {
+    id: 2,
+    category: "Any%",
+    time: "2:45.12",
+    date: "3 hours ago",
+    status: "clean",
+  },
+  {
+    id: 3,
+    category: "Easy Only",
+    time: "1:23.45",
+    date: "5 hours ago",
+    status: "clean",
+  },
+  {
+    id: 4,
+    category: "Any%",
+    time: "--:--",
+    date: "5 hours ago",
+    status: "reset",
+  },
+  {
+    id: 5,
+    category: "Any%",
+    time: "2:51.33",
+    date: "Yesterday",
+    status: "clean",
+  },
+  {
+    id: 6,
+    category: "No DP",
+    time: "3:45.67",
+    date: "Yesterday",
+    status: "clean",
+  },
+];
+
+const achievements = [
+  {
+    name: "First Blood",
+    description: "Complete your first run",
+    icon: Zap,
+    unlocked: true,
+  },
+  {
+    name: "Sub-3 Club",
+    description: "Finish a run under 3 minutes",
+    icon: Timer,
+    unlocked: true,
+  },
+  {
+    name: "World Record",
+    description: "Hold a world record",
+    icon: Trophy,
+    unlocked: true,
+  },
+  {
+    name: "Century",
+    description: "Complete 100 runs",
+    icon: Target,
+    unlocked: true,
+  },
+  {
+    name: "Perfectionist",
+    description: "100 clean runs",
+    icon: Award,
+    unlocked: false,
+  },
+  {
+    name: "Marathon",
+    description: "10 hours of running",
+    icon: Calendar,
+    unlocked: true,
+  },
+];
+
+const pbHistory = [
+  { time: "2:34.21", date: "Today" },
+  { time: "2:38.54", date: "3 days ago" },
+  { time: "2:45.12", date: "1 week ago" },
+  { time: "2:52.33", date: "2 weeks ago" },
+];
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
new file mode 100644
index 0000000..4c24b2a
--- /dev/null
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

From 9b7f65155df29a80f74603d3ed7249b994e68c5d Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Mon, 2 Feb 2026 23:19:09 +0100
Subject: [PATCH 06/28] Shadcn-ified run

---
 src/app/run/page.tsx | 219 ++++++++++++++++++-------------------------
 1 file changed, 92 insertions(+), 127 deletions(-)

diff --git a/src/app/run/page.tsx b/src/app/run/page.tsx
index 0cada5a..d7fe3df 100644
--- a/src/app/run/page.tsx
+++ b/src/app/run/page.tsx
@@ -1,13 +1,12 @@
 "use client";
 
 import { FileTree } from "@sinm/react-file-tree";
-import CodeMirror, {
-  EditorState,
-  EditorView,
-  ReactCodeMirrorRef,
-} from "@uiw/react-codemirror";
+import CodeMirror, { EditorState } from "@uiw/react-codemirror";
 import { vscodeDark } from "@uiw/codemirror-theme-vscode";
-import { useEffect, useRef } from "react";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
 
 type RunInfo = {
   category: "any%" | "100%";
@@ -24,45 +23,6 @@ type ChatMessage = {
 };
 
 export default function Run() {
-  const splits = [
-    {
-      problemName: "Two Sum Dash",
-      splitTime: "0:38",
-      delta: "-0:04",
-      isCompleted: true,
-      pbTime: "0:42",
-    },
-    {
-      problemName: "Binary Sprint",
-      splitTime: "1:12",
-      delta: "+0:02",
-      isCompleted: true,
-      pbTime: "0:32",
-    },
-    {
-      problemName: "String Scramble",
-      splitTime: "--:--",
-      delta: undefined,
-      isCompleted: false,
-      isCurrent: true,
-      pbTime: "0:55",
-    },
-    {
-      problemName: "Linked List Rush",
-      splitTime: "--:--",
-      delta: undefined,
-      isCompleted: false,
-      pbTime: "1:24",
-    },
-    {
-      problemName: "Stack Overflow",
-      splitTime: "--:--",
-      delta: undefined,
-      isCompleted: false,
-      pbTime: "1:42",
-    },
-  ];
-
   const runInfo: RunInfo = {
     category: "any%",
     problems: 5,
@@ -71,7 +31,7 @@ export default function Run() {
     currentAttempt: 47,
   };
 
-  const chatMessages = [
+  const chatMessages: ChatMessage[] = [
     { user: "Alice", message: "Nice split!", time: "1:53" },
     { user: "Bob", message: "Watch out for the string problem!", time: "1:54" },
     { user: "Charlie", message: "PB incoming? 👀", time: "1:55" },
@@ -80,107 +40,112 @@ export default function Run() {
   return (
     <div className="h-svh px-20 pt-24 pb-12 flex gap-8">
       {/* Editor */}
-      <div className="h-full w-full bg-card rounded-2xl flex overflow-clip">
-        <div className="h-full w-2xs border-r-2 p-5">
-          <FileTree
-            tree={{
-              type: "directory",
-              uri: "my-app",
-              expanded: true,
-              children: [
-                {
-                  type: "file",
-                  uri: "myfile.js",
-                },
-              ],
-            }}
-          />
-        </div>
-        <div className="h-full w-full p-5 pt-4">
-          <header>myfile.js</header>
-          <div className="pt-3 pb-5 w-full h-full">
-            <CodeMirror
-              readOnly
-              className="w-full h-full"
-              value="yo"
-              extensions={[
-                EditorState.transactionFilter.of((tr) => {
-                  if (tr.selection && tr.isUserEvent("select")) {
-                    return [];
-                  }
-                  return tr;
-                }),
-              ]}
-              theme={vscodeDark}
-              onCreateEditor={(view) => {
-                view.focus();
-
-                view.dispatch({
-                  selection: { anchor: 1 },
-                  scrollIntoView: true,
-                });
+      <Card className="flex-1 overflow-hidden">
+        <CardContent className="flex h-full">
+          {/* File tree */}
+          <div className="w-2xs border-r border-border">
+            <FileTree
+              tree={{
+                type: "directory",
+                uri: "my-app",
+                expanded: true,
+                children: [{ type: "file", uri: "myfile.js" }],
               }}
             />
           </div>
-        </div>
-      </div>
+
+          {/* Code */}
+          <div className="flex-1 pl-5 flex flex-col">
+            <header className="text-sm font-medium text-muted-foreground">
+              myfile.js
+            </header>
+
+            <div className="flex-1 pt-3 pb-5">
+              <CodeMirror
+                readOnly
+                className="h-full w-full"
+                value="yo"
+                extensions={[
+                  EditorState.transactionFilter.of((tr) => {
+                    if (tr.selection && tr.isUserEvent("select")) {
+                      return [];
+                    }
+                    return tr;
+                  }),
+                ]}
+                theme={vscodeDark}
+                onCreateEditor={(view) => {
+                  view.focus();
+                  view.dispatch({
+                    selection: { anchor: 1 },
+                    scrollIntoView: true,
+                  });
+                }}
+              />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
 
       {/* Timer & Chat */}
-      <div className="flex flex-col gap-6 h-full">
-        <Timer runInfo={runInfo} />
-        <Chat chatMessages={chatMessages} />
+      <div className="flex flex-col gap-6 h-full w-sm">
+        <RunTimer runInfo={runInfo} />
+        <RunChat chatMessages={chatMessages} />
       </div>
     </div>
   );
 }
 
-function Timer({ runInfo }: { runInfo: RunInfo }) {
+/* ---------------- Timer ---------------- */
+
+function RunTimer({ runInfo }: { runInfo: RunInfo }) {
   return (
-    <div className="bg-card border border-border rounded-2xl p-6 text-center relative">
-      <div className="absolute inset-0 bg-linear-to-b from-primary/5 to-transparent pointer-events-none rounded-t-2xl" />
-      <div className="relative">
+    <Card className="relative text-center overflow-hidden">
+      <div className="absolute inset-0 bg-linear-to-b from-primary/5 to-transparent pointer-events-none" />
+      <CardContent className="relative">
         <p className="timer-display text-primary text-4xl font-bold">1:52.34</p>
-        <p className="text-muted-foreground mt-2 font-mono text-sm">
+        <p className="mt-2 font-mono text-sm text-muted-foreground">
           PB: {runInfo.pbTime} | Diff:{" "}
           <span className="text-red-400">+0:12</span>
         </p>
-      </div>
-    </div>
+      </CardContent>
+    </Card>
   );
 }
 
-function Chat({ chatMessages }: { chatMessages: ChatMessage[] }) {
+/* ---------------- Chat ---------------- */
+
+function RunChat({ chatMessages }: { chatMessages: ChatMessage[] }) {
   return (
-    <div className="h-full flex flex-col flex-1 w-sm bg-card border border-border rounded-xl p-4">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-4">
-        <h3 className="font-semibold text-foreground">Chat</h3>
-        <span className="text-xs text-muted-foreground">
-          {chatMessages.length} messages
-        </span>
-      </div>
+    <Card className="flex flex-col flex-1">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base">Chat</CardTitle>
+          <span className="text-xs text-muted-foreground">
+            {chatMessages.length} messages
+          </span>
+        </div>
+      </CardHeader>
 
-      {/* Messages area */}
-      <div className="flex-1 overflow-y-auto space-y-2">
-        {chatMessages.map((msg, idx) => (
-          <div key={idx} className="bg-secondary/50 rounded-lg p-2">
-            <span className="font-semibold text-foreground">{msg.user}</span>:{" "}
-            <span className="text-muted-foreground">{msg.message}</span>
-            <span className="text-xs text-muted-foreground ml-2">
-              {msg.time}
-            </span>
-          </div>
-        ))}
-      </div>
+      <Separator />
 
-      {/* Input */}
-      <div className="mt-4">
-        <input
-          type="text"
-          placeholder="Type a message..."
-          className="w-full rounded-lg border border-border p-2 text-sm bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
-        />
-      </div>
-    </div>
+      <CardContent className="flex flex-col flex-1 gap-3">
+        {/* Messages */}
+        <div className="flex-1 overflow-y-auto space-y-2">
+          {chatMessages.map((msg, i) => (
+            <div key={i} className="rounded-lg bg-secondary/50 p-2 text-sm">
+              <span className="font-semibold text-foreground">{msg.user}</span>:{" "}
+              <span className="text-muted-foreground">{msg.message}</span>
+              <span className="ml-2 text-xs text-muted-foreground">
+                {msg.time}
+              </span>
+            </div>
+          ))}
+        </div>
+
+        {/* Input */}
+        <Input placeholder="Type a message…" />
+      </CardContent>
+    </Card>
   );
 }

From 383097b9e4f1ac6578adbaac3257e9b815f03a2b Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Mon, 2 Feb 2026 23:29:10 +0100
Subject: [PATCH 07/28] Shadcn-ified the landing page

---
 src/app/page.tsx             |  6 ++----
 src/components/ui/button.tsx | 24 ++++++++++++++----------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index dfb6439..050506b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,7 +4,7 @@ import { Timer, Zap, Trophy, Users, ArrowRight, Play } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 
-const Landing = () => {
+export default function Landing() {
   const features = [
     {
       icon: Timer,
@@ -183,6 +183,4 @@ const Landing = () => {
       </section>
     </div>
   );
-};
-
-export default Landing;
+}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index be9ad05..3b11e4c 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -17,14 +17,11 @@ const buttonVariants = cva(
           "border-2 border-primary/50 bg-transparent text-primary hover:bg-primary/10 hover:border-primary",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "text-muted-foreground hover:text-foreground hover:bg-secondary",
-        link:
-          "text-primary underline-offset-4 hover:underline",
-        hero:
-          "bg-primary text-primary-foreground px-8 py-6 text-lg font-bold glow-purple hover:glow-purple-intense hover:scale-105",
+        ghost: "text-muted-foreground hover:text-foreground hover:bg-secondary",
+        link: "text-primary underline-offset-4 hover:underline",
+        hero: "bg-primary text-primary-foreground px-8 py-6 text-lg font-bold glow-purple hover:glow-purple-intense",
         "hero-outline":
-          "border-2 border-primary/50 bg-transparent text-primary px-8 py-6 text-lg font-bold hover:bg-primary/10 hover:border-primary hover:scale-105",
+          "border-2 border-primary/50 bg-transparent text-primary px-8 py-6 text-lg font-bold hover:bg-primary/10 hover:border-primary hover:ring-2 hover:ring-primary/30",
       },
       size: {
         default: "h-10 px-4 py-2",
@@ -42,15 +39,22 @@ const buttonVariants = cva(
 );
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-  VariantProps<typeof buttonVariants> {
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
   },
 );
 Button.displayName = "Button";

From 3486f9a6136e60ad5ac57f32c6c299fdeafd5257 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Mon, 2 Feb 2026 23:36:16 +0100
Subject: [PATCH 08/28] runs page

---
 src/app/runs/page.tsx | 202 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 202 insertions(+)
 create mode 100644 src/app/runs/page.tsx

diff --git a/src/app/runs/page.tsx b/src/app/runs/page.tsx
new file mode 100644
index 0000000..809afaf
--- /dev/null
+++ b/src/app/runs/page.tsx
@@ -0,0 +1,202 @@
+"use client";
+
+import { Zap, Users, Timer, TrendingUp, Eye } from "lucide-react";
+
+import { Card, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableCell,
+} from "@/components/ui/table";
+
+/* ---------------- mock data ---------------- */
+
+const liveRuns = [
+  {
+    id: 1,
+    username: "speedmaster_x",
+    problem: "Two Sum Dash",
+    category: "Any%",
+    time: "1:52.34",
+    pace: "-0:03",
+    status: "pb",
+  },
+  {
+    id: 2,
+    username: "algo_ninja",
+    problem: "Binary Sprint",
+    category: "Any%",
+    time: "2:04.11",
+    pace: "+0:05",
+    status: "normal",
+  },
+  {
+    id: 3,
+    username: "stackattack",
+    problem: "String Scramble",
+    category: "Easy",
+    time: "0:48.92",
+    pace: "-0:01",
+    status: "pb",
+  },
+  {
+    id: 4,
+    username: "reset_king",
+    problem: "Linked List Rush",
+    category: "Any%",
+    time: "1:31.77",
+    pace: "+0:12",
+    status: "danger",
+  },
+];
+
+/* ---------------- page ---------------- */
+
+export default function LiveRuns() {
+  return (
+    <div className="min-h-screen pt-24 pb-16">
+      <div className="container mx-auto px-6 space-y-8">
+        {/* Header */}
+        <div>
+          <h1 className="text-4xl font-bold">Live Runs</h1>
+          <p className="text-muted-foreground">
+            Watch runners compete in real time. Every second counts.
+          </p>
+        </div>
+
+        {/* Stats */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <StatCard icon={Zap} label="Live Runs" value="42" />
+          <StatCard icon={Users} label="Active Runners" value="39" />
+          <StatCard icon={Timer} label="Avg Runtime" value="1:47" />
+          <StatCard icon={TrendingUp} label="PB Pace Runs" value="7" />
+        </div>
+
+        {/* Filters */}
+        <div className="flex flex-wrap gap-2">
+          {["Any%", "100%", "Easy", "Hard"].map((cat) => (
+            <Badge key={cat} variant="outline" className="cursor-pointer">
+              {cat}
+            </Badge>
+          ))}
+
+          <Badge className="ml-auto bg-primary/10 text-primary">
+            🔥 PB Pace
+          </Badge>
+        </div>
+
+        {/* Table */}
+        <Card>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Runner</TableHead>
+                <TableHead>Problem</TableHead>
+                <TableHead>Time</TableHead>
+                <TableHead>Pace</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead />
+              </TableRow>
+            </TableHeader>
+
+            <TableBody>
+              {liveRuns.map((run) => (
+                <LiveRunRow key={run.id} {...run} />
+              ))}
+            </TableBody>
+          </Table>
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+/* ---------------- row ---------------- */
+
+function LiveRunRow({ username, problem, category, time, pace, status }: any) {
+  const pacePositive = pace.startsWith("+");
+
+  return (
+    <TableRow
+      className={
+        status === "pb"
+          ? "bg-primary/5 hover:bg-primary/10"
+          : "hover:bg-secondary/50"
+      }
+    >
+      <TableCell className="font-medium">{username}</TableCell>
+
+      <TableCell>
+        <div className="flex flex-col gap-1">
+          <span>{problem}</span>
+          <Badge variant="outline" className="w-fit text-xs">
+            {category}
+          </Badge>
+        </div>
+      </TableCell>
+
+      <TableCell className="font-mono text-primary">{time}</TableCell>
+
+      <TableCell>
+        <Badge
+          className={
+            pacePositive
+              ? "bg-red-500/10 text-red-400"
+              : "bg-green-500/10 text-green-400"
+          }
+        >
+          {pace}
+        </Badge>
+      </TableCell>
+
+      <TableCell>
+        <div className="flex items-center gap-2 text-sm">
+          <span
+            className={`h-2 w-2 rounded-full ${
+              status === "pb"
+                ? "bg-green-500 animate-pulse"
+                : status === "danger"
+                  ? "bg-red-500 animate-pulse"
+                  : "bg-emerald-400 animate-pulse"
+            }`}
+          />
+          Live
+        </div>
+      </TableCell>
+
+      <TableCell className="text-right">
+        <Button size="sm" variant="ghost">
+          <Eye className="h-4 w-4 mr-1" />
+          Watch
+        </Button>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+/* ---------------- helpers ---------------- */
+
+function StatCard({
+  icon: Icon,
+  label,
+  value,
+}: {
+  icon: any;
+  label: string;
+  value: string;
+}) {
+  return (
+    <Card>
+      <CardHeader className="pb-2 text-center">
+        <Icon className="mx-auto h-5 w-5 text-primary" />
+        <CardTitle className="font-mono text-2xl">{value}</CardTitle>
+        <p className="text-xs text-muted-foreground">{label}</p>
+      </CardHeader>
+    </Card>
+  );
+}

From 7654eed350353eb4bd9bf24b9bbaa5f68479d8df Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Mon, 2 Feb 2026 23:41:26 +0100
Subject: [PATCH 09/28] renamed runs to live

---
 src/components/app/Navbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/app/Navbar.tsx b/src/components/app/Navbar.tsx
index 62a3d63..f157412 100644
--- a/src/components/app/Navbar.tsx
+++ b/src/components/app/Navbar.tsx
@@ -19,7 +19,7 @@ const navs = [
   {
     link: "/runs",
     icon: Radio,
-    name: "Runs",
+    name: "Live",
   },
 ];
 

From 6e5211d47882e514a5a589bb32c6af990dba6ecc Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 00:01:24 +0100
Subject: [PATCH 10/28] hot live runs

---
 src/app/runs/page.tsx | 34 ++++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/app/runs/page.tsx b/src/app/runs/page.tsx
index 809afaf..43da886 100644
--- a/src/app/runs/page.tsx
+++ b/src/app/runs/page.tsx
@@ -58,6 +58,13 @@ const liveRuns = [
 /* ---------------- page ---------------- */
 
 export default function LiveRuns() {
+  // Sort top runners (status === 'pb') to the top
+  const sortedRuns = [...liveRuns].sort((a, b) => {
+    if (a.status === "pb" && b.status !== "pb") return -1;
+    if (a.status !== "pb" && b.status === "pb") return 1;
+    return 0;
+  });
+
   return (
     <div className="min-h-screen pt-24 pb-16">
       <div className="container mx-auto px-6 space-y-8">
@@ -105,7 +112,7 @@ export default function LiveRuns() {
             </TableHeader>
 
             <TableBody>
-              {liveRuns.map((run) => (
+              {sortedRuns.map((run) => (
                 <LiveRunRow key={run.id} {...run} />
               ))}
             </TableBody>
@@ -116,20 +123,19 @@ export default function LiveRuns() {
   );
 }
 
-/* ---------------- row ---------------- */
-
 function LiveRunRow({ username, problem, category, time, pace, status }: any) {
   const pacePositive = pace.startsWith("+");
+  const isTop = status === "pb";
 
   return (
     <TableRow
       className={
-        status === "pb"
-          ? "bg-primary/5 hover:bg-primary/10"
-          : "hover:bg-secondary/50"
+        isTop ? "bg-primary/5 hover:bg-primary/10" : "hover:bg-secondary/50"
       }
     >
-      <TableCell className="font-medium">{username}</TableCell>
+      <TableCell className="font-medium">
+        {isTop ? `🔥 ${username}` : username}
+      </TableCell>
 
       <TableCell>
         <div className="flex flex-col gap-1">
@@ -140,7 +146,11 @@ function LiveRunRow({ username, problem, category, time, pace, status }: any) {
         </div>
       </TableCell>
 
-      <TableCell className="font-mono text-primary">{time}</TableCell>
+      <TableCell
+        className={`font-mono ${isTop ? "text-primary font-bold" : ""}`}
+      >
+        {time}
+      </TableCell>
 
       <TableCell>
         <Badge
@@ -159,10 +169,10 @@ function LiveRunRow({ username, problem, category, time, pace, status }: any) {
           <span
             className={`h-2 w-2 rounded-full ${
               status === "pb"
-                ? "bg-green-500 animate-pulse"
+                ? "bg-green-500"
                 : status === "danger"
-                  ? "bg-red-500 animate-pulse"
-                  : "bg-emerald-400 animate-pulse"
+                  ? "bg-red-500"
+                  : "bg-emerald-400"
             }`}
           />
           Live
@@ -170,7 +180,7 @@ function LiveRunRow({ username, problem, category, time, pace, status }: any) {
       </TableCell>
 
       <TableCell className="text-right">
-        <Button size="sm" variant="ghost">
+        <Button size="sm" variant={isTop ? "default" : "ghost"}>
           <Eye className="h-4 w-4 mr-1" />
           Watch
         </Button>

From c2992f8a9b197a3dc4b0b44802e9d80814d62b07 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 13:14:11 +0100
Subject: [PATCH 11/28] Improved padding

---
 src/app/runs/page.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/runs/page.tsx b/src/app/runs/page.tsx
index 43da886..2ab10a9 100644
--- a/src/app/runs/page.tsx
+++ b/src/app/runs/page.tsx
@@ -92,7 +92,7 @@ export default function LiveRuns() {
             </Badge>
           ))}
 
-          <Badge className="ml-auto bg-primary/10 text-primary">
+          <Badge className="bg-primary/10 text-primary">
             🔥 PB Pace
           </Badge>
         </div>
@@ -102,12 +102,12 @@ export default function LiveRuns() {
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>Runner</TableHead>
+                <TableHead className="pl-5">Runner</TableHead>
                 <TableHead>Problem</TableHead>
                 <TableHead>Time</TableHead>
                 <TableHead>Pace</TableHead>
                 <TableHead>Status</TableHead>
-                <TableHead />
+                <TableHead className="pr-5" />
               </TableRow>
             </TableHeader>
 
@@ -133,7 +133,7 @@ function LiveRunRow({ username, problem, category, time, pace, status }: any) {
         isTop ? "bg-primary/5 hover:bg-primary/10" : "hover:bg-secondary/50"
       }
     >
-      <TableCell className="font-medium">
+      <TableCell className="font-medium pl-5">
         {isTop ? `🔥 ${username}` : username}
       </TableCell>
 
@@ -179,7 +179,7 @@ function LiveRunRow({ username, problem, category, time, pace, status }: any) {
         </div>
       </TableCell>
 
-      <TableCell className="text-right">
+      <TableCell className="text-right pr-5">
         <Button size="sm" variant={isTop ? "default" : "ghost"}>
           <Eye className="h-4 w-4 mr-1" />
           Watch

From 7ddba25fa96b967b386d6f346ffac459bff411d4 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 13:20:51 +0100
Subject: [PATCH 12/28] Animated live runs

---
 src/app/runs/page.tsx | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/app/runs/page.tsx b/src/app/runs/page.tsx
index 2ab10a9..715bf28 100644
--- a/src/app/runs/page.tsx
+++ b/src/app/runs/page.tsx
@@ -13,6 +13,7 @@ import {
   TableRow,
   TableCell,
 } from "@/components/ui/table";
+import { cn } from "@/lib/utils";
 
 /* ---------------- mock data ---------------- */
 
@@ -92,9 +93,7 @@ export default function LiveRuns() {
             </Badge>
           ))}
 
-          <Badge className="bg-primary/10 text-primary">
-            🔥 PB Pace
-          </Badge>
+          <Badge className="bg-primary/10 text-primary">🔥 PB Pace</Badge>
         </div>
 
         {/* Table */}
@@ -112,8 +111,8 @@ export default function LiveRuns() {
             </TableHeader>
 
             <TableBody>
-              {sortedRuns.map((run) => (
-                <LiveRunRow key={run.id} {...run} />
+              {sortedRuns.map((run, index) => (
+                <LiveRunRow key={run.id} {...run} index={index} />
               ))}
             </TableBody>
           </Table>
@@ -123,15 +122,28 @@ export default function LiveRuns() {
   );
 }
 
-function LiveRunRow({ username, problem, category, time, pace, status }: any) {
+function LiveRunRow({
+  index,
+  username,
+  problem,
+  category,
+  time,
+  pace,
+  status,
+}: any) {
   const pacePositive = pace.startsWith("+");
   const isTop = status === "pb";
 
   return (
     <TableRow
-      className={
-        isTop ? "bg-primary/5 hover:bg-primary/10" : "hover:bg-secondary/50"
-      }
+      className={cn(
+        "opacity-0 animate-fade-in",
+        isTop ? "bg-primary/5 hover:bg-primary/10" : "hover:bg-secondary/50",
+      )}
+      style={{
+        animationDelay: `${index * 0.05}s`,
+        animationFillMode: "forwards",
+      }}
     >
       <TableCell className="font-medium pl-5">
         {isTop ? `🔥 ${username}` : username}

From dd647db28bdfea977381ab1421c55c34144eeda9 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 13:30:12 +0100
Subject: [PATCH 13/28] App Structure

---
 src/components/ui/table.tsx      | 4 ++--
 src/modules/run/run.actions.ts   | 0
 src/modules/run/run.service.ts   | 0
 src/modules/run/run.types.ts     | 0
 src/modules/user/user.actions.ts | 0
 src/modules/user/user.service.ts | 0
 src/modules/user/user.types.ts   | 0
 7 files changed, 2 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/run/run.actions.ts
 create mode 100644 src/modules/run/run.service.ts
 create mode 100644 src/modules/run/run.types.ts
 create mode 100644 src/modules/user/user.actions.ts
 create mode 100644 src/modules/user/user.service.ts
 create mode 100644 src/modules/user/user.types.ts

diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index 51b74dd..3ac24f5 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -70,7 +70,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
         className
       )}
       {...props}
@@ -83,7 +83,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
     <td
       data-slot="table-cell"
       className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
         className
       )}
       {...props}
diff --git a/src/modules/run/run.actions.ts b/src/modules/run/run.actions.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/modules/run/run.service.ts b/src/modules/run/run.service.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/modules/run/run.types.ts b/src/modules/run/run.types.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/modules/user/user.actions.ts b/src/modules/user/user.actions.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/modules/user/user.service.ts b/src/modules/user/user.service.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/modules/user/user.types.ts b/src/modules/user/user.types.ts
new file mode 100644
index 0000000..e69de29

From db776231a1c05375b1a0c2d4b9a8be1690a60248 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 15:00:56 +0100
Subject: [PATCH 14/28] Component structure

---
 .../components}/LeaderboardRow.tsx            |   0
 src/app/leaderboards/page.tsx                 |   2 +-
 src/app/runs/components/LiveRunNow.tsx        |  86 +++++++++++++++
 src/app/runs/components/StatCard.tsx          |  21 ++++
 src/app/runs/page.tsx                         | 103 +-----------------
 5 files changed, 110 insertions(+), 102 deletions(-)
 rename src/{components/app => app/leaderboards/components}/LeaderboardRow.tsx (100%)
 create mode 100644 src/app/runs/components/LiveRunNow.tsx
 create mode 100644 src/app/runs/components/StatCard.tsx

diff --git a/src/components/app/LeaderboardRow.tsx b/src/app/leaderboards/components/LeaderboardRow.tsx
similarity index 100%
rename from src/components/app/LeaderboardRow.tsx
rename to src/app/leaderboards/components/LeaderboardRow.tsx
diff --git a/src/app/leaderboards/page.tsx b/src/app/leaderboards/page.tsx
index 1d9f1ad..dc1aff7 100644
--- a/src/app/leaderboards/page.tsx
+++ b/src/app/leaderboards/page.tsx
@@ -23,7 +23,7 @@ import {
   PaginationPrevious,
 } from "@/components/ui/pagination";
 
-import LeaderboardRow from "@/components/app/LeaderboardRow";
+import LeaderboardRow from "@/app/leaderboards/components/LeaderboardRow";
 
 const globalLeaderboard = [
   {
diff --git a/src/app/runs/components/LiveRunNow.tsx b/src/app/runs/components/LiveRunNow.tsx
new file mode 100644
index 0000000..13e9919
--- /dev/null
+++ b/src/app/runs/components/LiveRunNow.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import { Eye } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { TableRow, TableCell } from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+export default function LiveRunRow({
+  index,
+  username,
+  problem,
+  category,
+  time,
+  pace,
+  status,
+}: any) {
+  const pacePositive = pace.startsWith("+");
+  const isTop = status === "pb";
+
+  return (
+    <TableRow
+      className={cn(
+        "opacity-0 animate-fade-in",
+        isTop ? "bg-primary/5 hover:bg-primary/10" : "hover:bg-secondary/50",
+      )}
+      style={{
+        animationDelay: `${index * 0.05}s`,
+        animationFillMode: "forwards",
+      }}
+    >
+      <TableCell className="font-medium pl-5">
+        {isTop ? `🔥 ${username}` : username}
+      </TableCell>
+
+      <TableCell>
+        <div className="flex flex-col gap-1">
+          <span>{problem}</span>
+          <Badge variant="outline" className="w-fit text-xs">
+            {category}
+          </Badge>
+        </div>
+      </TableCell>
+
+      <TableCell
+        className={`font-mono ${isTop ? "text-primary font-bold" : ""}`}
+      >
+        {time}
+      </TableCell>
+
+      <TableCell>
+        <Badge
+          className={
+            pacePositive
+              ? "bg-red-500/10 text-red-400"
+              : "bg-green-500/10 text-green-400"
+          }
+        >
+          {pace}
+        </Badge>
+      </TableCell>
+
+      <TableCell>
+        <div className="flex items-center gap-2 text-sm">
+          <span
+            className={`h-2 w-2 rounded-full ${
+              status === "pb"
+                ? "bg-green-500"
+                : status === "danger"
+                  ? "bg-red-500"
+                  : "bg-emerald-400"
+            }`}
+          />
+          Live
+        </div>
+      </TableCell>
+
+      <TableCell className="text-right pr-5">
+        <Button size="sm" variant={isTop ? "default" : "ghost"}>
+          <Eye className="h-4 w-4 mr-1" />
+          Watch
+        </Button>
+      </TableCell>
+    </TableRow>
+  );
+}
diff --git a/src/app/runs/components/StatCard.tsx b/src/app/runs/components/StatCard.tsx
new file mode 100644
index 0000000..963e918
--- /dev/null
+++ b/src/app/runs/components/StatCard.tsx
@@ -0,0 +1,21 @@
+import { Card, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function StatCard({
+  icon: Icon,
+  label,
+  value,
+}: {
+  icon: any;
+  label: string;
+  value: string;
+}) {
+  return (
+    <Card>
+      <CardHeader className="pb-2 text-center">
+        <Icon className="mx-auto h-5 w-5 text-primary" />
+        <CardTitle className="font-mono text-2xl">{value}</CardTitle>
+        <p className="text-xs text-muted-foreground">{label}</p>
+      </CardHeader>
+    </Card>
+  );
+}
diff --git a/src/app/runs/page.tsx b/src/app/runs/page.tsx
index 715bf28..6b91ca2 100644
--- a/src/app/runs/page.tsx
+++ b/src/app/runs/page.tsx
@@ -14,6 +14,8 @@ import {
   TableCell,
 } from "@/components/ui/table";
 import { cn } from "@/lib/utils";
+import LiveRunRow from "./components/LiveRunNow";
+import StatCard from "./components/StatCard";
 
 /* ---------------- mock data ---------------- */
 
@@ -121,104 +123,3 @@ export default function LiveRuns() {
     </div>
   );
 }
-
-function LiveRunRow({
-  index,
-  username,
-  problem,
-  category,
-  time,
-  pace,
-  status,
-}: any) {
-  const pacePositive = pace.startsWith("+");
-  const isTop = status === "pb";
-
-  return (
-    <TableRow
-      className={cn(
-        "opacity-0 animate-fade-in",
-        isTop ? "bg-primary/5 hover:bg-primary/10" : "hover:bg-secondary/50",
-      )}
-      style={{
-        animationDelay: `${index * 0.05}s`,
-        animationFillMode: "forwards",
-      }}
-    >
-      <TableCell className="font-medium pl-5">
-        {isTop ? `🔥 ${username}` : username}
-      </TableCell>
-
-      <TableCell>
-        <div className="flex flex-col gap-1">
-          <span>{problem}</span>
-          <Badge variant="outline" className="w-fit text-xs">
-            {category}
-          </Badge>
-        </div>
-      </TableCell>
-
-      <TableCell
-        className={`font-mono ${isTop ? "text-primary font-bold" : ""}`}
-      >
-        {time}
-      </TableCell>
-
-      <TableCell>
-        <Badge
-          className={
-            pacePositive
-              ? "bg-red-500/10 text-red-400"
-              : "bg-green-500/10 text-green-400"
-          }
-        >
-          {pace}
-        </Badge>
-      </TableCell>
-
-      <TableCell>
-        <div className="flex items-center gap-2 text-sm">
-          <span
-            className={`h-2 w-2 rounded-full ${
-              status === "pb"
-                ? "bg-green-500"
-                : status === "danger"
-                  ? "bg-red-500"
-                  : "bg-emerald-400"
-            }`}
-          />
-          Live
-        </div>
-      </TableCell>
-
-      <TableCell className="text-right pr-5">
-        <Button size="sm" variant={isTop ? "default" : "ghost"}>
-          <Eye className="h-4 w-4 mr-1" />
-          Watch
-        </Button>
-      </TableCell>
-    </TableRow>
-  );
-}
-
-/* ---------------- helpers ---------------- */
-
-function StatCard({
-  icon: Icon,
-  label,
-  value,
-}: {
-  icon: any;
-  label: string;
-  value: string;
-}) {
-  return (
-    <Card>
-      <CardHeader className="pb-2 text-center">
-        <Icon className="mx-auto h-5 w-5 text-primary" />
-        <CardTitle className="font-mono text-2xl">{value}</CardTitle>
-        <p className="text-xs text-muted-foreground">{label}</p>
-      </CardHeader>
-    </Card>
-  );
-}

From 4003dc7d2384eb35cec10e7830ce08b1350fcceb Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 15:04:34 +0100
Subject: [PATCH 15/28] Statcard

---
 src/app/leaderboards/page.tsx                 | 35 +++++--------------
 src/app/runs/page.tsx                         | 10 +++---
 .../app/CenterStatCard.tsx}                   |  4 +--
 3 files changed, 16 insertions(+), 33 deletions(-)
 rename src/{app/runs/components/StatCard.tsx => components/app/CenterStatCard.tsx} (76%)

diff --git a/src/app/leaderboards/page.tsx b/src/app/leaderboards/page.tsx
index dc1aff7..87dea58 100644
--- a/src/app/leaderboards/page.tsx
+++ b/src/app/leaderboards/page.tsx
@@ -24,6 +24,7 @@ import {
 } from "@/components/ui/pagination";
 
 import LeaderboardRow from "@/app/leaderboards/components/LeaderboardRow";
+import CenterStatCard from "@/components/app/CenterStatCard";
 
 const globalLeaderboard = [
   {
@@ -190,10 +191,14 @@ export default function Leaderboards() {
 
         {/* Stats */}
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <StatCard icon={Globe} label="Total Runners" value="12,453" />
-          <StatCard icon={Trophy} label="World Record" value="2:34.21" />
-          <StatCard icon={TrendingUp} label="Runs This Week" value="847K" />
-          <StatCard icon={Calendar} label="Until Reset" value="5d 12h" />
+          <CenterStatCard icon={Globe} label="Total Runners" value="12,453" />
+          <CenterStatCard icon={Trophy} label="World Record" value="2:34.21" />
+          <CenterStatCard
+            icon={TrendingUp}
+            label="Runs This Week"
+            value="847K"
+          />
+          <CenterStatCard icon={Calendar} label="Until Reset" value="5d 12h" />
         </div>
 
         {/* Tabs + Filters */}
@@ -269,25 +274,3 @@ export default function Leaderboards() {
     </div>
   );
 }
-
-/* ---------- helpers ---------- */
-
-function StatCard({
-  icon: Icon,
-  label,
-  value,
-}: {
-  icon: any;
-  label: string;
-  value: string;
-}) {
-  return (
-    <Card>
-      <CardHeader className="pb-2 text-center">
-        <Icon className="mx-auto h-5 w-5 text-primary" />
-        <CardTitle className="font-mono text-2xl">{value}</CardTitle>
-        <p className="text-xs text-muted-foreground">{label}</p>
-      </CardHeader>
-    </Card>
-  );
-}
diff --git a/src/app/runs/page.tsx b/src/app/runs/page.tsx
index 6b91ca2..8fdca08 100644
--- a/src/app/runs/page.tsx
+++ b/src/app/runs/page.tsx
@@ -15,7 +15,7 @@ import {
 } from "@/components/ui/table";
 import { cn } from "@/lib/utils";
 import LiveRunRow from "./components/LiveRunNow";
-import StatCard from "./components/StatCard";
+import CenterStatCard from "@/components/app/CenterStatCard";
 
 /* ---------------- mock data ---------------- */
 
@@ -81,10 +81,10 @@ export default function LiveRuns() {
 
         {/* Stats */}
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <StatCard icon={Zap} label="Live Runs" value="42" />
-          <StatCard icon={Users} label="Active Runners" value="39" />
-          <StatCard icon={Timer} label="Avg Runtime" value="1:47" />
-          <StatCard icon={TrendingUp} label="PB Pace Runs" value="7" />
+          <CenterStatCard icon={Zap} label="Live Runs" value="42" />
+          <CenterStatCard icon={Users} label="Active Runners" value="39" />
+          <CenterStatCard icon={Timer} label="Avg Runtime" value="1:47" />
+          <CenterStatCard icon={TrendingUp} label="PB Pace Runs" value="7" />
         </div>
 
         {/* Filters */}
diff --git a/src/app/runs/components/StatCard.tsx b/src/components/app/CenterStatCard.tsx
similarity index 76%
rename from src/app/runs/components/StatCard.tsx
rename to src/components/app/CenterStatCard.tsx
index 963e918..db47525 100644
--- a/src/app/runs/components/StatCard.tsx
+++ b/src/components/app/CenterStatCard.tsx
@@ -1,6 +1,6 @@
-import { Card, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
-export default function StatCard({
+export default function CenterStatCard({
   icon: Icon,
   label,
   value,

From 5ea19d106c1c29f9e52c3727fc72307602579690 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 15:08:25 +0100
Subject: [PATCH 16/28] Run components

---
 src/app/problems/components/RunChat.tsx  | 48 +++++++++++++++
 src/app/problems/components/RunTimer.tsx | 24 ++++++++
 src/app/run/page.tsx                     | 74 +-----------------------
 3 files changed, 75 insertions(+), 71 deletions(-)
 create mode 100644 src/app/problems/components/RunChat.tsx
 create mode 100644 src/app/problems/components/RunTimer.tsx

diff --git a/src/app/problems/components/RunChat.tsx b/src/app/problems/components/RunChat.tsx
new file mode 100644
index 0000000..9516d3b
--- /dev/null
+++ b/src/app/problems/components/RunChat.tsx
@@ -0,0 +1,48 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+
+export type ChatMessage = {
+  user: string;
+  message: string;
+  time: string;
+};
+
+export default function RunChat({
+  chatMessages,
+}: {
+  chatMessages: ChatMessage[];
+}) {
+  return (
+    <Card className="flex flex-col flex-1">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base">Chat</CardTitle>
+          <span className="text-xs text-muted-foreground">
+            {chatMessages.length} messages
+          </span>
+        </div>
+      </CardHeader>
+
+      <Separator />
+
+      <CardContent className="flex flex-col flex-1 gap-3">
+        {/* Messages */}
+        <div className="flex-1 overflow-y-auto space-y-2">
+          {chatMessages.map((msg, i) => (
+            <div key={i} className="rounded-lg bg-secondary/50 p-2 text-sm">
+              <span className="font-semibold text-foreground">{msg.user}</span>:{" "}
+              <span className="text-muted-foreground">{msg.message}</span>
+              <span className="ml-2 text-xs text-muted-foreground">
+                {msg.time}
+              </span>
+            </div>
+          ))}
+        </div>
+
+        {/* Input */}
+        <Input placeholder="Type a message…" />
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/app/problems/components/RunTimer.tsx b/src/app/problems/components/RunTimer.tsx
new file mode 100644
index 0000000..8a5c5d1
--- /dev/null
+++ b/src/app/problems/components/RunTimer.tsx
@@ -0,0 +1,24 @@
+import { Card, CardContent } from "@/components/ui/card";
+
+export type RunInfo = {
+  category: "any%" | "100%";
+  problems: number;
+  currentAttempt: number;
+  pbTime: string;
+  worldRecord: string;
+};
+
+export default function RunTimer({ runInfo }: { runInfo: RunInfo }) {
+  return (
+    <Card className="relative text-center overflow-hidden">
+      <div className="absolute inset-0 bg-linear-to-b from-primary/5 to-transparent pointer-events-none" />
+      <CardContent className="relative">
+        <p className="timer-display text-primary text-4xl font-bold">1:52.34</p>
+        <p className="mt-2 font-mono text-sm text-muted-foreground">
+          PB: {runInfo.pbTime} | Diff:{" "}
+          <span className="text-red-400">+0:12</span>
+        </p>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/app/run/page.tsx b/src/app/run/page.tsx
index d7fe3df..5bf9146 100644
--- a/src/app/run/page.tsx
+++ b/src/app/run/page.tsx
@@ -4,23 +4,9 @@ import { FileTree } from "@sinm/react-file-tree";
 import CodeMirror, { EditorState } from "@uiw/react-codemirror";
 import { vscodeDark } from "@uiw/codemirror-theme-vscode";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator";
-
-type RunInfo = {
-  category: "any%" | "100%";
-  problems: number;
-  currentAttempt: number;
-  pbTime: string;
-  worldRecord: string;
-};
-
-type ChatMessage = {
-  user: string;
-  message: string;
-  time: string;
-};
+import { Card, CardContent } from "@/components/ui/card";
+import RunTimer, { RunInfo } from "../problems/components/RunTimer";
+import RunChat, { ChatMessage } from "../problems/components/RunChat";
 
 export default function Run() {
   const runInfo: RunInfo = {
@@ -95,57 +81,3 @@ export default function Run() {
     </div>
   );
 }
-
-/* ---------------- Timer ---------------- */
-
-function RunTimer({ runInfo }: { runInfo: RunInfo }) {
-  return (
-    <Card className="relative text-center overflow-hidden">
-      <div className="absolute inset-0 bg-linear-to-b from-primary/5 to-transparent pointer-events-none" />
-      <CardContent className="relative">
-        <p className="timer-display text-primary text-4xl font-bold">1:52.34</p>
-        <p className="mt-2 font-mono text-sm text-muted-foreground">
-          PB: {runInfo.pbTime} | Diff:{" "}
-          <span className="text-red-400">+0:12</span>
-        </p>
-      </CardContent>
-    </Card>
-  );
-}
-
-/* ---------------- Chat ---------------- */
-
-function RunChat({ chatMessages }: { chatMessages: ChatMessage[] }) {
-  return (
-    <Card className="flex flex-col flex-1">
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <CardTitle className="text-base">Chat</CardTitle>
-          <span className="text-xs text-muted-foreground">
-            {chatMessages.length} messages
-          </span>
-        </div>
-      </CardHeader>
-
-      <Separator />
-
-      <CardContent className="flex flex-col flex-1 gap-3">
-        {/* Messages */}
-        <div className="flex-1 overflow-y-auto space-y-2">
-          {chatMessages.map((msg, i) => (
-            <div key={i} className="rounded-lg bg-secondary/50 p-2 text-sm">
-              <span className="font-semibold text-foreground">{msg.user}</span>:{" "}
-              <span className="text-muted-foreground">{msg.message}</span>
-              <span className="ml-2 text-xs text-muted-foreground">
-                {msg.time}
-              </span>
-            </div>
-          ))}
-        </div>
-
-        {/* Input */}
-        <Input placeholder="Type a message…" />
-      </CardContent>
-    </Card>
-  );
-}

From ebb8e7e872e062c5b3b0b124521d26d0253947b3 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 15:13:02 +0100
Subject: [PATCH 17/28] Problems components

---
 .../problems/components}/ProblemCard.tsx      |  0
 src/app/problems/page.tsx                     |  2 +-
 .../{problems => run}/components/RunChat.tsx  |  0
 .../{problems => run}/components/RunTimer.tsx |  0
 src/app/run/page.tsx                          |  4 +-
 src/components/app/SplitRow.tsx               | 66 -------------------
 6 files changed, 3 insertions(+), 69 deletions(-)
 rename src/{components/app => app/problems/components}/ProblemCard.tsx (100%)
 rename src/app/{problems => run}/components/RunChat.tsx (100%)
 rename src/app/{problems => run}/components/RunTimer.tsx (100%)
 delete mode 100644 src/components/app/SplitRow.tsx

diff --git a/src/components/app/ProblemCard.tsx b/src/app/problems/components/ProblemCard.tsx
similarity index 100%
rename from src/components/app/ProblemCard.tsx
rename to src/app/problems/components/ProblemCard.tsx
diff --git a/src/app/problems/page.tsx b/src/app/problems/page.tsx
index 57764bd..35b15cd 100644
--- a/src/app/problems/page.tsx
+++ b/src/app/problems/page.tsx
@@ -3,7 +3,7 @@
 import { Search, Grid, List } from "lucide-react";
 import { useState } from "react";
 
-import ProblemCard from "@/components/app/ProblemCard";
+import ProblemCard from "@/app/problems/components/ProblemCard";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
diff --git a/src/app/problems/components/RunChat.tsx b/src/app/run/components/RunChat.tsx
similarity index 100%
rename from src/app/problems/components/RunChat.tsx
rename to src/app/run/components/RunChat.tsx
diff --git a/src/app/problems/components/RunTimer.tsx b/src/app/run/components/RunTimer.tsx
similarity index 100%
rename from src/app/problems/components/RunTimer.tsx
rename to src/app/run/components/RunTimer.tsx
diff --git a/src/app/run/page.tsx b/src/app/run/page.tsx
index 5bf9146..52e573a 100644
--- a/src/app/run/page.tsx
+++ b/src/app/run/page.tsx
@@ -5,8 +5,8 @@ import CodeMirror, { EditorState } from "@uiw/react-codemirror";
 import { vscodeDark } from "@uiw/codemirror-theme-vscode";
 
 import { Card, CardContent } from "@/components/ui/card";
-import RunTimer, { RunInfo } from "../problems/components/RunTimer";
-import RunChat, { ChatMessage } from "../problems/components/RunChat";
+import RunTimer, { RunInfo } from "./components/RunTimer";
+import RunChat, { ChatMessage } from "./components/RunChat";
 
 export default function Run() {
   const runInfo: RunInfo = {
diff --git a/src/components/app/SplitRow.tsx b/src/components/app/SplitRow.tsx
deleted file mode 100644
index 9762457..0000000
--- a/src/components/app/SplitRow.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Check, Minus } from "lucide-react";
-
-interface SplitRowProps {
-  problemName: string;
-  splitTime: string;
-  delta?: string;
-  isCompleted: boolean;
-  isCurrent?: boolean;
-  pbTime?: string;
-}
-
-const SplitRow = ({ problemName, splitTime, delta, isCompleted, isCurrent, pbTime }: SplitRowProps) => {
-  const getDeltaColor = (delta?: string) => {
-    if (!delta) return "text-muted-foreground";
-    if (delta.startsWith("-")) return "text-emerald-400";
-    if (delta.startsWith("+")) return "text-red-400";
-    return "text-muted-foreground";
-  };
-
-  return (
-    <div 
-      className={`flex items-center justify-between py-3 px-4 rounded-lg transition-all duration-300 ${
-        isCurrent 
-          ? 'bg-primary/10 border border-primary/30' 
-          : isCompleted 
-            ? 'bg-secondary/50' 
-            : 'bg-card'
-      }`}
-    >
-      <div className="flex items-center gap-3">
-        {/* Status indicator */}
-        <div className={`w-6 h-6 rounded-full flex items-center justify-center ${
-          isCompleted 
-            ? 'bg-emerald-500/20 text-emerald-400' 
-            : isCurrent 
-              ? 'bg-primary/20 text-primary pulse-live' 
-              : 'bg-secondary text-muted-foreground'
-        }`}>
-          {isCompleted ? <Check className="h-3.5 w-3.5" /> : <Minus className="h-3.5 w-3.5" />}
-        </div>
-        
-        <span className={`font-medium ${isCurrent ? 'text-primary' : isCompleted ? 'text-foreground' : 'text-muted-foreground'}`}>
-          {problemName}
-        </span>
-      </div>
-
-      <div className="flex items-center gap-4">
-        {/* Delta */}
-        {isCompleted && delta && (
-          <span className={`split-time ${getDeltaColor(delta)}`}>
-            {delta}
-          </span>
-        )}
-        
-        {/* Split time */}
-        <span className={`split-time min-w-[70px] text-right ${
-          isCompleted ? 'text-foreground' : 'text-muted-foreground'
-        }`}>
-          {isCompleted ? splitTime : pbTime || '--:--'}
-        </span>
-      </div>
-    </div>
-  );
-};
-
-export default SplitRow;

From 8d26cb8561d716722de152286d1a23992e798a58 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 15:17:51 +0100
Subject: [PATCH 18/28] Profile stat card

---
 src/app/leaderboards/page.tsx                 | 14 ++----
 .../profile/components/ProfileStatCard.tsx    | 46 +++++++++++++++++++
 src/app/profile/page.tsx                      | 10 ++--
 src/app/runs/page.tsx                         | 10 ++--
 src/components/app/CenterStatCard.tsx         | 21 ---------
 src/components/app/StatCard.tsx               | 46 +++++++------------
 6 files changed, 77 insertions(+), 70 deletions(-)
 create mode 100644 src/app/profile/components/ProfileStatCard.tsx
 delete mode 100644 src/components/app/CenterStatCard.tsx

diff --git a/src/app/leaderboards/page.tsx b/src/app/leaderboards/page.tsx
index 87dea58..80d7067 100644
--- a/src/app/leaderboards/page.tsx
+++ b/src/app/leaderboards/page.tsx
@@ -24,7 +24,7 @@ import {
 } from "@/components/ui/pagination";
 
 import LeaderboardRow from "@/app/leaderboards/components/LeaderboardRow";
-import CenterStatCard from "@/components/app/CenterStatCard";
+import StatCard from "@/components/app/StatCard";
 
 const globalLeaderboard = [
   {
@@ -191,14 +191,10 @@ export default function Leaderboards() {
 
         {/* Stats */}
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <CenterStatCard icon={Globe} label="Total Runners" value="12,453" />
-          <CenterStatCard icon={Trophy} label="World Record" value="2:34.21" />
-          <CenterStatCard
-            icon={TrendingUp}
-            label="Runs This Week"
-            value="847K"
-          />
-          <CenterStatCard icon={Calendar} label="Until Reset" value="5d 12h" />
+          <StatCard icon={Globe} label="Total Runners" value="12,453" />
+          <StatCard icon={Trophy} label="World Record" value="2:34.21" />
+          <StatCard icon={TrendingUp} label="Runs This Week" value="847K" />
+          <StatCard icon={Calendar} label="Until Reset" value="5d 12h" />
         </div>
 
         {/* Tabs + Filters */}
diff --git a/src/app/profile/components/ProfileStatCard.tsx b/src/app/profile/components/ProfileStatCard.tsx
new file mode 100644
index 0000000..23c438e
--- /dev/null
+++ b/src/app/profile/components/ProfileStatCard.tsx
@@ -0,0 +1,46 @@
+import { LucideIcon } from "lucide-react";
+
+interface StatCardProps {
+  label: string;
+  value: string;
+  icon: LucideIcon;
+  trend?: string;
+  index?: number;
+}
+
+export default function ProfileStatCard({
+  label,
+  value,
+  icon: Icon,
+  trend,
+  index = 0,
+}: StatCardProps) {
+  return (
+    <div
+      className="bg-card border border-border rounded-xl p-5 card-hover animate-fade-in opacity-0"
+      style={{
+        animationDelay: `${index * 0.1}s`,
+        animationFillMode: "forwards",
+      }}
+    >
+      <div className="flex items-start justify-between mb-3">
+        <div className="p-2 rounded-lg bg-primary/10">
+          <Icon className="h-5 w-5 text-primary" />
+        </div>
+        {trend && (
+          <span
+            className={`text-xs font-medium ${
+              trend.startsWith("+")
+                ? "text-emerald-400"
+                : "text-muted-foreground"
+            }`}
+          >
+            {trend}
+          </span>
+        )}
+      </div>
+      <p className="text-2xl font-bold text-foreground font-mono">{value}</p>
+      <p className="text-sm text-muted-foreground mt-1">{label}</p>
+    </div>
+  );
+}
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 879b001..1b4411f 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -7,7 +7,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 
-import StatCard from "@/components/app/StatCard";
+import ProfileStatCard from "@/app/profile/components/ProfileStatCard";
 
 export default function Profile() {
   const user = {
@@ -64,26 +64,26 @@ export default function Profile() {
 
         {/* Stats */}
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <StatCard
+          <ProfileStatCard
             label="Total Runs"
             value={user.totalRuns.toLocaleString()}
             icon={Zap}
             index={0}
           />
-          <StatCard
+          <ProfileStatCard
             label="Clean Runs"
             value={user.cleanRuns.toString()}
             icon={Target}
             trend="+12 this week"
             index={1}
           />
-          <StatCard
+          <ProfileStatCard
             label="Global Rank"
             value={`#${user.rank}`}
             icon={Trophy}
             index={2}
           />
-          <StatCard
+          <ProfileStatCard
             label="Avg Time"
             value={user.avgTime}
             icon={Timer}
diff --git a/src/app/runs/page.tsx b/src/app/runs/page.tsx
index 8fdca08..b1655da 100644
--- a/src/app/runs/page.tsx
+++ b/src/app/runs/page.tsx
@@ -15,7 +15,7 @@ import {
 } from "@/components/ui/table";
 import { cn } from "@/lib/utils";
 import LiveRunRow from "./components/LiveRunNow";
-import CenterStatCard from "@/components/app/CenterStatCard";
+import StatCard from "@/components/app/StatCard";
 
 /* ---------------- mock data ---------------- */
 
@@ -81,10 +81,10 @@ export default function LiveRuns() {
 
         {/* Stats */}
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <CenterStatCard icon={Zap} label="Live Runs" value="42" />
-          <CenterStatCard icon={Users} label="Active Runners" value="39" />
-          <CenterStatCard icon={Timer} label="Avg Runtime" value="1:47" />
-          <CenterStatCard icon={TrendingUp} label="PB Pace Runs" value="7" />
+          <StatCard icon={Zap} label="Live Runs" value="42" />
+          <StatCard icon={Users} label="Active Runners" value="39" />
+          <StatCard icon={Timer} label="Avg Runtime" value="1:47" />
+          <StatCard icon={TrendingUp} label="PB Pace Runs" value="7" />
         </div>
 
         {/* Filters */}
diff --git a/src/components/app/CenterStatCard.tsx b/src/components/app/CenterStatCard.tsx
deleted file mode 100644
index db47525..0000000
--- a/src/components/app/CenterStatCard.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-
-export default function CenterStatCard({
-  icon: Icon,
-  label,
-  value,
-}: {
-  icon: any;
-  label: string;
-  value: string;
-}) {
-  return (
-    <Card>
-      <CardHeader className="pb-2 text-center">
-        <Icon className="mx-auto h-5 w-5 text-primary" />
-        <CardTitle className="font-mono text-2xl">{value}</CardTitle>
-        <p className="text-xs text-muted-foreground">{label}</p>
-      </CardHeader>
-    </Card>
-  );
-}
diff --git a/src/components/app/StatCard.tsx b/src/components/app/StatCard.tsx
index ada35c5..963e918 100644
--- a/src/components/app/StatCard.tsx
+++ b/src/components/app/StatCard.tsx
@@ -1,35 +1,21 @@
-import { LucideIcon } from "lucide-react";
+import { Card, CardHeader, CardTitle } from "@/components/ui/card";
 
-interface StatCardProps {
+export default function StatCard({
+  icon: Icon,
+  label,
+  value,
+}: {
+  icon: any;
   label: string;
   value: string;
-  icon: LucideIcon;
-  trend?: string;
-  index?: number;
-}
-
-const StatCard = ({ label, value, icon: Icon, trend, index = 0 }: StatCardProps) => {
+}) {
   return (
-    <div 
-      className="bg-card border border-border rounded-xl p-5 card-hover animate-fade-in opacity-0"
-      style={{ animationDelay: `${index * 0.1}s`, animationFillMode: 'forwards' }}
-    >
-      <div className="flex items-start justify-between mb-3">
-        <div className="p-2 rounded-lg bg-primary/10">
-          <Icon className="h-5 w-5 text-primary" />
-        </div>
-        {trend && (
-          <span className={`text-xs font-medium ${
-            trend.startsWith('+') ? 'text-emerald-400' : 'text-muted-foreground'
-          }`}>
-            {trend}
-          </span>
-        )}
-      </div>
-      <p className="text-2xl font-bold text-foreground font-mono">{value}</p>
-      <p className="text-sm text-muted-foreground mt-1">{label}</p>
-    </div>
+    <Card>
+      <CardHeader className="pb-2 text-center">
+        <Icon className="mx-auto h-5 w-5 text-primary" />
+        <CardTitle className="font-mono text-2xl">{value}</CardTitle>
+        <p className="text-xs text-muted-foreground">{label}</p>
+      </CardHeader>
+    </Card>
   );
-};
-
-export default StatCard;
+}

From 05c1307ad713d09dfc26b222ff3f2bba74c539d0 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 15:23:37 +0100
Subject: [PATCH 19/28] Stat card animations

---
 src/app/leaderboards/page.tsx   | 28 ++++++++++++++++++++++++----
 src/app/runs/page.tsx           | 13 +++++++++----
 src/components/app/StatCard.tsx | 10 +++++++++-
 3 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/src/app/leaderboards/page.tsx b/src/app/leaderboards/page.tsx
index 80d7067..d43b4f8 100644
--- a/src/app/leaderboards/page.tsx
+++ b/src/app/leaderboards/page.tsx
@@ -191,10 +191,30 @@ export default function Leaderboards() {
 
         {/* Stats */}
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <StatCard icon={Globe} label="Total Runners" value="12,453" />
-          <StatCard icon={Trophy} label="World Record" value="2:34.21" />
-          <StatCard icon={TrendingUp} label="Runs This Week" value="847K" />
-          <StatCard icon={Calendar} label="Until Reset" value="5d 12h" />
+          <StatCard
+            icon={Globe}
+            label="Total Runners"
+            value="12,453"
+            index={0}
+          />
+          <StatCard
+            icon={Trophy}
+            label="World Record"
+            value="2:34.21"
+            index={1}
+          />
+          <StatCard
+            icon={TrendingUp}
+            label="Runs This Week"
+            value="847K"
+            index={2}
+          />
+          <StatCard
+            icon={Calendar}
+            label="Until Reset"
+            value="5d 12h"
+            index={3}
+          />
         </div>
 
         {/* Tabs + Filters */}
diff --git a/src/app/runs/page.tsx b/src/app/runs/page.tsx
index b1655da..7ba7a3c 100644
--- a/src/app/runs/page.tsx
+++ b/src/app/runs/page.tsx
@@ -81,10 +81,15 @@ export default function LiveRuns() {
 
         {/* Stats */}
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <StatCard icon={Zap} label="Live Runs" value="42" />
-          <StatCard icon={Users} label="Active Runners" value="39" />
-          <StatCard icon={Timer} label="Avg Runtime" value="1:47" />
-          <StatCard icon={TrendingUp} label="PB Pace Runs" value="7" />
+          <StatCard icon={Zap} label="Live Runs" value="42" index={0} />
+          <StatCard icon={Users} label="Active Runners" value="39" index={1} />
+          <StatCard icon={Timer} label="Avg Runtime" value="1:47" index={2} />
+          <StatCard
+            icon={TrendingUp}
+            label="PB Pace Runs"
+            value="7"
+            index={3}
+          />
         </div>
 
         {/* Filters */}
diff --git a/src/components/app/StatCard.tsx b/src/components/app/StatCard.tsx
index 963e918..9fb77d2 100644
--- a/src/components/app/StatCard.tsx
+++ b/src/components/app/StatCard.tsx
@@ -4,13 +4,21 @@ export default function StatCard({
   icon: Icon,
   label,
   value,
+  index = 0,
 }: {
   icon: any;
   label: string;
   value: string;
+  index?: number;
 }) {
   return (
-    <Card>
+    <Card
+      className="opacity-0 animate-fade-in"
+      style={{
+        animationDelay: `${index * 0.1}s`,
+        animationFillMode: "forwards",
+      }}
+    >
       <CardHeader className="pb-2 text-center">
         <Icon className="mx-auto h-5 w-5 text-primary" />
         <CardTitle className="font-mono text-2xl">{value}</CardTitle>

From 9af328eb6b3bce86a0450450ee0a08ce2c318eb8 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 15:27:57 +0100
Subject: [PATCH 20/28] Stat card hover animations and problem card quick run

---
 src/app/globals.css                         |  1 -
 src/app/problems/components/ProblemCard.tsx | 28 +++++++++++++++------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 94ebdb5..9b4f79b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -215,7 +215,6 @@
   }
 
   .card-hover:hover {
-    @apply -translate-y-1;
     box-shadow: 0 10px 40px color-mix(in oklch, var(--primary) 15%, transparent);
   }
 
diff --git a/src/app/problems/components/ProblemCard.tsx b/src/app/problems/components/ProblemCard.tsx
index 60481d2..f15dc44 100644
--- a/src/app/problems/components/ProblemCard.tsx
+++ b/src/app/problems/components/ProblemCard.tsx
@@ -9,7 +9,14 @@ interface ProblemCardProps {
   index?: number;
 }
 
-const ProblemCard = ({ name, difficulty, tags, bestTime, attempts, index = 0 }: ProblemCardProps) => {
+const ProblemCard = ({
+  name,
+  difficulty,
+  tags,
+  bestTime,
+  attempts,
+  index = 0,
+}: ProblemCardProps) => {
   const difficultyStyles = {
     easy: "diff-easy",
     medium: "diff-medium",
@@ -23,20 +30,25 @@ const ProblemCard = ({ name, difficulty, tags, bestTime, attempts, index = 0 }:
   };
 
   return (
-    <div 
+    <div
       className={`group relative bg-card border border-border rounded-xl p-5 card-hover cursor-pointer animate-fade-in opacity-0`}
-      style={{ animationDelay: `${index * 0.1}s`, animationFillMode: 'forwards' }}
+      style={{
+        animationDelay: `${index * 0.1}s`,
+        animationFillMode: "forwards",
+      }}
     >
       {/* Glow effect on hover */}
       <div className="absolute inset-0 rounded-xl bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-      
+
       <div className="relative">
         {/* Header */}
         <div className="flex items-start justify-between mb-3">
           <h3 className="font-semibold text-foreground group-hover:text-primary transition-colors">
             {name}
           </h3>
-          <span className={`px-2 py-1 rounded-md text-xs font-medium ${difficultyStyles[difficulty]}`}>
+          <span
+            className={`px-2 py-1 rounded-md text-xs font-medium ${difficultyStyles[difficulty]}`}
+          >
             {difficultyLabels[difficulty]}
           </span>
         </div>
@@ -44,8 +56,8 @@ const ProblemCard = ({ name, difficulty, tags, bestTime, attempts, index = 0 }:
         {/* Tags */}
         <div className="flex flex-wrap gap-2 mb-4">
           {tags.map((tag) => (
-            <span 
-              key={tag} 
+            <span
+              key={tag}
               className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs"
             >
               {tag}
@@ -68,7 +80,7 @@ const ProblemCard = ({ name, difficulty, tags, bestTime, attempts, index = 0 }:
         </div>
 
         {/* Quick run button - appears on hover */}
-        <div className="absolute top-1/2 right-4 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-2 group-hover:translate-x-0">
+        <div className="absolute bottom-0 right-0 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-2 group-hover:translate-x-0">
           <button className="p-2 rounded-lg bg-primary text-primary-foreground">
             <Zap className="h-4 w-4" />
           </button>

From b80a3be82da03bf56b849596d2d98547e87f47b6 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 15:56:02 +0100
Subject: [PATCH 21/28] Better file tree

---
 package-lock.json                   | 61 +----------------------------
 package.json                        |  1 -
 src/app/run/components/FileTree.tsx | 60 ++++++++++++++++++++++++++++
 src/app/run/page.tsx                | 18 ++++++---
 4 files changed, 74 insertions(+), 66 deletions(-)
 create mode 100644 src/app/run/components/FileTree.tsx

diff --git a/package-lock.json b/package-lock.json
index 08d0f02..0240847 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,7 +35,6 @@
         "@radix-ui/react-toggle": "^1.1.9",
         "@radix-ui/react-toggle-group": "^1.1.10",
         "@radix-ui/react-tooltip": "^1.2.7",
-        "@sinm/react-file-tree": "^1.1.1",
         "@uiw/codemirror-theme-vscode": "^4.25.4",
         "@uiw/react-codemirror": "^4.25.4",
         "class-variance-authority": "^0.7.1",
@@ -2745,16 +2744,6 @@
       "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
       "license": "MIT"
     },
-    "node_modules/@sinm/react-file-tree": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@sinm/react-file-tree/-/react-file-tree-1.1.1.tgz",
-      "integrity": "sha512-XlHLLNV18zWx7mYEH5gtlBb7jYFX7GaBA5jmhsG9YXhgwyyK33JgymrbU+IHDDBakAoZ+xISLKzu2ldzKbA/wg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/react-virtualized": "^9.21.15",
-        "react-virtualized": "^9.22.3"
-      }
-    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -3108,16 +3097,11 @@
         "undici-types": "~6.21.0"
       }
     },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.15",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
-      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-      "license": "MIT"
-    },
     "node_modules/@types/react": {
       "version": "19.2.10",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz",
       "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -3133,16 +3117,6 @@
         "@types/react": "^19.2.0"
       }
     },
-    "node_modules/@types/react-virtualized": {
-      "version": "9.22.3",
-      "resolved": "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.22.3.tgz",
-      "integrity": "sha512-UKRWeBIrECaKhE4O//TSFhlgwntMwyiEIOA7WZoVkr52Jahv0dH6YIOorqc358N2V3oKFclsq5XxPmx2PiYB5A==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/prop-types": "*",
-        "@types/react": "*"
-      }
-    },
     "node_modules/@uiw/codemirror-extensions-basic-setup": {
       "version": "4.25.4",
       "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.25.4.tgz",
@@ -4326,12 +4300,6 @@
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "license": "MIT"
     },
-    "node_modules/react-lifecycles-compat": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
-      "license": "MIT"
-    },
     "node_modules/react-remove-scroll": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
@@ -4432,33 +4400,6 @@
         "react-dom": ">=16.6.0"
       }
     },
-    "node_modules/react-virtualized": {
-      "version": "9.22.6",
-      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.6.tgz",
-      "integrity": "sha512-U5j7KuUQt3AaMatlMJ0UJddqSiX+Km0YJxSqbAzIiGw5EmNz0khMyqP2hzgu4+QUtm+QPIrxzUX4raJxmVJnHg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.7.2",
-        "clsx": "^1.0.4",
-        "dom-helpers": "^5.1.3",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.7.2",
-        "react-lifecycles-compat": "^3.0.4"
-      },
-      "peerDependencies": {
-        "react": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/react-virtualized/node_modules/clsx": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
-      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/recharts": {
       "version": "2.15.4",
       "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.4.tgz",
diff --git a/package.json b/package.json
index cc7a044..db0abb3 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,6 @@
     "@radix-ui/react-toggle": "^1.1.9",
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.2.7",
-    "@sinm/react-file-tree": "^1.1.1",
     "@uiw/codemirror-theme-vscode": "^4.25.4",
     "@uiw/react-codemirror": "^4.25.4",
     "class-variance-authority": "^0.7.1",
diff --git a/src/app/run/components/FileTree.tsx b/src/app/run/components/FileTree.tsx
new file mode 100644
index 0000000..4bd23e7
--- /dev/null
+++ b/src/app/run/components/FileTree.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { useState } from "react";
+import { Folder, FolderMinus, FolderPlus, File } from "lucide-react";
+
+type TreeNode = {
+  type: "directory" | "file";
+  uri: string;
+  children?: TreeNode[];
+};
+
+interface FileTreeProps {
+  tree: TreeNode;
+  level?: number; // for indentation
+}
+
+export const FileTree: React.FC<FileTreeProps> = ({ tree, level = 0 }) => {
+  const [expanded, setExpanded] = useState(
+    tree.type !== "directory" || level === 0 ? true : false,
+  );
+
+  const toggleExpand = () => {
+    if (tree.type === "directory") {
+      setExpanded(!expanded);
+    }
+  };
+
+  return (
+    <div>
+      {/* Directory/File Row */}
+      <div
+        onClick={toggleExpand}
+        style={{
+          paddingLeft: level * 20,
+          display: "flex",
+          alignItems: "center",
+          cursor: tree.type === "directory" ? "pointer" : "default",
+          userSelect: "none",
+        }}
+      >
+        {tree.type === "directory" ? (
+          expanded ? (
+            <FolderMinus size={16} className="mr-2" />
+          ) : (
+            <FolderPlus size={16} className="mr-2" />
+          )
+        ) : (
+          <File size={16} className="mr-2" />
+        )}
+        {tree.uri}
+      </div>
+
+      {/* Children */}
+      {expanded &&
+        tree.children?.map((child) => (
+          <FileTree key={child.uri} tree={child} level={level + 1} />
+        ))}
+    </div>
+  );
+};
diff --git a/src/app/run/page.tsx b/src/app/run/page.tsx
index 52e573a..2e86e67 100644
--- a/src/app/run/page.tsx
+++ b/src/app/run/page.tsx
@@ -1,12 +1,14 @@
 "use client";
 
-import { FileTree } from "@sinm/react-file-tree";
 import CodeMirror, { EditorState } from "@uiw/react-codemirror";
 import { vscodeDark } from "@uiw/codemirror-theme-vscode";
 
 import { Card, CardContent } from "@/components/ui/card";
 import RunTimer, { RunInfo } from "./components/RunTimer";
 import RunChat, { ChatMessage } from "./components/RunChat";
+import { useState } from "react";
+import { FileTree } from "./components/FileTree";
+import { File } from "lucide-react";
 
 export default function Run() {
   const runInfo: RunInfo = {
@@ -34,16 +36,22 @@ export default function Run() {
               tree={{
                 type: "directory",
                 uri: "my-app",
-                expanded: true,
-                children: [{ type: "file", uri: "myfile.js" }],
+                children: [
+                  { type: "file", uri: "myfile.js" },
+                  {
+                    type: "directory",
+                    uri: "my-app",
+                    children: [{ type: "file", uri: "myfile.js" }],
+                  },
+                ],
               }}
             />
           </div>
 
           {/* Code */}
           <div className="flex-1 pl-5 flex flex-col">
-            <header className="text-sm font-medium text-muted-foreground">
-              myfile.js
+            <header className="text-sm font-medium text-muted-foreground flex items-center gap-1">
+              <File size={16} /> myfile.js
             </header>
 
             <div className="flex-1 pt-3 pb-5">

From a566c92314c4b24f8c320b566bf8b8f5d01817ce Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 16:06:21 +0100
Subject: [PATCH 22/28] Small update

---
 src/app/problems/components/ProblemCard.tsx | 5 +++--
 src/components/ui/button.tsx                | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/problems/components/ProblemCard.tsx b/src/app/problems/components/ProblemCard.tsx
index f15dc44..bd881e4 100644
--- a/src/app/problems/components/ProblemCard.tsx
+++ b/src/app/problems/components/ProblemCard.tsx
@@ -1,3 +1,4 @@
+import { Button } from "@/components/ui/button";
 import { Clock, Zap, Users } from "lucide-react";
 
 interface ProblemCardProps {
@@ -81,9 +82,9 @@ const ProblemCard = ({
 
         {/* Quick run button - appears on hover */}
         <div className="absolute bottom-0 right-0 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-2 group-hover:translate-x-0">
-          <button className="p-2 rounded-lg bg-primary text-primary-foreground">
+          <Button size="p2">
             <Zap className="h-4 w-4" />
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 3b11e4c..f1e7306 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -25,6 +25,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-10 px-4 py-2",
+        p2: "rounded-md p-2",
         sm: "h-9 rounded-md px-3",
         lg: "h-12 rounded-lg px-8",
         xl: "h-14 rounded-lg px-10 text-base",

From 56672f30f5062e93b37439c8be8e27eea4e27af5 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 16:21:06 +0100
Subject: [PATCH 23/28] Better hero buttons?

---
 src/app/page.tsx             |  2 +-
 src/components/ui/button.tsx | 71 +++++++++++++++++++-----------------
 2 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 050506b..f33d776 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -85,7 +85,7 @@ export default function Landing() {
                 </Button>
               </Link>
               <Link href="/leaderboards">
-                <Button variant="hero-outline">
+                <Button variant="hero">
                   <Trophy className="h-5 w-5" />
                   View Leaderboards
                 </Button>
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index f1e7306..8f9ce3d 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,35 +1,36 @@
 import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
 
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none 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",
   {
     variants: {
       variant: {
-        default:
-          "bg-primary text-primary-foreground hover:bg-primary/90 glow-purple hover:glow-purple-intense",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          "border-2 border-primary/50 bg-transparent text-primary hover:bg-primary/10 hover:border-primary",
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "text-muted-foreground hover:text-foreground hover:bg-secondary",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
-        hero: "bg-primary text-primary-foreground px-8 py-6 text-lg font-bold glow-purple hover:glow-purple-intense",
-        "hero-outline":
-          "border-2 border-primary/50 bg-transparent text-primary px-8 py-6 text-lg font-bold hover:bg-primary/10 hover:border-primary hover:ring-2 hover:ring-primary/30",
+        hero: "transition-colors duration-300 hover:text-primary text-glow",
       },
       size: {
-        default: "h-10 px-4 py-2",
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
         p2: "rounded-md p-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-12 rounded-lg px-8",
-        xl: "h-14 rounded-lg px-10 text-base",
-        icon: "h-10 w-10",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
       },
     },
     defaultVariants: {
@@ -39,25 +40,27 @@ const buttonVariants = cva(
   },
 );
 
-export interface ButtonProps
-  extends
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Button.displayName = "Button";
-
 export { Button, buttonVariants };

From 09faa758261eebdd6c4b6a0577f834f0b1d9879f Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 17:00:21 +0100
Subject: [PATCH 24/28] Login and register

---
 src/app/login/page.tsx               |   5 ++
 src/app/register/page.tsx            |   5 ++
 src/components/app/Navbar.tsx        |  30 ++------
 src/components/auth/LoginPage.tsx    |  95 +++++++++++++++++++++++
 src/components/auth/RegisterPage.tsx |  69 +++++++++++++++++
 src/components/ui/avatar.tsx         | 109 +++++++++++++++++++++++++++
 src/components/ui/button.tsx         |   4 +-
 src/components/ui/label.tsx          |  24 ++++++
 8 files changed, 317 insertions(+), 24 deletions(-)
 create mode 100644 src/app/login/page.tsx
 create mode 100644 src/app/register/page.tsx
 create mode 100644 src/components/auth/LoginPage.tsx
 create mode 100644 src/components/auth/RegisterPage.tsx
 create mode 100644 src/components/ui/avatar.tsx
 create mode 100644 src/components/ui/label.tsx

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 0000000..b489077
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,5 @@
+import { LoginPage } from "@/components/auth/LoginPage";
+
+export default function Page() {
+  return <LoginPage />;
+}
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
new file mode 100644
index 0000000..1c5913b
--- /dev/null
+++ b/src/app/register/page.tsx
@@ -0,0 +1,5 @@
+import { RegisterPage } from "@/components/auth/RegisterPage";
+
+export default function Page() {
+  return <RegisterPage />;
+}
diff --git a/src/components/app/Navbar.tsx b/src/components/app/Navbar.tsx
index f157412..92b2d45 100644
--- a/src/components/app/Navbar.tsx
+++ b/src/components/app/Navbar.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import Link from "next/link";
-import { Radio, Trophy, Zap } from "lucide-react";
+import { Radio, Trophy, User, Zap } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
+import { Avatar, AvatarFallback } from "../ui/avatar";
 
 const navs = [
   {
@@ -46,7 +47,7 @@ const Navbar = () => {
           </Link>
 
           {/* Navigation Links */}
-          <div className="hidden md:flex items-center gap-1">
+          <div className="hidden md:flex absolute left-1/2 -translate-x-1/2 items-center gap-1">
             {navs.map(({ link, icon: Icon, name }) => (
               <Link
                 key={link}
@@ -64,26 +65,11 @@ const Navbar = () => {
 
           {/* CTA Button */}
           <div className="flex items-center gap-4">
-            <button className="hidden sm:flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-semibold transition-all duration-300 hover:scale-105 glow-purple hover:glow-purple-intense">
-              Start Run
-            </button>
-
-            {/* Mobile menu button */}
-            <button className="md:hidden p-2 text-muted-foreground hover:text-foreground">
-              <svg
-                className="h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 6h16M4 12h16M4 18h16"
-                />
-              </svg>
-            </button>
+            <Avatar onClick={() => {}}>
+              <AvatarFallback>
+                <User className="m-2" />
+              </AvatarFallback>
+            </Avatar>
           </div>
         </div>
       </div>
diff --git a/src/components/auth/LoginPage.tsx b/src/components/auth/LoginPage.tsx
new file mode 100644
index 0000000..8e6720a
--- /dev/null
+++ b/src/components/auth/LoginPage.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import Link from "next/link";
+import {
+  ArrowRight,
+  Github,
+  KeyRound,
+  LogIn,
+  Mail,
+  UserRound,
+  Zap,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export function LoginPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center relative overflow-hidden">
+      {/* Background glow */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          background:
+            "radial-gradient(ellipse at top, hsl(270 91% 45% / 0.25) 0%, transparent 60%)",
+        }}
+      />
+
+      <Card className="w-full max-w-md relative">
+        <CardHeader className="text-center">
+          <div className="mx-auto mb-4 w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
+            <LogIn className="h-6 w-6 text-primary" />
+          </div>
+          <CardTitle className="text-2xl">Welcome back</CardTitle>
+          <CardDescription>
+            Log in to continue chasing your personal best.
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="space-y-6">
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" type="email" placeholder="you@example.com" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input id="password" type="password" placeholder="••••••••" />
+            </div>
+          </div>
+
+          <Button className="w-full" variant="secondary">
+            Log In
+          </Button>
+
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t border-border" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-card px-2 text-muted-foreground">
+                Or continue with
+              </span>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <Button variant="outline">
+              <Github className="h-4 w-4" />
+              GitHub
+            </Button>
+            <Button variant="outline">
+              <Mail className="h-4 w-4" />
+              Google
+            </Button>
+          </div>
+
+          <p className="text-center text-sm text-muted-foreground">
+            Don&apos;t have an account?{" "}
+            <Link href="/register" className="text-primary hover:underline">
+              Create one
+            </Link>
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/components/auth/RegisterPage.tsx b/src/components/auth/RegisterPage.tsx
new file mode 100644
index 0000000..7593a7e
--- /dev/null
+++ b/src/components/auth/RegisterPage.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowRight, Github, Mail, UserPlus, Zap } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export function RegisterPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center relative overflow-hidden">
+      {/* Background glow */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          background:
+            "radial-gradient(ellipse at bottom, hsl(270 91% 75% / 0.18) 0%, transparent 60%)",
+        }}
+      />
+
+      <Card className="w-full max-w-md relative">
+        <CardHeader className="text-center">
+          <div className="mx-auto mb-4 w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
+            <UserPlus className="h-6 w-6 text-primary" />
+          </div>
+          <CardTitle className="text-2xl">Create your account</CardTitle>
+          <CardDescription>
+            Join the grind. Track runs, set records, compete globally.
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="space-y-6">
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="username">Username</Label>
+              <Input id="username" placeholder="speedrunner67" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" type="email" placeholder="you@example.com" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input id="password" type="password" placeholder="••••••••" />
+            </div>
+          </div>
+
+          <Button className="w-full" variant="secondary">
+            Create Account
+          </Button>
+
+          <p className="text-center text-sm text-muted-foreground">
+            Already have an account?{" "}
+            <Link href="/login" className="text-primary hover:underline">
+              Log in
+            </Link>
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..1ac1570
--- /dev/null
+++ b/src/components/ui/avatar.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 8f9ce3d..78749fb 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -13,9 +13,9 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border bg-background shadow-xs hover:bg-accent hover:text-primary dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 hover:text-primary",
         ghost:
           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..1ac80f7
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

From 00069df5d7ee25894881c05a6d9bbfe00bebf2c4 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 19:44:02 +0100
Subject: [PATCH 25/28] Small stuff

---
 src/app/page.tsx                     |  2 +-
 src/components/auth/ContinueWith.tsx | 30 ++++++++++++++++++++++++++++
 src/components/auth/LoginPage.tsx    | 23 ++-------------------
 src/components/auth/RegisterPage.tsx |  3 +++
 4 files changed, 36 insertions(+), 22 deletions(-)
 create mode 100644 src/components/auth/ContinueWith.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index f33d776..5c412ef 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -77,7 +77,7 @@ export default function Landing() {
               className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-in stagger-3 opacity-0"
               style={{ animationFillMode: "forwards" }}
             >
-              <Link href="/run">
+              <Link href="/register">
                 <Button variant="hero" className="group">
                   <Play className="h-5 w-5" />
                   Start Your First Run
diff --git a/src/components/auth/ContinueWith.tsx b/src/components/auth/ContinueWith.tsx
new file mode 100644
index 0000000..030349c
--- /dev/null
+++ b/src/components/auth/ContinueWith.tsx
@@ -0,0 +1,30 @@
+import { Github, Mail } from "lucide-react";
+import { Button } from "../ui/button";
+
+export default function ContinueWith() {
+  return (
+    <>
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center">
+          <span className="w-full border-t border-border" />
+        </div>
+        <div className="relative flex justify-center text-xs uppercase">
+          <span className="bg-card px-2 text-muted-foreground">
+            Or continue with
+          </span>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        <Button variant="outline">
+          <Github className="h-4 w-4" />
+          GitHub
+        </Button>
+        <Button variant="outline">
+          <Mail className="h-4 w-4" />
+          Google
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/auth/LoginPage.tsx b/src/components/auth/LoginPage.tsx
index 8e6720a..c48394a 100644
--- a/src/components/auth/LoginPage.tsx
+++ b/src/components/auth/LoginPage.tsx
@@ -20,6 +20,7 @@ import {
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import ContinueWith from "./ContinueWith";
 
 export function LoginPage() {
   return (
@@ -60,27 +61,7 @@ export function LoginPage() {
             Log In
           </Button>
 
-          <div className="relative">
-            <div className="absolute inset-0 flex items-center">
-              <span className="w-full border-t border-border" />
-            </div>
-            <div className="relative flex justify-center text-xs uppercase">
-              <span className="bg-card px-2 text-muted-foreground">
-                Or continue with
-              </span>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-3">
-            <Button variant="outline">
-              <Github className="h-4 w-4" />
-              GitHub
-            </Button>
-            <Button variant="outline">
-              <Mail className="h-4 w-4" />
-              Google
-            </Button>
-          </div>
+          <ContinueWith />
 
           <p className="text-center text-sm text-muted-foreground">
             Don&apos;t have an account?{" "}
diff --git a/src/components/auth/RegisterPage.tsx b/src/components/auth/RegisterPage.tsx
index 7593a7e..541d8f8 100644
--- a/src/components/auth/RegisterPage.tsx
+++ b/src/components/auth/RegisterPage.tsx
@@ -12,6 +12,7 @@ import {
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import ContinueWith from "./ContinueWith";
 
 export function RegisterPage() {
   return (
@@ -56,6 +57,8 @@ export function RegisterPage() {
             Create Account
           </Button>
 
+          <ContinueWith  />
+
           <p className="text-center text-sm text-muted-foreground">
             Already have an account?{" "}
             <Link href="/login" className="text-primary hover:underline">

From 43b50554226e700695663b47ce32488d05cb9d5a Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 19:46:44 +0100
Subject: [PATCH 26/28] Rank and category padding

---
 src/app/leaderboards/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/leaderboards/page.tsx b/src/app/leaderboards/page.tsx
index d43b4f8..fd28720 100644
--- a/src/app/leaderboards/page.tsx
+++ b/src/app/leaderboards/page.tsx
@@ -253,11 +253,11 @@ export default function Leaderboards() {
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>Rank</TableHead>
+                <TableHead className="pl-5">Rank</TableHead>
                 <TableHead>Runner</TableHead>
                 <TableHead>PB</TableHead>
                 <TableHead>Runs</TableHead>
-                <TableHead>Category</TableHead>
+                <TableHead className="pr-5">Category</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>

From c1ef614ed3ff2ecd97c3be200ba48c582f1db389 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 20:06:33 +0100
Subject: [PATCH 27/28] Register animations

---
 src/components/auth/ContinueWith.tsx |  4 ++--
 src/components/auth/RegisterPage.tsx | 21 +++++++++++++--------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/auth/ContinueWith.tsx b/src/components/auth/ContinueWith.tsx
index 030349c..9e94783 100644
--- a/src/components/auth/ContinueWith.tsx
+++ b/src/components/auth/ContinueWith.tsx
@@ -15,12 +15,12 @@ export default function ContinueWith() {
         </div>
       </div>
 
-      <div className="grid grid-cols-2 gap-3">
+      <div className="grid grid-cols-2 gap-3 animate-fade-in stagger-4">
         <Button variant="outline">
           <Github className="h-4 w-4" />
           GitHub
         </Button>
-        <Button variant="outline">
+        <Button variant="outline" className="animate-fade-in stagger-5">
           <Mail className="h-4 w-4" />
           Google
         </Button>
diff --git a/src/components/auth/RegisterPage.tsx b/src/components/auth/RegisterPage.tsx
index 541d8f8..2b1158c 100644
--- a/src/components/auth/RegisterPage.tsx
+++ b/src/components/auth/RegisterPage.tsx
@@ -28,36 +28,41 @@ export function RegisterPage() {
 
       <Card className="w-full max-w-md relative">
         <CardHeader className="text-center">
-          <div className="mx-auto mb-4 w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
+          <div className="mx-auto mb-4 w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center animate-fade-in">
             <UserPlus className="h-6 w-6 text-primary" />
           </div>
-          <CardTitle className="text-2xl">Create your account</CardTitle>
-          <CardDescription>
+          <CardTitle className="text-2xl animate-fade-in stagger-1">
+            Create your account
+          </CardTitle>
+          <CardDescription className="animate-fade-in stagger-2">
             Join the grind. Track runs, set records, compete globally.
           </CardDescription>
         </CardHeader>
 
         <CardContent className="space-y-6">
           <div className="space-y-4">
-            <div className="space-y-2">
+            <div className="space-y-2 animate-fade-in">
               <Label htmlFor="username">Username</Label>
               <Input id="username" placeholder="speedrunner67" />
             </div>
-            <div className="space-y-2">
+            <div className="space-y-2 animate-fade-in stagger-1">
               <Label htmlFor="email">Email</Label>
               <Input id="email" type="email" placeholder="you@example.com" />
             </div>
-            <div className="space-y-2">
+            <div className="space-y-2 animate-fade-in stagger-2">
               <Label htmlFor="password">Password</Label>
               <Input id="password" type="password" placeholder="••••••••" />
             </div>
           </div>
 
-          <Button className="w-full" variant="secondary">
+          <Button
+            className="w-full animate-fade-in stagger-3"
+            variant="secondary"
+          >
             Create Account
           </Button>
 
-          <ContinueWith  />
+          <ContinueWith />
 
           <p className="text-center text-sm text-muted-foreground">
             Already have an account?{" "}

From e658255e70d01d9bc691524b08255e076aad4c7d Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Tue, 3 Feb 2026 20:08:05 +0100
Subject: [PATCH 28/28] login animations

---
 src/components/auth/LoginPage.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/auth/LoginPage.tsx b/src/components/auth/LoginPage.tsx
index c48394a..2ba1a4f 100644
--- a/src/components/auth/LoginPage.tsx
+++ b/src/components/auth/LoginPage.tsx
@@ -36,28 +36,33 @@ export function LoginPage() {
 
       <Card className="w-full max-w-md relative">
         <CardHeader className="text-center">
-          <div className="mx-auto mb-4 w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
+          <div className="mx-auto mb-4 w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center animate-fade-in stagger-1">
             <LogIn className="h-6 w-6 text-primary" />
           </div>
-          <CardTitle className="text-2xl">Welcome back</CardTitle>
-          <CardDescription>
+          <CardTitle className="text-2xl animate-fade-in stagger-1">
+            Welcome back
+          </CardTitle>
+          <CardDescription className="animate-fade-in stagger-2">
             Log in to continue chasing your personal best.
           </CardDescription>
         </CardHeader>
 
         <CardContent className="space-y-6">
           <div className="space-y-4">
-            <div className="space-y-2">
+            <div className="space-y-2 animate-fade-in">
               <Label htmlFor="email">Email</Label>
               <Input id="email" type="email" placeholder="you@example.com" />
             </div>
-            <div className="space-y-2">
+            <div className="space-y-2 animate-fade-in stagger-1">
               <Label htmlFor="password">Password</Label>
               <Input id="password" type="password" placeholder="••••••••" />
             </div>
           </div>
 
-          <Button className="w-full" variant="secondary">
+          <Button
+            className="w-full animate-fade-in stagger-2"
+            variant="secondary"
+          >
             Log In
           </Button>