diff --git a/src/components/RightMenu/RightMenu.tsx b/src/components/RightMenu/RightMenu.tsx
index 383754b6c80e913b06b9aea38dbf34905031378e..c4323e1549b0616411ba6a4fc0bdd45ea5306180 100644
--- a/src/components/RightMenu/RightMenu.tsx
+++ b/src/components/RightMenu/RightMenu.tsx
@@ -18,7 +18,7 @@ const RightMenu: React.FC<RightMenuProps> = (props: RightMenuProps) => {
   };
   return (
     <List
-    className="section-container"
+   // className="section-container"
       sx={{ width: "100%", maxWidth: width, bgcolor: "background.paper" }}
       component="nav"
       aria-labelledby="nested-list-subheader"
diff --git a/src/components/demo-components/fullsceen/CodeDemoFullScreenVid.tsx b/src/components/demo-components/fullsceen/CodeDemoFullScreenVid.tsx
index 4ce2fe463df90586a2482864cf33303ad15e1b22..f355012a7f137469bb9a14bbaa1670133847418c 100644
--- a/src/components/demo-components/fullsceen/CodeDemoFullScreenVid.tsx
+++ b/src/components/demo-components/fullsceen/CodeDemoFullScreenVid.tsx
@@ -28,7 +28,7 @@ const videoSample = {
     id: "fileId-1",
     size: 28 * 1024 * 1024,
     type: "video/mp4",
-    name: "Thos arrives wakanda.mp4",
+    name: "Thor arrives wakanda.mp4",
     videoUrl: ThorArrivesWakandaEN,
 };`;
 
@@ -39,7 +39,7 @@ const videoSample = {
     id: "fileId-1",
     size: 28 * 1024 * 1024,
     type: "video/mp4",
-    name: "Thos arrives wakanda.mp4",
+    name: "Thor arrives wakanda.mp4",
     videoUrl: ThorArrivesWakandaEN,
 };
 
@@ -75,7 +75,7 @@ const videoSample: ExtFile = {
     id: "fileId-1",
     size: 28 * 1024 * 1024,
     type: "video/mp4",
-    name: "Thos arrives wakanda.mp4",
+    name: "Thor arrives wakanda.mp4",
     videoUrl: ThorArrivesWakandaEN,
 };`;
 
@@ -86,7 +86,7 @@ const videoSample: ExtFile = {
     id: "fileId-1",
     size: 28 * 1024 * 1024,
     type: "video/mp4",
-    name: "Thos arrives wakanda.mp4",
+    name: "Thor arrives wakanda.mp4",
     videoUrl: ThorArrivesWakandaEN,
 };
 
diff --git a/src/components/demo-components/fullsceen/DemoFullScreenVid.tsx b/src/components/demo-components/fullsceen/DemoFullScreenVid.tsx
index 5f2b83cebb4946ccdfc33646bbd589dcb11ad1a0..763f7f6d972484d8ff1895fd5f1a4b1e467e00f6 100644
--- a/src/components/demo-components/fullsceen/DemoFullScreenVid.tsx
+++ b/src/components/demo-components/fullsceen/DemoFullScreenVid.tsx
@@ -34,6 +34,6 @@ const videoSample: ExtFile = {
   id: "fileId-1",
   size: 28 * 1024 * 1024,
   type: "video/mp4",
-  name: "Thos arrives wakanda.mp4",
+  name: "Thor arrives wakanda.mp4",
   videoUrl: ThorArrivesWakandaEN,
 };
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index 25fb74648448a7879c79b3e5a0bc96e5fa4ce55d..f66d0d61e645686d8b582ae1fa7d0208e458d59c 100644
--- a/src/pages/demo/FileMosaicDemoPage.jsx
+++ b/src/pages/demo/FileMosaicDemoPage.jsx
@@ -42,24 +42,18 @@ const FileMosaicDemoPage = (props) => {
         idSec: x.referTo.split("#")[1],
       };
     });
-    /*  console.log(
-      "scrollHandler rightMenuItemsWithIdSec",
-      rightMenuItemsWithIdSec.map((x) => x.idSec)
-    ); */
+
     const arrElements = rightMenuItemsWithIdSec.map((x) => {
       return { ...x, element: document.getElementById(x.idSec) };
     });
 
-    //console.log("scrollHandler arrElements", arrElements);
     let pos_menu = window.pageYOffset + menu.offsetHeight;
-
-    //simply chech whicof them is clser to offset toip????
     console.log("scrollHandler pos_menu", pos_menu);
 
     const arrElementsEnhanced = arrElements.map((x) => {
       const element = x.element;
       const postElement = element.offsetTop + element.offsetHeight;
-      const distance = Math.abs(postElement - pos_menu);
+      const distance = Math.round(postElement - pos_menu,0);
       return { ...x, distance };
     });
 
@@ -68,14 +62,35 @@ const FileMosaicDemoPage = (props) => {
       pos_menu,
       arrElementsEnhanced.map(({ distance }) => distance)
     );
+    console.log(
+      "scrollHandler ids",
+      pos_menu,
+      arrElementsEnhanced.map(({ id }) => id)
+    );
+    let min = Math.min(
+      ...arrElementsEnhanced
+        .map((x) => Math.round(x.distance, 0))
+        .filter((x) => x > 0)
+    );
 
-    let min = Math.min(...arrElementsEnhanced.map((x) => x.distance));
+    console.log(
+      "prev foundelement distance min id",
+      min,
+      arrElementsEnhanced.map((y) => y.distance)
+    );
 
     arrElementsEnhanced.forEach((x) => {
       if (x.distance === min) {
-        setSelectedItem(x.id);
-        console.log("foundelement distance", x.distance);
-        console.log("foundelement id", x.id);
+     /*    console.log(
+          "foundelement distance min id",
+          arrElementsEnhanced.map((y) => y.distance),
+          x.distance,
+          min,
+          x.id
+        ); */
+        setSelectedItem((_id) => {
+          return x.id;
+        });
       }
     });
 
@@ -100,7 +115,7 @@ const FileMosaicDemoPage = (props) => {
     window.addEventListener("scroll", scrollHandler);
 
     return () => {
-      console.log("foundelement","removing event");
+      console.log("foundelement", "removing event");
       window.removeEventListener("scroll", scrollHandler);
     };
   }, []);
diff --git a/src/pages/download-page/FileDownloadPage.tsx b/src/pages/download-page/FileDownloadPage.tsx
index 25cf729c525ad8398d6721146dc762c58aa7fc97..8657bba2f0f78db4dc87aa6cdb00caf86ac7d997 100644
--- a/src/pages/download-page/FileDownloadPage.tsx
+++ b/src/pages/download-page/FileDownloadPage.tsx
@@ -93,13 +93,13 @@ const FileDownloadPage = () => {
                 <li>
                   Make a GET request with{" "}
                   <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/API/fetch">
-                    fetch
+                    fetch API
                   </AnchorToTab>{" "}
                   (you can use{" "}
                   <AnchorToTab href="https://axios-http.com/">
                     axios
                   </AnchorToTab>{" "}
-                  or any other way to fetch
+                  or any other way to fetch resources from internet.
                 </li>
                 <li>
                   Create an{" "}
diff --git a/src/templates/NavBarTemplate.jsx b/src/templates/NavBarTemplate.jsx
index 5df2371bbd567958ff1c7d577982fcf5e175fc70..968fbfb48e32c9d694489b16e2c31d23819123bf 100644
--- a/src/templates/NavBarTemplate.jsx
+++ b/src/templates/NavBarTemplate.jsx
@@ -41,7 +41,9 @@ function NavBarTemplate(props) {
   };
 
   const drawer = (
-    <div>
+    <div 
+   
+    >
       <Toolbar>
         <a href="/" style={{ textDecoration: "none" }}>
           <Stack
@@ -88,6 +90,7 @@ function NavBarTemplate(props) {
     <Box sx={{ display: "flex", flexDirection: { xs: "column", sm: "row" } }}>
       <CssBaseline />
       <AppBar
+       className="section-container"
         position="fixed"
         sx={{
           width: { sm: `calc(100% - ${drawerWidth}px)` },