diff --git a/web/src/app/services/UniversalKey/UniversalKeyRuleConfig.tsx b/web/src/app/services/UniversalKey/UniversalKeyRuleConfig.tsx
index ba0aa6a780..cd806999ad 100644
--- a/web/src/app/services/UniversalKey/UniversalKeyRuleConfig.tsx
+++ b/web/src/app/services/UniversalKey/UniversalKeyRuleConfig.tsx
@@ -2,8 +2,7 @@ import React, { Suspense, useState } from 'react'
 import { Button, Card } from '@mui/material'
 import { Add } from '@mui/icons-material'
 import FlatList, { FlatListListItem } from '../../lists/FlatList'
-import UniversalKeyRuleCreateDialog from './UniversalKeyRuleCreateDialog'
-import UniversalKeyRuleEditDialog from './UniversalKeyRuleEditDialog'
+import UniversalKeyRuleDialog from './UniversalKeyRuleDialog'
 import UniversalKeyRuleRemoveDialog from './UniversalKeyRuleRemoveDialog'
 import OtherActions from '../../util/OtherActions'
 import { gql, useQuery } from 'urql'
@@ -93,15 +92,12 @@ export default function UniversalKeyRuleList(
       </Card>
 
       <Suspense>
-        {create && (
-          <UniversalKeyRuleCreateDialog
-            onClose={() => setCreate(false)}
-            keyID={props.keyID}
-          />
-        )}
-        {edit && (
-          <UniversalKeyRuleEditDialog
-            onClose={() => setEdit('')}
+        {(create || edit) && (
+          <UniversalKeyRuleDialog
+            onClose={() => {
+              setCreate(false)
+              setEdit('')
+            }}
             keyID={props.keyID}
             ruleID={edit}
           />
diff --git a/web/src/app/services/UniversalKey/UniversalKeyRuleCreateDialog.tsx b/web/src/app/services/UniversalKey/UniversalKeyRuleCreateDialog.tsx
deleted file mode 100644
index 15bcbd23e1..0000000000
--- a/web/src/app/services/UniversalKey/UniversalKeyRuleCreateDialog.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, { useState } from 'react'
-import FormDialog from '../../dialogs/FormDialog'
-import UniversalKeyRuleForm from './UniversalKeyRuleForm'
-import { gql, useMutation } from 'urql'
-import { KeyRuleInput } from '../../../schema'
-import { getNotice } from './utils'
-import { useErrorConsumer } from '../../util/ErrorConsumer'
-
-interface UniversalKeyRuleCreateDialogProps {
-  keyID: string
-  onClose: () => void
-}
-
-const mutation = gql`
-  mutation ($input: UpdateKeyConfigInput!) {
-    updateKeyConfig(input: $input)
-  }
-`
-
-export default function UniversalKeyRuleCreateDialogProps(
-  props: UniversalKeyRuleCreateDialogProps,
-): JSX.Element {
-  const [value, setValue] = useState<KeyRuleInput>({
-    name: '',
-    description: '',
-    conditionExpr: '',
-    continueAfterMatch: false,
-    actions: [],
-  })
-  const [m, commit] = useMutation(mutation)
-  const [hasConfirmed, setHasConfirmed] = useState(false)
-  const [hasSubmitted, setHasSubmitted] = useState(false)
-  const noActionsNoConf = value.actions.length === 0 && !hasConfirmed
-
-  const errs = useErrorConsumer(m.error)
-  const form = (
-    <UniversalKeyRuleForm
-      value={value}
-      onChange={setValue}
-      nameError={errs.getErrorByField(/Rules.+\.Name/)}
-      descriptionError={errs.getErrorByField(/Rules.+\.Description/)}
-      conditionError={errs.getErrorByPath(
-        'updateKeyConfig.input.setRule.conditionExpr',
-      )}
-    />
-  )
-
-  return (
-    <FormDialog
-      title='Create Rule'
-      maxWidth='lg'
-      onClose={props.onClose}
-      errors={errs.remainingLegacyCallback()}
-      onSubmit={() => {
-        if (noActionsNoConf) {
-          setHasSubmitted(true)
-          return
-        }
-
-        return commit(
-          {
-            input: {
-              keyID: props.keyID,
-              setRule: value,
-            },
-          },
-          { additionalTypenames: ['KeyConfig'] },
-        ).then((res) => {
-          if (res.error) return
-
-          props.onClose()
-        })
-      }}
-      form={form}
-      notices={getNotice(hasSubmitted, hasConfirmed, setHasConfirmed)}
-    />
-  )
-}
diff --git a/web/src/app/services/UniversalKey/UniversalKeyRuleEditDialog.tsx b/web/src/app/services/UniversalKey/UniversalKeyRuleDialog.tsx
similarity index 56%
rename from web/src/app/services/UniversalKey/UniversalKeyRuleEditDialog.tsx
rename to web/src/app/services/UniversalKey/UniversalKeyRuleDialog.tsx
index 433509e9ca..b8615626b5 100644
--- a/web/src/app/services/UniversalKey/UniversalKeyRuleEditDialog.tsx
+++ b/web/src/app/services/UniversalKey/UniversalKeyRuleDialog.tsx
@@ -1,19 +1,20 @@
 import React, { useState } from 'react'
-import { gql, useMutation, useQuery } from 'urql'
 import FormDialog from '../../dialogs/FormDialog'
 import UniversalKeyRuleForm from './UniversalKeyRuleForm'
+import { gql, useMutation, useQuery } from 'urql'
 import { IntegrationKey, KeyRuleInput } from '../../../schema'
 import { getNotice } from './utils'
 import { useErrorConsumer } from '../../util/ErrorConsumer'
 
-interface UniversalKeyRuleEditDialogProps {
+interface UniversalKeyRuleDialogProps {
   keyID: string
-  ruleID: string
   onClose: () => void
-  default?: boolean
+
+  ruleID?: string // if present, we are editing
+  default?: boolean // used when creating default action
 }
 
-const query = gql`
+const editQuery = gql`
   query UniversalKeyPage($keyID: ID!, $ruleID: ID!) {
     integrationKey(id: $keyID) {
       id
@@ -43,50 +44,60 @@ const mutation = gql`
   }
 `
 
-export default function UniversalKeyRuleEditDialog(
-  props: UniversalKeyRuleEditDialogProps,
+export default function UniversalKeyRuleDialogProps(
+  props: UniversalKeyRuleDialogProps,
 ): JSX.Element {
   const [q] = useQuery<{
     integrationKey: IntegrationKey
   }>({
-    query,
+    query: editQuery,
     variables: {
       keyID: props.keyID,
       ruleID: props.ruleID,
     },
+    pause: !props.ruleID,
   })
   if (q.error) throw q.error
 
   // shouldn't happen due to suspense
-  if (!q.data) throw new Error('failed to load data')
+  if (props.ruleID && !q.data) throw new Error('failed to load data')
 
-  const rule = q.data.integrationKey.config.oneRule
-  if (!rule) throw new Error('rule not found')
+  const rule = q.data?.integrationKey.config.oneRule
+  if (props.ruleID && !rule) throw new Error('rule not found')
 
-  const [value, setValue] = useState<KeyRuleInput>(rule)
+  const [value, setValue] = useState<KeyRuleInput>({
+    id: rule?.id ?? undefined,
+    name: rule?.name ?? '',
+    description: rule?.description ?? '',
+    conditionExpr: rule?.conditionExpr ?? '',
+    continueAfterMatch: rule?.continueAfterMatch ?? false,
+    actions: rule?.actions ?? [],
+  })
   const [m, commit] = useMutation(mutation)
-
   const [hasConfirmed, setHasConfirmed] = useState(false)
   const [hasSubmitted, setHasSubmitted] = useState(false)
   const noActionsNoConf = value.actions.length === 0 && !hasConfirmed
+
   const errs = useErrorConsumer(m.error)
-  const form = (
-    <UniversalKeyRuleForm
-      value={value}
-      onChange={setValue}
-      nameError={errs.getErrorByField(/Rules.+\.Name/)}
-      descriptionError={errs.getErrorByField(/Rules.+\.Description/)}
-      conditionError={errs.getErrorByPath(
-        'updateKeyConfig.input.setRule.conditionExpr',
-      )}
-    />
+  const unknownErrors = errs.remainingLegacyCallback()
+  const nameError = errs.getErrorByField(/Rules.+\.Name/)
+  const descError = errs.getErrorByField(/Rules.+\.Description/)
+  const conditionError = errs.getErrorByPath(
+    'updateKeyConfig.input.setRule.conditionExpr',
   )
 
   return (
     <FormDialog
-      title={props.default ? 'Edit Default Actions' : 'Edit Rule'}
-      maxWidth={props.default ? 'sm' : 'lg'}
+      title={
+        props.ruleID
+          ? props.default
+            ? 'Edit Default Actions'
+            : 'Edit Rule'
+          : 'Create Rule'
+      }
+      maxWidth='lg'
       onClose={props.onClose}
+      errors={unknownErrors}
       onSubmit={() => {
         if (noActionsNoConf) {
           setHasSubmitted(true)
@@ -107,8 +118,15 @@ export default function UniversalKeyRuleEditDialog(
           props.onClose()
         })
       }}
-      form={form}
-      errors={errs.remainingLegacyCallback()}
+      form={
+        <UniversalKeyRuleForm
+          value={value}
+          onChange={setValue}
+          nameError={nameError}
+          descriptionError={descError}
+          conditionError={conditionError}
+        />
+      }
       notices={getNotice(hasSubmitted, hasConfirmed, setHasConfirmed)}
     />
   )