diff --git a/src/components/WindowSideBarButtons.js b/src/components/WindowSideBarButtons.js
index 950986c7ffccff22aae40cf51b9da4990a8ff71b..e393122f34c3d8c2f4a28c6da132735eab099958 100644
--- a/src/components/WindowSideBarButtons.js
+++ b/src/components/WindowSideBarButtons.js
@@ -55,6 +55,7 @@ export class WindowSideBarButtons extends Component {
               <InfoIcon />
             </Tooltip>
           )}
+          TouchRippleProps={{ classes: { child: classes.tabRipple } }}
           value="info"
         />
         <Tab
@@ -67,6 +68,7 @@ export class WindowSideBarButtons extends Component {
               <CanvasIndexIcon />
             </Tooltip>
           )}
+          TouchRippleProps={{ classes: { child: classes.tabRipple } }}
           value="canvas_navigation"
         />
         <Tab
@@ -81,6 +83,7 @@ export class WindowSideBarButtons extends Component {
               </Badge>
             </Tooltip>
           )}
+          TouchRippleProps={{ classes: { child: classes.tabRipple } }}
           value="annotations"
         />
       </Tabs>
diff --git a/src/containers/WindowSideBarButtons.js b/src/containers/WindowSideBarButtons.js
index f4fc77482ea64b600e61764ebf104c86f3e86f06..cb29d9060fb2b032473c67b57fc9f3de94190982 100644
--- a/src/containers/WindowSideBarButtons.js
+++ b/src/containers/WindowSideBarButtons.js
@@ -37,23 +37,26 @@ const mapStateToProps = (state, { windowId }) => ({
 /** */
 const style = theme => ({
   tab: {
+    '&:active': {
+      backgroundColor: theme.palette.action.active,
+    },
     '&:hover': {
       '@media (hover: none)': {
         backgroundColor: 'transparent',
       },
-      backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.palette.action.hover,
       textDecoration: 'none',
       // Reset on touch devices, it doesn't add specificity
     },
-    borderRight: '4px solid transparent',
+
+    borderRight: '2px solid transparent',
     minWidth: 'auto',
   },
+  tabRipple: {
+    backgroundColor: theme.palette.action.active,
+  },
   tabSelected: {
-    '&:hover': {
-      backgroundColor: theme.palette.secondary.light,
-    },
-    backgroundColor: theme.palette.secondary.light,
-    borderRight: `4px solid ${theme.palette.secondary.main}`,
+    borderRight: `2px solid ${theme.palette.secondary.main}`,
   },
   tabsFlexContainer: {
     flexDirection: 'column',