diff --git a/src/components/MUI/DataDisplay/Typography.tsx b/src/components/MUI/DataDisplay/Typography.tsx
new file mode 100644
index 0000000..581ab8e
--- /dev/null
+++ b/src/components/MUI/DataDisplay/Typography.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import MuiTypography, {
+  TypographyProps as MuiTypographyProps,
+} from "@mui/material/Typography";
+
+export type TypographyProps = MuiTypographyProps;
+
+export const Typography = React.forwardRef<HTMLSpanElement, TypographyProps>(
+  (props, ref) => <MuiTypography ref={ref} {...props} />,
+);
+
+Typography.displayName = "Typography";
diff --git a/src/components/MUI/Inputs/Button.tsx b/src/components/MUI/Inputs/Button.tsx
new file mode 100644
index 0000000..bd8d79c
--- /dev/null
+++ b/src/components/MUI/Inputs/Button.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import MuiButton, { ButtonProps as MuiButtonProps } from "@mui/material/Button";
+
+export type ButtonProps = MuiButtonProps;
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, ...rest }, ref) => (
+    <MuiButton ref={ref} {...rest}>
+      {children}
+    </MuiButton>
+  ),
+);
+
+Button.displayName = "Button";
diff --git a/src/components/MUI/Inputs/IconButton.tsx b/src/components/MUI/Inputs/IconButton.tsx
new file mode 100644
index 0000000..52db5ef
--- /dev/null
+++ b/src/components/MUI/Inputs/IconButton.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import MuiIconButton, {
+  IconButtonProps as MuiIconButtonProps,
+} from "@mui/material/IconButton";
+
+export type IconButtonProps = MuiIconButtonProps;
+
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  (props, ref) => <MuiIconButton ref={ref} {...props} />,
+);
+
+IconButton.displayName = "IconButton";
diff --git a/src/components/MUI/Layout/Stack.tsx b/src/components/MUI/Layout/Stack.tsx
new file mode 100644
index 0000000..2006df5
--- /dev/null
+++ b/src/components/MUI/Layout/Stack.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import MuiStack, { StackProps as MuiStackProps } from "@mui/material/Stack";
+
+export type StackProps = MuiStackProps;
+
+export const Stack = React.forwardRef<HTMLDivElement, StackProps>(
+  (props, ref) => <MuiStack ref={ref} {...props} />,
+);
+
+Stack.displayName = "Stack";
diff --git a/src/components/MUI/Layout/Toolbar.tsx b/src/components/MUI/Layout/Toolbar.tsx
new file mode 100644
index 0000000..80b99a0
--- /dev/null
+++ b/src/components/MUI/Layout/Toolbar.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import MuiToolbar, {
+  ToolbarProps as MuiToolbarProps,
+} from "@mui/material/Toolbar";
+
+export type ToolbarProps = MuiToolbarProps;
+
+export const Toolbar = React.forwardRef<HTMLDivElement, ToolbarProps>(
+  (props, ref) => <MuiToolbar ref={ref} {...props} />,
+);
+
+Toolbar.displayName = "Toolbar";
diff --git a/src/components/MUI/Surfaces/Accordion.stories.tsx b/src/components/MUI/Surfaces/Accordion.stories.tsx
new file mode 100644
index 0000000..ac342d7
--- /dev/null
+++ b/src/components/MUI/Surfaces/Accordion.stories.tsx
@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Accordion } from "./Accordion";
+import { AccordionDetails } from "./AccordionDetails";
+import { AccordionSummary } from "./AccordionSummary";
+import { ExpandMoreIcon } from "./Icons/ExpandMoreIcon";
+import { Stack } from "../Layout/Stack";
+import { Typography } from "../DataDisplay/Typography";
+
+const meta: Meta<typeof Accordion> = {
+  title: "MUI/Surfaces/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: { control: "boolean" },
+    disableGutters: { control: "boolean" },
+    square: { control: "boolean" },
+    defaultExpanded: { control: "boolean" },
+    expanded: { control: false },
+    onChange: { control: false },
+    sx: { control: false },
+  },
+  args: {
+    disabled: false,
+    disableGutters: false,
+    square: false,
+    defaultExpanded: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography>Summary</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography>Details</Typography>
+      </AccordionDetails>
+    </Accordion>
+  ),
+};
+
+export const Multiple: Story = {
+  render: (args) => (
+    <Stack spacing={1.5}>
+      <Accordion {...args}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography>Item 1</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>Content 1</Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion {...args}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography>Item 2</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>Content 2</Typography>
+        </AccordionDetails>
+      </Accordion>
+    </Stack>
+  ),
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography>Disabled</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography>Cannot expand</Typography>
+      </AccordionDetails>
+    </Accordion>
+  ),
+};
+
+export const DefaultExpanded: Story = {
+  args: { defaultExpanded: true },
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography>Expanded by default</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography>Initial content is visible</Typography>
+      </AccordionDetails>
+    </Accordion>
+  ),
+};
diff --git a/src/components/MUI/Surfaces/Accordion.tsx b/src/components/MUI/Surfaces/Accordion.tsx
new file mode 100644
index 0000000..56649a6
--- /dev/null
+++ b/src/components/MUI/Surfaces/Accordion.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import MuiAccordion, {
+  AccordionProps as MuiAccordionProps,
+} from "@mui/material/Accordion";
+
+export type AccordionProps = MuiAccordionProps;
+
+export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
+  (props, ref) => <MuiAccordion ref={ref} {...props} />,
+);
+
+Accordion.displayName = "Accordion";
diff --git a/src/components/MUI/Surfaces/AccordionDetails.tsx b/src/components/MUI/Surfaces/AccordionDetails.tsx
new file mode 100644
index 0000000..15a9d2f
--- /dev/null
+++ b/src/components/MUI/Surfaces/AccordionDetails.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import MuiAccordionDetails, {
+  AccordionDetailsProps as MuiAccordionDetailsProps,
+} from "@mui/material/AccordionDetails";
+
+export type AccordionDetailsProps = MuiAccordionDetailsProps;
+
+export const AccordionDetails = React.forwardRef<
+  HTMLDivElement,
+  AccordionDetailsProps
+>((props, ref) => <MuiAccordionDetails ref={ref} {...props} />);
+
+AccordionDetails.displayName = "AccordionDetails";
diff --git a/src/components/MUI/Surfaces/AccordionSummary.tsx b/src/components/MUI/Surfaces/AccordionSummary.tsx
new file mode 100644
index 0000000..ae0a03a
--- /dev/null
+++ b/src/components/MUI/Surfaces/AccordionSummary.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import MuiAccordionSummary, {
+  AccordionSummaryProps as MuiAccordionSummaryProps,
+} from "@mui/material/AccordionSummary";
+
+export type AccordionSummaryProps = MuiAccordionSummaryProps;
+
+export const AccordionSummary = React.forwardRef<
+  HTMLDivElement,
+  AccordionSummaryProps
+>((props, ref) => <MuiAccordionSummary ref={ref} {...props} />);
+
+AccordionSummary.displayName = "AccordionSummary";
diff --git a/src/components/MUI/Surfaces/AppBar.stories.tsx b/src/components/MUI/Surfaces/AppBar.stories.tsx
new file mode 100644
index 0000000..3713156
--- /dev/null
+++ b/src/components/MUI/Surfaces/AppBar.stories.tsx
@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AppBar } from "./AppBar";
+import { Toolbar } from "../Layout/Toolbar";
+import { Typography } from "../DataDisplay/Typography";
+import { IconButton } from "../Inputs/IconButton";
+import { Button } from "../Inputs/Button";
+import { MenuIcon } from "./Icons/MenuIcon";
+
+const meta: Meta<typeof AppBar> = {
+  title: "MUI/Surfaces/AppBar",
+  component: AppBar,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  argTypes: {
+    position: {
+      control: "select",
+      options: ["fixed", "absolute", "sticky", "static", "relative"],
+    },
+    color: {
+      control: "select",
+      options: ["default", "primary", "secondary", "inherit", "transparent"],
+    },
+    elevation: {
+      control: { type: "number", min: 0, max: 24, step: 1 },
+    },
+    sx: { control: false },
+  },
+  args: {
+    position: "static",
+    color: "primary",
+    elevation: 4,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <AppBar {...args}>
+      <Toolbar>
+        <IconButton size="large" edge="start" color="inherit" aria-label="menu">
+          <MenuIcon />
+        </IconButton>
+        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+          Application title
+        </Typography>
+        <Button color="inherit">Login</Button>
+      </Toolbar>
+    </AppBar>
+  ),
+};
diff --git a/src/components/MUI/Surfaces/AppBar.tsx b/src/components/MUI/Surfaces/AppBar.tsx
new file mode 100644
index 0000000..99b3971
--- /dev/null
+++ b/src/components/MUI/Surfaces/AppBar.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
+
+export type AppBarProps = MuiAppBarProps;
+
+export const AppBar = React.forwardRef<HTMLDivElement, AppBarProps>(
+  (props, ref) => <MuiAppBar ref={ref} {...props} />,
+);
+
+AppBar.displayName = "AppBar";
diff --git a/src/components/MUI/Surfaces/Card.stories.tsx b/src/components/MUI/Surfaces/Card.stories.tsx
new file mode 100644
index 0000000..d0443dd
--- /dev/null
+++ b/src/components/MUI/Surfaces/Card.stories.tsx
@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Card } from "./Card";
+import { Typography } from "../DataDisplay/Typography";
+import { Button } from "../Inputs/Button";
+import { CardContent } from "./CardContent";
+import { CardActions } from "./CardActions";
+import { CardMedia } from "./CardMedia";
+import Diamond from "../../../public/images/diamond.jpg";
+
+const meta: Meta<typeof Card> = {
+  title: "MUI/Surfaces/Card",
+  component: Card,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["elevation", "outlined"],
+    },
+    raised: { control: "boolean" },
+    elevation: {
+      control: { type: "number", min: 0, max: 24, step: 1 },
+    },
+    sx: { control: false },
+  },
+  args: {
+    variant: "elevation",
+    raised: false,
+    elevation: 1,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <Card {...args} sx={{ maxWidth: 345 }}>
+      <CardMedia component="img" image={Diamond} />
+      <CardContent>
+        <Typography gutterBottom variant="h6" component="div">
+          Diamond Light Source
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          Diamond Light Source is the UK’s national synchrotron serving
+          scientists and researchers from around the world.
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <Button size="small">Share</Button>
+        <Button size="small">Learn more</Button>
+      </CardActions>
+    </Card>
+  ),
+};
+
+export const Outlined: Story = {
+  args: {
+    variant: "outlined",
+    elevation: 0,
+  },
+  render: (args) => (
+    <Card {...args} sx={{ maxWidth: 345 }}>
+      <CardContent>
+        <Typography variant="h6">Outlined card</Typography>
+        <Typography variant="body2" color="text.secondary">
+          Uses the outlined variant with zero elevation.
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <Button size="small">Action</Button>
+      </CardActions>
+    </Card>
+  ),
+};
diff --git a/src/components/MUI/Surfaces/Card.tsx b/src/components/MUI/Surfaces/Card.tsx
new file mode 100644
index 0000000..ab1ee4a
--- /dev/null
+++ b/src/components/MUI/Surfaces/Card.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import MuiCard, { CardProps as MuiCardProps } from "@mui/material/Card";
+
+export type CardProps = MuiCardProps;
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  (props, ref) => <MuiCard ref={ref} {...props} />,
+);
+
+Card.displayName = "Card";
diff --git a/src/components/MUI/Surfaces/CardActions.tsx b/src/components/MUI/Surfaces/CardActions.tsx
new file mode 100644
index 0000000..c912226
--- /dev/null
+++ b/src/components/MUI/Surfaces/CardActions.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import MuiCardActions, {
+  CardActionsProps as MuiCardActionsProps,
+} from "@mui/material/CardActions";
+
+export type CardActionsProps = MuiCardActionsProps;
+
+export const CardActions = React.forwardRef<HTMLDivElement, CardActionsProps>(
+  (props, ref) => <MuiCardActions ref={ref} {...props} />,
+);
+
+CardActions.displayName = "CardActions";
diff --git a/src/components/MUI/Surfaces/CardContent.tsx b/src/components/MUI/Surfaces/CardContent.tsx
new file mode 100644
index 0000000..88a61e9
--- /dev/null
+++ b/src/components/MUI/Surfaces/CardContent.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import MuiCardContent, {
+  CardContentProps as MuiCardContentProps,
+} from "@mui/material/CardContent";
+
+export type CardContentProps = MuiCardContentProps;
+
+export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
+  (props, ref) => <MuiCardContent ref={ref} {...props} />,
+);
+
+CardContent.displayName = "CardContent";
diff --git a/src/components/MUI/Surfaces/CardMedia.tsx b/src/components/MUI/Surfaces/CardMedia.tsx
new file mode 100644
index 0000000..89271cf
--- /dev/null
+++ b/src/components/MUI/Surfaces/CardMedia.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import MuiCardMedia, {
+  CardMediaProps as MuiCardMediaProps,
+} from "@mui/material/CardMedia";
+
+export type CardMediaProps = MuiCardMediaProps;
+
+export const CardMedia = React.forwardRef<HTMLDivElement, CardMediaProps>(
+  (props, ref) => <MuiCardMedia ref={ref} {...props} />,
+);
+
+CardMedia.displayName = "CardMedia";
diff --git a/src/components/MUI/Surfaces/Icons/ExpandMoreIcon.tsx b/src/components/MUI/Surfaces/Icons/ExpandMoreIcon.tsx
new file mode 100644
index 0000000..9abb449
--- /dev/null
+++ b/src/components/MUI/Surfaces/Icons/ExpandMoreIcon.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import MuiExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import type { SvgIconProps } from "@mui/material/SvgIcon";
+
+export type ExpandMoreIconProps = SvgIconProps;
+
+export const ExpandMoreIcon = React.forwardRef<
+  SVGSVGElement,
+  ExpandMoreIconProps
+>((props, ref) => <MuiExpandMoreIcon ref={ref} {...props} />);
+
+ExpandMoreIcon.displayName = "ExpandMoreIcon";
diff --git a/src/components/MUI/Surfaces/Icons/MenuIcon.tsx b/src/components/MUI/Surfaces/Icons/MenuIcon.tsx
new file mode 100644
index 0000000..f076f76
--- /dev/null
+++ b/src/components/MUI/Surfaces/Icons/MenuIcon.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+import MuiMenuIcon from "@mui/icons-material/Menu";
+import type { SvgIconProps } from "@mui/material/SvgIcon";
+
+export type MenuIconProps = SvgIconProps;
+
+export const MenuIcon = React.forwardRef<SVGSVGElement, MenuIconProps>(
+  (props, ref) => <MuiMenuIcon ref={ref} {...props} />,
+);
+
+MenuIcon.displayName = "MenuIcon";
diff --git a/src/components/MUI/Surfaces/Paper.stories.tsx b/src/components/MUI/Surfaces/Paper.stories.tsx
new file mode 100644
index 0000000..04a4dba
--- /dev/null
+++ b/src/components/MUI/Surfaces/Paper.stories.tsx
@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Paper } from "./Paper";
+import { Typography } from "../DataDisplay/Typography";
+import { Stack } from "../Layout/Stack";
+
+const meta: Meta<typeof Paper> = {
+  title: "MUI/Surfaces/Paper",
+  component: Paper,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["elevation", "outlined"],
+    },
+    elevation: {
+      control: {
+        type: "number",
+        min: 0,
+        max: 24,
+        step: 1,
+      },
+    },
+    square: { control: "boolean" },
+    sx: { control: false },
+  },
+  args: {
+    variant: "elevation",
+    elevation: 1,
+    square: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <Paper {...args} sx={{ p: 2, maxWidth: 360 }}>
+      <Typography>Paper content</Typography>
+    </Paper>
+  ),
+};
+
+export const Variants: Story = {
+  render: (_args) => (
+    <Stack direction="row" spacing={2}>
+      <Paper variant="elevation" elevation={2} sx={{ p: 2 }}>
+        <Typography>Elevation</Typography>
+      </Paper>
+      <Paper variant="outlined" sx={{ p: 2 }}>
+        <Typography>Outlined</Typography>
+      </Paper>
+    </Stack>
+  ),
+};
+
+export const Elevations: Story = {
+  render: (_args) => (
+    <Stack direction="row" spacing={2}>
+      {[0, 3, 8, 16].map((level) => (
+        <Paper key={level} elevation={level} sx={{ p: 2 }}>
+          <Typography>Elevation {level}</Typography>
+        </Paper>
+      ))}
+    </Stack>
+  ),
+};
+
+export const Corners: Story = {
+  render: (_args) => (
+    <Stack direction="row" spacing={2}>
+      <Paper sx={{ p: 2, width: 200 }}>
+        <Typography>Rounded (default)</Typography>
+      </Paper>
+      <Paper square sx={{ p: 2, width: 200 }}>
+        <Typography>Square</Typography>
+      </Paper>
+    </Stack>
+  ),
+};
diff --git a/src/components/MUI/Surfaces/Paper.tsx b/src/components/MUI/Surfaces/Paper.tsx
new file mode 100644
index 0000000..ce0e7a6
--- /dev/null
+++ b/src/components/MUI/Surfaces/Paper.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import MuiPaper, { PaperProps as MuiPaperProps } from "@mui/material/Paper";
+
+export type PaperProps = MuiPaperProps;
+
+export const Paper = React.forwardRef<HTMLDivElement, PaperProps>(
+  (props, ref) => <MuiPaper ref={ref} {...props} />,
+);
+
+Paper.displayName = "Paper";