diff --git a/app/controllers/admin/messages.js b/app/controllers/admin/messages.js
index 9612cda0d9a..99471b42dce 100644
--- a/app/controllers/admin/messages.js
+++ b/app/controllers/admin/messages.js
@@ -1,24 +1,77 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
+import EmberTableControllerMixin from 'open-event-frontend/mixins/ember-table-controller';
 
-export default class extends Controller {
-  @action
-  save() {
-    try {
-      const systemMessages = this.model;
-      systemMessages.forEach(systemMessage => {
-        systemMessage.save();
-      });
-      this.notify.success(this.l10n.t('Changes have been saved successfully'),
-        {
-          id: 'message_success'
-        });
-    } catch (e) {
-      console.error('Error while saving system messages', e);
-      this.notify.error(e.errors[0].detail,
-        {
-          id: 'change_error_message'
-        });
+export default class extends Controller.extend(EmberTableControllerMixin) {
+per_page = 100;
+
+sort_dir = 'ASC';
+
+get columns() {
+  return [
+    {
+      name      : this.l10n.t('Recipients'),
+      valuePath : 'recipient'
+    },
+    {
+      name      : this.l10n.t('Trigger'),
+      valuePath : 'action'
+    },
+    {
+      name      : this.l10n.t('Email Message'),
+      valuePath : 'emailMessage',
+
+      cellComponent   : 'ui-table/cell/cell-title-message',
+      extraValuePaths : ['emailSubject'],
+      options         : {
+        subject : 'emailSubject',
+        message : 'emailMessage'
+      }
+    },
+    {
+      name            : this.l10n.t('Notification Message'),
+      valuePath       : 'notificationMessage',
+      cellComponent   : 'ui-table/cell/cell-title-message',
+      extraValuePaths : ['notificationTitle'],
+      options         : {
+        subject : 'notificationTitle',
+        message : 'notificationMessage'
+      }
+    },
+    {
+      name            : this.l10n.t('Options'),
+      valuePath       : 'option',
+      extraValuePaths : ['mailStatus', 'notificationStatus', 'userControlStatus'],
+      cellComponent   : 'ui-table/cell/admin/messages/cell-options'
+    },
+    {
+      name            : this.l10n.t('Time/Date Sent Out'),
+      valuePath       : 'sentAt',
+      headerComponent : 'tables/headers/sort',
+      isSortable      : true,
+      cellComponent   : 'ui-table/cell/cell-simple-date'
     }
+
+  ];
+}
+
+@action
+save() {
+  try {
+    const systemMessages = this.model;
+    Array.from(systemMessages).forEach(systemMessage => {
+      systemMessage.save();
+    });
+    this.notify.success(this.l10n.t('Changes have been saved successfully'),
+      {
+        id: 'message_success'
+      });
+  } catch (e) {
+    console.error('Error while saving system messages', e);
+    this.notify.error(e.errors[0].detail,
+      {
+        id: 'change_error_message'
+      });
   }
 }
+}
diff --git a/app/controllers/admin/messages/list.js b/app/controllers/admin/messages/list.js
deleted file mode 100644
index 6051cb5b0d4..00000000000
--- a/app/controllers/admin/messages/list.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import Controller from '@ember/controller';
-import EmberTableControllerMixin from 'open-event-frontend/mixins/ember-table-controller';
-
-export default class extends Controller.extend(EmberTableControllerMixin) {
-per_page = 100;
-
-sort_by = 'time';
-
-sort_dir = 'ASC';
-
-get columns() {
-  return [
-    {
-      name            : this.l10n.t('Recipients'),
-      valuePath       : 'recipient',
-      headerComponent : 'tables/headers/sort',
-      isSortable      : true
-    },
-    {
-      name      : this.l10n.t('Trigger'),
-      valuePath : 'action'
-    },
-    {
-      name      : this.l10n.t('Email Message'),
-      valuePath : 'emailMessage',
-
-      cellComponent   : 'ui-table/cell/cell-title-message',
-      extraValuePaths : ['emailSubject'],
-      options         : {
-        subject : 'emailSubject',
-        message : 'emailMessage'
-      }
-    },
-    {
-      name            : this.l10n.t('Notification Message'),
-      valuePath       : 'notificationMessage',
-      cellComponent   : 'ui-table/cell/cell-title-message',
-      extraValuePaths : ['notificationTitle'],
-      options         : {
-        subject : 'notificationTitle',
-        message : 'notificationMessage'
-      }
-    },
-    {
-      name            : this.l10n.t('Options'),
-      valuePath       : 'option',
-      extraValuePaths : ['mailStatus', 'notificationStatus', 'userControlStatus'],
-      cellComponent   : 'ui-table/cell/admin/messages/cell-options'
-    },
-    {
-      name            : this.l10n.t('Time/Date Sent Out'),
-      valuePath       : 'sentAt',
-      headerComponent : 'tables/headers/sort',
-      isSortable      : true,
-      cellComponent   : 'ui-table/cell/cell-simple-date'
-    }
-
-  ];
-}
-}
-
diff --git a/app/router.js b/app/router.js
index feea5a25361..3a5e0c3839d 100644
--- a/app/router.js
+++ b/app/router.js
@@ -153,9 +153,6 @@ Router.map(function() {
     this.route('all', { path: '/:notification_state' });
   });
   this.route('admin', function() {
-    this.route('messages', function() {
-      this.route('list');
-    });
     this.route('events', function() {
       this.route('list', { path: '/:events_status' });
       this.route('import');
diff --git a/app/routes/admin/messages.js b/app/routes/admin/messages.js
index c6d0426a643..48799f04552 100644
--- a/app/routes/admin/messages.js
+++ b/app/routes/admin/messages.js
@@ -1,13 +1,17 @@
-import classic from 'ember-classic-decorator';
 import Route from '@ember/routing/route';
+import EmberTableRouteMixin from 'open-event-frontend/mixins/ember-table-route';
 
-@classic
-export default class MessagesRoute extends Route {
+export default class extends Route.extend(EmberTableRouteMixin) {
   titleToken() {
     return this.l10n.t('Messages');
   }
 
-  model() {
-    return this.store.query('message-setting', {});
+  async model(params) {
+    let queryString = {
+      'page[size]'   : params.per_page || 100,
+      'page[number]' : params.page || 1
+    };
+    queryString = this.applySortFilters(queryString, params);
+    return this.asArray(this.store.query('message-setting', queryString));
   }
 }
diff --git a/app/routes/admin/messages/index.js b/app/routes/admin/messages/index.js
deleted file mode 100644
index 7e0979e1dfd..00000000000
--- a/app/routes/admin/messages/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import classic from 'ember-classic-decorator';
-import Route from '@ember/routing/route';
-
-@classic
-export default class IndexRoute extends Route {
-  templateName = 'admin/messages/list';
-
-  beforeModel() {
-    super.beforeModel(...arguments);
-    this.transitionTo('admin.messages.list');
-  }
-}
diff --git a/app/routes/admin/messages/list.js b/app/routes/admin/messages/list.js
deleted file mode 100644
index d9cc9f3b5e0..00000000000
--- a/app/routes/admin/messages/list.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Route from '@ember/routing/route';
-import EmberTableRouteMixin from 'open-event-frontend/mixins/ember-table-route';
-
-export default class extends Route.extend(EmberTableRouteMixin) {
-
-  async model(params) {
-    const searchField = 'recipient';
-    const filterOptions = this.applySearchFilters([], params, searchField);
-    let queryString = {
-      filter        : filterOptions,
-      'page[size]'  : params.per_page || 100,
-      'page[number' : params.page || 1
-    };
-    queryString = this.applySortFilters(queryString, params);
-    return this.asArray(this.modelFor('admin.messages', queryString));
-  }
-
-}
diff --git a/app/templates/admin/messages.hbs b/app/templates/admin/messages.hbs
index aca495f85cd..f29a36a4ce6 100644
--- a/app/templates/admin/messages.hbs
+++ b/app/templates/admin/messages.hbs
@@ -1,8 +1,25 @@
 <div class="ui grid stackable">
   <div class="row">
-    {{outlet}}
-    <div class="sixteen wide {{if this.device.isMobile 'center aligned'}} column">
-      <button class="ui blue button left floated {{if this.isLoading 'loading'}}" {{action 'save'}}>{{t 'Save'}}</button>
+    <div class="sixteen wide column">
+      <Tables::Default
+        @columns={{this.columns}}
+        @rows={{this.model.data}}
+        @currentPage={{this.page}}
+        @pageSize={{this.per_page}}
+        @searchQuery={{this.search}}
+        @sortBy={{this.sort_by}}
+        @sortDir={{this.sort_dir}}
+        @metaData={{this.model.meta}}
+        @filterOptions={{this.filterOptions}}
+        @hideSearchBox={{true}}
+        @widthConstraint="eq-container"
+        @resizeMode="fluid"
+        @fillMode="equal-column" />
     </div>
   </div>
+  <div class="row">
+		<div class="sixteen wide {{if this.device.isMobile 'center aligned'}} column">
+		  <button class="ui blue button left floated {{if this.isLoading 'loading'}}" {{action 'save'}}>{{t 'Save'}}</button>
+		</div>
+	</div>
 </div>