diff --git a/ts/components/conversation/media-gallery/EmptyState.md b/ts/components/conversation/media-gallery/EmptyState.md
new file mode 100644
index 0000000000..d89fd3e87b
--- /dev/null
+++ b/ts/components/conversation/media-gallery/EmptyState.md
@@ -0,0 +1,5 @@
+```js
+<div style={{position: 'relative', width: '100%', height: 300}}>
+  <EmptyState label="You have no attachments with media"/>
+</div>
+```
diff --git a/ts/components/conversation/media-gallery/EmptyState.tsx b/ts/components/conversation/media-gallery/EmptyState.tsx
new file mode 100644
index 0000000000..17af206773
--- /dev/null
+++ b/ts/components/conversation/media-gallery/EmptyState.tsx
@@ -0,0 +1,29 @@
+/**
+ * @prettier
+ */
+import React from 'react';
+
+import * as Colors from '../../styles/Colors';
+
+interface Props {
+  label: string;
+}
+
+const styles = {
+  container: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexGrow: 1,
+
+    fontSize: 28,
+    color: Colors.TEXT_SECONDARY,
+  } as React.CSSProperties,
+};
+
+export class EmptyState extends React.Component<Props, {}> {
+  public render() {
+    const { label } = this.props;
+    return <div style={styles.container}>{label}</div>;
+  }
+}
diff --git a/ts/components/styles/Colors.ts b/ts/components/styles/Colors.ts
new file mode 100644
index 0000000000..bcc7f814f5
--- /dev/null
+++ b/ts/components/styles/Colors.ts
@@ -0,0 +1,4 @@
+/**
+ * @prettier
+ */
+export const TEXT_SECONDARY = '#bbb';