diff --git a/scss/ui/_button.scss b/scss/ui/_button.scss
index 812ff14a0..75cac2298 100644
--- a/scss/ui/_button.scss
+++ b/scss/ui/_button.scss
@@ -91,7 +91,7 @@ button {
     border: 2px solid $white;
 
     &.active {
-      border: 2px solid $grey-light;
+      border: 2px solid $grey;
     }
 
     &.active:hover {
@@ -273,7 +273,7 @@ button:focus:not(:focus-visible),
   }
 
   &.icon-bg:focus:not(:focus-visible) {
-    border: 2px solid $grey-light;
+    border: 2px solid $grey;
   }
 
   &.icon-smaller:focus:not(:focus-visible) {
@@ -315,7 +315,7 @@ button.active,
 }
 
 .cycle {
-  background: linear-gradient(45deg, #8db2d7, #ddddee);
+  background: linear-gradient(45deg, #b8d6f3, #ddddee);
   width: 37px; 
   height: 37px; 
 }
diff --git a/src/controls/legend.js b/src/controls/legend.js
index a7f769264..c30df9e3d 100644
--- a/src/controls/legend.js
+++ b/src/controls/legend.js
@@ -682,7 +682,7 @@ const Legend = function Legend(options = {}) {
       addBackgroundButtons(backgroundLayers);
       addCycleButtons(cycleGroups);
       toggleGroup = ToggleGroup({
-        components: backgroundLayerButtons.concat(cycleButtons),
+        components: cycleButtons.concat(backgroundLayerButtons),
         cls: 'spacing-horizontal-small'
       });
       this.render();