diff --git a/apps/forge/src/routes/_authenticated/training/$id.tsx b/apps/forge/src/routes/_authenticated/training/$id.tsx
index 5c5d08d..2266020 100644
--- a/apps/forge/src/routes/_authenticated/training/$id.tsx
+++ b/apps/forge/src/routes/_authenticated/training/$id.tsx
@@ -1,6 +1,7 @@
 import axiosInstance from "@/api/axiosInstance";
 import Title from "@/components/title";
-import { extractError, toTitleCase } from "@/lib/utils";
+import { TrainingHeader } from "@/components/training/TrainingHeader";
+import { extractError, trainingBadges } from "@/lib/utils";
 import { get } from "@/services/training/get";
 import type { InteractionResponse, Training } from "@ignis/types/training";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
@@ -8,6 +9,7 @@ import { useQuery } from "@tanstack/react-query";
 import { createFileRoute, notFound, useNavigate } from "@tanstack/react-router";
 import { Alert, AlertDescription, AlertTitle } from "@ui/components/ui/alert";
 import { Badge } from "@ui/components/ui/badge";
+import { Button } from "@ui/components/ui/button";
 import { Checkbox } from "@ui/components/ui/checkbox";
 import { Label } from "@ui/components/ui/label";
 import { Loader } from "@ui/components/ui/loader";
@@ -152,7 +154,7 @@ const Component: React.FC = () => {
         <div className="container space-y-4 px-4 md:px-6">
           <div className="space-y-2">
             <h1 className="text-4xl font-bold text-center">{data.name}</h1>
-            <TrainingHeader />
+            <TrainingHeader data={data} />
             <TrainingContent content={data.description} />
             <br />
             {sections.map((section, idx) => (