diff --git a/src/components/nav.js b/src/components/nav.js
index c7ba2e4b3..8c5da2978 100644
--- a/src/components/nav.js
+++ b/src/components/nav.js
@@ -23,14 +23,16 @@ const siteNav = props => {
   return (
     <nav
       sx={{
-        gridColumn: ["1 / -1", "2 / 3", null],
-        gridRow: ["2 / 3", "1 / 2", null],
-        justifySelf: ["center", "end", null],
-        alignSelf: "center",
-        height: [props.open ? headOpen() : 0, "auto", null],
+        gridColumn: ["1 / -1", "1 / -1", "2 / 3"],
+        gridRow: ["2 / 3", "2 / 3", "1 / 2"],
+        justifySelf: ["center", "start", "end"],
+        alignItems: "center",
+        justifyContent: ["flex-start", "space-between", "flex-start"],
+        height: [props.open ? headOpen() : 0, "headerHeightTablet", "auto"],
         mt: [props.open ? 2 : 0, 0, null],
         display: "flex",
         flexDirection: ["column", "row", null],
+        width: ["auto", "100%", "auto"],
       }}
       role="navigation"
       aria-label="main-navigation"
@@ -40,8 +42,8 @@ const siteNav = props => {
           display: [props.open ? "flex" : "none", "flex", null],
           mr: ["auto", 3, null],
           ml: "auto",
-          mt: "0.25rem",
           mb: [3, 0, null],
+          order: [2, 2, 1],
 
           a: {
             color: props.open ? "header.iconsOpen" : "header.icons",
diff --git a/src/gatsby-plugin-theme-ui/index.js b/src/gatsby-plugin-theme-ui/index.js
index 331d50af6..1c4eaf8d5 100644
--- a/src/gatsby-plugin-theme-ui/index.js
+++ b/src/gatsby-plugin-theme-ui/index.js
@@ -18,7 +18,7 @@ export default {
       text: "#333333",
       textOpen: "#ffffff",
       icons: "#333333",
-      iconsHover: "primary",
+      iconsHover: "#3273dc",
       iconsOpen: "#ffffff",
     },