diff --git a/frontend/src/assets/images/1panel-login-bg.png b/frontend/src/assets/images/1panel-login-bg.png
new file mode 100644
index 000000000..abc54d4d6
Binary files /dev/null and b/frontend/src/assets/images/1panel-login-bg.png differ
diff --git a/frontend/src/assets/images/menu-bg.png b/frontend/src/assets/images/menu-bg.png
new file mode 100644
index 000000000..45b863b8f
Binary files /dev/null and b/frontend/src/assets/images/menu-bg.png differ
diff --git a/frontend/src/components/app-layout/menu/index.vue b/frontend/src/components/app-layout/menu/index.vue
index d1acc9c00..7aae9affb 100644
--- a/frontend/src/components/app-layout/menu/index.vue
+++ b/frontend/src/components/app-layout/menu/index.vue
@@ -102,7 +102,7 @@ onMounted(async () => {
     display: flex;
     flex-direction: column;
     height: 100%;
-    background-color: $menu-backgroup-color;
+    background: url(@/assets/images/menu-bg.png) $menu-backgroup-color no-repeat top;
     transition: all 0.3s ease;
 
     .el-scrollbar {
diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index 414eb7f15..219ca31f3 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -105,6 +105,10 @@
     }
 }
 
+.inline-block {
+	display: inline-block;
+}
+
 .form-button {
     float: right;
 }
diff --git a/frontend/src/views/app-store/apps/index.vue b/frontend/src/views/app-store/apps/index.vue
index a7c983609..068002f93 100644
--- a/frontend/src/views/app-store/apps/index.vue
+++ b/frontend/src/views/app-store/apps/index.vue
@@ -220,10 +220,9 @@ onMounted(() => {
             margin-top: 5px;
         }
     }
-}
-
-.app-card:hover {
-    background-color: rgba(0, 94, 235, 0.03);
+    &:hover {
+        background-color: rgba(0, 94, 235, 0.03);
+    }
 }
 
 .tag-button {
diff --git a/frontend/src/views/login/components/login-form.vue b/frontend/src/views/login/components/login-form.vue
index 1791de905..cf66d7790 100644
--- a/frontend/src/views/login/components/login-form.vue
+++ b/frontend/src/views/login/components/login-form.vue
@@ -7,7 +7,7 @@
                     <div class="login-form">
                         <input type="text" class="hide" id="name" />
                         <input type="password" class="hide" id="password" />
-                        <el-form-item prop="name">
+                        <el-form-item prop="name" class="no-border">
                             <el-input
                                 v-model="registerForm.name"
                                 :placeholder="$t('commons.login.username')"
@@ -21,7 +21,7 @@
                                 </template>
                             </el-input>
                         </el-form-item>
-                        <el-form-item prop="password">
+                        <el-form-item prop="password" class="no-border">
                             <el-input
                                 type="password"
                                 clearable
@@ -38,7 +38,7 @@
                                 </template>
                             </el-input>
                         </el-form-item>
-                        <el-form-item prop="rePassword">
+                        <el-form-item prop="rePassword" class="no-border">
                             <el-input
                                 type="password"
                                 clearable
@@ -72,97 +72,91 @@
         </div>
         <div v-else>
             <div v-if="mfaShow">
-                <div class="login-container">
+                <div class="login-form">
                     <el-form>
                         <div class="login-title">{{ $t('commons.login.mfaTitle') }}</div>
-                        <div class="login-form">
-                            <el-form-item>
-                                <el-input
-                                    size="default"
-                                    :placeholder="$t('commons.login.captchaHelper')"
-                                    v-model="mfaLoginForm.code"
-                                >
-                                    <template #prefix>
-                                        <el-icon class="el-input__icon">
-                                            <Finished />
-                                        </el-icon>
-                                    </template>
-                                </el-input>
-                            </el-form-item>
-                            <el-form-item>
-                                <el-button class="login-button" type="primary" size="default" round @click="mfaLogin()">
-                                    {{ $t('commons.button.verify') }}
-                                </el-button>
-                            </el-form-item>
-                        </div>
+                        <el-form-item class="no-border">
+                            <el-input
+                                size="default"
+                                :placeholder="$t('commons.login.captchaHelper')"
+                                v-model="mfaLoginForm.code"
+                            >
+                                <template #prefix>
+                                    <el-icon class="el-input__icon">
+                                        <Finished />
+                                    </el-icon>
+                                </template>
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button class="login-button" type="primary" size="default" round @click="mfaLogin()">
+                                {{ $t('commons.button.verify') }}
+                            </el-button>
+                        </el-form-item>
                     </el-form>
                 </div>
             </div>
             <div v-if="!mfaShow">
-                <div class="login-container">
+                <div class="login-form">
                     <el-form ref="loginFormRef" :model="loginForm" size="default" :rules="loginRules">
                         <div class="login-title">{{ $t('commons.button.login') }}</div>
-                        <div class="login-form">
-                            <el-form-item prop="name">
-                                <el-input
-                                    v-model="loginForm.name"
-                                    :placeholder="$t('commons.login.username')"
-                                    class="form-input"
-                                >
-                                    <template #prefix>
-                                        <el-icon class="el-input__icon">
-                                            <user />
-                                        </el-icon>
-                                    </template>
-                                </el-input>
-                            </el-form-item>
-                            <el-form-item prop="password">
-                                <el-input
-                                    type="password"
-                                    clearable
-                                    v-model="loginForm.password"
-                                    show-password
-                                    :placeholder="$t('commons.login.password')"
-                                >
-                                    <template #prefix>
-                                        <el-icon class="el-input__icon">
-                                            <lock />
-                                        </el-icon>
-                                    </template>
-                                </el-input>
-                                <span v-if="errAuthInfo" class="input-error" style="line-height: 14px">
-                                    {{ $t('commons.login.errorAuthInfo') }}
-                                </span>
-                            </el-form-item>
-                            <el-form-item prop="captcha" class="login-captcha">
-                                <el-input
-                                    v-model="loginForm.captcha"
-                                    :placeholder="$t('commons.login.captchaHelper')"
-                                />
-                                <img
-                                    v-if="captcha.imagePath"
-                                    :src="captcha.imagePath"
-                                    :alt="$t('commons.login.captchaHelper')"
-                                    @click="loginVerify()"
-                                />
-                                <span v-if="errCaptcha" class="input-error" style="line-height: 14px">
-                                    {{ $t('commons.login.errorCaptcha') }}
-                                </span>
-                            </el-form-item>
-                            <el-form-item>
-                                <el-button
-                                    @click="login(loginFormRef)"
-                                    @focus="loginButtonFocused = true"
-                                    @blur="loginButtonFocused = false"
-                                    class="login-button"
-                                    type="primary"
-                                    size="default"
-                                    round
-                                >
-                                    {{ $t('commons.button.login') }}
-                                </el-button>
-                            </el-form-item>
-                        </div>
+
+                        <el-form-item prop="name" class="no-border">
+                            <el-input
+                                v-model="loginForm.name"
+                                :placeholder="$t('commons.login.username')"
+                                class="form-input"
+                            >
+                                <template #prefix>
+                                    <el-icon class="el-input__icon">
+                                        <user />
+                                    </el-icon>
+                                </template>
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item prop="password" class="no-border">
+                            <el-input
+                                type="password"
+                                clearable
+                                v-model="loginForm.password"
+                                show-password
+                                :placeholder="$t('commons.login.password')"
+                            >
+                                <template #prefix>
+                                    <el-icon class="el-input__icon">
+                                        <lock />
+                                    </el-icon>
+                                </template>
+                            </el-input>
+                            <span v-if="errAuthInfo" class="input-error" style="line-height: 14px">
+                                {{ $t('commons.login.errorAuthInfo') }}
+                            </span>
+                        </el-form-item>
+                        <el-form-item prop="captcha" class="login-captcha">
+                            <el-input v-model="loginForm.captcha" :placeholder="$t('commons.login.captchaHelper')" />
+                            <img
+                                v-if="captcha.imagePath"
+                                :src="captcha.imagePath"
+                                :alt="$t('commons.login.captchaHelper')"
+                                @click="loginVerify()"
+                            />
+                            <span v-if="errCaptcha" class="input-error" style="line-height: 14px">
+                                {{ $t('commons.login.errorCaptcha') }}
+                            </span>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button
+                                @click="login(loginFormRef)"
+                                @focus="loginButtonFocused = true"
+                                @blur="loginButtonFocused = false"
+                                class="login-button"
+                                type="primary"
+                                size="default"
+                                round
+                            >
+                                {{ $t('commons.button.login') }}
+                            </el-button>
+                        </el-form-item>
                     </el-form>
                 </div>
             </div>
@@ -342,7 +336,8 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-.login-container {
+.login-form {
+    padding: 0 40px;
     .hide {
         width: 0;
         border: 0;
@@ -350,39 +345,41 @@ onMounted(() => {
     }
 
     .login-title {
-        margin-top: 50px;
-        font-size: 32px;
+        // margin-top: 50px;
+        font-size: 30px;
         letter-spacing: 0;
         text-align: center;
         color: #646a73;
+        margin-bottom: 30px;
+        // @media only screen and (max-width: 1280px) {
+        //     margin-top: 20px;
+        // }
+    }
+    .no-border {
+        :deep(.el-input__wrapper) {
+            background: none !important;
+            box-shadow: none !important;
+            border-radius: 0 !important;
+            border-bottom: 1px solid $menu-backgroup-color;
 
-        @media only screen and (max-width: 1280px) {
-            margin-top: 20px;
+            // --el-input-focus-border: $menu-backgroup-color;
+            // --el-input-transparent-border: 0 0 0 0px;
+            // --el-input-border-color: $menu-backgroup-color;
+            // --el-input-hover-border: 0px !important;
+            // --el-input-hover-border-color: $menu-backgroup-color;
+            // --el-input-focus-border-color: $menu-backgroup-color;
+            // --el-input-clear-hover-color: $menu-backgroup-color;
+            // box-shadow: 0 0 0 0px !important;
+            // --el-input-border: 0px;
         }
     }
 
-    .login-form {
-        margin-top: 30px;
-        padding: 0 40px;
-
-        .el-input {
-            height: 44px;
-        }
-
-        :deep(.el-input) {
-            --el-input-focus-border: $menu-backgroup-color;
-            --el-input-transparent-border: 0 0 0 0px;
-            --el-input-border-color: $menu-backgroup-color;
-            --el-input-hover-border: 0px !important;
-            --el-input-hover-border-color: $menu-backgroup-color;
-            --el-input-focus-border-color: $menu-backgroup-color;
-            --el-input-clear-hover-color: $menu-backgroup-color;
-            box-shadow: 0 0 0 0px !important;
-            --el-input-border: 0px;
-        }
+    .el-input {
+        height: 44px;
     }
 
     .login-captcha {
+        margin-top: 10px;
         .el-input {
             width: 50%;
             height: 44px;
@@ -426,6 +423,7 @@ onMounted(() => {
     .login-button {
         width: 100%;
         height: 45px;
+        margin-top: 10px;
     }
 }
 </style>
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
index 7168d6f31..34bb059f1 100644
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -1,11 +1,26 @@
 <template>
     <div>
         <div class="login-backgroud" v-if="statusCode == 1">
-            <div class="login-title">
-                <span>1Panel 现代化的 Linux 面板</span>
+            <div class="login-wrapper" v-if="screenWidth > 1000">
+                <div class="left inline-block">
+                    <div class="login-title">
+                        <span>1Panel 现代化的 Linux 面板</span>
+                    </div>
+                    <img src="@/assets/images/1Panel-login.png" alt="" />
+                </div>
+                <div class="right inline-block">
+                    <div class="login-container">
+                        <LoginForm ref="loginRef"></LoginForm>
+                    </div>
+                </div>
             </div>
-            <div class="login-container">
-                <LoginForm ref="loginRef"></LoginForm>
+            <div class="login-wrapper" v-else>
+                <div class="login-title">
+                    <span>1Panel 现代化的 Linux 面板</span>
+                </div>
+                <div class="login-container">
+                    <LoginForm ref="loginRef"></LoginForm>
+                </div>
             </div>
         </div>
         <div style="margin-left: 50px" v-if="statusCode == -1">
@@ -34,13 +49,29 @@ import LoginForm from './components/login-form.vue';
 import { ref, onMounted } from 'vue';
 
 const statusCode = ref<number>(0);
+const screenWidth = ref(null);
 
 const getStatus = async () => {
     statusCode.value = 1;
 };
 
+// watch(
+//     () => screenWidth.value,
+//     (newVal) => {
+//     console.log()
+//     },
+// );
+
 onMounted(() => {
     getStatus();
+    // 屏幕适配
+    screenWidth.value = document.body.clientWidth;
+    window.onresize = () => {
+        //屏幕尺寸变化就重新赋值
+        return (() => {
+            screenWidth.value = document.body.clientWidth;
+        })();
+    };
 });
 </script>
 
@@ -50,40 +81,76 @@ onMounted(() => {
     justify-content: center;
     align-items: center;
 }
+
 .login-backgroud {
     height: 100vh;
-    display: flex;
-    // @include login-center;
-    background-image: url(@/assets/images/1Panel-login.png);
-    background-color: $menu-backgroup-color;
-    background-position: 0% 40%;
-    background-size: 70%;
-    background-repeat: no-repeat;
+    background: url(@/assets/images/1panel-login-bg.png) no-repeat,
+        radial-gradient(153.25% 257.2% at 118.99% 181.67%, rgba(50, 132, 255, 0.2) 0%, rgba(82, 120, 255, 0) 100%)
+            /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
+        radial-gradient(123.54% 204.83% at 25.87% 195.17%, rgba(111, 76, 253, 0.15) 0%, rgba(122, 76, 253, 0) 78.85%)
+            /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
+        linear-gradient(0deg, rgba(0, 94, 235, 0.03), rgba(0, 94, 235, 0.03)),
+        radial-gradient(109.58% 109.58% at 31.53% -36.58%, rgba(0, 94, 235, 0.3) 0%, rgba(0, 94, 235, 0) 100%)
+            /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
+        rgba(0, 57, 142, 0.05);
+
+    .login-wrapper {
+        padding-top: 10%;
+        width: 80%;
+        margin: 0 auto;
+        @media only screen and (max-width: 1280px) {
+            width: 100%;
+        }
+        .left {
+            vertical-align: middle;
+            text-align: right;
+            width: 60%;
+            img {
+                object-fit: contain;
+                width: 100%;
+            }
+        }
+        .right {
+            vertical-align: middle;
+            width: 40%;
+        }
+    }
 
     .login-title {
-        margin-top: 10%;
-        text-align: center;
-        margin-left: 15%;
+        // margin-top: 10%;
+        margin-right: 15%;
         span:first-child {
             color: $primary-color;
-            font-size: 48px;
+            font-size: 40px;
             font-family: pingFangSC-Regular;
+            font-weight: 600;
+            @media only screen and (max-width: 1440px) {
+                font-size: 38px;
+            }
+        }
+        @media only screen and (max-width: 1000px) {
+            margin-bottom: 20px;
+            font-size: 35px;
+            text-align: center;
+            margin-right: 0;
+        }
+    }
+    .login-container {
+        // margin-left: 15%;
+        margin-top: 40px;
+        padding: 40px 0;
+        width: 390px;
+        // height: 422px;
+        box-sizing: border-box;
+        background-color: rgba(255, 255, 255, 0.55);
+        border-radius: 4px;
+        box-shadow: 2px 4px 22px rgba(0, 94, 235, 0.2);
+        @media only screen and (max-width: 1440px) {
+            margin-top: 100px;
+        }
+        @media only screen and (max-width: 1000px) {
+            margin: 0 auto;
         }
     }
 }
-
-.login-container {
-    margin-top: 19%;
-    margin-left: 15%;
-    width: 394px;
-    height: 422px;
-    background-color: rgba(255, 255, 255, 0.55);
-    border-radius: 4px;
-
-    box-shadow: 2px 4px 22px rgba(0, 94, 235, 0.2);
-    @media only screen and (max-width: 1280px) {
-        width: 900px;
-        height: 380px;
-    }
-}
 </style>