diff --git a/docs/docs.json b/docs/docs.json
index 15cee81..c88b78b 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -27,39 +27,33 @@
     }
   },
   "navigation": {
-    "dropdowns": [
+    "groups": [
       {
-        "dropdown": "Documentation",
-        "icon": "book",
+        "group": "Get Started",
+        "pages": ["introduction", "quickstart"]
+      },
+      {
+        "group": "Frameworks",
+        "pages": [
+          "frameworks/react",
+          "frameworks/vue",
+          "frameworks/svelte",
+          "frameworks/solid",
+          "frameworks/angular",
+          "frameworks/jquery",
+          "frameworks/vanilla",
+          "frameworks/custom"
+        ]
+      },
+      {
+        "group": "Guides",
+        "pages": ["options", "how-it-works"]
+      },
+      {
+        "group": "Reference",
         "pages": [
-          {
-            "group": "Get Started",
-            "pages": ["introduction", "quickstart"]
-          },
-          {
-            "group": "Frameworks",
-            "pages": [
-              "frameworks/react",
-              "frameworks/vue",
-              "frameworks/svelte",
-              "frameworks/solid",
-              "frameworks/angular",
-              "frameworks/jquery",
-              "frameworks/vanilla",
-              "frameworks/custom"
-            ]
-          },
-          {
-            "group": "Guides",
-            "pages": ["options", "how-it-works"]
-          },
-          {
-            "group": "Reference",
-            "pages": [
-              "api-reference/create-logo-soup",
-              "api-reference/get-visual-center-transform"
-            ]
-          }
+          "api-reference/create-logo-soup",
+          "api-reference/get-visual-center-transform"
         ]
       }
     ]
diff --git a/docs/favicon.svg b/docs/favicon.svg
index ca5f80a..e9fc970 100644
--- a/docs/favicon.svg
+++ b/docs/favicon.svg
@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <text y="28" font-size="28">🍜</text>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#CCD6DD" d="M18 36C3.042 36 1 22 1 18h34c0 2-1.958 18-17 18z"/><path fill="#99AAB5" d="M35 17.056c0 5.216-7.611 9.444-17 9.444S1 22.271 1 17.056c0-5.216 7.611-8.444 17-8.444 9.389-.001 17 3.228 17 8.444z"/><path fill="#EA596E" d="M19.5 33H17c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h2v-3h-4v1h3c.276 0 .5.224.5.5s-.224.5-.5.5h-3.5c-.276 0-.5-.224-.5-.5v-2c0-.276.224-.5.5-.5h5c.276 0 .5.224.5.5v4c0 .276-.224.5-.5.5zm5.5-1c-.198 0-.386-.119-.464-.315-.103-.256.021-.547.278-.649l2.176-.871-.065-2.249-3.925.975v.949c.734-.206 1.958-.553 2.858-.819.262-.076.543.072.621.338.078.265-.073.543-.338.621-1.378.407-3.507 1.002-3.507 1.002-.154.042-.312.011-.438-.083-.123-.095-.196-.243-.196-.399v-2c0-.229.156-.43.38-.485l4.906-1.219c.144-.036.303-.004.422.087.121.092.193.232.198.384L28 30.485c.006.21-.119.401-.315.479l-2.5 1c-.06.024-.123.036-.185.036zm4.573-2.712c-.112 0-.201-.03-.288-.078-.158-.088-.285-.31-.285-.491v-2.562c0-.185.103-.354.266-.441.59-.313 1.279-.726 1.838-1.06.39-.233.718-.43.911-.533.149-.078.329-.077.476.003.148.081.245.231.258.4.034.438-.113 1.545-.144 1.763-.021.153-.112.289-.247.366l-1.203.688c-.238.132-.545.054-.683-.186-.137-.239-.054-.545.186-.683l.987-.564c.018-.14.035-.293.052-.444l-.08.048c-.49.293-1.078.646-1.617.942v1.625c.173-.094.407-.229.724-.427l.339.379.19.471c-.949.587-1.392.784-1.68.784zm-17.698 2.993c-.051 0-.102-.008-.152-.023l-3.219-1.031c-.263-.085-.408-.366-.324-.629.084-.264.367-.404.628-.324l2.585.828.065-2.356-2.856-.836-.026.735 1.585.537c.261.089.401.372.313.634-.089.262-.372.399-.634.313l-1.938-.656c-.209-.071-.347-.271-.339-.491l.062-1.75c.005-.154.082-.298.207-.388.125-.091.284-.118.433-.074l3.844 1.125c.218.063.365.267.359.493l-.094 3.406c-.004.157-.083.304-.211.395-.084.061-.186.092-.288.092zM5.844 29.5c-.091 0-.181-.024-.262-.074l-1.375-.844c-.235-.145-.309-.452-.165-.688.144-.235.451-.311.688-.164l.608.373-.008-1.623L4 25.73v.425l.743.448c.236.143.312.449.17.686-.143.236-.449.311-.687.17l-.984-.594c-.15-.09-.242-.253-.242-.427v-1.562c0-.178.094-.342.248-.432.153-.09.343-.092.498-.004l2.328 1.312c.156.088.253.253.254.433l.016 2.812c.001.182-.097.35-.254.438-.077.044-.162.065-.246.065z"/><ellipse fill="#FFAC33" cx="18" cy="18" rx="15" ry="7"/><path fill="#FFD983" d="M22 24c-1.18 0-2.122-.196-2.801-.584-.767-.438-1.208-1.143-1.208-1.933C17.992 19.628 20.332 18 23 18c.553 0 1 .448 1 1 0 .553-.447 1-1 1-1.872 0-3.008 1.03-3.008 1.483 0 .076.152.169.199.196.21.12.724.321 1.809.321 2.404 0 5-1.529 5-4 0-.721-.94-1.183-1.343-1.348-2.02-.826-5.291-.579-6.944 1.104-1.441 1.467-3.792 1.956-6.29 1.301-1.538-.402-3.319-1.338-3.705-2.761-.196-.725.008-1.436.575-2.004C11.586 12 15.871 12 19 12c.553 0 1 .448 1 1s-.447 1-1 1c-2.779 0-6.586 0-8.293 1.707-.052.053-.064.081-.064.082.023.157.571.764 1.807 1.189 1.571.541 3.676.559 4.837-.623 2.319-2.361 6.461-2.644 9.128-1.554C28.058 15.473 29 16.639 29 18c0 3.706-3.634 6-7 6zm-7 0c-7.605 0-10-5.456-10-7 0-.552.448-1 1-1 .551 0 .998.445 1 .995.036.663 1.701 5.005 8 5.005.552 0 1 .447 1 1s-.448 1-1 1z"/><path fill="#AA695B" d="M35.092 3.053l-23.005.886c-.55.049-1.036-.356-1.085-.907-.049-.55.356-1.036.906-1.085L34.824.066c.551-.05 1.036.356 1.086.906.048.549-.267 2.031-.818 2.081zM35 8L12 7c-.552 0-1-.448-1-1s.448-1 1-1h23c.553 0 1 .448 1 1s-.447 2-1 2z"/><path fill="#FFD983" d="M14 15c-.552 0-1-.448-1-1V2c0-.552.448-1 1-1s1 .448 1 1v12c0 .552-.448 1-1 1zm4 2c-.552 0-1-.448-1-1V1c0-.552.448-1 1-1s1 .448 1 1v15c0 .552-.448 1-1 1z"/></svg>
\ No newline at end of file
diff --git a/docs/logo/dark.svg b/docs/logo/dark.svg
index 6a5c8e7..f2fcc6c 100644
--- a/docs/logo/dark.svg
+++ b/docs/logo/dark.svg
@@ -1,3 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 32" fill="none">
-  <text y="24" font-size="20" font-family="system-ui, sans-serif" font-weight="600" fill="#f9fafb">🍜 Logo Soup</text>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 36" fill="none">
+  <g transform="translate(2, 2) scale(0.889)">
+    <path fill="#CCD6DD" d="M18 36C3.042 36 1 22 1 18h34c0 2-1.958 18-17 18z"/>
+    <path fill="#99AAB5" d="M35 17.056c0 5.216-7.611 9.444-17 9.444S1 22.271 1 17.056c0-5.216 7.611-8.444 17-8.444 9.389-.001 17 3.228 17 8.444z"/>
+    <path fill="#EA596E" d="M19.5 33H17c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h2v-3h-4v1h3c.276 0 .5.224.5.5s-.224.5-.5.5h-3.5c-.276 0-.5-.224-.5-.5v-2c0-.276.224-.5.5-.5h5c.276 0 .5.224.5.5v4c0 .276-.224.5-.5.5zm5.5-1c-.198 0-.386-.119-.464-.315-.103-.256.021-.547.278-.649l2.176-.871-.065-2.249-3.925.975v.949c.734-.206 1.958-.553 2.858-.819.262-.076.543.072.621.338.078.265-.073.543-.338.621-1.378.407-3.507 1.002-3.507 1.002-.154.042-.312.011-.438-.083-.123-.095-.196-.243-.196-.399v-2c0-.229.156-.43.38-.485l4.906-1.219c.144-.036.303-.004.422.087.121.092.193.232.198.384L28 30.485c.006.21-.119.401-.315.479l-2.5 1c-.06.024-.123.036-.185.036z"/>
+    <ellipse fill="#FFAC33" cx="18" cy="18" rx="15" ry="7"/>
+    <path fill="#FFD983" d="M22 24c-1.18 0-2.122-.196-2.801-.584-.767-.438-1.208-1.143-1.208-1.933C17.992 19.628 20.332 18 23 18c.553 0 1 .448 1 1 0 .553-.447 1-1 1-1.872 0-3.008 1.03-3.008 1.483 0 .076.152.169.199.196.21.12.724.321 1.809.321 2.404 0 5-1.529 5-4 0-.721-.94-1.183-1.343-1.348-2.02-.826-5.291-.579-6.944 1.104-1.441 1.467-3.792 1.956-6.29 1.301-1.538-.402-3.319-1.338-3.705-2.761-.196-.725.008-1.436.575-2.004C11.586 12 15.871 12 19 12c.553 0 1 .448 1 1s-.447 1-1 1c-2.779 0-6.586 0-8.293 1.707-.052.053-.064.081-.064.082.023.157.571.764 1.807 1.189 1.571.541 3.676.559 4.837-.623 2.319-2.361 6.461-2.644 9.128-1.554C28.058 15.473 29 16.639 29 18c0 3.706-3.634 6-7 6zm-7 0c-7.605 0-10-5.456-10-7 0-.552.448-1 1-1 .551 0 .998.445 1 .995.036.663 1.701 5.005 8 5.005.552 0 1 .447 1 1s-.448 1-1 1z"/>
+    <path fill="#AA695B" d="M35.092 3.053l-23.005.886c-.55.049-1.036-.356-1.085-.907-.049-.55.356-1.036.906-1.085L34.824.066c.551-.05 1.036.356 1.086.906.048.549-.267 2.031-.818 2.081zM35 8L12 7c-.552 0-1-.448-1-1s.448-1 1-1h23c.553 0 1 .448 1 1s-.447 2-1 2z"/>
+    <path fill="#FFD983" d="M14 15c-.552 0-1-.448-1-1V2c0-.552.448-1 1-1s1 .448 1 1v12c0 .552-.448 1-1 1zm4 2c-.552 0-1-.448-1-1V1c0-.552.448-1 1-1s1 .448 1 1v15c0 .552-.448 1-1 1z"/>
+  </g>
+  <text x="40" y="25" font-size="17" font-family="system-ui, -apple-system, sans-serif" font-weight="600" fill="#f9fafb">Logo Soup</text>
 </svg>
diff --git a/docs/logo/light.svg b/docs/logo/light.svg
index c732b01..2773be8 100644
--- a/docs/logo/light.svg
+++ b/docs/logo/light.svg
@@ -1,3 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 32" fill="none">
-  <text y="24" font-size="20" font-family="system-ui, sans-serif" font-weight="600" fill="#111827">🍜 Logo Soup</text>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 36" fill="none">
+  <g transform="translate(2, 2) scale(0.889)">
+    <path fill="#CCD6DD" d="M18 36C3.042 36 1 22 1 18h34c0 2-1.958 18-17 18z"/>
+    <path fill="#99AAB5" d="M35 17.056c0 5.216-7.611 9.444-17 9.444S1 22.271 1 17.056c0-5.216 7.611-8.444 17-8.444 9.389-.001 17 3.228 17 8.444z"/>
+    <path fill="#EA596E" d="M19.5 33H17c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h2v-3h-4v1h3c.276 0 .5.224.5.5s-.224.5-.5.5h-3.5c-.276 0-.5-.224-.5-.5v-2c0-.276.224-.5.5-.5h5c.276 0 .5.224.5.5v4c0 .276-.224.5-.5.5zm5.5-1c-.198 0-.386-.119-.464-.315-.103-.256.021-.547.278-.649l2.176-.871-.065-2.249-3.925.975v.949c.734-.206 1.958-.553 2.858-.819.262-.076.543.072.621.338.078.265-.073.543-.338.621-1.378.407-3.507 1.002-3.507 1.002-.154.042-.312.011-.438-.083-.123-.095-.196-.243-.196-.399v-2c0-.229.156-.43.38-.485l4.906-1.219c.144-.036.303-.004.422.087.121.092.193.232.198.384L28 30.485c.006.21-.119.401-.315.479l-2.5 1c-.06.024-.123.036-.185.036z"/>
+    <ellipse fill="#FFAC33" cx="18" cy="18" rx="15" ry="7"/>
+    <path fill="#FFD983" d="M22 24c-1.18 0-2.122-.196-2.801-.584-.767-.438-1.208-1.143-1.208-1.933C17.992 19.628 20.332 18 23 18c.553 0 1 .448 1 1 0 .553-.447 1-1 1-1.872 0-3.008 1.03-3.008 1.483 0 .076.152.169.199.196.21.12.724.321 1.809.321 2.404 0 5-1.529 5-4 0-.721-.94-1.183-1.343-1.348-2.02-.826-5.291-.579-6.944 1.104-1.441 1.467-3.792 1.956-6.29 1.301-1.538-.402-3.319-1.338-3.705-2.761-.196-.725.008-1.436.575-2.004C11.586 12 15.871 12 19 12c.553 0 1 .448 1 1s-.447 1-1 1c-2.779 0-6.586 0-8.293 1.707-.052.053-.064.081-.064.082.023.157.571.764 1.807 1.189 1.571.541 3.676.559 4.837-.623 2.319-2.361 6.461-2.644 9.128-1.554C28.058 15.473 29 16.639 29 18c0 3.706-3.634 6-7 6zm-7 0c-7.605 0-10-5.456-10-7 0-.552.448-1 1-1 .551 0 .998.445 1 .995.036.663 1.701 5.005 8 5.005.552 0 1 .447 1 1s-.448 1-1 1z"/>
+    <path fill="#AA695B" d="M35.092 3.053l-23.005.886c-.55.049-1.036-.356-1.085-.907-.049-.55.356-1.036.906-1.085L34.824.066c.551-.05 1.036.356 1.086.906.048.549-.267 2.031-.818 2.081zM35 8L12 7c-.552 0-1-.448-1-1s.448-1 1-1h23c.553 0 1 .448 1 1s-.447 2-1 2z"/>
+    <path fill="#FFD983" d="M14 15c-.552 0-1-.448-1-1V2c0-.552.448-1 1-1s1 .448 1 1v12c0 .552-.448 1-1 1zm4 2c-.552 0-1-.448-1-1V1c0-.552.448-1 1-1s1 .448 1 1v15c0 .552-.448 1-1 1z"/>
+  </g>
+  <text x="40" y="25" font-size="17" font-family="system-ui, -apple-system, sans-serif" font-weight="600" fill="#111827">Logo Soup</text>
 </svg>
diff --git a/docs/snippets/logo-soup-demo.jsx b/docs/snippets/logo-soup-demo.jsx
index 2619c20..7d98b8f 100644
--- a/docs/snippets/logo-soup-demo.jsx
+++ b/docs/snippets/logo-soup-demo.jsx
@@ -42,6 +42,7 @@ export const LogoSoupDemo = () => {
               src={`${base}/${name}.svg`}
               alt={name}
               draggable={false}
+              className="dark:invert"
               style={{
                 width: on
                   ? `${dw * displayScale}px`