diff --git a/src/components/MUI/Feedback/Alert.stories.tsx b/src/components/MUI/Feedback/Alert.stories.tsx
new file mode 100644
index 0000000..4ce149e
--- /dev/null
+++ b/src/components/MUI/Feedback/Alert.stories.tsx
@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Alert, Button, Stack } from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof Alert> = {
+  title: "MUI/Feedback/Alert",
+  component: Alert,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  argTypes: {
+    severity: {
+      control: "select",
+      options: ["success", "info", "warning", "error"],
+    },
+    variant: { control: "select", options: ["standard", "outlined", "filled"] },
+    children: { name: "message", control: "text" },
+    icon: { control: false },
+    action: { control: false },
+    onClose: { control: false },
+  },
+  args: {
+    severity: "info",
+    variant: "standard",
+    children: "Alert message",
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = { render: (args) => <Alert {...args} /> };
+
+export const Variants: Story = {
+  render: (args) => (
+    <Stack>
+      <Alert {...args} variant="standard">
+        Standard
+      </Alert>
+      <Alert {...args} variant="outlined">
+        Outlined
+      </Alert>
+      <Alert {...args} variant="filled">
+        Filled
+      </Alert>
+    </Stack>
+  ),
+};
+
+export const SeverityLevels: Story = {
+  render: (args) => (
+    <Stack>
+      <Alert {...args} severity="success">
+        This is a success alert
+      </Alert>
+      <Alert {...args} severity="info">
+        This is an info alert
+      </Alert>
+      <Alert {...args} severity="warning">
+        This is a warning alert
+      </Alert>
+      <Alert {...args} severity="error">
+        This is an error alert
+      </Alert>
+    </Stack>
+  ),
+};
+
+export const WithActionAndClose: Story = {
+  render: (args) => (
+    <>
+      <Alert
+        {...args}
+        severity="warning"
+        action={
+          <Button color="inherit" size="small">
+            UNDO
+          </Button>
+        }
+        onClose={() => console.log("alert close")}
+      >
+        Warning with action
+      </Alert>
+    </>
+  ),
+};
diff --git a/src/components/MUI/Feedback/Backdrop.stories.tsx b/src/components/MUI/Feedback/Backdrop.stories.tsx
new file mode 100644
index 0000000..ba99c8a
--- /dev/null
+++ b/src/components/MUI/Feedback/Backdrop.stories.tsx
@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import * as React from "react";
+import { Backdrop, Button, CircularProgress, Stack } from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof Backdrop> = {
+  title: "MUI/Feedback/Backdrop",
+  component: Backdrop,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  argTypes: {
+    invisible: { control: "boolean" },
+  },
+  args: { invisible: false },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => {
+    return (
+      <Stack direction="row">
+        <Backdrop {...args} open={true}>
+          <CircularProgress />
+        </Backdrop>
+      </Stack>
+    );
+  },
+};
+
+/**
+ * Click show to open backdrop and click again to close.
+ */
+export const ControlledBackdrop: Story = {
+  render: (args) => {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <Stack direction="row">
+        <Button onClick={() => setOpen(true)}>Show</Button>
+        <Backdrop {...args} open={open} onClick={() => setOpen(false)}>
+          <CircularProgress />
+        </Backdrop>
+      </Stack>
+    );
+  },
+};
diff --git a/src/components/MUI/Feedback/CircularProgress.stories.tsx b/src/components/MUI/Feedback/CircularProgress.stories.tsx
new file mode 100644
index 0000000..caadb43
--- /dev/null
+++ b/src/components/MUI/Feedback/CircularProgress.stories.tsx
@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CircularProgress, Stack, Typography } from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof CircularProgress> = {
+  title: "MUI/Feedback/CircularProgress",
+  component: CircularProgress,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  argTypes: {
+    color: {
+      control: "select",
+      options: [
+        "primary",
+        "secondary",
+        "success",
+        "error",
+        "info",
+        "warning",
+        "inherit",
+      ],
+    },
+    variant: { control: "select", options: ["indeterminate", "determinate"] },
+    value: { control: { type: "number", min: 0, max: 100, step: 1 } },
+    size: { control: { type: "number", min: 8, max: 200, step: 2 } },
+    thickness: { control: { type: "number", min: 1, max: 10, step: 0.5 } },
+  },
+  args: {
+    color: "primary",
+    variant: "indeterminate",
+    value: 75,
+    size: 40,
+    thickness: 3.6,
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => <CircularProgress {...args} />,
+};
+
+export const Determinate: Story = {
+  args: { variant: "determinate", value: 70 },
+  render: (args) => <CircularProgress {...args} />,
+};
+
+export const DeterminateValues: Story = {
+  render: (args) => (
+    <Stack direction="row" spacing={4}>
+      {[0, 25, 50, 75, 100].map((value) => (
+        <Stack key={value} alignItems="center" spacing={1}>
+          <CircularProgress {...args} variant="determinate" value={value} />
+          <Typography variant="caption">{value}%</Typography>
+        </Stack>
+      ))}
+    </Stack>
+  ),
+};
+
+export const Sizes: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "Circular Progress in different sizes.",
+      },
+    },
+  },
+  render: (args) => (
+    <Stack direction="row" spacing={4}>
+      {[16, 24, 40, 64, 80].map((size) => (
+        <CircularProgress
+          key={size}
+          {...args}
+          variant="determinate"
+          size={size}
+        />
+      ))}
+    </Stack>
+  ),
+};
+
+export const Thickness: Story = {
+  parameters: {},
+  render: (args) => (
+    <Stack direction="row" spacing={4}>
+      {[2, 3.6, 5, 7].map((thickness) => (
+        <CircularProgress
+          key={thickness}
+          {...args}
+          variant="determinate"
+          thickness={thickness}
+        />
+      ))}
+    </Stack>
+  ),
+};
diff --git a/src/components/MUI/Feedback/Dialog.stories.tsx b/src/components/MUI/Feedback/Dialog.stories.tsx
new file mode 100644
index 0000000..9ad50c9
--- /dev/null
+++ b/src/components/MUI/Feedback/Dialog.stories.tsx
@@ -0,0 +1,84 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Typography,
+} from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof Dialog> = {
+  title: "MUI/Feedback/Dialog",
+  component: Dialog,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  argTypes: {
+    fullWidth: { control: "boolean" },
+    maxWidth: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl", false],
+    },
+    fullScreen: { control: "boolean" },
+    scroll: { control: "select", options: ["paper", "body"] },
+  },
+  args: { fullWidth: true, maxWidth: "sm", fullScreen: false, scroll: "paper" },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <Box style={{ display: "flex", gap: 12 }}>
+        <Button onClick={() => setOpen(true)}>Open dialog</Button>
+        <Dialog {...args} open={open} onClose={() => setOpen(false)}>
+          <DialogTitle>Title</DialogTitle>
+          <DialogContent dividers>
+            <Typography variant="body2">Content goes here.</Typography>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={() => setOpen(false)}>Close</Button>
+            <Button variant="contained">Action</Button>
+          </DialogActions>
+        </Dialog>
+      </Box>
+    );
+  },
+};
+
+export const FullScreen: Story = {
+  args: { fullScreen: true },
+  render: (args) => {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <div style={{ display: "flex", gap: 12 }}>
+        <Button onClick={() => setOpen(true)}>Open full-screen</Button>
+        <Dialog
+          {...args}
+          open={open}
+          scroll="body"
+          onClose={() => setOpen(false)}
+        >
+          <DialogTitle>Full Screen</DialogTitle>
+          <DialogContent dividers>
+            <Typography>Full-screen content.</Typography>
+          </DialogContent>
+          <DialogActions>
+            <Button
+              variant="contained"
+              size="large"
+              onClick={() => setOpen(false)}
+            >
+              Close
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    );
+  },
+};
diff --git a/src/components/MUI/Feedback/LinearProgress.stories.tsx b/src/components/MUI/Feedback/LinearProgress.stories.tsx
new file mode 100644
index 0000000..1cac2bf
--- /dev/null
+++ b/src/components/MUI/Feedback/LinearProgress.stories.tsx
@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { LinearProgress, Stack, Typography } from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof LinearProgress> = {
+  title: "MUI/Feedback/LinearProgress",
+  component: LinearProgress,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  argTypes: {
+    color: {
+      control: "select",
+      options: [
+        "primary",
+        "secondary",
+        "success",
+        "error",
+        "info",
+        "warning",
+        "inherit",
+      ],
+    },
+    variant: {
+      control: "select",
+      options: ["indeterminate", "determinate", "buffer", "query"],
+    },
+    value: { control: { type: "number", min: 0, max: 100, step: 1 } },
+    valueBuffer: { control: { type: "number", min: 0, max: 100, step: 1 } },
+  },
+  args: {
+    color: "primary",
+    variant: "indeterminate",
+    value: 40,
+    valueBuffer: 60,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => <LinearProgress {...args} />,
+};
+
+export const Determinate: Story = {
+  args: { variant: "determinate", value: 50 },
+  render: (args) => <LinearProgress {...args} />,
+};
+
+export const Buffer: Story = {
+  args: { variant: "buffer", value: 30, valueBuffer: 60 },
+  render: (args) => <LinearProgress {...args} />,
+};
+
+export const Query: Story = {
+  args: { variant: "query" },
+  render: (args) => <LinearProgress {...args} />,
+};
+
+export const DeterminateValues: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "Determinate linear progress with different values.",
+      },
+    },
+  },
+  render: (args) => (
+    <Stack spacing={3}>
+      {[0, 25, 50, 75, 100].map((value) => (
+        <LinearProgress
+          key={value}
+          {...args}
+          variant="determinate"
+          value={value}
+        />
+      ))}
+    </Stack>
+  ),
+};
+
+export const WithLabelValues: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "Linear progress with value labels.",
+      },
+    },
+  },
+  render: (args) => (
+    <Stack spacing={3} sx={{ width: 300 }}>
+      {[0, 25, 50, 75, 100].map((value) => (
+        <Stack key={value} spacing={1}>
+          <LinearProgress {...args} variant="determinate" value={value} />
+          <Typography variant="caption">{value}%</Typography>
+        </Stack>
+      ))}
+    </Stack>
+  ),
+};
diff --git a/src/components/MUI/Feedback/Skeleton.stories.tsx b/src/components/MUI/Feedback/Skeleton.stories.tsx
new file mode 100644
index 0000000..3a7332b
--- /dev/null
+++ b/src/components/MUI/Feedback/Skeleton.stories.tsx
@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Skeleton, Stack, Typography } from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof Skeleton> = {
+  title: "MUI/Feedback/Skeleton",
+  component: Skeleton,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["text", "rectangular", "circular", "rounded"],
+    },
+    animation: {
+      control: "select",
+      options: ["pulse", "wave", false],
+    },
+    width: {
+      control: { type: "number", min: 16, max: 600, step: 4 },
+    },
+    height: {
+      control: { type: "number", min: 16, max: 400, step: 4 },
+    },
+  },
+  args: {
+    variant: "rectangular",
+    animation: "pulse",
+    width: 240,
+    height: 180,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Skeleton represents elements while content is loading.
+ * Multiple Skeletons can be composed to represent complex layouts.
+ */
+export const Basic: Story = {
+  render: (args) => <Skeleton {...args} />,
+};
+
+export const Variants: Story = {
+  render: (_args) => (
+    <Stack spacing={1}>
+      <Typography variant="caption">Text</Typography>
+      <Skeleton variant="text" sx={{ fontSize: "1rem" }} />
+      <Typography variant="caption">Circular</Typography>
+      <Skeleton variant="circular" width={40} height={40} />
+      <Typography variant="caption">Rectangular</Typography>
+      <Skeleton variant="rectangular" width={210} height={60} />
+      <Typography variant="caption">Rounded</Typography>
+      <Skeleton variant="rounded" width={210} height={60} />
+    </Stack>
+  ),
+};
+
+export const Animations: Story = {
+  render: (args) => (
+    <Stack spacing={3} sx={{ width: 300 }}>
+      <Stack spacing={1}>
+        <Typography variant="caption">Pulse</Typography>
+        <Skeleton {...args} animation="pulse" />
+      </Stack>
+      <Stack spacing={1}>
+        <Typography variant="caption">Wave</Typography>
+        <Skeleton {...args} animation="wave" />
+      </Stack>
+      <Stack spacing={1}>
+        <Typography variant="caption">None</Typography>
+        <Skeleton {...args} animation={false} />
+      </Stack>
+    </Stack>
+  ),
+};
diff --git a/src/components/MUI/Feedback/Snackbar.stories.tsx b/src/components/MUI/Feedback/Snackbar.stories.tsx
new file mode 100644
index 0000000..e0a4022
--- /dev/null
+++ b/src/components/MUI/Feedback/Snackbar.stories.tsx
@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Button, Snackbar, Stack } from "../MuiWrapped";
+import { muiDocsParameters } from "../../../../.storybook/muiDocsParameters";
+
+const meta: Meta<typeof Snackbar> = {
+  title: "MUI/Feedback/Snackbar",
+  component: Snackbar,
+  tags: ["autodocs"],
+  parameters: muiDocsParameters,
+  argTypes: {
+    message: {
+      control: "text",
+    },
+    autoHideDuration: {
+      control: { type: "number", min: 1000, max: 10000, step: 500 },
+    },
+  },
+  args: {
+    message: "Saved",
+    autoHideDuration: 3000,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => {
+    const [open, setOpen] = React.useState(false);
+
+    return (
+      <Stack direction="row" spacing={2} alignItems="center">
+        <Button variant="contained" onClick={() => setOpen(true)}>
+          Show
+        </Button>
+
+        <Snackbar
+          {...args}
+          open={open}
+          anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+          onClose={() => setOpen(false)}
+        />
+      </Stack>
+    );
+  },
+};
diff --git a/src/components/MUI/MuiWrapped.tsx b/src/components/MUI/MuiWrapped.tsx
index 8997504..13284a4 100644
--- a/src/components/MUI/MuiWrapped.tsx
+++ b/src/components/MUI/MuiWrapped.tsx
@@ -69,7 +69,32 @@ import MuiListItemText, {
 import MuiListSubheader, {
   ListSubheaderProps as MuiListSubheaderProps,
 } from "@mui/material/ListSubheader";
+import MuiBackdrop, {
+  BackdropProps as MuiBackdropProps,
+} from "@mui/material/Backdrop";
+import MuiCircularProgress, {
+  CircularProgressProps as MuiCircularProgressProps,
+} from "@mui/material/CircularProgress";
+import MuiDialog, { DialogProps as MuiDialogProps } from "@mui/material/Dialog";
+import MuiDialogTitle, {
+  DialogTitleProps as MuiDialogTitleProps,
+} from "@mui/material/DialogTitle";
+import MuiDialogActions, {
+  DialogActionsProps as MuiDialogActionsProps,
+} from "@mui/material/DialogActions";
+import MuiDialogContent, {
+  DialogContentProps as MuiDialogContentProps,
+} from "@mui/material/DialogContent";
+import MuiLinearProgress, {
+  LinearProgressProps as MuiLinearProgressProps,
+} from "@mui/material/LinearProgress";
 import MuiPaper, { PaperProps as MuiPaperProps } from "@mui/material/Paper";
+import MuiSkeleton, {
+  SkeletonProps as MuiSkeletonProps,
+} from "@mui/material/Skeleton";
+import MuiSnackbar, {
+  SnackbarProps as MuiSnackbarProps,
+} from "@mui/material/Snackbar";
 import MuiStack, { StackProps as MuiStackProps } from "@mui/material/Stack";
 import MuiSvgIcon, {
   SvgIconProps as MuiSvgIconProps,
@@ -128,6 +153,7 @@ export const AvatarGroup = MuiWrapper<MuiAvatarGroupProps>(
   "AvatarGroup",
 );
 export const Badge = MuiWrapper<MuiBadgeProps>(MuiBadge, "Badge");
+export const Backdrop = MuiWrapper<MuiBackdropProps>(MuiBackdrop, "Backdrop");
 export const Box = MuiWrapper<MuiBoxProps>(MuiBox, "Box");
 export const Button = MuiWrapper<MuiButtonProps>(MuiButton, "Button");
 export const Card = MuiWrapper<MuiCardProps>(MuiCard, "Card");
@@ -146,6 +172,23 @@ export const CardMedia = MuiWrapper<MuiCardMediaProps>(
 export const Chip = MuiWrapper<MuiChipProps>(MuiChip, "Chip");
 export const DeleteIcon = MuiWrapper(MuiDeleteIcon, "DeleteIcon");
 export const Divider = MuiWrapper<MuiDividerProps>(MuiDivider, "Divider");
+export const CircularProgress = MuiWrapper<
+  MuiCircularProgressProps,
+  HTMLSpanElement
+>(MuiCircularProgress, "CircularProgress");
+export const Dialog = MuiWrapper<MuiDialogProps>(MuiDialog, "Dialog");
+export const DialogActions = MuiWrapper<MuiDialogActionsProps>(
+  MuiDialogActions,
+  "DialogActions",
+);
+export const DialogContent = MuiWrapper<MuiDialogContentProps>(
+  MuiDialogContent,
+  "DialogContent",
+);
+export const DialogTitle = MuiWrapper<MuiDialogTitleProps>(
+  MuiDialogTitle,
+  "DialogTitle",
+);
 export const ExpandMoreIcon = MuiWrapper(MuiExpandMoreIcon, "ExpandMoreIcon");
 export const FolderIcon = MuiWrapper(MuiFolderIcon, "FolderIcon");
 export const Icon = MuiWrapper<MuiIconProps>(MuiIcon, "Icon");
@@ -177,6 +220,11 @@ export const ListSubheader = MuiWrapper<MuiListSubheaderProps>(
   "ListSubheader",
 );
 export const MailIcon = MuiWrapper(MuiMailIcon, "MailIcon");
+
+export const LinearProgress = MuiWrapper<MuiLinearProgressProps>(
+  MuiLinearProgress,
+  "LinearProgress",
+);
 export const MenuIcon = MuiWrapper(MuiMenuIcon, "MenuIcon");
 export const NotificationsIcon = MuiWrapper(
   MuiNotificationsIcon,
@@ -186,6 +234,8 @@ export const PageviewIcon = MuiWrapper(MuiPageviewIcon, "PageviewIcon");
 export const Paper = MuiWrapper<MuiPaperProps>(MuiPaper, "Paper");
 export const SaveIcon = MuiWrapper(MuiSaveIcon, "SaveIcon");
 export const SendIcon = MuiWrapper(MuiSendIcon, "SendIcon");
+export const Skeleton = MuiWrapper<MuiSkeletonProps>(MuiSkeleton, "Skeleton");
+export const Snackbar = MuiWrapper<MuiSnackbarProps>(MuiSnackbar, "Snackbar");
 export const Stack = MuiWrapper<MuiStackProps>(MuiStack, "Stack");
 export const SvgIcon = MuiWrapper<MuiSvgIconProps>(MuiSvgIcon, "SvgIcon");
 export const Table = MuiWrapper<MuiTableProps>(MuiTable, "Table");