diff --git a/components/page/irl/events/irl-past-events.tsx b/components/page/irl/events/irl-past-events.tsx
index ea90741d..09ee8b5c 100644
--- a/components/page/irl/events/irl-past-events.tsx
+++ b/components/page/irl/events/irl-past-events.tsx
@@ -26,7 +26,6 @@ interface EventDetailsProps {
 }
 
 const IrlPastEvents = ({ eventDetails, isLoggedIn, isUpcoming, searchParams, handleDataNotFound }: EventDetailsProps) => {
-
   const dialogRef = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const { updateQueryParams } = useUpdateQueryParams();
@@ -58,8 +57,8 @@ const IrlPastEvents = ({ eventDetails, isLoggedIn, isUpcoming, searchParams, han
     if (gathering.slugURL !== searchParams?.event) {
       triggerLoader(true);
       const currentParams = new URLSearchParams(searchParams);
-      const allowedParams = ['event', 'type', 'location']; 
-  
+      const allowedParams = ['event', 'type', 'location'];
+
       // Remove parameters not in the allowed list
       for (const [key, value] of Object.entries(searchParams)) {
         if (!allowedParams.includes(key)) {
@@ -87,8 +86,8 @@ const IrlPastEvents = ({ eventDetails, isLoggedIn, isUpcoming, searchParams, han
       triggerLoader(true);
       selectedEvent = gathering;
       const currentParams = new URLSearchParams(searchParams);
-      const allowedParams = ['event', 'type', 'location']; 
-  
+      const allowedParams = ['event', 'type', 'location'];
+
       // Remove parameters not in the allowed list
       for (const [key, value] of Object.entries(searchParams)) {
         if (!allowedParams.includes(key)) {
@@ -146,12 +145,24 @@ const IrlPastEvents = ({ eventDetails, isLoggedIn, isUpcoming, searchParams, han
   const sanitizedDesc = sanitize(selectedEvent?.description);
   const clippedDesc = clip(sanitizedDesc, 80, { html: true, maxLines: 2 });
 
-const isEventAvailable = searchParams?.type ? searchParams?.type === 'past' &&
-        eventDetails?.pastEvents?.some(event => event.slugURL === searchParams?.event) : true;
+  const isEventAvailable = searchParams?.type ? searchParams?.type === 'past' && eventDetails?.pastEvents?.some((event) => event.slugURL === searchParams?.event) : true;
+
+  useEffect(() => {
+    const gathering = eventsToShow.find((event: any) => event.slugURL === searchParams?.event);
+    const container = document.getElementById('container');
+    const element = document.getElementById(`past-web-${gathering.uid}`);
+
+    if (container) {
+      const containerRect = container.getBoundingClientRect();
+      const elementRect = element ? element.getBoundingClientRect() : null;
+      const scrollTop = elementRect ? elementRect.top - containerRect.top + container.scrollTop : 0;
+      container.scrollTo({ top: scrollTop - 42, behavior: 'smooth' });
+    }
+  }, []);
 
   return (
     <>
-      <div className="root__irl__tableContainer" id='container'>
+      <div className="root__irl__tableContainer" id="container">
         <div className="root__irl__table">
           {eventsToShow?.length > 0 && isEventAvailable ? (
             <>
@@ -186,12 +197,11 @@ const isEventAvailable = searchParams?.type ? searchParams?.type === 'past' &&
               <div>
                 <img src="/icons/no-calender.svg" alt="calendar" />
               </div>
-              <div>No results found for the applied input
-                  {' '}<span
-                      className="root__irl__table__no-data__errorMsg"
-                      onClick={handleDataNotFound}>
-                      Reset to default im
-                  </span>
+              <div>
+                No results found for the applied input{' '}
+                <span className="root__irl__table__no-data__errorMsg" onClick={handleDataNotFound}>
+                  Reset to default im
+                </span>
               </div>
             </div>
           )}
@@ -733,8 +743,8 @@ const isEventAvailable = searchParams?.type ? searchParams?.type === 'past' &&
         }
 
         .root__irl__table__no-data__errorMsg {
-            cursor: pointer;
-            color: #156FF7;
+          cursor: pointer;
+          color: #156ff7;
         }
 
         @media screen and (min-width: 360px) {
@@ -784,7 +794,7 @@ const isEventAvailable = searchParams?.type ? searchParams?.type === 'past' &&
           }
 
           .root__irl__table__no-data {
-              width: 1203px;
+            width: 1203px;
           }
         }
 
@@ -805,7 +815,7 @@ const isEventAvailable = searchParams?.type ? searchParams?.type === 'past' &&
           }
 
           .root__irl__table__no-data {
-              width: 1638px;
+            width: 1638px;
           }
         }
 
@@ -817,7 +827,7 @@ const isEventAvailable = searchParams?.type ? searchParams?.type === 'past' &&
 
           .root__irl__table-col__headerDesc,
           .root__irl__table-col__contentDesc {
-            width: 1411px; 
+            width: 1411px;
           }
 
           .root__irl__table-col__headerRes,
@@ -826,7 +836,7 @@ const isEventAvailable = searchParams?.type ? searchParams?.type === 'past' &&
           }
 
           .root__irl__table__no-data {
-              width: 2196px;
+            width: 2196px;
           }
         }
       `}</style>
diff --git a/components/page/member-details/member-irl-contributions.tsx b/components/page/member-details/member-irl-contributions.tsx
index 5343da17..537fbc67 100644
--- a/components/page/member-details/member-irl-contributions.tsx
+++ b/components/page/member-details/member-irl-contributions.tsx
@@ -1,14 +1,15 @@
 'use client';
 
-import { Fragment, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import Modal from '@/components/core/modal';
 import { IMember } from '@/types/members.types';
 import { IAnalyticsUserInfo, IUserInfo } from '@/types/shared.types';
 import { useMemberAnalytics } from '@/analytics/members.analytics';
 import React from 'react';
 import { Tooltip } from '@/components/core/tooltip/tooltip';
-import { usePathname, useRouter } from 'next/navigation';
 import { format, toZonedTime } from 'date-fns-tz';
+import { compareAsc, isWithinInterval } from 'date-fns';
+import { sortEventsByDate } from '@/utils/irl.utils';
 
 interface IEvent {
   uid: string;
@@ -43,13 +44,14 @@ const IrlMemberContribution = (props: IMemberRepositories) => {
   const modalRef = useRef<HTMLDialogElement>(null);
   const [selectedRole, setSelectedRole] = useState('');
   const analytics = useMemberAnalytics();
-  const router = useRouter();
 
   const member = props?.member?.eventGuests;
-  const transformData = (array: IEventGuest[]): GroupedEvents => {
+  const sortedEvents = sortEventsByDate(member);
+
+  const transformData = (array: any[]): GroupedEvents => {
     return array.reduce(
       (acc: GroupedEvents, item) => {
-        if ((!item.isSpeaker && !item.isHost)) {
+        if (!item.isSpeaker && !item.isHost) {
           acc.Attendee.push(item.event);
         }
 
@@ -62,7 +64,7 @@ const IrlMemberContribution = (props: IMemberRepositories) => {
     );
   };
 
-  const groupedData: GroupedEvents = member ? transformData(member) : { Attendee: [], Speaker: [], Host: [] };
+  const groupedData: GroupedEvents = member ? transformData(sortedEvents) : { Attendee: [], Speaker: [], Host: [] };
 
   const onClose = () => {
     if (modalRef.current) {
@@ -80,26 +82,25 @@ const IrlMemberContribution = (props: IMemberRepositories) => {
 
   const handleEventClick = (details: any, role: any) => {
     analytics.onClickEventIrlContribution(userInfo);
-    const isActive = checkTimeZone(details)
+    const isActive = checkTimeZone(details);
 
-    const type = isActive ? "upcoming" : "past";
-    const location = details?.location?.location ?? "";
-    const locationName = location.split(",")[0].trim();
+    const type = isActive ? 'upcoming' : 'past';
+    const location = details?.location?.location ?? '';
+    const locationName = location.split(',')[0].trim();
     const baseUrl = window.location.origin;
     let url = `irl?location=${locationName}&type=${type}`;
 
-    if (role === "Attendee" && type === "upcoming") {
+    if (role === 'Attendee' && type === 'upcoming') {
       url += `&attending=${details.name}`;
     }
 
-    if (type === "past") {
+    if (type === 'past') {
       url += `&event=${details.slugURL}`;
     }
 
     const fullUrl = `${baseUrl}/${url}`;
     window.open(fullUrl, '_blank');
-  }
-
+  };
 
   const checkTimeZone = (details: any) => {
     const timezone = details?.location?.timezone;
@@ -107,12 +108,12 @@ const IrlMemberContribution = (props: IMemberRepositories) => {
     const currentDateInTargetTimezone = toZonedTime(new Date(), timezone);
 
     return endDateInTargetTimezone.getTime() > currentDateInTargetTimezone.getTime();
-  }
+  };
 
   const getFormattedDateString = (date: string, timeZone: string) => {
     const dateInTargetTimezone = toZonedTime(date, timeZone);
-    return format(dateInTargetTimezone, 'MMM dd', { timeZone });
-  }
+    return format(dateInTargetTimezone, 'MMM yyyy', { timeZone });
+  };
 
   return (
     <>
@@ -134,35 +135,28 @@ const IrlMemberContribution = (props: IMemberRepositories) => {
                   {visibleEvents.map((details: any, index: React.Key | null | undefined) => {
                     const isActive = checkTimeZone(details);
                     return (
-                      <div
+                      <Tooltip
+                        asChild
+                        align="start"
                         key={index}
-                        className={`root__irlCrbts__col__event__cnt ${isActive ? "active" : "inActive"}`}
-                        onClick={() => { handleEventClick(details, role) }}
-                      >
-                        <Tooltip
-                          asChild
-                          align="start"
-                          side="top"
-                          content={
-                            <div className="root__irlCrbts__col__event__cnt__title--tooltip">
-                              {details?.name}
-                            </div>
-                          }
-                          trigger={
+                        side="top"
+                        content={<div className="root__irlCrbts__col__event__cnt__title--tooltip">{details?.name}</div>}
+                        trigger={
+                          <div
+                            className={`root__irlCrbts__col__event__cnt ${isActive ? 'active' : 'inActive'}`}
+                            onClick={() => {
+                              handleEventClick(details, role);
+                            }}
+                          >
                             <div className="root__irlCrbts__col__event__cnt__title">{details?.name}</div>
-                          }
-                        />
-                        <div className="root__irlCrbts__col__event__cnt__date">
-                          {getFormattedDateString(details?.startDate, details?.location?.timezone)}
-                        </div>
-                      </div>
+                            <div className="root__irlCrbts__col__event__cnt__date">{getFormattedDateString(details?.startDate, details?.location?.timezone)}</div>
+                          </div>
+                        }
+                      />
                     );
                   })}
                   {additionalCount > 0 && (
-                    <div
-                      className="root__irlCrbts__col__event__cnts additional-count"
-                      onClick={() => onClickHandler(role)}
-                    >
+                    <div className="root__irlCrbts__col__event__cnts additional-count" onClick={() => onClickHandler(role)}>
                       +{additionalCount}
                     </div>
                   )}
@@ -180,12 +174,18 @@ const IrlMemberContribution = (props: IMemberRepositories) => {
             .map(([role, events]) => (
               <>
                 <div className="root__irl__modalHeader">
-                  <div className="root__irl__modalHeader__title">{role}</div>
+                  <div className="root__irl__modalHeader__title">Contributions ({role})</div>
                 </div>
                 <div className="root__irl__popupCntr">
-                  {events.map((resource: { link: any; name: any; }, index: React.Key | null | undefined) => (
-                    <div key={index} className="root__irl__popupCnt">
-                      <div>{resource?.name}</div>
+                  {events.map((resource: { link: any; name: any }, index: number) => (
+                    <div
+                      key={index}
+                      className={`root__irl__popupCnt ${index + 1 !== events.length ? 'divider' : ''}`}
+                      onClick={() => {
+                        handleEventClick(resource, role);
+                      }}
+                    >
+                      <div className="root__irl__popupCnt__name">{resource?.name}</div>
                       <div>
                         <img src="/icons/arrow-blue.svg" alt="arrow icon" />
                       </div>
@@ -194,15 +194,18 @@ const IrlMemberContribution = (props: IMemberRepositories) => {
                 </div>
               </>
             ))}
-
-
         </div>
       </Modal>
       <style jsx>
         {`
           .root__irl__addRes__popup {
-            width: 650px;
+            width: 90vw;
+            max-width: 656px;
             height: 394px;
+            display: flex;
+            overflow-y: auto;
+            flex-direction: column;
+            padding: 24px 8px 24px 24px;
           }
           .root__irl__header {
             padding: 15px;
@@ -210,26 +213,18 @@ const IrlMemberContribution = (props: IMemberRepositories) => {
             font-weight: 500;
             line-height: 14px;
           }
-          .root__irl__addRes__popup {
-            display: flex;
-            overflow-y: auto;
-            flex-direction: column;
-            padding: 25px;
-          }
-
           .root__irl__modalHeader {
             display: flex;
             flex-direction: row;
             gap: 8px;
             position: absolute;
             width: 100%;
-            gap: 8px;
           }
 
           .root__irl__modalHeader__title {
-            font-size: 24px;
+            font-size: 20px;
             font-weight: 700;
-            line-height: 32px;
+            line-height: 26px;
             text-align: left;
           }
 
@@ -244,9 +239,9 @@ const IrlMemberContribution = (props: IMemberRepositories) => {
           .root__irl__popupCntr {
             display: flex;
             flex-direction: column;
-            gap: 16px;
             overflow-y: auto;
-            margin-top: 40px;
+            padding: 0 10px 0 0;
+            margin-top: 26px;
           }
 
           .root__irl__popup__header {
@@ -269,26 +264,31 @@ const IrlMemberContribution = (props: IMemberRepositories) => {
             flex-direction: row;
             gap: 8px;
             justify-content: space-between;
-            padding: 14px ;
+            padding: 16px;
             gap: 10px;
-            border-bottom: 1px solid #cbd5e1;
+            cursor: pointer;
+          }
+
+          .divider {
+            border-bottom: 1px solid #e2e8f0;
           }
-            
+
           .active {
-              position: relative;
-              background: linear-gradient(71.47deg, rgba(66, 125, 255, 0.2) 8.43%, rgba(68, 213, 187, 0.2) 87.45%) !important;
+            position: relative;
+            background: linear-gradient(71.47deg, rgba(66, 125, 255, 0.2) 8.43%, rgba(68, 213, 187, 0.2) 87.45%) !important;
+            border: none !important;
           }
 
           .active::before {
-            content: "";
+            content: '';
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
-            border-radius: 4px; 
+            border-radius: 4px;
             border: 1px solid transparent;
-            background: linear-gradient(71.47deg, #427DFF 8.43%, #44D5BB 87.45%) border-box;
+            background: linear-gradient(71.47deg, #427dff 8.43%, #44d5bb 87.45%) border-box;
             -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
             -webkit-mask-composite: destination-out;
             mask-composite: exclude;
@@ -298,11 +298,11 @@ const IrlMemberContribution = (props: IMemberRepositories) => {
           .inactive {
             position: relative;
             border: 1px solid transparent;
-            background: #F1F5F9;
+            background: #f1f5f9;
           }
 
           .root {
-            display:flex;
+            display: flex;
             flex-direction: column;
             gap: 20px;
           }
@@ -315,9 +315,9 @@ const IrlMemberContribution = (props: IMemberRepositories) => {
             color: #64748b;
           }
 
-          .root__irlCrbts{
+          .root__irlCrbts {
             width: 100%;
-            border: 1px solid #E2E8F0;
+            border: 1px solid #e2e8f0;
             border-radius: 8px;
           }
 
@@ -326,7 +326,7 @@ const IrlMemberContribution = (props: IMemberRepositories) => {
           }
 
           .root__irlCrbts__row__border__btm {
-            border-bottom: 1px solid #E2E8F0;
+            border-bottom: 1px solid #e2e8f0;
           }
 
           .root__irlCrbts__col {
@@ -334,7 +334,7 @@ const IrlMemberContribution = (props: IMemberRepositories) => {
             height: 70px;
             display: flex;
             justify-content: left;
-            align-items: center; 
+            align-items: center;
             gap: 10px;
             padding: 10px;
             padding-left: 20px;
@@ -349,36 +349,44 @@ const IrlMemberContribution = (props: IMemberRepositories) => {
             width: 100%;
           }
 
-          .root__irlCrbts__col__event__cnt { 
+          .root__irlCrbts__col__event__cnt {
             min-width: 40px;
             max-width: 115px;
             height: 40px;
-            padding: 6px 12px 6px 12px;
-            border-radius: 4px ;
+            justify-content: center;
+            padding: 0px 12px;
+            border-radius: 4px;
             border: 1px solid transparent;
             display: flex;
             flex-direction: column;
             cursor: pointer !important;
             border: 1px solid #cbd5e1;
-            background: #F1F5F9;
+            background: #f1f5f9;
+          }
+
+          .root__irl__popupCnt__name {
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 20px;
+            color: #0f172a;
           }
 
           .root__irlCrbts__col__event__cnts {
             width: 40px;
             height: 40px;
             padding: 6px 12px 6px 12px;
-            border-radius: 4px ;
-            border: 1px solid #CBD5E1;
+            border-radius: 4px;
+            border: 1px solid #cbd5e1;
             display: flex;
             justify-content: center;
             align-items: center;
             flex-direction: column;
-            background: #F1F5F9;
+            background: #f1f5f9;
             font-size: 12px;
             font-weight: 500;
             line-height: 14px;
+            cursor: pointer;
           }
-          
 
           .root__irlCrbts__col__event__cnt__title {
             font-size: 12px;
@@ -390,7 +398,7 @@ const IrlMemberContribution = (props: IMemberRepositories) => {
             overflow: hidden;
             white-space: nowrap;
           }
-            
+
           .root__irlCrbts__col__event__cnt__title--tooltip {
             font-size: 12px;
             font-weight: 500;
@@ -421,7 +429,7 @@ const IrlMemberContribution = (props: IMemberRepositories) => {
           }
 
           @media (min-width: 360px) {
-            .root__irlCrbts{
+            .root__irlCrbts {
               min-height: 70px;
             }
 
@@ -434,15 +442,26 @@ const IrlMemberContribution = (props: IMemberRepositories) => {
               border: none;
             }
 
-             .root__irlCrbts__col__event {
+            .root__irlCrbts__col__event {
               padding: 0px 15px 15px 15px;
-              flex-wrap: wrap
+              flex-wrap: wrap;
             }
-           
           }
 
           @media (min-width: 1024px) {
-            .root__irlCrbts{
+            .root__irl__addRes__popup {
+              width: 656px;
+            }
+
+            .root__irl__popupCntr {
+              margin-top: 30px;
+            }
+
+            .root__irl__modalHeader__title {
+              line-height: 32px;
+            }
+
+            .root__irlCrbts {
               min-height: 70px;
             }
 
@@ -454,11 +473,11 @@ const IrlMemberContribution = (props: IMemberRepositories) => {
 
             .root__irlCrbts__col__event {
               padding: 15px;
-              flex-wrap: nowrap
+              flex-wrap: nowrap;
             }
 
             .root__irlCrbts__row__border__right {
-              border-right: 1px solid #E2E8F0;
+              border-right: 1px solid #e2e8f0;
             }
           }
         `}
diff --git a/components/page/team-details/team-irl-contributions.tsx b/components/page/team-details/team-irl-contributions.tsx
index a0e79b9d..cafe2e3d 100644
--- a/components/page/team-details/team-irl-contributions.tsx
+++ b/components/page/team-details/team-irl-contributions.tsx
@@ -10,6 +10,7 @@ import { Tooltip } from '@/components/core/tooltip/tooltip';
 import { ITeam } from '@/types/teams.types';
 import { useTeamAnalytics } from '@/analytics/teams.analytics';
 import { format, toZonedTime } from 'date-fns-tz';
+import { sortEventsByDate } from '@/utils/irl.utils';
 
 interface IEvent {
   uid: string;
@@ -32,11 +33,11 @@ interface GroupedEvents {
 }
 
 interface ITeamMembers {
-    members: IMember[] | undefined;
-    teamId: string;
-    team: ITeam | undefined;
-    userInfo: IAnalyticsUserInfo ;
-  }
+  members: IMember[] | undefined;
+  teamId: string;
+  team: ITeam | undefined;
+  userInfo: IAnalyticsUserInfo;
+}
 
 const TeamIrlContributions = (props: ITeamMembers) => {
   const userInfo = props?.userInfo;
@@ -45,6 +46,8 @@ const TeamIrlContributions = (props: ITeamMembers) => {
   const analytics = useTeamAnalytics();
 
   const team = props?.team?.eventGuests;
+  const sortedEvents = sortEventsByDate(team);
+
   const transformData = (event: IEventGuest[]): GroupedEvents => {
     return event.reduce(
       (acc: GroupedEvents, item) => {
@@ -55,7 +58,7 @@ const TeamIrlContributions = (props: ITeamMembers) => {
     );
   };
 
-  const groupedData: GroupedEvents = team ? transformData(team) : {Host: [] };
+  const groupedData: GroupedEvents = team ? transformData(sortedEvents) : { Host: [] };
 
   const onClose = () => {
     if (modalRef.current) {
@@ -73,22 +76,21 @@ const TeamIrlContributions = (props: ITeamMembers) => {
 
   const handleEventClick = (details: any, role: any) => {
     analytics.onClickTeamIrlContribution(userInfo);
-    const isActive = checkTimeZone(details)
+    const isActive = checkTimeZone(details);
 
-    const type = isActive ? "upcoming" : "past";
-    const location = details?.location?.location ?? "";
-    const locationName = location?.split(",")[0].trim();
+    const type = isActive ? 'upcoming' : 'past';
+    const location = details?.location?.location ?? '';
+    const locationName = location?.split(',')[0].trim();
     const baseUrl = window.location.origin;
     let url = `irl?location=${locationName}&type=${type}`;
 
-    if (type === "past") {
+    if (type === 'past') {
       url += `&event=${details.slugURL}`;
     }
 
     const fullUrl = `${baseUrl}/${url}`;
     window.open(fullUrl, '_blank');
-  }
-
+  };
 
   const checkTimeZone = (details: any) => {
     const timezone = details?.location?.timezone;
@@ -96,12 +98,12 @@ const TeamIrlContributions = (props: ITeamMembers) => {
     const currentDateInTargetTimezone = toZonedTime(new Date(), timezone);
 
     return endDateInTargetTimezone.getTime() > currentDateInTargetTimezone.getTime();
-  }
+  };
 
   const getFormattedDateString = (date: string, timeZone: string) => {
     const dateInTargetTimezone = toZonedTime(date, timeZone);
-    return format(dateInTargetTimezone, 'MMM dd', { timeZone });
-  }
+    return format(dateInTargetTimezone, 'MMM yyyy', { timeZone });
+  };
 
   return (
     <>
@@ -120,37 +122,30 @@ const TeamIrlContributions = (props: ITeamMembers) => {
                 </div>
                 <div className="root__irlCrbts__col__event">
                   {visibleEvents.map((details: any, index: React.Key | null | undefined) => {
-                    const isActive = checkTimeZone(details); 
+                    const isActive = checkTimeZone(details);
                     return (
-                      <div
+                      <Tooltip
                         key={index}
-                        className={`root__irlCrbts__col__event__cnt ${isActive ? "active" : "inActive"}`}
-                        onClick={() => {handleEventClick(details, role)}}
-                      >
-                        <Tooltip
-                          asChild
-                          align="start"
-                          side="top"
-                          content={
-                            <div className="root__irlCrbts__col__event__cnt__title--tooltip">
-                              {details?.name}
-                            </div>
-                          }
-                          trigger={
+                        asChild
+                        align="start"
+                        side="top"
+                        content={<div className="root__irlCrbts__col__event__cnt__title--tooltip">{details?.name}</div>}
+                        trigger={
+                          <div
+                            className={`root__irlCrbts__col__event__cnt ${isActive ? 'active' : 'inActive'}`}
+                            onClick={() => {
+                              handleEventClick(details, role);
+                            }}
+                          >
                             <div className="root__irlCrbts__col__event__cnt__title">{details?.name}</div>
-                          }
-                        />
-                        <div className="root__irlCrbts__col__event__cnt__date">
-                          {getFormattedDateString(details?.startDate, details?.location?.timeZone)}
-                        </div>
-                      </div>
+                            <div className="root__irlCrbts__col__event__cnt__date">{getFormattedDateString(details?.startDate, details?.location?.timeZone)}</div>
+                          </div>
+                        }
+                      />
                     );
                   })}
                   {additionalCount > 0 && (
-                    <div
-                      className="root__irlCrbts__col__event__cnts additional-count"
-                      onClick={() => onClickHandler(role)}
-                    >
+                    <div className="root__irlCrbts__col__event__cnts additional-count" onClick={() => onClickHandler(role)}>
                       +{additionalCount}
                     </div>
                   )}
@@ -171,9 +166,15 @@ const TeamIrlContributions = (props: ITeamMembers) => {
                   <div className="root__irl__modalHeader__title">{role}</div>
                 </div>
                 <div className="root__irl__popupCntr">
-                  {events.map((resource: { link: any; name: any; }, index: React.Key | null | undefined) => (
-                    <div key={index} className="root__irl__popupCnt">
-                      <div>{resource?.name}</div>
+                  {events.map((resource: { link: any; name: any }, index: number) => (
+                    <div
+                      key={index}
+                      className={`root__irl__popupCnt ${index + 1 !== events.length ? 'divider' : ''}`}
+                      onClick={() => {
+                        handleEventClick(resource, role);
+                      }}
+                    >
+                      <div className="root__irl__popupCnt__name">{resource?.name}</div>
                       <div>
                         <img src="/icons/arrow-blue.svg" alt="arrow icon" />
                       </div>
@@ -182,15 +183,18 @@ const TeamIrlContributions = (props: ITeamMembers) => {
                 </div>
               </>
             ))}
-
-
         </div>
       </Modal>
       <style jsx>
         {`
           .root__irl__addRes__popup {
-            width: 650px;
+            width: 90vw;
+            max-width: 656px;
             height: 394px;
+            display: flex;
+            overflow-y: auto;
+            flex-direction: column;
+            padding: 24px 8px 24px 24px;
           }
           .root__irl__header {
             padding: 15px;
@@ -198,13 +202,6 @@ const TeamIrlContributions = (props: ITeamMembers) => {
             font-weight: 500;
             line-height: 14px;
           }
-          .root__irl__addRes__popup {
-            display: flex;
-            overflow-y: auto;
-            flex-direction: column;
-            padding: 25px;
-          }
-
           .root__irl__modalHeader {
             display: flex;
             flex-direction: row;
@@ -215,9 +212,9 @@ const TeamIrlContributions = (props: ITeamMembers) => {
           }
 
           .root__irl__modalHeader__title {
-            font-size: 24px;
+            font-size: 20px;
             font-weight: 700;
-            line-height: 32px;
+            line-height: 26px;
             text-align: left;
           }
 
@@ -232,9 +229,9 @@ const TeamIrlContributions = (props: ITeamMembers) => {
           .root__irl__popupCntr {
             display: flex;
             flex-direction: column;
-            gap: 16px;
             overflow-y: auto;
-            margin-top: 40px;
+            padding: 0 10px 0 0;
+            margin-top: 26px;
           }
 
           .root__irl__popup__header {
@@ -257,40 +254,43 @@ const TeamIrlContributions = (props: ITeamMembers) => {
             flex-direction: row;
             gap: 8px;
             justify-content: space-between;
-            padding: 14px ;
+            padding: 16px;
             gap: 10px;
-            border-bottom: 1px solid #cbd5e1;
+            cursor: pointer;
+          }
+
+          .divider {
+            border-bottom: 1px solid #e2e8f0;
           }
-            
+
           .active {
-              position: relative;
-              background: linear-gradient(71.47deg, rgba(66, 125, 255, 0.2) 8.43%, rgba(68, 213, 187, 0.2) 87.45%) !important;
+            position: relative;
+            background: linear-gradient(71.47deg, rgba(66, 125, 255, 0.2) 8.43%, rgba(68, 213, 187, 0.2) 87.45%) !important;
+            border: none !important;
           }
           .active::before {
-              content: "";
-              position: absolute;
-              top: 0;
-              left: 0;
-              right: 0;
-              bottom: 0;
-              border-radius: 4px; 
-              border: 1px solid transparent;
-              background: linear-gradient(71.47deg, #427DFF 8.43%, #44D5BB 87.45%) border-box;
-              -webkit-mask:
-                linear-gradient(#fff 0 0) padding-box, 
-                linear-gradient(#fff 0 0);
-              -webkit-mask-composite: destination-out;
-              mask-composite: exclude;
-              pointer-events: none;
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-radius: 4px;
+            border: 1px solid transparent;
+            background: linear-gradient(71.47deg, #427dff 8.43%, #44d5bb 87.45%) border-box;
+            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+            -webkit-mask-composite: destination-out;
+            mask-composite: exclude;
+            pointer-events: none;
           }
           .inactive {
-              position: relative;
-              border: 1px solid transparent;
-              background: #F1F5F9;
+            position: relative;
+            border: 1px solid transparent;
+            background: #f1f5f9;
           }
 
           .root {
-            display:flex;
+            display: flex;
             flex-direction: column;
             gap: 20px;
           }
@@ -303,9 +303,9 @@ const TeamIrlContributions = (props: ITeamMembers) => {
             color: #64748b;
           }
 
-          .root__irlCrbts{
+          .root__irlCrbts {
             width: 100%;
-            border: 1px solid #E2E8F0;
+            border: 1px solid #e2e8f0;
             border-radius: 8px;
           }
 
@@ -314,7 +314,7 @@ const TeamIrlContributions = (props: ITeamMembers) => {
           }
 
           .root__irlCrbts__row__border__btm {
-            border-bottom: 1px solid #E2E8F0;
+            border-bottom: 1px solid #e2e8f0;
           }
 
           .root__irlCrbts__col {
@@ -322,7 +322,7 @@ const TeamIrlContributions = (props: ITeamMembers) => {
             height: 70px;
             display: flex;
             justify-content: left;
-            align-items: center; 
+            align-items: center;
             gap: 10px;
             padding: 10px;
             padding-left: 20px;
@@ -337,36 +337,44 @@ const TeamIrlContributions = (props: ITeamMembers) => {
             width: 100%;
           }
 
-          .root__irlCrbts__col__event__cnt { 
+          .root__irlCrbts__col__event__cnt {
             min-width: 40px;
             max-width: 115px;
             height: 40px;
-            padding: 6px 12px 6px 12px;
-            border-radius: 4px ;
+            justify-content: center;
+            padding: 0px 12px;
+            border-radius: 4px;
             border: 1px solid transparent;
             display: flex;
             flex-direction: column;
             cursor: pointer !important;
             border: 1px solid #cbd5e1;
-            background: #F1F5F9;
+            background: #f1f5f9;
+          }
+
+          .root__irl__popupCnt__name {
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 20px;
+            color: #0f172a;
           }
 
           .root__irlCrbts__col__event__cnts {
             width: 40px;
             height: 40px;
             padding: 6px 12px 6px 12px;
-            border-radius: 4px ;
-            border: 1px solid #CBD5E1;
+            border-radius: 4px;
+            border: 1px solid #cbd5e1;
             display: flex;
             justify-content: center;
             align-items: center;
             flex-direction: column;
-            background: #F1F5F9;
+            background: #f1f5f9;
             font-size: 12px;
             font-weight: 500;
             line-height: 14px;
+            cursor: pointer;
           }
-          
 
           .root__irlCrbts__col__event__cnt__title {
             font-size: 12px;
@@ -378,7 +386,7 @@ const TeamIrlContributions = (props: ITeamMembers) => {
             overflow: hidden;
             white-space: nowrap;
           }
-            
+
           .root__irlCrbts__col__event__cnt__title--tooltip {
             font-size: 12px;
             font-weight: 500;
@@ -409,7 +417,7 @@ const TeamIrlContributions = (props: ITeamMembers) => {
           }
 
           @media (min-width: 360px) {
-            .root__irlCrbts{
+            .root__irlCrbts {
               min-height: 100px;
             }
 
@@ -422,15 +430,26 @@ const TeamIrlContributions = (props: ITeamMembers) => {
               border: none;
             }
 
-             .root__irlCrbts__col__event {
+            .root__irlCrbts__col__event {
               padding: 0px 15px 15px 15px;
-              flex-wrap: wrap
+              flex-wrap: wrap;
             }
-           
           }
 
           @media (min-width: 1024px) {
-            .root__irlCrbts{
+            .root__irl__addRes__popup {
+              width: 656px;
+            }
+
+            .root__irl__popupCntr {
+              margin-top: 30px;
+            }
+
+            .root__irl__modalHeader__title {
+              line-height: 32px;
+            }
+
+            .root__irlCrbts {
               min-height: 70px;
             }
 
@@ -442,11 +461,11 @@ const TeamIrlContributions = (props: ITeamMembers) => {
 
             .root__irlCrbts__col__event {
               padding: 15px;
-              flex-wrap: nowrap
+              flex-wrap: nowrap;
             }
 
             .root__irlCrbts__row__border__right {
-              border-right: 1px solid #E2E8F0;
+              border-right: 1px solid #e2e8f0;
             }
           }
         `}
diff --git a/utils/irl.utils.ts b/utils/irl.utils.ts
index 02acbc09..b314a8c7 100644
--- a/utils/irl.utils.ts
+++ b/utils/irl.utils.ts
@@ -386,6 +386,34 @@ export function checkAdminInAllEvents(searchType: any, upcomingEvents: any, past
   }
   return false;
 }
+
+export function sortEventsByDate(member:any) {
+  const now = new Date().toISOString(); // Current time in UTC ISO format
+
+  return [...member]?.sort((a, b) => {
+    const startA = a.event.startDate;
+    const endA = a.event.endDate;
+    const startB = b.event.startDate;
+    const endB = b.event.endDate;
+
+    // Determine category for event A
+    const categoryA = startA > now ? 0 : (startA <= now && endA >= now) ? 1 : 2;
+    // Determine category for event B
+    const categoryB = startB > now ? 0 : (startB <= now && endB >= now) ? 1 : 2;
+
+    // Sort by category first (0: upcoming, 1: ongoing, 2: completed)
+    if (categoryA !== categoryB) return categoryA - categoryB;
+
+    // If in the same category, sort by start date in descending order (ISO strings compare lexicographically)
+    if (startA !== startB) return startB.localeCompare(startA);
+
+    // If start dates are the same, sort by duration (longer events first)
+    const durationA = Date.parse(endA) - Date.parse(startA);
+    const durationB = Date.parse(endB) - Date.parse(startB);
+    return durationB - durationA; // Longer duration first
+  });
+}
+
 // combine guest going events and new events(if any event matches with the new events will replace the events in going events)
 export function mergeGuestEvents(userAlreadyGoingEvents: any, formattedEvents: any) {
   // Create a Map for `formattedEvents` for quick lookup by `uid`