diff --git a/packages/core/email/admin/src/pages/Settings/components/Configuration.js b/packages/core/email/admin/src/pages/Settings/components/Configuration.js
deleted file mode 100644
index c35e6d950b..0000000000
--- a/packages/core/email/admin/src/pages/Settings/components/Configuration.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/* eslint-disable no-useless-escape */
-
-import React from 'react';
-
-import { Flex, Grid, GridItem, Option, Select, TextInput, Typography } from '@strapi/design-system';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-
-const DocumentationLink = styled.a`
-  color: ${({ theme }) => theme.colors.primary600};
-`;
-
-const Configuration = ({ config }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <Flex direction="column" alignItems="stretch" gap={4}>
-      <Flex direction="column" alignItems="stretch" gap={1}>
-        <Typography variant="delta" as="h2">
-          {formatMessage({
-            id: 'email.Settings.email.plugin.title.config',
-            defaultMessage: 'Configuration',
-          })}
-        </Typography>
-        <Typography>
-          {formatMessage(
-            {
-              id: 'email.Settings.email.plugin.text.configuration',
-              defaultMessage:
-                'The plugin is configured through the {file} file, checkout this {link} for the documentation.',
-            },
-            {
-              file: './config/plugins.js',
-              link: (
-                <DocumentationLink
-                  href="https://docs.strapi.io/developer-docs/latest/plugins/email.html"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {formatMessage({
-                    id: 'email.link',
-                    defaultMessage: 'Link',
-                  })}
-                </DocumentationLink>
-              ),
-            }
-          )}
-        </Typography>
-      </Flex>
-      <Grid gap={5}>
-        <GridItem col={6} s={12}>
-          <TextInput
-            name="shipper-email"
-            label={formatMessage({
-              id: 'email.Settings.email.plugin.label.defaultFrom',
-              defaultMessage: 'Default sender email',
-            })}
-            placeholder={formatMessage({
-              id: 'email.Settings.email.plugin.placeholder.defaultFrom',
-              defaultMessage: "ex: Strapi No-Reply '<'no-reply@strapi.io'>'",
-            })}
-            disabled
-            onChange={() => {}}
-            value={config.settings.defaultFrom}
-          />
-        </GridItem>
-        <GridItem col={6} s={12}>
-          <TextInput
-            name="response-email"
-            label={formatMessage({
-              id: 'email.Settings.email.plugin.label.defaultReplyTo',
-              defaultMessage: 'Default response email',
-            })}
-            placeholder={formatMessage({
-              id: 'email.Settings.email.plugin.placeholder.defaultReplyTo',
-              defaultMessage: `ex: Strapi '<'example@strapi.io'>'`,
-            })}
-            disabled
-            onChange={() => {}}
-            value={config.settings.defaultReplyTo}
-          />
-        </GridItem>
-        <GridItem col={6} s={12}>
-          <Select
-            name="email-provider"
-            label={formatMessage({
-              id: 'email.Settings.email.plugin.label.provider',
-              defaultMessage: 'Email provider',
-            })}
-            disabled
-            onChange={() => {}}
-            value={config.provider}
-          >
-            <Option value={config.provider}>{config.provider}</Option>
-          </Select>
-        </GridItem>
-      </Grid>
-    </Flex>
-  );
-};
-
-Configuration.propTypes = {
-  config: PropTypes.shape({
-    provider: PropTypes.string,
-    settings: PropTypes.shape({
-      defaultFrom: PropTypes.string,
-      defaultReplyTo: PropTypes.string,
-    }),
-  }).isRequired,
-};
-
-export default Configuration;
diff --git a/packages/core/email/admin/src/pages/Settings/index.js b/packages/core/email/admin/src/pages/Settings/index.js
index c20f32b466..df66bb164b 100644
--- a/packages/core/email/admin/src/pages/Settings/index.js
+++ b/packages/core/email/admin/src/pages/Settings/index.js
@@ -55,33 +55,39 @@ const SettingsPage = () => {
     return config;
   });
 
-  const mutation = useMutation((body) => post('/email/test', body), {
-    onError() {
-      toggleNotification({
-        type: 'warning',
-        message: formatMessage(
-          {
-            id: 'email.Settings.email.plugin.notification.test.error',
-            defaultMessage: 'Failed to send a test mail to {to}',
-          },
-          { to: testAddress }
-        ),
-      });
-    },
+  const mutation = useMutation(
+    (body) => post('/email/test', body),
+    {
+      onError() {
+        toggleNotification({
+          type: 'warning',
+          message: formatMessage(
+            {
+              id: 'email.Settings.email.plugin.notification.test.error',
+              defaultMessage: 'Failed to send a test mail to {to}',
+            },
+            { to: testAddress }
+          ),
+        });
+      },
 
-    onSuccess() {
-      toggleNotification({
-        type: 'success',
-        message: formatMessage(
-          {
-            id: 'email.Settings.email.plugin.notification.test.success',
-            defaultMessage: 'Email test succeeded, check the {to} mailbox',
-          },
-          { to: testAddress }
-        ),
-      });
+      onSuccess() {
+        toggleNotification({
+          type: 'success',
+          message: formatMessage(
+            {
+              id: 'email.Settings.email.plugin.notification.test.success',
+              defaultMessage: 'Email test succeeded, check the {to} mailbox',
+            },
+            { to: testAddress }
+          ),
+        });
+      },
     },
-  });
+    {
+      retry: false,
+    }
+  );
 
   useFocusWhenNavigate();
 
@@ -138,7 +144,7 @@ const SettingsPage = () => {
       />
 
       <ContentLayout>
-        {isLoading || mutation.isLoading ? (
+        {isLoading ? (
           <LoadingIndicatorPage />
         ) : (
           <form onSubmit={handleSubmit}>
@@ -171,7 +177,7 @@ const SettingsPage = () => {
                           file: './config/plugins.js',
                           link: (
                             <DocumentationLink
-                              href="https://docs.strapi.io/dev-docs/plugins/email"
+                              href="https://docs.strapi.io/developer-docs/latest/plugins/email.html"
                               target="_blank"
                               rel="noopener noreferrer"
                             >
@@ -199,6 +205,7 @@ const SettingsPage = () => {
                           defaultMessage: "ex: Strapi No-Reply '<'no-reply@strapi.io'>'",
                         })}
                         disabled
+                        onChange={() => {}}
                         value={data.settings.defaultFrom}
                       />
                     </GridItem>
@@ -215,6 +222,7 @@ const SettingsPage = () => {
                           defaultMessage: `ex: Strapi '<'example@strapi.io'>'`,
                         })}
                         disabled
+                        onChange={() => {}}
                         value={data.settings.defaultReplyTo}
                       />
                     </GridItem>
@@ -227,6 +235,7 @@ const SettingsPage = () => {
                           defaultMessage: 'Email provider',
                         })}
                         disabled
+                        onChange={() => {}}
                         value={data.provider}
                       >
                         <Option value={data.provider}>{data.provider}</Option>
@@ -236,8 +245,11 @@ const SettingsPage = () => {
                 </Flex>
               </Box>
 
-              <Box
+              <Flex
+                alignItems="stretch"
                 background="neutral0"
+                direction="column"
+                gap={4}
                 hasRadius
                 shadow="filterShadow"
                 paddingTop={6}
@@ -245,54 +257,52 @@ const SettingsPage = () => {
                 paddingLeft={7}
                 paddingRight={7}
               >
-                <Flex direction="column" alignItems="stretch" gap={4}>
-                  <Typography variant="delta" as="h2">
-                    {formatMessage({
-                      id: 'email.Settings.email.plugin.title.test',
-                      defaultMessage: 'Test email delivery',
-                    })}
-                  </Typography>
+                <Typography variant="delta" as="h2">
+                  {formatMessage({
+                    id: 'email.Settings.email.plugin.title.test',
+                    defaultMessage: 'Test email delivery',
+                  })}
+                </Typography>
 
-                  <Grid gap={5} alignItems="end">
-                    <GridItem col={6} s={12}>
-                      <TextInput
-                        id="test-address-input"
-                        name="test-address"
-                        onChange={handleChange}
-                        label={formatMessage({
-                          id: 'email.Settings.email.plugin.label.testAddress',
-                          defaultMessage: 'Recipient email',
-                        })}
-                        value={testAddress}
-                        error={
-                          formErrors.email?.id &&
-                          formatMessage({
-                            id: `email.${formErrors.email?.id}`,
-                            defaultMessage: 'This is an invalid email',
-                          })
-                        }
-                        placeholder={formatMessage({
-                          id: 'email.Settings.email.plugin.placeholder.testAddress',
-                          defaultMessage: 'ex: developer@example.com',
-                        })}
-                      />
-                    </GridItem>
-                    <GridItem col={7} s={12}>
-                      <Button
-                        loading={mutation.isLoading}
-                        disabled={!isTestAddressValid}
-                        type="submit"
-                        startIcon={<Envelop />}
-                      >
-                        {formatMessage({
-                          id: 'email.Settings.email.plugin.button.test-email',
-                          defaultMessage: 'Send test email',
-                        })}
-                      </Button>
-                    </GridItem>
-                  </Grid>
-                </Flex>
-              </Box>
+                <Grid gap={5} alignItems="end">
+                  <GridItem col={6} s={12}>
+                    <TextInput
+                      id="test-address-input"
+                      name="test-address"
+                      onChange={handleChange}
+                      label={formatMessage({
+                        id: 'email.Settings.email.plugin.label.testAddress',
+                        defaultMessage: 'Recipient email',
+                      })}
+                      value={testAddress}
+                      error={
+                        formErrors.email?.id &&
+                        formatMessage({
+                          id: `email.${formErrors.email?.id}`,
+                          defaultMessage: 'This is an invalid email',
+                        })
+                      }
+                      placeholder={formatMessage({
+                        id: 'email.Settings.email.plugin.placeholder.testAddress',
+                        defaultMessage: 'ex: developer@example.com',
+                      })}
+                    />
+                  </GridItem>
+                  <GridItem col={7} s={12}>
+                    <Button
+                      loading={mutation.isLoading}
+                      disabled={!isTestAddressValid}
+                      type="submit"
+                      startIcon={<Envelop />}
+                    >
+                      {formatMessage({
+                        id: 'email.Settings.email.plugin.button.test-email',
+                        defaultMessage: 'Send test email',
+                      })}
+                    </Button>
+                  </GridItem>
+                </Grid>
+              </Flex>
             </Flex>
           </form>
         )}
diff --git a/packages/core/email/package.json b/packages/core/email/package.json
index 3ea595b8fb..14a36f1c3f 100644
--- a/packages/core/email/package.json
+++ b/packages/core/email/package.json
@@ -34,6 +34,7 @@
     "lodash": "4.17.21",
     "prop-types": "^15.8.1",
     "react-intl": "6.4.1",
+    "react-query": "3.39.3",
     "yup": "0.32.9"
   },
   "devDependencies": {
diff --git a/yarn.lock b/yarn.lock
index b4117b51d0..c379ce9901 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7312,6 +7312,7 @@ __metadata:
     react: ^18.2.0
     react-dom: ^18.2.0
     react-intl: 6.4.1
+    react-query: 3.39.3
     react-router-dom: 5.3.4
     styled-components: 5.3.3
     yup: 0.32.9