diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
index 8880bb222..ce297f1c0 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
@@ -1424,14 +1424,35 @@
     }
 }
 
-.price-range {
-    display: flex;
-    justify-content: space-evenly;
+.filter-attributes-item {
+    margin-bottom: 10px;
+    border-bottom: 1px solid #CCCCCC;
+        &.active {
+            .filter-attributes-content {
+                display: block;
+            }
+        }
 
-    .price-from {
-        border: 1px solid $theme-color;
+    .filter-input {
+        margin:  10px 15px 13px -4px;
+
+        input[type=text] {
+            text-align: center;
+            border: 1px solid $theme-color;
+            width: 30%;
+        }
     }
-    .price-to {
-        border: 1px solid $theme-color;
+
+    .checkbox {
+        input[type=checkbox] {
+            width: 14px;
+            height: 14px;
+            transform: scale(0.9);
+        }
+    }
+
+    .filter-attributes-content {
+        display: none ;
+        margin-left: 7px;
     }
 }
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/list/layered-navigation.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/list/layered-navigation.blade.php
index b87596d02..9b67754a1 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/list/layered-navigation.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/list/layered-navigation.blade.php
@@ -61,8 +61,7 @@
     </script>
 
     <script type="text/x-template" id="filter-attribute-item-template">
-        <div class="pb15" :class="`filter-attributes-item ${active ? 'active' : ''}`">
-
+        <div :class="`cursor-pointer filter-attributes-item ${active ? 'active' : ''}`">
             <div class="filter-attributes-title" @click="active = !active">
                 <h4 class="fw6 display-inbl">@{{ attribute.name ? attribute.name : attribute.admin_name }}</h4>
 
@@ -98,9 +97,8 @@
                         @change="priceRangeUpdated($event)"
                     ></vue-slider>
 
-                    <div class="row col-12 no-margin no-padding">
+                    <div class="filter-input row col-12 no-padding">
                         <input
-                            class="col"
                             type="text"
                             name="price_from"
                             :value="`{{ core()->currencySymbol(core()->getBaseCurrencyCode()) }}${sliderConfig.priceFrom}`"
@@ -108,7 +106,6 @@
 
                         <label class="col text-center" for="to">to</label>
                         <input
-                        class="col"
                         type="text"
                         name="price_to"
                         :value="`{{ core()->currencySymbol(core()->getBaseCurrencyCode()) }}${sliderConfig.priceTo}`"