diff --git a/src/Client/src/components/Footer.tsx b/src/Client/src/components/Footer.tsx
index a56079f..821707d 100644
--- a/src/Client/src/components/Footer.tsx
+++ b/src/Client/src/components/Footer.tsx
@@ -8,7 +8,7 @@ export default function Footer() {
       <div className="mx-auto py-8">
         <div className="md:flex md:items-center md:justify-between">
           <SocialIcons />
-          <p className="mt-4 text-xs leading-5 text-slate-100 md:order-1 md:mt-0">
+          <p className="mt-4 text-xs leading-5 text-gray-100 md:order-1 md:mt-0">
             &copy; {currentYear} Beau Findlay. All rights reserved.
           </p>
         </div>
diff --git a/src/Client/src/components/NavLink.tsx b/src/Client/src/components/NavLink.tsx
index 16b4154..ae04782 100644
--- a/src/Client/src/components/NavLink.tsx
+++ b/src/Client/src/components/NavLink.tsx
@@ -7,14 +7,14 @@ interface Props {
 }
 
 export default function NavLink({ children, to, className }: Props) {
-  const defaultStyles = "text-sm font-semibold leading-6";
+  const defaultStyles = "text-base font-semibold leading-6 hover:text-gray-300";
   const styles = className ? className : defaultStyles;
 
   return (
     <ReactNavLink
       to={to}
       className={({ isActive }) =>
-        isActive ? `${styles} underline underline-offset-2` : styles
+        isActive ? `${styles} underline underline-offset-4` : styles
       }
     >
       {children}
diff --git a/src/Client/src/components/SocialIcons.tsx b/src/Client/src/components/SocialIcons.tsx
index c816a76..d916b09 100644
--- a/src/Client/src/components/SocialIcons.tsx
+++ b/src/Client/src/components/SocialIcons.tsx
@@ -29,7 +29,7 @@ export default function SocialIcons({ size = 20 }: Props) {
         <a
           key={socialIcon.name}
           href={socialIcon.href}
-          className="text-slate-200 hover:text-slate-500"
+          className="text-gray-100 hover:text-gray-300"
         >
           <span className="sr-only">{socialIcon.name}</span>
           {socialIcon.icon}