diff --git a/README.md b/README.md
index 770a73f30..e643d25d0 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,10 @@
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="docs/app/assets/images/logo_dark.svg">
+    <img alt="RubyUI" src="docs/app/assets/images/logo.svg" width="200">
+  </picture>
+</p>
+
 # RubyUI
 
 [![CI](https://github.com/ruby-ui/ruby_ui/actions/workflows/ci.yml/badge.svg)](https://github.com/ruby-ui/ruby_ui/actions/workflows/ci.yml)
diff --git a/docs/app/assets/images/logo.svg b/docs/app/assets/images/logo.svg
index a5628dbc6..58e8d76c8 100644
--- a/docs/app/assets/images/logo.svg
+++ b/docs/app/assets/images/logo.svg
@@ -1,51 +1,30 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="22.858999mm"
-   height="5.423954mm"
-   viewBox="0 0 22.858999 5.423954"
-   version="1.1"
-   id="svg1"
-   sodipodi:docname="logo.svg"
-   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview1"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     inkscape:document-units="mm"
-     inkscape:zoom="14.084557"
-     inkscape:cx="41.002354"
-     inkscape:cy="8.6264692"
-     inkscape:window-width="1664"
-     inkscape:window-height="756"
-     inkscape:window-x="0"
-     inkscape:window-y="39"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs1" />
-  <g
-     id="layer1"
-     transform="translate(-53.368365,-19.968138)">
-    <text
-       xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:5.64444px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.264583"
-       x="52.844711"
-       y="24.25659"
-       id="text1"><tspan
-         id="tspan1"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:5.64444px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.264583"
-         x="52.844711"
-         y="24.25659">RubyUI</tspan></text>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.25 27.44">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #b32328;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <g>
+        <path d="M.11,15.67V0h5.58c1.21,0,2.22.21,3.03.63.8.42,1.4,1,1.8,1.73.4.74.6,1.59.6,2.55s-.2,1.8-.6,2.53c-.4.73-1,1.29-1.81,1.69-.8.4-1.81.6-3.03.6H1.46v-2.04h4.02c.76,0,1.39-.11,1.87-.33.48-.22.83-.54,1.06-.96.22-.42.34-.92.34-1.51s-.11-1.1-.34-1.54c-.23-.43-.58-.77-1.06-1-.48-.23-1.11-.35-1.89-.35h-2.97v13.64H.11ZM7.85,8.6l3.87,7.07h-2.69l-3.79-7.07h2.62Z"/>
+        <path d="M31.86,0h2.37v10.3c0,1.1-.26,2.07-.77,2.91-.52.84-1.24,1.51-2.17,1.99-.93.48-2.03.72-3.28.72s-2.34-.24-3.27-.72c-.93-.48-1.66-1.14-2.17-1.99-.52-.84-.77-1.81-.77-2.91V0h2.36v10.11c0,.71.16,1.34.47,1.89s.76.98,1.34,1.3c.58.31,1.26.47,2.05.47s1.48-.16,2.06-.47c.58-.31,1.02-.75,1.33-1.3s.46-1.18.46-1.89V0Z"/>
+        <path d="M45.45,15.67V0h5.74c1.11,0,2.03.18,2.76.55.73.36,1.28.86,1.64,1.48.36.62.54,1.32.54,2.09,0,.65-.12,1.2-.36,1.65-.24.45-.56.8-.96,1.07-.4.27-.84.46-1.32.59v.15c.52.03,1.03.19,1.53.5.5.31.91.75,1.24,1.31.33.57.49,1.25.49,2.07s-.19,1.52-.56,2.15-.95,1.14-1.73,1.51-1.78.55-2.99.55h-6.01ZM47.81,6.78h3.17c.53,0,1.01-.1,1.43-.31.43-.2.76-.49,1.02-.86s.38-.81.38-1.31c0-.65-.23-1.19-.68-1.63-.45-.44-1.15-.66-2.09-.66h-3.23v4.77ZM47.81,13.64h3.41c1.13,0,1.94-.22,2.43-.66.49-.44.73-.99.73-1.64,0-.49-.13-.95-.37-1.36-.25-.41-.61-.74-1.07-.99-.46-.24-1.01-.37-1.64-.37h-3.5v5.02Z"/>
+        <path d="M66.11,0h2.69l4.09,7.12h.17l4.09-7.12h2.69l-5.68,9.52v6.15h-2.36v-6.15l-5.68-9.52Z"/>
+      </g>
+      <g>
+        <path d="M103.54,27.44c-2.5,0-4.61-.47-6.34-1.42-1.73-.94-3.05-2.28-3.94-4-.9-1.72-1.34-3.76-1.34-6.11V.18h5.96v15.96c0,1.16.22,2.18.67,3.03.45.86,1.09,1.52,1.93,1.98.84.46,1.86.69,3.07.69s2.24-.23,3.09-.69c.85-.46,1.48-1.11,1.91-1.96.42-.85.64-1.87.64-3.05V.18h6v15.74c0,2.35-.45,4.39-1.34,6.11-.9,1.72-2.2,3.05-3.92,4-1.72.94-3.84,1.42-6.36,1.42Z"/>
+        <path d="M124.29,26.71V.18h5.96v26.53h-5.96Z"/>
+      </g>
+      <g>
+        <polygon class="cls-1" points="58.08 20.75 62.39 25.85 62.4 26.19 30.17 26.21 30.17 25.82 35.02 20.75 58.08 20.75"/>
+        <polygon class="cls-1" points="0 20.75 0 25.95 23.27 25.95 23.27 25.59 19.7 20.75 0 20.75"/>
+        <polygon class="cls-1" points="69.38 26.07 80.25 26.04 80.25 20.75 73.72 20.75 69.38 25.71 69.38 26.07"/>
+        <rect class="cls-1" x="0" y="25.44" width="80.25" height="1.55"/>
+      </g>
+    </g>
   </g>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/docs/app/assets/images/logo_dark.svg b/docs/app/assets/images/logo_dark.svg
index 30e7877e8..e179c644b 100644
--- a/docs/app/assets/images/logo_dark.svg
+++ b/docs/app/assets/images/logo_dark.svg
@@ -1,51 +1,34 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.25 27.44">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #ebebeb;
+      }
 
-<svg
-   width="22.858879mm"
-   height="5.423954mm"
-   viewBox="0 0 22.858879 5.423954"
-   version="1.1"
-   id="svg1"
-   sodipodi:docname="logo_dark.svg"
-   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview1"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     inkscape:document-units="mm"
-     inkscape:zoom="14.084557"
-     inkscape:cx="29.287396"
-     inkscape:cy="8.6619691"
-     inkscape:window-width="1592"
-     inkscape:window-height="731"
-     inkscape:window-x="0"
-     inkscape:window-y="39"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg1" />
-  <defs
-     id="defs1" />
-  <g
-     id="layer1"
-     transform="translate(-53.368365,-19.968138)">
-    <text
-       xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:5.64444px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
-       x="52.844711"
-       y="24.25659"
-       id="text1"><tspan
-         id="tspan1"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:5.64444px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
-         x="52.844711"
-         y="24.25659">RubyUI</tspan></text>
+      .cls-2 {
+        fill: #b32328;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <g>
+        <path class="cls-1" d="M.11,15.67V0h5.58c1.21,0,2.22.21,3.03.63.8.42,1.4,1,1.8,1.73.4.74.6,1.59.6,2.55s-.2,1.8-.6,2.53c-.4.73-1,1.29-1.81,1.69-.8.4-1.81.6-3.03.6H1.46v-2.04h4.02c.76,0,1.39-.11,1.87-.33.48-.22.83-.54,1.06-.96.22-.42.34-.92.34-1.51s-.11-1.1-.34-1.54c-.23-.43-.58-.77-1.06-1-.48-.23-1.11-.35-1.89-.35h-2.97v13.64H.11ZM7.85,8.6l3.87,7.07h-2.69l-3.79-7.07h2.62Z"/>
+        <path class="cls-1" d="M31.86,0h2.37v10.3c0,1.1-.26,2.07-.77,2.91-.52.84-1.24,1.51-2.17,1.99-.93.48-2.03.72-3.28.72s-2.34-.24-3.27-.72c-.93-.48-1.66-1.14-2.17-1.99-.52-.84-.77-1.81-.77-2.91V0h2.36v10.11c0,.71.16,1.34.47,1.89s.76.98,1.34,1.3c.58.31,1.26.47,2.05.47s1.48-.16,2.06-.47c.58-.31,1.02-.75,1.33-1.3s.46-1.18.46-1.89V0Z"/>
+        <path class="cls-1" d="M45.45,15.67V0h5.74c1.11,0,2.03.18,2.76.55.73.36,1.28.86,1.64,1.48.36.62.54,1.32.54,2.09,0,.65-.12,1.2-.36,1.65-.24.45-.56.8-.96,1.07-.4.27-.84.46-1.32.59v.15c.52.03,1.03.19,1.53.5.5.31.91.75,1.24,1.31.33.57.49,1.25.49,2.07s-.19,1.52-.56,2.15-.95,1.14-1.73,1.51-1.78.55-2.99.55h-6.01ZM47.81,6.78h3.17c.53,0,1.01-.1,1.43-.31.43-.2.76-.49,1.02-.86s.38-.81.38-1.31c0-.65-.23-1.19-.68-1.63-.45-.44-1.15-.66-2.09-.66h-3.23v4.77ZM47.81,13.64h3.41c1.13,0,1.94-.22,2.43-.66.49-.44.73-.99.73-1.64,0-.49-.13-.95-.37-1.36-.25-.41-.61-.74-1.07-.99-.46-.24-1.01-.37-1.64-.37h-3.5v5.02Z"/>
+        <path class="cls-1" d="M66.11,0h2.69l4.09,7.12h.17l4.09-7.12h2.69l-5.68,9.52v6.15h-2.36v-6.15l-5.68-9.52Z"/>
+      </g>
+      <g>
+        <path class="cls-1" d="M103.54,27.44c-2.5,0-4.61-.47-6.34-1.42-1.73-.94-3.05-2.28-3.94-4-.9-1.72-1.34-3.76-1.34-6.11V.18h5.96v15.96c0,1.16.22,2.18.67,3.03.45.86,1.09,1.52,1.93,1.98.84.46,1.86.69,3.07.69s2.24-.23,3.09-.69c.85-.46,1.48-1.11,1.91-1.96.42-.85.64-1.87.64-3.05V.18h6v15.74c0,2.35-.45,4.39-1.34,6.11-.9,1.72-2.2,3.05-3.92,4-1.72.94-3.84,1.42-6.36,1.42Z"/>
+        <path class="cls-1" d="M124.29,26.71V.18h5.96v26.53h-5.96Z"/>
+      </g>
+      <g>
+        <polygon class="cls-2" points="58.08 20.75 62.39 25.85 62.4 26.19 30.17 26.21 30.17 25.82 35.02 20.75 58.08 20.75"/>
+        <polygon class="cls-2" points="0 20.75 0 25.95 23.27 25.95 23.27 25.59 19.7 20.75 0 20.75"/>
+        <polygon class="cls-2" points="69.38 26.07 80.25 26.04 80.25 20.75 73.72 20.75 69.38 25.71 69.38 26.07"/>
+        <rect class="cls-2" x="0" y="25.44" width="80.25" height="1.55"/>
+      </g>
+    </g>
   </g>
-</svg>
+</svg>
\ No newline at end of file