removed unwanted select inputs, changed the registeration form inputs to two per column, changed the registeration confimation messages and font size, opacity.

src/app/register-business/register-business.component.html

@@ -10,39 +10,25 @@
             <input type="text" placeholder="Enter your business name" [(ngModel)]="nameToCheck">
             <button (click)="checkName()" [disabled]="!nameToCheck"> Check </button>
         </section>
-        
-        <p class="description">
-            This is the full name for a business entity that I wish to reserve, including any required prefixes and suffixes. I understand that this has to be nationally unique, and am not violating any copyrights or trademarks.
-        </p>
-    
+                
         <section class="form-message" [ngClass]="{'error' : error.isInvalid || !error.isUnique}" *ngIf="error">
             <h5 *ngIf="error.isInvalid || !error.isUnique"> Sorry! </h5>
             <h5 *ngIf="!error.isInvalid && error.isUnique"> Yay! </h5>
             <p> {{ error.message }} </p>
         </section>
+
+        <p class="description" *ngIf="error && !error.isInvalid && error.isUnique">
+            <input type="checkbox" id="confirm-init-register" [(ngModel)]="agreeToReserve">
+            <label for="confirm-init-register">
+                I agree that I am reserving a name for my business entity, and am legally authorized to do so according to both national and local laws. I understand that the government will look through my financial records and will consent to the same.
+            </label>
+        </p>
     
         <button class="proceed-button" *ngIf="error && !error.isInvalid"
-        (click)="confirmName()">
+        (click)="confirmName()" [disabled]="error && !error.isInvalid && !agreeToReserve">
             {{ !error?.isUnique ? 'Appeal for name' : 'Proceed' }}
         </button>
-    </ng-container>
-
-    <section class="confirmation-box" *ngIf="formState === 'CONFIRM_INIT'">
-        <h5> {{ nameToCheck }} </h5>
-        <p class="description">
-            <input type="checkbox" [(ngModel)]="agreeToReserve">
-            I agree that I am reserving a name for my business entity, and am legally authorized to do so according to both national and local laws. I understand that the government will look through my financial records and will consent to the same.
-        </p>
-
-        <div class="form-action-buttons">
-            <button (click)="formState = 'INIT_REGISTER'">
-                Back
-            </button>
-            <button [disabled]="!agreeToReserve" [ngClass]="{'disabled': !agreeToReserve}" (click)="formState = 'REGISTER_FORM'">
-                Proceed
-            </button>
-        </div>
-    </section>
+    </ng-container>    
 </div>
 
 
@@ -71,7 +57,7 @@
     </section>
     
     <div class="form-action-buttons">
-        <button (click)="formState = 'CONFIRM_INIT'">
+        <button (click)="formState = 'INIT_REGISTER'">
             Back
         </button>
         <button (click)="formState = 'SELECT_PLAN'">
@@ -82,7 +68,7 @@
 
 <div class="plan-list-container" *ngIf="formState === 'SELECT_PLAN'">
     <h5>
-        Your business name application for <br> <strong> {{ nameToCheck }} </strong> is successfully approved!
+        Choose a plan for <strong> {{ nameToCheck }} </strong>
     </h5>
     <ul class="plan-list">
         <li *ngFor="let plan of plans">
@@ -106,7 +92,7 @@
         <p class="description">
             {{ isAppealing ? 
                 'Please stand by while the Authority Officer contacts you with the results of your appeal' : 
-                'Congratulations! Your name has been reserved for ' + selectedPlan.range + ' time. Please proceed with further setup of your business entity' }}
+                'Congratulations! Your name has been submitted for reservation under "' + selectedPlan.range + ' Plan". Please proceed with further setup of your business entity' }}
         </p>
     </section>
 </div>

src/app/register-business/register-business.component.scss

@@ -48,14 +48,25 @@
     
     .description {
         width: 75%;
-        margin: 0 auto;
+        margin: 4rem auto 3rem;
         text-align: left;
-        font-size: 1.2rem;
+        font-size: 1.4rem;
+        opacity: 0.9;
         color: var(--dark-grey);
-        opacity: 0.6;
         letter-spacing: 0.5px;
         line-height: 1.4;
         font-weight: 300;
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+
+        label {
+            cursor: pointer;
+        }
+
+        input {
+            margin: 5px 10px;
+        }
     }
 
     .form-message {
@@ -92,28 +103,10 @@
         letter-spacing: 0.5px;
         border-radius: 4rem;
         height: 5rem;
-    }
 
-
-    .confirmation-box {
-        h5 {
-            font-size: 1.8rem;
-            color: var(--dark-grey);
-            filter: brightness(80%);
-            font-weight: 500;
-            margin: 4rem 0 2rem;
-        }
-        
-        .description {
-            width: 50%;
-            display: flex;
-            align-items: flex-start;
-            justify-content: flex-start;
-            margin-bottom: 4rem;
-
-            input {
-                margin: 5px 10px;
-            }
+        &:disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
         }
     }
 }
@@ -152,7 +145,7 @@
 
 .form {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
     padding: 4rem;
 
     .input-holder {
@@ -185,6 +178,7 @@
             font-size: 1.5rem;
             letter-spacing: 0.5px;
             color: var(--dark-grey);
+            background-color: white;
         }
 
         select {
@@ -221,7 +215,7 @@
         align-items: flex-start;
         justify-content: center;
         list-style: none;
-        margin-bottom: 30px;
+        margin-bottom: 4rem;
 
         li {
             border: 1px solid var(--border-grey);
@@ -275,7 +269,7 @@
 
     .confirmation-box {
         h6 {
-            font-size: 1.8rem;
+            font-size: 2rem;
             color: var(--dark-grey);
             filter: brightness(80%);
             font-weight: 500;
@@ -285,9 +279,9 @@
         .description {
             width: 40%;
             margin: 0 auto 2rem;
-            font-size: 1.2rem;
+            font-size: 1.6rem;
             color: var(--dark-grey);
-            opacity: 0.6;
+            opacity: 0.9;
             letter-spacing: 0.5px;
             line-height: 1.4;
             font-weight: 300;

src/app/register-business/register-business.component.ts

@@ -12,7 +12,7 @@ interface Plan {
     styleUrls: ['./register-business.component.scss']
 })
 export class RegisterBusinessComponent implements OnInit {
-    formState: 'CHECK_NAME' | 'INIT_REGISTER' | 'CONFIRM_INIT' | 'REGISTER_FORM' | 'SELECT_PLAN' | 'COMPLETE_PURCHASE' | undefined = 'CHECK_NAME';
+    formState: 'CHECK_NAME' | 'INIT_REGISTER' | 'REGISTER_FORM' | 'SELECT_PLAN' | 'COMPLETE_PURCHASE' | undefined = 'CHECK_NAME';
     nameToCheck: string = 'JK Enterprises ACRA Ltd';
     isAppealing: boolean = false;
     agreeToReserve: boolean = false;
@@ -24,15 +24,15 @@ export class RegisterBusinessComponent implements OnInit {
 
     plans: Array<Plan> = [{
         name: 'Basic',
-        amount: 2000,
+        amount: 15,
         range: 'One Year'
     }, {
         name: 'Popular',
-        amount: 5000,
+        amount: 20,
         range: 'Three Years'
     }, {
         name: 'Premium',
-        amount: 9000,
+        amount: 25,
         range: 'Five Years'
     }];
 
@@ -51,36 +51,37 @@ export class RegisterBusinessComponent implements OnInit {
         placeholder?: string,
         options?: Array<string>
     }> = [{
+        name: 'Entity Type',
+        type: 'select',
+        options: ['BUSINESS', 'LOCAL COMPANY', 
+        'LIMITED LIABILITY PARTNERSHIP', 'FOREIGN COMPANY', 
+        'LIMITED PARTNERSHIP', 'PUBLIC ACCOUNTING FIRM']
+    }, {
         name: 'Date of Incorporation',
         type: 'date'
-    }, {
-        name: 'Company Status',
-        type: 'select',
-        options: ['Status 1', 'Status 2']
     }, {
         name: 'Company Category',
         type: 'select',
-        options: ['Category 1', 'Category 2']
+        options: ['PUBLIC COMPANY LIMITED BY SHARES', 
+        'PUBLIC COMPANY LIMITED BY GUARANTEE', 
+        'PRIVATE COMPANY LIMITED BY SHARES', 
+        'EXEMPT PRIVATE COMPANY LIMITED BY SHARES']
     }, {
-        name: 'Company Sub-Category',
+        name: 'Company Suffix',
         type: 'select',
-        options: ['Sub-Category 1', 'Sub-Category 2']
-    }, {
-        name: 'Company Class',
-        type: 'select',
-        options: ['Class 1', 'Class 2']
+        options: ['LLC', 'LTD', 'PVT LTD', 'INC']
     }, {
         name: 'Registrar Office City',
         type: 'select',
-        options: ['Class 1', 'Class 2']
+        options: ['CITY 1', 'CITY 2']
     }, {
         name: 'Registered Office',
         type: 'select',
-        options: ['Office 1', 'Office 2']
+        options: ['OFFICE 1', 'OFFICE 2']
     }, {
-        name: 'Capita Investment',
-        type: 'number',
-        placeholder: 'Enter here in Singapore Dollar'
+        name: 'Drop the Suffice "Limited" or "Berhad" from ' + this.nameToCheck,
+        type: 'select',
+        options: ['YES', 'NO']
     }];
 
     constructor() { }
@@ -92,7 +93,7 @@ export class RegisterBusinessComponent implements OnInit {
         if (!this.error?.isUnique) {
             this.isAppealing = true;
         }
-        this.formState = 'CONFIRM_INIT';
+        this.formState = 'REGISTER_FORM';
     }
 
     goBackToFormDetails() {

src/app/tabs/tabs.component.scss

@@ -28,6 +28,11 @@ $header-height: 10rem;
             letter-spacing: 0.5px;
             color: var(--dark-grey);
 
+            &.active {
+                text-decoration: underline;
+                color: var(--highlight);
+            }
+
             &:hover {
                 text-decoration: underline;
             }

src/app/tabs/tabs.component.ts

@@ -1,15 +1,16 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-tabs',
-  templateUrl: './tabs.component.html',
-  styleUrls: ['./tabs.component.scss']
+    selector: 'app-tabs',
+    templateUrl: './tabs.component.html',
+    styleUrls: ['./tabs.component.scss']
 })
 export class TabsComponent implements OnInit {
+    
+    constructor() {
+    }
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+    ngOnInit(): void {
+    }
 
 }