diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..3802657
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1 @@
+*/*/node_modules
diff --git a/.gitignore b/.gitignore
index 99d0edd..32636c6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,9 +4,6 @@
 # temp folder
 tmp
 
-# Frontend asset
-web/dist
-
 # build folder
 build
 
diff --git a/Dockerfile b/Dockerfile
index b5d0a9a..53461e1 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -2,11 +2,11 @@
 FROM node:18.12.1-alpine3.16 AS frontend
 WORKDIR /frontend-build
 
-COPY ./frontend/web/package.json ./frontend/web/pnpm-lock.yaml ./
+COPY ./frontend/ .
 
-RUN corepack enable && pnpm i --frozen-lockfile
+WORKDIR /frontend-build/web
 
-COPY ./frontend/web/ .
+RUN corepack enable && pnpm i --frozen-lockfile 
 
 RUN pnpm build
 
@@ -15,7 +15,7 @@ FROM golang:1.19.3-alpine3.16 AS backend
 WORKDIR /backend-build
 
 COPY . .
-COPY --from=frontend /frontend-build/dist ./server/dist
+COPY --from=frontend /frontend-build/web/dist ./server/dist
 
 RUN CGO_ENABLED=0 go build -o slash ./cmd/slash/main.go
 
diff --git a/frontend/extension/src/background.ts b/frontend/extension/src/background.ts
index 405c059..94600a4 100644
--- a/frontend/extension/src/background.ts
+++ b/frontend/extension/src/background.ts
@@ -1,4 +1,4 @@
-import type { Shortcut } from "../../types/proto/api/v2/shortcut_service_pb";
+import type { Shortcut } from "@pbtypes/proto/api/v2/shortcut_service_pb";
 import { Storage } from "@plasmohq/storage";
 
 const storage = new Storage();
diff --git a/frontend/extension/src/components/CreateShortcutsButton.tsx b/frontend/extension/src/components/CreateShortcutsButton.tsx
index 1f2f4a1..9415489 100644
--- a/frontend/extension/src/components/CreateShortcutsButton.tsx
+++ b/frontend/extension/src/components/CreateShortcutsButton.tsx
@@ -1,9 +1,9 @@
 import { Button, IconButton, Input, Modal, ModalDialog } from "@mui/joy";
+import { CreateShortcutResponse, OpenGraphMetadata, Visibility } from "@pbtypes/proto/api/v2/shortcut_service_pb";
 import { useStorage } from "@plasmohq/storage/hook";
 import axios from "axios";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { CreateShortcutResponse, OpenGraphMetadata, Visibility } from "../../../types/proto/api/v2/shortcut_service_pb";
 import Icon from "./Icon";
 
 const generateTempName = (length = 6) => {
diff --git a/frontend/extension/src/components/PullShortcutsButton.tsx b/frontend/extension/src/components/PullShortcutsButton.tsx
index f121bb2..8d5df7f 100644
--- a/frontend/extension/src/components/PullShortcutsButton.tsx
+++ b/frontend/extension/src/components/PullShortcutsButton.tsx
@@ -1,9 +1,9 @@
 import { IconButton } from "@mui/joy";
+import { ListShortcutsResponse } from "@pbtypes/proto/api/v2/shortcut_service_pb";
 import { useStorage } from "@plasmohq/storage/hook";
 import axios from "axios";
 import { useEffect } from "react";
 import { toast } from "react-hot-toast";
-import { ListShortcutsResponse } from "../../../types/proto/api/v2/shortcut_service_pb";
 import Icon from "./Icon";
 
 const PullShortcutsButton = () => {
diff --git a/frontend/extension/src/components/ShortcutView.tsx b/frontend/extension/src/components/ShortcutView.tsx
index 15579a3..dfdd383 100644
--- a/frontend/extension/src/components/ShortcutView.tsx
+++ b/frontend/extension/src/components/ShortcutView.tsx
@@ -1,4 +1,4 @@
-import type { Shortcut } from "../../../types/proto/api/v2/shortcut_service_pb";
+import type { Shortcut } from "@pbtypes/proto/api/v2/shortcut_service_pb";
 import { useStorage } from "@plasmohq/storage/hook";
 import classNames from "classnames";
 import { useEffect, useState } from "react";
diff --git a/frontend/extension/src/components/ShortcutsContainer.tsx b/frontend/extension/src/components/ShortcutsContainer.tsx
index b911789..25ad0b2 100644
--- a/frontend/extension/src/components/ShortcutsContainer.tsx
+++ b/frontend/extension/src/components/ShortcutsContainer.tsx
@@ -1,4 +1,4 @@
-import type { Shortcut } from "../../../types/proto/api/v2/shortcut_service_pb";
+import type { Shortcut } from "@pbtypes/proto/api/v2/shortcut_service_pb";
 import { useStorage } from "@plasmohq/storage/hook";
 import classNames from "classnames";
 import ShortcutView from "./ShortcutView";
diff --git a/frontend/extension/src/options.tsx b/frontend/extension/src/options.tsx
index 7e8e220..432b37d 100644
--- a/frontend/extension/src/options.tsx
+++ b/frontend/extension/src/options.tsx
@@ -1,5 +1,5 @@
-import type { Shortcut } from "../../types/proto/api/v2/shortcut_service_pb";
 import { Button, Divider, Input } from "@mui/joy";
+import type { Shortcut } from "@pbtypes/proto/api/v2/shortcut_service_pb";
 import { useStorage } from "@plasmohq/storage/hook";
 import { useEffect, useState } from "react";
 import { Toaster, toast } from "react-hot-toast";
diff --git a/frontend/extension/src/popup.tsx b/frontend/extension/src/popup.tsx
index 9dc36c3..2649c43 100644
--- a/frontend/extension/src/popup.tsx
+++ b/frontend/extension/src/popup.tsx
@@ -1,5 +1,5 @@
-import type { Shortcut } from "../../types/proto/api/v2/shortcut_service_pb";
 import { Button, Divider, IconButton } from "@mui/joy";
+import type { Shortcut } from "@pbtypes/proto/api/v2/shortcut_service_pb";
 import { useStorage } from "@plasmohq/storage/hook";
 import { Toaster } from "react-hot-toast";
 import CreateShortcutsButton from "@/components/CreateShortcutsButton";
diff --git a/frontend/extension/tsconfig.json b/frontend/extension/tsconfig.json
index a73e1a2..ffccc6b 100644
--- a/frontend/extension/tsconfig.json
+++ b/frontend/extension/tsconfig.json
@@ -6,12 +6,16 @@
   "include": [
     ".plasmo/index.d.ts",
     "./**/*.ts",
-    "./**/*.tsx"
+    "./**/*.tsx",
+    "../types"
   ],
   "compilerOptions": {
     "paths": {
       "@/*": [
         "./src/*"
+      ],
+      "@pbtypes/*": [
+        "../types/*"
       ]
     },
     "baseUrl": "."
diff --git a/frontend/web/src/components/setting/AccessTokenSection.tsx b/frontend/web/src/components/setting/AccessTokenSection.tsx
index 0f8e3eb..28fc54d 100644
--- a/frontend/web/src/components/setting/AccessTokenSection.tsx
+++ b/frontend/web/src/components/setting/AccessTokenSection.tsx
@@ -1,9 +1,9 @@
 import { Button, IconButton } from "@mui/joy";
+import { ListUserAccessTokensResponse, UserAccessToken } from "@pbtypes/proto/api/v2/user_service_pb";
 import axios from "axios";
 import copy from "copy-to-clipboard";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { ListUserAccessTokensResponse, UserAccessToken } from "../../../../types/proto/api/v2/user_service_pb";
 import useUserStore from "../../stores/v1/user";
 import { showCommonDialog } from "../Alert";
 import CreateAccessTokenDialog from "../CreateAccessTokenDialog";
diff --git a/frontend/web/tsconfig.json b/frontend/web/tsconfig.json
index d1ae598..acd97ec 100644
--- a/frontend/web/tsconfig.json
+++ b/frontend/web/tsconfig.json
@@ -14,7 +14,16 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@pbtypes/*": [
+        "../types/*"
+      ]
+    },
+    "baseUrl": "."
   },
-  "include": ["./src"]
+  "include": ["./src", "../types"]
 }
diff --git a/scripts/.air.toml b/scripts/.air.toml
index c39fcc3..79fc35d 100644
--- a/scripts/.air.toml
+++ b/scripts/.air.toml
@@ -5,7 +5,7 @@ tmp_dir = ".air"
   bin = "./.air/slash --mode dev"
   cmd = "go build -o ./.air/slash ./cmd/slash/main.go"
   delay = 1000
-  exclude_dir = [".air", "web", "extension", "frontend", "build"]
+  exclude_dir = [".air", "frontend", "build"]
   exclude_file = []
   exclude_regex = []
   exclude_unchanged = false