diff --git a/config/webpack.demo.js b/config/webpack.demo.js
index acbbe16..e2adeac 100644
--- a/config/webpack.demo.js
+++ b/config/webpack.demo.js
@@ -35,13 +35,7 @@ module.exports = {
   },
 
   resolve: {
-    extensions: ['.webpack.js', '.wep.js', '.js', '.ts'],
-    plugins: [
-      // Todo: config is not loading.
-      new TsConfigPathsPlugin({
-        configFileName: helpers.root("tsconfig-demo.json")
-      })
-    ]
+    extensions: ['.webpack.js', '.wep.js', '.js', '.ts']
   },
 
   stats: {
@@ -124,6 +118,11 @@ module.exports = {
      */
     new NamedModulesPlugin(),
 
+    // Todo: config is not loading.
+    new TsConfigPathsPlugin({
+      configFileName: helpers.root("tsconfig-demo.json")
+    }),
+
     /**
      * Plugin: ContextReplacementPlugin
      * Description: Provides context to Angular's use of System.import
diff --git a/index.ts b/index.ts
index ea0b223..0cb8972 100644
--- a/index.ts
+++ b/index.ts
@@ -31,6 +31,7 @@ export { FilterEvent } from './src/app/filters/filter-event';
 export { FilterField } from './src/app/filters/filter-field';
 export { FilterFieldsComponent } from './src/app/filters/filter-fields.component';
 export { FilterResultsComponent } from './src/app/filters/filter-results.component';
+export { FilterQuery } from './src/app/filters/filter-query';
 
 // Notification
 export { ToastNotificationComponent } from './src/app/notification/toast-notification.component';
diff --git a/src/app/filters/examples/filter-example.component.ts b/src/app/filters/examples/filter-example.component.ts
index 974877c..ca6ab63 100644
--- a/src/app/filters/examples/filter-example.component.ts
+++ b/src/app/filters/examples/filter-example.component.ts
@@ -26,63 +26,92 @@ export class FilterExampleComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.allItems = [
-      {
-        name: "Fred Flintstone",
-        address: "20 Dinosaur Way, Bedrock, Washingstone",
-        birthMonth: 'February'
-      },
-      {
-        name: "John Smith",
-        address: "415 East Main Street, Norfolk, Virginia",
-        birthMonth: 'October'
-      },
-      {
-        name: "Frank Livingston",
-        address: "234 Elm Street, Pittsburgh, Pennsylvania",
-        birthMonth: 'March'
-      },
-      {
-        name: "Judy Green",
-        address: "2 Apple Boulevard, Cincinatti, Ohio",
-        birthMonth: 'December'
-      },
-      {
-        name: "Pat Thomas",
-        address: "50 Second Street, New York, New York",
-        birthMonth: 'February'
-      }
-    ];
+    this.allItems = [{
+      name: "Fred Flintstone",
+      address: "20 Dinosaur Way, Bedrock, Washingstone",
+      birthMonth: 'February',
+      birthMonthId: 'month2'
+    },{
+      name: "John Smith", address: "415 East Main Street, Norfolk, Virginia",
+      birthMonth: 'October',
+      birthMonthId: '10'
+    },{
+      name: "Frank Livingston",
+      address: "234 Elm Street, Pittsburgh, Pennsylvania",
+      birthMonth: 'March',
+      birthMonthId: 'month3'
+    },{
+      name: "Judy Green",
+      address: "2 Apple Boulevard, Cincinatti, Ohio",
+      birthMonth: 'December',
+      birthMonthId: 'month12'
+    },{
+      name: "Pat Thomas",
+      address: "50 Second Street, New York, New York",
+      birthMonth: 'February',
+      birthMonthId: 'month2'
+    }];
     this.items = this.allItems;
 
     this.filterConfig = {
-      fields: [
-        {
-          id: 'name',
-          title:  'Name',
-          placeholder: 'Filter by Name...',
-          filterType: 'text'
-        },
-        {
-          id: 'age',
-          title:  'Age',
-          placeholder: 'Filter by Age...',
-          filterType: 'text'
-        },
-        {
-          id: 'address',
-          title:  'Address',
-          placeholder: 'Filter by Address...',
-          filterType: 'text'
-        },
-        {
-          id: 'birthMonth',
-          title:  'Birth Month',
-          placeholder: 'Filter by Birth Month...',
-          filterType: 'select',
-          filterValues: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
-        }
-      ] as FilterField[],
+      fields: [{
+        id: 'name',
+        title:  'Name',
+        placeholder: 'Filter by Name...',
+        type: 'text'
+      },{
+        id: 'age',
+        title:  'Age',
+        placeholder: 'Filter by Age...',
+        type: 'text'
+      },{
+        id: 'address',
+        title:  'Address',
+        placeholder: 'Filter by Address...',
+        type: 'text'
+      },{
+        id: 'birthMonth',
+        title:  'Birth Month',
+        placeholder: 'Filter by Birth Month...',
+        type: 'select',
+        queries: [{
+          id: 'month1',
+          value: 'January'
+        },{
+          id: 'month2',
+          value: 'February'
+        },{
+          id: 'month3',
+          value: 'March'
+        },{
+          id: 'month4',
+          value: 'April'
+        },{
+          id: 'month5',
+          value: 'May'
+        },{
+          id: 'month6',
+          value: 'June'
+        },{
+          id: 'month7',
+          value: 'July'
+        },{
+          id: 'month8',
+          value: 'August'
+        },{
+          id: 'month9',
+          value: 'September'
+        },{
+          id: 'month10',
+          value: 'October'
+        },{
+          id: 'month11',
+          value: 'November'
+        },{
+          id: 'month12',
+          value: 'December'
+        }]
+      }] as FilterField[],
       resultsCount: this.items.length,
       appliedFilters: []
     } as FilterConfig;
@@ -107,7 +136,7 @@ export class FilterExampleComponent implements OnInit {
   filterChange($event: FilterEvent): void {
     this.filtersText = "";
     $event.appliedFilters.forEach((filter) => {
-      this.filtersText += filter.title + " : " + filter.value + "\n";
+      this.filtersText += filter.field.title + " : " + filter.value + "\n";
     });
     this.applyFilters($event.appliedFilters);
   }
@@ -115,11 +144,11 @@ export class FilterExampleComponent implements OnInit {
   matchesFilter(item: any, filter: Filter): boolean {
     let match = true;
 
-    if (filter.id === 'name') {
+    if (filter.field.id === 'name') {
       match = item.name.match(filter.value) !== null;
-    } else if (filter.id === 'address') {
+    } else if (filter.field.id === 'address') {
       match = item.address.match(filter.value) !== null;
-    } else if (filter.id === 'birthMonth') {
+    } else if (filter.field.id === 'birthMonth') {
       match = item.birthMonth === filter.value;
     }
     return match;
diff --git a/src/app/filters/filter-event.ts b/src/app/filters/filter-event.ts
index 86de6e9..162b7da 100644
--- a/src/app/filters/filter-event.ts
+++ b/src/app/filters/filter-event.ts
@@ -1,15 +1,18 @@
 import { Filter } from './filter';
 import { FilterField } from './filter-field';
+import { FilterQuery } from './filter-query';
 
 /*
  * A filter event containing:
  *
  * appliedFilters - List of the currently applied filters
  * field - A filterable field
+ * query - A filterable query
  * value - The filter input field value
  */
 export class FilterEvent {
   appliedFilters?: Filter[];
-  field?: FilterField;
+  field: FilterField;
+  query: FilterQuery;
   value?: string;
 }
diff --git a/src/app/filters/filter-field.ts b/src/app/filters/filter-field.ts
index 4fe3679..7c6c69d 100644
--- a/src/app/filters/filter-field.ts
+++ b/src/app/filters/filter-field.ts
@@ -1,16 +1,18 @@
+import { FilterQuery } from './filter-query';
+
 /*
  * A filterable field containing:
  *
  * id - Optional unique Id for the filter field, useful for comparisons
- * title - The title to display for the filter field
  * placeholder - Optional text to display when no filter value has been entered
- * filterType - The filter input field type (any html input type, or 'select' for a select box)
- * filterValues - Optional list of values used when filterType is 'select'
+ * queries - Optional list of filter queries used when filterType is 'select'
+ * title - The title to display for the filter field
+ * type - The filter input field type (any html input type, or 'select' for a select box)
  */
 export class FilterField {
   id?: string;
-  title: string;
   placeholder?: string;
-  filterType: string;
-  filterValues?: string[];
+  queries?: FilterQuery[];
+  title: string;
+  type: string;
 }
diff --git a/src/app/filters/filter-fields.component.html b/src/app/filters/filter-fields.component.html
index 459dd9a..b302a9d 100644
--- a/src/app/filters/filter-fields.component.html
+++ b/src/app/filters/filter-fields.component.html
@@ -6,19 +6,19 @@
         <span class="caret"></span>
       </button>
       <ul class="dropdown-menu" role="menu" dropdownMenu>
-        <li *ngFor="let item of config.fields">
-          <a class="filter-field" role="menuitem" tabindex="-1" (click)="selectField(item)">
-            {{item.title}}
+        <li *ngFor="let field of config.fields">
+          <a class="filter-field" role="menuitem" tabindex="-1" (click)="selectField(field)">
+            {{field.title}}
           </a>
         </li>
       </ul>
     </div>
-    <div *ngIf="currentField.filterType !== 'select'">
-      <input class="form-control" type="{{currentField.filterType}}" [(ngModel)]="currentValue"
+    <div *ngIf="currentField.type !== 'select'">
+      <input class="form-control" type="{{currentField.type}}" [(ngModel)]="currentValue"
              placeholder="{{currentField.placeholder}}"
              (keypress)="onValueKeyPress($event)"/>
     </div>
-    <div *ngIf="currentField.filterType === 'select'">
+    <div *ngIf="currentField.type === 'select'">
       <div class="btn-group bootstrap-select form-control filter-select" dropdown >
         <button type="button" class="btn btn-default dropdown-toggle" dropdownToggle>
           <span class="filter-option pull-left">{{currentValue || currentField.placeholder}}</span>
@@ -30,9 +30,10 @@
               {{currentField.placeholder}}
             </a>
           </li>
-          <li *ngFor="let filterValue of currentField.filterValues" [ngClass]="{'selected': filterValue === currentValue}">
-            <a role="menuitem" tabindex="-1" (click)="selectValue(filterValue)">
-              {{filterValue}}
+          <li *ngFor="let query of currentField.queries"
+              [ngClass]="{'selected': query.value === currentValue}">
+            <a role="menuitem" tabindex="-1" (click)="selectValue(query)">
+              {{query.value}}
             </a>
           </li>
         </ul>
diff --git a/src/app/filters/filter-fields.component.ts b/src/app/filters/filter-fields.component.ts
index 119f35d..f2171d8 100644
--- a/src/app/filters/filter-fields.component.ts
+++ b/src/app/filters/filter-fields.component.ts
@@ -10,6 +10,7 @@ import {
 import { FilterConfig } from './filter-config';
 import { FilterEvent } from './filter-event';
 import { FilterField } from './filter-field';
+import { FilterQuery } from './filter-query';
 
 import * as _ from 'lodash';
 
@@ -85,16 +86,17 @@ export class FilterFieldsComponent implements OnInit {
     }
   }
 
-  selectField(item: FilterField): void {
-    this.currentField = item;
+  selectField(field: FilterField): void {
+    this.currentField = field;
     this.currentValue = null;
   }
 
-  selectValue(filterValue: string): void {
-    if (filterValue != null) {
+  selectValue(filterQuery: FilterQuery): void {
+    if (filterQuery != null) {
       this.onAdd.emit({
         field: this.currentField,
-        value: filterValue
+        query: filterQuery,
+        value: filterQuery.value
       } as FilterEvent);
       this.currentValue = null;
     }
diff --git a/src/app/filters/filter-query.ts b/src/app/filters/filter-query.ts
new file mode 100644
index 0000000..e891c2f
--- /dev/null
+++ b/src/app/filters/filter-query.ts
@@ -0,0 +1,10 @@
+/*
+ * A filterable field containing:
+ *
+ * id - Optional unique Id for the filter field, useful for comparisons
+ * value - Filter query value used when filterType is 'select'
+ */
+export class FilterQuery {
+  id?: string;
+  value: string;
+}
diff --git a/src/app/filters/filter-results.component.html b/src/app/filters/filter-results.component.html
index cc4175d..156f7af 100644
--- a/src/app/filters/filter-results.component.html
+++ b/src/app/filters/filter-results.component.html
@@ -1,12 +1,12 @@
-<div class="filter-pf">
+<div class="filter-pf" *ngIf="config && config.appliedFilters && config.appliedFilters.length > 0">
   <div class="row toolbar-pf-results">
     <div class="col-sm-12">
-      <h5>{{config.resultsCount}} Results</h5>
+      <h5 *ngIf="config.resultsCount >= -1">{{config.resultsCount}} Results</h5>
       <p *ngIf="config.appliedFilters.length > 0">Active filters:</p>
       <ul class="list-inline">
         <li *ngFor="let filter of config.appliedFilters">
           <span class="active-filter label label-info">
-            {{filter.title}}: {{filter.value}}
+            {{filter.field.title}}: {{filter.value}}
             <a><span class="pficon pficon-close" (click)="clearFilter(filter)"></span></a>
           </span>
         </li>
diff --git a/src/app/filters/filter-results.component.ts b/src/app/filters/filter-results.component.ts
index 1fc93a2..7a90b0b 100644
--- a/src/app/filters/filter-results.component.ts
+++ b/src/app/filters/filter-results.component.ts
@@ -63,10 +63,10 @@ export class FilterResultsComponent implements OnInit {
 
   // Result functions
 
-  clearFilter(item: Filter): void {
+  clearFilter(filter: Filter): void {
     let newFilters: Filter[] = [];
     this.config.appliedFilters.forEach((filter) => {
-      if (item.title !== filter.title || item.value !== filter.value) {
+      if (filter.field.title !== filter.field.title || filter.value !== filter.value) {
         newFilters.push(filter);
       }
     });
diff --git a/src/app/filters/filter.component.spec.ts b/src/app/filters/filter.component.spec.ts
index a90798e..aa71297 100644
--- a/src/app/filters/filter.component.spec.ts
+++ b/src/app/filters/filter.component.spec.ts
@@ -22,35 +22,66 @@ describe('Filter component - ', () => {
 
   beforeEach(() => {
     config = {
-      fields: [
-        {
-          id: 'name',
-          title:  'Name',
-          placeholder: 'Filter by Name...',
-          filterType: 'text'
-        },
-        {
-          id: 'age',
-          title:  'Age',
-          placeholder: 'Filter by Age...',
-          filterType: 'text'
-        },
-        {
-          id: 'address',
-          title:  'Address',
-          placeholder: 'Filter by Address...',
-          filterType: 'text'
-        },
-        {
-          id: 'birthMonth',
-          title:  'Birth Month',
-          placeholder: 'Filter by Birth Month...',
-          filterType: 'select',
-          filterValues: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
-        }
-      ] as FilterField[],
-      resultsCount: 5,
-      appliedFilters: []
+      fields: [{
+        id: 'name',
+        title:  'Name',
+        placeholder: 'Filter by Name...',
+        type: 'text'
+      },{
+        id: 'age',
+        title:  'Age',
+        placeholder: 'Filter by Age...',
+        type: 'text'
+      },{
+        id: 'address',
+        title:  'Address',
+        placeholder: 'Filter by Address...',
+        type: 'text'
+      },{
+        id: 'birthMonth',
+        title:  'Birth Month',
+        placeholder: 'Filter by Birth Month...',
+        type: 'select',
+        queries: [{
+          id: 'month1',
+          value: 'January'
+        },{
+          id: 'month2',
+          value: 'February'
+        },{
+          id: 'month3',
+          value: 'March'
+        },{
+          id: 'month4',
+          value: 'April'
+        },{
+          id: 'month5',
+          value: 'May'
+        },{
+          id: 'month6',
+          value: 'June'
+        },{
+          id: 'month7',
+          value: 'July'
+        },{
+          id: 'month8',
+          value: 'August'
+        },{
+          id: 'month9',
+          value: 'September'
+        },{
+          id: 'month10',
+          value: 'October'
+        },{
+          id: 'month11',
+          value: 'November'
+        },{
+          id: 'month12',
+          value: 'December'
+        }]
+      }] as FilterField[],
+      appliedFilters: [],
+      resultsCount: 5
     } as FilterConfig;
   });
 
@@ -76,9 +107,15 @@ describe('Filter component - ', () => {
 
   it('should have correct number of results', function () {
     let results = fixture.debugElement.query(By.css('h5'));
-    expect(results).not.toBeNull();
-    expect(results.nativeElement.textContent.trim().slice(0, '5 Results'.length)).toBe('5 Results');
+    expect(results).toBeNull();
 
+    config.appliedFilters = [{
+      field: {
+        id: 'address',
+        title: 'Address'
+      },
+      value: 'New York'
+    }] as Filter[];
     config.resultsCount = 10;
     fixture.detectChanges();
 
@@ -93,13 +130,13 @@ describe('Filter component - ', () => {
     expect(activeFilters.length).toBe(0);
     expect(clearFilters).toBeNull();
 
-    config.appliedFilters = [
-      {
+    config.appliedFilters = [{
+      field: {
         id: 'address',
-        title: 'Address',
-        value: 'New York'
-      }
-    ] as Filter[];
+        title: 'Address'
+      },
+      value: 'New York'
+    }] as Filter[];
     fixture.detectChanges();
 
     activeFilters = fixture.debugElement.queryAll(By.css('.active-filter'));
@@ -120,20 +157,20 @@ describe('Filter component - ', () => {
     expect(filterSelect).not.toBeNull();
 
     let items = filterSelect.queryAll(By.css('li'));
-    expect(items.length).toBe(config.fields[3].filterValues.length + 1); // +1 for the null value
+    expect(items.length).toBe(config.fields[3].queries.length + 1); // +1 for the null value
   });
 
   it ('should clear a filter when the close button is clicked', function () {
     let closeButtons = fixture.debugElement.queryAll(By.css('.pficon-close'));
     expect(closeButtons.length).toBe(0);
 
-    config.appliedFilters = [
-      {
+    config.appliedFilters = [{
+      field: {
         id: 'address',
-        title: 'Address',
-        value: 'New York'
-      }
-    ] as Filter[];
+        title: 'Address'
+      },
+      value: 'New York'
+    }] as Filter[];
     fixture.detectChanges();
 
     closeButtons = fixture.debugElement.queryAll(By.css('.pficon-close'));
@@ -152,13 +189,13 @@ describe('Filter component - ', () => {
     expect(activeFilters.length).toBe(0);
     expect(clearButton).toBeNull();
 
-    config.appliedFilters = [
-      {
+    config.appliedFilters = [{
+      field: {
         id: 'address',
-        title: 'Address',
-        value: 'New York'
-      }
-    ] as Filter[];
+        title: 'Address'
+      },
+      value: 'New York'
+    }] as Filter[];
     fixture.detectChanges();
 
     activeFilters = fixture.debugElement.queryAll(By.css('.active-filter'));
diff --git a/src/app/filters/filter.component.ts b/src/app/filters/filter.component.ts
index 6149a5c..a0f17f3 100644
--- a/src/app/filters/filter.component.ts
+++ b/src/app/filters/filter.component.ts
@@ -57,14 +57,13 @@ export class FilterComponent implements OnInit {
 
   addFilter($event: FilterEvent): void {
     let newFilter = {
-      id: $event.field.id,
-      title: $event.field.title,
-      type: $event.field.filterType,
+      field: $event.field,
+      query: $event.query,
       value: $event.value
     } as Filter;
 
     if (!this.filterExists(newFilter)) {
-      if (newFilter.type === 'select') {
+      if (newFilter.field.type === 'select') {
         this.enforceSingleSelect(newFilter);
       }
       this.config.appliedFilters.push(newFilter);
@@ -74,12 +73,11 @@ export class FilterComponent implements OnInit {
   }
 
   enforceSingleSelect(filter: Filter): void {
-    _.remove(this.config.appliedFilters, {title: filter.title});
+    _.remove(this.config.appliedFilters, {title: filter.field.title});
   }
 
   filterExists(filter: Filter): boolean {
     let foundFilter = _.find(this.config.appliedFilters, {
-      title: filter.title,
       value: filter.value
     });
     return foundFilter !== undefined;
diff --git a/src/app/filters/filter.ts b/src/app/filters/filter.ts
index 67e7c82..a2caf3f 100644
--- a/src/app/filters/filter.ts
+++ b/src/app/filters/filter.ts
@@ -1,14 +1,15 @@
+import { FilterField } from './filter-field';
+import { FilterQuery } from './filter-query';
+
 /*
  * A filter containing:
  *
- * id - Optional unique Id for the filter, useful for comparisons
- * title - The title to display for the filter field
- * type - The filter input field type (any html input type, or 'select' for a select box)
+ * field - A filterable field
+ * query - A filterable query
  * value - Filter value
  */
 export class Filter {
-  id: string;
-  title: string;
-  type: string;
+  field: FilterField;
+  query: FilterQuery;
   value: string;
 }
diff --git a/src/app/filters/filters.module.ts b/src/app/filters/filters.module.ts
index e0ebaab..c27cb20 100644
--- a/src/app/filters/filters.module.ts
+++ b/src/app/filters/filters.module.ts
@@ -10,12 +10,14 @@ import { FilterEvent } from './filter-event';
 import { FilterField } from './filter-field';
 import { FilterFieldsComponent } from './filter-fields.component';
 import { FilterResultsComponent } from './filter-results.component';
+import { FilterQuery } from './filter-query';
 
 export {
   Filter,
   FilterConfig,
   FilterEvent,
-  FilterField
+  FilterField,
+  FilterQuery
 }
 
 @NgModule({
diff --git a/src/app/toolbar/examples/toolbar-example.component.ts b/src/app/toolbar/examples/toolbar-example.component.ts
index e72c6fd..b941959 100644
--- a/src/app/toolbar/examples/toolbar-example.component.ts
+++ b/src/app/toolbar/examples/toolbar-example.component.ts
@@ -63,65 +63,89 @@ export class ToolbarExampleComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.allItems = [
-      {
-        name: "Fred Flintstone",
-        address: "20 Dinosaur Way, Bedrock, Washingstone",
-        birthMonth: 'February'
-      },
-      {
-        name: "John Smith",
-        address: "415 East Main Street, Norfolk, Virginia",
-        birthMonth: 'October'
-      },
-      {
-        name: "Frank Livingston",
-        address: "234 Elm Street, Pittsburgh, Pennsylvania",
-        birthMonth: 'March'
-      },
-      {
-        name: "Judy Green",
-        address: "2 Apple Boulevard, Cincinatti, Ohio",
-        birthMonth: 'December'
-      },
-      {
-        name: "Pat Thomas",
-        address: "50 Second Street, New York, New York",
-        birthMonth: 'February'
-      }
-    ];
+    this.allItems = [{
+      name: "Fred Flintstone",
+      address: "20 Dinosaur Way, Bedrock, Washingstone",
+      birthMonth: 'February'
+    },{
+      name: "John Smith", address: "415 East Main Street, Norfolk, Virginia",
+      birthMonth: 'October'
+    },{
+      name: "Frank Livingston",
+      address: "234 Elm Street, Pittsburgh, Pennsylvania",
+      birthMonth: 'March'
+    },{
+      name: "Judy Green",
+      address: "2 Apple Boulevard, Cincinatti, Ohio",
+      birthMonth: 'December'
+    },{
+      name: "Pat Thomas",
+      address: "50 Second Street, New York, New York",
+      birthMonth: 'February'
+    }];
     this.items = this.allItems;
 
     this.filterConfig = {
-      fields: [
-        {
-          id: 'name',
-          title:  'Name',
-          placeholder: 'Filter by Name...',
-          filterType: 'text'
-        },
-        {
-          id: 'age',
-          title:  'Age',
-          placeholder: 'Filter by Age...',
-          filterType: 'text'
-        },
-        {
-          id: 'address',
-          title:  'Address',
-          placeholder: 'Filter by Address...',
-          filterType: 'text'
-        },
-        {
-          id: 'birthMonth',
-          title:  'Birth Month',
-          placeholder: 'Filter by Birth Month...',
-          filterType: 'select',
-          filterValues: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
-        }
-      ] as FilterField[],
+      fields: [{
+        id: 'name',
+        title:  'Name',
+        placeholder: 'Filter by Name...',
+        type: 'text'
+      },{
+        id: 'age',
+        title:  'Age',
+        placeholder: 'Filter by Age...',
+        type: 'text'
+      },{
+        id: 'address',
+        title:  'Address',
+        placeholder: 'Filter by Address...',
+        type: 'text'
+      },{
+        id: 'birthMonth',
+        title:  'Birth Month',
+        placeholder: 'Filter by Birth Month...',
+        type: 'select',
+        queries: [{
+          id: 'month1',
+          value: 'January'
+        },{
+          id: 'month2',
+          value: 'February'
+        },{
+          id: 'month3',
+          value: 'March'
+        },{
+          id: 'month4',
+          value: 'April'
+        },{
+          id: 'month5',
+          value: 'May'
+        },{
+          id: 'month6',
+          value: 'June'
+        },{
+          id: 'month7',
+          value: 'July'
+        },{
+          id: 'month8',
+          value: 'August'
+        },{
+          id: 'month9',
+          value: 'September'
+        },{
+          id: 'month10',
+          value: 'October'
+        },{
+          id: 'month11',
+          value: 'November'
+        },{
+          id: 'month12',
+          value: 'December'
+        }]
+      }] as FilterField[],
       resultsCount: this.items.length,
-      appliedFilters: []
+      //appliedFilters: []
     } as FilterConfig;
 
     this.sortConfig = {
@@ -263,7 +287,7 @@ export class ToolbarExampleComponent implements OnInit {
   filterChange($event: FilterEvent): void {
     this.filtersText = "";
     $event.appliedFilters.forEach((filter) => {
-      this.filtersText += filter.title + " : " + filter.value + "\n";
+      this.filtersText += filter.field.title + " : " + filter.value + "\n";
     });
     this.applyFilters($event.appliedFilters);
   }
@@ -271,11 +295,11 @@ export class ToolbarExampleComponent implements OnInit {
   matchesFilter(item: any, filter: Filter): boolean {
     let match = true;
 
-    if (filter.id === 'name') {
+    if (filter.field.id === 'name') {
       match = item.name.match(filter.value) !== null;
-    } else if (filter.id === 'address') {
+    } else if (filter.field.id === 'address') {
       match = item.address.match(filter.value) !== null;
-    } else if (filter.id === 'birthMonth') {
+    } else if (filter.field.id === 'birthMonth') {
       match = item.birthMonth === filter.value;
     }
     return match;
diff --git a/src/app/toolbar/toolbar.component.html b/src/app/toolbar/toolbar.component.html
index e6064f8..29ac269 100644
--- a/src/app/toolbar/toolbar.component.html
+++ b/src/app/toolbar/toolbar.component.html
@@ -5,26 +5,24 @@
         <alm-filter-fields [config]="config.filterConfig" *ngIf="config.filterConfig && config.filterConfig.fields"
                            (onAdd)="addFilter($event)"></alm-filter-fields>
       </div>
-      <div class="form-group">
-        <alm-sort [config]="config.sortConfig" *ngIf="config.sortConfig && config.sortConfig.fields && config.sortConfig.show"
-                  (onChange)="sortChange($event)"></alm-sort>
+      <div class="form-group" *ngIf="config.sortConfig && config.sortConfig.fields && config.sortConfig.show">
+        <alm-sort [config]="config.sortConfig" (onChange)="sortChange($event)"></alm-sort>
       </div>
-      <div class="form-group toolbar-actions"
-           *ngIf="config.actionsConfig &&
-                   ((config.actionsConfig.primaryActions && config.actionsConfig.primaryActions.length > 0) ||
-                    (config.actionsConfig.moreActions && config.actionsConfig.moreActions.length > 0) ||
-                    config.actionsConfig.actionsInclude)">
-        <button class="btn btn-default primary-action" type="button"
-                *ngFor="let action of config.actionsConfig.primaryActions"
-                title="{{action.title}}"
-                (click)="handleAction(action)"
-                [disabled]="action.isDisabled === true">
-          {{action.name}}
-        </button>
+      <div class="form-group toolbar-actions">
+        <span *ngIf="config.actionsConfig && config.actionsConfig.primaryActions && config.actionsConfig.primaryActions.length > 0">
+          <button class="btn btn-default primary-action" type="button"
+                  *ngFor="let action of config.actionsConfig.primaryActions"
+                  title="{{action.title}}"
+                  (click)="handleAction(action)"
+                  [disabled]="action.isDisabled === true">
+            {{action.name}}
+          </button>
+        </span>
         <div class="toolbar-pf-include-actions">
           <template [ngTemplateOutlet]="actionsTemplate" [ngOutletContext]="{}"></template>
         </div>
-        <div dropdown class="dropdown-kebab-pf" *ngIf="config.actionsConfig && config.actionsConfig.moreActions && config.actionsConfig.moreActions.length > 0">
+        <div dropdown class="dropdown-kebab-pf"
+             *ngIf="config.actionsConfig && config.actionsConfig.moreActions && config.actionsConfig.moreActions.length > 0">
           <button dropdownToggle class="btn btn-link" type="button">
             <span class="fa fa-ellipsis-v"></span>
           </button>
@@ -43,16 +41,19 @@
         </div>
       </div>
       <div class="toolbar-pf-action-right">
-        <div class="form-group toolbar-pf-view-selector" *ngIf="config.viewsConfig && config.viewsConfig.views">
-          <button *ngFor="let view of config.viewsConfig.views" class="btn btn-link"
-                  [ngClass]="{'active': isViewSelected(view), 'disabled': view.isDisabled === true}"
-                  title={{view.title}}  (click)="viewSelected(view)">
-            <i class="{{view.iconClass}}"></i>
-          </button>
+        <div class="form-group toolbar-pf-view-selector"
+             *ngIf="viewsTemplate !== undefined || (config.viewsConfig && config.viewsConfig.views)">
+          <template [ngTemplateOutlet]="viewsTemplate" [ngOutletContext]="{}"></template>
+          <span *ngIf="config.viewsConfig">
+            <button *ngFor="let view of config.viewsConfig.views" class="btn btn-link"
+                    [ngClass]="{'active': isViewSelected(view), 'disabled': view.isDisabled === true}"
+                    title={{view.title}}  (click)="viewSelected(view)">
+              <i class="{{view.iconClass}}"></i>
+            </button>
+          </span>
         </div>
       </div>
     </form>
-    <alm-filter-results [config]="config.filterConfig" *ngIf="config.filterConfig && config.filterConfig.fields"
-                        (onClear)="onClear($event)"></alm-filter-results>
+    <alm-filter-results [config]="config.filterConfig" (onClear)="onClear($event)"></alm-filter-results>
   </div>
 </div>
diff --git a/src/app/toolbar/toolbar.component.scss b/src/app/toolbar/toolbar.component.scss
index b200862..5bff269 100644
--- a/src/app/toolbar/toolbar.component.scss
+++ b/src/app/toolbar/toolbar.component.scss
@@ -6,6 +6,9 @@
   }
 }
 .toolbar-pf-actions {
+  .btn {
+    min-width: unset;
+  }
   .toolbar-pf-view-selector {
     a {
       cursor: pointer;
@@ -19,6 +22,9 @@
   .dropdown-kebab-pf {
     float: right;
   }
+  .toolbar-apf-filter {
+    padding-left: 0 !important;
+  }
 }
 .toolbar-pf-include-actions {
   display: inline-block;
diff --git a/src/app/toolbar/toolbar.component.spec.ts b/src/app/toolbar/toolbar.component.spec.ts
index 673e9c5..dd66555 100644
--- a/src/app/toolbar/toolbar.component.spec.ts
+++ b/src/app/toolbar/toolbar.component.spec.ts
@@ -80,38 +80,68 @@ describe('Toolbar component - ', () => {
             name: 'Grouped Action 2',
             title: 'Do something similar'
           }
-        ],
-        actionsInclude: true
+        ]
       } as ActionsConfig,
 
       filterConfig: {
-        fields: [
-          {
-            id: 'name',
-            title: 'Name',
-            placeholder: 'Filter by Name...',
-            filterType: 'text'
-          },
-          {
-            id: 'age',
-            title: 'Age',
-            placeholder: 'Filter by Age...',
-            filterType: 'text'
-          },
-          {
-            id: 'address',
-            title: 'Address',
-            placeholder: 'Filter by Address...',
-            filterType: 'text'
-          },
-          {
-            id: 'birthMonth',
-            title: 'Birth Month',
-            placeholder: 'Filter by Birth Month...',
-            filterType: 'select',
-            filterValues: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
-          }
-        ] as FilterField[],
+        fields: [{
+          id: 'name',
+          title:  'Name',
+          placeholder: 'Filter by Name...',
+          type: 'text'
+        },{
+          id: 'age',
+          title:  'Age',
+          placeholder: 'Filter by Age...',
+          type: 'text'
+        },{
+          id: 'address',
+          title:  'Address',
+          placeholder: 'Filter by Address...',
+          type: 'text'
+        },{
+          id: 'birthMonth',
+          title:  'Birth Month',
+          placeholder: 'Filter by Birth Month...',
+          type: 'select',
+          queries: [{
+            id: 'month1',
+            value: 'January'
+          },{
+            id: 'month2',
+            value: 'February'
+          },{
+            id: 'month3',
+            value: 'March'
+          },{
+            id: 'month4',
+            value: 'April'
+          },{
+            id: 'month5',
+            value: 'May'
+          },{
+            id: 'month6',
+            value: 'June'
+          },{
+            id: 'month7',
+            value: 'July'
+          },{
+            id: 'month8',
+            value: 'August'
+          },{
+            id: 'month9',
+            value: 'September'
+          },{
+            id: 'month10',
+            value: 'October'
+          },{
+            id: 'month11',
+            value: 'November'
+          },{
+            id: 'month12',
+            value: 'December'
+          }]
+        }] as FilterField[],
         resultsCount: 5,
         appliedFilters: []
       } as FilterConfig,
@@ -183,9 +213,15 @@ describe('Toolbar component - ', () => {
 
   it('should have correct number of results', function () {
     let results = fixture.debugElement.query(By.css('h5'));
-    expect(results).not.toBeNull();
-    expect(results.nativeElement.textContent.trim().slice(0, '5 Results'.length)).toBe('5 Results');
+    expect(results).toBeNull();
 
+    config.filterConfig.appliedFilters = [{
+      field: {
+        id: 'address',
+        title: 'Address'
+      },
+      value: 'New York'
+    }] as Filter[];
     config.filterConfig.resultsCount = 10;
     fixture.detectChanges();
 
@@ -206,20 +242,20 @@ describe('Toolbar component - ', () => {
     expect(filterSelect).not.toBeNull();
 
     let items = filterSelect.queryAll(By.css('li'));
-    expect(items.length).toBe(config.filterConfig.fields[3].filterValues.length + 1); // +1 for the null value
+    expect(items.length).toBe(config.filterConfig.fields[3].queries.length + 1); // +1 for the null value
   });
 
   it ('should clear a filter when the close button is clicked', function () {
     let closeButtons = fixture.debugElement.queryAll(By.css('.pficon-close'));
     expect(closeButtons.length).toBe(0);
 
-    config.filterConfig.appliedFilters = [
-      {
+    config.filterConfig.appliedFilters = [{
+      field: {
         id: 'address',
-        title: 'Address',
-        value: 'New York'
-      }
-    ] as Filter[];
+        title: 'Address'
+      },
+      value: 'New York'
+    }] as Filter[];
     fixture.detectChanges();
 
     closeButtons = fixture.debugElement.queryAll(By.css('.pficon-close'));
@@ -238,13 +274,13 @@ describe('Toolbar component - ', () => {
     expect(activeFilters.length).toBe(0);
     expect(clearButton).toBeNull();
 
-    config.filterConfig.appliedFilters = [
-      {
+    config.filterConfig.appliedFilters = [{
+      field: {
         id: 'address',
-        title: 'Address',
-        value: 'New York'
-      }
-    ] as Filter[];
+        title: 'Address'
+      },
+      value: 'New York'
+    }] as Filter[];
     fixture.detectChanges();
 
     activeFilters = fixture.debugElement.queryAll(By.css('.active-filter'));
@@ -263,25 +299,9 @@ describe('Toolbar component - ', () => {
 
   it ('should not show filters when a filter config is not supplied', function () {
     let filter = fixture.debugElement.queryAll(By.css('.filter-pf'));
-    expect(filter.length).toBe(2);
-
-    config = {
-      viewsConfig: {
-        views: [
-          {
-            id: 'listView',
-            title: 'List View',
-            iconClass: 'fa fa-th-list'
-          },
-          {
-            id: 'tableView',
-            title: 'Table View',
-            iconClass: 'fa fa-table'
-          }
-        ],
-      } as ViewsConfig
-    } as ToolbarConfig;
+    expect(filter.length).toBe(1);
 
+    config.filterConfig = undefined;
     comp.config = config;
     fixture.detectChanges();
 
@@ -386,27 +406,11 @@ describe('Toolbar component - ', () => {
     fixture.detectChanges();
   });
 
-  it ('should not show filters when a filter config is not supplied', function () {
+  it ('should not show sort when a sort config is not supplied', function () {
     let sort = fixture.debugElement.query(By.css('.sort-pf'));
     expect(sort).not.toBeNull();
 
-    config = {
-      viewsConfig: {
-        views: [
-          {
-            id: 'listView',
-            title: 'List View',
-            iconClass: 'fa fa-th-list'
-          },
-          {
-            id: 'tableView',
-            title: 'Table View',
-            iconClass: 'fa fa-table'
-          }
-        ],
-      } as ViewsConfig
-    } as ToolbarConfig;
-
+    config.sortConfig = undefined;
     comp.config = config;
     fixture.detectChanges();
 
@@ -562,32 +566,20 @@ describe('Toolbar component - ', () => {
     expect(action).toBeNull();
   });
 
-  it ('should not show action components when an action config is not supplied', function () {
-    let actionBar = fixture.debugElement.query(By.css('.toolbar-pf-actions .toolbar-actions'));
-    expect(actionBar).not.toBeNull();
-
-    config = {
-      viewsConfig: {
-        views: [
-          {
-            id: 'listView',
-            title: 'List View',
-            iconClass: 'fa fa-th-list'
-          },
-          {
-            id: 'tableView',
-            title: 'Table View',
-            iconClass: 'fa fa-table'
-          }
-        ],
-      } as ViewsConfig
-    } as ToolbarConfig;
+  it('should not show action components when an action config is not supplied', function () {
+    let primaryActions = fixture.debugElement.queryAll(By.css('.toolbar-pf-actions .primary-action'));
+    let moreActions = fixture.debugElement.queryAll(By.css('.toolbar-pf-actions .secondary-action'));
+    expect(primaryActions.length).toBe(2);
+    expect(moreActions.length).toBe(6);
 
+    config.actionsConfig = undefined;
     comp.config = config;
     fixture.detectChanges();
 
-    actionBar = fixture.debugElement.query(By.css('.toolbar-pf-actions .toolbar-actions'));
-    expect(actionBar).toBeNull();
+    primaryActions = fixture.debugElement.queryAll(By.css('.toolbar-pf-actions .primary-action'));
+    moreActions = fixture.debugElement.queryAll(By.css('.toolbar-pf-actions .secondary-action'));
+    expect(primaryActions.length).toBe(0);
+    expect(moreActions.length).toBe(0);
   });
 
   /* Todo
diff --git a/src/app/toolbar/toolbar.component.ts b/src/app/toolbar/toolbar.component.ts
index 8e3de99..ba43502 100644
--- a/src/app/toolbar/toolbar.component.ts
+++ b/src/app/toolbar/toolbar.component.ts
@@ -29,6 +29,7 @@ import * as _ from 'lodash';
 export class ToolbarComponent implements OnInit {
   @Input() config: ToolbarConfig;
   @Input() actionsTemplate: TemplateRef<any>;
+  @Input() viewsTemplate: TemplateRef<any>;
 
   @Output('onActionSelect') onActionSelect = new EventEmitter();
   @Output('onFilterChange') onFilterChange = new EventEmitter();
@@ -87,14 +88,13 @@ export class ToolbarComponent implements OnInit {
 
   addFilter($event: FilterEvent): void {
     let newFilter = {
-      id: $event.field.id,
-      title: $event.field.title,
-      type: $event.field.filterType,
+      field: $event.field,
+      query: $event.query,
       value: $event.value
     } as Filter;
 
     if (!this.filterExists(newFilter)) {
-      if (newFilter.type === 'select') {
+      if (newFilter.field.type === 'select') {
         this.enforceSingleSelect(newFilter);
       }
       this.config.filterConfig.appliedFilters.push(newFilter);
@@ -104,12 +104,13 @@ export class ToolbarComponent implements OnInit {
   }
 
   enforceSingleSelect(filter: Filter): void {
-    _.remove(this.config.filterConfig.appliedFilters, {title: filter.title});
+    _.remove(this.config.filterConfig.appliedFilters, {title: filter.field.title});
   }
 
   filterExists(filter: Filter): boolean {
     let foundFilter = _.find(this.config.filterConfig.appliedFilters, {
-      title: filter.title,
+      field: filter.field,
+      query: filter.query,
       value: filter.value
     });
     return foundFilter !== undefined;