diff --git a/index.html b/index.html
index f7e4b19b5..88438285e 100644
--- a/index.html
+++ b/index.html
@@ -143,7 +143,7 @@
           <div class="row">
             <div class="col-lg-3 col-6">
               <!-- small box -->
-              <div class="small-box bg-info rounded-3 shadow-sm">
+              <div class="small-box bg-primary rounded-3 shadow-sm text-light">
                 <div class="inner">
                   <h3>150</h3>
 
@@ -158,7 +158,7 @@
             <!-- ./col -->
             <div class="col-lg-3 col-6">
               <!-- small box -->
-              <div class="small-box bg-success rounded-3 shadow-sm">
+              <div class="small-box bg-success rounded-3 shadow-sm text-light">
                 <div class="inner">
                   <h3>53<sup class="fs-5">%</sup></h3>
 
@@ -173,7 +173,7 @@
             <!-- ./col -->
             <div class="col-lg-3 col-6">
               <!-- small box -->
-              <div class="small-box bg-warning rounded-3 shadow-sm">
+              <div class="small-box bg-warning rounded-3 shadow-sm text-light">
                 <div class="inner">
                   <h3>44</h3>
 
@@ -188,7 +188,7 @@
             <!-- ./col -->
             <div class="col-lg-3 col-6">
               <!-- small box -->
-              <div class="small-box bg-danger rounded-3 shadow-sm">
+              <div class="small-box bg-danger rounded-3 shadow-sm text-light">
                 <div class="inner">
                   <h3>65</h3>
 
diff --git a/scss/_small-box.scss b/scss/_small-box.scss
index 2d2a54727..5d2cce636 100644
--- a/scss/_small-box.scss
+++ b/scss/_small-box.scss
@@ -6,7 +6,6 @@
   display: block;
   margin-bottom: 1.25rem;
   position: relative;
-  color: $light;
 
   // content wrapper
   > .inner {