diff --git a/Projects/kompose/docs/app/app.vue b/Projects/kompose/docs/app/app.vue
index 9cfaf73f..be865190 100644
--- a/Projects/kompose/docs/app/app.vue
+++ b/Projects/kompose/docs/app/app.vue
@@ -11,7 +11,7 @@ useHead({
     { name: 'viewport', content: 'width=device-width, initial-scale=1' }
   ],
   link: [
-    { rel: 'icon', href: 'favicon.ico' }
+    { rel: 'icon', href: '/favicon.ico' }
   ],
   htmlAttrs: {
     lang: 'en'
diff --git a/Projects/kompose/docs/app/components/AppFooter.vue b/Projects/kompose/docs/app/components/AppFooter.vue
index 0028220e..690c7860 100644
--- a/Projects/kompose/docs/app/components/AppFooter.vue
+++ b/Projects/kompose/docs/app/components/AppFooter.vue
@@ -5,7 +5,7 @@ const { footer } = useAppConfig()
 <template>
   <UFooter>
     <template #left>
-      <img src="/kompose/favicon.svg" alt="kompose" class="size-5 mr-6"></img>
+      <img src="/icon.svg" alt="kompose" class="size-5 mr-0/5"></img>
       {{ footer.credits }}
     </template>
 
diff --git a/Projects/kompose/docs/app/components/AppHeader.vue b/Projects/kompose/docs/app/components/AppHeader.vue
index e981188e..7c0191f3 100644
--- a/Projects/kompose/docs/app/components/AppHeader.vue
+++ b/Projects/kompose/docs/app/components/AppHeader.vue
@@ -21,7 +21,8 @@ const { header } = useAppConfig()
 
     <template v-else #left>
       <div class="flex items-center gap-6">
-        <NuxtLink :to="header?.to || '/'" >
+        <NuxtLink :to="header?.to || '/'" class="flex items-center">
+          <img src="/icon.svg" alt="kompose" class="size-7 mt-1 mr-2"></img>
           <AppLogo class="!text-2xl mt-1" />
         </NuxtLink>
 
diff --git a/Projects/kompose/docs/public/favicon.ico b/Projects/kompose/docs/public/favicon.ico
index 18993ad9..67132e0e 100644
Binary files a/Projects/kompose/docs/public/favicon.ico and b/Projects/kompose/docs/public/favicon.ico differ
diff --git a/Projects/kompose/docs/public/icon.svg b/Projects/kompose/docs/public/icon.svg
new file mode 100644
index 00000000..712398cd
--- /dev/null
+++ b/Projects/kompose/docs/public/icon.svg
@@ -0,0 +1,50 @@
+<svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <pattern id="carbon192" x="0" y="0" width="7.68" height="7.68" patternUnits="userSpaceOnUse">
+              <rect width="7.68" height="7.68" fill="#0a0e27"></rect>
+              <path d="M0,0 L3.84,3.84 M3.84,0 L7.68,3.84 M0,3.84 L3.84,7.68" stroke="#060815" stroke-width="1.5" opacity="0.5"></path>
+            </pattern>
+            
+            <linearGradient id="bgGrad192" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" style="stop-color:#1a1d2e;stop-opacity:1"></stop>
+              <stop offset="100%" style="stop-color:#0a0e27;stop-opacity:1"></stop>
+            </linearGradient>
+            
+            <linearGradient id="primaryGrad192" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" style="stop-color:#00DC82;stop-opacity:1"></stop>
+              <stop offset="100%" style="stop-color:#00a86b;stop-opacity:1"></stop>
+            </linearGradient>
+            
+            <filter id="glow192">
+              <feGaussianBlur stdDeviation="6" result="coloredBlur"></feGaussianBlur>
+              <feMerge>
+                <feMergeNode in="coloredBlur"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+              </feMerge>
+            </filter>
+          </defs>
+
+          <!-- Background -->
+          <rect width="192" height="192" rx="24" fill="url(#bgGrad192)"></rect>
+          <rect width="192" height="192" rx="24" fill="url(#carbon192)" opacity="0.4"></rect>
+
+          <!-- Stylized K -->
+          <g transform="translate(48, 48)">
+            <line x1="0" y1="0" x2="0" y2="96" stroke="url(#primaryGrad192)" stroke-width="15" stroke-linecap="round" filter="url(#glow192)"></line>
+            <line x1="0" y1="48" x2="57.599999999999994" y2="0" stroke="url(#primaryGrad192)" stroke-width="15" stroke-linecap="round" filter="url(#glow192)"></line>
+            <line x1="0" y1="48" x2="57.599999999999994" y2="96" stroke="url(#primaryGrad192)" stroke-width="15" stroke-linecap="round" filter="url(#glow192)"></line>
+          </g>
+
+          <!-- Animated status dot -->
+          <circle cx="163.2" cy="163.2" r="11.52" fill="#00DC82" opacity="0.9">
+            <animate attributeName="opacity" values="0.6;1;0.6" dur="2s" repeatCount="indefinite"></animate>
+            <animate attributeName="r" values="11.52;13.440000000000001;11.52" dur="2s" repeatCount="indefinite"></animate>
+          </circle>
+          <circle cx="163.2" cy="163.2" r="17.28" fill="none" stroke="#00DC82" stroke-width="3" opacity="0.3"></circle>
+
+          <!-- Tech corners -->
+          <line x1="15.36" y1="15.36" x2="28.799999999999997" y2="15.36" stroke="#00DC82" stroke-width="3" opacity="0.4"></line>
+          <line x1="15.36" y1="15.36" x2="15.36" y2="28.799999999999997" stroke="#00DC82" stroke-width="3" opacity="0.4"></line>
+          <line x1="176.64000000000001" y1="15.36" x2="163.2" y2="15.36" stroke="#00DC82" stroke-width="3" opacity="0.4"></line>
+          <line x1="176.64000000000001" y1="15.36" x2="176.64000000000001" y2="28.799999999999997" stroke="#00DC82" stroke-width="3" opacity="0.4"></line>
+        </svg>