diff --git a/packages/insomnia/src/ui/components/modals/common-modal.tsx b/packages/insomnia/src/ui/components/modals/common-modal.tsx
deleted file mode 100644
index 08c7659b85b..00000000000
--- a/packages/insomnia/src/ui/components/modals/common-modal.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import { Button, Dialog, Heading, Modal, ModalOverlay } from 'react-aria-components';
-
-interface Props {
-  title: string;
-  onOk?: () => void;
-  okText?: string;
-  cancelText?: string;
-  content: string | React.ReactElement;
-  onClose: () => void;
-}
-
-export const CommonModal = ({ title, onClose, cancelText, okText, content, onOk }: Props) => {
-  return (
-    <ModalOverlay
-      isOpen
-      onOpenChange={isOpen => {
-        !isOpen && onClose();
-      }}
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-start justify-center bg-black/30"
-    >
-      <Modal
-        onOpenChange={isOpen => {
-          !isOpen && onClose();
-        }}
-        className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] m-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
-      >
-        <Dialog className="outline-none flex-1 h-full flex flex-col gap-4 overflow-hidden">
-          {({ close }) => (
-            <>
-              <Heading
-                slot="title"
-                className="text-2xl"
-              >
-                {title}
-              </Heading>
-              <div className=''>
-                {content}
-              </div>
-              <div className="flex flex-shrink-0 flex-1 justify-end gap-2 items-center">
-                <Button
-                  className="hover:no-underline flex items-center gap-2 hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font] transition-colors rounded-sm"
-                  onPress={close}
-                >
-                  {cancelText || 'Cancel'}
-                </Button>
-                <Button
-                  className="hover:no-underline flex items-center gap-2 bg-[--color-surprise] hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font-surprise] transition-colors rounded-sm"
-                  onPress={() => {
-                    close();
-                    onOk?.();
-                  }}
-                >
-                  {okText || 'OK'}
-                </Button>
-              </div>
-            </>
-          )}
-        </Dialog>
-      </Modal>
-    </ModalOverlay>
-  );
-};
diff --git a/packages/insomnia/src/ui/components/modals/variable-missing-error-modal.tsx b/packages/insomnia/src/ui/components/modals/variable-missing-error-modal.tsx
new file mode 100644
index 00000000000..df72c8891ad
--- /dev/null
+++ b/packages/insomnia/src/ui/components/modals/variable-missing-error-modal.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { Button, Dialog, Heading, Modal, ModalOverlay } from 'react-aria-components';
+
+interface Props {
+  title: string;
+  children: React.ReactNode;
+  isOpen: boolean;
+  onOk: () => void;
+  okText?: string;
+  onCancel: () => void;
+  cancelText?: string;
+  isDismissable?: boolean;
+}
+
+export const VariableMissingErrorModal = ({ isOpen, title, cancelText, onCancel, okText, children, onOk, isDismissable = false }: Props) => {
+  return (
+    <ModalOverlay
+      isOpen={isOpen}
+      onOpenChange={isOpen => {
+        !isOpen && onCancel?.();
+      }}
+      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-start justify-center bg-black/30"
+    >
+      <Modal
+        onOpenChange={isOpen => {
+          !isOpen && onCancel?.();
+        }}
+        isDismissable={isDismissable}
+        className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] m-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+      >
+        <Dialog className="outline-none flex-1 h-full flex flex-col gap-4 overflow-hidden">
+          <>
+            <Heading
+              slot="title"
+              className="text-2xl"
+            >
+              {title}
+            </Heading>
+            <div className=''>
+              {children}
+            </div>
+            <div className="flex flex-shrink-0 flex-1 justify-end gap-2 items-center">
+              <Button
+                className="hover:no-underline flex items-center gap-2 hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font] transition-colors rounded-sm"
+                onPress={onCancel}
+              >
+                {cancelText || 'Cancel'}
+              </Button>
+              <Button
+                className="hover:no-underline flex items-center gap-2 bg-[--color-surprise] hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font-surprise] transition-colors rounded-sm"
+                onPress={onOk}
+              >
+                {okText || 'OK'}
+              </Button>
+            </div>
+          </>
+        </Dialog>
+      </Modal>
+    </ModalOverlay>
+  );
+};
diff --git a/packages/insomnia/src/ui/components/request-url-bar.tsx b/packages/insomnia/src/ui/components/request-url-bar.tsx
index 26444f18581..34749a24e41 100644
--- a/packages/insomnia/src/ui/components/request-url-bar.tsx
+++ b/packages/insomnia/src/ui/components/request-url-bar.tsx
@@ -20,9 +20,9 @@ import { Dropdown, DropdownButton, type DropdownHandle, DropdownItem, DropdownSe
 import { OneLineEditor, OneLineEditorHandle } from './codemirror/one-line-editor';
 import { MethodDropdown } from './dropdowns/method-dropdown';
 import { createKeybindingsHandler, useDocBodyKeyboardShortcuts } from './keydown-binder';
-import { CommonModal } from './modals/common-modal';
 import { GenerateCodeModal } from './modals/generate-code-modal';
 import { showAlert, showModal, showPrompt } from './modals/index';
+import { VariableMissingErrorModal } from './modals/variable-missing-error-modal';
 
 const StyledDropdownButton = styled(DropdownButton)({
   '&:hover:not(:disabled)': {
@@ -378,7 +378,7 @@ export const RequestUrlBar = forwardRef<RequestUrlBarHandle, Props>(({
           )}
         </div>
       </div>
-      <CommonModal
+      <VariableMissingErrorModal
         isOpen={showEnvVariableMissingModal}
         title="An environment variable is missing"
         okText='Execute anyways'
@@ -393,7 +393,7 @@ export const RequestUrlBar = forwardRef<RequestUrlBarHandle, Props>(({
           <Button className="bg-[--color-surprise] text-[--color-font-surprise] px-3 mx-3 rounded-sm">{missingKey}</Button>
           has been defined but has no value defined on a currently Active Environment
         </p>
-      </CommonModal>
+      </VariableMissingErrorModal>
     </div>
   );
 });