diff --git a/client/src/components/ui/DialogTemplate.spec.tsx b/client/src/components/ui/DialogTemplate.spec.tsx
new file mode 100644
index 0000000000..ecce03bc93
--- /dev/null
+++ b/client/src/components/ui/DialogTemplate.spec.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import DialogTemplate from './DialogTemplate';
+import { Dialog } from '@radix-ui/react-dialog';
+
+describe('DialogTemplate', () => {
+  let mockSelectHandler;
+
+  beforeEach(() => {
+    mockSelectHandler = jest.fn();
+  });
+
+  it('renders correctly with all props', () => {
+    const { getByText } = render(
+      <Dialog open onOpenChange={() => {}}>
+        <DialogTemplate
+          title="Test Dialog"
+          description="Test Description"
+          main={<div>Main Content</div>}
+          buttons={<button>Button</button>}
+          leftButtons={<button>Left Button</button>}
+          selection={{ selectHandler: mockSelectHandler, selectText: "Select" }}
+        />
+      </Dialog>
+    );
+
+    expect(getByText('Test Dialog')).toBeInTheDocument();
+    expect(getByText('Test Description')).toBeInTheDocument();
+    expect(getByText('Main Content')).toBeInTheDocument();
+    expect(getByText('Button')).toBeInTheDocument();
+    expect(getByText('Left Button')).toBeInTheDocument();
+    expect(getByText('Cancel')).toBeInTheDocument();
+    expect(getByText('Select')).toBeInTheDocument();
+  });
+
+  it('renders correctly without optional props', () => {
+    const { getByText, queryByText } = render(
+      <Dialog open onOpenChange={() => {}}>
+        <DialogTemplate
+          title="Test Dialog"
+        />
+      </Dialog>
+    );
+
+    expect(getByText('Test Dialog')).toBeInTheDocument();
+    expect(queryByText('Test Description')).not.toBeInTheDocument();
+    expect(queryByText('Main Content')).not.toBeInTheDocument();
+    expect(queryByText('Button')).not.toBeInTheDocument();
+    expect(queryByText('Left Button')).not.toBeInTheDocument();
+    expect(getByText('Cancel')).toBeInTheDocument();
+    expect(queryByText('Select')).not.toBeInTheDocument();
+  });
+
+  it('calls selectHandler when the select button is clicked', () => {
+    const { getByText } = render(
+      <Dialog open onOpenChange={() => {}}>
+        <DialogTemplate
+          title="Test Dialog"
+          selection={{ selectHandler: mockSelectHandler, selectText: "Select" }}
+        />
+      </Dialog>
+    );
+
+    fireEvent.click(getByText('Select'));
+
+    expect(mockSelectHandler).toHaveBeenCalled();
+  });
+});