diff --git a/404.html b/404.html
index 4986482..039c703 100644
--- a/404.html
+++ b/404.html
@@ -10,9 +10,9 @@
       <path d="M30 30L70 70M70 30L30 70" stroke="#EF4444" stroke-width="4" stroke-linecap="round"/>
     </svg>
     
-    <h1 class="text-3xl text-[{{site.text-colors.darkblue}}] font-bold mb-3">404 - Page Not Found</h1>
-    <p class="text-[{{site.text-colors.gray}}] mb-6">Oops! You've ventured off the beaten path.</p>
+    <h1 class="text-3xl text-[{{site.text-colors.darkblue}}] font-montserrat font-bold mb-3">404 - Page Not Found</h1>
+    <p class="text-[{{site.text-colors.gray}}] font-inter mb-6">Oops! You've ventured off the beaten path.</p>
     
-    <a href="/" class="bg-[{{site.bg-colors.orange-button}}] text-white px-4 py-2 rounded hover:bg-[{{site.bg-colors.orange-button}}]/80 transition duration-300">Go to Home</a>
+    <a href="/" class="bg-[{{site.bg-colors.orange-button}}] font-inter text-white px-4 py-3 rounded hover:bg-[{{site.bg-colors.orange-button}}]/80 transition duration-300">Go to Home</a>
   </div>
 </div>
\ No newline at end of file
diff --git a/_events/kec-lite.markdown b/_events/kec-lite.markdown
index a18d890..b808a9a 100644
--- a/_events/kec-lite.markdown
+++ b/_events/kec-lite.markdown
@@ -24,22 +24,22 @@ custom_layout: true
 
 <!-- Content -->
 <div class="container py-10 px-2 mx-auto items-center">
-  <h2 class="text-5xl font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8">
+  <h2 class="text-5xl font-montserrat font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8">
     KEC LITE: A Premier Technical Exhibition
   </h2>
     
   <!-- Image Needs to be changed later-->
-  <div class="w-full h-[518.54px] bg-cover bg-center rounded-[24px] mx-auto" style="background-image: url('../assets/images/events/kec-lite-2024.png'); background-size: contain; background-repeat: no-repeat;">
+  <div class="w-full h-[518.54px] bg-cover bg-center rounded-[24px] mx-auto" style="background-image: url('../assets/images/events/kec-lite-2024/banner.jpg'); background-size: contain; background-repeat: no-repeat;">
   </div>
 
 
   <!-- Description -->
-  <p class="text-[16px] leading-[120%] font-normal text-black mx-auto mt-4">
+  <p class="text-[16px] leading-[120%] font-inter font-normal text-black mx-auto mt-4">
     KEC LITE (Learning and Innovating Technology for Enhancement) is an annual two-day inter-college technical exhibition organized by Kantipur Engineering College. The event is a platform for showcasing the talents and abilities of engineering and science students from different colleges and universities.
   </p>
 
   <!-- Overview -->
-  <div class="mx-auto mt-4">
+  <div class="font-inter mx-auto mt-4">
     <h3 class="text-[24px] font-bold text-black">Overview of KEC LITE</h3>
     <p class="text-[16px] leading-[120%] font-normal text-black">
       <b>Date:</b> Annually in February<br>
@@ -51,7 +51,7 @@ custom_layout: true
   </div>
 
   <!-- Events -->
-  <div class="mx-auto mt-4">
+  <div class="font-inter mx-auto mt-4">
     <h3 class="text-[24px] font-bold text-black">Major Events under KEC Computer Club</h3>
     <p class="text-[16px] leading-[120%] font-normal text-black">
       The Computer Club at KEC plays a crucial role in KEC LITE by hosting events that focus on software and programming-related activities. Major events include:
@@ -66,7 +66,7 @@ custom_layout: true
   </div>
 
   <!-- Objectives-->
-  <div class="mx-auto mt-4">
+  <div class="font-inter mx-auto mt-4">
     <h3 class="text-[24px] font-bold text-black">Objectives of KEC LITE</h3>
     <ol class="list-decimal list-inside">
         <li>To provide students with a platform to develop practical knowledge and sharpen their technical skills.</li>
@@ -77,7 +77,7 @@ custom_layout: true
   </div>
 
   <!-- Contributing -->
-  <div class="mx-auto mt-4">
+  <div class="font-inter mx-auto mt-4">
     <h3 class="text-[24px] font-bold text-black">Contribution Opportunities</h3>
     <p class="text-[16px] leading-[120%] font-normal text-black">
       KEC LITE thrives on student participation and collaboration. If you're a student or tech enthusiast, join the Computer Club to get involved in organizing or competing in KEC LITE. Whether you're interested in hackathons, software development, or simply learning from industry experts, this is the place to build your skills and network.<br>Stay connected with the Computer Club for updates on upcoming events and opportunities to participate in KEC LITE and other exciting activities!
diff --git a/_includes/brands_colab.html b/_includes/brands_colab.html
index 07af420..4599d0a 100644
--- a/_includes/brands_colab.html
+++ b/_includes/brands_colab.html
@@ -1,9 +1,9 @@
 <section id="Brands-Collaboration" data-aos="fade-right">
   <div
-    class=" bg-[{{site.bg-colors.gray}}] flex flex-col justify-center gap-3 py-12 mt-4"
+    class=" bg-[{{site.bg-colors.gray}}] flex flex-col justify-center gap-3 pb-12 pt-8 mt-4"
   >
     <div
-      class="text-5xl font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8"
+      class="font-montserrat text-5xl font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8"
     >
       Brands We Have Collaborated With
     </div>
diff --git a/_includes/executive-members-list.html b/_includes/executive-members-list.html
index 47603e1..136e89e 100644
--- a/_includes/executive-members-list.html
+++ b/_includes/executive-members-list.html
@@ -1,12 +1,12 @@
 <div class="py-8 px-10 2xl:px-72 xl:px-44 lg:px-16 md:px-28 sm:px-6" data-aos="fade-up">
     <h2
-      class="text-5xl font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8"
+      class="text-5xl font-montserrat font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8"
     >
       Executive Members
     </h2>
   
     <!-- Toggle for Years -->
-    <div class="flex justify-center" data-aos="fade-up">
+    <div class="font-inter flex justify-center" data-aos="fade-up">
       <button
         id="btn-2024"
         class="toggle-btn font-bold border-4 border-[{{site.bg-colors.orange-button}}] bg-[{{site.bg-colors.orange-button}}] hover:bg-[{{site.bg-colors.orange-button}}]/90 text-white py-2 px-4 rounded-full mr-2"
@@ -40,7 +40,7 @@
             class="w-[300px] h-[300px] object-cover mb-4 2xl:mt-2 rounded-md"
           />
         </div>
-        <span class="text-start">
+        <span class="font-inter text-start">
           <h3 class="text-xl font-semibold text-center text-white">
             {{ member.name }}
           </h3>
@@ -50,7 +50,7 @@ <h3 class="text-xl font-semibold text-center text-white">
         <div
           class="description absolute inset-0 bg-[{{site.bg-colors.orange-button}}] cursor-pointer flex flex-col justify-between items-center text-white p-4 text-center rounded-lg opacity-0 transition-opacity duration-300 ease-in-out"
         >
-          <div class="flex-grow flex items-center justify-center">
+          <div class="font-inter flex-grow flex items-center justify-center">
             <p>{{ member.description }}</p>
           </div>
           <div class="social-icons flex justify-end w-full space-x-4 px-4 pb-4">
@@ -85,7 +85,7 @@ <h3 class="text-xl font-semibold text-center text-white">
             class="w-[300px] h-[300px] object-cover 2xl:mt-2 mb-4 rounded-md"
           />
         </div>
-        <span class="text-start">
+        <span class="font-inter text-start">
           <h3 class="text-xl font-semibold text-center text-white">
             {{ member.name }}
           </h3>
@@ -94,7 +94,7 @@ <h3 class="text-xl font-semibold text-center text-white">
         <div
           class="description absolute inset-0 bg-[{{site.bg-colors.orange-button}}] cursor-pointer flex flex-col justify-between items-center text-white p-4 text-center rounded-lg opacity-0 transition-opacity duration-300 ease-in-out"
         >
-          <div class="flex-grow flex items-center justify-center">
+          <div class="font-inter flex-grow flex items-center justify-center">
             <p>{{ member.description }}</p>
           </div>
           <div class="social-icons flex justify-end w-full space-x-4 px-4 pb-4">
diff --git a/_includes/executive-members.html b/_includes/executive-members.html
index d6629d2..516ac17 100644
--- a/_includes/executive-members.html
+++ b/_includes/executive-members.html
@@ -1,6 +1,6 @@
 <div class="py-8 px-10 2xl:px-72 xl:px-44 lg:px-16 md:px-28 sm:px-6" data-aos="fade-up">
   <h2
-    class="text-5xl font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8"
+    class="text-5xl font-montserrat font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8"
   >
     Executive Members
   </h2>
@@ -22,7 +22,7 @@
           class="w-[300px] h-[300px] object-cover mb-4 2xl:mt-2 rounded-md"
         />
       </div>
-      <span class="text-start">
+      <span class="font-inter text-start">
         <h3 class="text-xl font-semibold text-center text-white">
           {{ member.name }}
         </h3>
@@ -32,7 +32,7 @@ <h3 class="text-xl font-semibold text-center text-white">
       <div
         class="description absolute inset-0 bg-[{{site.bg-colors.orange-button}}] cursor-pointer flex flex-col justify-between items-center text-white p-4 text-center rounded-lg opacity-0 transition-opacity duration-300 ease-in-out"
       >
-        <div class="flex-grow flex items-center justify-center">
+        <div class="font-inter flex-grow flex items-center justify-center">
           <p>{{ member.description }}</p>
         </div>
         <div class="social-icons flex justify-end w-full space-x-4 px-4 pb-4">
diff --git a/_includes/footer.html b/_includes/footer.html
index b05078a..d07d230 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -4,13 +4,13 @@
   >
     <!-- Left Section: Contact Info -->
     <div class="text-center md:text-left">
-      <h2 class="md:text-4xl text-lg font-bold mb-4">{{site.title}}</h2>
-      <p class="mb-2 gap-4 flex md:text-base text-sm items-center">
+      <h2 class="font-montserrat md:text-4xl text-lg font-bold mb-4">{{site.title}}</h2>
+      <p class="font-inter mb-2 gap-4 flex md:text-base text-sm items-center">
         <i class="fas fa-location-dot"></i>
         Ground Floor, Teachers Block, KEC Marg Mathillo, Dhapakhel 23, Lalitpur,
         44700 NP
       </p>
-      <p class="mb-2 gap-3 md:text-base text-sm flex items-center">
+      <p class="font-inter mb-2 gap-3 md:text-base text-sm flex items-center">
         <i class="fa-solid fa-phone"></i>
         <span>
           <a href="tel:+977-1-5229204" class="hover:text-gray-400"
@@ -21,7 +21,7 @@ <h2 class="md:text-4xl text-lg font-bold mb-4">{{site.title}}</h2>
           ></span
         >
       </p>
-      <p class="mb-4 gap-4 md:text-base text-sm flex items-center">
+      <p class="font-inter mb-4 gap-4 md:text-base text-sm flex items-center">
         <i class="fa-solid fa-envelope"></i>
         <a href="mailto:computerclub@kec.edu.np" class="hover:text-gray-400">
           {{site.email}}
@@ -32,31 +32,31 @@ <h2 class="md:text-4xl text-lg font-bold mb-4">{{site.title}}</h2>
         <a
           href="https://www.facebook.com/{{ site.facebook_username }}"
           target="_blank"
-          class="hover:text-gray-400"
+          class="text-2xl hover:text-gray-400"
           ><i class="fab fa-facebook"></i
         ></a>
         <a
           href="https://www.instagram.com/{{ site.instagram_username }}"
           target="_blank"
-          class="hover:text-gray-400"
+          class="text-2xl hover:text-gray-400"
           ><i class="fab fa-instagram"></i
         ></a>
         <a
           href="https://www.linkedin.com/{{ site.linkedin_username }}"
           target="_blank"
-          class="hover:text-gray-400"
+          class="text-2xl hover:text-gray-400"
           ><i class="fab fa-linkedin"></i
         ></a>
         <a
           href="https://github.com/{{ site.github_username }}"
           target="_blank"
-          class="hover:text-gray-400"
+          class="text-2xl hover:text-gray-400"
           ><i class="fab fa-github"></i
         ></a>
         <a
           href="https://twitter.com/{{ site.twitter_username }}"
           target="_blank"
-          class="hover:text-gray-400"
+          class="text-2xl hover:text-gray-400"
           ><i class="fab fa-twitter"></i
         ></a>
       </div>
@@ -64,20 +64,20 @@ <h2 class="md:text-4xl text-lg font-bold mb-4">{{site.title}}</h2>
 
     <!-- Right Section: Newsletter Subscription -->
     <div class="mt-6 md:mt-0 text-center">
-      <h2 class="md:text-2xl text-base font-bold mb-4 text-start">
-        Subscribe to our newsletter
+      <h2 class="font-montserrat md:text-2xl text-base font-bold mb-4 text-start">
+        Subscribe to our Newsletter
       </h2>
       <form class="flex justify-center items-center bg-gray-500 p-2 rounded-lg">
         <div class="bg-gray-300 p-1 rounded-l-lg flex items-center">
           <input
             type="email"
             placeholder="example@gmail.com"
-            class="p-2 rounded-lg focus:outline-none text-black bg-transparent"
+            class="font-inter p-2 rounded-lg focus:outline-none text-black bg-transparent"
           />
         </div>
         <button
           type="submit"
-          class="bg-[{{site.bg-colors.orange-button}}] text-white px-4 py-3 rounded-r-lg hover:bg-[{{site.bg-colors.orange-button}}]/80"
+          class="bg-[{{site.bg-colors.orange-button}}] font-inter text-white px-4 py-3 rounded-r-lg hover:bg-[{{site.bg-colors.orange-button}}]/80"
         >
           Subscribe
         </button>
@@ -87,12 +87,13 @@ <h2 class="md:text-2xl text-base font-bold mb-4 text-start">
 
   <!-- Footer Bottom -->
 </footer>
-<div class="p-3 text-white border-gray-600 bg-[{{site.bg-colors.baseBlack}}]">
+<div class="font-inter p-3 text-white border-gray-600 bg-[{{site.bg-colors.baseBlack}}]">
   <div
     class="container mx-auto flex flex-col md:flex-row justify-between items-center"
   >
     <p class="text-sm text-center">
-      &copy; 2024 KEC Computer Club | All Rights Reserved
+      &copy; 2024  <a href="https://linktr.ee/computerclubkec"
+      target="_blank" class="font-bold hover:text-gray-400">KEC Computer Club</a> | All Rights Reserved
     </p>
     <p class="text-sm text-center">
       Designed & Developed by
diff --git a/_includes/header.html b/_includes/header.html
index adfcb5b..709c94c 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -6,9 +6,12 @@
 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
 <link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.css" rel="stylesheet" />
+<link
+  href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap"
+  rel="stylesheet">
 
 <link rel="icon" type="image/png" href="{{ '/assets/images/favicon.png' | relative_url }}" />
-<link
-  rel="stylesheet"
-  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
-/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
+
+<!-- Tailwind config -->
+<script src="/assets/js/tailwind.config.js"></script>
\ No newline at end of file
diff --git a/_includes/hero-section.html b/_includes/hero-section.html
index 4438151..2b75768 100644
--- a/_includes/hero-section.html
+++ b/_includes/hero-section.html
@@ -65,27 +65,27 @@
     </div>
 
     <!-- Main Content -->
-    <div class="mx-auto px-4 py-2 md:py-8 flex flex-col justify-center items-center">
+    <div class="mx-auto px-4 py-2 md:py-8 sm:py-8 flex flex-col justify-center items-center">
 
         <!-- Title Section -->
-        <div class="text-center mb-8 max-w-5xl">
-            <h1 class="text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-bold text-white tracking-tight leading-tight">
+        <div class="text-center mb-8 max-w-6xl">
+            <h1 class="font-montserrat text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-bold text-white tracking-tight leading-tight">
                 {{page.banner-title-1}}
             </h1>
             <h1
-                class="text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-4 tracking-tight leading-tight">
+                class="font-montserrat text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-4 tracking-tight leading-tight">
                 {{page.banner-title-2}}
             </h1>
-            <p class="text-lg sm:text-xl md:text-3xl text-blue-300 font-semibold mb-4">
+            <p class="font-inter text-lg sm:text-xl md:text-3xl text-blue-300 font-semibold mb-4">
                 {{page.banner-tagline}}
             </p>
-            <p class="text-sm md:text-lg text-gray-300 mb-2 max-w-4xl mx-auto">
+            <p class="font-inter text-sm md:text-lg text-gray-300 mb-2 max-w-4xl mx-auto">
                 {{page.banner-description}}
             </p>
         </div>
 
         <!-- Call to Action Buttons -->
-        <div class="flex flex-col sm:flex-row gap-4 mb-8">
+        <div class="font-inter flex flex-col sm:flex-row gap-4 mb-8">
             <a href="https://forms.gle/ySK2ux6zbZ5dC7qX8" target="_blank"
                 class="px-6 sm:px-8 py-3 text-base sm:text-lg font-semibold rounded-lg bg-[{{site.bg-colors.orange-button}}] text-white hover:bg-[{{site.bg-colors.orange-button}}]/80 transition-colors duration-300 flex items-center justify-center gap-2 group">
                 <i class="fas fa-user-plus text-lg group-hover:scale-110 transition-transform"></i>
diff --git a/_includes/nav.html b/_includes/nav.html
index b5e66d7..d315fdb 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -19,7 +19,7 @@
 
     <div class="hidden md:flex items-center relative">
         <ul
-            class="flex text-base sm:text-sm md:text-base lg:text-lg text-[{{ site.text-colors.gray }}]/80"
+            class="flex font-inter text-base sm:text-sm md:text-base lg:text-lg text-[{{ site.text-colors.gray }}]/80"
         >
             <li>
                 <a
@@ -162,7 +162,8 @@
         <div>
             <a
                 href="{{ '/contact' }}"
-                class="bg-[{{site.bg-colors.darkBlue}}] ml-8 text-white px-3 py-2 sm:px-3 sm:py-2 md:px-4 md:py-3 lg:px-4 lg:py-3 rounded-lg hover:bg-gray-800 text-sm sm:text-sm md:text-base lg:text-lg whitespace-nowrap transition-all duration-300"
+                class="bg-[{{site.bg-colors.darkBlue}}] ml-8 font-inter text-white px-3 py-2 sm:px-3 sm:py-2 md:px-4 md:py-3 lg:px-4 lg:py-3 rounded-lg hover:bg-gray-800 text-sm sm:text-sm md:text-base lg:text-lg whitespace-nowrap transition-all duration-300"
+                
                 id="contact-page"
                 >Contact us</a
             >
@@ -193,7 +194,7 @@
 <!-- responsive navbar for smaller screens -->
 <div id="mobileMenu" class="hidden fixed top-16 w-full md:hidden z-20">
     <ul
-        class="flex flex-col font-semibold text-base sm:text-base border border-[{{site.bg-colors.gray}}] text-[{{ site.text-colors.gray }}] bg-[{{ site.bg-colors.gray }}]"
+        class="flex flex-col font-inter font-semibold text-base sm:text-base border border-[{{site.bg-colors.gray}}] text-[{{ site.text-colors.gray }}] bg-[{{ site.bg-colors.gray }}]"
     >
         <li>
             <a
diff --git a/_includes/open-source-contributors.html b/_includes/open-source-contributors.html
index 8c10c06..8a045e6 100644
--- a/_includes/open-source-contributors.html
+++ b/_includes/open-source-contributors.html
@@ -1,6 +1,6 @@
 <div class="py-8 px-10 2xl:px-72 xl:px-44 lg:px-16 md:px-28 sm:px-6" data-aos="fade-up">
   <h2
-    class="text-5xl font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8"
+    class="text-5xl font-montserrat font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8"
   >
     Open-Source Contributors
   </h2>
@@ -22,7 +22,7 @@
           class="w-[300px] h-[300px] object-cover mb-4 2xl:mt-2 rounded-md"
         />
       </div>
-      <span class="text-start">
+      <span class="font-inter text-start">
         <h3 class="text-xl font-semibold text-center text-white">
           {{ contributors.name }}
         </h3>
@@ -32,7 +32,7 @@ <h3 class="text-xl font-semibold text-center text-white">
       <div
         class="description absolute inset-0 bg-[{{site.bg-colors.orange-button}}] cursor-pointer flex flex-col justify-between items-center text-white p-4 text-center rounded-lg opacity-0 transition-opacity duration-300 ease-in-out"
       >
-        <div class="flex-grow flex items-center justify-center">
+        <div class="font-inter flex-grow flex items-center justify-center">
           <p>{{ contributors.description }}</p>
         </div>
         <div class="social-icons flex justify-end w-full space-x-4 px-4 pb-4">
diff --git a/_includes/projects_section.html b/_includes/projects_section.html
index 5d8c9c1..a88324a 100644
--- a/_includes/projects_section.html
+++ b/_includes/projects_section.html
@@ -1,6 +1,6 @@
 <div class="flex flex-col justify-center gap-3 py-12 mt-4" data-aos="fade-up">
   <h2
-    class="text-5xl font-bold text-[{{ site.text-colors.darkblue }}] text-center mb-8"
+    class="text-5xl font-montserrat font-bold text-[{{ site.text-colors.darkblue }}] text-center mb-8"
   >
     Projects
   </h2>
@@ -14,7 +14,7 @@
     >
       <!-- Left Section: Title -->
       <div class="flex items-center">
-        <h2 class="text-2xl font-bold text-[{{ site.text-colors.base-black }}]">
+        <h2 class="text-2xl font-montserrat font-bold text-[{{ site.text-colors.base-black }}]">
           {{ project.title }}
         </h2>
       </div>
@@ -23,17 +23,17 @@ <h2 class="text-2xl font-bold text-[{{ site.text-colors.base-black }}]">
       <div class="flex flex-wrap gap-2">
         {% for status in project.status %} {% if status == "active" %}
         <span
-          class="bg-green-200 text-green-700 px-4 py-2 rounded-full text-sm font-bold"
+          class="bg-green-200 text-green-700 px-4 py-2 rounded-full text-sm font-inter font-bold"
           >Active/In Progress</span
         >
         {% elsif status == "open" %}
         <span
-          class="bg-orange-200 text-orange-700 px-4 py-2 rounded-full text-sm font-bold"
+          class="bg-orange-200 text-orange-700 px-4 py-2 rounded-full text-sm font-inter font-bold"
           >Open for Contribution</span
         >
         {% elsif status == "planning" %}
         <span
-          class="bg-yellow-200 text-yellow-700 px-4 py-2 rounded-full text-sm font-bold"
+          class="bg-yellow-200 text-yellow-700 px-4 py-2 rounded-full text-sm font-inter font-bold"
           >Planning</span
         >
         {% endif %} {% endfor %}
@@ -44,14 +44,14 @@ <h2 class="text-2xl font-bold text-[{{ site.text-colors.base-black }}]">
     <div class="flex flex-wrap gap-2">
       {% for tag in project.tags %}
       <span
-        class="bg-blue-200 text-blue-700 px-3 py-1 rounded-full text-sm font-bold"
+        class="bg-blue-200 text-blue-700 px-3 py-1 rounded-full text-sm font-inter font-bold"
         >{{ tag }}</span
       >
       {% endfor %}
     </div>
 
     <!-- Description Section -->
-    <p class="text-[{{ site.text-colors.base-black }}] text-sm">
+    <p class="font-inter text-[{{ site.text-colors.base-black }}] text-sm">
       {{ project.short_description }}
     </p>
 
@@ -69,7 +69,7 @@ <h2 class="text-2xl font-bold text-[{{ site.text-colors.base-black }}]">
       <!-- GitHub Button -->
       <a
         href="{{ project.github_url }}"
-        class="flex items-center space-x-2 bg-[{{ site.bg-colors.baseBlack }}] text-[{{ site.text-colors.white }}] px-4 py-2 rounded-lg hover:bg-gray-800"
+        class="font-inter flex items-center space-x-2 bg-[{{ site.bg-colors.baseBlack }}] text-[{{ site.text-colors.white }}] px-4 py-2 rounded-lg hover:bg-gray-800"
         target="_blank"
         rel="noopener noreferrer"
       >
@@ -83,7 +83,7 @@ <h2 class="text-2xl font-bold text-[{{ site.text-colors.base-black }}]">
   <div class="flex justify-center mt-6">
     <a
       href="/projects"
-      class="text-[{{site.bg-colors.orange-button}}] hover:text-white border-2 border-[{{site.bg-colors.orange-button}}] hover:bg-[{{site.bg-colors.orange-button}}] focus:ring-4 focus:outline-none focus:ring-[{{site.bg-colors.orange-button}}]/50 font-medium rounded-lg text-xs sm:text-sm md:text-base lg:text-lg px-4 sm:px-6 py-2 sm:py-3 text-center mb-2 dark:border-[{{site.bg-colors.orange-button}}] dark:text-[{{site.bg-colors.orange-button}}] dark:hover:text-white dark:hover:bg-[{{site.bg-colors.orange-button}}] dark:focus:ring-[{{site.bg-colors.orange-button}}]/80" data-aos="fade-up"
+      class="font-inter text-[{{site.bg-colors.orange-button}}] hover:text-white border-2 border-[{{site.bg-colors.orange-button}}] hover:bg-[{{site.bg-colors.orange-button}}] focus:ring-4 focus:outline-none focus:ring-[{{site.bg-colors.orange-button}}]/50 font-medium rounded-lg text-xs sm:text-sm md:text-base lg:text-lg px-4 sm:px-6 py-2 sm:py-3 text-center mb-2 dark:border-[{{site.bg-colors.orange-button}}] dark:text-[{{site.bg-colors.orange-button}}] dark:hover:text-white dark:hover:bg-[{{site.bg-colors.orange-button}}] dark:focus:ring-[{{site.bg-colors.orange-button}}]/80" data-aos="fade-up"
     >
       See More
     </a>
diff --git a/_includes/recent-events.html b/_includes/recent-events.html
index a15c270..b983a0b 100644
--- a/_includes/recent-events.html
+++ b/_includes/recent-events.html
@@ -1,6 +1,6 @@
 <div class="container py-10 px-2 md:mx-auto" data-aos="fade-up">
   <h2
-    class="text-5xl font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8"
+    class="text-5xl font-montserrat font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8"
   >
     Recent Events
   </h2>
@@ -10,7 +10,7 @@
   'date' | reverse %} {% assign event_count = recent_events | size %}
 
   {% if event_count == 0 %}
-  <div class="text-center text-gray-500 text-xl mt-16">
+  <div class="font-inter text-center text-gray-500 text-xl mt-16">
     No recent events at the moment. Please check back later.
   </div>
 
@@ -36,10 +36,10 @@
 
           <!-- Event Info -->
           <div class="md:w-2/3 w-full md:pl-6">
-            <h3 class="md:text-2xl text-base font-bold">{{ event.title }}</h3>
+            <h3 class="md:text-2xl text-base font-montserrat font-bold">{{ event.title }}</h3>
 
             <!-- Event Date Logic -->
-            <p class="text-sm text-gray-400 italic font-semibold">
+            <p class="text-sm text-gray-400 italic font-inter font-semibold">
               <!-- Display event dates -->
               {% if event.end_date %}
               <!-- Multi-day event: Show start and end dates -->
@@ -50,7 +50,7 @@ <h3 class="md:text-2xl text-base font-bold">{{ event.title }}</h3>
             </p>
 
             <!-- Event Description with Show More/Show Less -->
-            <p class="text-sm my-2">
+            <p class="font-inter text-sm my-2">
               <!-- Shortened version of the description -->
               <span class="event-description-short"
                 >{{ event.description | truncate: 120, "..." }}</span
@@ -61,15 +61,15 @@ <h3 class="md:text-2xl text-base font-bold">{{ event.title }}</h3>
               >
 
               <!-- Read More / Read Less buttons -->
-              <button class="text-blue-400 read-more relative z-10">
+              <button class="font-inter text-blue-400 read-more relative z-10">
                 Read More
               </button>
-              <button class="text-blue-400 read-less hidden relative z-10">
+              <button class="font-inter text-blue-400 read-less hidden relative z-10">
                 Show Less
               </button>
             </p>
 
-            <p class="text-sm mb-1 text-gray-400 font-bold">
+            <p class="text-sm mb-1 text-gray-400 font-inter font-bold">
               {{ event.participants }}
             </p>
           </div>
@@ -83,7 +83,7 @@ <h3 class="md:text-2xl text-base font-bold">{{ event.title }}</h3>
   <div class="flex justify-center">
     <a
       href="/events/past-events"
-      class="text-[{{site.bg-colors.orange-button}}] hover:text-white border-2 border-[{{site.bg-colors.orange-button}}] hover:bg-[{{site.bg-colors.orange-button}}] focus:ring-4 focus:outline-none focus:ring-[{{site.bg-colors.orange-button}}]/50 font-medium rounded-lg text-xs sm:text-sm md:text-base lg:text-lg px-4 sm:px-6 py-2 sm:py-3 text-center mb-2 dark:border-[{{site.bg-colors.orange-button}}] dark:text-[{{site.bg-colors.orange-button}}] dark:hover:text-white dark:hover:bg-[{{site.bg-colors.orange-button}}] dark:focus:ring-[{{site.bg-colors.orange-button}}]/80" data-aos="fade-up"
+      class="font-inter text-[{{site.bg-colors.orange-button}}] hover:text-white border-2 border-[{{site.bg-colors.orange-button}}] hover:bg-[{{site.bg-colors.orange-button}}] focus:ring-4 focus:outline-none focus:ring-[{{site.bg-colors.orange-button}}]/50 font-medium rounded-lg text-xs sm:text-sm md:text-base lg:text-lg px-4 sm:px-6 py-2 sm:py-3 text-center mb-2 dark:border-[{{site.bg-colors.orange-button}}] dark:text-[{{site.bg-colors.orange-button}}] dark:hover:text-white dark:hover:bg-[{{site.bg-colors.orange-button}}] dark:focus:ring-[{{site.bg-colors.orange-button}}]/80" data-aos="fade-up"
     >
       See More
     </a>
diff --git a/_includes/upcoming-events.html b/_includes/upcoming-events.html
index 07280c2..86ab3fa 100644
--- a/_includes/upcoming-events.html
+++ b/_includes/upcoming-events.html
@@ -1,6 +1,6 @@
 <div class="container py-10 px-2 md:mx-auto" data-aos="fade-up">
   <h2
-    class="text-5xl font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8"
+    class="font-montserrat text-5xl font-bold text-[{{site.text-colors.darkblue}}] text-center mb-8"
   >
     Upcoming Events
   </h2>
@@ -10,7 +10,7 @@
   'date' %} {% assign event_count = upcoming_events | size %}
 
   {% if event_count == 0 %}
-<div class="text-center text-gray-500 text-xl mt-16">
+<div class="font-inter text-center text-gray-500 text-xl mt-16">
   No upcoming events at the moment. Please check back later.
 </div>
 
@@ -36,8 +36,8 @@
 
           <!-- Event Info -->
           <div class="md:w-2/3 w-full md:pl-6">
-            <h3 class="md:text-2xl text-base font-bold">{{ event.title }}</h3>
-            <p class="text-sm text-gray-400 italic font-semibold">
+            <h3 class="font-montserrat md:text-2xl text-base font-bold">{{ event.title }}</h3>
+            <p class="font-inter text-sm text-gray-400 italic font-semibold">
               <!-- Display event dates -->
               {% if event.end_date %}
               <!-- Multi-day event: Show start and end dates -->
@@ -48,7 +48,7 @@ <h3 class="md:text-2xl text-base font-bold">{{ event.title }}</h3>
             </p>
 
             <!-- Event Description with Show More/Show Less -->
-            <p class="text-sm my-2">
+            <p class="font-inter text-sm my-2">
               <!-- Shortened version of the description -->
               <span class="event-description-short"
                 >{{ event.description | truncate: 120, "..." }}</span
@@ -67,7 +67,7 @@ <h3 class="md:text-2xl text-base font-bold">{{ event.title }}</h3>
               </button>
             </p>
 
-            <p class="text-sm mb-1 text-gray-400 font-bold">
+            <p class="font-inter text-sm mb-1 text-gray-400 font-bold">
               {{ event.participants }}
             </p>
 
@@ -75,7 +75,7 @@ <h3 class="md:text-2xl text-base font-bold">{{ event.title }}</h3>
             <a href="{{ event.registration_link }}">
               <div class="relative inset-0">
                 <button
-                  class="inline-block bg-[{{site.bg-colors.orange-button}}] text-white font-semibold px-4 py-2 rounded-lg mt-2 hover:bg-[{{site.bg-colors.orange-button}}]/80 transition-colors duration-300"
+                  class="inline-block bg-[{{site.bg-colors.orange-button}}] text-white font-inter font-semibold px-4 py-2 rounded-lg mt-2 hover:bg-[{{site.bg-colors.orange-button}}]/80 transition-colors duration-300"
                 >
                   Register Now
                 </button>
diff --git a/_layouts/blog.html b/_layouts/blog.html
index ebf2ce6..2de4785 100644
--- a/_layouts/blog.html
+++ b/_layouts/blog.html
@@ -54,7 +54,7 @@
 
     <div class="container py-10 px-2 md:mx-auto">
       <div class="blog-hero flex flex-col items-center justify-center">
-        <div class="title text-4xl sm:text-4xl md:text-4xl lg:text-5xl font-bold pb-5 text-center text-[{{site.text-colors.darkblue}}]">
+        <div class="font-montserrat title text-4xl sm:text-4xl md:text-4xl lg:text-5xl font-bold pb-5 text-center text-[{{site.text-colors.darkblue}}]">
           Our Latest Blogs
         </div>
 
@@ -67,15 +67,15 @@
                    alt="{{ post.title }}" 
                    class="w-full object-cover rounded-lg mb-4">
               <div class="blog-content">
-                <p class="text-sm text-gray-500">{{ post.reading_time }} min read</p>
-                <p class="text-sm text-gray-500">{{ post.date | date: "%d %B, %Y" }}</p>
-                <h2 class="text-xl font-semibold my-2">{{ post.title }}</h2>
+                <p class="font-inter text-sm text-gray-500">{{ post.reading_time }} min read</p>
+                <p class="font-inter text-sm text-gray-500">{{ post.date | date: "%d %B, %Y" }}</p>
+                <h2 class="font-montserrat text-xl font-semibold my-2">{{ post.title }}</h2>
                 <!-- Truncate the excerpt to the first 10 words so cards can maintain uniform size-->
-                <p class="text-base text-gray-700 mb-3">
+                <p class="font-inter text-base text-gray-700 mb-3">
                   {{ post.excerpt | truncatewords: 10 }}
                 </p>
               </div>
-              <span class="text-blue-500 font-bold hover:underline">Read More →</span>
+              <span class="font-inter text-blue-500 font-bold hover:underline">Read More →</span>
             </div>
           </a>
           {% endfor %}
diff --git a/_layouts/default.html b/_layouts/default.html
index a1a5dc6..15ea081 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -6,7 +6,7 @@
   <body>
     {% include nav.html %}
       <h2
-        class="text-5xl font-bold text-[{{site.text-colors.darkblue}}] text-center py-10"
+        class="font-montserrat text-5xl font-bold text-[{{site.text-colors.darkblue}}] text-center py-10"
       >
         {{ page.title }}
       </h2>
diff --git a/_layouts/event.html b/_layouts/event.html
index b037058..ea1676d 100644
--- a/_layouts/event.html
+++ b/_layouts/event.html
@@ -11,20 +11,20 @@
       class="event-hero flex flex-col items-center justify-center px-4 sm:px-6 md:px-8 lg:px-0 max-w-[900px] mx-auto"
     >
       <div
-        class="title text-4xl sm:text-4xl md:text-4xl lg:text-5xl font-bold pt-10 pb-3"
+        class="font-montserrat title text-4xl sm:text-4xl md:text-4xl lg:text-5xl font-bold pt-10 pb-3"
       >
         {{ page.title }}
       </div>
 
       <div
-        class="title text-20px lg:text-xl md:text-xl sm:text-[20px] text-gray-500"
+        class="font-inter title text-20px lg:text-xl md:text-xl sm:text-[20px] text-gray-500"
       >
         {% if page.end_date %} {{ page.date | date: "%a, %b %e, %Y" }} - {{
         page.end_date | date: "%a, %b %e, %Y" }} {% else %} {{ page.date | date:
         "%a, %b %e, %Y" }} {% endif %}
       </div>
       <div
-        class="title text-20px lg:text-xl md:text-xl sm:text-[20px] text-gray-500"
+        class="font-inter title text-20px lg:text-xl md:text-xl sm:text-[20px] text-gray-500"
       >
         {{ page.time }}
       </div>
@@ -33,7 +33,7 @@
       <a href="{{ page.registration_link }}">
         <div class="relative inset-0 pb-10">
           <button
-            class="inline-block bg-[{{site.bg-colors.orange-button}}] text-white font-semibold px-4 py-2 rounded-lg mt-2 hover:bg-[{{site.bg-colors.orange-button}}]/80 transition-colors duration-300"
+            class="inline-block bg-[{{site.bg-colors.orange-button}}] text-white font-inter font-semibold px-4 py-2 rounded-lg mt-2 hover:bg-[{{site.bg-colors.orange-button}}]/80 transition-colors duration-300"
           >
             Register Now
           </button>
@@ -48,7 +48,7 @@
         alt="{{ page.title }}"
         class="max-w-[900px] w-full h-auto aspect-ratio-[5/3] rounded-lg object-cover"
       />
-      <div class="container py-2 items-center">
+      <div class="font-inter container py-2 items-center">
         {{content}}
       </div>
     </div>
diff --git a/about.markdown b/about.markdown
index 9f7f79e..024421a 100644
--- a/about.markdown
+++ b/about.markdown
@@ -18,7 +18,7 @@ permalink: /about
         The club provides a strong platform for engineering students to practically implement their innovative ideas for different applications. The Club offers indispensable guidance, workshops, and organizes various events for students to explore their full potential.
       </p>
 
-      <h2 class="text-xl font-bold mb-0 text-center lg:text-left">Our Objectives</h2>
+      <h2 class="text-xl text-[{{site.text-colors.darkblue}}] font-montserrat font-bold mb-0 text-center lg:text-left">Our Objectives</h2>
 
       <ul class="font-inter font-normal text-base leading-6 text-justify text-black list-disc pl-5 mt-0">
         <li>To provide computer and computerized device knowledge and mentored training.</li>
@@ -32,13 +32,13 @@ permalink: /about
       </ul>
 
       <div class="text-left w-full mt-4">
-        <h3 class="text-lg font-bold mb-2 text-center lg:text-left">Follow us on</h3>
+        <h3 class="font-montserrat text-lg text-[{{site.text-colors.darkblue}}] font-bold mb-2 text-center lg:text-left">Follow us on</h3>
         <div class="flex justify-center lg:justify-start space-x-4 flex-wrap">
-          <a href="https://www.facebook.com/{{ site.facebook_username }}" target="_blank" class="hover:text-gray-400"><i class="fab fa-facebook"></i></a>
-          <a href="https://www.instagram.com/{{ site.instagram_username }}" target="_blank" class="hover:text-gray-400"><i class="fab fa-instagram"></i></a>
-          <a href="https://www.linkedin.com/{{ site.linkedin_username }}" target="_blank" class="hover:text-gray-400"><i class="fab fa-linkedin"></i></a>
-          <a href="https://github.com/{{ site.github_username }}" target="_blank" class="hover:text-gray-400"><i class="fab fa-github"></i></a>
-          <a href="https://twitter.com/{{ site.twitter_username }}" target="_blank" class="hover:text-gray-400"><i class="fab fa-twitter"></i></a>
+          <a href="https://www.facebook.com/{{ site.facebook_username }}" target="_blank" class="text-2xl hover:text-gray-400"><i class="fab fa-facebook"></i></a>
+          <a href="https://www.instagram.com/{{ site.instagram_username }}" target="_blank" class="text-2xl hover:text-gray-400"><i class="fab fa-instagram"></i></a>
+          <a href="https://www.linkedin.com/{{ site.linkedin_username }}" target="_blank" class="text-2xl hover:text-gray-400"><i class="fab fa-linkedin"></i></a>
+          <a href="https://github.com/{{ site.github_username }}" target="_blank" class="text-2xl hover:text-gray-400"><i class="fab fa-github"></i></a>
+          <a href="https://twitter.com/{{ site.twitter_username }}" target="_blank" class="text-2xl hover:text-gray-400"><i class="fab fa-twitter"></i></a>
         </div>
       </div>
     </div>
diff --git a/assets/js/tailwind.config.js b/assets/js/tailwind.config.js
new file mode 100644
index 0000000..9340b4d
--- /dev/null
+++ b/assets/js/tailwind.config.js
@@ -0,0 +1,10 @@
+tailwind.config = {
+    theme: {
+        extend: {
+            fontFamily: {
+                'montserrat': ['Montserrat', 'sans-serif'],
+                'inter': ['Inter', 'sans-serif']
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/contact.markdown b/contact.markdown
index 0fc4ba2..42ae3c7 100644
--- a/contact.markdown
+++ b/contact.markdown
@@ -39,17 +39,17 @@ permalink: /contact
         </div>
       </form>
 
-        <div class="text-left w-full">
-            <h3 class="text-lg font-bold mb-2 text-center lg:text-left">Follow Us On</h3>
-            <div class="flex justify-center lg:justify-start space-x-4 flex-wrap">
-                <a href="https://www.facebook.com/{{ site.facebook_username }}" target="_blank" class="hover:text-gray-400"><i class="fab fa-facebook"></i></a>
-                <a href="https://www.instagram.com/{{ site.instagram_username }}" target="_blank" class="hover:text-gray-400"><i class="fab fa-instagram"></i></a>
-                <a href="https://www.linkedin.com/{{ site.linkedin_username }}" target="_blank" class="hover:text-gray-400"><i class="fab fa-linkedin"></i></a>
-                <a href="https://github.com/{{ site.github_username }}" target="_blank" class="hover:text-gray-400"><i class="fab fa-github"></i></a>
-                <a href="https://twitter.com/{{ site.twitter_username }}" target="_blank" class="hover:text-gray-400"><i class="fab fa-twitter"></i></a>
-            </div>
+        <div class="text-left w-full mt-4">
+        <h3 class="font-montserrat text-lg text-[{{site.text-colors.darkblue}}] font-bold mb-2 text-center lg:text-left">Follow us on</h3>
+        <div class="flex justify-center lg:justify-start space-x-4 flex-wrap">
+          <a href="https://www.facebook.com/{{ site.facebook_username }}" target="_blank" class="text-2xl hover:text-gray-400"><i class="fab fa-facebook"></i></a>
+          <a href="https://www.instagram.com/{{ site.instagram_username }}" target="_blank" class="text-2xl hover:text-gray-400"><i class="fab fa-instagram"></i></a>
+          <a href="https://www.linkedin.com/{{ site.linkedin_username }}" target="_blank" class="text-2xl hover:text-gray-400"><i class="fab fa-linkedin"></i></a>
+          <a href="https://github.com/{{ site.github_username }}" target="_blank" class="text-2xl hover:text-gray-400"><i class="fab fa-github"></i></a>
+          <a href="https://twitter.com/{{ site.twitter_username }}" target="_blank" class="text-2xl hover:text-gray-400"><i class="fab fa-twitter"></i></a>
         </div>
       </div>
+      </div>
     </div>
 </div>
 
diff --git a/past-events.markdown b/past-events.markdown
index c078107..b9db3da 100644
--- a/past-events.markdown
+++ b/past-events.markdown
@@ -12,7 +12,7 @@ permalink: /events/past-events
   {% assign event_count = past_events | size %}
 
   {% if event_count == 0 %}
-  <div class="text-center text-gray-500 text-xl mt-16">
+  <div class="font-inter text-center text-gray-500 text-xl mt-16">
   No recent events at the moment. Please check back later.
   </div>
 
@@ -41,8 +41,8 @@ permalink: /events/past-events
 
       <!-- Event Info Below Image -->
       <div class="text-justify">
-        <h3 class="text-xl font-semibold text-white truncate">{{ event.title }}</h3>
-        <p class="text-sm text-gray-300 italic font-semibold">
+        <h3 class="font-montserrat text-xl font-semibold text-white truncate">{{ event.title }}</h3>
+        <p class="font-inter text-sm text-gray-300 italic font-semibold">
           {% if event.end_date %}
             {{ event.date | date: "%a, %b %e, %Y" }} - {{ event.end_date | date: "%a, %b %e, %Y" }}
           {% else %}
@@ -51,7 +51,7 @@ permalink: /events/past-events
         </p>
 
         <!-- Event Description with Show More/Show Less -->
-        <p class="text-sm my-2 text-white">
+        <p class="font-inter text-sm my-2 text-white">
           <span class="event-description-short">{{ event.description | truncate: 120, "..." }}</span>
           <span class="event-description-full hidden">{{ event.description }}</span>
 
diff --git a/projects.markdown b/projects.markdown
index cbf5244..ee8a011 100644
--- a/projects.markdown
+++ b/projects.markdown
@@ -15,13 +15,13 @@ permalink: /projects
     >
       <!-- Left Section: Title -->
       <div class="flex items-center">
-        <h2 class="text-2xl font-bold text-[{{ site.text-colors.base-black }}]">
+        <h2 class="text-2xl font-montserrat font-bold text-[{{ site.text-colors.base-black }}]">
           {{ project.title }}
         </h2>
       </div>
 
       <!-- Right Section: Status Tags -->
-      <div class="flex flex-wrap gap-2">
+      <div class="font-inter flex flex-wrap gap-2">
         {% for status in project.status %} {% if status == "active" %}
         <span
           class="bg-green-200 text-green-700 px-4 py-2 rounded-full text-sm font-bold"
@@ -45,14 +45,14 @@ permalink: /projects
     <div class="flex flex-wrap gap-2">
       {% for tag in project.tags %}
       <span
-        class="bg-blue-200 text-blue-700 px-3 py-1 rounded-full text-sm font-bold"
+        class="bg-blue-200 text-blue-700 px-3 py-1 rounded-full text-sm font-inter font-bold"
         >{{ tag }}</span
       >
       {% endfor %}
     </div>
 
     <!-- Description Section -->
-    <p class="text-[{{ site.text-colors.base-black }}] text-sm">
+    <p class="font-inter text-[{{ site.text-colors.base-black }}] text-sm">
       {{ project.short_description }}
     </p>
 
@@ -70,7 +70,7 @@ permalink: /projects
       <!-- GitHub Button -->
       <a
         href="{{ project.github_url }}"
-        class="flex items-center space-x-2 bg-[{{ site.bg-colors.baseBlack }}] text-[{{ site.text-colors.white }}] px-4 py-2 rounded-lg hover:bg-gray-800"
+        class="flex items-center space-x-2 bg-[{{ site.bg-colors.baseBlack }}] text-[{{ site.text-colors.white }}] font-inter px-4 py-2 rounded-lg hover:bg-gray-800"
         target="_blank"
         rel="noopener noreferrer"
       >
diff --git a/upcoming-events.markdown b/upcoming-events.markdown
index 29dba5a..b88cd18 100644
--- a/upcoming-events.markdown
+++ b/upcoming-events.markdown
@@ -12,7 +12,7 @@ permalink: /events/upcoming
   {% assign event_count = upcoming_events | size %}
 
   {% if event_count == 0 %}
-  <div class="text-center text-gray-500 text-xl mt-16">
+  <div class="font-inter text-center text-gray-500 text-xl mt-16">
   No upcoming events at the moment. Please check back later.
 </div>
 
@@ -41,8 +41,8 @@ permalink: /events/upcoming
 
       <!-- Event Info Below Image -->
       <div class="text-justify">
-        <h3 class="text-xl font-semibold text-white">{{ event.title }}</h3>
-        <p class="text-sm text-gray-300 italic font-semibold">
+        <h3 class="text-xl font-montserrat font-semibold text-white">{{ event.title }}</h3>
+        <p class="text-sm text-gray-300 italic font-inter font-semibold">
           {% if event.end_date %}
             {{ event.date | date: "%a, %b %e, %Y" }} - {{ event.end_date | date: "%a, %b %e, %Y" }}
           {% else %}
@@ -51,7 +51,7 @@ permalink: /events/upcoming
         </p>
 
         <!-- Event Description with Show More/Show Less -->
-        <p class="text-sm my-2 text-white">
+        <p class="font-inter text-sm my-2 text-white">
           <span class="event-description-short">{{ event.description | truncate: 120, "..." }}</span>
           <span class="event-description-full hidden">{{ event.description }}</span>
 
@@ -63,7 +63,7 @@ permalink: /events/upcoming
         <a href="{{ event.registration_link }}">
               <div class="relative inset-0">
                 <button
-                  class="inline-block bg-[{{site.bg-colors.orange-button}}] text-white font-semibold px-4 py-2 rounded-lg mt-2 hover:bg-[{{site.bg-colors.orange-button}}]/80 transition-colors duration-300"
+                  class="inline-block bg-[{{site.bg-colors.orange-button}}] text-white font-inter font-semibold px-4 py-2 rounded-lg mt-2 hover:bg-[{{site.bg-colors.orange-button}}]/80 transition-colors duration-300"
                 >
                   Register Now
                 </button>