diff --git a/src/components/organisms/BottomBar/BottomBarItem/index.tsx b/src/components/organisms/BottomBar/BottomBarItem/index.tsx
index d23ed8b10cd2b35c438f368cc00a1e12fffbd56b..985ba525a104067a57684a8a88f720e8f5349453 100644
--- a/src/components/organisms/BottomBar/BottomBarItem/index.tsx
+++ b/src/components/organisms/BottomBar/BottomBarItem/index.tsx
@@ -14,16 +14,16 @@ export interface BottomBarItemProps {
 }
 
 const BottomBarItem: React.FC<BottomBarItemProps> = ({
-  page,
+  page
 }: BottomBarItemProps) => {
   return (
     <Button
       activeClassName="active"
       as={NavLink}
-			to={page.path}
-			className={styles.btn}
-			id={"bottom-" + page.name}
-			variant="secondary"
+      to={page.path}
+      className={styles.btn}
+      id={"bottom-" + page.name}
+      variant="secondary"
     >
       <div className="button-holder">
         <FontAwesomeIcon icon={page.icon} size="lg" />
diff --git a/src/components/organisms/BottomBar/index.tsx b/src/components/organisms/BottomBar/index.tsx
index 4c0c2a3e6564b74d94a62ca1182ee31d2205dca5..7008faba6ee3fba08ec95b7d5d8a6b6a75852e4c 100644
--- a/src/components/organisms/BottomBar/index.tsx
+++ b/src/components/organisms/BottomBar/index.tsx
@@ -3,7 +3,7 @@ import Navbar from "react-bootstrap/Navbar";
 import ButtonGroup from "react-bootstrap/ButtonGroup";
 import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 import BottomBarItem from "components/organisms/BottomBar/BottomBarItem";
-import styles from "./style.module.scss"
+import styles from "./style.module.scss";
 
 export interface BottomBarProps {
   pages: {
@@ -16,8 +16,11 @@ export interface BottomBarProps {
 const BottomBar: React.FC<BottomBarProps> = ({ pages }: BottomBarProps) => {
   return (
     <Navbar className={"footer " + styles.bottomBar}>
-      <ButtonGroup aria-label="Basic example" className={styles.bottomBarButtons}>
-        {pages.map((page) => (
+      <ButtonGroup
+        aria-label="Basic example"
+        className={styles.bottomBarButtons}
+      >
+        {pages.map(page => (
           <BottomBarItem page={page} key={page.name} />
         ))}
       </ButtonGroup>
diff --git a/src/components/organisms/BottomBar/style.module.scss b/src/components/organisms/BottomBar/style.module.scss
index f1b23c986935afc2d0dbe128b0bf51a687a8bd68..0fc4d59f176dcbb3ffb140f40929f9a47d57e501 100644
--- a/src/components/organisms/BottomBar/style.module.scss
+++ b/src/components/organisms/BottomBar/style.module.scss
@@ -11,7 +11,7 @@
     padding: 0rem;
   }
 
-  .bottomBarButtons{
+  .bottomBarButtons {
     height: 100%;
     width: 100%;
     margin-bottom: env(safe-area-inset-bottom);
diff --git a/src/components/organisms/LeftBar/index.tsx b/src/components/organisms/LeftBar/index.tsx
index 138001a55f3d1ffa0ae832193760e17b513e582b..715a81282b95d274943038589303bcf29a752fb6 100644
--- a/src/components/organisms/LeftBar/index.tsx
+++ b/src/components/organisms/LeftBar/index.tsx
@@ -2,15 +2,17 @@ import React from "react";
 import styles from "./style.module.scss";
 import { Link } from "react-router-dom";
 
-export interface LeftBarProps{
-	children: React.ReactNode;
+export interface LeftBarProps {
+  children: React.ReactNode;
 }
 
-const LeftBar: React.FC<LeftBarProps> = ({children}: LeftBarProps) => {
+const LeftBar: React.FC<LeftBarProps> = ({ children }: LeftBarProps) => {
   return (
     <div id={styles.leftbarWrapper}>
-      <p className={styles.leftbarStatus}><Link to="/Dashboard">1 NOTICE</Link></p>
-			{children}
+      <p className={styles.leftbarStatus}>
+        <Link to="/Dashboard">1 NOTICE</Link>
+      </p>
+      {children}
     </div>
   );
 };
diff --git a/src/components/organisms/LeftBar/style.module.scss b/src/components/organisms/LeftBar/style.module.scss
index a962e5ddd63f64ac5041ac8bb9d9676bfd1df48c..4fe993ed1e240fdf78033980e390eae673640f3d 100644
--- a/src/components/organisms/LeftBar/style.module.scss
+++ b/src/components/organisms/LeftBar/style.module.scss
@@ -8,7 +8,7 @@
   top: 0;
   left: 0;
   width: 15.625rem;
-  height: calc(100vh - 	3.8125rem);
+  height: calc(100vh - 3.8125rem);
 
   overflow-y: auto;
   overflow-x: hidden;
@@ -17,7 +17,7 @@
   -moz-transition: visibility 0.5s ease-in-out, transform 0.5s ease-in-out;
   -o-transition: visibility 0.5s ease-in-out, transform 0.5s ease-in-out;
   transition: visibility 0.5s ease-in-out, transform 0.5s ease-in-out;
-  
+
   z-index: 5000;
   margin-top: 3.8125rem;
   padding-bottom: 1.875rem;
@@ -40,8 +40,8 @@
 }
 
 .leftbarStatus a {
-	text-decoration: none !important;
-	color: #000 !important;
+  text-decoration: none !important;
+  color: #000 !important;
 }
 
 @media (max-width: 62rem) {
diff --git a/src/components/organisms/LeftBarDashboard/index.tsx b/src/components/organisms/LeftBarDashboard/index.tsx
index 8681df938bbe64f8586ac2ddf9803f81763d882e..5ca979eb1ca2f4277fe595c143eeae555ac37b2e 100644
--- a/src/components/organisms/LeftBarDashboard/index.tsx
+++ b/src/components/organisms/LeftBarDashboard/index.tsx
@@ -2,48 +2,54 @@ import React from "react";
 import LeftBar from "components/organisms/LeftBar";
 import SideBarTabGroup from "components/molecules/SideBarTabGroup";
 import { faGitlab } from "@fortawesome/free-brands-svg-icons";
-import { faFlask, faEnvelopeOpen, faUserFriends, faPlay, faStarHalfAlt} from "@fortawesome/free-solid-svg-icons";
+import {
+  faFlask,
+  faEnvelopeOpen,
+  faUserFriends,
+  faPlay,
+  faStarHalfAlt
+} from "@fortawesome/free-solid-svg-icons";
 import WorkDueGroup from "components/molecules/WorkDueGroup";
 
 const LeftBarDashboard: React.FC = () => {
   let linkButtons = [
     {
-			title: "GitLab",
-			icon: faGitlab,
-			externalURL: "https://gitlab.doc.ic.ac.uk/",
+      title: "GitLab",
+      icon: faGitlab,
+      externalURL: "https://gitlab.doc.ic.ac.uk/"
     },
     {
-			title: "Outlook",
-			icon: faEnvelopeOpen,
-			externalURL: "https://outlook.office.com/",
+      title: "Outlook",
+      icon: faEnvelopeOpen,
+      externalURL: "https://outlook.office.com/"
     },
     {
-			title: "Piazza",
-			icon: faUserFriends,
-			externalURL: "https://piazza.com/",
+      title: "Piazza",
+      icon: faUserFriends,
+      externalURL: "https://piazza.com/"
     },
     {
-			title: "Panopto",
-			icon: faPlay,
-			externalURL: "https://imperial.cloud.panopto.eu/Panopto/",
+      title: "Panopto",
+      icon: faPlay,
+      externalURL: "https://imperial.cloud.panopto.eu/Panopto/"
     },
     {
-			title: "DocPA",
-			icon: faStarHalfAlt,
-			externalURL: "https://docpa.doc.ic.ac.uk/",
-		},
-		{
-			title: "LabTS",
-			icon: faFlask,
-			externalURL: "https://teaching.doc.ic.ac.uk/labts",
+      title: "DocPA",
+      icon: faStarHalfAlt,
+      externalURL: "https://docpa.doc.ic.ac.uk/"
     },
-	];
+    {
+      title: "LabTS",
+      icon: faFlask,
+      externalURL: "https://teaching.doc.ic.ac.uk/labts"
+    }
+  ];
 
   return (
     <LeftBar>
-			<SideBarTabGroup title="Links" buttons={linkButtons} />
-			<WorkDueGroup/>
-		</LeftBar>
+      <SideBarTabGroup title="Links" buttons={linkButtons} />
+      <WorkDueGroup />
+    </LeftBar>
   );
 };
 
diff --git a/src/components/organisms/LeftBarExams/index.tsx b/src/components/organisms/LeftBarExams/index.tsx
index da8d3f05a4959ec873e17424f07e8d63adb4ae1c..865a82ba57d8d020bae76041d4031078e0ad64f8 100644
--- a/src/components/organisms/LeftBarExams/index.tsx
+++ b/src/components/organisms/LeftBarExams/index.tsx
@@ -1,41 +1,47 @@
 import React from "react";
 import LeftBar from "components/organisms/LeftBar";
 import SideBarTabGroup from "components/molecules/SideBarTabGroup";
-import { faCalendarAlt, faList, faArchive, faGavel, faTable, faFont } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCalendarAlt,
+  faList,
+  faArchive,
+  faGavel,
+  faTable,
+  faFont
+} from "@fortawesome/free-solid-svg-icons";
 
 const LeftBarExams: React.FC = () => {
-
   let examButtons = [
     {
       title: "Overview",
       icon: faList,
-      activeURL: `/exams/overview`,
+      activeURL: `/exams/overview`
     },
     {
       title: "Past Papers",
       icon: faArchive,
-      activeURL: `/exams/papers`,
+      activeURL: `/exams/papers`
     },
     {
       title: "Exam Timetable",
       icon: faCalendarAlt,
-      activeURL: `/exams/timetable`,
+      activeURL: `/exams/timetable`
     },
     {
       title: "Grading",
       icon: faFont,
-      activeURL: `/exams/grading`,
+      activeURL: `/exams/grading`
     },
     {
       title: "Rubrics",
-			icon: faTable,
-      activeURL: `/exams/rubrics`,
-		},
-		{
+      icon: faTable,
+      activeURL: `/exams/rubrics`
+    },
+    {
       title: "Regulations",
       icon: faGavel,
-      externalURL: `https://www.imperial.ac.uk/computing/current-students/course-admin/regulations/meng-comp/`,
-    },
+      externalURL: `https://www.imperial.ac.uk/computing/current-students/course-admin/regulations/meng-comp/`
+    }
   ];
 
   return (
diff --git a/src/components/organisms/LeftBarModule/index.tsx b/src/components/organisms/LeftBarModule/index.tsx
index afba351c4c1e1351f83d6cdccbcd566bdbbdb94c..8f68199db83d5f24b8174169b86ded980a2b2a4b 100644
--- a/src/components/organisms/LeftBarModule/index.tsx
+++ b/src/components/organisms/LeftBarModule/index.tsx
@@ -14,12 +14,12 @@ const LeftBarModule: React.FC = () => {
     CO140: "k0r3c04qwhj3e",
     CO142: "k0r3c156mj35b",
     CO112: "k0r3by316kp6",
-		CO145: "k0r3c1h4zik5y",
-		"CO120.2": "k0r3bzfpcno23",
-		CO150: "k0r3c1t4x8k6l",
-		CO113: "k0r3byq0f68t",
-		CO141: "k0r3c0t7dak4o",
-		CO130: "k0r3bzsith2r",
+    CO145: "k0r3c1h4zik5y",
+    "CO120.2": "k0r3bzfpcno23",
+    CO150: "k0r3c1t4x8k6l",
+    CO113: "k0r3byq0f68t",
+    CO141: "k0r3c0t7dak4o",
+    CO130: "k0r3bzsith2r"
   };
 
   let piazzaLink = "https://piazza.com/class/";
@@ -30,27 +30,27 @@ const LeftBarModule: React.FC = () => {
   let outlineButtons = [
     {
       title: "Overview",
-      activeURL: `/modules/${id}/overview`,
+      activeURL: `/modules/${id}/overview`
     },
     {
       title: "Feedback",
-      activeURL: `/modules/${id}/feedback`,
+      activeURL: `/modules/${id}/feedback`
     },
     {
       title: "Resources",
-      activeURL: `/modules/${id}/resources`,
+      activeURL: `/modules/${id}/resources`
     },
     {
       title: "Piazza",
-			icon: faUserFriends,
-			externalURL: piazzaLink,
-    },
+      icon: faUserFriends,
+      externalURL: piazzaLink
+    }
   ];
 
   return (
     <LeftBar>
       <SideBarTabGroup title="Outline" buttons={outlineButtons} />
-			<WorkDueGroup filter={id} />
+      <WorkDueGroup filter={id} />
     </LeftBar>
   );
 };
diff --git a/src/components/organisms/LeftBarModuleList/index.tsx b/src/components/organisms/LeftBarModuleList/index.tsx
index ee4a85e61a15597c547c6994e5f2b0919359a63e..b0219c74e3942135d13c83a86b8b2d910b246564 100644
--- a/src/components/organisms/LeftBarModuleList/index.tsx
+++ b/src/components/organisms/LeftBarModuleList/index.tsx
@@ -4,39 +4,50 @@ import SideBarTabGroup from "components/molecules/SideBarTabGroup";
 import WorkDueGroup from "components/molecules/WorkDueGroup";
 
 export interface LeftBarModuleListProps {
-	setModulesFilter: any;
-	modulesFilter: String;
+  setModulesFilter: any;
+  modulesFilter: String;
 }
 
-const LeftBarModuleList: React.FC<LeftBarModuleListProps> = ({modulesFilter, setModulesFilter} : LeftBarModuleListProps) => {
+const LeftBarModuleList: React.FC<LeftBarModuleListProps> = ({
+  modulesFilter,
+  setModulesFilter
+}: LeftBarModuleListProps) => {
   let sortButtons = [
     {
-			title: "All",
-			active: modulesFilter === "",
-			onClick: () => {setModulesFilter("")},
+      title: "All",
+      active: modulesFilter === "",
+      onClick: () => {
+        setModulesFilter("");
+      }
     },
     {
-			title: "In Progress",
-			active: modulesFilter === "In Progress",
-			onClick: () => {setModulesFilter("In Progress")},
+      title: "In Progress",
+      active: modulesFilter === "In Progress",
+      onClick: () => {
+        setModulesFilter("In Progress");
+      }
     },
     {
-			title: "Not Started",
-			active: modulesFilter === "Not Started",
-			onClick: () => {setModulesFilter("Not Started")},
+      title: "Not Started",
+      active: modulesFilter === "Not Started",
+      onClick: () => {
+        setModulesFilter("Not Started");
+      }
     },
     {
-			title: "Completed",
-			active: modulesFilter === "Completed",
-			onClick: () => {setModulesFilter("Completed")},
-    },
-	];
+      title: "Completed",
+      active: modulesFilter === "Completed",
+      onClick: () => {
+        setModulesFilter("Completed");
+      }
+    }
+  ];
 
   return (
     <LeftBar>
-			<SideBarTabGroup title="Filter" buttons={sortButtons} />
-			<WorkDueGroup/>
-		</LeftBar>
+      <SideBarTabGroup title="Filter" buttons={sortButtons} />
+      <WorkDueGroup />
+    </LeftBar>
   );
 };
 
diff --git a/src/components/organisms/NoticeBoard/components/NoticeItem/index.tsx b/src/components/organisms/NoticeBoard/components/NoticeItem/index.tsx
index 67f861f0cc30336a9082c93c892a2fb2c64ee3d9..33da9b5da7c8cc86508908a863f92dbac6783930 100644
--- a/src/components/organisms/NoticeBoard/components/NoticeItem/index.tsx
+++ b/src/components/organisms/NoticeBoard/components/NoticeItem/index.tsx
@@ -12,11 +12,11 @@ const NoticeItem: React.FC<NoticeItemProps> = ({
   heading,
   user,
   time,
-  body,
+  body
 }: NoticeItemProps) => {
   return (
     <>
-      <div style={{ marginTop: "20px" }} className={styles.noticeContainer}>
+      <div style={{ marginTop: "1.25rem" }} className={styles.noticeContainer}>
         <p className={styles.noticeHeading}>{heading}</p>
         <span style={{ display: "flex", justifyContent: "space-between" }}>
           <p className={styles.noticeUser}>{user}</p>
diff --git a/src/components/organisms/NoticeBoard/components/NoticeItem/style.module.scss b/src/components/organisms/NoticeBoard/components/NoticeItem/style.module.scss
index a823c817278d44efc3971205a3d4718e3ca6fb80..cbeb02f2f2e5ec604471ded2f7227f6e226da210 100644
--- a/src/components/organisms/NoticeBoard/components/NoticeItem/style.module.scss
+++ b/src/components/organisms/NoticeBoard/components/NoticeItem/style.module.scss
@@ -4,9 +4,9 @@ $notice-line: transparentize($gray-600, 0.4);
 
 .noticeContainer {
   background-color: $white;
-  border-radius: .5rem;
-  border: 1px solid $gray-200;
-  padding: 10px;
+  border-radius: 0.5rem;
+  border: 0.0625rem solid $gray-200;
+  padding: 0.625rem;
   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;
@@ -21,67 +21,67 @@ $notice-line: transparentize($gray-600, 0.4);
 }
 
 .noticeHeading {
-  font-size: 20px;
+  font-size: 1.25rem;
   color: $gray-900;
   font-weight: 500;
-  margin-bottom: 4px;
-  line-height: 22px;
+  margin-bottom: 0.25rem;
+  line-height: 1.375rem;
   text-align: left;
-	overflow-wrap: break-word;
-	word-wrap: break-word;
-	-ms-word-break: break-all;
-	word-break: break-all;
-	word-break: break-word;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-all;
+  word-break: break-word;
 }
 
 .noticeUser {
-  font-size: 16px;
+  font-size: 1rem;
   color: $notice-line;
-  line-height: 18px;
-  margin-bottom: 10px;
-  margin-right: 10px;
+  line-height: 1.125rem;
+  margin-bottom: 0.625rem;
+  margin-right: 0.625rem;
   text-align: left;
-	overflow-wrap: break-word;
-	word-wrap: break-word;
-	-ms-word-break: break-all;
-	word-break: break-all;
-	word-break: break-word;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-all;
+  word-break: break-word;
 }
 
 .noticeTime {
-  font-size: 16px;
+  font-size: 1rem;
   color: $notice-line;
-  line-height: 18px;
-  margin-bottom: 10px;
-  margin-left: 10px;
+  line-height: 1.125rem;
+  margin-bottom: 0.625rem;
+  margin-left: 0.625rem;
   text-align: right;
-	overflow-wrap: break-word;
-	word-wrap: break-word;
-	-ms-word-break: break-all;
-	word-break: break-all;
-	word-break: break-word;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-all;
+  word-break: break-word;
 }
 
 .noticeBody {
-  font-size: 16px;
+  font-size: 1rem;
   color: $gray-700;
-  margin-bottom: 0px;
+  margin-bottom: 0rem;
   overflow: hidden;
-  position: relative; 
+  position: relative;
   line-height: 1.2em;
-  max-height: 3.6em; 
+  max-height: 3.6em;
   padding-right: 1em;
 }
 
 .noticeBody:before {
-  content: '...';
+  content: "...";
   position: absolute;
   right: 0;
   bottom: 0;
 }
 
 .noticeBody:after {
-  content: '';
+  content: "";
   position: absolute;
   right: 0;
   width: 1em;
diff --git a/src/components/organisms/RightBar/index.tsx b/src/components/organisms/RightBar/index.tsx
index 180b897595050075dd34d5dc8c21c082e332a6a7..5d55aa1f171adb595ec9977946f494a4d38bfddd 100644
--- a/src/components/organisms/RightBar/index.tsx
+++ b/src/components/organisms/RightBar/index.tsx
@@ -24,7 +24,7 @@ class RightBar extends React.Component<RightBarProps, RightBarState> {
     this.timerID = window.setInterval(
       () =>
         this.setState({
-          date: new Date(),
+          date: new Date()
         }),
       1000
     );
@@ -38,13 +38,13 @@ class RightBar extends React.Component<RightBarProps, RightBarState> {
     let buttons = [
       {
         title: "Settings",
-				icon: faCog,
-				onClick: this.props.onSettingsClick,
+        icon: faCog,
+        onClick: this.props.onSettingsClick
       },
       {
         title: "Sign Out",
-        icon: faSignOutAlt,
-      },
+        icon: faSignOutAlt
+      }
     ];
 
     let timeOptions = {
@@ -55,7 +55,7 @@ class RightBar extends React.Component<RightBarProps, RightBarState> {
       second: "2-digit",
       weekday: "short",
       day: "2-digit",
-      month: "short",
+      month: "short"
     };
     return (
       <div id={styles.rightbarWrapper}>
diff --git a/src/components/organisms/TopBar/components/NavBarBrand/index.tsx b/src/components/organisms/TopBar/components/NavBarBrand/index.tsx
index cc81592b327ce7d79f9692e4915b201fc6eb54e3..9a1d905de1668f8af6417dc2e87ac9eb6ea79f94 100644
--- a/src/components/organisms/TopBar/components/NavBarBrand/index.tsx
+++ b/src/components/organisms/TopBar/components/NavBarBrand/index.tsx
@@ -40,7 +40,7 @@ class NavBarBrand extends React.Component<NavBarBrandProps, NavBarBrandState> {
 
   rotatingDone() {
     this.setState({
-      iconRotate: false,
+      iconRotate: false
     });
   }
 
@@ -52,16 +52,16 @@ class NavBarBrand extends React.Component<NavBarBrandProps, NavBarBrandState> {
           width="30"
           height="30"
           className={cx("d-inline-block", "align-center", styles.brandImage, {
-            rotate: this.state.iconRotate,
+            rotate: this.state.iconRotate
           })}
           alt="Scientia logo"
-          onClick={(e) => {
+          onClick={e => {
             this.setState({
-              iconRotate: true,
+              iconRotate: true
             });
             this.props.onClick(e);
           }}
-          ref={(elm) => {
+          ref={elm => {
             this.brandIcon = elm;
           }}
         />
diff --git a/src/components/organisms/TopBar/components/NavBarBrand/style.module.scss b/src/components/organisms/TopBar/components/NavBarBrand/style.module.scss
index 966e33b10e009aefba326e7db71ea83a9b7ac5cb..83425eb84c69d16c8288c43e2624678f2553c199 100644
--- a/src/components/organisms/TopBar/components/NavBarBrand/style.module.scss
+++ b/src/components/organisms/TopBar/components/NavBarBrand/style.module.scss
@@ -17,21 +17,21 @@
   margin: 0rem;
 }
 
-.brandContainer a{
-	color: #000 !important;
-	text-decoration: none !important;
+.brandContainer a {
+  color: #000 !important;
+  text-decoration: none !important;
 }
 
 :global(.rotate) {
-	animation: rotate-keyframes 0.25s;
- }
- 
- @keyframes rotate-keyframes {
-	from {
-	 transform: rotate(0deg);
-	}
- 
-	to {
-	 transform: rotate(-90deg);
-	}
- }
\ No newline at end of file
+  animation: rotate-keyframes 0.25s;
+}
+
+@keyframes rotate-keyframes {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(-90deg);
+  }
+}
diff --git a/src/components/organisms/TopBar/components/NavBarTabGroup/index.tsx b/src/components/organisms/TopBar/components/NavBarTabGroup/index.tsx
index fedf9ecd074ce6173f8d5008f29ae2f098c1bb87..7c11fda1c18672bb8388a494e51c2b6ae797b660 100644
--- a/src/components/organisms/TopBar/components/NavBarTabGroup/index.tsx
+++ b/src/components/organisms/TopBar/components/NavBarTabGroup/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import Navbar from "react-bootstrap/Navbar";
 import Nav from "react-bootstrap/Nav";
 import NavBarTabItem from "components/organisms/TopBar/components/NavBarTabItem";
-import styles from "./style.module.scss"
+import styles from "./style.module.scss";
 import cx from "classnames";
 
 export interface NavBarTabGroupProps {
@@ -13,12 +13,15 @@ export interface NavBarTabGroupProps {
 }
 
 const NavBarTabGroup: React.FC<NavBarTabGroupProps> = ({
-  pages,
+  pages
 }: NavBarTabGroupProps) => {
   return (
-    <Navbar className={cx("m-auto", styles.pageButtonGroup)} id="responsive-navbar-nav">
+    <Navbar
+      className={cx("m-auto", styles.pageButtonGroup)}
+      id="responsive-navbar-nav"
+    >
       <Nav variant="pills">
-        {pages.map((page) => (
+        {pages.map(page => (
           <NavBarTabItem page={page} key={page.name} />
         ))}
       </Nav>
diff --git a/src/components/organisms/TopBar/components/NavBarTabGroup/style.module.scss b/src/components/organisms/TopBar/components/NavBarTabGroup/style.module.scss
index 5453e05fa55e2bdaf091447ab8527060a5f71899..73e96cf1d955f657ed1fbdbc511471830e2120d5 100644
--- a/src/components/organisms/TopBar/components/NavBarTabGroup/style.module.scss
+++ b/src/components/organisms/TopBar/components/NavBarTabGroup/style.module.scss
@@ -13,4 +13,4 @@
   .pageButtonGroup {
     display: none;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/organisms/TopBar/components/NavBarTabItem/index.tsx b/src/components/organisms/TopBar/components/NavBarTabItem/index.tsx
index aefa9e5c7ad6b97a02c0ef6aa51590fc38fbe876..eafb68e6465ca37cb4f469c6e451052b71138778 100644
--- a/src/components/organisms/TopBar/components/NavBarTabItem/index.tsx
+++ b/src/components/organisms/TopBar/components/NavBarTabItem/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import Nav from "react-bootstrap/Nav";
 import { NavLink } from "react-router-dom";
-import styles from "./style.module.scss"
+import styles from "./style.module.scss";
 
 export interface NavBarItemProps {
   page: {
@@ -11,7 +11,7 @@ export interface NavBarItemProps {
 }
 
 const NavBarTabItem: React.FC<NavBarItemProps> = ({
-  page,
+  page
 }: NavBarItemProps) => {
   return (
     <Nav.Item>
diff --git a/src/components/organisms/TopBar/index.tsx b/src/components/organisms/TopBar/index.tsx
index dc0926e5bd5505327c2e2f09c688fab1563d351b..cb7abd90e71d6e7bacece68edeb5062112975405 100644
--- a/src/components/organisms/TopBar/index.tsx
+++ b/src/components/organisms/TopBar/index.tsx
@@ -32,7 +32,7 @@ const TopBar: React.FC<TopBarProps> = ({
           className="d-inline-block align-top"
           alt="userPic"
           onClick={onUserIconClick}
-          style={{ borderRadius: "50%",width:"2.25rem", height:"2.25rem"  }}
+          style={{ borderRadius: "50%", width: "2.25rem", height: "2.25rem" }}
         />
       </Container>
     </Navbar>
diff --git a/src/components/organisms/TopBar/style.module.scss b/src/components/organisms/TopBar/style.module.scss
index 37080815feb78f9690cf5afd5032f5b864aad058..1800d98dd29a58f91536f04c5e0cd3bae1926cad 100644
--- a/src/components/organisms/TopBar/style.module.scss
+++ b/src/components/organisms/TopBar/style.module.scss
@@ -1,7 +1,7 @@
 @import "assets/scss/custom";
 
- .navBar {
+.navBar {
   padding: 0.75rem 1rem;
   background: #fff;
   border-bottom: 0.0625rem solid #cdd4db;
-}
\ No newline at end of file
+}