diff --git a/app/assets/javascripts/admin/addon/templates/components/themes-list.hbs b/app/assets/javascripts/admin/addon/templates/components/themes-list.hbs
index f71aa9dd52c..e7055b71268 100644
--- a/app/assets/javascripts/admin/addon/templates/components/themes-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/components/themes-list.hbs
@@ -1,6 +1,6 @@
 <div class="themes-list-header">
-  <DButton @action={{action "changeView"}} @actionParam={{this.THEMES}} @class={{concat "themes-tab " "tab " (if this.themesTabActive "btn-danger active" "")}} @label="admin.customize.theme.title" />
-  <DButton @action={{action "changeView"}} @actionParam={{this.COMPONENTS}} @class={{concat "components-tab " "tab " (if this.componentsTabActive "btn-danger active" "")}} @label="admin.customize.theme.components" @icon="puzzle-piece" />
+  <DButton @action={{action "changeView"}} @actionParam={{this.THEMES}} @class={{concat "themes-tab " "tab " (if this.themesTabActive "active" "")}} @label="admin.customize.theme.title" />
+  <DButton @action={{action "changeView"}} @actionParam={{this.COMPONENTS}} @class={{concat "components-tab " "tab " (if this.componentsTabActive "active" "")}} @label="admin.customize.theme.components" @icon="puzzle-piece" />
 </div>
 
 <div class="themes-list-container">
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 2c876a8abf7..bf18cfc2b45 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -189,6 +189,8 @@
       text-align: center;
 
       &.active {
+        background-color: var(--quaternary);
+        color: var(--secondary);
         font-weight: 700;
       }
     }