diff --git a/packages/apps/src/SideBar/SideBar.css b/packages/apps/src/SideBar/SideBar.css
index b797e5b5f9..b487963963 100644
--- a/packages/apps/src/SideBar/SideBar.css
+++ b/packages/apps/src/SideBar/SideBar.css
@@ -228,7 +228,7 @@ a.apps--SideBar-Item-NavLink {
 }
 
 a.apps--SideBar-Item-NavLink-active {
-  background: #fafafa !important;
+  background: #fafafa;
   border-radius: 0.28571429rem 0 0 0.28571429rem;
   color: inherit;
 
diff --git a/packages/react-components/src/styles/theme.ts b/packages/react-components/src/styles/theme.ts
index 0a03b63747..efc9b69255 100644
--- a/packages/react-components/src/styles/theme.ts
+++ b/packages/react-components/src/styles/theme.ts
@@ -4,6 +4,9 @@
 
 import { css } from 'styled-components';
 
+/* background color of the main Content container */
+const colorContentBg = '#fafafa';
+
 /* default buttons, dark gray */
 const colorBtnDefault = '#666';
 
@@ -103,5 +106,14 @@ export default css`
     .ui.toggle.checkbox input:checked~label:before {
       background-color: ${colorBtnHighlight} !important;
     }
+
+    a.apps--SideBar-Item-NavLink {
+      color: ${colorBtnText};
+    }
+    a.apps--SideBar-Item-NavLink-active,
+    a.apps--SideBar-Item-NavLink-active:hover {
+      color: ${colorBtnPrimary};
+      background: ${colorContentBg};
+    }
   }
 `;