feature(home): add home page

2025-10-29 17:26:47 -03:00 · 2025-10-29 17:26:47 -03:00 · 3074dbd7cc
commit 3074dbd7cc
parent 3c4e2a9cbb
23 changed files with 2294 additions and 7 deletions
--- a/orval.config.ts
+++ b/orval.config.ts
@ -1,3 +1,4 @@
+// @ts-expect-error
 import { defineConfig } from "orval";

 export default defineConfig({
--- a/package-lock.json
+++ b/package-lock.json
@ -8,6 +8,10 @@
 			"name": "frontend",
 			"version": "0.0.0",
 			"dependencies": {
+				"@radix-ui/react-dropdown-menu": "^2.1.16",
+				"@radix-ui/react-separator": "^1.1.7",
+				"@radix-ui/react-slot": "^1.2.3",
+				"@radix-ui/react-switch": "^1.2.6",
 				"@tailwindcss/vite": "^4.1.16",
 				"@tanstack/react-query": "^5.90.5",
 				"axios": "^1.13.1",
@ -18,9 +22,13 @@
 				"orval": "^7.13.2",
 				"react": "^19.1.1",
 				"react-dom": "^19.1.1",
+				"react-hook-form": "^7.65.0",
+				"react-router": "^7.9.5",
 				"sonner": "^2.0.7",
 				"tailwind-merge": "^3.3.1",
-				"tailwindcss": "^4.1.16"
+				"tailwindcss": "^4.1.16",
+				"use-debounce": "^10.0.6",
+				"zod": "^4.1.12"
 			},
 			"devDependencies": {
 				"@eslint/js": "^9.36.0",
@ -1027,6 +1035,44 @@
 			"integrity": "sha512-5Aap/GaRupgNx/feGBwLLTVv8OQFfv3pq2lPRzPg9R+IOBnDgghTGW7l7EuVXOvg5cc/xSAlRW8rBrjIC3Nvqw==",
 			"license": "MIT"
 		},
+		"node_modules/@floating-ui/core": {
+			"version": "1.7.3",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+			"integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/utils": "^0.2.10"
+			}
+		},
+		"node_modules/@floating-ui/dom": {
+			"version": "1.7.4",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+			"integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/core": "^1.7.3",
+				"@floating-ui/utils": "^0.2.10"
+			}
+		},
+		"node_modules/@floating-ui/react-dom": {
+			"version": "2.1.6",
+			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz",
+			"integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==",
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/dom": "^1.7.4"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
+			}
+		},
+		"node_modules/@floating-ui/utils": {
+			"version": "0.2.10",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+			"integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+			"license": "MIT"
+		},
 		"node_modules/@gerrit0/mini-shiki": {
 			"version": "3.14.0",
 			"resolved": "https://registry.npmjs.org/@gerrit0/mini-shiki/-/mini-shiki-3.14.0.tgz",
@ -1387,6 +1433,606 @@
 				"openapi3-ts": "4.5.0"
 			}
 		},
+		"node_modules/@radix-ui/primitive": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+			"integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+			"license": "MIT"
+		},
+		"node_modules/@radix-ui/react-arrow": {
+			"version": "1.1.7",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+			"integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-primitive": "2.1.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-collection": {
+			"version": "1.1.7",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+			"integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-slot": "1.2.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-compose-refs": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+			"integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+			"license": "MIT",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-context": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+			"integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+			"license": "MIT",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-direction": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+			"integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+			"license": "MIT",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-dismissable-layer": {
+			"version": "1.1.11",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
+			"integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-use-callback-ref": "1.1.1",
+				"@radix-ui/react-use-escape-keydown": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-dropdown-menu": {
+			"version": "2.1.16",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.16.tgz",
+			"integrity": "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-id": "1.1.1",
+				"@radix-ui/react-menu": "2.1.16",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-use-controllable-state": "1.2.2"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-focus-guards": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
+			"integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==",
+			"license": "MIT",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-focus-scope": {
+			"version": "1.1.7",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+			"integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-use-callback-ref": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-id": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+			"integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-use-layout-effect": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-menu": {
+			"version": "2.1.16",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
+			"integrity": "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-collection": "1.1.7",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-direction": "1.1.1",
+				"@radix-ui/react-dismissable-layer": "1.1.11",
+				"@radix-ui/react-focus-guards": "1.1.3",
+				"@radix-ui/react-focus-scope": "1.1.7",
+				"@radix-ui/react-id": "1.1.1",
+				"@radix-ui/react-popper": "1.2.8",
+				"@radix-ui/react-portal": "1.1.9",
+				"@radix-ui/react-presence": "1.1.5",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-roving-focus": "1.1.11",
+				"@radix-ui/react-slot": "1.2.3",
+				"@radix-ui/react-use-callback-ref": "1.1.1",
+				"aria-hidden": "^1.2.4",
+				"react-remove-scroll": "^2.6.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-popper": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
+			"integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/react-dom": "^2.0.0",
+				"@radix-ui/react-arrow": "1.1.7",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-use-callback-ref": "1.1.1",
+				"@radix-ui/react-use-layout-effect": "1.1.1",
+				"@radix-ui/react-use-rect": "1.1.1",
+				"@radix-ui/react-use-size": "1.1.1",
+				"@radix-ui/rect": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-portal": {
+			"version": "1.1.9",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+			"integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-use-layout-effect": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-presence": {
+			"version": "1.1.5",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+			"integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-use-layout-effect": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-primitive": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+			"integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-slot": "1.2.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-roving-focus": {
+			"version": "1.1.11",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
+			"integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-collection": "1.1.7",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-direction": "1.1.1",
+				"@radix-ui/react-id": "1.1.1",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-use-callback-ref": "1.1.1",
+				"@radix-ui/react-use-controllable-state": "1.2.2"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-separator": {
+			"version": "1.1.7",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
+			"integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-primitive": "2.1.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-slot": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+			"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-compose-refs": "1.1.2"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-switch": {
+			"version": "1.2.6",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.6.tgz",
+			"integrity": "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-use-controllable-state": "1.2.2",
+				"@radix-ui/react-use-previous": "1.1.1",
+				"@radix-ui/react-use-size": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-use-callback-ref": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+			"integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+			"license": "MIT",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-use-controllable-state": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+			"integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-use-effect-event": "0.0.2",
+				"@radix-ui/react-use-layout-effect": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-use-effect-event": {
+			"version": "0.0.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+			"integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-use-layout-effect": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-use-escape-keydown": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+			"integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-use-callback-ref": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-use-layout-effect": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+			"integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+			"license": "MIT",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-use-previous": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+			"integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+			"license": "MIT",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-use-rect": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+			"integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/rect": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-use-size": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+			"integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-use-layout-effect": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/rect": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+			"integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+			"license": "MIT"
+		},
 		"node_modules/@rolldown/pluginutils": {
 			"version": "1.0.0-beta.43",
 			"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.43.tgz",
@ -2520,7 +3166,7 @@
 			"version": "19.2.2",
 			"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
 			"integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"csstype": "^3.0.2"
@ -2530,7 +3176,7 @@
 			"version": "19.2.2",
 			"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz",
 			"integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"peerDependencies": {
 				"@types/react": "^19.2.0"
@ -2969,6 +3615,18 @@
 			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
 			"license": "Python-2.0"
 		},
+		"node_modules/aria-hidden": {
+			"version": "1.2.6",
+			"resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+			"integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/array-buffer-byte-length": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
@ -3345,6 +4003,15 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/cookie": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+			"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/cross-spawn": {
 			"version": "7.0.6",
 			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@ -3363,7 +4030,7 @@
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
 			"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT"
 		},
 		"node_modules/data-view-buffer": {
@ -3502,6 +4169,12 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/detect-node-es": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+			"integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+			"license": "MIT"
+		},
 		"node_modules/dir-glob": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@ -4324,6 +4997,15 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/get-nonce": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+			"integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/get-proto": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
@ -6229,6 +6911,22 @@
 				"react": "^19.2.0"
 			}
 		},
+		"node_modules/react-hook-form": {
+			"version": "7.65.0",
+			"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.65.0.tgz",
+			"integrity": "sha512-xtOzDz063WcXvGWaHgLNrNzlsdFgtUWcb32E6WFaGTd7kPZG3EeDusjdZfUsPwKCKVXy1ZlntifaHZ4l8pAsmw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/react-hook-form"
+			},
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17 || ^18 || ^19"
+			}
+		},
 		"node_modules/react-refresh": {
 			"version": "0.18.0",
 			"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
@ -6239,6 +6937,97 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/react-remove-scroll": {
+			"version": "2.7.1",
+			"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz",
+			"integrity": "sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==",
+			"license": "MIT",
+			"dependencies": {
+				"react-remove-scroll-bar": "^2.3.7",
+				"react-style-singleton": "^2.2.3",
+				"tslib": "^2.1.0",
+				"use-callback-ref": "^1.3.3",
+				"use-sidecar": "^1.1.3"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/react-remove-scroll-bar": {
+			"version": "2.3.8",
+			"resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+			"integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+			"license": "MIT",
+			"dependencies": {
+				"react-style-singleton": "^2.2.2",
+				"tslib": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/react-router": {
+			"version": "7.9.5",
+			"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.5.tgz",
+			"integrity": "sha512-JmxqrnBZ6E9hWmf02jzNn9Jm3UqyeimyiwzD69NjxGySG6lIz/1LVPsoTCwN7NBX2XjCEa1LIX5EMz1j2b6u6A==",
+			"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-style-singleton": {
+			"version": "2.2.3",
+			"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+			"integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+			"license": "MIT",
+			"dependencies": {
+				"get-nonce": "^1.0.0",
+				"tslib": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/readdirp": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@ -6479,6 +7268,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/set-function-length": {
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@ -7314,6 +8109,61 @@
 			"integrity": "sha512-HXgFDgDommxn5/bIv0cnQZsPhHDA90NPHD6+c/v21U5+Sx5hoP8+dP9IZXBU1gIfvdRfhG8cel9QNPeionfcCQ==",
 			"license": "MIT"
 		},
+		"node_modules/use-callback-ref": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+			"integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/use-debounce": {
+			"version": "10.0.6",
+			"resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.6.tgz",
+			"integrity": "sha512-C5OtPyhAZgVoteO9heXMTdW7v/IbFI+8bSVKYCJrSmiWWCLsbUxiBSp4t9v0hNBTGY97bT72ydDIDyGSFWfwXg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 16.0.0"
+			},
+			"peerDependencies": {
+				"react": "*"
+			}
+		},
+		"node_modules/use-sidecar": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+			"integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+			"license": "MIT",
+			"dependencies": {
+				"detect-node-es": "^1.1.0",
+				"tslib": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/utility-types": {
 			"version": "3.11.0",
 			"resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
@ -7644,6 +8494,15 @@
 			"funding": {
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
+		},
+		"node_modules/zod": {
+			"version": "4.1.12",
+			"resolved": "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz",
+			"integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/colinhacks"
+			}
 		}
 	}
 }
--- a/package.json
+++ b/package.json
@ -10,6 +10,10 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"@radix-ui/react-dropdown-menu": "^2.1.16",
+		"@radix-ui/react-separator": "^1.1.7",
+		"@radix-ui/react-slot": "^1.2.3",
+		"@radix-ui/react-switch": "^1.2.6",
 		"@tailwindcss/vite": "^4.1.16",
 		"@tanstack/react-query": "^5.90.5",
 		"axios": "^1.13.1",
@ -20,9 +24,13 @@
 		"orval": "^7.13.2",
 		"react": "^19.1.1",
 		"react-dom": "^19.1.1",
+		"react-hook-form": "^7.65.0",
+		"react-router": "^7.9.5",
 		"sonner": "^2.0.7",
 		"tailwind-merge": "^3.3.1",
-		"tailwindcss": "^4.1.16"
+		"tailwindcss": "^4.1.16",
+		"use-debounce": "^10.0.6",
+		"zod": "^4.1.12"
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.36.0",
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,3 +1,14 @@
+import { Suspense } from "react";
+import { RouterProvider } from "react-router";
+import { Router } from "@/pages/Router.tsx";
+import { Providers } from "@/providers/Providers.tsx";
+
 export const App = () => {
-	return <div></div>;
+	return (
+		<Suspense fallback={null}>
+			<Providers>
+				<RouterProvider router={Router} />
+			</Providers>
+		</Suspense>
+	);
 };
--- a/src/api/api.ts
+++ b/src/api/api.ts
@ -3,7 +3,7 @@ import { toast } from "sonner";
 import type { User } from "@/contexts/AuthContext.tsx";

 export const Api = axios.create({
-	baseURL: import.meta.env.NEXT_PUBLIC_API_BASE_URL,
+	baseURL: import.meta.env.VITE_API_BASE_URL,
 	responseType: "json",
 });

--- a/src/components/Layout/AppLayout.tsx
+++ b/src/components/Layout/AppLayout.tsx
@ -0,0 +1,9 @@
+import { Outlet } from "react-router";
+
+export const AppLayout = () => {
+	return (
+		<div>
+			<Outlet />
+		</div>
+	);
+};
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@ -0,0 +1,90 @@
+"use client";
+
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface PaginationProps {
+	currentPage: number;
+	totalPages: number;
+	onPageChange: (page: number) => void;
+}
+
+export const Pagination = ({
+	currentPage,
+	totalPages,
+	onPageChange,
+}: PaginationProps) => {
+	const getPageNumbers = () => {
+		const pages: (number | string)[] = [];
+		const showEllipsis = totalPages > 7;
+
+		if (!showEllipsis) {
+			return Array.from({ length: totalPages }, (_, i) => i + 1);
+		}
+
+		// Always show first page
+		pages.push(1);
+
+		if (currentPage > 3) {
+			pages.push("...");
+		}
+
+		// Show pages around current page
+		for (
+			let i = Math.max(2, currentPage - 1);
+			i <= Math.min(totalPages - 1, currentPage + 1);
+			i++
+		) {
+			pages.push(i);
+		}
+
+		if (currentPage < totalPages - 2) {
+			pages.push("...");
+		}
+
+		// Always show last page
+		if (totalPages > 1) {
+			pages.push(totalPages);
+		}
+
+		return pages;
+	};
+
+	return (
+		<div className="flex items-center justify-center gap-2">
+			<Button
+				variant="outline"
+				size="icon"
+				onClick={() => onPageChange(currentPage - 1)}
+				disabled={currentPage === 1}
+			>
+				<ChevronLeft className="h-4 w-4" />
+			</Button>
+
+			{getPageNumbers().map((page, index) => (
+				<div key={index}>
+					{page === "..." ? (
+						<span className="px-2 text-muted-foreground">...</span>
+					) : (
+						<Button
+							variant={currentPage === page ? "default" : "outline"}
+							size="icon"
+							onClick={() => onPageChange(page as number)}
+						>
+							{page}
+						</Button>
+					)}
+				</div>
+			))}
+
+			<Button
+				variant="outline"
+				size="icon"
+				onClick={() => onPageChange(currentPage + 1)}
+				disabled={currentPage === totalPages}
+			>
+				<ChevronRight className="h-4 w-4" />
+			</Button>
+		</div>
+	);
+};
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@ -0,0 +1,46 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+	"inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+	{
+		variants: {
+			variant: {
+				default:
+					"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+				secondary:
+					"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+				destructive:
+					"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+				outline:
+					"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+function Badge({
+	className,
+	variant,
+	asChild = false,
+	...props
+}: React.ComponentProps<"span"> &
+	VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : "span";
+
+	return (
+		<Comp
+			data-slot="badge"
+			className={cn(badgeVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+export { Badge, badgeVariants };
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@ -0,0 +1,60 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90",
+				destructive:
+					"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+				outline:
+					"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				ghost:
+					"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+				"icon-sm": "size-8",
+				"icon-lg": "size-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function Button({
+	className,
+	variant,
+	size,
+	asChild = false,
+	...props
+}: React.ComponentProps<"button"> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	}) {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			data-slot="button"
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
+}
+
+export { Button, buttonVariants };
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@ -0,0 +1,92 @@
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card"
+			className={cn(
+				"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-header"
+			className={cn(
+				"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-title"
+			className={cn("leading-none font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-action"
+			className={cn(
+				"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-content"
+			className={cn("px-6", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-footer"
+			className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Card,
+	CardHeader,
+	CardFooter,
+	CardTitle,
+	CardAction,
+	CardDescription,
+	CardContent,
+};
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@ -0,0 +1,255 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function DropdownMenu({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+	return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+	return (
+		<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+	);
+}
+
+function DropdownMenuTrigger({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+	return (
+		<DropdownMenuPrimitive.Trigger
+			data-slot="dropdown-menu-trigger"
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuContent({
+	className,
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+	return (
+		<DropdownMenuPrimitive.Portal>
+			<DropdownMenuPrimitive.Content
+				data-slot="dropdown-menu-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+					className,
+				)}
+				{...props}
+			/>
+		</DropdownMenuPrimitive.Portal>
+	);
+}
+
+function DropdownMenuGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+	return (
+		<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+	);
+}
+
+function DropdownMenuItem({
+	className,
+	inset,
+	variant = "default",
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+	inset?: boolean;
+	variant?: "default" | "destructive";
+}) {
+	return (
+		<DropdownMenuPrimitive.Item
+			data-slot="dropdown-menu-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuCheckboxItem({
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+	return (
+		<DropdownMenuPrimitive.CheckboxItem
+			data-slot="dropdown-menu-checkbox-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			checked={checked}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.CheckboxItem>
+	);
+}
+
+function DropdownMenuRadioGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+	return (
+		<DropdownMenuPrimitive.RadioGroup
+			data-slot="dropdown-menu-radio-group"
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuRadioItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+	return (
+		<DropdownMenuPrimitive.RadioItem
+			data-slot="dropdown-menu-radio-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<CircleIcon className="size-2 fill-current" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.RadioItem>
+	);
+}
+
+function DropdownMenuLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+	inset?: boolean;
+}) {
+	return (
+		<DropdownMenuPrimitive.Label
+			data-slot="dropdown-menu-label"
+			data-inset={inset}
+			className={cn(
+				"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+	return (
+		<DropdownMenuPrimitive.Separator
+			data-slot="dropdown-menu-separator"
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuShortcut({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="dropdown-menu-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuSub({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+	return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+	inset?: boolean;
+}) {
+	return (
+		<DropdownMenuPrimitive.SubTrigger
+			data-slot="dropdown-menu-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronRightIcon className="ml-auto size-4" />
+		</DropdownMenuPrimitive.SubTrigger>
+	);
+}
+
+function DropdownMenuSubContent({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+	return (
+		<DropdownMenuPrimitive.SubContent
+			data-slot="dropdown-menu-sub-content"
+			className={cn(
+				"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	DropdownMenu,
+	DropdownMenuPortal,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuLabel,
+	DropdownMenuItem,
+	DropdownMenuCheckboxItem,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuSub,
+	DropdownMenuSubTrigger,
+	DropdownMenuSubContent,
+};
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@ -0,0 +1,21 @@
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+	return (
+		<input
+			type={type}
+			data-slot="input"
+			className={cn(
+				"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+				"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+				"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Input };
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@ -0,0 +1,26 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Separator({
+	className,
+	orientation = "horizontal",
+	decorative = true,
+	...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+	return (
+		<SeparatorPrimitive.Root
+			data-slot="separator"
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Separator };
--- a/src/components/ui/skeleton.tsx
+++ b/src/components/ui/skeleton.tsx
@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="skeleton"
+			className={cn("bg-accent animate-pulse rounded-md", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Skeleton };
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@ -0,0 +1,29 @@
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Switch({
+	className,
+	...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+	return (
+		<SwitchPrimitive.Root
+			data-slot="switch"
+			className={cn(
+				"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		>
+			<SwitchPrimitive.Thumb
+				data-slot="switch-thumb"
+				className={cn(
+					"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
+				)}
+			/>
+		</SwitchPrimitive.Root>
+	);
+}
+
+export { Switch };
--- a/src/features/home/components/FilterSidebar.tsx
+++ b/src/features/home/components/FilterSidebar.tsx
@ -0,0 +1,224 @@
+"use client";
+
+import { Star, X } from "lucide-react";
+import { useGetGenres } from "@/api/generated/genre/genre.ts";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator.tsx";
+import { Skeleton } from "@/components/ui/skeleton.tsx";
+import { Switch } from "@/components/ui/switch.tsx";
+import { useAuth } from "@/contexts/AuthContext.tsx";
+
+interface FilterSidebarProps {
+	selectedGenres: number[];
+	selectedStatus: string[];
+	minRating: number;
+	userFavorites: boolean;
+	showAdultContent: boolean;
+	onGenresChange: (genres: number[]) => void;
+	onStatusChange: (status: string[]) => void;
+	onRatingChange: (rating: number) => void;
+	onUserFavoritesChange: (favorites: boolean) => void;
+	onShowAdultContentChange: (showAdult: boolean) => void;
+}
+
+const STATUSES = ["Ongoing", "Completed", "Hiatus"];
+
+const RATINGS = [
+	{ label: "8.5+ Stars", value: 8.5 },
+	{ label: "7.0+ Stars", value: 7.0 },
+	{ label: "5.0+ Stars", value: 5.0 },
+	{ label: "All Ratings", value: 0 },
+];
+
+export function FilterSidebar({
+	selectedGenres,
+	selectedStatus,
+	minRating,
+	userFavorites,
+	showAdultContent,
+	onGenresChange,
+	onStatusChange,
+	onRatingChange,
+	onUserFavoritesChange,
+	onShowAdultContentChange,
+}: FilterSidebarProps) {
+	const { data: genresData, isPending: isPendingGenres } = useGetGenres();
+	const { isAuthenticated } = useAuth();
+
+	const toggleGenre = (genre: number) => {
+		if (selectedGenres.includes(genre)) {
+			onGenresChange(selectedGenres.filter((g) => g !== genre));
+		} else {
+			onGenresChange([...selectedGenres, genre]);
+		}
+	};
+
+	const toggleStatus = (status: string) => {
+		if (selectedStatus.includes(status)) {
+			onStatusChange(selectedStatus.filter((s) => s !== status));
+		} else {
+			onStatusChange([...selectedStatus, status]);
+		}
+	};
+
+	const clearAllFilters = () => {
+		onGenresChange([]);
+		onStatusChange([]);
+		onRatingChange(0);
+		onUserFavoritesChange(false);
+		onShowAdultContentChange(false);
+	};
+
+	const hasActiveFilters =
+		selectedGenres.length > 0 ||
+		selectedStatus.length > 0 ||
+		minRating > 0 ||
+		userFavorites;
+
+	return (
+		<aside className="w-64 border-r border-border bg-sidebar">
+			<div className="sticky top-0 flex h-screen flex-col">
+				{/* Header */}
+				<div className="flex items-center justify-between border-b border-sidebar-border px-6 py-6">
+					<h2 className="text-lg font-semibold text-sidebar-foreground">
+						Filters
+					</h2>
+					{hasActiveFilters && (
+						<Button
+							variant="ghost"
+							size="sm"
+							onClick={clearAllFilters}
+							className="h-8 px-2 text-xs"
+						>
+							Clear
+						</Button>
+					)}
+				</div>
+
+				{/* Filters */}
+				<div className="flex-1 overflow-y-auto px-6 py-6">
+					<div className="space-y-8">
+						{isAuthenticated && (
+							<>
+								<div>
+									<h3 className="mb-3 text-sm font-medium text-sidebar-foreground">
+										Content
+									</h3>
+									<div className="flex items-center justify-between rounded-md px-3 py-2">
+										<label className="text-sm text-sidebar-foreground">
+											Show Only Favorites
+										</label>
+										<Switch
+											checked={userFavorites}
+											onCheckedChange={onUserFavoritesChange}
+										/>
+									</div>
+									<div className="flex items-center justify-between rounded-md px-3 py-2">
+										<label className="text-sm text-sidebar-foreground">
+											Show Adult Content
+										</label>
+										<Switch
+											checked={showAdultContent}
+											onCheckedChange={onShowAdultContentChange}
+										/>
+									</div>
+								</div>
+
+								<Separator className="bg-sidebar-border" />
+							</>
+						)}
+
+						{/* Genres */}
+						<div>
+							<h3 className="mb-3 text-sm font-medium text-sidebar-foreground">
+								Genres
+							</h3>
+							<div className="flex flex-wrap gap-2">
+								{isPendingGenres && <Skeleton className="h-[240px] w-full" />}
+								{!isPendingGenres &&
+									genresData?.data?.map((genre) => {
+										const isSelected = selectedGenres.includes(genre.id);
+										return (
+											<Badge
+												key={genre.id}
+												variant={isSelected ? "default" : "outline"}
+												className={`cursor-pointer transition-colors ${
+													isSelected
+														? "bg-sidebar-primary text-sidebar-primary-foreground hover:bg-sidebar-primary/90"
+														: "border-sidebar-border text-sidebar-foreground hover:bg-sidebar-accent"
+												}`}
+												onClick={() => toggleGenre(genre.id)}
+											>
+												{genre.name}
+												{isSelected && <X className="ml-1 h-3 w-3" />}
+											</Badge>
+										);
+									})}
+							</div>
+						</div>
+
+						<Separator className="bg-sidebar-border" />
+
+						{/* Status */}
+						<div>
+							<h3 className="mb-3 text-sm font-medium text-sidebar-foreground">
+								Status
+							</h3>
+							<div className="flex flex-wrap gap-2">
+								{STATUSES.map((status) => {
+									const isSelected = selectedStatus.includes(status);
+									return (
+										<Badge
+											key={status}
+											variant={isSelected ? "default" : "outline"}
+											className={`cursor-pointer transition-colors ${
+												isSelected
+													? "bg-sidebar-primary text-sidebar-primary-foreground hover:bg-sidebar-primary/90"
+													: "border-sidebar-border text-sidebar-foreground hover:bg-sidebar-accent"
+											}`}
+											onClick={() => toggleStatus(status)}
+										>
+											{status}
+											{isSelected && <X className="ml-1 h-3 w-3" />}
+										</Badge>
+									);
+								})}
+							</div>
+						</div>
+
+						<Separator className="bg-sidebar-border" />
+
+						{/* Rating */}
+						<div>
+							<h3 className="mb-3 text-sm font-medium text-sidebar-foreground">
+								Minimum Rating
+							</h3>
+							<div className="space-y-2">
+								{RATINGS.map((rating) => {
+									const isSelected = minRating === rating.value;
+									return (
+										<button
+											key={rating.value}
+											onClick={() => onRatingChange(rating.value)}
+											className={`flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors ${
+												isSelected
+													? "bg-sidebar-accent text-sidebar-accent-foreground"
+													: "text-sidebar-foreground hover:bg-sidebar-accent/50"
+											}`}
+										>
+											<Star
+												className={`h-4 w-4 ${isSelected ? "fill-sidebar-primary text-sidebar-primary" : "text-muted-foreground"}`}
+											/>
+											<span>{rating.label}</span>
+										</button>
+									);
+								})}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</aside>
+	);
+}
--- a/src/features/home/components/MangaCard.tsx
+++ b/src/features/home/components/MangaCard.tsx
@ -0,0 +1,179 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { Calendar, Database, Heart, Star } from "lucide-react";
+import { useCallback } from "react";
+import { Link } from "react-router";
+import type {
+	MangaListDTO,
+	PageMangaListDTO,
+} from "@/api/generated/api.schemas.ts";
+import {
+	useSetFavorite,
+	useSetUnfavorite,
+} from "@/api/generated/favorite-mangas/favorite-mangas.ts";
+import { Badge } from "@/components/ui/badge.tsx";
+import { Button } from "@/components/ui/button.tsx";
+import { Card, CardContent } from "@/components/ui/card.tsx";
+import { useAuth } from "@/contexts/AuthContext.tsx";
+import { formatToTwoDigitsDateRange } from "@/utils/dateFormatter.ts";
+
+interface MangaCardProps {
+	manga: MangaListDTO;
+	queryKey: unknown;
+}
+
+export const MangaCard = ({ manga, queryKey }: MangaCardProps) => {
+	const { isAuthenticated } = useAuth();
+	const queryClient = useQueryClient();
+
+	const updateQueryData = useCallback(
+		(oldData: PageMangaListDTO | undefined, isFavorite: boolean) => ({
+			...oldData,
+			content:
+				oldData?.content?.map((manga) =>
+					manga.id === manga.id ? { ...manga, favorite: isFavorite } : manga,
+				) || [],
+		}),
+		[],
+	);
+
+	const { mutate: mutateFavorite, isPending: isPendingFavorite } =
+		useSetFavorite({
+			mutation: {
+				onSuccess: () =>
+					queryClient.setQueryData(
+						[queryKey],
+						(oldData: PageMangaListDTO | undefined) =>
+							updateQueryData(oldData, true),
+					),
+			},
+		});
+
+	const { mutate: mutateUnfavorite, isPending: isPendingUnfavorite } =
+		useSetUnfavorite({
+			mutation: {
+				onSuccess: () =>
+					queryClient.setQueryData(
+						[queryKey],
+						(oldData: PageMangaListDTO | undefined) =>
+							updateQueryData(oldData, false),
+					),
+			},
+		});
+
+	const isPendingFavoriteChange = isPendingFavorite || isPendingUnfavorite;
+
+	const handleFavoriteClick = useCallback(
+		(isFavorite: boolean) => {
+			isFavorite
+				? mutateUnfavorite({ id: manga.id })
+				: mutateFavorite({ id: manga.id });
+		},
+		[mutateUnfavorite, manga.id, mutateFavorite],
+	);
+
+	return (
+		<Card className="h-full group overflow-hidden border-border bg-card py-0 gap-0 transition-all hover:border-primary/50 hover:shadow-lg hover:shadow-primary/10 cursor-pointer relative">
+			<CardContent className="p-0">
+				<div className="relative aspect-[2/3] overflow-hidden bg-muted">
+					<Link to={`/manga/${manga.id}`}>
+						<img
+							src={
+								(manga.coverImageKey &&
+									import.meta.env.VITE_OMV_BASE_URL +
+										"/" +
+										manga.coverImageKey) ||
+								"/placeholder.svg"
+							}
+							alt={manga.title}
+							className="absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+						/>
+						<div className="absolute right-2 top-2">
+							<Badge
+								variant="secondary"
+								className="border border-border/50 bg-background/80 text-foreground backdrop-blur-sm"
+							>
+								{manga.status}
+							</Badge>
+						</div>
+					</Link>
+
+					{isAuthenticated && (
+						<Button
+							size="icon"
+							variant="ghost"
+							onClick={(event) => {
+								event.preventDefault();
+								event.stopPropagation();
+								handleFavoriteClick(manga.favorite);
+							}}
+							className="absolute left-2 top-2 h-8 w-8 rounded-full bg-background/80 backdrop-blur-sm hover:bg-background/90"
+							disabled={isPendingFavoriteChange}
+						>
+							<Heart
+								className={`h-4 w-4 transition-colors ${
+									manga.favorite
+										? "fill-red-500 text-red-500"
+										: "text-muted-foreground hover:text-red-500"
+								}`}
+							/>
+						</Button>
+					)}
+				</div>
+
+				{/* Info */}
+				<div className="space-y-2 p-4">
+					<Link to={`/manga/${manga.id}`}>
+						<h3 className="line-clamp-2 text-sm font-semibold leading-tight text-foreground hover:underline">
+							{manga.title}
+						</h3>
+					</Link>
+
+					<p className="text-xs text-muted-foreground">
+						{manga.authors.join(", ")}
+					</p>
+
+					{manga.publishedFrom && (
+						<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+							<Calendar className="h-3 w-3" />
+							<span>
+								{formatToTwoDigitsDateRange(
+									manga.publishedFrom,
+									manga.publishedTo,
+								)}
+							</span>
+						</div>
+					)}
+
+					<div className="flex items-center justify-between">
+						<div className="flex items-center gap-1">
+							<Star className="h-3.5 w-3.5 fill-primary text-primary" />
+							<span className="text-xs font-medium text-foreground">
+								{manga.score && manga.score > 0 ? manga.score : "-"}
+							</span>
+						</div>
+					</div>
+
+					<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+						<Database className="h-3 w-3" />
+						<span>
+							{manga.providerCount}{" "}
+							{manga.providerCount === 1 ? "provider" : "providers"}
+						</span>
+					</div>
+
+					<div className="flex flex-wrap gap-1">
+						{manga.genres.map((genre) => (
+							<Badge
+								key={genre}
+								variant="outline"
+								className="border-border text-xs text-muted-foreground"
+							>
+								{genre}
+							</Badge>
+						))}
+					</div>
+				</div>
+			</CardContent>
+		</Card>
+	);
+};
--- a/src/features/home/components/MangaGrid.tsx
+++ b/src/features/home/components/MangaGrid.tsx
@ -0,0 +1,17 @@
+import type { MangaListDTO } from "@/api/generated/api.schemas.ts";
+import { MangaCard } from "@/features/home/components/MangaCard.tsx";
+
+interface MangaGridProps {
+	manga: MangaListDTO[];
+	queryKey: unknown;
+}
+
+export const MangaGrid = ({ manga, queryKey }: MangaGridProps) => {
+	return (
+		<div className="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 auto-rows-fr">
+			{manga.map((item) => (
+				<MangaCard key={item.id} manga={item} queryKey={queryKey} />
+			))}
+		</div>
+	);
+};
--- a/src/features/home/components/SortDropdown.tsx
+++ b/src/features/home/components/SortDropdown.tsx
@ -0,0 +1,135 @@
+"use client";
+
+import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu.tsx";
+
+export type SortOption =
+	| "title-asc"
+	| "title-desc"
+	| "rating-desc"
+	| "rating-asc"
+	| "date-newest"
+	| "date-oldest"
+	| "status";
+
+interface SortDropdownProps {
+	currentSort: SortOption;
+	onSortChange: (sort: SortOption) => void;
+}
+
+export const SortDropdown = ({
+	currentSort,
+	onSortChange,
+}: SortDropdownProps) => {
+	const getSortLabel = () => {
+		switch (currentSort) {
+			case "title-asc":
+				return "Title (A-Z)";
+			case "title-desc":
+				return "Title (Z-A)";
+			case "rating-desc":
+				return "Rating (High to Low)";
+			case "rating-asc":
+				return "Rating (Low to High)";
+			case "date-newest":
+				return "Newest First";
+			case "date-oldest":
+				return "Oldest First";
+			case "status":
+				return "Status";
+			default:
+				return "Sort by";
+		}
+	};
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant="outline" size="sm" className="gap-2 bg-transparent">
+					<ArrowUpDown className="h-4 w-4" />
+					{getSortLabel()}
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="start" className="w-56">
+				<DropdownMenuLabel>Sort by</DropdownMenuLabel>
+				<DropdownMenuSeparator />
+
+				<DropdownMenuLabel className="text-xs font-semibold text-muted-foreground">
+					Title
+				</DropdownMenuLabel>
+				<DropdownMenuItem
+					onClick={() => onSortChange("title-asc")}
+					className="cursor-pointer"
+				>
+					<ArrowUp className="mr-2 h-4 w-4" />
+					Title (A-Z)
+				</DropdownMenuItem>
+				<DropdownMenuItem
+					onClick={() => onSortChange("title-desc")}
+					className="cursor-pointer"
+				>
+					<ArrowDown className="mr-2 h-4 w-4" />
+					Title (Z-A)
+				</DropdownMenuItem>
+
+				<DropdownMenuSeparator />
+				<DropdownMenuLabel className="text-xs font-semibold text-muted-foreground">
+					Rating
+				</DropdownMenuLabel>
+				<DropdownMenuItem
+					onClick={() => onSortChange("rating-desc")}
+					className="cursor-pointer"
+				>
+					<ArrowDown className="mr-2 h-4 w-4" />
+					Rating (High to Low)
+				</DropdownMenuItem>
+				<DropdownMenuItem
+					onClick={() => onSortChange("rating-asc")}
+					className="cursor-pointer"
+				>
+					<ArrowUp className="mr-2 h-4 w-4" />
+					Rating (Low to High)
+				</DropdownMenuItem>
+
+				<DropdownMenuSeparator />
+				<DropdownMenuLabel className="text-xs font-semibold text-muted-foreground">
+					Publication Date
+				</DropdownMenuLabel>
+				<DropdownMenuItem
+					onClick={() => onSortChange("date-newest")}
+					className="cursor-pointer"
+				>
+					<ArrowDown className="mr-2 h-4 w-4" />
+					Newest First
+				</DropdownMenuItem>
+				<DropdownMenuItem
+					onClick={() => onSortChange("date-oldest")}
+					className="cursor-pointer"
+				>
+					<ArrowUp className="mr-2 h-4 w-4" />
+					Oldest First
+				</DropdownMenuItem>
+
+				<DropdownMenuSeparator />
+				<DropdownMenuLabel className="text-xs font-semibold text-muted-foreground">
+					Status
+				</DropdownMenuLabel>
+				<DropdownMenuItem
+					onClick={() => onSortChange("status")}
+					className="cursor-pointer"
+				>
+					<ArrowUpDown className="mr-2 h-4 w-4" />
+					Ongoing First
+				</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+};
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@ -0,0 +1,152 @@
+import { BookOpen, Search } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useDebounce } from "use-debounce";
+import { useGetMangas } from "@/api/generated/manga/manga.ts";
+import { Pagination } from "@/components/Pagination.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { FilterSidebar } from "@/features/home/components/FilterSidebar.tsx";
+import { MangaGrid } from "@/features/home/components/MangaGrid.tsx";
+import {
+	SortDropdown,
+	type SortOption,
+} from "@/features/home/components/SortDropdown.tsx";
+
+const ITEMS_PER_PAGE = 12;
+
+const Home = () => {
+	const [currentPage, setCurrentPage] = useState(1);
+	const [selectedGenres, setSelectedGenres] = useState<number[]>([]);
+	const [selectedStatus, setSelectedStatus] = useState<string[]>([]);
+	const [minRating, setMinRating] = useState(0);
+	const [userFavorites, setUserFavorites] = useState(false);
+	const [showAdultContent, setShowAdultContent] = useState(false);
+	const [sortOption, setSortOption] = useState<SortOption>("title-asc");
+	const [searchText, setSearchText] = useState("");
+	const [debouncedSearchText] = useDebounce(searchText, 500);
+
+	const { data: mangasData, queryKey: mangasQueryKey } = useGetMangas({
+		page: currentPage - 1,
+		size: ITEMS_PER_PAGE,
+		sort: ["id"],
+		searchQuery: debouncedSearchText,
+		statuses: selectedStatus,
+		genreIds: selectedGenres,
+		userFavorites,
+		score: minRating,
+	});
+
+	useEffect(() => {
+		// Resets current page on search text change
+		setCurrentPage(1);
+	}, [debouncedSearchText]);
+
+	const totalPages = mangasData?.data?.totalPages;
+
+	return (
+		<div className="flex min-h-screen bg-background">
+			<FilterSidebar
+				selectedGenres={selectedGenres}
+				selectedStatus={selectedStatus}
+				minRating={minRating}
+				userFavorites={userFavorites}
+				showAdultContent={showAdultContent}
+				onGenresChange={setSelectedGenres}
+				onStatusChange={setSelectedStatus}
+				onRatingChange={setMinRating}
+				onUserFavoritesChange={setUserFavorites}
+				onShowAdultContentChange={setShowAdultContent}
+			/>
+
+			<div className="flex-1">
+				<header className="border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+					<div className="px-8 py-6">
+						<div className="flex flex-col gap-6">
+							<div className="flex items-center justify-between">
+								<div className="flex items-start gap-3">
+									<BookOpen className="h-8 w-8 text-primary mt-1" />
+									<div>
+										<h1 className="text-3xl font-bold tracking-tight text-foreground">
+											MangaMochi
+										</h1>
+										<p className="mt-1 text-sm text-muted-foreground">
+											{mangasData?.data?.totalElements} titles available
+										</p>
+									</div>
+								</div>
+								<div className="flex items-center gap-4">
+									{/*<ImportDropdown />*/}
+									{/*<ThemeToggle />*/}
+									{/*<AuthHeader />*/}
+								</div>
+							</div>
+
+							{/* Search */}
+							<div className="relative max-w-md">
+								<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+								<Input
+									type="search"
+									placeholder="Search manga or author..."
+									value={searchText}
+									onChange={(e) => {
+										setSearchText(e.target.value);
+									}}
+									className="pl-10 bg-card border-border"
+								/>
+							</div>
+						</div>
+					</div>
+				</header>
+
+				<main className="px-8 py-8">
+					{mangasData?.data?.content && mangasData.data.content.length > 0 ? (
+						<>
+							{mangasData.data?.totalElements && (
+								<div className="mb-6 flex items-center justify-between">
+									<p className="text-sm text-muted-foreground">
+										Showing {(currentPage - 1) * ITEMS_PER_PAGE + 1} to{" "}
+										{Math.min(
+											currentPage * ITEMS_PER_PAGE,
+											mangasData.data.totalElements,
+										)}{" "}
+										of {mangasData.data.totalElements}
+									</p>
+									<SortDropdown
+										currentSort={sortOption}
+										onSortChange={setSortOption}
+									/>
+								</div>
+							)}
+							<MangaGrid
+								manga={mangasData?.data?.content}
+								queryKey={mangasQueryKey}
+							/>
+
+							{totalPages && totalPages > 1 && (
+								<div className="mt-12">
+									<Pagination
+										currentPage={currentPage}
+										totalPages={totalPages}
+										onPageChange={setCurrentPage}
+									/>
+								</div>
+							)}
+						</>
+					) : (
+						<div className="flex min-h-[400px] items-center justify-center">
+							<div className="text-center">
+								<p className="text-lg text-muted-foreground">
+									No manga found matching your filters.
+								</p>
+								<p className="mt-2 text-sm text-muted-foreground">
+									Try adjusting your search or filter criteria.
+								</p>
+							</div>
+						</div>
+					)}
+				</main>
+			</div>
+		</div>
+	);
+};
+
+export default Home;
--- a/src/pages/Router.tsx
+++ b/src/pages/Router.tsx
@ -0,0 +1,21 @@
+import { lazy } from "react";
+import { createBrowserRouter } from "react-router";
+import { AppLayout } from "@/components/Layout/AppLayout.tsx";
+
+const Home = lazy(() => import("./Home.tsx"));
+
+export const Router = createBrowserRouter([
+	{
+		element: <AppLayout />,
+		children: [
+			{
+				path: "*",
+				element: <div>Not Found!</div>,
+			},
+			{
+				index: true,
+				element: <Home />,
+			},
+		],
+	},
+]);
--- a/src/providers/Providers.tsx
+++ b/src/providers/Providers.tsx
@ -0,0 +1,17 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { ReactNode } from "react";
+import { Toaster } from "sonner";
+import { AuthProvider } from "@/contexts/AuthContext.tsx";
+
+interface ProvidersProps {
+	children: ReactNode;
+}
+
+export const Providers = ({ children }: ProvidersProps) => {
+	return (
+		<QueryClientProvider client={new QueryClient()}>
+			<Toaster />
+			<AuthProvider>{children}</AuthProvider>
+		</QueryClientProvider>
+	);
+};
--- a/src/utils/dateFormatter.ts
+++ b/src/utils/dateFormatter.ts
@ -0,0 +1,22 @@
+const twoDigitFormatter = new Intl.DateTimeFormat("en-US", {
+	month: "2-digit",
+	day: "2-digit",
+	year: "numeric",
+});
+
+export const formatToTwoDigits = (value: string | undefined) => {
+	if (value === undefined) {
+		return undefined;
+	}
+
+	return twoDigitFormatter.format(new Date(value));
+};
+
+export const formatToTwoDigitsDateRange = (
+	from: string,
+	to: string | undefined,
+) => {
+	const toDate = formatToTwoDigits(to) ?? "Present";
+
+	return `${formatToTwoDigits(from)} - ${toDate}`;
+};