diff --git a/src/components/Containers/PhoneShapedContainer.tsx b/src/components/Containers/PhoneShapedContainer.tsx
new file mode 100644
index 00000000..e11a1de6
--- /dev/null
+++ b/src/components/Containers/PhoneShapedContainer.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import { styled } from "@mui/material/styles";
+import Paper, { type PaperProps } from "@mui/material/Paper";
+import { containerClassNames } from "./classNames";
+import type { SetRequired } from "type-fest";
+
+/**
+ * A phone-shaped container for displaying images of mobile app UI.
+ *
+ * The `` element can be configured via the `imgProps` prop, or an
+ * `` element can be passed as a child.
+ */
+export const PhoneShapedContainer = ({
+ elevation = 24,
+ className = "",
+ imgProps,
+ children,
+ ...paperProps
+}: PhoneShapedContainerProps) => (
+
+ {imgProps ?
: children}
+
+);
+
+const StyledPaper = styled(Paper)(({ theme: { palette } }) => ({
+ borderRadius: "2rem",
+ borderWidth: "1px",
+ borderStyle: "solid",
+ borderColor: palette.divider,
+ "& > div": {
+ height: "100%",
+ borderRadius: "2rem",
+ borderWidth: "0.5rem",
+ borderStyle: "solid",
+ borderColor: palette.background.paper,
+ "& > img": {
+ height: "100%",
+ objectFit: "contain",
+ borderRadius: "1.35rem",
+ },
+ },
+}));
+
+export type PhoneShapedContainerProps = Omit &
+ (
+ | {
+ imgProps: SetRequired, "alt">;
+ children?: never;
+ }
+ | {
+ imgProps?: never;
+ children: React.ReactNode;
+ }
+ );