diff --git a/Data/UWE_Bus_Service.jpg b/Data/UWE_Bus_Service.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5f4bc9a90d58a97c09186529f09d6ff042b41894
Binary files /dev/null and b/Data/UWE_Bus_Service.jpg differ
diff --git a/Presentation/city.php b/Presentation/city.php
new file mode 100644
index 0000000000000000000000000000000000000000..6733e5ae694c39d6399dac80bf8339b9d0d039db
--- /dev/null
+++ b/Presentation/city.php
@@ -0,0 +1,110 @@
+<?php
+require_once '../Logic/config.php';
+require_once '../Logic/session_start.php';
+
+$stmt = DB->prepare("SELECT * FROM city_building");
+$stmt->execute();
+$buildings = $stmt->fetchAll(PDO::FETCH_ASSOC);
+?>
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>Bristol 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/city.css">
+</head>
+<body>
+<div id="map" style="height: 500px; width: 100%;"></div>
+
+<div id="place-search-bar">
+ <input id="place-search" type="text" placeholder="Search for places..."/>
+</div>
+
+<nav id="place-nav">
+ <?php foreach ($buildings as $building): ?>
+ <button class="place-btn" data-name="<?php echo htmlspecialchars($building['name']); ?>"
+ data-lat="<?php echo htmlspecialchars($building['data-lat']); ?>"
+ data-lng="<?php echo htmlspecialchars($building['data-lng']); ?>"
+ data-opentime="<?php echo htmlspecialchars($building['openTime']); ?>"
+ data-description="<?php echo htmlspecialchars($building['description']); ?>"
+ data-address="<?php echo htmlspecialchars($building['address']); ?>">
+ <?php echo htmlspecialchars($building['name']); ?>
+ </button>
+ <?php endforeach; ?>
+</nav>
+
+<div id="place-info"></div>
+
+<div id="bus-route-info" style="padding: 20px;">
+ <h2>UWE Bus information:</h2>
+ <p id="bus-route-description">There are picture for First bus service through UWE:</p>
+ <div id="bus-route-image-container" style="width: 100%; text-align: center;">
+ <!-- 示例占位图像；请将 src 属性替换为您的图像路径 -->
+ <img id="bus-route-image" src="../Data/UWE_Bus_Service.jpg" alt="Bus Route Map"
+ style="max-width: 100%; height: auto;">
+ </div>
+ <h2>There are detail path for every bus throughing Frenchay campus:</h2>
+ <table class="bus-schedule">
+ <thead>
+ <tr>
+ <th>Service</th>
+ <th>Bus Path</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>19</td>
+ <td>Bath - Bitton - Cherry Gardens - Cadbury Heath - Kingswood - Downend - Hambrook - Stoke Park - <span
+ class="highlighted">Frenchay</span> - Bristol Parkway Station
+ </td>
+ </tr>
+ <tr>
+ <td>48a</td>
+ <td>City Centre - Old Market - Easton - Eastville - Fishponds - Glenside - Stoke Park - <span
+ class="highlighted">Frenchay</span></td>
+ </tr>
+ <tr>
+ <td>70 (24/7 service between City Centre & UWE Frenchay)</td>
+ <td>Hengrove - Melvin Square - Bedminster - City Centre - Montpelier - Cromwell Road - Chesterfield Road -
+ Ashley Down Road - Muller Road - Filton Avenue - <span class="highlighted">Frenchay</span></td>
+ </tr>
+ <tr>
+ <td>72</td>
+ <td>Temple Meads Station - City Centre - Clifton Triangle - University of Bristol - Cotham - Redland -
+ Gloucester Road - Filton Avenue - Lockleaze - Cheswick Village - <span
+ class="highlighted">Frenchay</span></td>
+ </tr>
+ <tr>
+ <td>74</td>
+ <td>Temple Meads Station - City Centre - Montpelier - Gloucester Road - Horfield - Filton - <span
+ class="highlighted">Frenchay</span></td>
+ </tr>
+ <tr>
+ <td>m1 metrobus (U3 overnight between UWE Frenchay & City Centre)</td>
+ <td>Cribbs Causeway - Aztec West - Bradley Stoke - <span class="highlighted">Frenchay</span> - Stoke Park -
+ Begbrook - City Centre - Bedminster - Inns Court - Hengrove Park
+ </td>
+ </tr>
+ <tr>
+ <td>m3 metrobus</td>
+ <td>City Centre - Begbrook - Stoke Park - <span class="highlighted">Frenchay</span> - Hambrook - Willy
+ Wicket - Emerald Park - Science Park - Lyde Green P&R - Emersons Green
+ </td>
+ </tr>
+ <tr>
+ <td>m4 metrobus</td>
+ <td>City Centre - Begbrook - Stoke Park - <span class="highlighted">Frenchay</span> - Bristol Parkway
+ Station - Cribbs Causeway
+ </td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+
+<a href="interface.php" id="return-home-btn"><i class="fas fa-arrow-left"></i></a>
+
+<script src="../Logic/city.js"></script>
+</body>
+</html>
diff --git a/Presentation/interface.php b/Presentation/interface.php
index 3c0479daa0fafe9447a6f4b0756950acd5767803..d5aec7a5f19e61e78e8757ca73d1eaa778cc5826 100644
--- a/Presentation/interface.php
+++ b/Presentation/interface.php
@@ -32,7 +32,7 @@
<div id="sidebar">
<a href="map.php" class="sidebar-item" target="contentFrame">Around Frenchay Campus</a>
- <a href="your-link-2.html" class="sidebar-item" target="contentFrame">Around Bristol</a>
+ <a href="city.php" class="sidebar-item" target="contentFrame">Around Bristol</a>
<a href="chatPage.php" class="sidebar-item" target="contentFrame">Campus Voices</a>
<a href="settings.php" class="sidebar-item" target="contentFrame"><i class="fas fa-home"></i> User Profile</a>
</div>
diff --git a/css/city.css b/css/city.css
new file mode 100644
index 0000000000000000000000000000000000000000..e3cf2ab55da7fd79e1ccaa511d35fcc8621d3a95
--- /dev/null
+++ b/css/city.css
@@ -0,0 +1,173 @@
+body {
+ font-family: 'Roboto', sans-serif;
+ margin: 0;
+ padding: 0;
+ padding-top: 50px;
+ background-color: #1E1E2E; /* 调整背景颜色与interface.html一致 */
+ color: #EAEAEA; /* 调整文本颜色与interface.html一致 */
+}
+
+#place-search-bar, #place-nav {
+ background-color: #232533; /* 调整搜索栏和导航栏背景色 */
+ padding: 10px 0;
+ text-align: center;
+}
+
+#map {
+ /*height: 500px;*/
+ /*width: 100%;*/
+ height: 500px;
+ width: calc(100% - 40px); /* 减去边距的宽度 */
+ margin-bottom: 20px;
+ border: 2px solid #292A36; /* 边框颜色和宽度 */
+ border-radius: 15px; /* 圆角大小 */
+}
+
+#place-search-bar {
+ margin-bottom: 20px;
+ text-align: center;
+
+ background-color: #232533; /* 背景色 */
+ padding: 10px 20px; /* 内边距 */
+ margin: 0 20px 20px 20px; /* 外边距 */
+ border-radius: 15px; /* 圆角大小 */
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
+}
+
+#place-search {
+ width: 300px;
+ height: 40px;
+ padding: 5px 10px;
+ margin: 10px;
+ font-size: 16px;
+ border: 1px solid #292A36; /* 输入框边框 */
+ border-radius: 20px; /* 更圆的边框 */
+ outline: none; /* 去掉焦点边框 */
+ background-color: #292A36; /* 输入框背景色 */
+ color: #EAEAEA; /* 输入框文本色 */
+
+}
+
+#place-nav {
+ text-align: center;
+ background-color: #232533; /* 背景色 */
+ padding: 10px 20px; /* 内边距 */
+ margin: 0 20px 20px 20px; /* 外边距 */
+ border-radius: 15px; /* 圆角大小 */
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center; /* 按钮居中显示 */
+ gap: 10px; /* 按钮之间的间隙 */
+}
+
+#place-nav button {
+ background-color: #292A36; /* 按钮背景色 */
+ color: #EAEAEA; /* 按钮文本色 */
+ border: none;
+ border-radius: 15px;
+ padding: 10px 15px;
+ font-size: 14px;
+ transition: background-color 0.3s, transform 0.2s;
+}
+
+#place-nav button:hover {
+ background-color: #3A3B45; /* 鼠标悬浮背景色 */
+ transform: translateY(-2px); /* 点击效果 */
+}
+
+#place-info {
+ background-color: #232533; /* 信息区背景色 */
+ border-radius: 15px;
+ padding: 20px;
+ margin: 0 20px; /* 外边距 */
+ max-width: calc(100% - 40px); /* 控制最大宽度 */
+ color: #EAEAEA; /* 信息区文本颜色 */
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影效果 */
+}
+
+#bus-route-info {
+ background-color: #232533; /* 统一背景色 */
+ border-radius: 15px; /* 统一边框圆角 */
+ padding: 20px;
+ margin: 20px 20px; /* 统一外边距 */
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 统一阴影效果 */
+ color: #EAEAEA; /* 统一文本颜色 */
+ max-width: calc(100% - 40px); /* 控制最大宽度 */
+}
+
+.bus-schedule {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 20px;
+ background-color: #232533; /* 表格背景色 */
+ color: #EAEAEA; /* 表格文本颜色 */
+ border-radius: 15px; /* 表格边框圆角 */
+ overflow: hidden; /* 确保边框圆角可见 */
+}
+
+.bus-schedule th,
+.bus-schedule td {
+ padding: 10px;
+ border-bottom: 1px solid #EAEAEA; /* 表格行分割线 */
+}
+
+.bus-schedule th {
+ background-color: #292A36; /* 表头背景色 */
+ font-weight: bold;
+}
+
+.highlighted {
+ font-weight: bold;
+ color: #D2232A; /* 突出显示的颜色 */
+}
+
+#bus-route-info h2 {
+ color: #EAEAEA; /* 标题文本颜色 */
+ font-size: 24px; /* 标题字体大小 */
+ margin-top: 0;
+}
+
+#bus-route-description {
+ color: #EAEAEA; /* 描述文本颜色 */
+ font-size: 18px; /* 描述字体大小 */
+}
+
+#bus-route-image-container {
+ background-color: #292A36; /* 图片容器背景色 */
+ padding: 10px; /* 图片容器内边距 */
+ border-radius: 15px; /* 图片容器边框圆角 */
+ margin-top: 20px; /* 图片容器外边距 */
+}
+
+#bus-route-image {
+ border: 3px solid #292A36; /* 图片边框 */
+ border-radius: 10px; /* 图片边框圆角 */
+}
+
+/* 其他样式 */
+#return-home-btn {
+ position: fixed;
+ right: 20px; /* 放置在右下角 */
+ bottom: 20px;
+ width: 50px; /* 宽度，使其更接近正方形 */
+ height: 50px; /* 高度 */
+ background-color: #333; /* 按钮背景色 */
+ color: white; /* 图标颜色 */
+ border-radius: 10px; /* 轻微的圆角 */
+ text-align: center;
+ line-height: 50px; /* 与按钮高度相同，使图标垂直居中 */
+ text-decoration: none;
+ border: none;
+ cursor: pointer;
+ transition: background-color 0.3s; /* 平滑的背景色变化效果 */
+}
+
+#return-home-btn:hover {
+ background-color: #555; /* 鼠标悬停时的背景色 */
+}
+
+#return-home-btn i {
+ font-size: 20px; /* 图标大小 */
+ vertical-align: middle;
+}