diff --git a/frontend/src/components/Calendar/CalendarEventPanel.vue b/frontend/src/components/Calendar/CalendarEventPanel.vue
index d384c8bf..3bd1144e 100644
--- a/frontend/src/components/Calendar/CalendarEventPanel.vue
+++ b/frontend/src/components/Calendar/CalendarEventPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="show" class="flex flex-col w-[352px] border-l text-base">
+  <div v-if="show" class="flex flex-col w-[352px] text-base">
     <!-- Event Header -->
     <div
       class="flex items-center justify-between p-4.5 text-ink-gray-7 text-lg font-medium"
diff --git a/frontend/src/pages/Calendar.vue b/frontend/src/pages/Calendar.vue
index 3b981fcd..4adb6360 100644
--- a/frontend/src/pages/Calendar.vue
+++ b/frontend/src/pages/Calendar.vue
@@ -90,19 +90,29 @@
       </template>
     </Calendar>
 
-    <CalendarEventPanel
-      v-if="showEventPanel"
-      v-model="showEventPanel"
-      :event="event"
-      :mode="mode"
-      @save="saveEvent"
-      @edit="editDetails"
-      @delete="deleteEvent"
-      @duplicate="duplicateEvent"
-      @details="showDetails"
-      @close="close"
-      @sync="syncEvent"
-    />
+    <!-- Event Panel Container -->
+    <div
+      class="overflow-hidden flex-none transition-all duration-300 ease-in-out flex flex-col"
+      :class="
+        showEventPanel
+          ? 'w-[352px] border-l bg-surface-white'
+          : 'w-0 border-l-0'
+      "
+    >
+      <CalendarEventPanel
+        v-if="showEventPanel"
+        v-model="showEventPanel"
+        :event="event"
+        :mode="mode"
+        @save="saveEvent"
+        @edit="editDetails"
+        @delete="deleteEvent"
+        @duplicate="duplicateEvent"
+        @details="showDetails"
+        @close="close"
+        @sync="syncEvent"
+      />
+    </div>
   </div>
 </template>
 <script setup>