Merge pull request #4 from orus-dev/large-ui-stuff

Large UI stuff

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",
@@ -45,6 +44,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 +923,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 +1484,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 +1756,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 +2457,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",
@@ -2554,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",
@@ -2917,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"
@@ -2942,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",
@@ -3872,6 +4037,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",
@@ -3920,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",
@@ -4026,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",

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",
@@ -45,6 +44,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",

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);
   }
 

src/app/leaderboards/page.tsx

@@ -1,305 +1,292 @@
 "use client";
 
 import { Trophy, Calendar, Globe, TrendingUp } from "lucide-react";
-import LeaderboardRow from "@/components/app/LeaderboardRow";
 import { useState } from "react";
 
-const Leaderboards = () => {
+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 "@/app/leaderboards/components/LeaderboardRow";
+import StatCard from "@/components/app/StatCard";
+
+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%",
+  },
+];
+
+export default function 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">
+        <div>
-          <h1 className="text-4xl font-bold text-foreground mb-2">
+          <h1 className="text-4xl font-bold">Leaderboards</h1>
-            Leaderboards
-          </h1>
           <p className="text-muted-foreground">
             The fastest runners in the game. Will you claim a spot?
           </p>
         </div>
 
-        {/* Stats Row */}
+        {/* Stats */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <div className="bg-card border border-border rounded-xl p-4 text-center">
+          <StatCard
-            <Globe className="h-5 w-5 text-primary mx-auto mb-2" />
+            icon={Globe}
-            <p className="text-2xl font-bold font-mono text-foreground">
+            label="Total Runners"
-              12,453
+            value="12,453"
-            </p>
+            index={0}
-            <p className="text-xs text-muted-foreground">Total Runners</p>
+          />
-          </div>
+          <StatCard
-          <div className="bg-card border border-border rounded-xl p-4 text-center">
+            icon={Trophy}
-            <Trophy className="h-5 w-5 text-gold mx-auto mb-2" />
+            label="World Record"
-            <p className="text-2xl font-bold font-mono text-foreground">
+            value="2:34.21"
-              2:34.21
+            index={1}
-            </p>
+          />
-            <p className="text-xs text-muted-foreground">World Record</p>
+          <StatCard
-          </div>
+            icon={TrendingUp}
-          <div className="bg-card border border-border rounded-xl p-4 text-center">
+            label="Runs This Week"
-            <TrendingUp className="h-5 w-5 text-emerald-400 mx-auto mb-2" />
+            value="847K"
-            <p className="text-2xl font-bold font-mono text-foreground">847K</p>
+            index={2}
-            <p className="text-xs text-muted-foreground">Runs This Week</p>
+          />
-          </div>
+          <StatCard
-          <div className="bg-card border border-border rounded-xl p-4 text-center">
+            icon={Calendar}
-            <Calendar className="h-5 w-5 text-primary mx-auto mb-2" />
+            label="Until Reset"
-            <p className="text-2xl font-bold font-mono text-foreground">
+            value="5d 12h"
-              5d 12h
+            index={3}
-            </p>
+          />
-            <p className="text-xs text-muted-foreground">Until Reset</p>
-          </div>
         </div>
 
-        {/* Tabs and Filters */}
+        {/* Tabs + Filters */}
-        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-6">
+        <div className="flex flex-col md:flex-row gap-4 justify-between">
-          {/* Global/Weekly Toggle */}
+          <Tabs
-          <div className="flex gap-1 bg-card border border-border rounded-lg p-1">
+            value={activeTab}
-            <button
+            onValueChange={(v) => setActiveTab(v as "global" | "weekly")}
-              onClick={() => setActiveTab("global")}
+          >
-              className={`flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all ${
+            <TabsList>
-                activeTab === "global"
+              <TabsTrigger value="global">
-                  ? "bg-primary text-primary-foreground"
+                <Globe className="mr-2 h-4 w-4" />
-                  : "text-muted-foreground hover:text-foreground"
+                Global
-              }`}
+              </TabsTrigger>
-            >
+              <TabsTrigger value="weekly">
-              <Globe className="h-4 w-4" />
+                <Calendar className="mr-2 h-4 w-4" />
-              Global
+                Weekly
-            </button>
+              </TabsTrigger>
-            <button
+            </TabsList>
-              onClick={() => setActiveTab("weekly")}
+          </Tabs>
-              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>
 
-          {/* Category Filter */}
+          <div className="flex flex-wrap gap-2">
-          <div className="flex gap-2 flex-wrap">
             {categories.map((cat, i) => (
-              <button
+              <Badge
                 key={cat}
-                className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${
+                variant={i === 0 ? "default" : "outline"}
-                  i === 0
+                className="cursor-pointer"
-                    ? "bg-primary/10 text-primary border border-primary/30"
-                    : "bg-card text-muted-foreground hover:text-foreground border border-border hover:border-primary/30"
-                }`}
               >
                 {cat}
-              </button>
+              </Badge>
             ))}
           </div>
         </div>
 
-        {/* Leaderboard Table */}
+        {/* Table */}
-        <div className="bg-card border border-border rounded-xl overflow-hidden">
+        <Card>
-          <table className="w-full">
+          <Table>
-            <thead className="bg-secondary/50">
+            <TableHeader>
-              <tr>
+              <TableRow>
-                <th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                <TableHead className="pl-5">Rank</TableHead>
-                  Rank
+                <TableHead>Runner</TableHead>
-                </th>
+                <TableHead>PB</TableHead>
-                <th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                <TableHead>Runs</TableHead>
-                  Runner
+                <TableHead className="pr-5">Category</TableHead>
-                </th>
+              </TableRow>
-                <th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+            </TableHeader>
-                  PB
+            <TableBody>
-                </th>
+              {data.map((entry, i) => (
-                <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) => (
                 <LeaderboardRow key={entry.username} {...entry} index={i} />
               ))}
-            </tbody>
+            </TableBody>
-          </table>
+          </Table>
-        </div>
+        </Card>
 
         {/* Pagination */}
-        <div className="flex items-center justify-center gap-2 mt-6">
+        <Pagination>
-          <button className="px-3 py-1.5 rounded-lg bg-secondary text-muted-foreground hover:text-foreground transition-all">
+          <PaginationContent>
-            Previous
+            <PaginationItem>
-          </button>
+              <PaginationPrevious />
-          {[1, 2, 3, 50].map((page, i) => (
+            </PaginationItem>
-            <button
+
-              key={i}
+            {[1, 2, 3, 50].map((p) => (
-              className={`px-3 py-1.5 rounded-lg transition-all ${
+              <PaginationItem key={p}>
-                page === 1
+                <PaginationLink isActive={p === 1}>{p}</PaginationLink>
-                  ? "bg-primary text-primary-foreground"
+              </PaginationItem>
-                  : "bg-secondary text-muted-foreground hover:text-foreground"
+            ))}
-              }`}
+
-            >
+            <PaginationItem>
-              {page}
+              <PaginationNext />
-            </button>
+            </PaginationItem>
-          ))}
+          </PaginationContent>
-          <button className="px-3 py-1.5 rounded-lg bg-secondary text-muted-foreground hover:text-foreground transition-all">
+        </Pagination>
-            Next
-          </button>
-        </div>
       </div>
     </div>
   );
-};
+}
-
-export default Leaderboards;

src/app/login/page.tsx

@@ -0,0 +1,5 @@
+import { LoginPage } from "@/components/auth/LoginPage";
+
+export default function Page() {
+  return <LoginPage />;
+}

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,
@@ -77,7 +77,7 @@ const 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
@@ -85,7 +85,7 @@ const Landing = () => {
                 </Button>
               </Link>
               <Link href="/leaderboards">
-                <Button variant="hero-outline">
+                <Button variant="hero">
                   <Trophy className="h-5 w-5" />
                   View Leaderboards
                 </Button>
@@ -183,6 +183,4 @@ const Landing = () => {
       </section>
     </div>
   );
-};
+}
-
-export default Landing;

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 {
@@ -9,7 +10,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 +31,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 +57,8 @@ const ProblemCard = ({ name, difficulty, tags, bestTime, attempts, index = 0 }:
         {/* Tags */}
         <div className="flex flex-wrap gap-2 mb-4">
           {tags.map((tag) => (
-            <span 
+            <span
-              key={tag} 
+              key={tag}
               className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs"
             >
               {tag}
@@ -68,10 +81,10 @@ 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">
+          <Button size="p2">
             <Zap className="h-4 w-4" />
-          </button>
+          </Button>
         </div>
       </div>
     </div>

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";
 
-const Problems = () => {
+import ProblemCard from "@/app/problems/components/ProblemCard";
-  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
+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 = [
+export default function Problems() {
-    {
+  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
-      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">
+        <div>
-          <h1 className="text-4xl font-bold text-foreground mb-2">Problems</h1>
+          <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" />
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-            <input
+            <Input placeholder="Search problems..." className="pl-9" />
-              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"
-            />
           </div>
 
           {/* Category Filter */}
-          <div className="flex gap-2 flex-wrap">
+          <div className="flex flex-wrap gap-2">
-            {categories.map((cat) => (
+            {categories.map((cat, i) => (
-              <button
+              <Badge
                 key={cat}
-                className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+                variant={i === 0 ? "default" : "secondary"}
-                  cat === "All"
+                className="cursor-pointer"
-                    ? "bg-primary text-primary-foreground"
-                    : "bg-secondary text-muted-foreground hover:text-foreground hover:bg-secondary/80"
-                }`}
               >
                 {cat}
-              </button>
+              </Badge>
             ))}
           </div>
 
           {/* Difficulty Filter */}
           <div className="flex gap-2">
-            {difficulties.map((diff) => (
+            {difficulties.map((diff, i) => (
-              <button
+              <Button
                 key={diff}
-                className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${
+                variant={i === 0 ? "outline" : "ghost"}
-                  diff === "All"
+                size="sm"
-                    ? "bg-primary/10 text-primary border border-primary/30"
-                    : "bg-card text-muted-foreground hover:text-foreground border border-border hover:border-primary/30"
-                }`}
               >
                 {diff}
-              </button>
+              </Button>
             ))}
           </div>
 
           {/* View Toggle */}
-          <div className="flex gap-1 bg-card border border-border rounded-lg p-1">
+          <ToggleGroup
-            <button
+            type="single"
-              onClick={() => setViewMode("grid")}
+            value={viewMode}
-              className={`p-2 rounded-md transition-all ${
+            onValueChange={(v) => v && setViewMode(v as "grid" | "list")}
-                viewMode === "grid"
+          >
-                  ? "bg-primary text-primary-foreground"
+            <ToggleGroupItem value="grid" aria-label="Grid view">
-                  : "text-muted-foreground hover:text-foreground"
-              }`}
-            >
               <Grid className="h-4 w-4" />
-            </button>
+            </ToggleGroupItem>
-            <button
+            <ToggleGroupItem value="list" aria-label="List view">
-              onClick={() => setViewMode("list")}
-              className={`p-2 rounded-md transition-all ${
-                viewMode === "list"
-                  ? "bg-primary text-primary-foreground"
-                  : "text-muted-foreground hover:text-foreground"
-              }`}
-            >
               <List className="h-4 w-4" />
-            </button>
+            </ToggleGroupItem>
-          </div>
+          </ToggleGroup>
         </div>
 
         {/* Problem Grid */}
@@ -192,6 +90,93 @@ const Problems = () => {
       </div>
     </div>
   );
-};
+}
 
-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,
+  },
+];

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>
+  );
+}

src/app/profile/page.tsx

@@ -1,15 +1,15 @@
-import {
+"use client";
-  Trophy,
-  Timer,
-  Zap,
-  Target,
-  Calendar,
-  TrendingUp,
-  Award,
-} from "lucide-react";
-import StatCard from "@/components/app/StatCard";
 
-const Profile = () => {
+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 ProfileStatCard from "@/app/profile/components/ProfileStatCard";
+
+export default function Profile() {
   const user = {
     username: "speedmaster_x",
     joinDate: "Jan 2024",
@@ -21,159 +21,69 @@ 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">
+        <Card className="relative overflow-hidden">
-          {/* Background gradient */}
+          <div className="absolute inset-0 bg-linear-to-r from-primary/10 via-transparent to-transparent" />
-          <div className="absolute inset-0 bg-linear-to-r from-primary/10 via-transparent to-transparent pointer-events-none" />
 
-          <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">
+              <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.charAt(0).toUpperCase()}
+                {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">
+              <h1 className="text-3xl font-bold">{user.username}</h1>
-                {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">
+              <div className="flex flex-wrap gap-2">
-                  World Record Holder
+                <Badge>World Record Holder</Badge>
-                </span>
+                <Badge variant="secondary">{user.favoriteCategory} Main</Badge>
-                <span className="px-3 py-1 rounded-lg bg-secondary text-secondary-foreground text-sm">
-                  {user.favoriteCategory} Main
-                </span>
               </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>
+          </CardContent>
-        </div>
+        </Card>
 
-        {/* Stats Grid */}
+        {/* Stats */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+        <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}
@@ -183,80 +93,71 @@ const Profile = () => {
 
         <div className="grid lg:grid-cols-3 gap-8">
           {/* Recent Runs */}
-          <div className="lg:col-span-2">
+          <Card className="lg:col-span-2">
-            <div className="bg-card border border-border rounded-xl p-6">
+            <CardHeader className="flex flex-row items-center justify-between">
-              <div className="flex items-center justify-between mb-6">
+              <CardTitle>Recent Runs</CardTitle>
-                <h2 className="text-xl font-bold text-foreground">
+              <Button variant="link" size="sm">
-                  Recent Runs
+                View all
-                </h2>
+              </Button>
-                <button className="text-sm text-primary hover:underline">
+            </CardHeader>
-                  View All
-                </button>
-              </div>
 
-              <div className="space-y-3">
+            <CardContent className="space-y-3">
-                {recentRuns.map((run, i) => (
+              {recentRuns.map((run, i) => (
-                  <div
+                <div
-                    key={run.id}
+                  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"
+                  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={{
+                  style={{
-                      animationDelay: `${i * 0.1}s`,
+                    animationDelay: `${i * 0.1}s`,
-                      animationFillMode: "forwards",
+                    animationFillMode: "forwards",
-                    }}
+                  }}
-                  >
+                >
-                    <div className="flex items-center gap-4">
+                  <div className="flex items-center gap-4">
-                      <div
+                    <div
-                        className={`w-2 h-2 rounded-full ${
+                      className={`w-2 h-2 rounded-full ${
-                          run.status === "clean"
+                        run.status === "clean" ? "bg-emerald-400" : "bg-red-400"
-                            ? "bg-emerald-400"
+                      }`}
-                            : "bg-red-400"
+                    />
-                        }`}
+                    <div>
-                      />
+                      <p className="font-medium">{run.category}</p>
-                      <div>
+                      <p className="text-xs text-muted-foreground">
-                        <p className="font-medium text-foreground">
+                        {run.date}
-                          {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}
                       </p>
                     </div>
                   </div>
-                ))}
-              </div>
-            </div>
-          </div>
 
-          {/* Achievements */}
+                  <div className="text-right">
-          <div className="lg:col-span-1">
+                    <p
-            <div className="bg-card border border-border rounded-xl p-6">
+                      className={`font-mono font-semibold ${
-              <div className="flex items-center justify-between mb-6">
+                        run.status === "reset"
-                <h2 className="text-xl font-bold text-foreground">
+                          ? "text-red-400"
-                  Achievements
+                          : "text-foreground"
-                </h2>
+                      }`}
-                <span className="text-sm text-muted-foreground">5/6</span>
+                    >
-              </div>
+                      {run.time}
+                    </p>
+                    <p className="text-xs text-muted-foreground capitalize">
+                      {run.status}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
 
-              <div className="space-y-3">
+          {/* Achievements + PB */}
-                {achievements.map((achievement, i) => (
+          <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}
+                    key={a.name}
-                    className={`flex items-center gap-3 p-3 rounded-lg transition-all animate-fade-in opacity-0 ${
+                    className={`flex items-center gap-3 rounded-lg p-3 animate-fade-in opacity-0 ${
-                      achievement.unlocked
+                      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
+                      <p className="text-sm font-medium">{a.name}</p>
-                        className={`text-sm font-medium ${
-                          achievement.unlocked
-                            ? "text-foreground"
-                            : "text-muted-foreground"
-                        }`}
-                      >
-                        {achievement.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>
+              </CardContent>
-            </div>
+            </Card>
 
             {/* PB History */}
-            <div className="bg-card border border-border rounded-xl p-6 mt-4">
+            <Card>
-              <h2 className="text-xl font-bold text-foreground mb-4">
+              <CardHeader>
-                PB History
+                <CardTitle>PB History</CardTitle>
-              </h2>
+              </CardHeader>
-              <div className="space-y-2">
+              <CardContent className="space-y-2">
-                <div className="flex justify-between items-center py-2 border-b border-border">
+                {pbHistory.map((pb, i) => (
-                  <span className="text-muted-foreground text-sm">2:34.21</span>
+                  <div key={i}>
-                  <span className="text-xs text-muted-foreground">Today</span>
+                    <div className="flex justify-between text-sm">
-                </div>
+                      <span className="text-muted-foreground">{pb.time}</span>
-                <div className="flex justify-between items-center py-2 border-b border-border">
+                      <span className="text-muted-foreground">{pb.date}</span>
-                  <span className="text-muted-foreground text-sm">2:38.54</span>
+                    </div>
-                  <span className="text-xs text-muted-foreground">
+                    {i !== pbHistory.length - 1 && (
-                    3 days ago
+                      <Separator className="my-2" />
-                  </span>
+                    )}
-                </div>
+                  </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>
+              </CardContent>
-                  <span className="text-xs text-muted-foreground">
+            </Card>
-                    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>
           </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" },
+];

src/app/register/page.tsx

@@ -0,0 +1,5 @@
+import { RegisterPage } from "@/components/auth/RegisterPage";
+
+export default function Page() {
+  return <RegisterPage />;
+}

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>
+  );
+};

src/app/run/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>
+  );
+}

src/app/run/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>
+  );
+}

src/app/run/page.tsx

@@ -1,64 +1,16 @@
 "use client";
 
-import { FileTree } from "@sinm/react-file-tree";
+import CodeMirror, { EditorState } from "@uiw/react-codemirror";
-import CodeMirror, { ReactCodeMirrorRef } from "@uiw/react-codemirror";
 import { vscodeDark } from "@uiw/codemirror-theme-vscode";
-import { useEffect, useRef } from "react";
 
-type RunInfo = {
+import { Card, CardContent } from "@/components/ui/card";
-  category: "any%" | "100%";
+import RunTimer, { RunInfo } from "./components/RunTimer";
-  problems: number;
+import RunChat, { ChatMessage } from "./components/RunChat";
-  currentAttempt: number;
+import { useState } from "react";
-  pbTime: string;
+import { FileTree } from "./components/FileTree";
-  worldRecord: string;
+import { File } from "lucide-react";
-};
-
-type ChatMessage = {
-  user: string;
-  message: string;
-  time: string;
-};
 
 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,
@@ -67,7 +19,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" },
@@ -76,99 +28,63 @@ 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">
+      <Card className="flex-1 overflow-hidden">
-        <div className="h-full w-2xs border-r-2 p-5">
+        <CardContent className="flex h-full">
-          <FileTree
+          {/* File tree */}
-            tree={{
+          <div className="w-2xs border-r border-border">
-              type: "directory",
+            <FileTree
-              uri: "my-app",
+              tree={{
-              expanded: true,
+                type: "directory",
-              children: [
+                uri: "my-app",
-                {
+                children: [
-                  type: "file",
+                  { type: "file", uri: "myfile.js" },
-                  uri: "myfile.js",
+                  {
-                },
+                    type: "directory",
-              ],
+                    uri: "my-app",
-            }}
+                    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={[]}
-              theme={vscodeDark}
-              onCreateEditor={(view) => {
-                view.focus();
-
-                view.dispatch({
-                  selection: { anchor: 1 },
-                  scrollIntoView: true,
-                });
               }}
             />
           </div>
-        </div>
+
-      </div>
+          {/* Code */}
+          <div className="flex-1 pl-5 flex flex-col">
+            <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">
+              <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">
+      <div className="flex flex-col gap-6 h-full w-sm">
-        <Timer runInfo={runInfo} />
+        <RunTimer runInfo={runInfo} />
-        <Chat chatMessages={chatMessages} />
+        <RunChat chatMessages={chatMessages} />
-      </div>
-    </div>
-  );
-}
-
-function Timer({ 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">
-        <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">
-          PB: {runInfo.pbTime} | Diff:{" "}
-          <span className="text-red-400">+0:12</span>
-        </p>
-      </div>
-    </div>
-  );
-}
-
-function Chat({ 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>
-
-      {/* 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>
-
-      {/* 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>
   );

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>
+  );
+}

src/app/runs/page.tsx

@@ -0,0 +1,130 @@
+"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";
+import { cn } from "@/lib/utils";
+import LiveRunRow from "./components/LiveRunNow";
+import StatCard from "@/components/app/StatCard";
+
+/* ---------------- 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() {
+  // 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">
+        {/* 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" 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 */}
+        <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="bg-primary/10 text-primary">🔥 PB Pace</Badge>
+        </div>
+
+        {/* Table */}
+        <Card>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="pl-5">Runner</TableHead>
+                <TableHead>Problem</TableHead>
+                <TableHead>Time</TableHead>
+                <TableHead>Pace</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead className="pr-5" />
+              </TableRow>
+            </TableHeader>
+
+            <TableBody>
+              {sortedRuns.map((run, index) => (
+                <LiveRunRow key={run.id} {...run} index={index} />
+              ))}
+            </TableBody>
+          </Table>
+        </Card>
+      </div>
+    </div>
+  );
+}

src/components/app/Navbar.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import Link from "next/link";
-import { Timer, Trophy, User, 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 = [
   {
@@ -18,13 +19,8 @@ const navs = [
   },
   {
     link: "/runs",
-    icon: Timer,
+    icon: Radio,
-    name: "Runs",
+    name: "Live",
-  },
-  {
-    link: "/profile",
-    icon: User,
-    name: "Profile",
   },
 ];
 
@@ -51,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}
@@ -69,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">
+            <Avatar onClick={() => {}}>
-              Start Run
+              <AvatarFallback>
-            </button>
+                <User className="m-2" />
-
+              </AvatarFallback>
-            {/* Mobile menu button */}
+            </Avatar>
-            <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>
           </div>
         </div>
       </div>

src/components/app/SplitRow.tsx

@@ -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;

src/components/app/StatCard.tsx

@@ -1,35 +1,29 @@
-import { LucideIcon } from "lucide-react";
+import { Card, CardHeader, CardTitle } from "@/components/ui/card";
 
-interface StatCardProps {
+export default function StatCard({
+  icon: Icon,
+  label,
+  value,
+  index = 0,
+}: {
+  icon: any;
   label: string;
   value: string;
-  icon: LucideIcon;
-  trend?: string;
   index?: number;
-}
+}) {
-
-const StatCard = ({ label, value, icon: Icon, trend, index = 0 }: StatCardProps) => {
   return (
-    <div 
+    <Card
-      className="bg-card border border-border rounded-xl p-5 card-hover animate-fade-in opacity-0"
+      className="opacity-0 animate-fade-in"
-      style={{ animationDelay: `${index * 0.1}s`, animationFillMode: 'forwards' }}
+      style={{
+        animationDelay: `${index * 0.1}s`,
+        animationFillMode: "forwards",
+      }}
     >
-      <div className="flex items-start justify-between mb-3">
+      <CardHeader className="pb-2 text-center">
-        <div className="p-2 rounded-lg bg-primary/10">
+        <Icon className="mx-auto h-5 w-5 text-primary" />
-          <Icon className="h-5 w-5 text-primary" />
+        <CardTitle className="font-mono text-2xl">{value}</CardTitle>
-        </div>
+        <p className="text-xs text-muted-foreground">{label}</p>
-        {trend && (
+      </CardHeader>
-          <span className={`text-xs font-medium ${
+    </Card>
-            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>
   );
-};
+}
-
-export default StatCard;

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 animate-fade-in stagger-4">
+        <Button variant="outline">
+          <Github className="h-4 w-4" />
+          GitHub
+        </Button>
+        <Button variant="outline" className="animate-fade-in stagger-5">
+          <Mail className="h-4 w-4" />
+          Google
+        </Button>
+      </div>
+    </>
+  );
+}

src/components/auth/LoginPage.tsx

@@ -0,0 +1,81 @@
+"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";
+import ContinueWith from "./ContinueWith";
+
+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 animate-fade-in stagger-1">
+            <LogIn className="h-6 w-6 text-primary" />
+          </div>
+          <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 animate-fade-in">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" type="email" placeholder="[email protected]" />
+            </div>
+            <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 animate-fade-in stagger-2"
+            variant="secondary"
+          >
+            Log In
+          </Button>
+
+          <ContinueWith />
+
+          <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>
+  );
+}

src/components/auth/RegisterPage.tsx

@@ -0,0 +1,77 @@
+"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";
+import ContinueWith from "./ContinueWith";
+
+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 animate-fade-in">
+            <UserPlus className="h-6 w-6 text-primary" />
+          </div>
+          <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 animate-fade-in">
+              <Label htmlFor="username">Username</Label>
+              <Input id="username" placeholder="speedrunner67" />
+            </div>
+            <div className="space-y-2 animate-fade-in stagger-1">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" type="email" placeholder="[email protected]" />
+            </div>
+            <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 animate-fade-in stagger-3"
+            variant="secondary"
+          >
+            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">
+              Log in
+            </Link>
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

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,
+}

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 }

src/components/ui/button.tsx

@@ -1,37 +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:
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-          "bg-primary text-primary-foreground hover:bg-primary/90 glow-purple hover:glow-purple-intense",
         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-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:
-          "text-muted-foreground hover:text-foreground hover:bg-secondary",
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link:
+        link: "text-primary underline-offset-4 hover:underline",
-          "text-primary underline-offset-4 hover:underline",
+        hero: "transition-colors duration-300 hover:text-primary text-glow",
-        hero:
-          "bg-primary text-primary-foreground px-8 py-6 text-lg font-bold glow-purple hover:glow-purple-intense hover:scale-105",
-        "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",
       },
       size: {
-        default: "h-10 px-4 py-2",
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-9 rounded-md px-3",
+        p2: "rounded-md p-2",
-        lg: "h-12 rounded-lg px-8",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        xl: "h-14 rounded-lg px-10 text-base",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        icon: "h-10 w-10",
+        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: {
@@ -41,18 +40,27 @@ const buttonVariants = cva(
   },
 );
 
-export interface ButtonProps
+function Button({
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  className,
-  VariantProps<typeof buttonVariants> {
+  variant = "default",
-  asChild?: boolean;
+  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 };

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,
+}

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 }

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 }

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,
+}

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 }

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-0.5",
+        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-0.5",
+        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,
+}

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 }

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 }

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 }