diff --git a/frontend/.env.example b/frontend/.env.example
new file mode 100644
index 0000000..6789bad
--- /dev/null
+++ b/frontend/.env.example
@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:8000/api
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 91d33b0..7f1b983 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,8 +9,10 @@
       "version": "0.0.0",
       "dependencies": {
         "@tailwindcss/vite": "^4.3.0",
+        "axios": "^1.18.0",
         "react": "^19.2.6",
         "react-dom": "^19.2.6",
+        "react-router-dom": "^7.18.0",
         "tailwindcss": "^4.3.0"
       },
       "devDependencies": {
@@ -19,6 +21,7 @@
         "@rolldown/plugin-babel": "^0.2.3",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
+        "@testing-library/user-event": "^14.6.1",
         "@types/babel__core": "^7.20.5",
         "@types/node": "^24.12.3",
         "@types/react": "^19.2.14",
@@ -1463,6 +1466,20 @@
         }
       }
     },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.6.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz",
+      "integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.2",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
@@ -2000,6 +2017,18 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.15.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
@@ -2062,6 +2091,24 @@
         "node": ">=12"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.18.0.tgz",
+      "integrity": "sha512-E32NzpYKp++W7XRe52rHiXV2ehxmh3wbdgO7MHeFM+vqxLBYHzt0ElkiImtOBxtOmyp0yoC8C6uESVV84Y2/hw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.16.0",
+        "form-data": "^4.0.5",
+        "https-proxy-agent": "^5.0.1",
+        "proxy-from-env": "^2.1.0"
+      }
+    },
     "node_modules/babel-plugin-react-compiler": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-react-compiler/-/babel-plugin-react-compiler-1.0.0.tgz",
@@ -2152,6 +2199,19 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001793",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001793.tgz",
@@ -2183,6 +2243,18 @@
         "node": ">=18"
       }
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -2190,6 +2262,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",
@@ -2251,7 +2336,6 @@
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -2279,6 +2363,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -2306,6 +2399,20 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.368",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.368.tgz",
@@ -2339,6 +2446,24 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "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==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-module-lexer": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.1.0.tgz",
@@ -2346,6 +2471,33 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -2660,6 +2812,42 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.6.tgz",
+      "integrity": "sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.4",
+        "mime-types": "^2.1.35"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2674,6 +2862,15 @@
         "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==",
+      "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",
@@ -2684,6 +2881,43 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -2710,12 +2944,63 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "license": "ISC"
     },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "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",
@@ -2746,6 +3031,19 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3246,6 +3544,15 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.27.1",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
@@ -3253,6 +3560,27 @@
       "dev": true,
       "license": "CC0-1.0"
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -3283,7 +3611,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/nanoid": {
@@ -3497,6 +3824,15 @@
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3536,6 +3872,44 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/react-router": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.0.tgz",
+      "integrity": "sha512-pTTGt8J+ji1NOmYnjzT+bAJy/1zD+Jp4ziO6cL7T3ZLvXKtusO7BpFqlRXitqpcPVqllsIXFHRMt+2/k3Xn6HQ==",
+      "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.18.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.0.tgz",
+      "integrity": "sha512-Fi0yY6kgtKae/Th2xibdWK0KSdYZ4B53Gyf6wRtomOKWgpNm7H7+DyfDhncdz9FKbpS+1jmDhg3F4WoGJ+yFOA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.18.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -3624,6 +3998,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",
diff --git a/frontend/package.json b/frontend/package.json
index 6bd9575..f73efd6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,8 +13,10 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.3.0",
+    "axios": "^1.18.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
+    "react-router-dom": "^7.18.0",
     "tailwindcss": "^4.3.0"
   },
   "devDependencies": {
@@ -23,6 +25,7 @@
     "@rolldown/plugin-babel": "^0.2.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/babel__core": "^7.20.5",
     "@types/node": "^24.12.3",
     "@types/react": "^19.2.14",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b4f6543..39258cb 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,35 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { AuthProvider } from './contexts/AuthContext';
+import { PublicRoute } from './routes/PublicRoute';
+import { ProtectedRoute } from './routes/ProtectedRoute';
+import RegisterPage from './pages/RegisterPage';
+import LoginPage from './pages/LoginPage';
+
 function App() {
-  return <></>;
+  return (
+    <BrowserRouter>
+      <AuthProvider>
+        <Routes>
+          {/* Public routes — redirect to /dashboard if already authenticated */}
+          <Route element={<PublicRoute />}>
+            <Route path="/register" element={<RegisterPage />} />
+            <Route path="/login" element={<LoginPage />} />
+          </Route>
+
+          {/* Protected routes — redirect to /login if not authenticated */}
+          <Route element={<ProtectedRoute />}>
+            <Route
+              path="/dashboard"
+              element={<div>Dashboard (placeholder)</div>}
+            />
+          </Route>
+
+          {/* Fallback */}
+          <Route path="*" element={<Navigate to="/login" replace />} />
+        </Routes>
+      </AuthProvider>
+    </BrowserRouter>
+  );
 }
 
 export default App;
diff --git a/frontend/src/api/.gitkeep b/frontend/src/api/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/frontend/src/api/axiosInstance.ts b/frontend/src/api/axiosInstance.ts
new file mode 100644
index 0000000..d47a347
--- /dev/null
+++ b/frontend/src/api/axiosInstance.ts
@@ -0,0 +1,30 @@
+import axios, { AxiosError } from 'axios';
+
+const axiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+  },
+  withCredentials: true,
+});
+
+axiosInstance.interceptors.request.use((config) => {
+  const token = sessionStorage.getItem('__auth_token__');
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+axiosInstance.interceptors.response.use(
+  (response) => response,
+  (error: AxiosError) => {
+    if (error.response?.status === 401) {
+      // Token expired / invalid — caller handles redirect
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default axiosInstance;
\ No newline at end of file
diff --git a/frontend/src/contexts/AuthContext.tsx b/frontend/src/contexts/AuthContext.tsx
new file mode 100644
index 0000000..1cabd7b
--- /dev/null
+++ b/frontend/src/contexts/AuthContext.tsx
@@ -0,0 +1,56 @@
+import {
+    createContext,
+    useState,
+    useEffect,
+    useCallback,
+    type ReactNode,
+  } from 'react';
+  import type { AuthUser, AuthState, LoginResponseData } from '../types/auth';
+  
+  interface AuthContextValue extends AuthState {
+    setAuth: (data: LoginResponseData) => void;
+    clearAuth: () => void;
+  }
+  
+  export const AuthContext = createContext<AuthContextValue | null>(null);
+  
+  const TOKEN_KEY = '__auth_token__';
+  
+  export function AuthProvider({ children }: { children: ReactNode }) {
+    const [user, setUser] = useState<AuthUser | null>(null);
+    const [token, setToken] = useState<string | null>(
+      () => sessionStorage.getItem(TOKEN_KEY)
+    );
+  
+    useEffect(() => {
+      if (token) {
+        sessionStorage.setItem(TOKEN_KEY, token);
+      } else {
+        sessionStorage.removeItem(TOKEN_KEY);
+      }
+    }, [token]);
+  
+    const setAuth = useCallback((data: LoginResponseData) => {
+      setToken(data.token);
+      setUser(data.user);
+    }, []);
+  
+    const clearAuth = useCallback(() => {
+      setToken(null);
+      setUser(null);
+    }, []);
+  
+    return (
+      <AuthContext.Provider
+        value={{
+          user,
+          token,
+          isAuthenticated: !!token,
+          setAuth,
+          clearAuth,
+        }}
+      >
+        {children}
+      </AuthContext.Provider>
+    );
+  }
\ No newline at end of file
diff --git a/frontend/src/hooks/useAuth.ts b/frontend/src/hooks/useAuth.ts
new file mode 100644
index 0000000..57304e2
--- /dev/null
+++ b/frontend/src/hooks/useAuth.ts
@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { AuthContext } from '../contexts/AuthContext';
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..2d24284
--- /dev/null
+++ b/frontend/src/pages/LoginPage.tsx
@@ -0,0 +1,300 @@
+import { useState } from 'react';
+import { useNavigate, useLocation, Link } from 'react-router-dom';
+import { AxiosError } from 'axios';
+import { authService } from '../services/authService';
+import { useAuth } from '../hooks/useAuth';
+import type { LoginPayload, ApiValidationError, UserRole } from '../types/auth';
+
+type FieldErrors = Partial<Record<keyof LoginPayload, string>>;
+
+const ROLE_REDIRECT: Record<UserRole, string> = {
+  patient: '/dashboard',
+  doctor: '/dashboard',
+  nurse: '/dashboard',
+  admin: '/dashboard',
+};
+
+export default function LoginPage() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { setAuth } = useAuth();
+
+  const successMessage = (location.state as { successMessage?: string } | null)
+    ?.successMessage;
+
+  const [form, setForm] = useState<LoginPayload>({ email: '', password: '' });
+  const [rememberMe, setRememberMe] = useState(false);
+  const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
+  const [genericError, setGenericError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const { name, value } = e.target;
+    setForm((prev) => ({ ...prev, [name]: value }));
+    setFieldErrors((prev) => ({ ...prev, [name]: undefined }));
+    setGenericError('');
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setIsLoading(true);
+    setFieldErrors({});
+    setGenericError('');
+
+    try {
+      const response = await authService.login(form);
+      setAuth(response.data);
+      navigate(ROLE_REDIRECT[response.data.user.role], { replace: true });
+    } catch (err) {
+      const error = err as AxiosError<ApiValidationError & { message: string }>;
+
+      if (error.response?.status === 422 && error.response.data.errors) {
+        const raw = error.response.data.errors;
+        const mapped: FieldErrors = {};
+        for (const key of Object.keys(raw) as Array<keyof LoginPayload>) {
+          mapped[key] = raw[key][0];
+        }
+        setFieldErrors(mapped);
+      } else if (error.response?.status === 401) {
+        setGenericError('Email atau password salah.');
+      } else {
+        setGenericError('Terjadi kesalahan. Silakan coba lagi.');
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.card}>
+        <div style={styles.header}>
+          <h1 style={styles.title}>QueueNova Health</h1>
+          <p style={styles.subtitle}>Masuk ke akun Anda</p>
+        </div>
+
+        {successMessage && (
+          <div style={styles.successBanner} role="status">
+            {successMessage}
+          </div>
+        )}
+
+        {genericError && (
+          <div style={styles.genericError} role="alert">
+            {genericError}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} noValidate style={styles.form}>
+          <div style={styles.fieldWrapper}>
+            <label htmlFor="email" style={styles.label}>
+              Email
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              value={form.email}
+              onChange={handleChange}
+              autoComplete="email"
+              placeholder="contoh@gmail.com"
+              aria-invalid={!!fieldErrors.email}
+              aria-describedby={fieldErrors.email ? 'email-error' : undefined}
+              style={{
+                ...styles.input,
+                ...(fieldErrors.email ? styles.inputError : {}),
+              }}
+            />
+            {fieldErrors.email && (
+              <span id="email-error" style={styles.fieldError} role="alert">
+                {fieldErrors.email}
+              </span>
+            )}
+          </div>
+
+          <div style={styles.fieldWrapper}>
+            <label htmlFor="password" style={styles.label}>
+              Password
+            </label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              value={form.password}
+              onChange={handleChange}
+              autoComplete="current-password"
+              placeholder="••••••••"
+              aria-invalid={!!fieldErrors.password}
+              aria-describedby={
+                fieldErrors.password ? 'password-error' : undefined
+              }
+              style={{
+                ...styles.input,
+                ...(fieldErrors.password ? styles.inputError : {}),
+              }}
+            />
+            {fieldErrors.password && (
+              <span id="password-error" style={styles.fieldError} role="alert">
+                {fieldErrors.password}
+              </span>
+            )}
+          </div>
+
+          <div style={styles.rememberRow}>
+            <label style={styles.checkboxLabel}>
+              <input
+                type="checkbox"
+                checked={rememberMe}
+                onChange={(e) => setRememberMe(e.target.checked)}
+                style={styles.checkbox}
+              />
+              Ingat saya
+            </label>
+          </div>
+
+          <button
+            type="submit"
+            disabled={isLoading}
+            style={{
+              ...styles.button,
+              ...(isLoading ? styles.buttonDisabled : {}),
+            }}
+          >
+            {isLoading ? 'Masuk...' : 'Masuk'}
+          </button>
+        </form>
+
+        <p style={styles.footer}>
+          Belum punya akun?{' '}
+          <Link to="/register" style={styles.link}>
+            Daftar sekarang
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  container: {
+    minHeight: '100vh',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#f5f7fa',
+    padding: '24px',
+  },
+  card: {
+    backgroundColor: '#ffffff',
+    borderRadius: '8px',
+    border: '1px solid #e2e8f0',
+    padding: '40px',
+    width: '100%',
+    maxWidth: '400px',
+  },
+  header: {
+    marginBottom: '28px',
+  },
+  title: {
+    fontSize: '20px',
+    fontWeight: 700,
+    color: '#1a202c',
+    margin: 0,
+  },
+  subtitle: {
+    fontSize: '14px',
+    color: '#64748b',
+    marginTop: '4px',
+    marginBottom: 0,
+  },
+  form: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px',
+  },
+  fieldWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  },
+  label: {
+    fontSize: '13px',
+    fontWeight: 500,
+    color: '#374151',
+  },
+  input: {
+    padding: '10px 12px',
+    fontSize: '14px',
+    border: '1px solid #d1d5db',
+    borderRadius: '6px',
+    outline: 'none',
+    color: '#1a202c',
+    backgroundColor: '#ffffff',
+  },
+  inputError: {
+    borderColor: '#ef4444',
+  },
+  fieldError: {
+    fontSize: '12px',
+    color: '#ef4444',
+  },
+  successBanner: {
+    padding: '10px 14px',
+    backgroundColor: '#f0fdf4',
+    border: '1px solid #bbf7d0',
+    borderRadius: '6px',
+    fontSize: '13px',
+    color: '#15803d',
+    marginBottom: '16px',
+  },
+  genericError: {
+    padding: '10px 14px',
+    backgroundColor: '#fef2f2',
+    border: '1px solid #fecaca',
+    borderRadius: '6px',
+    fontSize: '13px',
+    color: '#b91c1c',
+    marginBottom: '16px',
+  },
+  rememberRow: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  checkboxLabel: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    fontSize: '13px',
+    color: '#374151',
+    cursor: 'pointer',
+  },
+  checkbox: {
+    cursor: 'pointer',
+  },
+  button: {
+    marginTop: '4px',
+    padding: '11px',
+    backgroundColor: '#2563eb',
+    color: '#ffffff',
+    border: 'none',
+    borderRadius: '6px',
+    fontSize: '14px',
+    fontWeight: 600,
+    cursor: 'pointer',
+  },
+  buttonDisabled: {
+    backgroundColor: '#93c5fd',
+    cursor: 'not-allowed',
+  },
+  footer: {
+    marginTop: '20px',
+    fontSize: '13px',
+    color: '#64748b',
+    textAlign: 'center',
+  },
+  link: {
+    color: '#2563eb',
+    textDecoration: 'none',
+    fontWeight: 500,
+  },
+};
\ No newline at end of file
diff --git a/frontend/src/pages/RegisterPage.tsx b/frontend/src/pages/RegisterPage.tsx
new file mode 100644
index 0000000..b88afc2
--- /dev/null
+++ b/frontend/src/pages/RegisterPage.tsx
@@ -0,0 +1,282 @@
+import { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { AxiosError } from 'axios';
+import { authService } from '../services/authService';
+import type { RegisterPayload, ApiValidationError } from '../types/auth';
+
+type FieldErrors = Partial<Record<keyof RegisterPayload, string>>;
+
+export default function RegisterPage() {
+  const navigate = useNavigate();
+
+  const [form, setForm] = useState<RegisterPayload>({
+    name: '',
+    email: '',
+    password: '',
+    password_confirmation: '',
+    phone: '',
+  });
+
+  const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
+  const [genericError, setGenericError] = useState<string>('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const { name, value } = e.target;
+    setForm((prev) => ({ ...prev, [name]: value }));
+    setFieldErrors((prev) => ({ ...prev, [name]: undefined }));
+    setGenericError('');
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setIsLoading(true);
+    setFieldErrors({});
+    setGenericError('');
+
+    try {
+      await authService.register(form);
+      navigate('/login', {
+        state: { successMessage: 'Registrasi berhasil. Silakan login.' },
+      });
+    } catch (err) {
+      const error = err as AxiosError<ApiValidationError>;
+
+      if (error.response?.status === 422 && error.response.data.errors) {
+        const raw = error.response.data.errors;
+        const mapped: FieldErrors = {};
+        for (const key of Object.keys(raw) as Array<keyof RegisterPayload>) {
+          mapped[key] = raw[key][0];
+        }
+        setFieldErrors(mapped);
+      } else {
+        setGenericError('Terjadi kesalahan. Silakan coba lagi.');
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.card}>
+        <div style={styles.header}>
+          <h1 style={styles.title}>QueueNova Health</h1>
+          <p style={styles.subtitle}>Buat akun baru</p>
+        </div>
+
+        {genericError && (
+          <div style={styles.genericError} role="alert">
+            {genericError}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} noValidate style={styles.form}>
+          <Field
+            label="Nama Lengkap"
+            name="name"
+            type="text"
+            value={form.name}
+            onChange={handleChange}
+            error={fieldErrors.name}
+            autoComplete="name"
+          />
+          <Field
+            label="Email"
+            name="email"
+            type="email"
+            value={form.email}
+            onChange={handleChange}
+            error={fieldErrors.email}
+            autoComplete="email"
+          />
+          <Field
+            label="No. Telepon"
+            name="phone"
+            type="tel"
+            value={form.phone}
+            onChange={handleChange}
+            error={fieldErrors.phone}
+            autoComplete="tel"
+          />
+          <Field
+            label="Password"
+            name="password"
+            type="password"
+            value={form.password}
+            onChange={handleChange}
+            error={fieldErrors.password}
+            autoComplete="new-password"
+          />
+          <Field
+            label="Konfirmasi Password"
+            name="password_confirmation"
+            type="password"
+            value={form.password_confirmation}
+            onChange={handleChange}
+            error={fieldErrors.password_confirmation}
+            autoComplete="new-password"
+          />
+
+          <button
+            type="submit"
+            disabled={isLoading}
+            style={{
+              ...styles.button,
+              ...(isLoading ? styles.buttonDisabled : {}),
+            }}
+          >
+            {isLoading ? 'Mendaftar...' : 'Daftar'}
+          </button>
+        </form>
+
+        <p style={styles.footer}>
+          Sudah punya akun?{' '}
+          <Link to="/login" style={styles.link}>
+            Masuk
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+interface FieldProps {
+  label: string;
+  name: string;
+  type: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  error?: string;
+  autoComplete?: string;
+}
+
+function Field({ label, name, type, value, onChange, error, autoComplete }: FieldProps) {
+  return (
+    <div style={styles.fieldWrapper}>
+      <label htmlFor={name} style={styles.label}>
+        {label}
+      </label>
+      <input
+        id={name}
+        name={name}
+        type={type}
+        value={value}
+        onChange={onChange}
+        autoComplete={autoComplete}
+        aria-invalid={!!error}
+        aria-describedby={error ? `${name}-error` : undefined}
+        style={{
+          ...styles.input,
+          ...(error ? styles.inputError : {}),
+        }}
+      />
+      {error && (
+        <span id={`${name}-error`} style={styles.fieldError} role="alert">
+          {error}
+        </span>
+      )}
+    </div>
+  );
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  container: {
+    minHeight: '100vh',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#f5f7fa',
+    padding: '24px',
+  },
+  card: {
+    backgroundColor: '#ffffff',
+    borderRadius: '8px',
+    border: '1px solid #e2e8f0',
+    padding: '40px',
+    width: '100%',
+    maxWidth: '420px',
+  },
+  header: {
+    marginBottom: '28px',
+  },
+  title: {
+    fontSize: '20px',
+    fontWeight: 700,
+    color: '#1a202c',
+    margin: 0,
+  },
+  subtitle: {
+    fontSize: '14px',
+    color: '#64748b',
+    marginTop: '4px',
+    marginBottom: 0,
+  },
+  form: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px',
+  },
+  fieldWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+  },
+  label: {
+    fontSize: '13px',
+    fontWeight: 500,
+    color: '#374151',
+  },
+  input: {
+    padding: '10px 12px',
+    fontSize: '14px',
+    border: '1px solid #d1d5db',
+    borderRadius: '6px',
+    outline: 'none',
+    color: '#1a202c',
+    backgroundColor: '#ffffff',
+    transition: 'border-color 0.15s',
+  },
+  inputError: {
+    borderColor: '#ef4444',
+  },
+  fieldError: {
+    fontSize: '12px',
+    color: '#ef4444',
+  },
+  genericError: {
+    padding: '10px 14px',
+    backgroundColor: '#fef2f2',
+    border: '1px solid #fecaca',
+    borderRadius: '6px',
+    fontSize: '13px',
+    color: '#b91c1c',
+    marginBottom: '16px',
+  },
+  button: {
+    marginTop: '4px',
+    padding: '11px',
+    backgroundColor: '#2563eb',
+    color: '#ffffff',
+    border: 'none',
+    borderRadius: '6px',
+    fontSize: '14px',
+    fontWeight: 600,
+    cursor: 'pointer',
+  },
+  buttonDisabled: {
+    backgroundColor: '#93c5fd',
+    cursor: 'not-allowed',
+  },
+  footer: {
+    marginTop: '20px',
+    fontSize: '13px',
+    color: '#64748b',
+    textAlign: 'center',
+  },
+  link: {
+    color: '#2563eb',
+    textDecoration: 'none',
+    fontWeight: 500,
+  },
+};
\ No newline at end of file
diff --git a/frontend/src/routes/ProtectedRoute.tsx b/frontend/src/routes/ProtectedRoute.tsx
new file mode 100644
index 0000000..a9b21d8
--- /dev/null
+++ b/frontend/src/routes/ProtectedRoute.tsx
@@ -0,0 +1,12 @@
+import { Navigate, Outlet } from 'react-router-dom';
+import { useAuth } from '../hooks/useAuth';
+
+export function ProtectedRoute() {
+  const { isAuthenticated } = useAuth();
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <Outlet />;
+}
\ No newline at end of file
diff --git a/frontend/src/routes/PublicRoute.tsx b/frontend/src/routes/PublicRoute.tsx
new file mode 100644
index 0000000..3faff51
--- /dev/null
+++ b/frontend/src/routes/PublicRoute.tsx
@@ -0,0 +1,12 @@
+import { Navigate, Outlet } from 'react-router-dom';
+import { useAuth } from '../hooks/useAuth';
+
+export function PublicRoute() {
+  const { isAuthenticated } = useAuth();
+
+  if (isAuthenticated) {
+    return <Navigate to="/dashboard" replace />;
+  }
+
+  return <Outlet />;
+}
\ No newline at end of file
diff --git a/frontend/src/services/authService.ts b/frontend/src/services/authService.ts
new file mode 100644
index 0000000..d12badd
--- /dev/null
+++ b/frontend/src/services/authService.ts
@@ -0,0 +1,33 @@
+import axiosInstance from '../api/axiosInstance';
+import type {
+  RegisterPayload,
+  LoginPayload,
+  LoginResponseData,
+  AuthUser,
+  ApiSuccessResponse,
+} from '../types/auth';
+
+export const authService = {
+  async register(
+    payload: RegisterPayload
+  ): Promise<ApiSuccessResponse<AuthUser>> {
+    const response = await axiosInstance.post<ApiSuccessResponse<AuthUser>>(
+      '/auth/register',
+      payload
+    );
+    return response.data;
+  },
+
+  async login(
+    payload: LoginPayload
+  ): Promise<ApiSuccessResponse<LoginResponseData>> {
+    const response = await axiosInstance.post<
+ApiSuccessResponse<LoginResponseData>
+>('/auth/login', payload);
+    return response.data;
+  },
+
+  async logout(): Promise<void> {
+    await axiosInstance.post('/auth/logout');
+  },
+};
\ No newline at end of file
diff --git a/frontend/src/tests/pages/LoginPage.test.tsx b/frontend/src/tests/pages/LoginPage.test.tsx
new file mode 100644
index 0000000..7eb606b
--- /dev/null
+++ b/frontend/src/tests/pages/LoginPage.test.tsx
@@ -0,0 +1,188 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { AuthContext } from '../../contexts/AuthContext';
+import LoginPage from '../../pages/LoginPage';
+import { authService } from '../../services/authService';
+import type { AuthState, LoginResponseData } from '../../types/auth';
+
+vi.mock('../../services/authService');
+
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return { ...actual, useNavigate: () => mockNavigate };
+});
+
+const mockSetAuth = vi.fn<(data: LoginResponseData) => void>();
+const mockClearAuth = vi.fn<() => void>();
+
+const mockAuthContextValue = {
+    user: null,
+    token: null,
+    isAuthenticated: false,
+    setAuth: mockSetAuth,
+    clearAuth: mockClearAuth,
+  } satisfies AuthState & {
+    setAuth: (data: LoginResponseData) => void;
+    clearAuth: () => void;
+  };
+
+function renderLoginPage() {
+  return render(
+    <MemoryRouter>
+      <AuthContext.Provider value={mockAuthContextValue}>
+        <LoginPage />
+      </AuthContext.Provider>
+    </MemoryRouter>
+  );
+}
+
+const mockLoginResponse: { message: string; data: LoginResponseData } = {
+  message: 'Login berhasil.',
+  data: {
+    token: 'test-token-123',
+    token_type: 'Bearer',
+    user: {
+      user_id: 10,
+      email: 'ucok@example.com',
+      role: 'patient',
+      status: 'active',
+      profile: {
+        patient_id: 5,
+        name: 'Ucok Sitorus',
+        phone: '081234567890',
+        bpjs_number: null,
+        birth_place: null,
+        birth_date: null,
+        gender: null,
+      },
+    },
+  },
+};
+
+describe('LoginPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders email, password fields and submit button', () => {
+    renderLoginPage();
+    expect(screen.getByLabelText('Email')).toBeInTheDocument();
+    expect(screen.getByLabelText('Password')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Masuk' })).toBeInTheDocument();
+  });
+
+  it('calls authService.login with correct payload on submit', async () => {
+    vi.mocked(authService.login).mockResolvedValueOnce(mockLoginResponse);
+
+    renderLoginPage();
+
+    fireEvent.change(screen.getByLabelText('Email'), {
+      target: { value: 'ucok@example.com' },
+    });
+    fireEvent.change(screen.getByLabelText('Password'), {
+      target: { value: 'password123' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Masuk' }));
+
+    await waitFor(() => {
+      expect(authService.login).toHaveBeenCalledWith({
+        email: 'ucok@example.com',
+        password: 'password123',
+      });
+    });
+  });
+
+  it('calls setAuth and navigates to /dashboard on successful login', async () => {
+    vi.mocked(authService.login).mockResolvedValueOnce(mockLoginResponse);
+
+    renderLoginPage();
+    fireEvent.change(screen.getByLabelText('Email'), {
+      target: { value: 'ucok@example.com' },
+    });
+    fireEvent.change(screen.getByLabelText('Password'), {
+      target: { value: 'password123' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Masuk' }));
+
+    await waitFor(() => {
+      expect(mockSetAuth).toHaveBeenCalledWith(mockLoginResponse.data);
+      expect(mockNavigate).toHaveBeenCalledWith('/dashboard', { replace: true });
+    });
+  });
+
+  it('displays "Email atau password salah" on 401', async () => {
+    const { AxiosError } = await import('axios');
+    const error = new AxiosError('Unauthorized');
+    error.response = {
+      status: 401,
+      data: { message: 'Email atau password salah.' },
+    } as never;
+
+    vi.mocked(authService.login).mockRejectedValueOnce(error);
+
+    renderLoginPage();
+    fireEvent.click(screen.getByRole('button', { name: 'Masuk' }));
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('Email atau password salah.')
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('displays per-field errors on 422', async () => {
+    const { AxiosError } = await import('axios');
+    const error = new AxiosError('Validation error');
+    error.response = {
+      status: 422,
+      data: {
+        message: 'The given data was invalid.',
+        errors: { email: ['The email field is required.'] },
+      },
+    } as never;
+
+    vi.mocked(authService.login).mockRejectedValueOnce(error);
+
+    renderLoginPage();
+    fireEvent.click(screen.getByRole('button', { name: 'Masuk' }));
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('The email field is required.')
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('disables submit button while loading', async () => {
+    vi.mocked(authService.login).mockImplementation(
+      () => new Promise(() => {})
+    );
+
+    renderLoginPage();
+    fireEvent.click(screen.getByRole('button', { name: 'Masuk' }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Masuk...' })).toBeDisabled();
+    });
+  });
+
+  it('renders success message passed via location state', () => {
+    render(
+      <MemoryRouter
+        initialEntries={[
+          { pathname: '/login', state: { successMessage: 'Registrasi berhasil. Silakan login.' } },
+        ]}
+      >
+        <AuthContext.Provider value={mockAuthContextValue}>
+          <LoginPage />
+        </AuthContext.Provider>
+      </MemoryRouter>
+    );
+
+    expect(
+      screen.getByText('Registrasi berhasil. Silakan login.')
+    ).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/frontend/src/tests/pages/RegisterPage.test.tsx b/frontend/src/tests/pages/RegisterPage.test.tsx
new file mode 100644
index 0000000..4f13cb4
--- /dev/null
+++ b/frontend/src/tests/pages/RegisterPage.test.tsx
@@ -0,0 +1,160 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { AuthContext } from '../../contexts/AuthContext';
+import RegisterPage from '../../pages/RegisterPage';
+import { authService } from '../../services/authService';
+import type { AuthState, LoginResponseData } from '../../types/auth';
+
+vi.mock('../../services/authService');
+
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return { ...actual, useNavigate: () => mockNavigate };
+});
+
+const mockSetAuth = vi.fn<(data: LoginResponseData) => void>();
+const mockClearAuth = vi.fn<() => void>();
+
+const mockAuthContextValue = {
+  user: null,
+  token: null,
+  isAuthenticated: false,
+  setAuth: mockSetAuth,
+  clearAuth: mockClearAuth,
+} satisfies AuthState & {
+  setAuth: (data: LoginResponseData) => void;
+  clearAuth: () => void;
+};
+
+function renderRegisterPage() {
+  return render(
+    <MemoryRouter>
+      <AuthContext.Provider value={mockAuthContextValue}>
+        <RegisterPage />
+      </AuthContext.Provider>
+    </MemoryRouter>
+  );
+}
+
+describe('RegisterPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders all form fields and submit button', () => {
+    renderRegisterPage();
+    expect(screen.getByLabelText('Nama Lengkap')).toBeInTheDocument();
+    expect(screen.getByLabelText('Email')).toBeInTheDocument();
+    expect(screen.getByLabelText('No. Telepon')).toBeInTheDocument();
+    expect(screen.getByLabelText('Password')).toBeInTheDocument();
+    expect(screen.getByLabelText('Konfirmasi Password')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Daftar' })).toBeInTheDocument();
+  });
+
+  it('calls authService.register with form values on submit', async () => {
+    vi.mocked(authService.register).mockResolvedValueOnce({
+      message: 'Registrasi berhasil.',
+      data: {} as never,
+    });
+
+    renderRegisterPage();
+
+    fireEvent.change(screen.getByLabelText('Nama Lengkap'), {
+      target: { value: 'Ucok Sitorus' },
+    });
+    fireEvent.change(screen.getByLabelText('Email'), {
+      target: { value: 'ucok@example.com' },
+    });
+    fireEvent.change(screen.getByLabelText('No. Telepon'), {
+      target: { value: '081234567890' },
+    });
+    fireEvent.change(screen.getByLabelText('Password'), {
+      target: { value: 'password123' },
+    });
+    fireEvent.change(screen.getByLabelText('Konfirmasi Password'), {
+      target: { value: 'password123' },
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Daftar' }));
+
+    await waitFor(() => {
+      expect(authService.register).toHaveBeenCalledWith({
+        name: 'Ucok Sitorus',
+        email: 'ucok@example.com',
+        phone: '081234567890',
+        password: 'password123',
+        password_confirmation: 'password123',
+      });
+    });
+  });
+
+  it('redirects to /login with success message on 201', async () => {
+    vi.mocked(authService.register).mockResolvedValueOnce({
+      message: 'Registrasi berhasil.',
+      data: {} as never,
+    });
+
+    renderRegisterPage();
+    fireEvent.change(screen.getByLabelText('Email'), {
+      target: { value: 'ucok@example.com' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Daftar' }));
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/login', {
+        state: { successMessage: 'Registrasi berhasil. Silakan login.' },
+      });
+    });
+  });
+
+  it('displays per-field errors on 422', async () => {
+    const { AxiosError } = await import('axios');
+    const error = new AxiosError('Validation error');
+    error.response = {
+      status: 422,
+      data: {
+        message: 'The given data was invalid.',
+        errors: { email: ['The email has already been taken.'] },
+      },
+    } as never;
+
+    vi.mocked(authService.register).mockRejectedValueOnce(error);
+
+    renderRegisterPage();
+    fireEvent.click(screen.getByRole('button', { name: 'Daftar' }));
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('The email has already been taken.')
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('displays generic error on network failure', async () => {
+    vi.mocked(authService.register).mockRejectedValueOnce(new Error('Network Error'));
+
+    renderRegisterPage();
+    fireEvent.click(screen.getByRole('button', { name: 'Daftar' }));
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('Terjadi kesalahan. Silakan coba lagi.')
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('disables submit button while loading', async () => {
+    vi.mocked(authService.register).mockImplementation(
+      () => new Promise(() => {})
+    );
+
+    renderRegisterPage();
+    fireEvent.click(screen.getByRole('button', { name: 'Daftar' }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Mendaftar...' })).toBeDisabled();
+    });
+  });
+});
\ No newline at end of file
diff --git a/frontend/src/types/auth.ts b/frontend/src/types/auth.ts
new file mode 100644
index 0000000..8e1aaa6
--- /dev/null
+++ b/frontend/src/types/auth.ts
@@ -0,0 +1,54 @@
+export interface PatientProfile {
+    patient_id: number;
+    name: string;
+    phone: string;
+    bpjs_number: string | null;
+    birth_place: string | null;
+    birth_date: string | null;
+    gender: string | null;
+  }
+  
+  export type UserRole = 'patient' | 'doctor' | 'nurse' | 'admin';
+  
+  export interface AuthUser {
+    user_id: number;
+    email: string;
+    role: UserRole;
+    status: string;
+    profile: PatientProfile;
+  }
+  
+  export interface AuthState {
+    user: AuthUser | null;
+    token: string | null;
+    isAuthenticated: boolean;
+  }
+  
+  export interface RegisterPayload {
+    name: string;
+    email: string;
+    password: string;
+    password_confirmation: string;
+    phone: string;
+  }
+  
+  export interface LoginPayload {
+    email: string;
+    password: string;
+  }
+  
+  export interface LoginResponseData {
+    token: string;
+    token_type: string;
+    user: AuthUser;
+  }
+  
+  export interface ApiSuccessResponse<T> {
+    message: string;
+    data: T;
+  }
+  
+  export interface ApiValidationError {
+    message: string;
+    errors: Record<string, string[]>;
+  }
\ No newline at end of file