diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index f1d8c73..b260630 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -1 +1,93 @@
 @import "tailwindcss";
+
+@layer components {
+  [data-stream-view-mode="table"] .streams-table {
+    display: table !important;
+  }
+
+  [data-stream-view-mode="table"] .streams-thead {
+    display: table-header-group !important;
+  }
+
+  [data-stream-view-mode="table"] .streams-container {
+    overflow-x: auto !important;
+  }
+
+  [data-stream-view-mode="table"] .streams-card-sort {
+    display: none !important;
+  }
+
+  [data-stream-view-mode="table"] .streams-tbody {
+    display: table-row-group !important;
+  }
+
+  [data-stream-view-mode="table"] .streams-tbody > :not([hidden]) ~ :not([hidden]) {
+    margin-top: 0 !important;
+  }
+
+  [data-stream-view-mode="table"] .streams-row {
+    display: table-row !important;
+    border: 0 !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    overflow: visible !important;
+    background-color: transparent !important;
+  }
+
+  [data-stream-view-mode="table"] .streams-row:hover {
+    background-color: rgb(249 250 251) !important;
+  }
+
+  [data-stream-view-mode="table"] .streams-cell {
+    display: table-cell !important;
+  }
+
+  [data-stream-view-mode="table"] .streams-cell::before {
+    display: none !important;
+  }
+
+  [data-stream-view-mode="card"] .streams-table {
+    display: block !important;
+  }
+
+  [data-stream-view-mode="card"] .streams-thead {
+    display: none !important;
+  }
+
+  [data-stream-view-mode="card"] .streams-container {
+    overflow: visible !important;
+  }
+
+  [data-stream-view-mode="card"] .streams-card-sort {
+    display: flex !important;
+  }
+
+  [data-stream-view-mode="card"] .streams-tbody {
+    display: block !important;
+  }
+
+  [data-stream-view-mode="card"] .streams-tbody > :not([hidden]) ~ :not([hidden]) {
+    margin-top: 1rem !important;
+  }
+
+  [data-stream-view-mode="card"] .streams-row {
+    display: block !important;
+    border: 1px solid rgb(229 231 235) !important;
+    border-radius: 0.5rem !important;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
+    overflow: hidden !important;
+    background-color: white !important;
+  }
+
+  [data-stream-view-mode="card"] .streams-row:hover {
+    background-color: rgb(249 250 251) !important;
+  }
+
+  [data-stream-view-mode="card"] .streams-cell {
+    display: block !important;
+  }
+
+  [data-stream-view-mode="card"] .streams-cell::before {
+    display: block !important;
+  }
+}
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
index 4696740..eab401e 100644
--- a/app/javascript/controllers/index.js
+++ b/app/javascript/controllers/index.js
@@ -6,6 +6,7 @@ import SearchController from './search_controller'
 import MobileMenuController from './mobile_menu_controller'
 import CollaborativeSpreadsheetController from './collaborative_spreadsheet_controller'
 import StreamTablePreferencesController from './stream_table_preferences_controller'
+import StreamViewController from './stream_view_controller'
 import ToastController from './toast_controller'
 
 // Register controllers
@@ -14,4 +15,5 @@ application.register('search', SearchController)
 application.register('mobile-menu', MobileMenuController)
 application.register('collaborative-spreadsheet', CollaborativeSpreadsheetController)
 application.register('stream-table-preferences', StreamTablePreferencesController)
+application.register('stream-view', StreamViewController)
 application.register('toast', ToastController)
diff --git a/app/javascript/controllers/stream_view_controller.js b/app/javascript/controllers/stream_view_controller.js
new file mode 100644
index 0000000..52dca85
--- /dev/null
+++ b/app/javascript/controllers/stream_view_controller.js
@@ -0,0 +1,115 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['toggle']
+  static values = {
+    storageKey: { type: String, default: 'streamsViewMode' }
+  }
+
+  connect () {
+    this.boundHandleMediaChange = this.handleMediaChange.bind(this)
+    this.mediaQuery = window.matchMedia('(min-width: 768px)')
+
+    this.applySavedOrDefault()
+    this.addMediaListener()
+  }
+
+  disconnect () {
+    this.removeMediaListener()
+  }
+
+  select (event) {
+    const mode = event.currentTarget.dataset.mode
+    if (!this.isValidMode(mode)) return
+
+    this.storeMode(mode)
+    this.applyMode(mode)
+  }
+
+  handleMediaChange () {
+    this.applySavedOrDefault()
+  }
+
+  defaultMode () {
+    return this.mediaQuery.matches ? 'table' : 'card'
+  }
+
+  applySavedOrDefault () {
+    const savedMode = this.loadSavedMode()
+    if (savedMode) {
+      this.applyMode(savedMode)
+      return
+    }
+
+    this.applyMode(this.defaultMode())
+  }
+
+  applyMode (mode) {
+    if (!this.isValidMode(mode)) return
+
+    this.element.dataset.streamViewMode = mode
+    this.updateToggleStyles(mode)
+  }
+
+  updateToggleStyles (mode) {
+    if (!this.hasToggleTarget) return
+
+    this.toggleTargets.forEach(toggle => {
+      const active = toggle.dataset.mode === mode
+      toggle.setAttribute('aria-pressed', active ? 'true' : 'false')
+      toggle.classList.toggle('bg-indigo-600', active)
+      toggle.classList.toggle('text-white', active)
+      toggle.classList.toggle('hover:bg-indigo-700', active)
+      toggle.classList.toggle('bg-white', !active)
+      toggle.classList.toggle('text-gray-600', !active)
+      toggle.classList.toggle('hover:text-gray-900', !active)
+      toggle.classList.toggle('hover:bg-gray-50', !active)
+    })
+  }
+
+  isValidMode (mode) {
+    return mode === 'table' || mode === 'card'
+  }
+
+  loadSavedMode () {
+    try {
+      const mode = window.localStorage.getItem(this.storageKey())
+      return this.isValidMode(mode) ? mode : null
+    } catch {
+      return null
+    }
+  }
+
+  storeMode (mode) {
+    try {
+      window.localStorage.setItem(this.storageKey(), mode)
+    } catch {
+      // Ignore storage errors (private mode, disabled storage, etc.)
+    }
+  }
+
+  storageKey () {
+    const suffix = this.mediaQuery && this.mediaQuery.matches ? 'desktop' : 'mobile'
+    return `${this.storageKeyValue}-${suffix}`
+  }
+
+  addMediaListener () {
+    if (!this.mediaQuery) return
+
+    if (this.mediaQuery.addEventListener) {
+      this.mediaQuery.addEventListener('change', this.boundHandleMediaChange)
+    } else if (this.mediaQuery.addListener) {
+      this.mediaQuery.addListener(this.boundHandleMediaChange)
+    }
+  }
+
+  removeMediaListener () {
+    if (!this.mediaQuery) return
+
+    if (this.mediaQuery.removeEventListener) {
+      this.mediaQuery.removeEventListener('change', this.boundHandleMediaChange)
+    } else if (this.mediaQuery.removeListener) {
+      this.mediaQuery.removeListener(this.boundHandleMediaChange)
+    }
+  }
+}
diff --git a/app/views/admin/streams/_spreadsheet.html.erb b/app/views/admin/streams/_spreadsheet.html.erb
index 9c94e3a..e242dfa 100644
--- a/app/views/admin/streams/_spreadsheet.html.erb
+++ b/app/views/admin/streams/_spreadsheet.html.erb
@@ -1,50 +1,83 @@
-<div data-controller="collaborative-spreadsheet stream-table-preferences"
+<div data-controller="collaborative-spreadsheet stream-table-preferences stream-view"
      data-collaborative-spreadsheet-current-user-id-value="<%= current_admin_user.id.to_s %>"
      data-collaborative-spreadsheet-current-user-name-value="<%= current_admin_user.display_name %>"
      data-collaborative-spreadsheet-current-user-color-value="<%= user_color(current_admin_user) %>"
      data-stream-table-preferences-hidden-columns-value="<%= @hidden_columns.to_json %>"
      data-stream-table-preferences-column-order-value="<%= @column_order.to_json %>"
      data-stream-table-preferences-preferences-url-value="<%= admin_stream_preferences_path %>"
+     data-stream-view-storage-key-value="streamsViewMode"
      class="relative">
   
   <!-- Column Preferences + Active Users -->
   <div class="flex flex-wrap items-center justify-between gap-3 pb-3">
-    <div class="flex flex-wrap items-center gap-2">
-      <details class="relative">
-        <summary class="cursor-pointer select-none px-3 py-1.5 text-sm bg-white border border-gray-200 rounded-md shadow-sm hover:bg-gray-50">
-          Columns
-        </summary>
-        <div class="absolute left-0 mt-2 w-64 max-h-64 overflow-y-auto bg-white border border-gray-200 rounded-md shadow-lg z-20 p-3">
-          <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Show columns</div>
-          <div class="space-y-1" data-stream-table-preferences-target="columnList">
-            <% stream_table_columns.each do |column| %>
-              <div class="flex items-center gap-2 text-sm text-gray-700"
-                   data-column="<%= column[:key] %>"
-                   data-stream-table-preferences-target="columnItem">
-                <span class="text-gray-400 hover:text-gray-600 cursor-move"
-                      data-stream-table-preferences-target="columnDrag"
-                      title="Drag to reorder"
-                      aria-hidden="true">
-                  <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                          d="M10 6h.01M14 6h.01M10 12h.01M14 12h.01M10 18h.01M14 18h.01" />
-                  </svg>
-                </span>
-                <label class="flex flex-1 items-center gap-2">
-                  <%= check_box_tag "stream_columns[]",
-                                    column[:key],
-                                    !@hidden_columns.include?(column[:key]),
-                                    class: "h-4 w-4 text-indigo-600 border-gray-300 rounded",
-                                    data: { action: "stream-table-preferences#toggleColumn",
-                                            stream_table_preferences_target: "columnToggle" } %>
-                  <span><%= column[:label] %></span>
-                </label>
-              </div>
-            <% end %>
+    <div class="flex flex-wrap items-center gap-3">
+      <div class="flex flex-wrap items-center gap-2">
+        <details class="relative">
+          <summary class="cursor-pointer select-none px-3 py-1.5 text-sm bg-white border border-gray-200 rounded-md shadow-sm hover:bg-gray-50">
+            Columns
+          </summary>
+          <div class="absolute left-0 mt-2 w-64 max-h-64 overflow-y-auto bg-white border border-gray-200 rounded-md shadow-lg z-20 p-3">
+            <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Show columns</div>
+            <div class="space-y-1" data-stream-table-preferences-target="columnList">
+              <% stream_table_columns.each do |column| %>
+                <div class="flex items-center gap-2 text-sm text-gray-700"
+                     data-column="<%= column[:key] %>"
+                     data-stream-table-preferences-target="columnItem">
+                  <span class="text-gray-400 hover:text-gray-600 cursor-move"
+                        data-stream-table-preferences-target="columnDrag"
+                        title="Drag to reorder"
+                        aria-hidden="true">
+                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M10 6h.01M14 6h.01M10 12h.01M14 12h.01M10 18h.01M14 18h.01" />
+                    </svg>
+                  </span>
+                  <label class="flex flex-1 items-center gap-2">
+                    <%= check_box_tag "stream_columns[]",
+                                      column[:key],
+                                      !@hidden_columns.include?(column[:key]),
+                                      class: "h-4 w-4 text-indigo-600 border-gray-300 rounded",
+                                      data: { action: "stream-table-preferences#toggleColumn",
+                                              stream_table_preferences_target: "columnToggle" } %>
+                    <span><%= column[:label] %></span>
+                  </label>
+                </div>
+              <% end %>
+            </div>
           </div>
+        </details>
+        <span class="text-xs text-gray-500">Drag columns in the menu to reorder.</span>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <span class="text-xs font-semibold uppercase tracking-wider text-gray-500">View</span>
+        <div class="inline-flex rounded-md shadow-sm bg-white border border-gray-200" role="group" aria-label="View mode">
+          <button type="button"
+                  class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 rounded-l-md"
+                  data-stream-view-target="toggle"
+                  data-action="stream-view#select"
+                  data-mode="table">
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
+            </svg>
+            <span class="hidden sm:inline">Table</span>
+            <span class="sr-only sm:hidden">Table view</span>
+          </button>
+          <button type="button"
+                  class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 rounded-r-md"
+                  data-stream-view-target="toggle"
+                  data-action="stream-view#select"
+                  data-mode="card">
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M4 6h16M4 10h16M4 14h16M4 18h16" />
+            </svg>
+            <span class="hidden sm:inline">Cards</span>
+            <span class="sr-only sm:hidden">Card view</span>
+          </button>
         </div>
-      </details>
-      <span class="text-xs text-gray-500">Drag columns in the menu to reorder.</span>
+      </div>
     </div>
 
     <!-- Active Users Presence -->
@@ -61,11 +94,40 @@
     </div>
   </div>
   
+  <% sort_filter_params = params.except(:page, :sort, :direction)
+                                   .permit(:status, :platform, :kind, :orientation, :user_id, :search, :is_pinned, :is_archived)
+                                   .to_h %>
+  <% sort_options = stream_table_columns.select { |column| column[:sortable] }
+                                       .map { |column| [column[:label], column[:key]] } %>
+
+  <!-- Card Sort Controls -->
+  <div class="streams-card-sort flex flex-wrap items-center gap-2 pb-4">
+    <div class="text-xs font-semibold uppercase tracking-wider text-gray-500">Sort</div>
+    <%= form_with url: admin_streams_path,
+                  method: :get,
+                  data: { controller: "search", search_target: "form", turbo_frame: "streams_list", turbo_action: "advance" },
+                  class: "flex flex-1 flex-wrap items-center gap-2" do |form| %>
+      <% sort_filter_params.each do |key, value| %>
+        <%= form.hidden_field key, value: value %>
+      <% end %>
+      <%= form.select :sort,
+                      options_for_select(sort_options, @sort_column),
+                      { include_blank: "Sort by" },
+                      class: "flex-1 min-w-[160px] rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm",
+                      data: { action: "change->search#submit" } %>
+      <%= form.select :direction,
+                      options_for_select([["Ascending", "asc"], ["Descending", "desc"]], @sort_direction),
+                      {},
+                      class: "min-w-[140px] rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm",
+                      data: { action: "change->search#submit" } %>
+    <% end %>
+  </div>
+
   <!-- Spreadsheet Table -->
-  <div class="overflow-x-auto bg-white rounded-lg shadow"
+  <div class="streams-container overflow-visible md:overflow-x-auto md:bg-white md:rounded-lg md:shadow"
        data-stream-table-preferences-target="scrollContainer">
-    <table class="min-w-full divide-y divide-gray-200">
-      <thead class="bg-gray-50">
+    <table class="streams-table block md:table min-w-full divide-y-0 md:divide-y md:divide-gray-200">
+      <thead class="streams-thead hidden md:table-header-group bg-gray-50">
         <tr>
           <th scope="col"
               aria-sort="<%= stream_sort_aria("streamer", @sort_column, @sort_direction) %>"
@@ -166,7 +228,7 @@
           </th>
         </tr>
       </thead>
-      <tbody class="bg-white divide-y divide-gray-200">
+      <tbody class="streams-tbody block md:table-row-group space-y-4 md:space-y-0">
         <%= render partial: "admin/streams/spreadsheet_row", collection: @streams, as: :stream %>
       </tbody>
     </table>
diff --git a/app/views/admin/streams/_spreadsheet_row.html.erb b/app/views/admin/streams/_spreadsheet_row.html.erb
index 0f62f3d..fc1c422 100644
--- a/app/views/admin/streams/_spreadsheet_row.html.erb
+++ b/app/views/admin/streams/_spreadsheet_row.html.erb
@@ -1,6 +1,8 @@
-<tr id="stream_<%= stream.id %>" class="hover:bg-gray-50">
+<tr id="stream_<%= stream.id %>"
+    class="streams-row block md:table-row bg-white md:bg-transparent border border-gray-200 md:border-0 rounded-lg md:rounded-none shadow-sm md:shadow-none overflow-hidden md:overflow-visible divide-y divide-gray-100 md:divide-y-0 hover:bg-gray-50">
   <!-- Streamer (read-only) -->
-  <td class="<%= stream_column_class("streamer", "px-3 py-4 whitespace-nowrap text-sm", @hidden_columns) %>"
+  <td class="<%= stream_column_class("streamer", "streams-cell block md:table-cell px-4 py-3 md:px-3 md:py-4 whitespace-normal md:whitespace-nowrap text-sm before:block before:text-[11px] before:font-semibold before:uppercase before:tracking-wider before:text-gray-400 before:mb-1 before:content-[attr(data-label)] md:before:hidden", @hidden_columns) %>"
+      data-label="Streamer"
       data-column="streamer"
       data-stream-table-preferences-target="column">
     <div class="flex items-start gap-3">
@@ -37,7 +39,8 @@
   </td>
 
   <!-- Title -->
-  <td class="<%= stream_column_class("title", "px-3 py-4 whitespace-nowrap relative", @hidden_columns) %>"
+  <td class="<%= stream_column_class("title", "streams-cell block md:table-cell px-4 py-3 md:px-3 md:py-4 whitespace-normal md:whitespace-nowrap relative before:block before:text-[11px] before:font-semibold before:uppercase before:tracking-wider before:text-gray-400 before:mb-1 before:content-[attr(data-label)] md:before:hidden", @hidden_columns) %>"
+      data-label="Title"
       data-column="title"
       data-stream-table-preferences-target="column">
     <div data-collaborative-spreadsheet-target="cell"
@@ -51,7 +54,8 @@
   </td>
 
   <!-- Source -->
-  <td class="<%= stream_column_class("source", "px-3 py-4 whitespace-nowrap relative", @hidden_columns) %>"
+  <td class="<%= stream_column_class("source", "streams-cell block md:table-cell px-4 py-3 md:px-3 md:py-4 whitespace-normal md:whitespace-nowrap relative before:block before:text-[11px] before:font-semibold before:uppercase before:tracking-wider before:text-gray-400 before:mb-1 before:content-[attr(data-label)] md:before:hidden", @hidden_columns) %>"
+      data-label="Source"
       data-column="source"
       data-stream-table-preferences-target="column">
     <div data-collaborative-spreadsheet-target="cell"
@@ -65,7 +69,8 @@
   </td>
 
   <!-- Link -->
-  <td class="<%= stream_column_class("link", "px-3 py-4 whitespace-nowrap relative", @hidden_columns) %>"
+  <td class="<%= stream_column_class("link", "streams-cell block md:table-cell px-4 py-3 md:px-3 md:py-4 whitespace-normal md:whitespace-nowrap relative before:block before:text-[11px] before:font-semibold before:uppercase before:tracking-wider before:text-gray-400 before:mb-1 before:content-[attr(data-label)] md:before:hidden", @hidden_columns) %>"
+      data-label="Link"
       data-column="link"
       data-stream-table-preferences-target="column">
     <div class="flex items-center gap-2">
@@ -74,7 +79,7 @@
            data-stream-id="<%= stream.id %>"
            data-field="link"
            data-original-value="<%= stream.link %>"
-           class="text-sm text-gray-900 cursor-pointer hover:bg-gray-100 px-2 py-1 rounded transition-colors max-w-xs truncate min-h-[1.5rem] flex-1 min-w-0">
+           class="text-sm text-gray-900 cursor-pointer hover:bg-gray-100 px-2 py-1 rounded transition-colors md:max-w-xs md:truncate min-h-[1.5rem] flex-1 min-w-0 break-words">
         <%= stream.link %>
       </div>
       <% if stream.link.present? %>
@@ -94,7 +99,8 @@
   </td>
 
   <!-- Platform -->
-  <td class="<%= stream_column_class("platform", "px-3 py-4 whitespace-nowrap relative", @hidden_columns) %>"
+  <td class="<%= stream_column_class("platform", "streams-cell block md:table-cell px-4 py-3 md:px-3 md:py-4 whitespace-normal md:whitespace-nowrap relative before:block before:text-[11px] before:font-semibold before:uppercase before:tracking-wider before:text-gray-400 before:mb-1 before:content-[attr(data-label)] md:before:hidden", @hidden_columns) %>"
+      data-label="Platform"
       data-column="platform"
       data-stream-table-preferences-target="column">
     <div data-collaborative-spreadsheet-target="cell"
@@ -110,7 +116,8 @@
   </td>
 
   <!-- Status -->
-  <td class="<%= stream_column_class("status", "px-3 py-4 whitespace-nowrap relative", @hidden_columns) %>"
+  <td class="<%= stream_column_class("status", "streams-cell block md:table-cell px-4 py-3 md:px-3 md:py-4 whitespace-normal md:whitespace-nowrap relative before:block before:text-[11px] before:font-semibold before:uppercase before:tracking-wider before:text-gray-400 before:mb-1 before:content-[attr(data-label)] md:before:hidden", @hidden_columns) %>"
+      data-label="Status"
       data-column="status"
       data-stream-table-preferences-target="column">
     <div data-collaborative-spreadsheet-target="cell"
@@ -131,7 +138,8 @@
   </td>
 
   <!-- City -->
-  <td class="<%= stream_column_class("city", "px-3 py-4 whitespace-nowrap relative", @hidden_columns) %>"
+  <td class="<%= stream_column_class("city", "streams-cell block md:table-cell px-4 py-3 md:px-3 md:py-4 whitespace-normal md:whitespace-nowrap relative before:block before:text-[11px] before:font-semibold before:uppercase before:tracking-wider before:text-gray-400 before:mb-1 before:content-[attr(data-label)] md:before:hidden", @hidden_columns) %>"
+      data-label="City"
       data-column="city"
       data-stream-table-preferences-target="column">
     <div data-collaborative-spreadsheet-target="cell"
@@ -145,7 +153,8 @@
   </td>
 
   <!-- State -->
-  <td class="<%= stream_column_class("state", "px-3 py-4 whitespace-nowrap relative", @hidden_columns) %>"
+  <td class="<%= stream_column_class("state", "streams-cell block md:table-cell px-4 py-3 md:px-3 md:py-4 whitespace-normal md:whitespace-nowrap relative before:block before:text-[11px] before:font-semibold before:uppercase before:tracking-wider before:text-gray-400 before:mb-1 before:content-[attr(data-label)] md:before:hidden", @hidden_columns) %>"
+      data-label="State"
       data-column="state"
       data-stream-table-preferences-target="column">
     <div data-collaborative-spreadsheet-target="cell"
@@ -159,7 +168,8 @@
   </td>
 
   <!-- Kind -->
-  <td class="<%= stream_column_class("kind", "px-3 py-4 whitespace-nowrap relative", @hidden_columns) %>"
+  <td class="<%= stream_column_class("kind", "streams-cell block md:table-cell px-4 py-3 md:px-3 md:py-4 whitespace-normal md:whitespace-nowrap relative before:block before:text-[11px] before:font-semibold before:uppercase before:tracking-wider before:text-gray-400 before:mb-1 before:content-[attr(data-label)] md:before:hidden", @hidden_columns) %>"
+      data-label="Kind"
       data-column="kind"
       data-stream-table-preferences-target="column">
     <div data-collaborative-spreadsheet-target="cell"
@@ -175,7 +185,8 @@
   </td>
 
   <!-- Orientation -->
-  <td class="<%= stream_column_class("orientation", "px-3 py-4 whitespace-nowrap relative", @hidden_columns) %>"
+  <td class="<%= stream_column_class("orientation", "streams-cell block md:table-cell px-4 py-3 md:px-3 md:py-4 whitespace-normal md:whitespace-nowrap relative before:block before:text-[11px] before:font-semibold before:uppercase before:tracking-wider before:text-gray-400 before:mb-1 before:content-[attr(data-label)] md:before:hidden", @hidden_columns) %>"
+      data-label="Orientation"
       data-column="orientation"
       data-stream-table-preferences-target="column">
     <div data-collaborative-spreadsheet-target="cell"
@@ -191,7 +202,8 @@
   </td>
 
   <!-- Started At (non-editable) -->
-  <td class="<%= stream_column_class("started_at", "px-3 py-4 whitespace-nowrap", @hidden_columns) %>"
+  <td class="<%= stream_column_class("started_at", "streams-cell block md:table-cell px-4 py-3 md:px-3 md:py-4 whitespace-normal md:whitespace-nowrap before:block before:text-[11px] before:font-semibold before:uppercase before:tracking-wider before:text-gray-400 before:mb-1 before:content-[attr(data-label)] md:before:hidden", @hidden_columns) %>"
+      data-label="Started At"
       data-column="started_at"
       data-stream-table-preferences-target="column">
     <div class="text-sm text-gray-500 px-2 py-1">
@@ -200,7 +212,8 @@
   </td>
 
   <!-- Last Checked (non-editable) -->
-  <td class="<%= stream_column_class("last_checked_at", "px-3 py-4 whitespace-nowrap", @hidden_columns) %>"
+  <td class="<%= stream_column_class("last_checked_at", "streams-cell block md:table-cell px-4 py-3 md:px-3 md:py-4 whitespace-normal md:whitespace-nowrap before:block before:text-[11px] before:font-semibold before:uppercase before:tracking-wider before:text-gray-400 before:mb-1 before:content-[attr(data-label)] md:before:hidden", @hidden_columns) %>"
+      data-label="Last Checked"
       data-column="last_checked_at"
       data-stream-table-preferences-target="column">
     <div id="stream_<%= stream.id %>_last_checked_at" class="text-sm text-gray-500 px-2 py-1">
@@ -209,7 +222,8 @@
   </td>
 
   <!-- Last Live (non-editable) -->
-  <td class="<%= stream_column_class("last_live_at", "px-3 py-4 whitespace-nowrap", @hidden_columns) %>"
+  <td class="<%= stream_column_class("last_live_at", "streams-cell block md:table-cell px-4 py-3 md:px-3 md:py-4 whitespace-normal md:whitespace-nowrap before:block before:text-[11px] before:font-semibold before:uppercase before:tracking-wider before:text-gray-400 before:mb-1 before:content-[attr(data-label)] md:before:hidden", @hidden_columns) %>"
+      data-label="Last Live"
       data-column="last_live_at"
       data-stream-table-preferences-target="column">
     <div id="stream_<%= stream.id %>_last_live_at" class="text-sm text-gray-500 px-2 py-1">
@@ -218,7 +232,8 @@
   </td>
 
   <!-- Actions -->
-  <td class="<%= stream_column_class("actions", "px-3 py-4 whitespace-nowrap text-right text-sm font-medium", @hidden_columns) %>"
+  <td class="<%= stream_column_class("actions", "streams-cell block md:table-cell px-4 py-3 md:px-3 md:py-4 whitespace-normal md:whitespace-nowrap text-left md:text-right text-sm font-medium before:block before:text-[11px] before:font-semibold before:uppercase before:tracking-wider before:text-gray-400 before:mb-1 before:content-[attr(data-label)] md:before:hidden", @hidden_columns) %>"
+      data-label="Actions"
       data-column="actions"
       data-stream-table-preferences-target="column">
     <div class="flex items-center space-x-2">