diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 7bbe41990..5f8877d0f 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -326,10 +326,18 @@
       "message": "Media",
       "description": "Header of the default pane in the media gallery, showing images and videos"
     },
+    "mediaEmptyState": {
+      "message": "You don’t have any media in this conversation",
+      "description": "Message shown to user in the media gallery when there are no messages with media attachments (images or video)"
+    },
     "documents": {
       "message": "Documents",
       "description": "Header of the secondary pane in the media gallery, showing every non-media attachment"
     },
+    "documentsEmptyState": {
+      "message": "You don’t have any documents in this conversation",
+      "description": "Message shown to user in the media gallery when there are no messages with document attachments (anything other than images or video)"
+    },
     "messageCaption": {
       "message": "Message caption",
       "description": "Prefix of attachment alt tags in the media gallery"
diff --git a/ts/components/conversation/media-gallery/MediaGallery.md b/ts/components/conversation/media-gallery/MediaGallery.md
index ca6e3a627..729117144 100644
--- a/ts/components/conversation/media-gallery/MediaGallery.md
+++ b/ts/components/conversation/media-gallery/MediaGallery.md
@@ -1,3 +1,17 @@
+### Empty states for missing media and documents
+
+```
+<div style={{width: '100%', height: 300}}>
+  <MediaGallery
+    i18n={window.i18n}
+    media={[]}
+    documents={[]}
+  />
+</div>
+```
+
+### Media gallery with media and documents
+
 ```jsx
 const DAY_MS = 24 * 60 * 60 * 1000;
 const MONTH_MS = 30 * DAY_MS;
diff --git a/ts/components/conversation/media-gallery/MediaGallery.tsx b/ts/components/conversation/media-gallery/MediaGallery.tsx
index 7d45ec737..8f06c7035 100644
--- a/ts/components/conversation/media-gallery/MediaGallery.tsx
+++ b/ts/components/conversation/media-gallery/MediaGallery.tsx
@@ -7,9 +7,11 @@ import moment from 'moment';
 
 import { AttachmentSection } from './AttachmentSection';
 import { AttachmentType } from './types/AttachmentType';
+import { EmptyState } from './EmptyState';
 import { groupMessagesByDate } from './groupMessagesByDate';
 import { ItemClickEvent } from './types/ItemClickEvent';
 import { Message } from './types/Message';
+import { missingCaseError } from '../../../util/missingCaseError';
 
 interface Props {
   documents: Array<Message>;
@@ -135,7 +137,19 @@ export class MediaGallery extends React.Component<Props, State> {
     const type = selectedTab;
 
     if (!messages || messages.length === 0) {
-      return null;
+      const label = (() => {
+        switch (type) {
+          case 'media':
+            return i18n('mediaEmptyState');
+
+          case 'documents':
+            return i18n('documentsEmptyState');
+
+          default:
+            throw missingCaseError(type);
+        }
+      })();
+      return <EmptyState data-test="EmptyState" label={label} />;
     }
 
     const now = Date.now();