diff --git a/backend/sportsmatch/src/main/java/com/sportsmatch/auth/SecurityConfig.java b/backend/sportsmatch/src/main/java/com/sportsmatch/auth/SecurityConfig.java
index bd0de124..570b9883 100644
--- a/backend/sportsmatch/src/main/java/com/sportsmatch/auth/SecurityConfig.java
+++ b/backend/sportsmatch/src/main/java/com/sportsmatch/auth/SecurityConfig.java
@@ -26,8 +26,17 @@ public class SecurityConfig {
 
   @Value("${app.sportsmingle.frontend.url}")
   private String frontendUrl;
+
   private static final String[] WHITE_LIST_URL = {
-    "/api/v1/auth/**", "/h2-console/**", "/v3/api-docs", "/v3/api-docs/**", "/swagger-ui/**", "/swagger-ui.html", "/api/v1/places/search", "/api/v1/event/nearby"
+    "/api/v1/auth/**",
+    "/h2-console/**",
+    "/v3/api-docs",
+    "/v3/api-docs/**",
+    "/swagger-ui/**",
+    "/swagger-ui.html",
+    "/api/v1/places/search",
+    "/api/v1/event/nearby",
+    "/api/v1/sports/all"
   };
   private final JwtAuthFilter jwtAuthFilter;
   private final AuthenticationProvider authenticationProvider;
diff --git a/backend/sportsmatch/src/main/java/com/sportsmatch/controllers/EventsController.java b/backend/sportsmatch/src/main/java/com/sportsmatch/controllers/EventsController.java
index 615f902c..2bc8aeca 100644
--- a/backend/sportsmatch/src/main/java/com/sportsmatch/controllers/EventsController.java
+++ b/backend/sportsmatch/src/main/java/com/sportsmatch/controllers/EventsController.java
@@ -62,17 +62,18 @@ public List<EventHistoryDTO> getEventsHistory(@ParameterObject final Pageable pa
     return eventService.getEventsHistory(pageable);
   }
 
-
   /**
-   * This endpoint returns list of Events sorted by distance from the given location. User can filter by sports.
+   * This endpoint returns list of Events sorted by distance from the given location. User can
+   * filter by sports.
    *
-   * @param requestEventDTO it contains longitude and latitude and a list of sports for filter if given
-   * @param pageable        it contains the page and size for pagination
+   * @param requestEventDTO it contains longitude and latitude and a list of sports for filter if
+   *     given
+   * @param pageable it contains the page and size for pagination
    * @return a list of Events sorted by distance from the given location. User can filter by sports.
    */
   @GetMapping("/nearby")
-  public List<EventDTO> getNearbyEvents(@RequestBody RequestEventDTO requestEventDTO,
-                                        @ParameterObject final Pageable pageable) {
+  public List<EventDTO> getNearbyEvents(
+          @ParameterObject RequestEventDTO requestEventDTO, @ParameterObject final Pageable pageable) {
     return eventService.getNearbyEvents(requestEventDTO, pageable);
   }
 
diff --git a/backend/sportsmatch/src/main/java/com/sportsmatch/models/Event.java b/backend/sportsmatch/src/main/java/com/sportsmatch/models/Event.java
index c6f6ef4a..a36e6577 100644
--- a/backend/sportsmatch/src/main/java/com/sportsmatch/models/Event.java
+++ b/backend/sportsmatch/src/main/java/com/sportsmatch/models/Event.java
@@ -16,9 +16,7 @@
 @AllArgsConstructor
 public class Event {
 
-  @Id
-  @GeneratedValue
-  private Long id;
+  @Id @GeneratedValue private Long id;
 
   @Column(name = "date_start")
   private LocalDateTime dateStart;
@@ -34,6 +32,7 @@ public class Event {
 
   private String title;
 
+  @Column(name = "is_rank_updated")
   private Boolean isRanksUpdated = false;
 
   @OneToMany(cascade = CascadeType.ALL, mappedBy = "event")
@@ -42,8 +41,7 @@ public class Event {
   @OneToMany(cascade = CascadeType.ALL, mappedBy = "event")
   private Set<UserEventRating> ratings = new HashSet<>();
 
-  @ManyToOne
-  private Sport sport;
+  @ManyToOne private Sport sport;
 
   @ManyToOne
   @JoinColumn(name = "place_id")
diff --git a/backend/sportsmatch/src/main/java/com/sportsmatch/repositories/EventRepository.java b/backend/sportsmatch/src/main/java/com/sportsmatch/repositories/EventRepository.java
index 857477ff..d933af22 100644
--- a/backend/sportsmatch/src/main/java/com/sportsmatch/repositories/EventRepository.java
+++ b/backend/sportsmatch/src/main/java/com/sportsmatch/repositories/EventRepository.java
@@ -51,7 +51,7 @@ List<Event> findEventsByUser(
    * @return list of events filtered by sport names if given, and order by distance from the user's given location
    */
   @Query(nativeQuery = true, value =
-      "SELECT e.id, e.date_start, e.date_end, e.min_elo, e.max_elo, e.title, e.sport_id, e.place_id "
+      "SELECT e.id, e.date_start, e.date_end, e.min_elo, e.max_elo, e.title, e.is_rank_updated, e.sport_id, e.place_id "
           + "FROM events e "
           + "JOIN sports s ON e.sport_id = s.id "
           + "JOIN places p ON e.place_id = p.id "
diff --git a/frontend/sportsmatch-app/src/components/SportsButtonComponent.tsx b/frontend/sportsmatch-app/src/components/SportsButtonComponent.tsx
index 6c4120c4..b97e8a48 100644
--- a/frontend/sportsmatch-app/src/components/SportsButtonComponent.tsx
+++ b/frontend/sportsmatch-app/src/components/SportsButtonComponent.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import '../styles/NewUserComponent.css'
 import { useNavigate } from 'react-router-dom'
+import { SportControllerService, SportDTO } from '../generated/api'
 
 function SportsButtonComponent({
   onSportSelectionChange,
@@ -40,82 +41,30 @@ function SportsButtonComponent({
     navigate('/allsports', { state: { selectedButtonSports } })
   }
 
+  const [sports, setSports] = useState<SportDTO[]>([])
+
+  useEffect(() => {
+    const fetchSports = async () => {
+      setSports((await SportControllerService.getSports(0, 5)) as SportDTO[])
+    }
+    fetchSports()
+  }, [])
+
   return (
     <div className="wrapper">
       <p>Select your sports</p>
       <div className="sports-container">
-        <label>
-          <input
-            type="checkbox"
-            className="sports-checkbox"
-            checked={selectedButtonSports.includes('Tennis')}
-            onChange={() => handleCheckboxChange('Tennis')}
-          />
-          <span className="sports-button">🥎 Tennis</span>
-        </label>
-        <label>
-          <input
-            type="checkbox"
-            className="sports-checkbox"
-            checked={selectedButtonSports.includes('Gym')}
-            onChange={() => handleCheckboxChange('Gym')}
-          />
-          <span className="sports-button">🏋 Gym</span>
-        </label>
-        <label>
-          <input
-            type="checkbox"
-            className="sports-checkbox"
-            checked={selectedButtonSports.includes('Golf')}
-            onChange={() => handleCheckboxChange('Golf')}
-          />
-          <span className="sports-button">🏌🏽 Golf</span>
-        </label>
-        <label>
-          <input
-            type="checkbox"
-            className="sports-checkbox"
-            checked={selectedButtonSports.includes('Bowling')}
-            onChange={() => handleCheckboxChange('Bowling')}
-          />
-          <span className="sports-button">🎳 Bowling</span>
-        </label>
-        <label>
-          <input
-            type="checkbox"
-            className="sports-checkbox"
-            checked={selectedButtonSports.includes('Running')}
-            onChange={() => handleCheckboxChange('Running')}
-          />
-          <span className="sports-button">🏃 Running</span>
-        </label>
-        <label>
-          <input
-            type="checkbox"
-            className="sports-checkbox"
-            checked={selectedButtonSports.includes('Bicycle')}
-            onChange={() => handleCheckboxChange('Bicycle')}
-          />
-          <span className="sports-button">🚴‍♀️ Bicycle</span>
-        </label>
-        <label>
-          <input
-            type="checkbox"
-            className="sports-checkbox"
-            checked={selectedButtonSports.includes('Boxing')}
-            onChange={() => handleCheckboxChange('Boxing')}
-          />
-          <span className="sports-button">🥊 Boxing</span>
-        </label>
-        <label>
-          <input
-            type="checkbox"
-            className="sports-checkbox"
-            checked={selectedButtonSports.includes('Ping pong')}
-            onChange={() => handleCheckboxChange('Ping pong')}
-          />
-          <span className="sports-button">🏓 Ping pong</span>
-        </label>
+        {sports.map((s, index) => (
+          <label key={index}>
+            <input
+              type="checkbox"
+              className="sports-checkbox"
+              checked={selectedButtonSports.includes(s.name!)}
+              onChange={() => handleCheckboxChange(s.name!)}
+            />
+            <span className="sports-button">{s.emoji + ' ' + s.name}</span>
+          </label>
+        ))}
         <label>
           <input
             className="more-sports-button"
diff --git a/frontend/sportsmatch-app/src/generated/api/index.ts b/frontend/sportsmatch-app/src/generated/api/index.ts
index fca70d82..c18c452c 100644
--- a/frontend/sportsmatch-app/src/generated/api/index.ts
+++ b/frontend/sportsmatch-app/src/generated/api/index.ts
@@ -13,7 +13,6 @@ export { EventHistoryDTO } from './models/EventHistoryDTO';
 export type { HostEventDTO } from './models/HostEventDTO';
 export type { PlaceDTO } from './models/PlaceDTO';
 export type { RatingDTO } from './models/RatingDTO';
-export type { RequestEventDTO } from './models/RequestEventDTO';
 export type { SportDTO } from './models/SportDTO';
 export type { UserDTO } from './models/UserDTO';
 export type { UserInfoDTO } from './models/UserInfoDTO';
diff --git a/frontend/sportsmatch-app/src/generated/api/models/RequestEventDTO.ts b/frontend/sportsmatch-app/src/generated/api/models/RequestEventDTO.ts
deleted file mode 100644
index 83f09bce..00000000
--- a/frontend/sportsmatch-app/src/generated/api/models/RequestEventDTO.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/* generated using openapi-typescript-codegen -- do no edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-export type RequestEventDTO = {
-    sportsName?: Array<string>;
-    longitude?: number;
-    latitude?: number;
-};
-
diff --git a/frontend/sportsmatch-app/src/generated/api/services/EventsControllerService.ts b/frontend/sportsmatch-app/src/generated/api/services/EventsControllerService.ts
index bbe73a96..c8467c75 100644
--- a/frontend/sportsmatch-app/src/generated/api/services/EventsControllerService.ts
+++ b/frontend/sportsmatch-app/src/generated/api/services/EventsControllerService.ts
@@ -4,8 +4,6 @@
 /* eslint-disable */
 import type { EventDTO } from '../models/EventDTO';
 import type { EventHistoryDTO } from '../models/EventHistoryDTO';
-import type { RequestEventDTO } from '../models/RequestEventDTO';
-import type { HostEventDTO } from '../models/HostEventDTO';
 import type { CancelablePromise } from '../core/CancelablePromise';
 import { OpenAPI } from '../core/OpenAPI';
 import { request as __request } from '../core/request';
@@ -112,7 +110,9 @@ export class EventsControllerService {
         });
     }
     /**
-     * @param requestEventDto
+     * @param sportsName
+     * @param longitude
+     * @param latitude
      * @param page Zero-based page index (0..N)
      * @param size The size of the page to be returned
      * @param sort Sorting criteria in the format: property,(asc|desc). Default sort order is ascending. Multiple sort criteria are supported.
@@ -120,7 +120,9 @@ export class EventsControllerService {
      * @throws ApiError
      */
     public static getNearbyEvents(
-        requestEventDto: RequestEventDTO,
+        sportsName?: Array<string>,
+        longitude?: number,
+        latitude?: number,
         page?: number,
         size: number = 20,
         sort?: Array<string>,
@@ -129,7 +131,9 @@ export class EventsControllerService {
             method: 'GET',
             url: '/api/v1/event/nearby',
             query: {
-                'requestEventDTO': requestEventDto,
+                'sportsName': sportsName,
+                'longitude': longitude,
+                'latitude': latitude,
                 'page': page,
                 'size': size,
                 'sort': sort,
diff --git a/frontend/sportsmatch-app/src/pages/Index.tsx b/frontend/sportsmatch-app/src/pages/Index.tsx
index 72a42a30..0aab59a3 100644
--- a/frontend/sportsmatch-app/src/pages/Index.tsx
+++ b/frontend/sportsmatch-app/src/pages/Index.tsx
@@ -11,7 +11,6 @@ import {
   EventsControllerService,
   ExSecuredEndpointService,
   OpenAPI,
-  RequestEventDTO,
   SportDTO,
 } from '../generated/api'
 import useModal from '../hooks/UseModal'
@@ -29,6 +28,8 @@ export default function MainPage() {
   const location = useLocation()
   const navigate = useNavigate()
   const { isOpen, toggle } = useModal()
+  const [page, setPage] = useState<number>(0)
+  const size = 5
 
   // handle sports name selected from sportButtoncomponent
   const handleSportSelectionChange = (selectedButtonSports: string[]) => {
@@ -52,16 +53,13 @@ export default function MainPage() {
 
   useEffect(() => {
     const fetchData = async () => {
-      OpenAPI.TOKEN = localStorage.getItem('token')!
       try {
-        const requestEventDTO: RequestEventDTO = {
-          sportsName: selectedSports,
-        }
         const response = await EventsControllerService.getNearbyEvents(
-          requestEventDTO,
+          selectedSports,
           0,
-          20,
-          undefined,
+          0,
+          page,
+          size,
         )
         if (!Array.isArray(response)) {
           throw new Error('Failed to fetch event data')
@@ -69,14 +67,22 @@ export default function MainPage() {
         const data: EventDTO[] = response as EventDTO[]
         // set filtered events based on api response
         console.log(data)
-        setFilteredEvent(data)
+        if (page === 0) {
+          setFilteredEvent(data as EventDTO[])
+        } else {
+          setFilteredEvent((previousPage) => [
+            ...previousPage,
+            ...(data as EventDTO[]),
+          ])
+        }
+        //setFilteredEvent(data as EventDTO[])
       } catch (error) {
         console.error(error as ApiError)
       }
     }
     // call the method
     fetchData()
-  }, [selectedSports])
+  }, [selectedSports, page])
 
   // handle join event pop up after cliking on the event
   const handleEventSelection = (e: EventDTO) => {
@@ -117,6 +123,11 @@ export default function MainPage() {
     navigate('/app')
   }
 
+  const loadMore = () => {
+    const nextPage = page + 1
+    setPage(nextPage)
+  }
+
   return (
     <>
       <div className="container-fluid">
@@ -183,6 +194,13 @@ export default function MainPage() {
             </div>
           </div>
         </div>
+        {filteredEvent.length > 0 && (
+          <div className="row load-btn">
+            <div className="col">
+              <button onClick={loadMore}>Load More Events</button>
+            </div>
+          </div>
+        )}
       </div>
     </>
   )
diff --git a/frontend/sportsmatch-app/src/styles/JoinEvent.css b/frontend/sportsmatch-app/src/styles/JoinEvent.css
index d4723337..4102bd7d 100644
--- a/frontend/sportsmatch-app/src/styles/JoinEvent.css
+++ b/frontend/sportsmatch-app/src/styles/JoinEvent.css
@@ -9,7 +9,10 @@
 }
 
 
-.join-event-wrapper {    
+.join-event-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;    
     padding-left: 5%;
     padding-right: 5%;
     color: var(--sm-orange);
diff --git a/frontend/sportsmatch-app/src/styles/Modal.css b/frontend/sportsmatch-app/src/styles/Modal.css
index 2f144a67..48ddd2d7 100644
--- a/frontend/sportsmatch-app/src/styles/Modal.css
+++ b/frontend/sportsmatch-app/src/styles/Modal.css
@@ -1,6 +1,6 @@
 .modal-overlay {
     z-index: 9999;
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
@@ -12,7 +12,9 @@
   }
 
   .modal-box {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     background: transparent;
     width: 90%;
     height: 75%;