diff --git a/README.md b/README.md
index 77c2b9e4f..fb5c4ff8d 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,10 @@
 <p align="center">
   <img
-    width="60%"
-    src="./assets/logo.png"
+    width="20%"
+    src="./docs/_assets/logo.svg"
     alt="Lion"
   />
+  <h1 style="text-align: center;">Lion</h1>
 </p>
 
 <p align="center">
@@ -36,8 +37,6 @@
   <a href="https://lion-web.netlify.app/blog/">Blog</a>
 </p>
 
-<h1></h1>
-
 **Lion is a set of highly performant, accessible and flexible Web Components.!**
 
 They provide an unopinionated, white-label layer that can be extended to your own layer of components.
diff --git a/assets/logo.png b/assets/logo.png
deleted file mode 100644
index b4528d72d..000000000
Binary files a/assets/logo.png and /dev/null differ
diff --git a/docs/_assets/logo.svg b/docs/_assets/logo.svg
index dec159884..ddc79a9a7 100644
--- a/docs/_assets/logo.svg
+++ b/docs/_assets/logo.svg
@@ -1,31 +1,23 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 457 457">
-  <defs/>
-  <g transform="translate(-247.653 -647.52)">
-    <path fill="#65511b" d="M247.38 1008.44l91.25 1.03-.62-22.05 12.62-16.75 39.85 9.9-38.43 26.2-3.38 1.93 355.09-.12s-35.2-26.06-47.95-46.15c-12.91-20.32-49.38-82.24-49.38-82.24l-50-54.21-15.35-10.36-25.63-26.32-9.3-4.51-21.61-29.53-7.74-2.16s-6.81-44.22-50.2-45.2L413 718.61l-.27 12.01-3.4 2.93 6.63 102.33-3.47 5.94 5.5 103.31-136.33-26.07-12.37 5.75-.06 3.01 4.36 4.11 22.01 11.5 1.02 4.03 6.63 2.16 1.02 4.03 22.05 9.5-46.4 34.03-11.1-1.25-21.44 12.51z"/>
-    <linearGradient id="a" x1="201.739" x2="210.647" y1="1781.71" y2="1778.468" gradientTransform="matrix(12.274 0 0 -67.886 -2104.537 121677.61)" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#c19d3b"/>
-      <stop offset="1" stop-color="#65511b"/>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 366.11 271.02">
+  <defs>
+    <linearGradient id="a" x1="103.79" y1="8.91" x2="201.41" y2="205.47" gradientTransform="matrix(1, 0.03, -0.03, 1, -4.72, 2.36)" gradientUnits="userSpaceOnUse">
+      <stop offset="0.01" stop-color="#c19d3a"/>
+      <stop offset="1" stop-color="#786124"/>
     </linearGradient>
-    <path fill="url(#a)" d="M426.6 707.87l26.86 244.04-35.47-6.8-5.5-103.31 3.47-5.94-6.63-102.33 3.4-2.93.27-12.01 13.6-10.72z"/>
-    <linearGradient id="b" x1="219.109" x2="219.562" y1="1780.966" y2="1778.31" gradientTransform="matrix(25.036 0 0 -12.792 -5195.276 23762.836)" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#c19d3b"/>
-      <stop offset="1" stop-color="#65511b"/>
-    </linearGradient>
-    <path fill="url(#b)" d="M326.31 963.11l11.08 2.25-31.76 43.73-58.24-.65 21.43-12.55 11.1 1.25 46.39-34.03z"/>
-    <linearGradient id="c" x1="226.508" x2="228.072" y1="1784.668" y2="1781.059" gradientTransform="matrix(31.819 0 0 -41.355 -6759.904 74504.36)" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#c19d3b"/>
-      <stop offset="1" stop-color="#65511b"/>
-    </linearGradient>
-    <path fill="url(#c)" d="M476.8 753.07s-6.68 50.27-17.04 65.4c-7.3 9.04-13.26 19.08-17.71 29.82l5.88 53.44s9.29-18.86 56.63-45.86c14.68-8.37 35.85-10.22 51.87-29.91l-15.35-10.36-25.63-26.32-9.3-4.51-21.61-29.53-7.74-2.17z"/>
-    <linearGradient id="d" x1="230.192" x2="231.598" y1="1783.099" y2="1780.414" gradientTransform="matrix(44.091 0 0 -35.032 -9687.025 63279.066)" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#c19d3b"/>
-      <stop offset="1" stop-color="#65511b"/>
-    </linearGradient>
-    <path fill="url(#d)" d="M447.93 901.74s15.43-24.23 56.63-45.86c14.64-7.69 33.58-8.27 51.87-29.91l50 54.2a256.687 256.687 0 01-62.81 21.53c-27.95 5.39-41.53 15.55-50.61 23.37a276.64 276.64 0 01-39.54 26.84l-2.83-23.1-2.71-27.07z"/>
-    <linearGradient id="e" x1="231.595" x2="232.99" y1="1785.571" y2="1779.909" gradientTransform="matrix(49.718 0 0 -21.1301 -11028.4 38569.195)" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#c19d3b"/>
-      <stop offset="1" stop-color="#65511b"/>
-    </linearGradient>
-    <path fill="url(#e)" d="M453.45 951.91a245.398 245.398 0 0038.42-25.75c9.08-7.81 21.55-18 49.5-23.39a272.307 272.307 0 0065.07-22.6l25.75 43.65c-43.55 6.04-82.95 26.21-103.07 29.77-37.18 6.57-75.67-1.68-75.67-1.68z"/>
-  </g>
+    <linearGradient id="b" x1="44.31" y1="236.36" x2="54.67" y2="267.4" xlink:href="#a"/>
+    <linearGradient id="c" x1="162.62" y1="-5.22" x2="205.42" y2="122.98" xlink:href="#a"/>
+    <linearGradient id="d" x1="166.43" y1="89.41" x2="224.05" y2="176.82" xlink:href="#a"/>
+    <linearGradient id="e" x1="179.91" y1="80.85" x2="275.73" y2="246.39" xlink:href="#a"/>
+    <linearGradient id="f" x1="162.62" y1="265.01" x2="226.06" y2="278.6" gradientTransform="matrix(1, -0.03, 0.03, 1, 7.04, -13.2)" xlink:href="#a"/>
+    <linearGradient id="g" x1="339.88" y1="311.72" x2="206.79" y2="275.48" gradientTransform="matrix(1, -0.03, 0.03, 1, 7.04, -13.2)" xlink:href="#a"/>
+  </defs>
+  <polygon points="0 269.85 73.2 270.98 72.86 251.17 83.1 236.15 115 245.13 83.98 268.58 81.25 270.31 366.11 271.02 360.19 259.06 327.97 229.45 299.73 199.19 274.73 170.19 241.73 117.19 232.73 110.19 215.73 85.19 204.73 78.19 195.73 65.19 185.73 49.19 182.73 48.19 159.73 5.19 145.92 0.2 134.93 9.8 134.63 20.59 131.88 23.22 136.47 115.18 133.64 120.5 137.31 213.34 28.13 189.6 18.16 194.72 18.09 197.42 21.56 201.12 39.13 211.51 39.92 215.14 45.23 217.09 46.02 220.71 63.64 229.3 26.18 259.77 17.28 258.63 0 269.85" style="fill:#775e25"/>
+  <polygon points="145.92 0.2 165.72 219.53 137.31 213.34 133.64 120.5 136.47 115.18 131.88 23.22 134.63 20.59 134.93 9.8 145.92 0.2" style="fill:url(#a)"/>
+  <polygon points="63.64 229.3 72.51 231.35 46.72 270.57 0 269.85 17.28 258.63 26.18 259.77 63.64 229.3" style="fill:url(#b)"/>
+  <polygon points="185.73 49.19 182.73 48.19 172.73 100.19 157.31 126.41 161.65 174.44 194.46 149.41 212.73 126.19 241.73 117.19 232.73 110.19 215.73 85.19 204.73 78.19 195.73 65.19 185.73 49.19" style="fill:url(#c)"/>
+  <polygon points="182.73 48.19 172.73 100.19 157.31 126.41 145.92 0 159.73 5.19 182.73 48.19" style="fill:#775e25"/>
+  <polygon points="161.65 174.44 194.46 149.41 212.73 126.19 241.73 117.19 274.73 170.19 246.73 182.19 199.54 191.56 165.72 219.53 163.61 198.77 161.65 174.44" style="fill:url(#d)"/>
+  <polygon points="165.72 219.53 165.72 219.53 199.54 191.56 246.73 182.19 274.73 170.19 299.73 199.19 327.73 229.19 271.73 227.19 231.73 219.19 165.72 219.53" style="fill:url(#e)"/>
+  <polygon points="171.04 265.24 185.34 237.55 208.32 224.43 230.4 230.98 215.53 253.33 214.71 263.79 177.08 270.61 161.73 270.49 171.04 265.24" style="fill:url(#f)"/>
+  <polygon points="214.7 263.74 215.53 253.28 230.39 230.93 241.59 242.75 248.49 262.62 253.73 270.69 177.47 270.59 214.7 263.74" style="fill:url(#g)"/>
 </svg>
diff --git a/docs/_assets/style.css b/docs/_assets/style.css
index 2fd4e88c5..b64a23804 100644
--- a/docs/_assets/style.css
+++ b/docs/_assets/style.css
@@ -14,6 +14,10 @@ body[layout='layout-home'] .markdown-body .call-to-action:nth-of-type(2):hover {
   text-decoration: underline;
 }
 
+.markdown-body .page-title {
+  margin-top: 64px;
+}
+
 #main-header a {
   font-weight: normal;
 }
diff --git a/docs/favicon.ico b/docs/favicon.ico
index 451bfd8e8..9e071db60 100644
Binary files a/docs/favicon.ico and b/docs/favicon.ico differ