diff --git a/FullstackProsjekt/src/frontend/src/assets/main.css b/FullstackProsjekt/src/frontend/src/assets/main.css
index 644733515d45cb7e5086b4c47a8410d354db7bd4..1dfc827cd415c2e8dd5d4f92e865174378ff76fc 100644
--- a/FullstackProsjekt/src/frontend/src/assets/main.css
+++ b/FullstackProsjekt/src/frontend/src/assets/main.css
@@ -6,6 +6,7 @@
     --sidebar-item-active: #CCA43B;
 
     --field-placeholder: #b0b0b0;
+    --field-background: #E5E5E5;
     --card-background: #d7d7d7;
 
     --text-light-color: #d7d7d7;
@@ -19,7 +20,7 @@
     --safe-active: #425575;
 
     --option-color: #CCA43B;
-    --option-hover: #b2891b;
+    --option-hover: #eebf42;
     --option-active: #D9C590;
 }
 
@@ -179,7 +180,6 @@ select{
 }
 .submit-btn:hover{
     background-color: var(--option-hover);
-    color: var(--text-light-color);
 }
 .submit-btn:active{
     background-color: var(--option-active);
diff --git a/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue b/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
index 6d3ecb5bfdfff166c20cdce32e4843991bdbec77..2a28a34e4a0921861842b8cdcc0afd8643559cfa 100644
--- a/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
+++ b/FullstackProsjekt/src/frontend/src/components/TheWelcome.vue
@@ -80,7 +80,7 @@ export default {
 }
 .text-box{
 	width: 90%;
-	color: #fff;
+	color: var(--text-light-color);
 	position: absolute;
 	top: 50%;
 	left: 50%;
@@ -93,12 +93,12 @@ export default {
 .text-box p{
 	margin: 10px 0 40px;
 	font-size: 20px;
-	color: #fff;
+	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;
@@ -108,7 +108,7 @@ export default {
 }
 .hero-btn:hover{
 	border: 1px solid #CCA43B;
-	background: #CCA43B;
+	background: var(--option-hover);
 	transition: 1s;
 	color: #242F40;
 }
@@ -123,7 +123,7 @@ h1{
 	font-weight: 600;
 }
 p{
-	color: #0f1412;
+	color: var(--text-dark-color);
 	font-size: 16px;
 	font-weight: 300;
 	line-height: 22px;
@@ -145,12 +145,12 @@ h3{
 	padding: 100px 0;
 }
 .cta h1{
-	color: #F2F2F2;
+	color: var(--text-light-color);
 	margin-bottom: 40px;
 	padding: 0;
 }
 .footer {
-	background-color: #242F40;
+	background-color: var(--sidebar-bd-color);
 	padding: 10px 0;
 	text-align: center;
 }
@@ -173,7 +173,7 @@ h3{
 	margin-right: 0;
 }
 .footer ul li a {
-	color: #fff;
+	color: var(--text-light-color);
 	text-decoration: none;
 }
 .footer ul li a:hover {
diff --git a/FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue b/FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue
index 224aa8f3609a54a59e61b255eafe15b0b2ecb969..df220195220e063ba15d59ccbc22eaa594e4281a 100644
--- a/FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue
+++ b/FullstackProsjekt/src/frontend/src/components/shared/sidebar/Sidebar.vue
@@ -49,7 +49,7 @@ export default {
 </style>
 <style scoped>
 .sidebar{
-	color: white;
+	color: var(--text-light-color);
 	background-color: var(--sidebar-bd-color);
 	float: left;
 	position: fixed;
diff --git a/FullstackProsjekt/src/frontend/src/views/AboutView.vue b/FullstackProsjekt/src/frontend/src/views/AboutView.vue
index dae698f15d4a4bfb9b72244cb11fb47db6cbf5e0..2bdbaf6e7131c451c9aff2be4af512bd362987cf 100644
--- a/FullstackProsjekt/src/frontend/src/views/AboutView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/AboutView.vue
@@ -118,21 +118,21 @@ li{
 }
 .card {
 	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-	margin: 8px auto; /* Center the cards horizontally */
+	margin: 8px auto;
 	padding: 10px;
-	max-width: 400px; /* Adjust the maximum width of the card */
+	max-width: 400px;
 }
 .about-section {
 	padding: 10vh 10vh 10vh 10vh;
 	text-align: center;
-	color: #ffffff;
+	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;
diff --git a/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue b/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
index 6dddf29697557ae630d7328bb7d4a29791dd2b4d..6772184191eb218edd1ee13de1dcabe20d577375 100644
--- a/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/FeedbackView.vue
@@ -95,7 +95,7 @@ export default {
 }
 .feedback {
 	text-align: center;
-	color: #242F40;
+	color: var(--text-dark-color);
 	border-color: transparent;
 	border-radius: 15px;
 	align-items: center;
@@ -113,7 +113,7 @@ export default {
 	border: none;
 	width: 50vh;
 	height: 15vh;
-	background-color: #E5E5E5;
+	background-color: var(--field-background);
 }
 .submit-section {
 	display: flex;
diff --git a/FullstackProsjekt/src/frontend/src/views/LoginView.vue b/FullstackProsjekt/src/frontend/src/views/LoginView.vue
index c27e97017548472a59774577d39cd8bd9d8535f0..649cf886614c14c9f9e9c8ebe1d576f9c00372e4 100644
--- a/FullstackProsjekt/src/frontend/src/views/LoginView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/LoginView.vue
@@ -109,13 +109,13 @@ 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 {
diff --git a/FullstackProsjekt/src/frontend/src/views/ProfileView.vue b/FullstackProsjekt/src/frontend/src/views/ProfileView.vue
index 67049b128445ec83d07d85c19b1a9632cdd83e8d..63d772bbb72c9f85f19ae76708a8137447501d83 100644
--- a/FullstackProsjekt/src/frontend/src/views/ProfileView.vue
+++ b/FullstackProsjekt/src/frontend/src/views/ProfileView.vue
@@ -150,7 +150,7 @@ export default {
 }
 .user-quizzes .quiz {
 	border: 1px solid #ccc;
-	background-color: #d7d7d7 ;
+	background-color: var(--field-placeholder) ;
 	border-radius: 5px;
 	padding: 10px;
 	margin-bottom: 10px;
@@ -165,10 +165,10 @@ export default {
 }
 .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 {