diff --git a/app/assets/javascripts/admin/templates/site_settings.js.handlebars b/app/assets/javascripts/admin/templates/site_settings.js.handlebars
index edb28155e82..4b959af389f 100644
--- a/app/assets/javascripts/admin/templates/site_settings.js.handlebars
+++ b/app/assets/javascripts/admin/templates/site_settings.js.handlebars
@@ -10,9 +10,9 @@
   </div>
 </div>
 
-<ul class="nav nav-pills">
+<ul class="nav nav-pills site-settings-nav">
   {{#each category in controller}}
-    <li>{{#link-to 'adminSiteSettingsCategory' category.nameKey}}{{category.name}}{{/link-to}}</li>
+    <li {{bindAttr class="category.nameKey"}}>{{#link-to 'adminSiteSettingsCategory' category.nameKey class=category.nameKey}}{{category.name}}{{/link-to}}</li>
   {{/each}}
 </ul>
 
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 141e4f7eef6..cdd6d537d7e 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -143,6 +143,24 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
   }
 }
 
+.site-settings-nav {
+  li {
+    background-color: grayscale($nav-pills-background-color-hover);
+    margin-bottom: 5px;
+
+    &.required, &.basic {
+      margin-bottom: 20px; // so nothing floats underneath these ones
+    }
+
+    > a {
+      font-size: 13px;
+      &.required, &.basic {
+        font-size: 16px;
+      }
+    }
+  }
+}
+
 .settings {
   .setting {
     padding-bottom: 20px;