diff --git a/web/modals/push-notif-modal.css b/web/modals/push-notif-modal.css
--- a/web/modals/push-notif-modal.css
+++ b/web/modals/push-notif-modal.css
@@ -1,14 +1,4 @@
 .container {
-  padding: 0 40px 32px;
-  border-radius: 8px;
   color: var(--modal-fg);
-}
-.text {
   font-size: var(--xl-font-20);
-  padding: 5px 0px 20px;
-}
-.buttonContainer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 24px;
 }
diff --git a/web/modals/push-notif-modal.react.js b/web/modals/push-notif-modal.react.js
--- a/web/modals/push-notif-modal.react.js
+++ b/web/modals/push-notif-modal.react.js
@@ -28,6 +28,24 @@
       await createPushSubscription();
     }, [createPushSubscription, popModal]);
 
+    const primaryButton = React.useMemo(
+      () => (
+        <Button variant="filled" onClick={onEnable} type="submit">
+          Yes
+        </Button>
+      ),
+      [onEnable],
+    );
+
+    const secondaryButton = React.useMemo(
+      () => (
+        <Button variant="outline" onClick={popModal}>
+          No
+        </Button>
+      ),
+      [popModal],
+    );
+
     return (
       <Modal
         size="fit-content"
@@ -35,19 +53,11 @@
         icon="bell"
         withCloseButton={false}
         onClose={popModal}
+        primaryButton={primaryButton}
+        secondaryButton={secondaryButton}
       >
         <div className={css.container}>
-          <p className={css.text}>
-            Would you like to enable push notifications?
-          </p>
-          <div className={css.buttonContainer}>
-            <Button variant="outline" onClick={popModal}>
-              No
-            </Button>
-            <Button variant="filled" onClick={onEnable} type="submit">
-              Yes
-            </Button>
-          </div>
+          Would you like to enable push notifications?
         </div>
       </Modal>
     );