From 87a66e9630026e06c2dc54f67440df80878a99a7 Mon Sep 17 00:00:00 2001
From: kimenyikevin <52419102+kimenyikevin@users.noreply.github.com>
Date: Tue, 15 Mar 2022 15:50:20 +0200
Subject: [PATCH] Add sorting to admin panel tables (#5461)

* implemet logout for admin system

* implement logout on admin dashboard

* implement filter for user table

* add sorting to tables

* add user role filter

* fix type error

* fix project sorting

* fix icon style

* fix admin nav icon

* fix /admin/location alter message

* fix drawer style

* implemet logout for admin system

* implement logout on admin dashboard

* implement filter for user table

* add sorting to tables

* add user role filter

* fix type error

* fix project sorting

* fix icon style

* fix admin nav icon

* fix /admin/location alter message

* fix drawer style

* center align column headings in project route of admin panel

* refactoring remove unwanted code

* refactor admin code

* fix update location issue

Co-authored-by: Zulqarnain Hanif <30355034+zulqarnainhanif@users.noreply.github.com>
---
 .../client-core/src/admin/common/Table.tsx    | 150 +++++++-
 .../src/admin/common/variables/projects.ts    |  19 +
 .../src/admin/common/variables/route.ts       |   4 +-
 .../src/admin/common/variables/user.ts        |  28 ++
 .../admin/components/Avatars/AvatarDetail.tsx |   2 +-
 .../admin/components/Group/CreateGroup.tsx    |   1 -
 .../src/admin/components/Group/EditGroup.tsx  |   1 -
 .../src/admin/components/Group/GroupTable.tsx |   2 -
 .../components/Instance/InstanceTable.tsx     |   2 -
 .../admin/components/Invite/InviteModel.tsx   |   4 +-
 .../components/Invite/ReceivedInvite.tsx      |   2 -
 .../admin/components/Invite/SentInvite.tsx    |   2 -
 .../components/Location/CreateLocation.tsx    |  11 +-
 .../components/Location/LocationTable.tsx     |   2 -
 .../components/Location/ViewLocation.tsx      |  45 ++-
 .../src/admin/components/Party/PartyTable.tsx |   2 -
 .../admin/components/Project/ProjectTable.tsx | 232 ++++++++++++
 .../components/Project/UploadProjectModal.tsx |   1 -
 .../src/admin/components/Project/index.tsx    | 341 +-----------------
 .../admin/components/Routes/RouteTable.tsx    |   2 +-
 .../admin/components/Setting/Chargebee.tsx    |   2 -
 .../src/admin/components/Setting/index.tsx    |   3 -
 .../admin/components/Users/CreateUserRole.tsx |   4 +-
 .../src/admin/components/Users/index.tsx      | 118 +++++-
 .../client-core/src/admin/pages/bot/index.tsx |   4 +-
 .../client-core/src/admin/pages/party.tsx     |   4 +-
 .../src/admin/services/AvatarService.ts       |   2 +-
 .../src/admin/services/SceneService.ts        |   2 +-
 .../src/admin/services/UserService.ts         |  38 +-
 packages/client-core/src/admin/styles/ui.ts   |  11 +-
 .../MediaInstanceConnectionService.ts         |   4 +-
 .../src/components/MediaIconsBox/index.tsx    |  10 +-
 .../PartyParticipantWindow/index.tsx          |   2 +-
 .../src/social/services/LocationService.ts    |   2 +-
 .../user/components/Dashboard/Dashboard.tsx   |   2 +-
 .../components/Dashboard/styles.module.scss   |   2 +-
 packages/common/src/interfaces/Location.ts    |   4 +-
 37 files changed, 625 insertions(+), 442 deletions(-)
 create mode 100644 packages/client-core/src/admin/common/variables/projects.ts
 create mode 100644 packages/client-core/src/admin/components/Project/ProjectTable.tsx

diff --git a/packages/client-core/src/admin/common/Table.tsx b/packages/client-core/src/admin/common/Table.tsx
index 5743947278..aea38a18d4 100644
--- a/packages/client-core/src/admin/common/Table.tsx
+++ b/packages/client-core/src/admin/common/Table.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import Box from '@mui/material/Box'
 import Table from '@mui/material/Table'
 import TableBody from '@mui/material/TableBody'
 import TableCell from '@mui/material/TableCell'
@@ -7,6 +8,8 @@ import TableContainer from '@mui/material/TableContainer'
 import TableHead from '@mui/material/TableHead'
 import TablePagination from '@mui/material/TablePagination'
 import TableRow from '@mui/material/TableRow'
+import TableSortLabel from '@mui/material/TableSortLabel'
+import { visuallyHidden } from '@mui/utils'
 
 import { useStyles } from '../styles/ui'
 
@@ -19,30 +22,145 @@ interface Props {
   handlePageChange: (e: unknown, newPage: number) => void
   handleRowsPerPageChange: (e: React.ChangeEvent<HTMLInputElement>) => void
 }
+type Order = 'asc' | 'desc'
+
+interface Data {
+  calories: number
+  carbs: number
+  fat: number
+  name: string
+  protein: number
+}
+
+interface HeadCell {
+  disablePadding: boolean
+  id: keyof Data
+  label: string
+  align?: 'right'
+  minWidth: any
+}
+
+function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
+  if (b[orderBy] < a[orderBy]) {
+    return -1
+  }
+  if (b[orderBy] > a[orderBy]) {
+    return 1
+  }
+  return 0
+}
+
+function getComparator<Key extends keyof any>(
+  order: Order,
+  orderBy: Key
+): (a: { [key in Key]: number | string }, b: { [key in Key]: number | string }) => number {
+  return order === 'desc'
+    ? (a, b) => descendingComparator(a, b, orderBy)
+    : (a, b) => -descendingComparator(a, b, orderBy)
+}
+
+function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => number) {
+  const stabilizedThis = array.map((el, index) => [el, index] as [T, number])
+  stabilizedThis.sort((a, b) => {
+    const order = comparator(a[0], b[0])
+    if (order !== 0) {
+      return order
+    }
+    return a[1] - b[1]
+  })
+  return stabilizedThis.map((el) => el[0])
+}
+interface EnhancedTableProps {
+  onRequestSort: (event: React.MouseEvent<unknown>, property: keyof Data) => void
+  order: Order
+  orderBy: string
+  rowCount: number
+  columns: HeadCell[]
+}
+
+const EnhancedTableHead = (props: EnhancedTableProps) => {
+  const { order, orderBy, onRequestSort, columns } = props
+  const classes = useStyles()
+  const createSortHandler = (property: keyof Data) => (event: React.MouseEvent<unknown>) => {
+    onRequestSort(event, property)
+  }
+
+  return (
+    <TableHead>
+      <TableRow>
+        {columns.map((headCell) => (
+          <TableCell
+            key={headCell.id}
+            align={headCell.align}
+            padding={headCell.disablePadding ? 'none' : 'normal'}
+            sortDirection={orderBy === headCell.id ? order : false}
+            className={classes.tableCellHeader}
+            style={{ minWidth: headCell.minWidth }}
+          >
+            {(headCell.id as any) === 'action' ? (
+              <span>{headCell.label} </span>
+            ) : (
+              <TableSortLabel
+                active={orderBy === headCell.id}
+                direction={orderBy === headCell.id ? order : 'asc'}
+                onClick={createSortHandler(headCell.id)}
+                classes={{ icon: classes.spanWhite, active: classes.spanWhite }}
+              >
+                {headCell.label}
+                {orderBy === headCell.id ? (
+                  <Box component="span" sx={visuallyHidden}>
+                    {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                  </Box>
+                ) : null}
+              </TableSortLabel>
+            )}
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  )
+}
 
 const TableComponent = (props: Props) => {
   const classes = useStyles()
   const { rows, column, page, rowsPerPage, count, handlePageChange, handleRowsPerPageChange } = props
+  const [order, setOrder] = React.useState<Order>('asc')
+  const [orderBy, setOrderBy] = React.useState<keyof Data>(column[0].id)
+  const handleRequestSort = (event: React.MouseEvent<unknown>, property: keyof Data) => {
+    const isAsc = orderBy === property && order === 'asc'
+    setOrder(isAsc ? 'desc' : 'asc')
+    setOrderBy(property)
+  }
+
   return (
     <React.Fragment>
       <TableContainer className={classes.tableContainer}>
         <Table stickyHeader aria-label="sticky table">
-          <TableHead>
-            <TableRow>
-              {column.map((column, index) => (
-                <TableCell
-                  key={index}
-                  align={column.align}
-                  style={{ minWidth: column.minWidth }}
-                  className={classes.tableCellHeader}
-                >
-                  {column.label}
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
+          <EnhancedTableHead
+            order={order}
+            orderBy={orderBy}
+            onRequestSort={handleRequestSort}
+            rowCount={rows.length}
+            columns={column}
+          />
           <TableBody>
-            {rows.map((row, rIndex) => {
+            {stableSort(rows, getComparator(order, orderBy))
+              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+              .map((row, index) => {
+                return (
+                  <TableRow hover role="checkbox" tabIndex={-1} key={row.name}>
+                    {column.map((column, index) => {
+                      const value = row[column.id]
+                      return (
+                        <TableCell key={index} align={column.align} className={classes.tableCellBody}>
+                          {value}
+                        </TableCell>
+                      )
+                    })}
+                  </TableRow>
+                )
+              })}
+            {/* {rows.map((row, rIndex) => {
               return (
                 <TableRow hover role="checkbox" tabIndex={-1} key={rIndex}>
                   {column.map((column, index) => {
@@ -55,7 +173,7 @@ const TableComponent = (props: Props) => {
                   })}
                 </TableRow>
               )
-            })}
+            })} */}
           </TableBody>
         </Table>
       </TableContainer>
diff --git a/packages/client-core/src/admin/common/variables/projects.ts b/packages/client-core/src/admin/common/variables/projects.ts
new file mode 100644
index 0000000000..3fedbba5a7
--- /dev/null
+++ b/packages/client-core/src/admin/common/variables/projects.ts
@@ -0,0 +1,19 @@
+export interface ProjectColumn {
+  id: 'name' | 'update' | 'invalidate' | 'view' | 'action'
+  label: string
+  minWidth?: number
+  align?: 'right' | 'center'
+}
+
+export const projectsColumns: ProjectColumn[] = [
+  { id: 'name', label: 'name', minWidth: 65 },
+  { id: 'update', label: 'Update', minWidth: 65, align: 'center' },
+  { id: 'invalidate', label: 'Invalidate Cache', minWidth: 65, align: 'center' },
+  { id: 'view', label: 'View Project Files', minWidth: 65, align: 'center' },
+  {
+    id: 'action',
+    label: 'Remove',
+    minWidth: 65,
+    align: 'center'
+  }
+]
diff --git a/packages/client-core/src/admin/common/variables/route.ts b/packages/client-core/src/admin/common/variables/route.ts
index 1dd0436a18..6f75dd139d 100644
--- a/packages/client-core/src/admin/common/variables/route.ts
+++ b/packages/client-core/src/admin/common/variables/route.ts
@@ -1,5 +1,5 @@
 export interface RouteColumn {
-  id: 'project' | 'route' | 'active'
+  id: 'project' | 'route' | 'action'
   label: string
   minWidth?: number
   align?: 'right'
@@ -9,7 +9,7 @@ export const routeColumns: RouteColumn[] = [
   { id: 'project', label: 'Project', minWidth: 65 },
   { id: 'route', label: 'Route', minWidth: 65 },
   {
-    id: 'active',
+    id: 'action',
     label: 'Active',
     minWidth: 65,
     align: 'right'
diff --git a/packages/client-core/src/admin/common/variables/user.ts b/packages/client-core/src/admin/common/variables/user.ts
index 582a9f5486..e49b7ed415 100644
--- a/packages/client-core/src/admin/common/variables/user.ts
+++ b/packages/client-core/src/admin/common/variables/user.ts
@@ -65,3 +65,31 @@ export interface UserTabPanelProps {
   index: any
   value: any
 }
+
+export const userFilterMenu = {
+  elevation: 0,
+  sx: {
+    overflow: 'visible',
+    filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+    mt: 1.5,
+    '& .MuiAvatar-root': {
+      width: 32,
+      height: 32,
+      ml: -0.5,
+      mr: 1
+    },
+    bgcolor: 'rgb(58, 65, 73) !important',
+    '&:before': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      top: 0,
+      right: 14,
+      width: 10,
+      height: 10,
+      bgcolor: 'rgb(58, 65, 73) !important',
+      transform: 'translateY(-50%) rotate(45deg)',
+      zIndex: 0
+    }
+  }
+}
diff --git a/packages/client-core/src/admin/components/Avatars/AvatarDetail.tsx b/packages/client-core/src/admin/components/Avatars/AvatarDetail.tsx
index ab8b82de5e..36c0c19347 100644
--- a/packages/client-core/src/admin/components/Avatars/AvatarDetail.tsx
+++ b/packages/client-core/src/admin/components/Avatars/AvatarDetail.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 
 import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
diff --git a/packages/client-core/src/admin/components/Group/CreateGroup.tsx b/packages/client-core/src/admin/components/Group/CreateGroup.tsx
index 790ed687d9..47b3987b86 100644
--- a/packages/client-core/src/admin/components/Group/CreateGroup.tsx
+++ b/packages/client-core/src/admin/components/Group/CreateGroup.tsx
@@ -34,7 +34,6 @@ const CreateGroup = (props: Props) => {
   const classes = useStyles()
   const user = useAuthState().user
   const adminScopeTypeState = useScopeTypeState()
-  const adminScopeTypes = adminScopeTypeState.scopeTypes
   const { t } = useTranslation()
 
   const [state, setState] = useState({
diff --git a/packages/client-core/src/admin/components/Group/EditGroup.tsx b/packages/client-core/src/admin/components/Group/EditGroup.tsx
index 4f06c5974e..7de7ba8015 100644
--- a/packages/client-core/src/admin/components/Group/EditGroup.tsx
+++ b/packages/client-core/src/admin/components/Group/EditGroup.tsx
@@ -32,7 +32,6 @@ const EditGroup = (props: Props) => {
   const { groupAdmin, closeEditModal, closeViewModal } = props
   const user = useAuthState().user
   const adminScopeTypeState = useScopeTypeState()
-  const adminScopeTypes = adminScopeTypeState.scopeTypes
   const { t } = useTranslation()
 
   const [state, setState] = useState({
diff --git a/packages/client-core/src/admin/components/Group/GroupTable.tsx b/packages/client-core/src/admin/components/Group/GroupTable.tsx
index 35ff9ffcfe..79b7f6922a 100644
--- a/packages/client-core/src/admin/components/Group/GroupTable.tsx
+++ b/packages/client-core/src/admin/components/Group/GroupTable.tsx
@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
 
 import { Group } from '@xrengine/common/src/interfaces/Group'
 
-import { useDispatch } from '../../../store'
 import { useAuthState } from '../../../user/services/AuthService'
 import ConfirmModel from '../../common/ConfirmModel'
 import TableComponent from '../../common/Table'
@@ -18,7 +17,6 @@ interface Props {
 
 const GroupTable = (props: Props) => {
   const { search } = props
-  const dispatch = useDispatch()
   const classes = useStyles()
   const user = useAuthState().user
   const [viewModel, setViewModel] = useState(false)
diff --git a/packages/client-core/src/admin/components/Instance/InstanceTable.tsx b/packages/client-core/src/admin/components/Instance/InstanceTable.tsx
index 67030437b4..1e9b13ffb4 100644
--- a/packages/client-core/src/admin/components/Instance/InstanceTable.tsx
+++ b/packages/client-core/src/admin/components/Instance/InstanceTable.tsx
@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next'
 import { Instance } from '@xrengine/common/src/interfaces/Instance'
 import { Location } from '@xrengine/common/src/interfaces/Location'
 
-import { useDispatch } from '../../../store'
 import { useAuthState } from '../../../user/services/AuthService'
 import ConfirmModel from '../../common/ConfirmModel'
 import TableComponent from '../../common/Table'
@@ -26,7 +25,6 @@ interface Props {
  */
 const InstanceTable = (props: Props) => {
   const { search } = props
-  const dispatch = useDispatch()
   const classes = useStyles()
   const [page, setPage] = React.useState(0)
   const [rowsPerPage, setRowsPerPage] = React.useState(INSTNCE_PAGE_LIMIT)
diff --git a/packages/client-core/src/admin/components/Invite/InviteModel.tsx b/packages/client-core/src/admin/components/Invite/InviteModel.tsx
index 21c4817a6c..07d874a52b 100755
--- a/packages/client-core/src/admin/components/Invite/InviteModel.tsx
+++ b/packages/client-core/src/admin/components/Invite/InviteModel.tsx
@@ -22,7 +22,6 @@ import makeStyles from '@mui/styles/makeStyles'
 import { InviteService } from '../../../social/services/InviteService'
 import { InviteTypeService } from '../../../social/services/InviteTypeService'
 import { useInviteTypeState } from '../../../social/services/InviteTypeService'
-import { useDispatch } from '../../../store'
 import styles from '../Admin.module.scss'
 
 interface Props {
@@ -103,8 +102,7 @@ const InviteModel = (props: Props) => {
   // const [openInvite ,setOpenInvite] = React.useState(false);
   const [openWarning, setOpenWarning] = React.useState(false)
   const { t } = useTranslation()
-  const [error, setError] = React.useState('')
-  const dispatch = useDispatch()
+
   const handleCloseWarning = (event, reason) => {
     if (reason === 'clickaway') {
       return
diff --git a/packages/client-core/src/admin/components/Invite/ReceivedInvite.tsx b/packages/client-core/src/admin/components/Invite/ReceivedInvite.tsx
index bde5f4693c..415569dbaa 100755
--- a/packages/client-core/src/admin/components/Invite/ReceivedInvite.tsx
+++ b/packages/client-core/src/admin/components/Invite/ReceivedInvite.tsx
@@ -21,7 +21,6 @@ import makeStyles from '@mui/styles/makeStyles'
 
 import { InviteService } from '../../../social/services/InviteService'
 import { INVITE_PAGE_LIMIT, useInviteState } from '../../../social/services/InviteService'
-import { useDispatch } from '../../../store'
 
 interface Props {
   invites: any
@@ -111,7 +110,6 @@ const ReceivedInvite = (props: Props) => {
   const { invites } = props
   const [page, setPage] = React.useState(0)
   const [rowsPerPage, setRowsPerPage] = React.useState(INVITE_PAGE_LIMIT)
-  const dispatch = useDispatch()
   const inviteState = useInviteState()
   const receivedInviteCount = inviteState.receivedInvites.total.value
   const rows = invites.map((el, index) => createData(el.id, el.user.name, el.passcode, el.inviteType))
diff --git a/packages/client-core/src/admin/components/Invite/SentInvite.tsx b/packages/client-core/src/admin/components/Invite/SentInvite.tsx
index f0ab87a750..1b2af1a83f 100755
--- a/packages/client-core/src/admin/components/Invite/SentInvite.tsx
+++ b/packages/client-core/src/admin/components/Invite/SentInvite.tsx
@@ -23,7 +23,6 @@ import makeStyles from '@mui/styles/makeStyles'
 import { InviteService } from '../../../social/services/InviteService'
 import { useInviteState } from '../../../social/services/InviteService'
 import { INVITE_PAGE_LIMIT } from '../../../social/services/InviteService'
-import { useDispatch } from '../../../store'
 
 interface Props {
   sentInvites?: any
@@ -116,7 +115,6 @@ const SentInvite = (props: Props) => {
   const { invites } = props
   const [page, setPage] = React.useState(0)
   const [rowsPerPage, setRowsPerPage] = React.useState(INVITE_PAGE_LIMIT)
-  const dispatch = useDispatch()
   const inviteState = useInviteState()
   const { t } = useTranslation()
   const sentInviteCount = inviteState.sentInvites.total.value
diff --git a/packages/client-core/src/admin/components/Location/CreateLocation.tsx b/packages/client-core/src/admin/components/Location/CreateLocation.tsx
index f024f65096..a4f53d7c08 100644
--- a/packages/client-core/src/admin/components/Location/CreateLocation.tsx
+++ b/packages/client-core/src/admin/components/Location/CreateLocation.tsx
@@ -151,7 +151,14 @@ const CreateLocation = (props: Props) => {
 
   return (
     <React.Fragment>
-      <Drawer anchor="right" classes={{ paper: classes.paperDrawer }} open={open} onClose={() => handleClose(false)}>
+      <Drawer
+        anchor="right"
+        classes={{ paper: classes.paperDrawer }}
+        open={open}
+        onClose={() => {
+          closeViewModel && closeViewModel(false)
+        }}
+      >
         <Container maxWidth="sm" className={classes.marginTp}>
           <DialogTitle id="form-dialog-title" className={classes.texAlign}>
             {t('admin:components.locationModel.createNewLocation')}
@@ -364,9 +371,9 @@ const CreateLocation = (props: Props) => {
               {t('admin:components.locationModel.lbl-cancel')}
             </Button>
           </DialogActions>
-          <AlertMessage open={openWarning} handleClose={handleCloseWarning} severity="warning" message={error} />
         </Container>
       </Drawer>
+      <AlertMessage open={openWarning} handleClose={handleCloseWarning} severity="warning" message={error} />
     </React.Fragment>
   )
 }
diff --git a/packages/client-core/src/admin/components/Location/LocationTable.tsx b/packages/client-core/src/admin/components/Location/LocationTable.tsx
index 58b4365162..2a45043163 100644
--- a/packages/client-core/src/admin/components/Location/LocationTable.tsx
+++ b/packages/client-core/src/admin/components/Location/LocationTable.tsx
@@ -7,7 +7,6 @@ import Avatar from '@mui/material/Avatar'
 import Chip from '@mui/material/Chip'
 
 import { useErrorState } from '../../../common/services/ErrorService'
-import { useDispatch } from '../../../store'
 import { useAuthState } from '../../../user/services/AuthService'
 import ConfirmModel from '../../common/ConfirmModel'
 import { useFetchAdminInstance } from '../../common/hooks/Instance.hooks'
@@ -34,7 +33,6 @@ const LocationTable = (props: LocationProps) => {
   const [locationName, setLocationName] = React.useState('')
   const [viewModel, setViewModel] = React.useState(false)
   const [locationAdmin, setLocationAdmin] = React.useState<Location>()
-  const dispatch = useDispatch()
   const authState = useAuthState()
   const user = authState.user
   const adminScopeReadErrMsg = useErrorState().readError.scopeErrorMessage
diff --git a/packages/client-core/src/admin/components/Location/ViewLocation.tsx b/packages/client-core/src/admin/components/Location/ViewLocation.tsx
index 88481b8da2..6e3ebd0b82 100644
--- a/packages/client-core/src/admin/components/Location/ViewLocation.tsx
+++ b/packages/client-core/src/admin/components/Location/ViewLocation.tsx
@@ -1,10 +1,9 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { Location } from '@xrengine/common/src/interfaces/Location'
 
 import { Save } from '@mui/icons-material'
-import MuiAlert from '@mui/material/Alert'
 import Avatar from '@mui/material/Avatar'
 import Button from '@mui/material/Button'
 import Chip from '@mui/material/Chip'
@@ -22,7 +21,6 @@ import Select from '@mui/material/Select'
 import Switch from '@mui/material/Switch'
 import Typography from '@mui/material/Typography'
 
-import { useDispatch } from '../../../store'
 import { useAuthState } from '../../../user/services/AuthService'
 import AlertMessage from '../../common/AlertMessage'
 import { validateForm } from '../../common/validation/formValidation'
@@ -36,16 +34,11 @@ interface Props {
   locationAdmin?: Location
 }
 
-const Alert = (props) => {
-  return <MuiAlert elevation={6} variant="filled" {...props} />
-}
-
 const ViewLocation = (props: Props) => {
   const { openView, closeViewModel, locationAdmin } = props
-  const dispatch = useDispatch()
   const classes = useStyles()
-  const [editMode, setEditMode] = React.useState(false)
-  const [state, setState] = React.useState({
+  const [editMode, setEditMode] = useState(false)
+  const [state, setState] = useState({
     name: '',
     maxUsers: 10,
     scene: '',
@@ -64,9 +57,9 @@ const ViewLocation = (props: Props) => {
       type: ''
     }
   })
-  const [location, setLocation] = React.useState<any>('')
-  const [error, setError] = React.useState('')
-  const [openWarning, setOpenWarning] = React.useState(false)
+  const [location, setLocation] = useState<any>('')
+  const [error, setError] = useState('')
+  const [openWarning, setOpenWarning] = useState(false)
   const { t } = useTranslation()
   const adminScenes = useSceneState().scenes
   const locationTypes = useLocationState().locationTypes
@@ -81,7 +74,7 @@ const ViewLocation = (props: Props) => {
     }
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (locationAdmin) {
       setLocation(locationAdmin)
       setState({
@@ -89,12 +82,12 @@ const ViewLocation = (props: Props) => {
         name: locationAdmin.name,
         maxUsers: locationAdmin.maxUsersPerInstance,
         scene: locationAdmin.sceneId,
-        type: locationAdmin.locationSettings.locationType,
-        videoEnabled: locationAdmin.locationSettings.videoEnabled,
-        audioEnabled: locationAdmin.locationSettings.audioEnabled,
-        screenSharingEnabled: locationAdmin.locationSettings.screenSharingEnabled,
-        faceStreamingEnabled: locationAdmin.locationSettings.faceStreamingEnabled,
-        globalMediaEnabled: locationAdmin.locationSettings.instanceMediaChatEnabled,
+        type: locationAdmin?.locationSetting?.locationType,
+        videoEnabled: locationAdmin?.locationSetting?.videoEnabled,
+        audioEnabled: locationAdmin?.locationSetting?.audioEnabled,
+        screenSharingEnabled: locationAdmin?.locationSetting?.screenSharingEnabled,
+        faceStreamingEnabled: locationAdmin?.locationSetting?.faceStreamingEnabled,
+        globalMediaEnabled: locationAdmin?.locationSetting?.instanceMediaChatEnabled,
         isLobby: locationAdmin.isLobby,
         isFeatured: locationAdmin.isFeatured
       })
@@ -114,7 +107,7 @@ const ViewLocation = (props: Props) => {
       case 'scene':
         temp.scene = value.length < 2 ? t('admin:components.locationModel.sceneRequired') : ''
         break
-      case 'private':
+      case 'type':
         temp.type = value.length < 2 ? t('admin:components.locationModel.privateRoleRequired') : ''
         break
       default:
@@ -123,6 +116,7 @@ const ViewLocation = (props: Props) => {
     setState({ ...state, [name]: value, formErrors: temp })
   }
 
+  console.log(state)
   const handleSubmit = () => {
     const locationData = {
       name: state.name,
@@ -151,7 +145,7 @@ const ViewLocation = (props: Props) => {
       temp.scene = t('admin:components.locationModel.sceneCantEmpty')
     }
     if (!state.type) {
-      temp.scene = t('admin:components.locationModel.typeCantEmpty')
+      temp.type = t('admin:components.locationModel.typeCantEmpty')
     }
     setState({ ...state, formErrors: temp })
     if (validateForm(state, state.formErrors)) {
@@ -284,7 +278,10 @@ const ViewLocation = (props: Props) => {
                 </FormControl>
               </Paper>
               <label>{t('admin:components.locationModel.private')}</label>
-              <Paper component="div" className={classes.createInput}>
+              <Paper
+                component="div"
+                className={state.formErrors.type.length > 0 ? classes.redBorder : classes.createInput}
+              >
                 <FormControl fullWidth>
                   <Select
                     labelId="demo-controlled-open-select-label"
@@ -568,8 +565,8 @@ const ViewLocation = (props: Props) => {
             </div>
           )}
         </DialogActions>
-        <AlertMessage open={openWarning} handleClose={handleCloseWarning} severity="warning" message={error} />
       </Drawer>
+      <AlertMessage open={openWarning} handleClose={handleCloseWarning} severity="warning" message={error} />
     </React.Fragment>
   )
 }
diff --git a/packages/client-core/src/admin/components/Party/PartyTable.tsx b/packages/client-core/src/admin/components/Party/PartyTable.tsx
index 9df606121e..22707a2566 100644
--- a/packages/client-core/src/admin/components/Party/PartyTable.tsx
+++ b/packages/client-core/src/admin/components/Party/PartyTable.tsx
@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
 
 import { AdminParty } from '@xrengine/common/src/interfaces/AdminParty'
 
-import { useDispatch } from '../../../store'
 import { useAuthState } from '../../../user/services/AuthService'
 import ConfirmModel from '../../common/ConfirmModel'
 import { useFetchAdminParty } from '../../common/hooks/party.hooks'
@@ -16,7 +15,6 @@ import ViewParty from './ViewParty'
 const PartyTable = (props: PartyPropsTable) => {
   const { search } = props
   const classes = useStyles()
-  const dispatch = useDispatch()
   const { t } = useTranslation()
   const [page, setPage] = useState(0)
   const [rowsPerPage, setRowsPerPage] = useState(PARTY_PAGE_LIMIT)
diff --git a/packages/client-core/src/admin/components/Project/ProjectTable.tsx b/packages/client-core/src/admin/components/Project/ProjectTable.tsx
new file mode 100644
index 0000000000..804aa32385
--- /dev/null
+++ b/packages/client-core/src/admin/components/Project/ProjectTable.tsx
@@ -0,0 +1,232 @@
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { ProjectInterface } from '@xrengine/common/src/interfaces/ProjectInterface'
+
+import Cached from '@mui/icons-material/Cached'
+import Cross from '@mui/icons-material/Cancel'
+import CleaningServicesIcon from '@mui/icons-material/CleaningServices'
+import VisibilityIcon from '@mui/icons-material/Visibility'
+import Button from '@mui/material/Button'
+
+import { PROJECT_PAGE_LIMIT, ProjectService, useProjectState } from '../../../common/services/ProjectService'
+import { useAuthState } from '../../../user/services/AuthService'
+import ConfirmModel from '../../common/ConfirmModel'
+import TableComponent from '../../common/Table'
+import { projectsColumns } from '../../common/variables/projects'
+import styles from './Projects.module.scss'
+import ViewProjectFiles from './ViewProjectFiles'
+
+export default function ProjectTable() {
+  const { t } = useTranslation()
+  const [popupReuploadConfirmOpen, setPopupReuploadConfirmOpen] = useState(false)
+  const [popupInvalidateConfirmOpen, setPopupInvalidateConfirmOpen] = useState(false)
+  const [popupRemoveConfirmOpen, setPopupRemoveConfirmOpen] = useState(false)
+  const [project, setProject] = useState<ProjectInterface>(null!)
+  const adminProjectState = useProjectState()
+  const adminProjects = adminProjectState.projects
+  const adminProjectCount = adminProjects.value.length
+  const authState = useAuthState()
+  const user = authState.user
+  const [projectName, setProjectName] = useState('')
+  const [showProjectFiles, setShowProjectFiles] = useState(false)
+
+  const onRemoveProject = async () => {
+    try {
+      if (project) {
+        const projectToRemove = adminProjects.value.find((p) => p.name === project?.name)!
+        if (projectToRemove) {
+          await ProjectService.removeProject(projectToRemove.id)
+          handleCloseRemoveModel()
+        } else {
+          throw Error('Failed to find the project')
+        }
+      }
+    } catch (err) {
+      console.log(err)
+    }
+  }
+
+  const tryReuploadProjects = async () => {
+    try {
+      if (project) {
+        if (!project.repositoryPath && project.name !== 'default-project') return
+        const existingProjects = adminProjects.value.find((p) => p.name === project.name)!
+        await ProjectService.uploadProject(
+          project.name === 'default-project' ? 'default-project' : existingProjects.repositoryPath
+        )
+      }
+    } catch (err) {
+      console.log(err)
+    }
+  }
+  const handleInvalidateCache = async () => {
+    try {
+      setPopupInvalidateConfirmOpen(false)
+      await ProjectService.invalidateProjectCache(project.name)
+    } catch (err) {
+      console.log(err)
+    }
+  }
+
+  useEffect(() => {
+    if (user?.id.value != null && adminProjectState.updateNeeded.value === true) {
+      ProjectService.fetchProjects()
+    }
+  }, [adminProjectState.updateNeeded.value])
+
+  const handleOpenReuploadConfirmation = (row) => {
+    setProject(row)
+    setPopupReuploadConfirmOpen(true)
+  }
+
+  const handleOpenInvaliateConfirmation = (row) => {
+    setProject(row)
+    setPopupInvalidateConfirmOpen(true)
+  }
+
+  const handleOpenRemoveConfirmation = (row) => {
+    setProject(row)
+    setPopupRemoveConfirmOpen(true)
+  }
+  const [page, setPage] = useState(0)
+  const [rowsPerPage, setRowsPerPage] = useState(PROJECT_PAGE_LIMIT)
+
+  const handleCloseReuploadModel = () => {
+    setProject(null!)
+    setPopupReuploadConfirmOpen(false)
+  }
+
+  const handleCloseInvalidateModel = () => {
+    setProject(null!)
+    setPopupInvalidateConfirmOpen(false)
+  }
+
+  const handleCloseRemoveModel = () => {
+    setProject(null!)
+    setPopupRemoveConfirmOpen(false)
+  }
+  const handleViewProject = (name: string) => {
+    setProjectName(name)
+    setShowProjectFiles(true)
+  }
+
+  const handlePageChange = (event: unknown, newPage: number) => {
+    const incDec = page < newPage ? 'increment' : 'decrement'
+    setPage(newPage)
+  }
+
+  const handleRowsPerPageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRowsPerPage(+event.target.value)
+    setPage(0)
+  }
+
+  const createData = (el: any, name: string) => {
+    return {
+      el,
+      name,
+      update: (
+        <>
+          {user.userRole.value === 'admin' && (
+            <Button
+              className={styles.checkbox}
+              disabled={el.repositoryPath === null && name !== 'default-project'}
+              onClick={() => handleOpenReuploadConfirmation(el)}
+              name="stereoscopic"
+              color="primary"
+            >
+              <Cached />
+            </Button>
+          )}
+        </>
+      ),
+      invalidate: (
+        <>
+          {user.userRole.value === 'admin' && (
+            <Button
+              className={styles.checkbox}
+              onClick={() => handleOpenInvaliateConfirmation(el)}
+              name="stereoscopic"
+              color="primary"
+            >
+              <CleaningServicesIcon />
+            </Button>
+          )}
+        </>
+      ),
+      view: (
+        <>
+          {user.userRole.value === 'admin' && (
+            <Button
+              className={styles.checkbox}
+              onClick={() => handleViewProject(name)}
+              name="stereoscopic"
+              color="primary"
+            >
+              <VisibilityIcon />
+            </Button>
+          )}
+        </>
+      ),
+      action: (
+        <>
+          {user.userRole.value === 'admin' && (
+            <Button
+              className={styles.checkbox}
+              onClick={() => handleOpenRemoveConfirmation(el)}
+              name="stereoscopic"
+              color="primary"
+            >
+              <Cross />
+            </Button>
+          )}
+        </>
+      )
+    }
+  }
+
+  const rows = adminProjects.value?.map((el) => {
+    return createData(el, el.name)
+  })
+
+  return (
+    <div>
+      <TableComponent
+        rows={rows}
+        column={projectsColumns}
+        page={page}
+        rowsPerPage={rowsPerPage}
+        count={adminProjectCount}
+        handlePageChange={handlePageChange}
+        handleRowsPerPageChange={handleRowsPerPageChange}
+      />
+      <ConfirmModel
+        popConfirmOpen={popupReuploadConfirmOpen}
+        handleCloseModel={handleCloseReuploadModel}
+        submit={tryReuploadProjects}
+        name={project?.name}
+        label={t('admin:components.project.project')}
+        type="rebuild"
+      />
+      <ConfirmModel
+        popConfirmOpen={popupInvalidateConfirmOpen}
+        handleCloseModel={handleCloseInvalidateModel}
+        submit={handleInvalidateCache}
+        name={project?.name}
+        label={t('admin:components.project.storageProvidersCacheOf')}
+        type="invalidates"
+      />
+      <ConfirmModel
+        popConfirmOpen={popupRemoveConfirmOpen}
+        handleCloseModel={handleCloseRemoveModel}
+        submit={onRemoveProject}
+        name={project?.name}
+        label={t('admin:components.project.project')}
+      />
+
+      {showProjectFiles && projectName && (
+        <ViewProjectFiles name={projectName} open={showProjectFiles} setShowProjectFiles={setShowProjectFiles} />
+      )}
+    </div>
+  )
+}
diff --git a/packages/client-core/src/admin/components/Project/UploadProjectModal.tsx b/packages/client-core/src/admin/components/Project/UploadProjectModal.tsx
index 38e38616f4..1bd705f533 100755
--- a/packages/client-core/src/admin/components/Project/UploadProjectModal.tsx
+++ b/packages/client-core/src/admin/components/Project/UploadProjectModal.tsx
@@ -16,7 +16,6 @@ import Select from '@mui/material/Select'
 import TextField from '@mui/material/TextField'
 
 import { ProjectService } from '../../../common/services/ProjectService'
-import { useDispatch } from '../../../store'
 import styles from './Projects.module.scss'
 
 interface Props {
diff --git a/packages/client-core/src/admin/components/Project/index.tsx b/packages/client-core/src/admin/components/Project/index.tsx
index 09b6d687c0..2178e84480 100755
--- a/packages/client-core/src/admin/components/Project/index.tsx
+++ b/packages/client-core/src/admin/components/Project/index.tsx
@@ -1,254 +1,43 @@
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { ProjectInterface } from '@xrengine/common/src/interfaces/ProjectInterface'
-
-import Cached from '@mui/icons-material/Cached'
-import Cross from '@mui/icons-material/Cancel'
-import CleaningServicesIcon from '@mui/icons-material/CleaningServices'
-import VisibilityIcon from '@mui/icons-material/Visibility'
 import Button from '@mui/material/Button'
 import Grid from '@mui/material/Grid'
 import Paper from '@mui/material/Paper'
-import Table from '@mui/material/Table'
-import TableBody from '@mui/material/TableBody'
-import TableCell from '@mui/material/TableCell'
-import TableContainer from '@mui/material/TableContainer'
-import TableHead from '@mui/material/TableHead'
-import TableRow from '@mui/material/TableRow'
-import TableSortLabel from '@mui/material/TableSortLabel'
 
-import { PROJECT_PAGE_LIMIT, ProjectService, useProjectState } from '../../../common/services/ProjectService'
+import { ProjectService, useProjectState } from '../../../common/services/ProjectService'
 import { useAuthState } from '../../../user/services/AuthService'
-import ConfirmModel from '../../common/ConfirmModel'
 import { GithubAppService, useGithubAppState } from '../../services/GithubAppService'
+import { useStyles } from '../../styles/ui'
 import styles from './Projects.module.scss'
+import ProjectTable from './ProjectTable'
 import UploadProjectModal from './UploadProjectModal'
-import ViewProjectFiles from './ViewProjectFiles'
 
 if (!global.setImmediate) {
   global.setImmediate = setTimeout as any
 }
 
 const Projects = () => {
+  const classes = useStyles()
   const authState = useAuthState()
   const user = authState.user
   const adminProjectState = useProjectState()
-  const adminProjects = adminProjectState.projects
-  const adminProjectCount = adminProjects.value.length
   const githubAppState = useGithubAppState()
   const githubAppRepos = githubAppState.repos.value
   const { t } = useTranslation()
-  const [projectName, setProjectName] = useState('')
-  const [showProjectFiles, setShowProjectFiles] = useState(false)
-
-  const headCell = [
-    // { id: 'id', numeric: false, disablePadding: true, label: 'ID' },
-    { id: 'name', numeric: false, disablePadding: false, label: t('admin:components.project.name') },
-    { id: 'update', numeric: false, disablePadding: true, label: t('admin:components.project.update') },
-    { id: 'invalidate', numeric: false, disablePadding: false, label: t('admin:components.project.invalidateCache') },
-    { id: 'view', numeric: false, disablePadding: false, label: t('admin:components.project.viewProjectFiles') },
-    { id: 'remove', numeric: false, disablePadding: false, label: t('admin:components.project.remove') }
-  ]
-
-  function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
-    if (b[orderBy] < a[orderBy]) {
-      return -1
-    }
-    if (b[orderBy] > a[orderBy]) {
-      return 1
-    }
-    return 0
-  }
-
-  type Order = 'asc' | 'desc'
-
-  interface EnhancedTableProps {
-    object: string
-    numSelected: number
-    onRequestSort: (event: React.MouseEvent<unknown>, property) => void
-    onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void
-    order: Order
-    orderBy: string
-    rowCount: number
-  }
-
-  function EnhancedTableHead(props: EnhancedTableProps) {
-    const { object, order, orderBy, onRequestSort } = props
-    const createSortHandler = (property) => (event: React.MouseEvent<unknown>) => {
-      onRequestSort(event, property)
-    }
-
-    return (
-      <TableHead className={styles.thead}>
-        <TableRow className={styles.trow}>
-          {headCell.map((headCell) => (
-            <TableCell
-              className={styles.tcell}
-              key={headCell.id}
-              align="right"
-              padding={headCell.disablePadding ? 'none' : 'normal'}
-              sortDirection={orderBy === headCell.id ? order : false}
-            >
-              <TableSortLabel
-                active={orderBy === headCell.id}
-                direction={orderBy === headCell.id ? order : 'asc'}
-                onClick={createSortHandler(headCell.id)}
-              >
-                {headCell.label}
-              </TableSortLabel>
-            </TableCell>
-          ))}
-        </TableRow>
-      </TableHead>
-    )
-  }
-
-  const [order, setOrder] = useState<Order>('asc')
-  const [orderBy, setOrderBy] = useState<string>('name')
-  const [selected, setSelected] = useState<string[]>([])
-  const [page, setPage] = useState(0)
-  const [rowsPerPage, setRowsPerPage] = useState(PROJECT_PAGE_LIMIT)
   const [uploadProjectsModalOpen, setUploadProjectsModalOpen] = useState(false)
-  const [selectedProjects, setSelectedProjects] = useState<ProjectInterface[]>([])
-  const [dimensions, setDimensions] = useState({
-    height: window.innerHeight,
-    width: window.innerWidth
-  })
-  const [popupReuploadConfirmOpen, setPopupReuploadConfirmOpen] = useState(false)
-  const [popupInvalidateConfirmOpen, setPopupInvalidateConfirmOpen] = useState(false)
-  const [popupRemoveConfirmOpen, setPopupRemoveConfirmOpen] = useState(false)
-  const [project, setProject] = useState<ProjectInterface>(null!)
-
-  const handleRequestSort = (event: React.MouseEvent<unknown>, property) => {
-    const isAsc = orderBy === property && order === 'asc'
-    setOrder(isAsc ? 'desc' : 'asc')
-    setOrderBy(property)
-  }
-
-  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.checked) {
-      // const newSelecteds = adminProjects.value.map((n) => n.name)
-      // setSelected(newSelecteds)
-      // return
-    }
-    setSelected([])
-  }
-
-  // const handlePageChange = (event: unknown, newPage: number) => {
-  //   const incDec = page < newPage ? 'increment' : 'decrement'
-  //   fetchProjects(incDec)
-  //   setPage(newPage)
-  // }
-
-  // const handleRowsPerPageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-  //   setRowsPerPage(parseInt(event.target.value, 10))
-  //   setPage(0)
-  // }
-
-  const onRemoveProject = async () => {
-    try {
-      if (project) {
-        const projectToRemove = adminProjects.value.find((p) => p.name === project?.name)!
-        if (projectToRemove) {
-          await ProjectService.removeProject(projectToRemove.id)
-          handleCloseRemoveModel()
-        } else {
-          throw Error('Failed to find the project')
-        }
-      }
-    } catch (err) {
-      console.log(err)
-    }
-  }
-
-  const tryReuploadProjects = async () => {
-    try {
-      if (project) {
-        if (!project.repositoryPath && project.name !== 'default-project') return
-        const existingProjects = adminProjects.value.find((p) => p.name === project.name)!
-        await ProjectService.uploadProject(
-          project.name === 'default-project' ? 'default-project' : existingProjects.repositoryPath
-        )
-      }
-    } catch (err) {
-      console.log(err)
-    }
-  }
-  const handleInvalidateCache = async () => {
-    try {
-      setPopupInvalidateConfirmOpen(false)
-      await ProjectService.invalidateProjectCache(project.name)
-    } catch (err) {
-      console.log(err)
-    }
-  }
 
   const onOpenUploadModal = () => {
     GithubAppService.fetchGithubAppRepos()
     setUploadProjectsModalOpen(true)
   }
 
-  // useEffect(() => {
-  //   fetchTick()
-  // }, [])
-
   useEffect(() => {
     if (user?.id.value != null && adminProjectState.updateNeeded.value === true) {
       ProjectService.fetchProjects()
     }
   }, [adminProjectState.updateNeeded.value])
 
-  useEffect(() => {
-    window.addEventListener('resize', handleWindowResize)
-
-    return () => {
-      window.removeEventListener('resize', handleWindowResize)
-    }
-  }, [])
-
-  const handleWindowResize = () => {
-    setDimensions({
-      height: window.innerHeight,
-      width: window.innerWidth
-    })
-  }
-
-  const handleOpenReuploadConfirmation = (row) => {
-    setProject(row)
-    setPopupReuploadConfirmOpen(true)
-  }
-
-  const handleOpenInvaliateConfirmation = (row) => {
-    setProject(row)
-    setPopupInvalidateConfirmOpen(true)
-  }
-
-  const handleOpenRemoveConfirmation = (row) => {
-    setProject(row)
-    setPopupRemoveConfirmOpen(true)
-  }
-
-  const handleCloseReuploadModel = () => {
-    setProject(null!)
-    setPopupReuploadConfirmOpen(false)
-  }
-
-  const handleCloseInvalidateModel = () => {
-    setProject(null!)
-    setPopupInvalidateConfirmOpen(false)
-  }
-
-  const handleCloseRemoveModel = () => {
-    setProject(null!)
-    setPopupRemoveConfirmOpen(false)
-  }
-
-  const handleViewProject = (name: string) => {
-    setProjectName(name)
-    setShowProjectFiles(true)
-  }
-
   return (
     <div>
       <Paper className={styles.adminRoot}>
@@ -276,131 +65,15 @@ const Projects = () => {
             </Button>
           </Grid>
         </Grid>
-        <TableContainer className={styles.tableContainer}>
-          <Table stickyHeader aria-labelledby="tableTitle" size={'medium'} aria-label="enhanced table">
-            <EnhancedTableHead
-              object={'projects'}
-              numSelected={selected.length}
-              order={order}
-              orderBy={orderBy}
-              onSelectAllClick={handleSelectAllClick}
-              onRequestSort={handleRequestSort}
-              rowCount={adminProjectCount || 0}
-            />
-            <TableBody>
-              {adminProjects.value.map((row) => {
-                return (
-                  <TableRow
-                    hover
-                    className={styles.trowHover}
-                    style={{ color: 'black !important' }}
-                    // onClick={(event) => handleLocationClick(event, row.id.toString())}
-                    tabIndex={-1}
-                    key={row.name}
-                  >
-                    <TableCell className={styles.tcell} align="right">
-                      {row.name}
-                    </TableCell>
-                    <TableCell className={styles.tcell} align="right">
-                      {user.userRole.value === 'admin' && (
-                        <Button
-                          className={styles.checkbox}
-                          disabled={row.repositoryPath === null && row.name !== 'default-project'}
-                          onClick={() => handleOpenReuploadConfirmation(row)}
-                          name="stereoscopic"
-                          color="primary"
-                        >
-                          <Cached />
-                        </Button>
-                      )}
-                    </TableCell>
-                    <TableCell className={styles.tcell} align="right">
-                      {user.userRole.value === 'admin' && (
-                        <Button
-                          className={styles.checkbox}
-                          onClick={() => handleOpenInvaliateConfirmation(row)}
-                          name="stereoscopic"
-                          color="primary"
-                        >
-                          <CleaningServicesIcon />
-                        </Button>
-                      )}
-                    </TableCell>
-                    <TableCell className={styles.tcell} align="right">
-                      {user.userRole.value === 'admin' && (
-                        <Button
-                          className={styles.checkbox}
-                          onClick={() => handleViewProject(row.name)}
-                          name="stereoscopic"
-                          color="primary"
-                        >
-                          <VisibilityIcon />
-                        </Button>
-                      )}
-                    </TableCell>
-                    <TableCell className={styles.tcell} align="right">
-                      {user.userRole.value === 'admin' && (
-                        <Button
-                          className={styles.checkbox}
-                          onClick={() => handleOpenRemoveConfirmation(row)}
-                          name="stereoscopic"
-                          color="primary"
-                        >
-                          <Cross />
-                        </Button>
-                      )}
-                    </TableCell>
-                  </TableRow>
-                )
-              })}
-            </TableBody>
-          </Table>
-        </TableContainer>
-
-        {/* <div className={styles.tableFooter}>
-          <TablePagination
-            rowsPerPageOptions={[PROJECT_PAGE_LIMIT]}
-            component="div"
-            count={adminProjectCount || 0}
-            rowsPerPage={rowsPerPage}
-            page={page}
-            onPageChange={handlePageChange}
-            onRowsPerPageChange={handleRowsPerPageChange}
-            className={styles.tablePagination}
-          />
-        </div> */}
+        <div className={classes.rootTable}>
+          <ProjectTable />
+        </div>
         <UploadProjectModal
           repos={githubAppRepos}
           open={uploadProjectsModalOpen}
           handleClose={() => setUploadProjectsModalOpen(false)}
         />
-        <ConfirmModel
-          popConfirmOpen={popupReuploadConfirmOpen}
-          handleCloseModel={handleCloseReuploadModel}
-          submit={tryReuploadProjects}
-          name={project?.name}
-          label={t('admin:components.project.project')}
-          type="rebuild"
-        />
-        <ConfirmModel
-          popConfirmOpen={popupInvalidateConfirmOpen}
-          handleCloseModel={handleCloseInvalidateModel}
-          submit={handleInvalidateCache}
-          name={project?.name}
-          label={t('admin:components.project.storageProvidersCacheOf')}
-          type="invalidates"
-        />
-        <ConfirmModel
-          popConfirmOpen={popupRemoveConfirmOpen}
-          handleCloseModel={handleCloseRemoveModel}
-          submit={onRemoveProject}
-          name={project?.name}
-          label={t('admin:components.project.project')}
-        />
       </Paper>
-      {showProjectFiles && projectName && (
-        <ViewProjectFiles name={projectName} open={showProjectFiles} setShowProjectFiles={setShowProjectFiles} />
-      )}
     </div>
   )
 }
diff --git a/packages/client-core/src/admin/components/Routes/RouteTable.tsx b/packages/client-core/src/admin/components/Routes/RouteTable.tsx
index 7cfe863325..028f9bffaf 100644
--- a/packages/client-core/src/admin/components/Routes/RouteTable.tsx
+++ b/packages/client-core/src/admin/components/Routes/RouteTable.tsx
@@ -85,7 +85,7 @@ const RouteTable = () => {
           id: el.project.value + route.value,
           project: el.project.value,
           route: route.value,
-          active: (
+          action: (
             <Checkbox
               className={classes.checkboxContainer}
               checked={isRouteActive(el.project.value, route.value)}
diff --git a/packages/client-core/src/admin/components/Setting/Chargebee.tsx b/packages/client-core/src/admin/components/Setting/Chargebee.tsx
index 6153012db2..2467db953a 100644
--- a/packages/client-core/src/admin/components/Setting/Chargebee.tsx
+++ b/packages/client-core/src/admin/components/Setting/Chargebee.tsx
@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next'
 import { Paper, Typography } from '@mui/material'
 import InputBase from '@mui/material/InputBase'
 
-import { useDispatch } from '../../../store'
 import { useAuthState } from '../../../user/services/AuthService'
 import { ChargebeeSettingService, useChargebeeSettingState } from '../../services/Setting/ChargebeeSettingService'
 import { useStyles } from './styles'
@@ -15,7 +14,6 @@ const ChargeBee = (props: Props) => {
   const classes = useStyles()
   const chargeBeeSettingState = useChargebeeSettingState()
   const [chargebee] = chargeBeeSettingState?.chargebee.value || []
-  const dispatch = useDispatch()
   const authState = useAuthState()
   const user = authState.user
   const { t } = useTranslation()
diff --git a/packages/client-core/src/admin/components/Setting/index.tsx b/packages/client-core/src/admin/components/Setting/index.tsx
index e324fb2f79..a05c2fb0a4 100644
--- a/packages/client-core/src/admin/components/Setting/index.tsx
+++ b/packages/client-core/src/admin/components/Setting/index.tsx
@@ -45,9 +45,6 @@ const Setting = () => {
   const [menuVisible, setMenuVisible] = useState(false)
   const [analyticsFocused, setAnalyticsFocused] = useState(true)
   const { t } = useTranslation()
-  // const handleNotAutoFocused = ()=>{
-  //   setIsFocused(!isFocused)
-  // }
 
   const handleAuth = () => {
     setIsAuth(!isAuth)
diff --git a/packages/client-core/src/admin/components/Users/CreateUserRole.tsx b/packages/client-core/src/admin/components/Users/CreateUserRole.tsx
index 0e735c519a..85cad6857b 100644
--- a/packages/client-core/src/admin/components/Users/CreateUserRole.tsx
+++ b/packages/client-core/src/admin/components/Users/CreateUserRole.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import DialogContent from '@mui/material/DialogContent'
 
@@ -12,7 +12,7 @@ interface Props {
 
 const createUser = (props: Props) => {
   const { open, handleClose } = props
-  const [role, setRole] = React.useState('')
+  const [role, setRole] = useState('')
   const createUserRole = async () => {
     setRole('')
   }
diff --git a/packages/client-core/src/admin/components/Users/index.tsx b/packages/client-core/src/admin/components/Users/index.tsx
index 3bd398ebc9..582430a9b6 100644
--- a/packages/client-core/src/admin/components/Users/index.tsx
+++ b/packages/client-core/src/admin/components/Users/index.tsx
@@ -1,23 +1,56 @@
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import FilterListIcon from '@mui/icons-material/FilterList'
+import Avatar from '@mui/material/Avatar'
 import Button from '@mui/material/Button'
 import Checkbox from '@mui/material/Checkbox'
+import Divider from '@mui/material/Divider'
 import FormControlLabel from '@mui/material/FormControlLabel'
 import Grid from '@mui/material/Grid'
+import IconButton from '@mui/material/IconButton'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
 
+import { useAuthState } from '../../../user/services/AuthService'
+import { useFetchUserRole } from '../../common/hooks/User.hooks'
+import InputSelect from '../../common/InputSelect'
 import Search from '../../common/Search'
+import { userFilterMenu } from '../../common/variables/user'
+import { UserRoleService, useUserRoleState } from '../../services/UserRoleService'
 import { UserService } from '../../services/UserService'
 import { useStyles } from '../../styles/ui'
 import styles from '../Admin.module.scss'
 import UserModel from './CreateUser'
 import UserTable from './UserTable'
 
+interface InputSelectProps {
+  value: string
+  label: string
+}
+
 const Users = () => {
   const classes = useStyles()
   const [search, setSearch] = useState('')
   const [userModalOpen, setUserModalOpen] = useState(false)
+  const [role, setRole] = useState('')
   const { t } = useTranslation()
+  const [checked, setChecked] = useState(false)
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
+  const openMenu = Boolean(anchorEl)
+  const user = useAuthState().user
+  const userRole = useUserRoleState()
+
+  //Call custom hooks
+  useFetchUserRole(UserRoleService, userRole, user)
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
   const openModalCreate = (open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
     if (
       event.type === 'keydown' &&
@@ -31,19 +64,70 @@ const Users = () => {
     setUserModalOpen(open)
   }
   const handleSkipGuests = (e: any) => {
+    setChecked(e.target.checked)
     UserService.setSkipGuests(e.target.checked)
   }
   const handleChange = (e: any) => {
     setSearch(e.target.value)
   }
 
+  const handleChangeRole = (e) => {
+    UserService.setUserRole(e.target.value)
+    setRole(e.target.value)
+  }
+
+  const resetFilter = () => {
+    setChecked(false)
+    setRole('')
+    UserService.resetFilter()
+  }
+
+  const userRoleData: InputSelectProps[] = userRole.userRole.value.map((el) => {
+    return {
+      value: el.role,
+      label: el.role
+    }
+  })
+
   return (
     <div>
       <Grid container spacing={1} className={classes.marginBottom}>
         <Grid item md={8} xs={6}>
           <Search text="user" handleChange={handleChange} />
         </Grid>
-        <Grid item md={1} xs={1}>
+        <Grid item md={3} xs={5}>
+          <Button className={classes.createBtn} type="submit" variant="contained" onClick={openModalCreate(true)}>
+            {t('admin:components.user.createNewUser')}
+          </Button>
+        </Grid>
+        <Grid item md={1} xs={1} style={{ display: 'flex', justifyContent: 'center' }}>
+          <IconButton
+            onClick={handleClick}
+            size="small"
+            sx={{ ml: 2 }}
+            aria-controls={openMenu ? 'account-menu' : undefined}
+            aria-haspopup="true"
+            aria-expanded={openMenu ? 'true' : undefined}
+          >
+            <FilterListIcon color="info" fontSize="large" />
+          </IconButton>
+        </Grid>
+      </Grid>
+      <div className={classes.rootTable}>
+        <UserTable search={search} />
+      </div>
+      <UserModel open={userModalOpen} handleClose={openModalCreate} closeViewModel={closeViewModel} />
+      <Menu
+        anchorEl={anchorEl}
+        id="account-menu"
+        open={openMenu}
+        onClose={handleClose}
+        // onClick={handleClose}
+        PaperProps={userFilterMenu}
+        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+      >
+        <MenuItem>
           <FormControlLabel
             className={styles.checkbox}
             control={
@@ -52,22 +136,32 @@ const Users = () => {
                 name="stereoscopic"
                 className={styles.checkbox}
                 color="primary"
+                checked={checked}
               />
             }
             label={t('admin:components.user.hideGuests') as string}
           />
-        </Grid>
-        <Grid item md={3} xs={5}>
-          <Button className={classes.createBtn} type="submit" variant="contained" onClick={() => openModalCreate(true)}>
-            {t('admin:components.user.createNewUser')}
-          </Button>
-        </Grid>
-      </Grid>
-      <div className={classes.rootTable}>
-        <UserTable search={search} />
-      </div>
+        </MenuItem>
+        <Divider />
+        <label className={classes.spanWhite} style={{ marginLeft: '1rem' }}>
+          Based on user role
+        </label>
+        <MenuItem>
+          <InputSelect
+            handleInputChange={handleChangeRole}
+            value={role}
+            name="userRole"
+            menu={userRoleData}
+            formErrors={''}
+          />
+        </MenuItem>
 
-      <UserModel open={userModalOpen} handleClose={openModalCreate} closeViewModel={closeViewModel} />
+        <MenuItem>
+          <IconButton onClick={() => resetFilter()}>
+            <span className={classes.spanWhite}>Reset</span>
+          </IconButton>
+        </MenuItem>
+      </Menu>
     </div>
   )
 }
diff --git a/packages/client-core/src/admin/pages/bot/index.tsx b/packages/client-core/src/admin/pages/bot/index.tsx
index 6ad079cb64..d758a36d95 100644
--- a/packages/client-core/src/admin/pages/bot/index.tsx
+++ b/packages/client-core/src/admin/pages/bot/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 
 import { AuthService } from '../../../user/services/AuthService'
 import BotsCore from '../../components/Bots'
@@ -6,7 +6,7 @@ import BotsCore from '../../components/Bots'
 interface Props {}
 
 const Bots = (props: Props) => {
-  React.useEffect(() => {
+  useEffect(() => {
     AuthService.doLoginAuto(false)
   }, [])
 
diff --git a/packages/client-core/src/admin/pages/party.tsx b/packages/client-core/src/admin/pages/party.tsx
index f470830a30..97e0c3cd2a 100644
--- a/packages/client-core/src/admin/pages/party.tsx
+++ b/packages/client-core/src/admin/pages/party.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 
 import { AuthService } from '../../user/services/AuthService'
 import PartyCore from '../components/Party'
@@ -6,7 +6,7 @@ import PartyCore from '../components/Party'
 interface Props {}
 
 const Party = (props: Props) => {
-  React.useEffect(() => {
+  useEffect(() => {
     AuthService.doLoginAuto(false)
   }, [])
   return <PartyCore />
diff --git a/packages/client-core/src/admin/services/AvatarService.ts b/packages/client-core/src/admin/services/AvatarService.ts
index 4b292c0d3c..0978801437 100644
--- a/packages/client-core/src/admin/services/AvatarService.ts
+++ b/packages/client-core/src/admin/services/AvatarService.ts
@@ -2,7 +2,7 @@ import { createState, useState } from '@speigg/hookstate'
 
 import { AvatarInterface, CreateEditAdminAvatar } from '@xrengine/common/src/interfaces/AvatarInterface'
 import { AvatarResult } from '@xrengine/common/src/interfaces/AvatarResult'
-import { AdminAssetUploadType, AssetUploadType } from '@xrengine/common/src/interfaces/UploadAssetInterface'
+import { AdminAssetUploadType } from '@xrengine/common/src/interfaces/UploadAssetInterface'
 
 import { client } from '../../feathers'
 import { store, useDispatch } from '../../store'
diff --git a/packages/client-core/src/admin/services/SceneService.ts b/packages/client-core/src/admin/services/SceneService.ts
index 3e485ac624..83633920a1 100644
--- a/packages/client-core/src/admin/services/SceneService.ts
+++ b/packages/client-core/src/admin/services/SceneService.ts
@@ -1,6 +1,6 @@
 import { createState, useState } from '@speigg/hookstate'
 
-import { SceneData, SceneMetadata } from '@xrengine/common/src/interfaces/SceneInterface'
+import { SceneMetadata } from '@xrengine/common/src/interfaces/SceneInterface'
 
 import { client } from '../../feathers'
 import { store, useDispatch } from '../../store'
diff --git a/packages/client-core/src/admin/services/UserService.ts b/packages/client-core/src/admin/services/UserService.ts
index 2b8e291e75..b067f78a4f 100644
--- a/packages/client-core/src/admin/services/UserService.ts
+++ b/packages/client-core/src/admin/services/UserService.ts
@@ -20,6 +20,7 @@ const state = createState({
   fetched: false,
   updateNeeded: true,
   skipGuests: false,
+  userRole: null,
   lastFetched: 0
 })
 
@@ -59,6 +60,17 @@ store.receptors.push((action: UserActionType): any => {
           skipGuests: action.skipGuests,
           updateNeeded: true
         })
+      case 'SET_USER_ROLE':
+        return s.merge({
+          userRole: action.userRole,
+          updateNeeded: true
+        })
+      case 'RESET_USER_FILTER':
+        return s.merge({
+          userRole: null,
+          skipGuests: false,
+          updateNeeded: true
+        })
     }
   }, action.type)
 })
@@ -80,6 +92,7 @@ export const UserService = {
       const user = accessAuthState().user
       const limit = userState.limit.value
       const skipGuests = userState.skipGuests.value
+      const userRole = userState.userRole.value
       try {
         if (user.userRole.value === 'admin') {
           const params = {
@@ -98,8 +111,12 @@ export const UserService = {
               $ne: 'guest'
             }
           }
+          if (userRole) {
+            ;(params.query as any).userRole = {
+              $eq: userRole
+            }
+          }
           const users = await client.service('user').find(params)
-          console.log(users)
           dispatch(UserAction.loadedUsers(users))
         }
       } catch (err) {
@@ -165,6 +182,14 @@ export const UserService = {
   setSkipGuests: async (value: boolean) => {
     const dispatch = useDispatch()
     dispatch(UserAction.setSkipGuests(value))
+  },
+  setUserRole: async (value: string) => {
+    const dispatch = useDispatch()
+    dispatch(UserAction.setUserRole(value))
+  },
+  resetFilter: () => {
+    const dispatch = useDispatch()
+    dispatch(UserAction.resetFilter())
   }
 }
 
@@ -205,6 +230,17 @@ export const UserAction = {
       type: 'SET_SKIP_GUESTS' as const,
       skipGuests: skipGuests
     }
+  },
+  setUserRole: (userRole: any) => {
+    return {
+      type: 'SET_USER_ROLE' as const,
+      userRole: userRole
+    }
+  },
+  resetFilter: () => {
+    return {
+      type: 'RESET_USER_FILTER' as const
+    }
   }
 }
 
diff --git a/packages/client-core/src/admin/styles/ui.ts b/packages/client-core/src/admin/styles/ui.ts
index c3b7ffee00..9f62ed8952 100644
--- a/packages/client-core/src/admin/styles/ui.ts
+++ b/packages/client-core/src/admin/styles/ui.ts
@@ -78,7 +78,7 @@ export const useStyles = makeStyles((theme: Theme) =>
       marginRight: '10px'
     },
     spanWhite: {
-      color: '#f1f1f1'
+      color: '#f1f1f1 !important'
     },
     paperDrawer: {
       width: '40%',
@@ -109,17 +109,18 @@ export const useStyles = makeStyles((theme: Theme) =>
       color: '#f1f1f1 !important'
     },
     createInput: {
-      padding: '2px 4px',
+      // padding: '2px 4px',
       display: 'flex',
       alignItems: 'center',
       marginTop: '10px',
       marginBottom: '15px',
       background: '#343b41',
-      border: '1px solid #23282c',
+      // border: '1px solid #23282c',
       color: '#f1f1f1 !important'
     },
     select: {
-      color: '#f1f1f1 !important'
+      color: '#f1f1f1 !important',
+      height: '2.4rem !important'
     },
     selectPaper: {
       background: '#343b41',
@@ -178,7 +179,7 @@ export const useStyles = makeStyles((theme: Theme) =>
       maxHeight: 'calc(100vh - 172px)'
     },
     rootPaper: {
-      marginTop: '65px',
+      marginTop: '50px',
       minHeight: '15vh',
       background: '#111',
       color: '#f1f1f1',
diff --git a/packages/client-core/src/common/services/MediaInstanceConnectionService.ts b/packages/client-core/src/common/services/MediaInstanceConnectionService.ts
index 185600a5eb..e7b663b00c 100755
--- a/packages/client-core/src/common/services/MediaInstanceConnectionService.ts
+++ b/packages/client-core/src/common/services/MediaInstanceConnectionService.ts
@@ -146,9 +146,9 @@ export const MediaInstanceConnectionService = {
 
     dispatch(
       MediaLocationInstanceConnectionAction.enableVideo(
-        currentLocation?.locationSettings?.videoEnabled?.value === true ||
+        currentLocation?.locationSetting?.videoEnabled?.value === true ||
           !(
-            currentLocation?.locationSettings?.locationType?.value === 'showroom' &&
+            currentLocation?.locationSetting?.locationType?.value === 'showroom' &&
             user.locationAdmins?.find((locationAdmin) => locationAdmin.locationId === currentLocation?.id?.value) ==
               null
           )
diff --git a/packages/client-core/src/components/MediaIconsBox/index.tsx b/packages/client-core/src/components/MediaIconsBox/index.tsx
index 9e39d033d4..e46cb4f32d 100755
--- a/packages/client-core/src/components/MediaIconsBox/index.tsx
+++ b/packages/client-core/src/components/MediaIconsBox/index.tsx
@@ -50,11 +50,11 @@ const MediaIconsBox = (props) => {
   const currentLocation = useLocationState().currentLocation.location
   const channelConnectionState = useMediaInstanceConnectionState()
   const mediastream = useMediaStreamState()
-  const videoEnabled = currentLocation?.locationSettings?.value
-    ? currentLocation?.locationSettings?.videoEnabled?.value
+  const videoEnabled = currentLocation?.locationSetting?.value
+    ? currentLocation?.locationSetting?.videoEnabled?.value
     : false
-  const instanceMediaChatEnabled = currentLocation?.locationSettings?.value
-    ? currentLocation?.locationSettings?.instanceMediaChatEnabled?.value
+  const instanceMediaChatEnabled = currentLocation?.locationSetting?.value
+    ? currentLocation?.locationSetting?.instanceMediaChatEnabled?.value
     : false
 
   const isFaceTrackingEnabled = mediastream.isFaceTrackingEnabled
@@ -77,7 +77,7 @@ const MediaIconsBox = (props) => {
 
   const handleFaceClick = async () => {
     const partyId =
-      currentLocation?.locationSettings?.instanceMediaChatEnabled?.value === true
+      currentLocation?.locationSetting?.instanceMediaChatEnabled?.value === true
         ? 'instance'
         : user.partyId?.value || 'instance'
     if (isFaceTrackingEnabled.value) {
diff --git a/packages/client-core/src/components/PartyParticipantWindow/index.tsx b/packages/client-core/src/components/PartyParticipantWindow/index.tsx
index 72d6b9b1be..680b7bbdbf 100755
--- a/packages/client-core/src/components/PartyParticipantWindow/index.tsx
+++ b/packages/client-core/src/components/PartyParticipantWindow/index.tsx
@@ -77,7 +77,7 @@ const PartyParticipantWindow = (props: Props): JSX.Element => {
   const selfUser = useAuthState().user.value
   const currentLocation = useLocationState().currentLocation.location
   const enableGlobalMute =
-    currentLocation?.locationSettings?.locationType?.value === 'showroom' &&
+    currentLocation?.locationSetting?.locationType?.value === 'showroom' &&
     selfUser?.locationAdmins?.find((locationAdmin) => currentLocation?.id?.value === locationAdmin.locationId) != null
   const user = userState.layerUsers.find((user) => user.id.value === peerId)?.attach(Downgraded).value
 
diff --git a/packages/client-core/src/social/services/LocationService.ts b/packages/client-core/src/social/services/LocationService.ts
index 50ab1de482..e5b78c1305 100755
--- a/packages/client-core/src/social/services/LocationService.ts
+++ b/packages/client-core/src/social/services/LocationService.ts
@@ -44,7 +44,7 @@ store.receptors.push((action: LocationActionType): any => {
           currentLocation: {
             location: {
               ...action.location,
-              locationSettings: (action.location as any).location_setting
+              locationSetting: (action.location as any).location_setting
             },
             bannedUsers,
             selfUserBanned: false
diff --git a/packages/client-core/src/user/components/Dashboard/Dashboard.tsx b/packages/client-core/src/user/components/Dashboard/Dashboard.tsx
index 9cbc1d0c5d..90ab62ce43 100755
--- a/packages/client-core/src/user/components/Dashboard/Dashboard.tsx
+++ b/packages/client-core/src/user/components/Dashboard/Dashboard.tsx
@@ -14,7 +14,7 @@ import IconButton from '@mui/material/IconButton'
 import { useTheme } from '@mui/material/styles'
 import Typography from '@mui/material/Typography'
 
-import { AuthService, useAuthState } from '../../services/AuthService'
+import { useAuthState } from '../../services/AuthService'
 import DashboardMenuItem from './DashboardMenuItem'
 import { useStylesForDashboard } from './styles'
 import styles from './styles.module.scss'
diff --git a/packages/client-core/src/user/components/Dashboard/styles.module.scss b/packages/client-core/src/user/components/Dashboard/styles.module.scss
index 04ba7a74c8..a9f2c51456 100644
--- a/packages/client-core/src/user/components/Dashboard/styles.module.scss
+++ b/packages/client-core/src/user/components/Dashboard/styles.module.scss
@@ -9,7 +9,7 @@
   height: 50px;
 
   .navContainer {
-    width: 90vw;
+    width: 98vw;
     display: flex;
     justify-content: space-between;
     position: relative;
diff --git a/packages/common/src/interfaces/Location.ts b/packages/common/src/interfaces/Location.ts
index bb0afd46c7..7928261625 100755
--- a/packages/common/src/interfaces/Location.ts
+++ b/packages/common/src/interfaces/Location.ts
@@ -7,7 +7,7 @@ export interface Location {
   maxUsersPerInstance: number
   sceneId: string
   locationSettingsId: string
-  locationSettings: LocationSettings
+  locationSetting: LocationSettings
   isLobby: boolean
   isFeatured: boolean
   location_settings?: any
@@ -22,7 +22,7 @@ export const LocationSeed: Location = {
   locationSettingsId: '',
   isLobby: false,
   isFeatured: false,
-  locationSettings: {
+  locationSetting: {
     id: '',
     locationId: '',
     instanceMediaChatEnabled: false,