diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 49aeb95..8c0e0c8 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1 +1,7 @@
-<slot></slot>
\ No newline at end of file
+<script>
+	import BottomAppBar from './components/BottomAppBar.svelte';
+</script>
+<slot></slot>
+<footer>
+	<BottomAppBar />
+</footer>
\ No newline at end of file
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index d259e62..fe5da99 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -17,9 +17,7 @@
 	</div>
 </main>
 
-<footer>
-	<BottomAppBar />
-</footer>
+
 
 <style>
 	.bold {
diff --git a/frontend/src/routes/components/BottomAppBar.svelte b/frontend/src/routes/components/BottomAppBar.svelte
index fd34230..399a7fc 100644
--- a/frontend/src/routes/components/BottomAppBar.svelte
+++ b/frontend/src/routes/components/BottomAppBar.svelte
@@ -1,13 +1,13 @@
 <div id="container">
-	<div>
+	<a href="/">
 		<img src="/images/home-icon.png" alt="home" />
-	</div>
-	<div>
+	</a>
+	<a href="/paths">
 		<img src="/images/routes-icon.png" alt="possible routes" />
-	</div>
-	<div>
+	</a>
+	<a href="/settings">
 		<img src="/images/settings-icon.png" alt="settings" />
-	</div>
+	</a>
 </div>
 
 <style>
@@ -20,7 +20,8 @@
 		background-color: var(--card-background-color);
 	}
 
-	#container > div {
+	#container > a {
+		display: block;
 		flex: 1;
 		display: grid;
 		place-items: center;
diff --git a/frontend/src/routes/components/Path.svelte b/frontend/src/routes/components/Path.svelte
index 0bbcaa3..625d90e 100644
--- a/frontend/src/routes/components/Path.svelte
+++ b/frontend/src/routes/components/Path.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	export let type: string;
 	export let color: string;
+	export const path = '/path'
 </script>
 
-<div class="route-card">
+<a href='{path}' class="route-card" >
 	<div class="route-card-left" style="background-color: {color}">
 		<img src="/images/app-bar-logo.png" alt="logo" />
 	</div>
@@ -14,10 +15,11 @@
 		</div>
 	</div>
 	<div class="route-card-right" />
-</div>
+</a>
 
 <style>
 	.route-card {
+		display: block;
 		flex: 1;
 		--route-card-radius: 45px;
 		border-radius: var(--route-card-radius);
diff --git a/frontend/src/routes/path/+page.svelte b/frontend/src/routes/path/+page.svelte
new file mode 100644
index 0000000..3dd577e
--- /dev/null
+++ b/frontend/src/routes/path/+page.svelte
@@ -0,0 +1 @@
+Simple Path
\ No newline at end of file
diff --git a/frontend/src/routes/route/+page.svelte b/frontend/src/routes/paths/+page.svelte
similarity index 100%
rename from frontend/src/routes/route/+page.svelte
rename to frontend/src/routes/paths/+page.svelte
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
new file mode 100644
index 0000000..28922c1
--- /dev/null
+++ b/frontend/src/routes/settings/+page.svelte
@@ -0,0 +1 @@
+Settings
\ No newline at end of file