diff --git a/src/components/EditorCanvas/Canvas.jsx b/src/components/EditorCanvas/Canvas.jsx
index 2a675167..78433e1f 100644
--- a/src/components/EditorCanvas/Canvas.jsx
+++ b/src/components/EditorCanvas/Canvas.jsx
@@ -284,7 +284,7 @@ export default function Canvas() {
   };
 
   const didPan = () =>
-    !(transform.pan.x === panning.x && transform.pan.y === panning.y);
+    !(transform.pan.x === panning.panStart.x && transform.pan.y === panning.panStart.y);
 
   const getMovedElementDetails = () => {
     switch (dragging.element) {
@@ -345,7 +345,7 @@ export default function Canvas() {
         ...prev,
         {
           action: Action.PAN,
-          undo: { x: panning.x, y: panning.y },
+          undo: { x: panning.panStart.x, y: panning.panStart.y },
           redo: transform.pan,
           message: t("move_element", {
             coords: `(${transform?.pan.x}, ${transform?.pan.y})`,
diff --git a/src/components/EditorSidePanel/TablesTab/FieldDetails.jsx b/src/components/EditorSidePanel/TablesTab/FieldDetails.jsx
index f8445136..ef332f73 100644
--- a/src/components/EditorSidePanel/TablesTab/FieldDetails.jsx
+++ b/src/components/EditorSidePanel/TablesTab/FieldDetails.jsx
@@ -302,7 +302,7 @@ export default function FieldDetails({ data, tid, index }) {
       {databases[database].hasUnsignedTypes &&
         dbToTypes[database][data.type].signed && (
           <div className="flex justify-between items-center my-3">
-            <div className="font-medium">{t("Unsigned")}</div>
+            <div className="font-medium">{t("unsigned")}</div>
             <Checkbox
               value="unsigned"
               checked={data.unsigned}
diff --git a/src/components/Modal/SelectDbModal.jsx b/src/components/Modal/SelectDbModal.jsx
new file mode 100644
index 00000000..6d6b1610
--- /dev/null
+++ b/src/components/Modal/SelectDbModal.jsx
@@ -0,0 +1,56 @@
+import { memo, useState } from "react";
+import { Modal } from "@douyinfe/semi-ui";
+import { useTranslation } from "react-i18next";
+import { useSettings } from "../../hooks";
+import { databases } from "../../data/databases";
+
+export default memo(function SelectDbModal(props) {
+  const { showSelectDbModal, onOk } = props;
+  const { t } = useTranslation();
+  const { settings } = useSettings();
+  const [selectedDb, setSelectedDb] = useState("");
+  if (!showSelectDbModal) return null;
+  return (
+    <Modal
+      centered
+      size="medium"
+      closable={false}
+      hasCancel={false}
+      title={t("pick_db")}
+      okText={t("confirm")}
+      visible={showSelectDbModal}
+      onOk={() => {
+        setSelectedDb(selectedDb);
+        onOk(selectedDb);
+      }}
+      okButtonProps={{ disabled: selectedDb === "" }}
+    >
+      <div className="grid grid-cols-3 gap-4 place-content-center">
+        {Object.values(databases).map((x) => (
+          <div
+            key={x.name}
+            onClick={() => setSelectedDb(x.label)}
+            className={`space-y-3 py-3 px-4 rounded-md border-2 select-none ${
+              settings.mode === "dark"
+                ? "bg-zinc-700 hover:bg-zinc-600"
+                : "bg-zinc-100 hover:bg-zinc-200"
+            } ${selectedDb === x.label ? "border-zinc-400" : "border-transparent"}`}
+          >
+            <div className="font-semibold">{x.name}</div>
+            {x.image && (
+              <img
+                src={x.image}
+                className="h-10"
+                style={{
+                  filter:
+                    "opacity(0.4) drop-shadow(0 0 0 white) drop-shadow(0 0 0 white)",
+                }}
+              />
+            )}
+            <div className="text-xs">{x.description}</div>
+          </div>
+        ))}
+      </div>
+    </Modal>
+  );
+});
diff --git a/src/components/Workspace.jsx b/src/components/Workspace.jsx
index 1797851b..bc4711f8 100644
--- a/src/components/Workspace.jsx
+++ b/src/components/Workspace.jsx
@@ -19,7 +19,7 @@ import {
   useEnums,
 } from "../hooks";
 import FloatingControls from "./FloatingControls";
-import { Modal } from "@douyinfe/semi-ui";
+import SelectDbModal from "./Modal/SelectDbModal";
 import { useTranslation } from "react-i18next";
 import { databases } from "../data/databases";
 import { isRtl } from "../i18n/utils/rtl";
@@ -37,7 +37,6 @@ export default function WorkSpace() {
   const [width, setWidth] = useState(340);
   const [lastSaved, setLastSaved] = useState("");
   const [showSelectDbModal, setShowSelectDbModal] = useState(false);
-  const [selectedDb, setSelectedDb] = useState("");
   const { layout } = useLayout();
   const { settings } = useSettings();
   const { types, setTypes } = useTypes();
@@ -56,7 +55,7 @@ export default function WorkSpace() {
     setDatabase,
   } = useDiagram();
   const { undoStack, redoStack, setUndoStack, setRedoStack } = useUndoRedo();
-  const { t, i18n } = useTranslation();
+  const { i18n } = useTranslation();
   let [searchParams, setSearchParams] = useSearchParams();
   const handleResize = (e) => {
     if (!resize) return;
@@ -161,10 +160,10 @@ export default function WorkSpace() {
     enums,
     gistId,
     loadedFromGistId,
-    saveState
+    saveState,
   ]);
-
   const load = useCallback(async () => {
+    let initDatabase = database;
     const loadLatestDiagram = async () => {
       await db.diagrams
         .orderBy("lastModified")
@@ -195,24 +194,20 @@ export default function WorkSpace() {
             window.name = `d ${d.id}`;
           } else {
             window.name = "";
-            if (selectedDb === "") setShowSelectDbModal(true);
+            if (initDatabase === "") setShowSelectDbModal(true);
           }
         })
         .catch((error) => {
           console.log(error);
         });
     };
-
     const loadDiagram = async (id) => {
       await db.diagrams
         .get(id)
         .then((diagram) => {
           if (diagram) {
-            if (diagram.database) {
-              setDatabase(diagram.database);
-            } else {
-              setDatabase(DB.GENERIC);
-            }
+            initDatabase = diagram.database || DB.GENERIC;
+            setDatabase(initDatabase);
             setId(diagram.id);
             setGistId(diagram.gistId);
             setLoadedFromGistId(diagram.loadedFromGistId);
@@ -228,10 +223,10 @@ export default function WorkSpace() {
             });
             setUndoStack([]);
             setRedoStack([]);
-            if (databases[database].hasTypes) {
+            if (databases[initDatabase].hasTypes) {
               setTypes(diagram.types ?? []);
             }
-            if (databases[database].hasEnums) {
+            if (databases[initDatabase].hasEnums) {
               setEnums(diagram.enums ?? []);
             }
             window.name = `d ${diagram.id}`;
@@ -267,19 +262,19 @@ export default function WorkSpace() {
             });
             setUndoStack([]);
             setRedoStack([]);
-            if (databases[database].hasTypes) {
+            if (databases[initDatabase].hasTypes) {
               setTypes(diagram.types ?? []);
             }
-            if (databases[database].hasEnums) {
+            if (databases[initDatabase].hasEnums) {
               setEnums(diagram.enums ?? []);
             }
           } else {
-            if (selectedDb === "") setShowSelectDbModal(true);
+            if (initDatabase === "") setShowSelectDbModal(true);
           }
         })
         .catch((error) => {
           console.log(error);
-          if (selectedDb === "") setShowSelectDbModal(true);
+          if (initDatabase === "") setShowSelectDbModal(true);
         });
     };
 
@@ -365,7 +360,6 @@ export default function WorkSpace() {
     setDatabase,
     database,
     setEnums,
-    selectedDb,
     setSaveState,
     searchParams,
   ]);
@@ -409,6 +403,14 @@ export default function WorkSpace() {
     load();
   }, [load]);
 
+  const handleSelectedDb = useCallback(
+    (selectedDb) => {
+      if (selectedDb === "") return;
+      setDatabase(selectedDb);
+      setShowSelectDbModal(false);
+    },
+    [setDatabase, setShowSelectDbModal],
+  );
   return (
     <div className="h-full flex flex-col overflow-hidden theme">
       <IdContext.Provider value={{ gistId, setGistId }}>
@@ -447,48 +449,10 @@ export default function WorkSpace() {
           )}
         </div>
       </div>
-      <Modal
-        centered
-        size="medium"
-        closable={false}
-        hasCancel={false}
-        title={t("pick_db")}
-        okText={t("confirm")}
-        visible={showSelectDbModal}
-        onOk={() => {
-          if (selectedDb === "") return;
-          setDatabase(selectedDb);
-          setShowSelectDbModal(false);
-        }}
-        okButtonProps={{ disabled: selectedDb === "" }}
-      >
-        <div className="grid grid-cols-3 gap-4 place-content-center">
-          {Object.values(databases).map((x) => (
-            <div
-              key={x.name}
-              onClick={() => setSelectedDb(x.label)}
-              className={`space-y-3 py-3 px-4 rounded-md border-2 select-none ${
-                settings.mode === "dark"
-                  ? "bg-zinc-700 hover:bg-zinc-600"
-                  : "bg-zinc-100 hover:bg-zinc-200"
-              } ${selectedDb === x.label ? "border-zinc-400" : "border-transparent"}`}
-            >
-              <div className="font-semibold">{x.name}</div>
-              {x.image && (
-                <img
-                  src={x.image}
-                  className="h-10"
-                  style={{
-                    filter:
-                      "opacity(0.4) drop-shadow(0 0 0 white) drop-shadow(0 0 0 white)",
-                  }}
-                />
-              )}
-              <div className="text-xs">{x.description}</div>
-            </div>
-          ))}
-        </div>
-      </Modal>
+      <SelectDbModal
+        showSelectDbModal={showSelectDbModal}
+        onOk={handleSelectedDb}
+      />
     </div>
   );
 }
diff --git a/src/context/DiagramContext.jsx b/src/context/DiagramContext.jsx
index ffa49970..d37702c5 100644
--- a/src/context/DiagramContext.jsx
+++ b/src/context/DiagramContext.jsx
@@ -8,7 +8,7 @@ export const DiagramContext = createContext(null);
 
 export default function DiagramContextProvider({ children }) {
   const { t } = useTranslation();
-  const [database, setDatabase] = useState(DB.GENERIC);
+  const [database, setDatabase] = useState("");
   const [tables, setTables] = useState([]);
   const [relationships, setRelationships] = useState([]);
   const { transform } = useTransform();
diff --git a/src/i18n/locales/zh-tw.js b/src/i18n/locales/zh-tw.js
index f9cae242..259c1d10 100644
--- a/src/i18n/locales/zh-tw.js
+++ b/src/i18n/locales/zh-tw.js
@@ -235,6 +235,7 @@ const zh_tw = {
     declare_array: "宣告陣列",
     empty_index_name: "在表格 '{{tableName}}' 中宣告了一個沒有名稱的索引",
     didnt_find_diagram: "糟糕！找不到圖表。",
+    unsigned: "無符號",
   },
 };
 
diff --git a/src/i18n/locales/zh.js b/src/i18n/locales/zh.js
index 9c8fb810..4323585c 100644
--- a/src/i18n/locales/zh.js
+++ b/src/i18n/locales/zh.js
@@ -207,6 +207,10 @@ const zh = {
     edit_relationship: "{{extra}} 编辑关系 {{refName}}",
     delete_relationship: "删除关系 {{refName}}",
     not_found: "未找到",
+    pick_db: "选择数据库",
+    generic: "通用的",
+    generic_description: "通用的图表可以导出为任何SQL风格，但支持的数据类型较少。",
+    unsigned: "无符号",
   },
 };