diff --git a/src/auto-import.d.ts b/src/auto-import.d.ts
index 65b02fd..714a6ac 100644
--- a/src/auto-import.d.ts
+++ b/src/auto-import.d.ts
@@ -5,67 +5,79 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const EffectScope: typeof import('vue')['EffectScope']
-  const computed: typeof import('vue')['computed']
-  const createApp: typeof import('vue')['createApp']
-  const customRef: typeof import('vue')['customRef']
-  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
-  const defineComponent: typeof import('vue')['defineComponent']
-  const effectScope: typeof import('vue')['effectScope']
-  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
-  const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const h: typeof import('vue')['h']
-  const inject: typeof import('vue')['inject']
-  const isProxy: typeof import('vue')['isProxy']
-  const isReactive: typeof import('vue')['isReactive']
-  const isReadonly: typeof import('vue')['isReadonly']
-  const isRef: typeof import('vue')['isRef']
-  const markRaw: typeof import('vue')['markRaw']
-  const nextTick: typeof import('vue')['nextTick']
-  const onActivated: typeof import('vue')['onActivated']
-  const onBeforeMount: typeof import('vue')['onBeforeMount']
-  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
-  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
-  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
-  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
-  const onDeactivated: typeof import('vue')['onDeactivated']
-  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
-  const onMounted: typeof import('vue')['onMounted']
-  const onRenderTracked: typeof import('vue')['onRenderTracked']
-  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
-  const onScopeDispose: typeof import('vue')['onScopeDispose']
-  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
-  const onUnmounted: typeof import('vue')['onUnmounted']
-  const onUpdated: typeof import('vue')['onUpdated']
-  const provide: typeof import('vue')['provide']
-  const reactive: typeof import('vue')['reactive']
-  const readonly: typeof import('vue')['readonly']
-  const ref: typeof import('vue')['ref']
-  const resolveComponent: typeof import('vue')['resolveComponent']
-  const shallowReactive: typeof import('vue')['shallowReactive']
-  const shallowReadonly: typeof import('vue')['shallowReadonly']
-  const shallowRef: typeof import('vue')['shallowRef']
-  const toRaw: typeof import('vue')['toRaw']
-  const toRef: typeof import('vue')['toRef']
-  const toRefs: typeof import('vue')['toRefs']
-  const toValue: typeof import('vue')['toValue']
-  const triggerRef: typeof import('vue')['triggerRef']
-  const unref: typeof import('vue')['unref']
-  const useAttrs: typeof import('vue')['useAttrs']
-  const useCssModule: typeof import('vue')['useCssModule']
-  const useCssVars: typeof import('vue')['useCssVars']
-  const useLink: typeof import('vue-router')['useLink']
-  const useRoute: typeof import('vue-router')['useRoute']
-  const useRouter: typeof import('vue-router')['useRouter']
-  const useSlots: typeof import('vue')['useSlots']
-  const watch: typeof import('vue')['watch']
-  const watchEffect: typeof import('vue')['watchEffect']
-  const watchPostEffect: typeof import('vue')['watchPostEffect']
-  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+  const EffectScope: (typeof import("vue"))["EffectScope"];
+  const computed: (typeof import("vue"))["computed"];
+  const createApp: (typeof import("vue"))["createApp"];
+  const customRef: (typeof import("vue"))["customRef"];
+  const defineAsyncComponent: (typeof import("vue"))["defineAsyncComponent"];
+  const defineComponent: (typeof import("vue"))["defineComponent"];
+  const effectScope: (typeof import("vue"))["effectScope"];
+  const getCurrentInstance: (typeof import("vue"))["getCurrentInstance"];
+  const getCurrentScope: (typeof import("vue"))["getCurrentScope"];
+  const h: (typeof import("vue"))["h"];
+  const inject: (typeof import("vue"))["inject"];
+  const isProxy: (typeof import("vue"))["isProxy"];
+  const isReactive: (typeof import("vue"))["isReactive"];
+  const isReadonly: (typeof import("vue"))["isReadonly"];
+  const isRef: (typeof import("vue"))["isRef"];
+  const markRaw: (typeof import("vue"))["markRaw"];
+  const nextTick: (typeof import("vue"))["nextTick"];
+  const onActivated: (typeof import("vue"))["onActivated"];
+  const onBeforeMount: (typeof import("vue"))["onBeforeMount"];
+  const onBeforeRouteLeave: (typeof import("vue-router"))["onBeforeRouteLeave"];
+  const onBeforeRouteUpdate: (typeof import("vue-router"))["onBeforeRouteUpdate"];
+  const onBeforeUnmount: (typeof import("vue"))["onBeforeUnmount"];
+  const onBeforeUpdate: (typeof import("vue"))["onBeforeUpdate"];
+  const onDeactivated: (typeof import("vue"))["onDeactivated"];
+  const onErrorCaptured: (typeof import("vue"))["onErrorCaptured"];
+  const onMounted: (typeof import("vue"))["onMounted"];
+  const onRenderTracked: (typeof import("vue"))["onRenderTracked"];
+  const onRenderTriggered: (typeof import("vue"))["onRenderTriggered"];
+  const onScopeDispose: (typeof import("vue"))["onScopeDispose"];
+  const onServerPrefetch: (typeof import("vue"))["onServerPrefetch"];
+  const onUnmounted: (typeof import("vue"))["onUnmounted"];
+  const onUpdated: (typeof import("vue"))["onUpdated"];
+  const provide: (typeof import("vue"))["provide"];
+  const reactive: (typeof import("vue"))["reactive"];
+  const readonly: (typeof import("vue"))["readonly"];
+  const ref: (typeof import("vue"))["ref"];
+  const resolveComponent: (typeof import("vue"))["resolveComponent"];
+  const shallowReactive: (typeof import("vue"))["shallowReactive"];
+  const shallowReadonly: (typeof import("vue"))["shallowReadonly"];
+  const shallowRef: (typeof import("vue"))["shallowRef"];
+  const toRaw: (typeof import("vue"))["toRaw"];
+  const toRef: (typeof import("vue"))["toRef"];
+  const toRefs: (typeof import("vue"))["toRefs"];
+  const toValue: (typeof import("vue"))["toValue"];
+  const triggerRef: (typeof import("vue"))["triggerRef"];
+  const unref: (typeof import("vue"))["unref"];
+  const useAttrs: (typeof import("vue"))["useAttrs"];
+  const useCssModule: (typeof import("vue"))["useCssModule"];
+  const useCssVars: (typeof import("vue"))["useCssVars"];
+  const useLink: (typeof import("vue-router"))["useLink"];
+  const useRoute: (typeof import("vue-router"))["useRoute"];
+  const useRouter: (typeof import("vue-router"))["useRouter"];
+  const useSlots: (typeof import("vue"))["useSlots"];
+  const watch: (typeof import("vue"))["watch"];
+  const watchEffect: (typeof import("vue"))["watchEffect"];
+  const watchPostEffect: (typeof import("vue"))["watchPostEffect"];
+  const watchSyncEffect: (typeof import("vue"))["watchSyncEffect"];
 }
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
-  import('vue')
+  export type {
+    Component,
+    ComponentPublicInstance,
+    ComputedRef,
+    ExtractDefaultPropTypes,
+    ExtractPropTypes,
+    ExtractPublicPropTypes,
+    InjectionKey,
+    PropType,
+    Ref,
+    VNode,
+    WritableComputedRef
+  } from "vue";
+  import("vue");
 }
diff --git a/src/components.d.ts b/src/components.d.ts
index fa3e33e..3a9bd79 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -5,10 +5,10 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
-declare module 'vue' {
+declare module "vue" {
   export interface GlobalComponents {
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
+    RouterLink: (typeof import("vue-router"))["RouterLink"];
+    RouterView: (typeof import("vue-router"))["RouterView"];
+    SvgIcon: (typeof import("./components/SvgIcon/index.vue"))["default"];
   }
 }
diff --git a/src/icons/wechat.svg b/src/icons/wechat.svg
new file mode 100644
index 0000000..60c72a6
--- /dev/null
+++ b/src/icons/wechat.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1712590570197" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6039" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M712.149333 352.234667c5.184 0 10.282667 0.064 15.381334 0.341333-26.944-146.837333-178.602667-259.2-361.642667-259.2-202.090667 0-365.888 137.002667-365.888 306.005333 0 99.093333 56.298667 187.178667 143.637333 243.093334l3.349334 2.133333-35.349334 110.72 132.266667-67.370667 6.229333 1.792a431.296 431.296 0 0 0 140.330667 14.848 237.141333 237.141333 0 0 1-11.626667-73.002666c0.021333-154.282667 149.290667-279.36 333.312-279.36z m-218.901333-107.968c28.373333 0 51.349333 22.250667 51.349333 49.728 0 27.456-22.976 49.770667-51.349333 49.770666-28.416 0-51.370667-22.293333-51.370667-49.770666-0.021333-27.498667 22.954667-49.728 51.370667-49.728z m-254.677333 99.477333c-28.394667 0-51.370667-22.293333-51.370667-49.770667 0-27.477333 22.997333-49.728 51.370667-49.728 28.394667 0 51.434667 22.250667 51.434666 49.728s-23.04 49.770667-51.434666 49.770667z" fill="#46AF35" p-id="6040"></path><path d="M405.76 633.408c0 142.805333 138.453333 258.56 309.162667 258.56a363.392 363.392 0 0 0 103.04-14.762667l111.701333 56.96-29.866667-93.589333 2.816-1.792c73.770667-47.232 121.344-121.621333 121.344-205.397333 0-142.741333-138.389333-258.496-309.056-258.496-170.688 0.042667-309.141333 115.776-309.141333 258.517333z m373.312-89.045333c0-23.168 19.413333-41.962667 43.370667-41.962667 24.021333 0 43.413333 18.816 43.413333 41.962667 0 23.253333-19.413333 42.090667-43.413333 42.090666-23.957333 0-43.370667-18.858667-43.370667-42.090666z m-215.146667 0c0-23.168 19.456-41.962667 43.413334-41.962667 23.978667 0 43.413333 18.816 43.413333 41.962667 0 23.253333-19.434667 42.090667-43.413333 42.090666-23.957333 0-43.413333-18.858667-43.413334-42.090666z" fill="#46AF35" p-id="6041"></path></svg>
\ No newline at end of file
diff --git a/src/views/login/login.vue b/src/views/login/login.vue
index 90b9333..c6197d1 100644
--- a/src/views/login/login.vue
+++ b/src/views/login/login.vue
@@ -1,90 +1,105 @@
 <template>
   <div class="container">
-    <div class="logo_box">
-      <img :src="myImage" alt="logo" class="logo margin-right-text" />
-      DC Admin
+    <div class="login">
+      <div class="banner_box"></div>
+      <div class="login_box">
+        <div class="login_title">DC Admin</div>
+        <div class="login_title_desc">丰富的的页面模板，覆盖大多数典型业务场景</div>
+        <div class="login_title_desc">国际化，路由配置，状态管理应有尽有</div>
+        <div class="login_form_box">
+          <a-form :model="form" layout="vertical">
+            <a-form-item field="username" label="账号">
+              <a-input v-model="form.username" placeholder="请输入账号" />
+            </a-form-item>
+            <a-form-item field="password" label="密码">
+              <a-input v-model="form.password" placeholder="请输入密码" />
+            </a-form-item>
+            <a-form-item field="remember">
+              <div class="remember">
+                <a-checkbox v-model="form.remember">记住密码</a-checkbox>
+                <div class="forgot-password">忘记密码</div>
+              </div>
+            </a-form-item>
+            <a-form-item>
+              <a-button long type="primary">登录</a-button>
+            </a-form-item>
+          </a-form>
+        </div>
+        <div class="register">注册账号</div>
+        <div class="desc">DC-Admin by 兔子先森</div>
+      </div>
     </div>
-    <div class="banner">
-      <a-carousel
-        :style="{
-          width: '100%',
-          height: '100%'
-        }"
-        :default-current="2"
-        :auto-play="true"
-        animation-name="fade"
-        indicator-type="dot"
-        show-arrow="hover"
-        class="banner_box"
-      >
-        <a-carousel-item v-for="item in banner" :key="item.id">
-          <div class="banner_inner"></div>
-        </a-carousel-item>
-      </a-carousel>
-    </div>
-    <div class="login">登录</div>
   </div>
 </template>
 
 <script setup lang="ts">
-import myImage from "@/assets/img/my-image.jpg";
-const banner = ref([
-  {
-    id: 1,
-    title: "开箱即用的高质量模板",
-    desc: "丰富的的页面模板，覆盖大多数典型业务场景",
-    src: "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
-  },
-  {
-    id: 2,
-    title: "内置了常见问题的解决方案",
-    desc: "国际化，路由配置，状态管理应有尽有",
-    src: "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp"
-  },
-  {
-    id: 3,
-    title: "接入可视化增强工具",
-    desc: "实现灵活的区块式开发",
-    src: "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp"
-  }
-]);
+const form = ref({
+  username: null,
+  password: null,
+  remember: null
+});
 </script>
 
 <style lang="scss" scoped>
 .container {
   height: 100vh;
-  display: flex;
   position: relative;
-  .banner {
-    width: 550px;
-    height: 100%;
-    background: #eee;
+  .login {
+    width: 1000px;
+    height: 500px;
+    left: 50%;
+    top: 50%;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    box-shadow: 0 0 8px 1px $color-fill-1;
     .banner_box {
+      width: 650px;
       height: 100%;
-      background: linear-gradient(163.85deg, #1d2129 0%, #00308f 100%);
-      .banner_inner {
-        height: 100%;
+      background: linear-gradient(45deg, #3d65f9, #ffffff);
+    }
+    .login_box {
+      width: 350px;
+      height: 100%;
+      box-sizing: border-box;
+      padding: 40px 30px 30px 30px;
+      position: relative;
+      .login_title {
+        font-size: $font-size-title-2;
+        color: $color-text-1;
+        margin-bottom: $margin-text;
+      }
+      .login_title_desc {
+        font-size: $font-size-body-1;
+        color: $color-text-3;
+      }
+      .login_form_box {
+        margin-top: 28px;
+        .remember {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .forgot-password {
+            color: $color-primary;
+            cursor: pointer;
+          }
+        }
+      }
+      .register {
+        text-align: center;
+        color: $color-text-3;
+        font-size: $font-size-body-1;
+        cursor: pointer;
+      }
+      .desc {
+        color: $color-text-4;
+        font-size: $font-size-body-1;
+        position: absolute;
+        bottom: 30px;
       }
     }
   }
-  .login {
-    width: 100%;
-    height: 100%;
-  }
-}
-.logo_box {
-  position: absolute;
-  left: $margin;
-  top: $margin;
-  margin: $margin;
-  color: #fff;
-  font-size: $font-size-title-2;
-  display: flex;
-  align-items: center;
-  z-index: 1000;
-  .logo {
-    width: 50px;
-    border-radius: 50%;
-  }
 }
 </style>