diff --git a/ui/components/overview/index.ts b/ui/components/overview/index.ts
index e2beebb034..1495506fc1 100644
--- a/ui/components/overview/index.ts
+++ b/ui/components/overview/index.ts
@@ -6,3 +6,5 @@ export * from "./findings-by-status-chart/skeleton-findings-status-chart";
export * from "./new-findings-table/link-to-findings/link-to-findings";
export * from "./provider-overview/provider-overview";
export * from "./provider-overview/skeleton-provider-overview";
+export * from "./radar-chart-with-selection";
+export * from "./scatter-plot-with-selection";
diff --git a/ui/components/overview/radar-chart-with-selection.tsx b/ui/components/overview/radar-chart-with-selection.tsx
new file mode 100644
index 0000000000..28e489d602
--- /dev/null
+++ b/ui/components/overview/radar-chart-with-selection.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { RadarChart } from "@/components/graphs";
+
+interface RadarChartWithSelectionProps {
+ percentage?: number;
+ label?: string;
+ color?: string;
+ height?: number;
+}
+
+export function RadarChartWithSelection({
+ percentage = 78,
+ label = "Overall Compliance",
+ color = "var(--chart-success-color)",
+ height = 350,
+}: RadarChartWithSelectionProps) {
+ return (
+
+ );
+}
diff --git a/ui/components/overview/scatter-plot-with-selection.tsx b/ui/components/overview/scatter-plot-with-selection.tsx
new file mode 100644
index 0000000000..558eaac37e
--- /dev/null
+++ b/ui/components/overview/scatter-plot-with-selection.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { ScatterPlot } from "@/components/graphs";
+
+interface DataPoint {
+ x: number;
+ y: number;
+ provider: string;
+ name: string;
+ size: number;
+}
+
+interface ScatterPlotWithSelectionProps {
+ data: DataPoint[];
+ height?: number;
+ xLabel?: string;
+ yLabel?: string;
+}
+
+export function ScatterPlotWithSelection({
+ data,
+ height = 400,
+ xLabel = "Risk Score",
+ yLabel = "Compliance %",
+}: ScatterPlotWithSelectionProps) {
+ return (
+
+ );
+}