diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.scss b/demo-shell/src/app/components/app-layout/app-layout.component.scss
index 3f81063ac4..0bed603ffa 100644
--- a/demo-shell/src/app/components/app-layout/app-layout.component.scss
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.scss
@@ -3,6 +3,13 @@
   $minimumAppWidth: 320px;
   $toolbarHeight: 64px;
 
+
+   @media screen and ($mat-small) {
+       adf-search-bar {
+           width: 200px;
+       }
+   }
+
   .adf-app-layout {
     display: block;
     min-width: $minimumAppWidth;
diff --git a/lib/content-services/search/components/search-control.component.scss b/lib/content-services/search/components/search-control.component.scss
index cc9016617a..bc99bc9fb1 100644
--- a/lib/content-services/search/components/search-control.component.scss
+++ b/lib/content-services/search/components/search-control.component.scss
@@ -6,7 +6,14 @@
     $mat-menu-border-radius: 2px !default;
 
     .adf-search-container {
-        overflow: hidden;
+        overflow: hidden !important;
+        adf-search-bar {
+            width: 200px;
+        }
+    }
+
+    .adf-search-button {
+        left: -13px;
     }
 
     .adf {
@@ -39,7 +46,6 @@
             background-color: mat-color($background, card);
             border-radius: $mat-menu-border-radius;
 
-
             @media screen and ($mat-small) {
                 width: 160px;
                 white-space: nowrap;
diff --git a/lib/content-services/search/components/search-control.component.ts b/lib/content-services/search/components/search-control.component.ts
index 5e899b31b7..1f78f747f7 100644
--- a/lib/content-services/search/components/search-control.component.ts
+++ b/lib/content-services/search/components/search-control.component.ts
@@ -29,8 +29,8 @@ import 'rxjs/add/operator/distinctUntilChanged';
     styleUrls: ['./search-control.component.scss'],
     animations: [
         trigger('transitionMessages', [
-            state('active', style({ transform: 'translateX(0%)' })),
-            state('inactive', style({ transform: 'translateX(83%)', overflow: 'hidden' })),
+            state('active', style({ transform: 'translateX(0%)', 'margin-left': '13px' })),
+            state('inactive', style({ transform: 'translateX(81%)'})),
             state('no-animation', style({ transform: 'translateX(0%)', width: '100%' })),
             transition('inactive => active',
                 animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')),
@@ -80,7 +80,7 @@ export class SearchControlComponent implements OnInit, OnDestroy {
     private focusSubject = new Subject<FocusEvent>();
 
     constructor(public authService: AuthenticationService,
-        private thumbnailService: ThumbnailService) {
+                private thumbnailService: ThumbnailService) {
 
         this.toggleSearch.asObservable().debounceTime(100).subscribe(() => {
             if (this.expandable) {