diff --git a/addons/default/visiosoft/advs-module/resources/css/list-new.scss b/addons/default/visiosoft/advs-module/resources/css/list-new.scss
index 2d2611d43..94be8d5d1 100644
--- a/addons/default/visiosoft/advs-module/resources/css/list-new.scss
+++ b/addons/default/visiosoft/advs-module/resources/css/list-new.scss
@@ -33,6 +33,201 @@ ul {
   padding: 0;
   margin: 0;
 }
+
+/* Filter */
+#listFilterForm, #filterModal {
+  @media only screen and (min-width: 576px) {
+    width: 25%;
+  }
+
+  .filter-box {
+    background-color: #FCFCFC;
+
+    & > div {
+      &:first-child {
+        color: #373535;
+        font-weight: 500;
+        font-size: calc(17rem / 16);
+
+        svg {
+          width: calc(11rem / 16);
+          height: auto;
+        }
+      }
+
+      & > label {
+        font-size: calc(14rem / 16);
+      }
+    }
+  }
+
+  /* Category */
+  #category {
+    background-color: #FCFCFC;
+
+    #categoryNav {
+      a {
+        border-bottom: calc(2rem / 16) solid #D7DEEC;
+
+        svg {
+          height: 1rem;
+          width: 1rem;
+        }
+
+        p {
+          color: #9FA4A4;
+          font-weight: 500;
+          font-size: calc(17rem / 16);
+        }
+
+        &.active {
+          border-bottom-color: #373535;
+
+          svg path {
+            fill: #373535;
+          }
+
+          p {
+            color: #373535;
+          }
+        }
+      }
+    }
+
+    #categoryList {
+      & > li {
+        margin-bottom: .4rem;
+
+        & > div {
+          div {
+            line-height: 1;
+          }
+
+          svg, img {
+            width: 1.15rem;
+            height: 1.15rem;
+            object-fit: contain;
+            flex-shrink: 0;
+          }
+
+          a {
+            color: #183F8A;
+            font-size: calc(13rem / 16);
+            line-height: 1;
+          }
+
+          .sub-cat {
+            li {
+              margin-bottom: .25rem;
+
+              a {
+                font-size: calc(12rem / 16);
+              }
+
+              ul {
+                padding-left: .5rem;
+                margin-top: .25rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  /* End Category */
+
+  /* Location */
+  #location {
+    button:not(.filter-modal-close) {
+      height: 2rem;
+      background: #fff;
+      color: #707070;
+      font-size: calc(12rem / 16);
+      padding: 0 1.25rem;
+
+      svg {
+        width: .48rem;
+        height: auto;
+        flex-shrink: 0;
+      }
+    }
+  }
+  /* End Location */
+
+  /* Price */
+  #price {
+    li {
+      & + & {
+        margin-left: 0.5em;
+      }
+
+      label {
+        display: inline-block;
+        padding: 0.15em;
+        color: #373535;
+        border: calc(1rem / 16) solid #E5E5E5;
+        font-size: calc(13rem / 16);
+        cursor: pointer;
+      }
+
+      input[type=radio] {
+        border: 0;
+        clip: rect(0, 0, 0, 0);
+        height: calc(1rem / 16);
+        overflow: hidden;
+        padding: 0;
+        position: absolute !important;
+        white-space: nowrap;
+        width: calc(1rem / 16);
+
+        &:checked + label {
+          background-color: #E5E5E5;
+          border: calc(1rem / 16) solid #E5E5E5;
+          font-weight: 500;
+        }
+      }
+    }
+
+    .range-input-wrapper {
+      ::placeholder {
+        color: #DFDFDF;
+        opacity: 1;
+      }
+
+      :-ms-input-placeholder {
+        color: #DFDFDF;
+      }
+
+      ::-ms-input-placeholder {
+        color: #DFDFDF;
+      }
+
+      input {
+        width: 5rem;
+        font-size: calc(14rem / 16);
+      }
+    }
+  }
+  /* End Price */
+
+  /* Map */
+  #mapFilter {
+    label {
+      font-size: calc(14rem / 16);
+    }
+  }
+  /* End Map */
+
+  /* Filter submit */
+  #filterSubmit {
+    button {
+      background-color: #52C946;
+      font-size: calc(12rem / 16);
+    }
+  }
+  /* End Filter submit */
+}
+/* End Filter */
 /* End Main styles */
 
 #listingPage {
@@ -81,199 +276,6 @@ ul {
   #mainContainer {
     margin-top: .75rem;
 
-    /* Filter */
-    #listFilterForm {
-      width: 25%;
-
-      .filter-box {
-        background-color: #FCFCFC;
-
-        & > div {
-          &:first-child {
-            color: #373535;
-            font-weight: 500;
-            font-size: calc(17rem / 16);
-
-            svg {
-              width: calc(11rem / 16);
-              height: auto;
-            }
-          }
-
-          & > label {
-            font-size: calc(14rem / 16);
-          }
-        }
-      }
-
-      /* Category */
-      #category {
-        background-color: #FCFCFC;
-
-        #categoryNav {
-          a {
-            border-bottom: calc(2rem / 16) solid #D7DEEC;
-
-            svg {
-              height: 1rem;
-              width: 1rem;
-            }
-
-            p {
-              color: #9FA4A4;
-              font-weight: 500;
-              font-size: calc(17rem / 16);
-            }
-
-            &.active {
-              border-bottom-color: #373535;
-
-              svg path {
-                fill: #373535;
-              }
-
-              p {
-                color: #373535;
-              }
-            }
-          }
-        }
-
-        #categoryList {
-          & > li {
-            margin-bottom: .4rem;
-
-            & > div {
-              div {
-                line-height: 1;
-              }
-
-              svg, img {
-                width: 1.15rem;
-                height: 1.15rem;
-                object-fit: contain;
-                flex-shrink: 0;
-              }
-
-              a {
-                color: #183F8A;
-                font-size: calc(13rem / 16);
-                line-height: 1;
-              }
-
-              .sub-cat {
-                li {
-                  margin-bottom: .25rem;
-
-                  a {
-                    font-size: calc(12rem / 16);
-                  }
-
-                  ul {
-                    padding-left: .5rem;
-                    margin-top: .25rem;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-      /* End Category */
-
-      /* Location */
-      #location {
-        button:not(.filter-modal-close) {
-          height: 2rem;
-          background: #fff;
-          color: #707070;
-          font-size: calc(12rem / 16);
-          padding: 0 1.25rem;
-
-          svg {
-            width: .48rem;
-            height: auto;
-            flex-shrink: 0;
-          }
-        }
-      }
-      /* End Location */
-
-      /* Price */
-      #price {
-        li {
-          & + & {
-            margin-left: 0.5em;
-          }
-
-          label {
-            display: inline-block;
-            padding: 0.15em;
-            color: #373535;
-            border: calc(1rem / 16) solid #E5E5E5;
-            font-size: calc(13rem / 16);
-            cursor: pointer;
-          }
-
-          input[type=radio] {
-            border: 0;
-            clip: rect(0, 0, 0, 0);
-            height: calc(1rem / 16);
-            overflow: hidden;
-            padding: 0;
-            position: absolute !important;
-            white-space: nowrap;
-            width: calc(1rem / 16);
-
-            &:checked + label {
-              background-color: #E5E5E5;
-              border: calc(1rem / 16) solid #E5E5E5;
-              font-weight: 500;
-            }
-          }
-        }
-
-        #priceInputWrapper {
-          ::placeholder {
-            color: #DFDFDF;
-            opacity: 1;
-          }
-
-          :-ms-input-placeholder {
-            color: #DFDFDF;
-          }
-
-          ::-ms-input-placeholder {
-            color: #DFDFDF;
-          }
-
-          input {
-            width: 5rem;
-            font-size: calc(14rem / 16);
-          }
-        }
-      }
-      /* End Price */
-
-      /* Map */
-      #mapFilter {
-        label {
-          font-size: calc(14rem / 16);
-        }
-      }
-      /* End Map */
-
-      /* Filter submit */
-      #filterSubmit {
-        button {
-          background-color: #52C946;
-          font-size: calc(12rem / 16);
-        }
-      }
-      /* End Filter submit */
-    }
-    /* End Filter */
-
     /* Listing container */
     #listingContainer {
       min-width: 0;
@@ -677,7 +679,7 @@ ul {
   #mobileListNav {
     background-color: #F8F9FA;
 
-    & > div:not(.divider) {
+    & > .mobile-list-nav-item {
       width: percentage(1/3);
       font-size: calc(11rem / 16);
       color: #4D5359;
diff --git a/addons/default/visiosoft/advs-module/resources/views/list/list.twig b/addons/default/visiosoft/advs-module/resources/views/list/list.twig
index 98c7a11fa..b0088dc95 100644
--- a/addons/default/visiosoft/advs-module/resources/views/list/list.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/list/list.twig
@@ -2,109 +2,98 @@
 
 {% block styles %}
     {{ asset_style("visiosoft.module.advs::css/list.css") }}
+    {{ asset_style("visiosoft.module.advs::css/list-new.scss") }}
 {% endblock %}
 
 {% block content %}
-    <section>
 
-        <div class="container">
+    {% include "visiosoft.module.advs::list/partials/mobile-list" %}
 
-            <!-- breadcrumb -->
-            {% include "visiosoft.module.advs::list/partials/breadcrumb" %}
-            <!-- breadcrumb -->
+    <div id="listingPage" class="d-none d-sm-block">
 
-            <div class="row my-3 adv-list-wrapper">
-                <div class="col-md-3 d-none d-sm-block filter-section">
-                    {% include "visiosoft.module.advs::list/partials/list-filter" %}
+        {% include "visiosoft.module.advs::list/partials/breadcrumb" %}
+
+        <div id="mainContainer" class="d-flex mb-5">
+
+            {% include "visiosoft.module.advs::list/partials/list-filter" %}
+
+            <div id="listingContainer" class="flex-fill ml-4">
+                <div id="pageTitle" class="d-flex justify-content-between border-bottom pb-2 px-3 mb-3">
+                    <p>
+                        {{ trans('visiosoft.module.advs::field.search_ad_result_text', {
+                            'count': advs.total,
+                            'name': catText ? catText : '',
+                        })|raw }}
+                    </p>
+
+                    <a href="javascript:void(0)" class="d-flex align-items-center fav-search-modal">
+                        <span class="mr-2">Save Search</span>
+                        {{ img('visiosoft.module.advs::images/listing/save-search.svg').data|raw }}
+                    </a>
                 </div>
-                <div class="col-md-9">
-                    <div class="section recommended-classified">
-                        <div class="result-text border d-none d-sm-block">
-                            <div class="mx-3 py-2">
-                                {% if catText %}
-                                    <h1 class="d-inline text-truncate">
-                                        "{{ catText }}"
-                                    </h1>
-                                {% endif %}
-                                {{ trans('visiosoft.module.advs::field.search_ad_result_prefix')|lower }}
-                                <span>
-                                   {{ advs.total }} {{ trans('visiosoft.module.advs::field.ad')|lower }}
-                                </span>
-                                {{ trans('visiosoft.module.advs::field.were_found') }}
-                            </div>
 
-                            {% if count(cFArray) %}
-                                <div class="mx-3 border-top py-2 filter-tabs d-flex flex-wrap">
-                                    {% for customParam in cFArray %}
-                                        <div class="d-flex align-items-center">
-                                            <span class="mr-1">{{ customParam['name'] }}</span>
-                                            {% for customValue in customParam['value'] %}
-                                                <a href="{{ customValue['removalLink'] }}"
-                                                   class="text-truncate d-flex align-items-center mr-1">
-                                                    <span class="mr-2">{{ customValue['name'] }}</span>
-                                                    <button class="border-0 d-flex align-items-center justify-content-center">
-                                                        {{ img('visiosoft.module.advs::images/close.svg').data|raw }}
-                                                    </button>
-                                                </a>
-                                            {% endfor %}
-                                        </div>
-                                    {% endfor %}
-                                    <div class="d-flex align-items-center">
-                                        <a href="{{ app.request.pathinfo }}"
-                                           class="text-truncate d-flex align-items-center mr-1">
-                                            {{ trans('visiosoft.module.advs::field.clear_all') }}
-                                        </a>
-                                    </div>
-                                </div>
-                            {% endif %}
+                {% if count(cFArray) %}
+                    <div id="queryBar" class="px-3 border py-2 filter-tabs d-flex flex-wrap mb-3">
+                        {% for customParam in cFArray %}
+                            <div class="d-flex align-items-center">
+                                <span class="mr-1">{{ customParam['name'] }}</span>
+                                {% for customValue in customParam['value'] %}
+                                    <a href="{{ customValue['removalLink'] }}"
+                                       class="text-truncate d-flex align-items-center mr-1">
+                                        <span class="mr-2">{{ customValue['name'] }}</span>
+                                        <button class="border-0 d-flex align-items-center justify-content-center">
+                                            {{ img('visiosoft.module.advs::images/close.svg').data|raw }}
+                                        </button>
+                                    </a>
+                                {% endfor %}
+                            </div>
+                        {% endfor %}
+                        <div class="d-flex align-items-center">
+                            <a href="{{ app.request.pathinfo }}"
+                               class="text-truncate d-flex align-items-center mr-1">
+                                {{ trans('visiosoft.module.advs::field.clear_all') }}
+                            </a>
                         </div>
-
-                        <div class="row breadcrumb list-header">
-
-                            <div class="col-md-6 my-2 d-none d-sm-block">
-                                {% include "visiosoft.module.advs::list/partials/list-sort-by" %}
-                            </div>
-                            <div class="col-md-6 my-2">
-                                {% include "visiosoft.module.advs::list/partials/display-mode" %}
-                            </div>
-                        </div>
-                        <div class="my-2 p-0 bg-light d-flex d-sm-none mobile-list-action row text-center align-items-center">
-                            <div class="col-4" id="filter_modal_btn">
-                                <i class="fas fa-filter w-100"></i>
-                                <a href="javascript:;">{{ trans('visiosoft.module.advs::field.filter') }}</a>
-                            </div>
-                            <div class="col-4" id="sort_modal_btn">
-                                <i class="fas fa-sort-amount-down w-100"></i>
-                                <a href="javascript:;">{{ trans('visiosoft.module.advs::field.sort') }}</a>
-                            </div>
-                            {{ addBlock('ads-list/row-bottom',{'show_favorite_search':true})|raw }}
-                        </div>
-                        {{ addBlock('ads-list/row',{'topfields':topfields,'selectRange':selectRange,'advs':advs, 'mainCats':mainCats|length})|raw }}
-                        <div class="row products-list">
-                            {% block listContent %}
-                                {% include "visiosoft.module.advs::list/partials/ads" %}
-                            {% endblock %}
-                        </div>
-                        {% include "visiosoft.module.advs::list/partials/pagination" %}
-
-                        {{ addBlock('ads-list/row-bottom')|raw }}
-
                     </div>
+                {% endif %}
+
+                <div id="viewTypes" class="d-flex justify-content-between">
+
+                    {{ addBlock('ads-list/partials/before-display-mode', {'topfields': topfields})|raw }}
+
+                    {% include "visiosoft.module.advs::list/partials/display-mode" %}
+
+                </div>
+
+                {{ addBlock('ads-list/row',{'topfields':topfields,'selectRange':selectRange,'advs':advs, 'mainCats':mainCats|length})|raw }}
+
+                <div id="listingWrapper" class="border rounded p-3">
+                    {% block listContent %}
+                        {% include "visiosoft.module.advs::list/partials/ads" %}
+                    {% endblock %}
+
+                    {% include "visiosoft.module.advs::list/partials/pagination" %}
+
+                    {{ addBlock('ads-list/row-bottom')|raw }}
+
                 </div>
             </div>
         </div>
-    </section>
+    </div>
 
     {% include "visiosoft.module.advs::list/partials/filter-modal" %}
     {% include "visiosoft.module.advs::list/partials/sort-modal" %}
+    {{ addBlock('list/partials/modal')|raw }}
 
     <script>
         var select_trans = "{{ trans('visiosoft.module.advs::field.pick_option') }}";
     </script>
 
     {{ asset_add("scripts.js", "visiosoft.module.advs::js/list.js") }}
+    {{ asset_add("scripts.js", "visiosoft.module.advs::js/list-new.js") }}
 
 {% endblock %}
+
 {% block customjs %}
-    {{ addBlock('ads-list/list',{'adv':adv})|raw }}
-{% endblock %}
\ No newline at end of file
+    {{ addBlock('ads-list/list', {'adv': adv})|raw }}
+{% endblock %}
diff --git a/addons/default/visiosoft/advs-module/resources/views/list/partials/mobile-list.twig b/addons/default/visiosoft/advs-module/resources/views/list/partials/mobile-list.twig
new file mode 100644
index 000000000..54bff7527
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/views/list/partials/mobile-list.twig
@@ -0,0 +1,36 @@
+<div id="mobileListingPage" class="d-sm-none mb-5">
+
+    {% include "visiosoft.module.advs::list/partials/mobile-breadcrumb" %}
+
+    <div id="mobileListNav" class="d-flex p-2 align-items-center mb-1">
+        <div id="filter_modal_btn" class="d-flex flex-column align-items-center mobile-list-nav-item">
+            {{ img('visiosoft.module.advs::images/listing/mobile-filter.svg').data|raw }}
+            <p class="mt-1">{{ trans('visiosoft.module.advs::field.filter') }}</p>
+        </div>
+        <div class="divider"></div>
+        <div id="sort_modal_btn" class="d-flex flex-column align-items-center mobile-list-nav-item">
+            {{ img('visiosoft.module.advs::images/listing/mobile-sort.svg').data|raw }}
+            <p class="mt-1">{{ trans('visiosoft.module.advs::field.sort') }}</p>
+        </div>
+        <div class="divider"></div>
+
+        {{ addBlock('ads-list/mobile/action-bar')|raw }}
+
+    </div>
+
+    <div id="mobileListing">
+        {% for adv in advs %}
+            <a href="{{ adv.detail_url }}" class="listing-item d-flex p-2">
+                <img src="{{ adv.cover_photo }}" alt="{{ adv.name }}" class="rounded-sm">
+                <div class="ml-3 mt-1">
+                    <h6 class="mb-1">{{ adv.name }}</h6>
+                    <p class="mb-1">{{ adv.country_name }} / {{ adv.city_name }}</p>
+                    <p>{{ adv.price != '0' ? currency_format(adv.price,adv.currency) : trans('visiosoft.module.advs::field.free') }}</p>
+                </div>
+            </a>
+        {% endfor %}
+    </div>
+
+    {% include "visiosoft.module.advs::list/partials/pagination" %}
+
+</div>
diff --git a/addons/default/visiosoft/advs-module/resources/views/list/partials/price-filter.twig b/addons/default/visiosoft/advs-module/resources/views/list/partials/price-filter.twig
index 121671760..ba9294da5 100644
--- a/addons/default/visiosoft/advs-module/resources/views/list/partials/price-filter.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/list/partials/price-filter.twig
@@ -30,7 +30,7 @@
                 {% endfor %}
             </ul>
 
-            <div id="priceInputWrapper" class="d-flex justify-content-around mt-3">
+            <div id="priceInputWrapper" class="d-flex justify-content-around mt-3 range-input-wrapper">
                 <input type="number" class="border-0 shadow-sm rounded px-3 py-1" name="min_price" min="0"
                        placeholder="{{ trans('visiosoft.module.advs::field.min.name') }}"
                        value="{{ app.request.get('min_price') }}">