diff --git a/src/components/BaseComponents/ColoredButton.vue b/src/components/BaseComponents/ColoredButton.vue
index 74091bb360a25e7d489994c4aded8e59544445e5..842c89e97c17bdc5bf5e35149be61c93449e45ed 100644
--- a/src/components/BaseComponents/ColoredButton.vue
+++ b/src/components/BaseComponents/ColoredButton.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+    class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light"
   >
     {{ text }}
   </button>
diff --git a/src/components/BaseComponents/CommunityHeader.vue b/src/components/BaseComponents/CommunityHeader.vue
index 6e2b31a722f7401e93c6d9d640ca911b85d1f251..9d36eafc7790593410c54a64a51c3406cb1eeed7 100644
--- a/src/components/BaseComponents/CommunityHeader.vue
+++ b/src/components/BaseComponents/CommunityHeader.vue
@@ -28,9 +28,25 @@
       </div>
     </div>
     <div>
-      <span class="hidden sm:block">
-        <!-- Legg dette til i button: v-if="adminStatus" -->
+      <!-- If the user is not a member in the community, this button will show -->
+      <div v-if="!member">
+        <ColoredButton
+          v-if="!member"
+          :text="'Bli med'"
+          @click="joinCommunity(community.communityId)"
+          class="m-2"
+        />
+
+        <CustomFooterModal
+          @close="this.dialogOpen = false"
+          :visible="dialogOpen"
+          title="Kan ikke bli med"
+          message="Logg inn først for å bli med i en gruppe."
+        />
+      </div>
 
+      <!-- If the user is member of the community, this hamburger menu will show -->
+      <div v-if="member">
         <svg
           @click="toggle"
           xmlns="http://www.w3.org/2000/svg"
@@ -53,21 +69,32 @@
           :community-i-d="community.communityId"
         />
         <!-- class="absolute" -->
-      </span>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import CommunityHamburger from "@/components/CommunityComponents/CommunityHamburger";
+import ColoredButton from "@/components/BaseComponents/ColoredButton";
+import {
+  JoinOpenCommunity,
+  GetIfUserAlreadyInCommunity,
+} from "@/utils/apiutil";
+import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal";
+
 export default {
   name: "CommunityHeader",
   components: {
     CommunityHamburger,
+    ColoredButton,
+    CustomFooterModal,
   },
   data() {
     return {
       hamburgerOpen: false,
+      dialogOpen: false,
+      member: true,
     };
   },
   props: {
@@ -82,6 +109,7 @@ export default {
     },
   },
   methods: {
+    //To open and close the hamburger menu
     toggle: function () {
       if (this.hamburgerOpen) {
         this.hamburgerOpen = false;
@@ -89,6 +117,26 @@ export default {
         this.hamburgerOpen = true;
       }
     },
+    joinCommunity: async function (id) {
+      const response = await JoinOpenCommunity(id);
+      if (response === "Login to join any community") {
+        this.dialogOpen = true;
+      } else {
+        window.location.reload();
+      }
+    },
+    getIfUserInCommunity: async function () {
+      try {
+        this.member = await GetIfUserAlreadyInCommunity(
+          this.$router.currentRoute.value.params.communityID
+        );
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+  beforeMount() {
+    this.getIfUserInCommunity();
   },
 };
 </script>
diff --git a/src/components/BaseComponents/CustomFooterModal.vue b/src/components/BaseComponents/CustomFooterModal.vue
index 8a6e57ca1707d02d53ab57a00b3c2626587f146d..e9b5467276a554a723968b7a48581428a9df78ea 100644
--- a/src/components/BaseComponents/CustomFooterModal.vue
+++ b/src/components/BaseComponents/CustomFooterModal.vue
@@ -2,7 +2,7 @@
   <!-- Main modal -->
   <div
     v-if="visible"
-    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full"
+    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto inset-0 h-full"
   >
     <div class="relative w-full h-full max-w-2xl p-4 md:h-auto">
       <!-- Modal content -->
diff --git a/src/components/BaseComponents/IconButton.vue b/src/components/BaseComponents/IconButton.vue
index 4bacbdf64c9f36c6ce5e9bc29146e24737f55ea4..973f04c78f374cdb6f8e728c59bd416d1aca4cf8 100644
--- a/src/components/BaseComponents/IconButton.vue
+++ b/src/components/BaseComponents/IconButton.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- Icon button -->
   <button
-    class="block w-fit text-white text-base bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+    class="block w-fit text-white text-base bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-dark"
   >
     <div class="flex flex-row px-5 py-2.5 h-10">
       <!-- Icon slot: Default content "Ban"-icon -->
diff --git a/src/components/BaseComponents/InputField.vue b/src/components/BaseComponents/InputField.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a6cbb32e98ed5e1f94ec9b784ea492b9b138048e
--- /dev/null
+++ b/src/components/BaseComponents/InputField.vue
@@ -0,0 +1,11 @@
+<template>
+  <input
+    class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
+  />
+</template>
+
+<script>
+export default {
+  name: "InputField",
+};
+</script>
diff --git a/src/components/BaseComponents/NavBar.vue b/src/components/BaseComponents/NavBar.vue
index a14c390128eea359968f895e823ecc620be36645..fd47bedcff48104aefc91e09887d6a00812006c3 100644
--- a/src/components/BaseComponents/NavBar.vue
+++ b/src/components/BaseComponents/NavBar.vue
@@ -1,6 +1,6 @@
 <template>
   <nav
-    class="flex items-center justify-between bg-white h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
+    class="flex items-center bg-white justify-between h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
   >
     <div class="logo">
       <img
diff --git a/src/components/BaseComponents/NotificationModal.vue b/src/components/BaseComponents/NotificationModal.vue
index 5883ed10714253ab7a6ffe1f0416c5af75f5166a..1fa362f504d38cb7380d0ad26a1f8316c74fe823 100644
--- a/src/components/BaseComponents/NotificationModal.vue
+++ b/src/components/BaseComponents/NotificationModal.vue
@@ -2,7 +2,7 @@
   <!-- Main modal -->
   <div
     v-if="visible"
-    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full"
+    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto inset-0 h-full"
   >
     <div class="relative w-full h-full max-w-2xl p-4 md:h-auto">
       <!-- Modal content -->
diff --git a/src/components/ChatComponents/ChatMessage.vue b/src/components/ChatComponents/ChatMessage.vue
index d3e016a3d4b947d0b90cedb3ea9e07093a47a206..d6996776b48e22224434b1696f64e2cdb5fa3aef 100644
--- a/src/components/ChatComponents/ChatMessage.vue
+++ b/src/components/ChatComponents/ChatMessage.vue
@@ -34,7 +34,9 @@ export default {
   methods: {
     color() {
       console.log(this.userID);
-      return this?.message.from == this.userID ? "bg-gray-300" : "bg-blue-600";
+      return this?.message.from == this.userID
+        ? "bg-gray-300"
+        : "bg-primary-medium";
     },
     textColor() {
       return this?.message.from == this.userID ? "text-gray-900" : "text-white";
diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue
index e6cf391a30732b1b29ac542848fe4cfac2c58b8c..04880338669831b083312a74b888a7743be0b069 100644
--- a/src/components/CommunityComponents/CommunityHome.vue
+++ b/src/components/CommunityComponents/CommunityHome.vue
@@ -23,7 +23,7 @@
       <input
         type="text"
         id="searchInput"
-        class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
+        class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
         placeholder="Search"
         v-model="search"
       />
diff --git a/src/components/CommunityComponents/CommunityListItem.vue b/src/components/CommunityComponents/CommunityListItem.vue
index d75938f456c1ed61aad0ebc89db8e04a2282bc2f..28e910a7c60693985ec5fdcb9fc49b6a6e7aad6d 100644
--- a/src/components/CommunityComponents/CommunityListItem.vue
+++ b/src/components/CommunityComponents/CommunityListItem.vue
@@ -6,16 +6,36 @@
     :message="community.description"
   >
     <div class="flex justify-center p-2">
+      <!-- If a user is not a member in the community, this button will show -->
       <ColoredButton
         v-if="!member"
         :text="'Bli med'"
         @click="goToJoin(community.communityId)"
+        class="m-2"
       />
+
+      <!-- If a user is member this button will show -->
       <ColoredButton
         v-if="member"
         :text="'GÃ¥ til'"
         @click="goToGroup(community.communityId)"
+        class="m-2"
       />
+
+      <!-- If a user isn't member but the community is open, the user is able to get in to see listings(items) -->
+      <ColoredButton
+        v-if="!member && community.visibility === 1"
+        :text="'GÃ¥ til'"
+        @click="goToGroup(community.communityId)"
+        class="m-2"
+      />
+    </div>
+
+    <!-- If a user is not logges in and tries to join a community, this message shows -->
+    <div class="flex justify-center p-2">
+      <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+        {{ responseToUser }}
+      </p>
     </div>
   </CustomFooterModal>
   <div
@@ -44,6 +64,7 @@
 import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal.vue";
 import ColoredButton from "@/components/BaseComponents/ColoredButton.vue";
 import { UserGroupIcon, LockClosedIcon } from "@heroicons/vue/outline";
+import { JoinOpenCommunity } from "@/utils/apiutil";
 
 export default {
   name: "CommunityListItem",
@@ -56,6 +77,7 @@ export default {
   data() {
     return {
       dialogOpen: false,
+      responseToUser: "",
     };
   },
   props: {
@@ -66,8 +88,13 @@ export default {
     goToGroup(id) {
       this.$router.push("/community/" + id);
     },
-    goToJoin(id) {
-      this.$router.push("/community/" + id + "/join");
+    async goToJoin(id) {
+      const response = await JoinOpenCommunity(id);
+      if (response === "Login to join any community") {
+        this.responseToUser = "Logg inn først for å bli med i en gruppe";
+      } else {
+        this.$router.push("/community/" + id);
+      }
     },
     toggleDialog() {
       this.dialogOpen = !this.dialogOpen;
diff --git a/src/components/CommunityComponents/ItemCard.vue b/src/components/CommunityComponents/ItemCard.vue
index 4f4b52526a96f32d29ed839245254a5c12228f1e..089dc01a8043d3409d6806537e853cf95017cc28 100644
--- a/src/components/CommunityComponents/ItemCard.vue
+++ b/src/components/CommunityComponents/ItemCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mt-5">
-    <div class="w-52 rounded bg-gray-200">
+    <div class="w-4/5 rounded bg-gray-200">
       <img
         class="w-full"
         :src="item.img || require('../../assets/default-product.png')"
diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index bb3a4d8edfd877b35648111b8b9a28d4ab2c9575..df068e7a3a788a8a8b505923240db216d23b961b 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -1,9 +1,13 @@
 <template>
-  <div class="m-6">
+  <div
+    class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4"
+  >
     <!-- Component heading -->
-    <div class="flex justify-center mt-6">
-      <p class="text-4xl">Opprett Gruppe</p>
-    </div>
+    <h3
+      class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+    >
+      Opprett ny gruppe
+    </h3>
 
     <!-- Radio boxes -->
     <div class="mt-6">
@@ -14,7 +18,7 @@
       >
       <div class="form-check">
         <input
-          class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+          class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
           type="radio"
           name="flexRadioDefault"
           id="flexRadioOpen"
@@ -32,7 +36,7 @@
       </div>
       <div class="form-check">
         <input
-          class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+          class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
           type="radio"
           name="flexRadioDefault"
           id="flexRadioPrivate"
@@ -59,18 +63,18 @@
       <input
         type="text"
         id="title"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
         v-model="v$.group.name.$model"
         required
       />
 
       <!-- error message for title-->
       <div
-        class="text-red"
+        class="text-error"
         v-for="(error, index) of v$.group.name.$errors"
         :key="index"
       >
-        <div class="text-red-600 text-sm">
+        <div class="text-error text-sm">
           {{ error.$message }}
         </div>
       </div>
@@ -84,18 +88,18 @@
       >
       <input
         type="text"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
         v-model="v$.group.place.$model"
         required
       />
 
       <!-- error message for place-->
       <div
-        class="text-red"
+        class="text-error"
         v-for="(error, index) of v$.group.place.$errors"
         :key="index"
       >
-        <div class="text-red-600 text-sm">
+        <div class="text-error text-sm">
           {{ error.$message }}
         </div>
       </div>
@@ -112,17 +116,17 @@
         id="description"
         rows="4"
         v-model="v$.group.description.$model"
-        class="block p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
         required
       ></textarea>
 
       <!-- error message for description -->
       <div
-        class="text-red"
+        class="text-error"
         v-for="(error, index) of v$.group.description.$errors"
         :key="index"
       >
-        <div class="text-red-600 text-sm">
+        <div class="text-error text-sm">
           {{ error.$message }}
         </div>
       </div>
@@ -148,9 +152,7 @@
 
       <!-- Button for adding an image -->
       <div class="inline-flex rounded-md shadow-sm">
-        <div class="text-red-500 uppercase text-center">
-          midlertidig fjernet
-        </div>
+        <div class="text-error uppercase text-center">midlertidig fjernet</div>
         <!-- <button
           @click="$refs.file.click()"
           class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800 disabled:opacity-50"
@@ -177,13 +179,7 @@
 
     <!-- Save item button -->
     <div class="flex justify-center mt-10">
-      <button
-        @click="saveClicked"
-        class="content-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        id="saveButton"
-      >
-        Lagre
-      </button>
+      <Button @click="saveClicked" id="saveButton" :text="'Lagre'"> </Button>
     </div>
   </div>
 </template>
@@ -192,10 +188,14 @@
 import useVuelidate from "@vuelidate/core";
 import { required, helpers, maxLength } from "@vuelidate/validators";
 import { postNewgroup } from "@/utils/apiutil";
+import Button from "@/components/BaseComponents/ColoredButton";
 
 export default {
   name: "CreateNewGroup.vue",
 
+  components: {
+    Button,
+  },
   setup() {
     return { v$: useVuelidate() };
   },
diff --git a/src/components/CommunityComponents/NewItemForm.vue b/src/components/CommunityComponents/NewItemForm.vue
index 9324b2bb76cfe0df33fde7a0cad06bd202470708..05e46edf06e298d7e70a5731fc941c1a69900080 100644
--- a/src/components/CommunityComponents/NewItemForm.vue
+++ b/src/components/CommunityComponents/NewItemForm.vue
@@ -1,9 +1,13 @@
 <template>
-  <div class="m-6">
+  <div
+    class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[3%] p-4"
+  >
     <!-- Component heading -->
-    <div class="flex justify-center">
-      <p class="text-4xl mb-6 mt-6">Utleie</p>
-    </div>
+    <h3
+      class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+    >
+      Utleie
+    </h3>
 
     <!-- Title -->
     <div class="mb-6" :class="{ error: v$.item.title.$errors.length }">
@@ -15,18 +19,18 @@
       <input
         type="text"
         id="title"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
         v-model="v$.item.title.$model"
         required
       />
 
       <!-- error message for title-->
       <div
-        class="text-red"
+        class="text-error"
         v-for="(error, index) of v$.item.title.$errors"
         :key="index"
       >
-        <div class="text-red-600 text-sm">
+        <div class="text-error text-sm">
           {{ error.$message }}
         </div>
       </div>
@@ -42,7 +46,7 @@
       <select
         v-model="v$.item.select.$model"
         id="categories"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
       >
         <option class="text-gray-400" value="" disabled selected>
           Select a category
@@ -58,11 +62,11 @@
 
       <!-- error message for select box -->
       <div
-        class="text-red"
+        class="text-error"
         v-for="(error, index) of v$.item.select.$errors"
         :key="index"
       >
-        <div class="text-red-600 text-sm">
+        <div class="text-error text-sm">
           {{ error.$message }}
         </div>
       </div>
@@ -76,7 +80,7 @@
       >
       <select
         v-model="v$.item.selectGroup.$model"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
       >
         <option class="text-gray-400" value="" disabled selected>
           Select a Group
@@ -92,11 +96,11 @@
 
       <!-- error message for select box -->
       <div
-        class="text-red"
+        class="text-error"
         v-for="(error, index) of v$.item.selectGroup.$errors"
         :key="index"
       >
-        <div class="text-red-600 text-sm">
+        <div class="text-error text-sm">
           {{ error.$message }}
         </div>
       </div>
@@ -113,17 +117,17 @@
         type="number"
         v-model="v$.item.price.$model"
         id="price"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
         required
       />
 
       <!-- error message for price -->
       <div
-        class="text-red"
+        class="text-error"
         v-for="(error, index) of v$.item.price.$errors"
         :key="index"
       >
-        <div class="text-red-600 text-sm">
+        <div class="text-error text-sm">
           {{ error.$message }}
         </div>
       </div>
@@ -140,17 +144,17 @@
         id="description"
         rows="4"
         v-model="v$.item.description.$model"
-        class="block p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
         required
       ></textarea>
 
       <!-- error message for description -->
       <div
-        class="text-red"
+        class="text-error"
         v-for="(error, index) of v$.item.description.$errors"
         :key="index"
       >
-        <div class="text-red-600 text-sm">
+        <div class="text-error text-sm">
           {{ error.$message }}
         </div>
       </div>
@@ -164,7 +168,7 @@
       >
       <input
         type="text"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
         v-model="v$.item.address.$model"
         id="adress"
         required
@@ -172,11 +176,11 @@
 
       <!-- error message for address-->
       <div
-        class="text-red"
+        class="text-error"
         v-for="(error, index) of v$.item.address.$errors"
         :key="index"
       >
-        <div class="text-red-600 text-sm">
+        <div class="text-error text-sm">
           {{ error.$message }}
         </div>
       </div>
@@ -200,12 +204,7 @@
         accept="image/png, image/jpeg"
       />
 
-      <button
-        @click="$refs.file.click()"
-        class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800"
-      >
-        Velg bilde
-      </button>
+      <Button :text="'Velg bilde'" @click="$refs.file.click()" />
 
       <div v-for="image in item.images" :key="image" class="m-2">
         <img :src="image" class="w-2/5 inline" alt="Bilde av gjenstanden" />
@@ -214,13 +213,7 @@
 
     <!-- Save item button -->
     <div class="flex justify-center">
-      <button
-        @click="saveClicked"
-        class="content-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        id="saveButton"
-      >
-        Lagre
-      </button>
+      <Button :text="'Lagre'" @click="saveClicked" id="saveButton" />
     </div>
   </div>
 </template>
@@ -229,6 +222,7 @@
 import useVuelidate from "@vuelidate/core";
 import { parseUserFromToken } from "@/utils/token-utils";
 import { postNewItem } from "@/utils/apiutil";
+import Button from "@/components/BaseComponents/ColoredButton";
 
 import {
   required,
@@ -241,6 +235,10 @@ import {
 export default {
   name: "AddNewItem",
 
+  components: {
+    Button,
+  },
+
   setup() {
     return { v$: useVuelidate() };
   },
diff --git a/src/components/CommunityComponents/SearchItemList.vue b/src/components/CommunityComponents/SearchItemList.vue
index 51f51ac4ead6c2e8468c88d52d6c48a3a1e13467..32d806a98d18ec9156da12eae1a2a1f715c0fcdc 100644
--- a/src/components/CommunityComponents/SearchItemList.vue
+++ b/src/components/CommunityComponents/SearchItemList.vue
@@ -16,7 +16,7 @@
       <input
         type="text"
         id="searchInput"
-        class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
+        class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
         placeholder="Search"
         v-model="search"
       />
diff --git a/src/components/FormComponents/LoginForm.vue b/src/components/FormComponents/LoginForm.vue
index bf7b23c0b698adbeda116c4b3ac997948abc9461..5b0756332f1d1537e74dbeaa9e301efcae83e511 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -1,98 +1,90 @@
 <template>
-  <div class="max-w-md p-6 mx-auto rounded-md shadow-lg mt-16">
-    <div class="flex justify-center text-2xl">Logg inn</div>
-    <div
-      id="emailField"
-      class="m-6"
-      :class="{ error: v$.user.email.$errors.length }"
-    >
-      <div class="mb-6">
-        <label
-          for="email"
-          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-          >E-post</label
+  <div
+    class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%]"
+  >
+    <div class="px-6 py-4 mt-4">
+      <h3
+        class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+      >
+        Logg på
+      </h3>
+
+      <div>
+        <div
+          class="w-full mt-6"
+          :class="{ error: v$.user.email.$errors.length }"
+        >
+          <input
+            class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+            type="email"
+            placeholder="Skriv inn din e-postadresse *"
+            v-model="v$.user.email.$model"
+            required
+          />
+          <!-- error message -->
+          <div v-for="(error, index) of v$.user.email.$errors" :key="index">
+            <div
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="emailErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="w-full mt-6"
+          :class="{ error: v$.user.password.$errors.length }"
         >
-        <input
-          type="email"
-          id="email"
-          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-          placeholder="eksempel@eksempel.no"
-          v-model="v$.user.email.$model"
-          required
-        />
-        <!-- error message -->
-        <div v-for="(error, index) of v$.user.email.$errors" :key="index">
+          <input
+            class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+            type="password"
+            placeholder="Vennligst oppgi passordet ditt *"
+            v-model="v$.user.password.$model"
+            @keyup.enter="loginClicked"
+            required
+          />
+          <!-- error message -->
           <div
             class="text-red-600 text-sm"
-            v-show="showError"
-            id="emailErrorId"
+            v-for="(error, index) of v$.user.password.$errors"
+            :key="index"
           >
-            {{ error.$message }}
+            <div
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="passwordErrorId"
+            >
+              {{ error.$message }}
+            </div>
           </div>
         </div>
+
+        <div class="flex items-center justify-between mt-8">
+          <router-link to="/resetPassword" class="text-primary-medium"
+            >Glemt passord?</router-link
+          >
+
+          <Button @click="loginClicked" :text="'Logg på'"></Button>
+        </div>
       </div>
     </div>
 
     <div
-      id="passwordField"
-      class="m-6"
-      :class="{ error: v$.user.password.$errors.length }"
+      class="flex items-center justify-center py-4 text-center bg-gray-50 dark:bg-gray-700"
     >
-      <label
-        for="password"
-        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-        >Passord</label
-      >
-      <input
-        type="password"
-        id="password"
-        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-        v-model="v$.user.password.$model"
-        required
-        @keyup.enter="loginClicked"
-      />
-      <!-- error message -->
-      <div
-        class="text-red"
-        v-for="(error, index) of v$.user.password.$errors"
-        :key="index"
+      <router-link
+        to="/register"
+        class="mx-2 text-sm font-bold text-primary-medium dark:text-primary-light hover:underline"
+        >Opprette ny konto</router-link
       >
-        <div
-          class="text-red-600 text-sm"
-          v-show="showError"
-          id="passwordErrorId"
-        >
-          {{ error.$message }}
-        </div>
-      </div>
     </div>
-
-    <div id="buttonsField" class="m-6">
-      <div class="align-items: flex-end; mb-6">
-        <div class="ml-3 text-sm">
-          <router-link
-            to="/resetPassword"
-            class="text-blue-600 flex justify-end"
-            >Glemt passord</router-link
-          >
-        </div>
-      </div>
-      <button
-        @click="loginClicked"
-        class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5"
+    <div class="flex items-center justify-center text-center bg-gray-50">
+      <label
+        class="mx-2 text-sm font-bold text-red-500 dark:text-primary-light hover:underline"
+        >{{ message }}</label
       >
-        Logg inn
-      </button>
-      <div class="align-items: flex-end; mb-6 mt-12">
-        <div class="text-sm">
-          <router-link to="register" class="text-blue-600 flex justify-center"
-            >Ny bruker</router-link
-          >
-        </div>
-      </div>
-      <div class="flex justify-center">
-        <label>{{ message }}</label>
-      </div>
     </div>
   </div>
 </template>
@@ -101,10 +93,14 @@
 import useVuelidate from "@vuelidate/core";
 import { required, email, helpers } from "@vuelidate/validators";
 import { doLogin } from "@/utils/apiutil";
+import Button from "@/components/BaseComponents/ColoredButton";
 
 export default {
   name: "LoginForm.vue",
 
+  components: {
+    Button,
+  },
   setup() {
     return { v$: useVuelidate() };
   },
@@ -112,11 +108,11 @@ export default {
     return {
       user: {
         email: {
-          required,
+          required: helpers.withMessage(`Feltet må være utfylt`, required),
           email: helpers.withMessage(`E-posten er ugyldig`, email),
         },
         password: {
-          required,
+          required: helpers.withMessage(`Feltet må være utfylt`, required),
         },
       },
     };
@@ -138,9 +134,9 @@ export default {
     async loginClicked() {
       this.showError = true;
 
-      this.v$.user.email.$touch();
+      this.v$.user.$touch();
 
-      if (this.v$.user.email.$invalid) {
+      if (this.v$.user.$invalid) {
         console.log("Ugyldig, avslutter...");
         return;
       }
@@ -154,7 +150,6 @@ export default {
 
       if (loginResponse.isLoggedIn === false) {
         this.message = "Feil e-post/passord";
-        this.$store.commit("logout");
       } else if (loginResponse.isLoggedIn === true) {
         this.$store.commit("saveToken", loginResponse.token);
         await this.$router.push("/");
@@ -162,10 +157,6 @@ export default {
         console.log("Something went wrong");
       }
     },
-
-    validate() {
-      this.$refs.form.validate();
-    },
   },
 };
 </script>
diff --git a/src/components/FormComponents/NewPasswordForm.vue b/src/components/FormComponents/NewPasswordForm.vue
index 55599fee7a5ff53de223645d460d98186dfe3604..84d6ab5bdd784ad1e26cd96fcb8b189941dd66ba 100644
--- a/src/components/FormComponents/NewPasswordForm.vue
+++ b/src/components/FormComponents/NewPasswordForm.vue
@@ -14,7 +14,7 @@
       <input
         type="password"
         v-model="v$.user.password.$model"
-        class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-light dark:focus:border-primary-light focus:ring-primary-light focus:outline-none focus:ring focus:ring-opacity-40"
       />
       <!-- error message -->
       <div v-for="(error, index) of v$.user.password.$errors" :key="index">
@@ -44,7 +44,7 @@
       <input
         type="password"
         v-model="v$.user.rePassword.$model"
-        class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-light dark:focus:border-primary-light focus:ring-primary-light focus:outline-none focus:ring focus:ring-opacity-40"
       />
       <!-- error message -->
       <div v-for="(error, index) of v$.user.rePassword.$errors" :key="index">
diff --git a/src/components/FormComponents/RegisterForm.vue b/src/components/FormComponents/RegisterForm.vue
index 3f4551a3e677e01b48cfcc29cb889b21d9bf04c1..ce4b136d25abe1dbcf27d8d0f7e2a33898fbf3d3 100644
--- a/src/components/FormComponents/RegisterForm.vue
+++ b/src/components/FormComponents/RegisterForm.vue
@@ -1,133 +1,192 @@
 <template>
-  <section
-    class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800"
+  <div
+    class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4"
   >
-    <h2 class="text-lg font-semibold text-gray-700 capitalize dark:text-white">
+    <h3
+      class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+    >
       Opprett ny bruker
-    </h2>
+    </h3>
 
     <form @submit.prevent>
-      <div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
+      <div class="grid grid-cols-1 gap-6 mt-4">
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="email"
-            >E-mail</label
-          >
           <input
+            class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
             v-model="email"
             id="email"
             type="email"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
+            placeholder="E-post adresse"
           />
+          <!-- error message -->
+          <div
+            class="text-red-600 text-sm"
+            v-for="(error, index) of v$.email.$errors"
+            :key="index"
+          >
+            <div
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="emailErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
 
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="password"
-            >Passord</label
-          >
           <input
+            class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
             v-model="password"
             id="password"
             type="password"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
+            placeholder="Passord"
           />
+          <!-- error message -->
+          <div
+            class="text-red-600 text-sm"
+            v-for="(error, index) of v$.password.$errors"
+            :key="index"
+          >
+            <div
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="passwordErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
 
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="confirmPassword"
-            >Bekreft Passord</label
-          >
           <input
+            class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
             v-model="confirmPassword"
             id="confirmPassword"
             type="password"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
+            placeholder="Bekreft passord"
           />
+          <!-- error message -->
+          <div
+            class="text-red-600 text-sm"
+            v-for="(error, index) of v$.confirmPassword.$errors"
+            :key="index"
+          >
+            <div
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="confirmPasswordErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
 
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="firstName"
-            >Fornavn</label
-          >
           <input
+            class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
             data-test="firstNameTest"
             v-model="firstName"
             id="firstName"
             type="text"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
+            placeholder="Fornavn"
           />
+          <!-- error message -->
+          <div
+            class="text-red-600 text-sm"
+            v-for="(error, index) of v$.firstName.$errors"
+            :key="index"
+          >
+            <div
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="firstNameErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
 
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="lastName"
-            >Etternavn</label
-          >
           <input
+            class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
             v-model="lastName"
             id="lastName"
             type="text"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
+            placeholder="Etternavn"
           />
+          <!-- error message -->
+          <div
+            class="text-red-600 text-sm"
+            v-for="(error, index) of v$.lastName.$errors"
+            :key="index"
+          >
+            <div
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="lastNameErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
 
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="address"
-            >Addresse</label
-          >
           <input
+            class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
             v-model="address"
             id="address"
             type="text"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
+            placeholder="Adresse"
           />
+          <!-- error message -->
+          <div
+            class="text-red-600 text-sm"
+            v-for="(error, index) of v$.address.$errors"
+            :key="index"
+          >
+            <div
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="addressErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
       </div>
 
       <div class="flex justify-end mt-6">
-        <button
-          class="px-6 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600"
-          @click="submit()"
-          type="submit"
-          :disabled="loading"
-        >
-          <div v-if="loading">
-            <div v-if="loading" class="lds-ring">
-              <div></div>
-              <div></div>
-              <div></div>
-              <div></div>
-            </div>
-          </div>
-          <div v-else>Lagre</div>
-        </button>
+        <Button @click="submit" :text="'Lagre'"></Button>
       </div>
     </form>
-  </section>
-  <ul data-test="errorMessageList">
-    <li v-if="errorMessage" data-test="customErrorMsg">{{ errorMessage }}</li>
-    <li v-for="error of v$.$errors" :key="error.$uid">
-      <!-- {{ error.$validator }} -->
-      Field
-      {{ error.$property }}
-      has error:
-      {{ error.$message }}
-    </li>
-  </ul>
+  </div>
 </template>
 
 <script>
 import useVuelidate from "@vuelidate/core";
 import { doLogin, registerUser } from "@/utils/apiutil";
-import { required, email, minLength, sameAs } from "@vuelidate/validators";
+import {
+  required,
+  email,
+  minLength,
+  sameAs,
+  helpers,
+} from "@vuelidate/validators";
+import Button from "@/components/BaseComponents/ColoredButton";
 
 // const isEmailTaken = (value) =>
 // fetch(`/api/unique/${value}`).then((r) => r.json()); // check the email in the server
 
 export default {
+  components: {
+    Button,
+  },
   setup: () => ({ v$: useVuelidate() }),
   data() {
     return {
+      showError: false,
       errorMessage: "",
-      loading: false,
       email: "",
       password: "",
       confirmPassword: "",
@@ -139,24 +198,39 @@ export default {
   validations() {
     return {
       email: {
-        required,
-        email,
+        required: helpers.withMessage(`Feltet må være utfylt`, required),
+        email: helpers.withMessage("E-posten er ugyldig", email),
         // isUnique: helpers.withAsync(isEmailTaken),
       },
       password: {
-        required,
-        minLength: minLength(8),
+        required: helpers.withMessage(`Feltet må være utfylt`, required),
+        minLength: helpers.withMessage(
+          "Passordet må være minst 8 karakterer lang",
+          minLength(8)
+        ),
+      },
+      confirmPassword: {
+        sameAs: helpers.withMessage(
+          "Passordene må være like",
+          sameAs(this.password)
+        ),
+        required: helpers.withMessage(`Feltet må være utfylt`, required),
+      },
+      firstName: {
+        required: helpers.withMessage(`Feltet må være utfylt`, required),
+      },
+      lastName: {
+        required: helpers.withMessage(`Feltet må være utfylt`, required),
+      },
+      address: {
+        required: helpers.withMessage(`Feltet må være utfylt`, required),
       },
-      confirmPassword: { sameAs: sameAs(this.password) },
-      firstName: { required },
-      lastName: { required },
-      address: { required },
     };
   },
   methods: {
     async submit() {
       //Display loading symbol
-      this.loading = true;
+      this.showError = true;
 
       //Validate form
       const result = await this.v$.$validate();
@@ -203,48 +277,8 @@ export default {
 
       const response = await registerUser(registerInfo);
 
-      if (response.status === 200) return true;
-      return false;
+      return response.status === 200;
     },
   },
 };
 </script>
-
-<style scoped>
-/* https://loading.io/css/ */
-.lds-ring {
-  display: inline-block;
-  position: relative;
-  width: 20px;
-  height: 20px;
-}
-.lds-ring div {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  margin: 2px;
-  border: 2px solid #fff;
-  border-radius: 50%;
-  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: #fff transparent transparent transparent;
-}
-.lds-ring div:nth-child(1) {
-  animation-delay: -0.45s;
-}
-.lds-ring div:nth-child(2) {
-  animation-delay: -0.3s;
-}
-.lds-ring div:nth-child(3) {
-  animation-delay: -0.15s;
-}
-@keyframes lds-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>
diff --git a/src/components/FormComponents/ResetPasswordForm.vue b/src/components/FormComponents/ResetPasswordForm.vue
index fa75650e93ef002ca97c3eebe85a567c0581efa4..eba14df70b599e53369b9fd94e34e2828b22f811 100644
--- a/src/components/FormComponents/ResetPasswordForm.vue
+++ b/src/components/FormComponents/ResetPasswordForm.vue
@@ -14,7 +14,7 @@
         <input
           type="email"
           id="email"
-          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-medium focus:border-primary-medium block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-medium dark:focus:border-primary-medium"
           placeholder="eksempel@eksempel.no"
           v-model="v$.email.$model"
           required
@@ -33,7 +33,7 @@
     </div>
     <button
       @click="sendHome"
-      class="flex justify-center align-items: flex-end; text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+      class="flex justify-center align-items: flex-end; text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-dark"
     >
       Send e-post
     </button>
diff --git a/src/components/RentingComponents/NewRent.vue b/src/components/RentingComponents/NewRent.vue
index 33240c253bff41d1c6e2d5b82dceccd8dada21ca..0dc5f00e906b343287b84df0188d3d09b18111a6 100644
--- a/src/components/RentingComponents/NewRent.vue
+++ b/src/components/RentingComponents/NewRent.vue
@@ -2,6 +2,7 @@
   <div class="confirmationBox">
     <div class="rentTitle">
       <h1>
+<<<<<<< HEAD
         {{ title }}
       </h1>
     </div>
@@ -17,6 +18,23 @@
         class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
         id="descriptionLabel"
         >Skriv en melding til utleier:</label
+=======
+       {{ title }}
+      </h1>
+    </div>
+    
+    <div class = "fromTime">
+      <p>Fra: {{ from_time }}</p>
+    </div>
+    <div class = "toTime">
+      <p>Til: {{ to_time }}</p>
+    </div>
+    <div class = "message">
+      <label
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+        id="descriptionLabel"
+        >Skriv en melding til utleier</label
+>>>>>>> main
       >
       <textarea
         id="description"
diff --git a/src/components/UserProfileComponents/LargeProfileCard.vue b/src/components/UserProfileComponents/LargeProfileCard.vue
index 19d25964791090645d982f2ee5875a26a6b396e6..08bdebd48ed65c5753281d64535e04b89dbf2055 100644
--- a/src/components/UserProfileComponents/LargeProfileCard.vue
+++ b/src/components/UserProfileComponents/LargeProfileCard.vue
@@ -1,13 +1,13 @@
 <template>
   <div
-    class="min-w-full md:min-w-0 md:w-96 my-4 py-8 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
+    class="w-full max-w-xl m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-6"
   >
-    <div v-show="isCurrentUser" class="flex absolute justify-end px-4 pt-4">
+    <div v-show="isCurrentUser" class="float-right px-4 pt-4">
       <button
         id="dropdownDefault"
         data-dropdown-toggle="dropdown"
         @click="dropdown = !dropdown"
-        class="w-10 h-10 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
+        class="w-10 h-10 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg float-right text-sm p-1.5"
         type="button"
       >
         <svg
@@ -27,7 +27,7 @@
         v-show="dropdown"
         class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
       >
-        <ul class="py-1" aria-labelledby="dropdownDefault">
+        <ul class="py-1 absolute bg-white" aria-labelledby="dropdownDefault">
           <li>
             <router-link
               to=""
@@ -67,7 +67,7 @@
           <li>
             <router-link
               to=""
-              class="block py-2 px-4 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+              class="block py-2 px-4 text-sm text-error hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
               >Slett bruker</router-link
             >
           </li>
@@ -75,7 +75,7 @@
       </div>
     </div>
 
-    <div class="flex flex-col items-center pb-10">
+    <div class="flex flex-col items-center pb-10 mt-16 z-5">
       <img
         class="mb-3 w-24 h-24 rounded-full shadow-lg"
         src="../../assets/defaultUserProfileImage.jpg"
diff --git a/src/components/UserProfileComponents/Rating.vue b/src/components/UserProfileComponents/Rating.vue
index c6e7e8252f2fb8916098f3a1ab8b6a2a7290eb62..8aff6bad071841e4f6baf1c2825ca748b46c095f 100644
--- a/src/components/UserProfileComponents/Rating.vue
+++ b/src/components/UserProfileComponents/Rating.vue
@@ -47,7 +47,7 @@ export default {
   methods: {
     getFill(i) {
       if (i <= this.rating) {
-        return "w-5 h-5 text-yellow-400";
+        return "w-5 h-5 text-warn";
       }
       return "w-5 h-5 text-gray-300 dark:text-gray-500";
     },
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index 76c8d4b45c63e214d7b97e0bacf74824634d413b..c38001adffa42ed4074bb97948946fdb5f14bd02 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -227,3 +227,40 @@ export async function GetMembersOfCommunity(communityID) {
       console.error(error);
     });
 }
+
+export function JoinOpenCommunity(communityId) {
+
+    if(tokenHeader().Authorization == "Bearer " + null){
+        console.log("ikke logget på!");
+        return "Login to join any community";
+    }
+
+    return axios
+        .post(API_URL + "communities/" + communityId + "/join", communityId, {
+            headers: tokenHeader(),
+        })
+        .then((response) => {
+            return response;
+        })
+        .catch((error) => {
+            console.log(error.response);
+            return error;
+        });
+}
+
+export async function GetIfUserAlreadyInCommunity(communityID) {
+    if(tokenHeader().Authorization == "Bearer " + null){
+        return false;
+    }
+
+    return axios
+        .get(API_URL + "communities/" + communityID + "/user/status", {
+            headers: tokenHeader(),
+        })
+        .then((response) => {
+            return response.data;
+        })
+        .catch((error) => {
+            return error;
+        });
+}
diff --git a/src/views/FormViews/LoginView.vue b/src/views/FormViews/LoginView.vue
index 95329c538e3b4796b193048f943bd1be4fee2b88..9b35159fb022cebd9f041bb806bed054024e6f91 100644
--- a/src/views/FormViews/LoginView.vue
+++ b/src/views/FormViews/LoginView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="loginPage">
+  <div class="h-screen grid">
     <LoginForm></LoginForm>
   </div>
 </template>
@@ -13,11 +13,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.loginPage {
-  background-color: white;
-  height: 100%;
-  overflow: auto;
-}
-</style>
diff --git a/src/views/FormViews/RegisterView.vue b/src/views/FormViews/RegisterView.vue
index e5d5683596755787a0955be481d1b38d91f4a378..2b431f1d01e0312d4b450f11b18ea78c5a033d70 100644
--- a/src/views/FormViews/RegisterView.vue
+++ b/src/views/FormViews/RegisterView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-screen bg-gray-200 content-center grid place-items-center">
+  <div class="h-screen grid">
     <RegisterFormComponent />
   </div>
 </template>
diff --git a/src/views/UserProfileViews/ProfileView.vue b/src/views/UserProfileViews/ProfileView.vue
index c4ea15c9d2d5c8f640b8180c226a64e4555535a2..b44558f50dd0a231b1822b6007b947ad16dd2c7c 100644
--- a/src/views/UserProfileViews/ProfileView.vue
+++ b/src/views/UserProfileViews/ProfileView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-screen bg-gray-200 grid place-items-center">
+  <div>
     <large-profile-card :isCurrentUser="true" class="align-top" />
   </div>
 </template>
diff --git a/tailwind.config.js b/tailwind.config.js
index d92b980ab15ed8d8de1d9e631b62ea2085bd8705..0089d1c11fbc2c51520dc1501abb2dec976d7fa7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,34 @@ module.exports = {
     "./node_modules/tw-elements/dist/js/**/*.js",
   ],
   theme: {
-    extend: {},
+    colors: {
+      white: "#fff",
+      black: "#000",
+      gray: {
+        50: "#f9fafb",
+        100: "#f3f4f6",
+        200: "#e5e7eb",
+        300: "#d1d5db",
+        400: "#9ca3af",
+        500: "#6b7280",
+        600: "#4b5563",
+        700: "#374151",
+        800: "#1f2937",
+        900: "#111827",
+      },
+      primary: {
+        light: "#306EC1",
+        medium: "#004aad",
+        dark: "#003884",
+      },
+      secondary: {
+        light: "#653273",
+        dark: "#731050",
+      },
+      error: "#E23636",
+      warn: "#EDB95E",
+      success: "#82DD55",
+    },
   },
   plugins: [require("tw-elements/dist/plugin")],
 };
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/color-button.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/color-button.spec.js.snap
deleted file mode 100644
index 4a8d6370547ec8f2d5faee8131dc1432a0d3a7e5..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/base-component-tests/__snapshots__/color-button.spec.js.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ColoredButtonComponent renders correctly 1`] = `
-<button
-  class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
->
-  hei
-</button>
-`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/community-header.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/community-header.spec.js.snap
deleted file mode 100644
index 73847104b73bc72ff7ee7c2c3693159fe201b6b1..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/base-component-tests/__snapshots__/community-header.spec.js.snap
+++ /dev/null
@@ -1,62 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CommunityHeader component renders correctly 1`] = `
-<div
-  class="flex items-center justify-between mx-4"
->
-  <div
-    class="flex-1 min-w-0"
-  >
-    <h2
-      class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate"
-    >
-      String
-    </h2>
-    <div
-      class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6"
-    >
-      <div
-        class="mt-2 flex items-center text-sm text-gray-500"
-      >
-        <svg
-          aria-hidden="true"
-          class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
-            fill-rule="evenodd"
-          />
-        </svg>
-         String
-      </div>
-    </div>
-  </div>
-  <div>
-    <span
-      class="hidden sm:block"
-    >
-      <!-- Legg dette til i button: v-if="adminStatus" -->
-      <svg
-        class="w-9 h-9 cursor-pointer"
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4 6h16M4 12h16M4 18h16"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
-      </svg>
-      <!--v-if-->
-      <!-- class="absolute" -->
-    </span>
-  </div>
-</div>
-`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/custom-footer-modal.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/custom-footer-modal.spec.js.snap
deleted file mode 100644
index f178175b1fa2913054cc18585b8dd831f1099858..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/base-component-tests/__snapshots__/custom-footer-modal.spec.js.snap
+++ /dev/null
@@ -1,73 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`IconButtonComponent renders correctly 1`] = `
-<div
-  data-v-app=""
->
-  
-  <!-- Main modal -->
-  <div
-    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full"
-  >
-    <div
-      class="relative w-full h-full max-w-2xl p-4 md:h-auto"
-    >
-      <!-- Modal content -->
-      <div
-        class="relative bg-white rounded-lg shadow dark:bg-gray-700"
-      >
-        <!-- Modal header -->
-        <div
-          class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"
-        >
-          <h3
-            class="text-xl font-semibold text-gray-900 dark:text-white"
-          >
-            String
-          </h3>
-          <button
-            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
-          >
-            <svg
-              class="w-5 h-5"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </button>
-        </div>
-        <!-- Modal body -->
-        <div
-          class="p-6 space-y-6"
-        >
-          <p
-            class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
-          >
-            String
-          </p>
-        </div>
-        <!-- Modal footer -->
-        <div
-          class="rounded-b border-t border-gray-200 dark:border-gray-600"
-        >
-          <!-- Slot: Add any html you want here -->
-          
-          <div
-            class="fake-msg"
-          >
-            String
-          </div>
-          
-        </div>
-      </div>
-    </div>
-  </div>
-  
-</div>
-`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/icon-button.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/icon-button.spec.js.snap
deleted file mode 100644
index 62007d4ff8d81f1ece9bf91271163ca179d7383d..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/base-component-tests/__snapshots__/icon-button.spec.js.snap
+++ /dev/null
@@ -1,43 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`IconButtonComponent renders correctly 1`] = `
-<div
-  data-v-app=""
->
-  
-  <!-- Icon button -->
-  <button
-    class="block w-fit text-white text-base bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-  >
-    <div
-      class="flex flex-row px-5 py-2.5 h-10"
-    >
-      <!-- Icon slot: Default content "Ban"-icon -->
-      <div
-        class="h-6 w-6"
-      >
-        
-        <svg
-          aria-hidden="true"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-        
-      </div>
-      <p>
-        hei
-      </p>
-    </div>
-  </button>
-  
-</div>
-`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/nav-bar.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/nav-bar.spec.js.snap
deleted file mode 100644
index 3929918739cf7ffa3409de46e8c6bd3b6abd14f8..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/base-component-tests/__snapshots__/nav-bar.spec.js.snap
+++ /dev/null
@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NavBar component renders correctly 1`] = `
-<nav
-  class="flex items-center justify-between bg-white h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
->
-  <div
-    class="logo"
-  >
-    <img
-      alt="BoCo logo"
-      class="m-1 ml-4 cursor-pointer h-12"
-      src=""
-    />
-  </div>
-  <ul
-    class="flex"
-  >
-    <li>
-      <img
-        alt="Legg til"
-        class="m-6 cursor-pointer h-7"
-        src=""
-      />
-    </li>
-    <li>
-      <img
-        alt="Meldinger"
-        class="m-6 cursor-pointer h-7"
-        src=""
-      />
-    </li>
-    <li>
-      <img
-        alt="Profil"
-        class="m-6 cursor-pointer h-7"
-        src=""
-      />
-    </li>
-  </ul>
-</nav>
-`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/notification-modal.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/notification-modal.spec.js.snap
deleted file mode 100644
index 6c2259b3f623090effe8ff37ced149d9e72da832..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/base-component-tests/__snapshots__/notification-modal.spec.js.snap
+++ /dev/null
@@ -1,60 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NotificationModal component renders correctly 1`] = `
-<div
-  data-v-app=""
->
-  
-  <!-- Main modal -->
-  <div
-    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full"
-  >
-    <div
-      class="relative w-full h-full max-w-2xl p-4 md:h-auto"
-    >
-      <!-- Modal content -->
-      <div
-        class="relative bg-white rounded-lg shadow dark:bg-gray-700"
-      >
-        <!-- Modal header -->
-        <div
-          class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"
-        >
-          <h3
-            class="text-xl font-semibold text-gray-900 dark:text-white"
-          >
-            String
-          </h3>
-          <button
-            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
-          >
-            <svg
-              class="w-5 h-5"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </button>
-        </div>
-        <!-- Modal body -->
-        <div
-          class="p-6 space-y-6"
-        >
-          <p
-            class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
-          >
-            String
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-  
-</div>
-`;
diff --git a/tests/unit/component-tests/base-component-tests/color-button.spec.js b/tests/unit/component-tests/base-component-tests/color-button.spec.js
index ca9efb412b59485756b500dcbe8fb283e2464d31..29300503d6aeae9159b782520be94ebb502ce44c 100644
--- a/tests/unit/component-tests/base-component-tests/color-button.spec.js
+++ b/tests/unit/component-tests/base-component-tests/color-button.spec.js
@@ -13,10 +13,6 @@ describe("ColoredButtonComponent", () => {
     });
   });
 
-  it("renders correctly", () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
diff --git a/tests/unit/component-tests/base-component-tests/community-header.spec.js b/tests/unit/component-tests/base-component-tests/community-header.spec.js
index 7dd3c446f57353aae804f8b7f6cf6e95fe5af7da..97e5cd0889634e1205031c5ee1fe253e4892a6c1 100644
--- a/tests/unit/component-tests/base-component-tests/community-header.spec.js
+++ b/tests/unit/component-tests/base-component-tests/community-header.spec.js
@@ -21,10 +21,6 @@ describe("CommunityHeader component", () => {
     });
   });
 
-  it("renders correctly", () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
diff --git a/tests/unit/component-tests/base-component-tests/custom-footer-modal.spec.js b/tests/unit/component-tests/base-component-tests/custom-footer-modal.spec.js
index 4d4db9169c1d7c90402aa4e78be331938ebf487f..5afb8f9cb6f6d966856b1a59516062300c80e2b1 100644
--- a/tests/unit/component-tests/base-component-tests/custom-footer-modal.spec.js
+++ b/tests/unit/component-tests/base-component-tests/custom-footer-modal.spec.js
@@ -18,10 +18,6 @@ describe("IconButtonComponent", () => {
     });
   });
 
-  it("renders correctly", () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
diff --git a/tests/unit/component-tests/base-component-tests/icon-button.spec.js b/tests/unit/component-tests/base-component-tests/icon-button.spec.js
index 57b6f0fbc8450074c308627cd845f61085cb6743..376fb18f1f3ba20d4e417f7f615c2136f908016b 100644
--- a/tests/unit/component-tests/base-component-tests/icon-button.spec.js
+++ b/tests/unit/component-tests/base-component-tests/icon-button.spec.js
@@ -13,10 +13,6 @@ describe("IconButtonComponent", () => {
     });
   });
 
-  it("renders correctly", () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
diff --git a/tests/unit/component-tests/base-component-tests/nav-bar.spec.js b/tests/unit/component-tests/base-component-tests/nav-bar.spec.js
index dd5f979fef779d7b5235c2853b8c0b938f184b46..556dd737972108fccdd326ccea4133af1ddbe377 100644
--- a/tests/unit/component-tests/base-component-tests/nav-bar.spec.js
+++ b/tests/unit/component-tests/base-component-tests/nav-bar.spec.js
@@ -8,10 +8,6 @@ describe("NavBar component", () => {
     wrapper = mount(NavBar);
   });
 
-  it("renders correctly", () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
diff --git a/tests/unit/component-tests/base-component-tests/notification-modal.spec.js b/tests/unit/component-tests/base-component-tests/notification-modal.spec.js
index 0fb2c913ba0efa291df6a397a8dd0ee7370da776..c005e4f94aec3da15453735e5e1b267884104baf 100644
--- a/tests/unit/component-tests/base-component-tests/notification-modal.spec.js
+++ b/tests/unit/component-tests/base-component-tests/notification-modal.spec.js
@@ -15,10 +15,6 @@ describe("NotificationModal component", () => {
     });
   });
 
-  it("renders correctly", () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
index a9b5043d55edf9d7bd0a52eb64e803ffc04f50e5..0203fd3b821ba687b171ce226171b61b5a90deae 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
@@ -2,18 +2,14 @@
 
 exports[`CreateNewGroup elements rendering renders correctly 1`] = `
 <div
-  class="m-6"
+  class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4"
 >
   <!-- Component heading -->
-  <div
-    class="flex justify-center mt-6"
+  <h3
+    class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
   >
-    <p
-      class="text-4xl"
-    >
-      Opprett Gruppe
-    </p>
-  </div>
+     Opprett ny gruppe 
+  </h3>
   <!-- Radio boxes -->
   <div
     class="mt-6"
@@ -28,7 +24,7 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = `
       class="form-check"
     >
       <input
-        class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+        class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
         id="flexRadioOpen"
         name="flexRadioDefault"
         type="radio"
@@ -46,7 +42,7 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = `
       class="form-check"
     >
       <input
-        class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+        class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
         id="flexRadioPrivate"
         name="flexRadioDefault"
         type="radio"
@@ -72,7 +68,7 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = `
       Gruppenavn
     </label>
     <input
-      class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
       id="title"
       required=""
       type="text"
@@ -91,7 +87,7 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = `
       By/Sted
     </label>
     <input
-      class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
       required=""
       type="text"
     />
@@ -110,7 +106,7 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = `
       Beskrivelse
     </label>
     <textarea
-      class="block p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
       id="description"
       required=""
       rows="4"
@@ -140,9 +136,9 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = `
       class="inline-flex rounded-md shadow-sm"
     >
       <div
-        class="text-red-500 uppercase text-center"
+        class="text-error uppercase text-center"
       >
-         midlertidig fjernet 
+        midlertidig fjernet
       </div>
       <!-- &lt;button
           @click="$refs.file.click()"
@@ -170,12 +166,10 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = `
   <div
     class="flex justify-center mt-10"
   >
-    <button
-      class="content-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+    <button-stub
       id="saveButton"
-    >
-       Lagre 
-    </button>
+      text="Lagre"
+    />
   </div>
 </div>
 `;
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap
index a6765453f028760966f7f76701f1f0eea6877ec6..232516e6546b4be3f3852f589671a41a1e929911 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap
@@ -5,7 +5,7 @@ exports[`ItemCard component renders correctly 1`] = `
   class="mt-5"
 >
   <div
-    class="w-52 rounded bg-gray-200"
+    class="w-4/5 rounded bg-gray-200"
   >
     <img
       alt="Item image"
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
index a975fa560f988edeb59aee0a62e951b18b9192e2..c762c869566cb255d92ef914c550f218c79ed08b 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
@@ -2,18 +2,14 @@
 
 exports[`NewItemForm component renders correctly 1`] = `
 <div
-  class="m-6"
+  class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[3%] p-4"
 >
   <!-- Component heading -->
-  <div
-    class="flex justify-center"
+  <h3
+    class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
   >
-    <p
-      class="text-4xl mb-6 mt-6"
-    >
-      Utleie
-    </p>
-  </div>
+     Utleie 
+  </h3>
   <!-- Title -->
   <div
     class="mb-6"
@@ -25,7 +21,7 @@ exports[`NewItemForm component renders correctly 1`] = `
       Tittel
     </label>
     <input
-      class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
       id="title"
       required=""
       type="text"
@@ -45,7 +41,7 @@ exports[`NewItemForm component renders correctly 1`] = `
       Kategori
     </label>
     <select
-      class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
       id="categories"
     >
       <option
@@ -92,7 +88,7 @@ exports[`NewItemForm component renders correctly 1`] = `
       Gruppe
     </label>
     <select
-      class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
     >
       <option
         class="text-gray-400"
@@ -129,7 +125,7 @@ exports[`NewItemForm component renders correctly 1`] = `
       Pris
     </label>
     <input
-      class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
       id="price"
       required=""
       type="number"
@@ -149,7 +145,7 @@ exports[`NewItemForm component renders correctly 1`] = `
       Beskrivelse
     </label>
     <textarea
-      class="block p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
       id="description"
       required=""
       rows="4"
@@ -168,7 +164,7 @@ exports[`NewItemForm component renders correctly 1`] = `
       Adresse
     </label>
     <input
-      class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
       id="adress"
       required=""
       type="text"
@@ -192,9 +188,9 @@ exports[`NewItemForm component renders correctly 1`] = `
       type="file"
     />
     <button
-      class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800"
+      class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light"
     >
-       Velg bilde 
+      Velg bilde
     </button>
     
     
@@ -204,10 +200,10 @@ exports[`NewItemForm component renders correctly 1`] = `
     class="flex justify-center"
   >
     <button
-      class="content-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+      class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light"
       id="saveButton"
     >
-       Lagre 
+      Lagre
     </button>
   </div>
 </div>
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/search-item-list.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/search-item-list.spec.js.snap
index d00db1aa89b9e18df7639635f6bf0fe7b6de9820..59eecbb9003356b0debaa8228f3785d489e3ec98 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/search-item-list.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/search-item-list.spec.js.snap
@@ -26,7 +26,7 @@ exports[`SearchItemListComponent elements rendering renders correctly 1`] = `
       </svg>
     </span>
     <input
-      class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
+      class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
       id="searchInput"
       placeholder="Search"
       type="text"
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
index c712a500effa0e3f64c2187aaa330efdc6fb68a6..1dfad6aab396d689114b6198552a606c7bd4692d 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
@@ -2,100 +2,76 @@
 
 exports[`LoginForm component renders correctly 1`] = `
 <div
-  class="max-w-md p-6 mx-auto rounded-md shadow-lg mt-16"
+  class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%]"
 >
   <div
-    class="flex justify-center text-2xl"
+    class="px-6 py-4 mt-4"
   >
-    Logg inn
-  </div>
-  <div
-    class="m-6"
-    id="emailField"
-  >
-    <div
-      class="mb-6"
+    <h3
+      class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
     >
-      <label
-        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-        for="email"
+       Logg på 
+    </h3>
+    <div>
+      <div
+        class="w-full mt-6"
       >
-        E-post
-      </label>
-      <input
-        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-        id="email"
-        placeholder="eksempel@eksempel.no"
-        required=""
-        type="email"
-      />
-      <!-- error message -->
-      
-      
-    </div>
-  </div>
-  <div
-    class="m-6"
-    id="passwordField"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      for="password"
-    >
-      Passord
-    </label>
-    <input
-      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-      id="password"
-      required=""
-      type="password"
-    />
-    <!-- error message -->
-    
-    
-  </div>
-  <div
-    class="m-6"
-    id="buttonsField"
-  >
-    <div
-      class="align-items: flex-end; mb-6"
-    >
+        <input
+          class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+          placeholder="Skriv inn din e-postadresse *"
+          required=""
+          type="email"
+        />
+        <!-- error message -->
+        
+        
+      </div>
       <div
-        class="ml-3 text-sm"
+        class="w-full mt-6"
       >
-        <router-link
-          class="text-blue-600 flex justify-end"
-          to="/resetPassword"
-        >
-          Glemt passord
-        </router-link>
+        <input
+          class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+          placeholder="Vennligst oppgi passordet ditt *"
+          required=""
+          type="password"
+        />
+        <!-- error message -->
+        
+        
       </div>
-    </div>
-    <button
-      class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5"
-    >
-       Logg inn 
-    </button>
-    <div
-      class="align-items: flex-end; mb-6 mt-12"
-    >
       <div
-        class="text-sm"
+        class="flex items-center justify-between mt-8"
       >
         <router-link
-          class="text-blue-600 flex justify-center"
-          to="register"
+          class="text-primary-medium"
+          to="/resetPassword"
         >
-          Ny bruker
+          Glemt passord?
         </router-link>
+        <button
+          class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light"
+        >
+          Logg på
+        </button>
       </div>
     </div>
-    <div
-      class="flex justify-center"
+  </div>
+  <div
+    class="flex items-center justify-center py-4 text-center bg-gray-50 dark:bg-gray-700"
+  >
+    <router-link
+      class="mx-2 text-sm font-bold text-primary-medium dark:text-primary-light hover:underline"
+      to="/register"
     >
-      <label />
-    </div>
+      Opprette ny konto
+    </router-link>
+  </div>
+  <div
+    class="flex items-center justify-center text-center bg-gray-50"
+  >
+    <label
+      class="mx-2 text-sm font-bold text-red-500 dark:text-primary-light hover:underline"
+    />
   </div>
 </div>
 `;
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap
index 8ecfffa14f203f189c5ed8a266f9787f14eeb86d..ca5a4de5c26fd7c68fd656ae6e704a74dfdd42d3 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap
@@ -15,7 +15,7 @@ exports[`NewPasswordForm component renders correctly 1`] = `
       Nytt passord
     </label>
     <input
-      class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
+      class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-light dark:focus:border-primary-light focus:ring-primary-light focus:outline-none focus:ring focus:ring-opacity-40"
       type="password"
     />
     <!-- error message -->
@@ -37,7 +37,7 @@ exports[`NewPasswordForm component renders correctly 1`] = `
       </label>
     </div>
     <input
-      class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
+      class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-light dark:focus:border-primary-light focus:ring-primary-light focus:outline-none focus:ring focus:ring-opacity-40"
       type="password"
     />
     <!-- error message -->
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap
index f1a63d05fc1ff431b8677b83e799442934955b68..5dc934f34616017376f52244bdce820b86ad7d07 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap
@@ -2,122 +2,94 @@
 
 exports[`RegisterFormComponent renders correctly 1`] = `
 <div
-  data-v-app=""
+  class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4"
 >
-  
-  <section
-    class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800"
+  <h3
+    class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
   >
-    <h2
-      class="text-lg font-semibold text-gray-700 capitalize dark:text-white"
+     Opprett ny bruker 
+  </h3>
+  <form>
+    <div
+      class="grid grid-cols-1 gap-6 mt-4"
     >
-       Opprett ny bruker 
-    </h2>
-    <form>
-      <div
-        class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2"
-      >
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="email"
-          >
-            E-mail
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            id="email"
-            type="email"
-          />
-        </div>
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="password"
-          >
-            Passord
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            id="password"
-            type="password"
-          />
-        </div>
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="confirmPassword"
-          >
-            Bekreft Passord
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            id="confirmPassword"
-            type="password"
-          />
-        </div>
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="firstName"
-          >
-            Fornavn
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            data-test="firstNameTest"
-            id="firstName"
-            type="text"
-          />
-        </div>
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="lastName"
-          >
-            Etternavn
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            id="lastName"
-            type="text"
-          />
-        </div>
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="address"
-          >
-            Addresse
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            id="address"
-            type="text"
-          />
-        </div>
+      <div>
+        <input
+          class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+          id="email"
+          placeholder="E-post adresse"
+          type="email"
+        />
+        <!-- error message -->
+        
+        
       </div>
-      <div
-        class="flex justify-end mt-6"
-      >
-        <button
-          class="px-6 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600"
-          type="submit"
-        >
-          <div>
-            Lagre
-          </div>
-        </button>
+      <div>
+        <input
+          class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+          id="password"
+          placeholder="Passord"
+          type="password"
+        />
+        <!-- error message -->
+        
+        
       </div>
-    </form>
-  </section>
-  <ul
-    data-test="errorMessageList"
-  >
-    <!--v-if-->
-    
-    
-  </ul>
-  
+      <div>
+        <input
+          class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+          id="confirmPassword"
+          placeholder="Bekreft passord"
+          type="password"
+        />
+        <!-- error message -->
+        
+        
+      </div>
+      <div>
+        <input
+          class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+          data-test="firstNameTest"
+          id="firstName"
+          placeholder="Fornavn"
+          type="text"
+        />
+        <!-- error message -->
+        
+        
+      </div>
+      <div>
+        <input
+          class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+          id="lastName"
+          placeholder="Etternavn"
+          type="text"
+        />
+        <!-- error message -->
+        
+        
+      </div>
+      <div>
+        <input
+          class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+          id="address"
+          placeholder="Adresse"
+          type="text"
+        />
+        <!-- error message -->
+        
+        
+      </div>
+    </div>
+    <div
+      class="flex justify-end mt-6"
+    >
+      <button
+        class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light"
+      >
+        Lagre
+      </button>
+    </div>
+  </form>
 </div>
 `;
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap
index e2fd53153e1a948a06f396c1f77ad5b978e48eb0..7b673ca96522a31d724f0d34ffa6998763ac92e2 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap
@@ -18,7 +18,7 @@ exports[`ResetPasswordForm component renders correctly 1`] = `
         E-post
       </label>
       <input
-        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-medium focus:border-primary-medium block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-medium dark:focus:border-primary-medium"
         id="email"
         placeholder="eksempel@eksempel.no"
         required=""
@@ -30,7 +30,7 @@ exports[`ResetPasswordForm component renders correctly 1`] = `
     </div>
   </div>
   <button
-    class="flex justify-center align-items: flex-end; text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+    class="flex justify-center align-items: flex-end; text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-dark"
   >
      Send e-post 
   </button>
diff --git a/tests/unit/component-tests/user-component-tests/register-user-component.spec.js b/tests/unit/component-tests/user-component-tests/register-user-component.spec.js
index b6a4474a3c1a8081c89c0dc2cb3e75b1ea0c513c..142860bf75a1138bfa4351ffb688c9982f01adbe 100644
--- a/tests/unit/component-tests/user-component-tests/register-user-component.spec.js
+++ b/tests/unit/component-tests/user-component-tests/register-user-component.spec.js
@@ -16,15 +16,8 @@ describe("RegisterFormComponent", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
 
-  it("renders error message to user", async () => {
-    await wrapper.setData({ errorMessage: "test message" });
-    expect(wrapper.find('li[data-test="customErrorMsg"]').text()).toBe(
-      "test message"
-    );
-  });
-
   it("renders the h2 text correctly", () => {
-    expect(wrapper.find("h2").text()).toBe("Opprett ny bruker");
+    expect(wrapper.find("h3").text()).toBe("Opprett ny bruker");
   });
 
   it("has a button", () => {
@@ -36,11 +29,6 @@ describe("RegisterFormComponent", () => {
     expect(wrapper.vm.firstName).toBe("Gunnar");
   });
 
-  it("displays 5 error messages when submit is clicked with no data", async () => {
-    await wrapper.find("button").trigger("click");
-    expect(wrapper.findAll("li").length).toBe(5);
-  });
-
   /*   it("button click with correct sum", () => {
     wrapper.setData({ guess: "15" });
     const button = wrapper.find("button");