diff --git a/frontend/src/components/App.scss b/frontend/src/components/App.scss
index 89d65ef2e03552d4bc33aee3a9428dec766b2e33..ff9b3213f3350b70a57cea8f6f792a86c47a9073 100644
--- a/frontend/src/components/App.scss
+++ b/frontend/src/components/App.scss
@@ -20,4 +20,41 @@ code {
 	background-color: #f8f9fa;
 	border-color: #0062cc;
 	box-shadow: none;
-}
\ No newline at end of file
+}
+
+.btn-primary{
+  margin-bottom: 0.625rem;
+  color: #000;
+  background: #f6f8fa;
+  font-size: 1.05rem;
+  letter-spacing: 0;
+  border-width: 0rem;
+  line-height: 1.375rem;
+  height: 2.25rem;
+  border-radius: 0.5rem !important;
+  text-align: left;
+  transition: 0.2s background;
+  -webkit-transition: 0.2s background;
+  -moz-transition: 0.2s background;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.btn-primary.active,
+.btn-primary:active {
+  color: #fff;
+  background: #000 !important;
+  font-weight: 500;
+  text-align: left;
+  border-width: 0rem;
+  height: 2.25rem;
+  line-height: 1.375rem;
+}
+
+.btn-primary:hover {
+  background: #e5e5e5;
+  border-color: #fff;
+  color: #000;
+}
diff --git a/frontend/src/components/molecules/DashboardButtonGroup/index.tsx b/frontend/src/components/molecules/DashboardButtonGroup/index.tsx
index b3d2ce1c74a59bd4a33c51a4c80e543fe3a9da11..341c6d39b35952589bd4a545bf8c50d8fa0462a9 100644
--- a/frontend/src/components/molecules/DashboardButtonGroup/index.tsx
+++ b/frontend/src/components/molecules/DashboardButtonGroup/index.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
-import styles from "./style.module.scss";
 import {
   faGlobe,
   faFileAlt,
@@ -22,7 +21,6 @@ const DashboardButtonGroup: React.FC = () => {
         {buttons.map(({ title, icon, url }, i) => (
           <Col xs={6} sm={6} md={4} lg={4} xl={3} key={i} style={{ paddingRight: "10px", paddingLeft:"10px"}}>
             <Button
-              className={styles.dashboardButton}
               href={url}
               target="_blank"
             >
@@ -30,7 +28,6 @@ const DashboardButtonGroup: React.FC = () => {
               <FontAwesomeIcon
                 style={{ fontSize: "1.125rem" }}
                 icon={icon}
-                className={styles.dashboardButtonSvg}
               />
             </Button>
           </Col>
diff --git a/frontend/src/components/molecules/DashboardButtonGroup/style.module.scss b/frontend/src/components/molecules/DashboardButtonGroup/style.module.scss
deleted file mode 100644
index 64a10f8357450930b6a6b438f43c2efb6ceb0aa8..0000000000000000000000000000000000000000
--- a/frontend/src/components/molecules/DashboardButtonGroup/style.module.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-@import "assets/scss/custom";
-
-$button-background: transparentize($gray-200, 0.75);
-$button-border: transparentize($gray-300, 1);
-
-.dashboardButton,
-.dashboardButton:global(.a) {
-  margin-bottom: 0.625rem;
-  color: #000;
-  background: $button-background;
-  font-size: 1.05rem;
-  letter-spacing: 0;
-  border: 1px solid $button-border;
-  line-height: 1.375rem;
-  height: 2.25rem;
-  border-radius: 0.5rem !important;
-  text-align: left;
-  transition: 0.2s transform, 0.2s box-shadow, 0.2s background-color;
-  -webkit-transition: 0.2s transform, 0.2s box-shadow, 0.2s background-color;
-  -moz-transition: 0.2s transform, 0.2s box-shadow, 0.2s background-color;
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.dashboardButton:global(.active),
-.dashboardButton:active {
-  color: #fff;
-  background: #000 !important;
-  font-weight: 500;
-  text-align: left;
-  border-width: 0rem;
-  height: 2.25rem;
-  line-height: 1.375rem;
-}
-
-.dashboardButton:hover {
-  background-color: $button-background;
-  border-color: $gray-300;
-  color: #000;
-  transform: scale(1.03);
-  box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
-}
diff --git a/frontend/src/components/molecules/SideBarTabGroup/index.tsx b/frontend/src/components/molecules/SideBarTabGroup/index.tsx
index 05259d51e104318cf0aa406748f4b6a13c58e730..ea5defb32543301fdc83b832264770014556e48a 100644
--- a/frontend/src/components/molecules/SideBarTabGroup/index.tsx
+++ b/frontend/src/components/molecules/SideBarTabGroup/index.tsx
@@ -36,7 +36,6 @@ const SideBarTabGroup: React.FC<SideBarTabGroupProp> = ({
             as={NavLink}
             to={activeURL}
             activeClassName={"active"}
-            className={styles.tabGroupButton}
             key={title}
           >
             {title}
@@ -50,7 +49,6 @@ const SideBarTabGroup: React.FC<SideBarTabGroupProp> = ({
           <Button
             href={externalURL}
             target="_blank"
-            className={styles.tabGroupButton}
             key={title}
           >
             {title}
@@ -61,7 +59,7 @@ const SideBarTabGroup: React.FC<SideBarTabGroupProp> = ({
 
       return (
         <Button
-					className={classNames({ active: active }, styles.tabGroupButton)}
+					className={classNames({ active: active })}
 					onClick={onClick}
           key={title}
         >
diff --git a/frontend/src/components/molecules/SideBarTabGroup/style.module.scss b/frontend/src/components/molecules/SideBarTabGroup/style.module.scss
index c6af7abdcbe9852a175e6d16d82231fc9c2a0ed4..a6c24ad0b52c97b92b4d1bf86205b414883aafef 100644
--- a/frontend/src/components/molecules/SideBarTabGroup/style.module.scss
+++ b/frontend/src/components/molecules/SideBarTabGroup/style.module.scss
@@ -3,46 +3,11 @@
 $button-background: transparentize($gray-200, 0.75);
 $button-border: transparentize($gray-300, 1);
 
-.tabGroupButton,
-.tabGroupButton:global(.a) {
-  margin-bottom: 0.625rem;
-  color: #000;
-  background: $button-background;
-  font-size: 1.05rem;
-  letter-spacing: 0;
-  border: 1px solid $button-border;
-  line-height: 1.375rem;
-  height: 2.25rem;
-  border-radius: 0.5rem !important;
-  text-align: left;
-  transition: 0.2s transform, 0.2s box-shadow, 0.2s background;
-  -webkit-transition: 0.2s transform, 0.2s box-shadow, 0.2s background;
-  -moz-transition: 0.2s transform, 0.2s box-shadow, 0.2s background;
-}
-
 .tabGroupButtonSvg {
   float: right;
   margin-top: 0.22rem;
 }
 
-.tabGroupButton:global(.active),
-.tabGroupButton:active {
-  color: #fff;
-  background: #000 !important;
-  font-weight: 500;
-  text-align: left;
-  border-width: 0rem;
-  height: 2.25rem;
-  line-height: 1.375rem;
-}
-
-.tabGroupButton:hover {
-  background-color: $button-background;
-  border-color: $gray-300;
-  color: #000;
-  transform: scale(1.03);
-  box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
-}
 
 @media (max-width: 62rem) {
   .tabGroupButtonGroup {