diff --git a/data/favicon.svg b/data/favicon.svg
index 8171cc0..f4143ac 100644
--- a/data/favicon.svg
+++ b/data/favicon.svg
@@ -1,16 +1,152 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
-  <defs>
-    <linearGradient id="batteryGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#3b82f6"/>
-      <stop offset="100%" style="stop-color:#22c55e"/>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 48 48"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="favicon.svg"
+   inkscape:version="1.4.2 (unknown)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="16.958333"
+     inkscape:cx="23.970516"
+     inkscape:cy="24"
+     inkscape:window-width="1920"
+     inkscape:window-height="1022"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <defs
+     id="defs2">
+    <linearGradient
+       id="linearGradient14"
+       x1="0%"
+       y1="0%"
+       x2="100%"
+       y2="100%">
+      <stop
+         offset="0"
+         style="stop-color:#daf63b;stop-opacity:1;"
+         id="stop13" />
+      <stop
+         offset="100%"
+         style="stop-color:#22c55e"
+         id="stop14" />
     </linearGradient>
+    <linearGradient
+       id="batteryGrad"
+       x1="0%"
+       y1="0%"
+       x2="100%"
+       y2="100%">
+      <stop
+         offset="0%"
+         style="stop-color:#3b82f6"
+         id="stop1" />
+      <stop
+         offset="100%"
+         style="stop-color:#22c55e"
+         id="stop2" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#batteryGrad"
+       id="linearGradient6"
+       x1="53.494549"
+       y1="15.119884"
+       x2="60.083276"
+       y2="21.503488"
+       gradientTransform="scale(0.63245553,1.5811388)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#batteryGrad"
+       id="linearGradient7"
+       x1="31.622777"
+       y1="8.8543774"
+       x2="37.745319"
+       y2="15.088804"
+       gradientTransform="scale(0.63245553,1.5811388)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#batteryGrad"
+       id="linearGradient8"
+       x1="15.811388"
+       y1="8.8543774"
+       x2="25.663399"
+       y2="12.030641"
+       gradientTransform="scale(0.63245553,1.5811388)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient14"
+       id="linearGradient13"
+       x1="3"
+       y1="24"
+       x2="45"
+       y2="24"
+       gradientUnits="userSpaceOnUse" />
   </defs>
   <!-- Battery body -->
-  <rect x="4" y="8" width="40" height="32" rx="4" fill="none" stroke="#3b82f6" stroke-width="2"/>
+  <rect
+     x="4"
+     y="8"
+     width="40"
+     height="32"
+     rx="4"
+     fill="none"
+     stroke="#3b82f6"
+     stroke-width="2"
+     id="rect2"
+     style="fill-opacity:1;fill:url(#linearGradient13)" />
   <!-- Battery terminal -->
-  <rect x="44" y="18" width="4" height="12" rx="1" fill="#3b82f6"/>
+  <rect
+     x="44"
+     y="18"
+     width="4"
+     height="12"
+     rx="1"
+     fill="#3b82f6"
+     id="rect3" />
   <!-- Cells -->
-  <rect x="10" y="14" width="8" height="20" rx="2" fill="url(#batteryGrad)"/>
-  <rect x="20" y="14" width="8" height="20" rx="2" fill="url(#batteryGrad)"/>
-  <rect x="30" y="14" width="8" height="20" rx="2" fill="url(#batteryGrad)"/>
+  <rect
+     x="10"
+     y="14"
+     width="8"
+     height="20"
+     rx="2"
+     fill="url(#batteryGrad)"
+     id="rect4"
+     style="fill:url(#linearGradient8)" />
+  <rect
+     x="20"
+     y="14"
+     width="8"
+     height="20"
+     rx="2"
+     fill="url(#batteryGrad)"
+     id="rect5"
+     style="fill:url(#linearGradient7)" />
+  <rect
+     x="30"
+     y="14"
+     width="8"
+     height="20"
+     rx="2"
+     fill="url(#batteryGrad)"
+     id="rect6"
+     style="fill:url(#linearGradient6)" />
 </svg>
diff --git a/index.html b/index.html
index 6d47b54..3947549 100644
--- a/index.html
+++ b/index.html
@@ -13,14 +13,7 @@
     <div class="container">
         <header>
             <div class="logo">
-                <svg viewBox="0 0 48 48" width="40" height="40" aria-hidden="true">
-                    <rect x="4" y="8" width="40" height="32" rx="4" fill="none" stroke="currentColor"
-                        stroke-width="2" />
-                    <rect x="44" y="18" width="4" height="12" rx="1" fill="currentColor" />
-                    <rect x="10" y="14" width="8" height="20" rx="2" fill="var(--accent)" />
-                    <rect x="20" y="14" width="8" height="20" rx="2" fill="var(--accent)" />
-                    <rect x="30" y="14" width="8" height="20" rx="2" fill="var(--accent)" />
-                </svg>
+                <img src="data/favicon.svg" width="40" />
                 <h1>LiXX Cell Pack Matcher</h1>
             </div>
             <p class="subtitle">Optimal cell matching for lithium battery packs</p>
@@ -167,7 +160,7 @@
                         <div class="live-preview-content" id="live-preview-content"></div>
                     </div>
                 </div>
-                <button type="button" id="btn-stop-matching" class="btn btn-danger">
+                <button type="button" id="btn-stop-matching" class="btn btn-ghost btn-danger">
                     Stop Matching
                 </button>
             </section>