diff --git a/package.json b/package.json
index 718f8b5a..13515ca7 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "**/*": "prettier --write --ignore-unknown"
   },
   "dependencies": {
+    "@radix-ui/react-collapsible": "^1.0.2",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
     "@radix-ui/react-icons": "^1.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 95f9b161..93b703dd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,6 +1,7 @@
 lockfileVersion: 5.4
 
 specifiers:
+  '@radix-ui/react-collapsible': ^1.0.2
   '@radix-ui/react-dialog': ^1.0.3
   '@radix-ui/react-dropdown-menu': ^2.0.4
   '@radix-ui/react-icons': ^1.2.0
@@ -52,6 +53,7 @@ specifiers:
   ws: ^8.13.0
 
 dependencies:
+  '@radix-ui/react-collapsible': 1.0.2_biqbaboplfbrettd7655fr4n2y
   '@radix-ui/react-dialog': 1.0.3_zula6vjvt3wdocc4mwcxqa6nzi
   '@radix-ui/react-dropdown-menu': 2.0.4_zula6vjvt3wdocc4mwcxqa6nzi
   '@radix-ui/react-icons': 1.2.0_react@18.2.0
@@ -737,6 +739,26 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
+  /@radix-ui/react-collapsible/1.0.2_biqbaboplfbrettd7655fr4n2y:
+    resolution:
+      { integrity: sha512-QNiDT6Au8jUU0K1WV+HEd4loH7C5CKQjeXxskwqyiyAkyCmW7qlQM5vSSJCIoQC+OVPyhgafSmGudRP8Qm1/gA== }
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.21.0
+      '@radix-ui/primitive': 1.0.0
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-context': 1.0.0_react@18.2.0
+      '@radix-ui/react-id': 1.0.0_react@18.2.0
+      '@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-primitive': 1.0.2_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0
+      '@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /@radix-ui/react-collection/1.0.2_biqbaboplfbrettd7655fr4n2y:
     resolution:
       { integrity: sha512-s8WdQQ6wNXpaxdZ308KSr8fEWGrg4un8i4r/w7fhiS4ElRNjk5rRcl0/C6TANG2LvLOGIxtzo/jAg6Qf73TEBw== }
diff --git a/src/components/columns/navigator/index.tsx b/src/components/columns/navigator/index.tsx
index 6d0d503b..9b54946c 100644
--- a/src/components/columns/navigator/index.tsx
+++ b/src/components/columns/navigator/index.tsx
@@ -1,63 +1,13 @@
-import ActiveLink from '@components/activeLink';
 import Messages from '@components/columns/navigator/messages';
-
-import { PlusIcon } from '@radix-ui/react-icons';
-import useLocalStorage from '@rehooks/local-storage';
+import Newsfeed from '@components/columns/navigator/newsfeed';
 
 export default function NavigatorColumn() {
-  const [follows] = useLocalStorage('follows');
-
   return (
-    <div className="flex h-full flex-col gap-4 pt-4">
+    <div className="relative flex h-full flex-col gap-4 pt-4">
       {/* Newsfeed */}
-      <div className="flex flex-col gap-1 px-2">
-        <div className="flex items-center justify-between px-2">
-          <h3 className="text-xs font-bold uppercase tracking-wide text-zinc-300">Newsfeed</h3>
-          <button
-            type="button"
-            className="group flex h-6 w-6 items-center justify-center rounded-full hover:bg-zinc-900"
-          >
-            <PlusIcon className="h-3 w-3 text-zinc-500 group-hover:text-zinc-100" />
-          </button>
-        </div>
-        <div className="flex flex-col gap-1 text-zinc-400">
-          <ActiveLink
-            href={`/newsfeed/following`}
-            activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
-            className="flex h-8 items-center gap-2.5 rounded-lg px-2.5 text-sm font-medium hover:bg-zinc-900"
-          >
-            <div className="inline-flex h-5 w-5 items-center justify-center">
-              <span className="h-4 w-3.5 rounded bg-gradient-to-br from-fuchsia-500 via-purple-300 to-pink-300"></span>
-            </div>
-            <span>following</span>
-          </ActiveLink>
-          <ActiveLink
-            href={`/newsfeed/circle`}
-            activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
-            className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:bg-zinc-900"
-          >
-            <div className="inline-flex h-5 w-5 items-center justify-center">
-              <span className="h-4 w-3.5 rounded bg-gradient-to-br from-amber-500 via-orange-200 to-yellow-300"></span>
-            </div>
-            <span>circle</span>
-          </ActiveLink>
-        </div>
-      </div>
+      <Newsfeed />
       {/* Messages */}
-      <div className="flex flex-col gap-1 px-2">
-        <div className="flex items-center justify-between px-2">
-          <h3 className="text-xs font-bold uppercase tracking-wide text-zinc-300">Messages</h3>
-          <button
-            type="button"
-            className="group flex h-6 w-6 items-center justify-center rounded-full hover:bg-zinc-900"
-          >
-            <PlusIcon className="h-3 w-3 text-zinc-500 group-hover:text-zinc-100" />
-          </button>
-        </div>
-        <div className="flex flex-col">
-          <Messages data={follows} />
-        </div>
-      </div>
+      <Messages />
     </div>
   );
 }
diff --git a/src/components/columns/navigator/messages/index.tsx b/src/components/columns/navigator/messages/index.tsx
index a7c369fb..150726ca 100644
--- a/src/components/columns/navigator/messages/index.tsx
+++ b/src/components/columns/navigator/messages/index.tsx
@@ -1,15 +1,34 @@
-import { UserMini } from '@components/user/mini';
+import { MessageList } from '@components/columns/navigator/messages/list';
 
-import { Key } from 'react';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { ChevronUpIcon } from '@radix-ui/react-icons';
+import useLocalStorage from '@rehooks/local-storage';
+import { useState } from 'react';
 
-export default function Messages({ data }: { data: any }) {
-  console.log(data);
+export default function Messages() {
+  const [open, setOpen] = useState(true);
+  const [follows] = useLocalStorage('follows');
 
   return (
-    <>
-      {data.map((item: string, index: Key) => (
-        <UserMini key={index} pubkey={item} />
-      ))}
-    </>
+    <Collapsible.Root open={open} onOpenChange={setOpen}>
+      <div className="flex flex-col gap-1 px-2 pb-8">
+        <Collapsible.Trigger className="flex cursor-pointer items-center gap-2 rounded-md py-1 px-2 hover:bg-zinc-900">
+          <button
+            type="button"
+            className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
+              open ? 'rotate-180' : ''
+            }`}
+          >
+            <ChevronUpIcon className="h-4 w-4 text-zinc-500" />
+          </button>
+          <h3 className="bg-gradient-to-r from-red-300 via-pink-100 to-blue-300 bg-clip-text text-xs font-bold uppercase tracking-wide text-transparent">
+            Messages
+          </h3>
+        </Collapsible.Trigger>
+        <Collapsible.Content className="flex flex-col">
+          <MessageList data={follows} />
+        </Collapsible.Content>
+      </div>
+    </Collapsible.Root>
   );
 }
diff --git a/src/components/columns/navigator/messages/list.tsx b/src/components/columns/navigator/messages/list.tsx
new file mode 100644
index 00000000..59de3e5c
--- /dev/null
+++ b/src/components/columns/navigator/messages/list.tsx
@@ -0,0 +1,13 @@
+import { UserMini } from '@components/user/mini';
+
+import { Key, memo } from 'react';
+
+export const MessageList = memo(function MessageList({ data }: { data: any }) {
+  return (
+    <>
+      {data.map((item: string, index: Key) => (
+        <UserMini key={index} pubkey={item} />
+      ))}
+    </>
+  );
+});
diff --git a/src/components/columns/navigator/newsfeed/index.tsx b/src/components/columns/navigator/newsfeed/index.tsx
new file mode 100644
index 00000000..f0742cf3
--- /dev/null
+++ b/src/components/columns/navigator/newsfeed/index.tsx
@@ -0,0 +1,51 @@
+import ActiveLink from '@components/activeLink';
+
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { ChevronUpIcon } from '@radix-ui/react-icons';
+import { useState } from 'react';
+
+export default function Newsfeed() {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <Collapsible.Root open={open} onOpenChange={setOpen}>
+      <div className="flex flex-col px-2">
+        <Collapsible.Trigger className="flex cursor-pointer items-center gap-2 rounded-md py-1 px-2 hover:bg-zinc-900">
+          <button
+            type="button"
+            className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
+              open ? 'rotate-180' : ''
+            }`}
+          >
+            <ChevronUpIcon className="h-4 w-4 text-zinc-500" />
+          </button>
+          <h3 className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-xs font-bold uppercase tracking-wide text-transparent">
+            Newsfeed
+          </h3>
+        </Collapsible.Trigger>
+        <Collapsible.Content className="flex flex-col gap-1 text-zinc-400">
+          <ActiveLink
+            href={`/newsfeed/following`}
+            activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
+            className="flex h-8 items-center gap-2.5 rounded-lg px-2.5 text-sm font-medium hover:bg-zinc-900"
+          >
+            <div className="inline-flex h-5 w-5 items-center justify-center">
+              <span className="h-4 w-3.5 rounded bg-gradient-to-br from-fuchsia-500 via-purple-300 to-pink-300"></span>
+            </div>
+            <span>Following</span>
+          </ActiveLink>
+          <ActiveLink
+            href={`/newsfeed/circle`}
+            activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
+            className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:bg-zinc-900"
+          >
+            <div className="inline-flex h-5 w-5 items-center justify-center">
+              <span className="h-4 w-3.5 rounded bg-gradient-to-br from-amber-500 via-orange-200 to-yellow-300"></span>
+            </div>
+            <span>Circle</span>
+          </ActiveLink>
+        </Collapsible.Content>
+      </div>
+    </Collapsible.Root>
+  );
+}
diff --git a/src/components/user/mini.tsx b/src/components/user/mini.tsx
index 4ebf4af5..28c8f3e5 100644
--- a/src/components/user/mini.tsx
+++ b/src/components/user/mini.tsx
@@ -53,7 +53,7 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
 
   return (
     <div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">
-      <div className="relative h-5 w-5 overflow-hidden rounded-full">
+      <div className="relative h-5 w-5 shrink-0 overflow-hidden rounded-full">
         {profile.picture ? (
           <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
         ) : (
@@ -65,8 +65,8 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
           />
         )}
       </div>
-      <div className="flex flex-col">
-        <p className="leading-tight text-zinc-300">
+      <div className="inline-flex w-full flex-1 flex-col overflow-hidden">
+        <p className="truncate leading-tight text-zinc-300">
           {profile.display_name ? profile.display_name : truncate(pubkey, 16, ' .... ')}
         </p>
       </div>
diff --git a/src/layouts/withSidebar.tsx b/src/layouts/withSidebar.tsx
index 2b7f7e66..6640ffd7 100644
--- a/src/layouts/withSidebar.tsx
+++ b/src/layouts/withSidebar.tsx
@@ -11,13 +11,13 @@ export default function WithSidebarLayout({ children }: { children: React.ReactN
       >
         <AppHeader />
       </div>
-      <div className="relative flex h-full w-full flex-1 flex-row">
+      <div className="relative flex min-h-0 w-full flex-1">
         <div className="relative w-[68px] shrink-0 border-r border-zinc-900">
           <div className="absolute top-0 left-0 h-12 w-full" />
           <AccountColumn />
         </div>
-        <div className="grid grow grid-cols-4">
-          <div className="col-span-1 border-r border-zinc-900">
+        <div className="grid w-full grid-cols-4">
+          <div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
             <NavigatorColumn />
           </div>
           <div className="col-span-3 m-3 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
diff --git a/src/pages/onboarding/login/step-2.tsx b/src/pages/onboarding/login/step-2.tsx
index b87485e3..07bae67f 100644
--- a/src/pages/onboarding/login/step-2.tsx
+++ b/src/pages/onboarding/login/step-2.tsx
@@ -5,7 +5,6 @@ import { RelayContext } from '@components/contexts/relay';
 
 import { useLocalStorage } from '@rehooks/local-storage';
 import Image from 'next/image';
-import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { getPublicKey, nip19 } from 'nostr-tools';
 import {
@@ -62,6 +61,10 @@ export default function Page() {
     [db, pubkey]
   );
 
+  const submit = () => {
+    router.push('/');
+  };
+
   useEffect(() => {
     relayPool.subscribe(
       [
@@ -122,12 +125,12 @@ export default function Page() {
               </div>
             </div>
           </div>
-          <Link
-            href="/"
+          <button
+            onClick={() => submit()}
             className="inline-flex w-full transform items-center justify-center rounded-lg bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 px-3.5 py-2.5 font-medium text-zinc-800 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
           >
             <span className="drop-shadow-lg">Done →</span>
-          </Link>
+          </button>
         </div>
       </div>
     </div>