diff --git a/ts/components/conversation/media-gallery/EmptyState.md b/ts/components/conversation/media-gallery/EmptyState.md
deleted file mode 100644
index 47a148cc9f..0000000000
--- a/ts/components/conversation/media-gallery/EmptyState.md
+++ /dev/null
@@ -1,29 +0,0 @@
-### Media Empty State
-
-```js
-<div
-  style={{
-    display: 'flex',
-    position: 'relative',
-    width: '100%',
-    height: 200,
-  }}
->
-  <EmptyState label={util.i18n('mediaEmptyState')} />
-</div>
-```
-
-### Documents Empty State
-
-```js
-<div
-  style={{
-    display: 'flex',
-    position: 'relative',
-    width: '100%',
-    height: 500,
-  }}
->
-  <EmptyState label={util.i18n('documentsEmptyState')} />
-</div>
-```
diff --git a/ts/components/conversation/media-gallery/EmptyState.stories.tsx b/ts/components/conversation/media-gallery/EmptyState.stories.tsx
new file mode 100644
index 0000000000..94ded82977
--- /dev/null
+++ b/ts/components/conversation/media-gallery/EmptyState.stories.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { text, withKnobs } from '@storybook/addon-knobs';
+import { EmptyState } from './EmptyState';
+
+const story = storiesOf(
+  'Components/Conversation/MediaGallery/EmptyState',
+  module
+);
+
+story.addDecorator((withKnobs as any)({ escapeHTML: false }));
+
+story.add('Default', () => {
+  return <EmptyState label={text('label', 'placeholder text')} />;
+});