diff --git a/src/App.css b/src/App.css
index 74b5e05..bccb8ad 100644
--- a/src/App.css
+++ b/src/App.css
@@ -36,3 +36,22 @@
     transform: rotate(360deg);
   }
 }
+
+.container{
+  overflow-x: hidden;
+}
+
+.container::-webkit-scrollbar{
+  /* display: none; */
+  width: 5px;
+}
+.container::-webkit-scrollbar-track {
+  /* box-shadow: inset 0 0 5px grey; */
+  border-radius: 10px;
+}
+
+/* Handle */
+.container::-webkit-scrollbar-thumb {
+  background: white;
+  border-radius: 10px;
+}
\ No newline at end of file
diff --git a/src/components/messageBox.tsx b/src/components/messageBox.tsx
index 90e590b..203d5d7 100644
--- a/src/components/messageBox.tsx
+++ b/src/components/messageBox.tsx
@@ -40,7 +40,7 @@ export default function MessageBox({
   }, [messages]);
 
   return (
-    <div className="h-full border-[#141414] border-y bg-black overflow-scroll">
+    <div className="h-full border-[#141414] border-y bg-black overflow-scroll  container">
       {messages.map(message => {
         return Message(message);
       })}