diff --git a/src/views/tools/add_background/add_background.vue b/src/views/tools/add_background/add_background.vue
index 3e7d34b..b8bade8 100644
--- a/src/views/tools/add_background/add_background.vue
+++ b/src/views/tools/add_background/add_background.vue
@@ -1649,6 +1649,7 @@ const removeHistoryItem = (index: number) => {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0; /* Prevent flex compression */
   
   &:hover {
     transform: scale(1.1);
@@ -2558,18 +2559,20 @@ const removeHistoryItem = (index: number) => {
 
   .header-color-shades {
     width: 100%;
-    justify-content: flex-start;
+    justify-content: center; /* Center align the color shades */
     order: 3;
-    gap: 6px;
+    gap: 4px;
+    padding: 8px 0; /* Add vertical padding for separation */
   }
   
   .shade-item {
-    width: 32px;
-    height: 32px;
+    width: 28px;
+    height: 28px;
+    flex-shrink: 0; /* Prevent flex compression */
     
     &.active::after {
-      width: 7px;
-      height: 12px;
+      width: 6px;
+      height: 11px;
       border-width: 0 2px 2px 0;
     }
   }