diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 1653a0f1..053fbe57 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -11,7 +11,7 @@ module.exports = {
       title: "ZMK Firmware",
       logo: {
         alt: "ZMK Logo",
-        src: "img/zmk_logo.png",
+        src: "img/zmk_logo.svg",
       },
       links: [
         {
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 74ba0f27..275794b4 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -7,13 +7,13 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: rgb(33, 175, 144);
-  --ifm-color-primary-darker: rgb(31, 165, 136);
-  --ifm-color-primary-darkest: rgb(26, 136, 112);
-  --ifm-color-primary-light: rgb(70, 203, 174);
-  --ifm-color-primary-lighter: rgb(102, 212, 189);
-  --ifm-color-primary-lightest: rgb(146, 224, 208);
+  --ifm-color-primary: #026fc5;
+  --ifm-color-primary-dark: #0061ac;
+  --ifm-color-primary-darker: #024f8a;
+  --ifm-color-primary-darkest: #003761;
+  --ifm-color-primary-light: #097acf;
+  --ifm-color-primary-lighter: #1389e4;
+  --ifm-color-primary-lightest: #209af8;
   --ifm-code-font-size: 95%;
 }
 
diff --git a/docs/static/img/favicon.ico b/docs/static/img/favicon.ico
index 17faade2..faec05fa 100644
Binary files a/docs/static/img/favicon.ico and b/docs/static/img/favicon.ico differ
diff --git a/docs/static/img/zmk_logo.png b/docs/static/img/zmk_logo.png
deleted file mode 100644
index e1b2f4fc..00000000
Binary files a/docs/static/img/zmk_logo.png and /dev/null differ
diff --git a/docs/static/img/zmk_logo.svg b/docs/static/img/zmk_logo.svg
new file mode 100644
index 00000000..31977a60
--- /dev/null
+++ b/docs/static/img/zmk_logo.svg
@@ -0,0 +1,17 @@
+<svg viewBox="0 0 135.47 135.47" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="a" x2="135.5" y1="-.19" y2="135.32" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#026fc5" offset="0"/>
+      <stop stop-color="#7829d1" offset="1"/>
+    </linearGradient>
+  </defs>
+  <g stroke-linecap="round">
+    <path fill="url(#a)" stroke="url(#a)" stroke-linejoin="round" stroke-width=".15" style="mix-blend-mode:normal" paint-order="stroke markers fill" d="M0-.19h135.5v135.5H0z"/>
+    <g fill="none" stroke="#fff" stroke-width="8.76">
+      <g stroke-linejoin="round">
+        <path d="M53.52 85.45V48.48l14.24 18.16 14.19-18.1v37.59M15.49 48.89h22.14l-21.31 36.9h20.53M98.56 48.39V87"/>
+      </g>
+      <path d="M119.86 48.5l-18.32 18.14 18.44 20.44" stroke-linejoin="bevel" stroke-miterlimit="0"/>
+    </g>
+  </g>
+</svg>