diff --git a/packages/app/src/common/components/Button.tsx b/packages/app/src/common/components/Button.tsx
index 70f68743..ba61abcb 100644
--- a/packages/app/src/common/components/Button.tsx
+++ b/packages/app/src/common/components/Button.tsx
@@ -86,8 +86,7 @@ const Button: React.FC<ButtonProps> = ({
       <InfoModal
         title={disabledTitle}
         message={disabledMessage}
-        ok={infoModal.onModalOK}
-        show={infoModal.modalShown}
+        modalControl={infoModal}
       />
       {children}
     </button>
diff --git a/packages/app/src/common/components/modals/InfoModal.tsx b/packages/app/src/common/components/modals/InfoModal.tsx
index dfae636c..ca19d059 100644
--- a/packages/app/src/common/components/modals/InfoModal.tsx
+++ b/packages/app/src/common/components/modals/InfoModal.tsx
@@ -2,13 +2,23 @@ import { Dialog } from "@headlessui/react";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
 import React, { type FC, type PropsWithChildren } from "react";
 
-import { BaseModal, type ModalProps } from "./";
+import { BaseModal } from "./";
+import { type ModalControl } from "../../hooks";
 
-type InfoModalProps = { title: string; message?: string } & PropsWithChildren &
-  Omit<ModalProps, "cancel">;
+type InfoModalProps = {
+  title: string;
+  message?: string;
+  modalControl: ModalControl;
+} & PropsWithChildren;
 const InfoModal: FC<InfoModalProps> = (props) => {
   return (
-    <BaseModal cancelVisible={false} {...props} cancel={() => {}}>
+    <BaseModal
+      cancelVisible={false}
+      {...props}
+      ok={props.modalControl.onModalOK}
+      cancel={props.modalControl.onModalClose}
+      show={props.modalControl.modalShown}
+    >
       <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full">
         <ExclamationTriangleIcon
           className="w-8"