diff --git a/21-Reinforcement-Learning/index.html b/21-Reinforcement-Learning/index.html
index 86d21c5..994c75a 100644
--- a/21-Reinforcement-Learning/index.html
+++ b/21-Reinforcement-Learning/index.html
@@ -6,24 +6,24 @@
   <script src="http://code.jquery.com/jquery-1.12.4.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.6.0/two.min.js"></script>
   <script type="text/javascript" src="../main.js"></script>
-  
+
   <!-- D3 -->
   <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
-  
+
   <!-- Helpers -->
   <script type="text/javascript" src="./mdp.js"></script>
   <script type="text/javascript" src="./policyEvaluation.js"></script>
-  
+
   <!-- Model -->
   <script type="text/javascript" src="./pe_model.js"></script>
-  
+
   <!-- View -->
   <script type="text/javascript" src="./pe_view.js"></script>
 
   <!-- Controller -->
   <script type="text/javascript" src="./interactive.js"></script>
   <script type="text/javascript" src="./pe_controller.js"></script>
-  
+
   <!-- Main -->
   <script type="text/javascript" src="./main.js"></script>
   <link rel="stylesheet" href="state.css">
@@ -35,8 +35,12 @@
   <div class="row">
     <div class="col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3" id="content">
       <h1>Reinforcement Learning</h1>
+      <h3>Table of contents</h3>
+      <ul class="content-table">
+        <li><a href="#policy-evaluation">Policy Evaluation</a></li>
+      </ul>
       <h2>Policy Evaluation</h2>
-      
+
       <ul>
         <li>The intensity of the blue bar shows the influence of the state value in the weighted average</li>
         <li>The state value history gets visualized as a bar chart in each state</li>
@@ -44,7 +48,7 @@ <h2>Policy Evaluation</h2>
         <li>Red indicates negative state value</li>
         <li>Dark gray indicates the terminal states</li>
       </ul>
-      
+
       <div>
         <div id='canvas'></div>
         <div  class="text-center">
diff --git a/3-Solving-Problems-By-Searching/index.html b/3-Solving-Problems-By-Searching/index.html
index c70abc6..60ace82 100644
--- a/3-Solving-Problems-By-Searching/index.html
+++ b/3-Solving-Problems-By-Searching/index.html
@@ -42,8 +42,20 @@
       <div class="row">
         <div class="col-md-6 col-sm-6">
           <h1>Solving Problems By Searching</h1>
-
-          <h2>Node Expansion</h2>
+          <h3>Table of contents</h3>
+          <ul class="content-table">
+            <li><a href="#node-expansion">Node Expansion</a></li>
+            <li><a href="#search-agent">Getting in the shoes of a Search Agent</a></li>
+            <li><a href="#breadth-first-search">Breadth First Search</a></li>
+            <li><a href="#depth-first-search">Depth First Search</a></li>
+            <li><a href="#step-costs">Step Costs</a></li>
+            <li><a href="#uniform-cost-search">Uniform Cost Search</a></li>
+            <li><a href="#depth-limited-search">Depth Limited Search</a></li>
+            <li><a href="#iterative-deepening">Iterative Deepening Depth-First Search</a></li>
+            <li><a href="#bi-directional-bfs">Bi-directional BFS</a></li>
+            <li><a href="#a-star-search">A Star Search</a></li>
+          </ul>
+          <h2 id="node-expansion">Node Expansion</h2>
           <p>
             To search through a graph, a Search Agent needs to <b>expand</b> nodes. The nodes which can be expanded by the Agent together forms the
             <b>frontier</b>. Expanding a node refers to marking the node as 'expanded' or 'visited' and adding its immediate neighbors to the frontier.
@@ -82,7 +94,7 @@ <h4>Frontier Nodes</h4>
       </div>
       <div class="row">
         <div class="col-md-6 col-sm-6">
-          <h2>Getting in the shoes of a Search Agent</h2>
+          <h2 id="search-agent">Getting in the shoes of a Search Agent</h2>
           <p>
             Let's see the prespective of a Search Agent as it searches through the graph.
             <br> Remember, the Agent can only see the nodes which are either expanded or currently present in the frontier.
@@ -104,7 +116,7 @@ <h2>Getting in the shoes of a Search Agent</h2>
       </p>
       <div class="row">
         <div class="col-md-6 col-sm-6">
-          <h2>Breadth First Search</h2>
+          <h2 id="breadth-first-search">Breadth First Search</h2>
           <p>In Breadth First Search, the node which was discovered the earliest is expanded next i.e. the node which joined the frontier earlier, is expanded earlier.</p>
           <p>
             To achieve this, Breadth First Search Algorithm uses a FIFO(First In First Out) Queue. The following graph is explored by a Breadth First Search Algorithm with 'A' as the initial node.
@@ -140,7 +152,7 @@ <h4>FIFO Queue</h4>
 
       <div class="row">
         <div class="col-md-6 col-sm-6">
-          <h2>Depth First Search</h2>
+          <h2 id="depth-first-search">Depth First Search</h2>
           <p>In Depth First Search, the node which was discovered the latest is expanded next i.e. the node which joined the frontier later, is expanded later.</p>
           <p>
             To achieve this, Depth First Search Algorithm uses a LIFO(Last In First Out) Queue. The following graph is explored by a Depth First Search Algorithm with 'A' as the initial node.
@@ -177,7 +189,7 @@ <h4>LIFO Queue</h4>
 
       <div class="row">
         <div class="col-md-6 col-sm-6">
-          <h2>Step Costs</h2>
+          <h2 id="step-costs">Step Costs</h2>
           <p>
             Until now, all the edges in our graph had the same cost.(That's why we didn't bother to mention the cost on the graph). For those kind of graphs, Breadth First Search is optimal because it always pops the shallowest node first. For the case when some
             step costs are involved when exploring the nodes, the BFS algorithm needs be extended.
@@ -231,7 +243,7 @@ <h5>Uniform Cost Search (Extension of BFS)</h5>
 
       <div class="row">
         <div class="col-md-6 col-sm-6">
-          <h2>Uniform Cost Search</h2>
+          <h2 id="uniform-cost-search">Uniform Cost Search</h2>
           <p>
             For Unifrom Cost Search, instead of using a simple LIFO queue, A priority Queue is used where the cost of reaching that node from the initial node is considered as its priority. On each iteration, the node with the smallest cost is extracted from the
             frontier for expansion.
@@ -290,7 +302,7 @@ <h4> costs <= <span class = 'ucsSeparation' style="font-size:150%;color:green">0
 
       <div class="row">
         <div class="col-md-6 col-sm-6">
-          <h2>Depth Limited Search</h2>
+          <h2 id="depth-limited-search">Depth Limited Search</h2>
           <p>
             The Depth Limited Search is the same as Depth First Search except that there is an upper limit to the depth of the nodes which the algorithm traverses. The nodes which have depths greater than this limit is not expanded by the Depth Limited Search.
           </p>
@@ -331,7 +343,7 @@ <h4>Depth Limit : </h4>
 
       <div class="row">
         <div class="col-md-6 col-sm-6">
-          <h2>Iterative Deepening Depth-First Search</h2>
+          <h2 id="iterative-deepening">Iterative Deepening Depth-First Search</h2>
           <p>
             Iterative Deepening Depth-First Search is a general strategy that is used to find the best depth limit. It does this by applying Depth Limited Search to the given problem with increasing depth limit. (0, 1, 2, 3 and so on.)
           </p>
@@ -370,7 +382,7 @@ <h4>Depth Limit : </h4>
           </div>
         </div>
       </div>
-      <h2>Bi-directional BFS</h2>
+      <h2 id="bi-directional-bfs">Bi-directional BFS</h2>
       <p>In bi-directional BFS, we run two simultaneous searches, one from the initial state and one from the goal state. We stop when these searches meet in the middle (ie, a node is explored by both the BFS)</p>
       <p>The motivation behind this is that <b>b<sup>d/2</sup> + b<sup>d/2</sup> is smaller than b<sup>d</sup></b></p>
       <p>In the diagram below, we compare the performance between bi-directional BFS and standard BFS side by side. The total number of nodes generated for each strategy is given below the diagram.</p>
@@ -394,7 +406,7 @@ <h1 id='biStepCount' style="text-align:center;margin-top:0%;"></h1>
       </div>
 
 
-      <h2>A Star Search</h2>
+      <h2 id="a-star-search">A Star Search</h2>
       <p>Click on the canvas to restart the simulation</p>
       <div class="canvas" id="aStarSearchCanvas" height="300px" style="background: rgb(154, 255, 255);">
       </div>
diff --git a/4-Beyond-Classical-Search/index.html b/4-Beyond-Classical-Search/index.html
index d272877..f857c4b 100644
--- a/4-Beyond-Classical-Search/index.html
+++ b/4-Beyond-Classical-Search/index.html
@@ -33,8 +33,21 @@
   <div class="row">
     <div class="col-sm-6 col-md-10 col-md-offset-1" id="content">
       <h1>Beyond classical search</h1>
-
-      <h2>Optimization Problem</h2>
+      <h3>Table of contents</h3>
+      <ul class="content-table">
+        <li><a href="#optimization-problem">Node Expansion</a></li>
+        <li><a href="#hill-climbing">Hill Climbing Search</a></li>
+        <li><a href="#simulated-annealing">Simulated Annealing</a></li>
+        <li><a href="#genetic-algorith">Genetic Algorithm</a></li>
+        <li><a href="#searching-with-non-deterministic-actions">Searching with non-deterministic actions</a></li>
+        <li><a href="#erratic-vacuum-world">he erratic vacuum world</a></li>
+        <li><a href="#searching-with-partial-observations">Searching with Partial Observations</a></li>
+        <li><a href="#vacuum-world-with-no-observation">Vacuum World with no observation</a></li>
+        <li><a href="#and-or-graph-search">And-Or-Graph-Search</a></li>
+        <li><a href="#online-dfs-agent">Online DFS Agent</a></li>
+        <li><a href="#lrta-agent">LRTA*-Agent</a></li>
+      </ul>
+      <h2 id="optimization-problem">Optimization Problem</h2>
       <p>In many optimization problems, the path to the solution is irrelevant. In pure optimization problems, the best state is defined by the objective function. To represent such problems, a <b>state-space</b> landscape is used. It has a location (state)
         represented by x-axis and elevation(objective function value) represented by y-axis. The best state is hence the state with the highest objective value</p>
       <p>The given diagram is a state-space representation of an objective function. You can click anywhere inside the box to reveal the elevation there. You are allowed <i>25 moves</i> to <b>find the highest peak</b> before the hill is revealed.</p>
@@ -51,7 +64,7 @@ <h2 id='hillMoves'></h2>
       <div id="hillCanvas">
       </div>
 
-      <h2>Hill Climbing Search</h2>
+      <h2 id="hill-climbing">Hill Climbing Search</h2>
       <p>In hill climbing search, the current node is replaced by the best neighbor. In this case, the objective function is represented by elevation, neighbors of a state are the states to the left and right of it and the best neigbor is the neigbor state
         with the highest elevation.</p>
       <p>The <span class='inline-legend maxima'></span> represents global maximas and <span class='inline-legend gmra'></span> represents the states from where the hill climbing search can reach a global maxima.</p>
@@ -65,7 +78,7 @@ <h2>Hill Climbing Search</h2>
       <div id="hillSearchCanvas">
       </div>
 
-      <h2>Simulated Annealing</h2>
+      <h2 id="simulated-annealing">Simulated Annealing</h2>
       <p>Simulated Annealing is a combination of Hill Climbing and Random Walk to gain more efficiency and completeness. In this procedure, instead of always moving to the best neighbor, a random neighbor is chosen. If the new state has better objective
         value than the current state, it is always chosen. If not, the algorithm accept the new state with a probability less than one. The probability of choosing a <b>bad state</b> depends on :
         <ol>
@@ -88,16 +101,16 @@ <h2>Simulated Annealing</h2>
       <div id="annealingCanvas"></div>
 
 
-      <h2>Genetic Algorithm</h2>
+      <h2 id="genetic-algorith">Genetic Algorithm</h2>
       <p>Little critters change the color of their fur to match the background to camouflage themselves from predators.</p>
       <p>Click on the canvas to generate next generation. Keep clicking to generate another progeny.</p>
       <p>Note: Single point crossover might not be suitable for all applications</p>
       <div class="canvas" id="geneticCanvas" height="300px" style="background: #87BC5E">
       </div>
 
-      <h1>Searching with non-deterministic actions</h1>
+      <h1 id="searching-with-non-deterministic-actions">Searching with non-deterministic actions</h1>
       <p>In a world with non-deterministic actions, the result of an action is not known with complete certainty. </p>
-      <h2>The erratic vacuum world</h2>
+      <h2 id="erratic-vacuum-world">The erratic vacuum world</h2>
       <p>The erratic vacuum world is an extension of vacuum world from Chapter 2. In this world, the behavior of the cleaner is non-deterministic.</p>
       <p>To define this behavior more formally, in this world, the <b>Suck</b> action works as follows</p>
       <ul>
@@ -153,8 +166,9 @@ <h5>Moves</h5>
 
 
 
-      <h1>Searching with Partial Observations</h1> Now we come back to a world where the actions of the robot are deterministic again (no erratic behavior like before) but, the robot no longer has complete sense of its current state or its environment.
-      <h2>Vacuum World with no observation</h2>
+      <h1 id="searching-with-partial-observations">Searching with Partial Observations</h1>
+      <p>Now we come back to a world where the actions of the robot are deterministic again (no erratic behavior like before) but, the robot no longer has complete sense of its current state or its environment.</p>
+      <h2 id="vacuum-world-with-no-observation">Vacuum World with no observation</h2>
       <p>In this world, the vacuum cleaner has no idea initially about its own location and the location of dirt in the world. Since the robot has no percept, it should be able to figure out a sequence of actions that will work despite its current state.</p>
       <p>Given below are 8 random initial states. You can record a sequence of actions and see it in action just like before. Assume that illegal moves (like moving right in the right-most tile) have no effect on the world.</p>
       <p>Try to find a sequence of actions that will lead to a final state (Clean all the dirt), no matter what the initial state of the world.</p>
@@ -201,18 +215,18 @@ <h5>Moves</h5>
       </div>
 
 
-      <h2>And-Or-Graph-Search</h2>
+      <h2 id="and-or-graph-search">And-Or-Graph-Search</h2>
       <div class="canvas" id="andOrGraphCanvas" height="300px">
       </div>
 
-      <h2>Online DFS Agent</h2>
+      <h2 id="online-dfs-agent">Online DFS Agent</h2>
       <p>Click to reset. Green tile is destination.</p>
       <div class="canvas" id="onlineDfsCanvas" height="300px">
       </div>
 
 
 
-      <h2>LRTA*-Agent</h2>
+      <h2 id="lrta-agent">LRTA*-Agent</h2>
       <p></p>
       <div class="canvas" id="lrtaCanvas" height="300px">
         <p></p>
diff --git a/5-Adversarial-Search/index.html b/5-Adversarial-Search/index.html
index 3bb9c92..1f7a6a5 100644
--- a/5-Adversarial-Search/index.html
+++ b/5-Adversarial-Search/index.html
@@ -5,7 +5,7 @@
   <link rel="stylesheet" href="../styles.css">
   <script src="http://code.jquery.com/jquery-1.12.4.js"></script>
   <script type="text/javascript" src="../main.js"></script>
-  
+
   <script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.6.0/two.min.js"></script>
   <script type="text/javascript" src="./minimax.js"></script>
   <script type="text/javascript" src="./alphabeta.js"></script>
@@ -17,15 +17,19 @@
   <div class="row">
     <div class="col-sm-6 col-md-offset-3" id="content">
       <h1>Adversarial Search</h1>
-
-      <h2>Minimax</h2>
+      <h3>Table of contents</h3>
+      <ul class="content-table">
+        <li><a href="#minimax">Minimax</a></li>
+        <li><a href="#alpha-beta-pruning">Alpha Beta Pruning</a></li>
+      </ul>
+      <h2 id="minimax">Minimax</h2>
       <p>Click on the screen to restart the simulation.</p>
       <div class = "canvas" id="minimaxCanvas" height="300px" style="background: rgb(154, 255, 255);">
       </div>
 
       <pre id="minimaxCode"></pre>
 
-      <h2>Alpha Beta Pruning</h2>
+      <h2 id="alpha-beta-pruning">Alpha Beta Pruning</h2>
       <p>Click on the screen to restart the simulation.</p>
       <div class = "canvas" id="alphaBetaCanvas" height="300px"></div>
 
diff --git a/6-Constraint-Satisfaction-Problems/index.html b/6-Constraint-Satisfaction-Problems/index.html
index 8a4ef5b..dc10e39 100644
--- a/6-Constraint-Satisfaction-Problems/index.html
+++ b/6-Constraint-Satisfaction-Problems/index.html
@@ -31,7 +31,16 @@
   <div class="row">
     <div class="col-sm-8 col-md-10 col-md-offset-1" id="content">
       <h1>Constraint Satisfaction Problems</h1>
-      <h2>Defining CSP with Map Coloring Problem</h2>
+      <h3>Table of contents</h3>
+      <ul class="content-table">
+        <li><a href="#sp-with-map-coloring">Defining CSP with Map Coloring Problem</a></li>
+        <li><a href="#arc-consistency">Arc consistency</a></li>
+        <li><a href="#sudoku-example-of-csp">Sudoku Example of CSP</a></li>
+        <li><a href="#backtracking-search">Backtracking Search</a></li>
+        <li><a href="#min-conflicts">Min Conflicts</a></li>
+        <li><a href="#tree-csp">Tree CSP</a></li>
+      </ul>
+      <h2 id="csp-with-map-coloring">Defining CSP with Map Coloring Problem</h2>
       <p>
         A map coloring problem is a type of CSP where each state can be assigned a color from the set (red,green,blue). The constraint involved says that no two neighbouring state is allowed to have the same color.
       </p>
@@ -54,7 +63,7 @@ <h2>Defining CSP with Map Coloring Problem</h2>
 
 
 
-      <h2>Arc consistency</h2>
+      <h2 id="arc-consistency">Arc consistency</h2>
       <p>
         <ul>
           <li>Y = X + 1</li>
@@ -67,7 +76,7 @@ <h2>Arc consistency</h2>
       <div class="canvas" id="ac3Canvas" height="300px">
       </div>
 
-      <h2>Sudoku Example of CSP</h2>
+      <h2 id="sudoku-example-of-csp">Sudoku Example of CSP</h2>
       <p>All sudoku puzzles can be forumulated as CSP by considering each <b>cell</b> as a variable. The initial domain of all cells is {1,2,3,4,5,6,7,8,9}.
         <br> The constraints are formulated by the fact that in the solution of a sudoku puzzle, no two cell in a row, column or block can have identical numbers. Thus, there is an
         <b>AllDiff( )</b> constraint for all the rows, columns and blocks.</p>
@@ -99,7 +108,7 @@ <h2>Sudoku Example of CSP</h2>
         </div>
       </div>
 
-      <h2>Backtracking Search</h2>
+      <h2 id="backtracking-search">Backtracking Search</h2>
       <p>Backtracking Search is a type of Search algorithm that is useful to solve CSPs. It interweaves inferences and search to arrive at a solution by pruning parts of the search tree.</p>
       <p>It repeatedly chooses an unassigned variable and tries all the possible values for it. If any inconsistency is detected, it backtracks and tries another value for the previous assignment.</p>
       <p>In the diagram below, order of selection of variable as well as the order of values for the variable is chosen randomly. Use the <b>Next</b> button to move forward and <b>Previous</b> button to go back. You can also use the slider to go to any state
@@ -132,13 +141,13 @@ <h5>Assignments : <span class="counter"></span></h5>
         </div>
       </div>
 
-      <h2>Min Conflicts</h2>
+      <h2 id="min-conflicts">Min Conflicts</h2>
       <p>Min conflicts stuff</p>
       <div class="canvas" id="minConflictsCanvas" height="300px">
       </div>
       <pre id="minConflictsCode"></pre>
 
-      <h2>Tree CSP</h2>
+      <h2 id="tree-csp">Tree CSP</h2>
       <p>Tree CSP Stuff</p>
       <div class="canvas" id="treeCspCanvas" height="300px">
       </div>