diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index ad6682cd37..bad87cdb23 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -520,10 +520,13 @@ class HaSidebar extends LitElement {
       }
 
       a {
+        text-decoration: none;
         color: var(--sidebar-text-color);
         font-weight: 500;
         font-size: 14px;
-        text-decoration: none;
+        position: relative;
+        display: block;
+        outline: 0;
       }
 
       paper-icon-item {
@@ -546,7 +549,8 @@ class HaSidebar extends LitElement {
         color: var(--sidebar-icon-color);
       }
 
-      .iron-selected paper-icon-item:before {
+      .iron-selected paper-icon-item::before,
+      a:not(.iron-selected):focus::before {
         border-radius: 4px;
         position: absolute;
         top: 0;
@@ -555,11 +559,22 @@ class HaSidebar extends LitElement {
         left: 0;
         pointer-events: none;
         content: "";
-        background-color: var(--sidebar-selected-icon-color);
-        opacity: 0.12;
         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;
+      }
 
       .iron-selected paper-icon-item[pressed]:before {
         opacity: 0.37;
diff --git a/src/panels/config/dashboard/ha-config-navigation.ts b/src/panels/config/dashboard/ha-config-navigation.ts
index efc4fad6ec..331b5a42f8 100644
--- a/src/panels/config/dashboard/ha-config-navigation.ts
+++ b/src/panels/config/dashboard/ha-config-navigation.ts
@@ -88,9 +88,12 @@ class HaConfigNavigation extends LitElement {
       a {
         text-decoration: none;
         color: var(--primary-text-color);
+        position: relative;
+        display: block;
+        outline: 0;
       }
-      .iron-selected paper-item:before {
-        border-radius: 4px;
+      .iron-selected paper-item::before,
+      a:not(.iron-selected):focus::before {
         position: absolute;
         top: 0;
         right: 0;
@@ -98,13 +101,22 @@ class HaConfigNavigation extends LitElement {
         left: 0;
         pointer-events: none;
         content: "";
-        background-color: var(--sidebar-selected-icon-color);
-        opacity: 0.12;
         transition: opacity 15ms linear;
         will-change: opacity;
       }
-
-      .iron-selected paper-item[pressed]:before {
+      .iron-selected paper-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);
+      }
+      .iron-selected paper-item:focus::before,
+      .iron-selected:focus paper-item::before {
+        opacity: 0.2;
+      }
+      .iron-selected paper-item[pressed]::before {
         opacity: 0.37;
       }
       paper-listbox {
diff --git a/src/panels/config/ha-panel-config.ts b/src/panels/config/ha-panel-config.ts
index 377b5f406f..092287e9a9 100644
--- a/src/panels/config/ha-panel-config.ts
+++ b/src/panels/config/ha-panel-config.ts
@@ -109,15 +109,15 @@ class HaPanelConfig extends LitElement {
                     { page: "cloud", info: this._cloudStatus },
                     { page: "integrations", core: true },
                     { page: "devices", core: true },
+                    { page: "entities", core: true },
                     { page: "automation" },
                     { page: "script" },
                     { page: "scene" },
                     { page: "core", core: true },
-                    { page: "server_control", core: true },
-                    { page: "entities", core: true },
                     { page: "areas", core: true },
                     { page: "person" },
                     { page: "users", core: true },
+                    { page: "server_control", core: true },
                     { page: "zha" },
                     { page: "zwave" },
                     { page: "customize", core: true, advanced: true },