diff --git a/appview/pages/templates/notifications/fragments/item.html b/appview/pages/templates/notifications/fragments/item.html
index 04628218..085491e9 100644
--- a/appview/pages/templates/notifications/fragments/item.html
+++ b/appview/pages/templates/notifications/fragments/item.html
@@ -1,17 +1,21 @@
 {{define "notifications/fragments/item"}}
-  <a href="{{ template "notificationUrl" . }}" class="block no-underline hover:no-underline">
+  <a href="{{ template "notificationUrl" . }}"
+     onclick="navigator.sendBeacon('/notifications/{{ .ID }}/read')"
+     class="block no-underline hover:no-underline">
     <div
       class="
-        w-full mx-auto dark:text-white bg-white dark:bg-gray-800 px-2 md:px-6 py-4
-        grid grid-cols-[auto_1fr_auto] gap-x-3 gap-y-1 items-center
+        w-full mx-auto dark:text-white px-2 md:px-6 py-4
+        {{ if not .Read }}bg-indigo-50/50 dark:bg-indigo-950/20 hover:bg-indigo-50 dark:hover:bg-indigo-950/50{{ else }}bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700/30{{ end }}
+        transition-colors duration-150
+        grid grid-cols-[auto_1fr_auto] gap-x-4 gap-y-1 items-center
         ">
       {{/* row 1, col 1: icon */}}
       <div class="row-start-1 {{ template "notificationIconColor" . }}">{{ i (.Icon) "size-4" }}</div>
       {{/* row 1, col 2: header */}}
       <div class="row-start-1 flex items-center gap-1.5 text-sm min-w-0 overflow-hidden">
         {{- if not .Read }}
-          {{ template "repo/fragments/colorBall" (dict "color" "#1e40af" "classes" "shrink-0 dark:hidden") }}
-          {{ template "repo/fragments/colorBall" (dict "color" "#3b82f6" "classes" "shrink-0 hidden dark:block") }}
+          {{ template "repo/fragments/colorBall" (dict "color" "#4338ca" "classes" "shrink-0 dark:hidden") }}
+          {{ template "repo/fragments/colorBall" (dict "color" "#6366f1" "classes" "shrink-0 hidden dark:block") }}
         {{- end -}}
         {{- template "notificationHeader" . -}}
       </div>
@@ -25,7 +29,15 @@
   </a>
 {{end}}
 
-{{ define "notificationIconColor" }}{{ if eq .Type "issue_created" }}text-green-600 dark:text-green-500{{ else if eq .Type "issue_reopen" }}text-green-600 dark:text-green-500{{ else if eq .Type "pull_created" }}text-green-600 dark:text-green-500{{ else if eq .Type "pull_reopen" }}text-green-600 dark:text-green-500{{ else if eq .Type "pull_merged" }}text-purple-600 dark:text-purple-500{{ else if eq .Type "pull_closed" }}text-red-600 dark:text-red-500{{ else }}text-gray-500 dark:text-gray-400{{ end }}{{ end }}
+{{ define "notificationIconColor" }}
+  {{ if or (eq .Type "issue_created") (eq .Type "issue_reopen") }}text-green-600 dark:text-green-500
+  {{ else if or (eq .Type "pull_created") (eq .Type "pull_reopen") }}text-green-600 dark:text-green-500
+  {{ else if eq .Type "pull_merged" }}text-purple-600 dark:text-purple-500
+  {{ else if eq .Type "pull_closed" }}text-red-600 dark:text-red-500
+  {{ else if eq .Type "user_mentioned" }}text-blue-600 dark:text-blue-500
+  {{ else }}text-gray-500 dark:text-gray-400
+  {{ end }}
+{{ end }}
 
 {{ define "notificationNumber" }}
   {{ if .Issue }}
diff --git a/appview/pages/templates/notifications/fragments/preview.html b/appview/pages/templates/notifications/fragments/preview.html
index ae03375c..e304944b 100644
--- a/appview/pages/templates/notifications/fragments/preview.html
+++ b/appview/pages/templates/notifications/fragments/preview.html
@@ -1,4 +1,49 @@
 {{ define "notifications/fragments/preview" }}
+  <div class="flex items-center justify-between px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex-wrap gap-2">
+    {{ $read := .ReadFilter }}
+    {{ $cat := .CategoryFilter }}
+
+    <div class="flex items-center gap-2 flex-wrap">
+      <div class="btn-group">
+        <a href="#"
+           hx-get="/notifications/preview?read=inbox&category={{ $cat }}"
+           hx-target="#notif-popup"
+           hx-swap="innerHTML"
+           class="btn-group-item {{ if eq $read "inbox" }}active{{ end }}">
+          {{ i "inbox" "size-4" }} Inbox
+        </a>
+        <a href="#"
+           hx-get="/notifications/preview?read=unread&category={{ $cat }}"
+           hx-target="#notif-popup"
+           hx-swap="innerHTML"
+           class="btn-group-item {{ if eq $read "unread" }}active{{ end }}">
+          {{ i "glasses" "size-4" }} Unread
+        </a>
+      </div>
+      <button
+        hx-post="/notifications/read-all"
+        hx-swap="none"
+        hx-on::after-request="htmx.ajax('GET', '/notifications/preview?read=unread&category={{ $cat }}', {target:'#notif-popup', swap:'innerHTML'}); htmx.ajax('GET', '/notifications/count', {target:'#notification-count-desktop', swap:'innerHTML'})"
+        class="btn-flat text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 flex items-center gap-2 text-sm"
+        title="Mark all read">
+        {{ i "check-check" "size-4" }} Mark all read
+      </button>
+    </div>
+
+    <div class="btn-group">
+      {{ range $k, $label := list "all" "work" "social" }}
+        <a href="#"
+           hx-get="/notifications/preview?read={{ $read }}&category={{ $label }}"
+           hx-target="#notif-popup"
+           hx-swap="innerHTML"
+           class="btn-group-item {{ if eq $label $cat }}active{{ end }} capitalize">
+          {{ $label }}
+        </a>
+      {{ end }}
+    </div>
+
+  </div>
+
   {{ if .Notifications }}
     <div class="divide-y divide-gray-200 dark:divide-gray-700 bg-slate-100 dark:bg-gray-900">
       {{ range .Notifications }}
@@ -6,14 +51,16 @@
       {{ end }}
     </div>
   {{ else }}
-    <div class="px-4 py-8 text-sm text-center text-gray-400 dark:text-gray-500">
-      No notifications
+    <div class="px-4 py-24 text-sm text-center text-gray-400 dark:text-gray-500">
+      <div class="w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-gray-600">
+        {{ if eq $read "unread" }}{{ i "inbox" "w-12 h-12" }}{{ else }}{{ i "bell-off" "w-12 h-12" }}{{ end }}
+      </div>
+      <p class="text-sm text-gray-500 dark:text-gray-400">{{ if eq $read "unread" }}All caught up!{{ else }}No notifications{{ end }}</p>
     </div>
   {{ end }}
-  <div class="flex items-center justify-end px-4 py-2 border-t border-gray-200 dark:border-gray-700 text-sm">
-    <a href="/notifications" 
-       class="flex items-center gap-1 hover:text-gray-600 dark:hover:text-gray-300 no-underline hover:no-underline">
-      view all {{ i "arrow-right" "size-4" }}
-    </a>
-  </div>
+
+  <a href="/notifications?read={{ .ReadFilter }}&category={{ .CategoryFilter }}"
+     class="flex items-center justify-end gap-1 px-4 py-2 border-t border-gray-200 dark:border-gray-700 text-sm text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700/50 no-underline hover:no-underline transition-colors duration-150">
+    View all {{ i "arrow-right" "size-4" }}
+  </a>
 {{ end }}
diff --git a/appview/pages/templates/notifications/list.html b/appview/pages/templates/notifications/list.html
index f4bd2bf9..2b345550 100644
--- a/appview/pages/templates/notifications/list.html
+++ b/appview/pages/templates/notifications/list.html
@@ -1,65 +1,110 @@
 {{ define "title" }}Notifications &middot; Tangled{{ end }}
 
 {{ define "content" }}
-  <div class="px-6 py-4">
-    <div class="flex items-center justify-between">
-      <p class="text-xl font-bold dark:text-white">Notifications</p>
-      <a href="/settings/notifications" class="flex items-center gap-2">
-        {{ i "settings" "w-4 h-4" }}
-        Preferences
-      </a>
+  <div class="flex items-center justify-between p-4 md:px-0">
+    <p class="text-xl font-bold dark:text-white">Notifications</p>
+  </div>
+
+  {{ $readVals := list
+    (dict "Key" "inbox"  "Value" "Inbox" "Icon" "inbox")
+    (dict "Key" "unread" "Value" "Unread" "Icon" "glasses")
+  }}
+
+  {{/* Mobile controls: single row */}}
+  <div class="md:hidden px-4 pb-4 flex items-center justify-between">
+    <div class="flex items-center gap-2">
+      {{ template "fragments/tabSelector" (dict "Name" "read" "Values" $readVals "Active" .ReadFilter) }}
+      <button
+        hx-post="/notifications/read-all"
+        hx-swap="none"
+        hx-on::after-request="window.location.reload()"
+        class="btn-flat flex items-center gap-2 text-sm">
+        {{ i "check-check" "size-4" }} Mark all read
+      </button>
     </div>
+    <a href="/settings/notifications" class="btn-flat">
+      {{ i "cog" "size-4" }}
+    </a>
   </div>
 
-  {{if .Notifications}}
-    <div class="rounded border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700" id="notifications-list">
-      {{range .Notifications}}
-        {{template "notifications/fragments/item" .}}
-      {{end}}
+  {{/* Desktop controls: single row */}}
+  <div class="hidden md:flex md:px-0 pb-4 items-center justify-between gap-4">
+    <div class="flex items-center gap-2">
+      {{ template "fragments/tabSelector" (dict "Name" "read" "Values" $readVals "Active" .ReadFilter) }}
+      <button
+        hx-post="/notifications/read-all"
+        hx-swap="none"
+        hx-on::after-request="window.location.reload()"
+        class="btn-flat flex items-center gap-2 text-sm">
+        {{ i "check-check" "size-4" }} Mark all read
+      </button>
     </div>
+    <a href="/settings/notifications" class="flex items-center gap-2 text-sm">
+      {{ i "cog" "w-4 h-4" }} Preferences
+    </a>
+  </div>
 
-  {{else}}
-    <div class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto drop-shadow-sm dark:text-white">
-      <div class="text-center py-12">
-        <div class="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600">
-          {{ i "bell-off" "w-16 h-16" }}
-        </div>
-        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No notifications</h3>
-        <p class="text-gray-600 dark:text-gray-400">When you receive notifications, they'll appear here.</p>
-      </div>
+  {{/* Mobile: single filtered list */}}
+  <div class="md:hidden">
+    {{ template "notifications/fragments/notifList" (dict "Groups" .MobileGroups "ReadFilter" .ReadFilter "CategoryFilter" "") }}
+  </div>
+
+  {{/* Desktop: two columns */}}
+  <div class="hidden md:grid md:grid-cols-2 md:gap-6">
+    <div>
+      {{ template "notifications/fragments/notifList" (dict "Groups" .WorkGroups "UnreadCount" .WorkUnreadCount "ReadFilter" .ReadFilter "CategoryFilter" "work") }}
+    </div>
+    <div>
+      {{ template "notifications/fragments/notifList" (dict "Groups" .SocialGroups "UnreadCount" .SocialUnreadCount "ReadFilter" .ReadFilter "CategoryFilter" "social") }}
     </div>
-  {{end}}
+  </div>
 
-  {{ template "pagination" . }}
+  {{ if gt .Total .Page.Limit }}
+    {{ template "fragments/pagination" (dict
+        "Page" .Page
+        "TotalCount" .Total
+        "BasePath" "/notifications"
+        "QueryParams" (queryParams "read" .ReadFilter "category" .CategoryFilter)
+    ) }}
+  {{ end }}
 {{ end }}
 
-{{ define "pagination" }}
-  <div class="flex justify-end mt-4 gap-2">
-      {{ if gt .Page.Offset 0 }}
-         {{ $prev := .Page.Previous }}
-          <a
-              class="btn flex items-center gap-2 no-underline hover:no-underline dark:text-white dark:hover:bg-gray-700"
-              hx-boost="true"
-              href = "/notifications?offset={{ $prev.Offset }}&limit={{ $prev.Limit }}"
-          >
-              {{ i "chevron-left" "w-4 h-4" }}
-              Previous
-          </a>
-      {{ else }}
-          <div></div>
+{{ define "notifications/fragments/notifList" }}
+  {{ $readFilter := .ReadFilter }}
+  {{ $hasAny := or .Groups.Today .Groups.ThisWeek .Groups.Older }}
+  <div class="rounded-sm border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700">
+    {{ if or .CategoryFilter .UnreadCount }}
+    <div class="flex items-center justify-between px-2 md:px-6 py-2 bg-white dark:bg-gray-800">
+      <h2 class="capitalize text-sm font-medium dark:text-white">{{ .CategoryFilter }}</h2>
+      {{ with .UnreadCount }}
+        <span class="min-w-[20px] h-6 px-1 bg-indigo-600 dark:bg-indigo-500 text-white text-xs font-bold rounded-full flex items-center justify-center">
+          {{ . }}
+        </span>
       {{ end }}
-
-      {{ $next := .Page.Next }}
-      {{ if lt $next.Offset .Total }}
-         {{ $next := .Page.Next }}
-          <a
-              class="btn flex items-center gap-2 no-underline hover:no-underline dark:text-white dark:hover:bg-gray-700"
-              hx-boost="true"
-              href = "/notifications?offset={{ $next.Offset }}&limit={{ $next.Limit }}"
-          >
-              Next
-              {{ i "chevron-right" "w-4 h-4" }}
-          </a>
+    </div>
+    {{ end }}
+    {{ if $hasAny }}
+      {{ $groupStyle := "px-2 md:px-6 py-2 bg-gray-50 dark:bg-gray-900 text-gray-500 dark:text-gray-400 text-sm" }}
+      {{ if .Groups.Today }}
+        <div class="{{ $groupStyle }}">Today</div>
+        {{ range .Groups.Today }}{{ template "notifications/fragments/item" . }}{{ end }}
+      {{ end }}
+      {{ if .Groups.ThisWeek }}
+        <div class="{{ $groupStyle }}">This week</div>
+        {{ range .Groups.ThisWeek }}{{ template "notifications/fragments/item" . }}{{ end }}
       {{ end }}
+      {{ if .Groups.Older }}
+        <div class="{{ $groupStyle }}">Older</div>
+        {{ range .Groups.Older }}{{ template "notifications/fragments/item" . }}{{ end }}
+      {{ end }}
+    {{ else }}
+      <div class="bg-white dark:bg-gray-800 p-6 dark:text-white flex flex-col items-center">
+        <div class="w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-gray-600">
+          {{ if eq $readFilter "unread" }}{{ i "inbox" "w-12 h-12" }}{{ else }}{{ i "bell-off" "w-12 h-12" }}{{ end }}
+        </div>
+        <p class="text-sm text-gray-500 dark:text-gray-400">{{ if eq $readFilter "unread" }}All caught up!{{ else }}No notifications{{ end }}</p>
+      </div>
+    {{ end }}
   </div>
 {{ end }}
+