diff --git a/.build/markup-classes-baseline.txt b/.build/markup-classes-baseline.txt
index 45a70f396..092507a37 100644
--- a/.build/markup-classes-baseline.txt
+++ b/.build/markup-classes-baseline.txt
@@ -1,7 +1,6 @@
 # Classes used in the rendered html that no stylesheet defines on purpose:
 # JavaScript hooks and demo-only markers. One per line; delete a line when the hook goes.
 callout-note
-checkbox-wrapper-mail
 datagrid-content
 datagrid-item
 datatable
@@ -11,17 +10,7 @@ docs-search
 docs-theme-toggle
 dropzone-msg-desc
 dropzone-msg-title
-email-action-icons
-email-action-icons-item
-email-border
-email-content
-email-date
-email-list
-email-sender-info
-email-subject
-email-title
 fallback
-file-offcanvas
 github-dark
 icon-tabler
 icon-tabler-pencil
@@ -47,7 +36,6 @@ sort-score
 sort-status
 sort-tags
 sort-type
-star-toggle
 table-tbody
 tblr-illustrations-computer-fix-a
 tblr-illustrations-computer-fix-b
diff --git a/.changeset/fix-email-inbox-list.md b/.changeset/fix-email-inbox-list.md
new file mode 100644
index 000000000..b64cb2ce3
--- /dev/null
+++ b/.changeset/fix-email-inbox-list.md
@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Fixed the unstyled message list on the `email-inbox` page: a hoverable list group with label dots, dates and row actions.
diff --git a/preview/pages/email-inbox.astro b/preview/pages/email-inbox.astro
index f84f11d33..b834eb70b 100644
--- a/preview/pages/email-inbox.astro
+++ b/preview/pages/email-inbox.astro
@@ -10,27 +10,33 @@ import Progress from '@ui/Progress.astro'
 import Modal from '@shared/components/modals/Modal.astro'
 import CaptureModal from '@shared/components/CaptureModal.astro'
 import NewEmailModalContent from '@shared/components/modals/NewEmailModalContent.astro'
+import ListGroup from '@ui/ListGroup.astro'
+import ListGroupItem from '@ui/ListGroupItem.astro'
+import { formatShortDate } from '@shared/lib/date-format'
 import mails from '@data/mails.json'
+
+// Label colors shared by the folder sidebar and the dots in the message list.
+const labelColors: Record<string, string> = { Updates: 'info', Friends: 'warning', Family: 'success', Social: 'primary', Important: 'danger', Promotions: 'purple' }
 ---
 
 <DefaultLayout title="Email inbox" pageHeader="Inbox" pageMenu="extra.email-inbox" pageLibs={['hugerte']}>
   <Card>
     <div class="row g-0">
-      <div class="col-xxl-3 email-border border-end">
-        <Offcanvas responsive="xxl" direction="start" class="h-100 file-offcanvas" tabindex="-1" id="emailSidebaroffcanvas">
+      <div class="col-xxl-3 border-end">
+        <Offcanvas responsive="xxl" direction="start" class="h-100" tabindex="-1" id="emailSidebaroffcanvas">
           <div class="card-body h-100">
             <div>
-              <Button icon="pencil" text="Compose" color="primary" class="d-none d-sm-block" modalId="new-email" />
+              <Button icon="pencil" text="Compose" color="primary" block class="d-none d-sm-block" modalId="new-email" />
             </div>
 
-            <div class="mt-3 nav nav-vertical">
-              <a href="#" class="nav-link text-danger fw-bold">
+            <div class="mt-3 nav nav-vertical nav-pills">
+              <a href="#" class="nav-link active">
                 <Icon name="inbox" class="me-2" />
-                Inbox<span class="badge bg-danger ms-auto">{mails.length}</span>
+                Inbox<span class="badge bg-primary-lt ms-auto">{mails.length}</span>
               </a>
               <a href="#" class="nav-link"><Icon name="star" class="me-2" />Starred</a>
               <a href="#" class="nav-link"><Icon name="clock" class="me-2" />Snoozed</a>
-              <a href="#" class="nav-link"><Icon name="file" class="me-2" />Draft<span class="badge bg-info ms-auto">32</span></a>
+              <a href="#" class="nav-link"><Icon name="file" class="me-2" />Draft<span class="badge bg-info-lt ms-auto">32</span></a>
               <a href="#" class="nav-link"><Icon name="mail-up" class="me-2" />Sent Mail</a>
               <a href="#" class="nav-link"><Icon name="trash" class="me-2" />Trash</a>
               <a href="#" class="nav-link"><Icon name="tag" class="me-2" />Important</a>
@@ -39,25 +45,14 @@ import mails from '@data/mails.json'
 
             <div class="mt-4">
               <Subheader as="h6">Labels</Subheader>
-              <div class="mt-2 nav nav-vertical">
-                <a href="#" class="nav-link">
-                  <div class="badge bg-info me-2"></div> Updates
-                </a>
-                <a href="#" class="nav-link">
-                  <div class="badge bg-warning me-2"></div> Friends
-                </a>
-                <a href="#" class="nav-link">
-                  <div class="badge bg-success me-2"></div> Family
-                </a>
-                <a href="#" class="nav-link">
-                  <div class="badge bg-primary me-2"></div> Social
-                </a>
-                <a href="#" class="nav-link">
-                  <div class="badge bg-danger me-2"></div> Important
-                </a>
-                <a href="#" class="nav-link">
-                  <div class="badge bg-purple me-2"></div> Promotions
-                </a>
+              <div class="mt-2 nav nav-vertical nav-pills">
+                {
+                  Object.entries(labelColors).map(([label, color]) => (
+                    <a href="#" class="nav-link">
+                      <span class={`badge bg-${color} me-2`} /> {label}
+                    </a>
+                  ))
+                }
               </div>
             </div>
 
@@ -112,12 +107,11 @@ import mails from '@data/mails.json'
               </div>
             </ButtonGroup>
 
-            <ButtonGroup>
+            <ButtonGroup class="ms-auto">
               <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                 <Icon name="dots" /> More
               </button>
-              <div class="dropdown-menu">
-                <span class="dropdown-header">More Options :</span>
+              <div class="dropdown-menu dropdown-menu-end">
                 <a class="dropdown-item" href="#">Mark as Unread</a>
                 <a class="dropdown-item" href="#">Add to Tasks</a>
                 <a class="dropdown-item" href="#">Add Star</a>
@@ -125,70 +119,66 @@ import mails from '@data/mails.json'
               </div>
             </ButtonGroup>
           </div>
-
-          <div class="mt-3">
-            <ul class="email-list">
-              {
-                mails && mails.length > 0 ? (
-                  mails.map((mail) => (
-                    <li>
-                      <div class="email-sender-info">
-                        <div class="checkbox-wrapper-mail">
-                          <div class="form-check">
-                            <input type="checkbox" class="form-check-input" id={`mail-${mail.id}`} />
-                            <label class="form-check-label" for={`mail-${mail.id}`} />
-                          </div>
-                        </div>
-                        <span class="star-toggle">
-                          <Icon name="star" />
-                        </span>
-                        <a href="#" class="email-title">
+        </div>
+        <div class="card-body p-0">
+          <ListGroup flush hoverable>
+            {
+              mails.length > 0 ? (
+                mails.map((mail) => (
+                  <ListGroupItem>
+                    <div class="row align-items-center g-2">
+                      <div class="col-auto">
+                        <input type="checkbox" class="form-check-input m-0" aria-label={`Select "${mail.subject}"`} />
+                      </div>
+                      <div class="col-auto">
+                        <a href="#" class:list={['list-group-item-actions', mail.starred && 'show']} aria-label={mail.starred ? 'Remove star' : 'Add star'}>
+                          <Icon name="star" color={mail.starred ? 'yellow' : 'muted'} />
+                        </a>
+                      </div>
+                      <div class="col-3 col-lg-2 text-truncate">
+                        <a href="#" class="text-body">
                           {mail.sender}
                         </a>
                       </div>
-
-                      <div class="email-content">
-                        <a href="#" class="email-subject">
-                          {mail.subject} &nbsp;–&nbsp;
-                          <span>{mail.preview}</span>
+                      <div class="col text-truncate">
+                        <a href="#" class="text-body">
+                          {mail.subject}
                         </a>
-                        <div class="email-date">{mail.date}</div>
+                        <span class="text-secondary"> – {mail.preview}</span>
                       </div>
-
-                      <div class="email-action-icons">
-                        <ul class="list-inline">
-                          <li class="list-inline-item">
-                            <a href="#" aria-label="Archive">
-                              <Icon name="archive" />
-                            </a>
-                          </li>
-                          <li class="list-inline-item">
-                            <a href="#" aria-label="Delete">
-                              <Icon name="trash" />
-                            </a>
-                          </li>
-                          <li class="list-inline-item">
-                            <a href="#" aria-label="Mark as read">
-                              <Icon name="mail-opened" class="email-action-icons-item" />
-                            </a>
-                          </li>
-                          <li class="list-inline-item">
-                            <a href="#" aria-label="Snooze">
-                              <Icon name="clock" />
-                            </a>
-                          </li>
-                        </ul>
+                      <div class="col-auto d-none d-lg-block">
+                        {mail.labels.map((label) => (
+                          <span class={`badge bg-${labelColors[label] ?? 'secondary'}`} title={label} aria-label={label} />
+                        ))}
                       </div>
-                    </li>
-                  ))
-                ) : (
-                  <li class="text-muted">No emails</li>
-                )
-              }
-            </ul>
-          </div>
-
-          <div class="row">
+                      <div class="col-auto d-none d-md-block">
+                        <div class="list-group-item-actions d-flex gap-2">
+                          <a href="#" class="text-secondary" aria-label="Archive">
+                            <Icon name="archive" />
+                          </a>
+                          <a href="#" class="text-secondary" aria-label="Delete">
+                            <Icon name="trash" />
+                          </a>
+                          <a href="#" class="text-secondary" aria-label="Mark as read">
+                            <Icon name="mail-opened" />
+                          </a>
+                          <a href="#" class="text-secondary" aria-label="Snooze">
+                            <Icon name="clock" />
+                          </a>
+                        </div>
+                      </div>
+                      <div class="col-auto text-secondary text-end">{formatShortDate(new Date(mail.date))}</div>
+                    </div>
+                  </ListGroupItem>
+                ))
+              ) : (
+                <ListGroupItem class="text-secondary">No emails</ListGroupItem>
+              )
+            }
+          </ListGroup>
+        </div>
+        <div class="card-body">
+          <div class="row align-items-center">
             <div class="col-7 mt-1">
               Showing 1 - {mails.length} of {mails.length}
             </div>
diff --git a/shared/lib/date-format.test.ts b/shared/lib/date-format.test.ts
index 735cd2e52..dab64b60b 100644
--- a/shared/lib/date-format.test.ts
+++ b/shared/lib/date-format.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { formatCommitDate, formatLongDate, formatUtcTimestamp, toUnixSeconds } from './date-format'
+import { formatCommitDate, formatShortDate, formatLongDate, formatUtcTimestamp, toUnixSeconds } from './date-format'
 
 describe('formatCommitDate', () => {
   it('reformats a full timestamp to "D Mon YYYY"', () => {
@@ -36,3 +36,10 @@ describe('formatUtcTimestamp', () => {
     expect(formatUtcTimestamp(date)).toBe('2025-11-28 08:05 +0000')
   })
 })
+
+describe('formatShortDate', () => {
+  it('formats the UTC day and short month', () => {
+    expect(formatShortDate(new Date('2025-08-27T11:49:00Z'))).toBe('27 Aug')
+    expect(formatShortDate(new Date('2025-01-01T00:30:00Z'))).toBe('1 Jan')
+  })
+})
diff --git a/shared/lib/date-format.ts b/shared/lib/date-format.ts
index f1722c19a..0a8b7137c 100644
--- a/shared/lib/date-format.ts
+++ b/shared/lib/date-format.ts
@@ -1,6 +1,7 @@
 // Demo data date formatting quirks:
 // - unix seconds are shifted by local timezone offset (not the true epoch)
 // - long-date format uses UTC wall-clock components
+const SHORT_MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
 const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
 
 /** Unix seconds shifted by the local timezone offset (not the true epoch). */
@@ -13,6 +14,11 @@ export function formatLongDate(date: Date): string {
   return `${MONTHS[date.getUTCMonth()]} ${String(date.getUTCDate()).padStart(2, '0')}, ${date.getUTCFullYear()}`
 }
 
+/** Formats a date as "D Mon" using its UTC components, e.g. "27 Aug". */
+export function formatShortDate(date: Date): string {
+  return `${date.getUTCDate()} ${SHORT_MONTHS[date.getUTCMonth()]}`
+}
+
 /** Reformats a commit-style timestamp ("Thu Nov 28 08:48:33 2025 +0100") to "28 Nov 2025". */
 export function formatCommitDate(date: string): string {
   const m = date.match(/^\w+ (\w+) (\d+) [\d:]+ (\d+)/)