diff --git a/public/images/logo.png b/public/images/logo.png
index 08ac2c2..4021ebc 100644
Binary files a/public/images/logo.png and b/public/images/logo.png differ
diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index ff95525..7b789b2 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -3,38 +3,41 @@ import Image from 'next/image';
 
 const HeroSection = () => {
   return (
-    <div className="relative h-80 md:h-96 lg:h-[500px] min-h-80 md:min-h-96 lg:min-h-[450px] overflow-hidden">
-      {/* Background Image using Next.js Image with fill */}
+    <div className="relative h-80 md:h-96 lg:h-[380px] min-h-80 md:min-h-96 lg:min-h-[380px] overflow-hidden">
+      {/* Background Image */}
       <Image 
-        src="/images/hero.png"
+        src="/images/heronew.png"
         alt="CMC Vellore 125 years celebration"
         fill
         className="object-cover"
       />
       
       {/* Main Content */}
-      <div className="relative z-10 flex items-center justify-center text-left h-full px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-20 py-8 sm:py-12 md:py-16">
-        <div className="w-full max-w-5xl">
-          {/* Main Heading */}
-          <h1 className="text-white mb-6 sm:mb-8 md:mb-10 text-left">
-            <div className="text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl 2xl:text-5xl font-bold leading-tight mb-1 sm:mb-2 md:mb-3 lg:mb-4">
-              This year, we celebrate
-            </div>
-            <div className="text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl 2xl:text-5xl font-bold leading-tight mb-1 sm:mb-2 md:mb-3 lg:mb-4">
-              125 years of CMC Vellore
-            </div>
-            <div className="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl 2xl:text-4xl font-semibold text-gray-200">
-              1900 - 2025
-            </div>
-          </h1>
-          
-          {/* CTA Button */}
-          <button 
-            className="bg-red-600 hover:bg-red-700 text-white px-6 py-3 sm:px-8 sm:py-4 md:px-10 md:py-4 text-sm sm:text-base md:text-lg font-semibold rounded-sm transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-red-300"
-            style={{ backgroundColor: '#e64838' }}
-          >
-            Discover
-          </button>
+      <div className="relative z-10 flex items-center h-full px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-24">
+        <div className="max-w-2xl lg:max-w-3xl">
+          {/* Glass Card */}
+          <div className="bg-white/20 backdrop-blur-[2px] rounded-2xl p-8 sm:p-10 md:p-12 lg:p-4 shadow-2xl border border-white/30">
+            {/* Main Heading */}
+            <h1 className="mb-6 sm:mb-8 md:mb-10" style={{ color: '#012068' }}>
+              <div className="text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl 2xl:text-5xl font-semibold leading-tight mb-1 sm:mb-2 md:mb-3 lg:mb-4">
+                This year, we celebrate <span className='text-5xl text-bold'>125 years</span>
+              </div>
+              <div className="text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl 2xl:text-5xl font-semibold leading-tight mb-1 sm:mb-2 md:mb-3 lg:mb-4">
+                 of CMC Vellore
+              </div>
+              <div className="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl 2xl:text-4xl font-semibold" style={{ color: '#012068' }}>
+                1900 - 2025
+              </div>
+            </h1>
+            
+            {/* CTA Button */}
+            <button 
+              className="bg-red-600 hover:bg-red-700 text-white px-6 py-3 sm:px-8 sm:py-4 md:px-10 md:py-4 text-sm sm:text-base md:text-lg font-semibold rounded-lg transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-0.5 focus:outline-none focus:ring-4 focus:ring-red-300"
+              style={{ backgroundColor: '#e64838' }}
+            >
+              Discover
+            </button>
+          </div>
         </div>
       </div>
     </div>