diff --git a/src/components/user-multistep-form/add-project-form.tsx b/src/components/user-multistep-form/add-project-form.tsx
index 6986156b..9af65552 100644
--- a/src/components/user-multistep-form/add-project-form.tsx
+++ b/src/components/user-multistep-form/add-project-form.tsx
@@ -31,7 +31,11 @@ import { FaFileUpload } from 'react-icons/fa';
 import Image from 'next/image';
 import { X } from 'lucide-react';
 
-export const AddProject = () => {
+interface AddProjectsProp {
+  onClose?: () => void;
+}
+
+export const AddProject = ({ onClose }: AddProjectsProp) => {
   const form = useForm<projectSchemaType>({
     resolver: zodResolver(projectSchema),
     defaultValues: {
@@ -133,6 +137,7 @@ export const AddProject = () => {
       });
       setPreviewImg(null);
       form.reset(form.formState.defaultValues);
+      onClose?.();
     } catch (_error) {
       toast({
         title: 'Something went wrong while Adding Projects',
diff --git a/src/components/user-multistep-form/add-resume-form.tsx b/src/components/user-multistep-form/add-resume-form.tsx
index 45359a03..53558ed7 100644
--- a/src/components/user-multistep-form/add-resume-form.tsx
+++ b/src/components/user-multistep-form/add-resume-form.tsx
@@ -7,7 +7,11 @@ import { uploadFileAction } from '@/actions/upload-to-cdn';
 import { addUserResume } from '@/actions/user.profile.actions';
 import { LoadingSpinner } from '../loading-spinner';
 
-export const AddResume = () => {
+interface AddResumeProps {
+  onClose?: () => void;
+}
+
+export const AddResume = ({ onClose }: AddResumeProps) => {
   const resumeFileRef = useRef<HTMLInputElement>(null);
   const [file, setFile] = useState<File | null>(null);
   const [fileName, setFileName] = useState<string | null>(null);
@@ -84,6 +88,7 @@ export const AddResume = () => {
             variant: 'destructive',
           });
         }
+        onClose?.();
         return toast({
           title: response.message,
           variant: 'success',
diff --git a/src/components/user-multistep-form/addExperience-form.tsx b/src/components/user-multistep-form/addExperience-form.tsx
index c9e3f97b..aa817f45 100644
--- a/src/components/user-multistep-form/addExperience-form.tsx
+++ b/src/components/user-multistep-form/addExperience-form.tsx
@@ -31,7 +31,11 @@ import { useToast } from '../ui/use-toast';
 import { LoadingSpinner } from '../loading-spinner';
 import { useState } from 'react';
 
-export const AddExperience = () => {
+interface AddExperienceProps {
+  onClose?: () => void;
+}
+
+export const AddExperience = ({ onClose }: AddExperienceProps) => {
   const form = useForm<expFormSchemaType>({
     resolver: zodResolver(expFormSchema),
     defaultValues: {
@@ -65,6 +69,7 @@ export const AddExperience = () => {
         variant: 'success',
       });
       form.reset(form.formState.defaultValues);
+      onClose?.();
     } catch (_error) {
       toast({
         title: 'Something went wrong while Adding Experience',
diff --git a/src/components/user-multistep-form/user-multistep-form.tsx b/src/components/user-multistep-form/user-multistep-form.tsx
index e4e60dc8..9d8506cf 100644
--- a/src/components/user-multistep-form/user-multistep-form.tsx
+++ b/src/components/user-multistep-form/user-multistep-form.tsx
@@ -54,6 +54,7 @@ const forms = [
 export default function VerticalLinearStepper() {
   const router = useRouter();
   const [activeStep, setActiveStep] = useState(0);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
 
   const handleNext = () => {
     setActiveStep((prevActiveStep) => prevActiveStep + 1);
@@ -111,7 +112,7 @@ export default function VerticalLinearStepper() {
             <StepContent>
               {form.description}
               <Box sx={{ mb: 2 }}>
-                <Dialog>
+                <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
                   <DialogTrigger asChild>
                     <Button
                       variant="contained"
@@ -126,7 +127,7 @@ export default function VerticalLinearStepper() {
                       <DialogTitle>{form.label}</DialogTitle>
                     </DialogHeader>
                     <div className="flex-grow overflow-y-auto px-6 pb-6">
-                      <form.component />
+                      <form.component onClose={() => setIsDialogOpen(false)} />
                     </div>
                   </DialogContent>
                 </Dialog>