diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index fdb0aaf..36d4d07 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -2495,8 +2495,8 @@ onUnmounted(() => {
   display: flex;
   gap: 10px;
   overflow-x: auto;
-  overflow-y: hidden;
-  padding: 0;
+  overflow-y: visible;
+  padding: 10px;
   scrollbar-width: thin;
   scrollbar-color: #cbd5e1 transparent;
 
@@ -2576,7 +2576,7 @@ onUnmounted(() => {
   height: 100%;
   border-radius: 8px;
   border: 2px solid #e5e7eb;
-  overflow: hidden;
+  overflow: visible;
   position: relative;
   background: 
     linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
@@ -2592,6 +2592,7 @@ onUnmounted(() => {
     height: 100%;
     object-fit: contain;
     display: block;
+    border-radius: 6px;
   }
 
   &:hover {
@@ -2600,13 +2601,13 @@ onUnmounted(() => {
 
   .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;
@@ -2617,6 +2618,8 @@ onUnmounted(() => {
     cursor: pointer;
     font-size: 0;
     line-height: 1;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+    z-index: 10;
 
     &::before,
     &::after {
@@ -2918,7 +2921,7 @@ onUnmounted(() => {
 
   .history-scroll-container {
     gap: 8px;
-    padding: 0 8px;
+    padding: 10px 8px;
   }
 
   .toolbar-btn {
diff --git a/src/views/tools/remove_background/remove_background.vue b/src/views/tools/remove_background/remove_background.vue
index 90649fa..1d3d31f 100644
--- a/src/views/tools/remove_background/remove_background.vue
+++ b/src/views/tools/remove_background/remove_background.vue
@@ -1403,8 +1403,8 @@ const removeHistoryItem = (index: number) => {
   display: flex;
   gap: 10px;
   overflow-x: auto;
-  overflow-y: hidden;
-  padding: 0;
+  overflow-y: visible;
+  padding: 10px;
   scrollbar-width: thin;
   scrollbar-color: #cbd5e1 transparent;
 
@@ -1484,7 +1484,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%),
@@ -1500,6 +1500,7 @@ const removeHistoryItem = (index: number) => {
     height: 100%;
     object-fit: contain;
     display: block;
+    border-radius: 6px;
   }
 
   &:hover {
@@ -1508,13 +1509,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;
@@ -1525,6 +1526,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 {
@@ -1630,7 +1633,7 @@ const removeHistoryItem = (index: number) => {
 
   .history-scroll-container {
     gap: 8px;
-    padding: 0 8px;
+    padding: 10px 8px;
   }
 
   .toolbar-btn {