diff --git a/apps/web/core/components/settings/heading.tsx b/apps/web/core/components/settings/heading.tsx
index 620801d33..b9b332c7a 100644
--- a/apps/web/core/components/settings/heading.tsx
+++ b/apps/web/core/components/settings/heading.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@plane/ui";
+import { Button, cn } from "@plane/ui";
 
 type Props = {
   title: string | React.ReactNode;
@@ -10,6 +10,7 @@ type Props = {
     label: string;
     onClick: () => void;
   };
+  className?: string;
 };
 
 export const SettingsHeading = ({
@@ -19,8 +20,14 @@ export const SettingsHeading = ({
   appendToRight,
   customButton,
   showButton = true,
+  className,
 }: Props) => (
-  <div className="flex flex-col md:flex-row gap-2 items-start md:items-center justify-between border-b border-custom-border-100 pb-3.5">
+  <div
+    className={cn(
+      "flex flex-col md:flex-row gap-2 items-start md:items-center justify-between border-b border-custom-border-100 pb-3.5",
+      className
+    )}
+  >
     <div className="flex flex-col items-start gap-1">
       {typeof title === "string" ? <h3 className="text-xl font-medium">{title}</h3> : title}
       {description && <div className="text-sm text-custom-text-300">{description}</div>}