diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
index 5c2d73436e..75decf778a 100644
--- a/src/layouts/hass-subpage.ts
+++ b/src/layouts/hass-subpage.ts
@@ -13,6 +13,7 @@ import { computeRTL } from "../common/util/compute_rtl";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
 import { HomeAssistant } from "../types";
+import { haStyleScrollbar } from "../resources/styles";
 
 @customElement("hass-subpage")
 class HassSubpage extends LitElement {
@@ -73,7 +74,9 @@ class HassSubpage extends LitElement {
         <div class="main-title"><slot name="header">${this.header}</slot></div>
         <slot name="toolbar-icon"></slot>
       </div>
-      <div class="content" @scroll=${this._saveScrollPos}><slot></slot></div>
+      <div class="content ha-scrollbar" @scroll=${this._saveScrollPos}>
+        <slot></slot>
+      </div>
       <div id="fab">
         <slot name="fab"></slot>
       </div>
@@ -94,88 +97,91 @@ class HassSubpage extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        display: block;
-        height: 100%;
-        background-color: var(--primary-background-color);
-        overflow: hidden;
-        position: relative;
-      }
-
-      :host([narrow]) {
-        width: 100%;
-        position: fixed;
-      }
-
-      .toolbar {
-        display: flex;
-        align-items: center;
-        font-size: 20px;
-        height: var(--header-height);
-        padding: 8px 12px;
-        pointer-events: none;
-        background-color: var(--app-header-background-color);
-        font-weight: 400;
-        color: var(--app-header-text-color, white);
-        border-bottom: var(--app-header-border-bottom, none);
-        box-sizing: border-box;
-      }
-      @media (max-width: 599px) {
-        .toolbar {
-          padding: 4px;
+    return [
+      haStyleScrollbar,
+      css`
+        :host {
+          display: block;
+          height: 100%;
+          background-color: var(--primary-background-color);
+          overflow: hidden;
+          position: relative;
         }
-      }
-      .toolbar a {
-        color: var(--sidebar-text-color);
-        text-decoration: none;
-      }
 
-      ha-menu-button,
-      ha-icon-button-arrow-prev,
-      ::slotted([slot="toolbar-icon"]) {
-        pointer-events: auto;
-        color: var(--sidebar-icon-color);
-      }
+        :host([narrow]) {
+          width: 100%;
+          position: fixed;
+        }
 
-      .main-title {
-        margin: 0 0 0 24px;
-        line-height: 20px;
-        flex-grow: 1;
-      }
+        .toolbar {
+          display: flex;
+          align-items: center;
+          font-size: 20px;
+          height: var(--header-height);
+          padding: 8px 12px;
+          pointer-events: none;
+          background-color: var(--app-header-background-color);
+          font-weight: 400;
+          color: var(--app-header-text-color, white);
+          border-bottom: var(--app-header-border-bottom, none);
+          box-sizing: border-box;
+        }
+        @media (max-width: 599px) {
+          .toolbar {
+            padding: 4px;
+          }
+        }
+        .toolbar a {
+          color: var(--sidebar-text-color);
+          text-decoration: none;
+        }
 
-      .content {
-        position: relative;
-        width: 100%;
-        height: calc(100% - 1px - var(--header-height));
-        overflow-y: auto;
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
-      }
+        ha-menu-button,
+        ha-icon-button-arrow-prev,
+        ::slotted([slot="toolbar-icon"]) {
+          pointer-events: auto;
+          color: var(--sidebar-icon-color);
+        }
 
-      #fab {
-        position: absolute;
-        right: calc(16px + env(safe-area-inset-right));
-        bottom: calc(16px + env(safe-area-inset-bottom));
-        z-index: 1;
-      }
-      :host([narrow]) #fab.tabs {
-        bottom: calc(84px + env(safe-area-inset-bottom));
-      }
-      #fab[is-wide] {
-        bottom: 24px;
-        right: 24px;
-      }
-      :host([rtl]) #fab {
-        right: auto;
-        left: calc(16px + env(safe-area-inset-left));
-      }
-      :host([rtl][is-wide]) #fab {
-        bottom: 24px;
-        left: 24px;
-        right: auto;
-      }
-    `;
+        .main-title {
+          margin: 0 0 0 24px;
+          line-height: 20px;
+          flex-grow: 1;
+        }
+
+        .content {
+          position: relative;
+          width: 100%;
+          height: calc(100% - 1px - var(--header-height));
+          overflow-y: auto;
+          overflow: auto;
+          -webkit-overflow-scrolling: touch;
+        }
+
+        #fab {
+          position: absolute;
+          right: calc(16px + env(safe-area-inset-right));
+          bottom: calc(16px + env(safe-area-inset-bottom));
+          z-index: 1;
+        }
+        :host([narrow]) #fab.tabs {
+          bottom: calc(84px + env(safe-area-inset-bottom));
+        }
+        #fab[is-wide] {
+          bottom: 24px;
+          right: 24px;
+        }
+        :host([rtl]) #fab {
+          right: auto;
+          left: calc(16px + env(safe-area-inset-left));
+        }
+        :host([rtl][is-wide]) #fab {
+          bottom: 24px;
+          left: 24px;
+          right: auto;
+        }
+      `,
+    ];
   }
 }