diff --git a/core/client/app/components/gh-navitem.js b/core/client/app/components/gh-navitem.js
index 70a72bab41..f5bdc1a4c8 100644
--- a/core/client/app/components/gh-navitem.js
+++ b/core/client/app/components/gh-navitem.js
@@ -1,6 +1,6 @@
 import Ember from 'ember';
 var NavItemComponent = Ember.Component.extend({
-    classNames: 'navigation-item',
+    classNames: 'gh-blognav-item',
 
     attributeBindings: ['order:data-order'],
     order: Ember.computed.readOnly('navItem.order'),
diff --git a/core/client/app/styles/layouts/editor.css b/core/client/app/styles/layouts/editor.css
index 7b66645f50..a2a1399908 100644
--- a/core/client/app/styles/layouts/editor.css
+++ b/core/client/app/styles/layouts/editor.css
@@ -18,6 +18,7 @@
     height: 60px;
     border: 0;
     background: transparent;
+    color: var(--darkgrey);
     text-indent: 20px;
     letter-spacing: -1px;
     font-size: 3.2rem;
diff --git a/core/client/app/styles/layouts/settings.css b/core/client/app/styles/layouts/settings.css
index adaddfddc7..10204b79cd 100644
--- a/core/client/app/styles/layouts/settings.css
+++ b/core/client/app/styles/layouts/settings.css
@@ -5,119 +5,103 @@
 /* Navigation
 /* ---------------------------------------------------------- */
 
-.navigation-item {
+.gh-blognav {
+    margin: 20px 0;
+}
+
+.gh-blognav-item {
     display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    padding: 0 20px;
 }
 
-@media (max-width: 600px) {
-    .navigation-item {
-        position: relative;
-        margin-bottom: 20px;
-    }
-}
-
-@media (min-width: 601px) {
-    .navigation-item {
-        margin-bottom: 10px;
-    }
-}
-
-.navigation-item:last-child {
-    padding-left: 17px;
-    /* simulate .navigation-item-drag-handle width + horizontal padding */
-}
-
-.navigation-item:last-child .navigation-item-drag-handle {
-    display: none;
-}
-
-.navigation-item-drag-handle {
-    padding: 6px 17px 0 0;
-    width: 17px;
+.gh-blognav-grab {
+    padding: 0 16px 0 0;
+    width: 16px;
+    color: #d1d1d1;
+    text-indent: -4px;
+    font-size: 16px;
     cursor: move;
 }
 
-@media (max-width: 600px) {
-    .navigation-item-drag-handle:before {
-        position: absolute;
-        top: 50%;
-        left: 0;
-        z-index: 20;
-        margin-top: -9px;
-    }
+.gh-blognav-url .fake-placeholder {
+    color: #c1c1c1;
 }
 
-.navigation-inputs {
+.gh-blognav-line {
+    display: flex;
     width: 100%;
 }
 
-.navigation-item-url .fake-placeholder {
-    color: lightgrey;
+.gh-blognav-label {
+    flex-grow: 1;
+    margin-right: 10px;
 }
 
-@media (max-width: 600px) {
-    .navigation-item-label {
-        margin-bottom: 5px;
-    }
-    .navigation-item-label,
-    .navigation-item-url {
-        display: block;
-        width: 100%;
-    }
+.gh-blognav-url {
+    flex-grow: 3;
 }
 
-@media (min-width: 601px) {
-    .navigation-inputs {
-        display: flex;
-    }
-    .navigation-item-label {
-        flex-grow: 1;
-        margin-right: 10px;
-    }
-    .navigation-item-url {
-        flex-grow: 3;
-    }
-}
-
-.navigation-item-action {
-    position: relative;
-    z-index: 10;
-    padding-left: 10px;
-    width: 40px;
-}
-
-.navigation-item-action button {
-    position: absolute;
-    top: 50%;
-    margin-top: -2px;
-    width: 30px;
-    height: 30px;
-    transform: translateY(-50%);
-}
-
-.navigation-item-action .icon-trash:before {
-    color: var(--midbrown);
-    font-size: 16px;
+.gh-blognav-delete {
+    padding: 8px 0 8px 10px;
+    color: #c1c1c1;
+    font-size: 14px;
     transition: color 0.1s linear;
 }
 
-.navigation-item-action .icon-trash:hover:before {
+.gh-blognav-delete:hover,
+.gh-blognav-delete:focus {
     color: var(--red);
 }
 
-.navigation-item-action .icon-add:before {
-    padding: 3px;
+.gh-blognav-add {
+    margin-right: -2px;
+    margin-left: 10px;
+    width: 16px;
+    height: 16px;
     background: var(--green);
     border-radius: 2px;
     color: #fff;
-    font-size: 12px;
+    text-align: center;
+    font-size: 10px;
+    line-height: 8px;
     transition: background 0.1s linear;
 }
 
-.navigation-item-action .icon-add:hover:before {
+.gh-blognav-add:hover,
+.gh-blognav-add:focus {
     background: color(var(--green) lightness(-10%));
 }
 
+.gh-blognav-item:last-child {
+    padding-left: calc(16px + 20px);
+    /* icon-grab + nav-item padding) */
+}
+
+.gh-blognav-item:last-child .gh-blognav-grab {
+    display: none;
+}
+
+/* Remove space between inputs on smaller screens */
+@media (max-width: 800px) {
+    .gh-blognav-label {
+        margin-right: -1px;
+    }
+    .gh-blognav-label input {
+        border-right-color: #eaeaea;
+        border-radius: 4px 0 0 4px;
+    }
+    .gh-blognav-url input {
+        border-left-color: #eaeaea;
+        border-radius: 0 4px 4px 0;
+    }
+    .gh-blognav-item input:focus {
+        position: relative;
+        z-index: 100;
+    }
+}
+
 
 /* Code Injection
 /* ---------------------------------------------------------- */
diff --git a/core/client/app/styles/patterns/forms.css b/core/client/app/styles/patterns/forms.css
index ad38ca8bfa..5a95aaf32d 100644
--- a/core/client/app/styles/patterns/forms.css
+++ b/core/client/app/styles/patterns/forms.css
@@ -28,7 +28,7 @@ legend {
     margin: 2em 0;
     width: 100%;
     border-bottom: #e1e1e1 1px solid;
-    color: var(--brown);
+    color: #b1b1b1;
     font-size: 1.2em;
     line-height: 2.0em;
 }
@@ -50,7 +50,7 @@ input {
 
 .form-group p {
     margin: 4px 0 0 0;
-    color: #b3b2a8;
+    color: #b1b1b1;
     font-size: 1.3rem;
 }
 
@@ -107,9 +107,9 @@ select {
     display: block;
     padding: 8px 10px;
     width: 100%;
-    border: 1px solid #e0dfd7;
+    border: 1px solid #e1e1e1;
     border-radius: var(--border-radius);
-    color: var(--darkgrey);
+    color: #666;
     font-size: 1.4rem;
     font-weight: normal;
     user-select: text;
@@ -128,7 +128,7 @@ select.error {
 .gh-select:focus,
 select:focus {
     outline: 0;
-    border-color: var(--brown);
+    border-color: #b1b1b1;
 }
 
 textarea {
@@ -160,7 +160,7 @@ textarea {
 
 .for-radio label:hover input:not(:checked) + .input-toggle-component,
 .for-checkbox label:hover input:not(:checked) + .input-toggle-component {
-    border-color: var(--midbrown);
+    border-color: #e1e1e1;
 }
 
 .for-radio input,
@@ -321,6 +321,6 @@ textarea {
         padding: 7px 10px 7px 8px;
     }
     .gh-select:focus {
-        border-color: var(--brown);
+        border-color: #b1b1b1;
     }
 }
diff --git a/core/client/app/styles/patterns/icons.css b/core/client/app/styles/patterns/icons.css
index 315716e2b8..76a55a47bf 100755
--- a/core/client/app/styles/patterns/icons.css
+++ b/core/client/app/styles/patterns/icons.css
@@ -247,3 +247,9 @@
 .icon-check:before {
     content: "\e043";
 }
+.icon-grab:before {
+    content: "\e044";
+}
+.icon-add2:before {
+    content: "\e045";
+}
diff --git a/core/client/app/templates/components/gh-navitem.hbs b/core/client/app/templates/components/gh-navitem.hbs
index 4ecdc17bf3..d43821db11 100644
--- a/core/client/app/templates/components/gh-navitem.hbs
+++ b/core/client/app/templates/components/gh-navitem.hbs
@@ -1,24 +1,24 @@
 {{#unless navItem.last}}
-    <span class="navigation-item-drag-handle icon-grab">
-        <span class="sr-only">Reorder</span>
-    </span>
+<span class="gh-blognav-grab icon-grab">
+    <span class="sr-only">Reorder</span>
+</span>
 {{/unless}}
-<div class="navigation-inputs">
-    <span class="navigation-item-label">
+
+<div class="gh-blognav-line">
+    <span class="gh-blognav-label">
         {{gh-trim-focus-input class="gh-input" focus=navItem.last placeholder="Label" value=navItem.label}}
     </span>
-    <span class="navigation-item-url">
+    <span class="gh-blognav-url">
         {{gh-navitem-url-input class="gh-input" baseUrl=baseUrl url=navItem.url last=navItem.last change="updateUrl"}}
     </span>
 </div>
-<span class="navigation-item-action">
-    {{#if navItem.last}}
-        <button type="button" class="add-navigation-link icon-add" {{action "addItem"}}>
-            <span class="sr-only">Add</span>
-        </button>
-    {{else}}
-        <button type="button" class="navigation-delete icon-trash" {{action "deleteItem" navItem}}>
-            <span class="sr-only">Delete</span>
-        </button>
-    {{/if}}
-</span>
+
+{{#if navItem.last}}
+    <button type="button" class="gh-blognav-add" {{action "addItem"}}>
+        <i class="icon-add2"><span class="sr-only">Add</span></i>
+    </button>
+{{else}}
+    <button type="button" class="gh-blognav-delete" {{action "deleteItem" navItem}}>
+        <i class="icon-trash"><span class="sr-only">Delete</span></i>
+    </button>
+{{/if}}
diff --git a/core/client/app/templates/settings/navigation.hbs b/core/client/app/templates/settings/navigation.hbs
index 141e2b59cf..fc6a689d99 100644
--- a/core/client/app/templates/settings/navigation.hbs
+++ b/core/client/app/templates/settings/navigation.hbs
@@ -5,8 +5,8 @@
     </section>
 </header>
 
-<section class="view-content settings-navigation">
-    <form id="settings-navigation" class="js-settings-navigation" novalidate="novalidate">
+<section class="view-container">
+    <form id="settings-navigation" class="gh-blognav js-gh-blognav" novalidate="novalidate">
         {{#each navItem in navigationItems}}
             {{gh-navitem navItem=navItem baseUrl=blogUrl addItem="addItem" deleteItem="deleteItem" updateUrl="updateUrl"}}
         {{/each}}
diff --git a/core/client/app/views/settings/navigation.js b/core/client/app/views/settings/navigation.js
index 31b10a41f6..b100b37798 100644
--- a/core/client/app/views/settings/navigation.js
+++ b/core/client/app/views/settings/navigation.js
@@ -4,12 +4,12 @@ import BaseView from 'ghost/views/settings/content-base';
 var SettingsNavigationView = BaseView.extend({
 
     didInsertElement: function () {
-        var navContainer = Ember.$('.js-settings-navigation'),
-            navElements = '.navigation-item:not(.navigation-item:last-child)',
+        var navContainer = Ember.$('.js-gh-blognav'),
+            navElements = '.gh-blognav-item:not(.gh-blognav-item:last-child)',
             self = this;
 
         navContainer.sortable({
-            handle: '.navigation-item-drag-handle',
+            handle: '.gh-blognav-grab',
             items: navElements,
 
             start: function (event, ui) {
@@ -28,7 +28,7 @@ var SettingsNavigationView = BaseView.extend({
     },
 
     willDestroyElement: function () {
-        Ember.$('.js-settings-navigation').sortable('destroy');
+        Ember.$('.js-gh-blognav').sortable('destroy');
     }
 
 });
diff --git a/core/client/public/assets/fonts/ghosticons.eot b/core/client/public/assets/fonts/ghosticons.eot
index 19fd84cbc0..67d4400280 100644
Binary files a/core/client/public/assets/fonts/ghosticons.eot and b/core/client/public/assets/fonts/ghosticons.eot differ
diff --git a/core/client/public/assets/fonts/ghosticons.svg b/core/client/public/assets/fonts/ghosticons.svg
index 1cfb426e62..4d8964a49b 100644
--- a/core/client/public/assets/fonts/ghosticons.svg
+++ b/core/client/public/assets/fonts/ghosticons.svg
@@ -75,4 +75,6 @@
 <glyph unicode="&#57409;" d="M501 427l-32 0 0 32c0 6-4 10-10 10l-128 0c-31 0-52-10-64-29-12 19-34 29-64 29l-128 0c-6 0-11-4-11-10l0-32-32 0c-6 0-11-5-11-11l0-341c0-6 5-11 11-11l128 0c19 0 64-5 64-53 0-6 5-11 11-11l64 0c6 0 10 5 10 11 0 48 45 53 64 53l128 0c6 0 11 5 11 11l0 341c0 6-5 11-11 11z m-170 21l117 0 0-320-117 0c-23 0-41-6-54-17l0 284c0 37 17 53 54 53z m-246 0l118 0c37 0 53-16 53-53l0-284c-12 11-30 17-53 17l-118 0z m406-363l-118 0c-47 0-79-24-84-64l-44 0c-5 40-37 64-85 64l-117 0 0 320 21 0 0-288c0-6 5-10 11-10l128 0c37 0 53-17 53-54 0-6 5-10 11-10 6 0 10 4 10 10 0 37 17 54 54 54l128 0c6 0 10 4 10 10l0 288 22 0z"/>
 <glyph unicode="&#57410;" d="M481 395c-13-18-28-34-46-47 0-3 0-7 0-12 0-25-3-50-11-74-7-25-18-49-33-71-14-23-32-43-52-61-21-17-45-31-74-41-29-11-60-16-92-16-52 0-99 14-142 42 7-1 14-2 22-2 43 0 81 14 115 40-20 0-38 6-54 18-16 12-27 27-33 46 7-1 13-2 18-2 8 0 16 1 24 4-21 4-39 15-53 31-14 17-21 37-21 59l0 1c13-7 27-11 42-11-13 8-23 19-30 32-8 14-11 29-11 44 0 17 4 33 12 47 23-28 51-51 84-68 33-17 69-27 107-29-2 8-3 15-3 22 0 25 9 47 27 65 18 18 40 27 66 27 26 0 49-10 67-29 21 4 40 11 59 22-7-22-21-39-41-51 18 2 35 7 53 14z"/>
 <glyph unicode="&#57411;" d="M355 338l-152-142-46 46c-4 4-11 4-15 0-4-4-4-11 0-15l53-53c2-2 5-3 8-3 2 0 5 1 7 3l160 149c4 4 4 11 0 15-4 4-10 4-15 0z m-99 174c-141 0-256-115-256-256 0-141 115-256 256-256 141 0 256 115 256 256 0 141-115 256-256 256z m0-491c-129 0-235 106-235 235 0 129 106 235 235 235 129 0 235-106 235-235 0-129-106-235-235-235z"/>
+<glyph unicode="&#57412;" d="M146 73l73 0 0-73-73 0z m147 0l73 0 0-73-73 0z m-147 146l73 0 0-73-73 0z m147 0l73 0 0-73-73 0z m-147 147l73 0 0-73-73 0z m147 0l73 0 0-73-73 0z m-147 146l73 0 0-73-73 0z m147 0l73 0 0-73-73 0z"/>
+<glyph unicode="&#57413;" d="M491 277l-213 0 0 214c0 11-10 21-21 21 0 0 0 0 0 0-12 0-22-10-22-21l0-214-214 0c-11 0-21-9-21-21 0-12 10-21 21-21l214 0 0-214c0-11 9-21 21-21l0 0c12 0 21 10 21 21l1 214 213 0c12 0 21 9 21 21 0 12-9 21-21 21z"/>
 </font></defs></svg>
diff --git a/core/client/public/assets/fonts/ghosticons.ttf b/core/client/public/assets/fonts/ghosticons.ttf
index ffd43f50ae..1688361e49 100644
Binary files a/core/client/public/assets/fonts/ghosticons.ttf and b/core/client/public/assets/fonts/ghosticons.ttf differ
diff --git a/core/client/public/assets/fonts/ghosticons.woff b/core/client/public/assets/fonts/ghosticons.woff
index 1a9719da01..4c38a1b47f 100644
Binary files a/core/client/public/assets/fonts/ghosticons.woff and b/core/client/public/assets/fonts/ghosticons.woff differ