diff --git a/frontend/src/components/sidebar/kortix-logo.tsx b/frontend/src/components/sidebar/kortix-logo.tsx
index efef9c83..28f9d318 100644
--- a/frontend/src/components/sidebar/kortix-logo.tsx
+++ b/frontend/src/components/sidebar/kortix-logo.tsx
@@ -8,7 +8,7 @@ interface KortixLogoProps {
   size?: number;
 }
 export function KortixLogo({ size = 24 }: KortixLogoProps) {
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
 
   // After mount, we can access the theme
@@ -16,13 +16,17 @@ export function KortixLogo({ size = 24 }: KortixLogoProps) {
     setMounted(true);
   }, []);
 
+  const shouldInvert = mounted && (
+    theme === 'dark' || (theme === 'system' && systemTheme === 'dark')
+  );
+
   return (
     <Image
         src="/kortix-symbol.svg"
         alt="Kortix"
         width={size}
         height={size}
-        className={`${mounted && theme === 'dark' ? 'invert' : ''} flex-shrink-0`}
+        className={`${shouldInvert ? 'invert' : ''} flex-shrink-0`}
       />
   );
 }