diff --git a/src/views/tools/add_background/add_background.vue b/src/views/tools/add_background/add_background.vue
index 62ce835..5699a2a 100644
--- a/src/views/tools/add_background/add_background.vue
+++ b/src/views/tools/add_background/add_background.vue
@@ -1380,6 +1380,10 @@ const removeHistoryItem = (index: number) => {
   border: 2px solid transparent;
   transition: all 0.15s ease;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   
   &:hover {
     transform: scale(1.1);
@@ -1388,8 +1392,6 @@ const removeHistoryItem = (index: number) => {
   }
   
   &.active {
-    border-color: #1fc76f;
-    box-shadow: 0 0 0 3px rgba(31, 199, 111, 0.3);
     transform: scale(1.15);
     
     &::after {
@@ -1397,12 +1399,11 @@ const removeHistoryItem = (index: number) => {
       position: absolute;
       top: 50%;
       left: 50%;
-      transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%) rotate(45deg);
       width: 8px;
-      height: 8px;
-      background: white;
-      border-radius: 50%;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+      height: 14px;
+      border: solid #1fc76f;
+      border-width: 0 2.5px 2.5px 0;
     }
   }
 }
@@ -1793,7 +1794,7 @@ const removeHistoryItem = (index: number) => {
 
 .common-colors-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   gap: 10px;
 }
 
@@ -2054,6 +2055,12 @@ const removeHistoryItem = (index: number) => {
   .shade-item {
     width: 32px;
     height: 32px;
+    
+    &.active::after {
+      width: 7px;
+      height: 12px;
+      border-width: 0 2px 2px 0;
+    }
   }
 
   .toolbar-actions {
@@ -2173,7 +2180,7 @@ const removeHistoryItem = (index: number) => {
   }
   
   .common-colors-grid {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(4, 1fr);
   }
 }
 </style>
\ No newline at end of file