diff --git a/layouts/partials/content.html b/layouts/partials/content.html
index eb9fe51..e0f38e2 100644
--- a/layouts/partials/content.html
+++ b/layouts/partials/content.html
@@ -16,7 +16,7 @@
 </p>
 <hr />
 <div class="content mt-3">
-  <div class="float-md-right ml-4">
+  <div class="float-lg-right ml-3 bg-light p-3">
     {{ .TableOfContents }}
   </div>
   {{ .Content }}
diff --git a/static/src/scss/style.scss b/static/src/scss/style.scss
index 535c8f8..a9e839c 100644
--- a/static/src/scss/style.scss
+++ b/static/src/scss/style.scss
@@ -1,13 +1,14 @@
 $fa-font-path: "../fonts";
 @import "node_modules/font-awesome/scss/font-awesome";
 
+@import "variables";
+
 @import "highlight";  // Generated by Hugo
 
 @import "node_modules/lightgallery/src/sass/lightgallery";
 @import "node_modules/bootstrap/scss/bootstrap";
 @import "node_modules/plyr/src/scss/plyr";
 
-$primary: #E85537;
 
 html, body {
   height: 100%;
@@ -152,6 +153,7 @@ footer {
 #TableOfContents {
   & > ul {
     padding-left: $spacer;
+    margin-bottom: 0;
   }
 }
 
diff --git a/static/src/scss/variables.scss b/static/src/scss/variables.scss
new file mode 100644
index 0000000..13098c5
--- /dev/null
+++ b/static/src/scss/variables.scss
@@ -0,0 +1 @@
+$primary: #E85537;