diff --git a/jest.setup.js b/jest.setup.js
index a847f56..f23b841 100644
--- a/jest.setup.js
+++ b/jest.setup.js
@@ -6,6 +6,9 @@ jest.mock('next/router', () => jest.requireActual('next-router-mock'))
 beforeAll(() => {
     server.listen()
 })
+beforeEach(() => {
+    localStorage.clear();
+})
 
 afterEach(() => {
     server.resetHandlers()
diff --git a/mocks/AppWithProvider.jsx b/mocks/AppWithProvider.jsx
new file mode 100644
index 0000000..46096f2
--- /dev/null
+++ b/mocks/AppWithProvider.jsx
@@ -0,0 +1,13 @@
+import App from "@/pages/_app";
+import fa from "&/locales/fa/app.json"
+
+const translations = {fa};
+const MockAppWithProviders = ({Component, locale, title, isBot}) => {
+    const pageProps = {
+        title: title || '', isBot: isBot || true, locale: locale || 'fa', messages: translations[locale || 'fa']
+    }
+
+    return (<App Component={Component} pageProps={pageProps}/>)
+}
+
+export default MockAppWithProviders
\ No newline at end of file
diff --git a/mocks/handler.js b/mocks/handler.js
index 5eff8ae..49e0f99 100644
--- a/mocks/handler.js
+++ b/mocks/handler.js
@@ -1 +1,8 @@
-export const handler = []
\ No newline at end of file
+import {GET_USER_ROUTE} from "@/core/data/apiRoutes";
+import {rest} from "msw";
+
+export const handler = [rest.get(GET_USER_ROUTE, (req, res, ctx) => {
+    return res(ctx.json({
+        id: 10
+    }))
+})]
\ No newline at end of file
diff --git a/src/components/first/__tests__/index.test.js b/src/components/first/__tests__/index.test.js
new file mode 100644
index 0000000..987b7c5
--- /dev/null
+++ b/src/components/first/__tests__/index.test.js
@@ -0,0 +1,44 @@
+import {render, screen} from "@testing-library/react";
+import MockAppWithProviders from "../../../../mocks/AppWithProvider";
+import FirstComponent from "@/components/first";
+import {server} from "../../../../mocks/server";
+import {rest} from "msw";
+import {GET_USER_ROUTE} from "@/core/data/apiRoutes";
+
+describe('First page component', () => {
+    describe('Rendering', () => {
+        it('Should see app name text', () => {
+            render(<MockAppWithProviders Component={FirstComponent}/>)
+            const appNameElement = screen.getByTestId('app-name')
+            expect(appNameElement).toHaveTextContent('سامانه CRM')
+        });
+    });
+    describe('behavior', () => {
+        it('Should see login button when is not auth', async () => {
+            render(<MockAppWithProviders Component={FirstComponent}/>)
+            const buttonLoginOrDashboard = await screen.findByTestId('button-login-or-dashboard')
+            expect(buttonLoginOrDashboard).toHaveTextContent('ورود کارشناس')
+            expect(buttonLoginOrDashboard).not.toHaveTextContent('داشبورد')
+        });
+        it('Should see dashboard button when is auth', async () => {
+            localStorage.setItem("_token", 'token');
+            render(<MockAppWithProviders Component={FirstComponent}/>)
+            const buttonLoginOrDashboard = await screen.findByTestId('button-login-or-dashboard')
+            expect(buttonLoginOrDashboard).not.toHaveTextContent('ورود کارشناس')
+            expect(buttonLoginOrDashboard).toHaveTextContent('داشبورد')
+        });
+        it('Should see login button when token expire', async () => {
+            localStorage.setItem("_token", 'token');
+            server.use([
+                rest.get(GET_USER_ROUTE, (req, res, ctx) => {
+                    return res(ctx.status(403))
+                })
+            ])
+            render(<MockAppWithProviders Component={FirstComponent}/>)
+            const buttonLoginOrDashboard = await screen.findByTestId('button-login-or-dashboard')
+            expect(buttonLoginOrDashboard).toHaveTextContent('ورود کارشناس')
+            expect(buttonLoginOrDashboard).not.toHaveTextContent('داشبورد')
+        });
+
+    });
+});
\ No newline at end of file
diff --git a/src/components/first/index.jsx b/src/components/first/index.jsx
index fade07c..786f25f 100644
--- a/src/components/first/index.jsx
+++ b/src/components/first/index.jsx
@@ -14,31 +14,19 @@ const FirstComponent = () => {
         <FullPageLayout sx={{p: 1}}>
             <CenterLayout spacing={3}>
                 <SvgDashboard width={300} height={200}/>
-                <Typography variant="h5" sx={{textAlign: "center"}}>
+                <Typography variant="h5" data-testid="app-name" sx={{textAlign: "center"}}>
                     {t("app_name")}
                 </Typography>
-                {isAuth ? (
-                    <Button
-                        variant="outlined"
-                        component={NextLinkComposed}
-                        to={{
-                            pathname: "/dashboard",
-                        }}
-                    >
-                        {t("dashboard")}
-                    </Button>
-                ) : (
-                    <Button
-                        sx={{mx: 2}}
-                        variant="contained"
-                        component={NextLinkComposed}
-                        to={{
-                            pathname: "/login-expert",
-                        }}
-                    >
-                        {t("login_expert")}
-                    </Button>
-                )}
+                <Button
+                    data-testid="button-login-or-dashboard"
+                    variant={isAuth ? "outlined" : "contained"}
+                    component={NextLinkComposed}
+                    to={{
+                        pathname: isAuth ? "/dashboard" : "/login-expert",
+                    }}
+                >
+                    {isAuth ? t("dashboard") : t("login_expert")}
+                </Button>
             </CenterLayout>
             <Stack direction="row" alignItems="center" justifyContent="center">
                 <Typography variant={"caption"}
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 29ec464..e76fbcb 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -10,24 +10,22 @@ import TitlePage from "@/core/components/TitlePage";
 
 const App = ({Component, pageProps}) => {
 
-    return (
-        <>
-            <UserProvider>
-                <LanguageProvider>
-                    <NextIntlProvider messages={pageProps.messages || {}}>
-                        <MuiLayout isBot={pageProps.isBot}>
-                            {pageProps.messages ? <TitlePage text={pageProps.title}/> : ''}
-                            <LoadingProvider>
-                                <AppLayout isBot={pageProps.isBot}>
-                                    <Component {...pageProps} />
-                                </AppLayout>
-                            </LoadingProvider>
-                        </MuiLayout>
-                    </NextIntlProvider>
-                </LanguageProvider>
-            </UserProvider>
-        </>
-    );
+    return (<>
+        <UserProvider>
+            <LanguageProvider>
+                <NextIntlProvider locale={pageProps.locale} messages={pageProps.messages || {}}>
+                    <MuiLayout isBot={pageProps.isBot}>
+                        {pageProps.messages ? <TitlePage text={pageProps.title}/> : ''}
+                        <LoadingProvider>
+                            <AppLayout isBot={pageProps.isBot}>
+                                <Component {...pageProps} />
+                            </AppLayout>
+                        </LoadingProvider>
+                    </MuiLayout>
+                </NextIntlProvider>
+            </LanguageProvider>
+        </UserProvider>
+    </>)
 };
 
 export default App;