diff --git a/frontend/src/assets/images/1panel-login-bg.jpg b/frontend/src/assets/images/1panel-login-bg.jpg
index 10e599198..71c2096e6 100644
Binary files a/frontend/src/assets/images/1panel-login-bg.jpg and b/frontend/src/assets/images/1panel-login-bg.jpg differ
diff --git a/frontend/src/assets/images/1panel-login.jpg b/frontend/src/assets/images/1panel-login.jpg
index fe189bc8f..41054c96d 100644
Binary files a/frontend/src/assets/images/1panel-login.jpg and b/frontend/src/assets/images/1panel-login.jpg differ
diff --git a/frontend/src/global/use-logo.ts b/frontend/src/global/use-logo.ts
index 9013b1218..0f284d00f 100644
--- a/frontend/src/global/use-logo.ts
+++ b/frontend/src/global/use-logo.ts
@@ -9,6 +9,9 @@ export const useLogo = async () => {
         globalStore.themeConfig.title = res.data.title;
         globalStore.themeConfig.logo = res.data.logo;
         globalStore.themeConfig.logoWithText = res.data.logoWithText;
+        globalStore.themeConfig.loginImage = res.data?.loginImage;
+        globalStore.themeConfig.loginBgType = res.data?.loginBgType;
+        globalStore.themeConfig.loginBackground = res.data?.loginBackground;
         globalStore.themeConfig.favicon = res.data.favicon;
     }
 
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 64eb92c78..04e564bd3 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -3153,8 +3153,17 @@ const message = {
             setDefault: 'Restore Default',
             setHelper: 'The current settings will be saved. Do you want to continue?',
             setDefaultHelper: 'All panel settings will be restored to default. Do you want to continue?',
-            reset: 'Reset',
-            revertHtml: 'Do you want to restore {0} to the default page? ',
+            logoGroup: 'Logo',
+            imageGroup: 'Image',
+            loginImage: 'Login Page Image',
+            loginImageHelper: 'Displayed on the login page (recommended image size: 500*416px)',
+            loginBgType: 'Login Page Background Type',
+            loginBgImage: 'Login Page Background Image',
+            loginBgImageHelper: 'Displayed as background image on the login page (recommended image size: 1920*1080px)',
+            loginBgColor: 'Login Page Background Color',
+            loginBgColorHelper: 'Displayed as background color on the login page',
+            image: 'Image',
+            bgColor: 'Background Color',
         },
         helper: {
             wafTitle1: 'Interception Map',
diff --git a/frontend/src/lang/modules/ja.ts b/frontend/src/lang/modules/ja.ts
index bb3bc68f0..682b681fa 100644
--- a/frontend/src/lang/modules/ja.ts
+++ b/frontend/src/lang/modules/ja.ts
@@ -3009,8 +3009,17 @@ const message = {
             setDefault: 'デフォルトに戻す',
             setHelper: '現在の設定が保存されます。続けますか？',
             setDefaultHelper: 'すべてのパネル設定がデフォルトに戻されます。続けますか？',
-            reset: 'リセット',
-            revertHtml: '{0}をデフォルトページに戻しますか？',
+            logoGroup: 'ロゴ',
+            imageGroup: '画像',
+            loginImage: 'ログインページの画像',
+            loginImageHelper: 'ログインページに表示されます（推奨画像サイズ：500×416px）',
+            loginBgType: 'ログインページ背景タイプ',
+            loginBgImage: 'ログインページ背景画像',
+            loginBgImageHelper: 'ログインページの背景画像として表示されます（推奨画像サイズ：1920×1080px）',
+            loginBgColor: 'ログインページ背景色',
+            loginBgColorHelper: 'ログインページの背景色として表示されます',
+            image: '画像',
+            bgColor: '背景色',
         },
         helper: {
             wafTitle1: 'インターセプションマップ',
diff --git a/frontend/src/lang/modules/ko.ts b/frontend/src/lang/modules/ko.ts
index 349b96a50..8051fa025 100644
--- a/frontend/src/lang/modules/ko.ts
+++ b/frontend/src/lang/modules/ko.ts
@@ -2963,8 +2963,17 @@ const message = {
             setDefault: '기본값 복원',
             setHelper: '현재 설정이 저장됩니다. 계속하시겠습니까?',
             setDefaultHelper: '모든 패널 설정이 기본값으로 복원됩니다. 계속하시겠습니까?',
-            reset: '재설정',
-            revertHtml: '{0}을(를) 기본 페이지로 복원하시겠습니까?',
+            logoGroup: '로고',
+            imageGroup: '이미지',
+            loginImage: '로그인 페이지 이미지',
+            loginImageHelper: '로그인 페이지에 표시됩니다 (권장 크기: 500*416px)',
+            loginBgType: '로그인 배경 유형',
+            loginBgImage: '로그인 배경 이미지',
+            loginBgImageHelper: '로그인 페이지의 배경 이미지로 표시됩니다 (권장 크기: 1920*1080px)',
+            loginBgColor: '로그인 배경 색상',
+            loginBgColorHelper: '로그인 페이지의 배경 색상으로 표시됩니다',
+            image: '이미지',
+            bgColor: '배경 색상',
         },
         helper: {
             wafTitle1: '차단 지도',
diff --git a/frontend/src/lang/modules/ms.ts b/frontend/src/lang/modules/ms.ts
index 99e2646dc..c4e459436 100644
--- a/frontend/src/lang/modules/ms.ts
+++ b/frontend/src/lang/modules/ms.ts
@@ -3079,8 +3079,18 @@ const message = {
             setDefault: 'Pulihkan Tetapan Asal',
             setHelper: 'Tetapan semasa akan disimpan. Adakah anda ingin meneruskan?',
             setDefaultHelper: 'Semua tetapan panel akan dikembalikan ke asal. Adakah anda ingin meneruskan?',
-            reset: 'Tetapkan Semula',
-            revertHtml: 'Adakah anda ingin mengembalikan {0} ke halaman asal?',
+            logoGroup: 'Logo',
+            imageGroup: 'Imej',
+            loginImage: 'Imej Halaman Log Masuk',
+            loginImageHelper: 'Akan dipaparkan di halaman log masuk (Saiz disyorkan: 500*416px)',
+            loginBgType: 'Jenis Latar Halaman Log Masuk',
+            loginBgImage: 'Imej Latar Halaman Log Masuk',
+            loginBgImageHelper:
+                'Akan dipaparkan sebagai latar belakang halaman log masuk (Saiz disyorkan: 1920*1080px)',
+            loginBgColor: 'Warna Latar Halaman Log Masuk',
+            loginBgColorHelper: 'Akan dipaparkan sebagai warna latar belakang halaman log masuk',
+            image: 'Imej',
+            bgColor: 'Warna Latar',
         },
         helper: {
             wafTitle1: 'Peta Pencegahan',
diff --git a/frontend/src/lang/modules/pt-br.ts b/frontend/src/lang/modules/pt-br.ts
index 2186f3fea..15ee6cc35 100644
--- a/frontend/src/lang/modules/pt-br.ts
+++ b/frontend/src/lang/modules/pt-br.ts
@@ -3082,8 +3082,18 @@ const message = {
             setDefault: 'Restaurar Padrão',
             setHelper: 'As configurações atuais serão salvas. Deseja continuar?',
             setDefaultHelper: 'Todas as configurações do painel serão restauradas para o padrão. Deseja continuar?',
-            reset: 'Redefinir',
-            revertHtml: 'Deseja restaurar {0} para a página padrão?',
+            logoGroup: 'Logo',
+            imageGroup: 'Imagem',
+            loginImage: 'Imagem da Página de Login',
+            loginImageHelper: 'Será exibida na página de login (Tamanho recomendado: 500x416px)',
+            loginBgType: 'Tipo de Fundo da Página de Login',
+            loginBgImage: 'Imagem de Fundo da Página de Login',
+            loginBgImageHelper:
+                'Será exibida como imagem de fundo na página de login (Tamanho recomendado: 1920x1080px)',
+            loginBgColor: 'Cor de Fundo da Página de Login',
+            loginBgColorHelper: 'Será exibida como cor de fundo na página de login',
+            image: 'Imagem',
+            bgColor: 'Cor de Fundo',
         },
         helper: {
             wafTitle1: 'Mapa de Interceptação',
diff --git a/frontend/src/lang/modules/ru.ts b/frontend/src/lang/modules/ru.ts
index fef0e2708..c5df0510e 100644
--- a/frontend/src/lang/modules/ru.ts
+++ b/frontend/src/lang/modules/ru.ts
@@ -3073,8 +3073,17 @@ const message = {
             setDefault: 'Восстановить По Умолчанию',
             setHelper: 'Текущие настройки будут сохранены. Вы хотите продолжить?',
             setDefaultHelper: 'Все настройки панели будут восстановлены по умолчанию. Вы хотите продолжить?',
-            reset: 'Сброс',
-            revertHtml: 'Вы хотите восстановить {0} на страницу по умолчанию?',
+            logoGroup: 'Логотип',
+            imageGroup: 'Изображение',
+            loginImage: 'Изображение страницы входа',
+            loginImageHelper: 'Будет отображаться на странице входа (Рекомендуемый размер: 500x416px)',
+            loginBgType: 'Тип фона страницы входа',
+            loginBgImage: 'Фоновое изображение страницы входа',
+            loginBgImageHelper: 'Будет отображаться как фон страницы входа (Рекомендуемый размер: 1920x1080px)',
+            loginBgColor: 'Цвет фона страницы входа',
+            loginBgColorHelper: 'Будет отображаться как цвет фона страницы входа',
+            image: 'Изображение',
+            bgColor: 'Цвет фона',
         },
         helper: {
             wafTitle1: 'Карта Перехватов',
diff --git a/frontend/src/lang/modules/zh-Hant.ts b/frontend/src/lang/modules/zh-Hant.ts
index b2f1b7b7a..0da4e309b 100644
--- a/frontend/src/lang/modules/zh-Hant.ts
+++ b/frontend/src/lang/modules/zh-Hant.ts
@@ -2924,7 +2924,17 @@ const message = {
             setDefault: '復原預設',
             setHelper: '即將儲存目前介面設定內容，是否繼續？',
             setDefaultHelper: '即將復原所有界面設定到初始狀態，是否繼續？',
-            reset: '重設',
+            logoGroup: 'Logo',
+            imageGroup: '圖片',
+            loginImage: '登入頁圖片',
+            loginImageHelper: '將會顯示在登入頁面（建議圖片大小為：500*416px）',
+            loginBgType: '登入頁背景類型',
+            loginBgImage: '登入頁背景圖片',
+            loginBgImageHelper: '將會顯示在登入頁面背景圖片（建議圖片大小為：1920*1080px）',
+            loginBgColor: '登入頁背景顏色',
+            loginBgColorHelper: '將會顯示在登入頁面背景顏色',
+            image: '圖片',
+            bgColor: '背景色',
         },
         helper: {
             wafTitle1: '攔截地圖',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 8b2c3949a..173052792 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -2907,6 +2907,17 @@ const message = {
             reUpload: '选择文件',
             setHelper: '即将保存当前界面设置内容，是否继续？',
             setDefaultHelper: '即将恢复所有界面设置到初始状态，是否继续？',
+            logoGroup: 'Logo',
+            imageGroup: '图片',
+            loginImage: '登录页图片',
+            loginImageHelper: '将会显示在登录页面(建议图片大小为: 500*416px)',
+            loginBgType: '登录页背景类型',
+            loginBgImage: '登录页背景图片',
+            loginBgImageHelper: '将会显示在登录页面背景图片(建议图片大小为: 1920*1080px)',
+            loginBgColor: '登录页背景颜色',
+            loginBgColorHelper: '将会显示在登录页面背景颜色',
+            image: '图片',
+            bgColor: '背景色',
         },
         helper: {
             wafTitle1: '拦截地图',
diff --git a/frontend/src/store/interface/index.ts b/frontend/src/store/interface/index.ts
index 0f2e5f9e0..b6d75f860 100644
--- a/frontend/src/store/interface/index.ts
+++ b/frontend/src/store/interface/index.ts
@@ -10,6 +10,9 @@ export interface ThemeConfigProp {
     logo: string;
     logoWithText: string;
     favicon: string;
+    loginImage: string;
+    loginBgType: string;
+    loginBackground: string;
     themeColor: string;
 }
 
diff --git a/frontend/src/utils/xpack.ts b/frontend/src/utils/xpack.ts
index e6d2863b0..12f0fa2fd 100644
--- a/frontend/src/utils/xpack.ts
+++ b/frontend/src/utils/xpack.ts
@@ -97,6 +97,9 @@ export async function getXpackSettingForTheme() {
             globalStore.themeConfig.logo = res2.data?.logo;
             globalStore.themeConfig.logoWithText = res2.data?.logoWithText;
             globalStore.themeConfig.favicon = res2.data?.favicon;
+            globalStore.themeConfig.loginImage = res2.data?.loginImage;
+            globalStore.themeConfig.loginBgType = res2.data?.loginBgType;
+            globalStore.themeConfig.loginBackground = res2.data?.loginBackground;
             globalStore.themeConfig.themeColor = res2.data?.themeColor;
             globalStore.themeConfig.theme = res2.data?.theme || 'auto';
         } else {
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
index d1a3be818..7b676f23c 100644
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -2,15 +2,23 @@
     <div class="flex items-center justify-center min-h-screen relative bg-gray-100">
         <div
             class="absolute inset-0 bg-cover bg-center bg-no-repeat"
-            :style="{ backgroundImage: `url(${backgroundImage})` }"
+            :style="
+                globalStore.themeConfig.loginBgType === 'color'
+                    ? { backgroundColor: globalStore.themeConfig.loginBackground }
+                    : { backgroundImage: `url(${loadImage('loginBackground')})` }
+            "
         ></div>
         <div
             :style="{ opacity: backgroundOpacity, width: containerWidth, height: containerHeight }"
             class="bg-white shadow-lg relative z-10 border border-gray-200 flex overflow-hidden"
         >
             <div class="grid grid-cols-1 md:grid-cols-2 items-stretch w-full h-full">
-                <div v-if="showLogo">
-                    <img :src="logoImage" class="max-w-full max-h-full object-contain" />
+                <div v-if="showLogo" class="flex justify-center">
+                    <img
+                        :src="loadImage('loginImage')"
+                        class="max-w-full max-h-full object-cover bg-cover bg-center"
+                        alt="1panel"
+                    />
                 </div>
                 <div :class="loginFormClass">
                     <LoginForm ref="loginRef"></LoginForm>
@@ -25,10 +33,8 @@ import LoginForm from './components/login-form.vue';
 import { ref, onMounted } from 'vue';
 import { GlobalStore } from '@/store';
 
-const gStore = GlobalStore();
-const backgroundOpacity = ref(0.8);
-const backgroundImage = ref(new URL('@/assets/images/1panel-login-bg.jpg', import.meta.url).href);
-const logoImage = ref(new URL('@/assets/images/1panel-login.jpg', import.meta.url).href);
+const globalStore = GlobalStore();
+const backgroundOpacity = ref(1);
 
 const mySafetyCode = defineProps({
     code: {
@@ -40,10 +46,32 @@ const mySafetyCode = defineProps({
 const getStatus = async () => {
     let code = mySafetyCode.code;
     if (code != '') {
-        gStore.entrance = code;
+        globalStore.entrance = code;
     }
 };
 
+const loadImage = (name: string) => {
+    switch (name) {
+        case 'loginImage':
+            if (globalStore.themeConfig.loginImage === 'loginImage') {
+                return `/api/v2/images/loginImage?t=${Date.now()}`;
+            }
+            return new URL('@/assets/images/1panel-login.jpg', import.meta.url).href;
+        case 'loginBackground':
+            if (globalStore.themeConfig.loginBgType === 'image') {
+                if (globalStore.themeConfig.loginBackground === 'loginBackground') {
+                    return `/api/v2/images/loginBackground?t=${Date.now()}`;
+                }
+                return new URL('@/assets/images/1panel-login-bg.jpg', import.meta.url).href;
+            } else if (globalStore.themeConfig.loginBgType === 'color') {
+                return globalStore.themeConfig.loginBackground;
+            } else {
+                return new URL('@/assets/images/1panel-login-bg.jpg', import.meta.url).href;
+            }
+    }
+    return '';
+};
+
 onMounted(() => {
     getStatus();
 });