diff --git a/src/app/member/[id]/_components/role-kpi-pair.tsx b/src/app/member/[id]/_components/role-kpi-pair.tsx
index 4d54772..34f8391 100644
--- a/src/app/member/[id]/_components/role-kpi-pair.tsx
+++ b/src/app/member/[id]/_components/role-kpi-pair.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { KpiCard } from "@/components/metric/kpi-card";
+import { ReadOnlyMetricCard } from "@/app/dashboard/[teamId]/_components/dashboard-metric-card";
 import { RoleCard, type RoleCardData } from "@/components/role/role-card";
 import { cn } from "@/lib/utils";
 import { type RouterOutputs } from "@/trpc/react";
@@ -11,14 +11,9 @@ type DashboardChart = RouterOutputs["dashboard"]["getDashboardCharts"][number];
 interface RoleKpiPairProps {
   role: Role;
   dashboardChart?: DashboardChart;
-  teamId: string;
 }
 
-export function RoleKpiPair({
-  role,
-  dashboardChart,
-  teamId,
-}: RoleKpiPairProps) {
+export function RoleKpiPair({ role, dashboardChart }: RoleKpiPairProps) {
   const roleCardData: RoleCardData = {
     id: role.id,
     title: role.title,
@@ -41,7 +36,7 @@ export function RoleKpiPair({
   return (
     <div
       className={cn(
-        "grid items-stretch gap-3",
+        "grid items-stretch gap-4",
         hasKpi || hasMetricButNoChart
           ? "grid-cols-1 lg:grid-cols-2"
           : "grid-cols-1",
@@ -49,17 +44,10 @@ export function RoleKpiPair({
     >
       <RoleCard role={roleCardData} readOnly className="h-full" />
 
-      {hasKpi && (
-        <KpiCard
-          dashboardChart={dashboardChart}
-          teamId={teamId}
-          showSettings={false}
-          enableDragDrop={false}
-        />
-      )}
+      {hasKpi && <ReadOnlyMetricCard dashboardChart={dashboardChart} />}
 
       {hasMetricButNoChart && (
-        <div className="border-border/60 text-muted-foreground flex items-center justify-center rounded-lg border border-dashed p-6">
+        <div className="border-border/60 text-muted-foreground flex h-[420px] items-center justify-center rounded-xl border border-dashed p-6">
           <span className="text-sm">KPI data loading...</span>
         </div>
       )}
diff --git a/src/app/member/[id]/_components/team-section.tsx b/src/app/member/[id]/_components/team-section.tsx
index 3d761f9..8bef1d8 100644
--- a/src/app/member/[id]/_components/team-section.tsx
+++ b/src/app/member/[id]/_components/team-section.tsx
@@ -84,7 +84,6 @@ export function TeamSection({
                     ? chartsByMetricId.get(role.metricId)
                     : undefined
                 }
-                teamId={team.id}
               />
             ))}
           </div>
diff --git a/src/components/role/role-card.tsx b/src/components/role/role-card.tsx
index c3a606b..a5b5be9 100644
--- a/src/components/role/role-card.tsx
+++ b/src/components/role/role-card.tsx
@@ -181,7 +181,8 @@ function RoleCardComponent({
   return (
     <div
       className={cn(
-        "bg-card group relative flex flex-col rounded-lg border transition-all duration-200 hover:shadow-lg",
+        "bg-card group relative flex flex-col rounded-lg border transition-all duration-200",
+        !readOnly && "hover:shadow-lg",
         selected && "ring-primary ring-2 ring-offset-2",
         isPending && "opacity-70",
         isDeleting && "opacity-50",