diff --git a/src/components/ItemCard.vue b/src/components/ItemCard.vue
index e6609623991210c05b55e0d4dc08f471ad1f12fe..b120d82d7e8119413f335ccb73f95a71b1e760b3 100644
--- a/src/components/ItemCard.vue
+++ b/src/components/ItemCard.vue
@@ -1,18 +1,22 @@
 <template>
-  <v-card max-width="40%" class="text-left ma-5 pa-2">
-    <v-img
-      class="rounded-5"
-      :src="item.img || require('../assets/default-product.png')"
-    ></v-img>
-
-    <v-card-subtitle>{{ item.adresse }}</v-card-subtitle>
-
-    <v-card-text class="font-weight-bold mb-n3 mt-n3">
-      {{ item.title }}
-    </v-card-text>
-
-    <v-card-subtitle>{{ item.price }}</v-card-subtitle>
-  </v-card>
+  <div class="flex justify-center mt-5">
+    <div class="w-2/5 rounded overflow-hidden bg-gray-100">
+      <img
+        class="w-full"
+        :src="item.img || require('../assets/default-product.png')"
+        alt="Item image"
+      />
+      <div class="p-1 m-1">
+        <p class="text-gray-700 text-xs" id="adress">
+          {{ item.adresse }}
+        </p>
+        <p class="font-bold text-sm" id="title">{{ item.title }}</p>
+        <p class="text-gray-700 text-xs" id="price">
+          {{ item.price }}
+        </p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/tests/unit/item-card.spec.js b/tests/unit/item-card.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..e8fc9c9ca1e85e227d18b9b1836550cd0d4255dd
--- /dev/null
+++ b/tests/unit/item-card.spec.js
@@ -0,0 +1,20 @@
+import { shallowMount } from "@vue/test-utils";
+import ItemCard from "@/components/ItemCard.vue";
+
+describe("ItemCard elements rendering", () => {
+    it("renders all paragraphs", async() => {
+        const wrapper = shallowMount(ItemCard);
+
+        await wrapper.setData({
+            item : {
+                title : 'Dyson',
+                adresse: 'Trondheim',
+                price : '500'
+            }
+        })
+
+        expect(wrapper.find("#title").text()).toBe("Dyson");
+        expect(wrapper.find("#adress").text()).toBe("Trondheim");
+        expect(wrapper.find("#price").text()).toBe("500");
+    });
+});