diff --git a/apps/account/static/img/11.jpg b/apps/account/static/img/11.jpg
new file mode 100644
index 0000000..f36192d
Binary files /dev/null and b/apps/account/static/img/11.jpg differ
diff --git a/apps/account/templates/login.html b/apps/account/templates/login.html
index 88607f6..0200631 100644
--- a/apps/account/templates/login.html
+++ b/apps/account/templates/login.html
@@ -1,10 +1,103 @@
+{% load static %}
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
     <meta charset="UTF-8">
-    <title>Title</title>
+    <title>登录页面</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <script type="text/javascript" src="script.js"></script>
+    <style>
+
+        body {
+            margin: 0;
+            padding: 0;
+            background-image: url("{% static 'img/11.jpg' %}");
+            background-size: cover;
+        }
+        div{
+            background-image: url("{% static 'img/xi.png' %}");
+            background-size: cover;
+        }
+
+        .container {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            border-radius: 5px;
+            transform: translate(-50%, -50%);
+            background-color: #ffffff;
+            padding: 50px;
+            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
+        }
+        .c1 {
+            border-radius: 5px;
+            background-color: rgba(0,191,255,0.1);
+        }
+
+        h2 {
+            margin: 0;
+            padding-bottom: 20px;
+            text-align: center;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 10px;
+        }
+
+        input[type="text"],
+        input[type="password"] {
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 20px;
+            border: none;
+            border-radius: 5px;
+            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
+        }
+
+        input[type="submit"] {
+            background-color: #4CAF50;
+            color: #ffffff;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+        }
+
+        input[type="submit"]:hover {
+            background-color: #3e8e41;
+        }
+
+    </style>
 </head>
 <body>
-<h1>登录界面</h1>
+<div class="container c1">
+    <form>
+        <h2>登录</h2>
+        <label for="username">用户名</label>
+        <input type="text" id="username" name="username" required>
+        <label for="password">密码</label>
+        <input type="password" id="password" name="password" required>
+        <input type="submit" value="登录">
+    </form>
+</div>
+
+<script>
+    // 添加表单提交事件
+    document.querySelector('form').addEventListener('submit', function (e) {
+        e.preventDefault(); // 阻止默认的表单提交行为
+        // 获取表单中的用户名和密码
+        var username = document.getElementById('username').value;
+        var password = document.getElementById('password').value;
+        // 在此处编写验证逻辑，此处为示例代码
+        if (username === '' || password === '') {
+            alert('请输入用户名和密码');
+        } else {
+            alert('登录成功');
+        }
+    });
+
+</script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/apps/base/static/img/1.png b/apps/base/static/img/1.png
deleted file mode 100644
index 64e5c1b..0000000
Binary files a/apps/base/static/img/1.png and /dev/null differ
diff --git a/apps/base/templates/index.html b/apps/base/templates/index.html
index d09419c..facd9c3 100644
--- a/apps/base/templates/index.html
+++ b/apps/base/templates/index.html
@@ -47,7 +47,7 @@
             </form>      <!-- 表单提交 -->
 
             <ul class="nav navbar-nav navbar-right">
-                <li><a href="#">登录</a></li>              <!-- 登录选项 -->
+                <li><a href="/login">登录</a></li>              <!-- 登录选项 -->
                 <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                        aria-expanded="false"> Dropdown <span class="caret"></span></a>
