diff --git a/webapp/app/[lang]/dashboard/billing/page.tsx b/webapp/app/[lang]/dashboard/billing/page.tsx
index 93f60f5..0334215 100644
--- a/webapp/app/[lang]/dashboard/billing/page.tsx
+++ b/webapp/app/[lang]/dashboard/billing/page.tsx
@@ -1,10 +1,9 @@
-import CurrentBill from "@/app/components/dashboard/currentBill";
-import billingHistoryAPI from "@/app/apis/dummyMonthlyBillHistory";
-import MonthlyBillingHistory from "@/app/components/billing/MonthlyBillingHistory";
 import { getDictionary } from "@/get-dictionary";
 import { Locale } from "@/i18n-config";
 import { Metadata } from "next";
 import dummyBillApi from "../../../apis/dummyBillApi";
+import BillingSummaryPage from "@/app/components/billiing/billingSummaryPage";
+import billingHistoryAPI from "@/app/apis/dummyMonthlyBillHistory";
 
 export const metadata: Metadata = {
   title: "Billing",
@@ -18,18 +17,13 @@ export default async function BillingPage({
   const customerBill = dummyBillApi.getBill(123);
   const billHistoryData = billingHistoryAPI.getBillingHistory();
 
-  const dictionary = await getDictionary(lang);
 
+  const dictionary = await getDictionary(lang);
   return (
-    <div className="w-full flex flex-col">
-      <h1 className="my-6 text-4xl font-poppins font-bold">Pay My Bill</h1>
-      <div className="flex w-full gap-6">
-        <CurrentBill dictionary={dictionary} billDetails={customerBill} />
-        <MonthlyBillingHistory
-          dictionary={dictionary}
-          billHistoryData={billHistoryData}
-        />
-      </div>
-    </div>
+    <>
+      {customerBill && (
+        <BillingSummaryPage dictionary={dictionary} billDetails={customerBill} billHistoryData={billHistoryData} />
+      )}
+    </>
   );
 }
diff --git a/webapp/app/apis/dummyBillApi/bill.json b/webapp/app/apis/dummyBillApi/bill.json
index 4ee705c..a5c6bc6 100644
--- a/webapp/app/apis/dummyBillApi/bill.json
+++ b/webapp/app/apis/dummyBillApi/bill.json
@@ -4,13 +4,95 @@
     "dueDate": "04/30/2025",
     "dueAmount": "$50",
     "fromDate": "03/01/2025",
-    "toDate": "03/31/2025"
+    "toDate": "03/31/2025",
+    "subTotal": "$45",
+    "billCharges": {
+      "Basic Service Charge": {
+        "units": "1",
+        "charge": "10"
+      },
+      "Energy Charge Winter": {
+        "units": "1",
+        "charge": "10"
+      },
+      "Fuel Cost Charge": {
+        "units": "1",
+        "charge": "10"
+      },
+      "Sales True up": {
+        "units": "1",
+        "charge": "10"
+      }
+    },
+    "billTaxes": {
+      "City Fees": {
+        "units": "1",
+        "charge": "10"
+      },
+      "Transit Improvement Tax": {
+        "units": "1",
+        "charge": "10"
+      },
+      "City Tax": {
+        "units": "1",
+        "charge": "10"
+      },
+      "County Tax": {
+        "units": "1",
+        "charge": "10"
+      },
+      "State Tax": {
+        "units": "1",
+        "charge": "10"
+      }
+    }
   },
   {
     "customerId": 345,
     "dueDate": "05/30/2025",
     "dueAmount": "$30",
     "fromDate": "04/01/2025",
-    "toDate": "04/31/2025"
+    "toDate": "04/31/2025",
+    "subTotal": "$25",
+    "billDetails": {
+      "Basic Service Charge": {
+        "units": "1",
+        "charge": "10"
+      },
+      "Energy Charge Winter": {
+        "units": "1",
+        "charge": "10"
+      },
+      "Fuel Cost Charge": {
+        "units": "1",
+        "charge": "10"
+      },
+      "Sales True up": {
+        "units": "1",
+        "charge": "10"
+      }
+    },
+    "billTaxes": {
+      "City Fees": {
+        "units": "1",
+        "charge": "10"
+      },
+      "Transit Improvement Tax": {
+        "units": "1",
+        "charge": "10"
+      },
+      "City Tax": {
+        "units": "1",
+        "charge": "10"
+      },
+      "County Tax": {
+        "units": "1",
+        "charge": "10"
+      },
+      "State Tax": {
+        "units": "1",
+        "charge": "10"
+      }
+    }
   }
 ]
diff --git a/webapp/app/components/billiing/billingSummaryPage.tsx b/webapp/app/components/billiing/billingSummaryPage.tsx
new file mode 100644
index 0000000..a4d3402
--- /dev/null
+++ b/webapp/app/components/billiing/billingSummaryPage.tsx
@@ -0,0 +1,52 @@
+"use client";
+import { BillDetails, DictionaryType } from "@/types";
+import CurrentBill from "../dashboard/currentBill";
+import BillingSummary from "../dashboard/billingSummary";
+import { useState } from "react";
+import MonthlyBillingHistory from "../billing/MonthlyBillingHistory";
+
+const BillingSummaryPage = ({
+  dictionary,
+  billDetails,
+  billHistoryData,
+}: {
+  dictionary: DictionaryType;
+  billDetails: BillDetails;
+  billHistoryData: any;
+}) => {
+  const [showBillDetails, setShowBillDetails] = useState(false);
+
+  return (
+    <>
+      <h1 className="text-3xl font-poppins font-bold  text-black mb-[24px] mt-[24px] ">
+        {showBillDetails
+          ? dictionary.billings.billingDetails
+          : dictionary.billings.payMyBills}
+      </h1>
+      <div className="flex flex-row  w-full  justify-between">
+        {billDetails && (
+          <>
+            <CurrentBill
+              dictionary={dictionary}
+              billDetails={billDetails}
+              setShowBillDetails={setShowBillDetails}
+            />
+            {showBillDetails ? (
+              <BillingSummary
+                dictionary={dictionary}
+                billDetails={billDetails}
+              />
+            ) : (
+              <MonthlyBillingHistory
+                billHistoryData={billHistoryData}
+                dictionary={dictionary}
+              />
+            )}
+          </>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default BillingSummaryPage;
diff --git a/webapp/app/components/dashboard/billingSummary.tsx b/webapp/app/components/dashboard/billingSummary.tsx
new file mode 100644
index 0000000..c622b1b
--- /dev/null
+++ b/webapp/app/components/dashboard/billingSummary.tsx
@@ -0,0 +1,95 @@
+import { BillDetails, DictionaryType } from "@/types";
+
+
+
+
+const TableView = ({
+  data,
+}: {
+  data: Record<string, { units: string; charge: string }>;
+}) => {
+  return Object.keys(data)?.map((item, index) => {
+    const unit = data[item]?.units;
+    const charge = data[item]?.charge;
+    return (
+      <div
+        key={index}
+        className="flex flex-wrap w-full justify-between mt-[16px]"
+      >
+        <div className="flex-1 ">
+          <div className="font-sans font-normal text-base">{item}</div>
+        </div>
+        <div className="flex-1 ">
+          <div className="font-sans font-normal text-base">{unit}</div>
+        </div>
+        <div className="flex-1 ">
+          <div className="font-sans font-normal text-base">{charge}</div>
+        </div>
+      </div>
+    );
+  });
+};
+
+const BillingSummary = ({
+  dictionary,
+  billDetails,
+}: {
+  dictionary: DictionaryType;
+  billDetails: BillDetails;
+}) => {
+  const { fromDate, toDate } = billDetails;
+  return (
+    <div className="w-[49%] p-[24px] bg-white">
+      <h1 className="text-2xl leading-9 font-poppins font-bold  text-black tracking-[1px]">
+        {dictionary.billings.summary}
+      </h1>
+      <div className="w-12 h-1 bg-[#FDB825] mt-2 mb-[24px]" />
+      <p className="font-normal text-black text-lg leading-[28.8px] font-sans">
+        {`${dictionary.billings.utility_service} ${fromDate} - ${toDate}`}
+      </p>
+      {billDetails?.billCharges && (
+        <>
+          <div className="flex flex-wrap w-full justify-between mt-[16px]">
+            <div className="flex-1 ">
+              <div className="font-sans font-bold">Description</div>
+            </div>
+            <div className="flex-1 ">
+              <div className="font-sans font-bold">Units</div>
+            </div>
+            <div className="flex-1 ">
+              <div className="font-sans font-bold">Charge</div>
+            </div>
+          </div>
+          <TableView data={billDetails?.billCharges} />
+        </>
+      )}
+      <div className="flex flex-wrap w-full justify-between mt-[16px]">
+        <div className="flex-1 ">
+          <div className="font-sans font-bold">SubTotal</div>
+        </div>
+        <div className="flex-1 ">
+          <div className="font-sans font-bold"></div>
+        </div>
+        <div className="flex-1 ">
+          <div className="font-sans font-bold">{billDetails?.subTotal}</div>
+        </div>
+      </div>
+      <div className="border-b-2 border-black mt-[16px]"></div>
+      {billDetails?.billTaxes && <TableView data={billDetails?.billTaxes} />}
+      <div className="border-b-2 border-black mt-[16px]"></div>
+      <div className="flex flex-wrap w-full justify-between mt-[16px]">
+        <div className="flex-1 ">
+          <div className="font-sans font-bold">Total</div>
+        </div>
+        <div className="flex-1 ">
+          <div className="font-sans font-bold"></div>
+        </div>
+        <div className="flex-1 ">
+          <div className="font-sans font-bold">{billDetails?.dueAmount}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BillingSummary;
diff --git a/webapp/app/components/dashboard/currentBill.tsx b/webapp/app/components/dashboard/currentBill.tsx
index 65b307f..6d81304 100644
--- a/webapp/app/components/dashboard/currentBill.tsx
+++ b/webapp/app/components/dashboard/currentBill.tsx
@@ -1,27 +1,22 @@
 import { Button } from "@/components/ui/button";
-import { DictionaryType } from "@/types";
-
-class BillDetails {
-  customerId:number =1;
-  fromDate: string = "03/01/2025";
-  toDate: string = "03/31/2025";
-  dueDate: string = "03/30/2025";
-  dueAmount: string = "$50";
-}
+import { BillDetails, DictionaryType } from "@/types";
 
 const CurrentBill = ({
   dictionary,
-  billDetails = new BillDetails(),
+  billDetails,
+  setShowBillDetails,
 }: {
   dictionary: DictionaryType;
-  billDetails?: BillDetails;
+  billDetails: BillDetails;
+  setShowBillDetails?: (showBillDetails: boolean) => void;
 }) => {
   const { fromDate, toDate, dueDate, dueAmount } = billDetails;
   return (
     <div className="w-[49%] p-[24px] bg-white">
-      <h1 className="text-2xl leading-9 font-poppins font-bold  text-black tracking-[1px] mb-[24px]">
+      <h1 className="text-2xl leading-9 font-poppins font-bold  text-black tracking-[1px] ">
         {dictionary.billings.current_bill}
       </h1>
+      <div className="w-12 h-1 bg-[#FDB825] mt-2 mb-[24px]" />
       <p className="font-normal text-black text-lg leading-[28.8px] font-sans">
         {`${dictionary.billings.utility_service} ${fromDate} - ${toDate}`}
       </p>
@@ -42,7 +37,7 @@ const CurrentBill = ({
       <div className="flex w-full justify-between mt-[16px]">
         <Button
           type="button"
-          // onClick={() => {}}
+          onClick={() => { setShowBillDetails?.(true); }}
           className="mt-6 w-5/12 uppercase font-bold text-base tracking-[0.5px] disabled:bg-[#D6CCF1] disabled:opacity-100"
           variant={"outline"}
         >
diff --git a/webapp/dictionaries/en.json b/webapp/dictionaries/en.json
index dabb870..9c9b842 100644
--- a/webapp/dictionaries/en.json
+++ b/webapp/dictionaries/en.json
@@ -50,6 +50,9 @@
     "monthly_billing_history": "Monthly Billing History",
     "year_by_year_comparison": "Year by Year Comparison",
     "monthly_service_cost_in_dollars": "Monthly Service Cost in dollars",
-    "month": "Month"
+    "month": "Month",
+    "summary":"Summary",
+    "billingDetails":"Billing Details",
+    "payMyBills":"Pay My Bills"
   }
 }
diff --git a/webapp/dictionaries/es.json b/webapp/dictionaries/es.json
index 0ddb7a8..b3ffc97 100644
--- a/webapp/dictionaries/es.json
+++ b/webapp/dictionaries/es.json
@@ -50,6 +50,9 @@
     "monthly_billing_history": "Historial de facturación mensual",
     "year_by_year_comparison": "Comparación año por año",
     "monthly_service_cost_in_dollars": "Costo del servicio mensual en dólares",
-    "month": "Mes"
+    "month": "Mes",
+    "summary": "resumen",
+    "billingDetails": "Detalles de facturación",
+    "payMyBills": "Pagar mis facturas"
   }
 }
diff --git a/webapp/types/index.ts b/webapp/types/index.ts
index b12f9da..bd89abc 100644
--- a/webapp/types/index.ts
+++ b/webapp/types/index.ts
@@ -1,3 +1,14 @@
 import { type getDictionary } from "@/get-dictionary";
 
 export type DictionaryType = Awaited<ReturnType<typeof getDictionary>>;
+
+export type BillDetails = {
+    customerId: number;
+    fromDate: string;
+    toDate: string;
+    dueDate: string;
+    dueAmount: string;
+    billCharges?: Record<string, { units: string; charge: string }>;
+    billTaxes?: Record<string, { units: string; charge: string }>;
+    subTotal: string;
+  };