diff --git a/src/components/JobGroups/AddGroup.jsx b/src/components/JobGroups/AddGroup.jsx
index 10525de..c6f5379 100644
--- a/src/components/JobGroups/AddGroup.jsx
+++ b/src/components/JobGroups/AddGroup.jsx
@@ -135,28 +135,6 @@ export default function AddGroup({ action, situation, setUpdateList }) {
               />
             </div>
           </div>
-          <div className="w-full flex justify-between items-center gap-4">
-            <button
-              onClick={action}
-              type="button"
-              className="w-[152px] h-[46px] flex justify-center items-center rounded-full text-base text-light-red tracking-wide border border-light-red"
-            >
-              <span className="">
-                Cancel
-              </span>
-            </button>
-            {requestStatus.loading ? (
-              <LoadingSpinner size="8" color="sky-blue" />
-            ) : (
-              <button
-                onClick={() => addGroup()}
-                type="button"
-                className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-              >
-                Add Group
-              </button>
-            )}
-          </div>
 
           {/* ERROR DISPLAY AND SUBMIT BUTTON */}
           {requestStatus.message != "" &&
@@ -177,6 +155,29 @@ export default function AddGroup({ action, situation, setUpdateList }) {
             ))}
           {/* End of error or success display */}
         </div>
+
+        <div className="modal-footer-wrapper">
+            <button
+              onClick={action}
+              type="button"
+              className="custom-btn text-light-red border border-light-red"
+            >
+              <span className="">
+                Cancel
+              </span>
+            </button>
+            {requestStatus.loading ? (
+              <LoadingSpinner size="8" color="sky-blue" />
+            ) : (
+              <button
+                onClick={() => addGroup()}
+                type="button"
+                className="custom-btn btn-gradient text-white"
+              >
+                Add Group
+              </button>
+            )}
+          </div>
       </div>
     </ModalCom>
   );
diff --git a/src/components/JobGroups/DeleteGroup.jsx b/src/components/JobGroups/DeleteGroup.jsx
index b3993a9..8112b15 100644
--- a/src/components/JobGroups/DeleteGroup.jsx
+++ b/src/components/JobGroups/DeleteGroup.jsx
@@ -76,26 +76,6 @@ export default function DeleteGroup({action, situation, details}) {
               Are you sure, you want to delete <br /> <span>'{details?.group_name}'</span> group?
             </p>
           </div>
-          <div className="flex space-x-2.5">
-            <button
-              onClick={action}
-              type="button"
-              className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-            >
-              <span className="text-gradient">Cancel</span>
-            </button>
-            {requestStatus.laoding ? (
-              <LoadingSpinner size="8" color="sky-blue" />
-            ) : (
-              <button
-                onClick={() => deleteGroup()}
-                type="button"
-                className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-              >
-                Confirm Delete
-              </button>
-            )}
-          </div>
 
           {/* ERROR DISPLAY AND SUBMIT BUTTON */}
           {requestStatus.message != "" &&
@@ -116,6 +96,26 @@ export default function DeleteGroup({action, situation, details}) {
             ))}
           {/* End of error or success display */}
         </div>
+        <div className="modal-footer-wrapper">
+            <button
+              onClick={action}
+              type="button"
+              className="custom-btn border-gradient"
+            >
+              <span className="text-gradient">Cancel</span>
+            </button>
+            {requestStatus.laoding ? (
+              <LoadingSpinner size="8" color="sky-blue" />
+            ) : (
+              <button
+                onClick={() => deleteGroup()}
+                type="button"
+                className="custom-btn primary-gradient text-white"
+              >
+                Confirm Delete
+              </button>
+            )}
+          </div>
       </div>
     </ModalCom>
   )
diff --git a/src/components/JobGroups/DeleteMember.jsx b/src/components/JobGroups/DeleteMember.jsx
index c6b0491..f99ea25 100644
--- a/src/components/JobGroups/DeleteMember.jsx
+++ b/src/components/JobGroups/DeleteMember.jsx
@@ -76,26 +76,6 @@ export default function DeleteMember({action, situation, details}) {
               Are you sure, you want to remove <br /> <span>'{details?.firstname} {details.lastname}'</span>
             </p>
           </div>
-          <div className="flex space-x-2.5">
-            <button
-              onClick={action}
-              type="button"
-              className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-            >
-              <span className="text-gradient">Cancel</span>
-            </button>
-            {requestStatus.laoding ? (
-              <LoadingSpinner size="8" color="sky-blue" />
-            ) : (
-              <button
-                onClick={() => deleteMember()}
-                type="button"
-                className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-              >
-                Remove
-              </button>
-            )}
-          </div>
 
           {/* ERROR DISPLAY AND SUBMIT BUTTON */}
           {requestStatus.message != "" &&
@@ -115,7 +95,27 @@ export default function DeleteMember({action, situation, details}) {
               )
             ))}
           {/* End of error or success display */}
-        </div>
+        </div>          
+        <div className="modal-footer-wrapper">
+            <button
+              onClick={action}
+              type="button"
+              className="custom-btn border-gradient"
+            >
+              <span className="text-gradient">Cancel</span>
+            </button>
+            {requestStatus.laoding ? (
+              <LoadingSpinner size="8" color="sky-blue" />
+            ) : (
+              <button
+                onClick={() => deleteMember()}
+                type="button"
+                className="custom-btn primary-gradient text-white"
+              >
+                Remove
+              </button>
+            )}
+          </div>
       </div>
     </ModalCom>
   )