diff --git a/web/src/views/apps/mariadb/IndexView.vue b/web/src/views/apps/mariadb/IndexView.vue
index 7115fb51..de284eff 100644
--- a/web/src/views/apps/mariadb/IndexView.vue
+++ b/web/src/views/apps/mariadb/IndexView.vue
@@ -3,6 +3,7 @@ defineOptions({
   name: 'apps-mariadb-index'
 })
 
+import copy2clipboard from '@vavt/copy2clipboard'
 import { NButton, NDataTable, NInput } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
@@ -63,6 +64,12 @@ const handleSetRootPassword = async () => {
   await mariadb.setRootPassword(rootPassword.value)
   window.$message.success($gettext('Modified successfully'))
 }
+
+const handleCopyRootPassword = () => {
+  copy2clipboard(rootPassword.value).then(() => {
+    window.$message.success($gettext('Copied successfully'))
+  })
+}
 </script>
 
 <template>
@@ -72,8 +79,13 @@ const handleSetRootPassword = async () => {
         <n-flex vertical>
           <service-status service="mysqld" />
           <n-card :title="$gettext('Root Password')">
-            <n-flex vertical>
-              <n-input v-model:value="rootPassword" type="password" show-password-on="click" />
+            <n-flex>
+              <n-input-group>
+                <n-input v-model:value="rootPassword" type="password" show-password-on="click" />
+                <n-button type="primary" ghost @click="handleCopyRootPassword">
+                  {{ $gettext('Copy') }}
+                </n-button>
+              </n-input-group>
               <n-button type="primary" @click="handleSetRootPassword">
                 {{ $gettext('Save Changes') }}
               </n-button>
diff --git a/web/src/views/apps/mysql/IndexView.vue b/web/src/views/apps/mysql/IndexView.vue
index 11b83575..05020c2b 100644
--- a/web/src/views/apps/mysql/IndexView.vue
+++ b/web/src/views/apps/mysql/IndexView.vue
@@ -3,6 +3,7 @@ defineOptions({
   name: 'apps-mysql-index'
 })
 
+import copy2clipboard from '@vavt/copy2clipboard'
 import { NButton, NDataTable, NInput } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
@@ -63,6 +64,12 @@ const handleSetRootPassword = async () => {
   await mysql.setRootPassword(rootPassword.value)
   window.$message.success($gettext('Modified successfully'))
 }
+
+const handleCopyRootPassword = () => {
+  copy2clipboard(rootPassword.value).then(() => {
+    window.$message.success($gettext('Copied successfully'))
+  })
+}
 </script>
 
 <template>
@@ -72,8 +79,13 @@ const handleSetRootPassword = async () => {
         <n-flex vertical>
           <service-status service="mysqld" />
           <n-card :title="$gettext('Root Password')">
-            <n-flex vertical>
-              <n-input v-model:value="rootPassword" type="password" show-password-on="click" />
+            <n-flex>
+              <n-input-group>
+                <n-input v-model:value="rootPassword" type="password" show-password-on="click" />
+                <n-button type="primary" ghost @click="handleCopyRootPassword">
+                  {{ $gettext('Copy') }}
+                </n-button>
+              </n-input-group>
               <n-button type="primary" @click="handleSetRootPassword">
                 {{ $gettext('Save Changes') }}
               </n-button>
diff --git a/web/src/views/apps/percona/IndexView.vue b/web/src/views/apps/percona/IndexView.vue
index 6a45c5f8..b55318f6 100644
--- a/web/src/views/apps/percona/IndexView.vue
+++ b/web/src/views/apps/percona/IndexView.vue
@@ -3,6 +3,7 @@ defineOptions({
   name: 'apps-percona-index'
 })
 
+import copy2clipboard from '@vavt/copy2clipboard'
 import { NButton, NDataTable, NInput } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
@@ -63,6 +64,12 @@ const handleSetRootPassword = async () => {
   await percona.setRootPassword(rootPassword.value)
   window.$message.success($gettext('Modified successfully'))
 }
+
+const handleCopyRootPassword = () => {
+  copy2clipboard(rootPassword.value).then(() => {
+    window.$message.success($gettext('Copied successfully'))
+  })
+}
 </script>
 
 <template>
@@ -72,8 +79,13 @@ const handleSetRootPassword = async () => {
         <n-flex vertical>
           <service-status service="mysqld" />
           <n-card :title="$gettext('Root Password')">
-            <n-flex vertical>
-              <n-input v-model:value="rootPassword" type="password" show-password-on="click" />
+            <n-flex>
+              <n-input-group>
+                <n-input v-model:value="rootPassword" type="password" show-password-on="click" />
+                <n-button type="primary" ghost @click="handleCopyRootPassword">
+                  {{ $gettext('Copy') }}
+                </n-button>
+              </n-input-group>
               <n-button type="primary" @click="handleSetRootPassword">
                 {{ $gettext('Save Changes') }}
               </n-button>
diff --git a/web/src/views/environment/PHPView.vue b/web/src/views/environment/PHPView.vue
index 51543dd2..27726e8b 100644
--- a/web/src/views/environment/PHPView.vue
+++ b/web/src/views/environment/PHPView.vue
@@ -176,9 +176,11 @@ const handleUninstallModule = async (module: string) => {
         <n-flex vertical>
           <n-card> PHP {{ slug }} </n-card>
           <service-status :service="`php-fpm-${slug}`" show-reload />
-          <n-button type="info" @click="handleSetCli">
-            {{ $gettext('Set as CLI Default Version') }}
-          </n-button>
+          <n-flex>
+            <n-button type="info" @click="handleSetCli">
+              {{ $gettext('Set as CLI Default Version') }}
+            </n-button>
+          </n-flex>
         </n-flex>
       </n-tab-pane>
       <n-tab-pane name="modules" :tab="$gettext('Module Management')">
diff --git a/web/src/views/toolbox/WebHookView.vue b/web/src/views/toolbox/WebHookView.vue
index ec2a6169..08a2b27b 100644
--- a/web/src/views/toolbox/WebHookView.vue
+++ b/web/src/views/toolbox/WebHookView.vue
@@ -4,6 +4,7 @@ import { useGettext } from 'vue3-gettext'
 
 import webhook from '@/api/panel/webhook'
 import { formatDateTime } from '@/utils'
+import copy2clipboard from '@vavt/copy2clipboard'
 
 const { $gettext } = useGettext()
 
@@ -213,7 +214,7 @@ const handleStatusChange = (row: any) => {
 
 const handleCopyUrl = (row: any) => {
   const url = `${window.location.origin}/webhook/${row.key}`
-  navigator.clipboard.writeText(url).then(() => {
+  copy2clipboard(url).then(() => {
     window.$message.success($gettext('URL copied to clipboard'))
   })
 }