diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json
index d24b4c1..06dc231 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": "ویرایش پروفایل",
@@ -139,7 +140,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 8d91c98..40eed76 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";
@@ -15,8 +15,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: "",
@@ -49,7 +49,7 @@ const AddFormComponent = () => {
         address: Yup.string().required(
             t("LoanRequest.error_message_address")
         ),
-        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")
@@ -78,7 +78,7 @@ const AddFormComponent = () => {
         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")),
@@ -280,7 +280,7 @@ const AddFormComponent = () => {
                 </Grid>
             </Grid>
             <Grid container spacing={2} sx={{padding : 2}}>
-                <Grid item xs={12}>
+                <Grid item xs={12} sm={6}>
                     <PlateNumber formik={formik} />
                 </Grid>
             </Grid>
diff --git a/src/core/components/PlateNumber.jsx b/src/core/components/PlateNumber.jsx
index b1a0f22..57be9fd 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", justifyContent: "center"}}>
+                    <Typography variant="caption" sx={{fontWeight: 500}}>
+                        ایران
+                    </Typography>
                     <TextField
-                        sx={{width: "100%"}}
+                        fullWidth
                         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%"}}
+                        fullWidth
                         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%"}}
+                        fullWidth
                         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>
+        </>
 
     )
 }