diff --git a/src/components/appHeader/index.tsx b/src/components/appHeader/index.tsx
index b2aa0a68..d48ed670 100644
--- a/src/components/appHeader/index.tsx
+++ b/src/components/appHeader/index.tsx
@@ -1,6 +1,6 @@
 import { NoteConnector } from '@components/note/connector';
 
-import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
+import { ArrowLeftIcon, ArrowRightIcon, ReloadIcon } from '@radix-ui/react-icons';
 import { useRouter } from 'next/router';
 
 export default function AppHeader() {
@@ -14,21 +14,34 @@ export default function AppHeader() {
     window.history.forward();
   };
 
+  const reload = () => {
+    router.reload();
+  };
+
   return (
-    <div data-tauri-drag-region className="flex h-full w-full items-center">
-      <div className="relative w-[68px] shrink-0">{/* macos traffic lights */}</div>
-      <div className="flex w-full flex-1 items-center justify-between px-2">
-        <div className="flex h-full gap-2">
-          <button onClick={() => goBack()} className="group rounded-md p-1 hover:bg-zinc-900">
-            <ArrowLeftIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-300" />
-          </button>
-          <button onClick={() => goForward()} className="group rounded-md p-1 hover:bg-zinc-900">
-            <ArrowRightIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-300" />
-          </button>
-        </div>
-        <div>
-          <NoteConnector />
-        </div>
+    <div data-tauri-drag-region className="flex h-full w-full flex-1 items-center justify-between px-2">
+      <div className="flex h-full items-center gap-2 pl-[68px]">
+        <button
+          onClick={() => goBack()}
+          className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
+        >
+          <ArrowLeftIcon className="h-4 w-4 text-zinc-500 group-hover:text-zinc-300" />
+        </button>
+        <button
+          onClick={() => goForward()}
+          className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
+        >
+          <ArrowRightIcon className="h-4 w-4 text-zinc-500 group-hover:text-zinc-300" />
+        </button>
+        <button
+          onClick={() => reload()}
+          className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
+        >
+          <ReloadIcon className="h-[14px] w-[14px] text-zinc-500 group-hover:text-zinc-300" />
+        </button>
+      </div>
+      <div>
+        <NoteConnector />
       </div>
     </div>
   );
diff --git a/src/components/columns/account/account.tsx b/src/components/columns/account/account.tsx
index 22272863..37b23b88 100644
--- a/src/components/columns/account/account.tsx
+++ b/src/components/columns/account/account.tsx
@@ -9,8 +9,8 @@ export const Account = memo(function Account({ user }: { user: any }) {
   };
 
   return (
-    <button onClick={() => setCurrentUser()} className="relative h-11 w-11 shrink rounded-full">
-      <Image src={userData.picture} alt="user's avatar" fill={true} className="rounded-full object-cover" />
+    <button onClick={() => setCurrentUser()} className="relative h-11 w-11 shrink rounded-lg">
+      <Image src={userData.picture} alt="user's avatar" fill={true} className="rounded-lg object-cover" />
     </button>
   );
 });
diff --git a/src/components/columns/account/index.tsx b/src/components/columns/account/index.tsx
index 0d52d63f..e62fd498 100644
--- a/src/components/columns/account/index.tsx
+++ b/src/components/columns/account/index.tsx
@@ -2,12 +2,14 @@ import { Account } from '@components/columns/account/account';
 
 import LumeSymbol from '@assets/icons/Lume';
 import { PlusIcon } from '@radix-ui/react-icons';
+import { getVersion } from '@tauri-apps/api/app';
 import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 import Database from 'tauri-plugin-sql-api';
 
 export default function AccountColumn() {
   const [users, setUsers] = useState([]);
+  const [version, setVersion] = useState(null);
 
   const getAccounts = useCallback(async () => {
     const db = await Database.load('sqlite:lume.db');
@@ -16,25 +18,40 @@ export default function AccountColumn() {
     setUsers(result);
   }, []);
 
+  const getAppVersion = useCallback(async () => {
+    const appVersion = await getVersion();
+    setVersion(appVersion);
+  }, []);
+
   useEffect(() => {
     getAccounts().catch(console.error);
-  }, [getAccounts]);
+    getAppVersion().catch(console.error);
+  }, [getAccounts, getAppVersion]);
 
   return (
     <div className="flex h-full flex-col items-center justify-between px-2 pt-4 pb-4">
       <div className="flex flex-col gap-4">
+        <Link
+          href="/explore"
+          className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center overflow-hidden rounded-lg bg-zinc-900 hover:bg-zinc-800"
+        >
+          <LumeSymbol className="h-6 w-auto text-zinc-400 group-hover:text-zinc-200" />
+        </Link>
         {users.map((user, index) => (
           <Account key={index} user={user} />
         ))}
         <Link
           href="/onboarding"
-          className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center overflow-hidden rounded-full border-2 border-dashed border-zinc-600 hover:border-zinc-400"
+          className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-zinc-600 hover:border-zinc-400"
         >
           <PlusIcon className="h-4 w-4 text-zinc-400 group-hover:text-zinc-200" />
         </Link>
       </div>
-      <div className="flex flex-col gap-4">
-        <LumeSymbol className="h-8 w-auto text-zinc-700" />
+      <div className="flex flex-col gap-0.5 text-center">
+        <span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-sm font-black uppercase leading-tight text-transparent">
+          Lume
+        </span>
+        <span className="text-xs font-medium text-zinc-700">v{version}</span>
       </div>
     </div>
   );
diff --git a/src/components/columns/navigator/newsfeed/index.tsx b/src/components/columns/navigator/newsfeed/index.tsx
index 7cb204b4..fc2c16e7 100644
--- a/src/components/columns/navigator/newsfeed/index.tsx
+++ b/src/components/columns/navigator/newsfeed/index.tsx
@@ -29,7 +29,7 @@ export default function Newsfeed() {
             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-fuchsia-500 via-purple-300 to-pink-300"></span>
+              <span className="h-4 w-3 rounded-sm bg-gradient-to-br from-fuchsia-500 via-purple-300 to-pink-300"></span>
             </div>
             <span>Following</span>
           </ActiveLink>
@@ -39,7 +39,7 @@ export default function Newsfeed() {
             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>
+              <span className="h-4 w-3 rounded-sm bg-gradient-to-br from-amber-500 via-orange-200 to-yellow-300"></span>
             </div>
             <span>Circle</span>
           </ActiveLink>
diff --git a/src/components/imageWithFallback.tsx b/src/components/imageWithFallback.tsx
index 255eb790..268b908f 100644
--- a/src/components/imageWithFallback.tsx
+++ b/src/components/imageWithFallback.tsx
@@ -26,6 +26,7 @@ export const ImageWithFallback = memo(function ImageWithFallback({
           size={44}
           name={alt}
           variant="beam"
+          square={true}
           colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
         />
       ) : (
diff --git a/src/components/user/extend.tsx b/src/components/user/extend.tsx
index a5c6e7c2..1c38917c 100644
--- a/src/components/user/extend.tsx
+++ b/src/components/user/extend.tsx
@@ -55,14 +55,20 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
 
   return (
     <div className="relative flex items-start gap-4">
-      <div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
+      <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900">
         {profile.picture ? (
-          <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
+          <ImageWithFallback
+            src={profile.picture}
+            alt={pubkey}
+            fill={true}
+            className="rounded-md border border-white/10 object-cover"
+          />
         ) : (
           <Avatar
             size={44}
             name={pubkey}
             variant="beam"
+            square={true}
             colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
           />
         )}
diff --git a/src/components/user/mini.tsx b/src/components/user/mini.tsx
index 9a449aa7..334cf700 100644
--- a/src/components/user/mini.tsx
+++ b/src/components/user/mini.tsx
@@ -50,14 +50,15 @@ 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 shrink-0 overflow-hidden rounded-full">
+      <div className="relative h-5 w-5 shrink-0 overflow-hidden rounded">
         {profile.picture ? (
-          <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
+          <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded object-cover" />
         ) : (
           <Avatar
             size={20}
             name={pubkey}
             variant="beam"
+            square={true}
             colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
           />
         )}
diff --git a/src/pages/explore.tsx b/src/pages/explore.tsx
new file mode 100644
index 00000000..f37272fc
--- /dev/null
+++ b/src/pages/explore.tsx
@@ -0,0 +1,24 @@
+import BaseLayout from '@layouts/base';
+import WithSidebarLayout from '@layouts/withSidebar';
+
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
+
+export default function Page() {
+  return <></>;
+}
+
+Page.getLayout = function getLayout(
+  page:
+    | string
+    | number
+    | boolean
+    | ReactElement<unknown, string | JSXElementConstructor<unknown>>
+    | ReactFragment
+    | ReactPortal
+) {
+  return (
+    <BaseLayout>
+      <WithSidebarLayout>{page}</WithSidebarLayout>
+    </BaseLayout>
+  );
+};