diff --git a/ReadMe.md b/ReadMe.md
index 1e01124..afd030f 100644
--- a/ReadMe.md
+++ b/ReadMe.md
@@ -1,21 +1,27 @@
 # YelpCamp United States
-<hr>
 This is my first full stack CRUD project that allows users to view, post, edit, delete, and leave reviews on the campgrounds. 
 <br><br>
 <b>Features that I added/will be added on top of Colt Steele's Web Development Bootcamp: </b>
 <br>
 
 1.**[NPS API](https://www.nps.gov/subjects/developer/guides.htm)** - I integrated real campgrounds in the United States using an API.<br>
+<<<<<<< HEAD
+1. **☀️light and 🌙dark mode** - I used JS DOM Manipulation, localStorage, and Cookies to implement a theme feature<br>
+2. **🌳My campgrounds** - This feature allows users to show the campgrounds they uploaded to YelpCamp! <br>
+3. **📄pagination feature** - I also used DOM Manipulation, cookies, and Mongoose to implement pagination. This augments the performance by loading only few datas the the user wants rather than loading a whole single resource.<br>
+4. 🔍**Search Feature** ➡️ <i>Coming soon!</i> 
+
+=======
 2. **☀️light and 🌙dark mode** - I used JS DOM Manipulation, localStorage, and Cookies to implement this themed feature.<br>
 3. **🌳My campgrounds** - This feature allows users to show the campgrounds they uploaded to YelpCamp! <br>
 4. **📄pagination feature** - I also used DOM Manipulation, cookies, and Mongoose to implement pagination. This augments the performance by loading only few datas the user wants rather than loading a whole single resource.<br>
 5. 🔍**Filter Campgrounds Feature** - allows users to look for campgrounds located on a certain state. ➡️ <i>Coming soon!</i> 
+>>>>>>> develop-branch
 
-<hr>
 
 ## 🔨Stacks
 YelpCamp is built with **MEN** (*Mongo, Express, and Node*) stack.
-<hr>
+
 
 ## 👀 Previews
 #### Login
@@ -57,7 +63,7 @@ YelpCamp is built with **MEN** (*Mongo, Express, and Node*) stack.
 #### Reviews
 <img src="assets/imgs/review.png" width="100%" alt="Home page">
 
-<hr>
+
 
 ## 🧰Tools
 
@@ -69,7 +75,7 @@ YelpCamp is built with **MEN** (*Mongo, Express, and Node*) stack.
 5.  #### Embedded Javascript
 6.  #### Axios
 7.  #### Joi
-<hr>
+
 
 ## 💻 To run on your local machine:
 ### Prerequisties:
diff --git a/controllers/campgrounds.js b/controllers/campgrounds.js
index 30735ea..be54d66 100644
--- a/controllers/campgrounds.js
+++ b/controllers/campgrounds.js
@@ -3,47 +3,99 @@ const User = require("../models/user")
 const { cloudinary } = require("../cloudinary")
 const mbxGeocoding = require("@mapbox/mapbox-sdk/services/geocoding");
 const mapBoxToken = process.env.MAPBOX_TOKEN;
+const axios = require("axios");
 const geocoder = mbxGeocoding({ accessToken: mapBoxToken });
-mbxGeocoding({ accessToken: mapBoxToken });
-//TODO: MAKE A MIDDLEWARE FOR RENDERING INDEX
+const {config, reverseGeo} = require("../tools/index");
+/*
+** TODO:IMPROVE ACCESSIBLITY
+*/
 module.exports.index = async (req, res) => {
     const result = {};
+    result.results = [];
     const allCampgrounds = await Campground.find({});
     result.allItemsFetched = allCampgrounds.map( camp => camp).length;
     const max = Math.ceil(result.allItemsFetched / 20.0);
-    let {page, limit} = req.query;
+    let {page, limit, q} = req.query;
     page = parseInt(page);
-    limit = parseInt(limit);
-    if(!page || page < 0){
-        page=1;//very first page
-    }
-    if (page > max){
-        page=max;
-    }
-    if(!limit){
-        limit=20;
-    }
-    const startIndex = (page - 1) * limit;
-    const endIndex = page * limit;
-    const campgrounds = await Campground.find().limit(limit).skip(startIndex);
-    //get info for the pagination(prev and next)
-    if(startIndex > 0){
-        result.previous = {
-            page: page - 1,
-            limit
+        limit = parseInt(limit);
+        if(!page || page < 0){
+            page=1;//very first page
         }
-    }
-    if(endIndex < result.allItemsFetched){
-        result.next = {
-            page: page + 1,
-            limit
+        if (page > max){
+            page=max;
+        }
+        if(!limit){
+            limit=20;
+        }
+        const startIndex = (page - 1) * limit;
+        const endIndex = page * limit;
+        //get info for the pagination(prev and next)
+        if(startIndex > 0){
+            result.previous = {
+                page: page - 1,
+                limit
+            }
+        }
+        if(endIndex < result.allItemsFetched){
+            result.next = {
+                page: page + 1,
+                limit
+            }
         }
+        res.cookie('currentPage', page);
+
+    if(!q){
+        //if there is no filter passed just render all campgrounds
+        res.clearCookie('filter');
+        const campgrounds = await Campground.find().limit(limit).skip(startIndex);
+        result.results = campgrounds;
+        return res.render('campgrounds/index', {result});
+    }
+
+    //user filtered campgrounds
+    const queried = await axios.get(`https://developer.nps.gov/api/v1/campgrounds?limit=50&stateCode=${q}`, config);
+    let matchedCampground;  
+    result.filter = q;
+    if(queried.data.data.length) {
+        //If found: save to database or just render if it already exists
+        const campPromises = queried.data.data.map(async function(camp) {
+            //make a more narrow filter for matching
+            if(camp.images[0]){
+                matchedCampground = await Campground.find({$and:[{title: camp.name},{description: camp.description}]});
+                //make a new campground 
+                if(matchedCampground.length){
+                    result.results.push(...matchedCampground);
+                } else {
+                    const campground = new Campground({
+                        location: camp.addresses[0] ? 
+                            `${camp.addresses[0].line1} ${camp.addresses[0].city} ${camp.addresses[0].stateCode}`: 
+                            await reverseGeo([Number.parseFloat( camp.longitude, 10), Number.parseFloat( camp.latitude, 10)]),
+        
+                        title: camp.name,
+        
+                        description: camp.description,
+                        //assign no price if there is no cost
+                        price: camp.fees[0] ? camp.fees[0].cost : 0,
+                        
+                        images: camp.images.map(c => ({ url: c.url})),
+        
+                        geometry: {
+                            type: 'Point',
+                            coordinates: [
+                                camp.longitude,
+                                camp.latitude
+                            ]
+                        }
+                    }) 
+                    await campground.save();
+                    result.results.push(campground);
+                }
+            }
+        });
+        await Promise.all(campPromises);
     }
-    res.cookie('currentPage', page);
-    result.results = campgrounds;
-    //for determining max number of pages
-    res.render('campgrounds/index', {result});
     // res.send(result);
+    res.render('campgrounds/index', {result})
 }
 
 module.exports.renderNewForm = (req, res) => {
@@ -155,17 +207,17 @@ module.exports.editCampground = async (req, res) => {
     const {id} = req.params;
     //make this shorter later
     const campground = await Campground.findByIdAndUpdate(id, {...req.body.campground});//spread each properties
-    const imgs = req.files.map(f => ({ url: f.path, filename: f.filename }))
-    campground.images.push(...imgs)
+    const imgs = req.files.map(f => ({ url: f.path, filename: f.filename }));
+    campground.images.push(...imgs);
     await campground.save();
     if(req.body.deleteImages){
         for(let filename of req.body.deleteImages){
-            await cloudinary.uploader.destroy(filename)
+            await cloudinary.uploader.destroy(filename);
         }
-        await campground.updateOne({$pull: {images: {filename: {$in:  req.body.deleteImages}}}})
+        await campground.updateOne({$pull: {images: {filename: {$in:  req.body.deleteImages}}}});
     }
-    req.flash('success', 'Successfully updated campground!')
-    res.redirect(`/campgrounds/${campground._id}`)
+    req.flash('success', 'Successfully updated campground!');
+    res.redirect(`/campgrounds/${campground._id}`);
 }
 
 module.exports.deleteCampground = async (req, res) => {
diff --git a/models/campground.js b/models/campground.js
index c764d13..0d5b31a 100644
--- a/models/campground.js
+++ b/models/campground.js
@@ -12,11 +12,9 @@ const ImageSchema = new Schema({
 ImageSchema.virtual('thumbnail').get(function () {
     return this.url.replace('/upload', '/upload/w_200')
 })
-ImageSchema.virtual('indexSize').get(function () {
-    return this.url.replace('/upload', '/upload/w_415,h_280')
-})
+
 ImageSchema.virtual('showSize').get(function () {
-    return this.url.replace('/upload', '/upload/h_470,w_600')
+    return this.url.replace('/upload', '/upload/h_480')
 })
 
 const opts = { 
diff --git a/public/javascripts/pagination.js b/public/javascripts/pagination.js
index 0019bcb..59e25e4 100644
--- a/public/javascripts/pagination.js
+++ b/public/javascripts/pagination.js
@@ -4,12 +4,10 @@ const nextBtn = document.querySelector('.page-next');
 const previousContainer = document.querySelector('.prev-btn');
 const nextContainer = document.querySelector('.next-btn');
 let max = Math.ceil(resultLength / 20.0);
-console.log("max page:", max, " length result:", resultLength)
 //update total later according to data
+
 const pageNumber = (total, max, current) => {
     const half = Math.round(max / 2);
-    console.log("total:", total)
-    console.log("half:", half, " current:", current)
     let to = max;
     
     if(current + half >= total){
@@ -19,7 +17,6 @@ const pageNumber = (total, max, current) => {
     }
     
     let from = to - max;
-    console.log("from: ", from, "   to: ", to)
 
     if(current <= 1){
         previousContainer.classList.add('disabled');
@@ -27,20 +24,14 @@ const pageNumber = (total, max, current) => {
     } else {
         previousContainer.removeAttribute('tabindex');
         previousContainer.classList.remove('disabled');
-        // prevBtn.classList.remove('text-muted');
-
     }
-    // alert(current);
-    // alert(total);
+
     if(current === total){
-        // nextBtn.classList.add('text-muted');
-        // nextBtn.removeAttribute('href');
         nextContainer.classList.add('disabled')
     } else {
         nextContainer.classList.remove('disabled');
     }
     
-    
     return Array.from({length: max}, (_, i) => (i + 1) + from)
 }
 
@@ -50,32 +41,29 @@ initialize();//initialize everything for new load
 
 function initialize (){
     let arrayofBtns = pageNumber(max, 5, readCookie());
-    console.log(arrayofBtns)
     generateButtons(pageButton, arrayofBtns);
 }
 
 
 function readCookie() {
-    var allcookies = document.cookie;
+    let allcookies = document.cookie;
     let key, value;
     
     // Get all the cookies pairs in an array
     cookiearray = allcookies.split(';');
-    
     // Now take key value pair out of this array
-    for(var i=0; i<cookiearray.length; i++) {
+    for(let i=0; i<cookiearray.length; i++) {
        key = cookiearray[i].split('=')[0];
        if(key === 'currentPage'){
             value = parseInt(cookiearray[i].split('=')[1]);
        }
     }
     return value;
- }
+}
 
 //calls the new list of pages
 function renderCorrectPages(currentPage){
     //set the new page
-    // localStorage.setItem("currentPage", currentPage);
     document.cookie = `currentPage=${currentPage}`;
     initialize();
 }
@@ -114,7 +102,7 @@ prevBtn.addEventListener('click', function() {
         
 })
 
-    
+//next button
 nextBtn.addEventListener('click', function() {
         if(readCookie() < max){
             paginationHandler.call(
@@ -125,10 +113,10 @@ nextBtn.addEventListener('click', function() {
     }
 })
 
+//apply accent color to current page 
 for(let button of pageButton){
     if(parseInt(button.innerText) === readCookie()){
         button.classList.add('active-btn');
         break;
     }
-}
-
+}
\ No newline at end of file
diff --git a/public/javascripts/searchMode.js b/public/javascripts/searchMode.js
new file mode 100644
index 0000000..6bd6bdd
--- /dev/null
+++ b/public/javascripts/searchMode.js
@@ -0,0 +1,15 @@
+const options = document.querySelectorAll('option');
+const stateLabel = document.querySelector('.state-label')
+let state;
+const stateCode = filter;
+
+//apply selected attribute to filtered state
+for(let option of options){
+    if(option.getAttribute('value') == stateCode){
+        state = option.innerText;
+        option.selected = true;
+        break;
+    }
+}
+
+stateLabel.innerText = state;
diff --git a/public/stylesheets/app.css b/public/stylesheets/app.css
index 456b7af..26f2ce4 100644
--- a/public/stylesheets/app.css
+++ b/public/stylesheets/app.css
@@ -107,6 +107,16 @@
     border-color: var(--univ-light);
 }
 
+.form-select{
+    width: max-content;
+    background-color: var(--univ-light);
+}
+
+.form-select.dark-theme{
+    background-color: var(--univ-dark);
+    color: var(--univ-light);
+}
+
 #map, #cluster-map{
     width: 100%;
 }
@@ -125,4 +135,4 @@
     #map{
         margin: 0;
     }
-}
\ No newline at end of file
+}
diff --git a/seeds/index.js b/seeds/index.js
index bbce30d..3e4943d 100644
--- a/seeds/index.js
+++ b/seeds/index.js
@@ -8,6 +8,7 @@ const axios = require("axios");
 const key = process.env.API_KEY;
 const mainAuth = process.env.OWNER_ID;
 const { cloudinary } = require("../cloudinary");
+const {reverseGeo} = require("../tools/index");
 // const mainAuth = '62040b04c7e98a10d8c2d8ac';
 
 //get the model 
@@ -50,23 +51,6 @@ const processDatas = async () => {
     }
 }
 
-const reverseGeo = async (coordinates) => {
-    try {
-        const geoData = await geocoder.reverseGeocode({
-            query: coordinates,
-            limit: 1    
-        }).send()
-
-        if(geoData.body.features[0]){
-            return geoData.body.features[0].text;
-        } else{
-            return 'NO LOCATION'
-        }
-    } catch (error) {
-        console.log("ERROR!:", error)
-    }
-}
-
 async function upload(images, camp){
     for(let i =0; i< images.length; i++){
         try {
diff --git a/tools/index.js b/tools/index.js
new file mode 100644
index 0000000..c422070
--- /dev/null
+++ b/tools/index.js
@@ -0,0 +1,28 @@
+const mbxGeocoding = require("@mapbox/mapbox-sdk/services/geocoding");
+const mapBoxToken = process.env.MAPBOX_TOKEN;
+const key = process.env.API_KEY;
+const geocoder = mbxGeocoding({ accessToken: mapBoxToken });
+
+module.exports.config = {
+    params: 
+    {
+        api_key : key
+    } 
+};
+
+module.exports.reverseGeo = async (coordinates) => {
+    try {
+        const geoData = await geocoder.reverseGeocode({
+            query: coordinates,
+            limit: 1    
+        }).send()
+
+        if(geoData.body.features[0]){
+            return geoData.body.features[0].text;
+        } else{
+            return 'NO LOCATION'
+        }
+    } catch (error) {
+        console.log("ERROR!:", error)
+    }
+}
diff --git a/views/campgrounds/index.ejs b/views/campgrounds/index.ejs
index 88b93ef..e353c40 100644
--- a/views/campgrounds/index.ejs
+++ b/views/campgrounds/index.ejs
@@ -1,44 +1,101 @@
 <% layout('layouts/boilerplate') %>
 <div id="cluster-map" class="border border-dark"></div>
-<h1 class="title">All Campgrounds</h1>
 
+<% if(result.results.length && !result.filter) {%> 
+    <h1 class="title">All Campgrounds</h1>
+    <nav aria-label="Campgrounds navigation pages" class="fw-bold">
+        <ul class="pagination pagination-sm d-flex justify-content-center">
+        <li class="page-item prev-btn"><a class="page-link page-prev" href="">Prev</a></li>
+        <li class="page-item align-self-center"><a class="page-link page-num" href="">1</a></li>
+        <li class="page-item align-self-center"><a class="page-link page-num" href="">2</a></li>
+        <li class="page-item align-self-center"><a class="page-link page-num" href="">3</a></li>
+        <li class="page-item page-last align-self-center"><a class="page-link page-num" href="">4</a></li>
+        <li class="page-item page-last align-self-center"><a class="page-link page-num" href="">5</a></li>
+        <li class="page-item next-btn align-self-center"><a class="page-link page-next" href="">Next</a></li>
+        </ul>
+    </nav>
+<% } else if(result.filter && result.results.length) {%> 
+    <h1 class="pb-3" class="labelMode">Showing campgrounds at <span class="state-label"></span></h1>
+<% } %> 
 
-<nav aria-label="Campgrounds navigation pages" class="fw-bold">
-    <ul class="pagination pagination-sm d-flex justify-content-center">
-      <li class="page-item prev-btn"><a class="page-link page-prev" href="">Prev</a></li>
-      <li class="page-item align-self-center"><a class="page-link page-num" href="">1</a></li>
-      <li class="page-item align-self-center"><a class="page-link page-num" href="">2</a></li>
-      <li class="page-item align-self-center"><a class="page-link page-num" href="">3</a></li>
-      <li class="page-item page-last align-self-center"><a class="page-link page-num" href="">4</a></li>
-      <li class="page-item page-last align-self-center"><a class="page-link page-num" href="">5</a></li>
-      <li class="page-item next-btn align-self-center"><a class="page-link page-next" href="">Next</a></li>
-    </ul>
-</nav>
-
+<form action="/campgrounds" class="pb-4">
+    <select class="form-select theme-target" name="q" aria-label="Default select example" onchange="this.form.submit()">
+        <option selected disabled aria-disabled="true">Select a state</option>
+        <option value="AL">Alabama</option>
+        <option value="AK">Alaska</option>
+        <option value="AZ">Arizona</option>
+        <option value="AR">Arkansas</option>
+        <option value="CA">California</option>
+        <option value="CO">Colorado</option>
+        <option value="CT">Connecticut</option>
+        <option value="DE">Delaware</option>
+        <option value="FL">Florida</option>
+        <option value="GA">Georgia</option>
+        <option value="HI">Hawaii</option>
+        <option value="ID">Idaho</option>
+        <option value="IL">Illinois</option>
+        <option value="IN">Indiana</option>
+        <option value="IA">Iowa</option>
+        <option value="KS">Kansas</option>
+        <option value="KY">Kentucky</option>
+        <option value="LA">Louisiana</option>
+        <option value="ME">Maine</option>
+        <option value="MD">Maryland</option>
+        <option value="MA">Massachusetts</option>
+        <option value="MI">Michigan</option>
+        <option value="MN">Minnesota</option>
+        <option value="MS">Mississippi</option>
+        <option value="MO">Missouri</option>
+        <option value="MT">Montana</option>
+        <option value="NE">Nebraska</option>
+        <option value="NV">Nevada</option>
+        <option value="NH">New Hampshire</option>
+        <option value="NJ">New Jersey</option>
+        <option value="NM">New Mexico</option>
+        <option value="NY">New York</option>
+        <option value="NC">North Carolina</option>
+        <option value="ND">North Dakota</option>
+        <option value="OH">Ohio</option>
+        <option value="OK">Oklahoma</option>
+        <option value="OR">Oregon</option>
+        <option value="PA">Pennsylvania</option>
+        <option value="RI">Rhode Island</option>
+        <option value="SC">South Carolina</option>
+        <option value="SD">South Dakota</option>
+        <option value="TN">Tennessee</option>
+        <option value="TX">Texas</option>
+        <option value="UT">Utah</option>
+        <option value="VT">Vermont</option>
+        <option value="VA">Virginia</option>
+        <option value="WA">Washington</option>
+        <option value="WV">West Virginia</option>
+        <option value="WI">Wisconsin</option>
+        <option value="WY">Wyoming</option>
+    </select>
+</form>
 
 <div class="gutter">
-    <a href="/campgrounds/new" class="accent">Add Campground</a>
+    <a href="/campgrounds/new" class="accent">Add a Campground</a>
 </div>
-
+<% if(result.results.length) {%> 
 <!-- show each campground -->
     <% for(let campground of result.results) {%>
         <div class="card mb-3 border border-secondary rounded rounded-1 theme-target">
             <div class="row">
-                <div class="col-md-4">
+                <div class="col-md-6 col-lg-4">
                     <!-- campground.images[0].url.includes('cloudinary')? campground.images[0].indexSize : -->
                     <% if(campground.images.length) {%>
-                        <img src="<%= campground.images[0].indexSize %>" alt="" class="img-fluid">
+                        <img src="<%= campground.images[0].url %>" alt="" class="img-fluid">
                     <% } else {%>
                         <img class="img-fluid" src="https://res.cloudinary.com/maranttt/image/upload/v1643679209/YelpCamp/nhzmrsjscjzcll52hpod.jpg" alt="">
                     <% } %>
                 </div>
-
-                <div class="col-md-8">
+                <div class="col-md-6 col-lg-8">
                     <div class="card-body">
                         <h5 class="card-title"><a href="/campgrounds/<%= campground._id %>" class="accent"><%= campground.title %></a></h5>
                             <!-- shorten description if it is long -->
                             <% if(campground.description.length >= 200){ %>
-                                <p class="card-text"><%= campground.description.substring(0, 220) %>...</p>
+                                <p class="card-text"><%= campground.description.substring(0, 190) %>...</p>
                             <% } else {%>
                                 <p class="card-text"><%= campground.description %></p>
                             <% } %> 
@@ -50,13 +107,21 @@
             </div>
         </div>
     <% } %>
-
+<% } else {%> 
+    <h1 class="pt-4">Sorry, no campgrounds to show in <span class="state-label"></span></h1>
+<% } %> 
     <script>
         const mapToken = '<%- process.env.MAPBOX_TOKEN %>';
         //map will be looking for features to search from
         const campgrounds = {features: <%- JSON.stringify(result.results) %>};
         const resultLength = <%-result.allItemsFetched %>;
+        const filter = '<%-result.filter%>';
     </script>
+    <noscript><input type=”submit” value=”Submit”></noscript>
       
     <script src="/javascripts/clusterMap.js"></script>
-    <script src="/javascripts/pagination.js"></script>
\ No newline at end of file
+    <% if(!result.filter) {%> 
+        <script src="/javascripts/pagination.js"></script>
+    <% } else {%> 
+        <script src="/javascripts/searchMode.js"></script>
+    <% } %> 
\ No newline at end of file
diff --git a/views/campgrounds/show.ejs b/views/campgrounds/show.ejs
index ec43136..5b1ce70 100644
--- a/views/campgrounds/show.ejs
+++ b/views/campgrounds/show.ejs
@@ -33,11 +33,13 @@
 
       <ul class="list-group list-group-flush theme-target">
         <li class="list-group-item text-muted theme-target"><%= campground.location %></li>
-        <li class="list-group-item theme-target">Submitted by <%= campground.author.username %></li>
+        <% if(campground.author) {%> 
+          <li class="list-group-item theme-target">Submitted by <%= campground.author.username %></li>
+        <% } %> 
         <li class="list-group-item theme-target">$<%= campground.price %>/night</li>
       </ul>
 
-      <% if(currentUser && campground.author.equals(currentUser._id)){ %> 
+      <% if(currentUser && campground.author && campground.author.equals(currentUser._id)){ %> 
         <div class="card-body">
           <a href="/campgrounds/<%= campground._id%>/edit" class="btn btn-info card-link">Edit</a>
           <form class="d-inline card-link" action="/campgrounds/<%= campground._id%>?_method=DELETE" method="POST" >
diff --git a/views/layouts/boilerplate.ejs b/views/layouts/boilerplate.ejs
index a7f70a6..70ea883 100644
--- a/views/layouts/boilerplate.ejs
+++ b/views/layouts/boilerplate.ejs
@@ -18,7 +18,7 @@
     <%- include('../partials/navbar') %>
     <main class="container my-5">
         <!-- <button id="theme" type="button" class="btn btn-dark pb-0" aria-label="Toggle dark or light mode">Dark Mode <img class="ms-1 pb-1" src="/imgs/moon (1).svg" alt=""></button> -->
-        <div class="form-check form-switch pb-4" id="theme">
+        <div class="form-check form-switch mb-4" id="theme">
             <input class="form-check-input me-2" type="checkbox" role="switch" id="flexSwitchCheckChecked">
             <label id="theme-label" class="form-check-label pt-1" for="flexSwitchCheckChecked">Dark Mode</label>
         </div>