diff --git a/flow/content/css/stylesheet.css b/flow/content/css/stylesheet.css
index 376fa19..9cd1cbe 100644
--- a/flow/content/css/stylesheet.css
+++ b/flow/content/css/stylesheet.css
@@ -1,3 +1,11 @@
+:root {
+  --background: #1a1b26;
+  --background-dark: #16161e;
+  --foreground: #a9b1d6;
+  --link: #7aa2f7;
+  --link-hover: #bb9af7;
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -5,20 +13,20 @@
 }
 
 body {
-  background: #fff;
+  background: var(--background);
+  color: var(--foreground);
 }
 
 a {
   text-decoration: none;
 }
 
-a:link,
-a:visited {
-  color: #f30;
+a:link, a:visited {
+  color: var(--link);
 }
 
 a:hover {
-  color: #f90;
+  color: var(--link-hover);
 }
 
 #main {
@@ -55,19 +63,20 @@ a:hover {
 }
 
 #sidebar {
-  position: absolute;
-  top: 40px;
-  left: 20px;
+  background: var(--background-dark);
+  position: fixed;
+  top: 0px;
+  left: 0px;
   width: 200px;
-  padding: 20px 20px 0 0;
-  border-right: 1px solid #ccc;
+  height: 100%;
+  padding: 30px 20px 0 0;
+  #border-right: 1px solid #ccc;
   text-align: right;
 }
 
 #sidebar h2 {
   text-transform: uppercase;
   font-size: 13px;
-  color: #333;
   letter-spacing: 1px;
   line-height: 20px;
 }
@@ -87,9 +96,10 @@ a:hover {
   margin: 0;
   padding: 0;
   overflow: hidden;
-  background-color: #333;
+  background-color: var(--background-dark);
   position: fixed;
   top: 0;
+  left: 220px;
   width: 100%;
 }
 
diff --git a/flow/layouts/projects.html b/flow/layouts/projects.html
index aa998b7..0b6fc20 100644
--- a/flow/layouts/projects.html
+++ b/flow/layouts/projects.html
@@ -7,7 +7,7 @@
       <%= yield %>
     </div>
     <div id="sidebar">
-      <h2>Projects</h2>
+      <h2>My Projects</h2>
       <ul>
         <%= projects %>
       </ul>