diff --git a/app/api/auth.ts b/app/api/auth.ts
index 9a8348326..1005c5fff 100644
--- a/app/api/auth.ts
+++ b/app/api/auth.ts
@@ -1,6 +1,7 @@
 import { NextRequest } from "next/server";
 import { getServerSideConfig } from "../config/server";
 import md5 from "spark-md5";
+import { ACCESS_CODE_PREFIX } from "../constant";
 
 const serverConfig = getServerSideConfig();
 
@@ -17,10 +18,10 @@ function getIP(req: NextRequest) {
 
 function parseApiKey(bearToken: string) {
   const token = bearToken.trim().replaceAll("Bearer ", "").trim();
-  const isOpenAiKey = token.startsWith("sk-");
+  const isOpenAiKey = !token.startsWith(ACCESS_CODE_PREFIX);
 
   return {
-    accessCode: isOpenAiKey ? "" : token,
+    accessCode: isOpenAiKey ? "" : token.slice(ACCESS_CODE_PREFIX.length),
     apiKey: isOpenAiKey ? token : "",
   };
 }
diff --git a/app/api/config/route.ts b/app/api/config/route.ts
index 62b84c2ea..62c8d60fb 100644
--- a/app/api/config/route.ts
+++ b/app/api/config/route.ts
@@ -15,8 +15,11 @@ declare global {
   type DangerConfig = typeof DANGER_CONFIG;
 }
 
-export async function POST() {
+async function handle() {
   return NextResponse.json(DANGER_CONFIG);
 }
 
+export const GET = handle;
+export const POST = handle;
+
 export const runtime = "edge";
diff --git a/app/components/mask.tsx b/app/components/mask.tsx
index c980c48c6..106418e82 100644
--- a/app/components/mask.tsx
+++ b/app/components/mask.tsx
@@ -21,7 +21,7 @@ import { useNavigate } from "react-router-dom";
 
 import chatStyle from "./chat.module.scss";
 import { useEffect, useState } from "react";
-import { downloadAs } from "../utils";
+import { downloadAs, readFromFile } from "../utils";
 import { Updater } from "../api/openai/typing";
 import { ModelConfigList } from "./model-config";
 import { FileName, Path } from "../constant";
@@ -222,6 +222,21 @@ export function MaskPage() {
     downloadAs(JSON.stringify(masks), FileName.Masks);
   };
 
+  const importFromFile = () => {
+    readFromFile().then((content) => {
+      try {
+        const importMasks = JSON.parse(content);
+        if (Array.isArray(importMasks)) {
+          for (const mask of importMasks) {
+            if (mask.name) {
+              maskStore.create(mask);
+            }
+          }
+        }
+      } catch {}
+    });
+  };
+
   return (
     <ErrorBoundary>
       <div className={styles["mask-page"]}>
@@ -247,7 +262,7 @@ export function MaskPage() {
               <IconButton
                 icon={<UploadIcon />}
                 bordered
-                onClick={() => showToast(Locale.WIP)}
+                onClick={() => importFromFile()}
               />
             </div>
             <div className="window-action-button">
@@ -371,7 +386,10 @@ export function MaskPage() {
                 key="export"
                 bordered
                 onClick={() =>
-                  downloadAs(JSON.stringify(editingMask), "mask.json")
+                  downloadAs(
+                    JSON.stringify(editingMask),
+                    `${editingMask.name}.json`,
+                  )
                 }
               />,
               <IconButton
diff --git a/app/constant.ts b/app/constant.ts
index e0ec03d06..fed20cafa 100644
--- a/app/constant.ts
+++ b/app/constant.ts
@@ -36,3 +36,5 @@ export enum StoreKey {
 export const MAX_SIDEBAR_WIDTH = 500;
 export const MIN_SIDEBAR_WIDTH = 230;
 export const NARROW_SIDEBAR_WIDTH = 100;
+
+export const ACCESS_CODE_PREFIX = "ak-";
diff --git a/app/requests.ts b/app/requests.ts
index 6a1553943..4579c6ada 100644
--- a/app/requests.ts
+++ b/app/requests.ts
@@ -8,6 +8,7 @@ import {
   useChatStore,
 } from "./store";
 import { showToast } from "./components/ui-lib";
+import { ACCESS_CODE_PREFIX } from "./constant";
 
 const TIME_OUT_MS = 60000;
 
@@ -58,7 +59,9 @@ function getHeaders() {
     accessStore.enabledAccessControl() &&
     validString(accessStore.accessCode)
   ) {
-    headers.Authorization = makeBearer(accessStore.accessCode);
+    headers.Authorization = makeBearer(
+      ACCESS_CODE_PREFIX + accessStore.accessCode,
+    );
   }
 
   return headers;
diff --git a/app/store/mask.ts b/app/store/mask.ts
index b35e160c6..98bd47021 100644
--- a/app/store/mask.ts
+++ b/app/store/mask.ts
@@ -57,6 +57,7 @@ export const useMaskStore = create<MaskStore>()(
           ...createEmptyMask(),
           ...mask,
           id,
+          builtin: false,
         };
 
         set(() => ({ masks }));
diff --git a/app/utils.ts b/app/utils.ts
index 95bbed2cc..43ea796e5 100644
--- a/app/utils.ts
+++ b/app/utils.ts
@@ -42,6 +42,26 @@ export function downloadAs(text: string, filename: string) {
   document.body.removeChild(element);
 }
 
+export function readFromFile() {
+  return new Promise<string>((res, rej) => {
+    const fileInput = document.createElement("input");
+    fileInput.type = "file";
+    fileInput.accept = "application/json";
+
+    fileInput.onchange = (event: any) => {
+      const file = event.target.files[0];
+      const fileReader = new FileReader();
+      fileReader.onload = (e: any) => {
+        res(e.target.result);
+      };
+      fileReader.onerror = (e) => rej(e);
+      fileReader.readAsText(file);
+    };
+
+    fileInput.click();
+  });
+}
+
 export function isIOS() {
   const userAgent = navigator.userAgent.toLowerCase();
   return /iphone|ipad|ipod/.test(userAgent);
diff --git a/next.config.mjs b/next.config.mjs
index 2a96df23e..25770318b 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -16,7 +16,9 @@ const nextConfig = {
       });
     }
 
-    return ret;
+    return {
+      afterFiles: ret,
+    };
   },
   webpack(config) {
     config.module.rules.push({