diff --git a/pages/_includes/layout/navbar-search.html b/pages/_includes/layout/navbar-search.html
index 0c0804bec3a95a69fc311aa3d4de7fd73678eab8..4d3db387ba042af3b25ae29c5bc5b9b8c3f4ba2a 100644
--- a/pages/_includes/layout/navbar-search.html
+++ b/pages/_includes/layout/navbar-search.html
@@ -2,6 +2,6 @@
 
 <div class="d-none d-{{ breakpoint }}-block {% if include.class %} {{ include.class }}{% endif %}">
 	<form action="." method="get">
-		{% include ui/form/input-icon.html prepend=true light=include.dark %}
+		{% include ui/form/input-icon.html prepend=true icon-class="text-muted" dark=include.dark %}
 	</form>
 </div>
diff --git a/pages/_includes/layout/navbar.html b/pages/_includes/layout/navbar.html
index efc9a832d73f0b5910051fdcfa9c48d7a8ca126b..86d9f3ae722cee93d8b1c44d64f5f0c6b44eff00 100644
--- a/pages/_includes/layout/navbar.html
+++ b/pages/_includes/layout/navbar.html
@@ -22,7 +22,7 @@
 	<div class="navbar collapse navbar-collapse {% if include.dark-secondary %}navbar-dark{% else %}navbar-light{% endif %}" id="navbar-menu">
 		<div class="container-xl">
 			{% include layout/navbar-menu.html %}
-			{% include layout/navbar-search.html breakpoint=breakpoint dark=dark-secondary %}
+			{% include layout/navbar-search.html breakpoint=breakpoint dark=include.dark-secondary %}
 		</div>
 	</div>
 </div>
diff --git a/pages/_includes/ui/form/input-icon.html b/pages/_includes/ui/form/input-icon.html
index 7541cd6ede98bd1471c4dacc66ff2e044570fc49..dcf80b8d3a1060aad6cee2649ecd2662fa1a2dd7 100644
--- a/pages/_includes/ui/form/input-icon.html
+++ b/pages/_includes/ui/form/input-icon.html
@@ -1,11 +1,11 @@
 {% capture addon %}
 	{% if include.loader %}
-		<span class="input-icon-addon">
+		<span class="input-icon-addon{% if include.icon-class %} {{ include.icon-class }}{% endif %}">
 			{% include ui/spinner.html class="text-muted" size="sm" %}
 		</span>
 	{% else %}
 		{% assign icon = include.icon | default: 'search' %}
-		<span class="input-icon-addon">
+		<span class="input-icon-addon{% if include.icon-class %} {{ include.icon-class }}{% endif %}">
 			{% include ui/icon.html icon=icon %}
 		</span>
 	{% endif %}
@@ -16,7 +16,7 @@
 		{{ addon }}
 	{% endif %}
 
-	<input type="text" class="form-control{% if include.light %} form-control-light{% endif %}{% if include.input-class %} {{ include.input-class }}{% endif %}" placeholder="{{ include.placeholder | default: 'Search…' }}">
+	<input type="text" class="form-control{% if include.light %} form-control-light{% endif %}{% if include.dark %} form-control-dark{% endif %}{% if include.input-class %} {{ include.input-class }}{% endif %}" placeholder="{{ include.placeholder | default: 'Search…' }}">
 
 	{% unless include.prepend %}
 		{{ addon }}
diff --git a/pages/_layouts/default.html b/pages/_layouts/default.html
index b0841262414d17365a6ff9770a48b69f3a9d93a8..11647fd027f6a3bef5d330daf143f4ec500da845 100644
--- a/pages/_layouts/default.html
+++ b/pages/_layouts/default.html
@@ -5,15 +5,11 @@ layout: base
 {% assign page-header = page.page-header | default: layout.page-header %}
 
 <div class="page">
-	{% include layout/navbar.html %}
 	{% include layout/navbar.html dark=true %}
-
-	{% comment %}
 	{% include layout/navbar.html dark=true background="#7952b3" %}
 	{% include layout/navbar.html %}
-	{% endcomment %}
-
-	{% comment %}{% include layout/topnav.html %}{% endcomment %}
+	{% include layout/navbar.html secondary=true %}
+	{% include layout/navbar.html secondary=true dark-secondary=true %}
 
 	{% comment %}
 	{% include layout/navbar-primary.html %}
diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss
index 18e7a3be32aafe1ad33bcb711425a3af163e41db..245c74d8038f5c5e51c280cf586b9a08c0035c47 100644
--- a/scss/layout/_navbar.scss
+++ b/scss/layout/_navbar.scss
@@ -1,3 +1,16 @@
+.navbar-expand {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
+
+    &#{$infix} {
+      @include media-breakpoint-up($next) {
+
+      }
+    }
+  }
+}
+
 /**
 Navbar
  */
diff --git a/scss/ui/_forms.scss b/scss/ui/_forms.scss
index 31b2d8baf63a38e89299f284ae2ca29ae7f3dc69..9a113cdb3ef84fece004453589ae9842b6c59271 100644
--- a/scss/ui/_forms.scss
+++ b/scss/ui/_forms.scss
@@ -77,12 +77,23 @@ Form control
 }
 
 .form-control-light {
+  background-color: $gray-100;
+  border-color: transparent;
+}
+
+.form-control-dark {
   background-color: rgba($black, .1);
   color: $white;
   border-color: transparent;
 
   &:focus {
-    background-color: inherit;
+    background-color: rgba($black, .1);
+    box-shadow: none;
+    border-color: rgba($white, .24);
+  }
+
+  &::placeholder {
+    color: rgba($white, $text-muted-opacity);
   }
 }