diff --git a/src/app/workflow-spec-list/workflow-spec-list.component.html b/src/app/workflow-spec-list/workflow-spec-list.component.html
index 6a98abe..34b38c7 100644
--- a/src/app/workflow-spec-list/workflow-spec-list.component.html
+++ b/src/app/workflow-spec-list/workflow-spec-list.component.html
@@ -9,6 +9,9 @@
       <mat-icon>post_add</mat-icon>
       Add category
     </button>
+      <mat-form-field class="search-field">
+        <input matInput type="search" placeholder="Search Workflows" class="form-control" [formControl]="searchField">
+      </mat-form-field>
   </div>
   <mat-drawer-container class="example-container" autosize>
     <mat-drawer #drawer class="example-sidenav" mode="side" opened="true">
@@ -16,7 +19,7 @@
         <div class="category">
           <h4>Master Specification</h4>
           <mat-list>
-            <mat-list-item  class="workflow-spec" fxLayout="row">
+            <mat-list-item class="workflow-spec" fxLayout="row">
               <a class="spec_menu_item" (click)="selectSpec(masterStatusSpec)">{{masterStatusSpec.display_name}}</a>
             </mat-list-item>
           </mat-list>
@@ -27,6 +30,8 @@
 
       <mat-accordion class="example-headers-align" multi="false">
       <ng-container *ngFor="let cat of workflowSpecsByCategory">
+
+        <div *ngIf="!(searchField.value && cat.workflow_specs.length === 0)">
         <ng-container *ngIf="!(cat.id === null && cat.workflow_specs.length === 0)">
           <mat-expansion-panel hideToggle [expanded]="selectedSpec.category_id == cat.id">
             <mat-expansion-panel-header>
@@ -36,6 +41,9 @@
               <mat-panel-description>
                 ({{cat.name}})
               </mat-panel-description>
+              <button mat-mini-fab color="primary" style="box-shadow: none">
+                {{cat.workflow_specs.length}}
+              </button>
             </mat-expansion-panel-header>
             <mat-list>
               <mat-list-item *ngFor="let wfs of cat.workflow_specs" class="workflow-spec" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
@@ -97,6 +105,7 @@
           </mat-expansion-panel>
 
         </ng-container>
+        </div>
       </ng-container>
       </mat-accordion>
     </mat-drawer>
diff --git a/src/app/workflow-spec-list/workflow-spec-list.component.scss b/src/app/workflow-spec-list/workflow-spec-list.component.scss
index 2dd4f58..05c98ed 100644
--- a/src/app/workflow-spec-list/workflow-spec-list.component.scss
+++ b/src/app/workflow-spec-list/workflow-spec-list.component.scss
@@ -1,6 +1,9 @@
 @import "../../config";
 
-
+::ng-deep mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper {
+  margin: 0;
+  max-height: 40px;
+}
 .container {
   padding: 3rem;
 }
diff --git a/src/app/workflow-spec-list/workflow-spec-list.component.ts b/src/app/workflow-spec-list/workflow-spec-list.component.ts
index 64d24af..328397a 100644
--- a/src/app/workflow-spec-list/workflow-spec-list.component.ts
+++ b/src/app/workflow-spec-list/workflow-spec-list.component.ts
@@ -1,7 +1,7 @@
-import {Component, OnInit} from '@angular/core';
-import {MatBottomSheet} from '@angular/material/bottom-sheet';
-import {MatDialog} from '@angular/material/dialog';
-import {MatSnackBar} from '@angular/material/snack-bar';
+import { Component, OnInit } from '@angular/core';
+import { MatBottomSheet } from '@angular/material/bottom-sheet';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import createClone from 'rfdc';
 import {
   ApiService,
@@ -11,21 +11,22 @@ import {
   WorkflowSpec,
   WorkflowSpecCategory
 } from 'sartography-workflow-lib';
-import {DeleteWorkflowSpecCategoryDialogComponent} from '../_dialogs/delete-workflow-spec-category-dialog/delete-workflow-spec-category-dialog.component';
-import {DeleteWorkflowSpecDialogComponent} from '../_dialogs/delete-workflow-spec-dialog/delete-workflow-spec-dialog.component';
-import {WorkflowSpecCategoryDialogComponent} from '../_dialogs/workflow-spec-category-dialog/workflow-spec-category-dialog.component';
-import {WorkflowSpecDialogComponent} from '../_dialogs/workflow-spec-dialog/workflow-spec-dialog.component';
+import { DeleteWorkflowSpecCategoryDialogComponent } from '../_dialogs/delete-workflow-spec-category-dialog/delete-workflow-spec-category-dialog.component';
+import { DeleteWorkflowSpecDialogComponent } from '../_dialogs/delete-workflow-spec-dialog/delete-workflow-spec-dialog.component';
+import { WorkflowSpecCategoryDialogComponent } from '../_dialogs/workflow-spec-category-dialog/workflow-spec-category-dialog.component';
+import { WorkflowSpecDialogComponent } from '../_dialogs/workflow-spec-dialog/workflow-spec-dialog.component';
 import {
   DeleteWorkflowSpecCategoryDialogData,
   DeleteWorkflowSpecDialogData,
   WorkflowSpecCategoryDialogData,
   WorkflowSpecDialogData
 } from '../_interfaces/dialog-data';
-import {ApiErrorsComponent} from 'sartography-workflow-lib';
-import {ActivatedRoute} from '@angular/router';
-import {map} from 'rxjs/operators';
-import {Location} from '@angular/common';
-import {environment} from '../../environments/environment.runtime';
+import { ApiErrorsComponent } from 'sartography-workflow-lib';
+import { ActivatedRoute } from '@angular/router';
+import { debounceTime, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators';
+import { Location } from '@angular/common';
+import { environment } from '../../environments/environment.runtime';
+import { FormControl } from '@angular/forms';
 
 
 export interface WorkflowSpecCategoryGroup {
@@ -50,6 +51,7 @@ export class WorkflowSpecListComponent implements OnInit {
   categories: WorkflowSpecCategory[];
   moveUp = moveArrayElementUp;
   moveDown = moveArrayElementDown;
+  private searchField: FormControl;
 
   constructor(
     private api: ApiService,
@@ -69,14 +71,19 @@ export class WorkflowSpecListComponent implements OnInit {
         this._loadWorkflowSpecCategories();
       }
     });
+    this.searchField = new FormControl();
+    this.searchField.valueChanges.subscribe(value => {
+      this._loadWorkflowSpecs(null, value);
+      console.log(value);
+    });
   }
 
   validateWorkflowSpec(wfs: WorkflowSpec) {
     this.api.validateWorkflowSpecification(wfs.id).subscribe(apiErrors => {
       if (apiErrors && apiErrors.length > 0) {
-        this.bottomSheet.open(ApiErrorsComponent, {data: {apiErrors: apiErrors}});
+        this.bottomSheet.open(ApiErrorsComponent, { data: { apiErrors: apiErrors } });
       } else {
-        this.snackBar.open('Workflow specification is valid!', 'Ok', {duration: 5000});
+        this.snackBar.open('Workflow specification is valid!', 'Ok', { duration: 5000 });
       }
     });
   }
@@ -197,8 +204,7 @@ export class WorkflowSpecListComponent implements OnInit {
       this._loadWorkflowSpecs(selectedSpecName);
     });
   }
-
-  private _loadWorkflowSpecs(selectedSpecName: String = null) {
+  private _loadWorkflowSpecs(selectedSpecName: String = null, searchSpecName: String = null) {
 
     this.api.getWorkflowSpecList().subscribe(wfs => {
       this.workflowSpecs = wfs;
@@ -209,7 +215,11 @@ export class WorkflowSpecListComponent implements OnInit {
             if (wf.is_master_spec) {
               this.masterStatusSpec = wf;
             } else {
-              return wf.category_id === cat.id;
+              if (searchSpecName) {
+                return (wf.category_id === cat.id) && wf.display_name.toLowerCase().includes(searchSpecName.toLowerCase());
+              } else {
+                return wf.category_id === cat.id;
+              }
             }
           })
           .sort(this.sortByDisplayOrder);
@@ -318,14 +328,14 @@ export class WorkflowSpecListComponent implements OnInit {
   }
 
   private _displayMessage(message: string) {
-    this.snackBar.open(message, 'Ok', {duration: 3000});
+    this.snackBar.open(message, 'Ok', { duration: 3000 });
   }
 
   private _reorder(
-    id: number|string, direction: number,
-    list: Array<WorkflowSpecCategoryGroup|WorkflowSpec>
-  ): Array<WorkflowSpecCategoryGroup|WorkflowSpec> {
-    const listClone = createClone({circles: true})(list);
+    id: number | string, direction: number,
+    list: Array<WorkflowSpecCategoryGroup | WorkflowSpec>
+  ): Array<WorkflowSpecCategoryGroup | WorkflowSpec> {
+    const listClone = createClone({ circles: true })(list);
     const reorderedList = listClone.filter(item => item.id !== null && item.id !== undefined);
     const i = reorderedList.findIndex(spec => spec.id === id);
     if (i !== -1) {
@@ -346,7 +356,7 @@ export class WorkflowSpecListComponent implements OnInit {
     let numUpdated = 0;
     cats.forEach((cat, j) => {
       if (isNumberDefined(cat.id)) {
-        const newCat: WorkflowSpecCategoryGroup = createClone({circles: true})(cat);
+        const newCat: WorkflowSpecCategoryGroup = createClone({ circles: true })(cat);
         delete newCat.workflow_specs;
 
         newCat.display_order = j;
@@ -363,7 +373,7 @@ export class WorkflowSpecListComponent implements OnInit {
   private _updateSpecDisplayOrders(specs: WorkflowSpec[]) {
     let numUpdated = 0;
     specs.forEach((spec, j) => {
-      const newSpec = createClone({circles: true})(spec);
+      const newSpec = createClone({ circles: true })(spec);
       newSpec.display_order = j;
       this.api.updateWorkflowSpecification(newSpec.id, newSpec).subscribe(() => {
         numUpdated++;