diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css
index df898ba93e7f78efcdfeb35d13896b36b710ee34..ac47402ed38330b853ec19efc81bfb62ca14ba0a 100644
--- a/FullstackProsjekt/src/frontend/src/assets/main.css
+++ b/FullstackProsjekt/src/frontend/src/assets/main.css
@@ -11,7 +11,7 @@ input {
     border: none;
     min-width: 220px;
     background-color: #E5E5E5;
-    margin: 10px;
+    margin-bottom: 10px;
     font-family: monospace;
 }
 input::placeholder {
@@ -72,13 +72,17 @@ label {
     cursor: pointer;
 }
 .delete-btn{
-    padding: 8px;
+    padding: 10px;
     background-color: #cc513b;
     border-color: transparent;
     color: #242F40;
     border-radius: 10px;
     font-family: monospace;
     cursor: pointer;
+    text-decoration: none;
+}
+.delete-btn:hover{
+    background-color: #d9563e;
 
 }
 .add-Btn {
@@ -86,11 +90,10 @@ label {
     color: white;
     font-size: 16px;
     padding: 10px;
-    border-radius: 20px;
+    border-radius: 10px;
     border-color: transparent;
-    margin-top: 10px;
     cursor: pointer;
-
+    text-decoration: none;
 }
 .add-Btn:hover{
     cursor: pointer;
@@ -122,16 +125,17 @@ label {
 .submit-btn{
     background-color: #CCA43B;
     font-size: 20px;
-    padding: 20px;
+    padding: 10px;
     border-radius: 5px;
     border-color: transparent;
     min-width: 160px;
     font-family: monospace;
-    transition: 0.2s;
+    transition: 0.4s;
     cursor: pointer;
 }
 .submit-btn:hover{
     background-color: #a67d0e;
+    color: white;
 }
 .submit-btn:active{
     background-color: #2D333B;
diff --git a/FullstackProsjekt/src/frontend/src/views/NewQuizView.vue b/FullstackProsjekt/src/frontend/src/views/NewQuizView.vue
index 6f60f8f45ff84da03c7dde5c7ad99f85173dcb4c..ae1180c2622618046ed1410fac8571e6fcdc6a3c 100644
--- a/FullstackProsjekt/src/frontend/src/views/NewQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/NewQuizView.vue
@@ -1,5 +1,4 @@
 <script>
-import NewQuestionModel from "@/components/shared/NewQuestionModel.vue";
 import { ref, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import router from "@/router/index.js";
@@ -52,148 +51,73 @@ export default {
     getUser() {
       this.creatorId = getIdByToken();
     }
-
   },
 }
 </script>
 
 <template>
 	<body>
-  <form @submit.prevent="constructQuiz">
-		<div class="newQuizDiv">
-			<router-link to="/overviewQuiz"> <-  </router-link>
-			<h1>New quiz</h1>
-      <div>
-        <h2>Title</h2>
-        <input>
-      </div>
-      <div>
-        <h2>Category</h2>
-        <form>
-          <select v-model="selectedCategory">
-            <option v-for="category in categories" :key="category.id" :value="category.id">{{category.category}}</option>
-          </select>
-        </form>
-      </div>
-      <div>
-        <h2>Difficulty</h2>
-        <form>
-          <select v-model="selectedDifficulty">
-            <option v-for="difficulty in difficulties" :key="difficulty.id" :value="difficulty.id">{{difficulty.difficulty}}</option>
-          </select>
-        </form>
-      </div>
-      <!--
-			<div class="question-table">
-				<table class="table">
-					<thead>
-					<tr>
-						<th scope="col">#</th>
-						<th scope="col">Question</th>
-						<th scope="col">Action</th>
-					</tr>
-					</thead>
-					<tbody>
-					<tr>
-						<th scope="row">1</th>
-						<td>What is Vue?</td>
-						<td>
-							<button class="play-btn">View</button>
-							<button class="edit-btn">Edit</button>
-							<button class="delete-btn"> Delete</button>
-						</td>
-					</tr>
-
-					</tbody>
-				</table>
-				-->
-        <!--
-
-
-				<Teleport to="body">
-					<NewQuestionModel :show="showNewQuestionModal" @close="destroyModal">
-
-						<template #header>
-							<h5> Add New Question</h5>
-						</template>
-
-						<template #body>
-							<form>
-								<div class="mb-3">
-									<label for="question" class="form-label">Question</label> <br>
-									<input type="text" v-model="createdQuestion" class="form-control" id="questionInput">
-								</div>
-								<table class="table">
-									<thead>
-									<tr>
-										<th scope="col">#</th>
-										<th scope="col">Answer</th>
-										<th scope="col">Correct ?</th>
-									</tr>
-									</thead>
-									<tbody>
-									<tr v-for="(answer, index) in newAnswers">
-										<th scope="row">{{answer.id}}</th>
-										<td>
-											<input type="text" v-model="answer.answer" id="questionInput">
-										</td>
-										<td>
-											<input :checked="answer.correct_answer === 1" class="form-check-input" :value="answer.id" @change="handleRadioToggle(answer.id)"  type="radio">
-										</td>
-									</tr>
-									</tbody>
-								</table>
-							</form>
-						</template>
-
-						<template #footer>
-							<button @click="addNewAnswers" class="add-Btn" v-if="newAnswers.length<4" >+</button>
-							<button @click="destroyModal" class="close-btn"> Close</button>
-							<button v-if="newAnswers.length>=2" @click="submitQuestion" class="submit-btn">Submit</button>
-						</template>
-
-					</NewQuestionModel>
-				</Teleport>
-				</div>
-				-->
-      <div class="footer">
-        <router-link to="/overviewQuiz"> Cancel  </router-link>
-        <div class="submit-section">
-          <input id="submit" type="submit"/>
-        </div>
-      </div>
-    </div>
-  </form>
+	<div class="new-quiz-page">
+		  <form @submit.prevent="constructQuiz">
+					<router-link to="/overviewQuiz"> <-  </router-link>
+					<h1>New quiz</h1>
+		      <div>
+		        <h2>Title</h2>
+		        <input>
+		      </div>
+		      <div>
+		        <h2>Category</h2>
+		        <form>
+		          <select v-model="selectedCategory" >
+		            <option v-for="category in categories" :key="category.id" :value="category">{{categories.category}}</option>
+		          </select>
+		        </form>
+		      </div>
+		      <div>
+		        <h2>Difficulty</h2>
+		        <form>
+		          <select v-model="selectedDifficulty">
+		            <option v-for="difficulty in difficulties" :key="difficulty.id" :value="difficulty">{{difficulties.difficulty}}</option>
+		          </select>
+		        </form>
+		      </div>
+
+		      <div class="footer">
+		        <router-link to="/overviewQuiz" class="delete-btn"> Cancel  </router-link>
+			      <button class="submit-btn" type="submit"> Submit</button>
+		      </div>
+		  </form>
+		</div>
 	</body>
 
 </template>
 
 <style>
-.newQuizDiv{
-	padding: 20px;
+.new-quiz-page{
+	margin:20vh;
 }
 
 input{
 	height: 25px;
 	width: 100%;
 }
+select{
+	min-width: 100%;
+	height: 25px;
+	background-color: #E5E5E5;
+	border-color: transparent;
+	border-radius: 5px;
+}
 
-.submit-section {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.footer {
+	margin: 10vh;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
-#submit {
-  min-width: 150px;
-  min-height: 60px;
-  font-size: 24px;
-  border-radius: 6px;
-  background-color: #242F40;
-  color: white;
-  border: none;
-  cursor: pointer;
-  margin-top: 20px;
+.delete-btn {
+	margin-right: 20px;
 }
 
 </style>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
index 015609bef2c36c39405adaa9859f847a7afc5a3c..317cac17951cfe076cfe7871f31ff639c0bf8afa 100644
--- a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
@@ -1,24 +1,96 @@
 <template>
 	<body>
 	<div class="overViewQuestion-page">
+
     <div class="headerDiv">
       <div>
         <router-link to="/dashboard"> <- </router-link>
         <h1>Your quizzes</h1>
         <p>Select a quiz for your creation to either play, edit or delete</p>
       </div>
-      <div>
-        <button class="add-Btn">Create Quiz</button>
-        <router-link to="/createQuiz"> New quiz </router-link>
+	      <router-link to="/createQuiz" class="add-Btn">New quiz</router-link>
       </div>
-    </div>
-
 
 		<div class="row">
       <div class="quiz-div">
         <QuizCard id="quizCard" v-for= "quiz in quizList" :key="quiz.id" :quiz-id="quiz.id" />
       </div>
 		</div>
+
+		<!--
+			<div class="question-table">
+				<table class="table">
+					<thead>
+					<tr>
+						<th scope="col">#</th>
+						<th scope="col">Question</th>
+						<th scope="col">Action</th>
+					</tr>
+					</thead>
+					<tbody>
+					<tr>
+						<th scope="row">1</th>
+						<td>What is Vue?</td>
+						<td>
+							<button class="play-btn">View</button>
+							<button class="edit-btn">Edit</button>
+							<button class="delete-btn"> Delete</button>
+						</td>
+					</tr>
+
+					</tbody>
+				</table>
+
+
+
+		<Teleport to="body">
+			<NewQuestionModel :show="showNewQuestionModal" @close="destroyModal">
+
+				<template #header>
+					<h5> Add New Question</h5>
+				</template>
+
+				<template #body>
+					<form>
+						<div class="mb-3">
+							<label for="question" class="form-label">Question</label> <br>
+							<input type="text" v-model="createdQuestion" class="form-control" id="questionInput">
+						</div>
+						<table class="table">
+							<thead>
+							<tr>
+								<th scope="col">#</th>
+								<th scope="col">Answer</th>
+								<th scope="col">Correct ?</th>
+							</tr>
+							</thead>
+							<tbody>
+							<tr v-for="(answer, index) in newAnswers">
+								<th scope="row">{{answer.id}}</th>
+								<td>
+									<input type="text" v-model="answer.answer" id="questionInput">
+								</td>
+								<td>
+									<input :checked="answer.correct_answer === 1" class="form-check-input" :value="answer.id" @change="handleRadioToggle(answer.id)"  type="radio">
+								</td>
+							</tr>
+							</tbody>
+						</table>
+					</form>
+				</template>
+
+				<template #footer>
+					<button @click="addNewAnswers" class="add-Btn" v-if="newAnswers.length<4" >+</button>
+					<button @click="destroyModal" class="close-btn"> Close</button>
+					<button v-if="newAnswers.length>=2" @click="submitQuestion" class="submit-btn">Submit</button>
+				</template>
+
+			</NewQuestionModel>
+		</Teleport>
+		</div>
+
+		-->
+
 	</div>
 	</body>
 </template>
@@ -27,6 +99,8 @@
 import QuizCard from "@/components/shared/QuizCard.vue";
 import {getIdByToken} from "@/tokenController.js";
 import {apiClient} from "@/api.js";
+import NewQuestionModel from "@/components/shared/NewQuestionModel.vue";
+
 
 export default {
 	components: {
@@ -73,7 +147,7 @@ export default {
 
 <style>
 .overViewQuestion-page{
-	padding: 50px;
+	padding: 40px;
 }
 
 .quiz-div {