diff --git a/index.html b/index.html
index 5fc24e08..0eec1ca5 100644
--- a/index.html
+++ b/index.html
@@ -195,15 +195,16 @@ <h1 class="title">htmlwidgets for R</h1>
     display: table;
     margin: 9px auto;
   }
-  .pagination>li.active>a, .pagination>li.active>a:hover, .pagination>li.active>a:focus {
-    color: #333;
-  }
   .pagination>li>a {
-    color: rgb(50, 140, 240);
+    color: rgb(50, 140, 240) !important;
     background-color: transparent !important;
     border-color: transparent !important;
     text-shadow: 1px 1px 3px rgba(140, 140, 140, 0.2);
   }
+  .pagination>li.active>a, .pagination>li.active>a:hover, .pagination>li.active>a:focus {
+    color: #FFF !important;
+    background-color: #2780e3 !important;
+  }
 </style>
 <script>
 $(document).on("slide.bs.carousel", "#widget-carousel", function(e) {
@@ -268,7 +269,7 @@ <h4>Bring the best of JavaScript data visualization to R</h4>
           -->
         </div>
 
-        <ul class="pagination">
+        <ul class="pagination pagination-sm">
           <li class="active"><a href="javascript:void" data-target="#widget-carousel" data-slide-to="0">At the R console</a></li>
           <li><a href="javascript:void" data-target="#widget-carousel" data-slide-to="1">In R Markdown docs</a></li>
           <li><a href="javascript:void" data-target="#widget-carousel" data-slide-to="2">In Shiny apps</a></li>
diff --git a/index.md b/index.md
index 7124bc53..55334e4d 100644
--- a/index.md
+++ b/index.md
@@ -60,15 +60,16 @@ title: "htmlwidgets for R"
     display: table;
     margin: 9px auto;
   }
-  .pagination>li.active>a, .pagination>li.active>a:hover, .pagination>li.active>a:focus {
-    color: #333;
-  }
   .pagination>li>a {
-    color: rgb(50, 140, 240);
+    color: rgb(50, 140, 240) !important;
     background-color: transparent !important;
     border-color: transparent !important;
     text-shadow: 1px 1px 3px rgba(140, 140, 140, 0.2);
   }
+  .pagination>li.active>a, .pagination>li.active>a:hover, .pagination>li.active>a:focus {
+    color: #FFF !important;
+    background-color: #2780e3 !important;
+  }
 </style>
 <script>
 $(document).on("slide.bs.carousel", "#widget-carousel", function(e) {
@@ -133,7 +134,7 @@ $(document).on("slide.bs.carousel", "#widget-carousel", function(e) {
           -->
         </div>
 
-        <ul class="pagination">
+        <ul class="pagination pagination-sm">
           <li class="active"><a href="javascript:void" data-target="#widget-carousel" data-slide-to="0">At the R console</a></li>
           <li><a href="javascript:void" data-target="#widget-carousel" data-slide-to="1">In R Markdown docs</a></li>
           <li><a href="javascript:void" data-target="#widget-carousel" data-slide-to="2">In Shiny apps</a></li>