diff --git a/packages/frontend/src/components/SearchBar.tsx b/packages/frontend/src/components/SearchBar.tsx
index aef23c96..d597f2c1 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 fa30f936..1a5a4ac2 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 00000000..2980e2f5
--- /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 ed646966..d5a65355 100644
--- a/packages/frontend/src/components/shared/CustomIcon/index.ts
+++ b/packages/frontend/src/components/shared/CustomIcon/index.ts
@@ -21,3 +21,4 @@ export * from './GitIcon';
 export * from './EllipseIcon';
 export * from './EllipsesIcon';
 export * from './SnowballIcon';
+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 bf5ce915..b1ecb705 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 d2d5459a..fb3fd7d6 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 bd2b4964..775f5ab5 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>