diff --git a/app/templates/theme.php b/app/templates/theme.php
index f863c6e..068f584 100644
--- a/app/templates/theme.php
+++ b/app/templates/theme.php
@@ -4,34 +4,41 @@
  *
  * Displays available themes and allows the user to switch between them.
  *
- * @var array $themes List of available themes
- * @var string $currentTheme Currently active theme ID
+ * @var array $themes List of available themes with their data
+ *   - name: Display name
+ *   - screenshotUrl: URL to the screenshot (or null if not available)
+ *   - isActive: Whether this is the current theme
  */
 ?>
                 <div class="container mt-4">
-                    <h2>Theme Switcher</h2>
+                    <h2>Theme switcher</h2>
                     <p class="text-muted">Select a theme to change the appearance of the application.</p>
                     <div class="row mt-4">
-<?php foreach ($themes as $themeId => $themeName): ?>
-<?php $isActive = $themeId === $currentTheme; ?>
+                        <?php foreach ($themes as $themeId => $theme): ?>
                         <div class="col-md-4 mb-4">
-                            <div class="card h-100 <?= $isActive ? 'border-primary' : '' ?>">
-<?php if ($isActive) { ?>
-                                <div class="card-header bg-primary text-white">Current Theme</div>
-<?php } ?>
+                            <div class="card h-100 <?= $theme['isActive'] ? 'border-primary' : '' ?>">
+                                <!-- Theme screenshot -->
+                                <div class="theme-screenshot" style="height: 150px; background-size: cover; background-position: center; background-color: #f8f9fa; <?= $theme['screenshotUrl'] ? 'background-image: url(' . htmlspecialchars($theme['screenshotUrl']) . ')' : '' ?>">
+                                    <?php if (!$theme['screenshotUrl']): ?>
+                                        <div class="h-100 d-flex align-items-center justify-content-center text-muted">No preview available</div>
+                                    <?php endif; ?>
+                                </div>
+                                <?php if ($theme['isActive']): ?>
+                                <div class="card-header bg-primary text-white">Current theme</div>
+                                <?php endif; ?>
                                 <div class="card-body d-flex flex-column">
-                                    <h5 class="card-title"><?= htmlspecialchars($themeName) ?></h5>
+                                    <h5 class="card-title"><?= htmlspecialchars($theme['name']) ?></h5>
                                     <p class="card-text text-muted">Theme ID: <code><?= htmlspecialchars($themeId) ?></code></p>
                                     <div class="mt-auto">
-<?php if (!$isActive) { ?>
+                                        <?php if (!$theme['isActive']): ?>
                                         <a href="?page=theme&switch_to=<?= urlencode($themeId) ?>&csrf_token=<?= $csrf_token ?>" class="btn btn-primary">Switch to this theme</a>
-<?php } else { ?>
+                                        <?php else: ?>
                                         <button class="btn btn-outline-secondary" disabled>Currently active</button>
-<?php } ?>
+                                        <?php endif; ?>
                                     </div>
                                 </div>
                             </div>
                         </div>
-<?php endforeach; ?>
+                        <?php endforeach; ?>
                     </div>
                 </div>