diff --git a/package-lock.json b/package-lock.json
index a522b21..a86bf92 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,9 @@
 			"name": "app4",
 			"version": "0.0.1",
 			"dependencies": {
+				"@sveltestrap/sveltestrap": "^7.1.0",
 				"bootstrap-icons": "^1.11.3",
+				"js-cookie": "^3.0.5",
 				"leaflet": "^1.9.4",
 				"leaflet-velocity": "^2.1.4"
 			},
@@ -16,7 +18,7 @@
 				"@sveltejs/adapter-auto": "^4.0.0",
 				"@sveltejs/kit": "^2.16.0",
 				"@sveltejs/vite-plugin-svelte": "^5.0.0",
-				"svelte": "^5.0.0",
+				"svelte": "^5.34.8",
 				"svelte-check": "^4.0.0",
 				"typescript": "^5.0.0",
 				"vite": "^6.2.5"
@@ -26,7 +28,6 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
 			"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.5",
 				"@jridgewell/trace-mapping": "^0.3.24"
@@ -439,7 +440,6 @@
 			"version": "0.3.8",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
 			"integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/set-array": "^1.2.1",
 				"@jridgewell/sourcemap-codec": "^1.4.10",
@@ -453,7 +453,6 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
 			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
@@ -462,7 +461,6 @@
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
 			"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
@@ -470,14 +468,12 @@
 		"node_modules/@jridgewell/sourcemap-codec": {
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-			"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-			"dev": true
+			"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.25",
 			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
 			"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
 				"@jridgewell/sourcemap-codec": "^1.4.14"
@@ -489,6 +485,15 @@
 			"integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==",
 			"dev": true
 		},
+		"node_modules/@popperjs/core": {
+			"version": "2.11.8",
+			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+			"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/popperjs"
+			}
+		},
 		"node_modules/@rollup/rollup-android-arm-eabi": {
 			"version": "4.39.0",
 			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.39.0.tgz",
@@ -753,7 +758,6 @@
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz",
 			"integrity": "sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==",
-			"dev": true,
 			"peerDependencies": {
 				"acorn": "^8.9.0"
 			}
@@ -771,22 +775,24 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "2.20.3",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.20.3.tgz",
-			"integrity": "sha512-z1SQ8qra/kGY3DzarG7xc6XsbKm8UY3SnI82XLI3PqMYWbYj/LpjPWuAz9WA5EyLjFNLD7sOAOEW8Gt4yjr5Vg==",
+			"version": "2.22.0",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.22.0.tgz",
+			"integrity": "sha512-DJm0UxVgzXq+1MUfiJK4Ridk7oIQsIets6JwHiEl97sI6nXScfXe+BeqNhzB7jQIVBb3BM51U4hNk8qQxRXBAA==",
 			"dev": true,
 			"dependencies": {
+				"@sveltejs/acorn-typescript": "^1.0.5",
 				"@types/cookie": "^0.6.0",
+				"acorn": "^8.14.1",
 				"cookie": "^0.6.0",
 				"devalue": "^5.1.0",
 				"esm-env": "^1.2.2",
-				"import-meta-resolve": "^4.1.0",
 				"kleur": "^4.1.5",
 				"magic-string": "^0.30.5",
 				"mrmime": "^2.0.0",
 				"sade": "^1.8.1",
 				"set-cookie-parser": "^2.6.0",
-				"sirv": "^3.0.0"
+				"sirv": "^3.0.0",
+				"vitefu": "^1.0.6"
 			},
 			"bin": {
 				"svelte-kit": "svelte-kit.js"
@@ -795,9 +801,9 @@
 				"node": ">=18.13"
 			},
 			"peerDependencies": {
-				"@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0",
+				"@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0",
 				"svelte": "^4.0.0 || ^5.0.0-next.0",
-				"vite": "^5.0.3 || ^6.0.0"
+				"vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0"
 			}
 		},
 		"node_modules/@sveltejs/vite-plugin-svelte": {
@@ -838,6 +844,17 @@
 				"vite": "^6.0.0"
 			}
 		},
+		"node_modules/@sveltestrap/sveltestrap": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/@sveltestrap/sveltestrap/-/sveltestrap-7.1.0.tgz",
+			"integrity": "sha512-TpIx25kqLV+z+VD3yfqYayOI1IaCeWFbT0uqM6NfA4vQgDs9PjFwmjkU4YEAlV/ngs9e7xPmaRWE7lkrg4Miow==",
+			"dependencies": {
+				"@popperjs/core": "^2.11.8"
+			},
+			"peerDependencies": {
+				"svelte": "^4.0.0 || ^5.0.0 || ^5.0.0-next.0"
+			}
+		},
 		"node_modules/@types/cookie": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
@@ -847,14 +864,12 @@
 		"node_modules/@types/estree": {
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
-			"integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
-			"dev": true
+			"integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ=="
 		},
 		"node_modules/acorn": {
 			"version": "8.14.1",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
 			"integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
-			"dev": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -866,7 +881,6 @@
 			"version": "5.3.2",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
 			"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
-			"dev": true,
 			"engines": {
 				"node": ">= 0.4"
 			}
@@ -875,7 +889,6 @@
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
 			"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
-			"dev": true,
 			"engines": {
 				"node": ">= 0.4"
 			}
@@ -914,7 +927,6 @@
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
 			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-			"dev": true,
 			"engines": {
 				"node": ">=6"
 			}
@@ -1003,22 +1015,20 @@
 		"node_modules/esm-env": {
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
-			"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
-			"dev": true
+			"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA=="
 		},
 		"node_modules/esrap": {
-			"version": "1.4.6",
-			"resolved": "https://registry.npmjs.org/esrap/-/esrap-1.4.6.tgz",
-			"integrity": "sha512-F/D2mADJ9SHY3IwksD4DAXjTt7qt7GWUf3/8RhCNWmC/67tyb55dpimHmy7EplakFaflV0R/PC+fdSPqrRHAQw==",
-			"dev": true,
+			"version": "1.4.9",
+			"resolved": "https://registry.npmjs.org/esrap/-/esrap-1.4.9.tgz",
+			"integrity": "sha512-3OMlcd0a03UGuZpPeUC1HxR3nA23l+HEyCiZw3b3FumJIN9KphoGzDJKMXI1S72jVS1dsenDyQC0kJlO1U9E1g==",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15"
 			}
 		},
 		"node_modules/fdir": {
-			"version": "6.4.3",
-			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
-			"integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
+			"version": "6.4.6",
+			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
+			"integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
 			"dev": true,
 			"peerDependencies": {
 				"picomatch": "^3 || ^4"
@@ -1057,11 +1067,18 @@
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
 			"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "^1.0.6"
 			}
 		},
+		"node_modules/js-cookie": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+			"integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+			"engines": {
+				"node": ">=14"
+			}
+		},
 		"node_modules/kleur": {
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@@ -1084,14 +1101,12 @@
 		"node_modules/locate-character": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
-			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-			"dev": true
+			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
 		},
 		"node_modules/magic-string": {
 			"version": "0.30.17",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
 			"integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.5.0"
 			}
@@ -1144,6 +1159,18 @@
 			"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
 			"dev": true
 		},
+		"node_modules/picomatch": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+			"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
 		"node_modules/postcss": {
 			"version": "8.5.3",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
@@ -1266,10 +1293,9 @@
 			}
 		},
 		"node_modules/svelte": {
-			"version": "5.25.6",
-			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.25.6.tgz",
-			"integrity": "sha512-RGkaeAXDuJdvhA1fdSM5GgD++vYfJYijZL0uN6kM2s/TRJ663jktBhZlF0qjzAJGR/34PtaeT3G8MKJY1EKeqg==",
-			"dev": true,
+			"version": "5.34.8",
+			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.34.8.tgz",
+			"integrity": "sha512-TF+8irl7rpj3+fpaLuPRX5BqReTAqckp0Fumxa/mCeK3fo0/MnBb9W/Z2bLwtqj3C3r5Lm6NKIAw7YrgIv1Fwg==",
 			"dependencies": {
 				"@ampproject/remapping": "^2.3.0",
 				"@jridgewell/sourcemap-codec": "^1.5.0",
@@ -1280,7 +1306,7 @@
 				"axobject-query": "^4.1.0",
 				"clsx": "^2.1.1",
 				"esm-env": "^1.2.1",
-				"esrap": "^1.4.6",
+				"esrap": "^1.4.8",
 				"is-reference": "^3.0.3",
 				"locate-character": "^3.0.0",
 				"magic-string": "^0.30.11",
@@ -1313,6 +1339,22 @@
 				"typescript": ">=5.0.0"
 			}
 		},
+		"node_modules/tinyglobby": {
+			"version": "0.2.14",
+			"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
+			"integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+			"dev": true,
+			"dependencies": {
+				"fdir": "^6.4.4",
+				"picomatch": "^4.0.2"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/SuperchupuDev"
+			}
+		},
 		"node_modules/totalist": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
@@ -1336,14 +1378,17 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "6.2.5",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.5.tgz",
-			"integrity": "sha512-j023J/hCAa4pRIUH6J9HemwYfjB5llR2Ps0CWeikOtdR8+pAURAk0DoJC5/mm9kd+UgdnIy7d6HE4EAvlYhPhA==",
+			"version": "6.3.5",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
+			"integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
 			"dev": true,
 			"dependencies": {
 				"esbuild": "^0.25.0",
+				"fdir": "^6.4.4",
+				"picomatch": "^4.0.2",
 				"postcss": "^8.5.3",
-				"rollup": "^4.30.1"
+				"rollup": "^4.34.9",
+				"tinyglobby": "^0.2.13"
 			},
 			"bin": {
 				"vite": "bin/vite.js"
@@ -1423,8 +1468,7 @@
 		"node_modules/zimmerframe": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
-			"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
-			"dev": true
+			"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w=="
 		}
 	}
 }
diff --git a/package.json b/package.json
index c965bdd..db0e69e 100644
--- a/package.json
+++ b/package.json
@@ -15,13 +15,15 @@
 		"@sveltejs/adapter-auto": "^4.0.0",
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
-		"svelte": "^5.0.0",
+		"svelte": "^5.34.8",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
 		"vite": "^6.2.5"
 	},
 	"dependencies": {
+		"@sveltestrap/sveltestrap": "^7.1.0",
 		"bootstrap-icons": "^1.11.3",
+		"js-cookie": "^3.0.5",
 		"leaflet": "^1.9.4",
 		"leaflet-velocity": "^2.1.4"
 	}
diff --git a/src/app.css b/src/app.css
deleted file mode 100644
index bd6213e..0000000
--- a/src/app.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
\ No newline at end of file
diff --git a/src/app.html b/src/app.html
index c6e8911..a01612f 100644
--- a/src/app.html
+++ b/src/app.html
@@ -4,6 +4,7 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<link rel="stylesheet" href="%sveltekit.assets%/css/bootstrap.min.css">
+		<link rel="stylesheet" href="%sveltekit.assets%/css/custom.css" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 		<style>
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
new file mode 100644
index 0000000..8d8bebb
--- /dev/null
+++ b/src/lib/auth.ts
@@ -0,0 +1,80 @@
+import Cookies from 'js-cookie';
+
+export const CSRF_URL = 'http://localhost:8000/api/csrf/';
+export const LOGIN_URL = 'http://localhost:8000/api/login/';
+export const LOGOUT_URL = 'http://localhost:8000/api/logout/';
+export const SESSION_URL = 'http://localhost:8000/api/session/';
+export const WHOAMI_URL = 'http://localhost:8000/api/whoami/';
+
+export async function getCsrfToken(): Promise<string | null> {
+    return Cookies.get('csrftoken') || null;
+}
+
+export async function getCsrfTokenAuth(): Promise<string | null> {
+    const response = await fetch(CSRF_URL, {});
+    console.log('CSRF Token Response:', response);
+    return Cookies.get('csrftoken') || null;
+}
+
+export async function checkAuthenticated(): Promise<boolean> {
+    const csrfToken = await getCsrfTokenAuth();
+    if (!csrfToken) {
+        throw new Error('CSRF token not found');
+    }
+    const response = await fetch(SESSION_URL, {
+        credentials: 'include',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRFToken': csrfToken
+        },
+    });
+    let data = await (response as Response).json();
+    return data.isAuthenticated;
+}
+
+export async function login(username: string, password: string): Promise<void> {
+    const csrfToken = await getCsrfTokenAuth();
+    if (!csrfToken) {
+        throw new Error('CSRF token not found');
+    }
+
+    const response = await fetch(LOGIN_URL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRFToken': csrfToken
+        },
+        body: JSON.stringify({ username, password }),
+        credentials: 'include'
+    });
+
+    if (!response.ok) {
+        throw new Error(`Login failed: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    return data;
+}
+
+export async function logout(): Promise<void> {
+    const csrfToken = await getCsrfTokenAuth();
+    if (!csrfToken) {
+        throw new Error('CSRF token not found');
+    }
+
+    const response = await fetch(LOGOUT_URL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRFToken': csrfToken
+        },
+        credentials: 'include'
+    });
+
+    if (!response.ok) {
+        throw new Error(`Logout failed: ${response.statusText}`);
+    }
+
+    console.log('Logout successful');
+    return;
+}
\ No newline at end of file
diff --git a/src/lib/prediction.ts b/src/lib/prediction.ts
index a5e60c6..e9c9b26 100644
--- a/src/lib/prediction.ts
+++ b/src/lib/prediction.ts
@@ -2,6 +2,9 @@ import { writable } from "svelte/store"
 import type { LatLngExpression } from "leaflet";
 import L from "leaflet";
 
+import { getCsrfToken } from "./auth";
+
+
 interface TrajectoryPoint {
     altitude: number;
     datetime: string;
@@ -104,12 +107,19 @@ export const getForecast = async (flightParameters: Record<string, any>, startDa
 
     try {
         // Example POST request - replace with your actual API endpoint
-        const response = await fetch('http://127.0.0.1:8000/api/predictions', {
+        const csrfToken = await getCsrfToken();
+        if (!csrfToken) {
+            throw new Error('CSRF token not found');
+        }
+
+        const response = await fetch('http://localhost:8000/api/predictions', {
             method: 'POST',
             headers: {
-            'Content-Type': 'application/json',
+                'Content-Type': 'application/json',
+                'X-CSRFToken': csrfToken
             },
-            body: JSON.stringify(flightParameters)
+            body: JSON.stringify(flightParameters),
+            credentials: 'include'
         });
 
         if (!response.ok) {
diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index 3abd36e..780c59f 100644
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@@ -1,110 +1,130 @@
 <script>
     import { goto } from '$app/navigation';
     import { page } from '$app/stores';
+    import { checkAuthenticated, logout } from '$lib/auth';
+    import {
+        Dropdown,
+        DropdownItem,
+        DropdownMenu,
+        DropdownToggle,
+        Nav,
+        NavItem,
+        NavLink,
+        Navbar,
+        NavbarBrand
+    } from '@sveltestrap/sveltestrap';
 
     // Check if user is authenticated (using localStorage token)
     let isAuthenticated = false;
     
     // This should be reactive to changes in auth status
-    $: isAuthenticated = typeof window !== 'undefined' ? !!localStorage.getItem('accessToken') : false;
+    $: if (typeof window !== 'undefined') {
+        Promise.resolve(checkAuthenticated()).then(result => {
+            isAuthenticated = result;
+        });
+    } else {
+        isAuthenticated = false;
+    }
     
     function handleLogout() {
         // Clear authentication tokens
-        localStorage.removeItem('accessToken');
-        localStorage.removeItem('refreshToken');
-        
+        try {
+            logout();
+        } catch (error) {
+            console.error('Logout failed:', error);
+        }
         // Update auth status
         isAuthenticated = false;
         
         // Redirect to login page
-        goto('/login');
+        goto('/');
     }
 </script>
 
-<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top custom-navbar">
-    <div class="container-fluid white-bg">
-        <a class="navbar-brand" href="/">
-            <img src="/logo.svg" alt="Logo" height="36" />
-        </a>
-        <button
-            class="navbar-toggler"
-            type="button"
-            data-bs-toggle="collapse"
-            data-bs-target="#navbarNav"
-            aria-controls="navbarNav"
-            aria-expanded="false"
-            aria-label="Toggle navigation"
-        >
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarNav">
-            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                <li class="nav-item">
-                    <a class="nav-link nav-full-height {window.location.pathname === '/predict' ? 'active' : ''}" href="/predict">Прогнозирование</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link nav-full-height {window.location.pathname === '/track' ? 'active' : ''}" href="/track">Слежение</a>
-                </li>
-            </ul>
-            <ul class="navbar-nav">
-                {#if isAuthenticated}
-                    <li class="nav-item">
-                        <button 
-                            class="nav-link nav-full-height" 
-                            on:click={handleLogout}
-                            style="cursor: pointer;"
-                        >
-                            Logout
-                        </button>
-                    </li>
-                {:else}
-                    <li class="nav-item">
-                        <a class="nav-link nav-full-height {$page.url.pathname === '/login' ? 'active' : ''}" href="/login">Login</a>
-                    </li>
-                {/if}
-            </ul>
-        </div>
-    </div>
-</nav>
+<!-- <Navbar color="dark" dark expand="md">
+  <Nav navbar>
+    <NavItem>
+      <NavLink href="/components/">Inactive Link</NavLink>
+    </NavItem>
+    <Dropdown nav setActiveFromChild>
+      <DropdownToggle nav class="nav-link" caret>
+        Dropdown
+      </DropdownToggle>
+      <DropdownMenu>
+        <DropdownItem href="#" active>
+          Lancelot
+        </DropdownItem>
+        <DropdownItem href="#">Link</DropdownItem>
+        <DropdownItem href="#">Secret</DropdownItem>
+        <DropdownItem href="#">Chimp</DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  </Nav>
+</Navbar> -->
+
+<Navbar color="light" light expand="lg" fixed="top" class="custom-navbar">
+    <Nav class="me-auto mb-2 mb-lg-0" navbar>
+        <NavbarBrand href="/" class="nav-full-height">
+            <img src="/logo.svg" alt="Logo" height="36" class="d-inline-block align-text-top" />
+        </NavbarBrand>
+        <NavItem>
+            <NavLink
+                href="/predict"
+                class="nav-full-height"
+                active={$page.url.pathname === '/predict'}
+            >
+                Прогнозирование
+            </NavLink>
+        </NavItem>
+        <NavItem>
+            <NavLink
+                href="/track"
+                class="nav-full-height"
+                active={$page.url.pathname === '/track'}
+            >
+                Слежение
+            </NavLink>
+        </NavItem>
+    </Nav>
+    <Nav navbar>
+        {#if isAuthenticated}
+            <Dropdown nav inNavbar>
+                <DropdownToggle nav caret class="nav-full-height">
+                    Account
+                </DropdownToggle>
+                <DropdownMenu end>
+                    <DropdownItem href="/user/account">
+                        Account Settings
+                    </DropdownItem>
+                    <DropdownItem href="/user/templates">
+                        Saved Templates
+                    </DropdownItem>
+                    <DropdownItem href="/user/predictions">
+                        Prediction History
+                    </DropdownItem>
+                    <DropdownItem href="/user/flights">
+                        Flight History
+                    </DropdownItem>
+                    <DropdownItem divider />
+                    <DropdownItem on:click={handleLogout}>
+                        Logout
+                    </DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+        {:else}
+            <NavItem>
+                <NavLink
+                    href="/login"
+                    class="nav-full-height"
+                    active={$page.url.pathname === '/login'}
+                >
+                    Login
+                </NavLink>
+            </NavItem>
+        {/if}
+    </Nav>
+</Navbar>
 
 <style>
-    .custom-navbar {
-        height: 44px;
-        padding-top: 0rem;
-        padding-bottom: 0rem;
-        z-index: 1000;
-        border: none; 
-    }
 
-    .nav-link {
-        color: inherit;
-        padding-left: 1rem !important; 
-        padding-right: 1rem !important; 
-        padding-top: 12px;
-        background-color: var(--bs-light); 
-        margin-right: 1px;
-    }
-
-    .nav-link:hover {
-        color: var(--bs-light); 
-        background-color: var(--bs-primary); 
-    }
-
-    .nav-link.active {
-        color: var(--bs-light); 
-        background-color: var(--bs-primary); 
-    }
-
-    .nav-full-height {
-        display: flex;
-        align-items: center;
-        height: 100%;
-    }
-
-    .white-bg {
-        background-color: #fff !important; 
-    }
-    .navbar-brand {
-        margin-right: 1em;
-    }
 </style>
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index f2a1f1e..a48518c 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,18 +1,12 @@
 <script>
     import { goto } from '$app/navigation';
+    import { login } from '$lib/auth';
     
     let username = '';
     let password = '';
     let error = '';
     let isLoading = false;
 
-    async function getCsrfToken() {
-        const response = await fetch('http://127.0.0.1:8000/api/session/', {
-            credentials: 'include'
-        });
-    return response.headers.get('X-CSRFToken');
-    }
-
     async function handleLogin() {
         if (!username || !password) {
             error = 'Please enter both username and password';
@@ -26,37 +20,15 @@
         
         // login request
         try {
-            const response = await fetch('http://127.0.0.1:8000/api/login', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRFToken': await getCsrfToken(),
-                },
-                body: JSON.stringify({
-                    username: username,
-                    password: password
-                }),
-                credentials: 'include' // For session/cookie based auth
-            });
-
-            if (!response.ok) {
-                const errorData = await response.json();
-                throw new Error(errorData.message || 'Login failed');
-            }
-
-            const data = await response.json();
-            
-            // Store token if using JWT
-            if (data.access) {
-                localStorage.setItem('accessToken', data.access);
-                if (data.refresh) {
-                    localStorage.setItem('refreshToken', data.refresh);
-                }
-            }
+            await login(username, password);
             
             goto('/'); // Redirect after successful login
         } catch (err) {
-            error = err.message || 'Invalid credentials';
+            if (err instanceof Error) {
+                error = err.message || 'Invalid credentials';
+            } else {
+                error = 'Invalid credentials';
+            }
         } finally {
             isLoading = false;
         }
diff --git a/src/routes/map.svelte b/src/routes/map.svelte
index 6e145e1..f2c756b 100644
--- a/src/routes/map.svelte
+++ b/src/routes/map.svelte
@@ -1,6 +1,9 @@
-<script>
+<script lang="ts">
     import { onMount } from 'svelte';
     import * as L from 'leaflet';
+    import type { Map as LeafletMap } from 'leaflet';
+    import type { Marker } from 'leaflet';
+    import type { LatLng } from 'leaflet';
     import 'leaflet/dist/leaflet.css';
     import VelocityLayer from './velocity.svelte';
     import { distHaversine } from '../lib/mathutil.ts';
@@ -8,10 +11,7 @@
     import { latestPredictionParsed } from '../lib/prediction.ts';
     import { latestTelemetryParsed } from '../lib/telemetry.ts';
 
-    /**
-        * @type {L.Map}
-    */
-    let map;
+    let map: typeof LeafletMap;
     let mouseLat = 0;
     let mouseLng = 0;
     let inputLat = '56.3576';
@@ -26,10 +26,7 @@
         },
         data: null, // здесь будут ваши данные
     };
-    /**
-        * @type {null}
-    */
-    let marker = null;
+    let marker: typeof Marker | null = null;
 
     export { mouseLat, mouseLng, inputLat, inputLng, updateMapPosition };
 
@@ -78,7 +75,7 @@
         const response = await fetch('src/routes/testVelo.json');
         velocityOptions.data = await response.json();
 
-        map.on('mousemove', (e) => {
+        map.on('mousemove', (e: any) => {
             mouseLat = e.latlng.lat.toFixed(6);
             mouseLng = e.latlng.lng.toFixed(6);
         });
@@ -97,12 +94,12 @@
         });
     });
 
-    const plotPrediction = (prediction) => {
+    const plotPrediction = (prediction: any) => {
         console.log("Flight data parsed, creating map plot...");
 
         // Clear existing map items
         if (marker) {
-            map.eachLayer((layer) => {
+            map.eachLayer((layer: any) => {
                 if (layer instanceof L.Marker || layer instanceof L.Polyline) {
                     map.removeLayer(layer);
                 }
@@ -163,12 +160,12 @@
         map.setView(launch.latlng, 8);
     };
 
-    const plotTelemetryTrack = (telemetry) => {
+    const plotTelemetryTrack = (telemetry: any) => {
         console.log("Telemetry data parsed, creating map plot...");
 
         // Clear existing map items
         if (marker) {
-            map.eachLayer((layer) => {
+            map.eachLayer((layer: any) => {
                 if (layer instanceof L.Marker || layer instanceof L.Polyline) {
                     map.removeLayer(layer);
                 }
@@ -203,7 +200,7 @@
 // }
 
         // Add telemetry markers to the map
-        telemetry.datapoints.forEach((point) => {
+        telemetry.datapoints.forEach((point: any) => {
             const telemetryMarker = L.marker([point.latitude, point.longitude], {
                 title: `Telemetry (${point.latitude.toFixed(4)}, ${point.longitude.toFixed(4)}) at ${point.datetime}`,
                 icon: telemetryIcon,
diff --git a/src/routes/user/account/+page.svelte b/src/routes/user/account/+page.svelte
new file mode 100644
index 0000000..9d97fbd
--- /dev/null
+++ b/src/routes/user/account/+page.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+    import Navbar from '../../Navbar.svelte';
+</script>
+
+<main>
+    <Navbar />
+    <div class="container">
+        <h1>User Account</h1>
+        <p>Manage your account settings here.</p>
+        <!-- Add account management components or links here -->
+    </div>
+</main>
\ No newline at end of file
diff --git a/src/routes/user/account/+page.ts b/src/routes/user/account/+page.ts
new file mode 100644
index 0000000..b2463b2
--- /dev/null
+++ b/src/routes/user/account/+page.ts
@@ -0,0 +1 @@
+export const ssr =false;
\ No newline at end of file
diff --git a/src/routes/user/flights/+page.ts b/src/routes/user/flights/+page.ts
new file mode 100644
index 0000000..b2463b2
--- /dev/null
+++ b/src/routes/user/flights/+page.ts
@@ -0,0 +1 @@
+export const ssr =false;
\ No newline at end of file
diff --git a/src/routes/user/predictions/+page.ts b/src/routes/user/predictions/+page.ts
new file mode 100644
index 0000000..b2463b2
--- /dev/null
+++ b/src/routes/user/predictions/+page.ts
@@ -0,0 +1 @@
+export const ssr =false;
\ No newline at end of file
diff --git a/src/routes/user/templates/+page.ts b/src/routes/user/templates/+page.ts
new file mode 100644
index 0000000..5829b7e
--- /dev/null
+++ b/src/routes/user/templates/+page.ts
@@ -0,0 +1 @@
+export const ssr = false;
\ No newline at end of file
diff --git a/static/css/custom.css b/static/css/custom.css
new file mode 100644
index 0000000..64f02eb
--- /dev/null
+++ b/static/css/custom.css
@@ -0,0 +1,43 @@
+.custom-navbar {
+    height: 44px;
+    padding-top: 0rem;
+    padding-bottom: 0rem;
+    z-index: 1000;
+    border: none; 
+    background-color: white !important;
+}
+
+.nav-link {
+    color: inherit;
+    padding-left: 1rem !important; 
+    padding-right: 1rem !important; 
+    padding-top: 12px;
+    background-color: var(--bs-light); 
+    margin-right: 1px;
+}
+
+.nav-link:hover {
+    color: var(--bs-light) !important;; 
+    background-color: var(--bs-primary); 
+}
+
+.nav-link.active {
+    color: var(--bs-light) !important; 
+    background-color: var(--bs-primary); 
+}
+
+.nav-full-height {
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+.white-bg {
+    background-color: #fff !important; 
+}
+.navbar-brand {
+    margin-right: 1em;
+}
+.navbar {
+    z-index: 1001;
+}
\ No newline at end of file