diff --git a/app/assets/stylesheets/wigu/active_admin_theme.scss b/app/assets/stylesheets/wigu/active_admin_theme.scss
index dbaf73a..30da0ab 100644
--- a/app/assets/stylesheets/wigu/active_admin_theme.scss
+++ b/app/assets/stylesheets/wigu/active_admin_theme.scss
@@ -5,6 +5,29 @@ $skinMainSecondColor: #5ea3d3!default;
 $skinBorderRadius: 4px!default;
 $skinBorderWindowColor: #e6e9ee!default;
 $skinTablePadding: 10px!default;
+
+// Header menu colors. Each defaults to the previous value, so projects that do
+// not set these compile to identical CSS (and a project that overrides
+// $skinMainSecondColor still gets the menu following that accent).
+$skinMenuPillColor: $skinMainSecondColor!default;   // top-level current/hover pill
+$skinMenuPanelColor: $skinMainSecondColor!default;  // dropdown panel bg + hover "bridge" border
+$skinMenuItemHoverColor: transparent!default;       // dropdown item hover/current bg (was: none)
+$skinMenuTextColor: #ffffff!default;                // dropdown item text (was: inherited #fff)
+
+// Header / menu sizing. Defaults reproduce (or keep the same total as) the
+// previous hard-coded values, so non-configuring projects are unchanged.
+$skinMenuFontSize: 1em!default;                     // header menu text size
+$skinMenuItemPaddingY: 5px!default;                 // dropdown item top/bottom padding (was ~6px/4px)
+$skinMenuItemLineHeight: 1.5!default;               // dropdown item line-height
+$skinHeaderPaddingY: 7px!default;                   // header top/bottom padding (was 5px top / 9px bottom)
+$skinHeaderLogoMaxHeight: none!default;             // cap the site_title logo image height
+
+// Title bar
+$skinTitleBarColor: lighten($skinMainFirstColor, 8%)!default;
+$skinTitleBarBorderColor: $skinMainSecondColor!default;
+$skinTitleBarBorderWidth: 3px!default;
+$skinTitleBarButtonPaddingY: 10px!default;          // action button vertical padding
+$skinTitleBarButtonPaddingX: 20px!default;          // action button horizontal padding
 //HTML----------------------------------------------------------------------------------------------------------------//
 
 html {
@@ -58,13 +81,20 @@ body.active_admin {
   #header {
     background-color: $skinMainFirstColor;
     border-bottom: 1px solid lighten( $skinMainFirstColor, 15% )!important;
-    padding-bottom: 9px;
+    padding-top: $skinHeaderPaddingY;
+    padding-bottom: $skinHeaderPaddingY;
     border: none;
     text-shadow: none;
     background-image: none;
     h1.site_title {
       color: $skinMainSecondColor;
       font-size: 16px;
+      img {
+        max-height: $skinHeaderLogoMaxHeight;
+      }
+    }
+    ul.tabs > li {
+      font-size: $skinMenuFontSize;
     }
     a, a:link {
       color: #ffffff;
@@ -75,7 +105,7 @@ body.active_admin {
       padding: 6px 10px 6px 10px;
     }
     ul.tabs > li.current > a, ul.tabs > li:hover > a {
-      background-color: $skinMainSecondColor;
+      background-color: $skinMenuPillColor;
     }
     ul.tabs {
       li.has_nested {
@@ -83,10 +113,23 @@ body.active_admin {
           padding-right: 20px;
         }
         ul {
-          background-color: $skinMainSecondColor;
+          background-color: $skinMenuPanelColor;
           @include rounded($skinBorderRadius);
+          // Size to content instead of the base's max-width: calc(100% + 20px),
+          // which truncates long labels onto a second line.
+          width: auto;
+          max-width: none;
           li > a {
             padding-left: 15px;
+            color: $skinMenuTextColor;
+            white-space: nowrap;
+            line-height: $skinMenuItemLineHeight;
+            padding-top: $skinMenuItemPaddingY;
+            padding-bottom: $skinMenuItemPaddingY;
+          }
+          li:hover > a, li.current > a {
+            background-color: $skinMenuItemHoverColor;
+            color: #ffffff;
           }
           li.current > a::before, li:hover > a::before {
             content: '';
@@ -101,9 +144,14 @@ body.active_admin {
           }
         }
       }
-      li.has_nested:hover {
-        a {
-          border-bottom: 7px solid $skinMainSecondColor;
+      // `> li.has_nested` + `> a` so the 7px "bridge" border is added only to a
+      // hovered TOP-LEVEL menu item (bridging its pill to the dropdown). Without
+      // the `>`, nested has_nested items (e.g. System > Components) also got the
+      // border, which pushed the next dropdown item down when their submenu
+      // opened. Colored to match the panel so it blends.
+      > li.has_nested:hover {
+        > a {
+          border-bottom: 7px solid $skinMenuPanelColor;
         }
       }
     }
@@ -112,9 +160,9 @@ body.active_admin {
     background-image: none;
     border: none;
     box-shadow: none;
-    background-color: lighten( $skinMainFirstColor, 8% );
+    background-color: $skinTitleBarColor;
     border: none;
-    border-bottom: 3px solid $skinMainSecondColor;
+    border-bottom: $skinTitleBarBorderWidth solid $skinTitleBarBorderColor;
     #titlebar_left {
       span.breadcrumb {
         font-size: 12px;
@@ -138,7 +186,7 @@ body.active_admin {
         @include rounded($skinBorderRadius);
         background-color: $skinMainSecondColor;
         border: none;
-        padding: 10px 20px;
+        padding: $skinTitleBarButtonPaddingY $skinTitleBarButtonPaddingX;
         color: #ffffff;
         font-weight: 600;
         &:hover {