diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFloatingAction.js b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFloatingAction.js
deleted file mode 100644
index e989d4dfc..000000000
--- a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFloatingAction.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import { useFormikContext } from 'formik';
-
-import { Intent, Button, Classes } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
-import { useHistory } from 'react-router-dom';
-
-function SMSMessageTemplateFloatingAction() {
-  const history = useHistory();
-  const { isSubmitting } = useFormikContext();
-
-  const handleCloseClick = () => {
-    history.go(-1);
-  };
-
-  return (
-    <div className={'card__footer'}>
-      <Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">
-        <T id={'save'} />
-      </Button>
-      <Button onClick={handleCloseClick} disabled={isSubmitting}>
-        <T id={'close'} />
-      </Button>
-    </div>
-  );
-}
-
-export default SMSMessageTemplateFloatingAction;
diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.js b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.js
deleted file mode 100644
index 439272f65..000000000
--- a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import { Formik, Form } from 'formik';
-import { Intent } from '@blueprintjs/core';
-import intl from 'react-intl-universal';
-import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
-
-import { CreateSMSMessageTemplateSchema } from './SMSMessageTemplateForm.schema';
-import SMSMessageTemplateFormContent from './SMSMessageTemplateFormContent';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-
-import { compose } from 'utils';
-
-export const defaultInitialValues = {
-  entries: [
-    {
-      notification: '',
-      service: '',
-      message: '',
-      auto: true,
-      switch: true,
-    },
-  ],
-};
-
-function SMSMessageTemplateForm({
-  // #withDashboardActions
-  changePreferencesPageTitle,
-}) {
-  // Form initial values.
-  const initialValues = {
-    ...defaultInitialValues,
-  };
-
-  React.useEffect(() => {
-    changePreferencesPageTitle(
-      intl.get('sms_message_template.label.sms_messages_template'),
-    );
-  }, [changePreferencesPageTitle]);
-
-  // Handles form submit.
-  const handleSubmit = (values, { setSubmitting, setErrors, resetForm }) => {};
-
-  return (
-    <div
-      className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_STRIP_STYLE)}
-    >
-      <Formik
-        validationSchema={CreateSMSMessageTemplateSchema}
-        initialValues={initialValues}
-        onSubmit={handleSubmit}
-        component={SMSMessageTemplateFormContent}
-      />
-    </div>
-  );
-}
-export default compose(withDashboardActions)(SMSMessageTemplateForm);
diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.schema.js b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.schema.js
deleted file mode 100644
index 584e342e5..000000000
--- a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateForm.schema.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as Yup from 'yup';
-import intl from 'react-intl-universal';
-import { DATATYPES_LENGTH } from 'common/dataTypes';
-import { isBlank } from 'utils';
-
-const Schema = Yup.object().shape({
-
-  entries: Yup.array().of(
-    Yup.object().shape({
-      notification: Yup.string().nullable(),
-      service: Yup.number().nullable(),
-      message: Yup.string().max(DATATYPES_LENGTH.TEXT).nullable(),
-      auto:Yup.boolean(),
-      switch:Yup.boolean(),
-     
-    }),
-  ),
-})
-export const CreateSMSMessageTemplateSchema = Schema;
diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormBody.js b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormBody.js
deleted file mode 100644
index 90067fb43..000000000
--- a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormBody.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { FastField } from 'formik';
-
-import SMSMessageTemplatesEntriesTable from './SMSMessageTemplatesEntriesTable';
-
-export default function SMSMessageTemplateFormBody() {
-  return (
-    <FastField name={'entries'}>
-      {({
-        form: { values, setFieldValue },
-        field: { value },
-        meta: { error, touched },
-      }) => (
-        <SMSMessageTemplatesEntriesTable
-          entries={value}
-          onUpdateData={(newEntries) => {
-            setFieldValue('entries', newEntries);
-          }}
-        />
-      )}
-    </FastField>
-  );
-}
diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormContent.js b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormContent.js
deleted file mode 100644
index 217361a35..000000000
--- a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateFormContent.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { Form } from 'formik';
-import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
-
-import SMSMessageTemplateFormBody from './SMSMessageTemplateFormBody';
-import SMSMessageTemplateFloatingAction from './SMSMessageTemplateFloatingAction';
-
-export default function SMSMessageTemplateFormContent() {
-  return (
-    <Form>
-      <SMSMessageTemplateFormBody />
-      <SMSMessageTemplateFloatingAction />
-    </Form>
-  );
-}
diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplatesEntriesTable.js b/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplatesEntriesTable.js
deleted file mode 100644
index 67ed04c43..000000000
--- a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplatesEntriesTable.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from 'react';
-import intl from 'react-intl-universal';
-import {
-  InputGroupCell,
-  TextAreaCell,
-  SwitchFieldCell,
-} from 'components/DataTableCells';
-import { DataTableEditable } from 'components';
-import { compose, updateTableCell } from 'utils';
-
-export default function SMSMessageTemplatesEntriesTable({
-  onUpdateData,
-  entries,
-}) {
-  const columns = React.useMemo(() => [
-    {
-      Header: intl.get('sms_message_template.label_Notification'),
-      accessor: 'notification',
-      Cell: InputGroupCell,
-      disableSortBy: true,
-      width: '150',
-    },
-    {
-      Header: intl.get('service'),
-      accessor: 'service',
-      Cell: InputGroupCell,
-      disableSortBy: true,
-      width: '150',
-    },
-    {
-      Header: intl.get('sms_message_template.label_mesage'),
-      accessor: 'message',
-      // Cell: TextAreaCell,
-      Cell: InputGroupCell,
-      disableSortBy: true,
-      width: '150',
-    },
-    {
-      Header: intl.get('sms_message_template.label_auto'),
-      accessor: 'auto',
-      Cell: SwitchFieldCell,
-      disableSortBy: true,
-      disableResizing: true,
-      width: '120',
-    },
-  ]);
-
-  const handleUpdateData = React.useCallback(
-    (rowIndex, columnId, value) => {
-      const newRows = compose(updateTableCell(rowIndex, columnId, value))(
-        entries,
-      );
-      onUpdateData(newRows);
-    },
-    [onUpdateData, entries],
-  );
-
-  return (
-    <DataTableEditable
-      columns={columns}
-      data={entries}
-      payload={{
-        errors: [],
-        updateData: handleUpdateData,
-      }}
-    />
-  );
-}
diff --git a/src/containers/Preferences/SMSMessageTemplates/index.js b/src/containers/Preferences/SMSMessageTemplates/index.js
deleted file mode 100644
index 3a086ca9b..000000000
--- a/src/containers/Preferences/SMSMessageTemplates/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { SMSMessageTemplateProvider } from './SMSMessageTemplateProvider';
-import SMSMessageTemplateForm from './SMSMessageTemplateForm';
-
-/**
- * SMS message template.
- */
-export default function SMSMessageTemplates() {
-  return (
-    <SMSMessageTemplateProvider>
-      <SMSMessageTemplateForm />
-    </SMSMessageTemplateProvider>
-  );
-}
diff --git a/src/containers/Preferences/SMSMessagesTemplates/SMSMessagesTemplatesDataTable.js b/src/containers/Preferences/SMSMessagesTemplates/SMSMessagesTemplatesDataTable.js
new file mode 100644
index 000000000..ad5b8682c
--- /dev/null
+++ b/src/containers/Preferences/SMSMessagesTemplates/SMSMessagesTemplatesDataTable.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import {
+  DataTableEditable,
+  DataTable,
+  DashboardContentTable,
+} from 'components';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+
+import { useSMSMessagesTemplatesTableColumns } from './components';
+
+import { compose } from 'utils';
+
+function SMSMessagesTemplatesDataTable({
+  // #withDashboardActions
+  changePreferencesPageTitle,
+}) {
+  // Table columns.
+  const columns = useSMSMessagesTemplatesTableColumns();
+
+  React.useEffect(() => {
+    changePreferencesPageTitle(
+      intl.get('sms_message_template.label.sms_messages_template'),
+    );
+  }, [changePreferencesPageTitle]);
+
+  const DATA = [
+    {
+      notification: 'notification',
+      service: 'service',
+      message: 'message',
+      auto: true,
+    },
+    {
+      notification: 'notification',
+      service: 'service',
+      message: 'message',
+      auto: false,
+    },
+  ];
+  return (
+    <DataTableEditable
+      columns={columns}
+      data={[]}
+      // loading={}
+      // progressBarLoading={}
+      TableLoadingRenderer={TableSkeletonRows}
+      noInitialFetch={true}
+    />
+  );
+}
+export default compose(withDashboardActions)(SMSMessagesTemplatesDataTable);
diff --git a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateProvider.js b/src/containers/Preferences/SMSMessagesTemplates/SMSMessagesTemplatesProvider.js
similarity index 51%
rename from src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateProvider.js
rename to src/containers/Preferences/SMSMessagesTemplates/SMSMessagesTemplatesProvider.js
index b90df0a4e..474ea97b1 100644
--- a/src/containers/Preferences/SMSMessageTemplates/SMSMessageTemplateProvider.js
+++ b/src/containers/Preferences/SMSMessagesTemplates/SMSMessagesTemplatesProvider.js
@@ -1,17 +1,14 @@
 import React from 'react';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
-import { useSettings, useSaveSettings } from 'hooks/query';
+import { useSettings } from 'hooks/query';
 
-import PreferencesPageLoader from '../PreferencesPageLoader';
-
-const SMSMessageTemplateContext = React.createContext();
+const SMSMessagesTemplatesContext = React.createContext();
 
 /**
- * SMS message template provider.
+ * SMS message templates provider.
  */
-function SMSMessageTemplateProvider({ ...props }) {
-  
+function SMSMessagesTemplatesProvider({ ...props }) {
   //Fetches Organization Settings.
   const { isLoading: isSettingsLoading } = useSettings();
 
@@ -26,17 +23,13 @@ function SMSMessageTemplateProvider({ ...props }) {
       )}
     >
       <div className={classNames(CLASSES.CARD)}>
-        {isSettingsLoading ? (
-          <PreferencesPageLoader />
-        ) : (
-          <SMSMessageTemplateContext.Provider value={provider} {...props} />
-        )}
+        <SMSMessagesTemplatesContext.Provider value={provider} {...props} />
       </div>
     </div>
   );
 }
 
 const useSMSMessageTemplateContext = () =>
-  React.useContext(SMSMessageTemplateContext);
+  React.useContext(SMSMessagesTemplatesContext);
 
-export { SMSMessageTemplateProvider, useSMSMessageTemplateContext };
+export { SMSMessagesTemplatesProvider, useSMSMessageTemplateContext };
diff --git a/src/containers/Preferences/SMSMessagesTemplates/components.js b/src/containers/Preferences/SMSMessagesTemplates/components.js
new file mode 100644
index 000000000..5824a65c2
--- /dev/null
+++ b/src/containers/Preferences/SMSMessagesTemplates/components.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import {
+  InputGroupCell,
+  TextAreaCell,
+  SwitchFieldCell,
+} from 'components/DataTableCells';
+
+export function useSMSMessagesTemplatesTableColumns() {
+  return React.useMemo(() => [
+    {
+      Header: intl.get('sms_message_template.label_Notification'),
+      accessor: 'notification',
+      className: 'notification',
+      width: '150',
+    },
+    {
+      Header: intl.get('service'),
+      accessor: 'service',
+      className: 'service',
+      width: '100',
+    },
+    {
+      Header: intl.get('sms_message_template.label_mesage'),
+      accessor: 'message',
+      className: 'message',
+      width: '180',
+    },
+    {
+      Header: intl.get('sms_message_template.label_auto'),
+      accessor: 'auto',
+      Cell: SwitchFieldCell,
+      className: 'auto',
+      disableSortBy: true,
+      disableResizing: true,
+      width: '80',
+    },
+  ]);
+}
diff --git a/src/containers/Preferences/SMSMessagesTemplates/index.js b/src/containers/Preferences/SMSMessagesTemplates/index.js
new file mode 100644
index 000000000..44f4df09b
--- /dev/null
+++ b/src/containers/Preferences/SMSMessagesTemplates/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { SMSMessagesTemplatesProvider } from './SMSMessagesTemplatesProvider';
+import SMSMessagesTemplatesDataTable from './SMSMessagesTemplatesDataTable';
+
+/**
+ * SMS messages templates.
+ */
+export default function SMSMessagesTemplates() {
+  return (
+    <SMSMessagesTemplatesProvider>
+      <SMSMessagesTemplatesDataTable />
+    </SMSMessagesTemplatesProvider>
+  );
+}
diff --git a/src/routes/preferences.js b/src/routes/preferences.js
index 080b747c1..75b0990fe 100644
--- a/src/routes/preferences.js
+++ b/src/routes/preferences.js
@@ -4,7 +4,7 @@ import Accountant from 'containers/Preferences/Accountant/Accountant';
 // import Accounts from 'containers/Preferences/Accounts/Accounts';
 import Currencies from 'containers/Preferences/Currencies/Currencies';
 import Item from 'containers/Preferences/Item';
-import SMSMessageTemplates from '../containers/Preferences/SMSMessageTemplates';
+import SMSMessagesTemplates from '../containers/Preferences/SMSMessagesTemplates';
 import DefaultRoute from '../containers/Preferences/DefaultRoute';
 
 const BASE_URL = '/preferences';
@@ -37,7 +37,7 @@ export default [
   },
   {
     path: `${BASE_URL}/sms-message`,
-    component: SMSMessageTemplates,
+    component: SMSMessagesTemplates,
     exact: true,
   },
   {