diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 547a910290866e4bfc111ef1a204e1109668699c..96fb4b1357204befcaf106c2da92aeae9d64ecca 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -10,7 +10,7 @@ import PlayerButtonBar from "./player/PlayerButtonBar";
 function App() {
   return (
     <Container maxWidth={window.innerWidth >= 2000 ? "xl" : "lg"}>
-      <Box my={1}>
+      <Box my={0}>
         <Grid container spacing={1}>
           <Grid item xs={12}>
             <ConnectionStatusBar />
diff --git a/frontend/src/connectionstatus/ConnectionStatusBar.tsx b/frontend/src/connectionstatus/ConnectionStatusBar.tsx
index a5c2d9a4ef6b023d274b96f53f1c78934ef7527b..c74fc71d3d39fc693d89e8f271807f26e5ee5315 100644
--- a/frontend/src/connectionstatus/ConnectionStatusBar.tsx
+++ b/frontend/src/connectionstatus/ConnectionStatusBar.tsx
@@ -61,7 +61,7 @@ export function ConnectionStatusBar(props: Props) {
   return (
     <div className={classes.root}>
       <AppBar position="static" color="default">
-        <Toolbar>{TypographyHelper()}</Toolbar>
+        <Toolbar variant="dense">{TypographyHelper()}</Toolbar>
       </AppBar>
     </div>
   );
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index d5484e0ace50b2b4deafab2fcf1149a7b9cd1562..6c7ce2262b703e01ccd25c20dbb47356f616b690 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -8,7 +8,7 @@ import { createMuiTheme, MuiThemeProvider } from "@material-ui/core";
 import CssBaseline from "@material-ui/core/CssBaseline";
 
 const theme = createMuiTheme({
-  spacing: 4,
+  spacing: 8,
   palette: {
     type: "dark",
   },