diff --git a/src/app/+search-page/search-filters/search-filter/search-filter.component.html b/src/app/+search-page/search-filters/search-filter/search-filter.component.html
index 4196ff8a7b..9ea1eeed14 100644
--- a/src/app/+search-page/search-filters/search-filter/search-filter.component.html
+++ b/src/app/+search-page/search-filters/search-filter/search-filter.component.html
@@ -2,6 +2,6 @@
     <div (click)="toggle()" class="filter-name"><h5 class="d-inline-block mb-0">{{'search.filters.filter.' + filter.name + '.head'| translate}}</h5> <span class="filter-toggle fa float-right"
                                                                       [ngClass]="(isCollapsed() | async) ? 'fa-plus' : 'fa-minus'"></span></div>
     <div [@slide]="(isCollapsed() | async) ? 'collapsed' : 'expanded'"  (@slide.start)="startSlide($event)" (@slide.done)="finishSlide($event)" class="search-filter-wrapper" [ngClass]="{'closed' : collapsed}">
-        <ds-search-facet-filter-wrapper [filterConfig]="filter" [selectedValues]="getSelectedValues() | async"></ds-search-facet-filter-wrapper>
+        <ds-search-facet-filter-wrapper [filterConfig]="filter" [selectedValues]="getSelectedValues()"></ds-search-facet-filter-wrapper>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html b/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html
index 074c5700d7..1e485179d6 100644
--- a/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html
+++ b/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html
@@ -1,19 +1,19 @@
 <div>
-    <div class="filters">
-        <a *ngFor="let value of selectedValues" class="d-block"
+    <div class="filters py-2">
+        <a *ngFor="let value of selectedValues" class="d-flex flex-row"
            [routerLink]="[getSearchLink()]"
            [queryParams]="getRemoveParams(value)" queryParamsHandling="merge">
-            <input type="checkbox" [checked]="true"/>
-            <span class="filter-value">{{value}}</span>
+            <input type="checkbox" [checked]="true" class="my-1 align-self-stretch"/>
+            <span class="filter-value pl-1">{{value}}</span>
         </a>
         <ng-container *ngFor="let page of (filterValues$ | async)">
             <ng-container *ngFor="let value of (page | async)?.payload.page; let i=index">
-                <a *ngIf="!selectedValues.includes(value.value)" class="d-block clearfix"
+                <a *ngIf="!selectedValues.includes(value.value)" class="d-flex flex-row"
                    [routerLink]="[getSearchLink()]"
                    [queryParams]="getAddParams(value.value)" queryParamsHandling="merge" >
-                    <input type="checkbox" [checked]="false"/>
-                        <span class="filter-value">{{value.value}}</span>
-                        <span class="float-right filter-value-count">
+                    <input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
+                    <span class="filter-value px-1">{{value.value}}</span>
+                    <span class="float-right filter-value-count ml-auto">
                         <span class="badge badge-secondary badge-pill">{{value.count}}</span>
                     </span>
                 </a>
@@ -28,11 +28,14 @@
                 | translate}}</a>
         </div>
     </div>
-    <form #form="ngForm" (ngSubmit)="onSubmit(form.value)" class="add-filter"
-          [action]="getCurrentUrl()">
-        <input type="text" [(ngModel)]="filter" [name]="filterConfig.paramName" class="form-control"
-               aria-label="New filter input"
-               [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder'| translate"  [ngModelOptions]="{standalone: true}"/>
-        <input type="submit" class="d-none"/>
-    </form>
+    <ds-input-suggestions [suggestions]="(filterSearchResults | async)"
+                          [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder'| translate"
+                          [action]="getCurrentUrl()"
+                          [name]="filterConfig.paramName"
+                          [(ngModel)]="filter"
+                          (submitSuggestion)="onSubmit($event)"
+                          (clickSuggestion)="onClick($event)"
+                          (findSuggestions)="findSuggestions($event)"
+                          ngDefaultControl
+    ></ds-input-suggestions>
 </div>
diff --git a/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.scss b/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.scss
index 1297f1ae3a..9ec0f61541 100644
--- a/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.scss
@@ -2,17 +2,22 @@
 @import '../../../../../styles/mixins.scss';
 
 .filters {
-    margin-top: $spacer/2;
-    margin-bottom: $spacer/2;
     a {
         color: $body-color;
-        &:hover {
+        &:hover, &focus {
             text-decoration: none;
         }
+        span.badge {
+            vertical-align: text-top;
+        }
     }
     .toggle-more-filters a {
         color: $link-color;
         text-decoration: underline;
         cursor: pointer;
     }
-}
\ No newline at end of file
+}
+::ng-deep em {
+    font-weight: bold;
+    font-style: normal;
+}
diff --git a/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.html b/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.html
index c20cc750b7..c0b6cae427 100644
--- a/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.html
+++ b/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.html
@@ -1,5 +1,5 @@
 <div>
-    <div class="filters">
+    <div class="filters py-2">
         <form #form="ngForm" (ngSubmit)="onSubmit(form.value)" class="add-filter row"
               [action]="getCurrentUrl()">
             <div class="col-6">
@@ -23,12 +23,12 @@
       </ng-container>
 
         <ng-container *ngFor="let page of (filterValues$ | async)">
-            <ng-container *ngFor="let value of (page | async)?.payload.page">
-                <a *ngIf="!selectedValues.includes(value.value)" class="d-block clearfix"
+            <ng-container *ngFor="let value of (page | async)?.payload.page; let i=index">
+                <a *ngIf="!selectedValues.includes(value.value)" class="d-flex flex-row"
                    [routerLink]="[getSearchLink()]"
                    [queryParams]="getAddParams(value.value)" queryParamsHandling="merge">
-                    <span class="filter-value">{{value.value}}</span>
-                    <span class="float-right filter-value-count">
+                    <span class="filter-value px-1">{{value.value}}</span>
+                    <span class="float-right filter-value-count ml-auto">
                         <span class="badge badge-secondary badge-pill">{{value.count}}</span>
                     </span>
                 </a>
diff --git a/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.scss b/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.scss
index 4e8c56b5ff..c45302b162 100644
--- a/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.scss
@@ -3,8 +3,6 @@
 
 
 .filters {
-     margin-top: $spacer/2;
-     margin-bottom: $spacer/2;
      a {
          color: $link-color;
          &:hover {
@@ -12,6 +10,9 @@
              color: $link-hover-color;
 
          }
+         span.badge {
+             vertical-align: text-top;
+         }
      }
      .toggle-more-filters a {
          color: $link-color;
diff --git a/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.html b/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.html
index 074c5700d7..1e485179d6 100644
--- a/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.html
+++ b/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.html
@@ -1,19 +1,19 @@
 <div>
-    <div class="filters">
-        <a *ngFor="let value of selectedValues" class="d-block"
+    <div class="filters py-2">
+        <a *ngFor="let value of selectedValues" class="d-flex flex-row"
            [routerLink]="[getSearchLink()]"
            [queryParams]="getRemoveParams(value)" queryParamsHandling="merge">
-            <input type="checkbox" [checked]="true"/>
-            <span class="filter-value">{{value}}</span>
+            <input type="checkbox" [checked]="true" class="my-1 align-self-stretch"/>
+            <span class="filter-value pl-1">{{value}}</span>
         </a>
         <ng-container *ngFor="let page of (filterValues$ | async)">
             <ng-container *ngFor="let value of (page | async)?.payload.page; let i=index">
-                <a *ngIf="!selectedValues.includes(value.value)" class="d-block clearfix"
+                <a *ngIf="!selectedValues.includes(value.value)" class="d-flex flex-row"
                    [routerLink]="[getSearchLink()]"
                    [queryParams]="getAddParams(value.value)" queryParamsHandling="merge" >
-                    <input type="checkbox" [checked]="false"/>
-                        <span class="filter-value">{{value.value}}</span>
-                        <span class="float-right filter-value-count">
+                    <input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
+                    <span class="filter-value px-1">{{value.value}}</span>
+                    <span class="float-right filter-value-count ml-auto">
                         <span class="badge badge-secondary badge-pill">{{value.count}}</span>
                     </span>
                 </a>
@@ -28,11 +28,14 @@
                 | translate}}</a>
         </div>
     </div>
-    <form #form="ngForm" (ngSubmit)="onSubmit(form.value)" class="add-filter"
-          [action]="getCurrentUrl()">
-        <input type="text" [(ngModel)]="filter" [name]="filterConfig.paramName" class="form-control"
-               aria-label="New filter input"
-               [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder'| translate"  [ngModelOptions]="{standalone: true}"/>
-        <input type="submit" class="d-none"/>
-    </form>
+    <ds-input-suggestions [suggestions]="(filterSearchResults | async)"
+                          [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder'| translate"
+                          [action]="getCurrentUrl()"
+                          [name]="filterConfig.paramName"
+                          [(ngModel)]="filter"
+                          (submitSuggestion)="onSubmit($event)"
+                          (clickSuggestion)="onClick($event)"
+                          (findSuggestions)="findSuggestions($event)"
+                          ngDefaultControl
+    ></ds-input-suggestions>
 </div>
diff --git a/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.scss b/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.scss
index 595b2aefb8..33e354f2d8 100644
--- a/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.scss
@@ -2,17 +2,22 @@
 @import '../../../../../styles/mixins.scss';
 
 .filters {
-    margin-top: $spacer/2;
-    margin-bottom: $spacer/2;
     a {
         color: $body-color;
-        &:hover {
+        &:hover, &focus {
           text-decoration: none;
         }
+        span.badge {
+            vertical-align: text-top;
+        }
     }
     .toggle-more-filters a {
         color: $link-color;
         text-decoration: underline;
         cursor: pointer;
     }
-}
\ No newline at end of file
+}
+::ng-deep em {
+    font-weight: bold;
+    font-style: normal;
+}