diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index 4f86c9f202..9cfffb822c 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -43,6 +43,7 @@ import {
   getExternalConfig,
 } from "../external_app/external_config";
 import { actionHandler } from "../panels/lovelace/common/directives/action-handler-directive";
+import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant, PanelInfo } from "../types";
 import "./ha-icon";
 import "./ha-menu-button";
@@ -249,6 +250,7 @@ class HaSidebar extends LitElement {
       </div>
       <paper-listbox
         attr-for-selected="data-panel"
+        class="ha-scrollbar"
         .selected=${hass.panelUrl}
         @focusin=${this._listboxFocusIn}
         @focusout=${this._listboxFocusOut}
@@ -677,294 +679,283 @@ class HaSidebar extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
-    return css`
-      :host {
-        height: 100%;
-        display: block;
-        overflow: hidden;
-        -ms-user-select: none;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        border-right: 1px solid var(--divider-color);
-        background-color: var(--sidebar-background-color);
-        width: 64px;
-      }
-      :host([expanded]) {
-        width: calc(256px + env(safe-area-inset-left));
-      }
-      :host([rtl]) {
-        border-right: 0;
-        border-left: 1px solid var(--divider-color);
-      }
-      .menu {
-        box-sizing: border-box;
-        height: 65px;
-        display: flex;
-        padding: 0 8.5px;
-        border-bottom: 1px solid transparent;
-        white-space: nowrap;
-        font-weight: 400;
-        color: var(--primary-text-color);
-        border-bottom: 1px solid var(--divider-color);
-        background-color: var(--primary-background-color);
-        font-size: 20px;
-        align-items: center;
-        padding-left: calc(8.5px + env(safe-area-inset-left));
-      }
-      :host([rtl]) .menu {
-        padding-left: 8.5px;
-        padding-right: calc(8.5px + env(safe-area-inset-right));
-      }
-      :host([expanded]) .menu {
-        width: calc(256px + env(safe-area-inset-left));
-      }
-      :host([rtl][expanded]) .menu {
-        width: calc(256px + env(safe-area-inset-right));
-      }
-      .menu mwc-icon-button {
-        color: var(--sidebar-icon-color);
-      }
-      :host([expanded]) .menu mwc-icon-button {
-        margin-right: 23px;
-      }
-      :host([expanded][rtl]) .menu mwc-icon-button {
-        margin-right: 0px;
-        margin-left: 23px;
-      }
+  static get styles(): CSSResult[] {
+    return [
+      haStyleScrollbar,
+      css`
+        :host {
+          height: 100%;
+          display: block;
+          overflow: hidden;
+          -ms-user-select: none;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          border-right: 1px solid var(--divider-color);
+          background-color: var(--sidebar-background-color);
+          width: 64px;
+        }
+        :host([expanded]) {
+          width: calc(256px + env(safe-area-inset-left));
+        }
+        :host([rtl]) {
+          border-right: 0;
+          border-left: 1px solid var(--divider-color);
+        }
+        .menu {
+          box-sizing: border-box;
+          height: 65px;
+          display: flex;
+          padding: 0 8.5px;
+          border-bottom: 1px solid transparent;
+          white-space: nowrap;
+          font-weight: 400;
+          color: var(--primary-text-color);
+          border-bottom: 1px solid var(--divider-color);
+          background-color: var(--primary-background-color);
+          font-size: 20px;
+          align-items: center;
+          padding-left: calc(8.5px + env(safe-area-inset-left));
+        }
+        :host([rtl]) .menu {
+          padding-left: 8.5px;
+          padding-right: calc(8.5px + env(safe-area-inset-right));
+        }
+        :host([expanded]) .menu {
+          width: calc(256px + env(safe-area-inset-left));
+        }
+        :host([rtl][expanded]) .menu {
+          width: calc(256px + env(safe-area-inset-right));
+        }
+        .menu mwc-icon-button {
+          color: var(--sidebar-icon-color);
+        }
+        :host([expanded]) .menu mwc-icon-button {
+          margin-right: 23px;
+        }
+        :host([expanded][rtl]) .menu mwc-icon-button {
+          margin-right: 0px;
+          margin-left: 23px;
+        }
 
-      .title {
-        width: 100%;
-        display: none;
-      }
-      :host([expanded]) .title {
-        display: initial;
-      }
-      .title mwc-button {
-        width: 100%;
-      }
+        .title {
+          width: 100%;
+          display: none;
+        }
+        :host([expanded]) .title {
+          display: initial;
+        }
+        .title mwc-button {
+          width: 100%;
+        }
 
-      paper-listbox::-webkit-scrollbar {
-        width: 0.4rem;
-        height: 0.4rem;
-      }
+        paper-listbox {
+          padding: 4px 0;
+          display: flex;
+          flex-direction: column;
+          box-sizing: border-box;
+          height: calc(100% - 196px - env(safe-area-inset-bottom));
+          overflow-x: hidden;
+          background: none;
+          margin-left: env(safe-area-inset-left);
+        }
 
-      paper-listbox::-webkit-scrollbar-thumb {
-        -webkit-border-radius: 4px;
-        border-radius: 4px;
-        background: var(--scrollbar-thumb-color);
-      }
+        :host([rtl]) paper-listbox {
+          margin-left: initial;
+          margin-right: env(safe-area-inset-right);
+        }
 
-      paper-listbox {
-        padding: 4px 0;
-        display: flex;
-        flex-direction: column;
-        box-sizing: border-box;
-        height: calc(100% - 196px - env(safe-area-inset-bottom));
-        overflow-y: auto;
-        overflow-x: hidden;
-        scrollbar-color: var(--scrollbar-thumb-color) transparent;
-        scrollbar-width: thin;
-        background: none;
-        margin-left: env(safe-area-inset-left);
-      }
+        a {
+          text-decoration: none;
+          color: var(--sidebar-text-color);
+          font-weight: 500;
+          font-size: 14px;
+          position: relative;
+          display: block;
+          outline: 0;
+        }
 
-      :host([rtl]) paper-listbox {
-        margin-left: initial;
-        margin-right: env(safe-area-inset-right);
-      }
+        paper-icon-item {
+          box-sizing: border-box;
+          margin: 4px 8px;
+          padding-left: 12px;
+          border-radius: 4px;
+          --paper-item-min-height: 40px;
+          width: 48px;
+        }
+        :host([expanded]) paper-icon-item {
+          width: 240px;
+        }
+        :host([rtl]) paper-icon-item {
+          padding-left: auto;
+          padding-right: 12px;
+        }
 
-      a {
-        text-decoration: none;
-        color: var(--sidebar-text-color);
-        font-weight: 500;
-        font-size: 14px;
-        position: relative;
-        display: block;
-        outline: 0;
-      }
+        ha-icon[slot="item-icon"],
+        ha-svg-icon[slot="item-icon"] {
+          color: var(--sidebar-icon-color);
+        }
 
-      paper-icon-item {
-        box-sizing: border-box;
-        margin: 4px 8px;
-        padding-left: 12px;
-        border-radius: 4px;
-        --paper-item-min-height: 40px;
-        width: 48px;
-      }
-      :host([expanded]) paper-icon-item {
-        width: 240px;
-      }
-      :host([rtl]) paper-icon-item {
-        padding-left: auto;
-        padding-right: 12px;
-      }
+        .iron-selected paper-icon-item::before,
+        a:not(.iron-selected):focus::before {
+          border-radius: 4px;
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          pointer-events: none;
+          content: "";
+          transition: opacity 15ms linear;
+          will-change: opacity;
+        }
+        .iron-selected paper-icon-item::before {
+          background-color: var(--sidebar-selected-icon-color);
+          opacity: 0.12;
+        }
+        a:not(.iron-selected):focus::before {
+          background-color: currentColor;
+          opacity: var(--dark-divider-opacity);
+          margin: 4px 8px;
+        }
+        .iron-selected paper-icon-item:focus::before,
+        .iron-selected:focus paper-icon-item::before {
+          opacity: 0.2;
+        }
 
-      ha-icon[slot="item-icon"],
-      ha-svg-icon[slot="item-icon"] {
-        color: var(--sidebar-icon-color);
-      }
+        .iron-selected paper-icon-item[pressed]:before {
+          opacity: 0.37;
+        }
 
-      .iron-selected paper-icon-item::before,
-      a:not(.iron-selected):focus::before {
-        border-radius: 4px;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        pointer-events: none;
-        content: "";
-        transition: opacity 15ms linear;
-        will-change: opacity;
-      }
-      .iron-selected paper-icon-item::before {
-        background-color: var(--sidebar-selected-icon-color);
-        opacity: 0.12;
-      }
-      a:not(.iron-selected):focus::before {
-        background-color: currentColor;
-        opacity: var(--dark-divider-opacity);
-        margin: 4px 8px;
-      }
-      .iron-selected paper-icon-item:focus::before,
-      .iron-selected:focus paper-icon-item::before {
-        opacity: 0.2;
-      }
+        paper-icon-item span {
+          color: var(--sidebar-text-color);
+          font-weight: 500;
+          font-size: 14px;
+        }
 
-      .iron-selected paper-icon-item[pressed]:before {
-        opacity: 0.37;
-      }
+        a.iron-selected paper-icon-item ha-icon,
+        a.iron-selected paper-icon-item ha-svg-icon {
+          color: var(--sidebar-selected-icon-color);
+        }
 
-      paper-icon-item span {
-        color: var(--sidebar-text-color);
-        font-weight: 500;
-        font-size: 14px;
-      }
+        a.iron-selected .item-text {
+          color: var(--sidebar-selected-text-color);
+        }
 
-      a.iron-selected paper-icon-item ha-icon,
-      a.iron-selected paper-icon-item ha-svg-icon {
-        color: var(--sidebar-selected-icon-color);
-      }
+        paper-icon-item .item-text {
+          display: none;
+          max-width: calc(100% - 56px);
+        }
+        :host([expanded]) paper-icon-item .item-text {
+          display: block;
+        }
 
-      a.iron-selected .item-text {
-        color: var(--sidebar-selected-text-color);
-      }
+        .divider {
+          bottom: 112px;
+          padding: 10px 0;
+        }
+        .divider::before {
+          content: " ";
+          display: block;
+          height: 1px;
+          background-color: var(--divider-color);
+        }
+        .notifications-container {
+          display: flex;
+          margin-left: env(safe-area-inset-left);
+        }
+        :host([rtl]) .notifications-container {
+          margin-left: initial;
+          margin-right: env(safe-area-inset-right);
+        }
+        .notifications {
+          cursor: pointer;
+        }
+        .notifications .item-text {
+          flex: 1;
+        }
+        .profile {
+          margin-left: env(safe-area-inset-left);
+        }
+        :host([rtl]) .profile {
+          margin-left: initial;
+          margin-right: env(safe-area-inset-right);
+        }
+        .profile paper-icon-item {
+          padding-left: 4px;
+        }
+        :host([rtl]) .profile paper-icon-item {
+          padding-left: auto;
+          padding-right: 4px;
+        }
+        .profile .item-text {
+          margin-left: 8px;
+        }
+        :host([rtl]) .profile .item-text {
+          margin-right: 8px;
+        }
 
-      paper-icon-item .item-text {
-        display: none;
-        max-width: calc(100% - 56px);
-      }
-      :host([expanded]) paper-icon-item .item-text {
-        display: block;
-      }
+        .notification-badge {
+          min-width: 20px;
+          box-sizing: border-box;
+          border-radius: 50%;
+          font-weight: 400;
+          background-color: var(--accent-color);
+          line-height: 20px;
+          text-align: center;
+          padding: 0px 6px;
+          color: var(--text-accent-color, var(--text-primary-color));
+        }
+        ha-svg-icon + .notification-badge {
+          position: absolute;
+          bottom: 14px;
+          left: 26px;
+          font-size: 0.65em;
+        }
 
-      .divider {
-        bottom: 112px;
-        padding: 10px 0;
-      }
-      .divider::before {
-        content: " ";
-        display: block;
-        height: 1px;
-        background-color: var(--divider-color);
-      }
-      .notifications-container {
-        display: flex;
-        margin-left: env(safe-area-inset-left);
-      }
-      :host([rtl]) .notifications-container {
-        margin-left: initial;
-        margin-right: env(safe-area-inset-right);
-      }
-      .notifications {
-        cursor: pointer;
-      }
-      .notifications .item-text {
-        flex: 1;
-      }
-      .profile {
-        margin-left: env(safe-area-inset-left);
-      }
-      :host([rtl]) .profile {
-        margin-left: initial;
-        margin-right: env(safe-area-inset-right);
-      }
-      .profile paper-icon-item {
-        padding-left: 4px;
-      }
-      :host([rtl]) .profile paper-icon-item {
-        padding-left: auto;
-        padding-right: 4px;
-      }
-      .profile .item-text {
-        margin-left: 8px;
-      }
-      :host([rtl]) .profile .item-text {
-        margin-right: 8px;
-      }
+        .spacer {
+          flex: 1;
+          pointer-events: none;
+        }
 
-      .notification-badge {
-        min-width: 20px;
-        box-sizing: border-box;
-        border-radius: 50%;
-        font-weight: 400;
-        background-color: var(--accent-color);
-        line-height: 20px;
-        text-align: center;
-        padding: 0px 6px;
-        color: var(--text-accent-color, var(--text-primary-color));
-      }
-      ha-svg-icon + .notification-badge {
-        position: absolute;
-        bottom: 14px;
-        left: 26px;
-        font-size: 0.65em;
-      }
+        .subheader {
+          color: var(--sidebar-text-color);
+          font-weight: 500;
+          font-size: 14px;
+          padding: 16px;
+          white-space: nowrap;
+        }
 
-      .spacer {
-        flex: 1;
-        pointer-events: none;
-      }
+        .dev-tools {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          padding: 0 8px;
+          width: 256px;
+          box-sizing: border-box;
+        }
 
-      .subheader {
-        color: var(--sidebar-text-color);
-        font-weight: 500;
-        font-size: 14px;
-        padding: 16px;
-        white-space: nowrap;
-      }
+        .dev-tools a {
+          color: var(--sidebar-icon-color);
+        }
 
-      .dev-tools {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        padding: 0 8px;
-        width: 256px;
-        box-sizing: border-box;
-      }
+        .tooltip {
+          display: none;
+          position: absolute;
+          opacity: 0.9;
+          border-radius: 2px;
+          white-space: nowrap;
+          color: var(--sidebar-background-color);
+          background-color: var(--sidebar-text-color);
+          padding: 4px;
+          font-weight: 500;
+        }
 
-      .dev-tools a {
-        color: var(--sidebar-icon-color);
-      }
-
-      .tooltip {
-        display: none;
-        position: absolute;
-        opacity: 0.9;
-        border-radius: 2px;
-        white-space: nowrap;
-        color: var(--sidebar-background-color);
-        background-color: var(--sidebar-text-color);
-        padding: 4px;
-        font-weight: 500;
-      }
-
-      :host([rtl]) .menu mwc-icon-button {
-        -webkit-transform: scaleX(-1);
-        transform: scaleX(-1);
-      }
-    `;
+        :host([rtl]) .menu mwc-icon-button {
+          -webkit-transform: scaleX(-1);
+          transform: scaleX(-1);
+        }
+      `,
+    ];
   }
 }
 
diff --git a/src/panels/logbook/ha-logbook.ts b/src/panels/logbook/ha-logbook.ts
index 11880d5887..5bf0f92acf 100644
--- a/src/panels/logbook/ha-logbook.ts
+++ b/src/panels/logbook/ha-logbook.ts
@@ -21,6 +21,7 @@ import { computeRTL, emitRTLDirection } from "../../common/util/compute_rtl";
 import "../../components/ha-circular-progress";
 import "../../components/ha-icon";
 import { LogbookEntry } from "../../data/logbook";
+import { haStyleScrollbar } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 
 @customElement("ha-logbook")
@@ -73,7 +74,7 @@ class HaLogbook extends LitElement {
 
     return html`
       <div
-        class="container ${classMap({
+        class="container ha-scrollbar ${classMap({
           narrow: this.narrow,
           rtl: this._rtl,
           "no-name": this.noName,
@@ -184,103 +185,106 @@ class HaLogbook extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
-    return css`
-      :host {
-        display: block;
-        height: 100%;
-      }
+  static get styles(): CSSResult[] {
+    return [
+      haStyleScrollbar,
+      css`
+        :host {
+          display: block;
+          height: 100%;
+        }
 
-      .rtl {
-        direction: ltr;
-      }
+        .rtl {
+          direction: ltr;
+        }
 
-      .entry-container {
-        width: 100%;
-      }
+        .entry-container {
+          width: 100%;
+        }
 
-      .entry {
-        display: flex;
-        width: 100%;
-        line-height: 2em;
-        padding: 8px 16px;
-        box-sizing: border-box;
-        border-top: 1px solid
-          var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
-      }
+        .entry {
+          display: flex;
+          width: 100%;
+          line-height: 2em;
+          padding: 8px 16px;
+          box-sizing: border-box;
+          border-top: 1px solid
+            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
+        }
 
-      .time {
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        width: 65px;
-        flex-shrink: 0;
-        font-size: 12px;
-        color: var(--secondary-text-color);
-      }
+        .time {
+          display: flex;
+          justify-content: center;
+          flex-direction: column;
+          width: 65px;
+          flex-shrink: 0;
+          font-size: 12px;
+          color: var(--secondary-text-color);
+        }
 
-      .date {
-        margin: 8px 0;
-        padding: 0 16px;
-      }
+        .date {
+          margin: 8px 0;
+          padding: 0 16px;
+        }
 
-      .narrow .date {
-        padding: 0 8px;
-      }
+        .narrow .date {
+          padding: 0 8px;
+        }
 
-      .rtl .date {
-        direction: rtl;
-      }
+        .rtl .date {
+          direction: rtl;
+        }
 
-      .icon-message {
-        display: flex;
-        align-items: center;
-      }
+        .icon-message {
+          display: flex;
+          align-items: center;
+        }
 
-      .no-entries {
-        text-align: center;
-      }
+        .no-entries {
+          text-align: center;
+        }
 
-      ha-icon {
-        margin: 0 8px 0 16px;
-        flex-shrink: 0;
-        color: var(--primary-text-color);
-      }
+        ha-icon {
+          margin: 0 8px 0 16px;
+          flex-shrink: 0;
+          color: var(--primary-text-color);
+        }
 
-      .message {
-        color: var(--primary-text-color);
-      }
+        .message {
+          color: var(--primary-text-color);
+        }
 
-      .no-name .item-message {
-        text-transform: capitalize;
-      }
+        .no-name .item-message {
+          text-transform: capitalize;
+        }
 
-      a {
-        color: var(--primary-color);
-      }
+        a {
+          color: var(--primary-color);
+        }
 
-      .uni-virtualizer-host {
-        display: block;
-        position: relative;
-        contain: strict;
-        height: 100%;
-        overflow: auto;
-      }
+        .uni-virtualizer-host {
+          display: block;
+          position: relative;
+          contain: strict;
+          height: 100%;
+          overflow: auto;
+        }
 
-      .uni-virtualizer-host > * {
-        box-sizing: border-box;
-      }
+        .uni-virtualizer-host > * {
+          box-sizing: border-box;
+        }
 
-      .narrow .entry {
-        flex-direction: column;
-        line-height: 1.5;
-        padding: 8px;
-      }
+        .narrow .entry {
+          flex-direction: column;
+          line-height: 1.5;
+          padding: 8px;
+        }
 
-      .narrow .icon-message ha-icon {
-        margin-left: 0;
-      }
-    `;
+        .narrow .icon-message ha-icon {
+          margin-left: 0;
+        }
+      `,
+    ];
   }
 }
 
diff --git a/src/resources/styles.ts b/src/resources/styles.ts
index 8054abe475..ef04c15548 100644
--- a/src/resources/styles.ts
+++ b/src/resources/styles.ts
@@ -320,3 +320,22 @@ export const haStyleDialog = css`
     color: var(--error-color);
   }
 `;
+
+export const haStyleScrollbar = css`
+  .ha-scrollbar::-webkit-scrollbar {
+    width: 0.4rem;
+    height: 0.4rem;
+  }
+
+  .ha-scrollbar::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    background: var(--scrollbar-thumb-color);
+  }
+
+  .ha-scrollbar {
+    overflow-y: auto;
+    scrollbar-color: var(--scrollbar-thumb-color) transparent;
+    scrollbar-width: thin;
+  }
+`;