diff --git a/assets/css/style.css b/assets/css/style.css
index d1fcd30..c778b73 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -158,4 +158,8 @@ p {
 
 .product-page-container {
   padding: 1rem 1rem 1rem 1rem;
+}
+
+.cart-pill-bg {
+  background-color: darkslategrey;
 }
\ No newline at end of file
diff --git a/snippets/navbar.html b/snippets/navbar.html
index 06f3891..fffec1f 100644
--- a/snippets/navbar.html
+++ b/snippets/navbar.html
@@ -36,7 +36,7 @@
         {%- endfor -%}
       </ul>
       <hr />
-      <button class="btn btn-dark mx-2 my-2 position-relative snipcart-checkout"><i class="bi bi-cart-fill"></i> Cart <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success"><span class="snipcart-items-count"></span> <span class="visually-hidden">items in cart</span></span></button>
+      <button class="btn btn-dark mx-2 my-2 position-relative snipcart-checkout"><i class="bi bi-cart-fill"></i> Cart <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill cart-pill-bg"><span class="snipcart-items-count"></span> <span class="visually-hidden">items in cart</span></span></button>
     </div>
   </div>
 </nav>