diff --git a/src/routes/(dashboard)/+layout.svelte b/src/routes/(dashboard)/+layout.svelte
new file mode 100644
index 0000000..0385342
--- /dev/null
+++ b/src/routes/(dashboard)/+layout.svelte
@@ -0,0 +1 @@
+<slot />
\ No newline at end of file
diff --git a/src/routes/(dashboard)/+page.svelte b/src/routes/(dashboard)/+page.svelte
new file mode 100644
index 0000000..053e366
--- /dev/null
+++ b/src/routes/(dashboard)/+page.svelte
@@ -0,0 +1,7 @@
+
+
+<style lang="postcss">
+	/* :global(html) {
+		background-color: theme(colors.gray.300);
+	} */
+</style>
diff --git a/src/routes/(sites)/+layout.svelte b/src/routes/(sites)/+layout.svelte
new file mode 100644
index 0000000..2468198
--- /dev/null
+++ b/src/routes/(sites)/+layout.svelte
@@ -0,0 +1,12 @@
+<main>
+	<slot />
+</main>
+
+<style lang="postcss">
+	/* :global(html) {
+		background-color: theme(colors.gray.300);
+	} */
+	main {
+		@apply p-8;
+	}
+</style>
diff --git a/src/routes/(sites)/control/+page.svelte b/src/routes/(sites)/control/+page.svelte
new file mode 100644
index 0000000..a988323
--- /dev/null
+++ b/src/routes/(sites)/control/+page.svelte
@@ -0,0 +1,56 @@
+<script>
+	import { browser } from '$app/environment';
+</script>
+
+<h1 class="text-6xl font-bold">
+	Control
+</h1>
+<div class="relative aspect-square mt-4">
+	<div id="joystick" style="height: 300px;"></div>
+	<div class="circle">
+		<div class="circle-outer"></div>
+		<div class="circle-middle"></div>
+		<div class="circle-inner"></div>
+	</div>
+</div>
+
+
+{#if browser}
+<script>
+var joystick = nipplejs.create({
+	zone: document.getElementById('joystick'),
+	mode: 'static',
+	position: {left: '50%', top: '50%'},
+	color: '#1a1a1a',
+	restOpacity: 0,
+	size: 200,
+});
+</script>
+{/if}
+
+<style>
+	.circle > div {
+		@apply absolute aspect-square;
+		border-color: theme('colors.gray.300');
+		border-width: 1.5px;
+		border-radius: 50%;
+	}
+	.circle-outer {
+		top: 10%;
+		left: 10%;
+		height: 80%;
+		width: 80%;
+	}
+	.circle-middle {
+		top: 22.5%;
+		left: 22.5%;
+		height: 55%;
+		width: 55%;
+	}
+	.circle-inner {
+		top: 35%;
+		left: 35%;
+		height: 30%;
+		width: 30%;
+	}
+</style>
\ No newline at end of file
diff --git a/src/routes/(sites)/devices/+page.svelte b/src/routes/(sites)/devices/+page.svelte
new file mode 100644
index 0000000..542fb0d
--- /dev/null
+++ b/src/routes/(sites)/devices/+page.svelte
@@ -0,0 +1,55 @@
+<script>
+	import deviceImage from "./fts_first-render_minified.png";
+	var online = true;
+	var devicesList = ["AGV device #1", "AGV device #2", "AGV device #3"];
+</script>
+
+<h1 class="text-6xl font-bold">
+	Devices
+</h1>
+{#each devicesList as device}
+<article class="card mb-6 p-4 relative ring-0 bg-surface-50 bg-opacity-50">
+	<img class="mb-2 px-4 py-14" src="{deviceImage}" alt="Device preview">
+	<div class="flex justify-between items-center">
+		<h2 class="text-2xl">{device}</h2>
+		<div class="flex gap-2">
+			<button type="button" class="btn-icon variant-filled-warning">
+				<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512">
+					<!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.-->
+					<path d="M36.4 360.9L13.4 439 1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1L73 498.6l78.1-23c12.4-3.6 23.7-9.9 33.4-18.4c1.4-1.2 2.7-2.5 4-3.8L492.7 149.3c21.9-21.9 24.6-55.6 8.2-80.5c-2.3-3.5-5.1-6.9-8.2-10L453.3 19.3c-25-25-65.5-25-90.5 0L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4zm46 13.5c1.7-5.6 4.5-10.8 8.4-15.2c.6-.6 1.1-1.2 1.7-1.8L321 129 383 191 154.6 419.5c-4.7 4.7-10.6 8.2-17 10.1l-23.4 6.9L59.4 452.6l16.1-54.8 6.9-23.4z"/>
+				</svg>
+			</button>
+			<button type="button" class="btn-icon variant-filled-error">
+				<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512">
+					<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+					<path d="M170.5 51.6L151.5 80h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6H177.1c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80H368h48 8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8V432c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128H24c-13.3 0-24-10.7-24-24S10.7 80 24 80h8H80 93.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128V432c0 17.7 14.3 32 32 32H336c17.7 0 32-14.3 32-32V128H80zm80 64V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16z"/>
+				</svg>
+			</button>
+		</div>
+	</div>
+	{#if online}
+		<div class="badge variant-glass-surface absolute top-4 right-4">
+			<div class="w-2 h-2 rounded-full bg-success-500"></div>
+			<span>Online</span>
+		</div>
+	{:else}
+		<div class="badge variant-glass-surface absolute top-4 right-4">
+			<div class="w-2 h-2 rounded-full bg-error-500"></div>
+			<span>Offline</span>
+		</div>
+	{/if}
+</article>
+{/each}
+<button type="button" class="btn btn-lg variant-filled-primary w-full">
+	<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" class="w-5 h-5" viewBox="0 0 512 512">
+		<!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.-->
+		<path d="M16 288c-11.4-19.8-11.4-44.2 0-64L108.3 64.2c11.4-19.8 32.6-32 55.4-32H348.3c22.9 0 44 12.2 55.4 32L496 224c11.4 19.8 11.4 44.2 0 64L403.7 447.8c-11.4 19.8-32.6 32-55.4 32H163.7c-22.9 0-44-12.2-55.4-32L16 288zm27.7-48c-5.7 9.9-5.7 22.1 0 32L136 431.8c5.7 9.9 16.3 16 27.7 16H348.3c11.4 0 22-6.1 27.7-16L468.3 272c5.7-9.9 5.7-22.1 0-32L376 80.2c-5.7-9.9-16.3-16-27.7-16l-184.6 0c-11.4 0-22 6.1-27.7 16L43.7 240zM240 352V272H160c-8.8 0-16-7.2-16-16s7.2-16 16-16h80V160c0-8.8 7.2-16 16-16s16 7.2 16 16v80h80c8.8 0 16 7.2 16 16s-7.2 16-16 16H272v80c0 8.8-7.2 16-16 16s-16-7.2-16-16z"/>
+	</svg>
+	<span>Add new device</span>
+</button>
+
+<!-- <style lang="postcss">
+	svg {
+		@apply fill-gray-950;
+	}
+</style> -->
\ No newline at end of file
diff --git a/src/routes/(sites)/devices/fts_first-render_minified.png b/src/routes/(sites)/devices/fts_first-render_minified.png
new file mode 100644
index 0000000..b8fedcc
Binary files /dev/null and b/src/routes/(sites)/devices/fts_first-render_minified.png differ
diff --git a/src/routes/(sites)/help/+page.svelte b/src/routes/(sites)/help/+page.svelte
new file mode 100644
index 0000000..e5a8531
--- /dev/null
+++ b/src/routes/(sites)/help/+page.svelte
@@ -0,0 +1,3 @@
+<h1 class="text-6xl font-bold">
+	Help
+</h1>
diff --git a/src/routes/(sites)/settings/+page.svelte b/src/routes/(sites)/settings/+page.svelte
new file mode 100644
index 0000000..de2cd94
--- /dev/null
+++ b/src/routes/(sites)/settings/+page.svelte
@@ -0,0 +1,15 @@
+<h1 class="text-6xl font-bold">
+	Settings
+</h1>
+<p>
+	Onboarding neu starten
+</p>
+<p>
+	Dark Mode
+</p>
+<p>
+	Language
+</p>
+<p>
+	Reset
+</p>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a68854f..3b5d6c7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,8 +1,24 @@
-<script>
-	import "../app.css";
+<script>	
+	import "../app.pcss";
+	import Map from "../components/Map.svelte";
 	import Navigation from "../components/Navigation.svelte";
+	import { page } from '$app/stores';
+
+	var mapVisible = false;
+	$: $page.url.pathname == '/' || $page.url.pathname == '/control' ? mapVisible = true : mapVisible = false;
 </script>
 
-<slot />
+<div class="pb-28">
+	<slot></slot>
 
-<Navigation />
\ No newline at end of file
+	<div class="{mapVisible == true ? " block" : "hidden"}">
+		<Map></Map>
+	</div>
+</div>
+<Navigation></Navigation>
+
+<style lang="postcss">
+	/* :global(html) {
+		background-color: theme(colors.gray.300);
+	} */
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
deleted file mode 100644
index 5e66a2a..0000000
--- a/src/routes/+page.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<h1 class="text-6xl font-bold underline">
-	Hello world!
-</h1>
-
-<style lang="postcss">
-	:global(html) {
-		background-color: theme(colors.gray.100);
-	}
-</style>