diff --git a/src/Components/CourtsList.tsx b/src/Components/CourtsList.tsx
index 9710f08..1665389 100644
--- a/src/Components/CourtsList.tsx
+++ b/src/Components/CourtsList.tsx
@@ -19,11 +19,130 @@ const CourtsList: React.FC = () => {
     fetchCourts();
   }, []);
 
+  const dummy = [
+    {
+      courts: [
+        {
+          available: true,
+          name: "Court 5",
+          occupiedUntil: "2025-01-20T11:23:09.874336",
+          surface: "Tartan",
+          lights: true,
+          courtID: "5",
+        },
+      ],
+      googleMapsLink: "https://maps.app.goo.gl/C8g62sqJgnEQduAK8",
+      locationID: "2",
+      address: "Drumul Taberei 53, București 061362",
+      coordinates: [44.421714958074254, 26.030068288094757],
+      courtName: "Parcul Drumul Taberei",
+    },
+    {
+      courts: [
+        {
+          available: true,
+          name: "Court 1",
+          occupiedUntil: "2025-01-18T20:24:35.902708",
+          surface: "Tartan",
+          lights: true,
+          courtID: "1",
+        },
+        {
+          available: true,
+          courtID: "2",
+          lights: false,
+          name: "Court 2",
+          occupiedUntil: "2025-01-22T10:00:03.813622",
+          surface: "Tartan",
+        },
+        {
+          available: false,
+          courtID: "3",
+          lights: false,
+          name: "Court 3",
+          occupiedUntil: "2025-01-22T11:31:17.411916",
+          surface: "Tartan",
+        },
+        {
+          available: true,
+          name: "Court 4",
+          occupiedUntil: "2025-01-20T14:08:13.252996",
+          surface: "Tartan",
+          lights: false,
+          courtID: "4",
+        },
+      ],
+      googleMapsLink: "https://maps.app.goo.gl/182ua82Pqp9G67N48",
+      locationID: "1",
+      address: "Drumul Lunca Cetății 211",
+      coordinates: [44.40045060210415, 26.17353510803108],
+      courtName: "Parc Sportiv Lunca Cetății",
+    },
+    {
+      courts: [
+        {
+          available: false,
+          courtID: "9",
+          lights: false,
+          name: "Court 9",
+          occupiedUntil: "2025-01-22T11:00:28.895782",
+          surface: "Tartan",
+        },
+        {
+          available: true,
+          name: "Court 10",
+          occupiedUntil: "2025-01-18T12:26:58.955099",
+          surface: "Tartan",
+          lights: false,
+          courtID: "10",
+        },
+      ],
+      googleMapsLink: "https://maps.app.goo.gl/PbWrLTe2zuz2NRAh9",
+      locationID: "4",
+      address: "Calea Giulești",
+      coordinates: [44.460807050214385, 26.04390284599664],
+      courtName: "Parcul Marin Preda",
+    },
+    {
+      courts: [
+        {
+          available: true,
+          name: "Court 6",
+          occupiedUntil: "2025-01-21T15:36:31.705315",
+          surface: "Tartan",
+          lights: true,
+          courtID: "6",
+        },
+        {
+          available: true,
+          name: "Court 7",
+          occupiedUntil: "2025-01-18T19:26:58.955099",
+          surface: "Tartan",
+          lights: true,
+          courtID: "7",
+        },
+        {
+          available: false,
+          courtID: "8",
+          lights: true,
+          name: "Court 8",
+          occupiedUntil: "2025-01-22T11:31:33.413979",
+          surface: "Tartan",
+        },
+      ],
+      googleMapsLink: "https://maps.app.goo.gl/ummyXqJnMi9by3vs6",
+      locationID: "3",
+      address: "Bulevardul Unirii",
+      coordinates: [44.4254754065915, 26.116106045190428],
+      courtName: "Unirii",
+    },
+  ];
+
   const fetchCourts = async () => {
     try {
       const response = await fetch(process.env.REACT_APP_COURT_GET_LINK || "");
       const data = await response.json();
-      setLocations(data.body);
+      setLocations(dummy);
     } catch (error) {
       console.error("Error fetching courts:", error);
     } finally {
@@ -35,15 +154,17 @@ const CourtsList: React.FC = () => {
     setExpandedLocation((prev) => (prev === locationID ? null : locationID));
   };
 
+  const now = 1737534968461;
+
   const getCourtStatusClass = (court: any) => {
     const occupiedUntil2 = new Date(court.occupiedUntil);
 
     const occupiedSince = new Date(occupiedUntil2);
     occupiedSince.setHours(occupiedSince.getHours() - 1);
     const currentTime = new Date();
+    console.log("currentTime.getTime()", currentTime.getTime());
 
-    const timeDiffInHours =
-      (currentTime.getTime() - occupiedSince.getTime()) / 3600000;
+    const timeDiffInHours = (now - occupiedSince.getTime()) / 3600000;
 
     if (court.available && timeDiffInHours >= 2) {
       return "available";
@@ -63,6 +184,8 @@ const CourtsList: React.FC = () => {
     );
   }
 
+  console.log("locations", locations);
+
   return (
     <div className="parentWrapper">
       <Grid container spacing={2}>
@@ -70,9 +193,7 @@ const CourtsList: React.FC = () => {
           const availableCourts = location.courts.filter(
             (court: any) =>
               court.available &&
-              (new Date().getTime() - new Date(court.occupiedUntil).getTime()) /
-                3600000 >
-                1
+              (now - new Date(court.occupiedUntil).getTime()) / 3600000 > 1
           ).length;
 
           const allFieldsAvailable = location.courts.length === availableCourts;
@@ -80,12 +201,8 @@ const CourtsList: React.FC = () => {
           const likelyAvailableCourts = location.courts.filter(
             (court: any) =>
               court.available &&
-              (new Date().getTime() - new Date(court.occupiedUntil).getTime()) /
-                3600000 >
-                0.1 &&
-              (new Date().getTime() - new Date(court.occupiedUntil).getTime()) /
-                3600000 <
-                1
+              (now - new Date(court.occupiedUntil).getTime()) / 3600000 > 0.1 &&
+              (now - new Date(court.occupiedUntil).getTime()) / 3600000 < 1
           ).length;
 
           const takenCourts = location.courts.filter(
@@ -153,7 +270,7 @@ const CourtsList: React.FC = () => {
                       occupiedSince.setHours(occupiedSince.getHours() - 1);
 
                       const timeSinceOccupied = Math.round(
-                        (new Date().getTime() - occupiedSince.getTime()) / 60000 // in minutes
+                        (now - occupiedSince.getTime()) / 60000 // in minutes
                       );
 
                       return (
diff --git a/src/pages/HowItWorks.scss b/src/pages/HowItWorks.scss
index 4005733..916e1e7 100644
--- a/src/pages/HowItWorks.scss
+++ b/src/pages/HowItWorks.scss
@@ -2,4 +2,9 @@
   display: flex;
   flex-direction: column;
   padding: 12px;
+  // align-items: flex-start;
+
+  p {
+    // text-align: justify;
+  }
 }
diff --git a/src/pages/HowItWorks.tsx b/src/pages/HowItWorks.tsx
index 4be2c9e..03d7deb 100644
--- a/src/pages/HowItWorks.tsx
+++ b/src/pages/HowItWorks.tsx
@@ -10,11 +10,23 @@ const HowItWorks = (props: Props) => {
   return (
     <div className="howItWorksParent">
       <h1>{t("howItWorks.title")}</h1>
-      <p>{t("howItWorks.p1")}</p>
-      <p>{t("howItWorks.p2")}</p>
-      <p>{t("howItWorks.p3")}</p>
-      <p>{t("howItWorks.p4")}</p>
-      <p>{t("howItWorks.p5")}</p>
+      <ul>
+        <li>
+          <p>{t("howItWorks.p1")}</p>
+        </li>
+        <li>
+          <p>{t("howItWorks.p2")}</p>
+        </li>
+        <li>
+          <p>{t("howItWorks.p3")}</p>
+        </li>
+        <li>
+          <p>{t("howItWorks.p4")}</p>
+        </li>
+        <li>
+          <p>{t("howItWorks.p5")}</p>
+        </li>
+      </ul>
     </div>
   );
 };