diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json
index 228b3c2..d5fa8b9 100644
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -19,6 +19,7 @@
   "online_message": "شما به اینترنت وصل هستید",
   "offline_message": "اتصال شما به اینترنت قطع شده است",
   "routing_to": "در حال انتقال به صفحه",
+  "error_message_plate_number": "لطفا شماره پلاک خود را وارد کنید!",
   "header": {
     "open_profile": "پروفایل",
     "edit_profile": "ویرایش پروفایل",
@@ -137,7 +138,6 @@
     "error_message_name": "لطفا نام خود را وارد کنید!",
     "error_message_tel_number": "لطفا شماره ثابت (با پیش شماره استان) خود را وارد کنید!",
     "error_message_vehicle_type": "لطفا نوع وسیله نقلیه خود را وارد کنید!",
-    "error_message_plate_number": "لطفا شماره پلاک خود را وارد کنید!",
     "error_message_navgan_id": "لطفا کد هوشمند خود را وارد کنید!",
     "error_message_province_id": "لطفا استان خود را وارد کنید!",
     "error_message_national_id": "لطفا کد ملی خود را وارد کنید!",
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 f5417f7..6567b42 100644
--- a/src/components/dashboard/navgan/add-request-loan/forms/AddForm.jsx
+++ b/src/components/dashboard/navgan/add-request-loan/forms/AddForm.jsx
@@ -1,7 +1,7 @@
 import SelectBox from "@/core/components/SelectBox";
 import {SEND_LOAN_REQUEST_NAVGAN} from "@/core/data/apiRoutes";
 import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
-import {Box, Button, FormControl, Grid, Stack, TextField} from "@mui/material";
+import {Box, Button, Grid, TextField} from "@mui/material";
 import {useFormik} from "formik";
 import {useTranslations} from "next-intl";
 import * as Yup from "yup";
@@ -14,8 +14,8 @@ const AddFormComponent = () => {
     const t = useTranslations();
     const {token} = useUser();
     const requestServer = useRequest()
-    const{provinceList, isLoadingProvinceList, errorProvinceList} = useProvince()
-    const{cityTextField, cityList, setProvinceID}=useCities()
+    const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince()
+    const {cityTextField, cityList, setProvinceID} = useCities()
 
     const initialValues = {
         tel_number: "",
@@ -28,10 +28,10 @@ const AddFormComponent = () => {
         shenasname_id: "",
         postal_code: "",
         navgan_type: "",
-        plate_part1 : "",
-        plate_part2 : "",
-        plate_part3 : "",
-        plate_part4 : "",
+        plate_part1: "",
+        plate_part2: "",
+        plate_part3: "",
+        plate_part4: "",
     };
 
     const validationSchema = Yup.object().shape({
@@ -44,36 +44,17 @@ const AddFormComponent = () => {
         navgan_type: Yup.string().required(
             t("LoanRequest.error_message_navgan_type")
         ),
-        postal_code : Yup.mixed()
+        postal_code: Yup.mixed()
             .test("max", `${t("LoanRequest.postal_code_max")}`, (value) => value.toString().length === 10)
             .required(
                 t("LoanRequest.error_message_postal_code")
             ),
-        plate_part1: Yup.mixed()
-            .test("max", `${t("LoanRequest.plate_part1_max")}`, (value) => value.toString().length === 2)
-            .required(
-            t("LoanRequest.error_message_plate_part1")
-        ),
-        plate_part2: Yup.mixed()
-            .required(
-            t("LoanRequest.error_message_plate_part2")
-        ),
-        plate_part3: Yup.mixed()
-            .test("max", `${t("LoanRequest.plate_part3_max")}`, (value) => value.toString().length === 2)
-            .required(
-            t("LoanRequest.error_message_plate_part3")
-        ),
-        plate_part4: Yup.mixed()
-            .test("max", `${t("LoanRequest.plate_part3_max")}`, (value) => value.toString().length === 2)
-            .required(
-            t("LoanRequest.error_message_plate_part3")
-        ),
         navgan_id: Yup.mixed().required(t("LoanRequest.error_message_navgan_id")),
         province_id: Yup.string().required(t("LoanRequest.error_message_province_id")),
         city_id: Yup.string().required(t("LoanRequest.error_message_city_id")),
         national_code: Yup.mixed()
             .test("is-number", `${t("LoanRequest.national_code_number")}`,
-            (value) => !isNaN(value))
+                (value) => !isNaN(value))
             .test("positive", `${t("LoanRequest.national_code_positive")}`, (value) => value >= 0)
             .test("max", `${t("LoanRequest.national_code_max")}`, (value) => value.toString().length === 10)
             .required(t("LoanRequest.error_message_national_id")),
@@ -96,7 +77,7 @@ const AddFormComponent = () => {
         formData.append("national_code", values.national_code);
         formData.append("shenasname_id", values.shenasname_id);
 
-        requestServer(SEND_LOAN_REQUEST_NAVGAN, "post", {auth : true, notification : true}).then().catch(() => {
+        requestServer(SEND_LOAN_REQUEST_NAVGAN, "post", {auth: true, notification: true}).then().catch(() => {
             props.setSubmitting(false)
         })
     };
@@ -106,7 +87,7 @@ const AddFormComponent = () => {
     })
     return (
         <>
-            <Grid container spacing={2} sx={{padding : 2}}
+            <Grid container spacing={2} sx={{padding: 2}}
             >
                 <Grid item xs={12} sm={6}
                 >
@@ -147,15 +128,15 @@ const AddFormComponent = () => {
                     />
                 </Grid>
             </Grid>
-            <Grid container spacing={2} sx={{padding : 2}}>
+            <Grid container spacing={2} sx={{padding: 2}}>
                 <Grid item xs={12} sm={6}>
                     <SelectBox
                         name="vehicle_type"
                         label={t("LoanRequest.text_field_vehicle_type")}
                         size="small"
                         selectType="vehicle_type"
-                        selectors={[{id : 0, value : 0, name : "اتوبوس"},
-                            {id : 1, value: 1, name : "مینی بوس"}]}
+                        selectors={[{id: 0, value: 0, name: "اتوبوس"},
+                            {id: 1, value: 1, name: "مینی بوس"}]}
                         select={formik.values.vehicle_type}
                         setFieldValue={formik.setFieldValue}
                         error={formik.touched.vehicle_type && Boolean(formik.errors.vehicle_type)}
@@ -203,9 +184,15 @@ const AddFormComponent = () => {
                         label={t("LoanRequest.text_field_navgan_type")}
                         size="small"
                         selectType="navgan_type"
-                        selectors={[{id : 1, value : 1, name : "مسافری"},{id : 2, value : 2, name : "عمومی"},{id : 3, value : 3, name : "روستایی"}]}
+                        selectors={[{id: 1, value: 1, name: "مسافری"}, {id: 2, value: 2, name: "عمومی"}, {
+                            id: 3,
+                            value: 3,
+                            name: "روستایی"
+                        }]}
                         select={formik.values.navgan_type}
-                        handleChange={(event)=> {formik.setFieldValue('navgan_type', event.target.value)}}
+                        handleChange={(event) => {
+                            formik.setFieldValue('navgan_type', event.target.value)
+                        }}
                         setFieldTouched={formik.setFieldTouched}
                         error={formik.touched.navgan_type && Boolean(formik.errors.navgan_type)}
                         helperText={formik.touched.navgan_type && formik.errors.navgan_type}
@@ -213,7 +200,7 @@ const AddFormComponent = () => {
                     />
                 </Grid>
             </Grid>
-            <Grid container spacing={2} sx={{padding : 2}}>
+            <Grid container spacing={2} sx={{padding: 2}}>
                 <Grid item xs={12} sm={6}>
                     <SelectBox
                         name="province_id"
@@ -224,7 +211,9 @@ const AddFormComponent = () => {
                         errorEcured={errorProvinceList}
                         selectors={provinceList}
                         select={formik.values.province_id}
-                        handleChange={(event)=> {formik.setFieldValue('province_id', event.target.value); setProvinceID(event.target.value)
+                        handleChange={(event) => {
+                            formik.setFieldValue('province_id', event.target.value);
+                            setProvinceID(event.target.value)
                             formik.setFieldTouched("city_id", false, false);
                             formik.setFieldValue("city_id", "")
                         }}
@@ -243,7 +232,7 @@ const AddFormComponent = () => {
                         disabled={cityList.length === 0}
                         selectors={cityList}
                         select={formik.values.city_id}
-                        handleChange={(event)=>formik.setFieldValue('city_id', event.target.value)}
+                        handleChange={(event) => formik.setFieldValue('city_id', event.target.value)}
                         setFieldTouched={formik.setFieldTouched}
                         error={formik.touched.city_id && Boolean(formik.errors.city_id)}
                         helperText={formik.touched.city_id && formik.errors.city_id}
@@ -251,7 +240,7 @@ const AddFormComponent = () => {
                     />
                 </Grid>
             </Grid>
-            <Grid container spacing={2} sx={{padding : 2}}>
+            <Grid container spacing={2} sx={{padding: 2}}>
                 <Grid item xs={12} sm={6}>
                     <TextField
                         sx={{width: "100%"}}
@@ -268,11 +257,7 @@ const AddFormComponent = () => {
                     />
                 </Grid>
                 <Grid item xs={12} sm={6}>
-                </Grid>
-            </Grid>
-            <Grid container spacing={2} sx={{padding : 2}}>
-                <Grid item xs={12}>
-                    <PlateNumber formik={formik} />
+                    <PlateNumber formik={formik}/>
                 </Grid>
             </Grid>
             <Box
diff --git a/src/core/components/PlateNumber.jsx b/src/core/components/PlateNumber.jsx
index b1a0f22..10ecd18 100644
--- a/src/core/components/PlateNumber.jsx
+++ b/src/core/components/PlateNumber.jsx
@@ -1,208 +1,231 @@
-import {Box, Divider, Grid, Stack, TextField} from "@mui/material";
-import SelectBox from "@/core/components/SelectBox";
+import {Box, Button, Drawer, FormHelperText, TextField, Typography} from "@mui/material";
 import {useTranslations} from "next-intl";
 import AccessibleIcon from '@mui/icons-material/Accessible';
-const plate_part2_alpha = [
+import {useState} from "react";
+
+const plate_words = [
     {
-        id : 1,
-        value : "الف",
-        name : "الف"
+        id: 1,
+        value: "الف",
+        name: "الف"
     },
     {
-        id : 2,
-        value : "ب",
-        name : "ب"
+        id: 2,
+        value: "ب",
+        name: "ب"
     },
     {
-        id : 3,
-        value : "پ",
-        name : "پ"
+        id: 3,
+        value: "پ",
+        name: "پ"
     },
     {
-        id : 4,
-        value : "ت",
-        name : "ت"
+        id: 4,
+        value: "ت",
+        name: "ت"
     },
     {
-        id : 5,
-        value : "ث",
-        name : "ث"
+        id: 5,
+        value: "ث",
+        name: "ث"
     },
     {
-        id : 6,
-        value : "ج",
-        name : "ج"
+        id: 6,
+        value: "ج",
+        name: "ج"
     },
     {
-        id : 7,
-        value : "د",
-        name : "د"
+        id: 7,
+        value: "د",
+        name: "د"
     },
     {
-        id : 8,
-        value : "ز",
-        name : "ز"
+        id: 8,
+        value: "ز",
+        name: "ز"
     },
     {
-        id : 9,
-        value : "س",
-        name : "س"
+        id: 9,
+        value: "س",
+        name: "س"
     },
     {
-        id : 10,
-        value : "ش",
-        name : "ش"
+        id: 10,
+        value: "ش",
+        name: "ش"
     },
     {
-        id : 11,
-        value : "ص",
-        name : "ص"
+        id: 11,
+        value: "ص",
+        name: "ص"
     },
     {
-        id : 12,
-        value : "ط",
-        name : "ط"
+        id: 12,
+        value: "ط",
+        name: "ط"
     },
     {
-        id : 13,
-        value : "ع",
-        name : "ع"
+        id: 13,
+        value: "ع",
+        name: "ع"
     },
     {
-        id : 14,
-        value : "ف",
-        name : "ف"
+        id: 14,
+        value: "ف",
+        name: "ف"
     },
     {
-        id : 15,
-        value : "ق",
-        name : "ق"
+        id: 15,
+        value: "ق",
+        name: "ق"
     },
     {
-        id : 16,
-        value : "ک",
-        name : "گ"
+        id: 16,
+        value: "ک",
+        name: "گ"
     },
     {
-        id : 17,
-        value : "ل",
-        name : "ل"
+        id: 17,
+        value: "ل",
+        name: "ل"
     },
     {
-        id : 18,
-        value : "م",
-        name : "م"
+        id: 18,
+        value: "م",
+        name: "م"
     },
     {
-        id : 19,
-        value : "ن",
-        name : "ن"
+        id: 19,
+        value: "ن",
+        name: "ن"
     },
     {
-        id : 20,
-        value : "و",
-        name : "و"
+        id: 20,
+        value: "و",
+        name: "و"
     },
     {
-        id : 21,
-        value : "ه",
-        name : "ه"
+        id: 21,
+        value: "ه",
+        name: "ه"
     },
     {
-        id : 22,
-        value : "ی",
-        name : "ی"
+        id: 22,
+        value: "ی",
+        name: "ی"
     },
     {
-        id : 23,
-        value : "*",
-        name : <AccessibleIcon/>
+        id: 23,
+        value: "*",
+        name: <AccessibleIcon/>
     },
 ]
 const PlateNumber = ({formik}) => {
     const t = useTranslations();
-    return(
-        <Box sx={{
-            display: "flex",
-            flexDirection: {xs: "column", sm: "row"},
-            alignItems: "center",
-            justifyContent : "center",
-            mx: "auto",
-            padding : 1,
-            border: 1,
-            borderRadius : 1,
-            borderColor : "divider",
-            width: {xs: "100%", sm: "40%", md: "50%"},
-        }}>
-            <Grid container spacing={2}>
-                <Grid item xs={6} sm={3}>
+    const [plateDrawer, setPlateDrawer] = useState(false);
+    const [selectedWordName, setSelectedWordName] = useState("الف");
+    const [selectedWordValue, setSelectedWordValue] = useState("");
+
+    return (
+        <>
+            <Box sx={{
+                display: "flex",
+                width: "fit-content",
+                flexDirection: "row",
+                alignItems: "end",
+                justifyContent: "end",
+                gap: 0.75
+            }}>
+                <Box sx={{display: "flex", flexDirection: "column", textAlign: "center"}}>
+                    <Typography variant="caption" sx={{fontWeight: 500}}>
+                        ایران
+                    </Typography>
                     <TextField
-                        sx={{width: "100%"}}
+                        sx={{width: "50px"}}
                         name="plate_part4"
-                        variant="standard"
+                        variant="outlined"
                         size="small"
-                        type={'number'}
-                        label={t("LoanRequest.text_field_plate_part4")}
-                        placeholder={t(
-                            "LoanRequest.text_field_enter_your_plate_part4"
-                        )}
+                        type='number'
                         onChange={formik.handleChange}
                         onBlur={formik.handleBlur("plate_part4")}
-                        error={formik.touched.plate_part4 && Boolean(formik.errors.plate_part4)}
-                        helperText={formik.touched.plate_part4 && formik.errors.plate_part4}
                     />
-                </Grid>
-                <Grid item xs={6} sm={3}>
+                </Box>
+                <Box>
                     <TextField
-                        sx={{width: "100%"}}
+                        sx={{width: "70px"}}
                         name="plate_part3"
-                        variant="standard"
+                        variant="outlined"
                         size="small"
-                        type={'number'}
-                        label={t("LoanRequest.text_field_plate_part3")}
-                        placeholder={t(
-                            "LoanRequest.text_field_enter_your_plate_part3"
-                        )}
+                        type='number'
                         onChange={formik.handleChange}
                         onBlur={formik.handleBlur("plate_part3")}
-                        error={formik.touched.plate_part3 && Boolean(formik.errors.plate_part3)}
-                        helperText={formik.touched.plate_part3 && formik.errors.plate_part3}
                     />
-                </Grid>
-                <Grid item xs={6} sm={3}>
-                    <SelectBox
-                        name="plate_part2"
-                        label={t("LoanRequest.text_field_plate_part2")}
-                        size="small"
-                        selectType="plate_part2"
-                        selectors={plate_part2_alpha}
-                        select={formik.values.plate_part2}
-                        handleChange={(event)=>formik.setFieldValue('plate_part2', event.target.value)}
-                        setFieldTouched={formik.setFieldTouched}
-                        error={formik.touched.plate_part2 && Boolean(formik.errors.plate_part2)}
-                        helperText={formik.touched.plate_part2 && formik.errors.plate_part2}
-                        onBlur={formik.handleBlur("plate_part2")}
-                    />
-                </Grid>
-                <Grid item xs={6} sm={3}>
+                </Box>
+                <Box>
+                    {/*<TextField*/}
+                    {/*    sx={{width: "50px"}}*/}
+                    {/*    name="plate_part2"*/}
+                    {/*    variant="outlined"*/}
+                    {/*    type={'number'}*/}
+                    {/*    size="small"*/}
+                    {/*    onChange={formik.handleChange}*/}
+                    {/*    onBlur={formik.handleBlur("plate_part1")}*/}
+                    {/*/>*/}
+                    <Button onClick={() => setPlateDrawer(true)}
+                            sx={{
+                                borderColor: "divider",
+                                fontSize: "16px"
+                            }}
+                            variant="outlined"
+                            data-selected-word={selectedWordValue}
+                    >{selectedWordName}</Button>
+                    <Drawer
+                        anchor={"bottom"}
+                        open={plateDrawer}
+                        onClose={() => setPlateDrawer(false)}
+                    >
+                        <Box sx={{
+                            display: "flex",
+                            flexWrap: "wrap",
+                            mx: "auto",
+                            my: 2,
+                            gap: 2,
+                            width: "60%",
+                            justifyContent: "center"
+                        }}>
+                            {plate_words.map((item) => (
+                                <Button
+                                    key={item.id}
+                                    onClick={() => {
+                                        setSelectedWordName(item.name);
+                                        setSelectedWordValue(item.value);
+                                        setPlateDrawer(false);
+                                    }}
+                                    sx={{
+                                        width: "fit-content"
+                                    }}
+                                    variant="contained"
+                                >
+                                    {item.name}
+                                </Button>
+                            ))}
+                        </Box>
+                    </Drawer>
+                </Box>
+                <Box>
                     <TextField
-                        sx={{width: "100%"}}
+                        sx={{width: "50px"}}
                         name="plate_part1"
-                        variant="standard"
-                        type={'number'}
+                        variant="outlined"
+                        type='number'
                         size="small"
-                        label={t("LoanRequest.text_field_plate_part1")}
-                        placeholder={t(
-                            "LoanRequest.text_field_enter_your_plate_part1"
-                        )}
                         onChange={formik.handleChange}
                         onBlur={formik.handleBlur("plate_part1")}
-                        error={formik.touched.plate_part1 && Boolean(formik.errors.plate_part1)}
-                        helperText={formik.touched.plate_part1 && formik.errors.plate_part1}
                     />
-                </Grid>
-            </Grid>
-        </Box>
+                </Box>
+            </Box>
+            <FormHelperText>{t("error_message_plate_number")}</FormHelperText>
+        </>
 
     )
 }