diff --git a/assets/scss/live.scss b/assets/scss/live.scss
index e3611b66c..3840f020d 100644
--- a/assets/scss/live.scss
+++ b/assets/scss/live.scss
@@ -1,5 +1,6 @@
 @import 'variables';
 @import 'mixin';
+
 .btn-a {
   display: inline-block;
   padding: 0 53px;
@@ -10,10 +11,12 @@
   color: #ffffff;
   box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(34, 43, 62, 0.1);
   background-image: linear-gradient(to bottom, rgba(85, 188, 138, 0), rgba(85, 188, 138, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a);
+
   &:hover {
     box-shadow: none;
   }
 }
+
 .section-1 {
   position: relative;
   padding-top: 124px;
@@ -40,16 +43,19 @@
       position: relative;
       width: 840px;
       height: 400px;
+
       @media only screen and (max-width: $mobile-max-width) {
         width: 100%;
         height: auto;
       }
+
       img {
         width: 100%;
         height: 100%;
         min-height: 200px;
         object-fit: cover;
       }
+
       button {
         position: absolute;
         right: 20px;
@@ -62,6 +68,7 @@
         cursor: pointer;
         box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(34, 43, 62, 0.1);
         background-image: linear-gradient(to bottom, rgba(85, 188, 138, 0), rgba(85, 188, 138, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a);
+
         &:hover {
           box-shadow: none;
         }
@@ -73,12 +80,14 @@
       width: 320px;
       height: 400px;
       padding: 10px;
+
       @media only screen and (max-width: $mobile-max-width) {
         max-width: 320px;
         width: auto;
         height: auto;
         margin: 0 auto;
       }
+
       h2 {
         margin-bottom: 10px;
         font-size: 18px;
@@ -116,8 +125,8 @@
           font-size: 16px;
           line-height: 28px;
           letter-spacing: -0.04px;
-          color: #919aa3;   
-          
+          color: #919aa3;
+
           img {
             vertical-align: middle;
             margin-right: 4px;
@@ -127,8 +136,8 @@
         a {
           margin: 34px auto 0;
           height: 40px;
-          padding: 0 28px;     
-          line-height: 40px;   
+          padding: 0 28px;
+          line-height: 40px;
         }
 
         .tag {
@@ -165,12 +174,12 @@
     padding-bottom: 40px;
   }
 
-  & > div {
+  &>div {
 
-    & > .video-tab-ul {
+    &>.video-tab-ul {
       padding: 0 34px;
       border-radius: 5px;
-      box-shadow: 0 4px 16px 0 rgba(7,42,68,.1);
+      box-shadow: 0 4px 16px 0 rgba(7, 42, 68, .1);
       background-color: #fff;
 
       li {
@@ -188,18 +197,19 @@
         text-align: center;
 
         &:hover {
-          box-shadow: 0 8px 16px 0 rgba(101,193,148,.2),0 0 50px 0 rgba(101,193,148,.1);
+          box-shadow: 0 8px 16px 0 rgba(101, 193, 148, .2), 0 0 50px 0 rgba(101, 193, 148, .1);
           background-color: #55bc8a;
           color: #fff;
         }
       }
+
       .active {
-        box-shadow: 0 8px 16px 0 rgba(101,193,148,.2),0 0 50px 0 rgba(101,193,148,.1);
+        box-shadow: 0 8px 16px 0 rgba(101, 193, 148, .2), 0 0 50px 0 rgba(101, 193, 148, .1);
         background-color: #55bc8a;
         color: #fff;
       }
 
-      li + li {
+      li+li {
         margin-left: 12px;
       }
     }
@@ -207,11 +217,12 @@
     .video-ul {
       margin-top: 20px;
       font-size: 0;
+
       @media only screen and (max-width: $mobile-max-width) {
         text-align: center;
       }
 
-      & > li {
+      &>li {
         position: relative;
         display: inline-block;
         width: 360px;
@@ -225,18 +236,18 @@
         text-align: left;
         cursor: pointer;
 
-        & > img {
+        &>img {
           width: 100%;
           height: 100%;
         }
 
         &:hover {
-          & > div {
+          &>div {
             height: 202px;
           }
         }
 
-        & > div {
+        &>div {
           position: absolute;
           left: 0;
           right: 0;
@@ -247,14 +258,14 @@
           transition: all .2s ease-in-out;
           overflow: hidden;
 
-          & > .btn {
+          &>.btn {
             position: absolute;
             left: 50%;
             bottom: 120px;
             transform: translateX(-50%);
           }
 
-          & > div {
+          &>div {
             position: absolute;
             left: 0;
             right: 0;
@@ -269,7 +280,7 @@
               color: #fff;
               padding: 8px 0;
               margin-bottom: 6px;
-              border-bottom: 1px solid hsla(0,0%,100%,.1);
+              border-bottom: 1px solid hsla(0, 0%, 100%, .1);
               text-overflow: ellipsis;
               white-space: nowrap;
               overflow: hidden;
@@ -306,7 +317,7 @@
       }
     }
 
-    & > div {
+    &>div {
       margin-top: 20px;
       text-align: center;
 
@@ -342,7 +353,7 @@
   padding: 0;
   border-radius: 0;
   font-size: 0;
-  
+
   .video-div {
     height: 100%;
   }
@@ -363,7 +374,7 @@
     width: 100%;
     max-width: 100%;
     height: auto;
-    
+
     iframe {
       width: 100%;
       height: 300px;
@@ -371,99 +382,221 @@
   }
 }
 
-.section-4 {
-  background-image: linear-gradient(113deg, #4a499a 27%, #8552c3 81%);
-  .common-layout {
-    white-space: nowrap;
-    overflow: auto;
-    & > div {
-      box-sizing: border-box;
-      display: inline-block;
-      vertical-align: top;
-      white-space: normal;
-      width: 140px;
-      height: 225px;
-      margin: 80px 40px;
-      padding-top: 20px;
-      border-top: 1px solid #a1b3c4;
 
-      .time-div {
+.common-layout-special {
+  white-space: nowrap;
+  overflow: auto;
+  height: 535px;
+  background-image: linear-gradient(147.87deg, #4A499A 16%, #8552C3 85.01%);;
+
+  @media only screen and (max-width: $mobile-max-width) {
+    width: 100%;
+    height: auto;
+  }
+
+  .meetup-box {
+    max-width: 1320px;
+    margin: 0 auto;
+
+    @media only screen and (max-width: $mobile-max-width) {
+      width: 100%;
+    }
+
+    .meetup-title {
+      font-size: 32px;
+      line-height: 45px;
+      color: #fff;
+      text-align: center;
+      padding-top: 56px;
+    }
+
+    .innerBox {
+      padding: 0px 80px;
+      position: relative;
+
+      @media only screen and (max-width: $mobile-max-width) {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 20px;
+      }
+
+      &>ul {
+        margin-top: 16px;
         display: flex;
+        background: linear-gradient(to top, rgba(255, 255, 255, 0.08) 5%, transparent 5%) no-repeat;
 
-        .right {
-          margin-left: 4px;
-          font-weight: bold;
-          line-height: 1;
-          color: #ffffff;
-          .date {
-            margin-bottom: 4px;
-            font-size: 24px;
+        @media only screen and (max-width: $mobile-max-width) {
+          overflow: scroll;
+        }
+
+        li {
+          width: 80px;
+          height: 40px;
+          line-height: 24px;
+          color: rgba(255, 255, 255, 0.15);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-shrink: 0;
+          box-sizing: border-box;
+        }
+
+        .active {
+          color: rgba(255, 255, 255, 0.7);
+          border-bottom: solid 2px rgba(255, 255, 255, 0.7);
+        }
+      }
+
+      .yearBox {
+        position: relative;
+        display: flex;
+        align-items: center;
+        min-height: 377px;
+        overflow: hidden;
+
+        @media only screen and (max-width: $mobile-max-width) {
+          width: 100%;
+          align-items: flex-start;
+          overflow: auto;
+        }
+
+        .active {
+          display: flex;
+
+          @media only screen and (max-width: $mobile-max-width) {
+            flex-direction: column;
           }
-          .time {
-            font-size: 14px;
+        }
+
+        ul {
+          display: none;
+          position: absolute;
+
+          li {
+            height: 258px;
+            width: 373px;
+            position: relative;
+            margin-right: 20px;
+
+            @media only screen and (max-width: $mobile-max-width) {
+              width: 330px;
+              margin: 0;
+              margin-top: 20px;
+            }
+
+            p {
+              text-align: center;
+              font-weight: 500;
+              font-size: 20px;
+              line-height: 28px;
+              color: #FFFFFF;
+            }
+
+            img {
+              margin-top: 20px;
+              width: 100%;
+            }
+
+            button {
+              position: absolute;
+              right: 10px;
+              bottom: 10px;
+              padding: 5px 10px;
+              border-radius: 14px;
+              font-size: 8px;
+              color: #fff;
+              border: none;
+              cursor: pointer;
+              box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(34, 43, 62, 0.1);
+              background-image: linear-gradient(to bottom, rgba(85, 188, 138, 0), rgba(85, 188, 138, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a);
+
+              @media only screen and (max-width: $mobile-max-width) {
+                right: 10px;
+                bottom: 35px;
+              }
+            }
+
+            &:last-child {
+              margin-right: 0;
+            }
           }
         }
       }
 
-      h3 {
-        height: 60px;
-        margin: 21px 0 47px;
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 1.43;
-        color: #d5dee7;
-        a {
-          color: #d5dee7;
-
-          &:hover {
-            color: #008a5c;
-          }
-        }
-      }
-
-      button {
-        font-size: 12px;
-        font-weight: 600;
-        line-height: 2;
-        border: none;
-        padding: 5px 28px;
-        border-radius: 17px;
+      .left-arrow {
+        display: block;
+        background: url('/images/live/arrow.svg');
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        bottom: 151px;
+        left: 0px;
+        transform: rotate(180deg);
         cursor: pointer;
-        box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2);
+
         &:hover {
-          box-shadow: none;
+          background: url('/images/live/arrow-hover.svg');
         }
       }
 
-      .over-btn {
-        color: #ffffff;
-        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #242e42, #242e42);
+      .right-arrow {
+        display: block;
+        background: url('/images/live/arrow.svg');
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        bottom: 151px;
+        right: 0px;
+        cursor: pointer;
+
+        &:hover {
+          background: url('/images/live/arrow-hover.svg');
+        }
       }
 
-      .notive-btn {
-        color: #3d3e49;
-        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #ffffff, #ffffff);
+      .hidden {
+        display: none;
+
+        @media only screen and (max-width: $mobile-max-width) {
+          width: 100%;
+        }
+      }
+
+      .show {
+        display: block;
+      }
+
+      @media only screen and (max-width: $mobile-max-width) {
+        .show {
+          display: none;
+        }
       }
     }
   }
+
 }
 
+
 .section-5 {
   .common-layout {
     position: relative;
     padding-top: 100px;
     padding-left: 60px;
     padding-bottom: 30px;
+
     @media only screen and (max-width: $mobile-max-width) {
       padding-left: 20px;
     }
+
     .left-div {
       position: relative;
       width: 600px;
+
       @media only screen and (max-width: $mobile-max-width) {
         width: 100%;
         z-index: 2;
       }
+
       h2 {
         font-size: 32px;
         font-weight: 600;
@@ -485,10 +618,11 @@
       }
     }
 
-    & > img {
+    &>img {
       position: absolute;
       top: 88px;
       right: 0;
+
       @media only screen and (max-width: $mobile-max-width) {
         opacity: 0.3;
       }
diff --git a/assets/scss/mixin.scss b/assets/scss/mixin.scss
index 136ddc93b..813efff29 100644
--- a/assets/scss/mixin.scss
+++ b/assets/scss/mixin.scss
@@ -180,3 +180,19 @@
     padding-top: 20px;
   }
 }
+
+@mixin common-layout-special {
+  position: relative;
+  width: 1300px;
+  margin: 0 auto;
+  padding-left: 260px;
+  
+  @media only screen and (max-width: $width-01) {
+    width: 100%;
+  }
+
+  @media only screen and (max-width: $width-02) {
+    padding: 10px;
+    padding-top: 20px;
+  }
+}
diff --git a/content/zh/live/_index.md b/content/zh/live/_index.md
index fa063d9df..2aa140ad8 100644
--- a/content/zh/live/_index.md
+++ b/content/zh/live/_index.md
@@ -1,7 +1,7 @@
 ---
 title: live - KubeSphere | Enterprise container platform, built on Kubernetes
 description: KubeSphere is an open source container platform based on Kubernetes for enterprise app development and deployment, suppors installing anywhere from on-premise datacenter to any cloud to edge.
-keywords: KubeSphere,DevOps,Istio,Service Mesh,Jenkins
+keywords: KubeSphere, DevOps, Istio, Service Mesh, Jenkins
 css: "scss/live.scss"
 
 section1:
@@ -337,38 +337,93 @@ section3:
 section4:
   overImg: /images/live/over.svg
   noticeImg: /images/live/notice.svg
+  title: Meetup 回顾
   list:
-    - title: Apache APISIX Ingress Controller 实现与上手实践
-      date: 08/26
-      time: 20:00 - 21:00
-      lastTime: 2021-08-26T21:00:00Z
-      url: ./apisix826-live/
+    - year: 2021
+      meetup: 
 
-    - title: 使用 Flomesh 进行 Dubbo 微服务的服务治理
-      date: 08/19
-      time: 20:00 - 21:00
-      lastTime: 2021-08-19T21:00:00Z
-      url: ./pipy819-live/
+        - place: 芜湖站
+          img: https://pek3b.qingstor.com/kubesphere-community/images/uisee0916-live-cover.png
+          meetupUrl: https://www.baidu.com
 
-    - title: KubeSphere v3.1 开源社区交流会直播回放
-      date: 04/29
-      time: 20:00 - 21:00
-      lastTime: 2021-04-29T21:00:00Z
-      url: ./3.1-live/
+        - place: 杭州站
+          img: https://pek3b.qingstor.com/kubesphere-community/images/wasm0909-live-cover.png
+          meetupUrl:
 
-    - title: 基于 KubeSphere 与 BotKube 搭建 K8s 多集群监控告警体系
-      date: 01/14
-      time: 20:00 - 21:00
-      lastTime: 2021-01-14T21:00:00Z
-      url: ./botkube-live/
+        - place: 成都站
+          img: https://pek3b.qingstor.com/kubesphere-community/images/nebula0902-live-cover.png
+          meetupUrl:
 
-    - title: 企业级云原生多租户通知系统 Notification Manager
-      date: 01/06
-      time: 20:00 - 21:00
-      lastTime: 2021-01-06T21:00:00Z
-      url: ./nm-live/
+        - place: 上海站
+          img: https://pek3b.qingstor.com/kubesphere-community/images/apisix826-live-cover.png
+          meetupUrl:
 
+        - place: 杭州站
+          img: https://pek3b.qingstor.com/kubesphere-community/images/uisee0916-live-cover.png
+          meetupUrl:
 
+        - place: 成都站
+          img: https://pek3b.qingstor.com/kubesphere-community/images/wasm0909-live-cover.png
+          meetupUrl:
+
+        - place: 上海站
+          img: https://pek3b.qingstor.com/kubesphere-community/images/nebula0902-live-cover.png
+          meetupUrl:
+
+        - place: 杭州站
+          img: https://pek3b.qingstor.com/kubesphere-community/images/apisix826-live-cover.png
+          meetupUrl:
+
+        - place: 成都站
+          img: https://pek3b.qingstor.com/kubesphere-community/images/uisee0916-live-cover.png
+          meetupUrl:
+
+        - place: 成都站
+          img: https://pek3b.qingstor.com/kubesphere-community/images/wasm0909-live-cover.png
+          meetupUrl:
+      
+    - year: 2022
+      meetup: 
+
+        - place: 上海站
+          img: https://pek3b.qingstor.com/kubesphere-community/images/uisee0916-live-cover.png
+          meetupUrl:
+
+        - place: 杭州站
+          img: https://pek3b.qingstor.com/kubesphere-community/images/wasm0909-live-cover.png
+          meetupUrl:
+
+        - place: 成都站
+          img: https://pek3b.qingstor.com/kubesphere-community/images/nebula0902-live-cover.png
+          meetupUrl:
+
+        - place: 成都站
+          img: https://pek3b.qingstor.com/kubesphere-community/images/apisix826-live-cover.png
+          meetupUrl:
+
+    - year: 2023
+      meetup: 
+        - place: 上海站
+          img: https://pek3b.qingstor.com/kubesphere-community/images/uisee0916-live-cover.png
+          meetupUrl:
+
+        - place: 杭州站
+          img: https://pek3b.qingstor.com/kubesphere-community/images/wasm0909-live-cover.png
+          meetupUrl:
+
+        - place: 成都站
+          img: https://pek3b.qingstor.com/kubesphere-community/images/nebula0902-live-cover.png
+          meetupUrl:
+
+        - place: 成都站
+          img: https://pek3b.qingstor.com/kubesphere-community/images/apisix826-live-cover.png
+          meetupUrl:
+
+        - place: 终点站
+          img: https://pek3b.qingstor.com/kubesphere-community/images/apisix826-live-cover.png
+          meetupUrl:
+
+    
 section5:
   title: 分享您的主题
   content: 您是否也想在社区分享您的云原生实践经验？即可加入 KubeSphere 社区云原生直播计划，提交分享主题，将有 KubeSphere 周边礼品相送！最重要的是您可以：提升自身软实力，如演讲能力、总结能力；提高自身在云原生领域的知名度；展现企业的技术实力及优秀想法；帮助推广您社区开源的项目。
diff --git a/layouts/live/list.html b/layouts/live/list.html
index 6f1239179..76d0fa765 100644
--- a/layouts/live/list.html
+++ b/layouts/live/list.html
@@ -2,23 +2,23 @@
 
 {{ with .Params.section1 }}
 <section class='section-1 bg-cover' style='background-image: url("{{ .image }}");'>
-  <div class="common-layout">
-    <h1 class="title-h1">{{ .title }}</h1>
-  </div>
+    <div class="common-layout">
+        <h1 class="title-h1">{{ .title }}</h1>
+    </div>
 </section>
 {{ end }}
 
 {{ with .Params.section2 }}
 <section class='section-2'>
-  <div class="common-layout">
-      <div class="live-2-left">
-          <a href="{{ .url }}">
-            <img src="{{ .image }}" alt="">
-            <button>{{ i18n "Wonderful review" }}</button>
-            
-          </a>
-      </div>
-      <div class="live-2-right">
+    <div class="common-layout">
+        <div class="live-2-left">
+            <a href="{{ .url }}">
+                <img src="{{ .image }}" alt="">
+                <button>{{ i18n "Wonderful review" }}</button>
+
+            </a>
+        </div>
+        <div class="live-2-right">
             {{ with .notice }}
             <div class='notice shadow'>
                 <h2 title="{{ .title }}">{{ .title }}</h2>
@@ -36,8 +36,8 @@
                 <div class="tag">{{ .tag }}</div>
             </div>
             {{ end }}
-      </div>
-  </div>
+        </div>
+    </div>
 </section>
 {{ end }}
 
@@ -63,52 +63,54 @@
 </section>
 {{ end }}
 
-<div id="modal-for-video" class="modal">
-    <div class='video-div'>
-        <video src="" controls autoplay></video>
-        <iframe 
-            id='iframe-player' 
-            src="" 
-            width="750" 
-            height="420" 
-            frameborder="0" 
-            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
-            allowfullscreen>
-        </iframe>
-    </div>
-</div>
 
 {{ $overImg := .Params.section4.overImg}}
 {{ $noticeImg := .Params.section4.noticeImg}}
 {{ with .Params.section4 }}
-<section class='section-4'>
-    <div class="common-layout">
-        {{ range .list }}
-        <div>
-            <div class="time-div">
-                {{$over := (time .lastTime).Unix}}
-                {{ if ge now.Unix $over}}
-                    <img src="{{ $overImg }}" alt="">
-                {{ else }}
-                    <img src="{{ $noticeImg }}" alt="">
+<section class="common-layout-special">
+    <div class="meetup-box">
+        <div class="meetup-title">{{ .title }}</div>
+        <div class="innerBox">
+            <ul id="meetup-ul">
+                {{ range .list }}
+                {{ with . }}
+                <li> {{ .year }} </li>
+                {{ end }}
+                {{ end }}
+            </ul>
+            <span id="leftArrow" class="left-arrow"></span>
+            <div class="yearBox" id="meetup-list">
+                {{ range .list }}
+                {{ with . }}
+                <ul>
+                    {{ range .meetup }}
+                    {{ with . }}
+                    <li>
+                        <p>{{ .place }}</p>
+                        <img src="{{ .img }}">
+                        <a href="{{ .meetupUrl | safeURL }}" target="_blank" rel="noopener noreferrer"><button>{{ i18n "Wonderful review" }}</button></a>
+                    </li>
+                    {{ end }}
+                    {{ end }}
+                </ul>
+                {{ end }}
                 {{ end }}
-                <div class="right">
-                    <p class="date">{{ .date }}</p>
-                    <p class="time">{{ .time }}</p>
-                </div>
             </div>
-            <h3><a href="{{ .url }}">{{ .title }}</a></h3>
-            {{ if ge now.Unix $over}}
-                <a href="{{ .url }}"><button class="over-btn">{{ i18n "Watch replay" }}</button></a>
-            {{ else }}
-                <a href="{{ .url }}"><button class="notice-btn">{{ i18n "View details" }}</button></a>
-            {{ end }}
+            <span id="rightArrow" class="right-arrow"></span>
         </div>
-        {{ end }}
     </div>
 </section>
+
 {{ end }}
 
+<div id="modal-for-video" class="modal">
+    <div class='video-div'>
+        <video src="" controls autoplay></video>
+        <iframe id='iframe-player' src="" width="750" height="420" frameborder="0"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+        </iframe>
+    </div>
+</div>
 {{ with .Params.section5 }}
 <section class='section-5'>
     <div class="common-layout">
@@ -125,15 +127,15 @@
 <script src='{{ "js/pagination.min.js" | relURL }}'></script>
 
 <script>
-    var bindClickVideoTabLi = function() {
+    var bindClickVideoTabLi = function () {
         var tabLi = $('.video-tab-ul > li')
-        tabLi.click(function() {
+        tabLi.click(function () {
             tabLi.removeClass('active')
             var group = $(this).data('group')
             $(this).addClass('active')
-            var videos =  $('.video-ul').data('origin')
+            var videos = $('.video-ul').data('origin')
             if (group) {
-                videos = videos.filter(function(video) {
+                videos = videos.filter(function (video) {
                     return video.group === group
                 })
             }
@@ -141,8 +143,8 @@
         })
     }
 
-    var bindClickVideoLi = function() {
-        $('.video-ul').on('click', 'li', function(ev) {
+    var bindClickVideoLi = function () {
+        $('.video-ul').on('click', 'li', function (ev) {
             var link = $(this).data('link')
             window.open(link)
             // var type = $(this).data('type')
@@ -154,8 +156,8 @@
         })
     }
 
-    var initModal = function() {
-        $('#modal-for-video').on($.modal.BEFORE_CLOSE, function(event, modal) {
+    var initModal = function () {
+        $('#modal-for-video').on($.modal.BEFORE_CLOSE, function (event, modal) {
             $('#modal-for-video video')[0].pause()
             var src = $("#iframe-player").attr('src')
             // 去掉自动播放
@@ -163,19 +165,19 @@
         });
     }
 
-    var showIframe = function(link) {
+    var showIframe = function (link) {
         $('#modal-for-video video').hide()
-        $('#modal-for-video iframe').show().attr({src: link})
+        $('#modal-for-video iframe').show().attr({ src: link })
         $('#modal-for-video').modal()
     }
 
-    var showVideo = function(link) {
+    var showVideo = function (link) {
         $('#modal-for-video iframe').hide()
-        $('#modal-for-video video').show().attr({src: link})
+        $('#modal-for-video video').show().attr({ src: link })
         $('#modal-for-video').modal()
     }
 
-    var createVideoList = function(videos) {
+    var createVideoList = function (videos) {
         var result = ''
         for (var i = 0; i < videos.length; i++) {
             var video = videos[i]
@@ -185,38 +187,116 @@
         return result
     }
 
-    var createVideoLi = function(video) {
+    var createVideoLi = function (video) {
         var img = '<img src="' + video.snapshot + '" alt="background image">'
         var button = '<img class="btn" src="/images/videos/play.svg" alt="play button">'
         var title = '<h3>' + video.title + '</h3>'
         var group = '<p>' + video.group + '</p>'
         var time = '<p class="time">' + video.createTime + '</p>'
-        var div = '<div>' + button + '<div>' + title + group + time + '</div></div>' 
+        var div = '<div>' + button + '<div>' + title + group + time + '</div></div>'
         var s = '<li data-link="' + video.link + '" data-type="' + video.type + '">' + img + div + '</li>'
         return s
     }
 
-    var initPagination = function(dataSource) {
+    var initPagination = function (dataSource) {
         $('#pagination').pagination({
             dataSource: dataSource,
             pageSize: 12,
             prevText: '<<',
             nextText: '>>',
-            callback: function(data, pagination) {
+            callback: function (data, pagination) {
                 var videoList = createVideoList(data)
                 $('.video-ul').empty().append(videoList)
             }
         })
     }
 
-    var initVideos = function() {
-        var videos =  $('.video-ul').data('origin')
+    var initVideos = function () {
+        var videos = $('.video-ul').data('origin')
         initPagination(videos)
     }
 
+    var MeetupInit = function () {
+        var ulHead = $('#meetup-ul');
+        var ulList = $('#meetup-list');
+        var tabActiveIndex = 0;
+        ulHead.children('li')[0].className = 'active';
+        ulList.children()[0].className = 'active';
+
+        $('#meetup-ul li').click(function (e) {
+            var clickIndex = $(this).index();
+            if (tabActiveIndex === clickIndex) {
+                return
+            } else {
+                tabActiveIndex = clickIndex
+            }
+            var preActiveINdex = $('#meetup-ul li.active')
+            var preUlBox = ulList.children()[preActiveINdex.index()];
+            var clickUlBox = ulList.children()[clickIndex];
+            preActiveINdex.removeClass('active')
+            ulHead.children('li')[clickIndex].className = 'active'
+            clickUlBox.className = 'active'
+            preUlBox.className = ''
+            ClickButton()
+        })
+        ClickButton()
+    }
+
+    var judgeButton = function (start, total) {
+        var leftArrow = $('#leftArrow');
+        var rightArrow = $('#rightArrow');
+        if (start >= total) {
+            leftArrow.removeClass('hidden').addClass('show')
+            rightArrow.removeClass('show').addClass('hidden')
+        } else if (start <= 1) {
+            leftArrow.removeClass('show').addClass('hidden')
+            rightArrow.removeClass('hidden').addClass('show')
+        } else {
+            leftArrow.removeClass('hidden').addClass('show')
+            rightArrow.removeClass('hidden').addClass('show')
+        }
+    }
+
+    var ClickButton = function () {
+        var leftArrow = $('#leftArrow');
+        var rightArrow = $('#rightArrow');
+        var stepWidth = 1179;
+        leftArrow.removeClass('show').addClass('hidden');
+        rightArrow.removeClass('show').addClass('hidden');
+        leftArrow.unbind('click')
+        rightArrow.unbind('click')
+
+        var ulList = $('#meetup-list');
+        var ulListChild = $('#meetup-list').children();
+        var activeUl = $('#meetup-list ul.active');
+        var starStep = 1;
+        var totalStep = Math.ceil(activeUl.width() / ulList.width());
+
+        ulListChild.each(item => {
+            ulListChild[item].style = ''
+        })
+        if (totalStep >= 2) {
+            rightArrow.removeClass('hidden').addClass('show');
+        }
+
+        rightArrow.click(function (e) {
+            activeUl[0].style = 'transform: translateX(-' + (starStep * stepWidth) + 'px);';
+            starStep += 1;
+            judgeButton(starStep, totalStep);
+        })
+
+        leftArrow.click(function (e) {
+            starStep = starStep - 1;
+            var left = starStep * stepWidth;
+            activeUl[0].style = 'transform: translateX(-' + (left - stepWidth) + 'px);';
+            judgeButton(starStep, totalStep);
+        })
+    }
+
     bindClickVideoTabLi()
     bindClickVideoLi()
     initVideos()
     initModal()
+    MeetupInit()
 </script>
 {{ end }}
\ No newline at end of file
diff --git a/static/images/live/arrow-hover.svg b/static/images/live/arrow-hover.svg
new file mode 100644
index 000000000..669f02027
--- /dev/null
+++ b/static/images/live/arrow-hover.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="black" fill-opacity="0.1"/>
+<path d="M16 13.6919L17.6919 12L26 20.3081L17.6919 28.6161L16 26.9242L22.6161 20.3081L16 13.6919Z" fill="white"/>
+</svg>
diff --git a/static/images/live/arrow.svg b/static/images/live/arrow.svg
new file mode 100644
index 000000000..a95ce13ed
--- /dev/null
+++ b/static/images/live/arrow.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="white" fill-opacity="0.1"/>
+<path d="M16 13.6919L17.6919 12L26 20.3081L17.6919 28.6161L16 26.9242L22.6161 20.3081L16 13.6919Z" fill="white" fill-opacity="0.7"/>
+</svg>