diff --git a/.changeset/odd-berries-think.md b/.changeset/odd-berries-think.md
new file mode 100644
index 0000000..7a734dc
--- /dev/null
+++ b/.changeset/odd-berries-think.md
@@ -0,0 +1,5 @@
+---
+"saleor-app-emails-and-messages": patch
+---
+
+Improved layout spacing across the application.
diff --git a/apps/emails-and-messages/src/components/box-footer.tsx b/apps/emails-and-messages/src/components/box-footer.tsx
index 043e203..22df536 100644
--- a/apps/emails-and-messages/src/components/box-footer.tsx
+++ b/apps/emails-and-messages/src/components/box-footer.tsx
@@ -9,6 +9,7 @@ export const BoxFooter = (props: BoxProps) => {
       borderColor="neutralDefault"
       padding={defaultPadding}
       display="flex"
+      gap={defaultPadding}
       flexDirection="row"
       justifyContent="flex-end"
       {...props}
diff --git a/apps/emails-and-messages/src/components/section-with-description.tsx b/apps/emails-and-messages/src/components/section-with-description.tsx
index 20dd437..43965e6 100644
--- a/apps/emails-and-messages/src/components/section-with-description.tsx
+++ b/apps/emails-and-messages/src/components/section-with-description.tsx
@@ -7,9 +7,9 @@ interface SectionWithDescriptionProps {
 }
 export const SectionWithDescription = (props: SectionWithDescriptionProps) => {
   return (
-    <Box display="grid" gridTemplateColumns={{ desktop: 3, mobile: 1 }} gap={3}>
+    <Box display="grid" gridTemplateColumns={{ desktop: 3, mobile: 1 }} gap={12}>
       <Box>
-        <Text variant="heading" as="h2">
+        <Text variant="heading" as="h2" paddingBottom={2}>
           {props.title}
         </Text>
         {props.description}
diff --git a/apps/emails-and-messages/src/modules/app-configuration/ui/messaging-providers-box.tsx b/apps/emails-and-messages/src/modules/app-configuration/ui/messaging-providers-box.tsx
index 6c49fa1..0748548 100644
--- a/apps/emails-and-messages/src/modules/app-configuration/ui/messaging-providers-box.tsx
+++ b/apps/emails-and-messages/src/modules/app-configuration/ui/messaging-providers-box.tsx
@@ -4,13 +4,12 @@ import { BoxWithBorder } from "../../../components/box-with-border";
 import { BoxFooter } from "../../../components/box-footer";
 import { defaultPadding } from "../../../components/ui-defaults";
 import { useRouter } from "next/router";
-import Image from "next/image";
-import sendgrid from "../../../public/sendgrid.png";
-import smtp from "../../../public/smtp.svg";
 import { smtpUrls } from "../../smtp/urls";
 import { sendgridUrls } from "../../sendgrid/urls";
 import { appUrls } from "../urls";
 import React from "react";
+import { SendgridLogo } from "../../sendgrid/ui/sendgrid-logo";
+import { SmtpLogo } from "../../smtp/ui/smtp-logo";
 
 const NoExistingConfigurations = () => {
   const { push } = useRouter();
@@ -20,8 +19,7 @@ const NoExistingConfigurations = () => {
   };
 
   return (
-    <BoxWithBorder padding={7} display="grid" alignItems="center" justifyContent="center">
-      <Text>No providers configured yet</Text>
+    <BoxWithBorder padding={10} display="grid" alignItems="center" justifyContent="center">
       <Button onClick={redirectToProvidersSelection}>Add first provider</Button>
     </BoxWithBorder>
   );
@@ -80,9 +78,9 @@ export const MessagingProvidersBox = ({
   const getProviderLogo = (configuration: ConfigurationListItem) => {
     switch (configuration.provider) {
       case "smtp":
-        return <Image alt="SMTP logo" src={smtp} height={20} width={20} />;
+        return <SmtpLogo height={20} width={20} />;
       case "sendgrid":
-        return <Image alt="Sendgrid logo" src={sendgrid} height={20} width={20} />;
+        return <SendgridLogo height={20} width={20} />;
     }
   };
 
diff --git a/apps/emails-and-messages/src/modules/app-configuration/ui/provider-selection-box.tsx b/apps/emails-and-messages/src/modules/app-configuration/ui/provider-selection-box.tsx
index 8f533d5..f2fea7c 100644
--- a/apps/emails-and-messages/src/modules/app-configuration/ui/provider-selection-box.tsx
+++ b/apps/emails-and-messages/src/modules/app-configuration/ui/provider-selection-box.tsx
@@ -5,20 +5,28 @@ import { BoxFooter } from "../../../components/box-footer";
 
 interface ProviderSelectionBoxProps {
   providerName: string;
+  providerLogo?: React.ReactNode;
   providerDescription: string;
   onClick: () => void;
 }
 
 export const ProviderSelectionBox = (props: ProviderSelectionBoxProps) => {
   return (
-    <BoxWithBorder display="grid" alignItems="center" justifyContent="center">
-      <Box padding={defaultPadding} display="grid" alignItems="center" justifyContent="center">
-        <Text variant="heading">{props.providerName}</Text>
-      </Box>
-      <Box padding={defaultPadding} display="grid" alignItems="center" justifyContent="center">
+    <BoxWithBorder __maxWidth={350} display="flex" flexDirection="column">
+      <Box padding={defaultPadding} flexGrow="1">
+        <Box
+          display="flex"
+          gap={2}
+          alignItems="center"
+          justifyContent="center"
+          paddingBottom={defaultPadding}
+        >
+          {props.providerLogo}
+          <Text variant="heading">{props.providerName}</Text>
+        </Box>
         <Text>{props.providerDescription}</Text>
       </Box>
-      <BoxFooter justifyContent="center" alignItems="center">
+      <BoxFooter>
         <Button onClick={props.onClick}>Choose</Button>
       </BoxFooter>
     </BoxWithBorder>
diff --git a/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-dangrous-section.tsx b/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-dangerous-section.tsx
similarity index 79%
rename from apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-dangrous-section.tsx
rename to apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-dangerous-section.tsx
index d83a170..535fe96 100644
--- a/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-dangrous-section.tsx
+++ b/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-dangerous-section.tsx
@@ -45,25 +45,20 @@ export const SendgridDangerousSection = ({ configuration }: SendgridDangerousSec
         })}
       >
         <BoxWithBorder backgroundColor="surfaceCriticalSubdued" borderColor="criticalSubdued">
-          <Box padding={defaultPadding}>
-            <Text variant="heading" as="h2">
-              Remove provider
+          <Box padding={defaultPadding} display="flex" flexDirection="column" gap={2}>
+            <Text variant="heading" as="h1">
+              Remove provider configuration
             </Text>
-            <Text as="p">You can remove provider configuration.</Text>
             <Text as="p">
               This operation will remove all settings related to this configuration. Data will be
-              permanently removed from the App.{" "}
+              permanently removed from the App.
             </Text>
-            <Text as="p">This operation cant be undone.</Text>
-            <Text as="p">You still can create new configuration.</Text>
+            <Text as="p">This operation can&#39;t be undone.</Text>
+            <Text as="p">You can still create a new configuration.</Text>
           </Box>
           <BoxFooter borderColor="criticalSubdued">
-            <Button
-              color="textNeutralSubdued"
-              backgroundColor="interactiveCriticalDefault"
-              type="submit"
-            >
-              Remove provider
+            <Button variant="error" type="submit">
+              Remove configuration
             </Button>
           </BoxFooter>
         </BoxWithBorder>
diff --git a/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-logo.tsx b/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-logo.tsx
new file mode 100644
index 0000000..2e14c7c
--- /dev/null
+++ b/apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-logo.tsx
@@ -0,0 +1,11 @@
+import Image from "next/image";
+import sendgrid from "../../../public/sendgrid.png";
+
+interface SendgridLogoProps {
+  height: number;
+  width: number;
+}
+
+export const SendgridLogo = ({ height, width }: SendgridLogoProps) => {
+  return <Image alt="Sendgrid logo" src={sendgrid} height={height} width={width} />;
+};
diff --git a/apps/emails-and-messages/src/modules/smtp/ui/smtp-dangrous-section.tsx b/apps/emails-and-messages/src/modules/smtp/ui/smtp-dangerous-section.tsx
similarity index 83%
rename from apps/emails-and-messages/src/modules/smtp/ui/smtp-dangrous-section.tsx
rename to apps/emails-and-messages/src/modules/smtp/ui/smtp-dangerous-section.tsx
index 0ee4afe..35c10c5 100644
--- a/apps/emails-and-messages/src/modules/smtp/ui/smtp-dangrous-section.tsx
+++ b/apps/emails-and-messages/src/modules/smtp/ui/smtp-dangerous-section.tsx
@@ -49,25 +49,20 @@ export const SmtpDangerousSection = ({ configuration }: SmtpDangerousSectionProp
         })}
       >
         <BoxWithBorder backgroundColor="surfaceCriticalSubdued" borderColor="criticalSubdued">
-          <Box padding={defaultPadding}>
+          <Box padding={defaultPadding} display="flex" flexDirection="column" gap={2}>
             <Text variant="heading" as="h1">
-              Remove provider
+              Remove provider configuration
             </Text>
-            <Text as="p">You can remove provider configuration.</Text>
             <Text as="p">
               This operation will remove all settings related to this configuration. Data will be
               permanently removed from the App.
             </Text>
-            <Text as="p">This operation cant be undone.</Text>
-            <Text as="p">You still can create new configuration.</Text>
+            <Text as="p">This operation can&#39;t be undone.</Text>
+            <Text as="p">You can still create a new configuration.</Text>
           </Box>
           <BoxFooter borderColor="criticalSubdued">
-            <Button
-              color="textNeutralSubdued"
-              backgroundColor="interactiveCriticalDefault"
-              type="submit"
-            >
-              Remove provider
+            <Button variant="error" type="submit">
+              Remove configuration
             </Button>
           </BoxFooter>
         </BoxWithBorder>
diff --git a/apps/emails-and-messages/src/modules/smtp/ui/smtp-logo.tsx b/apps/emails-and-messages/src/modules/smtp/ui/smtp-logo.tsx
new file mode 100644
index 0000000..bf3bb76
--- /dev/null
+++ b/apps/emails-and-messages/src/modules/smtp/ui/smtp-logo.tsx
@@ -0,0 +1,11 @@
+import Image from "next/image";
+import smtp from "../../../public/smtp.svg";
+
+interface SmtpLogoProps {
+  height: number;
+  width: number;
+}
+
+export const SmtpLogo = ({ height, width }: SmtpLogoProps) => {
+  return <Image alt="SMTP logo" src={smtp} height={height} width={width} />;
+};
diff --git a/apps/emails-and-messages/src/pages/configuration/choose-provider.tsx b/apps/emails-and-messages/src/pages/configuration/choose-provider.tsx
index e13c252..c37481d 100644
--- a/apps/emails-and-messages/src/pages/configuration/choose-provider.tsx
+++ b/apps/emails-and-messages/src/pages/configuration/choose-provider.tsx
@@ -7,6 +7,8 @@ import { sendgridUrls } from "../../modules/sendgrid/urls";
 import { smtpUrls } from "../../modules/smtp/urls";
 import { appUrls } from "../../modules/app-configuration/urls";
 import { BasicLayout } from "../../components/basic-layout";
+import { SendgridLogo } from "../../modules/sendgrid/ui/sendgrid-logo";
+import { SmtpLogo } from "../../modules/smtp/ui/smtp-logo";
 
 const ChooseProviderPage: NextPage = () => {
   const { push } = useRouter();
@@ -27,12 +29,14 @@ const ChooseProviderPage: NextPage = () => {
         <Box display="grid" gridTemplateColumns={2} gap={3}>
           <ProviderSelectionBox
             providerName="Sendgrid"
+            providerLogo={<SendgridLogo height={20} width={20} />}
             providerDescription="Use dynamic templates created in Sendgrid dashboard to send messages. Event data will be forwarded to Sendgrid."
             onClick={() => push(sendgridUrls.newConfiguration())}
           />
 
           <ProviderSelectionBox
             providerName="SMTP"
+            providerLogo={<SmtpLogo height={20} width={20} />}
             providerDescription="Provide your own SMTP credentials and map Saleor event to custom MJML templates."
             onClick={() => push(smtpUrls.newConfiguration())}
           />
diff --git a/apps/emails-and-messages/src/pages/configuration/sendgrid/[configurationId].tsx b/apps/emails-and-messages/src/pages/configuration/sendgrid/[configurationId].tsx
index 170d2c9..2645408 100644
--- a/apps/emails-and-messages/src/pages/configuration/sendgrid/[configurationId].tsx
+++ b/apps/emails-and-messages/src/pages/configuration/sendgrid/[configurationId].tsx
@@ -3,7 +3,7 @@ import { NextPage } from "next";
 import { trpcClient } from "../../../modules/trpc/trpc-client";
 import { useRouter } from "next/router";
 import { SendgridBasicInformationSection } from "../../../modules/sendgrid/ui/sendgrid-basic-information-section";
-import { SendgridDangerousSection } from "../../../modules/sendgrid/ui/sendgrid-dangrous-section";
+import { SendgridDangerousSection } from "../../../modules/sendgrid/ui/sendgrid-dangerous-section";
 import { ApiConnectionSection } from "../../../modules/sendgrid/ui/api-connection-section";
 import { SendgridSenderSection } from "../../../modules/sendgrid/ui/sendgrid-sender-section";
 import { SendgridEventsSection } from "../../../modules/sendgrid/ui/sendgrid-events-section";
diff --git a/apps/emails-and-messages/src/pages/configuration/smtp/[configurationId].tsx b/apps/emails-and-messages/src/pages/configuration/smtp/[configurationId].tsx
index b9a10b4..47cf70e 100644
--- a/apps/emails-and-messages/src/pages/configuration/smtp/[configurationId].tsx
+++ b/apps/emails-and-messages/src/pages/configuration/smtp/[configurationId].tsx
@@ -7,7 +7,7 @@ import { BasicLayout } from "../../../components/basic-layout";
 import { SmtpBasicInformationSection } from "../../../modules/smtp/ui/smtp-basic-information-section";
 import { SmtpSection } from "../../../modules/smtp/ui/smtp-section";
 import { SmtpSenderSection } from "../../../modules/smtp/ui/smtp-sender-section";
-import { SmtpDangerousSection } from "../../../modules/smtp/ui/smtp-dangrous-section";
+import { SmtpDangerousSection } from "../../../modules/smtp/ui/smtp-dangerous-section";
 import { SmtpChannelsSection } from "../../../modules/smtp/ui/smtp-channels-section";
 import { SmtpEventsSection } from "../../../modules/smtp/ui/smtp-events-section";
 import { appUrls } from "../../../modules/app-configuration/urls";
diff --git a/apps/search/src/views/configuration/configuration.view.tsx b/apps/search/src/views/configuration/configuration.view.tsx
index 2d55bdd..a18f908 100644
--- a/apps/search/src/views/configuration/configuration.view.tsx
+++ b/apps/search/src/views/configuration/configuration.view.tsx
@@ -26,6 +26,7 @@ export const ConfigurationView = () => {
       />
 
       <AppSection
+        marginTop={14}
         heading="Algolia settings"
         mainContent={<AlgoliaConfigurationForm />}
         sideContent={
@@ -44,6 +45,7 @@ export const ConfigurationView = () => {
       />
       <AppSection
         includePadding
+        marginTop={14}
         heading="Index products"
         mainContent={<ImportProductsToAlgolia />}
         sideContent={