diff --git a/app/page.js b/app/page.js
index 3b218ef..e918743 100644
--- a/app/page.js
+++ b/app/page.js
@@ -3,16 +3,20 @@
 const poppins = Poppins({ subsets: ["latin"], weight: ["800"] })
 
 import SudokuBoard from "@/components/sudoku_board";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { Label } from "@/components/ui/label";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
 import { Slider } from "@/components/ui/slider";
 import { Switch } from "@/components/ui/switch";
 import { cn, difficultyDesc } from "@/lib/utils";
+import { getVersion } from "@tauri-apps/api/app";
 import { invoke } from "@tauri-apps/api/tauri";
-import { ChevronDown, HelpCircle, Settings2 } from "lucide-react";
+import { checkUpdate, installUpdate } from "@tauri-apps/api/updater";
+import { ChevronDown, HelpCircle, Loader2, Settings2 } from "lucide-react";
 import { useTheme } from "next-themes";
 import { Poppins } from "next/font/google";
 import Link from "next/link";
@@ -21,12 +25,27 @@ import { useEffect, useState } from "react";
 export default function Home() {
   const [difficulty, setDifficulty] = useState(2);
   const [markingAssist, setMarkingAssist] = useState(false);
+  const [appVersion, setAppversion] = useState("");
+  const [updateDialogOpen, setUpdateDialogOpen] = useState(false);
+  const [updateManifest, setUpdateManifest] = useState({});
+  const [updating, setUpdating] = useState(false);
+  const [updateFailed, setUpdateFailed] = useState(false);
 
   useEffect(() => {
     invoke('get_difficulty').then((difficulty) => setDifficulty(difficulty));
     invoke('get_marking_assist').then((markingAssist) => setMarkingAssist(markingAssist));
   }, []);
 
+  useEffect(() => {
+    getVersion().then(setAppversion);
+    checkUpdate().then(({ shouldUpdate, manifest }) => {
+      if (shouldUpdate) {
+        setUpdateManifest(manifest);
+        setUpdateDialogOpen(true);
+      }
+    })
+  }, []);
+
   const randomPuzzle = [
     [4, 0, 8, 0, 0, 0, 0, 0, 9],
     [0, 0, 0, 4, 9, 0, 7, 0, 0],
@@ -58,6 +77,10 @@ export default function Home() {
         </DrawerTrigger>
         <DrawerContent>
           <div className="w-80 py-8 px-4 flex flex-col justify-center gap-4">
+            <div className="font-bold text-lg">
+              设置
+            </div>
+            <Separator />
             <div className="flex flex-col justify-center gap-4 mb-4">
               <div className="flex justify-between">
                 <Label className="font-bold">难度</Label>
@@ -99,7 +122,7 @@ export default function Home() {
                 <DropdownMenuTrigger asChild>
                   <Label className="flex items-center cursor-pointer">{
                     { "light": "浅色", "dark": "深色", "system": "跟随系统" }[theme]
-                  }<ChevronDown size={14}/>
+                  }<ChevronDown size={14} />
                   </Label>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
@@ -115,10 +138,79 @@ export default function Home() {
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>
+            <div className="flex-1 flex justify-center items-end">
+              <Label className="text-muted-foreground">版本：v{appVersion}</Label>
+            </div>
           </div>
         </DrawerContent>
       </Drawer>
 
+      <AlertDialog
+        defaultOpen={false}
+        open={updateDialogOpen}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              版本更新
+            </AlertDialogTitle>
+            {updateManifest ?
+              <AlertDialogDescription>
+                <p>发现新版本v{updateManifest.version}。更新内容：</p>
+                <br />
+                <p>{updateManifest.body}</p>
+                <br />
+                <p>是否立即更新？</p>
+                {
+                  updateFailed ?
+                    <>
+                      <br />
+                      <p className="text-destructive">
+                        更新失败，请前往
+                        <button
+                          className="underline bg-none border-none"
+                          onClick={() => window.open("https://github.com/Nervonment/sudoxide/releases")}
+                        >
+                          发布页面
+                        </button>
+                        手动下载更新。
+                      </p>
+                    </>
+                    : <></>
+                }
+              </AlertDialogDescription> : <></>
+            }
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel
+              onClick={() => {
+                setUpdateDialogOpen(false);
+                setUpdateFailed(false);
+                setUpdating(false);
+              }}
+            >
+              稍后再说
+            </AlertDialogCancel>
+            <AlertDialogAction
+              disabled={updating}
+              className="flex items-center"
+              onClick={() => {
+                setUpdating(true);
+                installUpdate()
+                  .catch(() => {
+                    setUpdateFailed(true);
+                  });
+              }}
+            >
+              {
+                updating ?
+                  <>更新中<Loader2 size={14} className="turn" /> </> : <>立即更新</>
+              }
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
       <div className="absolute z-[-10] left-[-120px] bottom-[-380px] brightness-75">
         <SudokuBoard board={randomPuzzle} />
       </div>
diff --git a/components/ui/alert-dialog.jsx b/components/ui/alert-dialog.jsx
new file mode 100644
index 0000000..92cac7b
--- /dev/null
+++ b/components/ui/alert-dialog.jsx
@@ -0,0 +1,99 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref} />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props} />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+    {...props} />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props} />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props} />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/components/ui/separator.jsx b/components/ui/separator.jsx
new file mode 100644
index 0000000..9c31480
--- /dev/null
+++ b/components/ui/separator.jsx
@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef((
+  { className, orientation = "horizontal", decorative = true, ...props },
+  ref
+) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className
+    )}
+    {...props} />
+))
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/package-lock.json b/package-lock.json
index 68f7146..aaef4dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,17 +1,19 @@
 {
-  "name": "tauri-example",
-  "version": "0.1.0",
+  "name": "sudoxide",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "tauri-example",
-      "version": "0.1.0",
+      "name": "sudoxide",
+      "version": "0.2.0",
       "dependencies": {
+        "@radix-ui/react-alert-dialog": "^1.0.5",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-popover": "^1.0.7",
+        "@radix-ui/react-separator": "^1.0.3",
         "@radix-ui/react-slider": "^1.1.2",
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-switch": "^1.0.3",
@@ -471,6 +473,34 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.0.5.tgz",
+      "integrity": "sha512-OrVIOcZL0tl6xibeuGt5/+UxoT2N27KCFOPjFyfXMnchxSHZ/OW7cCX2nGlIYJrbHK/fczPcFzAwvNBB6XBNMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dialog": "1.0.5",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
@@ -956,6 +986,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz",
+      "integrity": "sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slider": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.1.2.tgz",
diff --git a/package.json b/package.json
index d7f67cc..012cc42 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sudoxide",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -10,10 +10,12 @@
     "tauri": "tauri"
   },
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index b9b555a..482c699 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "Sudoxide",
-    "version": "0.2.1"
+    "version": "0.2.2"
   },
   "tauri": {
     "allowlist": {
@@ -67,12 +67,8 @@
       "endpoints": [
         "https://nervonment.github.io/sudoxide_versions/update.json"
       ],
-      "dialog": true,
-      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDQyNEU5RDgyQjQxODE2NDkKUldSSkZoaTBncDFPUW9KdEtMMTRsUVptUG9BUGtDUXdnd0QwdkRoays2YkZLVjdBWG1LODlmNVEK",
-      "windows": {
-        "installMode": "passive",
-        "installerArgs": []
-      }
+      "dialog": false,
+      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDQyNEU5RDgyQjQxODE2NDkKUldSSkZoaTBncDFPUW9KdEtMMTRsUVptUG9BUGtDUXdnd0QwdkRoays2YkZLVjdBWG1LODlmNVEK"
     },
     "windows": [
       {