Index: trip-planner-front/src/app/homepage/register/register.component.html
===================================================================
--- trip-planner-front/src/app/homepage/register/register.component.html	(revision 84d0fbb56bfbe319ba63e3327f1777ac5d841f83)
+++ trip-planner-front/src/app/homepage/register/register.component.html	(revision bdd64917749115bbdd228a9569a675d590c112e3)
@@ -1,36 +1,43 @@
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
-    <div class="p-grid p-fluid">
-        <div class="p-col-12 p-md-4">
-            <div class="p-inputgroup">
-                <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
-                <input type="text" pInputText placeholder="Full name" [(ngModel)]="user.fullName" name="fullName"
-            >         
-            </div>
+<div class="p-grid p-fluid">
+    <div class="p-col-12 p-md-4">
+        <div class="p-inputgroup">
+            <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
+            <input type="text" pInputText placeholder="Full name" [(ngModel)]="user.fullName" name="fullName"
+                class="form-control">
+
         </div>
-    
-        <div class="p-col-12 p-md-4">
-            <div class="p-inputgroup">
-                <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
-                <input type="text" pInputText placeholder="Email address (Username)" [(ngModel)]="user.username" name="username"
-              >         
-            </div>
+    </div>
+
+    <div class="p-col-12 p-md-4">
+        <div class="p-inputgroup">
+            <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
+            <input type="text" pInputText placeholder="Email address (Username)" [(ngModel)]="user.username"
+                name="username">
         </div>
-        <div class="p-col-12 p-md-4">
-            <div class="p-inputgroup">
-                <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
-                <input type="password" pInputText placeholder="Password" [(ngModel)]="user.password" name="password"
-                >         
-            </div>
+    </div>
+
+    <div class="p-col-12 p-md-4">
+        <div class="p-inputgroup">
+            <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
+            <input type="password" pInputText placeholder="Password" [(ngModel)]="user.password" name="password">
         </div>
-        <div class="p-col-12 p-md-4">
-            <div class="p-inputgroup">
-                <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
-                <input type="password" pInputText placeholder="Repeat password" [(ngModel)]="user.confirmPassword" name="confirmPassword"
-                >         
-            </div>
+    </div>
+
+    <div class="p-col-12 p-md-4">
+        <div class="p-inputgroup">
+            <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>
+            <input type="password" pInputText placeholder="Repeat password" [(ngModel)]="user.confirmPassword"
+                name="confirmPassword">
         </div>
-    
-        <div class="p-col-12 p-md-4">
-            <button pButton pRipple label="Submit" class="p-button-secondary" type="submit" (click)="onFormSubmitSignUp(user)"></button>
-        </div>
-    </div>  
+    </div>
+
+    <div class="p-col-12 p-md-4">
+        <button pButton pRipple label="Submit" class="p-button-secondary" type="button"
+            (click)="onFormSubmitSignUp(user)"></button>
+    </div>
+</div>
+
+
Index: trip-planner-front/src/app/homepage/register/register.component.ts
===================================================================
--- trip-planner-front/src/app/homepage/register/register.component.ts	(revision 84d0fbb56bfbe319ba63e3327f1777ac5d841f83)
+++ trip-planner-front/src/app/homepage/register/register.component.ts	(revision bdd64917749115bbdd228a9569a675d590c112e3)
@@ -1,3 +1,4 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { DynamicDialogRef } from 'primeng/dynamicdialog';
 import { UserDto } from 'src/app/_models/dto/userDto';
@@ -10,16 +11,28 @@
 export class RegisterComponent implements OnInit {
 
-  user : UserDto;
+  user: UserDto;
+  myForm: FormGroup;
 
-  constructor(private ref: DynamicDialogRef) {
+  constructor(private ref: DynamicDialogRef, private fb: FormBuilder) {
     this.user = new UserDto();
-   }
+    this.myForm = fb.group({
+      title: fb.control('initial value', Validators.required)
+    });
+  }
 
   ngOnInit(): void {
+    this.myForm = this.fb.group({
+      fullName: this.fb.control('', Validators.required),
+      username: this.fb.control('', Validators.required),
+      password: this.fb.control('', Validators.required),
+      confirmPassword: this.fb.control('', Validators.required)
+    });
   }
-  
-  onFormSubmitSignUp(user){
+
+  onFormSubmitSignUp(user) {
     this.ref.close(user);
     //window.location.reload();
+
   }
+
 }
