diff --git a/.vscode/settings.json b/.vscode/settings.json
index d30e750..90eed94 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,5 +4,7 @@
 	},
 	"editor.quickSuggestions": {
 		"strings": "on"
-	}
+	},
+	"editor.cursorBlinking": "smooth",
+	"editor.cursorSmoothCaretAnimation": "on"
 }
diff --git a/package.json b/package.json
index a10d194..747ce88 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
-		"test": "playwright test",
+		"test:dev": "@powershell -NoProfile -ExecutionPolicy Unrestricted -Command ./scripts/test_dev.ps1",
+		"test:prod": "playwright test",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . && eslint .",
@@ -15,7 +16,6 @@
 	"devDependencies": {
 		"@melt-ui/pp": "^0.3.0",
 		"@melt-ui/svelte": "^0.76.0",
-		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
@@ -35,8 +35,11 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@internationalized/date": "^3.5.2",
 		"autoprefixer": "^10.4.18",
+		"lucide-svelte": "^0.359.0",
 		"postcss": "^8.4.35",
+		"svelte-ripple-action": "^1.0.6",
 		"tailwindcss": "^3.4.1"
 	}
 }
diff --git a/playwright.config.ts b/playwright.config.ts
deleted file mode 100644
index 1c5d7a1..0000000
--- a/playwright.config.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
-
-const config: PlaywrightTestConfig = {
-	webServer: {
-		command: 'npm run build && npm run preview',
-		port: 4173
-	},
-	testDir: 'tests',
-	testMatch: /(.+\.)?(test|spec)\.[jt]s/
-};
-
-export default config;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3ec5294..a79a4ce 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,12 +5,21 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@internationalized/date':
+    specifier: ^3.5.2
+    version: 3.5.2
   autoprefixer:
     specifier: ^10.4.18
     version: 10.4.18(postcss@8.4.35)
+  lucide-svelte:
+    specifier: ^0.359.0
+    version: 0.359.0(svelte@4.2.12)
   postcss:
     specifier: ^8.4.35
     version: 8.4.35
+  svelte-ripple-action:
+    specifier: ^1.0.6
+    version: 1.0.6(svelte@4.2.12)
   tailwindcss:
     specifier: ^3.4.1
     version: 3.4.1
@@ -22,9 +31,6 @@ devDependencies:
   '@melt-ui/svelte':
     specifier: ^0.76.0
     version: 0.76.0(svelte@4.2.12)
-  '@playwright/test':
-    specifier: ^1.28.1
-    version: 1.42.1
   '@sveltejs/adapter-auto':
     specifier: ^3.0.0
     version: 3.1.1(@sveltejs/kit@2.5.4)
@@ -92,7 +98,6 @@ packages:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
-    dev: true
 
   /@esbuild/aix-ppc64@0.19.12:
     resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
@@ -379,7 +384,6 @@ packages:
     resolution: {integrity: sha512-vo1yOMUt2hzp63IutEaTUxROdvQg1qlMRsbCvbay2AK2Gai7wIgCyK5weEX3nHkiLgo4qCXHijFNC/ILhlRpOQ==}
     dependencies:
       '@swc/helpers': 0.5.7
-    dev: true
 
   /@isaacs/cliui@8.0.2:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
@@ -470,14 +474,6 @@ packages:
     dev: false
     optional: true
 
-  /@playwright/test@1.42.1:
-    resolution: {integrity: sha512-Gq9rmS54mjBL/7/MvBaNOBwbfnh7beHvS6oS4srqXFcQHpQCV1+c8JXWE8VLPyRDhgS3H8x8A7hztqI9VnwrAQ==}
-    engines: {node: '>=16'}
-    hasBin: true
-    dependencies:
-      playwright: 1.42.1
-    dev: true
-
   /@polka/url@1.0.0-next.25:
     resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}
     dev: true
@@ -662,7 +658,6 @@ packages:
     resolution: {integrity: sha512-BVvNZhx362+l2tSwSuyEUV4h7+jk9raNdoTSdLfwTshXJSaGmYKluGRJznziCI3KX02Z19DdsQrdfrpXAU3Hfg==}
     dependencies:
       tslib: 2.6.2
-    dev: true
 
   /@types/cookie@0.6.0:
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
@@ -677,7 +672,6 @@ packages:
 
   /@types/estree@1.0.5:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
-    dev: true
 
   /@types/json-schema@7.0.15:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
@@ -839,7 +833,6 @@ packages:
     resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
@@ -893,7 +886,6 @@ packages:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
     dependencies:
       dequal: 2.0.3
-    dev: true
 
   /array-union@2.1.0:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
@@ -920,7 +912,6 @@ packages:
     resolution: {integrity: sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==}
     dependencies:
       dequal: 2.0.3
-    dev: true
 
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -1006,7 +997,6 @@ packages:
       acorn: 8.11.3
       estree-walker: 3.0.3
       periscopic: 3.1.0
-    dev: true
 
   /color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
@@ -1045,7 +1035,6 @@ packages:
     dependencies:
       mdn-data: 2.0.30
       source-map-js: 1.0.2
-    dev: true
 
   /cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
@@ -1076,7 +1065,6 @@ packages:
   /dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
-    dev: true
 
   /detect-indent@6.1.0:
     resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
@@ -1313,7 +1301,6 @@ packages:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
     dependencies:
       '@types/estree': 1.0.5
-    dev: true
 
   /esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
@@ -1403,14 +1390,6 @@ packages:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
     dev: true
 
-  /fsevents@2.3.2:
-    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -1577,7 +1556,6 @@ packages:
     resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
     dependencies:
       '@types/estree': 1.0.5
-    dev: true
 
   /isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
@@ -1653,7 +1631,6 @@ packages:
 
   /locate-character@3.0.0:
     resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
-    dev: true
 
   /locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
@@ -1678,16 +1655,22 @@ packages:
       yallist: 4.0.0
     dev: true
 
+  /lucide-svelte@0.359.0(svelte@4.2.12):
+    resolution: {integrity: sha512-75CzrB26QbMSmXywosx8Yt6XvvN+OSmLG5TaVOAEaEwkZ4kBcT1yLBzbBPe2aXMu9fFi/HwOiOYCkavKaEKujQ==}
+    peerDependencies:
+      svelte: ^3 || ^4 || ^5.0.0-next.42
+    dependencies:
+      svelte: 4.2.12
+    dev: false
+
   /magic-string@0.30.8:
     resolution: {integrity: sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==}
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
   /mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
-    dev: true
 
   /merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
@@ -1869,7 +1852,6 @@ packages:
       '@types/estree': 1.0.5
       estree-walker: 3.0.3
       is-reference: 3.0.2
-    dev: true
 
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
@@ -1888,22 +1870,6 @@ packages:
     engines: {node: '>= 6'}
     dev: false
 
-  /playwright-core@1.42.1:
-    resolution: {integrity: sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA==}
-    engines: {node: '>=16'}
-    hasBin: true
-    dev: true
-
-  /playwright@1.42.1:
-    resolution: {integrity: sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg==}
-    engines: {node: '>=16'}
-    hasBin: true
-    dependencies:
-      playwright-core: 1.42.1
-    optionalDependencies:
-      fsevents: 2.3.2
-    dev: true
-
   /postcss-import@15.1.0(postcss@8.4.35):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
@@ -2349,6 +2315,14 @@ packages:
       typescript: 5.4.2
     dev: true
 
+  /svelte-ripple-action@1.0.6(svelte@4.2.12):
+    resolution: {integrity: sha512-0FVy815Xu6nxbWmuNk/T+n9/9zvD+jw5eAdG54RJvVwKnRuNLoUwZgMdoHdyf+huQV+qKzPJgGp549RZu/vvfw==}
+    peerDependencies:
+      svelte: ^4.0.0
+    dependencies:
+      svelte: 4.2.12
+    dev: false
+
   /svelte@4.2.12:
     resolution: {integrity: sha512-d8+wsh5TfPwqVzbm4/HCXC783/KPHV60NvwitJnyTA5lWn1elhXMNWhXGCJ7PwPa8qFUnyJNIyuIRt2mT0WMug==}
     engines: {node: '>=16'}
@@ -2367,7 +2341,6 @@ packages:
       locate-character: 3.0.0
       magic-string: 0.30.8
       periscopic: 3.1.0
-    dev: true
 
   /tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
@@ -2454,7 +2427,6 @@ packages:
 
   /tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
-    dev: true
 
   /type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
diff --git a/src/app.css b/src/app.css
index bd6213e..64c5c02 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +1,24 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,600;0,800;1,300;1,400;1,600;1,800&display=swap');
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+
+body {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 400;
+}
+
+.field input:valid ~ label,
+.field input:focus ~ label {
+	transform: translateY(-50%);
+	font-size: 15px;
+	color: #fff;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+	transition: all 1000000s ease-in-out 0s;
+}
\ No newline at end of file
diff --git a/src/app.html b/src/app.html
index 77a5ff5..46bda39 100644
--- a/src/app.html
+++ b/src/app.html
@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover">
+	<body data-sveltekit-preload-data="hover" class="text-dark bg-dark">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/assets/logo.webp b/src/lib/assets/logo.webp
new file mode 100644
index 0000000..545a1f7
Binary files /dev/null and b/src/lib/assets/logo.webp differ
diff --git a/src/lib/components/Boxbg.svelte b/src/lib/components/Boxbg.svelte
new file mode 100644
index 0000000..83a4ad0
--- /dev/null
+++ b/src/lib/components/Boxbg.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	const rows = new Array(80).fill(1);
+	const cols = new Array(75).fill(1);
+	let initialColor = 'rgba(0,0,0,0)';
+
+	let colors = [
+		'--sky-300',
+		'--pink-300',
+		'--green-300',
+		'--yellow-300',
+		'--red-300',
+		'--purple-300',
+		'--blue-300',
+		'--indigo-300',
+		'--violet-300'
+	];
+
+	const getRandomColor = () => {
+		return colors[Math.floor(Math.random() * colors.length)];
+	};
+
+	const whileHover = (
+		e: MouseEvent & {
+			currentTarget: EventTarget & HTMLDivElement;
+		}
+	) => {
+		e.currentTarget.style.transition = '0s';
+		e.currentTarget.style.backgroundColor = `var(${getRandomColor()})`;
+	};
+
+	const afterHover = (
+		e: MouseEvent & {
+			currentTarget: EventTarget & HTMLDivElement;
+		}
+	) => {
+		e.currentTarget.style.transition = '2s';
+		e.currentTarget.style.backgroundColor = initialColor;
+	};
+</script>
+
+<div
+	style="transform: translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0);"
+	class="absolute left-1/4 p-4 -top-1/4 flex -translate-x-1/2 -translate-y-1/2 w-full h-full"
+>
+	{#each rows as _, i ('row' + i)}
+		<div class="w-16 h-8 border-l border-slate-700 relative">
+			{#each cols as _, j ('col' + j)}
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<div
+					on:mouseenter={whileHover}
+					on:mouseleave={afterHover}
+					class="w-16 h-8 border-r border-t border-slate-700 relative"
+				>
+					{#if j % 2 === 0 && i % 2 === 0}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							class="absolute h-6 w-10 -top-[14px] -left-[22px] text-slate-700 stroke-[1px] pointer-events-none"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M12 6v12m6-6H6"
+							/>
+						</svg>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{/each}
+</div>
diff --git a/src/lib/components/LoadingBar.svelte b/src/lib/components/LoadingBar.svelte
new file mode 100644
index 0000000..8d79ccd
--- /dev/null
+++ b/src/lib/components/LoadingBar.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { afterNavigate, beforeNavigate } from '$app/navigation';
+	import { tweened } from 'svelte/motion';
+
+	let styles = tweened(0);
+	let div: HTMLDivElement;
+
+	beforeNavigate(() => {
+		div.style.visibility = 'visible';
+		styles.set(45);
+	});
+
+	afterNavigate(() => {
+		styles.set(100);
+
+		setTimeout(() => {
+			div.style.visibility = 'hidden';
+			styles.set(0);
+		}, 500);
+	});
+</script>
+
+<div
+	class="absolute top-0 left-0 bg-primary-light dark:bg-primary-dark h-1 z-50"
+	style="width: {$styles}%;"
+	bind:this={div}
+/>
diff --git a/src/lib/components/ui/Field/DateField.svelte b/src/lib/components/ui/Field/DateField.svelte
new file mode 100644
index 0000000..f973d2c
--- /dev/null
+++ b/src/lib/components/ui/Field/DateField.svelte
@@ -0,0 +1,225 @@
+<script lang="ts">
+	import { getUserRegion } from '$utils/calendar';
+	import { CalendarDate } from '@internationalized/date';
+	import { createDatePicker, melt } from '@melt-ui/svelte';
+	import Calendar from 'lucide-svelte/icons/calendar';
+	import ChevronLeft from 'lucide-svelte/icons/chevron-left';
+	import ChevronRight from 'lucide-svelte/icons/chevron-right';
+	import { fade } from 'svelte/transition';
+
+	let calendarLabel = 'Date';
+	export { calendarLabel as label };
+	export let defaultDate: CalendarDate = new CalendarDate(2024, 1, 1);
+
+	const {
+		elements: {
+			calendar,
+			cell,
+			content,
+			grid,
+			heading,
+			label,
+			nextButton,
+			prevButton,
+			segment,
+			trigger,
+			field
+		},
+		states: { months, headingValue, weekdays, segmentContents, open },
+		helpers: { isDateDisabled, isDateUnavailable },
+		options: { locale }
+	} = createDatePicker({
+		forceVisible: true,
+		defaultValue: defaultDate
+	});
+
+	const region = getUserRegion();
+
+	$: region ? locale.set(region) : null;
+</script>
+
+<section>
+	<div
+		class="w-full relative before:absolute before:w-full before:h-0.5 before:-bottom-2 before:left-0 before:bg-gray-500 before:rounded-full after:absolute after:w-full after:h-0.5 after:-bottom-2 after:left-0 after:bg-white after:rounded-full after:scale-x-0 {$open
+			? 'after:scale-x-100'
+			: ''} after:duration-300"
+	>
+		<span use:melt={$label} class="px-2 text-white text-sm">{calendarLabel}</span>
+		<div use:melt={$field} use:melt={$trigger}>
+			{#key $locale}
+				{#each $segmentContents as seg}
+					<div use:melt={$segment(seg.part)}>
+						{seg.value}
+					</div>
+				{/each}
+			{/key}
+			<div>
+				<Calendar class="size-6" />
+			</div>
+		</div>
+	</div>
+	{#if $open}
+		<div transition:fade={{ duration: 100 }} use:melt={$content}>
+			<div use:melt={$calendar}>
+				<header>
+					<button use:melt={$prevButton}>
+						<ChevronLeft size={24} />
+					</button>
+					<div use:melt={$heading}>
+						{$headingValue}
+					</div>
+					<button use:melt={$nextButton}>
+						<ChevronRight size={24} />
+					</button>
+				</header>
+				<div>
+					{#each $months as month}
+						<table use:melt={$grid}>
+							<thead aria-hidden="true">
+								<tr>
+									{#each $weekdays as day}
+										<th>
+											<div>
+												{day}
+											</div>
+										</th>
+									{/each}
+								</tr>
+							</thead>
+							<tbody>
+								{#each month.weeks as weekDates}
+									<tr>
+										{#each weekDates as date}
+											<td
+												role="gridcell"
+												aria-disabled={$isDateDisabled(date) ||
+													$isDateUnavailable(date)}
+											>
+												<div use:melt={$cell(date, month.value)}>
+													{date.day}
+												</div>
+											</td>
+										{/each}
+									</tr>
+								{/each}
+							</tbody>
+						</table>
+					{/each}
+				</div>
+			</div>
+		</div>
+	{/if}
+</section>
+
+<style lang="postcss">
+	section {
+		@apply flex w-full flex-col items-center gap-3;
+	}
+
+	[data-melt-datefield-field] div:last-of-type {
+		@apply flex w-full items-center justify-end;
+	}
+
+	[data-melt-popover-content] {
+		@apply z-10 min-w-[320px] rounded-lg bg-black shadow-sm border-slate-800 border-2;
+	}
+
+	[data-melt-popover-trigger] {
+		@apply p-2 text-white;
+	}
+
+	[data-melt-datefield-label] {
+		@apply select-none font-medium text-dark;
+	}
+
+	[data-melt-datefield-label][data-invalid] {
+		@apply text-red-500;
+	}
+
+	[data-melt-datefield-field] {
+		@apply flex w-full items-center;
+	}
+
+	[data-melt-datefield-field][data-invalid] {
+		@apply border-red-400;
+	}
+
+	[data-melt-datefield-segment][data-invalid] {
+		@apply text-red-500;
+	}
+
+	[data-melt-datefield-segment]:not([data-segment='literal']) {
+		@apply px-0.5;
+	}
+
+	[data-melt-datefield-validation] {
+		@apply self-start text-red-500;
+	}
+
+	[data-melt-calendar] {
+		@apply w-full rounded-lg bg-black p-3 shadow-sm;
+	}
+
+	header {
+		@apply flex items-center justify-between pb-2;
+	}
+
+	header + div {
+		@apply flex items-center gap-6;
+	}
+
+	[data-melt-calendar-prevbutton] {
+		@apply rounded-lg p-1 transition-all hover:bg-slate-800;
+	}
+
+	[data-melt-calendar-nextbutton] {
+		@apply rounded-lg p-1 transition-all hover:bg-slate-800;
+	}
+
+	[data-melt-calendar-prevbutton][data-disabled] {
+		@apply pointer-events-none rounded-lg p-1 opacity-40;
+	}
+
+	[data-melt-calendar-nextbutton][data-disabled] {
+		@apply pointer-events-none rounded-lg p-1 opacity-40;
+	}
+
+	[data-melt-calendar-heading] {
+		@apply font-semibold;
+	}
+
+	th {
+		@apply text-sm font-semibold;
+	}
+
+	th div {
+		@apply flex h-6 w-6 items-center justify-center p-4;
+	}
+
+	[data-melt-calendar-grid] {
+		@apply w-full;
+	}
+
+	[data-melt-calendar-cell] {
+		@apply flex h-6 w-6 cursor-pointer select-none items-center justify-center rounded-lg p-4 hover:bg-slate-800;
+	}
+
+	[data-melt-calendar-cell][data-disabled] {
+		@apply pointer-events-none opacity-40;
+	}
+	[data-melt-calendar-cell][data-unavailable] {
+		@apply pointer-events-none text-red-400 line-through;
+	}
+
+	[data-melt-calendar-cell][data-selected] {
+		@apply bg-slate-700 text-dark;
+	}
+
+	[data-melt-calendar-cell][data-outside-visible-months] {
+		@apply pointer-events-none cursor-default opacity-40 hover:bg-transparent;
+	}
+
+	[data-melt-calendar-cell][data-outside-month] {
+		@apply pointer-events-none cursor-default opacity-0 hover:bg-transparent;
+	}
+</style>
diff --git a/src/lib/components/ui/Field/PasswordField.svelte b/src/lib/components/ui/Field/PasswordField.svelte
new file mode 100644
index 0000000..b588f58
--- /dev/null
+++ b/src/lib/components/ui/Field/PasswordField.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { createLabel, melt } from '@melt-ui/svelte';
+	import Eye from 'lucide-svelte/icons/eye';
+	import EyeOff from 'lucide-svelte/icons/eye-off';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { scale } from 'svelte/transition';
+
+	type $$Props = HTMLInputAttributes & {
+		label?: string;
+		id?: string;
+	};
+
+	export let label: string = '';
+	export let id: string = '';
+
+	let show = false;
+
+	const {
+		elements: { root }
+	} = createLabel();
+</script>
+
+<div
+	class="relative w-full field before:absolute before:w-full before:h-0.5 before:-bottom-2 before:left-0 before:bg-gray-500 before:rounded-full after:absolute after:w-full after:h-0.5 after:-bottom-2 after:left-0 after:bg-white after:rounded-full after:scale-x-0 focus-within:after:scale-x-100 after:duration-300"
+>
+	<input
+		class="bg-transparent outline-none p-2 text-xl font-light w-full"
+		required={true}
+		type={show ? 'text' : 'password'}
+		{id}
+		{...$$restProps}
+	/>
+	<label
+		class="absolute p-2 left-0 text-xl font-light pointer-events-none duration-200 text-gray-300"
+		use:melt={$root}
+		for={id}>{label}</label
+	>
+	<button
+		class="absolute top-1/2 right-0 -translate-y-1/2 text-gray-300 hover:text-white duration-300 cursor-pointer size-10"
+		on:click={() => (show = !show)}
+	>
+		{#if show}
+			<div
+				class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-6"
+				transition:scale={{ duration: 300 }}
+			>
+				<EyeOff class="size-6" />
+			</div>
+		{:else}
+			<div
+				class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-6"
+				transition:scale={{ duration: 300 }}
+			>
+				<Eye class="size-6" />
+			</div>
+		{/if}
+	</button>
+</div>
diff --git a/src/lib/components/ui/Field/SelectField.svelte b/src/lib/components/ui/Field/SelectField.svelte
new file mode 100644
index 0000000..1bae49a
--- /dev/null
+++ b/src/lib/components/ui/Field/SelectField.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { createSelect, melt } from '@melt-ui/svelte';
+	import Check from 'lucide-svelte/icons/check';
+	import ChevronDown from 'lucide-svelte/icons/chevron-down';
+	import { fade } from 'svelte/transition';
+
+	export let options: string[];
+	let selectLabel: string;
+	export { selectLabel as label };
+	export let defaultOption: string;
+
+	const {
+		elements: { trigger, menu, option, label },
+		states: { selectedLabel, open },
+		helpers: { isSelected }
+	} = createSelect<string>({
+		forceVisible: true,
+		positioning: {
+			placement: 'bottom',
+			fitViewport: true,
+			sameWidth: true
+		},
+		defaultSelected: {
+			value: defaultOption
+		}
+	});
+</script>
+
+<div class="flex flex-col w-full">
+	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<label class="block text-white px-2 text-sm" use:melt={$label}>{selectLabel}</label>
+	<button
+		class="relative flex items-center justify-between rounded-lg p-2
+  text-dark shadow transition-opacity hover:opacity-90 before:absolute before:w-full before:h-0.5 before:-bottom-2 before:left-0 before:bg-gray-500 before:rounded-full after:absolute after:w-full after:h-0.5 after:-bottom-2 after:left-0 after:bg-white after:rounded-full after:scale-x-0 focus-within:after:scale-x-100 after:duration-300"
+		use:melt={$trigger}
+		aria-label={selectLabel}
+	>
+		{$selectedLabel || defaultOption}
+		<ChevronDown class="size-7" />
+	</button>
+	{#if $open}
+		<div
+			class="z-10 flex max-h-60 flex-col
+    overflow-y-auto rounded-lg
+    shadow focus:!ring-0 bg-black border-2 border-slate-800"
+			use:melt={$menu}
+			transition:fade={{ duration: 150 }}
+		>
+			{#each options as _option}
+				<div
+					class="relative cursor-pointer rounded-lg py-2 pl-8 pr-4 text-slate-100
+              hover:bg-slate-900 focus:z-10
+              data-[highlighted]:bg-slate-800
+              data-[disabled]:opacity-50"
+					use:melt={$option({ value: _option, label: _option })}
+				>
+					<div class="check {$isSelected(_option) ? 'block' : 'hidden'}">
+						<Check class="size-4" />
+					</div>
+
+					{_option}
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.check {
+		position: absolute;
+		left: theme(spacing.2);
+		top: 50%;
+		z-index: theme(zIndex.20);
+		translate: 0 calc(-50% + 1px);
+	}
+</style>
diff --git a/src/lib/components/ui/Field/TextField.svelte b/src/lib/components/ui/Field/TextField.svelte
new file mode 100644
index 0000000..89635e7
--- /dev/null
+++ b/src/lib/components/ui/Field/TextField.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { createLabel, melt } from '@melt-ui/svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLInputAttributes & {
+		label?: string;
+		id?: string;
+	};
+
+	export let label: string = '';
+	export let id: string = '';
+
+	const {
+		elements: { root }
+	} = createLabel();
+</script>
+
+<div
+	class="relative w-full field before:absolute before:w-full before:h-0.5 before:-bottom-2 before:left-0 before:bg-gray-500 before:rounded-full after:absolute after:w-full after:h-0.5 after:-bottom-2 after:left-0 after:bg-white after:rounded-full after:scale-x-0 focus-within:after:scale-x-100 after:duration-300"
+>
+	<input
+		class="bg-transparent outline-none p-2 text-xl font-light w-full"
+		{...$$restProps}
+		required={true}
+		{id}
+	/>
+	<label
+		class="absolute p-2 left-0 text-xl font-light pointer-events-none duration-200 text-gray-300"
+		use:melt={$root}
+		for={id}>{label}</label
+	>
+</div>
diff --git a/src/lib/utils/calendar.ts b/src/lib/utils/calendar.ts
new file mode 100644
index 0000000..a66bb20
--- /dev/null
+++ b/src/lib/utils/calendar.ts
@@ -0,0 +1,10 @@
+import { browser } from "$app/environment";
+
+const getUserRegion = () => {
+    if (!browser) return;
+    const region = window.navigator.language
+    return region;
+}
+
+export { getUserRegion };
+
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f87b35e..405e516 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
+	// prettier-off
 	import '../app.css';
+	// prettier-on
+	import LoadingBar from '$components/LoadingBar.svelte';
+	import 'svelte-ripple-action/ripple.css';
 </script>
 
+<LoadingBar />
 <slot />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e69de29..f23cc0f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -0,0 +1 @@
+<a href="/auth/signup">Signup</a>
diff --git a/src/routes/auth/signin/+page.svelte b/src/routes/auth/signin/+page.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/auth/signup/+page.server.ts b/src/routes/auth/signup/+page.server.ts
new file mode 100644
index 0000000..228b840
--- /dev/null
+++ b/src/routes/auth/signup/+page.server.ts
@@ -0,0 +1,10 @@
+export const actions = {
+	signup: async ({ request }) => {
+        const formData = await request.formData();
+        console.log(formData);
+
+        return {
+            success: true,
+        }
+    }
+};
\ No newline at end of file
diff --git a/src/routes/auth/signup/+page.svelte b/src/routes/auth/signup/+page.svelte
index 96d7678..a25372b 100644
--- a/src/routes/auth/signup/+page.svelte
+++ b/src/routes/auth/signup/+page.svelte
@@ -1,4 +1,49 @@
 <script lang="ts">
+	import Logo from '$assets/logo.webp';
+	import Boxbg from '$components/Boxbg.svelte';
+	import DateField from '$components/ui/Field/DateField.svelte';
+	import PasswordField from '$components/ui/Field/PasswordField.svelte';
+	import SelectField from '$components/ui/Field/SelectField.svelte';
+	import TextField from '$components/ui/Field/TextField.svelte';
+	import { getUserRegion } from '$utils/calendar';
+	import { ripple } from 'svelte-ripple-action';
+
+	getUserRegion();
 </script>
 
-<main class="min-h-screen w-full relative"></main>
+<main
+	class="min-h-screen w-full relative bg-slate-900 overflow-hidden flex flex-col items-center justify-center"
+>
+	<Boxbg />
+	<div class="md:w-1/5 space-y-8 p-3 md:p-6 rounded-lg bg-black z-10">
+		<img src={Logo} alt="Logo" width="60" height="60" class="mx-auto -my-3" />
+		<h1 class="text-2xl font-bold text-white text-center">Welcome to ByteChat</h1>
+		<form
+			method="post"
+			action="?/signup"
+			class="flex flex-col gap-8 justify-center items-center"
+		>
+			<TextField type="text" label="Username" id="signup-username" />
+			<TextField type="text" label="Email" id="signup-email" />
+			<PasswordField label="Password" id="signup-password" />
+			<SelectField
+				options={['male', 'female', 'non-binary', 'other', 'prefer not to say']}
+				label="Gender"
+				defaultOption="prefer not to say"
+			/>
+			<DateField label="Date of birth" />
+			<button
+				class="w-full px-5 py-2.5 text-lg font-normal rounded-md border-2 border-primary-dark hover:bg-primary-dark hover:text-white duration-300 scale-100 active:scale-95"
+				use:ripple
+				type="submit"
+			>
+				Sign Up
+			</button>
+			<a
+				href="/auth/signin"
+				class="w-full text-left text-base font-normal text-blue-300 duration-300"
+				>Already have an account?</a
+			>
+		</form>
+	</div>
+</main>
diff --git a/svelte.config.js b/svelte.config.js
index 683cf57..115168f 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -13,7 +13,8 @@ const config = {
 		adapter: adapter(),
 		alias: {
 			'$components/*': './src/lib/components/*',
-			'$utils/*': './src/lib/utils/*'
+			'$utils/*': './src/lib/utils/*',
+			"$assets/*": "./src/lib/assets/*",
 		}
 	}
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index bfe0bc2..f2930f4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,44 @@
+import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
+
+const addVariablesForColors = ({ addBase, theme }) => {
+	let allColors = flattenColorPalette(theme("colors"));
+	  let newVars = Object.fromEntries(
+		Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
+	  );
+	  addBase({
+		":root": newVars,
+	  });
+}
+
 /** @type {import('tailwindcss').Config} */
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
+	darkMode: "class",
 	theme: {
-		extend: {}
+		extend: {
+			textColor: {
+				light: "#120a17",
+				dark: "#f1eaf6"
+			},
+			backgroundColor: {
+				light: "#fdfbfe",
+				dark: "#030104"
+			},
+			colors: {
+				primary: {
+					light: "#9042cd",
+					dark: "#8132bd"
+				},
+				secondary: {
+					light: "#be88e7",
+					dark: "#4e1877"
+				},
+				accent: {
+					light: "#ad5de9",
+					dark: "#6516a2"
+				}
+			}
+		}
 	},
-	plugins: []
+	plugins: [addVariablesForColors]
 };
diff --git a/tests/test.ts b/tests/test.ts
deleted file mode 100644
index 5816be4..0000000
--- a/tests/test.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-test('index page has expected h1', async ({ page }) => {
-	await page.goto('/');
-	await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible();
-});