diff --git a/src/pages/settings/plugins.tsx b/src/pages/settings/plugins.tsx
index 22688cf3..926d73ee 100644
--- a/src/pages/settings/plugins.tsx
+++ b/src/pages/settings/plugins.tsx
@@ -1,12 +1,44 @@
+import { open as openFile } from "@tauri-apps/plugin-dialog";
 import { open } from "@tauri-apps/plugin-shell";
 import { BookOpen, Box, PartyPopper, Plug, X } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import Button from "../../components/ui/Button";
 import Switch from "../../components/ui/Switch";
+import { useDialog } from "../../utils/dialog";
 import { Field } from "./_field";
 
 export default function PluginsPage() {
   const { t } = useTranslation("plugins");
+  const dialog = useDialog();
+
+  const install = async () => {
+    const path = await openFile({
+      filters: [
+        {
+          name: "Plugin",
+          extensions: ["pg-plugin"],
+        },
+      ],
+    });
+    if (!path) return;
+    await dialog.show({
+      title: t("install.warning.title"),
+      content: t("install.warning.content", {
+        name: "plugin name",
+        author: "author author",
+        permission: ["perm1", "perm2", "perm3"],
+      }),
+      type: "warning",
+      buttons: [
+        {
+          text: t("install.button.cancel"),
+        },
+        {
+          text: t("install.button.install"),
+        },
+      ],
+    });
+  };
 
   return (
     <>
@@ -17,7 +49,7 @@ export default function PluginsPage() {
         description={t("welcome.description")}
       ></Field>
       <Field icon={<Plug />} title={t("title")}>
-        <Button>
+        <Button onClick={install}>
           <Box />
           {t("install")}
         </Button>