diff --git a/client/src/pages/Events.jsx b/client/src/pages/Events.jsx
index 577e85e..a676467 100644
--- a/client/src/pages/Events.jsx
+++ b/client/src/pages/Events.jsx
@@ -6,6 +6,29 @@ const Events = () => {
   const [filteredEvents, setFilteredEvents] = useState([]);
   const [selectedClub, setSelectedClub] = useState("All");
   const [searchTerm, setSearchTerm] = useState("");
+  const [upcomingEvents, setUpcomingEvents] = useState([]);
+  const [pastEvents, setPastEvents] = useState([]);
+
+  // Helper function to parse date and get latest date for sorting
+  const getEventDate = (dates) => {
+    if (!dates || dates.length === 0) return new Date();
+    
+    // Get the latest date from the dates array for sorting
+    const latestDate = dates[dates.length - 1];
+    const [day, month, year] = latestDate.split('-');
+    return new Date(year, month - 1, day);
+  };
+
+  // Helper function to check if event is past
+  const isEventPast = (dates) => {
+    if (!dates || dates.length === 0) return false;
+    
+    const eventDate = getEventDate(dates);
+    const today = new Date();
+    today.setHours(0, 0, 0, 0); // Reset time for accurate date comparison
+    
+    return eventDate < today;
+  };
 
   // Fetch events data
   useEffect(() => {
@@ -13,8 +36,16 @@ const Events = () => {
       try {
         const response = await fetch('/data/events.json');
         const data = await response.json();
-        setEvents(data.events);
-        setFilteredEvents(data.events);
+        
+        // Sort events by date (earliest first)
+        const sortedEvents = data.events.sort((a, b) => {
+          const dateA = getEventDate(a.dates);
+          const dateB = getEventDate(b.dates);
+          return dateA - dateB;
+        });
+        
+        setEvents(sortedEvents);
+        setFilteredEvents(sortedEvents);
       } catch (error) {
         console.error('Failed to fetch events:', error);
       }
@@ -25,7 +56,7 @@ const Events = () => {
   // Get unique clubs for filter
   const clubs = ["All", ...new Set(events.map(event => event.clubName))];
 
-  // Filter events based on club and search term
+  // Filter events and separate into past and upcoming
   useEffect(() => {
     let filtered = events;
     
@@ -41,6 +72,12 @@ const Events = () => {
       );
     }
     
+    // Separate into past and upcoming events
+    const upcoming = filtered.filter(event => !isEventPast(event.dates));
+    const past = filtered.filter(event => isEventPast(event.dates));
+    
+    setUpcomingEvents(upcoming);
+    setPastEvents(past.reverse()); // Show most recent past events first
     setFilteredEvents(filtered);
   }, [selectedClub, searchTerm, events]);
 
@@ -145,13 +182,13 @@ const Events = () => {
 
             {/* Results Count */}
             <div className="text-sm text-gray-600 whitespace-nowrap">
-              {filteredEvents.length} event{filteredEvents.length !== 1 ? 's' : ''} found
+              {upcomingEvents.length} upcoming • {pastEvents.length} past events
             </div>
           </div>
         </div>
       </div>
 
-      {/* Events Grid */}
+      {/* Events Sections */}
       <div className="max-w-6xl mx-auto px-4 sm:px-6 pb-16">
         {filteredEvents.length === 0 ? (
           <div className="text-center py-16">
@@ -160,74 +197,163 @@ const Events = () => {
             <p className="text-gray-500">Try adjusting your search or filter criteria</p>
           </div>
         ) : (
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {filteredEvents.map((event, index) => (
-              <motion.div
-                key={event.id}
-                className="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-500 hover:-translate-y-2 border-t-4 h-full"
-                style={{ borderTopColor: getClubColor(event.clubName) }}
-                initial={{ opacity: 0, y: 50 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
-                whileHover={{ scale: 1.02 }}
-              >
-                <div className="p-6 flex flex-col h-full">
-                  {/* Event Header */}
-                  <div className="flex items-start justify-between mb-4">
-                    <span 
-                      className="text-xs font-semibold px-3 py-1 rounded-full text-white"
-                      style={{ backgroundColor: getClubColor(event.clubName) }}
-                    >
-                      {event.clubName}
-                    </span>
-                    <div className="text-right">
-                      <div className="text-sm font-semibold" style={{ color: '#1F2647' }}>
-                        {event.date}
-                      </div>
-                      <div className="text-xs text-gray-500">
-                        {formatDate(event.dates)}
-                      </div>
-                    </div>
+          <>
+            {/* Upcoming Events Section */}
+            {upcomingEvents.length > 0 ? (
+              <div className="mb-12">
+                <div className="flex items-center mb-8">
+                  <div className="flex items-center">
+                    <div className="w-3 h-3 rounded-full mr-3" style={{ backgroundColor: '#0D9488' }}></div>
+                    <h2 className="text-2xl sm:text-3xl font-bold" style={{ color: '#1F2647' }}>
+                      Upcoming Events
+                    </h2>
                   </div>
+                  <div className="flex-grow ml-4 h-px bg-gradient-to-r from-teal-300 to-transparent"></div>
+                  <span className="ml-4 text-sm text-gray-500 bg-gray-100 px-3 py-1 rounded-full">
+                    {upcomingEvents.length} events
+                  </span>
+                </div>
+                
+                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {upcomingEvents.map((event, index) => (
+                    <EventCard 
+                      key={event.id} 
+                      event={event} 
+                      index={index} 
+                      getClubColor={getClubColor}
+                      formatDate={formatDate}
+                      isPast={false}
+                    />
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <div className="mb-12">
+                <div className="flex items-center mb-8">
+                  <div className="flex items-center">
+                    <div className="w-3 h-3 rounded-full mr-3" style={{ backgroundColor: '#0D9488' }}></div>
+                    <h2 className="text-2xl sm:text-3xl font-bold" style={{ color: '#1F2647' }}>
+                      Upcoming Events
+                    </h2>
+                  </div>
+                  <div className="flex-grow ml-4 h-px bg-gradient-to-r from-teal-300 to-transparent"></div>
+                </div>
+                
+                <div className="text-center py-12 bg-white rounded-2xl shadow-lg border-t-4" style={{ borderTopColor: '#0D9488' }}>
+                  <div className="text-5xl mb-4">🎉</div>
+                  <h3 className="text-xl font-semibold mb-2" style={{ color: '#1F2647' }}>No Upcoming Events</h3>
+                  <p className="text-gray-600 mb-6">All events have concluded. Check back soon for new exciting events!</p>
+                  <div className="text-sm text-gray-500">
+                    Stay tuned to our social media for updates on future events
+                  </div>
+                </div>
+              </div>
+            )}
 
-                  {/* Event Title */}
-                  <h3 className="text-xl font-bold mb-3 flex-shrink-0" style={{ color: '#1F2647' }}>
-                    {event.eventName}
-                  </h3>
-
-                  {/* Event Description */}
-                  <p className="text-gray-600 text-sm leading-relaxed flex-grow mb-4">
-                    {event.description}
-                  </p>
-
-                  {/* Event Footer */}
-                  <div className="flex items-center justify-between pt-4 border-t border-gray-100">
-                    <div className="flex items-center">
-                      <div 
-                        className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm"
-                        style={{ backgroundColor: getClubColor(event.clubName) }}
-                      >
-                        📅
-                      </div>
-                      <span className="ml-2 text-sm font-medium" style={{ color: '#1F2647' }}>
-                        Don't miss out!
-                      </span>
-                    </div>
-                    <button 
-                      className="text-sm font-medium px-3 py-1 rounded-lg transition-colors duration-300 hover:bg-gray-100"
-                      style={{ color: getClubColor(event.clubName) }}
-                    >
-                      Learn More
-                    </button>
+            {/* Past Events Section */}
+            {pastEvents.length > 0 && (
+              <div>
+                <div className="flex items-center mb-8">
+                  <div className="flex items-center">
+                    <div className="w-3 h-3 rounded-full mr-3" style={{ backgroundColor: '#6B7280' }}></div>
+                    <h2 className="text-2xl sm:text-3xl font-bold text-gray-600">
+                      Past Events
+                    </h2>
                   </div>
+                  <div className="flex-grow ml-4 h-px bg-gradient-to-r from-gray-300 to-transparent"></div>
+                  <span className="ml-4 text-sm text-gray-500 bg-gray-100 px-3 py-1 rounded-full">
+                    {pastEvents.length} events
+                  </span>
                 </div>
-              </motion.div>
-            ))}
-          </div>
+                
+                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {pastEvents.map((event, index) => (
+                    <EventCard 
+                      key={event.id} 
+                      event={event} 
+                      index={index} 
+                      getClubColor={getClubColor}
+                      formatDate={formatDate}
+                      isPast={true}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+          </>
         )}
       </div>
     </div>
   );
 };
 
+// Separate EventCard component for reusability
+const EventCard = ({ event, index, getClubColor, formatDate, isPast }) => {
+  return (
+    <motion.div
+      className={`bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-500 hover:-translate-y-2 border-t-4 h-full ${isPast ? 'opacity-75' : ''}`}
+      style={{ borderTopColor: getClubColor(event.clubName) }}
+      initial={{ opacity: 0, y: 50 }}
+      animate={{ opacity: isPast ? 0.75 : 1, y: 0 }}
+      transition={{ duration: 0.5, delay: index * 0.1 }}
+      whileHover={{ scale: 1.02, opacity: 1 }}
+    >
+      <div className="p-6 flex flex-col h-full">
+        {/* Event Header */}
+        <div className="flex items-start justify-between mb-4">
+          <div className="flex items-center">
+            <span 
+              className="text-xs font-semibold px-3 py-1 rounded-full text-white"
+              style={{ backgroundColor: getClubColor(event.clubName) }}
+            >
+              {event.clubName}
+            </span>
+            {isPast && (
+              <span className="ml-2 text-xs bg-gray-200 text-gray-600 px-2 py-1 rounded-full">
+                Past
+              </span>
+            )}
+          </div>
+          <div className="text-right">
+            <div className="text-xs text-gray-500">
+              {formatDate(event.dates)}
+            </div>
+          </div>
+        </div>
+
+        {/* Event Title */}
+        <h3 className="text-xl font-bold mb-3 flex-shrink-0" style={{ color: isPast ? '#6B7280' : '#1F2647' }}>
+          {event.eventName}
+        </h3>
+
+        {/* Event Description */}
+        <p className={`text-sm leading-relaxed flex-grow mb-4 ${isPast ? 'text-gray-500' : 'text-gray-600'}`}>
+          {event.description}
+        </p>
+
+        {/* Event Footer */}
+        <div className="flex items-center justify-between pt-4 border-t border-gray-100">
+          <div className="flex items-center">
+            <div 
+              className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm"
+              style={{ backgroundColor: isPast ? '#6B7280' : getClubColor(event.clubName) }}
+            >
+              📅
+            </div>
+            <span className={`ml-2 text-sm font-medium ${isPast ? 'text-gray-500' : ''}`} style={{ color: isPast ? '#6B7280' : '#1F2647' }}>
+              {isPast ? 'Event completed' : "Don't miss out!"}
+            </span>
+          </div>
+          <button 
+            className={`text-sm font-medium px-3 py-1 rounded-lg transition-colors duration-300 hover:bg-gray-100 ${isPast ? 'text-gray-500' : ''}`}
+            style={{ color: isPast ? '#6B7280' : getClubColor(event.clubName) }}
+          >
+            {isPast ? 'View Details' : 'Learn More'}
+          </button>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
 export default Events;
\ No newline at end of file
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
index ea9f9df..42d5c49 100644
--- a/client/src/pages/Home.jsx
+++ b/client/src/pages/Home.jsx
@@ -77,7 +77,33 @@ export default function Home() {
       try {
         const response = await fetch('/data/events.json');
         const data = await response.json();
-        setEvents(data.events.slice(0, 6)); // Show only first 6 events
+        
+        // Helper function to check if event is upcoming
+        const isEventUpcoming = (dates) => {
+          if (!dates || dates.length === 0) return true;
+          
+          const latestDate = dates[dates.length - 1];
+          const [day, month, year] = latestDate.split('-');
+          const eventDate = new Date(year, month - 1, day);
+          const today = new Date();
+          today.setHours(0, 0, 0, 0);
+          
+          return eventDate >= today;
+        };
+        
+        // Filter for upcoming events and sort by date
+        const upcomingEvents = data.events
+          .filter(event => isEventUpcoming(event.dates))
+          .sort((a, b) => {
+            const getDate = (dates) => {
+              const [day, month, year] = dates[0].split('-');
+              return new Date(year, month - 1, day);
+            };
+            return getDate(a.dates) - getDate(b.dates);
+          })
+          .slice(0, 6); // Show only first 6 upcoming events
+        
+        setEvents(upcomingEvents);
       } catch (error) {
         console.error('Failed to fetch events:', error);
       }
@@ -85,32 +111,6 @@ export default function Home() {
     fetchEvents();
   }, []);
 
-  // Format dates for display
-  const formatEventDate = (dates) => {
-    if (!dates || dates.length === 0) return 'Date TBD';
-    
-    if (dates.length === 1) {
-      const [day, month, year] = dates[0].split('-');
-      const date = new Date(year, month - 1, day);
-      return date.toLocaleDateString('en-US', { 
-        month: 'short', 
-        day: 'numeric' 
-      });
-    } else {
-      const [startDay, startMonth, startYear] = dates[0].split('-');
-      const [endDay, endMonth, endYear] = dates[dates.length - 1].split('-');
-      const startDate = new Date(startYear, startMonth - 1, startDay);
-      const endDate = new Date(endYear, endMonth - 1, endDay);
-      return `${startDate.toLocaleDateString('en-US', { 
-        month: 'short', 
-        day: 'numeric' 
-      })} - ${endDate.toLocaleDateString('en-US', { 
-        month: 'short', 
-        day: 'numeric'
-      })}`;
-    }
-  };
-
   // Hero text sliding animation
   useEffect(() => {
     const interval = setInterval(() => {
@@ -411,63 +411,83 @@ export default function Home() {
             </p>
           </div>
 
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
-            {events.map((event, index) => (
-              <div
-                key={event.id}
-                className="reveal opacity-0 group h-full"
-                style={{ transitionDelay: `${index * 100}ms` }}
-              >
-                <div className="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-500 hover:-translate-y-2 border-t-4 flex flex-col h-full" style={{ borderTopColor: '#0D9488' }}>
-                  <div className="p-6 flex flex-col flex-grow">
-                    <div className="flex items-center justify-between mb-3">
-                      <span className="text-xs font-semibold px-3 py-1 rounded-full" style={{ backgroundColor: '#DDA853', color: '#1F2647' }}>
-                        {event.clubName}
-                      </span>
-                      <span className="text-sm text-gray-500">
-                        {formatEventDate(event.dates)}
-                      </span>
-                    </div>
-                    
-                    <h3 className="text-lg font-bold mb-3" style={{ color: '#1F2647' }}>
-                      {event.eventName}
-                    </h3>
-                    
-                    <p className="text-gray-600 text-sm leading-relaxed flex-grow">
-                      {event.description.length > 120 
-                        ? `${event.description.substring(0, 120)}...` 
-                        : event.description
-                      }
-                    </p>
-                    
-                    <div className="flex items-center mt-4 pt-3 border-t border-gray-100">
-                      <div className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm" style={{ backgroundColor: '#0D9488' }}>
-                        📅
+          {events.length > 0 ? (
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
+              {events.map((event, index) => (
+                <div
+                  key={event.id}
+                  className="reveal opacity-0 group h-full"
+                  style={{ transitionDelay: `${index * 100}ms` }}
+                >
+                  <div className="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-500 hover:-translate-y-2 border-t-4 flex flex-col h-full" style={{ borderTopColor: '#0D9488' }}>
+                    <div className="p-6 flex flex-col flex-grow">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="text-xs font-semibold px-3 py-1 rounded-full" style={{ backgroundColor: '#DDA853', color: '#1F2647' }}>
+                          {event.clubName}
+                        </span>
+                        <span className="text-sm text-gray-500">
+                          {formatEventDate(event.dates)}
+                        </span>
+                      </div>
+                      
+                      <h3 className="text-lg font-bold mb-3" style={{ color: '#1F2647' }}>
+                        {event.eventName}
+                      </h3>
+                      
+                      <p className="text-gray-600 text-sm leading-relaxed flex-grow">
+                        {event.description.length > 120 
+                          ? `${event.description.substring(0, 120)}...` 
+                          : event.description
+                        }
+                      </p>
+                      
+                      <div className="flex items-center mt-4 pt-3 border-t border-gray-100">
+                        <div className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm" style={{ backgroundColor: '#0D9488' }}>
+                          📅
+                        </div>
+                        <span className="ml-2 text-sm font-medium" style={{ color: '#1F2647' }}>
+                          Mark your calendar
+                        </span>
                       </div>
-                      <span className="ml-2 text-sm font-medium" style={{ color: '#1F2647' }}>
-                        Mark your calendar
-                      </span>
                     </div>
                   </div>
                 </div>
+              ))}
+            </div>
+          ) : (
+            <div className="max-w-2xl mx-auto">
+              <div className="bg-white rounded-2xl overflow-hidden shadow-lg border-t-4 p-8 text-center" style={{ borderTopColor: '#0D9488' }}>
+                <div className="text-5xl mb-4">🎉</div>
+                <h3 className="text-xl font-bold mb-3" style={{ color: '#1F2647' }}>
+                  No Upcoming Events Right Now
+                </h3>
+                <p className="text-gray-600 mb-6">
+                  All current events have concluded. Check back soon for exciting new events and activities!
+                </p>
+                <div className="flex items-center justify-center">
+                  <div className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm mr-3" style={{ backgroundColor: '#0D9488' }}>
+                    📅
+                  </div>
+                  <span className="text-sm font-medium" style={{ color: '#1F2647' }}>
+                    Stay tuned for updates
+                  </span>
+                </div>
               </div>
-            ))}
-          </div>
-
-          {events.length > 0 && (
-            <div className="text-center mt-8">
-              <button 
-                className="group px-6 py-3 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl"
-                style={{ backgroundColor: '#0D9488', color: 'white' }}
-                onClick={() => window.location.href = '/events'}
-              >
-                <span>View All Events</span>
-                <svg className="ml-2 w-4 h-4 inline group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
-                </svg>
-              </button>
             </div>
           )}
+
+          <div className="text-center mt-8">
+            <button 
+              className="group px-6 py-3 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl"
+              style={{ backgroundColor: '#0D9488', color: 'white' }}
+              onClick={() => window.location.href = '/events'}
+            >
+              <span>{events.length > 0 ? 'View All Events' : 'View Past Events'}</span>
+              <svg className="ml-2 w-4 h-4 inline group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+              </svg>
+            </button>
+          </div>
         </div>
       </div>