diff --git a/components/sprint/sprint-backlog.tsx b/components/sprint/sprint-backlog.tsx
index bffc534..5cbd2ef 100644
--- a/components/sprint/sprint-backlog.tsx
+++ b/components/sprint/sprint-backlog.tsx
@@ -15,6 +15,7 @@ import {
 import { PanelNavBar } from '@/components/shared/panel-nav-bar'
 import { UserAvatar } from '@/components/shared/user-avatar'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
+import { PRIORITY_BORDER } from '@/components/backlog/backlog-card'
 import { useSprintStore } from '@/stores/sprint-store'
 import { claimStoryAction, unclaimStoryAction, reassignStoryAction, claimAllUnassignedInActiveSprintAction } from '@/actions/stories'
 import { cn } from '@/lib/utils'
@@ -26,14 +27,6 @@ const STATUS_COLORS: Record<string, string> = {
 }
 const STATUS_LABELS: Record<string, string> = { OPEN: 'Open', IN_SPRINT: 'In Sprint', DONE: 'Klaar' }
 
-const PRIORITY_COLORS: Record<number, string> = {
-  1: 'bg-priority-critical/15 text-priority-critical border-priority-critical/30',
-  2: 'bg-priority-high/15 text-priority-high border-priority-high/30',
-  3: 'bg-priority-medium/15 text-priority-medium border-priority-medium/30',
-  4: 'bg-priority-low/15 text-priority-low border-priority-low/30',
-}
-const PRIORITY_LABELS: Record<number, string> = { 1: 'Kritiek', 2: 'Hoog', 3: 'Gemiddeld', 4: 'Laag' }
-
 export interface SprintStory {
   id: string
   code: string | null
@@ -124,86 +117,89 @@ function SortableSprintRow({
       ref={setNodeRef}
       style={style}
       onClick={onSelect}
-      className={cn(
-        'group flex items-start gap-3 px-4 py-2.5 border-b border-border cursor-pointer transition-colors',
-        isSelected
-          ? 'bg-primary-container text-primary-container-foreground'
-          : 'hover:bg-surface-container'
-      )}
+      className="group px-2 py-1 cursor-pointer"
     >
-      {!isDemo && (
-        <span
-          {...attributes}
-          {...listeners}
-          aria-label="Versleep om te sorteren of naar Product Backlog"
-          className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none text-sm mt-0.5"
-          onClick={e => e.stopPropagation()}
-        >
-          ⠿
-        </span>
-      )}
-      <div className="flex-1 min-w-0">
-        <div className="flex items-start justify-between gap-2">
-          <p className="text-sm truncate flex-1">{story.title}</p>
-          {story.code && <CodeBadge code={story.code} className="shrink-0 mt-0.5" />}
-        </div>
-        <div className="flex items-center gap-1.5 mt-0.5">
-          <Badge className={cn('text-[10px] px-1.5 py-0 border', PRIORITY_COLORS[story.priority])}>
-            {PRIORITY_LABELS[story.priority]}
-          </Badge>
-          <span className="text-xs text-muted-foreground">{story.doneCount}/{story.taskCount} klaar</span>
-        </div>
-        <div className="flex items-center gap-1.5 mt-1">
-          {story.assignee_id ? (
-            <>
-              <UserAvatar userId={story.assignee_id} username={story.assignee_username ?? '?'} size="xs" />
-              <span className="text-xs text-muted-foreground truncate">{story.assignee_username}</span>
-            </>
-          ) : (
-            <span className="text-xs text-muted-foreground italic">Niet geclaimd</span>
-          )}
-        </div>
-      </div>
-      <div className="flex items-center gap-1 shrink-0 mt-0.5" onClick={e => e.stopPropagation()}>
-        <DemoTooltip show={isDemo}>
-          <DropdownMenu>
-            <DropdownMenuTrigger
-              disabled={isDemo}
-              className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground p-0.5 rounded bg-transparent border-0 cursor-pointer"
-              aria-label="Story opties"
-            >
-              <MoreHorizontal size={14} />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" onClick={e => e.stopPropagation()}>
-              {story.assignee_id !== currentUserId && (
-                <DropdownMenuItem onClick={handleClaim}>Pak op</DropdownMenuItem>
-              )}
-              {story.assignee_id && (
-                <DropdownMenuItem onClick={handleUnclaim}>Geef terug aan team</DropdownMenuItem>
-              )}
-              <DropdownMenuSub>
-                <DropdownMenuSubTrigger>Wijs toe aan</DropdownMenuSubTrigger>
-                <DropdownMenuSubContent>
-                  {members.map(m => (
-                    <DropdownMenuItem key={m.userId} onClick={e => handleReassign(e, m.userId, m.username)}>
-                      <UserAvatar userId={m.userId} username={m.username} size="xs" />
-                      <span>{m.username}</span>
-                    </DropdownMenuItem>
-                  ))}
-                </DropdownMenuSubContent>
-              </DropdownMenuSub>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </DemoTooltip>
+      <div className={cn(
+        'flex items-start gap-2 rounded border border-border px-3 py-2 transition-colors',
+        PRIORITY_BORDER[story.priority],
+        isSelected
+          ? 'bg-primary-container border-primary text-primary-container-foreground'
+          : 'bg-surface-container hover:bg-surface-container-high'
+      )}>
         {!isDemo && (
-          <button
-            onClick={e => { e.stopPropagation(); onRemove() }}
-            className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-error"
-            aria-label="Verwijder uit sprint"
+          <span
+            {...attributes}
+            {...listeners}
+            aria-label="Versleep om te sorteren of naar Product Backlog"
+            className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none text-sm mt-0.5"
+            onClick={e => e.stopPropagation()}
           >
-            <Trash2 size={14} />
-          </button>
+            ⠿
+          </span>
         )}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start justify-between gap-2">
+            <p className="text-sm leading-snug line-clamp-2 flex-1">{story.title}</p>
+            {story.code && <CodeBadge code={story.code} className="shrink-0 mt-0.5" />}
+          </div>
+          <div className="flex items-center justify-between gap-2 mt-1.5">
+            <div className="flex items-center gap-1.5 min-w-0">
+              <Badge className={cn('text-[10px] px-1.5 py-0 border shrink-0', STATUS_COLORS[story.status])}>
+                {STATUS_LABELS[story.status]}
+              </Badge>
+              <span className="text-xs text-muted-foreground shrink-0">{story.doneCount}/{story.taskCount} klaar</span>
+              {story.assignee_id ? (
+                <div className="flex items-center gap-1 min-w-0">
+                  <UserAvatar userId={story.assignee_id} username={story.assignee_username ?? '?'} size="xs" />
+                  <span className="text-xs text-muted-foreground truncate">{story.assignee_username}</span>
+                </div>
+              ) : (
+                <span className="text-xs text-muted-foreground italic">Niet geclaimd</span>
+              )}
+            </div>
+            <div className="flex items-center gap-1 shrink-0" onClick={e => e.stopPropagation()}>
+              <DemoTooltip show={isDemo}>
+                <DropdownMenu>
+                  <DropdownMenuTrigger
+                    disabled={isDemo}
+                    className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground p-0.5 rounded bg-transparent border-0 cursor-pointer"
+                    aria-label="Story opties"
+                  >
+                    <MoreHorizontal size={14} />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" onClick={e => e.stopPropagation()}>
+                    {story.assignee_id !== currentUserId && (
+                      <DropdownMenuItem onClick={handleClaim}>Pak op</DropdownMenuItem>
+                    )}
+                    {story.assignee_id && (
+                      <DropdownMenuItem onClick={handleUnclaim}>Geef terug aan team</DropdownMenuItem>
+                    )}
+                    <DropdownMenuSub>
+                      <DropdownMenuSubTrigger>Wijs toe aan</DropdownMenuSubTrigger>
+                      <DropdownMenuSubContent>
+                        {members.map(m => (
+                          <DropdownMenuItem key={m.userId} onClick={e => handleReassign(e, m.userId, m.username)}>
+                            <UserAvatar userId={m.userId} username={m.username} size="xs" />
+                            <span>{m.username}</span>
+                          </DropdownMenuItem>
+                        ))}
+                      </DropdownMenuSubContent>
+                    </DropdownMenuSub>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </DemoTooltip>
+              {!isDemo && (
+                <button
+                  onClick={e => { e.stopPropagation(); onRemove() }}
+                  className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-error"
+                  aria-label="Verwijder uit sprint"
+                >
+                  <Trash2 size={14} />
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   )
@@ -326,35 +322,43 @@ function DraggablePbiStoryRow({
       style={style}
       onClick={!isDemo ? onAdd : undefined}
       className={cn(
-        'flex items-center gap-3 px-6 py-2 border-b border-border/50 transition-colors',
-        !isDemo && 'cursor-pointer hover:bg-primary/5',
+        'px-2 py-1',
+        !isDemo && 'cursor-pointer',
         isDemo && 'opacity-60',
         isDragging && 'opacity-40'
       )}
     >
-      {!isDemo && (
-        <span
-          {...attributes}
-          {...listeners}
-          aria-label="Sleep naar Sprint Backlog"
-          className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none text-sm"
-          onClick={e => e.stopPropagation()}
-        >
-          ⠿
-        </span>
-      )}
-      <div className="flex-1 min-w-0">
-        <div className="flex items-start justify-between gap-2">
-          <p className="text-sm truncate flex-1">{story.title}</p>
-          {story.code && <CodeBadge code={story.code} className="shrink-0 mt-0.5" />}
+      <div className={cn(
+        'flex items-center gap-2 rounded border border-border px-3 py-2 transition-colors bg-surface-container',
+        PRIORITY_BORDER[story.priority],
+        !isDemo && 'hover:bg-surface-container-high'
+      )}>
+        {!isDemo && (
+          <span
+            {...attributes}
+            {...listeners}
+            aria-label="Sleep naar Sprint Backlog"
+            className="text-muted-foreground cursor-grab active:cursor-grabbing shrink-0 select-none text-sm"
+            onClick={e => e.stopPropagation()}
+          >
+            ⠿
+          </span>
+        )}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start justify-between gap-2">
+            <p className="text-sm leading-snug line-clamp-2 flex-1">{story.title}</p>
+            {story.code && <CodeBadge code={story.code} className="shrink-0 mt-0.5" />}
+          </div>
+          <div className="mt-1.5">
+            <Badge className={cn('text-[10px] px-1.5 py-0 border', STATUS_COLORS[story.status])}>
+              {STATUS_LABELS[story.status]}
+            </Badge>
+          </div>
         </div>
-        <Badge className={cn('text-[10px] px-1.5 py-0 border mt-0.5', STATUS_COLORS[story.status])}>
-          {STATUS_LABELS[story.status]}
-        </Badge>
+        {!isDemo && (
+          <span className="text-xs text-muted-foreground shrink-0">+ toevoegen</span>
+        )}
       </div>
-      {!isDemo && (
-        <span className="text-xs text-muted-foreground shrink-0">+ toevoegen</span>
-      )}
     </div>
   )
 }
@@ -404,21 +408,25 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, on
               const inSprint = sprintStoryIds.has(story.id)
               if (inSprint) {
                 return (
-                  <div
-                    key={story.id}
-                    className="flex items-center gap-3 px-6 py-2 border-b border-border/50 opacity-40"
-                  >
-                    <div className="w-[14px] shrink-0" />
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-start justify-between gap-2">
-                        <p className="text-sm truncate flex-1">{story.title}</p>
-                        {story.code && <CodeBadge code={story.code} className="shrink-0 mt-0.5" />}
+                  <div key={story.id} className="px-2 py-1 opacity-40">
+                    <div className={cn(
+                      'flex items-center gap-2 rounded border border-border px-3 py-2 bg-surface-container',
+                      PRIORITY_BORDER[story.priority]
+                    )}>
+                      <div className="w-[14px] shrink-0" />
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-start justify-between gap-2">
+                          <p className="text-sm leading-snug line-clamp-2 flex-1">{story.title}</p>
+                          {story.code && <CodeBadge code={story.code} className="shrink-0 mt-0.5" />}
+                        </div>
+                        <div className="mt-1.5">
+                          <Badge className={cn('text-[10px] px-1.5 py-0 border', STATUS_COLORS[story.status])}>
+                            {STATUS_LABELS[story.status]}
+                          </Badge>
+                        </div>
                       </div>
-                      <Badge className={cn('text-[10px] px-1.5 py-0 border mt-0.5', STATUS_COLORS[story.status])}>
-                        {STATUS_LABELS[story.status]}
-                      </Badge>
+                      <span className="text-xs text-muted-foreground shrink-0">In Sprint</span>
                     </div>
-                    <span className="text-xs text-muted-foreground shrink-0">In Sprint</span>
                   </div>
                 )
               }