diff --git a/packages/web/components/templates/library/LibrarySearchBar.tsx b/packages/web/components/templates/library/LibrarySearchBar.tsx
index 6afc07875..7e359013d 100644
--- a/packages/web/components/templates/library/LibrarySearchBar.tsx
+++ b/packages/web/components/templates/library/LibrarySearchBar.tsx
@@ -11,11 +11,13 @@ import { SearchCoordinator } from './LibraryContainer'
 // Styles
 
 const List = styled('ul', {
-  width: '65%',
-  alignSelf: 'center',
-  color: '#0A0806CC',
-  fontSize: 24,
-  fontWeight: '700',
+  width: '93%',
+  top: '65px',
+  left: '0',
+  color: 'var(--colors-utilityTextDefault)',
+  backgroundColor: 'var(--colors-grayBase)',
+  position: 'absolute',
+  zIndex: '2',
   '@smDown': {
     fontSize: 16,
   },
@@ -23,6 +25,7 @@ const List = styled('ul', {
 
 const Item = styled('li', {
   listStyleType: 'none',
+  p: '5px 5px 5px 35px',
 })
 
 export type LibrarySearchBarProps = {
@@ -42,152 +45,153 @@ type OptionType = {
 
 export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element {
   const [searchTerm, setSearchTerm] = useState('')
-  const [recentSearches, setRecentSearches] = useState(['apple', 'pear', 'orange', 'grape', 'banana'])
+  const [recentSearches, setRecentSearches] = useState([
+    'apple',
+    'pear',
+    'orange',
+    'grape',
+    'banana',
+  ])
 
   return (
     <>
-      <VStack
-        alignment="start"
-        distribution="start"
-        css={{ pl: '32px', width: '100%', height: '100%' }}
-      >
-        <HStack
-          alignment="start"
-          distribution="start"
-          css={{ width: '100%', borderBottom: 'solid 1px $grayBorder' }}
-        >
-          <Downshift>
-            {({
-              getInputProps,
-              getRootProps,
-              getMenuProps,
-              getItemProps,
-              getToggleButtonProps,
-              isOpen,
-              highlightedIndex,
-            }) => (
-              <div
-                {...getRootProps({ refKey: 'ref' }, { suppressRefError: true })}
-              >
-                <form
-                  style={{ width: '100%' }}
-                  onSubmit={(event) => {
-                    event.preventDefault()
-                    // props.applySearchQuery(searchTerm || '')
-                    // inputRef.current?.blur()
-                  }}
-                  {...getRootProps()}
-                >
-                  <FormInput
-                    css={{
-                      width: '100%',
-                      height: '80px',
-                      fontSize: '24px',
-                      fontFamily: 'Inter',
-                    }}
-                    type="text"
-                    tabIndex={0}
-                    value={searchTerm}
-                    placeholder="Search"
-                    onChange={(event) => {
-                      setSearchTerm(event.target.value)
-                    }}
-                    {...getInputProps()}
-                  />
-                  <Button {...getToggleButtonProps()}>
-                    {isOpen ? '-' : '+'} .
-                  </Button>
-                  <List {...getMenuProps()}>
-                    {isOpen &&
-                      props.options?.map((item, index) => (
-                        <Item
-                          key={item.value}
-                          {...getItemProps({
-                            item,
-                            index,
-                            style: {
-                              backgroundColor:
-                                index === highlightedIndex
-                                  ? 'lightgray'
-                                  : undefined,
-                            },
-                          })}
-                        >
-                          {item.value}
-                        </Item>
-                      ))}
-                  </List>
-                </form>
-              </div>
-            )}
-          </Downshift>
-
-          {!searchTerm && (
-            <Button
-              style="plainIcon"
-              onClick={(event) => {
-                // Display the advanced search sheet
-              }}
-              css={{
-                display: 'flex',
-                flexDirection: 'row',
-                height: '100%',
-                alignItems: 'center',
-              }}
-            >
-              <Sliders
-                size={24}
-                color={theme.colors.utilityTextDefault.toString()}
-              />
-            </Button>
-          )}
-          {searchTerm && (
+      <Downshift>
+        {({
+          getInputProps,
+          getRootProps,
+          getMenuProps,
+          getItemProps,
+          getToggleButtonProps,
+          isOpen,
+          highlightedIndex,
+        }) => (
+          <VStack
+            alignment="start"
+            distribution="start"
+            css={{ pl: '32px', width: '100%', height: '100%' }}
+          >
             <HStack
-              alignment="center"
+              alignment="start"
               distribution="start"
-              css={{ height: '100%' }}
+              css={{ width: '100%', borderBottom: 'solid 1px $grayBorder' }}
+              {...getRootProps({ refKey: 'ref' }, { suppressRefError: true })}
             >
-              <Button
-                style="plainIcon"
-                onClick={(event) => {
+              <form
+                style={{ width: '100%' }}
+                onSubmit={(event) => {
                   event.preventDefault()
-                  setSearchTerm('')
-                  //props.applySearchQuery('')
+                  // props.applySearchQuery(searchTerm || '')
                   // inputRef.current?.blur()
                 }}
-                css={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  mr: '16px',
-                  height: '100%',
-                  alignItems: 'center',
-                }}
+                {...getRootProps()}
               >
-                <X
-                  width={24}
-                  height={24}
-                  color={theme.colors.grayTextContrast.toString()}
+                <FormInput
+                  css={{
+                    width: '100%',
+                    height: '80px',
+                    fontSize: '24px',
+                    fontFamily: 'Inter',
+                  }}
+                  type="text"
+                  tabIndex={0}
+                  value={searchTerm}
+                  placeholder="Search"
+                  onChange={(event) => {
+                    setSearchTerm(event.target.value)
+                  }}
+                  {...getInputProps()}
                 />
-              </Button>
+              </form>
 
-              <Button
-                style="ctaDarkYellow"
-                onClick={(event) => {
-                  event.preventDefault()
-                  //recentSearches.push({searchQuery: searchTerm, index: recentSearches.length })
-                  localStorage.setItem(searchTerm, searchTerm)
-                  //setRecentSearches(recentSearches)
+              <List {...getMenuProps()}>
+                {isOpen &&
+                  recentSearches?.map((item, index) => (
+                    <Item
+                      key={item}
+                      {...getItemProps({
+                        item,
+                        index,
+                        style: {
+                          backgroundColor:
+                            index === highlightedIndex
+                              ? 'lightgray'
+                              : undefined,
+                        },
+                      })}
+                    >
+                      {item}
+                    </Item>
+                  ))}
+              </List>
 
-                  // props.applySearchQuery('')
-                  // inputRef.current?.blur()
-                }}
-              >
-                Search
-              </Button>
+              {searchTerm && (
+                <HStack
+                  alignment="center"
+                  distribution="start"
+                  css={{ height: '100%' }}
+                >
+                  <Button
+                    style="plainIcon"
+                    onClick={(event) => {
+                      event.preventDefault()
+                      setSearchTerm('')
+                      //props.applySearchQuery('')
+                      // inputRef.current?.blur()
+                    }}
+                    css={{
+                      display: 'flex',
+                      flexDirection: 'row',
+                      mr: '16px',
+                      height: '100%',
+                      alignItems: 'center',
+                    }}
+                  >
+                    <X
+                      width={24}
+                      height={24}
+                      color={theme.colors.grayTextContrast.toString()}
+                    />
+                  </Button>
+
+                  <Button
+                    style="ctaDarkYellow"
+                    onClick={(event) => {
+                      event.preventDefault()
+                      //recentSearches.push({searchQuery: searchTerm, index: recentSearches.length })
+                      localStorage.setItem(searchTerm, searchTerm)
+                      //setRecentSearches(recentSearches)
+
+                      // props.applySearchQuery('')
+                      // inputRef.current?.blur()
+                    }}
+                  >
+                    Search
+                  </Button>
+                </HStack>
+              )}
+              {!searchTerm && (
+                <Button
+                  style="plainIcon"
+                  onClick={(event) => {
+                    // Display the advanced search sheet
+                  }}
+                  css={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    height: '100%',
+                    alignItems: 'center',
+                  }}
+                >
+                  <Sliders
+                    size={24}
+                    color={theme.colors.utilityTextDefault.toString()}
+                  />
+                </Button>
+              )}
             </HStack>
-          )}
-        </HStack>
-      </VStack>
+          </VStack>
+        )}
+      </Downshift>
     </>
   )
 }
diff --git a/packages/web/styles/menu.css b/packages/web/styles/menu.css
index 6d03b1491..f860a896a 100644
--- a/packages/web/styles/menu.css
+++ b/packages/web/styles/menu.css
@@ -1,5 +1,7 @@
 /* Menu Override styles */
-
+.pro-sidebar {
+  z-index: 1;
+}
 .pro-sidebar > .pro-sidebar-inner,
 .pro-menu,
 .pro-menu > ul > .pro-sub-menu > .pro-inner-list-item,