diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia.tsx
new file mode 100644
index 000000000..6d8987634
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia.tsx
@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+
+const StyledCardMedia = styled.div`
+ align-items: center;
+ border: 2px solid ${({ theme }) => theme.border.color.medium};
+ border-radius: ${({ theme }) => theme.border.radius.xs};
+ color: ${({ theme }) => theme.font.color.light};
+ display: flex;
+ flex-direction: column;
+ height: ${({ theme }) => theme.spacing(8)};
+ justify-content: center;
+ padding: ${({ theme }) => theme.spacing(0.5)};
+ width: ${({ theme }) => theme.spacing(6)};
+`;
+
+export { StyledCardMedia as SettingsAccountsInboxSettingsCardMedia };
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsSynchronizationSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsSynchronizationSection.tsx
new file mode 100644
index 000000000..f8db05182
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsInboxSettingsSynchronizationSection.tsx
@@ -0,0 +1,57 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { Account } from '@/accounts/types/Account';
+import { SettingsAccountsInboxSettingsCardMedia } from '@/settings/accounts/components/SettingsAccountsInboxSettingsCardMedia';
+import { IconRefresh } from '@/ui/display/icon';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Toggle } from '@/ui/input/components/Toggle';
+import { Card } from '@/ui/layout/card/components/Card';
+import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { Section } from '@/ui/layout/section/components/Section';
+
+const StyledCardContent = styled(CardContent)`
+ align-items: center;
+ display: flex;
+ gap: ${({ theme }) => theme.spacing(4)};
+ padding: ${({ theme }) => theme.spacing(2, 4)};
+`;
+
+const StyledTitle = styled.span`
+ color: ${({ theme }) => theme.font.color.primary};
+ font-weight: ${({ theme }) => theme.font.weight.medium};
+ margin-right: auto;
+`;
+
+type SettingsAccountsInboxSettingsSynchronizationSectionProps = {
+ account: Account;
+ onToggle: (value: boolean) => void;
+};
+
+export const SettingsAccountsInboxSettingsSynchronizationSection = ({
+ account,
+ onToggle,
+}: SettingsAccountsInboxSettingsSynchronizationSectionProps) => {
+ const theme = useTheme();
+
+ return (
+
+
+
+
+
+
+
+ Sync emails
+
+
+
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/ui/display/icon/index.ts b/packages/twenty-front/src/modules/ui/display/icon/index.ts
index 367724fe6..04612c9de 100644
--- a/packages/twenty-front/src/modules/ui/display/icon/index.ts
+++ b/packages/twenty-front/src/modules/ui/display/icon/index.ts
@@ -88,6 +88,7 @@ export {
IconPlus,
IconPresentation,
IconProgressCheck,
+ IconRefresh,
IconRelationManyToMany,
IconRelationOneToMany,
IconRelationOneToOne,
diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx
index 6f8b14c3f..00ed41ac0 100644
--- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmailsInboxSettings.tsx
@@ -1,6 +1,7 @@
import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
+import { SettingsAccountsInboxSettingsSynchronizationSection } from '@/settings/accounts/components/SettingsAccountsInboxSettingsSynchronizationSection';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { AppPath } from '@/types/AppPath';
import { IconSettings } from '@/ui/display/icon';
@@ -19,6 +20,10 @@ export const SettingsAccountsEmailsInboxSettings = () => {
if (!account) navigate(AppPath.NotFound);
}, [account, navigate]);
+ const handleToggle = (_value: boolean) => {};
+
+ if (!account) return <>>;
+
return (
@@ -29,6 +34,10 @@ export const SettingsAccountsEmailsInboxSettings = () => {
{ children: account?.email || '' },
]}
/>
+
);