diff --git a/platform/ui/index.js b/platform/ui/index.js
index e6ba5389f..78dc23ea6 100644
--- a/platform/ui/index.js
+++ b/platform/ui/index.js
@@ -13,7 +13,7 @@ export {
   Icon,
   IconButton,
   Input,
-  NavBag,
+  NavBar,
   Select,
   Svg,
   ThemeWrapper,
diff --git a/platform/ui/src/components/NavBar/NavBag.mdx b/platform/ui/src/components/NavBar/NavBag.mdx
deleted file mode 100644
index f17e1dbf3..000000000
--- a/platform/ui/src/components/NavBar/NavBag.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
----
-name: NavBag
-menu: Components
-route: components/label
----
-
-import { Playground, Props } from 'docz';
-import NavBag from './';
-
-# NavBag
-
-## Import
-
-```javascript
-import { NavBag } from '@ohif/ui';
-```
-
-## Basic usage
-
-<Playground>
-  <NavBag />
-</Playground>
-
-## Properties
-
-<Props of={NavBag} />
diff --git a/platform/ui/src/components/NavBar/NavBag.jsx b/platform/ui/src/components/NavBar/NavBar.jsx
similarity index 80%
rename from platform/ui/src/components/NavBar/NavBag.jsx
rename to platform/ui/src/components/NavBar/NavBar.jsx
index 0b18b6730..ad5ad51ff 100644
--- a/platform/ui/src/components/NavBar/NavBag.jsx
+++ b/platform/ui/src/components/NavBar/NavBar.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const NavBag = ({ className, children }) => {
+const NavBar = ({ className, children }) => {
   return (
     <div
       className={classnames(
@@ -15,9 +15,9 @@ const NavBag = ({ className, children }) => {
   );
 };
 
-NavBag.propTypes = {
+NavBar.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node,
 };
 
-export default NavBag;
+export default NavBar;
diff --git a/platform/ui/src/components/NavBar/NavBar.mdx b/platform/ui/src/components/NavBar/NavBar.mdx
new file mode 100644
index 000000000..e95881605
--- /dev/null
+++ b/platform/ui/src/components/NavBar/NavBar.mdx
@@ -0,0 +1,32 @@
+---
+name: NavBar
+menu: Components
+route: components/navBar
+---
+
+import { Playground, Props } from 'docz';
+import Button from './../Button';
+import Typography from './../Typography';
+import NavBar from './';
+
+# NavBar
+
+## Import
+
+```javascript
+import { NavBar } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  <NavBar className="justify-center">
+    <Typography variant="h3" className="m-2">
+      Header content
+    </Typography>
+  </NavBar>
+</Playground>
+
+## Properties
+
+<Props of={NavBar} />
diff --git a/platform/ui/src/components/NavBar/index.js b/platform/ui/src/components/NavBar/index.js
index 58571cd24..35fb05453 100644
--- a/platform/ui/src/components/NavBar/index.js
+++ b/platform/ui/src/components/NavBar/index.js
@@ -1,2 +1,2 @@
-import NavBag from './NavBag';
-export default NavBag;
+import NavBar from './NavBar';
+export default NavBar;
diff --git a/platform/ui/src/components/index.js b/platform/ui/src/components/index.js
index 31b732ce5..49e011fd7 100644
--- a/platform/ui/src/components/index.js
+++ b/platform/ui/src/components/index.js
@@ -4,7 +4,7 @@ import DateRange from './DateRange';
 import Icon from './Icon';
 import IconButton from './IconButton';
 import Input from './Input';
-import NavBag from './NavBag';
+import NavBar from './NavBar';
 import Select from './Select';
 import Svg from './Svg';
 import ThemeWrapper from './ThemeWrapper/';
@@ -17,7 +17,7 @@ export {
   Icon,
   IconButton,
   Input,
-  NavBag,
+  NavBar,
   Select,
   Svg,
   ThemeWrapper,