diff --git a/index.html b/index.html
index e3501f8..29397ec 100644
--- a/index.html
+++ b/index.html
@@ -27,18 +27,27 @@
       <img src="./image/design-files/logo/icon-menu.svg" id="navbar-menu-icon-1" alt="MENU Icone" />
       <div class="navbar-link-list">
         <div id="navbar-link-list-container">
-          <div>
-            <a href="#discription-title-id"><i class="uil-users-alt navbar-mobile-icon"></i> Meet Our Contributors</a>
-          </div>
-          <div>
-            <a href="https://github.com/amyyalex/simple-contribution?tab=readme-ov-file#simple-contribution"
-              target="_blank"><i class="uil-question-circle navbar-mobile-icon"></i> About Our Community</a>
-          </div>
-          <div>
-            <a href="https://discord.gg/JhCdztuAcm" target="_blank"><i class="uil-user-plus navbar-mobile-icon"></i>
-              Join Our Community</a>
-          </div>
-        </div>
+  <div id="navbar-link-list-container">
+  <div>
+    <a href="#discription-title-id" class="nav-btn">
+      <i class="uil-users-alt navbar-mobile-icon"></i> 
+      Meet Our Contributors
+    </a>
+  </div>
+  <div>
+    <a href="https://github.com/amyyalex/simple-contribution?tab=readme-ov-file#simple-contribution"
+      target="_blank" class="nav-btn">
+      <i class="uil-question-circle navbar-mobile-icon"></i> 
+      About Our Community
+    </a>
+  </div>
+  <div>
+    <a href="https://discord.gg/JhCdztuAcm" target="_blank" class="nav-btn">
+      <i class="uil-user-plus navbar-mobile-icon"></i>
+      Join Our Community
+    </a>
+  </div>
+</div>
 
         <div class="navbar-space-evenly-on-mobile" id="navbar-social-media-container">
           <a href="https://github.com/amyyalex/simple-contribution" target="_self"><i class="uil uil-github"
diff --git a/style/style.css b/style/style.css
index 23f5bf0..d7fab46 100644
--- a/style/style.css
+++ b/style/style.css
@@ -159,6 +159,29 @@ section {
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
 }
 
+/* Navbar Button Styling */
+#navbar-link-list-container .nav-btn {
+  padding: 8px 18px;
+  border: 2px solid rgb(109, 106, 124);
+  border-radius: 8px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  background-color: transparent;
+}
+
+/* Remove underline animation for nav buttons */
+#navbar-link-list-container .nav-btn::after {
+  display: none;
+}
+
+/* Button Hover Effect */
+#navbar-link-list-container .nav-btn:hover {
+  background-color: #4b5563;   /* Medium Slate Grey */
+  color: #fff;
+  animation: none;
+}
+
+
 #navbar-social-media-container {
   display: none;
 }