diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 076bc9a..ce1afb5 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -41,7 +41,7 @@
   "Vuokraamaan": "To rent",
 
   "Peräkärryn vuokraus": "Trailer rental",
-  "Varauksen tiedot": "rent details",
+  "Varauksen tiedot": "Rent details",
   "Palaute": "Feedback",
 
   "Valitse asemat": "Select stations",
@@ -51,6 +51,8 @@
 
   "Peruuta varaus": "Cancel your rent",
   "Oletko varma, että haluat peruuttaa varauksen?": "Are you sure you want to cancel your rent?",
+  "Haluatko varmasti poistua sivustolta?": "Are you sure you want to leave site?",
+  "Tekemiäsi muutoksia ei tallenneta.": "Any changes you made will not be saved.",
   "Takaisin": "Back",
   "Kyllä": "Yes",
   "Peruuta": "Cancel",
@@ -59,10 +61,13 @@
   "Täytä henkilötiedot": "Fill your info",
   "Siirry maksamaan": "Go to payment",
   "Valitse vähintään yksi asema ennen kuin jatkat.": "Select at least one station before proceeding.",
-  "Valitse tuote, ajankohta ja asema ennen kuin jatkat.": "Choose your product, time and position before proceeding.",
+  "Valitse tuote, päivämäärä ja ajankohta ennen kuin jatkat.": "Choose a product, date, and time before proceeding.",
   "Valitse tuote": "Select a product",
   "Tarvitsen adapterin": "I need an adapter",
   "Valitse päivä": "Choose a day",
+  "*harmaalla merkattuina päivinä ei ole vuokrattavia aikoja": "*there are no available times to rent on the days marked in gray",
+  "Valitse sinulle sopiva 3 tunnin vuokraus ajankohta tästä:": "Choose a 3-hour time slot that suits you:",
+
   "Vahvista": "Confirm",
   "Sulje": "Close",
   "Ymmärrän": "I understand",
@@ -110,7 +115,7 @@
   "Vuokraesine": "Rental property",
   "Vuokralleantaja vuokraa vuokralleottajalle seuraavan vuokraesineen seuraavassa säädetyin ehdoin.": "The Lessor shall lease to the Lessee the next hire item on the following terms and conditions.",
   "Perävaunu": "Trailer",
-  "Vuokra-aika": "Rental period",
+  "Vuokra-aika: 3 tuntia": "Rental period: 3 hours",
   "Nouto": "Pick up",
   "Palautus": "Return",
   "Vuokrauksen hinta 5 €": "Rental price €5",
diff --git a/public/locales/fi/translation.json b/public/locales/fi/translation.json
index 395bfba..06a353c 100644
--- a/public/locales/fi/translation.json
+++ b/public/locales/fi/translation.json
@@ -51,6 +51,8 @@
 
   "Peruuta varaus": "Peruuta varaus",
   "Oletko varma, että haluat peruuttaa varauksen?": "Oletko varma, että haluat peruuttaa varauksen?",
+  "Haluatko varmasti poistua sivustolta?": "Haluatko varmasti poistua sivustolta?",
+  "Tekemiäsi muutoksia ei tallenneta.": "Tekemiäsi muutoksia ei tallenneta.",
   "Takaisin": "Takaisin",
   "Kyllä": "Kyllä",
   "Peruuta": "Peruuta",
@@ -59,10 +61,12 @@
   "Täytä henkilötiedot": "Täytä henkilötiedot",
   "Siirry maksamaan": "Siirry maksamaan",
   "Valitse vähintään yksi asema ennen kuin jatkat.": "Valitse vähintään yksi asema ennen kuin jatkat.",
-  "Valitse tuote, ajankohta ja asema ennen kuin jatkat.": "Valitse tuote, ajankohta ja asema ennen kuin jatkat.",
+  "Valitse tuote, päivämäärä ja ajankohta ennen kuin jatkat.": "Valitse tuote, päivämäärä ja ajankohta ennen kuin jatkat.",
   "Valitse tuote": "Valitse tuote",
   "Tarvitsen adapterin": "Tarvitsen adapterin",
   "Valitse päivä": "Valitse päivä",
+  "*harmaalla merkittyinä päivinä ei ole vuokrattavia aikoja": "*harmaalla merkittyinä päivinä ei ole vuokrattavia aikoja",
+  "Valitse sinulle sopiva 3 tunnin vuokraus ajankohta tästä:": "Valitse sinulle sopiva 3 tunnin vuokraus ajankohta tästä:",
   "Vahvista": "Vahvista",
   "Sulje": "Sulje",
   "Ymmärrän": "Ymmärrän",
@@ -110,7 +114,7 @@
   "Vuokraesine": "Vuokraesine",
   "Vuokralleantaja vuokraa vuokralleottajalle seuraavan vuokraesineen seuraavassa säädetyin ehdoin.": "Vuokralleantaja vuokraa vuokralleottajalle seuraavan vuokraesineen seuraavassa säädetyin ehdoin.",
   "Perävaunu": "Perävaunu",
-  "Vuokra-aika": "Vuokra-aika",
+  "Vuokra-aika: 3 tuntia": "Vuokra-aika: 3 tuntia",
   "Nouto": "Nouto",
   "Palautus": "Palautus",
   "Vuokrauksen hinta 5 €": "Vuokrauksen hinta 5 €",
diff --git a/public/locales/sv/translation.json b/public/locales/sv/translation.json
index d08bd66..4e3967a 100644
--- a/public/locales/sv/translation.json
+++ b/public/locales/sv/translation.json
@@ -41,7 +41,7 @@
   "Vuokraamaan": "Att hyra",
 
   "Peräkärryn vuokraus": "Uthyrning av släpvagnar",
-  "Varauksen tiedot": "hyresuppgifter",
+  "Varauksen tiedot": "Hyresuppgifter",
   "Palaute": "Återkoppling",
 
   "Valitse asemat": "Välj stationer",
@@ -51,15 +51,19 @@
 
   "Peruuta varaus": "Säga upp din hyra",
   "Oletko varma, että haluat peruuttaa varauksen?": "Är du säker på att du vill säga upp din hyra?",
+  "Haluatko varmasti poistua sivustolta?": "Är du säker på att du vill lämna sidan?",
+  "Tekemiäsi muutoksia ei tallenneta.": "Dina ändringar kommer inte att sparas.",
   "Takaisin": "Tillbaka",
   "Kyllä": "Ja",
   "Peruuta": "Avbryt",
   "Edellinen": "Tidigare",
   "Valitse päivämäärä": "Välj ett datum",
+  "*harmaalla merkattuina päivinä ei ole vuokrattavia aikoja": "*det finns inga lediga tider att hyra de dagar markerade med grått",
+  "Valitse sinulle sopiva 3 tunnin vuokraus ajankohta tästä:": "Välj en 3-timmars tid som passar dig:",
   "Täytä henkilötiedot": "Fyll i din information",
   "Siirry maksamaan": "Gå till betalning",
   "Valitse vähintään yksi asema ennen kuin jatkat.": "Välj minst en station innan du fortsätter.",
-  "Valitse tuote, ajankohta ja asema ennen kuin jatkat.": "Välj produkt, tid och position innan du fortsätter.",
+  "Valitse tuote, päivämäärä ja ajankohta ennen kuin jatkat.": "Välj produkt, datum och tid innan du fortsätter.",
   "Valitse tuote": "Välj en produkt",
   "Tarvitsen adapterin": "Jag behöver en adapter",
   "Valitse päivä": "Välj en dag",
@@ -110,7 +114,7 @@
   "Vuokraesine": "Hyresfastigheter",
   "Vuokralleantaja vuokraa vuokralleottajalle seuraavan vuokraesineen seuraavassa säädetyin ehdoin.": "Hyresvärden skall hyra ut nästa hyresobjekt till hyresgästen på följande villkor.",
   "Perävaunu": "Trailer",
-  "Vuokra-aika": "Hyresperiod",
+  "Vuokra-aika: 3 tuntia": "Uthyrningsperiod: 3 timmar",
   "Nouto": "Plocka upp",
   "Palautus": "Återgång",
   "Vuokrauksen hinta 5 €": "Hyrespris 5 €",
diff --git a/src/components/Calendar.jsx b/src/components/Calendar.jsx
index bfe75dc..4ff5054 100644
--- a/src/components/Calendar.jsx
+++ b/src/components/Calendar.jsx
@@ -4,9 +4,11 @@ import 'react-calendar/dist/Calendar.css';
 import '../css/CustomCalendar.css';
 import PropTypes from 'prop-types';
 import { useStepper } from '../hooks/useStepper';
+import { useTranslation } from 'react-i18next';
 
 const RentCalendar = ({ futureDates, setSelectedDate }) => {
   const { selectedDate } = useStepper();
+  const { i18n } = useTranslation();
 
   useEffect(() => {
     const calendar = document.querySelector('.react-calendar');
@@ -46,6 +48,7 @@ const RentCalendar = ({ futureDates, setSelectedDate }) => {
       minDate={new Date()}
       tileDisabled={tileDisabled}
       tileClassName={tileClassName}
+      locale={i18n.language}
     />
   );
 };
diff --git a/src/components/PopUpInfoModal.jsx b/src/components/PopUpInfoModal.jsx
index 8632aaf..b0c865b 100644
--- a/src/components/PopUpInfoModal.jsx
+++ b/src/components/PopUpInfoModal.jsx
@@ -43,9 +43,9 @@ export const PopUpInfoModal = (props) => {
 
 PopUpInfoModal.propTypes = {
   show: PropTypes.bool.isRequired,
-  title: PropTypes.string.isRequired,
-  body: PropTypes.element.isRequired,
-  backButtonTxt: PropTypes.string,
+  title: PropTypes.string,
+  body: PropTypes.element,
+  backButtonTxt: PropTypes.bool,
   buttonTxt: PropTypes.string.isRequired,
   onHide: PropTypes.func.isRequired,
   onPrimaryButtonClick: PropTypes.func,
diff --git a/src/components/PopUpWarningModal.jsx b/src/components/PopUpWarningModal.jsx
index 9736a51..134d025 100644
--- a/src/components/PopUpWarningModal.jsx
+++ b/src/components/PopUpWarningModal.jsx
@@ -40,7 +40,7 @@ PopUpWarningModal.propTypes = {
   show: PropTypes.bool,
   onHide: PropTypes.func,
   title: PropTypes.string,
-  body: PropTypes.string,
+  body: PropTypes.obj,
   backButton: PropTypes.string,
   acceptButton: PropTypes.string,
   acceptButtonVariant: PropTypes.string,
diff --git a/src/components/SelectTime.jsx b/src/components/SelectTime.jsx
index d5ffbca..b3b8148 100644
--- a/src/components/SelectTime.jsx
+++ b/src/components/SelectTime.jsx
@@ -2,17 +2,26 @@ import TimePeriodButton from './TimePeriodButton';
 import style from '../css/SelectTime.module.css';
 import PropTypes from 'prop-types';
 
-function SelectTime({ selectedTime, setSelectedTime, stationName }) {
-  const timeOptions = ['10-13', '11-14', '12-15', '13-16', '14-17', '15-18'];
+function SelectTime({
+  selectedStationAndTime,
+  setSelectedStationAndTime,
+  stationName,
+  timeSlots,
+}) {
+  const handleClick = (stationName, timeSlot) => {
+    setSelectedStationAndTime({
+      [stationName]: timeSlot,
+    });
+  };
 
-  const itemElements = timeOptions.map((item, index) => (
+  const itemElements = timeSlots.map((item, index) => (
     <TimePeriodButton
       buttonText={item}
-      setSelectedTime={setSelectedTime}
+      setSelectedTime={handleClick}
       key={index}
-      selectedTime={selectedTime}
+      selectedTime={selectedStationAndTime[stationName]}
       stationName={stationName}
-    ></TimePeriodButton>
+    />
   ));
 
   return (
@@ -26,11 +35,12 @@ function SelectTime({ selectedTime, setSelectedTime, stationName }) {
 }
 
 SelectTime.propTypes = {
-  setSelectedTime: PropTypes.func.isRequired, // Expect a string prop, and it's required
-  setSelectedStation: PropTypes.func.isRequired, // Expect a string prop, and it's required
+  selectedStationAndTime: PropTypes.obj,
+  setSelectedStationAndTime: PropTypes.func,
+  setSelectedStation: PropTypes.func,
   stationName: PropTypes.string.isRequired, // Expect a string prop, and it's required
-  selectedStation: PropTypes.string.isRequired, // Expect a string prop, and it's required
-  selectedTime: PropTypes.string.isRequired, // Expect a string prop, and it's required
+  selectedTime: PropTypes.string,
+  timeSlots: PropTypes.array.isRequired,
 };
 
 export default SelectTime;
diff --git a/src/components/StationList.jsx b/src/components/StationList.jsx
index b55e262..54842a3 100644
--- a/src/components/StationList.jsx
+++ b/src/components/StationList.jsx
@@ -13,48 +13,19 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const StationList = ({ onStationSelected, handleWarningModal }) => {
-  const stations = [
-    {
-      stationName: 'Ruskeasanta',
-      cargoBike: true,
-      trailer: true,
-    },
-    {
-      stationName: 'Konala',
-      cargoBike: false,
-      trailer: true,
-    },
-    {
-      stationName: 'Kivikko',
-      cargoBike: true,
-      trailer: false,
-    },
-    {
-      stationName: 'Jorvas',
-      cargoBike: false,
-      trailer: true,
-    },
-    {
-      stationName: 'Ämmässuo',
-      cargoBike: true,
-      trailer: true,
-    },
-    {
-      stationName: 'Koivusuo',
-      cargoBike: true,
-      trailer: false,
-    },
-  ];
   const [showWarningModal, setShowWarningModal] = useState(false);
+  const [allSelected, setAllSelected] = useState(false);
 
-  const { selectedStations, setSelectedStations } = useStepper();
+  const { stationsData, setStationsData } = useStepper();
   const { t } = useTranslation();
 
   const navigate = useNavigate();
 
   // handle the button click for selecting a station
   const handleSubmit = () => {
-    if (selectedStations.some((checked) => checked)) {
+    if (
+      stationsData.map((station) => station.selected).some((checked) => checked)
+    ) {
       onStationSelected();
     } else {
       handleWarningModal();
@@ -69,11 +40,24 @@ const StationList = ({ onStationSelected, handleWarningModal }) => {
     setShowWarningModal(true);
   };
 
+  const handleSelectAll = () => {
+    setAllSelected(!allSelected);
+    const updatedStations = stationsData.map((station) => ({
+      ...station,
+      selected: !allSelected,
+    }));
+    setStationsData(updatedStations);
+  };
+
   // handling the checkbox changes for a specific station
   const handleCheckbox = (index) => {
-    const updatedChecked = [...selectedStations];
-    updatedChecked[index] = !updatedChecked[index];
-    setSelectedStations(updatedChecked);
+    if (allSelected) {
+      return;
+    }
+
+    const updatedStations = [...stationsData];
+    updatedStations[index].selected = !updatedStations[index].selected;
+    setStationsData(updatedStations);
   };
 
   return (
@@ -81,16 +65,17 @@ const StationList = ({ onStationSelected, handleWarningModal }) => {
       <PopUpWarningModal
         show={showWarningModal}
         onHide={() => setShowWarningModal(false)}
-        title={t('Peruuta varaus')}
-        body={t('Oletko varma, että haluat peruuttaa varauksen?')}
+        title={t('Haluatko varmasti poistua sivustolta?')}
+        body={t('Tekemiäsi muutoksia ei tallenneta.')}
         backButton={t('Takaisin')}
         acceptButton={t('Kyllä')}
         acceptButtonVariant="danger"
         onPrimaryButtonClick={frontPage}
       />
+
       <div className={styles.listContainer}>
         <ListGroup variant="flush" className={styles.listElement}>
-          {stations.map((station, index) => (
+          {stationsData.map((station, index) => (
             <ListGroup.Item
               key={station.stationName}
               className={styles.customBorder}
@@ -112,14 +97,6 @@ const StationList = ({ onStationSelected, handleWarningModal }) => {
                     <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" />
                   </svg>
                   <p id={styles.kilometers}>10 km</p>
-                  {station.cargoBike && (
-                    <img
-                      src={Bike}
-                      alt="cargo bike icon"
-                      id={styles.cargobike}
-                      draggable={false}
-                    />
-                  )}
                   {station.trailer && (
                     <img
                       src={Trailer}
@@ -128,10 +105,18 @@ const StationList = ({ onStationSelected, handleWarningModal }) => {
                       draggable={false}
                     />
                   )}
+                  {station.cargoBike && (
+                    <img
+                      src={Bike}
+                      alt="cargo bike icon"
+                      id={styles.cargobike}
+                      draggable={false}
+                    />
+                  )}
                   <Checkbox
                     onChange={() => handleCheckbox(index)}
                     value="station"
-                    checked={selectedStations[index]}
+                    checked={stationsData[index].selected}
                     isRequired={false}
                     id={styles.stationCheckbox}
                     className={styles.stationCheckboxContainer}
@@ -141,6 +126,17 @@ const StationList = ({ onStationSelected, handleWarningModal }) => {
             </ListGroup.Item>
           ))}
         </ListGroup>
+        <dev className={styles.allCheckboxContainer}>
+          <p>Valitse kaikki asemat</p>
+          <Checkbox
+            onChange={handleSelectAll}
+            value="all"
+            checked={allSelected}
+            isRequired={false}
+            id={styles.allCheckbox}
+            className={styles.allCheckbox}
+          />
+        </dev>
         <div className={styles.buttonsContainer}>
           <Button variant="outline-danger" onClick={handleOpenWarningModal}>
             {t('Peruuta')}
diff --git a/src/components/TimeForm.jsx b/src/components/TimeForm.jsx
index b6537fe..6b3c9af 100644
--- a/src/components/TimeForm.jsx
+++ b/src/components/TimeForm.jsx
@@ -23,10 +23,11 @@ const ProductAndTime = ({
   const { t } = useTranslation();
 
   const {
+    stationsData,
     selectedDate,
     setSelectedDate,
-    selectedTime,
-    setSelectedTime,
+    selectedStationAndTime,
+    setSelectedStationAndTime,
     selectedProduct,
   } = useStepper();
 
@@ -48,7 +49,7 @@ const ProductAndTime = ({
   // handling the button click for selecting a time and date
   const handleSubmit = () => {
     if (
-      selectedTime === '' ||
+      Object.keys(selectedStationAndTime).length === 0 ||
       selectedDate === null ||
       selectedProduct === ''
     ) {
@@ -71,8 +72,8 @@ const ProductAndTime = ({
       <PopUpWarningModal
         show={showWarningModal}
         onHide={() => setShowWarningModal(false)}
-        title={t('Peruuta varaus')}
-        body={t('Oletko varma, että haluat peruuttaa varauksen?')}
+        title={t('Haluatko varmasti poistua sivustolta?')}
+        body={t('Tekemiäsi muutoksia ei tallenneta.')}
         backButton={t('Takaisin')}
         acceptButton={t('Kyllä')}
         acceptButtonVariant="danger"
@@ -89,49 +90,26 @@ const ProductAndTime = ({
             futureDates={futureDates}
             setSelectedDate={setSelectedDate}
           />
+          <span className={rentStyle.calendarNote}>
+            {t('*harmaalla merkattuina päivinä ei ole vuokrattavia aikoja')}
+          </span>
         </div>
         <hr className={rentStyle.hr} />
+        <p>{t('Valitse sinulle sopiva 3 tunnin vuokraus ajankohta tästä:')}</p>
         <div className={rentStyle.selectTimeBox}>
-          <SelectTime
-            setSelectedTime={setSelectedTime}
-            selectedTime={selectedTime}
-            stationName={'Kivikko'}
-          />
-          {/* <SelectTime
-            selectedTime={selectedTime}
-            setSelectedStation={setSelectedStation}
-            selectedStation={selectedStation}
-            setSelectedTime={setSelectedTime}
-            stationName={'Konala'}
-          ></SelectTime>
-          <SelectTime
-            selectedTime={selectedTimeSlot}
-            setSelectedStation={setSelectedStation}
-            setSelectedTime={setSelectedTimeSlot}
-            selectedStation={selectedStation}
-            stationName={'Ruskeasanta'}
-          ></SelectTime>
-          <SelectTime
-            selectedTime={selectedTimeSlot}
-            setSelectedStation={setSelectedStation}
-            setSelectedTime={setSelectedTimeSlot}
-            selectedStation={selectedStation}
-            stationName={'Jorvas'}
-          ></SelectTime>
-          <SelectTime
-            selectedTime={selectedTimeSlot}
-            setSelectedStation={setSelectedStation}
-            setSelectedTime={setSelectedTimeSlot}
-            selectedStation={selectedStation}
-            stationName={'Ämmässuo'}
-          ></SelectTime>
-          <SelectTime
-            selectedTime={selectedTimeSlot}
-            setSelectedStation={setSelectedStation}
-            setSelectedTime={setSelectedTimeSlot}
-            selectedStation={selectedStation}
-            stationName={'Koivukylä'}
-          ></SelectTime> */}
+          {stationsData.map((station) => {
+            if (station.selected) {
+              return (
+                <SelectTime
+                  timeSlots={station.timeSlots}
+                  setSelectedStationAndTime={setSelectedStationAndTime}
+                  selectedStationAndTime={selectedStationAndTime}
+                  stationName={station.stationName}
+                  key={station.stationName}
+                />
+              );
+            }
+          })}
         </div>
         <div className={rentStyle.buttonsContainer}>
           <div className={rentStyle.leftButtons}>
diff --git a/src/components/TimePeriodButton.jsx b/src/components/TimePeriodButton.jsx
index db4adb4..ca8676d 100644
--- a/src/components/TimePeriodButton.jsx
+++ b/src/components/TimePeriodButton.jsx
@@ -9,11 +9,9 @@ function TimePeriodButton({
   stationName,
 }) {
   const handleClick = () => {
-    setSelectedTime(buttonText);
-    console.log(buttonText);
-    console.log(selectedTime);
-    console.log(stationName);
+    setSelectedTime(stationName, buttonText);
   };
+
   return (
     <>
       <Button
@@ -33,11 +31,10 @@ function TimePeriodButton({
 
 TimePeriodButton.propTypes = {
   buttonText: PropTypes.string.isRequired,
-  selectedStation: PropTypes.string.isRequired,
-  selectedTime: PropTypes.string.isRequired,
+  selectedTime: PropTypes.string,
   stationName: PropTypes.string.isRequired,
   setSelectedTime: PropTypes.func.isRequired,
-  setSelectedStation: PropTypes.func.isRequired,
+  setSelectedStation: PropTypes.func,
 };
 
 export default TimePeriodButton;
diff --git a/src/components/UserForm.jsx b/src/components/UserForm.jsx
index af4b019..c73aba1 100644
--- a/src/components/UserForm.jsx
+++ b/src/components/UserForm.jsx
@@ -25,9 +25,8 @@ const UserForm = ({ onSubmit, onPrevStep }) => {
 
   const {
     selectedDate,
-    selectedTime,
+    selectedStationAndTime,
     selectedProduct,
-    selectedStations,
     userData,
     setUserData,
     acceptTerms,
@@ -42,25 +41,6 @@ const UserForm = ({ onSubmit, onPrevStep }) => {
   const leaseInfoTitle = `${t('Vuokrasopimus')}`;
   const confirmInfoTitle = `${t('Vahvista vuokraus')}`;
 
-  const stations = [
-    'Ruskeasanta',
-    'Konala',
-    'Kivikko',
-    'Jorvas',
-    'Ämmässuo',
-    'Koivusuo',
-  ];
-
-  // Maps selected stations to their names, filters out unselected stations.
-  const selectedStationNames = selectedStations
-    .map((isSelected, index) => {
-      if (isSelected) {
-        const station = stations[index];
-        return station;
-      }
-    })
-    .filter(Boolean);
-
   const tosInfoBody = (
     <div>
       <h3>{t('Peräkärryn vuokrauksen sopimusehdot')}</h3>
@@ -79,11 +59,11 @@ const UserForm = ({ onSubmit, onPrevStep }) => {
   );
 
   const rentStart = `${new Date(selectedDate).toLocaleDateString()} ${
-    selectedTime[0]
-  }${selectedTime[1]}:00`;
+    selectedStationAndTime[Object.keys(selectedStationAndTime)[0]][0]
+  }${selectedStationAndTime[Object.keys(selectedStationAndTime)[0]][1]}:00`;
   const rentEnd = `${new Date(selectedDate).toLocaleDateString()} ${
-    selectedTime[3]
-  }${selectedTime[4]}:00`;
+    selectedStationAndTime[Object.keys(selectedStationAndTime)[0]][3]
+  }${selectedStationAndTime[Object.keys(selectedStationAndTime)[0]][4]}:00`;
 
   // TODO: Station address missing.
   const leaseInfoBody = (
@@ -100,7 +80,7 @@ const UserForm = ({ onSubmit, onPrevStep }) => {
       </p>
       <h2>{t('Vuokrauspaikka')}</h2>
       <p>
-        {t('Asema')}: {selectedStationNames.join(', ')} <br />
+        {t('Asema')}: {Object.keys(selectedStationAndTime)} <br />
         **station address**
       </p>
       <h2>{t('Vuokralleottajan tiedot')}</h2>
@@ -123,7 +103,7 @@ const UserForm = ({ onSubmit, onPrevStep }) => {
       </p>
       <h3>{t('Perävaunu')}</h3>
       <p>
-        {t('Vuokra-aika')}: 3 tuntia
+        {t('Vuokra-aika: 3 tuntia')}
         <br />
         {t('Nouto')}: {rentStart}
         <br />
@@ -164,14 +144,14 @@ const UserForm = ({ onSubmit, onPrevStep }) => {
           {new Date(selectedDate).toLocaleDateString()}
         </li>
         <li>
-          {' '}
-          {t('Aika')}: {selectedTime}
+          {t('Aika')}:{' '}
+          {selectedStationAndTime[Object.keys(selectedStationAndTime)[0]]}
         </li>
         <li>
           {t('Tuote')}: {selectedProduct}
         </li>
         <li>
-          {t('Asema')}: {selectedStationNames.join(', ')}
+          {t('Asema')}: {Object.keys(selectedStationAndTime)}
         </li>
       </ul>
     </div>
@@ -255,8 +235,8 @@ const UserForm = ({ onSubmit, onPrevStep }) => {
       <PopUpWarningModal
         show={showWarningModal}
         onHide={() => setShowWarningModal(false)}
-        title={t('Peruuta varaus')}
-        body={t('Oletko varma, että haluat peruuttaa varauksen?')}
+        title={t('Haluatko varmasti poistua sivustolta?')}
+        body={t('Tekemiäsi muutoksia ei tallenneta.')}
         backButton={t('Takaisin')}
         acceptButton={t('Kyllä')}
         acceptButtonVariant="danger"
@@ -359,7 +339,7 @@ const UserForm = ({ onSubmit, onPrevStep }) => {
                 {t('Edellinen')}
               </Button>
               <Button variant="outline-danger" onClick={handleOpenWarningModal}>
-                Peruuta
+                {t('Peruuta')}
               </Button>
             </div>
             <Button type="submit" id="proceedToPaymentButton" size="lg">
diff --git a/src/context/StepperContext.jsx b/src/context/StepperContext.jsx
index ae91c23..75217d0 100644
--- a/src/context/StepperContext.jsx
+++ b/src/context/StepperContext.jsx
@@ -5,18 +5,54 @@ export const StepperContext = createContext();
 
 export const StepperProvider = ({ children }) => {
   // TODO: Probably stations needs to be fetched from the backend at some point
-  const [selectedStations, setSelectedStations] = useState([
-    false,
-    false,
-    false,
-    false,
-    false,
-    false,
+  const [stationsData, setStationsData] = useState([
+    {
+      stationName: 'Ruskeasanta',
+      timeSlots: ['10-13', '11-14', '12-15', '13-16', '14-17', '15-18'],
+      cargoBike: true,
+      trailer: true,
+      selected: false,
+    },
+    {
+      stationName: 'Konala',
+      timeSlots: ['11-13', '11-14', '12-15', '13-16', '14-17', '15-18'],
+      cargoBike: false,
+      trailer: true,
+      selected: false,
+    },
+    {
+      stationName: 'Kivikko',
+      timeSlots: ['12-13', '11-14', '12-15', '13-16', '14-17', '15-18'],
+      cargoBike: true,
+      trailer: false,
+      selected: false,
+    },
+    {
+      stationName: 'Jorvas',
+      timeSlots: ['13-14', '11-14', '12-15', '13-16', '14-17', '15-18'],
+      cargoBike: false,
+      trailer: true,
+      selected: false,
+    },
+    {
+      stationName: 'Ämmässuo',
+      timeSlots: ['14-15', '11-14', '12-15', '13-16', '14-17', '15-18'],
+      cargoBike: true,
+      trailer: true,
+      selected: false,
+    },
+    {
+      stationName: 'Koivusuo',
+      timeSlots: ['15-16', '11-14', '12-15', '13-16', '14-17', '15-18'],
+      cargoBike: true,
+      trailer: false,
+      selected: false,
+    },
   ]);
   const [selectedProduct, setSelectedProduct] = useState('');
   const [selectAdaptor, setSelectAdaptor] = useState(false);
   const [selectedDate, setSelectedDate] = useState(null);
-  const [selectedTime, setSelectedTime] = useState('');
+  const [selectedStationAndTime, setSelectedStationAndTime] = useState({});
   const [userData, setUserData] = useState({
     firstName: '',
     lastName: '',
@@ -31,16 +67,16 @@ export const StepperProvider = ({ children }) => {
   return (
     <StepperContext.Provider
       value={{
-        selectedStations,
-        setSelectedStations,
+        stationsData,
+        setStationsData,
         selectedProduct,
         setSelectedProduct,
         selectAdaptor,
         setSelectAdaptor,
         selectedDate,
         setSelectedDate,
-        selectedTime,
-        setSelectedTime,
+        selectedStationAndTime,
+        setSelectedStationAndTime,
         userData,
         setUserData,
         acceptTerms,
diff --git a/src/css/RentForm.module.css b/src/css/RentForm.module.css
index 6d11c87..4522251 100644
--- a/src/css/RentForm.module.css
+++ b/src/css/RentForm.module.css
@@ -14,6 +14,14 @@
   flex-direction: column;
   align-items: center;
 }
+
+.calendarNote {
+  color: gray;
+  font-size: 0.9rem;
+  font-family: sans-serif;
+  font-style: italic;
+}
+
 .selectTimeBox {
   flex: 0 0 auto;
   width: 100%;
@@ -45,7 +53,8 @@ hr {
 .buttonsContainer {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: space-around;
+  text-align: center;
   margin: 1em 2em 1em 2em;
   width: 100%;
 }
@@ -56,10 +65,10 @@ hr {
   gap: 20px;
 }
 @media screen and (max-width: 600px) {
-  .rentBox, .calendarBox {
+  .rentBox,
+  .calendarBox {
     margin: 1rem auto;
     width: 90vw;
-
   }
   .buttonsContainer {
     margin: 0;
@@ -69,6 +78,5 @@ hr {
   .buttonsContainer button {
     font-size: 0.9rem;
     margin-left: 0.3rem;
-    
   }
-}
\ No newline at end of file
+}
diff --git a/src/css/StationList.module.css b/src/css/StationList.module.css
index 28440b6..31314a3 100644
--- a/src/css/StationList.module.css
+++ b/src/css/StationList.module.css
@@ -1,12 +1,13 @@
 /* CSS Rules for station list */
 
 .listContainer {
-  width: 50vh;
+  width: 60vh;
   margin: auto;
 }
 .rowContainer {
   display: flex;
   flex-direction: row;
+  margin-bottom: 0.5rem;
 }
 #kilometers {
   margin: 0 2rem 0 0;
@@ -29,8 +30,21 @@
 #stationCheckbox {
   margin-left: auto;
 }
+
+.allCheckboxContainer {
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: row;
+  margin-right: 1rem;
+}
+
+.allCheckbox {
+  margin-left: 1rem;
+}
+
 .list-group-flush {
   margin-bottom: 2em !important;
+  margin: 10rem;
 }
 .stationCheckboxContainer {
   margin-left: auto;
diff --git a/src/css/UserForm.module.css b/src/css/UserForm.module.css
index 7a009de..afddcd6 100644
--- a/src/css/UserForm.module.css
+++ b/src/css/UserForm.module.css
@@ -43,10 +43,8 @@ form {
 .buttonsContainer {
   display: flex;
   flex-direction: row;
-  justify-content: space-around;
+  justify-content: space-between;
   margin: 1em 0 1em 0;
-  margin-left: auto;
-  margin-right: auto;
 }
 .leftButtons {
   display: flex;
diff --git a/src/pages/RentProcess.jsx b/src/pages/RentProcess.jsx
index da6ff7a..354a2ec 100644
--- a/src/pages/RentProcess.jsx
+++ b/src/pages/RentProcess.jsx
@@ -204,15 +204,14 @@ const RentProcessPage = () => {
   const popUpWarningBody = () => {
     switch (activeStep) {
       case 0:
-        return `${t('Valitse vähintään yksi asema ennen kuin jatkat.')}`;
+        return t('Valitse vähintään yksi asema ennen kuin jatkat.');
       case 1:
-        return `${t('Valitse tuote, ajankohta ja asema ennen kuin jatkat.')}`;
+        return t('Valitse tuote, päivämäärä ja ajankohta ennen kuin jatkat.');
       default:
         return '';
     }
   };
 
-  // TODO: Minor bug: when the form errors are shown, the images change size
   return (
     <>
       <div className={PageStyles.rentProcessContainer}>