diff --git a/jest.config.js b/jest.config.js
index 6dda9e7a1f5f0b23dd68aceb027c2afd557f99b8..f638d89a791a7b7bc5a7e52336b00da7759e1863 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,3 +1,5 @@
 module.exports = {
   preset: "@vue/cli-plugin-unit-jest",
+  collectCoverage: true,
+  collectCoverageFrom: ["src/**/*.js", "src/**/*.vue", "!**/node_modules/**"],
 };
diff --git a/src/components/BaseComponents/InputField.vue b/src/components/BaseComponents/InputField.vue
deleted file mode 100644
index a6cbb32e98ed5e1f94ec9b784ea492b9b138048e..0000000000000000000000000000000000000000
--- a/src/components/BaseComponents/InputField.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<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 4e27aea7efa3ddf4427799d90087297f404a86ad..e6f2562c9e029366d0f973a997895c83b4d4b9a6 100644
--- a/src/components/BaseComponents/NavBar.vue
+++ b/src/components/BaseComponents/NavBar.vue
@@ -18,12 +18,15 @@
         />
         <a class="hidden md:block mt-7 text-sm float-right">Legg til</a>
       </li>
-      <li class="cursor-pointer" @click="$router.push('/messages')">
-        <ChatAlt2Icon
-          class="m-6 md:mr-2 h-7 text-primary-medium float-left"
-          alt="Meldinger"
-        />
-        <a class="hidden md:block mt-7 text-sm float-right">Meldinger</a>
+      <li class="cursor-pointer" @click="loadMessages">
+        <div class="notification-container">
+          <ChatAlt2Icon
+            class="m-6 md:mr-2 h-7 text-primary-medium float-left"
+            alt="Meldinger"
+          />
+          <p class="notification" v-if="newMessages > 0">{{ notifications }}</p>
+          <a class="hidden md:block mt-7 text-sm float-right">Meldinger</a>
+        </div>
       </li>
       <li class="cursor-pointer" @click="loadProfile">
         <UserCircleIcon
@@ -39,10 +42,25 @@
 <script>
 import { parseUserFromToken } from "@/utils/token-utils";
 import { PlusIcon, ChatAlt2Icon, UserCircleIcon } from "@heroicons/vue/outline";
+import ws from "@/services/ws";
 
 export default {
   name: "NavBar.vue",
-
+  data() {
+    return {
+      newMessages: 0,
+    };
+  },
+  computed: {
+    notifications() {
+      // if  new messages is greater than 99 show +99
+      if (this.newMessages > 99) {
+        return "+99";
+      } else {
+        return this.newMessages;
+      }
+    },
+  },
   components: {
     PlusIcon,
     ChatAlt2Icon,
@@ -59,8 +77,42 @@ export default {
         await this.$router.push("/login");
       }
     },
+    loadMessages() {
+      this.newMessages = 0;
+      this.$router.push("/messages");
+    },
+  },
+  created() {
+    ws.on(
+      "NEW_MESSAGE",
+      () => {
+        if (this.$router.currentRoute.value.name == "messages") return;
+        this.newMessages += 1;
+      },
+      "header"
+    );
   },
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.notification-container {
+  position: relative;
+}
+.notification {
+  position: absolute;
+  background-color: #ff5a5f;
+  top: 0;
+  min-width: 20px;
+  min-height: 20px;
+  padding: 0.25rem;
+  transform: translate(-80%, -30%);
+  color: white;
+  font-size: 10px;
+  border-radius: 50%;
+  font-weight: bold;
+  text-align: center;
+  right: 0;
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/BaseComponents/NotificationsForm.vue b/src/components/BaseComponents/NotificationsForm.vue
deleted file mode 100644
index b142fb2a8e36ec57b52256194cc35de433f71d63..0000000000000000000000000000000000000000
--- a/src/components/BaseComponents/NotificationsForm.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div>This is a notification page</div>
-</template>
-
-<script>
-export default {
-  name: "NotificationsForm",
-};
-</script>
-
-<style scoped></style>
diff --git a/src/components/BaseComponents/PaginationTemplate.vue b/src/components/BaseComponents/PaginationTemplate.vue
index b6907f178de39c1dace54149174e972e8e764b4b..939d7350598667c7e2710346f3ba80bb83f96748 100644
--- a/src/components/BaseComponents/PaginationTemplate.vue
+++ b/src/components/BaseComponents/PaginationTemplate.vue
@@ -7,7 +7,9 @@
     >
       Forrige
     </span>
-    <label class="mx-2">{{ currentPage + 1 }} av {{ totalPages() }}</label>
+    <label class="mx-2 text-primary-light"
+      >{{ currentPage + 1 }} av {{ totalPages() }}</label
+    >
     <span
       v-if="showNextLink()"
       class="cursor-pointer inline-flex items-center p-2 text-sm font-medium text-primary-light bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700"
diff --git a/src/components/BaseComponents/RatingModal.vue b/src/components/BaseComponents/RatingModal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..370a997b86685b2474854ea94c983e8549a113dc
--- /dev/null
+++ b/src/components/BaseComponents/RatingModal.vue
@@ -0,0 +1,200 @@
+<template>
+  <!-- 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 inset-0 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 p-4 border-b rounded-t dark:border-gray-600">
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+            {{ name }}
+          </h3>
+          <button
+            @click="close()"
+            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
+                fill-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"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+          </button>
+        </div>
+        <!-- Modal body -->
+        <div class="p-6 space-y-6">
+          <p
+            class="text-lg text-base leading-relaxed text-gray-500 dark:text-gray-400"
+          >
+            {{ title }}
+          </p>
+        </div>
+
+        <div class="ml-6 mt-4">
+          <p
+            class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
+            v-show="renterIsReceiverOfRating"
+          >
+            Gi en vurdering til utleieren
+          </p>
+          <p
+            class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
+            v-show="!renterIsReceiverOfRating"
+          >
+            Gi en vurdering til leietakeren
+          </p>
+        </div>
+
+        <div class="flex justify-center px-4">
+          <textarea
+            class="w-full h-40 bg-gray-200 mb-4 ring-1 ring-gray-400 rounded-xl"
+          />
+        </div>
+
+        <div class="flex items-center justify-center mb-8">
+          <svg
+            class="w-10 h-10 text-warn cursor-pointer"
+            :class="rating[0]"
+            @click="setRating(1)"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+            ></path>
+          </svg>
+          <svg
+            class="w-10 h-10 text-warn cursor-pointer"
+            :class="rating[1]"
+            @click="setRating(2)"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+            ></path>
+          </svg>
+          <svg
+            class="w-10 h-10 text-warn cursor-pointer"
+            :class="rating[2]"
+            @click="setRating(3)"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+            ></path>
+          </svg>
+          <svg
+            class="w-10 h-10 text-warn cursor-pointer"
+            :class="rating[3]"
+            @click="setRating(4)"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+            ></path>
+          </svg>
+          <svg
+            class="w-10 h-10 text-warn cursor-pointer"
+            :class="rating[4]"
+            @click="setRating(5)"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+            ></path>
+          </svg>
+        </div>
+
+        <div class="flex justify-center mb-4">
+          <Button :text="'Send en vurdering'" @click="sendRating"></Button>
+        </div>
+
+        <!-- Modal footer -->
+        <div class="rounded-b border-t border-gray-200 dark:border-gray-600">
+          <!-- Slot: Add any html you want here -->
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Button from "@/components/BaseComponents/ColoredButton";
+import { postNewRating } from "@/utils/apiutil";
+
+export default {
+  name: "RatingModal",
+  data() {
+    return {
+      score: 3,
+      comment: "",
+      rating: [
+        "text-warn",
+        "text-warn",
+        "text-warn",
+        "text-gray-300",
+        "text-gray-300",
+      ],
+    };
+  },
+  props: {
+    visible: Boolean,
+    name: String,
+    title: String,
+    rentID: Number,
+    renterIsReceiverOfRating: Boolean,
+  },
+
+  components: {
+    Button,
+  },
+  methods: {
+    setRating(ratingNumber) {
+      this.score = ratingNumber;
+      for (let i = 0; i < 5; i++) {
+        if (i < ratingNumber) {
+          this.rating[i] = "text-warn";
+        } else {
+          this.rating[i] = "text-gray-300";
+        }
+      }
+    },
+    close() {
+      this.$emit("close");
+    },
+    async sendRating() {
+      const ratingInfo = {
+        score: this.score,
+        comment: this.comment,
+        renterIsReceiverOfRating: this.renterIsReceiverOfRating,
+        rentID: this.rentID,
+      };
+
+      const postResponse = await postNewRating(ratingInfo);
+
+      console.log("posted: " + postResponse);
+
+      this.$router.push("/");
+    },
+  },
+};
+</script>
diff --git a/src/components/ChatComponents/ChatComponent.vue b/src/components/ChatComponents/ChatComponent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6b2252b6a241430f9cc7e2dd91718b9817713a9f
--- /dev/null
+++ b/src/components/ChatComponents/ChatComponent.vue
@@ -0,0 +1,275 @@
+<template>
+  <div class="chat-container">
+    <div class="header">
+      <div
+        v-on:click="openHamburgerMethod"
+        class="hamburger grid space-y-2 content-center m-3"
+      >
+        <div class="w-8 h-0.5 bg-gray-600"></div>
+        <div class="w-8 h-0.5 bg-gray-600"></div>
+        <div class="w-8 h-0.5 bg-gray-600"></div>
+      </div>
+      <div class="flex">
+        <img class="pfp" :src="this.src" alt="Profile Picture" />
+        <h1>{{ name }}</h1>
+      </div>
+      <div></div>
+    </div>
+    <div v-if="recipient" class="conversation">
+      <div v-for="(message, i) in messages" v-bind:key="i">
+        <rental-message
+          v-if="message?.createdAt"
+          :rent="message"
+        ></rental-message>
+        <ChatMessage v-else :message="message"></ChatMessage>
+      </div>
+    </div>
+    <div v-else class="conversation">
+      <div class="not-found">
+        <p>USER NOT FOUND</p>
+      </div>
+    </div>
+    <div
+      class="flex items-center justify-between w-full p-3 border-t border-gray-300"
+    >
+      <input
+        v-on:keyup.enter="sendMessage"
+        type="text"
+        placeholder="Message"
+        class="block w-full py-2 pl-4 mx-3 bg-gray-100 rounded-full outline-none focus:text-gray-700"
+        name="message"
+        v-model="message"
+      />
+      <button v-on:click="sendMessage" style="padding: 10px; color: red">
+        <svg
+          class="w-5 h-5 text-gray-500 origin-center transform rotate-90"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import ChatMessage from "./ChatMessage.vue";
+import axios from "axios";
+import ws from "@/services/ws";
+import RentalMessage from "./RentalMessage.vue";
+export default {
+  props: {
+    openHamburger: { type: Function },
+    recipientID: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      canScroll: true,
+      scrollBehavior: "",
+      recipient: null,
+      rents: [],
+      message: "",
+      msgs: [],
+    };
+  },
+  components: {
+    ChatMessage,
+    RentalMessage,
+  },
+  computed: {
+    name() {
+      return this.recipient
+        ? this.recipient.firstName + " " + this.recipient.lastName
+        : "N/A";
+    },
+    src() {
+      return (
+        this.recipient?.picture ||
+        require("@/assets/defaultUserProfileImage.jpg")
+      );
+    },
+    messages() {
+      let arr = [...this.msgs, ...this.rents].sort((a, b) => {
+        return (a?.createdAt || a.timestamp) - (b?.createdAt || b.timestamp);
+      });
+      return arr;
+    },
+  },
+  methods: {
+    openHamburgerMethod() {
+      this.$emit("openHamburger");
+    },
+    scroll() {
+      let container = this.$el.querySelector(".conversation");
+      container.scrollTop = container.scrollHeight;
+    },
+    async reloadMessages() {
+      const token = this.$store.state.user.token;
+      const response = await fetch(
+        `${process.env.VUE_APP_BASEURL}chats/users/${this.recipientID}/messages`,
+        {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+      this.msgs = await response.json();
+    },
+    async sendMessage() {
+      if (!this.recipient || this.message == null || this.message == "") return;
+      this.canScroll = true;
+      const token = this.$store.state.user.token;
+      await axios.post(
+        process.env.VUE_APP_BASEURL +
+          `chats/users/${this.recipientID}/messages`,
+        {
+          message: this.message,
+        },
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+      this.message = "";
+      ws.sendMessage({
+        sender: parseInt(this.userid),
+        recipient: this.recipientID,
+      });
+      await this.reloadMessages();
+    },
+    async reloadRents() {
+      const token = this.$store.state.user.token;
+      const response = await fetch(
+        `${process.env.VUE_APP_BASEURL}renting/user/${this.recipientID}/all`,
+        {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+      this.rents = await response.json();
+    },
+    async getRecipient() {
+      const token = this.$store.state.user.token;
+      const response = await fetch(
+        `${process.env.VUE_APP_BASEURL}users/${this.recipientID}/profile`,
+        {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+
+      this.recipient = await response.json();
+    },
+  },
+  watch: {
+    async recipientID() {
+      this.rents = [];
+      this.msgs = [];
+      await this.reloadMessages();
+      await this.getRecipient();
+      await this.reloadRents();
+    },
+  },
+  async created() {
+    await this.reloadMessages();
+    await this.getRecipient();
+    await this.reloadRents();
+
+    ws.on(
+      "NEW_MESSAGE",
+      () => {
+        this.reloadMessages();
+      },
+      "chat"
+    );
+  },
+  updated() {
+    if (this.canScroll) this.scroll();
+    this.canScroll = false;
+    this.scrollBehavior = "smooth";
+  },
+  unmounted() {
+    ws.end("NEW_MESSAGE", "chat");
+  },
+};
+</script>
+
+<style scoped>
+.hamburger {
+  display: none;
+}
+
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: auto;
+}
+
+.not-found {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+.not-found p {
+  font-size: 2rem;
+  font-weight: bold;
+}
+.conversation {
+  height: 100%;
+  width: 100%;
+  padding: 1.25rem;
+  overflow-y: scroll;
+  scroll-behavior: v-bind(scrollBehavior);
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  padding: 0.75rem;
+  border-bottom: 1px solid black;
+}
+
+.header h1 {
+  align-self: center;
+  margin-left: 10px;
+  color: #4b5563;
+  font-weight: bold;
+}
+
+.pfp {
+  object-fit: cover;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+}
+
+@media screen and (max-width: 600px) {
+  .header {
+    justify-content: space-between;
+  }
+
+  .hamburger {
+    display: block;
+  }
+}
+</style>
diff --git a/src/components/ChatComponents/ChatMessage.vue b/src/components/ChatComponents/ChatMessage.vue
index 73ded12cc8407dddc21f12614e01b2b8eac71b07..3490083e12afbff3702aabc031b2173e9803e417 100644
--- a/src/components/ChatComponents/ChatMessage.vue
+++ b/src/components/ChatComponents/ChatMessage.vue
@@ -1,22 +1,34 @@
 <template>
-  <div v-bind:class="'w-full break-words flex ' + side()">
-    <div
-      style="max-width: 70%"
-      v-bind:class="
-        this.color() + ' rounded px-5 py-2 my-2 relative ' + this.textColor()
-      "
-    >
-      <span class="block"
-        >{{ this.message.content }} {{ this.message.from }}</span
-      >
-      <span class="block text-xs text-right">{{ this.calculateTime() }}</span>
+  <div v-bind:class="'blob-container ' + this.side()">
+    <div v-bind:class="this.color() + ' message-container ' + this.textColor()">
+      <span class="message">{{ this.message.content }}</span>
+      <span class="">{{ this.calculateTime() }}</span>
     </div>
   </div>
 </template>
 
+<style scoped>
+.blob-container {
+  display: flex;
+  max-width: 100%;
+}
+
+.message {
+  word-break: break-word;
+  display: block;
+}
+
+.message-container {
+  border-radius: 10px;
+  max-width: 70%;
+  padding: 0.75rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+</style>
 <script>
 import { parseCurrentUser } from "@/utils/token-utils";
-
+//block text-xs text-right
 export default {
   props: {
     message: Object,
@@ -46,13 +58,59 @@ export default {
         : "justify-end";
     },
     calculateTime() {
-      //let time = this.message.from;
-      // Calculate time when message was sent
-      let date = new Date(this.message.timestamp);
-      let hours = date.getHours();
-      let minutes = "0" + date.getMinutes();
-      let formattedTime = hours + ":" + minutes.substr(-2);
-      return formattedTime;
+      var time = this?.message.timestamp;
+      var date = new Date(time);
+      //Todo add timing for mm and hh and week of message
+      var mmOfMessage = String(date.getMinutes());
+      var hhOfMessage = String(date.getHours());
+      var ddOfMessage = String(date.getDate()).padStart(2, "0");
+      var dayOfMessage = date.toLocaleString("default", { weekday: "short" });
+      var monthOfMessage = String(date.getMonth() + 1).padStart(2, "0"); //January is 0!
+      const shortMonthOfMessage = date.toLocaleString("default", {
+        month: "short",
+      });
+      var yyyyOfMessage = date.getFullYear();
+
+      var today = new Date();
+      var dd = String(today.getDate()).padStart(2, "0");
+      var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
+      var yyyy = today.getFullYear();
+      if (ddOfMessage == dd) {
+        return "" + hhOfMessage + ":" + mmOfMessage + "";
+      } else if (this.isDateInThisWeek(date)) {
+        return "" + dayOfMessage + "  " + hhOfMessage + ":" + mmOfMessage;
+      } else if (monthOfMessage == mm) {
+        return "" + ddOfMessage + "  " + hhOfMessage + ":" + mmOfMessage;
+      } else if (yyyyOfMessage == yyyy) {
+        return "" + shortMonthOfMessage + "  " + ddOfMessage;
+      }
+      return (
+        shortMonthOfMessage + "  " + ddOfMessage + "  " + yyyyOfMessage + ""
+      );
+
+      /*
+        Take timestamp and display date when message was sent
+        If message was sent this day show time (HH:MM) (13:00)
+        If message was sent this week show day of the week and time (DDD HH:MM) (Mon 13:00)
+        If message was sent this month show day of the month, date and time (DD HH:MM) (13 13:00)
+        If message was sent this year show month and day of the month (MMM DD) (Jan 13)
+        If message was sent more than a year ago show year with date (MMM DD YYYY) (Jan 13 2020)
+      */
+    },
+    isDateInThisWeek(date) {
+      const todayObj = new Date();
+      const todayDate = todayObj.getDate();
+      const todayDay = todayObj.getDay();
+
+      // get first date of week
+      const firstDayOfWeek = new Date(todayObj.setDate(todayDate - todayDay));
+
+      // get last date of week
+      const lastDayOfWeek = new Date(firstDayOfWeek);
+      lastDayOfWeek.setDate(lastDayOfWeek.getDate() + 6);
+
+      // if date is equal or within the first and last dates of the week
+      return date >= firstDayOfWeek && date <= lastDayOfWeek;
     },
   },
 };
diff --git a/src/components/ChatComponents/ChatProfile.vue b/src/components/ChatComponents/ChatProfile.vue
index 60c544f802a2384cf9e665c986d2fc24711ab197..db4c47cad8cc00e943159362ca45f4dc1ee7df65 100644
--- a/src/components/ChatComponents/ChatProfile.vue
+++ b/src/components/ChatComponents/ChatProfile.vue
@@ -5,7 +5,7 @@
   >
     <img
       class="h-10 w-10 rounded-full object-cover"
-      src="https://www.mintface.xyz/content/images/2021/08/QmTndiF423kjdXsNzsip1QQkBQqDuzDhJnGuJAXtv4XXiZ-1.png"
+      :src="src || 'S../../assets/defaultUserProfileImage.jpg'"
       :alt="{ name }"
     />
     <div class="w-full pb-2">
@@ -47,12 +47,40 @@ export default {
       );
     },
     lastMessageTime() {
-      return "5 min";
+      // Calculate time since last message
+      const time = this.conversation.lastMessage.timestamp;
+      const now = new Date();
+      const diff = now - time;
+      const seconds = Math.floor(diff / 1000);
+      const minutes = Math.floor(seconds / 60);
+      const hours = Math.floor(minutes / 60);
+      const days = Math.floor(hours / 24);
+      const months = Math.floor(days / 30);
+      const years = Math.floor(months / 12);
+
+      if (seconds < 60) {
+        return "Just now";
+      } else if (minutes < 60) {
+        return minutes + " minutes ago";
+      } else if (hours < 24) {
+        return hours + " hours ago";
+      } else if (days < 30) {
+        return days + " days ago";
+      } else if (months < 12) {
+        return months + " months ago";
+      } else {
+        return years + " years ago";
+      }
+    },
+    src() {
+      return this.conversation.recipient.picture
+        ? this.conversation.recipient.picture
+        : require("@/assets/defaultUserProfileImage.jpg");
     },
   },
   methods: {
     selectUser() {
-      this.$emit("recipient", this.conversation.recipient.userId);
+      this.$emit("recipient", this.conversation?.recipient.userId);
     },
   },
 };
diff --git a/src/components/ChatComponents/ChatsComponent.vue b/src/components/ChatComponents/ChatsComponent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f2cc2b00b788c5154aa5e137ae3ff1f9cc1482ab
--- /dev/null
+++ b/src/components/ChatComponents/ChatsComponent.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="chat">
+    <div class="conversations">
+      <h1>Meldinger</h1>
+      <hr />
+      <ChatProfile
+        v-for="(conversation, i) in conversations"
+        :conversation="conversation"
+        :key="i"
+        @recipient="selectUser"
+      ></ChatProfile>
+      <!-- If no conversatiosn show no conversations found -->
+      <div v-if="conversations.length === 0" class="no-conversations">
+        <p>Ingen samtaler</p>
+      </div>
+    </div>
+    <div class="current-chat">
+      <ChatComponent
+        @openHamburger="openHamburger"
+        v-if="recipientID"
+        :recipientID="recipientID"
+      ></ChatComponent>
+      <div v-else class="nothing-selected">
+        <p>Select a user to start a chat</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ChatProfile from "./ChatProfile.vue";
+import ChatComponent from "./ChatComponent.vue";
+import { parseCurrentUser } from "@/utils/token-utils";
+import ws from "@/services/ws";
+
+export default {
+  props: {},
+  watch: {
+    $route() {
+      const newVal = this.$route.query?.userID || null;
+      this.recipientID = newVal;
+    },
+  },
+  data: () => {
+    return {
+      messages: [],
+      message: "",
+      recipient: null,
+      hambuger: "none",
+      conversations: [],
+      hambugerDisplay: "none",
+      recipientID: null,
+    };
+  },
+  components: { ChatProfile, ChatComponent },
+  computed: {
+    userid() {
+      return parseCurrentUser().accountId;
+    },
+    name() {
+      return this.recipient.firstName + " " + this.recipient.lastName;
+    },
+  },
+  methods: {
+    selectUser(recipientID) {
+      this.hambugerDisplay = "none";
+      this.$router.push({ path: "messages", query: { userID: recipientID } });
+    },
+    openHamburger() {
+      this.hambugerDisplay = "block";
+    },
+    calculateSide(from) {
+      return from == this.userid ? "end" : "start";
+    },
+    async fetchChats() {
+      const token = this.$store.state.user.token;
+      // Get all conversations from api with /chats/users
+      const conResponse = await fetch(
+        `${process.env.VUE_APP_BASEURL}chats/users`,
+        {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      ); // add error handling
+      this.conversations = await conResponse.json();
+    },
+  },
+  async created() {
+    await this.fetchChats();
+    ws.on(
+      "NEW_MESSAGE",
+      async () => {
+        await this.fetchChats();
+      },
+      "chats"
+    );
+    this.recipientID = this.$route.query?.userID || null;
+    if (!this.recipientID) this.hambugerDisplay = "block";
+  },
+  unmounted() {
+    ws.end("NEW_MESSAGE", "chats");
+  },
+};
+</script>
+<style scoped>
+.chat {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: min(100vh - 3.5rem);
+}
+
+.nothing-selected {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+.no-conversations {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+.nothing-selected p {
+  font-size: 2rem;
+  font-weight: bold;
+  text-align: center;
+}
+
+.current-chat {
+  width: 100%;
+  height: 100%;
+}
+
+.conversations {
+  min-width: 300px;
+  border-right-width: 1px;
+  border-color: black;
+  height: 100%;
+}
+
+.conversations h1 {
+  padding: 0.5rem;
+  padding-left: 0;
+  align-self: center;
+  margin-left: 10px;
+  color: #4b5563;
+  font-weight: bold;
+  font-size: large;
+}
+
+@media screen and (max-width: 600px) {
+  .conversations {
+    display: v-bind(hambugerDisplay);
+    z-index: 99;
+    width: 100%;
+    position: absolute;
+    background-color: white;
+  }
+
+  .conversations h1 {
+    text-align: center;
+  }
+}
+
+.button {
+  display: flex;
+  justify-content: center;
+  padding: 0.75rem;
+}
+</style>
diff --git a/src/components/ChatComponents/RentalMessage.vue b/src/components/ChatComponents/RentalMessage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8dab267ac5d9db895be02f6b04bcd3102b160c28
--- /dev/null
+++ b/src/components/ChatComponents/RentalMessage.vue
@@ -0,0 +1,179 @@
+<template>
+  <div class="message" style="max-width: 70%">
+    <div class="info">
+      <div class="text">
+        <h2 class="header">Ny utleie forespørsel</h2>
+        <p>Dato: {{ from }} - {{ to }}</p>
+        <p>Pris: {{ price }}kr</p>
+      </div>
+      <div class="img-container">
+        <img class="img" :src="img" alt="Produkt Bilde" />
+      </div>
+    </div>
+    <div>
+      <p class="more-header">Melding fra leier:</p>
+      <div class="more">
+        <p>
+          {{ extra }}
+        </p>
+      </div>
+    </div>
+    <div class="buttons" v-if="!rent.isAccepted && !rent.deleted">
+      <button class="button green" @click="accept">Godta</button>
+      <button class="button red" @click="reject">Avslå</button>
+    </div>
+    <div class="" v-if="rent.isAccepted">
+      <h1 class="green">Godtatt</h1>
+    </div>
+    <div class="" v-if="rent.deleted">
+      <h1 class="red">Avslått</h1>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import { tokenHeader } from "@/utils/token-utils";
+export default {
+  props: {
+    rent: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    img() {
+      return "https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80"; //this.rent.listing.imageUrl;
+    },
+    from() {
+      // take ms and turn into date and return date
+      return new Date(this.rent.fromTime).toLocaleDateString();
+    },
+    to() {
+      return new Date(this.rent.toTime).toLocaleDateString();
+    },
+    price() {
+      // Calculate price from price * days
+      return (
+        this.rent.listing.pricePerDay *
+        Math.ceil(
+          (this.rent.toTime - this.rent.fromTime) / (1000 * 60 * 60 * 24)
+        )
+      );
+    },
+    extra() {
+      return this.rent.message || "Ingen Melding";
+    },
+  },
+  methods: {
+    async accept() {
+      await axios.put(
+        process.env.VUE_APP_BASEURL + `renting/${this.rent.rentId}/accept`,
+        null,
+        { headers: tokenHeader() }
+      );
+    },
+    async reject() {
+      await axios.delete(
+        process.env.VUE_APP_BASEURL + `renting/${this.rent.rentId}/delete`,
+        null,
+        { headers: tokenHeader() }
+      );
+    },
+  },
+};
+</script>
+
+<style scoped>
+.message {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: #d1d5db;
+  border-radius: 10px;
+  padding: 10px;
+}
+
+.info {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+.img {
+  width: 100%;
+  height: auto;
+  border-radius: 10px;
+  max-height: 200px;
+}
+
+.text h1 {
+  text-decoration: underline;
+}
+
+@media (max-width: 1200px) {
+  .img-container {
+    max-width: 30%;
+  }
+  .text {
+    min-width: 70%;
+  }
+}
+
+.img-container {
+  display: flex;
+  align-content: center;
+  justify-items: center;
+  max-height: 20%;
+}
+.header {
+  font-weight: bold;
+  text-align: center;
+  text-decoration: underline;
+}
+.more-header {
+  font-weight: bold;
+}
+
+.more {
+  border: 1px solid black;
+  border-radius: 10px;
+}
+
+.more p {
+  margin-left: 5px;
+}
+
+.buttons {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-items: center;
+  justify-content: space-around;
+}
+
+.button {
+  border-radius: 0.25rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  font-weight: 700;
+  color: white;
+}
+
+.red {
+  background-color: #ff1f1f;
+}
+
+.red:hover {
+  box-shadow: 0 0 0 0.2rem rgba(255, 31, 31, 0.5);
+}
+
+.green {
+  background-color: #0bb610;
+}
+.green:hover {
+  box-shadow: 0 0 0 0.2rem rgba(11, 182, 16, 0.5);
+}
+</style>
diff --git a/src/components/CommunityComponents/CommunityHeader.vue b/src/components/CommunityComponents/CommunityHeader.vue
index afd63a75c4fb1c7ac271c6eaaf9c94096fec4728..eba31718a765b9adfc08bd6b449dbff4c3de28a1 100644
--- a/src/components/CommunityComponents/CommunityHeader.vue
+++ b/src/components/CommunityComponents/CommunityHeader.vue
@@ -145,9 +145,6 @@ export default {
       }
     },
   },
-  // beforeMount() {
-  //   this.getIfUserInCommunity();
-  // },
   async created() {
     await this.load();
     this.loading = false;
diff --git a/src/components/CommunityComponents/CommunityListItem.vue b/src/components/CommunityComponents/CommunityListItem.vue
index 4116a893a97845095d11aa60b7735de685aac623..40d90645e430cd49f104c91c7def3e125b9721fb 100644
--- a/src/components/CommunityComponents/CommunityListItem.vue
+++ b/src/components/CommunityComponents/CommunityListItem.vue
@@ -54,7 +54,10 @@
         v-if="!community.picture"
         class="h-10 w-10 flex flex-col justify-center items-center ml-2 mr-2"
       >
-        <UserGroupIcon alt="Felleskapets bilde" class="h-10 w-10" />
+        <UserGroupIcon
+          alt="Felleskapets bilde"
+          class="h-10 w-10 text-primary-dark"
+        />
       </div>
       <div
         v-else
@@ -67,7 +70,7 @@
         />
       </div>
       <div class="flex-1 pl-1 overflow-hidden">
-        <div class="font-medium dark:text-white truncate">
+        <div class="font-medium text-gray-800 dark:text-white truncate">
           {{ community.name }}
         </div>
       </div>
diff --git a/src/components/CommunityComponents/MemberList.vue b/src/components/CommunityComponents/MemberList.vue
index 336481461284383d1e4c90bcb0408b28b1a8c468..3818146ff63024c1dab742805231a0e0baa582c9 100644
--- a/src/components/CommunityComponents/MemberList.vue
+++ b/src/components/CommunityComponents/MemberList.vue
@@ -1,6 +1,5 @@
 <template>
-  <div v-if="loading">LASTER...</div>
-  <ul v-else>
+  <ul>
     <li v-for="member in members" :key="member.userId">
       <UserListItemCard :buttons="buttons" :user="member" />
     </li>
diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index 3784e50b8ee43c15553a74f49b10e55dffb33e7f..7a62e90f302416559f695459aafcfddfd6f43244 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -136,10 +136,10 @@
     <!-- Images -->
     <div class="mt-6">
       <label
-        class="block mb-2 text-xl font-medium text-gray-900 dark:text-gray-400"
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
         id="imageLabel"
       >
-        Bilde
+        Bilde (bildet må være .png)
       </label>
 
       <input
@@ -148,7 +148,7 @@
         style="display: none"
         @change="addImage"
         multiple
-        accept="image/png, image/jpeg"
+        accept="image/png"
       />
 
       <!-- Button for adding an image -->
diff --git a/src/components/ItemComponents/NewItemForm.vue b/src/components/ItemComponents/NewItemForm.vue
index 67ed1ebcc6ab09ca8977bb710f5f0becdd7a2149..244d24434ca753ffd3ecd2f3e76ebd0929fb3dcd 100644
--- a/src/components/ItemComponents/NewItemForm.vue
+++ b/src/components/ItemComponents/NewItemForm.vue
@@ -187,7 +187,7 @@
         class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
         id="imageLabel"
       >
-        Bilder
+        Bilder (bildene må være .png)
       </label>
 
       <input
@@ -196,7 +196,7 @@
         style="display: none"
         @change="addImage"
         multiple
-        accept="image/png, image/jpeg"
+        accept="image/png"
       />
 
       <Button :text="'Velg bilde'" @click="$refs.file.click()" />
@@ -216,7 +216,12 @@
 <script>
 import useVuelidate from "@vuelidate/core";
 import { parseUserFromToken } from "@/utils/token-utils";
-import { postNewItem, getMyGroups } from "@/utils/apiutil";
+import {
+  postNewItem,
+  getMyGroups,
+  postNewImageCommunity,
+  PostImagesArrayToListing,
+} from "@/utils/apiutil";
 import Button from "@/components/BaseComponents/ColoredButton";
 
 import {
@@ -303,6 +308,7 @@ export default {
         userId: -1,
         selectedGroupId: -1,
         selectedGroups: [],
+        imagesToSend: [],
       },
       //Kategorier skal legges inn ved api/hente fra db, her må det endres etterhvert
       categories: ["Hage", "Kjøkken", "Musikk", "Annet"],
@@ -325,6 +331,7 @@ export default {
     async saveClicked() {
       if (this.checkValidation()) {
         this.checkUser();
+
         const itemInfo = {
           title: this.item.title,
           description: this.item.description,
@@ -336,6 +343,8 @@ export default {
         };
         await postNewItem(itemInfo);
 
+        await PostImagesArrayToListing(this.item.imagesToSend);
+
         this.$router.push("/");
       }
     },
@@ -345,8 +354,20 @@ export default {
       this.item.userId = parseInt(user.accountId);
     },
 
-    addImage: function (event) {
+    addImage: async function (event) {
       this.item.images.push(URL.createObjectURL(event.target.files[0]));
+
+      var that = this;
+      let image = event.target.files[0];
+      let fileReader = new FileReader();
+      fileReader.onloadend = async function () {
+        const res = fileReader.result;
+        const id = await postNewImageCommunity(res);
+
+        const API_URL = process.env.VUE_APP_BASEURL;
+        that.item.imagesToSend.push(API_URL + "images/" + id);
+      };
+      fileReader.readAsArrayBuffer(image);
     },
 
     getGroups: async function () {
diff --git a/src/components/TimepickerComponents/DatepickerRange/CalendarComponent.vue b/src/components/TimepickerComponents/DatepickerRange/CalendarComponent.vue
index 5279dc8265d9273154150ff7398a40912bcae196..7ff418c29bec9efc5c40b2d424c1c0751563cd42 100644
--- a/src/components/TimepickerComponents/DatepickerRange/CalendarComponent.vue
+++ b/src/components/TimepickerComponents/DatepickerRange/CalendarComponent.vue
@@ -5,7 +5,7 @@
     >
       <div class="months" v-for="day in days" :key="day">{{ day }}</div>
     </div>
-    <div class="grid grid-cols-7 gap-y-0.5 my-1">
+    <div class="daysList grid grid-cols-7 gap-y-0.5 my-1">
       <div
         class="days blocked"
         v-for="index in daysBeforeStartOfMonth"
@@ -192,14 +192,6 @@ export default {
     isBlocked(day) {
       return this.blockedDays.includes(day);
     },
-    isDayBlocked(day) {
-      return this.blockedDays.includes(day);
-    },
-    isDayBetweenBlocked(day) {
-      return this.blockedDaysRange.some(([start, end]) => {
-        return start <= day && day <= end;
-      });
-    },
     // Get date from day and month and check if it is between start and end
     isDayBetweenStartAndEndDate(day) {
       if (!this.startDate || !this.endDate) return false;
diff --git a/src/components/FormComponents/LoginForm.vue b/src/components/UserAuthComponents/LoginForm.vue
similarity index 100%
rename from src/components/FormComponents/LoginForm.vue
rename to src/components/UserAuthComponents/LoginForm.vue
diff --git a/src/components/FormComponents/NewPasswordForm.vue b/src/components/UserAuthComponents/NewPasswordForm.vue
similarity index 100%
rename from src/components/FormComponents/NewPasswordForm.vue
rename to src/components/UserAuthComponents/NewPasswordForm.vue
diff --git a/src/components/FormComponents/RegisterForm.vue b/src/components/UserAuthComponents/RegisterForm.vue
similarity index 100%
rename from src/components/FormComponents/RegisterForm.vue
rename to src/components/UserAuthComponents/RegisterForm.vue
diff --git a/src/components/FormComponents/ResetPasswordForm.vue b/src/components/UserAuthComponents/ResetPasswordForm.vue
similarity index 100%
rename from src/components/FormComponents/ResetPasswordForm.vue
rename to src/components/UserAuthComponents/ResetPasswordForm.vue
diff --git a/src/components/UserProfileComponents/RatingComponents/Rating.vue b/src/components/UserProfileComponents/RatingComponents/Rating.vue
index 1db98bfb010248d1cf3d554df1f946a6867e6dc9..6efa3b014f4c175b7af950ddb36119a7029f60f9 100644
--- a/src/components/UserProfileComponents/RatingComponents/Rating.vue
+++ b/src/components/UserProfileComponents/RatingComponents/Rating.vue
@@ -1,5 +1,17 @@
 <template>
-  <ul v-if="rating != -1" class="flex justify-center">
+  <ul v-if="isNaN(rating)" class="flex justify-center">
+    <li>
+      <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
+        {{ ratingType }}:&nbsp;
+      </p>
+    </li>
+    <li>
+      <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
+        Ingen vurderinger
+      </p>
+    </li>
+  </ul>
+  <ul v-else class="flex justify-center">
     <li>
       <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
         {{ ratingType }}:&nbsp;
@@ -18,21 +30,10 @@
       </svg>
     </li>
     <li>
-      <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
+      <!-- Trenger vi å vise i tekst når vi har stjerner? -->
+      <!--       <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
         {{ rating }} out of 5
-      </p>
-    </li>
-  </ul>
-  <ul v-else class="flex justify-center">
-    <li>
-      <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
-        {{ ratingType }}:&nbsp;
-      </p>
-    </li>
-    <li>
-      <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
-        Ingen vurderinger
-      </p>
+      </p> -->
     </li>
   </ul>
 </template>
diff --git a/src/components/UserProfileComponents/UserListItemCard.vue b/src/components/UserProfileComponents/UserListItemCard.vue
index 1d6bd9f2472695c6427f96026a8b212ab9d130a9..17c002bc28fce875361dafac43ea0add48e3e9a0 100644
--- a/src/components/UserProfileComponents/UserListItemCard.vue
+++ b/src/components/UserProfileComponents/UserListItemCard.vue
@@ -18,7 +18,7 @@
 
     <!-- User rating -->
     <div class="hidden md:block flex-auto">
-      <RatingComponent :rating="rating" :ratingType="'Gjennomsnitts rating'" />
+      <RatingComponent :rating="rating" :ratingType="'Vurderinger'" />
     </div>
 
     <!-- Buttons -->
@@ -107,7 +107,7 @@ export default {
     openChatWithUser() {
       this.$router.push({
         name: "messages",
-        params: { userId: this.user.userId },
+        query: { userID: this.user.userId },
       });
     },
     kickUserFromCommunity() {
@@ -132,7 +132,13 @@ export default {
     },
   },
   async created() {
-    this.rating = await UserService.getUserRatingAverage(this.user.userId);
+    const maybeRating = await UserService.getUserRatingAverage(
+      this.user.userId
+    );
+    if (isNaN(maybeRating)) this.rating = NaN;
+    else this.rating = maybeRating;
+    if (this.rating > 5) this.rating = 5;
+    if (this.rating < 1) this.rating = 1;
     this.communityID = this.$route.params.communityID;
   },
 };
diff --git a/src/router/index.js b/src/router/index.js
index b0a701a8e3e72570a55bb60873802b88f200adfd..3a6d7a8316d3c5d61ea2a1d614d65f15f74072c9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -47,7 +47,7 @@ const routes = [
   {
     path: "/register",
     name: "register",
-    component: () => import("../views/FormViews/RegisterView.vue"),
+    component: () => import("../views/UserAuthViews/RegisterView.vue"),
   },
   {
     path: "/messages",
@@ -58,12 +58,12 @@ const routes = [
   {
     path: "/login",
     name: "login",
-    component: () => import("../views/FormViews/LoginView.vue"),
+    component: () => import("../views/UserAuthViews/LoginView.vue"),
   },
   {
     path: "/newPassword",
     name: "newPassword",
-    component: () => import("../views/FormViews/NewPasswordView"),
+    component: () => import("../views/UserAuthViews/NewPasswordView"),
     beforeEnter: guardRoute,
   },
   {
@@ -74,7 +74,7 @@ const routes = [
   {
     path: "/resetPassword",
     name: "resetPassword",
-    component: () => import("../views/FormViews/ResetPasswordView.vue"),
+    component: () => import("../views/UserAuthViews/ResetPasswordView.vue"),
   },
   {
     path: "/newCommunity",
@@ -94,13 +94,6 @@ const routes = [
     component: () => import("../views/ItemViews/NewItemView.vue"),
     beforeEnter: guardRoute,
   },
-  {
-    path: "/notifications",
-    name: "notifications",
-    component: () =>
-      import("../components/BaseComponents/NotificationsForm.vue"),
-    beforeEnter: guardRoute,
-  },
   {
     path: "/community/:communityID",
     name: "communityHome",
diff --git a/src/services/ws.js b/src/services/ws.js
index c37cc21d24e93419abb2a6d1ebe3a0e0c8be3503..233ed883af296c9da8417e1884ca35cba91106ae 100644
--- a/src/services/ws.js
+++ b/src/services/ws.js
@@ -1,16 +1,21 @@
 const Stomp = require("stompjs");
-const SockJS = new require("sockjs-client")(process.env.VUE_APP_BASEURL + "ws");
+const SockJSRequire = require("sockjs-client");
+const SockJS = new SockJSRequire(process.env.VUE_APP_BASEURL + "ws");
 import { parseCurrentUser } from "@/utils/token-utils";
 
 // Create a Singleton function
 // Events fired by websocket, MESSAGE
 const ws = (function () {
   // Object of all injected functions that the client may want
+  // These functions will be in a object
   const handlers = {};
 
   const fire = function (event, data) {
     if (handlers[event]) {
-      handlers[event](data);
+      // for each object in object fire event
+      for (const key in handlers[event]) {
+        handlers[event][key](data);
+      }
     }
   };
 
@@ -19,7 +24,6 @@ const ws = (function () {
 
     // Fire message event
     fire("MESSAGE", JSON.parse(payload.body));
-
     if (data.status == "NEW_MESSAGE")
       fire("NEW_MESSAGE", JSON.parse(payload.body));
   };
@@ -38,16 +42,20 @@ const ws = (function () {
   stompClient.connect({}, onConnected, onError);
 
   return {
-    on: function (event, callback) {
-      handlers[event] = callback;
+    on: function (event, callback, id = "none") {
+      // Generate random id
+      if (!handlers[event]) {
+        handlers[event] = {};
+      }
+      handlers[event][id] = callback;
     },
     fire: fire,
-    isActive: function (event) {
-      return !!handlers[event];
+    isActive: function (event, id = "none") {
+      return !!handlers[event]?.[id];
     },
-    end: function (event) {
+    end: function (event, id = "none") {
       if (handlers[event]) {
-        delete handlers[event];
+        delete handlers[event][id];
       } else {
         throw new Error("No handler for event: " + event);
       }
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index 88717abceb23d9a2537ab240708f7bdaaf669b19..86b911d547006c86e8c1fece8cc0b7ba0b3be32a 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -332,7 +332,6 @@ export function postNewImageCommunity(image) {
       headers: { ...tokenHeader(), "Content-Type": "image/png" },
     })
     .then((response) => {
-      console.log(response.data);
       return response.data;
     })
     .catch((error) => {
@@ -340,3 +339,17 @@ export function postNewImageCommunity(image) {
       return error;
     });
 }
+
+export function PostImagesArrayToListing(imagesArray) {
+  return axios
+    .post(API_URL + "listing/pictures", imagesArray, {
+      headers: tokenHeader(),
+    })
+    .then((response) => {
+      return response;
+    })
+    .catch((error) => {
+      console.error(error.response);
+      return error;
+    });
+}
diff --git a/src/views/ChatViews/ChatView.vue b/src/views/ChatViews/ChatView.vue
index 581da8f24f289618486dc3366f4476ca14e1d3c2..98283b536f2b892499768a7351948c5f3a91299d 100644
--- a/src/views/ChatViews/ChatView.vue
+++ b/src/views/ChatViews/ChatView.vue
@@ -1,76 +1,17 @@
 <template>
-  <div class="flex flex-col h-full overflow-hidden border-2">
-    <div class="flex flex-row h-full border-2 bg-gray-50">
-      <div class="basis-1/3">
-        <h1 class="text-center text-l">Mine samtaler</h1>
-        <ul v-if="conversations" class="border-2">
-          <li
-            v-for="conversation in conversations"
-            :key="conversation.recipient.userId"
-          >
-            <ChatProfile :conversation="conversation" @recipient="selectUser" />
-          </li>
-        </ul>
-      </div>
-      <div class="basis-2/3">
-        <CurrentChat v-if="selected" :recipient="selected" />
-      </div>
-    </div>
-  </div>
-  <!-- <div class="min-h-full">
-    <div class="border rounded grid grid-cols-3 w-full">
-      <div class="border-r border-gray-300 col-span-1">
-        <ul class="hidden sm:block overflow-auto h-full">
-          <h2 class="my-2 mb-2 ml-2 text-lg text-gray-600">Chats</h2>
-          <li v-if="conversations">
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div> -->
+  <chats-component></chats-component>
 </template>
 
 <script>
-import ChatProfile from "@/components/ChatComponents/ChatProfile.vue";
-import CurrentChat from "@/components/ChatComponents/CurrentChat.vue";
-import { parseCurrentUser } from "@/utils/token-utils";
-import ChatService from "@/services/chat.service";
-
+import ChatsComponent from "@/components/ChatComponents/ChatsComponent.vue";
 export default {
   components: {
-    ChatProfile,
-    CurrentChat,
+    ChatsComponent,
   },
   data() {
-    return {
-      conversations: null,
-      selected: null,
-    };
-  },
-  computed: {
-    key() {
-      return this.selected.userId || "ERROR";
-    },
-  },
-  methods: {
-    userID() {
-      return parseCurrentUser().accountId;
-    },
-    selectUser(value) {
-      const userid = value;
-      this.conversations.find((conversation) => {
-        return conversation.recipient.userId == userid;
-      });
-      this.selected = this.conversations.find(
-        (conversation) => conversation.recipient.userId == userid
-      ).recipient;
-    },
-  },
-  async created() {
-    this.conversations = await ChatService.getConversations(this.userID());
-    if (this.$route.params.userId !== null) {
-      this.selectUser(this.$route.params.userId);
-    }
+    return {};
   },
 };
 </script>
+
+<style></style>
diff --git a/src/views/CommunityViews/CommunityView.vue b/src/views/CommunityViews/CommunityView.vue
index 1a68b90fdb55c35454b06e56a7eb0b95f7776077..329917065b0679060da6503891b05c932ebaf18a 100644
--- a/src/views/CommunityViews/CommunityView.vue
+++ b/src/views/CommunityViews/CommunityView.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
-    <div v-if="loading" class="flex place-content-center p-8">
+    <div v-if="loading" class="flex place-content-center p-8 min-h-screen">
       <LoaderSpinner />
     </div>
-    <div v-else>
+    <div v-else class="min-h-screen">
       <!-- My communities, with pagination -->
       <div v-if="loggedIn">
         <div class="flex flex-row p-4 relative">
           <div
-            class="text-xl md:text-2xl text-primary-light font-medium w-full"
+            class="text-xl md:text-2xl text-primary-medium font-medium w-full"
           >
             Mine grupper
           </div>
@@ -33,7 +33,7 @@
       </div>
 
       <!-- Public communities, with search and pagination -->
-      <p class="text-xl md:text-2xl text-primary-light font-medium w-full p-4">
+      <p class="text-xl md:text-2xl text-primary-medium font-medium w-full p-4">
         Offentlige grupper
       </p>
       <!-- Search field -->
diff --git a/src/views/HelpView.vue b/src/views/HelpView.vue
index 585749da03358203863f9f07e23a64c86fec264d..343f1f47c4d432352db1c3c670c293ef7c4a1fdf 100644
--- a/src/views/HelpView.vue
+++ b/src/views/HelpView.vue
@@ -1,16 +1,20 @@
 <template>
-  <div class="mt-6 bg-white justify-center w-screen">
+  <div class="mt-10 bg-white justify-center w-screen">
     <div id="contact" class="grid place-items-center w-full">
       <div class="lg:mb-0 text-gray-700 w-full">
         <div class="mx-4">
-          <h2 class="text-primary-dark mb-6 uppercase font-bold text-2xl">
+          <h2
+            class="flex justify-center text-primary-dark mb-6 uppercase font-bold text-2xl mt-4"
+          >
             Kontakt oss
           </h2>
-          <p class="text-gray-500 leading-relaxed mb-9">
+          <p
+            class="flex justify-center mx-auto text-gray-500 leading-relaxed mb-12 max-w-md mt-8"
+          >
             {{ contact.description }}
           </p>
         </div>
-        <div class="flex mb-8 ml-2 w-full">
+        <div class="flex justify-center mb-12 w-full">
           <div class="max-w-14 max-h-14 min-h-14 min-w-14">
             <LocationMarkerIcon
               class="w-14 h-14 text-primary-dark rounded mr-4"
@@ -18,17 +22,17 @@
           </div>
           <div class="">
             <h4 class="font-bold text-gray-800 text-xl mb-1">Lokaler</h4>
-            <p>{{ contact.address }},</p>
-            <p>{{ contact.city }},</p>
+            <p>{{ contact.address }}</p>
+            <p>{{ contact.city }}</p>
             <p>{{ contact.country }}</p>
           </div>
         </div>
-        <div class="flex mb-8 ml-2 max-w-[370px] w-full">
+        <div class="flex justify-center mb-10 w-full pr-11">
           <div class="max-w-14 max-h-14 min-h-14 min-w-14">
             <MailIcon class="w-14 h-14 text-primary-dark rounded mr-4" />
           </div>
           <div class="">
-            <h4 class="font-bold text-gray-800 text-xl mb-1">Epost Addresse</h4>
+            <h4 class="font-bold text-gray-800 text-xl mb-1">E-postadresse</h4>
             <p>{{ contact.email }}</p>
           </div>
         </div>
@@ -36,9 +40,9 @@
     </div>
     <div id="faq">
       <div
-        class="mx-auto text-center px-4 text-2xl text-primary-dark font-semibold"
+        class="mx-auto text-center px-4 mt-8 text-2xl text-primary-dark font-semibold"
       >
-        Frequently Asked Questions
+        Ofte stilte spørsmål
       </div>
       <div
         class="mt-8 mx-auto max-w-screen-sm lg:max-w-screen-lg flex flex-col lg:grid lg:grid-cols-2"
@@ -49,7 +53,7 @@
               id="question-and-answer"
               class="select-none cursor-pointer border-2 mx-8 my-3 px-6 py-4 rounded-lg text-sm group"
             >
-              <dt id="question">
+              <dt id="question" @click="toggle(faqItem)">
                 <div class="flex justify-between text-gray-800">
                   <div class="font-bold">
                     {{ faqItem.question }}
@@ -93,7 +97,7 @@ export default {
       contact: {
         description:
           "BoCo (Borrow Community) er et norsk selskap som tilbyr en plattform for utlån av gjenstander for privatpersoner og bedrifter. BoCo streber for å bli den foretrukne plattformen for lån for privatpersoner og bedrifter i Norge.",
-        email: "BorrowCompany@BorrowCommunity.com",
+        email: "kontakt@boco.no",
         address: "O. S. Bragstads Plass 2G",
         city: "Trondheim",
         country: "Norge",
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index f86430c64bb07d2f6e60fe0626ac1f50371d3682..b3a3ac1be4c5e41d3c9e49311443720fcedf895d 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -1,15 +1,18 @@
 <template>
-  <div></div>
+  <chats-component></chats-component>
 </template>
 
 <script>
+import ChatsComponent from "@/components/ChatComponents/ChatsComponent.vue";
 export default {
+  components: {
+    ChatsComponent,
+  },
   data() {
     return {
       show: false,
     };
   },
-  components: {},
   methods: {
     toggleModal() {
       this.show = !this.show;
diff --git a/src/views/FormViews/LoginView.vue b/src/views/UserAuthViews/LoginView.vue
similarity index 74%
rename from src/views/FormViews/LoginView.vue
rename to src/views/UserAuthViews/LoginView.vue
index ec6fa68a7c9b217e2d199d2bd8b9d8781556343a..6ab7e4ca537206fceb2a2b1628d374b6aee0e8fb 100644
--- a/src/views/FormViews/LoginView.vue
+++ b/src/views/UserAuthViews/LoginView.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import LoginForm from "@/components/FormComponents/LoginForm";
+import LoginForm from "@/components/UserAuthComponents/LoginForm";
 export default {
   name: "LoginView.vue",
   components: {
diff --git a/src/views/FormViews/NewPasswordView.vue b/src/views/UserAuthViews/NewPasswordView.vue
similarity index 73%
rename from src/views/FormViews/NewPasswordView.vue
rename to src/views/UserAuthViews/NewPasswordView.vue
index 1c08586c58f04a984fa22a5af77219c79907c145..890a8f524b4490c03ba510c85c2dfc429b228143 100644
--- a/src/views/FormViews/NewPasswordView.vue
+++ b/src/views/UserAuthViews/NewPasswordView.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import NewPasswordForm from "@/components/FormComponents/NewPasswordForm";
+import NewPasswordForm from "@/components/UserAuthComponents/NewPasswordForm";
 export default {
   name: "NewPasswordView.vue",
   components: {
diff --git a/src/views/FormViews/RegisterView.vue b/src/views/UserAuthViews/RegisterView.vue
similarity index 67%
rename from src/views/FormViews/RegisterView.vue
rename to src/views/UserAuthViews/RegisterView.vue
index 93013987e5e31384c4391768e5468a6bc77df35d..0bf15f1143c38c4bf7fd336ca82afb2a302b9073 100644
--- a/src/views/FormViews/RegisterView.vue
+++ b/src/views/UserAuthViews/RegisterView.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import RegisterFormComponent from "../../components/FormComponents/RegisterForm.vue";
+import RegisterFormComponent from "../../components/UserAuthComponents/RegisterForm.vue";
 
 export default {
   components: {
diff --git a/src/views/FormViews/ResetPasswordView.vue b/src/views/UserAuthViews/ResetPasswordView.vue
similarity index 73%
rename from src/views/FormViews/ResetPasswordView.vue
rename to src/views/UserAuthViews/ResetPasswordView.vue
index 284c4fe3582728f817ad5fb7b6fbb98373dd38dc..3bb12c1738c08a4578fb2d381dd52cb86a7032a3 100644
--- a/src/views/FormViews/ResetPasswordView.vue
+++ b/src/views/UserAuthViews/ResetPasswordView.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import ResetPassword from "@/components/FormComponents/ResetPasswordForm";
+import ResetPassword from "@/components/UserAuthComponents/ResetPasswordForm";
 export default {
   name: "ResetPasswordView.vue",
   components: {
diff --git a/tailwind.config.js b/tailwind.config.js
index 65380e429009105b923a55266f6b301464b97a88..d8ef3f55c175f5952769a6b41dec929ef3533f4d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -24,7 +24,7 @@ module.exports = {
       primary: {
         light: "#306EC1",
         medium: "#004aad",
-        dark: "#003884",
+        dark: "#002B66",
       },
       secondary: {
         light: "#653273",
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/community-list-item.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/community-list-item.spec.js.snap
index 6ea43db8f525841f2ff49a8c9a1d45066552348b..4edde89c2c743d9c2411aa4a1a5c1403b7077c70 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/community-list-item.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/community-list-item.spec.js.snap
@@ -22,7 +22,7 @@ exports[`CommunityListItem component renders correctly 1`] = `
       class="flex-1 pl-1 overflow-hidden"
     >
       <div
-        class="font-medium dark:text-white truncate"
+        class="font-medium text-gray-800 dark:text-white truncate"
       >
         string
       </div>
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/community-list.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/community-list.spec.js.snap
index 52d4de639d8683ee0b575f40d2290c6ad383d554..a385829acb32b11671e1d9788b5b401b95c4d892 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/community-list.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/community-list.spec.js.snap
@@ -27,7 +27,7 @@ exports[`CommunityList component renders correctly 1`] = `
           class="flex-1 pl-1 overflow-hidden"
         >
           <div
-            class="font-medium dark:text-white truncate"
+            class="font-medium text-gray-800 dark:text-white truncate"
           >
             string
           </div>
@@ -78,7 +78,7 @@ exports[`CommunityList component renders correctly 1`] = `
           class="flex-1 pl-1 overflow-hidden"
         >
           <div
-            class="font-medium dark:text-white truncate"
+            class="font-medium text-gray-800 dark:text-white truncate"
           >
             string
           </div>
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
index 1b8f2021b3218a5e802c69956cd055a0f77d6b00..e3a0811fb62bb0a919a31fa7a987b7bf16e599bf 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
@@ -121,13 +121,13 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = `
     class="mt-6"
   >
     <label
-      class="block mb-2 text-xl font-medium text-gray-900 dark:text-gray-400"
+      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
       id="imageLabel"
     >
-       Bilde 
+       Bilde (bildet må være .png) 
     </label>
     <input
-      accept="image/png, image/jpeg"
+      accept="image/png"
       multiple=""
       style="display: none;"
       type="file"
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
index 26181401d016fdab5f197d4f30a46c66b2ca4c1b..c0152222de3fa62b177a362dde7b4b755e039b5b 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
@@ -171,10 +171,10 @@ exports[`NewItemForm component renders correctly 1`] = `
       class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
       id="imageLabel"
     >
-       Bilder 
+       Bilder (bildene må være .png) 
     </label>
     <input
-      accept="image/png, image/jpeg"
+      accept="image/png"
       multiple=""
       style="display: none;"
       type="file"
diff --git a/tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/CalendarComponent.spec.js b/tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/CalendarComponent.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..e244058b3b8821425bf1a3f582f55bbbf490d4c7
--- /dev/null
+++ b/tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/CalendarComponent.spec.js
@@ -0,0 +1,44 @@
+import { shallowMount } from "@vue/test-utils";
+import CalendarComponent from "@/components/TimepickerComponents/DatepickerRange/CalendarComponent.vue";
+
+describe("CalendarComponent tests", () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallowMount(CalendarComponent, {
+      propsData: {
+        month: new Date(1651739228545), // May 2022
+        blockedDaysRange: [
+          [new Date(1651739228545)], // 5 May
+          [
+            new Date(1652733228545), // 16 May
+            new Date(1652833228545), // 18 May
+          ],
+        ],
+      },
+    });
+  });
+
+  it("Is instansiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
+
+  it("Check that all week days are rendered", () => {
+    expect(wrapper.findAll(".months").length).toBe(7);
+  });
+
+  it("Check that the correct amount of days are rendered", () => {
+    // 31 days in May, 6 for start of week from last month and 5 for end of month
+    expect(wrapper.find(".daysList").findAll("div").length).toBe(42);
+  });
+
+  it("Check select day works", () => {
+    wrapper.find(".daysList").findAll("div")[7].find("button").trigger("click");
+    expect(wrapper.emitted()).toHaveProperty("selectDate");
+  });
+
+  it("Test that selecting day outside of month does not work", () => {
+    // Click on the first day, which is not in the month
+    wrapper.find(".daysList").findAll("div")[0].find("button").trigger("click");
+    expect(wrapper.emitted()).not.toHaveProperty("selectDate");
+  });
+});
diff --git a/tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/month-selector-test.spec.js b/tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/month-selector-test.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..5a7204d7f0935d0cdb1201c0803ba8b23288f59e
--- /dev/null
+++ b/tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/month-selector-test.spec.js
@@ -0,0 +1,46 @@
+import { shallowMount } from "@vue/test-utils";
+import monthSelector from "@/components/TimepickerComponents/DatepickerRange/MonthSelector.vue";
+
+describe("MonthSelector tests", () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallowMount(monthSelector, {
+      propsData: {
+        month: new Date(1651739228545), // 05 May 2022 UTC
+        type: "type",
+      },
+    });
+  });
+
+  it("Is instansiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
+
+  it("Check if fields show correct informations", () => {
+    // Check if container exists
+    expect(wrapper.find(".container-c .text"));
+    const children = wrapper.find(".container-c .text").findAll("div");
+
+    // Check if there are two children
+    expect(children.length).toBe(2);
+
+    // Check children content
+    expect(children[0].text()).toBe("MAY");
+    expect(children[1].text()).toBe("2022");
+  });
+
+  it("Check that changing are emitted", async () => {
+    // Check that there are two buttons
+    expect(wrapper.findAll(".button").length).toBe(2);
+
+    const buttons = wrapper.findAll(".button");
+    console.log(buttons[0].html());
+    // Check that the first button goes a month back
+    await buttons[0].trigger("click");
+    expect(wrapper.emitted()).toHaveProperty("back");
+
+    // Check that the second button goes a month forward
+    await buttons[1].trigger("click");
+    expect(wrapper.emitted()).toHaveProperty("forward");
+  });
+});
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/rating.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/rating.spec.js.snap
index e7d04a61c2d249a8bda1825ed17ed7be65bcf319..f22076edecd3620957e0bbf9141873adfd3a6322 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/rating.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/rating.spec.js.snap
@@ -11,73 +11,11 @@ exports[`Rating component renders correctly 1`] = `
       :  
     </p>
   </li>
-  
-  <li>
-    <svg
-      class="w-5 h-5 text-gray-300 dark:text-gray-500"
-      fill="currentColor"
-      viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-      />
-    </svg>
-  </li>
-  <li>
-    <svg
-      class="w-5 h-5 text-gray-300 dark:text-gray-500"
-      fill="currentColor"
-      viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-      />
-    </svg>
-  </li>
-  <li>
-    <svg
-      class="w-5 h-5 text-gray-300 dark:text-gray-500"
-      fill="currentColor"
-      viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-      />
-    </svg>
-  </li>
-  <li>
-    <svg
-      class="w-5 h-5 text-gray-300 dark:text-gray-500"
-      fill="currentColor"
-      viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-      />
-    </svg>
-  </li>
-  <li>
-    <svg
-      class="w-5 h-5 text-gray-300 dark:text-gray-500"
-      fill="currentColor"
-      viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
-      />
-    </svg>
-  </li>
-  
   <li>
     <p
       class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400"
     >
-       out of 5 
+       Ingen vurderinger 
     </p>
   </li>
 </ul>
diff --git a/tests/unit/component-tests/user-component-tests/login-form.spec.js b/tests/unit/component-tests/user-component-tests/login-form.spec.js
index 40fa711393e969435a609474c0f550f179513135..bb0285db4c868fa9acc66080b46d0fa184cceb7e 100644
--- a/tests/unit/component-tests/user-component-tests/login-form.spec.js
+++ b/tests/unit/component-tests/user-component-tests/login-form.spec.js
@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import LoginForm from "@/components/FormComponents/LoginForm.vue";
+import LoginForm from "@/components/UserAuthComponents/LoginForm.vue";
 
 describe("LoginForm component", () => {
   let wrapper;
diff --git a/tests/unit/component-tests/user-component-tests/new-password-form.spec.js b/tests/unit/component-tests/user-component-tests/new-password-form.spec.js
index 638e597bd9b130a6b2a1c69a0b724b3414436648..3d52388c9b35a953ceca35a27a87c578f603135e 100644
--- a/tests/unit/component-tests/user-component-tests/new-password-form.spec.js
+++ b/tests/unit/component-tests/user-component-tests/new-password-form.spec.js
@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import NewPasswordForm from "@/components/FormComponents/NewPasswordForm.vue";
+import NewPasswordForm from "@/components/UserAuthComponents/NewPasswordForm.vue";
 
 describe("NewPasswordForm component", () => {
   let wrapper;
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 9accd167543e4b2291397821c4aeaedf42804313..4c2ca3b84153c1a1f12b75765948b59a59dc6262 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
@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import RegisterFormComponent from "@/components/FormComponents/RegisterForm";
+import RegisterFormComponent from "@/components/UserAuthComponents/RegisterForm";
 
 describe("RegisterFormComponent", () => {
   let wrapper;
diff --git a/tests/unit/component-tests/user-component-tests/reset-password-form.spec.js b/tests/unit/component-tests/user-component-tests/reset-password-form.spec.js
index 1dc9f0a4f379129d888436a42d40bf354ae56f66..45f67cef373d59a5d51850d424378a3af218490c 100644
--- a/tests/unit/component-tests/user-component-tests/reset-password-form.spec.js
+++ b/tests/unit/component-tests/user-component-tests/reset-password-form.spec.js
@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import ResetPasswordForm from "@/components/FormComponents/ResetPasswordForm.vue";
+import ResetPasswordForm from "@/components/UserAuthComponents/ResetPasswordForm.vue";
 
 describe("ResetPasswordForm component", () => {
   let wrapper;