diff --git a/src/components/UtilityLine/UtilityLine.js b/src/components/UtilityLine/UtilityLine.js
index a55d264c9217b29e85177117bc60253e657e7340..72988b81c16ff7b8eabc38c9b77b573f04a62b1b 100644
--- a/src/components/UtilityLine/UtilityLine.js
+++ b/src/components/UtilityLine/UtilityLine.js
@@ -292,8 +292,10 @@ class UtilityLine extends Component {
       !(this.state.form.account_number) && !this.state.form.utility.startsWith('other')
     );
     if (this.state.form.utility === 'national_grid_gas') {
-      isDisabled = !(this.state.form.account_number && this.state.form.access_code) &&
-        !(this.state.form.account_number && this.state.form.username && this.state.form.password);
+      isDisabled = !(
+        this.state.form.account_number && this.state.form.access_code
+      ) && !(this.state.form.account_number && this.state.form.username
+        && this.state.form.password);
     }
     if (this.state.form.utility.startsWith('con_edison_detail')) {
       isDisabled = !(
diff --git a/src/containers/SearchBar/index.js b/src/containers/SearchBar/index.js
index e2748b310d22d30304b2b59da1b2327162c6b64e..0401db031bac09b8ae2364c2118931a758b2e482 100644
--- a/src/containers/SearchBar/index.js
+++ b/src/containers/SearchBar/index.js
@@ -58,6 +58,21 @@ class SearchBar extends Component {
     this.props.searchBuildings(stateSource);
   }
 
+  handleOnSelected = (viewport, item) => {
+    this.setState({
+      viewport,
+      address: item.place_name,
+      addressFound: true,
+    });
+  }
+
+  handleOnChange = (event) => {
+    this.setState({
+      address: event.target.value,
+      addressFound: false,
+    });
+  }
+
   render() {
     let addressData = '';
     const { viewport } = this.state;
@@ -67,6 +82,7 @@ class SearchBar extends Component {
           {...mapAccess}
           onSelected={this.handleOnSelected}
           hideOnSelect
+          onChange={this.handleOnChange}
           viewport={viewport}
           queryParams={queryParams}
           placeholder="Enter building address ..."
@@ -78,8 +94,7 @@ class SearchBar extends Component {
           type="text"
           value={this.state.address}
           onValue={this.state.disabledAddressSearchBtn === false}
-          onChange=""
-          onClick={this.disableText}
+          onChange={this.handleOnChange}
           className="addressDisplay"
           placeholder="Enter building address ..."
         />
diff --git a/src/containers/SearchBar/styles.css b/src/containers/SearchBar/styles.css
index 9cda773ed52581be7c7c216c4167484837582693..386d97812d0eba8c99046b5e5f2871f5a14f3d1d 100644
--- a/src/containers/SearchBar/styles.css
+++ b/src/containers/SearchBar/styles.css
@@ -34,43 +34,93 @@ li.navbar-input>form {
 }
 
 .addressSearchInput {
-    width: 650px !important;
+    width: 700px !important;
+    position: relative;
 }
 
 .addressDisplay {
     height: 35px;
-    font-size: 14px;
+    font-size: 16px;
     font-weight: bold;
-    width: 90% !important;
+    width: 100% !important;
     padding: 10px;
+    margin-top: 5px;
+    margin-bottom: 5px;
 }
 
 .react-geocoder {
     position: relative;
-    /* width: 70% !important; */
 }
 
 .react-geocoder input {
+    height: 35px;
     width: 100% !important;
     padding: 5px;
     margin-top: 5px;
     margin-bottom: 5px;
+    font-weight: bold;
+    font-size: 16px;
+}
+
+.react-geocoder-results {
+    position: absolute;
+    background: #333333;
+    width: 100% !important;
 }
 
 .react-geocoder-item {
     width: 100% !important;
     margin-left: 0px;
     height: auto !important;
-    padding-bottom: 0 !important;
     border-bottom: 0.5px solid rgba(160, 160, 160, .5) !important;
     height: 30px !important;
     font-weight: 700;
-    padding-top: 1%;
-    padding-bottom: 3%;
-    font-size: 14px !important;
+    padding: 1% 2% 5% 2% !important;
+    font-size: 16px !important;
     margin-left: 0px;
     cursor: pointer;
-    color: #FFFFFF;
+    color: #DDDDDD;
     overflow: visible;
     position: relative;
 }
+
+.react-geocoder-item:hover {
+    color: #FFFFFF;
+    border-bottom: 0.5px solid #555555 !important;
+}
+
+@media screen and (max-width: 992px) {
+    .addressSearchInput {
+        width: 600px !important;
+    }
+    .react-geocoder-item {
+        font-size: 13px !important;
+        font-weight: normal;
+    }
+    .react-geocoder input {
+        font-size: 13px !important;
+        font-weight: normal;
+    }
+    .addressDisplay {
+        height: 35px;
+        font-size: 13px;
+    }
+  }
+
+@media screen and (max-width: 600px) {
+    .addressSearchInput {
+        width: 420px !important;
+    }
+    .react-geocoder-item {
+        font-size: 11px !important;
+        font-weight: normal;
+    }
+    .react-geocoder input {
+        font-size: 11px !important;
+        font-weight: normal;
+    }
+    .addressDisplay {
+        height: 35px;
+        font-size: 11px;
+    }
+  }