diff --git a/Dockerfile b/Dockerfile
index cbb0592..8977f45 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -62,4 +62,4 @@ RUN chmod 777 /app/docker-entrypoint.sh \
     && ln -s /app/docker-entrypoint.sh /
 ENTRYPOINT ["docker-entrypoint.sh"]
 
-CMD ["poetry", "run", "gunicorn", "barker.main:app", "--worker-class", "uvicorn.workers.UvicornWorker", "--config", "/app/gunicorn.conf.py", "--log-config", "/app/logging.conf"]
+CMD ["poetry", "run", "run.sh"]
diff --git a/bookie/src/app/sales/discount/discount-datasource.ts b/bookie/src/app/sales/discount/discount-datasource.ts
index 02aaf14..c22be27 100644
--- a/bookie/src/app/sales/discount/discount-datasource.ts
+++ b/bookie/src/app/sales/discount/discount-datasource.ts
@@ -1,13 +1,13 @@
 import { DataSource } from '@angular/cdk/collections';
-import { Observable, of as observableOf } from 'rxjs';
+import { Observable } from 'rxjs';
 
 export class DiscountDataSource extends DataSource<{ name: string; discount: number }> {
-  constructor(private data: { name: string; discount: number }[]) {
+  constructor(private data: Observable<{ name: string; discount: number }[]>) {
     super();
   }
 
   connect(): Observable<{ name: string; discount: number }[]> {
-    return observableOf(this.data);
+    return this.data;
   }
 
   disconnect() {}
diff --git a/bookie/src/app/sales/discount/discount.component.ts b/bookie/src/app/sales/discount/discount.component.ts
index ee014f3..b42642c 100644
--- a/bookie/src/app/sales/discount/discount.component.ts
+++ b/bookie/src/app/sales/discount/discount.component.ts
@@ -26,7 +26,7 @@ import {
   MatRow,
 } from '@angular/material/table';
 import { round } from 'mathjs';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 import { DiscountDataSource } from './discount-datasource';
 import { DiscountItem } from './discount-item';
@@ -71,7 +71,8 @@ export class DiscountComponent {
     >;
   }>;
 
-  dataSource: DiscountDataSource = new DiscountDataSource([]);
+  public listObservable = new BehaviorSubject<DiscountItem[]>([]);
+  dataSource: DiscountDataSource = new DiscountDataSource(this.listObservable);
 
   displayedColumns = ['name', 'discount'];
 
@@ -91,6 +92,7 @@ export class DiscountComponent {
 
     this.data.subscribe((list: DiscountItem[]) => {
       this.list = list;
+      console.log(list);
       this.form.controls.discounts.clear();
 
       this.list.forEach((x) => {
@@ -104,7 +106,7 @@ export class DiscountComponent {
           }),
         );
       });
-      this.dataSource = new DiscountDataSource(this.list);
+      this.listObservable.next(this.list);
     });
   }
 
diff --git a/bookie/src/app/sales/receive-payment/receive-payment-datasource.ts b/bookie/src/app/sales/receive-payment/receive-payment-datasource.ts
index 11a7ba4..af1f3d5 100644
--- a/bookie/src/app/sales/receive-payment/receive-payment-datasource.ts
+++ b/bookie/src/app/sales/receive-payment/receive-payment-datasource.ts
@@ -1,15 +1,15 @@
 import { DataSource } from '@angular/cdk/collections';
-import { Observable, of as observableOf } from 'rxjs';
+import { Observable } from 'rxjs';
 
 import { ReceivePaymentItem } from '../../core/receive-payment-item';
 
 export class ReceivePaymentDatasource extends DataSource<ReceivePaymentItem> {
-  constructor(private data: ReceivePaymentItem[]) {
+  constructor(private data: Observable<ReceivePaymentItem[]>) {
     super();
   }
 
   connect(): Observable<ReceivePaymentItem[]> {
-    return observableOf(this.data);
+    return this.data;
   }
 
   disconnect() {}
diff --git a/bookie/src/app/sales/receive-payment/receive-payment.component.html b/bookie/src/app/sales/receive-payment/receive-payment.component.html
index fe69215..a38939f 100644
--- a/bookie/src/app/sales/receive-payment/receive-payment.component.html
+++ b/bookie/src/app/sales/receive-payment/receive-payment.component.html
@@ -1,45 +1,41 @@
 <h2 mat-dialog-title>Receive Payment</h2>
 <mat-dialog-content>
   <form [formGroup]="form" class="flex flex-col">
-    @if (this.displayTable) {
-      <mat-table #table [dataSource]="dataSource" formArrayName="amounts">
-        <!-- Name Column -->
-        <ng-container matColumnDef="name">
-          <mat-header-cell *matHeaderCellDef class="bold">Amount</mat-header-cell>
-          <mat-cell *matCellDef="let row; let i = index" (click)="maxAmount(row, i)">{{ row.name }}</mat-cell>
-          <mat-footer-cell *matFooterCellDef class="bold">Balance</mat-footer-cell>
-        </ng-container>
-        <!-- Discount Column -->
-        <ng-container matColumnDef="amount">
-          <mat-header-cell *matHeaderCellDef class="center bold" class="flex-auto">{{
-            amount | currency: 'INR'
-          }}</mat-header-cell>
-          <mat-cell *matCellDef="let row; let i = index" class="center" [formGroupName]="i" class="flex-auto">
-            <mat-form-field>
-              <input matInput type="number" formControlName="amount" autocomplete="off" />
-            </mat-form-field>
-          </mat-cell>
-          <mat-footer-cell *matFooterCellDef class="bold">{{ balance | currency: 'INR' }}</mat-footer-cell>
-        </ng-container>
-        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-        <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
-      </mat-table>
-    }
-    @if (this.displayReason) {
-      <mat-form-field class="flex-auto">
-        <mat-label>Reason</mat-label>
-        <input
-          type="text"
-          matInput
-          #son
-          formControlName="son"
-          autocomplete="off"
-          (focus)="select(son.value) && son.select()"
-          (input)="select(son.value)"
-        />
-      </mat-form-field>
-    }
+    <mat-table #table [dataSource]="dataSource" formArrayName="amounts" [style.visibility]="this.displayTable ? 'visible': 'hidden'">
+      <!-- Name Column -->
+      <ng-container matColumnDef="name">
+        <mat-header-cell *matHeaderCellDef class="bold">Amount</mat-header-cell>
+        <mat-cell *matCellDef="let row; let i = index" (click)="maxAmount(row, i)">{{ row.name }}</mat-cell>
+        <mat-footer-cell *matFooterCellDef class="bold">Balance</mat-footer-cell>
+      </ng-container>
+      <!-- Amount Column -->
+      <ng-container matColumnDef="amount">
+        <mat-header-cell *matHeaderCellDef class="center bold" class="flex-auto">{{
+          amount | currency: 'INR'
+        }}</mat-header-cell>
+        <mat-cell *matCellDef="let row; let i = index" class="center" [formGroupName]="i" class="flex-auto">
+          <mat-form-field>
+            <input matInput type="number" formControlName="amount" autocomplete="off" />
+          </mat-form-field>
+        </mat-cell>
+        <mat-footer-cell *matFooterCellDef class="bold">{{ balance | currency: 'INR' }}</mat-footer-cell>
+      </ng-container>
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+      <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
+    </mat-table>
+    <mat-form-field class="flex-auto" [style.visibility]="this.displayReason ? 'visible': 'hidden'">
+      <mat-label>Reason</mat-label>
+      <input
+        type="text"
+        matInput
+        #son
+        formControlName="son"
+        autocomplete="off"
+        (focus)="select(son.value) && son.select()"
+        (input)="select(son.value)"
+      />
+    </mat-form-field>
   </form>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
diff --git a/bookie/src/app/sales/receive-payment/receive-payment.component.ts b/bookie/src/app/sales/receive-payment/receive-payment.component.ts
index 3322c62..3708ca3 100644
--- a/bookie/src/app/sales/receive-payment/receive-payment.component.ts
+++ b/bookie/src/app/sales/receive-payment/receive-payment.component.ts
@@ -29,7 +29,8 @@ import {
   MatFooterRowDef,
   MatFooterRow,
 } from '@angular/material/table';
-import { distinctUntilChanged, map, tap } from 'rxjs/operators';
+import { BehaviorSubject } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
 
 import { ReceivePaymentItem } from '../../core/receive-payment-item';
 import { SettleOption } from '../../core/settle-option';
@@ -73,6 +74,7 @@ import { ReceivePaymentDatasource } from './receive-payment-datasource';
 export class ReceivePaymentComponent {
   @ViewChild('son', { static: true }) son?: ElementRef;
   choices: ReceivePaymentItem[] = [];
+  choicesSubject = new BehaviorSubject<ReceivePaymentItem[]>([]);
 
   type: VoucherType;
   amount: number;
@@ -90,7 +92,7 @@ export class ReceivePaymentComponent {
     son: FormControl<string>;
   }>;
 
-  dataSource: ReceivePaymentDatasource;
+  dataSource: ReceivePaymentDatasource = new ReceivePaymentDatasource(this.choicesSubject);
 
   displayedColumns = ['name', 'amount'];
 
@@ -113,6 +115,7 @@ export class ReceivePaymentComponent {
     this.balance = data.amount;
     this.displayReason = false;
     this.displayTable = false;
+    this.choicesSubject.subscribe((x) => (this.choices = x));
     this.ser
       .listForType(data.type)
       .pipe(
@@ -123,9 +126,9 @@ export class ReceivePaymentComponent {
         ),
       )
       .subscribe((x) => {
-        this.choices = x;
+        this.choicesSubject.next(x);
         this.form.controls.amounts.clear();
-        this.choices.forEach((y: ReceivePaymentItem) =>
+        x.forEach((y: ReceivePaymentItem) =>
           this.form.controls.amounts.push(
             new FormGroup({
               name: new FormControl<string>(y.name, { nonNullable: true }),
@@ -135,22 +138,19 @@ export class ReceivePaymentComponent {
             }),
           ),
         );
-        this.dataSource = new ReceivePaymentDatasource(this.choices);
-        this.listenToAmountChange();
-        this.balance = this.amount - this.choices.reduce((a, c) => a + c.amount, 0);
+        console.log('re', this.displayReason)
       });
-    this.dataSource = new ReceivePaymentDatasource(this.choices);
-    this.listenToAmountChange();
+    this.form.valueChanges.subscribe((x) => this.listenToAmountChange(x.amounts));
   }
 
-  listenToAmountChange() {
-    const array = this.form.controls.amounts;
-    this.choices.forEach((z, i) =>
-      array.controls[i].valueChanges.pipe(distinctUntilChanged()).subscribe((x) => {
-        (this.choices.find((s) => s.name === x.name) as ReceivePaymentItem).amount = x.amount ?? 0;
-        this.balance = this.amount - this.choices.reduce((a, c) => a + c.amount, 0);
-      }),
-    );
+  listenToAmountChange(amounts?: Partial<{ name: string; amount: number }>[]) {
+    if (!amounts) {
+      return;
+    }
+    amounts.forEach((z, i) => {
+      this.choices[i].amount = z.amount ?? 0;
+    });
+    this.balance = this.amount - this.choices.reduce((a, c) => a + c.amount, 0);
   }
 
   select(reason: string) {