diff --git a/src/js/components/AdminPanels.tsx b/src/js/components/AdminPanels.tsx
index 6c0e9ec8..6ea22ed1 100644
--- a/src/js/components/AdminPanels.tsx
+++ b/src/js/components/AdminPanels.tsx
@@ -286,14 +286,14 @@ export function AdminSendRedisValue({
     e.preventDefault()
     showModal(
       <ConfirmationModal
-        title={title}
         message={`Are you sure you want to send value "${valueToSend}" to key "${keyToSend}"?`}
         onConfirm={() => {
           handleSubmit(e)
-          showModal(null)
+          showModal(null, null)
         }}
-        onCancel={() => showModal(null)}
-      />
+        onCancel={() => showModal(null, null)}
+      />,
+      title
     )
   }
 
@@ -419,14 +419,14 @@ export function AdminDangerPanel({
     e.preventDefault()
     showModal(
       <ConfirmationModal
-        title="Clear Redis"
         message="Are you sure you want to clear Redis?"
         onConfirm={() => {
           clearRedis()
-          showModal(null)
+          showModal(null, null)
         }}
-        onCancel={() => showModal(null)}
-      />
+        onCancel={() => showModal(null, null)}
+      />,
+      "Clear Redis"
     )
   }
 
diff --git a/src/js/components/Detector.tsx b/src/js/components/Detector.tsx
index e152d498..326ef5dd 100644
--- a/src/js/components/Detector.tsx
+++ b/src/js/components/Detector.tsx
@@ -118,13 +118,13 @@ const ResetButton = ({ redisKey }: { redisKey: string }) => {
   const onClick = () => {
     showModal(
       <ConfirmationModal
-        title="Confirm Reset"
         message="Are you sure you want to restart these workers?"
         onConfirm={() => {
           void handleReset()
         }}
         onCancel={closeModal}
-      />
+      />,
+      "Confirm Reset"
     )
   }
 
diff --git a/src/js/components/Modal.tsx b/src/js/components/Modal.tsx
index e310b050..988faae2 100644
--- a/src/js/components/Modal.tsx
+++ b/src/js/components/Modal.tsx
@@ -5,6 +5,7 @@ import { ConfirmationModalProps } from "./componentTypes"
 
 export const ModalProvider = ({ children }: { children: React.ReactNode }) => {
   const [modalContent, setModalContent] = useState<React.ReactNode | null>(null)
+  const [modalHeader, setModalHeader] = useState<string | null>(null)
 
   // Create or get modal-root element lazily
   const getModalRoot = () => {
@@ -23,6 +24,7 @@ export const ModalProvider = ({ children }: { children: React.ReactNode }) => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
         setModalContent(null)
+        setModalHeader(null)
       }
     }
 
@@ -32,18 +34,51 @@ export const ModalProvider = ({ children }: { children: React.ReactNode }) => {
     }
   }, [])
 
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const modalContentElement = document.querySelector(
+        ".modal-wrapper"
+      ) as HTMLElement
+      if (
+        modalContentElement &&
+        !modalContentElement.contains(event.target as Node)
+      ) {
+        setModalContent(null)
+        setModalHeader(null)
+      }
+    }
+
+    if (modalContent) {
+      document.addEventListener("mousedown", handleClickOutside)
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [modalContent])
+
   return (
-    <ModalContext.Provider value={{ modalContent, setModalContent }}>
+    <ModalContext.Provider
+      value={{ modalHeader, setModalHeader, modalContent, setModalContent }}
+    >
       {children}
       {modalContent &&
         createPortal(
           <div className="modal-overlay">
-            <div className="modal-content">
-              <button
-                className="modal-close"
-                onClick={() => setModalContent(null)}
-              ></button>
-              {modalContent}
+            <div className="modal-wrapper">
+              <div className="modal-header">
+                {modalHeader && <h2>{modalHeader}</h2>}
+                <button
+                  className="modal-close"
+                  onClick={() => {
+                    setModalContent(null)
+                    setModalHeader(null)
+                  }}
+                ></button>
+              </div>
+              <div className="modal-content">{modalContent}</div>
             </div>
           </div>,
           getModalRoot()
@@ -53,19 +88,17 @@ export const ModalProvider = ({ children }: { children: React.ReactNode }) => {
 }
 
 export const ConfirmationModal = ({
-  title = "Confirmation",
   message = "Are you sure?",
   onConfirm = () => {},
   onCancel = () => {},
 }: ConfirmationModalProps) => {
   return (
-    <div>
-      <div className="modal-header">
-        <h2>{title}</h2>
-      </div>
+    <div className="confirmation-modal">
       <p>{message}</p>
-      <button onClick={onConfirm}>Yes</button>
-      <button onClick={onCancel}>No</button>
+      <div className="confirmation-buttons">
+        <button onClick={onConfirm}>Yes</button>
+        <button onClick={onCancel}>No</button>
+      </div>
     </div>
   )
 }
diff --git a/src/js/components/TableFilter.tsx b/src/js/components/TableFilter.tsx
index 388aebb8..ba059d31 100644
--- a/src/js/components/TableFilter.tsx
+++ b/src/js/components/TableFilter.tsx
@@ -38,7 +38,6 @@ export function FilterDialog({
 
   return (
     <>
-      <h2>filter on {column}</h2>
       {!!filterOn.value && (
         <div className="filter-info">
           <p>Currently filtering by: {filterOn.value}</p>
diff --git a/src/js/components/TableView.tsx b/src/js/components/TableView.tsx
index e6a0da61..3badca1a 100644
--- a/src/js/components/TableView.tsx
+++ b/src/js/components/TableView.tsx
@@ -288,6 +288,7 @@ function ChannelHeader({
   const handleColumnClick = (event: React.MouseEvent, column: string) => {
     handleSortClick(event, column, setSortOn)
     if (!event.shiftKey) {
+      const header = `Filter on: ${column}`
       showModal(
         <FilterDialog
           column={channel.name}
@@ -295,7 +296,8 @@ function ChannelHeader({
           filterOn={filterOn}
           filteredRowsCount={filteredRowsCount}
           unfilteredRowsCount={unfilteredRowsCount}
-        />
+        />,
+        header
       )
     }
   }
@@ -437,9 +439,6 @@ function FoldoutCell({ seqNum, columnName, data }: TableFoldoutCellProps) {
   const handleClick = () => {
     const content = (
       <div className="cell-dict-modal">
-        <div className="modal-header">
-          <h3>{`Seq Num: ${seqNum} - ${columnName}`}</h3>
-        </div>
         <table className="cell-dict">
           <tbody>
             {Object.entries(data).map(
@@ -455,7 +454,8 @@ function FoldoutCell({ seqNum, columnName, data }: TableFoldoutCellProps) {
         </table>
       </div>
     )
-    showModal(content)
+    const header = `Seq Num: ${seqNum} - ${columnName}`
+    showModal(content, header)
   }
   return (
     <button onClick={handleClick} className="button button-table">
diff --git a/src/js/components/componentTypes.ts b/src/js/components/componentTypes.ts
index 0a176ef7..264086f2 100644
--- a/src/js/components/componentTypes.ts
+++ b/src/js/components/componentTypes.ts
@@ -1140,10 +1140,14 @@ export interface CalendarYearProps {
 
 /**
  * @description Context type for managing modal content in the application.
+ * @param {string | null} modalHeader - Current modal header or null if none.
  * @param {React.ReactNode | null} modalContent - Current modal content or null if none.
  * @param {(content: React.ReactNode | null) => void} setModalContent - Function to update modal content.
+ * @param {(header: string | null) => void} setModalHeader - Function to update modal header.
  */
 export interface ModalContextType {
+  modalHeader: string | null
   modalContent: React.ReactNode | null
   setModalContent: (content: React.ReactNode | null) => void
+  setModalHeader: (header: string | null) => void
 }
diff --git a/src/js/components/contexts/contexts.tsx b/src/js/components/contexts/contexts.tsx
index b9df4b23..85754238 100644
--- a/src/js/components/contexts/contexts.tsx
+++ b/src/js/components/contexts/contexts.tsx
@@ -25,5 +25,7 @@ export const useRedisEndpoint = () => {
 /* istanbul ignore next */
 export const ModalContext = createContext<ModalContextType>({
   modalContent: null,
+  modalHeader: null,
+  setModalHeader: () => {},
   setModalContent: () => {},
 })
diff --git a/src/js/components/tests/AdminPanels.test.js b/src/js/components/tests/AdminPanels.test.js
index b2e2d54a..cc9e98db 100644
--- a/src/js/components/tests/AdminPanels.test.js
+++ b/src/js/components/tests/AdminPanels.test.js
@@ -39,10 +39,11 @@ jest.mock("../DropDownMenu", () => ({
 }))
 
 jest.mock("../Modal", () => ({
+  // eslint-disable-next-line react/prop-types
   ModalProvider: ({ children }) => (
     <div data-testid="modal-provider">{children}</div>
   ),
-
+  // eslint-disable-next-line react/prop-types
   ConfirmationModal: ({ title, message, onConfirm, onCancel }) => (
     <div data-testid="confirmation-modal">
       <h2>{title}</h2>
@@ -560,8 +561,8 @@ describe("AdminSendRedisValue Component", () => {
     render(
       <AdminSendRedisValue
         {...defaultProps}
-        requiresConfirmation={true}
         title="Dangerous Action"
+        requiresConfirmation={true}
         valueToSend="danger_value"
       />
     )
@@ -572,10 +573,10 @@ describe("AdminSendRedisValue Component", () => {
     expect(mockShowModal).toHaveBeenCalledWith(
       expect.objectContaining({
         props: expect.objectContaining({
-          title: "Dangerous Action",
           message: expect.stringContaining('value "danger_value"'),
         }),
-      })
+      }),
+      "Dangerous Action"
     )
   })
 })
@@ -686,10 +687,10 @@ describe("AdminDangerPanel Component", () => {
     expect(mockShowModal).toHaveBeenCalledWith(
       expect.objectContaining({
         props: expect.objectContaining({
-          title: "Clear Redis",
           message: "Are you sure you want to clear Redis?",
         }),
-      })
+      }),
+      "Clear Redis"
     )
   })
 
@@ -749,7 +750,7 @@ describe("AdminDangerPanel Component", () => {
     const cancelButton = render(modalCall).getByTestId("cancel-button")
     fireEvent.click(cancelButton)
 
-    expect(mockShowModal).toHaveBeenCalledWith(null)
+    expect(mockShowModal).toHaveBeenCalledWith(null, null)
     expect(simplePost).not.toHaveBeenCalled()
   })
 })
diff --git a/src/js/components/tests/Modal.test.js b/src/js/components/tests/Modal.test.js
index 1f545507..23ebd6c0 100644
--- a/src/js/components/tests/Modal.test.js
+++ b/src/js/components/tests/Modal.test.js
@@ -182,21 +182,14 @@ describe("ConfirmationModal", () => {
   it("renders with default props", () => {
     render(<ConfirmationModal />)
 
-    expect(screen.getByText("Confirmation")).toBeInTheDocument()
     expect(screen.getByText("Are you sure?")).toBeInTheDocument()
     expect(screen.getByText("Yes")).toBeInTheDocument()
     expect(screen.getByText("No")).toBeInTheDocument()
   })
 
   it("renders with custom props", () => {
-    render(
-      <ConfirmationModal
-        title="Delete Item"
-        message="This action cannot be undone."
-      />
-    )
+    render(<ConfirmationModal message="This action cannot be undone." />)
 
-    expect(screen.getByText("Delete Item")).toBeInTheDocument()
     expect(
       screen.getByText("This action cannot be undone.")
     ).toBeInTheDocument()
@@ -244,7 +237,8 @@ describe("ConfirmationModal", () => {
                   message="Are you sure you want to delete this file?"
                   onConfirm={handleConfirm}
                   onCancel={handleCancel}
-                />
+                />,
+                "Delete File"
               )
             }
             data-testid="show-confirmation"
diff --git a/src/js/components/tests/TableFilter.test.js b/src/js/components/tests/TableFilter.test.js
index 28f43108..cbaa1bc9 100644
--- a/src/js/components/tests/TableFilter.test.js
+++ b/src/js/components/tests/TableFilter.test.js
@@ -35,13 +35,6 @@ describe("FilterDialog", () => {
   }
 
   describe("Rendering", () => {
-    it("renders the filter dialog with correct heading", () => {
-      renderFilterDialog()
-      expect(
-        screen.getByRole("heading", { name: "filter on name" })
-      ).toBeInTheDocument()
-    })
-
     it("renders input with correct placeholder", () => {
       renderFilterDialog()
       expect(screen.getByPlaceholderText("Enter name...")).toBeInTheDocument()
@@ -70,133 +63,129 @@ describe("FilterDialog", () => {
       expect(screen.getByText("10 of 20 total rows")).toBeInTheDocument()
     })
 
-    it("renders with different column name", () => {
-      renderFilterDialog({ column: "email" })
-      expect(
-        screen.getByRole("heading", { name: "filter on email" })
-      ).toBeInTheDocument()
-      expect(screen.getByPlaceholderText("Enter email...")).toBeInTheDocument()
-    })
-  })
-
-  describe("Focus behavior", () => {
-    it("focuses the input on mount", async () => {
-      renderFilterDialog()
-      const input = screen.getByPlaceholderText("Enter name...")
-      await waitFor(() => {
-        expect(input).toHaveFocus()
+    describe("Focus behavior", () => {
+      it("focuses the input on mount", async () => {
+        renderFilterDialog()
+        const input = screen.getByPlaceholderText("Enter name...")
+        await waitFor(() => {
+          expect(input).toHaveFocus()
+        })
       })
     })
-  })
 
-  describe("User interactions", () => {
-    it("calls setFilterOn and closeModal when Apply button is clicked", async () => {
-      renderFilterDialog()
+    describe("User interactions", () => {
+      it("calls setFilterOn and closeModal when Apply button is clicked", async () => {
+        renderFilterDialog()
 
-      const input = screen.getByPlaceholderText("Enter name...")
-      fireEvent.input(input, { target: { value: "test value" } })
-      fireEvent.click(screen.getByRole("button", { name: "Apply" }))
+        const input = screen.getByPlaceholderText("Enter name...")
+        fireEvent.input(input, { target: { value: "test value" } })
+        fireEvent.click(screen.getByRole("button", { name: "Apply" }))
 
-      expect(mockSetFilterOn).toHaveBeenCalledWith({
-        column: "name",
-        value: "test value",
+        expect(mockSetFilterOn).toHaveBeenCalledWith({
+          column: "name",
+          value: "test value",
+        })
+        expect(mockCloseModal).toHaveBeenCalled()
       })
-      expect(mockCloseModal).toHaveBeenCalled()
-    })
 
-    it("trims whitespace from input value when applying filter", async () => {
-      renderFilterDialog()
+      it("trims whitespace from input value when applying filter", async () => {
+        renderFilterDialog()
 
-      const input = screen.getByPlaceholderText("Enter name...")
-      fireEvent.input(input, { target: { value: "  test value  " } })
-      fireEvent.click(screen.getByRole("button", { name: "Apply" }))
+        const input = screen.getByPlaceholderText("Enter name...")
+        fireEvent.input(input, { target: { value: "  test value  " } })
+        fireEvent.click(screen.getByRole("button", { name: "Apply" }))
 
-      expect(mockSetFilterOn).toHaveBeenCalledWith({
-        column: "name",
-        value: "test value",
+        expect(mockSetFilterOn).toHaveBeenCalledWith({
+          column: "name",
+          value: "test value",
+        })
       })
-    })
 
-    it("calls setFilterOn with empty values and closeModal when Clear button is clicked", async () => {
-      renderFilterDialog()
+      it("calls setFilterOn with empty values and closeModal when Clear button is clicked", async () => {
+        renderFilterDialog()
 
-      fireEvent.click(screen.getByRole("button", { name: "Clear" }))
+        fireEvent.click(screen.getByRole("button", { name: "Clear" }))
 
-      expect(mockSetFilterOn).toHaveBeenCalledWith({
-        column: "",
-        value: "",
+        expect(mockSetFilterOn).toHaveBeenCalledWith({
+          column: "",
+          value: "",
+        })
+        expect(mockCloseModal).toHaveBeenCalled()
       })
-      expect(mockCloseModal).toHaveBeenCalled()
-    })
 
-    it("applies filter when Enter key is pressed", async () => {
-      renderFilterDialog()
+      it("applies filter when Enter key is pressed", async () => {
+        renderFilterDialog()
 
-      const input = screen.getByPlaceholderText("Enter name...")
-      fireEvent.input(input, { target: { value: "test value" } })
-      fireEvent.keyDown(input, { key: "Enter", code: "Enter", charCode: 13 })
+        const input = screen.getByPlaceholderText("Enter name...")
+        fireEvent.input(input, { target: { value: "test value" } })
+        fireEvent.keyDown(input, { key: "Enter", code: "Enter", charCode: 13 })
 
-      expect(mockSetFilterOn).toHaveBeenCalledWith({
-        column: "name",
-        value: "test value",
+        expect(mockSetFilterOn).toHaveBeenCalledWith({
+          column: "name",
+          value: "test value",
+        })
+        expect(mockCloseModal).toHaveBeenCalled()
       })
-      expect(mockCloseModal).toHaveBeenCalled()
-    })
 
-    it("does not apply filter when other keys are pressed", async () => {
-      renderFilterDialog()
+      it("does not apply filter when other keys are pressed", async () => {
+        renderFilterDialog()
 
-      const input = screen.getByPlaceholderText("Enter name...")
-      fireEvent.input(input, { target: { value: "test" } })
-      fireEvent.keyDown(input, { key: "Escape", code: "Escape", charCode: 27 })
+        const input = screen.getByPlaceholderText("Enter name...")
+        fireEvent.input(input, { target: { value: "test" } })
+        fireEvent.keyDown(input, {
+          key: "Escape",
+          code: "Escape",
+          charCode: 27,
+        })
 
-      expect(mockSetFilterOn).not.toHaveBeenCalled()
-      expect(mockCloseModal).not.toHaveBeenCalled()
+        expect(mockSetFilterOn).not.toHaveBeenCalled()
+        expect(mockCloseModal).not.toHaveBeenCalled()
+      })
     })
-  })
 
-  describe("Edge cases", () => {
-    it("handles empty input value when applying filter", async () => {
-      renderFilterDialog()
+    describe("Edge cases", () => {
+      it("handles empty input value when applying filter", async () => {
+        renderFilterDialog()
 
-      fireEvent.click(screen.getByRole("button", { name: "Apply" }))
+        fireEvent.click(screen.getByRole("button", { name: "Apply" }))
 
-      expect(mockSetFilterOn).toHaveBeenCalledWith({
-        column: "name",
-        value: "",
+        expect(mockSetFilterOn).toHaveBeenCalledWith({
+          column: "name",
+          value: "",
+        })
+        expect(mockCloseModal).toHaveBeenCalled()
       })
-      expect(mockCloseModal).toHaveBeenCalled()
-    })
 
-    it("handles whitespace-only input value when applying filter", async () => {
-      renderFilterDialog()
+      it("handles whitespace-only input value when applying filter", async () => {
+        renderFilterDialog()
 
-      const input = screen.getByPlaceholderText("Enter name...")
-      fireEvent.input(input, { target: { value: "   " } })
-      fireEvent.click(screen.getByRole("button", { name: "Apply" }))
+        const input = screen.getByPlaceholderText("Enter name...")
+        fireEvent.input(input, { target: { value: "   " } })
+        fireEvent.click(screen.getByRole("button", { name: "Apply" }))
 
-      expect(mockSetFilterOn).toHaveBeenCalledWith({
-        column: "name",
-        value: "",
+        expect(mockSetFilterOn).toHaveBeenCalledWith({
+          column: "name",
+          value: "",
+        })
       })
-    })
 
-    it("shows correct row counts with different numbers", () => {
-      renderFilterDialog({
-        filterOn: { column: "name", value: "test" },
-        filteredRowsCount: 5,
-        unfilteredRowsCount: 100,
+      it("shows correct row counts with different numbers", () => {
+        renderFilterDialog({
+          filterOn: { column: "name", value: "test" },
+          filteredRowsCount: 5,
+          unfilteredRowsCount: 100,
+        })
+        expect(screen.getByText("5 of 100 total rows")).toBeInTheDocument()
       })
-      expect(screen.getByText("5 of 100 total rows")).toBeInTheDocument()
-    })
 
-    it("handles zero filtered rows", () => {
-      renderFilterDialog({
-        filterOn: { column: "name", value: "test" },
-        filteredRowsCount: 0,
-        unfilteredRowsCount: 50,
+      it("handles zero filtered rows", () => {
+        renderFilterDialog({
+          filterOn: { column: "name", value: "test" },
+          filteredRowsCount: 0,
+          unfilteredRowsCount: 50,
+        })
+        expect(screen.getByText("0 of 50 total rows")).toBeInTheDocument()
       })
-      expect(screen.getByText("0 of 50 total rows")).toBeInTheDocument()
     })
   })
 })
diff --git a/src/js/hooks/useModal.tsx b/src/js/hooks/useModal.tsx
index ffc72c66..1209f518 100644
--- a/src/js/hooks/useModal.tsx
+++ b/src/js/hooks/useModal.tsx
@@ -2,19 +2,23 @@ import React, { useContext } from "react"
 import { ModalContext } from "../components/contexts/contexts"
 
 export function useModal(): {
+  modalHeader?: string | null
   modalContent: React.ReactNode | null
-  showModal: (content: React.ReactNode) => void
+  showModal: (content: React.ReactNode, header: string | null) => void
   closeModal: () => void
 } {
-  const { modalContent, setModalContent } = useContext(ModalContext)
+  const { modalHeader, modalContent, setModalContent, setModalHeader } =
+    useContext(ModalContext)
 
-  const showModal = (content: React.ReactNode) => {
+  const showModal = (content: React.ReactNode, header: string | null) => {
     setModalContent(content)
+    setModalHeader(header)
   }
 
   const closeModal = () => {
     setModalContent(null)
+    setModalHeader(null)
   }
 
-  return { modalContent, showModal, closeModal }
+  return { modalHeader, modalContent, showModal, closeModal }
 }
diff --git a/src/sass/_modal.sass b/src/sass/_modal.sass
index 2d72c821..10290e37 100644
--- a/src/sass/_modal.sass
+++ b/src/sass/_modal.sass
@@ -10,18 +10,25 @@
     justify-content: center
     background: rgba(0,0,0,0.6)
 
+.modal-wrapper
+    position: relative
+    max-width: 90%
+    max-height: 90%
+    padding: 1em
+    border-radius: 20px
+    z-index: 48
+    display: flex
+    flex-direction: column
+    background: #fff
+    color: #000
+
 .modal-header
-    position: sticky
-    top: 0
     padding-bottom: 0.3em
-    background: #eee
+    padding-right: 2em
+    padding-top: 1em
 
 .modal-content
-    max-height: 80vh
-    padding: 3em
-    border-radius: 20px
-    background: #eee
-    color: #000
+    overflow: auto
 
 .modal-close
     position: absolute
@@ -39,8 +46,10 @@
     cursor: pointer
     z-index: 25
 
-.modal-content
-    position: absolute
-
 .filter-info
     margin-bottom: 1em
+
+.confirmation-buttons
+    display: flex
+    margin-top: 0.7em
+    gap: 0.333em
diff --git a/src/sass/style.sass b/src/sass/style.sass
index 348e85ab..d062c590 100644
--- a/src/sass/style.sass
+++ b/src/sass/style.sass
@@ -456,11 +456,6 @@ section
     &.to-bottom
       transform: rotate(180deg)
 
-.cell-dict-modal
-  max-height: 80vh
-  padding: 0 2em
-  overflow-y: scroll
-
   .key
     text-align: left
     padding: 0.2em