diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
index 14fe4f73d..2666e4e92 100644
--- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
@@ -45,7 +45,7 @@ export default function ChatTrigger({ open, setOpen, isBuilt, canOpen }) {
       <button
         onClick={handleClick}
         className={
-          "shadow-round-btn-shadow hover:shadow-round-btn-shadow fixed bottom-4 right-4 flex h-12 w-12 items-center justify-center rounded-full bg-border px-3 py-1 shadow-md transition-all " +
+          "shadow-round-btn-shadow hover:shadow-round-btn-shadow message-button " +
           (!isBuilt || !canOpen ? "cursor-not-allowed" : "cursor-pointer")
         }
       >
@@ -54,8 +54,8 @@ export default function ChatTrigger({ open, setOpen, isBuilt, canOpen }) {
             className={
               "h-6 w-6 transition-all " +
               (isBuilt && canOpen
-                ? "fill-chat-trigger stroke-chat-trigger stroke-1"
-                : "fill-chat-trigger-disabled stroke-chat-trigger-disabled stroke-1")
+                ? "message-button-icon"
+                : "disabled-message-button-icon")
             }
             style={{ color: "white" }}
             strokeWidth={1.5}
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 3ade49902..b95a930da 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -217,6 +217,10 @@ The cursor: default; property value restores the browser's default cursor style
   .input-dialog{
     @apply text-ring cursor-pointer bg-transparent
   }
+  .message-button {
+    @apply message-button-position flex h-12 w-12 items-center justify-center rounded-full bg-border px-3 py-1 shadow-md transition-all
+  }
+  
   .round-button-form {
     @apply flex h-12 w-12 cursor-pointer justify-center rounded-full bg-border px-3 py-1 shadow-md
   }
@@ -230,10 +234,13 @@ The cursor: default; property value restores the browser's default cursor style
     @apply w-6 fill-build-trigger stroke-1 stroke-build-trigger
   }
   .message-button-position {
-    @apply absolute bottom-4 right-3
+    @apply fixed bottom-4 right-4
   }
   .message-button-icon {
-    @apply w-6 fill-chat-trigger stroke-chat-trigger stroke-1
+    @apply fill-chat-trigger stroke-chat-trigger stroke-1
+  }
+  .disabled-message-button-icon {
+    @apply fill-chat-trigger-disabled stroke-chat-trigger-disabled stroke-1
   }
   .components-disclosure-arrangement {
     @apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2