diff --git a/src/components/dialog/Dialog.tsx b/src/components/dialog/Dialog.tsx
new file mode 100644
index 0000000..09ef2a3
--- /dev/null
+++ b/src/components/dialog/Dialog.tsx
@@ -0,0 +1,58 @@
+import { Component, JSXElement } from 'solid-js';
+import {
+  Dialog as MuiDialog,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  IconButton,
+} from '@suid/material';
+import CloseIcon from '@suid/icons-material/Close';
+
+const Dialog: Component<{
+  open: boolean;
+  title: JSXElement;
+  closeHandler: () => void;
+  children: JSXElement;
+}> = (props) => {
+  return (
+    <MuiDialog
+      onClose={props.closeHandler}
+      open={props.open}
+      PaperProps={{ sx: { minWidth: '300px' } }}
+    >
+      <DialogTitle
+        sx={{
+          backgroundColor: 'rgba(14, 116, 144, 0.7)',
+          color: 'white',
+          clear: 'both',
+          paddingRight: '20px',
+        }}
+      >
+        <Grid container spacing={2} alignItems='center'>
+          <Grid item xs={11}>
+            {props.title}
+          </Grid>
+          <Grid
+            item
+            xs={1}
+            sx={{
+              alignSelf: 'right',
+              marginRight: '0px',
+              paddingRight: '0px',
+              paddingTop: '16px',
+            }}
+          >
+            <IconButton onClick={props.closeHandler}>
+              <CloseIcon />
+            </IconButton>
+          </Grid>
+        </Grid>
+      </DialogTitle>
+      <DialogContent sx={{ width: 'calc(100% - 60px)' }}>
+        {props.children}
+      </DialogContent>
+    </MuiDialog>
+  );
+};
+
+export default Dialog;
diff --git a/src/components/dialog/index.ts b/src/components/dialog/index.ts
new file mode 100644
index 0000000..e3f43f0
--- /dev/null
+++ b/src/components/dialog/index.ts
@@ -0,0 +1 @@
+export { default } from './Dialog';