diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 8671b1a..9fae3ca 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,5 +1,5 @@
 import { NavLink } from 'react-router-dom';
-import {FaHome} from "react-icons/fa";
+import {FaArchive, FaHome, FaList, FaMicrophone, FaUser} from "react-icons/fa";
 
 export default function Navbar() {
     const linkClasses = ({ isActive }: { isActive: boolean }) =>
@@ -19,16 +19,16 @@ export default function Navbar() {
                 <FaHome className="w-6 h-6"/>
             </NavLink>
             <NavLink to="/feed" className={linkClasses}>
-                Feed
+                <FaList className="w-6 h-6" />
             </NavLink>
             <NavLink to="/record" className={linkClasses}>
-                Record
+                <FaMicrophone className="w-6 h-6" />
             </NavLink>
             <NavLink to="/archive" className={linkClasses}>
-                Archive
+                <FaArchive className="w-6 h-6" />
             </NavLink>
             <NavLink to="/profile" className={linkClasses}>
-                Profile
+                <FaUser className="w-6 h-6" />
             </NavLink>
         </nav>
     );
diff --git a/src/styles/navbar.css b/src/styles/navbar.css
index e4afdbf..fa2524c 100644
--- a/src/styles/navbar.css
+++ b/src/styles/navbar.css
@@ -3,7 +3,7 @@ nav {
     display: flex;
     justify-content: center;
     gap: 2rem;
-    background-color: #f3f4f6;
+    background-color: #6D5CC4;
     padding: 1rem 0;
 }