diff --git a/frontend/src/components/App.scss b/frontend/src/components/App.scss
index 4d5c8e7076649cf2426eb43217892650f98cf1fb..0ee5dec182ae4ee8150822a2fe04fd8504eef8eb 100644
--- a/frontend/src/components/App.scss
+++ b/frontend/src/components/App.scss
@@ -10,4 +10,4 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index 2fd7a7bdf43929eb345741f2b2fd8938b23f4776..e9f5aff4fd8481f835914ff5996455aeed50bb49 100644
--- a/frontend/src/components/App.tsx
+++ b/frontend/src/components/App.tsx
@@ -5,7 +5,7 @@ import TopBar from "./organisms/TopBar";
 import BottomBar from "./organisms/BottomBar";
 import {
   faBookOpen,
-  faEllipsisH,
+  faHome,
   faCalendarWeek,
   faChalkboardTeacher,
 } from "@fortawesome/free-solid-svg-icons";
@@ -30,10 +30,10 @@ class App extends React.Component<{}, MyState> {
 
   render() {
     const horizontalBarPages = [
+      { name: "Home", path: "/home", icon: faHome },
       { name: "Modules", path: "/modules", icon: faChalkboardTeacher },
       { name: "Timetable", path: "/timetable", icon: faCalendarWeek },
       { name: "Exams", path: "/exams", icon: faBookOpen },
-      { name: "Other", path: "/other", icon: faEllipsisH },
     ];
 
     return (
diff --git a/frontend/src/components/atoms/BottomBarItem/style.module.scss b/frontend/src/components/atoms/BottomBarItem/style.module.scss
index 310accaeca74965e609d281920872365438b1fb4..dc79f4e468f6740ae4666e4771e83a6bb2e6e13f 100644
--- a/frontend/src/components/atoms/BottomBarItem/style.module.scss
+++ b/frontend/src/components/atoms/BottomBarItem/style.module.scss
@@ -1,3 +1,4 @@
+@import "assets/scss/custom";
 @media (max-width: 992px) {
   .btn:active,
   .btn:global(.active) {
@@ -28,5 +29,11 @@
   .btn:hover {
     border: 0px;
     background-color: #ced4da;
+    color: #000;
+  }
+
+  .btn:active:hover,
+  .btn:global(.active):hover {
+    background-color: $gray-900 !important;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/atoms/NavBarTabItem/style.module.scss b/frontend/src/components/atoms/NavBarTabItem/style.module.scss
index 2c8073ac8ab57d8afde9f8f716cbefe4f310bdfa..4f8ecaad4dc5dd1fb841c0150c82c7eaa920025b 100644
--- a/frontend/src/components/atoms/NavBarTabItem/style.module.scss
+++ b/frontend/src/components/atoms/NavBarTabItem/style.module.scss
@@ -25,4 +25,9 @@
     font-weight: 500 !important;
     color: $white !important;
   }
-}
\ No newline at end of file
+
+  .pageButton:active:hover,
+  .pageButton:global(.active):hover {
+    background-color: $gray-900 !important;
+  }
+}