diff --git a/.changes/fix-sender-overflow.md b/.changes/fix-sender-overflow.md
new file mode 100644
index 0000000..6d00211
--- /dev/null
+++ b/.changes/fix-sender-overflow.md
@@ -0,0 +1,5 @@
+---
+"@matechat/react": patch:fix
+---
+
+Fix max height of sender and optimize scrollbar style.
diff --git a/playground/src/Chat.tsx b/playground/src/Chat.tsx
index 4cc4113..c5aec7d 100644
--- a/playground/src/Chat.tsx
+++ b/playground/src/Chat.tsx
@@ -11,6 +11,7 @@ import { InputCount, Sender } from "@matechat/react/sender";
 import type { MessageParam } from "@matechat/react/utils";
 import { useChat } from "@matechat/react/utils/chat";
 import { useMateChat } from "@matechat/react/utils/core";
+import clsx from "clsx";
 import { MessageSquarePlus } from "lucide-react";
 import { useMemo, useState } from "react";
 
@@ -84,7 +85,13 @@ export function Chat() {
     <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
       <main className="flex flex-col items-center justify-center h-[80vh] w-full max-w-3xl p-4 bg-white rounded-lg shadow-md gap-5">
         <BubbleList
-          className="px-4 w-full max-w-full"
+          className={clsx(
+            "px-4 w-full max-w-full",
+            "[scrollbar-gutter:stable] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full",
+            "[&::-webkit-scrollbar-thumb]:cursor-auto",
+            "[&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600",
+            "[&::-webkit-scrollbar-thumb:hover]:bg-gray-400 dark:[&::-webkit-scrollbar-thumb:hover]:bg-gray-500",
+          )}
           messages={messages}
           background="right-solid"
           isPending={pending}
diff --git a/src/sender.tsx b/src/sender.tsx
index be51a55..54f45af 100644
--- a/src/sender.tsx
+++ b/src/sender.tsx
@@ -180,7 +180,9 @@ export function Sender({
       data-slot="sender"
       className={twMerge(
         clsx(
-          "flex flex-col items-center border border-gray-200 dark:border-gray-700 rounded-2xl shadow-sm transition-all duration-300 hover:shadow-md focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500",
+          "px-1 flex flex-col items-center border rounded-2xl",
+          "border-gray-200 dark:border-gray-700 shadow-sm transition-all duration-300 hover:shadow-md",
+          "focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500",
           className,
         ),
       )}
@@ -192,7 +194,16 @@ export function Sender({
         onChange={handleChange}
         onKeyDown={handleKeyDown}
         placeholder={placeholder}
-        className="w-full pt-4 px-4 border-0 rounded-2xl !resize-none focus:ring-0 focus:outline-none text-gray-700 placeholder-gray-400"
+        className={clsx(
+          "w-full pt-4 px-4 border-0 rounded-2xl !resize-none bg-transparent",
+          "focus:ring-0 focus:outline-none text-gray-700 placeholder-gray-400",
+          "overflow-y-auto max-h-32",
+          "[scrollbar-gutter:stable] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full",
+          "[&::-webkit-scrollbar-thumb]:cursor-auto",
+          "[&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600",
+          "[&::-webkit-scrollbar-thumb:hover]:bg-gray-400 dark:[&::-webkit-scrollbar-thumb:hover]:bg-gray-500",
+          "[&::-webkit-scrollbar-track]:mt-3",
+        )}
         rows={2}
       />
       <div className="flex items-center w-full px-4 py-2 gap-4">