diff --git a/public/css/homepage.css b/public/css/homepage.css
index 650f80328..8d520ae22 100755
--- a/public/css/homepage.css
+++ b/public/css/homepage.css
@@ -28,9 +28,15 @@ body {
   display: inline;
 }
 
+@media screen and (max-width: 428px) {
+  .introtext2 {
+    visibility: hidden;
+    color: red;
+  }
+}
 @media screen and (max-width: 374px) {
   .intro_text {
-    font-size: 1.2rem;
+    font-size: 1.4rem;
   }
 }
 
diff --git a/src/components/createListing/createListing.css b/src/components/createListing/createListing.css
index 146b78702..d487c693c 100755
--- a/src/components/createListing/createListing.css
+++ b/src/components/createListing/createListing.css
@@ -483,7 +483,8 @@ span.import-info {
     width: 65%;
   }
   .css-18ozde5-container {
-    width: 65% !important;
+    /* width: 65% !important; */
+    width: 65%;
   }
 }
 
@@ -530,7 +531,8 @@ span.import-info {
     width: 60%;
   }
   .css-18ozde5-container {
-    width: 60% !important;
+    /* width: 60% !important; */
+    width: 60%;
   }
   .confirm-listing-button {
     width: 90px;
diff --git a/src/components/homePage/FilterSearchModal.js b/src/components/homePage/FilterSearchModal.js
index 5929f5c68..d6ce30066 100755
--- a/src/components/homePage/FilterSearchModal.js
+++ b/src/components/homePage/FilterSearchModal.js
@@ -74,11 +74,14 @@ const FilterSearchModal = (props) => {
         <h1>Looking For Something Specific?</h1>
       </div>
       <div className="filter-search-modal-content">
-        <div className="filter-searh-modal-left-container">
+        <div className="filter-search-modal-left-container">
           <div className="filter-search-modal-input-row">
-            <MonetizationOnOutlinedIcon />
-            <h2>Max Price:</h2>
+            <div className="price-label">
+              <MonetizationOnOutlinedIcon />
+              <h2>Max Price:</h2>
+            </div>
             <input
+              className="price-input"
               placeholder="$100"
               type="text"
               value={priceInput}
@@ -86,9 +89,12 @@ const FilterSearchModal = (props) => {
             />
           </div>
           <div className="filter-search-modal-input-row">
-            <PersonOutlineOutlinedIcon />
-            <h2 className="guests">Min Guests:</h2>
+            <div className="guest-label">
+              <PersonOutlineOutlinedIcon />
+              <h2 className="guests">Min Guests:</h2>
+            </div>
             <input
+              className="guest-input"
               type="text"
               value={guestsInput}
               onChange={(e) => handleGuestsChange(e)}
@@ -96,7 +102,7 @@ const FilterSearchModal = (props) => {
             />
           </div>
         </div>
-        <div className="filter-searh-modal-right-container">
+        <div className="filter-search-modal-right-container">
           <div className="filter-search-modal-radio-container">
             <div className="filter-search-modal-radio-row">
               {sortPrice === null || sortPrice === true ? (
@@ -150,8 +156,9 @@ const FilterSearchModal = (props) => {
             </div>
           </div>
         </div>
-        <div className="filter-searh-modal-top-container">
+        <div className="filter-search-modal-top-container">
           <div
+            className="country-container"
             style={{
               display: "flex",
               justifyContent: "space-between",
@@ -160,6 +167,7 @@ const FilterSearchModal = (props) => {
           >
             <h2 style={{ width: "10rem" }}>Country:</h2>
             <Select
+              className="country-selection"
               onChange={(e) => setCountryFilter(e.value)}
               value={countryDropdown.filter(
                 (option) => option.value === countryFilter
@@ -170,6 +178,7 @@ const FilterSearchModal = (props) => {
             />
           </div>
           <div
+            className="state-container"
             style={{
               display: "flex",
               justifyContent: "space-between",
@@ -178,6 +187,7 @@ const FilterSearchModal = (props) => {
           >
             <h2 style={{ width: "10rem" }}>State:</h2>
             <Select
+              className="state-selection"
               onChange={(e) => setStateFilter(e.value)}
               value={
                 countryFilter === "USA"
@@ -194,6 +204,8 @@ const FilterSearchModal = (props) => {
         </div>
       </div>
       <div className="filter-search-modal-button-container">
+        {/* <div className="blur"></div> */}
+
         <button
           onClick={() => {
             handleConfirm();
diff --git a/src/components/homePage/filtersearchmodal.css b/src/components/homePage/filtersearchmodal.css
index 4a7e38120..8a06ce0bf 100755
--- a/src/components/homePage/filtersearchmodal.css
+++ b/src/components/homePage/filtersearchmodal.css
@@ -47,7 +47,7 @@
   padding-top: 1rem;
 }
 
-.filter-searh-modal-left-container {
+.filter-search-modal-left-container {
   display: flex;
   grid-column: 1 / 2;
   grid-row: 2 / 3;
@@ -62,6 +62,12 @@
   margin: 2.5rem 2rem;
   height: 50%;
 }
+.price-label,
+.guest-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
 .filter-search-modal-input-row svg {
   color: rgb(214, 214, 214) !important;
@@ -102,14 +108,14 @@
   border: 2px solid var(--color-green);
 }
 
-.filter-searh-modal-right-container {
+.filter-search-modal-right-container {
   display: flex;
   flex-direction: column;
   grid-column: 2 / 3;
   grid-row: 2 / 3;
 }
 
-.filter-searh-modal-top-container {
+.filter-search-modal-top-container {
   grid-column: 1 / 3;
   grid-row: 1 / 2;
 }
@@ -182,7 +188,7 @@
     margin-right: 0px;
     justify-content: start;
   }
-  .filter-searh-modal-right-container {
+  .filter-search-modal-right-container {
     padding-left: 20px;
   }
 }
@@ -216,14 +222,14 @@
   .filter-search-modal-container {
     height: 50rem;
   }
-  .filter-searh-modal-left-container {
+  .filter-search-modal-left-container {
     width: 100%;
   }
   .filter-search-modal-input-row {
     justify-content: center;
     margin: 1rem;
   }
-  .filter-searh-modal-right-container {
+  .filter-search-modal-right-container {
     width: 100%;
     padding: 0;
   }
@@ -247,12 +253,94 @@
 }
 
 @media screen and (max-width: 500px) {
+  .filter-search-modal-content {
+    margin: 0 1.5em;
+  }
+  .country-container,
+  .state-container {
+    display: flex;
+    flex-direction: column;
+    padding: 0 !important;
+  }
+  .state-container {
+    margin-top: 1em;
+  }
+  .country-container h2 {
+    text-align: left !important;
+  }
+  .state-container h2 {
+    text-align: left !important;
+  }
+  .state-selection,
+  .country-selection {
+    width: 100% !important;
+  }
+
   .filter-search-modal-header h1 {
     font-size: 1.4rem !important;
   }
   .filter-search-modal-header svg {
     font-size: 2.2rem;
   }
+  .filter-search-modal-input-row {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 1em 0;
+  }
+  .price-label,
+  .guest-label {
+    padding-bottom: 1em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .price-input,
+  .guest-input {
+    width: 70% !important;
+    margin: auto;
+    padding: 1em 0 !important;
+  }
+  .filter-search-modal-content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: scroll;
+    /* -ms-overflow-style: none;  IE and Edge */
+    /* scrollbar-width: none;  Firefox */
+  }
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  /* .filter-search-modal-content:-webkit-scrollbar {
+    display: none;
+  } */
+
+  .filter-search-modal-top-container {
+    order: 1;
+    width: 100%;
+  }
+  .filter-search-modal-left-container {
+    order: 2;
+    align-items: flex-start;
+    padding: 1em 0;
+  }
+  .filter-search-modal-right-container {
+    order: 3;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+  .filter-search-modal-radio-container {
+    margin: 0;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+  .filter-search-modal-radio-row {
+    margin: 0.5em;
+  }
+  .filter-search-modal-button-container {
+    position: relative;
+  }
 }
 
 @media screen and (max-width: 400px) {
diff --git a/src/components/homePage/newHome.component.js b/src/components/homePage/newHome.component.js
index 847d54dfe..1fa130532 100755
--- a/src/components/homePage/newHome.component.js
+++ b/src/components/homePage/newHome.component.js
@@ -103,7 +103,7 @@ const NewHome = (props) => {
 
               <div className=" wow fadeInUp" data-wow-delay="0.5s">
                 <Search history={history} />
-                <div className="intro_text">
+                <div className="intro_text introtext2">
                   Find your dream stay without breaking the bank.{" "}
                 </div>
               </div>