From 10aca4071a61df3872cd4f6b310ed001ba58025e Mon Sep 17 00:00:00 2001
From: Amritanshu <git@tanshu.com>
Date: Tue, 31 Jan 2023 17:49:15 +0530
Subject: [PATCH] Chore: Updated mat inputs to better match the style guide.
 Removed placeholders in favour of labels.

---
 .../account-detail.component.html             |  8 +--
 .../account-list/account-list.component.html  | 10 +---
 .../app/attendance/attendance.component.html  |  2 +-
 .../src/app/auth/login/login.component.html   | 11 ++--
 .../balance-sheet.component.html              |  2 +-
 .../app/cash-flow/cash-flow.component.html    |  4 +-
 .../client-detail.component.html              | 12 ++--
 .../client-list/client-list.component.html    |  6 +-
 .../closing-stock.component.html              |  3 +-
 .../cost-centre-detail.component.html         |  8 +--
 .../src/app/daybook/daybook.component.html    |  4 +-
 .../employee-attendance.component.html        |  6 +-
 .../employee-benefits.component.html          | 20 ++-----
 .../employee-functions.component.html         | 12 ++--
 .../employee-detail.component.html            | 16 ++---
 .../employee-list.component.html              | 10 +---
 .../src/app/entries/entries.component.html    |  4 +-
 .../app/incentive/incentive.component.html    |  2 +-
 .../src/app/issue/issue-dialog.component.html | 10 +---
 overlord/src/app/issue/issue.component.html   | 25 +++-----
 .../app/journal/journal-dialog.component.html | 12 +---
 .../src/app/journal/journal.component.html    | 21 ++-----
 overlord/src/app/ledger/ledger.component.html |  6 +-
 .../net-transactions.component.html           |  4 +-
 .../app/payment/payment-dialog.component.html | 12 +---
 .../src/app/payment/payment.component.html    | 23 ++------
 .../period-detail.component.html              |  4 +-
 .../product-group-detail.component.html       | 12 +---
 .../product-ledger.component.html             |  6 +-
 .../product-detail-dialog.component.html      | 15 ++---
 .../product-detail.component.html             | 23 +++-----
 .../product-list/product-list.component.html  | 10 +---
 .../profit-loss/profit-loss.component.html    |  4 +-
 .../purchase-entries.component.html           |  4 +-
 .../purchase-return-dialog.component.html     | 10 +---
 .../purchase-return.component.html            | 23 ++------
 .../purchase/purchase-dialog.component.html   | 28 ++-------
 .../src/app/purchase/purchase.component.html  | 41 +++----------
 .../app/purchases/purchases.component.html    |  4 +-
 .../rate-contract-detail.component.html       | 25 +++-----
 .../raw-material-cost.component.html          |  4 +-
 .../app/receipt/receipt-dialog.component.html | 12 +---
 .../src/app/receipt/receipt.component.html    | 23 ++------
 .../recipe-detail.component.html              | 58 ++++---------------
 .../recipe-list/recipe-list.component.html    |  1 -
 .../role-detail/role-detail.component.html    |  8 +--
 .../role/role-list/role-list.component.html   | 18 +++---
 .../src/app/settings/settings.component.html  | 25 ++++----
 .../stock-movement.component.html             |  4 +-
 .../trial-balance.component.html              |  2 +-
 .../user-detail/user-detail.component.html    | 15 ++---
 .../user/user-list/user-list.component.html   | 18 +++---
 52 files changed, 209 insertions(+), 441 deletions(-)

diff --git a/overlord/src/app/account/account-detail/account-detail.component.html b/overlord/src/app/account/account-detail/account-detail.component.html
index e5f01ef3..0405ce93 100644
--- a/overlord/src/app/account/account-detail/account-detail.component.html
+++ b/overlord/src/app/account/account-detail/account-detail.component.html
@@ -17,19 +17,19 @@
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
           <mat-label>Code</mat-label>
-          <input matInput placeholder="Code" formControlName="code" />
+          <input matInput formControlName="code" />
         </mat-form-field>
       </div>
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
           <mat-label>Name</mat-label>
-          <input matInput #nameElement placeholder="Name" formControlName="name" />
+          <input matInput #nameElement formControlName="name" />
         </mat-form-field>
       </div>
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
           <mat-label>Account Type</mat-label>
-          <mat-select placeholder="Account Type" formControlName="type">
+          <mat-select formControlName="type">
             <mat-option *ngFor="let at of accountTypes" [value]="at.id">
               {{ at.name }}
             </mat-option>
@@ -45,7 +45,7 @@
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
           <mat-label>Cost Centre</mat-label>
-          <mat-select placeholder="Cost Centre" formControlName="costCentre">
+          <mat-select formControlName="costCentre">
             <mat-option *ngFor="let cs of costCentres" [value]="cs.id">
               {{ cs.name }}
             </mat-option>
diff --git a/overlord/src/app/account/account-list/account-list.component.html b/overlord/src/app/account/account-list/account-list.component.html
index 37941e65..c6411b2b 100644
--- a/overlord/src/app/account/account-list/account-list.component.html
+++ b/overlord/src/app/account/account-list/account-list.component.html
@@ -12,14 +12,8 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
-          <input
-            type="text"
-            matInput
-            #filterElement
-            placeholder="Filter"
-            formControlName="filter"
-            autocomplete="off"
-          />
+          <mat-label>Filter</mat-label>
+          <input type="text" matInput #filterElement formControlName="filter" autocomplete="off" />
         </mat-form-field>
       </div>
     </form>
diff --git a/overlord/src/app/attendance/attendance.component.html b/overlord/src/app/attendance/attendance.component.html
index c84dba75..e5845458 100644
--- a/overlord/src/app/attendance/attendance.component.html
+++ b/overlord/src/app/attendance/attendance.component.html
@@ -6,11 +6,11 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-4/5 mr-5">
+          <mat-label>Date</mat-label>
           <input
             matInput
             [matDatepicker]="date"
             (focus)="date.open()"
-            placeholder="Date"
             formControlName="date"
             autocomplete="off"
           />
diff --git a/overlord/src/app/auth/login/login.component.html b/overlord/src/app/auth/login/login.component.html
index 7f46f892..214e1427 100644
--- a/overlord/src/app/auth/login/login.component.html
+++ b/overlord/src/app/auth/login/login.component.html
@@ -1,13 +1,13 @@
-<mat-card appearance="outlined">
-  <mat-card-title-group>
+<mat-card>
+  <mat-card-header>
     <mat-card-title>Login</mat-card-title>
-  </mat-card-title-group>
+  </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
           <mat-label>Username</mat-label>
-          <input matInput #nameElement placeholder="Username" formControlName="username" />
+          <input matInput #nameElement formControlName="username" />
         </mat-form-field>
       </div>
       <div class="flex flex-row justify-around content-start items-start">
@@ -15,7 +15,6 @@
           <mat-label>Password</mat-label>
           <input
             matInput
-            placeholder="Password"
             formControlName="password"
             [type]="hide ? 'password' : 'text'"
             (keyup.enter)="login()"
@@ -30,7 +29,7 @@
       <div class="flex flex-row justify-around content-start items-start" *ngIf="showOtp">
         <mat-form-field class="flex-auto">
           <mat-label>Otp</mat-label>
-          <input matInput placeholder="Otp" formControlName="otp" />
+          <input matInput formControlName="otp" />
         </mat-form-field>
       </div>
     </form>
diff --git a/overlord/src/app/balance-sheet/balance-sheet.component.html b/overlord/src/app/balance-sheet/balance-sheet.component.html
index 63bde7ab..d27512d5 100644
--- a/overlord/src/app/balance-sheet/balance-sheet.component.html
+++ b/overlord/src/app/balance-sheet/balance-sheet.component.html
@@ -6,11 +6,11 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto mr-5">
+          <mat-label>Date</mat-label>
           <input
             matInput
             [matDatepicker]="dateInput"
             (focus)="dateInput.open()"
-            placeholder="Date"
             formControlName="date"
             autocomplete="off"
           />
diff --git a/overlord/src/app/cash-flow/cash-flow.component.html b/overlord/src/app/cash-flow/cash-flow.component.html
index c7f74c86..e3981313 100644
--- a/overlord/src/app/cash-flow/cash-flow.component.html
+++ b/overlord/src/app/cash-flow/cash-flow.component.html
@@ -6,11 +6,11 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Start Date</mat-label>
           <input
             matInput
             [matDatepicker]="startDate"
             (focus)="startDate.open()"
-            placeholder="Start Date"
             formControlName="startDate"
             autocomplete="off"
           />
@@ -18,11 +18,11 @@
           <mat-datepicker #startDate></mat-datepicker>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Finish Date</mat-label>
           <input
             matInput
             [matDatepicker]="finishDate"
             (focus)="finishDate.open()"
-            placeholder="Finish Date"
             formControlName="finishDate"
             autocomplete="off"
           />
diff --git a/overlord/src/app/client/client-detail/client-detail.component.html b/overlord/src/app/client/client-detail/client-detail.component.html
index fb8acd3f..51e1cd1c 100644
--- a/overlord/src/app/client/client-detail/client-detail.component.html
+++ b/overlord/src/app/client/client-detail/client-detail.component.html
@@ -1,20 +1,20 @@
 <div class="flex flex-auto flex-row justify-around content-center items-center lg:max-w-[50%]">
-  <mat-card appearance="outlined" class="flex-auto">
-    <mat-card-title-group>
+  <mat-card class="flex-auto">
+    <mat-card-header>
       <mat-card-title>Client</mat-card-title>
-    </mat-card-title-group>
+    </mat-card-header>
     <mat-card-content>
       <form [formGroup]="form" class="flex flex-col">
         <div class="flex flex-row justify-around content-start items-start">
           <mat-form-field class="flex-auto">
             <mat-label>Code</mat-label>
-            <input matInput placeholder="Code" formControlName="code" />
+            <input matInput formControlName="code" />
           </mat-form-field>
         </div>
         <div class="flex flex-row justify-around content-start items-start">
           <mat-form-field class="flex-auto">
             <mat-label>Name</mat-label>
-            <input matInput #nameElement placeholder="Name" formControlName="name" />
+            <input matInput #nameElement formControlName="name" />
           </mat-form-field>
         </div>
         <div class="flex flex-row justify-around content-start items-start">
@@ -23,7 +23,7 @@
         <div class="flex flex-row justify-around content-start items-start">
           <mat-form-field class="flex-auto">
             <mat-label>OTP</mat-label>
-            <input matInput placeholder="OTP" formControlName="otp" />
+            <input matInput formControlName="otp" />
           </mat-form-field>
         </div>
       </form>
diff --git a/overlord/src/app/client/client-list/client-list.component.html b/overlord/src/app/client/client-list/client-list.component.html
index f0faef81..851d6702 100644
--- a/overlord/src/app/client/client-list/client-list.component.html
+++ b/overlord/src/app/client/client-list/client-list.component.html
@@ -1,7 +1,7 @@
-<mat-card appearance="outlined">
-  <mat-card-title-group>
+<mat-card>
+  <mat-card-header>
     <mat-card-title>Clients</mat-card-title>
-  </mat-card-title-group>
+  </mat-card-header>
   <mat-card-content>
     <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
       <!-- Code Column -->
diff --git a/overlord/src/app/closing-stock/closing-stock.component.html b/overlord/src/app/closing-stock/closing-stock.component.html
index 44771adb..d54dcc21 100644
--- a/overlord/src/app/closing-stock/closing-stock.component.html
+++ b/overlord/src/app/closing-stock/closing-stock.component.html
@@ -19,11 +19,11 @@
           </mat-select>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Date</mat-label>
           <input
             matInput
             [matDatepicker]="dateInput"
             (focus)="dateInput.open()"
-            placeholder="Date"
             formControlName="date"
             autocomplete="off"
           />
@@ -72,7 +72,6 @@
               <input
                 matInput
                 type="number"
-                placeholder="Physical"
                 formControlName="physical"
                 (change)="updatePhysical($event, row)"
               />
diff --git a/overlord/src/app/cost-centre/cost-centre-detail/cost-centre-detail.component.html b/overlord/src/app/cost-centre/cost-centre-detail/cost-centre-detail.component.html
index 899a7288..fa4d8b37 100644
--- a/overlord/src/app/cost-centre/cost-centre-detail/cost-centre-detail.component.html
+++ b/overlord/src/app/cost-centre/cost-centre-detail/cost-centre-detail.component.html
@@ -7,13 +7,7 @@
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
           <mat-label>Name</mat-label>
-          <input
-            matInput
-            #nameElement
-            placeholder="Name"
-            formControlName="name"
-            (keyup.enter)="save()"
-          />
+          <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
         </mat-form-field>
       </div>
     </form>
diff --git a/overlord/src/app/daybook/daybook.component.html b/overlord/src/app/daybook/daybook.component.html
index e42cc990..e27417b0 100644
--- a/overlord/src/app/daybook/daybook.component.html
+++ b/overlord/src/app/daybook/daybook.component.html
@@ -6,11 +6,11 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Start Date</mat-label>
           <input
             matInput
             [matDatepicker]="startDate"
             (focus)="startDate.open()"
-            placeholder="Start Date"
             formControlName="startDate"
             autocomplete="off"
           />
@@ -18,11 +18,11 @@
           <mat-datepicker #startDate></mat-datepicker>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Finish Date</mat-label>
           <input
             matInput
             [matDatepicker]="finishDate"
             (focus)="finishDate.open()"
-            placeholder="Finish Date"
             formControlName="finishDate"
             autocomplete="off"
           />
diff --git a/overlord/src/app/employee-attendance/employee-attendance.component.html b/overlord/src/app/employee-attendance/employee-attendance.component.html
index 056fb590..f12de662 100644
--- a/overlord/src/app/employee-attendance/employee-attendance.component.html
+++ b/overlord/src/app/employee-attendance/employee-attendance.component.html
@@ -6,11 +6,11 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto mr-5">
+          <mat-label>Start Date</mat-label>
           <input
             matInput
             [matDatepicker]="startDate"
             (focus)="startDate.open()"
-            placeholder="Start Date"
             formControlName="startDate"
             autocomplete="off"
           />
@@ -18,11 +18,11 @@
           <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()"
-            placeholder="Finish Date"
             formControlName="finishDate"
             autocomplete="off"
           />
@@ -32,11 +32,11 @@
       </div>
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-4/5 mr-5">
+          <mat-label>Employee</mat-label>
           <input
             type="text"
             matInput
             #employeeElement
-            placeholder="Employee"
             [matAutocomplete]="auto"
             formControlName="employee"
             autocomplete="off"
diff --git a/overlord/src/app/employee-benefits/employee-benefits.component.html b/overlord/src/app/employee-benefits/employee-benefits.component.html
index d77ad4b5..1fbdeb6a 100644
--- a/overlord/src/app/employee-benefits/employee-benefits.component.html
+++ b/overlord/src/app/employee-benefits/employee-benefits.component.html
@@ -6,11 +6,11 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
+          <mat-label>Date</mat-label>
           <input
             matInput
             [matDatepicker]="date"
             (focus)="date.open()"
-            placeholder="Date"
             formControlName="date"
             autocomplete="off"
           />
@@ -23,11 +23,11 @@
         class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col"
       >
         <mat-form-field class="flex-auto basis-3/5 mr-5">
+          <mat-label>Employee</mat-label>
           <input
             type="text"
             matInput
             #employeeElement
-            placeholder="Employee"
             [matAutocomplete]="auto"
             formControlName="employee"
             autocomplete="off"
@@ -45,23 +45,11 @@
         </mat-form-field>
         <mat-form-field class="flex-auto basis-[15%] mr-5">
           <mat-label>Gross Salary</mat-label>
-          <input
-            type="text"
-            matInput
-            placeholder="Gross Salary"
-            formControlName="grossSalary"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="grossSalary" autocomplete="off" />
         </mat-form-field>
         <mat-form-field class="flex-auto basis-[15%] mr-5">
           <mat-label>Days Worked</mat-label>
-          <input
-            type="text"
-            matInput
-            placeholder="Days Worked"
-            formControlName="daysWorked"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="daysWorked" autocomplete="off" />
         </mat-form-field>
 
         <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1/10">
diff --git a/overlord/src/app/employee-functions/employee-functions.component.html b/overlord/src/app/employee-functions/employee-functions.component.html
index 7ffbdc72..971049c3 100644
--- a/overlord/src/app/employee-functions/employee-functions.component.html
+++ b/overlord/src/app/employee-functions/employee-functions.component.html
@@ -1,15 +1,15 @@
 <mat-tab-group>
   <mat-tab label="Credit Salary">
-    <mat-card appearance="outlined">
+    <mat-card>
       <mat-card-content>
         <form [formGroup]="creditSalaryForm" class="flex flex-col">
           <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
             <mat-form-field class="flex-auto basis-4/5 mr-5">
+              <mat-label>Date</mat-label>
               <input
                 matInput
                 [matDatepicker]="creditSalaryMonth"
                 (focus)="creditSalaryMonth.open()"
-                placeholder="Date"
                 formControlName="date"
                 autocomplete="off"
               />
@@ -36,18 +36,18 @@
     </mat-card>
   </mat-tab>
   <mat-tab label="Download Attendance Record">
-    <mat-card appearance="outlined">
+    <mat-card>
       <mat-card-content>
         <form
           [formGroup]="attendanceRecordForm"
           class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col"
         >
           <mat-form-field class="flex-auto basis-[35%] mr-5">
+            <mat-label>Start Date</mat-label>
             <input
               matInput
               [matDatepicker]="attendanceStartDate"
               (focus)="attendanceStartDate.open()"
-              placeholder="Date"
               formControlName="startDate"
               autocomplete="off"
             />
@@ -55,11 +55,11 @@
             <mat-datepicker #attendanceStartDate></mat-datepicker>
           </mat-form-field>
           <mat-form-field class="flex-auto basis-[35%] mr-5">
+            <mat-label>Finish Date</mat-label>
             <input
               matInput
               [matDatepicker]="attendanceFinishDate"
               (focus)="attendanceFinishDate.open()"
-              placeholder="Date"
               formControlName="finishDate"
               autocomplete="off"
             />
@@ -86,7 +86,7 @@
     </mat-card>
   </mat-tab>
   <mat-tab label="Upload Fingerprints">
-    <mat-card appearance="outlined">
+    <mat-card>
       <mat-card-content>
         <form
           [formGroup]="fingerprintForm"
diff --git a/overlord/src/app/employee/employee-detail/employee-detail.component.html b/overlord/src/app/employee/employee-detail/employee-detail.component.html
index f7384c13..da6b45af 100644
--- a/overlord/src/app/employee/employee-detail/employee-detail.component.html
+++ b/overlord/src/app/employee/employee-detail/employee-detail.component.html
@@ -17,31 +17,31 @@
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
           <mat-label>Code</mat-label>
-          <input matInput placeholder="Code" formControlName="code" />
+          <input matInput formControlName="code" />
         </mat-form-field>
       </div>
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
           <mat-label>Name</mat-label>
-          <input matInput #nameElement placeholder="Name" formControlName="name" />
+          <input matInput #nameElement formControlName="name" />
         </mat-form-field>
       </div>
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
           <mat-label>Designation</mat-label>
-          <input matInput placeholder="Designation" formControlName="designation" />
+          <input matInput formControlName="designation" />
         </mat-form-field>
       </div>
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
           <mat-label>Salary</mat-label>
-          <input matInput placeholder="Salary" formControlName="salary" />
+          <input matInput formControlName="salary" />
         </mat-form-field>
       </div>
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
           <mat-label>Points</mat-label>
-          <input matInput placeholder="Points" formControlName="points" />
+          <input matInput formControlName="points" />
         </mat-form-field>
       </div>
       <div class="flex flex-row justify-around content-start items-start">
@@ -50,7 +50,7 @@
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
           <mat-label>Cost Centre</mat-label>
-          <mat-select placeholder="Cost Centre" formControlName="costCentre" name="CostCentre">
+          <mat-select formControlName="costCentre" name="CostCentre">
             <mat-option *ngFor="let cs of costCentres" [value]="cs.id">
               {{ cs.name }}
             </mat-option>
@@ -58,11 +58,11 @@
         </mat-form-field>
       </div>
       <mat-form-field class="flex-auto">
+        <mat-label>Joining Date</mat-label>
         <input
           matInput
           [matDatepicker]="joiningDate"
           (focus)="joiningDate.open()"
-          placeholder="Joining Date"
           formControlName="joiningDate"
           autocomplete="off"
         />
@@ -70,11 +70,11 @@
         <mat-datepicker #joiningDate></mat-datepicker>
       </mat-form-field>
       <mat-form-field *ngIf="!item.isActive" class="flex-auto">
+        <mat-label>Leaving Date</mat-label>
         <input
           matInput
           [matDatepicker]="leavingDate"
           (focus)="leavingDate.open()"
-          placeholder="Leaving Date"
           formControlName="leavingDate"
           autocomplete="off"
         />
diff --git a/overlord/src/app/employee/employee-list/employee-list.component.html b/overlord/src/app/employee/employee-list/employee-list.component.html
index 8e0f3121..53c5f063 100644
--- a/overlord/src/app/employee/employee-list/employee-list.component.html
+++ b/overlord/src/app/employee/employee-list/employee-list.component.html
@@ -15,14 +15,8 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
-          <input
-            type="text"
-            matInput
-            #filterElement
-            placeholder="Filter"
-            formControlName="filter"
-            autocomplete="off"
-          />
+          <mat-label>Filter</mat-label>
+          <input type="text" matInput #filterElement formControlName="filter" autocomplete="off" />
         </mat-form-field>
       </div>
     </form>
diff --git a/overlord/src/app/entries/entries.component.html b/overlord/src/app/entries/entries.component.html
index d5998674..90d97777 100644
--- a/overlord/src/app/entries/entries.component.html
+++ b/overlord/src/app/entries/entries.component.html
@@ -6,10 +6,10 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Create / Last Edit Date From</mat-label>
           <input
             matInput
             [matDatepicker]="startDate"
-            placeholder="Create / Last Edit Date From"
             formControlName="startDate"
             autocomplete="off"
           />
@@ -17,10 +17,10 @@
           <mat-datepicker #startDate></mat-datepicker>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Create / Last Edit Date Till</mat-label>
           <input
             matInput
             [matDatepicker]="finishDate"
-            placeholder="Create / Last Edit Date Till"
             formControlName="finishDate"
             autocomplete="off"
           />
diff --git a/overlord/src/app/incentive/incentive.component.html b/overlord/src/app/incentive/incentive.component.html
index cfda2e25..1c19b413 100644
--- a/overlord/src/app/incentive/incentive.component.html
+++ b/overlord/src/app/incentive/incentive.component.html
@@ -6,11 +6,11 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
+          <mat-label>Date</mat-label>
           <input
             matInput
             [matDatepicker]="date"
             (focus)="date.open()"
-            placeholder="Date"
             formControlName="date"
             autocomplete="off"
           />
diff --git a/overlord/src/app/issue/issue-dialog.component.html b/overlord/src/app/issue/issue-dialog.component.html
index 2e40acd4..3b76fa75 100644
--- a/overlord/src/app/issue/issue-dialog.component.html
+++ b/overlord/src/app/issue/issue-dialog.component.html
@@ -3,10 +3,10 @@
   <form [formGroup]="form">
     <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
       <mat-form-field class="flex-auto basis-2/3 mr-5">
+        <mat-label>Product</mat-label>
         <input
           type="text"
           matInput
-          placeholder="Product"
           #batchElement
           [matAutocomplete]="autoB"
           formControlName="batch"
@@ -25,13 +25,7 @@
       </mat-form-field>
       <mat-form-field class="flex-auto basis-1/3">
         <mat-label>Quantity</mat-label>
-        <input
-          type="text"
-          matInput
-          placeholder="Quantity"
-          formControlName="quantity"
-          autocomplete="off"
-        />
+        <input type="text" matInput formControlName="quantity" autocomplete="off" />
       </mat-form-field>
     </div>
   </form>
diff --git a/overlord/src/app/issue/issue.component.html b/overlord/src/app/issue/issue.component.html
index 556780c2..c33a439e 100644
--- a/overlord/src/app/issue/issue.component.html
+++ b/overlord/src/app/issue/issue.component.html
@@ -6,10 +6,10 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-[28%] mr-5">
+          <mat-label>Date</mat-label>
           <input
             matInput
             [matDatepicker]="date"
-            placeholder="Date"
             formControlName="date"
             autocomplete="off"
             #dateElement
@@ -34,8 +34,8 @@
         </mat-form-field>
         <mat-form-field class="flex-auto basis-[16%]">
           <mat-label>Amount</mat-label>
-          <span matPrefix>₹ </span>
           <input type="text" matInput formControlName="amount" />
+          <span matTextPrefix>₹&nbsp;</span>
         </mat-form-field>
       </div>
 
@@ -44,10 +44,10 @@
         class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col"
       >
         <mat-form-field class="flex-auto basis-[55%] mr-5">
+          <mat-label>Product</mat-label>
           <input
             type="text"
             matInput
-            placeholder="Product"
             #batchElement
             [matAutocomplete]="autoB"
             formControlName="batch"
@@ -66,13 +66,7 @@
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/4 mr-5">
           <mat-label>Quantity</mat-label>
-          <input
-            type="text"
-            matInput
-            placeholder="Quantity"
-            formControlName="quantity"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="quantity" autocomplete="off" />
         </mat-form-field>
 
         <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-2/5">
@@ -132,12 +126,7 @@
       </mat-table>
       <mat-form-field>
         <mat-label>Narration</mat-label>
-        <textarea
-          matInput
-          matAutosizeMinRows="5"
-          placeholder="Narration"
-          formControlName="narration"
-        ></textarea>
+        <textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
       </mat-form-field>
     </form>
   </mat-card-content>
@@ -165,7 +154,9 @@
       >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
     </span>
   </mat-card-actions>
-  <mat-card-title>Other issues for the day</mat-card-title>
+  <mat-card-header>
+    <mat-card-title>Other issues for the day</mat-card-title>
+  </mat-card-header>
   <mat-card-footer>
     <mat-table #table [dataSource]="gridDataSource" matSort aria-label="Elements">
       <!-- Source Column -->
diff --git a/overlord/src/app/journal/journal-dialog.component.html b/overlord/src/app/journal/journal-dialog.component.html
index c0b0ff03..b1cd3c83 100644
--- a/overlord/src/app/journal/journal-dialog.component.html
+++ b/overlord/src/app/journal/journal-dialog.component.html
@@ -9,10 +9,10 @@
         </mat-select>
       </mat-form-field>
       <mat-form-field class="flex-auto basis-[55%] mr-5">
+        <mat-label>Account</mat-label>
         <input
           type="text"
           matInput
-          placeholder="Account"
           #accountElement
           [matAutocomplete]="auto"
           formControlName="account"
@@ -35,14 +35,8 @@
       </mat-autocomplete>
       <mat-form-field class="flex-auto basis-1/4">
         <mat-label>Amount</mat-label>
-        <span matPrefix>₹ </span>
-        <input
-          type="text"
-          matInput
-          placeholder="Amount"
-          formControlName="amount"
-          autocomplete="off"
-        />
+        <input type="text" matInput formControlName="amount" autocomplete="off" />
+        <span matTextPrefix>₹&nbsp;</span>
       </mat-form-field>
     </div>
   </form>
diff --git a/overlord/src/app/journal/journal.component.html b/overlord/src/app/journal/journal.component.html
index 0a13cbec..d59442b0 100644
--- a/overlord/src/app/journal/journal.component.html
+++ b/overlord/src/app/journal/journal.component.html
@@ -16,10 +16,10 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
+          <mat-label>Date</mat-label>
           <input
             matInput
             [matDatepicker]="date"
-            placeholder="Date"
             formControlName="date"
             autocomplete="off"
             #dateElement
@@ -40,10 +40,10 @@
           </mat-select>
         </mat-form-field>
         <mat-form-field class="flex-auto mr-5 basis-1/2">
+          <mat-label>Account</mat-label>
           <input
             type="text"
             matInput
-            placeholder="Account"
             #accountElement
             [matAutocomplete]="auto"
             formControlName="account"
@@ -66,14 +66,8 @@
         </mat-autocomplete>
         <mat-form-field class="flex-auto mr-5 basis-1/6">
           <mat-label>Amount</mat-label>
-          <span matPrefix>₹ </span>
-          <input
-            type="text"
-            matInput
-            placeholder="Amount"
-            formControlName="amount"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="amount" autocomplete="off" />
+          <span matTextPrefix>₹&nbsp;</span>
         </mat-form-field>
 
         <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1/6">
@@ -119,12 +113,7 @@
       </mat-table>
       <mat-form-field class="flex-auto">
         <mat-label>Narration</mat-label>
-        <textarea
-          matInput
-          matAutosizeMinRows="5"
-          placeholder="Narration"
-          formControlName="narration"
-        ></textarea>
+        <textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
       </mat-form-field>
       <div class="flex flex-row justify-center items-stretch">
         <div
diff --git a/overlord/src/app/ledger/ledger.component.html b/overlord/src/app/ledger/ledger.component.html
index fd0f511b..94ffcf95 100644
--- a/overlord/src/app/ledger/ledger.component.html
+++ b/overlord/src/app/ledger/ledger.component.html
@@ -11,11 +11,11 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto mr-5">
+          <mat-label>Start Date</mat-label>
           <input
             matInput
             [matDatepicker]="startDate"
             (focus)="startDate.open()"
-            placeholder="Start Date"
             formControlName="startDate"
             autocomplete="off"
           />
@@ -23,11 +23,11 @@
           <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()"
-            placeholder="Finish Date"
             formControlName="finishDate"
             autocomplete="off"
           />
@@ -37,11 +37,11 @@
       </div>
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-4/5 mr-5">
+          <mat-label>Account</mat-label>
           <input
             type="text"
             matInput
             #accountElement
-            placeholder="Account"
             [matAutocomplete]="auto"
             formControlName="account"
             autocomplete="off"
diff --git a/overlord/src/app/net-transactions/net-transactions.component.html b/overlord/src/app/net-transactions/net-transactions.component.html
index 890ab1f9..6d32644e 100644
--- a/overlord/src/app/net-transactions/net-transactions.component.html
+++ b/overlord/src/app/net-transactions/net-transactions.component.html
@@ -6,11 +6,11 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Start Date</mat-label>
           <input
             matInput
             [matDatepicker]="startDate"
             (focus)="startDate.open()"
-            placeholder="Start Date"
             formControlName="startDate"
             autocomplete="off"
           />
@@ -18,11 +18,11 @@
           <mat-datepicker #startDate></mat-datepicker>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Finish Date</mat-label>
           <input
             matInput
             [matDatepicker]="finishDate"
             (focus)="finishDate.open()"
-            placeholder="Finish Date"
             formControlName="finishDate"
             autocomplete="off"
           />
diff --git a/overlord/src/app/payment/payment-dialog.component.html b/overlord/src/app/payment/payment-dialog.component.html
index 5d5280bf..ef39e590 100644
--- a/overlord/src/app/payment/payment-dialog.component.html
+++ b/overlord/src/app/payment/payment-dialog.component.html
@@ -3,10 +3,10 @@
   <form [formGroup]="form">
     <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
       <mat-form-field class="flex-auto basis-2/3 mr-5">
+        <mat-label>Account</mat-label>
         <input
           type="text"
           matInput
-          placeholder="Account"
           #accountElement
           [matAutocomplete]="auto"
           formControlName="account"
@@ -29,14 +29,8 @@
       </mat-autocomplete>
       <mat-form-field class="flex-auto basis-1/3">
         <mat-label>Amount</mat-label>
-        <span matPrefix>₹ </span>
-        <input
-          type="text"
-          matInput
-          placeholder="Amount"
-          formControlName="amount"
-          autocomplete="off"
-        />
+        <input type="text" matInput formControlName="amount" autocomplete="off" />
+        <span matTextPrefix>₹&nbsp;</span>
       </mat-form-field>
     </div>
   </form>
diff --git a/overlord/src/app/payment/payment.component.html b/overlord/src/app/payment/payment.component.html
index 470a006b..d70b419a 100644
--- a/overlord/src/app/payment/payment.component.html
+++ b/overlord/src/app/payment/payment.component.html
@@ -16,10 +16,10 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Date</mat-label>
           <input
             matInput
             [matDatepicker]="date"
-            placeholder="Date"
             formControlName="date"
             autocomplete="off"
             #dateElement
@@ -37,8 +37,8 @@
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/5">
           <mat-label>Payment Amount</mat-label>
-          <span matPrefix>₹ </span>
           <input type="text" matInput formControlName="paymentAmount" />
+          <span matTextPrefix>₹&nbsp;</span>
         </mat-form-field>
       </div>
 
@@ -47,10 +47,10 @@
         class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col"
       >
         <mat-form-field class="flex-auto basis-[55%] mr-5">
+          <mat-label>Account</mat-label>
           <input
             type="text"
             matInput
-            placeholder="Account"
             #accountElement
             [matAutocomplete]="auto"
             formControlName="account"
@@ -73,14 +73,8 @@
         </mat-autocomplete>
         <mat-form-field class="flex-auto basis-1/4 mr-5">
           <mat-label>Amount</mat-label>
-          <span matPrefix>₹ </span>
-          <input
-            type="text"
-            matInput
-            placeholder="Amount"
-            formControlName="amount"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="amount" autocomplete="off" />
+          <span matTextPrefix>₹&nbsp;</span>
         </mat-form-field>
 
         <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1/5">
@@ -120,12 +114,7 @@
       </mat-table>
       <mat-form-field>
         <mat-label>Narration</mat-label>
-        <textarea
-          matInput
-          matAutosizeMinRows="5"
-          placeholder="Narration"
-          formControlName="narration"
-        ></textarea>
+        <textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
       </mat-form-field>
       <div class="flex flex-row justify-center items-stretch">
         <div
diff --git a/overlord/src/app/period/period-detail/period-detail.component.html b/overlord/src/app/period/period-detail/period-detail.component.html
index 9c107ea5..40321006 100644
--- a/overlord/src/app/period/period-detail/period-detail.component.html
+++ b/overlord/src/app/period/period-detail/period-detail.component.html
@@ -6,10 +6,10 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
+          <mat-label>Valid From</mat-label>
           <input
             matInput
             [matDatepicker]="validFrom"
-            placeholder="Valid From"
             formControlName="validFrom"
             autocomplete="off"
           />
@@ -19,10 +19,10 @@
       </div>
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
+          <mat-label>Valid Till</mat-label>
           <input
             matInput
             [matDatepicker]="validTill"
-            placeholder="Valid Till"
             formControlName="validTill"
             autocomplete="off"
           />
diff --git a/overlord/src/app/product-group/product-group-detail/product-group-detail.component.html b/overlord/src/app/product-group/product-group-detail/product-group-detail.component.html
index 305a11bd..65e9a081 100644
--- a/overlord/src/app/product-group/product-group-detail/product-group-detail.component.html
+++ b/overlord/src/app/product-group/product-group-detail/product-group-detail.component.html
@@ -1,19 +1,13 @@
 <mat-card class="lg:max-w-[50%]">
-  <mat-card-title-group>
+  <mat-card-header>
     <mat-card-title>Product Group</mat-card-title>
-  </mat-card-title-group>
+  </mat-card-header>
   <mat-card-content>
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
           <mat-label>Name</mat-label>
-          <input
-            matInput
-            #nameElement
-            placeholder="Name"
-            formControlName="name"
-            (keyup.enter)="save()"
-          />
+          <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
         </mat-form-field>
       </div>
     </form>
diff --git a/overlord/src/app/product-ledger/product-ledger.component.html b/overlord/src/app/product-ledger/product-ledger.component.html
index f02196db..2f5ba2f5 100644
--- a/overlord/src/app/product-ledger/product-ledger.component.html
+++ b/overlord/src/app/product-ledger/product-ledger.component.html
@@ -11,11 +11,11 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto mr-5">
+          <mat-label>Start Date</mat-label>
           <input
             matInput
             [matDatepicker]="startDate"
             (focus)="startDate.open()"
-            placeholder="Start Date"
             formControlName="startDate"
             autocomplete="off"
           />
@@ -23,11 +23,11 @@
           <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()"
-            placeholder="Finish Date"
             formControlName="finishDate"
             autocomplete="off"
           />
@@ -37,11 +37,11 @@
       </div>
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-4/5 mr-5">
+          <mat-label>Product</mat-label>
           <input
             type="text"
             matInput
             #productElement
-            placeholder="Product"
             [matAutocomplete]="auto"
             formControlName="product"
             autocomplete="off"
diff --git a/overlord/src/app/product/product-detail/product-detail-dialog.component.html b/overlord/src/app/product/product-detail/product-detail-dialog.component.html
index 31a49cf8..6c66e006 100644
--- a/overlord/src/app/product/product-detail/product-detail-dialog.component.html
+++ b/overlord/src/app/product/product-detail/product-detail-dialog.component.html
@@ -6,28 +6,23 @@
     >
       <mat-form-field class="flex-auto mr-5">
         <mat-label>Units</mat-label>
-        <input matInput placeholder="Units" formControlName="units" />
+        <input matInput formControlName="units" />
       </mat-form-field>
       <mat-form-field class="flex-auto mr-5">
         <mat-label>Fraction</mat-label>
-        <input matInput type="number" placeholder="Fraction" formControlName="fraction" />
+        <input matInput type="number" formControlName="fraction" />
       </mat-form-field>
       <mat-form-field class="flex-auto mr-5">
         <mat-label>Yield</mat-label>
-        <input matInput type="number" placeholder="Yield" formControlName="productYield" />
+        <input matInput type="number" formControlName="productYield" />
       </mat-form-field>
       <mat-form-field class="flex-auto mr-5">
         <mat-label>{{ data.isPurchased ? 'Purchase Price' : 'Cost Price' }}</mat-label>
-        <input
-          matInput
-          type="number"
-          placeholder="{{ data.isPurchased ? 'Purchase Price' : 'Cost Price' }}"
-          formControlName="costPrice"
-        />
+        <input matInput type="number" formControlName="costPrice" />
       </mat-form-field>
       <mat-form-field class="flex-auto" [hidden]="!data.isSold">
         <mat-label>Sale Price</mat-label>
-        <input matInput type="number" placeholder="Sale Price" formControlName="salePrice" />
+        <input matInput type="number" formControlName="salePrice" />
       </mat-form-field>
     </div>
   </form>
diff --git a/overlord/src/app/product/product-detail/product-detail.component.html b/overlord/src/app/product/product-detail/product-detail.component.html
index 46e721f3..2491e06f 100644
--- a/overlord/src/app/product/product-detail/product-detail.component.html
+++ b/overlord/src/app/product/product-detail/product-detail.component.html
@@ -7,17 +7,17 @@
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
           <mat-label>Code</mat-label>
-          <input matInput placeholder="Code" formControlName="code" />
+          <input matInput formControlName="code" />
         </mat-form-field>
       </div>
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto basis-4/5 mr-5">
           <mat-label>Name</mat-label>
-          <input matInput #nameElement placeholder="Name" formControlName="name" />
+          <input matInput #nameElement formControlName="name" />
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/5">
           <mat-label>Fraction Units</mat-label>
-          <input matInput placeholder="Fraction Units" formControlName="fractionUnits" />
+          <input matInput formControlName="fractionUnits" />
         </mat-form-field>
       </div>
       <div class="flex flex-row justify-around content-start items-start">
@@ -30,7 +30,7 @@
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
           <mat-label>Product Type</mat-label>
-          <mat-select placeholder="Product Group" formControlName="productGroup">
+          <mat-select formControlName="productGroup">
             <mat-option *ngFor="let pg of productGroups" [value]="pg.id">
               {{ pg.name }}
             </mat-option>
@@ -44,28 +44,23 @@
       >
         <mat-form-field class="flex-auto mr-5">
           <mat-label>Units</mat-label>
-          <input matInput placeholder="Units" formControlName="units" />
+          <input matInput formControlName="units" />
         </mat-form-field>
         <mat-form-field class="flex-auto mr-5">
           <mat-label>Fraction</mat-label>
-          <input matInput type="number" placeholder="Fraction" formControlName="fraction" />
+          <input matInput type="number" formControlName="fraction" />
         </mat-form-field>
         <mat-form-field class="flex-auto mr-5">
           <mat-label>Yield</mat-label>
-          <input matInput type="number" placeholder="Yield" formControlName="productYield" />
+          <input matInput type="number" formControlName="productYield" />
         </mat-form-field>
         <mat-form-field class="flex-auto mr-5">
           <mat-label>{{ item.isPurchased ? 'Purchase Price' : 'Cost Price' }}</mat-label>
-          <input
-            matInput
-            type="number"
-            placeholder="{{ item.isPurchased ? 'Purchase Price' : 'Cost Price' }}"
-            formControlName="costPrice"
-          />
+          <input matInput type="number" formControlName="costPrice" />
         </mat-form-field>
         <mat-form-field class="flex-auto mr-5">
           <mat-label>Sale Price</mat-label>
-          <input matInput type="number" placeholder="Sale Price" formControlName="salePrice" />
+          <input matInput type="number" formControlName="salePrice" />
         </mat-form-field>
         <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto">Add</button>
       </div>
diff --git a/overlord/src/app/product/product-list/product-list.component.html b/overlord/src/app/product/product-list/product-list.component.html
index c3902078..be0b4d2e 100644
--- a/overlord/src/app/product/product-list/product-list.component.html
+++ b/overlord/src/app/product/product-list/product-list.component.html
@@ -15,14 +15,8 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
-          <input
-            type="text"
-            matInput
-            #filterElement
-            placeholder="Filter"
-            formControlName="filter"
-            autocomplete="off"
-          />
+          <mat-label>Filter</mat-label>
+          <input type="text" matInput #filterElement formControlName="filter" autocomplete="off" />
         </mat-form-field>
       </div>
     </form>
diff --git a/overlord/src/app/profit-loss/profit-loss.component.html b/overlord/src/app/profit-loss/profit-loss.component.html
index 3bcc6c7b..2abd822b 100644
--- a/overlord/src/app/profit-loss/profit-loss.component.html
+++ b/overlord/src/app/profit-loss/profit-loss.component.html
@@ -6,11 +6,11 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Start Date</mat-label>
           <input
             matInput
             [matDatepicker]="startDate"
             (focus)="startDate.open()"
-            placeholder="Start Date"
             formControlName="startDate"
             autocomplete="off"
           />
@@ -18,11 +18,11 @@
           <mat-datepicker #startDate></mat-datepicker>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Finish Date</mat-label>
           <input
             matInput
             [matDatepicker]="finishDate"
             (focus)="finishDate.open()"
-            placeholder="Finish Date"
             formControlName="finishDate"
             autocomplete="off"
           />
diff --git a/overlord/src/app/purchase-entries/purchase-entries.component.html b/overlord/src/app/purchase-entries/purchase-entries.component.html
index 911981ca..034aad80 100644
--- a/overlord/src/app/purchase-entries/purchase-entries.component.html
+++ b/overlord/src/app/purchase-entries/purchase-entries.component.html
@@ -6,11 +6,11 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Start Date</mat-label>
           <input
             matInput
             [matDatepicker]="startDate"
             (focus)="startDate.open()"
-            placeholder="Start Date"
             formControlName="startDate"
             autocomplete="off"
           />
@@ -18,11 +18,11 @@
           <mat-datepicker #startDate></mat-datepicker>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Finish Date</mat-label>
           <input
             matInput
             [matDatepicker]="finishDate"
             (focus)="finishDate.open()"
-            placeholder="Finish Date"
             formControlName="finishDate"
             autocomplete="off"
           />
diff --git a/overlord/src/app/purchase-return/purchase-return-dialog.component.html b/overlord/src/app/purchase-return/purchase-return-dialog.component.html
index ef992a09..f1f377b7 100644
--- a/overlord/src/app/purchase-return/purchase-return-dialog.component.html
+++ b/overlord/src/app/purchase-return/purchase-return-dialog.component.html
@@ -3,10 +3,10 @@
   <form [formGroup]="form">
     <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
       <mat-form-field class="flex-auto basis-2/3 mr-5">
+        <mat-label>Product</mat-label>
         <input
           type="text"
           matInput
-          placeholder="Product"
           #batchElement
           [matAutocomplete]="autoB"
           formControlName="batch"
@@ -25,13 +25,7 @@
       </mat-form-field>
       <mat-form-field class="flex-auto basis-1/3">
         <mat-label>Quantity</mat-label>
-        <input
-          type="text"
-          matInput
-          placeholder="Quantity"
-          formControlName="quantity"
-          autocomplete="off"
-        />
+        <input type="text" matInput formControlName="quantity" autocomplete="off" />
       </mat-form-field>
     </div>
   </form>
diff --git a/overlord/src/app/purchase-return/purchase-return.component.html b/overlord/src/app/purchase-return/purchase-return.component.html
index 0dc275fe..af5fb38a 100644
--- a/overlord/src/app/purchase-return/purchase-return.component.html
+++ b/overlord/src/app/purchase-return/purchase-return.component.html
@@ -16,10 +16,10 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Date</mat-label>
           <input
             matInput
             [matDatepicker]="date"
-            placeholder="Date"
             formControlName="date"
             autocomplete="off"
             #dateElement
@@ -29,10 +29,10 @@
           <mat-datepicker #date></mat-datepicker>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Account</mat-label>
           <input
             type="text"
             matInput
-            placeholder="Account"
             #accountElement
             [matAutocomplete]="autoA"
             formControlName="account"
@@ -55,8 +55,8 @@
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/5">
           <mat-label>Amount</mat-label>
-          <span matPrefix>₹ </span>
           <input type="text" matInput formControlName="amount" />
+          <span matTextPrefix>₹&nbsp;</span>
         </mat-form-field>
       </div>
 
@@ -65,10 +65,10 @@
         class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col"
       >
         <mat-form-field class="flex-auto basis-[55%] mr-5">
+          <mat-label>Product</mat-label>
           <input
             type="text"
             matInput
-            placeholder="Product"
             #batchElement
             [matAutocomplete]="autoB"
             formControlName="batch"
@@ -87,13 +87,7 @@
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/4 mr-5">
           <mat-label>Quantity</mat-label>
-          <input
-            type="text"
-            matInput
-            placeholder="Quantity"
-            formControlName="quantity"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="quantity" autocomplete="off" />
         </mat-form-field>
 
         <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1/5">
@@ -161,12 +155,7 @@
       </mat-table>
       <mat-form-field>
         <mat-label>Narration</mat-label>
-        <textarea
-          matInput
-          matAutosizeMinRows="5"
-          placeholder="Narration"
-          formControlName="narration"
-        ></textarea>
+        <textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
       </mat-form-field>
       <div class="flex flex-row justify-center items-stretch mr-5">
         <div
diff --git a/overlord/src/app/purchase/purchase-dialog.component.html b/overlord/src/app/purchase/purchase-dialog.component.html
index 3a6c2172..cb090f60 100644
--- a/overlord/src/app/purchase/purchase-dialog.component.html
+++ b/overlord/src/app/purchase/purchase-dialog.component.html
@@ -3,10 +3,10 @@
   <form [formGroup]="form">
     <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
       <mat-form-field class="flex-auto basis-[52%] mr-5">
+        <mat-label>Product</mat-label>
         <input
           type="text"
           matInput
-          placeholder="Product"
           #productElement
           [matAutocomplete]="autoP"
           formControlName="product"
@@ -25,37 +25,19 @@
       </mat-form-field>
       <mat-form-field class="flex-auto basis-[12%] mr-5">
         <mat-label>Quantity</mat-label>
-        <input
-          type="text"
-          matInput
-          placeholder="Quantity"
-          formControlName="quantity"
-          autocomplete="off"
-        />
+        <input type="text" matInput formControlName="quantity" autocomplete="off" />
       </mat-form-field>
       <mat-form-field class="flex-auto basis-[12%] mr-5">
         <mat-label>Price</mat-label>
-        <input
-          type="text"
-          matInput
-          placeholder="Price"
-          formControlName="price"
-          autocomplete="off"
-        />
+        <input type="text" matInput formControlName="price" autocomplete="off" />
       </mat-form-field>
       <mat-form-field class="flex-auto basis-[12%] mr-5">
         <mat-label>Tax</mat-label>
-        <input type="text" matInput placeholder="Tax" formControlName="tax" autocomplete="off" />
+        <input type="text" matInput formControlName="tax" autocomplete="off" />
       </mat-form-field>
       <mat-form-field class="flex-auto basis-[12%]">
         <mat-label>Discount</mat-label>
-        <input
-          type="text"
-          matInput
-          placeholder="Discount"
-          formControlName="discount"
-          autocomplete="off"
-        />
+        <input type="text" matInput formControlName="discount" autocomplete="off" />
       </mat-form-field>
     </div>
   </form>
diff --git a/overlord/src/app/purchase/purchase.component.html b/overlord/src/app/purchase/purchase.component.html
index a0871af8..4760ba83 100644
--- a/overlord/src/app/purchase/purchase.component.html
+++ b/overlord/src/app/purchase/purchase.component.html
@@ -16,10 +16,10 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Date</mat-label>
           <input
             matInput
             [matDatepicker]="date"
-            placeholder="Date"
             formControlName="date"
             autocomplete="off"
             #dateElement
@@ -29,10 +29,10 @@
           <mat-datepicker #date></mat-datepicker>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Account</mat-label>
           <input
             type="text"
             matInput
-            placeholder="Account"
             #accountElement
             [matAutocomplete]="autoA"
             formControlName="account"
@@ -55,8 +55,8 @@
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/5">
           <mat-label>Amount</mat-label>
-          <span matPrefix>₹ </span>
           <input type="text" matInput formControlName="amount" />
+          <span matTextPrefix>₹&nbsp;</span>
         </mat-form-field>
       </div>
 
@@ -65,10 +65,10 @@
         class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col"
       >
         <mat-form-field class="flex-auto basis-1/2 mr-5">
+          <mat-label>Product</mat-label>
           <input
             type="text"
             matInput
-            placeholder="Product"
             #productElement
             [matAutocomplete]="autoP"
             formControlName="product"
@@ -87,37 +87,19 @@
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/10 mr-5">
           <mat-label>Quantity</mat-label>
-          <input
-            type="text"
-            matInput
-            placeholder="Quantity"
-            formControlName="quantity"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="quantity" autocomplete="off" />
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/10 mr-5">
           <mat-label>Price</mat-label>
-          <input
-            type="text"
-            matInput
-            placeholder="Price"
-            formControlName="price"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="price" autocomplete="off" />
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/10 mr-5">
           <mat-label>Tax</mat-label>
-          <input type="text" matInput placeholder="Tax" formControlName="tax" autocomplete="off" />
+          <input type="text" matInput formControlName="tax" autocomplete="off" />
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/10 mr-5">
           <mat-label>Discount</mat-label>
-          <input
-            type="text"
-            matInput
-            placeholder="Discount"
-            formControlName="discount"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="discount" autocomplete="off" />
         </mat-form-field>
 
         <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1/10">
@@ -185,12 +167,7 @@
       </mat-table>
       <mat-form-field>
         <mat-label>Narration</mat-label>
-        <textarea
-          matInput
-          matAutosizeMinRows="5"
-          placeholder="Narration"
-          formControlName="narration"
-        ></textarea>
+        <textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
       </mat-form-field>
       <div class="flex flex-row justify-center items-stretch mr-5">
         <div
diff --git a/overlord/src/app/purchases/purchases.component.html b/overlord/src/app/purchases/purchases.component.html
index 821a4c53..cfdd2a9e 100644
--- a/overlord/src/app/purchases/purchases.component.html
+++ b/overlord/src/app/purchases/purchases.component.html
@@ -6,11 +6,11 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Start Date</mat-label>
           <input
             matInput
             [matDatepicker]="startDate"
             (focus)="startDate.open()"
-            placeholder="Start Date"
             formControlName="startDate"
             autocomplete="off"
           />
@@ -18,11 +18,11 @@
           <mat-datepicker #startDate></mat-datepicker>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Finish Date</mat-label>
           <input
             matInput
             [matDatepicker]="finishDate"
             (focus)="finishDate.open()"
-            placeholder="Finish Date"
             formControlName="finishDate"
             autocomplete="off"
           />
diff --git a/overlord/src/app/rate-contract/rate-contract-detail/rate-contract-detail.component.html b/overlord/src/app/rate-contract/rate-contract-detail/rate-contract-detail.component.html
index fb60119d..1fb3c79f 100644
--- a/overlord/src/app/rate-contract/rate-contract-detail/rate-contract-detail.component.html
+++ b/overlord/src/app/rate-contract/rate-contract-detail/rate-contract-detail.component.html
@@ -6,10 +6,10 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Date</mat-label>
           <input
             matInput
             [matDatepicker]="date"
-            placeholder="Date"
             formControlName="date"
             autocomplete="off"
             #dateElement
@@ -18,10 +18,10 @@
           <mat-datepicker #date></mat-datepicker>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-3/5">
+          <mat-label>Account</mat-label>
           <input
             type="text"
             matInput
-            placeholder="Account"
             #accountElement
             [matAutocomplete]="autoA"
             formControlName="account"
@@ -41,10 +41,10 @@
       </div>
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto mr-5">
+          <mat-label>Valid From</mat-label>
           <input
             matInput
             [matDatepicker]="validFrom"
-            placeholder="Valid From"
             formControlName="validFrom"
             autocomplete="off"
           />
@@ -52,10 +52,10 @@
           <mat-datepicker #validFrom></mat-datepicker>
         </mat-form-field>
         <mat-form-field class="flex-auto">
+          <mat-label>Valid Till</mat-label>
           <input
             matInput
             [matDatepicker]="validTill"
-            placeholder="Valid Till"
             formControlName="validTill"
             autocomplete="off"
           />
@@ -68,10 +68,10 @@
         class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col"
       >
         <mat-form-field class="flex-auto basis-3/5 mr-5">
+          <mat-label>Product</mat-label>
           <input
             type="text"
             matInput
-            placeholder="Product"
             #productElement
             [matAutocomplete]="autoP"
             formControlName="product"
@@ -90,13 +90,7 @@
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/5 mr-5">
           <mat-label>Price</mat-label>
-          <input
-            type="text"
-            matInput
-            placeholder="Price"
-            formControlName="price"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="price" autocomplete="off" />
         </mat-form-field>
         <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1/5">
           Add
@@ -132,12 +126,7 @@
       </mat-table>
       <mat-form-field>
         <mat-label>Narration</mat-label>
-        <textarea
-          matInput
-          matAutosizeMinRows="5"
-          placeholder="Narration"
-          formControlName="narration"
-        ></textarea>
+        <textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
       </mat-form-field>
     </form>
   </mat-card-content>
diff --git a/overlord/src/app/raw-material-cost/raw-material-cost.component.html b/overlord/src/app/raw-material-cost/raw-material-cost.component.html
index 9ae2acff..f6cce829 100644
--- a/overlord/src/app/raw-material-cost/raw-material-cost.component.html
+++ b/overlord/src/app/raw-material-cost/raw-material-cost.component.html
@@ -11,11 +11,11 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Start Date</mat-label>
           <input
             matInput
             [matDatepicker]="startDate"
             (focus)="startDate.open()"
-            placeholder="Start Date"
             formControlName="startDate"
             autocomplete="off"
           />
@@ -23,11 +23,11 @@
           <mat-datepicker #startDate></mat-datepicker>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Finish Date</mat-label>
           <input
             matInput
             [matDatepicker]="finishDate"
             (focus)="finishDate.open()"
-            placeholder="Finish Date"
             formControlName="finishDate"
             autocomplete="off"
           />
diff --git a/overlord/src/app/receipt/receipt-dialog.component.html b/overlord/src/app/receipt/receipt-dialog.component.html
index add07540..4929a276 100644
--- a/overlord/src/app/receipt/receipt-dialog.component.html
+++ b/overlord/src/app/receipt/receipt-dialog.component.html
@@ -3,10 +3,10 @@
   <form [formGroup]="form">
     <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
       <mat-form-field class="flex-auto basis-2/3 mr-5">
+        <mat-label>Account</mat-label>
         <input
           type="text"
           matInput
-          placeholder="Account"
           #accountElement
           [matAutocomplete]="auto"
           formControlName="account"
@@ -29,14 +29,8 @@
       </mat-autocomplete>
       <mat-form-field class="flex-auto basis-1/3">
         <mat-label>Amount</mat-label>
-        <span matPrefix>₹ </span>
-        <input
-          type="text"
-          matInput
-          placeholder="Amount"
-          formControlName="amount"
-          autocomplete="off"
-        />
+        <input type="text" matInput formControlName="amount" autocomplete="off" />
+        <span matTextPrefix>₹&nbsp;</span>
       </mat-form-field>
     </div>
   </form>
diff --git a/overlord/src/app/receipt/receipt.component.html b/overlord/src/app/receipt/receipt.component.html
index f6664201..c5c2c5a6 100644
--- a/overlord/src/app/receipt/receipt.component.html
+++ b/overlord/src/app/receipt/receipt.component.html
@@ -16,10 +16,10 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Date</mat-label>
           <input
             matInput
             [matDatepicker]="date"
-            placeholder="Date"
             formControlName="date"
             autocomplete="off"
             #dateElement
@@ -37,8 +37,8 @@
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/5">
           <mat-label>Receipt Amount</mat-label>
-          <span matPrefix>₹ </span>
           <input type="text" matInput formControlName="receiptAmount" />
+          <span matTextPrefix>₹&nbsp;</span>
         </mat-form-field>
       </div>
 
@@ -47,10 +47,10 @@
         class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col"
       >
         <mat-form-field class="flex-auto basis-[55%] mr-5">
+          <mat-label>Account</mat-label>
           <input
             type="text"
             matInput
-            placeholder="Account"
             #accountElement
             [matAutocomplete]="auto"
             formControlName="account"
@@ -73,14 +73,8 @@
         </mat-autocomplete>
         <mat-form-field class="flex-auto basis-1/4 mr-5">
           <mat-label>Amount</mat-label>
-          <span matPrefix>₹ </span>
-          <input
-            type="text"
-            matInput
-            placeholder="Amount"
-            formControlName="amount"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="amount" autocomplete="off" />
+          <span matTextPrefix>₹&nbsp;</span>
         </mat-form-field>
 
         <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1/5">
@@ -120,12 +114,7 @@
       </mat-table>
       <mat-form-field class="flex-auto">
         <mat-label>Narration</mat-label>
-        <textarea
-          matInput
-          matAutosizeMinRows="5"
-          placeholder="Narration"
-          formControlName="narration"
-        ></textarea>
+        <textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
       </mat-form-field>
       <div class="flex flex-row justify-center items-stretch">
         <div
diff --git a/overlord/src/app/recipe/recipe-detail/recipe-detail.component.html b/overlord/src/app/recipe/recipe-detail/recipe-detail.component.html
index f5e0eee4..e37d4a07 100644
--- a/overlord/src/app/recipe/recipe-detail/recipe-detail.component.html
+++ b/overlord/src/app/recipe/recipe-detail/recipe-detail.component.html
@@ -15,10 +15,10 @@
       </div>
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-3/5 mr-5">
+          <mat-label>Product</mat-label>
           <input
             type="text"
             matInput
-            placeholder="Product"
             #productElement
             [matAutocomplete]="autoP"
             formControlName="product"
@@ -37,45 +37,21 @@
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/10 mr-5">
           <mat-label>Yield</mat-label>
-          <input
-            type="text"
-            matInput
-            placeholder="Yield"
-            formControlName="recipeYield"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="recipeYield" autocomplete="off" />
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/10 mr-5">
           <mat-label>Sale Price</mat-label>
-          <span matPrefix>₹ </span>
-          <input
-            type="text"
-            matInput
-            placeholder="Sale Price"
-            formControlName="salePrice"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="salePrice" autocomplete="off" />
+          <span matTextPrefix>₹&nbsp;</span>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/10 mr-5">
           <mat-label>Cost Price</mat-label>
-          <span matPrefix>₹ </span>
-          <input
-            type="text"
-            matInput
-            placeholder="Cost Price"
-            formControlName="costPrice"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="costPrice" autocomplete="off" />
+          <span matTextPrefix>₹&nbsp;</span>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/10">
           <mat-label>Cost Percentage</mat-label>
-          <input
-            type="text"
-            matInput
-            placeholder="Cost Percentage"
-            formControlName="costPercentage"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="costPercentage" autocomplete="off" />
           <span matSuffix>%</span>
         </mat-form-field>
       </div>
@@ -84,10 +60,10 @@
         class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col"
       >
         <mat-form-field class="flex-auto basis-1/2 mr-5">
+          <mat-label>Ingredient</mat-label>
           <input
             type="text"
             matInput
-            placeholder="Ingredient"
             #ingredientElement
             [matAutocomplete]="autoI"
             formControlName="ingredient"
@@ -106,24 +82,12 @@
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/5 mr-5">
           <mat-label>Quantity</mat-label>
-          <input
-            type="text"
-            matInput
-            placeholder="Quantity"
-            formControlName="quantity"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="quantity" autocomplete="off" />
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/5 mr-5">
           <mat-label>Rate</mat-label>
-          <span matPrefix>₹ </span>
-          <input
-            type="text"
-            matInput
-            placeholder="Rate"
-            formControlName="rate"
-            autocomplete="off"
-          />
+          <input type="text" matInput formControlName="rate" autocomplete="off" />
+          <span matTextPrefix>₹&nbsp;</span>
         </mat-form-field>
 
         <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-1/10">
diff --git a/overlord/src/app/recipe/recipe-list/recipe-list.component.html b/overlord/src/app/recipe/recipe-list/recipe-list.component.html
index 6e81dda7..544fe5a5 100644
--- a/overlord/src/app/recipe/recipe-list/recipe-list.component.html
+++ b/overlord/src/app/recipe/recipe-list/recipe-list.component.html
@@ -21,7 +21,6 @@
         <mat-form-field class="flex-auto">
           <mat-label>Product Type</mat-label>
           <mat-select
-            placeholder="Product Category"
             formControlName="productGroup"
             (selectionChange)="filterProductGroup($event.value)"
           >
diff --git a/overlord/src/app/role/role-detail/role-detail.component.html b/overlord/src/app/role/role-detail/role-detail.component.html
index 980da69a..2f0668ac 100644
--- a/overlord/src/app/role/role-detail/role-detail.component.html
+++ b/overlord/src/app/role/role-detail/role-detail.component.html
@@ -1,14 +1,14 @@
 <div class="flex flex-auto flex-row justify-around content-center items-center lg:max-w-[50%]">
-  <mat-card appearance="outlined" class="flex-auto">
-    <mat-card-title-group>
+  <mat-card class="flex-auto">
+    <mat-card-header>
       <mat-card-title>Role</mat-card-title>
-    </mat-card-title-group>
+    </mat-card-header>
     <mat-card-content>
       <form [formGroup]="form" class="flex flex-col">
         <div class="flex flex-row justify-around content-start items-start">
           <mat-form-field class="flex-auto">
             <mat-label>Name</mat-label>
-            <input matInput #nameElement placeholder="Name" formControlName="name" />
+            <input matInput #nameElement formControlName="name" />
           </mat-form-field>
         </div>
         <mat-divider></mat-divider>
diff --git a/overlord/src/app/role/role-list/role-list.component.html b/overlord/src/app/role/role-list/role-list.component.html
index c3d5d803..8801fb0b 100644
--- a/overlord/src/app/role/role-list/role-list.component.html
+++ b/overlord/src/app/role/role-list/role-list.component.html
@@ -1,11 +1,13 @@
-<mat-card appearance="outlined">
-  <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>
+  <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" matSort aria-label="Elements">
       <!-- Name Column -->
diff --git a/overlord/src/app/settings/settings.component.html b/overlord/src/app/settings/settings.component.html
index 65c8b153..8e480182 100644
--- a/overlord/src/app/settings/settings.component.html
+++ b/overlord/src/app/settings/settings.component.html
@@ -1,6 +1,6 @@
 <mat-tab-group>
   <mat-tab label="Lock Dates">
-    <mat-card appearance="outlined">
+    <mat-card>
       <mat-card-content>
         <form [formGroup]="lockInfoForm" class="flex flex-col">
           <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
@@ -15,10 +15,10 @@
               Is Rolling
             </mat-checkbox>
             <mat-form-field class="flex-auto basis-3/5" *ngIf="lockOlder && !olderRolling">
+              <mat-label>Date</mat-label>
               <input
                 matInput
                 [matDatepicker]="olderDate"
-                placeholder="Date"
                 formControlName="olderDate"
                 autocomplete="off"
               />
@@ -26,7 +26,8 @@
               <mat-datepicker #olderDate></mat-datepicker>
             </mat-form-field>
             <mat-form-field class="flex-auto basis-3/5" *ngIf="lockOlder && olderRolling">
-              <input matInput placeholder="Days" formControlName="olderDays" autocomplete="off" />
+              <mat-label>Days</mat-label>
+              <input matInput formControlName="olderDays" autocomplete="off" />
             </mat-form-field>
           </div>
           <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
@@ -83,10 +84,10 @@
           </div>
           <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
             <mat-form-field class="flex-auto basis-3/10 mr-5">
+              <mat-label>Valid From</mat-label>
               <input
                 matInput
                 [matDatepicker]="validFrom"
-                placeholder="Valid From"
                 formControlName="validFrom"
                 autocomplete="off"
               />
@@ -94,10 +95,10 @@
               <mat-datepicker #validFrom></mat-datepicker>
             </mat-form-field>
             <mat-form-field class="flex-auto basis-3/10 mr-5">
+              <mat-label>Valid Till</mat-label>
               <input
                 matInput
                 [matDatepicker]="validTill"
-                placeholder="Valid Till"
                 formControlName="validTill"
                 autocomplete="off"
               />
@@ -106,13 +107,7 @@
             </mat-form-field>
             <mat-form-field class="flex-auto basis-1/5 mr-5">
               <mat-label>Index</mat-label>
-              <input
-                type="text"
-                matInput
-                placeholder="Index"
-                formControlName="index"
-                autocomplete="off"
-              />
+              <input type="text" matInput formControlName="index" autocomplete="off" />
             </mat-form-field>
             <button
               mat-raised-button
@@ -190,16 +185,16 @@
     </mat-card>
   </mat-tab>
   <mat-tab label="Rebase Data">
-    <mat-card appearance="outlined">
+    <mat-card>
       <mat-card-content>
         <form [formGroup]="rebaseDataForm" class="flex flex-col">
           <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
             <mat-form-field class="flex-auto basis-4/5 mr-5">
+              <mat-label>Date</mat-label>
               <input
                 matInput
                 [matDatepicker]="rebaseDataDate"
                 (focus)="rebaseDataDate.open()"
-                placeholder="Date"
                 formControlName="date"
                 autocomplete="off"
               />
@@ -221,7 +216,7 @@
     </mat-card>
   </mat-tab>
   <mat-tab label="Maintenance Mode">
-    <mat-card appearance="outlined">
+    <mat-card>
       <mat-card-content>
         <mat-card-subtitle *ngIf="maintenance.enabled">
           Maintenance mode is <strong>ENABLED</strong> by user
diff --git a/overlord/src/app/stock-movement/stock-movement.component.html b/overlord/src/app/stock-movement/stock-movement.component.html
index 660f38f5..2be201fe 100644
--- a/overlord/src/app/stock-movement/stock-movement.component.html
+++ b/overlord/src/app/stock-movement/stock-movement.component.html
@@ -6,11 +6,11 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Start Date</mat-label>
           <input
             matInput
             [matDatepicker]="startDate"
             (focus)="startDate.open()"
-            placeholder="Start Date"
             formControlName="startDate"
             autocomplete="off"
           />
@@ -18,11 +18,11 @@
           <mat-datepicker #startDate></mat-datepicker>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Finish Date</mat-label>
           <input
             matInput
             [matDatepicker]="finishDate"
             (focus)="finishDate.open()"
-            placeholder="Finish Date"
             formControlName="finishDate"
             autocomplete="off"
           />
diff --git a/overlord/src/app/trial-balance/trial-balance.component.html b/overlord/src/app/trial-balance/trial-balance.component.html
index 6e2a01e8..da6c24dd 100644
--- a/overlord/src/app/trial-balance/trial-balance.component.html
+++ b/overlord/src/app/trial-balance/trial-balance.component.html
@@ -6,11 +6,11 @@
     <form [formGroup]="form" class="flex flex-col">
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-4/5 mr-5">
+          <mat-label>Date</mat-label>
           <input
             matInput
             [matDatepicker]="dateInput"
             (focus)="dateInput.open()"
-            placeholder="Date"
             formControlName="date"
             autocomplete="off"
           />
diff --git a/overlord/src/app/user/user-detail/user-detail.component.html b/overlord/src/app/user/user-detail/user-detail.component.html
index 98135233..a3d2c1c6 100644
--- a/overlord/src/app/user/user-detail/user-detail.component.html
+++ b/overlord/src/app/user/user-detail/user-detail.component.html
@@ -1,25 +1,20 @@
 <div class="flex flex-auto flex-row justify-around content-center items-center lg:max-w-[50%]">
-  <mat-card appearance="outlined" class="flex-auto">
-    <mat-card-title-group>
+  <mat-card class="flex-auto">
+    <mat-card-header>
       <mat-card-title>User</mat-card-title>
-    </mat-card-title-group>
+    </mat-card-header>
     <mat-card-content>
       <form [formGroup]="form" class="flex flex-col">
         <div class="flex flex-row justify-around content-start items-start">
           <mat-form-field class="flex-auto">
             <mat-label>Name</mat-label>
-            <input matInput #nameElement placeholder="Name" formControlName="name" />
+            <input matInput #nameElement formControlName="name" />
           </mat-form-field>
         </div>
         <div class="flex flex-row justify-around content-start items-start">
           <mat-form-field class="flex-auto">
             <mat-label>Password</mat-label>
-            <input
-              matInput
-              placeholder="Password"
-              formControlName="password"
-              [type]="hide ? 'password' : 'text'"
-            />
+            <input matInput formControlName="password" [type]="hide ? 'password' : 'text'" />
             <mat-icon matSuffix (click)="hide = !hide">{{
               hide ? 'visibility' : 'visibility_off'
             }}</mat-icon>
diff --git a/overlord/src/app/user/user-list/user-list.component.html b/overlord/src/app/user/user-list/user-list.component.html
index 767f19dd..6a305039 100644
--- a/overlord/src/app/user/user-list/user-list.component.html
+++ b/overlord/src/app/user/user-list/user-list.component.html
@@ -1,11 +1,13 @@
-<mat-card appearance="outlined">
-  <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>
+  <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" matSort aria-label="Elements">
       <!-- Name Column -->