diff --git a/web/assets/css/main.css b/web/assets/css/main.css
index 356d96f0f27e81390a3639e7f893f026e192eb26..7486602466776bf025c3ab1ebb6d4047993157b3 100644
--- a/web/assets/css/main.css
+++ b/web/assets/css/main.css
@@ -222,7 +222,7 @@ img[src$='#two-third'] {
 /* -------------------------------- Algolia---------------------------------- */
 .algolia-autocomplete .aa-input,
 .algolia-autocomplete .aa-hint {
-  /*width: 100%;*/
+  width: 100%;
 }
 
 .algolia-autocomplete .aa-hint {
@@ -232,8 +232,12 @@ img[src$='#two-third'] {
 .algolia-autocomplete .aa-dropdown-menu {
   @apply bg-gray-100;
   @apply border-2;
+  @apply border-t-0;
   @apply p-1;
   @apply text-sm;
+  right: 0px;
+  width: 100%;
+  margin-top: -1px;
 }
 
 .algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
@@ -242,7 +246,7 @@ img[src$='#two-third'] {
 }
 
 .algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
-  @apply bg-blue-200;
+  @apply bg-brand-200;
 }
 
 .algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
diff --git a/web/assets/js/sitesearch.js b/web/assets/js/sitesearch.js
index 1e6f2207fd2e124c50c6c6ba6da7014afb6ca878..03ff46e34a4957f23ab80dc478133bc1ab44dbbc 100644
--- a/web/assets/js/sitesearch.js
+++ b/web/assets/js/sitesearch.js
@@ -11,6 +11,7 @@ $('#search-input').autocomplete({
   {
     source: $.fn.autocomplete.sources.hits(index, { hitsPerPage: 5 }),
     displayKey: 'title',
+    debug: true,
     templates: {
       suggestion: function (suggestion) {
         return suggestion._highlightResult.title.value;
diff --git a/web/layouts/_default/baseof.html b/web/layouts/_default/baseof.html
index 3341d4a8019600d3e42e11a32f743dbedc22828e..93e2b0cf1c05584e7fcef38dec53a8e6aba3f931 100644
--- a/web/layouts/_default/baseof.html
+++ b/web/layouts/_default/baseof.html
@@ -15,7 +15,7 @@
   {{ partial "header.html" . }}
 </head>
 
-<body>
+<body class="selection:bg-yellow-200">
   {{ partialCached "nav-bar.html" . $section $subsection }}
 
   <div class="xl:container xl:mx-auto px-2">
@@ -47,8 +47,8 @@
             {{ range .Children }}
             <li
               class="p-1 mr-1 {{if $currentPage.IsMenuCurrent $subsection . }}bg-gray-100 rounded-lg{{ else }}text-gray-700 hover:text-gray-900{{ end }}">
-              <a href="{{ .URL }}" {{if $currentPage.IsMenuCurrent $subsection . }} class="text-brand-500"
-                {{end}}>{{ .Name }}
+              <a href="{{ .URL }}" {{if $currentPage.IsMenuCurrent $subsection . }} class="text-brand-500" {{end}}>
+                {{ .Name }}
               </a>
             </li>
             {{ end }}
diff --git a/web/layouts/partials/nav-bar.html b/web/layouts/partials/nav-bar.html
index 049a76c6c4e814758e3770af478d4489a6b3b1b3..19f5150c4ffe396927316ba6eb41de0b1c3fb96e 100644
--- a/web/layouts/partials/nav-bar.html
+++ b/web/layouts/partials/nav-bar.html
@@ -26,21 +26,22 @@
           {{ range .Site.Menus.main }}
           {{ $url_trimmed := trim .URL "/" }}
           <a href="{{ .URL }}"
-            class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150{{if (eq $section $url_trimmed) }} text-brand-500{{end}}">{{ .Name }}</a>
+            class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150{{if (eq $section $url_trimmed) }} text-brand-500{{end}}">{{.Name}}</a>
           {{ end }}
 
         </nav>
         <div class="hidden md:flex items-center justify-end space-x-8 md:flex-1 lg:w-0">
           <label for="search-input" class="hidden text-sm font-medium leading-5 text-gray-700">Search</label>
-          <div class="relative rounded-md shadow-sm">
-            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+          <div class="relative">
+            <div class="z-10 absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
               <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                 <path fill-rule="evenodd"
                   d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                   clip-rule="evenodd"></path>
               </svg>
             </div>
-            <input id="search-input" class="form-input block w-full pl-10 sm:text-sm sm:leading-5"
+            <input id="search-input"
+              class="form-input w-full p-1 text-center rounded-md border-2 border-brand-200 sm:text-sm sm:leading-5"
               placeholder="Search this site">
           </div>
         </div>
diff --git a/web/layouts/partials/site-search.html b/web/layouts/partials/site-search.html
deleted file mode 100644
index 2d996dcea9cd57ea0356b6a9d9e3e23b0b7ed3db..0000000000000000000000000000000000000000
--- a/web/layouts/partials/site-search.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<form class="w-full max-w-sm text-sm md:text-base" id="site-search-form" role="search">
-  <fieldset class="flex items-center justify-end">
-    <label class="block" for="search-input">
-      <span class="hidden lg:inline-block"><i class="far fa-search mr-1"></i></span class="hidden md:block">
-      <input type="search" id="search-input" class="bg-gray-200 appearance-none border-2 border-gray-200 hover:border-orange rounded w-auto px-2 text-gray-600" placeholder="Search the Docs" name="email-address" value="">
-  </label>
-  </fieldset>
-</form>