diff --git a/app/elements/docs/layout.mjs b/app/elements/docs/layout.mjs
index c06be9d6..0cc88ed1 100644
--- a/app/elements/docs/layout.mjs
+++ b/app/elements/docs/layout.mjs
@@ -13,23 +13,25 @@ export default function DocsLayout({ html, state }) {
         color: var(--purple-princess);
       }
 
-      /* Scrollbars */
-      body {
-        scrollbar-color: var(--grey-greyer) transparent;
-      }
+      @media screen and (min-width: 56em) {
+        /* Scrollbars */
+        body {
+          scrollbar-color: var(--grey-greyer) transparent;
+        }
 
-      ::-webkit-scrollbar {
-        height: 8px;
-        width: 8px;
-      }
+        ::-webkit-scrollbar {
+          height: 8px;
+          width: 8px;
+        }
 
-      ::-webkit-scrollbar-track {
-        background-color: transparent;
-      }
+        ::-webkit-scrollbar-track {
+          background-color: transparent;
+        }
 
-      ::-webkit-scrollbar-thumb {
-        border-radius: 8px;
-        background-color: var(--grey-greyer);
+        ::-webkit-scrollbar-thumb {
+          border-radius: 8px;
+          background-color: var(--grey-greyer);
+        }
       }
     </style>
 
diff --git a/package-lock.json b/package-lock.json
index 714d5296..dbc8af40 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1953,7 +1953,7 @@
     },
     "node_modules/@begin/masthead": {
       "version": "0.0.1",
-      "resolved": "git+ssh://git@github.com/beginner-corp/masthead.git#e736276b295290ae7089034eb927390128b6ae9a",
+      "resolved": "git+ssh://git@github.com/beginner-corp/masthead.git#a7e34e8153287b6236e88864175cbfdeb9a4157f",
       "dependencies": {
         "@enhance/arc-plugin-enhance": "^9.0.0",
         "@enhance/styles-cribsheet": "^0.0.9"