diff --git a/addons/default/visiosoft/advs-module/resources/css/list-new.scss b/addons/default/visiosoft/advs-module/resources/css/list-new.scss
new file mode 100644
index 000000000..94be8d5d1
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/css/list-new.scss
@@ -0,0 +1,732 @@
+/* Main styles */
+html {
+  @media only screen and (min-width: 576px) {
+    font-size: 7.5789px;
+  }
+  @media only screen and (min-width: 768px) {
+    font-size: 10.1052px;
+  }
+  @media only screen and (min-width: 992px) {
+    font-size: 13.4736px;
+  }
+  @media only screen and (min-width: 1200px) {
+    font-size: 16px;
+  }
+}
+
+#main {
+  margin: 0;
+
+  .container {
+    @media only screen and (max-width: 575.98px) {
+      padding: 0;
+    }
+  }
+}
+
+p {
+  margin-bottom: 0;
+}
+
+ul {
+  list-style: none;
+  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 {
+  /* Breadcrumb */
+  #breadcrumb {
+    border-radius: 0 0 .25rem .25rem;
+    padding: .2rem 1.5rem;
+    background-color: #FCFCFC;
+
+    div {
+      &:first-child {
+        span {
+          color: #8598AA;
+          font-size: calc(13rem / 16);
+
+          &:not(:first-child):before {
+            content: '>';
+            margin-left: 0.4rem;
+          }
+
+          a {
+            color: #8598AA;
+          }
+        }
+      }
+
+      &:last-child {
+        span {
+          color: #87BBF1;
+          font-size: calc(11rem / 16);
+
+          &:not(:first-child):before {
+            content: '|';
+            margin: 0 .25rem;
+          }
+
+          a {
+            color: #87BBF1;
+          }
+        }
+      }
+    }
+  }
+  /* End Breadcrumb */
+
+  #mainContainer {
+    margin-top: .75rem;
+
+    /* Listing container */
+    #listingContainer {
+      min-width: 0;
+
+      /* Page title */
+      #pageTitle {
+        p, a {
+          color: #8598AA;
+        }
+
+        p {
+          font-size: calc(14rem / 16);
+        }
+
+        a {
+          font-size: calc(14rem / 16);
+
+          svg {
+            height: .8rem;
+            width: auto;
+          }
+        }
+      }
+      /* End Page title */
+
+      /* Query bar */
+      #queryBar {
+        & > div {
+          margin: calc(3rem / 16) calc(16rem / 16) calc(4rem / 16) 0;
+
+          & > span {
+            font-weight: 500;
+            color: #292d2e;
+            font-size: calc(13rem / 16);
+          }
+        }
+
+        a {
+          background-color: #eee;
+          font-size: calc(12rem / 16);
+          padding: calc(4rem / 16) calc(7rem / 16);
+          border-radius: calc(2rem / 16);
+          text-decoration: none;
+          max-width: calc(400rem / 16);
+
+          &:hover {
+            background-color: #e0e0e0;
+          }
+
+          span {
+            color: #666;
+          }
+
+          button {
+            height: calc(12rem / 16);
+            width: calc(12rem / 16);
+            background-color: #EC9C4A;
+            border-radius: calc(2rem / 16);
+
+            &:focus {
+              outline: none;
+            }
+          }
+
+          svg {
+            flex-shrink: 0;
+            height: calc(6rem / 16);
+            width: calc(6rem / 16);
+          }
+        }
+
+        div:last-child {
+          a {
+            background-color: unset;
+            font-size: calc(10rem / 16);
+            padding: 0;
+            text-decoration: none;
+            color: #039;
+
+            &:hover {
+              text-decoration: underline;
+
+              span {
+                color: #444;
+              }
+
+              button {
+                background-color: #CD7D22;
+              }
+            }
+          }
+        }
+      }
+      /* End Query bar */
+
+      /* View types */
+      #viewTypes {
+        margin-bottom: .75rem;
+
+        ul {
+          background-color: #F0F2F4;
+
+          li {
+            font-size: calc(13rem / 16);
+            font-weight: 500;
+
+            &:not(:first-child) {
+              border-left: calc(1rem / 16) solid rgba(72, 154, 241, .33);
+            }
+
+            a {
+              color: #489AF1;
+            }
+
+            &.active {
+              a {
+                color: #707070;
+              }
+            }
+          }
+        }
+
+        & > div {
+          background-color: #F0F2F4;
+          padding: calc(5.5rem / 16) .5rem;
+
+          p {
+            font-size: calc(12rem / 16);
+            font-weight: 500;
+            color: #707070;
+            margin-right: .75rem;
+          }
+
+          svg {
+            width: auto;
+            height: .75rem;
+          }
+
+          a {
+            &.active {
+              svg path {
+                fill: #489AF1;
+              }
+            }
+          }
+
+          .dropdown {
+            button {
+              background: none;
+
+              &:after {
+                content: none;
+              }
+            }
+
+            .dropdown-item {
+              cursor: pointer;
+            }
+          }
+        }
+      }
+      /* End View types */
+
+      /* Listing */
+      #listingWrapper {
+        #listing {
+          table {
+            border-collapse: separate;
+            border-spacing: 0 .25rem;
+
+            thead {
+              tr {
+                th {
+                  background-color: #3F475F;
+                  font-weight: 400;
+                  font-size: calc(12rem / 16);
+                  padding: .2rem;
+
+                  &:first-child {
+                    border-top-left-radius: .25rem;
+                  }
+
+                  &:last-child {
+                    border-top-right-radius: .25rem;
+                  }
+                }
+              }
+            }
+
+            tbody {
+              tr {
+                background-color: #F6F6F6;
+
+                &:hover {
+                  .action-data > a {
+                    visibility: visible;
+                  }
+                }
+
+                td {
+                  padding: .4rem 0;
+
+                  & > a {
+                    img {
+                      width: 6.5rem;
+                      height: 5rem;
+                      object-fit: cover;
+                    }
+                  }
+
+                  &:first-child {
+                    width: 17%;
+                    border-radius: .25rem 0 0 .25rem;
+                  }
+
+                  &:last-child {
+                    border-radius: 0 .25rem .25rem 0;
+                  }
+
+                  .id-data {
+                    font-size: calc(10rem / 16);
+                    color: rgba(34, 34, 34, .29);
+                  }
+
+                  h6 {
+                    font-size: calc(14rem / 16);
+                    color: #489AF1;
+                  }
+
+                  .cat-data {
+                    font-size: calc(12rem / 16);
+                    color: rgba(34, 34, 34, .4);
+                  }
+
+                  .action-data {
+                    color: #A1A1A1;
+                    font-size: calc(8rem / 16);
+
+                    & > a {
+                      visibility: hidden;
+                      color: #A1A1A1;
+                    }
+
+                    & > a.active {
+                      visibility: visible;
+
+                      svg {
+                        path {
+                          fill: #FFE900;
+                        }
+
+                        rect {
+                          fill: #EDA862;
+                        }
+                      }
+                    }
+
+                    svg {
+                      width: .4rem;
+                      height: auto;
+                    }
+                  }
+
+                  &.location-data, &.date-data {
+                    width: 13%;
+                    font-size: calc(13rem / 16);
+                    color: #707070;
+                  }
+
+                  &.price-data {
+                    width: 20%;
+                    color: #D33023;
+                    font-weight: 700;
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        #gallerying {
+          .gallery-item-wrapper {
+            &:nth-child(odd) {
+              padding-right: .125rem;
+            }
+
+            &:nth-child(even) {
+              padding-left: .125rem;
+            }
+
+            &:hover {
+              .action-data > a {
+                visibility: visible !important;
+              }
+            }
+
+            .gallery-item {
+              background-color: #F6F6F6;
+
+              img {
+                width: 6.5rem;
+                height: 5rem;
+                object-fit: cover;
+              }
+
+              .action-data-wrapper {
+                .action-data {
+                  margin-top: .7rem;
+
+                  & > a {
+                    visibility: hidden;
+                    font-size: calc(8rem / 16);
+                    color: #A1A1A1;
+                    margin-bottom: .25rem;
+
+                    svg {
+                      width: calc(6rem / 16);
+                      height: auto;
+                    }
+                  }
+
+                  & > a.active {
+                    visibility: visible;
+
+                    svg {
+                      path {
+                        fill: #FFE900;
+                      }
+
+                      rect {
+                        fill: #EDA862;
+                      }
+                    }
+                  }
+                }
+              }
+
+              .id-data {
+                font-size: calc(10rem / 16);
+                color: #B8B8B8;
+              }
+
+              h6 {
+                font-size: calc(14rem / 16);
+
+                a {
+                  color: #489AF1;
+                }
+              }
+
+              .cat-data {
+                font-size: calc(11rem / 16);
+                color: #A1A1A1;
+              }
+
+              .price-data {
+                color: #D33023;
+                font-weight: 700;
+                font-size: calc(15rem / 16);
+              }
+
+              .location-data {
+                margin-bottom: .15rem;
+              }
+
+              .location-data, .date-data {
+                color: #707070;
+                font-size: calc(12rem / 16);
+              }
+            }
+          }
+        }
+      }
+      /* End Listing */
+    }
+    /* End Listing container */
+  }
+}
+
+#mobileListingPage {
+  #breadcrumb {
+    padding: .6rem 1rem;
+
+    ul {
+      font-size: calc(11rem / 16);
+      color: #8598AA;
+
+      li {
+        &:not(:first-child):before {
+          content: '>';
+          margin-left: .125rem;
+        }
+
+        a {
+          color: #8598AA;
+        }
+      }
+    }
+  }
+
+  #mobileListNav {
+    background-color: #F8F9FA;
+
+    & > .mobile-list-nav-item {
+      width: percentage(1/3);
+      font-size: calc(11rem / 16);
+      color: #4D5359;
+
+      svg {
+        height: 1.1rem;
+        width: auto;
+      }
+    }
+
+    .divider {
+      border-left: calc(1rem / 16) solid #E1E1E2;
+      height: 1.8rem;
+    }
+  }
+
+  #mobileListing {
+    .listing-item {
+      &:nth-child(odd) {
+        background-color: #F6F6F6;
+      }
+      
+      img {
+        height: 5rem;
+        width: 7rem;
+        object-fit: cover;
+      }
+
+      div {
+        h6 {
+          font-size: calc(13rem / 16);
+          color: #393939;
+        }
+
+        p {
+          &:first-of-type {
+            color: #A1A1A1;
+            font-size: calc(10rem / 16);
+          }
+
+          &:last-of-type {
+            color: #1592E6;
+            font-size: calc(14rem / 16);
+            font-weight: 700;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/addons/default/visiosoft/advs-module/resources/css/list.css b/addons/default/visiosoft/advs-module/resources/css/list.css
index 0693c4ff8..59d80e93d 100644
--- a/addons/default/visiosoft/advs-module/resources/css/list.css
+++ b/addons/default/visiosoft/advs-module/resources/css/list.css
@@ -215,11 +215,6 @@ a.sort-by-open-dropdown:hover {
     color: #8598AA;
 }
 
-.sort-by-item:hover {
-    text-decoration: underline;
-    cursor: pointer;
-}
-
 .gallery-tn {
     object-fit: cover;
 }
diff --git a/addons/default/visiosoft/advs-module/resources/images/listing/add-favorite.svg b/addons/default/visiosoft/advs-module/resources/images/listing/add-favorite.svg
new file mode 100644
index 000000000..194134a0b
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/images/listing/add-favorite.svg
@@ -0,0 +1,5 @@
+<svg id="ribbon-with-cross" xmlns="http://www.w3.org/2000/svg" width="8.477" height="12.417" viewBox="0 0 8.477 12.417">
+    <path id="Path_3996" data-name="Path 3996" d="M14.307,0H6.236a.2.2,0,0,0-.2.2V12.216a.2.2,0,0,0,.125.186.191.191,0,0,0,.077.016.194.194,0,0,0,.142-.06L10.272,9.1l3.892,3.259a.2.2,0,0,0,.346-.142V.2A.2.2,0,0,0,14.307,0Z" transform="translate(-6.033)" fill="#a1a1a1"/>
+    <rect id="Rectangle_2426" data-name="Rectangle 2426" width="4.639" height="0.843" transform="translate(3.898 5.949) rotate(-90)" fill="#fff"/>
+    <rect id="Rectangle_2427" data-name="Rectangle 2427" width="4.639" height="0.843" transform="translate(2.001 3.208)" fill="#fff"/>
+</svg>
diff --git a/addons/default/visiosoft/advs-module/resources/images/listing/compare.svg b/addons/default/visiosoft/advs-module/resources/images/listing/compare.svg
new file mode 100644
index 000000000..962c5c881
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/images/listing/compare.svg
@@ -0,0 +1,7 @@
+<svg id="Group_1379" data-name="Group 1379" xmlns="http://www.w3.org/2000/svg" width="9.038" height="10.172" viewBox="0 0 9.038 10.172">
+    <rect id="Rectangle_2604" data-name="Rectangle 2604" width="9.038" height="10.172" transform="translate(0 0)" fill="#a1a1a1"/>
+    <g id="Solid" transform="translate(1.466 2.56)">
+        <path id="Path_11023" data-name="Path 11023" d="M24.316,65.683h4.711l-.514.514a.316.316,0,0,0,.447.447l1.053-1.053a.316.316,0,0,0,0-.447L28.96,64.092a.316.316,0,0,0-.447.447l.514.514H24.316a.316.316,0,1,0,0,.632Z" transform="translate(-24 -63.999)" fill="#fff"/>
+        <path id="Path_11024" data-name="Path 11024" d="M29.788,241.052H25.077l.514-.514a.316.316,0,1,0-.447-.447l-1.053,1.053a.316.316,0,0,0,0,.447l1.053,1.053a.316.316,0,1,0,.447-.447l-.514-.514h4.711a.316.316,0,1,0,0-.632Z" transform="translate(-23.999 -237.684)" fill="#fff"/>
+    </g>
+</svg>
diff --git a/addons/default/visiosoft/advs-module/resources/images/listing/filter-arrow.svg b/addons/default/visiosoft/advs-module/resources/images/listing/filter-arrow.svg
new file mode 100644
index 000000000..f420d5955
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/images/listing/filter-arrow.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.303" height="9.867" viewBox="0 0 15.303 9.867">
+    <path id="Path_454" data-name="Path 454" d="M-3948.849,51.453v0h0l-7.15-5.539V43l7.151,5.534L-3941.7,43v2.913l-7.15,5.539h0v0Z" transform="translate(3956.5 -41.981)" fill="#373535" stroke="rgba(0,0,0,0)" stroke-width="1"/>
+</svg>
diff --git a/addons/default/visiosoft/advs-module/resources/images/listing/gallery-type.svg b/addons/default/visiosoft/advs-module/resources/images/listing/gallery-type.svg
new file mode 100644
index 000000000..dae47e5ad
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/images/listing/gallery-type.svg
@@ -0,0 +1,3 @@
+<svg id="Component_22_1" data-name="Component 22 – 1" xmlns="http://www.w3.org/2000/svg" width="24.001" height="16.999" viewBox="0 0 24.001 16.999">
+    <path id="Union_69" data-name="Union 69" d="M-7554.5,3327a1,1,0,0,1-1-1v-5a1,1,0,0,1,1-1h8.5a1,1,0,0,1,1,1v5a1,1,0,0,1-1,1Zm-13.5,0a1,1,0,0,1-1-1v-5a1,1,0,0,1,1-1h8.5a1,1,0,0,1,1,1v5a1,1,0,0,1-1,1Zm13.5-10a1,1,0,0,1-1-1v-5a1,1,0,0,1,1-1h8.5a1,1,0,0,1,1,1v5a1,1,0,0,1-1,1Zm-13.5,0a1,1,0,0,1-1-1v-5a1,1,0,0,1,1-1h8.5a1,1,0,0,1,1,1v5a1,1,0,0,1-1,1Z" transform="translate(7569 -3310)" fill="#c4dbf2"/>
+</svg>
diff --git a/addons/default/visiosoft/advs-module/resources/images/listing/list-type.svg b/addons/default/visiosoft/advs-module/resources/images/listing/list-type.svg
new file mode 100644
index 000000000..522e2bbc0
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/images/listing/list-type.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23.997" height="17.328" viewBox="0 0 23.997 17.328">
+    <g id="Group_1132" data-name="Group 1132" opacity="0.62">
+        <path id="Icon_awesome-sort-amount-down" data-name="Icon awesome-sort-amount-down" d="M27.008,2.25H11.27a.984.984,0,0,0-.984.984V5.2a.984.984,0,0,0,.984.984H27.008a.984.984,0,0,0,.984-.984V3.234A.984.984,0,0,0,27.008,2.25Z" transform="translate(-3.995 11.144)" fill="#c4dbf2"/>
+        <path id="Icon_awesome-sort-amount-down-2" data-name="Icon awesome-sort-amount-down" d="M27.008,2.25H11.27a.984.984,0,0,0-.984.984V5.2a.984.984,0,0,0,.984.984H27.008a.984.984,0,0,0,.984-.984V3.234A.984.984,0,0,0,27.008,2.25Z" transform="translate(-3.995 4.45)" fill="#c4dbf2"/>
+        <path id="Icon_awesome-sort-amount-down-3" data-name="Icon awesome-sort-amount-down" d="M27.008,2.25H11.27a.984.984,0,0,0-.984.984V5.2a.984.984,0,0,0,.984.984H27.008a.984.984,0,0,0,.984-.984V3.234A.984.984,0,0,0,27.008,2.25Z" transform="translate(-3.995 -2.243)" fill="#c4dbf2"/>
+        <path id="Icon_awesome-sort-amount-down-4" data-name="Icon awesome-sort-amount-down" d="M13.866,19.884h-2.6a.984.984,0,0,0-.984.984v1.967a.984.984,0,0,0,.984.984h2.6a.984.984,0,0,0,.984-.984V20.868A.984.984,0,0,0,13.866,19.884Z" transform="translate(-10.286 -6.497)" fill="#c4dbf2"/>
+        <path id="Icon_awesome-sort-amount-down-5" data-name="Icon awesome-sort-amount-down" d="M13.866,19.884h-2.6a.984.984,0,0,0-.984.984v1.967a.984.984,0,0,0,.984.984h2.6a.984.984,0,0,0,.984-.984V20.868A.984.984,0,0,0,13.866,19.884Z" transform="translate(-10.286 -13.19)" fill="#c4dbf2"/>
+        <path id="Icon_awesome-sort-amount-down-6" data-name="Icon awesome-sort-amount-down" d="M13.866,19.884h-2.6a.984.984,0,0,0-.984.984v1.967a.984.984,0,0,0,.984.984h2.6a.984.984,0,0,0,.984-.984V20.868A.984.984,0,0,0,13.866,19.884Z" transform="translate(-10.286 -19.884)" fill="#c4dbf2"/>
+    </g>
+</svg>
diff --git a/addons/default/visiosoft/advs-module/resources/images/listing/list.svg b/addons/default/visiosoft/advs-module/resources/images/listing/list.svg
new file mode 100644
index 000000000..6a50e2a8f
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/images/listing/list.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23.997" height="17.329" viewBox="0 0 23.997 17.329">
+    <g id="Group_1063" data-name="Group 1063" transform="translate(0 0)">
+        <path id="Icon_awesome-sort-amount-down" data-name="Icon awesome-sort-amount-down" d="M27.008,2.25H11.27a.984.984,0,0,0-.984.984V5.2a.984.984,0,0,0,.984.984H27.008a.984.984,0,0,0,.984-.984V3.234A.984.984,0,0,0,27.008,2.25Z" transform="translate(-3.995 11.144)" fill="#9FA4A4"/>
+        <path id="Icon_awesome-sort-amount-down-2" data-name="Icon awesome-sort-amount-down" d="M27.008,2.25H11.27a.984.984,0,0,0-.984.984V5.2a.984.984,0,0,0,.984.984H27.008a.984.984,0,0,0,.984-.984V3.234A.984.984,0,0,0,27.008,2.25Z" transform="translate(-3.995 4.45)" fill="#9FA4A4"/>
+        <path id="Union_68" data-name="Union 68" d="M-4758.229,3103.736a.983.983,0,0,1-.984-.984v-1.967a.983.983,0,0,1,.984-.983h2.594a.983.983,0,0,1,.984.983v1.967a.983.983,0,0,1-.984.984Zm0-6.695a.982.982,0,0,1-.984-.983v-1.967a.983.983,0,0,1,.984-.983h2.594a.983.983,0,0,1,.984.983v1.967a.982.982,0,0,1-.984.983Zm6.291-6.686a.994.994,0,0,1-.108-.006h-6.183a.984.984,0,0,1-.984-.984V3087.4a.983.983,0,0,1,.984-.984h10.594a1.014,1.014,0,0,1,.119.007h11.315a.984.984,0,0,1,.984.984v1.967a.984.984,0,0,1-.984.983Z" transform="translate(4759.214 -3086.414)" fill="#9FA4A4"/>
+    </g>
+</svg>
diff --git a/addons/default/visiosoft/advs-module/resources/images/listing/location-arrow.svg b/addons/default/visiosoft/advs-module/resources/images/listing/location-arrow.svg
new file mode 100644
index 000000000..94756e660
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/images/listing/location-arrow.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11.002" height="6.618" viewBox="0 0 11.002 6.618">
+    <path id="Path_221" data-name="Path 221" d="M4.758-4.92.675-10.2H2.812L5.957-6.142,6.9-4.92,5.957-3.7,2.419.807H.282Z" transform="translate(0.807 -0.282) rotate(90)" fill="#707070"/>
+</svg>
diff --git a/addons/default/visiosoft/advs-module/resources/images/listing/map.svg b/addons/default/visiosoft/advs-module/resources/images/listing/map.svg
new file mode 100644
index 000000000..5be80e132
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/images/listing/map.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24.262" height="24.262" viewBox="0 0 24.262 24.262">
+    <path id="Icon_open-location" data-name="Icon open-location" d="M24.262,0,0,12.131l9.1,3.033,3.033,9.1Z" fill="#9fa4a4"/>
+</svg>
diff --git a/addons/default/visiosoft/advs-module/resources/images/listing/mobile-bookmark.svg b/addons/default/visiosoft/advs-module/resources/images/listing/mobile-bookmark.svg
new file mode 100644
index 000000000..1b73a6ed9
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/images/listing/mobile-bookmark.svg
@@ -0,0 +1,5 @@
+<svg id="bookmark" xmlns="http://www.w3.org/2000/svg" width="12.416" height="16.931" viewBox="0 0 12.416 16.931">
+    <g id="Group_984" data-name="Group 984">
+        <path id="Path_3969" data-name="Path 3969" d="M68.267,0V16.931h.564l5.644-5.644,5.644,5.644h.564V0Z" transform="translate(-68.267)" fill="#a1a1a1"/>
+    </g>
+</svg>
diff --git a/addons/default/visiosoft/advs-module/resources/images/listing/mobile-filter.svg b/addons/default/visiosoft/advs-module/resources/images/listing/mobile-filter.svg
new file mode 100644
index 000000000..f091d75d3
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/images/listing/mobile-filter.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16.774" height="16.774" viewBox="0 0 16.774 16.774">
+    <path id="Icon_awesome-filter" data-name="Icon awesome-filter" d="M15.987,0H.787A.787.787,0,0,0,.231,1.342L6.29,7.4v6.751a.786.786,0,0,0,.335.644l2.621,1.834a.787.787,0,0,0,1.237-.644V7.4l6.059-6.06A.787.787,0,0,0,15.987,0Z" fill="#a1a1a1"/>
+</svg>
diff --git a/addons/default/visiosoft/advs-module/resources/images/listing/mobile-sort.svg b/addons/default/visiosoft/advs-module/resources/images/listing/mobile-sort.svg
new file mode 100644
index 000000000..f3ab76704
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/images/listing/mobile-sort.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18.891" height="16.529" viewBox="0 0 18.891 16.529">
+    <path id="Icon_awesome-sort-amount-down" data-name="Icon awesome-sort-amount-down" d="M11.216,16.418H8.855a.59.59,0,0,0-.59.59v1.181a.59.59,0,0,0,.59.59h2.361a.59.59,0,0,0,.59-.59V17.008A.59.59,0,0,0,11.216,16.418ZM6.494,14.057H4.723V2.84a.59.59,0,0,0-.59-.59H2.952a.59.59,0,0,0-.59.59V14.057H.59a.591.591,0,0,0-.417,1.008l2.952,3.542a.59.59,0,0,0,.835,0l2.952-3.542A.591.591,0,0,0,6.494,14.057Zm9.445-7.084H8.855a.59.59,0,0,0-.59.59V8.744a.59.59,0,0,0,.59.59h7.084a.59.59,0,0,0,.59-.59V7.563A.59.59,0,0,0,15.939,6.973ZM13.578,11.7H8.855a.59.59,0,0,0-.59.59v1.181a.59.59,0,0,0,.59.59h4.723a.59.59,0,0,0,.59-.59V12.286A.59.59,0,0,0,13.578,11.7ZM18.3,2.25H8.855a.59.59,0,0,0-.59.59V4.021a.59.59,0,0,0,.59.59H18.3a.59.59,0,0,0,.59-.59V2.84A.59.59,0,0,0,18.3,2.25Z" transform="translate(0 -2.25)" fill="#a1a1a1"/>
+</svg>
diff --git a/addons/default/visiosoft/advs-module/resources/images/listing/sample-cat-icon.svg b/addons/default/visiosoft/advs-module/resources/images/listing/sample-cat-icon.svg
new file mode 100644
index 000000000..d8122ec34
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/images/listing/sample-cat-icon.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28.172" height="28.173" viewBox="0 0 28.172 28.173">
+    <g id="Group_1114" data-name="Group 1114" transform="translate(-7264.209 2699.731)">
+        <path id="Path_4000" data-name="Path 4000" d="M305.3,349.269a14.087,14.087,0,1,1-9.96,4.126A14.044,14.044,0,0,1,305.3,349.269Z" transform="translate(6973 -3049)" fill="#58c37d" fill-rule="evenodd"/>
+        <g id="Group_1083" data-name="Group 1083" transform="translate(6973 -3049)">
+            <g id="Group_1094" data-name="Group 1094">
+                <path id="Path_4066" data-name="Path 4066" d="M309.262,358.712a2.98,2.98,0,0,1,1.22-.271,3.168,3.168,0,0,1,1.6.466,6.318,6.318,0,0,0,1.445-3.773,27.256,27.256,0,0,1-4.838,2.19,2.865,2.865,0,0,1,.579,1.388Z" fill="#fff" fill-rule="evenodd"/>
+                <path id="Path_4067" data-name="Path 4067" d="M298.513,358.907a3.172,3.172,0,0,1,1.6-.466,2.976,2.976,0,0,1,1.219.271,2.856,2.856,0,0,1,.579-1.388,27.256,27.256,0,0,1-4.838-2.19,6.321,6.321,0,0,0,1.444,3.773Z" fill="#fff" fill-rule="evenodd"/>
+                <path id="Path_4068" data-name="Path 4068" d="M310.482,359.4a2.042,2.042,0,0,0-.8.176,7.159,7.159,0,0,1,.729,2.843h.072c1.318,0,2.387-1.51,2.387-1.51s-1.069-1.51-2.387-1.51Z" fill="#fff" fill-rule="evenodd"/>
+                <path id="Path_4069" data-name="Path 4069" d="M300.909,359.581a2.033,2.033,0,0,0-.8-.176c-1.318,0-2.387,1.51-2.387,1.51s1.069,1.51,2.387,1.51h.072A7.157,7.157,0,0,1,300.909,359.581Z" fill="#fff" fill-rule="evenodd"/>
+                <path id="Path_4070" data-name="Path 4070" d="M308.4,369.475l-.069-.362a5.756,5.756,0,0,1-.081-.583l-.894-2.462a4.105,4.105,0,0,1,1.389-4.678l.471-.355a6.171,6.171,0,0,0-.5-1.237l-.386-.714a1.912,1.912,0,0,0-1.912-1.913H304.18a1.912,1.912,0,0,0-1.912,1.913l-.387.714a6.225,6.225,0,0,0-.5,1.237l.471.355a4.1,4.1,0,0,1,1.388,4.678l-.893,2.462c-.018.2-.045.39-.082.583l-.069.362a1.769,1.769,0,0,0,1.738,2.1h2.731a1.768,1.768,0,0,0,1.737-2.1Zm-3.645.566h-.964v-1.025h.964v1.025Zm2.048,0h-.964v-1.025h.964Z" fill="#fff" fill-rule="evenodd"/>
+                <path id="Path_4071" data-name="Path 4071" d="M302.389,363.774a3.126,3.126,0,0,0-1.121-1.614l-.1-.073a6.191,6.191,0,0,0,.611,3.409l.052.107a5.631,5.631,0,0,1,.282.727l.214-.591a3.124,3.124,0,0,0,.059-1.965Z" fill="#fff" fill-rule="evenodd"/>
+                <path id="Path_4072" data-name="Path 4072" d="M309.419,362.087l-.1.073a3.138,3.138,0,0,0-1.062,3.579l.214.591a5.353,5.353,0,0,1,.282-.727c.017-.036.034-.072.052-.107a6.191,6.191,0,0,0,.61-3.409Z" fill="#fff" fill-rule="evenodd"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/addons/default/visiosoft/advs-module/resources/images/listing/save-search.svg b/addons/default/visiosoft/advs-module/resources/images/listing/save-search.svg
new file mode 100644
index 000000000..3da1e02cc
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/images/listing/save-search.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.422" height="19.662" viewBox="0 0 13.422 19.662">
+    <g id="ribbon-with-cross" transform="translate(-6.033)">
+        <path id="Path_3996" data-name="Path 3996" d="M19.133,0H6.354a.322.322,0,0,0-.321.32V19.343a.317.317,0,0,0,.2.294.3.3,0,0,0,.122.025.307.307,0,0,0,.225-.095l6.166-5.16,6.163,5.16a.32.32,0,0,0,.547-.224V.32A.323.323,0,0,0,19.133,0Z" transform="translate(0)" fill="#fb0"/>
+        <rect id="Rectangle_2426" data-name="Rectangle 2426" width="7.345" height="1.335" transform="translate(12.205 9.42) rotate(-90)" fill="#fff"/>
+        <rect id="Rectangle_2427" data-name="Rectangle 2427" width="7.345" height="1.335" transform="translate(9.201 5.079)" fill="#fff"/>
+    </g>
+</svg>
diff --git a/addons/default/visiosoft/advs-module/resources/images/listing/sort.svg b/addons/default/visiosoft/advs-module/resources/images/listing/sort.svg
new file mode 100644
index 000000000..dedb11b00
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/images/listing/sort.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.804" height="17.328" viewBox="0 0 19.804 17.328">
+    <path id="Icon_awesome-sort-amount-down" data-name="Icon awesome-sort-amount-down" d="M11.759,17.1H9.283a.619.619,0,0,0-.619.619v1.238a.619.619,0,0,0,.619.619h2.475a.619.619,0,0,0,.619-.619V17.722A.619.619,0,0,0,11.759,17.1ZM6.808,14.627H4.951V2.869a.619.619,0,0,0-.619-.619H3.094a.619.619,0,0,0-.619.619V14.627H.619a.619.619,0,0,0-.437,1.056L3.277,19.4a.619.619,0,0,0,.875,0l3.094-3.713A.62.62,0,0,0,6.808,14.627Zm9.9-7.426H9.283a.619.619,0,0,0-.619.619V9.058a.619.619,0,0,0,.619.619h7.426a.619.619,0,0,0,.619-.619V7.82A.619.619,0,0,0,16.709,7.2Zm-2.475,4.951H9.283a.619.619,0,0,0-.619.619v1.238a.619.619,0,0,0,.619.619h4.951a.619.619,0,0,0,.619-.619V12.771A.619.619,0,0,0,14.234,12.152Zm4.951-9.9h-9.9a.619.619,0,0,0-.619.619V4.107a.619.619,0,0,0,.619.619h9.9a.619.619,0,0,0,.619-.619V2.869A.619.619,0,0,0,19.185,2.25Z" transform="translate(0 -2.25)" fill="#87bbf1" opacity="0.62"/>
+</svg>
diff --git a/addons/default/visiosoft/advs-module/resources/js/list-new.js b/addons/default/visiosoft/advs-module/resources/js/list-new.js
new file mode 100644
index 000000000..e1540325a
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/js/list-new.js
@@ -0,0 +1,3 @@
+$(function () {
+    $('[data-toggle="tooltip"]').tooltip()
+})
diff --git a/addons/default/visiosoft/advs-module/resources/lang/en/field.php b/addons/default/visiosoft/advs-module/resources/lang/en/field.php
index c7bf94723..15d55eb6a 100644
--- a/addons/default/visiosoft/advs-module/resources/lang/en/field.php
+++ b/addons/default/visiosoft/advs-module/resources/lang/en/field.php
@@ -211,6 +211,7 @@ return [
     'featured_ads' => "Featured Ads",
     'trending_ads' => 'Trendind Ads',
     'search_ad_result_prefix' => 'on',
+    'search_ad_result_text' => '<strong>:count</strong> ads were found in your <strong>:name</strong> search',
     'search_ads_result_message' => [
         'name' => ':count ads found for :name search',
     ],
@@ -336,6 +337,13 @@ return [
     'owner' => 'Owner',
     'default_owner_instruction' => 'The owner will default to the current user if no user is selected',
 
+    // Listing page
+    'ad_title' => 'Ad title',
+    'listing_date' => 'Listing Date',
+    'view' => 'View',
+    'ads_with_map' => 'Ads With Map',
+    'advanced_sorting' => 'Advanced Sorting',
+
     'free' => 'Free',
     'ad_date' => 'Ad Date',
     'photo_video' => 'Photo, Video',
diff --git a/addons/default/visiosoft/advs-module/resources/views/list/gallery.twig b/addons/default/visiosoft/advs-module/resources/views/list/gallery.twig
index 45e5b3895..9b915cdb7 100644
--- a/addons/default/visiosoft/advs-module/resources/views/list/gallery.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/list/gallery.twig
@@ -1,55 +1,52 @@
 {% extends "visiosoft.module.advs::list/list" %}
-{% block listContent %}
-            {{ addBlock('ad-list/partials/gallery',{'featured_advs':featured_advs})|raw }}
-            {% for adv in advs %}
-                <div class="col-sm-6 col-md-4 col-lg-4 d-flex align-items-stretch">
-                    <div class="card mb-4 box-shadow {% if adv.doping != null %} doping_type4 {% endif %} w-100">
-                        <div class="row p-2" style="min-height: 150px;">
-                            <a href="{{ adv.detail_url }}" class="w-100">
-                                <div class="col-md-12 justify-content-center align-self-center">
-                                    <img class="card-img-top img-fluid img-thumbnail gallery-tn"
-                                         src="{{ adv.cover_photo }}"
-                                         style="height: 150px">
-                                </div>
-                            </a>
-                        </div>
 
-                        <div class="card-body pt-0">
-                            {% if setting_value('visiosoft.theme.base::price_fields') %}
-                                <div class="d-flex justify-content-between align-items-center">
-                                    <b>{{ adv.price != '0'
-                                        ? currency_format(adv.price,adv.currency)
-                                        : trans('visiosoft.module.advs::field.free') }}</b>
-                                </div>
-                            {% endif %}
-                            <div class="d-flex justify-content-between align-items-center text-truncate">
-                                <a href="{{ adv.detail_url }}">
-                                    <p class="card-title d-inline-block mb-1">{{ adv.name }}</p>
-                                </a>
+{% block listContent %}
+    {% set showPrice = setting_value('visiosoft.theme.base::price_fields') %}
+    {% set showLocation = setting_value('visiosoft.module.location::home_page_location') %}
+    {% set showDate = setting_value('visiosoft.theme.base::date_fields') %}
+
+    <div id="gallerying" class="d-flex flex-wrap">
+
+        {{ addBlock('ad-list/partials/gallery',{'featured_advs':featured_advs})|raw }}
+
+        {% for adv in advs %}
+            <div class="w-50 gallery-item-wrapper mb-1{{ adv.doping != null ? ' doping_type4' }}">
+                <div class="gallery-item rounded p-3 d-flex h-100">
+                    <div>
+                        <a href="{{ adv.detail_url }}">
+                            <img src="{{ adv.cover_photo }}" alt="{{ adv.name }}" class="rounded">
+                        </a>
+                        <div class="action-data-wrapper d-flex justify-content-center">
+                            <div class="action-data d-flex flex-column">
+
+                                {{ addBlock('list/extra-actions', {'ad': adv, 'vars': _context})|raw }}
+
                             </div>
-                            {% if setting_value('visiosoft.module.location::home_page_location') %}
-                                <div class="d-flex justify-content-between align-items-center">
-                                    <span>
-                                        <i class="fas fa-location-arrow text-primary"></i>
-                                        {{ adv.city_name }}, {{ adv.country_name }}
-                                    </span>
-                                </div>
-                            {% endif %}
-                            {% if setting_value('visiosoft.theme.base::date_fields') %}
-                                <div class="d-flex justify-content-between align-items-center">
-                                    <span>
-                                        <i class="far fa-clock text-dark"></i>
-                                        {{ adv.created_at|date('d/m/Y') }}
-                                    </span>
-                                </div>
-                            {% endif %}
                         </div>
                     </div>
+                    <div class="ml-4 mt-1">
+                        <p class="id-data">#{{ adv.id }}</p>
+                        <h6 class="mb-1">
+                            <a href="{{ adv.detail_url }}">{{ adv.name }}</a>
+                        </h6>
+                        <p class="cat-data mb-1">{{ adv.cat1_name }} /{{ adv.cat2_name }}</p>
+                        {% if showPrice %}
+                            <p class="price-data mb-1">
+                                {{ adv.price != '0' ? currency_format(adv.price,adv.currency) : trans('visiosoft.module.advs::field.free') }}
+                            </p>
+                        {% endif %}
+                        {% if showLocation %}
+                            <p class="location-data">{{ adv.country_name}}  / {{ adv.city_name }}</p>
+                        {% endif %}
+                        <p class="date-data">{{ adv.publish_at.value|date('d F Y') }}</p>
+                    </div>
                 </div>
-            {% endfor %}
-
+            </div>
+        {% endfor %}
+    </div>
 {% endblock %}
+
 {% block customjs %}
     {{ asset_add("scripts.js", "visiosoft.module.advs::js/list-table.js") }}
     {% include "theme::scroll-modal" %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
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/ads.twig b/addons/default/visiosoft/advs-module/resources/views/list/partials/ads.twig
index 20c4cbe0f..f958ac041 100644
--- a/addons/default/visiosoft/advs-module/resources/views/list/partials/ads.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/list/partials/ads.twig
@@ -1,51 +1,69 @@
-{{ addBlock('ad-list/partials/ads',{'featured_advs':featured_advs})|raw }}
-{% for adv in advs %}
-    <div class="col-md-12 mb-2 list-classified bg-light">
-        <a href="{{ adv.detail_url }}" class="text-dark">
-            <div class="row{{ adv.doping_type ? ' doping_type' ~ adv.doping_type }}">
-                <div class="col-md-2 justify-content-center align-self-center text-center border-right border-white">
-                    <img class="img-thumbnail lazy" src="{{ img('visiosoft.theme.base::images/no-image.png').url }}"
-                         data-src="{{ adv.cover_photo }}" alt="{{ adv.name }}"
-                         style="max-height:80px;">
-                </div>
-                <div class="col-md-7 justify-content-center align-self-center border-right border-white">
-                    <div class="row">
-                        <div class="col-md-12">
-                            <p class="mb-0">{{ adv.name }}</p>
+{% set hideStandard = setting_value('visiosoft.module.advs::hide_listing_standard_price') %}
+{% set listLocation = setting_value('visiosoft.module.location::list_page_location') %}
+
+<div id="listing">
+    <table class="w-100 text-center">
+        <thead>
+            <tr class="text-white">
+                <th class="text-nowrap" colspan="2">{{ trans('visiosoft.module.advs::field.ad_title') }}</th>
+                {% if listLocation %}
+                    <th class="text-nowrap">
+                        {{ trans('visiosoft.module.advs::field.city.name') }} / {{ trans('visiosoft.module.advs::field.district.name') }}
+                    </th>
+                {% endif %}
+                <th class="text-nowrap">{{ trans('visiosoft.module.advs::field.listing_date') }}</th>
+                <th class="text-nowrap">{{ trans('visiosoft.module.advs::field.price.name') }}</th>
+            </tr>
+        </thead>
+
+        <tbody>
+
+            {{ addBlock('ad-list/partials/ads', {'featured_advs': featured_advs})|raw }}
+
+            {% for adv in advs %}
+                <tr class="{{ adv.doping_type ? 'doping_type' ~ adv.doping_type }}">
+                    <td>
+                        <a href="{{ adv.detail_url }}">
+                            <img src="{{ img('visiosoft.theme.base::images/no-image.png').url }}" class="rounded lazy"
+                                 alt="{{ adv.name }}" data-src="{{ adv.cover_photo }}">
+                        </a>
+                    </td>
+                    <td class="text-left pl-2">
+                        <p class="id-data">#{{ adv.id }}</p>
+                        <h6 class="mb-1">
+                            <a href="{{ adv.detail_url }}">{{ adv.name }}</a>
+                        </h6>
+                        <p class="cat-data mb-1">{{ adv.cat1_name }} /{{ adv.cat2_name }}</p>
+                        <div class="action-data d-flex align-items-center">
+
+                            {{ addBlock('list/extra-actions', {'ad': adv, 'vars': _context})|raw }}
+
                         </div>
-                        <div class="col-md-12 text-truncate">
-                            <small class="text-muted">{{ adv.cat1_name }}, {{ adv.cat2_name }}</small>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-md-3 text-left justify-content-center align-self-center">
-                    <div class="row">
-                        <div class="col-md-12">
-                            {% if not setting_value('visiosoft.module.advs::hide_listing_standard_price') %}
-                                <p class="theme-price-old small mb-0"><del>
-                                        {{ adv.standard_price != adv.price and adv.standard_price != '0'
-                                        ? currency_format(adv.standard_price,adv.currency)
-                                        : '' }}
-                                </del></p>
-                            {% endif %}
-                            <b>{{ adv.price != '0'
-                                    ? currency_format(adv.price,adv.currency)
-                                    : trans('visiosoft.module.advs::field.free') }}</b>
-                        </div>
-                        {% if setting_value('visiosoft.module.location::list_page_location') %}
-                            <div class="col-md-12 justify-content-center align-self-center text-truncate">
-                                <small>{{ adv.city_name }} {{ adv.country_name }}</small>
-                            </div>
+                    </td>
+                    {% if listLocation %}
+                        <td class="location-data">
+                            <p>{{ adv.country_name }}</p>
+                            <p>{{ adv.city_name }}</p>
+                        </td>
+                    {% endif %}
+                    <td class="date-data">
+                        <p>{{ adv.publish_at.value|date('d F') }}</p>
+                        <p>{{ adv.publish_at.value|date('Y') }}</p>
+                    </td>
+                    <td class="price-data">
+                        {% if not hideStandard %}
+                            <p class="text-nowrap">
+                                <s>
+                                    {{ adv.standard_price != adv.price and adv.standard_price != '0' ? currency_format(adv.standard_price,adv.currency) : '' }}
+                                </s>
+                            </p>
                         {% endif %}
-                    </div>
-                </div>
-            </div>
-        </a>
-        <div class="row mb-2">
-            <div class="col-md-2"></div>
-            <div class="col-md-7 justify-content-center align-self-center border-right border-white">
-                {{ addBlock('list/extra-actions', {'ad': adv})|raw }}
-            </div>
-        </div>
-    </div>
-{% endfor %}
+                        <p class="text-nowrap">
+                            {{ adv.price != '0' ? currency_format(adv.price,adv.currency) : trans('visiosoft.module.advs::field.free') }}
+                        </p>
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
diff --git a/addons/default/visiosoft/advs-module/resources/views/list/partials/breadcrumb.twig b/addons/default/visiosoft/advs-module/resources/views/list/partials/breadcrumb.twig
index abc2f4382..3b54c0db7 100644
--- a/addons/default/visiosoft/advs-module/resources/views/list/partials/breadcrumb.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/list/partials/breadcrumb.twig
@@ -1,18 +1,19 @@
-<nav aria-label="breadcrumb" class="d-none d-sm-block">
-    <ol class="breadcrumb">
-        <li class="breadcrumb-item">
-            <a href="{{ url('') }}" class="text-dark">
-                <i class="fas fa-home"></i>
+<div id="breadcrumb" class="border-bottom border-right border-left d-flex justify-content-between">
+    <div class="overflow-hidden d-flex align-items-center">
+        <span class="text-truncate">
+            <a href="{{ url('/') }}" data-toggle="tooltip" data-placement="bottom"
+               title="{{ trans("visiosoft.module.advs::field.home") }}">
                 {{ trans("visiosoft.module.advs::field.home") }}
             </a>
-        </li>
-        <li class="breadcrumb-item">
-            <a href="{{ url_route('visiosoft.module.advs::list') }}" class="text-dark">
-                {{ trans("visiosoft.module.advs::field.list") }}
-            </a>
-        </li>
+        </span>
 
-        {{ addBlock('ads-list/partials/breadcrumb',{'mainCats': mainCats, 'category': categoryId})|raw }}
+        {{ addBlock('ads-list/partials/breadcrumb', {'mainCats': mainCats, 'category': categoryId})|raw }}
 
-    </ol>
-</nav>
\ No newline at end of file
+    </div>
+
+    <div class="text-nowrap ml-3">
+
+        {{ addBlock('ads-list/partials/breadcrumb/action')|raw }}
+
+    </div>
+</div>
diff --git a/addons/default/visiosoft/advs-module/resources/views/list/partials/display-mode.twig b/addons/default/visiosoft/advs-module/resources/views/list/partials/display-mode.twig
index f30dc0eac..e06203f6a 100644
--- a/addons/default/visiosoft/advs-module/resources/views/list/partials/display-mode.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/list/partials/display-mode.twig
@@ -1,34 +1,22 @@
-<div class="row text-center list-view-type justify-content-center subbreadcrumb">
-    <div class="col-4 col-md-3">
-        {% if setting_value('visiosoft.module.location::list_page_location') %}
-            <button onclick="changeViewType('{{ url_route('visiosoft.module.advs::view_type', ['map']) }}')"
-               class="mx-auto border-0 text-dark d-flex align-items-center justify-content-center">
-                <img src="{{ img('visiosoft.module.advs::images/map-icon.svg').url }}" alt="map icon" class="mr-1">
-                <small class="d-md-none d-lg-inline">{{ trans("visiosoft.module.advs::field.show_display_mode.map") }}</small>
-            </button>
-        {% endif %}
-    </div>
-    <div class="col-4 col-md-3">
-        <button onclick="changeViewType('{{ url_route('visiosoft.module.advs::view_type', ['list']) }}')"
-           class="mx-auto border-0 text-dark d-flex align-items-center justify-content-center">
-            <img src="{{ img('visiosoft.module.advs::images/list-icon.svg').url }}" alt="list icon" class="mr-1">
-            <small class="d-md-none d-lg-inline">{{ trans('visiosoft.module.advs::field.show_list_view.name') }}</small>
-        </button>
-    </div>
-    <div class="col-3 col-md-3 list-table-view d-none d-md-block">
-        <button onclick="changeViewType('{{ url_route('visiosoft.module.advs::view_type', ['table']) }}')"
-           class="border-0 text-dark d-flex align-items-center justify-content-center">
-            <img src="{{ img('visiosoft.module.advs::images/table-icon.svg').url }}" alt="table icon" class="mr-1">
-            <small class="d-md-none d-lg-inline">{{ trans('visiosoft.module.advs::field.show_table_view.name') }}</small>
-        </button>
-    </div>
-    <div class="col-4 col-md-3">
-        <button onclick="changeViewType('{{ url_route('visiosoft.module.advs::view_type', ['gallery']) }}')"
-           class="mx-auto border-0 text-dark d-flex align-items-center justify-content-center">
-            <img src="{{ img('visiosoft.module.advs::images/gallery-icon.svg').url }}" alt="gallery icon" class="mr-1">
-            <small class="d-md-none d-lg-inline"> {{ trans('visiosoft.module.advs::field.gallery') }}</small>
-        </button>
+<div class="d-flex rounded ml-1">
+    <div class="d-flex px-2 align-items-center">
+        <p class="text-nowrap">{{ trans('visiosoft.module.advs::field.view') }}</p>
+        <div class="d-flex">
+            <a href="{{ url_route('visiosoft.module.advs::view_type', ['list']) }}" rel="nofollow"
+               class="mr-2{{ not request().cookie.viewType or request().cookie.viewType == "list" ? ' active' }}"
+               data-toggle="tooltip" data-placement="top" title="{{ trans('visiosoft.module.advs::field.list') }}">
+                {{ img('visiosoft.module.advs::images/listing/list-type.svg').data|raw }}
+            </a>
+            <a href="{{ url_route('visiosoft.module.advs::view_type', ['gallery']) }}" rel="nofollow"
+               class="{{ request().cookie.viewType == "gallery" ? ' active' }}" data-toggle="tooltip"
+               data-placement="top" title="{{ trans('visiosoft.module.advs::field.gallery') }}">
+                {{ img('visiosoft.module.advs::images/listing/gallery-type.svg').data|raw }}
+            </a>
+        </div>
     </div>
+
+    {% include "visiosoft.module.advs::list/partials/list-sort-by" %}
+
 </div>
 
-{{ asset_add('scripts.js', 'visiosoft.module.advs::js/list.js') }}
\ No newline at end of file
+{{ asset_add('scripts.js', 'visiosoft.module.advs::js/list.js') }}
diff --git a/addons/default/visiosoft/advs-module/resources/views/list/partials/list-filter.twig b/addons/default/visiosoft/advs-module/resources/views/list/partials/list-filter.twig
index d977a7892..4658f388b 100644
--- a/addons/default/visiosoft/advs-module/resources/views/list/partials/list-filter.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/list/partials/list-filter.twig
@@ -1,201 +1,132 @@
-{% set formHtml %}
-<form action="{{ url_route('visiosoft.module.advs::list') }}" method="get" id="{{ (filter_id) ? filter_id : "listFilterForm" }}" rel="nofollow">
-    {% endset %}
-    {% set catSlug = null %}
-    {% set citySlug = null %}
-    {% set pathInfo = app.request.pathinfo|split('/') %}
-    {% if pathInfo[1] == 'c' %}
-        {% set catSlug = pathInfo[2] %}
-    {% endif %}
-    {% if pathInfo|length is same as(4) %}
-        {% set citySlug = pathInfo[3] %}
-    {% endif %}
-    {% if catSlug %}
-    {% set formHtml %}
-    <form action="{{ url_route('adv_list_seo', [catSlug, citySlug]) }}" method="get" id="{{ (filter_id) ? filter_id : "listFilterForm" }}" rel="nofollow">
-        {% endset %}
-        {% endif %}
-        {{ formHtml }}
-        <div>
-            <input type="hidden" name="cat" value="{{ app.request.get('cat') }}">
-            <input type="hidden" name="user" value="{{ app.request.get('user') }}">
-            <div>
-                <div>
-                    <div id="filter" class="w-100 mb-3">
+{% set pathInfo = app.request.pathinfo|split('/') %}
+{% set catSlug = pathInfo[1] == 'c' ? pathInfo[2] : null %}
+{% set citySlug = pathInfo|length is same as(4) ? pathInfo[3] : null %}
+{% set formAction = catSlug ? url_route('adv_list_seo', [catSlug, citySlug]) : url_route('visiosoft.module.advs::list') %}
+<form action="{{ formAction }}" method="get" id="{{ (filter_id) ? filter_id : "listFilterForm" }}" rel="nofollow"
+      class="flex-shrink-0">
+    <input type="hidden" name="cat" value="{{ app.request.get('cat') }}">
+    <input type="hidden" name="user" value="{{ app.request.get('user') }}">
 
-                        {{ addBlock('ads-list/partials/list-filter',{
-                            'mainCats':mainCats,
-                            'subCats':subCats,
-                            'ranges':ranges,
-                            'checkboxes':checkboxes,
-                            'topfields' : topfields,
-                            'selectDropdown' : selectDropdown,
-                            'selectRange' : selectRange,
-                            'selectImage' : selectImage,
-                            'radio':radio,
-                            'countries':countries,
-                            'cities':cities,
-                            'districts':districts,
-                            'neighborhoods':neighborhoods,
-                            'villages':villages,
-                            'param':param,
-                            'categoryId':categoryId,
-                            'cityId':cityId
-                        })|raw }}
+    <div id="category" class="border rounded p-3 mb-3 d-none d-sm-block">
+        <div id="categoryNav" class="d-flex">
+            <a href="{{ url_route('visiosoft.module.advs::view_type', ['list']) }}" rel="nofollow"
+               class="d-flex w-50 align-items-center pl-2 pb-1{{ request().cookie.viewType != "map" ? ' active' }}">
+                {{ img('visiosoft.module.advs::images/listing/list.svg').data|raw }}
+                <p class="ml-2">{{ trans("visiosoft.module.advs::field.list") }}</p>
+            </a>
+            <a href="{{ url_route('visiosoft.module.advs::view_type', ['map']) }}" rel="nofollow"
+               class="d-flex w-50 align-items-center pr-2 pb-1 justify-content-end{{ request().cookie.viewType == "map" ? ' active' }}">
+                {{ img('visiosoft.module.advs::images/listing/map.svg').data|raw }}
+                <p class="ml-2">{{ trans("visiosoft.module.advs::field.map.name") }}</p>
+            </a>
+        </div>
 
-                        <!-- Price Filter Start -->
-                        {% include 'visiosoft.module.advs::list/partials/price-filter' %}
-                        <!-- Price Filter End -->
+        {% include 'visiosoft.module.cats::ads-list/partials/cat-filter' %}
+    </div>
 
-                        {% if setting_value('visiosoft.module.advs::hide_date_filter') == false %}
-                            <!-- Date Filter Start -->
-                            <div class="card mb-3">
-                                <div class="card-header breadcrumb mb-0" id="dateHeading">
-                                    <h5 class="mb-0">
-                                        <button class="btn btn-link text-dark d-flex align-items-center"
-                                                data-toggle="collapse" data-target="#dateContainer"
-                                                aria-expanded="true" aria-controls="dateContainer">
-{#                                            <img src="{{ img('visiosoft.module.advs::images/date-icon.svg').url }}"#}
-{#                                                 class="mr-2"#}
-{#                                                 alt="date icon">#}
-                                            <span>{{ trans("visiosoft.module.advs::field.date.name") }}</span>
-                                        </button>
-                                    </h5>
-                                </div>
-                                <div id="dateContainer" class="collapse show overflow-auto"
-                                     aria-labelledby="dateHeading"
-                                     style="max-height: 300px;">
-                                    <div class="d-flex flex-column p-3 m-0">
-                                        <div class="form-check py-1">
-                                            <input class="form-check-input"
-                                                    {% if app.request.get('date') == 'day' %}
-                                                        checked
-                                                    {% endif %}
-                                                   type="radio" name="date" id="dateDay"
-                                                   value="day">
-                                            <label class="form-check-label" for="dateDay">
-                                                {{ trans("visiosoft.module.advs::field.in_the_last_24_hours.name") }}
-                                            </label>
-                                        </div>
-                                        <div class="form-check py-1">
-                                            <input class="form-check-input"
-                                                    {% if app.request.get('date') == 'week' %}
-                                                        checked
-                                                    {% endif %}
-                                                   type="radio" name="date" id="dateWeek"
-                                                   value="week">
-                                            <label class="form-check-label" for="dateWeek">
-                                                {{ trans("visiosoft.module.advs::field.in_the_last_week.name") }}
-                                            </label>
-                                        </div>
-                                        <div class="form-check py-1">
-                                            <input class="form-check-input"
-                                                    {% if app.request.get('date') == 'month' %}
-                                                        checked
-                                                    {% endif %}
-                                                   type="radio" name="date" id="dateMonth"
-                                                   value="month">
-                                            <label class="form-check-label" for="dateMonth">
-                                                {{ trans("visiosoft.module.advs::field.in_the_last_month.name") }}
-                                            </label>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <!-- Date Filter End -->
-                        {% endif %}
+    {{ addBlock('ads-list/partials/list-filter',{
+        'mainCats':mainCats,
+        'subCats':subCats,
+        'ranges':ranges,
+        'checkboxes':checkboxes,
+        'topfields' : topfields,
+        'selectDropdown' : selectDropdown,
+        'selectRange' : selectRange,
+        'selectImage' : selectImage,
+        'radio':radio,
+        'countries':countries,
+        'cities':cities,
+        'districts':districts,
+        'neighborhoods':neighborhoods,
+        'villages':villages,
+        'param':param,
+        'categoryId':categoryId,
+        'cityId':cityId
+    })|raw }}
 
-                        {% if setting_value('visiosoft.module.advs::hide_photo_filter') == false %}
-                            <!-- Media Filter Start -->
-                            <div class="card mb-3">
-                                <div class="card-header breadcrumb mb-0" id="mediaHeading">
-                                    <h5 class="mb-0">
-                                        <button class="btn btn-link text-dark" data-toggle="collapse"
-                                                data-target="#mediaContainer"
-                                                aria-expanded="true" aria-controls="mediaContainer">
-{#                                            <i class="fa fa-camera"></i>#}
-                                            {{ trans("visiosoft.module.advs::field.photo.name") }}
-                                            , {{ trans("visiosoft.module.advs::field.video.name") }}
-                                        </button>
-                                    </h5>
-                                </div>
-                                <div id="mediaContainer" class="collapse show overflow-auto"
-                                     aria-labelledby="mediaHeading"
-                                     style="max-height: 300px;">
-                                    <div class="d-flex p-3 m-0 flex-column">
-                                        <div class="form-check py-1">
-                                            <input class="form-check-input" type="checkbox"
-                                                    {% if app.request.get('photo') == true %}
-                                                        checked
-                                                    {% endif %}
-                                                   value="true" name="photo"
-                                                   id="photo">
-                                            <label class="form-check-label" for="photo">
-                                                {{ trans("visiosoft.module.advs::field.ads_with_photo.name") }}
-                                            </label>
-                                        </div>
-                                        <div class="form-check py-1">
-                                            <input class="form-check-input" type="checkbox"
-                                                    {% if app.request.get('video') == true %}
-                                                        checked
-                                                    {% endif %}
-                                                   value="true" name="video"
-                                                   id="video">
-                                            <label class="form-check-label" for="video">
-                                                {{ trans("visiosoft.module.advs::field.ads_with_video.name") }}
-                                            </label>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <!-- Media Filter End -->
-                        {% endif %}
+    <!-- Price Filter Start -->
+    {% include 'visiosoft.module.advs::list/partials/price-filter' %}
+    <!-- Price Filter End -->
 
-                        {% if setting_value('visiosoft.module.advs::hide_map_filter') == false %}
-                            <!-- Map Filter Start -->
-                            <div class="card mb-3">
-                                <div class="card-header breadcrumb mb-0" id="mapHeading">
-                                    <h5 class="mb-0">
-                                        <button class="btn btn-link text-dark" data-toggle="collapse"
-                                                data-target="#mapContainer"
-                                                aria-expanded="true" aria-controls="mapContainer">
-{#                                            <i class="fa fa-map"></i>#}
-                                            {{ trans("visiosoft.module.advs::field.map.name") }}
-                                        </button>
-                                    </h5>
-                                </div>
-                                <div id="mapContainer" class="collapse show overflow-auto" aria-labelledby="mapHeading"
-                                     style="max-height: 300px;">
-                                    <div class="row p-3 m-0">
-                                        <div class="form-check py-1">
-                                            <input class="form-check-input" type="checkbox"
-                                                    {% if app.request.get('map') == true %}
-                                                        checked
-                                                    {% endif %}
-                                                   value="true" name="map"
-                                                   id="mapFilter">
-                                            <label class="form-check-label" for="mapFilter">
-                                                {{ trans("visiosoft.module.advs::field.yes.name") }}
-                                            </label>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <!-- Map Filter End -->
-                        {% endif %}
+    {% if setting_value('visiosoft.module.advs::hide_date_filter') == false %}
+        <!-- Date Filter Start -->
+        <div id="date" class="border rounded filter-box p-3 mb-3">
+            <div class="d-flex align-items-center justify-content-between px-2 border-bottom mb-3 pb-1">
+                <p>{{ trans("visiosoft.module.advs::field.date.name") }}</p>
+                {{ img('visiosoft.module.advs::images/listing/filter-arrow.svg').data|raw }}
+            </div>
 
-                        <div class="card">
-                            <div class="card-header bg-primary text-center" id="submitHeading">
-                                <h5 class="mb-0">
-                                    <button class="btn btn-link text-white w-100 searchbut">
-                                        <i class="fas fa-search"></i>
-                                        {{ trans("visiosoft.module.advs::field.search") }}
-                                    </button>
-                                </h5>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+            <div class="px-2 mb-2 d-flex align-items-center">
+                <input type="radio" id="dateDay" {{ app.request.get('date') == 'day' ? 'checked' }} value="day"
+                       name="date">
+                <label for="dateDay" class="ml-2 mb-0">
+                    {{ trans("visiosoft.module.advs::field.in_the_last_24_hours.name") }}
+                </label>
+            </div>
+            <div class="px-2 mb-2 d-flex align-items-center">
+                <input type="radio" id="dateWeek" {{ app.request.get('date') == 'week' ? 'checked' }} value="week"
+                       name="date">
+                <label for="dateWeek" class="ml-2 mb-0">
+                    {{ trans("visiosoft.module.advs::field.in_the_last_week.name") }}
+                </label>
+            </div>
+            <div class="px-2 mb-3 d-flex align-items-center">
+                <input type="radio" id="dateMonth" {{ app.request.get('date') == 'month' ? 'checked' }} value="month"
+                       name="date">
+                <label for="dateMonth" class="ml-2 mb-0">
+                    {{ trans("visiosoft.module.advs::field.in_the_last_month.name") }}
+                </label>
             </div>
         </div>
-    </form>
\ No newline at end of file
+        <!-- Date Filter End -->
+    {% endif %}
+
+    {% if setting_value('visiosoft.module.advs::hide_photo_filter') == false %}
+        <!-- Media Filter Start -->
+        <div id="media" class="border rounded filter-box p-3 mb-3">
+            <div class="d-flex align-items-center justify-content-between px-2 border-bottom mb-3 pb-1">
+                <p>{{ trans("visiosoft.module.advs::field.photo.name") ~ ', ' ~ trans("visiosoft.module.advs::field.video.name") }}</p>
+                {{ img('visiosoft.module.advs::images/listing/filter-arrow.svg').data|raw }}
+            </div>
+
+            <div class="px-2 mb-2 d-flex align-items-center">
+                <input type="checkbox" id="photo" {{ app.request.get('photo') == true ? 'checked' }} value="true"
+                       name="photo">
+                <label for="photo" class="ml-2 mb-0">
+                    {{ trans("visiosoft.module.advs::field.ads_with_photo.name") }}
+                </label>
+            </div>
+            <div class="px-2 mb-3 d-flex align-items-center">
+                <input type="checkbox" id="video" {{ app.request.get('video') == true ? 'checked' }} value="true"
+                       name="video">
+                <label for="video" class="ml-2 mb-0">
+                    {{ trans("visiosoft.module.advs::field.ads_with_video.name") }}
+                </label>
+            </div>
+        </div>
+        <!-- Media Filter End -->
+    {% endif %}
+
+    {% if setting_value('visiosoft.module.advs::hide_map_filter') == false %}
+        <!-- Map Filter Start -->
+        <div id="mapFilter" class="border rounded filter-box p-3 mb-3">
+            <div class="d-flex align-items-center justify-content-between px-2 border-bottom mb-3 pb-1">
+                <p>{{ trans("visiosoft.module.advs::field.map.name") }}</p>
+                {{ img('visiosoft.module.advs::images/listing/filter-arrow.svg').data|raw }}
+            </div>
+
+            <div class="px-2 mb-3 d-flex align-items-center">
+                <input type="checkbox" id="mapFilter" {{ app.request.get('map') == true ? 'checked' }} value="true"
+                       name="map">
+                <label for="mapFilter" class="ml-2 mb-0">{{ trans("visiosoft.module.advs::field.ads_with_map") }}</label>
+            </div>
+        </div>
+        <!-- Map Filter End -->
+    {% endif %}
+
+    <div id="filterSubmit" class="px-3 text-right">
+        <button type="submit" class="btn text-white btn-sm px-3">
+            {{ trans("visiosoft.module.advs::field.search") }}
+        </button>
+    </div>
+</form>
diff --git a/addons/default/visiosoft/advs-module/resources/views/list/partials/list-sort-by.twig b/addons/default/visiosoft/advs-module/resources/views/list/partials/list-sort-by.twig
index da17dfce7..2adb018aa 100644
--- a/addons/default/visiosoft/advs-module/resources/views/list/partials/list-sort-by.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/list/partials/list-sort-by.twig
@@ -1,42 +1,27 @@
-<div class="dropdown pull-left sort-by-list">
-    <div class="dropdown d-flex align-items-center justify-content-center justify-content-md-start">
-        <img src="{{ img('visiosoft.module.advs::images/sort-by-icon.svg').url }}" alt="sort bu icon" class="mr-1">
-        <a data-toggle="dropdown" class="sort-by-open-dropdown text-dark" href="#" aria-expanded="false">
-            <span class="sort-by-selected-text">{{ trans("visiosoft.module.advs::field.pick_ordering") }}</span>
-            <i class="fa fa-caret-square-o-down"></i>
-        </a>
-
-        <ul class="dropdown-menu px-2" x-placement="bottom-start">
-            <li>
-                <span data-value="sort_price_up" class="sort-by-item text-dark">
-                    {{ trans("visiosoft.module.advs::field.price_high") }}
-                </span>
-            </li>
-            <li>
-                <span data-value="sort_price_down" class="sort-by-item text-dark">
-                    {{ trans("visiosoft.module.advs::field.price_low") }}
-                </span>
-            </li>
-            <li>
-                <span data-value="sort_time_newest" class="sort-by-item text-dark">
-                    {{ trans("visiosoft.module.advs::field.newest") }}
-                </span>
-            </li>
-            <li>
-                <span data-value="sort_time_oldest" class="sort-by-item text-dark">
-                    {{ trans("visiosoft.module.advs::field.oldest") }}
-                </span>
-            </li>
-            <li>
-                <span data-value="address_a_z" class="sort-by-item text-dark">
-                    {{ trans("visiosoft.module.advs::field.address_a_z") }}
-                </span>
-            </li>
-            <li>
-                <span data-value="address_z_a" class="sort-by-item text-dark">
-                    {{ trans("visiosoft.module.advs::field.address_z_a") }}
-                </span>
-            </li>
-        </ul>
+<div class="dropdown d-flex align-items-center">
+    <button class="border-0 dropdown-toggle d-flex px-2 align-items-center" type="button"
+            id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <p class="text-nowrap">{{ trans("visiosoft.module.advs::field.advanced_sorting") }}</p>
+        {{ img('visiosoft.module.advs::images/listing/sort.svg').data|raw }}
+    </button>
+    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+        <span class="dropdown-item sort-by-item" data-value="sort_price_up">
+            {{ trans("visiosoft.module.advs::field.price_high") }}
+        </span>
+        <span class="dropdown-item sort-by-item" data-value="sort_price_down">
+            {{ trans("visiosoft.module.advs::field.price_low") }}
+        </span>
+        <span class="dropdown-item sort-by-item" data-value="sort_time_newest">
+            {{ trans("visiosoft.module.advs::field.newest") }}
+        </span>
+        <span class="dropdown-item sort-by-item" data-value="sort_time_oldest">
+            {{ trans("visiosoft.module.advs::field.oldest") }}
+        </span>
+        <span class="dropdown-item sort-by-item" data-value="address_a_z">
+            {{ trans("visiosoft.module.advs::field.address_a_z") }}
+        </span>
+        <span class="dropdown-item sort-by-item" data-value="address_z_a">
+            {{ trans("visiosoft.module.advs::field.address_z_a") }}
+        </span>
     </div>
 </div>
diff --git a/addons/default/visiosoft/advs-module/resources/views/list/partials/mobile-breadcrumb.twig b/addons/default/visiosoft/advs-module/resources/views/list/partials/mobile-breadcrumb.twig
new file mode 100644
index 000000000..a30f57ccd
--- /dev/null
+++ b/addons/default/visiosoft/advs-module/resources/views/list/partials/mobile-breadcrumb.twig
@@ -0,0 +1,10 @@
+<div id="breadcrumb">
+    <ul class="d-flex overflow-auto text-nowrap">
+        <li>
+            <a href="{{ url('/') }}">{{ trans("visiosoft.module.advs::field.home") }}</a>
+        </li>
+
+        {{ addBlock('ads-list/partials/breadcrumb-mobile', {'mainCats': mainCats, 'category': categoryId})|raw }}
+
+    </ul>
+</div>
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/pagination.twig b/addons/default/visiosoft/advs-module/resources/views/list/partials/pagination.twig
index 40625b560..633d5f966 100644
--- a/addons/default/visiosoft/advs-module/resources/views/list/partials/pagination.twig
+++ b/addons/default/visiosoft/advs-module/resources/views/list/partials/pagination.twig
@@ -1,3 +1,3 @@
-<div class="d-flex justify-content-center">
+<div class="d-flex justify-content-center mt-3">
     {{ advs.appends(request_query()).links()|raw }}
 </div>
\ No newline at end of file
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 06734c9a3..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
@@ -1,5 +1,3 @@
-{% set hidePriceCats = setting_value('visiosoft.module.advs::hide_price_categories') %}
-{% set cats = entries('cats','category').whereIn('id', hidePriceCats).get() %}
 {% set isHidden = false %}
 
 {% for cat in cats %}
@@ -9,45 +7,36 @@
 {% endfor %}
 
 {% if setting_value('visiosoft.module.advs::hide_price_filter') == false and not isHidden%}
-    <div class="card mb-3">
-        <div class="card-header breadcrumb mb-0" id="priceHeading">
-            <h5 class="mb-0">
-                <button class="btn btn-link text-dark d-flex align-items-center" data-toggle="collapse"
-                        data-target="#price"
-                        aria-expanded="true" aria-controls="price">
-{#                    <img src="{{ img('visiosoft.module.advs::images/price-icon.svg').url }}" alt="price icon"#}
-{#                         class="mr-2">#}
-                    <span>{{ trans("visiosoft.module.advs::field.price.name") }}</span>
-                </button>
-            </h5>
+    {% set hidePriceCats = setting_value('visiosoft.module.advs::hide_price_categories') %}
+    {% set cats = entries('cats','category').whereIn('id', hidePriceCats).get() %}
+    {% set active_currencies = setting_value('visiosoft.module.advs::enabled_currencies') %}
+
+    <div id="price" class="border rounded filter-box p-3 mb-3">
+        <div class="d-flex align-items-center justify-content-between px-2 border-bottom mb-3 pb-1">
+            <p>{{ trans("visiosoft.module.advs::field.price.name") }}</p>
+            {{ img('visiosoft.module.advs::images/listing/filter-arrow.svg').data|raw }}
         </div>
-        <div id="price" class="collapse show overflow-auto" aria-labelledby="priceHeading"
-             style="max-height: 300px;">
-            <div class="row p-0 m-0">
-                {% set active_currencies = setting_value('visiosoft.module.advs::enabled_currencies') %}
-                <div class="col-md-4 p-1 m-0">
-                    <input type="number" class="price-input form-control w-100"
-                           value="{{ app.request.get('min_price') }}"
-                           name="min_price" min="0"
-                           placeholder="{{ trans('visiosoft.module.advs::field.min.name') }}">
-                </div>
-                <div class="col-md-4 p-1 pr-0 m-0">
-                    <input class="price-input form-control w-100" type="number"
-                           value="{{ app.request.get('max_price') }}"
-                           name="max_price"
-                           placeholder="{{ trans('visiosoft.module.advs::field.max.name') }}">
 
-                </div>
-                <div class="col-md-4 py-1 px-0">
-                    <select name="currency" id="currency" class="form-control">
-                        {% for currency in active_currencies %}
-                            <option {{ app.request.get('currency') == currency ? 'selected' }} value="{{ currency }}">
-                                {{ currency_symbol(currency) }}
-                            </option>
-                        {% endfor %}
-                    </select>
-                </div>
+        <div class="px-3 mb-1">
+            <ul class="w-100 d-flex flex-wrap justify-content-center">
+                {% for currency in active_currencies %}
+                    <li class="w-25">
+                        <input type="radio" id="{{ currency }}" name="currency"
+                               value="{{ currency }}" {{ app.request.get('currency') == currency ? 'checked' }}>
+                        <label for="{{ currency }}" class="mb-0 w-100 px-2 py-1 text-center">
+                            {{ currency }}
+                        </label>
+                    </li>
+                {% endfor %}
+            </ul>
 
+            <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') }}">
+                <input type="number" class="border-0 shadow-sm rounded px-3 py-1" name="max_price"
+                       placeholder="{{ trans('visiosoft.module.advs::field.max.name') }}"
+                       value="{{ app.request.get('max_price') }}">
             </div>
         </div>
     </div>
diff --git a/addons/default/visiosoft/advs-module/src/Http/Controller/advsController.php b/addons/default/visiosoft/advs-module/src/Http/Controller/advsController.php
index 254bbac57..c303eddc5 100644
--- a/addons/default/visiosoft/advs-module/src/Http/Controller/advsController.php
+++ b/addons/default/visiosoft/advs-module/src/Http/Controller/advsController.php
@@ -280,15 +280,16 @@ class AdvsController extends PublicController
 
 
         if ($categoryId) {
+//            if ($hierarchy = $categoryId->getMains()) {
+//                dd(123);
+//            }
+
             $mainCats = $this->category_model->getMains($categoryId->id);
             $current_cat = $this->category_model->getCat($categoryId->id);
-            $mainCats[] = [
-                'id' => $current_cat->id,
-                'val' => $current_cat->name,
-                'slug' => $current_cat->slug,
-            ];
+            $mainCats[] = $current_cat;
             $subCats = $this->category_repository->getSubCatById($categoryId->id);
             $allCats = false;
+//            dd($mainCats);
         } else {
             $mainCats = $this->category_repository->mainCats();
             $allCats = true;
diff --git a/addons/default/visiosoft/cats-module/resources/views/ads-list/partials/breadcrumb-mobile.twig b/addons/default/visiosoft/cats-module/resources/views/ads-list/partials/breadcrumb-mobile.twig
new file mode 100644
index 000000000..8d5bba888
--- /dev/null
+++ b/addons/default/visiosoft/cats-module/resources/views/ads-list/partials/breadcrumb-mobile.twig
@@ -0,0 +1,9 @@
+{% if params.category %}
+    {% for category_breadcrumbs in params.mainCats %}
+        <li>
+            <a href="{{ url_route('adv_list_seo', [category_breadcrumbs['slug']]) }}">
+                {{ category_breadcrumbs['val'] }}
+            </a>
+        </li>
+    {% endfor %}
+{% endif %}
\ No newline at end of file
diff --git a/addons/default/visiosoft/cats-module/resources/views/ads-list/partials/breadcrumb.twig b/addons/default/visiosoft/cats-module/resources/views/ads-list/partials/breadcrumb.twig
index 8b1bdad5c..775c9ea56 100644
--- a/addons/default/visiosoft/cats-module/resources/views/ads-list/partials/breadcrumb.twig
+++ b/addons/default/visiosoft/cats-module/resources/views/ads-list/partials/breadcrumb.twig
@@ -1,9 +1,10 @@
 {% if params.category %}
     {% for category_breadcrumbs in params.mainCats %}
-        <li class="breadcrumb-item">
-            <a href="{{ url_route('adv_list_seo', [category_breadcrumbs['slug']]) }}"
-               class="text-dark font-weight-bold">{{ category_breadcrumbs['val'] }}
+        <span class="text-truncate">
+            <a href="{{ url_route('adv_list_seo', [category_breadcrumbs['slug']]) }}" data-toggle="tooltip"
+               data-placement="bottom" title="{{ category_breadcrumbs['val'] }}">
+                {{ category_breadcrumbs['val'] }}
             </a>
-        </li>
+        </span>
     {% endfor %}
 {% endif %}
\ No newline at end of file
diff --git a/addons/default/visiosoft/cats-module/resources/views/ads-list/partials/cat-filter.twig b/addons/default/visiosoft/cats-module/resources/views/ads-list/partials/cat-filter.twig
new file mode 100644
index 000000000..b7f071376
--- /dev/null
+++ b/addons/default/visiosoft/cats-module/resources/views/ads-list/partials/cat-filter.twig
@@ -0,0 +1,61 @@
+<ul id="categoryList" class="py-3 px-2">
+    {% for maincat in mainCats %}
+        {% set parent_category = noCat ? false : true %}
+
+        <li>
+            <div class="d-flex">
+                {% if maincat.icon %}
+                    <img src="{{ maincat.icon.url }}" alt="{{ maincat.name }}">
+                {% else %}
+                    {{ img('visiosoft.module.advs::images/listing/sample-cat-icon.svg').data|raw }}
+                {% endif %}
+                <div class="ml-2">
+                    <a href="{{ appendRequestURL(request_query(),url_route('adv_list_seo', [maincat.slug, cityId.slug]),{},['page']) }}">
+                        {{ maincat.name }}
+                    </a>
+{#                    <ul class="sub-cat mt-1">#}
+{#                        {% for subcat in subCats %}#}
+{#                            {% if subcat.parent_category_id == maincat.id %}#}
+{#                                {% set subCatId = entries('cats', 'category').find(subcat.id) %}#}
+
+{#                                <li>#}
+{#                                    <a href="{{ appendRequestURL(request_query(), url_route('adv_list_seo', [subCatId.slug, citySlug]), {}, ['page']) }}">#}
+{#                                        {{ subcat.name }}#}
+{#                                    </a>#}
+{#                                    <ul>#}
+{#                                        <li>#}
+{#                                            <a href="#">Test</a>#}
+{#                                            <ul>#}
+{#                                                <li><a href="#">Test</a></li>#}
+{#                                                <li><a href="#">Test</a></li>#}
+{#                                                <li><a href="#">Test</a></li>#}
+{#                                                <li><a href="#">Test</a></li>#}
+{#                                                <li><a href="#">Test</a></li>#}
+{#                                                <li><a href="#">Test</a></li>#}
+{#                                            </ul>#}
+{#                                        </li>#}
+{#                                    </ul>#}
+{#                                </li>#}
+{#                            {% endif %}#}
+{#                        {% endfor %}#}
+{#                    </ul>#}
+                </div>
+            </div>
+        </li>
+
+        <li>
+            <div class="d-flex">
+                {% if maincat.icon %}
+                    <img src="{{ maincat.icon.url }}" alt="{{ maincat.name }}">
+                {% else %}
+                    {{ img('visiosoft.module.advs::images/listing/sample-cat-icon.svg').data|raw }}
+                {% endif %}
+                <div class="ml-2">
+                    <a href="{{ appendRequestURL(request_query(),url_route('adv_list_seo', [maincat.slug, cityId.slug]),{},['page']) }}">
+                        {{ maincat.name }}
+                    </a>
+                </div>
+            </div>
+        </li>
+    {% endfor %}
+</ul>
diff --git a/addons/default/visiosoft/cats-module/resources/views/ads-list/partials/list-filter.twig b/addons/default/visiosoft/cats-module/resources/views/ads-list/partials/list-filter.twig
deleted file mode 100644
index 81d0a953b..000000000
--- a/addons/default/visiosoft/cats-module/resources/views/ads-list/partials/list-filter.twig
+++ /dev/null
@@ -1,55 +0,0 @@
-<div class="card mb-3 d-none d-sm-flex">
-    <div class="card-header breadcrumb mb-0" id="categoryHeading">
-        <h5 class="mb-0">
-            <button class="btn btn-link text-dark" data-toggle="collapse" data-target="#category"
-                    aria-expanded="true" aria-controls="category">
-                <i class="fas fa-stream"></i>
-                {{ trans("visiosoft.module.cats::addon.title") }}
-            </button>
-        </h5>
-    </div>
-    <div id="category" class="collapse show overflow-auto" aria-labelledby="categoryHeading" style="max-height: 300px;">
-        <div class="list-group">
-            {% for maincat in params.mainCats %}
-                {% set name = maincat['val'] %}
-                {% set id = maincat['id'] %}
-                {% set parent_category = true %}
-                {% if app.request.get('cat') is null or app.request.get('cat') == "" %}
-                    {% if params.categoryId is null %}
-                        {% set name = maincat.name %}
-                        {% set id = maincat.id %}
-                        {% set parent_category = false %}
-                    {% endif %}
-                {% endif %}
-                {% set catId = entries('cats', 'category').find(id) %}
-                {% set citySlug = null %}
-                {% set pathInfo = app.request.pathinfo|split('/') %}
-                {% if pathInfo|length is same as(4) %}
-                    {% set citySlug = pathInfo[3] %}
-                {% endif %}
-                <a href="{% if(viewType != "map") %}
-                    {{ appendRequestURL(request_query(),url_route('adv_list_seo', [catId.slug, citySlug]),{},['page']) }}
-                {% else %}
-                    {{ appendRequestURL(request_query(),url_route('advs_map_list'),{'cat':id},['page']) }}
-                {% endif %}" class="list-group-item list-group-item-action text-truncate">
-                    <i class="fas fa-dot-circle"></i>
-                    {{ name }}
-                </a>
-                {% for subcat in params.subCats %}
-                    <div class="list-group pl-3 bg-light">
-                        {% if subcat.parent_category_id == maincat['id'] %}
-                            {% set subCatId = entries('cats', 'category').find(subcat.id) %}
-                            <a href="{% if(viewType != "map") %}
-                                {{ appendRequestURL(request_query(),url_route('adv_list_seo', [subCatId.slug, citySlug]),{},['page']) }}
-                            {% else %}
-                                {{ appendRequestURL(request_query(),url_route('advs_map_list'),{'cat':subcat.id},['page']) }}
-                            {% endif %}" class="list-group-item list-group-item-action text-truncate">
-                                {{ subcat.name }}
-                            </a>
-                        {% endif %}
-                    </div>
-                {% endfor %}
-            {% endfor %}
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/addons/default/visiosoft/cats-module/src/Category/CategoryModel.php b/addons/default/visiosoft/cats-module/src/Category/CategoryModel.php
index ccf3769cd..4d4ac2bbf 100644
--- a/addons/default/visiosoft/cats-module/src/Category/CategoryModel.php
+++ b/addons/default/visiosoft/cats-module/src/Category/CategoryModel.php
@@ -171,17 +171,15 @@ class CategoryModel extends CatsCategoryEntryModel implements CategoryInterface
         return $this->find($cat_id)->name;
     }
 
-    public function getMains($id)
+    public function getMains($id = null)
     {
+        $id = $id ?: $this->id;
+
         $categories = array();
         $z = 1;
         for ($i = 1; $i <= $z; $i++) {
-            if ($main = $this->newQuery()->where('id', $id)->first()) {
-                $new = array();
-                $new['id'] = $main->id;
-                $new['val'] = $main->name;
-                $new['slug'] = $main->slug;
-                $categories[] = $new;
+            if ($main = $this->newQuery()->where('id', $id)->first()->select('id', 'name', 'slug', '')) {
+                $categories[] = $main;
                 if ($main->parent_category_id != null) {
                     $id = $main->parent_category_id;
                     $z++;
diff --git a/addons/default/visiosoft/location-module/resources/css/filterLocation.css b/addons/default/visiosoft/location-module/resources/css/filterLocation.css
index 9c1eb1adb..67fe4c0ee 100644
--- a/addons/default/visiosoft/location-module/resources/css/filterLocation.css
+++ b/addons/default/visiosoft/location-module/resources/css/filterLocation.css
@@ -33,7 +33,6 @@ span.flag {
     height: 14px;
     display: inline-block;
     position: relative;
-    top: 2px;
 }
 
 img.flag {
diff --git a/addons/default/visiosoft/location-module/resources/js/filterLocation.js b/addons/default/visiosoft/location-module/resources/js/filterLocation.js
index c07344d60..4a174dfb4 100644
--- a/addons/default/visiosoft/location-module/resources/js/filterLocation.js
+++ b/addons/default/visiosoft/location-module/resources/js/filterLocation.js
@@ -198,7 +198,7 @@ function SelectOnClick() {
 
         var input = $('input[name="' + $(this).attr('data-field') + '[]"]');
         var input_text = $(this).parent().find('small').html();
-        var text_html = $('.selected-' + $(this).attr('data-field') + ' small');
+        var text_html = $('.selected-' + $(this).attr('data-field'));
         var text = "";
         var input_val = input.val();
         var id = $(this).attr('data-id');
@@ -225,7 +225,7 @@ function SelectOnClick() {
             text.splice($.inArray(input_text, text), 1);
         }
         input.val(input_val.join(','))
-        text_html.html(text.join(','))
+        text_html.html(text.join(', '))
     });
 }
 
@@ -249,19 +249,19 @@ function item(field_name, id, value, abv = '') {
     if (field_name === 'country') {
         return `
             <li class="px-2" data-id="${id}">
-                <label class="w-100">
+                <label class="w-100 d-flex align-items-center">
                     <input type="checkbox" data-field="${field_name}" data-id="${id}" ${selected}>
-                    <span class="flag ml-1 flag-${abv}"></span>
-                    <small>${value}</small>
+                    <span class="flag ml-2 flag-${abv}"></span>
+                    <small class="ml-2">${value}</small>
                 </label>
             </li>
         `;
     } else {
         return `
             <li class="px-2" data-id="${id}">
-                <label class="w-100">
+                <label class="w-100 d-flex align-items-center">
                     <input type="checkbox" data-field="${field_name}" data-id="${id}">
-                    <small>${value}</small>
+                    <small class="ml-2">${value}</small>
                 </label>
             </li>
         `;
diff --git a/addons/default/visiosoft/location-module/resources/views/ads-list/partials/list-filter.twig b/addons/default/visiosoft/location-module/resources/views/ads-list/partials/list-filter.twig
index 7464925de..8f14678b5 100644
--- a/addons/default/visiosoft/location-module/resources/views/ads-list/partials/list-filter.twig
+++ b/addons/default/visiosoft/location-module/resources/views/ads-list/partials/list-filter.twig
@@ -1,24 +1,18 @@
-{% if setting_value('visiosoft.module.location::hide_location_filter') == false %}
-    {% if setting_value('visiosoft.module.location::list_page_location') %}
-        <div class="card mb-3">
-            <div class="card-header breadcrumb mb-0" id="locationHeading">
-                <h5 class="mb-0">
-                    <button class="btn btn-link text-dark d-flex align-items-center" data-toggle="collapse"
-                            data-target="#location" aria-expanded="true" aria-controls="location">
-{#                        <img src="{{ img('visiosoft.module.location::images/location-icon.svg').url }}" class="mr-2"#}
-{#                             alt="location icon">#}
-                        <span>{{ trans("visiosoft.module.location::addon.title") }}</span>
-                    </button>
-                </h5>
-            </div>
-            <div id="location" class="collapse show overflow-auto" aria-labelledby="locationHeading">
-                {% include "visiosoft.module.location::ads-list/partials/location-fields" %}
-            </div>
+{% if setting_value('visiosoft.module.location::hide_location_filter') == false and setting_value('visiosoft.module.location::list_page_location') %}
+    <div id="location" class="border rounded filter-box p-3 mb-3 position-relative">
+        <div class="d-flex align-items-center justify-content-between px-2 border-bottom mb-3 pb-1">
+            <p>{{ trans("visiosoft.module.location::addon.title") }}</p>
+            {{ img('visiosoft.module.advs::images/listing/filter-arrow.svg').data|raw }}
         </div>
-        <script>
-            var select_trans = "{{ trans('visiosoft.module.location::field.pick_option.name') }}";
-        </script>
-        {{ asset_add("scripts.js", "visiosoft.module.location::js/filterLocation.js") }}
-        {{ asset_add("styles.css", "visiosoft.module.location::css/filterLocation.css") }}
-    {% endif %}
+
+        {% include "visiosoft.module.location::ads-list/partials/location-fields" %}
+
+    </div>
+
+    <script>
+        var select_trans = "{{ trans('visiosoft.module.location::field.pick_option.name') }}";
+    </script>
+
+    {{ asset_add("scripts.js", "visiosoft.module.location::js/filterLocation.js") }}
+    {{ asset_add("styles.css", "visiosoft.module.location::css/filterLocation.css") }}
 {% endif %}
\ No newline at end of file
diff --git a/addons/default/visiosoft/location-module/resources/views/ads-list/partials/location-fields.twig b/addons/default/visiosoft/location-module/resources/views/ads-list/partials/location-fields.twig
index a347159e5..0bd32586e 100644
--- a/addons/default/visiosoft/location-module/resources/views/ads-list/partials/location-fields.twig
+++ b/addons/default/visiosoft/location-module/resources/views/ads-list/partials/location-fields.twig
@@ -1,109 +1,112 @@
-<div class="row w-100 px-2 m-0">
-    {% set defaultCountry = setting_value('visiosoft.module.location::default_country') %}
-    {% set selectedCountry =  app.request.get('country') %}
+{% set defaultCountry = setting_value('visiosoft.module.location::default_country') %}
+{% set selectedCountry =  app.request.get('country') %}
 
+{% if selectedCountry %}
+    {% set countryName = getCountry(selectedCountry).name %}
+    {% set countryValue = defaultCountry == selectedCountry ? '' : selectedCountry %}
+    {% set selected_countries_name = [] %}
+    {% for selectedCountry in selectedCountry[0]|split(',') %}
+        {% set selected_countries_name = selected_countries_name|merge([getCountry(selectedCountry|trim(',')).name]) %}
+    {% endfor %}
+{% elseif defaultCountry %}
+    {% set countryName = getCountry(defaultCountry).name %}
+    {% set countryValue = defaultCountry %}
+{% else %}
+    {% set countryName = trans("visiosoft.module.location::field.country.name") %}
     {% set countryValue = '' %}
-    {% if selectedCountry %}
-        {% set countryName = getCountry(selectedCountry).name %}
-        {% set countryValue = defaultCountry == selectedCountry ? '' : selectedCountry %}
-        {% set selected_countries_name = [] %}
-        {% for selectedCountry in selectedCountry[0]|split(',') %}
-            {% set selected_countries_name = selected_countries_name|merge([getCountry(selectedCountry|trim(',')).name]) %}
-        {% endfor %}
-    {% elseif defaultCountry %}
-        {% set countryName = getCountry(defaultCountry).name %}
-        {% set countryValue = defaultCountry %}
-    {% else %}
-        {% set countryName = trans("visiosoft.module.location::field.country.name") %}
-    {% endif %}
-    <div class="col-12 px-0 py-1">
-        <button type="button" class="btn btn-default border border-1 w-100 selected-country filter-country-btn"
-                data-toggle="modal">
-            <span class="float-left">
-                {{ trans("visiosoft.module.location::field.country.name") }}
-                    <small class="text-muted selected-country">{{ countryName }} {{ selected_countries_name|join(',') }}</small>
-            </span>
-            <i class="fas fa-sort-down float-right"></i>
-        </button>
-        <input name="country[]" id="listCountryFilter" type="hidden" multiple
-               value="{% if countrySlug %}{{ countrySlug.id }}{% else %}{{ params.param['country']|join(',') }}{% endif %}">
-    </div>
+{% endif %}
 
-    <div class="col-12 px-0 py-1">
-        <button type="button" class="btn btn-default border border-1 w-100 filter-city-btn" data-toggle="modal"
-                data-parent="">
-            <span class="float-left">{{ trans("visiosoft.module.location::field.city.name") }}</span>
-            <i class="fas fa-sort-down float-right"></i>
-        </button>
-        {% set citySlug = null %}
-        {% set pathInfo = app.request.pathinfo|split('/') %}
-        {% if pathInfo|length is same as(4) %}
-            {% set citySlug = entries('location', 'cities').findBy('slug', pathInfo[3]) %}
-            {% set selected_cities_name = [getCity(citySlug.id).name] %}
-        {% else %}
-            {% set selected_cities = params.param['city'] %}
-            {% set selected_cities_name = [] %}
-            {% for selected_city in selected_cities[0]|split(',') %}
-                {% set selected_cities_name = selected_cities_name|merge([getCity(selected_city|trim(',')).name]) %}
-            {% endfor %}
-        {% endif %}
-        <div class="text-muted selected-city">
-            <small>{{ selected_cities_name|join(',') }}</small>
-        </div>
-        <input name="city[]" id="listCityFilter" type="hidden"
-               value="{% if citySlug %}{{ citySlug.id }}{% else %}{{ params.param['city']|join(',') }}{% endif %}">
-    </div>
-    <div class="col-12 px-0 py-1">
-        <button type="button" class="btn btn-default border border-1 w-100 filter-district-btn" data-toggle="modal"
-                data-parent="">
-            <span class="float-left">{{ trans("visiosoft.module.location::field.district.name") }}</span>
-            <i class="fas fa-sort-down float-right"></i>
-        </button>
-        {% set selected_districts = app.request.get('district') %}
-        {% set selected_districts_name = [] %}
-        {% for selected_district in selected_districts[0]|split(',') %}
-            {% set selected_districts_name = selected_districts_name|merge([getDistrict(selected_district|trim(',')).name]) %}
-        {% endfor %}
-        <div class="text-muted selected-district">
-            <small>{{ selected_districts_name|join(',') }}</small>
-        </div>
-        <input name="district[]" value="{{ app.request.get('district')|join(',') }}" type="hidden">
-    </div>
-    <div class="col-12 px-0 py-1">
-        <button type="button" class="btn btn-default border border-1 w-100 filter-neighborhood-btn" data-toggle="modal"
-                data-parent="">
-            <span class="float-left">{{ trans("visiosoft.module.location::field.neighborhood.name") }}</span>
-            <i class="fas fa-sort-down float-right"></i>
-        </button>
-        {% set selected_neighborhoods = app.request.get('neighborhood') %}
-        {% set selected_neighborhoods_name = [] %}
-        {% for selected_neighborhood in selected_neighborhoods[0]|split(',') %}
-            {% set selected_neighborhoods_name = selected_neighborhoods_name|merge([getNeighborhood(selected_neighborhood|trim(',')).name]) %}
-        {% endfor %}
-        <div class="text-muted selected-neighborhood">
-            <small>{{ selected_neighborhoods_name|join(',') }}</small>
-        </div>
-        <input name="neighborhood[]" value="{{ app.request.get('neighborhood')|join(',') }}" type="hidden">
-    </div>
-    <div class="col-12 px-0 py-1">
-        <button type="button" class="btn btn-default border border-1 w-100 filter-village-btn" data-toggle="modal"
-                data-parent="">
-            <span class="float-left">{{ trans("visiosoft.module.location::field.village.name") }}</span>
-            <i class="fas fa-sort-down float-right"></i>
-        </button>
-        {% set selected_villages = app.request.get('village') %}
-        {% set selected_villages_name = [] %}
-        {% for selected_village in selected_villages[0]|split(',') %}
-            {% set selected_villages_name = selected_villages_name|merge([getVillage(selected_village|trim(',')).name]) %}
-        {% endfor %}
-        <div class="text-muted selected-village">
-            <small>{{ selected_villages_name|join(',') }}</small>
-        </div>
-        <input name="village[]" value="{{ app.request.get('village')|join(',') }}" type="hidden">
-    </div>
+{% set citySlug = null %}
+{% set pathInfo = app.request.pathinfo|split('/') %}
+{% if pathInfo|length is same as(4) %}
+    {% set citySlug = entries('location', 'cities').findBy('slug', pathInfo[3]) %}
+    {% set selected_cities_name = [getCity(citySlug.id).name] %}
+{% else %}
+    {% set selected_cities = params.param['city'] %}
+    {% set selected_cities_name = [] %}
+    {% for selected_city in selected_cities[0]|split(',') %}
+        {% set selected_cities_name = selected_cities_name|merge([getCity(selected_city|trim(',')).name]) %}
+    {% endfor %}
+{% endif %}
+
+{% set selected_districts = app.request.get('district') %}
+{% set selected_districts_name = [] %}
+{% for selected_district in selected_districts[0]|split(',') %}
+    {% set selected_districts_name = selected_districts_name|merge([getDistrict(selected_district|trim(',')).name]) %}
+{% endfor %}
+
+{% set selected_neighborhoods = app.request.get('neighborhood') %}
+{% set selected_neighborhoods_name = [] %}
+{% for selected_neighborhood in selected_neighborhoods[0]|split(',') %}
+    {% set selected_neighborhoods_name = selected_neighborhoods_name|merge([getNeighborhood(selected_neighborhood|trim(',')).name]) %}
+{% endfor %}
+
+{% set selected_villages = app.request.get('village') %}
+{% set selected_villages_name = [] %}
+{% for selected_village in selected_villages[0]|split(',') %}
+    {% set selected_villages_name = selected_villages_name|merge([getVillage(selected_village|trim(',')).name]) %}
+{% endfor %}
+
+<div class="px-2 mb-3">
+    <!-- Start country filter -->
+    <button class="d-flex align-items-center justify-content-between w-100 border-0 mb-1 rounded shadow-sm filter-country-btn"
+            type="button" data-toggle="modal">
+        <p class="selected-country mr-2 text-truncate">
+            {{ selected_countries_name ? selected_countries_name|join(', ') : countryName }}
+        </p>
+        {{ img('visiosoft.module.advs::images/listing/filter-arrow.svg').data|raw }}
+    </button>
+    <input name="country[]" id="listCountryFilter" type="hidden" multiple
+           value="{{ countrySlug ? countrySlug.id : params.param['country']|join(',') }}">
+    <!-- End country filter -->
+
+    <!-- Start city filter -->
+    <button class="d-flex align-items-center justify-content-between w-100 border-0 mb-1 rounded shadow-sm filter-city-btn"
+            type="button" data-toggle="modal">
+        <p class="selected-city mr-2 text-truncate">
+            {{ selected_cities_name[0] ? selected_cities_name|join(', ') : trans("visiosoft.module.location::field.city.name") }}
+        </p>
+        {{ img('visiosoft.module.advs::images/listing/filter-arrow.svg').data|raw }}
+    </button>
+    <input name="city[]" id="listCityFilter" type="hidden"
+           value="{{ citySlug ? citySlug.id : params.param['city']|join(',') }}">
+    <!-- End city filter -->
+
+    <!-- Start district filter -->
+    <button class="d-flex align-items-center justify-content-between w-100 border-0 mb-1 rounded shadow-sm filter-district-btn"
+            type="button" data-toggle="modal">
+        <p class="selected-district mr-2 text-truncate">
+            {{ selected_districts_name[0] ? selected_districts_name|join(', ') : trans("visiosoft.module.location::field.district.name") }}
+        </p>
+        {{ img('visiosoft.module.advs::images/listing/filter-arrow.svg').data|raw }}
+    </button>
+    <input name="district[]" value="{{ app.request.get('district')|join(',') }}" type="hidden">
+    <!-- End district filter -->
+
+    <!-- Start neighborhood filter -->
+    <button class="d-flex align-items-center justify-content-between w-100 border-0 mb-1 rounded shadow-sm filter-neighborhood-btn"
+            type="button" data-toggle="modal">
+        <p class="selected-neighborhood mr-2 text-truncate">
+            {{ selected_neighborhoods_name[0] ? selected_neighborhoods_name|join(', ') : trans("visiosoft.module.location::field.neighborhood.name") }}
+        </p>
+        {{ img('visiosoft.module.advs::images/listing/filter-arrow.svg').data|raw }}
+    </button>
+    <input name="neighborhood[]" value="{{ app.request.get('neighborhood')|join(',') }}" type="hidden">
+    <!-- End neighborhood filter -->
+
+    <!-- Start village filter -->
+    <button class="d-flex align-items-center justify-content-between w-100 border-0 mb-1 rounded shadow-sm filter-village-btn"
+            type="button" data-toggle="modal">
+        <p class="selected-village mr-2 text-truncate">
+            {{ selected_villages_name[0] ? selected_villages_name|join(', ') : trans("visiosoft.module.location::field.village.name") }}
+        </p>
+        {{ img('visiosoft.module.advs::images/listing/filter-arrow.svg').data|raw }}
+    </button>
+    <input name="village[]" value="{{ app.request.get('village')|join(',') }}" type="hidden">
+    <!-- End village filter -->
 </div>
 
-<div class="modal-content position-absolute filter-location-modal" style="z-index: 9999;display: none">
+<div class="modal-content position-absolute filter-location-modal" style="z-index: 9999; left: 0; display: none">
     <div class="modal-header">
         <input type="text" id="searchLocation" class="form-control"
                placeholder="{{ trans('visiosoft.module.location::message.placeholder') }}">