diff --git a/packages/web/components/templates/library/LibrarySearchBar.tsx b/packages/web/components/templates/library/LibrarySearchBar.tsx
index 0c89d0052..146a0c796 100644
--- a/packages/web/components/templates/library/LibrarySearchBar.tsx
+++ b/packages/web/components/templates/library/LibrarySearchBar.tsx
@@ -9,11 +9,10 @@ import { styled, theme } from '../../tokens/stitches.config'
 import { SearchCoordinator } from './LibraryContainer'
 
 // Styles
-
 const List = styled('ul', {
   width: '91%',
   maxHeight: '400px',
-  overflow:'auto',
+  overflow: 'auto',
   top: '65px',
   left: '-32px',
   color: 'var(--colors-utilityTextDefault)',
@@ -41,185 +40,169 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element {
 
   useEffect(() => {
     setRecentSearches(Object.values(localStorage))
-    //localStorage.clear()
-    if (recentSearches.length > 0) {
-      console.log('recentSearches recentSearches', recentSearches)
-    }
   }, [])
 
   return (
-    <>
-      <Downshift
-        // onChange={(selection) =>
-        //   console.log(
-        //     selection ? `You selected ${selection}` : 'Selection Cleared'
-        //   )
-        // }
-        itemToString={(item) => (item ? item : '')}
-      >
-        {({
-          getInputProps,
-          getRootProps,
-          getMenuProps,
-          getItemProps,
-          isOpen,
-          highlightedIndex,
-          inputValue,
-          clearSelection,
-        }) => (
-          <VStack
+    <Downshift itemToString={(item) => (item ? item : '')}>
+      {({
+        getInputProps,
+        getRootProps,
+        getMenuProps,
+        getItemProps,
+        isOpen,
+        highlightedIndex,
+        inputValue,
+        clearSelection,
+      }) => (
+        <VStack
+          alignment="start"
+          distribution="start"
+          css={{ pl: '32px', width: '100%', height: '100%' }}
+        >
+          <HStack
             alignment="start"
             distribution="start"
-            css={{ pl: '32px', width: '100%', height: '100%' }}
+            css={{ width: '100%', borderBottom: 'solid 1px $grayBorder' }}
+            {...getRootProps({ refKey: 'ref' }, { suppressRefError: true })}
           >
-            <HStack
-              alignment="start"
-              distribution="start"
-              css={{ width: '100%', borderBottom: 'solid 1px $grayBorder' }}
-              {...getRootProps({ refKey: 'ref' }, { suppressRefError: true })}
+            <form
+              style={{ width: '100%' }}
+              onSubmit={(event) => {
+                event.preventDefault()
+                // props.applySearchQuery(searchTerm || '')
+                // inputRef.current?.blur()
+              }}
+              {...getRootProps()}
             >
-              <form
-                style={{ width: '100%' }}
-                onSubmit={(event) => {
-                  event.preventDefault()
-                  // props.applySearchQuery(searchTerm || '')
-                  // inputRef.current?.blur()
+              <FormInput
+                css={{
+                  width: '77%',
+                  height: '80px',
+                  fontSize: '24px',
+                  fontFamily: 'Inter',
                 }}
-                {...getRootProps()}
-              >
-                <FormInput
-                  css={{
-                    width: '77%',
-                    height: '80px',
-                    fontSize: '24px',
-                    fontFamily: 'Inter',
-                  }}
-                  type="text"
-                  tabIndex={0}
-                  value={inputValue}
-                  placeholder="Search"
-                  onChange={(event) => {
-                    event.preventDefault()
-                  }}
-                  {...getInputProps()}
-                />
+                type="text"
+                tabIndex={0}
+                value={inputValue}
+                placeholder="Search"
+                onChange={(event: any) => {
+                  event.preventDefault()
+                }}
+                {...getInputProps()}
+              />
 
-                {/* {searchTerm && ( */}
-                <HStack
-                  alignment="center"
-                  distribution="start"
+              {/* {searchTerm && ( */}
+              <HStack
+                alignment="center"
+                distribution="start"
+                css={{
+                  height: '100%',
+                  display: 'flex',
+                  justifyContent: 'right',
+                  alignItems: 'center',
+                  margin: '-57px 0 10px',
+                }}
+              >
+                <Button
+                  style="plainIcon"
+                  onClick={(event) => {
+                    event.preventDefault()
+                    clearSelection()
+                    //props.applySearchQuery('')
+                    // inputRef.current?.blur()
+                  }}
                   css={{
-                    height: '100%',
-                    display: 'flex',
-                    justifyContent: 'right',
-                    alignItems: 'center',
-                    margin: '-57px 0 10px',
+                    mr: '15px',
                   }}
                 >
-                  <Button
-                    style="plainIcon"
-                    onClick={(event) => {
-                      event.preventDefault()
-                      clearSelection()
-                     
-                      //props.applySearchQuery('')
-                      // inputRef.current?.blur()
-                    }}
-                    css={{
-                      mr: '15px',
-                    }}
-                  >
-                    <X
-                      width={24}
-                      height={24}
-                      color={theme.colors.grayTextContrast.toString()}
-                    />
-                  </Button>
+                  <X
+                    width={24}
+                    height={24}
+                    color={theme.colors.grayTextContrast.toString()}
+                  />
+                </Button>
 
-                  <Button
-                    style="ctaDarkYellow"
-                    type="submit"
-                    css={{
-                      mr: '15px',
-                    }}
-                    onClick={(event) => {
-                      event.preventDefault()
-                      if (inputValue && inputValue.length > 0) {
-                        localStorage.setItem(inputValue, inputValue)
-                        setRecentSearches(Object.values(localStorage))
-                      }
-                      // props.applySearchQuery('')
-                      // inputRef.current?.blur()
-                    }}
-                  >
-                    Search
-                  </Button>
-                  {/* )} */}
-                  {/* {!searchTerm && ( */}
-                  <Button
-                    style="plainIcon"
-                    onClick={(event) => {
-                      // Display the advanced search sheet
-                    }}
-                  >
-                    <Sliders
-                      size={24}
-                      color={theme.colors.utilityTextDefault.toString()}
-                    />
-                  </Button>
-                  {/* )} */}
-                </HStack>
+                <Button
+                  style="ctaDarkYellow"
+                  type="submit"
+                  css={{
+                    mr: '15px',
+                  }}
+                  onClick={(event) => {
+                    event.preventDefault()
+                    if (inputValue && inputValue.length > 0) {
+                      localStorage.setItem(inputValue, inputValue)
+                      setRecentSearches(Object.values(localStorage))
+                    }
+                    // props.applySearchQuery('')
+                    // inputRef.current?.blur()
+                  }}
+                >
+                  Search
+                </Button>
+                {/* )} */}
+                {/* {!searchTerm && ( */}
+                <Button
+                  style="plainIcon"
+                  onClick={(event) => {
+                    // Display the advanced search sheet
+                  }}
+                >
+                  <Sliders
+                    size={24}
+                    color={theme.colors.utilityTextDefault.toString()}
+                  />
+                </Button>
+                {/* )} */}
+              </HStack>
 
-                <List>
-                  {isOpen &&
-                    recentSearches
-                      .filter(
-                        (item) => !inputValue || item.includes(inputValue)
-                      )
-                      .map((item, index) => (
-                        <SpanBox
-                          {...getMenuProps()}
-                          key={item}
-                          css={{
-                            paddingLeft: '15px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            borderBottom: '1px solid $grayBorder',
-                            '& svg': {
-                              margin: '10px',
-                            },
-                            backgroundColor:
-                              index === highlightedIndex
-                                ? 'var(--colors-grayBg)'
-                                : 'transparent',
-                          }}
+              <List>
+                {isOpen &&
+                  recentSearches
+                    .filter((item) => !inputValue || item.includes(inputValue))
+                    .map((item, index) => (
+                      <SpanBox
+                        {...getMenuProps()}
+                        key={item}
+                        css={{
+                          paddingLeft: '15px',
+                          display: 'flex',
+                          alignItems: 'center',
+                          borderBottom: '1px solid $grayBorder',
+                          '& svg': {
+                            margin: '10px',
+                          },
+                          backgroundColor:
+                            index === highlightedIndex
+                              ? 'var(--colors-grayBg)'
+                              : 'transparent',
+                        }}
+                      >
+                        <Clock size={20} />
+                        <Item
+                          {...getItemProps({
+                            item,
+                            index,
+                          })}
                         >
-                          <Clock size={20} />
-                          <Item
-                            {...getItemProps({
-                              item,
-                              index,
-                            })}
-                          >
-                            {item}
-                          </Item>
-                          <X
-                            width={20}
-                            height={20}
-                            color={theme.colors.grayTextContrast.toString()}
-                            onClick={() => {
-                              localStorage.removeItem(`${item}`)
-                              setRecentSearches(Object.values(localStorage))
-                            }}
-                          />
-                        </SpanBox>
-                      ))}
-                </List>
-              </form>
-            </HStack>
-          </VStack>
-        )}
-      </Downshift>
-    </>
+                          {item}
+                        </Item>
+                        <X
+                          width={20}
+                          height={20}
+                          color={theme.colors.grayTextContrast.toString()}
+                          onClick={() => {
+                            localStorage.removeItem(`${item}`)
+                            setRecentSearches(Object.values(localStorage))
+                          }}
+                        />
+                      </SpanBox>
+                    ))}
+              </List>
+            </form>
+          </HStack>
+        </VStack>
+      )}
+    </Downshift>
   )
 }