diff --git a/src/components/WindowTopBar.js b/src/components/WindowTopBar.js
index 1eb134694654b38970223baaa06f01a2ef3fb229..a36cd1dcc2ff569dd77d2705f3d9d59a08b58642 100644
--- a/src/components/WindowTopBar.js
+++ b/src/components/WindowTopBar.js
@@ -27,7 +27,7 @@ export class WindowTopBar extends Component {
     } = this.props;
     return (
       <AppBar position="relative">
-        <Toolbar disableGutters className={classNames(classes.reallyDense, ns('window-top-bar'))} variant="dense">
+        <Toolbar disableGutters className={classNames(classes.windowTopBarStyle, ns('window-top-bar'))} variant="dense">
           <IconButton
             aria-label={t('toggleWindowSideBar')}
             color="inherit"
diff --git a/src/containers/WindowTopBar.js b/src/containers/WindowTopBar.js
index 26c912aea4274dc48190d1accc24009007cb7b37..871a76678d52e30c4d6a942fbc1f88b9b9c63639 100644
--- a/src/containers/WindowTopBar.js
+++ b/src/containers/WindowTopBar.js
@@ -22,17 +22,22 @@ const mapDispatchToProps = (dispatch, { windowId }) => ({
   toggleWindowSideBar: () => dispatch(actions.toggleWindowSideBar(windowId)),
 });
 
-
-const styles = {
+/**
+ * @param theme
+ * @returns {{typographyBody: {flexGrow: number, fontSize: number|string},
+ * windowTopBarStyle: {minHeight: number, paddingLeft: number, backgroundColor: string}}}
+ */
+const styles = theme => ({
   typographyBody: {
     flexGrow: 1,
     fontSize: '1em',
   },
-  reallyDense: {
+  windowTopBarStyle: {
     minHeight: 32,
     paddingLeft: 4,
+    backgroundColor: theme.palette.primary.light,
   },
-};
+});
 
 const enhance = compose(
   withNamespaces(),