diff --git a/src/lib/components/NotificationBell.svelte b/src/lib/components/NotificationBell.svelte
index d96b438e..c6905cfc 100644
--- a/src/lib/components/NotificationBell.svelte
+++ b/src/lib/components/NotificationBell.svelte
@@ -3,6 +3,7 @@
 
   import { goto } from '$app/navigation';
   import { numberOfUnreadNotification } from '$lib/store';
+  import Bell from "lucide-svelte/icons/bell";
 
   export let data;
   export let hasUnreadElement;
@@ -17,15 +18,13 @@ async function toggle() {
   <!--Start Notification Bell-->
   {#if data?.user}
   
-  <div on:click={toggle} class="relative ml-3 -mr-1">
-    <label class="sm:hover:text-[#756EFF] text-gray-300 hover:text-white cursor-pointer">
-      <svg class="w-7 h-7 inline-block" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.0196 2.91016C8.7096 2.91016 6.0196 5.60016 6.0196 8.91016V11.8002C6.0196 12.4102 5.7596 13.3402 5.4496 13.8602L4.2996 15.7702C3.5896 16.9502 4.0796 18.2602 5.3796 18.7002C9.6896 20.1402 14.3396 20.1402 18.6496 18.7002C19.8596 18.3002 20.3896 16.8702 19.7296 15.7702L18.5796 13.8602C18.2796 13.3402 18.0196 12.4102 18.0196 11.8002V8.91016C18.0196 5.61016 15.3196 2.91016 12.0196 2.91016Z" stroke="currentColor" stroke-width="1" stroke-miterlimit="10" stroke-linecap="round"></path><path d="M13.8699 3.19994C13.5599 3.10994 13.2399 3.03994 12.9099 2.99994C11.9499 2.87994 11.0299 2.94994 10.1699 3.19994C10.4599 2.45994 11.1799 1.93994 12.0199 1.93994C12.8599 1.93994 13.5799 2.45994 13.8699 3.19994Z" stroke="currentColor" stroke-width="1" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path><path opacity="0.4" d="M15.0195 19.0601C15.0195 20.7101 13.6695 22.0601 12.0195 22.0601C11.1995 22.0601 10.4395 21.7201 9.89953 21.1801C9.35953 20.6401 9.01953 19.8801 9.01953 19.0601" stroke="currentColor" stroke-width="1" stroke-miterlimit="10"></path></svg>
-    </label>
+  <div on:click={toggle} class="text-gray-300 sm:hover:text-white cursor-pointer sm:hover:bg-[#27272A] relative border p-2 rounded-lg border-gray-800 ml-3 -mr-1">
+      <Bell class="h-[20px] w-[20px]" />  
 
     {#if hasUnreadElement}
     <div class="absolute top-2 -right-2 flex">
-      <div class="relative inline-flex text-xs text-white font-bold w-[18px] h-[18px] bg-red-500 border-[1px] border-gray-700 rounded-full -top-3 right-2">
-        <span class="m-auto -my-0.5">{$numberOfUnreadNotification <= 9 ? $numberOfUnreadNotification : '9+' }</span>
+      <div class="relative inline-flex text-xs text-black font-bold w-[18px] h-[18px] bg-white border-[1px] border-gray-800 rounded-full -top-2 right-2">
+        <span class="m-auto">{$numberOfUnreadNotification <= 9 ? $numberOfUnreadNotification : '9+' }</span>
       </div>
     </div>
     
diff --git a/src/lib/components/Searchbar.svelte b/src/lib/components/Searchbar.svelte
index e4b57ceb..f08bd391 100644
--- a/src/lib/components/Searchbar.svelte
+++ b/src/lib/components/Searchbar.svelte
@@ -3,6 +3,8 @@
   import { userRegion, searchBarData, stockTicker, etfTicker, cryptoTicker, screenWidth} from '$lib/store';  
   import { goto } from '$app/navigation';
   import { onMount } from 'svelte';
+  import Search from "lucide-svelte/icons/search";
+
 
   const usRegion = ['cle1','iad1','pdx1','sfo1'];
   let apiURL;
@@ -321,13 +323,8 @@ $: {
 
 
 
-<label on:click={loadSearchData} for="searchBarModal"
-class="cursor-pointer w-8 h-8 flex-shrink-0 flex items-center justify-center bg-purple-600 rounded-full">
-<span class="sr-only">Search</span>
-    <svg class="w-3.5 h-3.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-        <path class="fill-current text-white" d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
-        <path class="fill-current text-white" d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
-    </svg>
+<label on:click={loadSearchData} for="searchBarModal" class="cursor-pointer p-2 sm:hover:bg-[#27272A] text-gray-300 sm:hover:text-white flex-shrink-0 flex items-center justify-center border border-gray-800 rounded-lg">
+  <Search class="h-[20px] w-[20px]" />  
 </label>
 
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b74fcec0..e8dc9300 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -649,11 +649,11 @@ $: {
 
   </aside>
   <div class="flex flex-col">
-    <header class="navbar {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} sticky top-0 z-40 bg-[#141417] flex h-14 items-center gap-4 px-4 sm:h-auto sm:px-6">
+    <header class="navbar {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} sticky top-0 z-40 bg-[#09090B] border-b border-gray-800 flex h-14 items-center gap-4 px-4 sm:h-auto sm:px-6">
       <Sheet.Root>
         <Sheet.Trigger asChild let:builder>
-          <Button builders={[builder]} size="icon" class="sm:xl bg-[#141417] hover:bg-[#141417] text-white sm:hover:bg-white sm:hover:text-black border-none">
-            <Menu class="h-5.5 w-5.5 sm:w-7 sm:h-7" />
+          <Button builders={[builder]} size="icon" class="sm:xl bg-[#09090B] text-white sm:hover:bg-[#27272A] border-none">
+            <Menu class=" h-5.5 w-5.5 sm:w-7 sm:h-7" />
             <span class="sr-only">Toggle Menu</span>
           </Button>
         </Sheet.Trigger>