diff --git a/public/global.css b/public/global.css
index d87ae39..f56f94a 100644
--- a/public/global.css
+++ b/public/global.css
@@ -208,41 +208,36 @@ button:hover {
   justify-content: space-between;
 }
 
+/* Global color circle and switcher styles */
 .color-circle {
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 4px;
+  border: 1px solid var(--color-border, #ddd);
   cursor: pointer;
+  transition: transform 0.2s;
   box-sizing: border-box;
-  padding: 0;
-  transition: box-shadow 0.2s;
+  display: inline-block;
 }
 
 .color-circle:hover {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  transform: scale(1.1);
 }
 
-.color-circle.color-reset {
-  background: none !important;
-}
-
-.color-switcher-preview,
-.color-switcher-inline,
-.color-switcher-under {
-  display: flex;
-  gap: 0.4em;
-  align-items: center;
+.color-circle:last-child {
+  margin-right: 0;
 }
 
 .color-switcher-preview {
+  display: flex;
+  gap: 0.4em;
+  align-items: center;
   justify-content: center;
 }
 
 .color-switcher-preview.align-right {
+  display: flex;
+  align-items: center;
   justify-content: flex-end;
 }
 
@@ -250,22 +245,11 @@ button:hover {
   justify-content: flex-start;
 }
 
-.color-switcher-inline {
-  margin-left: auto;
+.color-circle.color-reset {
+  background: none !important;
 }
 
-.color-switcher-under {
-  margin: 0.5em 0 0 0;
-}
-
-.logo-card {
-  background: var(--color-card);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
-  min-width: 320px;
-}
+/* Moved to component-specific style */
 
 .logo-tag {
   display: inline-block;
@@ -316,6 +300,7 @@ button:hover {
   transition: background 0.2s, color 0.2s;
 }
 
+/* Logo image styles - used in multiple components */
 .logo-preview img,
 div.logo-image img {
   max-width: 80%;
@@ -398,64 +383,11 @@ div.logo-image img {
   color: var(--color-text);
 }
 
+/* Removed grid-specific styles */
 
+/* Removed list-specific styles */
 
-.logo-details {
-  margin-top: 1rem;
-  color: var(--color-text);
-}
-
-.logo-details p {
-  margin: 0.5rem 0;
-  font-size: 0.9rem;
-  color: var(--color-text);
-}
-
-.logo-details strong,
-.logo-details span {
-  color: var(--color-text);
-}
-
-/* Grid specific */
-.logo-grid .logo-item .logo-image {
-  width: 100%;
-}
-
-/* List specific */
-.logo-list .logo-item .logo-image {
-  width: 120px;
-  min-width: 120px;
-  height: 100px;
-  border-right: 1px solid var(--color-border);
-}
-
-/* Row specific */
-.logo-row {
-  display: flex;
-  align-items: center;
-  padding: 0.5em 0.5em;
-  border-bottom: 1px solid var(--color-border);
-  gap: 1em;
-}
-
-.logo-row.grid {
-  flex-direction: column;
-  align-items: stretch;
-  border-bottom: none;
-  border-radius: 10px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
-  margin-bottom: 1em;
-  padding: 1em;
-}
-
-.logo-row.list {
-  flex-direction: row;
-  align-items: center;
-  border-radius: 0;
-  box-shadow: none;
-  margin-bottom: 0;
-  padding: 0.5em 0.5em;
-}
+/* Removed unused row-specific styles */
 
 .logo-img {
   flex-shrink: 0;
@@ -581,7 +513,6 @@ footer {
   }
 }
 
-
 .tag-filter {
   display: flex;
   flex-wrap: wrap;
@@ -688,3 +619,22 @@ textarea {
     background-color: var(--background-color);
     color: var(--color-text);
 }
+
+.set-circle {
+  background: var(--color-border);
+  color: var(--color-text);
+  font-size: 10px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 0;
+}
+
+/* Dark theme variation */
+:root.dark-theme .set-circle,
+.dark-theme .set-circle {
+  background: #444;
+  color: #eee;
+}
diff --git a/src/components/Grid.svelte b/src/components/Grid.svelte
index a686c63..b1639f7 100644
--- a/src/components/Grid.svelte
+++ b/src/components/Grid.svelte
@@ -186,6 +186,8 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
     justify-content: flex-end;
   }
 
+  /* Removed unused styles */
+
   .logo-title-row {
     display: flex;
     align-items: center;
@@ -221,4 +223,17 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
     overflow: hidden;
     padding: 0;
   }
+
+  .logo-card {
+    background: var(--color-card);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
+    min-width: 320px;
+  }
+
+  .logo-grid .logo-item .logo-image {
+    width: 100%;
+  }
 </style>
diff --git a/src/components/List.svelte b/src/components/List.svelte
index 1270d0a..934a1ea 100644
--- a/src/components/List.svelte
+++ b/src/components/List.svelte
@@ -278,7 +278,9 @@
     align-items: center;
     justify-content: space-between;
     gap: 0.5em;
-  }  .set-circle {
+  }
+
+  .set-circle {
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/src/components/Preview.svelte b/src/components/Preview.svelte
index 88a7843..9966981 100644
--- a/src/components/Preview.svelte
+++ b/src/components/Preview.svelte
@@ -387,21 +387,7 @@
     gap: 0.5rem;
   }
 
-  .set-circle {
-    background: var(--color-border);
-    color: var(--color-text);
-    font-size: 10px;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  /* Dark theme variation */
-  :global(.dark-theme) .set-circle {
-    background: #444;
-    color: #eee;
-  }
+  /* Moved to global.css */
 
   .preview-actions-container {
     margin-top: 2rem;
@@ -504,4 +490,22 @@
     resize: none;
     overflow-y: auto;
   }
+
+  /* Moved common color switcher styles to global.css */
+
+  .logo-details {
+    margin-top: 1rem;
+    color: var(--color-text);
+  }
+
+  .logo-details p {
+    margin: 0.5rem 0;
+    font-size: 0.9rem;
+    color: var(--color-text);
+  }
+
+  .logo-details strong,
+  .logo-details span {
+    color: var(--color-text);
+  }
 </style>
diff --git a/src/pages/Home.svelte b/src/pages/Home.svelte
index 20ae23d..9cf19f2 100644
--- a/src/pages/Home.svelte
+++ b/src/pages/Home.svelte
@@ -5,11 +5,9 @@
   import Header from "../components/Header.svelte";
   import Footer from "../components/Footer.svelte";
 
-  // Use the app's global data without reloading
   let appData = {};
   let initialized = false;
 
-  // Simple function to get data from the global app object
   function getAppData() {
     if (typeof window !== "undefined" && window.appData) {
       console.log("Home: Using app data with",
@@ -30,11 +28,9 @@
     }
   }
 
-  // Consolidate the onMount functions into a single one
   onMount(() => {
     getAppData();
 
-    // If not initialized yet, set up an interval to check for data
     if (!initialized) {
       console.log("Home: Setting up retry interval for logos data");
       const interval = setInterval(() => {
@@ -49,11 +45,8 @@
             window.appData ? `${window.appData.logos?.length || 0} logos` : "no window.appData");
         }
       }, 200); // Increased interval for better logging
-
-      // No cleanup here - we'll handle in the second part
     }
 
-    // Also watch for changes to window.appData
   let logoCheckInterval;
   let lastViewMode = '';
   let lastCompactMode = false;
@@ -126,7 +119,6 @@
     }
   }, 100); // Faster interval for UI responsiveness
 
-  // Cleanup function to clear the interval when component is destroyed
   return () => clearInterval(logoCheckInterval);
 });
 </script>