diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 9fae3ca..45763fb 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,34 +1,28 @@
-import { NavLink } from 'react-router-dom';
+import {NavLink} from 'react-router-dom';
 import {FaArchive, FaHome, FaList, FaMicrophone, FaUser} from "react-icons/fa";
 
 export default function Navbar() {
-    const linkClasses = ({ isActive }: { isActive: boolean }) =>
+    const linkClasses = ({isActive}: { isActive: boolean }) =>
         isActive
             ? 'text-blue-600 font-semibold'
             : 'text-gray-600';
 
     return (
-        <nav className="
-      fixed bottom-0 left-0 right-0   /* pin to bottom */
-      flex justify-around             /* evenly spaced links */
-      bg-white border-t border-gray-200  /* top border for separation */
-      py-2                            /* vertical padding */
-      shadow-lg                       /* subtle drop shadow */
-      ">
+        <nav className="nav fixed bottom-0 left-0 right-0 flex justify-around border-t border-gray-200 py-2 ">
             <NavLink to="/" className={linkClasses}>
                 <FaHome className="w-6 h-6"/>
             </NavLink>
             <NavLink to="/feed" className={linkClasses}>
-                <FaList className="w-6 h-6" />
+                <FaList className="w-6 h-6"/>
             </NavLink>
             <NavLink to="/record" className={linkClasses}>
-                <FaMicrophone className="w-6 h-6" />
+                <FaMicrophone className="w-6 h-6"/>
             </NavLink>
             <NavLink to="/archive" className={linkClasses}>
-                <FaArchive className="w-6 h-6" />
+                <FaArchive className="w-6 h-6"/>
             </NavLink>
             <NavLink to="/profile" className={linkClasses}>
-                <FaUser className="w-6 h-6" />
+                <FaUser className="w-6 h-6"/>
             </NavLink>
         </nav>
     );
diff --git a/src/styles/navbar.css b/src/styles/navbar.css
index fa2524c..672f6ce 100644
--- a/src/styles/navbar.css
+++ b/src/styles/navbar.css
@@ -3,12 +3,12 @@ nav {
     display: flex;
     justify-content: center;
     gap: 2rem;
-    background-color: #6D5CC4;
+    background-color: darkviolet;
     padding: 1rem 0;
 }
 
 nav a {
-    color: #4b5563;
+    color: whitesmoke;
     text-decoration: none;
     font-weight: 500;
 }