diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7a687d6..8441cef 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,4 +1,5 @@
 <script>
+	import Nav from "./nav.svelte";
 	import "./tailwind.css";
 
 	import { Toaster } from "svelte-5-french-toast";
@@ -6,4 +7,16 @@
 </script>
 
 <Toaster />
-<div class="h-full font-[Sour_Gummy]">{@render children()}</div>
+<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 />
+	</div>
+	-->
+
+	{@render children()}
+</div>
diff --git a/src/routes/nav.svelte b/src/routes/nav.svelte
new file mode 100644
index 0000000..c875388
--- /dev/null
+++ b/src/routes/nav.svelte
@@ -0,0 +1,13 @@
+<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>
+	</button>
+</div>
diff --git a/src/routes/tailwind.css b/src/routes/tailwind.css
index 555c97a..f745326 100644
--- a/src/routes/tailwind.css
+++ b/src/routes/tailwind.css
@@ -3,11 +3,26 @@
 @import "tailwindcss";
 
 :root {
-	@apply bg-gray-950 text-white;
+	@apply bg-gray-950 font-[Sour_Gummy] text-white;
 }
 
 .btn {
-	@apply cursor-pointer rounded border-2 border-white bg-gray-600 px-4 py-2 font-bold text-white transition-all hover:scale-105 hover:-rotate-5 hover:bg-gray-500 hover:shadow-lg;
+	@apply flex cursor-pointer items-center gap-1 rounded border-2 border-white bg-gray-600 px-4 py-2 font-bold text-white transition-all hover:scale-105 hover:bg-gray-500 hover:shadow-lg;
+
+	&.compact {
+		@apply px-1 py-0.5;
+	}
+
+	&.circular {
+		@apply rounded-full;
+		&.compact {
+			@apply px-0.75 py-0.75;
+		}
+	}
+
+	&.dull {
+		@apply border-gray-700 bg-transparent text-gray-700 hover:bg-gray-700 hover:text-white;
+	}
 
 	&.green {
 		@apply bg-green-600 hover:bg-green-500;
@@ -15,5 +30,5 @@
 }
 
 .card {
-	@apply shadow-[4px_4px_0px_0px_white] hover:-translate-0.5 hover:shadow-[6px_6px_0px_0px_white] active:translate-0.5 active:shadow-[2px_2px_0px_0px_white] cursor-pointer border-2 border-gray-700 bg-gray-800 p-4 rounded transition-all;
-}
\ No newline at end of file
+	@apply cursor-pointer rounded border-2 border-gray-700 bg-gray-800 p-4 shadow-[4px_4px_0px_0px_white] transition-all hover:-translate-0.5 hover:shadow-[6px_6px_0px_0px_white] active:translate-0.5 active:shadow-[2px_2px_0px_0px_white];
+}