diff --git a/README.md b/README.md
index 89030f2..f4e8e23 100644
--- a/README.md
+++ b/README.md
@@ -66,7 +66,17 @@ npm run build
 npm run develop
 ```
 
-The **Config Sync** plugin should appear in the **Plugins** section of Strapi sidebar after you run app again.
+The **Config Sync** plugin should now appear in the **Settings** section of your Strapi app.
+
+To start tracking your config changes you have to make the first export. This will dump all your configuration data to the `/config/sync` directory. To export, run:
+
+```bash
+# using yarn
+yarn config-sync export
+
+# using npm
+npm run config-sync export
+```
 
 Enjoy 🎉
 
@@ -76,7 +86,7 @@ Complete installation requirements are the exact same as for Strapi itself and c
 
 **Supported Strapi versions**:
 
-- Strapi 4.0.7 (recently tested)
+- Strapi 4.1.5 (recently tested)
 - Strapi ^4.x (use `strapi-plugin-config-sync@^1.0.0`)
 - Strapi ^3.4.x (use `strapi-plugin-config-sync@0.1.6`)
 
diff --git a/admin/src/components/ConfigDiff/index.js b/admin/src/components/ConfigDiff/index.js
index d109ff0..2fc963d 100644
--- a/admin/src/components/ConfigDiff/index.js
+++ b/admin/src/components/ConfigDiff/index.js
@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';
 
 import { ModalLayout, ModalBody, ModalHeader } from '@strapi/design-system/ModalLayout';
-import { ButtonText } from '@strapi/design-system/Text';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Typography } from '@strapi/design-system/Typography';
 
@@ -17,9 +16,9 @@ const ConfigDiff = ({ isOpen, onClose, oldValue, newValue, configName }) => {
       labelledBy="title"
     >
       <ModalHeader>
-        <ButtonText textColor="neutral800" as="h2" id="title">
+        <Typography variant="omega" fontWeight="bold" textColor="neutral800">
           Config changes for {configName}
-        </ButtonText>
+        </Typography>
       </ModalHeader>
       <ModalBody>
         <Grid paddingBottom={4} style={{ textAlign: 'center' }}>
diff --git a/admin/src/components/ConfigList/index.js b/admin/src/components/ConfigList/index.js
index 9b85666..f0409e1 100644
--- a/admin/src/components/ConfigList/index.js
+++ b/admin/src/components/ConfigList/index.js
@@ -3,7 +3,7 @@ import { isEmpty } from 'lodash';
 import { useDispatch } from 'react-redux';
 
 import { Table, Thead, Tbody, Tr, Th } from '@strapi/design-system/Table';
-import { TableLabel } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
 import { Loader } from '@strapi/design-system/Loader';
 
@@ -127,13 +127,13 @@ const ConfigList = ({ diff, isLoading }) => {
               />
             </Th>
             <Th>
-              <TableLabel>Config name</TableLabel>
+              <Typography variant="sigma">Config name</Typography>
             </Th>
             <Th>
-              <TableLabel>Config type</TableLabel>
+              <Typography variant="sigma">Config type</Typography>
             </Th>
             <Th>
-              <TableLabel>State</TableLabel>
+              <Typography variant="sigma">State</Typography>
             </Th>
           </Tr>
         </Thead>
diff --git a/admin/src/components/ConfirmModal/index.js b/admin/src/components/ConfirmModal/index.js
index 0038511..ed56953 100644
--- a/admin/src/components/ConfirmModal/index.js
+++ b/admin/src/components/ConfirmModal/index.js
@@ -3,7 +3,7 @@ import { useIntl } from 'react-intl';
 
 import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import { Button } from '@strapi/design-system/Button';
 import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
@@ -22,10 +22,10 @@ const ConfirmModal = ({ isOpen, onClose, onSubmit, type }) => {
       <DialogBody icon={<ExclamationMarkCircle />}>
         <Stack size={2}>
           <Flex justifyContent="center">
-            <Text id="confirm-description" style={{ textAlign: 'center' }}>
+            <Typography variant="omega" id="confirm-description" style={{ textAlign: 'center' }}>
               {formatMessage({ id: `config-sync.popUpWarning.warning.${type}_1` })}<br />
               {formatMessage({ id: `config-sync.popUpWarning.warning.${type}_2` })}
-            </Text>
+            </Typography>
           </Flex>
         </Stack>
       </DialogBody>
diff --git a/admin/src/containers/ConfigPage/index.js b/admin/src/containers/ConfigPage/index.js
index 4a6ce4f..ea16890 100644
--- a/admin/src/containers/ConfigPage/index.js
+++ b/admin/src/containers/ConfigPage/index.js
@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Map } from 'immutable';
 import { Box } from '@strapi/design-system/Box';
+import { ContentLayout } from '@strapi/design-system/Layout';
 import { useNotification } from '@strapi/helper-plugin';
 import { Alert } from '@strapi/design-system/Alert';
 import { Typography } from '@strapi/design-system/Typography';
@@ -23,7 +24,7 @@ const ConfigPage = () => {
   }, []);
 
   return (
-    <Box paddingLeft={8} paddingRight={8} paddingBottom={8}>
+    <ContentLayout paddingBottom={8}>
       {appEnv === 'production' && (
         <Box paddingBottom={4}>
           <Alert variant="danger">
@@ -35,7 +36,7 @@ const ConfigPage = () => {
       )}
       <ActionButtons />
       <ConfigList isLoading={isLoading} diff={configDiff.toJS()} />
-    </Box>
+    </ContentLayout>
   );
 };
 
diff --git a/admin/src/index.js b/admin/src/index.js
index 50e152e..ea10556 100644
--- a/admin/src/index.js
+++ b/admin/src/index.js
@@ -1,8 +1,8 @@
 import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import pluginId from './helpers/pluginId';
-import pluginIcon from './components/PluginIcon';
 import pluginPermissions from './permissions';
+// import pluginIcon from './components/PluginIcon';
 // import getTrad from './helpers/getTrad';
 
 const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
@@ -18,22 +18,33 @@ export default {
       name,
     });
 
-    app.addMenuLink({
-      to: `/plugins/${pluginId}`,
-      icon: pluginIcon,
-      intlLabel: {
-        id: `${pluginId}.plugin.name`,
-        defaultMessage: 'Config Sync',
+    app.createSettingSection(
+      {
+        id: pluginId,
+        intlLabel: {
+          id: `${pluginId}.plugin.name`,
+          defaultMessage: 'Config Sync',
+        },
       },
-      Component: async () => {
-        const component = await import(
-          /* webpackChunkName: "config-sync-settings-page" */ './containers/App'
-        );
+      [
+        {
+          intlLabel: {
+            id: `${pluginId}.Settings.Tool.Title`,
+            defaultMessage: 'Tools',
+          },
+          id: 'config-sync-page',
+          to: `/settings/${pluginId}`,
+          Component: async () => {
+            const component = await import(
+              /* webpackChunkName: "config-sync-settings-page" */ './containers/App'
+            );
 
-        return component;
-      },
-      permissions: pluginPermissions['menu-link'],
-    });
+            return component;
+          },
+          permissions: pluginPermissions['settings'],
+        },
+      ],
+    );
   },
   bootstrap(app) {},
   async registerTrads({ locales }) {
diff --git a/admin/src/translations/en.json b/admin/src/translations/en.json
index 6e4d977..b3771fe 100644
--- a/admin/src/translations/en.json
+++ b/admin/src/translations/en.json
@@ -10,5 +10,7 @@
   "Header.Title": "Config Sync",
   "Header.Description": "Manage your database config across environments.",
 
+  "Settings.Tool.Title": "Tool",
+
   "plugin.name": "Config Sync"
 }
diff --git a/package.json b/package.json
index ae9d3d9..03f7b08 100644
--- a/package.json
+++ b/package.json
@@ -1,12 +1,12 @@
 {
   "name": "strapi-plugin-config-sync",
   "version": "1.0.0-beta.8",
-  "description": "CLI & GUI for syncing config data across environments.",
+  "description": "Migrate your config data across environments using the CLI or Strapi admin panel.",
   "strapi": {
     "displayName": "Config Sync",
     "name": "config-sync",
     "icon": "sync",
-    "description": "CLI & GUI for syncing config data across environments.",
+    "description": "Migrate your config data across environments using the CLI or Strapi admin panel.",
     "required": false,
     "kind": "plugin"
   },
@@ -57,10 +57,10 @@
   },
   "devDependencies": {
     "@fortawesome/react-fontawesome": "^0.1.16",
-    "@strapi/design-system": "^0.0.1-alpha.75",
-    "@strapi/helper-plugin": "^4.0.7",
-    "@strapi/icons": "^0.0.1-alpha.75",
-    "@strapi/utils": "^4.0.7",
+    "@strapi/design-system": "^0.0.1-alpha.79",
+    "@strapi/helper-plugin": "^4.1.5",
+    "@strapi/icons": "^0.0.1-alpha.79",
+    "@strapi/utils": "^4.1.5",
     "babel-eslint": "9.0.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
diff --git a/playground/package.json b/playground/package.json
index b144973..90e35ce 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -15,9 +15,9 @@
     "jest-cli": "^26.0.1"
   },
   "dependencies": {
-    "@strapi/plugin-i18n": "^4.0.2",
-    "@strapi/plugin-users-permissions": "^4.0.2",
-    "@strapi/strapi": "^4.0.2",
+    "@strapi/plugin-i18n": "^4.0.0",
+    "@strapi/plugin-users-permissions": "^4.0.0",
+    "@strapi/strapi": "^4.0.0",
     "sqlite3": "5.0.2",
     "strapi-plugin-config-sync": "boazpoolman/strapi-plugin-config-sync"
   },
diff --git a/server/cli.js b/server/cli.js
index 53128ba..b93e567 100644
--- a/server/cli.js
+++ b/server/cli.js
@@ -1,5 +1,6 @@
 #!/usr/bin/env node
 
+const fs = require('fs');
 const { Command } = require('commander');
 const Table = require('cli-table');
 const chalk = require('chalk');
@@ -68,6 +69,14 @@ const getConfigState = (diff, configName, syncType) => {
 
 const handleAction = async (syncType, skipConfirm, configType, partials) => {
   const app = await strapi().load();
+  const hasSyncDir = fs.existsSync(app.config.get('plugin.config-sync.syncDir'));
+
+  // No import with empty sync dir.
+  if (!hasSyncDir && syncType === 'import') {
+    console.log(`${chalk.yellow.bold('[warning]')} You can't import an empty sync directory. Please export before continuing.`);
+    process.exit(0);
+  }
+
   const diff = await app.plugin('config-sync').service('main').getFormattedDiff();
 
   // No changes.
@@ -109,7 +118,9 @@ const handleAction = async (syncType, skipConfirm, configType, partials) => {
   });
 
   // Print table.
-  console.log(table.toString(), '\n');
+  if (hasSyncDir) {
+    console.log(table.toString(), '\n');
+  }
 
   // Prompt to confirm.
   let answer = {};
diff --git a/yarn.lock b/yarn.lock
index 1412705..d0a02ed 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -814,19 +814,19 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@strapi/design-system@^0.0.1-alpha.75":
-  version "0.0.1-alpha.75"
-  resolved "https://registry.yarnpkg.com/@strapi/design-system/-/design-system-0.0.1-alpha.75.tgz#8a06eb07a0d25791a93537578387e401dff116d2"
-  integrity sha512-JSIRFCiAOtTbjMDIa/KULSkfyPP/mphBhJDdeBx8bLNDKhU0SX3/zSXghjMWQ48aHvmyWTfwm8SVdw6EolzpIQ==
+"@strapi/design-system@^0.0.1-alpha.79":
+  version "0.0.1-alpha.79"
+  resolved "https://registry.yarnpkg.com/@strapi/design-system/-/design-system-0.0.1-alpha.79.tgz#23e6a7f73383b72148c926fa74ed0ba1acc32f0a"
+  integrity sha512-o/F55Qjwao1HkqKcL8ovQ280QijJH8dLfzP+t3XMNL5Ihh3HBD2wcMS6dOsrnNDGdDE0LWQfG8bDbLPmWHmk1A==
   dependencies:
     "@internationalized/number" "^3.0.2"
     compute-scroll-into-view "^1.0.17"
     prop-types "^15.7.2"
 
-"@strapi/helper-plugin@^4.0.7":
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/@strapi/helper-plugin/-/helper-plugin-4.0.7.tgz#5eb91e0faf4496769ad5a2bd90a06be58f1840d2"
-  integrity sha512-0rFjdr7ZBi7P//dD56eL3LEaA2bQ9+ooqqYz9v9hMm9NCWJm8j7ybKUghLpoIUca48DKGItb9ap2BDt0CYKSAw==
+"@strapi/helper-plugin@^4.1.5":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@strapi/helper-plugin/-/helper-plugin-4.1.5.tgz#f6032b38af88a02d64552cbb48ca382bc48c5288"
+  integrity sha512-Pog53h0W+dgA+QjZpcrPgtt+hkBcRx9LYJ/CAW+BMCtqnqP0qcqQFtP5xPPxSJCkkmPX4GJT3XRWJUnjdPEq/A==
   dependencies:
     "@fortawesome/fontawesome-free" "^5.15.2"
     "@fortawesome/fontawesome-svg-core" "^1.2.35"
@@ -850,15 +850,17 @@
     styled-components "^5.2.3"
     whatwg-fetch "^3.6.2"
 
-"@strapi/icons@^0.0.1-alpha.75":
-  version "0.0.1-alpha.75"
-  resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-0.0.1-alpha.75.tgz#12a38c2c921cedc26f5bd8c3aa91c5b82246c066"
-  integrity sha512-h9ZlIPVg95+WaBsXEthKSw9eZQ/VsuuZE5aad/4Cx0NBEUyQl+0h5Z/JqIUSNMX4KMyJJjo9Ad4FGUyOLNHLmw==
+"@strapi/icons@^0.0.1-alpha.79":
+  version "0.0.1-alpha.79"
+  resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-0.0.1-alpha.79.tgz#eff8790ea3897419489a61cbfd72a436661d1420"
+  integrity sha512-mIPzpwOir92939rSRuRS22GLWFpLfQDyoK0vMZUsGD7uujNnRon//TUa9DJTjTHjdEjRwWO60JbJOePgJ+2cvg==
+  dependencies:
+    rimraf "^3.0.2"
 
-"@strapi/utils@^4.0.7":
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/@strapi/utils/-/utils-4.0.7.tgz#718823fcf23c028a65ce8c317a36cc6d7321eb0c"
-  integrity sha512-coGjVudsnlXvb20mobyeoguCfXKnLjXnKhYiMoS6wqy4ozazu12+5MsCh7Hs9UAkvK4Fzhf7+urvyoj/UpSkaQ==
+"@strapi/utils@^4.1.5":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@strapi/utils/-/utils-4.1.5.tgz#3e80f59476cab470ba0fdb42a075b5ae47e998f2"
+  integrity sha512-Oz7ur7TsoqA4IOPdk6H3YwsVZ+FOi9wp+iRReKao8yfo4YKJjSYlHQlNXUaAqOOlFnT0ol7G3KF+uF8jLcfxDA==
   dependencies:
     "@sindresorhus/slugify" "1.1.0"
     date-fns "2.24.0"