diff --git a/administrator/templates/atum/images/select-bg-light-rtl.svg b/administrator/templates/atum/images/select-bg-light-rtl.svg
new file mode 100644
index 0000000000000..6840f232861a2
--- /dev/null
+++ b/administrator/templates/atum/images/select-bg-light-rtl.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1854.539" height="295" preserveAspectRatio="xMinYMin meet"><path d="M13.573 145.7l6.9 6.9c.1.1.2.1.3.1s.2 0 .3-.1l6.9-6.9c.1-.1.1-.2.1-.3s0-.2-.1-.3l-.7-.7c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1l-5.8 5.8-5.8-5.8c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1l-.7.7c-.1.1-.1.2-.1.3-.296.1-.195.2-.096.3h-.002z" fill="#fff"/><path fill="#fff" d="M44.54 0h1810v295h-1810z"/></svg>
diff --git a/administrator/templates/atum/images/select-bg-light.svg b/administrator/templates/atum/images/select-bg-light.svg
new file mode 100644
index 0000000000000..d0b83ba6b1e55
--- /dev/null
+++ b/administrator/templates/atum/images/select-bg-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1854.54 295" preserveAspectRatio="xMinYMid" width="1854.54" height="295"><path d="M1825.1,145.7l6.9,6.9c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1l6.9-6.9c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3l-0.7-0.7c-0.1-0.1-0.2-0.1-0.3-0.1s-0.2,0-0.3,0.1l-5.8,5.8l-5.8-5.8c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1l-0.7,0.7c-0.1,0.1-0.1,0.2-0.1,0.3C1824.9,145.5,1825,145.6,1825.1,145.7z" fill="#fff"/><rect width="1810" height="295" fill="#fff"/></svg>
diff --git a/administrator/templates/atum/scss/_variables.scss b/administrator/templates/atum/scss/_variables.scss
index fa0803f98da55..f91f848ed41ee 100644
--- a/administrator/templates/atum/scss/_variables.scss
+++ b/administrator/templates/atum/scss/_variables.scss
@@ -220,11 +220,15 @@ $custom-select-indicator-padding:    3rem;
 $custom-select-bg:                   var(--atum-bg-light);
 $custom-select-bg-size:              116rem;
 $custom-select-indicator:            url(../images/select-bg.svg);
+$custom-select-indicator-light:      url(../images/select-bg-light.svg);
 $custom-select-indicator-rtl:        url(../images/select-bg-rtl.svg);
+$custom-select-indicator-light-rtl:  url(../images/select-bg-light-rtl.svg);
 $custom-select-indicator-active:     url(../../../images/select-bg.svg);
 $custom-select-indicator-active-rtl: url(../../../images/select-bg-rtl.svg);
 $custom-select-background:           $custom-select-indicator no-repeat right center / $custom-select-bg-size; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+$custom-select-background-light:     $custom-select-indicator-light no-repeat right center / $custom-select-bg-size;
 $custom-select-background-rtl:       $custom-select-indicator-rtl no-repeat left center / $custom-select-bg-size; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+$custom-select-background-light-rtl: $custom-select-indicator-light-rtl no-repeat left center / $custom-select-bg-size;
 $custom-select-box-shadow:           $atum-box-shadow;
 $custom-select-bg-size-sm:           75rem;
 $custom-select-multiple-padding-y:   .3rem;
diff --git a/administrator/templates/atum/scss/vendor/bootstrap/_custom-forms.scss b/administrator/templates/atum/scss/vendor/bootstrap/_custom-forms.scss
index de755e145c051..4e0e2b4c0760d 100644
--- a/administrator/templates/atum/scss/vendor/bootstrap/_custom-forms.scss
+++ b/administrator/templates/atum/scss/vendor/bootstrap/_custom-forms.scss
@@ -36,10 +36,18 @@
   &.custom-select-color-state {
 
     &.custom-select-success {
+      background: $custom-select-background-light;
       color: theme-color("success");
       background-color: theme-color("success");
       border-color: theme-color("success");
 
+      [dir=rtl] & {
+        background: $custom-select-background-light-rtl;
+        color: theme-color("success");
+        background-color: theme-color("success");
+        border-color: theme-color("success");
+      }
+
       option {
         color: $custom-select-color;
         background-color: var(--white-offset);
@@ -47,10 +55,18 @@
     }
 
     &.custom-select-danger {
+      background: $custom-select-background-light;
       color: theme-color("danger");
       background-color: theme-color("danger");
       border-color: theme-color("danger");
 
+      [dir=rtl] & {
+        background: $custom-select-background-light-rtl;
+        color: theme-color("danger");
+        background-color: theme-color("danger");
+        border-color: theme-color("danger");
+      }
+
       option {
         color: $custom-select-color;
         background-color: var(--white-offset);