diff --git a/public/themes/list.json b/public/themes/list.json
index ac778a5b3..0d50467b4 100644
--- a/public/themes/list.json
+++ b/public/themes/list.json
@@ -19,5 +19,8 @@
     "olivia",
     "bliss",
     "mizu",
-    "metaverse"
+    "metaverse",
+    "shadow",
+    "mint",
+    "miami"
 ]
diff --git a/public/themes/miami.css b/public/themes/miami.css
new file mode 100644
index 000000000..d9cab94a1
--- /dev/null
+++ b/public/themes/miami.css
@@ -0,0 +1,17 @@
+:root {
+    --bg-color: #f35588;
+    --main-color: #05dfd7;
+    --caret-color: #a3f7bf;
+    --sub-color: #fff591;
+    --error-color: #9d72ff;
+}
+
+.word letter.incorrect, 
+.word.error, 
+.word letter.incorrect.extra {
+    color: var(--error-color);
+}
+
+.word.error {
+    border-bottom: solid 2px var(--error-color);
+}
diff --git a/public/themes/mint.css b/public/themes/mint.css
new file mode 100644
index 000000000..7760f6708
--- /dev/null
+++ b/public/themes/mint.css
@@ -0,0 +1,17 @@
+:root {
+    --bg-color: #05385b;
+    --main-color: #5cdb95;
+    --caret-color: #5cdb95;
+    --sub-color: #edf5e1;
+    --error-color:  #F35588;
+}
+
+.word letter.incorrect, 
+.word.error, 
+.word letter.incorrect.extra {
+    color: var(--error-color);
+}
+
+.word.error {
+    border-bottom: solid 2px var(--error-color);
+}
diff --git a/public/themes/shadow.css b/public/themes/shadow.css
new file mode 100644
index 000000000..9b59a7a01
--- /dev/null
+++ b/public/themes/shadow.css
@@ -0,0 +1,53 @@
+:root {
+    --bg-color: #000;
+    --main-color: #eee;
+    --caret-color: #eee;
+    --sub-color: #444;
+}
+
+@keyframes shadow {
+    to {
+        color: #000;
+    }
+}
+
+@keyframes shadow-repeat {
+    50% {
+        color: #000;
+    }
+    100% {
+        color: #eee;
+    }
+}
+
+.word.error {
+    border-bottom: 2px solid #fff;
+}
+
+.word letter.incorrect {
+    color: #fff;
+}
+
+.word letter.incorrect.extra {
+    color: #fff;
+}
+
+#top .config .group .buttons .button.active,
+#result .stats .group,
+#menu .button:hover,
+#top .config .group .buttons .button:hover,
+a:hover {
+    animation-name: shadow-repeat;
+    animation-duration: 3s;
+    animation-iteration-count: infinite;
+    animation-fill-mode: forwards;
+    animation-timing-function: linear;
+}
+
+#logo, .word letter.correct{
+    animation-name: shadow;
+    animation-duration: 5s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+    animation-timing-function: linear;
+}