can you fix the header to include `ChatterBoxFrenzy` in white? and include a "Messages" icon, a "Home" icon, a "Profile" icon and a "+" icon

components/navbar.js

@@ -21,18 +21,24 @@ class CustomNavbar extends HTMLElement {
             <nav class="text-white shadow-sm py-3">
 <div class="nav-container px-4 flex justify-between items-center">
                     <div class="logo flex items-center gap-2">
-                        <i data-feather="message-square" class="w-6 h-6"></i>
-                        <span class="text-xl font-bold">ChatterBox</span>
+                        <i data-feather="message-circle" class="w-6 h-6"></i>
+                        <span class="text-xl font-bold">ChatterBoxFrenzy</span>
                     </div>
                     <div class="flex items-center gap-2">
-                        <button class="p-2 rounded-full hover:bg-blue-600">
-                            <i data-feather="settings"></i>
-                        </button>
-                        <button class="p-2 rounded-full hover:bg-blue-600">
+                        <a href="/" class="p-2 rounded-full hover:bg-blue-600 text-white">
+                            <i data-feather="home"></i>
+                        </a>
+                        <a href="#" class="p-2 rounded-full hover:bg-blue-600 text-white">
+                            <i data-feather="message-square"></i>
+                        </a>
+                        <a href="#" class="p-2 rounded-full hover:bg-blue-600 text-white">
                             <i data-feather="user"></i>
-                        </button>
+                        </a>
+                        <a href="#" class="p-2 rounded-full hover:bg-blue-600 text-white">
+                            <i data-feather="plus"></i>
+                        </a>
                     </div>
-                </div>
+</div>
             </nav>
         `;
     }