diff --git a/_includes/nav.html b/_includes/nav.html
index b9612eab..b31e1401 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -3,7 +3,8 @@
     <a class="navbar-brand" href="/">
       <picture>
         <!--<source srcset="/assets/img/layout/privacy-guides-logo-dark.svg" media="(prefers-color-scheme: dark)">-->
-        <img src="/assets/img/layout/privacy-guides-logo-light.svg" alt="Privacy Guides Logo" width="300" height="39">
+        <source srcset="/assets/img/layout/privacy-guides-logo-notext-colorbg.svg" media="(max-width: 400px)">
+        <img class="navbar-logo" src="/assets/img/layout/privacy-guides-logo-light.svg" alt="Privacy Guides Logo" height="39">
       </picture>
     </a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
diff --git a/assets/css/app.scss b/assets/css/app.scss
index 0eff63b3..815ff563 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -90,4 +90,13 @@ h1, h2, h3:not(.h5), h4 {
   box-decoration-break: clone;
 }
 
+.navbar-logo {
+  @media (max-width: 400px) {
+    width: 50px;
+  }
+  @media (min-width: 401px) {
+    width: 300px;
+  }
+}
+
 @import "custom";