diff --git a/src/components/WindowListButton.js b/src/components/WindowListButton.js
index 2f5b1384f2..fbd80d28b5 100644
--- a/src/components/WindowListButton.js
+++ b/src/components/WindowListButton.js
@@ -47,7 +47,6 @@ export class WindowListButton extends Component {
           aria-label={t('listAllOpenWindows')}
           aria-owns={windowListAnchor ? 'window-list' : null}
           sx={{
-            margin: 1,
             ...(windowListAnchor && {
               backgroundColor: 'action.selected',
             }),
diff --git a/src/components/WorkspaceControlPanel.js b/src/components/WorkspaceControlPanel.js
index efbd032d6b..7f8095e647 100644
--- a/src/components/WorkspaceControlPanel.js
+++ b/src/components/WorkspaceControlPanel.js
@@ -13,6 +13,9 @@ const StyledWorkspaceButtons = styled('div')(({ theme }) => ({
   [theme.breakpoints.up('sm')]: {
     display: 'flex',
     flexDirection: 'column',
+    gap: theme.spacing(2),
+    marginBottom: theme.spacing(1),
+    marginTop: theme.spacing(1),
   },
 }));
 
diff --git a/src/components/WorkspaceControlPanelButtons.js b/src/components/WorkspaceControlPanelButtons.js
index 0b9655e1b1..34cbf840ea 100644
--- a/src/components/WorkspaceControlPanelButtons.js
+++ b/src/components/WorkspaceControlPanelButtons.js
@@ -1,14 +1,10 @@
 import { Component } from 'react';
-import { styled } from '@mui/material/styles';
 import FullScreenButton from '../containers/FullScreenButton';
 import WorkspaceMenuButton from '../containers/WorkspaceMenuButton';
 import WorkspaceOptionsButton from '../containers/WorkspaceOptionsButton';
 import WindowListButton from '../containers/WindowListButton';
 import { PluginHook } from './PluginHook';
 
-const StyledFullScreenButton = styled(FullScreenButton)({
-});
-
 /**
  *
  */
@@ -24,7 +20,7 @@ export class WorkspaceControlPanelButtons extends Component {
         <WindowListButton />
         <WorkspaceMenuButton />
         <WorkspaceOptionsButton />
-        <StyledFullScreenButton sx={{ margin: 1 }} />
+        <FullScreenButton />
         <PluginHook {...this.props} />
       </>
     );
diff --git a/src/components/WorkspaceMenuButton.js b/src/components/WorkspaceMenuButton.js
index 45f4f00e42..c124e7ca75 100644
--- a/src/components/WorkspaceMenuButton.js
+++ b/src/components/WorkspaceMenuButton.js
@@ -58,7 +58,6 @@ export class WorkspaceMenuButton extends Component {
           aria-label={t('workspaceMenu')}
           aria-owns={open ? 'workspace-menu' : undefined}
           sx={{
-            margin: 1,
             ...(open && {
               backgroundColor: 'action.selected',
             }),
diff --git a/src/components/WorkspaceOptionsButton.js b/src/components/WorkspaceOptionsButton.js
index cbf40bf54f..4226700bac 100644
--- a/src/components/WorkspaceOptionsButton.js
+++ b/src/components/WorkspaceOptionsButton.js
@@ -5,9 +5,6 @@ import MoreHorizontalIcon from '@mui/icons-material/MoreHorizSharp';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 import WorkspaceOptionsMenu from '../containers/WorkspaceOptionsMenu';
 
-const StyledMiradorMenuButton = styled(MiradorMenuButton)({
-});
-
 /**
  * WorkspaceOptionsButton ~
 */
@@ -54,18 +51,17 @@ export class WorkspaceOptionsButton extends Component {
 
     return (
       <>
-        <StyledMiradorMenuButton
+        <MiradorMenuButton
           aria-label={t('workspaceOptions')}
           onClick={this.handleMenuClick}
           sx={{
-            margin: 1,
             ...(open && {
               backgroundColor: 'action.selected',
             }),
           }}
         >
           <MoreHorizontalIcon />
-        </StyledMiradorMenuButton>
+        </MiradorMenuButton>
         <WorkspaceOptionsMenu
           anchorEl={anchorEl}
           handleClose={this.handleMenuClose}