diff --git a/components/SearchInput.spec.js b/components/SearchInput.spec.js
index 7d34dca30..b4c62b712 100644
--- a/components/SearchInput.spec.js
+++ b/components/SearchInput.spec.js
@@ -3,9 +3,10 @@ import SearchInput from './SearchInput.vue'
 
 describe('SearchInput.vue', () => {
   let wrapper
+  const mocks = { $t: () => {} }
 
   beforeEach(() => {
-    wrapper = shallowMount(SearchInput, {})
+    wrapper = shallowMount(SearchInput, { mocks })
   })
 
   it('renders', () => {
@@ -17,22 +18,20 @@ describe('SearchInput.vue', () => {
   })
 
   it('defaults to an empty value', () => {
-    wrapper = mount(SearchInput)
+    wrapper = mount(SearchInput, { mocks })
     expect(wrapper.vm.value).toBe('')
   })
-  
+
   it('defaults to id "nav-search"', () => {
-    wrapper = mount(SearchInput)
+    wrapper = mount(SearchInput, { mocks })
     expect(wrapper.vm.id).toBe('nav-search')
   })
 
   it('changes searchValue as a user inputs a value', () => {
-    wrapper = mount(SearchInput)
+    wrapper = mount(SearchInput, { mocks })
     const input = wrapper.find('#nav-search')
     input.element.value = 'abc'
     input.trigger('input')
     expect(wrapper.vm.searchValue).toBe('abc')
   })
-  // TODO: add similar software tests for other components
-  // TODO: add more test cases in this file
 })
diff --git a/components/SearchInput.vue b/components/SearchInput.vue
index 846d8375d..d9cd21290 100644
--- a/components/SearchInput.vue
+++ b/components/SearchInput.vue
@@ -7,7 +7,7 @@
   >
     <div class="field">
       <div class="control has-icons-left has-icons-right">
-        <input
+        <ds-input
           :id="id"
           ref="input"
           v-model="searchValue"
@@ -15,19 +15,11 @@
           class="input"
           name="search"
           type="text"
+          icon="search"
           :placeholder="$t('search.placeholder')"
           @keyup.exact="onInput"
           @keyup.enter="onEnter"
-        >
-        <!-- span class="icon is-small is-left">
-          <hc-icon icon="search"></hc-icon>
-        </span -->
-        <!-- ds-icon
-          class="icon"
-          size="xx-small"
-          name="angle-down"
-          align="right"
-        / -->
+        />
       </div>
     </div>
   </div>
diff --git a/layouts/default.vue b/layouts/default.vue
index 96aaf9d33..5ef77c4fc 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -219,17 +219,20 @@ export default {
 
 .main-navigation-left {
   display: flex;
-  margin-right: auto;
+  // margin-right: auto;
+  margin-right: 40px;
 }
 
 .main-navigation-center {
   display: flex;
-  margin-right: auto;
+  // margin-right: auto;
+  width: 100%;
 }
 
 .main-navigation-right {
   display: flex;
-  margin-left: auto;
+  // margin-left: auto;
+  margin-left: 40px;
 }
 
 .avatar-menu-trigger {