diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/[riskId]/page.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/[riskId]/page.tsx
index e69099a7ea..bd83caeb93 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/[riskId]/page.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/[riskId]/page.tsx
@@ -13,254 +13,221 @@ import { headers } from "next/headers";
 import { redirect } from "next/navigation";
 
 interface PageProps {
-	searchParams: Promise<{
-		search?: string;
-		status?: string;
-		sort?: string;
-		page?: string;
-		per_page?: string;
-	}>;
-	params: Promise<{ riskId: string; locale: string }>;
+  searchParams: Promise<{
+    search?: string;
+    status?: string;
+    sort?: string;
+    page?: string;
+    per_page?: string;
+  }>;
+  params: Promise<{ riskId: string; locale: string }>;
 }
 
 export default async function RiskPage({ searchParams, params }: PageProps) {
-	const { riskId } = await params;
-	const risk = await getRisk(riskId);
-
-	const assignees = await getAssignees();
-	const t = await getI18n();
-
-	const {
-		search,
-		status,
-		sort,
-		page = "1",
-		per_page = "5",
-	} = await searchParams;
-
-	const columnHeaders = await getServerColumnHeaders();
-	const [column, order] = sort?.split(":") ?? [];
-	const hasFilters = !!(search || status);
-	const { tasks: loadedTasks, total } = await getTasks({
-		riskId,
-		search,
-		status: status as TaskStatus,
-		column,
-		order,
-		page: Number.parseInt(page),
-		per_page: Number.parseInt(per_page),
-	});
-
-	if (!risk) {
-		redirect("/");
-	}
-
-	return (
-		<div className="flex flex-col gap-4">
-			<RiskOverview risk={risk} assignees={assignees} />
-
-			{/* <Card>
-				<CardHeader>
-					<CardTitle>
-						<div className="flex items-center justify-between gap-2">
-							{t("risk.tasks.title")}
-						</div>
-					</CardTitle>
-				</CardHeader>
-				<CardContent>
-					<div className="relative">
-						<FilterToolbar
-							isEmpty={loadedTasks.length === 0}
-							assignees={assignees}
-						/>
-						{loadedTasks.length > 0 ? (
-							<DataTable
-								columnHeaders={columnHeaders}
-								data={loadedTasks}
-								pageCount={Math.ceil(total / Number.parseInt(per_page))}
-								currentPage={Number.parseInt(page)}
-							/>
-						) : hasFilters ? (
-							<NoResults hasFilters={hasFilters} />
-						) : (
-							<>
-								<NoTasks isEmpty={true} />
-								<Loading isEmpty={true} amount={3} />
-							</>
-						)}
-					</div>
-				</CardContent>
-			</Card> */}
-
-			<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-				<InherentRiskChart risk={risk} />
-				<ResidualRiskChart risk={risk} />
-			</div>
-		</div>
-	);
+  const { riskId } = await params;
+  const risk = await getRisk(riskId);
+
+  const assignees = await getAssignees();
+  const t = await getI18n();
+
+  const {
+    search,
+    status,
+    sort,
+    page = "1",
+    per_page = "5",
+  } = await searchParams;
+
+  const columnHeaders = await getServerColumnHeaders();
+  const [column, order] = sort?.split(":") ?? [];
+  const hasFilters = !!(search || status);
+  const { tasks: loadedTasks, total } = await getTasks({
+    riskId,
+    search,
+    status: status as TaskStatus,
+    column,
+    order,
+    page: Number.parseInt(page),
+    per_page: Number.parseInt(per_page),
+  });
+
+  if (!risk) {
+    redirect("/");
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <RiskOverview risk={risk} assignees={assignees} />
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <InherentRiskChart risk={risk} />
+        <ResidualRiskChart risk={risk} />
+      </div>
+    </div>
+  );
 }
 
 async function getRisk(riskId: string) {
-	const session = await auth.api.getSession({
-		headers: await headers(),
-	});
-
-	if (!session || !session.session.activeOrganizationId) {
-		return null;
-	}
-
-	const risk = await db.risk.findUnique({
-		where: {
-			id: riskId,
-			organizationId: session.session.activeOrganizationId,
-		},
-		include: {
-			assignee: {
-				include: {
-					user: true,
-				},
-			},
-		},
-	});
-
-	return risk;
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  if (!session || !session.session.activeOrganizationId) {
+    return null;
+  }
+
+  const risk = await db.risk.findUnique({
+    where: {
+      id: riskId,
+      organizationId: session.session.activeOrganizationId,
+    },
+    include: {
+      assignee: {
+        include: {
+          user: true,
+        },
+      },
+    },
+  });
+
+  return risk;
 }
 
 async function getTasks({
-	riskId,
-	search,
-	status,
-	column,
-	order,
-	page = 1,
-	per_page = 10,
+  riskId,
+  search,
+  status,
+  column,
+  order,
+  page = 1,
+  per_page = 10,
 }: {
-	riskId: string;
-	search?: string;
-	status?: TaskStatus;
-	column?: string;
-	order?: string;
-	page?: number;
-	per_page?: number;
+  riskId: string;
+  search?: string;
+  status?: TaskStatus;
+  column?: string;
+  order?: string;
+  page?: number;
+  per_page?: number;
 }) {
-	const session = await auth.api.getSession({
-		headers: await headers(),
-	});
-
-	if (!session || !session.session.activeOrganizationId) {
-		return { tasks: [], total: 0 };
-	}
-
-	const skip = (page - 1) * per_page;
-
-	const [tasks, total] = await Promise.all([
-		db.task
-			.findMany({
-				where: {
-					relatedId: riskId,
-					relatedType: "risk",
-					organizationId: session.session.activeOrganizationId,
-					AND: [
-						search
-							? {
-									OR: [
-										{ title: { contains: search, mode: "insensitive" } },
-										{
-											description: { contains: search, mode: "insensitive" },
-										},
-									],
-								}
-							: {},
-						status ? { status } : {},
-					],
-				},
-				orderBy: column
-					? {
-							[column]: order === "asc" ? "asc" : "desc",
-						}
-					: {
-							createdAt: "desc",
-						},
-				skip,
-				take: per_page,
-				include: {
-					assignee: {
-						include: {
-							user: true,
-						},
-					},
-				},
-			})
-			.then((tasks) =>
-				tasks.map(
-					(task): RiskTaskType => ({
-						id: task.id,
-						riskId: task.relatedId,
-						title: task.title,
-						status: task.status,
-						dueDate: task.dueDate.toISOString(),
-						assigneeId: task.assigneeId,
-						assignee: {
-							name: task.assignee.user.name,
-							image: task.assignee.user.image ?? "",
-						},
-					}),
-				),
-			),
-		db.task.count({
-			where: {
-				relatedId: riskId,
-				relatedType: "risk",
-				organizationId: session.session.activeOrganizationId,
-				AND: [
-					search
-						? {
-								OR: [
-									{ title: { contains: search, mode: "insensitive" } },
-									{ description: { contains: search, mode: "insensitive" } },
-								],
-							}
-						: {},
-					status ? { status } : {},
-				],
-			},
-		}),
-	]);
-
-	return { tasks, total };
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  if (!session || !session.session.activeOrganizationId) {
+    return { tasks: [], total: 0 };
+  }
+
+  const skip = (page - 1) * per_page;
+
+  const [tasks, total] = await Promise.all([
+    db.task
+      .findMany({
+        where: {
+          relatedId: riskId,
+          relatedType: "risk",
+          organizationId: session.session.activeOrganizationId,
+          AND: [
+            search
+              ? {
+                OR: [
+                  { title: { contains: search, mode: "insensitive" } },
+                  {
+                    description: { contains: search, mode: "insensitive" },
+                  },
+                ],
+              }
+              : {},
+            status ? { status } : {},
+          ],
+        },
+        orderBy: column
+          ? {
+            [column]: order === "asc" ? "asc" : "desc",
+          }
+          : {
+            createdAt: "desc",
+          },
+        skip,
+        take: per_page,
+        include: {
+          assignee: {
+            include: {
+              user: true,
+            },
+          },
+        },
+      })
+      .then((tasks) =>
+        tasks.map(
+          (task): RiskTaskType => ({
+            id: task.id,
+            riskId: task.relatedId,
+            title: task.title,
+            status: task.status,
+            dueDate: task.dueDate.toISOString(),
+            assigneeId: task.assigneeId,
+            assignee: {
+              name: task.assignee.user.name,
+              image: task.assignee.user.image ?? "",
+            },
+          }),
+        ),
+      ),
+    db.task.count({
+      where: {
+        relatedId: riskId,
+        relatedType: "risk",
+        organizationId: session.session.activeOrganizationId,
+        AND: [
+          search
+            ? {
+              OR: [
+                { title: { contains: search, mode: "insensitive" } },
+                { description: { contains: search, mode: "insensitive" } },
+              ],
+            }
+            : {},
+          status ? { status } : {},
+        ],
+      },
+    }),
+  ]);
+
+  return { tasks, total };
 }
 
 async function getAssignees() {
-	const session = await auth.api.getSession({
-		headers: await headers(),
-	});
-
-	if (!session || !session.session.activeOrganizationId) {
-		return [];
-	}
-
-	const assignees = await db.member.findMany({
-		where: {
-			organizationId: session.session.activeOrganizationId,
-		},
-		include: {
-			user: true,
-		},
-	});
-
-	return assignees;
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  if (!session || !session.session.activeOrganizationId) {
+    return [];
+  }
+
+  const assignees = await db.member.findMany({
+    where: {
+      organizationId: session.session.activeOrganizationId,
+    },
+    include: {
+      user: true,
+    },
+  });
+
+  return assignees;
 }
 
 export async function generateMetadata({
-	params,
+  params,
 }: {
-	params: Promise<{ locale: string }>;
+  params: Promise<{ locale: string }>;
 }): Promise<Metadata> {
-	const { locale } = await params;
-	setStaticParamsLocale(locale);
-	const t = await getI18n();
+  const { locale } = await params;
+  setStaticParamsLocale(locale);
+  const t = await getI18n();
 
-	return {
-		title: t("risk.risk_overview"),
-	};
+  return {
+    title: t("risk.risk_overview"),
+  };
 }
diff --git a/apps/app/src/components/risks/charts/inherent-risk-chart.tsx b/apps/app/src/components/risks/charts/inherent-risk-chart.tsx
index 5c4ccebe9d..c8d2146cae 100644
--- a/apps/app/src/components/risks/charts/inherent-risk-chart.tsx
+++ b/apps/app/src/components/risks/charts/inherent-risk-chart.tsx
@@ -5,139 +5,137 @@ import { useI18n } from "@/locales/client";
 import type { Risk, Likelihood, Impact } from "@comp/db/types";
 import { Button } from "@comp/ui/button";
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
 } from "@comp/ui/card";
 import {
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
 } from "@comp/ui/chart";
 import { PencilIcon } from "lucide-react";
 import { useQueryState } from "nuqs";
 import {
-	PolarAngleAxis,
-	PolarGrid,
-	PolarRadiusAxis,
-	Radar,
-	RadarChart,
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart,
 } from "recharts";
 
 const likelihoodToNumber: Record<Likelihood, number> = {
-	very_unlikely: 1,
-	unlikely: 3,
-	possible: 5,
-	likely: 7,
-	very_likely: 10,
+  very_unlikely: 1,
+  unlikely: 3,
+  possible: 5,
+  likely: 7,
+  very_likely: 10,
 };
 
 const impactToNumber: Record<Impact, number> = {
-	insignificant: 1,
-	minor: 3,
-	moderate: 5,
-	major: 7,
-	severe: 10,
+  insignificant: 1,
+  minor: 3,
+  moderate: 5,
+  major: 7,
+  severe: 10,
 };
 
 interface InherentRiskChartProps {
-	risk: Risk;
+  risk: Risk;
 }
 
 export function InherentRiskChart({ risk }: InherentRiskChartProps) {
-	const t = useI18n();
-	const [open, setOpen] = useQueryState("inherent-risk-sheet");
+  const t = useI18n();
+  const [open, setOpen] = useQueryState("inherent-risk-sheet");
 
-	const probabilityScore = likelihoodToNumber[risk.likelihood] * 10;
-	const impactScore = impactToNumber[risk.impact] * 10;
-	const inherentRisk = (probabilityScore * impactScore) / 100;
+  const probabilityScore = likelihoodToNumber[risk.likelihood] * 10;
+  const impactScore = impactToNumber[risk.impact] * 10;
+  const inherentRisk = (probabilityScore * impactScore) / 100;
 
-	const data = [
-		{
-			metric: t("risk.metrics.probability"),
-			value: probabilityScore,
-			fullMark: 100,
-		},
-		{
-			metric: t("risk.metrics.impact"),
-			value: impactScore,
-			fullMark: 100,
-		},
-		{
-			metric: t("risk.metrics.inherentRisk"),
-			value: inherentRisk,
-			fullMark: 100,
-		},
-	];
+  const data = [
+    {
+      metric: t("risk.metrics.probability"),
+      value: probabilityScore,
+      fullMark: 100,
+    },
+    {
+      metric: t("risk.metrics.impact"),
+      value: impactScore,
+      fullMark: 100,
+    },
+    {
+      metric: t("risk.metrics.inherentRisk"),
+      value: inherentRisk,
+      fullMark: 100,
+    },
+  ];
 
-	const chartConfig = {
-		risk: {
-			label: t("risk.metrics.inherentRisk"),
-			theme: {
-				light: "#ef4444",
-				dark: "#dc2626",
-			},
-		},
-	};
+  const chartConfig = {
+    risk: {
+      label: t("risk.metrics.inherentRisk"),
+      theme: {
+        light: "#ef4444",
+        dark: "#dc2626",
+      },
+    },
+  };
 
-	return (
-		<Card>
-			<CardHeader>
-				<div className="flex justify-between items-center">
-					<div>
-						<CardTitle>
-							<div className="flex items-center justify-between gap-2">
-								{t("risk.metrics.inherentRisk")}
-								<Button
-									onClick={() => setOpen("true")}
-									size="icon"
-									variant="ghost"
-									className="p-0 m-0 size-auto"
-								>
-									<PencilIcon className="h-3 w-3" />
-								</Button>
-							</div>
-						</CardTitle>
-						<CardDescription className="text-xs">
-							{t("risk.dashboard.inherent_risk_description")}
-						</CardDescription>
-					</div>
-				</div>
-			</CardHeader>
-			<CardContent>
-				<ChartContainer config={chartConfig}>
-					<RadarChart data={data}>
-						<PolarGrid gridType="polygon" />
-						<PolarAngleAxis
-							dataKey="metric"
-							tick={{ fill: "currentColor", fontSize: 12 }}
-						/>
-						<PolarRadiusAxis
-							domain={[0, 100]}
-							tick={{ fill: "currentColor", fontSize: 12 }}
-						/>
-						<Radar
-							name="risk"
-							dataKey="value"
-							stroke="var(--color-risk)"
-							fill="var(--color-risk)"
-							fillOpacity={0.5}
-						/>
-						<ChartTooltip
-							cursor={false}
-							content={<ChartTooltipContent indicator="line" />}
-						/>
-					</RadarChart>
-				</ChartContainer>
-				<InherentRiskSheet
-					riskId={risk.id}
-					initialProbability={likelihoodToNumber[risk.likelihood]}
-					initialImpact={impactToNumber[risk.impact]}
-					onSuccess={() => setOpen(null)}
-				/>
-			</CardContent>
-		</Card>
-	);
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex justify-between items-center">
+          <div>
+            <CardTitle>
+              {t("risk.metrics.inherentRisk")}
+            </CardTitle>
+            <CardDescription className="text-xs">
+              {t("risk.dashboard.inherent_risk_description")}
+            </CardDescription>
+          </div>
+          <Button
+            onClick={() => setOpen("true")}
+            size="icon"
+            variant="ghost"
+            className="p-0 m-0 size-auto"
+          >
+            <PencilIcon className="h-4 w-4" />
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <RadarChart data={data}>
+            <PolarGrid gridType="polygon" />
+            <PolarAngleAxis
+              dataKey="metric"
+              tick={{ fill: "currentColor", fontSize: 12 }}
+            />
+            <PolarRadiusAxis
+              domain={[0, 100]}
+              tick={{ fill: "currentColor", fontSize: 12 }}
+            />
+            <Radar
+              name="risk"
+              dataKey="value"
+              stroke="var(--color-risk)"
+              fill="var(--color-risk)"
+              fillOpacity={0.5}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+          </RadarChart>
+        </ChartContainer>
+        <InherentRiskSheet
+          riskId={risk.id}
+          initialProbability={likelihoodToNumber[risk.likelihood]}
+          initialImpact={impactToNumber[risk.impact]}
+          onSuccess={() => setOpen(null)}
+        />
+      </CardContent>
+    </Card>
+  );
 }
diff --git a/apps/app/src/components/risks/charts/residual-risk-chart.tsx b/apps/app/src/components/risks/charts/residual-risk-chart.tsx
index deeb5bb085..e9078f1688 100644
--- a/apps/app/src/components/risks/charts/residual-risk-chart.tsx
+++ b/apps/app/src/components/risks/charts/residual-risk-chart.tsx
@@ -5,138 +5,136 @@ import { useI18n } from "@/locales/client";
 import type { Risk, Likelihood, Impact } from "@comp/db/types";
 import { Button } from "@comp/ui/button";
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
 } from "@comp/ui/card";
 import {
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
 } from "@comp/ui/chart";
 import { PencilIcon } from "lucide-react";
 import { useQueryState } from "nuqs";
 import {
-	PolarAngleAxis,
-	PolarGrid,
-	PolarRadiusAxis,
-	Radar,
-	RadarChart,
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart,
 } from "recharts";
 
 const likelihoodToNumber: Record<Likelihood, number> = {
-	very_unlikely: 1,
-	unlikely: 3,
-	possible: 5,
-	likely: 7,
-	very_likely: 10,
+  very_unlikely: 1,
+  unlikely: 3,
+  possible: 5,
+  likely: 7,
+  very_likely: 10,
 };
 
 const impactToNumber: Record<Impact, number> = {
-	insignificant: 1,
-	minor: 3,
-	moderate: 5,
-	major: 7,
-	severe: 10,
+  insignificant: 1,
+  minor: 3,
+  moderate: 5,
+  major: 7,
+  severe: 10,
 };
 
 interface ResidualRiskChartProps {
-	risk: Risk;
+  risk: Risk;
 }
 
 export function ResidualRiskChart({ risk }: ResidualRiskChartProps) {
-	const t = useI18n();
-	const [open, setOpen] = useQueryState("residual-risk-sheet");
+  const t = useI18n();
+  const [open, setOpen] = useQueryState("residual-risk-sheet");
 
-	const probabilityScore = likelihoodToNumber[risk.residualLikelihood] * 10;
-	const impactScore = impactToNumber[risk.residualImpact] * 10;
-	const residualRisk = (probabilityScore * impactScore) / 100;
+  const probabilityScore = likelihoodToNumber[risk.residualLikelihood] * 10;
+  const impactScore = impactToNumber[risk.residualImpact] * 10;
+  const residualRisk = (probabilityScore * impactScore) / 100;
 
-	const data = [
-		{
-			metric: t("risk.metrics.probability"),
-			value: probabilityScore,
-			fullMark: 100,
-		},
-		{
-			metric: t("risk.metrics.impact"),
-			value: impactScore,
-			fullMark: 100,
-		},
-		{
-			metric: t("risk.metrics.residualRisk"),
-			value: residualRisk,
-			fullMark: 100,
-		},
-	];
+  const data = [
+    {
+      metric: t("risk.metrics.probability"),
+      value: probabilityScore,
+      fullMark: 100,
+    },
+    {
+      metric: t("risk.metrics.impact"),
+      value: impactScore,
+      fullMark: 100,
+    },
+    {
+      metric: t("risk.metrics.residualRisk"),
+      value: residualRisk,
+      fullMark: 100,
+    },
+  ];
 
-	const chartConfig = {
-		risk: {
-			label: t("risk.metrics.residualRisk"),
-			theme: {
-				light: "#ef4444",
-				dark: "#dc2626",
-			},
-		},
-	};
+  const chartConfig = {
+    risk: {
+      label: t("risk.metrics.residualRisk"),
+      theme: {
+        light: "#ef4444",
+        dark: "#dc2626",
+      },
+    },
+  };
 
-	return (
-		<Card>
-			<CardHeader>
-				<div className="flex justify-between items-center">
-					<div>
-						<CardTitle>
-							<div className="flex items-center justify-between gap-2">
-								{t("risk.metrics.residualRisk")}
-								<Button
-									onClick={() => setOpen("true")}
-									size="icon"
-									variant="ghost"
-									className="p-0 m-0 size-auto"
-								>
-									<PencilIcon className="h-3 w-3" />
-								</Button>
-							</div>
-						</CardTitle>
-						<CardDescription className="text-xs">
-							{t("risk.dashboard.residual_risk_description")}
-						</CardDescription>
-					</div>
-				</div>
-			</CardHeader>
-			<CardContent>
-				<ChartContainer config={chartConfig}>
-					<RadarChart data={data}>
-						<PolarGrid gridType="polygon" />
-						<PolarAngleAxis
-							dataKey="metric"
-							tick={{ fill: "currentColor", fontSize: 12 }}
-						/>
-						<PolarRadiusAxis
-							domain={[0, 100]}
-							tick={{ fill: "currentColor", fontSize: 12 }}
-						/>
-						<Radar
-							name="risk"
-							dataKey="value"
-							stroke="var(--color-risk)"
-							fill="var(--color-risk)"
-							fillOpacity={0.5}
-						/>
-						<ChartTooltip
-							cursor={false}
-							content={<ChartTooltipContent indicator="line" />}
-						/>
-					</RadarChart>
-				</ChartContainer>
-				<ResidualRiskSheet
-					riskId={risk.id}
-					initialProbability={likelihoodToNumber[risk.residualLikelihood]}
-					initialImpact={impactToNumber[risk.residualImpact]}
-				/>
-			</CardContent>
-		</Card>
-	);
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex justify-between items-center">
+          <div>
+            <CardTitle>
+              {t("risk.metrics.residualRisk")}
+            </CardTitle>
+            <CardDescription className="text-xs">
+              {t("risk.dashboard.residual_risk_description")}
+            </CardDescription>
+          </div>
+          <Button
+            onClick={() => setOpen("true")}
+            size="icon"
+            variant="ghost"
+            className="p-0 m-0 size-auto"
+          >
+            <PencilIcon className="h-4 w-4" />
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <RadarChart data={data}>
+            <PolarGrid gridType="polygon" />
+            <PolarAngleAxis
+              dataKey="metric"
+              tick={{ fill: "currentColor", fontSize: 12 }}
+            />
+            <PolarRadiusAxis
+              domain={[0, 100]}
+              tick={{ fill: "currentColor", fontSize: 12 }}
+            />
+            <Radar
+              name="risk"
+              dataKey="value"
+              stroke="var(--color-risk)"
+              fill="var(--color-risk)"
+              fillOpacity={0.5}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+          </RadarChart>
+        </ChartContainer>
+        <ResidualRiskSheet
+          riskId={risk.id}
+          initialProbability={likelihoodToNumber[risk.residualLikelihood]}
+          initialImpact={impactToNumber[risk.residualImpact]}
+        />
+      </CardContent>
+    </Card>
+  );
 }