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 120cfe434e692a74fb3567f5e1d9c8350c2f5d72..9d36eafc7790593410c54a64a51c3406cb1eeed7 100644
--- a/src/components/BaseComponents/CommunityHeader.vue
+++ b/src/components/BaseComponents/CommunityHeader.vue
@@ -31,27 +31,44 @@
       <!-- 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"
+          v-if="!member"
+          :text="'Bli med'"
+          @click="joinCommunity(community.communityId)"
+          class="m-2"
         />
 
-      <CustomFooterModal
+        <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" class="w-9 h-9 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-      </svg>
+        <svg
+          @click="toggle"
+          xmlns="http://www.w3.org/2000/svg"
+          class="w-9 h-9 cursor-pointer"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 6h16M4 12h16M4 18h16"
+          />
+        </svg>
 
-      <CommunityHamburger v-if="hamburgerOpen" class="origin-top-right absolute right-0" :community-i-d="community.communityId"/> <!-- class="absolute" -->
+        <CommunityHamburger
+          v-if="hamburgerOpen"
+          class="origin-top-right absolute right-0"
+          :community-i-d="community.communityId"
+        />
+        <!-- class="absolute" -->
       </div>
     </div>
   </div>
@@ -60,7 +77,10 @@
 <script>
 import CommunityHamburger from "@/components/CommunityComponents/CommunityHamburger";
 import ColoredButton from "@/components/BaseComponents/ColoredButton";
-import { JoinOpenCommunity, GetIfUserAlreadyInCommunity } from "@/utils/apiutil";
+import {
+  JoinOpenCommunity,
+  GetIfUserAlreadyInCommunity,
+} from "@/utils/apiutil";
 import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal";
 
 export default {
@@ -70,12 +90,12 @@ export default {
     ColoredButton,
     CustomFooterModal,
   },
-  data(){
-    return{
+  data() {
+    return {
       hamburgerOpen: false,
       dialogOpen: false,
       member: true,
-    }
+    };
   },
   props: {
     adminStatus: Boolean,
@@ -86,37 +106,37 @@ export default {
       visibility: Number,
       location: String,
       picture: String,
-    }
+    },
   },
   methods: {
     //To open and close the hamburger menu
-    toggle: function (){
-      if(this.hamburgerOpen){
+    toggle: function () {
+      if (this.hamburgerOpen) {
         this.hamburgerOpen = false;
-      }
-      else{
+      } else {
         this.hamburgerOpen = true;
       }
     },
-    joinCommunity: async function(id){
+    joinCommunity: async function (id) {
       const response = await JoinOpenCommunity(id);
-      if(response === "Login to join any community"){
+      if (response === "Login to join any community") {
         this.dialogOpen = true;
-      }
-      else{
+      } else {
         window.location.reload();
       }
     },
-    getIfUserInCommunity: async function(){
-      try{
-        this.member = await GetIfUserAlreadyInCommunity(this.$router.currentRoute.value.params.communityID);
-      } catch (error){
+    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
index 46fb4fc61a3e964c7c768148f3f546b92e2fa1cf..a6cbb32e98ed5e1f94ec9b784ea492b9b138048e 100644
--- a/src/components/BaseComponents/InputField.vue
+++ b/src/components/BaseComponents/InputField.vue
@@ -1,10 +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"
+  <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>
\ No newline at end of file
+  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/CommunityHamburger.vue b/src/components/CommunityComponents/CommunityHamburger.vue
index 73e9d646ef59b404c97a090e9934b4834ecc535e..e060566e73a400fbe368f168136a2e1cff1f8a7b 100644
--- a/src/components/CommunityComponents/CommunityHamburger.vue
+++ b/src/components/CommunityComponents/CommunityHamburger.vue
@@ -1,33 +1,33 @@
 <template>
   <div
-      id="dropdown"
-      class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
+    id="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" >
+    <ul class="py-1">
       <li id="newItem">
         <router-link
-            to="/addNewItem"
-            class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-        >Opprett Utleie</router-link
+          to="/addNewItem"
+          class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+          >Opprett Utleie</router-link
         >
       </li>
       <li id="getMembers">
         <router-link
-            :to="'/group/' + communityID + '/memberlist'"
-            class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-        >Se Medlemmer
+          :to="'/group/' + communityID + '/memberlist'"
+          class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+          >Se Medlemmer
         </router-link>
       </li>
       <li id="adminGroup">
         <router-link
-            :to="'/group/' + communityID + '/memberlist'"
-            class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-        >Administrer Gruppe</router-link
+          :to="'/group/' + communityID + '/memberlist'"
+          class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+          >Administrer Gruppe</router-link
         >
       </li>
       <li id="leaveGroup">
         <div
-            class="cursor-pointer 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="cursor-pointer 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"
         >
           Forlat Gruppe
         </div>
@@ -42,6 +42,5 @@ export default {
   props: {
     communityID: Number,
   },
-}
+};
 </script>
-
diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue
index 20ad43cb2022468cfd0bdcf9706fa317127d55f8..ad731fac58a79886653e6e2e25334c31c1e7bb74 100644
--- a/src/components/CommunityComponents/CommunityHome.vue
+++ b/src/components/CommunityComponents/CommunityHome.vue
@@ -6,7 +6,6 @@
       class="mb-5"
     />
 
-
     <!-- Search field -->
     <div class="relative" id="searchComponent">
       <span class="absolute inset-y-0 left-0 flex items-center pl-3">
@@ -24,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 e6806f59f695d76c8a4cb8c76b6e1a4443813101..28e910a7c60693985ec5fdcb9fc49b6a6e7aad6d 100644
--- a/src/components/CommunityComponents/CommunityListItem.vue
+++ b/src/components/CommunityComponents/CommunityListItem.vue
@@ -24,10 +24,10 @@
 
       <!-- 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"
+        v-if="!member && community.visibility === 1"
+        :text="'GÃ¥ til'"
+        @click="goToGroup(community.communityId)"
+        class="m-2"
       />
     </div>
 
@@ -77,7 +77,7 @@ export default {
   data() {
     return {
       dialogOpen: false,
-      responseToUser: '',
+      responseToUser: "",
     };
   },
   props: {
@@ -90,10 +90,9 @@ export default {
     },
     async goToJoin(id) {
       const response = await JoinOpenCommunity(id);
-      if(response === "Login to join any community"){
+      if (response === "Login to join any community") {
         this.responseToUser = "Logg inn først for å bli med i en gruppe";
-      }
-      else{
+      } else {
         this.$router.push("/community/" + id);
       }
     },
diff --git a/src/components/CommunityComponents/MemberList.vue b/src/components/CommunityComponents/MemberList.vue
index edd765faa9acf48700659998d0cbff63536a9adb..b8360de5851fd26e86d6e9c5925f68eec3011e31 100644
--- a/src/components/CommunityComponents/MemberList.vue
+++ b/src/components/CommunityComponents/MemberList.vue
@@ -1,5 +1,9 @@
 <template>
-  <CommunityHeader :admin-status="false" :community="community"  class="mb-5 mt-5"/>
+  <CommunityHeader
+    :admin-status="false"
+    :community="community"
+    class="mb-5 mt-5"
+  />
   <ul>
     <li v-for="member in memberlist" :key="member.userId">
       <user-list-item-card :admin="admin" :user="member" />
@@ -26,17 +30,21 @@ export default {
   props: {
     admin: Boolean,
   },
-  methods:{
-    getAllMembersOfCommunity: async function(){
-      this.memberlist = await GetMembersOfCommunity(this.$router.currentRoute.value.params.id);
+  methods: {
+    getAllMembersOfCommunity: async function () {
+      this.memberlist = await GetMembersOfCommunity(
+        this.$router.currentRoute.value.params.id
+      );
+    },
+    getCommunity: async function () {
+      this.community = await GetCommunity(
+        this.$router.currentRoute.value.params.id
+      );
     },
-    getCommunity: async function(){
-      this.community = await GetCommunity(this.$router.currentRoute.value.params.id);
-    }
   },
   beforeMount() {
     this.getAllMembersOfCommunity();
     this.getCommunity();
-  }
+  },
 };
 </script>
diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index 3973a7150e78a731c03457dc4ba5c6ae45a4416a..df068e7a3a788a8a8b505923240db216d23b961b 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -1,7 +1,13 @@
 <template>
-  <div class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4">
+  <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 -->
-    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Opprett ny gruppe</h3>
+    <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">
@@ -12,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"
@@ -30,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"
@@ -57,18 +63,18 @@
       <input
         type="text"
         id="title"
-        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"
+        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>
@@ -82,18 +88,18 @@
       >
       <input
         type="text"
-        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"
+        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>
@@ -110,17 +116,17 @@
         id="description"
         rows="4"
         v-model="v$.group.description.$model"
-        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"
+        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>
@@ -146,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"
@@ -175,12 +179,7 @@
 
     <!-- Save item button -->
     <div class="flex justify-center mt-10">
-      <Button
-        @click="saveClicked"
-        id="saveButton"
-        :text="'Lagre'"
-      >
-      </Button>
+      <Button @click="saveClicked" id="saveButton" :text="'Lagre'"> </Button>
     </div>
   </div>
 </template>
@@ -194,7 +193,7 @@ import Button from "@/components/BaseComponents/ColoredButton";
 export default {
   name: "CreateNewGroup.vue",
 
-  components:{
+  components: {
     Button,
   },
   setup() {
diff --git a/src/components/CommunityComponents/NewItemForm.vue b/src/components/CommunityComponents/NewItemForm.vue
index 9e52408f85d5623f1706b998dd77f457d6baba22..05e46edf06e298d7e70a5731fc941c1a69900080 100644
--- a/src/components/CommunityComponents/NewItemForm.vue
+++ b/src/components/CommunityComponents/NewItemForm.vue
@@ -1,7 +1,13 @@
 <template>
-  <div class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[3%] p-4">
+  <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 -->
-    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Utleie</h3>
+    <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 }">
@@ -13,18 +19,18 @@
       <input
         type="text"
         id="title"
-        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"
+        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>
@@ -40,7 +46,7 @@
       <select
         v-model="v$.item.select.$model"
         id="categories"
-        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"
+        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
@@ -56,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>
@@ -74,7 +80,7 @@
       >
       <select
         v-model="v$.item.selectGroup.$model"
-        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"
+        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
@@ -90,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>
@@ -111,17 +117,17 @@
         type="number"
         v-model="v$.item.price.$model"
         id="price"
-        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"
+        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>
@@ -138,17 +144,17 @@
         id="description"
         rows="4"
         v-model="v$.item.description.$model"
-        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"
+        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>
@@ -162,7 +168,7 @@
       >
       <input
         type="text"
-        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"
+        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
@@ -170,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>
@@ -198,10 +204,7 @@
         accept="image/png, image/jpeg"
       />
 
-      <Button
-          :text="'Velg bilde'"
-        @click="$refs.file.click()"
-        />
+      <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" />
@@ -210,12 +213,7 @@
 
     <!-- Save item button -->
     <div class="flex justify-center">
-      <Button
-          :text="'Lagre'"
-        @click="saveClicked"
-        id="saveButton"
-      />
-
+      <Button :text="'Lagre'" @click="saveClicked" id="saveButton" />
     </div>
   </div>
 </template>
@@ -237,7 +235,7 @@ import {
 export default {
   name: "AddNewItem",
 
-  components:{
+  components: {
     Button,
   },
 
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 f3259d7e0976297467fba469ab74b43a6e386b8b..5b0756332f1d1537e74dbeaa9e301efcae83e511 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -1,66 +1,90 @@
 <template>
-  <div class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%]">
+  <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>
+      <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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
-                 type="email"
-                      placeholder="Skriv inn din e-postadresse *"
-                      v-model="v$.user.email.$model"
-                      required
+        <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"
+              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 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"
-                 type="password"
-                 placeholder="Vennligst oppgi passordet ditt *"
-                 v-model="v$.user.password.$model"
-                 @keyup.enter="loginClicked"
-                 required
+        <div
+          class="w-full mt-6"
+          :class="{ error: v$.user.password.$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="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-for="(error, index) of v$.user.password.$errors"
-              :key="index"
+            class="text-red-600 text-sm"
+            v-for="(error, index) of v$.user.password.$errors"
+            :key="index"
           >
             <div
-                class="text-red-600 text-sm"
-                v-show="showError"
-                id="passwordErrorId"
+              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-blue-500">Glemt passord?</router-link>
+        <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 class="flex items-center justify-center py-4 text-center bg-gray-50 dark:bg-gray-700">
-      <router-link to="/register" class="mx-2 text-sm font-bold text-blue-500 dark:text-blue-400 hover:underline">Opprette ny konto</router-link>
+    <div
+      class="flex items-center justify-center py-4 text-center bg-gray-50 dark:bg-gray-700"
+    >
+      <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>
-    <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-blue-400 hover:underline">{{ message }}</label>
+    <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
+      >
     </div>
   </div>
 </template>
@@ -69,7 +93,7 @@
 import useVuelidate from "@vuelidate/core";
 import { required, email, helpers } from "@vuelidate/validators";
 import { doLogin } from "@/utils/apiutil";
-import Button from "@/components/BaseComponents/ColoredButton"
+import Button from "@/components/BaseComponents/ColoredButton";
 
 export default {
   name: "LoginForm.vue",
@@ -108,7 +132,6 @@ export default {
 
   methods: {
     async loginClicked() {
-
       this.showError = true;
 
       this.v$.user.$touch();
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 5eef8afa9a6e08b2828e0b665dc125f7e22138c9..ce4b136d25abe1dbcf27d8d0f7e2a33898fbf3d3 100644
--- a/src/components/FormComponents/RegisterForm.vue
+++ b/src/components/FormComponents/RegisterForm.vue
@@ -2,27 +2,32 @@
   <div
     class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4"
   >
-    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Opprett ny bruker</h3>
+    <h3
+      class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+    >
+      Opprett ny bruker
+    </h3>
 
     <form @submit.prevent>
       <div class="grid grid-cols-1 gap-6 mt-4">
-        <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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
-                 v-model="email"
-                 id="email"
+        <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"
+            v-model="email"
+            id="email"
             type="email"
             placeholder="E-post adresse"
-         />
+          />
           <!-- error message -->
           <div
-              class="text-red-600 text-sm"
-              v-for="(error, index) of v$.email.$errors"
-              :key="index"
+            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"
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="emailErrorId"
             >
               {{ error.$message }}
             </div>
@@ -30,22 +35,23 @@
         </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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
-                 v-model="password"
-                 id="password"
+          <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"
             placeholder="Passord"
-            />
+          />
           <!-- error message -->
           <div
-              class="text-red-600 text-sm"
-              v-for="(error, index) of v$.password.$errors"
-              :key="index"
+            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"
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="passwordErrorId"
             >
               {{ error.$message }}
             </div>
@@ -53,22 +59,23 @@
         </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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
-                 v-model="confirmPassword"
+          <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"
             placeholder="Bekreft passord"
-            />
+          />
           <!-- error message -->
           <div
-              class="text-red-600 text-sm"
-              v-for="(error, index) of v$.confirmPassword.$errors"
-              :key="index"
+            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"
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="confirmPasswordErrorId"
             >
               {{ error.$message }}
             </div>
@@ -76,23 +83,24 @@
         </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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
-                 data-test="firstNameTest"
+          <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"
             placeholder="Fornavn"
-            />
+          />
           <!-- error message -->
           <div
-              class="text-red-600 text-sm"
-              v-for="(error, index) of v$.firstName.$errors"
-              :key="index"
+            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"
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="firstNameErrorId"
             >
               {{ error.$message }}
             </div>
@@ -100,22 +108,23 @@
         </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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
-                 v-model="lastName"
+          <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"
             placeholder="Etternavn"
-            />
+          />
           <!-- error message -->
           <div
-              class="text-red-600 text-sm"
-              v-for="(error, index) of v$.lastName.$errors"
-              :key="index"
+            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"
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="lastNameErrorId"
             >
               {{ error.$message }}
             </div>
@@ -123,22 +132,23 @@
         </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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
-                 v-model="address"
+          <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"
             placeholder="Adresse"
-            />
+          />
           <!-- error message -->
           <div
-              class="text-red-600 text-sm"
-              v-for="(error, index) of v$.address.$errors"
-              :key="index"
+            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"
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="addressErrorId"
             >
               {{ error.$message }}
             </div>
@@ -156,8 +166,14 @@
 <script>
 import useVuelidate from "@vuelidate/core";
 import { doLogin, registerUser } from "@/utils/apiutil";
-import {required, email, minLength, sameAs, helpers} from "@vuelidate/validators";
-import Button from "@/components/BaseComponents/ColoredButton"
+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
@@ -183,20 +199,32 @@ export default {
     return {
       email: {
         required: helpers.withMessage(`Feltet må være utfylt`, required),
-        email: helpers.withMessage('E-posten er ugyldig', email),
+        email: helpers.withMessage("E-posten er ugyldig", email),
         // isUnique: helpers.withAsync(isEmailTaken),
       },
       password: {
         required: helpers.withMessage(`Feltet må være utfylt`, required),
-        minLength: helpers.withMessage('Passordet må være minst 8 karakterer lang', minLength(8)),
+        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)
+        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),
       },
-      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)},
     };
   },
   methods: {
@@ -250,7 +278,6 @@ export default {
       const response = await registerUser(registerInfo);
 
       return response.status === 200;
-
     },
   },
 };
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/UserProfileComponents/LargeProfileCard.vue b/src/components/UserProfileComponents/LargeProfileCard.vue
index 5d8f87603e1cbe47fb7d30fb6a499d2be05731f7..08bdebd48ed65c5753281d64535e04b89dbf2055 100644
--- a/src/components/UserProfileComponents/LargeProfileCard.vue
+++ b/src/components/UserProfileComponents/LargeProfileCard.vue
@@ -25,7 +25,7 @@
       <div
         id="dropdown"
         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 "
+        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 absolute bg-white" aria-labelledby="dropdownDefault">
           <li>
@@ -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>
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/views/CommunityViews/MemberListView.vue b/src/views/CommunityViews/MemberListView.vue
index f3b0bd4aed89b8682b0a98602e9fb43e49537a06..9f63b476d52810f37e88b726803ca54b6ccc9266 100644
--- a/src/views/CommunityViews/MemberListView.vue
+++ b/src/views/CommunityViews/MemberListView.vue
@@ -1,5 +1,5 @@
 <template>
-  <MemberList/>
+  <MemberList />
 </template>
 
 <script>
diff --git a/src/views/FormViews/LoginView.vue b/src/views/FormViews/LoginView.vue
index 09d909a1ab309b57dcded51cf99cf8f96d0742c3..9b35159fb022cebd9f041bb806bed054024e6f91 100644
--- a/src/views/FormViews/LoginView.vue
+++ b/src/views/FormViews/LoginView.vue
@@ -12,4 +12,4 @@ export default {
     LoginForm,
   },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/tailwind.config.js b/tailwind.config.js
index 7cd4f37efd95627b8f362e1b210fd12b384925d9..1108079401f30bb7cfcf539149d36ff105100116 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,34 @@ module.exports = {
   darkMode: "class",
   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
   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: [],
 };
diff --git a/tests/unit/api-mock-tests/apiutil-memberlist.spec.js b/tests/unit/api-mock-tests/apiutil-memberlist.spec.js
index b3e41326b676400d5f708534b71d005eb1e57709..34fb55066190781d9d2aead4d106b2c6ea3c8098 100644
--- a/tests/unit/api-mock-tests/apiutil-memberlist.spec.js
+++ b/tests/unit/api-mock-tests/apiutil-memberlist.spec.js
@@ -1,37 +1,35 @@
-import {GetMembersOfCommunity} from "@/utils/apiutil";
+import { GetMembersOfCommunity } from "@/utils/apiutil";
 import axios from "axios";
 
 jest.mock("axios");
 
 describe("testing mocking of apiutil.js", () => {
+  it("check that existing group returns correct members", async () => {
+    const expectedResponse = {
+      member1: {
+        userId: 2,
+        email: "erik@erik.com",
+        firstName: "erik",
+        lastName: "hansen",
+        address: "gløshaugen",
+        picture: "ok",
+      },
 
-    it("check that existing group returns correct members", async () => {
+      member2: {
+        userId: 1,
+        email: "test@test.com",
+        firstName: "test",
+        lastName: "testesen",
+        address: "oslo",
+        picture: "ok",
+      },
+    };
 
-        const expectedResponse = {
-            member1: {
-                userId: 2,
-                email: "erik@erik.com",
-                firstName: "erik",
-                lastName: "hansen",
-                address: "gløshaugen",
-                picture: "ok"
-            },
+    axios.get.mockImplementation(() =>
+      Promise.resolve({ data: expectedResponse })
+    );
 
-            member2: {
-                userId: 1,
-                email: "test@test.com",
-                firstName: "test",
-                lastName: "testesen",
-                address: "oslo",
-                picture: "ok"
-            },
-        };
-
-        axios.get.mockImplementation(() =>
-            Promise.resolve({ data: expectedResponse })
-        );
-
-        const communityMembersResponse = await GetMembersOfCommunity(4040);
-        expect(communityMembersResponse).toBe(expectedResponse);
-    })
+    const communityMembersResponse = await GetMembersOfCommunity(4040);
+    expect(communityMembersResponse).toBe(expectedResponse);
+  });
 });
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 b18026618f7dea1253f990a46ed5d438fd89a9bf..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>
-    <!-- If the user is not a member in the community, this button will show -->
-    <!--v-if-->
-    <!-- If the user is member of the community, this hamburger menu will show -->
-    <div>
-      <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" -->
-    </div>
-  </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 f4e8a11d706cc3b757b4c238c808011af94de192..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
@@ -1,23 +1,19 @@
 import { mount } from "@vue/test-utils";
-import ColoredButton from "@/components/BaseComponents/ColoredButton.vue"
+import ColoredButton from "@/components/BaseComponents/ColoredButton.vue";
 
 describe("ColoredButtonComponent", () => {
   let wrapper;
 
   beforeEach(() => {
     wrapper = mount(ColoredButton, {
-        //passing prop to component
-        props: {
-            text: "hei"
-        }
+      //passing prop to component
+      props: {
+        text: "hei",
+      },
     });
   });
 
-  it("renders correctly", () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
-});
\ No newline at end of file
+});
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 2195ce373c26c2a664afdd49e97641529d84ff5d..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
@@ -1,31 +1,27 @@
 import { mount } from "@vue/test-utils";
-import CommunityHeader from "@/components/BaseComponents/CommunityHeader.vue"
+import CommunityHeader from "@/components/BaseComponents/CommunityHeader.vue";
 
 describe("CommunityHeader component", () => {
   let wrapper;
 
   beforeEach(() => {
     wrapper = mount(CommunityHeader, {
-        //passing prop to component
-        props: {
-            adminStatus: true,
-            community: {
-                communityId: 1,
-                name: "String",
-                description: "String",
-                visibility: 0,
-                location: "String",
-                picture: "String",
-            },
-        }
+      //passing prop to component
+      props: {
+        adminStatus: true,
+        community: {
+          communityId: 1,
+          name: "String",
+          description: "String",
+          visibility: 0,
+          location: "String",
+          picture: "String",
+        },
+      },
     });
   });
 
-  it("renders correctly", () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
-});
\ No newline at end of file
+});
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 78af6ef591ce36420890d664cdf7c37076511e00..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
@@ -1,28 +1,24 @@
 import { mount } from "@vue/test-utils";
-import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal.vue"
+import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal.vue";
 
 describe("IconButtonComponent", () => {
   let wrapper;
 
   beforeEach(() => {
     wrapper = mount(CustomFooterModal, {
-        //passing prop to component
-        props: {
-            visible: true,
-            title: "String",
-            message: "String",
-        },
-        slots: {
-            default: '<div class="fake-msg">String</div>'
-        }
+      //passing prop to component
+      props: {
+        visible: true,
+        title: "String",
+        message: "String",
+      },
+      slots: {
+        default: '<div class="fake-msg">String</div>',
+      },
     });
   });
 
-  it("renders correctly", () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
-});
\ No newline at end of file
+});
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 a45c915a6439cf3847ff0d09bc0a0ab24e386f82..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
@@ -1,23 +1,19 @@
 import { mount } from "@vue/test-utils";
-import IconButton from "@/components/BaseComponents/IconButton.vue"
+import IconButton from "@/components/BaseComponents/IconButton.vue";
 
 describe("IconButtonComponent", () => {
   let wrapper;
 
   beforeEach(() => {
     wrapper = mount(IconButton, {
-        //passing prop to component
-        props: {
-            text: "hei"
-        }
+      //passing prop to component
+      props: {
+        text: "hei",
+      },
     });
   });
 
-  it("renders correctly", () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
-});
\ No newline at end of file
+});
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 0f365733c3b5b5c0fb8171b7b292761a76b0afed..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
@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import NavBar from "@/components/BaseComponents/NavBar.vue"
+import NavBar from "@/components/BaseComponents/NavBar.vue";
 
 describe("NavBar component", () => {
   let wrapper;
@@ -8,11 +8,7 @@ describe("NavBar component", () => {
     wrapper = mount(NavBar);
   });
 
-  it("renders correctly", () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
-});
\ No newline at end of file
+});
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 8db68edc59a23e8164b35db818cc47b256743959..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
@@ -1,25 +1,21 @@
 import { mount } from "@vue/test-utils";
-import NotificationModal from "@/components/BaseComponents/NotificationModal.vue"
+import NotificationModal from "@/components/BaseComponents/NotificationModal.vue";
 
 describe("NotificationModal component", () => {
   let wrapper;
 
   beforeEach(() => {
     wrapper = mount(NotificationModal, {
-        //passing prop to component
-        props: {
-            visible: true,
-            title: "String",
-            message: "String",
-        }
+      //passing prop to component
+      props: {
+        visible: true,
+        title: "String",
+        message: "String",
+      },
     });
   });
 
-  it("renders correctly", () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
-});
\ No newline at end of file
+});
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
new file mode 100644
index 0000000000000000000000000000000000000000..0203fd3b821ba687b171ce226171b61b5a90deae
--- /dev/null
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
@@ -0,0 +1,175 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CreateNewGroup elements rendering renders correctly 1`] = `
+<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 -->
+  <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"
+  >
+    <label
+      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+      id="radioBoxLabel"
+    >
+      Synlighet
+    </label>
+    <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-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"
+        value="Ã…pen"
+      />
+      <label
+        class="form-check-label inline-block text-gray-800"
+        for="flexRadioOpen"
+        id="radioBoxOpenLabel"
+      >
+         Ã…pen 
+      </label>
+    </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-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"
+        value="Privat"
+      />
+      <label
+        class="form-check-label inline-block text-gray-800"
+        for="flexRadioPrivate"
+        id="radioBoxPrivateLabel"
+      >
+         Privat 
+      </label>
+    </div>
+  </div>
+  <!-- Title -->
+  <div
+    class="mt-6"
+  >
+    <label
+      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+      id="titleLabel"
+    >
+      Gruppenavn
+    </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"
+      id="title"
+      required=""
+      type="text"
+    />
+    <!-- error message for title-->
+    
+    
+  </div>
+  <!-- Place -->
+  <div
+    class="mt-6"
+  >
+    <label
+      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+    >
+      By/Sted
+    </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"
+      required=""
+      type="text"
+    />
+    <!-- error message for place-->
+    
+    
+  </div>
+  <!-- Description -->
+  <div
+    class="mt-6"
+  >
+    <label
+      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+      id="descriptionLabel"
+    >
+      Beskrivelse
+    </label>
+    <textarea
+      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"
+    />
+    <!-- error message for description -->
+    
+    
+  </div>
+  <!-- Images -->
+  <div
+    class="mt-6"
+  >
+    <label
+      class="block mb-2 text-xl font-medium text-gray-900 dark:text-gray-400"
+      id="imageLabel"
+    >
+       Bilde 
+    </label>
+    <input
+      accept="image/png, image/jpeg"
+      multiple=""
+      style="display: none;"
+      type="file"
+    />
+    <!-- Button for adding an image -->
+    <div
+      class="inline-flex rounded-md shadow-sm"
+    >
+      <div
+        class="text-error uppercase text-center"
+      >
+        midlertidig fjernet
+      </div>
+      <!-- &lt;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"
+          :disabled="imageAdded"
+        &gt;
+          Velg bilde
+        &lt;/button&gt; -->
+      <!-- Button for removing an image -->
+      <button
+        class="w-1/12 ml-5 text-white bg-white-500 font-medium rounded-lg text-sm"
+        style="display: none;"
+      >
+        <img
+          alt="Remove icon image"
+          src=""
+        />
+      </button>
+    </div>
+    <!-- Div box for showing all chosen images -->
+    
+    
+  </div>
+  <!-- Save item button -->
+  <div
+    class="flex justify-center mt-10"
+  >
+    <button-stub
+      id="saveButton"
+      text="Lagre"
+    />
+  </div>
+</div>
+`;
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
new file mode 100644
index 0000000000000000000000000000000000000000..c762c869566cb255d92ef914c550f218c79ed08b
--- /dev/null
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
@@ -0,0 +1,210 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NewItemForm component renders correctly 1`] = `
+<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 -->
+  <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"
+  >
+    <label
+      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+      id="titleLabel"
+    >
+      Tittel
+    </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"
+      id="title"
+      required=""
+      type="text"
+    />
+    <!-- error message for title-->
+    
+    
+  </div>
+  <!-- Select category -->
+  <div
+    class="mb-6"
+  >
+    <label
+      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+      id="selectCategoryLabel"
+    >
+      Kategori
+    </label>
+    <select
+      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
+        class="text-gray-400"
+        disabled=""
+        value=""
+      >
+         Select a category 
+      </option>
+      
+      <option
+        class="text-gray-900 text-sm"
+      >
+        Hage
+      </option>
+      <option
+        class="text-gray-900 text-sm"
+      >
+        Kjøkken
+      </option>
+      <option
+        class="text-gray-900 text-sm"
+      >
+        Musikk
+      </option>
+      <option
+        class="text-gray-900 text-sm"
+      >
+        Annet
+      </option>
+      
+    </select>
+    <!-- error message for select box -->
+    
+    
+  </div>
+  <!-- Select Group -->
+  <div
+    class="mb-6"
+  >
+    <label
+      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+    >
+      Gruppe
+    </label>
+    <select
+      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"
+        disabled=""
+        value=""
+      >
+         Select a Group 
+      </option>
+      
+      <option
+        class="text-gray-900 text-sm"
+      >
+        4040
+      </option>
+      <option
+        class="text-gray-900 text-sm"
+      >
+        4041
+      </option>
+      
+    </select>
+    <!-- error message for select box -->
+    
+    
+  </div>
+  <!-- price -->
+  <div
+    class="mb-6"
+  >
+    <label
+      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+      id="priceLabel"
+    >
+      Pris
+    </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"
+      id="price"
+      required=""
+      type="number"
+    />
+    <!-- error message for price -->
+    
+    
+  </div>
+  <!-- Description -->
+  <div
+    class="mb-6"
+  >
+    <label
+      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+      id="descriptionLabel"
+    >
+      Beskrivelse
+    </label>
+    <textarea
+      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"
+    />
+    <!-- error message for description -->
+    
+    
+  </div>
+  <!-- Address -->
+  <div
+    class="mb-6"
+  >
+    <label
+      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+    >
+      Adresse
+    </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"
+      id="adress"
+      required=""
+      type="text"
+    />
+    <!-- error message for address-->
+    
+    
+  </div>
+  <!-- Images -->
+  <div>
+    <label
+      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+      id="imageLabel"
+    >
+       Bilder 
+    </label>
+    <input
+      accept="image/png, image/jpeg"
+      multiple=""
+      style="display: none;"
+      type="file"
+    />
+    <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"
+    >
+      Velg bilde
+    </button>
+    
+    
+  </div>
+  <!-- Save item button -->
+  <div
+    class="flex justify-center"
+  >
+    <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"
+      id="saveButton"
+    >
+      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/community-component-tests/community-hamburger.spec.js b/tests/unit/component-tests/community-component-tests/community-hamburger.spec.js
index 658e30ee73eb2eb7ccee7b880151927f84c6e7b2..a6834e8680d1d61c29962436e568165fb8c2b937 100644
--- a/tests/unit/component-tests/community-component-tests/community-hamburger.spec.js
+++ b/tests/unit/component-tests/community-component-tests/community-hamburger.spec.js
@@ -2,12 +2,12 @@ import { shallowMount } from "@vue/test-utils";
 import CommunityHamburger from "@/components/CommunityComponents/CommunityHamburger.vue";
 
 describe("CommunityHamburger elements rendering", () => {
-    it("renders all li fields", () => {
-        const wrapper = shallowMount(CommunityHamburger);
+  it("renders all li fields", () => {
+    const wrapper = shallowMount(CommunityHamburger);
 
-        expect(wrapper.find("#newItem").text()).toMatch("Opprett Utleie");
-        expect(wrapper.find("#getMembers").text()).toMatch("Se Medlemmer");
-        expect(wrapper.find("#adminGroup").text()).toMatch("Administrer Gruppe");
-        expect(wrapper.find("#leaveGroup").text()).toMatch("Forlat Gruppe");
-    });
+    expect(wrapper.find("#newItem").text()).toMatch("Opprett Utleie");
+    expect(wrapper.find("#getMembers").text()).toMatch("Se Medlemmer");
+    expect(wrapper.find("#adminGroup").text()).toMatch("Administrer Gruppe");
+    expect(wrapper.find("#leaveGroup").text()).toMatch("Forlat Gruppe");
+  });
 });
diff --git a/tests/unit/component-tests/community-component-tests/community-list-item.spec.js b/tests/unit/component-tests/community-component-tests/community-list-item.spec.js
index 177ad076e6a9be8d375040c92446951f71935f81..3610f19312ab656bfbe7881c21e072626b164cb1 100644
--- a/tests/unit/component-tests/community-component-tests/community-list-item.spec.js
+++ b/tests/unit/component-tests/community-component-tests/community-list-item.spec.js
@@ -1,23 +1,23 @@
 import { mount } from "@vue/test-utils";
-import CommunityListItem from "@/components/CommunityComponents/CommunityListItem.vue"
+import CommunityListItem from "@/components/CommunityComponents/CommunityListItem.vue";
 
 describe("CommunityListItem component", () => {
   let wrapper;
 
   beforeEach(() => {
     wrapper = mount(CommunityListItem, {
-        //passing prop to component
-        props: {
-            community: {
-                communityId: 0,
-                name: "string",
-                description: "string",
-                visibility: 0,
-                location: "string",
-                picture: "string"
-            },
-            member: false,
-        }
+      //passing prop to component
+      props: {
+        community: {
+          communityId: 0,
+          name: "string",
+          description: "string",
+          visibility: 0,
+          location: "string",
+          picture: "string",
+        },
+        member: false,
+      },
     });
   });
 
@@ -28,4 +28,4 @@ describe("CommunityListItem component", () => {
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/component-tests/community-component-tests/community-list.spec.js b/tests/unit/component-tests/community-component-tests/community-list.spec.js
index 89518291810964e6903a888424ef6630d756ead7..fbd0968070e19814478e839c92245089f09013b8 100644
--- a/tests/unit/component-tests/community-component-tests/community-list.spec.js
+++ b/tests/unit/component-tests/community-component-tests/community-list.spec.js
@@ -1,31 +1,31 @@
 import { mount } from "@vue/test-utils";
-import CommunityList from "@/components/CommunityComponents/CommunityList.vue"
+import CommunityList from "@/components/CommunityComponents/CommunityList.vue";
 
 describe("CommunityList component", () => {
   let wrapper;
 
   beforeEach(() => {
     wrapper = mount(CommunityList, {
-        props:{
-            groupList: [
-                {
-                    communityId: 0,
-                    name: "string",
-                    description: "string",
-                    visibility: 0,
-                    location: "string",
-                    picture: "string"
-                },
-                {
-                    communityId: 0,
-                    name: "string",
-                    description: "string",
-                    visibility: 0,
-                    location: "string",
-                    picture: "string"
-                },
-            ]
-        }
+      props: {
+        groupList: [
+          {
+            communityId: 0,
+            name: "string",
+            description: "string",
+            visibility: 0,
+            location: "string",
+            picture: "string",
+          },
+          {
+            communityId: 0,
+            name: "string",
+            description: "string",
+            visibility: 0,
+            location: "string",
+            picture: "string",
+          },
+        ],
+      },
     });
   });
 
@@ -36,4 +36,4 @@ describe("CommunityList component", () => {
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/component-tests/community-component-tests/item-card.spec.js b/tests/unit/component-tests/community-component-tests/item-card.spec.js
index e6725d6dac3f852a0be7ce702f06c62b9c899733..a03b348b8070bd4b572f33ec33d2aa641253458c 100644
--- a/tests/unit/component-tests/community-component-tests/item-card.spec.js
+++ b/tests/unit/component-tests/community-component-tests/item-card.spec.js
@@ -1,19 +1,19 @@
 import { mount } from "@vue/test-utils";
-import ItemCard from "@/components/CommunityComponents/ItemCard.vue"
+import ItemCard from "@/components/CommunityComponents/ItemCard.vue";
 
 describe("ItemCard component", () => {
   let wrapper;
 
   beforeEach(() => {
     wrapper = mount(ItemCard, {
-        props:{
-            item: {
-                img: "String",
-                address: "String",
-                title: "String",
-                pricePerDay: 0,
-            }
-        }
+      props: {
+        item: {
+          img: "String",
+          address: "String",
+          title: "String",
+          pricePerDay: 0,
+        },
+      },
     });
   });
 
@@ -24,4 +24,4 @@ describe("ItemCard component", () => {
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/component-tests/community-component-tests/new-item-form.spec.js b/tests/unit/component-tests/community-component-tests/new-item-form.spec.js
index 4559d4a832accadfd67fd70df516d6a71be8b316..8271342651aaae430c68cbac6f3a924b482384e1 100644
--- a/tests/unit/component-tests/community-component-tests/new-item-form.spec.js
+++ b/tests/unit/component-tests/community-component-tests/new-item-form.spec.js
@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import NewItemForm from "@/components/CommunityComponents/NewItemForm.vue"
+import NewItemForm from "@/components/CommunityComponents/NewItemForm.vue";
 
 describe("NewItemForm component", () => {
   let wrapper;
@@ -15,4 +15,4 @@ describe("NewItemForm component", () => {
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
-});
\ No newline at end of file
+});
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
new file mode 100644
index 0000000000000000000000000000000000000000..1dfad6aab396d689114b6198552a606c7bd4692d
--- /dev/null
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LoginForm component renders correctly 1`] = `
+<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"
+      >
+        <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="w-full mt-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="Vennligst oppgi passordet ditt *"
+          required=""
+          type="password"
+        />
+        <!-- error message -->
+        
+        
+      </div>
+      <div
+        class="flex items-center justify-between mt-8"
+      >
+        <router-link
+          class="text-primary-medium"
+          to="/resetPassword"
+        >
+          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>
+  <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"
+    >
+      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
new file mode 100644
index 0000000000000000000000000000000000000000..5dc934f34616017376f52244bdce820b86ad7d07
--- /dev/null
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap
@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RegisterFormComponent renders correctly 1`] = `
+<div
+  class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4"
+>
+  <h3
+    class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+  >
+     Opprett ny bruker 
+  </h3>
+  <form>
+    <div
+      class="grid grid-cols-1 gap-6 mt-4"
+    >
+      <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>
+        <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>
+      <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/login-form.spec.js b/tests/unit/component-tests/user-component-tests/login-form.spec.js
index ef07685bce250e5ed49e0415b75f9c2224aba16f..40fa711393e969435a609474c0f550f179513135 100644
--- a/tests/unit/component-tests/user-component-tests/login-form.spec.js
+++ b/tests/unit/component-tests/user-component-tests/login-form.spec.js
@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import LoginForm from "@/components/FormComponents/LoginForm.vue"
+import LoginForm from "@/components/FormComponents/LoginForm.vue";
 
 describe("LoginForm component", () => {
   let wrapper;
@@ -15,4 +15,4 @@ describe("LoginForm component", () => {
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/component-tests/user-component-tests/new-password-form.spec.js b/tests/unit/component-tests/user-component-tests/new-password-form.spec.js
index 738e6df439c544ed2692e461f8fc9cc9cbc52ec4..638e597bd9b130a6b2a1c69a0b724b3414436648 100644
--- a/tests/unit/component-tests/user-component-tests/new-password-form.spec.js
+++ b/tests/unit/component-tests/user-component-tests/new-password-form.spec.js
@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import NewPasswordForm from "@/components/FormComponents/NewPasswordForm.vue"
+import NewPasswordForm from "@/components/FormComponents/NewPasswordForm.vue";
 
 describe("NewPasswordForm component", () => {
   let wrapper;
@@ -15,4 +15,4 @@ describe("NewPasswordForm component", () => {
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/component-tests/user-component-tests/rating.spec.js b/tests/unit/component-tests/user-component-tests/rating.spec.js
index 4435347be1fe0d9dbfdf53f929cb525087d8f9ab..cdbcee60fc44be8c4e04b9f2dc4a42756f5a6699 100644
--- a/tests/unit/component-tests/user-component-tests/rating.spec.js
+++ b/tests/unit/component-tests/user-component-tests/rating.spec.js
@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import Rating from "@/components/UserProfileComponents/Rating.vue"
+import Rating from "@/components/UserProfileComponents/Rating.vue";
 
 describe("Rating component", () => {
   let wrapper;
@@ -15,4 +15,4 @@ describe("Rating component", () => {
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/component-tests/user-component-tests/reset-password-form.spec.js b/tests/unit/component-tests/user-component-tests/reset-password-form.spec.js
index e063a65ba1b599ad3db54182b6fb8243b83c4f4f..1dc9f0a4f379129d888436a42d40bf354ae56f66 100644
--- a/tests/unit/component-tests/user-component-tests/reset-password-form.spec.js
+++ b/tests/unit/component-tests/user-component-tests/reset-password-form.spec.js
@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import ResetPasswordForm from "@/components/FormComponents/ResetPasswordForm.vue"
+import ResetPasswordForm from "@/components/FormComponents/ResetPasswordForm.vue";
 
 describe("ResetPasswordForm component", () => {
   let wrapper;
@@ -15,4 +15,4 @@ describe("ResetPasswordForm component", () => {
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
-});
\ No newline at end of file
+});