diff --git a/client/src/pages/HBFormPage.tsx b/client/src/pages/HBFormPage.tsx
index 13d33de..74273a8 100644
--- a/client/src/pages/HBFormPage.tsx
+++ b/client/src/pages/HBFormPage.tsx
@@ -36,8 +36,7 @@ const validationSchema = Yup.object({
     .positive("Must be a positive value")
     .max(99999.99, "Value is too large")
     .required("Average bill is a required field"),
-  ebPicture: Yup.mixed().required("Electrical bill picture is required"),
-  wbPicture: Yup.mixed().required("Water bill picture is required"),
+  billPicture: Yup.mixed().required("Bill picture is required"),
 });
 
 export default function HBFormPage() {
@@ -49,15 +48,13 @@ export default function HBFormPage() {
     totalBill: "",
     noOfDependents: "",
     avgBill: "",
-    ebPicture: null,
-    wbPicture: null,
+    billPicture: null,
     userId: "",
   });
 
   // Add state for image selection
   const [imagesSelected, setImagesSelected] = useState({
-    ebPicture: false,
-    wbPicture: false,
+    billPicture: false,
   });
 
   useEffect(() => {
@@ -112,12 +109,8 @@ export default function HBFormPage() {
       formData.append("noOfDependents", values.noOfDependents);
       formData.append("avgBill", values.avgBill);
 
-      if (values.ebPicture) {
-        formData.append("ebPicture", values.ebPicture);
-      }
-
-      if (values.wbPicture) {
-        formData.append("wbPicture", values.wbPicture);
+      if (values.billPicture) {
+        formData.append("billPicture", values.billPicture);
       }
 
       if (userId != null) {
@@ -137,8 +130,7 @@ export default function HBFormPage() {
         if (response.status === 200) {
           console.log("Form created successfully:", response.data);
           resetForm(); // Clear form after successful submit
-          setFieldValue("ebPicture", null);
-          setFieldValue("wbPicture", null);
+          setFieldValue("billPicture", null);
           navigate(-1);
         } else {
           console.error("Error creating form:", response.statusText);
@@ -190,12 +182,8 @@ export default function HBFormPage() {
       formData.append("noOfDependents", values.noOfDependents);
       formData.append("avgBill", values.avgBill);
 
-      if (values.ebPicture) {
-        formData.append("ebPicture", values.ebPicture);
-      }
-
-      if (values.wbPicture) {
-        formData.append("wbPicture", values.wbPicture);
+      if (values.billPicture) {
+        formData.append("billPicture", values.billPicture);
       }
 
       if (userId != null) {
@@ -216,8 +204,7 @@ export default function HBFormPage() {
       if (response.status === 200) {
         console.log("Form created successfully:", response.data);
         resetForm(); // Clear form after successful submit
-        setFieldValue("ebPicture", null);
-        setFieldValue("wbPicture", null);
+        setFieldValue("billPicture", null);
         navigate(-1);
       } else {
         console.error("Error creating form:", response.statusText);
@@ -242,7 +229,7 @@ export default function HBFormPage() {
 
   return (
     <div className="w-full h-full pb-12">
-      <div className="w-8/12 mx-auto p-6 bg-red-100 dark:bg-red-950 border border-primary-100 rounded-2xl h-600px">
+      <div className="w-[680px] mx-auto p-6 bg-red-100 dark:bg-red-950 border border-primary-100 rounded-2xl h-600px">
         <div className="py-2">
           <Button variant="light" onPress={() => navigate(-1)}>
             <ArrowUTurnLeftIcon />
@@ -268,13 +255,13 @@ export default function HBFormPage() {
               }, [values.electricalBill, values.waterBill, values.noOfDependents, setFieldValue]);
 
               // Disabled the submit button because the images field are not selected
-              const isSubmitDisabled = !imagesSelected.ebPicture || !imagesSelected.wbPicture;
+              const isSubmitDisabled = !imagesSelected.billPicture;
 
               return (
                 <Form>
-                  <div className="flex flex-col gap-5">
-                    <div className="flex flex-row gap-5">
-                      <div className="flex flex-col gap-5 p-2 min-w-[180px] ">
+                  <div className="flex flex-col">
+                    <div className="flex flex-row gap-10">
+                      <div className="flex flex-col gap-10 p-2 min-w-[220px]">
                         <NextUIFormikInput
                           label="Electrical Bill"
                           name="electricalBill"
@@ -318,17 +305,10 @@ export default function HBFormPage() {
                       </div>
                       <div className="flex flex-row gap-10">
                         <InsertImage
-                          label="Electrical Bill Image"
+                          label=""
                           onImageSelected={(file) => {
-                            setFieldValue("ebPicture", file);
-                            handleImageSelection("ebPicture", file);
-                          }}
-                        />
-                        <InsertImage
-                          label="Water Bill Image"
-                          onImageSelected={(file) => {
-                            setFieldValue("wbPicture", file);
-                            handleImageSelection("wbPicture", file);
+                            setFieldValue("billPicture", file);
+                            handleImageSelection("billPicture", file);
                           }}
                         />
                       </div>
diff --git a/client/src/pages/Ranking.tsx b/client/src/pages/Ranking.tsx
index 98d20c6..9c54031 100644
--- a/client/src/pages/Ranking.tsx
+++ b/client/src/pages/Ranking.tsx
@@ -18,8 +18,7 @@ interface FormData {
     totalBill: number;
     noOfDependents: number;
     avgBill: number;
-    ebPicture: string;
-    wbPicture: string;
+    billPicture: string;
     userId: string;
 }
 
@@ -150,8 +149,7 @@ export default function Ranking() {
                         <TableColumn onClick={handleSort}>
                             Average Bill {renderSortIndicator()}
                         </TableColumn>
-                        <TableColumn>Electrical Bill Picture</TableColumn>
-                        <TableColumn>Water Bill Picture</TableColumn>
+                        <TableColumn>Bill Picture</TableColumn>
                         <TableColumn>Actions</TableColumn>
                     </TableHeader>
                     <TableBody>
@@ -166,10 +164,7 @@ export default function Ranking() {
                                 <TableCell>{data.noOfDependents}</TableCell>
                                 <TableCell>${data.avgBill.toFixed(2)}</TableCell>
                                 <TableCell>
-                                    {data.ebPicture && <img src={`${config.serverAddress}/hbcform/ebPicture/${data.id}`} alt="Electrical Bill" className="w-full" />}
-                                </TableCell>
-                                <TableCell>
-                                    {data.wbPicture && <img src={`${config.serverAddress}/hbcform/wbPicture/${data.id}`} alt="Water Bill" className="w-full" />}
+                                    {data.billPicture && <img src={`${config.serverAddress}/hbcform/billPicture/${data.id}`} alt="bill picture" className="w-full" />}
                                 </TableCell>
                                 <TableCell className="flex flex-row">
                                     <Button isIconOnly variant="light" className="text-blue-500" onClick={() => handleEmailClick(data.userEmail, data.userName)}><EmailIcon /></Button>
diff --git a/server/models/HBCform.js b/server/models/HBCform.js
index 7eca30f..ce41be4 100644
--- a/server/models/HBCform.js
+++ b/server/models/HBCform.js
@@ -30,11 +30,7 @@ module.exports = (sequelize, DataTypes) => {
                 type: DataTypes.DECIMAL(7, 2),
                 allowNull: false,
             },
-            ebPicture: {
-                type: DataTypes.BLOB("long"),
-                allowNull: true,
-            },
-            wbPicture: {
+            billPicture: {
                 type: DataTypes.BLOB("long"),
                 allowNull: true,
             },
diff --git a/server/routes/hbcform.js b/server/routes/hbcform.js
index 511e488..d98058d 100644
--- a/server/routes/hbcform.js
+++ b/server/routes/hbcform.js
@@ -62,8 +62,7 @@ async function processFile(file) {
 router.post(
     "/",
     upload.fields([
-        { name: "ebPicture", maxCount: 1 },
-        { name: "wbPicture", maxCount: 1 },
+        { name: "billPicture", maxCount: 1 },
     ]),
     async (req, res) => {
         let data = req.body;
@@ -83,14 +82,12 @@ router.post(
             data = await validationSchema.validate(data, { abortEarly: false });
 
             // Process the files
-            const processedEbPicture = await processFile(files.ebPicture[0]);
-            const processedWbPicture = await processFile(files.wbPicture[0]);
+            const processedbillPicture = await processFile(files.billPicture[0]);
 
             // Save the form with processed files
             let result = await HBCform.create({
                 ...data,
-                ebPicture: processedEbPicture,
-                wbPicture: processedWbPicture,
+                billPicture: processedbillPicture,
             });
 
             res.json(result);
@@ -130,37 +127,18 @@ router.get("/:id", async (req, res) => {
     res.json(hbcform);
 });
 
-router.get("/ebPicture/:id", async (req, res) => {
+router.get("/billPicture/:id", async (req, res) => {
     let id = req.params.id;
     let hbcform = await HBCform.findByPk(id);
 
-    if (!hbcform || !hbcform.ebPicture) {
+    if (!hbcform || !hbcform.billPicture) {
         res.sendStatus(404);
         return;
     }
 
     try {
         res.set("Content-Type", "image/jpeg"); // Adjust the content type as necessary
-        res.send(hbcform.ebPicture);
-    } catch (err) {
-        res
-            .status(500)
-            .json({ message: "Error retrieving electrical bill", error: err });
-    }
-});
-
-router.get("/wbPicture/:id", async (req, res) => {
-    let id = req.params.id;
-    let hbcform = await HBCform.findByPk(id);
-
-    if (!hbcform || !hbcform.wbPicture) {
-        res.sendStatus(404);
-        return;
-    }
-
-    try {
-        res.set("Content-Type", "image/jpeg"); // Adjust the content type as necessary
-        res.send(hbcform.wbPicture);
+        res.send(hbcform.billPicture);
     } catch (err) {
         res
             .status(500)