diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index a4c99d7..80113db 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -1,17 +1,16 @@
 <script>
-	import Icon from 'svelte-icons-pack/Icon.svelte'
-	import BiArrowBack from "svelte-icons-pack/bi/BiArrowBack";
-	import BiSolidHome from "svelte-icons-pack/bi/BiSolidHome";
-	import BsPerson from "svelte-icons-pack/bs/BsPerson";
-
+	import Icon from 'svelte-icons-pack/Icon.svelte';
+	import BiArrowBack from 'svelte-icons-pack/bi/BiArrowBack';
+	import BiSolidHome from 'svelte-icons-pack/bi/BiSolidHome';
+	import BsPerson from 'svelte-icons-pack/bs/BsPerson';
 </script>
 
-<div class='border border-black rounded-lg'>
-<div class="p-2">
-<ul class="flex flex-row gap-2 items-center justify-between">
-	<li><Icon src ={BiArrowBack} size={20} /></li>
-	<li><Icon src={BiSolidHome} size={20} /></li>
-	<li><Icon src={BsPerson} size={20} /></li>
-</ul>
-</div>
+<div class="border border-black rounded-lg">
+	<div class="p-2">
+		<ul class="flex flex-row gap-2 items-center justify-between">
+			<li><Icon src={BiArrowBack} size={20} /></li>
+			<li><Icon src={BiSolidHome} size={20} /></li>
+			<li><Icon src={BsPerson} size={20} /></li>
+		</ul>
+	</div>
 </div>
diff --git a/src/routes/account/+page.svelte b/src/routes/account/+page.svelte
index e303c21..ff11169 100644
--- a/src/routes/account/+page.svelte
+++ b/src/routes/account/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+	import Navbar from '../../lib/components/navbar.svelte';
 </script>
 
 <section>
@@ -44,5 +45,10 @@
 				</div>
 			</div>
 		</div>
+		<footer class="justify-items-end">
+			<div class="container mt-20">
+				<Navbar />
+			</div>
+		</footer>
 	</div>
 </section>
diff --git a/src/routes/bio/+page.svelte b/src/routes/bio/+page.svelte
index e477c6d..85e0050 100644
--- a/src/routes/bio/+page.svelte
+++ b/src/routes/bio/+page.svelte
@@ -1,52 +1,56 @@
 <script>
-
+	import Navbar from '../../lib/components/navbar.svelte';
 </script>
 
 <section>
-    <div class="text-center mt-5">
+	<div class="text-center mt-5">
 		<h1 class="text-3xl font-bold">Honesty</h1>
 		<p class="text-sm font-bold">by Fishie</p>
 	</div>
 
-    <div class="flex items-center justify-center mt-20">
-        <!-- if you wanna show the user is offline, change the classname to offline using jscript -->
-        <div class="avatar online">
-            <div class="w-20 rounded-full">
-                <!-- there is an issuee here that i will definetly deal with later....hopefully -->
-              <img src='https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80' alt="profile pic" />
-            </div>
-          </div>
-    </div>
+	<div class="flex items-center justify-center mt-20">
+		<!-- if you wanna show the user is offline, change the classname to offline using jscript -->
+		<div class="avatar online">
+			<div class="w-20 rounded-full">
+				<!-- there is an issuee here that i will definetly deal with later....hopefully -->
+				<img
+					src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
+					alt="profile pic"
+				/>
+			</div>
+		</div>
+	</div>
 
-    <div class="container">
-        <div class="flex items-center justify-center my-10">
-            <div class="card w-96 bg-base-100 shadow-xl">
-                <div class="card-body">
-                    <h2 class="card-title">Bio</h2>
-                    <p class="text-gray-500">lorem ipsum something</p>
-                </div>
-            </div>
-        </div>
-    </div>
+	<div class="container">
+		<div class="flex items-center justify-center my-10">
+			<div class="card w-96 bg-base-100 shadow-xl">
+				<div class="card-body">
+					<h2 class="card-title">Bio</h2>
+					<p class="text-gray-500">lorem ipsum something</p>
+				</div>
+			</div>
+		</div>
+	</div>
 
-    <div>
-    <div class="flex justify-center items-center flex-col gap-1">
-        <input type="text" placeholder="Youtube" class="input w-full max-w-xs" />
-        <input type="text" placeholder="Twitch" class="input w-full max-w-xs" />
-        <input type="text" placeholder="Instagram" class="input w-full max-w-xs" />
-        <input type="text" placeholder="Discord" class="input w-full max-w-xs" />
-        <input type="text" placeholder="Twitter" class="input w-full max-w-xs" />
-        <input type="text" placeholder="TikTok" class="input w-full max-w-xs" />
-        <input type="text" placeholder="SnapChat" class="input w-full max-w-xs" />
-    </div>
-</div>
+	<div>
+		<div class="flex justify-center items-center flex-col gap-1">
+			<input type="text" placeholder="Youtube" class="input w-full max-w-xs" />
+			<input type="text" placeholder="Twitch" class="input w-full max-w-xs" />
+			<input type="text" placeholder="Instagram" class="input w-full max-w-xs" />
+			<input type="text" placeholder="Discord" class="input w-full max-w-xs" />
+			<input type="text" placeholder="Twitter" class="input w-full max-w-xs" />
+			<input type="text" placeholder="TikTok" class="input w-full max-w-xs" />
+			<input type="text" placeholder="SnapChat" class="input w-full max-w-xs" />
+		</div>
+	</div>
 
-<div class="flex justify-center items-center">
-    <button class='btn btn-secondary'>
-        save
-    </button>
-</div>
-    
+	<div class="flex justify-center items-center">
+		<button class="btn btn-secondary"> save </button>
+	</div>
 
-
-</section>
\ No newline at end of file
+	<footer class="justify-items-end">
+		<div class="container mt-20">
+			<Navbar />
+		</div>
+	</footer>
+</section>
diff --git a/src/routes/feed/+page.svelte b/src/routes/feed/+page.svelte
index 1c37e88..ca3834b 100644
--- a/src/routes/feed/+page.svelte
+++ b/src/routes/feed/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+	import Navbar from '../../lib/components/navbar.svelte';
 </script>
 
 <section>
@@ -47,4 +48,11 @@
 			</div>
 		</div>
 	</div>
+
+	<footer>
+		<div class="container mt-10">
+			<Navbar />
+		</div>
+	</footer>
+
 </section>
diff --git a/src/routes/getPost/+page.svelte b/src/routes/getPost/+page.svelte
index f845e54..45ec520 100644
--- a/src/routes/getPost/+page.svelte
+++ b/src/routes/getPost/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+	import Navbar from '../../lib/components/navbar.svelte';
 </script>
 
 <section>
@@ -24,39 +25,37 @@
 		</div>
 	</div>
 
-    <div class="container">
-        <div class="flex items-center justify-center my-10">
-            <div class="card w-96 bg-base-100 shadow-xl">
-                <div class="card-body">
-                    <h2 class="card-title">@Username</h2>
-                    <p class="text-gray-500">lorem ipsum something</p>
-                </div>
-            </div>
-        </div>
-    </div>
-
-
-    <div class='mb-10'>
-        <div class="flex justify-center items-center">
-            <div class="rating">
-                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
-                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked />
-                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
-                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
-                <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
-              </div>
-        </div>
-    </div>
-
-
-    <div class="flex justify-center items-center">
-        <!-- i will change all buttons colours to match scheme during debugging -->
-        <button class="btn btn-secondary">
-            Share
-        </button>
-    </div>
-
+	<div class="container">
+		<div class="flex items-center justify-center my-10">
+			<div class="card w-96 bg-base-100 shadow-xl">
+				<div class="card-body">
+					<h2 class="card-title">@Username</h2>
+					<p class="text-gray-500">lorem ipsum something</p>
+				</div>
+			</div>
+		</div>
+	</div>
 
+	<div class="mb-10">
+		<div class="flex justify-center items-center">
+			<div class="rating">
+				<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
+				<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked />
+				<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
+				<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
+				<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
+			</div>
+		</div>
+	</div>
 
+	<div class="flex justify-center items-center">
+		<!-- i will change all buttons colours to match scheme during debugging -->
+		<button class="btn btn-secondary"> Share </button>
+	</div>
 
+	<footer>
+		<div class="container mt-10">
+			<Navbar />
+		</div>
+	</footer>
 </section>
diff --git a/src/routes/posting/+page.svelte b/src/routes/posting/+page.svelte
index ec52937..bd428cf 100644
--- a/src/routes/posting/+page.svelte
+++ b/src/routes/posting/+page.svelte
@@ -1,13 +1,14 @@
 <script>
+	import Navbar from '../../lib/components/navbar.svelte';
 </script>
 
 <section>
 	<div class="text-center mt-10">
 		<h1 class="text-3xl font-bold">Honesty</h1>
-        <p class="text-sm font-bold">by Fishie</p>
+		<p class="text-sm font-bold">by Fishie</p>
 	</div>
 
-	<div class='mt-40 mb-10'>
+	<div class="mt-40 mb-10">
 		<div class="flex justify-center items-center">
 			<textarea
 				placeholder="Post contents here"
@@ -18,25 +19,31 @@
 
 	<div class="flex justify-center items-center">
 		<div class="rating">
-            <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
-            <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked />
-            <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
-            <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
-            <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
-          </div>
+			<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
+			<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked />
+			<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
+			<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
+			<input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
+		</div>
 	</div>
 
 	<div class="flex justify-center items-center flex-col mt-40">
-        <p>anon</p>
+		<p>anon</p>
 		<div class="form-control">
-            <label class="label cursor-pointer">
-              <input type="checkbox" checked class="checkbox" />
-            </label>
-          </div>
+			<label class="label cursor-pointer">
+				<input type="checkbox" checked class="checkbox" />
+			</label>
+		</div>
 	</div>
-    <div class="flex justify-center items-center my-10">
-	<div class="btn btn-secondary">
-		<button>Submit</button>
+	<div class="flex justify-center items-center my-10">
+		<div class="btn btn-secondary">
+			<button>Submit</button>
+		</div>
 	</div>
-</div>
+
+	<footer>
+		<div class="container mt-5">
+			<Navbar />
+		</div>
+	</footer>
 </section>