diff --git a/admin/src/components/ActionButtons/index.js b/admin/src/components/ActionButtons/index.js
index ced5c85..a4b043f 100644
--- a/admin/src/components/ActionButtons/index.js
+++ b/admin/src/components/ActionButtons/index.js
@@ -23,8 +23,8 @@ const ActionButtons = ({ diff }) => {
 
   return (
     <ActionButtonsStyling>
-      <Button disabled={isEmpty(diff)} color="primary" label="Import" onClick={() => openModal('import')} />
-      <Button disabled={isEmpty(diff)} color="primary" label="Export" onClick={() => openModal('export')} />
+      <Button disabled={isEmpty(diff.diff)} color="primary" label="Import" onClick={() => openModal('import')} />
+      <Button disabled={isEmpty(diff.diff)} color="primary" label="Export" onClick={() => openModal('export')} />
       <ConfirmModal
         isOpen={modalIsOpen}
         onClose={closeModal}
diff --git a/admin/src/components/ConfigList/index.js b/admin/src/components/ConfigList/index.js
index d2caba7..60a7c05 100644
--- a/admin/src/components/ConfigList/index.js
+++ b/admin/src/components/ConfigList/index.js
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Table } from '@buffetjs/core';
+import { isEmpty } from 'lodash';
 import ConfigDiff from '../ConfigDiff';
 
 const headers = [
@@ -8,8 +9,8 @@ const headers = [
     value: 'config_name',
   },
   {
-    name: 'Database table',
-    value: 'table_name',
+    name: 'Config type',
+    value: 'config_type',
   },
   {
     name: 'Change',
@@ -17,7 +18,7 @@ const headers = [
   },
 ];
 
-const ConfigList = ({ fileConfig, databaseConfig, diff, isLoading }) => {
+const ConfigList = ({ diff, isLoading }) => {
   const [openModal, setOpenModal] = useState(false);
   const [originalConfig, setOriginalConfig] = useState({});
   const [newConfig, setNewConfig] = useState({});
@@ -25,15 +26,22 @@ const ConfigList = ({ fileConfig, databaseConfig, diff, isLoading }) => {
   const [rows, setRows] = useState([]);
 
   useEffect(() => {
+    if (isEmpty(diff)) {
+      return;
+    }
+
     let formattedRows = [];
-    Object.keys(diff).map((config) => {
-      // @TODO implement different config types, roles/permissions e.g.
+    Object.keys(diff.fileConfig).map((configName) => {
+      const type = configName.split('.')[0]; // Grab the first part of the filename.
+      const name = configName.split(/\.(.+)/)[1].split('.')[0] // Grab the rest of the filename minus the file extension.
+
       formattedRows.push({ 
-        config_name: config,
-        table_name: 'core_store',
+        config_name: name,
+        config_type: type,
         change_type: ''
       });
     });
+
     setRows(formattedRows);
   }, [diff]);
   
@@ -56,10 +64,10 @@ const ConfigList = ({ fileConfig, databaseConfig, diff, isLoading }) => {
       />
       <Table
         headers={headers}
-        onClickRow={(e, data) => {
-          setOriginalConfig(fileConfig.get(data.config_name));
-          setNewConfig(databaseConfig.get(data.config_name));
-          setConfigName(data.config_name);
+        onClickRow={(e, { config_type, config_name }) => {
+          setOriginalConfig(diff.fileConfig[`${config_type}.${config_name}`]);
+          setNewConfig(diff.databaseConfig[`${config_type}.${config_name}`]);
+          setConfigName(`${config_type}.${config_name}`);
           setOpenModal(true);
         }}
         rows={!isLoading ? rows : []}
diff --git a/admin/src/containers/ConfigPage/index.js b/admin/src/containers/ConfigPage/index.js
index c79f40c..b9ef433 100644
--- a/admin/src/containers/ConfigPage/index.js
+++ b/admin/src/containers/ConfigPage/index.js
@@ -2,27 +2,23 @@ import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Map } from 'immutable';
 
-import { getAllConfig } from '../../state/actions/Config';
+import { getAllConfigDiff } from '../../state/actions/Config';
 import ConfigList from '../../components/ConfigList';
 import ActionButtons from '../../components/ActionButtons';
-import difference from '../../helpers/getObjectDiff';
 
 const ConfigPage = () => {
   const dispatch = useDispatch();
   const isLoading = useSelector((state) => state.getIn(['config', 'isLoading']), Map());
-  const fileConfig = useSelector((state) => state.getIn(['config', 'fileConfig']), Map());
-  const databaseConfig = useSelector((state) => state.getIn(['config', 'databaseConfig']), Map());
+  const configDiff = useSelector((state) => state.getIn(['config', 'configDiff']), Map());
 
   useEffect(() => {
-    dispatch(getAllConfig());
+    dispatch(getAllConfigDiff());
   }, []);
 
-  const diff = difference(fileConfig.toJS(), databaseConfig.toJS());
-
   return (
     <div>
-      <ActionButtons diff={diff} />
-      <ConfigList fileConfig={fileConfig} databaseConfig={databaseConfig} isLoading={isLoading} diff={diff} />
+      <ActionButtons diff={configDiff.toJS()} />
+      <ConfigList isLoading={isLoading} diff={configDiff.toJS()} />
     </div>
   );
 }
diff --git a/admin/src/helpers/getObjectDiff.js b/admin/src/helpers/getObjectDiff.js
deleted file mode 100644
index d693c1a..0000000
--- a/admin/src/helpers/getObjectDiff.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { transform, isEqual, isArray, isObject } from 'lodash';
-
-/**
- * Find difference between two objects
- * @param  {object} origObj - Source object to compare newObj against
- * @param  {object} newObj  - New object with potential changes
- * @return {object} differences
- */
-const difference = (origObj, newObj) => {
-  function changes(newObj, origObj) {
-    let arrayIndexCounter = 0
-    return transform(newObj, function (result, value, key) {
-      if (!isEqual(value, origObj[key])) {
-        let resultKey = isArray(origObj) ? arrayIndexCounter++ : key
-        result[resultKey] = (isObject(value) && isObject(origObj[key])) ? changes(value, origObj[key]) : value
-      }
-    })
-  }
-  return changes(newObj, origObj)
-}
-
-export default difference;
\ No newline at end of file
diff --git a/admin/src/state/actions/Config.js b/admin/src/state/actions/Config.js
index 125db60..1277741 100644
--- a/admin/src/state/actions/Config.js
+++ b/admin/src/state/actions/Config.js
@@ -7,14 +7,12 @@
 import { request } from 'strapi-helper-plugin';
 import { Map } from 'immutable';
 
-export function getAllConfig() {
+export function getAllConfigDiff() {
   return async function(dispatch) {
     dispatch(setLoadingState(true));
     try {
-      const databaseConfig = await request('/config-sync/all/from-database', { method: 'GET' });
-      const fileConfig = await request('/config-sync/all/from-files', { method: 'GET' });
-      dispatch(setFileConfigInState(fileConfig));
-      dispatch(setDatabaseConfigInState(databaseConfig));
+      const configDiff = await request('/config-sync/diff', { method: 'GET' });
+      dispatch(setConfigDiffInState(configDiff));
       dispatch(setLoadingState(false));
     } catch(err) {
       strapi.notification.error('notification.error');
@@ -23,18 +21,10 @@ export function getAllConfig() {
   }
 }
 
-export const SET_DATABASE_CONFIG_IN_STATE = 'SET_DATABASE_CONFIG_IN_STATE';
-export function setDatabaseConfigInState(config) {
+export const SET_CONFIG_DIFF_IN_STATE = 'SET_CONFIG_DIFF_IN_STATE';
+export function setConfigDiffInState(config) {
   return {
-    type: SET_DATABASE_CONFIG_IN_STATE,
-    config,
-  };
-}
-
-export const SET_FILE_CONFIG_IN_STATE = 'SET_FILE_CONFIG_IN_STATE';
-export function setFileConfigInState(config) {
-  return {
-    type: SET_FILE_CONFIG_IN_STATE,
+    type: SET_CONFIG_DIFF_IN_STATE,
     config,
   };
 }
@@ -44,8 +34,7 @@ export function exportAllConfig() {
     dispatch(setLoadingState(true));
     try {
       const { message } = await request('/config-sync/export', { method: 'GET' });
-      dispatch(setFileConfigInState(Map({})));
-      dispatch(setDatabaseConfigInState(Map({})));
+      dispatch(setConfigDiffInState(Map({})));
 
       strapi.notification.success(message);
       dispatch(setLoadingState(false));
diff --git a/admin/src/state/reducers/Config/index.js b/admin/src/state/reducers/Config/index.js
index 5739fa4..9989aff 100644
--- a/admin/src/state/reducers/Config/index.js
+++ b/admin/src/state/reducers/Config/index.js
@@ -5,22 +5,18 @@
  */
 
 import { fromJS, Map } from 'immutable';
-import { SET_DATABASE_CONFIG_IN_STATE, SET_FILE_CONFIG_IN_STATE, SET_LOADING_STATE } from '../../actions/Config';
+import { SET_CONFIG_DIFF_IN_STATE, SET_LOADING_STATE } from '../../actions/Config';
 
 const initialState = fromJS({
-  databaseConfig: Map({}),
-  fileConfig: Map({}),
+  configDiff: Map({}),
   isLoading: false,
 });
 
 export default function configReducer(state = initialState, action) {
   switch (action.type) {
-    case SET_DATABASE_CONFIG_IN_STATE:
+    case SET_CONFIG_DIFF_IN_STATE:
       return state
-        .update('databaseConfig', () => fromJS(action.config))
-    case SET_FILE_CONFIG_IN_STATE:
-      return state
-        .update('fileConfig', () => fromJS(action.config))
+        .update('configDiff', () => fromJS(action.config))
     case SET_LOADING_STATE:
       return state
         .update('isLoading', () => fromJS(action.value))