diff --git a/assets/stylesheets/template/modules/member.scss b/assets/stylesheets/template/modules/member.scss
index 54e431a..6629266 100644
--- a/assets/stylesheets/template/modules/member.scss
+++ b/assets/stylesheets/template/modules/member.scss
@@ -599,21 +599,21 @@ tr.i-member-tr-head {
   }
 
   th, td {
-    font-size: 0.938em;
+
   }
 
   .member-plugins {
     margin: 0;
 
     a {
-      font-size: 0.938em;
+
     }
   }
   .row {
     padding-bottom: 1em;
   }
   .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
-    background-color:$theme-color-second;
+    background-color: $theme-color-second;
   }
   .nav-pills>li>a {
     border-radius: unset;
diff --git a/modules/member/show.html.erb b/modules/member/show.html.erb
index e0dd054..f317751 100644
--- a/modules/member/show.html.erb
+++ b/modules/member/show.html.erb
@@ -1,9 +1,9 @@
 <div class="show-member" module="member">
   <div class="row">
-    <div class="member-pic col-xs-3">
+    <div class="member-pic col-sm-3">
       <img src="{{image}}" alt="{{name}}" title="{{name}}" width="100%">
     </div>
-    <div class="member-data col-xs-9">
+    <div class="member-data col-sm-9">
       <table class="table table-striped">
         <div data-list="profile_data" data-level="0">
           <tr class="row">
@@ -15,7 +15,9 @@
     </div>
   </div>
   <ul class="member-plugins nav nav-pills" role="tablist" data-list="plugins" data-level="0">
-    <li class="{{plugin_class}}"><a href="#{{plugin_name}}" role="tab" data-bs-toggle="tab" title="{{plugin_title}}">{{plugin_title}}</a></li>
+    <li class="nav-item {{plugin_class}}">
+      <a class="nav-link" href="#{{plugin_name}}" role="tab" data-bs-toggle="tab" title="{{plugin_title}}">{{plugin_title}}</a>
+    </li>
   </ul>
   <div class="tab-content" data-list="plugins" data-level="0">
     <div class="tab-pane {{plugin_class}}" id="{{plugin_name}}">
@@ -45,15 +47,21 @@
     // Adding class on first element
     function memberPlugins() {
       var plugins = document.querySelector('.member-plugins');
-        if( plugins.children.length === 0 ) {
-            return;
-        }
-        if( plugins.querySelectorAll('.member-plugins .active').length === 0 ) {
-            var navs = plugins.querySelectorAll('.member-plugins > li'),
-                contents = plugins.nextElementSibling.children[0];
-            navs[0].className += ' ' + 'active';
-            contents.className += ' ' + 'active';
+      if (!plugins || plugins.children.length === 0) return;
+
+      // 改用 a.nav-link 判斷是否已有 active，不看 li
+      if (plugins.querySelectorAll('a.nav-link.active').length === 0) {
+        var firstLink = plugins.querySelector('li a.nav-link');
+        var firstPane = document.querySelector(firstLink.getAttribute('href'));
+
+        // active 只加在 a.nav-link，不加在 li
+        firstLink.classList.add('active');
+
+        // pane 要同時加 active 和 show
+        if (firstPane) {
+          firstPane.classList.add('active', 'show');
         }
+      }
     }
     memberPlugins();
   }())
@@ -91,10 +99,13 @@ $('.tab-pane table').each(function(){
     });
   }
 });
-
-$(document).ready(function () {
-  $('.member-data-value-5 a').each(function () {
-    $(this).replaceWith($(this).html()); // 把<a>替換成它裡面的內容
+// 同步 li.nav-item 的 active class
+document.addEventListener('show.bs.tab', function(e) {
+  // 移除所有 li 的 active
+  document.querySelectorAll('.member-plugins li.nav-item').forEach(function(li) {
+    li.classList.remove('active');
   });
+  // 把被點的 a 的父層 li 加上 active
+  e.target.closest('li.nav-item').classList.add('active');
 });
 </script>