diff --git a/client/src/components/MessageWrapper.tsx b/client/src/components/MessageWrapper.tsx
index c36cccf..7b9fef9 100644
--- a/client/src/components/MessageWrapper.tsx
+++ b/client/src/components/MessageWrapper.tsx
@@ -21,7 +21,7 @@ const MessageWrapper = () => {
 
   return (
     <main className="messages-wrapper rounded-md w-full max-w-3xl flex flex-col max-h-[83vh] relative">
-      <ScrollToBottom className="message-container overflow-scroll flex flex-col gap-4 w-full py-4 -mb-3">
+      <ScrollToBottom className="message-container overflow-scroll flex flex-col gap-4 w-full pt-4 pb-6 -mb-3">
         {isLoading
           ? ''
           : isError
diff --git a/client/src/components/ScrollToBottom.tsx b/client/src/components/ScrollToBottom.tsx
index 60bb13d..ee50abd 100644
--- a/client/src/components/ScrollToBottom.tsx
+++ b/client/src/components/ScrollToBottom.tsx
@@ -4,24 +4,29 @@ import { FaChevronDown } from 'react-icons/fa';
 const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; className?: string }) => {
   const [node, setNode] = useState<HTMLDivElement | null>(null);
   const [show, setShow] = useState(false);
-  
+
   const bottom = useCallback((node: HTMLDivElement) => {
     if (node) {
       node.scrollIntoView({ behavior: 'smooth' });
       setNode(node);
     }
   }, []);
-  
+
   useEffect(() => {
-    document.querySelector('main > div')?.addEventListener('scroll', () => {
+    const container = document.querySelector('main > div');
+    container?.addEventListener('scroll', () => {
       if (node?.getBoundingClientRect() && node.getBoundingClientRect().y >= window.innerHeight) {
         setShow(true);
       } else {
         setShow(false);
       }
     });
+    container?.addEventListener('DOMNodeInserted', () => {
+      if (node?.getBoundingClientRect() && node.getBoundingClientRect().y >= window.innerHeight) {
+        node?.scrollIntoView({ behavior: 'smooth' });
+      } 
+    });
   }, [node]);
-      
 
   return (
     <>
@@ -31,11 +36,11 @@ const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; cla
       </div>
       <button
         onClick={() => node?.scrollIntoView({ behavior: 'smooth' })}
-        className={"absolute right-3 transition-all" + (show ? ' bottom-3' : ' -bottom-10')}
+        className={'absolute right-3 transition-all' + (show ? ' bottom-3' : ' -bottom-10')}
       >
-          <div className="popup-btn cursor-pointer rounded-full bg-grey-dark hover:bg-grey-light transition-all">
-            <FaChevronDown className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />
-          </div>
+        <div className="popup-btn cursor-pointer rounded-full shadow-lg shadow-slate-900 bg-grey-dark hover:bg-grey-light transition-all">
+          <FaChevronDown className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />
+        </div>
       </button>
     </>
   );