diff --git a/craco.config.js b/craco.config.js
index 60d0905f8..0b1fd60b1 100644
--- a/craco.config.js
+++ b/craco.config.js
@@ -94,6 +94,9 @@ module.exports = {
             },
             javascriptEnabled: true,
             math: 'always',
+            paths: [
+              path.resolve(__dirname, 'node_modules/@cfpb/cfpb-core/src'),
+            ],
           },
         },
       },
diff --git a/cypress/e2e/common/filters.cy.js b/cypress/e2e/common/filters.cy.js
index b23a0cbdb..0b7e99c99 100644
--- a/cypress/e2e/common/filters.cy.js
+++ b/cypress/e2e/common/filters.cy.js
@@ -39,12 +39,16 @@ describe('Filter Panel', () => {
       cy.get('#date_received-from').should('be.visible');
 
       cy.log('collapse it');
-      cy.get('.date-filter button.a-btn--link:first').click({ force: true });
+      cy.get('.date-filter > button.o-expandable__header:first').click({
+        force: true,
+      });
 
       cy.get('#date-received-agg #start_date').should('not.exist');
 
       cy.log('open it');
-      cy.get('.date-filter button.a-btn--link:first').click({ force: true });
+      cy.get('.date-filter > button.o-expandable__header:first').click({
+        force: true,
+      });
       cy.log('apply dates');
 
       cy.get('#date_received-from').clear();
diff --git a/package.json b/package.json
index 3026fe234..79cc33f49 100644
--- a/package.json
+++ b/package.json
@@ -32,25 +32,25 @@
   },
   "browserslist": "> 0.2% in @cfpb/browserslist-config stats",
   "devDependencies": {
-    "@babel/cli": "^7.24.5",
-    "@babel/core": "^7.24.5",
-    "@babel/eslint-parser": "^7.24.5",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/runtime": "^7.24.5",
+    "@babel/cli": "^7.24.7",
+    "@babel/core": "^7.24.7",
+    "@babel/eslint-parser": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/runtime": "^7.24.7",
     "@cfpb/browserslist-config": "0.0.2",
     "@cfpb/cfpb-atomic-component": "1.2.0",
-    "@cfpb/cfpb-buttons": "1.2.0",
+    "@cfpb/cfpb-buttons": "1.3.0",
     "@cfpb/cfpb-core": "1.2.0",
-    "@cfpb/cfpb-design-system": "^1.2.0",
+    "@cfpb/cfpb-design-system": "^1.3.2",
     "@cfpb/cfpb-expandables": "^1.2.0",
-    "@cfpb/cfpb-forms": "1.2.0",
+    "@cfpb/cfpb-forms": "1.3.0",
     "@cfpb/cfpb-grid": "1.2.0",
     "@cfpb/cfpb-icons": "^1.2.0",
-    "@cfpb/cfpb-layout": "1.2.0",
-    "@cfpb/cfpb-notifications": "1.2.0",
-    "@cfpb/cfpb-pagination": "1.2.0",
+    "@cfpb/cfpb-layout": "1.3.0",
+    "@cfpb/cfpb-notifications": "1.3.0",
+    "@cfpb/cfpb-pagination": "1.3.0",
     "@cfpb/cfpb-tables": "1.2.0",
-    "@cfpb/cfpb-typography": "1.2.0",
+    "@cfpb/cfpb-typography": "1.3.2",
     "@craco/craco": "^7.1.0",
     "@reduxjs/toolkit": "^2.2.5",
     "@testing-library/cypress": "^10.0.1",
@@ -61,7 +61,7 @@
     "coveralls": "^3.0.9",
     "craco-esbuild": "^0.6.1",
     "craco-less": "^3.0.1",
-    "cypress": "^13.9.0",
+    "cypress": "^13.11.0",
     "d3": "^7.9.0",
     "d3-selection": "^3.0.0",
     "dayjs": "^1.11.10",
@@ -91,7 +91,7 @@
     "postcss-less": "^6.0.0",
     "postcss-preset-env": "^9.5.13",
     "postcss-safe-parser": "^7.0.0",
-    "prettier": "^3.2.4",
+    "prettier": "^3.3.1",
     "prop-types": "^15.5.10",
     "query-string": "^9.0.0",
     "react": "^18.2.0",
diff --git a/src/components/Filters/CompanyReceivedFilter.js b/src/components/Filters/CompanyReceivedFilter.js
index eeb108538..317661f98 100644
--- a/src/components/Filters/CompanyReceivedFilter.js
+++ b/src/components/Filters/CompanyReceivedFilter.js
@@ -49,15 +49,6 @@ export const CompanyReceivedFilter = () => {
     setThroughDate(validThroughDate);
   }, [dateThrough]);
 
-  const handleClear = (period) => {
-    if (period === 'from') {
-      dispatch(changeDates(fieldName, '', throughDate));
-    }
-    if (period === 'through') {
-      dispatch(changeDates(fieldName, fromDate, ''));
-    }
-  };
-
   const handleKeyDownFromDate = (event) => {
     if (event.key === 'Enter') {
       fromRef.current.blur();
@@ -115,7 +106,7 @@ export const CompanyReceivedFilter = () => {
       dayjs(fromDate).isBefore(minDate) ||
       dayjs(fromDate).isAfter(throughDate)
     ) {
-      style.push('a-text-input__error');
+      style.push('a-text-input--error');
     }
     return style.join(' ');
   }, [fromDate, throughDate]);
@@ -126,7 +117,7 @@ export const CompanyReceivedFilter = () => {
       dayjs(throughDate).isAfter(maxDate) ||
       dayjs(throughDate).isBefore(fromDate)
     ) {
-      style.push('a-text-input__error');
+      style.push('a-text-input--error');
     }
     return style.join(' ');
   }, [fromDate, throughDate]);
@@ -142,29 +133,22 @@ export const CompanyReceivedFilter = () => {
             >
               From
             </label>
-            <div className="m-btn-inside-input">
-              <input
-                id={`${fieldName}-from`}
-                className={inputFromClassName}
-                onBlur={handleDateChange}
-                onChange={(evt) => setFromDate(evt.target.value)}
-                onKeyDown={handleKeyDownFromDate}
-                min={minDate}
-                max={maxDate}
-                ref={fromRef}
-                placeholder={DATE_VALIDATION_FORMAT}
-                type="date"
-                value={fromDate}
-              />
-              <button
-                className="a-btn a-btn--link"
-                onClick={() => handleClear('from')}
-              >
-                {getIcon('delete')}
-                <span className="u-visually-hidden">
-                  Clear company received from date filter
-                </span>
-              </button>
+            <div className="o-search-input">
+              <div className="o-search-input__input">
+                <input
+                  id={`${fieldName}-from`}
+                  className={inputFromClassName}
+                  onBlur={handleDateChange}
+                  onChange={(evt) => setFromDate(evt.target.value)}
+                  onKeyDown={handleKeyDownFromDate}
+                  min={minDate}
+                  max={maxDate}
+                  ref={fromRef}
+                  placeholder={DATE_VALIDATION_FORMAT}
+                  type="date"
+                  value={fromDate}
+                />
+              </div>
             </div>
           </li>
           <li>
@@ -174,43 +158,38 @@ export const CompanyReceivedFilter = () => {
             >
               Through
             </label>
-            <div className="m-btn-inside-input">
-              <input
-                id={`${fieldName}-through`}
-                className={inputThroughClassName}
-                onBlur={handleDateChange}
-                onChange={(evt) => setThroughDate(evt.target.value)}
-                onKeyDown={handleKeyDownThroughDate}
-                min={minDate}
-                max={maxDate}
-                placeholder={DATE_VALIDATION_FORMAT}
-                ref={throughRef}
-                type="date"
-                value={throughDate}
-              />
-              <button
-                className="a-btn a-btn--link"
-                onClick={() => handleClear('through')}
-              >
-                {getIcon('delete')}
-                <span className="u-visually-hidden">
-                  Clear company received through date filter
-                </span>
-              </button>
+            <div className="o-search-input">
+              <div className="o-search-input__input">
+                <input
+                  id={`${fieldName}-through`}
+                  className={inputThroughClassName}
+                  onBlur={handleDateChange}
+                  onChange={(evt) => setThroughDate(evt.target.value)}
+                  onKeyDown={handleKeyDownThroughDate}
+                  min={minDate}
+                  max={maxDate}
+                  placeholder={DATE_VALIDATION_FORMAT}
+                  ref={throughRef}
+                  type="date"
+                  value={throughDate}
+                />
+              </div>
             </div>
           </li>
         </ul>
 
-        {errors.length
-          ? errors.map((message, key) => (
+        {errors.length ? (
+          <div className="a-form-alert a-form-alert__error" role="alert">
+            {errors.map((message, key) => (
               <div key={key}>
                 {message}
                 <span aria-hidden="true">
                   {getIcon('delete-round', 'cf-icon-delete-round')}
                 </span>
               </div>
-            ))
-          : null}
+            ))}
+          </div>
+        ) : null}
       </div>
     </CollapsibleFilter>
   );
diff --git a/src/components/Filters/DateFilter.js b/src/components/Filters/DateFilter.js
index ccb9ea111..89be28754 100644
--- a/src/components/Filters/DateFilter.js
+++ b/src/components/Filters/DateFilter.js
@@ -49,24 +49,15 @@ export const DateFilter = () => {
   useEffect(() => {
     // put it in YYYY-MM-DD format
     // validate to make sure it's not invalid
-    const validFromDate = dateFrom ? formatDate(dateFrom) : '';
+    const validFromDate = dateFrom ? formatDate(dateFrom) : minDate;
     setFromDate(validFromDate);
   }, [dateFrom]);
 
   useEffect(() => {
-    const validThroughDate = dateThrough ? formatDate(dateThrough) : '';
+    const validThroughDate = dateThrough ? formatDate(dateThrough) : maxDate;
     setThroughDate(validThroughDate);
   }, [dateThrough]);
 
-  const handleClear = (period) => {
-    if (period === 'from') {
-      dispatch(changeDates(fieldName, minDate, throughDate));
-    }
-    if (period === 'through') {
-      dispatch(changeDates(fieldName, fromDate, maxDate));
-    }
-  };
-
   const handleKeyDownFromDate = (event) => {
     if (event.key === 'Enter') {
       fromRef.current.blur();
@@ -118,7 +109,7 @@ export const DateFilter = () => {
       dayjs(fromDate).isAfter(throughDate) ||
       dayjs(fromDate).isSame(throughDate)
     ) {
-      style.push('a-text-input__error');
+      style.push('a-text-input--error');
     }
     return style.join(' ');
   }, [fromDate, throughDate]);
@@ -130,7 +121,7 @@ export const DateFilter = () => {
       dayjs(throughDate).isBefore(fromDate) ||
       dayjs(throughDate).isSame(fromDate)
     ) {
-      style.push('a-text-input__error');
+      style.push('a-text-input--error');
     }
     return style.join(' ');
   }, [fromDate, throughDate]);
@@ -159,29 +150,25 @@ export const DateFilter = () => {
             >
               From
             </label>
-            <div className="m-btn-inside-input">
-              <input
-                id={`${fieldName}-from`}
-                className={inputFromClassName}
-                onBlur={handleDateChange}
-                onChange={(evt) => setFromDate(evt.target.value)}
-                onKeyDown={handleKeyDownFromDate}
-                min={minDate}
-                max={maxDate}
-                ref={fromRef}
-                placeholder={DATE_VALIDATION_FORMAT}
-                type="date"
-                value={fromDate}
-              />
-              <button
-                className="a-btn a-btn--link"
-                onClick={() => handleClear('from')}
-              >
-                {getIcon('delete')}
-                <span className="u-visually-hidden">
-                  Clear date received from filter
-                </span>
-              </button>
+            <div className="o-search-input">
+              <div className="o-search-input__input">
+                <input
+                  id={`${fieldName}-from`}
+                  className={inputFromClassName}
+                  onBlur={handleDateChange}
+                  onChange={(evt) => {
+                    const value = evt.target.value || minDate;
+                    setFromDate(value);
+                  }}
+                  onKeyDown={handleKeyDownFromDate}
+                  min={minDate}
+                  max={maxDate}
+                  ref={fromRef}
+                  placeholder={DATE_VALIDATION_FORMAT}
+                  type="date"
+                  value={fromDate}
+                />
+              </div>
             </div>
           </li>
           <li>
@@ -191,29 +178,25 @@ export const DateFilter = () => {
             >
               Through
             </label>
-            <div className="m-btn-inside-input">
-              <input
-                id={`${fieldName}-through`}
-                className={inputThroughClassName}
-                onBlur={handleDateChange}
-                onChange={(evt) => setThroughDate(evt.target.value)}
-                onKeyDown={handleKeyDownThroughDate}
-                min={minDate}
-                max={maxDate}
-                placeholder={DATE_VALIDATION_FORMAT}
-                ref={throughRef}
-                type="date"
-                value={throughDate}
-              />
-              <button
-                className="a-btn a-btn--link"
-                onClick={() => handleClear('through')}
-              >
-                {getIcon('delete')}
-                <span className="u-visually-hidden">
-                  Clear date received through filter
-                </span>
-              </button>
+            <div className="o-search-input">
+              <div className="o-search-input__input">
+                <input
+                  id={`${fieldName}-through`}
+                  className={inputThroughClassName}
+                  onBlur={handleDateChange}
+                  onChange={(evt) => {
+                    const value = evt.target.value || minDate;
+                    setThroughDate(value);
+                  }}
+                  onKeyDown={handleKeyDownThroughDate}
+                  min={minDate}
+                  max={maxDate}
+                  placeholder={DATE_VALIDATION_FORMAT}
+                  ref={throughRef}
+                  type="date"
+                  value={throughDate}
+                />
+              </div>
             </div>
           </li>
         </ul>
diff --git a/src/components/Filters/DateFilter.less b/src/components/Filters/DateFilter.less
index bf573e28a..d0e3bd1f9 100644
--- a/src/components/Filters/DateFilter.less
+++ b/src/components/Filters/DateFilter.less
@@ -15,14 +15,8 @@
       &:first-of-type {
         margin-right: @gutter-normal;
       }
-
-      .m-btn-inside-input {
-        .a-text-input {
-          padding-right: @grid_gutter-width;
-        }
-        .a-btn {
-          color: var(--gray);
-        }
+      input {
+        width: 100%;
       }
     }
   }
diff --git a/src/components/Filters/__tests__/__snapshots__/CompanyReceivedFilter.spec.js.snap b/src/components/Filters/__tests__/__snapshots__/CompanyReceivedFilter.spec.js.snap
index 82ceb7b03..34f3a97eb 100644
--- a/src/components/Filters/__tests__/__snapshots__/CompanyReceivedFilter.spec.js.snap
+++ b/src/components/Filters/__tests__/__snapshots__/CompanyReceivedFilter.spec.js.snap
@@ -45,33 +45,24 @@ exports[`component::CompanyReceivedFilter snapshot shows errors 1`] = `
             From
           </label>
           <div
-            className="m-btn-inside-input"
+            className="o-search-input"
           >
-            <input
-              className="a-text-input a-text-input__error"
-              id="company_received-from"
-              max="2020-05-05"
-              min="2011-12-01"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onKeyDown={[Function]}
-              placeholder="M/D/YYYY"
-              type="date"
-              value="2016-01-01"
-            />
-            <button
-              className="a-btn a-btn--link"
-              onClick={[Function]}
+            <div
+              className="o-search-input__input"
             >
-              <svg>
-                error.svg
-              </svg>
-              <span
-                className="u-visually-hidden"
-              >
-                Clear company received from date filter
-              </span>
-            </button>
+              <input
+                className="a-text-input a-text-input--error"
+                id="company_received-from"
+                max="2020-05-05"
+                min="2011-12-01"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                placeholder="M/D/YYYY"
+                type="date"
+                value="2016-01-01"
+              />
+            </div>
           </div>
         </li>
         <li>
@@ -82,47 +73,43 @@ exports[`component::CompanyReceivedFilter snapshot shows errors 1`] = `
             Through
           </label>
           <div
-            className="m-btn-inside-input"
+            className="o-search-input"
           >
-            <input
-              className="a-text-input a-text-input__error"
-              id="company_received-through"
-              max="2020-05-05"
-              min="2011-12-01"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onKeyDown={[Function]}
-              placeholder="M/D/YYYY"
-              type="date"
-              value="2000-01-01"
-            />
-            <button
-              className="a-btn a-btn--link"
-              onClick={[Function]}
+            <div
+              className="o-search-input__input"
             >
-              <svg>
-                error.svg
-              </svg>
-              <span
-                className="u-visually-hidden"
-              >
-                Clear company received through date filter
-              </span>
-            </button>
+              <input
+                className="a-text-input a-text-input--error"
+                id="company_received-through"
+                max="2020-05-05"
+                min="2011-12-01"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                placeholder="M/D/YYYY"
+                type="date"
+                value="2000-01-01"
+              />
+            </div>
           </div>
         </li>
       </ul>
-      <div>
-        'From' date must be less than 'through' date
-        <span
-          aria-hidden="true"
-        >
-          <svg
-            className="cf-icon-svg cf-icon-delete-round"
+      <div
+        className="a-form-alert a-form-alert__error"
+        role="alert"
+      >
+        <div>
+          'From' date must be less than 'through' date
+          <span
+            aria-hidden="true"
           >
-            error-round.svg
-          </svg>
-        </span>
+            <svg
+              className="cf-icon-svg cf-icon-delete-round"
+            >
+              error-round.svg
+            </svg>
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -174,33 +161,24 @@ exports[`component::CompanyReceivedFilter snapshot supports no dates in the Redu
             From
           </label>
           <div
-            className="m-btn-inside-input"
+            className="o-search-input"
           >
-            <input
-              className="a-text-input"
-              id="company_received-from"
-              max="2020-05-05"
-              min="2011-12-01"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onKeyDown={[Function]}
-              placeholder="M/D/YYYY"
-              type="date"
-              value="Invalid Date"
-            />
-            <button
-              className="a-btn a-btn--link"
-              onClick={[Function]}
+            <div
+              className="o-search-input__input"
             >
-              <svg>
-                error.svg
-              </svg>
-              <span
-                className="u-visually-hidden"
-              >
-                Clear company received from date filter
-              </span>
-            </button>
+              <input
+                className="a-text-input"
+                id="company_received-from"
+                max="2020-05-05"
+                min="2011-12-01"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                placeholder="M/D/YYYY"
+                type="date"
+                value="Invalid Date"
+              />
+            </div>
           </div>
         </li>
         <li>
@@ -211,33 +189,24 @@ exports[`component::CompanyReceivedFilter snapshot supports no dates in the Redu
             Through
           </label>
           <div
-            className="m-btn-inside-input"
+            className="o-search-input"
           >
-            <input
-              className="a-text-input"
-              id="company_received-through"
-              max="2020-05-05"
-              min="2011-12-01"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onKeyDown={[Function]}
-              placeholder="M/D/YYYY"
-              type="date"
-              value="Invalid Date"
-            />
-            <button
-              className="a-btn a-btn--link"
-              onClick={[Function]}
+            <div
+              className="o-search-input__input"
             >
-              <svg>
-                error.svg
-              </svg>
-              <span
-                className="u-visually-hidden"
-              >
-                Clear company received through date filter
-              </span>
-            </button>
+              <input
+                className="a-text-input"
+                id="company_received-through"
+                max="2020-05-05"
+                min="2011-12-01"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                placeholder="M/D/YYYY"
+                type="date"
+                value="Invalid Date"
+              />
+            </div>
           </div>
         </li>
       </ul>
diff --git a/src/components/Filters/__tests__/__snapshots__/DateFilter.spec.js.snap b/src/components/Filters/__tests__/__snapshots__/DateFilter.spec.js.snap
index 709fb948f..39c2d983a 100644
--- a/src/components/Filters/__tests__/__snapshots__/DateFilter.spec.js.snap
+++ b/src/components/Filters/__tests__/__snapshots__/DateFilter.spec.js.snap
@@ -60,33 +60,24 @@ exports[`component::DateFilter snapshot shows a warning for April 2017 1`] = `
             From
           </label>
           <div
-            className="m-btn-inside-input"
+            className="o-search-input"
           >
-            <input
-              className="a-text-input"
-              id="date_received-from"
-              max="2020-05-05"
-              min="2011-12-01"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onKeyDown={[Function]}
-              placeholder="M/D/YYYY"
-              type="date"
-              value="2016-01-01"
-            />
-            <button
-              className="a-btn a-btn--link"
-              onClick={[Function]}
+            <div
+              className="o-search-input__input"
             >
-              <svg>
-                error.svg
-              </svg>
-              <span
-                className="u-visually-hidden"
-              >
-                Clear date received from filter
-              </span>
-            </button>
+              <input
+                className="a-text-input"
+                id="date_received-from"
+                max="2020-05-05"
+                min="2011-12-01"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                placeholder="M/D/YYYY"
+                type="date"
+                value="2016-01-01"
+              />
+            </div>
           </div>
         </li>
         <li>
@@ -97,33 +88,24 @@ exports[`component::DateFilter snapshot shows a warning for April 2017 1`] = `
             Through
           </label>
           <div
-            className="m-btn-inside-input"
+            className="o-search-input"
           >
-            <input
-              className="a-text-input"
-              id="date_received-through"
-              max="2020-05-05"
-              min="2011-12-01"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onKeyDown={[Function]}
-              placeholder="M/D/YYYY"
-              type="date"
-              value="2018-01-01"
-            />
-            <button
-              className="a-btn a-btn--link"
-              onClick={[Function]}
+            <div
+              className="o-search-input__input"
             >
-              <svg>
-                error.svg
-              </svg>
-              <span
-                className="u-visually-hidden"
-              >
-                Clear date received through filter
-              </span>
-            </button>
+              <input
+                className="a-text-input"
+                id="date_received-through"
+                max="2020-05-05"
+                min="2011-12-01"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                placeholder="M/D/YYYY"
+                type="date"
+                value="2018-01-01"
+              />
+            </div>
           </div>
         </li>
       </ul>
@@ -229,33 +211,24 @@ exports[`component::DateFilter snapshot shows errors 1`] = `
             From
           </label>
           <div
-            className="m-btn-inside-input"
+            className="o-search-input"
           >
-            <input
-              className="a-text-input a-text-input__error"
-              id="date_received-from"
-              max="2020-05-05"
-              min="2011-12-01"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onKeyDown={[Function]}
-              placeholder="M/D/YYYY"
-              type="date"
-              value="2016-01-01"
-            />
-            <button
-              className="a-btn a-btn--link"
-              onClick={[Function]}
+            <div
+              className="o-search-input__input"
             >
-              <svg>
-                error.svg
-              </svg>
-              <span
-                className="u-visually-hidden"
-              >
-                Clear date received from filter
-              </span>
-            </button>
+              <input
+                className="a-text-input a-text-input--error"
+                id="date_received-from"
+                max="2020-05-05"
+                min="2011-12-01"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                placeholder="M/D/YYYY"
+                type="date"
+                value="2016-01-01"
+              />
+            </div>
           </div>
         </li>
         <li>
@@ -266,33 +239,24 @@ exports[`component::DateFilter snapshot shows errors 1`] = `
             Through
           </label>
           <div
-            className="m-btn-inside-input"
+            className="o-search-input"
           >
-            <input
-              className="a-text-input a-text-input__error"
-              id="date_received-through"
-              max="2020-05-05"
-              min="2011-12-01"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onKeyDown={[Function]}
-              placeholder="M/D/YYYY"
-              type="date"
-              value="2000-01-01"
-            />
-            <button
-              className="a-btn a-btn--link"
-              onClick={[Function]}
+            <div
+              className="o-search-input__input"
             >
-              <svg>
-                error.svg
-              </svg>
-              <span
-                className="u-visually-hidden"
-              >
-                Clear date received through filter
-              </span>
-            </button>
+              <input
+                className="a-text-input a-text-input--error"
+                id="date_received-through"
+                max="2020-05-05"
+                min="2011-12-01"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                placeholder="M/D/YYYY"
+                type="date"
+                value="2000-01-01"
+              />
+            </div>
           </div>
         </li>
       </ul>
@@ -417,33 +381,24 @@ exports[`component::DateFilter snapshot supports no dates in the Redux Store 1`]
             From
           </label>
           <div
-            className="m-btn-inside-input"
+            className="o-search-input"
           >
-            <input
-              className="a-text-input"
-              id="date_received-from"
-              max="2020-05-05"
-              min="2011-12-01"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onKeyDown={[Function]}
-              placeholder="M/D/YYYY"
-              type="date"
-              value="Invalid Date"
-            />
-            <button
-              className="a-btn a-btn--link"
-              onClick={[Function]}
+            <div
+              className="o-search-input__input"
             >
-              <svg>
-                error.svg
-              </svg>
-              <span
-                className="u-visually-hidden"
-              >
-                Clear date received from filter
-              </span>
-            </button>
+              <input
+                className="a-text-input"
+                id="date_received-from"
+                max="2020-05-05"
+                min="2011-12-01"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                placeholder="M/D/YYYY"
+                type="date"
+                value="Invalid Date"
+              />
+            </div>
           </div>
         </li>
         <li>
@@ -454,33 +409,24 @@ exports[`component::DateFilter snapshot supports no dates in the Redux Store 1`]
             Through
           </label>
           <div
-            className="m-btn-inside-input"
+            className="o-search-input"
           >
-            <input
-              className="a-text-input"
-              id="date_received-through"
-              max="2020-05-05"
-              min="2011-12-01"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onKeyDown={[Function]}
-              placeholder="M/D/YYYY"
-              type="date"
-              value="Invalid Date"
-            />
-            <button
-              className="a-btn a-btn--link"
-              onClick={[Function]}
+            <div
+              className="o-search-input__input"
             >
-              <svg>
-                error.svg
-              </svg>
-              <span
-                className="u-visually-hidden"
-              >
-                Clear date received through filter
-              </span>
-            </button>
+              <input
+                className="a-text-input"
+                id="date_received-through"
+                max="2020-05-05"
+                min="2011-12-01"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onKeyDown={[Function]}
+                placeholder="M/D/YYYY"
+                type="date"
+                value="Invalid Date"
+              />
+            </div>
           </div>
         </li>
       </ul>
diff --git a/src/components/Search/PillPanel.less b/src/components/Search/PillPanel.less
index 05b3ec534..58f944d72 100644
--- a/src/components/Search/PillPanel.less
+++ b/src/components/Search/PillPanel.less
@@ -34,7 +34,7 @@
 
   @media @phone {
     flex-direction: column;
-    margin-top: 10px;
+    margin-top: 70px;
     .layout-row {
       padding-left: 0;
     }
diff --git a/src/components/Search/SearchBar.js b/src/components/Search/SearchBar.js
index ae1beb533..81199f96c 100644
--- a/src/components/Search/SearchBar.js
+++ b/src/components/Search/SearchBar.js
@@ -31,7 +31,6 @@ export const SearchBar = ({ debounceWait }) => {
   // handleClear is called whenever the user submits by pressing enter
   // shouldCallClear prevents handleClear from firing a reset after the search is set
   const [shouldCallClear, setShouldCallClear] = useState(true);
-  const isVisible = Boolean(searchText || inputValue);
 
   useEffect(() => {
     setInputValue(searchText);
@@ -113,7 +112,7 @@ export const SearchBar = ({ debounceWait }) => {
             <div className="flex-all typeahead-portal">
               {searchField === 'company' ? (
                 <AsyncTypeahead
-                  ariaLabel="Enter the term you want to search for"
+                  ariaLabel="Enter your search term(s)"
                   htmlId="searchText"
                   defaultValue={searchText}
                   delayWait={debounceWait}
@@ -121,34 +120,31 @@ export const SearchBar = ({ debounceWait }) => {
                   handleClear={onTypeaheadClear}
                   handleSearch={onSearchChange}
                   hasClearButton={true}
+                  hasSearchButton={true}
                   options={dropdownOptions}
                   placeholder="Enter your search term(s)"
                 />
               ) : (
                 <Input
-                  ariaLabel="Enter the term you want to search for"
-                  htmlId="searchText"
                   handleChange={(event) => setInputValue(event.target.value)}
-                  placeholder="Enter your search term(s)"
-                  value={inputValue}
                   handleClear={onClearInput}
                   handlePressEnter={onPressEnter}
-                  isClearVisible={isVisible}
+                  htmlId="searchText"
+                  value={inputValue}
+                  ariaLabel="Enter the term you want to search for"
+                  placeholder="Enter your search term(s)"
                 />
               )}
             </div>
-            <button type="submit" className="a-btn flex-fixed">
-              Search
-            </button>
-
             <a className="u-visually-hidden" href="#search-summary">
               Skip to Results
             </a>
 
             <div className="advanced-container flex-fixed">
               <button className="a-btn a-btn--link" onClick={onAdvancedClicked}>
-                {hasAdvancedSearchTips ? 'Hide ' : 'Show '}
-                advanced search tips
+                {hasAdvancedSearchTips
+                  ? 'Hide advanced search tips'
+                  : 'Show advanced search tips'}
               </button>
             </div>
           </div>
diff --git a/src/components/Search/SearchPanel.less b/src/components/Search/SearchPanel.less
index 479f5694c..92e52521f 100644
--- a/src/components/Search/SearchPanel.less
+++ b/src/components/Search/SearchPanel.less
@@ -8,6 +8,7 @@
 
   @media @phone {
     padding: @gutter-narrow;
+    min-height: 150px;
   }
   background-color: var(--gray-5);
 }
diff --git a/src/components/Typeahead/AsyncTypeahead/AsyncTypeahead.js b/src/components/Typeahead/AsyncTypeahead/AsyncTypeahead.js
index 5ae369b3b..7dbda6ce7 100644
--- a/src/components/Typeahead/AsyncTypeahead/AsyncTypeahead.js
+++ b/src/components/Typeahead/AsyncTypeahead/AsyncTypeahead.js
@@ -8,19 +8,19 @@ import { ClearButton } from '../ClearButton/ClearButton';
 
 export const AsyncTypeahead = ({
   ariaLabel,
-  className,
-  defaultValue,
-  delayWait,
+  defaultValue = '',
+  delayWait = 0,
   htmlId,
-  isDisabled,
+  isDisabled = false,
   handleChange,
   handleClear,
   handleSearch,
-  hasClearButton,
-  maxResults,
-  minLength,
+  hasClearButton = false,
+  hasSearchButton = false,
+  maxResults = 5,
+  minLength = 2,
   options,
-  placeholder,
+  placeholder = 'Enter your search text',
 }) => {
   const ref = useRef();
   const [searchValue, setSearchValue] = useState(defaultValue);
@@ -43,55 +43,65 @@ export const AsyncTypeahead = ({
   };
 
   return (
-    <section className={`typeahead ${className | ''}`}>
-      <div className="m-btn-inside-input input-contains-label">
-        <div
-          className="input-contains-label__before
-                          input-contains-label__before--search"
-        >
-          {getIcon('search')}
-        </div>
-        <label className="u-visually-hidden" htmlFor={htmlId}>
-          {ariaLabel}
-        </label>
-        <Typeahead
-          id={htmlId}
-          minLength={minLength}
-          className="typeahead-selector"
-          defaultInputValue={defaultValue}
-          delay={delayWait}
-          disabled={isDisabled}
-          isLoading={false}
-          ref={ref}
-          onInputChange={(input) => {
-            if (input === '') setIsVisible(false);
-            else setIsVisible(true);
-          }}
-          onSearch={(input) => {
-            setSearchValue(input);
-            handleSearch(input);
-          }}
-          onChange={(selected) => {
-            handleChange(selected);
-            ref.current.clear();
-            setSearchValue('');
-          }}
-          options={options}
-          maxResults={maxResults}
-          placeholder={placeholder}
-          renderMenuItemChildren={(option) => (
-            <li className="typeahead-option body-copy">
-              <HighlightingOption {...option} />
-            </li>
-          )}
-        />
-        {!!isVisible && (
-          <ClearButton
-            onClear={() => {
-              handleTypeaheadClear();
-              setIsVisible(false);
+    <section className="typeahead">
+      <div className="o-search-input">
+        <div className="o-search-input__input">
+          <label
+            aria-label={ariaLabel}
+            className="o-search-input__input-label"
+            htmlFor={htmlId}
+          >
+            {getIcon('search')}
+          </label>
+          <Typeahead
+            id={htmlId}
+            minLength={minLength}
+            className="typeahead-selector"
+            defaultInputValue={defaultValue}
+            delay={delayWait}
+            disabled={isDisabled}
+            inputProps={{
+              id: htmlId,
+              className: 'a-text-input a-text-input__full',
+            }}
+            isLoading={false}
+            ref={ref}
+            onInputChange={(input) => {
+              if (input === '') setIsVisible(false);
+              else setIsVisible(true);
+            }}
+            onSearch={(input) => {
+              setSearchValue(input);
+              handleSearch(input);
+            }}
+            onChange={(selected) => {
+              handleChange(selected);
+              ref.current.clear();
+              setSearchValue('');
             }}
+            options={options}
+            maxResults={maxResults}
+            placeholder={placeholder}
+            renderMenuItemChildren={(option) => (
+              <li className="typeahead-option body-copy">
+                <HighlightingOption {...option} />
+              </li>
+            )}
           />
+
+          {!!isVisible && (
+            <ClearButton
+              onClear={() => {
+                handleTypeaheadClear();
+                setIsVisible(false);
+              }}
+            />
+          )}
+        </div>
+        {!!hasSearchButton && (
+          <button type="submit" className="a-btn">
+            Search
+          </button>
         )}
       </div>
     </section>
@@ -100,28 +110,17 @@ export const AsyncTypeahead = ({
 
 AsyncTypeahead.propTypes = {
   ariaLabel: PropTypes.string.isRequired,
-  className: PropTypes.string,
   defaultValue: PropTypes.string,
   delayWait: PropTypes.number.isRequired,
-  isDisabled: PropTypes.bool.isRequired,
+  isDisabled: PropTypes.bool,
   handleChange: PropTypes.func.isRequired,
   handleClear: PropTypes.func,
   handleSearch: PropTypes.func.isRequired,
   hasClearButton: PropTypes.bool,
+  hasSearchButton: PropTypes.bool,
   htmlId: PropTypes.string.isRequired,
   maxResults: PropTypes.number,
   minLength: PropTypes.number,
   options: PropTypes.array,
   placeholder: PropTypes.string,
 };
-
-AsyncTypeahead.defaultProps = {
-  className: '',
-  defaultValue: '',
-  delayWait: 0,
-  hasClearButton: false,
-  isDisabled: false,
-  maxResults: 5,
-  minLength: 2,
-  placeholder: 'Enter your search text',
-};
diff --git a/src/components/Typeahead/ClearButton/ClearButton.js b/src/components/Typeahead/ClearButton/ClearButton.js
index cc1727528..2afacce87 100644
--- a/src/components/Typeahead/ClearButton/ClearButton.js
+++ b/src/components/Typeahead/ClearButton/ClearButton.js
@@ -4,11 +4,12 @@ import getIcon from '../../iconMap';
 export const ClearButton = ({ onClear }) => {
   return (
     <button
-      className="a-btn a-btn--link"
+      type="reset"
+      title="Clear search"
       onClick={onClear}
       aria-label="clear search"
     >
-      <div>{getIcon('delete')} Clear</div>
+      <div>{getIcon('delete')}</div>
     </button>
   );
 };
diff --git a/src/components/Typeahead/HighlightingOption/HighlightingOption.js b/src/components/Typeahead/HighlightingOption/HighlightingOption.js
index 9d4f42014..d6f0c68c2 100644
--- a/src/components/Typeahead/HighlightingOption/HighlightingOption.js
+++ b/src/components/Typeahead/HighlightingOption/HighlightingOption.js
@@ -7,13 +7,11 @@ export const HighlightingOption = ({ label, position, value }) => {
   }
 
   const start = label.substring(0, position);
-  const match = label.substring(position, value.length);
   const end = label.substring(position + value.length);
-
   return (
     <span>
       {start}
-      <b>{match}</b>
+      <b>{value}</b>
       {end}
     </span>
   );
diff --git a/src/components/Typeahead/HighlightingOption/HighlightingOption.spec.js b/src/components/Typeahead/HighlightingOption/HighlightingOption.spec.js
index 384dd6840..979a56e09 100644
--- a/src/components/Typeahead/HighlightingOption/HighlightingOption.spec.js
+++ b/src/components/Typeahead/HighlightingOption/HighlightingOption.spec.js
@@ -8,7 +8,7 @@ describe('HighlightingOption', () => {
       <HighlightingOption label="Maryland (MD)" position={0} value="mar" />,
     );
 
-    expect(container.innerHTML).toEqual(`<span><b>Mar</b>yland (MD)</span>`);
+    expect(container.innerHTML).toEqual(`<span><b>mar</b>yland (MD)</span>`);
   });
 
   test('Handles position < 0', () => {
@@ -18,4 +18,12 @@ describe('HighlightingOption', () => {
 
     expect(container.innerHTML).toEqual(`<span>Maryland (MD)</span>`);
   });
+
+  test('Renders partially bolded text in the middle', () => {
+    const { container } = render(
+      <HighlightingOption label="Maryland (MD)" position={2} value="ryl" />,
+    );
+
+    expect(container.innerHTML).toEqual(`<span>Ma<b>ryl</b>and (MD)</span>`);
+  });
 });
diff --git a/src/components/Typeahead/Input/Input.js b/src/components/Typeahead/Input/Input.js
index 3fd1e8490..4a0a32f34 100644
--- a/src/components/Typeahead/Input/Input.js
+++ b/src/components/Typeahead/Input/Input.js
@@ -1,5 +1,3 @@
-import '../Typeahead.less';
-import React from 'react';
 import PropTypes from 'prop-types';
 import getIcon from '../../iconMap';
 import { ClearButton } from '../ClearButton/ClearButton';
@@ -12,35 +10,38 @@ export const Input = ({
   handleChange,
   handleClear,
   handlePressEnter,
-  isClearVisible,
   placeholder,
   value,
 }) => {
   return (
-    <section className={`typeahead ${className | ''}`}>
-      <div className="m-btn-inside-input input-contains-label">
-        <div
-          className="input-contains-label__before
-                            input-contains-label__before--search"
+    <div className="o-search-input">
+      <div className="o-search-input__input">
+        <label
+          htmlFor={htmlId}
+          className="o-search-input__input-label"
+          aria-label={ariaLabel}
         >
           {getIcon('search')}
-        </div>
-        <label className="u-visually-hidden" htmlFor={htmlId}>
-          {ariaLabel}
         </label>
         <input
-          type="text"
-          className="a-text-input"
-          disabled={isDisabled}
+          type="search"
           id={htmlId}
+          disabled={isDisabled}
+          value={value}
           onChange={handleChange}
           onKeyDown={handlePressEnter}
+          className={'a-text-input a-text-input__full ' + className}
           placeholder={placeholder}
-          value={value}
+          title={placeholder}
+          autoComplete="off"
+          maxLength="75"
         />
-        {!!isClearVisible && <ClearButton onClear={handleClear} />}
+        <ClearButton onClear={handleClear} />
       </div>
-    </section>
+      <button type="submit" className="a-btn">
+        Search
+      </button>
+    </div>
   );
 };
 Input.propTypes = {
@@ -51,13 +52,11 @@ Input.propTypes = {
   handleClear: PropTypes.func,
   handlePressEnter: PropTypes.func,
   htmlId: PropTypes.string.isRequired,
-  isClearVisible: PropTypes.bool,
   placeholder: PropTypes.string,
   value: PropTypes.string.isRequired,
 };
 
 Input.defaultProps = {
-  isClearVisible: false,
   isDisabled: false,
   placeholder: 'Enter your search text',
 };
diff --git a/src/components/Typeahead/Input/Input.spec.js b/src/components/Typeahead/Input/Input.spec.js
index 8bc4241e3..46b9ddbdc 100644
--- a/src/components/Typeahead/Input/Input.spec.js
+++ b/src/components/Typeahead/Input/Input.spec.js
@@ -26,7 +26,7 @@ describe('Input', () => {
 
   test('Handle when change and enter are called', () => {
     renderComponent();
-    const input = screen.getByRole('textbox');
+    const input = screen.getByRole('searchbox');
     fireEvent.change(input, { target: { value: 'text' } });
     expect(handleChangeMock).toBeCalled();
     fireEvent.click(input);
@@ -34,16 +34,10 @@ describe('Input', () => {
     expect(handleEnterMock).toBeCalled();
   });
 
-  test('When handleClear is not given then clear button is not present', () => {
-    renderComponent();
-    expect(screen.queryByRole('button')).not.toBeInTheDocument();
-  });
-
-  test('When handleClear is  given then clear button is present', () => {
+  test('When handleClear is given then clear button is present', () => {
     const handleClearMock = jest.fn();
     renderComponent(handleClearMock, true);
-    expect(screen.getByRole('button')).toBeDefined();
-    fireEvent.click(screen.getByRole('button'));
+    fireEvent.click(screen.getByRole('button', { name: 'clear search' }));
     expect(handleClearMock).toBeCalled();
   });
 });
diff --git a/src/components/Typeahead/Typeahead.less b/src/components/Typeahead/Typeahead.less
index c5e404ab9..93104ee6d 100644
--- a/src/components/Typeahead/Typeahead.less
+++ b/src/components/Typeahead/Typeahead.less
@@ -6,21 +6,10 @@
       border: solid 2px var(--pacific);
     }
   }
-  .m-btn-inside-input {
-    .a-btn {
-      position: absolute;
-      right: 1em;
-      top: ~'calc(50% - 8px)';
-    }
-    .cf-icon-svg {
-      padding-right: @gutter-minimum * 0.8;
-    }
-  }
   &-selector {
+    width: 100%;
     position: relative;
 
-    // z-index: 99;
-
     ul {
       padding-left: 0;
       border: solid 2px var(--pacific);
@@ -100,6 +89,13 @@
       background-color: var(--gray-10);
     }
   }
+
+  .o-search-input__input {
+    //display: block;
+    &-label {
+      z-index: 1;
+    }
+  }
 }
 
 .input-contains-label__before {
diff --git a/src/components/Typeahead/Typeahead/Typeahead.js b/src/components/Typeahead/Typeahead/Typeahead.js
index aee44d62a..401cd1393 100644
--- a/src/components/Typeahead/Typeahead/Typeahead.js
+++ b/src/components/Typeahead/Typeahead/Typeahead.js
@@ -1,19 +1,17 @@
 import '../Typeahead.less';
-import React, { useRef, useState } from 'react';
+import { ClearButton } from '../ClearButton/ClearButton';
+import { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Typeahead as DropdownTypeahead } from 'react-bootstrap-typeahead';
 import getIcon from '../../iconMap';
 import HighlightingOption from '../HighlightingOption/HighlightingOption';
-import { ClearButton } from '../ClearButton/ClearButton';
 
 export const Typeahead = ({
   ariaLabel,
-  className,
   htmlId,
   isDisabled,
   handleChange,
   handleInputChange,
-  hasClearButton,
   maxResults,
   minLength,
   options,
@@ -21,7 +19,6 @@ export const Typeahead = ({
 }) => {
   const ref = useRef();
   const [input, setInput] = useState('');
-  const isVisible = hasClearButton && input;
 
   const handleClear = () => {
     ref.current.clear();
@@ -29,53 +26,55 @@ export const Typeahead = ({
   };
 
   return (
-    <section className={`typeahead ${className | ''}`}>
-      <div className="m-btn-inside-input input-contains-label">
-        <div
-          className="input-contains-label__before
-                            input-contains-label__before--search"
-        >
-          {getIcon('search')}
+    <section className="typeahead">
+      <div className="o-search-input">
+        <div className="o-search-input__input">
+          <label
+            aria-label={ariaLabel}
+            className="o-search-input__input-label"
+            htmlFor={htmlId}
+          >
+            {getIcon('search')}
+          </label>
+          <DropdownTypeahead
+            id={htmlId}
+            minLength={minLength}
+            className="typeahead-selector"
+            disabled={isDisabled}
+            isLoading={false}
+            ref={ref}
+            onChange={(selection) => {
+              handleChange(selection);
+              handleClear();
+            }}
+            onInputChange={(value) => {
+              handleInputChange(value);
+              setInput(value);
+            }}
+            options={options}
+            maxResults={maxResults}
+            placeholder={placeholder}
+            renderMenuItemChildren={(option) => (
+              <li className="typeahead-option body-copy">
+                <HighlightingOption {...option} />
+              </li>
+            )}
+            inputProps={{
+              id: htmlId,
+              className: 'a-text-input a-text-input__full',
+            }}
+          />
+          {!!input && <ClearButton onClear={handleClear} />}
         </div>
-        <label className="u-visually-hidden" htmlFor={htmlId}>
-          {ariaLabel}
-        </label>
-        <DropdownTypeahead
-          id="zipcode-typeahead"
-          minLength={minLength}
-          className="typeahead-selector"
-          disabled={isDisabled}
-          isLoading={false}
-          ref={ref}
-          onChange={(selection) => {
-            handleChange(selection);
-            handleClear();
-          }}
-          onInputChange={(value) => {
-            handleInputChange(value);
-            setInput(value);
-          }}
-          options={options}
-          maxResults={maxResults}
-          placeholder={placeholder}
-          renderMenuItemChildren={(option) => (
-            <li className="typeahead-option body-copy">
-              <HighlightingOption {...option} />
-            </li>
-          )}
-        />
-        {!!isVisible && <ClearButton onClear={handleClear} />}
       </div>
     </section>
   );
 };
 Typeahead.propTypes = {
   ariaLabel: PropTypes.string.isRequired,
-  className: PropTypes.string,
   isDisabled: PropTypes.bool.isRequired,
   handleChange: PropTypes.func.isRequired,
   handleInputChange: PropTypes.func.isRequired,
-  hasClearButton: PropTypes.bool,
   htmlId: PropTypes.string.isRequired,
   maxResults: PropTypes.number,
   minLength: PropTypes.number,
@@ -84,8 +83,6 @@ Typeahead.propTypes = {
 };
 
 Typeahead.defaultProps = {
-  className: '',
-  hasClearButton: false,
   isDisabled: false,
   maxResults: 5,
   minLength: 2,