diff --git a/apps/dashboard/src/components/ui/dialog.tsx b/apps/dashboard/src/components/ui/dialog.tsx
index dcdb0e27..2f430e90 100644
--- a/apps/dashboard/src/components/ui/dialog.tsx
+++ b/apps/dashboard/src/components/ui/dialog.tsx
@@ -39,7 +39,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
         className,
         'max-h-screen overflow-y-auto', // Ensure the dialog is scrollable if it exceeds the screen height
         'mt-auto', // Add margin-top: auto for all screen sizes
diff --git a/apps/dashboard/src/components/ui/sheet.tsx b/apps/dashboard/src/components/ui/sheet.tsx
index c86c949c..e7143424 100644
--- a/apps/dashboard/src/components/ui/sheet.tsx
+++ b/apps/dashboard/src/components/ui/sheet.tsx
@@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  'fixed z-50 flex flex-col gap-4 overflow-y-auto rounded-lg bg-card p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out max-sm:w-[calc(100%-theme(spacing.8))]',
+  'fixed z-50 flex flex-col gap-4 overflow-y-auto rounded-lg bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out max-sm:w-[calc(100%-theme(spacing.8))]',
   {
     variants: {
       side: {
@@ -70,7 +70,7 @@ const SheetContent = React.forwardRef<
       <SheetPrimitive.Close id="close-sheet" className="hidden" />
       <SheetPrimitive.Close
         onClick={onClose}
-        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-def-100"
+        className="absolute right-4 top-6 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-def-100"
       >
         <XIcon className="h-4 w-4" />
         <span className="sr-only">Close</span>
@@ -91,13 +91,7 @@ const SheetHeader = ({
       className,
     )}
     {...props}
-    style={{
-      backgroundImage: `url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(2) rotate(85)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 100%, 0)'/><path d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z'  stroke-width='0.5' stroke='hsla(259, 0%, 52%, 0.46)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>")`,
-      backgroundSize: '100% 100%',
-      backgroundRepeat: 'repeat',
-    }}
   >
-    <div className="absolute inset-0 bg-gradient-to-r from-def-100/95 to-def-100/80" />
     <div className="row relative w-full items-start justify-between">
       {children}
     </div>
@@ -125,7 +119,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
-    className={cn('text-3xl font-bold text-foreground', className)}
+    className={cn('text-2xl font-semibold text-foreground', className)}
     {...props}
   />
 ));
diff --git a/apps/dashboard/src/modals/Modal/Container.tsx b/apps/dashboard/src/modals/Modal/Container.tsx
index 4626b963..81518ca9 100644
--- a/apps/dashboard/src/modals/Modal/Container.tsx
+++ b/apps/dashboard/src/modals/Modal/Container.tsx
@@ -32,21 +32,18 @@ export function ModalHeader({
   return (
     <div
       className={cn(
-        'relative -m-6 mb-6 flex justify-between rounded-t-lg border-b bg-def-100 p-6',
+        'relative -m-6 mb-6 flex justify-between rounded-t-lg bg-gradient-to-b from-def-300 to-background p-6 pb-0',
         className,
       )}
-      style={{
-        backgroundImage: `url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(2) rotate(85)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 100%, 0)'/><path d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z'  stroke-width='0.5' stroke='hsla(259, 0%, 52%, 0.46)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>")`,
-        backgroundSize: '100% 100%',
-        backgroundRepeat: 'repeat',
-      }}
+      style={{}}
     >
-      <div className="absolute inset-0 bg-gradient-to-r from-def-100/95 to-def-100/80" />
-      <div className="row relative w-full items-start justify-between">
+      <div className="row relative w-full items-start justify-between gap-4">
         <div className="col mt-1 flex-1 gap-2">
-          <div className="text-3xl font-semibold">{title}</div>
+          <div className="text-xl font-semibold">{title}</div>
           {!!text && (
-            <div className="text-lg text-muted-foreground">{text}</div>
+            <div className="text-lg text-muted-foreground leading-normal">
+              {text}
+            </div>
           )}
         </div>
         {onClose !== false && (