diff --git a/src/Explorer/Controls/InputTypeahead/InputTypeahead.less b/src/Explorer/Controls/InputTypeahead/InputTypeahead.less
index e56bfaa51..1d68e3b7e 100644
--- a/src/Explorer/Controls/InputTypeahead/InputTypeahead.less
+++ b/src/Explorer/Controls/InputTypeahead/InputTypeahead.less
@@ -5,6 +5,9 @@
     display: inline-block;
     width: 100%;
 
+    .input-type-head-text-field {
+        width: 100%;
+    }
     textarea {
         width: 100%;
         line-height: 1;
@@ -21,4 +24,11 @@
         }
     }
 }
-
+.input-typeahead-chocies-container {
+    border: 1px solid lightgrey;
+    padding: 5px 10px 5px 10px;
+    cursor: pointer;
+    .choice-caption{
+        font-size: 14px;
+    }
+}
\ No newline at end of file
diff --git a/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx b/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
index 69f01a745..2e9a2d104 100644
--- a/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
+++ b/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
@@ -6,14 +6,13 @@
  *   typeaheadOverrideOptions: { dynamic:false }
  *
  */
-import "jquery-typeahead";
+import { getTheme, IconButton, IIconProps, List, Stack, TextField } from "@fluentui/react";
 import * as React from "react";
-import { KeyCodes } from "../../../Common/Constants";
 import "./InputTypeahead.less";
 
 export interface Item {
   caption: string;
-  value: any;
+  value: string;
 }
 
 /**
@@ -75,170 +74,125 @@ export interface InputTypeaheadComponentProps {
   useTextarea?: boolean;
 }
 
-interface OnClickItem {
-  matchedKey: string;
-  value: any;
-  caption: string;
-  group: string;
+interface InputTypeaheadComponentState {
+  isSuggestionVisible: boolean;
+  selectedChoice: Item;
+  filteredChoices: Item[];
 }
 
-interface Cache {
-  inputValue: string;
-  selection: Item;
-}
-
-interface InputTypeaheadComponentState {}
-
 export class InputTypeaheadComponent extends React.Component<
   InputTypeaheadComponentProps,
   InputTypeaheadComponentState
 > {
-  private inputElt: HTMLElement;
-  private containerElt: HTMLElement;
-
-  private cache: Cache;
-  private inputValue: string;
-  private selection: Item;
-
-  public constructor(props: InputTypeaheadComponentProps) {
+  constructor(props: InputTypeaheadComponentProps) {
     super(props);
-    this.cache = {
-      inputValue: null,
-      selection: null,
+    this.state = {
+      isSuggestionVisible: false,
+      filteredChoices: [],
+      selectedChoice: {
+        caption: "",
+        value: "",
+      },
     };
   }
 
-  /**
-   * Props have changed
-   * @param prevProps
-   * @param prevState
-   * @param snapshot
-   */
-  public componentDidUpdate(
-    prevProps: InputTypeaheadComponentProps,
-    prevState: InputTypeaheadComponentState,
-    snapshot: any
-  ): void {
-    if (prevProps.defaultValue !== this.props.defaultValue) {
-      $(this.inputElt).val(this.props.defaultValue);
-      this.initializeTypeahead();
-    }
-  }
-
-  /**
-   * Executed once react is done building the DOM for this component
-   */
-  public componentDidMount(): void {
-    this.initializeTypeahead();
-  }
-
-  public render(): JSX.Element {
+  private onRenderCell = (item: Item): JSX.Element => {
     return (
-      <span className="input-typeahead-container">
-        <div
-          className="input-typehead"
-          onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onKeyDown(event)}
-        >
-          <div className="typeahead__container" ref={(input) => (this.containerElt = input)}>
-            <div className="typeahead__field">
-              <span className="typeahead__query">
-                {this.props.useTextarea ? (
-                  <textarea
-                    rows={1}
-                    name="q"
-                    autoComplete="off"
-                    aria-label="Input query"
-                    ref={(input) => (this.inputElt = input)}
-                    defaultValue={this.props.defaultValue}
-                  />
-                ) : (
-                  <input
-                    name="q"
-                    type="search"
-                    autoComplete="off"
-                    aria-label="Input query"
-                    ref={(input) => (this.inputElt = input)}
-                    defaultValue={this.props.defaultValue}
-                  />
-                )}
-              </span>
-              {this.props.showSearchButton && (
-                <span className="typeahead__button">
-                  <button type="submit">
-                    <span className="typeahead__search-icon" />
-                  </button>
-                </span>
-              )}
-            </div>
-          </div>
-        </div>
-      </span>
+      <div className="input-typeahead-chocies-container" onClick={() => this.onChoiceClick(item)}>
+        <p className="choice-caption">{item.caption}</p>
+        <span>{item.value}</span>
+      </div>
     );
-  }
+  };
 
-  private onKeyDown(event: React.KeyboardEvent<HTMLElement>) {
-    if (event.keyCode === KeyCodes.Enter) {
+  private onChoiceClick = (item: Item): void => {
+    this.props.onNewValue(item.caption);
+    this.setState({ isSuggestionVisible: false, selectedChoice: item });
+  };
+
+  private handleChange = (value: string): void => {
+    if (!value) {
+      this.setState({ isSuggestionVisible: true });
+    }
+    this.props.onNewValue(value);
+    const filteredChoices = this.filterChoiceByValue(this.props.choices, value);
+    this.setState({ filteredChoices });
+  };
+
+  private onSubmit = (event: React.KeyboardEvent<HTMLElement>): void => {
+    if (event.key === "Enter") {
       if (this.props.submitFct) {
         event.preventDefault();
         event.stopPropagation();
-        this.props.submitFct(this.cache.inputValue, this.cache.selection);
-        $(this.containerElt).children(".typeahead__result").hide();
+        this.props.submitFct(this.props.defaultValue, this.state.selectedChoice);
+        this.setState({ isSuggestionVisible: false });
       }
     }
-  }
+  };
 
-  /**
-   * Must execute once ko is rendered, so that it can find the input element by id
-   */
-  private initializeTypeahead(): void {
-    const props = this.props;
-    let cache = this.cache;
-    let options: any = {
-      input: this.inputElt,
-      order: "asc",
-      minLength: 0,
-      searchOnFocus: true,
-      source: {
-        display: "caption",
-        data: () => {
-          return props.choices;
-        },
-      },
-      callback: {
-        onClick: (node: any, a: any, item: OnClickItem, event: any) => {
-          cache.selection = item;
+  private filterChoiceByValue = (choices: Item[], searchKeyword: string): Item[] => {
+    return choices.filter((choice) =>
+      // @ts-ignore
+      Object.keys(choice).some((key) => choice[key].toLowerCase().includes(searchKeyword.toLowerCase()))
+    );
+  };
 
-          if (props.onSelected) {
-            props.onSelected(item);
-          }
-        },
-        onResult(node: any, query: any, result: any, resultCount: any, resultCountPerGroup: any) {
-          cache.inputValue = query;
-          if (props.onNewValue) {
-            props.onNewValue(query);
-          }
-        },
+  public render(): JSX.Element {
+    const { defaultValue, useTextarea, placeholder, onNewValue } = this.props;
+    const { isSuggestionVisible, selectedChoice, filteredChoices } = this.state;
+    const theme = getTheme();
+
+    const iconButtonStyles = {
+      root: {
+        color: theme.palette.neutralPrimary,
+        marginLeft: "10px !important",
+        marginTop: "0px",
+        marginRight: "2px",
+        width: "42px",
       },
-      template: (query: string, item: any) => {
-        // Don't display id if caption *IS* the id
-        return item.caption === item.value
-          ? "<span>{{caption}}</span>"
-          : "<span><div>{{caption}}</div><div><small>{{value}}</small></div></span>";
+      rootHovered: {
+        color: theme.palette.neutralDark,
       },
-      dynamic: true,
     };
+    const cancelIcon: IIconProps = { iconName: "cancel" };
+    const searchIcon: IIconProps = { iconName: "Search" };
 
-    // Override options
-    if (props.typeaheadOverrideOptions) {
-      for (const p in props.typeaheadOverrideOptions) {
-        options[p] = props.typeaheadOverrideOptions[p];
-      }
-    }
-
-    if (props.hasOwnProperty("showCancelButton")) {
-      options.cancelButton = props.showCancelButton;
-    }
-
-    $(this.inputElt).typeahead(options);
+    return (
+      <div className="input-typeahead-container">
+        <Stack horizontal>
+          <TextField
+            multiline={useTextarea}
+            rows={1}
+            defaultValue={defaultValue}
+            ariaLabel="Input query"
+            placeholder={placeholder}
+            className="input-type-head-text-field"
+            value={defaultValue}
+            onKeyDown={this.onSubmit}
+            onFocus={() => this.setState({ isSuggestionVisible: true })}
+            onChange={(_event, newValue?: string) => this.handleChange(newValue)}
+          />
+          {this.props.showCancelButton && (
+            <IconButton
+              styles={iconButtonStyles}
+              iconProps={cancelIcon}
+              ariaLabel="cancel Button"
+              onClick={() => onNewValue("")}
+            />
+          )}
+          {this.props.showSearchButton && (
+            <IconButton
+              styles={iconButtonStyles}
+              iconProps={searchIcon}
+              ariaLabel="Search Button"
+              onClick={() => this.props.submitFct(defaultValue, selectedChoice)}
+            />
+          )}
+        </Stack>
+        {filteredChoices.length && isSuggestionVisible ? (
+          <List items={filteredChoices} onRenderCell={this.onRenderCell} />
+        ) : undefined}
+      </div>
+    );
   }
 }
diff --git a/src/Explorer/Controls/InputTypeahead/__snapshots__/InputTypeaheadComponent.test.tsx.snap b/src/Explorer/Controls/InputTypeahead/__snapshots__/InputTypeaheadComponent.test.tsx.snap
index 788652d84..ca534c822 100644
--- a/src/Explorer/Controls/InputTypeahead/__snapshots__/InputTypeaheadComponent.test.tsx.snap
+++ b/src/Explorer/Controls/InputTypeahead/__snapshots__/InputTypeaheadComponent.test.tsx.snap
@@ -1,61 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`inputTypeahead renders <input /> 1`] = `
-<span
+<div
   className="input-typeahead-container"
 >
-  <div
-    className="input-typehead"
-    onKeyDown={[Function]}
+  <Stack
+    horizontal={true}
   >
-    <div
-      className="typeahead__container"
-    >
-      <div
-        className="typeahead__field"
-      >
-        <span
-          className="typeahead__query"
-        >
-          <input
-            aria-label="Input query"
-            autoComplete="off"
-            name="q"
-            type="search"
-          />
-        </span>
-      </div>
-    </div>
-  </div>
-</span>
+    <StyledTextFieldBase
+      ariaLabel="Input query"
+      className="input-type-head-text-field"
+      multiline={false}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      placeholder="placeholder"
+      rows={1}
+    />
+  </Stack>
+</div>
 `;
 
 exports[`inputTypeahead renders <textarea /> 1`] = `
-<span
+<div
   className="input-typeahead-container"
 >
-  <div
-    className="input-typehead"
-    onKeyDown={[Function]}
+  <Stack
+    horizontal={true}
   >
-    <div
-      className="typeahead__container"
-    >
-      <div
-        className="typeahead__field"
-      >
-        <span
-          className="typeahead__query"
-        >
-          <textarea
-            aria-label="Input query"
-            autoComplete="off"
-            name="q"
-            rows={1}
-          />
-        </span>
-      </div>
-    </div>
-  </div>
-</span>
+    <StyledTextFieldBase
+      ariaLabel="Input query"
+      className="input-type-head-text-field"
+      multiline={true}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      placeholder="placeholder"
+      rows={1}
+    />
+  </Stack>
+</div>
 `;