diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountEmailsSkeletonCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountEmailsSkeletonCard.tsx
new file mode 100644
index 000000000..b30fbbec5
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountEmailsSkeletonCard.tsx
@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+import { Card } from '@/ui/layout/card/components/Card';
+
+const StyledCard = styled(Card)`
+  background-color: ${({ theme }) => theme.background.secondary};
+  height: 40px;
+`;
+
+export const SettingsAccountEmailsSkeletonCard = () => <StyledCard />;
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx
index ba6a3a0a4..198e47420 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsSyncSection.tsx
@@ -4,6 +4,7 @@ import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { MessageChannel } from '@/accounts/types/MessageChannel';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { SettingsAccountEmailsSkeletonCard } from '@/settings/accounts/components/SettingsAccountEmailsSkeletonCard';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
 
@@ -13,23 +14,25 @@ import { SettingsAccountsEmptyStateCard } from './SettingsAccountsEmptyStateCard
 export const SettingsAccountsEmailsSyncSection = () => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
 
-  const accounts = useFindManyRecords<ConnectedAccount>({
-    objectNameSingular: 'connectedAccount',
-    filter: {
-      accountOwnerId: {
-        eq: currentWorkspaceMember?.id,
+  const { records: accounts, loading: accountsLoading } =
+    useFindManyRecords<ConnectedAccount>({
+      objectNameSingular: 'connectedAccount',
+      filter: {
+        accountOwnerId: {
+          eq: currentWorkspaceMember?.id,
+        },
       },
-    },
-  }).records;
+    });
 
-  const messageChannels = useFindManyRecords<MessageChannel>({
-    objectNameSingular: 'messageChannel',
-    filter: {
-      connectedAccountId: {
-        in: accounts.map((account) => account.id),
+  const { records: messageChannels, loading: messageChannelsLoading } =
+    useFindManyRecords<MessageChannel>({
+      objectNameSingular: 'messageChannel',
+      filter: {
+        connectedAccountId: {
+          in: accounts.map((account) => account.id),
+        },
       },
-    },
-  }).records;
+    });
 
   const messageChannelsWithSyncedEmails = messageChannels.map(
     (messageChannel) => ({
@@ -38,13 +41,18 @@ export const SettingsAccountsEmailsSyncSection = () => {
     }),
   );
 
+  const loading = accountsLoading || messageChannelsLoading;
+
   return (
     <Section>
       <H2Title
         title="Emails sync"
         description="Sync your inboxes and set your privacy settings"
       />
-      {accounts.length ? (
+
+      {loading ? (
+        <SettingsAccountEmailsSkeletonCard />
+      ) : accounts.length ? (
         <SettingsAccountsEmailsCard
           messageChannels={messageChannelsWithSyncedEmails}
         />