diff --git a/platform/ui/src/components/Viewport/Viewport.mdx b/platform/ui/src/components/Viewport/Viewport.mdx
index e69de29bb..a30b481dc 100644
--- a/platform/ui/src/components/Viewport/Viewport.mdx
+++ b/platform/ui/src/components/Viewport/Viewport.mdx
@@ -0,0 +1,54 @@
+---
+name: Viewport
+menu: Data Display
+route: components/viewport
+---
+
+import { Playground, Props } from 'docz';
+import { Viewport } from '@ohif/ui';
+
+# Viewport
+
+Viewport component to be used in the ViewportGrid.
+
+## Import
+
+```javascript
+import { Viewport } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  <div className="p-4 h-screen">
+    <Viewport
+      viewportIndex={0}
+      onSeriesChange={(direction) => alert(`Series ${direction}`)}
+      studyData={{
+        label: 'A',
+        isTracked: true,
+        isLocked: false,
+        studyDate: '07-Sep-2011',
+        currentSeries: 1,
+        seriesDescription:
+          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
+        modality: 'CT',
+        patientInformation: {
+          patientName: 'Smith, Jane',
+          patientSex: 'F',
+          patientAge: '59',
+          MRN: '10000001',
+          thickness: '5.0mm',
+          spacing: '1.25mm',
+          scanner: 'Aquilion',
+        },
+      }}
+    >
+      <div className="flex justify-center items-center h-full">CONTENT</div>
+    </Viewport>
+  </div>
+</Playground>
+
+## Properties
+
+<Props of={Viewport} />