diff --git a/web-app/src/components/ui/__tests__/dialog.test.tsx b/web-app/src/components/ui/__tests__/dialog.test.tsx
index 710862533..b4c1f5aab 100644
--- a/web-app/src/components/ui/__tests__/dialog.test.tsx
+++ b/web-app/src/components/ui/__tests__/dialog.test.tsx
@@ -2,6 +2,7 @@ import { render, screen, fireEvent } from '@testing-library/react'
 import { describe, it, expect, vi } from 'vitest'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
+import '@testing-library/jest-dom'
 import {
   Dialog,
   DialogTrigger,
@@ -117,7 +118,7 @@ describe('Dialog Components', () => {
 
   it('applies proper classes to dialog content', async () => {
     const user = userEvent.setup()
-    
+
     render(
       <Dialog>
         <DialogTrigger>Open Dialog</DialogTrigger>
@@ -128,27 +129,38 @@ describe('Dialog Components', () => {
         </DialogContent>
       </Dialog>
     )
-    
+
     await user.click(screen.getByText('Open Dialog'))
-    
+
     const dialogContent = screen.getByRole('dialog')
     expect(dialogContent).toHaveClass(
       'bg-main-view',
+      'max-h-[calc(100%-80px)]',
+      'overflow-auto',
+      'border-main-view-fg/10',
+      'text-main-view-fg',
       'fixed',
       'top-[50%]',
       'left-[50%]',
-      'z-50',
+      'z-[90]',
+      'grid',
+      'w-full',
+      'max-w-[calc(100%-2rem)]',
       'translate-x-[-50%]',
       'translate-y-[-50%]',
-      'border',
+      'gap-4',
       'rounded-lg',
-      'shadow-lg'
+      'border',
+      'p-6',
+      'shadow-lg',
+      'duration-200',
+      'sm:max-w-lg'
     )
   })
 
   it('applies proper classes to dialog header', async () => {
     const user = userEvent.setup()
-    
+
     render(
       <Dialog>
         <DialogTrigger>Open Dialog</DialogTrigger>
@@ -159,11 +171,11 @@ describe('Dialog Components', () => {
         </DialogContent>
       </Dialog>
     )
-    
+
     await user.click(screen.getByText('Open Dialog'))
-    
+
     const dialogHeader = screen.getByText('Dialog Title').closest('div')
-    expect(dialogHeader).toHaveClass('flex', 'flex-col', 'gap-2', 'text-center')
+    expect(dialogHeader).toHaveClass('flex', 'flex-col', 'gap-2', 'text-center', 'sm:text-left')
   })
 
   it('applies proper classes to dialog title', async () => {
@@ -299,7 +311,7 @@ describe('Dialog Components', () => {
   it('supports onOpenChange callback', async () => {
     const onOpenChange = vi.fn()
     const user = userEvent.setup()
-    
+
     render(
       <Dialog onOpenChange={onOpenChange}>
         <DialogTrigger>Open Dialog</DialogTrigger>
@@ -310,9 +322,98 @@ describe('Dialog Components', () => {
         </DialogContent>
       </Dialog>
     )
-    
+
     await user.click(screen.getByText('Open Dialog'))
-    
+
     expect(onOpenChange).toHaveBeenCalledWith(true)
   })
+
+  it('can hide close button when showCloseButton is false', async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Dialog>
+        <DialogTrigger>Open Dialog</DialogTrigger>
+        <DialogContent showCloseButton={false}>
+          <DialogHeader>
+            <DialogTitle>Dialog Title</DialogTitle>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+    )
+
+    await user.click(screen.getByText('Open Dialog'))
+
+    expect(screen.queryByRole('button', { name: /close/i })).not.toBeInTheDocument()
+  })
+
+  it('shows close button by default', async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Dialog>
+        <DialogTrigger>Open Dialog</DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Dialog Title</DialogTitle>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+    )
+
+    await user.click(screen.getByText('Open Dialog'))
+
+    expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument()
+  })
+
+  it('accepts aria-describedby prop', async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Dialog>
+        <DialogTrigger>Open Dialog</DialogTrigger>
+        <DialogContent aria-describedby="custom-description">
+          <DialogHeader>
+            <DialogTitle>Dialog Title</DialogTitle>
+          </DialogHeader>
+          <p id="custom-description">Custom description text</p>
+        </DialogContent>
+      </Dialog>
+    )
+
+    await user.click(screen.getByText('Open Dialog'))
+
+    const dialogContent = screen.getByRole('dialog')
+    expect(dialogContent).toHaveAttribute('aria-describedby', 'custom-description')
+  })
+
+  it('applies data-slot attributes to components', async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Dialog>
+        <DialogTrigger>Open Dialog</DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Dialog Title</DialogTitle>
+            <DialogDescription>Dialog description</DialogDescription>
+          </DialogHeader>
+          <div>Dialog body content</div>
+          <DialogFooter>
+            <button>Footer button</button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+
+    expect(screen.getByText('Open Dialog')).toHaveAttribute('data-slot', 'dialog-trigger')
+
+    await user.click(screen.getByText('Open Dialog'))
+
+    expect(screen.getByRole('dialog')).toHaveAttribute('data-slot', 'dialog-content')
+    expect(screen.getByText('Dialog Title').closest('div')).toHaveAttribute('data-slot', 'dialog-header')
+    expect(screen.getByText('Dialog Title')).toHaveAttribute('data-slot', 'dialog-title')
+    expect(screen.getByText('Dialog description')).toHaveAttribute('data-slot', 'dialog-description')
+    expect(screen.getByText('Footer button').closest('div')).toHaveAttribute('data-slot', 'dialog-footer')
+  })
 })
\ No newline at end of file