diff --git a/src/modules/Root.tsx b/src/modules/Root.tsx
index 31e661a..70d72c4 100644
--- a/src/modules/Root.tsx
+++ b/src/modules/Root.tsx
@@ -61,7 +61,7 @@ const theme = createTheme({
 
 const RootDiv = styled('div')({
   flexGrow: 1,
-  height: '100vh',
+  minHeight: '100vh',
   background: '#fafaff',
 });
 
diff --git a/src/modules/common/SimulationControl.tsx b/src/modules/common/SimulationControl.tsx
index f147e37..32fe5c2 100644
--- a/src/modules/common/SimulationControl.tsx
+++ b/src/modules/common/SimulationControl.tsx
@@ -23,7 +23,7 @@ export const SimulationControl = (): JSX.Element => {
   };
 
   return (
-    <Stack mt={2} alignItems="center" spacing={2}>
+    <Stack mt={2} mb={2} alignItems="center" spacing={2}>
       <Stack alignItems="end">
         <SpeedButton />
         <LabelledSlider
diff --git a/src/modules/main/PlayerView.tsx b/src/modules/main/PlayerView.tsx
index 2689a17..1920eff 100644
--- a/src/modules/main/PlayerView.tsx
+++ b/src/modules/main/PlayerView.tsx
@@ -18,7 +18,13 @@ const PlayerViewComponent = (): JSX.Element => {
 
   if (status === SimulationStatus.INITIAL_LOADING) {
     return (
-      <Stack width="100%" height="100%" justifyContent="center" spacing={1}>
+      <Stack
+        width="100%"
+        height="100vh"
+        p={2}
+        justifyContent="center"
+        spacing={1}
+      >
         <Stack alignItems="center">
           <Typography variant="h4">{t('LOADING_MESSAGE')}</Typography>
         </Stack>
@@ -29,8 +35,6 @@ const PlayerViewComponent = (): JSX.Element => {
 
   return (
     <Stack
-      sx={{ background: '#fafaff' }}
-      height="100%"
       direction={{ xs: 'column-reverse', md: 'row' }}
       justifyContent="center"
     >