diff --git a/app/extensions/brave/img/caret_down_grey.svg b/app/extensions/brave/img/caret_down_grey.svg
new file mode 100644
index 00000000000..c3dd80fe5a5
--- /dev/null
+++ b/app/extensions/brave/img/caret_down_grey.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.86 17.81"><defs><style>.cls-1{fill:gray;}</style></defs><title>caret_down_grey</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1_copy" data-name="Layer 1 copy"><path class="cls-1" d="M15.3,17.35.49,2.77A1.62,1.62,0,0,1,1.62,0H31.24a1.62,1.62,0,0,1,1.14,2.77L17.57,17.35A1.62,1.62,0,0,1,15.3,17.35Z"/></g></g></svg>
\ No newline at end of file
diff --git a/less/about/preferences.less b/less/about/preferences.less
index 1afe4823433..c4945b58e00 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -367,13 +367,6 @@ span.settingsListCopy {
   }
 }
 
-input:not([type="checkbox"]), select {
-  &.form-control {
-    box-sizing: border-box;
-    width: 280px;
-  }
-}
-
 input[type="checkbox"][disabled] {
   opacity: 0.8;
   pointer-events: none;
diff --git a/less/forms.less b/less/forms.less
index 18741fb8a8e..e2a5e25090d 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -1,24 +1,60 @@
 @import "variables.less";
 
+@inputSelectPadding: 0.4em;
+
 input,
 select {
+  color: @darkGray;
+  font-size: 14.5px;
   box-sizing: border-box;
+  border-radius: @borderRadius;
+  outline: none;
+  padding: @inputSelectPadding;
+  height: 2rem;
+
+  &.form-control {
+    display: block;
+    background-color: #fff;
+  }
 }
 
-.form-control {
-  display: block;
-  background: white;
+select {
+  box-shadow: @selectBoxShadow;
   border: solid 1px @lightGray;
-  border-radius: @borderRadius;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-  box-sizing: border-box;
-  color: @darkGray;
-  font-size: 14.5px;
-  height: 2.25em;
-  padding: 0.4em;
+  background: url('../app/extensions/brave/img/caret_down_grey.svg') calc(~'100% - @{inputSelectPadding}') 50% / contain no-repeat;
+  background-color: #fefefe;
+  -webkit-appearance: none;
+
+  &.form-control {
+    background-size: 12px 12px;
+  }
+}
+
+input {
+  box-shadow: @inputBoxShadow;
+  border: solid 1px @black20;
+
+  &:not([readonly]):focus {
+    outline-offset: -4px;
+    outline-color: -webkit-focus-ring-color;
+    outline-width: 1px;
+    outline-style: solid;
+  }
+}
+
+.form-control {
   width: 100%;
 }
 
+.prefBody {
+  input:not([type="checkbox"]),
+  select {
+    &.form-control {
+      width: 280px;
+    }
+  }
+}
+
 .flyoutDialog {
   background-color: @toolbarBackground;
   border-radius: @borderRadius;
@@ -610,26 +646,22 @@ select {
 
   input,
   select {
+    font-size: 1em;
     display: block;
     width: 100%;
     max-width: 250px;
-    height: 25px;
-    border-radius: 5px;
     padding: 0 5px;
-    margin: 5px 0 5px 0;
-    font-size: 0.9em;
-    border: solid 1px #ececec;
-    background: white;
-    color: #444444;
-    outline: none;
+    margin: 5px 0;
   }
 
   input {
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    &:focus {
+      outline: none;
+    }
   }
 
   select {
-    box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.8);
+    background-size: 12px 12px;
   }
 }
 
diff --git a/less/navigationBar.less b/less/navigationBar.less
index 5156cc2a314..4918dd707c0 100644
--- a/less/navigationBar.less
+++ b/less/navigationBar.less
@@ -849,6 +849,7 @@
       background: @navigationBarBackground;
       border: none;
       box-sizing: border-box;
+      box-shadow: none;
       color: @chromeText;
       cursor: text;
       flex-grow: 1;
@@ -857,6 +858,8 @@
       outline: none;
       text-overflow: ellipsis;
       min-width: 0%; // allow the navigator to shrink
+      padding: 0;
+      height: auto;
 
       &:hover {
         background: @chromeControlsBackground2;
diff --git a/less/variables.less b/less/variables.less
index e4506ed387d..3392ca6a662 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -104,16 +104,18 @@
 @gray25: rgba(116, 116, 130, 0.25);
 @gray50: rgba(116, 116, 130, 0.5);
 @black10: rgba(0, 0, 0, 0.1);
+@black20: rgba(0, 0, 0, 0.2);
 @black25: rgba(0, 0, 0, 0.25);
 @black50: rgba(0, 0, 0, 0.5);
 @black75: rgba(0, 0, 0, 0.75);
 
 @buttonShadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.5);
 @dialogShadow: 0px 8px 22px 0px rgba(0, 0, 0, .5);
+@inputBoxShadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+@selectBoxShadow: -1px 1px 3px -1px @mediumGray;
 @softBoxShadow: 0 4px 8px @lightGray;
 @lightBoxShadow: 0 2px 2px @lightGray;
 @insetShadow: inset -5px 0 15px @black25;
-
 @orangeButtonShadow: 0 2px 0 @braveDarkOrange;
 
 @zindexWindowNotActive: 900;