diff --git a/npm/ng-packs/packages/account/src/lib/components/register/register.component.html b/npm/ng-packs/packages/account/src/lib/components/register/register.component.html
index 097af3ad0d..b834d9c6c4 100644
--- a/npm/ng-packs/packages/account/src/lib/components/register/register.component.html
+++ b/npm/ng-packs/packages/account/src/lib/components/register/register.component.html
@@ -3,22 +3,28 @@
     <abp-tenant-box></abp-tenant-box>
 
     <div class="abp-account-container">
-      <h2>Register</h2>
+      <h2>{{ 'AbpAccount::Register' | abpLocalization }}</h2>
       <form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
         <div class="form-group">
-          <label for="input-user-name">User name</label><span> * </span
+          <label for="input-user-name">{{ 'AbpAccount::UserName' | abpLocalization }}</label
+          ><span> * </span
           ><input autofocus type="text" id="input-user-name" class="form-control" formControlName="username" />
         </div>
         <div class="form-group">
-          <label for="input-email-address">Email address</label><span> * </span
-          ><input type="email" id="input-email-address" class="form-control" formControlName="email" />
+          <label for="input-email-address">{{ 'AbpAccount::EmailAddress' | abpLocalization }}</label
+          ><span> * </span><input type="email" id="input-email-address" class="form-control" formControlName="email" />
         </div>
         <div class="form-group">
-          <label for="input-password">Password</label><span> * </span
-          ><input type="password" id="input-password" class="form-control" formControlName="password" />
+          <label for="input-password">{{ 'AbpAccount::Password' | abpLocalization }}</label
+          ><span> * </span><input type="password" id="input-password" class="form-control" formControlName="password" />
         </div>
-        <button type="submit" class="btn btn-primary">Register</button>
+        <button [disabled]="inProgress" type="submit" name="Action" value="Register" class="btn btn-primary">
+          {{ 'AbpAccount::Register' | abpLocalization }}
+        </button>
       </form>
+      <div style="padding-top: 20px">
+        <a routerLink="/account/login">{{ 'AbpAccount::Login' | abpLocalization }}</a>
+      </div>
     </div>
   </div>
 </div>
diff --git a/npm/ng-packs/packages/account/src/lib/components/register/register.component.ts b/npm/ng-packs/packages/account/src/lib/components/register/register.component.ts
index 01e6eb59bd..ee0cdf6635 100644
--- a/npm/ng-packs/packages/account/src/lib/components/register/register.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/register/register.component.ts
@@ -1,8 +1,12 @@
+import { ToasterService } from '@abp/ng.theme.shared';
 import { Component } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
 import { validatePassword } from '@ngx-validate/core';
-import { OAuthService } from 'angular-oauth2-oidc';
+import { throwError } from 'rxjs';
+import { catchError, finalize, take } from 'rxjs/operators';
+import snq from 'snq';
+import { RegisterRequest } from '../../models';
+import { AccountService } from '../../services/account.service';
 
 const { maxLength, minLength, required, email } = Validators;
 
@@ -13,7 +17,9 @@ const { maxLength, minLength, required, email } = Validators;
 export class RegisterComponent {
   form: FormGroup;
 
-  constructor(private fb: FormBuilder, private oauthService: OAuthService, private router: Router) {
+  inProgress: boolean;
+
+  constructor(private fb: FormBuilder, private accountService: AccountService, private toasterService: ToasterService) {
     this.form = this.fb.group({
       username: ['', [required, maxLength(255)]],
       password: [
@@ -26,5 +32,26 @@ export class RegisterComponent {
 
   onSubmit() {
     if (this.form.invalid) return;
+
+    this.inProgress = true;
+
+    const newUser = {
+      userName: this.form.get('username').value,
+      password: this.form.get('password').value,
+      emailAddress: this.form.get('email').value,
+      appName: 'angular',
+    } as RegisterRequest;
+
+    this.accountService
+      .register(newUser)
+      .pipe(
+        take(1),
+        catchError(err => {
+          this.toasterService.error(snq(() => err.error.error_description, 'An error occured.'), 'Error');
+          return throwError(err);
+        }),
+        finalize(() => (this.inProgress = false)),
+      )
+      .subscribe();
   }
 }
diff --git a/npm/ng-packs/packages/account/src/lib/models/user.ts b/npm/ng-packs/packages/account/src/lib/models/user.ts
new file mode 100644
index 0000000000..89e307ddc5
--- /dev/null
+++ b/npm/ng-packs/packages/account/src/lib/models/user.ts
@@ -0,0 +1,29 @@
+export interface RegisterRequest {
+  userName: string;
+  emailAddress: string;
+  password: string;
+  appName?: string;
+}
+
+export interface RegisterResponse {
+  tenantId: string;
+  userName: string;
+  name: string;
+  surname: string;
+  email: string;
+  emailConfirmed: boolean;
+  phoneNumber: string;
+  phoneNumberConfirmed: boolean;
+  twoFactorEnabled: boolean;
+  lockoutEnabled: boolean;
+  lockoutEnd: string;
+  concurrencyStamp: string;
+  isDeleted: boolean;
+  deleterId: string;
+  deletionTime: string;
+  lastModificationTime: string;
+  lastModifierId: string;
+  creationTime: string;
+  creatorId: string;
+  id: string;
+}