From 000e28942a7a43e3d32806ec133019568caa048f Mon Sep 17 00:00:00 2001
From: Jacky <me@jackyu.cn>
Date: Sun, 30 Mar 2025 00:18:37 +0000
Subject: [PATCH] feat(install): restore from backup

---
 api/system/router.go                          |  17 +-
 app/components.d.ts                           |   1 +
 .../SystemRestore/SystemRestoreContent.vue    | 299 ++++++++++++++++++
 app/src/language/ar/app.po                    |  95 ++++--
 app/src/language/de_DE/app.po                 |  95 ++++--
 app/src/language/en/app.po                    |  95 ++++--
 app/src/language/es/app.po                    |  95 ++++--
 app/src/language/fr_FR/app.po                 |  95 ++++--
 app/src/language/ko_KR/app.po                 |  95 ++++--
 app/src/language/messages.pot                 |  93 ++++--
 app/src/language/ru_RU/app.po                 |  95 ++++--
 app/src/language/tr_TR/app.po                 |  95 ++++--
 app/src/language/vi_VN/app.po                 |  95 ++++--
 app/src/language/zh_CN/app.po                 |  95 +++---
 app/src/language/zh_TW/app.po                 |  95 ++++--
 app/src/views/other/Install.vue               | 133 ++++----
 app/src/views/system/Backup/SystemRestore.vue | 189 +----------
 router/routers.go                             |   3 +-
 18 files changed, 1113 insertions(+), 667 deletions(-)
 create mode 100644 app/src/components/SystemRestore/SystemRestoreContent.vue

diff --git a/api/system/router.go b/api/system/router.go
index 2ec517eb..a22f6644 100644
--- a/api/system/router.go
+++ b/api/system/router.go
@@ -17,9 +17,22 @@ func InitPrivateRouter(r *gin.RouterGroup) {
 	r.GET("self_check", SelfCheck)
 	r.POST("self_check/:name/fix", SelfCheckFix)
 
-	// Backup and restore endpoints
+	// Backup endpoint only
 	r.GET("system/backup", CreateBackup)
-	r.POST("system/backup/restore", middleware.EncryptedForm(), RestoreBackup)
+}
+
+func InitBackupRestoreRouter(r *gin.RouterGroup) {
+	r.POST("system/backup/restore",
+		func(ctx *gin.Context) {
+			// If system is installed, verify user authentication
+			if installLockStatus() {
+				middleware.AuthRequired()(ctx)
+			} else {
+				ctx.Next()
+			}
+		},
+		middleware.EncryptedForm(),
+		RestoreBackup)
 }
 
 func InitWebSocketRouter(r *gin.RouterGroup) {
diff --git a/app/components.d.ts b/app/components.d.ts
index ad445731..0f8694f5 100644
--- a/app/components.d.ts
+++ b/app/components.d.ts
@@ -106,6 +106,7 @@ declare module 'vue' {
     SwitchAppearanceIconsVPIconMoon: typeof import('./src/components/SwitchAppearance/icons/VPIconMoon.vue')['default']
     SwitchAppearanceIconsVPIconSun: typeof import('./src/components/SwitchAppearance/icons/VPIconSun.vue')['default']
     SwitchAppearanceSwitchAppearance: typeof import('./src/components/SwitchAppearance/SwitchAppearance.vue')['default']
+    SystemRestoreSystemRestoreContent: typeof import('./src/components/SystemRestore/SystemRestoreContent.vue')['default']
     TwoFAAuthorization: typeof import('./src/components/TwoFA/Authorization.vue')['default']
     VPSwitchVPSwitch: typeof import('./src/components/VPSwitch/VPSwitch.vue')['default']
   }
diff --git a/app/src/components/SystemRestore/SystemRestoreContent.vue b/app/src/components/SystemRestore/SystemRestoreContent.vue
new file mode 100644
index 00000000..c93f0b40
--- /dev/null
+++ b/app/src/components/SystemRestore/SystemRestoreContent.vue
@@ -0,0 +1,299 @@
+<script setup lang="ts">
+import type { RestoreOptions, RestoreResponse } from '@/api/backup'
+import type { UploadFile } from 'ant-design-vue'
+import backup from '@/api/backup'
+import { InboxOutlined } from '@ant-design/icons-vue'
+import { message, Modal } from 'ant-design-vue'
+
+// Define props using TypeScript interface
+interface SystemRestoreProps {
+  showTitle?: boolean
+  showNginxOptions?: boolean
+  onRestoreSuccess?: (data: RestoreResponse) => void
+}
+
+// Define emits using TypeScript interface
+interface SystemRestoreEmits {
+  (e: 'restoreSuccess', data: RestoreResponse): void
+  (e: 'restoreError', error: Error): void
+}
+
+const props = withDefaults(defineProps<SystemRestoreProps>(), {
+  showTitle: true,
+  showNginxOptions: true,
+  onRestoreSuccess: () => null,
+})
+const emit = defineEmits<SystemRestoreEmits>()
+
+// Use UploadFile from ant-design-vue
+const uploadFiles = ref<UploadFile[]>([])
+const isRestoring = ref(false)
+
+const formModel = reactive({
+  securityToken: '',
+  restoreNginx: true,
+  restoreNginxUI: true,
+  verifyHash: true,
+})
+
+function handleBeforeUpload(file: File) {
+  // Check if file type is zip
+  const isZip = file.name.toLowerCase().endsWith('.zip')
+  if (!isZip) {
+    message.error($gettext('Only zip files are allowed'))
+    uploadFiles.value = []
+    return
+  }
+
+  // Create UploadFile object and directly manage uploadFiles
+  const uploadFile = {
+    uid: Date.now().toString(),
+    name: file.name,
+    status: 'done',
+    size: file.size,
+    type: file.type,
+    originFileObj: file,
+  } as UploadFile
+
+  // Keep only the current file
+  uploadFiles.value = [uploadFile]
+
+  // Prevent default upload behavior
+  return false
+}
+
+// Handle file removal
+function handleRemove() {
+  uploadFiles.value = []
+}
+
+async function doRestore() {
+  if (uploadFiles.value.length === 0) {
+    message.warning($gettext('Please select a backup file'))
+    return
+  }
+
+  if (!formModel.securityToken) {
+    message.warning($gettext('Please enter the security token'))
+    return
+  }
+
+  try {
+    isRestoring.value = true
+
+    const uploadedFile = uploadFiles.value[0]
+    if (!uploadedFile.originFileObj) {
+      message.error($gettext('Invalid file object'))
+      return
+    }
+
+    const options: RestoreOptions = {
+      backup_file: uploadedFile.originFileObj,
+      security_token: formModel.securityToken,
+      restore_nginx: formModel.restoreNginx,
+      restore_nginx_ui: formModel.restoreNginxUI,
+      verify_hash: formModel.verifyHash,
+    }
+
+    const data = await backup.restoreBackup(options) as RestoreResponse
+
+    message.success($gettext('Restore completed successfully'))
+
+    if (data.nginx_restored) {
+      message.info($gettext('Nginx configuration has been restored'))
+    }
+
+    if (data.nginx_ui_restored) {
+      message.info($gettext('Nginx UI configuration has been restored'))
+
+      // Show warning modal about restart
+      Modal.warning({
+        title: $gettext('Automatic Restart'),
+        content: $gettext('Nginx UI configuration has been restored and will restart automatically in a few seconds.'),
+        okText: $gettext('OK'),
+        maskClosable: false,
+      })
+    }
+
+    if (data.hash_match === false && formModel.verifyHash) {
+      message.warning($gettext('Backup file integrity check failed, it may have been tampered with'))
+    }
+
+    // Reset form after successful restore
+    uploadFiles.value = []
+    formModel.securityToken = ''
+    // Emit success event
+    emit('restoreSuccess', data)
+    // Call the callback function if provided
+    if (props.onRestoreSuccess) {
+      props.onRestoreSuccess(data)
+    }
+  }
+  catch (error) {
+    console.error('Restore failed:', error)
+    emit('restoreError', error instanceof Error ? error : new Error(String(error)))
+  }
+  finally {
+    isRestoring.value = false
+  }
+}
+</script>
+
+<template>
+  <div>
+    <ACard v-if="showTitle" :title="$gettext('System Restore')" :bordered="false">
+      <AAlert
+        show-icon
+        type="warning"
+        :message="$gettext('Warning: Restore operation will overwrite current configurations. Make sure you have a valid backup file and security token, and carefully select what to restore.')"
+        class="mb-4"
+      />
+
+      <AUploadDragger
+        :file-list="uploadFiles"
+        :multiple="false"
+        :max-count="1"
+        accept=".zip"
+        :before-upload="handleBeforeUpload"
+        @remove="handleRemove"
+      >
+        <p class="ant-upload-drag-icon">
+          <InboxOutlined />
+        </p>
+        <p class="ant-upload-text">
+          {{ $gettext('Click or drag backup file to this area to upload') }}
+        </p>
+        <p class="ant-upload-hint">
+          {{ $gettext('Supported file type: .zip') }}
+        </p>
+      </AUploadDragger>
+
+      <AForm
+        v-if="uploadFiles.length > 0"
+        :model="formModel"
+        layout="vertical"
+        class="mt-4"
+      >
+        <AFormItem :label="$gettext('Security Token')">
+          <AInput
+            v-model:value="formModel.securityToken"
+            :placeholder="$gettext('Please enter the security token received during backup')"
+          />
+        </AFormItem>
+
+        <AFormItem>
+          <ACheckbox v-model:checked="formModel.verifyHash" :disabled="true">
+            {{ $gettext('Verify Backup File Integrity') }}
+          </ACheckbox>
+        </AFormItem>
+
+        <template v-if="showNginxOptions">
+          <AFormItem>
+            <ACheckbox v-model:checked="formModel.restoreNginx">
+              {{ $gettext('Restore Nginx Configuration') }}
+            </ACheckbox>
+            <div class="text-gray-500 ml-6 mt-1 text-sm">
+              <p class="mb-0">
+                {{ $gettext('This will restore all Nginx configuration files. Nginx will restart after the restoration is complete.') }}
+              </p>
+            </div>
+          </AFormItem>
+
+          <AFormItem>
+            <ACheckbox v-model:checked="formModel.restoreNginxUI">
+              {{ $gettext('Restore Nginx UI Configuration') }}
+            </ACheckbox>
+            <div class="text-gray-500 ml-6 mt-1 text-sm">
+              <p class="mb-0">
+                {{ $gettext('This will restore configuration files and database. Nginx UI will restart after the restoration is complete.') }}
+              </p>
+            </div>
+          </AFormItem>
+        </template>
+
+        <AFormItem>
+          <AButton type="primary" :loading="isRestoring" @click="doRestore">
+            {{ $gettext('Start Restore') }}
+          </AButton>
+        </AFormItem>
+      </AForm>
+    </ACard>
+    <div v-else>
+      <AAlert
+        show-icon
+        type="warning"
+        :message="$gettext('Warning: Restore operation will overwrite current configurations. Make sure you have a valid backup file and security token, and carefully select what to restore.')"
+        class="mb-4"
+      />
+
+      <AUploadDragger
+        :file-list="uploadFiles"
+        :multiple="false"
+        :max-count="1"
+        accept=".zip"
+        :before-upload="handleBeforeUpload"
+        @remove="handleRemove"
+      >
+        <p class="ant-upload-drag-icon">
+          <InboxOutlined />
+        </p>
+        <p class="ant-upload-text">
+          {{ $gettext('Click or drag backup file to this area to upload') }}
+        </p>
+        <p class="ant-upload-hint">
+          {{ $gettext('Supported file type: .zip') }}
+        </p>
+      </AUploadDragger>
+
+      <AForm
+        v-if="uploadFiles.length > 0"
+        :model="formModel"
+        layout="vertical"
+        class="mt-4"
+      >
+        <AFormItem :label="$gettext('Security Token')">
+          <AInput
+            v-model:value="formModel.securityToken"
+            :placeholder="$gettext('Please enter the security token received during backup')"
+          />
+        </AFormItem>
+
+        <AFormItem>
+          <ACheckbox v-model:checked="formModel.verifyHash" :disabled="true">
+            {{ $gettext('Verify Backup File Integrity') }}
+          </ACheckbox>
+        </AFormItem>
+
+        <template v-if="showNginxOptions">
+          <AFormItem>
+            <ACheckbox v-model:checked="formModel.restoreNginx">
+              {{ $gettext('Restore Nginx Configuration') }}
+            </ACheckbox>
+            <div class="text-gray-500 ml-6 mt-1 text-sm">
+              <p class="mb-0">
+                {{ $gettext('This will restore all Nginx configuration files. Nginx will restart after the restoration is complete.') }}
+              </p>
+            </div>
+          </AFormItem>
+
+          <AFormItem>
+            <ACheckbox v-model:checked="formModel.restoreNginxUI">
+              {{ $gettext('Restore Nginx UI Configuration') }}
+            </ACheckbox>
+            <div class="text-gray-500 ml-6 mt-1 text-sm">
+              <p class="mb-0">
+                {{ $gettext('This will restore configuration files and database. Nginx UI will restart after the restoration is complete.') }}
+              </p>
+            </div>
+          </AFormItem>
+        </template>
+
+        <AFormItem>
+          <AButton type="primary" :loading="isRestoring" @click="doRestore">
+            {{ $gettext('Start Restore') }}
+          </AButton>
+        </AFormItem>
+      </AForm>
+    </div>
+  </div>
+</template>
diff --git a/app/src/language/ar/app.po b/app/src/language/ar/app.po
index 6810f019..bf5c36af 100644
--- a/app/src/language/ar/app.po
+++ b/app/src/language/ar/app.po
@@ -252,7 +252,7 @@ msgstr "تم تعطيل التجديد التلقائي لـ‎%{name}"
 msgid "Auto-renewal enabled for %{name}"
 msgstr "تم تمكين التجديد التلقائي لـ‏%{name}"
 
-#: src/views/system/Backup/SystemRestore.vue:92
+#: src/components/SystemRestore/SystemRestoreContent.vue:111
 msgid "Automatic Restart"
 msgstr ""
 
@@ -277,7 +277,7 @@ msgstr "العودة إلى القائمة"
 msgid "Backup"
 msgstr "رجوع"
 
-#: src/views/system/Backup/SystemRestore.vue:100
+#: src/components/SystemRestore/SystemRestoreContent.vue:119
 msgid "Backup file integrity check failed, it may have been tampered with"
 msgstr ""
 
@@ -499,7 +499,8 @@ msgstr "مسح"
 msgid "Cleared successfully"
 msgstr "تم المسح بنجاح"
 
-#: src/views/system/Backup/SystemRestore.vue:137
+#: src/components/SystemRestore/SystemRestoreContent.vue:164
+#: src/components/SystemRestore/SystemRestoreContent.vue:241
 msgid "Click or drag backup file to this area to upload"
 msgstr ""
 
@@ -667,7 +668,7 @@ msgstr "قم بتخصيص اسم العقدة المحلية ليتم عرضها
 msgid "Dashboard"
 msgstr "لوحة المعلومات"
 
-#: src/views/other/Install.vue:152
+#: src/views/other/Install.vue:165
 msgid "Database (Optional, default: database)"
 msgstr "قاعدة البيانات (اختياري، الافتراضي: قاعدة البيانات)"
 
@@ -980,7 +981,7 @@ msgstr "تعديل البث"
 msgid "Email"
 msgstr "بريد إلكتروني"
 
-#: src/views/other/Install.vue:121
+#: src/views/other/Install.vue:134
 msgid "Email (*)"
 msgstr "البريد الإلكتروني (*)"
 
@@ -1555,11 +1556,11 @@ msgstr "أدخل الرمز من التطبيق:"
 msgid "Input the recovery code:"
 msgstr "أدخل رمز الاسترداد:"
 
-#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:168
+#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:181
 msgid "Install"
 msgstr "تثبيت"
 
-#: src/views/other/Install.vue:89
+#: src/views/other/Install.vue:94
 msgid "Install successfully"
 msgstr "تم التثبيت بنجاح"
 
@@ -1567,7 +1568,7 @@ msgstr "تم التثبيت بنجاح"
 msgid "Installation is not allowed after 10 minutes of system startup"
 msgstr ""
 
-#: src/views/other/Install.vue:113
+#: src/views/other/Install.vue:123
 msgid ""
 "Installation is not allowed after 10 minutes of system startup, please "
 "restart the Nginx UI."
@@ -1591,7 +1592,7 @@ msgstr "رمز 2FA أو الاسترداد غير صالح"
 msgid "Invalid AES key format: {0}"
 msgstr "رمز 2FA أو الاسترداد غير صالح"
 
-#: src/views/system/Backup/SystemRestore.vue:67
+#: src/components/SystemRestore/SystemRestoreContent.vue:86
 #, fuzzy
 msgid "Invalid file object"
 msgstr "اسم ملف غير صالح"
@@ -1893,6 +1894,11 @@ msgstr "إجمالي استقبال الشبكة"
 msgid "Network Total Send"
 msgstr "إجمالي إرسال الشبكة"
 
+#: src/views/other/Install.vue:129
+#, fuzzy
+msgid "New Installation"
+msgstr "تثبيت"
+
 #: src/views/config/components/Rename.vue:72
 msgid "New name"
 msgstr "اسم جديد"
@@ -1948,7 +1954,7 @@ msgstr ""
 msgid "Nginx config directory is not set"
 msgstr "قائمة السماح لمجلد سجلات Nginx"
 
-#: src/views/system/Backup/SystemRestore.vue:84
+#: src/components/SystemRestore/SystemRestoreContent.vue:103
 #, fuzzy
 msgid "Nginx configuration has been restored"
 msgstr "خطأ في تحليل تكوين Nginx"
@@ -2007,12 +2013,12 @@ msgstr "تم إعادة تشغيل Nginx بنجاح"
 msgid "Nginx UI already installed"
 msgstr "هذه القيمة مستخدمة مسبقا"
 
-#: src/views/system/Backup/SystemRestore.vue:88
+#: src/components/SystemRestore/SystemRestoreContent.vue:107
 #, fuzzy
 msgid "Nginx UI configuration has been restored"
 msgstr "خطأ في تحليل تكوين Nginx"
 
-#: src/views/system/Backup/SystemRestore.vue:93
+#: src/components/SystemRestore/SystemRestoreContent.vue:112
 #, fuzzy
 msgid ""
 "Nginx UI configuration has been restored and will restart automatically in a "
@@ -2115,6 +2121,7 @@ msgstr "حسنًا"
 #: src/components/ChatGPT/ChatGPT.vue:375
 #: src/components/Notification/Notification.vue:134
 #: src/components/StdDesign/StdDataDisplay/StdBulkActions.vue:95
+#: src/components/SystemRestore/SystemRestoreContent.vue:113
 #: src/views/notification/Notification.vue:38
 #: src/views/site/cert/components/ObtainCert.vue:139
 #: src/views/site/ngx_conf/NgxConfigEditor.vue:50
@@ -2125,7 +2132,6 @@ msgstr "حسنًا"
 #: src/views/stream/components/RightSettings.vue:50
 #: src/views/stream/StreamList.vue:164
 #: src/views/system/Backup/BackupCreator.vue:149
-#: src/views/system/Backup/SystemRestore.vue:94
 msgid "OK"
 msgstr "حسنًا"
 
@@ -2140,7 +2146,7 @@ msgstr "بمجرد اكتمال التحقق، سيتم إزالة السجلا
 msgid "Online"
 msgstr "متصل"
 
-#: src/views/system/Backup/SystemRestore.vue:24
+#: src/components/SystemRestore/SystemRestoreContent.vue:43
 msgid "Only zip files are allowed"
 msgstr ""
 
@@ -2203,7 +2209,7 @@ msgstr ""
 msgid "Password"
 msgstr "كلمة المرور"
 
-#: src/views/other/Install.vue:141
+#: src/views/other/Install.vue:154
 msgid "Password (*)"
 msgstr "كلمة المرور (*)"
 
@@ -2212,7 +2218,7 @@ msgstr "كلمة المرور (*)"
 msgid "Password incorrect"
 msgstr "اسم المستخدم أو كلمة المرور غير صحيحة"
 
-#: src/views/other/Install.vue:70
+#: src/views/other/Install.vue:75
 msgid "Password length cannot exceed 20 characters"
 msgstr ""
 
@@ -2257,12 +2263,13 @@ msgstr ""
 msgid "Please enter the OTP code:"
 msgstr "يرجى إدخال رمز OTP:"
 
-#: src/views/system/Backup/SystemRestore.vue:58
+#: src/components/SystemRestore/SystemRestoreContent.vue:77
 #, fuzzy
 msgid "Please enter the security token"
 msgstr "يرجى إدخال رمز OTP:"
 
-#: src/views/system/Backup/SystemRestore.vue:153
+#: src/components/SystemRestore/SystemRestoreContent.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:257
 msgid "Please enter the security token received during backup"
 msgstr ""
 
@@ -2312,15 +2319,15 @@ msgid ""
 "configuration."
 msgstr "يرجى إدخال الاسم، سيتم استخدامه كاسم الملف للتكوين الجديد."
 
-#: src/views/other/Install.vue:54
+#: src/views/other/Install.vue:59
 msgid "Please input your E-mail!"
 msgstr "يرجى إدخال بريدك الإلكتروني!"
 
-#: src/views/other/Install.vue:66 src/views/other/Login.vue:47
+#: src/views/other/Install.vue:71 src/views/other/Login.vue:47
 msgid "Please input your password!"
 msgstr "يرجى إدخال كلمة المرور الخاصة بك!"
 
-#: src/views/other/Install.vue:60 src/views/other/Login.vue:41
+#: src/views/other/Install.vue:65 src/views/other/Login.vue:41
 msgid "Please input your username!"
 msgstr "يرجى إدخال اسم المستخدم الخاص بك!"
 
@@ -2333,7 +2340,7 @@ msgstr "يرجى ملاحظة أن تكوين وحدات الوقت أدناه 
 msgid "Please save this security token, you will need it for restoration:"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:53
+#: src/components/SystemRestore/SystemRestoreContent.vue:72
 #, fuzzy
 msgid "Please select a backup file"
 msgstr "يرجى اختيار عقدة واحدة على الأقل!"
@@ -2610,17 +2617,24 @@ msgstr "إعادة تشغيل"
 msgid "Restarting"
 msgstr "إعادة التشغيل"
 
-#: src/views/system/Backup/SystemRestore.vue:81
+#: src/components/SystemRestore/SystemRestoreContent.vue:100
 #, fuzzy
 msgid "Restore completed successfully"
 msgstr "تم الحذف بنجاح"
 
-#: src/views/system/Backup/SystemRestore.vue:165
+#: src/views/other/Install.vue:186
+#, fuzzy
+msgid "Restore from Backup"
+msgstr "نظام"
+
+#: src/components/SystemRestore/SystemRestoreContent.vue:193
+#: src/components/SystemRestore/SystemRestoreContent.vue:270
 #, fuzzy
 msgid "Restore Nginx Configuration"
 msgstr "مجلد تكوينات Nginx"
 
-#: src/views/system/Backup/SystemRestore.vue:176
+#: src/components/SystemRestore/SystemRestoreContent.vue:204
+#: src/components/SystemRestore/SystemRestoreContent.vue:281
 #, fuzzy
 msgid "Restore Nginx UI Configuration"
 msgstr "مجلد تكوينات Nginx"
@@ -2736,7 +2750,8 @@ msgstr "حزمة تطوير البرمجيات SDK"
 msgid "Secret has been copied"
 msgstr "تم نسخ السر"
 
-#: src/views/system/Backup/SystemRestore.vue:150
+#: src/components/SystemRestore/SystemRestoreContent.vue:177
+#: src/components/SystemRestore/SystemRestoreContent.vue:254
 msgid "Security Token"
 msgstr ""
 
@@ -2888,7 +2903,8 @@ msgstr "تسجيل الدخول عبر SSO"
 msgid "Stable"
 msgstr "مستقر"
 
-#: src/views/system/Backup/SystemRestore.vue:187
+#: src/components/SystemRestore/SystemRestoreContent.vue:216
+#: src/components/SystemRestore/SystemRestoreContent.vue:293
 msgid "Start Restore"
 msgstr ""
 
@@ -2945,7 +2961,8 @@ msgid ""
 "guide/nginx-proxy-example.html"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:140
+#: src/components/SystemRestore/SystemRestoreContent.vue:167
+#: src/components/SystemRestore/SystemRestoreContent.vue:244
 msgid "Supported file type: .zip"
 msgstr ""
 
@@ -3036,11 +3053,15 @@ msgstr "نظام"
 msgid "System Initial User"
 msgstr "مستخدم النظام الأولي"
 
-#: src/views/system/Backup/SystemRestore.vue:117
+#: src/components/SystemRestore/SystemRestoreContent.vue:144
 #, fuzzy
 msgid "System Restore"
 msgstr "نظام"
 
+#: src/views/other/Install.vue:107
+msgid "System restored successfully. Please log in."
+msgstr ""
+
 #: src/constants/errors/self_check.ts:2
 #, fuzzy
 msgid "Task not found"
@@ -3063,7 +3084,7 @@ msgstr ""
 "سيتم فحص شهادة النطاق لمدة 30 دقيقة، وسيتم تجديدها إذا مر أكثر من أسبوع أو "
 "الفترة التي حددتها في الإعدادات منذ إصدارها الأخير."
 
-#: src/views/other/Install.vue:76
+#: src/views/other/Install.vue:81
 msgid "The filename cannot contain the following characters: %{c}"
 msgstr "لا يمكن أن يحتوي اسم الملف على الأحرف التالية: %{c}"
 
@@ -3207,13 +3228,15 @@ msgstr ""
 msgid "This value is already taken"
 msgstr "هذه القيمة مستخدمة مسبقا"
 
-#: src/views/system/Backup/SystemRestore.vue:169
+#: src/components/SystemRestore/SystemRestoreContent.vue:197
+#: src/components/SystemRestore/SystemRestoreContent.vue:274
 msgid ""
 "This will restore all Nginx configuration files. Nginx will restart after "
 "the restoration is complete."
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:208
+#: src/components/SystemRestore/SystemRestoreContent.vue:285
 msgid ""
 "This will restore configuration files and database. Nginx UI will restart "
 "after the restoration is complete."
@@ -3390,7 +3413,7 @@ msgstr ""
 msgid "Username"
 msgstr "اسم المستخدم"
 
-#: src/views/other/Install.vue:131
+#: src/views/other/Install.vue:144
 msgid "Username (*)"
 msgstr "اسم المستخدم (*)"
 
@@ -3400,7 +3423,8 @@ msgstr "اسم المستخدم (*)"
 msgid "Valid"
 msgstr "صالح"
 
-#: src/views/system/Backup/SystemRestore.vue:159
+#: src/components/SystemRestore/SystemRestoreContent.vue:186
+#: src/components/SystemRestore/SystemRestoreContent.vue:263
 msgid "Verify Backup File Integrity"
 msgstr ""
 
@@ -3443,7 +3467,8 @@ msgstr "عرض"
 msgid "Warning"
 msgstr "تحذير"
 
-#: src/views/system/Backup/SystemRestore.vue:121
+#: src/components/SystemRestore/SystemRestoreContent.vue:148
+#: src/components/SystemRestore/SystemRestoreContent.vue:225
 msgid ""
 "Warning: Restore operation will overwrite current configurations. Make sure "
 "you have a valid backup file and security token, and carefully select what "
diff --git a/app/src/language/de_DE/app.po b/app/src/language/de_DE/app.po
index 62d8de06..d9b7cf3c 100644
--- a/app/src/language/de_DE/app.po
+++ b/app/src/language/de_DE/app.po
@@ -265,7 +265,7 @@ msgstr "Automatische Verlängerung deaktiviert für %{name}"
 msgid "Auto-renewal enabled for %{name}"
 msgstr "Automatische Verlängerung aktiviert für %{name}"
 
-#: src/views/system/Backup/SystemRestore.vue:92
+#: src/components/SystemRestore/SystemRestoreContent.vue:111
 msgid "Automatic Restart"
 msgstr ""
 
@@ -291,7 +291,7 @@ msgstr "Zurück zur Liste"
 msgid "Backup"
 msgstr "Zurück"
 
-#: src/views/system/Backup/SystemRestore.vue:100
+#: src/components/SystemRestore/SystemRestoreContent.vue:119
 msgid "Backup file integrity check failed, it may have been tampered with"
 msgstr ""
 
@@ -516,7 +516,8 @@ msgstr "Säubern"
 msgid "Cleared successfully"
 msgstr "Erfolgreich deaktiviert"
 
-#: src/views/system/Backup/SystemRestore.vue:137
+#: src/components/SystemRestore/SystemRestoreContent.vue:164
+#: src/components/SystemRestore/SystemRestoreContent.vue:241
 msgid "Click or drag backup file to this area to upload"
 msgstr ""
 
@@ -691,7 +692,7 @@ msgstr ""
 msgid "Dashboard"
 msgstr "Übersicht"
 
-#: src/views/other/Install.vue:152
+#: src/views/other/Install.vue:165
 msgid "Database (Optional, default: database)"
 msgstr "Datenbank (Optional, Standard: database)"
 
@@ -1021,7 +1022,7 @@ msgstr "Seite bearbeiten"
 msgid "Email"
 msgstr "Email (*)"
 
-#: src/views/other/Install.vue:121
+#: src/views/other/Install.vue:134
 msgid "Email (*)"
 msgstr "Email (*)"
 
@@ -1610,11 +1611,11 @@ msgstr "Füge den Code aus der App ein:"
 msgid "Input the recovery code:"
 msgstr "Füge den Wiederherstellungscode ein:"
 
-#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:168
+#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:181
 msgid "Install"
 msgstr "Installieren"
 
-#: src/views/other/Install.vue:89
+#: src/views/other/Install.vue:94
 #, fuzzy
 msgid "Install successfully"
 msgstr "Aktualisierung erfolgreich"
@@ -1623,7 +1624,7 @@ msgstr "Aktualisierung erfolgreich"
 msgid "Installation is not allowed after 10 minutes of system startup"
 msgstr ""
 
-#: src/views/other/Install.vue:113
+#: src/views/other/Install.vue:123
 msgid ""
 "Installation is not allowed after 10 minutes of system startup, please "
 "restart the Nginx UI."
@@ -1646,7 +1647,7 @@ msgstr ""
 msgid "Invalid AES key format: {0}"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:67
+#: src/components/SystemRestore/SystemRestoreContent.vue:86
 #, fuzzy
 msgid "Invalid file object"
 msgstr "Ungültige E-Mail!"
@@ -1969,6 +1970,11 @@ msgstr "Gesamter Netzwerkempfang"
 msgid "Network Total Send"
 msgstr "Gesamter Netzwerkversand"
 
+#: src/views/other/Install.vue:129
+#, fuzzy
+msgid "New Installation"
+msgstr "Installieren"
+
 #: src/views/config/components/Rename.vue:72
 #, fuzzy
 msgid "New name"
@@ -2026,7 +2032,7 @@ msgstr ""
 msgid "Nginx config directory is not set"
 msgstr "Nginx-Log-Verzeichnis-Whitelist"
 
-#: src/views/system/Backup/SystemRestore.vue:84
+#: src/components/SystemRestore/SystemRestoreContent.vue:103
 #, fuzzy
 msgid "Nginx configuration has been restored"
 msgstr "Name der Konfiguration"
@@ -2089,12 +2095,12 @@ msgstr "Speichern erfolgreich"
 msgid "Nginx UI already installed"
 msgstr "Dieser Wert ist bereits vergeben"
 
-#: src/views/system/Backup/SystemRestore.vue:88
+#: src/components/SystemRestore/SystemRestoreContent.vue:107
 #, fuzzy
 msgid "Nginx UI configuration has been restored"
 msgstr "Name der Konfiguration"
 
-#: src/views/system/Backup/SystemRestore.vue:93
+#: src/components/SystemRestore/SystemRestoreContent.vue:112
 #, fuzzy
 msgid ""
 "Nginx UI configuration has been restored and will restart automatically in a "
@@ -2202,6 +2208,7 @@ msgstr "OK"
 #: src/components/ChatGPT/ChatGPT.vue:375
 #: src/components/Notification/Notification.vue:134
 #: src/components/StdDesign/StdDataDisplay/StdBulkActions.vue:95
+#: src/components/SystemRestore/SystemRestoreContent.vue:113
 #: src/views/notification/Notification.vue:38
 #: src/views/site/cert/components/ObtainCert.vue:139
 #: src/views/site/ngx_conf/NgxConfigEditor.vue:50
@@ -2212,7 +2219,6 @@ msgstr "OK"
 #: src/views/stream/components/RightSettings.vue:50
 #: src/views/stream/StreamList.vue:164
 #: src/views/system/Backup/BackupCreator.vue:149
-#: src/views/system/Backup/SystemRestore.vue:94
 msgid "OK"
 msgstr "OK"
 
@@ -2228,7 +2234,7 @@ msgstr ""
 msgid "Online"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:24
+#: src/components/SystemRestore/SystemRestoreContent.vue:43
 msgid "Only zip files are allowed"
 msgstr ""
 
@@ -2292,7 +2298,7 @@ msgstr ""
 msgid "Password"
 msgstr "Passwort"
 
-#: src/views/other/Install.vue:141
+#: src/views/other/Install.vue:154
 msgid "Password (*)"
 msgstr "Passwort (*)"
 
@@ -2301,7 +2307,7 @@ msgstr "Passwort (*)"
 msgid "Password incorrect"
 msgstr "Benuztername oder Passwort ist falsch"
 
-#: src/views/other/Install.vue:70
+#: src/views/other/Install.vue:75
 msgid "Password length cannot exceed 20 characters"
 msgstr "Passwort darf nicht länger als 20 Zeichen sein"
 
@@ -2347,12 +2353,13 @@ msgstr ""
 msgid "Please enter the OTP code:"
 msgstr "Bitte gib den OTP-Code ein:"
 
-#: src/views/system/Backup/SystemRestore.vue:58
+#: src/components/SystemRestore/SystemRestoreContent.vue:77
 #, fuzzy
 msgid "Please enter the security token"
 msgstr "Bitte gib den OTP-Code ein:"
 
-#: src/views/system/Backup/SystemRestore.vue:153
+#: src/components/SystemRestore/SystemRestoreContent.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:257
 msgid "Please enter the security token received during backup"
 msgstr ""
 
@@ -2411,15 +2418,15 @@ msgstr ""
 "Bitte gib einen Namen ein, der als Dateiname der neuen Konfiguration "
 "verwendet wird."
 
-#: src/views/other/Install.vue:54
+#: src/views/other/Install.vue:59
 msgid "Please input your E-mail!"
 msgstr "Bitte gib deine E-Mail-Adresse ein!"
 
-#: src/views/other/Install.vue:66 src/views/other/Login.vue:47
+#: src/views/other/Install.vue:71 src/views/other/Login.vue:47
 msgid "Please input your password!"
 msgstr "Bitte gib dein Passwort ein!"
 
-#: src/views/other/Install.vue:60 src/views/other/Login.vue:41
+#: src/views/other/Install.vue:65 src/views/other/Login.vue:41
 msgid "Please input your username!"
 msgstr "Bitte gib deinen Benutzernamen ein!"
 
@@ -2434,7 +2441,7 @@ msgstr ""
 msgid "Please save this security token, you will need it for restoration:"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:53
+#: src/components/SystemRestore/SystemRestoreContent.vue:72
 #, fuzzy
 msgid "Please select a backup file"
 msgstr "Bitte wähle mindestens einen Knoten aus!"
@@ -2733,17 +2740,24 @@ msgstr "Neustart"
 msgid "Restarting"
 msgstr "Starte neu"
 
-#: src/views/system/Backup/SystemRestore.vue:81
+#: src/components/SystemRestore/SystemRestoreContent.vue:100
 #, fuzzy
 msgid "Restore completed successfully"
 msgstr "Erfolgreich deaktiviert"
 
-#: src/views/system/Backup/SystemRestore.vue:165
+#: src/views/other/Install.vue:186
+#, fuzzy
+msgid "Restore from Backup"
+msgstr "System"
+
+#: src/components/SystemRestore/SystemRestoreContent.vue:193
+#: src/components/SystemRestore/SystemRestoreContent.vue:270
 #, fuzzy
 msgid "Restore Nginx Configuration"
 msgstr "Name der Konfiguration"
 
-#: src/views/system/Backup/SystemRestore.vue:176
+#: src/components/SystemRestore/SystemRestoreContent.vue:204
+#: src/components/SystemRestore/SystemRestoreContent.vue:281
 #, fuzzy
 msgid "Restore Nginx UI Configuration"
 msgstr "Name der Konfiguration"
@@ -2864,7 +2878,8 @@ msgstr "SDK"
 msgid "Secret has been copied"
 msgstr "Schlüssel wurde kopiert"
 
-#: src/views/system/Backup/SystemRestore.vue:150
+#: src/components/SystemRestore/SystemRestoreContent.vue:177
+#: src/components/SystemRestore/SystemRestoreContent.vue:254
 msgid "Security Token"
 msgstr ""
 
@@ -3021,7 +3036,8 @@ msgstr "Login"
 msgid "Stable"
 msgstr "Altiviert"
 
-#: src/views/system/Backup/SystemRestore.vue:187
+#: src/components/SystemRestore/SystemRestoreContent.vue:216
+#: src/components/SystemRestore/SystemRestoreContent.vue:293
 msgid "Start Restore"
 msgstr ""
 
@@ -3076,7 +3092,8 @@ msgid ""
 "guide/nginx-proxy-example.html"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:140
+#: src/components/SystemRestore/SystemRestoreContent.vue:167
+#: src/components/SystemRestore/SystemRestoreContent.vue:244
 msgid "Supported file type: .zip"
 msgstr ""
 
@@ -3174,11 +3191,15 @@ msgstr "System"
 msgid "System Initial User"
 msgstr "System-Startbenutzer"
 
-#: src/views/system/Backup/SystemRestore.vue:117
+#: src/components/SystemRestore/SystemRestoreContent.vue:144
 #, fuzzy
 msgid "System Restore"
 msgstr "System"
 
+#: src/views/other/Install.vue:107
+msgid "System restored successfully. Please log in."
+msgstr ""
+
 #: src/constants/errors/self_check.ts:2
 #, fuzzy
 msgid "Task not found"
@@ -3202,7 +3223,7 @@ msgstr ""
 "Das Zertifikat für die Domain wird alle Stunde überprüft und erneuert, wenn "
 "es seit der letzten Ausstellung vor mehr als 1 Monat ausgestellt wurde."
 
-#: src/views/other/Install.vue:76
+#: src/views/other/Install.vue:81
 msgid "The filename cannot contain the following characters: %{c}"
 msgstr "Der Dateiname darf die folgenden Zeichen nicht enthalten: %{c}"
 
@@ -3349,13 +3370,15 @@ msgstr ""
 msgid "This value is already taken"
 msgstr "Dieser Wert ist bereits vergeben"
 
-#: src/views/system/Backup/SystemRestore.vue:169
+#: src/components/SystemRestore/SystemRestoreContent.vue:197
+#: src/components/SystemRestore/SystemRestoreContent.vue:274
 msgid ""
 "This will restore all Nginx configuration files. Nginx will restart after "
 "the restoration is complete."
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:208
+#: src/components/SystemRestore/SystemRestoreContent.vue:285
 msgid ""
 "This will restore configuration files and database. Nginx UI will restart "
 "after the restoration is complete."
@@ -3535,7 +3558,7 @@ msgstr ""
 msgid "Username"
 msgstr "Benutzername"
 
-#: src/views/other/Install.vue:131
+#: src/views/other/Install.vue:144
 msgid "Username (*)"
 msgstr "Benutzername (*)"
 
@@ -3545,7 +3568,8 @@ msgstr "Benutzername (*)"
 msgid "Valid"
 msgstr "Gültig"
 
-#: src/views/system/Backup/SystemRestore.vue:159
+#: src/components/SystemRestore/SystemRestoreContent.vue:186
+#: src/components/SystemRestore/SystemRestoreContent.vue:263
 msgid "Verify Backup File Integrity"
 msgstr ""
 
@@ -3590,7 +3614,8 @@ msgstr "Anzeigen"
 msgid "Warning"
 msgstr "Warnung"
 
-#: src/views/system/Backup/SystemRestore.vue:121
+#: src/components/SystemRestore/SystemRestoreContent.vue:148
+#: src/components/SystemRestore/SystemRestoreContent.vue:225
 msgid ""
 "Warning: Restore operation will overwrite current configurations. Make sure "
 "you have a valid backup file and security token, and carefully select what "
diff --git a/app/src/language/en/app.po b/app/src/language/en/app.po
index 8841161a..33727219 100644
--- a/app/src/language/en/app.po
+++ b/app/src/language/en/app.po
@@ -263,7 +263,7 @@ msgstr "Auto-renewal disabled for %{name}"
 msgid "Auto-renewal enabled for %{name}"
 msgstr "Auto-renewal enabled for %{name}"
 
-#: src/views/system/Backup/SystemRestore.vue:92
+#: src/components/SystemRestore/SystemRestoreContent.vue:111
 msgid "Automatic Restart"
 msgstr ""
 
@@ -289,7 +289,7 @@ msgstr ""
 msgid "Backup"
 msgstr "Back"
 
-#: src/views/system/Backup/SystemRestore.vue:100
+#: src/components/SystemRestore/SystemRestoreContent.vue:119
 msgid "Backup file integrity check failed, it may have been tampered with"
 msgstr ""
 
@@ -511,7 +511,8 @@ msgstr ""
 msgid "Cleared successfully"
 msgstr "Disabled successfully"
 
-#: src/views/system/Backup/SystemRestore.vue:137
+#: src/components/SystemRestore/SystemRestoreContent.vue:164
+#: src/components/SystemRestore/SystemRestoreContent.vue:241
 msgid "Click or drag backup file to this area to upload"
 msgstr ""
 
@@ -683,7 +684,7 @@ msgstr ""
 msgid "Dashboard"
 msgstr "Dashboard"
 
-#: src/views/other/Install.vue:152
+#: src/views/other/Install.vue:165
 msgid "Database (Optional, default: database)"
 msgstr "Database (Optional, default: database)"
 
@@ -1008,7 +1009,7 @@ msgstr "Edit Site"
 msgid "Email"
 msgstr "Email (*)"
 
-#: src/views/other/Install.vue:121
+#: src/views/other/Install.vue:134
 msgid "Email (*)"
 msgstr "Email (*)"
 
@@ -1592,11 +1593,11 @@ msgstr ""
 msgid "Input the recovery code:"
 msgstr ""
 
-#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:168
+#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:181
 msgid "Install"
 msgstr "Install"
 
-#: src/views/other/Install.vue:89
+#: src/views/other/Install.vue:94
 #, fuzzy
 msgid "Install successfully"
 msgstr "Enabled successfully"
@@ -1605,7 +1606,7 @@ msgstr "Enabled successfully"
 msgid "Installation is not allowed after 10 minutes of system startup"
 msgstr ""
 
-#: src/views/other/Install.vue:113
+#: src/views/other/Install.vue:123
 msgid ""
 "Installation is not allowed after 10 minutes of system startup, please "
 "restart the Nginx UI."
@@ -1630,7 +1631,7 @@ msgstr "Invalid E-mail!"
 msgid "Invalid AES key format: {0}"
 msgstr "Invalid E-mail!"
 
-#: src/views/system/Backup/SystemRestore.vue:67
+#: src/components/SystemRestore/SystemRestoreContent.vue:86
 #, fuzzy
 msgid "Invalid file object"
 msgstr "Invalid E-mail!"
@@ -1949,6 +1950,11 @@ msgstr "Network Total Receive"
 msgid "Network Total Send"
 msgstr "Network Total Send"
 
+#: src/views/other/Install.vue:129
+#, fuzzy
+msgid "New Installation"
+msgstr "Install"
+
 #: src/views/config/components/Rename.vue:72
 #, fuzzy
 msgid "New name"
@@ -2006,7 +2012,7 @@ msgstr ""
 msgid "Nginx config directory is not set"
 msgstr "Configuration Name"
 
-#: src/views/system/Backup/SystemRestore.vue:84
+#: src/components/SystemRestore/SystemRestoreContent.vue:103
 #, fuzzy
 msgid "Nginx configuration has been restored"
 msgstr "Configuration Name"
@@ -2069,12 +2075,12 @@ msgstr "Saved successfully"
 msgid "Nginx UI already installed"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:88
+#: src/components/SystemRestore/SystemRestoreContent.vue:107
 #, fuzzy
 msgid "Nginx UI configuration has been restored"
 msgstr "Configuration Name"
 
-#: src/views/system/Backup/SystemRestore.vue:93
+#: src/components/SystemRestore/SystemRestoreContent.vue:112
 #, fuzzy
 msgid ""
 "Nginx UI configuration has been restored and will restart automatically in a "
@@ -2179,6 +2185,7 @@ msgstr ""
 #: src/components/ChatGPT/ChatGPT.vue:375
 #: src/components/Notification/Notification.vue:134
 #: src/components/StdDesign/StdDataDisplay/StdBulkActions.vue:95
+#: src/components/SystemRestore/SystemRestoreContent.vue:113
 #: src/views/notification/Notification.vue:38
 #: src/views/site/cert/components/ObtainCert.vue:139
 #: src/views/site/ngx_conf/NgxConfigEditor.vue:50
@@ -2189,7 +2196,6 @@ msgstr ""
 #: src/views/stream/components/RightSettings.vue:50
 #: src/views/stream/StreamList.vue:164
 #: src/views/system/Backup/BackupCreator.vue:149
-#: src/views/system/Backup/SystemRestore.vue:94
 msgid "OK"
 msgstr ""
 
@@ -2204,7 +2210,7 @@ msgstr ""
 msgid "Online"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:24
+#: src/components/SystemRestore/SystemRestoreContent.vue:43
 msgid "Only zip files are allowed"
 msgstr ""
 
@@ -2264,7 +2270,7 @@ msgstr ""
 msgid "Password"
 msgstr "Password"
 
-#: src/views/other/Install.vue:141
+#: src/views/other/Install.vue:154
 msgid "Password (*)"
 msgstr "Password (*)"
 
@@ -2273,7 +2279,7 @@ msgstr "Password (*)"
 msgid "Password incorrect"
 msgstr "Password"
 
-#: src/views/other/Install.vue:70
+#: src/views/other/Install.vue:75
 msgid "Password length cannot exceed 20 characters"
 msgstr ""
 
@@ -2318,11 +2324,12 @@ msgstr ""
 msgid "Please enter the OTP code:"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:58
+#: src/components/SystemRestore/SystemRestoreContent.vue:77
 msgid "Please enter the security token"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:153
+#: src/components/SystemRestore/SystemRestoreContent.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:257
 msgid "Please enter the security token received during backup"
 msgstr ""
 
@@ -2372,15 +2379,15 @@ msgid ""
 "configuration."
 msgstr ""
 
-#: src/views/other/Install.vue:54
+#: src/views/other/Install.vue:59
 msgid "Please input your E-mail!"
 msgstr "Please input your E-mail!"
 
-#: src/views/other/Install.vue:66 src/views/other/Login.vue:47
+#: src/views/other/Install.vue:71 src/views/other/Login.vue:47
 msgid "Please input your password!"
 msgstr "Please input your password!"
 
-#: src/views/other/Install.vue:60 src/views/other/Login.vue:41
+#: src/views/other/Install.vue:65 src/views/other/Login.vue:41
 msgid "Please input your username!"
 msgstr "Please input your username!"
 
@@ -2393,7 +2400,7 @@ msgstr ""
 msgid "Please save this security token, you will need it for restoration:"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:53
+#: src/components/SystemRestore/SystemRestoreContent.vue:72
 #, fuzzy
 msgid "Please select a backup file"
 msgstr "Please input your username!"
@@ -2692,17 +2699,24 @@ msgstr ""
 msgid "Restarting"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:81
+#: src/components/SystemRestore/SystemRestoreContent.vue:100
 #, fuzzy
 msgid "Restore completed successfully"
 msgstr "Disabled successfully"
 
-#: src/views/system/Backup/SystemRestore.vue:165
+#: src/views/other/Install.vue:186
+#, fuzzy
+msgid "Restore from Backup"
+msgstr "Created at"
+
+#: src/components/SystemRestore/SystemRestoreContent.vue:193
+#: src/components/SystemRestore/SystemRestoreContent.vue:270
 #, fuzzy
 msgid "Restore Nginx Configuration"
 msgstr "Configuration Name"
 
-#: src/views/system/Backup/SystemRestore.vue:176
+#: src/components/SystemRestore/SystemRestoreContent.vue:204
+#: src/components/SystemRestore/SystemRestoreContent.vue:281
 #, fuzzy
 msgid "Restore Nginx UI Configuration"
 msgstr "Configuration Name"
@@ -2822,7 +2836,8 @@ msgstr ""
 msgid "Secret has been copied"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:150
+#: src/components/SystemRestore/SystemRestoreContent.vue:177
+#: src/components/SystemRestore/SystemRestoreContent.vue:254
 msgid "Security Token"
 msgstr ""
 
@@ -2980,7 +2995,8 @@ msgstr "Login"
 msgid "Stable"
 msgstr "Enabled"
 
-#: src/views/system/Backup/SystemRestore.vue:187
+#: src/components/SystemRestore/SystemRestoreContent.vue:216
+#: src/components/SystemRestore/SystemRestoreContent.vue:293
 msgid "Start Restore"
 msgstr ""
 
@@ -3037,7 +3053,8 @@ msgid ""
 "guide/nginx-proxy-example.html"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:140
+#: src/components/SystemRestore/SystemRestoreContent.vue:167
+#: src/components/SystemRestore/SystemRestoreContent.vue:244
 msgid "Supported file type: .zip"
 msgstr ""
 
@@ -3135,10 +3152,14 @@ msgstr ""
 msgid "System Initial User"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:117
+#: src/components/SystemRestore/SystemRestoreContent.vue:144
 msgid "System Restore"
 msgstr ""
 
+#: src/views/other/Install.vue:107
+msgid "System restored successfully. Please log in."
+msgstr ""
+
 #: src/constants/errors/self_check.ts:2
 #, fuzzy
 msgid "Task not found"
@@ -3162,7 +3183,7 @@ msgstr ""
 "The certificate for the domain will be checked every hour, and will be "
 "renewed if it has been more than 1 month since it was last issued."
 
-#: src/views/other/Install.vue:76
+#: src/views/other/Install.vue:81
 msgid "The filename cannot contain the following characters: %{c}"
 msgstr "The filename cannot contain the following characters: %{c}"
 
@@ -3300,13 +3321,15 @@ msgstr ""
 msgid "This value is already taken"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:169
+#: src/components/SystemRestore/SystemRestoreContent.vue:197
+#: src/components/SystemRestore/SystemRestoreContent.vue:274
 msgid ""
 "This will restore all Nginx configuration files. Nginx will restart after "
 "the restoration is complete."
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:208
+#: src/components/SystemRestore/SystemRestoreContent.vue:285
 msgid ""
 "This will restore configuration files and database. Nginx UI will restart "
 "after the restoration is complete."
@@ -3472,7 +3495,7 @@ msgstr ""
 msgid "Username"
 msgstr "Username"
 
-#: src/views/other/Install.vue:131
+#: src/views/other/Install.vue:144
 msgid "Username (*)"
 msgstr "Username (*)"
 
@@ -3483,7 +3506,8 @@ msgstr "Username (*)"
 msgid "Valid"
 msgstr "Invalid E-mail!"
 
-#: src/views/system/Backup/SystemRestore.vue:159
+#: src/components/SystemRestore/SystemRestoreContent.vue:186
+#: src/components/SystemRestore/SystemRestoreContent.vue:263
 msgid "Verify Backup File Integrity"
 msgstr ""
 
@@ -3529,7 +3553,8 @@ msgstr "Basic Mode"
 msgid "Warning"
 msgstr "Warning"
 
-#: src/views/system/Backup/SystemRestore.vue:121
+#: src/components/SystemRestore/SystemRestoreContent.vue:148
+#: src/components/SystemRestore/SystemRestoreContent.vue:225
 msgid ""
 "Warning: Restore operation will overwrite current configurations. Make sure "
 "you have a valid backup file and security token, and carefully select what "
diff --git a/app/src/language/es/app.po b/app/src/language/es/app.po
index 2f18460d..c0a11afd 100644
--- a/app/src/language/es/app.po
+++ b/app/src/language/es/app.po
@@ -257,7 +257,7 @@ msgstr "Renovación automática deshabilitada por %{name}"
 msgid "Auto-renewal enabled for %{name}"
 msgstr "Renovación automática habilitada por %{name}"
 
-#: src/views/system/Backup/SystemRestore.vue:92
+#: src/components/SystemRestore/SystemRestoreContent.vue:111
 msgid "Automatic Restart"
 msgstr ""
 
@@ -282,7 +282,7 @@ msgstr "Volver a la lista"
 msgid "Backup"
 msgstr "Volver"
 
-#: src/views/system/Backup/SystemRestore.vue:100
+#: src/components/SystemRestore/SystemRestoreContent.vue:119
 msgid "Backup file integrity check failed, it may have been tampered with"
 msgstr ""
 
@@ -498,7 +498,8 @@ msgstr "Borrar"
 msgid "Cleared successfully"
 msgstr "Limpiado exitoso"
 
-#: src/views/system/Backup/SystemRestore.vue:137
+#: src/components/SystemRestore/SystemRestoreContent.vue:164
+#: src/components/SystemRestore/SystemRestoreContent.vue:241
 msgid "Click or drag backup file to this area to upload"
 msgstr ""
 
@@ -668,7 +669,7 @@ msgstr ""
 msgid "Dashboard"
 msgstr "Panel"
 
-#: src/views/other/Install.vue:152
+#: src/views/other/Install.vue:165
 msgid "Database (Optional, default: database)"
 msgstr "Base de datos (Opcional, default: database)"
 
@@ -980,7 +981,7 @@ msgstr "Editar Transmisión"
 msgid "Email"
 msgstr "Correo"
 
-#: src/views/other/Install.vue:121
+#: src/views/other/Install.vue:134
 msgid "Email (*)"
 msgstr "Correo (*)"
 
@@ -1558,11 +1559,11 @@ msgstr "Ingrese el código de la aplicación:"
 msgid "Input the recovery code:"
 msgstr "Ingrese el código de recuperación:"
 
-#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:168
+#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:181
 msgid "Install"
 msgstr "Instalar"
 
-#: src/views/other/Install.vue:89
+#: src/views/other/Install.vue:94
 msgid "Install successfully"
 msgstr "Instalación exitosa"
 
@@ -1570,7 +1571,7 @@ msgstr "Instalación exitosa"
 msgid "Installation is not allowed after 10 minutes of system startup"
 msgstr ""
 
-#: src/views/other/Install.vue:113
+#: src/views/other/Install.vue:123
 msgid ""
 "Installation is not allowed after 10 minutes of system startup, please "
 "restart the Nginx UI."
@@ -1592,7 +1593,7 @@ msgstr ""
 msgid "Invalid AES key format: {0}"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:67
+#: src/components/SystemRestore/SystemRestoreContent.vue:86
 #, fuzzy
 msgid "Invalid file object"
 msgstr "Nombre de archivo inválido"
@@ -1896,6 +1897,11 @@ msgstr "Total recibido por la red"
 msgid "Network Total Send"
 msgstr "Total enviado por la red"
 
+#: src/views/other/Install.vue:129
+#, fuzzy
+msgid "New Installation"
+msgstr "Instalar"
+
 #: src/views/config/components/Rename.vue:72
 msgid "New name"
 msgstr "Nuevo nombre"
@@ -1951,7 +1957,7 @@ msgstr ""
 msgid "Nginx config directory is not set"
 msgstr "Lista blanca de directorios de registro de Nginx"
 
-#: src/views/system/Backup/SystemRestore.vue:84
+#: src/components/SystemRestore/SystemRestoreContent.vue:103
 #, fuzzy
 msgid "Nginx configuration has been restored"
 msgstr "Error de análisis de configuración de Nginx"
@@ -2013,12 +2019,12 @@ msgstr "Nginx reiniciado con éxito"
 msgid "Nginx UI already installed"
 msgstr "Este valor ya está elegido"
 
-#: src/views/system/Backup/SystemRestore.vue:88
+#: src/components/SystemRestore/SystemRestoreContent.vue:107
 #, fuzzy
 msgid "Nginx UI configuration has been restored"
 msgstr "Error de análisis de configuración de Nginx"
 
-#: src/views/system/Backup/SystemRestore.vue:93
+#: src/components/SystemRestore/SystemRestoreContent.vue:112
 #, fuzzy
 msgid ""
 "Nginx UI configuration has been restored and will restart automatically in a "
@@ -2123,6 +2129,7 @@ msgstr "Ok"
 #: src/components/ChatGPT/ChatGPT.vue:375
 #: src/components/Notification/Notification.vue:134
 #: src/components/StdDesign/StdDataDisplay/StdBulkActions.vue:95
+#: src/components/SystemRestore/SystemRestoreContent.vue:113
 #: src/views/notification/Notification.vue:38
 #: src/views/site/cert/components/ObtainCert.vue:139
 #: src/views/site/ngx_conf/NgxConfigEditor.vue:50
@@ -2133,7 +2140,6 @@ msgstr "Ok"
 #: src/views/stream/components/RightSettings.vue:50
 #: src/views/stream/StreamList.vue:164
 #: src/views/system/Backup/BackupCreator.vue:149
-#: src/views/system/Backup/SystemRestore.vue:94
 msgid "OK"
 msgstr "OK"
 
@@ -2148,7 +2154,7 @@ msgstr "Una vez que se complete la verificación, los registros se eliminarán."
 msgid "Online"
 msgstr "En línea"
 
-#: src/views/system/Backup/SystemRestore.vue:24
+#: src/components/SystemRestore/SystemRestoreContent.vue:43
 msgid "Only zip files are allowed"
 msgstr ""
 
@@ -2212,7 +2218,7 @@ msgstr ""
 msgid "Password"
 msgstr "Contraseña"
 
-#: src/views/other/Install.vue:141
+#: src/views/other/Install.vue:154
 msgid "Password (*)"
 msgstr "Contraseña (*)"
 
@@ -2221,7 +2227,7 @@ msgstr "Contraseña (*)"
 msgid "Password incorrect"
 msgstr "El nombre de usuario o contraseña son incorrectos"
 
-#: src/views/other/Install.vue:70
+#: src/views/other/Install.vue:75
 msgid "Password length cannot exceed 20 characters"
 msgstr ""
 
@@ -2268,12 +2274,13 @@ msgstr ""
 msgid "Please enter the OTP code:"
 msgstr "Por favor, ingrese el código 2FA:"
 
-#: src/views/system/Backup/SystemRestore.vue:58
+#: src/components/SystemRestore/SystemRestoreContent.vue:77
 #, fuzzy
 msgid "Please enter the security token"
 msgstr "Por favor, ingrese el código 2FA:"
 
-#: src/views/system/Backup/SystemRestore.vue:153
+#: src/components/SystemRestore/SystemRestoreContent.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:257
 msgid "Please enter the security token received during backup"
 msgstr ""
 
@@ -2330,15 +2337,15 @@ msgstr ""
 "Ingrese el nombre por favor, este se usará como el nombre de archivo de la "
 "nueva configuración."
 
-#: src/views/other/Install.vue:54
+#: src/views/other/Install.vue:59
 msgid "Please input your E-mail!"
 msgstr "¡Por favor ingrese su correo electrónico!"
 
-#: src/views/other/Install.vue:66 src/views/other/Login.vue:47
+#: src/views/other/Install.vue:71 src/views/other/Login.vue:47
 msgid "Please input your password!"
 msgstr "¡Por favor ingrese su contraseña!"
 
-#: src/views/other/Install.vue:60 src/views/other/Login.vue:41
+#: src/views/other/Install.vue:65 src/views/other/Login.vue:41
 msgid "Please input your username!"
 msgstr "¡Por favor ingrese su nombre de usuario!"
 
@@ -2353,7 +2360,7 @@ msgstr ""
 msgid "Please save this security token, you will need it for restoration:"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:53
+#: src/components/SystemRestore/SystemRestoreContent.vue:72
 #, fuzzy
 msgid "Please select a backup file"
 msgstr "¡Seleccione al menos un nodo!"
@@ -2638,17 +2645,24 @@ msgstr "Reiniciar"
 msgid "Restarting"
 msgstr "Reiniciando"
 
-#: src/views/system/Backup/SystemRestore.vue:81
+#: src/components/SystemRestore/SystemRestoreContent.vue:100
 #, fuzzy
 msgid "Restore completed successfully"
 msgstr "Borrado exitoso"
 
-#: src/views/system/Backup/SystemRestore.vue:165
+#: src/views/other/Install.vue:186
+#, fuzzy
+msgid "Restore from Backup"
+msgstr "Sistema"
+
+#: src/components/SystemRestore/SystemRestoreContent.vue:193
+#: src/components/SystemRestore/SystemRestoreContent.vue:270
 #, fuzzy
 msgid "Restore Nginx Configuration"
 msgstr "Error de análisis de configuración de Nginx"
 
-#: src/views/system/Backup/SystemRestore.vue:176
+#: src/components/SystemRestore/SystemRestoreContent.vue:204
+#: src/components/SystemRestore/SystemRestoreContent.vue:281
 #, fuzzy
 msgid "Restore Nginx UI Configuration"
 msgstr "Error de análisis de configuración de Nginx"
@@ -2768,7 +2782,8 @@ msgstr "SDK"
 msgid "Secret has been copied"
 msgstr "El secreto ha sido copiado"
 
-#: src/views/system/Backup/SystemRestore.vue:150
+#: src/components/SystemRestore/SystemRestoreContent.vue:177
+#: src/components/SystemRestore/SystemRestoreContent.vue:254
 msgid "Security Token"
 msgstr ""
 
@@ -2918,7 +2933,8 @@ msgstr "Acceso SSO"
 msgid "Stable"
 msgstr "Estable"
 
-#: src/views/system/Backup/SystemRestore.vue:187
+#: src/components/SystemRestore/SystemRestoreContent.vue:216
+#: src/components/SystemRestore/SystemRestoreContent.vue:293
 msgid "Start Restore"
 msgstr ""
 
@@ -2974,7 +2990,8 @@ msgid ""
 "guide/nginx-proxy-example.html"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:140
+#: src/components/SystemRestore/SystemRestoreContent.vue:167
+#: src/components/SystemRestore/SystemRestoreContent.vue:244
 msgid "Supported file type: .zip"
 msgstr ""
 
@@ -3067,11 +3084,15 @@ msgstr "Sistema"
 msgid "System Initial User"
 msgstr "Usuario inicial del sistema"
 
-#: src/views/system/Backup/SystemRestore.vue:117
+#: src/components/SystemRestore/SystemRestoreContent.vue:144
 #, fuzzy
 msgid "System Restore"
 msgstr "Sistema"
 
+#: src/views/other/Install.vue:107
+msgid "System restored successfully. Please log in."
+msgstr ""
+
 #: src/constants/errors/self_check.ts:2
 #, fuzzy
 msgid "Task not found"
@@ -3095,7 +3116,7 @@ msgstr ""
 "renovado si ha pasado más de 1 semana o el período que configuró en ajustes "
 "desde que fue emitido por última vez."
 
-#: src/views/other/Install.vue:76
+#: src/views/other/Install.vue:81
 msgid "The filename cannot contain the following characters: %{c}"
 msgstr ""
 "El nombre del archivo no puede contener los siguientes caracteres: %{c}"
@@ -3248,13 +3269,15 @@ msgstr ""
 msgid "This value is already taken"
 msgstr "Este valor ya está elegido"
 
-#: src/views/system/Backup/SystemRestore.vue:169
+#: src/components/SystemRestore/SystemRestoreContent.vue:197
+#: src/components/SystemRestore/SystemRestoreContent.vue:274
 msgid ""
 "This will restore all Nginx configuration files. Nginx will restart after "
 "the restoration is complete."
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:208
+#: src/components/SystemRestore/SystemRestoreContent.vue:285
 msgid ""
 "This will restore configuration files and database. Nginx UI will restart "
 "after the restoration is complete."
@@ -3432,7 +3455,7 @@ msgstr ""
 msgid "Username"
 msgstr "Nombre de usuario"
 
-#: src/views/other/Install.vue:131
+#: src/views/other/Install.vue:144
 msgid "Username (*)"
 msgstr "Nombre de usuario (*)"
 
@@ -3442,7 +3465,8 @@ msgstr "Nombre de usuario (*)"
 msgid "Valid"
 msgstr "Válido"
 
-#: src/views/system/Backup/SystemRestore.vue:159
+#: src/components/SystemRestore/SystemRestoreContent.vue:186
+#: src/components/SystemRestore/SystemRestoreContent.vue:263
 msgid "Verify Backup File Integrity"
 msgstr ""
 
@@ -3485,7 +3509,8 @@ msgstr "Ver"
 msgid "Warning"
 msgstr "Advertencia"
 
-#: src/views/system/Backup/SystemRestore.vue:121
+#: src/components/SystemRestore/SystemRestoreContent.vue:148
+#: src/components/SystemRestore/SystemRestoreContent.vue:225
 msgid ""
 "Warning: Restore operation will overwrite current configurations. Make sure "
 "you have a valid backup file and security token, and carefully select what "
diff --git a/app/src/language/fr_FR/app.po b/app/src/language/fr_FR/app.po
index 638a0907..461e3fb2 100644
--- a/app/src/language/fr_FR/app.po
+++ b/app/src/language/fr_FR/app.po
@@ -269,7 +269,7 @@ msgstr "Renouvellement automatique désactivé pour %{name}"
 msgid "Auto-renewal enabled for %{name}"
 msgstr "Renouvellement automatique activé pour %{name}"
 
-#: src/views/system/Backup/SystemRestore.vue:92
+#: src/components/SystemRestore/SystemRestoreContent.vue:111
 msgid "Automatic Restart"
 msgstr ""
 
@@ -294,7 +294,7 @@ msgstr "Retour à la liste"
 msgid "Backup"
 msgstr "Retour"
 
-#: src/views/system/Backup/SystemRestore.vue:100
+#: src/components/SystemRestore/SystemRestoreContent.vue:119
 msgid "Backup file integrity check failed, it may have been tampered with"
 msgstr ""
 
@@ -522,7 +522,8 @@ msgstr "Effacer"
 msgid "Cleared successfully"
 msgstr "Désactivé avec succès"
 
-#: src/views/system/Backup/SystemRestore.vue:137
+#: src/components/SystemRestore/SystemRestoreContent.vue:164
+#: src/components/SystemRestore/SystemRestoreContent.vue:241
 msgid "Click or drag backup file to this area to upload"
 msgstr ""
 
@@ -696,7 +697,7 @@ msgstr ""
 msgid "Dashboard"
 msgstr "Dashboard"
 
-#: src/views/other/Install.vue:152
+#: src/views/other/Install.vue:165
 msgid "Database (Optional, default: database)"
 msgstr "Base de données (Facultatif, par défaut : database)"
 
@@ -1025,7 +1026,7 @@ msgstr "Modifier le site"
 msgid "Email"
 msgstr "Email (*)"
 
-#: src/views/other/Install.vue:121
+#: src/views/other/Install.vue:134
 msgid "Email (*)"
 msgstr "Email (*)"
 
@@ -1623,11 +1624,11 @@ msgstr "Entrez le code de l'application :"
 msgid "Input the recovery code:"
 msgstr "Entrez le code de récupération :"
 
-#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:168
+#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:181
 msgid "Install"
 msgstr "Installer"
 
-#: src/views/other/Install.vue:89
+#: src/views/other/Install.vue:94
 msgid "Install successfully"
 msgstr "Installé avec succès"
 
@@ -1635,7 +1636,7 @@ msgstr "Installé avec succès"
 msgid "Installation is not allowed after 10 minutes of system startup"
 msgstr ""
 
-#: src/views/other/Install.vue:113
+#: src/views/other/Install.vue:123
 msgid ""
 "Installation is not allowed after 10 minutes of system startup, please "
 "restart the Nginx UI."
@@ -1659,7 +1660,7 @@ msgstr "Format de la requête invalide"
 msgid "Invalid AES key format: {0}"
 msgstr "Format de la requête invalide"
 
-#: src/views/system/Backup/SystemRestore.vue:67
+#: src/components/SystemRestore/SystemRestoreContent.vue:86
 #, fuzzy
 msgid "Invalid file object"
 msgstr "Nom de fichier invalide"
@@ -1975,6 +1976,11 @@ msgstr "Réception totale du réseau"
 msgid "Network Total Send"
 msgstr "Envoi total réseau"
 
+#: src/views/other/Install.vue:129
+#, fuzzy
+msgid "New Installation"
+msgstr "Installer"
+
 #: src/views/config/components/Rename.vue:72
 #, fuzzy
 msgid "New name"
@@ -2033,7 +2039,7 @@ msgstr ""
 msgid "Nginx config directory is not set"
 msgstr "Erreur d'analyse de configuration Nginx"
 
-#: src/views/system/Backup/SystemRestore.vue:84
+#: src/components/SystemRestore/SystemRestoreContent.vue:103
 #, fuzzy
 msgid "Nginx configuration has been restored"
 msgstr "Erreur d'analyse de configuration Nginx"
@@ -2096,12 +2102,12 @@ msgstr "Nginx a redémarré avec succès"
 msgid "Nginx UI already installed"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:88
+#: src/components/SystemRestore/SystemRestoreContent.vue:107
 #, fuzzy
 msgid "Nginx UI configuration has been restored"
 msgstr "Erreur d'analyse de configuration Nginx"
 
-#: src/views/system/Backup/SystemRestore.vue:93
+#: src/components/SystemRestore/SystemRestoreContent.vue:112
 #, fuzzy
 msgid ""
 "Nginx UI configuration has been restored and will restart automatically in a "
@@ -2204,6 +2210,7 @@ msgstr ""
 #: src/components/ChatGPT/ChatGPT.vue:375
 #: src/components/Notification/Notification.vue:134
 #: src/components/StdDesign/StdDataDisplay/StdBulkActions.vue:95
+#: src/components/SystemRestore/SystemRestoreContent.vue:113
 #: src/views/notification/Notification.vue:38
 #: src/views/site/cert/components/ObtainCert.vue:139
 #: src/views/site/ngx_conf/NgxConfigEditor.vue:50
@@ -2214,7 +2221,6 @@ msgstr ""
 #: src/views/stream/components/RightSettings.vue:50
 #: src/views/stream/StreamList.vue:164
 #: src/views/system/Backup/BackupCreator.vue:149
-#: src/views/system/Backup/SystemRestore.vue:94
 msgid "OK"
 msgstr "OK"
 
@@ -2229,7 +2235,7 @@ msgstr ""
 msgid "Online"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:24
+#: src/components/SystemRestore/SystemRestoreContent.vue:43
 msgid "Only zip files are allowed"
 msgstr ""
 
@@ -2288,7 +2294,7 @@ msgstr ""
 msgid "Password"
 msgstr "Mot de passe"
 
-#: src/views/other/Install.vue:141
+#: src/views/other/Install.vue:154
 msgid "Password (*)"
 msgstr "Mot de passe (*)"
 
@@ -2297,7 +2303,7 @@ msgstr "Mot de passe (*)"
 msgid "Password incorrect"
 msgstr "Le pseudo ou mot de passe est incorect"
 
-#: src/views/other/Install.vue:70
+#: src/views/other/Install.vue:75
 msgid "Password length cannot exceed 20 characters"
 msgstr ""
 
@@ -2341,11 +2347,12 @@ msgstr ""
 msgid "Please enter the OTP code:"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:58
+#: src/components/SystemRestore/SystemRestoreContent.vue:77
 msgid "Please enter the security token"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:153
+#: src/components/SystemRestore/SystemRestoreContent.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:257
 msgid "Please enter the security token received during backup"
 msgstr ""
 
@@ -2402,15 +2409,15 @@ msgstr ""
 "Veuillez entrer le nom, il sera utilisé comme nom de fichier de la nouvelle "
 "configuration."
 
-#: src/views/other/Install.vue:54
+#: src/views/other/Install.vue:59
 msgid "Please input your E-mail!"
 msgstr "Veuillez saisir votre e-mail !"
 
-#: src/views/other/Install.vue:66 src/views/other/Login.vue:47
+#: src/views/other/Install.vue:71 src/views/other/Login.vue:47
 msgid "Please input your password!"
 msgstr "Veuillez saisir votre mot de passe !"
 
-#: src/views/other/Install.vue:60 src/views/other/Login.vue:41
+#: src/views/other/Install.vue:65 src/views/other/Login.vue:41
 msgid "Please input your username!"
 msgstr "Veuillez saisir votre nom d'utilisateur !"
 
@@ -2423,7 +2430,7 @@ msgstr ""
 msgid "Please save this security token, you will need it for restoration:"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:53
+#: src/components/SystemRestore/SystemRestoreContent.vue:72
 #, fuzzy
 msgid "Please select a backup file"
 msgstr "Veuillez renseigner un nom de fichier"
@@ -2725,17 +2732,24 @@ msgstr "Redémarrer"
 msgid "Restarting"
 msgstr "Redémarrage"
 
-#: src/views/system/Backup/SystemRestore.vue:81
+#: src/components/SystemRestore/SystemRestoreContent.vue:100
 #, fuzzy
 msgid "Restore completed successfully"
 msgstr "Désactivé avec succès"
 
-#: src/views/system/Backup/SystemRestore.vue:165
+#: src/views/other/Install.vue:186
+#, fuzzy
+msgid "Restore from Backup"
+msgstr "Système"
+
+#: src/components/SystemRestore/SystemRestoreContent.vue:193
+#: src/components/SystemRestore/SystemRestoreContent.vue:270
 #, fuzzy
 msgid "Restore Nginx Configuration"
 msgstr "Erreur d'analyse de configuration Nginx"
 
-#: src/views/system/Backup/SystemRestore.vue:176
+#: src/components/SystemRestore/SystemRestoreContent.vue:204
+#: src/components/SystemRestore/SystemRestoreContent.vue:281
 #, fuzzy
 msgid "Restore Nginx UI Configuration"
 msgstr "Erreur d'analyse de configuration Nginx"
@@ -2853,7 +2867,8 @@ msgstr ""
 msgid "Secret has been copied"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:150
+#: src/components/SystemRestore/SystemRestoreContent.vue:177
+#: src/components/SystemRestore/SystemRestoreContent.vue:254
 msgid "Security Token"
 msgstr ""
 
@@ -3009,7 +3024,8 @@ msgstr "Connexion"
 msgid "Stable"
 msgstr "Tableau"
 
-#: src/views/system/Backup/SystemRestore.vue:187
+#: src/components/SystemRestore/SystemRestoreContent.vue:216
+#: src/components/SystemRestore/SystemRestoreContent.vue:293
 msgid "Start Restore"
 msgstr ""
 
@@ -3066,7 +3082,8 @@ msgid ""
 "guide/nginx-proxy-example.html"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:140
+#: src/components/SystemRestore/SystemRestoreContent.vue:167
+#: src/components/SystemRestore/SystemRestoreContent.vue:244
 msgid "Supported file type: .zip"
 msgstr ""
 
@@ -3166,11 +3183,15 @@ msgstr "Système"
 msgid "System Initial User"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:117
+#: src/components/SystemRestore/SystemRestoreContent.vue:144
 #, fuzzy
 msgid "System Restore"
 msgstr "Système"
 
+#: src/views/other/Install.vue:107
+msgid "System restored successfully. Please log in."
+msgstr ""
+
 #: src/constants/errors/self_check.ts:2
 #, fuzzy
 msgid "Task not found"
@@ -3194,7 +3215,7 @@ msgstr ""
 "Le certificat du domaine sera vérifié toutes les heures et sera renouvelé "
 "s'il s'est écoulé plus d'une semaine depuis sa dernière émission."
 
-#: src/views/other/Install.vue:76
+#: src/views/other/Install.vue:81
 msgid "The filename cannot contain the following characters: %{c}"
 msgstr "Le nom de fichier ne peut pas contenir les caractères suivants : %{c}"
 
@@ -3335,13 +3356,15 @@ msgstr ""
 msgid "This value is already taken"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:169
+#: src/components/SystemRestore/SystemRestoreContent.vue:197
+#: src/components/SystemRestore/SystemRestoreContent.vue:274
 msgid ""
 "This will restore all Nginx configuration files. Nginx will restart after "
 "the restoration is complete."
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:208
+#: src/components/SystemRestore/SystemRestoreContent.vue:285
 msgid ""
 "This will restore configuration files and database. Nginx UI will restart "
 "after the restoration is complete."
@@ -3509,7 +3532,7 @@ msgstr ""
 msgid "Username"
 msgstr "Nom d'utilisateur"
 
-#: src/views/other/Install.vue:131
+#: src/views/other/Install.vue:144
 msgid "Username (*)"
 msgstr "Nom d'utilisateur (*)"
 
@@ -3519,7 +3542,8 @@ msgstr "Nom d'utilisateur (*)"
 msgid "Valid"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:159
+#: src/components/SystemRestore/SystemRestoreContent.vue:186
+#: src/components/SystemRestore/SystemRestoreContent.vue:263
 msgid "Verify Backup File Integrity"
 msgstr ""
 
@@ -3564,7 +3588,8 @@ msgstr "Voir"
 msgid "Warning"
 msgstr "Avertissement"
 
-#: src/views/system/Backup/SystemRestore.vue:121
+#: src/components/SystemRestore/SystemRestoreContent.vue:148
+#: src/components/SystemRestore/SystemRestoreContent.vue:225
 msgid ""
 "Warning: Restore operation will overwrite current configurations. Make sure "
 "you have a valid backup file and security token, and carefully select what "
diff --git a/app/src/language/ko_KR/app.po b/app/src/language/ko_KR/app.po
index 57afb67d..44a3dc36 100644
--- a/app/src/language/ko_KR/app.po
+++ b/app/src/language/ko_KR/app.po
@@ -254,7 +254,7 @@ msgstr "%{name}에 대한 자동 갱신 비활성화됨"
 msgid "Auto-renewal enabled for %{name}"
 msgstr "%{name}에 대한 자동 갱신 활성화됨"
 
-#: src/views/system/Backup/SystemRestore.vue:92
+#: src/components/SystemRestore/SystemRestoreContent.vue:111
 msgid "Automatic Restart"
 msgstr ""
 
@@ -279,7 +279,7 @@ msgstr "목록으로 돌아가기"
 msgid "Backup"
 msgstr "뒤로"
 
-#: src/views/system/Backup/SystemRestore.vue:100
+#: src/components/SystemRestore/SystemRestoreContent.vue:119
 msgid "Backup file integrity check failed, it may have been tampered with"
 msgstr ""
 
@@ -495,7 +495,8 @@ msgstr "클리어"
 msgid "Cleared successfully"
 msgstr "성공적으로 제거됨"
 
-#: src/views/system/Backup/SystemRestore.vue:137
+#: src/components/SystemRestore/SystemRestoreContent.vue:164
+#: src/components/SystemRestore/SystemRestoreContent.vue:241
 msgid "Click or drag backup file to this area to upload"
 msgstr ""
 
@@ -664,7 +665,7 @@ msgstr ""
 msgid "Dashboard"
 msgstr "대시보드"
 
-#: src/views/other/Install.vue:152
+#: src/views/other/Install.vue:165
 msgid "Database (Optional, default: database)"
 msgstr "데이터베이스 (선택사항, 기본값: database)"
 
@@ -977,7 +978,7 @@ msgstr "스트림 편집"
 msgid "Email"
 msgstr "이메일 (*)"
 
-#: src/views/other/Install.vue:121
+#: src/views/other/Install.vue:134
 msgid "Email (*)"
 msgstr "이메일 (*)"
 
@@ -1553,11 +1554,11 @@ msgstr ""
 msgid "Input the recovery code:"
 msgstr ""
 
-#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:168
+#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:181
 msgid "Install"
 msgstr "설치"
 
-#: src/views/other/Install.vue:89
+#: src/views/other/Install.vue:94
 #, fuzzy
 msgid "Install successfully"
 msgstr "성공적으로 활성화됨"
@@ -1566,7 +1567,7 @@ msgstr "성공적으로 활성화됨"
 msgid "Installation is not allowed after 10 minutes of system startup"
 msgstr ""
 
-#: src/views/other/Install.vue:113
+#: src/views/other/Install.vue:123
 msgid ""
 "Installation is not allowed after 10 minutes of system startup, please "
 "restart the Nginx UI."
@@ -1589,7 +1590,7 @@ msgstr ""
 msgid "Invalid AES key format: {0}"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:67
+#: src/components/SystemRestore/SystemRestoreContent.vue:86
 #, fuzzy
 msgid "Invalid file object"
 msgstr "Invalid E-mail!"
@@ -1908,6 +1909,11 @@ msgstr "네트워크 총 수신"
 msgid "Network Total Send"
 msgstr "네트워크 총 송신"
 
+#: src/views/other/Install.vue:129
+#, fuzzy
+msgid "New Installation"
+msgstr "설치"
+
 #: src/views/config/components/Rename.vue:72
 #, fuzzy
 msgid "New name"
@@ -1965,7 +1971,7 @@ msgstr ""
 msgid "Nginx config directory is not set"
 msgstr "Nginx 구성 오류름"
 
-#: src/views/system/Backup/SystemRestore.vue:84
+#: src/components/SystemRestore/SystemRestoreContent.vue:103
 #, fuzzy
 msgid "Nginx configuration has been restored"
 msgstr "Nginx 구성 오류름"
@@ -2029,12 +2035,12 @@ msgstr "Nginx가 성공적으로 재시작됨"
 msgid "Nginx UI already installed"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:88
+#: src/components/SystemRestore/SystemRestoreContent.vue:107
 #, fuzzy
 msgid "Nginx UI configuration has been restored"
 msgstr "Nginx 구성 오류름"
 
-#: src/views/system/Backup/SystemRestore.vue:93
+#: src/components/SystemRestore/SystemRestoreContent.vue:112
 #, fuzzy
 msgid ""
 "Nginx UI configuration has been restored and will restart automatically in a "
@@ -2137,6 +2143,7 @@ msgstr ""
 #: src/components/ChatGPT/ChatGPT.vue:375
 #: src/components/Notification/Notification.vue:134
 #: src/components/StdDesign/StdDataDisplay/StdBulkActions.vue:95
+#: src/components/SystemRestore/SystemRestoreContent.vue:113
 #: src/views/notification/Notification.vue:38
 #: src/views/site/cert/components/ObtainCert.vue:139
 #: src/views/site/ngx_conf/NgxConfigEditor.vue:50
@@ -2147,7 +2154,6 @@ msgstr ""
 #: src/views/stream/components/RightSettings.vue:50
 #: src/views/stream/StreamList.vue:164
 #: src/views/system/Backup/BackupCreator.vue:149
-#: src/views/system/Backup/SystemRestore.vue:94
 msgid "OK"
 msgstr "확인"
 
@@ -2162,7 +2168,7 @@ msgstr "검증이 완료되면, 레코드는 제거됩니다."
 msgid "Online"
 msgstr "온라인"
 
-#: src/views/system/Backup/SystemRestore.vue:24
+#: src/components/SystemRestore/SystemRestoreContent.vue:43
 msgid "Only zip files are allowed"
 msgstr ""
 
@@ -2222,7 +2228,7 @@ msgstr ""
 msgid "Password"
 msgstr "비밀번호"
 
-#: src/views/other/Install.vue:141
+#: src/views/other/Install.vue:154
 msgid "Password (*)"
 msgstr "비밀번호 (*)"
 
@@ -2231,7 +2237,7 @@ msgstr "비밀번호 (*)"
 msgid "Password incorrect"
 msgstr "사용자 이름 또는 비밀번호가 올바르지 않습니다"
 
-#: src/views/other/Install.vue:70
+#: src/views/other/Install.vue:75
 msgid "Password length cannot exceed 20 characters"
 msgstr ""
 
@@ -2275,11 +2281,12 @@ msgstr ""
 msgid "Please enter the OTP code:"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:58
+#: src/components/SystemRestore/SystemRestoreContent.vue:77
 msgid "Please enter the security token"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:153
+#: src/components/SystemRestore/SystemRestoreContent.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:257
 msgid "Please enter the security token received during backup"
 msgstr ""
 
@@ -2332,15 +2339,15 @@ msgid ""
 "configuration."
 msgstr "이름을 입력해주세요, 이것은 새 구성의 파일 이름으로 사용될 것입니다!"
 
-#: src/views/other/Install.vue:54
+#: src/views/other/Install.vue:59
 msgid "Please input your E-mail!"
 msgstr "이메일을 입력해주세요!"
 
-#: src/views/other/Install.vue:66 src/views/other/Login.vue:47
+#: src/views/other/Install.vue:71 src/views/other/Login.vue:47
 msgid "Please input your password!"
 msgstr "비밀번호를 입력해주세요!"
 
-#: src/views/other/Install.vue:60 src/views/other/Login.vue:41
+#: src/views/other/Install.vue:65 src/views/other/Login.vue:41
 msgid "Please input your username!"
 msgstr "사용자 이름을 입력해주세요!"
 
@@ -2353,7 +2360,7 @@ msgstr "아래의 시간 설정 단위는 모두 초 단위임을 유의해주
 msgid "Please save this security token, you will need it for restoration:"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:53
+#: src/components/SystemRestore/SystemRestoreContent.vue:72
 #, fuzzy
 msgid "Please select a backup file"
 msgstr "적어도 하나의 노드를 선택해주세요!"
@@ -2655,17 +2662,24 @@ msgstr "재시작"
 msgid "Restarting"
 msgstr "재시작 중"
 
-#: src/views/system/Backup/SystemRestore.vue:81
+#: src/components/SystemRestore/SystemRestoreContent.vue:100
 #, fuzzy
 msgid "Restore completed successfully"
 msgstr "성공적으로 삭제됨"
 
-#: src/views/system/Backup/SystemRestore.vue:165
+#: src/views/other/Install.vue:186
+#, fuzzy
+msgid "Restore from Backup"
+msgstr "시스템"
+
+#: src/components/SystemRestore/SystemRestoreContent.vue:193
+#: src/components/SystemRestore/SystemRestoreContent.vue:270
 #, fuzzy
 msgid "Restore Nginx Configuration"
 msgstr "Nginx 구성 오류름"
 
-#: src/views/system/Backup/SystemRestore.vue:176
+#: src/components/SystemRestore/SystemRestoreContent.vue:204
+#: src/components/SystemRestore/SystemRestoreContent.vue:281
 #, fuzzy
 msgid "Restore Nginx UI Configuration"
 msgstr "Nginx 구성 오류름"
@@ -2785,7 +2799,8 @@ msgstr ""
 msgid "Secret has been copied"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:150
+#: src/components/SystemRestore/SystemRestoreContent.vue:177
+#: src/components/SystemRestore/SystemRestoreContent.vue:254
 msgid "Security Token"
 msgstr ""
 
@@ -2938,7 +2953,8 @@ msgstr "SSO 로그인"
 msgid "Stable"
 msgstr "활성화됨"
 
-#: src/views/system/Backup/SystemRestore.vue:187
+#: src/components/SystemRestore/SystemRestoreContent.vue:216
+#: src/components/SystemRestore/SystemRestoreContent.vue:293
 msgid "Start Restore"
 msgstr ""
 
@@ -2994,7 +3010,8 @@ msgid ""
 "guide/nginx-proxy-example.html"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:140
+#: src/components/SystemRestore/SystemRestoreContent.vue:167
+#: src/components/SystemRestore/SystemRestoreContent.vue:244
 msgid "Supported file type: .zip"
 msgstr ""
 
@@ -3092,11 +3109,15 @@ msgstr "시스템"
 msgid "System Initial User"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:117
+#: src/components/SystemRestore/SystemRestoreContent.vue:144
 #, fuzzy
 msgid "System Restore"
 msgstr "시스템"
 
+#: src/views/other/Install.vue:107
+msgid "System restored successfully. Please log in."
+msgstr ""
+
 #: src/constants/errors/self_check.ts:2
 #, fuzzy
 msgid "Task not found"
@@ -3120,7 +3141,7 @@ msgstr ""
 "도메인의 인증서는 매 시간 확인되며,마지막으로 발급된 지 1개월이 경과한 경우 "
 "갱신됩니다."
 
-#: src/views/other/Install.vue:76
+#: src/views/other/Install.vue:81
 msgid "The filename cannot contain the following characters: %{c}"
 msgstr "파일 이름은 다음 문자를 포함할 수 없습니다: %{c}"
 
@@ -3259,13 +3280,15 @@ msgstr ""
 msgid "This value is already taken"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:169
+#: src/components/SystemRestore/SystemRestoreContent.vue:197
+#: src/components/SystemRestore/SystemRestoreContent.vue:274
 msgid ""
 "This will restore all Nginx configuration files. Nginx will restart after "
 "the restoration is complete."
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:208
+#: src/components/SystemRestore/SystemRestoreContent.vue:285
 msgid ""
 "This will restore configuration files and database. Nginx UI will restart "
 "after the restoration is complete."
@@ -3433,7 +3456,7 @@ msgstr ""
 msgid "Username"
 msgstr "사용자 이름"
 
-#: src/views/other/Install.vue:131
+#: src/views/other/Install.vue:144
 msgid "Username (*)"
 msgstr "사용자 이름 (*)"
 
@@ -3443,7 +3466,8 @@ msgstr "사용자 이름 (*)"
 msgid "Valid"
 msgstr "유효함"
 
-#: src/views/system/Backup/SystemRestore.vue:159
+#: src/components/SystemRestore/SystemRestoreContent.vue:186
+#: src/components/SystemRestore/SystemRestoreContent.vue:263
 msgid "Verify Backup File Integrity"
 msgstr ""
 
@@ -3489,7 +3513,8 @@ msgstr "보기"
 msgid "Warning"
 msgstr "경고"
 
-#: src/views/system/Backup/SystemRestore.vue:121
+#: src/components/SystemRestore/SystemRestoreContent.vue:148
+#: src/components/SystemRestore/SystemRestoreContent.vue:225
 msgid ""
 "Warning: Restore operation will overwrite current configurations. Make sure "
 "you have a valid backup file and security token, and carefully select what "
diff --git a/app/src/language/messages.pot b/app/src/language/messages.pot
index fd9353aa..97c0c639 100644
--- a/app/src/language/messages.pot
+++ b/app/src/language/messages.pot
@@ -240,7 +240,7 @@ msgstr ""
 msgid "Auto-renewal enabled for %{name}"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:92
+#: src/components/SystemRestore/SystemRestoreContent.vue:111
 msgid "Automatic Restart"
 msgstr ""
 
@@ -266,7 +266,7 @@ msgstr ""
 msgid "Backup"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:100
+#: src/components/SystemRestore/SystemRestoreContent.vue:119
 msgid "Backup file integrity check failed, it may have been tampered with"
 msgstr ""
 
@@ -469,7 +469,8 @@ msgstr ""
 msgid "Cleared successfully"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:137
+#: src/components/SystemRestore/SystemRestoreContent.vue:164
+#: src/components/SystemRestore/SystemRestoreContent.vue:241
 msgid "Click or drag backup file to this area to upload"
 msgstr ""
 
@@ -633,7 +634,7 @@ msgstr ""
 msgid "Dashboard"
 msgstr ""
 
-#: src/views/other/Install.vue:152
+#: src/views/other/Install.vue:165
 msgid "Database (Optional, default: database)"
 msgstr ""
 
@@ -932,7 +933,7 @@ msgstr ""
 msgid "Email"
 msgstr ""
 
-#: src/views/other/Install.vue:121
+#: src/views/other/Install.vue:134
 msgid "Email (*)"
 msgstr ""
 
@@ -1462,11 +1463,11 @@ msgid "Input the recovery code:"
 msgstr ""
 
 #: src/routes/modules/auth.ts:8
-#: src/views/other/Install.vue:168
+#: src/views/other/Install.vue:181
 msgid "Install"
 msgstr ""
 
-#: src/views/other/Install.vue:89
+#: src/views/other/Install.vue:94
 msgid "Install successfully"
 msgstr ""
 
@@ -1474,7 +1475,7 @@ msgstr ""
 msgid "Installation is not allowed after 10 minutes of system startup"
 msgstr ""
 
-#: src/views/other/Install.vue:113
+#: src/views/other/Install.vue:123
 msgid "Installation is not allowed after 10 minutes of system startup, please restart the Nginx UI."
 msgstr ""
 
@@ -1494,7 +1495,7 @@ msgstr ""
 msgid "Invalid AES key format: {0}"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:67
+#: src/components/SystemRestore/SystemRestoreContent.vue:86
 msgid "Invalid file object"
 msgstr ""
 
@@ -1781,6 +1782,10 @@ msgstr ""
 msgid "Network Total Send"
 msgstr ""
 
+#: src/views/other/Install.vue:129
+msgid "New Installation"
+msgstr ""
+
 #: src/views/config/components/Rename.vue:72
 msgid "New name"
 msgstr ""
@@ -1835,7 +1840,7 @@ msgstr ""
 msgid "Nginx config directory is not set"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:84
+#: src/components/SystemRestore/SystemRestoreContent.vue:103
 msgid "Nginx configuration has been restored"
 msgstr ""
 
@@ -1893,11 +1898,11 @@ msgstr ""
 msgid "Nginx UI already installed"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:88
+#: src/components/SystemRestore/SystemRestoreContent.vue:107
 msgid "Nginx UI configuration has been restored"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:93
+#: src/components/SystemRestore/SystemRestoreContent.vue:112
 msgid "Nginx UI configuration has been restored and will restart automatically in a few seconds."
 msgstr ""
 
@@ -1989,6 +1994,7 @@ msgstr ""
 #: src/components/ChatGPT/ChatGPT.vue:375
 #: src/components/Notification/Notification.vue:134
 #: src/components/StdDesign/StdDataDisplay/StdBulkActions.vue:95
+#: src/components/SystemRestore/SystemRestoreContent.vue:113
 #: src/views/notification/Notification.vue:38
 #: src/views/site/cert/components/ObtainCert.vue:139
 #: src/views/site/ngx_conf/NgxConfigEditor.vue:50
@@ -1999,7 +2005,6 @@ msgstr ""
 #: src/views/stream/components/RightSettings.vue:50
 #: src/views/stream/StreamList.vue:164
 #: src/views/system/Backup/BackupCreator.vue:149
-#: src/views/system/Backup/SystemRestore.vue:94
 msgid "OK"
 msgstr ""
 
@@ -2014,7 +2019,7 @@ msgstr ""
 msgid "Online"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:24
+#: src/components/SystemRestore/SystemRestoreContent.vue:43
 msgid "Only zip files are allowed"
 msgstr ""
 
@@ -2072,7 +2077,7 @@ msgstr ""
 msgid "Password"
 msgstr ""
 
-#: src/views/other/Install.vue:141
+#: src/views/other/Install.vue:154
 msgid "Password (*)"
 msgstr ""
 
@@ -2080,7 +2085,7 @@ msgstr ""
 msgid "Password incorrect"
 msgstr ""
 
-#: src/views/other/Install.vue:70
+#: src/views/other/Install.vue:75
 msgid "Password length cannot exceed 20 characters"
 msgstr ""
 
@@ -2123,11 +2128,12 @@ msgstr ""
 msgid "Please enter the OTP code:"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:58
+#: src/components/SystemRestore/SystemRestoreContent.vue:77
 msgid "Please enter the security token"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:153
+#: src/components/SystemRestore/SystemRestoreContent.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:257
 msgid "Please enter the security token received during backup"
 msgstr ""
 
@@ -2165,16 +2171,16 @@ msgstr ""
 msgid "Please input name, this will be used as the filename of the new configuration."
 msgstr ""
 
-#: src/views/other/Install.vue:54
+#: src/views/other/Install.vue:59
 msgid "Please input your E-mail!"
 msgstr ""
 
-#: src/views/other/Install.vue:66
+#: src/views/other/Install.vue:71
 #: src/views/other/Login.vue:47
 msgid "Please input your password!"
 msgstr ""
 
-#: src/views/other/Install.vue:60
+#: src/views/other/Install.vue:65
 #: src/views/other/Login.vue:41
 msgid "Please input your username!"
 msgstr ""
@@ -2187,7 +2193,7 @@ msgstr ""
 msgid "Please save this security token, you will need it for restoration:"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:53
+#: src/components/SystemRestore/SystemRestoreContent.vue:72
 msgid "Please select a backup file"
 msgstr ""
 
@@ -2457,15 +2463,21 @@ msgstr ""
 msgid "Restarting"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:81
+#: src/components/SystemRestore/SystemRestoreContent.vue:100
 msgid "Restore completed successfully"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:165
+#: src/views/other/Install.vue:186
+msgid "Restore from Backup"
+msgstr ""
+
+#: src/components/SystemRestore/SystemRestoreContent.vue:193
+#: src/components/SystemRestore/SystemRestoreContent.vue:270
 msgid "Restore Nginx Configuration"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:176
+#: src/components/SystemRestore/SystemRestoreContent.vue:204
+#: src/components/SystemRestore/SystemRestoreContent.vue:281
 msgid "Restore Nginx UI Configuration"
 msgstr ""
 
@@ -2576,7 +2588,8 @@ msgstr ""
 msgid "Secret has been copied"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:150
+#: src/components/SystemRestore/SystemRestoreContent.vue:177
+#: src/components/SystemRestore/SystemRestoreContent.vue:254
 msgid "Security Token"
 msgstr ""
 
@@ -2714,7 +2727,8 @@ msgstr ""
 msgid "Stable"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:187
+#: src/components/SystemRestore/SystemRestoreContent.vue:216
+#: src/components/SystemRestore/SystemRestoreContent.vue:293
 msgid "Start Restore"
 msgstr ""
 
@@ -2764,7 +2778,8 @@ msgstr ""
 msgid "Support communication with the backend through the WebSocket protocol. If your Nginx UI is being used via an Nginx reverse proxy, please refer to this link to write the corresponding configuration file: https://nginxui.com/guide/nginx-proxy-example.html"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:140
+#: src/components/SystemRestore/SystemRestoreContent.vue:167
+#: src/components/SystemRestore/SystemRestoreContent.vue:244
 msgid "Supported file type: .zip"
 msgstr ""
 
@@ -2855,10 +2870,14 @@ msgstr ""
 msgid "System Initial User"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:117
+#: src/components/SystemRestore/SystemRestoreContent.vue:144
 msgid "System Restore"
 msgstr ""
 
+#: src/views/other/Install.vue:107
+msgid "System restored successfully. Please log in."
+msgstr ""
+
 #: src/constants/errors/self_check.ts:2
 msgid "Task not found"
 msgstr ""
@@ -2876,7 +2895,7 @@ msgstr ""
 msgid "The certificate for the domain will be checked 30 minutes, and will be renewed if it has been more than 1 week or the period you set in settings since it was last issued."
 msgstr ""
 
-#: src/views/other/Install.vue:76
+#: src/views/other/Install.vue:81
 msgid "The filename cannot contain the following characters: %{c}"
 msgstr ""
 
@@ -2985,11 +3004,13 @@ msgstr ""
 msgid "This value is already taken"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:169
+#: src/components/SystemRestore/SystemRestoreContent.vue:197
+#: src/components/SystemRestore/SystemRestoreContent.vue:274
 msgid "This will restore all Nginx configuration files. Nginx will restart after the restoration is complete."
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:208
+#: src/components/SystemRestore/SystemRestoreContent.vue:285
 msgid "This will restore configuration files and database. Nginx UI will restart after the restoration is complete."
 msgstr ""
 
@@ -3137,7 +3158,7 @@ msgstr ""
 msgid "Username"
 msgstr ""
 
-#: src/views/other/Install.vue:131
+#: src/views/other/Install.vue:144
 msgid "Username (*)"
 msgstr ""
 
@@ -3147,7 +3168,8 @@ msgstr ""
 msgid "Valid"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:159
+#: src/components/SystemRestore/SystemRestoreContent.vue:186
+#: src/components/SystemRestore/SystemRestoreContent.vue:263
 msgid "Verify Backup File Integrity"
 msgstr ""
 
@@ -3189,7 +3211,8 @@ msgstr ""
 msgid "Warning"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:121
+#: src/components/SystemRestore/SystemRestoreContent.vue:148
+#: src/components/SystemRestore/SystemRestoreContent.vue:225
 msgid "Warning: Restore operation will overwrite current configurations. Make sure you have a valid backup file and security token, and carefully select what to restore."
 msgstr ""
 
diff --git a/app/src/language/ru_RU/app.po b/app/src/language/ru_RU/app.po
index 74064bd3..ce7f1e81 100644
--- a/app/src/language/ru_RU/app.po
+++ b/app/src/language/ru_RU/app.po
@@ -250,7 +250,7 @@ msgstr "Автообновление отключено для %{name}"
 msgid "Auto-renewal enabled for %{name}"
 msgstr "Автообновление включено для %{name}"
 
-#: src/views/system/Backup/SystemRestore.vue:92
+#: src/components/SystemRestore/SystemRestoreContent.vue:111
 msgid "Automatic Restart"
 msgstr ""
 
@@ -275,7 +275,7 @@ msgstr "Возврат к списку"
 msgid "Backup"
 msgstr "Назад"
 
-#: src/views/system/Backup/SystemRestore.vue:100
+#: src/components/SystemRestore/SystemRestoreContent.vue:119
 msgid "Backup file integrity check failed, it may have been tampered with"
 msgstr ""
 
@@ -485,7 +485,8 @@ msgstr "Очистить"
 msgid "Cleared successfully"
 msgstr "Очищено успешно"
 
-#: src/views/system/Backup/SystemRestore.vue:137
+#: src/components/SystemRestore/SystemRestoreContent.vue:164
+#: src/components/SystemRestore/SystemRestoreContent.vue:241
 msgid "Click or drag backup file to this area to upload"
 msgstr ""
 
@@ -653,7 +654,7 @@ msgstr "Настройте имя локального сервера для о
 msgid "Dashboard"
 msgstr "Доска"
 
-#: src/views/other/Install.vue:152
+#: src/views/other/Install.vue:165
 msgid "Database (Optional, default: database)"
 msgstr "База данных (Опционально, по умолчанию: database)"
 
@@ -966,7 +967,7 @@ msgstr "Редактировать поток"
 msgid "Email"
 msgstr "Электронная почта"
 
-#: src/views/other/Install.vue:121
+#: src/views/other/Install.vue:134
 msgid "Email (*)"
 msgstr "Email (*)"
 
@@ -1540,11 +1541,11 @@ msgstr "Введите код из приложения:"
 msgid "Input the recovery code:"
 msgstr "Введите код восстановления:"
 
-#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:168
+#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:181
 msgid "Install"
 msgstr "Установить"
 
-#: src/views/other/Install.vue:89
+#: src/views/other/Install.vue:94
 msgid "Install successfully"
 msgstr "Установка прошла успешно"
 
@@ -1552,7 +1553,7 @@ msgstr "Установка прошла успешно"
 msgid "Installation is not allowed after 10 minutes of system startup"
 msgstr ""
 
-#: src/views/other/Install.vue:113
+#: src/views/other/Install.vue:123
 msgid ""
 "Installation is not allowed after 10 minutes of system startup, please "
 "restart the Nginx UI."
@@ -1574,7 +1575,7 @@ msgstr ""
 msgid "Invalid AES key format: {0}"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:67
+#: src/components/SystemRestore/SystemRestoreContent.vue:86
 #, fuzzy
 msgid "Invalid file object"
 msgstr "Неверное имя файла"
@@ -1875,6 +1876,11 @@ msgstr "Всего получено"
 msgid "Network Total Send"
 msgstr "Всего отправлено"
 
+#: src/views/other/Install.vue:129
+#, fuzzy
+msgid "New Installation"
+msgstr "Установить"
+
 #: src/views/config/components/Rename.vue:72
 msgid "New name"
 msgstr "Новое имя"
@@ -1930,7 +1936,7 @@ msgstr ""
 msgid "Nginx config directory is not set"
 msgstr "Белый список директорий для логов Nginx"
 
-#: src/views/system/Backup/SystemRestore.vue:84
+#: src/components/SystemRestore/SystemRestoreContent.vue:103
 #, fuzzy
 msgid "Nginx configuration has been restored"
 msgstr "Ошибка разбора конфигурации Nginx"
@@ -1991,12 +1997,12 @@ msgstr "Nginx успешно перезапущен"
 msgid "Nginx UI already installed"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:88
+#: src/components/SystemRestore/SystemRestoreContent.vue:107
 #, fuzzy
 msgid "Nginx UI configuration has been restored"
 msgstr "Ошибка разбора конфигурации Nginx"
 
-#: src/views/system/Backup/SystemRestore.vue:93
+#: src/components/SystemRestore/SystemRestoreContent.vue:112
 #, fuzzy
 msgid ""
 "Nginx UI configuration has been restored and will restart automatically in a "
@@ -2099,6 +2105,7 @@ msgstr "Ок"
 #: src/components/ChatGPT/ChatGPT.vue:375
 #: src/components/Notification/Notification.vue:134
 #: src/components/StdDesign/StdDataDisplay/StdBulkActions.vue:95
+#: src/components/SystemRestore/SystemRestoreContent.vue:113
 #: src/views/notification/Notification.vue:38
 #: src/views/site/cert/components/ObtainCert.vue:139
 #: src/views/site/ngx_conf/NgxConfigEditor.vue:50
@@ -2109,7 +2116,6 @@ msgstr "Ок"
 #: src/views/stream/components/RightSettings.vue:50
 #: src/views/stream/StreamList.vue:164
 #: src/views/system/Backup/BackupCreator.vue:149
-#: src/views/system/Backup/SystemRestore.vue:94
 msgid "OK"
 msgstr "ОК"
 
@@ -2124,7 +2130,7 @@ msgstr "После завершения проверки записи будут
 msgid "Online"
 msgstr "Онлайн"
 
-#: src/views/system/Backup/SystemRestore.vue:24
+#: src/components/SystemRestore/SystemRestoreContent.vue:43
 msgid "Only zip files are allowed"
 msgstr ""
 
@@ -2183,7 +2189,7 @@ msgstr ""
 msgid "Password"
 msgstr "Пароль"
 
-#: src/views/other/Install.vue:141
+#: src/views/other/Install.vue:154
 msgid "Password (*)"
 msgstr "Пароль (*)"
 
@@ -2192,7 +2198,7 @@ msgstr "Пароль (*)"
 msgid "Password incorrect"
 msgstr "Имя пользователя или пароль неверны"
 
-#: src/views/other/Install.vue:70
+#: src/views/other/Install.vue:75
 msgid "Password length cannot exceed 20 characters"
 msgstr ""
 
@@ -2237,12 +2243,13 @@ msgstr ""
 msgid "Please enter the OTP code:"
 msgstr "Пожалуйста, введите код 2FA:"
 
-#: src/views/system/Backup/SystemRestore.vue:58
+#: src/components/SystemRestore/SystemRestoreContent.vue:77
 #, fuzzy
 msgid "Please enter the security token"
 msgstr "Пожалуйста, введите код 2FA:"
 
-#: src/views/system/Backup/SystemRestore.vue:153
+#: src/components/SystemRestore/SystemRestoreContent.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:257
 msgid "Please enter the security token received during backup"
 msgstr ""
 
@@ -2299,15 +2306,15 @@ msgstr ""
 "Введите имя, оно будет использоваться в качестве имени файла новой "
 "конфигурации."
 
-#: src/views/other/Install.vue:54
+#: src/views/other/Install.vue:59
 msgid "Please input your E-mail!"
 msgstr "Введите ваш E-mail!"
 
-#: src/views/other/Install.vue:66 src/views/other/Login.vue:47
+#: src/views/other/Install.vue:71 src/views/other/Login.vue:47
 msgid "Please input your password!"
 msgstr "Введите ваш пароль!"
 
-#: src/views/other/Install.vue:60 src/views/other/Login.vue:41
+#: src/views/other/Install.vue:65 src/views/other/Login.vue:41
 msgid "Please input your username!"
 msgstr "Введите ваше имя пользователя!"
 
@@ -2322,7 +2329,7 @@ msgstr ""
 msgid "Please save this security token, you will need it for restoration:"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:53
+#: src/components/SystemRestore/SystemRestoreContent.vue:72
 #, fuzzy
 msgid "Please select a backup file"
 msgstr "Пожалуйста, выберите хотя бы один узел!"
@@ -2604,17 +2611,24 @@ msgstr "Перезапуск"
 msgid "Restarting"
 msgstr "Перезапускается"
 
-#: src/views/system/Backup/SystemRestore.vue:81
+#: src/components/SystemRestore/SystemRestoreContent.vue:100
 #, fuzzy
 msgid "Restore completed successfully"
 msgstr "Удалено успешно"
 
-#: src/views/system/Backup/SystemRestore.vue:165
+#: src/views/other/Install.vue:186
+#, fuzzy
+msgid "Restore from Backup"
+msgstr "Система"
+
+#: src/components/SystemRestore/SystemRestoreContent.vue:193
+#: src/components/SystemRestore/SystemRestoreContent.vue:270
 #, fuzzy
 msgid "Restore Nginx Configuration"
 msgstr "Ошибка разбора конфигурации Nginx"
 
-#: src/views/system/Backup/SystemRestore.vue:176
+#: src/components/SystemRestore/SystemRestoreContent.vue:204
+#: src/components/SystemRestore/SystemRestoreContent.vue:281
 #, fuzzy
 msgid "Restore Nginx UI Configuration"
 msgstr "Ошибка разбора конфигурации Nginx"
@@ -2732,7 +2746,8 @@ msgstr "SDK"
 msgid "Secret has been copied"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:150
+#: src/components/SystemRestore/SystemRestoreContent.vue:177
+#: src/components/SystemRestore/SystemRestoreContent.vue:254
 msgid "Security Token"
 msgstr ""
 
@@ -2881,7 +2896,8 @@ msgstr "SSO Вход"
 msgid "Stable"
 msgstr "Стабильный"
 
-#: src/views/system/Backup/SystemRestore.vue:187
+#: src/components/SystemRestore/SystemRestoreContent.vue:216
+#: src/components/SystemRestore/SystemRestoreContent.vue:293
 msgid "Start Restore"
 msgstr ""
 
@@ -2937,7 +2953,8 @@ msgid ""
 "guide/nginx-proxy-example.html"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:140
+#: src/components/SystemRestore/SystemRestoreContent.vue:167
+#: src/components/SystemRestore/SystemRestoreContent.vue:244
 msgid "Supported file type: .zip"
 msgstr ""
 
@@ -3030,11 +3047,15 @@ msgstr "Система"
 msgid "System Initial User"
 msgstr "Первоначальный пользователь системы"
 
-#: src/views/system/Backup/SystemRestore.vue:117
+#: src/components/SystemRestore/SystemRestoreContent.vue:144
 #, fuzzy
 msgid "System Restore"
 msgstr "Система"
 
+#: src/views/other/Install.vue:107
+msgid "System restored successfully. Please log in."
+msgstr ""
+
 #: src/constants/errors/self_check.ts:2
 #, fuzzy
 msgid "Task not found"
@@ -3058,7 +3079,7 @@ msgstr ""
 "более 1 недели или периода, установленного в настройках, с момента его "
 "последней выдачи."
 
-#: src/views/other/Install.vue:76
+#: src/views/other/Install.vue:81
 msgid "The filename cannot contain the following characters: %{c}"
 msgstr "Имя файла не может содержать такой символ: %{c}"
 
@@ -3210,13 +3231,15 @@ msgstr ""
 msgid "This value is already taken"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:169
+#: src/components/SystemRestore/SystemRestoreContent.vue:197
+#: src/components/SystemRestore/SystemRestoreContent.vue:274
 msgid ""
 "This will restore all Nginx configuration files. Nginx will restart after "
 "the restoration is complete."
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:208
+#: src/components/SystemRestore/SystemRestoreContent.vue:285
 msgid ""
 "This will restore configuration files and database. Nginx UI will restart "
 "after the restoration is complete."
@@ -3387,7 +3410,7 @@ msgstr ""
 msgid "Username"
 msgstr "Имя пользователя"
 
-#: src/views/other/Install.vue:131
+#: src/views/other/Install.vue:144
 msgid "Username (*)"
 msgstr "Имя пользователя (*)"
 
@@ -3397,7 +3420,8 @@ msgstr "Имя пользователя (*)"
 msgid "Valid"
 msgstr "Действительный"
 
-#: src/views/system/Backup/SystemRestore.vue:159
+#: src/components/SystemRestore/SystemRestoreContent.vue:186
+#: src/components/SystemRestore/SystemRestoreContent.vue:263
 msgid "Verify Backup File Integrity"
 msgstr ""
 
@@ -3441,7 +3465,8 @@ msgstr "Просмотр"
 msgid "Warning"
 msgstr "Внимание"
 
-#: src/views/system/Backup/SystemRestore.vue:121
+#: src/components/SystemRestore/SystemRestoreContent.vue:148
+#: src/components/SystemRestore/SystemRestoreContent.vue:225
 msgid ""
 "Warning: Restore operation will overwrite current configurations. Make sure "
 "you have a valid backup file and security token, and carefully select what "
diff --git a/app/src/language/tr_TR/app.po b/app/src/language/tr_TR/app.po
index 76a5e995..9013c160 100644
--- a/app/src/language/tr_TR/app.po
+++ b/app/src/language/tr_TR/app.po
@@ -252,7 +252,7 @@ msgstr "Otomatik yenileme %{name} için devre dışı"
 msgid "Auto-renewal enabled for %{name}"
 msgstr "Otomatik yenileme %{name} için etkinleştirildi"
 
-#: src/views/system/Backup/SystemRestore.vue:92
+#: src/components/SystemRestore/SystemRestoreContent.vue:111
 msgid "Automatic Restart"
 msgstr ""
 
@@ -277,7 +277,7 @@ msgstr "Listeye geri dön"
 msgid "Backup"
 msgstr "Geri"
 
-#: src/views/system/Backup/SystemRestore.vue:100
+#: src/components/SystemRestore/SystemRestoreContent.vue:119
 msgid "Backup file integrity check failed, it may have been tampered with"
 msgstr ""
 
@@ -491,7 +491,8 @@ msgstr "Temizle"
 msgid "Cleared successfully"
 msgstr "Başarıyla temizlendi"
 
-#: src/views/system/Backup/SystemRestore.vue:137
+#: src/components/SystemRestore/SystemRestoreContent.vue:164
+#: src/components/SystemRestore/SystemRestoreContent.vue:241
 msgid "Click or drag backup file to this area to upload"
 msgstr ""
 
@@ -660,7 +661,7 @@ msgstr "Ortam göstergesinde görüntülenecek yerel sunucu adını özelleştir
 msgid "Dashboard"
 msgstr "Kontrol Paneli"
 
-#: src/views/other/Install.vue:152
+#: src/views/other/Install.vue:165
 msgid "Database (Optional, default: database)"
 msgstr "Veritabanı (İsteğe bağlı, varsayılan: database)"
 
@@ -986,7 +987,7 @@ msgstr "Akışı Düzenle"
 msgid "Email"
 msgstr "E-posta"
 
-#: src/views/other/Install.vue:121
+#: src/views/other/Install.vue:134
 msgid "Email (*)"
 msgstr "E-posta(*)"
 
@@ -1571,11 +1572,11 @@ msgstr "Uygulamadan kodu girin:"
 msgid "Input the recovery code:"
 msgstr "Kurtarma kodunu girin:"
 
-#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:168
+#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:181
 msgid "Install"
 msgstr "Yükle"
 
-#: src/views/other/Install.vue:89
+#: src/views/other/Install.vue:94
 msgid "Install successfully"
 msgstr "Başarıyla yüklendi"
 
@@ -1583,7 +1584,7 @@ msgstr "Başarıyla yüklendi"
 msgid "Installation is not allowed after 10 minutes of system startup"
 msgstr ""
 
-#: src/views/other/Install.vue:113
+#: src/views/other/Install.vue:123
 msgid ""
 "Installation is not allowed after 10 minutes of system startup, please "
 "restart the Nginx UI."
@@ -1605,7 +1606,7 @@ msgstr ""
 msgid "Invalid AES key format: {0}"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:67
+#: src/components/SystemRestore/SystemRestoreContent.vue:86
 #, fuzzy
 msgid "Invalid file object"
 msgstr "Geçersiz dosya adı"
@@ -1928,6 +1929,11 @@ msgstr "Ağ Toplam Alım"
 msgid "Network Total Send"
 msgstr "Ağ Toplam Gönderme"
 
+#: src/views/other/Install.vue:129
+#, fuzzy
+msgid "New Installation"
+msgstr "Yükle"
+
 #: src/views/config/components/Rename.vue:72
 #, fuzzy
 msgid "New name"
@@ -1989,7 +1995,7 @@ msgstr ""
 msgid "Nginx config directory is not set"
 msgstr "Nginx Yapılandırma Ayrıştırma Hatası"
 
-#: src/views/system/Backup/SystemRestore.vue:84
+#: src/components/SystemRestore/SystemRestoreContent.vue:103
 #, fuzzy
 msgid "Nginx configuration has been restored"
 msgstr "Nginx Yapılandırma Ayrıştırma Hatası"
@@ -2057,12 +2063,12 @@ msgstr "Nginx başarıyla yeniden başlatıldı"
 msgid "Nginx UI already installed"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:88
+#: src/components/SystemRestore/SystemRestoreContent.vue:107
 #, fuzzy
 msgid "Nginx UI configuration has been restored"
 msgstr "Nginx Yapılandırma Ayrıştırma Hatası"
 
-#: src/views/system/Backup/SystemRestore.vue:93
+#: src/components/SystemRestore/SystemRestoreContent.vue:112
 #, fuzzy
 msgid ""
 "Nginx UI configuration has been restored and will restart automatically in a "
@@ -2178,6 +2184,7 @@ msgstr "Tamam"
 #: src/components/ChatGPT/ChatGPT.vue:375
 #: src/components/Notification/Notification.vue:134
 #: src/components/StdDesign/StdDataDisplay/StdBulkActions.vue:95
+#: src/components/SystemRestore/SystemRestoreContent.vue:113
 #: src/views/notification/Notification.vue:38
 #: src/views/site/cert/components/ObtainCert.vue:139
 #: src/views/site/ngx_conf/NgxConfigEditor.vue:50
@@ -2188,7 +2195,6 @@ msgstr "Tamam"
 #: src/views/stream/components/RightSettings.vue:50
 #: src/views/stream/StreamList.vue:164
 #: src/views/system/Backup/BackupCreator.vue:149
-#: src/views/system/Backup/SystemRestore.vue:94
 #, fuzzy
 msgid "OK"
 msgstr "Tamam"
@@ -2206,7 +2212,7 @@ msgstr "Doğrulama tamamlandıktan sonra kayıtlar kaldırılacaktır."
 msgid "Online"
 msgstr "Çevrimiçi"
 
-#: src/views/system/Backup/SystemRestore.vue:24
+#: src/components/SystemRestore/SystemRestoreContent.vue:43
 msgid "Only zip files are allowed"
 msgstr ""
 
@@ -2280,7 +2286,7 @@ msgstr ""
 msgid "Password"
 msgstr "Şifre"
 
-#: src/views/other/Install.vue:141
+#: src/views/other/Install.vue:154
 #, fuzzy
 msgid "Password (*)"
 msgstr "Şifre (*)"
@@ -2290,7 +2296,7 @@ msgstr "Şifre (*)"
 msgid "Password incorrect"
 msgstr "Kullanıcı adı veya şifre yanlış"
 
-#: src/views/other/Install.vue:70
+#: src/views/other/Install.vue:75
 msgid "Password length cannot exceed 20 characters"
 msgstr ""
 
@@ -2342,12 +2348,13 @@ msgstr ""
 msgid "Please enter the OTP code:"
 msgstr "Lütfen OTP kodunu girin:"
 
-#: src/views/system/Backup/SystemRestore.vue:58
+#: src/components/SystemRestore/SystemRestoreContent.vue:77
 #, fuzzy
 msgid "Please enter the security token"
 msgstr "Lütfen OTP kodunu girin:"
 
-#: src/views/system/Backup/SystemRestore.vue:153
+#: src/components/SystemRestore/SystemRestoreContent.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:257
 msgid "Please enter the security token received during backup"
 msgstr ""
 
@@ -2409,17 +2416,17 @@ msgid ""
 msgstr ""
 "Lütfen isim girin, bu yeni yapılandırmanın dosya adı olarak kullanılacaktır!"
 
-#: src/views/other/Install.vue:54
+#: src/views/other/Install.vue:59
 #, fuzzy
 msgid "Please input your E-mail!"
 msgstr "Lütfen e-postanızı girin!"
 
-#: src/views/other/Install.vue:66 src/views/other/Login.vue:47
+#: src/views/other/Install.vue:71 src/views/other/Login.vue:47
 #, fuzzy
 msgid "Please input your password!"
 msgstr "Lütfen şifrenizi girin!"
 
-#: src/views/other/Install.vue:60 src/views/other/Login.vue:41
+#: src/views/other/Install.vue:65 src/views/other/Login.vue:41
 #, fuzzy
 msgid "Please input your username!"
 msgstr "Lütfen kullanıcı adınızı girin!"
@@ -2436,7 +2443,7 @@ msgstr ""
 msgid "Please save this security token, you will need it for restoration:"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:53
+#: src/components/SystemRestore/SystemRestoreContent.vue:72
 #, fuzzy
 msgid "Please select a backup file"
 msgstr "Lütfen en az bir düğüm seçin!"
@@ -2770,17 +2777,24 @@ msgstr "Yeniden başlat"
 msgid "Restarting"
 msgstr "Yeniden Başlatma"
 
-#: src/views/system/Backup/SystemRestore.vue:81
+#: src/components/SystemRestore/SystemRestoreContent.vue:100
 #, fuzzy
 msgid "Restore completed successfully"
 msgstr "Başarıyla silindi"
 
-#: src/views/system/Backup/SystemRestore.vue:165
+#: src/views/other/Install.vue:186
+#, fuzzy
+msgid "Restore from Backup"
+msgstr "Sistem"
+
+#: src/components/SystemRestore/SystemRestoreContent.vue:193
+#: src/components/SystemRestore/SystemRestoreContent.vue:270
 #, fuzzy
 msgid "Restore Nginx Configuration"
 msgstr "Nginx Yapılandırma Ayrıştırma Hatası"
 
-#: src/views/system/Backup/SystemRestore.vue:176
+#: src/components/SystemRestore/SystemRestoreContent.vue:204
+#: src/components/SystemRestore/SystemRestoreContent.vue:281
 #, fuzzy
 msgid "Restore Nginx UI Configuration"
 msgstr "Nginx Yapılandırma Ayrıştırma Hatası"
@@ -2909,7 +2923,8 @@ msgstr "SDK"
 msgid "Secret has been copied"
 msgstr "Sır kopyalandı"
 
-#: src/views/system/Backup/SystemRestore.vue:150
+#: src/components/SystemRestore/SystemRestoreContent.vue:177
+#: src/components/SystemRestore/SystemRestoreContent.vue:254
 msgid "Security Token"
 msgstr ""
 
@@ -3078,7 +3093,8 @@ msgstr "SSO Girişi"
 msgid "Stable"
 msgstr "Stabil"
 
-#: src/views/system/Backup/SystemRestore.vue:187
+#: src/components/SystemRestore/SystemRestoreContent.vue:216
+#: src/components/SystemRestore/SystemRestoreContent.vue:293
 msgid "Start Restore"
 msgstr ""
 
@@ -3138,7 +3154,8 @@ msgid ""
 "guide/nginx-proxy-example.html"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:140
+#: src/components/SystemRestore/SystemRestoreContent.vue:167
+#: src/components/SystemRestore/SystemRestoreContent.vue:244
 msgid "Supported file type: .zip"
 msgstr ""
 
@@ -3244,11 +3261,15 @@ msgstr "Sistem"
 msgid "System Initial User"
 msgstr "Sistem İlk Kullanıcısı"
 
-#: src/views/system/Backup/SystemRestore.vue:117
+#: src/components/SystemRestore/SystemRestoreContent.vue:144
 #, fuzzy
 msgid "System Restore"
 msgstr "Sistem"
 
+#: src/views/other/Install.vue:107
+msgid "System restored successfully. Please log in."
+msgstr ""
+
 #: src/constants/errors/self_check.ts:2
 #, fuzzy
 msgid "Task not found"
@@ -3275,7 +3296,7 @@ msgstr ""
 "verilmesinden bu yana 1 haftadan veya ayarlarda belirlediğiniz süreden fazla "
 "zaman geçtiyse yenilenecektir."
 
-#: src/views/other/Install.vue:76
+#: src/views/other/Install.vue:81
 #, fuzzy
 msgid "The filename cannot contain the following characters: %{c}"
 msgstr "Dosya adı aşağıdaki karakterleri içeremez: %{c}"
@@ -3437,13 +3458,15 @@ msgstr ""
 msgid "This value is already taken"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:169
+#: src/components/SystemRestore/SystemRestoreContent.vue:197
+#: src/components/SystemRestore/SystemRestoreContent.vue:274
 msgid ""
 "This will restore all Nginx configuration files. Nginx will restart after "
 "the restoration is complete."
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:208
+#: src/components/SystemRestore/SystemRestoreContent.vue:285
 msgid ""
 "This will restore configuration files and database. Nginx UI will restart "
 "after the restoration is complete."
@@ -3646,7 +3669,7 @@ msgstr ""
 msgid "Username"
 msgstr "Kullanıcı Adı"
 
-#: src/views/other/Install.vue:131
+#: src/views/other/Install.vue:144
 #, fuzzy
 msgid "Username (*)"
 msgstr "Kullanıcı adı (*)"
@@ -3658,7 +3681,8 @@ msgstr "Kullanıcı adı (*)"
 msgid "Valid"
 msgstr "Geçerli"
 
-#: src/views/system/Backup/SystemRestore.vue:159
+#: src/components/SystemRestore/SystemRestoreContent.vue:186
+#: src/components/SystemRestore/SystemRestoreContent.vue:263
 msgid "Verify Backup File Integrity"
 msgstr ""
 
@@ -3707,7 +3731,8 @@ msgstr "Görünüm"
 msgid "Warning"
 msgstr "Uyarı"
 
-#: src/views/system/Backup/SystemRestore.vue:121
+#: src/components/SystemRestore/SystemRestoreContent.vue:148
+#: src/components/SystemRestore/SystemRestoreContent.vue:225
 msgid ""
 "Warning: Restore operation will overwrite current configurations. Make sure "
 "you have a valid backup file and security token, and carefully select what "
diff --git a/app/src/language/vi_VN/app.po b/app/src/language/vi_VN/app.po
index 95303fa1..7fa88578 100644
--- a/app/src/language/vi_VN/app.po
+++ b/app/src/language/vi_VN/app.po
@@ -263,7 +263,7 @@ msgstr "Đã tắt tự động gia hạn SSL cho %{name}"
 msgid "Auto-renewal enabled for %{name}"
 msgstr "Đã bật tự động gia hạn SSL cho %{name}"
 
-#: src/views/system/Backup/SystemRestore.vue:92
+#: src/components/SystemRestore/SystemRestoreContent.vue:111
 msgid "Automatic Restart"
 msgstr ""
 
@@ -289,7 +289,7 @@ msgstr ""
 msgid "Backup"
 msgstr "Quay lại"
 
-#: src/views/system/Backup/SystemRestore.vue:100
+#: src/components/SystemRestore/SystemRestoreContent.vue:119
 msgid "Backup file integrity check failed, it may have been tampered with"
 msgstr ""
 
@@ -514,7 +514,8 @@ msgstr "Xoá"
 msgid "Cleared successfully"
 msgstr "Đã xóa thành công"
 
-#: src/views/system/Backup/SystemRestore.vue:137
+#: src/components/SystemRestore/SystemRestoreContent.vue:164
+#: src/components/SystemRestore/SystemRestoreContent.vue:241
 msgid "Click or drag backup file to this area to upload"
 msgstr ""
 
@@ -686,7 +687,7 @@ msgstr ""
 msgid "Dashboard"
 msgstr "Bảng điều khiển"
 
-#: src/views/other/Install.vue:152
+#: src/views/other/Install.vue:165
 msgid "Database (Optional, default: database)"
 msgstr "Tên cơ sở dữ liệu (Tuỳ chọn, Mặc định là: database)"
 
@@ -1012,7 +1013,7 @@ msgstr "Sửa trang web"
 msgid "Email"
 msgstr "Email (*)"
 
-#: src/views/other/Install.vue:121
+#: src/views/other/Install.vue:134
 msgid "Email (*)"
 msgstr "Email (*)"
 
@@ -1592,11 +1593,11 @@ msgstr ""
 msgid "Input the recovery code:"
 msgstr ""
 
-#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:168
+#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:181
 msgid "Install"
 msgstr "Cài đặt"
 
-#: src/views/other/Install.vue:89
+#: src/views/other/Install.vue:94
 #, fuzzy
 msgid "Install successfully"
 msgstr "Cài đặt thành công"
@@ -1605,7 +1606,7 @@ msgstr "Cài đặt thành công"
 msgid "Installation is not allowed after 10 minutes of system startup"
 msgstr ""
 
-#: src/views/other/Install.vue:113
+#: src/views/other/Install.vue:123
 msgid ""
 "Installation is not allowed after 10 minutes of system startup, please "
 "restart the Nginx UI."
@@ -1628,7 +1629,7 @@ msgstr ""
 msgid "Invalid AES key format: {0}"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:67
+#: src/components/SystemRestore/SystemRestoreContent.vue:86
 #, fuzzy
 msgid "Invalid file object"
 msgstr "E-mail không chính xác!"
@@ -1942,6 +1943,11 @@ msgstr "Tổng lưu lượng mạng đã nhận"
 msgid "Network Total Send"
 msgstr "Tổng lưu lượng mạng đã gửi"
 
+#: src/views/other/Install.vue:129
+#, fuzzy
+msgid "New Installation"
+msgstr "Cài đặt"
+
 #: src/views/config/components/Rename.vue:72
 #, fuzzy
 msgid "New name"
@@ -1999,7 +2005,7 @@ msgstr ""
 msgid "Nginx config directory is not set"
 msgstr "Lỗi phân tích cú pháp cấu hình Nginx"
 
-#: src/views/system/Backup/SystemRestore.vue:84
+#: src/components/SystemRestore/SystemRestoreContent.vue:103
 #, fuzzy
 msgid "Nginx configuration has been restored"
 msgstr "Lỗi phân tích cú pháp cấu hình Nginx"
@@ -2062,12 +2068,12 @@ msgstr "Restart Nginx thành công"
 msgid "Nginx UI already installed"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:88
+#: src/components/SystemRestore/SystemRestoreContent.vue:107
 #, fuzzy
 msgid "Nginx UI configuration has been restored"
 msgstr "Lỗi phân tích cú pháp cấu hình Nginx"
 
-#: src/views/system/Backup/SystemRestore.vue:93
+#: src/components/SystemRestore/SystemRestoreContent.vue:112
 #, fuzzy
 msgid ""
 "Nginx UI configuration has been restored and will restart automatically in a "
@@ -2170,6 +2176,7 @@ msgstr ""
 #: src/components/ChatGPT/ChatGPT.vue:375
 #: src/components/Notification/Notification.vue:134
 #: src/components/StdDesign/StdDataDisplay/StdBulkActions.vue:95
+#: src/components/SystemRestore/SystemRestoreContent.vue:113
 #: src/views/notification/Notification.vue:38
 #: src/views/site/cert/components/ObtainCert.vue:139
 #: src/views/site/ngx_conf/NgxConfigEditor.vue:50
@@ -2180,7 +2187,6 @@ msgstr ""
 #: src/views/stream/components/RightSettings.vue:50
 #: src/views/stream/StreamList.vue:164
 #: src/views/system/Backup/BackupCreator.vue:149
-#: src/views/system/Backup/SystemRestore.vue:94
 msgid "OK"
 msgstr ""
 
@@ -2195,7 +2201,7 @@ msgstr "Sau khi quá trình xác minh hoàn tất, bản ghi sẽ bị xóa."
 msgid "Online"
 msgstr "Trực tuyến"
 
-#: src/views/system/Backup/SystemRestore.vue:24
+#: src/components/SystemRestore/SystemRestoreContent.vue:43
 msgid "Only zip files are allowed"
 msgstr ""
 
@@ -2255,7 +2261,7 @@ msgstr ""
 msgid "Password"
 msgstr "Mật khẩu"
 
-#: src/views/other/Install.vue:141
+#: src/views/other/Install.vue:154
 msgid "Password (*)"
 msgstr "Mật khẩu (*)"
 
@@ -2264,7 +2270,7 @@ msgstr "Mật khẩu (*)"
 msgid "Password incorrect"
 msgstr "Tên người dùng hoặc mật khẩu không chính xác"
 
-#: src/views/other/Install.vue:70
+#: src/views/other/Install.vue:75
 msgid "Password length cannot exceed 20 characters"
 msgstr ""
 
@@ -2308,11 +2314,12 @@ msgstr ""
 msgid "Please enter the OTP code:"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:58
+#: src/components/SystemRestore/SystemRestoreContent.vue:77
 msgid "Please enter the security token"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:153
+#: src/components/SystemRestore/SystemRestoreContent.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:257
 msgid "Please enter the security token received during backup"
 msgstr ""
 
@@ -2368,15 +2375,15 @@ msgid ""
 msgstr ""
 "Vui lòng nhập tên, tên này sẽ được sử dụng làm tên tệp của cấu hình mới!"
 
-#: src/views/other/Install.vue:54
+#: src/views/other/Install.vue:59
 msgid "Please input your E-mail!"
 msgstr "Vui lòng nhập E-mail của bạn!"
 
-#: src/views/other/Install.vue:66 src/views/other/Login.vue:47
+#: src/views/other/Install.vue:71 src/views/other/Login.vue:47
 msgid "Please input your password!"
 msgstr "Vui lòng nhập mật khẩu!"
 
-#: src/views/other/Install.vue:60 src/views/other/Login.vue:41
+#: src/views/other/Install.vue:65 src/views/other/Login.vue:41
 msgid "Please input your username!"
 msgstr "Vui lòng nhập username!"
 
@@ -2389,7 +2396,7 @@ msgstr "Lưu ý đơn vị cấu hình thời gian bên dưới được tính b
 msgid "Please save this security token, you will need it for restoration:"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:53
+#: src/components/SystemRestore/SystemRestoreContent.vue:72
 #, fuzzy
 msgid "Please select a backup file"
 msgstr "Vui lòng nhập username!"
@@ -2689,17 +2696,24 @@ msgstr "Khởi động lại"
 msgid "Restarting"
 msgstr "Đang khởi động lại"
 
-#: src/views/system/Backup/SystemRestore.vue:81
+#: src/components/SystemRestore/SystemRestoreContent.vue:100
 #, fuzzy
 msgid "Restore completed successfully"
 msgstr "Đã xoá thành công"
 
-#: src/views/system/Backup/SystemRestore.vue:165
+#: src/views/other/Install.vue:186
+#, fuzzy
+msgid "Restore from Backup"
+msgstr "Thông tin"
+
+#: src/components/SystemRestore/SystemRestoreContent.vue:193
+#: src/components/SystemRestore/SystemRestoreContent.vue:270
 #, fuzzy
 msgid "Restore Nginx Configuration"
 msgstr "Lỗi phân tích cú pháp cấu hình Nginx"
 
-#: src/views/system/Backup/SystemRestore.vue:176
+#: src/components/SystemRestore/SystemRestoreContent.vue:204
+#: src/components/SystemRestore/SystemRestoreContent.vue:281
 #, fuzzy
 msgid "Restore Nginx UI Configuration"
 msgstr "Lỗi phân tích cú pháp cấu hình Nginx"
@@ -2819,7 +2833,8 @@ msgstr ""
 msgid "Secret has been copied"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:150
+#: src/components/SystemRestore/SystemRestoreContent.vue:177
+#: src/components/SystemRestore/SystemRestoreContent.vue:254
 msgid "Security Token"
 msgstr ""
 
@@ -2969,7 +2984,8 @@ msgstr ""
 msgid "Stable"
 msgstr "Ổn định"
 
-#: src/views/system/Backup/SystemRestore.vue:187
+#: src/components/SystemRestore/SystemRestoreContent.vue:216
+#: src/components/SystemRestore/SystemRestoreContent.vue:293
 msgid "Start Restore"
 msgstr ""
 
@@ -3025,7 +3041,8 @@ msgid ""
 "guide/nginx-proxy-example.html"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:140
+#: src/components/SystemRestore/SystemRestoreContent.vue:167
+#: src/components/SystemRestore/SystemRestoreContent.vue:244
 msgid "Supported file type: .zip"
 msgstr ""
 
@@ -3123,11 +3140,15 @@ msgstr "Thông tin"
 msgid "System Initial User"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:117
+#: src/components/SystemRestore/SystemRestoreContent.vue:144
 #, fuzzy
 msgid "System Restore"
 msgstr "Thông tin"
 
+#: src/views/other/Install.vue:107
+msgid "System restored successfully. Please log in."
+msgstr ""
+
 #: src/constants/errors/self_check.ts:2
 #, fuzzy
 msgid "Task not found"
@@ -3151,7 +3172,7 @@ msgstr ""
 "Chứng chỉ cho miền sẽ được kiểm tra 5 phút / lần và sẽ được gia hạn nếu đã "
 "hơn 1 tuần kể từ lần cuối nó được cấp."
 
-#: src/views/other/Install.vue:76
+#: src/views/other/Install.vue:81
 msgid "The filename cannot contain the following characters: %{c}"
 msgstr "Tên tệp không thể chứa các ký tự sau: %{c}"
 
@@ -3285,13 +3306,15 @@ msgstr ""
 msgid "This value is already taken"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:169
+#: src/components/SystemRestore/SystemRestoreContent.vue:197
+#: src/components/SystemRestore/SystemRestoreContent.vue:274
 msgid ""
 "This will restore all Nginx configuration files. Nginx will restart after "
 "the restoration is complete."
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:208
+#: src/components/SystemRestore/SystemRestoreContent.vue:285
 msgid ""
 "This will restore configuration files and database. Nginx UI will restart "
 "after the restoration is complete."
@@ -3460,7 +3483,7 @@ msgstr ""
 msgid "Username"
 msgstr "Username"
 
-#: src/views/other/Install.vue:131
+#: src/views/other/Install.vue:144
 msgid "Username (*)"
 msgstr "Username (*)"
 
@@ -3470,7 +3493,8 @@ msgstr "Username (*)"
 msgid "Valid"
 msgstr "Hợp lệ"
 
-#: src/views/system/Backup/SystemRestore.vue:159
+#: src/components/SystemRestore/SystemRestoreContent.vue:186
+#: src/components/SystemRestore/SystemRestoreContent.vue:263
 msgid "Verify Backup File Integrity"
 msgstr ""
 
@@ -3516,7 +3540,8 @@ msgstr "Xem"
 msgid "Warning"
 msgstr "Lưu ý"
 
-#: src/views/system/Backup/SystemRestore.vue:121
+#: src/components/SystemRestore/SystemRestoreContent.vue:148
+#: src/components/SystemRestore/SystemRestoreContent.vue:225
 msgid ""
 "Warning: Restore operation will overwrite current configurations. Make sure "
 "you have a valid backup file and security token, and carefully select what "
diff --git a/app/src/language/zh_CN/app.po b/app/src/language/zh_CN/app.po
index 5bb74bf8..4a384a21 100644
--- a/app/src/language/zh_CN/app.po
+++ b/app/src/language/zh_CN/app.po
@@ -3,7 +3,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: \n"
 "POT-Creation-Date: \n"
-"PO-Revision-Date: 2025-03-29 20:55+0800\n"
+"PO-Revision-Date: 2025-03-30 08:14+0800\n"
 "Last-Translator: 0xJacky <me@jackyu.cn>\n"
 "Language-Team: Chinese (Simplified Han script) <https://weblate.nginxui.com/"
 "projects/nginx-ui/frontend/zh_Hans/>\n"
@@ -248,7 +248,7 @@ msgstr "成功关闭 %{name} 自动续签"
 msgid "Auto-renewal enabled for %{name}"
 msgstr "成功启用 %{name} 自动续签"
 
-#: src/views/system/Backup/SystemRestore.vue:92
+#: src/components/SystemRestore/SystemRestoreContent.vue:111
 msgid "Automatic Restart"
 msgstr "自动重启"
 
@@ -272,7 +272,7 @@ msgstr "返回列表"
 msgid "Backup"
 msgstr "备份"
 
-#: src/views/system/Backup/SystemRestore.vue:100
+#: src/components/SystemRestore/SystemRestoreContent.vue:119
 msgid "Backup file integrity check failed, it may have been tampered with"
 msgstr "备份文件完整性检查失败，可能已被篡改"
 
@@ -477,7 +477,8 @@ msgstr "清空"
 msgid "Cleared successfully"
 msgstr "清除成功"
 
-#: src/views/system/Backup/SystemRestore.vue:137
+#: src/components/SystemRestore/SystemRestoreContent.vue:164
+#: src/components/SystemRestore/SystemRestoreContent.vue:241
 msgid "Click or drag backup file to this area to upload"
 msgstr "单击或拖动备份文件到此区域上传"
 
@@ -642,7 +643,7 @@ msgstr "自定义显示在环境指示器中的本地服务器名称。"
 msgid "Dashboard"
 msgstr "仪表盘"
 
-#: src/views/other/Install.vue:152
+#: src/views/other/Install.vue:165
 msgid "Database (Optional, default: database)"
 msgstr "数据库 (可选，默认: database)"
 
@@ -935,7 +936,7 @@ msgstr "编辑 Stream"
 msgid "Email"
 msgstr "邮箱"
 
-#: src/views/other/Install.vue:121
+#: src/views/other/Install.vue:134
 msgid "Email (*)"
 msgstr "邮箱 (*)"
 
@@ -1464,11 +1465,11 @@ msgstr "输入应用程序中的代码："
 msgid "Input the recovery code:"
 msgstr "输入恢复代码："
 
-#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:168
+#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:181
 msgid "Install"
 msgstr "安装"
 
-#: src/views/other/Install.vue:89
+#: src/views/other/Install.vue:94
 msgid "Install successfully"
 msgstr "安装成功"
 
@@ -1476,7 +1477,7 @@ msgstr "安装成功"
 msgid "Installation is not allowed after 10 minutes of system startup"
 msgstr "系统启动 10 分钟后不允许安装"
 
-#: src/views/other/Install.vue:113
+#: src/views/other/Install.vue:123
 msgid ""
 "Installation is not allowed after 10 minutes of system startup, please "
 "restart the Nginx UI."
@@ -1498,7 +1499,7 @@ msgstr "AES IV 格式无效：{0}"
 msgid "Invalid AES key format: {0}"
 msgstr "AES 密钥格式无效：{0}"
 
-#: src/views/system/Backup/SystemRestore.vue:67
+#: src/components/SystemRestore/SystemRestoreContent.vue:86
 msgid "Invalid file object"
 msgstr "无效文件对象"
 
@@ -1793,6 +1794,10 @@ msgstr "下载流量"
 msgid "Network Total Send"
 msgstr "上传流量"
 
+#: src/views/other/Install.vue:129
+msgid "New Installation"
+msgstr "新安装"
+
 #: src/views/config/components/Rename.vue:72
 msgid "New name"
 msgstr "新名称"
@@ -1847,7 +1852,7 @@ msgstr "Nginx Conf 中未引用 stream-enabled"
 msgid "Nginx config directory is not set"
 msgstr "未设置 Nginx 配置目录"
 
-#: src/views/system/Backup/SystemRestore.vue:84
+#: src/components/SystemRestore/SystemRestoreContent.vue:103
 msgid "Nginx configuration has been restored"
 msgstr "Nginx 配置已恢复"
 
@@ -1904,11 +1909,11 @@ msgstr "Nginx 重启成功"
 msgid "Nginx UI already installed"
 msgstr "Nginx UI 已安装"
 
-#: src/views/system/Backup/SystemRestore.vue:88
+#: src/components/SystemRestore/SystemRestoreContent.vue:107
 msgid "Nginx UI configuration has been restored"
 msgstr "Nginx 用户界面配置已恢复"
 
-#: src/views/system/Backup/SystemRestore.vue:93
+#: src/components/SystemRestore/SystemRestoreContent.vue:112
 msgid ""
 "Nginx UI configuration has been restored and will restart automatically in a "
 "few seconds."
@@ -2006,6 +2011,7 @@ msgstr "确定"
 #: src/components/ChatGPT/ChatGPT.vue:375
 #: src/components/Notification/Notification.vue:134
 #: src/components/StdDesign/StdDataDisplay/StdBulkActions.vue:95
+#: src/components/SystemRestore/SystemRestoreContent.vue:113
 #: src/views/notification/Notification.vue:38
 #: src/views/site/cert/components/ObtainCert.vue:139
 #: src/views/site/ngx_conf/NgxConfigEditor.vue:50
@@ -2016,7 +2022,6 @@ msgstr "确定"
 #: src/views/stream/components/RightSettings.vue:50
 #: src/views/stream/StreamList.vue:164
 #: src/views/system/Backup/BackupCreator.vue:149
-#: src/views/system/Backup/SystemRestore.vue:94
 msgid "OK"
 msgstr "确定"
 
@@ -2031,7 +2036,7 @@ msgstr "一旦验证完成，这些记录将被删除。"
 msgid "Online"
 msgstr "在线"
 
-#: src/views/system/Backup/SystemRestore.vue:24
+#: src/components/SystemRestore/SystemRestoreContent.vue:43
 msgid "Only zip files are allowed"
 msgstr "只允许使用zip文件"
 
@@ -2092,7 +2097,7 @@ msgstr ""
 msgid "Password"
 msgstr "密码"
 
-#: src/views/other/Install.vue:141
+#: src/views/other/Install.vue:154
 msgid "Password (*)"
 msgstr "密码 (*)"
 
@@ -2100,7 +2105,7 @@ msgstr "密码 (*)"
 msgid "Password incorrect"
 msgstr "用户名和密码错误"
 
-#: src/views/other/Install.vue:70
+#: src/views/other/Install.vue:75
 msgid "Password length cannot exceed 20 characters"
 msgstr "密码长度不能超过 20 个字符"
 
@@ -2144,11 +2149,12 @@ msgstr "请为您要创建的 Passkey 输入一个名称，然后单击下面的
 msgid "Please enter the OTP code:"
 msgstr "请输入 OTP："
 
-#: src/views/system/Backup/SystemRestore.vue:58
+#: src/components/SystemRestore/SystemRestoreContent.vue:77
 msgid "Please enter the security token"
 msgstr "请输入安全令牌"
 
-#: src/views/system/Backup/SystemRestore.vue:153
+#: src/components/SystemRestore/SystemRestoreContent.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:257
 msgid "Please enter the security token received during backup"
 msgstr "请输入备份时收到的安全令牌"
 
@@ -2198,15 +2204,15 @@ msgid ""
 "configuration."
 msgstr "请输入名称，这将作为新配置的文件名。"
 
-#: src/views/other/Install.vue:54
+#: src/views/other/Install.vue:59
 msgid "Please input your E-mail!"
 msgstr "请输入您的邮箱！"
 
-#: src/views/other/Install.vue:66 src/views/other/Login.vue:47
+#: src/views/other/Install.vue:71 src/views/other/Login.vue:47
 msgid "Please input your password!"
 msgstr "请输入您的密码！"
 
-#: src/views/other/Install.vue:60 src/views/other/Login.vue:41
+#: src/views/other/Install.vue:65 src/views/other/Login.vue:41
 msgid "Please input your username!"
 msgstr "请输入您的用户名！"
 
@@ -2219,7 +2225,7 @@ msgstr "请注意，下面的时间单位配置均以秒为单位。"
 msgid "Please save this security token, you will need it for restoration:"
 msgstr "请保存此安全令牌，恢复时会用到它："
 
-#: src/views/system/Backup/SystemRestore.vue:53
+#: src/components/SystemRestore/SystemRestoreContent.vue:72
 msgid "Please select a backup file"
 msgstr "请选择备份文件"
 
@@ -2489,15 +2495,21 @@ msgstr "重启"
 msgid "Restarting"
 msgstr "重启中"
 
-#: src/views/system/Backup/SystemRestore.vue:81
+#: src/components/SystemRestore/SystemRestoreContent.vue:100
 msgid "Restore completed successfully"
 msgstr "恢复成功"
 
-#: src/views/system/Backup/SystemRestore.vue:165
+#: src/views/other/Install.vue:186
+msgid "Restore from Backup"
+msgstr "从备份还原"
+
+#: src/components/SystemRestore/SystemRestoreContent.vue:193
+#: src/components/SystemRestore/SystemRestoreContent.vue:270
 msgid "Restore Nginx Configuration"
 msgstr "恢复 Nginx 配置"
 
-#: src/views/system/Backup/SystemRestore.vue:176
+#: src/components/SystemRestore/SystemRestoreContent.vue:204
+#: src/components/SystemRestore/SystemRestoreContent.vue:281
 msgid "Restore Nginx UI Configuration"
 msgstr "恢复 Nginx UI 配置"
 
@@ -2606,7 +2618,8 @@ msgstr "SDK"
 msgid "Secret has been copied"
 msgstr "密钥已复制"
 
-#: src/views/system/Backup/SystemRestore.vue:150
+#: src/components/SystemRestore/SystemRestoreContent.vue:177
+#: src/components/SystemRestore/SystemRestoreContent.vue:254
 msgid "Security Token"
 msgstr "安全 Token"
 
@@ -2752,7 +2765,8 @@ msgstr "SSO 登录"
 msgid "Stable"
 msgstr "稳定"
 
-#: src/views/system/Backup/SystemRestore.vue:187
+#: src/components/SystemRestore/SystemRestoreContent.vue:216
+#: src/components/SystemRestore/SystemRestoreContent.vue:293
 msgid "Start Restore"
 msgstr "开始还原"
 
@@ -2806,7 +2820,8 @@ msgstr ""
 "支持通过 WebSocket 协议与后端通信，如果您正在使用 Nginx 反向代理了 Nginx UI "
 "请参考：https://nginxui.com/guide/nginx-proxy-example.html 编写配置文件"
 
-#: src/views/system/Backup/SystemRestore.vue:140
+#: src/components/SystemRestore/SystemRestoreContent.vue:167
+#: src/components/SystemRestore/SystemRestoreContent.vue:244
 msgid "Supported file type: .zip"
 msgstr "支持的文件类型：.zip"
 
@@ -2893,10 +2908,14 @@ msgstr "系统备份"
 msgid "System Initial User"
 msgstr "系统初始用户"
 
-#: src/views/system/Backup/SystemRestore.vue:117
+#: src/components/SystemRestore/SystemRestoreContent.vue:144
 msgid "System Restore"
 msgstr "系统还原"
 
+#: src/views/other/Install.vue:107
+msgid "System restored successfully. Please log in."
+msgstr "系统恢复成功。请登录。"
+
 #: src/constants/errors/self_check.ts:2
 msgid "Task not found"
 msgstr "未找到任务"
@@ -2918,7 +2937,7 @@ msgstr ""
 "域名证书将在 30 分钟内接受检查，如果距离上次签发证书的时间超过 1 周或您在设置"
 "中设定的时间，证书将被更新。"
 
-#: src/views/other/Install.vue:76
+#: src/views/other/Install.vue:81
 msgid "The filename cannot contain the following characters: %{c}"
 msgstr "文件名不能包含以下字符: %{c}"
 
@@ -3051,13 +3070,15 @@ msgstr "此 Token 只显示一次，以后无法找回。请确保将其保存
 msgid "This value is already taken"
 msgstr "该字段的值已经存在"
 
-#: src/views/system/Backup/SystemRestore.vue:169
+#: src/components/SystemRestore/SystemRestoreContent.vue:197
+#: src/components/SystemRestore/SystemRestoreContent.vue:274
 msgid ""
 "This will restore all Nginx configuration files. Nginx will restart after "
 "the restoration is complete."
 msgstr "这将还原所有 Nginx 配置文件。恢复完成后，Nginx 将重新启动。"
 
-#: src/views/system/Backup/SystemRestore.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:208
+#: src/components/SystemRestore/SystemRestoreContent.vue:285
 msgid ""
 "This will restore configuration files and database. Nginx UI will restart "
 "after the restoration is complete."
@@ -3222,7 +3243,7 @@ msgstr "用户未启用 OTP 作为 2FA"
 msgid "Username"
 msgstr "用户名"
 
-#: src/views/other/Install.vue:131
+#: src/views/other/Install.vue:144
 msgid "Username (*)"
 msgstr "用户名 (*)"
 
@@ -3232,7 +3253,8 @@ msgstr "用户名 (*)"
 msgid "Valid"
 msgstr "有效的"
 
-#: src/views/system/Backup/SystemRestore.vue:159
+#: src/components/SystemRestore/SystemRestoreContent.vue:186
+#: src/components/SystemRestore/SystemRestoreContent.vue:263
 msgid "Verify Backup File Integrity"
 msgstr "验证备份文件的完整性"
 
@@ -3273,7 +3295,8 @@ msgstr "已查看"
 msgid "Warning"
 msgstr "警告"
 
-#: src/views/system/Backup/SystemRestore.vue:121
+#: src/components/SystemRestore/SystemRestoreContent.vue:148
+#: src/components/SystemRestore/SystemRestoreContent.vue:225
 msgid ""
 "Warning: Restore operation will overwrite current configurations. Make sure "
 "you have a valid backup file and security token, and carefully select what "
diff --git a/app/src/language/zh_TW/app.po b/app/src/language/zh_TW/app.po
index 54cae3f1..9b20e2b3 100644
--- a/app/src/language/zh_TW/app.po
+++ b/app/src/language/zh_TW/app.po
@@ -252,7 +252,7 @@ msgstr "已關閉 %{name} 的自動續簽"
 msgid "Auto-renewal enabled for %{name}"
 msgstr "已啟用 %{name} 的自動續簽"
 
-#: src/views/system/Backup/SystemRestore.vue:92
+#: src/components/SystemRestore/SystemRestoreContent.vue:111
 msgid "Automatic Restart"
 msgstr ""
 
@@ -277,7 +277,7 @@ msgstr "返回列表"
 msgid "Backup"
 msgstr "返回"
 
-#: src/views/system/Backup/SystemRestore.vue:100
+#: src/components/SystemRestore/SystemRestoreContent.vue:119
 msgid "Backup file integrity check failed, it may have been tampered with"
 msgstr ""
 
@@ -486,7 +486,8 @@ msgstr "清除"
 msgid "Cleared successfully"
 msgstr "清除成功"
 
-#: src/views/system/Backup/SystemRestore.vue:137
+#: src/components/SystemRestore/SystemRestoreContent.vue:164
+#: src/components/SystemRestore/SystemRestoreContent.vue:241
 msgid "Click or drag backup file to this area to upload"
 msgstr ""
 
@@ -653,7 +654,7 @@ msgstr "自訂顯示在環境指示器中的本地節點名稱。"
 msgid "Dashboard"
 msgstr "儀表板"
 
-#: src/views/other/Install.vue:152
+#: src/views/other/Install.vue:165
 msgid "Database (Optional, default: database)"
 msgstr "資料庫 (可選，預設: database)"
 
@@ -950,7 +951,7 @@ msgstr "編輯 Stream"
 msgid "Email"
 msgstr "電子郵件"
 
-#: src/views/other/Install.vue:121
+#: src/views/other/Install.vue:134
 msgid "Email (*)"
 msgstr "電子郵件 (*)"
 
@@ -1519,11 +1520,11 @@ msgstr "請輸入應用程式中的代碼："
 msgid "Input the recovery code:"
 msgstr "輸入恢復碼："
 
-#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:168
+#: src/routes/modules/auth.ts:8 src/views/other/Install.vue:181
 msgid "Install"
 msgstr "安裝"
 
-#: src/views/other/Install.vue:89
+#: src/views/other/Install.vue:94
 msgid "Install successfully"
 msgstr "安裝成功"
 
@@ -1531,7 +1532,7 @@ msgstr "安裝成功"
 msgid "Installation is not allowed after 10 minutes of system startup"
 msgstr ""
 
-#: src/views/other/Install.vue:113
+#: src/views/other/Install.vue:123
 msgid ""
 "Installation is not allowed after 10 minutes of system startup, please "
 "restart the Nginx UI."
@@ -1555,7 +1556,7 @@ msgstr "無效的請求格式"
 msgid "Invalid AES key format: {0}"
 msgstr "無效的請求格式"
 
-#: src/views/system/Backup/SystemRestore.vue:67
+#: src/components/SystemRestore/SystemRestoreContent.vue:86
 #, fuzzy
 msgid "Invalid file object"
 msgstr "無效的檔案名"
@@ -1852,6 +1853,11 @@ msgstr "下載流量"
 msgid "Network Total Send"
 msgstr "上傳流量"
 
+#: src/views/other/Install.vue:129
+#, fuzzy
+msgid "New Installation"
+msgstr "安裝"
+
 #: src/views/config/components/Rename.vue:72
 msgid "New name"
 msgstr "新名稱"
@@ -1907,7 +1913,7 @@ msgstr "Nginx 配置檔未包含 stream-enabled"
 msgid "Nginx config directory is not set"
 msgstr "Nginx 日誌目錄白名單"
 
-#: src/views/system/Backup/SystemRestore.vue:84
+#: src/components/SystemRestore/SystemRestoreContent.vue:103
 #, fuzzy
 msgid "Nginx configuration has been restored"
 msgstr "Nginx 設定解析錯誤"
@@ -1966,12 +1972,12 @@ msgstr "Nginx 重啟成功"
 msgid "Nginx UI already installed"
 msgstr "此值已被使用"
 
-#: src/views/system/Backup/SystemRestore.vue:88
+#: src/components/SystemRestore/SystemRestoreContent.vue:107
 #, fuzzy
 msgid "Nginx UI configuration has been restored"
 msgstr "Nginx 設定解析錯誤"
 
-#: src/views/system/Backup/SystemRestore.vue:93
+#: src/components/SystemRestore/SystemRestoreContent.vue:112
 #, fuzzy
 msgid ""
 "Nginx UI configuration has been restored and will restart automatically in a "
@@ -2070,6 +2076,7 @@ msgstr "確定"
 #: src/components/ChatGPT/ChatGPT.vue:375
 #: src/components/Notification/Notification.vue:134
 #: src/components/StdDesign/StdDataDisplay/StdBulkActions.vue:95
+#: src/components/SystemRestore/SystemRestoreContent.vue:113
 #: src/views/notification/Notification.vue:38
 #: src/views/site/cert/components/ObtainCert.vue:139
 #: src/views/site/ngx_conf/NgxConfigEditor.vue:50
@@ -2080,7 +2087,6 @@ msgstr "確定"
 #: src/views/stream/components/RightSettings.vue:50
 #: src/views/stream/StreamList.vue:164
 #: src/views/system/Backup/BackupCreator.vue:149
-#: src/views/system/Backup/SystemRestore.vue:94
 msgid "OK"
 msgstr "確定"
 
@@ -2095,7 +2101,7 @@ msgstr "驗證完成後，記錄將被刪除。"
 msgid "Online"
 msgstr "線上"
 
-#: src/views/system/Backup/SystemRestore.vue:24
+#: src/components/SystemRestore/SystemRestoreContent.vue:43
 msgid "Only zip files are allowed"
 msgstr ""
 
@@ -2156,7 +2162,7 @@ msgstr ""
 msgid "Password"
 msgstr "密碼"
 
-#: src/views/other/Install.vue:141
+#: src/views/other/Install.vue:154
 msgid "Password (*)"
 msgstr "密碼 (*)"
 
@@ -2164,7 +2170,7 @@ msgstr "密碼 (*)"
 msgid "Password incorrect"
 msgstr "密碼錯誤"
 
-#: src/views/other/Install.vue:70
+#: src/views/other/Install.vue:75
 msgid "Password length cannot exceed 20 characters"
 msgstr "密碼長度不能超過 20 個字元"
 
@@ -2208,12 +2214,13 @@ msgstr "請輸入您希望創建的通行密鑰名稱，並點擊下面的確定
 msgid "Please enter the OTP code:"
 msgstr "請輸入 OTP 代碼："
 
-#: src/views/system/Backup/SystemRestore.vue:58
+#: src/components/SystemRestore/SystemRestoreContent.vue:77
 #, fuzzy
 msgid "Please enter the security token"
 msgstr "請輸入 OTP 代碼："
 
-#: src/views/system/Backup/SystemRestore.vue:153
+#: src/components/SystemRestore/SystemRestoreContent.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:257
 msgid "Please enter the security token received during backup"
 msgstr ""
 
@@ -2263,15 +2270,15 @@ msgid ""
 "configuration."
 msgstr "請輸入名稱，此名稱將用作新配置的檔案名稱。"
 
-#: src/views/other/Install.vue:54
+#: src/views/other/Install.vue:59
 msgid "Please input your E-mail!"
 msgstr "請輸入您的電子郵件！"
 
-#: src/views/other/Install.vue:66 src/views/other/Login.vue:47
+#: src/views/other/Install.vue:71 src/views/other/Login.vue:47
 msgid "Please input your password!"
 msgstr "請輸入您的密碼！"
 
-#: src/views/other/Install.vue:60 src/views/other/Login.vue:41
+#: src/views/other/Install.vue:65 src/views/other/Login.vue:41
 msgid "Please input your username!"
 msgstr "請輸入您的使用者名稱！"
 
@@ -2284,7 +2291,7 @@ msgstr "請注意，以下時間配置單位均為秒。"
 msgid "Please save this security token, you will need it for restoration:"
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:53
+#: src/components/SystemRestore/SystemRestoreContent.vue:72
 #, fuzzy
 msgid "Please select a backup file"
 msgstr "請至少選擇一個節點！"
@@ -2561,17 +2568,24 @@ msgstr "重新啟動"
 msgid "Restarting"
 msgstr "正在重新啟動"
 
-#: src/views/system/Backup/SystemRestore.vue:81
+#: src/components/SystemRestore/SystemRestoreContent.vue:100
 #, fuzzy
 msgid "Restore completed successfully"
 msgstr "刪除成功"
 
-#: src/views/system/Backup/SystemRestore.vue:165
+#: src/views/other/Install.vue:186
+#, fuzzy
+msgid "Restore from Backup"
+msgstr "系統"
+
+#: src/components/SystemRestore/SystemRestoreContent.vue:193
+#: src/components/SystemRestore/SystemRestoreContent.vue:270
 #, fuzzy
 msgid "Restore Nginx Configuration"
 msgstr "Nginx 配置目錄"
 
-#: src/views/system/Backup/SystemRestore.vue:176
+#: src/components/SystemRestore/SystemRestoreContent.vue:204
+#: src/components/SystemRestore/SystemRestoreContent.vue:281
 #, fuzzy
 msgid "Restore Nginx UI Configuration"
 msgstr "Nginx 配置目錄"
@@ -2687,7 +2701,8 @@ msgstr "SDK"
 msgid "Secret has been copied"
 msgstr "密鑰已複製"
 
-#: src/views/system/Backup/SystemRestore.vue:150
+#: src/components/SystemRestore/SystemRestoreContent.vue:177
+#: src/components/SystemRestore/SystemRestoreContent.vue:254
 msgid "Security Token"
 msgstr ""
 
@@ -2835,7 +2850,8 @@ msgstr "SSO 登錄"
 msgid "Stable"
 msgstr "穩定"
 
-#: src/views/system/Backup/SystemRestore.vue:187
+#: src/components/SystemRestore/SystemRestoreContent.vue:216
+#: src/components/SystemRestore/SystemRestoreContent.vue:293
 msgid "Start Restore"
 msgstr ""
 
@@ -2892,7 +2908,8 @@ msgstr ""
 "理使用，請參考此鏈接編寫對應的配置文件： https://nginxui.com/guide/nginx-"
 "proxy-example.html"
 
-#: src/views/system/Backup/SystemRestore.vue:140
+#: src/components/SystemRestore/SystemRestoreContent.vue:167
+#: src/components/SystemRestore/SystemRestoreContent.vue:244
 msgid "Supported file type: .zip"
 msgstr ""
 
@@ -2983,11 +3000,15 @@ msgstr "系統"
 msgid "System Initial User"
 msgstr "系統初始使用者"
 
-#: src/views/system/Backup/SystemRestore.vue:117
+#: src/components/SystemRestore/SystemRestoreContent.vue:144
 #, fuzzy
 msgid "System Restore"
 msgstr "系統"
 
+#: src/views/other/Install.vue:107
+msgid "System restored successfully. Please log in."
+msgstr ""
+
 #: src/constants/errors/self_check.ts:2
 msgid "Task not found"
 msgstr "找不到任務"
@@ -3009,7 +3030,7 @@ msgstr ""
 "網域憑證將在 30 分鐘內接受檢查，如果自上次簽發以來已超過 1 週或您在設置中設定"
 "的時間，憑證將會自動更新。"
 
-#: src/views/other/Install.vue:76
+#: src/views/other/Install.vue:81
 msgid "The filename cannot contain the following characters: %{c}"
 msgstr "檔名不能包含以下字元: %{c}"
 
@@ -3143,13 +3164,15 @@ msgstr ""
 msgid "This value is already taken"
 msgstr "此值已被使用"
 
-#: src/views/system/Backup/SystemRestore.vue:169
+#: src/components/SystemRestore/SystemRestoreContent.vue:197
+#: src/components/SystemRestore/SystemRestoreContent.vue:274
 msgid ""
 "This will restore all Nginx configuration files. Nginx will restart after "
 "the restoration is complete."
 msgstr ""
 
-#: src/views/system/Backup/SystemRestore.vue:180
+#: src/components/SystemRestore/SystemRestoreContent.vue:208
+#: src/components/SystemRestore/SystemRestoreContent.vue:285
 msgid ""
 "This will restore configuration files and database. Nginx UI will restart "
 "after the restoration is complete."
@@ -3314,7 +3337,7 @@ msgstr "使用者未啟用 OTP 作為雙重身份驗證 (2FA)"
 msgid "Username"
 msgstr "使用者名稱"
 
-#: src/views/other/Install.vue:131
+#: src/views/other/Install.vue:144
 msgid "Username (*)"
 msgstr "使用者名稱 (*)"
 
@@ -3324,7 +3347,8 @@ msgstr "使用者名稱 (*)"
 msgid "Valid"
 msgstr "有效"
 
-#: src/views/system/Backup/SystemRestore.vue:159
+#: src/components/SystemRestore/SystemRestoreContent.vue:186
+#: src/components/SystemRestore/SystemRestoreContent.vue:263
 msgid "Verify Backup File Integrity"
 msgstr ""
 
@@ -3365,7 +3389,8 @@ msgstr "已檢視"
 msgid "Warning"
 msgstr "警告"
 
-#: src/views/system/Backup/SystemRestore.vue:121
+#: src/components/SystemRestore/SystemRestoreContent.vue:148
+#: src/components/SystemRestore/SystemRestoreContent.vue:225
 msgid ""
 "Warning: Restore operation will overwrite current configurations. Make sure "
 "you have a valid backup file and security token, and carefully select what "
diff --git a/app/src/views/other/Install.vue b/app/src/views/other/Install.vue
index c2658cf7..93f13ed6 100644
--- a/app/src/views/other/Install.vue
+++ b/app/src/views/other/Install.vue
@@ -3,13 +3,17 @@ import type { InstallLockResponse } from '@/api/install'
 import install from '@/api/install'
 import SetLanguage from '@/components/SetLanguage/SetLanguage.vue'
 import SwitchAppearance from '@/components/SwitchAppearance/SwitchAppearance.vue'
+import SystemRestoreContent from '@/components/SystemRestore/SystemRestoreContent.vue'
 import { DatabaseOutlined, LockOutlined, MailOutlined, UserOutlined } from '@ant-design/icons-vue'
 
-import { Form, message } from 'ant-design-vue'
+import { Form, message, Tabs } from 'ant-design-vue'
+
+const TabPane = Tabs.TabPane
 
 const thisYear = new Date().getFullYear()
 const loading = ref(false)
 const installTimeout = ref(false)
+const activeTab = ref('1')
 
 const router = useRouter()
 
@@ -97,6 +101,11 @@ function onSubmit() {
     })
   })
 }
+
+function handleRestoreSuccess(): void {
+  message.success($gettext('System restored successfully. Please log in.'))
+  router.push('/login')
+}
 </script>
 
 <template>
@@ -114,61 +123,73 @@ function onSubmit() {
             show-icon
             style="margin-bottom: 20px;"
           />
-          <AForm v-else id="components-form-install">
-            <AFormItem v-bind="validateInfos.email">
-              <AInput
-                v-model:value="modelRef.email"
-                :placeholder="$gettext('Email (*)')"
-              >
-                <template #prefix>
-                  <MailOutlined />
-                </template>
-              </AInput>
-            </AFormItem>
-            <AFormItem v-bind="validateInfos.username">
-              <AInput
-                v-model:value="modelRef.username"
-                :placeholder="$gettext('Username (*)')"
-              >
-                <template #prefix>
-                  <UserOutlined />
-                </template>
-              </AInput>
-            </AFormItem>
-            <AFormItem v-bind="validateInfos.password">
-              <AInputPassword
-                v-model:value="modelRef.password"
-                :placeholder="$gettext('Password (*)')"
-              >
-                <template #prefix>
-                  <LockOutlined />
-                </template>
-              </AInputPassword>
-            </AFormItem>
-            <AFormItem>
-              <AInput
-                v-bind="validateInfos.database"
-                v-model:value="modelRef.database"
-                :placeholder="$gettext('Database (Optional, default: database)')"
-              >
-                <template #prefix>
-                  <DatabaseOutlined />
-                </template>
-              </AInput>
-            </AFormItem>
-            <AFormItem>
-              <AButton
-                type="primary"
-                block
-                html-type="submit"
-                :loading="loading"
-                :disabled="installTimeout"
-                @click="onSubmit"
-              >
-                {{ $gettext('Install') }}
-              </AButton>
-            </AFormItem>
-          </AForm>
+          <div v-else>
+            <Tabs v-model:active-key="activeTab">
+              <TabPane key="1" :tab="$gettext('New Installation')">
+                <AForm id="components-form-install">
+                  <AFormItem v-bind="validateInfos.email">
+                    <AInput
+                      v-model:value="modelRef.email"
+                      :placeholder="$gettext('Email (*)')"
+                    >
+                      <template #prefix>
+                        <MailOutlined />
+                      </template>
+                    </AInput>
+                  </AFormItem>
+                  <AFormItem v-bind="validateInfos.username">
+                    <AInput
+                      v-model:value="modelRef.username"
+                      :placeholder="$gettext('Username (*)')"
+                    >
+                      <template #prefix>
+                        <UserOutlined />
+                      </template>
+                    </AInput>
+                  </AFormItem>
+                  <AFormItem v-bind="validateInfos.password">
+                    <AInputPassword
+                      v-model:value="modelRef.password"
+                      :placeholder="$gettext('Password (*)')"
+                    >
+                      <template #prefix>
+                        <LockOutlined />
+                      </template>
+                    </AInputPassword>
+                  </AFormItem>
+                  <AFormItem>
+                    <AInput
+                      v-bind="validateInfos.database"
+                      v-model:value="modelRef.database"
+                      :placeholder="$gettext('Database (Optional, default: database)')"
+                    >
+                      <template #prefix>
+                        <DatabaseOutlined />
+                      </template>
+                    </AInput>
+                  </AFormItem>
+                  <AFormItem>
+                    <AButton
+                      type="primary"
+                      block
+                      html-type="submit"
+                      :loading="loading"
+                      :disabled="installTimeout"
+                      @click="onSubmit"
+                    >
+                      {{ $gettext('Install') }}
+                    </AButton>
+                  </AFormItem>
+                </AForm>
+              </TabPane>
+              <TabPane key="2" :tab="$gettext('Restore from Backup')">
+                <SystemRestoreContent
+                  :show-title="false"
+                  :on-restore-success="handleRestoreSuccess"
+                />
+              </TabPane>
+            </Tabs>
+          </div>
           <div class="footer">
             <p>Copyright © 2021 - {{ thisYear }} Nginx UI</p>
             Language
diff --git a/app/src/views/system/Backup/SystemRestore.vue b/app/src/views/system/Backup/SystemRestore.vue
index 02ec3b9c..8acb39ca 100644
--- a/app/src/views/system/Backup/SystemRestore.vue
+++ b/app/src/views/system/Backup/SystemRestore.vue
@@ -1,192 +1,7 @@
 <script setup lang="ts">
-import type { RestoreOptions } from '@/api/backup'
-import type { UploadFile } from 'ant-design-vue'
-import backup from '@/api/backup'
-import { InboxOutlined } from '@ant-design/icons-vue'
-import { message, Modal } from 'ant-design-vue'
-import { reactive, ref } from 'vue'
-
-// Use UploadFile from ant-design-vue
-const uploadFiles = ref<UploadFile[]>([])
-const isRestoring = ref(false)
-
-const formModel = reactive({
-  securityToken: '',
-  restoreNginx: true,
-  restoreNginxUI: true,
-  verifyHash: true,
-})
-
-function handleBeforeUpload(file: File) {
-  // Check if file type is zip
-  const isZip = file.name.toLowerCase().endsWith('.zip')
-  if (!isZip) {
-    message.error($gettext('Only zip files are allowed'))
-    uploadFiles.value = []
-    return
-  }
-
-  // Create UploadFile object and directly manage uploadFiles
-  const uploadFile = {
-    uid: Date.now().toString(),
-    name: file.name,
-    status: 'done',
-    size: file.size,
-    type: file.type,
-    originFileObj: file,
-  } as UploadFile
-
-  // Keep only the current file
-  uploadFiles.value = [uploadFile]
-
-  // Prevent default upload behavior
-  return false
-}
-
-// Handle file removal
-function handleRemove() {
-  uploadFiles.value = []
-}
-
-async function doRestore() {
-  if (uploadFiles.value.length === 0) {
-    message.warning($gettext('Please select a backup file'))
-    return
-  }
-
-  if (!formModel.securityToken) {
-    message.warning($gettext('Please enter the security token'))
-    return
-  }
-
-  try {
-    isRestoring.value = true
-
-    const uploadedFile = uploadFiles.value[0]
-    if (!uploadedFile.originFileObj) {
-      message.error($gettext('Invalid file object'))
-      return
-    }
-
-    const options: RestoreOptions = {
-      backup_file: uploadedFile.originFileObj,
-      security_token: formModel.securityToken,
-      restore_nginx: formModel.restoreNginx,
-      restore_nginx_ui: formModel.restoreNginxUI,
-      verify_hash: formModel.verifyHash,
-    }
-
-    const data = await backup.restoreBackup(options)
-
-    message.success($gettext('Restore completed successfully'))
-
-    if (data.nginx_restored) {
-      message.info($gettext('Nginx configuration has been restored'))
-    }
-
-    if (data.nginx_ui_restored) {
-      message.info($gettext('Nginx UI configuration has been restored'))
-
-      // Show warning modal about restart
-      Modal.warning({
-        title: $gettext('Automatic Restart'),
-        content: $gettext('Nginx UI configuration has been restored and will restart automatically in a few seconds.'),
-        okText: $gettext('OK'),
-        maskClosable: false,
-      })
-    }
-
-    if (data.hash_match === false && formModel.verifyHash) {
-      message.warning($gettext('Backup file integrity check failed, it may have been tampered with'))
-    }
-
-    // Reset form after successful restore
-    uploadFiles.value = []
-    formModel.securityToken = ''
-  }
-  catch (error) {
-    console.error('Restore failed:', error)
-  }
-  finally {
-    isRestoring.value = false
-  }
-}
+import SystemRestoreContent from '@/components/SystemRestore/SystemRestoreContent.vue'
 </script>
 
 <template>
-  <ACard :title="$gettext('System Restore')" :bordered="false">
-    <AAlert
-      show-icon
-      type="warning"
-      :message="$gettext('Warning: Restore operation will overwrite current configurations. Make sure you have a valid backup file and security token, and carefully select what to restore.')"
-      class="mb-4"
-    />
-
-    <AUploadDragger
-      :file-list="uploadFiles"
-      :multiple="false"
-      :max-count="1"
-      accept=".zip"
-      :before-upload="handleBeforeUpload"
-      @remove="handleRemove"
-    >
-      <p class="ant-upload-drag-icon">
-        <InboxOutlined />
-      </p>
-      <p class="ant-upload-text">
-        {{ $gettext('Click or drag backup file to this area to upload') }}
-      </p>
-      <p class="ant-upload-hint">
-        {{ $gettext('Supported file type: .zip') }}
-      </p>
-    </AUploadDragger>
-
-    <AForm
-      v-if="uploadFiles.length > 0"
-      :model="formModel"
-      layout="vertical"
-      class="mt-4"
-    >
-      <AFormItem :label="$gettext('Security Token')">
-        <AInput
-          v-model:value="formModel.securityToken"
-          :placeholder="$gettext('Please enter the security token received during backup')"
-        />
-      </AFormItem>
-
-      <AFormItem>
-        <ACheckbox v-model:checked="formModel.verifyHash" :disabled="true">
-          {{ $gettext('Verify Backup File Integrity') }}
-        </ACheckbox>
-      </AFormItem>
-
-      <AFormItem>
-        <ACheckbox v-model:checked="formModel.restoreNginx">
-          {{ $gettext('Restore Nginx Configuration') }}
-        </ACheckbox>
-        <div class="text-gray-500 ml-6 mt-1 text-sm">
-          <p class="mb-0">
-            {{ $gettext('This will restore all Nginx configuration files. Nginx will restart after the restoration is complete.') }}
-          </p>
-        </div>
-      </AFormItem>
-
-      <AFormItem>
-        <ACheckbox v-model:checked="formModel.restoreNginxUI">
-          {{ $gettext('Restore Nginx UI Configuration') }}
-        </ACheckbox>
-        <div class="text-gray-500 ml-6 mt-1 text-sm">
-          <p class="mb-0">
-            {{ $gettext('This will restore configuration files and database. Nginx UI will restart after the restoration is complete.') }}
-          </p>
-        </div>
-      </AFormItem>
-
-      <AFormItem>
-        <AButton type="primary" :loading="isRestoring" @click="doRestore">
-          {{ $gettext('Start Restore') }}
-        </AButton>
-      </AFormItem>
-    </AForm>
-  </ACard>
+  <SystemRestoreContent :show-title="true" />
 </template>
diff --git a/router/routers.go b/router/routers.go
index 3bc43634..91ebbbcc 100644
--- a/router/routers.go
+++ b/router/routers.go
@@ -9,13 +9,13 @@ import (
 	"github.com/0xJacky/Nginx-UI/api/certificate"
 	"github.com/0xJacky/Nginx-UI/api/cluster"
 	"github.com/0xJacky/Nginx-UI/api/config"
+	"github.com/0xJacky/Nginx-UI/api/crypto"
 	"github.com/0xJacky/Nginx-UI/api/nginx"
 	nginxLog "github.com/0xJacky/Nginx-UI/api/nginx_log"
 	"github.com/0xJacky/Nginx-UI/api/notification"
 	"github.com/0xJacky/Nginx-UI/api/openai"
 	"github.com/0xJacky/Nginx-UI/api/public"
 	"github.com/0xJacky/Nginx-UI/api/settings"
-	"github.com/0xJacky/Nginx-UI/api/crypto"
 	"github.com/0xJacky/Nginx-UI/api/sites"
 	"github.com/0xJacky/Nginx-UI/api/streams"
 	"github.com/0xJacky/Nginx-UI/api/system"
@@ -45,6 +45,7 @@ func InitRouter() {
 		public.InitRouter(root)
 		crypto.InitPublicRouter(root)
 		system.InitPublicRouter(root)
+		system.InitBackupRestoreRouter(root)
 		user.InitAuthRouter(root)
 
 		// Authorization required and not websocket request