feat: Implement agent messaging and settings pages with new components and icons.

src/components/layout/AgentHeader.tsx

@@ -47,31 +47,30 @@ export function AgentHeader({ userName, userEmail }: AgentHeaderProps) {
         </nav>
 
         {/* Right Side Icons */}
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-4">
           {/* Notification Bell */}
-          <button className="relative p-1 hover:opacity-80 transition-opacity">
+          <button className="relative w-6 h-6 flex items-center justify-center hover:opacity-80 transition-opacity">
             <Image
               src="/assets/notification-icon.svg"
               alt="Notifications"
-              width={18}
-              height={21}
+              width={20}
+              height={22}
             />
             {/* Notification Dot */}
-            <span className="absolute top-0 right-0 w-1.5 h-1.5 bg-red-500 rounded-full"></span>
+            <span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-red-500 rounded-full"></span>
           </button>
 
           {/* Profile Icon with Dropdown */}
           <div className="relative">
             <button
               onClick={() => setShowProfileMenu(!showProfileMenu)}
-              className="w-6 h-6 rounded-full overflow-hidden hover:opacity-80 transition-opacity"
+              className="w-6 h-6 flex items-center justify-center hover:opacity-80 transition-opacity"
             >
               <Image
                 src="/assets/profile-icon.svg"
                 alt="Profile"
                 width={24}
                 height={24}
-                className="w-full h-full"
               />
             </button>