diff --git a/public/data/logos.json b/public/data/logos.json
index cdfefa0..e4f450e 100644
--- a/public/data/logos.json
+++ b/public/data/logos.json
@@ -28,10 +28,7 @@
     "disable": false,
     "brand": "Apple",
     "tags": [
-      {
-        "text": "tech",
-        "color": "silver"
-      }
+      "tech"
     ],
     "colors": [
       {
@@ -74,7 +71,13 @@
       "transport",
       "garage"
     ],
-    "brand": "Dalnoboy Service"
+    "brand": "Dalnoboy Service",
+    "colors": [
+      {
+        "label": "Orange",
+        "value": "#ee7800"
+      }
+    ]
   },
   {
     "name": "Disney",
@@ -130,10 +133,7 @@
     "disable": false,
     "brand": "Google",
     "tags": [
-      {
-        "text": "tech",
-        "color": "silver"
-      }
+      "tech"
     ]
   },
   {
@@ -367,6 +367,16 @@
     "tags": [],
     "brand": "Nvidia"
   },
+  {
+    "name": "Okko",
+    "path": "logos/okko.svg",
+    "format": "SVG",
+    "disable": false,
+    "tags": [
+      "fuel"
+    ],
+    "brand": "Okko"
+  },
   {
     "name": "Privat24",
     "path": "logos/privat24.svg",
@@ -581,5 +591,15 @@
       "finance",
       "transfer"
     ]
+  },
+  {
+    "name": "WOG",
+    "path": "logos/wog.svg",
+    "format": "SVG",
+    "disable": false,
+    "tags": [
+      "fuel"
+    ],
+    "brand": "WOG"
   }
 ]
\ No newline at end of file
diff --git a/public/data/tags.json b/public/data/tags.json
new file mode 100644
index 0000000..25e81cd
--- /dev/null
+++ b/public/data/tags.json
@@ -0,0 +1,11 @@
+{
+    "tech": {
+        "color": "silver"
+    },
+    "retail": {
+        "color": "#4f8cff"
+    },
+    "bank": {
+        "color": "#27ae60"
+    }
+}
diff --git a/public/global.css b/public/global.css
index f3700e8..672bcd9 100644
--- a/public/global.css
+++ b/public/global.css
@@ -1,9 +1,29 @@
 :root {
   --primary-color: #3498db;
+  --primary-color-hover: #2980b9;
   --secondary-color: #2c3e50;
   --background-color: #f8f9fa;
-  --card-background: #ffffff;
   --text-color: #333333;
+  --white: #ffffff;
+  --black: #000000;
+  --color-border: #ddd;
+  --card-background: var(--white);
+  --color-bg: var(--background-color);
+  --color-text: var(--text-color);
+  --color-card: var(--card-background);
+  --color-accent: var(--primary-color);
+  --color-accent-hover: var(--primary-color-hover);
+}
+
+/* Dark theme overrides */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-card: #23272e;
+    --background-color: #181a20;
+    --color-text: #f5f6fa;
+    --color-border: #333842;
+    --color-accent: #4f8cff;
+  }
 }
 
 * {
@@ -12,10 +32,16 @@
   padding: 0;
 }
 
+:global(html),
+:global(body) {
+  background: var(--color-bg);
+  color: var(--color-text);
+}
+
 body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  background-color: var(--background-color);
-  color: var(--text-color);
+  background-color: var(--color-bg);
+  color: var(--color-text);
   line-height: 1.6;
 }
 
@@ -23,13 +49,15 @@ body {
   max-width: 1200px;
   margin: 0 auto;
   padding: 2rem;
+  background: var(--color-bg);
+  color: var(--color-text);
 }
 
 button {
   cursor: pointer;
   padding: 0.5rem 1rem;
-  background-color: var(--primary-color);
-  color: white;
+  background-color: var(--color-accent);
+  color: var(--white);
   border: none;
   border-radius: 4px;
   font-size: 0.9rem;
@@ -37,13 +65,34 @@ button {
 }
 
 button:hover {
-  background-color: #2980b9;
+  background-color: var(--color-accent-hover);
 }
 
 .view-toggle {
   display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
+  gap: 0.2rem;
+}
+
+.view-toggle button {
+  padding: 0.3rem 0.5rem;
+  background: var(--color-card);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  font-size: 1rem;
+  transition: background 0.2s, color 0.2s;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.view-toggle button.active,
+.view-toggle button:focus {
+  background: var(--color-accent);
+  color: var(--white);
+  font-weight: bold;
+  outline: 2px solid var(--color-border);
 }
 
 .search-bar {
@@ -55,15 +104,17 @@ button:hover {
 .search-bar input {
   width: 100%;
   padding: 0.75rem;
-  border: 1px solid #ddd;
+  border: 1px solid var(--color-border);
   border-radius: 4px;
   font-size: 1rem;
+  background: var(--color-card);
+  color: var(--color-text);
 }
 
 .copy-btn,
 .copy-group .png-btn {
-  background-color: var(--secondary-color, #2c3e50);
-  color: #fff;
+  background-color: var(--secondary-color);
+  color: var(--white);
   font-weight: 500;
   letter-spacing: 0.02em;
   min-width: 2.5em;
@@ -71,7 +122,7 @@ button:hover {
   margin: 0;
   padding: 0.4em 1em;
   font-size: 0.95em;
-  border-right: 1px solid var(--color-border, #ddd);
+  border-right: 1px solid var(--color-border);
   transition: background 0.2s, color 0.2s;
   text-wrap: nowrap;
 }
@@ -85,15 +136,15 @@ button:hover {
 .copy-btn:hover,
 .copy-group .png-btn:focus,
 .copy-group .png-btn:hover {
-  background: #222;
-  color: #fff;
+  background: var(--black);
+  color: var(--white);
   outline: none;
 }
 
 .download-btn,
 .download-group .png-btn {
   background: #27ae60;
-  color: #fff;
+  color: var(--white);
   font-weight: 500;
   letter-spacing: 0.02em;
   min-width: 2.5em;
@@ -101,7 +152,7 @@ button:hover {
   margin: 0;
   padding: 0.4em 1em;
   font-size: 0.95em;
-  border-right: 1px solid var(--color-border, #ddd);
+  border-right: 1px solid var(--color-border);
   transition: background 0.2s, color 0.2s;
 }
 
@@ -115,31 +166,50 @@ button:hover {
 .download-group .png-btn:focus,
 .download-group .png-btn:hover {
   background: #219150;
-  color: #fff;
+  color: var(--white);
   outline: none;
 }
 
-.copy-group, .download-group {
+.copy-group,
+.download-group {
   display: inline-flex;
   border-radius: 6px;
   overflow: hidden;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
   margin-right: 0.5em;
 }
 
 /* Shared color switcher and color circle styles */
+.format-row {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+  margin-bottom: 0.5em;
+  justify-content: space-between;
+}
+
 .color-circle {
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 4px;
   cursor: pointer;
-  display: inline-block;
-  transition: border 0.2s, box-shadow 0.2s;
+  box-sizing: border-box;
+  padding: 0;
+  transition: box-shadow 0.2s;
 }
+
 .color-circle:hover {
-  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
 }
+
+.color-circle.color-reset {
+  background: none !important;
+}
+
 .color-switcher-preview,
 .color-switcher-inline,
 .color-switcher-under {
@@ -147,26 +217,39 @@ button:hover {
   gap: 0.4em;
   align-items: center;
 }
+
 .color-switcher-preview {
   justify-content: center;
-
 }
+
+.color-switcher-preview.align-right {
+  justify-content: flex-end;
+}
+
+.color-switcher-preview.align-left {
+  justify-content: flex-start;
+}
+
 .color-switcher-inline {
   margin-left: auto;
 }
+
 .color-switcher-under {
   margin: 0.5em 0 0 0;
 }
 
 .logo-tag {
   display: inline-block;
-  background: var(--color-accent, #4f8cff);
-  color: #fff;
+  background: var(--color-accent);
+  color: var(--white);
   border-radius: 12px;
   padding: 0.2em 0.8em;
   font-size: 0.85em;
   font-weight: 500;
   letter-spacing: 0.02em;
+  margin-right: 0.3em;
+  margin-top: 0.2em;
+  margin-bottom: 0.2em;
   transition: background 0.2s;
 }
 
@@ -174,10 +257,11 @@ button:hover {
   display: flex;
   align-items: center;
   gap: 0.5em;
-  flex-wrap: nowrap;
 }
 
 .logo-info {
+  flex: 1 1 auto;
+  min-width: 0;
   background: var(--color-card);
   color: var(--color-text);
   padding: 0.5rem 1rem;
@@ -198,7 +282,8 @@ button:hover {
   transition: background 0.2s, color 0.2s;
 }
 
-.logo-preview img {
+.logo-preview img,
+div.logo-image img {
   max-width: 80%;
   max-height: 80%;
   width: auto;
@@ -208,32 +293,6 @@ button:hover {
   margin: 0 auto;
 }
 
-.format-row {
-  display: flex;
-  align-items: center;
-  gap: 1em;
-  margin-bottom: 0.5em;
-  justify-content: space-between;
-}
-
-/* Direct logo image size constraints that will work with any component structure */
-div.logo-image {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* background-color removed for theme support */
-  position: relative;
-  overflow: hidden;
-}
-
-div.logo-image img {
-  max-width: 80%;
-  max-height: 80%;
-  width: auto;
-  height: auto;
-  object-fit: contain;
-}
-
 .logo-image svg {
   width: 100%;
   height: 100%;
@@ -245,7 +304,6 @@ div.logo-image img {
 
 /* Grid specific */
 .logo-grid .logo-item .logo-image {
-  /* height: 160px; */
   width: 100%;
 }
 
@@ -254,16 +312,156 @@ div.logo-image img {
   width: 120px;
   min-width: 120px;
   height: 100px;
-  border-right: 1px solid #eee;
+  border-right: 1px solid var(--color-border);
 }
 
-/* Dark theme overrides */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-card: #23272e;
-    --background-color: #181a20;
-    --color-text: #f5f6fa;
-    --color-border: #333842;
-    --color-accent: #4f8cff;
+/* 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;
+}
+
+.logo-img {
+  flex-shrink: 0;
+  width: 64px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-card);
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  cursor: pointer;
+}
+
+/* Header styles */
+.main-header {
+  margin-bottom: 1.5rem;
+  background: var(--color-card);
+  color: var(--color-text);
+  border-radius: 8px;
+  padding: 1.2rem 1rem 0.7rem 1rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+}
+
+.header-controls {
+  margin-top: 0.5rem;
+}
+
+.logo-count {
+  font-family: system-ui, Arial, sans-serif;
+  font-size: 0.6rem;
+  font-weight: normal;
+  color: var(--color-text);
+  margin-left: 1rem;
+  align-self: center;
+  opacity: 0.7;
+}
+
+.theme-switcher {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  margin-left: auto;
+}
+
+.theme-switch-group {
+  display: flex;
+  border-radius: 6px;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  background: var(--color-card);
+}
+
+.theme-switch-group button {
+  background: none;
+  border: none;
+  color: var(--color-text);
+  padding: 0.2em 0.7em;
+  font-size: 1.1rem;
+  border-radius: 0;
+  transition: background 0.2s, color 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.theme-switch-group button:first-child {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+
+.theme-switch-group button:last-child {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
+.theme-switch-group button.active,
+.theme-switch-group button:focus {
+  background: var(--color-accent);
+  color: var(--white);
+  font-weight: bold;
+  outline: 2px solid var(--color-border);
+}
+
+.theme-switch-group button:hover {
+  background: var(--color-accent);
+  color: var(--color-accent-text);
+}
+
+.logos-container {
+  width: 100%;
+}
+
+footer {
+  margin-top: 3rem;
+  text-align: center;
+  font-size: 0.9rem;
+  color: #888;
+  background: transparent;
+}
+
+@media (max-width: 700px) {
+  .header-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
+  }
+
+  .main-header {
+    padding: 1rem 0.5rem 0.5rem 0.5rem;
+  }
+
+  h1 {
+    font-size: 1.1rem;
   }
 }
diff --git a/public/logos/dalnoboy-service.svg b/public/logos/dalnoboy-service.svg
index 8b18adf..568574d 100644
--- a/public/logos/dalnoboy-service.svg
+++ b/public/logos/dalnoboy-service.svg
@@ -1,5 +1,5 @@
 <svg viewBox="0 0 109.08 61.87" xmlns="http://www.w3.org/2000/svg" width="500" height="500">
     <path
         d="m2.51 52-.36-.18a1.43 1.43 0 0 1 -.47-1.14v-6.58h2.14v5.5.34a.51.51 0 0 0 .13.28.43.43 0 0 0 .27.13 1.41 1.41 0 0 0 .28 0h2.5a4.57 4.57 0 0 0 1.49-.23 2 2 0 0 0 1-.84 3.72 3.72 0 0 0 .39-1 10.59 10.59 0 0 0 .12-2.19c0-.24 0-.49 0-.74a4.76 4.76 0 0 0 -.11-.77 2.72 2.72 0 0 0 -.24-.73 2 2 0 0 0 -.43-.62 1.76 1.76 0 0 0 -.53-.42 2.07 2.07 0 0 0 -.69-.25 2.79 2.79 0 0 0 -.65-.14h-.61-5.06c-1.46-.13-1.82-1.42-1.68-1.73h7.72a4.68 4.68 0 0 1 2 .38 4.33 4.33 0 0 1 1.34 1 4.13 4.13 0 0 1 .64 1 5.56 5.56 0 0 1 .3 1.02 7 7 0 0 1 .15 1.11v1.06s0 .66 0 1a9.72 9.72 0 0 1 -.15 1.21 7.19 7.19 0 0 1 -.31 1.19 3.79 3.79 0 0 1 -.53 1 3.9 3.9 0 0 1 -.45.48 3.51 3.51 0 0 1 -.65.46 4.14 4.14 0 0 1 -.91.34 4.55 4.55 0 0 1 -1.15.15h-4.59a2.21 2.21 0 0 1 -.9-.09zm13.8-10.12a2.49 2.49 0 0 1 .71-1 2 2 0 0 1 1.16-.28 2 2 0 0 1 1.14.28 2.5 2.5 0 0 1 .72 1l4.27 10.25h-2.24l-1.17-2.92h-5.46l-1.15 2.88h-2.29zm-.31 5.8h4.37l-1.86-4.68a1.94 1.94 0 0 0 -.14-.3c-.06-.11-.12-.17-.19-.17s-.15.06-.19.17a1.94 1.94 0 0 0 -.14.3zm10.5 4.41 3.55-9.09a3.11 3.11 0 0 1 .12-.3c0-.11.13-.17.19-.17s.15.06.21.17.09.21.12.3l3.56 9.06h2.26l-4.28-10.22a2.59 2.59 0 0 0 -.71-1 2.05 2.05 0 0 0 -1.16-.28 1.93 1.93 0 0 0 -1.15.28 2.59 2.59 0 0 0 -.71 1l-4.28 10.25zm32.2-11.4h-2.14v4.67h-5.9v-4.67h-2.13v11.4h2.13v-5h5.9v5h2.14zm8.54-.12a8.15 8.15 0 0 1 1.2.13 5.24 5.24 0 0 1 1.19.36 3.7 3.7 0 0 1 1 .69 3.47 3.47 0 0 1 .7 1 7.92 7.92 0 0 1 .4 1.19 8.68 8.68 0 0 1 .16 1.26v1.19s0 .77 0 1.19a7.26 7.26 0 0 1 -.17 1.24 6.3 6.3 0 0 1 -.35 1.18 3.25 3.25 0 0 1 -.7 1 3.53 3.53 0 0 1 -1 .7 5.84 5.84 0 0 1 -1.19.37 7.18 7.18 0 0 1 -1.2.12h-2.23a7.18 7.18 0 0 1 -1.2-.12 5.31 5.31 0 0 1 -1.17-.37 3.54 3.54 0 0 1 -1.81-1.77 7 7 0 0 1 -.39-1.23c-.07-.42-.12-.84-.15-1.24s0-.76 0-1.08 0-.8 0-1.22a6.28 6.28 0 0 1 .16-1.23 5.27 5.27 0 0 1 .39-1.18 3.21 3.21 0 0 1 .73-1 3.48 3.48 0 0 1 1-.69 4.8 4.8 0 0 1 1.17-.36 8 8 0 0 1 1.22-.13h1.11s.74-.02 1.13 0zm-4.67 7a6 6 0 0 0 .15.9 6.48 6.48 0 0 0 .23.64 2.88 2.88 0 0 0 .26.43 2.05 2.05 0 0 0 .57.5 2.23 2.23 0 0 0 .7.28 3.43 3.43 0 0 0 .8.14h1.72a3.45 3.45 0 0 0 .78-.14 2.34 2.34 0 0 0 .72-.28 2.42 2.42 0 0 0 .58-.5 3 3 0 0 0 .26-.45 4.52 4.52 0 0 0 .23-.64c0-.23.1-.55.15-.89a10.43 10.43 0 0 0 .06-1.2 11.63 11.63 0 0 0 -.06-1.27q-.08-.52-.15-.9a3.5 3.5 0 0 0 -.24-.62 1.93 1.93 0 0 0 -.25-.41 2.16 2.16 0 0 0 -1.28-.77 8.71 8.71 0 0 0 -1.65-.16 8.58 8.58 0 0 0 -1.66.16 2.23 2.23 0 0 0 -1.27.77 3.14 3.14 0 0 0 -.5 1.15 7.94 7.94 0 0 0 -.19 2c-.01.54.02.96.04 1.29zm29.31-7a8.15 8.15 0 0 1 1.2.13 5 5 0 0 1 1.19.36 3.7 3.7 0 0 1 1 .69 3.47 3.47 0 0 1 .7 1 5.56 5.56 0 0 1 .4 1.19 7.49 7.49 0 0 1 .17 1.26v1.19s0 .77 0 1.19a6.38 6.38 0 0 1 -.16 1.24 5.7 5.7 0 0 1 -.38 1.18 3.25 3.25 0 0 1 -.7 1 3.53 3.53 0 0 1 -1 .7 5.48 5.48 0 0 1 -1.19.37 7 7 0 0 1 -1.2.12h-2.21a7.07 7.07 0 0 1 -1.2-.12 5.57 5.57 0 0 1 -1.18-.37 3.45 3.45 0 0 1 -1-.7 3.29 3.29 0 0 1 -.75-1.07 5.13 5.13 0 0 1 -.38-1.23 6.76 6.76 0 0 1 -.19-1.23q0-.6 0-1.08c0-.39 0-.8 0-1.22a8.27 8.27 0 0 1 .16-1.23 6.53 6.53 0 0 1 .39-1.18 3.38 3.38 0 0 1 .73-1 3.6 3.6 0 0 1 1-.69 5 5 0 0 1 1.18-.36 7.89 7.89 0 0 1 1.18-.13h1.12s.73-.03 1.12-.01zm-4.66 7a5.9 5.9 0 0 0 .16.9 4.81 4.81 0 0 0 .21.64 4 4 0 0 0 .27.43 1.81 1.81 0 0 0 .57.5 2.18 2.18 0 0 0 .69.28 3.43 3.43 0 0 0 .8.14h1.71a3.54 3.54 0 0 0 .79-.14 2.39 2.39 0 0 0 .71-.28 2.24 2.24 0 0 0 .58-.5 2.32 2.32 0 0 0 .27-.45 3.61 3.61 0 0 0 .22-.64c.06-.23.1-.55.15-.89a10.43 10.43 0 0 0 .06-1.2 11.63 11.63 0 0 0 -.06-1.27c0-.35-.09-.65-.15-.9a3.5 3.5 0 0 0 -.2-.59 2.45 2.45 0 0 0 -.25-.41 2.16 2.16 0 0 0 -1.28-.77 8.71 8.71 0 0 0 -1.65-.16 8.58 8.58 0 0 0 -1.66.16 2.17 2.17 0 0 0 -1.26.77 3.32 3.32 0 0 0 -.51 1.15 8.41 8.41 0 0 0 -.19 2c-.04.51-.01.93.02 1.26zm12.7 4.61a2.7 2.7 0 0 0 1-.18 1.78 1.78 0 0 0 .84-.77l4.79-7.59a.05.05 0 0 1 0 0l.1-.2a.19.19 0 0 1 .34.15v8.51h2.08v-10a1.4 1.4 0 0 0 -.46-1.12 1.89 1.89 0 0 0 -1.28-.42 2 2 0 0 0 -1.15.27 1.64 1.64 0 0 0 -.64.64l-4.82 7.63a1.62 1.62 0 0 0 -.1.18.16.16 0 0 1 -.15.1c-.09 0-.15 0-.16-.12a.3.3 0 0 1 0-.16v-8.4h-2.09v9.92a1.41 1.41 0 0 0 .51 1.23 1.86 1.86 0 0 0 1.19.36zm-62.92-11.48v9.67a4.62 4.62 0 0 0 0 .63 1.16 1.16 0 0 0 .34.63 1.43 1.43 0 0 0 .66.37 2.69 2.69 0 0 0 .66.08h5.89a4.24 4.24 0 0 0 .58-.08 3.07 3.07 0 0 0 .6-.21 1.71 1.71 0 0 0 .56-.4 2 2 0 0 0 .45-.64 2.8 2.8 0 0 0 .26-.75 3.6 3.6 0 0 0 .11-.81 6.7 6.7 0 0 0 0-.76c0-.22 0-.49 0-.77a5.25 5.25 0 0 0 -.14-.87 2.6 2.6 0 0 0 -.28-.81 2 2 0 0 0 -.53-.67 2.31 2.31 0 0 0 -.78-.4 2.8 2.8 0 0 0 -1-.15h-5.3v-4zm6.18 5.73a6.15 6.15 0 0 1 .74.06 1.05 1.05 0 0 1 .66.37 2.09 2.09 0 0 1 .21.34 2.33 2.33 0 0 1 .1.44 2.52 2.52 0 0 1 .06.41v.37a4.84 4.84 0 0 1 -.06.83 1.25 1.25 0 0 1 -.34.73 1.06 1.06 0 0 1 -.67.34 5.74 5.74 0 0 1 -.65 0h-3.71a.56.56 0 0 1 -.26-.14.35.35 0 0 1 -.12-.25 1.43 1.43 0 0 1 0-.29v-3.21zm62.89-7.31v-1.7h-5v1.7zm-30.87 13h5.9a4 4 0 0 0 .58-.08 3.07 3.07 0 0 0 .6-.21 1.71 1.71 0 0 0 .56-.4 2.14 2.14 0 0 0 .46-.64 3.66 3.66 0 0 0 .25-.77 4.28 4.28 0 0 0 .12-.81c0-.27 0-.52 0-.76a7.14 7.14 0 0 0 0-.77 6.5 6.5 0 0 0 -.12-.87 4.35 4.35 0 0 0 -.3-.81 2 2 0 0 0 -.53-.67 2.13 2.13 0 0 0 -.78-.4 2.7 2.7 0 0 0 -1-.15h-5.3v-1.78a2.45 2.45 0 0 1 0-.25.52.52 0 0 1 .14-.25.26.26 0 0 1 .22-.12 1.06 1.06 0 0 1 .25 0h5.26c1.47-.1 1.81-1.35 1.65-1.7h-8.09a2.79 2.79 0 0 0 -.61.07 1.25 1.25 0 0 0 -.6.4 2 2 0 0 0 -.25.53 2.3 2.3 0 0 0 -.09.64v2.68 5.36a4.62 4.62 0 0 0 0 .65 1.1 1.1 0 0 0 .34.63 1.44 1.44 0 0 0 .64.35 2.42 2.42 0 0 0 .68.09zm4.57-1.71h-3.71a.45.45 0 0 1 -.25-.14.43.43 0 0 1 -.14-.25 2.81 2.81 0 0 1 0-.29v-3.3h4.06a6.33 6.33 0 0 1 .73.06 1.06 1.06 0 0 1 .65.37 1.57 1.57 0 0 1 .21.34c0 .15.08.29.11.44a1.36 1.36 0 0 1 0 .41v.37a4.84 4.84 0 0 1 -.06.83 1.25 1.25 0 0 1 -.34.73 1.06 1.06 0 0 1 -.66.34 6.25 6.25 0 0 1 -.62.05zm-43.1 10.59h-1.35a3.68 3.68 0 0 1 -.88-.1 1 1 0 0 1 -.59-.45.57.57 0 0 1 -.09-.16 2.12 2.12 0 0 1 -.09-.27 1.72 1.72 0 0 1 -.07-.38 4.36 4.36 0 0 1 0-.54 4.24 4.24 0 0 1 .09-1 1.79 1.79 0 0 1 .22-.53 1 1 0 0 1 .29-.28 1.06 1.06 0 0 1 .34-.15 1 1 0 0 1 .4-.08h1.74c.72-.05.9-.67.81-.85h-2.6-.38a2.14 2.14 0 0 0 -.48.07 2.31 2.31 0 0 0 -.52.23 1.79 1.79 0 0 0 -.51.49 1.83 1.83 0 0 0 -.28.46 2.41 2.41 0 0 0 -.16.54 3.81 3.81 0 0 0 -.08.59v.6s0 .31 0 .5a5 5 0 0 0 .07.54 5.52 5.52 0 0 0 .18.53 1.69 1.69 0 0 0 .31.49 1.58 1.58 0 0 0 .42.36 3 3 0 0 0 .46.19 2.77 2.77 0 0 0 .47.09 3.24 3.24 0 0 0 .43 0h2.65c.11-.2-.07-.81-.8-.89zm9.09.85v-.85h-3.22a.37.37 0 0 1 -.14 0 .28.28 0 0 1 -.08-.22v-1.35h3.32v-.85h-3.32v-1.13s0-.09 0-.13a.23.23 0 0 1 .07-.13.21.21 0 0 1 .15-.08h3.18v-.85h-3.6a1.47 1.47 0 0 0 -.34 0 .49.49 0 0 0 -.33.17q-.08.12-.15.27a1.76 1.76 0 0 0 0 .31v4 .35a.62.62 0 0 0 .18.31.5.5 0 0 0 .3.16 1.83 1.83 0 0 0 .34 0zm4.06 0v-4.75a1.55 1.55 0 0 1 0-.31.52.52 0 0 1 .16-.32.56.56 0 0 1 .31-.17 1.32 1.32 0 0 1 .33 0h2.67.25.29a1.11 1.11 0 0 1 .29.1.77.77 0 0 1 .29.19 1.73 1.73 0 0 1 .22.31 1.79 1.79 0 0 1 .13.39 1.83 1.83 0 0 1 .05.4v.39s0 .24 0 .37a1.76 1.76 0 0 1 -.06.41 1.9 1.9 0 0 1 -.15.42.94.94 0 0 1 -.27.33 1.14 1.14 0 0 1 -.38.21 1.78 1.78 0 0 1 -.47.06h-2.59v2zm3.07-2.85h.37a.53.53 0 0 0 .33-.17 1.51 1.51 0 0 0 .09-.18 1.29 1.29 0 0 0 .06-.21 2.11 2.11 0 0 1 0-.21v-.18c0-.11 0-.27 0-.41a.68.68 0 0 0 -.18-.36.5.5 0 0 0 -.33-.16h-.33-1.82a.19.19 0 0 0 -.12.07.17.17 0 0 0 -.07.12v1.69zm9.64-2.79h.24a.84.84 0 0 1 .27 0 .93.93 0 0 1 .26.1 1.08 1.08 0 0 1 .24.18.9.9 0 0 1 .2.28 2 2 0 0 1 .1.32 1.06 1.06 0 0 1 0 .31 1.52 1.52 0 0 1 0 .29 2.42 2.42 0 0 1 0 .47 1 1 0 0 1 -.22.46.88.88 0 0 1 -.24.2.9.9 0 0 1 -.28.08.88.88 0 0 1 .36.1.85.85 0 0 1 .25.2.7.7 0 0 1 .15.23 1.34 1.34 0 0 1 .09.26 2.06 2.06 0 0 1 0 .26v.26a4.4 4.4 0 0 1 -.05.59 1.09 1.09 0 0 1 -.28.58 1.13 1.13 0 0 1 -.24.21 1 1 0 0 1 -.27.1.66.66 0 0 1 -.25 0h-2.86a2.42 2.42 0 0 1 -.39 0 .57.57 0 0 1 -.37-.21 1.65 1.65 0 0 1 -.11-.19.75.75 0 0 1 -.08-.37v-4a1.06 1.06 0 0 1 0-.31.68.68 0 0 1 .13-.27.53.53 0 0 1 .3-.19 1.11 1.11 0 0 1 .3 0zm-2.48 2.36h2.38a.61.61 0 0 0 .26-.18 1.16 1.16 0 0 0 .08-.16 1.43 1.43 0 0 0 0-.42 1.78 1.78 0 0 0 0-.28.49.49 0 0 0 -.16-.31.43.43 0 0 0 -.24-.14h-2.13a.2.2 0 0 0 -.11.06.42.42 0 0 0 -.07.13v.12zm0 2a.62.62 0 0 0 0 .21.12.12 0 0 0 .05.11.21.21 0 0 0 .16.08h1.84.31a.44.44 0 0 0 .31-.17.83.83 0 0 0 .12-.27 1.62 1.62 0 0 0 0-.3 1.79 1.79 0 0 0 0-.3.59.59 0 0 0 -.1-.28 1.14 1.14 0 0 0 -.18-.15.94.94 0 0 0 -.39-.07h-2.12zm9.14 1.25v-5.57h-1.06v5.62zm8.33-.82h-1.37a3.87 3.87 0 0 1 -.88-.1 1 1 0 0 1 -.59-.45.7.7 0 0 0 -.09-.16 2.56 2.56 0 0 1 -.07-.27 2.49 2.49 0 0 1 -.08-.38c0-.15 0-.33 0-.54a4.24 4.24 0 0 1 .09-1 1.56 1.56 0 0 1 .22-.53.81.81 0 0 1 .27-.28 1.3 1.3 0 0 1 .34-.15 1.16 1.16 0 0 1 .42-.08h1.72a.78.78 0 0 0 .82-.85h-2.61-.37a1.95 1.95 0 0 0 -1 .3 1.64 1.64 0 0 0 -.46.38 1.83 1.83 0 0 0 -.28.46 2 2 0 0 0 -.17.54 3.81 3.81 0 0 0 -.07.59v.6s0 .31 0 .5 0 .36.08.54a5.34 5.34 0 0 0 .16.53 2.34 2.34 0 0 0 .33.49 1.71 1.71 0 0 0 .41.36 3.45 3.45 0 0 0 .46.19 3.08 3.08 0 0 0 .48.09 3.24 3.24 0 0 0 .43 0h2.65c.06-.09-.11-.7-.84-.78zm-34.73-28.44a15.88 15.88 0 0 0 1.75-.1l.46-.06 1.22-.21.75-.2.83-.23.87-.31.63-.26.95-.46.47-.25 1-.59.33-.23 1-.76.18-.14 1.05-1a13.3 13.3 0 0 0 1.52-1.76l.48-.65c2-3.56 2.73-6.19 2.73-9a16.26 16.26 0 0 0 -16.2-16.35h-18.19c.24 5.55 5.32 7.39 10.08 7.43h8.09a8.83 8.83 0 0 1 0 17.65h-10.72v-8.77h-7.43v8.81 7.42h10.08zm25.41 0 8.1-.06h10.06c-.24-5.5-5.36-7.37-10.08-7.41h-8.08a8.89 8.89 0 0 1 -7.9-4.9 18.92 18.92 0 0 1 -3.74 7.81 16.24 16.24 0 0 0 11.64 4.59zm-7.88-20.22a8.83 8.83 0 0 1 7.88-4.9h8.08c4.72-.04 9.84-1.88 10.08-7.44h-18.16a16.27 16.27 0 0 0 -11.61 4.75 18.7 18.7 0 0 1 3.73 7.59z"
-        fill="#ee7800" />
+        fill="currentColor" />
 </svg>
diff --git a/public/logos/okko.svg b/public/logos/okko.svg
new file mode 100644
index 0000000..05712cb
--- /dev/null
+++ b/public/logos/okko.svg
@@ -0,0 +1,7 @@
+<svg data-v-3153e3cf="" width="100%" height="100%" viewBox="0 0 62 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g fill="currentColor">
+        <path
+            d="M28.06 55.617h-1.209c-1.41 0-2.418 1.21-2.216 2.62h6.045c1.814-1.814 3.829-3.224 6.045-4.232-.604-2.418-1.007-5.038-.806-7.456-1.813.202-3.425.403-5.239 1.008-.604.201-.806.604-.604 1.209l1.813 4.232c-1.209.806-2.216 1.612-3.224 2.62h-.604zm16.121-23.98c-.403.806-.403 1.814.403 2.62 1.612 1.41 3.426 2.217 4.434 4.232.604 1.007 1.41 3.022-.403 3.224-1.613.201-4.03-1.41-5.441-2.418.604.806.806 1.813 1.209 2.62.201.402.403.604.604.604 1.612.806 4.232 1.41 5.441-.202 1.21-1.41.806-3.224-.403-4.836-1.209-2.015-3.224-2.62-4.635-4.232-.201-.201-.403-.604-.201-.806.201-.604.806-.806 1.41-.806.807-.201 1.814-.403 2.419-.604.604-.403.806-1.008 1.007-1.41l.202-1.008c-1.41.403-3.023.806-4.232 1.41-.403.403-1.41 1.008-1.814 1.612zm-20.755-8.463c2.62-4.635 5.642-9.068 8.866-13.3.605-2.015.202-3.627-.604-5.24l-1.612-3.626a144.276 144.276 0 00-9.068 17.531c-.403.806-.202 1.814.403 2.418.604.605 1.41 1.41 2.015 2.217zm-9.471 35.063c5.239-7.456 13.702-12.292 22.77-12.695.806 2.62 2.217 5.037 3.83 7.254 3.022-.605 6.044-.403 8.866.403l.806 2.015c0 .202 0 .403-.202.403h-.806c-1.41 0-2.418 1.21-2.217 2.62h5.643c.806 0 1.41-.806 1.209-1.612l-2.418-6.247c-1.612-.605-3.224-.806-4.837-1.008l-3.425-8.866c-.605-1.612-2.62-2.418-4.03-2.821-1.612-.403-3.628-.605-5.441-.403 2.015-1.008 4.03-2.016 6.247-2.822 1.209-.403 2.015-1.41 2.418-2.418.403-1.007.604-1.813 1.007-2.82-1.813.805-3.627 1.611-5.44 2.619l3.627-2.418c1.612-1.008 2.418-2.015 2.82-3.627.202-1.21.404-2.217.605-3.426-2.216.806-4.634 2.015-6.65 3.022 1.008-.806 2.62-1.813 3.628-2.418 2.216-1.41 3.425-3.627 3.627-6.247V13.3c-3.023 1.813-6.045 3.627-8.867 5.844 1.612-1.612 3.225-3.225 5.038-4.635 2.62-2.418 3.627-5.643 3.023-9.068-.403-1.814-.806-3.627-1.41-5.441-3.426 3.224-6.65 6.851-9.673 10.479-3.224 4.03-6.247 8.463-9.068 12.896-.403.806-.403 1.612 0 2.217 1.007 1.41 2.015 3.023 2.418 4.635 1.209 4.634-1.21 6.045-3.627 7.859-.605.403-.605 0-.403-.202l.604-.604c1.814-1.613 2.015-4.635.806-6.852-1.612-2.82-3.828-5.44-6.448-7.456-.403 1.008-1.008 2.015-2.62 3.023-1.007.604-3.224 2.217-5.037 4.836.806 1.21 1.612 2.015 2.82 2.821.404-.403.807-.806 1.411-1.209.403-.403 1.008-.201 1.21.202.402-.403.402.201 0 .604l-.404.403c-.403.403-1.007.202-1.209-.201 0 0 0-.202-.201-.202l-.403.403c.403.806 1.007 2.217 1.209 2.217.201 0 .201 0 .403-.202l1.612-1.41c0-.202.201 0 .201.201-1.612 3.023-3.425 6.65-4.433 9.875-.201.604 0 1.209.202 1.612.806 1.41 2.216 2.82 2.62 3.224-1.411 1.813-2.62 3.829-3.628 5.844-.201.403-.604.604-1.209.604H8.917c-1.41 0-2.418 1.21-2.217 2.62h7.255zm16.322 7.859h-4.03L20.2 71.939v-5.843h-3.224v13.501h3.224V75.97l2.217-2.015 4.03 5.844h4.232l-5.642-8.061 5.24-5.642zm16.121 0h-4.03l-6.046 5.843v-5.843h-3.224v13.501h3.224V75.97l2.217-2.015 4.03 5.844h4.232l-5.642-8.061 5.239-5.642zm-35.869 0c-1.008-.202-2.217-.403-3.224-.403-1.008 0-2.217.201-3.224.403a4.77 4.77 0 00-3.628 3.627c-.604 2.217-.604 4.232 0 6.448a4.77 4.77 0 003.628 3.627c1.007 0 2.216.202 3.224.202 1.007 0 2.216-.201 3.224-.403a4.77 4.77 0 003.627-3.627c.605-2.217.605-4.232 0-6.449-.403-1.612-1.813-3.022-3.627-3.425zm.604 9.068c-.201.604-.604 1.209-1.41 1.209-1.612.403-3.224.403-5.038 0-.604-.202-1.209-.605-1.41-1.21a9.823 9.823 0 010-4.835c.201-.605.604-1.21 1.41-1.21 1.612-.403 3.224-.403 5.038 0 .604.202 1.209.605 1.41 1.21a9.824 9.824 0 010 4.836zm49.975-5.643a4.77 4.77 0 00-3.627-3.627c-1.007-.201-2.217-.403-3.224-.403-1.008 0-2.217.202-3.224.403a4.77 4.77 0 00-3.627 3.627c-.605 2.217-.605 4.232 0 6.449a4.77 4.77 0 003.627 3.627c1.007.202 2.216.403 3.224.403s2.217-.201 3.224-.403a4.77 4.77 0 003.627-3.627c.605-2.015.605-4.232 0-6.449zm-3.022 5.643c-.202.604-.605 1.209-1.41 1.209-1.613.403-3.225.403-5.039 0-.604-.202-1.209-.605-1.41-1.21a9.824 9.824 0 010-4.835c.201-.605.604-1.21 1.41-1.21 1.612-.403 3.224-.403 5.038 0 .605.202 1.21.605 1.41 1.21a9.822 9.822 0 010 4.836z">
+        </path>
+    </g>
+</svg>
diff --git a/public/logos/wog.svg b/public/logos/wog.svg
new file mode 100644
index 0000000..65361e3
--- /dev/null
+++ b/public/logos/wog.svg
@@ -0,0 +1,12 @@
+<svg id="logo" viewBox="0 0 130 40" fill="none" stroke="none" height="100%" width="100%"
+    xmlns="http://www.w3.org/2000/svg">
+    <g>
+        <path
+            d="M79.37 12.49l-2.1 7.61c-.17.68-.79 3.47-1 5.52h-.18c-.2-2.23-.76-4.63-1-5.68l-1.67-7.46h-5.33l-1.68 7.46c-.23 1.05-.8 3.45-1 5.68h-.18c-.2-2.05-.82-4.85-1-5.52l-2.1-7.61H56l5.5 17.36c.68 2.13 1.79 3.24 3.7 3.24 1.88 0 3.08-1.17 3.55-3.24l.82-3.54c.36-1.49.86-3.65 1.09-5.29h.17c.23 1.64.73 3.8 1.08 5.3l.83 3.53c.5 2.07 1.68 3.24 3.55 3.24 1.91 0 3.03-1.11 3.7-3.24l5.5-17.36h-6.12zM96 12.05c-6.24 0-11.02 4.59-11.02 10.52S89.78 33.09 96 33.09c6.23 0 11.01-4.59 11.01-10.52.01-5.93-4.78-10.52-11-10.52zm0 15.93a5.36 5.36 0 01-5.45-5.41A5.36 5.36 0 0196 17.16a5.36 5.36 0 015.44 5.41 5.36 5.36 0 01-5.44 5.41zM129.8 21.06h-11.84v4.15h6.49c-.32 1.52-2.24 3.01-4.88 3.01-3.66 0-5.61-2.46-5.61-5.64a5.36 5.36 0 015.52-5.44c2.2 0 3.88 1.12 4.8 2.81l5.08-2.07c-1.8-3.51-5.11-5.81-9.87-5.81-6.17 0-11.01 4.56-11.01 10.52s4.64 10.52 11.01 10.52c6.99-.01 11.48-5.48 10.3-12.05z"
+            fill="#009345"></path>
+        <path d="M42.61 0a6.67 6.67 0 00-6 9.62l6 12.1 6-12.1a6.67 6.67 0 00-6-9.62z" fill="#8BC53F"></path>
+        <path
+            d="M21.23 29.02L15.77 40 .7 9.6A6.65 6.65 0 013.73.7a6.71 6.71 0 018.96 3.02l8.53 17.17a9.16 9.16 0 010 8.14zM39.18 29.02L33.72 40 18.65 9.6A6.65 6.65 0 0121.68.7a6.71 6.71 0 018.96 3.02l8.54 17.18a9.17 9.17 0 010 8.13z"
+            fill="#009345"></path>
+    </g>
+</svg>
diff --git a/src/App.svelte b/src/App.svelte
index 9c77ec1..2251418 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -2,6 +2,7 @@
   import { onMount } from 'svelte';
   import LogoGrid from './components/Grid.svelte';
   import LogoList from './components/List.svelte';
+  import Header from './components/Header.svelte';
 
   let viewMode = 'grid'; // 'grid' or 'list'
   let searchQuery = '';
@@ -191,73 +192,25 @@
 </script>
 
 <main class="container">
-  <header class="main-header">
-    <div class="header-row">
-      <h1>Logo Gallery</h1>
-      <span class="logo-count">{logos.length} images in gallery</span>
-      <div class="theme-switcher">
-        <div class="theme-switch-group">
-          <button on:click={() => setTheme('system')} class:active={theme === 'system'} aria-label="System theme">
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2"/><path d="M10 2a8 8 0 0 1 8 8" stroke="currentColor" stroke-width="2"/></svg>
-          </button>
-          <button on:click={() => setTheme('light')} class:active={theme === 'light'} aria-label="Light mode">
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="5" stroke="currentColor" stroke-width="2"/><path d="M10 1v2M10 17v2M3.22 3.22l1.42 1.42M15.36 15.36l1.42 1.42M1 10h2M17 10h2M3.22 16.78l1.42-1.42M15.36 4.64l1.42-1.42" stroke="currentColor" stroke-width="2"/></svg>
-          </button>
-          <button on:click={() => setTheme('dark')} class:active={theme === 'dark'} aria-label="Dark mode">
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 13A7 7 0 0 1 7 4.5a7 7 0 1 0 8.5 8.5z" stroke="currentColor" stroke-width="2"/></svg>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div class="header-row header-controls">
-      <div class="search-bar">
-        <input type="text" placeholder="Search logos..." bind:value={searchQuery} />
-      </div>
-      <div class="tag-filter">
-        {#each selectedTags as tagText}
-          {#if getTagObj(tagText)}
-            <button
-              class="selected-tag"
-              style={getTagObj(tagText).color ? `background: ${getTagObj(tagText).color}; color: #fff;` : ''}
-              aria-label={`Remove tag: ${getTagObj(tagText).text}`}
-              on:click={() => removeTag(getTagObj(tagText).text)}
-            >
-              {getTagObj(tagText).text}
-              <span class="close">&times;</span>
-            </button>
-          {/if}
-        {/each}
-        <div class="tag-dropdown">
-          <button class="dropdown-toggle" on:click={toggleDropdown} aria-label="Add tag filter">
-            + Tag{selectedTags.length ? '' : 's'}
-          </button>
-          {#if tagDropdownOpen}
-            <div class="dropdown-list">
-              {#each allTags.filter(t => !selectedTags.includes(t.text)) as tagObj}
-                <button
-                  class="dropdown-tag"
-                  style={tagObj.color ? `background: ${tagObj.color}; color: #fff;` : ''}
-                  on:click={() => addTag(tagObj.text)}
-                  aria-label={`Add tag: ${tagObj.text}`}
-                >{tagObj.text}</button>
-              {/each}
-              {#if allTags.filter(t => !selectedTags.includes(t.text)).length === 0}
-                <span class="no-tags">No more tags</span>
-              {/if}
-            </div>
-          {/if}
-        </div>
-      </div>
-      <div class="view-toggle">
-        <button class:active={viewMode === 'grid'} on:click={setGridView} aria-label="Grid view">
-          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="6" height="6" fill="currentColor"/><rect x="11" y="3" width="6" height="6" fill="currentColor"/><rect x="3" y="11" width="6" height="6" fill="currentColor"/><rect x="11" y="11" width="6" height="6" fill="currentColor"/></svg>
-        </button>
-        <button class:active={viewMode === 'list'} on:click={setListView} aria-label="List view">
-          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="5" width="12" height="2" fill="currentColor"/><rect x="4" y="9" width="12" height="2" fill="currentColor"/><rect x="4" y="13" width="12" height="2" fill="currentColor"/></svg>
-        </button>
-      </div>
-    </div>
-  </header>
+  <Header
+    {logos}
+    {theme}
+    {setTheme}
+    {viewMode}
+    {setGridView}
+    {setListView}
+    bind:searchQuery
+    {allTags}
+    {selectedTags}
+    {tagDropdownOpen}
+    {toggleDropdown}
+    {addTag}
+    {removeTag}
+    {toggleTag}
+    {getTagObj}
+    {closeDropdown}
+    {filteredLogos}
+  />
 
   <div class="logos-container">
     {#if viewMode === 'grid'}
@@ -280,298 +233,3 @@
     <p>shadoll Logo Gallery. All logos are property of their respective owners.</p>
   </footer>
 </main>
-
-<style>
-  :global(:root) {
-    --color-bg: #fff;
-    --color-text: #222;
-    --color-card: #f8f8f8;
-    --color-border: #ddd;
-    --color-accent: #4f8cff;
-  }
-  :global([data-theme='dark']) {
-    --color-bg: #181a1b;
-    --color-text: #f3f3f3;
-    --color-card: #23272a;
-    --color-border: #333;
-    --color-accent: #7da6ff;
-  }
-  :global(html), :global(body) {
-    background: var(--color-bg);
-    color: var(--color-text);
-  }
-
-  .main-header {
-    margin-bottom: 1.5rem;
-    background: var(--color-card);
-    color: var(--color-text);
-    border-radius: 8px;
-    padding: 1.2rem 1rem 0.7rem 1rem;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
-  }
-
-  .header-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1.5rem;
-  }
-
-  .header-controls {
-    margin-top: 0.5rem;
-  }
-
-  h1 {
-    color: var(--color-accent);
-    margin-bottom: 0;
-    font-size: 1.3rem;
-    font-weight: 700;
-  }
-
-  .logo-count {
-    font-family: system-ui, Arial, sans-serif;
-    font-size: 0.6rem;
-    font-weight: normal;
-    color: var(--color-text, #444);
-    margin-left: 1rem;
-    align-self: center;
-    opacity: 0.7;
-  }
-
-  .search-bar {
-    margin-bottom: 0;
-    width: 100%;
-    max-width: 350px;
-  }
-
-  .search-bar input {
-    width: 100%;
-    padding: 0.5rem 0.8rem;
-    border: 1px solid var(--color-border);
-    border-radius: 4px;
-    font-size: 1rem;
-    background: var(--color-card);
-    color: var(--color-text);
-    transition: background 0.2s, color 0.2s;
-  }
-
-  .search-bar input::placeholder {
-    color: #888;
-    opacity: 1;
-  }
-
-  .tag-filter {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.3rem;
-    align-items: center;
-    margin-left: 1rem;
-    position: relative;
-  }
-
-  .tag-filter .selected-tag {
-    background: var(--color-accent, #4f8cff);
-    color: #fff;
-    border: none;
-    border-radius: 12px;
-    padding: 0.2em 0.8em 0.2em 0.8em;
-    font-size: 0.85em;
-    font-weight: 500;
-    letter-spacing: 0.02em;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 0.3em;
-    opacity: 1;
-    transition: background 0.2s, color 0.2s;
-  }
-
-  .tag-filter .selected-tag .close {
-    margin-left: 0.4em;
-    font-size: 1.1em;
-    font-weight: bold;
-    cursor: pointer;
-    opacity: 0.7;
-    transition: opacity 0.2s;
-  }
-
-  .tag-filter .selected-tag .close:hover {
-    opacity: 1;
-  }
-
-  .tag-dropdown {
-    position: relative;
-    display: inline-block;
-  }
-
-  .tag-dropdown .dropdown-toggle {
-    background: var(--color-card);
-    color: var(--color-text);
-    border: 1px solid var(--color-border);
-    border-radius: 12px;
-    padding: 0.2em 0.8em;
-    font-size: 0.85em;
-    font-weight: 500;
-    cursor: pointer;
-    margin-left: 0.2em;
-    transition: background 0.2s, color 0.2s;
-  }
-
-  .tag-dropdown .dropdown-list {
-    position: absolute;
-    left: 0;
-    top: 110%;
-    min-width: 120px;
-    background: var(--color-card);
-    color: var(--color-text);
-    border: 1px solid var(--color-border);
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-    z-index: 10;
-    padding: 0.4em 0.2em;
-    display: flex;
-    flex-direction: column;
-    gap: 0.2em;
-  }
-
-  .tag-dropdown .dropdown-tag {
-    background: var(--color-accent, #4f8cff);
-    color: #fff;
-    border: none;
-    border-radius: 12px;
-    padding: 0.2em 0.8em;
-    font-size: 0.85em;
-    font-weight: 500;
-    letter-spacing: 0.02em;
-    cursor: pointer;
-    opacity: 0.85;
-    margin: 0.1em 0;
-    text-align: left;
-    transition: background 0.2s, color 0.2s;
-  }
-
-  .tag-dropdown .dropdown-tag:hover {
-    opacity: 1;
-    background: var(--color-accent, #4f8cff);
-  }
-
-  .tag-dropdown .no-tags {
-    color: #888;
-    font-size: 0.85em;
-    padding: 0.3em 0.8em;
-    text-align: center;
-  }
-
-  .view-toggle {
-    display: flex;
-    gap: 0.2rem;
-  }
-
-  .view-toggle button {
-    padding: 0.3rem 0.5rem;
-    background: var(--color-card);
-    color: var(--color-text);
-    border: 1px solid var(--color-border);
-    border-radius: 4px;
-    font-size: 1rem;
-    transition: background 0.2s, color 0.2s;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .view-toggle button.active,
-  .view-toggle button:focus {
-    background: var(--color-accent);
-    color: #fff;
-    font-weight: bold;
-    outline: 2px solid var(--color-border);
-  }
-
-  .theme-switcher {
-    display: flex;
-    align-items: center;
-    gap: 0.2rem;
-    margin-left: auto;
-  }
-
-  .theme-switch-group {
-    display: flex;
-    border-radius: 6px;
-    overflow: hidden;
-    border: 1px solid var(--color-border, #ccc);
-    background: var(--color-card, #fff);
-  }
-
-  .theme-switch-group button {
-    background: none;
-    border: none;
-    color: var(--color-text);
-    padding: 0.2em 0.7em;
-    font-size: 1.1rem;
-    border-radius: 0;
-    transition: background 0.2s, color 0.2s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .theme-switch-group button:first-child {
-    border-top-left-radius: 6px;
-    border-bottom-left-radius: 6px;
-  }
-
-  .theme-switch-group button:last-child {
-    border-top-right-radius: 6px;
-    border-bottom-right-radius: 6px;
-  }
-
-  .theme-switch-group button.active,
-  .theme-switch-group button:focus {
-    background: var(--color-accent);
-    color: #fff;
-    font-weight: bold;
-    outline: 2px solid var(--color-border);
-  }
-
-  .theme-switch-group button:hover {
-    background: var(--color-accent, #f0f0f0);
-    color: var(--color-accent-text, #4f8cff);
-  }
-
-  @media (max-width: 700px) {
-    .header-row {
-      flex-direction: column;
-      align-items: stretch;
-      gap: 0.5rem;
-    }
-
-    .main-header {
-      padding: 1rem 0.5rem 0.5rem 0.5rem;
-    }
-
-    h1 {
-      font-size: 1.1rem;
-    }
-  }
-
-  .logos-container {
-    width: 100%;
-  }
-
-  :global(.logo-card), :global(.logo-item) {
-    background: var(--color-card);
-    color: var(--color-text);
-    border: 1px solid var(--color-border);
-    transition: background 0.2s, color 0.2s;
-  }
-
-  footer {
-    margin-top: 3rem;
-    text-align: center;
-    font-size: 0.9rem;
-    color: #888;
-    background: transparent;
-  }
-</style>
diff --git a/src/components/Actions.svelte b/src/components/Actions.svelte
index 0e13b55..3f6ea0a 100644
--- a/src/components/Actions.svelte
+++ b/src/components/Actions.svelte
@@ -359,7 +359,7 @@
     right: 0;
     min-width: 160px;
     background: var(--color-card, #fff);
-    color: var(--color-text, #222);
+    color: var(--text-color, #222);
     border: 1px solid var(--color-border, #ddd);
     border-radius: 8px;
     box-shadow: 0 2px 16px 4px rgba(0,0,0,0.18);
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
new file mode 100644
index 0000000..e2a5f51
--- /dev/null
+++ b/src/components/Header.svelte
@@ -0,0 +1,84 @@
+<script>
+  export let logos = [];
+  export let theme;
+  export let setTheme;
+  export let viewMode;
+  export let setGridView;
+  export let setListView;
+  export let searchQuery;
+  export let allTags = [];
+  export let selectedTags = [];
+  export let tagDropdownOpen;
+  export let toggleDropdown;
+  export let addTag;
+  export let removeTag;
+  export let getTagObj;
+</script>
+
+<header class="main-header">
+  <div class="header-row">
+    <h1>Logo Gallery</h1>
+    <span class="logo-count">{logos.length} images in gallery</span>
+    <div class="theme-switcher">
+      <div class="theme-switch-group">
+        <button on:click={() => setTheme('system')} class:active={theme === 'system'} aria-label="System theme">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2"/><path d="M10 2a8 8 0 0 1 8 8" stroke="currentColor" stroke-width="2"/></svg>
+        </button>
+        <button on:click={() => setTheme('light')} class:active={theme === 'light'} aria-label="Light mode">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="5" stroke="currentColor" stroke-width="2"/><path d="M10 1v2M10 17v2M3.22 3.22l1.42 1.42M15.36 15.36l1.42 1.42M1 10h2M17 10h2M3.22 16.78l1.42-1.42M15.36 4.64l1.42-1.42" stroke="currentColor" stroke-width="2"/></svg>
+        </button>
+        <button on:click={() => setTheme('dark')} class:active={theme === 'dark'} aria-label="Dark mode">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 13A7 7 0 0 1 7 4.5a7 7 0 1 0 8.5 8.5z" stroke="currentColor" stroke-width="2"/></svg>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div class="header-row header-controls">
+    <div class="search-bar">
+      <input type="text" placeholder="Search logos..." bind:value={searchQuery} />
+    </div>
+    <div class="tag-filter">
+      {#each selectedTags as tagText}
+        {#if getTagObj(tagText)}
+          <button
+            class="selected-tag"
+            style={getTagObj(tagText).color ? `background: ${getTagObj(tagText).color}; color: #fff;` : ''}
+            aria-label={`Remove tag: ${getTagObj(tagText).text}`}
+            on:click={() => removeTag(getTagObj(tagText).text)}
+          >
+            {getTagObj(tagText).text}
+            <span class="close">&times;</span>
+          </button>
+        {/if}
+      {/each}
+      <div class="tag-dropdown">
+        <button class="dropdown-toggle" on:click={toggleDropdown} aria-label="Add tag filter">
+          + Tag{selectedTags.length ? '' : 's'}
+        </button>
+        {#if tagDropdownOpen}
+          <div class="dropdown-list">
+            {#each allTags.filter(t => !selectedTags.includes(t.text)) as tagObj}
+              <button
+                class="dropdown-tag"
+                style={tagObj.color ? `background: ${tagObj.color}; color: #fff;` : ''}
+                on:click={() => addTag(tagObj.text)}
+                aria-label={`Add tag: ${tagObj.text}`}
+              >{tagObj.text}</button>
+            {/each}
+            {#if allTags.filter(t => !selectedTags.includes(t.text)).length === 0}
+              <span class="no-tags">No more tags</span>
+            {/if}
+          </div>
+        {/if}
+      </div>
+    </div>
+    <div class="view-toggle">
+      <button class:active={viewMode === 'grid'} on:click={setGridView} aria-label="Grid view">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="6" height="6" fill="currentColor"/><rect x="11" y="3" width="6" height="6" fill="currentColor"/><rect x="3" y="11" width="6" height="6" fill="currentColor"/><rect x="11" y="11" width="6" height="6" fill="currentColor"/></svg>
+      </button>
+      <button class:active={viewMode === 'list'} on:click={setListView} aria-label="List view">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="5" width="12" height="2" fill="currentColor"/><rect x="4" y="9" width="12" height="2" fill="currentColor"/><rect x="4" y="13" width="12" height="2" fill="currentColor"/></svg>
+      </button>
+    </div>
+  </div>
+</header>
diff --git a/src/components/Preview.svelte b/src/components/Preview.svelte
index ad6c146..be5f3e0 100644
--- a/src/components/Preview.svelte
+++ b/src/components/Preview.svelte
@@ -159,7 +159,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
 
   :global(.modal-content) {
     background: var(--color-card);
-    color: var(--color-text);
+    color: var(--text-color);
     border-radius: 8px;
     padding: 1rem;
     max-width: 500px;
@@ -186,7 +186,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
     border: none;
     font-size: 1.5rem;
     cursor: pointer;
-    color: var(--color-text, #222);
+    color: var(--text-color, #222);
     transition: color 0.2s;
   }
 
@@ -222,7 +222,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
   .logo-details {
     padding: 1rem;
     background-color: var(--color-card);
-    color: var(--color-text);
+    color: var(--text-color);
     border-radius: 4px;
     transition: background 0.2s, color 0.2s;
   }
diff --git a/src/components/Row.svelte b/src/components/Row.svelte
index ffb0c04..3459872 100644
--- a/src/components/Row.svelte
+++ b/src/components/Row.svelte
@@ -1,7 +1,5 @@
 <script>
   export let logo;
-  export let onCopy;
-  export let onDownload;
   export let view = 'grid'; // or 'list'
   export let showActions = true;
   export let onPreview = null;
@@ -69,99 +67,3 @@
     </div>
   {/if}
 </div>
-
-<style>
-  .logo-row {
-    display: flex;
-    align-items: center;
-    padding: 0.5em 0.5em;
-    border-bottom: 1px solid #eee;
-    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;
-  }
-  .logo-img {
-    flex-shrink: 0;
-    width: 64px;
-    height: 64px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: #fff;
-    border-radius: 8px;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
-    cursor: pointer;
-  }
-  .logo-info {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-  .logo-actions {
-    display: flex;
-    align-items: center;
-    gap: 0.5em;
-  }
-  .color-switcher-preview {
-    display: flex;
-    align-items: center;
-    gap: 0.4em;
-  }
-  .color-switcher-preview.align-right {
-    justify-content: flex-end;
-  }
-  .color-switcher-preview.align-left {
-    justify-content: flex-start;
-  }
-  .color-circle {
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 4px;
-    cursor: pointer;
-    box-sizing: border-box;
-    padding: 0;
-  }
-  .color-circle.color-reset {
-    background: none !important;
-  }
-  .logo-tag {
-    display: inline-block;
-    background: var(--color-accent, #4f8cff);
-    color: #fff;
-    border-radius: 12px;
-    padding: 0.2em 0.8em;
-    font-size: 0.85em;
-    font-weight: 500;
-    letter-spacing: 0.02em;
-    margin-right: 0.3em;
-    margin-top: 0.2em;
-    margin-bottom: 0.2em;
-    transition: background 0.2s;
-  }
-  .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;
-  }
-</style>