diff --git a/packages/Webkul/Velocity/src/Resources/assets/js/app.js b/packages/Webkul/Velocity/src/Resources/assets/js/app.js
index ead341372..ea4937db6 100755
--- a/packages/Webkul/Velocity/src/Resources/assets/js/app.js
+++ b/packages/Webkul/Velocity/src/Resources/assets/js/app.js
@@ -221,6 +221,7 @@ $(document).ready(function () {
                 miniCartKey: 0,
                 quickView: false,
                 productDetails: [],
+                showPageLoader: false,
             }
         },
 
@@ -331,6 +332,14 @@ $(document).ready(function () {
                     })
                 });
             },
+
+            showLoader: function () {
+                this.showPageLoader = true;
+            },
+
+            hideLoader: function () {
+                this.showPageLoader = false;
+            }
         }
     });
 
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
old mode 100644
new mode 100755
index 1f858a1f5..7f87ab195
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
@@ -2445,3 +2445,20 @@
         display: inline-block;
     }
 }
+
+.image-search-container {
+    top: 9px;
+    right: 45px;
+    z-index: 10;
+    cursor: pointer;
+    position: absolute;
+    background: #fff;
+    height: 24px !important;
+}
+
+.camera-icon {
+    width: 24px;
+    display: inline-block;
+    background-size: cover;
+    background-image: url(/vendor/webkul/ui/assets/images/Camera.svg);
+}
diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/UI/particals.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/UI/particals.blade.php
old mode 100644
new mode 100755
index 5d3c3dc7e..f7b60c454
--- a/packages/Webkul/Velocity/src/Resources/views/shop/UI/particals.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/UI/particals.blade.php
@@ -103,8 +103,10 @@
                                 name="term"
                                 type="search"
                                 class="form-control"
-                                :value="searchedQuery.term ? searchedQuery.term.split('+').join(' ') : ''"
-                                placeholder="{{ __('velocity::app.header.search-text') }}" />
+                                placeholder="{{ __('velocity::app.header.search-text') }}"
+                                :value="searchedQuery.term ? searchedQuery.term.split('+').join(' ') : ''" />
+
+                            <image-search-component></image-search-component>
 
                             <button class="btn" type="submit" id="header-search-icon">
                                 <i class="fs16 fw6 rango-search"></i>
@@ -154,6 +156,9 @@
     </div>
 </script>
 
+<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script>
+
 <script type="text/x-template" id="sidebar-categories-template">
     <div class="wrapper" v-if="rootCategories">
         Hello World
@@ -164,6 +169,26 @@
     </div>
 </script>
 
+<script type="text/x-template" id="image-search-component-template">
+    <div class="d-inline-block">
+        <label class="image-search-container" for="image-search-container">
+            <i class="icon camera-icon"></i>
+
+            <input
+                type="file"
+                class="d-none"
+                ref="image_search_input"
+                id="image-search-container"
+                v-on:change="uploadImage()" />
+
+            <img
+                class="d-none"
+                id="uploaded-image-url"
+                :src="uploadedImageUrl" />
+        </label>
+    </div>
+</script>
+
 <script type="text/javascript">
     (() => {
         Vue.component('cart-btn', {
@@ -319,5 +344,73 @@
                 }
             }
         });
+
+        Vue.component('image-search-component', {
+            template: '#image-search-component-template',
+            data: function() {
+                return {
+                    uploadedImageUrl: ''
+                }
+            },
+
+            methods: {
+                uploadImage: function() {
+                    debugger
+                    this.$root.showLoader();
+                    var formData = new FormData();
+
+                    formData.append('image', this.$refs.image_search_input.files[0]);
+
+                    axios.post(
+                        "{{ route('shop.image.search.upload') }}",
+                        formData,
+                        {
+                            headers: {
+                                'Content-Type': 'multipart/form-data'
+                            }
+                        }
+                    ).then(response => {
+                        var net;
+                        this.uploadedImageUrl = response.data;
+
+                        (async () => {
+                            try {
+                                var queryString = '';
+                                var analysedResult = [];
+                                debugger
+                                net = await mobilenet.load();
+    
+                                const imgElement = document.getElementById('uploaded-image-url');
+    
+                                const result = await net.classify(imgElement);
+    
+                                result.forEach(value => {
+                                    queryString = value.className.split(',');
+    
+                                    if (queryString.length > 1) {
+                                        analysedResult = analysedResult.concat(queryString)
+                                    } else {
+                                        analysedResult.push(queryString[0])
+                                    }
+                                })
+    
+                                localStorage.searchedImageUrl = this.uploadedImageUrl;
+    
+                                queryString = localStorage.searched_terms = analysedResult.join('_');
+                                
+                                this.$root.hideLoader();
+    
+                                window.location.href = "{{ route('shop.search.index') }}" + '?term=' + queryString + '&image-search=1';
+                            } catch (error) {
+                                this.$root.hideLoader();
+                            };
+                        })();
+                    }).catch(() => {
+                        debugger
+                        this.$root.hideLoader();
+                    });
+                }
+            }
+        });
     })()
 </script>
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/layouts/master.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/layouts/master.blade.php
old mode 100644
new mode 100755
index 26c119d3f..0a591bbf1
--- a/packages/Webkul/Velocity/src/Resources/views/shop/layouts/master.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/layouts/master.blade.php
@@ -130,6 +130,10 @@
 
                 </div>
             </div>
+
+            <div class="modal-parent" style="top: 0" v-if="showPageLoader">
+                <overlay-loader :is-open="showPageLoader"></overlay-loader>
+            </div>
         </div>
 
         <!-- below footer -->