diff --git a/components.d.ts b/components.d.ts
index 6cb1608..c26a0a8 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -45,6 +45,7 @@ declare module 'vue' {
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
     NTag: typeof import('naive-ui')['NTag']
+    NTooltip: typeof import('naive-ui')['NTooltip']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterMain: typeof import('./src/components/RouterMain.vue')['default']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/package-lock.json b/package-lock.json
index 490f4a2..3650996 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7869,7 +7869,7 @@
       "version": "5.5.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.2.tgz",
       "integrity": "sha512-NcRtPEOsPFFWjobJEtfihkLCZCXZt/os3zf8nTxjVH3RvTSxjrCamJpbExGvYOF+tFHc3pA65qpdwPbzjohhew==",
-      "devOptional": true,
+      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index fd8815d..954f7b7 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -2065,6 +2065,17 @@ dependencies = [
  "objc_exception",
 ]
 
+[[package]]
+name = "objc-foundation"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1add1b659e36c9607c7aab864a76c7a4c2760cd0cd2e120f3fb8b952c7e22bf9"
+dependencies = [
+ "block",
+ "objc",
+ "objc_id",
+]
+
 [[package]]
 name = "objc_exception"
 version = "0.1.2"
@@ -2832,6 +2843,30 @@ dependencies = [
  "thiserror",
 ]
 
+[[package]]
+name = "rfd"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0149778bd99b6959285b0933288206090c50e2327f47a9c463bfdbf45c8823ea"
+dependencies = [
+ "block",
+ "dispatch",
+ "glib-sys",
+ "gobject-sys",
+ "gtk-sys",
+ "js-sys",
+ "lazy_static",
+ "log",
+ "objc",
+ "objc-foundation",
+ "objc_id",
+ "raw-window-handle",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+ "windows 0.37.0",
+]
+
 [[package]]
 name = "ring"
 version = "0.17.8"
@@ -3546,6 +3581,7 @@ dependencies = [
  "raw-window-handle",
  "regex",
  "reqwest 0.11.27",
+ "rfd",
  "semver",
  "serde",
  "serde_json",
@@ -4465,6 +4501,19 @@ version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
 
+[[package]]
+name = "windows"
+version = "0.37.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "57b543186b344cc61c85b5aab0d2e3adf4e0f99bc076eff9aa5927bcc0b8a647"
+dependencies = [
+ "windows_aarch64_msvc 0.37.0",
+ "windows_i686_gnu 0.37.0",
+ "windows_i686_msvc 0.37.0",
+ "windows_x86_64_gnu 0.37.0",
+ "windows_x86_64_msvc 0.37.0",
+]
+
 [[package]]
 name = "windows"
 version = "0.39.0"
@@ -4630,6 +4679,12 @@ version = "0.52.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7088eed71e8b8dda258ecc8bac5fb1153c5cffaf2578fc8ff5d61e23578d3263"
 
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.37.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2623277cb2d1c216ba3b578c0f3cf9cdebeddb6e66b1b218bb33596ea7769c3a"
+
 [[package]]
 name = "windows_aarch64_msvc"
 version = "0.39.0"
@@ -4654,6 +4709,12 @@ version = "0.52.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9985fd1504e250c615ca5f281c3f7a6da76213ebd5ccc9561496568a2752afb6"
 
+[[package]]
+name = "windows_i686_gnu"
+version = "0.37.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d3925fd0b0b804730d44d4b6278c50f9699703ec49bcd628020f46f4ba07d9e1"
+
 [[package]]
 name = "windows_i686_gnu"
 version = "0.39.0"
@@ -4684,6 +4745,12 @@ version = "0.52.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "87f4261229030a858f36b459e748ae97545d6f1ec60e5e0d6a3d32e0dc232ee9"
 
+[[package]]
+name = "windows_i686_msvc"
+version = "0.37.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ce907ac74fe331b524c1298683efbf598bb031bc84d5e274db2083696d07c57c"
+
 [[package]]
 name = "windows_i686_msvc"
 version = "0.39.0"
@@ -4708,6 +4775,12 @@ version = "0.52.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "db3c2bf3d13d5b658be73463284eaf12830ac9a26a90c717b7f771dfe97487bf"
 
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.37.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2babfba0828f2e6b32457d5341427dcbb577ceef556273229959ac23a10af33d"
+
 [[package]]
 name = "windows_x86_64_gnu"
 version = "0.39.0"
@@ -4750,6 +4823,12 @@ version = "0.52.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "852298e482cd67c356ddd9570386e2862b5673c85bd5f88df9ab6802b334c596"
 
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.37.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f4dd6dc7df2d84cf7b33822ed5b86318fb1781948e9663bacd047fc9dd52259d"
+
 [[package]]
 name = "windows_x86_64_msvc"
 version = "0.39.0"
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 43d9a64..f1cdd32 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -11,7 +11,7 @@ edition = "2021"
 tauri-build = { version = "1.5", features = [] }
 
 [dependencies]
-tauri = { version = "1.7", features = [ "fs-create-dir", "global-shortcut-all", "http-all", "fs-exists", "fs-read-file", "fs-write-file", "shell-open"] }
+tauri = { version = "1.7", features = [ "dialog-open", "fs-create-dir", "global-shortcut-all", "http-all", "fs-exists", "fs-read-file", "fs-write-file", "shell-open"] }
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1"
 tauri-plugin-store = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index bde605f..4b50fe8 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -37,6 +37,9 @@
       },
       "globalShortcut": {
         "all": true
+      },
+      "dialog": {
+        "open": true
       }
     },
     "windows": [
diff --git a/src/layout/components/the-aside.vue b/src/layout/components/the-aside.vue
index ce17c13..5e965ab 100644
--- a/src/layout/components/the-aside.vue
+++ b/src/layout/components/the-aside.vue
@@ -78,7 +78,7 @@ const mainNavList = ref([
   },
   {
     id: 'file',
-    path: '/',
+    path: '/file',
     name: 'file',
     icon: markRaw(Folders),
     isLink: false,
diff --git a/src/router/index.ts b/src/router/index.ts
index da2ff6b..0f680e9 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -57,6 +57,14 @@ const router = createRouter({
           },
           component: () => import('../views/setting/index.vue'),
         },
+        {
+          name: 'File',
+          path: '/file',
+          meta: {
+            keepAlive: false,
+          },
+          component: () => import('../views/file/index.vue'),
+        },
       ],
     },
   ],
diff --git a/src/views/file/components/tool-bar.vue b/src/views/file/components/tool-bar.vue
new file mode 100644
index 0000000..c55913a
--- /dev/null
+++ b/src/views/file/components/tool-bar.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="tool-bar-container">
+    <n-tooltip trigger="hover" v-for="toolBar in toolBarList">
+      <template #trigger>
+        <n-icon size="26" class="tool-bar-item" @click="handleToolBarAction(toolBar.id)">
+          <component :is="toolBar.icon" />
+        </n-icon>
+      </template>
+      {{ toolBar.title }}
+    </n-tooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { open } from '@tauri-apps/api/dialog';
+import { DocumentAdd, FolderAdd, FolderOpen } from '@vicons/carbon';
+
+enum ToolBarAction {
+  ADD_DOCUMENT = 'ADD_DOCUMENT',
+  ADD_FOLDER = 'ADD_FOLDER',
+  OPEN_FOLDER = 'OPEN_FOLDER',
+}
+
+const toolBarList = [
+  {
+    id: ToolBarAction.ADD_DOCUMENT,
+    icon: DocumentAdd,
+    title: 'Add Document',
+  },
+  {
+    id: ToolBarAction.ADD_FOLDER,
+    icon: FolderAdd,
+    title: 'Add Folder',
+  },
+  {
+    id: ToolBarAction.OPEN_FOLDER,
+    icon: FolderOpen,
+    title: 'Open Folder',
+  },
+];
+
+const handleToolBarAction = async (id: ToolBarAction) => {
+  if (id === ToolBarAction.ADD_DOCUMENT) {
+  } else if (id === ToolBarAction.ADD_FOLDER) {
+  } else if (id === ToolBarAction.OPEN_FOLDER) {
+    try {
+      const selectedFiles = await open({
+        multiple: false,
+        directory: true,
+      });
+      console.log('Selected files:', selectedFiles);
+    } catch (error) {
+      console.error('Failed to open file dialog:', error);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.tool-bar-container {
+  height: var(--tool-bar-height);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--border-color);
+
+  .tool-bar-item {
+    margin: 0 5px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+
+    .n-icon {
+      opacity: 0.4;
+      transition: 0.3s;
+    }
+
+    &:hover {
+      .n-icon {
+        opacity: 0.9;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/file/index.vue b/src/views/file/index.vue
new file mode 100644
index 0000000..5641fcf
--- /dev/null
+++ b/src/views/file/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <tool-bar />
+  <div class="file-container">file</div>
+</template>
+
+<script setup lang="ts">
+import ToolBar from './components/tool-bar.vue';
+</script>
+
+<style lang="scss" scoped>
+.file-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>