diff --git a/admin-ui/app/components/NavSearch/search.js b/admin-ui/app/components/NavSearch/search.js
index 0caf99534..2ca4dace7 100644
--- a/admin-ui/app/components/NavSearch/search.js
+++ b/admin-ui/app/components/NavSearch/search.js
@@ -1,37 +1,12 @@
 import React from 'react'
-import { makeStyles } from '@material-ui/core/styles'
 import Paper from '@material-ui/core/Paper'
 import InputBase from '@material-ui/core/InputBase'
 import IconButton from '@material-ui/core/IconButton'
 import SearchIcon from '@material-ui/icons/Search'
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    padding: '1px 10px 1px 10px',
-    display: 'flex',
-    alignItems: 'center',
-    width: 300,
-    borderRadius: 30,
-    marginRight: 20,
-    height: 40,
-    marginTop: 10,
-  },
-  input: {
-    marginLeft: theme.spacing(1),
-    flex: 1,
-  },
-  iconButton: {
-    padding: 10,
-  },
-  mobile: {
-    width: '90%',
-    marginTop: 20,
-    padding: '0 10px 0 10px',
-  }
-}))
+import styles from './styles'
 
 export default function Search({ isTabletOrMobile }) {
-  const classes = useStyles()
+  const classes = styles()
 
   return (
     <Paper component="form" className={`${classes.root} ${isTabletOrMobile ? classes.mobile : ''}`}>
diff --git a/admin-ui/app/components/NavSearch/styles.js b/admin-ui/app/components/NavSearch/styles.js
new file mode 100644
index 000000000..255b4e89b
--- /dev/null
+++ b/admin-ui/app/components/NavSearch/styles.js
@@ -0,0 +1,28 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+const styles = makeStyles((theme) => ({
+  root: {
+    padding: '1px 10px 1px 10px',
+    display: 'flex',
+    alignItems: 'center',
+    width: 300,
+    borderRadius: 30,
+    marginRight: 20,
+    height: 40,
+    marginTop: 10,
+  },
+  input: {
+    marginLeft: theme.spacing(1),
+    flex: 1,
+  },
+  iconButton: {
+    padding: 10,
+  },
+  mobile: {
+    width: '90%',
+    marginTop: 20,
+    padding: '0 10px 0 10px',
+  }
+}))
+
+export default styles
diff --git a/admin-ui/app/components/Notifications/index.js b/admin-ui/app/components/Notifications/index.js
index a91370e99..c104a9c00 100644
--- a/admin-ui/app/components/Notifications/index.js
+++ b/admin-ui/app/components/Notifications/index.js
@@ -7,32 +7,11 @@ import Popper from '@material-ui/core/Popper'
 import List from '@material-ui/core/List'
 import ListItem from '@material-ui/core/ListItem'
 import ListItemText from '@material-ui/core/ListItemText'
-import { makeStyles } from '@material-ui/core/styles'
 import NotificationsIcon from '@material-ui/icons/Notifications'
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-  },
-  whiteColor: {
-    color: '#FFFFFF',
-  },
-  paper: {
-    marginRight: theme.spacing(2),
-  },
-  btnContainer: {
-    position: 'relative',
-    top: 8,
-    textTransform: 'none',
-    color: '#FFFFFF',
-  },
-  topElm: {
-    zIndex: 9999
-  }
-}))
+import styles from './styles'
 
 export default function Lang() {
-  const classes = useStyles()
+  const classes = styles()
   const [open, setOpen] = React.useState(false)
   const anchorRef = React.useRef(null)
 
diff --git a/admin-ui/app/components/Notifications/styles.js b/admin-ui/app/components/Notifications/styles.js
new file mode 100644
index 000000000..6df0b00af
--- /dev/null
+++ b/admin-ui/app/components/Notifications/styles.js
@@ -0,0 +1,24 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+const styles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+  },
+  whiteColor: {
+    color: '#FFFFFF',
+  },
+  paper: {
+    marginRight: theme.spacing(2),
+  },
+  btnContainer: {
+    position: 'relative',
+    top: 8,
+    textTransform: 'none',
+    color: '#FFFFFF',
+  },
+  topElm: {
+    zIndex: 9999
+  }
+}))
+
+export default styles
diff --git a/admin-ui/app/components/ThemeSetting/ThemeSettings.js b/admin-ui/app/components/ThemeSetting/ThemeSettings.js
index 12b991d0e..36b25dfdf 100644
--- a/admin-ui/app/components/ThemeSetting/ThemeSettings.js
+++ b/admin-ui/app/components/ThemeSetting/ThemeSettings.js
@@ -1,6 +1,5 @@
 import React, { useContext } from 'react'
 import clsx from 'clsx'
-import { makeStyles } from '@material-ui/core/styles'
 import Drawer from '@material-ui/core/Drawer'
 import Button from '@material-ui/core/Button'
 import Box from '@material-ui/core/Box'
@@ -10,48 +9,10 @@ import darkBlackThumbnail from 'Images/theme-thumbnail/darkBlack.jpg'
 import darkBlueThumbnail from 'Images/theme-thumbnail/darkBlue.jpg'
 import lightBlueThumbnail from 'Images/theme-thumbnail/lightBlue.jpg'
 import lightGreenThumbnail from 'Images/theme-thumbnail/lightGreen.jpg'
-
-const useStyles = makeStyles({
-  list: {
-    width: 250,
-  },
-  fullList: {
-    width: 'auto',
-  },
-  whiteColor: {
-    color: '#FFFFFF',
-    position: 'relative',
-  },
-  selectInfo: {
-    textAlign: 'left',
-    marginLeft: 30,
-    fontSize: 16,
-    fontWeight: '500',
-    marginBottom: 10,
-  },
-  selectContainer: {
-    textAlign: 'center',
-    marginTop: '25%'
-  },
-  selectItem: {
-    marginBottom: 20,
-    cursor: 'pointer',
-    paddingTop: 16,
-  },
-  selectedItem: {
-    background: '#eaeaea',
-  },
-  selectImage: {
-    width: '75%',
-  },
-  selectTitle: {
-    fontSize: 16,
-    fontWeight: '600'
-  }
-})
+import styles from './styles'
 
 export function ThemeSettings() {
-  const classes = useStyles()
+  const classes = styles()
   const [open, setOpen] = React.useState(false)
   const theme = useContext(ThemeContext)
 
diff --git a/admin-ui/app/components/ThemeSetting/styles.js b/admin-ui/app/components/ThemeSetting/styles.js
new file mode 100644
index 000000000..f04a298e9
--- /dev/null
+++ b/admin-ui/app/components/ThemeSetting/styles.js
@@ -0,0 +1,42 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+const styles = makeStyles({
+  list: {
+    width: 250,
+  },
+  fullList: {
+    width: 'auto',
+  },
+  whiteColor: {
+    color: '#FFFFFF',
+    position: 'relative',
+  },
+  selectInfo: {
+    textAlign: 'left',
+    marginLeft: 30,
+    fontSize: 16,
+    fontWeight: '500',
+    marginBottom: 10,
+  },
+  selectContainer: {
+    textAlign: 'center',
+    marginTop: '25%'
+  },
+  selectItem: {
+    marginBottom: 20,
+    cursor: 'pointer',
+    paddingTop: 16,
+  },
+  selectedItem: {
+    background: '#eaeaea',
+  },
+  selectImage: {
+    width: '75%',
+  },
+  selectTitle: {
+    fontSize: 16,
+    fontWeight: '600'
+  }
+})
+
+export default styles
diff --git a/admin-ui/app/components/index.js b/admin-ui/app/components/index.js
index 884c326d9..48b3af709 100755
--- a/admin-ui/app/components/index.js
+++ b/admin-ui/app/components/index.js
@@ -28,7 +28,6 @@ import SidebarTrigger from './SidebarTrigger'
 import {
   ThemeClass,
   ThemeProvider,
-  ThemeSelector,
   ThemeConsumer,
 } from './Theme'
 import ThemeSetting from './ThemeSetting'
@@ -139,7 +138,6 @@ export {
   ThemeClass,
   ThemeConsumer,
   ThemeProvider,
-  ThemeSelector,
   ThemeSetting,
   UncontrolledTabs,
   Wizard
diff --git a/admin-ui/app/layout/components/DefaultSidebar.js b/admin-ui/app/layout/components/DefaultSidebar.js
index ab20fd26b..114eaeb60 100755
--- a/admin-ui/app/layout/components/DefaultSidebar.js
+++ b/admin-ui/app/layout/components/DefaultSidebar.js
@@ -28,11 +28,6 @@ export const DefaultSidebar = () => (
     <Sidebar.MobileFluid>
       {/* <SidebarTopA /> */}
       <Sidebar.Section fluid cover>
-        <SidebarTrigger
-          id="navToggleBtn"
-          color={'#8492a5'}
-          showCollapseonly={true}
-        />
         {/* SIDEBAR: Menu */}
         <GluuAppSidebar />
       </Sidebar.Section>
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuAlert.js b/admin-ui/app/routes/Apps/Gluu/GluuAlert.js
index c2955dfe6..47778eaea 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuAlert.js
+++ b/admin-ui/app/routes/Apps/Gluu/GluuAlert.js
@@ -1,23 +1,14 @@
 import React, { useState, useEffect } from 'react'
 import Snackbar from '@material-ui/core/Snackbar'
 import MuiAlert from '@material-ui/lab/Alert'
-import { makeStyles } from '@material-ui/core/styles'
+import styles from './styles/GluuAlert.style'
 
 function Alert(props) {
   return <MuiAlert elevation={6} variant="filled" {...props} />
 }
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    '& > * + *': {
-      marginTop: theme.spacing(2),
-    },
-  },
-}))
-
 export default function GluuAlert({ severity, message, show }) {
-  const classes = useStyles()
+  const classes = styles()
   const [open, setOpen] = useState(false)
   useEffect(() => {
     setOpen(!!show)
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuAppSidebar.js b/admin-ui/app/routes/Apps/Gluu/GluuAppSidebar.js
index 8501b23b8..12698dfe0 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuAppSidebar.js
+++ b/admin-ui/app/routes/Apps/Gluu/GluuAppSidebar.js
@@ -13,34 +13,9 @@ import SchemaIcon from "Components/SVG/menu/Schema"
 import ServicesIcon from "Components/SVG/menu/Services"
 import UsersIcon from "Components/SVG/menu/Users"
 import { ThemeContext } from 'Context/theme/themeContext'
-import { makeStyles } from '@material-ui/core/styles'
 import Wave from 'Components/SVG/SidebarWave'
 import getThemeColor from 'Context/theme/config'
-
-const useStyles = makeStyles(() => ({
-  waveContainer: {
-    position: 'relative',
-    bottom: 93,
-    left: 0,
-    top: 140,
-    height: 70,
-    width: 250,
-    borderBottomLeftRadius: 20,
-    borderBottomRightRadius: 20,
-  },
-  wave: {
-    width: 250,
-    position: 'relative',
-    top: -75
-  },
-  powered: {
-    color: '#fff',
-    textAlign: 'center',
-    position: 'relative',
-    top: -130,
-    fontWeight: 500,
-  }
-}))
+import styles from './styles/GluuAppSidebar.style'
 
 function GluuAppSidebar({ scopes }) {
   const [pluginMenus, setPluginMenus] = useState([])
@@ -48,7 +23,7 @@ function GluuAppSidebar({ scopes }) {
   const theme = useContext(ThemeContext)
   const selectedTheme = theme.state.theme
   const sidebarMenuActiveClass = `sidebar-menu-active-${selectedTheme}`
-  const classes = useStyles()
+  const classes = styles()
   const themeColors = getThemeColor(selectedTheme)
 
   useEffect(() => {
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuNavBar.js b/admin-ui/app/routes/Apps/Gluu/GluuNavBar.js
index 183df8eda..c40f454be 100755
--- a/admin-ui/app/routes/Apps/Gluu/GluuNavBar.js
+++ b/admin-ui/app/routes/Apps/Gluu/GluuNavBar.js
@@ -22,7 +22,7 @@ import { randomAvatar } from '../../../utilities'
 import { ErrorBoundary } from 'react-error-boundary'
 import GluuErrorFallBack from './GluuErrorFallBack'
 
-function GluuNavBar({ themeColor, themeStyle, userinfo }) {
+function GluuNavBar({ userinfo }) {
   const userInfo = userinfo ? userinfo : {}
   const [showCollapse, setShowCollapse] = useState(
     window.matchMedia('(max-width: 992px)').matches,
@@ -34,66 +34,57 @@ function GluuNavBar({ themeColor, themeStyle, userinfo }) {
   }, [])
   return (
     <ErrorBoundary FallbackComponent={GluuErrorFallBack}>
-      <NavbarThemeProvider
-        style={themeStyle}
-        color={themeColor}
-        className="shadow-sm"
-      >
-        <Navbar expand="lg" themed>
-          <Nav>
-            {showCollapse && (
-              <NavItem className="mr-3">
-                <SidebarTrigger id="navToggleBtn" />
-              </NavItem>
-            )}
+      <Navbar expand="lg" themed>
+        <Nav>
+          {showCollapse && (
+            <NavItem className="mr-3">
+              <SidebarTrigger id="navToggleBtn" />
+            </NavItem>
+          )}
+        </Nav>
+        <Box display="flex" justifyContent="space-between" width="100%">
+          <h3 className="page-title" id="page-title">Dashboard</h3>
+          <Nav className="ml-auto" pills>
+            {/*<NavbarMessages  />*/}
+            {/*<NavbarActivityFeed />*/}
+            <NavSearch />
+            <Notifications />
+            <LanguageMenu />
+            <ThemeSetting />
+            <UncontrolledDropdown nav inNavbar>
+              <DropdownToggle nav>
+                <Avatar.Image
+                  size="md"
+                  src={randomAvatar()}
+                  addOns={[
+                    <AvatarAddOn.Icon
+                      className="fa fa-circle"
+                      color="white"
+                      key="avatar-icon-bg"
+                    />,
+                    <AvatarAddOn.Icon
+                      className="fa fa-circle"
+                      color="success"
+                      key="avatar-icon-fg"
+                    />,
+                  ]}
+                />
+              </DropdownToggle>
+              <DropdownProfile right userinfo={userInfo} />
+            </UncontrolledDropdown>
           </Nav>
-          <Box display="flex" justifyContent="space-between" width="100%">
-            <h3 className="page-title" id="page-title">Dashboard</h3>
-            <Nav className="ml-auto" pills>
-              {/*<NavbarMessages  />*/}
-              {/*<NavbarActivityFeed />*/}
-              <NavSearch />
-              <Notifications />
-              <LanguageMenu />
-              <ThemeSetting />
-              <UncontrolledDropdown nav inNavbar>
-                <DropdownToggle nav>
-                  <Avatar.Image
-                    size="md"
-                    src={randomAvatar()}
-                    addOns={[
-                      <AvatarAddOn.Icon
-                        className="fa fa-circle"
-                        color="white"
-                        key="avatar-icon-bg"
-                      />,
-                      <AvatarAddOn.Icon
-                        className="fa fa-circle"
-                        color="success"
-                        key="avatar-icon-fg"
-                      />,
-                    ]}
-                  />
-                </DropdownToggle>
-                <DropdownProfile right userinfo={userInfo} />
-              </UncontrolledDropdown>
-            </Nav>
-          </Box>
-        </Navbar>
-      </NavbarThemeProvider>
+        </Box>
+      </Navbar>
     </ErrorBoundary>
   )
 }
 
 GluuNavBar.propTypes = {
-  navStyle: PropTypes.oneOf(['pills', 'accent', 'default']),
-  themeStyle: PropTypes.string,
-  themeColor: PropTypes.string,
+  userinfo: PropTypes.object,
 }
+
 GluuNavBar.defaultProps = {
-  navStyle: 'default',
-  themeStyle: 'dark',
-  themeColor: 'primary',
+  navStyle: {},
 }
 
 const mapStateToProps = ({ authReducer }) => {
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuSessionTimeoutDialog.js b/admin-ui/app/routes/Apps/Gluu/GluuSessionTimeoutDialog.js
index 04cad0eb7..67f4a4693 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuSessionTimeoutDialog.js
+++ b/admin-ui/app/routes/Apps/Gluu/GluuSessionTimeoutDialog.js
@@ -6,39 +6,17 @@ import {
   DialogActions,
   Button,
   Typography,
-  makeStyles,
   Slide
 } from "@material-ui/core"
 import clsx from "clsx"
-import red from "@material-ui/core/colors/red"
-
-const useStyles = makeStyles(() => ({
-  dialog: {
-    borderRadius: 0
-  },
-  button: {
-    borderRadius: 0,
-    textTransform: "none",
-    padding: 5
-  },
-  logout: {
-    color: "#fff",
-    backgroundColor: "#03A96D",
-    "&:hover": {
-      backgroundColor: red[700]
-    }
-  },
-  countdown: {
-    color: "red[700]"
-  }
-}))
+import styles from "./styles/GluuSessionTimeoutDialog.style"
 
 const Transition = React.forwardRef(function Transition(props, ref) {
   return <Slide direction="up" ref={ref} {...props} />
 })
 
 const SessionTimeoutDialog = ({ open, countdown, onLogout, onContinue }) => {
-  const classes = useStyles()
+  const classes = styles()
 
   return (
     <Dialog
diff --git a/admin-ui/app/routes/Apps/Gluu/styles/GluuAlert.style.js b/admin-ui/app/routes/Apps/Gluu/styles/GluuAlert.style.js
new file mode 100644
index 000000000..266bf7d97
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/styles/GluuAlert.style.js
@@ -0,0 +1,12 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+const styles = makeStyles((theme) => ({
+  root: {
+    width: '100%',
+    '& > * + *': {
+      marginTop: theme.spacing(2),
+    },
+  },
+}))
+
+export default styles
diff --git a/admin-ui/app/routes/Apps/Gluu/styles/GluuAppSidebar.style.js b/admin-ui/app/routes/Apps/Gluu/styles/GluuAppSidebar.style.js
new file mode 100644
index 000000000..e83a8ea07
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/styles/GluuAppSidebar.style.js
@@ -0,0 +1,28 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+const styles = makeStyles(() => ({
+  waveContainer: {
+    position: 'relative',
+    bottom: 93,
+    left: 0,
+    top: 140,
+    height: 70,
+    width: 250,
+    borderBottomLeftRadius: 20,
+    borderBottomRightRadius: 20,
+  },
+  wave: {
+    width: 250,
+    position: 'relative',
+    top: -75
+  },
+  powered: {
+    color: '#fff',
+    textAlign: 'center',
+    position: 'relative',
+    top: -130,
+    fontWeight: 500,
+  }
+}))
+
+export default styles
diff --git a/admin-ui/app/routes/Apps/Gluu/styles/GluuSessionTimeoutDialog.style.js b/admin-ui/app/routes/Apps/Gluu/styles/GluuSessionTimeoutDialog.style.js
new file mode 100644
index 000000000..2e2a685f2
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/styles/GluuSessionTimeoutDialog.style.js
@@ -0,0 +1,25 @@
+import { makeStyles } from '@material-ui/core/styles'
+import red from "@material-ui/core/colors/red"
+
+const styles = makeStyles(() => ({
+  dialog: {
+    borderRadius: 0
+  },
+  button: {
+    borderRadius: 0,
+    textTransform: "none",
+    padding: 5
+  },
+  logout: {
+    color: "#fff",
+    backgroundColor: "#03A96D",
+    "&:hover": {
+      backgroundColor: red[700]
+    }
+  },
+  countdown: {
+    color: "red[700]"
+  }
+}))
+
+export default styles
diff --git a/admin-ui/app/routes/Dashboards/DashboardPage.js b/admin-ui/app/routes/Dashboards/DashboardPage.js
index 2a1851e92..6b281b4b7 100644
--- a/admin-ui/app/routes/Dashboards/DashboardPage.js
+++ b/admin-ui/app/routes/Dashboards/DashboardPage.js
@@ -4,7 +4,6 @@ import Grid from '@material-ui/core/Grid'
 import Paper from '@material-ui/core/Paper'
 import Box from '@material-ui/core/Box'
 import { useMediaQuery } from 'react-responsive'
-import { makeStyles } from '@material-ui/core/styles'
 import 'react-datepicker/dist/react-datepicker.css'
 import GluuLoader from '../Apps/Gluu/GluuLoader'
 import GluuViewWrapper from '../Apps/Gluu/GluuViewWrapper'
@@ -31,241 +30,7 @@ import { ThemeContext } from 'Context/theme/themeContext'
 import getThemeColor from 'Context/theme/config'
 import { getUsers } from '../../redux/actions'
 import SetTitle from 'Utils/SetTitle'
-
-const useStyles = makeStyles(() => ({
-  root: {
-    color: '#FFFFFF',
-    maxWidth: '100vw',
-  },
-  flex: {
-    flexGrow: 1,
-    display: 'flex',
-  },
-  block: {
-    display: 'block',
-  },
-  summary: {
-    height: 41,
-    maxWidth: 270,
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: 0,
-    border: '3px solid #FFF',
-    borderRadius: 10,
-    background: 'transparent',
-    color: '#FFF',
-    alignItems: 'center',
-    marginBottom: 24,
-  },
-  summaryText: {
-    paddingLeft: 8,
-  },
-  summaryValue: {
-    background: '#FFF',
-    color: '#303641',
-    width: 80,
-    height: 36,
-    fontWeight: 600,
-    fontSize: 16,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  dashboardCard: {
-    background: 'transparent',
-    marginTop: 40,
-  },
-  slider: {
-    border: '5px solid #fff',
-    borderRadius: 24,
-    height: 120,
-    background: 'rgba(255, 255, 255, 0.2)',
-    display: 'flex',
-    justifyContent: 'left',
-    alignItems: 'center',
-    color: '#fff',
-    padding: '0px 14px 0px 14px',
-  },
-  news: {
-    borderRadius: 24,
-    height: 140,
-    background: '#3B6694',
-    color: '#FFF',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  newsTitle: {
-    fontSize: 20,
-  },
-  logo: {
-    width: '40%',
-    height: '40%',
-    marginBottom: 10,
-  },
-  reports: {
-    borderRadius: 24,
-    marginLeft: 20,
-    height: 140,
-    background: '#FFF',
-    color: '#303641',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: '0 20px',
-  },
-  reportTitle: {
-    fontSize: 20,
-  },
-  detailReportImg: {
-    width: '70%',
-    height: '60%',
-    marginRight: 10,
-  },
-  userInfo: {
-    borderRadius: 24,
-    marginLeft: 20,
-    height: 280,
-    background: '#FFF',
-    color: '#303641',
-    display: 'block',
-    padding: '20px',
-    minWidth: 350,
-  },
-  userInfoTitle: {
-    fontWeight: 'bold',
-    fontSize: 20,
-    marginBottom: 20,
-  },
-  userInfoText: {
-    fontSize: 16,
-    marginBottom: 16,
-  },
-  chartContainer: {
-    width: 780,
-    maxWidth: '40vw',
-    height: 'max-content',
-  },
-  supportContainer: {
-    display: 'flex',
-    marginLeft: 20,
-  },
-  supportCard: {
-    borderRadius: 14,
-    color: '#FFF',
-    padding: 20,
-    width: '100%',
-    maxWidth: 140,
-    display: 'flex',
-    marginRight: 20,
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'column',
-    textAlign: 'center',
-    fontSize: 20,
-  },
-  supportLogo: {
-    width: '50%',
-  },
-  verticalTextContainer: {
-    borderRadius: 14,
-    color: '#FFF',
-    padding: '20px 10px',
-    width: '100%',
-    maxWidth: 140,
-    display: 'flex',
-    marginRight: 20,
-    justifyContent: 'space-between',
-    fontSize: 24,
-    flexDirection: 'row',
-    fontWeight: 700,
-    zIndex: 3,
-  },
-  textVertical: {
-    writingMode: 'vertical-rl',
-    textOrientation: 'upright',
-  },
-  statusContainer: {
-    borderRadius: 24,
-    height: 180,
-    minWidth: 320,
-    background: '#FFF',
-    color: '#303641',
-    display: 'block',
-    padding: '20px',
-  },
-  statusText: {
-    fontSize: 18,
-    marginBottom: 28,
-    display: 'flex',
-    justifyContent: 'space-between',
-  },
-  iconCheck: {
-    width: 22,
-    height: 22,
-    marginLeft: 10,
-    marginRight: 10,
-  },
-  iconCross: {
-    width: 18,
-    height: 18,
-    marginLeft: 10,
-    marginRight: 10,
-  },
-  checkText: {
-    color: '#26BC26',
-  },
-  crossText: {
-    color: '#F22222',
-  },
-  orange: {
-    color: '#FE9F01',
-    fontWeight: 600,
-  },
-  lightBlue: {
-    color: '#9CBEE0',
-    fontWeight: 600,
-  },
-  lightGreen: {
-    color: '#8D9460',
-    fontWeight: 600,
-  },
-  whiteBg: {
-    background: '#FFF',
-    paddingTop: 30,
-    paddingBottom: 20,
-    color: '#303641',
-    borderRadius: 20,
-    height: 370,
-  },
-  redText: {
-    color: '#F22222',
-  },
-  greenBlock: {
-    background: '#25C309',
-    color: '#FFF',
-    borderRadius: 10,
-    paddingLeft: 5,
-    paddingRight: 5,
-  },
-  redBlock: {
-    background: '#c30909',
-    color: '#FFF',
-    borderRadius: 10,
-    paddingLeft: 5,
-    paddingRight: 5,
-  },
-  bannerContainer: {
-    marginTop: 35,
-  },
-  desktopChartStyle: {
-    maxWidth: 760,
-    overflowX: 'scroll',
-    overflowY: 'hidden',
-    scrollBehavior: 'smooth',
-  },
-}))
+import styles from './styles'
 
 function DashboardPage({
   statData,
@@ -290,7 +55,7 @@ function DashboardPage({
   const theme = useContext(ThemeContext)
   const selectedTheme = theme.state.theme
   const themeColors = getThemeColor(selectedTheme)
-  const classes = useStyles()
+  const classes = styles()
   const FETCHING_LICENSE_DETAILS = 'Fetch license details'
 
   SetTitle(t('menus.dashboard'))
diff --git a/admin-ui/app/routes/Dashboards/Table/DashboardTable.js b/admin-ui/app/routes/Dashboards/Table/DashboardTable.js
index 11a765446..9dfbe49f2 100644
--- a/admin-ui/app/routes/Dashboards/Table/DashboardTable.js
+++ b/admin-ui/app/routes/Dashboards/Table/DashboardTable.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import { makeStyles } from '@material-ui/core/styles'
 import Table from '@material-ui/core/Table'
 import TableBody from '@material-ui/core/TableBody'
 import TableCell from '@material-ui/core/TableCell'
@@ -7,50 +6,11 @@ import TableContainer from '@material-ui/core/TableContainer'
 import TableRow from '@material-ui/core/TableRow'
 import Paper from '@material-ui/core/Paper'
 import { useSelector } from 'react-redux'
-const useStyles = makeStyles({
-  table: {
-    minWidth: 600,
-    borderCollapse: 'unset',
-  },
-  transparentBg: {
-    background: 'transparent',
-  },
-  whiteText: {
-    color: '#FFFFFF',
-    borderBottom: 'none',
-    padding: '10px 20px 10px 20px',
-  },
-  standardText: {
-    color: '#303641',
-    borderBottom: 'none',
-    padding: '10px 20px 10px 20px',
-  },
-  trWhiteBg: {
-    background: '#FFFFFF',
-    color: '#303641',
-  },
-  roundedLeft: {
-    borderBottomLeftRadius: 18,
-    borderTopLeftRadius: 18,
-  },
-  roundedRight: {
-    borderBottomRightRadius: 18,
-    borderTopRightRadius: 18,
-  },
-  avatar: {
-    width: 32,
-    height: 32,
-    marginRight: 40,
-  },
-  username: {
-    position: 'relative',
-    top: 6,
-  },
-})
+import styles from './styles'
 
 export default function BasicTable() {
   const users = useSelector((state) => state.userReducer.items)
-  const classes = useStyles()
+  const classes = styles()
 
   return (
     <TableContainer
diff --git a/admin-ui/app/routes/Dashboards/Table/styles.js b/admin-ui/app/routes/Dashboards/Table/styles.js
new file mode 100644
index 000000000..4292aa49a
--- /dev/null
+++ b/admin-ui/app/routes/Dashboards/Table/styles.js
@@ -0,0 +1,44 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+const styles = makeStyles({
+  table: {
+    minWidth: 600,
+    borderCollapse: 'unset',
+  },
+  transparentBg: {
+    background: 'transparent',
+  },
+  whiteText: {
+    color: '#FFFFFF',
+    borderBottom: 'none',
+    padding: '10px 20px 10px 20px',
+  },
+  standardText: {
+    color: '#303641',
+    borderBottom: 'none',
+    padding: '10px 20px 10px 20px',
+  },
+  trWhiteBg: {
+    background: '#FFFFFF',
+    color: '#303641',
+  },
+  roundedLeft: {
+    borderBottomLeftRadius: 18,
+    borderTopLeftRadius: 18,
+  },
+  roundedRight: {
+    borderBottomRightRadius: 18,
+    borderTopRightRadius: 18,
+  },
+  avatar: {
+    width: 32,
+    height: 32,
+    marginRight: 40,
+  },
+  username: {
+    position: 'relative',
+    top: 6,
+  },
+})
+
+export default styles
diff --git a/admin-ui/app/routes/Dashboards/styles.js b/admin-ui/app/routes/Dashboards/styles.js
new file mode 100644
index 000000000..228e1a028
--- /dev/null
+++ b/admin-ui/app/routes/Dashboards/styles.js
@@ -0,0 +1,238 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+const styles = makeStyles(() => ({
+  root: {
+    color: '#FFFFFF',
+    maxWidth: '100vw',
+  },
+  flex: {
+    flexGrow: 1,
+    display: 'flex',
+  },
+  block: {
+    display: 'block',
+  },
+  summary: {
+    height: 41,
+    maxWidth: 270,
+    display: 'flex',
+    justifyContent: 'space-between',
+    padding: 0,
+    border: '3px solid #FFF',
+    borderRadius: 10,
+    background: 'transparent',
+    color: '#FFF',
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+  summaryText: {
+    paddingLeft: 8,
+  },
+  summaryValue: {
+    background: '#FFF',
+    color: '#303641',
+    width: 80,
+    height: 36,
+    fontWeight: 600,
+    fontSize: 16,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dashboardCard: {
+    background: 'transparent',
+    marginTop: 40,
+  },
+  slider: {
+    border: '5px solid #fff',
+    borderRadius: 24,
+    height: 120,
+    background: 'rgba(255, 255, 255, 0.2)',
+    display: 'flex',
+    justifyContent: 'left',
+    alignItems: 'center',
+    color: '#fff',
+    padding: '0px 14px 0px 14px',
+  },
+  news: {
+    borderRadius: 24,
+    height: 140,
+    background: '#3B6694',
+    color: '#FFF',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  newsTitle: {
+    fontSize: 20,
+  },
+  logo: {
+    width: '40%',
+    height: '40%',
+    marginBottom: 10,
+  },
+  reports: {
+    borderRadius: 24,
+    marginLeft: 20,
+    height: 140,
+    background: '#FFF',
+    color: '#303641',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: '0 20px',
+  },
+  reportTitle: {
+    fontSize: 20,
+  },
+  detailReportImg: {
+    width: '70%',
+    height: '60%',
+    marginRight: 10,
+  },
+  userInfo: {
+    borderRadius: 24,
+    marginLeft: 20,
+    height: 280,
+    background: '#FFF',
+    color: '#303641',
+    display: 'block',
+    padding: '20px',
+    minWidth: 350,
+  },
+  userInfoTitle: {
+    fontWeight: 'bold',
+    fontSize: 20,
+    marginBottom: 20,
+  },
+  userInfoText: {
+    fontSize: 16,
+    marginBottom: 16,
+  },
+  chartContainer: {
+    width: 780,
+    maxWidth: '40vw',
+    height: 'max-content',
+  },
+  supportContainer: {
+    display: 'flex',
+    marginLeft: 20,
+  },
+  supportCard: {
+    borderRadius: 14,
+    color: '#FFF',
+    padding: 20,
+    width: '100%',
+    maxWidth: 140,
+    display: 'flex',
+    marginRight: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column',
+    textAlign: 'center',
+    fontSize: 20,
+  },
+  supportLogo: {
+    width: '50%',
+  },
+  verticalTextContainer: {
+    borderRadius: 14,
+    color: '#FFF',
+    padding: '20px 10px',
+    width: '100%',
+    maxWidth: 140,
+    display: 'flex',
+    marginRight: 20,
+    justifyContent: 'space-between',
+    fontSize: 24,
+    flexDirection: 'row',
+    fontWeight: 700,
+    zIndex: 3,
+  },
+  textVertical: {
+    writingMode: 'vertical-rl',
+    textOrientation: 'upright',
+  },
+  statusContainer: {
+    borderRadius: 24,
+    height: 180,
+    minWidth: 320,
+    background: '#FFF',
+    color: '#303641',
+    display: 'block',
+    padding: '20px',
+  },
+  statusText: {
+    fontSize: 18,
+    marginBottom: 28,
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+  iconCheck: {
+    width: 22,
+    height: 22,
+    marginLeft: 10,
+    marginRight: 10,
+  },
+  iconCross: {
+    width: 18,
+    height: 18,
+    marginLeft: 10,
+    marginRight: 10,
+  },
+  checkText: {
+    color: '#26BC26',
+  },
+  crossText: {
+    color: '#F22222',
+  },
+  orange: {
+    color: '#FE9F01',
+    fontWeight: 600,
+  },
+  lightBlue: {
+    color: '#9CBEE0',
+    fontWeight: 600,
+  },
+  lightGreen: {
+    color: '#8D9460',
+    fontWeight: 600,
+  },
+  whiteBg: {
+    background: '#FFF',
+    paddingTop: 30,
+    paddingBottom: 20,
+    color: '#303641',
+    borderRadius: 20,
+    height: 370,
+  },
+  redText: {
+    color: '#F22222',
+  },
+  greenBlock: {
+    background: '#25C309',
+    color: '#FFF',
+    borderRadius: 10,
+    paddingLeft: 5,
+    paddingRight: 5,
+  },
+  redBlock: {
+    background: '#c30909',
+    color: '#FFF',
+    borderRadius: 10,
+    paddingLeft: 5,
+    paddingRight: 5,
+  },
+  bannerContainer: {
+    marginTop: 35,
+  },
+  desktopChartStyle: {
+    maxWidth: 760,
+    overflowX: 'scroll',
+    overflowY: 'hidden',
+    scrollBehavior: 'smooth',
+  },
+}))
+
+export default styles
diff --git a/admin-ui/app/styles/custom/navbar.scss b/admin-ui/app/styles/custom/navbar.scss
index e9a693635..5cc4e8d77 100644
--- a/admin-ui/app/styles/custom/navbar.scss
+++ b/admin-ui/app/styles/custom/navbar.scss
@@ -50,4 +50,5 @@
   height: 87vh;
   overflow-y: scroll;
   margin-bottom: 0;
+  margin-top: 20px;
 }
\ No newline at end of file