diff --git a/src/views/tools/add_background/add_background.vue b/src/views/tools/add_background/add_background.vue
index 076f180..e1dc7e4 100644
--- a/src/views/tools/add_background/add_background.vue
+++ b/src/views/tools/add_background/add_background.vue
@@ -1981,6 +1981,7 @@ const removeHistoryItem = (index: number) => {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 10px;
+  padding: 10px;
 }
 
 .favorite-colors-grid {
@@ -1999,6 +2000,7 @@ const removeHistoryItem = (index: number) => {
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: visible;
   
   &:hover {
     transform: scale(1.08);
@@ -2026,13 +2028,13 @@ const removeHistoryItem = (index: number) => {
 .favorite-color-item {
   .remove-favorite-btn {
     position: absolute;
-    top: 2px;
-    right: 2px;
-    width: 18px;
-    height: 18px;
+    top: -8px;
+    right: -8px;
+    width: 20px;
+    height: 20px;
     border-radius: 999px;
-    border: none;
-    background: rgba(15, 23, 42, 0.75);
+    border: 2px solid white;
+    background: #ef4444;
     color: white;
     display: inline-flex;
     align-items: center;
@@ -2043,7 +2045,8 @@ const removeHistoryItem = (index: number) => {
     cursor: pointer;
     font-size: 0;
     line-height: 1;
-    z-index: 2;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+    z-index: 10;
 
     &::before,
     &::after {
@@ -2114,7 +2117,6 @@ const removeHistoryItem = (index: number) => {
 .history-bar {
   flex-shrink: 0;
   width: 100%;
-  padding: 12px 0;
   background: transparent;
   display: flex;
   justify-content: center;
@@ -2122,10 +2124,10 @@ const removeHistoryItem = (index: number) => {
 
 .history-scroll-container {
   display: flex;
-  gap: 10px;
+  gap: 16px;
   overflow-x: auto;
-  overflow-y: hidden;
-  padding: 0;
+  overflow-y: visible;
+  padding: 10px;
   scrollbar-width: thin;
   scrollbar-color: #cbd5e1 transparent;
 
@@ -2205,7 +2207,7 @@ const removeHistoryItem = (index: number) => {
   height: 100%;
   border-radius: 8px;
   border: 2px solid #e5e7eb;
-  overflow: hidden;
+  overflow: visible;
   position: relative;
   background: 
     linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
@@ -2221,6 +2223,7 @@ const removeHistoryItem = (index: number) => {
     height: 100%;
     object-fit: contain;
     display: block;
+    border-radius: 6px;
   }
 
   &:hover {
@@ -2229,13 +2232,13 @@ const removeHistoryItem = (index: number) => {
 
   .history-delete-btn {
     position: absolute;
-    top: 4px;
-    right: 4px;
-    width: 18px;
-    height: 18px;
+    top: -8px;
+    right: -8px;
+    width: 20px;
+    height: 20px;
     border-radius: 999px;
-    border: none;
-    background: rgba(15, 23, 42, 0.6);
+    border: 2px solid white;
+    background: #ef4444;
     color: white;
     display: inline-flex;
     align-items: center;
@@ -2246,6 +2249,8 @@ const removeHistoryItem = (index: number) => {
     cursor: pointer;
     font-size: 0;
     line-height: 1;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+    z-index: 10;
 
     &::before,
     &::after {
@@ -2402,10 +2407,11 @@ const removeHistoryItem = (index: number) => {
   .common-colors-grid {
     grid-template-columns: repeat(6, 1fr);
     gap: 8px;
+    padding: 12px;
   }
 
   .history-bar {
-    padding: 10px 0;
+    padding: 20px 0;
   }
 
   .history-item {
@@ -2414,8 +2420,8 @@ const removeHistoryItem = (index: number) => {
   }
 
   .history-scroll-container {
-    gap: 8px;
-    padding: 0 8px;
+    gap: 12px;
+    padding: 12px 8px;
   }
 
   .toolbar-btn {