diff --git a/surfsense_web/components/sidebar/app-sidebar.tsx b/surfsense_web/components/sidebar/app-sidebar.tsx
index a99e77c38..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,
@@ -32,7 +35,7 @@ import {
 	SidebarMenuButton,
 	SidebarMenuItem,
 } from "@/components/ui/sidebar";
-import Link from "next/link";
+
 
 // Map of icon names to their components
 export const iconMap: Record<string, LucideIcon> = {
@@ -217,7 +220,13 @@ export const AppSidebar = memo(function AppSidebar({
 						<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">
-							<Logo className="pointer-events-none 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>