diff --git a/commonStyles.css b/commonStyles.css
index 23c8de83..5360cc53 100644
--- a/commonStyles.css
+++ b/commonStyles.css
@@ -10,11 +10,33 @@
   font-family: 'Arizonia', cursive;
 }
 
+.title{
+  font-size: 20px;
+}
+.title:hover{
+  color: #034304;
+}
+
+.nav-link:hover{
+  color: #034304;
+}
+
+.nav-grp-item{
+  color: #056b07;
+}
+
+.nav-grp-item:hover{
+  color: #034304;
+}
+
+.contributors{
+  margin-bottom: 110px;
+}
+
 /* Footer  */
 footer{
   background-color: rgb(243 244 246 / 1);
   color: black;
-
   padding: 0;
 }
 
@@ -32,6 +54,7 @@ footer{
   justify-content: center;
   align-items: center;
   gap: 30px;
+  margin-top: 40px;
 }
 
 .footer-list ul, .footer-socials ul {
@@ -39,6 +62,10 @@ footer{
   padding: 0;
 }
 
+.footer-socials{
+  margin-bottom: 40px;
+}
+
 .copyright{
   color: black;
   font-size: small;
diff --git a/index.html b/index.html
index bfafa3ad..50a2c41a 100644
--- a/index.html
+++ b/index.html
@@ -156,11 +156,11 @@ <h1 class="text-xs uppercase font-semibold tracking-widest">Menu</h1>
            class="heroSection h-[100vh] flex px-0  text-2xl lg:text-lg flex-col items-center bg-[url('./Images/HeroSection.jpeg')] bg-top bg-no-repeat bg-cover">
 
         <!-- Navbar  -->
-        <div class="indexNavbar fixed top-0 px-4 py-3 ease-in-out text-white duration-300 flex z-30 items-center justify-between w-full left-0 bg-gradient-to-l from-[#009933] to-[#c4e327]">
+        <div class="indexNavbar fixed top-0 px-4 py-4 ease-in-out text-white duration-300 flex z-30 items-center justify-between w-full left-0 bg-gradient-to-l from-[#009933] to-[#c4e327]">
           <div class="leftSection">
             <a class="flex items-center" href="./index.html">
-              <img src="./Images/New_Logo_2.png" alt="Moksh Logo" class="w-[4rem] h-[4rem] rounded-full" />
-              <span class="ml-3 text-base lg:text-2xl uppercase font-semibold projectName tracking-widest ease-in-out duration-300 hover:text-indigo-600">Moksh</span>
+              <img src="./Images/New_Logo_2.png" alt="Moksh Logo" class="w-[3rem] h-[3rem] rounded-full" />
+              <span class="ml-3 text-base lg:text-2xl uppercase font-semibold projectName tracking-widest ease-in-out duration-300 title">Moksh</span>
             </a>
           </div>
           <div class="rightSection pr-4">
@@ -169,23 +169,23 @@ <h1 class="text-xs uppercase font-semibold tracking-widest">Menu</h1>
               <ul class="hidden md:flex items-center gap-10 uppercase text-xs font-semibold tracking-wider ">
                 <li>
                   <a href="./index.html"
-                     class="pb-3 hover:text-indigo-600 relative font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 ">Home</a>
+                     class="pb-3 nav-link relative font-semibold after:content-[''] af ">Home</a>
                 </li>
                 <li>
                   <a href="#mental"
-                     class="pb-3 hover:text-indigo-600 relative font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 ">
+                     class="pb-3 nav-link relative font-semibold after:content-[''] af ">
                     Mental Health Problems </a>
                 </li>
                 <li>
                   <a href="./Blogs/Blog.html"
-                     class="pb-3 hover:text-indigo-600 relative font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 ">Power
+                     class="pb-3 nav-link relative font-semibold after:content-[''] af ">Power
                     of
                     Knowledge Blogs </a>
                 </li>
 
                 <li class="relative group">
                   <a href="#"
-                     class="pb-3 mt-3 group-hover:text-indigo-600 relative font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 group-hover:after:w-full after:ease-in-out after:duration-300 flex items-center">
+                     class="pb-3 mt-3 nav-link relative flex items-center">
                     <span>Features</span>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                          class="ml-2 w-3 h-3 group-hover:rotate-180 ease-in-out group-hover:text-indigo-600 duration-300 ">
@@ -198,24 +198,17 @@ <h1 class="text-xs uppercase font-semibold tracking-widest">Menu</h1>
                   <div
                        class="absolute hidden group-hover:flex bg-white text-indigo-600 p-4 w-80  shadow-2xl right-0 top-10 flex-col">
                     <a href="AR_Meditate/meditation.html"
-                       class="relative pt-5 pb-1 font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 ">Augmented
-                      Reality
-                      Meditation</a>
-                    <a href="Iskcon/event.html"
-                       class="relative pt-5 pb-1 font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 ">Iskcon
+                       class="relative pt-5 pb-1 nav-grp-item ">Iskcon
                       Events</a>
                     <a href="Divine_page/story.html"
-                       class="relative pt-5 pb-1 font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 ">Divine
+                       class="relative pt-5 pb-1 nav-grp-item ">Divine
                       Activities for all Generation</a>
                     <a href="Pomodro_page/reward.html"
-                       class="relative pt-5 pb-1 font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 ">Pomodoro
+                       class="relative pt-5 pb-1 nav-grp-item">Pomodoro
                       Spiritual Break</a>
                     <a href="shlok_page/motivation.html"
-                       class="relative pt-5 pb-1 font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 ">Read
-                      a
-                      Shlok</a>
-                    <a href="Rejuvenate_page/rejuvenate.html"
-                       class="relative pt-5 pb-1 font-semibold after:content-[''] after:bottom-0 after:h-1 after:w-0 after:left-0 after:absolute after:bg-indigo-600 hover:after:w-full after:ease-in-out after:duration-300 ">Rejuvenate</a>
+                       class="relative pt-5 pb-1 nav-grp-item">Read
+">Rejuvenate</a>
                   </div>
                 </li>
               </ul>
@@ -482,7 +475,7 @@ <h1 class="text-indigo-600 text-center mb-10 uppercase font-semibold">
           <div class="footer-divide ">
             <div class="flex justify-center items-center">
               <div class="w-32 h-32 my-2 rounded-full overflow-hidden">
-                <img src="./Images/New_Logo_2.png" alt="Moksh Logo" class="object-cover" />
+                <img src="./Images/New_Logo_2.png" alt="Moksh Logo" class="object-cover footer-image" />
               </div>
             </div>
             <div class="footer-divide-text">