diff --git a/frontend/package.json b/frontend/package.json
index 9212ddc5b7102da321800bdb448b7d363c6fd288..9b108a82279870b6266431cc81cb0eb7d66f048d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
     "@types/react-dom": "^16.9.0",
     "@types/react-router-dom": "^5.1.5",
     "bootstrap": "^4.5.0",
+    "classnames": "^2.2.6",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-bootstrap": "^1.3.0",
diff --git a/frontend/src/components/App.scss b/frontend/src/components/App.scss
index f7fce5ad5ad82e572ec89a09d32a194f001dabda..70f1fc1e2c8e38916d9ad5ff8ef10e6604d3298a 100644
--- a/frontend/src/components/App.scss
+++ b/frontend/src/components/App.scss
@@ -7,7 +7,6 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  // background-color: $teal-300;
 }
 
 code {
@@ -15,78 +14,6 @@ code {
     monospace;
 }
 
-//-----------------------------------Top Bar-----------------------------------
-
-.top-bar {
-  padding: 12px 16px;
-  background: #fff;
-  border-bottom: 1px solid #cdd4db;
-}
-
-//------------------------------------Brand------------------------------------
-
-.brand-image {
-  margin-right: 10px;
-}
-
-.brand-container {
-  font-family: "IBM Plex Sans";
-  font-weight: 500;
-  font-size: 24px;
-  color: #000;
-  text-align: left;
-  padding: 0px;
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  margin: 0px;
-}
-
-.brand-container a{
-	color: #000;
-}
-//--------------------------------Page Buttons---------------------------------
-
-@media (min-width: 992px) {
-  .page-button {
-    background: $gray-100;
-    border-radius: 5px;
-    font-family: "IBM Plex Sans";
-    font-size: 18px;
-    color: $black !important;
-    text-align: center;
-    line-height: 22px;
-    width: 120px;
-    height: 36px;
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-
-  .page-button:hover {
-    background: $gray-200;
-    color: $black !important;
-  }
-
-  .page-button.active {
-    background: $black !important;
-    font-weight: 500 !important;
-    color: $white !important;
-  }
-
-  .page-button-group {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-
-@media (max-width: 992px) {
-  .page-button-group {
-    display: none;
-  }
-}
-
 //----------------Bottom Bar -------------------------
 @media (max-width: 992px) {
   .bottom-bar {
diff --git a/frontend/src/components/atoms/NavBarTabItem/index.tsx b/frontend/src/components/atoms/NavBarTabItem/index.tsx
index 7058c9b6fc26c3ff194e83dac0aa9cb0c9f68a9c..cbe1ae416f5778aa74c94ec167fa2a0ef3fbcdbb 100644
--- a/frontend/src/components/atoms/NavBarTabItem/index.tsx
+++ b/frontend/src/components/atoms/NavBarTabItem/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Nav from "react-bootstrap/Nav";
 import { NavLink } from "react-router-dom";
+import styles from "./style.module.scss"
 
 export interface NavBarItemProps {
   page: {
@@ -16,9 +17,9 @@ const NavBarTabItem: React.FC<NavBarItemProps> = ({
     <Nav.Item>
       <Nav.Link
         as={NavLink}
-        activeClassName="active"
+        activeClassName={styles.active}
         to={page.path}
-        className="page-button"
+        className={styles.pageButton}
       >
         {page.name}
       </Nav.Link>
diff --git a/frontend/src/components/atoms/NavBarTabItem/style.module.scss b/frontend/src/components/atoms/NavBarTabItem/style.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..aa1ea8aa32431a908ff5aa8aeeb9b3cc817c133d
--- /dev/null
+++ b/frontend/src/components/atoms/NavBarTabItem/style.module.scss
@@ -0,0 +1,28 @@
+@import "scss/custom";
+
+@media (min-width: 992px) {
+  .pageButton {
+    background: $gray-100;
+    border-radius: 5px;
+    font-family: "IBM Plex Sans";
+    font-size: 18px;
+    color: $black !important;
+    text-align: center;
+    line-height: 22px;
+    width: 120px;
+    height: 36px;
+    margin-right: 10px;
+    margin-left: 10px;
+  }
+
+  .pageButton:hover {
+    background: $gray-200;
+    color: $black !important;
+  }
+
+  .pageButton.active {
+    background: $black !important;
+    font-weight: 500 !important;
+    color: $white !important;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/components/molecules/NavBarBrand/index.tsx b/frontend/src/components/molecules/NavBarBrand/index.tsx
index e4e9ac7d55f4ccd0ee847b3ee5accbd2d48ea95a..556d0398fab689582ec425b8f170c7f1fbfa8f8a 100644
--- a/frontend/src/components/molecules/NavBarBrand/index.tsx
+++ b/frontend/src/components/molecules/NavBarBrand/index.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import Navbar from "react-bootstrap/Navbar";
 import logo from "images/logo.svg";
 import { Link } from "react-router-dom";
+import styles from "./style.module.scss";
+import cx from "classnames";
 
 interface NavBarBrandProps {
   onClick: (event: React.MouseEvent<HTMLImageElement>) => void;
@@ -11,18 +13,20 @@ const NavBarBrand: React.FC<NavBarBrandProps> = ({
   onClick,
 }: NavBarBrandProps) => {
   return (
-    <Navbar.Brand className="brand-container">
+    <Navbar.Brand className={styles.brandContainer}>
       <img
         src={logo}
         width="30"
         height="30"
-        className="d-inline-block align-center brand-image"
+        className={cx(
+          "d-inline-block",
+          "align-center",
+          styles.brandImage
+        )}
         alt="React Bootstrap logo"
         onClick={(e) => onClick(e)}
-      />{" "}
-      <Link to="/" style={{ textDecoration: "none" }}>
-        Scientia
-      </Link>
+      />
+      <Link to="/">Scientia</Link>
     </Navbar.Brand>
   );
 };
diff --git a/frontend/src/components/molecules/NavBarBrand/style.module.scss b/frontend/src/components/molecules/NavBarBrand/style.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a0a2627673e554c9a9373803a78aeee56748eb05
--- /dev/null
+++ b/frontend/src/components/molecules/NavBarBrand/style.module.scss
@@ -0,0 +1,24 @@
+@import "scss/custom";
+
+.brandImage {
+  margin-right: 10px;
+}
+
+.brandContainer {
+  font-family: "IBM Plex Sans";
+  font-weight: 500;
+  font-size: 24px;
+  color: #000;
+  text-align: left;
+  padding: 0px;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  margin: 0px;
+}
+
+.brandContainer a{
+	color: #000 !important;
+	text-decoration: none !important;
+}
+
diff --git a/frontend/src/components/molecules/NavBarTabGroup/index.tsx b/frontend/src/components/molecules/NavBarTabGroup/index.tsx
index 0984caed5826f799718300bba364258ff7c27a13..219e2d6bea0b92d51b2bad57f3178b7f6b0e3f91 100644
--- a/frontend/src/components/molecules/NavBarTabGroup/index.tsx
+++ b/frontend/src/components/molecules/NavBarTabGroup/index.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import Navbar from "react-bootstrap/Navbar";
 import Nav from "react-bootstrap/Nav";
 import NavBarTabItem from "components/atoms/NavBarTabItem";
+import styles from "./style.module.scss"
+import cx from "classnames";
 
 export interface NavBarTabGroupProps {
   pages: {
@@ -14,7 +16,7 @@ const NavBarTabGroup: React.FC<NavBarTabGroupProps> = ({
   pages,
 }: NavBarTabGroupProps) => {
   return (
-    <Navbar className="page-button-group m-auto" id="responsive-navbar-nav">
+    <Navbar className={cx("m-auto", styles.pageButtonGroup)} id="responsive-navbar-nav">
       <Nav variant="pills">
         {pages.map((page) => (
           <NavBarTabItem page={page} key={page.name} />
diff --git a/frontend/src/components/molecules/NavBarTabGroup/style.module.scss b/frontend/src/components/molecules/NavBarTabGroup/style.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ea064d3518b426e5dd43708026cc33ba7faf91da
--- /dev/null
+++ b/frontend/src/components/molecules/NavBarTabGroup/style.module.scss
@@ -0,0 +1,16 @@
+@import "scss/custom";
+
+@media (min-width: 992px) {
+  .pageButtonGroup {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+@media (max-width: 992px) {
+  .pageButtonGroup {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/components/organisms/TopBar/index.tsx b/frontend/src/components/organisms/TopBar/index.tsx
index d7aec38633d9e47a83f0393789ceb99f76b3cf06..1fce71864eba2df6e226154fcc7315680c9ccd03 100644
--- a/frontend/src/components/organisms/TopBar/index.tsx
+++ b/frontend/src/components/organisms/TopBar/index.tsx
@@ -4,6 +4,7 @@ import Navbar from "react-bootstrap/Navbar";
 import userPic from "images/user.png";
 import NavBarTabGroup from "components/molecules/NavBarTabGroup";
 import NavBarBrand from "components/molecules/NavBarBrand";
+import styles from "./style.module.scss";
 
 export interface TopBarProps {
   pages: {
@@ -15,7 +16,7 @@ export interface TopBarProps {
 
 const TopBar: React.FC<TopBarProps> = ({ pages, onIconClick }: TopBarProps) => {
   return (
-    <Navbar className="top-bar" sticky="top" expand="lg" variant="light">
+    <Navbar className={styles.navBar} sticky="top" expand="lg" variant="light">
       <Container fluid>
         <NavBarBrand onClick={onIconClick} />
 
diff --git a/frontend/src/components/organisms/TopBar/style.module.scss b/frontend/src/components/organisms/TopBar/style.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9c069a1a60a84c650cb8ae37660620b70b4a90dc
--- /dev/null
+++ b/frontend/src/components/organisms/TopBar/style.module.scss
@@ -0,0 +1,7 @@
+@import "scss/custom";
+
+ .navBar {
+  padding: 12px 16px;
+  background: #fff;
+  border-bottom: 1px solid #cdd4db;
+}
\ No newline at end of file
diff --git a/frontend/src/components/pages/.gitkeep b/frontend/src/components/pages/.gitkeep
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/frontend/src/scss/custom.scss b/frontend/src/scss/custom.scss
index 699d0cdfcd715b17a09bd0070eded73947c0cef4..a37357f8c053a962f22541ef8f4b9b92f8c4f61b 100644
--- a/frontend/src/scss/custom.scss
+++ b/frontend/src/scss/custom.scss
@@ -1,10 +1,11 @@
 // Override default variables before the import
+$nav-pills-link-active-color: black;
 
 //Bootstrap 5 scss from: https://github.com/twbs/bootstrap/tree/main/scss
-@import "./bootstrapV5/bootstrap.scss";
-@import "~bootstrap/dist/css/bootstrap.min.css";
+// @import "./bootstrapV5/bootstrap.scss";
+// @import "~bootstrap/dist/css/bootstrap.min.css";
 
 //Delete bootstrapV5/bootstrap.scss and bootstrap.min.css import
 //and uncomment below to fall back to default scss option
 
-// @import '~bootstrap/scss/bootstrap.scss';
+@import '~bootstrap/scss/bootstrap.scss';