diff --git a/README.md b/README.md
index 0fc884d2c..6a0c28557 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,9 @@
 # jsr.io
 
-<img src="./frontend/static/logo.png" width="200" align="right" alt="the jsr logo">
+<picture>
+   <source media="(prefers-color-scheme: dark)" srcset="./frontend/static/logo-light.svg">
+   <img src="./frontend/static/logo.svg" width="200px" alt="the jsr logo" align="right" >
+</picture>
 
 This is the source code for https://jsr.io, the new JavaScript registry.
 
diff --git a/frontend/static/logo-light-animated.svg b/frontend/static/logo-light-animated.svg
new file mode 100644
index 000000000..273f375cc
--- /dev/null
+++ b/frontend/static/logo-light-animated.svg
@@ -0,0 +1,221 @@
+<svg width="100%" height="100%" id="jsr-logo" viewBox="-1 -1 15 9" aria-hidden="true">
+  <style>
+    #jsr-logo {
+      height: 110px
+    }
+
+    @media(min-width:768px) {
+      #jsr-logo {
+        height: 143px
+      }
+    }
+
+    #jsr-logo rect {
+      transform-origin: center
+    }
+
+    #jsr-logo rect {
+      animation: .5s cubic-bezier(.77, 0, .175, 1) forwards jsr_logo_square_slide_in_up;
+      transform-box: fill-box;
+      opacity: 1
+    }
+
+    @keyframes jsr_logo_square_slide_in_up {
+
+      0%,
+      60% {
+        transform: translateY(2px)
+      }
+
+      100% {
+        transform: translateY(0)
+      }
+    }
+
+    @keyframes jsr_logo_square_slide_in_right {
+
+      0%,
+      60% {
+        transform: translateX(-2px)
+      }
+
+      100% {
+        transform: translateX(0)
+      }
+    }
+
+    @keyframes jsr_logo_square_slide_in_down {
+
+      0%,
+      60% {
+        transform: translateY(-2px)
+      }
+
+      100% {
+        transform: translateY(0)
+      }
+    }
+
+    @keyframes jsr_logo_square_slide_in_left {
+
+      0%,
+      60% {
+        transform: translateX(2px)
+      }
+
+      100% {
+        transform: translateX(0)
+      }
+    }
+  </style>
+  <rect x="2" y="0" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1101ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="3" y="0" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1788ms; animation-name: jsr_logo_square_slide_in_down;"></rect>
+  <rect x="4" y="0" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1945ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="5" y="0" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1138ms; animation-name: jsr_logo_square_slide_in_down;"></rect>
+  <rect x="6" y="0" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1436ms; animation-name: jsr_logo_square_slide_in_right;"></rect>
+  <rect x="7" y="0" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1770ms; animation-name: jsr_logo_square_slide_in_right;"></rect>
+  <rect x="8" y="0" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1149ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="2" y="1" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 661ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="3" y="1" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 933ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="4" y="1" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1552ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="5" y="1" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 1265ms; animation-name: jsr_logo_square_slide_in_down;"></rect>
+  <rect x="6" y="1" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 1066ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="7" y="1" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 1951ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="8" y="1" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1980ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="9" y="1" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1683ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="10" y="1" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1239ms; animation-name: jsr_logo_square_slide_in_right;"></rect>
+  <rect x="11" y="1" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1167ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="12" y="1" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1974ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="0" y="2" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1538ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="1" y="2" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1471ms; animation-name: jsr_logo_square_slide_in_right;"></rect>
+  <rect x="2" y="2" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 909ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="3" y="2" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 1184ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="4" y="2" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 748ms; animation-name: jsr_logo_square_slide_in_down;"></rect>
+  <rect x="5" y="2" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 682ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="6" y="2" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 753ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="7" y="2" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1886ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="8" y="2" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1410ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="9" y="2" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 1130ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="10" y="2" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 1619ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="11" y="2" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 801ms; animation-name: jsr_logo_square_slide_in_right;"></rect>
+  <rect x="12" y="2" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1710ms; animation-name: jsr_logo_square_slide_in_right;"></rect>
+  <rect x="0" y="3" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1330ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="1" y="3" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 1891ms; animation-name: jsr_logo_square_slide_in_down;"></rect>
+  <rect x="2" y="3" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1221ms; animation-name: jsr_logo_square_slide_in_down;"></rect>
+  <rect x="3" y="3" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 684ms; animation-name: jsr_logo_square_slide_in_right;"></rect>
+  <rect x="4" y="3" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1584ms; animation-name: jsr_logo_square_slide_in_right;"></rect>
+  <rect x="5" y="3" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 1718ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="6" y="3" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 805ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="7" y="3" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 1461ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="8" y="3" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 884ms; animation-name: jsr_logo_square_slide_in_down;"></rect>
+  <rect x="9" y="3" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 1222ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="10" y="3" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1545ms; animation-name: jsr_logo_square_slide_in_right;"></rect>
+  <rect x="11" y="3" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 1142ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="12" y="3" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1019ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="0" y="4" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1505ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="1" y="4" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 664ms; animation-name: jsr_logo_square_slide_in_right;"></rect>
+  <rect x="2" y="4" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 923ms; animation-name: jsr_logo_square_slide_in_right;"></rect>
+  <rect x="3" y="4" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 815ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="4" y="4" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 910ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="5" y="4" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1260ms; animation-name: jsr_logo_square_slide_in_down;"></rect>
+  <rect x="6" y="4" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1384ms; animation-name: jsr_logo_square_slide_in_down;"></rect>
+  <rect x="7" y="4" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 1680ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="8" y="4" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1306ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="9" y="4" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 1068ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="10" y="4" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1947ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="11" y="4" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 653ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="12" y="4" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1217ms; animation-name: jsr_logo_square_slide_in_down;"></rect>
+  <rect x="0" y="5" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1452ms; animation-name: jsr_logo_square_slide_in_down;"></rect>
+  <rect x="1" y="5" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1707ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="2" y="5" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1595ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="3" y="5" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1325ms; animation-name: jsr_logo_square_slide_in_right;"></rect>
+  <rect x="4" y="5" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1691ms; animation-name: jsr_logo_square_slide_in_right;"></rect>
+  <rect x="5" y="5" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 1070ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="6" y="5" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 1998ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="7" y="5" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 962ms; animation-name: jsr_logo_square_slide_in_down;"></rect>
+  <rect x="8" y="5" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 882ms; animation-name: jsr_logo_square_slide_in_down;"></rect>
+  <rect x="9" y="5" width="1" height="1" fill="#f7df1e"
+    style="animation-duration: 1225ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="10" y="5" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1422ms; animation-name: jsr_logo_square_slide_in_right;"></rect>
+  <rect x="4" y="6" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1184ms; animation-name: jsr_logo_square_slide_in_down;"></rect>
+  <rect x="5" y="6" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1971ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="6" y="6" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1372ms; animation-name: jsr_logo_square_slide_in_left;"></rect>
+  <rect x="7" y="6" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1237ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="8" y="6" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1190ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="9" y="6" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 1539ms; animation-name: jsr_logo_square_slide_in_up;"></rect>
+  <rect x="10" y="6" width="1" height="1" fill="#ebf6ff"
+    style="animation-duration: 838ms; animation-name: jsr_logo_square_slide_in_down;"></rect>
+</svg>
\ No newline at end of file
diff --git a/frontend/static/logo-light-square.svg b/frontend/static/logo-light-square.svg
new file mode 100644
index 000000000..56b7676ce
--- /dev/null
+++ b/frontend/static/logo-light-square.svg
@@ -0,0 +1,8 @@
+<svg width="100%" height="100%" viewBox="0 -3 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0,2h2v-2h7v1h4v4h-2v2h-7v-1h-4" fill="#ebf6ff" />
+  <g fill="#f7df1e" >
+    <path d="M1,3h1v1h1v-3h1v4h-3" />
+    <path d="M5,1h3v1h-2v1h2v3h-3v-1h2v-1h-2" />
+    <path d="M9,2h3v2h-1v-1h-1v3h-1" />
+  </g>
+</svg>
diff --git a/frontend/static/logo-light.svg b/frontend/static/logo-light.svg
new file mode 100644
index 000000000..186911c3b
--- /dev/null
+++ b/frontend/static/logo-light.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 7">
+  <path fill="#ebf6ff" d="M0 6h4v1h7V5h2V1H9V0H2v2H0" />
+  <path
+    fill="#f7df1e"
+    d="M4 5V1H3v3H2V3H1v2h6V4H5V1h3v1h4v2h-1V3h-1v3H9V2H6v1h2v3H5V5" />
+</svg>