diff --git a/src/app/search-page/search-page.component.html b/src/app/search-page/search-page.component.html
index f142cc6b44..a8747a6cf9 100644
--- a/src/app/search-page/search-page.component.html
+++ b/src/app/search-page/search-page.component.html
@@ -1,4 +1,4 @@
 <div class="search-page">
-    <ds-search-form [query]="query" [scope]="scopeObject?.payload" [currentParams]="currentParams" [scopes]="scopeList?.payload | async"></ds-search-form>
+    <ds-search-form [query]="query" [scope]="scopeObject?.payload | async" [currentParams]="currentParams" [scopes]="scopeList?.payload"></ds-search-form>
     <ds-search-results [searchResults]="results" [searchConfig]="searchOptions"></ds-search-results>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/search-page/search-page.component.ts b/src/app/search-page/search-page.component.ts
index 4cba88338a..8aade9ec30 100644
--- a/src/app/search-page/search-page.component.ts
+++ b/src/app/search-page/search-page.component.ts
@@ -8,7 +8,7 @@ import { SortOptions } from '../core/cache/models/sort-options.model';
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
 import { SearchOptions } from '../search/search-options.model';
 import { CommunityDataService } from '../core/data/community-data.service';
-import { hasValue } from '../shared/empty.util';
+import { isNotEmpty } from '../shared/empty.util';
 import { Community } from '../core/shared/community.model';
 
 /**
@@ -29,21 +29,14 @@ export class SearchPageComponent implements OnInit, OnDestroy {
   scopeObject: RemoteData<DSpaceObject>;
   private page: number;
   results: RemoteData<Array<SearchResult<DSpaceObject>>>;
-  private currentParams = {};
+  currentParams = {};
   searchOptions: SearchOptions;
   scopeList: RemoteData<Community[]>;
 
   constructor(private service: SearchService,
               private route: ActivatedRoute,
               private communityService: CommunityDataService,) {
-    // Sample scope data
-    const defaultScope: Community = new Community();
-    defaultScope.id = '';
     this.scopeList = communityService.findAll();
-    this.scopeList.payload = this.scopeList.payload.map((list) => {
-      list.unshift(defaultScope);
-      return list
-    });
   }
 
   ngOnInit(): void {
@@ -61,7 +54,7 @@ export class SearchPageComponent implements OnInit, OnDestroy {
           const sort: SortOptions = new SortOptions(params.sortField, params.sortDirection);
           this.searchOptions = { pagination: pagination, sort: sort };
           this.results = this.service.search(this.query, this.scope, this.searchOptions);
-          if (hasValue(this.scope)) {
+          if (isNotEmpty(this.scope)) {
             this.scopeObject = this.communityService.findById(this.scope);
           } else {
             this.scopeObject = undefined;
diff --git a/src/app/shared/search-form/search-form.component.html b/src/app/shared/search-form/search-form.component.html
index 01a231d874..ae4132e950 100644
--- a/src/app/shared/search-form/search-form.component.html
+++ b/src/app/shared/search-form/search-form.component.html
@@ -1,12 +1,16 @@
-<form #form="ngForm" (ngSubmit)="onSubmit(form.value)">
+<form #form="ngForm" (ngSubmit)="onSubmit(form.value)" class="row">
+<div class="col-12 col-sm-3">
+  <select ngif="isNotEmpty(scopes | async)" [(ngModel)]="selectedId" name="scope" class="form-control" aria-label="Search scope" [compareWith]="byId">
+    <option value>{{'search.form.search_dspace' | translate}}</option>
+    <option *ngFor="let scopeOption of scopes | async" [value]="scopeOption.id">{{scopeOption?.name ? scopeOption.name : 'search.form.search_dspace' | translate}}</option>
+  </select>
+</div>
+    <div class="col-12 col-sm-9">
     <div class="form-group input-group">
         <input type="text" [(ngModel)]="query" name="query" class="form-control" aria-label="Search input">
-        <input type="text" [(ngModel)]="scopeId" name="scopeId" class="form-control" aria-label="Search input scopeId">
-        <select ngif="isNotEmpty(scopes)" [(ngModel)]="scopeId" name="scope" class="form-control" aria-label="Search scope" (change)="onChange()" [compareWith]="byId">
-            <option *ngFor="let scopeOption of scopes" [ngValue]="scopeOption.id" [value]="scopeOption.id">{{scopeOption?.name ? scopeOption.name : 'search.form.search_dspace' | translate}}</option>
-        </select>
-        <div class="input-group-btn">
+        <span class="input-group-btn">
             <button type="submit" class="search-button btn btn-secondary">{{ ('search.form.search' | translate) }}</button>
-        </div>
+        </span>
+    </div>
     </div>
 </form>
diff --git a/src/app/shared/search-form/search-form.component.scss b/src/app/shared/search-form/search-form.component.scss
index 7d5f9237d2..ca8849e3c0 100644
--- a/src/app/shared/search-form/search-form.component.scss
+++ b/src/app/shared/search-form/search-form.component.scss
@@ -1 +1,7 @@
 @import '../../../styles/shared_imports.scss';
+
+// temporary fix for bootstrap 4 beta btn color issue
+.btn-secondary {
+  background-color: $input-bg;
+  color: $input-color;
+}
diff --git a/src/app/shared/search-form/search-form.component.ts b/src/app/shared/search-form/search-form.component.ts
index cc6b6c8075..3d06515f31 100644
--- a/src/app/shared/search-form/search-form.component.ts
+++ b/src/app/shared/search-form/search-form.component.ts
@@ -1,8 +1,8 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { Router } from '@angular/router';
-import { isNotEmpty, isEmpty, hasNoValue } from '../empty.util';
-import { Observable } from 'rxjs';
+import { isNotEmpty, hasValue, isEmpty } from '../empty.util';
+import { Observable } from 'rxjs/Observable';
 
 /**
  * This component renders a simple item page.
@@ -17,17 +17,27 @@ import { Observable } from 'rxjs';
 })
 export class SearchFormComponent implements OnInit {
   @Input() query: string;
-  @Input() scope: Observable<DSpaceObject>;
-  scopeId: string;
+  selectedId = '';
   // Optional existing search parameters
   @Input() currentParams: {};
-  @Input() scopes: DSpaceObject[];
+  @Input() scopes: Observable<DSpaceObject[]>;
+  scopeOptions: string[] = [];
+
+  @Input()
+  set scope(dso: DSpaceObject) {
+    if (hasValue(dso)) {
+      this.selectedId = dso.id;
+    }
+  }
 
   ngOnInit(): void {
-    this.scope.subscribe((scopeObject) => {
-      this.scopeId = scopeObject.id;
-      console.log("Initialized: ", scopeObject.id);
-    });
+    this.scopes
+      .filter((scopes: DSpaceObject[]) => isEmpty(scopes))
+      .subscribe((scopes: DSpaceObject[]) => {
+          this.scopeOptions = scopes
+            .map((scope: DSpaceObject) => scope.id);
+        }
+      );
   }
 
   constructor(private router: Router) {
@@ -38,11 +48,12 @@ export class SearchFormComponent implements OnInit {
   }
 
   updateSearch(data: any) {
+
     this.router.navigate(['/search'], {
       queryParams: Object.assign({}, this.currentParams,
         {
           query: data.query,
-          scope: data.scope,
+          scope: data.scope || undefined,
           page: data.page || 1
         }
       )
@@ -50,15 +61,10 @@ export class SearchFormComponent implements OnInit {
     ;
   }
 
-  private isNotEmpty(object: any) {
-    return isNotEmpty(object);
-  }
-
   byId(id1: string, id2: string) {
+    if (isEmpty(id1) && isEmpty(id2)) {
+      return true;
+    }
     return id1 === id2;
   }
-
-  onChange(): void {
-    console.log('Scope: ', this.scope);
-  }
 }