diff --git a/fortune_generator/css/styles.css b/fortune_generator/css/styles.css
index ab13334..6f9df5e 100644
--- a/fortune_generator/css/styles.css
+++ b/fortune_generator/css/styles.css
@@ -125,3 +125,15 @@ button:hover {
   background-color: var(--bg-color);
   color: var(--title-color);
 }
+
+.color-preview {
+  display: flex; /* Use flex to align dots in a row */
+}
+
+.color-dot {
+  display: inline-block;
+  width: 12px; /* Dot size */
+  height: 12px; /* Dot size */
+  border-radius: 50%; /* Circular shape */
+  margin-left: 5px; /* Spacing between dots */
+}
diff --git a/fortune_generator/js/theme.js b/fortune_generator/js/theme.js
index 8b2b78d..b1d53b6 100644
--- a/fortune_generator/js/theme.js
+++ b/fortune_generator/js/theme.js
@@ -27,6 +27,17 @@ document.addEventListener("DOMContentLoaded", () => {
       themeName.textContent = theme.name;
       themeItem.appendChild(themeName);
 
+      // Add color dots for visual preview
+      const colorPreview = document.createElement("div");
+      colorPreview.className = "color-preview";
+      Object.values(theme.properties).slice(0, 3).forEach((color) => {
+        const colorDot = document.createElement("span");
+        colorDot.style.backgroundColor = color;
+        colorDot.className = "color-dot";
+        colorPreview.appendChild(colorDot);
+      });
+      themeItem.appendChild(colorPreview);
+
       // Apply theme on click
       themeItem.addEventListener("click", () => applyTheme(theme.properties));