diff --git a/lib/tasks/universal_table_tasks.rake b/lib/tasks/universal_table_tasks.rake
index 09a4742..d4222a2 100755
--- a/lib/tasks/universal_table_tasks.rake
+++ b/lib/tasks/universal_table_tasks.rake
@@ -128,15 +128,15 @@ namespace :universal_table_tasks do
           site_locales.each_with_index do |locale, locale_idx|
             file_titles[locale.to_s] = row[col_idx + locale_idx + 1]&.value.to_s.split(";").map(&:strip)
           end
-          ce.column_entry_files.destroy_all
-          ce.column_entry_files = []
+          # ce.column_entry_files.destroy_all
+          # ce.column_entry_files = []
+          cef_ids = ce.column_entry_files.pluck(:id)
 
           file_urls.each_with_index do |remote_url, file_idx|
             if remote_url.blank?
               skip = site_locales.size
             end
             next if remote_url.blank?
-            debugger
             file = ColumnEntryFile.new
             file.remote_file_url = remote_url
             titles = {}
@@ -147,6 +147,7 @@ namespace :universal_table_tasks do
             file.save!
             ce.column_entry_files << file
           end
+          ColumnEntryFile.where(:id.in => cef_ids).destroy_all
 
         when "date"
           ce.date = val
diff --git a/modules/universal_table/_tag_cloud.html.erb b/modules/universal_table/_tag_cloud.html.erb
index 32f95c0..3978ab5 100755
--- a/modules/universal_table/_tag_cloud.html.erb
+++ b/modules/universal_table/_tag_cloud.html.erb
@@ -1 +1,112 @@
-hi
\ No newline at end of file
+<ul id="hashtag-list" data-list="hashtags" data-level="0" style="display:none;">
+  <li class="tag-weight-{{count}}"><a href="{{url_to_show}}" title="{{title}}">#{{title}}</a></li>
+</ul>
+<div id="hashtag-wordcloud-wrapper">
+<div id="hashtag-wordcloud" style="  "></div>
+</div>
+
+<script>
+function generateWordCloud() {
+  const container = $('#hashtag-wordcloud');
+  const containerWidth = container.width();
+  const containerHeight = container.height();
+  const placedRects = [];
+
+  function isOverlap(r1, r2, padding = 4) {
+    return !(r2.left > r1.right + padding ||
+             r2.right < r1.left - padding ||
+             r2.top > r1.bottom + padding ||
+             r2.bottom < r1.top - padding);
+  }
+
+  function hasCollision(rect) {
+    return placedRects.some(r => isOverlap(r, rect));
+  }
+
+  function getRandomColor() {
+    const hue = Math.floor(Math.random() * 360);
+    const saturation = Math.floor(Math.random() * 20) + 10;
+    const lightness = Math.floor(Math.random() * 20) + 45;
+    return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+  }
+
+  container.empty();
+
+  $('#hashtag-list li').each(function () {
+    const $li = $(this);
+    const weightClass = $li.attr('class');
+    const weightMatch = weightClass.match(/tag-weight-(\d+)/);
+    const weight = weightMatch ? parseInt(weightMatch[1], 10) : 1;
+
+    const $a = $li.find('a');
+    let text = $a.text();
+    if (text.startsWith('#')) {
+      text = text.substring(1);
+    }
+    const href = $a.attr('href');
+    const title = $a.attr('title');
+
+    const fontSize = Math.min(36, Math.max(16, weight / 100 * 36));
+
+    const $word = $('<a></a>')
+      .attr('href', href)
+      .attr('title', title)
+      .text(text)
+      .css({
+        position: 'absolute',
+        fontSize: fontSize + 'px',
+        color: getRandomColor(),
+        whiteSpace: 'nowrap',
+        cursor: 'pointer',
+        userSelect: 'none',
+        textDecoration: 'none',
+        visibility: 'hidden',
+        display: 'inline-block'
+      });
+
+    container.append($word);
+
+    const width = $word.outerWidth();
+    const height = $word.outerHeight();
+
+    let maxAttempts = 1000;
+    let placed = false;
+
+    while (!placed && maxAttempts > 0) {
+      const left = Math.random() * (containerWidth - width);
+      const top = Math.random() * (containerHeight - height);
+
+      const rect = {
+        left: left,
+        top: top,
+        right: left + width,
+        bottom: top + height
+      };
+
+      if (!hasCollision(rect)) {
+        $word.css({
+          left: left + 'px',
+          top: top + 'px',
+          visibility: 'visible'
+        });
+        placedRects.push(rect);
+        placed = true;
+      }
+      maxAttempts--;
+    }
+
+    if (!placed) {
+      $word.remove(); // 放不下就不強塞
+    }
+  });
+}
+
+$(function() {
+  generateWordCloud();
+
+  // RWD時重新生成文字雲
+  $(window).on('resize', function() {
+    generateWordCloud();
+  });
+});
+</script>
diff --git a/modules/universal_table/index.html.erb b/modules/universal_table/index.html.erb
index c188ce6..fd697ce 100755
--- a/modules/universal_table/index.html.erb
+++ b/modules/universal_table/index.html.erb
@@ -1,111 +1,133 @@
-  <style>
-    .universal-dropdown-menu {
-      padding: 15px 18px;
-      white-space: nowrap;
+<style>
+
+  .universal-dropdown{
+    float:left;
+  }
+  tr>th:first-child{
+    display: none!important;
+  }
+  tr>td:first-child{
+    display: none!important;
+  }
+  .col-ken{
+        min-width: 4em;
+    &:first-child{
+      min-width: unset!important;
     }
-    .universal-th-text  {
-      padding: 8px 0 0 0;
-      display: inline;
-      margin-right: 5px;
-      color: #888;
+  }
+  .universal-table-index3{
+    table-layout: auto!important;
+    .universal-th-icon{
+      margin:0;
     }
-    .universal-dropdown {
-      display: inline-block;
-    }
-    a.universal-btn {
-      vertical-align: baseline;
-      color: #fff;
-    }
-    .universal-table-index {
-      border-collapse: collapse;
-      border: 1px solid #eee;
-      table-layout: fixed;
-      word-wrap: break-word;
-    }
-    .universal-table-index h3 {
-      float: left;
+    .universal-th-text {
       margin: 0;
+      .universal-th-icon{
+        margin:0;
+      }
+      .universal-th-text {
+        margin: 0;
+      }
     }
-    .universal-table-index.table td{
-      padding: 15px 18px;
-    }
-    .universal-table-index thead th:last-child .dropdown-menu {
-      left: auto;
-      right: 0;
-    }
-    .universal-th-icon {
-      border: 1px solid #eee;
-      padding: 5px 8px;
-      margin-right: 5px;
-      color: gray;
-      cursor: pointer;
-    }
-    .universal-th-text.no-sort.no-search {
-      position: relative;
-      top: -6px;
-    }
-    .image-preview {
-      width: 120px;
-    }
-  </style>
-  <form class="form-inline universal-form-inline" action="{{url}}" method="get">
-  <table class="table table-hover table-striped universal-table-index">
-    <caption>
-      <h3>{{table-name}}</h3>
-      <a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
-    </caption>
-    <thead>
-      <tr data-list="head-columns" data-level="0">
-        <th class="col-md-3">
-          <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
-          <div class="universal-th-text {{title-class}}">{{title}}</div>
-          <div class="dropdown universal-dropdown {{search}}">
-            <button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              <i class="fa fa-search"></i>
-              <span class="caret"></span>
-            </button>
-            <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
+
+  }
+  .universal-th-text{
+    white-space: pre!important;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+}
+  .universal-dropdown-menu {
+    padding: 15px 18px;
+    white-space: nowrap;
+  }
+  .universal-th-text  {
+    padding: 8px 0 0 0;
+    display: inline;
+    margin-right: 5px;
+  }
+  .universal-dropdown {
+    display: inline-block;
+  }
+  a.universal-btn {
+    vertical-align: baseline;
+    color: #fff;
+  }
+  .universal-table-index {
+    border-collapse: collapse;
+    border: 1px solid #eee;
+    table-layout: fixed;
+    word-wrap: break-word;
+  }
+  .universal-table-index h3 {
+    float: left;
+    margin: 0;
+  }
+  .universal-table-index.table td{
+    padding: 15px 18px;
+  }
+  .universal-table-index thead th:last-child .dropdown-menu {
+    left: auto;
+    right: 0;
+  }
+  .universal-th-icon {
+    border: 1px solid #eee;
+    padding: 5px 8px;
+    margin-right: 5px;
+    color: gray;
+    cursor: pointer;
+  }
+  .universal-th-text.no-sort.no-search {
+    position: relative;
+    top: -6px;
+  }
+  .image-preview {
+    width: 120px;
+  }
+</style>
+<table class="table table-hover table-striped universal-table-index universal-table-index1">
+  <caption>
+    <h3>{{table-name}}</h3>
+    <a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
+  </caption>
+  <thead>
+    <tr data-list="head-columns" data-level="0">
+      <th class="col-ken">
+        <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
+        <div class="dropdown universal-dropdown {{search}}">
+          <button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="fa fa-search"></i>
+            <span class="caret"></span>
+          </button>
+          <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
+            <form class="form-inline universal-form-inline" action="{{url}}" method="get">
               <div class="form-group">
                 {{form-field}}
+                <input type="hidden" value="{{key}}" name="column" >
               </div>
               <button class="btn btn-primary" type="submit" class="btn btn-default">Go</button>
-            </div>
+            </form>
           </div>
-        </th>
-      </tr>
-    </thead>
-    <tbody data-level="0" data-list="rows">
-      <tr data-level="1" data-list="columns">
-        <td>{{text}}</td>
-      </tr>
-    </tbody>
-  </table>
-  </form>
-  <div>{{total_entries}}</div>
-  <div>{{export_button}}</div>
-  {{pagination_goes_here}}
-<script type="text/javascript">
-  $('.universal-table-index th').eq(1).attr('class', 'desktop tablet-l tablet-p');
-  $('.universal-table-index th').filter(':gt(1)').attr('class', 'desktop tablet-l tablet-p mobile-l');
-  $('.universal-table-index').each(function(){
-    if($(this).find('thead').length!=0 && $(this).find('td').length!=0 && !$(this).hasClass('dataTable')){
-      $(this).DataTable({
-        searching: false,
-        paging: false,
-        ordering: false,
-        info: false,
-        order: false,
-        autoWidth: false,
-        responsive: true
-      });
-    }
-  });
-  $(document).on('click', '.universal-table-index .dropdown-menu', function (e) {
-    e.stopPropagation();
-  });
+        </div>
+                <div class="universal-th-text {{title-class}}">{{title}}</div>
+      </th>
+    </tr>
+  </thead>
+  <tbody data-level="0" data-list="rows">
+    <tr data-level="1" data-list="columns">
+      <td>{{text}}</td>
+    </tr>
+  </tbody>
+</table>
+<div>{{total_entries}}</div>
+<div>{{export_button}}</div>
+{{pagination_goes_here}}
+<script>
+
 </script>
 <style>
-  .universal-table-index.dtr-inline.collapsed td.dtr-control{
-    vertical-align: middle;
-  }
-</style>
\ No newline at end of file
+.universal-table-index.dtr-inline.collapsed td.dtr-control{
+  vertical-align: middle;
+}
+</style>
diff --git a/modules/universal_table/index2.html.erb b/modules/universal_table/index2.html.erb
index b058544..d1aa4b6 100755
--- a/modules/universal_table/index2.html.erb
+++ b/modules/universal_table/index2.html.erb
@@ -1,99 +1,111 @@
-  <style>
-    .universal-dropdown-menu {
-      padding: 15px 18px;
-      white-space: nowrap;
+<style>
+
+  .universal-dropdown{
+    float:left;
+  }
+  .col-ken{
+        min-width: 4em;
+    &:first-child{
+      min-width: unset!important;
     }
-    .universal-th-text  {
-      padding: 8px 0 0 0;
-      display: inline;
-      margin-right: 5px;
-      color: #fff;
-    }
-    .universal-dropdown {
-      display: inline-block;
-      color: gray;
-    }
-    a.universal-btn {
-      vertical-align: baseline;
-      color: #fff;
-    }
-    .universal-table-index {
-      border-collapse: collapse;
-      border: 1px solid #eee;
-      table-layout: fixed;
-      word-wrap: break-word;
-    }
-    .universal-table-index h3 {
-      float: left;
-      margin: 0;
-    }
-    .universal-table-index.table td{
-      padding: 15px 18px;
-    }
-    .universal-table-index thead th:last-child .dropdown-menu {
-      left: auto;
-      right: 0;
-    }
-    .universal-table-index tbody {
-       counter-reset: item;
-    }
-    .universal-table-index thead > tr > th:first-child {
-       width: 4em;
-    }
-    .universal-th-icon {
-      border: 1px solid #eee;
-      padding: 5px 8px;
-      margin-right: 5px;
-      color: #fff;
-      cursor: pointer;
-    }
-    .universal-th-text.no-sort.no-search {
-      position: relative;
-      top: -6px;
-    }
-    .image-preview {
-      width: 120px;
-    }
-  </style>
-  <form class="form-inline universal-form-inline" action="{{url}}" method="get">
-  <table class="table table-hover table-striped universal-table-index">
-    <caption>
-      <h3>{{table-name}}</h3>
-      <a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
-    </caption>
-    <thead>
-      <tr data-list="head-columns" data-level="0">
-        <th class="col-md-3">
-          <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
-          <div class="universal-th-text {{title-class}}">{{title}}</div>
-          <div class="dropdown universal-dropdown {{search}}">
-            <button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              <i class="fa fa-search"></i>
-              <span class="caret"></span>
-            </button>
-            <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
+  }
+  .universal-th-text{
+    white-space: pre!important;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+}
+  .universal-dropdown-menu {
+    padding: 15px 18px;
+    white-space: nowrap;
+  }
+  .universal-th-text  {
+    padding: 8px 0 0 0;
+    display: inline;
+    margin-right: 5px;
+  }
+  .universal-dropdown {
+    display: inline-block;
+  }
+  a.universal-btn {
+    vertical-align: baseline;
+    color: #fff;
+  }
+  .universal-table-index {
+    border-collapse: collapse;
+    border: 1px solid #eee;
+    table-layout: fixed;
+    word-wrap: break-word;
+  }
+  .universal-table-index h3 {
+    float: left;
+    margin: 0;
+  }
+  .universal-table-index.table td{
+    padding: 15px 18px;
+  }
+  .universal-table-index thead th:last-child .dropdown-menu {
+    left: auto;
+    right: 0;
+  }
+  .universal-th-icon {
+    border: 1px solid #eee;
+    padding: 5px 8px;
+    margin-right: 5px;
+    color: gray;
+    cursor: pointer;
+  }
+  .universal-th-text.no-sort.no-search {
+    position: relative;
+    top: -6px;
+  }
+  .image-preview {
+    width: 120px;
+  }
+</style>
+<table class="table table-hover table-striped universal-table-index universal-table-index2">
+  <caption>
+    <h3>{{table-name}}</h3>
+    <a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
+  </caption>
+  <thead>
+    <tr data-list="head-columns" data-level="0">
+      <th class="col-ken">
+        <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
+        <div class="dropdown universal-dropdown {{search}}">
+          <button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="fa fa-search"></i>
+            <span class="caret"></span>
+          </button>
+          <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
+            <form class="form-inline universal-form-inline" action="{{url}}" method="get">
               <div class="form-group">
                 {{form-field}}
+                <input type="hidden" value="{{key}}" name="column" >
               </div>
               <button class="btn btn-primary" type="submit" class="btn btn-default">Go</button>
-            </div>
+            </form>
           </div>
-        </th>
-      </tr>
-    </thead>
-    <tbody data-level="0" data-list="rows">
-      <tr data-level="1" data-list="columns">
-        <td>{{text}}</td>
-      </tr>
-    </tbody>
-  </table>
-  </form>
-  <div>{{total_entries}}</div>
-  <div>{{export_button}}</div>
-  {{pagination_goes_here}}
+        </div>
+                <div class="universal-th-text {{title-class}}">{{title}}</div>
+      </th>
+    </tr>
+  </thead>
+  <tbody data-level="0" data-list="rows">
+    <tr data-level="1" data-list="columns">
+      <td>{{text}}</td>
+    </tr>
+  </tbody>
+</table>
+<div>{{total_entries}}</div>
+<div>{{export_button}}</div>
+{{pagination_goes_here}}
+<script>
 
-  <script type="text/javascript">
-    $(document).on('click', '.universal-table-index .dropdown-menu', function (e) {
-      e.stopPropagation();
-    });
-  </script>
\ No newline at end of file
+</script>
+<style>
+.universal-table-index.dtr-inline.collapsed td.dtr-control{
+  vertical-align: middle;
+}
+</style>
diff --git a/modules/universal_table/index3.html.erb b/modules/universal_table/index3.html.erb
index ea5f72c..a535708 100755
--- a/modules/universal_table/index3.html.erb
+++ b/modules/universal_table/index3.html.erb
@@ -1,118 +1,153 @@
-  <style>
-    .universal-dropdown-menu {
-      padding: 15px 18px;
-      white-space: nowrap;
-    }
-    .universal-th-text  {
-      padding: 8px 0 0 0;
-      display: inline;
-      margin-right: 5px;
-      color: #888;
-    }
-    .universal-dropdown {
-      display: inline-block;
-    }
-    a.universal-btn {
-      vertical-align: baseline;
-      color: #fff;
-    }
-    .universal-table-index {
-      border-collapse: collapse;
-      border: 1px solid #eee;
-      table-layout: fixed;
-      word-wrap: break-word;
-    }
-    .universal-table-index h3 {
-      float: left;
-      margin: 0;
-    }
-    .universal-table-index.table td{
-      padding: 15px 18px;
-    }
-    .universal-table-index thead th:last-child .dropdown-menu {
-      left: auto;
-      right: 0;
-    }
-    .universal-table-index tbody {
-       counter-reset: item;
-    }
-    .universal-th-icon {
-      border: 1px solid #eee;
-      padding: 5px 8px;
-      margin-right: 5px;
-      color: gray;
-      cursor: pointer;
-    }
-    .universal-th-text.no-sort.no-search {
-      position: relative;
-      top: -6px;
-    }
-    .image-preview {
-      width: 120px;
-    }
-  </style>
-  <form class="form-inline universal-form-inline" action="{{url}}" method="get">
-  <table class="table table-hover table-striped universal-table-index">
-    <div class="searchbtn">
-      <div class="ken-click">
-        <div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>查詢</div>
-        <a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
-      </div>
+<style>
+  tr>th:first-child{
+    display: none!important;
+  }
+  tr>td:first-child{
+    display: none!important;
+  }
+  .universal-table-index3{
+    table-layout: auto!important;
+  }
+  .universal-dropdown-menu {
+    padding: 15px 18px;
+    white-space: nowrap;
+  }
+  .universal-th-text{
+    white-space: pre!important;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+}
+  .universal-dropdown-menu {
+    padding: 15px 18px;
+    white-space: nowrap;
+  }
+  .universal-th-text  {
+    padding: 8px 0 0 0;
+    display: inline;
+    margin-right: 5px;
+  }
+  .universal-dropdown {
+    display: inline-block;
+  }
+  a.universal-btn {
+    vertical-align: baseline;
+    color: #fff;
+  }
+  .universal-table-index {
+    border-collapse: collapse;
+    border: 1px solid #eee;
+    table-layout: fixed;
+    word-wrap: break-word;
+  }
+  .universal-table-index h3 {
+    float: left;
+    margin: 0;
+  }
+  .universal-table-index.table td{
+    padding: 15px 18px;
+  }
+  .universal-table-index thead th:last-child .dropdown-menu {
+    left: auto;
+    right: 0;
+  }
+  /* .universal-table-index tbody {
+     counter-reset: item;
+  } */
+  .universal-th-icon {
+    border: 1px solid #eee;
+    padding: 5px 8px;
+    margin-right: 5px;
+    color: gray;
+    cursor: pointer;
+  }
+  .universal-th-text.no-sort.no-search {
+    position: relative;
+    top: -6px;
+  }
+  .image-preview {
+    width: 120px;
+  }
+</style>
+<form class="form-inline universal-form-inline " action="{{url}}" method="get">
+<table class="table table-hover table-striped universal-table-index universal-table-index3">
+  <div class="searchbtn">
+    <div class="ken-click">
+      <div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>查詢</div>
+      <a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
     </div>
-    <div class="searchbox">
-    <div class="theadsearch2">
-      <div class="row col-md-11 col-xs-12" data-list="searchable-columns" data-level="0">
-        <div class="{{col-class}}">
-          <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
-          <div class="universal-th-text {{title-class}}">{{title}}</div>
-          <div class="dropdown universal-dropdown {{search}}">
-            <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
-              <div class="form-group">
-                {{form-field}}
-                <input type="hidden" value="{{key}}" name="column" >
-              </div>
+  </div>
+  <div class="searchbox">
+  <div class="theadsearch2">
+    <div class="row col-md-11 col-xs-12" data-list="searchable-columns" data-level="0">
+      <div class="{{col-class}}">
+        <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
+        <div class="universal-th-text {{title-class}}">{{title}}</div>
+        <div class="dropdown universal-dropdown {{search}}">
+          <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
+            <div class="form-group">
+              {{form-field}}
+              <input type="hidden" value="{{key}}" name="column" >
             </div>
           </div>
         </div>
       </div>
-      <div class="col-md-1 col-xs-12 submit-btn-wrap">
-        <button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
-      </div>
     </div>
+    <div class="col-md-1 col-xs-12 submit-btn-wrap">
+      <button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
     </div>
-    <caption>
-      <h3>{{table-name}}</h3>
-    </caption>
-    <thead class="theadsearch">
-      <tr data-list="head-columns" data-level="0">
-        <th class="col-md-3">
-          <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
-          <div class="universal-th-text {{title-class}}">{{title}}</div>
-          <div class="dropdown universal-dropdown {{search}}">
-            <button class="btn btn-md" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              <i class="fa fa-search"></i>
-              <span class="caret"></span>
-            </button>
-            <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
-              <form class="form-inline universal-form-inline" action="{{url}}" method="get">
-                <div class="form-group">
-                  {{form-field}}
-                  <input type="hidden" value="{{key}}" name="column" >
-                </div>
-                <button class="btn btn-primary" type="submit" class="btn btn-default">Go</button>
-              </form>
-            </div>
+  </div>
+  </div>
+  <caption>
+    <h3>{{table-name}}</h3>
+  </caption>
+  <thead class="theadsearch">
+    <tr data-list="head-columns" data-level="0">
+      <th class="col-ken">
+        <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
+        <div class="universal-th-text {{title-class}}">{{title}}</div>
+        <div class="dropdown universal-dropdown {{search}}">
+          <button class="btn btn-md" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="fa fa-search"></i>
+            <span class="caret"></span>
+          </button>
+          <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
+            <form class="form-inline universal-form-inline" action="{{url}}" method="get">
+              <div class="form-group">
+                {{form-field}}
+                <input type="hidden" value="{{key}}" name="column" >
+              </div>
+              <button class="btn btn-primary" type="submit" class="btn btn-default">Go</button>
+            </form>
           </div>
-        </th>
-      </tr>
-    </thead>
-    <tbody data-level="0" data-list="rows">
-      <tr data-level="1" data-list="columns">
-        <td>{{text}}</td>
-      </tr>
-    </tbody>
-  </table>
-  </form>
-  <div>{{total_entries}}</div>
-  <div>{{export_button}}</div>
-  {{pagination_goes_here}}
+        </div>
+      </th>
+    </tr>
+  </thead>
+  <tbody data-level="0" data-list="rows">
+    <tr data-level="1" data-list="columns">
+      <td>{{text}}</td>
+    </tr>
+  </tbody>
+</table>
+</form>
+<div>{{total_entries}}</div>
+<div>{{export_button}}</div>
+{{pagination_goes_here}}
+<script>
+// $(document).ready(function(){
+//   $("tr>th:first-child").removeClass("col-md-3");
+//   $("tr>th:first-child").addClass("col-md-1");
+//   $("tr>th:nth-child(2)").removeClass("col-md-3");
+//   $("tr>th:nth-child(2)").addClass("col-md-6");
+//   $("tr>th:nth-child(3)").removeClass("col-md-3");
+//   $("tr>th:nth-child(3)").addClass("col-md-3");
+//   $("tr>th:nth-child(4)").removeClass("col-md-3");
+//   $("tr>th:nth-child(4)").addClass("col-md-2");
+//   $("tr>th:nth-child(5)").removeClass("col-md-3");
+//   $("tr>th:nth-child(5)").addClass("col-md-3");
+// });
+// $('.universal-table-index thead tr').prepend('<th></th>')
+// $('.universal-table-index tbody tr').prepend('<td></td>')
+</script>
diff --git a/modules/universal_table/index4.html.erb b/modules/universal_table/index4.html.erb
new file mode 100644
index 0000000..97b4a39
--- /dev/null
+++ b/modules/universal_table/index4.html.erb
@@ -0,0 +1,147 @@
+<style>
+  .universal-table-index4{
+    table-layout: auto!important;
+  }
+  .universal-dropdown-menu {
+    padding: 15px 18px;
+    white-space: nowrap;
+  }
+  .universal-th-text{
+    white-space: pre!important;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+}
+  .universal-dropdown-menu {
+    padding: 15px 18px;
+    white-space: nowrap;
+  }
+  .universal-th-text  {
+    padding: 8px 0 0 0;
+    display: inline;
+    margin-right: 5px;
+  }
+  .universal-dropdown {
+    display: inline-block;
+  }
+  a.universal-btn {
+    vertical-align: baseline;
+    color: #fff;
+  }
+  .universal-table-index {
+    border-collapse: collapse;
+    border: 1px solid #eee;
+    table-layout: fixed;
+    word-wrap: break-word;
+  }
+  .universal-table-index h3 {
+    float: left;
+    margin: 0;
+  }
+  .universal-table-index.table td{
+    padding: 15px 18px;
+  }
+  .universal-table-index thead th:last-child .dropdown-menu {
+    left: auto;
+    right: 0;
+  }
+  /* .universal-table-index tbody {
+     counter-reset: item;
+  } */
+  .universal-th-icon {
+    border: 1px solid #eee;
+    padding: 5px 8px;
+    margin-right: 5px;
+    color: gray;
+    cursor: pointer;
+  }
+  .universal-th-text.no-sort.no-search {
+    position: relative;
+    top: -6px;
+  }
+  .image-preview {
+    width: 120px;
+  }
+</style>
+<form class="form-inline universal-form-inline " action="{{url}}" method="get">
+<table class="table table-hover table-striped universal-table-index universal-table-index4">
+  <div class="searchbtn">
+    <div class="ken-click">
+      <div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>查詢</div>
+      <a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
+    </div>
+  </div>
+  <div class="searchbox">
+  <div class="theadsearch2">
+    <div class="row col-md-11 col-xs-12" data-list="searchable-columns" data-level="0">
+      <div class="{{col-class}}">
+        <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
+        <div class="universal-th-text {{title-class}}">{{title}}</div>
+        <div class="dropdown universal-dropdown {{search}}">
+          <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
+            <div class="form-group">
+              {{form-field}}
+              <input type="hidden" value="{{key}}" name="column" >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-1 col-xs-12 submit-btn-wrap">
+      <button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
+    </div>
+  </div>
+  </div>
+  <caption>
+    <h3>{{table-name}}</h3>
+  </caption>
+  <thead class="theadsearch">
+    <tr data-list="head-columns" data-level="0">
+      <th class="col-ken">
+        <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
+        <div class="universal-th-text {{title-class}}">{{title}}</div>
+        <div class="dropdown universal-dropdown {{search}}">
+          <button class="btn btn-md" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="fa fa-search"></i>
+            <span class="caret"></span>
+          </button>
+          <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
+            <form class="form-inline universal-form-inline" action="{{url}}" method="get">
+              <div class="form-group">
+                {{form-field}}
+                <input type="hidden" value="{{key}}" name="column" >
+              </div>
+              <button class="btn btn-primary" type="submit" class="btn btn-default">Go</button>
+            </form>
+          </div>
+        </div>
+      </th>
+    </tr>
+  </thead>
+  <tbody data-level="0" data-list="rows">
+    <tr data-level="1" data-list="columns">
+      <td>{{text}}</td>
+    </tr>
+  </tbody>
+</table>
+</form>
+<div>{{total_entries}}</div>
+<div>{{export_button}}</div>
+{{pagination_goes_here}}
+<script>
+// $(document).ready(function(){
+//   $("tr>th:first-child").removeClass("col-md-3");
+//   $("tr>th:first-child").addClass("col-md-1");
+//   $("tr>th:nth-child(2)").removeClass("col-md-3");
+//   $("tr>th:nth-child(2)").addClass("col-md-6");
+//   $("tr>th:nth-child(3)").removeClass("col-md-3");
+//   $("tr>th:nth-child(3)").addClass("col-md-3");
+//   $("tr>th:nth-child(4)").removeClass("col-md-3");
+//   $("tr>th:nth-child(4)").addClass("col-md-2");
+//   $("tr>th:nth-child(5)").removeClass("col-md-3");
+//   $("tr>th:nth-child(5)").addClass("col-md-3");
+// });
+// $('.universal-table-index thead tr').prepend('<th></th>')
+// $('.universal-table-index tbody tr').prepend('<td></td>')
+</script>
diff --git a/modules/universal_table/index5.html.erb b/modules/universal_table/index5.html.erb
new file mode 100644
index 0000000..c6b5f33
--- /dev/null
+++ b/modules/universal_table/index5.html.erb
@@ -0,0 +1,214 @@
+<style>
+.combined-search-inner{
+   border: 1px solid #d5d5d5;
+    background: #f6f6f6;
+    padding: 0.5em;
+    border-radius: 0.5em;
+}
+.input-group2{
+    display: flex;
+    justify-content: space-between;
+}
+.more-btn {
+    background-color: #c93a42;
+    color: #fff;
+    font-size: 1rem;
+    border-radius: 5px;
+    &:hover{
+      color:#fff!important;
+    }
+}
+#combined-search{
+    max-width:250px;
+    flex: 0 0 75%;
+    width: auto;
+    display: block;
+    height: calc(1.5em + .75rem + 2px);
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: .25rem;
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+}
+  tr>th:first-child{
+    display: none!important;
+  }
+  tr>td:first-child{
+    display: none!important;
+  }
+  .universal-table-index3{
+    table-layout: auto!important;
+  }
+  .universal-dropdown-menu {
+    padding: 15px 18px;
+    white-space: nowrap;
+  }
+  .universal-th-text{
+    white-space: pre!important;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+}
+  .universal-dropdown-menu {
+    padding: 15px 18px;
+    white-space: nowrap;
+  }
+  .universal-th-text  {
+    padding: 8px 0 0 0;
+    display: inline;
+    margin-right: 5px;
+  }
+  .universal-dropdown {
+    display: inline-block;
+  }
+  a.universal-btn {
+    vertical-align: baseline;
+    color: #fff;
+  }
+  .universal-table-index {
+    border-collapse: collapse;
+    border: 1px solid #eee;
+    table-layout: fixed;
+    word-wrap: break-word;
+  }
+  .universal-table-index h3 {
+    float: left;
+    margin-left: 0;
+  }
+  .universal-table-index.table td{
+    padding: 15px 18px;
+  }
+  .universal-table-index thead th:last-child .dropdown-menu {
+    left: auto;
+    right: 0;
+  }
+  /* .universal-table-index tbody {
+     counter-reset: item;
+  } */
+  .universal-th-icon {
+    border: 1px solid #eee;
+    padding: 5px 8px;
+    margin-right: 5px;
+    color: gray;
+    cursor: pointer;
+  }
+  .universal-th-text.no-sort.no-search {
+    position: relative;
+    top: -6px;
+  }
+  .image-preview {
+    width: 120px;
+  }
+</style>
+<form class="form-inline universal-form-inline universal-form-inline5 universal-index5" action="{{url}}" method="get">
+<table class="table table-hover table-striped universal-table-index universal-table-index3">
+
+
+  <caption>
+    <h3>{{table-name}}</h3>
+  <div class="row col-md-12 col-xs-12 combined-search-row">
+      <div class="col-md-12 combined-search-inner">
+        <label for="combined-search" class="sr-only">整合搜尋</label>
+        <div class="input-group2">
+          <input type="text" id="combined-search" class="form-control" placeholder="輸入欲揣的詞，揤送出" aria-label="搜揣" title="輸入欲揣的詞，揤送出">
+          <div class="input-group-btn2">
+            <button id="combined-search-btn" type="button" class="btn btn-warning2 more-btn">
+              送出<i class="fa fa-arrow-right" aria-hidden="true"></i>
+            </button>
+          </div>
+        </div>
+          <div class="searchbtn">
+    <div class="ken-click">
+      <div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>進階</div>
+      <a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
+    </div>
+  </div>
+  <div class="searchbox">
+    <div class="theadsearch2">
+      <div class="row col-md-11 col-xs-12" data-list="searchable-columns" data-level="0">
+        <div class="{{col-class}}">
+        <a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a><div class="universal-th-text {{title-class}}">{{title}}</div>
+          <div class="dropdown universal-dropdown {{search}}">
+            <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
+              <div class="form-group">
+                {{form-field}}
+                <input type="hidden" value="{{key}}" name="column" >
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-1 col-xs-12 submit-btn-wrap">
+        <button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
+      </div>
+
+    </div>
+  </div>
+      </div>
+      
+  </div>
+  </caption>
+
+
+  <thead class="theadsearch">
+    <tr data-list="head-columns" data-level="0">
+      <th class="col-ken">
+        <a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a><div class="universal-th-text {{title-class}}">{{title}}</div>
+          <div class="universal-th-text {{title-class}}">{{title}}</div>
+        <div class="dropdown universal-dropdown {{search}}">
+          <button class="btn btn-md" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="fa fa-search"></i>
+            <span class="caret"></span>
+          </button>
+          <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
+            <form class="form-inline universal-form-inline" action="{{url}}" method="get">
+              <div class="form-group">
+                {{form-field}}
+                <input type="hidden" value="{{key}}" name="column" >
+              </div>
+              <button class="btn btn-primary" type="submit" class="btn btn-default">送出<i class="fa fa-arrow-right" aria-hidden="true"></i></button>
+            </form>
+          </div>
+        </div>
+      </th>
+    </tr>
+  </thead>
+  <tbody data-level="0" data-list="rows">
+    <tr class="tdken" data-level="1" data-list="columns">
+      <td>{{text}}</td>
+    </tr>
+  </tbody>
+</table>
+</form>
+<div>{{total_entries}}</div>
+<div>{{export_button}}</div>
+{{pagination_goes_here}}
+<script>
+
+
+$(document).ready(function(){
+  $('.tdken>td:nth-child(4)').prepend($('.col-ken:nth-child(4)>.universal-th-text '));
+  $('.tdken>td:nth-child(3)').prepend($('.col-ken:nth-child(3)>.universal-th-text '));
+  $(".universal-th-text").append(" :");
+  # $(".tdken").append('<i class="fa-solid fa-thumbtack"></i>');
+  $('.voice-player').each(function () {
+    // 取得 <i> 元素
+    const icon = $(this).find('i')[0];
+    if (icon) {
+        // 取得 <i> 前面的節點
+        const prevNode = icon.previousSibling;
+        // 如果是文字節點，則移除
+        if (prevNode && prevNode.nodeType === 3) {
+            prevNode.remove();
+        }
+    }
+});
+});
+
+
+</script>
diff --git a/modules/universal_table/info.json b/modules/universal_table/info.json
index 34244b1..aadb071 100755
--- a/modules/universal_table/info.json
+++ b/modules/universal_table/info.json
@@ -12,26 +12,53 @@
             "filename" : "index2",
             "name" : {
                 "zh_tw" : "2. 含序號表格列表",
-                "en" : "2. Index Table with serial number"
-                },
-            "thumbnail" : "thumb.png"
-        },
-        {
-            "filename" : "index3",
-            "name" : {
-                "zh_tw" : "3. 含序號表格列表 + 多欄位搜尋",
-                "en" : "3. Index Table with serial number + Multiple Field Search"
+                "en" : "2. Index Table with serial number "
                 },
             "thumbnail" : "thumb.png",
             "default": true
-        },
+          },
+          {
+              "filename" : "index3",
+              "name" : {
+                  "zh_tw" : "3. 單純表格列表 + 多欄位搜尋",
+                  "en" : "3. col Pure index table+ Multiple Field Search"
+                  },
+              "thumbnail" : "thumb.png"
+          },
+          {
+              "filename" : "index4",
+              "name" : {
+                  "zh_tw" : "4.含序號表格列表 + 多欄位搜尋",
+                  "en" : "4. col Index Table with serial number + Multiple Field Search"
+                  },
+              "thumbnail" : "thumb.png",
+              "default": true
+            },
+            {
+                "filename" : "index5",
+                "name" : {
+                    "zh_tw" : "5. 卡片單純表格列表 + 多欄位搜尋",
+                    "en" : "5. card-col Pure index table+ Multiple Field Search"
+                    },
+                "thumbnail" : "thumb.png"
+            },
+            {
+                "filename" : "mindmap",
+                "name" : {
+                    "zh_tw" : "6. Mind Maps",
+                    "en" : "6. Mind Maps"
+                    },
+                "thumbnail" : "thumb.png"
+            }
+    ],
+    "widgets" : [
         {
-            "filename" : "mindmap",
+            "filename" : "tag_cloud",
             "name" : {
-                "zh_tw" : "6. Mind Maps",
-                "en" : "6. Mind Maps"
+                "zh_tw" : "0. Tag Cloud",
+                "en" : "0. Tag Cloud"
                 },
-            "thumbnail" : "thumb.png"
+            "thumbnail" : "_tag_cloud_thumb.png"
         }
     ]
 }
diff --git a/modules/universal_table/mindmap.html.erb b/modules/universal_table/mindmap.html.erb
index 684a20f..d43425c 100755
--- a/modules/universal_table/mindmap.html.erb
+++ b/modules/universal_table/mindmap.html.erb
@@ -1,107 +1,122 @@
-<style>
-  tr>th:first-child{
-    display: none!important;
-  }
-  /* tr>td:first-child{
-    display: none!important;
-  } */
-  .universal-table-index3{
-    table-layout: auto!important;
-  }
-  .universal-dropdown-menu {
-    padding: 15px 18px;
-    white-space: nowrap;
-  }
-  .universal-th-text{
-    white-space: pre!important;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    white-space: normal;
-}
-  .universal-dropdown-menu {
-    padding: 15px 18px;
-    white-space: nowrap;
-  }
-  .universal-th-text  {
-    padding: 8px 0 0 0;
-    display: inline;
-    margin-right: 5px;
-  }
-  .universal-dropdown {
-    display: inline-block;
-  }
-  a.universal-btn {
-    vertical-align: baseline;
-    color: #fff;
-  }
-  .universal-table-index {
-    border-collapse: collapse;
-    border: 1px solid #eee;
-    table-layout: fixed;
-    word-wrap: break-word;
-  }
-  .universal-table-index h3 {
-    float: left;
-    margin: 0;
-  }
-  .universal-table-index.table td{
-    padding: 15px 18px;
-  }
-  .universal-table-index thead th:last-child .dropdown-menu {
-    left: auto;
-    right: 0;
-  }
-  /* .universal-table-index tbody {
-     counter-reset: item;
-  } */
-  .universal-th-icon {
-    border: 1px solid #eee;
-    padding: 5px 8px;
-    margin-right: 5px;
-    color: gray;
-    cursor: pointer;
-  }
-  .universal-th-text.no-sort.no-search {
-    position: relative;
-    top: -6px;
-  }
-  .image-preview {
-    width: 120px;
-  }
-</style>
-<form class="form-inline universal-form-inline universal-form-inline5" action="{{url}}" method="get">
-<table class="table table-hover table-striped universal-table-index universal-table-index3">
-  <caption>
-    <h3>{{table-name}}</h3>
-  </caption>
-  <tbody>
-    <tr class="tdken" data-level="0" data-list="mindmaps">
-      <td><a href="{{url}}">{{title}}</a></td>
-    </tr>
-  </tbody>
-</table>
-</form>
-{{pagination_goes_here}}
-<script>
-$(document).ready(function(){
-  $('.tdken>td:nth-child(4)').prepend($('.col-ken:nth-child(4)>.universal-th-text '));
-  $('.tdken>td:nth-child(3)').prepend($('.col-ken:nth-child(3)>.universal-th-text '));
-  $(".universal-th-text").append(" :");
-  $(".tdken").append('<i class="fa-solid fa-thumbtack"></i>');
-});
-// $(document).ready(function(){
-//   $("tr>th:first-child").removeClass("col-md-3");
-//   $("tr>th:first-child").addClass("col-md-1");
-//   $("tr>th:nth-child(2)").removeClass("col-md-3");
-//   $("tr>th:nth-child(2)").addClass("col-md-6");
-//   $("tr>th:nth-child(3)").removeClass("col-md-3");
-//   $("tr>th:nth-child(3)").addClass("col-md-3");
-//   $("tr>th:nth-child(4)").removeClass("col-md-3");
-//   $("tr>th:nth-child(4)").addClass("col-md-2");
-//   $("tr>th:nth-child(5)").removeClass("col-md-3");
-//   $("tr>th:nth-child(5)").addClass("col-md-3");
-// });
-// $('.universal-table-index thead tr').prepend('<th></th>')
-// $('.universal-table-index tbody tr').prepend('<td></td>')
-</script>
+<style>
+.fa-diagram-project{
+    box-shadow: 0 0 0 2px white, 0 0 0 4px #0f5293;
+    background: #f0f0f0;
+    border: 2px solid #145494;
+    color: #145494;
+    padding: 0.5em;
+    border-radius: 3em;
+    position: absolute;
+    right: 2em;
+}
+.midmap-universal-table-index{
+  border:0!important;
+}
+
+  tr>th:first-child{
+    display: none!important;
+  }
+  /* tr>td:first-child{
+    display: none!important;
+  } */
+
+  .universal-table-index3{
+    table-layout: auto!important;
+  }
+  .universal-dropdown-menu {
+    padding: 15px 18px;
+    white-space: nowrap;
+  }
+  .universal-th-text{
+    white-space: pre!important;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+}
+  .universal-dropdown-menu {
+    padding: 15px 18px;
+    white-space: nowrap;
+  }
+  .universal-th-text  {
+    padding: 8px 0 0 0;
+    display: inline;
+    margin-right: 5px;
+  }
+  .universal-dropdown {
+    display: inline-block;
+  }
+  a.universal-btn {
+    vertical-align: baseline;
+    color: #fff;
+  }
+  .universal-table-index {
+    border-collapse: collapse;
+    border: 1px solid #eee;
+    table-layout: fixed;
+    word-wrap: break-word;
+  }
+  .universal-table-index h3 {
+    float: left;
+    margin: 0;
+  }
+  .universal-table-index.table td{
+    padding: 15px 18px;
+  }
+  .universal-table-index thead th:last-child .dropdown-menu {
+    left: auto;
+    right: 0;
+  }
+  /* .universal-table-index tbody {
+     counter-reset: item;
+  } */
+  .universal-th-icon {
+    border: 1px solid #eee;
+    padding: 5px 8px;
+    margin-right: 5px;
+    color: gray;
+    cursor: pointer;
+  }
+  .universal-th-text.no-sort.no-search {
+    position: relative;
+    top: -6px;
+  }
+  .image-preview {
+    width: 120px;
+  }
+</style>
+<form class="form-inline universal-form-inline midmap" action="{{url}}" method="get">
+<table class="table table-hover table-striped universal-table-index midmap-universal-table-index">
+  <caption>
+    <h3>{{table-name}}</h3>
+  </caption>
+  <tbody>
+    <tr class="tdken" data-level="0" data-list="mindmaps">
+      <td><a href="{{url}}">{{title}}</a></td>
+    </tr>
+  </tbody>
+</table>
+</form>
+{{pagination_goes_here}}
+<script>
+$(document).ready(function(){
+  $('.tdken>td:nth-child(4)').prepend($('.col-ken:nth-child(4)>.universal-th-text '));
+  $('.tdken>td:nth-child(3)').prepend($('.col-ken:nth-child(3)>.universal-th-text '));
+  $(".universal-th-text").append(" :");
+  $(".tdken td").append('<i class="fa-solid fa-diagram-project"></i>');
+});
+// $(document).ready(function(){
+//   $("tr>th:first-child").removeClass("col-md-3");
+//   $("tr>th:first-child").addClass("col-md-1");
+//   $("tr>th:nth-child(2)").removeClass("col-md-3");
+//   $("tr>th:nth-child(2)").addClass("col-md-6");
+//   $("tr>th:nth-child(3)").removeClass("col-md-3");
+//   $("tr>th:nth-child(3)").addClass("col-md-3");
+//   $("tr>th:nth-child(4)").removeClass("col-md-3");
+//   $("tr>th:nth-child(4)").addClass("col-md-2");
+//   $("tr>th:nth-child(5)").removeClass("col-md-3");
+//   $("tr>th:nth-child(5)").addClass("col-md-3");
+// });
+// $('.universal-table-index thead tr').prepend('<th></th>')
+// $('.universal-table-index tbody tr').prepend('<td></td>')
+</script>
diff --git a/modules/universal_table/show.html.erb b/modules/universal_table/show.html.erb
index 63b828a..9cd201c 100755
--- a/modules/universal_table/show.html.erb
+++ b/modules/universal_table/show.html.erb
@@ -1,33 +1,96 @@
 <style>
   .universal-table-show {
-    border: 1px solid #eee;
+    border: 0;
     border-collapse: collapse;
+    tr{
+      display: flex;
+      flex-wrap: wrap;
+    }
   }
   .universal-table-show.table td{
-    padding: 15px 18px;
+    padding: 0;
+    border: 0;
   }
   .table-title {
-    border-right: 1px solid #eee;
+    border-right: 0;
+    font-size: 0.8em;
   }
 
+
 </style>
 <table class="table table-striped universal-table-show">
   <tbody data-level="0" data-list="entry">
     <tr>
-      <td class="col-md-2 table-title">{{title}}</td>
-      <td>{{text}}</td>
+      <td class="col-sm-12 table-title">{{title}}</td>
+      <td class="col-sm-12 table-txt">{{text}}</td>
     </tr>
   </tbody>
 </table>
-<div class="view_count pull-right">
-  <i class="fa fa-eye">{{view_count_head}}:</i>
-  <span class="view-count">{{view_count}}</span>
-</div>
-
-<div data-list="related_entries" data-level="0">
+<div class="col-sm-12 table-title" style="background-color: #f8f8f8;
+    position: relative;
+    width: 100%;
+    color: #676767;
+    padding-top: 1.5em;">相關詞目</div>
+<div data-list="related_entries" data-level="0" class="related_entries">
   <tbody data-level="1" data-list="related_entry">
     <tr>
       <td>{{text}}</td>
     </tr>
   </tbody>
 </div>
+<div class="view_count pull-right">
+  <i class="fa fa-eye">{{view_count_head}}:</i>
+  <span class="view-count">{{view_count}}</span>
+</div>
+<script>
+$(document).ready(function () {
+  const $tableShow = $('.universal-table-show');
+  if ($tableShow.length > 0) {
+    const firstText = $tableShow.find('tr:first .table-txt:first').text().trim();
+    if (firstText) {
+      const $li = $('<li>').text(firstText);
+      $('.breadcrumb').append($li);
+    }
+  }
+});
+$(document).ready(function () {
+  $('.related_entries').each(function () {
+    const $container = $(this);
+    const children = $container.contents();
+    let wrapper = null;
+
+    children.each(function () {
+      const $el = $(this);
+
+      if ($el.is('a') && !$el.hasClass('tag')) {
+        // 開始一個新的 wrapper
+        wrapper = $('<div class="column_entry_files_wrapper"></div>');
+        $container.append(wrapper); // 先加到底部
+        wrapper.append($el); // 把主詞條加進 wrapper
+      } else if ($el.is('ul.column_entry_files')) {
+        if (wrapper) wrapper.append($el);
+      } else if (this.nodeType === Node.TEXT_NODE && this.textContent.trim() !== '') {
+        if (wrapper) wrapper.append(this);
+      } else if ($el.is('a.tag')) {
+        if (wrapper) wrapper.append($el);
+      }
+    });
+
+    // 第二輪：移除每個 .column_entry_files_wrapper 前的 &nbsp; 空白節點
+    $container.find('.column_entry_files_wrapper').each(function () {
+      let prev = this.previousSibling;
+      while (prev && prev.nodeType === Node.TEXT_NODE) {
+        if (prev.textContent.trim() === '' || prev.textContent.includes('\u00a0')) {
+          let toRemove = prev;
+          prev = prev.previousSibling;
+          toRemove.parentNode.removeChild(toRemove);
+        } else {
+          break;
+        }
+      }
+    });
+  });
+});
+
+
+</script>