diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 3e300bd..b359a7b 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -2,36 +2,31 @@ 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 }) =>
-        isActive ? 'text-fuchsia-50 font-semibold' : 'text-fuchsia-50';
 
     return (
         <div className="relative">
-            {/* The fixed bottom navbar */}
             <nav
-                className="fixed bottom-0 left-0 right-0 flex justify-around bg-violet-800 border-t border-violet-950 py-2 z-10">
-                <NavLink to="/" className={linkClasses}>
-                    <FaHome className="w-6 h-6"/>
+                className="fixed bottom-0 left-0 right-0 flex justify-around bg-violet-900 py-2 z-10">
+                <NavLink to="/">
+                    <FaHome className="w-6 h-6 text-fuchsia-400"/>
                 </NavLink>
-                <NavLink to="/feed" className={linkClasses}>
-                    <FaList className="w-6 h-6"/>
+                <NavLink to="/feed">
+                    <FaList className="w-6 h-6 text-fuchsia-400"/>
                 </NavLink>
-                {/* Placeholder for spacing */}
                 <div className="w-16"></div>
-                <NavLink to="/archive" className={linkClasses}>
-                    <FaArchive className="w-6 h-6"/>
+                <NavLink to="/archive">
+                    <FaArchive className="w-6 h-6 text-fuchsia-400"/>
                 </NavLink>
-                <NavLink to="/profile" className={linkClasses}>
-                    <FaUser className="w-6 h-6"/>
+                <NavLink to="/profile">
+                    <FaUser className="w-6 h-6 text-fuchsia-400"/>
                 </NavLink>
             </nav>
 
-            {/* The record button lifted up */}
             <NavLink
                 to="/record"
-                className="fixed bottom-1 left-1/2 transform -translate-x-1/2 bg-violet-500 p-4 rounded-full z-20"
+                className="fixed bottom-2 left-1/2 transform -translate-x-1/2 bg-violet-700 p-4 rounded-full border-6 border-background z-20"
             >
-                <FaMicrophone className="w-8 h-8 text-white"/>
+                <FaMicrophone className="w-8 h-8 text-fuchsia-400"/>
             </NavLink>
         </div>
     );
diff --git a/src/index.css b/src/index.css
index 444f889..6a6bc85 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,14 @@
 @import "tailwindcss";
 
 :root {
+  --background-color: var(--color-pink-900);
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  background-color: var(--background-color);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -15,6 +16,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.border-background {
+  border-color: var(--background-color);
+}
+
 a {
   font-weight: 500;
   color: #646cff;
@@ -59,7 +64,7 @@ button:focus-visible {
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
-    background-color: #ffffff;
+    --background-color: #ffffff;
   }
   a:hover {
     color: #747bff;