diff --git a/app/javascript/authentication/components/BaseIdleTimeout.tsx b/app/javascript/authentication/components/BaseIdleTimeout.tsx
index 384ec79356..77ae4be68f 100644
--- a/app/javascript/authentication/components/BaseIdleTimeout.tsx
+++ b/app/javascript/authentication/components/BaseIdleTimeout.tsx
@@ -1,6 +1,7 @@
 import React, { FunctionComponent, useEffect, useState } from "react"
 
-import { AlertTypes, AppearanceStyleType, Button, Modal } from "@bloom-housing/ui-components"
+import { AlertTypes, AppearanceStyleType, Button } from "@bloom-housing/ui-components"
+import { Dialog } from "@bloom-housing/ui-seeds"
 
 const PROMPT_TIMEOUT = 60000
 const events = ["mousemove", "keypress", "scroll"]
@@ -70,6 +71,7 @@ const BaseIdleTimeout: FunctionComponent<IdleTimeoutProps> = (props: IdleTimeout
 
   const modalActions = [
     <Button
+      key="timeout-button"
       styleType={AppearanceStyleType.primary}
       onClick={() => {
         clearTimeout(promptTimeout)
@@ -79,17 +81,18 @@ const BaseIdleTimeout: FunctionComponent<IdleTimeoutProps> = (props: IdleTimeout
       {promptAction}
     </Button>,
   ]
-
   return (
-    <Modal
-      open={Boolean(promptTimeout)}
-      title={promptTitle}
-      ariaDescription={promptText}
-      actions={modalActions}
-      hideCloseIcon
+    <Dialog
+      isOpen={Boolean(promptTimeout)}
+      onClose={() => {
+        clearTimeout(promptTimeout)
+        setPromptTimeout(undefined)
+      }}
     >
-      {promptText}
-    </Modal>
+      <Dialog.Header>{promptTitle}</Dialog.Header>
+      <Dialog.Content>{promptText}</Dialog.Content>
+      <Dialog.Footer>{modalActions}</Dialog.Footer>
+    </Dialog>
   )
 }