diff --git a/src/views/tools/add_background/add_background.vue b/src/views/tools/add_background/add_background.vue
index 5699a2a..7f3f9a8 100644
--- a/src/views/tools/add_background/add_background.vue
+++ b/src/views/tools/add_background/add_background.vue
@@ -19,7 +19,7 @@
       @change="handleFileSelect"
     />
     
-    <div class="page-header">
+    <div class="page-header" :class="{ 'has-sidebar': uploadedImage }">
       <h2>{{ t('Add Background') }}</h2>
       <!-- Color Shades in Header Center -->
       <div v-if="uploadedImage" class="header-color-shades">
@@ -53,7 +53,7 @@
       </div>
     </div>
 
-    <div class="page-content">
+    <div class="page-content" :class="{ 'has-sidebar': uploadedImage }">
       <div class="tool-container">
         <div class="main-area">
           <div class="upload-section">
@@ -1352,6 +1352,10 @@ const removeHistoryItem = (index: number) => {
   width: 100%;
   padding: 12px 36px;
   gap: 16px;
+  transition: padding-right 0.3s ease;
+}
+
+.page-header.has-sidebar {
   padding-right: 316px;
 }
 
@@ -1418,6 +1422,10 @@ const removeHistoryItem = (index: number) => {
   flex-direction: column;
   overflow: hidden;
   min-height: 0;
+  transition: padding-right 0.3s ease;
+}
+
+.page-content.has-sidebar {
   padding-right: 296px; /* Make space for right sidebar + padding */
 }