diff --git a/bookie/src/app/sales/bill.service.ts b/bookie/src/app/sales/bill.service.ts
index d661ed4..ce574bb 100644
--- a/bookie/src/app/sales/bill.service.ts
+++ b/bookie/src/app/sales/bill.service.ts
@@ -1,9 +1,9 @@
 import { SelectionModel } from '@angular/cdk/collections';
-import { Injectable, inject } from '@angular/core';
+import { Injectable, inject, signal, computed } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { BehaviorSubject, throwError, Observable } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
+import { throwError, Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
 
 import { ModifierCategory } from '../core/modifier-category';
 import { ProductQuery } from '../core/product-query';
@@ -30,14 +30,48 @@ export class BillService {
   private ser = inject(VoucherService);
   private modifierCategoryService = inject(ModifierCategoryService);
 
-  public dataObs: BehaviorSubject<Kot[]>;
+  public data = signal<Kot[]>([]);
   public bill: Bill = new Bill();
   private originalBill: Bill = new Bill();
-  public grossAmount: Observable<number>;
-  public discountAmount: Observable<number>;
-  public hhAmount: Observable<number>;
-  public taxAmount: Observable<number>;
-  public amount: BehaviorSubject<number>;
+
+  public grossAmount = computed(() =>
+    this.math.halfRoundEven(
+      this.data().reduce((t, k) => k.inventories.reduce((a, c) => a + c.price * c.quantity, 0) + t, 0),
+    ),
+  );
+
+  public hhAmount = computed(() =>
+    this.math.halfRoundEven(
+      this.data().reduce(
+        (t, k) => k.inventories.reduce((a, c) => a + (c.isHappyHour ? c.price : 0) * c.quantity, 0) + t,
+        0,
+      ),
+    ),
+  );
+
+  public discountAmount = computed(() =>
+    this.math.halfRoundEven(
+      this.data().reduce(
+        (t, k) => k.inventories.reduce((a, c) => a + (c.isHappyHour ? 0 : c.price) * c.quantity * c.discount, 0) + t,
+        0,
+      ),
+    ),
+  );
+
+  public taxAmount = computed(() =>
+    this.math.halfRoundEven(
+      this.data().reduce(
+        (t, k) =>
+          k.inventories.reduce(
+            (a, c) => a + (c.isHappyHour ? 0 : c.price) * c.quantity * (1 - c.discount) * c.taxRate,
+            0,
+          ) + t,
+        0,
+      ),
+    ),
+  );
+
+  public amount = computed(() => this.grossAmount() - this.discountAmount() + this.taxAmount());
   public selection = new SelectionModel<string>(true, []);
   private updateTable: boolean;
   private allowDeactivate: boolean;
@@ -45,83 +79,13 @@ export class BillService {
   // To disable Deactivate Guard on navigation after printing bill or kot.
 
   constructor() {
-    this.dataObs = new BehaviorSubject<Kot[]>([]);
     this.updateTable = true;
     this.allowDeactivate = false;
-
-    this.grossAmount = this.dataObs.pipe(
-      map((kots: Kot[]) =>
-        this.math.halfRoundEven(
-          kots.reduce((t, k) => k.inventories.reduce((a, c) => a + c.price * c.quantity, 0) + t, 0),
-        ),
-      ),
-    );
-
-    this.hhAmount = this.dataObs.pipe(
-      map((kots: Kot[]) => {
-        return this.math.halfRoundEven(
-          kots.reduce(
-            (t, k) => k.inventories.reduce((a, c) => a + (c.isHappyHour ? c.price : 0) * c.quantity, 0) + t,
-            0,
-          ),
-        );
-      }),
-    );
-
-    this.discountAmount = this.dataObs.pipe(
-      map((kots: Kot[]) => {
-        return this.math.halfRoundEven(
-          kots.reduce(
-            (t, k) =>
-              k.inventories.reduce((a, c) => a + (c.isHappyHour ? 0 : c.price) * c.quantity * c.discount, 0) + t,
-            0,
-          ),
-        );
-      }),
-    );
-
-    this.taxAmount = this.dataObs.pipe(
-      map((kots: Kot[]) => {
-        return this.math.halfRoundEven(
-          kots.reduce(
-            (t, k) =>
-              k.inventories.reduce(
-                (a, c) => a + (c.isHappyHour ? 0 : c.price) * c.quantity * (1 - c.discount) * c.taxRate,
-                0,
-              ) + t,
-            0,
-          ),
-        );
-      }),
-    );
-
-    this.amount = new BehaviorSubject<number>(0);
-    this.dataObs
-      .pipe(
-        map((kots: Kot[]) => {
-          return this.math.halfRoundEven(
-            kots.reduce(
-              (t, k) =>
-                k.inventories.reduce(
-                  (a, c) =>
-                    a +
-                    this.math.halfRoundEven(
-                      (c.isHappyHour ? 0 : c.price) * c.quantity * (1 - c.discount) * (1 + c.taxRate),
-                      2,
-                    ),
-                  0,
-                ) + t,
-              0,
-            ),
-          );
-        }),
-      )
-      .subscribe((value) => this.amount.next(value));
   }
 
   displayBill(): void {
     this.allowDeactivate = false;
-    this.dataObs.next(this.bill.kots);
+    this.data.set([...this.bill.kots]);
   }
 
   loadData(bill: Bill, updateTable: boolean): void {
diff --git a/bookie/src/app/sales/bills/bills-datasource.ts b/bookie/src/app/sales/bills/bills-datasource.ts
deleted file mode 100644
index dd418a2..0000000
--- a/bookie/src/app/sales/bills/bills-datasource.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { map, Observable, tap } from 'rxjs';
-
-import { BillRow } from './bill-row';
-import { Kot } from './kot';
-
-export class BillsDataSource extends DataSource<BillRow> {
-  private data: Kot[] = [];
-  constructor(private readonly dataObs: Observable<Kot[]>) {
-    super();
-  }
-
-  connect(): Observable<BillRow[]> {
-    return this.dataObs.pipe(
-      tap((x) => {
-        this.data = x;
-      }),
-      map((d) =>
-        d.flatMap((k) => {
-          const kotRow: BillRow = new BillRow({ kind: 'kot', kot: k, id: k.id! });
-          const rows: BillRow[] = [];
-          for (const inv of k.inventories) {
-            if (!inv.id) {
-              inv.clientId = inv.clientId || crypto.randomUUID();
-            }
-            rows.push(new BillRow({ kind: 'inv', kot: k, inv, id: `${k.id}-${inv.id || inv.clientId}` }));
-            if (inv.type === 'bundle') {
-              for (const child of inv.children) {
-                if (!child.id) {
-                  child.clientId = child.clientId || crypto.randomUUID();
-                }
-                child.parentId = inv.id || inv.clientId;
-                rows.push(
-                  new BillRow({
-                    kind: 'child',
-                    kot: k,
-                    parent: inv,
-                    inv: child,
-                    id: `${k.id}-${child.id || child.clientId}`,
-                  }),
-                );
-              }
-            }
-          }
-          return [kotRow, ...rows];
-        }),
-      ),
-    );
-  }
-
-  disconnect() {}
-}
diff --git a/bookie/src/app/sales/bills/bills.component.html b/bookie/src/app/sales/bills/bills.component.html
index 564bd5a..64100cb 100644
--- a/bookie/src/app/sales/bills/bills.component.html
+++ b/bookie/src/app/sales/bills/bills.component.html
@@ -1,5 +1,5 @@
 <h2>Bill</h2>
-<table mat-table #table [dataSource]="dataSource" class="mat-elevation-z8" [trackBy]="trackByRow">
+<table mat-table #table [dataSource]="dataSource()" class="mat-elevation-z8" [trackBy]="trackByRow">
   <ng-container matColumnDef="bill-no-title">
     <mat-header-cell *matHeaderCellDef class="deep-purple-200 bold">Bill / KOT number</mat-header-cell>
   </ng-container>
@@ -165,7 +165,7 @@
   </ng-container>
   <ng-container matColumnDef="gross-amount">
     <mat-footer-cell *matFooterCellDef class="bold right-align">{{
-      bs.grossAmount | async | currency: 'INR'
+      bs.grossAmount() | currency: 'INR'
     }}</mat-footer-cell>
   </ng-container>
 
@@ -174,9 +174,7 @@
     <mat-footer-cell *matFooterCellDef class="bold">Happy Hour Discount</mat-footer-cell>
   </ng-container>
   <ng-container matColumnDef="hh-amount">
-    <mat-footer-cell *matFooterCellDef class="bold right-align">{{
-      bs.hhAmount | async | currency: 'INR'
-    }}</mat-footer-cell>
+    <mat-footer-cell *matFooterCellDef class="bold right-align">{{ bs.hhAmount() | currency: 'INR' }}</mat-footer-cell>
   </ng-container>
 
   <mat-footer-row *matFooterRowDef="['discount-title', 'discount-amount']"></mat-footer-row>
@@ -185,7 +183,7 @@
   </ng-container>
   <ng-container matColumnDef="discount-amount">
     <mat-footer-cell *matFooterCellDef class="bold right-align">{{
-      bs.discountAmount | async | currency: 'INR'
+      bs.discountAmount() | currency: 'INR'
     }}</mat-footer-cell>
   </ng-container>
 
@@ -194,9 +192,7 @@
     <mat-footer-cell *matFooterCellDef class="bold">Tax</mat-footer-cell>
   </ng-container>
   <ng-container matColumnDef="tax-amount">
-    <mat-footer-cell *matFooterCellDef class="bold right-align">{{
-      bs.taxAmount | async | currency: 'INR'
-    }}</mat-footer-cell>
+    <mat-footer-cell *matFooterCellDef class="bold right-align">{{ bs.taxAmount() | currency: 'INR' }}</mat-footer-cell>
   </ng-container>
 
   <mat-footer-row *matFooterRowDef="['amount-title', 'amount-amount']"></mat-footer-row>
@@ -204,9 +200,7 @@
     <mat-footer-cell *matFooterCellDef>Amount</mat-footer-cell>
   </ng-container>
   <ng-container matColumnDef="amount-amount">
-    <mat-footer-cell *matFooterCellDef class="bold right-align">{{
-      bs.amount | async | currency: 'INR'
-    }}</mat-footer-cell>
+    <mat-footer-cell *matFooterCellDef class="bold right-align">{{ bs.amount() | currency: 'INR' }}</mat-footer-cell>
   </ng-container>
 </table>
 
diff --git a/bookie/src/app/sales/bills/bills.component.ts b/bookie/src/app/sales/bills/bills.component.ts
index 1806899..2e4117f 100644
--- a/bookie/src/app/sales/bills/bills.component.ts
+++ b/bookie/src/app/sales/bills/bills.component.ts
@@ -24,7 +24,6 @@ import { QuantityComponent } from '../quantity/quantity.component';
 import { TablesDialogComponent } from '../tables-dialog/tables-dialog.component';
 import { Bill } from './bill';
 import { BillRow } from './bill-row';
-import { BillsDataSource } from './bills-datasource';
 import { Inventory } from './inventory';
 import { Kot } from './kot';
 import { VoucherType } from './voucher-type';
@@ -63,7 +62,36 @@ export class BillsComponent implements OnInit {
 
   updateTable = computed(() => this.bill() !== null && this.voucher() !== null);
 
-  dataSource: BillsDataSource = new BillsDataSource(this.bs.dataObs);
+  dataSource = computed(() => {
+    return this.bs.data().flatMap((k) => {
+      const kotRow: BillRow = new BillRow({ kind: 'kot', kot: k, id: k.id! });
+      const rows: BillRow[] = [];
+      for (const inv of k.inventories) {
+        if (!inv.id) {
+          inv.clientId = inv.clientId || crypto.randomUUID();
+        }
+        rows.push(new BillRow({ kind: 'inv', kot: k, inv, id: `${k.id}-${inv.id || inv.clientId}` }));
+        if (inv.type === 'bundle') {
+          for (const child of inv.children) {
+            if (!child.id) {
+              child.clientId = child.clientId || crypto.randomUUID();
+            }
+            child.parentId = inv.id || inv.clientId;
+            rows.push(
+              new BillRow({
+                kind: 'child',
+                kot: k,
+                parent: inv,
+                inv: child,
+                id: `${k.id}-${child.id || child.clientId}`,
+              }),
+            );
+          }
+        }
+      }
+      return [kotRow, ...rows];
+    });
+  });
 
   billResource = this.voucherService.getFromBill(this.bill);
 
diff --git a/bookie/src/app/sales/home/sales-home.component.ts b/bookie/src/app/sales/home/sales-home.component.ts
index 99f0374..607a54f 100644
--- a/bookie/src/app/sales/home/sales-home.component.ts
+++ b/bookie/src/app/sales/home/sales-home.component.ts
@@ -202,7 +202,7 @@ export class SalesHomeComponent {
     if (!this.receivePaymentAllowed()) {
       return;
     }
-    const amount = this.bs.amount.value;
+    const amount = this.bs.amount();
     const type = this.bs.bill.voucherType;
     this.dialog
       .open(ReceivePaymentComponent, {