diff --git a/css/style.css b/css/style.css
index 51717507..5b414e9e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -49,9 +49,18 @@ html {
 }
 
 .navbar-logo {
-  font-size: 1.5rem;
-  color: #fff;
+  display: flex;
+  align-items: flex-start;
+  color: #f43f5e;
   text-decoration: none;
+  font-size: 1.75rem;
+  font-weight: 800;
+  margin-left: -161px;
+  margin-right: 182px;
+ justify-content: center;
+  flex-wrap: wrap;
+  flex-direction: row;
+  align-content: flex-start;
 }
 
 .navbar-menu {
@@ -91,13 +100,13 @@ html {
   margin-right: 10px;    /* Add some space between logo and text */
 }
 
-.navbar-logo {
+/* .navbar-logo {
   display: flex;
   align-items: center;
   color: #fff;
   text-decoration: none;
   font-size: 1.5rem;
-}
+} */
 
 #progress-container {
   position: fixed ;
diff --git a/navbar.css b/navbar.css
index cf6a2e2d..c9456eda 100644
--- a/navbar.css
+++ b/navbar.css
@@ -257,23 +257,36 @@ body {
 
 /* Hover effect with futuristic line animation */
 .navbar ul li a::after {
-  content: "";
+  content: '';
   position: absolute;
   left: 0;
   right: 0;
   bottom: -5px;
   height: 2px;
   background-color: var(--accent-color);
-  transition: width 0.3s ease;
   width: 0%;
+  transition: width 0.3s ease;
 }
+
 .navbar ul li a:hover {
   color: var(--accent-color);
   transform: scale(1.05);
 }
+
 .navbar ul li a:hover::after {
   width: 100%;
+  animation: underlineAnimation 0.3s forwards;
 }
+
+@keyframes underlineAnimation {
+  from {
+      width: 0%;
+  }
+  to {
+      width: 100%;
+  }
+}
+
 /* Toggle theme button */
 .theme-toggle {
   position: absolute;
diff --git a/styles.css b/styles.css
index 4c233037..d4cdab89 100644
--- a/styles.css
+++ b/styles.css
@@ -356,8 +356,8 @@ font-family: 'Poppins', sans-serif;
 color: var(--text-color);
 text-decoration: none;
 padding: 8px 16px;
-font-weight: 500;
-font-size: 16px;
+font-weight: 600;
+font-size: 21px;
 transition: color 0.3s ease, transform 0.3s ease;
 position: relative;
 }