diff --git a/assets/css/style.css b/assets/css/style.css
index 9fbcea9..6839490 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -43,6 +43,17 @@ input[type=text], select {
     background-color: #323741;
     color: white;
     min-height: 5rem;
+
+  }
+
+  #eco, #planet {
+    max-width: 200px;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+  }
+  
+
     border-radius: 10px;
     
   }
@@ -469,4 +480,5 @@ input[type=text], select {
     font-size: 20px;
       
   }
-    
\ No newline at end of file
+    
+
diff --git a/assets/images/Eco tracker logo.png b/assets/images/Eco tracker logo.png
new file mode 100644
index 0000000..6eb6561
Binary files /dev/null and b/assets/images/Eco tracker logo.png differ
diff --git a/assets/images/Enhanced-logo.png b/assets/images/Enhanced-logo.png
new file mode 100644
index 0000000..1965a7c
Binary files /dev/null and b/assets/images/Enhanced-logo.png differ
diff --git a/assets/images/no planet B.jpg b/assets/images/no planet B.jpg
new file mode 100644
index 0000000..729fbc3
Binary files /dev/null and b/assets/images/no planet B.jpg differ
diff --git a/assets/js/script.js b/assets/js/script.js
index e89b5c9..8b3ce5a 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -43,7 +43,14 @@ $('#form').on('submit', function(event) {
         title:titleInput,
         transport_types:transportInput
     }
-    
+    ///////////////////// My additional the JS provides a click func to the About //////////////////
+    $(function() {
+        $('#about-link').click(function() {
+          $('#aboutModal').modal('show');
+        });
+      });
+      
+    ///////////////////////////////////////// END //////////////////////////////////////////////////
 
     const options = {
         method: 'POST',
diff --git a/index.html b/index.html
index 680bef9..746a02e 100644
--- a/index.html
+++ b/index.html
@@ -13,13 +13,14 @@
          <link rel="stylesheet" href="./assets/css/style.css" />
     </head>
 
+
     <body>
         <header class="col-md-12">
         
             <nav class="navbar navbar-inverse btn-outline-success position-fixed">
               <div class="container-fluid d-flex justify-content-evenly">
                   <a id="len1" class="hoverable" href="#">Home</a>
-                  <a id="len2" class="hoverable" href="#">About</a>
+                  <a id="about-link" class="nav-item nav-link active hoverable" href="#" data-toggle="modal" data-target="#aboutModal"  class="hoverable">About</a>
                  <a id="len4" class="hoverable" href="./contact-us-page.html">Contact</a>
               </div>
             </nav>
@@ -28,8 +29,35 @@
             <!-- Jumbotron -->
             <div class="container-fluid text-center text-white  p-2 weather-header">
               <img style="height: 7rem; padding-bottom: 0%;" class ="logo mt-lg-5"src="./assets/images/images.jfif" alt= "eco-Trip logo">
+
               </div>
         </header>
+        
+<!-- Modal dialog -->
+<div class="modal fade" id="aboutModal" role="dialog" tabindex="-1"> <!-- tabindex="-1" makes the modal transistion quicker onto the page, without it the time to display is noticably longer -->
+  <div class="modal-dialog modal-dialog-centered" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">About</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <!-- Added context to the modal, it will need reviewing before final submission -->
+        <img src="assets/images/Enhanced-logo.png" alt="Eco-Trip company Logo" id="eco"><!-- added Eco-Trip image here --> 
+        <p>Eco-Trip is your journey to a cleaner, greener future.  With our cutting-edge tools and unwavering commitment to carbon neutrality, we empower you to make a positive impact on the world. 
+          Uncover the true cost of carbon, track and plan your emissions, and discover the greenest forms of transport to make more sustainable choices. 
+          Together, we can create a better future, one mile at a time. 
+          Remember, there's no PLANet B, so join us in the global push towards a brighter tomorrow.</p>
+          <!--Add plantet B image here--><img src="assets/images/no planet B.jpg" alt="Protest sign stating that there's no planet B" id="planet">
+      </div>
+    </div>
+  </div>
+</div>
+        
+
+
         <!-- Aside Forms -->
       <!-- Aside Forms -->
       <div class="container-fluid" id="mainCont" style="max-width: 1400px">
@@ -192,7 +220,6 @@ <h2 id="form-heading" class="mt-1 h3 form-label">
                   <input id="form-2-submit"type="submit" value="Submit">
                 </form>
               </div>
-              
           </aside>
             
         </div>
@@ -207,5 +234,6 @@ <h2 id="form-heading" class="mt-1 h3 form-label">
       <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
       <script src="./assets/js/script.js"></script>
+
     </body>
 </html>
\ No newline at end of file
