diff --git a/README.md b/README.md
index c38b2ece6..4caaa9090 100644
--- a/README.md
+++ b/README.md
@@ -116,7 +116,7 @@
 ---
 
 - Choose theme: System, Light, Dark (default) and Black
-- Choose accent color: Blue, Green (default), Teal, Purple, Orange, Pink, Red, and Yellow
+- Choose accent color: Blue, Green (default), Teal, Indigo, Purple, Orange, Pink, Red, and Yellow
 - Toggle auto-scroll to response
 
 <p>
diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss
index e939c27d6..d313827ba 100644
--- a/assets/scss/themes.scss
+++ b/assets/scss/themes.scss
@@ -83,6 +83,11 @@
   --ac-color: theme("colors.green.400");
 }
 
+@mixin tealTheme {
+  // Acent color
+  --ac-color: theme("colors.teal.400");
+}
+
 @mixin indigoTheme {
   // Acent color
   --ac-color: theme("colors.indigo.400");
@@ -93,6 +98,11 @@
   --ac-color: theme("colors.purple.400");
 }
 
+@mixin orangeTheme {
+  // Acent color
+  --ac-color: theme("colors.orange.400");
+}
+
 @mixin pinkTheme {
   // Acent color
   --ac-color: theme("colors.pink.400");
@@ -132,12 +142,18 @@
 :root[data-accent="green"] {
   @include greenTheme;
 }
+:root[data-accent="teal"] {
+  @include tealTheme;
+}
 :root[data-accent="indigo"] {
   @include indigoTheme;
 }
 :root[data-accent="purple"] {
   @include purpleTheme;
 }
+:root[data-accent="orange"] {
+  @include orangeTheme;
+}
 :root[data-accent="pink"] {
   @include pinkTheme;
 }
diff --git a/components/smart/AccentModePicker.vue b/components/smart/AccentModePicker.vue
index d09acd43e..9fb0e8bf3 100644
--- a/components/smart/AccentModePicker.vue
+++ b/components/smart/AccentModePicker.vue
@@ -2,9 +2,15 @@
   <div class="flex flex-col">
     <label>{{ $t("color") }}: {{ active.charAt(0).toUpperCase() + active.slice(1) }}</label>
     <div>
+      <!-- text-blue-400 -->
+      <!-- text-green-400 -->
+      <!-- text-teal-400 -->
       <!-- text-indigo-400 -->
       <!-- text-purple-400 -->
+      <!-- text-orange-400 -->
       <!-- text-pink-400 -->
+      <!-- text-red-400 -->
+      <!-- text-yellow-400 -->
       <span
         v-for="(color, index) of accentColors"
         :key="`color-${index}`"
@@ -24,7 +30,17 @@ export default {
   data() {
     return {
       active: localStorage.getItem("THEME_COLOR") || "green",
-      accentColors: ["blue", "green", "indigo", "purple", "red", "pink", "yellow"],
+      accentColors: [
+        "blue",
+        "green",
+        "teal",
+        "indigo",
+        "purple",
+        "orange",
+        "pink",
+        "red",
+        "yellow",
+      ],
     }
   },
   methods: {
diff --git a/tailwind.config.js b/tailwind.config.js
index 242f70ff4..7a1600624 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,7 +4,9 @@
  ** Docs: https://tailwindcss.com/docs/configuration
  ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
  */
-module.exports = {
+import colors from "tailwindcss/colors"
+
+export default {
   dark: "class",
   corePlugins: {
     float: false,
@@ -28,6 +30,15 @@ module.exports = {
         acColor: "var(--ac-color)",
         actColor: "var(--act-color)",
         ttColor: "var(--tt-color)",
+        blue: colors.blue,
+        green: colors.green,
+        teal: colors.teal,
+        indigo: colors.indigo,
+        purple: colors.purple,
+        orange: colors.orange,
+        pink: colors.pink,
+        red: colors.red,
+        yellow: colors.yellow,
       },
     },
     fontFamily: {