diff --git a/src/config/Pages.ts b/src/config/Pages.ts
index be50433..d40cff2 100644
--- a/src/config/Pages.ts
+++ b/src/config/Pages.ts
@@ -123,9 +123,9 @@ export const Pages = {
     detail: "/company/detail/",
   },
   bill: {
-    createBillWater: "/bill/water/create",
-    createBillCharge: "/bill/charge/create",
-    ListBillWater: "/bill/water/list",
-    ListBillCharge: "/bill/charge/list",
+    createBillWater: "/receipts/bill/water/create",
+    createBillCharge: "/receipts/bill/charge/create",
+    ListBillWater: "/receipts/bill/water/list",
+    ListBillCharge: "/receipts/bill/charge/list",
   },
 };
diff --git a/src/pages/bill/CreateCharge.tsx b/src/pages/bill/CreateCharge.tsx
new file mode 100644
index 0000000..dc1ebc7
--- /dev/null
+++ b/src/pages/bill/CreateCharge.tsx
@@ -0,0 +1,104 @@
+import { type FC } from 'react'
+import { useCreateCharge } from './hooks/useBillData'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import { CreateBillChargeType } from './types/Types'
+import Button from '../../components/Button'
+import Input from '../../components/Input'
+import { TickCircle } from 'iconsax-react'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../helpers/types'
+import { Pages } from '../../config/Pages'
+import { useNavigate } from 'react-router-dom'
+
+const CreateCharge: FC = () => {
+    const navigate = useNavigate()
+    const { mutateAsync, isPending } = useCreateCharge()
+
+    const formik = useFormik<CreateBillChargeType>({
+        initialValues: {
+            chargeRate: 0,
+            dueDays: 0,
+        },
+        validationSchema: Yup.object({
+            chargeRate: Yup.number()
+                .min(0, 'نرخ شارژ باید عدد مثبت باشد')
+                .required('نرخ شارژ الزامی است'),
+            dueDays: Yup.number()
+                .min(0, 'تعداد روز مهلت باید عدد مثبت باشد')
+                .required('تعداد روز مهلت الزامی است'),
+        }),
+        onSubmit: async (values) => {
+            const payload = {
+                chargeRate: Math.floor(Number(values.chargeRate)) || 0,
+                dueDays: Math.floor(Number(values.dueDays)) || 0,
+            }
+            await mutateAsync(payload, {
+                onSuccess: () => {
+                    toast.success('قبض شارژ با موفقیت ثبت شد')
+                    navigate(Pages.bill.ListBillCharge)
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(
+                        (error as ErrorType).response?.data?.error?.message?.[0] ?? 'خطا در ثبت قبض شارژ'
+                    )
+                },
+            })
+        },
+    })
+
+    return (
+        <div className="mt-4">
+            <div className="flex justify-between items-center">
+                <div className="text-lg font-medium">افزودن قبض شارژ</div>
+                <Button
+                    className="w-fit px-4"
+                    onClick={() => formik.handleSubmit()}
+                    isLoading={isPending}
+                >
+                    <div className="flex items-center gap-2">
+                        <TickCircle size={20} color="white" />
+                        <span>ثبت قبض شارژ</span>
+                    </div>
+                </Button>
+            </div>
+
+            <div className="mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl">
+                <div className="text-base font-medium mb-6">اطلاعات قبض شارژ</div>
+
+                <div className="rowTwoInput mt-6">
+                    <Input
+                        label="نرخ شارژ (ریال)"
+                        name="chargeRate"
+                        type="number"
+                        min={0}
+                        value={formik.values.chargeRate}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        error_text={
+                            formik.touched.chargeRate && formik.errors.chargeRate
+                                ? String(formik.errors.chargeRate)
+                                : ''
+                        }
+                    />
+                    <Input
+                        label="تعداد روز مهلت پرداخت"
+                        name="dueDays"
+                        type="number"
+                        min={0}
+                        value={formik.values.dueDays}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        error_text={
+                            formik.touched.dueDays && formik.errors.dueDays
+                                ? String(formik.errors.dueDays)
+                                : ''
+                        }
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CreateCharge
\ No newline at end of file
diff --git a/src/pages/bill/hooks/useBillData.ts b/src/pages/bill/hooks/useBillData.ts
index c7c7ff6..c96738f 100644
--- a/src/pages/bill/hooks/useBillData.ts
+++ b/src/pages/bill/hooks/useBillData.ts
@@ -6,3 +6,9 @@ export const useCreateBill = () => {
     mutationFn: api.createBill,
   });
 };
+
+export const useCreateCharge = () => {
+  return useMutation({
+    mutationFn: api.createChargeBill,
+  });
+};
diff --git a/src/pages/bill/service/Service.ts b/src/pages/bill/service/Service.ts
index 6cf002d..28f8ffa 100644
--- a/src/pages/bill/service/Service.ts
+++ b/src/pages/bill/service/Service.ts
@@ -1,7 +1,12 @@
 import axios from "../../../config/axios";
-import { CreateBillType } from "../types/Types";
+import { CreateBillType, CreateBillChargeType } from "../types/Types";
 
 export const createBill = async (params: CreateBillType) => {
   const { data } = await axios.post("/bills/water", params);
   return data;
 };
+
+export const createChargeBill = async (params: CreateBillChargeType) => {
+  const { data } = await axios.post("/bills/charge", params);
+  return data;
+};
diff --git a/src/pages/bill/types/Types.ts b/src/pages/bill/types/Types.ts
index 9f748be..bbaf393 100644
--- a/src/pages/bill/types/Types.ts
+++ b/src/pages/bill/types/Types.ts
@@ -6,3 +6,8 @@ export type CreateBillType = {
     waterUsage: number;
   }[];
 };
+
+export type CreateBillChargeType = {
+  chargeRate: number;
+  dueDays: number;
+};
diff --git a/src/router/Main.tsx b/src/router/Main.tsx
index 76c34a9..715f731 100644
--- a/src/router/Main.tsx
+++ b/src/router/Main.tsx
@@ -56,6 +56,7 @@ import SliderList from '../pages/slider/List'
 import UpdateSlider from '../pages/slider/Update'
 import CreateSlider from '../pages/slider/Create'
 import CreateBill from '../pages/bill/Create'
+import CreateCharge from '../pages/bill/CreateCharge'
 const MainRouter: FC = () => {
 
     const { hasSubMenu } = useSharedStore()
@@ -126,6 +127,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.sliders.detail + ':id'} element={<UpdateSlider />} />
 
                             <Route path={Pages.bill.createBillWater} element={<CreateBill />} />
+                            <Route path={Pages.bill.createBillCharge} element={<CreateCharge />} />
                         </Routes>
                     </div>
                 </div>