diff --git a/src/App.tsx b/src/App.tsx
index 2cf3202..9dba7c3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -139,7 +139,7 @@ type props = {};
 
 const StyledApp = styled.div`
   display: grid;
-  grid-template-rows: 50px 1fr;
+  grid-template-rows: 60px 1fr;
   gap: 10px;
   height: 100%;
   max-width: 1200px;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index f91918a..0f7c0e8 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -53,12 +53,16 @@ const HeaderStyle = styled.div`
   grid-template-columns: 1fr 1fr;
   grid-row: 1;
   grid-column: 1;
-  height: 50px;
-  border-radius: 0 0 4px 4px;
-  background: #423d39;
+  height: 100%;
+  // border-radius: 0 0 4px 4px;
+  // background: #444;
+  // border: 2px solid #444;
+  border-bottom: 4px solid #444;
+  border-top: 0;
   padding: 0 10px;
   color: #fff;
   z-index: 110;
+  border: 1px solid red;
 
   div {
     display: grid;
diff --git a/src/components/MainContent.tsx b/src/components/MainContent.tsx
index b5b2767..bbd0bf2 100644
--- a/src/components/MainContent.tsx
+++ b/src/components/MainContent.tsx
@@ -80,7 +80,7 @@ const StyledMainContent = styled.div`
   min-height: 0;
   height: 100%;
   width: 100%;
-  background: #fff;
+  // background: #fff;
   border-radius: 4px;
 
   @media all and (max-width: 699px) {
diff --git a/src/components/MenuPane.tsx b/src/components/MenuPane.tsx
index f1e481d..aa2ff78 100644
--- a/src/components/MenuPane.tsx
+++ b/src/components/MenuPane.tsx
@@ -205,7 +205,8 @@ const StyledMenuPane = styled.div`
   min-height: 0;
   height: 100%;
   width: 200px;
-  background: #ede7d4;
+  // background: #ede7d4;
+  border: 1px solid pink;
 
   footer {
     display: grid;
diff --git a/src/components/NotificationPane.tsx b/src/components/NotificationPane.tsx
index 5bf6858..cdde3f5 100644
--- a/src/components/NotificationPane.tsx
+++ b/src/components/NotificationPane.tsx
@@ -83,68 +83,82 @@ const NotificationPane: FunctionComponent<props> = ({
   return (
     <StyledNotificationPane style={styleVars}>
       <StyledContent>
-        <ResourcesPane />
+        <div className="notification-pane-content">
+          {!loggedIn && <p>You are not logged in.</p>}
+        </div>
       </StyledContent>
+
       <StyledContent>
-        <MoneyPane />
+        <div className="notification-pane-content">
+          <ResourcesPane />
+        </div>
       </StyledContent>
-      <Scrollable style={{ borderRadius: '4px' }}>
-        <StyledContent>
-          {!loggedIn && <p>You are not logged in.</p>}
-          {loggedIn && error && <p>Construction sites could not be loaded.</p>}
-          {loggedIn && !hasSites && <p>Nothing is currently being built.</p>}
-          {loggedIn &&
-            hasSites &&
-            sites.map((site) => {
-              return (
-                <StyledNotification key={site.id}>
-                  <div>
-                    <MapTile
-                      tile={
-                        new Tile({
-                          position: site.tilePosition,
-                          infrastructure: site.infrastructure,
-                        })
-                      }
-                      size={50}
-                    />
-                  </div>
-                  <div>
-                    <p>
-                      <b>
-                        Construction on{' '}
-                        <NavLink
-                          end
-                          to={'/island/tiles/' + site.tilePosition}
-                          onClick={onCloseClick}
-                        >
-                          {site.infrastructure.toLocaleLowerCase()} (
-                          {site.tilePosition})
-                        </NavLink>{' '}
-                      </b>
-                    </p>
-                    <p>
-                      Level {site.tile.level} → {site.tile.level + 1}
-                    </p>
-                  </div>
-                  <div>
-                    <p>
-                      Done{' '}
-                      <TimeLeft
-                        target={site.finishedAt}
-                        onReach={() => {
-                          client.cache.evict({
-                            id: 'ConstructionSite:' + site.id,
-                          });
-                        }}
-                      />
-                    </p>
-                  </div>
-                </StyledNotification>
-              );
-            })}
-        </StyledContent>
-      </Scrollable>
+
+      <StyledContent>
+        <div className="notification-pane-content">
+          <MoneyPane />
+        </div>
+      </StyledContent>
+
+      {loggedIn && (
+        <Scrollable style={{ borderRadius: '4px' }}>
+          <StyledContent>
+            <div className="notification-pane-content">
+              {error && <p>Construction sites could not be loaded.</p>}
+              {!hasSites && <p>Nothing is currently being built.</p>}
+              {hasSites &&
+                sites.map((site) => {
+                  return (
+                    <StyledNotification key={site.id}>
+                      <div>
+                        <MapTile
+                          tile={
+                            new Tile({
+                              position: site.tilePosition,
+                              infrastructure: site.infrastructure,
+                            })
+                          }
+                          size={50}
+                        />
+                      </div>
+                      <div>
+                        <p>
+                          <b>
+                            Construction on{' '}
+                            <NavLink
+                              end
+                              to={'/island/tiles/' + site.tilePosition}
+                              onClick={onCloseClick}
+                            >
+                              {site.infrastructure.toLocaleLowerCase()} (
+                              {site.tilePosition})
+                            </NavLink>{' '}
+                          </b>
+                        </p>
+                        <p>
+                          Level {site.tile.level} → {site.tile.level + 1}
+                        </p>
+                      </div>
+                      <div>
+                        <p>
+                          Done{' '}
+                          <TimeLeft
+                            target={site.finishedAt}
+                            onReach={() => {
+                              client.cache.evict({
+                                id: 'ConstructionSite:' + site.id,
+                              });
+                            }}
+                          />
+                        </p>
+                      </div>
+                    </StyledNotification>
+                  );
+                })}
+            </div>
+          </StyledContent>
+        </Scrollable>
+      )}
     </StyledNotificationPane>
   );
 };
@@ -156,7 +170,7 @@ type props = {
 
 const StyledNotificationPane = styled.div`
   display: grid;
-  grid-template-rows: auto auto 1fr;
+  grid-template-rows: auto auto auto 1fr;
   gap: 10px;
   grid-row: 1;
   grid-column: 2;
@@ -165,6 +179,7 @@ const StyledNotificationPane = styled.div`
   height: 100%;
   width: 300px;
   z-index: 110;
+  border: 1px solid blue;
 
   @media all and (max-width: 699px) {
     display: var(--display);
@@ -222,9 +237,25 @@ const StyledNotification = styled.div`
 const StyledContent = styled.div`
   display: grid;
   grid-gap: 10px;
-  padding: 10px;
-  background: #fff;
-  border-radius: 4px;
+  // padding: 10px;
+  // background: #fff;
+  // border-radius: 4px;
+  border: 1px solid green;
+
+  .notification-pane-title {
+    background: #666;
+    padding: 8px 10px;
+    color: #fff;
+    border-radius: 4px 4px 0 0;
+
+    @media all and (min-width: 700px) and (max-width: 999px) {
+      border-radius: 0;
+    }
+  }
+
+  .notification-pane-content {
+    padding: 10px;
+  }
 `;
 
 export default NotificationPane;
diff --git a/src/index.css b/src/index.css
index f9a2a23..e2a8140 100644
--- a/src/index.css
+++ b/src/index.css
@@ -12,7 +12,8 @@ body {
 }
 
 body {
-  background: #ede7d4;
+  /* background: #ede7d4; */
+  background: #f8f8f8;
   background-size: 800px 400px;
 }