diff --git a/src/App.tsx b/src/App.tsx
index 415052c5cadc3453dcd6d6911fad31adebd667a9..4561d2a44fbb56d3ef437a1b288ea2ec4fe2b78a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,6 +13,8 @@ import HomeLayout from "@/components/HomeLayout";
 import Register from "@/pages/Register";
 import UserProvider from "@/utils/context/AuthProvider";
 import Profile from "@/pages/Profile";
+import Gym from "@/pages/Gym";
+import GymProvider from "./utils/context/GymProvider";
 
 const queryClient = new QueryClient();
 const router = createBrowserRouter(
@@ -22,7 +24,7 @@ const router = createBrowserRouter(
         <Route path="" element={<Home />} />
         <Route path="/profile" element={<Profile />} />
         <Route path="/applications" element={<Home />} />
-        <Route path="/gyms" element={<Home />} />
+        <Route path="/gyms" element={<Gym />} />
       </Route>
       <Route element={<HomeLayout />}>
         <Route path="/login" element={<Login />} />
@@ -36,7 +38,9 @@ function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <UserProvider>
-        <RouterProvider router={router} />
+        <GymProvider>
+          <RouterProvider router={router} />
+        </GymProvider>
       </UserProvider>
     </QueryClientProvider>
   );
diff --git a/src/pages/Gym.tsx b/src/pages/Gym.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a15c04b49e68a061eb81b2b78539ba0e61f26559
--- /dev/null
+++ b/src/pages/Gym.tsx
@@ -0,0 +1,23 @@
+import { useAllGyms } from "@/utils/context/GymProvider";
+import React, { useEffect } from "react";
+
+function Gym() {
+  const { allGyms, allGymsStatus } = useAllGyms();
+  useEffect(() => {
+    console.log(allGyms);
+    console.log(allGymsStatus);
+  }, [allGyms, allGymsStatus]);
+  if (allGymsStatus !== "success" || !allGyms) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      {allGyms.map(({ id }) => (
+        <p>{id}</p>
+      ))}
+    </div>
+  );
+}
+
+export default Gym;
diff --git a/src/utils/api/gym.ts b/src/utils/api/gym.ts
new file mode 100644
index 0000000000000000000000000000000000000000..655cca9a05b38b7b6e60e813ff45d42f136714cd
--- /dev/null
+++ b/src/utils/api/gym.ts
@@ -0,0 +1,16 @@
+import axios from "axios";
+import config from "../config";
+import { header } from ".";
+import { GymReturned } from "../validationSchema/gym";
+
+export async function getGym(): Promise<GymReturned[]> {
+  return (await axios.get(`${config.NODE_JS_API}/api/gym/`, header)).data;
+}
+
+export async function getGymById({
+  id,
+}: {
+  id: number;
+}): Promise<GymReturned[]> {
+  return (await axios.get(`${config.NODE_JS_API}/api/gym/${id}/`, header)).data;
+}
diff --git a/src/utils/context/GymProvider.tsx b/src/utils/context/GymProvider.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0750c3ba2eed6d57c1d6780ef27921bf0d68f16c
--- /dev/null
+++ b/src/utils/context/GymProvider.tsx
@@ -0,0 +1,40 @@
+import { ReactNode, createContext, useContext } from "react";
+import { QueryStatus, useQuery } from "react-query";
+import { getGym, getGymById } from "../api/gym";
+import { GymReturned } from "../validationSchema/gym";
+
+const AllGymsContext = createContext<{
+  allGyms: GymReturned[] | undefined;
+  allGymsStatus: QueryStatus;
+}>({ allGyms: undefined, allGymsStatus: "idle" });
+
+export function useAllGyms() {
+  return useContext(AllGymsContext);
+}
+
+export function useGym(id: number) {
+  return useQuery([
+    "gyms",
+    String(id),
+    async () => await getGymById({ id }),
+    {
+      cacheTime: 300000,
+      retry: 3,
+    },
+  ]);
+}
+
+function GymProvider({ children }: { children: ReactNode }) {
+  const { status: allGymsStatus, data: allGyms } = useQuery(["gyms"], getGym, {
+    cacheTime: 300000,
+    retry: 3,
+  });
+
+  return (
+    <AllGymsContext.Provider value={{ allGyms, allGymsStatus }}>
+      {children}
+    </AllGymsContext.Provider>
+  );
+}
+
+export default GymProvider;
diff --git a/src/utils/context/SkillProvider.tsx b/src/utils/context/SkillProvider.tsx
index 37f1c2f06e661183b8406336d09cdab787b8cde4..d0ef34730a6c800855e097e2fbc60e30393c2b06 100644
--- a/src/utils/context/SkillProvider.tsx
+++ b/src/utils/context/SkillProvider.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, createContext, useContext, useEffect } from "react";
+import { ReactNode, createContext, useContext } from "react";
 import { QueryStatus, useQuery } from "react-query";
 import { Skill } from "../validationSchema/skill";
 import { getSkills, getUserSkills } from "../api/skill";
@@ -48,11 +48,6 @@ function SkillProvider({ children }: { children: ReactNode }) {
     retry: 3,
   });
 
-  useEffect(() => {
-    console.log("Use effect : ", user);
-    // userSkillsQuery.refetch();
-  }, [user]);
-
   return (
     <AllSkillsContext.Provider value={{ allSkills, allSkillsStatus }}>
       <UserSkillsContext.Provider
diff --git a/src/utils/validationSchema/gym.ts b/src/utils/validationSchema/gym.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6f96041b1d62bddf1115710f7ade7f86e0433d78
--- /dev/null
+++ b/src/utils/validationSchema/gym.ts
@@ -0,0 +1,28 @@
+import { z } from "zod";
+
+export const gymFetchedSchema = z.object({
+  gym_id: z.number(),
+  name: z.string(),
+  description: z.string(),
+  city_id: z.number(),
+  picture_id: z.number(),
+  video_id: z.number(),
+  average_rating: z.number(),
+  monthly_price: z.number(),
+  city_name: z.string(),
+});
+
+export const gymReturnedSchema = z.object({
+  id: z.number(),
+  name: z.string(),
+  description: z.string(),
+  cityId: z.number(),
+  pictureId: z.number(),
+  videoId: z.number(),
+  averageRating: z.number(),
+  monthlyPrice: z.number(),
+  cityName: z.string(),
+});
+
+export type GymFetched = z.infer<typeof gymFetchedSchema>;
+export type GymReturned = z.infer<typeof gymReturnedSchema>;