diff --git a/design/about.css b/design/about.css
index a1872f8982a015f459684b21b52ebc79201f9c0e..7a49f8cccf82031cfb3079c0bfaf6bb8247f6f95 100644
--- a/design/about.css
+++ b/design/about.css
@@ -4,31 +4,69 @@ html, body {
 
 .container {
   max-width: 80em;
-  margin: auto;
+  margin: 1em auto;
 }
 
 /* Header Styles */
 
 .header {
+  padding: 1em;
   width: 100%;
+  
+  color: white;
   text-align: center;
+
+  background-image: url(cover.jpg);
+  background-size: cover;
+}
+
+.header-content img {
+  max-width: 80%;
+  max-height: 15%;
 }
 
 /* Navbar Styles */
 
 .nav {
-  width: 100%;
+  padding: 0;
+  border-radius: 4px;
+  background-color: #222;
+
   display: flex;
   justify-content: space-between;
 }
 
 .nav ul {
   list-style: none;
-  padding-left: 0;
+  padding: 0;
+  margin: 0;
 }
 
 .nav ul li {
-  display: inline-block;
+  padding: 1em;
+  margin: 0;
+
+  display: block;
+  float: left; /* Remove awful extra whitespace between ul items */
+}
+
+.nav ul li a {
+  color: white;
+  text-decoration: none;
+}
+
+/* We only want a border on all but the last element to act as a separator */
+.rightborder {
+  border-right: 1px solid white;
+}
+
+.active {
+  font-weight: bold;
+}
+
+.code {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
 /* Just in case flex is not working */
diff --git a/design/about.haml b/design/about.haml
index 8a602e0524cce760be04b147c353e258e66aacc6..916ae483ed1847d6c44688aa702ba40921c066d1 100644
--- a/design/about.haml
+++ b/design/about.haml
@@ -4,25 +4,31 @@
     %head
         %link{:rel => :stylesheet, :type => :"text/css", :href => "stylesheet.css"}
         %link{:rel => :stylesheet, :type => :"text/css", :href => "about.css"}
+        %link{href: "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", rel: "stylesheet", integrity: "sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN", crossorigin: "anonymous"}
 
     %body
         .header
             .header-content
-                %h1 SWIFT
-                %h2 About SWIFT
+                %img{:src => "logo.svg"}
+                %h1.subhead <b>S</b>PH <b>W</b>ith <b>I</b>nter-dependent <b>F</b>ine-grained <b>T</b>asking
 
         .container
-            .nav
+            .nav.mono
                 .left-nav
                     %ul
-                        %li About
-                        %li Papers
-                        %li Talks
-                        %li Contact
+                        %li.rightborder.active
+                            %a About
+                        %li.rightborder
+                            %a Papers
+                        %li.rightborder
+                            %a Talks
+                        %li
+                            %a Contact
 
                 .right-nav
                     %ul
-                        %li Code
+                        %li.btn-orange.code
+                            %a <i class="fa fa-gitlab" aria-hidden="true"></i> Code
 
             .cards
                 .card
diff --git a/design/stylesheet.css b/design/stylesheet.css
index c9d398bdea35836a60e5ea6289d95f82736400d3..eafec83502f27c956fde9df6543947dfcb28d1fc 100644
--- a/design/stylesheet.css
+++ b/design/stylesheet.css
@@ -55,4 +55,34 @@ footer > a > img, .footer > a > img {
   float:left;
   padding: 1em;
   padding-right: 0;
+}
+
+/* Font Styles */
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont,
+  'avenir next', avenir,
+  helvetica, 'helvetica neue',
+  ubuntu,
+  roboto, noto,
+  'segoe ui', arial,
+  sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: Inconsolata, monospace;
+}
+
+.mono {
+  font-family: Inconsolata, monospace;
+}
+
+.subhead {
+  font-weight: normal;
+}
+
+/* Shared navbar styles */
+
+.nav ul li a:hover {
+  font-weight: bold;
 }
\ No newline at end of file