diff --git a/package-lock.json b/package-lock.json
index 8128c7cae624745f25207e7ac2bf07f290c690ee..92415a10cf3e721007d669673ea0ebbbf5827a42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@heroicons/vue": "^1.0.6",
         "@mdi/font": "5.9.55",
+        "@vue-hero-icons/outline": "^1.7.2",
         "@vuelidate/core": "^2.0.0-alpha.40",
         "@vuelidate/validators": "^2.0.0-alpha.28",
         "axios": "^0.26.1",
@@ -2833,6 +2834,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@vue-hero-icons/outline": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@vue-hero-icons/outline/-/outline-1.7.2.tgz",
+      "integrity": "sha512-mgMpncarjZHXY1K2tyjbYHf53yQG9amroDR9t2iH/umpsN8+f8RNcTy1m131EZ8WBCm8MpF97XpXPV129rvtVg==",
+      "dependencies": {
+        "babel-helper-vue-jsx-merge-props": "^2.0.3"
+      }
+    },
     "node_modules/@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.2.1",
       "dev": true,
@@ -4173,6 +4182,11 @@
         "follow-redirects": "^1.14.8"
       }
     },
+    "node_modules/babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "node_modules/babel-jest": {
       "version": "27.5.1",
       "dev": true,
@@ -16919,6 +16933,14 @@
       "version": "21.0.0",
       "dev": true
     },
+    "@vue-hero-icons/outline": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@vue-hero-icons/outline/-/outline-1.7.2.tgz",
+      "integrity": "sha512-mgMpncarjZHXY1K2tyjbYHf53yQG9amroDR9t2iH/umpsN8+f8RNcTy1m131EZ8WBCm8MpF97XpXPV129rvtVg==",
+      "requires": {
+        "babel-helper-vue-jsx-merge-props": "^2.0.3"
+      }
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.2.1",
       "dev": true
@@ -17800,6 +17822,11 @@
         "follow-redirects": "^1.14.8"
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "babel-jest": {
       "version": "27.5.1",
       "dev": true,
diff --git a/package.json b/package.json
index 4b4f06e87feea6cbf22be72ac5bacc3aed4b4eaf..82bef75d775f37cffd5e8bda14ea138904251888 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@heroicons/vue": "^1.0.6",
     "@mdi/font": "5.9.55",
+    "@vue-hero-icons/outline": "^1.7.2",
     "@vuelidate/core": "^2.0.0-alpha.40",
     "@vuelidate/validators": "^2.0.0-alpha.28",
     "axios": "^0.26.1",
diff --git a/public/favicon.ico b/public/favicon.ico
index 2bbee9c7589aa7943fe472849934b7f220ed43cd..d899f3ca760e7fa3736c98bba9641cc472e4da64 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/src/assets/additem.png b/src/assets/additem.png
deleted file mode 100644
index 90717a87fef71f1c0a37ba3b80150954f52673c0..0000000000000000000000000000000000000000
Binary files a/src/assets/additem.png and /dev/null differ
diff --git a/src/assets/members.png b/src/assets/members.png
deleted file mode 100644
index 51775f6bead51014d3143631c292421752d024b6..0000000000000000000000000000000000000000
Binary files a/src/assets/members.png and /dev/null differ
diff --git a/src/assets/messages.png b/src/assets/messages.png
deleted file mode 100644
index b8c15889efc747b700220ca819b2c12caa09e780..0000000000000000000000000000000000000000
Binary files a/src/assets/messages.png and /dev/null differ
diff --git a/src/assets/newCommunity.png b/src/assets/newCommunity.png
deleted file mode 100644
index 73bfba9f8000cecabb461394d7fe2f6b90c02b56..0000000000000000000000000000000000000000
Binary files a/src/assets/newCommunity.png and /dev/null differ
diff --git a/src/assets/notifications.png b/src/assets/notifications.png
deleted file mode 100644
index a612605af4bc91be42f5989632fb3287aac7bbfd..0000000000000000000000000000000000000000
Binary files a/src/assets/notifications.png and /dev/null differ
diff --git a/src/assets/profile.png b/src/assets/profile.png
deleted file mode 100644
index 79b3e5f3624b8db0593ca77997f52633c34f7de9..0000000000000000000000000000000000000000
Binary files a/src/assets/profile.png and /dev/null differ
diff --git a/src/assets/removeIcon.png b/src/assets/removeIcon.png
deleted file mode 100644
index 3c66b2a75ff7d81fd33622bf13a903f838f114ee..0000000000000000000000000000000000000000
Binary files a/src/assets/removeIcon.png and /dev/null differ
diff --git a/src/components/BaseComponents/ColoredButton.vue b/src/components/BaseComponents/ColoredButton.vue
index 74091bb360a25e7d489994c4aded8e59544445e5..842c89e97c17bdc5bf5e35149be61c93449e45ed 100644
--- a/src/components/BaseComponents/ColoredButton.vue
+++ b/src/components/BaseComponents/ColoredButton.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+    class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light"
   >
     {{ text }}
   </button>
diff --git a/src/components/BaseComponents/CommunityHeader.vue b/src/components/BaseComponents/CommunityHeader.vue
index 6e2b31a722f7401e93c6d9d640ca911b85d1f251..9d36eafc7790593410c54a64a51c3406cb1eeed7 100644
--- a/src/components/BaseComponents/CommunityHeader.vue
+++ b/src/components/BaseComponents/CommunityHeader.vue
@@ -28,9 +28,25 @@
       </div>
     </div>
     <div>
-      <span class="hidden sm:block">
-        <!-- Legg dette til i button: v-if="adminStatus" -->
+      <!-- If the user is not a member in the community, this button will show -->
+      <div v-if="!member">
+        <ColoredButton
+          v-if="!member"
+          :text="'Bli med'"
+          @click="joinCommunity(community.communityId)"
+          class="m-2"
+        />
+
+        <CustomFooterModal
+          @close="this.dialogOpen = false"
+          :visible="dialogOpen"
+          title="Kan ikke bli med"
+          message="Logg inn først for å bli med i en gruppe."
+        />
+      </div>
 
+      <!-- If the user is member of the community, this hamburger menu will show -->
+      <div v-if="member">
         <svg
           @click="toggle"
           xmlns="http://www.w3.org/2000/svg"
@@ -53,21 +69,32 @@
           :community-i-d="community.communityId"
         />
         <!-- class="absolute" -->
-      </span>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import CommunityHamburger from "@/components/CommunityComponents/CommunityHamburger";
+import ColoredButton from "@/components/BaseComponents/ColoredButton";
+import {
+  JoinOpenCommunity,
+  GetIfUserAlreadyInCommunity,
+} from "@/utils/apiutil";
+import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal";
+
 export default {
   name: "CommunityHeader",
   components: {
     CommunityHamburger,
+    ColoredButton,
+    CustomFooterModal,
   },
   data() {
     return {
       hamburgerOpen: false,
+      dialogOpen: false,
+      member: true,
     };
   },
   props: {
@@ -82,6 +109,7 @@ export default {
     },
   },
   methods: {
+    //To open and close the hamburger menu
     toggle: function () {
       if (this.hamburgerOpen) {
         this.hamburgerOpen = false;
@@ -89,6 +117,26 @@ export default {
         this.hamburgerOpen = true;
       }
     },
+    joinCommunity: async function (id) {
+      const response = await JoinOpenCommunity(id);
+      if (response === "Login to join any community") {
+        this.dialogOpen = true;
+      } else {
+        window.location.reload();
+      }
+    },
+    getIfUserInCommunity: async function () {
+      try {
+        this.member = await GetIfUserAlreadyInCommunity(
+          this.$router.currentRoute.value.params.communityID
+        );
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+  beforeMount() {
+    this.getIfUserInCommunity();
   },
 };
 </script>
diff --git a/src/components/BaseComponents/CustomFooterModal.vue b/src/components/BaseComponents/CustomFooterModal.vue
index 8a6e57ca1707d02d53ab57a00b3c2626587f146d..e9b5467276a554a723968b7a48581428a9df78ea 100644
--- a/src/components/BaseComponents/CustomFooterModal.vue
+++ b/src/components/BaseComponents/CustomFooterModal.vue
@@ -2,7 +2,7 @@
   <!-- Main modal -->
   <div
     v-if="visible"
-    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full"
+    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto inset-0 h-full"
   >
     <div class="relative w-full h-full max-w-2xl p-4 md:h-auto">
       <!-- Modal content -->
diff --git a/src/components/BaseComponents/IconButton.vue b/src/components/BaseComponents/IconButton.vue
index 4bacbdf64c9f36c6ce5e9bc29146e24737f55ea4..973f04c78f374cdb6f8e728c59bd416d1aca4cf8 100644
--- a/src/components/BaseComponents/IconButton.vue
+++ b/src/components/BaseComponents/IconButton.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- Icon button -->
   <button
-    class="block w-fit text-white text-base bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+    class="block w-fit text-white text-base bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-dark"
   >
     <div class="flex flex-row px-5 py-2.5 h-10">
       <!-- Icon slot: Default content "Ban"-icon -->
diff --git a/src/components/BaseComponents/InputField.vue b/src/components/BaseComponents/InputField.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a6cbb32e98ed5e1f94ec9b784ea492b9b138048e
--- /dev/null
+++ b/src/components/BaseComponents/InputField.vue
@@ -0,0 +1,11 @@
+<template>
+  <input
+    class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
+  />
+</template>
+
+<script>
+export default {
+  name: "InputField",
+};
+</script>
diff --git a/src/components/BaseComponents/NavBar.vue b/src/components/BaseComponents/NavBar.vue
index a14c390128eea359968f895e823ecc620be36645..80dc7942f0d84a5b16b4fea9f89b4ea8a3082562 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
@@ -12,25 +12,22 @@
     </div>
     <ul class="flex">
       <li>
-        <img
+        <PlusIcon
           class="m-6 cursor-pointer h-7"
-          src="../../assets/additem.png"
           alt="Legg til"
           @click="$router.push('/addNewItem')"
         />
       </li>
       <li>
-        <img
+        <ChatAlt2Icon
           class="m-6 cursor-pointer h-7"
-          src="../../assets/messages.png"
           alt="Meldinger"
           @click="$router.push('/messages')"
         />
       </li>
       <li>
-        <img
+        <UserCircleIcon
           class="m-6 cursor-pointer h-7"
-          src="../../assets/profile.png"
           alt="Profil"
           @click="loadProfile"
         />
@@ -41,10 +38,17 @@
 
 <script>
 import { parseUserFromToken } from "@/utils/token-utils";
+import {PlusIcon, ChatAlt2Icon, UserCircleIcon} from "@heroicons/vue/outline";
 
 export default {
   name: "NavBar.vue",
 
+  components:{
+    PlusIcon,
+    ChatAlt2Icon,
+    UserCircleIcon,
+  },
+
   methods: {
     async loadProfile() {
       if (this.$store.state.user.token !== null) {
diff --git a/src/components/BaseComponents/NotificationModal.vue b/src/components/BaseComponents/NotificationModal.vue
index 5883ed10714253ab7a6ffe1f0416c5af75f5166a..1fa362f504d38cb7380d0ad26a1f8316c74fe823 100644
--- a/src/components/BaseComponents/NotificationModal.vue
+++ b/src/components/BaseComponents/NotificationModal.vue
@@ -2,7 +2,7 @@
   <!-- Main modal -->
   <div
     v-if="visible"
-    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full"
+    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto inset-0 h-full"
   >
     <div class="relative w-full h-full max-w-2xl p-4 md:h-auto">
       <!-- Modal content -->
diff --git a/src/components/ChatComponents/ChatMessage.vue b/src/components/ChatComponents/ChatMessage.vue
index d3e016a3d4b947d0b90cedb3ea9e07093a47a206..d6996776b48e22224434b1696f64e2cdb5fa3aef 100644
--- a/src/components/ChatComponents/ChatMessage.vue
+++ b/src/components/ChatComponents/ChatMessage.vue
@@ -34,7 +34,9 @@ export default {
   methods: {
     color() {
       console.log(this.userID);
-      return this?.message.from == this.userID ? "bg-gray-300" : "bg-blue-600";
+      return this?.message.from == this.userID
+        ? "bg-gray-300"
+        : "bg-primary-medium";
     },
     textColor() {
       return this?.message.from == this.userID ? "text-gray-900" : "text-white";
diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue
index e6cf391a30732b1b29ac542848fe4cfac2c58b8c..04880338669831b083312a74b888a7743be0b069 100644
--- a/src/components/CommunityComponents/CommunityHome.vue
+++ b/src/components/CommunityComponents/CommunityHome.vue
@@ -23,7 +23,7 @@
       <input
         type="text"
         id="searchInput"
-        class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
+        class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
         placeholder="Search"
         v-model="search"
       />
diff --git a/src/components/CommunityComponents/CommunityListItem.vue b/src/components/CommunityComponents/CommunityListItem.vue
index d75938f456c1ed61aad0ebc89db8e04a2282bc2f..28e910a7c60693985ec5fdcb9fc49b6a6e7aad6d 100644
--- a/src/components/CommunityComponents/CommunityListItem.vue
+++ b/src/components/CommunityComponents/CommunityListItem.vue
@@ -6,16 +6,36 @@
     :message="community.description"
   >
     <div class="flex justify-center p-2">
+      <!-- If a user is not a member in the community, this button will show -->
       <ColoredButton
         v-if="!member"
         :text="'Bli med'"
         @click="goToJoin(community.communityId)"
+        class="m-2"
       />
+
+      <!-- If a user is member this button will show -->
       <ColoredButton
         v-if="member"
         :text="'GÃ¥ til'"
         @click="goToGroup(community.communityId)"
+        class="m-2"
       />
+
+      <!-- If a user isn't member but the community is open, the user is able to get in to see listings(items) -->
+      <ColoredButton
+        v-if="!member && community.visibility === 1"
+        :text="'GÃ¥ til'"
+        @click="goToGroup(community.communityId)"
+        class="m-2"
+      />
+    </div>
+
+    <!-- If a user is not logges in and tries to join a community, this message shows -->
+    <div class="flex justify-center p-2">
+      <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+        {{ responseToUser }}
+      </p>
     </div>
   </CustomFooterModal>
   <div
@@ -44,6 +64,7 @@
 import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal.vue";
 import ColoredButton from "@/components/BaseComponents/ColoredButton.vue";
 import { UserGroupIcon, LockClosedIcon } from "@heroicons/vue/outline";
+import { JoinOpenCommunity } from "@/utils/apiutil";
 
 export default {
   name: "CommunityListItem",
@@ -56,6 +77,7 @@ export default {
   data() {
     return {
       dialogOpen: false,
+      responseToUser: "",
     };
   },
   props: {
@@ -66,8 +88,13 @@ export default {
     goToGroup(id) {
       this.$router.push("/community/" + id);
     },
-    goToJoin(id) {
-      this.$router.push("/community/" + id + "/join");
+    async goToJoin(id) {
+      const response = await JoinOpenCommunity(id);
+      if (response === "Login to join any community") {
+        this.responseToUser = "Logg inn først for å bli med i en gruppe";
+      } else {
+        this.$router.push("/community/" + id);
+      }
     },
     toggleDialog() {
       this.dialogOpen = !this.dialogOpen;
diff --git a/src/components/CommunityComponents/ItemCard.vue b/src/components/CommunityComponents/ItemCard.vue
index 4f4b52526a96f32d29ed839245254a5c12228f1e..089dc01a8043d3409d6806537e853cf95017cc28 100644
--- a/src/components/CommunityComponents/ItemCard.vue
+++ b/src/components/CommunityComponents/ItemCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mt-5">
-    <div class="w-52 rounded bg-gray-200">
+    <div class="w-4/5 rounded bg-gray-200">
       <img
         class="w-full"
         :src="item.img || require('../../assets/default-product.png')"
diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index bb3a4d8edfd877b35648111b8b9a28d4ab2c9575..d9bf923296a42c70521274ba6dcc5e275b75bb22 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -1,9 +1,11 @@
 <template>
-  <div class="m-6">
+  <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4">
     <!-- Component heading -->
-    <div class="flex justify-center mt-6">
-      <p class="text-4xl">Opprett Gruppe</p>
-    </div>
+    <h3
+      class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+    >
+      Opprett ny gruppe
+    </h3>
 
     <!-- Radio boxes -->
     <div class="mt-6">
@@ -14,7 +16,7 @@
       >
       <div class="form-check">
         <input
-          class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+          class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
           type="radio"
           name="flexRadioDefault"
           id="flexRadioOpen"
@@ -32,7 +34,7 @@
       </div>
       <div class="form-check">
         <input
-          class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+          class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
           type="radio"
           name="flexRadioDefault"
           id="flexRadioPrivate"
@@ -59,18 +61,18 @@
       <input
         type="text"
         id="title"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
         v-model="v$.group.name.$model"
         required
       />
 
       <!-- error message for title-->
       <div
-        class="text-red"
+        class="text-error"
         v-for="(error, index) of v$.group.name.$errors"
         :key="index"
       >
-        <div class="text-red-600 text-sm">
+        <div class="text-error text-sm">
           {{ error.$message }}
         </div>
       </div>
@@ -84,18 +86,18 @@
       >
       <input
         type="text"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
         v-model="v$.group.place.$model"
         required
       />
 
       <!-- error message for place-->
       <div
-        class="text-red"
+        class="text-error"
         v-for="(error, index) of v$.group.place.$errors"
         :key="index"
       >
-        <div class="text-red-600 text-sm">
+        <div class="text-error text-sm">
           {{ error.$message }}
         </div>
       </div>
@@ -112,17 +114,17 @@
         id="description"
         rows="4"
         v-model="v$.group.description.$model"
-        class="block p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
         required
       ></textarea>
 
       <!-- error message for description -->
       <div
-        class="text-red"
+        class="text-error"
         v-for="(error, index) of v$.group.description.$errors"
         :key="index"
       >
-        <div class="text-red-600 text-sm">
+        <div class="text-error text-sm">
           {{ error.$message }}
         </div>
       </div>
@@ -148,9 +150,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"
@@ -160,13 +160,6 @@
         </button> -->
 
         <!-- Button for removing an image -->
-        <button
-          class="w-1/12 ml-5 text-white bg-white-500 font-medium rounded-lg text-sm"
-          v-show="imageAdded"
-          @click="removeImage"
-        >
-          <img src="../../assets/removeIcon.png" alt="Remove icon image" />
-        </button>
       </div>
 
       <!-- Div box for showing all chosen images -->
@@ -176,14 +169,13 @@
     </div>
 
     <!-- Save item button -->
-    <div class="flex justify-center mt-10">
-      <button
+    <div class="flex justify-center mt-10 float-right">
+      <Button
         @click="saveClicked"
-        class="content-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
         id="saveButton"
+        :text="'Lagre'"
       >
-        Lagre
-      </button>
+      </Button>
     </div>
   </div>
 </template>
@@ -192,10 +184,14 @@
 import useVuelidate from "@vuelidate/core";
 import { required, helpers, maxLength } from "@vuelidate/validators";
 import { postNewgroup } from "@/utils/apiutil";
+import Button from "@/components/BaseComponents/ColoredButton";
 
 export default {
   name: "CreateNewGroup.vue",
 
+  components: {
+    Button,
+  },
   setup() {
     return { v$: useVuelidate() };
   },
diff --git a/src/components/CommunityComponents/NewItemForm.vue b/src/components/CommunityComponents/NewItemForm.vue
index 9324b2bb76cfe0df33fde7a0cad06bd202470708..ea6abb83500cae80226ad71f2816b129cce4fb85 100644
--- a/src/components/CommunityComponents/NewItemForm.vue
+++ b/src/components/CommunityComponents/NewItemForm.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="m-6">
+  <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4">
     <!-- Component heading -->
-    <div class="flex justify-center">
-      <p class="text-4xl mb-6 mt-6">Utleie</p>
-    </div>
+    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Opprett ny utleie</h3>
 
     <!-- Title -->
     <div class="mb-6" :class="{ error: v$.item.title.$errors.length }">
@@ -15,18 +13,18 @@
       <input
         type="text"
         id="title"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
         v-model="v$.item.title.$model"
         required
       />
 
       <!-- error message for title-->
       <div
-        class="text-red"
+        class="text-error"
         v-for="(error, index) of v$.item.title.$errors"
         :key="index"
       >
-        <div class="text-red-600 text-sm">
+        <div class="text-error text-sm">
           {{ error.$message }}
         </div>
       </div>
@@ -42,7 +40,7 @@
       <select
         v-model="v$.item.select.$model"
         id="categories"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
       >
         <option class="text-gray-400" value="" disabled selected>
           Select a category
@@ -58,11 +56,11 @@
 
       <!-- error message for select box -->
       <div
-        class="text-red"
+        class="text-error"
         v-for="(error, index) of v$.item.select.$errors"
         :key="index"
       >
-        <div class="text-red-600 text-sm">
+        <div class="text-error text-sm">
           {{ error.$message }}
         </div>
       </div>
@@ -76,7 +74,7 @@
       >
       <select
         v-model="v$.item.selectGroup.$model"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
       >
         <option class="text-gray-400" value="" disabled selected>
           Select a Group
@@ -92,11 +90,11 @@
 
       <!-- error message for select box -->
       <div
-        class="text-red"
+        class="text-error"
         v-for="(error, index) of v$.item.selectGroup.$errors"
         :key="index"
       >
-        <div class="text-red-600 text-sm">
+        <div class="text-error text-sm">
           {{ error.$message }}
         </div>
       </div>
@@ -113,17 +111,17 @@
         type="number"
         v-model="v$.item.price.$model"
         id="price"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
         required
       />
 
       <!-- error message for price -->
       <div
-        class="text-red"
+        class="text-error"
         v-for="(error, index) of v$.item.price.$errors"
         :key="index"
       >
-        <div class="text-red-600 text-sm">
+        <div class="text-error text-sm">
           {{ error.$message }}
         </div>
       </div>
@@ -140,17 +138,17 @@
         id="description"
         rows="4"
         v-model="v$.item.description.$model"
-        class="block p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
         required
       ></textarea>
 
       <!-- error message for description -->
       <div
-        class="text-red"
+        class="text-error"
         v-for="(error, index) of v$.item.description.$errors"
         :key="index"
       >
-        <div class="text-red-600 text-sm">
+        <div class="text-error text-sm">
           {{ error.$message }}
         </div>
       </div>
@@ -164,7 +162,7 @@
       >
       <input
         type="text"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
         v-model="v$.item.address.$model"
         id="adress"
         required
@@ -172,11 +170,11 @@
 
       <!-- error message for address-->
       <div
-        class="text-red"
+        class="text-error"
         v-for="(error, index) of v$.item.address.$errors"
         :key="index"
       >
-        <div class="text-red-600 text-sm">
+        <div class="text-error text-sm">
           {{ error.$message }}
         </div>
       </div>
@@ -200,12 +198,7 @@
         accept="image/png, image/jpeg"
       />
 
-      <button
-        @click="$refs.file.click()"
-        class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800"
-      >
-        Velg bilde
-      </button>
+      <Button :text="'Velg bilde'" @click="$refs.file.click()" />
 
       <div v-for="image in item.images" :key="image" class="m-2">
         <img :src="image" class="w-2/5 inline" alt="Bilde av gjenstanden" />
@@ -213,14 +206,8 @@
     </div>
 
     <!-- Save item button -->
-    <div class="flex justify-center">
-      <button
-        @click="saveClicked"
-        class="content-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        id="saveButton"
-      >
-        Lagre
-      </button>
+    <div class="float-right">
+      <Button :text="'Lagre'" @click="saveClicked" id="saveButton" />
     </div>
   </div>
 </template>
@@ -229,6 +216,7 @@
 import useVuelidate from "@vuelidate/core";
 import { parseUserFromToken } from "@/utils/token-utils";
 import { postNewItem } from "@/utils/apiutil";
+import Button from "@/components/BaseComponents/ColoredButton";
 
 import {
   required,
@@ -241,6 +229,10 @@ import {
 export default {
   name: "AddNewItem",
 
+  components: {
+    Button,
+  },
+
   setup() {
     return { v$: useVuelidate() };
   },
diff --git a/src/components/CommunityComponents/SearchItemList.vue b/src/components/CommunityComponents/SearchItemList.vue
index 51f51ac4ead6c2e8468c88d52d6c48a3a1e13467..32d806a98d18ec9156da12eae1a2a1f715c0fcdc 100644
--- a/src/components/CommunityComponents/SearchItemList.vue
+++ b/src/components/CommunityComponents/SearchItemList.vue
@@ -16,7 +16,7 @@
       <input
         type="text"
         id="searchInput"
-        class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
+        class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
         placeholder="Search"
         v-model="search"
       />
diff --git a/src/components/FormComponents/LoginForm.vue b/src/components/FormComponents/LoginForm.vue
index bf7b23c0b698adbeda116c4b3ac997948abc9461..a3c4dd2f9e049ec7b1fe18c68427659223bbd9d7 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -1,98 +1,88 @@
 <template>
-  <div class="max-w-md p-6 mx-auto rounded-md shadow-lg mt-16">
-    <div class="flex justify-center text-2xl">Logg inn</div>
-    <div
-      id="emailField"
-      class="m-6"
-      :class="{ error: v$.user.email.$errors.length }"
-    >
-      <div class="mb-6">
-        <label
-          for="email"
-          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-          >E-post</label
+  <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full">
+    <div class="px-6 py-4 mt-4">
+      <h3
+        class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+      >
+        Logg på
+      </h3>
+
+      <div>
+        <div
+          class="w-full mt-6"
+          :class="{ error: v$.user.email.$errors.length }"
+        >
+          <input
+            class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+            type="email"
+            placeholder="Skriv inn din e-postadresse *"
+            v-model="v$.user.email.$model"
+            required
+          />
+          <!-- error message -->
+          <div v-for="(error, index) of v$.user.email.$errors" :key="index">
+            <div
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="emailErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="w-full mt-6"
+          :class="{ error: v$.user.password.$errors.length }"
         >
-        <input
-          type="email"
-          id="email"
-          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-          placeholder="eksempel@eksempel.no"
-          v-model="v$.user.email.$model"
-          required
-        />
-        <!-- error message -->
-        <div v-for="(error, index) of v$.user.email.$errors" :key="index">
+          <input
+            class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+            type="password"
+            placeholder="Vennligst oppgi passordet ditt *"
+            v-model="v$.user.password.$model"
+            @keyup.enter="loginClicked"
+            required
+          />
+          <!-- error message -->
           <div
             class="text-red-600 text-sm"
-            v-show="showError"
-            id="emailErrorId"
+            v-for="(error, index) of v$.user.password.$errors"
+            :key="index"
           >
-            {{ error.$message }}
+            <div
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="passwordErrorId"
+            >
+              {{ error.$message }}
+            </div>
           </div>
         </div>
+
+        <div class="flex items-center justify-between mt-8">
+          <router-link to="/resetPassword" class="text-primary-medium"
+            >Glemt passord?</router-link
+          >
+
+          <Button @click="loginClicked" :text="'Logg på'"></Button>
+        </div>
       </div>
     </div>
 
     <div
-      id="passwordField"
-      class="m-6"
-      :class="{ error: v$.user.password.$errors.length }"
+      class="flex items-center justify-center py-4 text-center bg-gray-50 dark:bg-gray-700"
     >
-      <label
-        for="password"
-        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-        >Passord</label
-      >
-      <input
-        type="password"
-        id="password"
-        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-        v-model="v$.user.password.$model"
-        required
-        @keyup.enter="loginClicked"
-      />
-      <!-- error message -->
-      <div
-        class="text-red"
-        v-for="(error, index) of v$.user.password.$errors"
-        :key="index"
+      <router-link
+        to="/register"
+        class="mx-2 text-sm font-bold text-primary-medium dark:text-primary-light hover:underline"
+        >Opprette ny konto</router-link
       >
-        <div
-          class="text-red-600 text-sm"
-          v-show="showError"
-          id="passwordErrorId"
-        >
-          {{ error.$message }}
-        </div>
-      </div>
     </div>
-
-    <div id="buttonsField" class="m-6">
-      <div class="align-items: flex-end; mb-6">
-        <div class="ml-3 text-sm">
-          <router-link
-            to="/resetPassword"
-            class="text-blue-600 flex justify-end"
-            >Glemt passord</router-link
-          >
-        </div>
-      </div>
-      <button
-        @click="loginClicked"
-        class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5"
+    <div class="flex items-center justify-center text-center bg-gray-50">
+      <label
+        class="mx-2 text-sm font-bold text-red-500 dark:text-primary-light hover:underline"
+        >{{ message }}</label
       >
-        Logg inn
-      </button>
-      <div class="align-items: flex-end; mb-6 mt-12">
-        <div class="text-sm">
-          <router-link to="register" class="text-blue-600 flex justify-center"
-            >Ny bruker</router-link
-          >
-        </div>
-      </div>
-      <div class="flex justify-center">
-        <label>{{ message }}</label>
-      </div>
     </div>
   </div>
 </template>
@@ -101,10 +91,14 @@
 import useVuelidate from "@vuelidate/core";
 import { required, email, helpers } from "@vuelidate/validators";
 import { doLogin } from "@/utils/apiutil";
+import Button from "@/components/BaseComponents/ColoredButton";
 
 export default {
   name: "LoginForm.vue",
 
+  components: {
+    Button,
+  },
   setup() {
     return { v$: useVuelidate() };
   },
@@ -112,11 +106,11 @@ export default {
     return {
       user: {
         email: {
-          required,
+          required: helpers.withMessage(`Feltet må være utfylt`, required),
           email: helpers.withMessage(`E-posten er ugyldig`, email),
         },
         password: {
-          required,
+          required: helpers.withMessage(`Feltet må være utfylt`, required),
         },
       },
     };
@@ -138,9 +132,9 @@ export default {
     async loginClicked() {
       this.showError = true;
 
-      this.v$.user.email.$touch();
+      this.v$.user.$touch();
 
-      if (this.v$.user.email.$invalid) {
+      if (this.v$.user.$invalid) {
         console.log("Ugyldig, avslutter...");
         return;
       }
@@ -154,7 +148,6 @@ export default {
 
       if (loginResponse.isLoggedIn === false) {
         this.message = "Feil e-post/passord";
-        this.$store.commit("logout");
       } else if (loginResponse.isLoggedIn === true) {
         this.$store.commit("saveToken", loginResponse.token);
         await this.$router.push("/");
@@ -162,10 +155,6 @@ export default {
         console.log("Something went wrong");
       }
     },
-
-    validate() {
-      this.$refs.form.validate();
-    },
   },
 };
 </script>
diff --git a/src/components/FormComponents/NewPasswordForm.vue b/src/components/FormComponents/NewPasswordForm.vue
index 55599fee7a5ff53de223645d460d98186dfe3604..667da928ac0430fea928a78723f73af715622209 100644
--- a/src/components/FormComponents/NewPasswordForm.vue
+++ b/src/components/FormComponents/NewPasswordForm.vue
@@ -1,7 +1,10 @@
 <template>
   <div
-    class="w-full max-w-sm p-6 m-auto bg-white rounded-md shadow-md dark:bg-gray-800 mt-8"
+      class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
   >
+
+    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Endre passord</h3>
+
     <div
       id="firstPasswordField"
       :class="{ error: v$.user.password.$errors.length }"
@@ -14,7 +17,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 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"
       />
       <!-- error message -->
       <div v-for="(error, index) of v$.user.password.$errors" :key="index">
@@ -44,7 +47,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 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"
       />
       <!-- error message -->
       <div v-for="(error, index) of v$.user.rePassword.$errors" :key="index">
@@ -59,25 +62,27 @@
     </div>
 
     <div id="buttonsField" class="mt-6">
-      <button
+      <Button
+          class="float-right"
         @click="setNewPassword"
-        class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600"
-      >
-        Endre passord
-      </button>
+        :text="'Sett ny passord'"
+      />
     </div>
   </div>
 </template>
 
 <script>
 import useVuelidate from "@vuelidate/core";
-import { required, minLength, sameAs } from "@vuelidate/validators";
+import { required, minLength, sameAs, helpers } from "@vuelidate/validators";
 import { doNewPassword } from "@/utils/apiutil";
 import { mapState } from "vuex";
+import Button from "@/components/BaseComponents/ColoredButton";
 
 export default {
   name: "NewPasswordForm.vue",
 
+  components:{
+    Button,},
   setup() {
     return { v$: useVuelidate() };
   },
@@ -85,13 +90,12 @@ export default {
     return {
       user: {
         password: {
-          required,
-          minLength: minLength(8),
+          required: helpers.withMessage(`Feltet må være utfylt`, required),
+          minLength: helpers.withMessage('Passordet må være minst 8 karakterer lang', minLength(8)),
         },
         rePassword: {
-          required,
-          minLength: minLength(8),
-          sameAs: sameAs(this.user.password),
+          sameAs: helpers.withMessage('Passordene må være like', sameAs(this.user.password)),
+          required: helpers.withMessage(`Feltet må være utfylt`, required),
         },
       },
     };
@@ -129,7 +133,7 @@ export default {
 
       if (newPasswordResponse.newPasswordSet === true) {
         console.log("New password set");
-        await this.$router.push("/endre");
+        await this.$router.push("/");
       } else if (newPasswordResponse.newPasswordSet === false) {
         console.log("Couldn't set new password");
       } else {
diff --git a/src/components/FormComponents/RegisterForm.vue b/src/components/FormComponents/RegisterForm.vue
index 3f4551a3e677e01b48cfcc29cb889b21d9bf04c1..a2fc3c208a551402412bb31dffc3e73fac640275 100644
--- a/src/components/FormComponents/RegisterForm.vue
+++ b/src/components/FormComponents/RegisterForm.vue
@@ -1,133 +1,192 @@
 <template>
-  <section
-    class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800"
+  <div
+    class="w-full max-w-md mx-auto mb-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl p-4"
   >
-    <h2 class="text-lg font-semibold text-gray-700 capitalize dark:text-white">
+    <h3
+      class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+    >
       Opprett ny bruker
-    </h2>
+    </h3>
 
     <form @submit.prevent>
-      <div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
+      <div class="grid grid-cols-1 gap-6 mt-4">
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="email"
-            >E-mail</label
-          >
           <input
+            class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
             v-model="email"
             id="email"
             type="email"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
+            placeholder="E-post adresse"
           />
+          <!-- error message -->
+          <div
+            class="text-red-600 text-sm"
+            v-for="(error, index) of v$.email.$errors"
+            :key="index"
+          >
+            <div
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="emailErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
 
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="password"
-            >Passord</label
-          >
           <input
+            class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
             v-model="password"
             id="password"
             type="password"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
+            placeholder="Passord"
           />
+          <!-- error message -->
+          <div
+            class="text-red-600 text-sm"
+            v-for="(error, index) of v$.password.$errors"
+            :key="index"
+          >
+            <div
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="passwordErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
 
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="confirmPassword"
-            >Bekreft Passord</label
-          >
           <input
+            class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
             v-model="confirmPassword"
             id="confirmPassword"
             type="password"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
+            placeholder="Bekreft passord"
           />
+          <!-- error message -->
+          <div
+            class="text-red-600 text-sm"
+            v-for="(error, index) of v$.confirmPassword.$errors"
+            :key="index"
+          >
+            <div
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="confirmPasswordErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
 
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="firstName"
-            >Fornavn</label
-          >
           <input
+            class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
             data-test="firstNameTest"
             v-model="firstName"
             id="firstName"
             type="text"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
+            placeholder="Fornavn"
           />
+          <!-- error message -->
+          <div
+            class="text-red-600 text-sm"
+            v-for="(error, index) of v$.firstName.$errors"
+            :key="index"
+          >
+            <div
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="firstNameErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
 
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="lastName"
-            >Etternavn</label
-          >
           <input
+            class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
             v-model="lastName"
             id="lastName"
             type="text"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
+            placeholder="Etternavn"
           />
+          <!-- error message -->
+          <div
+            class="text-red-600 text-sm"
+            v-for="(error, index) of v$.lastName.$errors"
+            :key="index"
+          >
+            <div
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="lastNameErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
 
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="address"
-            >Addresse</label
-          >
           <input
+            class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
             v-model="address"
             id="address"
             type="text"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
+            placeholder="Adresse"
           />
+          <!-- error message -->
+          <div
+            class="text-red-600 text-sm"
+            v-for="(error, index) of v$.address.$errors"
+            :key="index"
+          >
+            <div
+              class="text-red-600 text-sm"
+              v-show="showError"
+              id="addressErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
       </div>
 
       <div class="flex justify-end mt-6">
-        <button
-          class="px-6 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600"
-          @click="submit()"
-          type="submit"
-          :disabled="loading"
-        >
-          <div v-if="loading">
-            <div v-if="loading" class="lds-ring">
-              <div></div>
-              <div></div>
-              <div></div>
-              <div></div>
-            </div>
-          </div>
-          <div v-else>Lagre</div>
-        </button>
+        <Button @click="submit" :text="'Lagre'"></Button>
       </div>
     </form>
-  </section>
-  <ul data-test="errorMessageList">
-    <li v-if="errorMessage" data-test="customErrorMsg">{{ errorMessage }}</li>
-    <li v-for="error of v$.$errors" :key="error.$uid">
-      <!-- {{ error.$validator }} -->
-      Field
-      {{ error.$property }}
-      has error:
-      {{ error.$message }}
-    </li>
-  </ul>
+  </div>
 </template>
 
 <script>
 import useVuelidate from "@vuelidate/core";
 import { doLogin, registerUser } from "@/utils/apiutil";
-import { required, email, minLength, sameAs } from "@vuelidate/validators";
+import {
+  required,
+  email,
+  minLength,
+  sameAs,
+  helpers,
+} from "@vuelidate/validators";
+import Button from "@/components/BaseComponents/ColoredButton";
 
 // const isEmailTaken = (value) =>
 // fetch(`/api/unique/${value}`).then((r) => r.json()); // check the email in the server
 
 export default {
+  components: {
+    Button,
+  },
   setup: () => ({ v$: useVuelidate() }),
   data() {
     return {
+      showError: false,
       errorMessage: "",
-      loading: false,
       email: "",
       password: "",
       confirmPassword: "",
@@ -139,24 +198,39 @@ export default {
   validations() {
     return {
       email: {
-        required,
-        email,
+        required: helpers.withMessage(`Feltet må være utfylt`, required),
+        email: helpers.withMessage("E-posten er ugyldig", email),
         // isUnique: helpers.withAsync(isEmailTaken),
       },
       password: {
-        required,
-        minLength: minLength(8),
+        required: helpers.withMessage(`Feltet må være utfylt`, required),
+        minLength: helpers.withMessage(
+          "Passordet må være minst 8 karakterer lang",
+          minLength(8)
+        ),
+      },
+      confirmPassword: {
+        sameAs: helpers.withMessage(
+          "Passordene må være like",
+          sameAs(this.password)
+        ),
+        required: helpers.withMessage(`Feltet må være utfylt`, required),
+      },
+      firstName: {
+        required: helpers.withMessage(`Feltet må være utfylt`, required),
+      },
+      lastName: {
+        required: helpers.withMessage(`Feltet må være utfylt`, required),
+      },
+      address: {
+        required: helpers.withMessage(`Feltet må være utfylt`, required),
       },
-      confirmPassword: { sameAs: sameAs(this.password) },
-      firstName: { required },
-      lastName: { required },
-      address: { required },
     };
   },
   methods: {
     async submit() {
       //Display loading symbol
-      this.loading = true;
+      this.showError = true;
 
       //Validate form
       const result = await this.v$.$validate();
@@ -203,48 +277,8 @@ export default {
 
       const response = await registerUser(registerInfo);
 
-      if (response.status === 200) return true;
-      return false;
+      return response.status === 200;
     },
   },
 };
 </script>
-
-<style scoped>
-/* https://loading.io/css/ */
-.lds-ring {
-  display: inline-block;
-  position: relative;
-  width: 20px;
-  height: 20px;
-}
-.lds-ring div {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  margin: 2px;
-  border: 2px solid #fff;
-  border-radius: 50%;
-  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: #fff transparent transparent transparent;
-}
-.lds-ring div:nth-child(1) {
-  animation-delay: -0.45s;
-}
-.lds-ring div:nth-child(2) {
-  animation-delay: -0.3s;
-}
-.lds-ring div:nth-child(3) {
-  animation-delay: -0.15s;
-}
-@keyframes lds-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>
diff --git a/src/components/FormComponents/ResetPasswordForm.vue b/src/components/FormComponents/ResetPasswordForm.vue
index fa75650e93ef002ca97c3eebe85a567c0581efa4..a3232e339f78a7ce82eee0a3199b966d9bc90178 100644
--- a/src/components/FormComponents/ResetPasswordForm.vue
+++ b/src/components/FormComponents/ResetPasswordForm.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="resetPassword">
+  <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4">
+
+    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Glemt passordet ditt?</h3>
+
     <div
       id="emailField"
       class="m-6"
@@ -14,10 +17,11 @@
         <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="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"
           placeholder="eksempel@eksempel.no"
           v-model="v$.email.$model"
           required
+          @keyup.enter="sendHome"
         />
         <!-- error message -->
         <div v-for="(error, index) of v$.email.$errors" :key="index">
@@ -30,22 +34,27 @@
           </div>
         </div>
       </div>
+      <Button
+          class="float-right"
+          @click="sendHome"
+          :text="'Tilbakestill passord'"
+      />
     </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"
-    >
-      Send e-post
-    </button>
+
   </div>
 </template>
 
 <script>
 import useVuelidate from "@vuelidate/core";
 import { required, email, helpers } from "@vuelidate/validators";
+import Button from "@/components/BaseComponents/ColoredButton";
+
 export default {
   name: "ResetPassword.vue",
 
+  components:{
+    Button,
+  },
   data() {
     return {
       showError: false,
@@ -58,7 +67,7 @@ export default {
   validations() {
     return {
       email: {
-        required,
+        required: helpers.withMessage('Feltet må være utfylt', required),
         email: helpers.withMessage(`E-posten er ugyldig`, email),
       },
     };
diff --git a/src/components/UserProfileComponents/LargeProfileCard.vue b/src/components/UserProfileComponents/LargeProfileCard.vue
index 19d25964791090645d982f2ee5875a26a6b396e6..4b88012ec203c64c4f59a250b80a3fa780255d00 100644
--- a/src/components/UserProfileComponents/LargeProfileCard.vue
+++ b/src/components/UserProfileComponents/LargeProfileCard.vue
@@ -1,13 +1,13 @@
 <template>
   <div
-    class="min-w-full md:min-w-0 md:w-96 my-4 py-8 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
+    class="w-full max-w-xl m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl p-4"
   >
-    <div v-show="isCurrentUser" class="flex absolute justify-end px-4 pt-4">
+    <div v-show="isCurrentUser" class="float-right px-4 pt-4">
       <button
         id="dropdownDefault"
         data-dropdown-toggle="dropdown"
         @click="dropdown = !dropdown"
-        class="w-10 h-10 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
+        class="w-10 h-10 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg float-right text-sm p-1.5"
         type="button"
       >
         <svg
@@ -27,7 +27,7 @@
         v-show="dropdown"
         class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
       >
-        <ul class="py-1" aria-labelledby="dropdownDefault">
+        <ul class="py-1 absolute bg-white ring-1 ring-gray-300 rounded-xl" aria-labelledby="dropdownDefault">
           <li>
             <router-link
               to=""
@@ -67,7 +67,7 @@
           <li>
             <router-link
               to=""
-              class="block py-2 px-4 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+              class="block py-2 px-4 text-sm text-error hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
               >Slett bruker</router-link
             >
           </li>
@@ -75,7 +75,7 @@
       </div>
     </div>
 
-    <div class="flex flex-col items-center pb-10">
+    <div class="flex flex-col items-center pb-10 mt-16 z-5">
       <img
         class="mb-3 w-24 h-24 rounded-full shadow-lg"
         src="../../assets/defaultUserProfileImage.jpg"
diff --git a/src/components/UserProfileComponents/Rating.vue b/src/components/UserProfileComponents/Rating.vue
index c6e7e8252f2fb8916098f3a1ab8b6a2a7290eb62..8aff6bad071841e4f6baf1c2825ca748b46c095f 100644
--- a/src/components/UserProfileComponents/Rating.vue
+++ b/src/components/UserProfileComponents/Rating.vue
@@ -47,7 +47,7 @@ export default {
   methods: {
     getFill(i) {
       if (i <= this.rating) {
-        return "w-5 h-5 text-yellow-400";
+        return "w-5 h-5 text-warn";
       }
       return "w-5 h-5 text-gray-300 dark:text-gray-500";
     },
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index c37d6d77e52847898f2017130607e85c2dc22b6f..a1546326dd2d8cd4fef16cb1118828cb508d1fb9 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -213,3 +213,40 @@ export async function GetMembersOfCommunity(communityID) {
       console.error(error);
     });
 }
+
+export function JoinOpenCommunity(communityId) {
+
+    if(tokenHeader().Authorization == "Bearer " + null){
+        console.log("ikke logget på!");
+        return "Login to join any community";
+    }
+
+    return axios
+        .post(API_URL + "communities/" + communityId + "/join", communityId, {
+            headers: tokenHeader(),
+        })
+        .then((response) => {
+            return response;
+        })
+        .catch((error) => {
+            console.log(error.response);
+            return error;
+        });
+}
+
+export async function GetIfUserAlreadyInCommunity(communityID) {
+    if(tokenHeader().Authorization == "Bearer " + null){
+        return false;
+    }
+
+    return axios
+        .get(API_URL + "communities/" + communityID + "/user/status", {
+            headers: tokenHeader(),
+        })
+        .then((response) => {
+            return response.data;
+        })
+        .catch((error) => {
+            return error;
+        });
+}
diff --git a/src/views/CommunityViews/NewCommunityView.vue b/src/views/CommunityViews/NewCommunityView.vue
index 38eacf3ba70f4df9c97093d2e5712fb961dc4c4d..f78ccde49e36551c8f47530ef8ed51bd944ce1a1 100644
--- a/src/views/CommunityViews/NewCommunityView.vue
+++ b/src/views/CommunityViews/NewCommunityView.vue
@@ -1,5 +1,8 @@
 <template>
-  <NewCommunity />
+  <div class="h-screen grid md:mt-8">
+    <NewCommunity />
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/CommunityViews/NewItemView.vue b/src/views/CommunityViews/NewItemView.vue
index 8bbca71dd407668fe3de9abd0720d41eeea1c508..172ba809e4d552ba05319941ed1921b859e7ac28 100644
--- a/src/views/CommunityViews/NewItemView.vue
+++ b/src/views/CommunityViews/NewItemView.vue
@@ -1,5 +1,8 @@
 <template>
-  <AddNewItem></AddNewItem>
+  <div class="h-screen grid md:mt-8">
+    <AddNewItem/>
+  </div>
+
 </template>
 
 <script>
diff --git a/src/views/FormViews/LoginView.vue b/src/views/FormViews/LoginView.vue
index 95329c538e3b4796b193048f943bd1be4fee2b88..ec6fa68a7c9b217e2d199d2bd8b9d8781556343a 100644
--- a/src/views/FormViews/LoginView.vue
+++ b/src/views/FormViews/LoginView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="loginPage">
+  <div class="h-screen grid md:mt-8">
     <LoginForm></LoginForm>
   </div>
 </template>
@@ -13,11 +13,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.loginPage {
-  background-color: white;
-  height: 100%;
-  overflow: auto;
-}
-</style>
diff --git a/src/views/FormViews/NewPasswordView.vue b/src/views/FormViews/NewPasswordView.vue
index 710ce20f0fc1b334635f7703bb2c74902ec93bca..1c08586c58f04a984fa22a5af77219c79907c145 100644
--- a/src/views/FormViews/NewPasswordView.vue
+++ b/src/views/FormViews/NewPasswordView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="newPasswordPage">
+  <div class="h-screen grid md:mt-8">
     <NewPasswordForm></NewPasswordForm>
   </div>
 </template>
@@ -13,11 +13,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.newPasswordPage {
-  background-color: white;
-  height: 100%;
-  overflow: auto;
-}
-</style>
diff --git a/src/views/FormViews/RegisterView.vue b/src/views/FormViews/RegisterView.vue
index e5d5683596755787a0955be481d1b38d91f4a378..93013987e5e31384c4391768e5468a6bc77df35d 100644
--- a/src/views/FormViews/RegisterView.vue
+++ b/src/views/FormViews/RegisterView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-screen bg-gray-200 content-center grid place-items-center">
+  <div class="h-screen grid md:mt-8">
     <RegisterFormComponent />
   </div>
 </template>
diff --git a/src/views/FormViews/ResetPasswordView.vue b/src/views/FormViews/ResetPasswordView.vue
index 2345d329aafdc34d561fc78a8a965639e9304c1c..284c4fe3582728f817ad5fb7b6fbb98373dd38dc 100644
--- a/src/views/FormViews/ResetPasswordView.vue
+++ b/src/views/FormViews/ResetPasswordView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="resetPassword">
+  <div class="h-screen grid md:mt-8">
     <ResetPassword></ResetPassword>
   </div>
 </template>
@@ -13,11 +13,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.resetPassword {
-  background-color: white;
-  height: 100%;
-  overflow: auto;
-}
-</style>
diff --git a/src/views/UserProfileViews/ProfileView.vue b/src/views/UserProfileViews/ProfileView.vue
index c4ea15c9d2d5c8f640b8180c226a64e4555535a2..430082e1e6e06586d7384c8bac8b91727978c768 100644
--- a/src/views/UserProfileViews/ProfileView.vue
+++ b/src/views/UserProfileViews/ProfileView.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="h-screen bg-gray-200 grid place-items-center">
-    <large-profile-card :isCurrentUser="true" class="align-top" />
+  <div>
+    <LargeProfileCard :isCurrentUser="true" class="md:mt-8" />
   </div>
 </template>
 
diff --git a/tailwind.config.js b/tailwind.config.js
index d92b980ab15ed8d8de1d9e631b62ea2085bd8705..0089d1c11fbc2c51520dc1501abb2dec976d7fa7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,34 @@ module.exports = {
     "./node_modules/tw-elements/dist/js/**/*.js",
   ],
   theme: {
-    extend: {},
+    colors: {
+      white: "#fff",
+      black: "#000",
+      gray: {
+        50: "#f9fafb",
+        100: "#f3f4f6",
+        200: "#e5e7eb",
+        300: "#d1d5db",
+        400: "#9ca3af",
+        500: "#6b7280",
+        600: "#4b5563",
+        700: "#374151",
+        800: "#1f2937",
+        900: "#111827",
+      },
+      primary: {
+        light: "#306EC1",
+        medium: "#004aad",
+        dark: "#003884",
+      },
+      secondary: {
+        light: "#653273",
+        dark: "#731050",
+      },
+      error: "#E23636",
+      warn: "#EDB95E",
+      success: "#82DD55",
+    },
   },
   plugins: [require("tw-elements/dist/plugin")],
 };
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/color-button.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/color-button.spec.js.snap
deleted file mode 100644
index 4a8d6370547ec8f2d5faee8131dc1432a0d3a7e5..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/base-component-tests/__snapshots__/color-button.spec.js.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ColoredButtonComponent renders correctly 1`] = `
-<button
-  class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
->
-  hei
-</button>
-`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/community-header.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/community-header.spec.js.snap
deleted file mode 100644
index 73847104b73bc72ff7ee7c2c3693159fe201b6b1..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/base-component-tests/__snapshots__/community-header.spec.js.snap
+++ /dev/null
@@ -1,62 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CommunityHeader component renders correctly 1`] = `
-<div
-  class="flex items-center justify-between mx-4"
->
-  <div
-    class="flex-1 min-w-0"
-  >
-    <h2
-      class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate"
-    >
-      String
-    </h2>
-    <div
-      class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6"
-    >
-      <div
-        class="mt-2 flex items-center text-sm text-gray-500"
-      >
-        <svg
-          aria-hidden="true"
-          class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
-          fill="currentColor"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
-            fill-rule="evenodd"
-          />
-        </svg>
-         String
-      </div>
-    </div>
-  </div>
-  <div>
-    <span
-      class="hidden sm:block"
-    >
-      <!-- Legg dette til i button: v-if="adminStatus" -->
-      <svg
-        class="w-9 h-9 cursor-pointer"
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4 6h16M4 12h16M4 18h16"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
-      </svg>
-      <!--v-if-->
-      <!-- class="absolute" -->
-    </span>
-  </div>
-</div>
-`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/custom-footer-modal.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/custom-footer-modal.spec.js.snap
deleted file mode 100644
index f178175b1fa2913054cc18585b8dd831f1099858..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/base-component-tests/__snapshots__/custom-footer-modal.spec.js.snap
+++ /dev/null
@@ -1,73 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`IconButtonComponent renders correctly 1`] = `
-<div
-  data-v-app=""
->
-  
-  <!-- Main modal -->
-  <div
-    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full"
-  >
-    <div
-      class="relative w-full h-full max-w-2xl p-4 md:h-auto"
-    >
-      <!-- Modal content -->
-      <div
-        class="relative bg-white rounded-lg shadow dark:bg-gray-700"
-      >
-        <!-- Modal header -->
-        <div
-          class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"
-        >
-          <h3
-            class="text-xl font-semibold text-gray-900 dark:text-white"
-          >
-            String
-          </h3>
-          <button
-            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
-          >
-            <svg
-              class="w-5 h-5"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </button>
-        </div>
-        <!-- Modal body -->
-        <div
-          class="p-6 space-y-6"
-        >
-          <p
-            class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
-          >
-            String
-          </p>
-        </div>
-        <!-- Modal footer -->
-        <div
-          class="rounded-b border-t border-gray-200 dark:border-gray-600"
-        >
-          <!-- Slot: Add any html you want here -->
-          
-          <div
-            class="fake-msg"
-          >
-            String
-          </div>
-          
-        </div>
-      </div>
-    </div>
-  </div>
-  
-</div>
-`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/icon-button.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/icon-button.spec.js.snap
deleted file mode 100644
index 62007d4ff8d81f1ece9bf91271163ca179d7383d..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/base-component-tests/__snapshots__/icon-button.spec.js.snap
+++ /dev/null
@@ -1,43 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`IconButtonComponent renders correctly 1`] = `
-<div
-  data-v-app=""
->
-  
-  <!-- Icon button -->
-  <button
-    class="block w-fit text-white text-base bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-  >
-    <div
-      class="flex flex-row px-5 py-2.5 h-10"
-    >
-      <!-- Icon slot: Default content "Ban"-icon -->
-      <div
-        class="h-6 w-6"
-      >
-        
-        <svg
-          aria-hidden="true"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-        
-      </div>
-      <p>
-        hei
-      </p>
-    </div>
-  </button>
-  
-</div>
-`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/nav-bar.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/nav-bar.spec.js.snap
deleted file mode 100644
index 3929918739cf7ffa3409de46e8c6bd3b6abd14f8..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/base-component-tests/__snapshots__/nav-bar.spec.js.snap
+++ /dev/null
@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NavBar component renders correctly 1`] = `
-<nav
-  class="flex items-center justify-between bg-white h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
->
-  <div
-    class="logo"
-  >
-    <img
-      alt="BoCo logo"
-      class="m-1 ml-4 cursor-pointer h-12"
-      src=""
-    />
-  </div>
-  <ul
-    class="flex"
-  >
-    <li>
-      <img
-        alt="Legg til"
-        class="m-6 cursor-pointer h-7"
-        src=""
-      />
-    </li>
-    <li>
-      <img
-        alt="Meldinger"
-        class="m-6 cursor-pointer h-7"
-        src=""
-      />
-    </li>
-    <li>
-      <img
-        alt="Profil"
-        class="m-6 cursor-pointer h-7"
-        src=""
-      />
-    </li>
-  </ul>
-</nav>
-`;
diff --git a/tests/unit/component-tests/base-component-tests/__snapshots__/notification-modal.spec.js.snap b/tests/unit/component-tests/base-component-tests/__snapshots__/notification-modal.spec.js.snap
deleted file mode 100644
index 6c2259b3f623090effe8ff37ced149d9e72da832..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/base-component-tests/__snapshots__/notification-modal.spec.js.snap
+++ /dev/null
@@ -1,60 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NotificationModal component renders correctly 1`] = `
-<div
-  data-v-app=""
->
-  
-  <!-- Main modal -->
-  <div
-    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full"
-  >
-    <div
-      class="relative w-full h-full max-w-2xl p-4 md:h-auto"
-    >
-      <!-- Modal content -->
-      <div
-        class="relative bg-white rounded-lg shadow dark:bg-gray-700"
-      >
-        <!-- Modal header -->
-        <div
-          class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"
-        >
-          <h3
-            class="text-xl font-semibold text-gray-900 dark:text-white"
-          >
-            String
-          </h3>
-          <button
-            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
-          >
-            <svg
-              class="w-5 h-5"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </button>
-        </div>
-        <!-- Modal body -->
-        <div
-          class="p-6 space-y-6"
-        >
-          <p
-            class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
-          >
-            String
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-  
-</div>
-`;
diff --git a/tests/unit/component-tests/base-component-tests/color-button.spec.js b/tests/unit/component-tests/base-component-tests/color-button.spec.js
index ca9efb412b59485756b500dcbe8fb283e2464d31..29300503d6aeae9159b782520be94ebb502ce44c 100644
--- a/tests/unit/component-tests/base-component-tests/color-button.spec.js
+++ b/tests/unit/component-tests/base-component-tests/color-button.spec.js
@@ -13,10 +13,6 @@ describe("ColoredButtonComponent", () => {
     });
   });
 
-  it("renders correctly", () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
diff --git a/tests/unit/component-tests/base-component-tests/community-header.spec.js b/tests/unit/component-tests/base-component-tests/community-header.spec.js
index 7dd3c446f57353aae804f8b7f6cf6e95fe5af7da..97e5cd0889634e1205031c5ee1fe253e4892a6c1 100644
--- a/tests/unit/component-tests/base-component-tests/community-header.spec.js
+++ b/tests/unit/component-tests/base-component-tests/community-header.spec.js
@@ -21,10 +21,6 @@ describe("CommunityHeader component", () => {
     });
   });
 
-  it("renders correctly", () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
diff --git a/tests/unit/component-tests/base-component-tests/custom-footer-modal.spec.js b/tests/unit/component-tests/base-component-tests/custom-footer-modal.spec.js
index 4d4db9169c1d7c90402aa4e78be331938ebf487f..5afb8f9cb6f6d966856b1a59516062300c80e2b1 100644
--- a/tests/unit/component-tests/base-component-tests/custom-footer-modal.spec.js
+++ b/tests/unit/component-tests/base-component-tests/custom-footer-modal.spec.js
@@ -18,10 +18,6 @@ describe("IconButtonComponent", () => {
     });
   });
 
-  it("renders correctly", () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
diff --git a/tests/unit/component-tests/base-component-tests/icon-button.spec.js b/tests/unit/component-tests/base-component-tests/icon-button.spec.js
index 57b6f0fbc8450074c308627cd845f61085cb6743..376fb18f1f3ba20d4e417f7f615c2136f908016b 100644
--- a/tests/unit/component-tests/base-component-tests/icon-button.spec.js
+++ b/tests/unit/component-tests/base-component-tests/icon-button.spec.js
@@ -13,10 +13,6 @@ describe("IconButtonComponent", () => {
     });
   });
 
-  it("renders correctly", () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
diff --git a/tests/unit/component-tests/base-component-tests/nav-bar.spec.js b/tests/unit/component-tests/base-component-tests/nav-bar.spec.js
index dd5f979fef779d7b5235c2853b8c0b938f184b46..556dd737972108fccdd326ccea4133af1ddbe377 100644
--- a/tests/unit/component-tests/base-component-tests/nav-bar.spec.js
+++ b/tests/unit/component-tests/base-component-tests/nav-bar.spec.js
@@ -8,10 +8,6 @@ describe("NavBar component", () => {
     wrapper = mount(NavBar);
   });
 
-  it("renders correctly", () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
diff --git a/tests/unit/component-tests/base-component-tests/notification-modal.spec.js b/tests/unit/component-tests/base-component-tests/notification-modal.spec.js
index 0fb2c913ba0efa291df6a397a8dd0ee7370da776..c005e4f94aec3da15453735e5e1b267884104baf 100644
--- a/tests/unit/component-tests/base-component-tests/notification-modal.spec.js
+++ b/tests/unit/component-tests/base-component-tests/notification-modal.spec.js
@@ -15,10 +15,6 @@ describe("NotificationModal component", () => {
     });
   });
 
-  it("renders correctly", () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
deleted file mode 100644
index a9b5043d55edf9d7bd0a52eb64e803ffc04f50e5..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
+++ /dev/null
@@ -1,181 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CreateNewGroup elements rendering renders correctly 1`] = `
-<div
-  class="m-6"
->
-  <!-- Component heading -->
-  <div
-    class="flex justify-center mt-6"
-  >
-    <p
-      class="text-4xl"
-    >
-      Opprett Gruppe
-    </p>
-  </div>
-  <!-- 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-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"
-        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-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"
-        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="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      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="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      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 p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      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-red-500 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
-      class="content-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-      id="saveButton"
-    >
-       Lagre 
-    </button>
-  </div>
-</div>
-`;
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap
index a6765453f028760966f7f76701f1f0eea6877ec6..232516e6546b4be3f3852f589671a41a1e929911 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap
@@ -5,7 +5,7 @@ exports[`ItemCard component renders correctly 1`] = `
   class="mt-5"
 >
   <div
-    class="w-52 rounded bg-gray-200"
+    class="w-4/5 rounded bg-gray-200"
   >
     <img
       alt="Item image"
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
deleted file mode 100644
index a975fa560f988edeb59aee0a62e951b18b9192e2..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
+++ /dev/null
@@ -1,214 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NewItemForm component renders correctly 1`] = `
-<div
-  class="m-6"
->
-  <!-- Component heading -->
-  <div
-    class="flex justify-center"
-  >
-    <p
-      class="text-4xl mb-6 mt-6"
-    >
-      Utleie
-    </p>
-  </div>
-  <!-- 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="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      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="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      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="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-    >
-      <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="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      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 p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      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="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      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="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800"
-    >
-       Velg bilde 
-    </button>
-    
-    
-  </div>
-  <!-- Save item button -->
-  <div
-    class="flex justify-center"
-  >
-    <button
-      class="content-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-      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/user-component-tests/__snapshots__/login-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
deleted file mode 100644
index c712a500effa0e3f64c2187aaa330efdc6fb68a6..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
+++ /dev/null
@@ -1,101 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LoginForm component renders correctly 1`] = `
-<div
-  class="max-w-md p-6 mx-auto rounded-md shadow-lg mt-16"
->
-  <div
-    class="flex justify-center text-2xl"
-  >
-    Logg inn
-  </div>
-  <div
-    class="m-6"
-    id="emailField"
-  >
-    <div
-      class="mb-6"
-    >
-      <label
-        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-        for="email"
-      >
-        E-post
-      </label>
-      <input
-        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-        id="email"
-        placeholder="eksempel@eksempel.no"
-        required=""
-        type="email"
-      />
-      <!-- error message -->
-      
-      
-    </div>
-  </div>
-  <div
-    class="m-6"
-    id="passwordField"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      for="password"
-    >
-      Passord
-    </label>
-    <input
-      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-      id="password"
-      required=""
-      type="password"
-    />
-    <!-- error message -->
-    
-    
-  </div>
-  <div
-    class="m-6"
-    id="buttonsField"
-  >
-    <div
-      class="align-items: flex-end; mb-6"
-    >
-      <div
-        class="ml-3 text-sm"
-      >
-        <router-link
-          class="text-blue-600 flex justify-end"
-          to="/resetPassword"
-        >
-          Glemt passord
-        </router-link>
-      </div>
-    </div>
-    <button
-      class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5"
-    >
-       Logg inn 
-    </button>
-    <div
-      class="align-items: flex-end; mb-6 mt-12"
-    >
-      <div
-        class="text-sm"
-      >
-        <router-link
-          class="text-blue-600 flex justify-center"
-          to="register"
-        >
-          Ny bruker
-        </router-link>
-      </div>
-    </div>
-    <div
-      class="flex justify-center"
-    >
-      <label />
-    </div>
-  </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
deleted file mode 100644
index 8ecfffa14f203f189c5ed8a266f9787f14eeb86d..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap
+++ /dev/null
@@ -1,58 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NewPasswordForm component renders correctly 1`] = `
-<div
-  class="w-full max-w-sm p-6 m-auto bg-white rounded-md shadow-md dark:bg-gray-800 mt-8"
->
-  <div
-    class=""
-    id="firstPasswordField"
-  >
-    <label
-      class="block text-sm text-gray-800 dark:text-gray-200"
-      for="password"
-    >
-      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"
-      type="password"
-    />
-    <!-- error message -->
-    
-    
-  </div>
-  <div
-    class="mt-4"
-    id="secondPasswordField"
-  >
-    <div
-      class="flex items-center justify-between"
-    >
-      <label
-        class="block text-sm text-gray-800 dark:text-gray-200"
-        for="rePassword"
-      >
-        Gjenta nytt passord
-      </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"
-      type="password"
-    />
-    <!-- error message -->
-    
-    
-  </div>
-  <div
-    class="mt-6"
-    id="buttonsField"
-  >
-    <button
-      class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600"
-    >
-       Endre passord 
-    </button>
-  </div>
-</div>
-`;
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
deleted file mode 100644
index f1a63d05fc1ff431b8677b83e799442934955b68..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap
+++ /dev/null
@@ -1,123 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RegisterFormComponent renders correctly 1`] = `
-<div
-  data-v-app=""
->
-  
-  <section
-    class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800"
-  >
-    <h2
-      class="text-lg font-semibold text-gray-700 capitalize dark:text-white"
-    >
-       Opprett ny bruker 
-    </h2>
-    <form>
-      <div
-        class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2"
-      >
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="email"
-          >
-            E-mail
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            id="email"
-            type="email"
-          />
-        </div>
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="password"
-          >
-            Passord
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            id="password"
-            type="password"
-          />
-        </div>
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="confirmPassword"
-          >
-            Bekreft Passord
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            id="confirmPassword"
-            type="password"
-          />
-        </div>
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="firstName"
-          >
-            Fornavn
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            data-test="firstNameTest"
-            id="firstName"
-            type="text"
-          />
-        </div>
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="lastName"
-          >
-            Etternavn
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            id="lastName"
-            type="text"
-          />
-        </div>
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="address"
-          >
-            Addresse
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            id="address"
-            type="text"
-          />
-        </div>
-      </div>
-      <div
-        class="flex justify-end mt-6"
-      >
-        <button
-          class="px-6 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600"
-          type="submit"
-        >
-          <div>
-            Lagre
-          </div>
-        </button>
-      </div>
-    </form>
-  </section>
-  <ul
-    data-test="errorMessageList"
-  >
-    <!--v-if-->
-    
-    
-  </ul>
-  
-</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
deleted file mode 100644
index e2fd53153e1a948a06f396c1f77ad5b978e48eb0..0000000000000000000000000000000000000000
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap
+++ /dev/null
@@ -1,38 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ResetPasswordForm component renders correctly 1`] = `
-<div
-  class="resetPassword"
->
-  <div
-    class="m-6"
-    id="emailField"
-  >
-    <div
-      class="mb-6"
-    >
-      <label
-        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-        for="email"
-      >
-        E-post
-      </label>
-      <input
-        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-        id="email"
-        placeholder="eksempel@eksempel.no"
-        required=""
-        type="email"
-      />
-      <!-- error message -->
-      
-      
-    </div>
-  </div>
-  <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"
-  >
-     Send e-post 
-  </button>
-</div>
-`;
diff --git a/tests/unit/component-tests/user-component-tests/register-user-component.spec.js b/tests/unit/component-tests/user-component-tests/register-user-component.spec.js
index b6a4474a3c1a8081c89c0dc2cb3e75b1ea0c513c..142860bf75a1138bfa4351ffb688c9982f01adbe 100644
--- a/tests/unit/component-tests/user-component-tests/register-user-component.spec.js
+++ b/tests/unit/component-tests/user-component-tests/register-user-component.spec.js
@@ -16,15 +16,8 @@ describe("RegisterFormComponent", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
 
-  it("renders error message to user", async () => {
-    await wrapper.setData({ errorMessage: "test message" });
-    expect(wrapper.find('li[data-test="customErrorMsg"]').text()).toBe(
-      "test message"
-    );
-  });
-
   it("renders the h2 text correctly", () => {
-    expect(wrapper.find("h2").text()).toBe("Opprett ny bruker");
+    expect(wrapper.find("h3").text()).toBe("Opprett ny bruker");
   });
 
   it("has a button", () => {
@@ -36,11 +29,6 @@ describe("RegisterFormComponent", () => {
     expect(wrapper.vm.firstName).toBe("Gunnar");
   });
 
-  it("displays 5 error messages when submit is clicked with no data", async () => {
-    await wrapper.find("button").trigger("click");
-    expect(wrapper.findAll("li").length).toBe(5);
-  });
-
   /*   it("button click with correct sum", () => {
     wrapper.setData({ guess: "15" });
     const button = wrapper.find("button");
diff --git a/vue.config.js b/vue.config.js
index 3ec0170c3cb07b201b38bd62b0da6f140b0713a9..e77733af29c6ce1ad2798aee7bb9f3b932f7635f 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -4,7 +4,7 @@ module.exports = defineConfig({
   transpileDependencies: true,
   chainWebpack: (config) => {
     config.plugin("html").tap((args) => {
-      args[0].title = "Borrow Company";
+      args[0].title = "Borrow Community";
       return args;
     });
   },