diff --git a/src/fireedge/src/client/components/Sidebar/styles.js b/src/fireedge/src/client/components/Sidebar/styles.js
index 5165268b9e..aa7f974dba 100644
--- a/src/fireedge/src/client/components/Sidebar/styles.js
+++ b/src/fireedge/src/client/components/Sidebar/styles.js
@@ -7,6 +7,7 @@ export default makeStyles(theme => ({
   // -------------------------------
   drawerPaper: {
     backgroundColor: theme.palette.background.paper,
+    boxShadow: theme.shadows[1],
     border: 'none',
     width: 0,
     visibility: 'hidden',
diff --git a/src/fireedge/src/client/components/Tables/Clusters/index.js b/src/fireedge/src/client/components/Tables/Clusters/index.js
index 30abae8bf2..d2c80139a0 100644
--- a/src/fireedge/src/client/components/Tables/Clusters/index.js
+++ b/src/fireedge/src/client/components/Tables/Clusters/index.js
@@ -15,11 +15,12 @@ const ClustersTable = () => {
   const { getClusters } = useClusterApi()
   const { filterPool } = useAuth()
 
-  const { status, fetchRequest, loading, reloading } = useFetch(getClusters)
+  const { status, fetchRequest, loading, reloading, STATUS } = useFetch(getClusters)
+  const { INIT, PENDING } = STATUS
 
   useEffect(() => { fetchRequest() }, [filterPool])
 
-  if (clusters?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
+  if (clusters?.length === 0 && [INIT, PENDING].includes(status)) {
     return <SkeletonTable />
   }
 
diff --git a/src/fireedge/src/client/components/Tables/Datastores/index.js b/src/fireedge/src/client/components/Tables/Datastores/index.js
index db0ee35fd6..2289fada25 100644
--- a/src/fireedge/src/client/components/Tables/Datastores/index.js
+++ b/src/fireedge/src/client/components/Tables/Datastores/index.js
@@ -15,11 +15,12 @@ const DatastoresTable = () => {
   const { getDatastores } = useDatastoreApi()
   const { filterPool } = useAuth()
 
-  const { status, fetchRequest, loading, reloading } = useFetch(getDatastores)
+  const { status, fetchRequest, loading, reloading, STATUS } = useFetch(getDatastores)
+  const { INIT, PENDING } = STATUS
 
   useEffect(() => { fetchRequest() }, [filterPool])
 
-  if (datastores?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
+  if (datastores?.length === 0 && [INIT, PENDING].includes(status)) {
     return <SkeletonTable />
   }
 
diff --git a/src/fireedge/src/client/components/Tables/Enhanced/index.js b/src/fireedge/src/client/components/Tables/Enhanced/index.js
index 0f9069c476..b0ab598b71 100644
--- a/src/fireedge/src/client/components/Tables/Enhanced/index.js
+++ b/src/fireedge/src/client/components/Tables/Enhanced/index.js
@@ -191,7 +191,8 @@ EnhancedTable.propTypes = {
   renderDetail: PropTypes.func,
   RowComponent: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node
+    PropTypes.node,
+    PropTypes.func
   ]),
   showPageCount: PropTypes.bool
 }
diff --git a/src/fireedge/src/client/components/Tables/Enhanced/styles.js b/src/fireedge/src/client/components/Tables/Enhanced/styles.js
index 134924453a..af685c6a2c 100644
--- a/src/fireedge/src/client/components/Tables/Enhanced/styles.js
+++ b/src/fireedge/src/client/components/Tables/Enhanced/styles.js
@@ -2,73 +2,75 @@ import { makeStyles } from '@material-ui/core'
 
 import { addOpacityToColor } from 'client/utils'
 
-export default makeStyles(({ palette, typography, breakpoints }) => ({
-  root: {
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column'
-  },
-  toolbar: {
-    ...typography.body1,
-    marginBottom: 16,
-    display: 'flex',
-    gap: '1em',
-    alignItems: 'start',
-    justifyContent: 'space-between',
-    '& > div:first-child': {
-      flexGrow: 1
-    }
-  },
-  pagination: {
-    flexShrink: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'end',
-    gap: '1em'
-  },
-  loading: {
-    transition: '200ms'
-  },
-  table: {
-    display: 'grid',
-    gridTemplateColumns: 'minmax(auto, 300px) 1fr',
-    gap: 8,
-    overflow: 'auto',
-    [breakpoints.down('sm')]: {
-      gridTemplateColumns: 'minmax(0, 1fr)'
-    }
-  },
-  body: {
-    overflow: 'auto',
-    display: 'grid',
-    gap: '1em',
-    gridTemplateColumns: 'minmax(0, 1fr)',
-    gridAutoRows: 'max-content',
-    '& > [role=row]': {
-      padding: '0.8em',
-      cursor: 'pointer',
-      color: palette.text.primary,
-      backgroundColor: palette.background.paper,
-      fontWeight: typography.fontWeightMedium,
-      fontSize: '1em',
-      borderRadius: 6,
+export default makeStyles(
+  ({ palette, typography, breakpoints, shadows }) => ({
+    root: {
+      height: '100%',
       display: 'flex',
-      gap: 8,
-      '&:hover': {
-        backgroundColor: palette.action.hover
-      },
-      '&.selected': {
-        backgroundColor: addOpacityToColor(palette.secondary.main, 0.2),
-        border: `1px solid ${palette.secondary.main}`
+      flexDirection: 'column'
+    },
+    toolbar: {
+      ...typography.body1,
+      marginBottom: 16,
+      display: 'flex',
+      gap: '1em',
+      alignItems: 'start',
+      justifyContent: 'space-between',
+      '& > div:first-child': {
+        flexGrow: 1
       }
+    },
+    pagination: {
+      flexShrink: 0,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'end',
+      gap: '1em'
+    },
+    loading: {
+      transition: '200ms'
+    },
+    table: {
+      display: 'grid',
+      gridTemplateColumns: 'minmax(auto, 300px) 1fr',
+      gap: 8,
+      overflow: 'auto',
+      [breakpoints.down('sm')]: {
+        gridTemplateColumns: 'minmax(0, 1fr)'
+      }
+    },
+    body: {
+      overflow: 'auto',
+      display: 'grid',
+      gap: '1em',
+      gridTemplateColumns: 'minmax(0, 1fr)',
+      gridAutoRows: 'max-content',
+      '& > [role=row]': {
+        padding: '0.8em',
+        cursor: 'pointer',
+        color: palette.text.primary,
+        backgroundColor: palette.background.paper,
+        fontWeight: typography.fontWeightMedium,
+        fontSize: '1em',
+        borderRadius: 6,
+        display: 'flex',
+        gap: 8,
+        boxShadow: shadows[1],
+        '&:hover': {
+          backgroundColor: palette.action.hover
+        },
+        '&.selected': {
+          backgroundColor: addOpacityToColor(palette.secondary.main, 0.2),
+          border: `2px solid ${palette.secondary.main}`
+        }
+      }
+    },
+    noDataMessage: {
+      ...typography.h6,
+      color: palette.text.hint,
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 6,
+      padding: '1em'
     }
-  },
-  noDataMessage: {
-    ...typography.h6,
-    color: palette.text.hint,
-    display: 'inline-flex',
-    alignItems: 'center',
-    gap: 6,
-    padding: '1em'
-  }
-}))
+  }))
diff --git a/src/fireedge/src/client/components/Tables/Groups/index.js b/src/fireedge/src/client/components/Tables/Groups/index.js
index fd2810a43e..54887ada9d 100644
--- a/src/fireedge/src/client/components/Tables/Groups/index.js
+++ b/src/fireedge/src/client/components/Tables/Groups/index.js
@@ -13,11 +13,12 @@ const GroupsTable = () => {
   const groups = useGroup()
   const { getGroups } = useGroupApi()
 
-  const { status, fetchRequest, loading, reloading } = useFetch(getGroups)
+  const { status, fetchRequest, loading, reloading, STATUS } = useFetch(getGroups)
+  const { INIT, PENDING } = STATUS
 
   useEffect(() => { fetchRequest() }, [])
 
-  if (groups?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
+  if (groups?.length === 0 && [INIT, PENDING].includes(status)) {
     return <SkeletonTable />
   }
 
diff --git a/src/fireedge/src/client/components/Tables/Hosts/index.js b/src/fireedge/src/client/components/Tables/Hosts/index.js
index 23d54ac12b..a7d7413c12 100644
--- a/src/fireedge/src/client/components/Tables/Hosts/index.js
+++ b/src/fireedge/src/client/components/Tables/Hosts/index.js
@@ -16,11 +16,12 @@ const HostsTable = () => {
   const { getHosts } = useHostApi()
   const { filterPool } = useAuth()
 
-  const { status, fetchRequest, loading, reloading } = useFetch(getHosts)
+  const { status, fetchRequest, loading, reloading, STATUS } = useFetch(getHosts)
+  const { INIT, PENDING } = STATUS
 
   useEffect(() => { fetchRequest() }, [filterPool])
 
-  if (hosts?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
+  if (hosts?.length === 0 && [INIT, PENDING].includes(status)) {
     return <SkeletonTable />
   }
 
diff --git a/src/fireedge/src/client/components/Tables/Images/index.js b/src/fireedge/src/client/components/Tables/Images/index.js
index 586fbde93a..26e533aa7e 100644
--- a/src/fireedge/src/client/components/Tables/Images/index.js
+++ b/src/fireedge/src/client/components/Tables/Images/index.js
@@ -16,11 +16,12 @@ const ImagesTable = () => {
   const { getImages } = useImageApi()
   const { filterPool } = useAuth()
 
-  const { status, fetchRequest, loading, reloading } = useFetch(getImages)
+  const { status, fetchRequest, loading, reloading, STATUS } = useFetch(getImages)
+  const { INIT, PENDING } = STATUS
 
   useEffect(() => { fetchRequest() }, [filterPool])
 
-  if (images?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
+  if (images?.length === 0 && [INIT, PENDING].includes(status)) {
     return <SkeletonTable />
   }
 
diff --git a/src/fireedge/src/client/components/Tables/MarketplaceApps/index.js b/src/fireedge/src/client/components/Tables/MarketplaceApps/index.js
index a7c27b49c6..7ab5c4fe7a 100644
--- a/src/fireedge/src/client/components/Tables/MarketplaceApps/index.js
+++ b/src/fireedge/src/client/components/Tables/MarketplaceApps/index.js
@@ -15,11 +15,12 @@ const MarketplaceAppsTable = () => {
   const { getMarketplaceApps } = useMarketplaceAppApi()
   const { filterPool } = useAuth()
 
-  const { status, fetchRequest, loading, reloading } = useFetch(getMarketplaceApps)
+  const { status, fetchRequest, loading, reloading, STATUS } = useFetch(getMarketplaceApps)
+  const { INIT, PENDING } = STATUS
 
   useEffect(() => { fetchRequest() }, [filterPool])
 
-  if (marketplaceApps?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
+  if (marketplaceApps?.length === 0 && [INIT, PENDING].includes(status)) {
     return <SkeletonTable />
   }
 
diff --git a/src/fireedge/src/client/components/Tables/Marketplaces/index.js b/src/fireedge/src/client/components/Tables/Marketplaces/index.js
index 8cd3a1f882..a49e90b28f 100644
--- a/src/fireedge/src/client/components/Tables/Marketplaces/index.js
+++ b/src/fireedge/src/client/components/Tables/Marketplaces/index.js
@@ -15,11 +15,12 @@ const MarketplacesTable = () => {
   const { getMarketplaces } = useMarketplaceApi()
   const { filterPool } = useAuth()
 
-  const { fetchRequest, loading, reloading } = useFetch(getMarketplaces)
+  const { fetchRequest, loading, reloading, STATUS } = useFetch(getMarketplaces)
+  const { INIT, PENDING } = STATUS
 
   useEffect(() => { fetchRequest() }, [filterPool])
 
-  if (marketplaces?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
+  if (marketplaces?.length === 0 && [INIT, PENDING].includes(status)) {
     return <SkeletonTable />
   }
 
diff --git a/src/fireedge/src/client/components/Tables/Users/index.js b/src/fireedge/src/client/components/Tables/Users/index.js
index c1899e52f3..3dc514072a 100644
--- a/src/fireedge/src/client/components/Tables/Users/index.js
+++ b/src/fireedge/src/client/components/Tables/Users/index.js
@@ -13,11 +13,12 @@ const UsersTable = () => {
   const users = useUser()
   const { getUsers } = useUserApi()
 
-  const { status, fetchRequest, loading, reloading } = useFetch(getUsers)
+  const { status, fetchRequest, loading, reloading, STATUS } = useFetch(getUsers)
+  const { INIT, PENDING } = STATUS
 
   useEffect(() => { fetchRequest() }, [])
 
-  if (users?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
+  if (users?.length === 0 && [INIT, PENDING].includes(status)) {
     return <SkeletonTable />
   }
 
diff --git a/src/fireedge/src/client/components/Tables/VmTemplates/index.js b/src/fireedge/src/client/components/Tables/VmTemplates/index.js
index eb57abc7a0..3649251e3d 100644
--- a/src/fireedge/src/client/components/Tables/VmTemplates/index.js
+++ b/src/fireedge/src/client/components/Tables/VmTemplates/index.js
@@ -14,11 +14,12 @@ const VmTemplatesTable = () => {
   const vmTemplates = useVmTemplate()
   const { getVmTemplates } = useVmTemplateApi()
 
-  const { status, fetchRequest, loading, reloading } = useFetch(getVmTemplates)
+  const { status, fetchRequest, loading, reloading, STATUS } = useFetch(getVmTemplates)
+  const { INIT, PENDING } = STATUS
 
   useEffect(() => { fetchRequest() }, [])
 
-  if (vmTemplates?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
+  if (vmTemplates?.length === 0 && [INIT, PENDING].includes(status)) {
     return <SkeletonTable />
   }
 
diff --git a/src/fireedge/src/client/components/Tables/Vms/index.js b/src/fireedge/src/client/components/Tables/Vms/index.js
index 2e241c66f9..297aaf9fd0 100644
--- a/src/fireedge/src/client/components/Tables/Vms/index.js
+++ b/src/fireedge/src/client/components/Tables/Vms/index.js
@@ -19,7 +19,8 @@ const VmsTable = () => {
   const { getVms } = useVmApi()
   const { filterPool } = useAuth()
 
-  const { status, data, fetchRequest, loading, reloading, error } = useFetch(getVms)
+  const { status, data, fetchRequest, loading, reloading, error, STATUS } = useFetch(getVms)
+  const { INIT, PENDING } = STATUS
 
   useEffect(() => {
     const requests = {
@@ -43,7 +44,7 @@ const VmsTable = () => {
     requests[status]?.()
   }, [filterPool, status, data])
 
-  if (vms?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
+  if (vms?.length === 0 && [INIT, PENDING].includes(status)) {
     return <SkeletonTable />
   }
 
diff --git a/src/fireedge/src/client/components/Tables/styles.js b/src/fireedge/src/client/components/Tables/styles.js
index 2f9658ab38..920a46ded2 100644
--- a/src/fireedge/src/client/components/Tables/styles.js
+++ b/src/fireedge/src/client/components/Tables/styles.js
@@ -1,7 +1,7 @@
 import { makeStyles } from '@material-ui/core'
 
 export const rowStyles = makeStyles(
-  ({ palette, typography, breakpoints }) => ({
+  ({ palette, typography, breakpoints, shadows }) => ({
     main: {
       flex: 'auto',
       overflow: 'hidden'
diff --git a/src/fireedge/src/client/hooks/useFetch.js b/src/fireedge/src/client/hooks/useFetch.js
index a50bfdd133..f6538f354a 100644
--- a/src/fireedge/src/client/hooks/useFetch.js
+++ b/src/fireedge/src/client/hooks/useFetch.js
@@ -69,9 +69,9 @@ const useFetch = (request, socket) => {
   }, [])
 
   const doFetch = useCallback(async (payload, reload = false) => {
-    !cancelRequest.current && dispatch({ type: ACTIONS.REQUEST, reload })
-
     try {
+      dispatch({ type: ACTIONS.REQUEST, reload })
+
       const response = await request(payload)
 
       if (response === undefined) throw response
@@ -85,7 +85,7 @@ const useFetch = (request, socket) => {
 
       dispatch({ type: ACTIONS.FAILURE, payload: errorMessage })
     }
-  }, [request])
+  }, [request, cancelRequest.current, dispatch])
 
   const fetchRequest = useCallback((payload, options = {}) => {
     const { reload = false, delay = 0 } = options
@@ -99,6 +99,7 @@ const useFetch = (request, socket) => {
     fakeDelay(delay).then(() => doFetch(payload, reload))
   }, [request])
 
-  return { ...state, fetchRequest }
+  return { ...state, fetchRequest, STATUS, ACTIONS, INITIAL_STATE }
 }
+
 export default useFetch
diff --git a/src/fireedge/src/client/hooks/useFetchAll.js b/src/fireedge/src/client/hooks/useFetchAll.js
index c8a0e4af2a..2c7ccfe8e9 100644
--- a/src/fireedge/src/client/hooks/useFetchAll.js
+++ b/src/fireedge/src/client/hooks/useFetchAll.js
@@ -24,11 +24,13 @@ const INITIAL_STATE = {
 
 const fetchReducer = (state, action) => {
   const { type, payload, reload = false } = action
+  const { data: currentData } = state
 
   return {
     [ACTIONS.REQUEST]: {
       ...INITIAL_STATE,
       status: STATUS.PENDING,
+      data: currentData,
       [reload ? 'reloading' : 'loading']: true
     },
     [ACTIONS.SUCCESS]: {
@@ -39,6 +41,7 @@ const fetchReducer = (state, action) => {
     [ACTIONS.FAILURE]: {
       ...INITIAL_STATE,
       status: STATUS.ERROR,
+      data: currentData,
       error: payload
     }
   }[type] ?? state
@@ -48,17 +51,15 @@ const useFetchAll = () => {
   const cancelRequest = useRef(false)
   const [state, dispatch] = useReducer(fetchReducer, INITIAL_STATE)
 
-  useEffect(() => {
-    return () => {
-      cancelRequest.current = true
-    }
+  useEffect(() => () => {
+    cancelRequest.current = true
   }, [])
 
-  const doFetches = useCallback(async (requests, reload = false) => {
-    dispatch({ type: ACTIONS.REQUEST, reload })
-
+  const doFetches = async (requests, reload = false) => {
     try {
-      const response = Promise.all(requests)
+      dispatch({ type: ACTIONS.REQUEST, reload })
+
+      const response = await Promise.all(requests)
 
       if (response === undefined) throw response
       if (cancelRequest.current) return
@@ -71,9 +72,9 @@ const useFetchAll = () => {
 
       dispatch({ type: ACTIONS.FAILURE, payload: errorMessage })
     }
-  }, [])
+  }
 
-  const fetchRequest = useCallback((requests, options = {}) => {
+  const fetchRequestAll = useCallback((requests, options = {}) => {
     const { reload = false, delay = 0 } = options
 
     if (!(Number.isInteger(delay) && delay >= 0)) {
@@ -85,6 +86,7 @@ const useFetchAll = () => {
     fakeDelay(delay).then(() => doFetches(requests, reload))
   }, [])
 
-  return { ...state, fetchRequest }
+  return { ...state, fetchRequestAll, STATUS, ACTIONS, INITIAL_STATE }
 }
+
 export default useFetchAll