diff --git a/src/App.vue b/src/App.vue
index 5d7fad2417fb04209761d32c254afba51316f233..4714afa1703c9f45e3a6968eafc7e486c47f8b9e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -291,7 +291,6 @@ function handleAction(actionType: ActionType) {
     left: 0;
     width: 100%;
     height: 100%;
-    overflow: hidden;
 
     @mixin gradient-style($color) {
       position: absolute;
diff --git a/src/components/Configurator.vue b/src/components/Configurator.vue
index 6e6c9e95c1e8f5a206e5d5ae489c2879a2dfd9b4..7813637b319799317104a8950ce1f0ab9aa43b10 100644
--- a/src/components/Configurator.vue
+++ b/src/components/Configurator.vue
@@ -212,7 +212,10 @@ function setWidgetColor(widgetType: WidgetType, fillColor: string) {
 .configurator-scroll {
   width: var.$layout-sider-width;
   height: 100%;
-  background-color: var.$color-configurator;
+
+  @media screen and (max-width: var.$screen-lg) {
+    background-color: var.$color-configurator;
+  }
 }
 
 .configurator {
@@ -360,7 +363,7 @@ function setWidgetColor(widgetType: WidgetType, fillColor: string) {
       }
 
       &:hover {
-        background-color: darken(var.$color-configurator, 3);
+        background-color: lighten(var.$color-configurator, 0);
       }
 
       & > :deep(svg) {
diff --git a/src/layouts/Sider.vue b/src/layouts/Sider.vue
index e9b3c014d990533e0636f9234fbefecfc5dadc67..1acfb1a6d16ce8f27b891232fa8e97282dd96351 100644
--- a/src/layouts/Sider.vue
+++ b/src/layouts/Sider.vue
@@ -26,10 +26,8 @@ const { isCollapsed, openSider, closeSider } = useSider()
   height: 100%;
 
   @media (prefers-reduced-motion: no-preference) {
-    & {
-      transition: transform 0.2s;
-      will-change: transform;
-    }
+    transition: transform 0.2s;
+    will-change: transform;
   }
 
   .icon-right {