diff --git a/package-lock.json b/package-lock.json
index 9ba89bc72..127b1cad6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26335,6 +26335,121 @@
       "version": "1.1.8",
       "requires": {
         "@leafygreen-ui/tokens": "^2.0.0"
+      },
+      "dependencies": {
+        "@leafygreen-ui/tokens": {
+          "version": "2.0.0",
+          "requires": {
+            "@leafygreen-ui/palette": "^3.4.7"
+          }
+        }
+      }
+    },
+    "@leafygreen-ui/search-input": {
+      "version": "2.0.8",
+      "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/search-input/-/search-input-2.0.8.tgz",
+      "integrity": "sha512-ijMpZgyUpOQM1fOnUs1XavIYAcD9P5PNRWp2hprgWMJZp8FrcopsslMJJIDaM00Sdj0MjSDAti9+aXeo+2ZgSw==",
+      "requires": {
+        "@leafygreen-ui/a11y": "^1.4.3",
+        "@leafygreen-ui/emotion": "^4.0.4",
+        "@leafygreen-ui/hooks": "^7.7.5",
+        "@leafygreen-ui/icon": "^11.17.0",
+        "@leafygreen-ui/icon-button": "^15.0.12",
+        "@leafygreen-ui/input-option": "^1.0.5",
+        "@leafygreen-ui/lib": "^10.4.0",
+        "@leafygreen-ui/palette": "^4.0.4",
+        "@leafygreen-ui/polymorphic": "^1.3.2",
+        "@leafygreen-ui/popover": "^11.0.12",
+        "@leafygreen-ui/tokens": "^2.1.1",
+        "@leafygreen-ui/typography": "^16.5.1",
+        "lodash": "^4.17.21",
+        "polished": "^4.2.2"
+      },
+      "dependencies": {
+        "@leafygreen-ui/hooks": {
+          "version": "7.7.5",
+          "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/hooks/-/hooks-7.7.5.tgz",
+          "integrity": "sha512-Spk36yndhplGfCdLl14RWuoDPGYfEgA6AwqbaI4T45i+A2QtDTvdSFyMUkNmDK5vzk5cWmR/SmkRS/o5T9zgMA==",
+          "requires": {
+            "lodash": "^4.17.21"
+          }
+        },
+        "@leafygreen-ui/icon-button": {
+          "version": "15.0.12",
+          "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/icon-button/-/icon-button-15.0.12.tgz",
+          "integrity": "sha512-19tXprK4/jIZq19o6Y2OnPw5ifuLIhpxAJ4/gs/lIFk/4A5PZJOnZzy6ABdiMaFk/1miSjoDQ5B+lncvgAx1gA==",
+          "requires": {
+            "@leafygreen-ui/a11y": "^1.4.2",
+            "@leafygreen-ui/box": "^3.1.4",
+            "@leafygreen-ui/emotion": "^4.0.4",
+            "@leafygreen-ui/icon": "^11.17.0",
+            "@leafygreen-ui/lib": "^10.4.0",
+            "@leafygreen-ui/palette": "^4.0.4",
+            "@leafygreen-ui/tokens": "^2.1.1"
+          }
+        },
+        "@leafygreen-ui/lib": {
+          "version": "10.4.0",
+          "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/lib/-/lib-10.4.0.tgz",
+          "integrity": "sha512-gGZBJ0Mjo2/hHfECbERGJbx1nPFNDqkge7L1K5y5LwBjpiOYjUNa1OsyBRwc9pr+zucdAF2FHSo+EdoT83Mbtg==",
+          "requires": {
+            "@storybook/csf": "^0.1.0",
+            "lodash": "^4.17.21",
+            "prop-types": "^15.7.2"
+          }
+        },
+        "@leafygreen-ui/palette": {
+          "version": "4.0.4",
+          "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/palette/-/palette-4.0.4.tgz",
+          "integrity": "sha512-nuZy2RtKHAGpIKrDduqC8P8PvajJRT1hQURoisYMiB32NmEEHGEhtHw4MlS+Kv92HFA0jxgMdZUHKTXq83BhjA=="
+        },
+        "@leafygreen-ui/popover": {
+          "version": "11.0.12",
+          "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/popover/-/popover-11.0.12.tgz",
+          "integrity": "sha512-zF8axGB+RhpoG0xgb4K/p8ydS5JAEXpwqdLrcrY9r7cAYzxX0F4mhIpYg+oyK2K5TIbgGR/fsFPbhKYsmreuMA==",
+          "requires": {
+            "@leafygreen-ui/emotion": "^4.0.4",
+            "@leafygreen-ui/hooks": "^7.7.5",
+            "@leafygreen-ui/lib": "^10.4.0",
+            "@leafygreen-ui/portal": "^4.1.4",
+            "@leafygreen-ui/tokens": "^2.1.1",
+            "react-transition-group": "^4.4.1"
+          }
+        },
+        "@leafygreen-ui/tokens": {
+          "version": "2.1.1",
+          "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/tokens/-/tokens-2.1.1.tgz",
+          "integrity": "sha512-5mpyxRhp+8aY6eX6UYacDV6PLl3OieWG061ceAn2ThYaanIP64AMbodWifrF/IFMItJPFkwAtfPtJqugOFVb7Q==",
+          "requires": {
+            "@leafygreen-ui/palette": "^4.0.4"
+          }
+        },
+        "@leafygreen-ui/typography": {
+          "version": "16.5.1",
+          "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@leafygreen-ui/typography/-/typography-16.5.1.tgz",
+          "integrity": "sha512-5dentOt4LubXxmkwVVy6ZlUvGsebJsHhZZ9LAlplUz13VkyvS458Bhnog4cqNqvnJjdlWLdO+ZO0/JyYUIIuXw==",
+          "requires": {
+            "@leafygreen-ui/emotion": "^4.0.4",
+            "@leafygreen-ui/icon": "^11.17.0",
+            "@leafygreen-ui/lib": "^10.4.0",
+            "@leafygreen-ui/palette": "^4.0.4",
+            "@leafygreen-ui/polymorphic": "^1.3.2",
+            "@leafygreen-ui/tokens": "^2.1.1"
+          }
+        },
+        "@storybook/csf": {
+          "version": "0.1.1",
+          "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/@storybook/csf/-/csf-0.1.1.tgz",
+          "integrity": "sha512-4hE3AlNVxR60Wc5KSC68ASYzUobjPqtSKyhV6G+ge0FIXU55N5nTY7dXGRZHQGDBPq+XqchMkIdlkHPRs8nTHg==",
+          "requires": {
+            "type-fest": "^2.19.0"
+          }
+        },
+        "type-fest": {
+          "version": "2.19.0",
+          "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/type-fest/-/type-fest-2.19.0.tgz",
+          "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA=="
+        }
       }
     },
     "@leafygreen-ui/search-input": {
diff --git a/src/components/SearchResults/SearchResult.js b/src/components/SearchResults/SearchResult.js
index 26a8b1875..faecfe468 100644
--- a/src/components/SearchResults/SearchResult.js
+++ b/src/components/SearchResults/SearchResult.js
@@ -5,12 +5,13 @@ import styled from '@emotion/styled';
 import { palette } from '@leafygreen-ui/palette';
 import { Body } from '@leafygreen-ui/typography';
 import { theme } from '../../theme/docsTheme';
-import Tag, { searchTagStyle } from '../Tag';
+import Tag, { searchTagStyle, searchTagStyleFeature } from '../Tag';
 import SearchContext from './SearchContext';
 
 const LINK_COLOR = '#494747';
 // Use string for match styles due to replace/innerHTML
 const SEARCH_MATCH_STYLE = `background-color: ${palette.yellow.light2};`;
+const newSearchInput = process.env.GATSBY_TEST_SEARCH_UI === 'true';
 
 const largeResultTitle = css`
   font-size: ${theme.size.default};
@@ -93,7 +94,7 @@ const StyledResultTitle = styled('p')`
 `;
 
 const StyledTag = styled(Tag)`
-  ${searchTagStyle}
+  ${newSearchInput ? searchTagStyleFeature : searchTagStyle}
 `;
 
 const StylingTagContainer = styled('div')`
diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js
index 6c476cf8d..647c53db6 100644
--- a/src/components/SearchResults/SearchResults.js
+++ b/src/components/SearchResults/SearchResults.js
@@ -7,7 +7,7 @@ import Button from '@leafygreen-ui/button';
 import Icon from '@leafygreen-ui/icon';
 import { SearchInput } from '@leafygreen-ui/search-input';
 import { palette } from '@leafygreen-ui/palette';
-import { H1 } from '@leafygreen-ui/typography';
+import { H1, Overline } from '@leafygreen-ui/typography';
 import queryString from 'query-string';
 import useScreenSize from '../../hooks/useScreenSize';
 import { theme } from '../../theme/docsTheme';
@@ -16,7 +16,7 @@ import { getSearchbarResultsFromJSON } from '../../utils/get-searchbar-results-f
 import { escapeHtml } from '../../utils/escape-reserved-html-characters';
 import { searchParamsToURL } from '../../utils/search-params-to-url';
 import { useMarianManifests } from '../../hooks/use-marian-manifests';
-import Tag, { searchTagStyle } from '../Tag';
+import Tag, { searchTagStyle, searchTagStyleFeature } from '../Tag';
 import SearchContext from './SearchContext';
 import SearchFilters from './SearchFilters';
 import SearchResult from './SearchResult';
@@ -31,6 +31,7 @@ const LANDING_PAGE_MARGIN = '40px';
 const ROW_GAP = theme.size.default;
 const SKELETON_BORDER_RADIUS = '12px';
 const SEARCH_RESULT_HEIGHT = '152px';
+const newSearchInput = process.env.GATSBY_TEST_SEARCH_UI === 'true';
 
 const CALC_MARGIN = `calc(50vh - ${LANDING_MODULE_MARGIN} - ${LANDING_PAGE_MARGIN} - ${EMPTY_STATE_HEIGHT} / 2)`;
 
@@ -169,6 +170,7 @@ const StyledSearchResult = styled(SearchResult)`
 const StyledLoadingSkeletonContainer = styled('div')`
   ${searchResultStyling}
   box-shadow: 0 0 ${theme.size.tiny} 0 rgba(231, 238, 236, 1) !important;
+  color: red;
 
   /* inner div padding */
   box-sizing: border-box;
@@ -221,7 +223,12 @@ const FilterBadgesWrapper = styled('div')`
 `;
 
 const StyledTag = styled(Tag)`
-  ${searchTagStyle}
+  ${newSearchInput ? searchTagStyleFeature : searchTagStyle}
+`;
+
+const ResultTag = styled('div')`
+  display: flex;
+  flex-direction: row;
 `;
 
 const MobileSearchButtonWrapper = styled('div')`
@@ -342,20 +349,38 @@ const SearchResults = () => {
                       setSearchField(e.target.value);
                     }}
                   />
+                  <ResultTag style={{ paddingTop: '10px' }}>
+                    <Overline style={{ paddingTop: '11px', paddingRight: '8px' }}>
+                      {searchResults?.length ? searchResults.length : '0'} RESULTS
+                    </Overline>
+                    {!!searchFilter && (
+                      <FilterBadgesWrapper>
+                        {selectedCategory && (
+                          <StyledTag variant="green" onClick={resetFilters}>
+                            {selectedCategory}
+                            <Icon style={{ marginLeft: '8px', marginRight: '-2px' }} glyph="X" />
+                          </StyledTag>
+                        )}
+                        {selectedVersion && <StyledTag variant="blue">{selectedVersion}</StyledTag>}
+                      </FilterBadgesWrapper>
+                    )}
+                  </ResultTag>
                 </>
               ) : (
-                <HeaderText>Search results for "{searchTerm}"</HeaderText>
-              )}
-              {!!searchFilter && (
-                <FilterBadgesWrapper>
-                  {selectedCategory && (
-                    <StyledTag variant="green" onClick={resetFilters}>
-                      {selectedCategory}
-                      <Icon glyph="X" />
-                    </StyledTag>
+                <>
+                  <HeaderText>Search results for "{searchTerm}"</HeaderText>
+                  {!!searchFilter && (
+                    <FilterBadgesWrapper>
+                      {selectedCategory && (
+                        <StyledTag variant="green" onClick={resetFilters}>
+                          {selectedCategory}
+                          <Icon glyph="X" />
+                        </StyledTag>
+                      )}
+                      {selectedVersion && <StyledTag variant="blue">{selectedVersion}</StyledTag>}
+                    </FilterBadgesWrapper>
                   )}
-                  {selectedVersion && <StyledTag variant="blue">{selectedVersion}</StyledTag>}
-                </FilterBadgesWrapper>
+                </>
               )}
               <MobileSearchButtonWrapper>
                 <Button leftGlyph={<Icon glyph={mobileFilterButton.glyph} />} onClick={mobileFilterButton.onClick}>
diff --git a/src/components/Tag.js b/src/components/Tag.js
index f4c94c095..7052f9505 100644
--- a/src/components/Tag.js
+++ b/src/components/Tag.js
@@ -18,6 +18,14 @@ export const searchTagStyle = css`
   margin-right: ${theme.size.small};
 `;
 
+export const searchTagStyleFeature = css`
+  cursor: pointer;
+  height: 26px;
+  padding: 4px 11px 4px 11px;
+  border-radius: 12px;
+  font-size: ${theme.fontSize.tiny};
+  margin-right: ${theme.size.small};
+`;
 const VARIANTS = {
   blue: css`
     background-color: ${palette.blue.light3};
diff --git a/tests/unit/__snapshots__/SearchResults.test.js.snap b/tests/unit/__snapshots__/SearchResults.test.js.snap
index 7aa206f37..d002064c2 100644
--- a/tests/unit/__snapshots__/SearchResults.test.js.snap
+++ b/tests/unit/__snapshots__/SearchResults.test.js.snap
@@ -883,7 +883,7 @@ exports[`Search Results Page considers a given search filter query param and dis
       </a>
     </div>
     <div
-      class="emotion-36 emotion-80"
+      class="emotion-36 emotion-37"
     >
       <h2
         class="emotion-38 emotion-39"
@@ -2357,17 +2357,17 @@ exports[`Search Results Page renders loading images before returning no results
   width: 100%;
 }
 
-.emotion-12:hover>.e1yoi6mj6 {
+.emotion-12:hover>.e1yoi6mj7 {
   opacity: 0.2;
   -webkit-transition: opacity 150ms ease-in;
   transition: opacity 150ms ease-in;
 }
 
-.emotion-12:hover>.e1yoi6mj6:hover {
+.emotion-12:hover>.e1yoi6mj7:hover {
   opacity: 1;
 }
 
-.emotion-12:not(:hover)>.e1yoi6mj6 {
+.emotion-12:not(:hover)>.e1yoi6mj7 {
   opacity: 1;
   -webkit-transition: opacity 150ms ease-in;
   transition: opacity 150ms ease-in;
@@ -2381,6 +2381,7 @@ exports[`Search Results Page renders loading images before returning no results
   place-self: center;
   width: 100%;
   box-shadow: 0 0 4px 0 rgba(231, 238, 236, 1)!important;
+  color: red;
   box-sizing: border-box;
   padding: 15px;
   display: grid;
@@ -3144,17 +3145,17 @@ exports[`Search Results Page renders loading images before returning nonempty re
   width: 100%;
 }
 
-.emotion-12:hover>.e1yoi6mj6 {
+.emotion-12:hover>.e1yoi6mj7 {
   opacity: 0.2;
   -webkit-transition: opacity 150ms ease-in;
   transition: opacity 150ms ease-in;
 }
 
-.emotion-12:hover>.e1yoi6mj6:hover {
+.emotion-12:hover>.e1yoi6mj7:hover {
   opacity: 1;
 }
 
-.emotion-12:not(:hover)>.e1yoi6mj6 {
+.emotion-12:not(:hover)>.e1yoi6mj7 {
   opacity: 1;
   -webkit-transition: opacity 150ms ease-in;
   transition: opacity 150ms ease-in;
@@ -3168,6 +3169,7 @@ exports[`Search Results Page renders loading images before returning nonempty re
   place-self: center;
   width: 100%;
   box-shadow: 0 0 4px 0 rgba(231, 238, 236, 1)!important;
+  color: red;
   box-sizing: border-box;
   padding: 15px;
   display: grid;