diff --git a/client/src/hooks/Navigation.ts b/client/src/hooks/Navigation.ts
index 030bc859..90d9f019 100644
--- a/client/src/hooks/Navigation.ts
+++ b/client/src/hooks/Navigation.ts
@@ -76,7 +76,7 @@ export const useNavigationHook = (
         const navInfo: NavInfo = {
           navTitle: navTrans('user'),
           backPath: '',
-          showDatabaseSelector: false,
+          showDatabaseSelector: true,
         };
         setNavInfo(navInfo);
         break;
diff --git a/client/src/pages/user/Roles.tsx b/client/src/pages/user/Roles.tsx
index ce60a032..4b9a0975 100644
--- a/client/src/pages/user/Roles.tsx
+++ b/client/src/pages/user/Roles.tsx
@@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from 'react';
 import { makeStyles, Theme, Chip } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import { UserHttp } from '@/http';
-import { rootContext } from '@/context';
+import { rootContext, dataContext } from '@/context';
 import { useNavigationHook } from '@/hooks';
 import AttuGrid from '@/components/grid/Grid';
 import { ColDefinitionsType, ToolBarConfig } from '@/components/grid/Types';
@@ -23,6 +23,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 const Roles = () => {
   useNavigationHook(ALL_ROUTER_TYPES.USER);
   const classes = useStyles();
+  const { database } = useContext(dataContext);
 
   const [roles, setRoles] = useState<RoleData[]>([]);
   const [selectedRole, setSelectedRole] = useState<RoleData[]>([]);
@@ -186,7 +187,7 @@ const Roles = () => {
 
   useEffect(() => {
     fetchRoles();
-  }, []);
+  }, [database]);
 
   return (
     <div className={classes.wrapper}>