diff --git a/src/components/MessageInput.tsx b/src/components/MessageInput.tsx
index 3c3141c..71d65cb 100644
--- a/src/components/MessageInput.tsx
+++ b/src/components/MessageInput.tsx
@@ -37,7 +37,7 @@ const MessageInput: FC<MessageInputProps> = ({ value = '', className, maxLength
           <Textarea
             onKeyDown={handleKeyDown}
             maxLength={maxLength}
-            className="col-start-1 col-end-2 row-start-1 row-end-2 box-border max-h-28 resize-none overflow-x-hidden break-words rounded-lg bg-gray-50 pb-5 text-sm 2xl:max-h-40"
+            className="col-start-1 col-end-2 row-start-1 row-end-2 box-border max-h-28 resize-none overflow-x-hidden whitespace-pre-wrap break-words rounded-lg bg-gray-50 pb-5 text-sm 2xl:max-h-40"
             rows={2}
             value={value}
             placeholder="Type your message here."
diff --git a/src/components/MessageItem.tsx b/src/components/MessageItem.tsx
index afef9a8..a17519f 100644
--- a/src/components/MessageItem.tsx
+++ b/src/components/MessageItem.tsx
@@ -28,12 +28,12 @@ const MessageItem: FC<MessageItemProps> = ({ data }) => {
   }
 
   return (
-    <div className="grid grid-cols-[auto_1fr] gap-x-2 px-4 first:pt-4 last:pb-4">
+    <div className="box-border grid grid-cols-[auto_1fr] gap-x-2 px-4 first:pt-4 last:pb-4">
       <Avatar>
         <AvatarImage src={formatData.avatar} />
         <AvatarFallback>{formatData.username}</AvatarFallback>
       </Avatar>
-      <div className="grid">
+      <div className="overflow-hidden">
         <div className="grid grid-cols-[auto_1fr] items-baseline gap-x-2 leading-none">
           <div className="text-sm font-medium text-slate-600">{formatData.username}</div>
           <div className="text-xs text-slate-400">{formatData.date}</div>
diff --git a/src/components/MessageList.tsx b/src/components/MessageList.tsx
index 1bcaf05..3676576 100644
--- a/src/components/MessageList.tsx
+++ b/src/components/MessageList.tsx
@@ -6,8 +6,9 @@ import { ScrollArea } from '@/components/ui/ScrollArea'
 export interface MessageListProps {
   children?: Array<ReactElement<MessageItemProps>>
 }
+// [&>div>div]:!block fix word-break: break-word;
 const MessageList: FC<MessageListProps> = ({ children }) => {
-  return <ScrollArea>{children}</ScrollArea>
+  return <ScrollArea className="[&>div>div]:!block">{children}</ScrollArea>
 }
 
 MessageList.displayName = 'MessageList'
diff --git a/src/components/ui/Markdown.tsx b/src/components/ui/Markdown.tsx
index 07a78e2..7572059 100644
--- a/src/components/ui/Markdown.tsx
+++ b/src/components/ui/Markdown.tsx
@@ -59,7 +59,7 @@ const Markdown: FC<MarkdownProps> = ({ children = '', className }) => {
         }
       }}
       remarkPlugins={[remarkGfm, remarkBreaks]}
-      className={cn(className, 'prose prose-sm prose-slate')}
+      className={cn(className, 'prose prose-sm prose-slate break-words')}
     >
       {children}
     </ReactMarkdown>
diff --git a/src/views/Footer/index.tsx b/src/views/Footer/index.tsx
index 0abff1b..b4098ce 100644
--- a/src/views/Footer/index.tsx
+++ b/src/views/Footer/index.tsx
@@ -39,7 +39,7 @@ const Footer: FC = () => {
   }
 
   return (
-    <div className="grid gap-y-2 px-4 pb-4">
+    <div className="relative z-10 grid gap-y-2 px-4 pb-4 pt-2 before:absolute before:-top-4 before:left-0 before:h-4 before:w-full before:bg-gradient-to-t before:from-slate-50 before:from-30% before:to-transparent">
       <MessageInput
         value={messageText}
         onEnter={handleSend}