diff --git a/.prettierrc b/.prettierrc
index b881ec4..3e29ade 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,5 +2,5 @@
   "tabWidth": 2,
   "singleQuote": false,
   "semi": true,
-  "trailingComma": "all"
+  "trailingComma": "none"
 }
\ No newline at end of file
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 6d54214..b90c577 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -15,7 +15,7 @@ import {
   Person as AccountIcon,
   Search as SearchIcon,
   Send as SendIcon,
-  MenuOpen as MenuOpenIcon,
+  MenuOpen as MenuOpenIcon
 } from "@material-ui/icons";
 import classNames from "classnames";
 
@@ -31,7 +31,7 @@ import UserAvatar from "../UserAvatar/UserAvatar";
 import {
   useLayoutState,
   useLayoutDispatch,
-  toggleSidebar,
+  toggleSidebar
 } from "../../context/LayoutContext";
 import { useUserDispatch, signOut } from "../../context/UserContext";
 
@@ -41,29 +41,29 @@ const messages = [
     variant: "warning",
     name: "Jane Hew",
     message: "Hey! How is it going?",
-    time: "9:32",
+    time: "9:32"
   },
   {
     id: 1,
     variant: "success",
     name: "Lloyd Brown",
     message: "Check out my new Dashboard",
-    time: "9:18",
+    time: "9:18"
   },
   {
     id: 2,
     variant: "primary",
     name: "Mark Winstein",
     message: "I want rearrange the appointment",
-    time: "9:15",
+    time: "9:15"
   },
   {
     id: 3,
     variant: "secondary",
     name: "Liana Dutti",
     message: "Good news from sale department",
-    time: "9:09",
-  },
+    time: "9:09"
+  }
 ];
 
 const notifications = [
@@ -72,20 +72,20 @@ const notifications = [
     id: 1,
     color: "success",
     type: "info",
-    message: "What is the best way to get ...",
+    message: "What is the best way to get ..."
   },
   {
     id: 2,
     color: "secondary",
     type: "notification",
-    message: "This is just a simple notification",
+    message: "This is just a simple notification"
   },
   {
     id: 3,
     color: "primary",
     type: "e-commerce",
-    message: "12 new orders has arrived today",
-  },
+    message: "12 new orders has arrived today"
+  }
 ];
 
 export default function Header(props) {
@@ -112,25 +112,19 @@ export default function Header(props) {
           onClick={() => toggleSidebar(layoutDispatch)}
           className={classNames(
             classes.headerMenuButtonSandwich,
-            classes.headerMenuButtonCollapse,
+            classes.headerMenuButtonCollapse
           )}
         >
           {layoutState.isSidebarOpened ? (
             <MenuOpenIcon
               classes={{
-                root: classNames(
-                  classes.headerIcon,
-                  classes.headerIconCollapse,
-                ),
+                root: classNames(classes.headerIcon, classes.headerIconCollapse)
               }}
             />
           ) : (
             <MenuIcon
               classes={{
-                root: classNames(
-                  classes.headerIcon,
-                  classes.headerIconCollapse,
-                ),
+                root: classNames(classes.headerIcon, classes.headerIconCollapse)
               }}
             />
           )}
@@ -141,12 +135,12 @@ export default function Header(props) {
         <div className={classes.grow} />
         <div
           className={classNames(classes.search, {
-            [classes.searchFocused]: isSearchOpen,
+            [classes.searchFocused]: isSearchOpen
           })}
         >
           <div
             className={classNames(classes.searchIcon, {
-              [classes.searchIconOpened]: isSearchOpen,
+              [classes.searchIconOpened]: isSearchOpen
             })}
             onClick={() => setSearchOpen(!isSearchOpen)}
           >
@@ -156,7 +150,7 @@ export default function Header(props) {
             placeholder="Search…"
             classes={{
               root: classes.inputRoot,
-              input: classes.inputInput,
+              input: classes.inputInput
             }}
           />
         </div>
@@ -164,7 +158,7 @@ export default function Header(props) {
           color="inherit"
           aria-haspopup="true"
           aria-controls="mail-menu"
-          onClick={e => {
+          onClick={(e) => {
             setNotificationsMenu(e.currentTarget);
             setIsNotificationsUnread(false);
           }}
@@ -181,7 +175,7 @@ export default function Header(props) {
           color="inherit"
           aria-haspopup="true"
           aria-controls="mail-menu"
-          onClick={e => {
+          onClick={(e) => {
             setMailMenu(e.currentTarget);
             setIsMailsUnread(false);
           }}
@@ -199,7 +193,7 @@ export default function Header(props) {
           color="inherit"
           className={classes.headerMenuButton}
           aria-controls="profile-menu"
-          onClick={e => setProfileMenu(e.currentTarget)}
+          onClick={(e) => setProfileMenu(e.currentTarget)}
         >
           <AccountIcon classes={{ root: classes.headerIcon }} />
         </IconButton>
@@ -225,7 +219,7 @@ export default function Header(props) {
               {messages.length} New Messages
             </Typography>
           </div>
-          {messages.map(message => (
+          {messages.map((message) => (
             <MenuItem key={message.id} className={classes.messageNotification}>
               <div className={classes.messageNotificationSide}>
                 <UserAvatar color={message.variant} name={message.name} />
@@ -236,7 +230,7 @@ export default function Header(props) {
               <div
                 className={classNames(
                   classes.messageNotificationSide,
-                  classes.messageNotificationBodySide,
+                  classes.messageNotificationBodySide
                 )}
               >
                 <Typography weight="medium" gutterBottom>
@@ -266,7 +260,7 @@ export default function Header(props) {
           className={classes.headerMenu}
           disableAutoFocusItem
         >
-          {notifications.map(notification => (
+          {notifications.map((notification) => (
             <MenuItem
               key={notification.id}
               onClick={() => setNotificationsMenu(null)}
@@ -301,7 +295,7 @@ export default function Header(props) {
           <MenuItem
             className={classNames(
               classes.profileMenuItem,
-              classes.headerMenuItem,
+              classes.headerMenuItem
             )}
           >
             <AccountIcon className={classes.profileMenuIcon} /> Profile
@@ -309,7 +303,7 @@ export default function Header(props) {
           <MenuItem
             className={classNames(
               classes.profileMenuItem,
-              classes.headerMenuItem,
+              classes.headerMenuItem
             )}
           >
             <AccountIcon className={classes.profileMenuIcon} /> Tasks
@@ -317,7 +311,7 @@ export default function Header(props) {
           <MenuItem
             className={classNames(
               classes.profileMenuItem,
-              classes.headerMenuItem,
+              classes.headerMenuItem
             )}
           >
             <AccountIcon className={classes.profileMenuIcon} /> Messages
diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js
index 45d33fc..e86b80f 100644
--- a/src/components/Sidebar/Sidebar.js
+++ b/src/components/Sidebar/Sidebar.js
@@ -9,7 +9,7 @@ import {
   QuestionAnswer as SupportIcon,
   LibraryBooks as LibraryIcon,
   HelpOutline as FAQIcon,
-  ArrowBack as ArrowBackIcon,
+  ArrowBack as ArrowBackIcon
 } from "@material-ui/icons";
 import { useTheme } from "@material-ui/styles";
 import { withRouter } from "react-router-dom";
@@ -26,7 +26,7 @@ import Dot from "./components/Dot";
 import {
   useLayoutState,
   useLayoutDispatch,
-  toggleSidebar,
+  toggleSidebar
 } from "../../context/LayoutContext";
 
 const structure = [
@@ -35,14 +35,14 @@ const structure = [
     id: 1,
     label: "Typography",
     link: "/app/typography",
-    icon: <TypographyIcon />,
+    icon: <TypographyIcon />
   },
   { id: 2, label: "Tables", link: "/app/tables", icon: <TableIcon /> },
   {
     id: 3,
     label: "Notifications",
     link: "/app/notifications",
-    icon: <NotificationsIcon />,
+    icon: <NotificationsIcon />
   },
   {
     id: 4,
@@ -52,34 +52,49 @@ const structure = [
     children: [
       { label: "Icons", link: "/app/ui/icons" },
       { label: "Charts", link: "/app/ui/charts" },
-      { label: "Maps", link: "/app/ui/maps" },
-    ],
+      { label: "Maps", link: "/app/ui/maps" }
+    ]
   },
   { id: 5, type: "divider" },
   { id: 6, type: "title", label: "HELP" },
-  { id: 7, label: "Library", link: "https://flatlogic.com/templates", icon: <LibraryIcon /> },
-  { id: 8, label: "Support", link: "https://flatlogic.com/forum", icon: <SupportIcon /> },
-  { id: 9, label: "FAQ", link: "https://flatlogic.com/forum", icon: <FAQIcon /> },
+  {
+    id: 7,
+    label: "Library",
+    link: "https://flatlogic.com/templates",
+    icon: <LibraryIcon />
+  },
+  {
+    id: 8,
+    label: "Support",
+    link: "https://flatlogic.com/forum",
+    icon: <SupportIcon />
+  },
+  {
+    id: 9,
+    label: "FAQ",
+    link: "https://flatlogic.com/forum",
+    icon: <FAQIcon />
+  },
   { id: 10, type: "divider" },
   { id: 11, type: "title", label: "PROJECTS" },
   {
     id: 12,
     label: "My recent",
     link: "",
-    icon: <Dot size="small" color="warning" />,
+    icon: <Dot size="small" color="warning" />
   },
   {
     id: 13,
     label: "Starred",
     link: "",
-    icon: <Dot size="small" color="primary" />,
+    icon: <Dot size="small" color="primary" />
   },
   {
     id: 14,
     label: "Background",
     link: "",
-    icon: <Dot size="small" color="secondary" />,
-  },
+    icon: <Dot size="small" color="secondary" />
+  }
 ];
 
 function Sidebar({ location }) {
@@ -93,7 +108,7 @@ function Sidebar({ location }) {
   // local
   var [isPermanent, setPermanent] = useState(true);
 
-  useEffect(function() {
+  useEffect(function () {
     window.addEventListener("resize", handleWindowWidthChange);
     handleWindowWidthChange();
     return function cleanup() {
@@ -106,13 +121,13 @@ function Sidebar({ location }) {
       variant={isPermanent ? "permanent" : "temporary"}
       className={classNames(classes.drawer, {
         [classes.drawerOpen]: isSidebarOpened,
-        [classes.drawerClose]: !isSidebarOpened,
+        [classes.drawerClose]: !isSidebarOpened
       })}
       classes={{
         paper: classNames({
           [classes.drawerOpen]: isSidebarOpened,
-          [classes.drawerClose]: !isSidebarOpened,
-        }),
+          [classes.drawerClose]: !isSidebarOpened
+        })
       }}
       open={isSidebarOpened}
     >
@@ -121,13 +136,13 @@ function Sidebar({ location }) {
         <IconButton onClick={() => toggleSidebar(layoutDispatch)}>
           <ArrowBackIcon
             classes={{
-              root: classNames(classes.headerIcon, classes.headerIconCollapse),
+              root: classNames(classes.headerIcon, classes.headerIconCollapse)
             }}
           />
         </IconButton>
       </div>
       <List className={classes.sidebarList}>
-        {structure.map(link => (
+        {structure.map((link) => (
           <SidebarLink
             key={link.id}
             location={location}
diff --git a/src/components/Sidebar/SidebarView.js b/src/components/Sidebar/SidebarView.js
index 7ab2162..b191ad4 100644
--- a/src/components/Sidebar/SidebarView.js
+++ b/src/components/Sidebar/SidebarView.js
@@ -1,9 +1,5 @@
-import React from 'react';
-import {
-  Drawer,
-  IconButton,
-  List,
-  withStyles } from "@material-ui/core";
+import React from "react";
+import { Drawer, IconButton, List, withStyles } from "@material-ui/core";
 import {
   Home as HomeIcon,
   NotificationsNone as NotificationsIcon,
@@ -13,126 +9,182 @@ import {
   QuestionAnswer as SupportIcon,
   LibraryBooks as LibraryIcon,
   HelpOutline as FAQIcon,
-  ArrowBack as ArrowBackIcon,
+  ArrowBack as ArrowBackIcon
 } from "@material-ui/icons";
-import classNames from 'classnames';
+import classNames from "classnames";
 
-import SidebarLink from './components/SidebarLink/SidebarLinkContainer';
-import Dot from './components/Dot';
+import SidebarLink from "./components/SidebarLink/SidebarLinkContainer";
+import Dot from "./components/Dot";
 
 const structure = [
-  { id: 0, label: 'Dashboard', link: '/app/dashboard', icon: <HomeIcon /> },
-  { id: 1, label: 'Typography', link: '/app/typography', icon: <TypographyIcon /> },
-  { id: 2, label: 'Tables', link: '/app/tables', icon: <TableIcon /> },
-  { id: 3, label: 'Notifications', link: '/app/notifications', icon: <NotificationsIcon />},
+  { id: 0, label: "Dashboard", link: "/app/dashboard", icon: <HomeIcon /> },
+  {
+    id: 1,
+    label: "Typography",
+    link: "/app/typography",
+    icon: <TypographyIcon />
+  },
+  { id: 2, label: "Tables", link: "/app/tables", icon: <TableIcon /> },
+  {
+    id: 3,
+    label: "Notifications",
+    link: "/app/notifications",
+    icon: <NotificationsIcon />
+  },
   {
     id: 4,
-    label: 'UI Elements',
-    link: '/app/ui',
+    label: "UI Elements",
+    link: "/app/ui",
     icon: <UIElementsIcon />,
     children: [
-      { label: 'Icons', link: '/app/ui/icons' },
-      { label: 'Charts', link: '/app/ui/charts' },
-      { label: 'Maps', link: '/app/ui/maps' },
-    ],
+      { label: "Icons", link: "/app/ui/icons" },
+      { label: "Charts", link: "/app/ui/charts" },
+      { label: "Maps", link: "/app/ui/maps" }
+    ]
   },
-  { id: 5, type: 'divider' },
-  { id: 6, type: 'title', label: 'HELP' },
-  { id: 7, label: 'Library', link: 'https://flatlogic.com/templates', icon: <LibraryIcon /> },
-  { id: 8, label: 'Support', link: 'https://flatlogic.com/forum/', icon: <SupportIcon /> },
-  { id: 9, label: 'FAQ', link: 'https://flatlogic.com/forum/', icon: <FAQIcon />},
-  { id: 10, type: 'divider' },
-  { id: 11, type: 'title', label: 'PROJECTS' },
-  { id: 12, label: 'My recent', link: '', icon: <Dot size="small" color="secondary" /> },
-  { id: 13, label: 'Starred', link: '', icon: <Dot size="small" color="primary" /> },
-  { id: 14, label: 'Background', link: '', icon: <Dot size="small" color="secondary" /> },
+  { id: 5, type: "divider" },
+  { id: 6, type: "title", label: "HELP" },
+  {
+    id: 7,
+    label: "Library",
+    link: "https://flatlogic.com/templates",
+    icon: <LibraryIcon />
+  },
+  {
+    id: 8,
+    label: "Support",
+    link: "https://flatlogic.com/forum/",
+    icon: <SupportIcon />
+  },
+  {
+    id: 9,
+    label: "FAQ",
+    link: "https://flatlogic.com/forum/",
+    icon: <FAQIcon />
+  },
+  { id: 10, type: "divider" },
+  { id: 11, type: "title", label: "PROJECTS" },
+  {
+    id: 12,
+    label: "My recent",
+    link: "",
+    icon: <Dot size="small" color="secondary" />
+  },
+  {
+    id: 13,
+    label: "Starred",
+    link: "",
+    icon: <Dot size="small" color="primary" />
+  },
+  {
+    id: 14,
+    label: "Background",
+    link: "",
+    icon: <Dot size="small" color="secondary" />
+  }
 ];
 
-const SidebarView = ({ classes, theme, toggleSidebar, isSidebarOpened, isPermanent, location }) => {
+const SidebarView = ({
+  classes,
+  theme,
+  toggleSidebar,
+  isSidebarOpened,
+  isPermanent,
+  location
+}) => {
   return (
     <Drawer
-      variant={isPermanent ? 'permanent' : 'temporary'}
+      variant={isPermanent ? "permanent" : "temporary"}
       className={classNames(classes.drawer, {
         [classes.drawerOpen]: isSidebarOpened,
-        [classes.drawerClose]: !isSidebarOpened,
+        [classes.drawerClose]: !isSidebarOpened
       })}
       classes={{
         paper: classNames(classes.drawer, {
           [classes.drawerOpen]: isSidebarOpened,
-          [classes.drawerClose]: !isSidebarOpened,
-        }),
+          [classes.drawerClose]: !isSidebarOpened
+        })
       }}
       open={isSidebarOpened}
     >
       <div className={classes.mobileBackButton}>
-        <IconButton
-          onClick={toggleSidebar}
-        >
-          <ArrowBackIcon classes={{ root: classNames(classes.headerIcon, classes.headerIconCollapse) }} />
+        <IconButton onClick={toggleSidebar}>
+          <ArrowBackIcon
+            classes={{
+              root: classNames(classes.headerIcon, classes.headerIconCollapse)
+            }}
+          />
         </IconButton>
       </div>
       <List className={classes.sidebarList}>
-        {structure.map(link => <SidebarLink key={link.id} location={location} isSidebarOpened={isSidebarOpened} {...link} />)}
+        {structure.map((link) => (
+          <SidebarLink
+            key={link.id}
+            location={location}
+            isSidebarOpened={isSidebarOpened}
+            {...link}
+          />
+        ))}
       </List>
     </Drawer>
   );
-}
+};
 
 const drawerWidth = 240;
 
-const styles = theme => ({
+const styles = (theme) => ({
   menuButton: {
     marginLeft: 12,
-    marginRight: 36,
+    marginRight: 36
   },
   hide: {
-    display: 'none',
+    display: "none"
   },
   drawer: {
     width: drawerWidth,
     flexShrink: 0,
-    whiteSpace: 'nowrap',
+    whiteSpace: "nowrap",
     top: theme.spacing.unit * 8,
     [theme.breakpoints.down("sm")]: {
-      top: 0,
+      top: 0
     }
   },
   drawerOpen: {
     width: drawerWidth,
-    transition: theme.transitions.create('width', {
+    transition: theme.transitions.create("width", {
       easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
+      duration: theme.transitions.duration.enteringScreen
+    })
   },
   drawerClose: {
-    transition: theme.transitions.create('width', {
+    transition: theme.transitions.create("width", {
       easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen,
+      duration: theme.transitions.duration.leavingScreen
     }),
-    overflowX: 'hidden',
+    overflowX: "hidden",
     width: theme.spacing.unit * 7 + 40,
     [theme.breakpoints.down("sm")]: {
-      width: drawerWidth,
+      width: drawerWidth
     }
   },
   toolbar: {
     ...theme.mixins.toolbar,
     [theme.breakpoints.down("sm")]: {
-      display: 'none',
+      display: "none"
     }
   },
   content: {
     flexGrow: 1,
-    padding: theme.spacing.unit * 3,
+    padding: theme.spacing.unit * 3
   },
   mobileBackButton: {
-    marginTop: theme.spacing.unit * .5,
+    marginTop: theme.spacing.unit * 0.5,
     marginLeft: theme.spacing.unit * 3,
     [theme.breakpoints.only("sm")]: {
-      marginTop: theme.spacing.unit * .625,
+      marginTop: theme.spacing.unit * 0.625
     },
     [theme.breakpoints.up("md")]: {
-      display: 'none',
+      display: "none"
     }
   }
 });