diff --git a/package.json b/package.json
index 2c51a477..3f45cc30 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vocechat-web",
-  "version": "0.3.40",
+  "version": "0.3.41",
   "private": true,
   "homepage": "https://voce.chat",
   "dependencies": {
diff --git a/src/routes/chat/ChannelChat/index.tsx b/src/routes/chat/ChannelChat/index.tsx
index a4d70561..763fc555 100644
--- a/src/routes/chat/ChannelChat/index.tsx
+++ b/src/routes/chat/ChannelChat/index.tsx
@@ -112,7 +112,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
               <Tippy
                 placement="left-start"
                 popperOptions={{ strategy: "fixed" }}
-                offset={[0, 162]}
+                offset={[0, 164]}
                 interactive
                 trigger="click"
                 content={<FavList cid={cid} />}
@@ -133,7 +133,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
           </ul>
         }
         header={
-          <header className="h-14 px-5  flex items-center justify-center md:justify-between shadow-[inset_0_-1px_0_rgb(0_0_0_/_10%)]">
+          <header className="px-5 py-4 flex items-center justify-center md:justify-between shadow-[inset_0_-1px_0_rgb(0_0_0_/_10%)]">
             <GoBackNav />
             <div className="flex items-center gap-1">
               <ChannelIcon personal={!is_public} />
@@ -143,7 +143,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
           </header>
         }
         users={
-          <div className={`flex-col gap-1 w-[226px] h-[calc(100vh_-_56px_-_22px)] overflow-y-scroll p-2 shadow-[inset_1px_0px_0px_rgba(0,_0,_0,_0.1)] ${membersVisible ? "flex" : "hidden"}`}>
+          <div className={`h-full flex-col gap-1 w-[226px] overflow-y-scroll p-2 shadow-[inset_1px_0px_0px_rgba(0,_0,_0,_0.1)] ${membersVisible ? "flex" : "hidden"}`}>
             {addVisible && (
               <div className="cursor-pointer flex items-center justify-start gap-1 select-none rounded-lg p-2.5 hover:bg-gray-500/10" onClick={toggleAddVisible}>
                 <IconAdd className="w-6 h-6 dark:fill-slate-300" />
@@ -166,7 +166,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
           </div>
         }
       >
-        <article className="py-4.5 px-1 md:px-4 w-full h-full overflow-x-hidden overflow-y-auto" id={`VOCECHAT_FEED_channel_${cid}`}>
+        <>
           {hasMore ? (
             <LoadMore pullUp={pullUp} pulling={pulling} />
           ) : (
@@ -197,7 +197,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
               context: "channel"
             });
           })}
-        </article>
+        </>
       </Layout>
     </>
   );
diff --git a/src/routes/chat/DMChat/index.tsx b/src/routes/chat/DMChat/index.tsx
index 6d16f204..2a9c659d 100644
--- a/src/routes/chat/DMChat/index.tsx
+++ b/src/routes/chat/DMChat/index.tsx
@@ -65,13 +65,13 @@ const DMChat: FC<Props> = ({ uid = 0, dropFiles }) => {
         </ul>
       }
       header={
-        <header className="box-border h-14 px-5 flex items-center justify-center md:justify-between shadow-[inset_0_-1px_0_rgb(0_0_0_/_10%)]">
+        <header className="box-border px-5 py-1 flex items-center justify-center md:justify-between shadow-[inset_0_-1px_0_rgb(0_0_0_/_10%)]">
           <GoBackNav />
           <User interactive={false} uid={currUser.uid} />
         </header>
       }
     >
-      <article id={`VOCECHAT_FEED_user_${uid}`} className="w-full h-full px-4 py-4.5 overflow-auto">
+      <>
         {hasMore ? <LoadMore pullUp={pullUp} pulling={pulling} /> : null}
         {[...feeds].map((mid, idx) => {
           const curr = messageData[mid];
@@ -87,7 +87,7 @@ const DMChat: FC<Props> = ({ uid = 0, dropFiles }) => {
             context: "user"
           });
         })}
-      </article>
+      </>
     </Layout>
   );
 };
diff --git a/src/routes/chat/Layout/LoginTip.tsx b/src/routes/chat/Layout/LoginTip.tsx
index 3d192124..d6bd4657 100644
--- a/src/routes/chat/Layout/LoginTip.tsx
+++ b/src/routes/chat/Layout/LoginTip.tsx
@@ -23,8 +23,8 @@ const LoginTip = ({ placement = "chat" }: Props) => {
   };
 
   return (
-    <div className={clsx("flex items-center justify-between bg-slate-200/80 dark:bg-gray-800 rounded-lg w-full p-4 border border-solid border-gray-200 dark:border-gray-500",
-      placement == "session" && "w-[96%] md:hidden fixed bottom-2 left-1/2 -translate-x-1/2"
+    <div className={clsx("flex items-center justify-between bg-slate-200/80 dark:bg-gray-800 rounded-lg p-4 border border-solid border-gray-200 dark:border-gray-500",
+      placement == "session" ? "!w-[96%] md:hidden fixed bottom-2 left-1/2 -translate-x-1/2" : "w-full"
     )}>
       <span className="text-xs md:text-base text-gray-400 dark:text-gray-100">
         <i className="mr-2 text-xs md:text-lg ">👋</i>
diff --git a/src/routes/chat/Layout/index.tsx b/src/routes/chat/Layout/index.tsx
index bc3b5da2..91173c83 100644
--- a/src/routes/chat/Layout/index.tsx
+++ b/src/routes/chat/Layout/index.tsx
@@ -106,31 +106,37 @@ const Layout: FC<Props> = ({
   return (
     <>
       {previewImage && <ImagePreviewModal data={previewImage} closeModal={closePreviewModal} />}
-      <article ref={drop} className={`relative w-full rounded-r-2xl`}>
-        {header}
-        <main className="h-full w-full flex items-start justify-between relative" ref={messagesContainer}>
-          <div className="rounded-br-2xl w-full flex flex-col h-[calc(100vh_-_64px)] md:h-[calc(100vh_-_56px_-_18px)]">
-            {children}
-            <div className={`px-2 py-0 md:p-4  ${selects ? "selecting" : ""}`}>
-              {readonly ? (
-                <LoginTip />
-              ) : reachLimit ? (
-                <LicenseUpgradeTip />
-              ) : (
-                <div className={clsx(`flex justify-center`, selects && "hidden")}>
-                  <Send key={to} id={to} context={context} />
-                </div>
-              )}
-              {selects && <Operations context={context} id={to} />}
+      <section ref={drop} className={`relative h-full w-full rounded-r-2xl flex`}>
+        <main className="flex flex-col flex-1">
+          {header}
+          <div className="w-full h-full flex items-start justify-between relative" ref={messagesContainer}>
+            <div className="rounded-br-2xl flex flex-col absolute bottom-0 w-full h-full">
+              {/* 消息流 */}
+              <article id={`VOCECHAT_FEED_${context}_${to}`} className="w-full h-full px-1 md:px-4 py-4.5 overflow-x-hidden overflow-y-scroll">
+                {children}
+              </article>
+              {/* 发送框 */}
+              <div className={`px-2 py-0 md:p-4  ${selects ? "selecting" : ""}`}>
+                {readonly ? (
+                  <LoginTip />
+                ) : reachLimit ? (
+                  <LicenseUpgradeTip />
+                ) : (
+                  <div className={clsx(`flex justify-center`, selects && "hidden")}>
+                    <Send key={to} id={to} context={context} />
+                  </div>
+                )}
+                {selects && <Operations context={context} id={to} />}
+              </div>
             </div>
           </div>
-          {users && <div className="hidden md:block">{users}</div>}
-          {aside && <div className={clsx("p-3 absolute right-0 -top-14 translate-x-full flex-col hidden md:flex")}>{aside}</div>}
         </main>
+        {aside && <div className={clsx("p-3 absolute right-0 top-0 translate-x-full flex-col hidden md:flex")}>{aside}</div>}
+        {users && <div className="hidden md:block">{users}</div>}
         {!readonly && isActive && (
           <DnDTip context={context} name={name} />
         )}
-      </article>
+      </section>
     </>
   );
 };