diff --git a/app/src/config/AI.ts b/app/src/config/AI.ts
index 32da67e22..968ad6e89 100644
--- a/app/src/config/AI.ts
+++ b/app/src/config/AI.ts
@@ -3,46 +3,55 @@ import {fetchPost} from "../util/fetch";
 export const AI = {
     element: undefined as Element,
     genHTML: () => {
-        return `<label class="fn__flex b3-label">
-    <div class="fn__flex-1">
-        APIKey
-        <div class="b3-label__text">APIKeyAPIKeyAPIKey</div>
+        return `<div class="fn__flex-column" style="height: 100%">
+<div class="layout-tab-bar fn__flex">
+    <div data-type="openai" class="item item--full item--focus"><span class="fn__flex-1"></span><span class="item__text">OpenAI</span><span class="fn__flex-1"></span></div>
+</div>
+<div class="fn__flex-1">
+    <div data-type="openai">
+        <label class="fn__flex b3-label">
+            <div class="fn__flex-1">
+                APIKey
+                <div class="b3-label__text">APIKeyAPIKeyAPIKey</div>
+            </div>
+            <span class="fn__space"></span>
+            <input class="b3-text-field fn__flex-center" id="apiKey" value="${window.siyuan.config.ai.openAI.apiKey}"/>
+        </label>
+        <label class="fn__flex b3-label">
+            <div class="fn__flex-1">
+                APITimeout
+                <div class="b3-label__text">APITimeoutAPITimeoutAPITimeout</div>
+            </div>
+            <span class="fn__space"></span>
+            <input class="b3-text-field fn__flex-center" type="number" step="1" min="1" id="openFilesUseCurrentTab" value="${window.siyuan.config.ai.openAI}"/>
+        </label>
+        <label class="fn__flex b3-label">
+            <div class="fn__flex-1">
+                APIProxy
+                <div class="b3-label__text">APIProxyAPIProxyAPIProxy</div>
+            </div>
+            <span class="fn__space"></span>
+            <input class="b3-text-field fn__flex-center" id="apiProxy" value="${window.siyuan.config.ai.openAI.apiProxy}"/>
+        </label>
+        <label class="fn__flex b3-label">
+            <div class="fn__flex-1">
+                APIMaxTokens
+                <div class="b3-label__text">APIMaxTokensAPIMaxTokensAPIMaxTokens</div>
+            </div>
+            <span class="fn__space"></span>
+            <input class="b3-text-field fn__flex-center" type="number" step="1" min="0" id="apiMaxTokens" value="${window.siyuan.config.ai.openAI.apiMaxTokens}"/>
+        </label>
+        <label class="fn__flex b3-label">
+            <div class="fn__flex-1">
+                APIBaseURL
+                <div class="b3-label__text">APIBaseURLAPIBaseURLAPIBaseURL</div>
+            </div>
+            <span class="fn__space"></span>
+            <input class="b3-text-field fn__flex-center" id="apiBaseURL" value="${window.siyuan.config.ai.openAI.apiBaseURL}"/>
+        </label>
     </div>
-    <span class="fn__space"></span>
-    <input class="b3-text-field fn__flex-center" id="apiKey" value="${window.siyuan.config.ai.openAI.apiKey}"/>
-</label>
-<label class="fn__flex b3-label">
-    <div class="fn__flex-1">
-        APITimeout
-        <div class="b3-label__text">APITimeoutAPITimeoutAPITimeout</div>
-    </div>
-    <span class="fn__space"></span>
-    <input class="b3-text-field fn__flex-center" type="number" step="1" min="1" id="openFilesUseCurrentTab" value="${window.siyuan.config.ai.openAI}"/>
-</label>
-<label class="fn__flex b3-label">
-    <div class="fn__flex-1">
-        APIProxy
-        <div class="b3-label__text">APIProxyAPIProxyAPIProxy</div>
-    </div>
-    <span class="fn__space"></span>
-    <input class="b3-text-field fn__flex-center" id="apiProxy" value="${window.siyuan.config.ai.openAI.apiProxy}"/>
-</label>
-<label class="fn__flex b3-label">
-    <div class="fn__flex-1">
-        APIMaxTokens
-        <div class="b3-label__text">APIMaxTokensAPIMaxTokensAPIMaxTokens</div>
-    </div>
-    <span class="fn__space"></span>
-    <input class="b3-text-field fn__flex-center" type="number" step="1" min="0" id="apiMaxTokens" value="${window.siyuan.config.ai.openAI.apiMaxTokens}"/>
-</label>
-<label class="fn__flex b3-label">
-    <div class="fn__flex-1">
-        APIBaseURL
-        <div class="b3-label__text">APIBaseURLAPIBaseURLAPIBaseURL</div>
-    </div>
-    <span class="fn__space"></span>
-    <input class="b3-text-field fn__flex-center" id="apiBaseURL" value="${window.siyuan.config.ai.openAI.apiBaseURL}"/>
-</label>`;
+</div>
+</div>`;
     },
     bindEvent: () => {
         AI.element.querySelectorAll("input").forEach((item) => {
diff --git a/app/src/config/card.ts b/app/src/config/card.ts
index b7e063f06..416e8a052 100644
--- a/app/src/config/card.ts
+++ b/app/src/config/card.ts
@@ -1,3 +1,4 @@
+import {fetchPost} from "../util/fetch";
 
 export const card = {
     element: undefined as Element,
@@ -20,5 +21,18 @@ export const card = {
 </label>`;
     },
     bindEvent: () => {
+        card.element.querySelectorAll("input").forEach((item) => {
+            item.addEventListener("change", () => {
+                fetchPost("/api/setting/setFlashcard", {
+                        apiBaseURL: (card.element.querySelector("#apiBaseURL") as HTMLInputElement).checked,
+                        apiKey: (card.element.querySelector("#apiKey") as HTMLInputElement).value,
+                        apiMaxTokens: (card.element.querySelector("#apiMaxTokens") as HTMLInputElement).value,
+                        apiProxy: (card.element.querySelector("#apiProxy") as HTMLInputElement).checked,
+                        apiTimeout: (card.element.querySelector("#apiTimeout") as HTMLInputElement).checked,
+                }, response => {
+                    window.siyuan.config.ai = response.data;
+                });
+            });
+        });
     },
 };