diff --git a/index.html b/index.html
index 14ac60b..5082763 100644
--- a/index.html
+++ b/index.html
@@ -73,7 +73,7 @@
 <!-- <nav class="navbar navbar-expand-lg fixed-top navbar_background">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">
-      <img src="./assets/logo_white.png" alt="Bootstrap" width="370">
+      <img src="./assets/logo_white.png" alt="Bootstrap" width="370" style="margin-left: 3rem;">
     </a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon "></span>
@@ -81,22 +81,22 @@
     <div class="collapse navbar-collapse pe-5" id="navbarSupportedContent">
       <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
         <li class="nav-item">
-          <a class="nav-link text-light decorate-text" href="#">Home</a>
+          <a class="nav-link" href="#">Home</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link text-light decorate-text" href="#apod">APoD</a>
+          <a class="nav-link" href="#apod">APoD</a>
         </li>
         <li class="nav-item ">
-          <a class="nav-link text-light decorate-text" href="#mars">MartianImagery</a>
+          <a class="nav-link text-light decorate-text" href="./Pages/earthPics/index.html">EPIC View</a>
         </li>
-        <li class="nav-item ">
-          <a class="nav-link text-light decorate-text" href="./Pages/asteroid-info/index.html">NeoWs</a>
+        <li class="nav-item">
+          <a class="nav-link" href="#mars">MartianImagery</a>
         </li>
-        <li class="nav-item ">
-          <a class="nav-link text-light decorate-text" href="./Pages/earthPics/index.html">EPIC View</a>
+        <li class="nav-item">
+          <a class="nav-link" href="./Pages/asteroid-info/index.html">NeoWs</a>
         </li>
         <li class="nav-item">
-         <a href="#contact"> <button class="btn btn-outline-light rounded-pill decorate-text" type="submit">Contact Us</button></a>
+         <a href="#contact" class="nav-link contact">Contact Us</a>
         </li>
     </div>
   </div>
diff --git a/style.css b/style.css
index 835e7f7..7af5877 100644
--- a/style.css
+++ b/style.css
@@ -352,6 +352,26 @@ body {
   transform: scale(1.1);
   transition: color 0.2s ease; /* Smooth transition for color change */
 }
+.navbar-nav{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 1rem;
+}
+.nav-item{
+  border:transparent;
+  background-color: rgb(191, 0, 255);
+  border-radius: 1.1rem;
+  padding:0rem 0.5rem;
+}
+.nav-link{
+  font-weight: bolder;
+  color: white;
+}
+.nav-item:hover{
+  color:black;
+  background-color: white;
+}
 
 .spinner {
   background-image: linear-gradient(rgb(186, 66, 255) 35%,rgb(0, 225, 255));