diff --git a/src/assets/default-product.png b/src/assets/default-product.png
new file mode 100644
index 0000000000000000000000000000000000000000..249ee6900c829ba4c718841bc0aa48f62d34f5b8
Binary files /dev/null and b/src/assets/default-product.png differ
diff --git a/src/components/SearchItemListComponent.vue b/src/components/SearchItemListComponent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0bbfe2bdb1e7e9d62e2fca4daf1d36e46d45fa76
--- /dev/null
+++ b/src/components/SearchItemListComponent.vue
@@ -0,0 +1,75 @@
+<template>
+  <section class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md">
+    <div class="relative" id="searchComponent">
+      <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+        <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+          <path
+            d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          ></path>
+        </svg>
+      </span>
+
+      <input
+        type="text"
+        class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
+        placeholder="Search"
+        v-model="search"
+      />
+    </div>
+
+    <div class="absolute inset-x-0 px-6 py-3 mt-4 border-2 border-slate-500">
+      <div class="grid grid-cols-2">
+        <ItemCard v-for="item in searchedItems" :key="item" :item="item" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import ItemCard from "@/components/ItemCard";
+export default {
+  name: "SearchItemListComponent",
+
+  components: {
+    ItemCard,
+  },
+
+  computed: {
+    searchedItems() {
+      let filteredItems = [];
+
+      filteredItems = this.items.filter(
+        (p) =>
+          p.title.toLowerCase().includes(this.search.toLowerCase()) ||
+          p.adresse.toLowerCase().includes(this.search.toLowerCase()) ||
+          p.price === Number(this.search)
+      );
+
+      return filteredItems;
+    },
+  },
+
+  data() {
+    return {
+      items: [
+        { img: "", adresse: "Oslo", title: "Dyson", price: 1000 },
+
+        { img: "", adresse: "Trondheim", title: "Gressklipper", price: 500 },
+
+        { img: "", adresse: "Bergen", title: "Bil", price: 500 },
+      ],
+      item: {
+        img: "",
+        adresse: "",
+        title: "",
+        price: 0,
+      },
+      search: "",
+    };
+  },
+};
+</script>
diff --git a/src/router/index.js b/src/router/index.js
index cf3844a9c1fffdda6bd0fe3375a0057fc7bc7abf..ee37f5728a0bd49fe00465b655978648728c19ac 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -37,6 +37,11 @@ const routes = [
     name: "newPassword",
     component: NewPasswordView,
   },
+  {
+    path: "/searchItemList",
+    name: "searchItemList",
+    component: () => import("../views/SearchItemListView.vue"),
+  },
 ];
 
 const router = createRouter({
diff --git a/src/views/SearchItemListView.vue b/src/views/SearchItemListView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..288fa367f2da5f0df7f164f4538a35ecfca62db1
--- /dev/null
+++ b/src/views/SearchItemListView.vue
@@ -0,0 +1,15 @@
+<template>
+  <SearchItemListComponent></SearchItemListComponent>
+</template>
+
+<script>
+import SearchItemListComponent from "@/components/SearchItemListComponent";
+export default {
+  name: "SearchItemListView",
+  components: {
+    SearchItemListComponent,
+  },
+};
+</script>
+
+<style scoped></style>