diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8441cef..7d5e63d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,19 +4,19 @@
 
 	import { Toaster } from "svelte-5-french-toast";
 	let { children } = $props();
+
+	import { page } from "$app/stores";
 </script>
 
 <Toaster />
-<div class="h-full">
-	<!--
-	will be used for the nav bar later as i asked my friend to 
-	make a design for it and the whole app so ill make it 
-	functional once he gives me the design
-
-	<div class="m-3 flex w-[calc(100%-1.5rem)] items-center justify-between rounded border-2 p-1">
-		<Nav />
+{#if $page.url.pathname == "/"}
+	<div class="h-full">
+		{@render children()}
 	</div>
-	-->
+{:else}
+	<div class="flex h-full flex-col">
+		<Nav />
 
-	{@render children()}
-</div>
+		<div class="flex-1">{@render children()}</div>
+	</div>
+{/if}
diff --git a/src/routes/nav.svelte b/src/routes/nav.svelte
index c875388..b8a410b 100644
--- a/src/routes/nav.svelte
+++ b/src/routes/nav.svelte
@@ -1,13 +1,86 @@
-<button class="btn compact dull text-4xl">
-	<img
-		src="https://hc-cdn.hel1.your-objectstorage.com/s/v3/4a82e0c815624c7786ca2a5addbcc74487da8940_group_8__2_.svg"
-		class="h-12"
-		alt=""
-	/>Go back
-	<i class="nf nf-md-keyboard_backspace"></i>
-</button>
-<div>
-	<button class="btn compact dull circular text-4xl" aria-label="Settings">
-		<i class="nf nf-seti-config"></i>
+<script>
+	import { page } from "$app/stores";
+
+	let CurrentPage = $state();
+	CurrentPage = $page.url.pathname;
+	$effect(() => {
+		CurrentPage = $page.url.pathname;
+	});
+
+	let details = {
+		"/kahootclone": {
+			title: "Quizlet Home",
+			conformOnBack: null,
+		},
+		"/kahootclone/create": {
+			title: "Create Quiz",
+			conformOnBack: "Are you sure you want to go back? You will lose all currently entered Q&As.",
+		},
+		"/kahootclone/play": {
+			title: "Play Quiz",
+			conformOnBack: "Are you sure you want to leave the game? you wont be able to rejoin it.",
+		},
+		"/kahootclone/host": {
+			title: "Host Quiz",
+			conformOnBack: "Are you sure you want to leave the game? if you leave, the game will end.",
+		},
+		"/kahootclone/join": {
+			title: "Join Quiz",
+			conformOnBack: null,
+		},
+		"/kahootclone/results": {
+			title: "Leaderboard of Quiz Played",
+			conformOnBack: null,
+		},
+		"/wordle": {
+			title: "Play wordle",
+			conformOnBack:
+				"Are you sure you want to leave the game? you will lose your current game progress.",
+		},
+		"/randomname": {
+			title: "select a random name",
+			conformOnBack: null,
+		},
+		"/announcer": {
+			title: "Announcer something",
+			conformOnBack: null,
+		},
+		"/IdleScreen": {
+			title: "A Idle Screen",
+			conformOnBack: null,
+		},
+	};
+
+	import { OpenTab } from "./wordle/InfoAndSetings/main.svelte";
+</script>
+
+<div class="mb-1 flex items-center justify-between rounded border-2">
+	<button
+		class="btn mini dull"
+		onclick={() => {
+			if (
+				details[CurrentPage].conformOnBack == null
+					? true
+					: confirm(details[CurrentPage].conformOnBack)
+			) {
+				window.location.href = "../";
+			}
+		}}
+	>
+		<img
+			src="https://hc-cdn.hel1.your-objectstorage.com/s/v3/4a82e0c815624c7786ca2a5addbcc74487da8940_group_8__2_.svg"
+			class="h-6"
+			alt=""
+		/>Go back
+		<i class="nf nf-md-keyboard_backspace"></i>
 	</button>
+	<span class="text-lg font-medium">
+		{details[CurrentPage].title}
+	</span>
+	<div class="flex gap-2">
+		{#if CurrentPage == "/wordle"}
+			<button class="btn dull mini" onclick={() => OpenTab("WordLength")}> Change word legnth </button>
+			<button class="btn dull mini" onclick={() => OpenTab("Stats")}>Stats </button>
+		{/if}
+	</div>
 </div>
diff --git a/src/routes/tailwind.css b/src/routes/tailwind.css
index 3192c45..01b596e 100644
--- a/src/routes/tailwind.css
+++ b/src/routes/tailwind.css
@@ -17,6 +17,9 @@
 	&.slim {
 		@apply px-1 py-3;
 	}
+	&.mini {
+		@apply px-0.5 py-0.5;
+	}
 
 	&.green {
 		@apply bg-green-600 hover:bg-green-500;
diff --git a/src/routes/wordle/+page.svelte b/src/routes/wordle/+page.svelte
index 8d94c68..4fd4dd5 100644
--- a/src/routes/wordle/+page.svelte
+++ b/src/routes/wordle/+page.svelte
@@ -27,40 +27,6 @@
 		};
 	});
 </script>
-
-<div id="nav">
-	<div></div>
-	<div>
-		<button aria-label="Back to main menu" onclick={() => OpenTab("WordLength")}
-			><span class="front"
-				><svg
-					xmlns="http://www.w3.org/2000/svg"
-					height="24px"
-					viewBox="0 -960 960 960"
-					width="24px"
-					fill="#FFFFFF"
-					><path
-						d="M320-80 160-240l160-160 57 56-64 64h334l-63-64 56-56 160 160L640-80l-57-56 64-64H313l63 64-56 56ZM200-480v-400h80v400h-80Zm240 0v-400h80v400h-80Zm240 0v-400h80v400h-80Z"
-					/></svg
-				> Change word legnth
-			</span></button
-		>
-		<button aria-label="Back to main menu" onclick={() => OpenTab("Stats")}
-			><span class="front"
-				><svg
-					xmlns="http://www.w3.org/2000/svg"
-					height="24px"
-					viewBox="0 -960 960 960"
-					width="24px"
-					fill="#FFFFFF"
-					><path
-						d="m105-399-65-47 200-320 120 140 160-260 120 180 135-214 65 47-198 314-119-179-152 247-121-141-145 233Zm475 159q42 0 71-29t29-71q0-42-29-71t-71-29q-42 0-71 29t-29 71q0 42 29 71t71 29ZM784-80 676-188q-21 14-45.5 21t-50.5 7q-75 0-127.5-52.5T400-340q0-75 52.5-127.5T580-520q75 0 127.5 52.5T760-340q0 26-7 50.5T732-244l108 108-56 56Z"
-					/></svg
-				> Stats
-			</span></button
-		>
-	</div>
-</div>
 <div id="root">
 	<div id="left">
 		<Display />
@@ -70,48 +36,10 @@
 </div>
 
 <style>
-	#nav {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		background-color: #121212;
-		color: white;
-	}
 
-	button {
-		background: #292929;
-		border-radius: 12px;
-		border: none;
-		margin: 10px;
-		padding: 2px 0px;
-		cursor: pointer;
-		outline-offset: 4px;
-		max-width: 400px;
-	}
-	button:hover .front {
-		transform: translateY(-7px);
-	}
-
-	button:active .front {
-		transform: translateY(-2px);
-	}
-
-	.front {
-		display: flex;
-		text-align: center;
-		align-items: center;
-		padding: 5px;
-		border-radius: 12px;
-
-		background: #4d4d4d;
-		color: white;
-		transform: translateY(-4px);
-		transition: all 0.1s ease-in-out;
-		font-size: 25px;
-	}
 
 	#root {
-		height: 90%;
+		height: 100%;
 		display: flex;
 		margin: 0;
 		background-color: #121212;