diff --git a/src/app/member/[id]/_components/member-goals-chart.tsx b/src/app/member/[id]/_components/member-goals-chart.tsx
index 04f1e7f..563e2e1 100644
--- a/src/app/member/[id]/_components/member-goals-chart.tsx
+++ b/src/app/member/[id]/_components/member-goals-chart.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { GoalsRadarChart } from "@/components/charts";
+import { GoalsBarChart } from "@/components/charts";
 
 interface MemberGoalsChartProps {
   metricIds: string[];
 }
 
 export function MemberGoalsChart({ metricIds }: MemberGoalsChartProps) {
-  return <GoalsRadarChart metricIds={metricIds} showHeader={true} />;
+  return <GoalsBarChart metricIds={metricIds} showHeader={true} />;
 }
diff --git a/src/app/member/member-card.tsx b/src/app/member/member-card.tsx
index cf5724f..250a47c 100644
--- a/src/app/member/member-card.tsx
+++ b/src/app/member/member-card.tsx
@@ -1,23 +1,31 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 
 import Link from "next/link";
 
-import { ArrowRight, Users } from "lucide-react";
+import { ArrowRight, ChevronDown, ChevronUp, LayoutGrid } from "lucide-react";
 
-import { GoalsRadarChart, MetricPieChart } from "@/components/charts";
+import { GoalsBarChart, MetricPieChart } from "@/components/charts";
+import { KpiCard } from "@/components/metric/kpi-card";
+import { RoleCard, type RoleCardData } from "@/components/role/role-card";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import type { ChartConfig } from "@/components/ui/chart";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
 import { Skeleton } from "@/components/ui/skeleton";
 import type { RouterOutputs } from "@/trpc/react";
 import { api } from "@/trpc/react";
 
 type Member = RouterOutputs["organization"]["getMembers"][number];
 type DashboardCharts = RouterOutputs["dashboard"]["getDashboardCharts"];
+type Role = RouterOutputs["role"]["getByUser"][number];
 
 interface MemberCardProps {
   member: Member;
@@ -39,7 +47,27 @@ function getInitials(member: Member): string {
   return member.email.slice(0, 2).toUpperCase();
 }
 
+function roleToCardData(role: Role): RoleCardData {
+  return {
+    id: role.id,
+    title: role.title,
+    purpose: role.purpose ?? "",
+    color: role.color ?? "#3b82f6",
+    effortPoints: role.effortPoints,
+    assignedUserId: role.assignedUserId,
+    assignedUserName: null,
+    metric: role.metric
+      ? {
+          name: role.metric.name,
+          dashboardCharts: role.metric.dashboardCharts,
+        }
+      : null,
+  };
+}
+
 export function MemberCard({ member, dashboardCharts }: MemberCardProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
   const { data: roles, isLoading } = api.role.getByUser.useQuery({
     userId: member.id,
   });
@@ -67,6 +95,17 @@ export function MemberCard({ member, dashboardCharts }: MemberCardProps) {
     return Array.from(teamMap.values());
   }, [roles]);
 
+  // Filter KPIs for this member (metrics linked to their roles)
+  const memberKpis = useMemo(() => {
+    if (!roles || dashboardCharts.length === 0) return [];
+    const memberMetricIds = new Set(
+      roles.filter((r) => r.metricId != null).map((r) => r.metricId!),
+    );
+    return dashboardCharts.filter((chart) =>
+      memberMetricIds.has(chart.metric.id),
+    );
+  }, [roles, dashboardCharts]);
+
   const pieChartData = rolesWithEffort.map((role, index) => ({
     name: role.title,
     value: role.effortPoints!,
@@ -87,31 +126,35 @@ export function MemberCard({ member, dashboardCharts }: MemberCardProps) {
       ?.filter((role) => role.metricId != null)
       .map((role) => role.metricId!) ?? [];
 
+  const hasRolesOrKpis = (roles?.length ?? 0) > 0 || memberKpis.length > 0;
+
   return (
-    <Card className="p-6">
-      <div className="flex flex-col gap-6 md:flex-row">
-        <div className="flex w-full flex-col gap-4 md:w-[220px] md:shrink-0">
-          <div className="flex items-center gap-4">
-            <Avatar className="h-14 w-14 shrink-0">
+    <Card className="p-5">
+      <div className="flex flex-col gap-5 md:flex-row">
+        {/* Left Column - Member Info */}
+        <div className="flex w-full flex-col gap-3 md:w-[220px] md:shrink-0">
+          <div className="flex items-center gap-3">
+            <Avatar className="h-12 w-12 shrink-0">
               {member.profilePictureUrl && (
                 <AvatarImage
                   src={member.profilePictureUrl}
                   alt={getDisplayName(member)}
                 />
               )}
-              <AvatarFallback className="bg-primary/10 text-primary text-lg">
+              <AvatarFallback className="bg-primary/10 text-primary text-base font-medium">
                 {getInitials(member)}
               </AvatarFallback>
             </Avatar>
             <div className="min-w-0 flex-1">
-              <h3 className="truncate text-lg font-semibold">
+              <h3 className="truncate text-base leading-tight font-semibold">
                 {getDisplayName(member)}
               </h3>
-              <p className="text-muted-foreground truncate text-sm">
+              <p className="text-muted-foreground/80 truncate text-sm">
                 {member.email}
               </p>
             </div>
           </div>
+
           {isLoading ? (
             <div className="flex gap-2">
               <Skeleton className="h-5 w-16" />
@@ -120,19 +163,25 @@ export function MemberCard({ member, dashboardCharts }: MemberCardProps) {
           ) : (
             <>
               <div className="flex flex-wrap gap-2">
-                <Badge variant="secondary">
+                <Badge variant="secondary" className="text-xs">
                   {roles?.length ?? 0} {roles?.length === 1 ? "role" : "roles"}
                 </Badge>
-                <Badge variant="outline">{totalEffortPoints} pts</Badge>
+                <Badge variant="outline" className="text-xs">
+                  {totalEffortPoints} pts
+                </Badge>
               </div>
+
               {uniqueTeams.length > 0 && (
-                <div className="flex flex-wrap items-center gap-1.5">
-                  <Users className="text-muted-foreground h-3.5 w-3.5" />
+                <div className="flex flex-wrap items-center gap-2">
+                  <div className="text-muted-foreground flex items-center gap-1.5">
+                    <LayoutGrid className="h-3.5 w-3.5" />
+                    <span className="text-xs font-medium">Teams:</span>
+                  </div>
                   {uniqueTeams.map((team) => (
                     <Link key={team.id} href={`/teams/${team.id}`}>
                       <Badge
                         variant="outline"
-                        className="hover:bg-accent cursor-pointer text-xs transition-colors"
+                        className="hover:bg-accent hover:border-accent-foreground/20 cursor-pointer text-xs transition-colors"
                       >
                         {team.name}
                       </Badge>
@@ -142,6 +191,7 @@ export function MemberCard({ member, dashboardCharts }: MemberCardProps) {
               )}
             </>
           )}
+
           <Button
             asChild
             variant="outline"
@@ -155,6 +205,7 @@ export function MemberCard({ member, dashboardCharts }: MemberCardProps) {
           </Button>
         </div>
 
+        {/* Right Column - Charts */}
         <div className="grid flex-1 grid-cols-1 gap-4 md:grid-cols-2">
           {isLoading ? (
             <>
@@ -163,8 +214,8 @@ export function MemberCard({ member, dashboardCharts }: MemberCardProps) {
             </>
           ) : (
             <>
-              <div className="border-border/40 flex h-[380px] flex-col rounded-md border p-4">
-                <span className="text-muted-foreground mb-2 text-xs font-medium tracking-wider uppercase">
+              <div className="border-border/40 flex h-[340px] flex-col rounded-lg border p-4">
+                <span className="text-muted-foreground mb-2 text-xs font-semibold tracking-wider uppercase">
                   Effort Distribution
                 </span>
                 {rolesWithEffort.length > 0 ? (
@@ -179,7 +230,7 @@ export function MemberCard({ member, dashboardCharts }: MemberCardProps) {
                       value: totalEffortPoints,
                       label: "Total",
                     }}
-                    className="h-[280px] w-full"
+                    className="h-[260px] w-full"
                   />
                 ) : (
                   <div className="text-muted-foreground flex flex-1 items-center justify-center text-sm">
@@ -188,15 +239,81 @@ export function MemberCard({ member, dashboardCharts }: MemberCardProps) {
                 )}
               </div>
 
-              <GoalsRadarChart
+              <GoalsBarChart
                 metricIds={metricIdsWithGoals}
                 showHeader={false}
-                className="h-[380px] rounded-md"
+                simpleLegend={true}
+                className="h-[340px] rounded-lg"
               />
             </>
           )}
         </div>
       </div>
+
+      {/* Expandable Section for Roles & KPIs */}
+      {hasRolesOrKpis && (
+        <Collapsible open={isExpanded} onOpenChange={setIsExpanded}>
+          <CollapsibleTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-muted-foreground hover:text-foreground mt-4 w-full justify-center gap-2"
+            >
+              {isExpanded ? (
+                <>
+                  <ChevronUp className="h-4 w-4" />
+                  <span className="text-xs font-medium">Hide Roles & KPIs</span>
+                </>
+              ) : (
+                <>
+                  <ChevronDown className="h-4 w-4" />
+                  <span className="text-xs font-medium">Show Roles & KPIs</span>
+                </>
+              )}
+            </Button>
+          </CollapsibleTrigger>
+
+          <CollapsibleContent className="mt-4 space-y-6">
+            {/* Roles Section */}
+            {roles && roles.length > 0 && (
+              <div className="space-y-3">
+                <h4 className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
+                  Roles ({roles.length})
+                </h4>
+                <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
+                  {roles.map((role) => (
+                    <RoleCard
+                      key={role.id}
+                      role={roleToCardData(role)}
+                      readOnly={true}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* KPIs Section */}
+            {memberKpis.length > 0 && (
+              <div className="space-y-3">
+                <h4 className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
+                  KPIs ({memberKpis.length})
+                </h4>
+                <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
+                  {memberKpis.map((chart) => (
+                    <KpiCard
+                      key={chart.id}
+                      dashboardChart={chart}
+                      teamId={chart.metric.teamId ?? ""}
+                      showSettings={false}
+                      enableDragDrop={false}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+          </CollapsibleContent>
+        </Collapsible>
+      )}
     </Card>
   );
 }
diff --git a/src/components/charts/goals-radar-chart.tsx b/src/components/charts/goals-bar-chart.tsx
similarity index 78%
rename from src/components/charts/goals-radar-chart.tsx
rename to src/components/charts/goals-bar-chart.tsx
index c50dd34..3020420 100644
--- a/src/components/charts/goals-radar-chart.tsx
+++ b/src/components/charts/goals-bar-chart.tsx
@@ -32,11 +32,13 @@ import { formatValue } from "@/lib/helpers/format-value";
 import { cn } from "@/lib/utils";
 import { api } from "@/trpc/react";
 
-interface GoalsRadarChartProps {
+interface GoalsBarChartProps {
   /** Array of metric IDs to display goal progress for */
   metricIds: string[];
   showHeader?: boolean;
   className?: string;
+  /** Use simplified legend with only colored dots and names (no status badges, percentages, or tooltips) */
+  simpleLegend?: boolean;
 }
 
 const STATUS_CONFIG: Record<
@@ -284,11 +286,12 @@ function GoalTooltipContent({ active, payload }: GoalTooltipProps) {
   );
 }
 
-export function GoalsRadarChart({
+export function GoalsBarChart({
   metricIds,
   showHeader = true,
   className,
-}: GoalsRadarChartProps) {
+  simpleLegend = false,
+}: GoalsBarChartProps) {
   // Fetch dashboard charts from cache (parent already fetched this)
   const { data: allCharts } = api.dashboard.getDashboardCharts.useQuery();
 
@@ -429,63 +432,86 @@ export function GoalsRadarChart({
           </BarChart>
         </ChartContainer>
 
-        <div className="border-border/40 mt-4 flex flex-wrap justify-center gap-x-3 gap-y-2 border-t pt-3">
-          {chartData.map((item) => {
-            const statusConfig = STATUS_CONFIG[item.status];
-            return (
-              <TooltipProvider key={item.goal} delayDuration={0}>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <div className="hover:bg-muted/50 border-border/40 flex cursor-pointer items-center gap-2 rounded-md border px-2.5 py-1.5 transition-colors">
-                      <div
-                        className="ring-border/20 h-2.5 w-2.5 shrink-0 rounded-full ring-1"
-                        style={{
-                          backgroundColor: getBarColor(
-                            item.progress,
-                            item.expectedProgress,
-                          ),
-                        }}
-                      />
-                      <div className="flex min-w-0 flex-col">
-                        <span className="text-foreground max-w-[120px] truncate text-xs font-medium">
-                          {item.goal}
-                        </span>
-                        <div className="flex items-center gap-1.5">
-                          <span className="text-muted-foreground text-[10px]">
-                            {Math.round(item.progress)}%
+        {simpleLegend ? (
+          <div className="border-border/40 mt-4 flex flex-wrap justify-center gap-3 border-t pt-3">
+            {chartData.map((item) => (
+              <div key={item.goal} className="flex items-center gap-1.5">
+                <div
+                  className="h-2 w-2 shrink-0 rounded-full"
+                  style={{
+                    backgroundColor: getBarColor(
+                      item.progress,
+                      item.expectedProgress,
+                    ),
+                  }}
+                />
+                <span className="text-foreground max-w-[100px] truncate text-xs">
+                  {item.goal}
+                </span>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="border-border/40 mt-4 flex flex-wrap justify-center gap-x-3 gap-y-2 border-t pt-3">
+            {chartData.map((item) => {
+              const statusConfig = STATUS_CONFIG[item.status];
+              return (
+                <TooltipProvider key={item.goal} delayDuration={0}>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div className="hover:bg-muted/50 border-border/40 flex cursor-pointer items-center gap-2 rounded-md border px-2.5 py-1.5 transition-colors">
+                        <div
+                          className="ring-border/20 h-2.5 w-2.5 shrink-0 rounded-full ring-1"
+                          style={{
+                            backgroundColor: getBarColor(
+                              item.progress,
+                              item.expectedProgress,
+                            ),
+                          }}
+                        />
+                        <div className="flex min-w-0 flex-col">
+                          <span className="text-foreground max-w-[120px] truncate text-xs font-medium">
+                            {item.goal}
                           </span>
-                          <Badge
-                            variant={statusConfig.variant}
-                            className="h-4 gap-0.5 px-1 text-[9px]"
-                          >
-                            {statusConfig.icon}
-                            {statusConfig.label}
-                          </Badge>
+                          <div className="flex items-center gap-1.5">
+                            <span className="text-muted-foreground text-[10px]">
+                              {Math.round(item.progress)}%
+                            </span>
+                            <Badge
+                              variant={statusConfig.variant}
+                              className="h-4 gap-0.5 px-1 text-[9px]"
+                            >
+                              {statusConfig.icon}
+                              {statusConfig.label}
+                            </Badge>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  </TooltipTrigger>
-                  <TooltipContent side="bottom" className="text-xs">
-                    <div className="space-y-1">
-                      <p className="font-medium">{item.goal}</p>
-                      {item.selectedDimension && (
-                        <p className="text-muted-foreground text-[10px]">
-                          Dimension: {item.selectedDimension}
-                        </p>
-                      )}
-                      <div className="flex items-center gap-2">
-                        <span className="text-muted-foreground">Progress:</span>
-                        <span className="font-semibold">
-                          {Math.round(item.progress)}%
-                        </span>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom" className="text-xs">
+                      <div className="space-y-1">
+                        <p className="font-medium">{item.goal}</p>
+                        {item.selectedDimension && (
+                          <p className="text-muted-foreground text-[10px]">
+                            Dimension: {item.selectedDimension}
+                          </p>
+                        )}
+                        <div className="flex items-center gap-2">
+                          <span className="text-muted-foreground">
+                            Progress:
+                          </span>
+                          <span className="font-semibold">
+                            {Math.round(item.progress)}%
+                          </span>
+                        </div>
                       </div>
-                    </div>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            );
-          })}
-        </div>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              );
+            })}
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/components/charts/index.ts b/src/components/charts/index.ts
index 778cd77..9d688de 100644
--- a/src/components/charts/index.ts
+++ b/src/components/charts/index.ts
@@ -1,6 +1,6 @@
 export { MetricAreaChart } from "./area-chart";
 export { MetricBarChart } from "./bar-chart";
-export { GoalsRadarChart } from "./goals-radar-chart";
+export { GoalsBarChart } from "./goals-bar-chart";
 export { MetricPieChart } from "./pie-chart";
 export { MetricRadarChart } from "./radar-chart";
 export { MetricRadialChart } from "./radial-chart";
diff --git a/src/components/charts/pie-chart.tsx b/src/components/charts/pie-chart.tsx
index 36051fa..5166f5e 100644
--- a/src/components/charts/pie-chart.tsx
+++ b/src/components/charts/pie-chart.tsx
@@ -89,7 +89,10 @@ export function MetricPieChart({
           )}
         </Pie>
         {showLegend && (
-          <ChartLegend content={<ChartLegendContent nameKey={xAxisKey} />} />
+          <ChartLegend
+            content={<ChartLegendContent nameKey={xAxisKey} />}
+            wrapperStyle={{ paddingTop: 16 }}
+          />
         )}
       </PieChart>
     </ChartContainer>