diff --git a/app/components/channel-feed.jsx b/app/components/channel-feed.jsx
index 0ff87f1..2a0b28a 100644
--- a/app/components/channel-feed.jsx
+++ b/app/components/channel-feed.jsx
@@ -153,7 +153,7 @@ export default function ChannelFeed(props) {
 
     useEffect(() => {
         if (!!channelId) {
-            sendJsonMessage({"type": "subscribe", "topic" : channelId});
+            sendJsonMessage({ "type": "subscribe", "topic": channelId });
         }
     }, [channelId]);
 
@@ -210,7 +210,7 @@ export default function ChannelFeed(props) {
             setMessages((prev) => {
                 let i = 0;
                 const update = [...prev];
-                while(i < update.length) {
+                while (i < update.length) {
                     const msg = update[i];
                     if (msg.optimisticUuid == optimisticUuid) {
                         msg.optimistic = false;
@@ -220,7 +220,7 @@ export default function ChannelFeed(props) {
                     i++;
                 }
                 return update;
-            }, () => {});
+            }, () => { });
         }
 
     }, [channelFetcher]);
@@ -244,74 +244,77 @@ export default function ChannelFeed(props) {
     }, [page]);
 
     return (
-        <section ref={feedRef} onContextMenu={(e) => { e.preventDefault() }} className='wk-channel-feed' onScroll={_ => {
+        <>
+            <section ref={feedRef} onContextMenu={(e) => { e.preventDefault() }} className='wk-channel-feed' onScroll={_ => {
 
-            const feed = feedRef.current;
+                const feed = feedRef.current;
 
-            if (feed.scrollHeight <= feed.clientHeight) {
-                // Not scrollable.
-                return;
-            }
+                if (feed.scrollHeight <= feed.clientHeight) {
+                    // Not scrollable.
+                    return;
+                }
 
-            if (!moreRemaining) {
-                // There's no more messages
-                return;
-            }
+                if (!moreRemaining) {
+                    // There's no more messages
+                    return;
+                }
 
-            const threshold = skeletonMessageHeight * shownSekeletons;
-            const scrollPosition = feed.scrollTop;
+                const threshold = skeletonMessageHeight * shownSekeletons;
+                const scrollPosition = feed.scrollTop;
 
-            if (!prevScrollTop) {
-                setPrevScrollTop(scrollPosition);
-                return;
-            }
+                if (!prevScrollTop) {
+                    setPrevScrollTop(scrollPosition);
+                    return;
+                }
 
-            if (prevScrollTop < scrollPosition) {
-                return;
-            }
+                if (prevScrollTop < scrollPosition) {
+                    return;
+                }
 
-            if (scrollPosition <= threshold && !fetchingMore) {
-                setFetchingMore(true);
-                setPage((v) => v + 1);
-            }
-        }}>
-            {remainingMessages > 0 && Array.apply(null, { length: shownSekeletons }).map((_, i) => {
-                let rng = new Prando(i);
-                rng.skip(i);
-                let num = rng.nextInt(40, 100);
-                return (
-                    <span key={`skeleteton-${i}`}>
-                        <ChannelMessageSkeleton size={`${num}%`} />
-                    </span>
-                );
-            })}
-            {messages.map((e, i) => {
-                if (i % 50 == 0) {
-                    return (
-                        <span ref={(ref) => pageTops.current[i / 50] = ref} key={`cm-${e.id}-${i}`}>
-                            <ChannelMessage
-                                channel={channel}
-                                community={community}
-                                setReplyingTo={setReplyingTo}
-                                me={me}
-                                message={e} />
-                        </span>
-                    );
-                } else {
+                if (scrollPosition <= threshold && !fetchingMore) {
+                    setFetchingMore(true);
+                    setPage((v) => v + 1);
+                }
+            }}>
+                {remainingMessages > 0 && Array.apply(null, { length: shownSekeletons }).map((_, i) => {
+                    let rng = new Prando(i);
+                    rng.skip(i);
+                    let num = rng.nextInt(40, 100);
                     return (
-                        <span key={`cm-${e.id}-${i}`}>
-                            <ChannelMessage
-                                channel={channel}
-                                community={community}
-                                setReplyingTo={setReplyingTo}
-                                me={me}
-                                message={e} />
+                        <span key={`skeleteton-${i}`}>
+                            <ChannelMessageSkeleton size={`${num}%`} />
                         </span>
                     );
-                }
-            })}
-            <div style={{ flexGrow: 1 }} ref={gap} />
-            <span style={{ height: 300 }} ref={end} />
+                })}
+                {messages.map((e, i) => {
+                    const isEnd = i == (messages.length - 1);
+                    if (i % 50 == 0) {
+                        return (
+                            <span ref={(ref) => pageTops.current[i / 50] = ref} key={`cm-${e.id}-${i}`}>
+                                <ChannelMessage
+                                    channel={channel}
+                                    community={community}
+                                    setReplyingTo={setReplyingTo}
+                                    me={me}
+                                    message={e} />
+                            </span>
+                        );
+                    } else {
+                        return (
+                            <span key={`cm-${e.id}-${i}`} style={{paddingBottom:  isEnd ? 20 : 0 }}>
+                                <ChannelMessage
+                                    channel={channel}
+                                    community={community}
+                                    setReplyingTo={setReplyingTo}
+                                    me={me}
+                                    message={e} />
+                            </span>
+                        );
+                    }
+                })}
+                <div style={{ flexGrow: 1 }} ref={gap} />
+                <span style={{ height: 1 }} ref={end} />
+            </section>
             <div className="wk-blur-box">
                 <ChannelReplybox
                     addMessageOptimistically={addMessageOptimistically}
@@ -324,6 +327,7 @@ export default function ChannelFeed(props) {
                     setFiles={setFiles}
                 />
             </div>
-        </section>
+        </>
+
     );
 }
diff --git a/app/components/styles.channel-feed.css b/app/components/styles.channel-feed.css
index e235371..0159bb2 100644
--- a/app/components/styles.channel-feed.css
+++ b/app/components/styles.channel-feed.css
@@ -5,7 +5,7 @@
     flex-direction: column;
     gap: 0;
     overflow-y: auto;
-    height: calc(100% - 57px);
+    height: calc(100% - 107px);
     box-sizing: border-box;
     scrollbar-width: thin;
     transition: all 250ms ease;
@@ -16,7 +16,6 @@
 }
 
 .wk-blur-box {
-    margin-top: var(--space-5);
     position: sticky;
     bottom: 0px;
     left: 0px;
diff --git a/app/components/styles.channel-replybox.css b/app/components/styles.channel-replybox.css
index 3bd1672..37ab0fa 100644
--- a/app/components/styles.channel-replybox.css
+++ b/app/components/styles.channel-replybox.css
@@ -38,7 +38,7 @@
     background-color: var(--gray-a7);
     position: absolute;
     left: 10px;
-    bottom: 25.5px;
+    top: calc(50% - 15px);
     z-index: 1;
 }
 
diff --git a/app/components/useAutosizeTextArea.js b/app/components/useAutosizeTextArea.js
index 24a0e9d..3b19231 100644
--- a/app/components/useAutosizeTextArea.js
+++ b/app/components/useAutosizeTextArea.js
@@ -3,9 +3,9 @@ import { useEffect } from "react";
 const useAutosizeTextArea = (textAreaRef, value) => {
   useEffect(() => {
     if (!!textAreaRef) {
-      // textAreaRef.style.height = "0px";
-      // const scrollHeight = textAreaRef.scrollHeight;
-      // textAreaRef.style.height = scrollHeight + "px";
+      textAreaRef.style.height = "0px";
+      const scrollHeight = textAreaRef.scrollHeight;
+      textAreaRef.style.height = scrollHeight + 2 + "px";
     }
   }, [textAreaRef, value]);
 };