diff --git a/Logic/chatbot.js b/Logic/chatbot.js
index af33aeaa7aa74085a093998669090efa30699e2c..9936832f74aa8a1751399629a97f11efb507e33f 100644
--- a/Logic/chatbot.js
+++ b/Logic/chatbot.js
@@ -42,3 +42,5 @@ document.getElementById('chatInput').addEventListener('keypress', function(e) {
         e.preventDefault(); // Prevent form from submitting
     }
 });
+
+
diff --git a/Logic/interface.js b/Logic/interface.js
index de482ee6fbea03286a9e96b4c479dd2f744a2dc0..902f7d6d78b20085a36f4ca11a88a70283dfe8eb 100644
--- a/Logic/interface.js
+++ b/Logic/interface.js
@@ -1,84 +1,4 @@
 
-document.getElementById('sendButton').addEventListener('click', function() {
-    var input = document.getElementById('chatInput');
-    var message = input.value.trim();
-    if (message) {
-        appendMessage("user", message, "You");
-
-        // Simulate bot response
-        setTimeout(() => appendMessage("bot", "" + message, "Bot"), 500);
-
-        input.value = ''; // Clear input after sending
-    }
-});
-
-function appendMessage(className, text, avatarUrl, senderName) {
-    var chatLog = document.getElementById('chatLog');
-    var messageDiv = document.createElement('div');
-    messageDiv.classList.add('message', className);
-
-    var textDiv = document.createElement('div');
-    textDiv.classList.add('text');
-    textDiv.textContent = text;
-
-    messageDiv.appendChild(textDiv);
-    chatLog.appendChild(messageDiv);
-    chatLog.scrollTop = chatLog.scrollHeight;
-
-    // 隐藏背景文字
-    chatLog.classList.add('has-messages');
-}
-
-// 检查是否有消息并相应地调整背景文字的显示
-if (document.getElementById('chatLog').children.length > 0) {
-    document.getElementById('chatLog').classList.add('has-messages');
-} else {
-    document.getElementById('chatLog').classList.remove('has-messages');
-}
-
-
-document.getElementById('chatInput').addEventListener('keypress', function(e) {
-    if (e.key === 'Enter') {
-        document.getElementById('sendButton').click();
-        e.preventDefault(); // Prevent form from submitting
-    }
-});
-
 // ####################################################################################################################################
-// //通过JavaScript实现单页应用SPA的效果
-function loadScript(scriptUrl) {
-    return new Promise((resolve, reject) => {
-        const script = document.createElement('script');
-        script.src = scriptUrl;
-        script.onload = resolve;
-        script.onerror = reject;
-        document.head.appendChild(script);
-    });
-}
 
-document.addEventListener('DOMContentLoaded', function() {
-    // ...
-    document.querySelectorAll('.sidebar-item').forEach(item => {
-        item.addEventListener('click', function(e) {
-            e.preventDefault();
-            const targetFile = this.getAttribute('data-target');
-            if (targetFile) {
-                fetch(targetFile)
-                    .then(response => response.text())
-                    .then(html => {
-                        document.getElementById('chatContainer').innerHTML = html;
-                        // 假设你的JavaScript文件名与HTML文件名相同，只是扩展名不同
-                        return loadScript(`js/${targetFile.replace('.html', '.js')}`);
-                    })
-                    .then(() => {
-                        console.log('Script loaded!');
-                    })
-                    .catch(error => {
-                        console.error('Error loading the page or script:', error);
-                    });
-            }
-        });
-    });
-});
-// ####################################################################################################################################
 
diff --git a/Presentation/LoginPage.php b/Presentation/LoginPage.php
index 4c6b0ef1393b2a459d1e7135cb0b2bda6623df5a..cfe82f676ed52853c7eec15851d54354bba3a970 100644
--- a/Presentation/LoginPage.php
+++ b/Presentation/LoginPage.php
@@ -86,6 +86,8 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 
         <input type="hidden" name="formType" value="loginForm">
         <button type="submit">Login</button>
+
+        <a href="register.php" id="registerLink">Don't have an account? Sign up for one!</a>
     </form>
 </div>
 </body>
diff --git a/Presentation/chatPage.php b/Presentation/chatPage.php
index 228d6640198b63f633cea8b6676b6180182ba68e..9130feced458952c0d13b3ea252737b90a99a934 100644
--- a/Presentation/chatPage.php
+++ b/Presentation/chatPage.php
@@ -22,7 +22,7 @@
         <!-- 聊天消息将在这里显示 -->
     </div>
     <div id="message-input">
-        <input type="text" id="message" placeholder="输入消息...">
+        <input type="text" id="message" placeholder="Type message...">
         <button onclick="sendMessage()">Send</button>
     </div>
 </div>
diff --git a/Presentation/chatbotpage.php b/Presentation/chatbotpage.php
index 4cf79b9f0324331245d059a96e98a552835e3ff0..e591367ae2da0edec7980dde8053b846dd4ec58a 100644
--- a/Presentation/chatbotpage.php
+++ b/Presentation/chatbotpage.php
@@ -42,7 +42,6 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
     <link rel="stylesheet" href="../css/chatbotpage.css">
 </head>
 <body>
-<?php include '../Logic/translate.php'; ?>
 <div id="chat-container">
     <div id="chat-history">
         <?php if (!empty($_SESSION['chat_history'])): ?>
@@ -54,7 +53,7 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
     </div>
     <form action="chatbotpage.php" method="post">
         <input type="text" name="userInput" required autofocus>
-        <button type="submit">Ask</button>
+        <button type="submit">Send</button>
     </form>
 </div>
 
diff --git a/Presentation/map.php b/Presentation/map.php
index 8240a3cb2abeb7179b311adb738191d25c59747d..cd1836b0135b6ebc8dd5a10f9b4152255febd22d 100644
--- a/Presentation/map.php
+++ b/Presentation/map.php
@@ -12,7 +12,7 @@ $buildings = $stmt->fetchAll(PDO::FETCH_ASSOC);
     <meta charset="UTF-8">
     <title>School Map Overlay</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
-    <link rel="stylesheet" href="../css/map.css">
+    <link rel="stylesheet" href="../css/map.css?version=1.2">
 </head>
 <body>
 <?php include '../Logic/translate.php'; ?>
@@ -35,9 +35,7 @@ $buildings = $stmt->fetchAll(PDO::FETCH_ASSOC);
     <?php endforeach; ?>
 </nav>
 
-<div id="place-info">
-
-</div>
+<div id="place-info"></div>
 
 <a href="interface.php" id="return-home-btn"><i class="fas fa-arrow-left"></i></a>
 
diff --git a/Presentation/register.php b/Presentation/register.php
index df39bfa77175144a25ce1e699e2f2acff3d627b3..35afeb37cb3188ceb082c308263eed88d755f0b7 100644
--- a/Presentation/register.php
+++ b/Presentation/register.php
@@ -115,6 +115,9 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
                     <input type="hidden" name="formType" value="registerForm">
                     <button type="submit">Register</button>
                 </div>
+                <div class="form-group">
+                    <a href="LoginPage.php">Already have an account? Go log in!</a>
+                </div>
             </form>
         </div>
     </div>
diff --git a/css/LoginPage.css b/css/LoginPage.css
index 0e758b46d0f7b113cd62be7ee68e94383f2fe199..be0a02ae40b1406290201919619dba507941f387 100644
--- a/css/LoginPage.css
+++ b/css/LoginPage.css
@@ -56,8 +56,59 @@ button {
     color: white;
     cursor: pointer;
     border-radius: 4px;
+    margin-bottom: 15px;
 }
 
 button:hover {
     background-color: #292A36;
 }
+
+
+/* 响应式样式调整 */
+@media (max-width: 768px) {
+    .login-container {
+        width: 90%; /* 在小屏幕上减少登录容器的宽度，以适应屏幕 */
+        padding: 20px; /* 在小屏幕上减少内边距，以留出更多空间 */
+        align-items: center;
+    }
+
+    .background-text {
+        font-size: 20px; /* 在小屏幕上减小背景文字的字体大小 */
+    }
+
+    .form-group input,
+    button {
+        padding: 12px; /* 在小屏幕上增加输入框和按钮的内边距，使其更易点击 */
+    }
+
+    .form-group label {
+        margin-bottom: 10px; /* 增加标签和输入框之间的距离 */
+    }
+
+    #registerLink {
+        font-size: 14px; /* 减小注册链接的字体大小，以适应屏幕 */
+    }
+}
+
+@media (max-width: 480px) {
+    body, html {
+        width: 90%; /* 在小屏幕上减少登录容器的宽度，以适应屏幕 */
+        padding: 20px; /* 在小屏幕上减少内边距，以留出更多空间 */
+        align-items: center;
+    }
+
+    .login-container {
+        padding: 15px; /* 进一步减少内边距 */
+        border-radius: 15px; /* 调整边框圆角，以适应小屏幕 */
+    }
+
+    .form-group input,
+    button {
+        font-size: 14px; /* 减小输入框和按钮的字体大小，以更好地适应小屏幕 */
+    }
+
+    .background-text {
+        font-size: 18px; /* 进一步减小背景文字的字体大小 */
+        top: -30px; /* 调整位置，以适应容器大小的变化 */
+    }
+}
diff --git a/css/chatPage.css b/css/chatPage.css
index c2282308fdb1dc7037ed10703374a6a564bcbd2e..6afdce02eaff29460bc6b0171f6b6258365aac4e 100644
--- a/css/chatPage.css
+++ b/css/chatPage.css
@@ -135,3 +135,54 @@ body {
     font-size: 20px; /* 图标大小 */
     vertical-align: middle;
 }
+
+/* 响应式布局调整 */
+@media (max-width: 768px) {
+    body {
+        flex-direction: column; /* 在小屏幕上改为垂直布局 */
+    }
+
+    #sidebar {
+        width: 100%; /* 侧边栏宽度调整为全屏宽 */
+        height: auto; /* 自适应高度 */
+        overflow-y: visible; /* 确保所有内容都可见 */
+        padding: 10px; /* 减少内边距 */
+    }
+
+    #chat-container {
+        width: 100%; /* 聊天容器宽度调整为全屏宽 */
+        padding: 10px; /* 减少内边距 */
+    }
+
+    #message-input input, #message-input button {
+        flex-grow: 1; /* 输入框和按钮填充可用空间 */
+        margin: 5px 0; /* 增加垂直间距 */
+    }
+
+    #message-input {
+        flex-direction: column; /* 将输入框和按钮堆叠为垂直布局 */
+    }
+
+    #return-home-btn {
+        left: auto; /* 调整按钮位置以适应屏幕 */
+        right: 20px; /* 放置在右下角 */
+        postition: fixed;
+    }
+}
+
+@media (max-width: 480px) {
+    /* 对更小屏幕的进一步调整 */
+    #sidebar h2, #sidebar ul li, #chat-box div, #message-input input {
+        font-size: 14px; /* 减小字体大小以适应屏幕 */
+    }
+
+    #sidebar ul li img {
+        width: 40px; /* 调整图片大小以节省空间 */
+        height: 40px;
+    }
+
+    #message-input button {
+        padding: 10px; /* 调整按钮内边距 */
+    }
+}
+
diff --git a/css/chatbotpage.css b/css/chatbotpage.css
index a3bec5c24edbfd762b739697faf4c30530ccecbb..316c6fd306760e28f9ff6d589d9f67d66c4dfdb5 100644
--- a/css/chatbotpage.css
+++ b/css/chatbotpage.css
@@ -12,21 +12,21 @@ html, body {
     flex-direction: column;
     justify-content: space-between;
     height: calc(100vh - 20px);
-    margin: 10px;
     background: #1E1E2E;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     overflow: hidden;
-    margin-top: 50px;
+    padding-top: 70px;
 }
 
 #chat-history {
+    padding-bottom: 65px;
     flex-grow: 1;
     overflow-y: auto;
-    padding: 20px;
     display: flex;
     flex-direction: column;
-    gap: 12px; /* 增加消息之间的间隔 */
+    gap: 10px; /* 增加消息之间的间隔 */
     background: #1E1E2E;
+            /*#1E1E2E;*/
 }
 
 .user, .bot {
@@ -52,8 +52,13 @@ html, body {
 }
 
 form {
+    position: fixed; /* 固定位置 */
+    bottom: 0; /* 底部对齐 */
+    left: 0; /* 左侧对齐 */
+    width: 100%; /* 宽度为100% */
+    box-sizing: border-box; /* 边框和内边距包含在宽度内 */
+    padding: 10px; /* 内边距调整 */
     display: flex;
-    padding: 10px;
     background: #1E1E2E;
     align-items: center; /* 确保表单元素垂直居中 */
 }
@@ -106,17 +111,34 @@ button:hover {
     background: #555; /* 滚动条在鼠标悬停时的颜色变化 */
 }
 
-@media (max-width: 600px) {
+/*——————————————————————————————————————————————————————————————————————————————————————————————————————————————*/
+/* 响应式布局调整 */
+@media (max-width: 768px) {
     #chat-container {
-        height: calc(100vh - 10px);
-        margin: 5px;
+        margin: 0; /* 为顶部侧边栏留出空间 */
+        padding-top: 20px;
     }
 
-    input[type="text"] {
-        width: calc(100% - 90px);
+    #chat-history {
+        margin: 0; /* 取消左侧边距 */
     }
 
-    button {
-        width: 90px;
+    form {
+        width: 100%; /* 确保在小屏幕上表单宽度正确 */
+        padding-bottom: 55px;
     }
+
+    input[type="text"], button {
+        font-size: 14px; /* 调整字体大小 */
+    }
+
+
+/*@media (max-width: 600px) {*/
+/*    form {*/
+/*        padding: 5px; !* 在非常小的屏幕上减少内边距 *!*/
+/*    }*/
+
+/*    input[type="text"] {*/
+/*        padding: 5px; !* 减少输入框内边距 *!*/
+/*    }*/
 }
diff --git a/css/interface.css b/css/interface.css
index 7286e5bd9586e4c98dfacb7ea47444eeb5fc9298..3c770248b6982d88d884e09be3a9c683ba15f2a6 100644
--- a/css/interface.css
+++ b/css/interface.css
@@ -64,17 +64,19 @@ body, html {
     display: flex;
     flex-direction: column;
     /*flex: 1; !* 允许chatContainer自动填充剩余空间 *!*/
-    padding: 15px;
     color: #EAEAEA;
     margin-left: 230px; /* 与侧边栏宽度匹配 */
-    margin-top: 10%;
-    margin-top: 5%;
     transition: margin-left 0.3s; /* 平滑过渡效果 */
     overflow-y: auto; /* 允许在垂直方向上滚动 */
     height: calc(100% - 20px); /* 设置高度以填充剩余空间，减去任何必要的边距 */
     position: relative; /* 为inputContainer提供定位上下文 */
 }
 
+#contentFrame {
+    overflow: auto;
+    height: 100%; /* 或者更大的固定值，如500px，根据需要调整 */
+}
+
 #chatLog {
     flex-grow: 1;
     overflow-y: auto;
@@ -163,7 +165,7 @@ body, html {
     background-color: #292A36;
     color: #EAEAEA; /* 白色文字 */
     text-align: left; /* 文字居中 */
-    padding: 25px 0; /* 上下内边距10px，左右0 */
+    padding: 25px 0; /* 上下内边距25px，左右0 */
     width: 100%; /* 宽度为100% */
     position: fixed; /* 固定位置 */
     top: 0; /* 顶部对齐 */
@@ -175,3 +177,45 @@ body, html {
 #logo {
     margin-left: 30px;
 }
+
+/*——————————————————————————————————————————————————————————————————————————————————————————————————————————————*/
+/* 响应式布局调整 */
+@media (max-width: 768px) {
+    #sidebar {
+        width: 100%; /* 将侧边栏宽度调整为100%，以便横向展开 */
+        height: 60px; /* 设置固定高度 */
+        flex-direction: row; /* 横向布局 */
+        align-items: center; /* 项目居中对齐 */
+        justify-content: space-around; /* 项目之间平均分布 */
+        padding: 0; /* 移除内边距 */
+        top: 0; /* 顶部对齐 */
+        position: fixed; /* 固定位置 */
+    }
+
+    .sidebar-item {
+        margin: 0; /* 移除外边距 */
+        padding: 10px 5px; /* 调整内边距 */
+        font-size: 12px; /* 调整字体大小 */
+    }
+
+    #chatContainer, #inputContainer {
+        margin-top: 60px; /* 为顶部的导航条留出空间 */
+        margin-left: 0; /* 移除左边距 */
+    }
+
+    #inputContainer {
+        position: fixed; /* 固定位置，防止被键盘顶起 */
+        bottom: 0; /* 底部对齐 */
+        left: 0; /* 左侧对齐 */
+        width: 100%; /* 宽度为100% */
+    }
+
+    #topbar {
+        padding: 10px 0; /* 减少上下内边距 */
+        height: auto; /* 自动高度 */
+    }
+
+    #logo {
+        margin-left: 10px; /* 减少左边距 */
+    }
+}
diff --git a/css/map.css b/css/map.css
index e0036ef09db748fa26e5315ef0d2866e4b16cfc3..f47ec3b7a0d9f85a6801e2f7a79876071e0e1123 100644
--- a/css/map.css
+++ b/css/map.css
@@ -112,3 +112,38 @@ body {
     font-size: 20px; /* 图标大小 */
     vertical-align: middle;
 }
+
+/* 响应式布局调整 */
+@media (max-width: 768px) {
+    body {
+        font-size: 16px; /* 在小屏幕上增大基础字体大小 */
+    }
+
+    #map {
+        height: 600px; /* 在小屏幕上减少地图高度 */
+        width: calc(100% - 20px); /* 适应屏幕宽度，减少左右边距 */
+        margin: 0 10px; /* 适应屏幕边缘 */
+    }
+
+    #place-search-bar, #place-nav, #place-info {
+        padding: 60px 30px; /* 在小屏幕上增加内边距，使得元素更大 */
+        margin: 10px 15px; /* 增加外边距，为元素周围提供更多空间 */
+        font-size: 16px; /* 增大文本大小，提高可读性 */
+    }
+
+    #place-search {
+        height: 45px; /* 增加搜索框的高度，使其在触摸屏上更易于点击 */
+        font-size: 16px; /* 增大输入框内字体的大小 */
+    }
+
+    #place-nav button {
+        padding: 12px 18px; /* 减少按钮的内边距 */
+        font-size: 16px; /* 减小字体大小以适应更多按钮 */
+    }
+
+    #return-home-btn {
+        width: 40px; /* 减小返回按钮尺寸 */
+        height: 40px;
+        line-height: 40px; /* 调整图标垂直居中 */
+    }
+}
diff --git a/css/register.css b/css/register.css
index 74b490475b7ab986d9a0fc1413c19669a3dd4c2b..58a89c89b77064bc3ef55e33513b5c0144cff7cf 100644
--- a/css/register.css
+++ b/css/register.css
@@ -113,3 +113,43 @@ body {
 .left-content h3 {
     animation-delay: 2s;
 }
+
+
+
+/* 响应式布局调整 */
+@media (max-width: 768px) {
+    .container {
+        flex-direction: column; /* 在小屏幕上改为垂直布局 */
+        height: auto; /* 调整容器高度为自动，以适应垂直堆叠的布局 */
+    }
+
+    .left, .right {
+        width: 100%; /* 让左右两部分在小屏幕上各自占据100%的宽度 */
+        padding: 20px; /* 调整内边距以保持内容不被挤压 */
+        flex: none; /* 取消之前的flex: 1设置 */
+    }
+
+    .form-container {
+        width: 100%; /* 表单容器宽度调整为100%，以填满右侧区域 */
+        padding: 20px; /* 在小屏幕上减少内边距，以节省空间 */
+    }
+}
+
+@media (max-width: 480px) {
+    .form-container {
+        padding: 15px; /* 在更小屏幕上进一步减少内边距 */
+    }
+
+    .form-container input[type="text"],
+    .form-container input[type="email"],
+    .form-container input[type="password"],
+    .form-container button {
+        padding: 10px; /* 调整输入框和按钮的内边距，使其更易点击 */
+    }
+
+    .left-content h1, .left-content h2, .left-content h3 {
+        font-size: 18px; /* 减小文字大小以适应屏幕尺寸 */
+        animation-delay: 0s; /* 调整动画延迟，以适应布局变化 */
+    }
+}
+
diff --git a/css/settings.css b/css/settings.css
index 158f7e22769e76497c46061ab1ead122ec499dc1..dc5b119d0779694f42ffe696cfc27c50819364ec 100644
--- a/css/settings.css
+++ b/css/settings.css
@@ -234,3 +234,71 @@ body {
     font-size: 20px; /* 图标大小 */
     vertical-align: middle;
 }
+
+/* 响应式布局调整 */
+@media (max-width: 768px) {
+    .container {
+        padding: 20px; /* 在小屏幕上减少容器的内边距 */
+    }
+
+    #topbar {
+        padding: 15px 0; /* 减少顶部栏的垂直内边距 */
+    }
+
+    #logo {
+        margin-left: 10px; /* 减少logo的左边距 */
+    }
+
+    .card {
+        padding: 15px; /* 减少卡片的内边距 */
+        margin: 10px 0; /* 调整卡片的垂直外边距，保持水平居中 */
+    }
+
+    .card h2, .card p, .input-group label, .input-group input, .button, .modern-button {
+        font-size: 14px; /* 减小字体大小，以适应小屏幕 */
+    }
+
+    .avatar {
+        width: 80px; /* 缩小头像尺寸 */
+        height: 80px;
+    }
+
+    .input-group {
+        flex-direction: column; /* 将标签和输入框堆叠为垂直布局 */
+        align-items: flex-start; /* 调整对齐方式 */
+    }
+
+    .input-group label, .toggle-btn {
+        margin-bottom: 5px; /* 为标签和切换按钮添加底部外边距 */
+    }
+
+    .toggle-btn {
+        align-self: center; /* 将切换按钮居中对齐 */
+        margin-top: 10px;
+    }
+
+    #message-input button, #newUsername, #newPassword {
+        width: 100%; /* 让按钮和输入框占满整个容器宽度 */
+    }
+
+    #return-home-btn {
+        right: 10px; /* 调整回首页按钮的位置 */
+        bottom: 10px;
+    }
+}
+
+@media (max-width: 480px) {
+    /* 对更小屏幕的进一步调整 */
+    .card, .modal-content {
+        margin: 10px; /* 减少卡片和模态内容的外边距 */
+        padding: 10px; /* 减少内边距 */
+    }
+
+    .modern-button, .button {
+        padding: 8px 16px; /* 调整按钮的内边距 */
+    }
+
+    .input-group input[type="text"], .input-group input[type="password"] {
+        margin-right: 0; /* 移除输入框右侧外边距 */
+    }
+}