diff --git a/components/Chat/ChatInput.tsx b/components/Chat/ChatInput.tsx
index f84c33e..7993fef 100644
--- a/components/Chat/ChatInput.tsx
+++ b/components/Chat/ChatInput.tsx
@@ -63,6 +63,7 @@ export const ChatInput: FC<Props> = ({ onSend, messageIsStreaming, model }) => {
     if (textareaRef && textareaRef.current) {
       textareaRef.current.style.height = "inherit";
       textareaRef.current.style.height = `${textareaRef.current?.scrollHeight}px`;
+      textareaRef.current.style.overflow = `${textareaRef?.current?.scrollHeight > 400 ? "auto" : "hidden"}`;
     }
   }, [content]);
 
@@ -75,7 +76,7 @@ export const ChatInput: FC<Props> = ({ onSend, messageIsStreaming, model }) => {
           resize: "none",
           bottom: `${textareaRef?.current?.scrollHeight}px`,
           maxHeight: "400px",
-          overflow: "auto"
+          overflow: `${textareaRef.current && textareaRef.current.scrollHeight > 400 ? "auto" : "hidden"}`
         }}
         placeholder="Type a message..."
         value={content}
diff --git a/styles/globals.css b/styles/globals.css
index b5c61c9..f1218ea 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,3 +1,29 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #aaa;
+}
+
+::-webkit-scrollbar-track:hover {
+  background-color: #f2f2f2;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}