diff --git a/platform/ui/src/views/Viewer/Viewer.mdx b/platform/ui/src/views/Viewer/Viewer.mdx
index 391606b18..33a8ec1f0 100644
--- a/platform/ui/src/views/Viewer/Viewer.mdx
+++ b/platform/ui/src/views/Viewer/Viewer.mdx
@@ -5,10 +5,42 @@ route: views/viewer
 ---
 
 import { Playground, Props } from 'docz';
-import { Viewer } from '@ohif/ui';
+import { NavBar, SidePanel, Svg } from '@ohif/ui';
 
 # Viewer
 
 <Playground>
-  <Viewer />
+  <div>
+    <NavBar className="justify-start">
+      <div className="m-3">
+        <Svg name="logo-ohif" />
+      </div>
+    </NavBar>
+    <div
+      className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
+      style={{ height: 'calc(100vh - 57px' }}
+    >
+      <SidePanel
+        side="left"
+        iconName="info-link"
+        iconLabel="Studies"
+        componentLabel="Studies"
+        defaultIsOpen={false}
+      >
+        <div>LEFT SIDE PANE CONTENT</div>
+      </SidePanel>
+      <div className="flex-1 h-100 overflow-hidden w-100 bg-primary-main">
+        CONTENT
+      </div>
+      <SidePanel
+        side="right"
+        iconName="info-link"
+        iconLabel="Measure"
+        componentLabel="Measurements"
+        defaultIsOpen={true}
+      >
+        <div>RIGHT SIDE PANEL CONTENT</div>
+      </SidePanel>
+    </div>
+  </div>
 </Playground>