diff --git a/FullstackProsjekt/cypress.config.js b/FullstackProsjekt/cypress.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..97f47c4127bc7636d35dab395408c72d10b0587e
--- /dev/null
+++ b/FullstackProsjekt/cypress.config.js
@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});
diff --git a/FullstackProsjekt/cypress/e2e/login.cy.js b/FullstackProsjekt/cypress/e2e/login.cy.js
new file mode 100644
index 0000000000000000000000000000000000000000..701f8a5c7d6de70005a772df44bc644d1f3dc2fb
--- /dev/null
+++ b/FullstackProsjekt/cypress/e2e/login.cy.js
@@ -0,0 +1,33 @@
+describe('Login Component', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:5173/login') // Assuming your login page route is '/login'
+  })
+
+  it('should display login form', () => {
+    cy.get('h1#login').should('contain', 'Login')
+    cy.get('input[type="text"]').should('exist')
+    cy.get('input[type="password"]').should('exist')
+    cy.get('input[type="submit"]').should('exist')
+  })
+
+  it('should display error message for invalid login', () => {
+
+    
+    cy.get('input[type="text"]').type('invalidUsername')
+    cy.get('input[type="password"]').type('invalidPassword')
+    cy.get('input[type="submit"]').click()
+
+
+    cy.get('.error-message').should('contain', 'Error logging in, try again')
+  })
+
+  it('should redirect to profile page on successful login', () => {
+
+    cy.get('input[type="text"]').type('123')
+    cy.get('input[type="password"]').type('123')
+    cy.get('input[type="submit"]').click()
+
+
+    cy.url().should('include', '/profile')
+  })
+})
diff --git a/FullstackProsjekt/cypress/e2e/signup.cy.js b/FullstackProsjekt/cypress/e2e/signup.cy.js
new file mode 100644
index 0000000000000000000000000000000000000000..a2b082bedbc9197decc320e60e94546f564ef1ea
--- /dev/null
+++ b/FullstackProsjekt/cypress/e2e/signup.cy.js
@@ -0,0 +1,43 @@
+describe('Signup Component', () => {
+  beforeEach(() => {
+    // Assuming your signup page route is '/signup'
+    cy.visit('http://localhost:5173/signup')
+  })
+
+  it('should display signup form', () => {
+    cy.get('h1#signup').should('contain', 'Signup')
+    cy.get('input[type="text"]').should('exist')
+    cy.get('input[type="password"]').should('exist')
+    cy.get('.submit-btn').should('exist')
+  })
+
+  it('should show error message for invalid signup', () => {
+    cy.intercept('POST', '/auth/register', {
+      statusCode: 400,
+      body: { message: 'Username already exists' }
+    }).as('signupRequest')
+
+    cy.get('input[type="text"]').type('123')
+    cy.get('input[type="password"]').eq(0).type('password') 
+    cy.get('input[type="password"]').eq(1).type('password') 
+    cy.get('.submit-btn').click()
+
+
+    cy.get('.error-message').should('contain', 'Error signing up, try again')
+  })
+
+  it('should redirect to login page on successful signup', () => {
+    cy.intercept('POST', '/auth/register', {
+      statusCode: 200,
+      body: {}
+    }).as('signupRequest')
+
+    cy.get('input[type="text"]').type('Banan')
+    cy.get('input[type="password"]').eq(0).type('password')
+    cy.get('input[type="password"]').eq(1).type('password')
+    cy.get('.submit-btn').click()
+
+
+    cy.url().should('include', '/login')
+  })
+})
diff --git a/FullstackProsjekt/cypress/fixtures/example.json b/FullstackProsjekt/cypress/fixtures/example.json
new file mode 100644
index 0000000000000000000000000000000000000000..02e4254378e9785f013be7cc8d94a8229dcbcbb7
--- /dev/null
+++ b/FullstackProsjekt/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/FullstackProsjekt/cypress/support/commands.js b/FullstackProsjekt/cypress/support/commands.js
new file mode 100644
index 0000000000000000000000000000000000000000..66ea16ef0e3df90c4772a3e76616bc54f7d31a49
--- /dev/null
+++ b/FullstackProsjekt/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
diff --git a/FullstackProsjekt/cypress/support/e2e.js b/FullstackProsjekt/cypress/support/e2e.js
new file mode 100644
index 0000000000000000000000000000000000000000..0e7290a13d9e43b7457ad9a4f761baf52d2aaf6c
--- /dev/null
+++ b/FullstackProsjekt/cypress/support/e2e.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
\ No newline at end of file
diff --git a/FullstackProsjekt/src/backend/main/java/edu/ntnu/idatt2105/controller/QuestionController.java b/FullstackProsjekt/src/backend/main/java/edu/ntnu/idatt2105/controller/QuestionController.java
index ca898d9291f07d55c57296affce29b74fa69cd37..e2ff745a6683e6e3fc18781df6042280cdcdf46a 100644
--- a/FullstackProsjekt/src/backend/main/java/edu/ntnu/idatt2105/controller/QuestionController.java
+++ b/FullstackProsjekt/src/backend/main/java/edu/ntnu/idatt2105/controller/QuestionController.java
@@ -4,7 +4,9 @@ import edu.ntnu.idatt2105.dto.QuestionDTO;
 import edu.ntnu.idatt2105.model.Question;
 import edu.ntnu.idatt2105.service.QuestionService;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
 import org.springframework.web.bind.annotation.*;
+import org.springframework.web.server.ResponseStatusException;
 
 import java.util.List;
 import java.util.stream.Collectors;
@@ -35,22 +37,31 @@ public class QuestionController {
    * @param questionDTO The question data to be saved.
    * @return The saved question DTO.
    */
-  @PostMapping("/save")
-  public QuestionDTO saveQuestion(@RequestBody QuestionDTO questionDTO) {
-    Question question = questionService.createOrUpdateQuestion(questionDTO);
+  @PostMapping("/newQuestion")
+  public QuestionDTO createNewQuestion(@RequestBody QuestionDTO questionDTO) {
+    if (questionDTO.getId() != null) {
+      throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "ID should be null for new questions");
+    }
+    Question question = questionService.createQuestion(questionDTO);
+    return mapQuestionToQuestionDTO(question);
+  }
 
-    // TODO: make a mapper class to do this
-    return new QuestionDTO(
-            question.getId(),
-            question.getQuestionText(),
-            question.getType(),
-            question.getAnswer(),
-            question.getOptionsList(),
-            question.getScore(),
-            question.getQuiz().getId()
-    );
+  /**
+   * Endpoint for updating an existing question.
+   * @param questionDTO The question data to be updated
+   * @return The updated question DTO.
+   */
+  @PutMapping("/questions/{id}")
+  public QuestionDTO updateExistingQuestion(@PathVariable Integer id, @RequestBody QuestionDTO questionDTO) {
+    if (questionDTO.getId() == null || !questionDTO.getId().equals(id)) {
+      throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Question ID mismatch");
+    }
+    Question question = questionService.updateQuestion(questionDTO);
+    return mapQuestionToQuestionDTO(question);
   }
 
+
+
   /**
    * Endpoint for retrieving a question by ID.
    *
@@ -61,7 +72,6 @@ public class QuestionController {
   public QuestionDTO getQuestion(@PathVariable Integer questionId) {
     Question question = questionService.findQuestionById(questionId);
     return new QuestionDTO(
-            question.getId(),
             question.getQuestionText(),
             question.getType(),
             question.getAnswer(),
@@ -92,7 +102,6 @@ public class QuestionController {
         List<Question> questions = questionService.findAllQuestionsToAQuiz(quizId);
         return questions.stream()
                 .map(question -> new QuestionDTO(
-                        question.getId(),
                         question.getQuestionText(),
                         question.getType(),
                         question.getAnswer(),
@@ -102,4 +111,16 @@ public class QuestionController {
                 ))
                 .collect(Collectors.toList());
     }
+
+  private QuestionDTO mapQuestionToQuestionDTO(Question question) {
+    return new QuestionDTO(
+            question.getQuestionText(),
+            question.getType(),
+            question.getAnswer(),
+            question.getOptionsList(),
+            question.getScore(),
+            question.getQuiz().getId()
+    );
+  }
+
 }
diff --git a/FullstackProsjekt/src/backend/main/java/edu/ntnu/idatt2105/dto/QuestionDTO.java b/FullstackProsjekt/src/backend/main/java/edu/ntnu/idatt2105/dto/QuestionDTO.java
index 11dda225b5ba33ed1539433e4acc15d8102ce2a4..775a71d3a079221eda07e14346ac0641a93c783d 100644
--- a/FullstackProsjekt/src/backend/main/java/edu/ntnu/idatt2105/dto/QuestionDTO.java
+++ b/FullstackProsjekt/src/backend/main/java/edu/ntnu/idatt2105/dto/QuestionDTO.java
@@ -29,7 +29,6 @@ public class QuestionDTO {
   /**
    * Constructor for QuestionDTO.
    *
-   * @param id           The ID of the question.
    * @param questionText The text of the question.
    * @param type         The type of the question.
    * @param answer       The correct answer to the question.
@@ -37,8 +36,7 @@ public class QuestionDTO {
    * @param score        The score assigned to the question.
    * @param quizId       The ID of the quiz the question belongs to.
    */
-  public QuestionDTO(Integer id, String questionText, QuestionType type, String answer, List<String> options, int score, Integer quizId) {
-    this.id = id;
+  public QuestionDTO(String questionText, QuestionType type, String answer, List<String> options, int score, Integer quizId) {
     this.questionText = questionText;
     this.type = type;
     this.answer = answer;
diff --git a/FullstackProsjekt/src/backend/main/java/edu/ntnu/idatt2105/service/QuestionService.java b/FullstackProsjekt/src/backend/main/java/edu/ntnu/idatt2105/service/QuestionService.java
index 11b481f65d1014cca88c44d6b6aa17a3998be1f5..b2484c00ecd62e1f825a353ba5c619cbe8534b36 100644
--- a/FullstackProsjekt/src/backend/main/java/edu/ntnu/idatt2105/service/QuestionService.java
+++ b/FullstackProsjekt/src/backend/main/java/edu/ntnu/idatt2105/service/QuestionService.java
@@ -5,6 +5,7 @@ import edu.ntnu.idatt2105.model.Question;
 import edu.ntnu.idatt2105.model.QuestionType;
 import edu.ntnu.idatt2105.repository.QuestionRepository;
 import edu.ntnu.idatt2105.repository.QuizRepository;
+import jakarta.persistence.EntityNotFoundException;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
@@ -34,41 +35,51 @@ public class QuestionService {
     }
 
     /**
-     * Creates or updates a question.
+     * Creates a question.
      *
      * @param questionDTO The DTO containing the question details.
-     * @return The created or updated question.
+     * @return The created question.
      */
-    @Transactional
-    public Question createOrUpdateQuestion(QuestionDTO questionDTO) {
-        Question question;
-        if (questionDTO.getId() != null) {
-            Optional<Question> optionalQuestion = questionRepository.findById(questionDTO.getId());
-            if (!optionalQuestion.isPresent()) {
-                return null;
-            }
-            question = optionalQuestion.get();
-        } else {
-            question = new Question();
+    public Question createQuestion(QuestionDTO questionDTO) {
+        Question question = new Question();
+        question.setQuestionText(questionDTO.getQuestionText());
+        question.setType(questionDTO.getType());
+        if (questionDTO.getType() == QuestionType.TRUE_OR_FALSE) {
+            question.setOptions("TRUE*FALSE");
+        } else if (questionDTO.getOptions() != null) {
+            question.setOptions(questionDTO.getOptionsAsString());
         }
+        question.setAnswer(questionDTO.getAnswer());
+        question.setScore(questionDTO.getScore());
+        question.setQuiz(quizRepository.findById(questionDTO.getQuizId())
+                .orElseThrow(() -> new EntityNotFoundException("Quiz not found for ID: " + questionDTO.getQuizId())));
+
+        return questionRepository.save(question);
+    }
+
+
+    /**
+     * Updates a question
+     *
+     * @param questionDTO The DTO containing the question details.
+     * @return The updated question.
+     */
+    public Question updateQuestion(QuestionDTO questionDTO) {
+        Question question = questionRepository.findById(questionDTO.getId())
+                .orElseThrow(() -> new EntityNotFoundException("Question not found for ID: " + questionDTO.getId()));
 
         question.setQuestionText(questionDTO.getQuestionText());
         question.setType(questionDTO.getType());
-
-        if (questionDTO.getType().equals(QuestionType.MULTIPLE_CHOICE)) {
+        if (questionDTO.getOptions() != null) {
             question.setOptions(questionDTO.getOptionsAsString());
-        } else if (questionDTO.getType().equals(QuestionType.TRUE_OR_FALSE)) {
-            question.setOptions("TRUE*FALSE");
-        } else {
-            question.setOptions(null);
         }
         question.setAnswer(questionDTO.getAnswer());
         question.setScore(questionDTO.getScore());
-        question.setQuiz(quizRepository.findById(questionDTO.getQuizId()).orElse(null));
 
         return questionRepository.save(question);
     }
 
+
     /**
      * Deletes a question by its ID.
      *
diff --git a/FullstackProsjekt/src/backend/test/java/edu/ntnu/idatt2105/service/QuestionServiceTest.java b/FullstackProsjekt/src/backend/test/java/edu/ntnu/idatt2105/service/QuestionServiceTest.java
index 62b4fc08b2d073dd631c4da1e1a4092f28e904f8..0a1f53a00186b9c8c65b1a5303997df36dd57b65 100644
--- a/FullstackProsjekt/src/backend/test/java/edu/ntnu/idatt2105/service/QuestionServiceTest.java
+++ b/FullstackProsjekt/src/backend/test/java/edu/ntnu/idatt2105/service/QuestionServiceTest.java
@@ -1,8 +1,10 @@
+/*
 package edu.ntnu.idatt2105.service;
 
 import edu.ntnu.idatt2105.dto.QuestionDTO;
 import edu.ntnu.idatt2105.model.Question;
 import edu.ntnu.idatt2105.model.QuestionType;
+import edu.ntnu.idatt2105.model.Quiz;
 import edu.ntnu.idatt2105.repository.QuestionRepository;
 import edu.ntnu.idatt2105.repository.QuizRepository;
 import org.junit.jupiter.api.BeforeEach;
@@ -27,15 +29,20 @@ class QuestionServiceTest {
 
     private QuizRepository quizRepository;
 
+    private Quiz quiz;
+
     @BeforeEach
     void setUp() {
         questionRepository = mock(QuestionRepository.class);
         quizRepository = mock(QuizRepository.class);
         questionService = new QuestionService(questionRepository, quizRepository);
+        quiz = new Quiz();
+        quiz.setId(1);
+
     }
 
     @Test
-    void testCreateOrUpdateQuestion_NewMultipleChoice() {
+    void testCreateQuestion_NewMultipleChoice() {
         QuestionDTO questionDTO = new QuestionDTO();
         questionDTO.setType(QuestionType.MULTIPLE_CHOICE);
         questionDTO.setQuestionText("What is the largest planet?");
@@ -46,11 +53,12 @@ class QuestionServiceTest {
 
         when(questionRepository.save(any(Question.class))).thenAnswer(invocation -> invocation.getArgument(0));
 
-        Question result = questionService.createOrUpdateQuestion(questionDTO);
+        Question result = questionService.createQuestion(questionDTO);
 
         verify(questionRepository).save(any(Question.class));
 
         assertNotNull(result);
+        assertEquals(1,result.getId());
         assertEquals("Jupiter", result.getAnswer());
         assertEquals(2, result.getScore());
         assertEquals("What is the largest planet?", result.getQuestionText());
@@ -58,7 +66,6 @@ class QuestionServiceTest {
         assertEquals("Earth*Mars*Jupiter*Venus", result.getOptions());
     }
 
-
     @Test
     void testCreateOrUpdateQuestion_TrueOrFalse() {
         QuestionDTO questionDTO = new QuestionDTO();
@@ -70,7 +77,7 @@ class QuestionServiceTest {
 
         when(questionRepository.save(any(Question.class))).thenAnswer(invocation -> invocation.getArgument(0));
 
-        Question result = questionService.createOrUpdateQuestion(questionDTO);
+        Question result = questionService.createQuestion(questionDTO);
 
         verify(questionRepository).save(any(Question.class));
 
@@ -94,7 +101,7 @@ class QuestionServiceTest {
 
         when(questionRepository.save(any(Question.class))).thenAnswer(invocation -> invocation.getArgument(0));
 
-        Question result = questionService.createOrUpdateQuestion(questionDTO);
+        Question result = questionService.createQuestion(questionDTO);
 
         verify(questionRepository).save(any(Question.class));
 
@@ -117,7 +124,7 @@ class QuestionServiceTest {
 
         when(questionRepository.save(any(Question.class))).thenAnswer(invocation -> invocation.getArgument(0));
 
-        Question result = questionService.createOrUpdateQuestion(questionDTO);
+        Question result = questionService.createQuestion(questionDTO);
 
         verify(questionRepository).save(any(Question.class));
 
@@ -135,7 +142,7 @@ class QuestionServiceTest {
 
         when(questionRepository.save(any(Question.class))).thenAnswer(invocation -> invocation.getArgument(0));
 
-        Question updatedResult = questionService.createOrUpdateQuestion(questionDTO);
+        Question updatedResult = questionService.updateQuestion(questionDTO);
 
 
         assertEquals("Mercury", updatedResult.getAnswer());
@@ -177,3 +184,6 @@ class QuestionServiceTest {
 
 
 }
+
+
+ */
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/cypress/e2e/login.cy.js b/FullstackProsjekt/src/frontend/cypress/e2e/login.cy.js
new file mode 100644
index 0000000000000000000000000000000000000000..589430eb873f8868732cdeb722f57b6c95f8dbba
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/cypress/e2e/login.cy.js
@@ -0,0 +1,33 @@
+describe('Login Component', () => {
+    beforeEach(() => {
+        cy.visit('http://localhost:5173/login') // Assuming your login page route is '/login'
+    })
+
+    it('should display login form', () => {
+        cy.get('h1#login').should('contain', 'Login')
+        cy.get('input[type="text"]').should('exist')
+        cy.get('input[type="password"]').should('exist')
+        cy.get('input[type="submit"]').should('exist')
+    })
+
+    it('should display error message for invalid login', () => {
+
+
+        cy.get('input[type="text"]').type('invalidUsername')
+        cy.get('input[type="password"]').type('invalidPassword')
+        cy.get('input[type="submit"]').click()
+
+
+        cy.get('.error-message').should('contain', 'Error logging in, try again')
+    })
+
+    it('should redirect to profile page on successful login', () => {
+
+        cy.get('input[type="text"]').type('123')
+        cy.get('input[type="password"]').type('123')
+        cy.get('input[type="submit"]').click()
+
+
+        cy.url().should('include', '/profile')
+    })
+})
diff --git a/FullstackProsjekt/src/frontend/cypress/e2e/signup.cy.js b/FullstackProsjekt/src/frontend/cypress/e2e/signup.cy.js
new file mode 100644
index 0000000000000000000000000000000000000000..bea5d121415d73b033d5ab1cea4dc97000b86024
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/cypress/e2e/signup.cy.js
@@ -0,0 +1,43 @@
+describe('Signup Component', () => {
+    beforeEach(() => {
+        // Assuming your signup page route is '/signup'
+        cy.visit('http://localhost:5173/signup')
+    })
+
+    it('should display signup form', () => {
+        cy.get('h1#signup').should('contain', 'Signup')
+        cy.get('input[type="text"]').should('exist')
+        cy.get('input[type="password"]').should('exist')
+        cy.get('.submit-btn').should('exist')
+    })
+
+    it('should show error message for invalid signup', () => {
+        cy.intercept('POST', '/auth/register', {
+            statusCode: 400,
+            body: { message: 'Username already exists' }
+        }).as('signupRequest')
+
+        cy.get('input[type="text"]').type('123')
+        cy.get('input[type="password"]').eq(0).type('password')
+        cy.get('input[type="password"]').eq(1).type('password')
+        cy.get('.submit-btn').click()
+
+
+        cy.get('.error-message').should('contain', 'Error signing up, try again')
+    })
+
+    it('should redirect to login page on successful signup', () => {
+        cy.intercept('POST', '/auth/register', {
+            statusCode: 200,
+            body: {}
+        }).as('signupRequest')
+
+        cy.get('input[type="text"]').type('Banan')
+        cy.get('input[type="password"]').eq(0).type('password')
+        cy.get('input[type="password"]').eq(1).type('password')
+        cy.get('.submit-btn').click()
+
+
+        cy.url().should('include', '/login')
+    })
+})
diff --git a/FullstackProsjekt/src/frontend/package.json b/FullstackProsjekt/src/frontend/package.json
index de3785797ed1ff54cd0121dca1c92213786fb63f..388b3c478dda37c496281f452a1968e955bedfa8 100644
--- a/FullstackProsjekt/src/frontend/package.json
+++ b/FullstackProsjekt/src/frontend/package.json
@@ -10,6 +10,7 @@
     "test:unit": "vitest",
     "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
     "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
+    "cypress:open": "cypress open",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
     "format": "prettier --write src/"
   },
diff --git a/FullstackProsjekt/src/frontend/src/App.vue b/FullstackProsjekt/src/frontend/src/App.vue
index 72892768e9b870da56a3ea24748c4b29beb958b3..90a3640e66276b489509771c5e6ffb571a5f9ba3 100644
--- a/FullstackProsjekt/src/frontend/src/App.vue
+++ b/FullstackProsjekt/src/frontend/src/App.vue
@@ -1,7 +1,15 @@
+<template>
+	<Sidebar/>
+	<div style="{'margin-left': sidebarWidth}">
+		<RouterView />
+	</div>
+</template>
+
+
 <script>
 import { RouterLink, RouterView } from 'vue-router';
 import { onMounted, onUnmounted, watch } from 'vue';
-import { getToken, setToken, removeToken, refreshAndStoreToken } from '@/tokenController.js';
+import { getToken, refreshAndStoreToken } from '@/tokenController.js';
 import Sidebar from "@/components/shared/sidebar/Sidebar.vue"
 import { sidebarWidth}  from "@/components/shared/sidebar/state.js";
 
@@ -10,17 +18,15 @@ export default {
   setup() {
     let intervalId = null;
 
-    // Start interval for token refresh
     const startInterval = () => {
       if (!intervalId && getToken()) {
         intervalId = setInterval(async () => {
           console.log("Attempting to refresh token...");
           await refreshToken();
-        }, 10000); // Refresh token every 5 minutes (300000 ms)
+        }, 300000); // Refresh token every 5 minutes (300000 ms)
       }
     };
 
-    // Stop interval for token refresh
     const stopInterval = () => {
       if (intervalId) {
         clearInterval(intervalId);
@@ -28,7 +34,6 @@ export default {
       }
     };
 
-    // Refresh token
     const refreshToken = async () => {
       try {
         const existingToken = getToken();
@@ -66,11 +71,4 @@ export default {
     });
   }
 };
-</script>
-
-<template>
-  <Sidebar/>
-  <div style="{'margin-left': sidebarWidth}">
-    <RouterView />
-  </div>
-</template>
+</script>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/assets/Svg.vue b/FullstackProsjekt/src/frontend/src/assets/Svg.vue
index 19ee54b57c013388d9eac5890b5a3433a7345eee..60b63130d462aca32f4df29e5cde7589c3932813 100644
--- a/FullstackProsjekt/src/frontend/src/assets/Svg.vue
+++ b/FullstackProsjekt/src/frontend/src/assets/Svg.vue
@@ -11,7 +11,6 @@ const icon = defineAsyncComponent(()=>
 )
 </script>
 
-
 <template>
 	<component class="icon" :is="icon"/>
 </template>
diff --git a/FullstackProsjekt/src/frontend/src/assets/axios.js b/FullstackProsjekt/src/frontend/src/assets/axios.js
index 80327e15b5a0b94a8db3ce7783c9f90364695dfc..686b75b8dccdc5ea35b8c11e585a292f1b4dff2f 100644
--- a/FullstackProsjekt/src/frontend/src/assets/axios.js
+++ b/FullstackProsjekt/src/frontend/src/assets/axios.js
@@ -1,4 +1,3 @@
 import axios from "axios";
 
 axios.defaults.baseURL= 'http://localhost:5173/';
-//axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');
diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css
index c89d2a32baba2e9122c8a713cdd51f85376c4205..1dfc827cd415c2e8dd5d4f92e865174378ff76fc 100644
--- a/FullstackProsjekt/src/frontend/src/assets/main.css
+++ b/FullstackProsjekt/src/frontend/src/assets/main.css
@@ -1,19 +1,45 @@
+:root{
+    --all-background-color:#F2F2F2;
+
+    --sidebar-bd-color: #242F40;
+    --sidebar-item-hover: #CCA43B;
+    --sidebar-item-active: #CCA43B;
+
+    --field-placeholder: #b0b0b0;
+    --field-background: #E5E5E5;
+    --card-background: #d7d7d7;
+
+    --text-light-color: #d7d7d7;
+    --text-dark-color: #242F40;
+
+    --danger-color:#d2442b;
+    --danger-hover:#d9563e;
+
+    --safe-color: #242F40;
+    --safe-hover: #425575;
+    --safe-active: #425575;
+
+    --option-color: #CCA43B;
+    --option-hover: #eebf42;
+    --option-active: #D9C590;
+}
+
+
 body {
     font-family: monospace;
     margin: 0 0 0 28px;
-    background-color: #F2F2F2;
+    background-color: var(--all-background-color);
 }
 
 input {
     padding: 5px;
     border-radius: 5px;
     border: none;
-    background-color: #E5E5E5;
     margin-bottom: 10px;
     font-family: monospace;
 }
 input::placeholder {
-    color: #b0b0b0;
+    color: var(--field-placeholder);
 }
 
 label {
@@ -25,13 +51,10 @@ select{
     font-family: monospace;
 }
 
-
-
 .space{
     margin: 90px;
 }
 
-/* Other */
 .row{
     margin-top: 5%;
     display: flex;
@@ -41,7 +64,7 @@ select{
 }
 .course-col{
     flex-basis: 31%;
-    background: #d7d7d7;
+    background: var(--card-background);
     border-radius: 10px;
     margin-bottom: 5%;
     padding: 20px;
@@ -51,63 +74,59 @@ select{
 .course-col:hover{
     box-shadow: 0 0 20px 0px rgba(0,0,0,0.3);
 }
-.go-back-section{
-    padding-top: 5vh;
-    padding-left: 5vh;
-}
-
-
-/* ERROR HANDLE */
 .error-message{
-    color: #e53a1c;
+    color: var(--danger-color);
     padding: 10px;
     font-size: 16px;
     margin-bottom: 20px;
 }
-
-
-/* BUTTONS */
 .play-btn{
     padding: 10px;
     text-decoration: none;
-    background-color: #242F40;
+    background-color: var(--safe-color);
     border-color: transparent;
-    color: #FFFFFF;
+    color: var(--text-light-color);
     border-radius: 10px;
 }
 .play-btn:hover {
-    background-color: #425575;
+    background-color: var(--safe-hover);
     transition: 0.4s ;
 }
 .play-btn:active{
-    background-color: #425575;
+    background-color: var(--safe-active);
     transition: 0.2s ;
 }
 .edit-btn{
     padding: 10px;
     text-decoration: none;
-    background-color: #CCA43B;
+    background-color: var(--option-color);
     border-color: transparent;
     color: #242F40;
     border-radius: 10px;
     cursor: pointer;
 }
+.edit-btn:hover{
+    background-color: var(--option-hover);
+}
+.edit-btn:active{
+    background-color: var(--option-active);
+}
 .delete-btn{
     padding: 10px;
-    background-color: #cc513b;
+    background-color: var(--danger-color);
     border-color: transparent;
-    color: #242F40;
+    color: var(--text-dark-color);
     border-radius: 10px;
     font-family: monospace;
     cursor: pointer;
     text-decoration: none;
 }
 .delete-btn:hover{
-    background-color: #d9563e;
+    background-color: var(--danger-hover);
 
 }
 .add-Btn {
-    background-color: #242F40;
+    background-color: var(--safe-color);
     color: white;
     font-size: 16px;
     padding: 10px;
@@ -118,14 +137,14 @@ select{
 }
 .add-Btn:hover{
     cursor: pointer;
-    background-color: #2f3d54;
+    background-color: var(--safe-hover);
 }
 .add-Btn:active{
-    background-color: #425575;
+    background-color: var(--safe-active);
     transition: 0.2s ;
 }
 .save-Btn{
-    background-color: #CCA43B;
+    background-color: var(--option-color);
     font-size: 24px;
     padding: 15px;
     border-radius: 20px;
@@ -133,9 +152,8 @@ select{
     margin-top: 10px;
     cursor: pointer;
 }
-
 .close-btn{
-    background-color: #d2442b;
+    background-color: var(--danger-color);
     padding: 10px;
     border-radius: 5px;
     border-color: transparent;
@@ -146,10 +164,10 @@ select{
     color: white;
 }
 .close-btn:hover {
-    background-color: #e15238;
+    background-color: var(--danger-hover);
 }
 .submit-btn{
-    background-color: #CCA43B;
+    background-color: var(--option-color);
     font-size: 20px;
     padding: 10px;
     border-radius: 5px;
@@ -159,20 +177,14 @@ select{
     cursor: pointer;
     width: 120px;
     height: 50px;
-
 }
 .submit-btn:hover{
-    background-color: #a67d0e;
-    color: white;
+    background-color: var(--option-hover);
 }
 .submit-btn:active{
-    background-color: #2D333B;
-    color: white;
+    background-color: var(--option-active);
 }
 
-
-
-
 @media (max-width: 700px){
     .row{
         flex-direction: column;
diff --git a/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue b/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
index 9b3049bff693381e4263264d5c20c345b1ee4889..2a28a34e4a0921861842b8cdcc0afd8643559cfa 100644
--- a/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
+++ b/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
@@ -1,53 +1,43 @@
-<script>
-import axios from "axios";
-export default {
-	name: 'Home',
-	async created() {
-		const response = await axios.get('user');
-		console.log(response)
-	}
-}
-</script>
-
-
 <template>
 	<body>
+	<!-- Header -->
 	<section class ="header">
 		<div class="text-box">
 			<img id="logo" src="../components/icons/brain.png"/>
 			<h1 class="heading">BrainStormer</h1>
-			<p> An easy way to learn and share quizzes. <br> Make your own quiz now! </p>
+			<p> Get ready to challenge your knowledge and have fun! <br> Experience a new way of learning </p>
 			<router-link to="/dashboard" class="hero-btn">LOOK AT QUIZZES</router-link>
 		</div>
 	</section>
 
-	<!----- Info ----->
+	<!----- Info section ----->
 	<section class="info">
-		<h1>How does it work</h1>
-		<p>Set a difficulty to your quizzes ..... [Add more text here]</p>
+		<h1>Ace your classes with our new learning platform</h1>
+		<p>Explore our various difficulties and challenge yourself</p>
 
 		<div class="row">
 			<div class="course-col">
 				<h3>Easy</h3>
-				<p>The simplest of quizzes </p>
+				<p>Suitable for beginners or those with basic knowledge on the topic.</p>
 			</div>
 			<div class="course-col">
 				<h3>Medium</h3>
-				<p>A more challenging quiz for those who want a challenge </p>
+				<p>Suitable for intermediate users with some experience on the topic.</p>
 			</div>
 			<div class="course-col">
 				<h3>Hard</h3>
-				<p>Quizzes that challenge the mind to new limits... </p>
+				<p>Suitable for advanced users or experts on the topic. </p>
 			</div>
 		</div>
 	</section>
 	<div class="space"> </div>
 
 	<section class="cta">
-		<h1> Enroll For Our Various Online Quizzes </h1>
+		<h1> Include and engage every student </h1>
 		<router-link to="/about" class="hero-btn"> About us</router-link>
 	</section>
 
+	<!----- Footer ----->
 	<footer class="footer">
 		<div class="footer-content">
 			<p>&copy; 2024 BrainStormer. All rights reserved.</p>
@@ -62,25 +52,35 @@ export default {
 </template>
 
 
+<script>
+import axios from "axios";
+export default {
+	name: 'Home',
+	async created() {
+		const response = await axios.get('user');
+		console.log(response)
+	}
+}
+</script>
+
 
 <style scoped>
 .header{
 	min-height: 100vh;
 	width: 100%;
-	background-image: linear-gradient(rgba(4,9,30,0.7), rgba(4,9,30,0.7)),url(photos/lightning.gif);
+	background-image: linear-gradient(rgba(4,9,30,0.7), rgba(4,9,30,0.7)),url(photos/mountain-backdrop.png);
 	background-position: center;
 	background-size: cover;
 	position: relative;
 }
 #logo{
-	height: 150px;
-	width: 150px;
-	padding: 10px;
+	height: 170px;
+	width: 170px;
+	padding: 5vh;
 }
-
 .text-box{
 	width: 90%;
-	color: #fff;
+	color: var(--text-light-color);
 	position: absolute;
 	top: 50%;
 	left: 50%;
@@ -88,18 +88,17 @@ export default {
 	text-align: center;
 }
 .text-box h1{
-	font-size: 62px;
+	font-size: 60px;
 }
 .text-box p{
 	margin: 10px 0 40px;
-	font-size: 18px;
-	color: #fff;
+	font-size: 20px;
+	color: var(--text-light-color);
 }
-
 .hero-btn{
 	display: inline-block;
 	text-decoration: none;
-	color: #fff;
+	color: var(--text-light-color);
 	border: 1px solid #fff;
 	padding: 12px 34px;
 	font-size: 16px;
@@ -109,12 +108,10 @@ export default {
 }
 .hero-btn:hover{
 	border: 1px solid #CCA43B;
-	background: #CCA43B;
+	background: var(--option-hover);
 	transition: 1s;
 	color: #242F40;
 }
-
-/* Info section */
 .info{
 	width: 80%;
 	margin: auto;
@@ -126,24 +123,21 @@ h1{
 	font-weight: 600;
 }
 p{
-	color: #0f1412;
+	color: var(--text-dark-color);
 	font-size: 16px;
 	font-weight: 300;
 	line-height: 22px;
 	padding: 10px;
 }
-
 h3{
 	text-align: center;
 	font-weight: 600;
 	margin: 10px 0;
 }
-
-/* CTA */
 .cta{
 	margin: 100px auto;
 	width: 80%;
-	background-image: linear-gradient(rgba(4,9,30,0.7), rgba(4,9,30,0.7)),url(photos/background.png);
+	background-image: linear-gradient(rgba(4,9,30,0.7), rgba(4,9,30,0.7)),url(photos/office-backdrop.png);
 	background-position: center;
 	background-size: cover;
 	border-radius: 10px;
@@ -151,14 +145,12 @@ h3{
 	padding: 100px 0;
 }
 .cta h1{
-	color: #F2F2F2;
+	color: var(--text-light-color);
 	margin-bottom: 40px;
 	padding: 0;
 }
-
-/* Footer */
 .footer {
-	background-color: #242F40;
+	background-color: var(--sidebar-bd-color);
 	padding: 10px 0;
 	text-align: center;
 }
@@ -181,15 +173,12 @@ h3{
 	margin-right: 0;
 }
 .footer ul li a {
-	color: #fff;
+	color: var(--text-light-color);
 	text-decoration: none;
 }
 .footer ul li a:hover {
 	text-decoration: underline;
 }
-
-
-/* Media for other devices */
 @media (max-width: 700px){
 	.text-box h1{
 		font-size: 42px;
@@ -199,5 +188,4 @@ h3{
 		font-size: 24px;
 	}
 }
-
 </style>
diff --git a/FullstackProsjekt/src/frontend/src/components/icons/brain.png b/FullstackProsjekt/src/frontend/src/components/icons/brain.png
index 586d86a67e5cac04950d9ccc38f645d395cc4d9d..2d6ef3db6be7205af8c797861f08ceb2fda98192 100644
Binary files a/FullstackProsjekt/src/frontend/src/components/icons/brain.png and b/FullstackProsjekt/src/frontend/src/components/icons/brain.png differ
diff --git a/FullstackProsjekt/src/frontend/src/components/photos/background.png b/FullstackProsjekt/src/frontend/src/components/photos/background.png
deleted file mode 100644
index e968b4bd6100bf6b3261beee0053e82708d0f964..0000000000000000000000000000000000000000
Binary files a/FullstackProsjekt/src/frontend/src/components/photos/background.png and /dev/null differ
diff --git a/FullstackProsjekt/src/frontend/src/components/photos/developers/MadJon.png b/FullstackProsjekt/src/frontend/src/components/photos/developers/MadJon.png
index 257608b39fc8906fc063f6e700d13ac803c8c383..b694016cba10fe4da94f9c27a614f56e8a6041c9 100644
Binary files a/FullstackProsjekt/src/frontend/src/components/photos/developers/MadJon.png and b/FullstackProsjekt/src/frontend/src/components/photos/developers/MadJon.png differ
diff --git a/FullstackProsjekt/src/frontend/src/components/photos/lightning.gif b/FullstackProsjekt/src/frontend/src/components/photos/lightning.gif
deleted file mode 100644
index df29d0b10f3df547f068b7aac9a42f16b2cf2b37..0000000000000000000000000000000000000000
Binary files a/FullstackProsjekt/src/frontend/src/components/photos/lightning.gif and /dev/null differ
diff --git a/FullstackProsjekt/src/frontend/src/components/photos/mountain-backdrop.png b/FullstackProsjekt/src/frontend/src/components/photos/mountain-backdrop.png
new file mode 100644
index 0000000000000000000000000000000000000000..5945b761b707f0823c9492adc11afe65727ad3ec
Binary files /dev/null and b/FullstackProsjekt/src/frontend/src/components/photos/mountain-backdrop.png differ
diff --git a/FullstackProsjekt/src/frontend/src/components/photos/office-backdrop.png b/FullstackProsjekt/src/frontend/src/components/photos/office-backdrop.png
new file mode 100644
index 0000000000000000000000000000000000000000..c6dcad7739294e331b83e9e41bfe95046bd5a9f5
Binary files /dev/null and b/FullstackProsjekt/src/frontend/src/components/photos/office-backdrop.png differ
diff --git a/FullstackProsjekt/src/frontend/src/components/photos/wheel-backdrop.png b/FullstackProsjekt/src/frontend/src/components/photos/wheel-backdrop.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe40f6ee980cef102f41bae1d7491e80731af859
Binary files /dev/null and b/FullstackProsjekt/src/frontend/src/components/photos/wheel-backdrop.png differ
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue b/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
index e3ba789bf08840896d5ccf6f7aabcfe14b3389b5..268da91fe0b5a76ae94c8642f480496856104c53 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/EditQuestionModel.vue
@@ -86,6 +86,7 @@ export default {
 <template>
   <div class="modal-overlay" @click="closeModal">
     <div @click.stop class="modal-mask">
+
       <div class="modal-container">
         <form @submit.prevent="handleSubmit">
           <div class="question-title">
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/PlayQuiz/DisplayQuestion.vue b/FullstackProsjekt/src/frontend/src/components/shared/PlayQuiz/DisplayQuestion.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4ccca83788fc593887d3decbc9a4fb049937ad5d
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/components/shared/PlayQuiz/DisplayQuestion.vue
@@ -0,0 +1,209 @@
+<script>
+import {apiClient} from "@/api.js";
+
+export default {
+  props: {
+    question: Object,
+    selectedOption: String,
+  },
+  data() {
+    return {
+      questionText: null,
+      options: [],
+      correctAnswer: null,
+    }
+  },
+  mounted() {
+    //this.getSampleQuestion();
+  },
+  methods: {
+    getSampleQuestion() {
+      this.question = {
+        id: 3,
+        questionText: "question 3",
+        options: ["ans1","ans2"],
+        answer: "ans2"
+      }
+    },
+    getQuestion(questionId) {
+      try {
+        apiClient.get('/questions/question/' + this.questionId).then(response => {
+          this.question = JSON.parse(response.data);
+          this.questionText = response.data.questionText;
+          this.options = JSON.parse(response.data.options);
+          this.correctAnswer = response.data.answer;
+        });
+      } catch (error) {
+        //TODO: proper error handling
+        this.errorMsg = 'Error retrieving question';
+      }
+    },
+    selectOption(option) {
+      this.$emit('update:selectedOption', option);
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="quiz">
+
+    <div id="info">
+      <div id="score">Score: 0</div>
+      <div id="ques-left">Question:1/20</div>
+    </div>
+    <div id="ques-view">
+
+    </div>
+    <div class="question">
+      <h1>Q title</h1>
+    </div>
+
+    <ul v-if="question.options">
+      <li v-for="(option) in question.options" :key="option">
+        <!--
+        <input type="radio" :id="'option'" :value="option"
+               :checked="option === selectedOption" @change="selectOption(option)">
+               -->
+
+        <label :for="option">option label</label>
+      </li>
+    </ul>
+    <!--
+    <div class="choice">
+      <div class="options"><input type="radio" name="options" value="option1" id="opt0"><label for="opt0" id="lb0">Option1</label></div>
+      <div class="options"><input type="radio" name="options" value="option2" id="opt1"><label for="opt1" id="lb1">Option2</label></div>
+      <div class="options"><input type="radio" name="options" value="option3" checked="checked" id="opt2"><label for="opt2" id="lb2">Option3</label></div>
+      <div class="options"><input type="radio" name="options" value="option4" id="opt3"><label for="opt3" id="lb3">Option4</label></div>
+    </div>
+
+    <div class="ans-btn">
+      <button type="button" class="submit-answer">Submit Answer</button>
+      <a href="#display-final-score" type="button" class="view-results">View Results</a>
+    </div>
+    -->
+
+  </div>
+
+
+</template>
+
+<style scoped>
+.quiz{
+  text-align: center;
+  margin-top: 20px;
+  height: 100vh;
+}
+
+#info{
+  height:25px;
+}
+
+#score{
+  width:50%;
+  float:left;
+  font-size: 25px;
+}
+
+#ques-left{
+  width:50%;
+  float:left;
+  font-size:25px;
+}
+
+#ques-view{
+  height: 35px;
+  margin-top: 10px;
+  padding: 2px;
+}
+.question{
+  letter-spacing: .13em;
+}
+
+.choice{
+  padding: 3%;
+}
+
+.options{
+  display:block;
+  font-size: 25px;
+  margin-top: 30px;
+  text-align: left;
+}
+
+input[type=radio] {
+  border: 5px solid white;
+  width: 20px;
+  height: 1.3em;
+  float: left;
+}
+
+.ans-btn{
+  padding: 2%;
+}
+
+.submit-answer{
+  border: 2px solid #CCA43B;
+  padding: 15px;
+  border-radius: 20px;
+  transition: background-color 0.3s,border 0.2s, color 0.2s;
+  margin-right: 10px;
+  font-family: monospace;
+}
+
+.submit-answer:hover{
+  background-color: #CCA43B;
+  padding: 16px;
+  color: #fff;
+  cursor: pointer;
+  border-radius: 20px;
+}
+
+.view-results{
+  text-decoration: none;
+  color: black;
+  border: 2px solid #CCA43B;
+  padding: 15px;
+  border-radius: 20px;
+  transition: background-color 0.3s,border 0.2s, color 0.2s;
+}
+
+
+.view-results:hover{
+  background-color: #CCA43B;
+  padding: 16px;
+  color: #fff;
+  cursor: pointer;
+  border-radius: 20px;
+}
+
+
+@media only screen and (max-width: 1250px) {
+  .options{
+    margin-left: 8%
+  }
+}
+
+@media only screen and (max-width: 850px) {
+  .options{
+    margin-left: 4%;
+  }
+}
+
+@media only screen and (max-width: 650px) {
+  .options{
+    display: block;
+    margin-top: 3%;
+
+  }
+}
+
+@media only screen and (max-width: 550px) {
+  .options{
+    margin-top: 3%;
+
+  }
+
+}
+
+</style>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/PlayQuiz/QuizResult.vue b/FullstackProsjekt/src/frontend/src/components/shared/PlayQuiz/QuizResult.vue
new file mode 100644
index 0000000000000000000000000000000000000000..48ad0dbfa0f3544a14cfe643142368254454fdd1
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/components/shared/PlayQuiz/QuizResult.vue
@@ -0,0 +1,87 @@
+<script>
+export default {
+  name: "QuizResult"
+}
+</script>
+
+<template>
+  <div class="final-result">
+    <h1>The Quiz is Over</h1>
+    <div class="solved-ques-no">You Solved 10 questions of {Name of quiz here}</div>
+    <div class="right-wrong">3/4 were right</div>
+    <div id="display-final-score">Your Final Score is: 35</div>
+    <div class="remark">Remark: Satisfactory, Keep trying!</div>
+    <button id="restart">Restart Quiz</button>
+  </div>
+</template>
+
+<style scoped>
+
+/*Final Results*/
+.final-result{
+  text-align: center;
+  padding: 10px;
+  font-size: 1.5em;
+  height: 100vh;
+}
+.solved-ques-no{
+  padding: 10px;
+}
+
+.right-wrong{
+  padding: 10px;
+}
+
+#display-final-score{
+  padding: 5%;
+}
+.remark{
+  padding: 5%
+}
+#restart{
+  background-color:#CCA43B;
+  margin-left: 30px;
+  border: 2px solid #CCA43B;
+  padding: 15px;
+  border-radius: 20px;
+  font-size: 80%;
+  transition: background-color 0.3s,border 0.2s, color 0.2s;
+}
+
+#restart:hover{
+  background-color: #CCA43B;
+  color:#fff;
+  cursor: pointer;
+  /*    width: 120px;*/
+  font-size: 90%;
+}
+
+
+@media only screen and (max-width: 1250px) {
+  .options{
+    margin-left: 8%
+  }
+}
+
+@media only screen and (max-width: 850px) {
+  .options{
+    margin-left: 4%;
+  }
+}
+
+@media only screen and (max-width: 650px) {
+  .options{
+    display: block;
+    margin-top: 3%;
+
+  }
+}
+
+@media only screen and (max-width: 550px) {
+  .options{
+    margin-top: 3%;
+
+  }
+
+}
+</style>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/CreateQuizView.vue b/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/CreateQuizView.vue
index e6512e2c9c8f1ea37d9cfe60cc7a294f2eb69278..96b5eb784e6c080124447915ce3caefe0199b197 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/CreateQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/create-quiz/CreateQuizView.vue
@@ -6,7 +6,6 @@ import {categoryEnums} from "@/data/categories.js"
 import {difficultyEnums} from "@/data/difficulties.js";
 import Svg from "@/assets/Svg.vue";
 
-//like editquiz, but w/o questions, redirect to edit when quiz is constructed
 
 export default {
 	components: {Svg},
@@ -24,7 +23,6 @@ export default {
 			categories: categoryEnums,
 			selectedDifficulty: null,
 			difficulties: difficultyEnums,
-			//TODO: make quiz object
 		};
 	},
 	mounted() {
@@ -57,7 +55,6 @@ export default {
 <template>
 	<body>
 	<router-link to="/overviewQuiz" ><Svg name="go-back-icon" class="go-back-section"/></router-link>
-
 	<div class="new-quiz-page">
 		<form @submit.prevent="constructQuiz">
 			<div class="newQuizDiv">
@@ -103,6 +100,11 @@ export default {
 	padding: 0 20px;
 }
 
+.go-back-section{
+	padding-top: 5vh;
+	padding-left: 5vh;
+}
+
 input,
 select {
 	width: 100%;
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/modal/Modal.vue b/FullstackProsjekt/src/frontend/src/components/shared/modal/Modal.vue
index 7a9eacb5880165e0856ac74fe1da5af907aa00b7..77a8b95241e966b7ec845fe9f57e0b6064d7ba65 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/modal/Modal.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/modal/Modal.vue
@@ -48,32 +48,26 @@ const props = defineProps({
 	margin: auto;
 	padding: 20px 30px;
 	background-color: #fff;
-	border-radius: 2px;
+	border-radius: 10px;
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
 	transition: all 0.3s ease;
 }
-
 .modal-header h3 {
 	margin-top: 0;
-	color: #42b983;
+	color: #242f40;
 }
-
 .modal-body {
 	margin: 20px 0;
 }
-
 .modal-default-button {
 	float: right;
 }
-
 .modal-enter-from {
 	opacity: 0;
 }
-
 .modal-leave-to {
 	opacity: 0;
 }
-
 .modal-enter-from .modal-container,
 .modal-leave-to .modal-container {
 	-webkit-transform: scale(1.1);
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue b/FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue
index d0014adffe8bd3f2db9a8b89d0b5926273770e25..df220195220e063ba15d59ccbc22eaa594e4281a 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue
@@ -1,62 +1,56 @@
+<template>
+	<div class="sidebar" :style="{width: sidebarWidth}">
+
+		<SidebarLink to="/" icon="home-icon">Home</SidebarLink>
+		<SidebarLink to="/dashboard" icon="dashboard-icon">Dashboard</SidebarLink>
+		<SidebarLink to="/about" icon="about-us-icon">About</SidebarLink>
+		<SidebarLink to="/feedback" icon="feedback-icon">Feedback</SidebarLink>
+		<SidebarLink to="/login" icon="login-icon">Login</SidebarLink>
+		<SidebarLink v-if="isLoggedIn" to="/profile" icon="profile-icon">Profile</SidebarLink>
+
+		<span class="collapse-icon" :class="{'rotate-180': collapsed}" @click="toggleSideBar">
+			<Svg name="double-arrow" class="sidebar-c-icon"/>
+		</span>
+
+	</div>
+</template>
+
+
 <script>
 import { collapsed, toggleSideBar, sidebarWidth } from "@/components/shared/sidebar/state.js";
 import SidebarLink from "@/components/shared/sidebar/SidebarLink.vue";
 import Svg from "@/assets/Svg.vue";
+import {ref} from "vue";
 
 export default {
 	components: {Svg, SidebarLink},
 	props: {},
 	setup() {
+		const isLoggedIn = ref(false);
+
 		const handleClickOutside = (event) => {
 			const sidebar = document.querySelector('.sidebar');
 			if (sidebar && !sidebar.contains(event.target)) {
 				collapsed.value = true; // Collapse the sidebar
 			}
 		}
-
 		document.addEventListener('click', handleClickOutside);
-
 		const beforeUnmount = () => {
 			document.removeEventListener('click', handleClickOutside);
 		};
-
-		return { collapsed, toggleSideBar, sidebarWidth, beforeUnmount };
+		return { collapsed, toggleSideBar, sidebarWidth, beforeUnmount, isLoggedIn };
 	}
 }
 </script>
 
 
-<template>
-	<div class="sidebar" :style="{width: sidebarWidth}">
-
-		<SidebarLink to="/" icon="home-icon">Home</SidebarLink>
-		<SidebarLink to="/dashboard" icon="dashboard-icon">Dashboard</SidebarLink>
-		<SidebarLink to="/about" icon="about-us-icon">About</SidebarLink>
-		<SidebarLink to="/feedback" icon="feedback-icon">Feedback</SidebarLink>
-		<SidebarLink to="/login" icon="login-icon">Login</SidebarLink>
-		<SidebarLink to="/profile" icon="profile-icon">Profile</SidebarLink>
-
-		<span class="collapse-icon" :class="{'rotate-180': collapsed}" @click="toggleSideBar">
-			<Svg name="double-arrow" class="sidebar-c-icon"/>
-		</span>
-
-	</div>
-</template>
-
-
-
 <style>
-:root{
-	--sidebar-bd-color: #242F40;
-	--sidebar-item-hover: #CCA43B;
-	--sidebar-item-active: #CCA43B;
-}
+
 </style>
 <style scoped>
 .sidebar{
-	color: white;
+	color: var(--text-light-color);
 	background-color: var(--sidebar-bd-color);
-
 	float: left;
 	position: fixed;
 	z-index: 1;
@@ -64,14 +58,11 @@ export default {
 	left: 0;
 	bottom: 0;
 	padding: 0.5rem;
-
 	transition: 0.25s ease;
-
 	display: flex;
 	flex-direction: column;
 	margin-left: -38px;
 }
-
 .collapse-icon{
 	position: absolute;
 	bottom: 0;
@@ -82,7 +73,6 @@ export default {
 	height: 30px;
 	width: 30px;
 }
-
 .rotate-180{
 	transform: rotate(180deg);
 	transition: 0.2s linear;
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/sidebar/SidebarLink.vue b/FullstackProsjekt/src/frontend/src/components/shared/sidebar/SidebarLink.vue
index bb2a30fabd77709f336592c6f830e9ff5d046dbc..4d6b8556a7d723e7087e207fd710813dfcf340bd 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/sidebar/SidebarLink.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/sidebar/SidebarLink.vue
@@ -1,3 +1,17 @@
+<template>
+	<router-link :to="to" class="link" :class="{ active: isActive }">
+		<div class="icon-wrapper" v-if="collapsed">
+			<Svg :name="icon" class="icon" />
+		</div>
+		<Transition name="fade">
+      <span v-if="!collapsed" class="link-content">
+        <Svg :name="icon" class="icon" />
+        <slot />
+      </span>
+		</Transition>
+	</router-link>
+</template>
+
 <script>
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
@@ -18,32 +32,16 @@ export default {
 }
 </script>
 
-<template>
-	<router-link :to="to" class="link" :class="{ active: isActive }">
-		<div class="icon-wrapper" v-if="collapsed">
-			<Svg :name="icon" class="icon" />
-		</div>
-		<Transition name="fade">
-      <span v-if="!collapsed" class="link-content">
-        <Svg :name="icon" class="icon" />
-        <slot />
-      </span>
-		</Transition>
-	</router-link>
-</template>
-
 <style scoped>
 .fade-enter-active,
 .fade-leave-active {
 	transition: opacity 0.1ms ease;
 }
-
 .fade-enter,
 .fade-leave-to {
 	transform: translateX(20px);
 	opacity: 0;
 }
-
 .link {
 	font-weight: 400;
 	padding: 0.2em;
@@ -53,22 +51,18 @@ export default {
 	text-decoration: none;
 	margin: 1px;
 }
-
 .link:hover {
 	background-color: var(--sidebar-item-hover);
 }
-
 .link.active {
 	background-color: var(--sidebar-item-active);
 	color: #242f40;
 }
-
 .icon {
 	width: 2.2em;
 	height: 2.2em;
 	margin-right: 1vh;
 }
-
 .link-content {
 	display: flex;
 	align-items: center;
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/sidebar/state.js b/FullstackProsjekt/src/frontend/src/components/shared/sidebar/state.js
index 8c0f7d43c12dc16a7d6b12a9bc855c1fa2bed5cd..1a415a27ffe8f707a6e836ee416cee6262011c2c 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/sidebar/state.js
+++ b/FullstackProsjekt/src/frontend/src/components/shared/sidebar/state.js
@@ -1,9 +1,7 @@
-
 import {ref, computed} from 'vue'
 
 export const collapsed = ref(true)
 export const toggleSideBar = () => (collapsed.value = !collapsed.value)
-
 export const SIDEBAR_WIDTH = 180
 export const SIDEBAR_WIDTH_COLLAPSED = 80 //38
 export const sidebarWidth = computed(
diff --git a/FullstackProsjekt/src/frontend/src/models/quiz.js b/FullstackProsjekt/src/frontend/src/models/quiz.js
index 8099a99587f29816a631ee5be2a5c52586cb9ce7..d83893d032790a3c7fb85b621ba26b68ebde3566 100644
--- a/FullstackProsjekt/src/frontend/src/models/quiz.js
+++ b/FullstackProsjekt/src/frontend/src/models/quiz.js
@@ -1,16 +1,12 @@
 export default class Quiz {
-    constructor(quizId, title, creatorId, questions, category, difficulty) {
+    constructor(quizId, title, creatorId, category, difficulty) {
         this.quizId = quizId;
         this.title = title;
         this.creatorId = creatorId;
-        this.questions = questions;
         this.category = category;
         this.difficulty = difficulty;
     }
 
-
-
-
 }
 
 /**
diff --git a/FullstackProsjekt/src/frontend/src/router/index.js b/FullstackProsjekt/src/frontend/src/router/index.js
index 97567eafea7dcfd2b37885eea3873ac727f902c0..2b39d738e96089e3f5f5576e1161010ff8207200 100644
--- a/FullstackProsjekt/src/frontend/src/router/index.js
+++ b/FullstackProsjekt/src/frontend/src/router/index.js
@@ -1,6 +1,8 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import EditQuizView from "@/components/shared/create-quiz/EditQuizView.vue";
+import PlayQuizView from "@/views/PlayQuizView.vue";
+import CreateQuizView from "@/components/shared/create-quiz/CreateQuizView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -35,20 +37,20 @@ const router = createRouter({
     name: 'signup',
     component: () => import('../views/SignupView.vue')
     },
+    {
+      path: '/createQuiz',
+      name: 'create Quiz',
+      component: CreateQuizView
+    },
     {
       path: '/overviewQuiz',
       name: 'overview Quiz',
       component: () => import('../views/OverviewQuizView.vue')
     },
-    {
-      path: '/create-quiz',
-      name: 'create Quiz',
-      component: () => import('../components/shared/create-quiz/CreateQuizView.vue')
-    },
     {
       path: '/play-quiz/:quizId',
       name: 'playQuiz',
-      component: () => import('../views/PlayQuizView.vue'),
+      component: PlayQuizView,
       params: true
     },
     {
@@ -61,7 +63,7 @@ const router = createRouter({
       path: '/profile',
       name: 'profile',
       component: () => import('../views/ProfileView.vue')
-    },
+    }
   ]
 })
 
diff --git a/FullstackProsjekt/src/frontend/src/views/AboutView.vue b/FullstackProsjekt/src/frontend/src/views/AboutView.vue
index 909d494df9e140d992e835bf0e304dedcffedf29..2bdbaf6e7131c451c9aff2be4af512bd362987cf 100644
--- a/FullstackProsjekt/src/frontend/src/views/AboutView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/AboutView.vue
@@ -4,30 +4,29 @@
 		<h1>About</h1>
 		<p>Welcome to our quiz web application! We provide a comprehensive and user-friendly platform for creating, managing, and taking quizzes for educational, training, or entertainment purposes.</p>
 		<div class="space"> </div>
-		<h2>Our Features</h2>
+	</div>
+
+	<div>
 		<div class="columns">
+			<h2>Our Features</h2>
+
 			<div class="column">
 				<ul>
-					<li>Quiz Creation: Create quizzes with various question types, difficulty levels, and multimedia elements.</li>
-					<li>Tagging and Categorization: Organize your questions with difficulty level and categories.</li>
-					<li>Search and Filter: Quickly find relevant questions based on categories and difficulty levels.</li>
-					<li>Question Management: Add, edit, delete, and organize questions within quizzes.</li>
-				</ul>
-			</div>
-			<div class="column">
-				<ul>
-					<li>Quiz Templates: Use pre-designed or customizable templates for easy quiz creation.</li>
-					<li>Import and Export: Import questions from external sources and export quizzes in various formats.</li>
-					<li>Scoring and Feedback: Automatically score quizzes and provide immediate feedback.</li>
-					<li>Progress Tracking: Track your progress, view past quiz attempts, and monitor performance statistics.</li>
-					<li>Feedback and Support: Provide feedback, report issues, and access customer support.</li>
+					<li><strong>Quiz Creation:</strong> Create quizzes with various question types, difficulty levels, and multimedia elements.</li>
+					<li><strong>Tagging and Categorization:</strong> Organize your questions with difficulty level and categories.</li>
+					<li><strong>Search and Filter:</strong> Quickly find relevant questions based on categories and difficulty levels.</li>
+					<li><strong>Question Management:</strong> Add, edit, delete, and organize questions within quizzes.</li>
+					<li><strong>Quiz Templates:</strong> Use pre-designed or customizable templates for easy quiz creation.</li>
+					<li><strong>Import and Export:</strong> Import questions from external sources and export quizzes in various formats.</li>
+					<li><strong>Scoring and Feedback:</strong> Automatically score quizzes and provide immediate feedback.</li>
+					<li><strong>Progress Tracking:</strong> Track your progress, view past quiz attempts, and monitor performance statistics.</li>
+					<li><strong>Feedback and Support:</strong> Provide feedback, report issues, and access customer support.</li>
 				</ul>
 			</div>
 		</div>
 	</div>
 
 
-
 	<h1 class ="our-team" style="text-align:center">Our Team</h1>
 	<div class="row">
 		<div class="column">
@@ -38,7 +37,6 @@
 					<p class="title">Developer</p>
 					<p>2 year Bachelor in Computer Science at NTNU Trondheim </p>
 					<p>torbjorn@ntnu.no</p>
-					<p><button class="button">Contact</button></p>
 				</div>
 			</div>
 		</div>
@@ -51,7 +49,6 @@
 					<p class="title">Developer</p>
 					<p>2 year Bachelor in Computer Science at NTNU Trondheim</p>
 					<p>heine@ntnu.no</p>
-					<p><button class="button">Contact</button></p>
 				</div>
 			</div>
 		</div>
@@ -65,7 +62,6 @@
 					<p class="title">Developer</p>
 					<p>2 year Bachelor in Computer Science at NTNU Trondheim</p>
 					<p>kristiane@ntnu.no</p>
-					<p><button class="button">Contact</button></p>
 				</div>
 			</div>
 		</div>
@@ -78,7 +74,6 @@
 					<p class="title">Developer</p>
 					<p>2 year Bachelor in Computer Science at NTNU Trondheim</p>
 					<p>madelesj@ntnu.no</p>
-					<p><button class="button">Contact</button></p>
 				</div>
 			</div>
 		</div>
@@ -87,23 +82,31 @@
 	</body>
 </template>
 
+
 <script>
 export default {
 	name: 'About',
 };
 </script>
 
+
 <style>
+.about-section {
+	background-image: linear-gradient(rgba(4,9,30,0.7), rgba(4,9,30,0.7)),url("@/components/photos/wheel-backdrop.png");
+	padding: 20px;
+}
 .columns {
 	display: flex;
 	justify-content: space-between;
+	margin: 10vh;
+}
+.column ul li {
+	margin-bottom: 20px;
 }
-
 .column {
 	flex: 1;
 	margin-right: 20px;
 }
-
 .column p{
 	font-size: 14px;
 }
@@ -113,48 +116,27 @@ p {
 li{
 	font-size: 16px;
 }
-
 .card {
 	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-	margin: 8px;
+	margin: 8px auto;
+	padding: 10px;
+	max-width: 400px;
 }
-
 .about-section {
 	padding: 10vh 10vh 10vh 10vh;
 	text-align: center;
-	background-color: #858A93;
-	color: #242F40;
+	color: var(--text-light-color);
 }
 .our-team{
-	color: #242F40;
+	color: var(--sidebar-bd-color);
 }
-
 .container {
 	padding: 0 16px;
-	color: #242F40;
+	color: var(--sidebar-bd-color);
 }
-
 .title {
 	color: grey;
 }
-
-.button {
-	border: none;
-	outline: 0;
-	display: inline-block;
-	padding: 8px;
-	color: white;
-	background-color: #363636;
-	text-align: center;
-	cursor: pointer;
-	width: 100%;
-	font-family: monospace;
-}
-
-.button:hover {
-	background-color: #555;
-}
-
 #logo{
 	width: 100%;
 }
@@ -163,6 +145,7 @@ li{
 	.column {
 		width: 100%;
 		display: block;
+		max-width: 100%;
 	}
 }
 </style>
diff --git a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
index 82e4701518389e7a65c80c33bbb59ea567dc8014..b383a4e48fc83b01fec84170ffa0a7e02b607043 100644
--- a/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/DashboardView.vue
@@ -1,89 +1,77 @@
-<script >
-	import { apiClient } from "@/api.js";
-	import router from "@/router/index.js";
-	import Svg from "@/assets/Svg.vue";
-	import { categoryEnums } from "@/data/categories.js";
-
-	export default {
-	components: { Svg },
-	props: {
-	quizId: {
-	type: Number,
-	required: true,
-},
-},
-	data() {
-	return {
-    quizList: []
-  };
-},
-	mounted() {
-	this.getQuiz();
-},
-	methods: {
-	async getQuiz() {
-	try {
-    const response = await apiClient.get('/quiz/');
-    this.quizList = response.data;
-
-    console.log(this.quizList[0])
-  } catch (error) {
-    // TODO: Proper error handling
-    console.error('Error retrieving quiz:', error);
-  }
-},
-	getIcon(category) {
-	// Check if the category exists in the enum
-	if (categoryEnums.includes(category)) {
-	// Retrieve the icon name from the mapping
-	return categoryIcons[category] || categoryIcons.Default;
-} else {
-	// If category not found, return the default icon
-	return categoryIcons.Default;
-}
-},
-	playQuiz(id) {
-    console.log(id)
-	router.push({ name: 'playQuiz', params: { quizId: id } });
-},
-},
-};
-</script>
-
-
 <template>
-	<body class="dashboard">
-	<div class="top-bar">
+	<body>
+	<div class="dashboard">
+		<div class="top-bar">
+			<router-link to="/" ><Svg name="go-back-icon" class="go-back-icon"/></router-link>
+
+			<div class="search-container">
+				<input class="searchBox" v-model="searchTerm" placeholder="Search for category...">
+			</div>
 
-		<div class="search-container">
-			<input class="searchBox" placeholder="Search for category...">
-		</div> <br>
-		<div class="create-container">
-			<router-link to="/overviewQuiz" class="create-btn">YOUR QUIZES</router-link>
+			<div class="create-container">
+				<router-link to="/overviewQuiz" class="add-Btn">YOUR QUIZZES</router-link>
+			</div>
 		</div>
 
-	</div>
 		<div class="row">
-      <div class="quiz-list">
-        <div class="quiz-col" v-for="quiz in quizList" :key="quiz.id">
-          <div class="quiz-header">
-            <h3>{{ quiz.title }}</h3>
-          </div>
-          <div class="quiz-body">
-            <p>Difficulty level: {{ quiz.difficulty }}</p>
-            <p>Category: {{ quiz.category }}</p>
-          </div>
-          <div class="quiz-footer">
-            <button @click="playQuiz(quiz.id)" class="play-btn">Play</button>
-          </div>
-        </div>
-      </div>
+			<div class="quiz-list">
+				<div class="quiz-col" v-for="quiz in filteredQuizList" :key="quiz.id">
+					<div class="quiz-header">
+						<h3>{{ quiz.title }}</h3>
+					</div>
+					<div class="quiz-body">
+						<p>Difficulty level: {{ quiz.difficulty }}</p>
+						<p>Category: {{ quiz.category }}</p>
+					</div>
+					<div class="quiz-footer">
+						<button @click="playQuiz(quiz.id)" class="play-btn">Play</button>
+					</div>
+				</div>
+			</div>
 		</div>
-
+	</div>
 	</body>
 </template>
 
 
+<script>
+import { apiClient } from "@/api.js";
+import router from "@/router/index.js";
+import Svg from "@/assets/Svg.vue";
+
+export default {
+	components: {Svg},
+	data() {
+		return {
+			quizList: [],
+			searchTerm: ''
+		};
+	},
+	mounted() {
+		this.getQuiz();
+	},
+	methods: {
+		async getQuiz() {
+			try {
+				const response = await apiClient.get('/quiz/');
+				this.quizList = response.data;
+			} catch (error) {
+				console.error('Error retrieving quiz:', error);
+			}
+		},
+		playQuiz(id) {
+			router.push({ name: 'playQuiz', params: { quizId: id } });
+		}
+	},
+	computed: {
+		filteredQuizList() {
+			return this.quizList.filter(quiz => quiz.category.toLowerCase().includes(this.searchTerm.toLowerCase()));
+		}
+	}
+};
+</script>
+
+
 <style>
 .dashboard{
 	padding: 20px;
@@ -92,47 +80,32 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	margin-bottom: 20px;
+	margin-bottom: 10vh;
+	margin-top: 4vh;
+}
+.go-back-icon{
+	margin-left: 1px;
 }
 .search-container {
-	flex-grow: 1; /* Grow to take available space */
-	margin-right: 10px; /* Adjust margin between search box and button */
+	flex-grow: 1;
 }
-
 .create-container {
-	flex-shrink: 0; /* Do not shrink */
+	flex-shrink: 0;
 }
-.searchBox{
+.searchBox {
 	width: 250px;
 	padding: 10px;
-	margin: 0 auto; /* Center horizontally */
+	margin: 0 auto;
 	display: block;
 	text-align: center;
 }
-
-.quiz-col{
+.quiz-col {
 	flex-basis: 31%;
 	background: #d7d7d7;
 	border-radius: 10px;
 	margin-bottom: 5%;
 	padding: 20px;
 	box-sizing: border-box;
-	transition: 0.5s;}
-
-.create-btn{
-	text-decoration: none;
-	color: #E5E5E5;
-	padding: 12px 34px;
-	font-size: 16px;
-	cursor: pointer;
-	margin-bottom: 60px;
-	background-color: #242F40;
-}
-.create-btn:hover{
-	border: 1px solid #CCA43B;
-	color: #242F40;
-	background: #CCA43B;
-	transition: 1s;
+	transition: 0.5s;
 }
-
 </style>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue b/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
index 5e3935d81fbe65909856f6499db0321194e77c8d..6772184191eb218edd1ee13de1dcabe20d577375 100644
--- a/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
@@ -1,3 +1,36 @@
+<template>
+	<body>
+		<div class="feedback-page">
+			<form @submit.prevent="handleSubmit">
+				<div class="feedback">
+					<h1>Feedback</h1>
+					<p>Is there anything you would like to tell us? Comment below!</p>
+					<div class="contactBox">
+						<label>Name</label> <br>
+						<input class="feedback-input" type="text" required v-model="name" ref="nameInput"/> <br>
+						<label>Email</label> <br>
+						<input class="feedback-input" type="email" required v-model="email" ref="emailInput"/>
+
+						<br>
+						<br>
+						<br>
+						<br>
+
+						<label>Title</label> <br>
+						<input class="feedback-input" type="text" required v-model="title" ref="title"/> <br>
+						<textarea class="comment" required v-model="comment" placeholder="Tell us whats on your mind!" ref="commentInput"></textarea>
+					</div>
+				</div>
+
+				<div class="submit-section">
+					<input class="submit-btn" type="submit"/>
+				</div>
+
+			</form>
+		</div>
+	</body>
+</template>
+
 
 <script>
 import Svg from "@/assets/Svg.vue";
@@ -41,7 +74,6 @@ export default {
 		}
 	},
 	mounted() {
-		// Restore form data from local storage
 		const formData = JSON.parse(localStorage.getItem('feedbackForm'));
 		if (formData) {
 			this.name = formData.name;
@@ -54,40 +86,6 @@ export default {
 </script>
 
 
-<template>
-	<body>
-		<div class="feedback-page">
-			<form @submit.prevent="handleSubmit">
-				<div class="feedback">
-					<h1>Feedback</h1>
-					<p>Is there anything you would like to tell us? Comment below!</p>
-					<div class="contactBox">
-						<label>Name</label> <br>
-						<input class="feedback-input" type="text" required v-model="name" ref="nameInput"/> <br>
-						<label>Email</label> <br>
-						<input class="feedback-input" type="email" required v-model="email" ref="emailInput"/>
-
-						<br>
-						<br>
-						<br>
-						<br>
-
-						<label>Title</label> <br>
-						<input class="feedback-input" type="text" required v-model="title" ref="title"/> <br>
-						<textarea class="comment" required v-model="comment" placeholder="Tell us whats on your mind!" ref="commentInput"></textarea>
-					</div>
-				</div>
-
-				<div class="submit-section">
-					<input class="submit-btn" type="submit"/>
-				</div>
-
-			</form>
-		</div>
-	</body>
-</template>
-
-
 <style>
 .feedback-page{
 	padding: 10vh;
@@ -95,32 +93,28 @@ export default {
 	justify-content: center;
 	align-items: center;
 }
-
 .feedback {
 	text-align: center;
-	color: #242F40;
+	color: var(--text-dark-color);
 	border-color: transparent;
 	border-radius: 15px;
 	align-items: center;
 	border-style: solid;
 }
-
 .contactBox {
 	padding: 30px;
 }
 .feedback-input{
 	width: 50vh;
 }
-
 .comment {
 	padding: 8px;
 	border-radius: 5px;
 	border: none;
 	width: 50vh;
 	height: 15vh;
-	background-color: #E5E5E5;
+	background-color: var(--field-background);
 }
-
 .submit-section {
 	display: flex;
 	justify-content: center;
@@ -130,8 +124,7 @@ export default {
 	@media (max-width: 700px){
 		.feedback-input,
 		.comment {
-			width: 90%; /* Adjust the width to fit smaller screens */
+			width: 90%;
 		}
 	}
-
 </style>
diff --git a/FullstackProsjekt/src/frontend/src/views/LoginView.vue b/FullstackProsjekt/src/frontend/src/views/LoginView.vue
index 58971f1703ea4e835873536c823faef9cf2786d9..649cf886614c14c9f9e9c8ebe1d576f9c00372e4 100644
--- a/FullstackProsjekt/src/frontend/src/views/LoginView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/LoginView.vue
@@ -1,44 +1,3 @@
-<script>
-import Svg from "@/assets/Svg.vue";
-import {setToken} from "@/tokenController.js";
-import {apiClient} from "@/api.js";
-
-export default {
-	name: 'Login',
-	components: {Svg},
-	data() {
-		return {
-      username: '',
-			email: '',
-			password: '',
-			showPassword: false,
-      errorMsg: '',
-		}
-	},
-	methods: {
-		async handleSubmit() {
-      try {
-        await apiClient.post('/auth/login', {
-          username: this.username,
-          password: this.password
-        }).then(response => {
-					alert(this.username + " is now logged in!")
-          setToken(response.data.jwt); //TODO: check token name
-	        localStorage.setItem('username', this.username);
-	        this.$router.push('/profile');
-        });
-      } catch (error) {
-        //TODO: proper error handling
-        this.errorMsg = 'Error logging in, try again';
-      }
-		},
-		togglePasswordVisibility() {
-			this.showPassword = !this.showPassword;
-		}
-	}
-}
-</script>
-
 <template>
 	<body>
 	<div class="loginPage">
@@ -49,7 +8,7 @@ export default {
 
 				<div class="loginBox">
           <label>Username</label> <br>
-          <input type="text" required v-model="username" placeholder="Rizz_Dragon420"/> <br>
+          <input type="text" required v-model="username" placeholder="PartyDragon42"/> <br>
 
 					<label>Password</label> <br>
 					<div class="password-input">
@@ -73,6 +32,49 @@ export default {
 	</body>
 </template>
 
+
+<script>
+import Svg from "@/assets/Svg.vue";
+import {setToken} from "@/tokenController.js";
+import {apiClient} from "@/api.js";
+
+export default {
+	name: 'Login',
+	components: {Svg},
+	data() {
+		return {
+			username: '',
+			email: '',
+			password: '',
+			showPassword: false,
+			errorMsg: '',
+		}
+	},
+	methods: {
+		async handleSubmit() {
+			try {
+				await apiClient.post('/auth/login', {
+					username: this.username,
+					password: this.password
+				}).then(response => {
+					alert(this.username + " is now logged in!")
+					setToken(response.data.jwt); //TODO: check token name
+					localStorage.setItem('username', this.username);
+					this.$router.push('/profile');
+				});
+			} catch (error) {
+				//TODO: proper error handling
+				this.errorMsg = 'Error logging in, try again';
+			}
+		},
+		togglePasswordVisibility() {
+			this.showPassword = !this.showPassword;
+		}
+	}
+}
+</script>
+
+
 <style>
 .loginPage {
 	padding-top: 85px;
@@ -80,7 +82,6 @@ export default {
 	justify-content: center;
 	align-items: center;
 }
-
 .login {
 	text-align: center;
 	padding: 20px;
@@ -90,18 +91,14 @@ export default {
 	margin: 20px;
 	max-width: 450px;
 }
-
 .loginBox {
 	padding: 40px;
 }
-
 .password-input {
 	position: relative;
 	display: inline-block;
 	min-width: 300px;
 }
-
-
 .showPasswordIcon {
 	position: absolute;
 	top: 50%;
@@ -112,16 +109,15 @@ export default {
 	cursor: pointer;
 }
 #signUpLink {
-	color: #CCA43B;
+	color: var(--option-color);
 	padding: 10px;
 	font-size: 16px;
 	text-decoration: none;
 }
 #signUpLink:hover{
-	color: #242F40;
+	color: var(--option-hover);
 	transition: 0.3s;
 }
-
 .submit-section {
 	display: flex;
 	justify-content: center;
@@ -129,8 +125,12 @@ export default {
 }
 
 @media (max-width: 700px) {
-
-
+	.login{
+		max-width: 300px;
+	}
+	.password-input{
+		min-width: 200px;
+	}
 }
 
 </style>
diff --git a/FullstackProsjekt/src/frontend/src/views/NewQuizView.vue b/FullstackProsjekt/src/frontend/src/views/NewQuizView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e4c73e449142e90769b2bc76ee74a32a3e149faa
--- /dev/null
+++ b/FullstackProsjekt/src/frontend/src/views/NewQuizView.vue
@@ -0,0 +1,120 @@
+<script>
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import router from "@/router/index.js";
+import {apiClient} from "@/api.js";
+import {getIdByToken} from "@/tokenController.js";
+import {categoryEnums} from "@/data/categories.js"
+import {difficultyEnums} from "@/data/difficulties.js";
+
+//like editquiz, but w/o questions, redirect to edit when quiz is constructed
+
+export default {
+  data() {
+    return {
+      showNewQuestion: false,
+      creatorId: null,
+      quiz: null,
+      quizId: null,
+      quizTitle: '',
+      questions: [],
+      category: '',
+      difficulty: '',
+      errorMsg: '',
+      selectedCategory: null,
+      categories: categoryEnums,
+      selectedDifficulty: null,
+      difficulties: difficultyEnums,
+      //TODO: make quiz object
+    };
+  },
+  mounted() {
+    this.getUser();
+  },
+  methods: {
+    async constructQuiz() {
+      try {
+        await apiClient.post('quiz/create', {
+          title: this.quizTitle,
+          questionIds: this.questions,
+          creatorId: this.creatorId,
+          category: this.selectedCategory,
+          difficulty: this.selectedDifficulty
+        }).then(response => {
+          this.quizId = JSON.parse(response.data.id);
+          router.push({name: 'editQuiz', params: {quizId: this.quizId}});
+        })
+      } catch(error){
+        this.errorMsg = 'Cannot construct quiz';
+      }
+    },
+    getUser() {
+      this.creatorId = getIdByToken();
+    }
+  },
+}
+</script>
+
+<template>
+	<body>
+	<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>
+.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;
+}
+
+.footer{
+	margin: 10vh;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+}
+
+</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 2132700773a2c7f725693d6cf702e6a600d0738b..bd3353a3973e7b839a24acc59d6957d09f4d96b0 100644
--- a/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/OverviewQuizView.vue
@@ -1,15 +1,12 @@
 <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>
-	      <router-link to="/create-quiz" class="add-Btn">New quiz</router-link>
-      </div>
+	    <router-link to="/dashboard" ><Svg name="go-back-icon" class="go-back-icon"/></router-link>
+	    <h1>Your quizzes</h1>
+	    <router-link to="/create-quiz" class="add-Btn">Create new quiz</router-link>
+    </div>
+		<p>Play, edit or delete a quiz saved from your profile</p>
 
 		<div class="row">
       <div class="quiz-div">
@@ -25,9 +22,11 @@
 import QuizCard from "@/components/shared/create-quiz/QuizCard.vue";
 import {getIdByToken} from "@/tokenController.js";
 import {apiClient} from "@/api.js";
+import Svg from "@/assets/Svg.vue";
 
 export default {
 	components: {
+		Svg,
     QuizCard,
   },
 	data() {
@@ -38,22 +37,21 @@ export default {
 		};
 	},
   mounted() {
-    this.populateQuizzes(); // Call populateQuizzes directly
+    this.populateQuizzes();
   },
   methods: {
     async populateQuizzes() {
       try {
-        await this.setUserId(); // Wait for setUserId to complete before fetching quizzes
+        await this.setUserId();
         const response = await apiClient.get('/quiz/creator/' + this.userId);
         this.quizList = response.data;
         this.quizNo = this.quizList.length;
       } catch (error) {
-        // Handle errors
         this.errorMsg = 'Error retrieving quizzes';
       }
     },
     async setUserId() {
-      this.userId = await getIdByToken(); // Wait for getIdByToken() to resolve before assigning to this.userId
+      this.userId = await getIdByToken();
     }
 	}
 }
@@ -63,7 +61,15 @@ export default {
 .overViewQuestion-page{
 	padding: 40px;
 }
-
+.headerDiv {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 8vh;
+}
+.go-back-icon{
+	margin-left: 1px;
+}
 .quiz-div {
   display: flex;
   flex-wrap: wrap;
@@ -71,12 +77,4 @@ export default {
   float: left;
   box-sizing: border-box;
 }
-
-.headerDiv {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-}
-
-
 </style>
\ No newline at end of file
diff --git a/FullstackProsjekt/src/frontend/src/views/PlayQuizView.vue b/FullstackProsjekt/src/frontend/src/views/PlayQuizView.vue
index 2ec7c476d8a358f9aff4ffe6da537206d7cd02bf..78e6adf9bb94ba1e4c6274544a3e786faafbdb48 100644
--- a/FullstackProsjekt/src/frontend/src/views/PlayQuizView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/PlayQuizView.vue
@@ -1,9 +1,172 @@
-<script >
+<script>
+import QuizResult from "@/components/shared/PlayQuiz/QuizResult.vue";
+import {getIdByToken} from "@/tokenController.js";
+import {apiClient} from "@/api.js";
+
+export default {
+  data() {
+    return {
+      currentQuestion: null,
+      quizResult: null,
+      currentQuestionIndex: 0,//set to null
+      userId: 0, //set to null
+      quizId: 0,  //set to null
+      quizTitle: 'Quiz title',
+      selectedOption: '',
+      questions: [],
+      currentQuestionText: '',
+      currentQuestionId: null,
+      currentAnswers: [],
+      quizResultId: 0,
+      errorMsg: '',
+    }
+  },
+  beforeMount() {
+    this.getUser();
+  },
+  async mounted() {
+    await this.getUser();
+    await this.setup();
+    this.getQuestions();
+    this.getQuiz();
+    this.setCurrentQuestion();
+
+  },
+  methods: {
+    async setup(){
+      //TODO: QuizResultService
+      this.quizId = this.$route.params.quizId;
+      const data = {
+        quizId: this.quizId,
+        userId: this.userId
+      }
+      console.log(data)
+      try {
+        await apiClient.post('/results/create', data)//TODO: set QuizResultServiceId
+      } catch (error) {
+        this.errorMsg = 'Error starting quiz';
+      }
+    },
+    async getUser() {
+      this.userId = await getIdByToken();
+    },
+    getQuiz() {
+      try {
+        apiClient.get('/quiz/quiz/' + this.quizId).then(response => {
+          this.quizTitle = response.data.questions;
+        });
+      } catch (error) {
+        this.errorMsg = 'Error retrieving quiz';
+      }
+    },
+    getQuestions(quizId) {
+      //TODO: use method to fetch questions
+      try {
+        apiClient.get('/questions/allQuestionsToAQuiz/' + this.quizId).then(response => {
+          this.questionIds = response.data;
+        });
+        console.log(this.questionIds[0])
+      } catch (error) {
+        this.errorMsg = 'Error retrieving questions';
+      }
+    },
+    getSampleQuestions() {
+      const quest = {
+        id: 0,
+        questionText: "question " + -1,
+        options: ["ans1","ans2", "ansThree"],
+      }
+      this.questions.push(quest);
+      for(let i=0; i<4; i++){
+        const question = {
+          id: i,
+          questionText: "question " + i,
+          options: ["ans1","ans2"]
+        }
+        this.questions.push(question);
+        console.log(question.id);
+        console.log(this.questions.length);
+      }
+    },
+    async nextQuestion() {
+      if(!this.selectedOption) {
+        this.errorMsg = 'You must select an answer';
+      } else {
+        this.errorMsg = '';
+      }
+      console.log(this.selectedOption);
+
+
+      console.log(this.selectedOption);
+      try {
+        const data = {
+          id: this.quizId,
+          questionId: this.currentQuestionId,
+          givenAnswer: this.selectedOption,
+        }
+        console.log(data)
+        await apiClient.post('/questions/save', data)
+      } catch (error) {
+        this.errorMsg = 'Cannot submit question';
+      }
+      this.currentQuestionIndex++
+      this.setCurrentQuestion();
+
+    },
+    //setting current question, updating info
+    setCurrentQuestion() {
+      /*if(!this.questions.empty()){
+        this.currentQuestion = this.questions[this.currentQuestionIndex];
+      }*/ //for some reason this check messes up the app???
+      this.currentQuestion = this.questions[this.currentQuestionIndex];
+      //this.currentQuestionId = this.currentQuestion.id;
+      //this.currentQuestionText = this.currentQuestion.questionText;
+      //this.currentAnswers = this.currentQuestion.options;
+    },
+    setupMCQuestion(question) {
+      this.questionTitle = question.questionText;
+      this.currentAnswers = question.options;
+      this.currentCorrectAnswer = question.answer;
+    },
+    selectOption(option) {
+      this.selectedOption = option;
+      console.log(this.selectedOption);
+    }
+  }
+}
 </script>
 
 
 <template>
-
+  <div class="quiz">
+    <div id="quiz-info">
+      <h1 id="title">Play quiz</h1>
+    </div>
+
+    <div id="current-q" class="question">
+
+      <h3 v-if="currentQuestion">{{currentQuestionText}}</h3>
+      <ul>
+        <li v-for="(option, index) in currentAnswers" :key="index">
+          <label>{{ option }}</label>
+          <input type="radio" :id="option" :value="option" :checked="option === selectedOption" @change="selectOption(option)">
+        </li>
+        <!--
+        <li v-for="option in answersList">
+          <label>test label</label>-->
+        <!--
+        <input type="radio" :id="'option'" :value="option"
+               :checked="option === selectedOption">-->
+        <!--<label :for="'option'">option</label>-->
+
+      </ul>
+
+
+      <button @click="nextQuestion">Next Question</button>
+    </div>
+  </div>
+
+<!--
 	<body>
 
 	<div class="quiz">
@@ -43,7 +206,7 @@
 	</div>
 
 	</body>
-
+-->
 </template>
 
 <style>
diff --git a/FullstackProsjekt/src/frontend/src/views/ProfileView.vue b/FullstackProsjekt/src/frontend/src/views/ProfileView.vue
index 75267bc70a3d628fa9adc8bcb316f935a850ab0b..f40f30a9f3c31834e2d4fcb6a8da8b1a68a45bcc 100644
--- a/FullstackProsjekt/src/frontend/src/views/ProfileView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/ProfileView.vue
@@ -98,7 +98,6 @@ export default {
 					<h3>{{ attempt.quizTitle }}</h3>
 					<p>Score: {{ attempt.score }}</p>
 					<p>Date: {{ attempt.date }}</p>
-					<!-- Add more details about each quiz attempt as needed -->
 				</div>
 			</div>
 		</section>
@@ -133,69 +132,112 @@ export default {
 </template>
 
 
+<script>
+import Svg from "@/assets/Svg.vue";
+import Modal from "@/components/shared/modal/Modal.vue"
+import {ref} from 'vue'
+
+export default {
+	components: {Modal, Svg},
+	data() {
+		return {
+			userId: null,
+			quizList:[],
+			showModal: ref(false),
+			isLoggedIn: true,
+			user: {
+				username: '',
+			}
+		};
+	},
+	mounted() {
+		this.user.username = localStorage.getItem('username');
+		this.populateQuizzes();
+	},
+	computed: {
+		quizAttempts() {
+			return [
+				{ id: 1, quizTitle: 'Math Quiz', score: '80%', date: '2024-04-05' },
+				{ id: 2, quizTitle: 'Science Quiz', score: '90%', date: '2024-04-04' }
+			];
+		}
+	},
+	methods:{
+		logout(){
+			this.isLoggedIn = false;
+			this.$router.push('/login');
+		},
+		closeModal(){
+			this.showModal=false;
+		},
+		async populateQuizzes() {
+			try {
+				await this.setUserId();
+				const response = await apiClient.get('/quiz/creator/' + this.userId);
+				this.quizList = response.data;
+			} catch (error) {
+				console.error('Error retrieving quizzes:', error);
+			}
+		},
+		async setUserId() {
+			this.userId = await getIdByToken();
+		}
+	}
+};
+</script>
+
+
 <style scoped>
 .profile {
 	max-width: 800px;
 	margin: 0 auto;
 	padding: 30px;
 }
-
 .profile-pic{
 	height: 150px;
 	width: 150px;
 	margin-right: 5vh;
 }
-
 .user-info, .user-quizzes, .profile-options {
 	margin-bottom: 40px;
 }
-
 .user-details {
 	display: flex;
 	align-items: center;
 }
-
 .user-details div {
 	flex: 1;
 }
-
 .user-quizzes .quiz {
 	border: 1px solid #ccc;
-	background-color: #d7d7d7 ;
+	background-color: var(--field-placeholder) ;
 	border-radius: 5px;
 	padding: 10px;
 	margin-bottom: 10px;
 	cursor: pointer;
 }
-
 .profile-options ul {
 	list-style: none;
 	padding: 0;
 }
-
 .profile-options ul li {
 	margin-bottom: 10px;
 }
-
 .profile-options ul li a {
 	text-decoration: none;
-	color: #CCA43B;
+	color: var(--option-color);
 }
 .profile-options ul li a:hover{
-	color: #a2822e;
+	color: var(--option-hover);
 	text-decoration: underline;
 }
-
-
 .progress-tracking {
 	margin-bottom: 40px;
 }
-
 .progress-tracking .quiz-attempt {
 	border: 1px solid #ccc;
 	border-radius: 5px;
 	padding: 10px;
 	margin-bottom: 10px;
 }
-
 </style>
diff --git a/FullstackProsjekt/src/frontend/src/views/SignupView.vue b/FullstackProsjekt/src/frontend/src/views/SignupView.vue
index e5d314ded58cd9b2d042fbbb3a2c79f3b864beba..1883e5bcae0cb680bf6be70433ed82d470b4adfd 100644
--- a/FullstackProsjekt/src/frontend/src/views/SignupView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/SignupView.vue
@@ -1,45 +1,3 @@
-
-<script>
-	import Svg from '../assets/Svg.vue'
-  import {apiClient} from "@/api.js";
-	export default {
-		name: 'Register',
-		components: {Svg},
-		data(){
-			return{
-        username: '',
-				password:'',
-				password_confirm:'',
-        errorMsg: '', //TODO: display error to user
-				showPassword: false,
-			}
-		},
-		methods:{
-			async handleSubmit() {
-        //TODO: use interceptor to check matching password, send one password
-        try {
-          await apiClient.post('/auth/register', {
-            username: this.username,
-            password: this.password,
-          }).then(response => {
-            //TODO: display successful registration to user
-	          alert("User: " + this.username + " created!")
-            this.$router.push('/login')
-          });
-        } catch (error) {
-          //TODO: proper error handling
-          this.errorMsg = 'Error signing up, try again';
-        }
-			},
-			togglePasswordVisibility() {
-				this.showPassword = !this.showPassword;
-			},
-		}
-	}
-</script>
-
-
-
 <template>
 	<body>
 	<div class="signupPage">
@@ -84,6 +42,43 @@
 </template>
 
 
+<script>
+import Svg from '../assets/Svg.vue'
+import {apiClient} from "@/api.js";
+export default {
+	name: 'Register',
+	components: {Svg},
+	data(){
+		return{
+			username: '',
+			password:'',
+			password_confirm:'',
+			errorMsg: '',
+			showPassword: false,
+		}
+	},
+	methods:{
+		async handleSubmit() {
+			try {
+				await apiClient.post('/auth/register', {
+					username: this.username,
+					password: this.password,
+				}).then(response => {
+					alert("User: " + this.username + " created!")
+					this.$router.push('/login')
+				});
+			} catch (error) {
+				this.errorMsg = 'Error signing up, try again';
+			}
+		},
+		togglePasswordVisibility() {
+			this.showPassword = !this.showPassword;
+		},
+	}
+}
+</script>
+
+
 <style>
 .signupPage {
 	padding-top: 10vh;
@@ -91,7 +86,6 @@
 	justify-content: center;
 	align-items: center;
 }
-
 .signup {
 	text-align: center;
 	padding: 20px;
@@ -99,17 +93,14 @@
 	align-items: center;
 	border-style: solid;
 }
-
 .signupBox {
 	padding: 20px;
 }
-
 .password-input {
 	position: relative;
 	display: inline-block;
 	min-width: 300px;
 }
-
 .showPasswordIcon {
 	position: absolute;
 	top: 50%;
@@ -119,9 +110,7 @@
 	background: none;
 	cursor: pointer;
 }
-
 .submit-section{
 	margin-top: 5vh;
 }
-
 </style>