diff --git a/src/views/Main/DetailReworked.js b/src/views/Main/DetailReworked.js
index 606ed1f7..6b9a1f95 100644
--- a/src/views/Main/DetailReworked.js
+++ b/src/views/Main/DetailReworked.js
@@ -52,6 +52,7 @@ import ShareIcon from "../../icons/ShareIcon";
 import Close from "../../icons/Close";
 import { shortenText } from "../../utils/globals";
 import i18next from "i18next";
+import { set } from "lodash";
 
 
 
@@ -108,6 +109,8 @@ const DetailReworked = (props) => {
   //Whether a warning that says that your local trainstation has not been used, should be shown
   const [showDifferentStationUsedWarning, setShowDifferentStationUsedWarning] =
     useState(false);
+    const [isTourLoading, setIsTourLoading] = useState(false);
+
 
   // Translation-related
   const { t } = useTranslation();
@@ -138,6 +141,20 @@ const DetailReworked = (props) => {
     window.location.reload();
   };
 
+  const LoadingSpinner = () => (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100vh',
+      }}
+    >
+      <CircularProgress size={50} />
+    </div>
+  );
+
+
 
   //max number of characters used per specific UI element (buttons)
   const maxLength = 40;
@@ -147,13 +164,14 @@ const DetailReworked = (props) => {
 
 useEffect(() => {
   if (!!tour && tour.provider) {
-    
+    setIsTourLoading(true);
+
     // API call to check the provider's permit
     // axios.get(`tours/provider/mapzssi`)  // test a case with value = 'n'
     axios.get(`tours/provider/${tour.provider}`)
       .then((response) => {
         if (response.status === 200) {
-          if(process.env.NODE_ENV != "production"){
+          if(process.env.NODE_ENV !== "production"){
             // consoleLog("L158 : response.data", response.data, true)
           }
           return response.data;
@@ -164,16 +182,18 @@ useEffect(() => {
         // Check the `allow_gpx_download` value from the API response
         if (data.allow_gpx_download === 'n') {
           setProviderPermit(false); // Set the state accordingly
+          setIsTourLoading(false);
+
         }
       })
       .catch((error) => {
         console.error("Error fetching provider permit status:", error);
+      })
+      .finally(() => {
+        setIsTourLoading(false);
       });
   }
-  // consoleLog("L172 : providerPermit", providerPermit)
-  // if(process.env.NODE_ENV != "production"){
-  //   console.log("L172 : providerPermit", providerPermit)
-  // }
+ 
 }, [tour,providerPermit]);
 
 
@@ -221,9 +241,18 @@ useEffect(() => {
 
     //Redirects to according page when it is a share link
     if (shareId !== null) {
+
+      setIsTourLoading(true);
+
       loadShareParams(shareId, city)
         .then((res) => {
-          consoleLog("L221 --> res: ", res, true) ; // output same as in "L252 crudActions" clg
+          consoleLog("L221 --> res: ", res, true) ; 
+          // city : "amstetten"
+          // date : "2024-01-16T23:00:00.000Z"
+          // success : true
+          // tourId : 2708
+          // usedCityOfCookie : true
+          setIsTourLoading(false);
           if (res.success === true) {
             if (res.usedCityOfCookie === false) {
               consoleLog("L229 --> inside : (res.usedCityOfCookie === false)")
@@ -231,38 +260,44 @@ useEffect(() => {
             }
             const redirectSearchParams = new URLSearchParams();
             const date = moment(res.date);
-            redirectSearchParams.set("id", res.tourId);
+            // redirectSearchParams.set("id", res.tourId);
             redirectSearchParams.set("city", res.city);
             redirectSearchParams.set(
               "datum",
               moment(date).format("YYYY-MM-DD")
             );
-            consoleLog('URL redirect : /tour?', redirectSearchParams.toString()); 
+
+            localStorage.setItem("tourId", res.tourId);
+
+            consoleLog('URL redirect : /tour?', `/tour?${redirectSearchParams.toString()}`); 
             //URL redirect : /tour? id=2690&city=amstetten&datum=2024-01-17
-            navigate("/tour?" + redirectSearchParams.toString());
-            // lazy(navigate("/tour?" + redirectSearchParams.toString()));
+            navigate(`/tour?${redirectSearchParams.toString()}`);
+       
           } else {
+            setIsTourLoading(false);
+            consoleLog("L245 --> inside : res.success === false")
             city && searchParams.set("city", city);
             goToStartPage();
           }
         })
         .catch((err) => {
+          setIsTourLoading(false);
           console.log("error: " + err)
           city && searchParams.set("city", city);
           goToStartPage();
         });
     }
+
     loadAllCities();
     loadCities({ limit: 5 });
-    // const tourId = localStorage.getItem("tourId");
-    const tourId = !!searchParams.get("tourId") ? searchParams.get("tourId") : !!localStorage.getItem("tourId") ? localStorage.getItem("tourId") : null;
+    const tourId = !!searchParams.get("tourId") ? searchParams.get("tourId") : !!localStorage.getItem("tourId") ? localStorage.getItem("tourId") : null; // currently we only use localStorage for tourId
 
     if (!!tourId) {
-      localStorage.setItem("tourId", tourId);
+      setIsTourLoading(true);
       loadTour(tourId, city)
         .then((tourExtracted) => {
           if (tourExtracted && tourExtracted.data && tourExtracted.data.tour) {
-            
+            setIsTourLoading(false);
             setTourDifficulty(
               !!tourExtracted.data.tour.difficulty &&
               tourExtracted.data.tour.difficulty
@@ -272,10 +307,12 @@ useEffect(() => {
             //   tourExtracted.data.tour.difficulty_orig
             //   );
           }else{
+            setIsTourLoading(false);
             console.log("No tour data retrieved")
           }
         })
         .catch((error) => {
+          setIsTourLoading(false);
           console.error("Tour not found:", error);
           if (error.response && error.response.status === 404) {
             console.error("Tour not found:", error);
@@ -289,10 +326,14 @@ useEffect(() => {
         });
     }
     if (tourId && city && !connections) {
+      setIsTourLoading(true);
       loadTourConnectionsExtended({ id: tourId, city: city }).then((res) => {
         if (res && res.data) {
           !!res.data.result && setConnections(res.data.result);
         }
+      })
+      .finally(() => {
+        setIsTourLoading(false);
       });
     }
   }, [searchParams]);
@@ -451,9 +492,9 @@ useEffect(() => {
   };
   
 
-  useEffect(() => {
-  // consoleLog("L464  : share link",shareLink )
-  }, [shareLink]);
+  // useEffect(() => {
+  // // consoleLog("L464  : share link",shareLink )
+  // }, [shareLink]);
 
   const actionButtonPart = (
     <Box className="tour-detail-action-btns-container">
@@ -626,8 +667,13 @@ useEffect(() => {
   );
 
     return (
+
       <Box sx={{ backgroundColor: "#fff" }}>
-        <Box className="newHeader" sx={{ position: "relative" }}>
+           {isTourLoading ? (
+        <LoadingSpinner />
+      ) : (
+        <>
+          <Box className="newHeader" sx={{ position: "relative" }}>
           <Box component={"div"} className="rowing blueDiv">
             <Box sx={{ display: "flex", alignItems: "center" }}>
               <Box
@@ -691,65 +737,90 @@ useEffect(() => {
               <SearchContainer pageKey="detail" goto={"/suche"} />
             </Box>
           </Box> 
-        </Box>
-        <Box>
-          <Box className="tour-detail-header">
-            <Box className="mt-3">
-              <Typography variant="title">{tour?.title}</Typography>
-            </Box>
-            <Box className="mt-3">
-              <span className="tour-detail-tag">{tour?.range}</span>
-            </Box>
           </Box>
-          <div>
-            <Box
-              sx={{ width: "100%", position: "relative" }}
-              className="tour-detail-map-container"
-            >
-              <InteractiveMap
-                gpxPositions={!!gpxPositions && gpxPositions}
-                anreiseGpxPositions={!!anreiseGpxPositions && anreiseGpxPositions}
-                abreiseGpxPositions={!!abreiseGpxPositions && abreiseGpxPositions}
-                scrollWheelZoom={false}
-              />
+          <Box>
+            <Box className="tour-detail-header">
+              <Box className="mt-3">
+                <Typography variant="title">{tour?.title}</Typography>
+              </Box>
+              <Box className="mt-3">
+                <span className="tour-detail-tag">{tour?.range}</span>
+              </Box>
             </Box>
-            <div className="tour-detail-data-container">
-              <Box>
-                <TourDetailProperties tour={tour}></TourDetailProperties>
-                <Box sx={{ textAlign: "left" }}>
-                  <div className="tour-detail-difficulties">
-                    <span className="tour-detail-difficulty">
-                      {tour && translateDiff(tourDifficulty)}
-                    </span>
-                    {/* {!!tourDifficultyOrig &&
-                      !!tourDifficulty &&
-                      tourDifficultyOrig.toLowerCase() !==
-                        tourDifficulty.toLowerCase() && (
-                        <span className="tour-detail-tag tour-detail-tag-gray">
-                          {tour && translateDiff(tourDifficultyOrig)}
-                        </span>
-                      )} */}
+            <div>
+              <Box
+                sx={{ width: "100%", position: "relative" }}
+                className="tour-detail-map-container"
+              >
+                <InteractiveMap
+                  gpxPositions={!!gpxPositions && gpxPositions}
+                  anreiseGpxPositions={!!anreiseGpxPositions && anreiseGpxPositions}
+                  abreiseGpxPositions={!!abreiseGpxPositions && abreiseGpxPositions}
+                  scrollWheelZoom={false}
+                />
+              </Box>
+              <div className="tour-detail-data-container">
+                <Box>
+                  <TourDetailProperties tour={tour}></TourDetailProperties>
+                  <Box sx={{ textAlign: "left" }}>
+                    <div className="tour-detail-difficulties">
+                      <span className="tour-detail-difficulty">
+                        {tour && translateDiff(tourDifficulty)}
+                      </span>
+                      {/* {!!tourDifficultyOrig &&
+                        !!tourDifficulty &&
+                        tourDifficultyOrig.toLowerCase() !==
+                          tourDifficulty.toLowerCase() && (
+                          <span className="tour-detail-tag tour-detail-tag-gray">
+                            {tour && translateDiff(tourDifficultyOrig)}
+                          </span>
+                        )} */}
+                    </div>
+                    <Typography variant="textSmall">{tour?.description}</Typography>
+                  </Box>
+                  <div
+                    className="tour-detail-provider-container"
+                    onClick={() => {
+                      window.open(tour?.url);
+                    }}
+                  >
+                    <div className="tour-detail-provider-icon">
+                      <ProviderLogo provider={tour?.provider} />
+                    </div>
+                    <div className="tour-detail-provider-name-link">
+                      <span className="tour-detail-provider-name">
+                        {tour?.provider_name}
+                      </span>
+                      <span className="tour-detail-provider-link">{tour?.url}</span>
+                    </div>
                   </div>
-                  <Typography variant="textSmall">{tour?.description}</Typography>
+                  {renderImage && (
+                    <Box className="tour-detail-conditional-desktop">
+                      <Divider variant="middle" />
+                      <div className="tour-detail-img-container">
+                        <img
+                          src={tour?.image_url}
+                          onError={() => {
+                            setRenderImage(false);
+                          }}
+                        />
+                      </div>
+                    </Box>
+                  )}
+                  <Box className="tour-detail-conditional-desktop">
+                    {actionButtonPart}
+                  </Box>
+                </Box>
+                <Box className="tour-detail-itinerary-container">
+                  <Itinerary
+                    connectionData={connections}
+                    dateIndex={dateIndex}
+                    onDateIndexUpdate={(di) => updateActiveConnectionIndex(di)}
+                    tour={tour}
+                  ></Itinerary>
                 </Box>
-                <div
-                  className="tour-detail-provider-container"
-                  onClick={() => {
-                    window.open(tour?.url);
-                  }}
-                >
-                  <div className="tour-detail-provider-icon">
-                    <ProviderLogo provider={tour?.provider} />
-                  </div>
-                  <div className="tour-detail-provider-name-link">
-                    <span className="tour-detail-provider-name">
-                      {tour?.provider_name}
-                    </span>
-                    <span className="tour-detail-provider-link">{tour?.url}</span>
-                  </div>
-                </div>
                 {renderImage && (
-                  <Box className="tour-detail-conditional-desktop">
+                  <Box className="tour-detail-conditional-mobile">
                     <Divider variant="middle" />
                     <div className="tour-detail-img-container">
                       <img
@@ -761,42 +832,19 @@ useEffect(() => {
                     </div>
                   </Box>
                 )}
-                <Box className="tour-detail-conditional-desktop">
-                  {actionButtonPart}
-                </Box>
-              </Box>
-              <Box className="tour-detail-itinerary-container">
-                <Itinerary
-                  connectionData={connections}
-                  dateIndex={dateIndex}
-                  onDateIndexUpdate={(di) => updateActiveConnectionIndex(di)}
-                  tour={tour}
-                ></Itinerary>
-              </Box>
-              {renderImage && (
-                <Box className="tour-detail-conditional-mobile">
-                  <Divider variant="middle" />
-                  <div className="tour-detail-img-container">
-                    <img
-                      src={tour?.image_url}
-                      onError={() => {
-                        setRenderImage(false);
-                      }}
-                    />
-                  </div>
-                </Box>
-              )}
-              {
-                <Box className="tour-detail-conditional-mobile">
-                  {actionButtonPart}
-                </Box>
-              }
+                {
+                  <Box className="tour-detail-conditional-mobile">
+                    {actionButtonPart}
+                  </Box>
+                }
+              </div>
             </div>
-          </div>
-          <div></div>
-          <Divider variant="middle" />
-        </Box>
-        <Footer></Footer>
+            <div></div>
+            <Divider variant="middle" />
+          </Box>
+          <Footer></Footer>
+        </>
+        )}
       </Box>
     );
   // }