diff --git a/officialCode b/officialCode
new file mode 100644
index 00000000..e69de29b
diff --git a/styles/main.css b/styles/main.css
index 22e6822e..0b07c299 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -15,29 +15,58 @@ html {
 
 
 /* =================== Navbar Styles Start Here ================== */
-.navbar {
-    background-color: #ffffff;
-
-}
-
-.navbar-brand {
-    font-size: 2.1rem;
-    font-weight: 900;
-    color: #2563eb;
-}
-
-.navbar-brand:hover {
-    color: #2563eb;
-}
-
-.navbar-brand span {
-    color: #1e2c44;
-}
 
 .nav-item a {
-    color: #1e2c44;
-    font-size: 20px;
-
+  position: relative;
+  display: inline-block;
+  padding: 10px 18px;
+  margin: 0 8px;
+  font-weight: 500;
+  font-size: 20px;
+  color: #1e2c44;
+  background-color: transparent;
+  text-decoration: none;
+  border-radius: 8px;
+  transition: all 0.3s ease-in-out;
+}
+
+/* ============ Hover Effect ============ */
+.nav-item a:hover {
+  color: #4c52f0;
+  background-color: #d1dbf1;
+  transform: scale(1.05);
+  box-shadow: 0 8px 16px rgba(76, 82, 240, 0.25);
+}
+
+/* ============ Underline Animation ============ */
+.nav-item a::after {
+  content: '';
+  position: absolute;
+  bottom: 4px;
+  left: 20%;
+  width: 0;
+  height: 2px;
+  background-color: #4c52f0;
+  transition: width 0.4s ease-in-out;
+}
+
+.nav-item a:hover::after {
+  width: 60%;
+}
+
+/* ============ Active Link Override ============ */
+.nav-item a.active {
+  color: #1e2c44;
+  background-color: transparent;
+  font-weight: 500;
+  box-shadow: none;
+}
+
+.nav-item a.active:hover {
+  color: #4c52f0;
+  background-color: #d1dbf1;
+  transform: scale(1.05);
+  box-shadow: 0 8px 16px rgba(76, 82, 240, 0.25);
 }
 
 /* ================== Navbar Styles End Here ================== */