diff --git a/frontend/src/ts/constants/themes.ts b/frontend/src/ts/constants/themes.ts
index b7147af8068c..63b4c8df76d4 100644
--- a/frontend/src/ts/constants/themes.ts
+++ b/frontend/src/ts/constants/themes.ts
@@ -1126,6 +1126,12 @@ export const themes: Record<ThemeName, Omit<Theme, "name">> = {
     subColor: "#ffaca3",
     textColor: "#feffdb",
   },
+  quantum: {
+    bgColor: "#16025f",
+    mainColor: "#3aaaff",
+    subColor: "#8f9fcf",
+    textColor: "#ddeeee",
+  },
 };
 
 export const ThemesList: Theme[] = Object.keys(themes)
diff --git a/frontend/static/themes/quantum.css b/frontend/static/themes/quantum.css
new file mode 100644
index 000000000000..b804f82ce08f
--- /dev/null
+++ b/frontend/static/themes/quantum.css
@@ -0,0 +1,98 @@
+:root {
+  --bg-color: linear-gradient(-45deg, #040527, #041557, #040537, #16025f);
+  --main-color: #3aaaff;
+  --caret-color: #00ddee;
+  --text-color: #ddeeee;
+  --error-color: #fd77d7;
+  --sub-color: #8f9fcf;
+  --sub-alt-color: #101050;
+  --error-color: #ff5869;
+  --error-extra-color: #b03c47;
+  --colorful-error-color: #ff5869;
+  --colorful-error-extra-color: #b03c47;
+}
+
+key {
+  background-color: #ddddff20;
+  color: #aaaabb;
+}
+
+button:hover {
+  background-color: #3fa3ffaa;
+  color: #fff;
+}
+
+button.active {
+  background-color: #3fa3ffaa;
+  color: #ffffff;
+}
+
+button.active:hover {
+  background-color: #3fa3ff88;
+  color: #ffffff;
+}
+
+.spacer {
+  background: #3aaaff44 !important;
+  width: 4px !important;
+}
+
+header #logo .top {
+  font-family: "Comic Sans MS", "Comic Sans", cursive;
+}
+
+#words .incorrect.extra {
+  transform: rotateY(180deg);
+  unicode-bidi: bidi-override;
+  direction: rtl;
+}
+
+nav {
+  gap: 0.5rem;
+}
+
+nav > .textButton:hover {
+  color: currentColor;
+}
+
+a.textButton.view-account .level {
+  background: #ffffff20;
+  color: #cccccc;
+}
+
+a.textButton.view-account:hover .level {
+  background-color: #3fa3ff88;
+  color: #ffffff;
+}
+
+nav > .textButton:nth-child(1) {
+  color: #aaff4faa;
+}
+
+nav > .textButton:nth-child(2) {
+  color: #ffdd70aa;
+}
+
+nav > .textButton:nth-child(3) {
+  color: #00ddeeaa;
+}
+
+nav > .textButton:nth-child(4) {
+  color: #af8fffaa;
+}
+
+nav > .textButton:nth-child(5) {
+  background: #aaff4faa;
+}
+
+nav > .textButton:nth-child(6) {
+  background: #ffdd70aa;
+}
+
+nav > .textButton:nth-child(7) {
+  background: #00ddeeaa;
+}
+
+nav > .textButton:nth-child(8) {
+  background: #8f6fffaa;
+}
diff --git a/packages/schemas/src/themes.ts b/packages/schemas/src/themes.ts
index ac5463a465e8..d984c4272370 100644
--- a/packages/schemas/src/themes.ts
+++ b/packages/schemas/src/themes.ts
@@ -189,6 +189,7 @@ export const ThemeNameSchema = z.enum(
     "wavez",
     "witch_girl",
     "pale_nimbus",
+    "quantum",
   ],
   {
     errorMap: customEnumErrorHandler("Must be a known theme"),