diff --git a/src/discussions/navigation/navigation-bar/NavigationBar.jsx b/src/discussions/navigation/navigation-bar/NavigationBar.jsx
index 8917797a..ee99beb8 100644
--- a/src/discussions/navigation/navigation-bar/NavigationBar.jsx
+++ b/src/discussions/navigation/navigation-bar/NavigationBar.jsx
@@ -38,13 +38,12 @@ function NavigationBar({ intl }) {
   }
 
   return (
-    <Nav variant="pills" className="py-2">
+    <Nav variant="button-group" className="py-2">
       {navLinks.map(link => (
         <Nav.Item key={link.route}>
           <Nav.Link
             as={NavLink}
             to={discussionsPath(link.route, { courseId })}
-            className="border"
             isActive={link.isActive}
           >
             {intl.formatMessage(link.labelMessage)}
diff --git a/src/index.scss b/src/index.scss
index 40fda9df..c87df3e3 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -340,6 +340,14 @@ header {
   box-shadow: 0px 2px 4px rgb(0 0 0 / 15%), 0px 2px 8px rgb(0 0 0 / 15%);
   position: sticky;
   top: 0;
+
+  .nav-button-group{
+    .nav-item:not(:last-child){
+      .nav-link {
+          border-right: 0;
+      }
+    }
+  }
 }
 
 .breadcrumb-menu {