diff --git a/index.html b/index.html
index f0c8eee..ba4ad7b 100644
--- a/index.html
+++ b/index.html
@@ -575,7 +575,23 @@
                     </div>
                   </div>
                 </div>
+                <div class="col-lg-6 mb-4">
+                  <div class="card bg-light text-black shadow">
+                    <div class="card-body">
+                      Light
+                      <div class="text-black-50 small">#f8f9fc</div>
+                    </div>
+                  </div>
               </div>
+              <div class="col-lg-6 mb-4">
+                <div class="card bg-dark text-white shadow">
+                  <div class="card-body">
+                      Dark
+                      <div class="text-white-50 small">#5a5c69</div>
+                  </div>
+                </div>
+              </div>
+            </div>
 
             </div>
 
diff --git a/utilities-border.html b/utilities-border.html
index 0545926..cdbd3c3 100644
--- a/utilities-border.html
+++ b/utilities-border.html
@@ -347,6 +347,12 @@
                 </div>
               </div>
 
+              <div class="card mb-4 py-3 border-left-secondary">
+                <div class="card-body">
+                  .border-left-secondary
+                </div>
+              </div>
+
               <div class="card mb-4 py-3 border-left-success">
                 <div class="card-body">
                   .border-left-success
@@ -371,6 +377,12 @@
                 </div>
               </div>
 
+              <div class="card mb-4 py-3 border-left-dark">
+                <div class="card-body">
+                  .border-left-dark
+                </div>
+              </div>
+
             </div>
 
             <!-- Border Bottom Utilities -->
@@ -382,6 +394,12 @@
                 </div>
               </div>
 
+              <div class="card mb-4 py-3 border-bottom-secondary">
+                <div class="card-body">
+                  .border-bottom-secondary
+                </div>
+              </div>
+
               <div class="card mb-4 py-3 border-bottom-success">
                 <div class="card-body">
                   .border-bottom-success
@@ -406,6 +424,12 @@
                 </div>
               </div>
 
+              <div class="card mb-4 py-3 border-bottom-dark">
+                <div class="card-body">
+                  .border-bottom-dark
+                </div>
+              </div>
+
             </div>
 
           </div>
diff --git a/utilities-color.html b/utilities-color.html
index 2605a0d..33f21d9 100644
--- a/utilities-color.html
+++ b/utilities-color.html
@@ -382,10 +382,13 @@
                 </div>
                 <div class="card-body">
                   <div class="px-3 py-5 bg-gradient-primary text-white">.bg-gradient-primary</div>
+                  <div class="px-3 py-5 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
                   <div class="px-3 py-5 bg-gradient-success text-white">.bg-gradient-success</div>
                   <div class="px-3 py-5 bg-gradient-info text-white">.bg-gradient-info</div>
                   <div class="px-3 py-5 bg-gradient-warning text-white">.bg-gradient-warning</div>
                   <div class="px-3 py-5 bg-gradient-danger text-white">.bg-gradient-danger</div>
+                  <div class="px-3 py-5 bg-gradient-light text-white">.bg-gradient-light</div>
+                  <div class="px-3 py-5 bg-gradient-dark text-white">.bg-gradient-dark</div>
                 </div>
               </div>