diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx
index 7ad86281c..48f11221a 100644
--- a/packages/web/components/elements/Button.tsx
+++ b/packages/web/components/elements/Button.tsx
@@ -191,6 +191,7 @@ export const Button = styled('button', {
         color: 'transparent',
         border: 'none',
         bg: 'transparent',
+        cursor: 'pointer',
         '&:hover': {
           opacity: 0.8,
         },
diff --git a/packages/web/components/templates/Menu.tsx b/packages/web/components/templates/Menu.tsx
index 1575a883c..7ac25a9f8 100644
--- a/packages/web/components/templates/Menu.tsx
+++ b/packages/web/components/templates/Menu.tsx
@@ -73,6 +73,7 @@ export const Menubar = () => {
 
   const [menuList, setMenuList] = useState<Array<MenuItems>>([])
   const [dynamicMenuItems, setDynamicMenuItems] = useState<DynamicMenuItems>({})
+  const [activeItem, setActiveItem] = useState<string>('Home')
 
   useEffect(() => {
     if (labels || subscriptions) {
@@ -84,7 +85,6 @@ export const Menubar = () => {
         query: 'in:inbox',
         icon: null,
         href: '/home',
-        active: true,
       },
       {
         label: 'Today',
@@ -111,7 +111,7 @@ export const Menubar = () => {
         href: `?q=in:inbox+label:Newsletter`,
       },
     ])
-  },[labels, subscriptions])
+  }, [labels, subscriptions])
 
   return (
     <ProSidebar style={proSideBarStyles} breakPoint={'sm'}>
@@ -122,7 +122,10 @@ export const Menubar = () => {
               <MenuItem
                 key={item.label}
                 icon={item.icon}
-                active={item.active ?? false}
+                active={activeItem === item.label}
+                onClick={() => {
+                  setActiveItem(item.label)
+                }}
               >
                 <Link passHref href={item.href}>
                   {item.label}
@@ -130,44 +133,46 @@ export const Menubar = () => {
               </MenuItem>
             )
           })}
-          {dynamicMenuItems.labels &&
-            <SubMenu
-              key="labels-list"
-              title="Labels"
-            >
-              {dynamicMenuItems.labels.map((item: MenuItems) => {
-                return (<MenuItem
+        {dynamicMenuItems.labels && (
+          <SubMenu key="labels-list" title="Labels">
+            {dynamicMenuItems.labels.map((item: MenuItems) => {
+              return (
+                <MenuItem
                   key={item.label}
                   icon={item.icon}
-                  active={item.active ?? false}
+                  active={activeItem === item.label}
+                  onClick={() => {
+                    setActiveItem(item.label)
+                  }}
                 >
                   <Link passHref href={item.href}>
                     {item.label}
                   </Link>
-                </MenuItem>)
-              })}
-            </SubMenu>
-          }
-          {dynamicMenuItems.subscriptions &&
-            <SubMenu
-              key="subscriptions-list"
-              title="Subscriptions"
-            >
-              {dynamicMenuItems.subscriptions.map((item: MenuItems) => {
-                return (
-                  <MenuItem
-                    key={item.label}
-                    icon={item.icon}
-                    active={item.active ?? false}
-                  >
-                    <Link passHref href={item.href}>
-                      {item.label}
-                    </Link>
-                  </MenuItem>
-                )
-              })}
-            </SubMenu>
-          }
+                </MenuItem>
+              )
+            })}
+          </SubMenu>
+        )}
+        {dynamicMenuItems.subscriptions && (
+          <SubMenu key="subscriptions-list" title="Subscriptions">
+            {dynamicMenuItems.subscriptions.map((item: MenuItems) => {
+              return (
+                <MenuItem
+                  key={item.label}
+                  icon={item.icon}
+                  active={activeItem === item.label}
+                  onClick={() => {
+                    setActiveItem(item.label)
+                  }}
+                >
+                  <Link passHref href={item.href}>
+                    {item.label}
+                  </Link>
+                </MenuItem>
+              )
+            })}
+          </SubMenu>
+        )}
       </Menu>
     </ProSidebar>
   )
diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx
index e57a64428..6a9f1825e 100644
--- a/packages/web/components/templates/library/LibraryContainer.tsx
+++ b/packages/web/components/templates/library/LibraryContainer.tsx
@@ -1,4 +1,4 @@
-import { Box, HStack, SpanBox, VStack } from './../../elements/LayoutPrimitives'
+import { HStack, SpanBox, VStack } from './../../elements/LayoutPrimitives'
 import { useGetViewerQuery } from '../../../lib/networking/queries/useGetViewerQuery'
 import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences'
 import { LibraryMenu } from './LibraryMenu'
@@ -6,19 +6,58 @@ import { LibraryAvatar } from './LibraryAvatar'
 import { LibrarySearchBar } from './LibrarySearchBar'
 import { LibraryList } from './LibraryList'
 import { LibraryHeadline } from './LibraryHeadline'
+import { useCallback, useState } from 'react'
+import { LibraryItemsQueryInput } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
+import { usePersistedState } from '../../../lib/hooks/usePersistedState'
 
 
+
+export type SearchCoordinator = {
+  applySearch: (searchTerm: string) => void
+}
+
+const useSearchCoordinator = () => {
+  const applySearch = useCallback((searchTerm: string) => {
+    console.log('applying search')
+  }, [])
+
+  return {
+    applySearch
+  }
+}
+
+export type LibraryLayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
+
+export type LayoutCoordinator = {
+  layout: LibraryLayoutType
+  setLayout: (type: LibraryLayoutType) => void
+}
+
+const useLibraryLayoutCoordinator = () => {
+  const [layout, setLayout] = usePersistedState<LibraryLayoutType>({
+    key: 'libraryLayout',
+    initialValue: 'GRID_LAYOUT',
+  })
+
+  return {
+    layout,
+    setLayout
+  }
+}
+
 export function LibraryContainer(): JSX.Element {
   useGetUserPreferences()
 
   const { viewerData } = useGetViewerQuery()
+  const searchCoordinator = useSearchCoordinator()
+  const layoutCoordinator = useLibraryLayoutCoordinator()
 
   return (
     <>
       <VStack alignment="start" distribution="start" css={{ width: '100vw', height: '100vh', overflow: 'hidden', bg: '$libraryBackground' }}>
         <HStack alignment="start" distribution="start" css={{ width: '100%' }}>
           <SpanBox css={{ width: '100%', height: '90px' }}>
-            <LibrarySearchBar />
+            <LibrarySearchBar coordinator={searchCoordinator} />
           </SpanBox>
           <SpanBox css={{ marginLeft: 'auto', width: '130px', height: '100%' }}>
             <LibraryAvatar viewer={viewerData?.me} />
@@ -27,8 +66,8 @@ export function LibraryContainer(): JSX.Element {
         <HStack alignment="start" distribution="start" css={{ width: '100%', height: '100%' }}>
           <LibraryMenu />
           <VStack alignment="start" distribution="start" css={{ width: '100%', height: '100%', mr: '20px' }}>
-            <LibraryHeadline />
-            <LibraryList />
+            <LibraryHeadline layoutCoordinator={layoutCoordinator} />
+            <LibraryList layoutCoordinator={layoutCoordinator} />
           </VStack>
         </HStack>
       </VStack>
diff --git a/packages/web/components/templates/library/LibraryHeadline.tsx b/packages/web/components/templates/library/LibraryHeadline.tsx
index 28c2e22c9..608abb7e8 100644
--- a/packages/web/components/templates/library/LibraryHeadline.tsx
+++ b/packages/web/components/templates/library/LibraryHeadline.tsx
@@ -5,18 +5,34 @@ import { theme } from '../../tokens/stitches.config'
 import { LibraryListLayoutIcon } from '../../elements/images/LibraryListLayoutIcon'
 import { LibraryGridLayoutIcon } from '../../elements/images/LibraryGridLayoutIcon'
 import { Button } from '../../elements/Button'
+import { LayoutCoordinator, LibraryLayoutType } from './LibraryContainer'
+import { useCallback } from 'react'
 
+export type LibraryHeadlineProps = {
+  layoutCoordinator: LayoutCoordinator
+}
 
-export function LibraryHeadline(): JSX.Element {
-  useGetUserPreferences()
+export function LibraryHeadline(props: LibraryHeadlineProps): JSX.Element {
+
+  const typeColor = useCallback((type: LibraryLayoutType) => {
+    return (
+      props.layoutCoordinator.layout === type
+      ? theme.colors.omnivoreCtaYellow.toString()
+      : "#D6D6D6"
+    )
+  }, [props.layoutCoordinator.layout])
 
   return (
     <HStack alignment="center" distribution="start" css={{ pt: '4px', pb: '8px', width: '100%', pr: '15px' }}>
       <StyledText style="libraryHeader">Home</StyledText>
       <HStack alignment="center" distribution="start" css={{ marginLeft: 'auto', gap: '16px' }}>
         <Button style="ctaDarkYellow">Add Link</Button>
-        <LibraryListLayoutIcon color="#D6D6D6" />
-        <LibraryGridLayoutIcon color={theme.colors.omnivoreCtaYellow.toString()} />
+        <Button style="ghost" onClick={() => props.layoutCoordinator.setLayout('LIST_LAYOUT')}>
+          <LibraryListLayoutIcon color={typeColor('LIST_LAYOUT')} />
+        </Button>
+        <Button style="ghost" onClick={() => props.layoutCoordinator.setLayout('GRID_LAYOUT')}>
+          <LibraryGridLayoutIcon color={typeColor('GRID_LAYOUT')} />
+        </Button>
       </HStack>
     </HStack>
   )
diff --git a/packages/web/components/templates/library/LibraryList.tsx b/packages/web/components/templates/library/LibraryList.tsx
index d104bf572..c65ad80d6 100644
--- a/packages/web/components/templates/library/LibraryList.tsx
+++ b/packages/web/components/templates/library/LibraryList.tsx
@@ -1,21 +1,22 @@
 import { Box } from '../../elements/LayoutPrimitives'
 import { useGetViewerQuery } from '../../../lib/networking/queries/useGetViewerQuery'
 import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences'
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import { useGetLibraryItemsQuery } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
 import { LinkedItemCardAction } from '../../patterns/LibraryCards/CardTypes'
 import { LibraryGridCard } from '../../patterns/LibraryCards/LibraryGridCard'
+import { LayoutCoordinator } from './LibraryContainer'
+import { EmptyLibrary } from '../homeFeed/EmptyLibrary'
 
-export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
+export type LibraryListProps = {
+  layoutCoordinator: LayoutCoordinator
+}
 
-
-export function LibraryList(): JSX.Element {
+export function LibraryList(props: LibraryListProps): JSX.Element {
   useGetUserPreferences()
 
-  const [layout, setLayout] = useState<LayoutType>('GRID_LAYOUT')
   const { viewerData } = useGetViewerQuery()
 
-
   const defaultQuery = {
     limit: 50,
     sortDescending: true,
@@ -33,40 +34,42 @@ export function LibraryList(): JSX.Element {
     return items
   }, [itemsPages, performActionOnItem])
 
+  if (!isValidating && libraryItems.length == 0) {
+    return (
+      <EmptyLibrary
+        onAddLinkClicked={() => {
+          console.log('onAddLinkClicked')
+        }}
+      />
+    )
+  }
+
   return (
     <Box css={{ overflowY: 'scroll' }}>
-    {/* // {!isValidating && items.length == 0 ? (
-    //   <EmptyLibrary
-    //     onAddLinkClicked={() => {
-          
-    //     }}
-    //   />
-    // ) : ( */}
       <Box
         css={{
-          display: 'grid',
-          gridGap: layout == 'LIST_LAYOUT' ? '0' : '16px',
           width: '100%',
+          display: 'grid',
           gridAutoRows: 'auto',
           borderRadius: '8px',
           marginBottom: '0px',
           paddingRight: '14px',
           paddingTop: '0px',
-          marginTop: layout == 'LIST_LAYOUT' ? '21px' : '0',
-          paddingBottom: layout == 'LIST_LAYOUT' ? '0px' : '21px',
+          marginTop: '0px',
+          paddingBottom: '21px',
           '@smDown': {
             border: 'unset',
-            width: layout == 'LIST_LAYOUT' ? '100vw' : undefined,
-            margin: layout == 'LIST_LAYOUT' ? '16px -16px' : undefined,
-            borderRadius: layout == 'LIST_LAYOUT' ? 0 : undefined,
+            width: props.layoutCoordinator.layout == 'LIST_LAYOUT' ? '100vw' : undefined,
+            margin: props.layoutCoordinator.layout == 'LIST_LAYOUT' ? '16px -16px' : undefined,
+            borderRadius: props.layoutCoordinator.layout == 'LIST_LAYOUT' ? 0 : undefined,
           },
           '@lg': {
             gridTemplateColumns:
-            layout == 'LIST_LAYOUT' ? 'none' : '1fr 1fr',
+            props.layoutCoordinator.layout == 'LIST_LAYOUT' ? 'none' : '1fr 1fr',
           },
           '@xl': {
             gridTemplateColumns:
-              layout == 'LIST_LAYOUT' ? 'none' : 'repeat(3, 1fr)',
+            props.layoutCoordinator.layout == 'LIST_LAYOUT' ? 'none' : 'repeat(3, 1fr)',
           },
         }}
       >
@@ -96,7 +99,7 @@ export function LibraryList(): JSX.Element {
           >
             {viewerData?.me && (
               <LibraryGridCard
-                layout={layout}
+                layout={props.layoutCoordinator.layout}
                 item={linkedItem.node}
                 viewer={viewerData.me}
                 handleAction={(action: LinkedItemCardAction) => {
diff --git a/packages/web/components/templates/library/LibrarySearchBar.tsx b/packages/web/components/templates/library/LibrarySearchBar.tsx
index dbbc9d5d0..feaa2dde6 100644
--- a/packages/web/components/templates/library/LibrarySearchBar.tsx
+++ b/packages/web/components/templates/library/LibrarySearchBar.tsx
@@ -1,26 +1,22 @@
-import { Box, HStack, SpanBox, VStack } from './../../elements/LayoutPrimitives'
-import { useGetViewerQuery } from '../../../lib/networking/queries/useGetViewerQuery'
-import { useRouter } from 'next/router'
-import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences'
+import { HStack, SpanBox, VStack } from './../../elements/LayoutPrimitives'
 import { useState } from 'react'
 import { FormInput } from '../../elements/FormElements'
 import { Button } from '../../elements/Button'
-import { X } from 'phosphor-react'
+import { Sliders, SlidersHorizontal, X } from 'phosphor-react'
 import { theme } from '../../tokens/stitches.config'
+import { SearchCoordinator } from './LibraryContainer'
 
+export type LibrarySearchBarProps = {
+  coordinator: SearchCoordinator
+}
 
-export function LibrarySearchBar(): JSX.Element {
-  useGetUserPreferences()
-
-
-  const router = useRouter()
-  const [searchTerm, setSearchTerm] = useState('')
-  const { viewerData } = useGetViewerQuery()
+export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element {
+  const [searchTerm, setSearchTerm] = useState('')  
 
   return (
     <>
       <VStack alignment="start" distribution="start" css={{ pl: '32px', width: '100%', height: '100%' }}>
-        <HStack alignment="start" distribution="start" css={{ width: '100%' }}>
+        <HStack alignment="start" distribution="start" css={{ width: '100%', borderBottom: 'solid 1px $grayBorder' }}>
           <form
             style={{ width: '100%' }}
             onSubmit={(event) => {
@@ -33,24 +29,34 @@ export function LibrarySearchBar(): JSX.Element {
               css={{
                 width: '100%',
                 height: '80px',
-                fontFamily: 'Inter',
                 fontSize: '24px',
+                fontFamily: 'Inter',
               }}
               type="text"
+              tabIndex={0}
               value={searchTerm}
               placeholder="Search"
-              // onFocus={(event) => {
-              //   event.target.select()
-              //   setFocused(true)
-              // }}
-              // onBlur={() => {
-              //   setFocused(false)
-              // }}
-              // onChange={(event) => {
-              //   setSearchTerm(event.target.value)
-              // }}
+              onChange={(event) => {
+                setSearchTerm(event.target.value)
+              }}
             />
           </form>
+        {!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 && (
           <HStack alignment="center" distribution="start" css={{ height: '100%' }}>
             <Button
@@ -90,7 +96,6 @@ export function LibrarySearchBar(): JSX.Element {
           </HStack>
         )}
       </HStack>
-      <SpanBox css={{ width: '100%', height: '1px', bg: '$grayBorder' }} />
       </VStack>
     </>
   )
diff --git a/packages/web/styles/menu.css b/packages/web/styles/menu.css
index 75e9bf46b..a5a7a3301 100644
--- a/packages/web/styles/menu.css
+++ b/packages/web/styles/menu.css
@@ -1,30 +1,36 @@
 /* Menu Override styles */
 
 .pro-sidebar > .pro-sidebar-inner,
-.pro-menu a,
-.pro-menu > ul > .pro-sub-menu > .pro-inner-list-item {
+.pro-menu,
+.pro-menu > ul > .pro-sub-menu > .pro-inner-list-item,
+.pro-sidebar .pro-menu .pro-menu-item.pro-sub-menu .pro-inner-list-item {
   background-color: var(--colors-libraryBackground);
+}
+
+.pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item,
+.pro-sidebar .pro-menu-item .pro-sub-menu .pro-inner-item,
+.pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item > .pro-item-content,
+.pro-sidebar .pro-menu a,
+.pro-sidebar .pro-menu a:hover {
   color: var(--colors-utilityTextDefault);
 }
 
-.pro-menu a:hover {
-  color: var(--colors-utilityTextDefault);
+.pro-menu .pro-menu-item > .pro-inner-item {
+  padding: 5px 20px;
 }
 
-.pro-menu-item > .pro-inner-item {
-  padding: 8px 20px 3px 20px;
-}
-
-.pro-menu .pro-menu-item > .pro-inner-item:hover {
-  color: var(--colors-utilityTextDefault);
-}
-
-.pro-menu-item > .pro-inner-item > .pro-icon-wrapper {
+.pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item > .pro-icon-wrapper {
   width: 20px;
   min-width: 0;
   height: 25px;
 }
 
-.pro-menu-item > .pro-inner-item > .pro-icon-wrapper .pro-icon {
-  animation-play-state: paused !important;
+.pro-sidebar .pro-menu .pro-menu-item.active {
+  background-color: var(--colors-libraryActiveMenuItem);
+  width: 90%;
+  border-radius: 5px;
 }
+
+.pro-menu-item > .pro-inner-item > .pro-icon-wrapper .pro-icon {
+    animation-play-state: paused !important;
+  }
\ No newline at end of file