diff --git a/src/index.css b/src/index.css
index c68168c..9176255 100644
--- a/src/index.css
+++ b/src/index.css
@@ -17,8 +17,20 @@
   html {
     @apply text-white;
   }
+
   
-  
+}
+
+a:hover {
+    color: rgb(var(--color-primary-light));
+}
+
+nav > ul > li >a:hover {
+    color: white;
+}
+
+nav > a:hover {
+    color: white;
 }
 
 body {
diff --git a/src/pages/layout.js b/src/pages/layout.js
index bd23a21..94a5501 100644
--- a/src/pages/layout.js
+++ b/src/pages/layout.js
@@ -40,21 +40,23 @@ export default function Home(){
                       <div className='text-center'>
                           <h4>Pages</h4>
                           <ul>
-                              <li><Link to="/">Home</Link></li>
-                              <li><Link to="/contact">RSVP</Link></li>
-                              <li><Link to="/social">Social</Link></li>
-                              <li><Link to="/eventdetails">Calendar</Link></li>
-                              <li><Link to="/about">About</Link></li>
+                              <li className={"hover:text-primary-light"}><Link to="/">Home</Link></li>
+                              <li className={"hover:text-primary-light"}><Link to="/contact">RSVP</Link></li>
+                              <li className={"hover:text-primary-light"}><Link to="/social">Social</Link></li>
+                              <li className={"hover:text-primary-light"}><Link to="/eventdetails">Calendar</Link></li>
+                              <li className={"hover:text-primary-light"}><Link to="/about">About</Link></li>
                           </ul>
                       </div>
                       <div className='text-center'>
                           <h4>Social</h4>
-                          <ul> 
-                              <li><a href={SocialLinks.Instagram}>Instagram</a></li>
-                              <li><a href={SocialLinks.Facebook}>Facebook</a></li>
-                              <li><a href={SocialLinks.YouTube}>YouTube</a></li>
-                              <li><a href={SocialLinks.Twitter}>Twitter</a></li>
-                              <li><a href={SocialLinks.LinkedIn}>LinkedIn</a></li>
+
+                          <ul>
+                              <li className={"hover:text-primary-light"}><a href={SocialLinks.Instagram}>Instagram</a></li>
+                              <li className={"hover:text-primary-light"}><a href={SocialLinks.Facebook}>Facebook</a></li>
+                              <li className={"hover:text-primary-light"}><a href={SocialLinks.YouTube}>YouTube</a></li>
+                              <li className={"hover:text-primary-light"}><a href={SocialLinks.Twitter}>Twitter</a></li>
+                              <li className={"hover:text-primary-light"}><a href={SocialLinks.LinkedIn}>LinkedIn</a></li>
+
                           </ul>
                       </div>
                   </div>