diff --git a/components/ProductFilter.vue b/components/ProductFilter.vue
index 4d1f355..9d77316 100644
--- a/components/ProductFilter.vue
+++ b/components/ProductFilter.vue
@@ -1,129 +1,120 @@
 <template>
   <div class="c-filter">
     <div class="c-filter-content">
-      <div class="">
-        <div v-b-toggle.collapse-all class="filters-header">
-          <img
-            class="image"
-            src="@/assets/img/filter.svg"
-            alt=""
-          />
-          <h2 class="text">FILTRAR PROPUESTAS</h2>
-        </div>
-        <BCollapse id="collapse-all" visible>
-          <!-- Location -->
-          <div class="row">
-            <div class="col-12">
-              <div class="location">
-                <div class="googleaddress-container">
-                  <!-- TODO: Revisar componente -->
-                  <!-- <GoogleAddress
+      <div v-b-toggle.collapse-all class="filters-header">
+        <img class="image" src="@/assets/img/filter.svg" alt="" />
+        <h2 class="text">FILTRAR PROPUESTAS</h2>
+      </div>
+      <BCollapse id="collapse-all" visible>
+        <!-- Location -->
+        <div class="row">
+          <div class="col-12">
+            <div class="location">
+              <div class="googleaddress-container">
+                <!-- TODO: Revisar componente -->
+                <!-- <GoogleAddress
                     @addedData="getPlace"
                     :geo="geo"
                     :label="'Cercanía'"
                   /> -->
-                </div>
               </div>
             </div>
           </div>
+        </div>
 
-          <div class="collapsible collapsible-range">
-            <hr />
-            <div v-b-toggle.collapse-price class="m-1 filter-header">
-              <h2 class="title">Precio</h2>
-              <img
-                src="../assets/img/latienda-arrow-down.svg"
-                alt=""
-                class="arrow"
-              />
+        <div class="collapsible collapsible-range">
+          <hr />
+          <div v-b-toggle.collapse-price class="m-1 filter-header">
+            <h2 class="title">Precio</h2>
+            <img
+              src="../assets/img/latienda-arrow-down.svg"
+              alt=""
+              class="arrow"
+            />
+          </div>
+          <BCollapse :id="'collapse-price'" :visible="!isMobile">
+            <!-- Price -->
+            <div class="filter-range-container">
+              <ClientOnly>
+                <v-range-slider
+                  v-model="priceRange"
+                  :min="0"
+                  :max="500"
+                  step="10"
+                  thumb-label="always"
+                  color="#143E8C"
+                  track-color="#d6d5d5"
+                />
+                <p class="notice">
+                  Entre <span>{{ priceRange[0] }} €</span> y
+                  <span>{{ priceRange[1] }} €</span>
+                </p>
+              </ClientOnly>
             </div>
-            <BCollapse id="collapse-price" visible>
-              <!-- Price -->
-              <div class="filter-range-container">
-                <ClientOnly>
-                    <v-range-slider
-                      v-model="priceRange"
-                      :min="0"
-                      :max="500"
-                      step="10"
-                      thumb-label="always"
-                      color="#143E8C"
-                      track-color="#d6d5d5"
-                    >
-                      <template #prepend>
-                        <span>{{ priceRange[0] }} €</span>
-                      </template>
-                      <template #append>
-                        <span>{{ priceRange[1] }} €</span>
-                      </template>
-                    </v-range-slider>
-                </ClientOnly>
-              </div>
-              <hr class="dotted-hr" />
-              <div class="form-check">
+            <hr class="dotted-hr" />
+            <div class="form-check">
+              <input
+                id="checkbox-shipped"
+                v-model="filterForm.shipping_cost"
+                class="form-check-input"
+                type="checkbox"
+              />
+              <label class="form-check-label" for="checkbox-shipped">
+                Sin gastos de envío
+              </label>
+            </div>
+            <hr class="dotted-hr" />
+            <div class="form-check">
+              <input
+                id="checkbox-discount"
+                v-model="filterForm.discount"
+                class="form-check-input"
+                type="checkbox"
+                value=""
+              />
+              <label class="form-check-label" for="checkbox-discount">
+                Descuentos
+              </label>
+            </div>
+          </BCollapse>
+        </div>
+        <div class="collapsible collapsible-checkboxes">
+          <hr />
+          <div v-b-toggle.collapse-categories class="m-1 filter-header">
+            <h2 class="title">Categorías</h2>
+            <img
+              src="../assets/img/latienda-arrow-down.svg"
+              alt=""
+              class="arrow"
+            />
+          </div>
+          <BCollapse id="collapse-categories" :visible="!isMobile">
+            <div class="checkboxes">
+              <div
+                v-for="(n, index) in categories"
+                :key="index"
+                class="form-check"
+              >
                 <input
-                  id="checkbox-shipped"
-                  v-model="filterForm.shipping_cost"
+                  :id="'checkbox-' + index"
+                  v-model="checkedCategories"
                   class="form-check-input"
                   type="checkbox"
+                  :value="n"
                 />
-                <label class="form-check-label" for="checkbox-shipped">
-                  Sin gastos de envío
+                <label class="form-check-label" :for="'checkbox-' + index">
+                  {{ n }}
                 </label>
               </div>
-              <hr class="dotted-hr" />
-              <div class="form-check">
-                <input
-                  id="checkbox-discount"
-                  v-model="filterForm.discount"
-                  class="form-check-input"
-                  type="checkbox"
-                  value=""
-                />
-                <label class="form-check-label" for="checkbox-discount">
-                  Descuentos
-                </label>
-              </div>
-            </BCollapse>
-          </div>
-          <div class="collapsible collapsible-checkboxes">
-            <hr />
-            <div v-b-toggle.collapse-categories class="m-1 filter-header">
-              <h2 class="title">Categorías</h2>
-              <img
-                src="../assets/img/latienda-arrow-down.svg"
-                alt=""
-                class="arrow"
-              />
             </div>
-            <BCollapse id="collapse-categories" visible>
-              <div class="checkboxes">
-                <div
-                  v-for="(n, index) in categories"
-                  :key="index"
-                  class="form-check"
-                >
-                  <input
-                    :id="'checkbox-' + index"
-                    v-model="checkedCategories"
-                    class="form-check-input"
-                    type="checkbox"
-                    :value="n"
-                  />
-                  <label class="form-check-label" :for="'checkbox-' + index">
-                    {{ n }}
-                  </label>
-                </div>
-              </div>
-              <div>
-                <button class="filter-button" @click="applyFilters">
-                  APLICAR FILTROS
-                </button>
-              </div>
-            </BCollapse>
-          </div>
-        </BCollapse>
-      </div>
+            <div>
+              <button class="filter-button" @click="applyFilters">
+                APLICAR FILTROS
+              </button>
+            </div>
+          </BCollapse>
+        </div>
+      </BCollapse>
     </div>
   </div>
 </template>
@@ -133,23 +124,23 @@ export default {
   props: {
     filters: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     prices: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     currentFilters: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     geo: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   },
 
-  emits: ['applyFilters'],
+  emits: ["applyFilters"],
 
   data() {
     return {
@@ -157,87 +148,101 @@ export default {
         shipping_cost: false,
         discount: false,
       },
+      screenSize: null,
       visible: true,
       checkedCategories: [],
       categories: [
-        'Alimentación',
-        'Agricultura ',
-        'Energía',
-        'Hogar y jardín',
-        'Moda y Textil',
-        'Salud y Cuidados',
-        'Movilidad y Mensajería',
-        'Ocio y Deporte',
-        'Turismo y Gastronomía',
-        'Cultura, Educación y Medios',
-        'Tecnología y Servicios Digitales',
-        'Economía Circular y Reparación',
-        'Finanzas Éticas y Seguros',
-        'Servicios Profesionales',
+        "Alimentación",
+        "Agricultura ",
+        "Energía",
+        "Hogar y jardín",
+        "Moda y Textil",
+        "Salud y Cuidados",
+        "Movilidad y Mensajería",
+        "Ocio y Deporte",
+        "Turismo y Gastronomía",
+        "Cultura, Educación y Medios",
+        "Tecnología y Servicios Digitales",
+        "Economía Circular y Reparación",
+        "Finanzas Éticas y Seguros",
+        "Servicios Profesionales",
       ],
       priceRange: [0, 500],
       priceRangeFilter: {},
       place: null,
       coordinates: null,
-    }
+    };
+  },
+
+  computed: {
+    isMobile() {
+      return this.screenSize <= 768;
+    },
   },
 
   watch: {
     currentFilters(newCurrentFilters) {
       if (newCurrentFilters) {
-        if (newCurrentFilters['category']) {
-          this.checkedCategories = newCurrentFilters['category']
+        if (newCurrentFilters["category"]) {
+          this.checkedCategories = newCurrentFilters["category"];
         } else {
-          this.checkedCategories = []
+          this.checkedCategories = [];
         }
-        if (Object.keys(newCurrentFilters).includes('shipping_cost')) {
-          this.filterForm.shipping_cost = true
+        if (Object.keys(newCurrentFilters).includes("shipping_cost")) {
+          this.filterForm.shipping_cost = true;
         } else {
-          this.filterForm.shipping_cost = false
+          this.filterForm.shipping_cost = false;
         }
       }
-      this.filterForm.discount = this.$route.query.hasOwnProperty('discount')
+      this.filterForm.discount = this.$route.query.hasOwnProperty("discount");
     },
     prices(newPrices) {
       if (newPrices.min && newPrices.max) {
-        this.priceRange = [newPrices.min, newPrices.max]
+        this.priceRange = [newPrices.min, newPrices.max];
       }
     },
   },
 
   mounted() {
     if (this.prices.min && this.prices.max) {
-      this.priceRange = [this.prices.min, this.prices.max]
+      this.priceRange = [this.prices.min, this.prices.max];
     }
+    this.screenSize = window.innerWidth;
+    window.addEventListener("resize", () => {
+      this.screenSize = window.innerWidth;
+    });
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", () => {
+      this.screenSize = window.innerWidth;
+    });
   },
 
   methods: {
     getPlace(value) {
-      this.place = value
+      this.place = value;
     },
 
     applyFilters() {
-      const filters = {}
-      filters.price_min = this.priceRange[0]
-      filters.price_max = this.priceRange[1]
-      if (this.filterForm.shipping_cost) filters.shipping_cost = false
-      if (this.filterForm.discount) filters.discount = true
-      filters.category = this.checkedCategories
+      const filters = {};
+      filters.price_min = this.priceRange[0];
+      filters.price_max = this.priceRange[1];
+      if (this.filterForm.shipping_cost) filters.shipping_cost = false;
+      if (this.filterForm.discount) filters.discount = true;
+      filters.category = this.checkedCategories;
       if (this.place) {
-        filters.latitude = this.place.geo.latitude
-        filters.longitude = this.place.geo.longitude
+        filters.latitude = this.place.geo.latitude;
+        filters.longitude = this.place.geo.longitude;
       }
-      this.$emit('applyFilters', filters)
+      this.$emit("applyFilters", filters);
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
 .c-filter {
   width: 100%;
-  min-height: 100dvh;
-  max-height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -248,9 +253,9 @@ export default {
   gap: 3rem;
   color: $color-primary;
 
-  // @include mobile {
-  //   margin-top: 7rem;
-  // }
+  .c-filter-content {
+    width: 100%;
+  }
 }
 
 .filter-button {
@@ -263,6 +268,15 @@ export default {
 }
 .filter-range-container {
   margin-top: 60px;
+  .notice {
+    color: #000;
+    font-family: Barlow;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    letter-spacing: 0.0175rem;
+  }
 }
 .filters-header {
   display: flex;
@@ -271,9 +285,6 @@ export default {
   justify-content: flex-start;
   margin-bottom: 20px;
   outline: none;
-  @include mobile {
-    margin-top: 2rem;
-  }
   .text {
     font-size: $m;
     margin: 0;
@@ -295,13 +306,13 @@ export default {
   }
 
   label:before {
-    content: '';
+    content: "";
     position: absolute;
     left: 10px;
     top: 0;
     bottom: 0;
     width: 20px;
-    background: url('../assets/img/product-filter-ubicacion.svg') center /
+    background: url("../assets/img/product-filter-ubicacion.svg") center /
       contain no-repeat;
   }
 
@@ -340,8 +351,10 @@ export default {
 }
 
 .checkboxes {
-  height: 6rem;
-  overflow-y: scroll;
+  padding-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
 .dotted-hr {