diff --git a/.gitpod.yml b/.gitpod.yml
new file mode 100644
index 00000000..57c5a66b
--- /dev/null
+++ b/.gitpod.yml
@@ -0,0 +1,3 @@
+tasks:
+  - init: npm install
+    command: npm run start
diff --git a/README.md b/README.md
index c3c02136..31faa639 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,5 @@
+[![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/publiclab/community-toolbox)
+
 ## Community Toolbox
 
 A platform dedicated to community growth and getting insights on organization-wide activities.
diff --git a/examples/demo.css b/examples/demo.css
index 06b6bc5a..0ef6d2b7 100644
--- a/examples/demo.css
+++ b/examples/demo.css
@@ -15,6 +15,7 @@ body {
 }
 
 /* Navbar CSS */
+
 nav {
     background: #f8f8fa;
     z-index: 100;
@@ -33,6 +34,7 @@ nav ul {
     position: relative;
 }
 
+
 nav ul li {
     display: inline-block;
     background: #f8f8fa;
@@ -54,8 +56,17 @@ nav ul li a:hover {
         0 0 5px #669dc9;
 }
 
+
 nav ul ul li a:hover {
     color: #669dc9;
+}
+
+nav ul ul li{
+    background-color: #f8f8fa;
+}
+
+nav ul ul li a:hover {
+    color: #34A7C1;
     box-shadow: none;
 }
 
@@ -100,6 +111,17 @@ nav ul ul li a {
 }
 /* Navbar ends  */
 
+
+/* dependency chart */
+#dependency-div{
+    text-align: center;
+}
+
+.dependency-chart{
+    border-radius: 8px;
+    width: 100%;
+}
+
 #forkMe-ribbon {
     width: 10px;
     height: 10px;
diff --git a/examples/demo.js b/examples/demo.js
index 2ca4739e..bfd8f7b7 100644
--- a/examples/demo.js
+++ b/examples/demo.js
@@ -11,6 +11,7 @@ document.addEventListener('DOMContentLoaded', function () {
         }
     });
 
+
     /* language section */ 
     var request = new XMLHttpRequest()
 
@@ -32,6 +33,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
     /* langauge section ends */
 
+  
 
     /*Scroll to top when arrow up clicked BEGIN*/
     $(window).scroll(function() {
diff --git a/images/Boots-ground-02.png b/images/Boots-ground-02.png
new file mode 100644
index 00000000..f1736b8e
Binary files /dev/null and b/images/Boots-ground-02.png differ
diff --git a/images/dependency-chart.webp b/images/dependency-chart.webp
new file mode 100644
index 00000000..36dd2fcf
Binary files /dev/null and b/images/dependency-chart.webp differ
diff --git a/index.html b/index.html
index 9fc94796..02eec7c1 100644
--- a/index.html
+++ b/index.html
@@ -45,6 +45,7 @@
     <link rel="stylesheet" href="examples/demo.css">
     <link rel="stylesheet" href="examples/themes.css">
   <!-- Navbar start -->
+
     <nav class="navbar">
         <img id="logo-img" src="./images/Boots-ground-02.png" alt="publiclab-logo">
         <ul>
@@ -94,11 +95,61 @@
         </ul>
     </nav>
     <!-- Navbar ends -->
+
     <div id='container'>
-        <div id='forkMe-ribbon'><a href="https://github.com/publiclab/community-toolbox" >
-             <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"alt="Fork me on GitHub"></a>
-        </div>
-    </div>    
+      <div id='forkMe-ribbon'><a href="https://github.com/publiclab/community-toolbox" >
+        <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"alt="Fork me on GitHub"></a>
+      </div>
+    </div> 
+    <nav class="navbar">
+        <img id="logo-img" src="./images/Boots-ground-02.png" alt="publiclab-logo" style="height: 100px">
+        <ul>
+            <li class="list-i">
+                <a  href="#">LEARN</a>
+                <ul>
+                    <li><a class="line" href="https://github.com/publiclab/plots2/blob/master/README.md">Get Started</a>
+                    </li>
+                    <li><a class="line" href="https://github.com/publiclab/plots2/labels/support'">Assist Someone</a>
+                    </li>
+                    <li><a class="line"
+                            href="https://publiclab.org/notes/warren/10-31-2016/create-a-welcoming-first-timers-only-issue-to-invite-new-software-contributors">Create
+                            Your FTO Issue</a></li>
+                </ul>
+            </li>
+            <li class="list-i">
+                <a  href="#">ISSUES</a>
+                <ul>
+                    <li><a class="line" href="#fto-issue">FTO Issues</a></li>
+                    <li><a class="line" href="#stale-head">Stale Issues</a></li>
+                </ul>
+            </li>
+            <li class="list-i">
+                <a  href="#">PARTICIPANTS</a>
+                <ul>
+                    <li><a class="line" href="#candidate">Candidates</a></li>
+                    <li><a class="line" href="#fto-author">FTO Authors</a></li>
+                    <li><a class="line" href="#contributer">Contributers</a></li>
+                </ul>
+            </li>
+            <li class="list-i"><a  class="line" href="https://publiclab.org/chat">CHATROOM</a></li>
+            <li class="list-i">
+                <a  class="line" href="#">MORE</a>
+                <ul>
+                    <li><a class="line" href="https://github.com/publiclab/community-toolbox">Source Code</a></li>
+                    <li><a class="line" href="https://publiclab.org/conduct">Conduct</a></li>
+                    <li><a class="line" href="https://guides.github.com/activities/hello-world/">New To GitHub?</a></li>
+                    <li><a class="line" href="https://github.com/search?q=label%3Afirst-timers-only+is%3Aissue+is%3Aopen+user%3Apubliclab&ref=simplesearch">Selection of
+                            Issues</a></li>
+                    <li><a class="line"
+                            href="https://publiclab.org/notes/warren/11-08-2016/help-public-lab-s-software-grow-by-joining-a-supportive-team">Support</a>
+                    </li>
+                    <li><a class="line" href="https://github.com/search?q=label%3Ahelp-wanted+is%3Aissue+is%3Aopen+user%3Apubliclab&ref=simplesearch">Challenges</a>
+                    </li>
+                </ul>
+            </li>
+        </ul>
+    </nav>
+    <!-- Navbar ends -->
 
     <div class="container-fluid">
       <header class="text-center">
@@ -200,7 +251,10 @@ <h2><span id="fto-issue">Languages</span> Uses</h2>
       <div id="tbody" class="row language "></div>
       <!-- langauge section ends -->
 
+
       <h2><span class=" newcomer-issues" id="fto-issue-D">first timers only</span> issues</h2>
+      <h2><span class=" newcomer-issues" id="fto-issue">first timers only</span> issues</h2>
+
 
       <p>Here are <a  id="newcomer-issues-link" href="https://github.com/publiclab/plots2/labels/first-timers-only">a selection</a> of issues we've <a class=" guidelines-link" href="https://publiclab.org/n/13667">made especially for first-timers</a>. We're here to help, so just ask if one looks interesting, by leaving a comment!</p>
 
@@ -318,7 +372,10 @@ <h2 class="recent-contributors-head">Recent Contributors</h2>
         </div>
       </div>
 
+
       <h2 class="contributors-head" id="contributor">Contributors</h2>
+      <h2 class="contributors-head" id="contributer">Contributors</h2>
+
       <div class="contribs">
         <div style="display: flex; justify-content: space-between">
           <p>This project was made possible by many contributors, including the following GitHub users:</p>
@@ -328,6 +385,12 @@ <h2 class="contributors-head" id="contributor">Contributors</h2>
         <div class="well contributors"><div id="spinner-icon" style="text-align: center;"><i class="fa fa-spinner fa-spin"></i></div><p class="usernames"></p><hr /><p class="avatars text-center"></p></div>
       </div>
 
+      <!-- Dependency chart  -->
+      <div id="dependency-div">
+      <img  class="dependency-chart" src="./images/dependency-chart.webp" alt="dependency-chart">
+    </div>
+    <!-- Dependency chart end -->
+
 	  <div class="row" id="connectwithus">
 		<h2 class="text-center d-block">Connect with us</h2>
 		<!-- <p>You can connect with us on any of these platforms:</p> -->