diff --git a/src/frontend/src/modals/ConfirmationModal/index.tsx b/src/frontend/src/modals/ConfirmationModal/index.tsx
index 74e9f59b5..a84f07b96 100644
--- a/src/frontend/src/modals/ConfirmationModal/index.tsx
+++ b/src/frontend/src/modals/ConfirmationModal/index.tsx
@@ -1,14 +1,28 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
+import ShadTooltip from "../../components/ShadTooltipComponent";
 import { Button } from "../../components/ui/button";
-import { ConfirmationModalType } from "../../types/components";
+import { ConfirmationModalType, ContentProps } from "../../types/components";
 import { nodeIconsLucide } from "../../utils/styleUtils";
 import BaseModal from "../baseModal";
 
-export default function ConfirmationModal({
+const Content: React.FC<ContentProps> = ({ children }) => {
+  return <div className="h-full w-full">{children}</div>;
+};
+const Trigger: React.FC<ContentProps> = ({
+  children,
+  tolltipContent,
+  side,
+}) => {
+  return (
+    <ShadTooltip side={side} content={tolltipContent}>
+      <div className="h-full w-full">{children}</div>
+    </ShadTooltip>
+  );
+};
+function ConfirmationModal({
   title,
   asChild,
   titleHeader,
-  modalContent,
   modalContentTitle,
   cancelText,
   confirmationText,
@@ -26,10 +40,16 @@ export default function ConfirmationModal({
   useEffect(() => {
     if (onClose) onClose!(modalOpen);
   }, [modalOpen]);
+  const triggerChild = React.Children.toArray(children).find(
+    (child) => (child as React.ReactElement).type === Trigger
+  );
+  const ContentChild = React.Children.toArray(children).find(
+    (child) => (child as React.ReactElement).type === Content
+  );
 
   return (
     <BaseModal size="x-small" open={modalOpen} setOpen={setModalOpen}>
-      <BaseModal.Trigger asChild={asChild}>{children}</BaseModal.Trigger>
+      <BaseModal.Trigger asChild={asChild}>{triggerChild}</BaseModal.Trigger>
       <BaseModal.Header description={titleHeader}>
         <span className="pr-2">{title}</span>
         <Icon
@@ -45,7 +65,7 @@ export default function ConfirmationModal({
             <br></br>
           </>
         )}
-        <span>{modalContent}</span>
+        {ContentChild}
       </BaseModal.Content>
 
       <BaseModal.Footer>
@@ -71,3 +91,7 @@ export default function ConfirmationModal({
     </BaseModal>
   );
 }
+ConfirmationModal.Content = Content;
+ConfirmationModal.Trigger = Trigger;
+
+export default ConfirmationModal;
diff --git a/src/frontend/src/pages/AdminPage/index.tsx b/src/frontend/src/pages/AdminPage/index.tsx
index b81d7a962..bc8f56b70 100644
--- a/src/frontend/src/pages/AdminPage/index.tsx
+++ b/src/frontend/src/pages/AdminPage/index.tsx
@@ -311,7 +311,6 @@ export default function AdminPage() {
                               title="Edit"
                               titleHeader={`${user.username}`}
                               modalContentTitle="Attention!"
-                              modalContent="Are you completely confident about the changes you are making to this user?"
                               cancelText="Cancel"
                               confirmationText="Confirm"
                               icon={"UserCog2"}
@@ -325,12 +324,20 @@ export default function AdminPage() {
                                 );
                               }}
                             >
-                              <div className="flex w-fit">
-                                <Checkbox
-                                  id="is_active"
-                                  checked={user.is_active}
-                                />
-                              </div>
+                              <ConfirmationModal.Content>
+                                <span>
+                                  Are you completely confident about the changes
+                                  you are making to this user?
+                                </span>
+                              </ConfirmationModal.Content>
+                              <ConfirmationModal.Trigger>
+                                <div className="flex w-fit">
+                                  <Checkbox
+                                    id="is_active"
+                                    checked={user.is_active}
+                                  />
+                                </div>
+                              </ConfirmationModal.Trigger>
                             </ConfirmationModal>
                           </TableCell>
                           <TableCell className="relative left-1 truncate py-2 text-align-last-left">
@@ -339,7 +346,6 @@ export default function AdminPage() {
                               title="Edit"
                               titleHeader={`${user.username}`}
                               modalContentTitle="Attention!"
-                              modalContent="Are you completely confident about the changes you are making to this user?"
                               cancelText="Cancel"
                               confirmationText="Confirm"
                               icon={"UserCog2"}
@@ -353,12 +359,20 @@ export default function AdminPage() {
                                 );
                               }}
                             >
-                              <div className="flex w-fit">
-                                <Checkbox
-                                  id="is_superuser"
-                                  checked={user.is_superuser}
-                                />
-                              </div>
+                              <ConfirmationModal.Content>
+                                <span>
+                                  Are you completely confident about the changes
+                                  you are making to this user?
+                                </span>
+                              </ConfirmationModal.Content>
+                              <ConfirmationModal.Trigger>
+                                <div className="flex w-fit">
+                                  <Checkbox
+                                    id="is_superuser"
+                                    checked={user.is_superuser}
+                                  />
+                                </div>
+                              </ConfirmationModal.Trigger>
                             </ConfirmationModal>
                           </TableCell>
                           <TableCell className="truncate py-2 ">
@@ -401,7 +415,6 @@ export default function AdminPage() {
                                 title="Delete"
                                 titleHeader="Delete User"
                                 modalContentTitle="Attention!"
-                                modalContent="Are you sure you want to delete this user? This action cannot be undone."
                                 cancelText="Cancel"
                                 confirmationText="Delete"
                                 icon={"UserMinus2"}
@@ -411,12 +424,20 @@ export default function AdminPage() {
                                   handleDeleteUser(user);
                                 }}
                               >
-                                <ShadTooltip content="Delete" side="top">
-                                  <IconComponent
-                                    name="Trash2"
-                                    className="ml-2 h-4 w-4 cursor-pointer"
-                                  />
-                                </ShadTooltip>
+                                <ConfirmationModal.Content>
+                                  <span>
+                                    Are you sure you want to delete this user?
+                                    This action cannot be undone.
+                                  </span>
+                                </ConfirmationModal.Content>
+                                <ConfirmationModal.Trigger>
+                                  <ShadTooltip content="Delete" side="top">
+                                    <IconComponent
+                                      name="Trash2"
+                                      className="ml-2 h-4 w-4 cursor-pointer"
+                                    />
+                                  </ShadTooltip>
+                                </ConfirmationModal.Trigger>
                               </ConfirmationModal>
                             </div>
                           </TableCell>
diff --git a/src/frontend/src/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/ApiKeysPage/index.tsx
index d1c91593a..01aff0f36 100644
--- a/src/frontend/src/pages/ApiKeysPage/index.tsx
+++ b/src/frontend/src/pages/ApiKeysPage/index.tsx
@@ -224,7 +224,6 @@ export default function ApiKeysPage() {
                                           title="Delete"
                                           titleHeader="Delete User"
                                           modalContentTitle="Attention!"
-                                          modalContent="Are you sure you want to delete this key? This action cannot be undone."
                                           cancelText="Cancel"
                                           confirmationText="Delete"
                                           icon={"UserMinus2"}
@@ -234,15 +233,19 @@ export default function ApiKeysPage() {
                                             handleDeleteKey(keys);
                                           }}
                                         >
-                                          <ShadTooltip
-                                            content="Delete"
-                                            side="top"
-                                          >
+                                          <ConfirmationModal.Content>
+                                            <span>
+                                              Are you sure you want to delete
+                                              this key? This action cannot be
+                                              undone.
+                                            </span>
+                                          </ConfirmationModal.Content>
+                                          <ConfirmationModal.Trigger>
                                             <IconComponent
                                               name="Trash2"
                                               className="ml-2 h-4 w-4 cursor-pointer"
                                             />
-                                          </ShadTooltip>
+                                          </ConfirmationModal.Trigger>
                                         </ConfirmationModal>
                                       </div>
                                     </TableCell>
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index c819d8f2b..3347c02ab 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -173,7 +173,6 @@ export default function ExtraSidebar(): JSX.Element {
       <ConfirmationModal
         index={0}
         modalContentTitle="Are you sure you want to share this flow?"
-        modalContent="This flow will be available for everyone to use."
         title="Share Flow"
         confirmationText="Share"
         icon="Share2"
@@ -183,11 +182,14 @@ export default function ExtraSidebar(): JSX.Element {
         titleHeader=""
         cancelText="Cancel"
       >
-        <ShadTooltip content="Share" side="top">
+        <ConfirmationModal.Content>
+          <span>This flow will be available for everyone to use.</span>
+        </ConfirmationModal.Content>
+        <ConfirmationModal.Trigger tolltipContent="Share" side="top">
           <div className={classNames("extra-side-bar-buttons")}>
             <IconComponent name="Share2" className="side-bar-button-size" />
           </div>
-        </ShadTooltip>
+        </ConfirmationModal.Trigger>
       </ConfirmationModal>
     ),
     []
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index b4fe2c794..4a2741587 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -280,7 +280,6 @@ export default function NodeToolbarComponent({
               key={data.id}
               index={0}
               modalContentTitle="Are you sure you want to share this component?"
-              modalContent="This component will be available for everyone to use."
               title="Share Component"
               confirmationText="Share"
               icon="Share2"
@@ -294,7 +293,14 @@ export default function NodeToolbarComponent({
                 setShowconfirmShare(modal);
               }}
             >
-              <div></div>
+              <ConfirmationModal.Content>
+                <span>
+                  This component will be available for everyone to use.
+                </span>
+              </ConfirmationModal.Content>
+              <ConfirmationModal.Trigger>
+                <div></div>
+              </ConfirmationModal.Trigger>
             </ConfirmationModal>
           )}
         </span>
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index f444d4b98..e6975ea73 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -246,8 +246,15 @@ export type LoadingComponentProps = {
   remSize: number;
 };
 
-export type ContentProps = { children: ReactNode };
+export type ContentProps = {
+  children: ReactNode;
+  tolltipContent?: ReactNode;
+  side?: "top" | "right" | "bottom" | "left";
+};
 export type HeaderProps = { children: ReactNode; description: string };
+export type TriggerProps = {
+  children: ReactNode;
+};
 
 export interface languageMap {
   [key: string]: string | undefined;
@@ -278,11 +285,13 @@ export type ConfirmationModalType = {
   title: string;
   titleHeader: string;
   asChild?: boolean;
-  modalContent: string;
   modalContentTitle: string;
   cancelText: string;
   confirmationText: string;
-  children: ReactElement;
+  children: [
+    React.ReactElement<ContentProps>,
+    React.ReactElement<TriggerProps>
+  ];
   icon: string;
   data?: any;
   index: number;