diff --git a/package-lock.json b/package-lock.json
index 94114d8..8d405ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "react-dom": "18.2.0",
         "react-firebase-hooks": "^5.1.1",
         "react-hot-toast": "^2.4.0",
+        "react-intersection-observer": "^9.4.3",
         "react-markdown": "^8.0.5",
         "react-select": "^5.7.0",
         "react-syntax-highlighter": "^15.5.0",
@@ -9661,6 +9662,14 @@
         "react-dom": ">=16"
       }
     },
+    "node_modules/react-intersection-observer": {
+      "version": "9.4.3",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.4.3.tgz",
+      "integrity": "sha512-WNRqMQvKpupr6MzecAQI0Pj0+JQong307knLP4g/nBex7kYfIaZsPpXaIhKHR+oV8z+goUbH9e10j6lGRnTzlQ==",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -18216,6 +18225,12 @@
         "goober": "^2.1.10"
       }
     },
+    "react-intersection-observer": {
+      "version": "9.4.3",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.4.3.tgz",
+      "integrity": "sha512-WNRqMQvKpupr6MzecAQI0Pj0+JQong307knLP4g/nBex7kYfIaZsPpXaIhKHR+oV8z+goUbH9e10j6lGRnTzlQ==",
+      "requires": {}
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 3d498fa..a343ac4 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "react-dom": "18.2.0",
     "react-firebase-hooks": "^5.1.1",
     "react-hot-toast": "^2.4.0",
+    "react-intersection-observer": "^9.4.3",
     "react-markdown": "^8.0.5",
     "react-select": "^5.7.0",
     "react-syntax-highlighter": "^15.5.0",
diff --git a/src/components/contentContainer/index.tsx b/src/components/contentContainer/index.tsx
index 497d522..3d327f7 100644
--- a/src/components/contentContainer/index.tsx
+++ b/src/components/contentContainer/index.tsx
@@ -3,8 +3,11 @@
 import { useRef, useEffect } from 'react';
 import ChatInput from '../chatInput/ChatInput';
 import TopBar from '../topBar/TopBar';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilState } from 'recoil';
 import { showBottomDivRef } from '@/recoil/atom/AtomRef';
+import { ArrowSmallDownIcon } from '@heroicons/react/24/outline';
+import { useScrollToView } from '@/hook/useScrollToView';
+import { useInView } from 'react-intersection-observer';
 
 type ContentContainerProps = {
   children: React.ReactNode;
@@ -12,14 +15,22 @@ type ContentContainerProps = {
 };
 
 function ContentContainer({ children, pageId }: ContentContainerProps) {
-  const messageEndRef = useRef<null | HTMLDivElement>(null);
+  const messageEndRef = useRef<HTMLDivElement | null>(null);
 
-  const setShowBottomDivRef = useSetRecoilState(showBottomDivRef);
+  const [ShowBottomDiv, setShowBottomDivRef] = useRecoilState(showBottomDivRef);
+
+  const scrollIntoView = useScrollToView(ShowBottomDiv);
+
+  const { ref, inView } = useInView();
 
   useEffect(() => {
     setShowBottomDivRef(messageEndRef);
   }, []);
 
+  const scrollTobBottom = () => {
+    scrollIntoView();
+  };
+
   return (
     <div className="main">
       <TopBar />
@@ -29,11 +40,19 @@ function ContentContainer({ children, pageId }: ContentContainerProps) {
             <div className="h-full w-full overflow-y-auto">
               <div className="flex flex-col items-center text-sm dark:bg-gray-800">
                 {children}
+                <div
+                  ref={messageEndRef}
+                  className="h-32 w-full flex-shrink-0 md:h-48"
+                >
+                  <div ref={ref} />
+                </div>
               </div>
-              <div
-                ref={messageEndRef}
-                className="h-32 w-full flex-shrink-0 md:h-48"
-              ></div>
+              <button
+                onClick={scrollTobBottom}
+                className={`scrollDown ${inView && 'hidden'}`}
+              >
+                <ArrowSmallDownIcon className="m-1 h-4 w-4" />
+              </button>
             </div>
           </div>
         </div>
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 868f8b8..c76ac76 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -45,4 +45,9 @@
   .sidebar-container {
     @apply hidden h-full bg-gray-900 md:fixed md:inset-0 md:flex md:w-[260px] md:flex-col;
   }
+
+  .scrollDown {
+    @apply absolute right-6 bottom-[124px] z-10 cursor-pointer rounded-full border border-gray-200 bg-gray-50 text-gray-600 
+    dark:border-white/10 dark:bg-white/10 dark:text-gray-200 md:bottom-[120px];
+  }
 }