diff --git a/public/logo-cirux-dark.webp b/public/logo-cirux-dark.webp
new file mode 100644
index 0000000..e0c480f
Binary files /dev/null and b/public/logo-cirux-dark.webp differ
diff --git a/public/logo-cirux-light.webp b/public/logo-cirux-light.webp
new file mode 100644
index 0000000..746c860
Binary files /dev/null and b/public/logo-cirux-light.webp differ
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 3fa81b3..b0f12d3 100755
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -69,7 +69,7 @@ export default function LoginPage() {
         {/* Logo */}
         <div className="flex items-center justify-center mb-8">
           <Image
-            src="/logo-cirux.png"
+            src="/logo-cirux-light.webp"
             alt="Cirux"
             width={180}
             height={48}
diff --git a/src/app/logo-cirux-color.webp b/src/app/logo-cirux-color.webp
new file mode 100644
index 0000000..746c860
Binary files /dev/null and b/src/app/logo-cirux-color.webp differ
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 4e3a8b1..5aa9fcb 100755
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -4,6 +4,7 @@ import { useMemo, useCallback } from "react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import Image from "next/image";
+import { useTheme } from "next-themes";
 import {
   CalendarDays,
   Users,
@@ -53,6 +54,7 @@ export function Sidebar() {
   const role = useAuthStore((s) => s.role);
   const reset = useAuthStore((s) => s.reset);
   const supabase = useMemo(() => createClient(), []);
+  const { resolvedTheme } = useTheme();
 
   const handleLogout = useCallback(async () => {
     const { error } = await supabase.auth.signOut();
@@ -77,7 +79,7 @@ export function Sidebar() {
         {sidebarOpen && (
           <Link href="/dashboard" className="flex items-center hover:opacity-80 transition-opacity">
             <Image
-              src="/logo-cirux.png"
+              src={resolvedTheme === "dark" ? "/logo-cirux-dark.webp" : "/logo-cirux-light.webp"}
               alt="Cirux"
               width={120}
               height={32}