diff --git a/layouts/_default/about.html b/layouts/_default/about.html
index aeeb7c8..3dd6363 100644
--- a/layouts/_default/about.html
+++ b/layouts/_default/about.html
@@ -6,7 +6,7 @@
     <div class="row">
       {{ range $i, $e := sort .Site.Data.social.accounts "name" }}
         <div class="col-sm-3 mt-3">
-          <div class="card text-center">
+          <div class="card about-card text-center">
             <a href="{{ $e.link }}" class="colour-invert">
               <h1 class="display-3"><i class="{{ $e.icon }}"></i></h1>
             </a>
diff --git a/layouts/_default/spotify.html b/layouts/_default/spotify.html
index e7adce8..d1d947e 100644
--- a/layouts/_default/spotify.html
+++ b/layouts/_default/spotify.html
@@ -15,7 +15,7 @@
         </a>
       </h3>
 
-      <table class="table table-hover table-striped">
+      <table class="table table-hover table-striped table-dark">
         <thead>
         <tr>
           <th scope="row"></th>
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 94df5d1..470ad7b 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-sm navbar-dark bg-black fixed-top">
+<nav class="navbar navbar-expand-sm navbar-dark fixed-top">
   <a class="navbar-brand" href='{{ relURL "" }}'><code>/home/{{ lower .Site.Title }}</code></a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
diff --git a/static/src/scss/style.scss b/static/src/scss/style.scss
index 0b84dc7..030f206 100644
--- a/static/src/scss/style.scss
+++ b/static/src/scss/style.scss
@@ -3,8 +3,12 @@
 @import "node_modules/bootstrap/scss/bootstrap";
 
 
+$body-color: $gray-300;
+
+
 html, body {
   height: 100%;
+  color: $body-color;
 }
 
 a {
@@ -12,11 +16,11 @@ a {
   color: $primary;
 
   &:hover {
-    color: $black;
+    color: $body-color;
   }
 
   &.colour-invert {
-    color: $black;
+    color: $body-color;
 
     &:hover {
       color: $primary;
@@ -95,9 +99,14 @@ table td {
   vertical-align: middle;
 }
 
+.table-dark {
+  color: $body-color;
+}
+
 .navbar {
   padding-top: 0;
   padding-bottom: 0;
+  background-color: $black;
 
   .navbar-brand {
     font-size: $font-size-base;
@@ -114,11 +123,6 @@ table td {
   }
 }
 
-.bg-black {
-  background-color: $black;
-}
-
-
 #index-header {
   width: 100%;
   height: calc(100% - 110px);
@@ -242,7 +246,7 @@ p, li, h1, h2, h3, h4, h5, h6 {
   font-size: $spacer * 0.9;
 
   .breadcrumb-item + .breadcrumb-item::before {
-    color: $black;
+    color: $body-color;
   }
 }
 
@@ -266,3 +270,8 @@ a.no-color-change {
     color: inherit;
   }
 }
+
+.about-card {
+  background-color: $body-bg;
+  border: 1px solid $body-color;
+}
diff --git a/static/src/scss/variables.scss b/static/src/scss/variables.scss
index 13098c5..23a45f4 100644
--- a/static/src/scss/variables.scss
+++ b/static/src/scss/variables.scss
@@ -1 +1,2 @@
 $primary: #E85537;
+$body-bg: #17181C;