diff --git a/frontend/src/styles/settings.scss b/frontend/src/styles/settings.scss
index 20ab5c762..ee47e6dfb 100644
--- a/frontend/src/styles/settings.scss
+++ b/frontend/src/styles/settings.scss
@@ -304,6 +304,9 @@
             opacity: 1;
           }
         }
+        .delButton {
+          justify-self: end;
+        }
         &:hover {
           transform: scale(1.1);
           .editButton {
@@ -320,7 +323,7 @@
       .customTheme.button,
       .theme.button {
         display: grid;
-        grid-template-columns: auto 1fr auto;
+        grid-template-columns: 1fr auto 1fr;
         .text {
           color: inherit;
         }
@@ -339,6 +342,11 @@
           }
         }
         &.active {
+          outline-width: 0.2rem !important;
+          transform: scale(1.1);
+          .themeBubbles {
+            opacity: 1;
+          }
           .activeIndicator {
             opacity: 1;
           }
@@ -372,6 +380,28 @@
         margin-top: 0.5rem;
         .button {
           transition: transform 0.125s;
+          &:hover .themeBubbles {
+            opacity: 1;
+          }
+          .themeBubbles {
+            transition: 0.125s;
+            opacity: 0;
+            display: grid;
+            grid-auto-flow: column;
+            gap: 0.5em;
+            border-radius: 1.25em;
+            height: 1em;
+            margin-top: 0.125em;
+            width: max-content;
+            justify-self: end;
+            // background: var(--bg-color);
+            // outline: 0.25rem solid var(--bg-color);
+            .themeBubble {
+              width: 1em;
+              height: 1em;
+              border-radius: 100%;
+            }
+          }
         }
       }
     }
diff --git a/frontend/src/ts/settings/theme-picker.ts b/frontend/src/ts/settings/theme-picker.ts
index e1d648e02..8a2578d92 100644
--- a/frontend/src/ts/settings/theme-picker.ts
+++ b/frontend/src/ts/settings/theme-picker.ts
@@ -131,6 +131,8 @@ export async function refreshButtons(): Promise<void> {
       const bgColor = customTheme.colors[0];
       const mainColor = customTheme.colors[1];
 
+      console.log(customTheme.colors);
+
       customThemesEl.append(
         `<div class="customTheme button" customThemeId='${customTheme._id}' 
         style="color:${mainColor};background:${bgColor}">
@@ -176,11 +178,28 @@ export async function refreshButtons(): Promise<void> {
         if (Config.favThemes.includes(theme.name)) {
           const activeTheme = activeThemeName === theme.name ? "active" : "";
           favThemesEl.append(
-            `<div class="theme button ${activeTheme}" theme='${theme.name}' 
-            style="color:${theme.mainColor};background:${theme.bgColor}">
-            <div class="activeIndicator"><i class="fas fa-circle"></i></div>
+            `<div class="theme button ${activeTheme}" theme='${
+              theme.name
+            }' style="background: ${theme.bgColor}; color: ${
+              theme.mainColor
+            };outline: 0 solid ${theme.mainColor};">
+            <div class="favButton active"><i class="fas fa-star"></i></div>
             <div class="text">${theme.name.replace(/_/g, " ")}</div>
-            <div class="favButton active"><i class="fas fa-star"></i></div></div>`
+            <div class="themeBubbles" style="background: ${
+              theme["bgColor"]
+            };outline: 0.25rem solid ${theme["bgColor"]};">
+              <div class="themeBubble" style="background: ${
+                theme["mainColor"]
+              }"></div>
+              <div class="themeBubble" style="background: ${
+                theme["subColor"]
+              }"></div>
+              <div class="themeBubble" style="background: ${
+                theme["textColor"]
+              }"></div>
+            </div>
+            </div>
+            `
           );
         }
       });
@@ -197,10 +216,26 @@ export async function refreshButtons(): Promise<void> {
       themesEl.append(
         `<div class="theme button ${activeTheme}" theme='${
           theme.name
-        }' style="color:${theme.mainColor};background:${theme.bgColor}">
-        <div class="activeIndicator"><i class="fas fa-circle"></i></div>
+        }' style="background: ${theme.bgColor}; color: ${
+          theme.mainColor
+        };outline: 0 solid ${theme.mainColor};">
+        <div class="favButton"><i class="far fa-star"></i></div>
         <div class="text">${theme.name.replace(/_/g, " ")}</div>
-        <div class="favButton"><i class="far fa-star"></i></div></div>`
+        <div class="themeBubbles" style="background: ${
+          theme["bgColor"]
+        };outline: 0.25rem solid ${theme["bgColor"]};">
+          <div class="themeBubble" style="background: ${
+            theme["mainColor"]
+          }"></div>
+          <div class="themeBubble" style="background: ${
+            theme["subColor"]
+          }"></div>
+          <div class="themeBubble" style="background: ${
+            theme["textColor"]
+          }"></div>
+        </div>
+        </div>
+        `
       );
     });
   }