diff --git a/package-lock.json b/package-lock.json
index a349ccca..59841568 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1363,6 +1363,14 @@
         "meow": "5.0.0",
         "resolve-from": "5.0.0",
         "resolve-global": "1.0.0"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "4.17.11",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
+          "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
+          "dev": true
+        }
       }
     },
     "@commitlint/config-angular": {
@@ -1387,6 +1395,14 @@
       "dev": true,
       "requires": {
         "lodash": "4.17.11"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "4.17.11",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
+          "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
+          "dev": true
+        }
       }
     },
     "@commitlint/execute-rule": {
@@ -1428,6 +1444,14 @@
         "@commitlint/rules": "^7.6.0",
         "babel-runtime": "^6.23.0",
         "lodash": "4.17.11"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "4.17.11",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
+          "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
+          "dev": true
+        }
       }
     },
     "@commitlint/load": {
@@ -1442,6 +1466,14 @@
         "cosmiconfig": "^5.2.0",
         "lodash": "4.17.11",
         "resolve-from": "^5.0.0"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "4.17.11",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
+          "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
+          "dev": true
+        }
       }
     },
     "@commitlint/message": {
@@ -1753,6 +1785,14 @@
         "lodash": "4.17.11",
         "resolve-from": "^5.0.0",
         "resolve-global": "^1.0.0"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "4.17.11",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
+          "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
+          "dev": true
+        }
       }
     },
     "@commitlint/rules": {
@@ -16022,9 +16062,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.11",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
-      "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
     "lodash-es": {
@@ -16051,6 +16091,12 @@
       "integrity": "sha1-+CbJtOKoUR2E46yinbBeGk87cqk=",
       "dev": true
     },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
+      "dev": true
+    },
     "lodash.escaperegexp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz",
diff --git a/package.json b/package.json
index 3b1856e1..b9d87916 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,8 @@
     "classnames": "^2.2.5",
     "query-string": "^5.1.1",
     "react-instantsearch-dom": "^6.8.3",
-    "react-loading-skeleton": "^2.1.1"
+    "react-loading-skeleton": "^2.1.1",
+    "lodash.debounce": "^4.0.8"
   },
   "jest": {
     "collectCoverageFrom": [
@@ -86,14 +87,14 @@
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
-    "redux": "4.0.5",
+    "redux": "^4.0.5",
     "@fortawesome/free-solid-svg-icons": "^5.8.1",
     "@fortawesome/react-fontawesome": "^0.1.4",
     "algoliasearch": "^4.8.5",
     "classnames": "^2.2.5",
     "query-string": "^5.1.1",
     "react-instantsearch-dom": "^6.8.3",
-    "react-loading-skeleton": "^2.1.1"
-  },
-  "dependencies": {}
+    "react-loading-skeleton": "^2.1.1",
+    "lodash.debounce": "^4.0.8"
+  }
 }
diff --git a/src/course-search/FacetDropdown.jsx b/src/course-search/FacetDropdown.jsx
index a1df96bb..049631e0 100644
--- a/src/course-search/FacetDropdown.jsx
+++ b/src/course-search/FacetDropdown.jsx
@@ -3,17 +3,17 @@ import PropTypes from 'prop-types';
 import { Dropdown } from '@edx/paragon';
 import classNames from 'classnames';
 
-const FacetDropdown = ({ title, items, isBold }) => (
+const FacetDropdown = ({
+  title,
+  items,
+  isBold,
+  type,
+}) => (
   <div className="facet-list">
-    <Dropdown className="mb-0 mr-md-3">
+    <Dropdown className={classNames('mb-0 mr-md-3', type)}>
       <Dropdown.Toggle
-        className={
-          classNames(
-            'bg-white', 'text-capitalize', 'rounded-0', 'border-0',
-            'd-flex', 'justify-content-between', 'align-items-center', 'text-dark',
-            { 'font-weight-bold': isBold },
-          )
-        }
+        variant="inverse-primary"
+        className={classNames({ 'font-weight-bold': isBold })}
       >
         {title}
       </Dropdown.Toggle>
@@ -24,10 +24,15 @@ const FacetDropdown = ({ title, items, isBold }) => (
   </div>
 );
 
+FacetDropdown.defaultProps = {
+  type: undefined,
+};
+
 FacetDropdown.propTypes = {
   title: PropTypes.string.isRequired,
   items: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
   isBold: PropTypes.bool.isRequired,
+  type: PropTypes.string,
 };
 
 export default FacetDropdown;
diff --git a/src/course-search/FacetItem.jsx b/src/course-search/FacetItem.jsx
index 669ff951..9a619ce4 100644
--- a/src/course-search/FacetItem.jsx
+++ b/src/course-search/FacetItem.jsx
@@ -6,15 +6,12 @@ import classNames from 'classnames';
 const FacetItem = ({
   handleInputOnChange, item, isChecked,
 }) => (
-  <Dropdown.Item
-    key={item.label}
-    as="label"
-    className="mb-0 py-3"
-  >
+  <Dropdown.Item as="label" className="mb-0 py-3">
     <Input
       type="checkbox"
       checked={isChecked}
       onChange={() => handleInputOnChange(item)}
+      className="position-relative mr-2"
     />
     <span className={classNames('facet-item-label', { 'is-refined': isChecked })}>
       {item.label}
diff --git a/src/course-search/FacetListBase.jsx b/src/course-search/FacetListBase.jsx
index c9100ca3..0edadb4a 100644
--- a/src/course-search/FacetListBase.jsx
+++ b/src/course-search/FacetListBase.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import { NO_OPTIONS_FOUND } from './data/constants';
 import FacetDropdown from './FacetDropdown';
+import TypeaheadFacetDropdown from './TypeaheadFacetDropdown';
 import FacetItem from './FacetItem';
 import { SearchContext } from './SearchContext';
 import {
@@ -16,6 +17,8 @@ const FacetListBase = ({
   isCheckedField,
   items,
   title,
+  typeaheadOptions,
+  searchForItems,
 }) => {
   /**
    * Handles when a facet option is toggled by either updating the appropriate
@@ -44,8 +47,8 @@ const FacetListBase = ({
 
   const renderItems = useCallback(
     () => {
-      if (!items || !items.length) {
-        return <span className="py-2 px-2">{NO_OPTIONS_FOUND}</span>;
+      if (!items?.length) {
+        return <span className="p-2 d-block">{NO_OPTIONS_FOUND}</span>;
       }
 
       return items.map(item => {
@@ -64,6 +67,18 @@ const FacetListBase = ({
     [items],
   );
 
+  if (typeaheadOptions) {
+    return (
+      <TypeaheadFacetDropdown
+        items={renderItems()}
+        title={title}
+        isBold={isBold}
+        options={typeaheadOptions}
+        searchForItems={searchForItems}
+      />
+    );
+  }
+
   return (
     <FacetDropdown
       items={renderItems()}
@@ -75,6 +90,8 @@ const FacetListBase = ({
 
 FacetListBase.defaultProps = {
   isCheckedField: null,
+  typeaheadOptions: null,
+  searchForItems: null,
 };
 
 FacetListBase.propTypes = {
@@ -84,6 +101,12 @@ FacetListBase.propTypes = {
   isCheckedField: PropTypes.string,
   items: PropTypes.arrayOf(PropTypes.shape()).isRequired,
   title: PropTypes.string.isRequired,
+  typeaheadOptions: PropTypes.shape({
+    placeholder: PropTypes.string.isRequired,
+    ariaLabel: PropTypes.string.isRequired,
+    minLength: PropTypes.number.isRequired,
+  }),
+  searchForItems: PropTypes.func,
 };
 
 export default FacetListBase;
diff --git a/src/course-search/MobileFilterMenu.jsx b/src/course-search/MobileFilterMenu.jsx
index 2dd4d051..c36f76e7 100644
--- a/src/course-search/MobileFilterMenu.jsx
+++ b/src/course-search/MobileFilterMenu.jsx
@@ -70,7 +70,7 @@ export const MobileFilterMenuBase = ({ children, className, items }) => {
             </div>
             <div className="modal-footer py-3">
               <div className="col">
-                <ClearCurrentRefinements className="bg-white btn-block text-dark" variant="link" />
+                <ClearCurrentRefinements className="btn-block" variant="inverse-primary" />
               </div>
               <div className="col">
                 <Button
diff --git a/src/course-search/SearchFilters.jsx b/src/course-search/SearchFilters.jsx
index abff23a3..973391d2 100644
--- a/src/course-search/SearchFilters.jsx
+++ b/src/course-search/SearchFilters.jsx
@@ -41,7 +41,7 @@ const SearchFilters = () => {
   const searchFacets = useMemo(
     () => {
       const filtersFromRefinements = searchFacetFilters.map(({
-        title, attribute, isSortedAlphabetical,
+        title, attribute, isSortedAlphabetical, typeaheadOptions,
       }) => (
         <FacetListRefinement
           key={attribute}
@@ -57,6 +57,8 @@ const SearchFilters = () => {
           refinementsFromQueryParams={refinementsFromQueryParams}
           defaultRefinement={refinementsFromQueryParams[attribute]}
           facetValueType="array"
+          typeaheadOptions={typeaheadOptions}
+          searchable={!!typeaheadOptions}
         />
       ));
       return (
diff --git a/src/course-search/SearchHeader.jsx b/src/course-search/SearchHeader.jsx
index e6260080..6430fc04 100644
--- a/src/course-search/SearchHeader.jsx
+++ b/src/course-search/SearchHeader.jsx
@@ -23,9 +23,7 @@ const SearchHeader = () => {
             />
           </Col>
           <Col xs={12}>
-            <SearchFilters
-              className="mb-3"
-            />
+            <SearchFilters className="mb-3" />
           </Col>
         </Row>
       </Container>
diff --git a/src/course-search/TypeaheadFacetDropdown.jsx b/src/course-search/TypeaheadFacetDropdown.jsx
new file mode 100644
index 00000000..3fa59fcf
--- /dev/null
+++ b/src/course-search/TypeaheadFacetDropdown.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import debounce from 'lodash.debounce';
+import { Input } from '@edx/paragon';
+
+import FacetDropdown from './FacetDropdown';
+
+const TypeaheadFacetDropdown = ({
+  title,
+  items,
+  isBold,
+  options,
+  searchForItems,
+}) => {
+  const handleSearch = debounce((value) => {
+    // when user is erasing the input and input is empty we need to reset the filtering
+    if (value.length >= options.minLength || value.length === 0) {
+      searchForItems(value);
+    }
+  }, 200);
+
+  const transformMenuOptions = menuOptions => (
+    <>
+      <div className="pr-2 pl-2 pb-2">
+        <Input
+          autoFocus
+          type="search"
+          className="typeahead-dropdown-input"
+          onChange={event => handleSearch(event.currentTarget.value)}
+          placeholder={options.placeholder}
+          aria-label={options.ariaLabel}
+        />
+      </div>
+      <div className="typeahead-dropdown-menu-scrollable-items">
+        {menuOptions}
+      </div>
+    </>
+  );
+
+  return (
+    <FacetDropdown
+      items={transformMenuOptions(items)}
+      title={title}
+      isBold={isBold}
+      type="typeahead"
+    />
+  );
+};
+
+TypeaheadFacetDropdown.propTypes = {
+  title: PropTypes.string.isRequired,
+  items: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  isBold: PropTypes.bool.isRequired,
+  options: PropTypes.shape({
+    placeholder: PropTypes.string.isRequired,
+    ariaLabel: PropTypes.string.isRequired,
+    minLength: PropTypes.number.isRequired,
+  }).isRequired,
+  searchForItems: PropTypes.func.isRequired,
+};
+
+export default TypeaheadFacetDropdown;
diff --git a/src/course-search/data/constants.js b/src/course-search/data/constants.js
index c009e359..4473ab0d 100644
--- a/src/course-search/data/constants.js
+++ b/src/course-search/data/constants.js
@@ -1,6 +1,15 @@
 export const SHOW_ALL_NAME = 'showAll';
 
 export const SEARCH_FACET_FILTERS = [
+  {
+    attribute: 'skill_names',
+    title: 'Skills',
+    typeaheadOptions: {
+      placeholder: 'Find a skill...',
+      ariaLabel: 'Type to find a skill',
+      minLength: 3,
+    },
+  },
   {
     attribute: 'subjects',
     title: 'Subject',
diff --git a/src/course-search/styles/_FacetList.scss b/src/course-search/styles/_FacetList.scss
index f0952516..6ffda719 100644
--- a/src/course-search/styles/_FacetList.scss
+++ b/src/course-search/styles/_FacetList.scss
@@ -1,21 +1,9 @@
+$facet-dropdown-max-height: 250px;
+
 .facet-list {
   .dropdown {
     @extend .mb-3;
 
-    .dropdown-toggle {
-      text-align: left;
-      padding-left: 10px;
-      padding-right: 10px;
-
-      &:before {
-        border-radius: 0;
-      }
-
-      &:after {
-        margin-left: 10px;
-      }
-    }
-
     .facet-item-label {
       font-weight: normal;
 
@@ -29,8 +17,8 @@
     }
 
     .dropdown-menu {
-      max-height: 250px;
-      overflow: scroll;
+      max-height: $facet-dropdown-max-height;
+      overflow-y: scroll;
       max-width: 420px;
       width: max-content;
 
@@ -40,4 +28,16 @@
       }
     }
   }
+
+  .typeahead {
+    .dropdown-menu {
+      max-height: unset;
+      overflow-y: unset;
+
+      .typeahead-dropdown-menu-scrollable-items {
+        max-height: $facet-dropdown-max-height;
+        overflow-y: scroll;
+      }
+    }
+  }
 }
diff --git a/src/course-search/styles/_MobileSearchFilters.scss b/src/course-search/styles/_MobileSearchFilters.scss
index 33801461..8553e1f6 100644
--- a/src/course-search/styles/_MobileSearchFilters.scss
+++ b/src/course-search/styles/_MobileSearchFilters.scss
@@ -35,20 +35,13 @@
       @extend .border-bottom;
       @extend .py-3;
       width: 100%;
-
-      &:after {
-        position: table;
-        float: right;
-        height: 100%;
-        vertical-align: middle;
-      }
     }
 
     &:first-child {
       border: none;
     }
 
-    .dropdown-menu {
+    .dropdown-menu, .typeahead-dropdown-menu-scrollable-items {
       position: relative;
       width: 100%;
       box-shadow: none;
diff --git a/src/course-search/tests/ClearCurrentRefinements.test.jsx b/src/course-search/tests/ClearCurrentRefinements.test.jsx
index f5d10b92..0d597cf6 100644
--- a/src/course-search/tests/ClearCurrentRefinements.test.jsx
+++ b/src/course-search/tests/ClearCurrentRefinements.test.jsx
@@ -17,7 +17,7 @@ describe('<ClearCurrentRefinements />', () => {
 
   test('dispatches the clear refinements action on click', async () => {
     const spy = jest.spyOn(actions, 'clearRefinementsAction');
-    renderWithRouter(<SearchData><ClearCurrentRefinements /></SearchData>);
+    renderWithRouter(<SearchData><ClearCurrentRefinements variant="primary" /></SearchData>);
 
     // click a specific refinement to remove it
     fireEvent.click(screen.queryByText(CLEAR_ALL_TEXT));
diff --git a/src/course-search/tests/FacetListBase.test.jsx b/src/course-search/tests/FacetListBase.test.jsx
index 2ac455c8..d2d8f6cb 100644
--- a/src/course-search/tests/FacetListBase.test.jsx
+++ b/src/course-search/tests/FacetListBase.test.jsx
@@ -15,6 +15,7 @@ const propsForNoItems = {
   attribute: SHOW_ALL_NAME,
   isBold: true,
   facetValueType: 'bool',
+  searchForItems: () => {},
 };
 
 const FREE_LABEL = 'Free';
@@ -34,6 +35,21 @@ const propsWithItems = {
     [FACET_ATTRIBUTES.SUBJECTS]: [SUBJECTS.COMMUNICATION],
     page: 3,
   },
+  searchForItems: () => {},
+};
+const searchableDropdownProps = {
+  title: 'Skills',
+  attribute: 'skill_names',
+  facetValueType: 'array',
+  items: [{ label: 'Blockchain', value: ['Blockchain'] }, { label: 'Cryptocurrency', value: ['Cryptocurrency'] }],
+  searchForItems: jest.fn(),
+  searchable: true,
+  isBold: true,
+  typeaheadOptions: {
+    placeholder: 'Find a skill...',
+    ariaLabel: 'Type to find a skill',
+    minLength: 3,
+  },
 };
 
 describe('<FacetListBase />', () => {
@@ -125,4 +141,40 @@ describe('<FacetListBase />', () => {
     // assert page was deleted and subjects were not
     expect(history.location.search).toEqual('?showAll=1&subjects=Communication');
   });
+
+  test('renders a typeahead dropdown', async () => {
+    const { container } = renderWithRouter(<SearchData><FacetListBase {...searchableDropdownProps} /></SearchData>);
+
+    // assert the "no options" message does not show
+    expect(screen.queryByText(NO_OPTIONS_FOUND)).not.toBeInTheDocument();
+
+    // open the typeahead dropdown menu
+    await act(async () => {
+      fireEvent.click(screen.queryByText('Skills'));
+    });
+    expect(screen.queryByPlaceholderText('Find a skill...')).toBeInTheDocument();
+    expect(screen.queryByText('Blockchain')).toBeInTheDocument();
+    expect(screen.queryByText('Cryptocurrency')).toBeInTheDocument();
+
+    expect(container.querySelector('div.facet-list .typeahead.dropdown')).toBeInTheDocument();
+  });
+
+  test('typeahead dropdown calls searchForItems with correct arguments', async () => {
+    renderWithRouter(<SearchData><FacetListBase {...searchableDropdownProps} /></SearchData>);
+
+    // open the typeahead dropdown menu
+    await act(async () => {
+      fireEvent.click(screen.queryByText('Skills'));
+    });
+
+    // input some search text
+    await act(async () => {
+      fireEvent.change(screen.queryByPlaceholderText('Find a skill...'), { target: { value: 'Blockchain' } });
+    });
+
+    await new Promise((r) => setTimeout(r, 210));
+
+    expect(searchableDropdownProps.searchForItems).toHaveBeenCalledTimes(1);
+    expect(searchableDropdownProps.searchForItems).toHaveBeenCalledWith('Blockchain');
+  });
 });
diff --git a/src/course-search/tests/FacetListRefinement.test.jsx b/src/course-search/tests/FacetListRefinement.test.jsx
index 4909c1b1..b6f85c5c 100644
--- a/src/course-search/tests/FacetListRefinement.test.jsx
+++ b/src/course-search/tests/FacetListRefinement.test.jsx
@@ -17,6 +17,7 @@ const propsForNoRefinements = {
   facetValueType: 'array',
   refinementsFromQueryParams: {},
   facetName: 'subjects',
+  searchForItems: () => {},
 };
 
 const propsForRefinements = {
@@ -29,6 +30,7 @@ const propsForRefinements = {
   }],
   facetValueType: 'array',
   refinementsFromQueryParams: {},
+  searchForItems: () => {},
 };
 
 const propsForActiveRefinements = {