diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css
index 60da7cdce..e2813cd12 100644
--- a/src/public/stylesheets/theme-next-dark.css
+++ b/src/public/stylesheets/theme-next-dark.css
@@ -50,6 +50,7 @@
--select-focus-text-color: var(--input-text-color);
--select-dropdown-text-color: var(--input-text-color);
--select-arrow-svg: url("data:image/svg+xml,");
+ --select-group-heading-text-color: gray;
--hover-item-text-color: #efefef;
--hover-item-background-color: #ffffff24;
diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css
index 20b0a461b..424be79ae 100644
--- a/src/public/stylesheets/theme-next-light.css
+++ b/src/public/stylesheets/theme-next-light.css
@@ -50,6 +50,7 @@
--select-focus-text-color: var(--input-text-color);
--select-dropdown-text-color: var(--input-text-color);
--select-arrow-svg: url("data:image/svg+xml,");
+ --select-group-heading-text-color: gray;
--hover-item-text-color: black;
--hover-item-background-color: #0000001a;
diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css
index 010f685e4..9102d54de 100644
--- a/src/public/stylesheets/theme-next/forms.css
+++ b/src/public/stylesheets/theme-next/forms.css
@@ -152,4 +152,12 @@ select:focus, select.form-select:focus {
option {
color: var(--select-dropdown-text-color);
+}
+
+optgroup {
+ color: var(--select-group-heading-text-color);
+ font-size: .75em;
+ font-weight: normal;
+ font-style: normal;
+ line-height: 40px;
}
\ No newline at end of file