diff --git a/frontend/src/components/atoms/BottomBarItem/index.tsx b/frontend/src/components/atoms/BottomBarItem/index.tsx
index f9e348f51dd7eb5bd2a911f68a27cb3e04b4ae21..d23ed8b10cd2b35c438f368cc00a1e12fffbd56b 100644
--- a/frontend/src/components/atoms/BottomBarItem/index.tsx
+++ b/frontend/src/components/atoms/BottomBarItem/index.tsx
@@ -22,7 +22,8 @@ const BottomBarItem: React.FC<BottomBarItemProps> = ({
       as={NavLink}
 			to={page.path}
 			className={styles.btn}
-      id={"bottom-" + page.name}
+			id={"bottom-" + page.name}
+			variant="secondary"
     >
       <div className="button-holder">
         <FontAwesomeIcon icon={page.icon} size="lg" />