diff --git a/packages/frontend/src/components/HorizontalLine.tsx b/packages/frontend/src/components/HorizontalLine.tsx
index 4d6a864..7866072 100644
--- a/packages/frontend/src/components/HorizontalLine.tsx
+++ b/packages/frontend/src/components/HorizontalLine.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 const HorizontalLine = () => {
-  return <hr className="h-px bg-gray-300 border-0" />;
+  return <hr className="h-px bg-gray-100 border-0" />;
 };
 
 export default HorizontalLine;
diff --git a/packages/frontend/src/components/SearchBar.tsx b/packages/frontend/src/components/SearchBar.tsx
index aef23c9..d597f2c 100644
--- a/packages/frontend/src/components/SearchBar.tsx
+++ b/packages/frontend/src/components/SearchBar.tsx
@@ -1,33 +1,23 @@
 import React, { forwardRef, RefAttributes } from 'react';
 
-import { Input, InputProps } from '@material-tailwind/react';
+import { SearchIcon } from './shared/CustomIcon';
+import { Input, InputProps } from './shared/Input';
 
 const SearchBar: React.ForwardRefRenderFunction<
   HTMLInputElement,
   InputProps & RefAttributes<HTMLInputElement>
-> = ({ value, onChange, placeholder = 'Search', ...props }, ref) => {
+> = ({ value, onChange, placeholder = 'Search', ...props }) => {
   return (
-    <div className="relative flex w-full gap-2">
+    <div className="relative flex w-full">
       <Input
+        leftIcon={<SearchIcon />}
         onChange={onChange}
         value={value}
         type="search"
         placeholder={placeholder}
-        containerProps={{
-          className: 'min-w-[288px]',
-        }}
-        className="!border-t-blue-gray-300 pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300"
-        labelProps={{
-          className: 'before:content-none after:content-none',
-        }}
-        // TODO: Debug issue: https://github.com/creativetimofficial/material-tailwind/issues/427
-        crossOrigin={undefined}
+        appearance={'borderless'}
         {...props}
-        inputRef={ref}
       />
-      <div className="!absolute left-3 top-[13px]">
-        <i>^</i>
-      </div>
     </div>
   );
 };
diff --git a/packages/frontend/src/components/Sidebar.tsx b/packages/frontend/src/components/Sidebar.tsx
index fa30f93..1a5a4ac 100644
--- a/packages/frontend/src/components/Sidebar.tsx
+++ b/packages/frontend/src/components/Sidebar.tsx
@@ -42,7 +42,7 @@ const Sidebar = () => {
   }, [disconnect, navigate]);
 
   return (
-    <div className="flex flex-col h-full p-4 pt-5">
+    <div className="flex flex-col h-full p-4 pt-10">
       <div className="grow">
         <Link to={`/${orgSlug}`}>
           <div className="flex items-center space-x-3 mb-10 ml-2">
diff --git a/packages/frontend/src/components/shared/CustomIcon/NotificationBellIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/NotificationBellIcon.tsx
new file mode 100644
index 0000000..2980e2f
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/NotificationBellIcon.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const NotificationBellIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        id="Icon"
+        d="M13.3333 15.4166C12.7722 16.8882 11.4909 17.9166 9.99997 17.9166C8.50903 17.9166 7.22769 16.8882 6.66664 15.4166M4.80461 15.4166H15.1953C16.1978 15.4166 16.9735 14.5379 16.8491 13.5432L16.0885 7.45809C15.7047 4.38751 13.0944 2.08325 9.99997 2.08325C6.90549 2.08325 4.29527 4.38751 3.91145 7.45809L3.15081 13.5432C3.02647 14.5379 3.80211 15.4166 4.80461 15.4166Z"
+        stroke="currentColor"
+      />
+    </CustomIcon>
+  );
+};
diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts
index 93f2438..2be9f68 100644
--- a/packages/frontend/src/components/shared/CustomIcon/index.ts
+++ b/packages/frontend/src/components/shared/CustomIcon/index.ts
@@ -22,3 +22,4 @@ export * from './EllipseIcon';
 export * from './EllipsesIcon';
 export * from './SnowballIcon';
 export * from './ReactNativeIcon';
+export * from './NotificationBellIcon';
diff --git a/packages/frontend/src/components/shared/Input/Input.theme.ts b/packages/frontend/src/components/shared/Input/Input.theme.ts
index bf5ce91..b1ecb70 100644
--- a/packages/frontend/src/components/shared/Input/Input.theme.ts
+++ b/packages/frontend/src/components/shared/Input/Input.theme.ts
@@ -19,10 +19,10 @@ export const inputTheme = tv(
         'block',
         'w-full',
         'h-full',
-        'rounded-lg',
-        'text-elements-mid-em',
         'shadow-sm',
         'border',
+        'rounded-lg',
+        'text-elements-mid-em',
         'border-border-interactive',
         'disabled:shadow-none',
         'disabled:border-none',
@@ -71,6 +71,15 @@ export const inputTheme = tv(
           helperIcon: ['h-4 w-4'],
         },
       },
+      appearance: {
+        borderless: {
+          input: [
+            'border-none', // Remove the border
+            'shadow-none', // Optional: remove shadow if desired
+            // Add any additional styles necessary for the borderless appearance
+          ],
+        },
+      },
     },
     defaultVariants: {
       size: 'md',
diff --git a/packages/frontend/src/components/shared/Input/Input.tsx b/packages/frontend/src/components/shared/Input/Input.tsx
index d2d5459..fb3fd7d 100644
--- a/packages/frontend/src/components/shared/Input/Input.tsx
+++ b/packages/frontend/src/components/shared/Input/Input.tsx
@@ -24,12 +24,17 @@ export const Input = ({
   helperText,
   size,
   state,
+  appearance,
   ...props
 }: InputProps) => {
-  const styleProps = (({ size = 'md', state }) => ({
-    size,
-    state,
-  }))({ size, state });
+  const styleProps = useMemo(
+    () => ({
+      size: size || 'md',
+      state: state || 'default',
+      appearance, // Pass appearance to inputTheme
+    }),
+    [size, state, appearance],
+  );
 
   const {
     container: containerCls,
diff --git a/packages/frontend/src/layouts/ProjectSearch.tsx b/packages/frontend/src/layouts/ProjectSearch.tsx
index bd2b496..775f5ab 100644
--- a/packages/frontend/src/layouts/ProjectSearch.tsx
+++ b/packages/frontend/src/layouts/ProjectSearch.tsx
@@ -2,12 +2,14 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Outlet, useNavigate } from 'react-router-dom';
 import { User } from 'gql-client';
 
-import { IconButton, Tooltip, Typography } from '@material-tailwind/react';
+// import { Tooltip } from '@material-tailwind/react';
 
 import HorizontalLine from '../components/HorizontalLine';
 import ProjectSearchBar from '../components/projects/ProjectSearchBar';
 import { useGQLClient } from '../context/GQLClientContext';
 import { formatAddress } from '../utils/format';
+import { NotificationBellIcon, PlusIcon } from 'components/shared/CustomIcon';
+import { Button } from 'components/shared/Button';
 
 const ProjectSearch = () => {
   const navigate = useNavigate();
@@ -26,8 +28,8 @@ const ProjectSearch = () => {
   return (
     <div>
       <div className="sticky top-0 bg-white z-30">
-        <div className="flex p-5">
-          <div className="grow mr-2">
+        <div className="flex pl-3 pr-8 pt-3 pb-3 items-center">
+          <div className="grow">
             <ProjectSearchBar
               onChange={(project) => {
                 navigate(
@@ -36,23 +38,15 @@ const ProjectSearch = () => {
               }}
             />
           </div>
-          <IconButton
-            color="blue"
-            className="rounded-full mr-2"
-            placeholder={''}
-          >
-            <Typography variant="h5" placeholder={''}>
-              +
-            </Typography>
-          </IconButton>
-          <div className="mr-2 flex items-center">
-            <Typography placeholder={''}>^</Typography>
-          </div>
-          <div className="px-2 py-1 bg-blue-gray-50 rounded-lg flex items-center">
-            {user?.name && (
-              <Tooltip content={user.name}>{formatAddress(user.name)}</Tooltip>
-            )}
-          </div>
+          <Button variant={'secondary'} iconOnly>
+            <PlusIcon />
+          </Button>
+          <Button variant={'ghost'} iconOnly>
+            <NotificationBellIcon />
+          </Button>
+          {user?.name ? (
+            <Button variant={'tertiary'}>{formatAddress(user.name)}</Button>
+          ) : null}
         </div>
         <HorizontalLine />
       </div>
diff --git a/packages/frontend/src/pages/OrgSlug.tsx b/packages/frontend/src/pages/OrgSlug.tsx
index 7ee4083..b2214e4 100644
--- a/packages/frontend/src/pages/OrgSlug.tsx
+++ b/packages/frontend/src/pages/OrgSlug.tsx
@@ -12,7 +12,7 @@ const OrgSlug = () => {
           <Sidebar />
         </div>
         <div className="col-span-4 h-full p-3 overflow-y-hidden">
-          <div className="bg-white rounded-3xl h-full overflow-y-auto">
+          <div className="bg-white rounded-3xl h-full overflow-y-auto shadow-sm">
             <OctokitProvider>
               <Outlet />
             </OctokitProvider>