diff --git a/frontend/src/ts/constants/themes.ts b/frontend/src/ts/constants/themes.ts
index a01a9d96b7a9..f7e836f71e14 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",
   },
+  matcha: {
+    bgColor: "#fbf9f8",
+    mainColor: "#919b8b",
+    subColor: "#d2d7c6",
+    textColor: "#4f5e50",
+  },
 };
 
 export const ThemesList: Theme[] = Object.keys(themes)
diff --git a/frontend/static/themes/matcha.css b/frontend/static/themes/matcha.css
new file mode 100644
index 000000000000..6563bcce6cef
--- /dev/null
+++ b/frontend/static/themes/matcha.css
@@ -0,0 +1,36 @@
+:root {
+  --bg-color: #fbf9f8;
+  --main-color: #919b8b;
+  --caret-color: #d2d7c6;
+  --sub-color: #d2d7c6;
+  --sub-alt-color: #ffffff;
+  --text-color: #4f5e50;
+  --error-color: #ad4f4e;
+  --error-extra-color: #7e3a39;
+  --colorful-error-color: #ad4f4e;
+  --colorful-error-extra-color: #7e3a39;
+}
+
+#notificationCenter .notif.good {
+  --notif-border-color: #4f5e50;
+  --notif-background-color: #919b8b;
+  &:hover {
+    --notif-background-color: #4f5e50;
+  }
+}
+
+#notificationCenter .notif.bad {
+  --notif-border-color: #7e3a39;
+  --notif-background-color: #ad4f4e;
+  &:hover {
+    --notif-background-color: #7e3a39;
+  }
+}
+
+#notificationCenter .notif.notice {
+  --notif-border-color: #333344;
+  --notif-background-color: #6385c0;
+  &:hover {
+    --notif-background-color: #333344;
+  }
+}
diff --git a/packages/schemas/src/themes.ts b/packages/schemas/src/themes.ts
index 0633201c7a25..f59eb0664b1e 100644
--- a/packages/schemas/src/themes.ts
+++ b/packages/schemas/src/themes.ts
@@ -95,6 +95,7 @@ export const ThemeNameSchema = z.enum(
     "magic_girl",
     "mashu",
     "matcha_moccha",
+    "matcha",
     "material",
     "matrix",
     "menthol",