diff --git a/frontend/src/components/homePage/HomePage.jsx b/frontend/src/components/homePage/HomePage.jsx
index 9a6be7a..6e38c12 100644
--- a/frontend/src/components/homePage/HomePage.jsx
+++ b/frontend/src/components/homePage/HomePage.jsx
@@ -185,7 +185,64 @@ export const Header = () => {
         </div>
       </div>
 
-      {/* Rest of your component remains unchanged */}
+      <section className="h-full md:h-screen bg-[#E3E7EB] py-20 px-10 md:px-20 relative">
+                <div className="flex flex-col md:flex-row items-center h-full">
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 md:gap-8 w-full md:w-1/2 h-full">
+                        
+                        <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 flex flex-col justify-between h-full feature-card">
+                            <div className="flex items-center justify-center w-20 h-20 bg-gray-100 rounded-full mb-4">
+                                {<FiUsers size={24} className="text-yellow-500" />}
+                            </div>
+                            <div className="flex-grow"></div> 
+                            <div className="flex justify-between items-center">
+                                <h3 className="text-lg font-semibold text-black ">{"Engage In Community"}</h3>
+                                <span className="text-blue-500 font-bold text-xl cursor-pointer">→</span>
+                            </div>
+                        </div>
+                        <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 flex flex-col justify-between h-full feature-card">
+                            <div className="flex items-center justify-center w-20 h-20 bg-gray-100 rounded-full mb-4">
+                                {<FiShare2 size={24} className="text-red-400" />}
+                            </div>
+                            <div className="flex-grow"></div> 
+                            <div className="flex justify-between items-center">
+                                <h3 className="text-lg font-semibold text-black ">{"Discover New Connections"}</h3>
+                                <span className="text-blue-500 font-bold text-xl cursor-pointer">→</span>
+                            </div>
+                        </div>
+                        <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 flex flex-col justify-between h-full feature-card">
+                            <div className="flex items-center justify-center w-20 h-20 bg-gray-100 rounded-full mb-4">
+                                {<FiMessageCircle size={24} className="text-purple-500"  />}
+                            </div>
+                            <div className="flex-grow"></div> 
+                            <div className="flex justify-between items-center">
+                                <h3 className="text-lg font-semibold text-black ">{"Share Ideas And Creativity"}</h3>
+                                <span className="text-blue-500 font-bold text-xl cursor-pointer">→</span>
+                            </div>
+                        </div>
+                        <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 flex flex-col justify-between h-full feature-card">
+                            <div className="flex items-center justify-center w-20 h-20 bg-gray-100 rounded-full mb-4">
+                                {<FiBell size={24} className="text-blue-500" />}
+                            </div>
+                            <div className="flex-grow"></div> 
+                            <div className="flex justify-between items-center">
+                                <h3 className="text-lg font-semibold text-black ">{"Access Information And News"}</h3>
+                                <span className="text-blue-500 font-bold text-xl cursor-pointer">→</span>
+                            </div>
+                        </div>
+                        
+                        
+                    </div>
+                    <div className="md:pl-16 md:w-1/2 mt-10 md:mt-0 text-center md:text-left">
+                        <h2 className="text-3xl md:text-6xl font-bold text-gray-800 mb-4">Why <br/><span className='underline'>Campus Chatter?</span></h2>
+                        <p className="text-lg text-gray-600 mb-8">
+                            Campus Chatter can provide users with a wide range of benefits, from staying connected with loved ones to discovering new connections and engaging in creative expression and community building.
+                        </p>
+                        <button className="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition-colors">
+                            Learn more
+                        </button>
+                    </div>
+                </div>
+            </section>
     </div>
   );
 };