diff --git a/docs/reference/utility-apis/AppThemeApi.md b/docs/reference/utility-apis/AppThemeApi.md
index 2c57199fba..eda1bafef0 100644
--- a/docs/reference/utility-apis/AppThemeApi.md
+++ b/docs/reference/utility-apis/AppThemeApi.md
@@ -178,7 +178,10 @@ type PaletteAdditions = {
   linkHover: string;
   link: string;
   gold: string;
-  sidebar: string;
+  navigation: {
+    background: string;
+    indicator: string;
+  };
   tabbar: {
     indicator: string;
   };
diff --git a/packages/core/src/layout/Sidebar/Bar.tsx b/packages/core/src/layout/Sidebar/Bar.tsx
index 4d81c398b7..6321aeb33b 100644
--- a/packages/core/src/layout/Sidebar/Bar.tsx
+++ b/packages/core/src/layout/Sidebar/Bar.tsx
@@ -37,7 +37,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
     top: 0,
     bottom: 0,
     padding: 0,
-    background: theme.palette.sidebar,
+    background: theme.palette.navigation.background,
     overflowX: 'hidden',
     width: sidebarConfig.drawerWidthClosed,
     transition: theme.transitions.create('width', {
diff --git a/packages/core/src/layout/Sidebar/Items.tsx b/packages/core/src/layout/Sidebar/Items.tsx
index da0b44d273..5a476e2209 100644
--- a/packages/core/src/layout/Sidebar/Items.tsx
+++ b/packages/core/src/layout/Sidebar/Items.tsx
@@ -18,10 +18,10 @@ import {
   makeStyles,
   styled,
   TextField,
-  Theme,
   Typography,
   Badge,
 } from '@material-ui/core';
+import { BackstageTheme } from '@backstage/theme';
 import { IconComponent } from '@backstage/core-api';
 import SearchIcon from '@material-ui/icons/Search';
 import clsx from 'clsx';
@@ -29,7 +29,7 @@ import React, { FC, useContext, useState, KeyboardEventHandler } from 'react';
 import { NavLink } from 'react-router-dom';
 import { sidebarConfig, SidebarContext } from './config';
 
-const useStyles = makeStyles<Theme>(theme => {
+const useStyles = makeStyles<BackstageTheme>(theme => {
   const {
     selectedIndicatorWidth,
     drawerWidthClosed,
@@ -95,7 +95,7 @@ const useStyles = makeStyles<Theme>(theme => {
     },
     selected: {
       '&$root': {
-        borderLeft: `solid ${selectedIndicatorWidth}px #9BF0E1`,
+        borderLeft: `solid ${selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`,
         color: '#ffffff',
       },
       '&$closed': {
diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts
index e5ebd419a3..eddd6a4ede 100644
--- a/packages/theme/src/themes.ts
+++ b/packages/theme/src/themes.ts
@@ -59,7 +59,10 @@ export const lightTheme = createTheme({
     linkHover: '#2196F3',
     link: '#0A6EBE',
     gold: yellow.A700,
-    sidebar: '#171717',
+    navigation: {
+      background: '#171717',
+      indicator: '#9BF0E1',
+    },
     pinSidebarButton: {
       icon: '#181818',
       background: '#BDBDBD',
@@ -112,7 +115,10 @@ export const darkTheme = createTheme({
     linkHover: '#2196F3',
     link: '#0A6EBE',
     gold: yellow.A700,
-    sidebar: '#424242',
+    navigation: {
+      background: '#424242',
+      indicator: '#9BF0E1',
+    },
     pinSidebarButton: {
       icon: '#404040',
       background: '#BDBDBD',
diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts
index 557af23cd0..66bfb4c6fd 100644
--- a/packages/theme/src/types.ts
+++ b/packages/theme/src/types.ts
@@ -43,7 +43,10 @@ type PaletteAdditions = {
   linkHover: string;
   link: string;
   gold: string;
-  sidebar: string;
+  navigation: {
+    background: string;
+    indicator: string;
+  };
   tabbar: {
     indicator: string;
   };