diff --git a/packages/twenty-docs/developers/extend/apps/publishing.mdx b/packages/twenty-docs/developers/extend/apps/publishing.mdx
index 2cbd596730..8ed1f40b99 100644
--- a/packages/twenty-docs/developers/extend/apps/publishing.mdx
+++ b/packages/twenty-docs/developers/extend/apps/publishing.mdx
@@ -198,6 +198,14 @@ export default defineApplication({
 
 See the [defineApplication accordion](/developers/extend/apps/building#defineentity-functions) in the Building Apps page for the full list of marketplace fields (`author`, `category`, `aboutDescription`, `websiteUrl`, `termsUrl`, etc.).
 
+#### Recommended screenshot dimensions
+
+The marketplace renders `screenshots` in a fixed `8:5` container (for example, `1600×1000 px`).
+
+<Note>
+Screenshots of any aspect ratio are displayed in full and are never cropped, but anything significantly taller or narrower than `8:5` will show empty bands on the sides.
+</Note>
+
 ### Publish
 
 ```bash filename="Terminal"
diff --git a/packages/twenty-front/src/modules/settings/applications/components/SettingsApplicationScreenshotGallery.tsx b/packages/twenty-front/src/modules/settings/applications/components/SettingsApplicationScreenshotGallery.tsx
index 3362004175..6d8ab07b92 100644
--- a/packages/twenty-front/src/modules/settings/applications/components/SettingsApplicationScreenshotGallery.tsx
+++ b/packages/twenty-front/src/modules/settings/applications/components/SettingsApplicationScreenshotGallery.tsx
@@ -29,8 +29,7 @@ const StyledScreenshotsContainer = styled.div`
 
 const StyledScreenshotImage = styled.img`
   height: 100%;
-  object-fit: cover;
-  object-position: center;
+  object-fit: contain;
   width: 100%;
 `;
 
@@ -43,6 +42,7 @@ const StyledScreenshotThumbnails = styled.div`
 
 const StyledThumbnail = styled.div<{ isSelected?: boolean }>`
   align-items: center;
+  aspect-ratio: 8 / 5;
   background-color: ${themeCssVariables.background.secondary};
   border: 1px solid
     ${({ isSelected }) =>
@@ -53,7 +53,6 @@ const StyledThumbnail = styled.div<{ isSelected?: boolean }>`
   cursor: pointer;
   display: flex;
   flex: 0 0 96px;
-  height: 56px;
   justify-content: center;
   overflow: hidden;
 
@@ -64,8 +63,7 @@ const StyledThumbnail = styled.div<{ isSelected?: boolean }>`
 
 const StyledThumbnailImage = styled.img`
   height: 100%;
-  object-fit: cover;
-  object-position: center;
+  object-fit: contain;
   width: 100%;
 `;