diff --git a/src/components/dashboard/navgan/add-request-loan/forms/AddForm.jsx b/src/components/dashboard/navgan/add-request-loan/forms/AddForm.jsx
index df79a4c..88d33c0 100644
--- a/src/components/dashboard/navgan/add-request-loan/forms/AddForm.jsx
+++ b/src/components/dashboard/navgan/add-request-loan/forms/AddForm.jsx
@@ -1,10 +1,7 @@
-import Notifications from "@/core/components/notifications";
 import SelectBox from "@/core/components/SelectBox";
 import StyledForm from "@/core/components/StyledForm";
 import UploadSystem from "@/core/components/UploadSystem";
 import {GET_PROVINCE_LIST, SEND_LOAN_REQUEST_NAVGAN,} from "@/core/data/apiRoutes";
-import useDirection from "@/lib/app/hooks/useDirection";
-import useUser from "@/lib/app/hooks/useUser";
 import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
 import {Box, Button, Stack, TextField} from "@mui/material";
 import axios from "axios";
@@ -12,6 +9,7 @@ import {Field, Formik} from "formik";
 import {useTranslations} from "next-intl";
 import {useEffect, useState} from "react";
 import * as Yup from "yup";
+import {useDirection, useUser} from "@witel/webapp-builder";
 
 const AddFormComponent = () => {
     const t = useTranslations();
@@ -34,7 +32,6 @@ const AddFormComponent = () => {
                 setProvinceList(formattedData);
             })
             .catch((error) => {
-                Notifications(t, error.response);
             });
     }, []);
     // end get province list
@@ -115,7 +112,6 @@ const AddFormComponent = () => {
 
     // submit
     const handleSubmit = async (values, props) => {
-        Notifications(t, undefined);
         const formData = new FormData();
         formData.append("name", values.name);
         formData.append("phone_number", values.phone_number);
@@ -138,10 +134,8 @@ const AddFormComponent = () => {
                 },
             })
             .then(function (response) {
-                Notifications(t, response);
             })
             .catch(function (error) {
-                Notifications(t, error.response);
                 props.setSubmitting(false);
             });
     };
@@ -181,15 +175,23 @@ const AddFormComponent = () => {
                                 <Field
                                     as={TextField}
                                     sx={{width: "100%"}}
-                                    name="name"
+                                    name="national_code"
                                     variant="outlined"
                                     size="small"
-                                    label={t("LoanRequest.text_field_name")}
-                                    placeholder={t("LoanRequest.text_field_enter_your_name")}
+                                    label={t("LoanRequest.text_field_national_code")}
+                                    placeholder={t(
+                                        "LoanRequest.text_field_enter_your_national_code"
+                                    )}
                                     type={"text"}
-                                    error={props.touched.name && props.errors.name ? true : false}
+                                    error={
+                                        !!(props.touched.national_code && props.errors.national_code)
+                                    }
                                     fullWidth
-                                    helperText={props.touched.name ? props.errors.name : null}
+                                    helperText={
+                                        props.touched.national_code
+                                            ? props.errors.national_code
+                                            : null
+                                    }
                                 />
                             </Box>
                             <Box
@@ -357,37 +359,6 @@ const AddFormComponent = () => {
                                     }
                                 />
                             </Box>
-                            <Box
-                                sx={{
-                                    mx: {xs: 0, sm: 2},
-                                    my: 2,
-                                    width: "100%",
-                                }}
-                            >
-                                <Field
-                                    as={TextField}
-                                    sx={{width: "100%"}}
-                                    name="national_code"
-                                    variant="outlined"
-                                    size="small"
-                                    label={t("LoanRequest.text_field_national_code")}
-                                    placeholder={t(
-                                        "LoanRequest.text_field_enter_your_national_code"
-                                    )}
-                                    type={"text"}
-                                    error={
-                                        props.touched.national_code && props.errors.national_code
-                                            ? true
-                                            : false
-                                    }
-                                    fullWidth
-                                    helperText={
-                                        props.touched.national_code
-                                            ? props.errors.national_code
-                                            : null
-                                    }
-                                />
-                            </Box>
                             <Box
                                 sx={{
                                     mx: {xs: 0, sm: 2},
@@ -420,44 +391,6 @@ const AddFormComponent = () => {
                                 />
                             </Box>
                         </Box>
-                        <Box
-                            sx={{
-                                display: "flex",
-                                flexDirection: {xs: "column", sm: "row"},
-                                alignItems: "center",
-                                justifyContent: "space-around",
-                                width: "100%",
-                            }}
-                        >
-                            <UploadSystem
-                                selectedImage={selectedImageShenasname}
-                                handleUploadChange={(e) =>
-                                    handleUploadChangeShenasname(e, props.setFieldValue)
-                                }
-                                setselectedImage={setSelectedImageShenasname}
-                                setFieldValue={props.setFieldValue}
-                                fieldname="shenasname_img"
-                                fileType={fileTypeShenasname}
-                                fileName={fileNameShenasname}
-                                imageAlt={t("app_name")}
-                                imageSize={[300 /*width*/, 150 /*height*/]}
-                                label={t("LoanRequest.file_field_shenasname_image")}
-                            />
-                            <UploadSystem
-                                selectedImage={selectedImageNationalCard}
-                                handleUploadChange={(e) =>
-                                    handleUploadChangeNationalCard(e, props.setFieldValue)
-                                }
-                                setselectedImage={setSelectedImageNationalCard}
-                                setFieldValue={props.setFieldValue}
-                                fieldname="national_card_img"
-                                fileType={fileTypeNationalCard}
-                                fileName={fileNameNationalCard}
-                                imageAlt={t("app_name")}
-                                imageSize={[300 /*width*/, 150 /*height*/]}
-                                label={t("LoanRequest.file_field_national_card_image")}
-                            />
-                        </Box>
                         <Box
                             sx={{
                                 display: "flex",
diff --git a/src/components/dashboard/navgan/add-request-loan/index.jsx b/src/components/dashboard/navgan/add-request-loan/index.jsx
index cd9d359..d8668ed 100644
--- a/src/components/dashboard/navgan/add-request-loan/index.jsx
+++ b/src/components/dashboard/navgan/add-request-loan/index.jsx
@@ -1,18 +1,15 @@
-import CenterLayout from "@/layouts/CenterLayout";
-import DashboardLayouts from "@/layouts/dashboardLayouts";
-import useUser from "@/lib/app/hooks/useUser";
 import {Box, Chip, Divider} from "@mui/material";
 import {useTranslations} from "next-intl";
 import AddFormComponent from "@/components/dashboard/navgan/add-request-loan/forms/AddForm";
+import {CenterLayout, useUser} from "@witel/webapp-builder";
 
 const LoanRequestComponent = () => {
     const t = useTranslations();
     const {user} = useUser();
 
     return (
-        <DashboardLayouts>
-            <CenterLayout>
-                <Box sx={{width: "80%", my: 2}}>
+            <>
+                <Box>
                     <Divider>
                         <Chip
                             label={`${t("LoanRequest.loan_request_page")} | ${
@@ -22,8 +19,7 @@ const LoanRequestComponent = () => {
                     </Divider>
                 </Box>
                 <AddFormComponent/>
-            </CenterLayout>
-        </DashboardLayouts>
+            </>
     );
 };
 
diff --git a/src/components/login/SendToken.jsx b/src/components/login/SendToken.jsx
index 2a2f287..044ede9 100644
--- a/src/components/login/SendToken.jsx
+++ b/src/components/login/SendToken.jsx
@@ -1,9 +1,6 @@
 import ResendToken from "@/core/components/ResendToken";
 import StyledForm from "@/core/components/StyledForm";
 import {LOGIN} from "@/core/data/apiRoutes";
-import CenterLayout from "@/layouts/CenterLayout";
-import FullPageLayout from "@/layouts/FullPageLayout";
-import useUser from "@/lib/app/hooks/useUser";
 import ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
 import LoginIcon from "@mui/icons-material/Login";
 import {Box, Button, Container, Grid, Paper, Stack, TextField, Typography,} from "@mui/material";
@@ -11,8 +8,8 @@ import {Field, Formik} from "formik";
 import {useTranslations} from "next-intl";
 import * as Yup from "yup";
 import SvgLogin from "@/core/components/svgs/SvgLogin";
-import useRequest from "@/lib/app/hooks/useRequest";
 import AutoSubmit from "@/core/components/AutoSubmit";
+import {CenterLayout, FullPageLayout, useRequest, useUser} from "@witel/webapp-builder";
 
 const SendTokenComponent = ({
                                 PhoneNumber,
diff --git a/src/components/login/SendUserData.jsx b/src/components/login/SendUserData.jsx
index 6743799..a4c598a 100644
--- a/src/components/login/SendUserData.jsx
+++ b/src/components/login/SendUserData.jsx
@@ -1,8 +1,5 @@
-import LinkRouting from "@/core/components/LinkRouting";
 import StyledForm from "@/core/components/StyledForm";
 import {SEND_OTP_TOKEN} from "@/core/data/apiRoutes";
-import CenterLayout from "@/layouts/CenterLayout";
-import FullPageLayout from "@/layouts/FullPageLayout";
 import FingerprintIcon from "@mui/icons-material/Fingerprint";
 import PersonAddIcon from "@mui/icons-material/PersonAdd";
 import {Button, Container, Grid, Paper, Stack, TextField, Typography,} from "@mui/material";
@@ -11,7 +8,7 @@ import {useTranslations} from "next-intl";
 import {useSearchParams} from "next/navigation";
 import * as Yup from "yup";
 import SvgLogin from "@/core/components/svgs/SvgLogin";
-import useRequest from "@/lib/app/hooks/useRequest";
+import {CenterLayout, FullPageLayout, LinkRouting, useRequest} from "@witel/webapp-builder";
 
 const SendUserDataComponent = ({
                                    setOtpToken,
diff --git a/src/components/register/RequestOtp.jsx b/src/components/register/RequestOtp.jsx
index a24aa4f..4729226 100644
--- a/src/components/register/RequestOtp.jsx
+++ b/src/components/register/RequestOtp.jsx
@@ -1,8 +1,5 @@
-import LinkRouting from "@/core/components/LinkRouting";
 import StyledForm from "@/core/components/StyledForm";
 import {SEND_OTP_TOKEN} from "@/core/data/apiRoutes";
-import CenterLayout from "@/layouts/CenterLayout";
-import FullPageLayout from "@/layouts/FullPageLayout";
 import FingerprintIcon from "@mui/icons-material/Fingerprint";
 import {Button, Container, Paper, Stack, TextField, Typography,} from "@mui/material";
 import {Field, Formik} from "formik";
@@ -10,7 +7,7 @@ import {useTranslations} from "next-intl";
 import {useSearchParams} from "next/navigation";
 import * as Yup from "yup";
 import SvgLogin from "@/core/components/svgs/SvgLogin";
-import useRequest from "@/lib/app/hooks/useRequest";
+import {CenterLayout, FullPageLayout, LinkRouting, useRequest} from "@witel/webapp-builder";
 
 const RequestOtpComponent = ({
                                  setOtpToken,
diff --git a/src/components/register/index.jsx b/src/components/register/index.jsx
index eb11ad0..9036878 100644
--- a/src/components/register/index.jsx
+++ b/src/components/register/index.jsx
@@ -1,11 +1,8 @@
-import LinkRouting, {NextLinkComposed} from "@/core/components/LinkRouting";
-import CenterLayout from "@/layouts/CenterLayout";
-import FullPageLayout from "@/layouts/FullPageLayout";
-import useUser from "@/lib/app/hooks/useUser";
 import {Box, Button, Grid, Stack} from "@mui/material";
 import {useTranslations} from "next-intl";
 import {useSearchParams} from "next/navigation";
 import SvgDashboard from "@/core/components/svgs/SvgDashboard";
+import {CenterLayout, FullPageLayout, LinkRouting, NextLinkComposed, useUser} from "@witel/webapp-builder";
 
 const RegisterComponent = () => {
     const t = useTranslations();
diff --git a/src/components/register/navy/UserRegister.jsx b/src/components/register/navy/UserRegister.jsx
index 9714636..81a3f45 100644
--- a/src/components/register/navy/UserRegister.jsx
+++ b/src/components/register/navy/UserRegister.jsx
@@ -1,7 +1,5 @@
 import StyledForm from "@/core/components/StyledForm";
 import {REGISTER} from "@/core/data/apiRoutes";
-import CenterLayout from "@/layouts/CenterLayout";
-import FullPageLayout from "@/layouts/FullPageLayout";
 import LoginIcon from "@mui/icons-material/Login";
 import ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
 import {Box, Button, Chip, Container, Divider, Paper, Stack, TextField, Typography,} from "@mui/material";
@@ -9,10 +7,9 @@ import {Field, Formik} from "formik";
 import {useTranslations} from "next-intl";
 import * as Yup from "yup";
 import ResendToken from "@/core/components/ResendToken";
-import useUser from "@/lib/app/hooks/useUser";
 import SvgRegister from "@/core/components/svgs/SvgRegister";
-import useRequest from "@/lib/app/hooks/useRequest";
 import AutoSubmit from "@/core/components/AutoSubmit";
+import {CenterLayout, FullPageLayout, useRequest, useUser} from "@witel/webapp-builder";
 
 const UserRegisterComponent = ({
                                    PhoneNumber,
diff --git a/src/core/components/ResendToken.jsx b/src/core/components/ResendToken.jsx
index 906581c..d564397 100644
--- a/src/core/components/ResendToken.jsx
+++ b/src/core/components/ResendToken.jsx
@@ -1,11 +1,8 @@
-import Notifications from "@/core/components/notifications";
-import useDirection from "@/lib/app/hooks/useDirection";
 import {Button} from "@mui/material";
-import axios from "axios";
 import {useTranslations} from "next-intl";
 import {useEffect} from "react";
-import {LOGIN, SEND_OTP_TOKEN} from "../data/apiRoutes";
-import useRequest from "@/lib/app/hooks/useRequest";
+import {SEND_OTP_TOKEN} from "../data/apiRoutes";
+import {useDirection, useRequest} from "@witel/webapp-builder";
 
 const ResendToken = ({initialTimerValue, timer, setTimer, PhoneNumber, disabled}) => {
     const t = useTranslations();
diff --git a/src/pages/register/navy/index.jsx b/src/pages/register/navy/index.jsx
index 2272d57..8c0f278 100644
--- a/src/pages/register/navy/index.jsx
+++ b/src/pages/register/navy/index.jsx
@@ -1,6 +1,6 @@
 import NavyComponent from "@/components/register/navy";
-import WithoutAuthMiddleware from "@/middlewares/WithoutAuth";
 import {parse} from "next-useragent";
+import {WithoutAuthMiddleware} from "@witel/webapp-builder";
 
 export default function Register() {
     return (