diff --git a/frontend/src/app/account/_validators/invalid-password.validator.ts b/frontend/src/app/account/_validators/invalid-password.validator.ts
index dc2a686f6a..a18d7d9cb4 100644
--- a/frontend/src/app/account/_validators/invalid-password.validator.ts
+++ b/frontend/src/app/account/_validators/invalid-password.validator.ts
@@ -6,7 +6,8 @@ export const PASSWORD_INVALID = 'passwordInvalid';
 
 export function invalidPasswordValidator(): ValidatorFn {
     return (control: AbstractControl): ValidationErrors | null => {
-        const weak = !PASSWORD_REGEX.test(control.value);
+        const password = control.value;
+        const weak = password && !PASSWORD_REGEX.test(password);
         return weak ? { [PASSWORD_INVALID]: true } : null;
     };
 }
diff --git a/frontend/src/app/account/_validators/lowercase-password.ts b/frontend/src/app/account/_validators/lowercase-password.ts
new file mode 100644
index 0000000000..a515546898
--- /dev/null
+++ b/frontend/src/app/account/_validators/lowercase-password.ts
@@ -0,0 +1,12 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+export const LOWERCASE_PASSWORD_REGEX = /^(?=.*[a-z])/;
+
+export const PASSWORD_LOWERCASE = 'passwordLowercase';
+
+export function lowercasePasswordValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+        const missingLowercase = !LOWERCASE_PASSWORD_REGEX.test(control.value);
+        return missingLowercase ? { [PASSWORD_LOWERCASE]: true } : null;
+    };
+}
diff --git a/frontend/src/app/account/_validators/numeric-password.ts b/frontend/src/app/account/_validators/numeric-password.ts
new file mode 100644
index 0000000000..8e4b338af9
--- /dev/null
+++ b/frontend/src/app/account/_validators/numeric-password.ts
@@ -0,0 +1,12 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+export const NUMERIC_PASSWORD_REGEX = /^(?=.*[0-9])/;
+
+export const PASSWORD_NUMERIC = 'passwordNumeric';
+
+export function numericPasswordValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+        const missingNumeric = !NUMERIC_PASSWORD_REGEX.test(control.value);
+        return missingNumeric ? { [PASSWORD_NUMERIC]: true } : null;
+    };
+}
diff --git a/frontend/src/app/account/_validators/short-password.ts b/frontend/src/app/account/_validators/short-password.ts
new file mode 100644
index 0000000000..015817837d
--- /dev/null
+++ b/frontend/src/app/account/_validators/short-password.ts
@@ -0,0 +1,12 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+export const SHORT_PASSWORD_REGEX = /^(?=.{8,})/;
+
+export const PASSWORD_SHORT = 'passwordShort';
+
+export function shortPasswordValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+        const short = !SHORT_PASSWORD_REGEX.test(control.value);
+        return short ? { [PASSWORD_SHORT]: true } : null;
+    };
+}
diff --git a/frontend/src/app/account/_validators/special-password.ts b/frontend/src/app/account/_validators/special-password.ts
new file mode 100644
index 0000000000..e79fc6200a
--- /dev/null
+++ b/frontend/src/app/account/_validators/special-password.ts
@@ -0,0 +1,12 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+export const SPECIAL_PASSWORD_REGEX = /^(?=.*[!"#$%&'()*+,-.:;<=>?@\\/\\[\]^_`{|}~])/;
+
+export const PASSWORD_SPECIAL = 'passwordSpecial';
+
+export function specialPasswordValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+        const missingSpecial = !SPECIAL_PASSWORD_REGEX.test(control.value);
+        return missingSpecial ? { [PASSWORD_SPECIAL]: true } : null;
+    };
+}
diff --git a/frontend/src/app/account/_validators/uppercase-password.ts b/frontend/src/app/account/_validators/uppercase-password.ts
new file mode 100644
index 0000000000..f80a38a004
--- /dev/null
+++ b/frontend/src/app/account/_validators/uppercase-password.ts
@@ -0,0 +1,12 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+export const UPPERCASE_PASSWORD_REGEX = /^(?=.*[A-Z])/;
+
+export const PASSWORD_UPPERCASE = 'passwordUppercase';
+
+export function uppercasePasswordValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+        const missingUppercase = !UPPERCASE_PASSWORD_REGEX.test(control.value);
+        return missingUppercase ? { [PASSWORD_UPPERCASE]: true } : null;
+    };
+}
diff --git a/frontend/src/app/account/_validators/weak-password.validator.ts b/frontend/src/app/account/_validators/weak-password.validator.ts
index 8b5fd0847b..712f538131 100644
--- a/frontend/src/app/account/_validators/weak-password.validator.ts
+++ b/frontend/src/app/account/_validators/weak-password.validator.ts
@@ -1,13 +1,21 @@
 import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
-
-export const STRONG_PASSWORD_REGEX =
-    /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})(?=.*[!"#$%&'()*+,-.:;<=>?@\\/\\[\]^_`{|}~])/;
+import { LOWERCASE_PASSWORD_REGEX } from './lowercase-password';
+import { UPPERCASE_PASSWORD_REGEX } from './uppercase-password';
+import { NUMERIC_PASSWORD_REGEX } from './numeric-password';
+import { SPECIAL_PASSWORD_REGEX } from './special-password';
+import { SHORT_PASSWORD_REGEX } from './short-password';
 
 export const PASSWORD_WEAK = 'passwordWeak';
 
 export function weakPasswordValidator(): ValidatorFn {
     return (control: AbstractControl): ValidationErrors | null => {
-        const weak = !STRONG_PASSWORD_REGEX.test(control.value);
+        const weak = !(
+            LOWERCASE_PASSWORD_REGEX.test(control.value) &&
+            UPPERCASE_PASSWORD_REGEX.test(control.value) &&
+            NUMERIC_PASSWORD_REGEX.test(control.value) &&
+            SPECIAL_PASSWORD_REGEX.test(control.value) &&
+            SHORT_PASSWORD_REGEX.test(control.value)
+        );
         return weak ? { [PASSWORD_WEAK]: true } : null;
     };
 }
diff --git a/frontend/src/app/account/account.component.css b/frontend/src/app/account/account.component.css
index 516b236f7b..fd7126aadc 100644
--- a/frontend/src/app/account/account.component.css
+++ b/frontend/src/app/account/account.component.css
@@ -1,3 +1,13 @@
+.layout-container {
+    display: flex;
+    flex-direction: column;
+    min-height: calc(100vh - 80px); 
+    width: 100%;
+    justify-content: center; 
+    align-items: center; 
+    padding: 1rem;
+}
+
 .container {
     padding: 2rem;
     background-color: var(--surface-section);
diff --git a/frontend/src/app/account/layout.component.html b/frontend/src/app/account/layout.component.html
index 0036e0a2f0..0fb48cd93b 100644
--- a/frontend/src/app/account/layout.component.html
+++ b/frontend/src/app/account/layout.component.html
@@ -1,4 +1,3 @@
-<div class="flex flex-column h-full w-full justify-content-center align-items-center p-2" style="margin-top: -80px">
-    <h2 class="mb-2">Welcome to PeerPrep</h2>
+<div class="layout-container">
     <router-outlet></router-outlet>
 </div>
diff --git a/frontend/src/app/account/layout.component.ts b/frontend/src/app/account/layout.component.ts
index 2cf4d587d8..43b661ab19 100644
--- a/frontend/src/app/account/layout.component.ts
+++ b/frontend/src/app/account/layout.component.ts
@@ -5,6 +5,7 @@ import { Router, RouterModule } from '@angular/router';
     standalone: true,
     imports: [RouterModule],
     templateUrl: './layout.component.html',
+    styleUrl: './account.component.css',
 })
 export class LayoutComponent {
     constructor(private router: Router) {}
diff --git a/frontend/src/app/account/login.component.html b/frontend/src/app/account/login.component.html
index d65adba792..0c38961a7d 100644
--- a/frontend/src/app/account/login.component.html
+++ b/frontend/src/app/account/login.component.html
@@ -3,12 +3,18 @@ <h2 class="mt-0 align-self-start">Log In</h2>
 
     <form #loginForm="ngForm" (ngSubmit)="onSubmit()" class="form-container">
         <div class="form-field">
-            <label for="username">Username</label>
+            <div class="flex flex-row align-items-center gap-2">
+                <i class="pi pi-user"></i>
+                <label for="username">Username</label>
+            </div>
             <input pInputText required type="text" id="username" name="username" [(ngModel)]="userForm.username" />
         </div>
 
         <div class="form-field">
-            <label for="password">Password</label>
+            <div class="flex flex-row align-items-center gap-2">
+                <i class="pi pi-lock"></i>
+                <label for="password">Password</label>
+            </div>
             <p-password
                 required
                 inputId="password"
diff --git a/frontend/src/app/account/register.component.html b/frontend/src/app/account/register.component.html
index bac0c2e62b..34e5bac98c 100644
--- a/frontend/src/app/account/register.component.html
+++ b/frontend/src/app/account/register.component.html
@@ -3,7 +3,10 @@ <h2 class="mt-0 align-self-start">Register</h2>
 
     <form [formGroup]="userForm" (ngSubmit)="onSubmit()" class="form-container">
         <div class="form-field">
-            <label for="username">Username</label>
+            <div class="flex flex-row align-items-center gap-2">
+                <i class="pi pi-user"></i>
+                <label for="username">Username</label>
+            </div>
             <input id="username" type="text" formControlName="username" pInputText />
             @if (isUsernameInvalid) {
                 <small class="text-red-300">
@@ -12,42 +15,64 @@ <h2 class="mt-0 align-self-start">Register</h2>
             }
         </div>
         <div class="form-field">
-            <label for="email">Email</label>
+            <div class="flex flex-row align-items-center gap-2">
+                <i class="pi pi-envelope"></i>
+                <label for="email">Email</label>
+            </div>
             <input id="email" type="email" formControlName="email" pInputText />
             @if (isEmailInvalid) {
                 <small class="text-red-300">The provided email is invalid</small>
             }
         </div>
         <div class="form-field">
-            <label for="password">Password</label>
+            <div class="flex flex-row align-items-center gap-2">
+                <i class="pi pi-lock"></i>
+                <label for="password">Password</label>
+            </div>
             <p-password
-                id="password"
+                inputId="password"
+                name="password"
                 class="p-fluid"
                 formControlName="password"
-                [strongRegex]="strongPasswordRegex"
-                [toggleMask]="true">
-                <ng-template pTemplate="footer">
-                    <p-divider />
-                    <p class="mt-1 text-sm">Your password must contain:</p>
-                    <ul class="pl-2 ml-2 mt-0 text-sm line-height-3">
-                        <li>At least one lowercase</li>
-                        <li>At least one uppercase</li>
-                        <li>At least one numeric</li>
-                        <li>At least one special character</li>
-                        <li>Minimum 8 characters</li>
-                    </ul>
-                </ng-template>
+                [toggleMask]="true"
+                [feedback]="false">
             </p-password>
-            @if (isPasswordWeak) {
-                <small class="text-red-300">The provided password is too weak</small>
-            } @else if (isPasswordInvalid) {
+
+            @if (isPasswordInvalid) {
                 <small class="text-red-300">The provided password contains invalid characters</small>
             }
+
+            @if (isPasswordControlDirty) {
+                <ul class="pl-0 m-0 text-sm line-height-3">
+                    @if (isPasswordWeak) {
+                        @for (req of passwordRequirements; track $index) {
+                            <li class="flex gap-2 align-items-center">
+                                <i
+                                    class="pi text-sm"
+                                    [ngClass]="req.check() ? 'pi-times text-gray-300' : 'pi-check text-green-300'"></i>
+                                <p class="m-0" [ngClass]="req.check() ? 'text-gray-300' : 'text-green-300'">
+                                    {{ req.msg }}
+                                </p>
+                            </li>
+                        }
+                    } @else if (isPasswordStrong) {
+                        <li class="flex gap-2 align-items-center">
+                            <i class="pi pi-check text-sm text-green-300"></i>
+                            <p class="m-0 text-sm text-green-300">Your password is strong enough!</p>
+                        </li>
+                    }
+                </ul>
+            }
         </div>
+
         <div class="form-field">
-            <label for="confirmPassword">Confirm Password</label>
+            <div class="flex flex-row align-items-center gap-2">
+                <i class="pi pi-check-square"></i>
+                <label for="confirmPassword">Confirm Password</label>
+            </div>
             <p-password
-                id="confirmPassword"
+                inputId="confirmPassword"
+                name="confirmPassword"
                 class="p-fluid"
                 formControlName="confirmPassword"
                 [toggleMask]="true"
diff --git a/frontend/src/app/account/register.component.ts b/frontend/src/app/account/register.component.ts
index 908716bbe0..3324e4957e 100644
--- a/frontend/src/app/account/register.component.ts
+++ b/frontend/src/app/account/register.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { AbstractControl, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RouterLink, Router, ActivatedRoute } from '@angular/router';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import { InputTextModule } from 'primeng/inputtext';
@@ -8,7 +9,12 @@ import { ButtonModule } from 'primeng/button';
 import { DividerModule } from 'primeng/divider';
 import { ToastModule } from 'primeng/toast';
 import { MessageService } from 'primeng/api';
-import { PASSWORD_WEAK, STRONG_PASSWORD_REGEX, weakPasswordValidator } from './_validators/weak-password.validator';
+import { PASSWORD_LOWERCASE, lowercasePasswordValidator } from './_validators/lowercase-password';
+import { PASSWORD_UPPERCASE, uppercasePasswordValidator } from './_validators/uppercase-password';
+import { PASSWORD_NUMERIC, numericPasswordValidator } from './_validators/numeric-password';
+import { PASSWORD_SPECIAL, specialPasswordValidator } from './_validators/special-password';
+import { PASSWORD_SHORT, shortPasswordValidator } from './_validators/short-password';
+import { PASSWORD_WEAK, weakPasswordValidator } from './_validators/weak-password.validator';
 import { mismatchPasswordValidator, PASSWORD_MISMATCH } from './_validators/mismatch-password.validator';
 import { invalidUsernameValidator, USERNAME_INVALID } from './_validators/invalid-username.validator';
 import { invalidPasswordValidator, PASSWORD_INVALID } from './_validators/invalid-password.validator';
@@ -18,6 +24,7 @@ import { AuthenticationService } from '../../_services/authentication.service';
     selector: 'app-register',
     standalone: true,
     imports: [
+        CommonModule,
         RouterLink,
         FormsModule,
         InputTextModule,
@@ -49,16 +56,32 @@ export class RegisterComponent {
         {
             username: new FormControl('', [Validators.required, invalidUsernameValidator()]),
             email: new FormControl('', [Validators.required, Validators.email]),
-            password: new FormControl('', [Validators.required, weakPasswordValidator(), invalidPasswordValidator()]),
+            password: new FormControl('', [
+                Validators.required,
+                invalidPasswordValidator(),
+                lowercasePasswordValidator(),
+                uppercasePasswordValidator(),
+                numericPasswordValidator(),
+                specialPasswordValidator(),
+                shortPasswordValidator(),
+                weakPasswordValidator(),
+            ]),
             confirmPassword: new FormControl('', [Validators.required]),
         },
         {
             validators: mismatchPasswordValidator('password', 'confirmPassword'),
         },
     );
-    isProcessingRegistration = false;
 
-    strongPasswordRegex = STRONG_PASSWORD_REGEX.source;
+    passwordRequirements = [
+        { msg: 'At least one lowercase', check: () => this.passwordHasNoLowercase },
+        { msg: 'At least one uppercase', check: () => this.passwordHasNoUppercase },
+        { msg: 'At least one numeric', check: () => this.passwordHasNoNumeric },
+        { msg: 'At least one special character', check: () => this.passwordHasNoSpecial },
+        { msg: 'Minimum 8 characters', check: () => this.isPasswordShort },
+    ];
+
+    isProcessingRegistration = false;
 
     get isUsernameInvalid(): boolean {
         const usernameControl = this.userForm.controls['username'];
@@ -70,20 +93,49 @@ export class RegisterComponent {
         return emailControl.dirty && emailControl.invalid;
     }
 
+    get passwordControl(): AbstractControl {
+        return this.userForm.controls['password'];
+    }
+
+    get isPasswordControlDirty(): boolean {
+        return this.passwordControl.dirty;
+    }
+
+    get passwordHasNoLowercase(): boolean {
+        return this.passwordControl.pristine || this.passwordControl.hasError(PASSWORD_LOWERCASE);
+    }
+
+    get passwordHasNoUppercase(): boolean {
+        return this.passwordControl.pristine || this.passwordControl.hasError(PASSWORD_UPPERCASE);
+    }
+
+    get passwordHasNoNumeric(): boolean {
+        return this.passwordControl.pristine || this.passwordControl.hasError(PASSWORD_NUMERIC);
+    }
+
+    get passwordHasNoSpecial(): boolean {
+        return this.passwordControl.pristine || this.passwordControl.hasError(PASSWORD_SPECIAL);
+    }
+
+    get isPasswordShort(): boolean {
+        return this.passwordControl.pristine || this.passwordControl.hasError(PASSWORD_SHORT);
+    }
+
     get isPasswordWeak(): boolean {
-        const passwordControl = this.userForm.controls['password'];
-        return passwordControl.dirty && passwordControl.hasError(PASSWORD_WEAK);
+        return this.passwordControl.dirty && this.passwordControl.hasError(PASSWORD_WEAK);
+    }
+
+    get isPasswordStrong(): boolean {
+        return this.passwordControl.dirty && !this.passwordControl.hasError(PASSWORD_WEAK);
     }
 
     get isPasswordInvalid(): boolean {
-        const passwordControl = this.userForm.controls['password'];
-        return passwordControl.dirty && passwordControl.hasError(PASSWORD_INVALID);
+        return this.passwordControl.dirty && this.passwordControl.hasError(PASSWORD_INVALID);
     }
 
     get hasPasswordMismatch(): boolean {
-        const passwordControl = this.userForm.controls['password'];
         const confirmPasswordControl = this.userForm.controls['confirmPassword'];
-        return passwordControl.valid && confirmPasswordControl.dirty && this.userForm.hasError(PASSWORD_MISMATCH);
+        return this.passwordControl.valid && confirmPasswordControl.dirty && this.userForm.hasError(PASSWORD_MISMATCH);
     }
 
     showError() {
@@ -113,7 +165,11 @@ export class RegisterComponent {
                         } else if (status === 500) {
                             errorMessage = 'Database Server Error';
                         }
-                        this.messageService.add({ severity: 'error', summary: 'Log In Error', detail: errorMessage });
+                        this.messageService.add({
+                            severity: 'error',
+                            summary: 'Registration Error',
+                            detail: errorMessage,
+                        });
                     },
                 });
         } else {
diff --git a/frontend/src/app/app.component.css b/frontend/src/app/app.component.css
index 4df7a9e503..4ccc1a23d3 100644
--- a/frontend/src/app/app.component.css
+++ b/frontend/src/app/app.component.css
@@ -1,21 +1,4 @@
 main {
   width: 100%;
   min-height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1rem;
-  box-sizing: inherit;
-  position: relative;
-  flex-direction: column;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  width: auto;
-  margin-bottom: 1rem;
-  padding: 2rem;
-  background-color: var(--surface-section);
-  border-radius: 0.75rem;
 }
\ No newline at end of file
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 7088928e9a..a20a5cb8af 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -1,3 +1,4 @@
-<app-navigation-bar />
-
-<router-outlet />
+<main>
+    <app-navigation-bar />
+    <router-outlet />
+</main>
diff --git a/frontend/src/app/matching/finding-match/finding-match.component.html b/frontend/src/app/matching/finding-match/finding-match.component.html
index 574fd45191..273ac368b1 100644
--- a/frontend/src/app/matching/finding-match/finding-match.component.html
+++ b/frontend/src/app/matching/finding-match/finding-match.component.html
@@ -55,7 +55,10 @@ <h2 class="mt-0 mb-0">Match Found!</h2>
                     [outlined]="true"
                     (click)="closeDialog()" />
             } @else {
-                <p class="mb-0 font-medium text-blue-300">Redirecting you to the workspace...</p>
+                <div class="flex flex-column w-full align-items-center justify-content-center gap-2">
+                    <p-progressSpinner styleClass="w-2rem h-2rem mt-2" strokeWidth="6" />
+                    <p class="mb-0 mt-0 font-medium text-blue-300">Redirecting you to the workspace...</p>
+                </div>
             }
         </div>
     </ng-template>
diff --git a/frontend/src/app/navigation-bar/navigation-bar.component.html b/frontend/src/app/navigation-bar/navigation-bar.component.html
index d5a8a174a2..9261df7948 100644
--- a/frontend/src/app/navigation-bar/navigation-bar.component.html
+++ b/frontend/src/app/navigation-bar/navigation-bar.component.html
@@ -7,7 +7,7 @@
     </ng-template>
     <ng-template pTemplate="end">
         @if (user) {
-            <p-menu #menu [model]="items" [popup]="true"></p-menu>
+            <p-menu #menu [model]="items" [popup]="true" appendTo="body"></p-menu>
             <p-button
                 [label]="user.username"
                 (onClick)="menu.toggle($event)"
diff --git a/frontend/src/app/navigation-bar/navigation-bar.component.ts b/frontend/src/app/navigation-bar/navigation-bar.component.ts
index 9b3a18ee6e..ba9a58a137 100644
--- a/frontend/src/app/navigation-bar/navigation-bar.component.ts
+++ b/frontend/src/app/navigation-bar/navigation-bar.component.ts
@@ -1,10 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, HostListener, Renderer2 } from '@angular/core';
 import { MenuItem } from 'primeng/api';
 import { CommonModule, NgFor } from '@angular/common';
 import { MenubarModule } from 'primeng/menubar';
 import { AuthenticationService } from '../../_services/authentication.service';
 import { User } from '../../_models/user.model';
-import { MenuModule } from 'primeng/menu';
+import { Menu, MenuModule } from 'primeng/menu';
 import { ButtonModule } from 'primeng/button';
 
 @Component({
@@ -15,10 +15,14 @@ import { ButtonModule } from 'primeng/button';
     styleUrl: './navigation-bar.component.css',
 })
 export class NavigationBarComponent implements OnInit {
+    @ViewChild('menu') menu!: Menu;
     items: MenuItem[] | undefined;
     user: User | null = null;
 
-    constructor(private authService: AuthenticationService) {}
+    constructor(
+        private authService: AuthenticationService,
+        private renderer: Renderer2,
+    ) {}
 
     ngOnInit() {
         this.setMenuItems();
@@ -28,6 +32,15 @@ export class NavigationBarComponent implements OnInit {
         });
     }
 
+    @HostListener('window:scroll', [])
+    hideMenuOnScroll() {
+        if (this.menu && this.menu.overlayVisible) {
+            this.menu.hide();
+            // This makes hiding instant
+            this.renderer.setStyle(this.menu.container, 'display', 'none');
+        }
+    }
+
     setMenuItems() {
         if (this.authService.isLoggedIn) {
             this.items = [