diff --git a/Q-Wiz_Backened/src/main/java/com/example/entities/Choices.java b/Q-Wiz_Backened/src/main/java/com/example/entities/Choices.java
index 0e7d18c..81fee86 100644
--- a/Q-Wiz_Backened/src/main/java/com/example/entities/Choices.java
+++ b/Q-Wiz_Backened/src/main/java/com/example/entities/Choices.java
@@ -48,4 +48,7 @@ public class Choices {
 	
 	@Column (name = "is_correct ")
 	private String isCorrect;
+
+	@Column (name = "answer")
+	private String answer;
 }
diff --git a/Q-Wiz_Backened/src/main/java/com/example/entities/Question_Details.java b/Q-Wiz_Backened/src/main/java/com/example/entities/Question_Details.java
index eb1e8ac..edbe147 100644
--- a/Q-Wiz_Backened/src/main/java/com/example/entities/Question_Details.java
+++ b/Q-Wiz_Backened/src/main/java/com/example/entities/Question_Details.java
@@ -44,7 +44,10 @@ public class Question_Details {
 	@Column (name = "question")
 	private String question;
 	
-	@Column (name = "type_of_question")
-	private String typeOfQuestion;
+	@Column (name = "question_type1")
+	private String type1;
+
+	@Column (name = "question_type2")
+	private String type2;
 	
 }
diff --git a/q-wiz/src/app/app.module.ts b/q-wiz/src/app/app.module.ts
index e132d9c..a884725 100644
--- a/q-wiz/src/app/app.module.ts
+++ b/q-wiz/src/app/app.module.ts
@@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
 
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { LoginComponent } from './login/login.component';
-import { RegisterComponent } from './register/register.component';
+import { LoginRegisterComponent } from './login-register/login-register.component';
 import { CreateQuizComponent } from './create-quiz/create-quiz.component';
 import { CreateQuestionAnswerComponent } from './create-question-answer/create-question-answer.component';
 import { NavbarComponent } from './navbar/navbar.component';
@@ -17,12 +17,12 @@ import { LeaderboardComponent } from './leaderboard/leaderboard.component';
 import { RouterModule } from '@angular/router';
 import { appRoutes } from 'src/routes';
 import { LogoutComponent } from './logout/logout.component';
+import { ProfileComponent } from './profile/profile.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    LoginComponent,
-    RegisterComponent,
+    LoginRegisterComponent,
     CreateQuizComponent,
     CreateQuestionAnswerComponent,
     NavbarComponent,
@@ -31,12 +31,14 @@ import { LogoutComponent } from './logout/logout.component';
     CreateTagsComponent,
     FilterByTagsComponent,
     LeaderboardComponent,
-    LogoutComponent
+    LogoutComponent,
+    ProfileComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    RouterModule.forRoot(appRoutes)
+    RouterModule.forRoot(appRoutes),
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/q-wiz/src/app/login/login.component.css b/q-wiz/src/app/login-register/login-register.component.css
similarity index 100%
rename from q-wiz/src/app/login/login.component.css
rename to q-wiz/src/app/login-register/login-register.component.css
diff --git a/q-wiz/src/app/login-register/login-register.component.html b/q-wiz/src/app/login-register/login-register.component.html
new file mode 100644
index 0000000..5796a27
--- /dev/null
+++ b/q-wiz/src/app/login-register/login-register.component.html
@@ -0,0 +1,97 @@
+<app-navbar></app-navbar>
+<p>login works!</p>
+
+<!-- This is a login form -->
+<div class="container-fluid" id="loginAccount" *ngIf="toggleOn">
+<form #loginForm="ngForm" class="row g-3">
+    <div class="col-md-3">
+        <label for="inputEmail" class="form-label">Email</label>
+        <input type="email" name="Email" #Email ngModel required [pattern]="emailPattern">
+    </div>
+    <div class="col-md-3">
+      <label for="inputPassword4" class="form-label">Password</label>
+      <input type="password" name="Password" #Password ngModel required>
+    </div>
+    <div class="col-12">
+      <button type="submit" [disabled]="!loginForm.valid" class="btn btn-warning">Log in</button>
+      <p id="p-index">To create an account, <button (click)="toggleOn =!toggleOn" class="btn btn-secondary" id="create-link">click here.</button></p>
+    </div>
+  </form>
+</div>
+
+<!-- This is a register form -->
+  <div class="row" id="createAccount" *ngIf="!toggleOn">
+    <div class="col s6 offset-s3">
+      <div class="card">
+        <div class="card-content">
+          <form #registerForm="ngForm">
+            <div class="row">
+              <div class="input-field col s12">
+                <input type="text" name="First Name" #Name ngModel required>
+                <label>First Name</label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="input-field col s12">
+                <input type="text" name="Last Name" #Name ngModel required>
+                <label>Last Name</label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="input-field col s12">
+                <input type="email" name="Email" #Email ngModel required [pattern]="emailPattern">
+                <label>Email</label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="input-field col s12">
+                <input type="text" name="Username" #Username ngModel required>
+                <label>Username</label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="input-field col s12">
+                <input type="password" name="Password" #Password ngModel required>
+                <label>Password</label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="input-field col s12">
+                <button type="submit" [disabled]="!registerForm.valid" class="btn btn-warning">Register</button>
+                <p id="p-index">If you already have an account, <button (click)="toggleOn =!toggleOn" class="btn btn-secondary"
+                    id="create-link">click here.</button></p>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+<!--
+  
+      <label for="inputEmail" class="form-label">First Name</label>
+      <input type="email" class="form-control" id="inputEmail">
+  </div>
+    <div class="col-md-3">
+      <label for="inputEmail" class="form-label">Last Name</label>
+      <input type="email" class="form-control" id="inputEmail">
+  </div>
+    <div class="col-md-3">
+      <label for="inputEmail" class="form-label">Email</label>
+      <input type="email" class="form-control" id="inputEmail">
+  </div>
+      <div class="col-md-3">
+          <label for="inputEmail" class="form-label">Username</label>
+          <input type="email" class="form-control" id="inputEmail">
+      </div>
+      <div class="col-md-3">
+        <label for="inputPassword4" class="form-label">Password</label>
+        <input type="password" class="form-control" id="inputPassword4">
+      </div>
+      <div class="col-12">
+        <button type="submit" class="btn btn-success">Register</button>
+        <p id="p-index">If you already have an account, <a href="./" id="login-link">click here.</a></p>
+      </div>
+    </form>
+  </div>
+-->
diff --git a/q-wiz/src/app/login/login.component.spec.ts b/q-wiz/src/app/login-register/login-register.component.spec.ts
similarity index 58%
rename from q-wiz/src/app/login/login.component.spec.ts
rename to q-wiz/src/app/login-register/login-register.component.spec.ts
index d2c0e6c..678e392 100644
--- a/q-wiz/src/app/login/login.component.spec.ts
+++ b/q-wiz/src/app/login-register/login-register.component.spec.ts
@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { LoginComponent } from './login.component';
+import { LoginRegisterComponent } from './login-register.component';
 
 describe('LoginComponent', () => {
-  let component: LoginComponent;
-  let fixture: ComponentFixture<LoginComponent>;
+  let component: LoginRegisterComponent;
+  let fixture: ComponentFixture<LoginRegisterComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ LoginComponent ]
+      declarations: [ LoginRegisterComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(LoginComponent);
+    fixture = TestBed.createComponent(LoginRegisterComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
@@ -22,4 +22,5 @@ describe('LoginComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
 });
diff --git a/q-wiz/src/app/login-register/login-register.component.ts b/q-wiz/src/app/login-register/login-register.component.ts
new file mode 100644
index 0000000..2431c32
--- /dev/null
+++ b/q-wiz/src/app/login-register/login-register.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login-register',
+  templateUrl: './login-register.component.html',
+  styleUrls: ['./login-register.component.css']
+})
+export class LoginRegisterComponent implements OnInit {
+
+/*for validation of inputs*/
+  emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$"
+
+  constructor() { }
+/*for hiding/unhiding elements*/
+  toggleOn:boolean = true;
+
+  ngOnInit() {
+this.toggleOn = true;
+
+  }
+
+}
+
+
diff --git a/q-wiz/src/app/login/login.component.html b/q-wiz/src/app/login/login.component.html
deleted file mode 100644
index 48ced63..0000000
--- a/q-wiz/src/app/login/login.component.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<app-navbar></app-navbar>
-<p>login works!</p>
-
-<!-- This is a login form -->
-<div class="container-fluid">
-<form class="row g-3">
-    <div class="col-md-3">
-        <label for="inputEmail" class="form-label">Username</label>
-        <input type="email" class="form-control" id="inputEmail">
-    </div>
-    <div class="col-md-3">
-      <label for="inputPassword4" class="form-label">Password</label>
-      <input type="password" class="form-control" id="inputPassword4">
-    </div>
-    <div class="col-12">
-      <button type="submit" class="btn btn-success">Log in</button>
-    </div>
-  </form>
-</div>
diff --git a/q-wiz/src/app/login/login.component.ts b/q-wiz/src/app/login/login.component.ts
deleted file mode 100644
index 4f58421..0000000
--- a/q-wiz/src/app/login/login.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-login',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.css']
-})
-export class LoginComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
diff --git a/q-wiz/src/app/navbar/navbar.component.html b/q-wiz/src/app/navbar/navbar.component.html
index ce62944..4681ffa 100644
--- a/q-wiz/src/app/navbar/navbar.component.html
+++ b/q-wiz/src/app/navbar/navbar.component.html
@@ -1,9 +1,12 @@
 <p>navbar works!</p>
 <div class="btn-group" role="group" aria-label="Basic mixed styles example">
-    <button type="button" class="btn btn-success">Login/Register</button>
-    <button type="button" class="btn btn-warning">Create A Quiz</button>
-    <button type="button" class="btn btn-warning">Take A Quiz </button>
-    <button type="button" class="btn btn-warning">Leaderboard </button>
-    <button type="button" class="btn btn-danger">Logout</button>
+    <nav>
+        <a routerLink="/login-register"><button type="button" class="btn btn-warning">Login/Register</button></a>
+        <a routerLink="/profile"><button type="button" class="btn btn-primary">My Profile</button></a>
+        <a routerLink="/create-quiz"><button type="button" class="btn btn-primary">Create A Quiz</button></a>
+        <a routerLink="/take-quiz"><button type="button" class="btn btn-primary">Take A Quiz </button></a>
+        <a routerLink="/leaderboard"><button type="button" class="btn btn-primary">Leaderboard </button></a>
+        <a routerLink="/logout"><button type="button" class="btn btn-secondary">Logout</button></a>
+    </nav>
 </div>
 
diff --git a/q-wiz/src/app/register/register.component.css b/q-wiz/src/app/profile/profile.component.css
similarity index 100%
rename from q-wiz/src/app/register/register.component.css
rename to q-wiz/src/app/profile/profile.component.css
diff --git a/q-wiz/src/app/profile/profile.component.html b/q-wiz/src/app/profile/profile.component.html
new file mode 100644
index 0000000..57cf127
--- /dev/null
+++ b/q-wiz/src/app/profile/profile.component.html
@@ -0,0 +1,2 @@
+<app-navbar></app-navbar>
+<p>profile works!</p>
diff --git a/q-wiz/src/app/register/register.component.spec.ts b/q-wiz/src/app/profile/profile.component.spec.ts
similarity index 55%
rename from q-wiz/src/app/register/register.component.spec.ts
rename to q-wiz/src/app/profile/profile.component.spec.ts
index f6db869..e88012e 100644
--- a/q-wiz/src/app/register/register.component.spec.ts
+++ b/q-wiz/src/app/profile/profile.component.spec.ts
@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { RegisterComponent } from './register.component';
+import { ProfileComponent } from './profile.component';
 
-describe('RegisterComponent', () => {
-  let component: RegisterComponent;
-  let fixture: ComponentFixture<RegisterComponent>;
+describe('ProfileComponent', () => {
+  let component: ProfileComponent;
+  let fixture: ComponentFixture<ProfileComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ RegisterComponent ]
+      declarations: [ ProfileComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(RegisterComponent);
+    fixture = TestBed.createComponent(ProfileComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/q-wiz/src/app/profile/profile.component.ts b/q-wiz/src/app/profile/profile.component.ts
new file mode 100644
index 0000000..93040f3
--- /dev/null
+++ b/q-wiz/src/app/profile/profile.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.css']
+})
+export class ProfileComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/q-wiz/src/app/register/register.component.html b/q-wiz/src/app/register/register.component.html
deleted file mode 100644
index 81b417c..0000000
--- a/q-wiz/src/app/register/register.component.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<app-navbar></app-navbar>
-<p>register works!</p>
-<!-- This is a register form -->
-<form class="row g-3">
-    <div class="col-md-3">
-      <label for="inputFirstName" class="form-label">First Name</label>
-      <input type="text" class="form-control" id="inputFirstName">
-    </div>
-    <div class="col-md-3">
-        <label for="inputLastName" class="form-label">Last Name</label>
-        <input type="text" class="form-control" id="inputLastName">
-    </div>
-    <div class="col-md-3">
-        <label for="inputEmail" class="form-label">Email</label>
-        <input type="email" class="form-control" id="inputEmail">
-    </div>
-    <div class="col-md-3">
-        <label for="inputEmail" class="form-label">Username</label>
-        <input type="email" class="form-control" id="inputEmail">
-    </div>
-    <div class="col-md-3">
-      <label for="inputPassword4" class="form-label">Password</label>
-      <input type="password" class="form-control" id="inputPassword4">
-    </div>
-    <div class="col-12">
-      <button type="submit" class="btn btn-success">Register</button>
-    </div>
-  </form>
diff --git a/q-wiz/src/app/register/register.component.ts b/q-wiz/src/app/register/register.component.ts
deleted file mode 100644
index 64cc9bb..0000000
--- a/q-wiz/src/app/register/register.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-register',
-  templateUrl: './register.component.html',
-  styleUrls: ['./register.component.css']
-})
-export class RegisterComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
diff --git a/q-wiz/src/app/take-quiz/take-quiz.component.html b/q-wiz/src/app/take-quiz/take-quiz.component.html
index 65edaea..d139fe4 100644
--- a/q-wiz/src/app/take-quiz/take-quiz.component.html
+++ b/q-wiz/src/app/take-quiz/take-quiz.component.html
@@ -1,2 +1,31 @@
 <app-navbar></app-navbar>
 <p>take-quiz works!</p>
+<!-- This is a card for the question and answers to be on for taking quiz -->
+<div class="row row-cols-1 row-cols-md-2 g-4">
+    <div class="col">
+        <div class="card">
+            <img src="..." class="card-img-top" alt="...">
+            <div class="card-body">
+                <h5 class="card-title">Card title</h5>
+                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
+                    content. This content is a little bit longer.</p>
+            </div>
+        </div>
+    </div>
+
+    <div class="input-group mb-3">
+        <div class="input-group-text">
+            <input class="form-check-input mt-0" type="checkbox" value=""
+                aria-label="Checkbox for following text input">
+        </div>
+        <input type="text" class="form-control" aria-label="Text input with checkbox">
+    </div>
+
+    <div class="input-group">
+        <div class="input-group-text">
+            <input class="form-check-input mt-0" type="radio" value=""
+                aria-label="Radio button for following text input">
+        </div>
+        <input type="text" class="form-control" aria-label="Text input with radio button">
+    </div>
+</div>
\ No newline at end of file
diff --git a/q-wiz/src/routes.ts b/q-wiz/src/routes.ts
index 5436a84..7feb115 100644
--- a/q-wiz/src/routes.ts
+++ b/q-wiz/src/routes.ts
@@ -1,19 +1,20 @@
 import {Routes} from '@angular/router';
-import { RegisterComponent } from './app/register/register.component';
-import { LoginComponent } from './app/login/login.component';
+import { LoginRegisterComponent } from './app/login-register/login-register.component';
 import { CreateQuizComponent } from './app/create-quiz/create-quiz.component';
 import { TakeQuizComponent } from './app/take-quiz/take-quiz.component';
 import { LeaderboardComponent } from './app/leaderboard/leaderboard.component';
+import { LogoutComponent } from './app/logout/logout.component';
+import { ProfileComponent } from './app/profile/profile.component';
 
 
 export const appRoutes : Routes = [
 
-    {path: '', redirectTo: '/login', pathMatch: 'full'},
-    {path: 'login', component: LoginComponent},
-    {path: 'register', component: RegisterComponent},
+    {path: '', redirectTo: '/login-register', pathMatch: 'full'},
+    {path: 'login-register', component: LoginRegisterComponent},
+    {path: 'profile', component: ProfileComponent},
     {path: 'create-quiz', component: CreateQuizComponent},
     {path: 'take-quiz', component:TakeQuizComponent},
     {path: 'leaderboard', component:LeaderboardComponent},
-    {path: 'logout', redirectTo: '', pathMatch: 'full'}
+    {path: 'logout', component:LogoutComponent}
 
 ];
\ No newline at end of file
diff --git a/q-wiz/src/styles.css b/q-wiz/src/styles.css
index 09ae8e2..6b93da0 100644
--- a/q-wiz/src/styles.css
+++ b/q-wiz/src/styles.css
@@ -8,11 +8,18 @@
 
 /* This is adding a linear gradient color (Left to Right) for the background - every page */
 body {
+   
     align-content: center;
 
-    background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c)fixed;
+    background: linear-gradient(0.25turn, rgb(115,165,194), rgb(185,185,186), rgb(253,181,21))fixed;
     height: stretch;
     background-size: cover;
     background-repeat: no-repeat;
     margin: auto;
+
+}
+/* this is for if an input is invalid*/
+input.ng-invalid.ng-dirty{
+    border-bottom-color: red !important;
+    box-shadow: 0 1px 0 0 red !important;
 }