diff --git a/surfsense_web/components/sidebar/app-sidebar.tsx b/surfsense_web/components/sidebar/app-sidebar.tsx
index 116260032..243f2c062 100644
--- a/surfsense_web/components/sidebar/app-sidebar.tsx
+++ b/surfsense_web/components/sidebar/app-sidebar.tsx
@@ -1,5 +1,8 @@
 "use client";
 
+import Link from "next/link";
+import Image from "next/image";
+
 import {
 	AlertCircle,
 	BookOpen,
@@ -33,6 +36,7 @@ import {
 	SidebarMenuItem,
 } from "@/components/ui/sidebar";
 
+
 // Map of icon names to their components
 export const iconMap: Record<string, LucideIcon> = {
 	BookOpen,
@@ -213,16 +217,22 @@ export const AppSidebar = memo(function AppSidebar({
 			<SidebarHeader>
 				<SidebarMenu>
 					<SidebarMenuItem>
-						<SidebarMenuButton size="lg" asChild aria-label="Go to home page">
-							<div>
-								<div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-									<Logo className="rounded-lg" />
-								</div>
-								<div className="grid flex-1 text-left text-sm leading-tight">
-									<span className="truncate font-medium">SurfSense</span>
-									<span className="truncate text-xs">beta v0.0.8</span>
-								</div>
+						<SidebarMenuButton asChild size="lg">
+						<Link href="/" className="flex items-center gap-2 w-full">
+							<div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+							<Image
+								src="/icon-128.png"
+								alt="SurfSense logo"
+								width={32}
+								height={32}
+								className="rounded-lg"
+							/>
 							</div>
+							<div className="grid flex-1 text-left text-sm leading-tight">
+							<span className="truncate font-medium">SurfSense</span>
+							<span className="truncate text-xs">beta v0.0.8</span>
+							</div>
+						</Link>
 						</SidebarMenuButton>
 					</SidebarMenuItem>
 				</SidebarMenu>