diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/blog-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/blog-dark.jpg
index abbc8e512d64e3..7750033112a8ad 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/blog-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/blog-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg
index badf19f16485e2..3cd2433c24d496 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg
index 3ce4b79ea9ab30..d789ffd7ab175e 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg
index ce91ae82c4aa6b..753fb420820ebd 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg
index 3b17fd68be2380..2152e8951dac08 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard.jpg
index 47c5840680e1e0..11515c1f52bfa9 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-dark.jpg
index 8be9f83d4607dd..30e9ad5f9d5bf8 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page.jpg
index 0b30fe33351d2c..8065a0f5a52d49 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg
index d1bbc7a33a314f..2e95e76fde43ce 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg
index d97074e24674fb..91982ca94ae82b 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg
index 2e4698213d2221..df8e3c84437735 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg
index 0c3b2fb28ecf68..7aeb2e7b85c187 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg
index 0e941868d3fcdc..aba6180a79b0fc 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg
index 0a7400e4012eea..5c0793261cc72c 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg differ
diff --git a/docs/scripts/generateTemplateScreenshots.ts b/docs/scripts/generateTemplateScreenshots.ts
index 572add616df113..d9799db24867fb 100644
--- a/docs/scripts/generateTemplateScreenshots.ts
+++ b/docs/scripts/generateTemplateScreenshots.ts
@@ -24,6 +24,14 @@ import { chromium } from 'playwright';
  * - Set `chromium.launch({ headless: false })` in line:50 to see the browser
  */
 
+function sleep(duration: number): Promise<void> {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, duration);
+  });
+}
+
 const host = process.env.DEPLOY_PREVIEW || 'http://localhost:3000';
 
 /**
@@ -33,7 +41,7 @@ const projects = {
   'material-ui': {
     input: path.join(process.cwd(), 'docs/pages/material-ui/getting-started/templates'),
     output: 'docs/public/static/screenshots',
-    viewport: { width: 813 * 2, height: 457 * 2 },
+    viewport: { width: 813*2, height: 457*2 },
   },
   'joy-ui': {
     input: path.join(process.cwd(), 'docs/pages/joy-ui/getting-started/templates'),
@@ -78,10 +86,9 @@ const names = new Set(process.argv.slice(2));
               await page.click('[data-screenshot="toggle-mode"]');
               await page.getByRole('menuitem').filter({ hasText: /dark/i }).click();
               await page.waitForLoadState('networkidle'); // changing to dark mode might trigger image loading
-              await page.screenshot({
-                path: outputPath,
-                animations: 'disabled',
-              });
+              await sleep(100); // give time for image decoding, resizing, rendering
+
+              await page.screenshot({ path: outputPath, animations: 'disabled' });
 
               await page.click('[data-screenshot="toggle-mode"]');
               await page
@@ -92,10 +99,9 @@ const names = new Set(process.argv.slice(2));
               await page.click('[data-screenshot="toggle-mode"]');
               await page.getByRole('option').filter({ hasText: /dark/i }).click();
               await page.waitForLoadState('networkidle'); // changing to dark mode might trigger image loading
-              await page.screenshot({
-                path: outputPath,
-                animations: 'disabled',
-              });
+              await sleep(100); // give time for image decoding, resizing, rendering
+
+              await page.screenshot({ path: outputPath, animations: 'disabled' });
 
               await page.click('[data-screenshot="toggle-mode"]');
               await page
@@ -105,10 +111,9 @@ const names = new Set(process.argv.slice(2));
             } else {
               await page.click('[data-screenshot="toggle-mode"]');
               await page.waitForLoadState('networkidle'); // changing to dark mode might trigger image loading
-              await page.screenshot({
-                path: outputPath,
-                animations: 'disabled',
-              });
+              await sleep(100); // give time for image decoding, resizing, rendering
+
+              await page.screenshot({ path: outputPath, animations: 'disabled' });
 
               await page.click('[data-screenshot="toggle-mode"]'); // switch back to light
             }