diff --git a/Frontend/src/components/Icons.svelte b/Frontend/src/components/Icons.svelte
new file mode 100644
index 0000000..f8dd86a
--- /dev/null
+++ b/Frontend/src/components/Icons.svelte
@@ -0,0 +1,106 @@
+<script context="module" lang="ts">
+	export type IconValues =
+		| 'analytics'
+		| 'back'
+		| 'building'
+		| 'calendar'
+		| 'calendarView'
+		| 'camera'
+		| 'chart'
+		| 'chat'
+		| 'chat-small'
+		| 'check'
+		| 'check-big'
+		| 'checklist'
+		| 'chevron'
+		| 'cloud'
+		| 'company'
+		| 'cross'
+		| 'dots-horizontal'
+		| 'dots-vertical'
+		| 'edit'
+		| 'eye'
+		| 'eye-off'
+		| 'filter-lines'
+		| 'hamburger'
+		| 'hash'
+		| 'help'
+		| 'heart-hand'
+		| 'home'
+		| 'listView'
+		| 'lock'
+		| 'logout'
+		| 'map'
+		| 'microphone'
+		| 'notification-box'
+		| 'people'
+		| 'plus'
+		| 'plus-circle'
+		| 'profile'
+		| 'publish'
+		| 'qrcode'
+		| 'schedule'
+		| 'search'
+		| 'share'
+		| 'settings'
+		| 'send'
+		| 'social'
+		| 'support'
+		| 'table'
+		| 'trash'
+		| 'upload'
+		| 'user-circle'
+		| 'user-default'
+		| 'user-down'
+		| 'user-plus'
+		| 'user-remove'
+		| 'verified'
+		| 'socials/Twitter'
+		| 'socials/LinkedIn';
+</script>
+
+<script lang="ts">
+	export var icon: IconValues;
+	export var active: boolean = false;
+	export var inactive: boolean = false;
+	export var black: boolean = false;
+	export var white: boolean = false;
+	export var rotate = 0;
+
+	let className = '';
+	export { className as class };
+</script>
+
+<div
+	class="icon {className}"
+	class:active
+	class:inactive
+	style:mask="url(/images/icons/{icon}.svg) no-repeat center"
+	style:-webkit-mask="url(/images/icons/{icon}.svg) no-repeat center"
+	style:transform="rotate({rotate}deg)"
+	class:black
+	class:white
+	on:click
+	on:dblclick
+	on:keydown
+	on:keypress
+	on:keyup
+/>
+
+<style>
+	.icon {
+		@apply w-8 h-8 bg-current origin-center rounded-[100%];
+	}
+	.icon.active {
+		@apply bg-primary;
+	}
+	.icon.black {
+		@apply bg-black;
+	}
+	.icon.inactive {
+		@apply bg-gray-700;
+	}
+	.icon.white {
+		@apply bg-white;
+	}
+</style>
diff --git a/Frontend/src/routes/+layout.svelte b/Frontend/src/routes/+layout.svelte
index 73fc39e..178b7bb 100644
--- a/Frontend/src/routes/+layout.svelte
+++ b/Frontend/src/routes/+layout.svelte
@@ -2,14 +2,22 @@
 	import '$styles/tailwind.css';
 
 	const pages = [
-		{ name: 'Home', icon: 'home', path: '/attendee' },
-		{ name: 'Chat', icon: 'chat', path: '/attendee/chat' },
-		{ name: 'Networking', icon: 'social', path: '/attendee/networking' },
-		{ name: 'Calendar', icon: 'calendar', path: '/attendee/calendar' }
+		{ name: 'Dashboard', path: '/' },
+		{ name: 'Settings', path: '/settings' },
+		{ name: 'About', path: '/about' },
+		{ name: 'Docs', path: '/docs' },
+		{ name: 'Contact', path: '/contact' }
 	] as const;
 </script>
 
 <div class="bg-[#0B2A37] h-screen w-screen">
-	<div />
+	<div class="flex flex-row items-center px-20">
+		<img class="w-40" src="/icons/Logo.svg" alt="Logo" />
+		<div class="w-full justify-between flex px-5 lg:px-40 text-lg text-white">
+			{#each pages as link}
+				<a href={link.path}>{link.name}</a>
+			{/each}
+		</div>
+	</div>
 	<slot />
 </div>
diff --git a/Frontend/src/routes/+page.svelte b/Frontend/src/routes/+page.svelte
index e69de29..e66909b 100644
--- a/Frontend/src/routes/+page.svelte
+++ b/Frontend/src/routes/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	let numberOfAccessPoints = 0;
+	let numberOfAccessPointsUp = 0;
+</script>
+
+<div class="height">
+	<div class="bg-[#05171E] rounded-lg w-3/4 h-full mx-auto mt-20 py-4 px-20">
+		<div class="text-white text-center text-3xl">Dashboard</div>
+		<div class="flex flex-row text-white mt-20 text-xl">
+			<div class="pr-2">Access point amount :</div>
+			<div>{numberOfAccessPoints}</div>
+		</div>
+		<div class="flex flex-row text-white mt-20 text-xl">
+			<div class="pr-2">Access points up :</div>
+			<div>{numberOfAccessPointsUp}</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	.height {
+		height: calc(100vh - 14rem);
+	}
+</style>
diff --git a/Frontend/src/routes/about/+page.svelte b/Frontend/src/routes/about/+page.svelte
new file mode 100644
index 0000000..bde5c16
--- /dev/null
+++ b/Frontend/src/routes/about/+page.svelte
@@ -0,0 +1,17 @@
+<div class="height">
+	<div class="bg-[#05171E] rounded-lg w-3/4 h-full mx-auto mt-20 py-4 px-20">
+		<div class="text-white text-center text-3xl">About</div>
+		<div class="flex flex-row text-white mt-20 text-xl">
+			This project was made by the Pátek team during the 2023 Junior AT&T Hackathon.
+		</div>
+		<div class="flex flex-row text-white mt-20 text-xl">
+			It’s an open-source management tool for access points with
+		</div>
+	</div>
+</div>
+
+<style>
+	.height {
+		height: calc(100vh - 14rem);
+	}
+</style>
diff --git a/Frontend/src/routes/contact/+page.svelte b/Frontend/src/routes/contact/+page.svelte
new file mode 100644
index 0000000..f2f53f9
--- /dev/null
+++ b/Frontend/src/routes/contact/+page.svelte
@@ -0,0 +1,12 @@
+<div class="height">
+	<div class="bg-[#05171E] rounded-lg w-3/4 h-full mx-auto mt-20 py-4 px-20">
+		<div class="text-white text-center text-3xl">Contact</div>
+		<div class="flex flex-row text-white mt-20 text-xl">patek@gbl.cz</div>
+	</div>
+</div>
+
+<style>
+	.height {
+		height: calc(100vh - 14rem);
+	}
+</style>
diff --git a/Frontend/src/routes/docs/+page.svelte b/Frontend/src/routes/docs/+page.svelte
new file mode 100644
index 0000000..c58fec1
--- /dev/null
+++ b/Frontend/src/routes/docs/+page.svelte
@@ -0,0 +1,19 @@
+<div class="height">
+	<div class="bg-[#05171E] rounded-lg w-3/4 h-full mx-auto mt-20 py-4 px-20">
+		<div class="text-white text-center text-3xl">Docs</div>
+		<div class="flex flex-row text-white mt-20 text-xl">
+			dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy
+			text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text
+			dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy
+			text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text
+			dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy
+			text dummy text
+		</div>
+	</div>
+</div>
+
+<style>
+	.height {
+		height: calc(100vh - 14rem);
+	}
+</style>
diff --git a/Frontend/src/routes/settings/+page.svelte b/Frontend/src/routes/settings/+page.svelte
new file mode 100644
index 0000000..ed0130f
--- /dev/null
+++ b/Frontend/src/routes/settings/+page.svelte
@@ -0,0 +1,26 @@
+<div class="height">
+	<div class="bg-[#05171E] rounded-lg w-3/4 h-full mx-auto mt-20 py-4 px-20">
+		<div class="text-white text-center text-3xl">Settings</div>
+		<table class="text-white border mx-auto mt-10">
+			<tr>
+				<th class="title">ID</th>
+				<th class="title">Name</th>
+				<th class="title">Type</th>
+				<th class="title">Location</th>
+				<th class="title">IP address</th>
+			</tr>
+		</table>
+		<div class="flex justify-center mt-10">
+			<button class="text-white py-2 px-10 bg-[#1D3920] rounded-xl"> Add access point </button>
+		</div>
+	</div>
+</div>
+
+<style>
+	.height {
+		height: calc(100vh - 14rem);
+	}
+	.title {
+		@apply py-2 px-10 bg-[#5B5B5B] border;
+	}
+</style>