diff --git a/index.html b/index.html
index 5511dae..2718860 100644
--- a/index.html
+++ b/index.html
@@ -53,6 +53,8 @@
         <li><a href="#code">Code</a></li>
         <li><a href="#tables">Tables</a></li>
         <li><a href="#popovers">Popovers</a></li>
+        <li><a href="#cards">Cards</a></li>
+        <li><a href="#badges">Badges</a></li>
         <li><a href="#colors">Colors</a></li>
         <li><a href="#borders">Borders & shadows</a></li>
         <li><a href="#utilities">Utilities</a></li>
@@ -633,7 +635,7 @@ function add(x, y) {
       </div>
     </div>
           
-    <div id="colors" class="section">
+    <div id="cards" class="section">
       <h2>Cards</h2>
       <h4>Full card example</h4>
       <p>It is possible to not put all the sub-classes like card-title, card-subtitle, card-text, ... But instead the framework will recognize the element properly if it's a h4, h5, p, ... And you need to put all this content on a div with card class.</p>
@@ -746,7 +748,7 @@ function add(x, y) {
       </div>
     </div>
 
-    <div class="section">
+    <div id="badges" class="section">
       <h2>Badges</h2>
       <h4>Default</h4>
       <p>You can customize badges colors with secondary, success, warning, danger classes.</p>