diff --git a/lute/static/css/styles.css b/lute/static/css/styles.css
index 5c458e0ee..e7974c20d 100644
--- a/lute/static/css/styles.css
+++ b/lute/static/css/styles.css
@@ -486,7 +486,9 @@ span.hamburger {
 }
 
 #focus-container,
-#tap_sets_status-container {
+#tap_sets_status-container,
+#tts-player-container,
+#tts-sentence-buttons-container {
     display: flex;
     justify-content: center;
     gap: 1rem;
@@ -494,12 +496,13 @@ span.hamburger {
 }
 
 #tap_sets_status-container {
-    /* Toggled later in mobile media check. */
     display:none;
 }
 
 #focus,
-#tap_sets_status {
+#tap_sets_status,
+#tts-player-toggle,
+#tts-sentence-buttons-toggle {
     appearance: none;
     display: block;
     background-color: #ffffff;
@@ -513,12 +516,18 @@ span.hamburger {
 }
 
 #focus-container label,
-#tap_sets_status-container label {
+#tap_sets_status-container label,
+#tts-player-container label,
+#tts-sentence-buttons-container label {
     font-weight: bold;
+    min-width: 110px;
+    text-align: right;
 }
 
 #focus::after,
-#tap_sets_status::after {
+#tap_sets_status::after,
+#tts-player-toggle::after,
+#tts-sentence-buttons-toggle::after {
     content: "";
     display: block;
     background-color: #616161;
@@ -530,15 +539,19 @@ span.hamburger {
 }
 
 .focus-mode-active #focus::after,
-.tap_sets_status-active #tap_sets_status::after {
+.tap_sets_status-active #tap_sets_status::after,
+.tts-player-active #tts-player-toggle::after,
+.tts-sentence-buttons-active #tts-sentence-buttons-toggle::after {
     transform: translate(100%, 0);
-    background-color: #7950f2;
+    background-color: #ffffff;
 }
 
 .focus-mode-active #focus,
-.tap_sets_status-active #tap_sets_status {
-    background-color: #b197fc;
-    border-color: #b197fc;
+.tap_sets_status-active #tap_sets_status,
+.tts-player-active #tts-player-toggle,
+.tts-sentence-buttons-active #tts-sentence-buttons-toggle {
+    background-color: #40916c;
+    border-color: #40916c;
 }
 
 #tap_sets_status-container label,
@@ -947,6 +960,60 @@ ul.sentencelist {
     border: 1px solid darkgrey;
 }
 
+/* Book listing tag pills */
+.book-tag-list {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0;
+    max-width: 100%;
+}
+
+.book-tag {
+    display: inline;
+    color: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    font-family: inherit;
+    cursor: pointer;
+    border-bottom: 1px dotted #999;
+    padding-bottom: 1px;
+    white-space: nowrap;
+}
+
+.book-tag:hover {
+    border-bottom: 1px solid #333;
+    color: #333;
+}
+
+.tag-sep {
+    display: inline;
+    margin: 0 6px;
+    color: #999;
+    font-size: 0.9em;
+    user-select: none;
+}
+
+#activeTagFilter {
+    display: inline-block;
+    margin-left: 8px;
+    font-size: inherit;
+    font-weight: inherit;
+    font-family: inherit;
+    color: inherit;
+    vertical-align: baseline;
+}
+
+#activeTagFilter #clearTagFilter {
+    margin-left: 6px;
+    color: #212529;
+    text-decoration: none;
+}
+
+#activeTagFilter #clearTagFilter:hover {
+    color: #e03131;
+}
+
 /* error handler */
 
 div.bug_report {
@@ -2121,12 +2188,7 @@ input[name='status']:disabled + label {
         width: 50px;
     }
 
-    #booktable td:nth-child(2),
-    #booktable th:nth-child(2),
-    #booktable td:nth-child(3),
-    #booktable th:nth-child(3) {
-        display: none;
-    }
+    
 
     table#term {
         width: 100% !important;
@@ -2200,10 +2262,73 @@ input[name='status']:disabled + label {
     filter: saturate(1.4);
 }
 
+#booktable,
+  .dt-container table {
+    table-layout: fixed;
+    width: 100%;
+  }
+
+#booktable thead th,
+  .dt-scroll-headInner thead th {
+    position: relative;
+  }
+
+  #booktable .resize-handle,
+  .dt-scroll-headInner .resize-handle {
+    position: absolute;
+    right: -3px;
+    top: 0;
+    width: 6px;
+    height: 100%;
+    cursor: col-resize;
+    z-index: 10;
+    user-select: none;
+    background-color: transparent;
+    border-right: 1px solid #dee2e6;
+    transition: background-color 0.15s ease;
+  }
+
+  #booktable .resize-handle:hover,
+  #booktable .resize-handle:active,
+  .dt-scroll-headInner .resize-handle:hover,
+  .dt-scroll-headInner .resize-handle:active {
+    background-color: rgba(0, 120, 255, 0.3);
+    border-right: 1px solid rgba(0, 120, 255, 0.6);
+  }
+
+#booktable col {
+    width: auto;
+}
+
 #booktable td {
     vertical-align: middle;
 }
 
+#booktable thead th {
+    border-right: 1px solid #dee2e6 !important;
+}
+
+#booktable thead th:last-child {
+    border-right: none !important;
+}
+
+#booktable thead {
+    border-bottom: 2px solid #dee2e6;
+}
+
+#booktable td:nth-child(3),
+#booktable td:nth-child(3) .book-tag-list {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+#booktable td:nth-child(3) .book-tag {
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 
 .term-listing-image {
     max-width: 250px;
diff --git a/lute/templates/book/tablelisting.html b/lute/templates/book/tablelisting.html
index 74d3e4378..f87bb7088 100644
--- a/lute/templates/book/tablelisting.html
+++ b/lute/templates/book/tablelisting.html
@@ -10,9 +10,19 @@
     <tr>
       <th style="text-align: left">Title</th>
       <th style="text-align: left">Language</th>
-      <th style="text-align: left">Tags</th>
+      <th style="text-align: left">
+        <span id="tagsHeaderLabel">Tags</span>
+        <span id="activeTagFilter" style="display:none;vertical-align:middle;">
+          <span id="activeTagName"></span><a href="#" id="clearTagFilter" style="margin-left:6px;text-decoration:none;vertical-align:middle;display:inline-flex;align-items:center;" title="Clear tag filter">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </a>
+        </span>
+      </th>
       <th style="text-align: left">Word count</th>
-      <th style="text-align: left">Statuses
+      <th style="text-align: left">Status
         <a href="/refresh_all_stats" class="refresh" title="Refresh stats for all books"></a>
       </th>
       <th style="text-align: left">Last read</th>
@@ -37,6 +47,18 @@
 <form id="actionposter" method="post" action="">
 </form>
 
+{# Status detail modal #}
+<div id="statusModalOverlay" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);z-index:9999;justify-content:center;align-items:center;">
+  <div id="statusModal" style="background:#fff;border-radius:8px;padding:20px;min-width:320px;max-width:420px;box-shadow:0 4px 20px rgba(0,0,0,0.2);">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
+      <div id="statusModalTitle" style="font-weight:bold;font-size:15px;"></div>
+      <button onclick="document.getElementById('statusModalOverlay').style.display='none'"
+              style="background:none;border:none;font-size:18px;cursor:pointer;color:#adb5bd;padding:0 4px;">&times;</button>
+    </div>
+    <div id="statusModalBody"></div>
+  </div>
+</div>
+
 <script type="text/javascript" src="{{ url_for('static', filename='vendor/dayjs/dayjs.min.js') }}" charset="utf-8"></script>
 <script type="text/javascript" src="{{ url_for('static', filename='vendor/dayjs/relativeTime.js') }}" charset="utf-8"></script>
 <script>
@@ -63,6 +85,41 @@
 
   /* The book listing. */
   var book_listing_table;
+  var currentTagFilter = "";
+
+  function setTagFilter(tag) {
+    currentTagFilter = tag || "";
+    const pill = document.getElementById('activeTagFilter');
+    const nameSpan = document.getElementById('activeTagName');
+    const headerLabel = document.getElementById('tagsHeaderLabel');
+    if (currentTagFilter) {
+      nameSpan.textContent = currentTagFilter;
+      pill.style.display = 'inline-block';
+      if (headerLabel) headerLabel.style.display = 'none';
+    } else {
+      pill.style.display = 'none';
+      if (headerLabel) headerLabel.style.display = '';
+    }
+    if (book_listing_table) {
+      book_listing_table.draw();
+    }
+  }
+
+  let render_tag_list = function(data, type, row, meta) {
+    if (!data) return '';
+    const tags = data.split(', ');
+    const filtered = currentTagFilter ? currentTagFilter.toLowerCase() : '';
+    const visibleTags = tags.filter(function(t) {
+      return !filtered || t.toLowerCase() !== filtered;
+    });
+    if (visibleTags.length === 0) return '';
+    return '<span class="book-tag-list">' + visibleTags.map(function(t, i) {
+      const sep = i > 0 ? '<span class="tag-sep" aria-hidden="true">·</span>' : '';
+      return sep + '<span class="book-tag" data-tag="' + t + '" ' +
+        'title="Click to filter by this tag">' +
+        t + '</span>';
+    }).join('') + '</span>';
+  };
 
   let setup_book_datatable = function(initial_search) {
     book_listing_table = $('#booktable').DataTable({
@@ -99,7 +156,9 @@
             "emptyTable": "No books available. <a href='/book/new'>Create one?</a>"
       },
       {% endif %}
-      responsive: true,
+      responsive: false,
+      scrollX: true,
+      autoWidth: false,
       select: false,
       lengthMenu: [ 10, 25, 50, 100 ],
       pageLength: 25,
@@ -112,15 +171,18 @@
       stateDuration: 0,  /* never expire saved state. */
       search: { search: initial_search },
       columns: [
-        { name: "BkTitle", width: "40%", render: render_book_title },
+        { name: "BkTitle", width: "32%", data: "BkTitle", render: render_book_title },
         { name: "LgName", width: "10%", data: "LgName" },
-        { name: "TagList", width: "10%", data: "TagList" },
-        { name: "WordCount", width: "10%", data: "WordCount" },
-        { name: "UnknownPercent", "searchable": false, render: render_book_stats_graph_placeholder },
-        { name: "LastOpenedDate", "searchable": false, render: render_last_opened_date },
-        { width: "8%", "searchable": false, "orderable": false, render: render_book_actions },
+        { name: "TagList", width: "18%", data: "TagList", render: render_tag_list },
+        { name: "WordCount", width: "8%", data: "WordCount" },
+        { name: "UnknownPercent", width: "14%", data: "UnknownPercent", searchable: false, render: render_book_stats_graph_placeholder },
+        { name: "LastOpenedDate", width: "10%", data: "LastOpenedDate", searchable: false, render: render_last_opened_date },
+        { width: "8%", data: "BkID", searchable: false, orderable: false, render: render_book_actions },
       ],
       createdRow: function(row, data, dataIndex) { ajax_in_book_stats(row, data, dataIndex); },
+      initComplete: function() {
+        enable_column_resize();
+      },
       ajax: {
         url: "/book/datatables/{{ status or 'active' }}",
         // Additional filters.  func calls are required to get the
@@ -128,6 +190,7 @@
         // data sent to the controller.
         data: {
           filtLanguage: () => $("#defaultLanguageSelect").val(),
+          filtTag: () => currentTagFilter,
         },
 
         type: "POST",
@@ -154,6 +217,64 @@
   };
 
 
+  let enable_column_resize = function() {
+    var $wrapper = $('#booktable').closest('.dt-container');
+    if (!$wrapper.length) return;
+
+    function apply_resizable() {
+        $wrapper.find('table').each(function() {
+            var $table = $(this);
+            var $ths = $table.find('thead th');
+            $ths.each(function() {
+                var $th = $(this);
+                if ($th.find('.resize-handle').length > 0) return;
+                var $handle = $('<div class="resize-handle"></div>');
+                $th.append($handle);
+            });
+        });
+
+        $wrapper.find('.resize-handle').each(function() {
+            var $handle = $(this);
+            if ($handle.data('resize-bound')) return;
+            $handle.data('resize-bound', true);
+
+            $handle.on('mousedown', function(e) {
+                e.preventDefault();
+                var $th = $handle.closest('th');
+                var startX = e.pageX;
+                var startWidth = $th.outerWidth();
+                var colIndex = $th.index();
+
+                $(document).on('mousemove.colresize', function(ev) {
+                    var newWidth = Math.max(40, startWidth + (ev.pageX - startX));
+
+                    $wrapper.find('table').each(function() {
+                        var $t = $(this);
+                        var $cg = $t.find('colgroup col');
+                        if ($cg.length > colIndex) {
+                            $cg.eq(colIndex).css('width', newWidth + 'px');
+                        }
+                        var $ths2 = $t.find('thead th');
+                        if ($ths2.length > colIndex) {
+                            $ths2.eq(colIndex).css('width', newWidth + 'px');
+                        }
+                    });
+                });
+
+                $(document).on('mouseup.colresize', function() {
+                    $(document).off('mousemove.colresize mouseup.colresize');
+                });
+            });
+        });
+    }
+
+    apply_resizable();
+
+    $('#booktable').on('draw.dt', function() {
+        apply_resizable();
+    });
+  }
+
   let move_datatables_controls_to_config_widget = function() {
     const widget = $('#datatables_config_items');
     const append_children = [ '.dt-buttons', '.dt-length' ];
@@ -176,6 +297,83 @@
     $("#datatables_config_toggle").click(function() {
       $("#datatables_config_items").toggle();
     });
+
+    // Click tag pill to filter by that tag
+    $(document).on('click', '.book-tag', function(e) {
+      e.stopPropagation();
+      const tag = $(this).data('tag');
+      setTagFilter(tag);
+    });
+
+    // Click clear link in header to clear tag filter
+    $(document).on('click', '#clearTagFilter', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      setTagFilter('');
+    });
+
+    // Status bar click -> show detail modal
+    $(document).on('click', '.status-bar-container', function(e) {
+      e.stopPropagation();
+      const $container = $(this);
+      const $cell = $container.closest('td');
+      const row = book_listing_table.row($cell.closest('tr'));
+      const data = row.data();
+      const title = data['BkTitle'];
+      const totalCount = data['WordCount'] || 0;
+
+      // Parse status distribution from the dataset if available
+      const statusCounts = $container.data('status-counts');
+      if (!statusCounts) return;
+
+      let html = '<div style="padding:10px 0;">';
+      html += '<h4 style="margin:0 0 12px 0;font-size:15px;">' + title + '</h4>';
+      html += '<table style="width:100%;font-size:13px;border-collapse:collapse;">';
+      html += '<tr><th style="text-align:left;padding:4px 8px;border-bottom:1px solid #e9ecef;">Status</th>';
+      html += '<th style="text-align:right;padding:4px 8px;border-bottom:1px solid #e9ecef;">Words</th>';
+      html += '<th style="text-align:right;padding:4px 8px;border-bottom:1px solid #e9ecef;">%</th></tr>';
+
+      const statusLabels = {
+        '0': 'Unknown', '1': 'Level 1', '2': 'Level 2',
+        '3': 'Level 3', '4': 'Level 4', '5': 'Level 5',
+        '98': 'Ignored', '99': 'Well-known'
+      };
+      const statusColors = {
+        '0': '#ced4da', '1': '#ff6b6b', '2': '#ffa94d',
+        '3': '#ffd43b', '4': '#69db7c', '5': '#339af0',
+        '98': '#adb5bd', '99': '#845ef7'
+      };
+      let total = 0;
+      for (const k in statusCounts) { total += statusCounts[k]; }
+      if (total === 0) total = 1;
+
+      for (const key of ['0','1','2','3','4','5','98','99']) {
+        const count = statusCounts[key] || 0;
+        const pct = ((count / total) * 100).toFixed(1);
+        html += '<tr>';
+        html += '<td style="padding:4px 8px;">';
+        html += '<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:' + (statusColors[key] || '#ccc') + ';margin-right:6px;"></span>';
+        html += (statusLabels[key] || key) + '</td>';
+        html += '<td style="text-align:right;padding:4px 8px;">' + count + '</td>';
+        html += '<td style="text-align:right;padding:4px 8px;">' + pct + '%</td>';
+        html += '</tr>';
+      }
+      html += '<tr style="font-weight:bold;border-top:2px solid #e9ecef;">';
+      html += '<td style="padding:6px 8px;">Total</td>';
+      html += '<td style="text-align:right;padding:6px 8px;">' + total + '</td>';
+      html += '<td style="text-align:right;padding:6px 8px;">100%</td>';
+      html += '</tr>';
+      html += '</table></div>';
+
+      showStatusModal(html);
+    });
+
+    // Close modal on overlay click
+    $('#statusModalOverlay').on('click', function(e) {
+      if (e.target.id === 'statusModalOverlay') {
+        $(this).hide();
+      }
+    });
   });
 
 
@@ -268,22 +466,22 @@
 
   /* Generate stats graph <div> from statuscounts JSON. */
   let render_stats_graph = function(statuscounts) {
-    statuscounts["99"] = statuscounts["98"] + statuscounts["99"];
-    delete statuscounts['98'];
-    const totalcount = Object.values(statuscounts).reduce((acc, val) => acc + val, 0);
+    const countsCopy = Object.assign({}, statuscounts);
+    countsCopy["99"] = (countsCopy["98"] || 0) + (countsCopy["99"] || 0);
+    delete countsCopy['98'];
+    const totalcount = Object.values(countsCopy).reduce((acc, val) => acc + val, 0);
     if (totalcount == 0) {
       return empty_stats;
     }
     const statuspct = {};
-    Object.entries(statuscounts).forEach(([key, value]) => {
+    Object.entries(countsCopy).forEach(([key, value]) => {
       let pct = (value * 100.0) / totalcount;
       statuspct[key] = pct.toFixed(0);
     });
-    // return JSON.stringify(statuspct);
 
     let make_bar = function(stid, title) {
       const p = statuspct[stid];
-      const msg = `${p}% (${statuscounts[stid]} words)`;
+      const msg = `${p}% (${countsCopy[stid]} words)`;
       const smallestP = window.matchMedia("(max-width: 980px)").matches ? 2 : 1;
       let display = "inline-flex"
       if (p < smallestP)
@@ -300,7 +498,8 @@
       "1": 1, "2": 2, "3": 3, "4": 4, "5": 5,
       "99": "Well Known or Ignored"
     };
-    ret = `<div class="status-bar-container">`;
+    const countsJson = JSON.stringify(statuscounts).replace(/"/g, '&quot;');
+    ret = `<div class="status-bar-container" data-status-counts="${countsJson}" style="cursor:pointer;">`;
     Object.entries(bar_titles).forEach(([key, title]) => {
       ret += make_bar(key, title);
     });
@@ -362,4 +561,10 @@
   function clear_datatable_state() {
     book_listing_table.state.clear();
   }
+
+  function showStatusModal(content) {
+    document.getElementById('statusModalBody').innerHTML = content;
+    const overlay = document.getElementById('statusModalOverlay');
+    overlay.style.display = 'flex';
+  }
 </script>