diff --git a/src/components/BaseComponents/NavBar.vue b/src/components/BaseComponents/NavBar.vue
index 58020e292abccaa07ac2e7cfa6d66f30961e42fc..3281cf2e521896053954387941ba03dc04c88281 100644
--- a/src/components/BaseComponents/NavBar.vue
+++ b/src/components/BaseComponents/NavBar.vue
@@ -38,12 +38,12 @@
 
 <script>
 import { parseUserFromToken } from "@/utils/token-utils";
-import {PlusIcon, ChatAlt2Icon, UserCircleIcon} from "@heroicons/vue/outline";
+import { PlusIcon, ChatAlt2Icon, UserCircleIcon } from "@heroicons/vue/outline";
 
 export default {
   name: "NavBar.vue",
 
-  components:{
+  components: {
     PlusIcon,
     ChatAlt2Icon,
     UserCircleIcon,
diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue
index 688d4c3a07cf0d64ec8a435009f95c88b89165c3..58d579f0cefbe1aba7c2460d7e6ee59051e6d41b 100644
--- a/src/components/CommunityComponents/CommunityHome.vue
+++ b/src/components/CommunityComponents/CommunityHome.vue
@@ -48,7 +48,11 @@
 <script>
 import ItemCard from "@/components/ItemComponents/ItemCard";
 import CommunityHeader from "@/components/BaseComponents/CommunityHeader";
-import { GetCommunity, GetListingsInCommunity } from "@/utils/apiutil";
+import {
+  GetCommunity,
+  GetListingsInCommunity,
+  getItemPictures,
+} from "@/utils/apiutil";
 export default {
   name: "SearchItemListComponent",
 
@@ -101,10 +105,21 @@ export default {
       this.communityID = await this.$router.currentRoute.value.params
         .communityID;
       this.items = await GetListingsInCommunity(this.communityID);
+      for (var i = 0; i < this.items.length; i++) {
+        let images = await getItemPictures(this.items[i].listingID);
+        console.log(images);
+        if(images.length > 0) {
+          this.items[i].img = images[0].picture;
+        }
+      }
     },
     goToItemInfoPage(item) {
       this.$router.push("/itempage/" + item);
     },
+    getItemPictures: async function (itemid) {
+      let res = await getItemPictures(itemid);
+      return res;
+    },
   },
   beforeMount() {
     this.getCommunityFromAPI(); //To get the id of the community before mounting the view
diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index d9bf923296a42c70521274ba6dcc5e275b75bb22..8edbda1072907b4fa6b5c976f95e7a550ce6b0f4 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4">
+  <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 -->
     <h3
       class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
@@ -170,12 +172,7 @@
 
     <!-- Save item button -->
     <div class="flex justify-center mt-10 float-right">
-      <Button
-        @click="saveClicked"
-        id="saveButton"
-        :text="'Lagre'"
-      >
-      </Button>
+      <Button @click="saveClicked" id="saveButton" :text="'Lagre'"> </Button>
     </div>
   </div>
 </template>
diff --git a/src/components/FormComponents/LoginForm.vue b/src/components/FormComponents/LoginForm.vue
index a3c4dd2f9e049ec7b1fe18c68427659223bbd9d7..58f1d672bc5daad7ba43ab4e11b85a065203be38 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full">
+  <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"
diff --git a/src/components/FormComponents/NewPasswordForm.vue b/src/components/FormComponents/NewPasswordForm.vue
index 667da928ac0430fea928a78723f73af715622209..d13c08349360250ff4f0cf96b5f3faab00d7a841 100644
--- a/src/components/FormComponents/NewPasswordForm.vue
+++ b/src/components/FormComponents/NewPasswordForm.vue
@@ -1,9 +1,12 @@
 <template>
   <div
-      class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
+    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>
+    <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"
@@ -63,7 +66,7 @@
 
     <div id="buttonsField" class="mt-6">
       <Button
-          class="float-right"
+        class="float-right"
         @click="setNewPassword"
         :text="'Sett ny passord'"
       />
@@ -81,8 +84,9 @@ import Button from "@/components/BaseComponents/ColoredButton";
 export default {
   name: "NewPasswordForm.vue",
 
-  components:{
-    Button,},
+  components: {
+    Button,
+  },
   setup() {
     return { v$: useVuelidate() };
   },
@@ -91,10 +95,16 @@ export default {
       user: {
         password: {
           required: helpers.withMessage(`Feltet må være utfylt`, required),
-          minLength: helpers.withMessage('Passordet må være minst 8 karakterer lang', minLength(8)),
+          minLength: helpers.withMessage(
+            "Passordet må være minst 8 karakterer lang",
+            minLength(8)
+          ),
         },
         rePassword: {
-          sameAs: helpers.withMessage('Passordene må være like', 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),
         },
       },
diff --git a/src/components/FormComponents/ResetPasswordForm.vue b/src/components/FormComponents/ResetPasswordForm.vue
index a3232e339f78a7ce82eee0a3199b966d9bc90178..a4c2d80e1533e2c7be82804041bd49208b4ab6be 100644
--- a/src/components/FormComponents/ResetPasswordForm.vue
+++ b/src/components/FormComponents/ResetPasswordForm.vue
@@ -1,7 +1,12 @@
 <template>
-  <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
+    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"
@@ -35,12 +40,11 @@
         </div>
       </div>
       <Button
-          class="float-right"
-          @click="sendHome"
-          :text="'Tilbakestill passord'"
+        class="float-right"
+        @click="sendHome"
+        :text="'Tilbakestill passord'"
       />
     </div>
-
   </div>
 </template>
 
@@ -52,7 +56,7 @@ import Button from "@/components/BaseComponents/ColoredButton";
 export default {
   name: "ResetPassword.vue",
 
-  components:{
+  components: {
     Button,
   },
   data() {
@@ -67,7 +71,7 @@ export default {
   validations() {
     return {
       email: {
-        required: helpers.withMessage('Feltet må være utfylt', required),
+        required: helpers.withMessage("Feltet må være utfylt", required),
         email: helpers.withMessage(`E-posten er ugyldig`, email),
       },
     };
diff --git a/src/components/ItemComponents/ItemCard.vue b/src/components/ItemComponents/ItemCard.vue
index 089dc01a8043d3409d6806537e853cf95017cc28..d18caa1cefffbfbe96a4d6fe4a26d48bfe107069 100644
--- a/src/components/ItemComponents/ItemCard.vue
+++ b/src/components/ItemComponents/ItemCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mt-5">
-    <div class="w-4/5 rounded bg-gray-200">
+    <div class="w-4/5 rounded bg-gray-200 h-full overflow-hidden display:inline-block correct-size">
       <img
         class="w-full"
         :src="item.img || require('../../assets/default-product.png')"
@@ -31,3 +31,4 @@ export default {
   },
 };
 </script>
+
diff --git a/src/components/ItemComponents/NewItemForm.vue b/src/components/ItemComponents/NewItemForm.vue
index ea6abb83500cae80226ad71f2816b129cce4fb85..0d26eb64cd7af607ba61930339cf2a3bfddd5a93 100644
--- a/src/components/ItemComponents/NewItemForm.vue
+++ b/src/components/ItemComponents/NewItemForm.vue
@@ -1,7 +1,13 @@
 <template>
-  <div class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4">
+  <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 -->
-    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Opprett ny utleie</h3>
+    <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 }">
diff --git a/src/components/RentingComponents/ItemInfo.vue b/src/components/RentingComponents/ItemInfo.vue
index b42847588e9d77e47fa6dc07b04f966156cf904c..88f3b7ba0b555dca2626fd30c674826a898da141 100644
--- a/src/components/RentingComponents/ItemInfo.vue
+++ b/src/components/RentingComponents/ItemInfo.vue
@@ -3,7 +3,7 @@
     <div>
       <div
         v-bind:class="{
-          'grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full place-items-center':
+          'grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 h-[600px] w-auto lg:grid-cols-5 place-items-center':
             noPicture,
         }"
       >
@@ -55,7 +55,10 @@
 
           <div>
             <p class="text-sm text-gray-900">
-              <DatepickerRange @value="setDate" :messageOnDisplay="dateMessage"></DatepickerRange>
+              <DatepickerRange
+                @value="setDate"
+                :messageOnDisplay="dateMessage"
+              ></DatepickerRange>
             </p>
           </div>
         </div>
@@ -80,9 +83,7 @@
 </template>
 
 <script>
-import { getItem } from "@/utils/apiutil";
-import { getItemPictures } from "@/utils/apiutil";
-import { getUser } from "@/utils/apiutil";
+import { getItem, getItemPictures, getUser } from "@/utils/apiutil";
 import ImageCarousel from "@/components/RentingComponents/ImageCarousel.vue";
 import UserListItemCard from "@/components/UserProfileComponents/UserListItemCard.vue";
 import DatepickerRange from "@/components/TimepickerComponents/DatepickerRange/DatepickerRange.vue";
@@ -155,7 +156,7 @@ export default {
       this.userForId = await getUser(userId);
     },
     setDate(dateOfsomthing) {
-      if(dateOfsomthing.startDate == null || dateOfsomthing.endDate == null) {
+      if (dateOfsomthing.startDate == null || dateOfsomthing.endDate == null) {
         this.totPrice = this.item.pricePerDay;
         this.allowForRent = false;
       } else {
@@ -171,7 +172,7 @@ export default {
       this.totPrice = this.item.pricePerDay * amountOfDays;
     },
     sendToConfirm() {
-      if(this.allowForRent) {
+      if (this.allowForRent) {
         //TODO change this to a componet change
         alert("Hei");
       }
@@ -191,6 +192,6 @@ export default {
 }
 
 .colorChange:hover {
-  background-color: #306EC1;
+  background-color: #306ec1;
 }
 </style>
diff --git a/src/components/TimepickerComponents/DatepickerRange/DatepickerRange.vue b/src/components/TimepickerComponents/DatepickerRange/DatepickerRange.vue
index b769794ff447f67512932e08871a1594b8948964..53c92481e3318bfe86ccc699f80c6ed24ffbceb7 100644
--- a/src/components/TimepickerComponents/DatepickerRange/DatepickerRange.vue
+++ b/src/components/TimepickerComponents/DatepickerRange/DatepickerRange.vue
@@ -279,10 +279,10 @@ export default {
   @apply font-bold py-2 px-4 rounded;
 }
 .btn-blue {
-  @apply bg-blue-500 text-white;
+  @apply bg-primary-light text-white;
 }
 .btn-blue:hover {
-  @apply bg-blue-700;
+  @apply bg-primary-medium;
 }
 .btn-gray:hover {
   @apply bg-gray-300;
diff --git a/src/components/UserProfileComponents/LargeProfileCard.vue b/src/components/UserProfileComponents/LargeProfileCard.vue
index 7ee44e43946ce93d577ae888efc9923d71f7aacc..9235ab472cdd07769260c182f5acc0fddd9632a8 100644
--- a/src/components/UserProfileComponents/LargeProfileCard.vue
+++ b/src/components/UserProfileComponents/LargeProfileCard.vue
@@ -27,7 +27,10 @@
         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 absolute bg-white ring-1 ring-gray-300 rounded-xl" aria-labelledby="dropdownDefault">
+        <ul
+          class="py-1 absolute bg-white ring-1 ring-gray-300 rounded-xl"
+          aria-labelledby="dropdownDefault"
+        >
           <li>
             <router-link
               to=""
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index a1546326dd2d8cd4fef16cb1118828cb508d1fb9..fb6c8fc477b6003afa4e0e56a0d5fb90e54b0a05 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -215,38 +215,37 @@ export async function GetMembersOfCommunity(communityID) {
 }
 
 export function JoinOpenCommunity(communityId) {
+  if (tokenHeader().Authorization == "Bearer " + null) {
+    console.log("ikke logget på!");
+    return "Login to join any community";
+  }
 
-    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;
-        });
+  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;
-        });
+  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 f78ccde49e36551c8f47530ef8ed51bd944ce1a1..e8274f2d13b0f049b6ce56e0f005431e9ee1efe4 100644
--- a/src/views/CommunityViews/NewCommunityView.vue
+++ b/src/views/CommunityViews/NewCommunityView.vue
@@ -2,7 +2,6 @@
   <div class="h-screen grid md:mt-8">
     <NewCommunity />
   </div>
-
 </template>
 
 <script>
diff --git a/src/views/ItemViews/NewItemView.vue b/src/views/ItemViews/NewItemView.vue
index fa8ba75077b76aa1a1af647d9b54ea9bf599a7ac..fc9db3697ba1fe00f740bb7457f233be22e6cee5 100644
--- a/src/views/ItemViews/NewItemView.vue
+++ b/src/views/ItemViews/NewItemView.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="h-screen grid md:mt-8">
-    <AddNewItem/>
+    <AddNewItem />
   </div>
-
 </template>
 
 <script>
diff --git a/src/views/RentingViews/.gitkeep b/src/views/RentingViews/.gitkeep
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000