diff --git a/src/App.tsx b/src/App.tsx
index 2563eb9..ac5b9ee 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,6 +14,7 @@ import { Skeleton } from './components/ui/skeleton';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './components/ui/tabs';
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from './components/ui/breadcrumb';
 import { Alert, AlertDescription } from './components/ui/alert';
+import logo from '../src/assets/klc-logo.png';
 import { 
   Home, 
   Users, 
@@ -404,10 +405,11 @@ const TopNav: React.FC<{
           </Button>
         )}
         <div className="flex items-center gap-2">
-          <div className="w-8 h-8 bg-brand-navy rounded-md flex items-center justify-center">
-            <span className="text-brand-navy-foreground font-bold text-sm">KLC</span>
-          </div>
-          <span className="font-semibold hidden sm:block">Knowledge Learning Centre</span>
+          <img
+          src={logo}
+          alt="Logo"
+          className="h-8 md:h-12 lg:h-14 w-auto object-contain"
+        />
         </div>
       </div>
       
diff --git a/src/assets/klc-logo.png b/src/assets/klc-logo.png
new file mode 100644
index 0000000..4d4b90e
Binary files /dev/null and b/src/assets/klc-logo.png differ