diff --git a/example.env.local b/example.env.local
index 2b26da5..c6b8c67 100644
--- a/example.env.local
+++ b/example.env.local
@@ -2,6 +2,18 @@ NEXT_PUBLIC_API_NAME = "Loan Facilities Dashboard"
 NEXT_PUBLIC_DEFAULT_LANGUAGE = "fa"
 NEXT_PUBLIC_DEFAULT_DIRECTION = "rtl"
 
+
+NEXT_PUBLIC_PRIMARY_MAIN = "#084070"
+NEXT_PUBLIC_PRIMARY_CONTRAST_TEXT = "#fff"
+NEXT_PUBLIC_PRIMARY_LIGHT = "#2c6291"
+NEXT_PUBLIC_PRIMARY_DARK = "#11293e"
+
+
+NEXT_PUBLIC_SECONDARY_MAIN = "#FF4E00"
+NEXT_PUBLIC_SECONDARY_CONTRAST_TEXT = "#fff"
+NEXT_PUBLIC_SECONDARY_LIGHT = "#ed743e"
+NEXT_PUBLIC_SECONDARY_DARK = "#ad3a07"
+
 NEXT_PUBLIC_API_URL = "http://Your IP:3000"
 
 NEXT_PUBLIC_BASE_URL = "deploy api"
diff --git a/next.config.js b/next.config.js
index 409876a..a288e34 100644
--- a/next.config.js
+++ b/next.config.js
@@ -6,7 +6,7 @@ const nextConfig = {
         defaultLocale: 'fa',
         locales: ['fa'],
         localeDetection: false,
-    },
+    }
 }
 
 module.exports = nextConfig
diff --git a/public/icons/favicon.png b/public/icons/favicon.png
new file mode 100644
index 0000000..c82bf9a
Binary files /dev/null and b/public/icons/favicon.png differ
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..6bc19ce
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,57 @@
+{
+  "short_name": "Loan Facilities Dashboard",
+  "name": "Loan Facilities Expert Dashboard",
+  "description": "Loan Facilities",
+  "version": "1.0.0",
+  "version_name": "1.0.0 beta",
+  "start_url": "/dashboard",
+  "orientation": "portrait",
+  "display": "standalone",
+  "theme_color": "#084070",
+  "background_color": "#084070",
+  "icons": [
+    {
+      "src": "/icons/maskable_icon.png",
+      "sizes": "any",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/maskable_icon_x48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/maskable_icon_x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/maskable_icon_x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/maskable_icon_x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/maskable_icon_x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/maskable_icon_x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/maskable_icon_x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "categories": [
+    "government"
+  ]
+}
diff --git a/src/components/dashboard/change-password/index.jsx b/src/components/dashboard/change-password/index.jsx
index 4583549..477ec00 100644
--- a/src/components/dashboard/change-password/index.jsx
+++ b/src/components/dashboard/change-password/index.jsx
@@ -96,7 +96,7 @@ const DashboardChangePasswordComponent = () => {
                                         <Box
                                             sx={{position: "relative", width: "100%", height: 200}}
                                         >
-                                            <Image fill src="/images/change-password.svg" alt=""/>
+                                            <Image fill src="/images/change-password.svg" alt="" priority/>
                                         </Box>
                                         <Typography margin={2} variant="h4" textAlign="center">
                                             {t("ChangePassword.typography_change_password")}
diff --git a/src/components/login-expert/index.jsx b/src/components/login-expert/index.jsx
index 293f9f9..30c84e6 100644
--- a/src/components/login-expert/index.jsx
+++ b/src/components/login-expert/index.jsx
@@ -64,7 +64,7 @@ const LoginComponent = () => {
                                     <Box
                                         sx={{position: "relative", width: "100%", height: 200}}
                                     >
-                                        <Image fill src="/images/login.svg" alt={t("app_name")}/>
+                                        <Image fill src="/images/login.svg" alt={t("app_name")} priority/>
                                     </Box>
                                     <Typography margin={2} variant="h4" textAlign="center">
                                         {t("login_expert")}
diff --git a/src/core/utils/theme.jsx b/src/core/utils/theme.jsx
index 1679552..0ded0d2 100644
--- a/src/core/utils/theme.jsx
+++ b/src/core/utils/theme.jsx
@@ -3,16 +3,16 @@ import {faIR} from "@mui/x-date-pickers/locales";
 const theme = {
     palette: {
         primary: {
-            main: "#084070",
-            contrastText: "#fff",
-            light: "#2c6291",
-            dark: "#11293e",
+            main: process.env.NEXT_PUBLIC_PRIMARY_MAIN,
+            contrastText: process.env.NEXT_PUBLIC_PRIMARY_CONTRAST_TEXT,
+            light: process.env.NEXT_PUBLIC_PRIMARY_LIGHT,
+            dark: process.env.NEXT_PUBLIC_PRIMARY_DARK,
         },
         secondary: {
-            main: "#FF4E00",
-            contrastText: "#fff",
-            light: "#ed743e",
-            dark: "#ad3a07",
+            main: process.env.NEXT_PUBLIC_SECONDARY_MAIN,
+            contrastText: process.env.NEXT_PUBLIC_SECENDARY_CONTRAST_TEXT,
+            light: process.env.NEXT_PUBLIC_SECENDARY_LIGHT,
+            dark: process.env.NEXT_PUBLIC_SECENDARY_DARK,
         },
     },
     faIR,
diff --git a/src/layouts/AppLayout.jsx b/src/layouts/AppLayout.jsx
index d0f26d7..c86d1f2 100644
--- a/src/layouts/AppLayout.jsx
+++ b/src/layouts/AppLayout.jsx
@@ -83,13 +83,13 @@ function AppLayout({children, isBot}) {
                     rel="icon"
                     type="image/svg"
                     sizes="32x32"
-                    href="/images/logo.png"
+                    href="/icons/favicon.png"
                 />
                 <link
                     rel="icon"
                     type="image/svg"
                     sizes="16x16"
-                    href="/images/logo.png"
+                    href="/icons/favicon.png"
                 />
             </Head>
             <NextNProgress
diff --git a/src/layouts/dashboardLayouts/sidebar/SidebarDrawer.jsx b/src/layouts/dashboardLayouts/sidebar/SidebarDrawer.jsx
index fecc252..f155dce 100644
--- a/src/layouts/dashboardLayouts/sidebar/SidebarDrawer.jsx
+++ b/src/layouts/dashboardLayouts/sidebar/SidebarDrawer.jsx
@@ -1,8 +1,10 @@
 import {Divider, Stack, Toolbar, Typography} from "@mui/material";
 import {useTranslations} from "next-intl";
 import SidebarList from "./SidebarList";
+import useUser from "@/lib/app/hooks/useUser";
 
 const SidebarDrawer = ({handleDrawerToggle}) => {
+    const {user} = useUser()
     const t = useTranslations();
     return (
         <>
@@ -12,10 +14,7 @@ const SidebarDrawer = ({handleDrawerToggle}) => {
                         {t("app_short_name")}
                     </Typography>
                     <Typography variant="caption">
-                        {
-                            t("expert") /* make if on thease t("user_welfare_services")
-              t("user_navy") */
-                        }
+                        {user.name} | {user.position}
                     </Typography>
                 </Stack>
             </Toolbar>
diff --git a/src/layouts/dashboardLayouts/sidebar/SidebarListItem.jsx b/src/layouts/dashboardLayouts/sidebar/SidebarListItem.jsx
index f14ae1d..616ecb5 100644
--- a/src/layouts/dashboardLayouts/sidebar/SidebarListItem.jsx
+++ b/src/layouts/dashboardLayouts/sidebar/SidebarListItem.jsx
@@ -1,7 +1,7 @@
 import {NextLinkComposed} from "@/core/components/LinkRouting";
 import ExpandLess from "@mui/icons-material/ExpandLess";
 import ExpandMore from "@mui/icons-material/ExpandMore";
-import {Badge, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography,} from "@mui/material";
+import {Badge, IconButton, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography,} from "@mui/material";
 import {useTranslations} from "next-intl";
 import {Fragment} from "react";
 import SidebarListSubItem from "./SidebarListSubItem";
@@ -11,7 +11,19 @@ const SidebarListItem = ({item, dispatch, handleDrawerToggle}) => {
 
     return (
         <Fragment key={item.key}>
-            <ListItem disablePadding sx={{display: "block"}}>
+            <ListItem disablePadding secondaryAction={
+                <IconButton>
+                    <Badge
+                        badgeContent="56"
+                        color="error"
+                        variant="standard"
+                        anchorOrigin={{
+                            vertical: "top",
+                            horizontal: "right",
+                        }}
+                    />
+                </IconButton>
+            }>
                 <ListItemButton
                     selected={item.selected}
                     {...(item.type == "page" && {
@@ -29,6 +41,7 @@ const SidebarListItem = ({item, dispatch, handleDrawerToggle}) => {
                     sx={{
                         minHeight: 48,
                     }}
+
                 >
                     <ListItemIcon
                         sx={{
@@ -51,17 +64,9 @@ const SidebarListItem = ({item, dispatch, handleDrawerToggle}) => {
                         }
                     />
 
+
                     {item.type == "menu" &&
                         (item.showSubItem ? <ExpandLess/> : <ExpandMore/>)}
-                    <Badge
-                        badgeContent="21"
-                        color="error"
-                        variant="standard"
-                        anchorOrigin={{
-                            vertical: "top",
-                            horizontal: "right",
-                        }}
-                    />
                 </ListItemButton>
             </ListItem>
             {item.subItem && (
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 20615ba..29ec464 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -9,13 +9,14 @@ import {NextIntlProvider} from "next-intl";
 import TitlePage from "@/core/components/TitlePage";
 
 const App = ({Component, pageProps}) => {
+
     return (
         <>
             <UserProvider>
                 <LanguageProvider>
                     <NextIntlProvider messages={pageProps.messages || {}}>
                         <MuiLayout isBot={pageProps.isBot}>
-                            {pageProps.message ? <TitlePage text={pageProps.title}/> : ''}
+                            {pageProps.messages ? <TitlePage text={pageProps.title}/> : ''}
                             <LoadingProvider>
                                 <AppLayout isBot={pageProps.isBot}>
                                     <Component {...pageProps} />
diff --git a/src/pages/_document.jsx b/src/pages/_document.jsx
index c9c28bb..474e29b 100644
--- a/src/pages/_document.jsx
+++ b/src/pages/_document.jsx
@@ -11,7 +11,7 @@ export default function MyDocument(props) {
             <Head>
                 <meta name="theme-color" content={theme.palette.primary.main}/>
                 <meta name="emotion-insertion-point" content=""/>
-                <link rel="shortcut icon" href="/icons/favicon.ico"/>
+                <link rel="shortcut icon" href="/icons/favicon.png"/>
                 <link rel="manifest" href="/manifest.json"/>
                 {emotionStyleTags}
             </Head>