diff --git a/public/images/product-image.jpg b/public/images/product-image.jpg
new file mode 100644
index 00000000..09fb0606
Binary files /dev/null and b/public/images/product-image.jpg differ
diff --git a/public/js/app.js b/public/js/app.js
index 56277e55..6c974ade 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -16953,6 +16953,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "render": () => /* binding */ render
 /* harmony export */ });
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+/* harmony import */ var _img_jpg_product_image_jpg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../img/jpg/product-image.jpg */ "./resources/img/jpg/product-image.jpg");
+
 
 var _hoisted_1 = {
   key: 0,
@@ -16980,10 +16982,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", {
       key: product.id
     }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("img", {
-      id: "product-image",
       "class": "container mx-auto transition duration-500 ease-in-out transform cursor-pointer hover:scale-105",
       alt: product.name,
-      src: "https://via.placeholder.com/376"
+      src: _img_jpg_product_image_jpg__WEBPACK_IMPORTED_MODULE_1__.default
     }, null, 8
     /* PROPS */
     , ["alt"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("p", _hoisted_4, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(product.name), 1
@@ -17345,6 +17346,21 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./resources/img/jpg/product-image.jpg":
+/*!*********************************************!*\
+  !*** ./resources/img/jpg/product-image.jpg ***!
+  \*********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => __WEBPACK_DEFAULT_EXPORT__
+/* harmony export */ });
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ("/images/product-image.jpg?292b4de2247a85e87694ccfdfae9f432");
+
+/***/ }),
+
 /***/ "./resources/img/svg/Cart.svg":
 /*!************************************!*\
   !*** ./resources/img/svg/Cart.svg ***!
diff --git a/resources/img/jpg/product-image.jpg b/resources/img/jpg/product-image.jpg
new file mode 100644
index 00000000..09fb0606
Binary files /dev/null and b/resources/img/jpg/product-image.jpg differ
diff --git a/resources/js/components/Products/Products.vue b/resources/js/components/Products/Products.vue
index 471c9a33..93c3845b 100644
--- a/resources/js/components/Products/Products.vue
+++ b/resources/js/components/Products/Products.vue
@@ -3,10 +3,9 @@
         <div v-for="product in products" :key="product.id">
             <div class="flex flex-col mt-6 sm:w1/2 md:w-1/3 lg:1/4 xl:w-1/4">
                 <img
-                    id="product-image"
                     class="container mx-auto transition duration-500 ease-in-out transform cursor-pointer hover:scale-105"
                     :alt="product.name"
-                    src="https://via.placeholder.com/376"
+                    src="../../../img/jpg/product-image.jpg"
                 />
                 <div class="flex justify-center pt-3">
                     <p class="text-xl font-bold text-center cursor-pointer">