diff --git a/config/view.php b/config/view.php
index 2acfd9cc9..a9743c718 100755
--- a/config/view.php
+++ b/config/view.php
@@ -1,6 +1,16 @@
 <?php
 
 return [
+    /*
+    |--------------------------------------------------------------------------
+    | Blade File Tracer
+    |--------------------------------------------------------------------------
+    |
+    | Shows blade file path in front
+    |
+    */
+
+    'tracer' => false,
 
     /*
     |--------------------------------------------------------------------------
diff --git a/packages/Webkul/BookingProduct/package.json b/packages/Webkul/BookingProduct/package.json
index 16e824391..ee28de9fc 100644
--- a/packages/Webkul/BookingProduct/package.json
+++ b/packages/Webkul/BookingProduct/package.json
@@ -10,13 +10,10 @@
     "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "devDependencies": {
-    "axios": "^0.19.0",
     "cross-env": "^6.0.3",
-    "jquery": "^3.4.1",
     "laravel-mix": "^5.0.0",
     "laravel-mix-merge-manifest": "^0.1.2",
     "sass": "^1.25.0",
-    "sass-loader": "^8.0.2",
-    "vue": "^2.6.10"
+    "sass-loader": "^8.0.2"
   }
 }
diff --git a/packages/Webkul/Core/src/Providers/CoreServiceProvider.php b/packages/Webkul/Core/src/Providers/CoreServiceProvider.php
index d64dfdca2..3b1c9fbf5 100755
--- a/packages/Webkul/Core/src/Providers/CoreServiceProvider.php
+++ b/packages/Webkul/Core/src/Providers/CoreServiceProvider.php
@@ -7,6 +7,9 @@ use Illuminate\Database\Eloquent\Factory as EloquentFactory;
 use Illuminate\Support\ServiceProvider;
 use Illuminate\Support\Facades\Validator;
 use Illuminate\Foundation\AliasLoader;
+use Illuminate\Support\Facades\Event;
+use Webkul\Theme\ViewRenderEventManager;
+use Webkul\Core\View\Compilers\BladeCompiler;
 use Webkul\Core\Console\Commands\BookingCron;
 use Webkul\Core\Core;
 use Webkul\Core\Exceptions\Handler;
@@ -52,6 +55,16 @@ class CoreServiceProvider extends ServiceProvider
         );
 
         SliderProxy::observe(SliderObserver::class);
+
+        $this->loadViewsFrom(__DIR__ . '/../Resources/views', 'core');
+
+        Event::listen('bagisto.shop.layout.head', static function(ViewRenderEventManager $viewRenderEventManager) {
+            $viewRenderEventManager->addTemplate('core::blade.tracer.style');
+        });
+
+        Event::listen('bagisto.admin.layout.head', static function(ViewRenderEventManager $viewRenderEventManager) {
+            $viewRenderEventManager->addTemplate('core::blade.tracer.style');
+        });
     }
 
     /**
@@ -64,6 +77,8 @@ class CoreServiceProvider extends ServiceProvider
         $this->registerFacades();
 
         $this->registerCommands();
+
+        $this->registerBladeCompiler();
     }
 
     /**
@@ -110,4 +125,16 @@ class CoreServiceProvider extends ServiceProvider
     {
         $this->app->make(EloquentFactory::class)->load($path);
     }
+
+    /**
+     * Register the Blade compiler implementation.
+     *
+     * @return void
+     */
+    public function registerBladeCompiler()
+    {
+        $this->app->singleton('blade.compiler', function ($app) {
+            return new BladeCompiler($app['files'], $app['config']['view.compiled']);
+        });
+    }
 }
diff --git a/packages/Webkul/Core/src/Resources/lang/en/app.php b/packages/Webkul/Core/src/Resources/lang/en/app.php
new file mode 100644
index 000000000..26ba86483
--- /dev/null
+++ b/packages/Webkul/Core/src/Resources/lang/en/app.php
@@ -0,0 +1,8 @@
+<?php
+
+return [
+    'path-hint' => [
+        'template' => 'Template',
+        'parents' => 'Parents'
+    ]
+];
\ No newline at end of file
diff --git a/packages/Webkul/Core/src/Resources/views/blade/tracer/style.blade.php b/packages/Webkul/Core/src/Resources/views/blade/tracer/style.blade.php
new file mode 100644
index 000000000..6729a3934
--- /dev/null
+++ b/packages/Webkul/Core/src/Resources/views/blade/tracer/style.blade.php
@@ -0,0 +1,115 @@
+<style>
+    .path-hint {
+        border: solid 1px transparent;
+        padding: 1px;
+    }
+
+    .path-hint:hover {
+        border: 1px solid red;
+    }
+
+    .path-hint-tooltip {
+        padding: 0px 10px;
+        position: absolute;
+        background: #000000;
+        z-index: 10000;
+        color: #fff;
+        font-size: 10px;
+    }
+
+    .path-hint-tooltip h4 {
+        margin-top: 5px;
+        margin-bottom: 3px;
+        color: #fff;
+        font-size: 12px;
+    }
+
+    .path-hint-tooltip ul li {
+        margin-bottom: 3px;
+    }
+
+    .main-container-wrapper .product-card .product-image img {
+        height: auto;
+        max-width: 100%;
+    }
+</style>
+
+<script>
+    window.addEventListener("load", function(event) {
+        $('.testing').each(function(index) {
+            if ($(this).siblings(':not(.path-hint)').length == 1
+                && $(this).next().prop("tagName") != 'INPUT'
+                && $(this).next().prop("tagName") != 'TEXTAREA'
+                && $(this).next().prop("tagName") != 'SELECT'
+            ) {
+                $(this).next().addClass('path-hint');
+
+                $(this).next().attr({
+                    'data-toggle': 'tooltip',
+                    'data-title': $(this).parent('.path-hint').attr('data-title'),
+                    'data-id': $(this).parent('.path-hint').attr('data-id')
+                });
+
+                $(this).unwrap();
+            }
+
+            $(this).remove();
+        })
+
+        $('.path-hint').on('mouseover', function(e) {
+            e.stopPropagation();
+
+            var currentElement = $(e.currentTarget);
+
+            var tooltipContent = '<h4>{{ __("core::app.path-hint.template") }}</h4>' + currentElement.attr('data-title');
+
+            if ($(this).parents('.path-hint').length) {
+                tooltipContent += '<h4>{{ __("core::app.path-hint.parents") }}</h4>';
+
+                tooltipContent += '<ul>';
+
+                $(this).parents('.path-hint').each(function(index) {
+                    tooltipContent += '<li>' + $(this).attr('data-title')  + '</li>';
+                });
+
+                tooltipContent += '</ul>';
+            }
+
+            $('body').append("<span class='path-hint-tooltip' id='" + currentElement.attr('data-id') + "'>" + tooltipContent + "</span>")
+
+            var elementWidth = currentElement.outerWidth()
+
+            var tooltipWidth = $('.path-hint-tooltip').outerWidth()
+
+            var leftOffset = currentElement.offset().left;
+
+            minus = 0;
+
+            temp = leftOffset + (elementWidth / 2) + (tooltipWidth / 2)
+
+            if (temp > $(window).outerWidth()) {
+                minus = temp - $(window).outerWidth();
+            }
+
+            if (elementWidth > tooltipWidth) {
+                var left = leftOffset + ((elementWidth / 2) - (tooltipWidth / 2));
+            } else {
+                var left = leftOffset - ((tooltipWidth / 2) - (elementWidth / 2));
+            }
+
+            if (left <= 0) {
+                left = 10;
+            }
+
+            $('.path-hint-tooltip').css('left', left - minus)
+            
+            $('.path-hint-tooltip').css('top', currentElement.offset().top + 20)
+        })
+
+        $('[data-toggle="tooltip"]').on('mouseout', function(e) {
+            var currentElement = $(e.currentTarget);
+
+            $("#" + currentElement.attr('data-id')).remove();
+        })
+    })
+</script>
\ No newline at end of file
diff --git a/packages/Webkul/Core/src/View/Compilers/BladeCompiler.php b/packages/Webkul/Core/src/View/Compilers/BladeCompiler.php
new file mode 100644
index 000000000..c664d2b18
--- /dev/null
+++ b/packages/Webkul/Core/src/View/Compilers/BladeCompiler.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace Webkul\Core\View\Compilers;
+
+use Illuminate\View\Compilers\BladeCompiler as BaseBladeCompiler;
+
+class BladeCompiler extends BaseBladeCompiler
+{
+    /**
+     * Append the file path to the compiled string.
+     *
+     * @param  string  $contents
+     * @return string
+     */
+    protected function appendFilePath($contents)
+    {
+        $tokens = $this->getOpenAndClosingPhpTokens($contents);
+
+        if (config('view.tracer')
+            && strpos($this->getPath(), 'tracer/style.blade.php') == false
+            && strpos($this->getPath(), 'master.blade.php') == false
+        ) {
+            $finalPath = str_replace('/Providers/..', '', str_replace(base_path(), '', $this->getPath()));
+            
+            $contents = '<div class="path-hint" data-toggle="tooltip" data-title="' . $finalPath . '" data-id="' . uniqid() . '"><span class="testing"></span>' . $contents . '</div>';
+        }
+
+        if ($tokens->isNotEmpty() && $tokens->last() !== T_CLOSE_TAG) {
+            $contents .= ' ?>';
+        }
+
+
+        return $contents."<?php /**PATH {$this->getPath()} ENDPATH**/ ?>";
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Theme/src/ThemeViewFinder.php b/packages/Webkul/Theme/src/ThemeViewFinder.php
index 9fde55631..fada46559 100755
--- a/packages/Webkul/Theme/src/ThemeViewFinder.php
+++ b/packages/Webkul/Theme/src/ThemeViewFinder.php
@@ -84,6 +84,19 @@ class ThemeViewFinder extends FileViewFinder
         }
     }
 
+    /**
+     * Get the string contents of the view.
+     *
+     * @param  callable|null  $callback
+     * @return array|string
+     *
+     * @throws \Throwable
+     */
+    public function render(callable $callback = null)
+    {
+        dd(111);
+    }
+
     /**
      * Set the array of paths where the views are being searched.
      *
diff --git a/packages/Webkul/Ui/package.json b/packages/Webkul/Ui/package.json
index 8d9956da7..2dc9c60fa 100755
--- a/packages/Webkul/Ui/package.json
+++ b/packages/Webkul/Ui/package.json
@@ -26,6 +26,7 @@
     "tooltip.js": "^1.3.1",
     "url-polyfill": "^1.1.5",
     "url-search-params-polyfill": "^6.0.0",
+    "v-tooltip": "^2.0.3",
     "vue-multiselect": "^2.1.6",
     "vue-swatches": "^1.0.3"
   }
diff --git a/packages/Webkul/Ui/src/Resources/assets/js/app.js b/packages/Webkul/Ui/src/Resources/assets/js/app.js
index 087e4ccb4..c3fcb8604 100755
--- a/packages/Webkul/Ui/src/Resources/assets/js/app.js
+++ b/packages/Webkul/Ui/src/Resources/assets/js/app.js
@@ -23,6 +23,13 @@ import TimeComponent from './components/time';
 import SwatchPicker from './components/swatch-picker';
 import Debounce from './directives/debounce';
 import OverlayLoader from './components/overlay-loader';
+import VTooltip from 'v-tooltip';
+
+VTooltip.options.defaultDelay = 0;
+
+Vue.directive('tooltip', VTooltip.VTooltip)
+
+Vue.config.productionTip = false;
 
 Vue.component('flash-wrapper', FlashWrapper);
 Vue.component('flash', Flash);
diff --git a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss
index d7f34d298..082912aea 100755
--- a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss
@@ -1235,4 +1235,86 @@ modal {
     left: 50%;
     margin-top: -24px;
     margin-left: -24px;
+}
+
+.tooltip {
+    display: block !important;
+    z-index: 10000;
+  
+    .tooltip-inner {
+        background: black;
+        color: white;
+        border-radius: 4px;
+        padding: 5px 10px 4px;
+    }
+  
+    .tooltip-arrow {
+        width: 0;
+        height: 0;
+        border-style: solid;
+        position: absolute;
+        margin: 5px;
+        border-color: black;
+        z-index: 1;
+    }
+  
+    &[x-placement^="top"] {
+        margin-bottom: 5px;
+    
+        .tooltip-arrow {
+            border-width: 5px 5px 0 5px;
+            border-left-color: transparent !important;
+            border-right-color: transparent !important;
+            border-bottom-color: transparent !important;
+            bottom: -5px;
+            left: calc(50% - 5px);
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+    }
+  
+    &[x-placement^="bottom"] {
+        margin-top: 5px;
+    
+        .tooltip-arrow {
+            border-width: 0 5px 5px 5px;
+            border-left-color: transparent !important;
+            border-right-color: transparent !important;
+            border-top-color: transparent !important;
+            top: -5px;
+            left: calc(50% - 5px);
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+    }
+  
+    &[x-placement^="right"] {
+        margin-left: 5px;
+    
+        .tooltip-arrow {
+            border-width: 5px 5px 5px 0;
+            border-left-color: transparent !important;
+            border-top-color: transparent !important;
+            border-bottom-color: transparent !important;
+            left: -5px;
+            top: calc(50% - 5px);
+            margin-left: 0;
+            margin-right: 0;
+        }
+    }
+  
+    &[x-placement^="left"] {
+        margin-right: 5px;
+    
+        .tooltip-arrow {
+            border-width: 5px 0 5px 5px;
+            border-top-color: transparent !important;
+            border-right-color: transparent !important;
+            border-bottom-color: transparent !important;
+            right: -5px;
+            top: calc(50% - 5px);
+            margin-left: 0;
+            margin-right: 0;
+        }
+    }
 }
\ No newline at end of file