diff --git a/README.md b/README.md
index df59b2b4..f2beccd4 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 <div align="center">
-<img src="docs/img/magui-readme-logo.png" alt="Magentic-UI Logo">
+<img src="docs/img/magui-readme-logo.svg" alt="Magentic-UI Logo">
 
 
 _Automate your web tasks while you stay in control_
diff --git a/docs/img/magui-readme-logo.svg b/docs/img/magui-readme-logo.svg
new file mode 100644
index 00000000..d86a79e8
--- /dev/null
+++ b/docs/img/magui-readme-logo.svg
@@ -0,0 +1,79 @@
+<!-- Root SVG element -->
+<svg 
+  width="1500" 
+  height="350" 
+  viewBox="0 100 1500 330" 
+  fill="none" 
+  xmlns="http://www.w3.org/2000/svg">
+  
+<!-- Left logo paths making up the stylized "M" with sparkle -->
+<!-- Each path contributes part of the visual shape -->
+
+<!-- Sparkle shape above M -->
+<path d="M478.471 164.708C470.683 168.156 463.618 173.25 457.694 179.689C451.77 186.127 447.108 193.78 443.985 202.193C443.647 203.027 443.089 203.737 442.382 204.236C441.674 204.734 440.846 205 440 205C439.154 205 438.326 204.734 437.618 204.236C436.911 203.737 436.353 203.027 436.015 202.193C432.894 193.779 428.233 186.125 422.309 179.686C416.385 173.247 409.318 168.153 401.529 164.708C400.774 164.334 400.135 163.736 399.686 162.983C399.238 162.23 399 161.355 399 160.461C399 159.567 399.238 158.692 399.686 157.939C400.135 157.186 400.774 156.588 401.529 156.214C409.311 152.778 416.374 147.696 422.298 141.271C428.221 134.846 432.886 127.207 436.015 118.807C436.353 117.973 436.911 117.263 437.618 116.764C438.326 116.266 439.154 116 440 116C440.846 116 441.674 116.266 442.382 116.764C443.089 117.263 443.647 117.973 443.985 118.807C447.116 127.205 451.782 134.843 457.705 141.268C463.629 147.693 470.69 152.775 478.471 156.214C479.226 156.588 479.865 157.186 480.314 157.939C480.762 158.692 481 159.567 481 160.461C481 161.355 480.762 162.23 480.314 162.983C479.865 163.736 479.226 164.334 478.471 164.708Z" fill="url(#paint0_linear_510_752)"/>
+
+<!-- Left stroke of M -->
+<path d="M153.399 279.535L101.829 361.486C94.9868 372.104 84.5433 379.38 72.7652 381.733C60.9871 384.086 48.8249 381.327 38.9186 374.055C29.0123 366.783 22.1614 355.585 19.853 342.891C17.5445 330.198 19.9649 317.033 26.5887 306.254L98.4587 192C104.548 182.327 112.736 174.408 122.308 168.935C131.881 163.463 142.548 160.602 153.379 160.602C164.21 160.602 174.876 163.463 184.449 168.935C194.021 174.408 202.209 182.327 208.299 192L238.709 240.331C207.599 190.877 153.399 279.535 153.399 279.535Z" fill="url(#paint1_linear_510_752)"/>
+
+<!-- Inner curve of M -->
+<path d="M268.158 374.5C263.218 378.128 257.665 380.669 251.816 381.978C245.966 383.287 239.935 383.339 234.067 382.131C228.199 380.922 222.609 378.477 217.616 374.935C212.623 371.392 208.326 366.823 204.968 361.486L153.398 279.535C153.398 279.535 207.598 190.877 238.718 240.331L280.208 306.211C283.572 311.549 285.929 317.55 287.144 323.871C288.359 330.193 288.408 336.711 287.289 343.053C286.17 349.395 283.904 355.437 280.622 360.833C277.339 366.229 273.104 370.873 268.158 374.5Z" fill="url(#paint2_linear_510_752)"/>
+
+<!-- Right stroke of M -->
+<path d="M331.849 279.535L280.289 361.486C273.447 372.104 263.003 379.38 251.225 381.733C239.447 384.086 227.285 381.327 217.379 374.055C207.472 366.783 200.621 355.585 198.313 342.891C196.005 330.198 198.425 317.033 205.049 306.254L276.929 192C283.017 182.326 291.204 174.408 300.776 168.935C310.347 163.462 321.013 160.601 331.844 160.601C342.674 160.601 353.34 163.462 362.912 168.935C372.483 174.408 380.67 182.326 386.759 192L417.179 240.331C386.049 190.877 331.849 279.535 331.849 279.535Z" fill="url(#paint3_linear_510_752)"/>
+
+<!-- Rightmost accent of M -->
+<path d="M446.609 374.5C436.635 381.813 424.381 384.55 412.54 382.109C400.698 379.669 390.239 372.251 383.459 361.486L331.889 279.535C331.889 279.535 386.089 190.877 417.219 240.331L458.699 306.211C462.062 311.551 464.417 317.554 465.63 323.877C466.842 330.201 466.888 336.721 465.766 343.064C464.643 349.406 462.373 355.448 459.085 360.842C455.798 366.236 451.558 370.878 446.609 374.5Z" fill="url(#paint4_linear_510_752)"/>
+
+<!-- Gradient definitions for the logo and text -->  
+<defs>
+  <!-- Gradient for sparkle shape -->
+  <linearGradient id="paint0_linear_510_752" x1="398.921" y1="160.453" x2="481.079" y2="160.453" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#922185"/>
+  <stop offset="1" stop-color="#FB81FF"/>
+  </linearGradient>
+  
+  <!-- Gradient for left stroke of M -->
+  <linearGradient id="paint1_linear_510_752" x1="72.9585" y1="382.794" x2="167.044" y2="256.734" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#F68CE0"/>
+  <stop offset="1" stop-color="#D33FD8"/>
+  </linearGradient>
+  
+  <!-- Gradient for center/inner part of M -->
+  <linearGradient id="paint2_linear_510_752" x1="186.878" y1="251.93" x2="267.514" y2="348.771" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#912084"/>
+  <stop offset="1" stop-color="#C947B9"/>
+  </linearGradient>
+  
+  <!-- Gradient for right stroke of M -->
+  <linearGradient id="paint3_linear_510_752" x1="239.309" y1="394.88" x2="336.794" y2="254.629" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#FC9AE2"/>
+  <stop offset="1" stop-color="#D440D8"/>
+  </linearGradient>
+
+  <!-- Gradient for final accent on M -->
+  <linearGradient id="paint4_linear_510_752" x1="365.339" y1="251.93" x2="445.974" y2="348.771" gradientUnits="userSpaceOnUse">
+  <stop stop-color="#901E82"/>
+  <stop offset="1" stop-color="#C947B9"/>
+  </linearGradient>
+
+  <!-- Gradient for the "agentic UI" text -->
+  <linearGradient id="textGradient" x1="0" y1="0" x2="1180" y2="0" gradientUnits="userSpaceOnUse">
+  <stop offset="0%"   stop-color="#F68CE0"/>  <!-- light pink -->
+  <stop offset="50%"  stop-color="#D440D8"/>  <!-- mid lavender -->
+  <stop offset="100%" stop-color="#922185"/>  <!-- deep violet -->
+  </linearGradient>
+</defs>
+
+<!-- Right-side text: "agentic UI" aligned next to the logo -->
+<text
+    x="490"
+    y="380"                      
+    font-family="Inter, Helvetica, Arial, sans-serif"
+    font-size="200"
+    font-weight="700"
+    letter-spacing="3"
+    fill="url(#textGradient)">
+  agentic&#160;UI
+</text>
+  
+</svg>
\ No newline at end of file