diff --git a/packages/twenty-front/src/modules/settings/integrations/assets/preview-background.svg b/packages/twenty-front/src/modules/settings/integrations/assets/preview-background.svg
new file mode 100644
index 000000000000..b9fe4a3171e7
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/integrations/assets/preview-background.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" viewBox="0 0 512 144">
+  <rect width="539" height="143" x="-13.5" y=".5" fill="url(#a)" fill-opacity=".05" rx="7.5"/>
+  <rect width="539" height="143" x="-13.5" y=".5" fill="url(#b)" rx="7.5"/>
+  <rect width="539" height="143" x="-13.5" y=".5" stroke="#EBEBEB" rx="7.5"/>
+  <defs>
+    <radialGradient id="b" cx="0" cy="0" r="1" gradientTransform="matrix(270 0 0 487.572 256 72)" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FCFCFC" stop-opacity="0"/>
+      <stop offset="1" stop-color="#F8F8F8" stop-opacity=".9"/>
+    </radialGradient>
+    <pattern id="a" width=".044" height=".167" patternContentUnits="objectBoundingBox">
+      <use xlink:href="#c" transform="scale(.00035 .0013)"/>
+    </pattern>
+    <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFaSURBVHgB7d2xDcAgDABBO/vvTETLCvfX0aKX5c47rvO8d0DfhFYAuALAFQCuAHAFgCsAXAHgCgBXALgCwBUArgBwBYArAFwB4AoAVwC4AsAVAK4AcAWAKwBcAeAKAFcAuALAFQCuAHAFgCsAXAHgCgBXALgCwBUArgBwBYArAFwB4AoAVwC4AsAVAK4AcAWAKwBcAeAKAFcAuALAFQCuAHAFgCsAXAHgCgBXALgCwBUArgBw92L2mbCaALgCwBUAbsf17j7kXzQBcAWAKwBcAeAKAFcAuALAFQCuAHAFgCsAXAHgCgBXALgCwBUArgBwBYArAFwB4AoAVwC4AsAVAK4AcAWAKwBcAeAKAFcAuALAFQCuAHAFgCsAXAHgCgBXALgCwBUArgBwBYArAFwB4AoAVwC4AsAVAK4AcAWAKwBcAeAKAFcAuALAFQCuAHAFgCsAXAHgCgD3A+UEA/3CEUcsAAAAAElFTkSuQmCC" id="c" width="128" height="128"/>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/packages/twenty-front/src/modules/settings/integrations/assets/sync.svg b/packages/twenty-front/src/modules/settings/integrations/assets/sync.svg
new file mode 100644
index 000000000000..b1d10480e071
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/integrations/assets/sync.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 126 23">
+  <path stroke="#000" stroke-dasharray="4.71 4.71" stroke-linecap="round" stroke-width="1.768" d="M125 11H1"/>
+  <g filter="url(#a)">
+    <circle cx="63" cy="11" r="10.667" fill="#fff" style="mix-blend-mode:normal"/>
+    <circle cx="63" cy="11" r="10.203" stroke="#000" stroke-width=".928"/>
+  </g>
+  <path fill="#000" d="M60.38 8.425a3.758 3.758 0 0 1 5.223-.022l-.955.935a.54.54 0 0 0-.12.597c.085.205.29.337.514.337h2.968a.55.55 0 0 0 .557-.547V6.811a.546.546 0 0 0-.343-.506.565.565 0 0 0-.608.119l-.964.947c-2.032-1.97-5.304-1.963-7.323.023a5.06 5.06 0 0 0-1.225 1.908.725.725 0 0 0 .453.929.746.746 0 0 0 .946-.444 3.6 3.6 0 0 1 .876-1.362Zm-2.944 3.85v2.915c0 .221.135.422.344.506a.565.565 0 0 0 .607-.118l.965-.948c2.031 1.97 5.303 1.963 7.323-.023a5.077 5.077 0 0 0 1.227-1.905.725.725 0 0 0-.453-.93.746.746 0 0 0-.946.445 3.598 3.598 0 0 1-.876 1.361 3.758 3.758 0 0 1-5.225.023l.953-.938a.54.54 0 0 0 .12-.597.556.556 0 0 0-.514-.337h-2.968a.55.55 0 0 0-.556.547Z"/>
+  <defs>
+    <filter id="a" width="22.261" height="22.261" x="51.406" y=".333" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+      <feOffset dx="-.93" dy=".928"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+      <feBlend in="SourceGraphic" result="shape"/>
+    </filter>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationPreview.tsx b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationPreview.tsx
new file mode 100644
index 000000000000..4b66adedc0c8
--- /dev/null
+++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationPreview.tsx
@@ -0,0 +1,77 @@
+import styled from '@emotion/styled';
+
+import { Card } from '@/ui/layout/card/components/Card';
+import { CardContent } from '@/ui/layout/card/components/CardContent';
+
+import PreviewBackgroundImage from '../assets/preview-background.svg';
+import SyncImage from '../assets/sync.svg?react';
+
+type SettingsIntegrationPreviewProps = {
+  integrationLogoUrl: string;
+};
+
+const StyledCard = styled(Card)`
+  border: 0;
+`;
+
+const StyledCardContent = styled(CardContent)`
+  background-image: url(${PreviewBackgroundImage});
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing(1)};
+  height: ${({ theme }) => theme.spacing(28)};
+`;
+
+const StyledLogosContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledIntegrationLogoContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height: ${({ theme }) => theme.spacing(16)};
+  justify-content: center;
+  width: ${({ theme }) => theme.spacing(16)};
+`;
+
+const StyledIntegrationLogo = styled.img`
+  height: 100%;
+`;
+
+const StyledTwentyLogo = styled.img`
+  height: ${({ theme }) => theme.spacing(12)};
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledSyncImage = styled(SyncImage)`
+  width: ${({ theme }) => theme.spacing(31)};
+`;
+
+const StyledLabel = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  line-height: ${({ theme }) => theme.spacing(6)};
+`;
+
+export const SettingsIntegrationPreview = ({
+  integrationLogoUrl,
+}: SettingsIntegrationPreviewProps) => (
+  <StyledCard>
+    <StyledCardContent>
+      <StyledLogosContainer>
+        <StyledIntegrationLogoContainer>
+          <StyledIntegrationLogo alt="" src={integrationLogoUrl} />
+        </StyledIntegrationLogoContainer>
+        <StyledSyncImage />
+        <StyledTwentyLogo alt="" src="/images/integrations/twenty-logo.svg" />
+      </StyledLogosContainer>
+      <StyledLabel>Import your tables as remote objects</StyledLabel>
+    </StyledCardContent>
+  </StyledCard>
+);
diff --git a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx
index bbbbd72a11af..823012fed51b 100644
--- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx
@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { SettingsIntegrationPreview } from '@/settings/integrations/components/SettingsIntegrationPreview';
 import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
 import { AppPath } from '@/types/AppPath';
 import { IconSettings } from '@/ui/display/icon';
@@ -46,6 +47,9 @@ export const SettingsIntegrationDetail = () => {
             { children: integration.text },
           ]}
         />
+        <SettingsIntegrationPreview
+          integrationLogoUrl={integration.from.image}
+        />
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );