diff --git a/packages/verkfi-tool-demo/icon.jpg b/packages/verkfi-tool-demo/icon.jpg
new file mode 100644
index 00000000..01bb0695
Binary files /dev/null and b/packages/verkfi-tool-demo/icon.jpg differ
diff --git a/packages/verkfi-tool-demo/package.json b/packages/verkfi-tool-demo/package.json
index c0c69467..3a2e6f6e 100644
--- a/packages/verkfi-tool-demo/package.json
+++ b/packages/verkfi-tool-demo/package.json
@@ -2,7 +2,7 @@
     "name": "laz_durno_kkehet",
     "to": "demovxt",
     "description": "A demo",
-    "icon": "fav.png",
+    "icon": "icon.jpg",
     "scripts": {
         "build": "rm -f demo.vxt && asar pack ./ demo.vxt"
     },
diff --git a/src/app/WindowContainer.tsx b/src/app/WindowContainer.tsx
index 4a90dba1..4888f3cc 100644
--- a/src/app/WindowContainer.tsx
+++ b/src/app/WindowContainer.tsx
@@ -15,7 +15,9 @@ import {
 } from "react";
 export default function WindowContainer() {
     const colorContext = useContext(colorMode),
-        windows = useContext(windowsContext).windows,
+        {
+            windows
+        } = useContext(windowsContext),
         color = colorContext.value,
         theme = useTheme();
     return (
diff --git a/src/app/components/dialog/PureDialog.tsx b/src/app/components/dialog/PureDialog.tsx
index dba3f99d..3a622ef3 100644
--- a/src/app/components/dialog/PureDialog.tsx
+++ b/src/app/components/dialog/PureDialog.tsx
@@ -1,9 +1,10 @@
 import {
-    DialogContent
+    DialogActions,
+    DialogContent,
+    DialogProps
 } from "@mui/material";
 import {
-    ReactNode,
-    useState
+    ReactNode
 } from "react";
 import BootstrapDialog from "./BootstrapDialog";
 import BootstrapDialogTitle from "./BootstrapDialogTitle";
@@ -17,21 +18,26 @@ export default function PureDialog(props: {
      * 内容
      */
     children: ReactNode;
+    action?: ReactNode;
     /**
      * 关闭后的回调
      */
     onClose: Function;
+    add?: Omit<DialogProps, "open">;
     open: boolean;
 }) {
     const handleClose = () => {
         props.onClose();
     };
     return (
-        <BootstrapDialog onClose={handleClose} open={props.open} TransitionComponent={Transition}>
+        <BootstrapDialog {...props.add} onClose={handleClose} open={props.open} TransitionComponent={Transition}>
             <BootstrapDialogTitle onClose={handleClose}>{props.title}</BootstrapDialogTitle>
             <DialogContent dividers>
                 {props.children}
             </DialogContent>
+            <DialogActions>
+                {props.action}
+            </DialogActions>
         </BootstrapDialog>
     );
 }
\ No newline at end of file
diff --git a/src/app/declare.ts b/src/app/declare.ts
index 2c85a1f3..7ea15676 100644
--- a/src/app/declare.ts
+++ b/src/app/declare.ts
@@ -56,7 +56,7 @@ export type setState<T> = Dispatch<SetStateAction<T>>;
 
 export namespace Hex {
     type HexDigit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | 'a' | 'b' | 'c' | 'd' | 'e' | 'f';
-    type HexColor<T extends string> =
+    export type HexColor<T extends string> =
         T extends `${HexDigit}${HexDigit}${HexDigit}${infer Rest1}`
         ? (Rest1 extends `${HexDigit}${HexDigit}${HexDigit}`
             ? T  // six-digit hex color
diff --git a/src/app/index/convertExtensionTools.tsx b/src/app/index/convertExtensionTools.tsx
index 898d1c46..95604ace 100644
--- a/src/app/index/convertExtensionTools.tsx
+++ b/src/app/index/convertExtensionTools.tsx
@@ -13,7 +13,10 @@ const convertExtensionTools: (extensionTools: single[]) => tool[] = extensionToo
     name: single.name,
     to: `/tools/extension?tool=${single.to}` as Lowercase<string>,
     desc: single.desc,
-    icon: () => <Image src={`/extensionfiles/${single.to}/${single.icon}`} alt={single.name} height={24} width={24} />,
+    /** 
+     * 这里的图片是直接从indexedDB加载来的，不需要且不能使用next/image的优化
+     */
+    icon: () => <img src={`/extensionfiles/${single.to}/${single.icon}`} alt={single.name} height={24} width={24} />,
     color: single.color as [Hex.Hex, Hex.Hex],
     isGoto: true
 }));
diff --git a/src/app/layout/layoutClient.tsx b/src/app/layout/layoutClient.tsx
index 1123c469..8c2934e7 100644
--- a/src/app/layout/layoutClient.tsx
+++ b/src/app/layout/layoutClient.tsx
@@ -136,55 +136,55 @@ export function WindowsProvider(props: {
         </windows.Provider>
     );
 }
+const defaultPalette = {
+    // 来自theme.tsx中palette的快照
+    "primary": {
+        "50": "#e3f2fd",
+        "100": "#bbdefb",
+        "200": "#90caf9",
+        "300": "#64b5f6",
+        "400": "#42a5f5",
+        "500": "#2196f3",
+        "600": "#1e88e5",
+        "700": "#1976d2",
+        "800": "#1565c0",
+        "900": "#0d47a1",
+        "A100": "#82b1ff",
+        "A200": "#448aff",
+        "A400": "#2979ff",
+        "A700": "#2962ff",
+        "main": "#2196f3"
+    },
+    "secondary": {
+        "50": "#fce4ec",
+        "100": "#f8bbd0",
+        "200": "#f48fb1",
+        "300": "#f06292",
+        "400": "#ec407a",
+        "500": "#e91e63",
+        "600": "#d81b60",
+        "700": "#c2185b",
+        "800": "#ad1457",
+        "900": "#880e4f",
+        "A100": "#ff80ab",
+        "A200": "#ff4081",
+        "A400": "#f50057",
+        "A700": "#c51162",
+        "main": "#f50057"
+    }
+};
 export default function ModifiedApp(props: {
     children: ReactNode;
 }) {
     const [mode, setMode] = useStoragedState<PaletteMode | "system">("darkmode", "暗色模式", "system"),
-        [palette, setPalette] = useStoragedState<string>("palette", "调色板", JSON.stringify({
-            // 来自theme.tsx中palette的快照
-            "primary": {
-                "50": "#e3f2fd",
-                "100": "#bbdefb",
-                "200": "#90caf9",
-                "300": "#64b5f6",
-                "400": "#42a5f5",
-                "500": "#2196f3",
-                "600": "#1e88e5",
-                "700": "#1976d2",
-                "800": "#1565c0",
-                "900": "#0d47a1",
-                "A100": "#82b1ff",
-                "A200": "#448aff",
-                "A400": "#2979ff",
-                "A700": "#2962ff",
-                "main": "#2196f3"
-            },
-            "secondary": {
-                "50": "#fce4ec",
-                "100": "#f8bbd0",
-                "200": "#f48fb1",
-                "300": "#f06292",
-                "400": "#ec407a",
-                "500": "#e91e63",
-                "600": "#d81b60",
-                "700": "#c2185b",
-                "800": "#ad1457",
-                "900": "#880e4f",
-                "A100": "#ff80ab",
-                "A200": "#ff4081",
-                "A400": "#f50057",
-                "A700": "#c51162",
-                "main": "#f50057"
-            }
-        })),
+        [palette, setPalette] = useStoragedState<string>("palette", "调色板", JSON.stringify(defaultPalette)),
         [recentlyUsedState, setRecentlyUsed] = useStoragedState<string>("recently-tools", "最近使用的工具", "[]"),
         [mostUsedState, setMostUsed] = useStoragedState<string>("most-tools", "最常使用的工具", "{}"),
-        realPalette = useMemo(() => (palette === "__none__" ? {} : JSON.parse(palette)), [palette]),
         theme = useMemo(
             () =>
                 createTheme({
                     palette: {
-                        ...realPalette,
+                        ...(JSON.parse(palette)),
                         mode: mode === "system" ? (isBrowser() ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light") : "light") : mode,
                     },
                     typography: {
diff --git a/src/app/locales/zh-CN.json b/src/app/locales/zh-CN.json
index 75d59d82..f4ca8a3d 100644
--- a/src/app/locales/zh-CN.json
+++ b/src/app/locales/zh-CN.json
@@ -197,6 +197,7 @@
 	},
 	"theme": {
 		"primary": "主要色",
+		"colorSteps": "色标",
 		"secondary": "次要色",
 		"shade": "阴影",
 		"colors": {
diff --git a/src/app/setting/extensions/DialogInputs.tsx b/src/app/setting/extensions/DialogInputs.tsx
index 70f99d5f..1f21a0d2 100644
--- a/src/app/setting/extensions/DialogInputs.tsx
+++ b/src/app/setting/extensions/DialogInputs.tsx
@@ -2,7 +2,10 @@
 import {
     Button,
     ButtonGroup,
-    FormGroup
+    FormGroup,
+    MenuItem,
+    Select,
+    TextField
 } from "@mui/material";
 import {
     get
@@ -10,6 +13,7 @@ import {
 import db from "../../tools/extension/db";
 import InfoInput from "./infoInput";
 import {
+    Hex,
     setState
 } from "../../declare";
 import {
@@ -28,31 +32,51 @@ export default function DialogInputs(props: {
     return (
         <>
             <FormGroup>
-                {[["name", "名称"], ["to", "ID"], ["desc", "描述"], ["icon", "图标"], ["color", "背景色"], ["main", "入口"]].map(item => <InfoInput
+                {[["name", "名称"], ["to", "ID"], ["desc", "描述"]].map(item => <InfoInput
                     id={item[0]}
                     key={item[0]}
                     name={item[1]}
                     info={props.fileInfo}
                     setInfo={props.setFileInfo} />)}
             </FormGroup>
-            <ButtonGroup fullWidth>
-                {props.files.length !== 0 && <Button variant="contained" onClick={async (event) => {
-                    const id = await db.extensionTools.put({
-                        ...props.fileInfo,
-                        files: props.files,
-                        color: props.fileInfo.color
-                    });
-                    props.reset();
-                }}>
-                    {props.type === "add" ? get("添加") : get("编辑")}
-                </Button>}
-                {props.type === "modify" && <Button variant="outlined" onClick={async (event) => {
-                    props.setModifyDialogOpen(false);
-                    props.setRemoveDialogOpen(true);
-                }}>
-                    {get("删除")}
-                </Button>}
-            </ButtonGroup>
+            <FormGroup sx={{
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "space-between"
+            }}>
+                {[0, 1].map(item => (
+                    <TextField sx={{
+                        maxWidth: "49%"
+                    }} key={item} margin="dense" variant="outlined" onChange={event => {
+                        props.setFileInfo(old => {
+                            const realOld = {
+                                ...old
+                            };
+                            realOld.color[item] = Hex.hex(event.target.value as Hex.HexColor<string>);
+                            return realOld;
+                        });
+                    }} value={props.fileInfo.color[item]} label={get("theme.colorSteps") + item} />
+                ))}
+            </FormGroup>
+            <FormGroup>
+                {[["icon", "图标"], ["main", "入口"]].map(item => (
+                    <Select sx={{
+                        mb: 1
+                    }} key={item[0]} value={props.fileInfo[item[0]]} label={get(item[1])} onChange={event => {
+                        props.setFileInfo(old => {
+                            const realOld = {
+                                ...old
+                            };
+                            realOld[item[0]] = event.target.value;
+                            return realOld;
+                        })
+                    }}>
+                        {props.files.map(file => (
+                            <MenuItem key={file[0]} value={file[0]}>{file[0]}</MenuItem>
+                        ))}
+                    </Select>
+                ))}
+            </FormGroup>
         </>
     );
 }
diff --git a/src/app/setting/extensions/page.tsx b/src/app/setting/extensions/page.tsx
index 3c692334..5dd5a345 100644
--- a/src/app/setting/extensions/page.tsx
+++ b/src/app/setting/extensions/page.tsx
@@ -8,7 +8,10 @@ import {
     IconButton,
     Box,
     FormControlLabel,
-    Checkbox
+    Checkbox,
+    useMediaQuery,
+    useTheme,
+    ButtonGroup
 } from "@mui/material";
 import {
     useContext,
@@ -37,7 +40,6 @@ import {
 import {
     useLiveQuery
 } from "dexie-react-hooks";
-import Image from "next/image";
 import db, {
     single
 } from "../../tools/extension/db";
@@ -66,6 +68,25 @@ export default function ExtensionManager() {
         [removeDialogOpen, setRemoveDialogOpen] = useState<boolean>(false),
         [modifyDialogOpen, setModifyDialogOpen] = useState<boolean>(false),
         [clearData, setClearData] = useState<boolean>(false),
+        theme = useTheme(),
+        fullScreen = useMediaQuery(theme.breakpoints.down('sm')),
+        dialogButtons = (type: "modify" | "add") => <ButtonGroup fullWidth>
+            {files.length !== 0 && <Button variant="contained" onClick={async (event) => {
+                const id = await db.extensionTools.put({
+                    ...fileInfo,
+                    files: files
+                });
+                reset();
+            }}>
+                {type === "add" ? get("添加") : get("编辑")}
+            </Button>}
+            {type === "modify" && <Button variant="outlined" onClick={async (event) => {
+                setModifyDialogOpen(false);
+                setRemoveDialogOpen(true);
+            }}>
+                {get("删除")}
+            </Button>}
+        </ButtonGroup>,
         recentlyUsed = useContext(recentlyUsedContext),
         mostUsed = useContext(mostUsedContext),
         reset = () => {
@@ -130,7 +151,8 @@ export default function ExtensionManager() {
                         <Stack direction="row" divider={<Divider orientation="vertical" flexItem />} spacing={2}>
                             <Stack direction="row" spacing={1}>
                                 <Box>
-                                    <Image src={`/extensionfiles/${single.to}/${single.icon}`} alt={single.name} height={24} width={24} />
+                                    {/* 这里的图片是直接从indexedDB加载来的，不需要且不能使用next/image的优化 */}
+                                    <img src={`/extensionfiles/${single.to}/${single.icon}`} alt={single.name} height={24} width={24} />
                                 </Box>
                                 <Box>
                                     <Typography>
@@ -185,7 +207,9 @@ export default function ExtensionManager() {
             }} variant="outlined">
                 {get("extensions.添加扩展")}
             </Button>
-            <PureDialog open={modifyDialogOpen} onClose={event => {
+            <PureDialog action={dialogButtons("modify")} add={{
+                fullScreen: fullScreen
+            }} open={modifyDialogOpen} onClose={event => {
                 setModifyDialogOpen(false);
             }} title={get("extensions.编辑扩展")}>
                 {packagedDialogInputs("modify")}
@@ -201,7 +225,9 @@ export default function ExtensionManager() {
                 }
                 reset();
             }} open={removeDialogOpen} title={get("extensions.删除扩展")} description={`${get("extensions.确定删除扩展")}${fileInfo.name}?`} />
-            <PureDialog open={addDialogOpen} onClose={() => reset()} title={get("extensions.添加扩展")}>
+            <PureDialog action={dialogButtons("add")} add={{
+                fullScreen: fullScreen
+            }} open={addDialogOpen} onClose={() => reset()} title={get("extensions.添加扩展")}>
                 <FilePond
                     files={fileArray as unknown as FilePondServerConfigProps["files"]}
                     onupdatefiles={files => {