diff --git a/.eslintrc.js b/.eslintrc.js
index bbd8352..b587fb5 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,4 +1,7 @@
 module.exports = {
+  globals: {
+    server: true,
+  },
   root: true,
   parserOptions: {
     ecmaVersion: 6,
diff --git a/addon/components/user-filters-manager.coffee b/addon/components/user-filters-manager.coffee
index 2b2a2e6..e13f640 100644
--- a/addon/components/user-filters-manager.coffee
+++ b/addon/components/user-filters-manager.coffee
@@ -2,4 +2,8 @@ import Ember from 'ember'
 
 export default Ember.Component.extend
   scope_key: null
-  user_filters: (-> @store.peekAll('dunlop/user-filter').filterBy('scope_key', @get('scope_key'))).property()
+  content: null
+  class: 'tiny black'
+  actions:
+    open_modal: ->
+      @modal 'user-filters-manager/modal', scope_key: @get('scope_key'), content: @get('content')
diff --git a/addon/models/dunlop/user-filter.coffee b/addon/models/dunlop/user-filter.coffee
index f4bb737..1d6f850 100644
--- a/addon/models/dunlop/user-filter.coffee
+++ b/addon/models/dunlop/user-filter.coffee
@@ -1,6 +1,8 @@
 import DS from 'ember-data'
 
 export default DS.Model.extend
-  scope_key: DS.attr('string')
-  filters: DS.attr(defaultValue: -> {})
+  scope_key:  DS.attr('string')
+  name:       DS.attr('string')
+  desription: DS.attr('string')
+  filters:    DS.attr(defaultValue: -> {})
   is_default: DS.attr('boolean', defaultValue: false)
diff --git a/app/components/user-filters-manager/modal.coffee b/app/components/user-filters-manager/modal.coffee
new file mode 100644
index 0000000..e97f93f
--- /dev/null
+++ b/app/components/user-filters-manager/modal.coffee
@@ -0,0 +1,37 @@
+import ModalBase from 'ember-cli-dunlop/mixins/modal-base'
+import Ember from 'ember'
+{set} = Ember
+
+export default ModalBase.extend
+  scope_key: Ember.computed.alias 'modal_options.scope_key'
+  content: Ember.computed.alias 'modal_options.content'
+  error: ''
+  new_filter_name_blank: Ember.computed 'new_filter_name', ->
+    return true unless name = @get('new_filter_name')
+    return true unless typeof name is 'string'
+    return true if name.match /^\s*$/
+    false
+
+
+  user_filters: Ember.computed 'scope_key', ->
+    return Ember.A() unless scope_key = @get('scope_key')
+    @store.peekAll('dunlop/user-filter').filterBy('scope_key', scope_key).sortBy('name')
+  actions:
+    apply_filter: (user_filter) ->
+      return @set('error', 'no content given') unless content = @get('content')
+      return @set('error', 'content has no filters object to manipulate') unless typeof content.filters is 'object'
+      Object.keys(content.filters).forEach (key) -> delete content.filters[key]
+      for key, value of user_filter.get('filters')
+        set content.filters, key, value
+      content.reload() if typeof content.reload is 'function'
+      @set 'globals.flash_message', "Filter #{user_filter.get('name')}"
+      @send 'close'
+    create_new_filter: ->
+      return @set('error', 'Current given content filters do not respond to toProperties method') unless filters = @get('content.filters').toProperties()
+      new_filter = @store.createRecord 'dunlop/user-filter',
+        name: @get('new_filter_name')
+        scope_key: @get('scope_key')
+        filters: filters
+      new_filter.save()
+      @send 'close'
+
diff --git a/app/templates/components/user-filters-manager.emblem b/app/templates/components/user-filters-manager.emblem
index 0a90f09..52d0765 100644
--- a/app/templates/components/user-filters-manager.emblem
+++ b/app/templates/components/user-filters-manager.emblem
@@ -1 +1,3 @@
+button.ui.icon.button class=class click='open_modal'
+  i.filter.icon
 = yield
diff --git a/app/templates/components/user-filters-manager/-modal.emblem b/app/templates/components/user-filters-manager/-modal.emblem
new file mode 100644
index 0000000..b33e73d
--- /dev/null
+++ b/app/templates/components/user-filters-manager/-modal.emblem
@@ -0,0 +1,19 @@
+/ https://semantic-ui.com/elements/list.html => Floated
+if error
+  .ui.negative.message= error
+.ui.middle.aligned.divided.list
+  each user_filters as |user_filter|
+    li.item
+      .right.floated.content
+        button.ui.tiny.secondary.button{action 'apply_filter' user_filter}= t 'general.apply'
+      .content
+        if user_filter.is_default
+          .header= user_filter.name
+        else
+          = user_filter.name
+
+.ui.horizontal.divider Create new from current selection
+.ui.action.input
+  = input value=new_filter_name
+  button.ui.primary.button disabled=new_filter_name_blank click='create_new_filter'
+    span CREATE
diff --git a/package.json b/package.json
index 8970dba..56affb3 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "ember-cli-sass": ">=7.0.0"
   },
   "devDependencies": {
+    "active-model-adapter": "^2.2.0",
     "broccoli-asset-rev": "^2.4.5",
     "ember-ajax": "^3.0.0",
     "ember-cli": "2.16.2",
@@ -33,6 +34,7 @@
     "ember-cli-eslint": "^4.2.3",
     "ember-cli-htmlbars-inline-precompile": "^1.0.2",
     "ember-cli-inject-live-reload": "^1.4.1",
+    "ember-cli-mirage": "^0.4.9",
     "ember-cli-moment-shim": "^3.5.0",
     "ember-cli-pagination": "^3.0.2",
     "ember-cli-qunit": "^4.3.0",
diff --git a/tests/dummy/app/adapters/application.coffee b/tests/dummy/app/adapters/application.coffee
new file mode 100644
index 0000000..40f00a9
--- /dev/null
+++ b/tests/dummy/app/adapters/application.coffee
@@ -0,0 +1,8 @@
+import DunlopAdapter from 'ember-cli-dunlop/adapters/application'
+
+## Override the default adapter with the `DS.ActiveModelAdapter` which
+window.client_id ||= "client#{Math.round(Math.random() * 100000)}"
+Ember.$.ajaxPrefilter (options, oriOpt, jqXHR)->
+  jqXHR.setRequestHeader 'client-id', window.client_id
+
+export default DunlopAdapter.extend()
diff --git a/tests/dummy/app/initializers/globals.coffee b/tests/dummy/app/initializers/globals.coffee
index 307f80f..8f05cf1 100644
--- a/tests/dummy/app/initializers/globals.coffee
+++ b/tests/dummy/app/initializers/globals.coffee
@@ -103,7 +103,7 @@ initialize = (application) ->
   application.inject 'component', 'globals', 'service:globals'
   application.inject 'component', 'router', 'router:main'
   #application.inject 'component', 'store', 'store:main'
-  #application.inject 'component', 'store', 'service:store'
+  application.inject 'component', 'store', 'service:store'
   application.inject 'view', 'globals', 'service:globals'
   application.inject 'router', 'globals', 'service:globals'
 
diff --git a/tests/dummy/app/routes/table-filters/user-filters-manager.coffee b/tests/dummy/app/routes/table-filters/user-filters-manager.coffee
index ffde871..c02b572 100644
--- a/tests/dummy/app/routes/table-filters/user-filters-manager.coffee
+++ b/tests/dummy/app/routes/table-filters/user-filters-manager.coffee
@@ -1,11 +1,20 @@
 import Ember from 'ember'
-import PagedArray from 'ember-cli-pagination/local/paged-array'
+#import PagedArray from 'ember-cli-pagination/local/paged-array'
 
 export default Ember.Route.extend
   model: (params) ->
-    Ember.A([
-      @store.createRecord('dunlop/user-filter', scope_key: 'panda/action-list', filters: {a: 42}, is_default: true)
-      @store.createRecord('dunlop/user-filter', scope_key: 'panda/action-list', filters: {a: 44}, is_default: false)
-      @store.createRecord('dunlop/user-filter', scope_key: 'migration-adapter/blurp', filters: {a: 44}, is_default: true)
+    result = Ember.A([
+      @store.createRecord('dunlop/user-filter', name: 'Filter1-2', scope_key: 'panda/action-list',       filters: {a: 44}, is_default: false, desription: 'I describe<br>Filter1-2')
+      @store.createRecord('dunlop/user-filter', name: 'Filter1-1', scope_key: 'panda/action-list',       filters: {a: 42}, is_default: true,  desription: 'I describe<br>Filter1-1')
+      @store.createRecord('dunlop/user-filter', name: 'Filter2-1', scope_key: 'migration-adapter/blurp', filters: {a: 44}, is_default: true,  desription: 'I describe<br>Filter2-1')
     ])
+    filters = Ember.Object.create
+      key1_eq: 45
+      key2_matches: 'blah%'
+    result.filters = filters
+    result.reload = ->
+      console.log "REALOADING FILTERS VIRTUALLY SINCE IT IS NOT AN ember-cli-dunlop/utils/paged-remote-array"
+      # the reference to filters should be kept intact, so outputting filters should work, the component should mutate it
+      console.log filters.toProperties() #TODO: console.log is not the eventual desired way of testing
+    result
 
diff --git a/tests/dummy/app/templates/table-filters/user-filters-manager.emblem b/tests/dummy/app/templates/table-filters/user-filters-manager.emblem
index 0a72761..e99db33 100644
--- a/tests/dummy/app/templates/table-filters/user-filters-manager.emblem
+++ b/tests/dummy/app/templates/table-filters/user-filters-manager.emblem
@@ -1 +1,2 @@
 h1 user-filters-manager
+.ui.segment= user-filters-manager scope_key='panda/action-list' content=model
diff --git a/tests/dummy/mirage/config.coffee b/tests/dummy/mirage/config.coffee
new file mode 100644
index 0000000..dec2ac2
--- /dev/null
+++ b/tests/dummy/mirage/config.coffee
@@ -0,0 +1,29 @@
+config = ->
+  @post '/dunlop/user_filters', (schema, request) ->
+    attributes = JSON.parse(request.requestBody)['dunlop/user_filter']
+    schema.dunlopUserFilters.create(attributes)
+
+  # These comments are here to help you get started. Feel free to delete them.
+
+  ###
+    Config (with defaults).
+
+    Note: these only affect routes defined *after* them!
+  ###
+
+  # this.urlPrefix = '';    // make this `http://localhost:8080`, for example, if your API is on a different server
+  # this.namespace = '';    // make this `/api`, for example, if your API is namespaced
+  # this.timing = 400;      // delay for each request, automatically set to 0 during testing
+
+  ###
+    Shorthand cheatsheet:
+
+    this.get('/posts');
+    this.post('/posts');
+    this.get('/posts/:id');
+    this.put('/posts/:id'); // or this.patch
+    this.del('/posts/:id');
+
+    http://www.ember-cli-mirage.com/docs/v0.3.x/shorthands/
+  ###
+export default config
diff --git a/tests/dummy/mirage/factories/dunlop-user-filter.js b/tests/dummy/mirage/factories/dunlop-user-filter.js
new file mode 100644
index 0000000..8501897
--- /dev/null
+++ b/tests/dummy/mirage/factories/dunlop-user-filter.js
@@ -0,0 +1,4 @@
+import { Factory } from 'ember-cli-mirage';
+
+export default Factory.extend({
+});
diff --git a/tests/dummy/mirage/models/dunlop-user-filter.coffee b/tests/dummy/mirage/models/dunlop-user-filter.coffee
new file mode 100644
index 0000000..65f2e68
--- /dev/null
+++ b/tests/dummy/mirage/models/dunlop-user-filter.coffee
@@ -0,0 +1,4 @@
+import { Model } from 'ember-cli-mirage'
+
+export default Model.extend()
+
diff --git a/tests/dummy/mirage/scenarios/default.js b/tests/dummy/mirage/scenarios/default.js
new file mode 100644
index 0000000..adb3af4
--- /dev/null
+++ b/tests/dummy/mirage/scenarios/default.js
@@ -0,0 +1,9 @@
+export default function(/* server */) {
+
+  /*
+    Seed your development database using your factories.
+    This data will not be loaded in your tests.
+  */
+
+  // server.createList('post', 10);
+}
diff --git a/tests/dummy/mirage/serializers/application.coffee b/tests/dummy/mirage/serializers/application.coffee
new file mode 100644
index 0000000..89feda1
--- /dev/null
+++ b/tests/dummy/mirage/serializers/application.coffee
@@ -0,0 +1,5 @@
+import { JSONAPISerializer } from 'ember-cli-mirage'
+
+export default JSONAPISerializer.extend
+  typeKeyForModel: (model) ->
+    model.modelName.replace(/^dunlop-/, 'dunlop/')
diff --git a/tests/helpers/destroy-app.js b/tests/helpers/destroy-app.js
index c3d4d1a..1807e21 100644
--- a/tests/helpers/destroy-app.js
+++ b/tests/helpers/destroy-app.js
@@ -2,4 +2,7 @@ import Ember from 'ember';
 
 export default function destroyApp(application) {
   Ember.run(application, 'destroy');
+  if (window.server) {
+    window.server.shutdown();
+  }
 }