diff --git a/css/indexSide.css b/css/indexSide.css
new file mode 100644
index 0000000..29ab3a8
--- /dev/null
+++ b/css/indexSide.css
@@ -0,0 +1,160 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  text-decoration: auto;
+  word-break: break-word;
+}
+.one-line-display {
+  word-break: keep-all;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.flexflex {
+  display: flex;
+}
+.flexcenter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.flexjcenter {
+  display: flex;
+  justify-content: center;
+}
+.flexacenter {
+  display: flex;
+  align-items: center;
+}
+.flex1 {
+  flex: 1;
+}
+.flexcolumn {
+  display: flex;
+  flex-direction: column;
+}
+.project {
+  width: 394px;
+  margin: 50px auto;
+}
+.project .project-list {
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+.project .project-list .item {
+  width: 460px;
+  width: 100%;
+  background-color: #ffffff;
+  border: 1px solid #f2f2f2;
+  padding: 20px 16px 10px;
+  position: relative;
+}
+.project .project-list .item .school {
+  font-size: 14px;
+  color: #333333;
+  position: absolute;
+  top: 20px;
+  right: 16px;
+}
+.project .project-list .item .school .icon {
+  height: 18px;
+  margin-right: 8px;
+}
+.project .project-list .item .name {
+  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+  font-weight: 650;
+  font-style: normal;
+  font-size: 16px;
+  color: #000000;
+  margin-bottom: 6px;
+  padding-right: 80px;
+}
+.project .project-list .item .english {
+  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 13px;
+  margin-bottom: 10px;
+  color: #7f7f7f;
+}
+.project .project-list .item .introduce {
+  color: #555555;
+  font-size: 14px;
+  margin-bottom: 9px;
+  flex-wrap: wrap;
+}
+.project .project-list .item .introduce .quantity {
+  font-family: "Arial-Black", "Arial Black", sans-serif;
+  font-weight: 900;
+  color: #000000;
+  margin-left: 8px;
+}
+.project .project-list .item .introduce .line {
+  color: #d7d7d7;
+  margin: 0 7px;
+}
+.project .project-list .item .word {
+  background-color: #f9f8f8;
+  border-radius: 5px;
+  padding: 9px 10px;
+  font-size: 14px;
+  color: #7f7f7f;
+  margin-bottom: 12px;
+}
+.project .project-list .item .word .img {
+  width: 15px;
+  height: 10px;
+}
+.project .project-btn {
+  width: 361px;
+  height: 40px;
+  line-height: 40px;
+  background-color: #333333;
+  border-radius: 141px;
+  font-size: 16px;
+  color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.project .project-btn .img {
+  width: 18px;
+  height: 18px;
+  margin-left: 10px;
+}
+.project .tag {
+  flex-wrap: wrap;
+}
+.project .tag .tag-item {
+  width: fit-content;
+  height: 20px;
+  line-height: 20px;
+  background-color: #f9f8f8;
+  border: 1px solid #aaaaaa;
+  border-radius: 6px;
+  padding: 0 6px;
+  font-size: 12px;
+  color: #7f7f7f;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+}
+.project .tag .tag-item.gray {
+  background-color: #333333;
+  color: #ffffff;
+  border: none;
+}
+.project .tag .tag-item.semester {
+  color: #ffffff;
+  background-color: #f95d5d;
+  border: none;
+}
+.project .tag .tag-item.admissions {
+  background-color: #73d1e5;
+  border: none;
+  color: #fff;
+}
diff --git a/css/indexSide.less b/css/indexSide.less
new file mode 100644
index 0000000..23a3729
--- /dev/null
+++ b/css/indexSide.less
@@ -0,0 +1,179 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    text-decoration: auto;
+    word-break: break-word;
+}
+
+.one-line-display {
+    word-break: keep-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.flexflex {
+    display: flex;
+}
+
+.flexcenter {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.flexjcenter {
+    display: flex;
+    justify-content: center;
+}
+
+.flexacenter {
+    display: flex;
+    align-items: center;
+}
+
+.flex1 {
+    flex: 1;
+}
+
+.flexcolumn {
+    display: flex;
+    flex-direction: column;
+}
+
+.project {
+    width: 394px;
+    margin: 50px auto;
+    .project-list {
+        flex-wrap: wrap;
+        justify-content: space-between;
+        margin-bottom: 4px;
+        .item {
+            width: 460px;
+            width: 100%;
+            background-color: rgba(255, 255, 255, 1);
+            border: 1px solid rgba(242, 242, 242, 1);
+            // border-radius: 12px;
+            padding: 20px 16px 10px;
+            // margin-bottom: 19px;
+            position: relative;
+            .school {
+                font-size: 14px;
+                color: #333333;
+                // margin-bottom: 14px;
+                position: absolute;
+                top: 20px;
+                right: 16px;
+                .icon {
+                    height: 18px;
+                    margin-right: 8px;
+                }
+            }
+            .name {
+                font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+                font-weight: 650;
+                font-style: normal;
+                font-size: 16px;
+                color: #000000;
+                margin-bottom: 6px;
+                padding-right: 80px;
+            }
+
+            .english {
+                font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                font-weight: 400;
+                font-style: normal;
+                font-size: 13px;
+                margin-bottom: 10px;
+                color: #7f7f7f;
+            }
+            .introduce {
+                color: #555555;
+                font-size: 14px;
+                margin-bottom: 9px;
+                flex-wrap: wrap;
+                .quantity {
+                    font-family: "Arial-Black", "Arial Black", sans-serif;
+                    font-weight: 900;
+                    color: #000000;
+                    margin-left: 8px;
+                }
+                .line {
+                    color: #d7d7d7;
+                    margin: 0 7px;
+                }
+            }
+            .word {
+                background-color: rgba(249, 248, 248, 1);
+                border-radius: 5px;
+                padding: 9px 10px;
+                font-size: 14px;
+                color: #7f7f7f;
+                margin-bottom: 12px;
+
+                .img {
+                    width: 15px;
+                    height: 10px;
+                }
+            }
+        }
+    }
+
+    .project-btn {
+        width: 361px;
+        height: 40px;
+        line-height: 40px;
+        background-color: rgba(51, 51, 51, 1);
+        border-radius: 141px;
+        font-size: 16px;
+        color: #ffffff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+
+        .img {
+            width: 18px;
+            height: 18px;
+            margin-left: 10px;
+        }
+    }
+
+    .tag {
+        flex-wrap: wrap;
+        .tag-item {
+            width: fit-content;
+            height: 20px;
+            line-height: 20px;
+            background-color: rgba(249, 248, 248, 1);
+            border: 1px solid rgba(170, 170, 170, 1);
+            border-radius: 6px;
+            padding: 0 6px;
+            font-size: 12px;
+            color: #7f7f7f;
+            margin-right: 10px;
+            margin-bottom: 10px;
+            // flex-wrap: wrap;
+            display: flex;
+            align-items: center;
+            &.gray {
+                background-color: rgba(51, 51, 51, 1);
+                color: #ffffff;
+                border: none;
+            }
+
+            &.semester {
+                color: #ffffff;
+                background-color: rgba(249, 93, 93, 1);
+                border: none;
+            }
+
+            &.admissions {
+                background-color: rgba(115, 209, 229, 1);
+                border: none;
+                color: #fff;
+            }
+        }
+    }
+}
diff --git a/html/indexSide.html b/html/indexSide.html
new file mode 100644
index 0000000..507f30e
--- /dev/null
+++ b/html/indexSide.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Document</title>
+        <link rel="stylesheet" href="/css/indexSide.css" />
+        <script src="/js/vue.global.js"></script>
+    </head>
+    <body>
+        <div id="app" class="project">
+            <div class="project-list flexflex">
+                <a class="item" v-for="(item,index) in showList" target="_blank" :href="'/details/' + item.uniqid">
+                    <div class="school flexacenter">
+                        <img class="icon" :src="item.schoollogo" />
+                        {{ item.schoolalias }}
+                    </div>
+                    <h2 class="name flexflex one-line-display">{{ item.name_zh }}</h2>
+                    <h3 class="english one-line-display">{{ item.name_en }}</h3>
+                    <div class="introduce flexacenter one-line-display">
+                        {{ item.department }}
+                        <div class="flexacenter" v-if="item.rank">
+                            <div class="line">|</div>
+                            专业排名
+                            <div class="quantity">{{ item.rank }}</div>
+                        </div>
+                        <div class="flexacenter" v-if="item.tuition_fee_text">
+                            <div class="line">|</div>
+                            学费HK$ <div class="quantity">{{ item.tuition_fee_text }}</div>
+                        </div>
+                    </div>
+                    <div class="word one-line-display" v-if="item.distinctive">
+                        <img class="img" src="/img/quotation-mark.png" />
+                        {{ item.distinctive }}
+                    </div>
+                    <div class="tag flexflex one-line-display">
+                        <div class="tag-item admissions" v-if="item.admissionsproject">招生官项目</div>
+                        <div class="tag-item gray" :class="{'semester': item.semesterState}">{{ item.semester.text }}</div>
+                        <div class="tag-item" v-for="item in item.tags">{{ item }}</div>
+                    </div>
+                </a>
+            </div>
+
+            <div class="project-btn">
+                more
+                <img class="img" src="/img/side/arrows-circle-white.svg" />
+            </div>
+        </div>
+
+        <script>
+            const { createApp, ref, onMounted, nextTick, onUnmounted, computed, getCurrentInstance } = Vue
+
+            const projectIndex = createApp({
+                setup() {
+                    let showList = ref([
+                        {
+                            tuition_fee_text: "281,000",
+                            id: 662,
+                            uniqid: "iOTOj88OnnDK",
+                            departmentid: 0,
+                            disciplineid: 1,
+                            admissionsproject: 0,
+                            distinctive: "一句话描述独特之处，一句话描述独特之处。",
+                            name_en: "Master of Architecture (Design)",
+                            name_zh: "建筑学硕士（设计）",
+                            rank: null,
+                            name_alias: null,
+                            name_abbr: null,
+                            schoolid: 2971,
+                            schoolname: "香港珠海学院",
+                            schoolalias: "港大",
+                            schoollogo: "https://oss.x-php.com/school/J6BSwE6VfCFlAbsjc6IXB9eUbGqEtMQINq5bEogy25QhNzUxNg~~",
+                            contraststatus: null,
+                            tuition_fee: "135000",
+                            department: "建筑学院",
+                            intake: "2024-09",
+                            tags: false,
+                            year: 2024,
+                            semester: {
+                                year: 2025,
+                                month: 9,
+                                text: "25Fall",
+                            },
+                            rank: 52,
+                            random: "d1gt1n",
+                            semesterState: false,
+                        },
+                        {
+                            tuition_fee_text: "141,000",
+                            id: 607,
+                            uniqid: "KLv9qPKvL9SL",
+                            departmentid: 0,
+                            disciplineid: 1,
+                            admissionsproject: 0,
+                            distinctive: "提供与技术和数字建筑相关的知识和管理技能",
+                            name_en: "Master of Applied Science in Intelligent Construction and Building Information Modelling",
+                            name_zh: "理学硕士（智能建筑及建筑信息建模）",
+                            rank: null,
+                            name_alias: null,
+                            name_abbr: "MASCICBIMF",
+                            schoolid: 315,
+                            schoolname: "香港都会大学",
+                            schoolalias: "都大",
+                            schoollogo: "https://oss.x-php.com/school/J6BSwE-VfCFkCblSBaR7ec6NYmSVtMENOf5NHJQuwf83NTE2",
+                            contraststatus: {
+                                projectid: 607,
+                                status: 0,
+                                ismanage: 1,
+                            },
+                            tuition_fee: "141000",
+                            department: "科技学院",
+                            intake: "2024-09",
+                            tags: false,
+                            year: 2024,
+                            semester: {
+                                year: 2024,
+                                month: 9,
+                                text: "24Fall",
+                            },
+                            rankk: 0,
+                            random: "rqehuc",
+                            semesterState: false,
+                        },
+                        {
+                            tuition_fee_text: "141,000",
+                            id: 626,
+                            uniqid: "5SDqXCSjyDOb",
+                            departmentid: 0,
+                            disciplineid: 1,
+                            admissionsproject: 0,
+                            distinctive: "提供工程项目管理中智能建筑的全面理论背景知识",
+                            name_en: "Master of Science in Intelligent Construction and Building Information Modelling",
+                            name_zh: "理学硕士（智能建筑及建筑信息建模）",
+                            rank: null,
+                            name_alias: null,
+                            name_abbr: "MSCICBIMF",
+                            schoolid: 315,
+                            schoolname: "香港都会大学",
+                            schoolalias: "都大",
+                            schoollogo: "https://oss.x-php.com/school/J6BSwE-VfCFkCblSBaR7ec6NYmSVtMENOf5NHJQuwf83NTE2",
+                            contraststatus: null,
+                            tuition_fee: "141000",
+                            department: "科技学院",
+                            intake: "2024-09",
+                            tags: false,
+                            year: 2024,
+                            semester: {
+                                year: 2024,
+                                month: 9,
+                                text: "24Fall",
+                            },
+                            rankk: 0,
+                            random: "gvjiwv",
+                            semesterState: false,
+                        },
+                    ])
+                    return { showList }
+                },
+            })
+            projectIndex.mount("#app")
+        </script>
+    </body>
+</html>
diff --git a/img/side/arrows-circle-white.svg b/img/side/arrows-circle-white.svg
new file mode 100644
index 0000000..51376f3
--- /dev/null
+++ b/img/side/arrows-circle-white.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1378 -1496 )">
+    <path d="M 7.875 15.0703125  C 8.078125 15.0703125  8.25390625 14.99609375  8.40234375 14.84765625  L 13.72265625 9.52734375  C 13.87109375 9.37890625  13.9453125 9.203125  13.9453125 9  C 13.9453125 8.796875  13.87109375 8.62109375  13.72265625 8.47265625  L 8.40234375 3.15234375  C 8.25390625 3.00390625  8.078125 2.9296875  7.875 2.9296875  C 7.671875 2.9296875  7.49609375 3.00390625  7.34765625 3.15234375  L 6.15234375 4.34765625  C 6.00390625 4.49609375  5.9296875 4.671875  5.9296875 4.875  C 5.9296875 5.078125  6.00390625 5.25390625  6.15234375 5.40234375  L 9.75 9  L 6.15234375 12.59765625  C 6.00390625 12.74609375  5.9296875 12.921875  5.9296875 13.125  C 5.9296875 13.328125  6.00390625 13.50390625  6.15234375 13.65234375  L 7.34765625 14.84765625  C 7.49609375 14.99609375  7.671875 15.0703125  7.875 15.0703125  Z M 16.79296875 4.482421875  C 17.59765625 5.861328125  18 7.3671875  18 9  C 18 10.6328125  17.59765625 12.138671875  16.79296875 13.517578125  C 15.98828125 14.896484375  14.896484375 15.98828125  13.517578125 16.79296875  C 12.138671875 17.59765625  10.6328125 18  9 18  C 7.3671875 18  5.861328125 17.59765625  4.482421875 16.79296875  C 3.103515625 15.98828125  2.01171875 14.896484375  1.20703125 13.517578125  C 0.40234375 12.138671875  0 10.6328125  0 9  C 0 7.3671875  0.40234375 5.861328125  1.20703125 4.482421875  C 2.01171875 3.103515625  3.103515625 2.01171875  4.482421875 1.20703125  C 5.861328125 0.402343749999998  7.3671875 0  9 0  C 10.6328125 0  12.138671875 0.402343749999998  13.517578125 1.20703125  C 14.896484375 2.01171875  15.98828125 3.103515625  16.79296875 4.482421875  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 1378 1496 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/side/quotation-mark..png b/img/side/quotation-mark..png
new file mode 100644
index 0000000..1c7d8ae
Binary files /dev/null and b/img/side/quotation-mark..png differ