diff --git a/css/indexSide.css b/css/indexSide.css
index 29ab3a8..042726e 100644
--- a/css/indexSide.css
+++ b/css/indexSide.css
@@ -1,68 +1,76 @@
-* {
+html {
+  background-color: #EEF2F5;
+}
+.project {
+  width: 394px;
+  margin: 50px auto;
+  border-radius: 8px;
+  background-color: #fff;
+  padding-bottom: 14px;
+}
+.project * {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   text-decoration: auto;
   word-break: break-word;
 }
-.one-line-display {
+.project .one-line-display {
   word-break: keep-all;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.flexflex {
+.project .flexflex {
   display: flex;
 }
-.flexcenter {
+.project .flexcenter {
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.flexjcenter {
+.project .flexjcenter {
   display: flex;
   justify-content: center;
 }
-.flexacenter {
+.project .flexacenter {
   display: flex;
   align-items: center;
 }
-.flex1 {
+.project .flex1 {
   flex: 1;
 }
-.flexcolumn {
+.project .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 {
+.project .project-list .project-item {
   width: 460px;
   width: 100%;
   background-color: #ffffff;
-  border: 1px solid #f2f2f2;
   padding: 20px 16px 10px;
   position: relative;
 }
-.project .project-list .item .school {
+.project .project-list .project-item:not(:last-of-type) {
+  border-bottom: 1px dotted rgba(215, 215, 215, 0.69);
+}
+.project .project-list .project-item .project-school {
   font-size: 14px;
   color: #333333;
   position: absolute;
   top: 20px;
   right: 16px;
 }
-.project .project-list .item .school .icon {
+.project .project-list .project-item .project-school .project-school-icon {
   height: 18px;
   margin-right: 8px;
 }
-.project .project-list .item .name {
+.project .project-list .project-item .project-name {
   font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
   font-weight: 650;
   font-style: normal;
@@ -71,7 +79,7 @@
   margin-bottom: 6px;
   padding-right: 80px;
 }
-.project .project-list .item .english {
+.project .project-list .project-item .project-english {
   font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
   font-weight: 400;
   font-style: normal;
@@ -79,23 +87,23 @@
   margin-bottom: 10px;
   color: #7f7f7f;
 }
-.project .project-list .item .introduce {
+.project .project-list .project-item .project-introduce {
   color: #555555;
   font-size: 14px;
   margin-bottom: 9px;
   flex-wrap: wrap;
 }
-.project .project-list .item .introduce .quantity {
+.project .project-list .project-item .project-introduce .project-quantity {
   font-family: "Arial-Black", "Arial Black", sans-serif;
   font-weight: 900;
   color: #000000;
   margin-left: 8px;
 }
-.project .project-list .item .introduce .line {
+.project .project-list .project-item .project-introduce .project-line {
   color: #d7d7d7;
   margin: 0 7px;
 }
-.project .project-list .item .word {
+.project .project-list .project-item .project-word {
   background-color: #f9f8f8;
   border-radius: 5px;
   padding: 9px 10px;
@@ -103,7 +111,7 @@
   color: #7f7f7f;
   margin-bottom: 12px;
 }
-.project .project-list .item .word .img {
+.project .project-list .project-item .project-word .project-img {
   width: 15px;
   height: 10px;
 }
@@ -119,16 +127,17 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  margin: 0 auto;
 }
-.project .project-btn .img {
+.project .project-btn .project-btn-img {
   width: 18px;
   height: 18px;
   margin-left: 10px;
 }
-.project .tag {
+.project .project-tag {
   flex-wrap: wrap;
 }
-.project .tag .tag-item {
+.project .project-tag .project-tag-item {
   width: fit-content;
   height: 20px;
   line-height: 20px;
@@ -143,17 +152,17 @@
   display: flex;
   align-items: center;
 }
-.project .tag .tag-item.gray {
+.project .project-tag .project-tag-item.project-gray {
   background-color: #333333;
   color: #ffffff;
   border: none;
 }
-.project .tag .tag-item.semester {
+.project .project-tag .project-tag-item.project-semester {
   color: #ffffff;
   background-color: #f95d5d;
   border: none;
 }
-.project .tag .tag-item.admissions {
+.project .project-tag .project-tag-item.project-admissions {
   background-color: #73d1e5;
   border: none;
   color: #fff;
diff --git a/css/indexSide.less b/css/indexSide.less
index 23a3729..4085f3a 100644
--- a/css/indexSide.less
+++ b/css/indexSide.less
@@ -1,76 +1,91 @@
-* {
-    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;
+html {
+    background-color: #EEF2F5;
 }
 
 .project {
     width: 394px;
     margin: 50px auto;
+    border-radius: 8px;
+    background-color: #fff;
+    padding-bottom: 14px;
+
+    * {
+        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-list {
         flex-wrap: wrap;
         justify-content: space-between;
         margin-bottom: 4px;
-        .item {
+
+        .project-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 {
+
+            &:not(:last-of-type) {
+                border-bottom: 1px dotted rgba(215, 215, 215, 0.69);
+            }
+
+            .project-school {
                 font-size: 14px;
                 color: #333333;
                 // margin-bottom: 14px;
                 position: absolute;
                 top: 20px;
                 right: 16px;
-                .icon {
+
+                .project-school-icon {
                     height: 18px;
                     margin-right: 8px;
                 }
             }
-            .name {
+
+            .project-name {
                 font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
                 font-weight: 650;
                 font-style: normal;
@@ -80,7 +95,7 @@
                 padding-right: 80px;
             }
 
-            .english {
+            .project-english {
                 font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
                 font-weight: 400;
                 font-style: normal;
@@ -88,23 +103,27 @@
                 margin-bottom: 10px;
                 color: #7f7f7f;
             }
-            .introduce {
+
+            .project-introduce {
                 color: #555555;
                 font-size: 14px;
                 margin-bottom: 9px;
                 flex-wrap: wrap;
-                .quantity {
+
+                .project-quantity {
                     font-family: "Arial-Black", "Arial Black", sans-serif;
                     font-weight: 900;
                     color: #000000;
                     margin-left: 8px;
                 }
-                .line {
+
+                .project-line {
                     color: #d7d7d7;
                     margin: 0 7px;
                 }
             }
-            .word {
+
+            .project-word {
                 background-color: rgba(249, 248, 248, 1);
                 border-radius: 5px;
                 padding: 9px 10px;
@@ -112,7 +131,7 @@
                 color: #7f7f7f;
                 margin-bottom: 12px;
 
-                .img {
+                .project-img {
                     width: 15px;
                     height: 10px;
                 }
@@ -132,17 +151,19 @@
         justify-content: center;
         align-items: center;
         cursor: pointer;
+        margin: 0 auto;
 
-        .img {
+        .project-btn-img {
             width: 18px;
             height: 18px;
             margin-left: 10px;
         }
     }
 
-    .tag {
+    .project-tag {
         flex-wrap: wrap;
-        .tag-item {
+
+        .project-tag-item {
             width: fit-content;
             height: 20px;
             line-height: 20px;
@@ -157,23 +178,24 @@
             // flex-wrap: wrap;
             display: flex;
             align-items: center;
-            &.gray {
+
+            &.project-gray {
                 background-color: rgba(51, 51, 51, 1);
                 color: #ffffff;
                 border: none;
             }
 
-            &.semester {
+            &.project-semester {
                 color: #ffffff;
                 background-color: rgba(249, 93, 93, 1);
                 border: none;
             }
 
-            &.admissions {
+            &.project-admissions {
                 background-color: rgba(115, 209, 229, 1);
                 border: none;
                 color: #fff;
             }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/html/indexSide.html b/html/indexSide.html
index 507f30e..0dd8d8f 100644
--- a/html/indexSide.html
+++ b/html/indexSide.html
@@ -10,40 +10,40 @@
     <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" />
+                <a class="project-item" v-for="(item,index) in showList" target="_blank" :href="'/details/' + item.uniqid">
+                    <div class="project-school flexacenter">
+                        <img class="project-school-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">
+                    <h2 class="project-name flexflex one-line-display">{{ item.name_zh }}</h2>
+                    <h3 class="project-english one-line-display">{{ item.name_en }}</h3>
+                    <div class="project-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 class="project-quantity">{{ item.rank }}</div>
                         </div>
                         <div class="flexacenter" v-if="item.tuition_fee_text">
-                            <div class="line">|</div>
+                            <div class="project-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" />
+                    <div class="project-word one-line-display" v-if="item.distinctive">
+                        <img class="project-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 class="project-tag flexflex one-line-display">
+                        <div class="project-tag-item project-admissions" v-if="item.admissionsproject">招生官项目</div>
+                        <div class="project-tag-item project-gray" :class="{'semester': item.semesterState}">{{ item.semester.text }}</div>
+                        <div class="project-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" />
+                <img class="project-btn-img" src="/img/side/arrows-circle-white.svg" />
             </div>
         </div>
 
@@ -142,7 +142,7 @@
                             tuition_fee: "141000",
                             department: "科技学院",
                             intake: "2024-09",
-                            tags: false,
+                            tags: ["无需考试"],
                             year: 2024,
                             semester: {
                                 year: 2024,