diff --git a/src/app/pages/register-business/register-business.component.html b/src/app/pages/register-business/register-business.component.html
index c5385a1..6b210b2 100644
--- a/src/app/pages/register-business/register-business.component.html
+++ b/src/app/pages/register-business/register-business.component.html
@@ -77,7 +77,7 @@
         <button class="common-button neutral" (click)="formState = 'INIT_REGISTER'">
             Back
         </button>
-        <button class="common-button" (click)="formState = 'SELECT_PLAN'">
+        <button class="common-button" (click)="registerName()">
             Proceed
         </button>
     </div>
@@ -150,7 +150,7 @@
             <button class="common-button outline" (click)="print()">
                 Print
             </button>
-            <button class="common-button" (click)="formState = 'RECEIPT'">
+            <button class="common-button" (click)="goToReceipt()">
                 View Receipt
             </button>
         </div>     
diff --git a/src/app/pages/register-business/register-business.component.ts b/src/app/pages/register-business/register-business.component.ts
index 9d153be..5662c41 100644
--- a/src/app/pages/register-business/register-business.component.ts
+++ b/src/app/pages/register-business/register-business.component.ts
@@ -1,6 +1,18 @@
 import { Component, OnInit } from '@angular/core';
 import { RegisterBusinessNameService } from 'src/app/services/register-business-name.service';
 
+export interface AcknowledgementRow {
+    name: string,
+    value: string | number,
+    amount?: number,
+    highlight?: boolean,
+};
+
+export interface ReceiptRow {
+    name: string,
+    value: string | number,
+};
+
 @Component({
     selector: 'app-register-business',
     templateUrl: './register-business.component.html',
@@ -48,62 +60,9 @@ export class RegisterBusinessComponent implements OnInit {
     dropSuffixOptions = ['YES', 'NO'];
 
 
-    acknowledgementDetails: Array<{
-        name: string,
-        value: string | number,
-        amount?: number,
-        highlight?: boolean,
-    }> = [{
-        name: 'UEM',
-        value: '---'
-    }, {
-        name: 'Entity Name',
-        value: this.nameToCheck
-    }, {
-        name: 'Transaction Number',
-        value: '39047729362923293',
-        highlight: true,
-    }, {
-        name: 'Receipt Number',
-        value: 'ACRA38293',
-        highlight: true
-    }, {
-        name: 'EP Reference No.',
-        value: '20910038829384470'
-    }, {
-        name: 'Payment Date',
-        value: '06/11/2021 11:28:01'
-    }, {
-        name: 'Description',
-        value: 'Application for Business Name',
-        amount: 15
-    }];
-
-    receiptDetails: Array<{
-        name: string,
-        value: string | number,
-    }> = [{
-        name: 'Receipt Number',
-        value: 'ACRA38293',
-    }, {
-        name: 'ARN',
-        value: 'ARN2021110294038',
-    }, {
-        name: 'EP Reference No.',
-        value: '20910038829384470'
-    }, {
-        name: 'Tax ID',
-        value: 'M9-0C038921',
-    }, {
-        name: 'Paid By',
-        value: 'KOH YA TING',
-    }, {
-        name: 'Payment Date',
-        value: '06/11/2021 11:28:01'
-    }, {
-        name: 'Paid Via',
-        value: 'Net Banking',
-    }];
+    acknowledgementDetails: Array<AcknowledgementRow> = [];
+
+    receiptDetails: Array<ReceiptRow> = [];
 
     constructor(private registerBusinessNameService: RegisterBusinessNameService) { }
 
@@ -149,15 +108,21 @@ export class RegisterBusinessComponent implements OnInit {
     payForReservation() {
         this.paymentChild = window.open('/mock', '_blank', 'toolbar=0,status=0,width=626,height=436');
 
-        this.childCheck = window.setInterval(() => {
+        this.childCheck = window.setInterval(async () => {
             if (this.paymentChild && this.paymentChild.closed) {
                 this.formState = 'ACKNOWLEDGEMENT';
                 window.clearInterval(this.childCheck);
                 this.childCheck = undefined;
+                this.acknowledgementDetails = await this.registerBusinessNameService.getAcknowledgement();
             }
         }, 1000);
     }
 
+    async goToReceipt() {
+        this.formState = 'RECEIPT';
+        this.receiptDetails = await this.registerBusinessNameService.getReceipt();
+    }
+
     async checkName() {
         this.formState = 'INIT_REGISTER';
 
@@ -178,6 +143,17 @@ export class RegisterBusinessComponent implements OnInit {
         }
     }
 
+    async registerName() {
+        await this.registerBusinessNameService.registerName(
+            this.nameToCheck,
+            this.selectedEntityType,
+            this.selectedCompanyCategory,
+            this.selectedCompanySuffix,
+            this.selectedDropSuffix,
+        );
+        this.formState = 'SELECT_PLAN';
+    }
+
     print() {
         window.print();
     }
diff --git a/src/app/services/register-business-name.service.ts b/src/app/services/register-business-name.service.ts
index 2ee5e1c..d8464dc 100644
--- a/src/app/services/register-business-name.service.ts
+++ b/src/app/services/register-business-name.service.ts
@@ -2,11 +2,28 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable, throwError } from 'rxjs';
 import { catchError, retry } from 'rxjs/operators';
+import { AcknowledgementRow, ReceiptRow } from '../pages/register-business/register-business.component';
+
+export interface NameCheckRequest {
+    name: string;
+}
 
 export interface NameCheckResponse {
     status: string;
 }
 
+export interface NameRegisterRequest {
+    name: string;
+    entityType: string;
+    companyCategory: string;
+    companySuffix: string;
+    dropSuffix: string;
+}
+
+export interface NameRegisterResponse {
+    status: string;
+}
+
 @Injectable({
   providedIn: 'root'
 })
@@ -17,10 +34,40 @@ export class RegisterBusinessNameService {
     }
 
     checkName(name: string) {
-        const nameRequest = {
+        const nameCheckRequest: NameCheckRequest = {
+            name,
+        };
+
+        return new Promise<NameCheckResponse>((resolve, reject) => resolve({status: 'success'}));
+
+        return this.http.post<NameCheckResponse>('http://localhost:10000/name-check/', nameCheckRequest).toPromise();
+    }
+
+    registerName(
+        name: string,
+        entityType: string,
+        companyCategory: string,
+        companySuffix: string,
+        dropSuffix: string,
+    ) {
+        const nameRegisterRequest: NameRegisterRequest = {
             name,
+            entityType,
+            companyCategory,
+            companySuffix,
+            dropSuffix,
         };
 
-        return this.http.post<NameCheckResponse>('http://localhost:10000/name-check/', nameRequest).toPromise();
+        return new Promise<NameCheckResponse>((resolve, reject) => resolve({status: 'success'}));
+
+        return this.http.post<NameRegisterResponse>('http://localhost:8080/name-register/', nameRegisterRequest).toPromise();
+    }
+
+    getAcknowledgement() {
+        return this.http.get<Array<AcknowledgementRow>>('http://localhost:8080/acknowledgement/').toPromise();
+    }
+
+    getReceipt() {
+        return this.http.get<Array<ReceiptRow>>('http://localhost:8080/receipt/').toPromise();
     }
 }