diff --git a/components/backlog/pbi-list.tsx b/components/backlog/pbi-list.tsx
index 39523d4..7587e13 100644
--- a/components/backlog/pbi-list.tsx
+++ b/components/backlog/pbi-list.tsx
@@ -368,12 +368,56 @@ export function PbiList({ productId, isDemo }: PbiListProps) {
             }
           />
           <PopoverContent align="end" className="w-72 space-y-4">
-            <FilterPills
-              label="Sorteren op"
-              options={SORT_OPTIONS}
-              value={sortMode}
-              onChange={setSortMode}
-            />
+            <div className="space-y-1.5">
+              <div className="flex items-center justify-between">
+                <p className="text-xs font-medium text-muted-foreground">Sorteren op</p>
+                <div className="flex gap-1">
+                  <button
+                    type="button"
+                    onClick={() => setSortDir('asc')}
+                    className={cn(
+                      'text-xs px-2 py-0.5 rounded border transition-colors',
+                      sortDir === 'asc'
+                        ? 'bg-primary text-primary-foreground border-primary'
+                        : 'bg-transparent border-border hover:bg-surface-container'
+                    )}
+                    aria-label="Oplopend sorteren"
+                  >
+                    ↑
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setSortDir('desc')}
+                    className={cn(
+                      'text-xs px-2 py-0.5 rounded border transition-colors',
+                      sortDir === 'desc'
+                        ? 'bg-primary text-primary-foreground border-primary'
+                        : 'bg-transparent border-border hover:bg-surface-container'
+                    )}
+                    aria-label="Aflopend sorteren"
+                  >
+                    ↓
+                  </button>
+                </div>
+              </div>
+              <div className="flex flex-wrap gap-1.5">
+                {SORT_OPTIONS.map((opt) => (
+                  <button
+                    key={opt.value}
+                    type="button"
+                    onClick={() => setSortMode(opt.value)}
+                    className={cn(
+                      'text-xs px-2.5 py-1 rounded-full border transition-colors',
+                      sortMode === opt.value
+                        ? 'bg-primary text-primary-foreground border-primary'
+                        : 'bg-transparent border-border hover:bg-surface-container'
+                    )}
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+            </div>
             <FilterPills
               label="Prioriteit"
               options={PRIORITY_OPTIONS}