From 88a157274789e7e56da2f84c0b4ee919db82f814 Mon Sep 17 00:00:00 2001
From: Amritanshu <git@tanshu.com>
Date: Fri, 11 Jul 2025 11:30:35 +0000
Subject: [PATCH] Chore: Removed Mat Card from everywhere. Chore: Removed the
 Toaster Service. Chore: Updated to Material Theme 3

---
 bookie/angular.json                           |   2 +-
 bookie/src/app/auth/auth-guard.service.ts     |   4 +-
 .../src/app/auth/login/login.component.html   |  52 ++-
 bookie/src/app/auth/login/login.component.ts  |  18 +-
 .../beer-sale-report.component.html           | 121 ++++---
 .../beer-sale-report.component.ts             |   3 +-
 .../bill-settlement-report.component.html     | 125 ++++---
 .../bill-settlement-report.component.ts       |   3 +-
 .../cashier-report.component.html             | 139 ++++----
 .../cashier-report.component.ts               |  11 +-
 bookie/src/app/core/auth.interceptor.ts       |   4 +-
 bookie/src/app/core/toaster.service.ts        |  15 -
 .../customer-detail.component.html            |  84 +++--
 .../customer-detail.component.ts              |  15 +-
 .../customer-list.component.html              | 134 ++++----
 .../customer-list/customer-list.component.ts  |   3 +-
 .../device-detail.component.html              |  73 ++--
 .../device-detail/device-detail.component.ts  |  16 +-
 .../device-list/device-list.component.html    |  86 +++--
 .../device-list/device-list.component.ts      |   3 +-
 .../discount-report.component.html            | 113 +++---
 .../discount-report.component.ts              |  11 +-
 .../guest-book-detail.component.html          | 143 ++++----
 .../guest-book-detail.component.ts            |  16 +-
 .../guest-book-list.component.html            | 173 +++++-----
 .../guest-book-list.component.sass            |  15 -
 .../guest-book-list.component.ts              |   7 +-
 .../header-footer.component.html              |  51 ++-
 .../header-footer/header-footer.component.ts  |  11 +-
 bookie/src/app/home/home.component.html       |  16 +-
 bookie/src/app/home/home.component.ts         |   2 +-
 .../menu-category-detail.component.html       |  43 ++-
 .../menu-category-detail.component.ts         |  15 +-
 .../menu-category-list.component.html         |  76 ++---
 .../menu-category-list.component.ts           |  11 +-
 .../menu-engineering-report.component.html    | 205 ++++++-----
 .../menu-engineering-report.component.ts      |  11 +-
 .../modifier-category-detail.component.html   | 133 ++++----
 .../modifier-category-detail.component.ts     |  15 +-
 .../modifier-category-list.component.html     | 118 +++----
 .../modifier-category-list.component.ts       |   3 +-
 .../modifier-detail.component.html            |  85 +++--
 .../modifier-detail.component.ts              |  16 +-
 .../modifier-list.component.html              | 142 ++++----
 .../modifier-list/modifier-list.component.ts  |   3 +-
 .../printer-detail.component.html             |  57 ++--
 .../printer-detail.component.ts               |  15 +-
 .../printer-list/printer-list.component.html  |  62 ++--
 .../printer-list/printer-list.component.ts    |   3 +-
 .../product-sale-report.component.html        | 175 +++++-----
 .../product-sale-report.component.ts          |  11 +-
 .../product-updates-report.component.html     |  95 +++---
 .../product-updates-report.component.ts       |   3 +-
 .../product-detail.component.html             | 116 +++----
 .../product-detail.component.ts               |  15 +-
 .../product-list/product-list.component.html  | 194 +++++------
 .../product-list/product-list.component.ts    |  11 +-
 .../regime-detail.component.html              |  61 ++--
 .../regime-detail/regime-detail.component.ts  |  15 +-
 .../regime-list/regime-list.component.html    |  72 ++--
 .../regime-list/regime-list.component.ts      |   3 +-
 .../role-detail/role-detail.component.html    |  47 ++-
 .../role-detail/role-detail.component.ts      |  24 +-
 .../roles/role-list/role-list.component.html  |  64 ++--
 .../roles/role-list/role-list.component.ts    |   3 +-
 .../sale-category-detail.component.html       | 126 ++++---
 .../sale-category-detail.component.ts         |  17 +-
 .../sale-category-list.component.html         |  62 ++--
 .../sale-category-list.component.ts           |   7 +-
 .../sale-report/sale-report.component.html    | 135 ++++----
 .../app/sale-report/sale-report.component.ts  |  11 +-
 .../sales/bill-type/bill-type.component.ts    |   2 +-
 bookie/src/app/sales/bill.service.ts          |   6 +-
 .../src/app/sales/bills/bills.component.html  | 323 +++++++++---------
 bookie/src/app/sales/bills/bills.component.ts |  11 +-
 .../app/sales/home/sales-home.component.html  | 156 +++++----
 .../app/sales/home/sales-home.component.ts    |  30 +-
 .../menu-categories.component.html            |  39 +--
 .../menu-categories.component.ts              |   2 +-
 .../sales/products/products.component.html    |  50 ++-
 .../app/sales/products/products.component.ts  |   2 +-
 .../running-tables.component.html             |  57 ++--
 .../running-tables.component.ts               |   8 +-
 .../tables-dialog/tables-dialog.component.ts  |   2 +-
 .../section-printer.component.html            | 117 +++----
 .../section-printer.component.ts              |  15 +-
 .../section-detail.component.html             |  37 +-
 .../section-detail.component.ts               |  15 +-
 .../section-list/section-list.component.html  |  42 +--
 .../section-list/section-list.component.ts    |   3 +-
 bookie/src/app/settings/settings.component.ts |  11 +-
 .../settle-option-detail.component.html       |  83 +++--
 .../settle-option-detail.component.ts         |  15 +-
 .../settle-option-list.component.html         |  82 +++--
 .../settle-option-list.component.ts           |   7 +-
 .../table-detail/table-detail.component.html  |  79 ++---
 .../table-detail/table-detail.component.ts    |  15 +-
 .../table-list/table-list.component.html      |  87 +++--
 ...omponent.css => table-list.component.sass} |   0
 .../tables/table-list/table-list.component.ts |  14 +-
 .../app/tax-report/tax-report.component.html  | 125 ++++---
 .../app/tax-report/tax-report.component.ts    |   3 +-
 .../tax-detail/tax-detail.component.html      |  77 ++---
 .../taxes/tax-detail/tax-detail.component.ts  |  23 +-
 .../taxes/tax-list/tax-list.component.html    |  72 ++--
 .../app/taxes/tax-list/tax-list.component.ts  |   3 +-
 .../temporal-product-detail.component.html    | 153 ++++-----
 .../temporal-product-detail.component.ts      |  16 +-
 .../temporal-product-list.component.html      | 194 ++++++-----
 .../temporal-product-list.component.ts        |   3 +-
 .../update-product-prices.component.html      | 118 ++++---
 .../update-product-prices.component.ts        |  11 +-
 .../user-detail/user-detail.component.html    |  67 ++--
 .../user-detail/user-detail.component.ts      |  15 +-
 .../users/user-list/user-list.component.html  |  88 +++--
 .../users/user-list/user-list.component.ts    |   3 +-
 bookie/src/styles.sass                        | 101 ++++--
 117 files changed, 2895 insertions(+), 3236 deletions(-)
 delete mode 100644 bookie/src/app/core/toaster.service.ts
 rename bookie/src/app/tables/table-list/{table-list.component.css => table-list.component.sass} (100%)

diff --git a/bookie/angular.json b/bookie/angular.json
index 59d1bd2..16706c3 100644
--- a/bookie/angular.json
+++ b/bookie/angular.json
@@ -27,7 +27,7 @@
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "sass",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["@angular/material/prebuilt-themes/azure-blue.css", "src/styles.sass"],
+            "styles": ["src/styles.sass"],
             "scripts": [],
             "browser": "src/main.ts"
           },
diff --git a/bookie/src/app/auth/auth-guard.service.ts b/bookie/src/app/auth/auth-guard.service.ts
index 9231e11..a3569db 100644
--- a/bookie/src/app/auth/auth-guard.service.ts
+++ b/bookie/src/app/auth/auth-guard.service.ts
@@ -1,7 +1,7 @@
 import { inject } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { CanActivateFn, Router } from '@angular/router';
 
-import { ToasterService } from '../core/toaster.service';
 import { AuthService } from './auth.service';
 
 export const authGuard: CanActivateFn = (route, state) => {
@@ -16,7 +16,7 @@ export const authGuard: CanActivateFn = (route, state) => {
     return false;
   }
   if (permission !== undefined && user.perms.indexOf(permission) === -1) {
-    inject(ToasterService).show('Danger', 'You do not have the permission to access this area.');
+    inject(MatSnackBar).open('You do not have the permission to access this area.', 'Danger');
     return false;
   }
   // logged in so return true
diff --git a/bookie/src/app/auth/login/login.component.html b/bookie/src/app/auth/login/login.component.html
index 50c00c5..7aa39ae 100644
--- a/bookie/src/app/auth/login/login.component.html
+++ b/bookie/src/app/auth/login/login.component.html
@@ -1,29 +1,23 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title>Login</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Username</mat-label>
-          <input matInput #nameElement formControlName="username" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Password</mat-label>
-          <input matInput formControlName="password" [type]="hide ? 'password' : 'text'" (keyup.enter)="login()" />
-          <mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility' : 'visibility_off' }}</mat-icon>
-        </mat-form-field>
-      </div>
-      <mat-divider></mat-divider>
-      @if (unregisteredDevice) {
-        <h2>Sorry, device {{ deviceName }} is not enabled.</h2>
-      }
-    </form>
-  </mat-card-content>
-  <mat-card-actions>
-    <button mat-raised-button (click)="login()" color="primary">Login</button>
-  </mat-card-actions>
-</mat-card>
+<h2>Login</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Username</mat-label>
+      <input matInput #nameElement formControlName="username" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Password</mat-label>
+      <input matInput formControlName="password" [type]="hide ? 'password' : 'text'" (keyup.enter)="login()" />
+      <mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility' : 'visibility_off' }}</mat-icon>
+    </mat-form-field>
+  </div>
+  <mat-divider></mat-divider>
+  @if (unregisteredDevice) {
+    <h2>Sorry, device {{ deviceName }} is not enabled.</h2>
+  }
+</form>
+<div class="row-container">
+  <button mat-raised-button (click)="login()" color="primary">Login</button>
+</div>
diff --git a/bookie/src/app/auth/login/login.component.ts b/bookie/src/app/auth/login/login.component.ts
index 593fc2b..16d85a5 100644
--- a/bookie/src/app/auth/login/login.component.ts
+++ b/bookie/src/app/auth/login/login.component.ts
@@ -1,14 +1,13 @@
 import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 
-import { ToasterService } from '../../core/toaster.service';
 import { CookieService } from '../../shared/cookie.service';
 import { AuthService } from '../auth.service';
 
@@ -16,21 +15,13 @@ import { AuthService } from '../auth.service';
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.css'],
-  imports: [
-    MatButtonModule,
-    MatCardModule,
-    MatDividerModule,
-    MatFormFieldModule,
-    MatIconModule,
-    MatInputModule,
-    ReactiveFormsModule,
-  ],
+  imports: [MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatInputModule, ReactiveFormsModule],
 })
 export class LoginComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
   private auth = inject(AuthService);
   private router = inject(Router);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private cs = inject(CookieService);
   private cd = inject(ChangeDetectorRef);
 
@@ -82,10 +73,9 @@ export class LoginComponent implements OnInit, AfterViewInit {
         if (error.status === 401 && error.error.detail === 'Device is not registered') {
           this.unregisteredDevice = true;
           this.deviceName = this.cs.getCookie('device');
-          console.log(this.deviceName, this.unregisteredDevice);
           this.cd.detectChanges();
         }
-        this.toaster.show('Error', error.error.detail);
+        this.snackBar.open(error.error.detail, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/beer-sale-report/beer-sale-report.component.html b/bookie/src/app/beer-sale-report/beer-sale-report.component.html
index c2abb7f..2bbf9cb 100644
--- a/bookie/src/app/beer-sale-report/beer-sale-report.component.html
+++ b/bookie/src/app/beer-sale-report/beer-sale-report.component.html
@@ -1,65 +1,60 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Beer Sale Report</mat-card-title>
-      <button mat-icon-button (click)="exportCsv()">
-        <mat-icon>save_alt</mat-icon>
-      </button>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto basis-2-5">
-          <mat-label>Start Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="startDate"
-            (focus)="startDate.open()"
-            formControlName="startDate"
-            autocomplete="off"
-          />
-          <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
-          <mat-datepicker #startDate></mat-datepicker>
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-2-5">
-          <mat-label>Finish Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="finishDate"
-            (focus)="finishDate.open()"
-            formControlName="finishDate"
-            autocomplete="off"
-          />
-          <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
-          <mat-datepicker #finishDate></mat-datepicker>
-        </mat-form-field>
-        <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
-      </div>
-      <div class="row-container sm:max-lg:flex-col">
-        <mat-checkbox class="flex-auto" formControlName="regular">Regular</mat-checkbox>
-        <mat-checkbox class="flex-auto" formControlName="happy">Happy Hour</mat-checkbox>
-        <mat-checkbox class="flex-auto" formControlName="staff">Staff Consumption</mat-checkbox>
-        <mat-checkbox class="flex-auto" formControlName="nc">No Charge</mat-checkbox>
-      </div>
-    </form>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Date Column -->
-      <ng-container matColumnDef="date">
-        <mat-header-cell *matHeaderCellDef>Time</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.date }}</mat-cell>
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Beer Sale Report</span>
+  <button mat-icon-button (click)="exportCsv()">
+    <mat-icon>save_alt</mat-icon>
+  </button>
+</h2>
 
-      <!-- Name Column -->
-      @for (col of info.headers; track col) {
-        <ng-container matColumnDef="{{ col }}">
-          <mat-header-cell *matHeaderCellDef class="right">{{ col }}</mat-header-cell>
-          <mat-cell *matCellDef="let row" class="right">{{ row[col] }}</mat-cell>
-        </ng-container>
-      }
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container sm:max-lg:flex-col">
+    <mat-form-field class="flex-auto basis-2-5">
+      <mat-label>Start Date</mat-label>
+      <input
+        matInput
+        [matDatepicker]="startDate"
+        (focus)="startDate.open()"
+        formControlName="startDate"
+        autocomplete="off"
+      />
+      <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
+      <mat-datepicker #startDate></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field class="flex-auto basis-2-5">
+      <mat-label>Finish Date</mat-label>
+      <input
+        matInput
+        [matDatepicker]="finishDate"
+        (focus)="finishDate.open()"
+        formControlName="finishDate"
+        autocomplete="off"
+      />
+      <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
+      <mat-datepicker #finishDate></mat-datepicker>
+    </mat-form-field>
+    <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
+  </div>
+  <div class="row-container sm:max-lg:flex-col">
+    <mat-checkbox class="flex-auto" formControlName="regular">Regular</mat-checkbox>
+    <mat-checkbox class="flex-auto" formControlName="happy">Happy Hour</mat-checkbox>
+    <mat-checkbox class="flex-auto" formControlName="staff">Staff Consumption</mat-checkbox>
+    <mat-checkbox class="flex-auto" formControlName="nc">No Charge</mat-checkbox>
+  </div>
+</form>
+<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Date Column -->
+  <ng-container matColumnDef="date">
+    <mat-header-cell *matHeaderCellDef>Time</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.date }}</mat-cell>
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <!-- Name Column -->
+  @for (col of info.headers; track col) {
+    <ng-container matColumnDef="{{ col }}">
+      <mat-header-cell *matHeaderCellDef class="right">{{ col }}</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row[col] }}</mat-cell>
+    </ng-container>
+  }
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/beer-sale-report/beer-sale-report.component.ts b/bookie/src/app/beer-sale-report/beer-sale-report.component.ts
index ba7b019..1ea0235 100644
--- a/bookie/src/app/beer-sale-report/beer-sale-report.component.ts
+++ b/bookie/src/app/beer-sale-report/beer-sale-report.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnInit, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -22,7 +21,7 @@ import { BeerSaleReportDataSource } from './beer-sale-report-datasource';
   styleUrls: ['./beer-sale-report.component.css'],
   imports: [
     MatButtonModule,
-    MatCardModule,
+
     MatCheckboxModule,
     MatDatepickerModule,
     MatFormFieldModule,
diff --git a/bookie/src/app/bill-settlement-report/bill-settlement-report.component.html b/bookie/src/app/bill-settlement-report/bill-settlement-report.component.html
index 4917ec0..fead5c9 100644
--- a/bookie/src/app/bill-settlement-report/bill-settlement-report.component.html
+++ b/bookie/src/app/bill-settlement-report/bill-settlement-report.component.html
@@ -1,69 +1,64 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Bill Settlement Report</mat-card-title>
-      <button mat-icon-button (click)="exportCsv()">
-        <mat-icon>save_alt</mat-icon>
-      </button>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto basis-2-5">
-          <mat-label>Start Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="startDate"
-            (focus)="startDate.open()"
-            formControlName="startDate"
-            autocomplete="off"
-          />
-          <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
-          <mat-datepicker #startDate></mat-datepicker>
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-2-5">
-          <mat-label>Finish Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="finishDate"
-            (focus)="finishDate.open()"
-            formControlName="finishDate"
-            autocomplete="off"
-          />
-          <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
-          <mat-datepicker #finishDate></mat-datepicker>
-        </mat-form-field>
-        <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
-      </div>
-    </form>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Date Column -->
-      <ng-container matColumnDef="date">
-        <mat-header-cell *matHeaderCellDef>Time</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.date | localTime }}</mat-cell>
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Bill Settlement Report</span>
+  <button mat-icon-button (click)="exportCsv()">
+    <mat-icon>save_alt</mat-icon>
+  </button>
+</h2>
 
-      <!-- Bill ID Column -->
-      <ng-container matColumnDef="billId">
-        <mat-header-cell *matHeaderCellDef class="right">Bill ID</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{ row.billId }}</mat-cell>
-      </ng-container>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container sm:max-lg:flex-col">
+    <mat-form-field class="flex-auto basis-2-5">
+      <mat-label>Start Date</mat-label>
+      <input
+        matInput
+        [matDatepicker]="startDate"
+        (focus)="startDate.open()"
+        formControlName="startDate"
+        autocomplete="off"
+      />
+      <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
+      <mat-datepicker #startDate></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field class="flex-auto basis-2-5">
+      <mat-label>Finish Date</mat-label>
+      <input
+        matInput
+        [matDatepicker]="finishDate"
+        (focus)="finishDate.open()"
+        formControlName="finishDate"
+        autocomplete="off"
+      />
+      <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
+      <mat-datepicker #finishDate></mat-datepicker>
+    </mat-form-field>
+    <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
+  </div>
+</form>
+<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Date Column -->
+  <ng-container matColumnDef="date">
+    <mat-header-cell *matHeaderCellDef>Time</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.date | localTime }}</mat-cell>
+  </ng-container>
 
-      <!-- Amount Column -->
-      <ng-container matColumnDef="amount">
-        <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{ row.amount | number: '1.2-2' }}</mat-cell>
-      </ng-container>
+  <!-- Bill ID Column -->
+  <ng-container matColumnDef="billId">
+    <mat-header-cell *matHeaderCellDef class="right">Bill ID</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right">{{ row.billId }}</mat-cell>
+  </ng-container>
 
-      <!-- Settlement Column -->
-      <ng-container matColumnDef="settlement">
-        <mat-header-cell *matHeaderCellDef class="right">Settlement</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{ row.settlement }}</mat-cell>
-      </ng-container>
+  <!-- Amount Column -->
+  <ng-container matColumnDef="amount">
+    <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right">{{ row.amount | number: '1.2-2' }}</mat-cell>
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <!-- Settlement Column -->
+  <ng-container matColumnDef="settlement">
+    <mat-header-cell *matHeaderCellDef class="right">Settlement</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right">{{ row.settlement }}</mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/bill-settlement-report/bill-settlement-report.component.ts b/bookie/src/app/bill-settlement-report/bill-settlement-report.component.ts
index ebbada4..b000a7f 100644
--- a/bookie/src/app/bill-settlement-report/bill-settlement-report.component.ts
+++ b/bookie/src/app/bill-settlement-report/bill-settlement-report.component.ts
@@ -2,7 +2,6 @@ import { DecimalPipe } from '@angular/common';
 import { Component, OnInit, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -24,7 +23,7 @@ import { BillSettlementReportDataSource } from './bill-settlement-report-datasou
     DecimalPipe,
     LocalTimePipe,
     MatButtonModule,
-    MatCardModule,
+
     MatDatepickerModule,
     MatFormFieldModule,
     MatIconModule,
diff --git a/bookie/src/app/cashier-report/cashier-report.component.html b/bookie/src/app/cashier-report/cashier-report.component.html
index 3183157..84d7288 100644
--- a/bookie/src/app/cashier-report/cashier-report.component.html
+++ b/bookie/src/app/cashier-report/cashier-report.component.html
@@ -1,73 +1,68 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Cashier Report</mat-card-title>
-      <span class="spacer"></span>
-      <button mat-icon-button [disabled]="!info.cashier.id" (click)="exportCsv()">
-        <mat-icon>save_alt</mat-icon>
-      </button>
-      <button mat-icon-button [disabled]="!info.cashier.id" (click)="print()">
-        <mat-icon>print</mat-icon>
-      </button>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto">
-          <mat-label>Start Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="startDate"
-            (focus)="startDate.open()"
-            formControlName="startDate"
-            autocomplete="off"
-          />
-          <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
-          <mat-datepicker #startDate></mat-datepicker>
-        </mat-form-field>
-        <mat-form-field class="flex-auto">
-          <mat-label>Finish Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="finishDate"
-            (focus)="finishDate.open()"
-            formControlName="finishDate"
-            autocomplete="off"
-          />
-          <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
-          <mat-datepicker #finishDate></mat-datepicker>
-        </mat-form-field>
-      </div>
-      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto basis-4-5">
-          <mat-label>Cashier</mat-label>
-          <mat-select formControlName="cashier">
-            <mat-option>-- Cashier --</mat-option>
-            @for (ac of activeCashiers; track ac) {
-              <mat-option [value]="ac.id">
-                {{ ac.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-        <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
-      </div>
-    </form>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Cashier Report</span>
+  <span class="spacer"></span>
+  <button mat-icon-button [disabled]="!info.cashier.id" (click)="exportCsv()">
+    <mat-icon>save_alt</mat-icon>
+  </button>
+  <button mat-icon-button [disabled]="!info.cashier.id" (click)="print()">
+    <mat-icon>print</mat-icon>
+  </button>
+</h2>
 
-      <!-- Amount Column -->
-      <ng-container matColumnDef="amount">
-        <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
-      </ng-container>
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container sm:max-lg:flex-col">
+    <mat-form-field class="flex-auto">
+      <mat-label>Start Date</mat-label>
+      <input
+        matInput
+        [matDatepicker]="startDate"
+        (focus)="startDate.open()"
+        formControlName="startDate"
+        autocomplete="off"
+      />
+      <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
+      <mat-datepicker #startDate></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field class="flex-auto">
+      <mat-label>Finish Date</mat-label>
+      <input
+        matInput
+        [matDatepicker]="finishDate"
+        (focus)="finishDate.open()"
+        formControlName="finishDate"
+        autocomplete="off"
+      />
+      <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
+      <mat-datepicker #finishDate></mat-datepicker>
+    </mat-form-field>
+  </div>
+  <div class="row-container sm:max-lg:flex-col">
+    <mat-form-field class="flex-auto basis-4-5">
+      <mat-label>Cashier</mat-label>
+      <mat-select formControlName="cashier">
+        <mat-option>-- Cashier --</mat-option>
+        @for (ac of activeCashiers; track ac) {
+          <mat-option [value]="ac.id">
+            {{ ac.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+    <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
+  </div>
+</form>
+<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
+  </ng-container>
+
+  <!-- Amount Column -->
+  <ng-container matColumnDef="amount">
+    <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
+  </ng-container>
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/cashier-report/cashier-report.component.ts b/bookie/src/app/cashier-report/cashier-report.component.ts
index c48eefc..d48e7a3 100644
--- a/bookie/src/app/cashier-report/cashier-report.component.ts
+++ b/bookie/src/app/cashier-report/cashier-report.component.ts
@@ -2,18 +2,17 @@ import { CurrencyPipe } from '@angular/common';
 import { Component, OnInit, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import moment from 'moment';
 
-import { ToasterService } from '../core/toaster.service';
 import { User } from '../core/user';
 import { ToCsvService } from '../shared/to-csv.service';
 import { CashierReport } from './cashier-report';
@@ -27,7 +26,7 @@ import { CashierReportService } from './cashier-report.service';
   imports: [
     CurrencyPipe,
     MatButtonModule,
-    MatCardModule,
+
     MatDatepickerModule,
     MatFormFieldModule,
     MatIconModule,
@@ -42,7 +41,7 @@ export class CashierReportComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(CashierReportService);
 
   activeCashiers: User[] = [];
@@ -97,10 +96,10 @@ export class CashierReportComponent implements OnInit {
   print() {
     this.ser.print(this.info.cashier.id as string, this.info.startDate, this.info.finishDate).subscribe({
       next: () => {
-        this.toaster.show('', 'Successfully Printed');
+        this.snackBar.open('Successfully Printed', '');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/core/auth.interceptor.ts b/bookie/src/app/core/auth.interceptor.ts
index 1b7d2bd..c3cba7a 100644
--- a/bookie/src/app/core/auth.interceptor.ts
+++ b/bookie/src/app/core/auth.interceptor.ts
@@ -1,13 +1,13 @@
 import { HttpInterceptorFn } from '@angular/common/http';
 import { inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 import { throwError } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 
 import { AuthService } from '../auth/auth.service';
 import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
-import { ToasterService } from './toaster.service';
 
 export const authInterceptor: HttpInterceptorFn = (req, next) => {
   return next(req).pipe(
@@ -30,7 +30,7 @@ export const authInterceptor: HttpInterceptorFn = (req, next) => {
       }
       // auto logout if 401 response returned from api
       inject(AuthService).logout();
-      inject(ToasterService).show('Danger', 'User has been logged out');
+      inject(MatSnackBar).open('User has been logged out', 'Danger');
       const dialogRef = inject(MatDialog).open(ConfirmDialogComponent, {
         width: '250px',
         data: {
diff --git a/bookie/src/app/core/toaster.service.ts b/bookie/src/app/core/toaster.service.ts
deleted file mode 100644
index a93d12c..0000000
--- a/bookie/src/app/core/toaster.service.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Injectable, inject } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class ToasterService {
-  private snackBar = inject(MatSnackBar);
-
-  show(type: string, msg: string) {
-    this.snackBar.open(msg, type, {
-      duration: 3000,
-    });
-  }
-}
diff --git a/bookie/src/app/customers/customer-detail/customer-detail.component.html b/bookie/src/app/customers/customer-detail/customer-detail.component.html
index 1384cb2..923de99 100644
--- a/bookie/src/app/customers/customer-detail/customer-detail.component.html
+++ b/bookie/src/app/customers/customer-detail/customer-detail.component.html
@@ -1,45 +1,39 @@
-<mat-card class="lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Customer</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row">
-        <mat-form-field class="flex-auto">
-          <mat-label>Name</mat-label>
-          <input matInput #nameElement formControlName="name" />
-        </mat-form-field>
-      </div>
-      <div class="flex flex-row">
-        <mat-form-field class="flex-auto">
-          <mat-label>Phone</mat-label>
-          <input matInput formControlName="phone" />
-        </mat-form-field>
-      </div>
-      <div class="flex flex-row">
-        <mat-form-field class="flex-auto">
-          <mat-label>Address</mat-label>
-          <textarea matInput formControlName="address"> </textarea>
-        </mat-form-field>
-      </div>
-      <div class="flex flex-row">
-        <mat-checkbox formControlName="printInBill">Print in Bill?</mat-checkbox>
-      </div>
-      <mat-divider></mat-divider>
-      <div formArrayName="discounts" class="discount-grid">
-        @for (r of item.discounts; track r; let i = $index) {
-          <mat-form-field [formGroupName]="i">
-            <mat-label>Discount on {{ r.name }}</mat-label>
-            <input matInput formControlName="discount" />
-            <span matSuffix>%</span>
-            <mat-hint>Max {{ r.limit | percent: '1.2-2' }}</mat-hint>
-          </mat-form-field>
-        }
-      </div>
-    </form>
-  </mat-card-content>
-  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-  </mat-card-actions>
-</mat-card>
+<h2>Customer</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="flex flex-row">
+    <mat-form-field class="flex-auto">
+      <mat-label>Name</mat-label>
+      <input matInput #nameElement formControlName="name" />
+    </mat-form-field>
+  </div>
+  <div class="flex flex-row">
+    <mat-form-field class="flex-auto">
+      <mat-label>Phone</mat-label>
+      <input matInput formControlName="phone" />
+    </mat-form-field>
+  </div>
+  <div class="flex flex-row">
+    <mat-form-field class="flex-auto">
+      <mat-label>Address</mat-label>
+      <textarea matInput formControlName="address"> </textarea>
+    </mat-form-field>
+  </div>
+  <div class="flex flex-row">
+    <mat-checkbox formControlName="printInBill">Print in Bill?</mat-checkbox>
+  </div>
+  <mat-divider></mat-divider>
+  <div formArrayName="discounts" class="discount-grid">
+    @for (r of item.discounts; track r; let i = $index) {
+      <mat-form-field [formGroupName]="i">
+        <mat-label>Discount on {{ r.name }}</mat-label>
+        <input matInput formControlName="discount" />
+        <span matSuffix>%</span>
+        <mat-hint>Max {{ r.limit | percent: '1.2-2' }}</mat-hint>
+      </mat-form-field>
+    }
+  </div>
+</form>
+<div class="row-container">
+  <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
+  <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+</div>
diff --git a/bookie/src/app/customers/customer-detail/customer-detail.component.ts b/bookie/src/app/customers/customer-detail/customer-detail.component.ts
index d75b8b1..b658da9 100644
--- a/bookie/src/app/customers/customer-detail/customer-detail.component.ts
+++ b/bookie/src/app/customers/customer-detail/customer-detail.component.ts
@@ -2,17 +2,16 @@ import { PercentPipe } from '@angular/common';
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 import { round } from 'mathjs';
 
 import { Customer } from '../../core/customer';
-import { ToasterService } from '../../core/toaster.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { CustomerService } from '../customer.service';
 
@@ -22,7 +21,7 @@ import { CustomerService } from '../customer.service';
   styleUrls: ['./customer-detail.component.sass'],
   imports: [
     MatButtonModule,
-    MatCardModule,
+
     MatCheckboxModule,
     MatDividerModule,
     MatFormFieldModule,
@@ -34,7 +33,7 @@ import { CustomerService } from '../customer.service';
 export class CustomerDetailComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private dialog = inject(MatDialog);
   private ser = inject(CustomerService);
 
@@ -100,11 +99,11 @@ export class CustomerDetailComponent implements OnInit, AfterViewInit {
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/customers');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
@@ -112,11 +111,11 @@ export class CustomerDetailComponent implements OnInit, AfterViewInit {
   delete() {
     this.ser.delete(this.item.id as string).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/customers');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/customers/customer-list/customer-list.component.html b/bookie/src/app/customers/customer-list/customer-list.component.html
index 66e7b16..75573cb 100644
--- a/bookie/src/app/customers/customer-list/customer-list.component.html
+++ b/bookie/src/app/customers/customer-list/customer-list.component.html
@@ -1,71 +1,65 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Customers</mat-card-title>
-      <a mat-button [routerLink]="['/customers', 'new']">
-        <mat-icon>add_box</mat-icon>
-        Add
-      </a>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row">
-        <mat-form-field class="flex-auto">
-          <mat-label>Filter</mat-label>
-          <input type="text" matInput #filterElement formControlName="filter" autocomplete="off" />
-        </mat-form-field>
-      </div>
-    </form>
-    <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          ><a [routerLink]="['/customers', row.id]">{{ row.name }}</a></mat-cell
-        >
-      </ng-container>
-
-      <!-- Phone Column -->
-      <ng-container matColumnDef="phone">
-        <mat-header-cell *matHeaderCellDef mat-sort-header>Phone</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.phone }}</mat-cell>
-      </ng-container>
-
-      <!-- Address Column -->
-      <ng-container matColumnDef="address">
-        <mat-header-cell *matHeaderCellDef mat-sort-header>Address</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.address }}</mat-cell>
-      </ng-container>
-
-      <!-- Print In Bill Column -->
-      <ng-container matColumnDef="printInBill">
-        <mat-header-cell *matHeaderCellDef mat-sort-header>Print in Bill</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.printInBill }}</mat-cell>
-      </ng-container>
-
-      <!-- Discounts Column -->
-      <ng-container matColumnDef="discounts">
-        <mat-header-cell *matHeaderCellDef>Discounts</mat-header-cell>
-        <mat-cell *matCellDef="let row">
-          <ul>
-            @for (discount of row.discounts; track discount) {
-              <li>{{ discount.name }} - {{ discount.discount | percent: '1.2-2' }}</li>
-            }
-          </ul>
-        </mat-cell>
-      </ng-container>
-
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-    <mat-paginator
-      #paginator
-      [length]="dataSource.data.total"
-      [pageIndex]="0"
-      [pageSize]="50"
-      [pageSizeOptions]="[25, 50, 100, 250, 5000]"
+<h2 class="row-container space-between">
+  <span>Customers</span>
+  <a mat-button [routerLink]="['/customers', 'new']">
+    <mat-icon>add_box</mat-icon>
+    Add
+  </a>
+</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="flex flex-row">
+    <mat-form-field class="flex-auto">
+      <mat-label>Filter</mat-label>
+      <input type="text" matInput #filterElement formControlName="filter" autocomplete="off" />
+    </mat-form-field>
+  </div>
+</form>
+<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      ><a [routerLink]="['/customers', row.id]">{{ row.name }}</a></mat-cell
     >
-    </mat-paginator>
-  </mat-card-content>
-</mat-card>
+  </ng-container>
+
+  <!-- Phone Column -->
+  <ng-container matColumnDef="phone">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>Phone</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.phone }}</mat-cell>
+  </ng-container>
+
+  <!-- Address Column -->
+  <ng-container matColumnDef="address">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>Address</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.address }}</mat-cell>
+  </ng-container>
+
+  <!-- Print In Bill Column -->
+  <ng-container matColumnDef="printInBill">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>Print in Bill</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.printInBill }}</mat-cell>
+  </ng-container>
+
+  <!-- Discounts Column -->
+  <ng-container matColumnDef="discounts">
+    <mat-header-cell *matHeaderCellDef>Discounts</mat-header-cell>
+    <mat-cell *matCellDef="let row">
+      <ul>
+        @for (discount of row.discounts; track discount) {
+          <li>{{ discount.name }} - {{ discount.discount | percent: '1.2-2' }}</li>
+        }
+      </ul>
+    </mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
+<mat-paginator
+  #paginator
+  [length]="dataSource.data.total"
+  [pageIndex]="0"
+  [pageSize]="50"
+  [pageSizeOptions]="[25, 50, 100, 250, 5000]"
+>
+</mat-paginator>
diff --git a/bookie/src/app/customers/customer-list/customer-list.component.ts b/bookie/src/app/customers/customer-list/customer-list.component.ts
index 2dda4e7..28c1354 100644
--- a/bookie/src/app/customers/customer-list/customer-list.component.ts
+++ b/bookie/src/app/customers/customer-list/customer-list.component.ts
@@ -2,7 +2,6 @@ import { PercentPipe } from '@angular/common';
 import { ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild, inject, AfterViewInit } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
@@ -21,7 +20,7 @@ import { CustomerListDatasource } from './customer-list-datasource';
   styleUrls: ['./customer-list.component.css'],
   imports: [
     MatButtonModule,
-    MatCardModule,
+
     MatIconModule,
     MatTableModule,
     PercentPipe,
diff --git a/bookie/src/app/devices/device-detail/device-detail.component.html b/bookie/src/app/devices/device-detail/device-detail.component.html
index bc5cacd..cde5da3 100644
--- a/bookie/src/app/devices/device-detail/device-detail.component.html
+++ b/bookie/src/app/devices/device-detail/device-detail.component.html
@@ -1,39 +1,34 @@
-<mat-card class="flex-auto lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Device</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row">
-        <mat-form-field class="flex-auto">
-          <mat-label>Name</mat-label>
-          <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
-        </mat-form-field>
-      </div>
-      <div class="flex flex-row">
-        <mat-form-field class="flex-auto">
-          <mat-label>Section</mat-label>
-          <mat-select formControlName="section">
-            @for (s of sections; track s) {
-              <mat-option [value]="s.id">
-                {{ s.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-      </div>
-      <div class="flex flex-row">
-        <mat-checkbox formControlName="enabled" class="flex-auto">Enabled?</mat-checkbox>
-      </div>
-    </form>
-  </mat-card-content>
-  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
-    @if (!!item.id) {
-      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-    }
-  </mat-card-actions>
-  <mat-card-subtitle>
-    Created on <strong>{{ item.creationDate | localTime }}</strong>
-  </mat-card-subtitle>
-</mat-card>
+<h2>Device</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="flex flex-row">
+    <mat-form-field class="flex-auto">
+      <mat-label>Name</mat-label>
+      <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
+    </mat-form-field>
+  </div>
+  <div class="flex flex-row">
+    <mat-form-field class="flex-auto">
+      <mat-label>Section</mat-label>
+      <mat-select formControlName="section">
+        @for (s of sections; track s) {
+          <mat-option [value]="s.id">
+            {{ s.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+  <div class="flex flex-row">
+    <mat-checkbox formControlName="enabled" class="flex-auto">Enabled?</mat-checkbox>
+  </div>
+</form>
+<div class="row-container space-between">
+  <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
+  @if (!!item.id) {
+    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  }
+  <div class="spacer"></div>
+  <span
+    >Created on <strong>{{ item.creationDate | localTime }}</strong></span
+  >
+</div>
diff --git a/bookie/src/app/devices/device-detail/device-detail.component.ts b/bookie/src/app/devices/device-detail/device-detail.component.ts
index 766a28d..bf4aaba 100644
--- a/bookie/src/app/devices/device-detail/device-detail.component.ts
+++ b/bookie/src/app/devices/device-detail/device-detail.component.ts
@@ -1,18 +1,17 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { Device } from '../../core/device';
 import { Section } from '../../core/section';
-import { ToasterService } from '../../core/toaster.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { LocalTimePipe } from '../../shared/local-time.pipe';
 import { DeviceService } from '../device.service';
@@ -24,10 +23,11 @@ import { DeviceService } from '../device.service';
   imports: [
     LocalTimePipe,
     MatButtonModule,
-    MatCardModule,
+
     MatCheckboxModule,
     MatFormFieldModule,
     MatInputModule,
+
     MatOptionModule,
     MatSelectModule,
     ReactiveFormsModule,
@@ -37,7 +37,7 @@ export class DeviceDetailComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(DeviceService);
 
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
@@ -87,11 +87,11 @@ export class DeviceDetailComponent implements OnInit, AfterViewInit {
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/devices');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
@@ -99,11 +99,11 @@ export class DeviceDetailComponent implements OnInit, AfterViewInit {
   delete() {
     this.ser.delete(this.item.id as string).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/devices');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/devices/device-list/device-list.component.html b/bookie/src/app/devices/device-list/device-list.component.html
index 88b9bc3..2455214 100644
--- a/bookie/src/app/devices/device-list/device-list.component.html
+++ b/bookie/src/app/devices/device-list/device-list.component.html
@@ -1,51 +1,45 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Devices</mat-card-title>
-      <a mat-button [routerLink]="['/devices', 'new']">
-        <mat-icon>add_box</mat-icon>
-        Add
-      </a>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          ><a [routerLink]="['/devices', row.id]">{{ row.name }}</a></mat-cell
-        >
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Devices</span>
+  <a mat-button [routerLink]="['/devices', 'new']">
+    <mat-icon>add_box</mat-icon>
+    Add
+  </a>
+</h2>
+<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      ><a [routerLink]="['/devices', row.id]">{{ row.name }}</a></mat-cell
+    >
+  </ng-container>
 
-      <!-- Section Column -->
-      <ng-container matColumnDef="section">
-        <mat-header-cell *matHeaderCellDef>Section</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.section.name }}</mat-cell>
-      </ng-container>
+  <!-- Section Column -->
+  <ng-container matColumnDef="section">
+    <mat-header-cell *matHeaderCellDef>Section</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.section.name }}</mat-cell>
+  </ng-container>
 
-      <!-- Section Column -->
-      <ng-container matColumnDef="enabled">
-        <mat-header-cell *matHeaderCellDef>Enabled</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.enabled }}</mat-cell>
-      </ng-container>
+  <!-- Section Column -->
+  <ng-container matColumnDef="enabled">
+    <mat-header-cell *matHeaderCellDef>Enabled</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.enabled }}</mat-cell>
+  </ng-container>
 
-      <!-- Creation Date Column -->
-      <ng-container matColumnDef="creationDate">
-        <mat-header-cell *matHeaderCellDef>Created</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.creationDate | localTime }}</mat-cell>
-      </ng-container>
+  <!-- Creation Date Column -->
+  <ng-container matColumnDef="creationDate">
+    <mat-header-cell *matHeaderCellDef>Created</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.creationDate | localTime }}</mat-cell>
+  </ng-container>
 
-      <!-- Last Login Column -->
-      <ng-container matColumnDef="last">
-        <mat-header-cell *matHeaderCellDef>Last Login</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          >{{ row.lastUser }} &#64; {{ row.lastDate ? (row.lastDate | localTime) : 'Never' }}</mat-cell
-        >
-      </ng-container>
+  <!-- Last Login Column -->
+  <ng-container matColumnDef="last">
+    <mat-header-cell *matHeaderCellDef>Last Login</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      >{{ row.lastUser }} &#64; {{ row.lastDate ? (row.lastDate | localTime) : 'Never' }}</mat-cell
+    >
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/devices/device-list/device-list.component.ts b/bookie/src/app/devices/device-list/device-list.component.ts
index 3881a41..5dd73f8 100644
--- a/bookie/src/app/devices/device-list/device-list.component.ts
+++ b/bookie/src/app/devices/device-list/device-list.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnInit, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, RouterLink } from '@angular/router';
@@ -13,7 +12,7 @@ import { DeviceListDataSource } from './device-list-datasource';
   selector: 'app-device-list',
   templateUrl: './device-list.component.html',
   styleUrls: ['./device-list.component.css'],
-  imports: [LocalTimePipe, MatButtonModule, MatCardModule, MatIconModule, MatTableModule, RouterLink],
+  imports: [LocalTimePipe, MatButtonModule, MatIconModule, MatTableModule, RouterLink],
 })
 export class DeviceListComponent implements OnInit {
   private route = inject(ActivatedRoute);
diff --git a/bookie/src/app/discount-report/discount-report.component.html b/bookie/src/app/discount-report/discount-report.component.html
index 55ec460..a7b757a 100644
--- a/bookie/src/app/discount-report/discount-report.component.html
+++ b/bookie/src/app/discount-report/discount-report.component.html
@@ -1,60 +1,55 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Discount Report</mat-card-title>
-      <span class="spacer"></span>
-      <button mat-icon-button (click)="exportCsv()">
-        <mat-icon>save_alt</mat-icon>
-      </button>
-      <button mat-icon-button (click)="print()">
-        <mat-icon>print</mat-icon>
-      </button>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto basis-2-5">
-          <mat-label>Start Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="startDate"
-            (focus)="startDate.open()"
-            formControlName="startDate"
-            autocomplete="off"
-          />
-          <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
-          <mat-datepicker #startDate></mat-datepicker>
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-2-5">
-          <mat-label>Finish Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="finishDate"
-            (focus)="finishDate.open()"
-            formControlName="finishDate"
-            autocomplete="off"
-          />
-          <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
-          <mat-datepicker #finishDate></mat-datepicker>
-        </mat-form-field>
-        <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
-      </div>
-    </form>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Discount Report</span>
+  <span class="spacer"></span>
+  <button mat-icon-button (click)="exportCsv()">
+    <mat-icon>save_alt</mat-icon>
+  </button>
+  <button mat-icon-button (click)="print()">
+    <mat-icon>print</mat-icon>
+  </button>
+</h2>
 
-      <!-- Amount Column -->
-      <ng-container matColumnDef="amount">
-        <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
-      </ng-container>
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container sm:max-lg:flex-col">
+    <mat-form-field class="flex-auto basis-2-5">
+      <mat-label>Start Date</mat-label>
+      <input
+        matInput
+        [matDatepicker]="startDate"
+        (focus)="startDate.open()"
+        formControlName="startDate"
+        autocomplete="off"
+      />
+      <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
+      <mat-datepicker #startDate></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field class="flex-auto basis-2-5">
+      <mat-label>Finish Date</mat-label>
+      <input
+        matInput
+        [matDatepicker]="finishDate"
+        (focus)="finishDate.open()"
+        formControlName="finishDate"
+        autocomplete="off"
+      />
+      <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
+      <mat-datepicker #finishDate></mat-datepicker>
+    </mat-form-field>
+    <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
+  </div>
+</form>
+<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
+  </ng-container>
+
+  <!-- Amount Column -->
+  <ng-container matColumnDef="amount">
+    <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
+  </ng-container>
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/discount-report/discount-report.component.ts b/bookie/src/app/discount-report/discount-report.component.ts
index 6879d26..2828ab3 100644
--- a/bookie/src/app/discount-report/discount-report.component.ts
+++ b/bookie/src/app/discount-report/discount-report.component.ts
@@ -2,16 +2,15 @@ import { CurrencyPipe } from '@angular/common';
 import { Component, OnInit, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import moment from 'moment';
 
-import { ToasterService } from '../core/toaster.service';
 import { ToCsvService } from '../shared/to-csv.service';
 import { DiscountReport } from './discount-report';
 import { DiscountReportDataSource } from './discount-report-datasource';
@@ -24,7 +23,7 @@ import { DiscountReportService } from './discount-report.service';
   imports: [
     CurrencyPipe,
     MatButtonModule,
-    MatCardModule,
+
     MatDatepickerModule,
     MatFormFieldModule,
     MatIconModule,
@@ -37,7 +36,7 @@ export class DiscountReportComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(DiscountReportService);
 
   info: DiscountReport = new DiscountReport();
@@ -92,10 +91,10 @@ export class DiscountReportComponent implements OnInit {
   print() {
     this.ser.print(this.info.startDate, this.info.finishDate).subscribe({
       next: () => {
-        this.toaster.show('', 'Successfully Printed');
+        this.snackBar.open('Successfully Printed', '');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.html b/bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.html
index 868bde3..c936cf1 100644
--- a/bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.html
+++ b/bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.html
@@ -1,74 +1,69 @@
-<mat-card class="lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Guest Details</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Name</mat-label>
-          <input matInput #name formControlName="name" />
-          @if (form.controls['name'].hasError('required')) {
-            <mat-error> Name is <strong>required</strong> </mat-error>
-          }
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Phone</mat-label>
-          <input matInput #phone type="text" formControlName="phone" [matAutocomplete]="auto" autocomplete="off" />
-        </mat-form-field>
-        <mat-autocomplete
-          #auto="matAutocomplete"
-          autoActiveFirstOption
-          [displayWith]="displayFn"
-          (optionSelected)="selected($event)"
-        >
-          @for (customer of customers | async; track customer) {
-            <mat-option [value]="customer">{{ customer.name }} - {{ customer.phone }}</mat-option>
-          }
-        </mat-autocomplete>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Pax</mat-label>
-          <input matInput type="number" formControlName="pax" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Address</mat-label>
-          <textarea matInput formControlName="address"></textarea>
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Notes</mat-label>
-          <textarea matInput formControlName="notes"></textarea>
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto basis-1-2">
-          <mat-label>Date</mat-label>
-          <input matInput [matDatepicker]="date" (focus)="date.open()" formControlName="date" autocomplete="off" />
-          <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
-          <mat-datepicker #date></mat-datepicker>
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-1-4">
-          <mat-label>Hours</mat-label>
-          <input matInput formControlName="hours" />
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-1-4">
-          <mat-label>Minutes</mat-label>
-          <input matInput formControlName="minutes" />
-        </mat-form-field>
-      </div>
-    </form>
-  </mat-card-content>
-  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
-    @if (!!item.id) {
-      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-    }
-  </mat-card-actions>
-</mat-card>
+<h2>Guest Details</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Name</mat-label>
+      <input matInput #name formControlName="name" />
+      @if (form.controls['name'].hasError('required')) {
+        <mat-error> Name is <strong>required</strong> </mat-error>
+      }
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Phone</mat-label>
+      <input matInput #phone type="text" formControlName="phone" [matAutocomplete]="auto" autocomplete="off" />
+    </mat-form-field>
+    <mat-autocomplete
+      #auto="matAutocomplete"
+      autoActiveFirstOption
+      [displayWith]="displayFn"
+      (optionSelected)="selected($event)"
+    >
+      @for (customer of customers | async; track customer) {
+        <mat-option [value]="customer">{{ customer.name }} - {{ customer.phone }}</mat-option>
+      }
+    </mat-autocomplete>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Pax</mat-label>
+      <input matInput type="number" formControlName="pax" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Address</mat-label>
+      <textarea matInput formControlName="address"></textarea>
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Notes</mat-label>
+      <textarea matInput formControlName="notes"></textarea>
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto basis-1-2">
+      <mat-label>Date</mat-label>
+      <input matInput [matDatepicker]="date" (focus)="date.open()" formControlName="date" autocomplete="off" />
+      <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
+      <mat-datepicker #date></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field class="flex-auto basis-1-4">
+      <mat-label>Hours</mat-label>
+      <input matInput formControlName="hours" />
+    </mat-form-field>
+    <mat-form-field class="flex-auto basis-1-4">
+      <mat-label>Minutes</mat-label>
+      <input matInput formControlName="minutes" />
+    </mat-form-field>
+  </div>
+</form>
+
+<div class="row-container">
+  <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
+  @if (!!item.id) {
+    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  }
+</div>
diff --git a/bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.ts b/bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.ts
index f17bece..4c882ed 100644
--- a/bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.ts
+++ b/bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.ts
@@ -3,19 +3,18 @@ import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from
 import { FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteSelectedEvent, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 import moment from 'moment';
 import { Observable, of as observableOf } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
 
 import { Customer } from '../../core/customer';
-import { ToasterService } from '../../core/toaster.service';
 import { CustomerService } from '../../customers/customer.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { GuestBook } from '../guest-book';
@@ -29,9 +28,10 @@ import { GuestBookService } from '../guest-book.service';
     AsyncPipe,
     MatAutocompleteModule,
     MatButtonModule,
-    MatCardModule,
+
     MatDatepickerModule,
     MatFormFieldModule,
+
     MatInputModule,
     MatOptionModule,
     ReactiveFormsModule,
@@ -41,7 +41,7 @@ export class GuestBookDetailComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(GuestBookService);
   private customerService = inject(CustomerService);
 
@@ -124,11 +124,11 @@ export class GuestBookDetailComponent implements OnInit, AfterViewInit {
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/guest-book');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
@@ -162,11 +162,11 @@ export class GuestBookDetailComponent implements OnInit, AfterViewInit {
   delete(id: string) {
     this.ser.delete(id).subscribe({
       complete: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/guest-book');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.html b/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.html
index 7d069c3..20952f7 100644
--- a/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.html
+++ b/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.html
@@ -1,83 +1,78 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Guest List</mat-card-title>
-      <a mat-button [routerLink]="['/guest-book', 'new']" [queryParams]="{ t: 'booking' }">
-        <mat-icon>add_box</mat-icon>
-        Table Booking
-      </a>
-      <a mat-button [routerLink]="['/guest-book', 'new']" [queryParams]="{ t: 'walk_in' }">
-        <mat-icon>add_box</mat-icon>
-        Walk-in
-      </a>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Date</mat-label>
-          <input matInput [matDatepicker]="date" (focus)="date.open()" formControlName="date" autocomplete="off" />
-          <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
-          <mat-datepicker #date></mat-datepicker>
-        </mat-form-field>
-      </div>
-    </form>
-    <mat-table [dataSource]="dataSource" aria-label="Elements">
-      <!-- SNo Column -->
-      <ng-container matColumnDef="sno">
-        <mat-header-cell *matHeaderCellDef>S. No / Total</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.serial }} / {{ row.count }}</mat-cell>
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Guest List</span>
+  <a mat-button [routerLink]="['/guest-book', 'new']" [queryParams]="{ t: 'booking' }">
+    <mat-icon>add_box</mat-icon>
+    Table Booking
+  </a>
+  <a mat-button [routerLink]="['/guest-book', 'new']" [queryParams]="{ t: 'walk_in' }">
+    <mat-icon>add_box</mat-icon>
+    Walk-in
+  </a>
+</h2>
 
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          ><a [routerLink]="['/guest-book/', row.id]">{{ row.name }}</a></mat-cell
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Date</mat-label>
+      <input matInput [matDatepicker]="date" (focus)="date.open()" formControlName="date" autocomplete="off" />
+      <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
+      <mat-datepicker #date></mat-datepicker>
+    </mat-form-field>
+  </div>
+</form>
+<mat-table [dataSource]="dataSource" aria-label="Elements">
+  <!-- SNo Column -->
+  <ng-container matColumnDef="sno">
+    <mat-header-cell *matHeaderCellDef>S. No / Total</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.serial }} / {{ row.count }}</mat-cell>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      ><a [routerLink]="['/guest-book/', row.id]">{{ row.name }}</a></mat-cell
+    >
+  </ng-container>
+
+  <!-- Phone Column -->
+  <ng-container matColumnDef="phone">
+    <mat-header-cell *matHeaderCellDef>Phone</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.phone }}</mat-cell>
+  </ng-container>
+
+  <!-- Pax Column -->
+  <ng-container matColumnDef="pax">
+    <mat-header-cell *matHeaderCellDef>Pax</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.pax }}</mat-cell>
+  </ng-container>
+
+  <!-- Time Column -->
+  <ng-container matColumnDef="date">
+    <mat-header-cell *matHeaderCellDef>Time</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.bookingDate | localTime }} // {{ row.arrivalDate | localTime }}</mat-cell>
+  </ng-container>
+
+  <!-- Action Column -->
+  <ng-container matColumnDef="action">
+    <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="center">
+      @if (row.status === 'old' || (!row.tableId && !row.voucherId)) {
+        <button mat-icon-button [routerLink]="['/sales']" [queryParams]="{ guest: row.id }">
+          <mat-icon>chair</mat-icon>
+        </button>
+      }
+      @if (row.tableId) {
+        <button
+          mat-stroked-button
+          color="primary"
+          [routerLink]="['/sales', 'bill']"
+          [queryParams]="{ table: row.tableId, voucher: row.voucherId }"
         >
-      </ng-container>
-
-      <!-- Phone Column -->
-      <ng-container matColumnDef="phone">
-        <mat-header-cell *matHeaderCellDef>Phone</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.phone }}</mat-cell>
-      </ng-container>
-
-      <!-- Pax Column -->
-      <ng-container matColumnDef="pax">
-        <mat-header-cell *matHeaderCellDef>Pax</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.pax }}</mat-cell>
-      </ng-container>
-
-      <!-- Time Column -->
-      <ng-container matColumnDef="date">
-        <mat-header-cell *matHeaderCellDef>Time</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          >{{ row.bookingDate | localTime }} // {{ row.arrivalDate | localTime }}</mat-cell
-        >
-      </ng-container>
-
-      <!-- Action Column -->
-      <ng-container matColumnDef="action">
-        <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="center">
-          @if (row.status === 'old' || (!row.tableId && !row.voucherId)) {
-            <button mat-icon-button [routerLink]="['/sales']" [queryParams]="{ guest: row.id }">
-              <mat-icon>chair</mat-icon>
-            </button>
-          }
-          @if (row.tableId) {
-            <button
-              mat-stroked-button
-              color="primary"
-              [routerLink]="['/sales', 'bill']"
-              [queryParams]="{ table: row.tableId, voucher: row.voucherId }"
-            >
-              {{ row.tableName }}
-            </button>
-          }
-          <!-- <button
+          {{ row.tableName }}
+        </button>
+      }
+      <!-- <button
               mat-stroked-button
               color="primary"
               [routerLink]="['/sales', 'bill']"
@@ -86,16 +81,14 @@
               >
               {{ row.tableName }}
             </button> -->
-        </mat-cell>
-      </ng-container>
+    </mat-cell>
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row
-        *matRowDef="let row; columns: displayedColumns"
-        [class.grey300]="row.status === 'booking'"
-        [class.accent]="row.status === 'running'"
-        [class.strong-accent]="row.status === 'printed'"
-      ></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row
+    *matRowDef="let row; columns: displayedColumns"
+    [class.grey300]="row.status === 'booking'"
+    [class.accent]="row.status === 'running'"
+    [class.strong-accent]="row.status === 'printed'"
+  ></mat-row>
+</mat-table>
diff --git a/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.sass b/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.sass
index 8af4334..997dcfd 100644
--- a/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.sass
+++ b/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.sass
@@ -1,8 +1,3 @@
-@use '@angular/material' as mat
-
-$my-primary: mat.m2-define-palette(mat.$m2-indigo-palette, 500)
-$my-accent: mat.m2-define-palette(mat.$m2-amber-palette, A200, A100, A400)
-
 table
   width: 100%
 
@@ -10,16 +5,6 @@ table
   display: flex
   justify-content: center
 
-.accent
-  /* Read the 200 hue from the primary color palete.*/
-  color: mat.m2-get-color-from-palette($my-accent, '200-contrast')
-  background: mat.m2-get-color-from-palette($my-accent, 200)
-
-.strong-accent
-  /* Read the 700 hue from the primary color palete.*/
-  color: mat.m2-get-color-from-palette($my-accent, '700-contrast')
-  background: mat.m2-get-color-from-palette($my-accent, 700)
-
 .grey300
   background-color: #ede7f6
   color: #000000
diff --git a/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.ts b/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.ts
index 1a3a746..cd68605 100644
--- a/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.ts
+++ b/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.ts
@@ -1,18 +1,17 @@
 import { Component, OnInit, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import moment from 'moment';
 import { BehaviorSubject } from 'rxjs';
 import { map } from 'rxjs/operators';
 
-import { ToasterService } from '../../core/toaster.service';
 import { LocalTimePipe } from '../../shared/local-time.pipe';
 import { GuestBook } from '../guest-book';
 import { GuestBookList } from '../guest-book-list';
@@ -27,7 +26,7 @@ import { GuestBookListDataSource } from './guest-book-list-datasource';
     LocalTimePipe,
     MatButtonModule,
     MatButtonModule,
-    MatCardModule,
+
     MatDatepickerModule,
     MatFormFieldModule,
     MatIconModule,
@@ -40,7 +39,7 @@ import { GuestBookListDataSource } from './guest-book-list-datasource';
 export class GuestBookListComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(GuestBookService);
 
   data: BehaviorSubject<GuestBook[]> = new BehaviorSubject<GuestBook[]>([]);
diff --git a/bookie/src/app/header-footer/header-footer.component.html b/bookie/src/app/header-footer/header-footer.component.html
index faca983..c8cad35 100644
--- a/bookie/src/app/header-footer/header-footer.component.html
+++ b/bookie/src/app/header-footer/header-footer.component.html
@@ -1,30 +1,23 @@
-<mat-card class="flex-auto lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Header / Footer</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Header / Footer</mat-label>
-          <mat-select formControlName="id" (selectionChange)="show($event)">
-            @for (s of list; track s) {
-              <mat-option [value]="s.id">
-                {{ s.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-      </div>
-      <mat-form-field>
-        <mat-label>Text</mat-label>
-        <textarea matInput matAutosizeMinRows="5" formControlName="text"></textarea>
-      </mat-form-field>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Header / Footer</mat-label>
+      <mat-select formControlName="id" (selectionChange)="show($event)">
+        @for (s of list; track s) {
+          <mat-option [value]="s.id">
+            {{ s.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+  <mat-form-field>
+    <mat-label>Text</mat-label>
+    <textarea matInput matAutosizeMinRows="5" formControlName="text"></textarea>
+  </mat-form-field>
 
-      <mat-divider></mat-divider>
-    </form>
-  </mat-card-content>
-  <mat-card-actions>
-    <button mat-raised-button color="primary" (click)="save()">Save</button>
-  </mat-card-actions>
-</mat-card>
+  <mat-divider></mat-divider>
+</form>
+<div class="row-container">
+  <button mat-raised-button color="primary" (click)="save()">Save</button>
+</div>
diff --git a/bookie/src/app/header-footer/header-footer.component.ts b/bookie/src/app/header-footer/header-footer.component.ts
index c80f2a8..aed906c 100644
--- a/bookie/src/app/header-footer/header-footer.component.ts
+++ b/bookie/src/app/header-footer/header-footer.component.ts
@@ -1,17 +1,16 @@
 import { Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectChange, MatSelectModule } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 import { map } from 'rxjs/operators';
 
-import { ToasterService } from '../core/toaster.service';
 import { HeaderFooter } from './header-footer';
 import { HeaderFooterService } from './header-footer.service';
 
@@ -21,7 +20,7 @@ import { HeaderFooterService } from './header-footer.service';
   styleUrls: ['./header-footer.component.css'],
   imports: [
     MatButtonModule,
-    MatCardModule,
+
     MatDividerModule,
     MatFormFieldModule,
     MatInputModule,
@@ -33,7 +32,7 @@ import { HeaderFooterService } from './header-footer.service';
 export class HeaderFooterComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private dialog = inject(MatDialog);
   private ser = inject(HeaderFooterService);
 
@@ -79,11 +78,11 @@ export class HeaderFooterComponent implements OnInit {
   save() {
     this.ser.save(this.getItem()).subscribe({
       next: (result: HeaderFooter[]) => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.showItem(result);
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/home/home.component.html b/bookie/src/app/home/home.component.html
index df0124c..1bf674d 100644
--- a/bookie/src/app/home/home.component.html
+++ b/bookie/src/app/home/home.component.html
@@ -1,5 +1,7 @@
 <div class="tables-grid">
-  <h2>Sales</h2>
+  @if (auth.allowed('customers') || auth.allowed('sales')) {
+    <h2>Sales</h2>
+  }
   @if (auth.allowed('customers')) {
     <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'guest-book']">
       <h3>Guest Book</h3>
@@ -15,7 +17,17 @@
       <h3>Customers</h3>
     </mat-card>
   }
-  <h2>Reports</h2>
+  @if (
+    auth.allowed('cashier-report') ||
+    auth.allowed('sale-report') ||
+    auth.allowed('tax-report') ||
+    auth.allowed('product-sale-report') ||
+    auth.allowed('bill-settlement-report') ||
+    auth.allowed('beer-sale-report') ||
+    auth.allowed('discount-report')
+  ) {
+    <h2>Reports</h2>
+  }
   @if (auth.allowed('cashier-report')) {
     <mat-card class="flex flex-col square-button" matRipple [routerLink]="['/', 'cashier-report']">
       <h3>Cashier Report</h3>
diff --git a/bookie/src/app/home/home.component.ts b/bookie/src/app/home/home.component.ts
index 61d3106..31ba726 100644
--- a/bookie/src/app/home/home.component.ts
+++ b/bookie/src/app/home/home.component.ts
@@ -9,7 +9,7 @@ import { AuthService } from '../auth/auth.service';
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.sass'],
-  imports: [MatCardModule, RouterLink],
+  imports: [RouterLink, MatCardModule],
 })
 export class HomeComponent {
   auth = inject(AuthService);
diff --git a/bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.html b/bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.html
index 00b080f..835d2ed 100644
--- a/bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.html
+++ b/bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.html
@@ -1,24 +1,19 @@
-<mat-card class="flex-auto lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Menu Category</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Name</mat-label>
-          <input matInput #nameElement formControlName="name" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
-      </div>
-    </form>
-  </mat-card-content>
-  <mat-card-actions class="row-container">
-    <button mat-raised-button [disabled]="item.isFixture" color="primary" class="" (click)="save()">Save</button>
-    @if (!!item.id) {
-      <button mat-raised-button [disabled]="item.isFixture" color="warn" (click)="confirmDelete()">Delete</button>
-    }
-  </mat-card-actions>
-</mat-card>
+<h2>Menu Category</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Name</mat-label>
+      <input matInput #nameElement formControlName="name" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
+  </div>
+</form>
+
+<div class="row-container">
+  <button mat-raised-button [disabled]="item.isFixture" color="primary" class="" (click)="save()">Save</button>
+  @if (!!item.id) {
+    <button mat-raised-button [disabled]="item.isFixture" color="warn" (click)="confirmDelete()">Delete</button>
+  }
+</div>
diff --git a/bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.ts b/bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.ts
index 2ef85af..06d000d 100644
--- a/bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.ts
+++ b/bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.ts
@@ -1,15 +1,14 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { MenuCategory } from '../../core/menu-category';
-import { ToasterService } from '../../core/toaster.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { MenuCategoryService } from '../menu-category.service';
 
@@ -17,13 +16,13 @@ import { MenuCategoryService } from '../menu-category.service';
   selector: 'app-menu-category-detail',
   templateUrl: './menu-category-detail.component.html',
   styleUrls: ['./menu-category-detail.component.css'],
-  imports: [MatButtonModule, MatCardModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule],
+  imports: [MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule],
 })
 export class MenuCategoryDetailComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(MenuCategoryService);
 
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
@@ -68,11 +67,11 @@ export class MenuCategoryDetailComponent implements OnInit, AfterViewInit {
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/menu-categories');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
@@ -80,11 +79,11 @@ export class MenuCategoryDetailComponent implements OnInit, AfterViewInit {
   delete() {
     this.ser.delete(this.item.id as string).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/menu-categories');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/menu-category/menu-category-list/menu-category-list.component.html b/bookie/src/app/menu-category/menu-category-list/menu-category-list.component.html
index b78d42d..a6206dc 100644
--- a/bookie/src/app/menu-category/menu-category-list/menu-category-list.component.html
+++ b/bookie/src/app/menu-category/menu-category-list/menu-category-list.component.html
@@ -1,45 +1,39 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Menu Categories</mat-card-title>
-      <button mat-button (click)="updateSortOrder()">Update Order</button>
-      <a mat-button [routerLink]="['/menu-categories', 'new']">
-        <mat-icon>add_box</mat-icon>
-        Add
-      </a>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <mat-table
-      #table
-      cdkDropList
-      [dataSource]="dataSource"
-      [cdkDropListData]="dataSource"
-      aria-label="Elements"
-      (cdkDropListDropped)="dropTable($event)"
+<h2 class="row-container space-between">
+  <span>Menu Categories</span>
+  <button mat-button (click)="updateSortOrder()">Update Order</button>
+  <a mat-button [routerLink]="['/menu-categories', 'new']">
+    <mat-icon>add_box</mat-icon>
+    Add
+  </a>
+</h2>
+<mat-table
+  #table
+  cdkDropList
+  [dataSource]="dataSource"
+  [cdkDropListData]="dataSource"
+  aria-label="Elements"
+  (cdkDropListDropped)="dropTable($event)"
+>
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      ><a [routerLink]="['/menu-categories', row.id]">{{ row.name }}</a></mat-cell
     >
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          ><a [routerLink]="['/menu-categories', row.id]">{{ row.name }}</a></mat-cell
-        >
-      </ng-container>
+  </ng-container>
 
-      <!-- Is Active Column -->
-      <ng-container matColumnDef="isActive">
-        <mat-header-cell *matHeaderCellDef>Active?</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.isActive }}</mat-cell>
-      </ng-container>
+  <!-- Is Active Column -->
+  <ng-container matColumnDef="isActive">
+    <mat-header-cell *matHeaderCellDef>Active?</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.isActive }}</mat-cell>
+  </ng-container>
 
-      <!-- Is Fixture Column -->
-      <ng-container matColumnDef="isFixture">
-        <mat-header-cell *matHeaderCellDef>Fixture?</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.isFixture }}</mat-cell>
-      </ng-container>
+  <!-- Is Fixture Column -->
+  <ng-container matColumnDef="isFixture">
+    <mat-header-cell *matHeaderCellDef>Fixture?</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.isFixture }}</mat-cell>
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns" cdkDrag [cdkDragData]="row"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns" cdkDrag [cdkDragData]="row"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/menu-category/menu-category-list/menu-category-list.component.ts b/bookie/src/app/menu-category/menu-category-list/menu-category-list.component.ts
index 5f7bd8b..d65c4bd 100644
--- a/bookie/src/app/menu-category/menu-category-list/menu-category-list.component.ts
+++ b/bookie/src/app/menu-category/menu-category-list/menu-category-list.component.ts
@@ -1,14 +1,13 @@
 import { CdkDragDrop, moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { Component, OnInit, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
 
 import { MenuCategory } from '../../core/menu-category';
-import { ToasterService } from '../../core/toaster.service';
 import { MenuCategoryService } from '../menu-category.service';
 import { MenuCategoryListDatasource } from './menu-category-list-datasource';
 
@@ -16,12 +15,12 @@ import { MenuCategoryListDatasource } from './menu-category-list-datasource';
   selector: 'app-menu-category-list',
   templateUrl: './menu-category-list.component.html',
   styleUrls: ['./menu-category-list.component.css'],
-  imports: [DragDropModule, MatButtonModule, MatCardModule, MatIconModule, MatTableModule, RouterLink],
+  imports: [DragDropModule, MatButtonModule, MatIconModule, MatTableModule, RouterLink],
 })
 export class MenuCategoryListComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(MenuCategoryService);
 
   // @ViewChild('table', { static: true }) table?: MatTable<MenuCategory>;
@@ -48,10 +47,10 @@ export class MenuCategoryListComponent implements OnInit {
   updateSortOrder() {
     this.ser.updateSortOrder(this.list).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/menu-engineering-report/menu-engineering-report.component.html b/bookie/src/app/menu-engineering-report/menu-engineering-report.component.html
index d8d4d90..97801ad 100644
--- a/bookie/src/app/menu-engineering-report/menu-engineering-report.component.html
+++ b/bookie/src/app/menu-engineering-report/menu-engineering-report.component.html
@@ -1,108 +1,103 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Menu Engineering Report</mat-card-title>
-      <span class="spacer"></span>
-      <button mat-icon-button (click)="exportCsv()">
-        <mat-icon>save_alt</mat-icon>
-      </button>
-      <button mat-icon-button (click)="print()">
-        <mat-icon>print</mat-icon>
-      </button>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto basis-2-5">
-          <mat-label>Start Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="startDate"
-            (focus)="startDate.open()"
-            formControlName="startDate"
-            autocomplete="off"
-          />
-          <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
-          <mat-datepicker #startDate></mat-datepicker>
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-2-5">
-          <mat-label>Finish Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="finishDate"
-            (focus)="finishDate.open()"
-            formControlName="finishDate"
-            autocomplete="off"
-          />
-          <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
-          <mat-datepicker #finishDate></mat-datepicker>
-        </mat-form-field>
-        <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Filter</mat-label>
-          <input type="text" matInput #filterElement formControlName="filter" autocomplete="off" />
-          <mat-hint
-            >n: Name, sc: Sale Category, mc: Menu Category, q:(=/&lt;=/&gt;=/&lt;/&gt;)Quantity,
-            s:(=/&lt;=/&gt;=/&lt;/&gt;)Sales</mat-hint
-          >
-        </mat-form-field>
-      </div>
-    </form>
-    <mat-table #table [dataSource]="dataSource" matSort>
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Menu Engineering Report</span>
+  <span class="spacer"></span>
+  <button mat-icon-button (click)="exportCsv()">
+    <mat-icon>save_alt</mat-icon>
+  </button>
+  <button mat-icon-button (click)="print()">
+    <mat-icon>print</mat-icon>
+  </button>
+</h2>
 
-      <!-- Price Column -->
-      <ng-container matColumnDef="price">
-        <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Price</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right"
-          >{{ row.average | number: '1.2-2' }} / {{ row.price | number: '1.2-2' }}</mat-cell
-        >
-      </ng-container>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto basis-2-5">
+      <mat-label>Start Date</mat-label>
+      <input
+        matInput
+        [matDatepicker]="startDate"
+        (focus)="startDate.open()"
+        formControlName="startDate"
+        autocomplete="off"
+      />
+      <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
+      <mat-datepicker #startDate></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field class="flex-auto basis-2-5">
+      <mat-label>Finish Date</mat-label>
+      <input
+        matInput
+        [matDatepicker]="finishDate"
+        (focus)="finishDate.open()"
+        formControlName="finishDate"
+        autocomplete="off"
+      />
+      <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
+      <mat-datepicker #finishDate></mat-datepicker>
+    </mat-form-field>
+    <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Filter</mat-label>
+      <input type="text" matInput #filterElement formControlName="filter" autocomplete="off" />
+      <mat-hint
+        >n: Name, sc: Sale Category, mc: Menu Category, q:(=/&lt;=/&gt;=/&lt;/&gt;)Quantity,
+        s:(=/&lt;=/&gt;=/&lt;/&gt;)Sales</mat-hint
+      >
+    </mat-form-field>
+  </div>
+</form>
+<mat-table #table [dataSource]="dataSource" matSort>
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
+  </ng-container>
 
-      <!-- Sale Category Column -->
-      <ng-container matColumnDef="saleCategory">
-        <mat-header-cell *matHeaderCellDef mat-sort-header>Sale Category</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.saleCategory }}</mat-cell>
-      </ng-container>
-
-      <!-- Menu Category Column -->
-      <ng-container matColumnDef="menuCategory">
-        <mat-header-cell *matHeaderCellDef mat-sort-header>Menu Category</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.menuCategory }}</mat-cell>
-      </ng-container>
-
-      <!-- Quantity Column -->
-      <ng-container matColumnDef="quantity">
-        <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Quantity</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right"
-          >{{ row.quantity | number: '1.2-2' }} ({{ row.quantityPercent | percent: '1.2-2' }})</mat-cell
-        >
-      </ng-container>
-
-      <!-- Sales Column -->
-      <ng-container matColumnDef="sales">
-        <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Sales</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right"
-          >{{ row.sales | number: '1.2-2' }} ({{ row.salesPercent | percent: '1.2-2' }})</mat-cell
-        >
-      </ng-container>
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-    <mat-paginator
-      #paginator
-      [length]="dataSource.data.length"
-      [pageIndex]="0"
-      [pageSize]="500"
-      [pageSizeOptions]="[25, 50, 100, 250]"
+  <!-- Price Column -->
+  <ng-container matColumnDef="price">
+    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Price</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right"
+      >{{ row.average | number: '1.2-2' }} / {{ row.price | number: '1.2-2' }}</mat-cell
     >
-    </mat-paginator>
-  </mat-card-content>
-</mat-card>
+  </ng-container>
+
+  <!-- Sale Category Column -->
+  <ng-container matColumnDef="saleCategory">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>Sale Category</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.saleCategory }}</mat-cell>
+  </ng-container>
+
+  <!-- Menu Category Column -->
+  <ng-container matColumnDef="menuCategory">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>Menu Category</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.menuCategory }}</mat-cell>
+  </ng-container>
+
+  <!-- Quantity Column -->
+  <ng-container matColumnDef="quantity">
+    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Quantity</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right"
+      >{{ row.quantity | number: '1.2-2' }} ({{ row.quantityPercent | percent: '1.2-2' }})</mat-cell
+    >
+  </ng-container>
+
+  <!-- Sales Column -->
+  <ng-container matColumnDef="sales">
+    <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Sales</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right"
+      >{{ row.sales | number: '1.2-2' }} ({{ row.salesPercent | percent: '1.2-2' }})</mat-cell
+    >
+  </ng-container>
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
+<mat-paginator
+  #paginator
+  [length]="dataSource.data.length"
+  [pageIndex]="0"
+  [pageSize]="500"
+  [pageSizeOptions]="[25, 50, 100, 250]"
+>
+</mat-paginator>
diff --git a/bookie/src/app/menu-engineering-report/menu-engineering-report.component.ts b/bookie/src/app/menu-engineering-report/menu-engineering-report.component.ts
index e2f2d05..a22a139 100644
--- a/bookie/src/app/menu-engineering-report/menu-engineering-report.component.ts
+++ b/bookie/src/app/menu-engineering-report/menu-engineering-report.component.ts
@@ -2,12 +2,12 @@ import { DecimalPipe, PercentPipe } from '@angular/common';
 import { Component, OnInit, ViewChild, ElementRef, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -15,7 +15,6 @@ import moment from 'moment';
 import { Observable } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
-import { ToasterService } from '../core/toaster.service';
 import { ToCsvService } from '../shared/to-csv.service';
 import { MenuEngineeringReport } from './menu-engineering-report';
 import { MenuEngineeringReportDataSource } from './menu-engineering-report-datasource';
@@ -28,7 +27,7 @@ import { MenuEngineeringReportService } from './menu-engineering-report.service'
   imports: [
     DecimalPipe,
     MatButtonModule,
-    MatCardModule,
+
     MatDatepickerModule,
     MatFormFieldModule,
     MatIconModule,
@@ -44,7 +43,7 @@ export class MenuEngineeringReportComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(MenuEngineeringReportService);
 
   @ViewChild('filterElement', { static: true }) filterElement?: ElementRef;
@@ -109,10 +108,10 @@ export class MenuEngineeringReportComponent implements OnInit {
   print() {
     this.ser.print(this.info.startDate, this.info.finishDate).subscribe({
       next: () => {
-        this.toaster.show('', 'Successfully Printed');
+        this.snackBar.open('Successfully Printed', '');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.html b/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.html
index 0601760..ce95150 100644
--- a/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.html
+++ b/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.html
@@ -1,69 +1,64 @@
-<mat-card class="flex-auto lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Modifier Category</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Name</mat-label>
-          <input matInput #nameElement formControlName="name" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Minimum</mat-label>
-          <input matInput type="number" formControlName="minimum" />
-        </mat-form-field>
-        <mat-form-field class="flex-auto">
-          <mat-label>Maximum</mat-label>
-          <input matInput type="number" formControlName="maximum" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
-      </div>
-      <mat-divider></mat-divider>
-      <mat-tree [dataSource]="dataSource" #tree [childrenAccessor]="childrenAccessor" class="example-tree">
-        <!-- This is the tree node template for leaf nodes -->
-        <mat-nested-tree-node *matTreeNodeDef="let node" class="mat-tree-node" [class.leaf-node]="!hasChild(0, node)">
-          <li class="mat-tree-node">
-            <!-- use a disabled button to provide padding for tree leaf -->
-            <button mat-icon-button disabled></button>
-            <mat-checkbox
-              class="checklist-leaf-node"
-              [checked]="isProductSelected(node)"
-              (change)="toggleProductSelection(node)"
-              >{{ node.name }}</mat-checkbox
-            >
-          </li>
-        </mat-nested-tree-node>
-        <!-- This is the tree node template for expandable nodes -->
-        <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
-          <li>
-            <div class="mat-tree-node">
-              <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
-                <mat-icon class="mat-icon-rtl-mirror">
-                  {{ tree.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
-                </mat-icon>
-              </button>
-              <mat-checkbox
-                [checked]="isMenuCategorySelected(node)"
-                [indeterminate]="isMenuCategoryPartiallySelected(node)"
-                (change)="toggleMenuCategorySelection(node)"
-                >{{ node.name }}</mat-checkbox
-              >
-            </div>
-            <ul [class.example-tree-invisible]="!tree.isExpanded(node)">
-              <ng-container matTreeNodeOutlet></ng-container>
-            </ul>
-          </li>
-        </mat-nested-tree-node>
-      </mat-tree>
-    </form>
-  </mat-card-content>
-  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-  </mat-card-actions>
-</mat-card>
+<h2>Modifier Category</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Name</mat-label>
+      <input matInput #nameElement formControlName="name" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Minimum</mat-label>
+      <input matInput type="number" formControlName="minimum" />
+    </mat-form-field>
+    <mat-form-field class="flex-auto">
+      <mat-label>Maximum</mat-label>
+      <input matInput type="number" formControlName="maximum" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
+  </div>
+  <mat-divider></mat-divider>
+  <mat-tree [dataSource]="dataSource" #tree [childrenAccessor]="childrenAccessor" class="example-tree">
+    <!-- This is the tree node template for leaf nodes -->
+    <mat-nested-tree-node *matTreeNodeDef="let node" class="mat-tree-node" [class.leaf-node]="!hasChild(0, node)">
+      <li class="mat-tree-node">
+        <!-- use a disabled button to provide padding for tree leaf -->
+        <button mat-icon-button disabled></button>
+        <mat-checkbox
+          class="checklist-leaf-node"
+          [checked]="isProductSelected(node)"
+          (change)="toggleProductSelection(node)"
+          >{{ node.name }}</mat-checkbox
+        >
+      </li>
+    </mat-nested-tree-node>
+    <!-- This is the tree node template for expandable nodes -->
+    <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
+      <li>
+        <div class="mat-tree-node">
+          <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
+            <mat-icon class="mat-icon-rtl-mirror">
+              {{ tree.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
+            </mat-icon>
+          </button>
+          <mat-checkbox
+            [checked]="isMenuCategorySelected(node)"
+            [indeterminate]="isMenuCategoryPartiallySelected(node)"
+            (change)="toggleMenuCategorySelection(node)"
+            >{{ node.name }}</mat-checkbox
+          >
+        </div>
+        <ul [class.example-tree-invisible]="!tree.isExpanded(node)">
+          <ng-container matTreeNodeOutlet></ng-container>
+        </ul>
+      </li>
+    </mat-nested-tree-node>
+  </mat-tree>
+</form>
+
+<div class="row-container">
+  <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
+  <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+</div>
diff --git a/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts b/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts
index ad1edf1..6b4a5a5 100644
--- a/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts
+++ b/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts
@@ -1,13 +1,13 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTreeModule, MatTreeNestedDataSource } from '@angular/material/tree';
 import { ActivatedRoute, Router } from '@angular/router';
 import { map } from 'rxjs/operators';
@@ -15,7 +15,6 @@ import { map } from 'rxjs/operators';
 import { MenuCategory } from '../../core/menu-category';
 import { ModifierCategory } from '../../core/modifier-category';
 import { Product } from '../../core/product';
-import { ToasterService } from '../../core/toaster.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { ModifierCategoryService } from '../modifier-category.service';
 import { NodeItem } from '../node-item';
@@ -36,7 +35,7 @@ interface ModifierCategoryNode {
   styleUrls: ['./modifier-category-detail.component.css'],
   imports: [
     MatButtonModule,
-    MatCardModule,
+
     MatCheckboxModule,
     MatDividerModule,
     MatFormFieldModule,
@@ -49,7 +48,7 @@ interface ModifierCategoryNode {
 export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private dialog = inject(MatDialog);
   private ser = inject(ModifierCategoryService);
 
@@ -137,11 +136,11 @@ export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/modifier-categories');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
@@ -149,11 +148,11 @@ export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
   delete() {
     this.ser.delete(this.item.id as string).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/modifier-categories');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/modifier-categories/modifier-category-list/modifier-category-list.component.html b/bookie/src/app/modifier-categories/modifier-category-list/modifier-category-list.component.html
index dc04949..ee84fd6 100644
--- a/bookie/src/app/modifier-categories/modifier-category-list/modifier-category-list.component.html
+++ b/bookie/src/app/modifier-categories/modifier-category-list/modifier-category-list.component.html
@@ -1,69 +1,63 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Modifier Categories</mat-card-title>
-      <a mat-button [routerLink]="['/modifier-categories', 'new']">
-        <mat-icon>add_box</mat-icon>
-        Add
-      </a>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          ><a [routerLink]="['/modifier-categories', row.id]">{{ row.name }}</a></mat-cell
-        >
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Modifier Categories</span>
+  <a mat-button [routerLink]="['/modifier-categories', 'new']">
+    <mat-icon>add_box</mat-icon>
+    Add
+  </a>
+</h2>
+<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      ><a [routerLink]="['/modifier-categories', row.id]">{{ row.name }}</a></mat-cell
+    >
+  </ng-container>
 
-      <!-- Minimum Column -->
-      <ng-container matColumnDef="minimum">
-        <mat-header-cell *matHeaderCellDef>Minimum</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.minimum }}</mat-cell>
-      </ng-container>
+  <!-- Minimum Column -->
+  <ng-container matColumnDef="minimum">
+    <mat-header-cell *matHeaderCellDef>Minimum</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.minimum }}</mat-cell>
+  </ng-container>
 
-      <!-- Maximum Column -->
-      <ng-container matColumnDef="maximum">
-        <mat-header-cell *matHeaderCellDef>Maximum</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.maximum }}</mat-cell>
-      </ng-container>
+  <!-- Maximum Column -->
+  <ng-container matColumnDef="maximum">
+    <mat-header-cell *matHeaderCellDef>Maximum</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.maximum }}</mat-cell>
+  </ng-container>
 
-      <!-- Is Active Column -->
-      <ng-container matColumnDef="isActive">
-        <mat-header-cell *matHeaderCellDef>Is Active</mat-header-cell>
-        <mat-cell *matCellDef="let row">
-          <mat-icon>
-            {{ row.isActive ? 'visibility' : 'visibility_off' }}
-          </mat-icon>
-          <b> {{ row.isActive ? 'Active' : 'Not Active' }}</b>
-        </mat-cell>
-      </ng-container>
+  <!-- Is Active Column -->
+  <ng-container matColumnDef="isActive">
+    <mat-header-cell *matHeaderCellDef>Is Active</mat-header-cell>
+    <mat-cell *matCellDef="let row">
+      <mat-icon>
+        {{ row.isActive ? 'visibility' : 'visibility_off' }}
+      </mat-icon>
+      <b> {{ row.isActive ? 'Active' : 'Not Active' }}</b>
+    </mat-cell>
+  </ng-container>
 
-      <!-- Products Column -->
-      <ng-container matColumnDef="products">
-        <mat-header-cell *matHeaderCellDef>Products</mat-header-cell>
-        <mat-cell *matCellDef="let row">
-          <ul>
-            @for (mc of row.menuCategories; track mc) {
-              <li>
-                {{ mc.name }}
-                @if (!mc.enabled) {
-                  <ul>
-                    @for (p of mc.products; track p) {
-                      <li>{{ p.name }}</li>
-                    }
-                  </ul>
+  <!-- Products Column -->
+  <ng-container matColumnDef="products">
+    <mat-header-cell *matHeaderCellDef>Products</mat-header-cell>
+    <mat-cell *matCellDef="let row">
+      <ul>
+        @for (mc of row.menuCategories; track mc) {
+          <li>
+            {{ mc.name }}
+            @if (!mc.enabled) {
+              <ul>
+                @for (p of mc.products; track p) {
+                  <li>{{ p.name }}</li>
                 }
-              </li>
+              </ul>
             }
-          </ul>
-        </mat-cell>
-      </ng-container>
+          </li>
+        }
+      </ul>
+    </mat-cell>
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/modifier-categories/modifier-category-list/modifier-category-list.component.ts b/bookie/src/app/modifier-categories/modifier-category-list/modifier-category-list.component.ts
index bfe770a..238a366 100644
--- a/bookie/src/app/modifier-categories/modifier-category-list/modifier-category-list.component.ts
+++ b/bookie/src/app/modifier-categories/modifier-category-list/modifier-category-list.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnInit, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, RouterLink } from '@angular/router';
@@ -12,7 +11,7 @@ import { ModifierCategoryListDatasource } from './modifier-category-list-datasou
   selector: 'app-modifier-category-list',
   templateUrl: './modifier-category-list.component.html',
   styleUrls: ['./modifier-category-list.component.css'],
-  imports: [MatButtonModule, MatCardModule, MatIconModule, MatTableModule, RouterLink],
+  imports: [MatButtonModule, MatIconModule, MatTableModule, RouterLink],
 })
 export class ModifierCategoryListComponent implements OnInit {
   private route = inject(ActivatedRoute);
diff --git a/bookie/src/app/modifiers/modifier-detail/modifier-detail.component.html b/bookie/src/app/modifiers/modifier-detail/modifier-detail.component.html
index 98346a9..6c99243 100644
--- a/bookie/src/app/modifiers/modifier-detail/modifier-detail.component.html
+++ b/bookie/src/app/modifiers/modifier-detail/modifier-detail.component.html
@@ -1,45 +1,40 @@
-<mat-card class="flex-auto lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Modifier</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Name</mat-label>
-          <input matInput #name formControlName="name" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-checkbox formControlName="showInBill">Show In Bill?</mat-checkbox>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Price</mat-label>
-          <input matInput type="number" formControlName="price" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Category</mat-label>
-          <mat-select formControlName="modifierCategory">
-            @for (mc of modifierCategories; track mc) {
-              <mat-option [value]="mc.id">
-                {{ mc.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
-      </div>
-    </form>
-  </mat-card-content>
-  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
-    @if (!!item.id) {
-      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-    }
-  </mat-card-actions>
-</mat-card>
+<h2>Modifier</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Name</mat-label>
+      <input matInput #name formControlName="name" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-checkbox formControlName="showInBill">Show In Bill?</mat-checkbox>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Price</mat-label>
+      <input matInput type="number" formControlName="price" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Category</mat-label>
+      <mat-select formControlName="modifierCategory">
+        @for (mc of modifierCategories; track mc) {
+          <mat-option [value]="mc.id">
+            {{ mc.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
+  </div>
+</form>
+
+<div class="row-container">
+  <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
+  @if (!!item.id) {
+    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  }
+</div>
diff --git a/bookie/src/app/modifiers/modifier-detail/modifier-detail.component.ts b/bookie/src/app/modifiers/modifier-detail/modifier-detail.component.ts
index d734520..ba4edaf 100644
--- a/bookie/src/app/modifiers/modifier-detail/modifier-detail.component.ts
+++ b/bookie/src/app/modifiers/modifier-detail/modifier-detail.component.ts
@@ -1,18 +1,17 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { Modifier } from '../../core/modifier';
 import { ModifierCategory } from '../../core/modifier-category';
-import { ToasterService } from '../../core/toaster.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { ModifierService } from '../modifier.service';
 
@@ -22,12 +21,13 @@ import { ModifierService } from '../modifier.service';
   styleUrls: ['./modifier-detail.component.css'],
   imports: [
     MatButtonModule,
-    MatCardModule,
+
     MatCheckboxModule,
     MatFormFieldModule,
     MatInputModule,
     MatOptionModule,
     MatSelectModule,
+
     ReactiveFormsModule,
   ],
 })
@@ -35,7 +35,7 @@ export class ModifierDetailComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(ModifierService);
 
   @ViewChild('name', { static: true }) nameElement?: ElementRef;
@@ -91,11 +91,11 @@ export class ModifierDetailComponent implements OnInit, AfterViewInit {
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/modifiers');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
@@ -103,11 +103,11 @@ export class ModifierDetailComponent implements OnInit, AfterViewInit {
   delete() {
     this.ser.delete(this.item.id as string).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/modifiers');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/modifiers/modifier-list/modifier-list.component.html b/bookie/src/app/modifiers/modifier-list/modifier-list.component.html
index 2aaf9a0..d1de775 100644
--- a/bookie/src/app/modifiers/modifier-list/modifier-list.component.html
+++ b/bookie/src/app/modifiers/modifier-list/modifier-list.component.html
@@ -1,78 +1,72 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Modifiers</mat-card-title>
-      <a mat-button [routerLink]="['/modifiers', 'new']">
-        <mat-icon>add_box</mat-icon>
-        Add
-      </a>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Modifier Category</mat-label>
-          <mat-select formControlName="modifierCategory" (selectionChange)="filterOn($event)">
-            <mat-option>-- All Categories --</mat-option>
-            @for (mc of modifierCategories; track mc) {
-              <mat-option [value]="mc.id">
-                {{ mc.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-      </div>
-    </form>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          ><a [routerLink]="['/modifiers', row.id]">{{ row.name }}</a></mat-cell
-        >
-      </ng-container>
+<h2 class="row-container space-between">
+  Modifiers
+  <a mat-button [routerLink]="['/modifiers', 'new']">
+    <mat-icon>add_box</mat-icon>
+    Add
+  </a>
+</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Modifier Category</mat-label>
+      <mat-select formControlName="modifierCategory" (selectionChange)="filterOn($event)">
+        <mat-option>-- All Categories --</mat-option>
+        @for (mc of modifierCategories; track mc) {
+          <mat-option [value]="mc.id">
+            {{ mc.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+</form>
+<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      ><a [routerLink]="['/modifiers', row.id]">{{ row.name }}</a></mat-cell
+    >
+  </ng-container>
 
-      <!-- Show In Bill Column -->
-      <ng-container matColumnDef="showInBill">
-        <mat-header-cell *matHeaderCellDef>Show In Bill</mat-header-cell>
-        <mat-cell *matCellDef="let row">
-          <div layout="row">
-            <div flex>
-              <mat-icon>
-                {{ row.showInBill ? 'visibility' : 'visibility_off' }}
-              </mat-icon>
-              <b> {{ row.showInBill ? 'Show' : 'Hide' }}</b>
-            </div>
-          </div>
-        </mat-cell>
-      </ng-container>
-
-      <!-- Price Column -->
-      <ng-container matColumnDef="price">
-        <mat-header-cell *matHeaderCellDef>Price</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.price | currency: 'INR' }}</mat-cell>
-      </ng-container>
-
-      <!-- Modifier Category Column -->
-      <ng-container matColumnDef="modifierCategory">
-        <mat-header-cell *matHeaderCellDef>Category</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.modifierCategory.name }}</mat-cell>
-      </ng-container>
-
-      <!-- Is Active Column -->
-      <ng-container matColumnDef="isActive">
-        <mat-header-cell *matHeaderCellDef>Is Active</mat-header-cell>
-        <mat-cell *matCellDef="let row">
+  <!-- Show In Bill Column -->
+  <ng-container matColumnDef="showInBill">
+    <mat-header-cell *matHeaderCellDef>Show In Bill</mat-header-cell>
+    <mat-cell *matCellDef="let row">
+      <div layout="row">
+        <div flex>
           <mat-icon>
-            {{ row.isActive ? 'visibility' : 'visibility_off' }}
+            {{ row.showInBill ? 'visibility' : 'visibility_off' }}
           </mat-icon>
-          <b> {{ row.isActive ? 'Active' : 'Not Active' }}</b>
-        </mat-cell>
-      </ng-container>
+          <b> {{ row.showInBill ? 'Show' : 'Hide' }}</b>
+        </div>
+      </div>
+    </mat-cell>
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <!-- Price Column -->
+  <ng-container matColumnDef="price">
+    <mat-header-cell *matHeaderCellDef>Price</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.price | currency: 'INR' }}</mat-cell>
+  </ng-container>
+
+  <!-- Modifier Category Column -->
+  <ng-container matColumnDef="modifierCategory">
+    <mat-header-cell *matHeaderCellDef>Category</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.modifierCategory.name }}</mat-cell>
+  </ng-container>
+
+  <!-- Is Active Column -->
+  <ng-container matColumnDef="isActive">
+    <mat-header-cell *matHeaderCellDef>Is Active</mat-header-cell>
+    <mat-cell *matCellDef="let row">
+      <mat-icon>
+        {{ row.isActive ? 'visibility' : 'visibility_off' }}
+      </mat-icon>
+      <b> {{ row.isActive ? 'Active' : 'Not Active' }}</b>
+    </mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/modifiers/modifier-list/modifier-list.component.ts b/bookie/src/app/modifiers/modifier-list/modifier-list.component.ts
index fbd8432..e1f2726 100644
--- a/bookie/src/app/modifiers/modifier-list/modifier-list.component.ts
+++ b/bookie/src/app/modifiers/modifier-list/modifier-list.component.ts
@@ -2,7 +2,6 @@ import { CurrencyPipe } from '@angular/common';
 import { Component, OnInit, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -22,7 +21,7 @@ import { ModifierListDataSource } from './modifier-list-datasource';
   imports: [
     CurrencyPipe,
     MatButtonModule,
-    MatCardModule,
+
     MatFormFieldModule,
     MatIconModule,
     MatOptionModule,
diff --git a/bookie/src/app/printers/printer-detail/printer-detail.component.html b/bookie/src/app/printers/printer-detail/printer-detail.component.html
index fafbaf5..aa02d0b 100644
--- a/bookie/src/app/printers/printer-detail/printer-detail.component.html
+++ b/bookie/src/app/printers/printer-detail/printer-detail.component.html
@@ -1,31 +1,26 @@
-<mat-card class="flex-auto lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Printer</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Name</mat-label>
-          <input matInput #nameElement formControlName="name" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Address</mat-label>
-          <input matInput formControlName="address" />
-        </mat-form-field>
-        <mat-form-field class="flex-auto">
-          <mat-label>Cut Code</mat-label>
-          <input matInput formControlName="cutCode" />
-        </mat-form-field>
-      </div>
-    </form>
-  </mat-card-content>
-  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
-    @if (!!item.id) {
-      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-    }
-  </mat-card-actions>
-</mat-card>
+<h2>Printer</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Name</mat-label>
+      <input matInput #nameElement formControlName="name" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Address</mat-label>
+      <input matInput formControlName="address" />
+    </mat-form-field>
+    <mat-form-field class="flex-auto">
+      <mat-label>Cut Code</mat-label>
+      <input matInput formControlName="cutCode" />
+    </mat-form-field>
+  </div>
+</form>
+
+<div class="row-container">
+  <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
+  @if (!!item.id) {
+    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  }
+</div>
diff --git a/bookie/src/app/printers/printer-detail/printer-detail.component.ts b/bookie/src/app/printers/printer-detail/printer-detail.component.ts
index 4e85ec1..966b91a 100644
--- a/bookie/src/app/printers/printer-detail/printer-detail.component.ts
+++ b/bookie/src/app/printers/printer-detail/printer-detail.component.ts
@@ -1,14 +1,13 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { Printer } from '../../core/printer';
-import { ToasterService } from '../../core/toaster.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { PrinterService } from '../printer.service';
 
@@ -16,13 +15,13 @@ import { PrinterService } from '../printer.service';
   selector: 'app-printer-detail',
   templateUrl: './printer-detail.component.html',
   styleUrls: ['./printer-detail.component.css'],
-  imports: [MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule],
+  imports: [MatButtonModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule],
 })
 export class PrinterDetailComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(PrinterService);
 
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
@@ -70,11 +69,11 @@ export class PrinterDetailComponent implements OnInit, AfterViewInit {
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/printers');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
@@ -82,11 +81,11 @@ export class PrinterDetailComponent implements OnInit, AfterViewInit {
   delete() {
     this.ser.delete(this.item.id as string).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/printers');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/printers/printer-list/printer-list.component.html b/bookie/src/app/printers/printer-list/printer-list.component.html
index 239553e..af559b1 100644
--- a/bookie/src/app/printers/printer-list/printer-list.component.html
+++ b/bookie/src/app/printers/printer-list/printer-list.component.html
@@ -1,37 +1,31 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Printers</mat-card-title>
-      <a mat-button [routerLink]="['/printers', 'new']">
-        <mat-icon>add_box</mat-icon>
-        Add
-      </a>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          ><a [routerLink]="['/printers', row.id]">{{ row.name }}</a></mat-cell
-        >
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Printers</span>
+  <a mat-button [routerLink]="['/printers', 'new']">
+    <mat-icon>add_box</mat-icon>
+    Add
+  </a>
+</h2>
+<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      ><a [routerLink]="['/printers', row.id]">{{ row.name }}</a></mat-cell
+    >
+  </ng-container>
 
-      <!-- Address Column -->
-      <ng-container matColumnDef="address">
-        <mat-header-cell *matHeaderCellDef>Address</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.address }}</mat-cell>
-      </ng-container>
+  <!-- Address Column -->
+  <ng-container matColumnDef="address">
+    <mat-header-cell *matHeaderCellDef>Address</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.address }}</mat-cell>
+  </ng-container>
 
-      <!-- Cut Code Column -->
-      <ng-container matColumnDef="cutCode">
-        <mat-header-cell *matHeaderCellDef>Cut Code</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.cutCode }}</mat-cell>
-      </ng-container>
+  <!-- Cut Code Column -->
+  <ng-container matColumnDef="cutCode">
+    <mat-header-cell *matHeaderCellDef>Cut Code</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.cutCode }}</mat-cell>
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/printers/printer-list/printer-list.component.ts b/bookie/src/app/printers/printer-list/printer-list.component.ts
index 84667c2..7daaab7 100644
--- a/bookie/src/app/printers/printer-list/printer-list.component.ts
+++ b/bookie/src/app/printers/printer-list/printer-list.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnInit, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, RouterLink } from '@angular/router';
@@ -12,7 +11,7 @@ import { PrinterListDataSource } from './printer-list-datasource';
   selector: 'app-printer-list',
   templateUrl: './printer-list.component.html',
   styleUrls: ['./printer-list.component.css'],
-  imports: [MatButtonModule, MatCardModule, MatIconModule, MatTableModule, RouterLink],
+  imports: [MatButtonModule, MatIconModule, MatTableModule, RouterLink],
 })
 export class PrinterListComponent implements OnInit {
   private route = inject(ActivatedRoute);
diff --git a/bookie/src/app/product-sale-report/product-sale-report.component.html b/bookie/src/app/product-sale-report/product-sale-report.component.html
index 8a7f8e7..16a4e18 100644
--- a/bookie/src/app/product-sale-report/product-sale-report.component.html
+++ b/bookie/src/app/product-sale-report/product-sale-report.component.html
@@ -1,96 +1,91 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Product Sale Report</mat-card-title>
-      <span class="spacer"></span>
-      <button mat-icon-button (click)="exportCsv()">
-        <mat-icon>save_alt</mat-icon>
-      </button>
-      <button mat-icon-button (click)="print()">
-        <mat-icon>print</mat-icon>
-      </button>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto basis-1-3">
-          <mat-label>Start Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="startDate"
-            (focus)="startDate.open()"
-            formControlName="startDate"
-            autocomplete="off"
-          />
-          <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
-          <mat-datepicker #startDate></mat-datepicker>
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-1-3">
-          <mat-label>Finish Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="finishDate"
-            (focus)="finishDate.open()"
-            formControlName="finishDate"
-            autocomplete="off"
-          />
-          <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
-          <mat-datepicker #finishDate></mat-datepicker>
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-1-6">
-          <mat-label>Section</mat-label>
-          <mat-select formControlName="section" name="section">
-            <mat-option>-- All --</mat-option>
-            @for (p of sections; track p.id) {
-              <mat-option [value]="p.id">
-                {{ p.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-        <button mat-raised-button class="flex-auto basis-1-6" color="primary" (click)="show()">Show</button>
-      </div>
-    </form>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Product Sale Report</span>
+  <span class="spacer"></span>
+  <button mat-icon-button (click)="exportCsv()">
+    <mat-icon>save_alt</mat-icon>
+  </button>
+  <button mat-icon-button (click)="print()">
+    <mat-icon>print</mat-icon>
+  </button>
+</h2>
 
-      <!-- Unbilled Column -->
-      <ng-container matColumnDef="unbilled">
-        <mat-header-cell *matHeaderCellDef class="right">Unbilled</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{ row.kot | number: '1.2-2' }}</mat-cell>
-      </ng-container>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container sm:max-lg:flex-col">
+    <mat-form-field class="flex-auto basis-1-3">
+      <mat-label>Start Date</mat-label>
+      <input
+        matInput
+        [matDatepicker]="startDate"
+        (focus)="startDate.open()"
+        formControlName="startDate"
+        autocomplete="off"
+      />
+      <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
+      <mat-datepicker #startDate></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field class="flex-auto basis-1-3">
+      <mat-label>Finish Date</mat-label>
+      <input
+        matInput
+        [matDatepicker]="finishDate"
+        (focus)="finishDate.open()"
+        formControlName="finishDate"
+        autocomplete="off"
+      />
+      <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
+      <mat-datepicker #finishDate></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field class="flex-auto basis-1-6">
+      <mat-label>Section</mat-label>
+      <mat-select formControlName="section" name="section">
+        <mat-option>-- All --</mat-option>
+        @for (p of sections; track p.id) {
+          <mat-option [value]="p.id">
+            {{ p.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+    <button mat-raised-button class="flex-auto basis-1-6" color="primary" (click)="show()">Show</button>
+  </div>
+</form>
+<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
+  </ng-container>
 
-      <!-- Sale Column -->
-      <ng-container matColumnDef="sale">
-        <mat-header-cell *matHeaderCellDef class="right">Sale</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{ row.regularBill | number: '1.2-2' }}</mat-cell>
-      </ng-container>
+  <!-- Unbilled Column -->
+  <ng-container matColumnDef="unbilled">
+    <mat-header-cell *matHeaderCellDef class="right">Unbilled</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right">{{ row.kot | number: '1.2-2' }}</mat-cell>
+  </ng-container>
 
-      <!-- No Charge Column -->
-      <ng-container matColumnDef="noCharge">
-        <mat-header-cell *matHeaderCellDef class="right">No Charge</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{ row.noCharge | number: '1.2-2' }}</mat-cell>
-      </ng-container>
+  <!-- Sale Column -->
+  <ng-container matColumnDef="sale">
+    <mat-header-cell *matHeaderCellDef class="right">Sale</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right">{{ row.regularBill | number: '1.2-2' }}</mat-cell>
+  </ng-container>
 
-      <!-- Staff Column -->
-      <ng-container matColumnDef="staff">
-        <mat-header-cell *matHeaderCellDef class="right">Staff</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{ row.staff | number: '1.2-2' }}</mat-cell>
-      </ng-container>
+  <!-- No Charge Column -->
+  <ng-container matColumnDef="noCharge">
+    <mat-header-cell *matHeaderCellDef class="right">No Charge</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right">{{ row.noCharge | number: '1.2-2' }}</mat-cell>
+  </ng-container>
 
-      <!-- Cancelled Column -->
-      <ng-container matColumnDef="cancel">
-        <mat-header-cell *matHeaderCellDef class="right">Cancelled</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{ row.cancel | number: '1.2-2' }}</mat-cell>
-      </ng-container>
+  <!-- Staff Column -->
+  <ng-container matColumnDef="staff">
+    <mat-header-cell *matHeaderCellDef class="right">Staff</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right">{{ row.staff | number: '1.2-2' }}</mat-cell>
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <!-- Cancelled Column -->
+  <ng-container matColumnDef="cancel">
+    <mat-header-cell *matHeaderCellDef class="right">Cancelled</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right">{{ row.cancel | number: '1.2-2' }}</mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/product-sale-report/product-sale-report.component.ts b/bookie/src/app/product-sale-report/product-sale-report.component.ts
index d23105d..5c411e7 100644
--- a/bookie/src/app/product-sale-report/product-sale-report.component.ts
+++ b/bookie/src/app/product-sale-report/product-sale-report.component.ts
@@ -2,18 +2,17 @@ import { DecimalPipe } from '@angular/common';
 import { Component, OnInit, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import moment from 'moment';
 
 import { Section } from '../core/section';
-import { ToasterService } from '../core/toaster.service';
 import { ToCsvService } from '../shared/to-csv.service';
 import { ProductSaleReport } from './product-sale-report';
 import { ProductSaleReportDataSource } from './product-sale-report-datasource';
@@ -26,7 +25,7 @@ import { ProductSaleReportService } from './product-sale-report.service';
   imports: [
     DecimalPipe,
     MatButtonModule,
-    MatCardModule,
+
     MatDatepickerModule,
     MatFormFieldModule,
     MatIconModule,
@@ -40,7 +39,7 @@ export class ProductSaleReportComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(ProductSaleReportService);
 
   sections: Section[] = [];
@@ -108,10 +107,10 @@ export class ProductSaleReportComponent implements OnInit {
   print() {
     this.ser.print(this.info.startDate, this.info.finishDate, this.info.sectionId).subscribe({
       next: () => {
-        this.toaster.show('', 'Successfully Printed');
+        this.snackBar.open('Successfully Printed', '');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/product-updates-report/product-updates-report.component.html b/bookie/src/app/product-updates-report/product-updates-report.component.html
index e3423eb..2e9a410 100644
--- a/bookie/src/app/product-updates-report/product-updates-report.component.html
+++ b/bookie/src/app/product-updates-report/product-updates-report.component.html
@@ -1,51 +1,46 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Product Update Report</mat-card-title>
-      <button mat-icon-button (click)="exportCsv()">
-        <mat-icon>save_alt</mat-icon>
-      </button>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto basis-2-5">
-          <mat-label>Start Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="startDate"
-            (focus)="startDate.open()"
-            formControlName="startDate"
-            autocomplete="off"
-          />
-          <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
-          <mat-datepicker #startDate></mat-datepicker>
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-2-5">
-          <mat-label>Finish Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="finishDate"
-            (focus)="finishDate.open()"
-            formControlName="finishDate"
-            autocomplete="off"
-          />
-          <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
-          <mat-datepicker #finishDate></mat-datepicker>
-        </mat-form-field>
-        <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
-      </div>
-    </form>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Details Column -->
-      <ng-container matColumnDef="details">
-        <mat-header-cell *matHeaderCellDef>Details</mat-header-cell>
-        <mat-cell class="multi_lines_text" *matCellDef="let row">{{ row }}</mat-cell>
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Product Update Report</span>
+  <button mat-icon-button (click)="exportCsv()">
+    <mat-icon>save_alt</mat-icon>
+  </button>
+</h2>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container sm:max-lg:flex-col">
+    <mat-form-field class="flex-auto basis-2-5">
+      <mat-label>Start Date</mat-label>
+      <input
+        matInput
+        [matDatepicker]="startDate"
+        (focus)="startDate.open()"
+        formControlName="startDate"
+        autocomplete="off"
+      />
+      <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
+      <mat-datepicker #startDate></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field class="flex-auto basis-2-5">
+      <mat-label>Finish Date</mat-label>
+      <input
+        matInput
+        [matDatepicker]="finishDate"
+        (focus)="finishDate.open()"
+        formControlName="finishDate"
+        autocomplete="off"
+      />
+      <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
+      <mat-datepicker #finishDate></mat-datepicker>
+    </mat-form-field>
+    <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
+  </div>
+</form>
+<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Details Column -->
+  <ng-container matColumnDef="details">
+    <mat-header-cell *matHeaderCellDef>Details</mat-header-cell>
+    <mat-cell class="multi_lines_text" *matCellDef="let row">{{ row }}</mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/product-updates-report/product-updates-report.component.ts b/bookie/src/app/product-updates-report/product-updates-report.component.ts
index 00ca401..8cc5304 100644
--- a/bookie/src/app/product-updates-report/product-updates-report.component.ts
+++ b/bookie/src/app/product-updates-report/product-updates-report.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnInit, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -20,7 +19,7 @@ import { ProductUpdatesReportDataSource } from './product-updates-report-datasou
   styleUrls: ['./product-updates-report.component.css'],
   imports: [
     MatButtonModule,
-    MatCardModule,
+
     MatDatepickerModule,
     MatFormFieldModule,
     MatIconModule,
diff --git a/bookie/src/app/product/product-detail/product-detail.component.html b/bookie/src/app/product/product-detail/product-detail.component.html
index a92c5fb..fc06f19 100644
--- a/bookie/src/app/product/product-detail/product-detail.component.html
+++ b/bookie/src/app/product/product-detail/product-detail.component.html
@@ -1,61 +1,55 @@
-<mat-card class="flex-auto lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Product</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto basis-3-4">
-          <mat-label>Name</mat-label>
-          <input matInput #name formControlName="name" />
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-1-4">
-          <mat-label>Units</mat-label>
-          <input matInput formControlName="units" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Price</mat-label>
-          <input matInput type="number" formControlName="price" />
-        </mat-form-field>
-        <mat-form-field class="flex-auto">
-          <mat-label>Quantity</mat-label>
-          <input matInput type="number" formControlName="quantity" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-checkbox formControlName="hasHappyHour">Has Happy Hour?</mat-checkbox>
-        <mat-checkbox formControlName="isNotAvailable">Is Not Available?</mat-checkbox>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Menu Category</mat-label>
-          <mat-select formControlName="menuCategory">
-            @for (mc of menuCategories; track mc) {
-              <mat-option [value]="mc.id">
-                {{ mc.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field class="flex-auto">
-          <mat-label>Sale Category</mat-label>
-          <mat-select formControlName="saleCategory">
-            @for (sc of saleCategories; track sc) {
-              <mat-option [value]="sc.id">
-                {{ sc.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-      </div>
-    </form>
-  </mat-card-content>
-  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
-    @if (!!item.id) {
-      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-    }
-  </mat-card-actions>
-</mat-card>
+<h2>Product</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto basis-3-4">
+      <mat-label>Name</mat-label>
+      <input matInput #name formControlName="name" />
+    </mat-form-field>
+    <mat-form-field class="flex-auto basis-1-4">
+      <mat-label>Units</mat-label>
+      <input matInput formControlName="units" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Price</mat-label>
+      <input matInput type="number" formControlName="price" />
+    </mat-form-field>
+    <mat-form-field class="flex-auto">
+      <mat-label>Quantity</mat-label>
+      <input matInput type="number" formControlName="quantity" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-checkbox formControlName="hasHappyHour">Has Happy Hour?</mat-checkbox>
+    <mat-checkbox formControlName="isNotAvailable">Is Not Available?</mat-checkbox>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Menu Category</mat-label>
+      <mat-select formControlName="menuCategory">
+        @for (mc of menuCategories; track mc) {
+          <mat-option [value]="mc.id">
+            {{ mc.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field class="flex-auto">
+      <mat-label>Sale Category</mat-label>
+      <mat-select formControlName="saleCategory">
+        @for (sc of saleCategories; track sc) {
+          <mat-option [value]="sc.id">
+            {{ sc.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+</form>
+<div class="row-container">
+  <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
+  @if (!!item.id) {
+    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  }
+</div>
diff --git a/bookie/src/app/product/product-detail/product-detail.component.ts b/bookie/src/app/product/product-detail/product-detail.component.ts
index e54522f..da69fae 100644
--- a/bookie/src/app/product/product-detail/product-detail.component.ts
+++ b/bookie/src/app/product/product-detail/product-detail.component.ts
@@ -1,19 +1,18 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { MenuCategory } from '../../core/menu-category';
 import { Product } from '../../core/product';
 import { SaleCategory } from '../../core/sale-category';
-import { ToasterService } from '../../core/toaster.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { ProductService } from '../product.service';
 
@@ -23,7 +22,7 @@ import { ProductService } from '../product.service';
   styleUrls: ['./product-detail.component.css'],
   imports: [
     MatButtonModule,
-    MatCardModule,
+
     MatCheckboxModule,
     MatFormFieldModule,
     MatInputModule,
@@ -36,7 +35,7 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(ProductService);
 
   @ViewChild('name', { static: true }) nameElement?: ElementRef;
@@ -107,11 +106,11 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/products');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
@@ -119,11 +118,11 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
   delete() {
     this.ser.delete(this.item.id as string).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/products');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/product/product-list/product-list.component.html b/bookie/src/app/product/product-list/product-list.component.html
index 7e3b82a..18119d3 100644
--- a/bookie/src/app/product/product-list/product-list.component.html
+++ b/bookie/src/app/product/product-list/product-list.component.html
@@ -1,107 +1,101 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Products</mat-card-title>
-      <button
-        mat-button
-        (click)="updateSortOrder()"
-        [disabled]="(menuCategoryFilter | async) === '' || (searchFilter | async) !== ''"
-      >
-        Update Order
-      </button>
-      <!--    This should check filtered data and not data-->
-      <button mat-icon-button (click)="exportCsv()" [disabled]="!(data | async)?.length">
-        <mat-icon>save_alt</mat-icon>
-      </button>
-      <a mat-button [routerLink]="['/products', 'new']">
-        <mat-icon>add_box</mat-icon>
-        Add
-      </a>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Filter</mat-label>
-          <input type="text" matInput formControlName="filter" autocomplete="off" />
-        </mat-form-field>
-        <mat-form-field class="flex-auto">
-          <mat-label>Menu Category</mat-label>
-          <mat-select formControlName="menuCategory" (selectionChange)="filterOn($event.value)">
-            <mat-option>-- All Products --</mat-option>
-            @for (mc of menuCategories; track mc) {
-              <mat-option [value]="mc.id">
-                {{ mc.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-      </div>
-    </form>
-    <mat-table
-      #table
-      cdkDropList
-      [dataSource]="dataSource"
-      [cdkDropListData]="dataSource"
-      aria-label="Elements"
-      (cdkDropListDropped)="dropTable($event)"
+<h2 class="row-container space-between">
+  <span>Products</span>
+  <button
+    mat-button
+    (click)="updateSortOrder()"
+    [disabled]="(menuCategoryFilter | async) === '' || (searchFilter | async) !== ''"
+  >
+    Update Order
+  </button>
+  <!--    This should check filtered data and not data-->
+  <button mat-icon-button (click)="exportCsv()" [disabled]="!(data | async)?.length">
+    <mat-icon>save_alt</mat-icon>
+  </button>
+  <a mat-button [routerLink]="['/products', 'new']">
+    <mat-icon>add_box</mat-icon>
+    Add
+  </a>
+</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Filter</mat-label>
+      <input type="text" matInput formControlName="filter" autocomplete="off" />
+    </mat-form-field>
+    <mat-form-field class="flex-auto">
+      <mat-label>Menu Category</mat-label>
+      <mat-select formControlName="menuCategory" (selectionChange)="filterOn($event.value)">
+        <mat-option>-- All Products --</mat-option>
+        @for (mc of menuCategories; track mc) {
+          <mat-option [value]="mc.id">
+            {{ mc.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+</form>
+<mat-table
+  #table
+  cdkDropList
+  [dataSource]="dataSource"
+  [cdkDropListData]="dataSource"
+  aria-label="Elements"
+  (cdkDropListDropped)="dropTable($event)"
+>
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      ><a [routerLink]="['/products', row.id]">{{ row.name }} ({{ row.units }})</a></mat-cell
     >
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          ><a [routerLink]="['/products', row.id]">{{ row.name }} ({{ row.units }})</a></mat-cell
-        >
-      </ng-container>
+  </ng-container>
 
-      <!-- Price Column -->
-      <ng-container matColumnDef="price">
-        <mat-header-cell *matHeaderCellDef class="right">Price</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{ row.price | currency: 'INR' }}</mat-cell>
-      </ng-container>
+  <!-- Price Column -->
+  <ng-container matColumnDef="price">
+    <mat-header-cell *matHeaderCellDef class="right">Price</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right">{{ row.price | currency: 'INR' }}</mat-cell>
+  </ng-container>
 
-      <!-- Menu Category Column -->
-      <ng-container matColumnDef="menuCategory">
-        <mat-header-cell *matHeaderCellDef>Menu Category</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.menuCategory.name }}</mat-cell>
-      </ng-container>
+  <!-- Menu Category Column -->
+  <ng-container matColumnDef="menuCategory">
+    <mat-header-cell *matHeaderCellDef>Menu Category</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.menuCategory.name }}</mat-cell>
+  </ng-container>
 
-      <!-- Sale Category Column -->
-      <ng-container matColumnDef="saleCategory">
-        <mat-header-cell *matHeaderCellDef>Sale Category</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.saleCategory.name }}</mat-cell>
-      </ng-container>
+  <!-- Sale Category Column -->
+  <ng-container matColumnDef="saleCategory">
+    <mat-header-cell *matHeaderCellDef>Sale Category</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.saleCategory.name }}</mat-cell>
+  </ng-container>
 
-      <!-- Info Column -->
-      <ng-container matColumnDef="info">
-        <mat-header-cell *matHeaderCellDef>Details</mat-header-cell>
-        <mat-cell *matCellDef="let row">
-          <div layout="row">
-            <div flex>
-              <mat-icon>
-                {{ row.hasHappyHour ? 'sentiment_satisfied_alt' : 'sentiment_dissatisfied' }}
-              </mat-icon>
-              <b> {{ row.hasHappyHour ? 'Happy Hour' : 'Regular' }}</b>
-            </div>
-            <div flex>
-              <mat-icon>
-                {{ row.isNotAvailable ? 'pause' : 'play_arrow' }}
-              </mat-icon>
-              <b> {{ row.isNotAvailable ? 'Not Available' : 'Available' }}</b>
-            </div>
-          </div>
-        </mat-cell>
-      </ng-container>
+  <!-- Info Column -->
+  <ng-container matColumnDef="info">
+    <mat-header-cell *matHeaderCellDef>Details</mat-header-cell>
+    <mat-cell *matCellDef="let row">
+      <div layout="row">
+        <div flex>
+          <mat-icon>
+            {{ row.hasHappyHour ? 'sentiment_satisfied_alt' : 'sentiment_dissatisfied' }}
+          </mat-icon>
+          <b> {{ row.hasHappyHour ? 'Happy Hour' : 'Regular' }}</b>
+        </div>
+        <div flex>
+          <mat-icon>
+            {{ row.isNotAvailable ? 'pause' : 'play_arrow' }}
+          </mat-icon>
+          <b> {{ row.isNotAvailable ? 'Not Available' : 'Available' }}</b>
+        </div>
+      </div>
+    </mat-cell>
+  </ng-container>
 
-      <!-- Quantity Column -->
-      <ng-container matColumnDef="quantity">
-        <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
-      </ng-container>
+  <!-- Quantity Column -->
+  <ng-container matColumnDef="quantity">
+    <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns" cdkDrag [cdkDragData]="row"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns" cdkDrag [cdkDragData]="row"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/product/product-list/product-list.component.ts b/bookie/src/app/product/product-list/product-list.component.ts
index aa0f91c..575b963 100644
--- a/bookie/src/app/product/product-list/product-list.component.ts
+++ b/bookie/src/app/product/product-list/product-list.component.ts
@@ -3,12 +3,12 @@ import { AsyncPipe, DecimalPipe, CurrencyPipe } from '@angular/common';
 import { Component, OnInit, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { BehaviorSubject, Observable } from 'rxjs';
@@ -16,7 +16,6 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 import { MenuCategory } from '../../core/menu-category';
 import { Product } from '../../core/product';
-import { ToasterService } from '../../core/toaster.service';
 import { ToCsvService } from '../../shared/to-csv.service';
 import { ProductService } from '../product.service';
 import { ProductListDataSource } from './product-list-datasource';
@@ -31,7 +30,7 @@ import { ProductListDataSource } from './product-list-datasource';
     DecimalPipe,
     DragDropModule,
     MatButtonModule,
-    MatCardModule,
+
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
@@ -44,7 +43,7 @@ import { ProductListDataSource } from './product-list-datasource';
 })
 export class ProductListComponent implements OnInit {
   private route = inject(ActivatedRoute);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private toCsv = inject(ToCsvService);
   private ser = inject(ProductService);
 
@@ -94,11 +93,11 @@ export class ProductListComponent implements OnInit {
   updateSortOrder() {
     this.ser.updateSortOrder(this.dataSource.filteredData).subscribe({
       next: (result: Product[]) => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.loadData(result, this.menuCategories);
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/regimes/regime-detail/regime-detail.component.html b/bookie/src/app/regimes/regime-detail/regime-detail.component.html
index eef015a..164bf91 100644
--- a/bookie/src/app/regimes/regime-detail/regime-detail.component.html
+++ b/bookie/src/app/regimes/regime-detail/regime-detail.component.html
@@ -1,33 +1,28 @@
-<mat-card class="flex-auto lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Regime</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Name</mat-label>
-          <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Header</mat-label>
-          <textarea matInput formControlName="header"></textarea>
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Prefix</mat-label>
-          <input matInput formControlName="prefix" />
-        </mat-form-field>
-      </div>
-    </form>
-  </mat-card-content>
-  <mat-card-actions class="row-container">
-    <button mat-raised-button [disabled]="item.isFixture" color="primary" class="" (click)="save()">Save</button>
-    @if (!!item.id) {
-      <button mat-raised-button [disabled]="item.isFixture" color="warn" (click)="confirmDelete()">Delete</button>
-    }
-  </mat-card-actions>
-</mat-card>
+<h2>Regime</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Name</mat-label>
+      <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Header</mat-label>
+      <textarea matInput formControlName="header"></textarea>
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Prefix</mat-label>
+      <input matInput formControlName="prefix" />
+    </mat-form-field>
+  </div>
+</form>
+
+<div class="row-container">
+  <button mat-raised-button [disabled]="item.isFixture" color="primary" class="" (click)="save()">Save</button>
+  @if (!!item.id) {
+    <button mat-raised-button [disabled]="item.isFixture" color="warn" (click)="confirmDelete()">Delete</button>
+  }
+</div>
diff --git a/bookie/src/app/regimes/regime-detail/regime-detail.component.ts b/bookie/src/app/regimes/regime-detail/regime-detail.component.ts
index 4ce4829..370a701 100644
--- a/bookie/src/app/regimes/regime-detail/regime-detail.component.ts
+++ b/bookie/src/app/regimes/regime-detail/regime-detail.component.ts
@@ -1,14 +1,13 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { Regime } from '../../core/regime';
-import { ToasterService } from '../../core/toaster.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { RegimeService } from '../regime.service';
 
@@ -16,13 +15,13 @@ import { RegimeService } from '../regime.service';
   selector: 'app-regime-detail',
   templateUrl: './regime-detail.component.html',
   styleUrls: ['./regime-detail.component.css'],
-  imports: [MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule],
+  imports: [MatButtonModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule],
 })
 export class RegimeDetailComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(RegimeService);
 
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
@@ -70,11 +69,11 @@ export class RegimeDetailComponent implements OnInit, AfterViewInit {
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/regimes');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
@@ -82,11 +81,11 @@ export class RegimeDetailComponent implements OnInit, AfterViewInit {
   delete() {
     this.ser.delete(this.item.id as number).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/regimes');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/regimes/regime-list/regime-list.component.html b/bookie/src/app/regimes/regime-list/regime-list.component.html
index 72dfd7f..5f21ddb 100644
--- a/bookie/src/app/regimes/regime-list/regime-list.component.html
+++ b/bookie/src/app/regimes/regime-list/regime-list.component.html
@@ -1,43 +1,37 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Regimes</mat-card-title>
-      <a mat-button [routerLink]="['/regimes', 'new']">
-        <mat-icon>add_box</mat-icon>
-        Add
-      </a>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          ><a [routerLink]="['/regimes', row.id]">{{ row.name }}</a></mat-cell
-        >
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Regimes</span>
+  <a mat-button [routerLink]="['/regimes', 'new']">
+    <mat-icon>add_box</mat-icon>
+    Add
+  </a>
+</h2>
+<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      ><a [routerLink]="['/regimes', row.id]">{{ row.name }}</a></mat-cell
+    >
+  </ng-container>
 
-      <!-- Header Column -->
-      <ng-container matColumnDef="header">
-        <mat-header-cell *matHeaderCellDef>Header</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.header }}</mat-cell>
-      </ng-container>
+  <!-- Header Column -->
+  <ng-container matColumnDef="header">
+    <mat-header-cell *matHeaderCellDef>Header</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.header }}</mat-cell>
+  </ng-container>
 
-      <!-- Prefix Column -->
-      <ng-container matColumnDef="prefix">
-        <mat-header-cell *matHeaderCellDef>Prefix</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.prefix }}</mat-cell>
-      </ng-container>
+  <!-- Prefix Column -->
+  <ng-container matColumnDef="prefix">
+    <mat-header-cell *matHeaderCellDef>Prefix</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.prefix }}</mat-cell>
+  </ng-container>
 
-      <!-- Is Fixture Column -->
-      <ng-container matColumnDef="isFixture">
-        <mat-header-cell *matHeaderCellDef>Is Fixture?</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.isFixture }}</mat-cell>
-      </ng-container>
+  <!-- Is Fixture Column -->
+  <ng-container matColumnDef="isFixture">
+    <mat-header-cell *matHeaderCellDef>Is Fixture?</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.isFixture }}</mat-cell>
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/regimes/regime-list/regime-list.component.ts b/bookie/src/app/regimes/regime-list/regime-list.component.ts
index eed7c26..603c933 100644
--- a/bookie/src/app/regimes/regime-list/regime-list.component.ts
+++ b/bookie/src/app/regimes/regime-list/regime-list.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnInit, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, RouterLink } from '@angular/router';
@@ -12,7 +11,7 @@ import { RegimeListDataSource } from './regime-list-datasource';
   selector: 'app-regime-list',
   templateUrl: './regime-list.component.html',
   styleUrls: ['./regime-list.component.css'],
-  imports: [MatButtonModule, MatCardModule, MatIconModule, MatTableModule, RouterLink],
+  imports: [MatButtonModule, MatIconModule, MatTableModule, RouterLink],
 })
 export class RegimeListComponent implements OnInit {
   private route = inject(ActivatedRoute);
diff --git a/bookie/src/app/roles/role-detail/role-detail.component.html b/bookie/src/app/roles/role-detail/role-detail.component.html
index 196644c..5a752b9 100644
--- a/bookie/src/app/roles/role-detail/role-detail.component.html
+++ b/bookie/src/app/roles/role-detail/role-detail.component.html
@@ -1,27 +1,22 @@
-<mat-card class="flex-auto lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Role</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Name</mat-label>
-          <input matInput #nameElement formControlName="name" />
-        </mat-form-field>
+<h2>Role</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Name</mat-label>
+      <input matInput #nameElement formControlName="name" />
+    </mat-form-field>
+  </div>
+
+  <div formArrayName="permissions">
+    @for (p of item.permissions; track p; let i = $index) {
+      <div class="row-container" [formGroupName]="i">
+        <mat-checkbox formControlName="permission" class="flex-auto">{{ p.name }}</mat-checkbox>
       </div>
-      <mat-divider></mat-divider>
-      <div formArrayName="permissions">
-        @for (p of item.permissions; track p; let i = $index) {
-          <div class="row-container" [formGroupName]="i">
-            <mat-checkbox formControlName="permission" class="flex-auto">{{ p.name }}</mat-checkbox>
-          </div>
-        }
-      </div>
-    </form>
-  </mat-card-content>
-  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-  </mat-card-actions>
-</mat-card>
+    }
+  </div>
+</form>
+
+<div class="row-container">
+  <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
+  <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+</div>
diff --git a/bookie/src/app/roles/role-detail/role-detail.component.ts b/bookie/src/app/roles/role-detail/role-detail.component.ts
index d69dd6f..0463a3a 100644
--- a/bookie/src/app/roles/role-detail/role-detail.component.ts
+++ b/bookie/src/app/roles/role-detail/role-detail.component.ts
@@ -1,15 +1,13 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
-import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 
-import { ToasterService } from '../../core/toaster.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { Role } from '../role';
 import { RoleService } from '../role.service';
@@ -18,20 +16,12 @@ import { RoleService } from '../role.service';
   selector: 'app-role-detail',
   templateUrl: './role-detail.component.html',
   styleUrls: ['./role-detail.component.css'],
-  imports: [
-    MatButtonModule,
-    MatCardModule,
-    MatCheckboxModule,
-    MatDividerModule,
-    MatFormFieldModule,
-    MatInputModule,
-    ReactiveFormsModule,
-  ],
+  imports: [MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule],
 })
 export class RoleDetailComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private dialog = inject(MatDialog);
   private ser = inject(RoleService);
 
@@ -83,11 +73,11 @@ export class RoleDetailComponent implements OnInit, AfterViewInit {
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/roles');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
@@ -95,11 +85,11 @@ export class RoleDetailComponent implements OnInit, AfterViewInit {
   delete() {
     this.ser.delete(this.item.id as string).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/roles');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/roles/role-list/role-list.component.html b/bookie/src/app/roles/role-list/role-list.component.html
index 614ea33..08e4f9c 100644
--- a/bookie/src/app/roles/role-list/role-list.component.html
+++ b/bookie/src/app/roles/role-list/role-list.component.html
@@ -1,37 +1,31 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Roles</mat-card-title>
-      <a mat-button [routerLink]="['/roles', 'new']">
-        <mat-icon>add_box</mat-icon>
-        Add
-      </a>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          ><a [routerLink]="['/roles', row.id]">{{ row.name }}</a></mat-cell
-        >
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Roles</span>
+  <a mat-button [routerLink]="['/roles', 'new']">
+    <mat-icon>add_box</mat-icon>
+    Add
+  </a>
+</h2>
+<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      ><a [routerLink]="['/roles', row.id]">{{ row.name }}</a></mat-cell
+    >
+  </ng-container>
 
-      <!-- Permissions Column -->
-      <ng-container matColumnDef="permissions">
-        <mat-header-cell *matHeaderCellDef>Permissions</mat-header-cell>
-        <mat-cell *matCellDef="let row">
-          <ul>
-            @for (permission of row.permissions; track permission) {
-              <li>{{ permission }}</li>
-            }
-          </ul>
-        </mat-cell>
-      </ng-container>
+  <!-- Permissions Column -->
+  <ng-container matColumnDef="permissions">
+    <mat-header-cell *matHeaderCellDef>Permissions</mat-header-cell>
+    <mat-cell *matCellDef="let row">
+      <ul>
+        @for (permission of row.permissions; track permission) {
+          <li>{{ permission }}</li>
+        }
+      </ul>
+    </mat-cell>
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/roles/role-list/role-list.component.ts b/bookie/src/app/roles/role-list/role-list.component.ts
index b40a78c..8867819 100644
--- a/bookie/src/app/roles/role-list/role-list.component.ts
+++ b/bookie/src/app/roles/role-list/role-list.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnInit, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, RouterLink } from '@angular/router';
@@ -12,7 +11,7 @@ import { RoleListDataSource } from './role-list-datasource';
   selector: 'app-role-list',
   templateUrl: './role-list.component.html',
   styleUrls: ['./role-list.component.css'],
-  imports: [MatButtonModule, MatCardModule, MatIconModule, MatTableModule, RouterLink],
+  imports: [MatButtonModule, MatIconModule, MatTableModule, RouterLink],
 })
 export class RoleListComponent implements OnInit {
   private route = inject(ActivatedRoute);
diff --git a/bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.html b/bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.html
index 13498a9..9b0730c 100644
--- a/bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.html
+++ b/bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.html
@@ -1,71 +1,61 @@
-<mat-card class="flex-auto lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Sale Category</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Name</mat-label>
-          <input matInput #nameElement formControlName="name" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Discount Limit</mat-label>
-          <input matInput type="number" formControlName="discountLimit" class="right-align" />
-          <span matSuffix>%</span>
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Tax</mat-label>
-          <mat-select formControlName="tax">
-            @for (t of taxes; track t) {
-              <mat-option [value]="t.id">
-                {{ t.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-      </div>
-    </form>
-  </mat-card-content>
-  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
-    @if (!!item.id) {
-      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-    }
-  </mat-card-actions>
-</mat-card>
-<mat-card class="flex-auto lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Products</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <mat-table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          ><a [routerLink]="['/products', row.id]">{{ row.name }}</a></mat-cell
-        >
-      </ng-container>
+<h2>Sale Category</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Name</mat-label>
+      <input matInput #nameElement formControlName="name" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Discount Limit</mat-label>
+      <input matInput type="number" formControlName="discountLimit" class="right-align" />
+      <span matSuffix>%</span>
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Tax</mat-label>
+      <mat-select formControlName="tax">
+        @for (t of taxes; track t) {
+          <mat-option [value]="t.id">
+            {{ t.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+</form>
+<mat-divider></mat-divider>
+<div class="row-container">
+  <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
+  @if (!!item.id) {
+    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  }
+</div>
 
-      <!-- Price Column -->
-      <ng-container matColumnDef="price">
-        <mat-header-cell *matHeaderCellDef class="right">Price</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{ row.price | currency: 'INR' }}</mat-cell>
-      </ng-container>
+<h2>Products</h2>
+<mat-table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      ><a [routerLink]="['/products', row.id]">{{ row.name }}</a></mat-cell
+    >
+  </ng-container>
 
-      <!-- Menu Category Column -->
-      <ng-container matColumnDef="menuCategory">
-        <mat-header-cell *matHeaderCellDef>Menu Category</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.menuCategory.name }}</mat-cell>
-      </ng-container>
+  <!-- Price Column -->
+  <ng-container matColumnDef="price">
+    <mat-header-cell *matHeaderCellDef class="right">Price</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right">{{ row.price | currency: 'INR' }}</mat-cell>
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <!-- Menu Category Column -->
+  <ng-container matColumnDef="menuCategory">
+    <mat-header-cell *matHeaderCellDef>Menu Category</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.menuCategory.name }}</mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.ts b/bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.ts
index 0861997..f86fb1a 100644
--- a/bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.ts
+++ b/bookie/src/app/sale-category/sale-category-detail/sale-category-detail.component.ts
@@ -2,12 +2,13 @@ import { CurrencyPipe } from '@angular/common';
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { round } from 'mathjs';
@@ -16,7 +17,6 @@ import { BehaviorSubject } from 'rxjs';
 import { Product } from '../../core/product';
 import { SaleCategory } from '../../core/sale-category';
 import { Tax } from '../../core/tax';
-import { ToasterService } from '../../core/toaster.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { SaleCategoryService } from '../sale-category.service';
 import { SaleCategoryDetailDatasource } from './sale-category-detail-datasource';
@@ -28,11 +28,12 @@ import { SaleCategoryDetailDatasource } from './sale-category-detail-datasource'
   imports: [
     CurrencyPipe,
     MatButtonModule,
-    MatCardModule,
+
     MatFormFieldModule,
     MatInputModule,
     MatOptionModule,
     MatSelectModule,
+    MatDividerModule,
     MatTableModule,
     ReactiveFormsModule,
     RouterLink,
@@ -42,7 +43,7 @@ export class SaleCategoryDetailComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(SaleCategoryService);
 
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
@@ -96,11 +97,11 @@ export class SaleCategoryDetailComponent implements OnInit, AfterViewInit {
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/sale-categories');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
@@ -108,11 +109,11 @@ export class SaleCategoryDetailComponent implements OnInit, AfterViewInit {
   delete() {
     this.ser.delete(this.item.id as string).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/sale-categories');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/sale-category/sale-category-list/sale-category-list.component.html b/bookie/src/app/sale-category/sale-category-list/sale-category-list.component.html
index d44a6d3..3692ca7 100644
--- a/bookie/src/app/sale-category/sale-category-list/sale-category-list.component.html
+++ b/bookie/src/app/sale-category/sale-category-list/sale-category-list.component.html
@@ -1,37 +1,31 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Sale Categories</mat-card-title>
-      <a mat-button [routerLink]="['/sale-categories', 'new']">
-        <mat-icon>add_box</mat-icon>
-        Add
-      </a>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          ><a [routerLink]="['/sale-categories', row.id]">{{ row.name }}</a></mat-cell
-        >
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Sale Categories</span>
+  <a mat-button [routerLink]="['/sale-categories', 'new']">
+    <mat-icon>add_box</mat-icon>
+    Add
+  </a>
+</h2>
+<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      ><a [routerLink]="['/sale-categories', row.id]">{{ row.name }}</a></mat-cell
+    >
+  </ng-container>
 
-      <!-- Discount Limit Column -->
-      <ng-container matColumnDef="discountLimit">
-        <mat-header-cell *matHeaderCellDef>Discount Limit</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.discountLimit | percent: '1.2-2' }}</mat-cell>
-      </ng-container>
+  <!-- Discount Limit Column -->
+  <ng-container matColumnDef="discountLimit">
+    <mat-header-cell *matHeaderCellDef>Discount Limit</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.discountLimit | percent: '1.2-2' }}</mat-cell>
+  </ng-container>
 
-      <!-- Tax Column -->
-      <ng-container matColumnDef="tax">
-        <mat-header-cell *matHeaderCellDef>Tax</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.tax.rate | percent: '1.2-2' }} {{ row.tax.name }}</mat-cell>
-      </ng-container>
+  <!-- Tax Column -->
+  <ng-container matColumnDef="tax">
+    <mat-header-cell *matHeaderCellDef>Tax</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.tax.rate | percent: '1.2-2' }} {{ row.tax.name }}</mat-cell>
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/sale-category/sale-category-list/sale-category-list.component.ts b/bookie/src/app/sale-category/sale-category-list/sale-category-list.component.ts
index ba5e206..f5c94c8 100644
--- a/bookie/src/app/sale-category/sale-category-list/sale-category-list.component.ts
+++ b/bookie/src/app/sale-category/sale-category-list/sale-category-list.component.ts
@@ -1,14 +1,13 @@
 import { PercentPipe } from '@angular/common';
 import { Component, OnInit, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
 
 import { SaleCategory } from '../../core/sale-category';
-import { ToasterService } from '../../core/toaster.service';
 import { SaleCategoryService } from '../sale-category.service';
 import { SaleCategoryListDatasource } from './sale-category-list-datasource';
 
@@ -16,12 +15,12 @@ import { SaleCategoryListDatasource } from './sale-category-list-datasource';
   selector: 'app-sale-category-list',
   templateUrl: './sale-category-list.component.html',
   styleUrls: ['./sale-category-list.component.css'],
-  imports: [MatButtonModule, MatCardModule, MatIconModule, MatTableModule, PercentPipe, RouterLink],
+  imports: [MatButtonModule, MatIconModule, MatTableModule, PercentPipe, RouterLink],
 })
 export class SaleCategoryListComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(SaleCategoryService);
 
   // @ViewChild('table', { static: true }) table?: MatTable<SaleCategory>;
diff --git a/bookie/src/app/sale-report/sale-report.component.html b/bookie/src/app/sale-report/sale-report.component.html
index ea76f09..3d79ecb 100644
--- a/bookie/src/app/sale-report/sale-report.component.html
+++ b/bookie/src/app/sale-report/sale-report.component.html
@@ -1,71 +1,66 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Sale Report</mat-card-title>
-      <span class="spacer"></span>
-      <button mat-icon-button (click)="exportCsv()">
-        <mat-icon>save_alt</mat-icon>
-      </button>
-      <button mat-icon-button (click)="print()">
-        <mat-icon>print</mat-icon>
-      </button>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto basis-1-3">
-          <mat-label>Start Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="startDate"
-            (focus)="startDate.open()"
-            formControlName="startDate"
-            autocomplete="off"
-          />
-          <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
-          <mat-datepicker #startDate></mat-datepicker>
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-1-3">
-          <mat-label>Finish Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="finishDate"
-            (focus)="finishDate.open()"
-            formControlName="finishDate"
-            autocomplete="off"
-          />
-          <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
-          <mat-datepicker #finishDate></mat-datepicker>
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-1-6">
-          <mat-label>Section</mat-label>
-          <mat-select formControlName="section" name="section">
-            <mat-option>-- All --</mat-option>
-            @for (p of sections; track p.id) {
-              <mat-option [value]="p.id">
-                {{ p.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-        <button mat-raised-button class="flex-auto basis-1-6" color="primary" (click)="show()">Show</button>
-      </div>
-    </form>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Sale Report</span>
+  <span class="spacer"></span>
+  <button mat-icon-button (click)="exportCsv()">
+    <mat-icon>save_alt</mat-icon>
+  </button>
+  <button mat-icon-button (click)="print()">
+    <mat-icon>print</mat-icon>
+  </button>
+</h2>
 
-      <!-- Amount Column -->
-      <ng-container matColumnDef="amount">
-        <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
-      </ng-container>
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container sm:max-lg:flex-col">
+    <mat-form-field class="flex-auto basis-1-3">
+      <mat-label>Start Date</mat-label>
+      <input
+        matInput
+        [matDatepicker]="startDate"
+        (focus)="startDate.open()"
+        formControlName="startDate"
+        autocomplete="off"
+      />
+      <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
+      <mat-datepicker #startDate></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field class="flex-auto basis-1-3">
+      <mat-label>Finish Date</mat-label>
+      <input
+        matInput
+        [matDatepicker]="finishDate"
+        (focus)="finishDate.open()"
+        formControlName="finishDate"
+        autocomplete="off"
+      />
+      <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
+      <mat-datepicker #finishDate></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field class="flex-auto basis-1-6">
+      <mat-label>Section</mat-label>
+      <mat-select formControlName="section" name="section">
+        <mat-option>-- All --</mat-option>
+        @for (p of sections; track p.id) {
+          <mat-option [value]="p.id">
+            {{ p.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+    <button mat-raised-button class="flex-auto basis-1-6" color="primary" (click)="show()">Show</button>
+  </div>
+</form>
+<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
+  </ng-container>
+
+  <!-- Amount Column -->
+  <ng-container matColumnDef="amount">
+    <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
+  </ng-container>
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/sale-report/sale-report.component.ts b/bookie/src/app/sale-report/sale-report.component.ts
index a46a480..6bc6163 100644
--- a/bookie/src/app/sale-report/sale-report.component.ts
+++ b/bookie/src/app/sale-report/sale-report.component.ts
@@ -2,19 +2,18 @@ import { CurrencyPipe } from '@angular/common';
 import { Component, OnInit, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import moment from 'moment';
 
 import { Section } from '../core/section';
-import { ToasterService } from '../core/toaster.service';
 import { ToCsvService } from '../shared/to-csv.service';
 import { SaleReport } from './sale-report';
 import { SaleReportDatasource } from './sale-report-datasource';
@@ -27,7 +26,7 @@ import { SaleReportService } from './sale-report.service';
   imports: [
     CurrencyPipe,
     MatButtonModule,
-    MatCardModule,
+
     MatDatepickerModule,
     MatFormFieldModule,
     MatIconModule,
@@ -42,7 +41,7 @@ export class SaleReportComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(SaleReportService);
 
   sections: Section[] = [];
@@ -109,10 +108,10 @@ export class SaleReportComponent implements OnInit {
   print() {
     this.ser.print(this.info.startDate, this.info.finishDate, this.info.sectionId).subscribe({
       next: () => {
-        this.toaster.show('', 'Successfully Printed');
+        this.snackBar.open('Successfully Printed', '');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/sales/bill-type/bill-type.component.ts b/bookie/src/app/sales/bill-type/bill-type.component.ts
index 3f2315e..6159629 100644
--- a/bookie/src/app/sales/bill-type/bill-type.component.ts
+++ b/bookie/src/app/sales/bill-type/bill-type.component.ts
@@ -11,7 +11,7 @@ import { VoucherType } from '../bills/voucher-type';
   selector: 'app-bill-type',
   templateUrl: './bill-type.component.html',
   styleUrls: ['./bill-type.component.sass'],
-  imports: [CdkScrollableModule, MatButtonModule, MatCardModule, MatDialogModule, MatRippleModule],
+  imports: [CdkScrollableModule, MatButtonModule, MatDialogModule, MatRippleModule, MatCardModule],
 })
 export class BillTypeComponent {
   dialogRef = inject<MatDialogRef<BillTypeComponent>>(MatDialogRef);
diff --git a/bookie/src/app/sales/bill.service.ts b/bookie/src/app/sales/bill.service.ts
index 76d6e21..c408fa5 100644
--- a/bookie/src/app/sales/bill.service.ts
+++ b/bookie/src/app/sales/bill.service.ts
@@ -1,6 +1,7 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { Injectable, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { BehaviorSubject, throwError, Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 
@@ -10,7 +11,6 @@ import { Product } from '../core/product';
 import { ReceivePaymentItem } from '../core/receive-payment-item';
 import { SaleCategory } from '../core/sale-category';
 import { Table } from '../core/table';
-import { ToasterService } from '../core/toaster.service';
 import { ModifierCategoryService } from '../modifier-categories/modifier-category.service';
 import { MathService } from '../shared/math.service';
 import { Bill } from './bills/bill';
@@ -25,7 +25,7 @@ import { ModifiersComponent } from './modifiers/modifiers.component';
 })
 export class BillService {
   private dialog = inject(MatDialog);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private math = inject(MathService);
   private ser = inject(VoucherService);
   private modifierCategoryService = inject(ModifierCategoryService);
@@ -118,7 +118,7 @@ export class BillService {
     if (quantity < 0) {
       const minimum = this.minimum(product.id as string, product.hasHappyHour) + quantity;
       if (minimum + quantity < 0) {
-        this.toaster.show('Error', 'Total quantity cannot be negative!');
+        this.snackBar.open('Total quantity cannot be negative!', 'Error');
         return;
       }
     }
diff --git a/bookie/src/app/sales/bills/bills.component.html b/bookie/src/app/sales/bills/bills.component.html
index 1e72892..d880c57 100644
--- a/bookie/src/app/sales/bills/bills.component.html
+++ b/bookie/src/app/sales/bills/bills.component.html
@@ -1,174 +1,165 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title>Bill</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <table mat-table #table [dataSource]="dataSource" aria-label="Elements" class="mat-elevation-z8">
-      <ng-container matColumnDef="bill-no-title">
-        <mat-header-cell *matHeaderCellDef class="deep-purple-200 bold">Bill / KOT number</mat-header-cell>
-      </ng-container>
-      <ng-container matColumnDef="bill-no-details">
-        <mat-header-cell *matHeaderCellDef class="deep-purple-200 bold right-align"
-          >{{ bs.bill.billId }} / K-{{ bs.bill.kotId }}</mat-header-cell
+<span>Bill</span>
+
+<table mat-table #table [dataSource]="dataSource" aria-label="Elements" class="mat-elevation-z8">
+  <ng-container matColumnDef="bill-no-title">
+    <mat-header-cell *matHeaderCellDef class="deep-purple-200 bold">Bill / KOT number</mat-header-cell>
+  </ng-container>
+  <ng-container matColumnDef="bill-no-details">
+    <mat-header-cell *matHeaderCellDef class="deep-purple-200 bold right-align"
+      >{{ bs.bill.billId }} / K-{{ bs.bill.kotId }}</mat-header-cell
+    >
+  </ng-container>
+  <ng-container matColumnDef="time-title">
+    <mat-header-cell *matHeaderCellDef class="deep-purple-100 bold"
+      >Time / Start Time / Last Edit Time
+    </mat-header-cell>
+  </ng-container>
+  <ng-container matColumnDef="time-details">
+    <mat-header-cell *matHeaderCellDef class="deep-purple-100 bold right-align"
+      ><span [matTooltip]="bs.bill.dateTip">{{ bs.bill.date }}</span
+      >&nbsp;/&nbsp;<span [matTooltip]="bs.bill.creationDateTip">{{ bs.bill.creationDate }}</span
+      >&nbsp;/&nbsp;<span [matTooltip]="bs.bill.lastEditDateTip">{{ bs.bill.lastEditDate }}</span></mat-header-cell
+    >
+  </ng-container>
+  <ng-container matColumnDef="table-title">
+    <mat-header-cell *matHeaderCellDef class="deep-purple-50 bold">Table / Pax / Customer</mat-header-cell>
+  </ng-container>
+  <ng-container matColumnDef="table-details">
+    <mat-header-cell *matHeaderCellDef class="deep-purple-50 bold right-align"
+      ><button>Table: {{ bs.bill.table.name }}</button> /
+      <button mat-button (click)="choosePax()">{{ bs.bill.pax }} Pax</button> /
+      <button mat-button (click)="chooseCustomer()">
+        {{ bs.bill.customer?.name ?? 'Customer' }}
+      </button></mat-header-cell
+    >
+  </ng-container>
+
+  <!-- Checkbox Column -->
+  <ng-container matColumnDef="select">
+    <mat-cell *matCellDef="let row">
+      @if (row.isOldKot) {
+        <mat-checkbox
+          (change)="$event ? masterToggle(row) : null"
+          [checked]="bs.selection.hasValue() && isAllSelected(row)"
+          [indeterminate]="isAnySelected(row)"
         >
-      </ng-container>
-      <ng-container matColumnDef="time-title">
-        <mat-header-cell *matHeaderCellDef class="deep-purple-100 bold"
-          >Time / Start Time / Last Edit Time
-        </mat-header-cell>
-      </ng-container>
-      <ng-container matColumnDef="time-details">
-        <mat-header-cell *matHeaderCellDef class="deep-purple-100 bold right-align"
-          ><span [matTooltip]="bs.bill.dateTip">{{ bs.bill.date }}</span
-          >&nbsp;/&nbsp;<span [matTooltip]="bs.bill.creationDateTip">{{ bs.bill.creationDate }}</span
-          >&nbsp;/&nbsp;<span [matTooltip]="bs.bill.lastEditDateTip">{{ bs.bill.lastEditDate }}</span></mat-header-cell
+        </mat-checkbox>
+      }
+      @if (!row.isKot) {
+        <mat-checkbox
+          [disabled]="!row.id"
+          (click)="$event.stopPropagation()"
+          (change)="$event ? toggle(row) : null"
+          [checked]="isSelected(row)"
         >
-      </ng-container>
-      <ng-container matColumnDef="table-title">
-        <mat-header-cell *matHeaderCellDef class="deep-purple-50 bold">Table / Pax / Customer</mat-header-cell>
-      </ng-container>
-      <ng-container matColumnDef="table-details">
-        <mat-header-cell *matHeaderCellDef class="deep-purple-50 bold right-align"
-          ><button>Table: {{ bs.bill.table.name }}</button> /
-          <button mat-button (click)="choosePax()">{{ bs.bill.pax }} Pax</button> /
-          <button mat-button (click)="chooseCustomer()">
-            {{ bs.bill.customer?.name ?? 'Customer' }}
-          </button></mat-header-cell
-        >
-      </ng-container>
+        </mat-checkbox>
+      }
+    </mat-cell>
+  </ng-container>
+  <!-- Info Column -->
+  <ng-container matColumnDef="info">
+    <mat-cell *matCellDef="let row">
+      <span>
+        {{ row.info }}
+      </span>
+      <ul>
+        @for (m of row.modifiers; track m.id) {
+          <li>{{ m.name }}</li>
+        }
+      </ul>
+    </mat-cell>
+  </ng-container>
+  <!-- Quantity Column -->
+  <ng-container matColumnDef="quantity">
+    <mat-header-cell *matHeaderCellDef>Quantity</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right-align">
+      @if (!row.isKot) {
+        <button mat-icon-button class="small-icon-button" (click)="subtractOne(row)" [disabled]="row.isPrinted">
+          <mat-icon>indeterminate_check_box</mat-icon>
+        </button>
+      }
+      @if (!row.isKot) {
+        <button mat-icon-button class="small-icon-button" (click)="quantity(row)" [disabled]="rowQuantityDisabled(row)">
+          {{ row.quantity }}
+        </button>
+      }
+      @if (!row.isKot) {
+        <button mat-icon-button class="small-icon-button" (click)="addOne(row)" [disabled]="row.isPrinted">
+          <mat-icon>control_point</mat-icon>
+        </button>
+      }
+      @if (!row.isKot) {
+        <button mat-icon-button class="small-icon-button" (click)="modifier(row)" [disabled]="row.isPrinted">
+          <mat-icon>assignment</mat-icon>
+        </button>
+      }
+      @if (row.isKot) {
+        <button mat-icon-button (click)="moveKot(row)" [disabled]="row.isKot && !row.kotId">
+          <mat-icon class="del">open_in_new</mat-icon>
+        </button>
+      }
+    </mat-cell>
+  </ng-container>
+  <mat-header-row *matHeaderRowDef="['bill-no-title', 'bill-no-details']"></mat-header-row>
+  <mat-header-row *matHeaderRowDef="['time-title', 'time-details']"></mat-header-row>
+  <mat-header-row *matHeaderRowDef="['table-title', 'table-details']"></mat-header-row>
+  <mat-row
+    *matRowDef="let row; columns: displayedColumns"
+    [class.old-kot]="row.isOldKot"
+    [class.new-kot]="row.isNewKot"
+    [class.is-printed]="row.isPrinted && !row.isHappyHour"
+    [class.hh-new]="row.isHappyHour && !row.isPrinted"
+    [class.hh-printed]="row.isPrinted && row.isHappyHour"
+  ></mat-row>
+  <mat-footer-row *matFooterRowDef="['gross-title', 'gross-amount']"></mat-footer-row>
+  <ng-container matColumnDef="gross-title">
+    <mat-footer-cell *matFooterCellDef class="bold">Gross</mat-footer-cell>
+  </ng-container>
+  <ng-container matColumnDef="gross-amount">
+    <mat-footer-cell *matFooterCellDef class="bold right-align">{{
+      bs.grossAmount | async | currency: 'INR'
+    }}</mat-footer-cell>
+  </ng-container>
 
-      <!-- Checkbox Column -->
-      <ng-container matColumnDef="select">
-        <mat-cell *matCellDef="let row">
-          @if (row.isOldKot) {
-            <mat-checkbox
-              (change)="$event ? masterToggle(row) : null"
-              [checked]="bs.selection.hasValue() && isAllSelected(row)"
-              [indeterminate]="isAnySelected(row)"
-            >
-            </mat-checkbox>
-          }
-          @if (!row.isKot) {
-            <mat-checkbox
-              [disabled]="!row.id"
-              (click)="$event.stopPropagation()"
-              (change)="$event ? toggle(row) : null"
-              [checked]="isSelected(row)"
-            >
-            </mat-checkbox>
-          }
-        </mat-cell>
-      </ng-container>
-      <!-- Info Column -->
-      <ng-container matColumnDef="info">
-        <mat-cell *matCellDef="let row">
-          <span>
-            {{ row.info }}
-          </span>
-          <ul>
-            @for (m of row.modifiers; track m.id) {
-              <li>{{ m.name }}</li>
-            }
-          </ul>
-        </mat-cell>
-      </ng-container>
-      <!-- Quantity Column -->
-      <ng-container matColumnDef="quantity">
-        <mat-header-cell *matHeaderCellDef>Quantity</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right-align">
-          @if (!row.isKot) {
-            <button mat-icon-button class="small-icon-button" (click)="subtractOne(row)" [disabled]="row.isPrinted">
-              <mat-icon>indeterminate_check_box</mat-icon>
-            </button>
-          }
-          @if (!row.isKot) {
-            <button
-              mat-icon-button
-              class="small-icon-button"
-              (click)="quantity(row)"
-              [disabled]="rowQuantityDisabled(row)"
-            >
-              {{ row.quantity }}
-            </button>
-          }
-          @if (!row.isKot) {
-            <button mat-icon-button class="small-icon-button" (click)="addOne(row)" [disabled]="row.isPrinted">
-              <mat-icon>control_point</mat-icon>
-            </button>
-          }
-          @if (!row.isKot) {
-            <button mat-icon-button class="small-icon-button" (click)="modifier(row)" [disabled]="row.isPrinted">
-              <mat-icon>assignment</mat-icon>
-            </button>
-          }
-          @if (row.isKot) {
-            <button mat-icon-button (click)="moveKot(row)" [disabled]="row.isKot && !row.kotId">
-              <mat-icon class="del">open_in_new</mat-icon>
-            </button>
-          }
-        </mat-cell>
-      </ng-container>
-      <mat-header-row *matHeaderRowDef="['bill-no-title', 'bill-no-details']"></mat-header-row>
-      <mat-header-row *matHeaderRowDef="['time-title', 'time-details']"></mat-header-row>
-      <mat-header-row *matHeaderRowDef="['table-title', 'table-details']"></mat-header-row>
-      <mat-row
-        *matRowDef="let row; columns: displayedColumns"
-        [class.old-kot]="row.isOldKot"
-        [class.new-kot]="row.isNewKot"
-        [class.is-printed]="row.isPrinted && !row.isHappyHour"
-        [class.hh-new]="row.isHappyHour && !row.isPrinted"
-        [class.hh-printed]="row.isPrinted && row.isHappyHour"
-      ></mat-row>
-      <mat-footer-row *matFooterRowDef="['gross-title', 'gross-amount']"></mat-footer-row>
-      <ng-container matColumnDef="gross-title">
-        <mat-footer-cell *matFooterCellDef class="bold">Gross</mat-footer-cell>
-      </ng-container>
-      <ng-container matColumnDef="gross-amount">
-        <mat-footer-cell *matFooterCellDef class="bold right-align">{{
-          bs.grossAmount | async | currency: 'INR'
-        }}</mat-footer-cell>
-      </ng-container>
+  <mat-footer-row *matFooterRowDef="['hh-title', 'hh-amount']"></mat-footer-row>
+  <ng-container matColumnDef="hh-title">
+    <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>
+  </ng-container>
 
-      <mat-footer-row *matFooterRowDef="['hh-title', 'hh-amount']"></mat-footer-row>
-      <ng-container matColumnDef="hh-title">
-        <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>
-      </ng-container>
+  <mat-footer-row *matFooterRowDef="['discount-title', 'discount-amount']"></mat-footer-row>
+  <ng-container matColumnDef="discount-title">
+    <mat-footer-cell *matFooterCellDef class="bold">Discount</mat-footer-cell>
+  </ng-container>
+  <ng-container matColumnDef="discount-amount">
+    <mat-footer-cell *matFooterCellDef class="bold right-align">{{
+      bs.discountAmount | async | currency: 'INR'
+    }}</mat-footer-cell>
+  </ng-container>
 
-      <mat-footer-row *matFooterRowDef="['discount-title', 'discount-amount']"></mat-footer-row>
-      <ng-container matColumnDef="discount-title">
-        <mat-footer-cell *matFooterCellDef class="bold">Discount</mat-footer-cell>
-      </ng-container>
-      <ng-container matColumnDef="discount-amount">
-        <mat-footer-cell *matFooterCellDef class="bold right-align">{{
-          bs.discountAmount | async | currency: 'INR'
-        }}</mat-footer-cell>
-      </ng-container>
+  <mat-footer-row *matFooterRowDef="['tax-title', 'tax-amount']"></mat-footer-row>
+  <ng-container matColumnDef="tax-title">
+    <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>
+  </ng-container>
 
-      <mat-footer-row *matFooterRowDef="['tax-title', 'tax-amount']"></mat-footer-row>
-      <ng-container matColumnDef="tax-title">
-        <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>
-      </ng-container>
+  <mat-footer-row *matFooterRowDef="['amount-title', 'amount-amount']"></mat-footer-row>
+  <ng-container matColumnDef="amount-title">
+    <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>
+  </ng-container>
+</table>
 
-      <mat-footer-row *matFooterRowDef="['amount-title', 'amount-amount']"></mat-footer-row>
-      <ng-container matColumnDef="amount-title">
-        <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>
-      </ng-container>
-    </table>
-  </mat-card-content>
-</mat-card>
 <router-outlet></router-outlet>
diff --git a/bookie/src/app/sales/bills/bills.component.ts b/bookie/src/app/sales/bills/bills.component.ts
index 4ad9878..8839335 100644
--- a/bookie/src/app/sales/bills/bills.component.ts
+++ b/bookie/src/app/sales/bills/bills.component.ts
@@ -1,10 +1,10 @@
 import { AsyncPipe, CurrencyPipe } from '@angular/common';
 import { Component, OnInit, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
@@ -15,7 +15,6 @@ import { AuthService } from '../../auth/auth.service';
 import { BillViewItem } from '../../core/bill-view-item';
 import { Customer } from '../../core/customer';
 import { Table } from '../../core/table';
-import { ToasterService } from '../../core/toaster.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { TableService } from '../../tables/table.service';
 import { BillService } from '../bill.service';
@@ -38,7 +37,7 @@ import { VoucherType } from './voucher-type';
     AsyncPipe,
     CurrencyPipe,
     MatButtonModule,
-    MatCardModule,
+
     MatCheckboxModule,
     MatIconModule,
     MatTableModule,
@@ -50,7 +49,7 @@ export class BillsComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private auth = inject(AuthService);
   bs = inject(BillService);
   private tSer = inject(TableService);
@@ -273,11 +272,11 @@ export class BillsComponent implements OnInit {
       )
       .subscribe({
         next: () => {
-          this.toaster.show('Success', '');
+          this.snackBar.open('', 'Success');
           this.router.navigate(['/sales']);
         },
         error: (x) => {
-          this.toaster.show('Error', x);
+          this.snackBar.open(x, 'Error');
         },
       });
   }
diff --git a/bookie/src/app/sales/home/sales-home.component.html b/bookie/src/app/sales/home/sales-home.component.html
index 89525eb..f624b4e 100644
--- a/bookie/src/app/sales/home/sales-home.component.html
+++ b/bookie/src/app/sales/home/sales-home.component.html
@@ -1,80 +1,76 @@
-<mat-card>
-  <mat-card-content>
-    <div class="tables-grid">
-      <mat-card
-        class="primary flex flex-col square-button"
-        matRipple
-        [routerLink]="['menu-categories']"
-        queryParamsHandling="preserve"
-      >
-        <h3>Add Product</h3>
-      </mat-card>
-      <mat-card
-        class="flex flex-col square-button"
-        matRipple
-        (click)="discount()"
-        [class.disabled]="!discountAllowed()"
-        [class.primary]="discountAllowed()"
-      >
-        <h3>Discount</h3>
-      </mat-card>
-      <mat-card
-        class="flex flex-col square-button"
-        matRipple
-        (click)="printKot()"
-        [class.disabled]="!printKotAllowed()"
-        [class.primary]="printKotAllowed()"
-      >
-        <h3>Print KOT</h3>
-      </mat-card>
-      <mat-card
-        class="flex flex-col square-button"
-        matRipple
-        (click)="printBill()"
-        [class.disabled]="!printBillAllowed()"
-        [class.primary]="printBillAllowed()"
-      >
-        <h3>Print Bill</h3>
-      </mat-card>
-      <mat-card class="flex flex-col square-button warn" matRipple [routerLink]="['/', 'sales', 'tables']">
-        <h3>Back to Tables</h3>
-      </mat-card>
-      <mat-card
-        class="flex flex-col square-button"
-        matRipple
-        (click)="receivePayment()"
-        [class.disabled]="!receivePaymentAllowed()"
-        [class.primary]="receivePaymentAllowed()"
-      >
-        <h3>Receive Payment</h3>
-      </mat-card>
-      <mat-card
-        class="flex flex-col square-button"
-        matRipple
-        (click)="moveTable()"
-        [class.disabled]="!moveTableAllowed()"
-        [class.primary]="moveTableAllowed()"
-      >
-        <h3>Move Table</h3>
-      </mat-card>
-      <mat-card
-        class="flex flex-col square-button"
-        matRipple
-        (click)="cancelBill()"
-        [class.disabled]="!cancelBillAllowed()"
-        [class.primary]="cancelBillAllowed()"
-      >
-        <h3>Cancel Bill</h3>
-      </mat-card>
-      <mat-card
-        class="flex flex-col square-button"
-        matRipple
-        (click)="splitBill()"
-        [class.disabled]="!splitBillAllowed()"
-        [class.primary]="splitBillAllowed()"
-      >
-        <h3>Split Bill</h3>
-      </mat-card>
-    </div>
-  </mat-card-content>
-</mat-card>
+<div class="tables-grid">
+  <mat-card
+    class="primary flex flex-col square-button"
+    matRipple
+    [routerLink]="['menu-categories']"
+    queryParamsHandling="preserve"
+  >
+    <h3>Add Product</h3>
+  </mat-card>
+  <mat-card
+    class="flex flex-col square-button"
+    matRipple
+    (click)="discount()"
+    [class.disabled]="!discountAllowed()"
+    [class.primary]="discountAllowed()"
+  >
+    <h3>Discount</h3>
+  </mat-card>
+  <mat-card
+    class="flex flex-col square-button"
+    matRipple
+    (click)="printKot()"
+    [class.disabled]="!printKotAllowed()"
+    [class.primary]="printKotAllowed()"
+  >
+    <h3>Print KOT</h3>
+  </mat-card>
+  <mat-card
+    class="flex flex-col square-button"
+    matRipple
+    (click)="printBill()"
+    [class.disabled]="!printBillAllowed()"
+    [class.primary]="printBillAllowed()"
+  >
+    <h3>Print Bill</h3>
+  </mat-card>
+  <mat-card class="flex flex-col square-button warn" matRipple [routerLink]="['/', 'sales', 'tables']">
+    <h3>Back to Tables</h3>
+  </mat-card>
+  <mat-card
+    class="flex flex-col square-button"
+    matRipple
+    (click)="receivePayment()"
+    [class.disabled]="!receivePaymentAllowed()"
+    [class.primary]="receivePaymentAllowed()"
+  >
+    <h3>Receive Payment</h3>
+  </mat-card>
+  <mat-card
+    class="flex flex-col square-button"
+    matRipple
+    (click)="moveTable()"
+    [class.disabled]="!moveTableAllowed()"
+    [class.primary]="moveTableAllowed()"
+  >
+    <h3>Move Table</h3>
+  </mat-card>
+  <mat-card
+    class="flex flex-col square-button"
+    matRipple
+    (click)="cancelBill()"
+    [class.disabled]="!cancelBillAllowed()"
+    [class.primary]="cancelBillAllowed()"
+  >
+    <h3>Cancel Bill</h3>
+  </mat-card>
+  <mat-card
+    class="flex flex-col square-button"
+    matRipple
+    (click)="splitBill()"
+    [class.disabled]="!splitBillAllowed()"
+    [class.primary]="splitBillAllowed()"
+  >
+    <h3>Split Bill</h3>
+  </mat-card>
+</div>
diff --git a/bookie/src/app/sales/home/sales-home.component.ts b/bookie/src/app/sales/home/sales-home.component.ts
index 88d3531..0e046ba 100644
--- a/bookie/src/app/sales/home/sales-home.component.ts
+++ b/bookie/src/app/sales/home/sales-home.component.ts
@@ -2,6 +2,7 @@ import { Component, inject } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { MatRippleModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Observable, of as observableOf } from 'rxjs';
 import { map, switchMap, tap } from 'rxjs/operators';
@@ -9,7 +10,6 @@ import { map, switchMap, tap } from 'rxjs/operators';
 import { AuthService } from '../../auth/auth.service';
 import { ReceivePaymentItem } from '../../core/receive-payment-item';
 import { Table } from '../../core/table';
-import { ToasterService } from '../../core/toaster.service';
 import { SaleCategoryService } from '../../sale-category/sale-category.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { TableService } from '../../tables/table.service';
@@ -28,14 +28,14 @@ import { TablesDialogComponent } from '../tables-dialog/tables-dialog.component'
   selector: 'app-sales-home',
   templateUrl: './sales-home.component.html',
   styleUrls: ['./sales-home.component.sass'],
-  imports: [MatCardModule, MatRippleModule, RouterLink],
+  imports: [MatRippleModule, RouterLink, MatCardModule],
 })
 export class SalesHomeComponent {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private auth = inject(AuthService);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private saleCategoryService = inject(SaleCategoryService);
   private tableService = inject(TableService);
   private customerDiscountsService = inject(CustomerDiscountsService);
@@ -64,11 +64,11 @@ export class SalesHomeComponent {
     }
     this.bs.printKot(guestBookId).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigate(['/sales']);
       },
       error: (result) => {
-        this.toaster.show('Error', result);
+        this.snackBar.open(result, 'Error');
       },
     });
   }
@@ -167,11 +167,11 @@ export class SalesHomeComponent {
       )
       .subscribe({
         next: () => {
-          this.toaster.show('Success', '');
+          this.snackBar.open('', 'Success');
           this.router.navigate(['/sales']);
         },
         error: (result) => {
-          this.toaster.show('Error', result);
+          this.snackBar.open(result, 'Error');
         },
       });
   }
@@ -216,11 +216,11 @@ export class SalesHomeComponent {
       )
       .subscribe({
         next: () => {
-          this.toaster.show('Success', '');
+          this.snackBar.open('', 'Success');
           this.router.navigate(['/sales']);
         },
         error: (value) => {
-          this.toaster.show('Error', value);
+          this.snackBar.open(value, 'Error');
         },
       });
   }
@@ -259,11 +259,11 @@ export class SalesHomeComponent {
       )
       .subscribe({
         next: () => {
-          this.toaster.show('Success', '');
+          this.snackBar.open('', 'Success');
           this.router.navigate(['/sales']);
         },
         error: (x) => {
-          this.toaster.show('Error', x);
+          this.snackBar.open(x, 'Error');
         },
       });
   }
@@ -315,11 +315,11 @@ export class SalesHomeComponent {
       )
       .subscribe({
         next: () => {
-          this.toaster.show('Success', '');
+          this.snackBar.open('', 'Success');
           this.router.navigate(['/sales']);
         },
         error: (x) => {
-          this.toaster.show('Error', x);
+          this.snackBar.open(x, 'Error');
         },
       });
   }
@@ -382,11 +382,11 @@ export class SalesHomeComponent {
       )
       .subscribe({
         next: () => {
-          this.toaster.show('Success', '');
+          this.snackBar.open('', 'Success');
           this.router.navigate(['/sales']);
         },
         error: (x) => {
-          this.toaster.show('Error', x);
+          this.snackBar.open(x, 'Error');
         },
       });
   }
diff --git a/bookie/src/app/sales/menu-categories/menu-categories.component.html b/bookie/src/app/sales/menu-categories/menu-categories.component.html
index c815e73..2f5e075 100644
--- a/bookie/src/app/sales/menu-categories/menu-categories.component.html
+++ b/bookie/src/app/sales/menu-categories/menu-categories.component.html
@@ -1,24 +1,15 @@
-<mat-card>
-  <mat-card-content>
-    <div class="tables-grid">
-      <mat-card
-        class="flex flex-col square-button warn"
-        matRipple
-        [routerLink]="['../']"
-        queryParamsHandling="preserve"
-      >
-        <h3>Back</h3>
-      </mat-card>
-      @for (item of list; track item) {
-        <mat-card
-          class="primary flex flex-col square-button"
-          matRipple
-          [routerLink]="['../products', item.id]"
-          queryParamsHandling="preserve"
-        >
-          <h3>{{ item.name }}</h3>
-        </mat-card>
-      }
-    </div>
-  </mat-card-content>
-</mat-card>
+<div class="tables-grid">
+  <mat-card class="flex flex-col square-button warn" matRipple [routerLink]="['../']" queryParamsHandling="preserve">
+    <h3>Back</h3>
+  </mat-card>
+  @for (item of list; track item) {
+    <mat-card
+      class="primary flex flex-col square-button"
+      matRipple
+      [routerLink]="['../products', item.id]"
+      queryParamsHandling="preserve"
+    >
+      <h3>{{ item.name }}</h3>
+    </mat-card>
+  }
+</div>
diff --git a/bookie/src/app/sales/menu-categories/menu-categories.component.ts b/bookie/src/app/sales/menu-categories/menu-categories.component.ts
index dbc17ed..310d654 100644
--- a/bookie/src/app/sales/menu-categories/menu-categories.component.ts
+++ b/bookie/src/app/sales/menu-categories/menu-categories.component.ts
@@ -9,7 +9,7 @@ import { MenuCategory } from '../../core/menu-category';
   selector: 'app-menu-category',
   templateUrl: './menu-categories.component.html',
   styleUrls: ['./menu-categories.component.sass'],
-  imports: [MatCardModule, MatRippleModule, RouterLink],
+  imports: [MatRippleModule, RouterLink, MatCardModule],
 })
 export class MenuCategoriesComponent implements OnInit {
   private route = inject(ActivatedRoute);
diff --git a/bookie/src/app/sales/products/products.component.html b/bookie/src/app/sales/products/products.component.html
index 8d838cf..9b20512 100644
--- a/bookie/src/app/sales/products/products.component.html
+++ b/bookie/src/app/sales/products/products.component.html
@@ -1,27 +1,23 @@
-<mat-card>
-  <mat-card-content>
-    <div class="tables-grid">
-      <mat-card
-        class="flex flex-col square-button warn"
-        matRipple
-        [routerLink]="['../../menu-categories']"
-        queryParamsHandling="preserve"
-      >
-        <h3>Back</h3>
-      </mat-card>
-      @for (item of list; track item) {
-        <mat-card
-          class="flex flex-col square-button"
-          matRipple
-          (click)="addProduct(item)"
-          [class.accent]="item.hasHappyHour"
-          [class.strong-disabled]="item.isNotAvailable"
-          [class.primary]="!item.hasHappyHour && !item.isNotAvailable"
-        >
-          <h3>{{ item.name }}</h3>
-          <span>{{ item.price | currency: 'INR' }}</span>
-        </mat-card>
-      }
-    </div>
-  </mat-card-content>
-</mat-card>
+<div class="tables-grid">
+  <mat-card
+    class="flex flex-col square-button warn"
+    matRipple
+    [routerLink]="['../../menu-categories']"
+    queryParamsHandling="preserve"
+  >
+    <h3>Back</h3>
+  </mat-card>
+  @for (item of list; track item) {
+    <mat-card
+      class="flex flex-col square-button"
+      matRipple
+      (click)="addProduct(item)"
+      [class.accent]="item.hasHappyHour"
+      [class.disabled]="item.isNotAvailable"
+      [class.primary]="!item.hasHappyHour && !item.isNotAvailable"
+    >
+      <h3>{{ item.name }}</h3>
+      <span>{{ item.price | currency: 'INR' }}</span>
+    </mat-card>
+  }
+</div>
diff --git a/bookie/src/app/sales/products/products.component.ts b/bookie/src/app/sales/products/products.component.ts
index c2511d8..c9a9e85 100644
--- a/bookie/src/app/sales/products/products.component.ts
+++ b/bookie/src/app/sales/products/products.component.ts
@@ -11,7 +11,7 @@ import { BillService } from '../bill.service';
   selector: 'app-products',
   templateUrl: './products.component.html',
   styleUrls: ['./products.component.sass'],
-  imports: [CurrencyPipe, MatCardModule, MatRippleModule, RouterLink],
+  imports: [CurrencyPipe, MatRippleModule, RouterLink, MatCardModule],
 })
 export class ProductsComponent implements OnInit {
   private route = inject(ActivatedRoute);
diff --git a/bookie/src/app/sales/running-tables/running-tables.component.html b/bookie/src/app/sales/running-tables/running-tables.component.html
index 923f63b..db5eac0 100644
--- a/bookie/src/app/sales/running-tables/running-tables.component.html
+++ b/bookie/src/app/sales/running-tables/running-tables.component.html
@@ -1,32 +1,27 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title>Running Tables</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <div class="tables-grid">
-      @for (table of list; track table) {
-        <mat-card
-          class="flex flex-col square-button"
-          matRipple
-          (click)="navigateToBill(table)"
-          [class.primary]="table.status !== 'running' && table.status !== 'printed'"
-          [class.accent]="table.status === 'running'"
-          [class.strong-accent]="table.status === 'printed'"
-        >
-          <h3>{{ table.name }}</h3>
-          <span>{{ table.guest }}</span>
-          <span>{{ table.pax ?? '-' }} / {{ table.seats }} / {{ table.section?.name }}</span>
-          @if (table.date) {
-            <span>{{ table.date }}</span>
-          }
-          @if (table.amount) {
-            <span>{{ table.amount | currency: 'INR' }}</span>
-          }
-        </mat-card>
+<h2>Running Tables</h2>
+
+<div class="tables-grid">
+  @for (table of list; track table) {
+    <mat-card
+      class="flex flex-col square-button"
+      matRipple
+      (click)="navigateToBill(table)"
+      [class.primary]="table.status !== 'running' && table.status !== 'printed'"
+      [class.accent]="table.status === 'running'"
+      [class.strong-accent]="table.status === 'printed'"
+    >
+      <h3>{{ table.name }}</h3>
+      <span>{{ table.guest }}</span>
+      <span>{{ table.pax ?? '-' }} / {{ table.seats }} / {{ table.section?.name }}</span>
+      @if (table.date) {
+        <span>{{ table.date }}</span>
       }
-      <mat-card class="flex flex-col square-button strong-primary" matRipple (click)="openBill()">
-        <h3>Open Bill</h3>
-      </mat-card>
-    </div>
-  </mat-card-content>
-</mat-card>
+      @if (table.amount) {
+        <span>{{ table.amount | currency: 'INR' }}</span>
+      }
+    </mat-card>
+  }
+  <mat-card class="flex flex-col square-button strong-primary" matRipple (click)="openBill()">
+    <h3>Open Bill</h3>
+  </mat-card>
+</div>
diff --git a/bookie/src/app/sales/running-tables/running-tables.component.ts b/bookie/src/app/sales/running-tables/running-tables.component.ts
index 6f489c7..b192167 100644
--- a/bookie/src/app/sales/running-tables/running-tables.component.ts
+++ b/bookie/src/app/sales/running-tables/running-tables.component.ts
@@ -3,25 +3,25 @@ import { Component, OnInit, inject } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { MatRippleModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
 import { map } from 'rxjs/operators';
 import { Regime } from 'src/app/core/regime';
 
 import { Table } from '../../core/table';
-import { ToasterService } from '../../core/toaster.service';
 import { BillNumberComponent } from '../bill-number/bill-number.component';
 
 @Component({
   selector: 'app-running-tables',
   templateUrl: './running-tables.component.html',
   styleUrls: ['./running-tables.component.sass'],
-  imports: [CurrencyPipe, MatCardModule, MatRippleModule],
+  imports: [CurrencyPipe, MatRippleModule, MatCardModule],
 })
 export class RunningTablesComponent implements OnInit {
   private dialog = inject(MatDialog);
   private router = inject(Router);
   private route = inject(ActivatedRoute);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
 
   regimes: Regime[] = [];
   list: Table[] = [];
@@ -61,7 +61,7 @@ export class RunningTablesComponent implements OnInit {
       )
       .subscribe({
         next: (x) => this.router.navigate(['/sales', 'bill'], { queryParams: { bill: x } }),
-        error: (x) => this.toaster.show('Error', x),
+        error: (x) => this.snackBar.open(x, 'Error'),
       });
   }
 }
diff --git a/bookie/src/app/sales/tables-dialog/tables-dialog.component.ts b/bookie/src/app/sales/tables-dialog/tables-dialog.component.ts
index 06545d8..50e56d1 100644
--- a/bookie/src/app/sales/tables-dialog/tables-dialog.component.ts
+++ b/bookie/src/app/sales/tables-dialog/tables-dialog.component.ts
@@ -13,7 +13,7 @@ import { Table } from '../../core/table';
   selector: 'app-tables-dialog',
   templateUrl: './tables-dialog.component.html',
   styleUrls: ['./tables-dialog.component.sass'],
-  imports: [CdkScrollableModule, CurrencyPipe, MatButtonModule, MatCardModule, MatDialogModule, MatRippleModule],
+  imports: [CdkScrollableModule, CurrencyPipe, MatButtonModule, MatDialogModule, MatRippleModule, MatCardModule],
 })
 export class TablesDialogComponent {
   dialogRef = inject<MatDialogRef<TablesDialogComponent>>(MatDialogRef);
diff --git a/bookie/src/app/section-printers/section-printer.component.html b/bookie/src/app/section-printers/section-printer.component.html
index 2dabdb0..1d792a2 100644
--- a/bookie/src/app/section-printers/section-printer.component.html
+++ b/bookie/src/app/section-printers/section-printer.component.html
@@ -1,69 +1,62 @@
-<mat-card class="flex-auto lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Printers for Section</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Section</mat-label>
+      <mat-select formControlName="section" (selectionChange)="show($event)">
+        @for (s of sections; track s) {
+          <mat-option [value]="s.id">
+            {{ s.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+  <mat-divider></mat-divider>
+  <mat-table #table [dataSource]="dataSource" formArrayName="saleCategories">
+    <!-- Sale Category Column -->
+    <ng-container matColumnDef="saleCategory">
+      <mat-header-cell *matHeaderCellDef>Sale Category</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.saleCategory?.name ?? 'Default' }}</mat-cell>
+    </ng-container>
+
+    <!-- Printer Column -->
+    <ng-container matColumnDef="printer">
+      <mat-header-cell *matHeaderCellDef>Printer</mat-header-cell>
+      <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i">
         <mat-form-field class="flex-auto">
-          <mat-label>Section</mat-label>
-          <mat-select formControlName="section" (selectionChange)="show($event)">
-            @for (s of sections; track s) {
-              <mat-option [value]="s.id">
-                {{ s.name }}
+          <mat-label>Printer</mat-label>
+          <mat-select formControlName="printer" name="printer">
+            <mat-option>-- Default --</mat-option>
+            @for (p of printers; track p) {
+              <mat-option [value]="p.id">
+                {{ p.name }}
               </mat-option>
             }
           </mat-select>
         </mat-form-field>
-      </div>
-      <mat-divider></mat-divider>
-      <mat-table #table [dataSource]="dataSource" formArrayName="saleCategories">
-        <!-- Sale Category Column -->
-        <ng-container matColumnDef="saleCategory">
-          <mat-header-cell *matHeaderCellDef>Sale Category</mat-header-cell>
-          <mat-cell *matCellDef="let row">{{ row.saleCategory?.name ?? 'Default' }}</mat-cell>
-        </ng-container>
+      </mat-cell>
+    </ng-container>
 
-        <!-- Printer Column -->
-        <ng-container matColumnDef="printer">
-          <mat-header-cell *matHeaderCellDef>Printer</mat-header-cell>
-          <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i">
-            <mat-form-field class="flex-auto">
-              <mat-label>Printer</mat-label>
-              <mat-select formControlName="printer" name="printer">
-                <mat-option>-- Default --</mat-option>
-                @for (p of printers; track p) {
-                  <mat-option [value]="p.id">
-                    {{ p.name }}
-                  </mat-option>
-                }
-              </mat-select>
-            </mat-form-field>
-          </mat-cell>
-        </ng-container>
+    <!-- Copies Column -->
+    <ng-container matColumnDef="copies">
+      <mat-header-cell *matHeaderCellDef>Copies</mat-header-cell>
+      <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i">
+        @if (!!$any(form.get('saleCategories')).at(i).value.printer) {
+          <mat-form-field class="flex-auto">
+            <mat-label>Copies</mat-label>
+            <input matInput type="number" formControlName="copies" />
+          </mat-form-field>
+        }
+      </mat-cell>
+    </ng-container>
 
-        <!-- Copies Column -->
-        <ng-container matColumnDef="copies">
-          <mat-header-cell *matHeaderCellDef>Copies</mat-header-cell>
-          <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i">
-            @if (!!$any(form.get('saleCategories')).at(i).value.printer) {
-              <mat-form-field class="flex-auto">
-                <mat-label>Copies</mat-label>
-                <input matInput type="number" formControlName="copies" />
-              </mat-form-field>
-            }
-          </mat-cell>
-        </ng-container>
-
-        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-        <mat-row *matRowDef="let row; let i = index; columns: displayedColumns"></mat-row>
-      </mat-table>
-    </form>
-  </mat-card-content>
-  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
-    @if (sectionId) {
-      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-    }
-  </mat-card-actions>
-</mat-card>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; let i = index; columns: displayedColumns"></mat-row>
+  </mat-table>
+</form>
+<div class="row-container">
+  <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
+  @if (sectionId) {
+    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  }
+</div>
diff --git a/bookie/src/app/section-printers/section-printer.component.ts b/bookie/src/app/section-printers/section-printer.component.ts
index cf4ae8e..a3aeaf1 100644
--- a/bookie/src/app/section-printers/section-printer.component.ts
+++ b/bookie/src/app/section-printers/section-printer.component.ts
@@ -1,13 +1,13 @@
 import { Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectChange, MatSelectModule } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
@@ -16,7 +16,6 @@ import { map } from 'rxjs/operators';
 import { Printer } from '../core/printer';
 import { Section } from '../core/section';
 import { SectionPrinter } from '../core/section-printer';
-import { ToasterService } from '../core/toaster.service';
 import { ConfirmDialogComponent } from '../shared/confirm-dialog/confirm-dialog.component';
 import { SectionPrinterDataSource } from './section-printer-datasource';
 import { SectionPrinterService } from './section-printer.service';
@@ -27,7 +26,7 @@ import { SectionPrinterService } from './section-printer.service';
   styleUrls: ['./section-printer.component.css'],
   imports: [
     MatButtonModule,
-    MatCardModule,
+
     MatDividerModule,
     MatFormFieldModule,
     MatInputModule,
@@ -40,7 +39,7 @@ import { SectionPrinterService } from './section-printer.service';
 export class SectionPrinterComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private dialog = inject(MatDialog);
   private ser = inject(SectionPrinterService);
 
@@ -114,11 +113,11 @@ export class SectionPrinterComponent implements OnInit {
   save() {
     this.ser.save(this.sectionId, this.getItem()).subscribe({
       next: (result: SectionPrinter[]) => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.showItem(result);
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
@@ -126,10 +125,10 @@ export class SectionPrinterComponent implements OnInit {
   delete() {
     this.ser.delete(this.sectionId).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/sections/section-detail/section-detail.component.html b/bookie/src/app/sections/section-detail/section-detail.component.html
index 4a19a0d..64f0fea 100644
--- a/bookie/src/app/sections/section-detail/section-detail.component.html
+++ b/bookie/src/app/sections/section-detail/section-detail.component.html
@@ -1,21 +1,16 @@
-<mat-card class="flex-auto lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Section</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Name</mat-label>
-          <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
-        </mat-form-field>
-      </div>
-    </form>
-  </mat-card-content>
-  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
-    @if (!!item.id) {
-      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-    }
-  </mat-card-actions>
-</mat-card>
+<h2>Section</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Name</mat-label>
+      <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
+    </mat-form-field>
+  </div>
+</form>
+
+<div class="row-container">
+  <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
+  @if (!!item.id) {
+    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  }
+</div>
diff --git a/bookie/src/app/sections/section-detail/section-detail.component.ts b/bookie/src/app/sections/section-detail/section-detail.component.ts
index b6d6530..45b8366 100644
--- a/bookie/src/app/sections/section-detail/section-detail.component.ts
+++ b/bookie/src/app/sections/section-detail/section-detail.component.ts
@@ -1,14 +1,13 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { Section } from '../../core/section';
-import { ToasterService } from '../../core/toaster.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { SectionService } from '../section.service';
 
@@ -16,13 +15,13 @@ import { SectionService } from '../section.service';
   selector: 'app-section-detail',
   templateUrl: './section-detail.component.html',
   styleUrls: ['./section-detail.component.css'],
-  imports: [MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule],
+  imports: [MatButtonModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule],
 })
 export class SectionDetailComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(SectionService);
 
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
@@ -64,11 +63,11 @@ export class SectionDetailComponent implements OnInit, AfterViewInit {
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/sections');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
@@ -76,11 +75,11 @@ export class SectionDetailComponent implements OnInit, AfterViewInit {
   delete() {
     this.ser.delete(this.item.id as string).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/sections');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/sections/section-list/section-list.component.html b/bookie/src/app/sections/section-list/section-list.component.html
index 2692d0a..6de3c5c 100644
--- a/bookie/src/app/sections/section-list/section-list.component.html
+++ b/bookie/src/app/sections/section-list/section-list.component.html
@@ -1,25 +1,19 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Sections</mat-card-title>
-      <a mat-button [routerLink]="['/sections', 'new']">
-        <mat-icon>add_box</mat-icon>
-        Add
-      </a>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          ><a [routerLink]="['/sections', row.id]">{{ row.name }}</a></mat-cell
-        >
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Sections</span>
+  <a mat-button [routerLink]="['/sections', 'new']">
+    <mat-icon>add_box</mat-icon>
+    Add
+  </a>
+</h2>
+<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      ><a [routerLink]="['/sections', row.id]">{{ row.name }}</a></mat-cell
+    >
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/sections/section-list/section-list.component.ts b/bookie/src/app/sections/section-list/section-list.component.ts
index e3b3eab..d70a497 100644
--- a/bookie/src/app/sections/section-list/section-list.component.ts
+++ b/bookie/src/app/sections/section-list/section-list.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnInit, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, RouterLink } from '@angular/router';
@@ -12,7 +11,7 @@ import { SectionListDataSource } from './section-list-datasource';
   selector: 'app-section-list',
   templateUrl: './section-list.component.html',
   styleUrls: ['./section-list.component.css'],
-  imports: [MatButtonModule, MatCardModule, MatIconModule, MatTableModule, RouterLink],
+  imports: [MatButtonModule, MatIconModule, MatTableModule, RouterLink],
 })
 export class SectionListComponent implements OnInit {
   private route = inject(ActivatedRoute);
diff --git a/bookie/src/app/settings/settings.component.ts b/bookie/src/app/settings/settings.component.ts
index e4d47af..1c19f10 100644
--- a/bookie/src/app/settings/settings.component.ts
+++ b/bookie/src/app/settings/settings.component.ts
@@ -7,13 +7,13 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTabsModule } from '@angular/material/tabs';
 import { ActivatedRoute, Router } from '@angular/router';
 import moment from 'moment';
 
 import { environment } from '../app.environment';
 import { AuthService } from '../auth/auth.service';
-import { ToasterService } from '../core/toaster.service';
 import { SettingsService } from './settings.service';
 
 @Component({
@@ -29,13 +29,14 @@ import { SettingsService } from './settings.service';
     MatSlideToggleModule,
     MatTabsModule,
     ReactiveFormsModule,
+    MatCardModule,
   ],
 })
 export class SettingsComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   auth = inject(AuthService);
   private ser = inject(SettingsService);
 
@@ -87,15 +88,15 @@ export class SettingsComponent implements OnInit {
     const finishDate = moment(formModel.finishDate).format('DD-MMM-YYYY');
 
     if (!this.beerFile || !this.saleFile) {
-      this.toaster.show('Danger', 'Please choose both files first!');
+      this.snackBar.open('Please choose both files first!', 'Danger');
       return;
     }
     this.ser.runMaintenance(startDate, finishDate, this.beerFile, this.saleFile).subscribe({
       next: () => {
-        this.toaster.show('Success', 'Maintenance done');
+        this.snackBar.open('Maintenance done', 'Success');
       },
       error: (error) => {
-        this.toaster.show('Danger', error);
+        this.snackBar.open(error, 'Danger');
       },
     });
   }
diff --git a/bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.html b/bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.html
index 1b227c6..51a1d74 100644
--- a/bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.html
+++ b/bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.html
@@ -1,44 +1,39 @@
-<mat-card class="flex-auto lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Settle Option</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Name</mat-label>
-          <input matInput #nameElement formControlName="name" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Voucher Type</mat-label>
-          <mat-select formControlName="voucherType">
-            @for (vt of voucherTypes; track vt) {
-              <mat-option [value]="vt.id">
-                {{ vt.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field class="flex-auto">
-          <mat-label>Reporting Level</mat-label>
-          <mat-select formControlName="reportingLevel">
-            @for (rl of reportingLevel; track rl) {
-              <mat-option [value]="rl.id">
-                {{ rl.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-        <mat-checkbox formControlName="hasReason">Has Reason?</mat-checkbox>
-      </div>
-    </form>
-  </mat-card-content>
-  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
-    @if (!!item.id) {
-      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-    }
-  </mat-card-actions>
-</mat-card>
+<h2>Settle Option</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Name</mat-label>
+      <input matInput #nameElement formControlName="name" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Voucher Type</mat-label>
+      <mat-select formControlName="voucherType">
+        @for (vt of voucherTypes; track vt) {
+          <mat-option [value]="vt.id">
+            {{ vt.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field class="flex-auto">
+      <mat-label>Reporting Level</mat-label>
+      <mat-select formControlName="reportingLevel">
+        @for (rl of reportingLevel; track rl) {
+          <mat-option [value]="rl.id">
+            {{ rl.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+    <mat-checkbox formControlName="hasReason">Has Reason?</mat-checkbox>
+  </div>
+</form>
+
+<div class="row-container">
+  <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
+  @if (!!item.id) {
+    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  }
+</div>
diff --git a/bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.ts b/bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.ts
index 5731a2f..a715355 100644
--- a/bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.ts
+++ b/bookie/src/app/settle-option/settle-option-detail/settle-option-detail.component.ts
@@ -1,18 +1,17 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { ReportingLevel } from '../../core/reporting-level';
 import { SettleOption } from '../../core/settle-option';
-import { ToasterService } from '../../core/toaster.service';
 import { VoucherType } from '../../sales/bills/voucher-type';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { SettleOptionService } from '../settle-option.service';
@@ -23,7 +22,7 @@ import { SettleOptionService } from '../settle-option.service';
   styleUrls: ['./settle-option-detail.component.css'],
   imports: [
     MatButtonModule,
-    MatCardModule,
+
     MatCheckboxModule,
     MatFormFieldModule,
     MatInputModule,
@@ -36,7 +35,7 @@ export class SettleOptionDetailComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(SettleOptionService);
 
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
@@ -95,11 +94,11 @@ export class SettleOptionDetailComponent implements OnInit, AfterViewInit {
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/settle-options');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
@@ -107,11 +106,11 @@ export class SettleOptionDetailComponent implements OnInit, AfterViewInit {
   delete() {
     this.ser.delete(this.item.id).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/settle-options');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/settle-option/settle-option-list/settle-option-list.component.html b/bookie/src/app/settle-option/settle-option-list/settle-option-list.component.html
index 169e182..5af9852 100644
--- a/bookie/src/app/settle-option/settle-option-list/settle-option-list.component.html
+++ b/bookie/src/app/settle-option/settle-option-list/settle-option-list.component.html
@@ -1,49 +1,43 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Settle Options</mat-card-title>
-      <a mat-button [routerLink]="['/settle-options', 'new']">
-        <mat-icon>add_box</mat-icon>
-        Add
-      </a>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          ><a [routerLink]="['/settle-options', row.id]">{{ row.name }}</a></mat-cell
-        >
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Settle Options</span>
+  <a mat-button [routerLink]="['/settle-options', 'new']">
+    <mat-icon>add_box</mat-icon>
+    Add
+  </a>
+</h2>
+<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      ><a [routerLink]="['/settle-options', row.id]">{{ row.name }}</a></mat-cell
+    >
+  </ng-container>
 
-      <!-- Voucher Type Column -->
-      <ng-container matColumnDef="voucherType">
-        <mat-header-cell *matHeaderCellDef>Voucher Type</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ voucherType(row.voucherType) }}</mat-cell>
-      </ng-container>
+  <!-- Voucher Type Column -->
+  <ng-container matColumnDef="voucherType">
+    <mat-header-cell *matHeaderCellDef>Voucher Type</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ voucherType(row.voucherType) }}</mat-cell>
+  </ng-container>
 
-      <!-- Reporting Level Column -->
-      <ng-container matColumnDef="reportingLevel">
-        <mat-header-cell *matHeaderCellDef>Reporting Level</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ reportingLevel(row.reportingLevel) }}</mat-cell>
-      </ng-container>
+  <!-- Reporting Level Column -->
+  <ng-container matColumnDef="reportingLevel">
+    <mat-header-cell *matHeaderCellDef>Reporting Level</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ reportingLevel(row.reportingLevel) }}</mat-cell>
+  </ng-container>
 
-      <!-- Has Reason Column -->
-      <ng-container matColumnDef="hasReason">
-        <mat-header-cell *matHeaderCellDef>Has Reason?</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.hasReason }}</mat-cell>
-      </ng-container>
+  <!-- Has Reason Column -->
+  <ng-container matColumnDef="hasReason">
+    <mat-header-cell *matHeaderCellDef>Has Reason?</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.hasReason }}</mat-cell>
+  </ng-container>
 
-      <!-- Is Fixture Column -->
-      <ng-container matColumnDef="isFixture">
-        <mat-header-cell *matHeaderCellDef>Fixture?</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.isFixture }}</mat-cell>
-      </ng-container>
+  <!-- Is Fixture Column -->
+  <ng-container matColumnDef="isFixture">
+    <mat-header-cell *matHeaderCellDef>Fixture?</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.isFixture }}</mat-cell>
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/settle-option/settle-option-list/settle-option-list.component.ts b/bookie/src/app/settle-option/settle-option-list/settle-option-list.component.ts
index abf33c7..a400d53 100644
--- a/bookie/src/app/settle-option/settle-option-list/settle-option-list.component.ts
+++ b/bookie/src/app/settle-option/settle-option-list/settle-option-list.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
@@ -9,7 +9,6 @@ import { map } from 'rxjs/operators';
 
 import { ReportingLevel } from '../../core/reporting-level';
 import { SettleOption } from '../../core/settle-option';
-import { ToasterService } from '../../core/toaster.service';
 import { VoucherType } from '../../sales/bills/voucher-type';
 import { SettleOptionService } from '../settle-option.service';
 import { SettleOptionListDatasource } from './settle-option-list-datasource';
@@ -18,12 +17,12 @@ import { SettleOptionListDatasource } from './settle-option-list-datasource';
   selector: 'app-settle-option-list',
   templateUrl: './settle-option-list.component.html',
   styleUrls: ['./settle-option-list.component.css'],
-  imports: [MatButtonModule, MatCardModule, MatIconModule, MatTableModule, RouterLink],
+  imports: [MatButtonModule, MatIconModule, MatTableModule, RouterLink],
 })
 export class SettleOptionListComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(SettleOptionService);
 
   // @ViewChild('table', { static: true }) table?: MatTable<SettleOption>;
diff --git a/bookie/src/app/tables/table-detail/table-detail.component.html b/bookie/src/app/tables/table-detail/table-detail.component.html
index 9d5d98a..daf342b 100644
--- a/bookie/src/app/tables/table-detail/table-detail.component.html
+++ b/bookie/src/app/tables/table-detail/table-detail.component.html
@@ -1,42 +1,37 @@
-<mat-card class="flex-auto lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Table</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Name</mat-label>
-          <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Seats</mat-label>
-          <input matInput type="number" formControlName="seats" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Section</mat-label>
-          <mat-select formControlName="section">
-            @for (s of sections; track s) {
-              <mat-option [value]="s.id">
-                {{ s.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
-      </div>
-    </form>
-  </mat-card-content>
-  <mat-card-actions class="row-container">
-    <button mat-raised-button (click)="save()" class="" color="primary">Save</button>
-    @if (!!item.id) {
-      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-    }
-  </mat-card-actions>
-</mat-card>
+<h2>Table</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Name</mat-label>
+      <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Seats</mat-label>
+      <input matInput type="number" formControlName="seats" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Section</mat-label>
+      <mat-select formControlName="section">
+        @for (s of sections; track s) {
+          <mat-option [value]="s.id">
+            {{ s.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
+  </div>
+</form>
+
+<div class="row-container">
+  <button mat-raised-button (click)="save()" class="" color="primary">Save</button>
+  @if (!!item.id) {
+    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  }
+</div>
diff --git a/bookie/src/app/tables/table-detail/table-detail.component.ts b/bookie/src/app/tables/table-detail/table-detail.component.ts
index 3e89502..f1d986c 100644
--- a/bookie/src/app/tables/table-detail/table-detail.component.ts
+++ b/bookie/src/app/tables/table-detail/table-detail.component.ts
@@ -1,18 +1,17 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { Section } from '../../core/section';
 import { Table } from '../../core/table';
-import { ToasterService } from '../../core/toaster.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { TableService } from '../table.service';
 
@@ -22,7 +21,7 @@ import { TableService } from '../table.service';
   styleUrls: ['./table-detail.component.css'],
   imports: [
     MatButtonModule,
-    MatCardModule,
+
     MatCheckboxModule,
     MatFormFieldModule,
     MatInputModule,
@@ -35,7 +34,7 @@ export class TableDetailComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(TableService);
 
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
@@ -88,11 +87,11 @@ export class TableDetailComponent implements OnInit, AfterViewInit {
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/tables');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
@@ -100,11 +99,11 @@ export class TableDetailComponent implements OnInit, AfterViewInit {
   delete() {
     this.ser.delete(this.item.id as string).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/tables');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/tables/table-list/table-list.component.html b/bookie/src/app/tables/table-list/table-list.component.html
index a860334..77d133e 100644
--- a/bookie/src/app/tables/table-list/table-list.component.html
+++ b/bookie/src/app/tables/table-list/table-list.component.html
@@ -1,51 +1,46 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Tables</mat-card-title>
-      <button mat-button (click)="updateSortOrder()">Update Order</button>
-      <a mat-button [routerLink]="['/tables', 'new']">
-        <mat-icon>add_box</mat-icon>
-        Add
-      </a>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <mat-table
-      #table
-      cdkDropList
-      [dataSource]="dataSource"
-      [cdkDropListData]="dataSource"
-      aria-label="Elements"
-      (cdkDropListDropped)="dropTable($event)"
+<h2 class="row-container space-between">
+  <span>Tables</span>
+  <button mat-button (click)="updateSortOrder()">Update Order</button>
+  <a mat-button [routerLink]="['/tables', 'new']">
+    <mat-icon>add_box</mat-icon>
+    Add
+  </a>
+</h2>
+
+<mat-table
+  #table
+  cdkDropList
+  [dataSource]="dataSource"
+  [cdkDropListData]="dataSource"
+  aria-label="Elements"
+  (cdkDropListDropped)="dropTable($event)"
+>
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      ><a [routerLink]="['/tables', row.id]">{{ row.name }}</a></mat-cell
     >
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          ><a [routerLink]="['/tables', row.id]">{{ row.name }}</a></mat-cell
-        >
-      </ng-container>
+  </ng-container>
 
-      <!-- Seats Column -->
-      <ng-container matColumnDef="seats">
-        <mat-header-cell *matHeaderCellDef>Seats</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.seats }}</mat-cell>
-      </ng-container>
+  <!-- Seats Column -->
+  <ng-container matColumnDef="seats">
+    <mat-header-cell *matHeaderCellDef>Seats</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.seats }}</mat-cell>
+  </ng-container>
 
-      <!-- Section Column -->
-      <ng-container matColumnDef="section">
-        <mat-header-cell *matHeaderCellDef>Section</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.section.name }}</mat-cell>
-      </ng-container>
+  <!-- Section Column -->
+  <ng-container matColumnDef="section">
+    <mat-header-cell *matHeaderCellDef>Section</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.section.name }}</mat-cell>
+  </ng-container>
 
-      <!-- Is Active Column -->
-      <ng-container matColumnDef="isActive">
-        <mat-header-cell *matHeaderCellDef>Is Active?</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.isActive }}</mat-cell>
-      </ng-container>
+  <!-- Is Active Column -->
+  <ng-container matColumnDef="isActive">
+    <mat-header-cell *matHeaderCellDef>Is Active?</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.isActive }}</mat-cell>
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns" cdkDrag [cdkDragData]="row"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns" cdkDrag [cdkDragData]="row"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/tables/table-list/table-list.component.css b/bookie/src/app/tables/table-list/table-list.component.sass
similarity index 100%
rename from bookie/src/app/tables/table-list/table-list.component.css
rename to bookie/src/app/tables/table-list/table-list.component.sass
diff --git a/bookie/src/app/tables/table-list/table-list.component.ts b/bookie/src/app/tables/table-list/table-list.component.ts
index 83a63a7..2cd8a11 100644
--- a/bookie/src/app/tables/table-list/table-list.component.ts
+++ b/bookie/src/app/tables/table-list/table-list.component.ts
@@ -1,27 +1,27 @@
 import { CdkDragDrop, moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { Component, OnInit, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
 
 import { Table } from '../../core/table';
-import { ToasterService } from '../../core/toaster.service';
 import { TableService } from '../table.service';
 import { TableListDataSource } from './table-list-datasource';
 
 @Component({
   selector: 'app-table-list',
   templateUrl: './table-list.component.html',
-  styleUrls: ['./table-list.component.css'],
-  imports: [DragDropModule, MatButtonModule, MatCardModule, MatIconModule, MatTableModule, RouterLink],
+  styleUrls: ['./table-list.component.sass'],
+  imports: [DragDropModule, MatButtonModule, MatIconModule, MatTableModule, RouterLink, MatToolbarModule],
 })
 export class TableListComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(TableService);
 
   // @ViewChild('table', { static: true }) table?: MatTable<Table>;
@@ -48,10 +48,10 @@ export class TableListComponent implements OnInit {
   updateSortOrder() {
     this.ser.updateSortOrder(this.list).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/tax-report/tax-report.component.html b/bookie/src/app/tax-report/tax-report.component.html
index d563ec7..5b57794 100644
--- a/bookie/src/app/tax-report/tax-report.component.html
+++ b/bookie/src/app/tax-report/tax-report.component.html
@@ -1,69 +1,64 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Tax Report</mat-card-title>
-      <button mat-icon-button (click)="exportCsv()">
-        <mat-icon>save_alt</mat-icon>
-      </button>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto basis-2-5">
-          <mat-label>Start Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="startDate"
-            (focus)="startDate.open()"
-            formControlName="startDate"
-            autocomplete="off"
-          />
-          <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
-          <mat-datepicker #startDate></mat-datepicker>
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-2-5">
-          <mat-label>Finish Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="finishDate"
-            (focus)="finishDate.open()"
-            formControlName="finishDate"
-            autocomplete="off"
-          />
-          <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
-          <mat-datepicker #finishDate></mat-datepicker>
-        </mat-form-field>
-        <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
-      </div>
-    </form>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Tax Report</span>
+  <button mat-icon-button (click)="exportCsv()">
+    <mat-icon>save_alt</mat-icon>
+  </button>
+</h2>
 
-      <!-- Tax Rate Column -->
-      <ng-container matColumnDef="taxRate">
-        <mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{ row.taxRate | percent: '1.2-2' }}</mat-cell>
-      </ng-container>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container sm:max-lg:flex-col">
+    <mat-form-field class="flex-auto basis-2-5">
+      <mat-label>Start Date</mat-label>
+      <input
+        matInput
+        [matDatepicker]="startDate"
+        (focus)="startDate.open()"
+        formControlName="startDate"
+        autocomplete="off"
+      />
+      <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
+      <mat-datepicker #startDate></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field class="flex-auto basis-2-5">
+      <mat-label>Finish Date</mat-label>
+      <input
+        matInput
+        [matDatepicker]="finishDate"
+        (focus)="finishDate.open()"
+        formControlName="finishDate"
+        autocomplete="off"
+      />
+      <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
+      <mat-datepicker #finishDate></mat-datepicker>
+    </mat-form-field>
+    <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
+  </div>
+</form>
+<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
+  </ng-container>
 
-      <!-- Sale Amount Column -->
-      <ng-container matColumnDef="saleAmount">
-        <mat-header-cell *matHeaderCellDef class="right">Sale</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{ row.saleAmount | currency: 'INR' }}</mat-cell>
-      </ng-container>
+  <!-- Tax Rate Column -->
+  <ng-container matColumnDef="taxRate">
+    <mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right">{{ row.taxRate | percent: '1.2-2' }}</mat-cell>
+  </ng-container>
 
-      <!-- Tax Amount Column -->
-      <ng-container matColumnDef="taxAmount">
-        <mat-header-cell *matHeaderCellDef class="right">Tax</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
-      </ng-container>
+  <!-- Sale Amount Column -->
+  <ng-container matColumnDef="saleAmount">
+    <mat-header-cell *matHeaderCellDef class="right">Sale</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right">{{ row.saleAmount | currency: 'INR' }}</mat-cell>
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <!-- Tax Amount Column -->
+  <ng-container matColumnDef="taxAmount">
+    <mat-header-cell *matHeaderCellDef class="right">Tax</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/tax-report/tax-report.component.ts b/bookie/src/app/tax-report/tax-report.component.ts
index 359baf4..4475288 100644
--- a/bookie/src/app/tax-report/tax-report.component.ts
+++ b/bookie/src/app/tax-report/tax-report.component.ts
@@ -2,7 +2,6 @@ import { PercentPipe, CurrencyPipe } from '@angular/common';
 import { Component, OnInit, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -22,7 +21,7 @@ import { TaxReportDatasource } from './tax-report-datasource';
   imports: [
     CurrencyPipe,
     MatButtonModule,
-    MatCardModule,
+
     MatDatepickerModule,
     MatFormFieldModule,
     MatIconModule,
diff --git a/bookie/src/app/taxes/tax-detail/tax-detail.component.html b/bookie/src/app/taxes/tax-detail/tax-detail.component.html
index cb577f5..922f8b8 100644
--- a/bookie/src/app/taxes/tax-detail/tax-detail.component.html
+++ b/bookie/src/app/taxes/tax-detail/tax-detail.component.html
@@ -1,41 +1,36 @@
-<mat-card class="flex-auto lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Tax</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Name</mat-label>
-          <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
-          <mat-hint> Format for GST: ST GST &#64; x% (1/2) ; CGST &#64; x% (1/2) </mat-hint>
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Rate</mat-label>
-          <input matInput type="number" formControlName="rate" class="right-align" />
-          <span matSuffix>%</span>
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Regime</mat-label>
-          <mat-select formControlName="regime">
-            @for (reg of regimes; track reg) {
-              <mat-option [value]="reg.id">
-                {{ reg.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-      </div>
-    </form>
-  </mat-card-content>
-  <mat-card-actions class="row-container">
-    <button mat-raised-button [disabled]="item.isFixture" color="primary" class="" (click)="save()">Save</button>
-    @if (!!item.id) {
-      <button mat-raised-button [disabled]="item.isFixture" color="warn" (click)="confirmDelete()">Delete</button>
-    }
-  </mat-card-actions>
-</mat-card>
+<h2>Tax</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Name</mat-label>
+      <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
+      <mat-hint> Format for GST: ST GST &#64; x% (1/2) ; CGST &#64; x% (1/2) </mat-hint>
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Rate</mat-label>
+      <input matInput type="number" formControlName="rate" class="right-align" />
+      <span matSuffix>%</span>
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Regime</mat-label>
+      <mat-select formControlName="regime">
+        @for (reg of regimes; track reg) {
+          <mat-option [value]="reg.id">
+            {{ reg.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+</form>
+
+<div class="row-container">
+  <button mat-raised-button [disabled]="item.isFixture" color="primary" class="" (click)="save()">Save</button>
+  @if (!!item.id) {
+    <button mat-raised-button [disabled]="item.isFixture" color="warn" (click)="confirmDelete()">Delete</button>
+  }
+</div>
diff --git a/bookie/src/app/taxes/tax-detail/tax-detail.component.ts b/bookie/src/app/taxes/tax-detail/tax-detail.component.ts
index 5594032..f9096dd 100644
--- a/bookie/src/app/taxes/tax-detail/tax-detail.component.ts
+++ b/bookie/src/app/taxes/tax-detail/tax-detail.component.ts
@@ -1,18 +1,17 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 import { round } from 'mathjs';
 import { Regime } from 'src/app/core/regime';
 
 import { Tax } from '../../core/tax';
-import { ToasterService } from '../../core/toaster.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { TaxService } from '../tax.service';
 
@@ -20,21 +19,13 @@ import { TaxService } from '../tax.service';
   selector: 'app-tax-detail',
   templateUrl: './tax-detail.component.html',
   styleUrls: ['./tax-detail.component.css'],
-  imports: [
-    MatButtonModule,
-    MatCardModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatOptionModule,
-    MatSelectModule,
-    ReactiveFormsModule,
-  ],
+  imports: [MatButtonModule, MatFormFieldModule, MatInputModule, MatOptionModule, MatSelectModule, ReactiveFormsModule],
 })
 export class TaxDetailComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(TaxService);
 
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
@@ -84,11 +75,11 @@ export class TaxDetailComponent implements OnInit, AfterViewInit {
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/taxes');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
@@ -96,11 +87,11 @@ export class TaxDetailComponent implements OnInit, AfterViewInit {
   delete() {
     this.ser.delete(this.item.id as string).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/taxes');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/taxes/tax-list/tax-list.component.html b/bookie/src/app/taxes/tax-list/tax-list.component.html
index 1855d4f..745dfc6 100644
--- a/bookie/src/app/taxes/tax-list/tax-list.component.html
+++ b/bookie/src/app/taxes/tax-list/tax-list.component.html
@@ -1,43 +1,37 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Taxes</mat-card-title>
-      <a mat-button [routerLink]="['/taxes', 'new']">
-        <mat-icon>add_box</mat-icon>
-        Add
-      </a>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          ><a [routerLink]="['/taxes', row.id]">{{ row.name }}</a></mat-cell
-        >
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Taxes</span>
+  <a mat-button [routerLink]="['/taxes', 'new']">
+    <mat-icon>add_box</mat-icon>
+    Add
+  </a>
+</h2>
+<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      ><a [routerLink]="['/taxes', row.id]">{{ row.name }}</a></mat-cell
+    >
+  </ng-container>
 
-      <!-- Rate Column -->
-      <ng-container matColumnDef="rate">
-        <mat-header-cell *matHeaderCellDef>Rate</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.rate | percent: '1.2-2' }}</mat-cell>
-      </ng-container>
+  <!-- Rate Column -->
+  <ng-container matColumnDef="rate">
+    <mat-header-cell *matHeaderCellDef>Rate</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.rate | percent: '1.2-2' }}</mat-cell>
+  </ng-container>
 
-      <!-- Regime Column -->
-      <ng-container matColumnDef="regime">
-        <mat-header-cell *matHeaderCellDef>Regime</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.regime.name }}</mat-cell>
-      </ng-container>
+  <!-- Regime Column -->
+  <ng-container matColumnDef="regime">
+    <mat-header-cell *matHeaderCellDef>Regime</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.regime.name }}</mat-cell>
+  </ng-container>
 
-      <!-- Is Fixture Column -->
-      <ng-container matColumnDef="isFixture">
-        <mat-header-cell *matHeaderCellDef>Is Fixture?</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.isFixture }}</mat-cell>
-      </ng-container>
+  <!-- Is Fixture Column -->
+  <ng-container matColumnDef="isFixture">
+    <mat-header-cell *matHeaderCellDef>Is Fixture?</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.isFixture }}</mat-cell>
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/taxes/tax-list/tax-list.component.ts b/bookie/src/app/taxes/tax-list/tax-list.component.ts
index 30d3704..6a2adf3 100644
--- a/bookie/src/app/taxes/tax-list/tax-list.component.ts
+++ b/bookie/src/app/taxes/tax-list/tax-list.component.ts
@@ -1,7 +1,6 @@
 import { PercentPipe } from '@angular/common';
 import { Component, OnInit, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, RouterLink } from '@angular/router';
@@ -13,7 +12,7 @@ import { TaxListDataSource } from './tax-list-datasource';
   selector: 'app-tax-list',
   templateUrl: './tax-list.component.html',
   styleUrls: ['./tax-list.component.css'],
-  imports: [MatButtonModule, MatCardModule, MatIconModule, MatTableModule, PercentPipe, RouterLink],
+  imports: [MatButtonModule, MatIconModule, MatTableModule, PercentPipe, RouterLink],
 })
 export class TaxListComponent implements OnInit {
   private route = inject(ActivatedRoute);
diff --git a/bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.html b/bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.html
index c14c243..4b8f110 100644
--- a/bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.html
+++ b/bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.html
@@ -1,79 +1,74 @@
-<mat-card class="flex-auto lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Product</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Product ID</mat-label>
-          <input matInput formControlName="id" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto basis-3-4">
-          <mat-label>Name</mat-label>
-          <input matInput #name formControlName="name" />
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-1-4">
-          <mat-label>Units</mat-label>
-          <input matInput formControlName="units" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Price</mat-label>
-          <input matInput type="number" formControlName="price" />
-        </mat-form-field>
-        <mat-form-field class="flex-auto">
-          <mat-label>Quantity</mat-label>
-          <input matInput type="number" formControlName="quantity" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-checkbox formControlName="hasHappyHour">Has Happy Hour?</mat-checkbox>
-        <mat-checkbox formControlName="isNotAvailable">Is Not Available?</mat-checkbox>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Menu Category</mat-label>
-          <mat-select formControlName="menuCategory">
-            @for (mc of menuCategories; track mc) {
-              <mat-option [value]="mc.id">
-                {{ mc.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field class="flex-auto">
-          <mat-label>Sale Category</mat-label>
-          <mat-select formControlName="saleCategory">
-            @for (sc of saleCategories; track sc) {
-              <mat-option [value]="sc.id">
-                {{ sc.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto basis-1-2">
-          <mat-label>Valid From</mat-label>
-          <input matInput [matDatepicker]="validFrom" formControlName="validFrom" autocomplete="off" />
-          <mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
-          <mat-datepicker #validFrom></mat-datepicker>
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-1-2">
-          <mat-label>Valid Till</mat-label>
-          <input matInput [matDatepicker]="validTill" formControlName="validTill" autocomplete="off" />
-          <mat-datepicker-toggle matSuffix [for]="validTill"></mat-datepicker-toggle>
-          <mat-datepicker #validTill></mat-datepicker>
-        </mat-form-field>
-      </div>
-    </form>
-  </mat-card-content>
-  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="" (click)="update()">Update</button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-  </mat-card-actions>
-</mat-card>
+<h2>Product</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Product ID</mat-label>
+      <input matInput formControlName="id" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto basis-3-4">
+      <mat-label>Name</mat-label>
+      <input matInput #name formControlName="name" />
+    </mat-form-field>
+    <mat-form-field class="flex-auto basis-1-4">
+      <mat-label>Units</mat-label>
+      <input matInput formControlName="units" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Price</mat-label>
+      <input matInput type="number" formControlName="price" />
+    </mat-form-field>
+    <mat-form-field class="flex-auto">
+      <mat-label>Quantity</mat-label>
+      <input matInput type="number" formControlName="quantity" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-checkbox formControlName="hasHappyHour">Has Happy Hour?</mat-checkbox>
+    <mat-checkbox formControlName="isNotAvailable">Is Not Available?</mat-checkbox>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Menu Category</mat-label>
+      <mat-select formControlName="menuCategory">
+        @for (mc of menuCategories; track mc) {
+          <mat-option [value]="mc.id">
+            {{ mc.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field class="flex-auto">
+      <mat-label>Sale Category</mat-label>
+      <mat-select formControlName="saleCategory">
+        @for (sc of saleCategories; track sc) {
+          <mat-option [value]="sc.id">
+            {{ sc.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto basis-1-2">
+      <mat-label>Valid From</mat-label>
+      <input matInput [matDatepicker]="validFrom" formControlName="validFrom" autocomplete="off" />
+      <mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
+      <mat-datepicker #validFrom></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field class="flex-auto basis-1-2">
+      <mat-label>Valid Till</mat-label>
+      <input matInput [matDatepicker]="validTill" formControlName="validTill" autocomplete="off" />
+      <mat-datepicker-toggle matSuffix [for]="validTill"></mat-datepicker-toggle>
+      <mat-datepicker #validTill></mat-datepicker>
+    </mat-form-field>
+  </div>
+</form>
+
+<div class="row-container">
+  <button mat-raised-button color="primary" class="" (click)="update()">Update</button>
+  <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+</div>
diff --git a/bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.ts b/bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.ts
index 5d6d4ec..afd8ca7 100644
--- a/bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.ts
+++ b/bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.ts
@@ -1,7 +1,6 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -9,13 +8,13 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 import moment from 'moment';
 
 import { MenuCategory } from '../../core/menu-category';
 import { Product } from '../../core/product';
 import { SaleCategory } from '../../core/sale-category';
-import { ToasterService } from '../../core/toaster.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { TemporalProductService } from '../temporal-product.service';
 
@@ -25,12 +24,13 @@ import { TemporalProductService } from '../temporal-product.service';
   styleUrls: ['./temporal-product-detail.component.css'],
   imports: [
     MatButtonModule,
-    MatCardModule,
+
     MatCheckboxModule,
     MatDatepickerModule,
     MatFormFieldModule,
     MatInputModule,
     MatOptionModule,
+
     MatSelectModule,
     ReactiveFormsModule,
   ],
@@ -39,7 +39,7 @@ export class TemporalProductDetailComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(TemporalProductService);
 
   @ViewChild('name', { static: true }) nameElement?: ElementRef;
@@ -119,11 +119,11 @@ export class TemporalProductDetailComponent implements OnInit, AfterViewInit {
   update() {
     this.ser.update(this.getItem()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/temporal-products');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
@@ -131,11 +131,11 @@ export class TemporalProductDetailComponent implements OnInit, AfterViewInit {
   delete() {
     this.ser.delete(this.item.versionId as string).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/temporal-products');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.html b/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.html
index be17234..b46b310 100644
--- a/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.html
+++ b/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.html
@@ -1,105 +1,101 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title>Temporal Products</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto basis-2-5">
-          <mat-label>Filter</mat-label>
-          <input type="text" matInput formControlName="filter" autocomplete="off" />
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-30">
-          <mat-label>Menu Category</mat-label>
-          <mat-select formControlName="menuCategory" (selectionChange)="filterMcOn($event.value)">
-            <mat-option>-- All Products --</mat-option>
-            @for (mc of menuCategories; track mc) {
-              <mat-option [value]="mc.id">
-                {{ mc.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-30">
-          <mat-label>Sale Category</mat-label>
-          <mat-select formControlName="saleCategory" (selectionChange)="filterScOn($event.value)">
-            <mat-option>-- All Products --</mat-option>
-            @for (mc of saleCategories; track mc) {
-              <mat-option [value]="mc.id">
-                {{ mc.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-      </div>
-    </form>
-    <mat-table [dataSource]="dataSource">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row">
-          <ul>
-            <li>
-              <a [routerLink]="['/temporal-products', row.versionId]">{{ row.name }} ({{ row.units }})</a>
-            </li>
-            <li>
-              {{ row.id }}
-            </li>
-          </ul>
-        </mat-cell>
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Temporal Products</span>
+</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container sm:max-lg:flex-col">
+    <mat-form-field class="flex-auto basis-2-5">
+      <mat-label>Filter</mat-label>
+      <input type="text" matInput formControlName="filter" autocomplete="off" />
+    </mat-form-field>
+    <mat-form-field class="flex-auto basis-30">
+      <mat-label>Menu Category</mat-label>
+      <mat-select formControlName="menuCategory" (selectionChange)="filterMcOn($event.value)">
+        <mat-option>-- All Products --</mat-option>
+        @for (mc of menuCategories; track mc) {
+          <mat-option [value]="mc.id">
+            {{ mc.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field class="flex-auto basis-30">
+      <mat-label>Sale Category</mat-label>
+      <mat-select formControlName="saleCategory" (selectionChange)="filterScOn($event.value)">
+        <mat-option>-- All Products --</mat-option>
+        @for (mc of saleCategories; track mc) {
+          <mat-option [value]="mc.id">
+            {{ mc.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+</form>
+<mat-table [dataSource]="dataSource">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row">
+      <ul>
+        <li>
+          <a [routerLink]="['/temporal-products', row.versionId]">{{ row.name }} ({{ row.units }})</a>
+        </li>
+        <li>
+          {{ row.id }}
+        </li>
+      </ul>
+    </mat-cell>
+  </ng-container>
 
-      <!-- Price Column -->
-      <ng-container matColumnDef="price">
-        <mat-header-cell *matHeaderCellDef class="right">Price</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{ row.price | currency: 'INR' }}</mat-cell>
-      </ng-container>
+  <!-- Price Column -->
+  <ng-container matColumnDef="price">
+    <mat-header-cell *matHeaderCellDef class="right">Price</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right">{{ row.price | currency: 'INR' }}</mat-cell>
+  </ng-container>
 
-      <!-- Menu Category Column -->
-      <ng-container matColumnDef="menuCategory">
-        <mat-header-cell *matHeaderCellDef>Menu Category</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.menuCategory.name }}</mat-cell>
-      </ng-container>
+  <!-- Menu Category Column -->
+  <ng-container matColumnDef="menuCategory">
+    <mat-header-cell *matHeaderCellDef>Menu Category</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.menuCategory.name }}</mat-cell>
+  </ng-container>
 
-      <!-- Sale Category Column -->
-      <ng-container matColumnDef="saleCategory">
-        <mat-header-cell *matHeaderCellDef>Sale Category</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.saleCategory.name }}</mat-cell>
-      </ng-container>
+  <!-- Sale Category Column -->
+  <ng-container matColumnDef="saleCategory">
+    <mat-header-cell *matHeaderCellDef>Sale Category</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.saleCategory.name }}</mat-cell>
+  </ng-container>
 
-      <!-- Info Column -->
-      <ng-container matColumnDef="info">
-        <mat-header-cell *matHeaderCellDef class="center">Details</mat-header-cell>
-        <mat-cell *matCellDef="let row">
-          <ul>
-            <li>
-              <b>Valid From: {{ row.validFrom ?? '&#8734;' }} </b> <mat-icon>linear_scale</mat-icon>
-              <b>Till: {{ row.validTill ?? '&#8734;' }} </b>
-            </li>
-            <li>
-              <mat-icon>
-                {{ row.hasHappyHour ? 'sentiment_satisfied_alt' : 'sentiment_dissatisfied' }}
-              </mat-icon>
-              <b> {{ row.hasHappyHour ? 'Has Happy Hours' : 'No Happy Hours' }}</b>
-            </li>
-            <li>
-              <mat-icon>
-                {{ row.isNotAvailable ? 'pause' : 'play_arrow' }}
-              </mat-icon>
-              <b> {{ row.isNotAvailable ? 'Is not Available' : 'Is Available' }}</b>
-            </li>
-          </ul>
-        </mat-cell>
-      </ng-container>
+  <!-- Info Column -->
+  <ng-container matColumnDef="info">
+    <mat-header-cell *matHeaderCellDef class="center">Details</mat-header-cell>
+    <mat-cell *matCellDef="let row">
+      <ul>
+        <li>
+          <b>Valid From: {{ row.validFrom ?? '&#8734;' }} </b> <mat-icon>linear_scale</mat-icon>
+          <b>Till: {{ row.validTill ?? '&#8734;' }} </b>
+        </li>
+        <li>
+          <mat-icon>
+            {{ row.hasHappyHour ? 'sentiment_satisfied_alt' : 'sentiment_dissatisfied' }}
+          </mat-icon>
+          <b> {{ row.hasHappyHour ? 'Has Happy Hours' : 'No Happy Hours' }}</b>
+        </li>
+        <li>
+          <mat-icon>
+            {{ row.isNotAvailable ? 'pause' : 'play_arrow' }}
+          </mat-icon>
+          <b> {{ row.isNotAvailable ? 'Is not Available' : 'Is Available' }}</b>
+        </li>
+      </ul>
+    </mat-cell>
+  </ng-container>
 
-      <!-- Quantity Column -->
-      <ng-container matColumnDef="quantity">
-        <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
-      </ng-container>
+  <!-- Quantity Column -->
+  <ng-container matColumnDef="quantity">
+    <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
+    <mat-cell *matCellDef="let row" class="right">{{ row.quantity | number: '1.2-2' }}</mat-cell>
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts b/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts
index 3a03eb2..1fd31b4 100644
--- a/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts
+++ b/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts
@@ -1,7 +1,6 @@
 import { DecimalPipe, CurrencyPipe } from '@angular/common';
 import { Component, OnInit, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatCardModule } from '@angular/material/card';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -24,7 +23,7 @@ import { TemporalProductListDatasource } from './temporal-product-list-datasourc
   imports: [
     CurrencyPipe,
     DecimalPipe,
-    MatCardModule,
+
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
diff --git a/bookie/src/app/update-product-prices/update-product-prices.component.html b/bookie/src/app/update-product-prices/update-product-prices.component.html
index 79ab870..b937e82 100644
--- a/bookie/src/app/update-product-prices/update-product-prices.component.html
+++ b/bookie/src/app/update-product-prices/update-product-prices.component.html
@@ -1,64 +1,60 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Product Update Report</mat-card-title>
-      <button mat-icon-button (click)="exportCsv()">
-        <mat-icon>save_alt</mat-icon>
-      </button>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container sm:max-lg:flex-col">
-        <mat-form-field class="flex-auto basis-2-5">
-          <mat-label>Date</mat-label>
-          <input matInput [matDatepicker]="date" (focus)="date.open()" formControlName="date" autocomplete="off" />
-          <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
-          <mat-datepicker #date></mat-datepicker>
+<h2 class="row-container space-between">
+  <span>Product Update Report</span>
+  <button mat-icon-button (click)="exportCsv()">
+    <mat-icon>save_alt</mat-icon>
+  </button>
+</h2>
+
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container sm:max-lg:flex-col">
+    <mat-form-field class="flex-auto basis-2-5">
+      <mat-label>Date</mat-label>
+      <input matInput [matDatepicker]="date" (focus)="date.open()" formControlName="date" autocomplete="off" />
+      <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
+      <mat-datepicker #date></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field class="flex-auto basis-2-5">
+      <mat-label>Menu Category</mat-label>
+      <mat-select formControlName="menuCategory">
+        @for (s of menuCategories; track s) {
+          <mat-option [value]="s.id">
+            {{ s.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+    <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
+  </div>
+  <mat-table #table [dataSource]="dataSource" aria-label="Elements" formArrayName="prices">
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+      <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
+    </ng-container>
+
+    <!-- Old Price Column -->
+    <ng-container matColumnDef="oldPrice">
+      <mat-header-cell *matHeaderCellDef class="right">Old Price</mat-header-cell>
+      <mat-cell *matCellDef="let row" class="right">{{ row.oldPrice | currency: 'INR' }}</mat-cell>
+    </ng-container>
+
+    <!-- New Price Column -->
+    <ng-container matColumnDef="newPrice">
+      <mat-header-cell *matHeaderCellDef class="right">New Price</mat-header-cell>
+      <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="right">
+        <mat-form-field class="flex-auto">
+          <mat-label>New Price</mat-label>
+          <input matInput type="number" formControlName="newPrice" />
+          <span matTextPrefix>₹&nbsp;</span>
         </mat-form-field>
-        <mat-form-field class="flex-auto basis-2-5">
-          <mat-label>Menu Category</mat-label>
-          <mat-select formControlName="menuCategory">
-            @for (s of menuCategories; track s) {
-              <mat-option [value]="s.id">
-                {{ s.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-        <button mat-raised-button class="flex-auto basis-1-5" color="primary" (click)="show()">Show</button>
-      </div>
-      <mat-table #table [dataSource]="dataSource" aria-label="Elements" formArrayName="prices">
-        <!-- Name Column -->
-        <ng-container matColumnDef="name">
-          <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-          <mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
-        </ng-container>
+      </mat-cell>
+    </ng-container>
 
-        <!-- Old Price Column -->
-        <ng-container matColumnDef="oldPrice">
-          <mat-header-cell *matHeaderCellDef class="right">Old Price</mat-header-cell>
-          <mat-cell *matCellDef="let row" class="right">{{ row.oldPrice | currency: 'INR' }}</mat-cell>
-        </ng-container>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </mat-table>
+</form>
 
-        <!-- New Price Column -->
-        <ng-container matColumnDef="newPrice">
-          <mat-header-cell *matHeaderCellDef class="right">New Price</mat-header-cell>
-          <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="right">
-            <mat-form-field class="flex-auto">
-              <mat-label>New Price</mat-label>
-              <input matInput type="number" formControlName="newPrice" />
-              <span matTextPrefix>₹&nbsp;</span>
-            </mat-form-field>
-          </mat-cell>
-        </ng-container>
-
-        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-      </mat-table>
-    </form>
-  </mat-card-content>
-  <mat-card-actions>
-    <button mat-raised-button color="primary" (click)="save()">Save</button>
-  </mat-card-actions>
-</mat-card>
+<div class="row-container">
+  <button mat-raised-button color="primary" (click)="save()">Save</button>
+</div>
diff --git a/bookie/src/app/update-product-prices/update-product-prices.component.ts b/bookie/src/app/update-product-prices/update-product-prices.component.ts
index cb13594..f859fd9 100644
--- a/bookie/src/app/update-product-prices/update-product-prices.component.ts
+++ b/bookie/src/app/update-product-prices/update-product-prices.component.ts
@@ -2,20 +2,19 @@ import { CurrencyPipe } from '@angular/common';
 import { Component, OnInit, inject } from '@angular/core';
 import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import moment from 'moment';
 import { map } from 'rxjs/operators';
 
 import { MenuCategory } from '../core/menu-category';
-import { ToasterService } from '../core/toaster.service';
 import { ToCsvService } from '../shared/to-csv.service';
 import { UpdateProductPrices } from './update-product-prices';
 import { UpdateProductPricesDataSource } from './update-product-prices-datasource';
@@ -28,7 +27,7 @@ import { UpdateProductPricesService } from './update-product-prices.service';
   imports: [
     CurrencyPipe,
     MatButtonModule,
-    MatCardModule,
+
     MatDatepickerModule,
     MatFormFieldModule,
     MatIconModule,
@@ -43,7 +42,7 @@ export class UpdateProductPricesComponent implements OnInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private toCsv = inject(ToCsvService);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(UpdateProductPricesService);
 
   info: UpdateProductPrices = new UpdateProductPrices();
@@ -152,11 +151,11 @@ export class UpdateProductPricesComponent implements OnInit {
   save() {
     this.ser.save(this.getInfo()).subscribe({
       next: (result: UpdateProductPrices) => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.loadData(result);
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/users/user-detail/user-detail.component.html b/bookie/src/app/users/user-detail/user-detail.component.html
index 7445d09..6cab616 100644
--- a/bookie/src/app/users/user-detail/user-detail.component.html
+++ b/bookie/src/app/users/user-detail/user-detail.component.html
@@ -1,37 +1,32 @@
-<mat-card class="flex-auto lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>User</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Name</mat-label>
-          <input matInput #nameElement formControlName="name" />
-        </mat-form-field>
+<h2>User</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Name</mat-label>
+      <input matInput #nameElement formControlName="name" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Password</mat-label>
+      <input matInput formControlName="password" [type]="hide ? 'password' : 'text'" />
+      <mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility' : 'visibility_off' }}</mat-icon>
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-checkbox formControlName="lockedOut">Is Locked Out?</mat-checkbox>
+  </div>
+  <mat-divider></mat-divider>
+  <div formArrayName="roles">
+    @for (r of item.roles; track r; let i = $index) {
+      <div [formGroupName]="i" class="row-container">
+        <mat-checkbox formControlName="role" class="flex-auto">{{ r.name }}</mat-checkbox>
       </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Password</mat-label>
-          <input matInput formControlName="password" [type]="hide ? 'password' : 'text'" />
-          <mat-icon matSuffix (click)="hide = !hide">{{ hide ? 'visibility' : 'visibility_off' }}</mat-icon>
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-checkbox formControlName="lockedOut">Is Locked Out?</mat-checkbox>
-      </div>
-      <mat-divider></mat-divider>
-      <div formArrayName="roles">
-        @for (r of item.roles; track r; let i = $index) {
-          <div [formGroupName]="i" class="row-container">
-            <mat-checkbox formControlName="role" class="flex-auto">{{ r.name }}</mat-checkbox>
-          </div>
-        }
-      </div>
-    </form>
-  </mat-card-content>
-  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-  </mat-card-actions>
-</mat-card>
+    }
+  </div>
+</form>
+
+<div class="row-container">
+  <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
+  <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+</div>
diff --git a/bookie/src/app/users/user-detail/user-detail.component.ts b/bookie/src/app/users/user-detail/user-detail.component.ts
index a94faca..fad4b2d 100644
--- a/bookie/src/app/users/user-detail/user-detail.component.ts
+++ b/bookie/src/app/users/user-detail/user-detail.component.ts
@@ -1,16 +1,15 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 
-import { ToasterService } from '../../core/toaster.service';
 import { User } from '../../core/user';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { UserService } from '../user.service';
@@ -21,7 +20,7 @@ import { UserService } from '../user.service';
   styleUrls: ['./user-detail.component.css'],
   imports: [
     MatButtonModule,
-    MatCardModule,
+
     MatCheckboxModule,
     MatDividerModule,
     MatFormFieldModule,
@@ -33,7 +32,7 @@ import { UserService } from '../user.service';
 export class UserDetailComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private dialog = inject(MatDialog);
   private ser = inject(UserService);
 
@@ -96,7 +95,7 @@ export class UserDetailComponent implements OnInit, AfterViewInit {
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         if ((this.item.id as string) === 'me') {
           this.router.navigateByUrl('/');
         } else {
@@ -104,7 +103,7 @@ export class UserDetailComponent implements OnInit, AfterViewInit {
         }
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
@@ -112,11 +111,11 @@ export class UserDetailComponent implements OnInit, AfterViewInit {
   delete() {
     this.ser.delete(this.item.id as string).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/users');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
diff --git a/bookie/src/app/users/user-list/user-list.component.html b/bookie/src/app/users/user-list/user-list.component.html
index 85c1725..cbd8be2 100644
--- a/bookie/src/app/users/user-list/user-list.component.html
+++ b/bookie/src/app/users/user-list/user-list.component.html
@@ -1,51 +1,45 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Users</mat-card-title>
-      <a mat-button [routerLink]="['/users', 'new']">
-        <mat-icon>add_box</mat-icon>
-        Add
-      </a>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          ><a [routerLink]="['/users', row.id]">{{ row.name }}</a></mat-cell
-        >
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Users</span>
+  <a mat-button [routerLink]="['/users', 'new']">
+    <mat-icon>add_box</mat-icon>
+    Add
+  </a>
+</h2>
+<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      ><a [routerLink]="['/users', row.id]">{{ row.name }}</a></mat-cell
+    >
+  </ng-container>
 
-      <!-- Locked Out Column -->
-      <ng-container matColumnDef="lockedOut">
-        <mat-header-cell *matHeaderCellDef>Is Locked Out?</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.lockedOut }}</mat-cell>
-      </ng-container>
+  <!-- Locked Out Column -->
+  <ng-container matColumnDef="lockedOut">
+    <mat-header-cell *matHeaderCellDef>Is Locked Out?</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.lockedOut }}</mat-cell>
+  </ng-container>
 
-      <!-- Groups Column -->
-      <ng-container matColumnDef="roles">
-        <mat-header-cell *matHeaderCellDef>Roles</mat-header-cell>
-        <mat-cell *matCellDef="let row">
-          <ul>
-            @for (role of row.roles; track role) {
-              <li>{{ role }}</li>
-            }
-          </ul>
-        </mat-cell>
-      </ng-container>
+  <!-- Groups Column -->
+  <ng-container matColumnDef="roles">
+    <mat-header-cell *matHeaderCellDef>Roles</mat-header-cell>
+    <mat-cell *matCellDef="let row">
+      <ul>
+        @for (role of row.roles; track role) {
+          <li>{{ role }}</li>
+        }
+      </ul>
+    </mat-cell>
+  </ng-container>
 
-      <!-- Last Login Column -->
-      <ng-container matColumnDef="last">
-        <mat-header-cell *matHeaderCellDef>Last Login</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          >{{ row.lastDevice }} &#64; {{ row.lastDate ? (row.lastDate | localTime) : 'Never' }}</mat-cell
-        >
-      </ng-container>
+  <!-- Last Login Column -->
+  <ng-container matColumnDef="last">
+    <mat-header-cell *matHeaderCellDef>Last Login</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      >{{ row.lastDevice }} &#64; {{ row.lastDate ? (row.lastDate | localTime) : 'Never' }}</mat-cell
+    >
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
diff --git a/bookie/src/app/users/user-list/user-list.component.ts b/bookie/src/app/users/user-list/user-list.component.ts
index 103c35e..c4a3fc4 100644
--- a/bookie/src/app/users/user-list/user-list.component.ts
+++ b/bookie/src/app/users/user-list/user-list.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnInit, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, RouterLink } from '@angular/router';
@@ -13,7 +12,7 @@ import { UserListDataSource } from './user-list-datasource';
   selector: 'app-user-list',
   templateUrl: './user-list.component.html',
   styleUrls: ['./user-list.component.css'],
-  imports: [LocalTimePipe, MatButtonModule, MatCardModule, MatIconModule, MatTableModule, RouterLink],
+  imports: [LocalTimePipe, MatButtonModule, MatIconModule, MatTableModule, RouterLink],
 })
 export class UserListComponent implements OnInit {
   private route = inject(ActivatedRoute);
diff --git a/bookie/src/styles.sass b/bookie/src/styles.sass
index bbfaf02..69f8be3 100644
--- a/bookie/src/styles.sass
+++ b/bookie/src/styles.sass
@@ -1,4 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
+@use 'sass:color'
+@use 'sass:math'
 @use 'sass:map'
 @use '@angular/material' as mat
 @tailwind base
@@ -7,6 +9,33 @@
 
 @include mat.core()
 
+@function get-on-color($background)
+  $r: math.div(color.channel($background, "red", $space: rgb), 255)
+  $g: math.div(color.channel($background, "green", $space: rgb), 255)
+  $b: math.div(color.channel($background, "blue", $space: rgb), 255)
+  $l: 0.2126 * $r + 0.7152 * $g + 0.0722 * $b
+
+  @if ($l > 0.5)
+    @return #000
+  @else
+    @return #fff
+
+
+html
+  // color-scheme: light dark
+  @include mat.theme((
+    color: (
+      primary: mat.$azure-palette,
+      tertiary: mat.$blue-palette,
+      // theme-type: light,
+    ),
+    typography: (
+      plain-family: Roboto,
+      brankd-family: Roboto
+      ),
+    density: 0
+  ))
+
 html,
 body
   height: 100%
@@ -48,13 +77,17 @@ a
 .row-container
   display: flex
   flex-direction: row
+  align-items: center
   gap: 20px  // sets 20px space between all children
 
-$my-primary: mat.m2-define-palette(mat.$m2-indigo-palette, 500)
-$my-accent: mat.m2-define-palette(mat.$m2-amber-palette, A200, A100, A400)
-/* The "warn" palette is optional and defaults to red if not specified.*/
-$my-warn: mat.m2-define-palette(mat.$m2-red-palette)
-$my-disabled: mat.m2-define-palette(mat.$m2-grey-palette, 500)
+.space-between
+  justify-content: space-between
+
+.spacer
+  flex: 1 1 auto
+
+
+
 
 .square-button
   min-width: 150px
@@ -75,42 +108,44 @@ $my-disabled: mat.m2-define-palette(mat.$m2-grey-palette, 500)
 .warn
   background-color: red
 
+button.mat-primary
+  background: var(--mat-sys-primary) !important
+  color: var(--mat-sys-on-primary) !important
+
+button.mat-warn
+  background: var(--mat-sys-error) !important
+  color: var(--mat-sys-on-error) !important
+
 .square-button.primary
-  /* Read the 500 hue from the primary color palete.*/
-  color: mat.m2-get-color-from-palette($my-primary, '200-contrast')
-  background: mat.m2-get-color-from-palette($my-primary, 200)
+  $sbp: map.get(mat.$violet-palette, 70)
+  color: get-on-color($sbp) !important
+  background: $sbp !important
 
 .square-button.strong-primary
-  /* Read the 500 hue from the primary color palete.*/
-  color: mat.m2-get-color-from-palette($my-primary, '700-contrast')
-  background: mat.m2-get-color-from-palette($my-primary, 700)
+  $sbsp: map.get(mat.$violet-palette, 20)
+  color: get-on-color($sbsp) !important
+  background: $sbsp !important
 
-.square-button.accent
-  /* Read the 500 hue from the primary color palete.*/
-  color: mat.m2-get-color-from-palette($my-accent, '200-contrast')
-  background: mat.m2-get-color-from-palette($my-accent, 200)
+.accent
+  $a: map.get(mat.$orange-palette, 70)
+  color: get-on-color($a) !important
+  background: $a !important
 
-.square-button.strong-accent
-  /* Read the 500 hue from the primary color palete.*/
-  color: mat.m2-get-color-from-palette($my-accent, '700-contrast')
-  background: mat.m2-get-color-from-palette($my-accent, 700)
+.strong-accent
+  $sa: map.get(mat.$orange-palette, 20)
+  color: get-on-color($sa) !important
+  background: $sa !important
 
 .square-button.warn
-  /* Read the 500 hue from the primary color palete.*/
-  color: mat.m2-get-color-from-palette($my-warn, '700-contrast')
-  background: mat.m2-get-color-from-palette($my-warn, 700)
+  $sbw: map.get(mat.$red-palette, 70)
+  color: get-on-color($sbw) !important
+  background: $sbw !important
 
 .square-button.strong-warn
-  /* Read the 500 hue from the primary color palete.*/
-  color: mat.m2-get-color-from-palette($my-warn, '700-contrast')
-  background: mat.m2-get-color-from-palette($my-warn, 700)
+  $sbsw: map.get(mat.$red-palette, 20)
+  color: get-on-color($sbsw) !important
+  background: $sbsw !important
 
 .square-button.disabled
-  /* Read the 500 hue from the primary color palete.*/
-  color: mat.m2-get-color-from-palette($my-disabled, '500-contrast')
-  background: mat.m2-get-color-from-palette($my-disabled, 500)
-
-.square-button.strong-disabled
-  /* Read the 500 hue from the primary color palete.*/
-  color: mat.m2-get-color-from-palette($my-disabled, '800-contrast')
-  background: mat.m2-get-color-from-palette($my-disabled, 800)
+  color: var(--mat-sys-on-outline) !important
+  background: var(--mat-sys-outline) !important