diff --git a/.env b/.env
index e7d504fd88f1cb552ed4b028ceb1a02517f3dcc5..0f25441c28ce3b984560ccc1065fd394fc6a83ea 100644
--- a/.env
+++ b/.env
@@ -1,3 +1,3 @@
 VITE_NODE_JS_API=http://localhost:3000
 VITE_NODE_JS_KEY=mbdmatkul4sks
-
+VITE_GYM_MEDIA_URL=http://localhost:8000/gym
diff --git a/src/App.tsx b/src/App.tsx
index 97ec59250d3867d440e43dd113debbfbf3458040..70e09c3917cb83f3761e9093b40f7a12cfe92016 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,7 +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 Gym from "@/pages/gym/Gym";
+import GymIndividual from "@/pages/gym/GymIndividual";
 
 const queryClient = new QueryClient();
 const router = createBrowserRouter(
@@ -23,7 +24,8 @@ const router = createBrowserRouter(
         <Route path="" element={<Home />} />
         <Route path="/profile" element={<Profile />} />
         <Route path="/applications" element={<Home />} />
-        <Route path="/gyms" element={<Gym />} />
+        <Route path="/gyms" element={<Gym />}></Route>
+        <Route path="/gyms/:id" element={<GymIndividual />} />
       </Route>
       <Route element={<HomeLayout />}>
         <Route path="/login" element={<Login />} />
diff --git a/src/components/gym/GymCard.tsx b/src/components/gym/GymCard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f052113f6831764c3a0255e09ff60cf57c8d6648
--- /dev/null
+++ b/src/components/gym/GymCard.tsx
@@ -0,0 +1,29 @@
+import config from "@/utils/config";
+import { GymReturned } from "@/utils/validationSchema/gym";
+import React from "react";
+import { Link } from "react-router-dom";
+
+function GymCard({
+  gym: { averageRating, cityName, monthlyPrice, name, pictureId, id },
+}: {
+  gym: GymReturned;
+}) {
+  return (
+    <Link to={`./${id}`}>
+      <article className="flex flex-col rounded-lg items-start justify-start bg-slate-600 text-white font-normal gap-2">
+        <img
+          src={`${config.GYM_MEDIA_URL}/${pictureId}.jpg`}
+          className="w-full rounded-t-lg self-center"
+        />
+        <div className="flex flex-col items-start justify-start px-4 pb-4">
+          <h3>{name}</h3>
+          <p>{cityName}</p>
+          <p>{`${averageRating} stars`}</p>
+          <p>{`${monthlyPrice}/month`}</p>
+        </div>
+      </article>
+    </Link>
+  );
+}
+
+export default GymCard;
diff --git a/src/pages/Gym.tsx b/src/pages/gym/Gym.tsx
similarity index 50%
rename from src/pages/Gym.tsx
rename to src/pages/gym/Gym.tsx
index a15c04b49e68a061eb81b2b78539ba0e61f26559..6c6322588ea55ba62ada5f46ad6e469fbbe47595 100644
--- a/src/pages/Gym.tsx
+++ b/src/pages/gym/Gym.tsx
@@ -1,5 +1,6 @@
+import GymCard from "@/components/gym/GymCard";
 import { useAllGyms } from "@/utils/context/GymProvider";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 
 function Gym() {
   const { allGyms, allGymsStatus } = useAllGyms();
@@ -12,10 +13,12 @@ function Gym() {
   }
 
   return (
-    <div>
-      {allGyms.map(({ id }) => (
-        <p>{id}</p>
-      ))}
+    <div className="w-full flex flex-col items-center justify-start py-4 lg:py-6">
+      <div className="grid gap-4 lg:gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 max-w-7xl">
+        {allGyms.map((gym) => (
+          <GymCard gym={gym} key={gym.id} />
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/src/pages/gym/GymIndividual.tsx b/src/pages/gym/GymIndividual.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..41998b45925b5775410fb7aba27a7c4931e12935
--- /dev/null
+++ b/src/pages/gym/GymIndividual.tsx
@@ -0,0 +1,8 @@
+import { useParams } from "react-router-dom";
+
+function GymIndividual() {
+  const { id } = useParams();
+  return <div>{id}</div>;
+}
+
+export default GymIndividual;
diff --git a/src/utils/config.ts b/src/utils/config.ts
index c8cfd873b499dba2856781983b2db6a70cfecd09..3475dc750b6a5081d8900fb36e96267d119612d5 100644
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -1,6 +1,7 @@
 const config = {
   NODE_JS_API: import.meta.env.VITE_NODE_JS_API as string,
   NODE_JS_KEY: import.meta.env.VITE_NODE_JS_KEY as string,
+  GYM_MEDIA_URL: import.meta.env.VITE_GYM_MEDIA_URL as string,
 };
 
 export default config;