diff --git a/assets/makes.json b/assets/makes.json
new file mode 100644
index 0000000..8ab1576
--- /dev/null
+++ b/assets/makes.json
@@ -0,0 +1,54 @@
+[
+    "Acura",
+    "Alfa Romeo",
+    "Aston Martin",
+    "Audi",
+    "Bentley",
+    "BMW",
+    "Buick",
+    "Cadillac",
+    "Chevrolet",
+    "Chrysler",
+    "Dodge",
+    "Dodge or Ram",
+    "Ferrari",
+    "Fiat",
+    "Ford",
+    "Genesis",
+    "GMC",
+    "Honda",
+    "Hummer",
+    "Hyundai",
+    "Infiniti",
+    "Jaguar",
+    "Jeep",
+    "Kia",
+    "Land Rover",
+    "Lexus",
+    "Lincoln",
+    "Maserati",
+    "Mazda",
+    "McLaren",
+    "Mercedes-AMG",
+    "Mercedes-Benz",
+    "MINI",
+    "Mitsubishi",
+    "Nissan",
+    "Oldsmobile",
+    "Plymouth",
+    "Pontiac",
+    "Porsche",
+    "Ram",
+    "Rolls-Royce",
+    "Saab",
+    "Saturn",
+    "Scion",
+    "Smart",
+    "Subaru",
+    "Suzuki",
+    "Tesla",
+    "Toyota",
+    "Triumph",
+    "Volkswagen",
+    "Volvo"
+]
\ No newline at end of file
diff --git a/components/Car/SideBar.vue b/components/Car/SideBar.vue
index e05c341..8345c32 100644
--- a/components/Car/SideBar.vue
+++ b/components/Car/SideBar.vue
@@ -1,4 +1,6 @@
 <script setup>
+  const {makes} = useCars();
+
   const modal = ref({
     make: false,
     location: false,
@@ -6,8 +8,28 @@
   });
 
   const city = ref("");
-  const route = useRoute();
+  const priceRange = ref({
+    min:"",
+    max:""
+  });
 
+  const route = useRoute();
+  const router = useRouter();
+
+  const priceRangeText = computed(() => {
+    const minPrice = route.query.minPrice;
+    const maxPrice = route.query.maxPrice;
+
+    if(!minPrice && !maxPrice) {
+      return "Any";
+    } else if(!minPrice && maxPrice)
+      return `< ${maxPrice}`
+      else if (minPrice && !maxPrice)
+      return `> ${minPrice}`
+    else
+      return `$${minPrice} - $${maxPrice}`
+  });
+  
   const updateModal = (key) => {
     modal.value[key] = !modal.value[key];
   };
@@ -27,38 +49,72 @@
     navigateTo(`/city/${city.value}/car/${route.params.make}`);
     city.value = "";
   };
+
+  const onChangeMake = (make) => {
+    updateModal("make");
+    navigateTo(`/city/${route.params.city}/car/${make}`)
+  };
+
+  const onChangePrice = () => {
+    updateModal("price");
+    if (priceRangeText.value.max && priceRange.value.min) {
+      if (priceRangeText.min > priceRange.value.max)
+        return;
+    }
+
+    // navigateTo(`/city/${route.params.city}/car/${route.params.make}?minPrice=${minPrice}&maxPrice=${maxPrice}`)
+    router.push({
+      query: {
+        minPrice : priceRange.value.min,
+        maxPrice : priceRange.value.max,
+      }
+    });
+  };
 </script>
 
 <template>
 
-<div class="shadow border w-64 mr-10 z-30 h-[190px]">
-            <div class="p-5 flex justify-between relative cursor-pointer border-b">
-              <h3>Location</h3>
-              <h3 @click="updateModal('location')" class="text-blue-400 capitalize">
-                {{ route.params.city }}
-              </h3>
-              <div v-if="modal.location" 
-                class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white">
-                <input type="text" name="" id="" class="border p-1 rounded" v-model="city"/>
-                <button class="bg-blue-400 w-full mt-2 rounded text-white p-1" @click="onChangeLocation">Apply</button>
-              </div>
-            </div>
-            <div class="p-5 flex justify-between relative cursor-pointer border-b">
-              <h3>Make</h3>
-              <h3 @click="updateModal('make')" class="text-blue-400 capitalize">Toyota</h3>
-              <div v-if="modal.make" class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white">
-                <input type="text" name="" id="" class="border p-1 rounded"/>
-                <button class="bg-blue-400 w-full mt-2 rounded text-white p-1">Apply</button>
-              </div>
-            </div>
-            <div class="p-5 flex justify-between relative cursor-pointer border-b">
-              <h3>Price</h3>
-              <h3 @click="updateModal('price')" class="text-blue-400 capitalize">Toyota</h3>
-              <div v-if="modal.price" class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white">
-                <input type="text" name="" id="" class="border p-1 rounded"/>
-                <button class="bg-blue-400 w-full mt-2 rounded text-white p-1">Apply</button>
-              </div>
-            </div>
-          </div>
+  <div class="shadow border w-64 mr-10 z-30 h-[190px]">
+    <!-- LOCATION START -->
+    <div class="p-5 flex justify-between relative cursor-pointer border-b">
+      <h3>Location</h3>
+      <h3 @click="updateModal('location')" class="text-blue-400 capitalize">
+        {{ route.params.city }}
+      </h3>
+      <div v-if="modal.location" 
+        class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white">
+        <input type="text" name="" id="" class="border p-1 rounded" v-model="city"/>
+        <button class="bg-blue-400 w-full mt-2 rounded text-white p-1" @click="onChangeLocation">Apply</button>
+      </div>
+    </div>
+    <!-- LOCATION END -->
+
+    <!-- MAKES START -->
+    <div class="p-5 flex justify-between relative cursor-pointer border-b">
+      <h3>Make</h3>
+      <h3 @click="updateModal('make')" class="text-blue-400 capitalize">{{ route.params.make || "Any" }}</h3>
+      <div v-if="modal.make" class="absolute border shadow left-56 p-5 top-1 -m-1 w-[600px] flex justify-between flex-wrap bg-white">
+        <h4 v-for="make in makes" :key="make" class="w-1/3"
+          @click="onChangeMake(make)"
+        >{{ make }}</h4>
+        <!-- <input type="text" name="" id="" class="border p-1 rounded"/>
+        <button class="bg-blue-400 w-full mt-2 rounded text-white p-1">Apply</button> -->
+      </div>
+    </div>
+    <!-- MAKES END -->
+
+    <!-- START PRICE -->
+    <div class="p-5 flex justify-between relative cursor-pointer border-b">
+      <h3>Price</h3>
+      <h3 @click="updateModal('price')" class="text-blue-400 capitalize">{{priceRangeText}}</h3>
+      <div v-if="modal.price" class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white">
+        <input type="number" name="" id="" class="border p-1 rounded" placeholder="Min" v-model="priceRange.min"/>
+        <input type="number" name="" id="" class="border p-1 rounded" placeholder="Max" v-model="priceRange.max"/>
+        <button class="bg-blue-400 w-full mt-2 rounded text-white p-1" @click="onChangePrice()">Apply</button>
+      </div>
+    </div>
+    <!-- END PRICE -->
+
+  </div>
 
 </template>
\ No newline at end of file
diff --git a/composables/useCars.ts b/composables/useCars.ts
index 301d053..b9a47f0 100644
--- a/composables/useCars.ts
+++ b/composables/useCars.ts
@@ -1,7 +1,9 @@
 import cars from "@/assets/cars.json"
+import makes from "@/assets/makes.json"
 
 export const useCars = () => {
     return {
         cars,
+        makes
     };
 };
\ No newline at end of file