diff --git a/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.css b/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.css
index 5ac280b..a335237 100644
--- a/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.css
+++ b/bookie/src/app/guest-book/guest-book-list/guest-book-list.component.css
@@ -11,3 +11,7 @@
   background-color: #00f518;
   color: #000000;
 }
+.center {
+  display: flex;
+  justify-content: center;
+}
diff --git a/bookie/src/app/home/home.component.css b/bookie/src/app/home/home.component.css
index 50698ad..e69de29 100644
--- a/bookie/src/app/home/home.component.css
+++ b/bookie/src/app/home/home.component.css
@@ -1,16 +0,0 @@
-.square-button {
-  min-width: 150px;
-  max-width: 150px;
-  min-height: 150px;
-  max-height: 150px;
-  cursor: pointer;
-  margin: 20px;
-}
-.item-name {
-  text-align: center;
-  padding: 0.5rem;
-}
-
-.center {
-  text-align: center;
-}
diff --git a/bookie/src/app/home/home.component.html b/bookie/src/app/home/home.component.html
index 329b6e5..83a8a7f 100644
--- a/bookie/src/app/home/home.component.html
+++ b/bookie/src/app/home/home.component.html
@@ -5,7 +5,7 @@
     *ngIf="auth.allowed('customers')"
     [routerLink]="['/', 'guest-book']"
   >
-    <h3 class="item-name">Guest Book</h3>
+    <h3>Guest Book</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -13,7 +13,7 @@
     *ngIf="auth.allowed('sales')"
     [routerLink]="['/', 'sales']"
   >
-    <h3 class="item-name">Sales</h3>
+    <h3>Sales</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -21,7 +21,7 @@
     *ngIf="auth.allowed('customers')"
     [routerLink]="['/', 'customers']"
   >
-    <h3 class="item-name">Customers</h3>
+    <h3>Customers</h3>
   </mat-card>
 </div>
 <div class="flex flex-row flex-wrap -mr-5 -mb-5">
@@ -31,7 +31,7 @@
     *ngIf="auth.allowed('cashier-report')"
     [routerLink]="['/', 'cashier-report']"
   >
-    <h3 class="item-name">Cashier Report</h3>
+    <h3>Cashier Report</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -39,7 +39,7 @@
     *ngIf="auth.allowed('sale-report')"
     [routerLink]="['/', 'sale-report']"
   >
-    <h3 class="item-name">Sale Report</h3>
+    <h3>Sale Report</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -47,7 +47,7 @@
     *ngIf="auth.allowed('tax-report')"
     [routerLink]="['/', 'tax-report']"
   >
-    <h3 class="item-name">Tax Report</h3>
+    <h3>Tax Report</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -55,7 +55,7 @@
     *ngIf="auth.allowed('product-sale-report')"
     [routerLink]="['/', 'product-sale-report']"
   >
-    <h3 class="item-name">Product Sale Report</h3>
+    <h3>Product Sale Report</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -63,7 +63,7 @@
     *ngIf="auth.allowed('bill-settlement-report')"
     [routerLink]="['/', 'bill-settlement-report']"
   >
-    <h3 class="item-name">Bill Settlement Report</h3>
+    <h3>Bill Settlement Report</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -71,7 +71,7 @@
     *ngIf="auth.allowed('beer-sale-report')"
     [routerLink]="['/', 'beer-sale-report']"
   >
-    <h3 class="item-name">Beer Sale Report</h3>
+    <h3>Beer Sale Report</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -79,7 +79,7 @@
     *ngIf="auth.allowed('discount-report')"
     [routerLink]="['/', 'discount-report']"
   >
-    <h3 class="item-name">Discount Report</h3>
+    <h3>Discount Report</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -87,7 +87,7 @@
     *ngIf="auth.allowed('product-sale-report')"
     [routerLink]="['/', 'menu-engineering-report']"
   >
-    <h3 class="item-name">Menu Engineering Report</h3>
+    <h3>Menu Engineering Report</h3>
   </mat-card>
 </div>
 <div class="flex flex-row flex-wrap -mr-5 -mb-5">
@@ -97,7 +97,7 @@
     *ngIf="auth.allowed('products')"
     [routerLink]="['/', 'products']"
   >
-    <h3 class="item-name">Products</h3>
+    <h3>Products</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -105,7 +105,7 @@
     *ngIf="auth.allowed('temporal-products')"
     [routerLink]="['/', 'temporal-products']"
   >
-    <h3 class="item-name">Temporal Products</h3>
+    <h3>Temporal Products</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -113,7 +113,7 @@
     *ngIf="auth.allowed('products')"
     [routerLink]="['/', 'update-product-prices']"
   >
-    <h3 class="item-name">Update Product Prices</h3>
+    <h3>Update Product Prices</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -121,7 +121,7 @@
     *ngIf="auth.allowed('products')"
     [routerLink]="['/', 'product-updates-report']"
   >
-    <h3 class="item-name">Product Updates Report</h3>
+    <h3>Product Updates Report</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -129,7 +129,7 @@
     *ngIf="auth.allowed('modifiers')"
     [routerLink]="['/', 'modifiers']"
   >
-    <h3 class="item-name">Modifiers</h3>
+    <h3>Modifiers</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -137,7 +137,7 @@
     *ngIf="auth.allowed('modifiers')"
     [routerLink]="['/', 'modifier-categories']"
   >
-    <h3 class="item-name">Modifier Categories</h3>
+    <h3>Modifier Categories</h3>
   </mat-card>
 </div>
 <div class="flex flex-row flex-wrap -mr-5 -mb-5">
@@ -147,7 +147,7 @@
     *ngIf="auth.allowed('sections')"
     [routerLink]="['/', 'tables']"
   >
-    <h3 class="item-name">Tables</h3>
+    <h3>Tables</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -155,7 +155,7 @@
     *ngIf="auth.allowed('sections')"
     [routerLink]="['/', 'sections']"
   >
-    <h3 class="item-name">Sections</h3>
+    <h3>Sections</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -163,7 +163,7 @@
     *ngIf="auth.allowed('products')"
     [routerLink]="['/', 'menu-categories']"
   >
-    <h3 class="item-name">Menu Categories</h3>
+    <h3>Menu Categories</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -171,7 +171,7 @@
     *ngIf="auth.allowed('products')"
     [routerLink]="['/', 'sale-categories']"
   >
-    <h3 class="item-name">Sale Categories</h3>
+    <h3>Sale Categories</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -179,7 +179,7 @@
     *ngIf="auth.allowed('taxes')"
     [routerLink]="['/', 'taxes']"
   >
-    <h3 class="item-name">Taxes</h3>
+    <h3>Taxes</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -187,7 +187,7 @@
     *ngIf="auth.allowed('regimes')"
     [routerLink]="['/', 'regimes']"
   >
-    <h3 class="item-name">Regimes</h3>
+    <h3>Regimes</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -195,7 +195,7 @@
     *ngIf="auth.allowed('devices')"
     [routerLink]="['/', 'devices']"
   >
-    <h3 class="item-name">Devices</h3>
+    <h3>Devices</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -203,7 +203,7 @@
     *ngIf="auth.allowed('section-printers')"
     [routerLink]="['/', 'section-printers']"
   >
-    <h3 class="item-name">Section Printers</h3>
+    <h3>Section Printers</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -211,7 +211,7 @@
     *ngIf="auth.allowed('printers')"
     [routerLink]="['/', 'printers']"
   >
-    <h3 class="item-name">Printers</h3>
+    <h3>Printers</h3>
   </mat-card>
 </div>
 <div class="flex flex-row flex-wrap -mr-5 -mb-5">
@@ -221,7 +221,7 @@
     *ngIf="auth.allowed('users')"
     [routerLink]="['/', 'roles']"
   >
-    <h3 class="item-name">Roles</h3>
+    <h3>Roles</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -229,7 +229,7 @@
     *ngIf="auth.allowed('users')"
     [routerLink]="['/', 'users']"
   >
-    <h3 class="item-name">Users</h3>
+    <h3>Users</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -237,7 +237,7 @@
     *ngIf="auth.allowed('authenticated')"
     [routerLink]="['/', 'users', 'me']"
   >
-    <h3 class="item-name">Change Password</h3>
+    <h3>Change Password</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -245,7 +245,7 @@
     *ngIf="auth.allowed('owner')"
     [routerLink]="['/', 'header-footer']"
   >
-    <h3 class="item-name">Header / Footer</h3>
+    <h3>Header / Footer</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -253,7 +253,7 @@
     *ngIf="auth.allowed('owner')"
     [routerLink]="['/', 'settle-options']"
   >
-    <h3 class="item-name">Settle Options</h3>
+    <h3>Settle Options</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
@@ -261,7 +261,7 @@
     *ngIf="auth.allowed('settings')"
     [routerLink]="['/', 'settings']"
   >
-    <h3 class="item-name">Settings</h3>
+    <h3>Settings</h3>
   </mat-card>
 </div>
 <footer class="footer">
diff --git a/bookie/src/app/sales/bill-type/bill-type.component.css b/bookie/src/app/sales/bill-type/bill-type.component.css
index cc46f59..e69de29 100644
--- a/bookie/src/app/sales/bill-type/bill-type.component.css
+++ b/bookie/src/app/sales/bill-type/bill-type.component.css
@@ -1,18 +0,0 @@
-.square-button {
-  min-width: 150px;
-  max-width: 150px;
-  min-height: 150px;
-  cursor: pointer;
-  margin: 20px;
-}
-.selected {
-  background-color: green;
-}
-.item-name {
-  text-align: center;
-  padding: 0.5rem;
-}
-.face {
-  background-color: #3f51b5;
-  color: #ffffff;
-}
diff --git a/bookie/src/app/sales/bill-type/bill-type.component.html b/bookie/src/app/sales/bill-type/bill-type.component.html
index 422a316..360a0a9 100644
--- a/bookie/src/app/sales/bill-type/bill-type.component.html
+++ b/bookie/src/app/sales/bill-type/bill-type.component.html
@@ -5,28 +5,28 @@
       class="flex flex-col square-button mr-5, mb-5"
       matRipple
       (click)="select('REGULAR_BILL')"
-      [class.selected]="selected === 'REGULAR_BILL'"
-      [class.face]="selected !== 'REGULAR_BILL'"
+      [class.strong-primary]="selected === 'REGULAR_BILL'"
+      [class.primary]="selected !== 'REGULAR_BILL'"
     >
-      <h3 class="item-name">Regular</h3>
+      <h3>Regular</h3>
     </mat-card>
     <mat-card
       class="flex flex-col square-button mr-5, mb-5"
       matRipple
       (click)="select('STAFF')"
-      [class.selected]="selected === 'STAFF'"
-      [class.face]="selected !== 'STAFF'"
+      [class.stron-primary]="selected === 'STAFF'"
+      [class.primary]="selected !== 'STAFF'"
     >
-      <h3 class="item-name">Staff</h3>
+      <h3>Staff</h3>
     </mat-card>
     <mat-card
       class="flex flex-col square-button mr-5, mb-5"
       matRipple
       (click)="select('NO_CHARGE')"
-      [class.selected]="selected === 'NO_CHARGE'"
-      [class.face]="selected !== 'NO_CHARGE'"
+      [class.strong-primary]="selected === 'NO_CHARGE'"
+      [class.primary]="selected !== 'NO_CHARGE'"
     >
-      <h3 class="item-name">No Charge</h3>
+      <h3>No Charge</h3>
     </mat-card>
   </div>
 </mat-dialog-content>
diff --git a/bookie/src/app/sales/bills/bills.component.css b/bookie/src/app/sales/bills/bills.component.css
deleted file mode 100644
index 90ef817..0000000
--- a/bookie/src/app/sales/bills/bills.component.css
+++ /dev/null
@@ -1,77 +0,0 @@
-.square-button {
-  min-width: 150px;
-  max-width: 150px;
-  min-height: 150px;
-}
-
-.right-align {
-  display: flex;
-  justify-content: flex-end;
-}
-
-table {
-  width: 100%;
-}
-
-.mat-column-select {
-  flex: 0 0 60px;
-}
-
-.grey900 {
-  background-color: #1b5e20;
-  color: #ffffff;
-  font-size: 1.2em;
-}
-
-.grey700 {
-  background-color: #388e3c;
-  color: #ffffff;
-}
-
-.grey500 {
-  background-color: #4caf50;
-  color: #000000;
-}
-
-.grey300 {
-  background-color: #81c784;
-  color: #000000;
-}
-
-.blue400 {
-  background-color: #42a5f5;
-  color: #000000;
-}
-
-.blue800 {
-  background-color: #1565c0;
-  color: #ffffff;
-}
-
-.red100 {
-  background-color: #ffcdd2;
-  color: #000000;
-}
-
-.deep-purple-50 {
-  background-color: #ede7f6;
-  color: #000000;
-}
-
-.deep-purple-100 {
-  background-color: #d1c4e9;
-  color: #000000;
-}
-
-.deep-purple-200 {
-  background-color: #b39ddb;
-  color: #000000;
-}
-
-.yellow300 {
-  background-color: #fff176;
-}
-
-.yellow-for-hh-printed {
-  background-color: #f7ca18;
-}
diff --git a/bookie/src/app/sales/bills/bills.component.html b/bookie/src/app/sales/bills/bills.component.html
index d8556c7..7880f2d 100644
--- a/bookie/src/app/sales/bills/bills.component.html
+++ b/bookie/src/app/sales/bills/bills.component.html
@@ -72,83 +72,107 @@
       <ng-container matColumnDef="quantity">
         <mat-header-cell *matHeaderCellDef>Quantity</mat-header-cell>
         <mat-cell *matCellDef="let row" class="right-align">
-          <button mat-icon-button (click)="subtractOne(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
-            <mat-icon class="del">indeterminate_check_box</mat-icon>
+          <button
+            mat-icon-button
+            class="small-icon-button"
+            (click)="subtractOne(row)"
+            [disabled]="row.isPrinted"
+            *ngIf="!row.isKot"
+          >
+            <mat-icon>indeterminate_check_box</mat-icon>
           </button>
-          <button mat-icon-button (click)="quantity(row)" [disabled]="rowQuantityDisabled(row)" *ngIf="!row.isKot">
+          <button
+            mat-icon-button
+            class="small-icon-button"
+            (click)="quantity(row)"
+            [disabled]="rowQuantityDisabled(row)"
+            *ngIf="!row.isKot"
+          >
             {{ row.quantity }}
           </button>
-          <button mat-icon-button (click)="addOne(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
-            <mat-icon class="del">control_point</mat-icon>
+          <button
+            mat-icon-button
+            class="small-icon-button"
+            (click)="addOne(row)"
+            [disabled]="row.isPrinted"
+            *ngIf="!row.isKot"
+          >
+            <mat-icon>control_point</mat-icon>
           </button>
-          <button mat-icon-button (click)="removeItem(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
-            <mat-icon class="del">cancel</mat-icon>
-          </button>
-          <button mat-icon-button (click)="modifier(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
-            <mat-icon class="del">assignment</mat-icon>
+          <button
+            mat-icon-button
+            class="small-icon-button"
+            (click)="modifier(row)"
+            [disabled]="row.isPrinted"
+            *ngIf="!row.isKot"
+          >
+            <mat-icon>assignment</mat-icon>
           </button>
           <button mat-icon-button (click)="moveKot(row)" [disabled]="row.isKot && !row.kotId" *ngIf="row.isKot">
             <mat-icon class="del">open_in_new</mat-icon>
           </button>
         </mat-cell>
       </ng-container>
-      <ng-container matColumnDef="gross-title">
-        <mat-footer-cell *matFooterCellDef class="grey300 bold">Gross</mat-footer-cell>
-      </ng-container>
-      <ng-container matColumnDef="gross-amount">
-        <mat-footer-cell *matFooterCellDef class="grey300 bold right-align">{{
-          bs.grossAmount | async | currency : 'INR'
-        }}</mat-footer-cell>
-      </ng-container>
-      <ng-container matColumnDef="hh-title">
-        <mat-footer-cell *matFooterCellDef class="grey300 bold">Happy Hour Discount</mat-footer-cell>
-      </ng-container>
-      <ng-container matColumnDef="hh-amount">
-        <mat-footer-cell *matFooterCellDef class="grey300 bold right-align">{{
-          bs.hhAmount | async | currency : 'INR'
-        }}</mat-footer-cell>
-      </ng-container>
-      <ng-container matColumnDef="discount-title">
-        <mat-footer-cell *matFooterCellDef class="grey500 bold">Discount</mat-footer-cell>
-      </ng-container>
-      <ng-container matColumnDef="discount-amount">
-        <mat-footer-cell *matFooterCellDef class="grey500 bold right-align">{{
-          bs.discountAmount | async | currency : 'INR'
-        }}</mat-footer-cell>
-      </ng-container>
-      <ng-container matColumnDef="tax-title">
-        <mat-footer-cell *matFooterCellDef class="grey700 bold">Tax</mat-footer-cell>
-      </ng-container>
-      <ng-container matColumnDef="tax-amount">
-        <mat-footer-cell *matFooterCellDef class="grey700 bold right-align">{{
-          bs.taxAmount | async | currency : 'INR'
-        }}</mat-footer-cell>
-      </ng-container>
-      <ng-container matColumnDef="amount-title">
-        <mat-footer-cell *matFooterCellDef class="grey900">Amount</mat-footer-cell>
-      </ng-container>
-      <ng-container matColumnDef="amount-amount">
-        <mat-footer-cell *matFooterCellDef class="grey900 bold right-align">{{
-          bs.amount | async | currency : 'INR'
-        }}</mat-footer-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.blue400]="row.isOldKot"
-        [class.blue800]="row.isNewKot"
-        [class.red100]="row.isPrinted && !row.isHappyHour"
-        [class.yellow300]="row.isHappyHour && !row.isPrinted"
-        [class.yellow-for-hh-printed]="row.isPrinted && row.isHappyHour"
+        [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="['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="['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>
diff --git a/bookie/src/app/sales/bills/bills.component.sass b/bookie/src/app/sales/bills/bills.component.sass
new file mode 100644
index 0000000..869bf32
--- /dev/null
+++ b/bookie/src/app/sales/bills/bills.component.sass
@@ -0,0 +1,111 @@
+@use '@angular/material' as mat
+
+$my-grey: mat.define-palette(mat.$grey-palette)
+$my-green: mat.define-palette(mat.$green-palette)
+
+.right-align
+  display: flex
+  justify-content: flex-end
+
+table
+  width: 100%
+
+.mat-column-select
+  flex: 0 0 60px
+
+.grey900, .mat-column-amount-title, .mat-column-amount-amount
+  background-color: #1b5e20
+  color: #ffffff
+  font-size: 1.2em
+  // color: mat.get-color-from-palette($my-grey, '900-contrast')
+  // background: mat.get-color-from-palette($my-grey, 900)
+
+.grey700, .mat-column-tax-title, .mat-column-tax-amount
+  background-color: #388e3c
+  color: #ffffff
+  // color: mat.get-color-from-palette($my-grey, '900-contrast')
+  // background: mat.get-color-from-palette($my-grey, 900)
+
+.grey500, .mat-column-discount-title, .mat-column-discount-amount
+  background-color: #4caf50
+  color: #000000
+  // color: mat.get-color-from-palette($my-grey, '300-contrast')
+  // background: mat.get-color-from-palette($my-grey, 300)
+
+.grey300, .mat-column-hh-title, .mat-column-hh-amount, .mat-column-gross-title, .mat-column-gross-amount
+  background-color: #81c784
+  color: #000000
+  // color: mat.get-color-from-palette($my-grey, '300-contrast')
+  // background: mat.get-color-from-palette($my-grey, 300)
+
+.blue400, .old-kot
+  background-color: #42a5f5
+  color: #ffffff
+  // color: mat.get-color-from-palette($my-green, 700)
+  // background-color: mat.get-color-from-palette($my-green, 500)
+
+.blue800, .new-kot
+  background-color: #1565c0
+  color: #ffffff
+  // color: mat.get-color-from-palette($my-grey, '300-contrast')
+  // background: mat.get-color-from-palette($my-grey, 300)
+
+.red100, .is-printed
+  // background-color: #ffcdd2
+  // color: #000000
+  // color: mat.get-color-from-palette($my-grey, '300-contrast')
+  // background: mat.get-color-from-palette($my-grey, 300)
+
+.deep-purple-50
+  background-color: #ede7f6
+  color: #000000
+  // color: mat.get-color-from-palette($my-grey, '300-contrast')
+  // background: mat.get-color-from-palette($my-grey, 300)
+
+.deep-purple-100
+  background-color: #d1c4e9
+  color: #000000
+  // color: mat.get-color-from-palette($my-grey, '300-contrast')
+  // background: mat.get-color-from-palette($my-grey, 300)
+
+.deep-purple-200
+  background-color: #b39ddb
+  color: #000000
+  // color: mat.get-color-from-palette($my-grey, '300-contrast')
+  // background: mat.get-color-from-palette($my-grey, 300)
+
+.yellow300, .hh-new
+  background-color: #fff176
+  // color: mat.get-color-from-palette($my-grey, '300-contrast')
+  // background: mat.get-color-from-palette($my-grey, 300)
+
+.hh-printed
+  background-color: #f7ca18
+  // color: mat.get-color-from-palette($my-grey, '300-contrast')
+  // background: mat.get-color-from-palette($my-grey, 300)
+
+// https://github.com/btxtiger/mat-icon-button-sizes
+$button-size: 32px
+$icon-size: 19px
+
+.small-icon-button
+  width: $button-size !important
+  height: $button-size !important
+  padding: 0px !important
+  display: inline-flex !important
+  align-items: center
+  justify-content: center
+  font-size: $icon-size !important
+
+  & > *[role=img]
+    width: $icon-size
+    height: $icon-size
+    font-size: $icon-size
+
+    svg
+      width: $icon-size
+      height: $icon-size
+
+  .mat-mdc-button-touch-target
+    width: $button-size !important
+    height: $button-size !important
diff --git a/bookie/src/app/sales/bills/bills.component.ts b/bookie/src/app/sales/bills/bills.component.ts
index 0265124..0a9b87f 100644
--- a/bookie/src/app/sales/bills/bills.component.ts
+++ b/bookie/src/app/sales/bills/bills.component.ts
@@ -27,7 +27,7 @@ import { VoucherType } from './voucher-type';
 @Component({
   selector: 'app-bills',
   templateUrl: './bills.component.html',
-  styleUrls: ['./bills.component.css'],
+  styleUrls: ['./bills.component.sass'],
 })
 export class BillsComponent implements OnInit {
   dataSource: BillsDataSource = new BillsDataSource(this.bs.dataObs);
@@ -196,10 +196,6 @@ export class BillsComponent implements OnInit {
     this.bs.subtractOne(item, canEdit);
   }
 
-  removeItem(item: BillViewItem): void {
-    this.bs.removeItem(item);
-  }
-
   modifier(item: BillViewItem): void {
     this.bs.modifier(item);
   }
diff --git a/bookie/src/app/sales/home/sales-home.component.css b/bookie/src/app/sales/home/sales-home.component.css
index b5bd378..e69de29 100644
--- a/bookie/src/app/sales/home/sales-home.component.css
+++ b/bookie/src/app/sales/home/sales-home.component.css
@@ -1,29 +0,0 @@
-.square-button {
-  min-width: 150px;
-  max-width: 150px;
-  min-height: 150px;
-  max-height: 150px;
-  cursor: pointer;
-  margin: 20px;
-}
-.item-name {
-  text-align: center;
-  padding: 0.5rem;
-}
-
-.center {
-  text-align: center;
-}
-
-.warn {
-  background-color: red;
-}
-
-.disabled {
-  background-color: #dddddd;
-}
-
-.face {
-  background-color: #3f51b5;
-  color: #ffffff;
-}
diff --git a/bookie/src/app/sales/home/sales-home.component.html b/bookie/src/app/sales/home/sales-home.component.html
index f26d2f4..846c02b 100644
--- a/bookie/src/app/sales/home/sales-home.component.html
+++ b/bookie/src/app/sales/home/sales-home.component.html
@@ -1,76 +1,76 @@
 <div class="flex flex-row flex-wrap -mr-5 -mb-5">
   <mat-card
-    class="face flex flex-col square-button mr-5, mb-5"
+    class="primary flex flex-col square-button mr-5, mb-5"
     matRipple
     [routerLink]="['menu-categories']"
     queryParamsHandling="preserve"
   >
-    <h3 class="item-name">Add Product</h3>
+    <h3>Add Product</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
     matRipple
     (click)="discount()"
     [class.disabled]="!discountAllowed()"
-    [class.face]="discountAllowed()"
+    [class.primary]="discountAllowed()"
   >
-    <h3 class="item-name">Discount</h3>
+    <h3>Discount</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
     matRipple
     (click)="printKot()"
     [class.disabled]="!printKotAllowed()"
-    [class.face]="printKotAllowed()"
+    [class.primary]="printKotAllowed()"
   >
-    <h3 class="item-name">Print KOT</h3>
+    <h3>Print KOT</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
     matRipple
     (click)="printBill()"
     [class.disabled]="!printBillAllowed()"
-    [class.face]="printBillAllowed()"
+    [class.primary]="printBillAllowed()"
   >
-    <h3 class="item-name">Print Bill</h3>
+    <h3>Print Bill</h3>
   </mat-card>
   <mat-card class="flex flex-col square-button mr-5, mb-5 warn" matRipple [routerLink]="['/', 'sales', 'tables']">
-    <h3 class="item-name">Back to Tables</h3>
+    <h3>Back to Tables</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
     matRipple
     (click)="receivePayment()"
     [class.disabled]="!receivePaymentAllowed()"
-    [class.face]="receivePaymentAllowed()"
+    [class.primary]="receivePaymentAllowed()"
   >
-    <h3 class="item-name">Receive Payment</h3>
+    <h3>Receive Payment</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
     matRipple
     (click)="moveTable()"
     [class.disabled]="!moveTableAllowed()"
-    [class.face]="moveTableAllowed()"
+    [class.primary]="moveTableAllowed()"
   >
-    <h3 class="item-name">Move Table</h3>
+    <h3>Move Table</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
     matRipple
     (click)="cancelBill()"
     [class.disabled]="!cancelBillAllowed()"
-    [class.face]="cancelBillAllowed()"
+    [class.primary]="cancelBillAllowed()"
   >
-    <h3 class="item-name">Cancel Bill</h3>
+    <h3>Cancel Bill</h3>
   </mat-card>
   <mat-card
     class="flex flex-col square-button mr-5, mb-5"
     matRipple
     (click)="splitBill()"
     [class.disabled]="!splitBillAllowed()"
-    [class.face]="splitBillAllowed()"
+    [class.primary]="splitBillAllowed()"
   >
-    <h3 class="item-name">Split Bill</h3>
+    <h3>Split Bill</h3>
   </mat-card>
 </div>
diff --git a/bookie/src/app/sales/menu-categories/menu-categories.component.css b/bookie/src/app/sales/menu-categories/menu-categories.component.css
deleted file mode 100644
index e9cf3c0..0000000
--- a/bookie/src/app/sales/menu-categories/menu-categories.component.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.square-button {
-  min-width: 150px;
-  max-width: 150px;
-  min-height: 150px;
-  max-height: 150px;
-  cursor: pointer;
-  margin: 20px;
-}
-.item-name {
-  text-align: center;
-  padding: 0.5rem;
-}
-
-.center {
-  text-align: center;
-}
-
-.warn {
-  background-color: red;
-}
-
-.face {
-  background-color: #3f51b5;
-  color: #ffffff;
-}
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 65b7f62..7d3c7c7 100644
--- a/bookie/src/app/sales/menu-categories/menu-categories.component.html
+++ b/bookie/src/app/sales/menu-categories/menu-categories.component.html
@@ -7,16 +7,16 @@
         [routerLink]="['../']"
         queryParamsHandling="preserve"
       >
-        <h3 class="item-name">Back</h3>
+        <h3>Back</h3>
       </mat-card>
       <mat-card
-        class="face flex flex-col square-button mr-5, mb-5"
+        class="primary flex flex-col square-button mr-5, mb-5"
         matRipple
         *ngFor="let item of list"
         [routerLink]="['../products', item.id]"
         queryParamsHandling="preserve"
       >
-        <h3 class="item-name">{{ item.name }}</h3>
+        <h3>{{ item.name }}</h3>
       </mat-card>
     </div>
   </mat-card-content>
diff --git a/bookie/src/app/sales/menu-categories/menu-categories.component.sass b/bookie/src/app/sales/menu-categories/menu-categories.component.sass
new file mode 100644
index 0000000..e69de29
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 32ed99d..52de69c 100644
--- a/bookie/src/app/sales/menu-categories/menu-categories.component.ts
+++ b/bookie/src/app/sales/menu-categories/menu-categories.component.ts
@@ -6,7 +6,7 @@ import { MenuCategory } from '../../core/menu-category';
 @Component({
   selector: 'app-menu-category',
   templateUrl: './menu-categories.component.html',
-  styleUrls: ['./menu-categories.component.css'],
+  styleUrls: ['./menu-categories.component.sass'],
 })
 export class MenuCategoriesComponent implements OnInit {
   list: MenuCategory[] = [];
diff --git a/bookie/src/app/sales/modifiers/modifiers.component.css b/bookie/src/app/sales/modifiers/modifiers.component.css
index 0a3d256..e69de29 100644
--- a/bookie/src/app/sales/modifiers/modifiers.component.css
+++ b/bookie/src/app/sales/modifiers/modifiers.component.css
@@ -1,11 +0,0 @@
-.square-button {
-  min-width: 150px;
-  max-width: 150px;
-  min-height: 150px;
-  cursor: pointer;
-  margin: 20px;
-}
-
-.selected {
-  background-color: #dddddd;
-}
diff --git a/bookie/src/app/sales/modifiers/modifiers.component.html b/bookie/src/app/sales/modifiers/modifiers.component.html
index 8c40253..1f9e28d 100644
--- a/bookie/src/app/sales/modifiers/modifiers.component.html
+++ b/bookie/src/app/sales/modifiers/modifiers.component.html
@@ -14,9 +14,10 @@
           matRipple
           *ngFor="let m of item.modifiers"
           (click)="select(m)"
-          [class.selected]="selectedIds.indexOf(m.id) !== -1"
+          [class.primary]="selectedIds.indexOf(m.id) === -1"
+          [class.strong-primary]="selectedIds.indexOf(m.id) !== -1"
         >
-          <h3 class="item-name">{{ m.name }}</h3>
+          <h3>{{ m.name }}</h3>
         </mat-card>
       </div>
     </mat-tab>
diff --git a/bookie/src/app/sales/products/products.component.css b/bookie/src/app/sales/products/products.component.css
index c8af81a..e69de29 100644
--- a/bookie/src/app/sales/products/products.component.css
+++ b/bookie/src/app/sales/products/products.component.css
@@ -1,35 +0,0 @@
-.square-button {
-  min-width: 150px;
-  max-width: 150px;
-  min-height: 150px;
-  max-height: 150px;
-  cursor: pointer;
-  margin: 20px;
-}
-.item-name {
-  text-align: center;
-  padding: 0.5rem;
-}
-
-.center {
-  text-align: center;
-}
-
-.yellow300 {
-  background-color: #fff176;
-}
-
-.red700 {
-  background-color: #d32f2f;
-  color: #ffffff;
-}
-
-.grey800 {
-  background-color: #424242;
-  color: #ffffff;
-}
-
-.face {
-  background-color: #3f51b5;
-  color: #ffffff;
-}
diff --git a/bookie/src/app/sales/products/products.component.html b/bookie/src/app/sales/products/products.component.html
index edc2eb2..3e32aea 100644
--- a/bookie/src/app/sales/products/products.component.html
+++ b/bookie/src/app/sales/products/products.component.html
@@ -2,26 +2,24 @@
   <mat-card-content>
     <div class="flex flex-row flex-wrap -mr-5 -mb-5">
       <mat-card
-        class="flex flex-col square-button mr-5, mb-5 red700"
+        class="flex flex-col square-button mr-5, mb-5 warn"
         matRipple
         [routerLink]="['../../menu-categories']"
         queryParamsHandling="preserve"
       >
-        <h3 class="item-name">Back</h3>
+        <h3>Back</h3>
       </mat-card>
       <mat-card
         class="flex flex-col square-button mr-5, mb-5"
         matRipple
         *ngFor="let item of list"
         (click)="addProduct(item)"
-        [class.yellow300]="item.hasHappyHour"
-        [class.grey800]="item.isNotAvailable"
-        [class.face]="!item.hasHappyHour && !item.isNotAvailable"
+        [class.accent]="item.hasHappyHour"
+        [class.strong-disabled]="item.isNotAvailable"
+        [class.primary]="!item.hasHappyHour && !item.isNotAvailable"
       >
-        <h3 class="item-name">{{ item.name }}</h3>
-        <mat-card-subtitle class="center" [class.face]="!item.hasHappyHour && !item.isNotAvailable">{{
-          item.price | currency : 'INR'
-        }}</mat-card-subtitle>
+        <h3>{{ item.name }}</h3>
+        <span>{{ item.price | currency : 'INR' }}</span>
       </mat-card>
     </div>
   </mat-card-content>
diff --git a/bookie/src/app/sales/running-tables/running-tables.component.css b/bookie/src/app/sales/running-tables/running-tables.component.css
deleted file mode 100644
index b93ca5f..0000000
--- a/bookie/src/app/sales/running-tables/running-tables.component.css
+++ /dev/null
@@ -1,39 +0,0 @@
-.face {
-  background-color: #3f51b5;
-  color: #ffffff;
-}
-.running {
-  background-color: #f53d24;
-  color: #000000;
-}
-
-.printed {
-  background-color: #00f518;
-  color: #000000;
-}
-
-.open-bill {
-  background-color: #8e44ad;
-  color: #000000;
-}
-
-.bold {
-  font-weight: bold;
-}
-
-.square-button {
-  min-width: 150px;
-  max-width: 150px;
-  min-height: 150px;
-  max-height: 150px;
-  cursor: pointer;
-  margin: 20px;
-}
-.item-name {
-  text-align: center;
-  padding: 0.5rem;
-}
-
-.center {
-  text-align: center;
-}
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 1746035..1ee4df0 100644
--- a/bookie/src/app/sales/running-tables/running-tables.component.html
+++ b/bookie/src/app/sales/running-tables/running-tables.component.html
@@ -9,18 +9,18 @@
         matRipple
         *ngFor="let table of list"
         (click)="navigateToBill(table)"
-        [class.face]="table.status !== 'running' && table.status !== 'printed'"
-        [class.running]="table.status === 'running'"
-        [class.printed]="table.status === 'printed'"
+        [class.primary]="table.status !== 'running' && table.status !== 'printed'"
+        [class.accent]="table.status === 'running'"
+        [class.strong-accent]="table.status === 'printed'"
       >
-        <h3 class="item-name">{{ table.name }}</h3>
-        <mat-card-subtitle class="center" [class.bold]="table.bold">{{ table.guest }}</mat-card-subtitle>
-        <span class="center">{{ table.pax ?? '-' }} / {{ table.seats }} / {{ table.section?.name }}</span>
-        <span class="center" *ngIf="table.date">{{ table.date }}</span>
-        <span class="center" *ngIf="table.amount">{{ table.amount | currency : 'INR' }}</span>
+        <h3>{{ table.name }}</h3>
+        <span>{{ table.guest }}</span>
+        <span>{{ table.pax ?? '-' }} / {{ table.seats }} / {{ table.section?.name }}</span>
+        <span *ngIf="table.date">{{ table.date }}</span>
+        <span *ngIf="table.amount">{{ table.amount | currency : 'INR' }}</span>
       </mat-card>
-      <mat-card class="flex flex-col square-button mr-5, mb-5 open-bill" matRipple (click)="openBill()">
-        <h3 class="item-name">Open Bill</h3>
+      <mat-card class="flex flex-col square-button mr-5, mb-5 strong-primary" matRipple (click)="openBill()">
+        <h3>Open Bill</h3>
       </mat-card>
     </div>
   </mat-card-content>
diff --git a/bookie/src/app/sales/running-tables/running-tables.component.sass b/bookie/src/app/sales/running-tables/running-tables.component.sass
new file mode 100644
index 0000000..e69de29
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 aaef1f1..98b2796 100644
--- a/bookie/src/app/sales/running-tables/running-tables.component.ts
+++ b/bookie/src/app/sales/running-tables/running-tables.component.ts
@@ -11,7 +11,7 @@ import { BillNumberComponent } from '../bill-number/bill-number.component';
 @Component({
   selector: 'app-running-tables',
   templateUrl: './running-tables.component.html',
-  styleUrls: ['./running-tables.component.css'],
+  styleUrls: ['./running-tables.component.sass'],
 })
 export class RunningTablesComponent implements OnInit {
   regimes: Regime[] = [];
diff --git a/bookie/src/app/sales/tables-dialog/tables-dialog.component.css b/bookie/src/app/sales/tables-dialog/tables-dialog.component.css
deleted file mode 100644
index 6ecd4b1..0000000
--- a/bookie/src/app/sales/tables-dialog/tables-dialog.component.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.running {
-  background-color: #f53d24;
-  color: #000000;
-}
-
-.printed {
-  background-color: #00f518;
-  color: #000000;
-}
-
-.square-button {
-  min-width: 150px;
-  max-width: 150px;
-  min-height: 150px;
-  max-height: 150px;
-  cursor: pointer;
-  margin: 20px;
-}
-.item-name {
-  text-align: center;
-  padding: 0.5rem;
-}
-
-.center {
-  text-align: center;
-}
-
-.selected {
-  background-color: #dddddd;
-}
diff --git a/bookie/src/app/sales/tables-dialog/tables-dialog.component.html b/bookie/src/app/sales/tables-dialog/tables-dialog.component.html
index bd1dae1..7cb7a39 100644
--- a/bookie/src/app/sales/tables-dialog/tables-dialog.component.html
+++ b/bookie/src/app/sales/tables-dialog/tables-dialog.component.html
@@ -6,15 +6,15 @@
       matRipple
       *ngFor="let table of list"
       (click)="select(table)"
-      [class.running]="table.status === 'running'"
-      [class.printed]="table.status === 'printed'"
-      [class.selected]="table === selected"
+      [class.primary]="table.status === 'running'"
+      [class.accent]="table.status === 'printed'"
+      [class.strong-accent]="table === selected"
     >
-      <h3 class="item-name">{{ table.name }}</h3>
-      <mat-card-subtitle class="center">{{ table.guest }}</mat-card-subtitle>
-      <span class="center">{{ table.pax ?? 0 }} / {{ table.seats }} Seats</span>
-      <span class="center" *ngIf="table.date">{{ table.date }}</span>
-      <span class="center" *ngIf="table.amount">{{ table.amount | currency : 'INR' }}</span>
+      <h3>{{ table.name }}</h3>
+      <span>{{ table.guest }}</span>
+      <span>{{ table.pax ?? 0 }} / {{ table.seats }} Seats</span>
+      <span *ngIf="table.date">{{ table.date }}</span>
+      <span *ngIf="table.amount">{{ table.amount | currency : 'INR' }}</span>
     </mat-card>
   </div>
 </mat-dialog-content>
diff --git a/bookie/src/app/sales/tables-dialog/tables-dialog.component.sass b/bookie/src/app/sales/tables-dialog/tables-dialog.component.sass
new file mode 100644
index 0000000..e69de29
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 7ebeae5..2b660fa 100644
--- a/bookie/src/app/sales/tables-dialog/tables-dialog.component.ts
+++ b/bookie/src/app/sales/tables-dialog/tables-dialog.component.ts
@@ -7,7 +7,7 @@ import { Table } from '../../core/table';
 @Component({
   selector: 'app-tables-dialog',
   templateUrl: './tables-dialog.component.html',
-  styleUrls: ['./tables-dialog.component.css'],
+  styleUrls: ['./tables-dialog.component.sass'],
 })
 export class TablesDialogComponent {
   list: Table[] = [];
diff --git a/bookie/src/app/settings/settings.component.css b/bookie/src/app/settings/settings.component.css
index 8b6ef6f..2c44832 100644
--- a/bookie/src/app/settings/settings.component.css
+++ b/bookie/src/app/settings/settings.component.css
@@ -11,11 +11,6 @@
   background: #f8d7da;
 }
 
-.center {
-  display: flex;
-  justify-content: center;
-}
-
 .img-container {
   position: relative;
 }
diff --git a/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.css b/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.css
index 39833dc..cf0b2c1 100644
--- a/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.css
+++ b/bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.css
@@ -3,10 +3,6 @@
   justify-content: flex-end;
 }
 
-.center {
-  text-align: center;
-}
-
 .material-icons {
   vertical-align: middle;
 }
diff --git a/bookie/src/index.html b/bookie/src/index.html
index 8bf642f..72c9d1d 100644
--- a/bookie/src/index.html
+++ b/bookie/src/index.html
@@ -7,8 +7,8 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
   </head>
   <body>
diff --git a/bookie/src/main.ts b/bookie/src/main.ts
index 0a62114..17a5cd4 100644
--- a/bookie/src/main.ts
+++ b/bookie/src/main.ts
@@ -2,5 +2,6 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));
diff --git a/bookie/src/styles.sass b/bookie/src/styles.sass
index 60d2254..a9ff186 100644
--- a/bookie/src/styles.sass
+++ b/bookie/src/styles.sass
@@ -1,12 +1,82 @@
 /* You can add global styles to this file, and also import other style files */
+@use 'sass:map'
+@use '@angular/material' as mat
 @tailwind base
 @tailwind components
 @tailwind utilities
 
+@include mat.core()
+
 html,
 body
-	height: 100%
-	overscroll-behavior-y: contain
+  height: 100%
+  overscroll-behavior-y: contain
 a
-	color: rgb(0, 0, 238)
-	text-decoration: underline
+  color: rgb(0, 0, 238)
+  text-decoration: underline
+
+
+$my-primary: mat.define-palette(mat.$indigo-palette, 500)
+$my-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400)
+/* The "warn" palette is optional and defaults to red if not specified.*/
+$my-warn: mat.define-palette(mat.$red-palette)
+$my-disabled: mat.define-palette(mat.$grey-palette, 500)
+
+.square-button
+  min-width: 150px
+  max-width: 150px
+  min-height: 150px
+  max-height: 150px
+  cursor: pointer
+  margin: 20px
+  h3
+    text-align: center
+    padding: 0.5rem
+  span
+    text-align: center
+
+.center
+  text-align: center
+
+.warn
+  background-color: red
+
+.square-button.primary
+  /* Read the 500 hue from the primary color palete.*/
+  color: mat.get-color-from-palette($my-primary, '200-contrast')
+  background: mat.get-color-from-palette($my-primary, 200)
+
+.square-button.strong-primary
+  /* Read the 500 hue from the primary color palete.*/
+  color: mat.get-color-from-palette($my-primary, '700-contrast')
+  background: mat.get-color-from-palette($my-primary, 700)
+
+.square-button.accent
+  /* Read the 500 hue from the primary color palete.*/
+  color: mat.get-color-from-palette($my-accent, '200-contrast')
+  background: mat.get-color-from-palette($my-accent, 200)
+
+.square-button.strong-accent
+  /* Read the 500 hue from the primary color palete.*/
+  color: mat.get-color-from-palette($my-accent, '700-contrast')
+  background: mat.get-color-from-palette($my-accent, 700)
+
+.square-button.warn
+  /* Read the 500 hue from the primary color palete.*/
+  color: mat.get-color-from-palette($my-warn, '700-contrast')
+  background: mat.get-color-from-palette($my-warn, 700)
+
+.square-button.strong-warn
+  /* Read the 500 hue from the primary color palete.*/
+  color: mat.get-color-from-palette($my-warn, '700-contrast')
+  background: mat.get-color-from-palette($my-warn, 700)
+
+.square-button.disabled
+  /* Read the 500 hue from the primary color palete.*/
+  color: mat.get-color-from-palette($my-disabled, '500-contrast')
+  background: mat.get-color-from-palette($my-disabled, 500)
+
+.square-button.strong-disabled
+  /* Read the 500 hue from the primary color palete.*/
+  color: mat.get-color-from-palette($my-disabled, '800-contrast')
+  background: mat.get-color-from-palette($my-disabled, 800)