diff --git a/src/page/workspace/channel/message-view.tsx b/src/page/workspace/channel/message-view.tsx
index ef7c35b..29ccea1 100644
--- a/src/page/workspace/channel/message-view.tsx
+++ b/src/page/workspace/channel/message-view.tsx
@@ -9,6 +9,7 @@ import { Loader2, MessageSquare, ChevronDown, Pin } from "lucide-react";
 import type { MessageNewService } from "@/socket";
 import MessageItem, { DateDivider, formatDate } from "./message-item";
 import MessageComposer from "./composer";
+import type { Thread } from "./thread-sidebar";
 
 type Props = {
   roomId: string;
@@ -24,6 +25,7 @@ type Props = {
   onDelete?: (messageId: string) => void;
   onEdit?: (messageId: string, content: string) => void;
   onStartThread?: (messageId: string, seq: number) => void;
+  onViewThread?: (threadId: string, seq: number) => void;
   onReactionToggle?: (
     messageId: string,
     emoji: string,
@@ -34,6 +36,7 @@ type Props = {
     { content: string; displayName?: string }
   >;
   typingText?: string | null;
+  threads?: Thread[];
 };
 
 function shouldShowHeader(
@@ -78,9 +81,11 @@ export default function MessageView({
   onDelete,
   onEdit,
   onStartThread,
+  onViewThread,
   onReactionToggle,
   streamingMessages = new Map(),
   typingText,
+  threads,
 }: Props) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
@@ -199,13 +204,17 @@ export default function MessageView({
   return (
     <div className="flex min-h-0 flex-1 flex-col">
       {pinnedMessages.length > 0 && (
-        <div className="flex shrink-0 items-center gap-2 border-b border-border/30 bg-amber-500/[0.03] px-4 py-1.5">
-          <Pin className="size-3 text-amber-500/60" />
-          <span className="truncate text-[12px] text-muted-foreground/60">
+        <button
+          className="flex shrink-0 w-full cursor-pointer items-center gap-2 border-b border-amber-500/10 bg-amber-500/[0.03] px-4 py-2 text-left transition-colors hover:bg-amber-500/[0.06]"
+          type="button"
+          title={`${pinnedMessages.length} pinned message${pinnedMessages.length > 1 ? "s" : ""}`}
+        >
+          <Pin className="size-3.5 text-amber-500/50" />
+          <span className="truncate text-[12px] font-medium text-amber-600/60">
             {pinnedMessages.length} pinned message
             {pinnedMessages.length > 1 ? "s" : ""}
           </span>
-        </div>
+        </button>
       )}
 
       <div className="relative min-h-0 flex-1">
@@ -233,21 +242,25 @@ export default function MessageView({
                 );
               case "notice_beginning":
                 return (
-                  <div key="notice_beginning" className="flex items-center gap-3 px-4 py-5">
-                    <div className="h-px flex-1 bg-gradient-to-r from-transparent via-border/40 to-transparent" />
-                    <span className="shrink-0 text-[11px] font-medium text-muted-foreground/30">
-                      Beginning of #{roomName}
+                  <div key="notice_beginning" className="flex flex-col items-center gap-2 px-4 py-6">
+                    <div className="grid size-10 place-items-center rounded-2xl bg-muted/30 ring-1 ring-border/20">
+                      <MessageSquare className="size-4 text-muted-foreground/20" />
+                    </div>
+                    <span className="text-[12px] font-medium text-muted-foreground/30">
+                      Beginning of <span className="text-muted-foreground/50">#{roomName}</span>
                     </span>
-                    <div className="h-px flex-1 bg-gradient-to-r from-transparent via-border/40 to-transparent" />
+                    <div className="h-px w-24 bg-gradient-to-r from-transparent via-border/30 to-transparent mt-1" />
                   </div>
                 );
               case "notice_scroll":
                 return (
                   <div
                     key="notice_scroll"
-                    className="py-3 text-center text-[11px] text-muted-foreground/30"
+                    className="flex items-center justify-center gap-2 py-4 text-[11px] text-muted-foreground/30"
                   >
-                    Scroll up for older messages
+                    <div className="h-px w-8 bg-gradient-to-r from-transparent to-border/30" />
+                    <span>Scroll up for older messages</span>
+                    <div className="h-px w-8 bg-gradient-to-l from-transparent to-border/30" />
                   </div>
                 );
               case "date":
@@ -265,9 +278,11 @@ export default function MessageView({
                     onPinToggle={onPinToggle}
                     onReactionToggle={onReactionToggle}
                     onStartThread={onStartThread}
+                    onViewThread={onViewThread}
                     onReply={(msg) => setReplyTarget(msg)}
                     roomId={roomId}
                     showHeader={item.showHeader}
+                    threads={threads}
                   />
                 );
               default:
@@ -337,8 +352,8 @@ export default function MessageView({
 
       <MessageComposer
         onCancelReply={() => setReplyTarget(null)}
-        onSend={(content) => {
-          onSend(content, replyTarget?.id);
+        onSend={async (content) => {
+          await onSend(content, replyTarget?.id);
           setReplyTarget(null);
         }}
         onTyping={onTyping}