diff --git a/src/lib/Sidebar.svelte b/src/lib/Sidebar.svelte
index f1f4c4d..9d0672b 100644
--- a/src/lib/Sidebar.svelte
+++ b/src/lib/Sidebar.svelte
@@ -3,6 +3,7 @@
 	import { onDestroy } from 'svelte';
 	import Apiclient from './Apiclient';
 	import { page } from '$app/stores';
+	import SidebarComponent from './SidebarComponent.svelte';
 
 	$: logged_in = false;
 	$: currentPage = $page.path;
@@ -45,12 +46,7 @@
 
 	<div class="flex flex-col justify-between flex-1 mt-6">
 		<nav>
-			<a
-				class="flex items-center px-4 py-2 text-gray-700 rounded-md dark:text-gray-200"
-				class:dark:bg-gray-700={currentPage == '/'}
-				class:bg-gray-200={currentPage == '/'}
-				href="./"
-			>
+			<SidebarComponent title="Dashboard" href="./" pageUrl="/" bind:currentPage>
 				<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<path
 						d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17"
@@ -60,19 +56,12 @@
 						stroke-linejoin="round"
 					/>
 				</svg>
-
-				<span class="mx-4 font-medium">Dashboard</span>
-			</a>
+			</SidebarComponent>
 
 			<hr class="my-6 dark:border-gray-600" />
 
 			{#if logged_in}
-				<a
-					class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700"
-					class:dark:bg-gray-700={currentPage == '/links'}
-					class:bg-gray-200={currentPage == '/links'}
-					href="./links"
-				>
+				<SidebarComponent title="Manage Links" href="./links" pageUrl="/links" bind:currentPage>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						class="h-5 w-5"
@@ -87,15 +76,8 @@
 							d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
 						/>
 					</svg>
-
-					<span class="mx-4 font-medium">Manage Links</span>
-				</a>
-				<a
-					class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700"
-					class:dark:bg-gray-700={currentPage == '/visits'}
-					class:bg-gray-200={currentPage == '/visits'}
-					href="./visits"
-				>
+				</SidebarComponent>
+				<SidebarComponent title="All visits" href="./visits" pageUrl="/visits" bind:currentPage>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						class="h-5 w-5"
@@ -116,9 +98,7 @@
 							d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
 						/>
 					</svg>
-
-					<span class="mx-4 font-medium">All Visits</span>
-				</a>
+				</SidebarComponent>
 
 				<!-- <a
 					class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700"
@@ -167,12 +147,7 @@
 					<span class="mx-4 font-medium">Logout</span>
 				</button>
 			{:else}
-				<a
-					class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700"
-					class:dark:bg-gray-700={currentPage == '/login'}
-					class:bg-gray-200={currentPage == '/login'}
-					href="./login"
-				>
+				<SidebarComponent title="Login" href="./login" pageUrl="/login" bind:currentPage>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						class="h-5 w-5"
@@ -187,9 +162,7 @@
 							d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
 						/>
 					</svg>
-
-					<span class="mx-4 font-medium">Login</span>
-				</a>
+				</SidebarComponent>
 			{/if}
 		</nav>