diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index fe0d6149..118c815e 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -1853,6 +1853,17 @@ dependencies = [
  "vcpkg",
 ]
 
+[[package]]
+name = "os_info"
+version = "3.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5c424bc68d15e0778838ac013b5b3449544d8133633d8016319e7e05a820b8c0"
+dependencies = [
+ "log",
+ "serde",
+ "winapi",
+]
+
 [[package]]
 name = "overload"
 version = "0.1.1"
@@ -3061,6 +3072,7 @@ dependencies = [
  "objc",
  "once_cell",
  "open",
+ "os_info",
  "percent-encoding",
  "rand 0.8.5",
  "raw-window-handle",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 9c59ad3a..d1839a2d 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -16,7 +16,7 @@ tauri-build = { version = "1.2", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.2", features = ["app-all", "clipboard-all", "http-all", "notification-all", "shell-open", "system-tray", "window-start-dragging"] }
+tauri = { version = "1.2", features = ["app-all", "clipboard-all", "http-all", "notification-all", "os-all", "shell-open", "system-tray", "window-start-dragging"] }
 
 [dependencies.tauri-plugin-sql]
 git = "https://github.com/tauri-apps/plugins-workspace"
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 2885e131..1f2dbd20 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -18,6 +18,9 @@
         "hide": false,
         "show": false
       },
+      "os": {
+        "all": true
+      },
       "http": {
         "all": true,
         "request": true,
diff --git a/src/components/appHeader/actions.tsx b/src/components/appHeader/actions.tsx
new file mode 100644
index 00000000..27dd6628
--- /dev/null
+++ b/src/components/appHeader/actions.tsx
@@ -0,0 +1,53 @@
+import { ArrowLeftIcon, ArrowRightIcon, ReloadIcon } from '@radix-ui/react-icons';
+import { platform } from '@tauri-apps/api/os';
+import { useRouter } from 'next/router';
+import { useLayoutEffect, useState } from 'react';
+
+export default function AppActions() {
+  const router = useRouter();
+  const [os, setOS] = useState('');
+
+  const goBack = () => {
+    router.back();
+  };
+
+  const goForward = () => {
+    window.history.forward();
+  };
+
+  const reload = () => {
+    router.reload();
+  };
+
+  useLayoutEffect(() => {
+    const getPlatform = async () => {
+      const result = await platform();
+      setOS(result);
+    };
+
+    getPlatform().catch(console.error);
+  }, []);
+
+  return (
+    <div className={`flex h-full items-center gap-2 ${os === 'darwin' ? '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>
+  );
+}
diff --git a/src/components/appHeader/index.tsx b/src/components/appHeader/index.tsx
index d48ed670..ffa934c7 100644
--- a/src/components/appHeader/index.tsx
+++ b/src/components/appHeader/index.tsx
@@ -1,47 +1,26 @@
+import AppActions from '@components/appHeader/actions';
 import { NoteConnector } from '@components/note/connector';
 
-import { ArrowLeftIcon, ArrowRightIcon, ReloadIcon } from '@radix-ui/react-icons';
-import { useRouter } from 'next/router';
+import { PlusIcon } from '@radix-ui/react-icons';
 
 export default function AppHeader() {
-  const router = useRouter();
-
-  const goBack = () => {
-    router.back();
-  };
-
-  const goForward = () => {
-    window.history.forward();
-  };
-
-  const reload = () => {
-    router.reload();
-  };
-
   return (
-    <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 data-tauri-drag-region className="flex h-full w-full flex-1 items-center px-2">
+      <AppActions />
+      <div data-tauri-drag-region className="flex h-full w-full items-center justify-between">
+        <div className="flex h-full items-center divide-x divide-zinc-900 px-4 py-px">
+          <div className="group inline-flex h-full w-24 items-center justify-center border-l border-zinc-900 hover:bg-zinc-900">
+            <span className="text-sm font-medium leading-none text-zinc-400 group-hover:text-zinc-100">Home</span>
+          </div>
+          <div className="inline-flex h-full w-16 items-center justify-center border-r border-zinc-900">
+            <button className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900">
+              <PlusIcon className="h-4 w-4 text-zinc-400 group-hover:text-zinc-100" />
+            </button>
+          </div>
+        </div>
+        <div>
+          <NoteConnector />
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/note/base.tsx b/src/components/note/base.tsx
index 06cd5a53..53f035eb 100644
--- a/src/components/note/base.tsx
+++ b/src/components/note/base.tsx
@@ -87,7 +87,7 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
         <UserExtend pubkey={event.pubkey} time={event.created_at} />
         <div className="-mt-5 pl-[52px]">
           <div className="flex flex-col gap-2">
-            <div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1 prose-img:mt-2 prose-img:mb-0 prose-video:mt-1 prose-video:mb-0">
+            <div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
               {content}
             </div>
           </div>
diff --git a/src/components/note/comment.tsx b/src/components/note/comment.tsx
index 263da935..132945db 100644
--- a/src/components/note/comment.tsx
+++ b/src/components/note/comment.tsx
@@ -57,7 +57,7 @@ export const NoteComment = memo(function NoteComment({ event }: { event: any })
         <UserExtend pubkey={event.pubkey} time={event.created_at} />
         <div className="-mt-5 pl-[52px]">
           <div className="flex flex-col gap-2">
-            <div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1 prose-img:mt-2 prose-img:mb-0 prose-video:mt-1 prose-video:mb-0">
+            <div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
               {content}
             </div>
           </div>
diff --git a/src/components/note/extend.tsx b/src/components/note/extend.tsx
index ec0a6680..a1f58d42 100644
--- a/src/components/note/extend.tsx
+++ b/src/components/note/extend.tsx
@@ -60,7 +60,7 @@ export const NoteExtend = memo(function NoteExtend({ event }: { event: any }) {
         <UserLarge pubkey={event.pubkey} time={event.created_at} />
         <div className="mt-2">
           <div className="flex flex-col gap-2">
-            <div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1 prose-img:mt-2 prose-img:mb-0 prose-video:mt-1 prose-video:mb-0">
+            <div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
               {content}
             </div>
           </div>
diff --git a/src/components/note/parent.tsx b/src/components/note/parent.tsx
index b09780eb..db03405a 100644
--- a/src/components/note/parent.tsx
+++ b/src/components/note/parent.tsx
@@ -109,7 +109,7 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
           <UserExtend pubkey={event.pubkey} time={event.created_at} />
           <div className="-mt-5 pl-[52px]">
             <div className="flex flex-col gap-2">
-              <div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1 prose-img:mt-2 prose-img:mb-0 prose-video:mt-1 prose-video:mb-0">
+              <div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
                 {content}
               </div>
             </div>
diff --git a/src/components/note/repost.tsx b/src/components/note/repost.tsx
index 61fe6bae..f82c00d5 100644
--- a/src/components/note/repost.tsx
+++ b/src/components/note/repost.tsx
@@ -91,7 +91,7 @@ export const NoteRepost = memo(function NoteRepost({ id }: { id: string }) {
           <UserExtend pubkey={event.pubkey} time={event.created_at} />
           <div className="-mt-5 pl-[52px]">
             <div className="flex flex-col gap-2">
-              <div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1 prose-img:mt-2 prose-img:mb-0 prose-video:mt-1 prose-video:mb-0">
+              <div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
                 {content}
               </div>
             </div>