diff --git a/src/app/member/[id]/_components/member-role-card.tsx b/src/app/member/[id]/_components/member-role-card.tsx
deleted file mode 100644
index 88188f2..0000000
--- a/src/app/member/[id]/_components/member-role-card.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-"use client";
-
-import { Gauge, TrendingUp, User } from "lucide-react";
-
-import { ReadOnlyMetricCard } from "@/app/dashboard/[teamId]/_components/dashboard-metric-card";
-import { stripHtml } from "@/lib/html-utils";
-import { type RouterOutputs } from "@/trpc/react";
-
-type Role = RouterOutputs["role"]["getByUser"][number];
-type DashboardMetrics = RouterOutputs["dashboard"]["getDashboardCharts"];
-
-interface MemberRoleCardProps {
-  role: Role;
-  dashboardChart?: DashboardMetrics[number];
-}
-
-export function MemberRoleCard({ role, dashboardChart }: MemberRoleCardProps) {
-  const purpose = stripHtml(role.purpose ?? "");
-  const truncatedPurpose =
-    purpose.length > 100 ? purpose.substring(0, 100) + "..." : purpose;
-
-  return (
-    <div
-      className="bg-card flex flex-col rounded-lg border transition-all duration-200 hover:shadow-lg"
-      style={{ borderColor: role.color }}
-    >
-      {/* Header */}
-      <div
-        className="flex shrink-0 items-center gap-2 rounded-t-md px-4 py-2"
-        style={{ backgroundColor: `${role.color}15` }}
-      >
-        <User className="h-5 w-5" style={{ color: role.color }} />
-        <h3 className="truncate text-sm font-semibold">{role.title}</h3>
-      </div>
-
-      {/* Body */}
-      <div className="flex min-h-0 flex-1 flex-col gap-1.5 overflow-hidden px-4 py-2">
-        {/* Purpose */}
-        {truncatedPurpose && (
-          <p className="text-muted-foreground line-clamp-2 text-xs">
-            {truncatedPurpose}
-          </p>
-        )}
-
-        {/* Metric info when no chart */}
-        {!dashboardChart && role.metric && (
-          <div className="mt-auto space-y-0.5">
-            <div className="flex items-center gap-2 text-xs">
-              <TrendingUp className="text-muted-foreground h-3 w-3 shrink-0" />
-              <span className="truncate font-medium">{role.metric.name}</span>
-            </div>
-            {role.metric.description && (
-              <p className="text-muted-foreground/70 pl-5 text-[10px]">
-                {role.metric.description}
-              </p>
-            )}
-          </div>
-        )}
-      </div>
-
-      {/* Footer - Effort Points */}
-      {role.effortPoints && (
-        <div className="border-border/50 shrink-0 border-t px-4 py-1.5">
-          <div className="text-muted-foreground flex items-center gap-1.5 text-xs">
-            <Gauge className="h-3.5 w-3.5" />
-            <span>
-              {role.effortPoints} {role.effortPoints === 1 ? "point" : "points"}
-            </span>
-          </div>
-        </div>
-      )}
-
-      {/* Metric Chart Section */}
-      {dashboardChart ? (
-        <div className="border-border/50 overflow-hidden border-t">
-          <ReadOnlyMetricCard dashboardChart={dashboardChart} />
-        </div>
-      ) : !role.metric ? (
-        <div className="border-border/50 text-muted-foreground border-t px-4 py-3 text-center text-xs">
-          No KPI assigned
-        </div>
-      ) : null}
-    </div>
-  );
-}
diff --git a/src/app/member/[id]/_components/role-kpi-pair.tsx b/src/app/member/[id]/_components/role-kpi-pair.tsx
new file mode 100644
index 0000000..4d54772
--- /dev/null
+++ b/src/app/member/[id]/_components/role-kpi-pair.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { KpiCard } from "@/components/metric/kpi-card";
+import { RoleCard, type RoleCardData } from "@/components/role/role-card";
+import { cn } from "@/lib/utils";
+import { type RouterOutputs } from "@/trpc/react";
+
+type Role = RouterOutputs["role"]["getByUser"][number];
+type DashboardChart = RouterOutputs["dashboard"]["getDashboardCharts"][number];
+
+interface RoleKpiPairProps {
+  role: Role;
+  dashboardChart?: DashboardChart;
+  teamId: string;
+}
+
+export function RoleKpiPair({
+  role,
+  dashboardChart,
+  teamId,
+}: RoleKpiPairProps) {
+  const roleCardData: RoleCardData = {
+    id: role.id,
+    title: role.title,
+    purpose: role.purpose,
+    color: role.color ?? "#3b82f6",
+    effortPoints: role.effortPoints,
+    assignedUserId: role.assignedUserId,
+    assignedUserName: role.assignedUserName,
+    metric: role.metric
+      ? {
+          name: role.metric.name,
+          dashboardCharts: role.metric.dashboardCharts,
+        }
+      : null,
+  };
+
+  const hasKpi = !!dashboardChart;
+  const hasMetricButNoChart = !!role.metricId && !dashboardChart;
+
+  return (
+    <div
+      className={cn(
+        "grid items-stretch gap-3",
+        hasKpi || hasMetricButNoChart
+          ? "grid-cols-1 lg:grid-cols-2"
+          : "grid-cols-1",
+      )}
+    >
+      <RoleCard role={roleCardData} readOnly className="h-full" />
+
+      {hasKpi && (
+        <KpiCard
+          dashboardChart={dashboardChart}
+          teamId={teamId}
+          showSettings={false}
+          enableDragDrop={false}
+        />
+      )}
+
+      {hasMetricButNoChart && (
+        <div className="border-border/60 text-muted-foreground flex items-center justify-center rounded-lg border border-dashed p-6">
+          <span className="text-sm">KPI data loading...</span>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/member/[id]/_components/team-section.tsx b/src/app/member/[id]/_components/team-section.tsx
index 61e9ba8..3d761f9 100644
--- a/src/app/member/[id]/_components/team-section.tsx
+++ b/src/app/member/[id]/_components/team-section.tsx
@@ -13,7 +13,7 @@ import {
 } from "@/components/ui/collapsible";
 import { type RouterOutputs } from "@/trpc/react";
 
-import { MemberRoleCard } from "./member-role-card";
+import { RoleKpiPair } from "./role-kpi-pair";
 
 type Role = RouterOutputs["role"]["getByUser"][number];
 type DashboardMetrics = RouterOutputs["dashboard"]["getDashboardCharts"];
@@ -74,20 +74,19 @@ export function TeamSection({
         </CollapsibleTrigger>
 
         <CollapsibleContent>
-          <div className="border-border/60 border-t px-4 py-3">
-            <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
-              {roles.map((role) => (
-                <MemberRoleCard
-                  key={role.id}
-                  role={role}
-                  dashboardChart={
-                    role.metricId
-                      ? chartsByMetricId.get(role.metricId)
-                      : undefined
-                  }
-                />
-              ))}
-            </div>
+          <div className="border-border/60 space-y-4 border-t px-4 py-4">
+            {roles.map((role) => (
+              <RoleKpiPair
+                key={role.id}
+                role={role}
+                dashboardChart={
+                  role.metricId
+                    ? chartsByMetricId.get(role.metricId)
+                    : undefined
+                }
+                teamId={team.id}
+              />
+            ))}
           </div>
         </CollapsibleContent>
       </div>