diff --git a/src/app/App.tsx b/src/app/App.tsx
index 4b21157d..cb652143 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -126,7 +126,7 @@ const App: React.FunctionComponent = (_props) => {
     const [isDragging, setIsDragging] = useState(false);
 
     return (
-        <div className="pb-app">
+        <div className="pb-app h-100 w-100 p-absolute">
             <Toolbar />
             <SplitterLayout
                 customClassName={`pb-app-body ${
diff --git a/src/app/app.scss b/src/app/app.scss
index f0a65643..2303acae 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -5,6 +5,14 @@
 
 @import '../variables.scss';
 
+.pb-app {
+    background-color: $pt-app-background-color;
+}
+
+.#{$ns}-dark .pb-app {
+    background-color: $pt-dark-app-background-color;
+}
+
 .pb-app-body {
     // height makes everything fit without scrolling
     height: calc(
diff --git a/src/toolbar/toolbar.scss b/src/toolbar/toolbar.scss
index 7f2ae0e4..160fa551 100644
--- a/src/toolbar/toolbar.scss
+++ b/src/toolbar/toolbar.scss
@@ -5,13 +5,8 @@
 
 @import '../variables.scss';
 
-.#{$ns}-dark .pb-toolbar {
-    background-color: $pt-dark-app-background-color;
-}
-
 .pb-toolbar {
     height: $pb-toolbar-height;
-    background-color: $pt-app-background-color;
     padding: 0 $pt-grid-size * 1.5;
     position: relative;
     width: 100%;