diff --git a/apps/stage-web/src/components/Layouts/InteractiveArea.vue b/apps/stage-web/src/components/Layouts/InteractiveArea.vue
index ce06ff68d..f5b6cf844 100644
--- a/apps/stage-web/src/components/Layouts/InteractiveArea.vue
+++ b/apps/stage-web/src/components/Layouts/InteractiveArea.vue
@@ -144,7 +144,7 @@ onAfterMessageComposed(async () => {
         h-full w-full overflow-scroll rounded-xl
         bg="primary-50/50 dark:primary-950/70" backdrop-blur-md
       >
-        <ChatHistory h-full flex-1 p-4 w="full" max-h="<md:[60%]" />
+        <ChatHistory h-full flex-1 w="full" max-h="<md:[60%]" />
         <div h="<md:full" flex gap-2>
           <BasicTextarea
             v-model="messageInput"
diff --git a/apps/stage-web/src/components/Widgets/ChatHistory.vue b/apps/stage-web/src/components/Widgets/ChatHistory.vue
index 52ab36b15..669661be0 100644
--- a/apps/stage-web/src/components/Widgets/ChatHistory.vue
+++ b/apps/stage-web/src/components/Widgets/ChatHistory.vue
@@ -34,9 +34,9 @@ onTokenLiteral(async () => {
 </script>
 
 <template>
-  <div relative px="<sm:2" py="<sm:2" flex="~ col" rounded="lg" overflow-hidden>
+  <div py="<sm:2" flex="~ col" rounded="lg" relative overflow-hidden py-4>
     <div flex-1 /> <!-- spacer -->
-    <div ref="chatHistoryRef" v-auto-animate h-full w-full flex="~ col" overflow-scroll>
+    <div ref="chatHistoryRef" v-auto-animate px="<sm:2" flex="~ col" h-full w-full overflow-scroll px-4>
       <div flex-1 /> <!-- spacer -->
       <div v-for="(message, index) in messages" :key="index" mb-2>
         <div v-if="message.role === 'error'" flex mr="12">