diff --git a/frontend/resources/styles/common/dependencies/uxbox-light.scss b/frontend/resources/styles/common/dependencies/uxbox-light.scss
index b6650f0b3..f3b03c378 100644
--- a/frontend/resources/styles/common/dependencies/uxbox-light.scss
+++ b/frontend/resources/styles/common/dependencies/uxbox-light.scss
@@ -21,7 +21,7 @@ $ui-flavour: $color-gray;
 // Background colors
 $primary-ui-bg: $color-gray-50;
 $secondary-ui-bg: $color-gray-60;
-$dark-ui-bg: mix($ui-flavour, $color-white, $mix-percentage-light);
+$dark-ui-bg: $color-gray-40;
 
 // Border color
 $intense-ui-border: $color-gray-40;
diff --git a/frontend/resources/styles/main/partials/sidebar-layers.scss b/frontend/resources/styles/main/partials/sidebar-layers.scss
index 2dcbcb76b..0ece6ac54 100644
--- a/frontend/resources/styles/main/partials/sidebar-layers.scss
+++ b/frontend/resources/styles/main/partials/sidebar-layers.scss
@@ -124,8 +124,6 @@
 
     .element-list-body {
       align-items: center;
-      border-bottom: 1px solid transparent;
-      border-top: 1px solid transparent;
       display: flex;
       padding: $x-small $small;
       transition: none;
@@ -207,29 +205,21 @@
       }
 
       &.selected {
-        background-color: $main-ui-color;
-        
-        .selected {
-          
-          svg {
-            fill: $soft-ui-icons;
-          }
-          
-        }
         
         .element-icon {
           
           svg {
-            fill: $soft-ui-icons;
+            fill: $main-ui-color;
           }
           
         }
         
         span {
-          color: $intense-ui-text;
+          color: $main-ui-color;
         }
         
         &:hover {
+          background-color: $main-ui-color;
 
           .element-icon {
             svg {
@@ -252,18 +242,18 @@
       }
 
       &:hover {
-        border-color: $main-ui-color;
+        background-color: $main-ui-color;
 
         .element-icon {
 
           svg {
-            fill: $main-ui-color;
+            fill: $soft-ui-icons;
           }
 
         }
 
         span {
-          color: $main-ui-color;
+          color: $intense-ui-text;
         }
 
       }
diff --git a/frontend/resources/styles/main/partials/sidebar-sitemap.scss b/frontend/resources/styles/main/partials/sidebar-sitemap.scss
index eef9f5eca..4ee457236 100644
--- a/frontend/resources/styles/main/partials/sidebar-sitemap.scss
+++ b/frontend/resources/styles/main/partials/sidebar-sitemap.scss
@@ -85,13 +85,14 @@
         a {
 
           svg {
-            fill: $medium-ui-icons;
+            fill: $soft-ui-icons;
             height: 15px;
             margin-left: $x-small;
+            opacity: .6;
             width: 15px;
 
             &:hover {
-              fill: $intense-ui-icons;
+              opacity: 1;
             }
 
           }
@@ -101,6 +102,28 @@
       }
 
       &:hover {
+        background-color: $main-ui-color;
+
+        .page-icon {
+
+          svg {
+            fill: $soft-ui-icons;
+          }
+
+          span {
+            color: $intense-ui-text;
+          }
+
+        }
+
+        .page-actions {
+          display: flex;
+          @include animation(0s,.3s,fadeIn);
+        }
+
+      }
+
+      &.selected {
 
         .page-icon {
 
@@ -116,46 +139,22 @@
 
       }
 
-      &.selected {
+      &:hover {
 
         .page-icon {
 
           svg {
             fill: $soft-ui-icons;
           }
-
         }
 
         span {
-          color: $soft-ui-text;
-        }
-
-      }
-
-      .selected {
-        a {
-          svg {
-            fill: $soft-ui-icons;
-            opacity: .6;
-
-            &:hover {
-              fill: $soft-ui-icons;
-              opacity: 1;
-            }
-          }
+          color: $intense-ui-text;
         }
       }
 
     }
 
-    &:hover {
-
-      .page-actions {
-        display: flex;
-        @include animation(0s,.3s,fadeIn);
-      }
-
-    }
 
     .element-list-body {
       align-items: center;
@@ -178,107 +177,9 @@
         width: 62px;
       }
 
-      .element-icon {
-
-        svg {
-          fill: $medium-ui-icons;
-        }
-
-      }
-
-      .toggle-content {
-        margin-left: auto;
-        width: 12px;
-
-        svg {
-          fill: $intense-ui-icons;
-          transform: rotate(90deg);
-          width: 10px;
-        }
-
-        &.inverse {
-          svg { transform: rotate(270deg); }
-        }
-
-        &:hover {
-
-          svg {
-            fill: $medium-ui-icons;
-          }
-
-        }
-
-      }
-
-      &.group {
-
-        &.open {
-
-          .toggle-content {
-            flex-shrink: 0;
-
-            svg {
-              transform: rotate(270deg);
-            }
-
-          }
-
-        }
-
-      }
-
-      span.element-name {
-        min-width: 40px;
-        min-height: 16px;
-        display: block;
-
-        color: $medium-ui-text;
-        font-size: $fs13;
-        overflow-x: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      &.selected {
-
-        .element-icon {
-
-          svg {
-            fill: $intense-ui-icons;
-          }
-
-        }
-
-        span {
-          color: $intense-ui-text;
-        }
-
-      }
-
-      .selected {
-
-        svg {
-          fill: $intense-ui-icons;
-        }
-
-      }
-
-      &:hover {
-        border-color: $main-ui-color;
-
-        .element-icon {
-
-          svg {
-            fill: $intense-ui-icons;
-          }
-
-        }
-
-      }
-
       &.dragging {
         // TODO: revisit this
-        background-color: #eee;
+        background-color: $dark-ui-bg;
       }
     }
   }