diff --git a/apps/website/src/pages/Home/index.css b/apps/website/src/pages/Home/index.css
index aa20da29d..1de3b5f65 100644
--- a/apps/website/src/pages/Home/index.css
+++ b/apps/website/src/pages/Home/index.css
@@ -47,7 +47,8 @@ section.hero-section {
     }
 
     .title-section {
-        flex-basis: 40%;
+        flex-basis: 30%;
+        flex-shrink: 0;
         color: var(--muted-color);
 
         h1 {
@@ -57,6 +58,10 @@ section.hero-section {
         }
     }
 
+    .screenshot-container {
+        flex-grow: 1;
+    }
+
     .screenshot {
         position: relative;
         width: 100%;
diff --git a/apps/website/src/pages/Home/index.tsx b/apps/website/src/pages/Home/index.tsx
index 92a6b6a3d..d9e52e819 100644
--- a/apps/website/src/pages/Home/index.tsx
+++ b/apps/website/src/pages/Home/index.tsx
@@ -86,7 +86,9 @@ function HeroSection() {
 
             </div>
 
-            {screenshotUrl && <img class="screenshot" src={screenshotUrl} alt="Screenshot of the Trilium Notes desktop application" />}
+            <div className="screenshot-container">
+                {screenshotUrl && <img class="screenshot" src={screenshotUrl} alt="Screenshot of the Trilium Notes desktop application" />}
+            </div>
         </Section>
     )
 }