diff --git a/backend/sportsmatch/src/main/resources/application-prod.properties b/backend/sportsmatch/src/main/resources/application-prod.properties
new file mode 100644
index 0000000..eb14654
--- /dev/null
+++ b/backend/sportsmatch/src/main/resources/application-prod.properties
@@ -0,0 +1,22 @@
+spring.datasource.url=jdbc:postgresql://quirky-bugbear-7185.7tc.aws-eu-central-1.cockroachlabs.cloud:26257/sportsmingle?sslmode=verify-full
+spring.datasource.username=matt
+spring.datasource.password={ask for it}
+spring.jpa.hibernate.ddl-auto=update
+spring.datasource.driver-class-name=org.postgresql.Driver
+spring.jpa.show-sql=true
+spring.jpa.properties.hibernate.format_sql=true
+spring.jpa.properties.hibernate.use_sql_comments=true
+spring.jpa.properties.hibernate.generate_statistics=true
+spring.h2.console.enabled=true
+spring.mvc.hiddenmethod.filter.enabled=true
+
+spring.jpa.defer-datasource-initialization=true
+spring.sql.init.mode=always
+
+app.sportsmingle.initialization.database-init=true
+app.sportsmingle.jwt.secret={ask for it}
+app.sportsmingle.frontend.url=sportsmingle.app
+
+app.sportsmingle.num-game-threshold=5,15,25
+app.sportsmingle.k-factors=25.0,15.0,10.0
+app.sportsmingle.k-factor-default=5.0
diff --git a/frontend/sportsmatch-app/.env b/frontend/sportsmatch-app/.env
new file mode 100644
index 0000000..ed5ee60
--- /dev/null
+++ b/frontend/sportsmatch-app/.env
@@ -0,0 +1 @@
+VITE_BACKEND_URL=http://localhost:8080
\ No newline at end of file
diff --git a/frontend/sportsmatch-app/.env.production b/frontend/sportsmatch-app/.env.production
new file mode 100644
index 0000000..408a3f1
--- /dev/null
+++ b/frontend/sportsmatch-app/.env.production
@@ -0,0 +1 @@
+VITE_BACKEND_URL=
\ No newline at end of file
diff --git a/frontend/sportsmatch-app/src/App.tsx b/frontend/sportsmatch-app/src/App.tsx
index 8a04052..5b8d2a6 100644
--- a/frontend/sportsmatch-app/src/App.tsx
+++ b/frontend/sportsmatch-app/src/App.tsx
@@ -14,6 +14,7 @@ import HostEvent from './pages/HostEvent'
 import { useEffect } from 'react'
 
 function App() {
+  OpenAPI.BASE = import.meta.env.VITE_BACKEND_URL
   OpenAPI.TOKEN = localStorage.getItem('token')!
 
   useEffect(() => {
diff --git a/frontend/sportsmatch-app/src/components/AllSportsList.tsx b/frontend/sportsmatch-app/src/components/AllSportsList.tsx
index 13e70b8..01d5eab 100644
--- a/frontend/sportsmatch-app/src/components/AllSportsList.tsx
+++ b/frontend/sportsmatch-app/src/components/AllSportsList.tsx
@@ -89,6 +89,7 @@ export function AllSportsList(p: AllSportsProps) {
           onChange={(query: string) => {
             setSearchQuery(query)
           }}
+          placeholder="Find your sport"
         />
         {sportList}
         <div className="row">
diff --git a/frontend/sportsmatch-app/src/components/HostEventComponent.tsx b/frontend/sportsmatch-app/src/components/HostEventComponent.tsx
index ce69309..77384d6 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)
@@ -136,16 +132,10 @@ function HostEventComponent() {
 
   // 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()
   }
 
@@ -290,15 +280,12 @@ function HostEventComponent() {
                 onChange={(query: string) => {
                   setSearchQuery(query)
                 }}
+                placeholder="search"
               />
             </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/components/SearchBar.tsx b/frontend/sportsmatch-app/src/components/SearchBar.tsx
index f35b87e..88dd0ff 100644
--- a/frontend/sportsmatch-app/src/components/SearchBar.tsx
+++ b/frontend/sportsmatch-app/src/components/SearchBar.tsx
@@ -3,6 +3,7 @@ import '../styles/Sport.css'
 
 interface Params {
   onChange: (query: string) => void
+  placeholder: string
 }
 
 export function SearchBar(p: Params) {
@@ -16,7 +17,7 @@ export function SearchBar(p: Params) {
         <TbSearch className="search-icon" />
         <input
           type="text"
-          placeholder="Find your sports"
+          placeholder={p.placeholder}
           className="input-search"
           onChange={handleSearch}
         />
diff --git a/frontend/sportsmatch-app/src/pages/Index.tsx b/frontend/sportsmatch-app/src/pages/Index.tsx
index e9e99f6..2103561 100644
--- a/frontend/sportsmatch-app/src/pages/Index.tsx
+++ b/frontend/sportsmatch-app/src/pages/Index.tsx
@@ -3,45 +3,36 @@ import SportEvent from '../components/SportEvent'
 import LoadingSpinner from '../components/LoadingSpinner'
 import { SearchBar } from '../components/SearchBar'
 import { useEffect, useState } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
+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'
 
 export default function MainPage() {
-  const [searchQuery, setSearchQuery] = useState<string>('') // no implementation yet
+  const [searchQuery, setSearchQuery] = useState<string>('')
   const [filteredEvent, setFilteredEvent] = useState<EventDTO[]>([])
   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 location = useLocation()
   const navigate = useNavigate()
   const { isOpen, toggle } = useModal()
   const [page, setPage] = useState<number>(0)
-  const size = 5
-
-  // search bar is not yet implemented
-  useEffect(() => {
-    console.log(`query`, searchQuery)
-  }, [searchQuery])
+  const size = 3
 
   // handle sports name selected from sportButtoncomponent
   const handleSportSelectionChange = (selectedButtonSports: string[]) => {
     setSelectedSports(selectedButtonSports)
   }
 
+  // setting the page to 0 when selected sports change to clear the filteredEvent
+  useEffect(() => {
+    setPage(0)
+  }, [selectedSports])
+
   const clear = () => {
-    navigate(location.pathname, { state: undefined })
+    setPage(0)
     setSelectedSports([])
     setClearFilters(true)
     setTimeout(() => {
@@ -83,35 +74,13 @@ export default function MainPage() {
 
   // 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()
-  })
-
   const handleLetsPlay = () => {
     navigate('/app')
   }
@@ -158,15 +127,12 @@ export default function MainPage() {
               onChange={(query: string) => {
                 setSearchQuery(query)
               }}
+              placeholder="Find your place"
             />
           </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">
@@ -174,15 +140,21 @@ export default function MainPage() {
               {filteredEvent.length === 0 ? (
                 <LoadingSpinner />
               ) : (
-                filteredEvent.map((event, index) => (
-                  <div
-                    className="nearby-events"
-                    key={index}
-                    onClick={() => handleEventSelection(event)}
-                  >
-                    <SportEvent event={event} />
-                  </div>
-                ))
+                filteredEvent
+                  .filter((e) =>
+                    e.placeDTO.name
+                      .toLowerCase()
+                      .includes(searchQuery.toLowerCase()),
+                  )
+                  .map((event, index) => (
+                    <div
+                      className="nearby-events"
+                      key={index}
+                      onClick={() => handleEventSelection(event)}
+                    >
+                      <SportEvent event={event} />
+                    </div>
+                  ))
               )}
             </div>
           </div>
diff --git a/frontend/sportsmatch-app/src/vite-env.d.ts b/frontend/sportsmatch-app/src/vite-env.d.ts
index 11f02fe..401a59b 100644
--- a/frontend/sportsmatch-app/src/vite-env.d.ts
+++ b/frontend/sportsmatch-app/src/vite-env.d.ts
@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_BACKEND_URL: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}