Fix text alignment in sidebar buttons

frontend/src/components/atoms/NavBarTabItem/style.module.scss

@@ -5,7 +5,7 @@
     background: $gray-100;
     border-radius: 8px !important;
     font-family: "IBM Plex Sans";
-    font-size: 18px;
+    font-size: 17px;
     color: $black !important;
     text-align: center;
     line-height: 22px;

frontend/src/components/molecules/SideBarTabGroup/style.module.scss

 @import "assets/scss/custom";
 
-.tabGroupButton {
-	margin-bottom: 10px;
-	color: #000;
+.tabGroupButton,
+.tabGroupButton:global(.a) {
+  margin-bottom: 0.625rem;
+  color: #000;
   background: #f6f8fa;
-  font-size: 17px;
+  font-size: 1rem;
   letter-spacing: 0;
-  border-width: 0px;
-  height: 40px;
-  border-radius: 8px !important;
-	text-align: left;
-	display: inline-block;
-	vertical-align: middle;
+  border-width: 0rem;
+  line-height: 1.375rem;
+  height: 2.25rem;
+  border-radius: 0.5rem !important;
+  text-align: left;
 }
 
 .tabGroupButtonSvg {
-	float :right;
-	margin-top: 3.5px;
+  float: right;
+  margin-top: 0.22rem; 
 }
 
 .tabGroupButton:global(.active),
-.tabGroupButton:active{
+.tabGroupButton:active {
   color: #fff;
-	background-color: #000 !important;
+  background-color: #000 !important;
   font-weight: 500;
   text-align: left;
-  border-width: 0px;
-  height: 40px;
+  border-width: 0rem;
+  height: 2.25rem;
+  line-height: 1.375rem;
 }
 
 .tabGroupButton:hover {
-	background-color: #e5e5e5;
-	border-color: #fff;
-	color: #000;
+  background-color: #e5e5e5;
+  border-color: #fff;
+  color: #000;
 }
 
-@media (max-width: 992px) {
+@media (max-width: 62rem) {
   .tabGroupButtonGroup {
-    margin-top: 20px;
-    margin-left: 16px;
-    margin-right: 16px;
+    margin-top: 1.25rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
     position: relative;
-    width: 218px !important;
-	}
-	
-	.tabGroupHeading {
-    font-size: 24px;
+    width: 13.625rem !important;
+  }
+
+  .tabGroupHeading {
+    font-size: 1.5rem;
     color: #000000;
     text-align: left;
-    margin-top: 30px;
-    margin-left: 16px;
-    margin-right: 16px;
+    margin-top: 1.875rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
     position: relative;
     width: max-content;
-    margin-bottom: 0px;
+    margin-bottom: 0rem;
   }
 }
 
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .tabGroupButtonGroup {
-    margin-top: 102px;
-    margin-left: 32px;
-    margin-right: 32px;
+    margin-top: 6.375rem;
+    margin-left: 2rem;
+    margin-right: 2rem;
     position: relative;
-    margin-top: 20px;
-    width: 186px !important;
-	}
-	
-	.tabGroupHeading {
-    font-size: 24px;
+    margin-top: 1.25rem;
+    width: 11.625rem !important;
+  }
+
+  .tabGroupHeading {
+    font-size: 1.5rem;
     color: #000000;
     text-align: left;
-    margin-top: 30px;
-    margin-left: 32px;
-    margin-right: 32px;
+    margin-top: 1.875rem;
+    margin-left: 2rem;
+    margin-right: 2rem;
     position: relative;
     width: max-content;
-    margin-bottom: 0px;
+    margin-bottom: 0rem;
   }
 }

frontend/src/components/pages/ModuleList/index.tsx

@@ -28,14 +28,14 @@ const ModuleList: React.FC = () => {
     },
 
     {
-      title: "Mathematical Methods",
+      title: "Introduction to Computer Systems",
       code: "CO112",
       image: systemsIllustration,
       content: "",
     },
 
     {
-      title: "Introduction to Logic",
+      title: "Mathematical Methods",
       code: "CO145",
       image: methodsIllustration,
       content: "",