diff --git a/src/components/CardSquare.svelte b/src/components/CardSquare.svelte
index de05edd..aba3bb8 100644
--- a/src/components/CardSquare.svelte
+++ b/src/components/CardSquare.svelte
@@ -10,7 +10,7 @@
   export let onDownload;
   export let setSearchQuery;
   export let allLogos = [];
-  export let setTheme = () => {};
+  export const setTheme = () => {};
 
   function openPreview(logo) {
     // Navigate to preview page using router
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 60b0943..2963e57 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -4,7 +4,7 @@
   export let logos = [];
   export let displayLogos = [];
   export let theme = "system";
-  export let setTheme = () => {}; // Added default function to prevent errors
+  export let setTheme = () => {};
   export let viewMode;
   export let setGridView;
   export let setListView;
@@ -209,7 +209,7 @@
       <button
         class="compact-switch-btn"
         aria-label="Toggle compact mode"
-        class:active={compactMode}
+        class:active={compactMode === true}
         on:click={() => setCompactMode(!compactMode)}
         title="Show only one logo per brand (compact mode)"
       >
diff --git a/src/components/List.svelte b/src/components/List.svelte
index 23aca5a..06bd95b 100644
--- a/src/components/List.svelte
+++ b/src/components/List.svelte
@@ -9,8 +9,8 @@
   export let setSearchQuery;
   export let allLogos = [];
   export let theme;
-  export let viewMode = "grid"; // "grid" or "list"
-  export let setTheme = () => {}; // Add setTheme prop with default no-op function
+  export let viewMode = "grid";
+  export let setTheme = () => {};
 
   $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
 </script>
diff --git a/src/components/Preview.svelte b/src/components/Preview.svelte
index c8997d3..e5b03c1 100644
--- a/src/components/Preview.svelte
+++ b/src/components/Preview.svelte
@@ -9,7 +9,7 @@
   export let show = false;
   export let logo = null;
   export let theme;
-  export let setTheme = () => {}; // Function to update theme
+  export const setTheme = () => {};
   export const openLogoByAnchor = () => {};
   export let onDownload = (path, name) => {
     const a = document.createElement("a");
diff --git a/src/pages/Home.svelte b/src/pages/Home.svelte
index 6aecb07..fa8bb4b 100644
--- a/src/pages/Home.svelte
+++ b/src/pages/Home.svelte
@@ -116,6 +116,10 @@
   }
 
   function setCompactMode(value) {
+    // Update local state first
+    compactMode = value;
+    console.log("Home: Setting compact mode to:", value);
+
     if (typeof window !== 'undefined' && window.appData && window.appData.setCompactMode) {
       window.appData.setCompactMode(value);
     }