diff --git a/modules/video_pro/video_pro_index1.html.erb b/modules/video_pro/video_pro_index1.html.erb
index d3004c6..f867250 100644
--- a/modules/video_pro/video_pro_index1.html.erb
+++ b/modules/video_pro/video_pro_index1.html.erb
@@ -1,17 +1,25 @@
 <div class="i-video_data video_data-index-1">
-  <h3 class="i-annc__page-title">{{page-title}}</h3>
+    <h3 class="i-annc__page-title"><span>{{page-title}}</span></h3>
   <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
-    <li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
+    <li class="video_data col-sm-12 row" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
       <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
+      <div class="col-sm-4">
+       <div class="video_linkwrapper">
+        <div class="videohover">
+          <div class="Video__Player"><div class="Video__PlayerButton"></div></div>
+          <div class="videoduration"></div>
+        </div>
         <img class="video_snapshot" src="{{snapshot_url}}"/>
-        <div class="video_info">
+       </div>
+      </div>
+        <div class="col-sm-8 video_info">
           <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
           <div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
           <div class="video_title"><h4>{{video_title}}</h4></div>
           <div class="video_desc">{{video_desc}}</div>
           <div class="view_info">
-            <span><img src="{{hd_icon_url}}" alt="HD"></span>
-            <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
+            <!-- <span><img src="{{hd_icon_url}}" alt="HD"></span> -->
+            <span>x {{view_count}}</span>
           </div>
         </div>
       </a>
@@ -19,7 +27,25 @@
   </ul>
   <div class="clearfix"></div>
   <style>
+  .video_data-index-1{
+    .video_desc{
+      height:auto!important;
+    }
+    .video_data{
+      background:#fff;
+      overflow: hidden;
+      margin-bottom: 1.875em;
+      box-shadow: #0000004d 0 0 4px;
+      border: 1px solid #bbb;
+      margin: 0.5em;
+      padding: 1em;
+      &:hover{
+        border: 1px solid #1a1b20;
+        box-shadow: #1a1b20e6 0 0 4px;
+      }
+    }
     .video_data_wrap{
+      padding:0;
       display: flex;
       flex-wrap: wrap;
     }
@@ -28,9 +54,10 @@
     }
     .video_tag{
       color: #e4374a;
+      display: none;
     }
-    .video_title h4{
-      font-size: 1.6em;
+    .video_title h5{
+      @extend .i-title;
       font-weight: bold;
       margin-bottom: 0;
       text-overflow: ellipsis;
@@ -43,6 +70,27 @@
     .view_info img{
       margin-right: 5px;
     }
+    .video_group_time{
+      display: none;
+    }
+    .video_tags{
+      display: none;
+    }
+    .video_desc{
+      color: #333;
+      padding-top: 0.5em;
+      display: -webkit-box;
+      -webkit-line-clamp: 6;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .video_title{
+      border-bottom: 2px solid #1a1b20;
+      padding-bottom: 0.5em;
+    }
+  }
+
   </style>
 </div>
-{{pagination_goes_here}}
\ No newline at end of file
+{{pagination_goes_here}}
diff --git a/modules/video_pro/video_pro_index2.html.erb b/modules/video_pro/video_pro_index2.html.erb
index fdaa92b..8f2baf4 100644
--- a/modules/video_pro/video_pro_index2.html.erb
+++ b/modules/video_pro/video_pro_index2.html.erb
@@ -1,5 +1,5 @@
 <div class="i-video_data video_data-index-2">
-  <h3 class="i-annc__page-title">{{page-title}}</h3>
+    <h3 class="i-annc__page-title"><span>{{page-title}}</span></h3>
   <div class="video_filter_area col-sm-12">
     <form>
       <div class="category_box col-sm-6">
@@ -24,22 +24,37 @@
   <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
     <li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
       <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
+      <div class="video_linkwrapper">
+        <div class="videohover">
+          <div class="Video__Player"><div class="Video__PlayerButton"></div></div>
+          <div class="videoduration"></div>
+        </div>
         <img class="video_snapshot" src="{{snapshot_url}}"/>
+      </div>
         <div class="video_info">
-          <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
-          <div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
+          <div class="video_group_time"><div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>{{video_postdate}}</div>
           <div class="video_title"><h4>{{video_title}}</h4></div>
           <div class="video_desc">{{video_desc}}</div>
-          <div class="view_info">
-            <span><img src="{{hd_icon_url}}" alt="HD"></span>
-            <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
-          </div>
         </div>
       </a>
     </li>
   </ul>
   <div class="clearfix"></div>
   <style>
+    .video_group_time{
+      display: flex;
+    align-items: center;
+    }
+    .video_tag{
+          margin: 0.5em 0.5em 0.5em 0;
+    }
+    .video_data{
+      margin-bottom: 1em;
+      padding: 0 0.5em;
+    }
+    .video_info {
+        margin: 1em 0;
+    }
     .video_data_wrap{
       display: flex;
       flex-wrap: wrap;
@@ -109,26 +124,17 @@
       padding: 10px 0;
       text-align: center;
       background-color: #8d681e;
-      color: #fff;
+      color: #333;
       text-decoration: none;
       font-size: 120%;
     }
-    .video_data_wrap {
-      padding-left: 0;
-    }
-    .video_group_time {
-      color: #4487cb;
-    }
-    .video_tag {
-      color: #e4374a;
-    }
-    .video_title h4 {
-      font-size: 1.6em;
-      font-weight: bold;
-      margin-bottom: 0;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
+    .video_title h5 {
+            @extend .i-title;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
     }
     .view_info {
       float: right;
@@ -143,4 +149,4 @@
     })
   </script>
 </div>
-{{pagination_goes_here}}
\ No newline at end of file
+{{pagination_goes_here}}
diff --git a/modules/video_pro/video_pro_index2_tag.html.erb b/modules/video_pro/video_pro_index2_tag.html.erb
index c918582..d6c67f9 100644
--- a/modules/video_pro/video_pro_index2_tag.html.erb
+++ b/modules/video_pro/video_pro_index2_tag.html.erb
@@ -1,5 +1,5 @@
 <div class="i-video_data video_data-index-2">
-  <h3 class="i-annc__page-title">{{page-title}}</h3>
+    <h3 class="i-annc__page-title"><span>{{page-title}}</span></h3>
   <div class="video_filter_area col-sm-12">
     <form>
       <div class="category_box col-sm-6">
@@ -24,22 +24,37 @@
   <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
     <li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
       <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
+      <div class="video_linkwrapper">
+        <div class="videohover">
+          <div class="Video__Player"><div class="Video__PlayerButton"></div></div>
+          <div class="videoduration"></div>
+        </div>
         <img class="video_snapshot" src="{{snapshot_url}}"/>
+      </div>
         <div class="video_info">
-          <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
-          <div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
+          <div class="video_group_time"><div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>{{video_postdate}}</div>
           <div class="video_title"><h4>{{video_title}}</h4></div>
           <div class="video_desc">{{video_desc}}</div>
-          <div class="view_info">
-            <span><img src="{{hd_icon_url}}" alt="HD"></span>
-            <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
-          </div>
         </div>
       </a>
     </li>
   </ul>
   <div class="clearfix"></div>
   <style>
+    .video_group_time{
+      display: flex;
+    align-items: center;
+    }
+    .video_tag{
+          margin: 0.5em 0.5em 0.5em 0;
+    }
+    .video_data{
+          padding: 0 0.5em;
+      margin-bottom: 1em;
+    }
+    .video_info {
+        margin: 1em 0;
+    }
     .video_data_wrap{
       display: flex;
       flex-wrap: wrap;
@@ -109,26 +124,17 @@
       padding: 10px 0;
       text-align: center;
       background-color: #8d681e;
-      color: #fff;
+      color: #333;
       text-decoration: none;
       font-size: 120%;
     }
-    .video_data_wrap {
-      padding-left: 0;
-    }
-    .video_group_time {
-      color: #4487cb;
-    }
-    .video_tag {
-      color: #e4374a;
-    }
-    .video_title h4 {
-      font-size: 1.6em;
-      font-weight: bold;
-      margin-bottom: 0;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
+    .video_title h5 {
+            @extend .i-title;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
     }
     .view_info {
       float: right;
@@ -143,4 +149,4 @@
     })
   </script>
 </div>
-{{pagination_goes_here}}
\ No newline at end of file
+{{pagination_goes_here}}
diff --git a/modules/video_pro/video_pro_index3.html.erb b/modules/video_pro/video_pro_index3.html.erb
index da719a8..4d5b0b4 100644
--- a/modules/video_pro/video_pro_index3.html.erb
+++ b/modules/video_pro/video_pro_index3.html.erb
@@ -3,7 +3,7 @@
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" title="<%= I18n.t(:close) %>" class="close" data-dismiss="modal" aria-label="Close">
+          <button type="button" title="<%= I18n.t(:close) %>" class="close" data-bs-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>
         </div>
@@ -12,14 +12,17 @@
       </div>
     </div>
   </div>
-  <h3 class="i-annc__page-title">{{page-title}}</h3>
+    <h3 class="i-annc__page-title"><span>{{page-title}}</span></h3>
   <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
-    <li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
+    <li class="video_data col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
       <a class="video_link" href="javascript:void(0)" title="{{video_title_escape}}" data-api-url="{{api_url}}">
-        <div class="video_snapshot_wrap">
-          <img class="video_snapshot" src="{{snapshot_url}}"/>
-          <img src="/assets/video_pro/btn-play.png" alt="" class="play_icon">
+      <div class="video_linkwrapper">
+        <div class="videohover">
+          <div class="Video__Player"><div class="Video__PlayerButton"></div></div>
+          <div class="videoduration"></div>
         </div>
+        <img class="video_snapshot" src="{{snapshot_url}}"/>
+      </div>
         <div class="video_info">
           <div class="video_time"><span date-format="%Y/%m/%d">{{video_postdate}}</span></div>
           <div class="video_title"><h4>{{video_title}}</h4></div>
@@ -30,17 +33,24 @@
   </ul>
   <div class="clearfix"></div>
   <style>
+    .video_data{
+      margin-bottom: 1em;
+      padding: 0 0.5em;
+    }
+    .video_info{
+          margin: 1em 0;
+    }
     .video_data_wrap{
       display: flex;
       flex-wrap: wrap;
     }
-    .video_title h4{
-      font-size: 1.1em;
-      font-weight: bold;
-      margin-bottom: 0;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
+    .video_title h5{
+            @extend .i-title;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
     }
     .video_snapshot_wrap {
       position: relative;
@@ -72,4 +82,4 @@
     })
   </script>
 </div>
-{{pagination_goes_here}}
\ No newline at end of file
+{{pagination_goes_here}}
diff --git a/modules/video_pro/video_pro_index4.html.erb b/modules/video_pro/video_pro_index4.html.erb
new file mode 100644
index 0000000..b5cc7d8
--- /dev/null
+++ b/modules/video_pro/video_pro_index4.html.erb
@@ -0,0 +1,159 @@
+<div class="i-video_data video_data-index-4">
+    <h3 class="i-annc__page-title"><span>{{page-title}}</span></h3>
+  <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
+    <li class="video_data col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
+      <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
+      <div class="video_linkwrapper">
+        <div class="videohover">
+          <div class="Video__Player"><div class="Video__PlayerButton"></div></div>
+          <div class="videoduration"></div>
+        </div>
+        <img class="video_snapshot" src="{{snapshot_url}}"/>
+      </div>
+      <div class="video_info">
+        <div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
+        <div class="video_group_time">{{video_postdate}}</div>
+        <div class="video_title"><h5>{{video_title}}</h5></div>
+        <div class="video_desc">{{video_desc}}</div>
+      </div>
+      </a>
+    </li>
+  </ul>
+  <div class="clearfix"></div>
+  <style>
+    .video_group_time{
+      display: flex;
+      align-items: center;
+    }
+    .video_tag{
+          margin: 0.5em 0.5em 0.5em 0;
+    }
+    .video_data{
+      margin-bottom: 1em;
+      padding: 0 0.5em;
+    }
+    .video_info {
+        margin: 1em 0;
+    }
+    .video_data_wrap{
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .video_filter_area {
+      margin-bottom: 20px;
+    }
+    #filter_category_box {
+      width: 100%;
+      line-height: 50px;
+      height: 50px;
+      max-width: none;
+      border: none;
+      padding: 0 1em;
+    }
+    .category_box {
+      padding: 0;
+    }
+    .search_box {
+      padding-right: 0;
+    }
+    @media (max-width: 767px){
+      .search_box {
+        padding: 0;
+        margin-top: 0.5em;
+      }
+    }
+    .search_keyword {
+      margin-right: 50px;
+    }
+    .search_input input[type=text] {
+      padding: 0 1em;
+      line-height: 50px;
+    }
+    .search_input input {
+      max-width: none;
+      width: 100%;
+      height: 50px;
+      border: none;
+    }
+    .search_submit {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 50px;
+      height: 100%;
+    }
+    .search_input input[type=submit] {
+      background: url(/assets/video_pro/search_btn.png) center center no-repeat #c9c9c9;
+      font-size: 0;
+    }
+    .video_tablist {
+      overflow: hidden;
+      letter-spacing: 0.1em;
+      margin-bottom: 15px;
+      padding: 0;
+    }
+    .video_tablist>li, .album_tablist>li {
+      width: 50%;
+      float: left;
+    }
+    .video_tablist li.now_view a {
+      background-color: #c47f27;
+    }
+    .video_tablist a {
+      display: block;
+      padding: 10px 0;
+      text-align: center;
+      background-color: #8d681e;
+      color: #333;
+      text-decoration: none;
+      font-size: 120%;
+    }
+    .video_title h5 {
+            @extend .i-title;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+    }
+    .view_info {
+      float: right;
+    }
+    .view_info img {
+      margin-right: 5px;
+    }
+  </style>
+  <script>
+
+    $(document).ready(function () {
+      var $select = $("#filter_category_box"); // 取得 select
+      var $categoryBox = $(".category_box"); // 取得分類框
+
+      // 創建按鈕並插入
+      $select.find("option").each(function () {
+        var value = $(this).val();
+        var text = $(this).text();
+
+        // 只處理有值的選項
+        if (value) {
+          var $btn = $('<button class="category-btn" data-value="' + value + '">' + text + '</button>');
+          $categoryBox.append($btn);
+        }
+      });
+
+      // 點擊按鈕時，更新 select 並觸發變更事件
+      $(".category-btn").on("click", function () {
+        var selectedValue = $(this).data("value");
+        $select.val(selectedValue).trigger("change"); // 設定 select 值並觸發變更事件
+      });
+
+      // 隱藏原本的 select
+      $select.hide();
+      $('#filter_category_box').on('change', function(){
+        $(this).prop('form').submit();
+      })
+    });
+
+  </script>
+</div>
+{{pagination_goes_here}}