From e27d460b1689d20f793f8db9ca1cf710825387b0 Mon Sep 17 00:00:00 2001
From: Bridger Thompson <bridgerat00@gmail.com>
Date: Tue, 19 Sep 2023 17:02:44 -0600
Subject: [PATCH 1/2] talking to api

---
 src/v2/client/package-lock.json               | 56 +++++++++++++++++++
 src/v2/client/package.json                    |  1 +
 src/v2/client/src/components/NavBar.tsx       |  2 +-
 src/v2/client/src/components/Spinner.scss     | 43 ++++++++++++++
 src/v2/client/src/components/Spinner.tsx      |  9 +++
 src/v2/client/src/models/Donation.ts          |  9 +++
 src/v2/client/src/models/Event.ts             | 11 ++++
 .../client/src/pages/home/DonationProgess.tsx | 33 +++++++++++
 src/v2/client/src/pages/home/Home.tsx         | 31 ++++++----
 .../src/pages/home/UpcomingEventsModal.tsx    | 23 ++++++--
 src/v2/client/src/pages/home/homeHooks.ts     | 24 ++++++++
 src/v2/client/src/pages/home/homeService.ts   | 16 ++++++
 src/v2/client/src/setupProxy.js               | 10 ++++
 src/v2/client/tsconfig.json                   |  5 +-
 14 files changed, 252 insertions(+), 21 deletions(-)
 create mode 100644 src/v2/client/src/components/Spinner.scss
 create mode 100644 src/v2/client/src/components/Spinner.tsx
 create mode 100644 src/v2/client/src/models/Donation.ts
 create mode 100644 src/v2/client/src/models/Event.ts
 create mode 100644 src/v2/client/src/pages/home/DonationProgess.tsx
 create mode 100644 src/v2/client/src/pages/home/homeHooks.ts
 create mode 100644 src/v2/client/src/pages/home/homeService.ts
 create mode 100644 src/v2/client/src/setupProxy.js

diff --git a/src/v2/client/package-lock.json b/src/v2/client/package-lock.json
index 5717fd11..937f6ee6 100644
--- a/src/v2/client/package-lock.json
+++ b/src/v2/client/package-lock.json
@@ -18,6 +18,7 @@
         "@types/react": "^18.2.21",
         "@types/react-dom": "^18.2.7",
         "@types/react-query": "^1.2.9",
+        "axios": "^1.5.0",
         "bootstrap": "^5.3.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -5121,6 +5122,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.0.tgz",
+      "integrity": "sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -14297,6 +14321,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -21363,6 +21392,28 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.1.tgz",
       "integrity": "sha512-9l850jDDPnKq48nbad8SiEelCv4OrUWrKab/cPj0GScVg6cb6NbCCt/Ulk26QEq5jP9NnGr04Bit1BHyV6r5CQ=="
     },
+    "axios": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.0.tgz",
+      "integrity": "sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -27833,6 +27884,11 @@
         }
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
diff --git a/src/v2/client/package.json b/src/v2/client/package.json
index 8cd902fa..a90caf4c 100644
--- a/src/v2/client/package.json
+++ b/src/v2/client/package.json
@@ -13,6 +13,7 @@
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@types/react-query": "^1.2.9",
+    "axios": "^1.5.0",
     "bootstrap": "^5.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/src/v2/client/src/components/NavBar.tsx b/src/v2/client/src/components/NavBar.tsx
index 933ee5f5..fc2882ed 100644
--- a/src/v2/client/src/components/NavBar.tsx
+++ b/src/v2/client/src/components/NavBar.tsx
@@ -2,7 +2,7 @@ import { Link } from "react-router-dom"
 
 export const NavBar = () => {
   return (
-    <nav className="navbar navbar-expand-md navbar-light bg-primary shadow-lg">
+    <nav className="navbar navbar-expand-md navbar-light bg-primary shadow">
       <div className="container-fluid">
         <a className="navbar-brand text-white fw-bold" href="https://sanpetepantry.org/" target="_blank" rel="noreferrer">
           Sanpete Food Bank
diff --git a/src/v2/client/src/components/Spinner.scss b/src/v2/client/src/components/Spinner.scss
new file mode 100644
index 00000000..f4053f20
--- /dev/null
+++ b/src/v2/client/src/components/Spinner.scss
@@ -0,0 +1,43 @@
+@import "../assets/custom.scss";
+
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border: 8px solid $primary;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: $primary transparent transparent transparent;
+}
+
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
\ No newline at end of file
diff --git a/src/v2/client/src/components/Spinner.tsx b/src/v2/client/src/components/Spinner.tsx
new file mode 100644
index 00000000..d2109f7b
--- /dev/null
+++ b/src/v2/client/src/components/Spinner.tsx
@@ -0,0 +1,9 @@
+import "./Spinner.scss";
+
+export const Spinner = () => {
+  return (
+    <div className="d-flex justify-content-center">
+      <div className="lds-ring"><div></div><div></div><div></div><div></div></div>
+    </div>
+  )
+}
diff --git a/src/v2/client/src/models/Donation.ts b/src/v2/client/src/models/Donation.ts
new file mode 100644
index 00000000..1a391828
--- /dev/null
+++ b/src/v2/client/src/models/Donation.ts
@@ -0,0 +1,9 @@
+export interface Donation {
+  id: number;
+  eventID: number;
+  teamID: number;
+  personID: number;
+  date: string;
+  amount: number;
+  isPending: boolean;
+}
\ No newline at end of file
diff --git a/src/v2/client/src/models/Event.ts b/src/v2/client/src/models/Event.ts
new file mode 100644
index 00000000..8953f824
--- /dev/null
+++ b/src/v2/client/src/models/Event.ts
@@ -0,0 +1,11 @@
+
+export interface Event {
+  date: Date;
+  title?: string;
+  location?: string;
+  description?: string;
+  mainImage?: string;
+  donationTarget: number;
+  isArchived?: boolean;
+  id: number;
+}
diff --git a/src/v2/client/src/pages/home/DonationProgess.tsx b/src/v2/client/src/pages/home/DonationProgess.tsx
new file mode 100644
index 00000000..df3c0e7d
--- /dev/null
+++ b/src/v2/client/src/pages/home/DonationProgess.tsx
@@ -0,0 +1,33 @@
+import { FC } from "react"
+import { Event } from "../../models/Event"
+import { useGetEventDonationQuery } from "./homeHooks";
+import { Spinner } from "../../components/Spinner";
+
+export const DonationProgess: FC<{
+  event?: Event
+}> = ({ event }) => {
+  const getEventDonationQuery = useGetEventDonationQuery(event?.id);
+
+  if (getEventDonationQuery.isLoading) return <Spinner />
+  if (!event) return <div className="fs-5">No Event Donations</div>
+
+  const donated = getEventDonationQuery.data ? Math.round(getEventDonationQuery.data / event?.donationTarget * 100) : 0
+
+  return (
+    <>
+      <div className="fs-5"><span className="fw-bold">{donated}%</span> of our ${event.donationTarget} goal</div>
+      <div className="row">
+        <div className="col-6 offset-3">
+          <div className="progress bg-success-subtle">
+            <div className="progress-bar bg-success"
+              style={{ width: (donated / event.donationTarget * 100) + "%" }}
+              role="progressbar"
+              aria-valuenow={donated}
+              aria-valuemin={1}
+              aria-valuemax={event.donationTarget} />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/src/v2/client/src/pages/home/Home.tsx b/src/v2/client/src/pages/home/Home.tsx
index f9a86229..d6e71dd1 100644
--- a/src/v2/client/src/pages/home/Home.tsx
+++ b/src/v2/client/src/pages/home/Home.tsx
@@ -1,12 +1,26 @@
+import { Spinner } from "../../components/Spinner";
 import { BenefitsModal } from "./BenefitsModal";
 import { UpcomingEventsModal } from "./UpcomingEventsModal";
+import { useGetEventsQuery } from "./homeHooks";
+import { Event } from "../../models/Event";
+import { DonationProgess } from "./DonationProgess";
 
 export const Home = () => {
-  const width = 1;
+  const getEventsQuery = useGetEventsQuery();
+  const events = getEventsQuery.data ?? [];
+  const futureEvents = events.filter(e => new Date(e.date) >= new Date() && e.isArchived === false)
+  const currentEvent = futureEvents.length > 0 ? futureEvents[0] : undefined
+
+  if (getEventsQuery.isLoading) return <Spinner />
+
   return (
     <div className="container mt-3 text-center">
       <div className="bg-primary shadow text-white ">
-        <h3>There are currently no upcoming events</h3>
+        {currentEvent ? (
+          <h3>Upcoming Event: {currentEvent.title}</h3>
+        ) : (
+          <h3>There are currently no upcoming events</h3>
+        )}
         <iframe
           data-testid={"homePageVideo"} id={"homePageVideo"}
           src="https://www.youtube.com/embed/wkFlIx9sV04"
@@ -15,20 +29,13 @@ export const Home = () => {
           height="450"
           style={{ width: "100%" }}
           allowFullScreen />
-        <div className="fs-5"><span className="fw-bold">0%</span> of our $0 goal</div>
-        <div className="row">
-          <div className="col-6 offset-3">
-            <div className="progress bg-success-subtle">
-              <div className="progress-bar bg-success" style={{ width: width + "%" }} role="progressbar" aria-valuenow={width} aria-valuemin={1} aria-valuemax={100} />
-            </div>
-          </div>
-        </div>
+        <DonationProgess event={currentEvent} />
         <div className="row py-3">
           <div className="col-5 text-end">
             <button className="btn btn-secondary text-white">SHARE NOW</button>
           </div>
           <div className="col-auto">
-            <UpcomingEventsModal />
+            {currentEvent && <UpcomingEventsModal event={currentEvent} />}
           </div>
           <div className="col-auto">
             <button className="btn btn-secondary text-white">DONATE</button>
@@ -50,6 +57,6 @@ export const Home = () => {
           </div>
         </div>
       </div>
-    </div>
+    </div >
   )
 }
diff --git a/src/v2/client/src/pages/home/UpcomingEventsModal.tsx b/src/v2/client/src/pages/home/UpcomingEventsModal.tsx
index ffa48c5c..eed10f56 100644
--- a/src/v2/client/src/pages/home/UpcomingEventsModal.tsx
+++ b/src/v2/client/src/pages/home/UpcomingEventsModal.tsx
@@ -1,6 +1,10 @@
+import { FC } from "react"
 import { CustomModal, useModal, ModalButton } from "../../components/CustomModal"
+import { Event } from "../../models/Event"
 
-export const UpcomingEventsModal = () => {
+export const UpcomingEventsModal: FC<{
+  event: Event
+}> = ({ event }) => {
   const eventDetailModalControl = useModal("Event Details", "lg")
 
   const ModalButton: ModalButton = ({ showModal }) => (
@@ -9,11 +13,18 @@ export const UpcomingEventsModal = () => {
   )
   return (
     <CustomModal ModalButton={ModalButton} controls={eventDetailModalControl}>
-      <div className="modal-body text-center">
-        <div className="fw-bold fs-3">Event: There are currently no upcoming events</div>
-        <div className="row mx-5 my-3">
-          <button className="btn btn-secondary text-white"
-            onClick={() => eventDetailModalControl.hide()}>OK</button>
+      <div className="modal-content ">
+        <div className="modal-header">
+          <div className="modal-title fw-bold fs-4">{event.title}</div>
+          <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div className="modal-body">
+          <div>Location: {event.location}</div>
+          <div>Description: {event.description}</div>
+          <div className="row mx-5 my-3">
+            <button className="btn btn-secondary text-white"
+              onClick={() => eventDetailModalControl.hide()}>OK</button>
+          </div>
         </div>
       </div>
     </CustomModal>
diff --git a/src/v2/client/src/pages/home/homeHooks.ts b/src/v2/client/src/pages/home/homeHooks.ts
new file mode 100644
index 00000000..ec6f3a8b
--- /dev/null
+++ b/src/v2/client/src/pages/home/homeHooks.ts
@@ -0,0 +1,24 @@
+import { useQuery } from "@tanstack/react-query"
+import { homeService } from "./homeService"
+
+export const eventsKey = {
+  eventsKey: ["events"] as const,
+  eventDonationKey: (id?: number) => ["eventDonation", id] as const,
+}
+
+export const useGetEventsQuery = () => {
+  return useQuery({
+    queryKey: eventsKey.eventsKey,
+    queryFn: async () => await homeService.getEvents(),
+  });
+}
+
+export const useGetEventDonationQuery = (id?: number) => {
+  return useQuery({
+    queryKey: eventsKey.eventDonationKey(id),
+    queryFn: async () => {
+      if (!id) return;
+      return await homeService.getEventDonation(id)
+    },
+  });
+} 
\ No newline at end of file
diff --git a/src/v2/client/src/pages/home/homeService.ts b/src/v2/client/src/pages/home/homeService.ts
new file mode 100644
index 00000000..c123a6f9
--- /dev/null
+++ b/src/v2/client/src/pages/home/homeService.ts
@@ -0,0 +1,16 @@
+import axios from "axios"
+import { Event } from "../../models/Event";
+import { Donation } from "../../models/Donation";
+
+export const homeService = {
+  async getEvents(): Promise<Event[]> {
+    const url = "/api/events"
+    const response = await axios.get(url);
+    return response.data
+  },
+  async getEventDonation(id: number): Promise<number> {
+    const url = `/api/donations/event/${id}`
+    const response = await axios.get(url);
+    return response.data
+  },
+}
\ No newline at end of file
diff --git a/src/v2/client/src/setupProxy.js b/src/v2/client/src/setupProxy.js
new file mode 100644
index 00000000..9ae94fd1
--- /dev/null
+++ b/src/v2/client/src/setupProxy.js
@@ -0,0 +1,10 @@
+const { createProxyMiddleware } = require("http-proxy-middleware");
+
+module.exports = function (app) {
+  app.use(
+    ["/swagger", "/api/"],
+    createProxyMiddleware({
+      target: "http://localhost:5238",
+    })
+  )
+}
\ No newline at end of file
diff --git a/src/v2/client/tsconfig.json b/src/v2/client/tsconfig.json
index 16fff78a..6e9b15cb 100644
--- a/src/v2/client/tsconfig.json
+++ b/src/v2/client/tsconfig.json
@@ -21,6 +21,7 @@
     "jsx": "react-jsx"
   },
   "include": [
-    "src"
+    "src",
+    "setupProxy.js"
   ]
-}
+}
\ No newline at end of file

From 2d58a8ed29c09b47b56f74714cc555a66602dc3c Mon Sep 17 00:00:00 2001
From: Bridger Thompson <bridgerat00@gmail.com>
Date: Thu, 21 Sep 2023 16:18:06 -0600
Subject: [PATCH 2/2] prettier home page

---
 src/v2/api/Controllers/TeamController.cs      | 16 ++++
 src/v2/api/DataAccess/TeamRepository.cs       | 43 ++++++----
 src/v2/client/package-lock.json               | 21 +++++
 src/v2/client/package.json                    |  1 +
 .../src/assets/WideContainer.module.scss      | 14 ++++
 src/v2/client/src/assets/custom.scss          |  3 +-
 src/v2/client/src/index.tsx                   |  1 +
 src/v2/client/src/models/Team.ts              | 11 +++
 .../client/src/pages/home/BenefitsModal.tsx   | 32 -------
 .../client/src/pages/home/DonationProgess.tsx | 22 ++---
 src/v2/client/src/pages/home/Home.tsx         | 82 +++++++++---------
 .../src/pages/home/UpcomingEventsModal.tsx    | 32 -------
 .../src/pages/home/events/EventDetails.tsx    | 28 +++++++
 .../{homeHooks.ts => events/eventHooks.ts}    |  6 +-
 .../eventService.ts}                          |  5 +-
 .../src/pages/home/teams/CharityTeams.tsx     | 83 +++++++++++++++++++
 .../client/src/pages/home/teams/teamHooks.ts  | 21 +++++
 .../src/pages/home/teams/teamService.ts       | 15 ++++
 18 files changed, 292 insertions(+), 144 deletions(-)
 create mode 100644 src/v2/client/src/assets/WideContainer.module.scss
 create mode 100644 src/v2/client/src/models/Team.ts
 delete mode 100644 src/v2/client/src/pages/home/BenefitsModal.tsx
 delete mode 100644 src/v2/client/src/pages/home/UpcomingEventsModal.tsx
 create mode 100644 src/v2/client/src/pages/home/events/EventDetails.tsx
 rename src/v2/client/src/pages/home/{homeHooks.ts => events/eventHooks.ts} (75%)
 rename src/v2/client/src/pages/home/{homeService.ts => events/eventService.ts} (73%)
 create mode 100644 src/v2/client/src/pages/home/teams/CharityTeams.tsx
 create mode 100644 src/v2/client/src/pages/home/teams/teamHooks.ts
 create mode 100644 src/v2/client/src/pages/home/teams/teamService.ts

diff --git a/src/v2/api/Controllers/TeamController.cs b/src/v2/api/Controllers/TeamController.cs
index b3035365..f5293e69 100644
--- a/src/v2/api/Controllers/TeamController.cs
+++ b/src/v2/api/Controllers/TeamController.cs
@@ -49,6 +49,22 @@ public async Task<ActionResult<IEnumerable<DtoTeam>>> GetByEventID(long eventId)
         }
     }
 
+    [HttpGet("event/{eventId}/user/{userid}")]
+    public async Task<ActionResult<IEnumerable<DtoTeam>>> GetUsersTeamsForEvent(long eventId, int userId)
+    {
+        Log.Information("Getting User {userid} Teams by event {eventId}", userId, eventId);
+        try
+        {
+            var teams = mapper.Map<IEnumerable<DtoTeam>>(await teamRepository.GetUsersTeamsByEventIdAsync(eventId, userId));
+            return new ActionResult<IEnumerable<DtoTeam>>(teams);
+        }
+        catch (NotFoundException<IEnumerable<Team>> ex)
+        {
+            Log.Information(ex.Message, "Event Not Found");
+            return NotFound(ex.Message);
+        }
+    }
+
     [HttpGet("{teamId}")]
     public async Task<ActionResult<DtoTeam>> GetByID(long teamId)
     {
diff --git a/src/v2/api/DataAccess/TeamRepository.cs b/src/v2/api/DataAccess/TeamRepository.cs
index 5086e94d..8c530fdf 100644
--- a/src/v2/api/DataAccess/TeamRepository.cs
+++ b/src/v2/api/DataAccess/TeamRepository.cs
@@ -11,6 +11,7 @@ public interface ITeamRepository
     Task<Team> GetTeamByIdAsync(long id);
     Task<IEnumerable<Team>> GetAllAsync();
     Task<IEnumerable<Team>> GetByEventIdAsync(long eventID);
+    Task<IEnumerable<Team>> GetUsersTeamsByEventIdAsync(long eventID, int userId);
     Task<bool> ExistsAsync(long id);
 }
 
@@ -19,7 +20,7 @@ public class TeamRepository : ITeamRepository
     private readonly AspenContext context;
     private readonly IMapper mapper;
     private readonly IPersonTeamAssoicationRepository personTeamAssociationRepository;
-    
+
 
     public TeamRepository(AspenContext context, IMapper mapper, IPersonTeamAssoicationRepository personTeamAssociationRepository)
     {
@@ -28,7 +29,7 @@ public TeamRepository(AspenContext context, IMapper mapper, IPersonTeamAssoicati
         this.personTeamAssociationRepository = personTeamAssociationRepository;
     }
 
-   
+
 
     public async Task<bool> ExistsAsync(long id)
     {
@@ -62,7 +63,7 @@ public async Task<Team> AddAsync(Team team)
                 throw new Exception("Person is already on another team in this event");
             }
         }
-        
+
         await context.Teams.AddAsync(dbTeam);
         existingEvent.Teams.Add(dbTeam);
 
@@ -76,7 +77,7 @@ public async Task<Team> EditTeamAsync(Team team)
     {
         var dbTeam = mapper.Map<DbTeam>(team);
         context.Update(dbTeam);
-        if(team.isArchived == true)
+        if (team.isArchived == true)
         {
             var teamMembers = await personTeamAssociationRepository.GetTeamMembersAsync(team.ID);
 
@@ -89,23 +90,23 @@ public async Task<Team> EditTeamAsync(Team team)
         return team;
     }
 
-  /*  public async Task DeleteTeamAsync(Team team)
-    {
-        var dbTeam = mapper.Map<DbTeam>(team);
-        context.Update(dbTeam);
+    /*  public async Task DeleteTeamAsync(Team team)
+      {
+          var dbTeam = mapper.Map<DbTeam>(team);
+          context.Update(dbTeam);
 
 
-        var teamMembers = await personTeamAssociationRepository.GetTeamMembersAsync(team.ID);
+          var teamMembers = await personTeamAssociationRepository.GetTeamMembersAsync(team.ID);
 
-        foreach (var member in teamMembers)
-        {
-            await personTeamAssociationRepository.DeleteAsync(member.ID, team.ID);
-        }
+          foreach (var member in teamMembers)
+          {
+              await personTeamAssociationRepository.DeleteAsync(member.ID, team.ID);
+          }
 
 
-        await context.SaveChangesAsync();
-    }
-*/
+          await context.SaveChangesAsync();
+      }
+  */
 
     public async Task<IEnumerable<Team>> GetByEventIdAsync(long eventID)
     {
@@ -118,4 +119,14 @@ public async Task<IEnumerable<Team>> GetByEventIdAsync(long eventID)
         return mapper.Map<IEnumerable<DbTeam>, IEnumerable<Team>>(unArchivedTeams);
     }
 
+    public async Task<IEnumerable<Team>> GetUsersTeamsByEventIdAsync(long eventID, int userId)
+    {
+        var teams = await context.PersonTeamAssociations
+        .Include(a => a.Team)
+        .Where(a => a.EventId == eventID && a.PersonId == userId)
+        .Select(a => a.Team) // Select the Team objects
+        .ToListAsync();
+
+        return mapper.Map<IEnumerable<DbTeam>, IEnumerable<Team>>(teams);
+    }
 }
diff --git a/src/v2/client/package-lock.json b/src/v2/client/package-lock.json
index 937f6ee6..ee4d0886 100644
--- a/src/v2/client/package-lock.json
+++ b/src/v2/client/package-lock.json
@@ -20,6 +20,7 @@
         "@types/react-query": "^1.2.9",
         "axios": "^1.5.0",
         "bootstrap": "^5.3.1",
+        "bootstrap-icons": "^1.11.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hot-toast": "^2.4.1",
@@ -5576,6 +5577,21 @@
         "@popperjs/core": "^2.11.8"
       }
     },
+    "node_modules/bootstrap-icons": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.1.tgz",
+      "integrity": "sha512-F0DDp7nKUX+x/QtpfRZ+XHFya60ng9nfdpdS59vDDfs4Uhuxp7zym/QavMsu/xx51txkoM9eVmpE7D08N35blw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ]
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -21745,6 +21761,11 @@
       "integrity": "sha512-jzwza3Yagduci2x0rr9MeFSORjcHpt0lRZukZPZQJT1Dth5qzV7XcgGqYzi39KGAVYR8QEDVoO0ubFKOxzMG+g==",
       "requires": {}
     },
+    "bootstrap-icons": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.1.tgz",
+      "integrity": "sha512-F0DDp7nKUX+x/QtpfRZ+XHFya60ng9nfdpdS59vDDfs4Uhuxp7zym/QavMsu/xx51txkoM9eVmpE7D08N35blw=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/src/v2/client/package.json b/src/v2/client/package.json
index a90caf4c..c98e7177 100644
--- a/src/v2/client/package.json
+++ b/src/v2/client/package.json
@@ -15,6 +15,7 @@
     "@types/react-query": "^1.2.9",
     "axios": "^1.5.0",
     "bootstrap": "^5.3.1",
+    "bootstrap-icons": "^1.11.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
diff --git a/src/v2/client/src/assets/WideContainer.module.scss b/src/v2/client/src/assets/WideContainer.module.scss
new file mode 100644
index 00000000..20400f97
--- /dev/null
+++ b/src/v2/client/src/assets/WideContainer.module.scss
@@ -0,0 +1,14 @@
+@import "./custom.scss";
+
+@mixin make-container($padding-x: $container-padding-x) {
+  width: 100%;
+  padding-right: $padding-x;
+  padding-left: $padding-x;
+  margin-right: auto;
+  margin-left: auto;
+  max-width: 100em;
+}
+
+.customContainer {
+  @include make-container(-x)
+}
\ No newline at end of file
diff --git a/src/v2/client/src/assets/custom.scss b/src/v2/client/src/assets/custom.scss
index d8cba774..3b4c27f4 100644
--- a/src/v2/client/src/assets/custom.scss
+++ b/src/v2/client/src/assets/custom.scss
@@ -1,5 +1,6 @@
 $primary: #673AB7;
-$secondary: #FFA500;
+$secondary: #8AB73A;
 $info: #0089DB;
+$success: #C3DD94;
 
 @import "../../node_modules/bootstrap/scss/bootstrap.scss"
\ No newline at end of file
diff --git a/src/v2/client/src/index.tsx b/src/v2/client/src/index.tsx
index 4eb677ba..3d676398 100644
--- a/src/v2/client/src/index.tsx
+++ b/src/v2/client/src/index.tsx
@@ -5,6 +5,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { StrictMode } from 'react';
 import "bootstrap"
 import "./assets/custom.scss"
+import "bootstrap-icons/font/bootstrap-icons.css"
 import { createRoot } from 'react-dom/client'
 
 const queryClient = getQueryClient();
diff --git a/src/v2/client/src/models/Team.ts b/src/v2/client/src/models/Team.ts
new file mode 100644
index 00000000..55284e2a
--- /dev/null
+++ b/src/v2/client/src/models/Team.ts
@@ -0,0 +1,11 @@
+export interface Team {
+  id: number;
+  description: string;
+  mainImage: string;
+  ownerId: number;
+  eventId: number;
+  name: string;
+  donationTarget: number;
+  isArchived: boolean;
+  welcomeMessage: string;
+}
\ No newline at end of file
diff --git a/src/v2/client/src/pages/home/BenefitsModal.tsx b/src/v2/client/src/pages/home/BenefitsModal.tsx
deleted file mode 100644
index e1c429fd..00000000
--- a/src/v2/client/src/pages/home/BenefitsModal.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useModal, CustomModal, ModalButton } from "../../components/CustomModal"
-
-export const BenefitsModal = () => {
-  const eventDetailModalControl = useModal("Benefits", "lg")
-
-  const ModalButton: ModalButton = ({ showModal }) => (
-    <button className="btn text-info"
-      onClick={showModal}>BENEFITS OF CHARITY TEAMS</button>
-  )
-  return (
-    <CustomModal ModalButton={ModalButton} controls={eventDetailModalControl}>
-      <>
-        <div className="modal-header">
-          <div className="modal-title fw-bold fs-4">Benefits of Joining a Charity Event Team</div>
-        </div>
-        <div className="modal-body">
-          <ul>
-            <li>Joining a team for a charity event is a powerful way to maximize your impact and make a positive difference in the lives of others.</li>
-            <li>When you're part of a team, you benefit from the camaraderie and collective motivation, which encourages you to contribute more generously than you might on your own.</li>
-            <li>The spirit of friendly competition among teams drives each member to push their limits, resulting in a greater overall contribution to the cause.</li>
-            <li>Being part of a team fosters a sense of belonging, creating a network of passionate individuals united by a common goal.</li>
-            <li>By working together and leveraging each other's strengths, you not only raise more funds for the charity, but you also forge lasting connections that strengthen your community and promote a culture of giving.</li>
-          </ul>
-          <div className="row mx-5 my-3">
-            <button className="btn text-info"
-              onClick={() => eventDetailModalControl.hide()}>CLOSE</button>
-          </div>
-        </div>
-      </>
-    </CustomModal>
-  )
-}
diff --git a/src/v2/client/src/pages/home/DonationProgess.tsx b/src/v2/client/src/pages/home/DonationProgess.tsx
index df3c0e7d..3930c96f 100644
--- a/src/v2/client/src/pages/home/DonationProgess.tsx
+++ b/src/v2/client/src/pages/home/DonationProgess.tsx
@@ -1,6 +1,6 @@
 import { FC } from "react"
 import { Event } from "../../models/Event"
-import { useGetEventDonationQuery } from "./homeHooks";
+import { useGetEventDonationQuery } from "./events/eventHooks";
 import { Spinner } from "../../components/Spinner";
 
 export const DonationProgess: FC<{
@@ -15,18 +15,14 @@ export const DonationProgess: FC<{
 
   return (
     <>
-      <div className="fs-5"><span className="fw-bold">{donated}%</span> of our ${event.donationTarget} goal</div>
-      <div className="row">
-        <div className="col-6 offset-3">
-          <div className="progress bg-success-subtle">
-            <div className="progress-bar bg-success"
-              style={{ width: (donated / event.donationTarget * 100) + "%" }}
-              role="progressbar"
-              aria-valuenow={donated}
-              aria-valuemin={1}
-              aria-valuemax={event.donationTarget} />
-          </div>
-        </div>
+      <div className="fs-5 text-center"><span className="fw-bold">{donated}%</span> of our ${event.donationTarget} goal</div>
+      <div className="progress bg-success-subtle">
+        <div className="progress-bar bg-success"
+          style={{ width: (donated / event.donationTarget * 100) + "%" }}
+          role="progressbar"
+          aria-valuenow={donated}
+          aria-valuemin={1}
+          aria-valuemax={event.donationTarget} />
       </div>
     </>
   )
diff --git a/src/v2/client/src/pages/home/Home.tsx b/src/v2/client/src/pages/home/Home.tsx
index d6e71dd1..21d9f94c 100644
--- a/src/v2/client/src/pages/home/Home.tsx
+++ b/src/v2/client/src/pages/home/Home.tsx
@@ -1,9 +1,8 @@
+import classes from "../../assets/WideContainer.module.scss"
 import { Spinner } from "../../components/Spinner";
-import { BenefitsModal } from "./BenefitsModal";
-import { UpcomingEventsModal } from "./UpcomingEventsModal";
-import { useGetEventsQuery } from "./homeHooks";
-import { Event } from "../../models/Event";
-import { DonationProgess } from "./DonationProgess";
+import { EventDetails } from "./events/EventDetails";
+import { useGetEventsQuery } from "./events/eventHooks";
+import { CharityTeams } from "./teams/CharityTeams";
 
 export const Home = () => {
   const getEventsQuery = useGetEventsQuery();
@@ -12,50 +11,45 @@ export const Home = () => {
   const currentEvent = futureEvents.length > 0 ? futureEvents[0] : undefined
 
   if (getEventsQuery.isLoading) return <Spinner />
+  if (getEventsQuery.isError) return <h3>Error getting events</h3>
+  if (!getEventsQuery.data) return <h3>Unable to get events</h3>
+
 
   return (
-    <div className="container mt-3 text-center">
-      <div className="bg-primary shadow text-white ">
-        {currentEvent ? (
-          <h3>Upcoming Event: {currentEvent.title}</h3>
-        ) : (
-          <h3>There are currently no upcoming events</h3>
-        )}
-        <iframe
-          data-testid={"homePageVideo"} id={"homePageVideo"}
-          src="https://www.youtube.com/embed/wkFlIx9sV04"
-          title="YouTube video player"
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          height="450"
-          style={{ width: "100%" }}
-          allowFullScreen />
-        <DonationProgess event={currentEvent} />
-        <div className="row py-3">
-          <div className="col-5 text-end">
-            <button className="btn btn-secondary text-white">SHARE NOW</button>
-          </div>
-          <div className="col-auto">
-            {currentEvent && <UpcomingEventsModal event={currentEvent} />}
-          </div>
-          <div className="col-auto">
-            <button className="btn btn-secondary text-white">DONATE</button>
+    <div className={`${classes.customContainer} mt-3 text-center`}>
+      <div className="row">
+        <div className="col">
+          <iframe
+            data-testid={"homePageVideo"} id={"homePageVideo"}
+            src="https://www.youtube.com/embed/wkFlIx9sV04"
+            title="YouTube video player"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            height="450"
+            style={{ width: "100%" }}
+            allowFullScreen />
+          <div className="bg-light shadow px-3">
+            <div className="fw-bold text-black fs-4">Charity Teams</div>
+            <div className="text-start">Joining a charity team is a fulfilling way to make a positive impact while connecting with like-minded individuals who share your passion for giving back.</div>
+            <div className="pb-3">
+              <div className="fw-bold fs-4">Benefits of Joining a Charity Event Team</div>
+              <ul className="text-start">
+                <li>Joining a team for a charity event is a powerful way to maximize your impact and make a positive difference in the lives of others.</li>
+                <li>When you're part of a team, you benefit from the camaraderie and collective motivation, which encourages you to contribute more generously than you might on your own.</li>
+                <li>The spirit of friendly competition among teams drives each member to push their limits, resulting in a greater overall contribution to the cause.</li>
+                <li>Being part of a team fosters a sense of belonging, creating a network of passionate individuals united by a common goal.</li>
+                <li>By working together and leveraging each other's strengths, you not only raise more funds for the charity, but you also forge lasting connections that strengthen your community and promote a culture of giving.</li>
+              </ul>
+            </div>
           </div>
         </div>
-      </div>
-      <div className="bg-light shadow px-3">
-        <div className="fw-bold text-black fs-4">Charity Teams</div>
-        <div className="text-start">Joining a charity team is a fulfilling way to make a positive impact while connecting with like-minded individuals who share your passion for giving back.</div>
-        <div className="my-3">
-          <BenefitsModal />
-        </div>
-        <div className="row pb-3">
-          <div className="col text-end">
-            <button className="btn btn-secondary text-white">ACTIVE TEAMS</button>
-          </div>
-          <div className="col text-start">
-            <button className="btn btn-secondary text-white">CREATE A TEAM</button>
+        {currentEvent && (
+          <div className="col-4">
+            <EventDetails event={currentEvent} />
+            <div className="my-2">
+              <CharityTeams eventId={currentEvent?.id} />
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </div >
   )
diff --git a/src/v2/client/src/pages/home/UpcomingEventsModal.tsx b/src/v2/client/src/pages/home/UpcomingEventsModal.tsx
deleted file mode 100644
index eed10f56..00000000
--- a/src/v2/client/src/pages/home/UpcomingEventsModal.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { FC } from "react"
-import { CustomModal, useModal, ModalButton } from "../../components/CustomModal"
-import { Event } from "../../models/Event"
-
-export const UpcomingEventsModal: FC<{
-  event: Event
-}> = ({ event }) => {
-  const eventDetailModalControl = useModal("Event Details", "lg")
-
-  const ModalButton: ModalButton = ({ showModal }) => (
-    <button className="btn btn-secondary text-white"
-      onClick={showModal}>EVENT DETAILS</button>
-  )
-  return (
-    <CustomModal ModalButton={ModalButton} controls={eventDetailModalControl}>
-      <div className="modal-content ">
-        <div className="modal-header">
-          <div className="modal-title fw-bold fs-4">{event.title}</div>
-          <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div className="modal-body">
-          <div>Location: {event.location}</div>
-          <div>Description: {event.description}</div>
-          <div className="row mx-5 my-3">
-            <button className="btn btn-secondary text-white"
-              onClick={() => eventDetailModalControl.hide()}>OK</button>
-          </div>
-        </div>
-      </div>
-    </CustomModal>
-  )
-}
diff --git a/src/v2/client/src/pages/home/events/EventDetails.tsx b/src/v2/client/src/pages/home/events/EventDetails.tsx
new file mode 100644
index 00000000..9f86591c
--- /dev/null
+++ b/src/v2/client/src/pages/home/events/EventDetails.tsx
@@ -0,0 +1,28 @@
+import { FC } from "react";
+import { DonationProgess } from "../DonationProgess";
+import { Event } from "../../../models/Event";
+
+export const EventDetails: FC<{ event: Event }> = ({ event }) => {
+  return (
+    <div className="card shadow">
+      <div className="card-header bg-primary">
+        <div className="card-title fs-4 text-white">Upcoming Event: {event.title}</div>
+      </div>
+      <div className="card-body text-start">
+        <div className="card-text">{event.description}</div>
+        <div className="card-text"><i className="bi-pin-map pe-1" />{event.location}</div>
+        <div className="card-text"><i className="bi bi-clock pe-1" />{new Date(event.date).toDateString()}</div>
+        <hr />
+        <DonationProgess event={event} />
+        <div className="row mt-2">
+          <div className="col text-end">
+            <button className="btn btn-secondary text-white">SHARE</button>
+          </div>
+          <div className="col">
+            <button className="btn btn-secondary text-white">DONATE</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/v2/client/src/pages/home/homeHooks.ts b/src/v2/client/src/pages/home/events/eventHooks.ts
similarity index 75%
rename from src/v2/client/src/pages/home/homeHooks.ts
rename to src/v2/client/src/pages/home/events/eventHooks.ts
index ec6f3a8b..e072c021 100644
--- a/src/v2/client/src/pages/home/homeHooks.ts
+++ b/src/v2/client/src/pages/home/events/eventHooks.ts
@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query"
-import { homeService } from "./homeService"
+import { eventService } from "./eventService"
 
 export const eventsKey = {
   eventsKey: ["events"] as const,
@@ -9,7 +9,7 @@ export const eventsKey = {
 export const useGetEventsQuery = () => {
   return useQuery({
     queryKey: eventsKey.eventsKey,
-    queryFn: async () => await homeService.getEvents(),
+    queryFn: async () => await eventService.getEvents(),
   });
 }
 
@@ -18,7 +18,7 @@ export const useGetEventDonationQuery = (id?: number) => {
     queryKey: eventsKey.eventDonationKey(id),
     queryFn: async () => {
       if (!id) return;
-      return await homeService.getEventDonation(id)
+      return await eventService.getEventDonation(id)
     },
   });
 } 
\ No newline at end of file
diff --git a/src/v2/client/src/pages/home/homeService.ts b/src/v2/client/src/pages/home/events/eventService.ts
similarity index 73%
rename from src/v2/client/src/pages/home/homeService.ts
rename to src/v2/client/src/pages/home/events/eventService.ts
index c123a6f9..40e4fb3c 100644
--- a/src/v2/client/src/pages/home/homeService.ts
+++ b/src/v2/client/src/pages/home/events/eventService.ts
@@ -1,8 +1,7 @@
 import axios from "axios"
-import { Event } from "../../models/Event";
-import { Donation } from "../../models/Donation";
+import { Event } from "../../../models/Event";
 
-export const homeService = {
+export const eventService = {
   async getEvents(): Promise<Event[]> {
     const url = "/api/events"
     const response = await axios.get(url);
diff --git a/src/v2/client/src/pages/home/teams/CharityTeams.tsx b/src/v2/client/src/pages/home/teams/CharityTeams.tsx
new file mode 100644
index 00000000..3ac7998e
--- /dev/null
+++ b/src/v2/client/src/pages/home/teams/CharityTeams.tsx
@@ -0,0 +1,83 @@
+import { FC, useEffect, useRef } from "react";
+import { Spinner } from "../../../components/Spinner";
+import { useGetEventTeamsQuery, useGetUsersEventTeamsQuery } from "./teamHooks"
+import { Popover } from "bootstrap";
+
+export const CharityTeams: FC<{ eventId: number }> = ({ eventId }) => {
+  const popoverRef = useRef<HTMLButtonElement>(null)
+  const teamsQuery = useGetEventTeamsQuery(eventId);
+  const allTeams = teamsQuery.data ?? []
+  const userTeamsQuery = useGetUsersEventTeamsQuery(eventId, 1)
+  const usersTeams = userTeamsQuery.data ?? []
+  const otherTeams = allTeams.filter(t => !usersTeams.includes(t))
+
+  useEffect(() => {
+    if (popoverRef.current) {
+      new Popover(popoverRef.current, {
+        content: "Create New Team",
+        trigger: "hover",
+        placement: "top"
+      });
+    }
+  });
+
+  if (teamsQuery.isLoading || userTeamsQuery.isLoading) return <Spinner />
+  if (teamsQuery.isError || userTeamsQuery.isError) return <h3>Error getting teams for event</h3>
+  if (!teamsQuery.data || !userTeamsQuery.data) return <h3>Unable to get teams for event</h3>
+
+  return (
+    <div className="card shadow">
+      <div className="card-header bg-primary">
+        <div className="row mx-2">
+          <div className="col offset-1">
+            <div className="card-title fs-4 text-white">Charity Teams</div>
+          </div>
+          <div className="col-1 my-auto">
+            <button className="btn btn-secondary text-white"
+              ref={popoverRef}><i className="bi bi-plus-square" /></button>
+          </div>
+        </div>
+      </div>
+      <div className="card-body text-start">
+        {usersTeams.length > 0 && (
+          <>
+            <div>Your Teams:</div>
+            <div className="row">
+              {usersTeams.map((t) => (
+                <div className="col-6">
+                  <div className="card">
+                    <div className="card-img bg-success">
+                      <img src={t.mainImage} alt="Team" />
+                    </div>
+                    <div className="card-body">
+                      <div className="card-title">{t.name}</div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+        {otherTeams.length > 0 && (
+          <>
+            <div>Join Team:</div>
+            <div className="row">
+              {otherTeams.map((t) => (
+                <div className="col-6">
+                  <div className="card">
+                    <div className="card-img bg-success">
+                      <img src={t.mainImage} alt="Team" />
+                    </div>
+                    <div className="card-body">
+                      <div className="card-title">{t.name}</div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/src/v2/client/src/pages/home/teams/teamHooks.ts b/src/v2/client/src/pages/home/teams/teamHooks.ts
new file mode 100644
index 00000000..ba87bd5b
--- /dev/null
+++ b/src/v2/client/src/pages/home/teams/teamHooks.ts
@@ -0,0 +1,21 @@
+import { useQuery } from "@tanstack/react-query"
+import { teamService } from "./teamService"
+
+
+export const teamsKey = {
+  eventTeamsKey: (id: number) => ["eventTeams", id] as const
+}
+
+export const useGetEventTeamsQuery = (id: number) => {
+  return useQuery({
+    queryKey: teamsKey.eventTeamsKey(id),
+    queryFn: async () => await teamService.getTeamsForEvent(id)
+  })
+}
+
+export const useGetUsersEventTeamsQuery = (id: number, userId: number) => {
+  return useQuery({
+    queryKey: teamsKey.eventTeamsKey(id),
+    queryFn: async () => await teamService.getUsersTeamsForEvent(id, userId)
+  })
+}
\ No newline at end of file
diff --git a/src/v2/client/src/pages/home/teams/teamService.ts b/src/v2/client/src/pages/home/teams/teamService.ts
new file mode 100644
index 00000000..eeedcc19
--- /dev/null
+++ b/src/v2/client/src/pages/home/teams/teamService.ts
@@ -0,0 +1,15 @@
+import axios from "axios";
+import { Team } from "../../../models/Team";
+
+export const teamService = {
+  async getTeamsForEvent(id: number): Promise<Team[]> {
+    const url = `/api/teams/event/${id}`
+    const response = await axios.get(url)
+    return response.data
+  },
+  async getUsersTeamsForEvent(id: number, userId: number): Promise<Team[]> {
+    const url = `/api/teams/event/${id}/user/${userId}`
+    const response = await axios.get(url)
+    return response.data
+  },
+}
\ No newline at end of file