diff --git a/frontend/src/pages/cert-manager/DashboardPage/components/PqcReadinessChart.tsx b/frontend/src/pages/cert-manager/DashboardPage/components/PqcReadinessChart.tsx
index 8389a618f17..9b0f4dc4eb8 100644
--- a/frontend/src/pages/cert-manager/DashboardPage/components/PqcReadinessChart.tsx
+++ b/frontend/src/pages/cert-manager/DashboardPage/components/PqcReadinessChart.tsx
@@ -1,14 +1,14 @@
 import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip as RechartsTooltip } from "recharts";
 
 import {
-  UnstableCard,
-  UnstableCardContent,
-  UnstableCardDescription,
-  UnstableCardHeader,
-  UnstableCardTitle,
-  UnstableEmpty,
-  UnstableEmptyHeader,
-  UnstableEmptyTitle
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Empty,
+  EmptyHeader,
+  EmptyTitle
 } from "@app/components/v3";
 import type { TDashboardStats } from "@app/hooks/api/certificates";
 import { isPqcAlgorithm } from "@app/hooks/api/certificates/constants";
@@ -43,20 +43,20 @@ export const PqcReadinessChart = ({ stats, onNavigate }: Props) => {
   };
 
   return (
-    <UnstableCard className="flex h-auto w-full min-w-[280px] shrink-0 flex-col md:w-[320px]">
-      <UnstableCardHeader className="pb-0">
-        <UnstableCardTitle className="text-base font-semibold">PQC Readiness</UnstableCardTitle>
-        <UnstableCardDescription className="text-xs">
+    <Card className="flex h-auto w-full min-w-[280px] shrink-0 flex-col md:w-[320px]">
+      <CardHeader className="pb-0">
+        <CardTitle className="text-base font-semibold">PQC Readiness</CardTitle>
+        <CardDescription className="text-xs">
           Post-quantum vs. classical key algorithms
-        </UnstableCardDescription>
-      </UnstableCardHeader>
-      <UnstableCardContent className="flex flex-1 items-center pt-2">
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-1 items-center pt-2">
         {nonZeroData.length === 0 ? (
-          <UnstableEmpty className="h-[200px]">
-            <UnstableEmptyHeader>
-              <UnstableEmptyTitle>No data available</UnstableEmptyTitle>
-            </UnstableEmptyHeader>
-          </UnstableEmpty>
+          <Empty className="h-[200px]">
+            <EmptyHeader>
+              <EmptyTitle>No data available</EmptyTitle>
+            </EmptyHeader>
+          </Empty>
         ) : (
           <div className="flex w-full items-center gap-3">
             <div className="w-[120px] shrink-0">
@@ -141,7 +141,7 @@ export const PqcReadinessChart = ({ stats, onNavigate }: Props) => {
             </div>
           </div>
         )}
-      </UnstableCardContent>
-    </UnstableCard>
+      </CardContent>
+    </Card>
   );
 };
diff --git a/frontend/src/pages/cert-manager/DashboardPage/components/PqcTrend.tsx b/frontend/src/pages/cert-manager/DashboardPage/components/PqcTrend.tsx
index de8adffa892..110f49d4df4 100644
--- a/frontend/src/pages/cert-manager/DashboardPage/components/PqcTrend.tsx
+++ b/frontend/src/pages/cert-manager/DashboardPage/components/PqcTrend.tsx
@@ -11,14 +11,14 @@ import {
 
 import {
   Button,
-  UnstableCard,
-  UnstableCardAction,
-  UnstableCardContent,
-  UnstableCardHeader,
-  UnstableCardTitle,
-  UnstableEmpty,
-  UnstableEmptyHeader,
-  UnstableEmptyTitle
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Empty,
+  EmptyHeader,
+  EmptyTitle
 } from "@app/components/v3";
 import type { TPqcTrendPoint } from "@app/hooks/api/certificates";
 
@@ -50,10 +50,10 @@ const renderLegend = (value: string) => (
 export const PqcTrend = ({ data, onRangeChange, currentRange }: Props) => {
   const hasAnyData = data.some((d) => d.pqc > 0 || d.nonPqc > 0);
   return (
-    <UnstableCard className="h-auto w-full flex-1 md:w-auto">
-      <UnstableCardHeader>
-        <UnstableCardTitle>PQC Adoption Trend</UnstableCardTitle>
-        <UnstableCardAction>
+    <Card className="h-auto w-full flex-1 md:w-auto">
+      <CardHeader>
+        <CardTitle>PQC Adoption Trend</CardTitle>
+        <CardAction>
           <div className="flex gap-0.5">
             {ranges.map((r) => (
               <Button
@@ -66,15 +66,15 @@ export const PqcTrend = ({ data, onRangeChange, currentRange }: Props) => {
               </Button>
             ))}
           </div>
-        </UnstableCardAction>
-      </UnstableCardHeader>
-      <UnstableCardContent>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
         {!hasAnyData ? (
-          <UnstableEmpty className="h-[250px]">
-            <UnstableEmptyHeader>
-              <UnstableEmptyTitle>No certificates issued in this period</UnstableEmptyTitle>
-            </UnstableEmptyHeader>
-          </UnstableEmpty>
+          <Empty className="h-[250px]">
+            <EmptyHeader>
+              <EmptyTitle>No certificates issued in this period</EmptyTitle>
+            </EmptyHeader>
+          </Empty>
         ) : (
           <ResponsiveContainer width="100%" height={250}>
             <LineChart data={data} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
@@ -123,7 +123,7 @@ export const PqcTrend = ({ data, onRangeChange, currentRange }: Props) => {
             </LineChart>
           </ResponsiveContainer>
         )}
-      </UnstableCardContent>
-    </UnstableCard>
+      </CardContent>
+    </Card>
   );
 };