diff --git a/services/web/public/stylesheets/components/navs-ol.less b/services/web/public/stylesheets/components/navs-ol.less
new file mode 100644
index 0000000000..f11673ac3d
--- /dev/null
+++ b/services/web/public/stylesheets/components/navs-ol.less
@@ -0,0 +1,7 @@
+.nav-pills {
+  > li {
+    > a {
+      border-radius: @btn-border-radius-base;
+    }
+  }
+}
\ No newline at end of file
diff --git a/services/web/public/stylesheets/components/navs.less b/services/web/public/stylesheets/components/navs.less
index 0616da1b8c..dc415dc6a3 100755
--- a/services/web/public/stylesheets/components/navs.less
+++ b/services/web/public/stylesheets/components/navs.less
@@ -123,8 +123,14 @@
     // Links rendered as pills
     > a {
       border-radius: @nav-pills-border-radius;
-      border: 2px solid @link-color;
+      border: 2px solid @nav-pills-link-color;
+      color: @nav-pills-link-color;
       padding: 8px 13px;
+      &:hover,
+      &:focus {
+        background-color: @nav-pills-link-hover-bg;
+        border: 2px solid @nav-pills-link-hover-bg;
+      }
     }
     + li {
       margin-left: 2px;
@@ -136,6 +142,7 @@
       &:hover,
       &:focus {
         color: @nav-pills-active-link-hover-color;
+        border: 2px solid @nav-pills-active-link-hover-bg;
         background-color: @nav-pills-active-link-hover-bg;
       }
     }
@@ -247,4 +254,4 @@
   margin-top: -1px;
   // Remove the top rounded corners here since there is a hard edge above the menu
   .border-top-radius(0);
-}
+}
\ No newline at end of file
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 5e166c85d6..1c93e682f3 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -370,6 +370,9 @@
 @nav-tabs-justified-active-link-border-color:     @body-bg;
 
 //== Pills
+@nav-pills-link-color:                      @link-color;
+@nav-pills-link-hover-color:                @nav-link-hover-bg;
+@nav-pills-link-hover-bg:                   @nav-link-hover-bg;
 @nav-pills-border-radius:                   @border-radius-base;
 @nav-pills-active-link-hover-bg:            @component-active-bg;
 @nav-pills-active-link-hover-color:         @component-active-color;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index dffcf7936b..d7a53ba5dd 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -34,6 +34,10 @@
 @navbar-default-border    : transparent;
 @navbar-brand-image-url   : url(/img/ol-brand/overleaf-white.svg);
 @navbar-default-link-bg   : transparent;
+@nav-pills-active-link-hover-bg: @ol-dark-green;
+@nav-pills-link-color     : @btn-default-bg;
+@nav-pills-link-hover-bg  : darken(@ol-blue-gray-4, 8%); // match button-variant mixin
+
 // Backgrounds
 @body-bg                : #FFF;
 @content-alt-bg-color   : @ol-blue-gray-1;
diff --git a/services/web/public/stylesheets/ol-style.less b/services/web/public/stylesheets/ol-style.less
index 2be148a497..c18e51176e 100644
--- a/services/web/public/stylesheets/ol-style.less
+++ b/services/web/public/stylesheets/ol-style.less
@@ -8,6 +8,7 @@
 @import "_ol_style_includes.less";
 @import "components/embed-responsive.less";
 @import "components/icons.less";
+@import "components/navs-ol.less";
 @import "components/pagination.less";
 
 // Pages