diff --git a/src/css/main.css b/src/css/main.css
index 17f52a675..d851914f9 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -24,7 +24,7 @@
   --white:#fff;
   --gray:#6c757d;
   --gray-dark:#343a40;
-  --primary:#007bff;
+  --primary:#0858A1;
   --secondary:#6c757d;
   --success:#28a745;
   --info:#17a2b8;
@@ -1498,7 +1498,14 @@ button::-moz-focus-inner,input::-moz-focus-inner {
 }
 
 input {
-  line-height:normal
+  border: none;
+  height: 38px;
+  line-height:normal;
+  border:1px solid #ced4da;
+  border-radius: 0.25rem;
+  width: 100%;
+  padding-left: 12px;
+  padding-right: 10px;
 }
 
 input[type="checkbox"],input[type="radio"] {
@@ -1510,6 +1517,14 @@ input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-ou
   height:auto
 }
 
+input:focus {
+  outline: var(--primary) solid 2px !important;
+}
+
+input:focus-visible {
+  outline: var(--primary) solid 2px !important;
+}
+
 fieldset {
   border:1px solid #c0c0c0;
   margin:0 2px;
@@ -3030,9 +3045,9 @@ h1,h2,h3,h4,h5,h6 {
 
 .search-bar {
   width:100%;
-  height:38px;
   overflow:hidden;
-  position:relative
+  position:relative;
+  padding: 4px;
 }
 
 .search-bar .search-bar-options {
diff --git a/src/img/global/icons/cross.svg b/src/img/global/icons/cross.svg
new file mode 100644
index 000000000..580911601
--- /dev/null
+++ b/src/img/global/icons/cross.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.63998 2.77L7.49998 6.63L11.34 2.79C11.4248 2.69972 11.527 2.62749 11.6404 2.57766C11.7538 2.52783 11.8761 2.50141 12 2.5C12.2652 2.5 12.5196 2.60536 12.7071 2.79289C12.8946 2.98043 13 3.23478 13 3.5C13.0023 3.6226 12.9796 3.74439 12.9331 3.85788C12.8867 3.97138 12.8176 4.07419 12.73 4.16L8.83998 8L12.73 11.89C12.8948 12.0512 12.9914 12.2696 13 12.5C13 12.7652 12.8946 13.0196 12.7071 13.2071C12.5196 13.3946 12.2652 13.5 12 13.5C11.8725 13.5053 11.7454 13.484 11.6266 13.4375C11.5078 13.3911 11.4 13.3204 11.31 13.23L7.49998 9.37L3.64998 13.22C3.56549 13.3073 3.46454 13.3769 3.35298 13.425C3.24142 13.4731 3.12144 13.4986 2.99998 13.5C2.73476 13.5 2.48041 13.3946 2.29287 13.2071C2.10534 13.0196 1.99998 12.7652 1.99998 12.5C1.99765 12.3774 2.0204 12.2556 2.06682 12.1421C2.11325 12.0286 2.18239 11.9258 2.26998 11.84L6.15998 8L2.26998 4.11C2.10516 3.94876 2.00852 3.73041 1.99998 3.5C1.99998 3.23478 2.10534 2.98043 2.29287 2.79289C2.48041 2.60536 2.73476 2.5 2.99998 2.5C3.23998 2.503 3.46998 2.6 3.63998 2.77Z" fill="#757575"/>
+</svg>
diff --git a/src/img/global/icons/search.svg b/src/img/global/icons/search.svg
new file mode 100644
index 000000000..9390811ec
--- /dev/null
+++ b/src/img/global/icons/search.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.734 14.255H15.944L15.664 13.985C16.644 12.845 17.234 11.365 17.234 9.755C17.234 6.165 14.324 3.255 10.734 3.255C7.14401 3.255 4.23401 6.165 4.23401 9.755C4.23401 13.345 7.14401 16.255 10.734 16.255C12.344 16.255 13.824 15.665 14.964 14.685L15.234 14.965V15.755L20.234 20.745L21.724 19.255L16.734 14.255ZM10.734 14.255C8.24401 14.255 6.23401 12.245 6.23401 9.755C6.23401 7.265 8.24401 5.255 10.734 5.255C13.224 5.255 15.234 7.265 15.234 9.755C15.234 12.245 13.224 14.255 10.734 14.255Z" fill="#7A7A7A"/>
+</svg>
diff --git a/src/js/common/stories/Button.jsx b/src/js/common/stories/Button.jsx
deleted file mode 100644
index a8c17f021..000000000
--- a/src/js/common/stories/Button.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-// import React from 'react';
-// import PropTypes from 'prop-types';
-// import './button.css';
-
-// /**
-//  * Primary UI component for user interaction
-//  */
-// export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
-//   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-//   return (
-//     <button
-//       type="button"
-//       className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-//       style={backgroundColor && { backgroundColor }}
-//       {...props}
-//     >
-//       {label}
-//     </button>
-//   );
-// };
-
-// Button.propTypes = {
-//   /**
-//    * Is this the principal call to action on the page?
-//    */
-//   primary: PropTypes.bool,
-//   /**
-//    * What background color to use
-//    */
-//   backgroundColor: PropTypes.string,
-//   /**
-//    * How large should the button be?
-//    */
-//   size: PropTypes.oneOf(['small', 'medium', 'large']),
-//   /**
-//    * Button contents
-//    */
-//   label: PropTypes.string.isRequired,
-//   /**
-//    * Optional click handler
-//    */
-//   onClick: PropTypes.func,
-// };
-
-// Button.defaultProps = {
-//   backgroundColor: null,
-//   primary: false,
-//   size: 'medium',
-//   onClick: undefined,
-// };
diff --git a/src/js/common/stories/Button.stories.js b/src/js/common/stories/Button.stories.js
index f0d501f0d..8dd6fbc99 100644
--- a/src/js/common/stories/Button.stories.js
+++ b/src/js/common/stories/Button.stories.js
@@ -2,26 +2,18 @@ import React from 'react';
 import styled from 'styled-components';
 import Button from '../../components/Buttons/BaseButton';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 export default {
   title: 'Design System',
   component: Button,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'centered',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  // argTypes: {
-  //   backgroundColor: { control: 'color' },
-  // },
   args: {
     primary: true,
   },
 };
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const AllButtons = (args) => (
   <ButtonContainer>
     <Button {...Primary.args} primary size="large" label="Primary Large Disabled Button" aria-label="Primary Large Disabled Button" />
diff --git a/src/js/common/stories/Searchbox.stories.js b/src/js/common/stories/Searchbox.stories.js
new file mode 100644
index 000000000..db83d7cc4
--- /dev/null
+++ b/src/js/common/stories/Searchbox.stories.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+import BaseSearchbox from '../../components/Search/BaseSearchbox';
+
+export default {
+  title: 'Design System/Inputs',
+  component: BaseSearchbox,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 340px;
+`;
+
+export const Searchbox = () => (
+  <Container>
+    <BaseSearchbox placeholder="Search by name, office or state"/>
+  </Container>
+);
diff --git a/src/js/components/Buttons/BaseButton.jsx b/src/js/components/Buttons/BaseButton.jsx
index 9f2d025fd..880f9b783 100644
--- a/src/js/components/Buttons/BaseButton.jsx
+++ b/src/js/components/Buttons/BaseButton.jsx
@@ -83,6 +83,7 @@ const Button = ({ primary, size, label, onClick, ...props }) => (
 );
 
 export default Button;
+
 Button.propTypes = {
   primary: PropTypes.bool,
   secondary: PropTypes.bool,
diff --git a/src/js/components/CampaignsHome/CampaignsHomeFilter.jsx b/src/js/components/CampaignsHome/CampaignsHomeFilter.jsx
index 4bc8cff77..ab9871886 100644
--- a/src/js/components/CampaignsHome/CampaignsHomeFilter.jsx
+++ b/src/js/components/CampaignsHome/CampaignsHomeFilter.jsx
@@ -7,7 +7,7 @@ import { renderLog } from '../../common/utils/logging';
 import { SearchTitleTop } from '../../common/components/Style/FilterStyles';
 import StateDropDownCore from '../Filter/StateDropDownCore';
 import SearchBar from '../Search/SearchBar';
-
+import BaseSearchbox from '../../../js/components/Search/BaseSearchbox';
 
 // React functional component example
 function CampaignsHomeFilter (props) {
@@ -16,13 +16,13 @@ function CampaignsHomeFilter (props) {
   // console.log('CampaignsHomeFilter props.listModeFiltersAvailable:', props.listModeFiltersAvailable);
   return (
     <CampaignsHomeFilterWrapper>
-      {(isSearching && searchText) && (
+      {/* {(isSearching && searchText) && (
         <SearchTitleTop>
           Searching for &quot;
           {searchText}
           &quot;
         </SearchTitleTop>
-      )}
+      )} */}
       {!!(listModeFiltersAvailable) && (
         <CampaignsHomeFilterChoices>
           {listModeFiltersAvailable.map((oneFilter) => (
@@ -96,16 +96,16 @@ const styles = () => ({
 
 
 const CampaignsHomeFilterChoices = styled('div')`
-  margin-top: 8px;
+  margin-top: 14px;
 `;
 
 const CampaignsHomeFilterWrapper = styled('div')`
-  margin-top: 48px;
+  margin-top: 20px;
   margin-bottom: 24px;
 `;
 
 const SearchBarWrapper = styled('div')`
-  margin-top: 4px;
+  margin-top: 14px;
   margin-bottom: 8px;
 `;
 
diff --git a/src/js/components/Search/BaseSearchbox.jsx b/src/js/components/Search/BaseSearchbox.jsx
new file mode 100644
index 000000000..ae163190a
--- /dev/null
+++ b/src/js/components/Search/BaseSearchbox.jsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import colors from '../../common/components/Style/Colors';
+import searchIcon from '../../../img/global/icons/search.svg';
+import closeIcon from '../../../img/global/icons/cross.svg';
+
+const SearchWrapper = styled.div`
+  position: relative;
+  display: inline-block;
+  width: 100%;
+`;
+
+const SearchIcon = styled.div`
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+    color: gray; 
+    background-image: url(${searchIcon});
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    width: 24px;
+    height: 24px;
+`;
+
+const ClearButton = styled.div`
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background-image: url(${closeIcon});
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+`;
+
+const SearchInput = styled.input`
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    display: none;
+  }
+
+  border: none;
+  height: 38px;
+  width: 100%;
+  border: 1px solid rgb(206, 212, 218);
+  border-radius: 0.25rem;
+  padding-right: 40px;
+  padding-left: 12px;
+  border-radius: 0.25rem;
+  padding-right: 40px;
+  
+
+  &:focus-visible {
+    border: none;
+    outline: ${colors.primary} solid 2px !important;
+  }
+`;
+
+class BaseSearchbox extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { searchText: '' };
+  }
+
+  handleInputChange = (event) => {
+    this.setState({ searchText: event.target.value }, () => {
+        if (this.props.onChange) {
+            this.props.onChange(event);
+        }
+        if (this.props.onKeyDown) {
+            this.props.onKeyDown(event);
+        }
+        if(this.props.onFocus) {
+            this.props.onFocus(event);
+        }
+    });
+  }
+
+  handleClear = () => {
+    this.setState({ searchText: '' }, () => {
+        if (this.props.onClear) {
+            this.props.onClear();
+        }
+    });
+  }
+
+  render() {
+    return (
+      <SearchWrapper>
+        {!this.state.searchText && <SearchIcon />}
+        <SearchInput 
+            type="search" 
+            placeholder={this.props.placeholder} 
+            value={this.state.searchText} 
+            onChange={this.handleInputChange} 
+            onClear={this.handleClear}
+            maxLength={50}
+        />
+        {this.state.searchText && <ClearButton onClick={this.handleClear}/>}
+      </SearchWrapper>
+    );
+  }
+}
+
+BaseSearchbox.propTypes = {
+    placeholder: PropTypes.string,
+    onChange: PropTypes.func,
+    onKeyDown: PropTypes.func,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    onClear: PropTypes.func,
+};
+
+export default BaseSearchbox;
\ No newline at end of file
diff --git a/src/js/components/Search/SearchBar.jsx b/src/js/components/Search/SearchBar.jsx
index 62006ec60..020900860 100644
--- a/src/js/components/Search/SearchBar.jsx
+++ b/src/js/components/Search/SearchBar.jsx
@@ -1,12 +1,12 @@
-import { CancelOutlined, Search } from '@mui/icons-material';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import styled from 'styled-components';
 import { blurTextFieldAndroid, focusTextFieldAndroid, isIPhoneMiniOrSmaller } from '../../common/utils/cordovaUtils';
 import { renderLog } from '../../common/utils/logging';
 
-/* eslint-disable jsx-a11y/control-has-associated-label  */
+import BaseSearchbox from '../Search/BaseSearchbox';
 
+/* eslint-disable jsx-a11y/control-has-associated-label  */
 export default class SearchBar extends Component {
   constructor (props) {
     super(props);
@@ -21,7 +21,6 @@ export default class SearchBar extends Component {
   }
 
   componentDidMount () {
-    // console.log("SearchBar, this.props.clearSearchTextNow:", this.props.clearSearchTextNow);
     if (this.props.clearSearchTextNow) {
       if (this.props.clearFunction) {
         this.props.clearFunction();
@@ -79,43 +78,20 @@ export default class SearchBar extends Component {
 
   render () {
     renderLog('SearchBar');  // Set LOG_RENDER_EVENTS to log all renders
-    const { clearButton, placeholder, searchButton } = this.props;
+    const { placeholder } = this.props;
     const { searchString } = this.state;
     return (
       <div className="search-bar clearfix">
-        <SearchInput
+        <BaseSearchbox        
           id="search_input"
-          type="text"
-          className="form-control"
           placeholder={placeholder}
           value={searchString}
           onKeyDown={this.handleKeyPress}
           onChange={this.updateResults}
           onFocus={() => focusTextFieldAndroid('SearchBar')}
-          onBlur={blurTextFieldAndroid}
+          onBlur={blurTextFieldAndroid} 
+          onClear={this.clearQuery}
         />
-        <div className="search-bar-options">
-          {(clearButton && searchString && searchString.length > 0) && (
-            <button
-              className="search-clear-btn"
-              onClick={this.clearQuery}
-              type="button"
-              id="search-clear"
-            >
-              <CancelOutlined />
-            </button>
-          )}
-          {(searchButton) && (
-            <button
-              className="search-options-btn"
-              type="button"
-              id="search"
-              style={{ paddingLeft: 0 }}
-            >
-              <Search />
-            </button>
-          )}
-        </div>
       </div>
     );
   }
@@ -129,7 +105,3 @@ SearchBar.propTypes = {
   searchFunction: PropTypes.func.isRequired,
   searchUpdateDelayTime: PropTypes.number.isRequired,
 };
-
-const SearchInput = styled('input')`
-  ${isIPhoneMiniOrSmaller() ? 'font-size: 0.8rem' : ''};
-`;