diff --git a/Client/src/Components/Dialog/genericDialog.jsx b/Client/src/Components/Dialog/genericDialog.jsx
new file mode 100644
index 000000000..2807b2e8c
--- /dev/null
+++ b/Client/src/Components/Dialog/genericDialog.jsx
@@ -0,0 +1,45 @@
+import { Modal, Stack } from "@mui/material";
+import PropTypes from "prop-types";
+const GenericDialog = ({ title, description, open, onClose, theme, children }) => {
+	return (
+		<Modal
+			aria-labelledby={title}
+			aria-describedby={description}
+			open={open}
+			onClose={onClose}
+		>
+			<Stack
+				gap={theme.spacing(2)}
+				sx={{
+					position: "absolute",
+					top: "50%",
+					left: "50%",
+					transform: "translate(-50%, -50%)",
+					width: 400,
+					bgcolor: theme.palette.background.main,
+					border: 1,
+					borderColor: theme.palette.border.light,
+					borderRadius: theme.shape.borderRadius,
+					boxShadow: 24,
+					p: theme.spacing(15),
+					"&:focus": {
+						outline: "none",
+					},
+				}}
+			>
+				{children}
+			</Stack>
+		</Modal>
+	);
+};
+
+GenericDialog.propTypes = {
+	title: PropTypes.string.isRequired,
+	description: PropTypes.string.isRequired,
+	open: PropTypes.bool.isRequired,
+	onClose: PropTypes.func.isRequired,
+	theme: PropTypes.object.isRequired,
+	children: PropTypes.element.isRequired,
+};
+
+export { GenericDialog };
diff --git a/Client/src/Components/Dialog/index.jsx b/Client/src/Components/Dialog/index.jsx
index 55ec801d7..d87baa42a 100644
--- a/Client/src/Components/Dialog/index.jsx
+++ b/Client/src/Components/Dialog/index.jsx
@@ -1,6 +1,7 @@
 import LoadingButton from "@mui/lab/LoadingButton";
-import { Button, Modal, Stack, Typography } from "@mui/material";
+import { Button, Stack, Typography } from "@mui/material";
 import PropTypes from "prop-types";
+import { GenericDialog } from "./genericDialog";
 const Dialog = ({
 	modelTitle,
 	modelDescription,
@@ -16,72 +17,53 @@ const Dialog = ({
 	description,
 }) => {
 	return (
-		<Modal
-			aria-labelledby={modelTitle}
-			aria-describedby={modelDescription}
+		<GenericDialog
+			title={modelTitle}
+			description={modelDescription}
 			open={open}
-			onClose={onClose}
+			close={onClose}
+			theme={theme}
 		>
-			<Stack
-				gap={theme.spacing(2)}
-				sx={{
-					position: "absolute",
-					top: "50%",
-					left: "50%",
-					transform: "translate(-50%, -50%)",
-					width: 400,
-					bgcolor: theme.palette.background.main,
-					border: 1,
-					borderColor: theme.palette.border.light,
-					borderRadius: theme.shape.borderRadius,
-					boxShadow: 24,
-					p: theme.spacing(15),
-					"&:focus": {
-						outline: "none",
-					},
-				}}
+			<Typography
+				id={modelTitle}
+				component="h2"
+				fontSize={16}
+				color={theme.palette.text.primary}
+				fontWeight={600}
 			>
+				{title}
+			</Typography>
+			{description && (
 				<Typography
-					id={modelTitle}
-					component="h2"
-					fontSize={16}
-					color={theme.palette.text.primary}
-					fontWeight={600}
+					id={modelDescription}
+					color={theme.palette.text.tertiary}
 				>
-					{title}
+					{description}
 				</Typography>
-				{description && (
-					<Typography
-						id={modelDescription}
-						color={theme.palette.text.tertiary}
-					>
-						{description}
-					</Typography>
-				)}
-				<Stack
-					direction="row"
-					gap={theme.spacing(4)}
-					mt={theme.spacing(12)}
-					justifyContent="flex-end"
+			)}
+			<Stack
+				direction="row"
+				gap={theme.spacing(4)}
+				mt={theme.spacing(12)}
+				justifyContent="flex-end"
+			>
+				<Button
+					variant="text"
+					color="info"
+					onClick={cancelBtnOnClick}
 				>
-					<Button
-						variant="text"
-						color="info"
-						onClick={cancelBtnOnClick}
-					>
-						{cancelBtnLbl}
-					</Button>
-					<LoadingButton
-						variant="contained"
-						color="error"
-						loading={isLoading}
-						onClick={confirmationBtnOnClick}
-					>
-						{confirmationBtnLbl}
-					</LoadingButton>
-				</Stack>
+					{cancelBtnLbl}
+				</Button>
+				<LoadingButton
+					variant="contained"
+					color="error"
+					loading={isLoading}
+					onClick={confirmationBtnOnClick}
+				>
+					{confirmationBtnLbl}
+				</LoadingButton>
 			</Stack>
-		</Modal>
+		</GenericDialog>
 	);
 };