diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 7818d44b..0e3ac8f8 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 = ["clipboard-all", "notification-all", "shell-open", "system-tray", "window-start-dragging"] }
+tauri = { version = "1.2", features = ["app-all", "clipboard-all", "notification-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 96b62eb9..385fb53a 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -13,6 +13,11 @@
   "tauri": {
     "allowlist": {
       "all": false,
+      "app": {
+        "all": true,
+        "hide": false,
+        "show": false
+      },
       "shell": {
         "all": false,
         "open": true
diff --git a/src/components/appHeader/index.tsx b/src/components/appHeader/index.tsx
new file mode 100644
index 00000000..7655c8dd
--- /dev/null
+++ b/src/components/appHeader/index.tsx
@@ -0,0 +1,30 @@
+import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
+import { useRouter } from 'next/router';
+
+export default function AppHeader() {
+  const router = useRouter();
+
+  const goBack = () => {
+    router.back();
+  };
+
+  const goForward = () => {
+    window.history.forward();
+  };
+
+  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="px-2.5">
+        <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>
+    </div>
+  );
+}
diff --git a/src/layouts/withSidebar.tsx b/src/layouts/withSidebar.tsx
index 4e2b6ed7..2b7f7e66 100644
--- a/src/layouts/withSidebar.tsx
+++ b/src/layouts/withSidebar.tsx
@@ -1,3 +1,4 @@
+import AppHeader from '@components/appHeader';
 import AccountColumn from '@components/columns/account';
 import NavigatorColumn from '@components/columns/navigator';
 
@@ -6,12 +7,12 @@ export default function WithSidebarLayout({ children }: { children: React.ReactN
     <div className="flex h-screen w-full flex-col">
       <div
         data-tauri-drag-region
-        className="flex h-11 shrink-0 items-center border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
+        className="relative h-11 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
       >
-        <p className="w-full text-center">Header</p>
+        <AppHeader />
       </div>
       <div className="relative flex h-full w-full flex-1 flex-row">
-        <div className="relative w-[67px] shrink-0 border-r border-zinc-900">
+        <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>