diff --git a/platform/ui/src/components/StudyItem/StudyItem.mdx b/platform/ui/src/components/StudyItem/StudyItem.mdx
new file mode 100644
index 000000000..b94731dad
--- /dev/null
+++ b/platform/ui/src/components/StudyItem/StudyItem.mdx
@@ -0,0 +1,46 @@
+---
+name: StudyItem
+menu: General
+route: components/studyItem
+---
+
+import { useState } from 'react';
+import { Playground, Props } from 'docz';
+import { StudyItem } from '@ohif/ui';
+
+# StudyItem
+
+Used to expose study information as a card
+
+## Import
+
+```javascript
+import { StudyItem } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  {() => {
+    const [studyActive, setStudyActive] = useState(null);
+    return (
+      <div className="flex flex-1 items-center justify-center p-4">
+        <div className="w-56">
+          <StudyItem
+            studyInstanceUid="1"
+            date="07-Sept-2010"
+            description="CHEST/ABD/PELVIS W/CONTRAST"
+            numInstances={902}
+            modalities="CT,SR"
+            isActive={studyActive}
+            onClick={() => setStudyActive(studyActive === '1' ? null : '1')}
+          />
+        </div>
+      </div>
+    );
+  }}
+</Playground>
+
+## Properties
+
+<Props of={StudyItem} />
diff --git a/platform/ui/src/gatsby-theme-docz/components/Layout/index.js b/platform/ui/src/gatsby-theme-docz/components/Layout/index.js
index 8d82717c8..274f9ad47 100644
--- a/platform/ui/src/gatsby-theme-docz/components/Layout/index.js
+++ b/platform/ui/src/gatsby-theme-docz/components/Layout/index.js
@@ -15,7 +15,7 @@ export const Layout = ({ children }) => {
   const nav = useRef();
 
   const handleSidebarToggle = () => {
-    setSidebarOpen((s) => !s);
+    setSidebarOpen(s => !s);
   };
 
   return (
diff --git a/platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js b/platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js
index c34861d72..0696513b7 100644
--- a/platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js
+++ b/platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js
@@ -15,7 +15,7 @@ export const Sidebar = React.forwardRef((props, ref) => {
   const menus = useMenus({ query });
   const currentDoc = useCurrentDoc();
   const currentDocRef = useRef();
-  const handleChange = (ev) => {
+  const handleChange = ev => {
     setQuery(ev.target.value);
   };
   useEffect(() => {
@@ -46,20 +46,20 @@ export const Sidebar = React.forwardRef((props, ref) => {
   };
 
   const renderMenuCategories = () => {
-    return Object.keys(customMenus).map((menuName) => {
+    return Object.keys(customMenus).map(menuName => {
       return (
         <div key={menuName}>
           <h2 className="pl-2 border-l-8 -ml-4 border-secondary-active">
             {menuName}
           </h2>
-          {customMenus[menuName].map((item) => item)}
+          {customMenus[menuName].map(item => item)}
         </div>
       );
     });
   };
 
-  const getMenuCategory = (menuName) => {
-    return Object.keys(MENU_CATEGORIES).find((category) => {
+  const getMenuCategory = menuName => {
+    return Object.keys(MENU_CATEGORIES).find(category => {
       if (MENU_CATEGORIES[category].includes(menuName)) {
         return category;
       }
@@ -99,7 +99,7 @@ export const Sidebar = React.forwardRef((props, ref) => {
               onChange={handleChange}
             />
             {menus &&
-              menus.map((menu) => {
+              menus.map(menu => {
                 const isGroup = !!menu.menu;
                 const Component = isGroup ? NavGroup : NavLink;
                 const menuCategory = getMenuCategory(menu.name) || null;