diff --git a/frontend/sportsmatch-app/src/components/HostEventComponent.tsx b/frontend/sportsmatch-app/src/components/HostEventComponent.tsx
index 65da1f7..0fc55b1 100644
--- a/frontend/sportsmatch-app/src/components/HostEventComponent.tsx
+++ b/frontend/sportsmatch-app/src/components/HostEventComponent.tsx
@@ -9,8 +9,6 @@ import {
   HostEventDTO,
   EventDTO,
   ApiError,
-  OpenAPI,
-  ExSecuredEndpointService,
 } from '../generated/api'
 import DatePicker from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css'
@@ -44,8 +42,6 @@ function HostEventComponent() {
   const [nearbyEvents, setNearbyEvents] = useState<EventDTO[]>([])
   const [selectedEvent, setSelectedEvent] = useState<EventDTO>()
   const { isOpen, toggle } = useModal()
-  const [usersRank, setUsersRank] = useState(0)
-  const [userIsInRank, setUserIsInRank] = useState(false)
   const [searchQuery, setSearchQuery] = useState<string>('') // no implementation yet
 
   console.log(searchQuery)
@@ -132,39 +128,17 @@ function HostEventComponent() {
       }
     }
     fetchData()
-  }, [nearbyEvents])
+  }, [])
 
   // handle join event pop up after cliking on the event
   const handleEventSelection = (e: EventDTO) => {
-    window.scrollTo(0, 0)
     if (isOpen) {
       toggle()
     }
     setSelectedEvent(e)
-    if (usersRank >= e.minElo && usersRank <= e.maxElo) {
-      setUserIsInRank(true)
-    } else {
-      setUserIsInRank(false)
-    }
     toggle()
   }
 
-  // retrieving users rank
-  useEffect(() => {
-    const fetchUsersRank = async () => {
-      OpenAPI.TOKEN = localStorage.getItem('token')!
-      try {
-        const response = await ExSecuredEndpointService.getUserMainPage()
-        if (response) {
-          setUsersRank(response.elo)
-        }
-      } catch (error) {
-        console.error(error as ApiError)
-      }
-    }
-    fetchUsersRank()
-  })
-
   return (
     <>
       <div className="row">
@@ -295,11 +269,7 @@ function HostEventComponent() {
             </div>
           </div>
           <Modal isOpen={isOpen} toggle={toggle} preventClosing={true}>
-            <JoinEventComponent
-              toggle={toggle}
-              isInRank={userIsInRank}
-              event={selectedEvent!}
-            />
+            <JoinEventComponent toggle={toggle} event={selectedEvent!} />
           </Modal>
           <div className="row">
             <div className="col">
diff --git a/frontend/sportsmatch-app/src/components/JoinEventComponent.tsx b/frontend/sportsmatch-app/src/components/JoinEventComponent.tsx
index 68940b8..7af01b3 100644
--- a/frontend/sportsmatch-app/src/components/JoinEventComponent.tsx
+++ b/frontend/sportsmatch-app/src/components/JoinEventComponent.tsx
@@ -1,13 +1,16 @@
+import { useEffect, useState } from 'react'
 import {
   OpenAPI,
   EventsControllerService,
   ApiError,
   EventDTO,
+  ExSecuredEndpointService,
+  UserDTO,
 } from '../generated/api'
 import '../styles/JoinEvent.css'
+import { Link } from 'react-router-dom'
 
 interface JoinEventProps {
-  isInRank: boolean // a boolean to check if user's rank meets the event's requirement
   event: EventDTO
   toggle: () => void
 }
@@ -24,6 +27,39 @@ export default function JoinEventComponent(p: JoinEventProps) {
     }
   }
 
+  const [userIsInRank, setUserIsInRank] = useState(false)
+  const [currentUser, setCurrentUser] = useState<UserDTO>({})
+
+  // retrieving users rank
+  useEffect(() => {
+    if (localStorage.getItem('token')) {
+      const fetchUsersRank = async () => {
+        OpenAPI.TOKEN = localStorage.getItem('token')!
+        try {
+          const response = await ExSecuredEndpointService.getUserMainPage()
+          if (response) {
+            setCurrentUser(response as UserDTO)
+          }
+        } catch (error) {
+          console.error(error as ApiError)
+        }
+      }
+      fetchUsersRank()
+    }
+  }, [])
+
+  // checking user's rank
+  useEffect(() => {
+    if (
+      currentUser.elo! >= p.event.minElo &&
+      currentUser.elo! <= p.event.maxElo
+    ) {
+      setUserIsInRank(true)
+    } else {
+      setUserIsInRank(false)
+    }
+  }, [currentUser, p.event.minElo, p.event.maxElo])
+
   const getDateAndTime = (type: string) => {
     const dateStart: string[] = p.event.dateStart.split(' ')
     if (type === 'date') {
@@ -37,7 +73,7 @@ export default function JoinEventComponent(p: JoinEventProps) {
 
   return (
     <>
-      {p.isInRank ? (
+      {userIsInRank ? (
         <div className="container-sm join-event-wrapper">
           <div className="row">
             <div className="col-12">
@@ -80,7 +116,7 @@ export default function JoinEventComponent(p: JoinEventProps) {
             </div>
           </div>
         </div>
-      ) : (
+      ) : currentUser.name ? (
         <div className="container-sm join-event-wrapper">
           <div className="row">
             <div className="col-12">
@@ -103,6 +139,26 @@ export default function JoinEventComponent(p: JoinEventProps) {
             </div>
           </div>
         </div>
+      ) : (
+        <div className="container-sm join-event-wrapper">
+          <div className="row">
+            <div className="col-12">
+              <h1 className="joint-event-title">Hang On a Sec!</h1>
+            </div>
+            <div className="row">
+              <div className="col-12">
+                <Link to="/login">Please login to join</Link>
+              </div>
+            </div>
+          </div>
+          <div className="row">
+            <div className="col-12">
+              <button className="join-event-btn-grey" onClick={p.toggle}>
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
       )}
     </>
   )
diff --git a/frontend/sportsmatch-app/src/pages/Index.tsx b/frontend/sportsmatch-app/src/pages/Index.tsx
index 0edc45d..2103561 100644
--- a/frontend/sportsmatch-app/src/pages/Index.tsx
+++ b/frontend/sportsmatch-app/src/pages/Index.tsx
@@ -5,13 +5,7 @@ import { SearchBar } from '../components/SearchBar'
 import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import '../styles/Index.css'
-import {
-  ApiError,
-  EventDTO,
-  EventsControllerService,
-  ExSecuredEndpointService,
-  OpenAPI,
-} from '../generated/api'
+import { ApiError, EventDTO, EventsControllerService } from '../generated/api'
 import useModal from '../hooks/UseModal'
 import Modal from '../components/Modal'
 import JoinEventComponent from '../components/JoinEventComponent'
@@ -22,8 +16,6 @@ export default function MainPage() {
   const [selectedSports, setSelectedSports] = useState<string[]>([])
   const [clearFilters, setClearFilters] = useState<boolean>(false)
   const [selectedEvent, setSelectedEvent] = useState<EventDTO>()
-  const [usersRank, setUsersRank] = useState(0)
-  const [userIsInRank, setUserIsInRank] = useState(false)
   const navigate = useNavigate()
   const { isOpen, toggle } = useModal()
   const [page, setPage] = useState<number>(0)
@@ -86,30 +78,9 @@ export default function MainPage() {
       toggle()
     }
     setSelectedEvent(e)
-    if (usersRank >= e.minElo && usersRank <= e.maxElo) {
-      setUserIsInRank(true)
-    } else {
-      setUserIsInRank(false)
-    }
     toggle()
   }
 
-  // retrieving users rank
-  useEffect(() => {
-    const fetchUsersRank = async () => {
-      OpenAPI.TOKEN = localStorage.getItem('token')!
-      try {
-        const response = await ExSecuredEndpointService.getUserMainPage()
-        if (response) {
-          setUsersRank(response.elo)
-        }
-      } catch (error) {
-        console.error(error as ApiError)
-      }
-    }
-    fetchUsersRank()
-  })
-
   const handleLetsPlay = () => {
     navigate('/app')
   }
@@ -161,11 +132,7 @@ export default function MainPage() {
           </div>
         </div>
         <Modal isOpen={isOpen} toggle={toggle} preventClosing={true}>
-          <JoinEventComponent
-            toggle={toggle}
-            isInRank={userIsInRank}
-            event={selectedEvent!}
-          />
+          <JoinEventComponent toggle={toggle} event={selectedEvent!} />
         </Modal>
         <div className="row">
           <div className="col">