diff --git a/index.html b/index.html
index f99c004..f86db0e 100644
--- a/index.html
+++ b/index.html
@@ -124,7 +124,7 @@ <h4>Resources</h4>
     <div class="navbar navbar-dark bg-dark shadow-sm">
       <div class="container">
         <a href="#" class="navbar-brand d-flex align-items-center">
-          <image src="../images/barquinho.png" height="40px"></image>
+          <image src="./images/barquinho.png" height="40px"></image>
         </a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
@@ -194,11 +194,11 @@ <h1 class="fw-light">Ship Design and Operation Lab @ NTNU</h1>
             <p class="lead text-body-secondary">Last update: 05 Feb 2025.</p>
             <p>
               <a target="_blank" href="https://www.ntnu.edu/ihb/ship-lab" class="btn btn-light mx-2">
-                <img  src="../images/brand_NTNU.svg" alt="NTNU Logo" height="25px"> NTNU
+                <img  src="./images/brand_NTNU.svg" alt="NTNU Logo" height="25px"> NTNU
               </a>
               <a target="_blank" href="https://github.com/shiplab/portfolio" class="btn btn-secondary mx-2">
-                <img src="../images/mark-github.svg" alt="Git Hub Logo" height="25px">
-                <img src="../images/github-logo-svg.svg" alt="Git Hub Logo" height="20px">
+                <img src="./images/mark-github.svg" alt="Git Hub Logo" height="25px">
+                <img src="./images/github-logo-svg.svg" alt="Git Hub Logo" height="20px">
                 
               </a>
             </p>
@@ -222,7 +222,7 @@ <h1>Introduction</h1>
           <p>Dowload the latest version here:</p>
           <ul>
             <li>
-              <a href="./build/vessel.zip">vesseljs.zip</a>
+              <a href="./examples/build/vessel.zip">vesseljs.zip</a>
             </li>
           </ul>
 
@@ -256,15 +256,15 @@ <h1>Examples</h1>
           <div class="row row-cols-1 row-cols-sm-2 row-cols-sm-3 row-cols-md-4 g-4">
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./Ship_in_regular_ocean.html">
-                  <img class="card-img-top static" width="100%" height="220" src="../images/Ship_in_Ocean_heave_only.jpg">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/Ship_in_Ocean_heave_only.gif">
+                <a target="_blank" href="./examples/Ship_in_regular_ocean.html">
+                  <img class="card-img-top static" width="100%" height="220" src="./images/Ship_in_Ocean_heave_only.jpg">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/Ship_in_Ocean_heave_only.gif">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Ship in regular ocean</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./Ship_in_regular_ocean.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/Ship_in_regular_ocean.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Ícaro Fonseca</small>
@@ -274,14 +274,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./Many_ships_in_regular_ocean.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/Ships_in_regular_ocean.jpg">
+                <a target="_blank" href="./examples/Many_ships_in_regular_ocean.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/Ships_in_regular_ocean.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Ships in regular ocean</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./Many_ships_in_regular_ocean.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/Many_ships_in_regular_ocean.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Ícaro Fonseca</small>
@@ -291,15 +291,15 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./Ship_in_Ocean_dynamical.html">
-                  <img class="card-img-top static" width="100%" height="220" src="../images/Ship_in_Dynamical.jpg">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/Ship_in_Dynamical.gif">
+                <a target="_blank" href="./examples/Ship_in_Ocean_dynamical.html">
+                  <img class="card-img-top static" width="100%" height="220" src="./images/Ship_in_Dynamical.jpg">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/Ship_in_Dynamical.gif">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Barge motion with equations</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./Ship_in_regular_ocean.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/Ship_in_regular_ocean.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Felipe Ferrari</small>
@@ -309,14 +309,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./Radiation_WAMIT.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/Radiation_WAMIT.jpg">
+                <a target="_blank" href="./examples/Radiation_WAMIT.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/Radiation_WAMIT.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Barge Motion with WAMIT</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./Radiation_WAMIT.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/Radiation_WAMIT.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Felipe Ferrari, <br> Daniel Prata</small>
@@ -326,15 +326,15 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./Ship_in_Ocean_dynamical_MooringWave.html">
-                  <img class="card-img-top static" width="100%" height="220" src="../images/MooringLine.jpg">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/MooringLine.gif">
+                <a target="_blank" href="./examples/Ship_in_Ocean_dynamical_MooringWave.html">
+                  <img class="card-img-top static" width="100%" height="220" src="./images/MooringLine.jpg">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/MooringLine.gif">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Ship with mooring</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./Ship_in_Ocean_dynamical_MooringWave.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/Ship_in_Ocean_dynamical_MooringWave.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Felipe Ferrari, <br> Diogo Kramel</small>
@@ -344,15 +344,15 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./Ship_in_Ocean_dynamical_MooringWave_Parametric.html">
-                  <img class="card-img-top static" width="100%" height="220" src="../images/MooringLineParametric.jpg">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/MooringLine.gif">
+                <a target="_blank" href="./examples/Ship_in_Ocean_dynamical_MooringWave_Parametric.html">
+                  <img class="card-img-top static" width="100%" height="220" src="./images/MooringLineParametric.jpg">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/MooringLine.gif">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Ship with mooring (parametric)</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./Ship_in_Ocean_dynamical_MooringWave_Parametric.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/Ship_in_Ocean_dynamical_MooringWave_Parametric.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Felipe Ferrari</small>
@@ -362,14 +362,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./Side_by_side_operation_complex_case.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/Side_by_side_operation_complex_case.jpg">
+                <a target="_blank" href="./examples/Side_by_side_operation_complex_case.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/Side_by_side_operation_complex_case.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Side by side 3</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./Side_by_side_operation_complex_case.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/Side_by_side_operation_complex_case.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Daniel Prata, <br> Diogo Kramel</small>
@@ -379,14 +379,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./Side_by_side_operation_different_loading_conditons.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/Side_by_side_operation_different_loading_conditons.jpg">
+                <a target="_blank" href="./examples/Side_by_side_operation_different_loading_conditons.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/Side_by_side_operation_different_loading_conditons.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Side by side 2</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./Side_by_side_operation_different_loading_conditons.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/Side_by_side_operation_different_loading_conditons.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Daniel Prata, <br> Diogo Kramel</small>
@@ -396,14 +396,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./Explore_file_side_to_side.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/Explore_file_side_to_side.jpg">
+                <a target="_blank" href="./examples/Explore_file_side_to_side.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/Explore_file_side_to_side.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Side by side 1</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./Explore_file_side_to_side.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/Explore_file_side_to_side.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Daniel Prata, <br> Diogo Kramel</small>
@@ -413,14 +413,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./Subsea.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/Subsea.jpg">
+                <a target="_blank" href="./examples/Subsea.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/Subsea.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Subsea</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./Subsea.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/Subsea.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Daniel Prata, <br> Diogo Kramel</small>
@@ -430,14 +430,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./Simple_example_with_explore_file.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/Simple_example_with_explore_file.jpg">
+                <a target="_blank" href="./examples/Simple_example_with_explore_file.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/Simple_example_with_explore_file.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Simple Multibody Example</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./Simple_example_with_explore_file.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/Simple_example_with_explore_file.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Daniel Prata, <br> Diogo Kramel</small>
@@ -447,14 +447,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./observable_examples/pendulum-load-in-lifting-operation/index.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/lifting.jpg">
+                <a target="_blank" href="./examples/observable_examples/pendulum-load-in-lifting-operation/index.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/lifting.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Pendulum load</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./observable_examples/pendulum-load-in-lifting-operation/index.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/observable_examples/pendulum-load-in-lifting-operation/index.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Ícaro Fonseca</small>
@@ -464,14 +464,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./epoch.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/epoch.jpg">
+                <a target="_blank" href="./examples/epoch.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/epoch.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Epoch Analysis</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./epoch.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/epoch.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Felipe Ferrari, <br> Daniel Prata</small>
@@ -481,15 +481,15 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./Ship_with_aframe_in_regular_ocean.html">
-                  <img class="card-img-top static" width="100%" height="220" src="../images/Ship_with_aframe_in_regular_ocean.jpg">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/Ship_with_aframe_in_regular_ocean.gif">
+                <a target="_blank" href="./examples/Ship_with_aframe_in_regular_ocean.html">
+                  <img class="card-img-top static" width="100%" height="220" src="./images/Ship_with_aframe_in_regular_ocean.jpg">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/Ship_with_aframe_in_regular_ocean.gif">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Pendulum in Ocean</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./Ship_with_aframe_in_regular_ocean.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/Ship_with_aframe_in_regular_ocean.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Ícaro Fonseca</small>
@@ -499,14 +499,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./Ship_in_Ocean_still_water.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/Ship_in_Ocean_still_water.jpg">
+                <a target="_blank" href="./examples/Ship_in_Ocean_still_water.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/Ship_in_Ocean_still_water.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Ship in still water</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./Ship_in_Ocean_still_water.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/Ship_in_Ocean_still_water.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Felipe Ferrari</small>
@@ -516,14 +516,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./Many_ships_in_still_water.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/Many_ships_in_still_water.jpg">
+                <a target="_blank" href="./examples/Many_ships_in_still_water.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/Many_ships_in_still_water.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Ships in still water</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./Many_ships_in_still_water.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/Many_ships_in_still_water.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Ícaro Fonseca</small>
@@ -533,15 +533,15 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./Ship3D_with_pretty_JSON.html">
-                  <img class="card-img-top static" width="100%" height="220" src="../images/orbit3d.jpg">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/orbit3d.gif">
+                <a target="_blank" href="./examples/Ship3D_with_pretty_JSON.html">
+                  <img class="card-img-top static" width="100%" height="220" src="./images/orbit3d.jpg">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/orbit3d.gif">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Ship visualization</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./Ship3D_with_pretty_JSON.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/Ship3D_with_pretty_JSON.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Elias Hasle</small>
@@ -551,14 +551,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./Gunnerus_Complete_Example.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/Gunnerus.jpg">
+                <a target="_blank" href="./examples/Gunnerus_Complete_Example.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/Gunnerus.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Gunnerus</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./Gunnerus_Complete_Example.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/Gunnerus_Complete_Example.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Felipe Ferrari</small>
@@ -568,14 +568,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./Hull_hydrostatics.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/HullHydrostatics.jpg">
+                <a target="_blank" href="./examples/Hull_hydrostatics.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/HullHydrostatics.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Hull hydrostatics</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./Hull_hydrostatics.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/Hull_hydrostatics.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Ícaro Fonseca</small>
@@ -585,15 +585,15 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./Ship3D_GA.html">
-                  <img class="card-img-top static" width="100%" height="220" src="../images/Ship3D_ga.jpg">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/Ship3D_ga.gif">
+                <a target="_blank" href="./examples/Ship3D_GA.html">
+                  <img class="card-img-top static" width="100%" height="220" src="./images/Ship3D_ga.jpg">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/Ship3D_ga.gif">
                 </a>
                 <div class="card-body">
                     <p class="card-text">General Arrangement</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./Ship3D_GA.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/Ship3D_GA.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Several Authors</small>
@@ -603,14 +603,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./manoeuvring.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/manoeuvring.jpg">
+                <a target="_blank" href="./examples/manoeuvring.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/manoeuvring.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Manoeuvering Model</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./manoeuvring.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/manoeuvring.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Felipe Ferrari</small>
@@ -620,14 +620,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./manoeuvring_UiTModel.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/manoeuvring_UiTModel.jpg">
+                <a target="_blank" href="./examples/manoeuvring_UiTModel.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/manoeuvring_UiTModel.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">ADAF Project</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./manoeuvring_UiTModel.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/manoeuvring_UiTModel.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Felipe Ferrari</small>
@@ -637,14 +637,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./trondheim.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/trondheim.jpg">
+                <a target="_blank" href="./examples/trondheim.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/trondheim.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Trondheim Scene</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./trondheim.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/trondheim.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Felipe Ferrari</small>
@@ -654,14 +654,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./trondheim_compressed.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/draco3d-vert.svg">
+                <a target="_blank" href="./examples/trondheim_compressed.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/draco3d-vert.svg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Draco Compressed Model</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./trondheim_compressed.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/trondheim_compressed.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Felipe Ferrari</small>
@@ -671,14 +671,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./ballasting.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/Ballast.jpg">
+                <a target="_blank" href="./examples/ballasting.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/Ballast.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Ballasting</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./ballasting.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/ballasting.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Several Authors</small>
@@ -688,14 +688,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./path.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/Path.jpg">
+                <a target="_blank" href="./examples/path.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/Path.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Ballasting</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./path.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/path.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Several Authors</small>
@@ -705,14 +705,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./lifecycle.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/SBB.jpg">
+                <a target="_blank" href="./examples/lifecycle.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/SBB.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Lifecycle</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./lifecycle.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/lifecycle.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Several Authors</small>
@@ -722,14 +722,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./loading.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/Loading.jpg">
+                <a target="_blank" href="./examples/loading.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/Loading.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Ballasting</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./loading.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/loading.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Several Authors</small>
@@ -739,15 +739,15 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./scaleApp.html">
-                  <img class="card-img-top static" width="100%" height="220" src="../images/scaleApp.jpg">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/scaleApp.gif">
+                <a target="_blank" href="./examples/scaleApp.html">
+                  <img class="card-img-top static" width="100%" height="220" src="./images/scaleApp.jpg">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/scaleApp.gif">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Ballasting</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./scaleApp.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/scaleApp.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Several Authors</small>
@@ -757,14 +757,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./blockCase_compare.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/GZ_graphics.jpg">
+                <a target="_blank" href="./examples/blockCase_compare.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/GZ_graphics.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Validation of ship stability</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./blockCase_compare.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/blockCase_compare.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Several Authors</small>
@@ -774,15 +774,15 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./Ship_stability_with_blocks.html">
-                  <img class="card-img-top static" width="100%" height="220" src="../images/Ship_stability_with_blocks.jpg">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/Ship_stability_with_blocks.gif">
+                <a target="_blank" href="./examples/Ship_stability_with_blocks.html">
+                  <img class="card-img-top static" width="100%" height="220" src="./images/Ship_stability_with_blocks.jpg">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/Ship_stability_with_blocks.gif">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Stability with Blocks</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./Ship_stability_with_blocks.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/Ship_stability_with_blocks.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Several Authors</small>
@@ -793,7 +793,7 @@ <h1>Examples</h1>
             <div class="col fade-card">
               <div class="card shadow-sm">
                 <a target="_blank" href="https://observablehq.com/@icarofonseca/a-prime-on-web-based-simulations.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/ecms_2019.jpg">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/ecms_2019.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">ECMS 2019</p>
@@ -809,14 +809,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./dt_cv/aquarium_demo.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/dt_cv.jpg">
+                <a target="_blank" href="./examples/dt_cv/aquarium_demo.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/dt_cv.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Digital twin: Aquarium</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./dt_cv/aquarium_demo.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/dt_cv/aquarium_demo.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Ícaro Fonseca</small>
@@ -826,14 +826,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./dt_cv/basin_demo.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/dt_tpn.jpg">
+                <a target="_blank" href="./examples/dt_cv/basin_demo.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/dt_tpn.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Digital twin: Basin</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./dt_cv/basin_demo.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/dt_cv/basin_demo.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Ícaro Fonseca</small>
@@ -843,14 +843,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./openbridge/index.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/openbridge.jpg">
+                <a target="_blank" href="./examples/openbridge/index.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/openbridge.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Digital twin: Basin</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./openbridge/index.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/openbridge/index.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Ícaro Fonseca <br> Felipe Ferrari</small>
@@ -860,14 +860,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./openbridge/alesund_with_ais.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/alesund_with_ais.jpg">
+                <a target="_blank" href="./examples/openbridge/alesund_with_ais.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/alesund_with_ais.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Ålesund with AIS</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./openbridge/alesund_with_ais.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/openbridge/alesund_with_ais.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Ícaro Fonseca <br> Felipe Ferrari</small>
@@ -877,14 +877,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./openbridge/Gunnerus_Browser.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/Gunnerus_Browser.jpg">
+                <a target="_blank" href="./examples/openbridge/Gunnerus_Browser.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/Gunnerus_Browser.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Dashboard</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./openbridge/Gunnerus_Browser.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/openbridge/Gunnerus_Browser.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Felipe Ferrari</small>
@@ -895,7 +895,7 @@ <h1>Examples</h1>
             <div class="col fade-card">
               <div class="card shadow-sm">
                 <a target="_blank" href="https://ferrari212.github.io/VesselsEditor/">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/vessel_editor.jpg">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/vessel_editor.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Dashboard</p>
@@ -911,14 +911,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./Many_ships_performance_verification_without_environment.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/Many_ships_performance.jpg">
+                <a target="_blank" href="./examples/Many_ships_performance_verification_without_environment.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/Many_ships_performance.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Performance Verification</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <button  target="_blank" href="./Many_ships_performance_verification_without_environment.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <button  target="_blank" href="./examples/Many_ships_performance_verification_without_environment.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Felipe Ferrari</small>
@@ -928,14 +928,14 @@ <h1>Examples</h1>
             </div>
             <div class="col fade-card">
               <div class="card shadow-sm">
-                <a target="_blank" href="./observable_examples/from_concept_to_simulation_intro/index.html">
-                  <img class="card-img-top active" width="100%" height="220" src="../images/Gunnerus_starboard_su.jpg">
+                <a target="_blank" href="./examples/observable_examples/from_concept_to_simulation_intro/index.html">
+                  <img class="card-img-top active" width="100%" height="220" src="./images/Gunnerus_starboard_su.jpg">
                 </a>
                 <div class="card-body">
                     <p class="card-text">Tutorial - Observable</p>
                     <div class="d-flex justify-content-between align-items-center">
                         <div class="btn-group">
-                            <a type="button" target="_blank" href="./observable_examples/from_concept_to_simulation_intro/index.html" class="btn btn-sm btn-outline-secondary">View</a>
+                            <a type="button" target="_blank" href="./examples/observable_examples/from_concept_to_simulation_intro/index.html" class="btn btn-sm btn-outline-secondary">View</a>
                             <button type="button" class="btn btn-sm btn-outline-secondary">Code</button>
                         </div>
                         <small class="text-body-secondary">Felipe Ferrari</small>