diff --git a/src/layout/BootLayout.jsx b/src/layout/BootLayout.jsx
index 009a4c7..37c8ef9 100644
--- a/src/layout/BootLayout.jsx
+++ b/src/layout/BootLayout.jsx
@@ -1,3 +1,4 @@
+import NavigationSection from "@/navigation/NavigationSection";
 import { prop } from "ramda";
 import WindowMoveHandler from "../components/WindowMoveHandler/WindowMoveHandler";
 import classes from "./BootLayout.module.css";
@@ -6,7 +7,12 @@ export default function BootLayout(props) {
   return (
     <>
       <WindowMoveHandler />
-      <div class={prop("layout-container", classes)}>{props.children}</div>
+      <div class={prop("layout-container", classes)}>
+        <NavigationSection />
+        <section class={prop("content-container", classes)}>
+          {props.children}
+        </section>
+      </div>
     </>
   );
 }
diff --git a/src/layout/BootLayout.module.css b/src/layout/BootLayout.module.css
index 296292e..c41fb6d 100644
--- a/src/layout/BootLayout.module.css
+++ b/src/layout/BootLayout.module.css
@@ -1,7 +1,15 @@
-@import "../mixins.css";
+@import "@/mixins.css";
 
 .layout-container {
-  @include flex(row, flex-start, stretch);
+  @include flex(row, flex-start, stretch, --spacing-xs);
   @util size(100%, 100%);
-  @util padding(var(--spacing-s));
+  @util padding(var(--spacing-xs));
+  .content-container {
+    flex-grow: 1;
+    border-radius: var(--border-radius-s);
+    background-color: var(--palette-white-3);
+    @include dark-mode {
+      background-color: var(--palette-black-8);
+    }
+  }
 }
diff --git a/src/navigation/NavigationSection.jsx b/src/navigation/NavigationSection.jsx
new file mode 100644
index 0000000..2982a9e
--- /dev/null
+++ b/src/navigation/NavigationSection.jsx
@@ -0,0 +1,44 @@
+import ActivatableLink from "@/components/ActivatableLink/ActivatableLink";
+import Divider from "@/components/Divider/Divider";
+import {
+  IconDna2,
+  IconFileExport,
+  IconFileImport,
+  IconFolderOpen,
+  IconKeyboard,
+  IconListSearch,
+  IconTextPlus,
+} from "@tabler/icons-solidjs";
+import { prop } from "ramda";
+import classes from "./NavigationSection.module.css";
+
+export default function NavigationSection() {
+  return (
+    <aside class={prop("navigation-container", classes)}>
+      <ActivatableLink href="/" leftIcon={<IconTextPlus stroke="1.5" />}>
+        新建词库
+      </ActivatableLink>
+      <ActivatableLink href="/" leftIcon={<IconFolderOpen stroke="1.5" />}>
+        打开词库...
+      </ActivatableLink>
+      <Divider />
+      <p class={prop("library-name", classes)}>词库名称</p>
+      <ActivatableLink href="/" leftIcon={<IconListSearch strole="1.5" />}>
+        浏览词库
+      </ActivatableLink>
+      <ActivatableLink href="/" leftIcon={<IconFileImport stroke="1.5" />}>
+        导入已有词库
+      </ActivatableLink>
+      <ActivatableLink href="/" leftIcon={<IconDna2 stroke="1.5" />}>
+        解析段落
+      </ActivatableLink>
+      <ActivatableLink href="/" leftIcon={<IconFileExport stroke="1.5" />}>
+        导出词库
+      </ActivatableLink>
+      <Divider />
+      <ActivatableLink href="/" leftIcon={<IconKeyboard stroke="1.5" />}>
+        码表配置
+      </ActivatableLink>
+    </aside>
+  );
+}
diff --git a/src/navigation/NavigationSection.module.css b/src/navigation/NavigationSection.module.css
new file mode 100644
index 0000000..4523775
--- /dev/null
+++ b/src/navigation/NavigationSection.module.css
@@ -0,0 +1,12 @@
+@import "@/mixins.css";
+
+.navigation-container {
+  margin-top: var(--spacing-l);
+  @util padding(var(--spacing-s));
+  min-width: 240px;
+  @include flex(column, stretch, flex-start);
+  font-size: var(--font-size-s);
+  .library-name {
+    font-size: var(--font-size-xs);
+  }
+}