diff --git a/deposit/depositFirstPage.component.ts b/deposit/depositFirstPage.component.ts
index 70bedf4d..ffe01eaa 100644
--- a/deposit/depositFirstPage.component.ts
+++ b/deposit/depositFirstPage.component.ts
@@ -73,28 +73,17 @@ import {Subscriber} from "rxjs";
                 <!--<p class="uk-margin-auto-top uk-margin-remove-bottom uk-h5">
                   Start by <span class="uk-text-bold">searching</span> repositories and journals
                 </p>-->
-                <div class="">
-                  <form class=" uk-flex uk-margin">
-<!--                    <span uk-search-icon class="uk-icon"></span>-->
-<!--                    <button routerLinkActive="uk-link"-->
-<!--                       routerLink="{{depositRoute}}" [queryParams]="{keyword: keyword}"  class="uk-search-icon uk-icon" uk-search-icon>-->
-<!--                    </button>-->
-                    <input class="uk-search-input uk-input uk-width-expand uk-margin-small-right" 
-                           type="search"  [(ngModel)]="keyword"  name="keyword"
-                           placeholder="{{searchPlaceHolder}}">
-                    <div class="uk-padding-remove-left">
-                      <button routerLinkActive="uk-link" routerLink="{{depositRoute}}" [queryParams]="{'f0':'q','fv0': keyword}" [class]="'uk-button  uk-text-bold '+ (!!(communityId)?'':' portal-button')"> Search
-                      </button>
-                      <div class="uk-padding-small">
-                        <a  [queryParams]="properties.environment!='development'?{}:routerHelper.createQueryParam('communityId',communityId)" routerLinkActive="router-link-active" [routerLink]="depositRoute"
-                            type="submit" class=" ">
-                          <span><span>Browse all </span><!--<span uk-icon="arrow-right"></span>--></span>
-                        </a>
-                      </div>
-                    </div>
-                  </form>
+                <div class="uk-flex uk-flex-right uk-margin-small-bottom">
+                  <a  [queryParams]="properties.environment!='development'?{}:routerHelper.createQueryParam('communityId',communityId)"
+                      [routerLink]="depositRoute">
+                    Browse all
+                  </a>
                 </div>
-                <div class="uk-width-1-6 uk-text-right">
+                <div>
+                  <div search-input [(value)]="keyword" [placeholder]="searchPlaceHolder" (searchEmitter)="goToDeposit.click()"></div>
+                  <a #goToDeposit class="uk-hidden" [routerLink]="depositRoute" [queryParams]="{'f0':'q','fv0': keyword}"></a>
+                </div>
+                <div class="uk-width-1-6 uk-text-right uk-margin-medium-top">
 <!--                  <hr class="uk-divider-vertical">-->
 <!--                  <div class=" uk-margin-top uk-margin-bottom uk-padding-small uk-text-bold">OR</div>-->
 <!--                  <img src="assets/common-assets/OR.svg">-->
diff --git a/deposit/depositFirstPage.module.ts b/deposit/depositFirstPage.module.ts
index a75e05fb..a474c189 100644
--- a/deposit/depositFirstPage.module.ts
+++ b/deposit/depositFirstPage.module.ts
@@ -11,6 +11,7 @@ import {Schema2jsonldModule} from '../sharedComponents/schema2jsonld/schema2json
 import { SEOServiceModule } from '../sharedComponents/SEO/SEOService.module';
 import {DepositFirstPageComponent} from "./depositFirstPage.component";
 import {BreadcrumbsModule} from "../utils/breadcrumbs/breadcrumbs.module";
+import {SearchInputModule} from "../sharedComponents/search-input/search-input.module";
 
 @NgModule({
   imports: [
@@ -18,7 +19,7 @@ import {BreadcrumbsModule} from "../utils/breadcrumbs/breadcrumbs.module";
     RouterModule,
     PiwikServiceModule,
     HelperModule,
-    Schema2jsonldModule, SEOServiceModule, BreadcrumbsModule
+    Schema2jsonldModule, SEOServiceModule, BreadcrumbsModule, SearchInputModule
   ],
   declarations: [
     DepositFirstPageComponent
diff --git a/deposit/searchDataprovidersToDeposit.component.ts b/deposit/searchDataprovidersToDeposit.component.ts
index 57923c46..7d285f91 100644
--- a/deposit/searchDataprovidersToDeposit.component.ts
+++ b/deposit/searchDataprovidersToDeposit.component.ts
@@ -33,31 +33,11 @@ import {properties} from "../../../environments/environment";
     </div>
     <div class="">
       <div class="uk-container uk-container-large">
-
-        <form 
-              class="uk-margin-top uk-grid uk-margin-small-left ng-untouched ng-pristine ng-valid uk-form-width-large uk-float-right">
- 
-          <div class=" uk-padding-remove-left uk-margin-small-top uk-inline uk-width-expand">
-            <a *ngIf="keyword.length > 0" class="uk-form-icon uk-form-icon-flip"
-               (click)="keyword = ''"
-               uk-icon="icon: close"></a>
-            <input type="text" class="uk-input text-input-box uk-width-expand"
-                   placeholder="Search by name, description, subject..." aria-describedby="sizing-addon2"
-                   [(ngModel)]="keyword" name="keyword">
+        <div class="uk-margin-top uk-flex uk-flex-right">
+          <div class="uk-width-large">
+            <div search-input [(value)]="keyword" placeholder="Search by name, description, subject..." (searchEmitter)="keywordChanged()"></div>
           </div>
-          <!--<div class="uk-padding-remove-left uk-margin-small-top">
-            <button (click)="keywordChanged()" type="submit"
-                    class=" uk-button  portal-button  uk-text-bold ">
-              Search
-            </button>
-          </div>-->
-          <div class="uk-padding-remove-left">    
-          <button (click)="keywordChanged()" type="submit"
-                  class="portal-button uk-margin-small-left uk-margin-small-top uk-button">Search
-          </button>
-          </div>
- 
-        </form>
+        </div>
       </div>
       <search-dataproviders  [simpleView]="true" [searchForm]="{class: null, dark: false}" type="deposit" simpleSearchLink="/participate/deposit/search" [includeOnlyResultsAndFilter]="true" >
       </search-dataproviders>
diff --git a/deposit/searchDataprovidersToDeposit.module.ts b/deposit/searchDataprovidersToDeposit.module.ts
index c6e8693b..c6fb9f0a 100644
--- a/deposit/searchDataprovidersToDeposit.module.ts
+++ b/deposit/searchDataprovidersToDeposit.module.ts
@@ -12,14 +12,15 @@ import {SearchFormModule} from  '../searchPages/searchUtils/searchForm.module';
 import {IsRouteEnabled} from '../error/isRouteEnabled.guard';
 import {SearchDataProvidersModule} from "../searchPages/searchDataProviders.module";
 import {BreadcrumbsModule} from "../utils/breadcrumbs/breadcrumbs.module";
+import {SearchInputModule} from "../sharedComponents/search-input/search-input.module";
 
 @NgModule({
   imports: [
     CommonModule, FormsModule,
     RouterModule,
     DataProvidersServiceModule,
-    SearchFormModule, SearchResultsModule, SearchDataProvidersModule, BreadcrumbsModule
-
+    SearchFormModule, SearchResultsModule, SearchDataProvidersModule, BreadcrumbsModule, SearchInputModule
+  
   ],
   declarations: [
     SearchDataprovidersToDepositComponent