diff --git a/apps/client-ts/src/app/(Dashboard)/api-keys/page.tsx b/apps/client-ts/src/app/(Dashboard)/api-keys/page.tsx
index 10b785594..6035e36d6 100644
--- a/apps/client-ts/src/app/(Dashboard)/api-keys/page.tsx
+++ b/apps/client-ts/src/app/(Dashboard)/api-keys/page.tsx
@@ -16,7 +16,6 @@ import {
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -35,8 +34,7 @@ import * as z from "zod"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 import { DataTableLoading } from "@/components/shared/data-table-loading";
-import { Heading } from "@/components/ui/heading";
-import Cookies from 'js-cookie';
+import {CustomHeading}  from "@/components/shared/custom-heading";
 
 const formSchema = z.object({
   apiKeyIdentifier: z.string().min(2, {
@@ -121,7 +119,7 @@ export default function Page() {
     <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
       <div className="flex-1 space-y-4 p-8 pt-6">
         <div className="flex flex-col items-start justify-between space-y-2">
-          <Heading
+          <CustomHeading
           title="API Keys"
           description={
             <>
diff --git a/apps/client-ts/src/app/(Dashboard)/configuration/page.tsx b/apps/client-ts/src/app/(Dashboard)/configuration/page.tsx
index bec142a15..ebed26bc0 100644
--- a/apps/client-ts/src/app/(Dashboard)/configuration/page.tsx
+++ b/apps/client-ts/src/app/(Dashboard)/configuration/page.tsx
@@ -180,7 +180,7 @@ export default function Page() {
                     <CardTitle className="text-left">Your Fields Mapping</CardTitle>
                     <CardDescription className="text-left">
                       You built {mappings ? mappings.length : <Skeleton className="w-[20px] h-[12px] rounded-md" />} fields mappings.
-                        <a href="https://docs.panora.dev/core-concepts/custom-fields" target="_blank" rel="noopener noreferrer"><strong> Learn more about custom field mappings</strong></a>
+                        <a href="https://docs.panora.dev/core-concepts/custom-fields" target="_blank" rel="noopener noreferrer">Learn more about custom field mappings</a>
                     </CardDescription>
                   </CardHeader>
                   <Separator className="mb-10"/>
diff --git a/apps/client-ts/src/components/shared/custom-heading.tsx b/apps/client-ts/src/components/shared/custom-heading.tsx
new file mode 100644
index 000000000..197f6ff97
--- /dev/null
+++ b/apps/client-ts/src/components/shared/custom-heading.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+
+interface HeadingProps {
+    title: string;
+    description: ReactNode;
+}
+
+export const CustomHeading: React.FC<HeadingProps> = ({ title, description }) => {
+    return (
+      <div>
+        <h2 className="text-3xl font-bold tracking-tight">{title}</h2>
+        <p className="text-sm text-muted-foreground">{description}</p>
+      </div>
+    );
+  };
+  
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 423daea8f..83a3e04db 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -376,7 +376,7 @@ importers:
         specifier: ^0.5.1
         version: 0.5.1
       class-validator:
-        specifier: ^0.14.1
+        specifier: ^0.14.0
         version: 0.14.1
       cookie-parser:
         specifier: ^1.4.6