diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog.module.scss b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog.module.scss
new file mode 100644
index 000000000..46f7abb73
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog.module.scss
@@ -0,0 +1,16 @@
+// Dialog molecule component styles
+
+.trigger {
+  display: inline-flex;
+}
+
+.closeButton {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
+}
+
+.description {
+  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
+}
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog.tsx b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog.tsx
index e7b31c747..0b2bf2d15 100644
--- a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog.tsx
+++ b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog.tsx
@@ -1,21 +1,22 @@
 'use client'
 
-import {
-  Box,
-  Dialog as MuiDialog,
-  DialogProps as MuiDialogProps,
-  DialogTitle as MuiDialogTitle,
-  IconButton,
-  Typography,
-} from '@mui/material'
 import { forwardRef, ReactNode } from 'react'
 
+import { Box } from '@/fakemui/fakemui/layout'
+import { Typography } from '@/fakemui/fakemui/data-display'
+import { IconButton } from '@/fakemui/fakemui/inputs'
+import {
+  Dialog as FakeMuiDialog,
+  DialogTitle as FakeMuiDialogTitle,
+} from '@/fakemui/fakemui/utils'
 import { Close } from '@/fakemui/icons'
 
 import { DialogContent, type DialogContentProps } from './dialog/Body'
 import { DialogFooter, type DialogFooterProps } from './dialog/Footer'
 import { DialogHeader, type DialogHeaderProps } from './dialog/Header'
 
+import styles from './Dialog.module.scss'
+
 export interface DialogProps extends Omit<MuiDialogProps, 'onClose'> {
   onOpenChange?: (open: boolean) => void
   onClose?: () => void
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Body.module.scss b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Body.module.scss
new file mode 100644
index 000000000..40e5f0211
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Body.module.scss
@@ -0,0 +1,17 @@
+// DialogBody molecule component styles
+
+.body {
+  position: relative;
+  padding: 16px 24px;
+
+  &.hasCloseButton {
+    padding-top: 48px;
+  }
+}
+
+.closeButton {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
+}
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Footer.module.scss b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Footer.module.scss
new file mode 100644
index 000000000..10fabe11b
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Footer.module.scss
@@ -0,0 +1,9 @@
+// DialogFooter molecule component styles
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 16px 24px;
+  gap: 8px;
+}
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Header.module.scss b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Header.module.scss
new file mode 100644
index 000000000..72aa22288
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Header.module.scss
@@ -0,0 +1,8 @@
+// DialogHeader molecule component styles
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-bottom: 16px;
+}
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Sections.module.scss b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Sections.module.scss
new file mode 100644
index 000000000..de713f974
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Sections.module.scss
@@ -0,0 +1,12 @@
+// DialogSections molecule component styles
+
+.sections {
+  display: flex;
+  flex-direction: column;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/DropdownMenu/MenuItem.module.scss b/frontends/nextjs/src/components/ui/molecules/overlay/DropdownMenu/MenuItem.module.scss
new file mode 100644
index 000000000..8c667be3a
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/molecules/overlay/DropdownMenu/MenuItem.module.scss
@@ -0,0 +1,31 @@
+// MenuItem molecule component styles
+
+.container {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+
+  &.hasDescription {
+    align-items: flex-start;
+  }
+}
+
+.content {
+  flex: 1;
+}
+
+.label {
+  font-size: 0.875rem;
+  line-height: 1.43;
+}
+
+.description {
+  margin-top: 4px;
+  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
+}
+
+.detail {
+  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
+  font-size: 0.875rem;
+}