diff --git a/src/components/supply/ReminderFeed.tsx b/src/components/supply/ReminderFeed.tsx
index 3e3d574..9170b3d 100644
--- a/src/components/supply/ReminderFeed.tsx
+++ b/src/components/supply/ReminderFeed.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useCallback } from 'react'
-import { Box, Typography } from '@mui/material'
+import { Box, Chip, Typography } from '@mui/material'
 import { useReminders } from '../../hooks/useReminders'
 import { useShallow } from 'zustand/react/shallow'
 import { useReminderStore } from '../../stores/reminderStore'
@@ -8,24 +8,47 @@ import { ReminderCard } from './ReminderCard'
 import { ReminderSkeleton } from './ReminderSkeleton'
 import { ReminderEmptyState } from './ReminderEmptyState'
 import type { Reminder } from '../../domain/reminder'
+import { ReminderStatus } from '../../domain/reminder'
+import type { FilterHorizon } from '../../stores/reminderStore'
 
-const LIST_HEADER_COLS = '100px 130px 1fr 140px 90px 100px 90px'
+const MOCK_TODAY = new Date('2026-05-20')
+
+function getHorizon(dueDate: string): FilterHorizon {
+  const days = Math.ceil((new Date(dueDate).getTime() - MOCK_TODAY.getTime()) / (1000 * 60 * 60 * 24))
+  if (days <= 0) return 'OVERDUE'
+  if (days <= 7) return 'THIS_WEEK'
+  if (days <= 30) return 'THIS_MONTH'
+  return 'LATER'
+}
+
+const HORIZON_CONFIG: { key: FilterHorizon; label: string; color: string; bg: string; border: string }[] = [
+  { key: 'OVERDUE',    label: 'Überfällig',    color: '#dc2626', bg: '#fef2f2', border: '#fecaca' },
+  { key: 'THIS_WEEK',  label: 'Diese Woche',   color: '#ea580c', bg: '#fff7ed', border: '#fed7aa' },
+  { key: 'THIS_MONTH', label: 'Dieser Monat',  color: '#0369a1', bg: '#f0f9ff', border: '#bae6fd' },
+  { key: 'LATER',      label: 'Später',        color: '#64748b', bg: '#f8fafc', border: '#e2e8f0' },
+]
+
+const LIST_COLS = '100px 130px 1fr 140px 90px 100px 90px'
 
 function applyFilters(
   reminders: Reminder[],
   filterType: string,
   filterStatus: string,
-  filterPriority: string,
+  filterHorizon: string,
   searchQuery: string,
 ): Reminder[] {
   return reminders.filter(r => {
+    if (filterStatus === 'ACTIVE') {
+      if (r.status !== ReminderStatus.ACTIVE && r.status !== ReminderStatus.SNOOZED) return false
+    } else if (filterStatus !== 'ALL') {
+      if (r.status !== filterStatus) return false
+    }
     if (filterType !== 'ALL' && r.type !== filterType) return false
-    if (filterStatus !== 'ALL' && r.status !== filterStatus) return false
-    if (filterPriority !== 'ALL' && r.priority !== filterPriority) return false
+    if (filterHorizon !== 'ALL' && getHorizon(r.dueDate) !== filterHorizon) return false
     if (searchQuery) {
       const q = searchQuery.toLowerCase()
-      const haystack = `${r.propertyTitle} ${r.propertyCity} ${r.tenantName}`.toLowerCase()
-      if (!haystack.includes(q)) return false
+      const hay = `${r.propertyTitle} ${r.propertyCity} ${r.tenantName}`.toLowerCase()
+      if (!hay.includes(q)) return false
     }
     return true
   })
@@ -34,59 +57,83 @@ function applyFilters(
 export function ReminderFeed() {
   const { data, isLoading } = useReminders()
   const {
-    filterType, filterStatus, filterPriority, searchQuery, viewMode,
-    setFilterType, setFilterStatus, setFilterPriority, setSearchQuery,
+    filterType, filterStatus, filterHorizon, searchQuery, viewMode,
+    setFilterType, setFilterStatus, setFilterHorizon, setSearchQuery,
   } = useReminderStore(useShallow(s => ({
     filterType: s.filterType, filterStatus: s.filterStatus,
-    filterPriority: s.filterPriority, searchQuery: s.searchQuery,
+    filterHorizon: s.filterHorizon, searchQuery: s.searchQuery,
     viewMode: s.viewMode, setFilterType: s.setFilterType,
-    setFilterStatus: s.setFilterStatus, setFilterPriority: s.setFilterPriority,
+    setFilterStatus: s.setFilterStatus, setFilterHorizon: s.setFilterHorizon,
     setSearchQuery: s.setSearchQuery,
   })))
 
   const reminders = data ?? []
 
   const filtered = useMemo(
-    () => applyFilters(reminders, filterType, filterStatus, filterPriority, searchQuery),
-    [reminders, filterType, filterStatus, filterPriority, searchQuery],
+    () => applyFilters(reminders, filterType, filterStatus, filterHorizon, searchQuery),
+    [reminders, filterType, filterStatus, filterHorizon, searchQuery],
   )
 
+  const grouped = useMemo(() => {
+    const map: Record<string, Reminder[]> = {
+      OVERDUE: [], THIS_WEEK: [], THIS_MONTH: [], LATER: [],
+    }
+    filtered.forEach(r => map[getHorizon(r.dueDate)].push(r))
+    return map
+  }, [filtered])
+
   const resetFilters = useCallback(() => {
     setFilterType('ALL')
-    setFilterStatus('ALL')
-    setFilterPriority('ALL')
+    setFilterStatus('ACTIVE')
+    setFilterHorizon('ALL')
     setSearchQuery('')
-  }, [setFilterType, setFilterStatus, setFilterPriority, setSearchQuery])
+  }, [setFilterType, setFilterStatus, setFilterHorizon, setSearchQuery])
 
   if (isLoading) return <ReminderSkeleton />
-
-  if (filtered.length === 0) {
-    return <ReminderEmptyState onReset={resetFilters} />
-  }
+  if (filtered.length === 0) return <ReminderEmptyState onReset={resetFilters} />
 
   if (viewMode === 'card') {
     return (
-      <Box
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
-          gap: 2,
-        }}
-      >
-        {filtered.map(r => (
-          <ReminderCard key={r.id} reminder={r} />
-        ))}
+      <Box className="flex flex-col gap-4">
+        {HORIZON_CONFIG.map(({ key, label, color, bg, border }) => {
+          const group = grouped[key]
+          if (!group || group.length === 0) return null
+          return (
+            <Box key={key}>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5, px: 0.5 }}>
+                <Box sx={{ width: 3, height: 16, borderRadius: 1, bgcolor: color, flexShrink: 0 }} />
+                <Typography variant="body2" sx={{ fontWeight: 700, color, fontSize: '0.8125rem' }}>
+                  {label}
+                </Typography>
+                <Chip
+                  label={group.length}
+                  size="small"
+                  sx={{ height: 18, fontSize: '0.65rem', bgcolor: color, color: 'white', ml: 0.25 }}
+                />
+              </Box>
+              <Box
+                sx={{
+                  display: 'grid',
+                  gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
+                  gap: 2,
+                }}
+              >
+                {group.map(r => <ReminderCard key={r.id} reminder={r} />)}
+              </Box>
+            </Box>
+          )
+        })}
       </Box>
     )
   }
 
   return (
-    <Box sx={{ border: '1px solid #e2e8f0', borderRadius: 1, overflow: 'hidden' }}>
+    <Box sx={{ border: '1px solid #e2e8f0', borderRadius: 1.5, overflow: 'hidden' }}>
       {/* Table header */}
       <Box
         sx={{
           display: 'grid',
-          gridTemplateColumns: LIST_HEADER_COLS,
+          gridTemplateColumns: LIST_COLS,
           gap: 1,
           px: 2,
           py: 1,
@@ -101,9 +148,43 @@ export function ReminderFeed() {
         ))}
       </Box>
 
-      {filtered.map(r => (
-        <ReminderListRow key={r.id} reminder={r} />
-      ))}
+      {/* Grouped rows */}
+      {HORIZON_CONFIG.map(({ key, label, color, bg, border }) => {
+        const group = grouped[key]
+        if (!group || group.length === 0) return null
+        return (
+          <Box key={key}>
+            {/* Section divider */}
+            <Box
+              sx={{
+                px: 2,
+                py: 0.625,
+                bgcolor: bg,
+                borderTop: `1px solid ${border}`,
+                borderBottom: `1px solid ${border}`,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1,
+              }}
+            >
+              <Typography
+                variant="caption"
+                sx={{ fontWeight: 700, color, textTransform: 'uppercase', letterSpacing: 0.6, fontSize: '0.65rem' }}
+              >
+                {label}
+              </Typography>
+              <Chip
+                label={group.length}
+                size="small"
+                sx={{ height: 16, fontSize: '0.6rem', bgcolor: color, color: 'white', px: 0 }}
+              />
+            </Box>
+
+            {/* Rows */}
+            {group.map(r => <ReminderListRow key={r.id} reminder={r} />)}
+          </Box>
+        )
+      })}
     </Box>
   )
 }
diff --git a/src/components/supply/ReminderFilterBar.tsx b/src/components/supply/ReminderFilterBar.tsx
index b9fe3ec..ffda803 100644
--- a/src/components/supply/ReminderFilterBar.tsx
+++ b/src/components/supply/ReminderFilterBar.tsx
@@ -1,9 +1,9 @@
-import { Box, ToggleButtonGroup, ToggleButton, TextField, InputAdornment, Typography } from '@mui/material'
+import { Box, ToggleButtonGroup, ToggleButton, TextField, InputAdornment, Typography, Select, MenuItem, FormControl, FormControlLabel, Switch } from '@mui/material'
 import { Search } from 'lucide-react'
 import { useShallow } from 'zustand/react/shallow'
 import { useReminderStore } from '../../stores/reminderStore'
-import { ReminderType, ReminderStatus, ReminderPriority } from '../../domain/reminder'
-import type { ReminderType as ReminderTypeType, ReminderStatus as ReminderStatusType, ReminderPriority as ReminderPriorityType } from '../../domain/reminder'
+import { ReminderType } from '../../domain/reminder'
+import type { ReminderType as ReminderTypeType } from '../../domain/reminder'
 
 const TYPE_LABELS: Record<ReminderTypeType, string> = {
   LEASE_EXPIRY: 'Mietablauf',
@@ -16,127 +16,89 @@ const TYPE_LABELS: Record<ReminderTypeType, string> = {
   CUSTOM: 'Individuell',
 }
 
-const STATUS_LABELS: Record<ReminderStatusType, string> = {
-  ACTIVE: 'Aktiv',
-  SNOOZED: 'Schlummern',
-  COMPLETED: 'Erledigt',
-  DISMISSED: 'Verworfen',
-}
-
-const PRIORITY_LABELS: Record<ReminderPriorityType, string> = {
-  URGENT: 'Dringend',
-  HIGH: 'Hoch',
-  MEDIUM: 'Mittel',
-  LOW: 'Niedrig',
-}
-
 export function ReminderFilterBar() {
   const {
     filterType, setFilterType,
     filterStatus, setFilterStatus,
-    filterPriority, setFilterPriority,
     searchQuery, setSearchQuery,
     viewMode, setViewMode,
   } = useReminderStore(useShallow(s => ({
     filterType: s.filterType, setFilterType: s.setFilterType,
     filterStatus: s.filterStatus, setFilterStatus: s.setFilterStatus,
-    filterPriority: s.filterPriority, setFilterPriority: s.setFilterPriority,
     searchQuery: s.searchQuery, setSearchQuery: s.setSearchQuery,
     viewMode: s.viewMode, setViewMode: s.setViewMode,
   })))
 
+  const showArchive = filterStatus === 'ALL'
+
   return (
-    <Box className="flex flex-col gap-3">
-      <Box className="flex items-center gap-3 flex-wrap">
-        {/* Search */}
-        <TextField
-          size="small"
-          placeholder="Suchen…"
-          value={searchQuery}
-          onChange={e => setSearchQuery(e.target.value)}
-          slotProps={{
-            input: {
-              startAdornment: (
-                <InputAdornment position="start">
-                  <Search size={16} color="#94a3b8" />
-                </InputAdornment>
-              ),
-            },
-          }}
-          sx={{ width: 220, '& .MuiInputBase-root': { fontSize: '0.8125rem' } }}
-        />
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
+      {/* Search */}
+      <TextField
+        size="small"
+        placeholder="Suchen…"
+        value={searchQuery}
+        onChange={e => setSearchQuery(e.target.value)}
+        slotProps={{
+          input: {
+            startAdornment: (
+              <InputAdornment position="start">
+                <Search size={16} color="#94a3b8" />
+              </InputAdornment>
+            ),
+          },
+        }}
+        sx={{ width: 200, '& .MuiInputBase-root': { fontSize: '0.8125rem' } }}
+      />
 
-        {/* View mode */}
-        <Box sx={{ ml: 'auto', display: 'flex', alignItems: 'center', gap: 1 }}>
-          <Typography variant="caption" color="text.secondary">Ansicht:</Typography>
-          <ToggleButtonGroup
-            value={viewMode}
-            exclusive
-            onChange={(_, v) => v && setViewMode(v)}
-            size="small"
-          >
-            <ToggleButton value="list" sx={{ textTransform: 'none', fontSize: '0.75rem', px: 1.5, py: 0.5 }}>Liste</ToggleButton>
-            <ToggleButton value="card" sx={{ textTransform: 'none', fontSize: '0.75rem', px: 1.5, py: 0.5 }}>Karten</ToggleButton>
-          </ToggleButtonGroup>
-        </Box>
-      </Box>
-
-      <Box className="flex flex-wrap gap-3">
-        {/* Type filter */}
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
-          <Typography variant="caption" color="text.secondary" sx={{ flexShrink: 0 }}>Typ:</Typography>
-          <ToggleButtonGroup
+      {/* Type selector */}
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+        <Typography variant="caption" color="text.secondary" sx={{ whiteSpace: 'nowrap' }}>Typ:</Typography>
+        <FormControl size="small">
+          <Select
             value={filterType}
-            exclusive
-            onChange={(_, v) => v && setFilterType(v)}
-            size="small"
+            onChange={e => setFilterType(e.target.value as ReminderTypeType | 'ALL')}
+            sx={{ fontSize: '0.8125rem', minWidth: 150 }}
           >
-            <ToggleButton value="ALL" sx={{ textTransform: 'none', fontSize: '0.7rem', px: 1, py: 0.375 }}>Alle</ToggleButton>
+            <MenuItem value="ALL" sx={{ fontSize: '0.8125rem' }}>Alle Typen</MenuItem>
             {Object.values(ReminderType).map(t => (
-              <ToggleButton key={t} value={t} sx={{ textTransform: 'none', fontSize: '0.7rem', px: 1, py: 0.375 }}>
+              <MenuItem key={t} value={t} sx={{ fontSize: '0.8125rem' }}>
                 {TYPE_LABELS[t]}
-              </ToggleButton>
+              </MenuItem>
             ))}
-          </ToggleButtonGroup>
-        </Box>
+          </Select>
+        </FormControl>
       </Box>
 
-      <Box className="flex flex-wrap gap-3">
-        {/* Status filter */}
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-          <Typography variant="caption" color="text.secondary" sx={{ flexShrink: 0 }}>Status:</Typography>
-          <ToggleButtonGroup
-            value={filterStatus}
-            exclusive
-            onChange={(_, v) => v && setFilterStatus(v)}
+      {/* Archive toggle */}
+      <FormControlLabel
+        control={
+          <Switch
             size="small"
-          >
-            <ToggleButton value="ALL" sx={{ textTransform: 'none', fontSize: '0.7rem', px: 1, py: 0.375 }}>Alle</ToggleButton>
-            {Object.values(ReminderStatus).map(s => (
-              <ToggleButton key={s} value={s} sx={{ textTransform: 'none', fontSize: '0.7rem', px: 1, py: 0.375 }}>
-                {STATUS_LABELS[s]}
-              </ToggleButton>
-            ))}
-          </ToggleButtonGroup>
-        </Box>
+            checked={showArchive}
+            onChange={e => setFilterStatus(e.target.checked ? 'ALL' : 'ACTIVE')}
+          />
+        }
+        label={
+          <Typography variant="caption" color="text.secondary">
+            Abgeschlossene anzeigen
+          </Typography>
+        }
+        sx={{ m: 0 }}
+      />
 
-        {/* Priority filter */}
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-          <Typography variant="caption" color="text.secondary" sx={{ flexShrink: 0 }}>Priorität:</Typography>
-          <ToggleButtonGroup
-            value={filterPriority}
-            exclusive
-            onChange={(_, v) => v && setFilterPriority(v)}
-            size="small"
-          >
-            <ToggleButton value="ALL" sx={{ textTransform: 'none', fontSize: '0.7rem', px: 1, py: 0.375 }}>Alle</ToggleButton>
-            {Object.values(ReminderPriority).map(p => (
-              <ToggleButton key={p} value={p} sx={{ textTransform: 'none', fontSize: '0.7rem', px: 1, py: 0.375 }}>
-                {PRIORITY_LABELS[p]}
-              </ToggleButton>
-            ))}
-          </ToggleButtonGroup>
-        </Box>
+      {/* View mode */}
+      <Box sx={{ ml: 'auto', display: 'flex', alignItems: 'center', gap: 1 }}>
+        <Typography variant="caption" color="text.secondary">Ansicht:</Typography>
+        <ToggleButtonGroup
+          value={viewMode}
+          exclusive
+          onChange={(_, v) => v && setViewMode(v)}
+          size="small"
+        >
+          <ToggleButton value="list" sx={{ textTransform: 'none', fontSize: '0.75rem', px: 1.5, py: 0.5 }}>Liste</ToggleButton>
+          <ToggleButton value="card" sx={{ textTransform: 'none', fontSize: '0.75rem', px: 1.5, py: 0.5 }}>Karten</ToggleButton>
+        </ToggleButtonGroup>
       </Box>
     </Box>
   )
diff --git a/src/components/supply/ReminderKpiBar.tsx b/src/components/supply/ReminderKpiBar.tsx
index 2602ea2..0aedb46 100644
--- a/src/components/supply/ReminderKpiBar.tsx
+++ b/src/components/supply/ReminderKpiBar.tsx
@@ -1,32 +1,46 @@
-import { Box, Paper, Typography, Skeleton } from '@mui/material'
-import { AlertTriangle, Calendar, CalendarDays, Eye } from 'lucide-react'
+import { Box, Typography, Skeleton } from '@mui/material'
+import { AlertOctagon, Calendar, CalendarDays, Eye } from 'lucide-react'
+import { useShallow } from 'zustand/react/shallow'
 import { useReminderInsights } from '../../hooks/useReminders'
+import { useReminderStore } from '../../stores/reminderStore'
+import type { FilterHorizon } from '../../stores/reminderStore'
+import { ReminderType } from '../../domain/reminder'
 
-interface KpiItemProps {
+interface KpiCardProps {
   icon: React.ReactNode
   label: string
   value: number | string
   color: string
+  active: boolean
+  onClick: () => void
 }
 
-function KpiItem({ icon, label, value, color }: KpiItemProps) {
+function KpiCard({ icon, label, value, color, active, onClick }: KpiCardProps) {
   return (
-    <Paper
-      variant="outlined"
+    <Box
+      onClick={onClick}
       sx={{
         flex: 1,
         p: 1.5,
         display: 'flex',
         alignItems: 'center',
         gap: 1.5,
-        borderColor: '#e2e8f0',
+        border: active ? `2px solid ${color}` : '1px solid #e2e8f0',
+        borderRadius: 1.5,
+        bgcolor: active ? `${color}10` : 'white',
+        cursor: 'pointer',
+        transition: 'all 0.15s',
         minWidth: 0,
+        '&:hover': {
+          bgcolor: `${color}0d`,
+          borderColor: color,
+        },
       }}
     >
       <Box
         sx={{
-          width: 36,
-          height: 36,
+          width: 34,
+          height: 34,
           borderRadius: 1,
           bgcolor: `${color}18`,
           display: 'flex',
@@ -41,16 +55,32 @@ function KpiItem({ icon, label, value, color }: KpiItemProps) {
         <Typography variant="h6" sx={{ fontWeight: 700, color, lineHeight: 1.2, fontSize: '1.25rem' }}>
           {value}
         </Typography>
-        <Typography variant="caption" color="text.secondary" sx={{ whiteSpace: 'nowrap' }}>
+        <Typography variant="caption" color="text.secondary" sx={{ whiteSpace: 'nowrap', fontSize: '0.7rem' }}>
           {label}
         </Typography>
       </Box>
-    </Paper>
+    </Box>
   )
 }
 
 export function ReminderKpiBar() {
   const { data, isLoading } = useReminderInsights()
+  const { filterHorizon, setFilterHorizon, filterType, setFilterType } = useReminderStore(
+    useShallow(s => ({
+      filterHorizon: s.filterHorizon,
+      setFilterHorizon: s.setFilterHorizon,
+      filterType: s.filterType,
+      setFilterType: s.setFilterType,
+    }))
+  )
+
+  function toggleHorizon(h: FilterHorizon) {
+    setFilterHorizon(filterHorizon === h ? 'ALL' : h)
+  }
+
+  function togglePreMarket() {
+    setFilterType(filterType === ReminderType.SCHATTENMARKT_RELEASE ? 'ALL' : ReminderType.SCHATTENMARKT_RELEASE)
+  }
 
   if (isLoading) {
     return (
@@ -62,33 +92,41 @@ export function ReminderKpiBar() {
     )
   }
 
-  const insights = data ?? { urgentCount: 0, dueThisWeek: 0, dueThisMonth: 0, schattenmarktReadyCount: 0 }
+  const ins = data ?? { overdueCount: 0, dueThisWeek: 0, dueThisMonth: 0, schattenmarktReadyCount: 0 }
 
   return (
     <Box className="flex gap-3">
-      <KpiItem
-        icon={<AlertTriangle size={18} color="#dc2626" />}
-        label="Dringend"
-        value={insights.urgentCount}
+      <KpiCard
+        icon={<AlertOctagon size={18} color="#dc2626" />}
+        label="Überfällig"
+        value={ins.overdueCount}
         color="#dc2626"
+        active={filterHorizon === 'OVERDUE'}
+        onClick={() => toggleHorizon('OVERDUE')}
       />
-      <KpiItem
+      <KpiCard
         icon={<Calendar size={18} color="#ea580c" />}
         label="Diese Woche"
-        value={insights.dueThisWeek}
+        value={ins.dueThisWeek}
         color="#ea580c"
+        active={filterHorizon === 'THIS_WEEK'}
+        onClick={() => toggleHorizon('THIS_WEEK')}
       />
-      <KpiItem
+      <KpiCard
         icon={<CalendarDays size={18} color="#0369a1" />}
         label="Dieser Monat"
-        value={insights.dueThisMonth}
+        value={ins.dueThisMonth}
         color="#0369a1"
+        active={filterHorizon === 'THIS_MONTH'}
+        onClick={() => toggleHorizon('THIS_MONTH')}
       />
-      <KpiItem
+      <KpiCard
         icon={<Eye size={18} color="#be185d" />}
         label="Pre-Market Risiko"
-        value={insights.schattenmarktReadyCount}
+        value={ins.schattenmarktReadyCount}
         color="#be185d"
+        active={filterType === ReminderType.SCHATTENMARKT_RELEASE}
+        onClick={togglePreMarket}
       />
     </Box>
   )
diff --git a/src/components/supply/ReminderListRow.tsx b/src/components/supply/ReminderListRow.tsx
index 14136a6..4a90d75 100644
--- a/src/components/supply/ReminderListRow.tsx
+++ b/src/components/supply/ReminderListRow.tsx
@@ -7,7 +7,14 @@ import { ReminderTypeBadge } from './ReminderTypeBadge'
 import { ReminderDaysIndicator } from './ReminderDaysIndicator'
 import { useCompleteReminder, useDismissReminder, useSnoozeReminder } from '../../hooks/useReminders'
 import { useReminderStore } from '../../stores/reminderStore'
-import { ReminderStatus } from '../../domain/reminder'
+import { ReminderStatus, ReminderPriority } from '../../domain/reminder'
+
+const PRIORITY_BORDER: Record<string, string> = {
+  [ReminderPriority.URGENT]: '#dc2626',
+  [ReminderPriority.HIGH]: '#ea580c',
+  [ReminderPriority.MEDIUM]: '#ca8a04',
+  [ReminderPriority.LOW]: 'transparent',
+}
 
 const STATUS_CHIP_COLOR: Record<string, 'default' | 'success' | 'warning' | 'error' | 'info'> = {
   ACTIVE: 'info',
@@ -56,6 +63,8 @@ export const ReminderListRow = memo(function ReminderListRow({ reminder }: Props
     snooze.mutate({ id: reminder.id, until: '2026-05-27' })
   }
 
+  const borderColor = PRIORITY_BORDER[reminder.priority] ?? 'transparent'
+
   return (
     <Box
       onClick={handleRowClick}
@@ -64,9 +73,11 @@ export const ReminderListRow = memo(function ReminderListRow({ reminder }: Props
         gridTemplateColumns: '100px 130px 1fr 140px 90px 100px 90px',
         alignItems: 'center',
         gap: 1,
-        px: 2,
+        pl: 1.5,
+        pr: 2,
         py: 1.25,
         borderBottom: '1px solid #f1f5f9',
+        borderLeft: `3px solid ${borderColor}`,
         bgcolor: 'white',
         cursor: 'pointer',
         '&:hover': { bgcolor: '#f8fafc' },
diff --git a/src/services/reminderService.ts b/src/services/reminderService.ts
index 28e9dfd..8df9c12 100644
--- a/src/services/reminderService.ts
+++ b/src/services/reminderService.ts
@@ -48,6 +48,8 @@ export const reminderService = {
         (r.shadowMarketRisk === ShadowMarketRisk.HIGH),
     ).length
 
+    const overdueCount = active.filter(r => daysDiff(r.dueDate) <= 0).length
+
     const activeDays = active
       .filter(r => daysDiff(r.dueDate) > 0)
       .map(r => daysDiff(r.dueDate))
@@ -60,6 +62,7 @@ export const reminderService = {
       dueThisWeek,
       dueThisMonth,
       schattenmarktReadyCount,
+      overdueCount,
       avgDaysToAction,
     }
   },
diff --git a/src/stores/reminderStore.ts b/src/stores/reminderStore.ts
index 083638b..6b20653 100644
--- a/src/stores/reminderStore.ts
+++ b/src/stores/reminderStore.ts
@@ -1,6 +1,8 @@
 import { create } from 'zustand'
 import type { ReminderType, ReminderStatus, ReminderPriority } from '../domain/reminder'
 
+export type FilterHorizon = 'ALL' | 'OVERDUE' | 'THIS_WEEK' | 'THIS_MONTH' | 'LATER'
+
 interface ReminderStore {
   selectedId: string | null
   setSelectedId: (id: string | null) => void
@@ -8,10 +10,12 @@ interface ReminderStore {
   setDrawerOpen: (open: boolean) => void
   filterType: ReminderType | 'ALL'
   setFilterType: (t: ReminderType | 'ALL') => void
-  filterStatus: ReminderStatus | 'ALL'
-  setFilterStatus: (s: ReminderStatus | 'ALL') => void
+  filterStatus: ReminderStatus | 'ALL' | 'ACTIVE'
+  setFilterStatus: (s: ReminderStatus | 'ALL' | 'ACTIVE') => void
   filterPriority: ReminderPriority | 'ALL'
   setFilterPriority: (p: ReminderPriority | 'ALL') => void
+  filterHorizon: FilterHorizon
+  setFilterHorizon: (h: FilterHorizon) => void
   searchQuery: string
   setSearchQuery: (q: string) => void
   viewMode: 'list' | 'card'
@@ -25,10 +29,12 @@ export const useReminderStore = create<ReminderStore>((set) => ({
   setDrawerOpen: (open) => set({ drawerOpen: open }),
   filterType: 'ALL',
   setFilterType: (t) => set({ filterType: t }),
-  filterStatus: 'ALL',
+  filterStatus: 'ACTIVE',
   setFilterStatus: (s) => set({ filterStatus: s }),
   filterPriority: 'ALL',
   setFilterPriority: (p) => set({ filterPriority: p }),
+  filterHorizon: 'ALL',
+  setFilterHorizon: (h) => set({ filterHorizon: h }),
   searchQuery: '',
   setSearchQuery: (q) => set({ searchQuery: q }),
   viewMode: 'list',