diff --git a/src/components/Helpers/ModalCom.jsx b/src/components/Helpers/ModalCom.jsx
index 1635a45..eee01f3 100644
--- a/src/components/Helpers/ModalCom.jsx
+++ b/src/components/Helpers/ModalCom.jsx
@@ -16,7 +16,7 @@ export default function ModalCom({ action, children, situation, isOpen, classNam
         onClick={action || isOpen}
         className="fixed top-0 left-0 w-full lg:h-[100vh] h-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50"
       ></div>
-      <div className={`children-element fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto ${className}`}>
+      <div className={`fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto inset-0 flex flex-col justify-center items-center ${className}`}>
         {children && children}
       </div>
     </div>
diff --git a/src/components/Partials/Layout.jsx b/src/components/Partials/Layout.jsx
index 6bd8c47..dab7137 100644
--- a/src/components/Partials/Layout.jsx
+++ b/src/components/Partials/Layout.jsx
@@ -87,7 +87,7 @@ export default function Layout({ children }) {
       </div>
       {logoutModal && (
         <ModalCom action={logoutModalHandler} situation={logoutModal}>
-          <div className="logout-modal-wrapper lg:w-[460px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+          <div className="logout-modal-wrapper w-11/12 sm:w-[460px] bg-white dark:bg-dark-white lg:rounded-2xl">
             <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
               <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
                 Confirm
diff --git a/src/components/jobPopout/DeleteJobPopout.jsx b/src/components/jobPopout/DeleteJobPopout.jsx
index 5c8e1ff..edaf481 100644
--- a/src/components/jobPopout/DeleteJobPopout.jsx
+++ b/src/components/jobPopout/DeleteJobPopout.jsx
@@ -63,7 +63,7 @@ function DeleteJobPopout({ details, onClose, situation }) {
 
   return (
     <ModalCom action={onClose} situation={situation}>
-      <div className="logout-modal-wrapper lg:w-[600px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+      <div className="logout-modal-wrapper lg:w-[600px] bg-white dark:bg-dark-white lg:rounded-2xl">
         <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Delete Job
diff --git a/src/components/jobPopout/EditJobPopout.jsx b/src/components/jobPopout/EditJobPopout.jsx
index e68d5ad..a10fca3 100644
--- a/src/components/jobPopout/EditJobPopout.jsx
+++ b/src/components/jobPopout/EditJobPopout.jsx
@@ -215,8 +215,8 @@ const EditJobPopOut = ({
   const isWindows = /Windows/.test(navigator.userAgent);
 
   return (
-    <ModalCom action={onClose} situation={situation} className="edit-popup">
-      <div className="logout-modal-wrapper lg:w-[600px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+    <ModalCom action={onClose} situation={situation}>
+      <div className="logout-modal-wrapper w-11/12 lg:w-[600px] bg-white dark:bg-dark-white lg:rounded-2xl">
         <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Edit Job
diff --git a/src/components/jobPopout/JobListPopout.jsx b/src/components/jobPopout/JobListPopout.jsx
index 46f0546..6f42135 100644
--- a/src/components/jobPopout/JobListPopout.jsx
+++ b/src/components/jobPopout/JobListPopout.jsx
@@ -218,8 +218,8 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
 
   // console.log("Job List P >> ", details)
   return (
-    <ModalCom action={onClose} situation={situation} className="job-popup">
-      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+    <ModalCom action={onClose} situation={situation} className="">
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide">
             {details.title}
diff --git a/src/components/jobPopout/PendingJobsPopout.jsx b/src/components/jobPopout/PendingJobsPopout.jsx
index 9de71fb..258bf84 100644
--- a/src/components/jobPopout/PendingJobsPopout.jsx
+++ b/src/components/jobPopout/PendingJobsPopout.jsx
@@ -133,8 +133,8 @@ function PendingJobsPopout({ details, onClose, situation }) {
   };
 
   return (
-    <ModalCom action={onClose} situation={situation} className="edit-popup">
-      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+    <ModalCom action={onClose} situation={situation}>
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Manage Pending Item
diff --git a/src/views/AddJobPage.jsx b/src/views/AddJobPage.jsx
index 5c89ddf..b6f336c 100644
--- a/src/views/AddJobPage.jsx
+++ b/src/views/AddJobPage.jsx
@@ -4,8 +4,8 @@ import ModalCom from "../components/Helpers/ModalCom";
 
 function AddJobPage({ action, situation, categories }) {
   return (
-    <ModalCom action={action} situation={situation} className="edit-popup">
-      <div className="lg:w-[600px] w-full lg:overflow-hidden lg:rounded-2xl bg-white dark:bg-dark-white dark:text-white">
+    <ModalCom action={action} situation={situation}>
+      <div className="lg:w-[600px] w-11/12 lg:overflow-hidden lg:rounded-2xl bg-white dark:bg-dark-white dark:text-white">
         <div className="heading flex justify-between items-center py-6  md:px-[30px] px-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
           <p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Create New Job