diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index 69e3ab67048cf27158f5fbcf60f2b9ca21dacf14..c11b4a99035828f07e70548f5b17e619ddfaea85 100644
--- a/frontend/src/components/App.tsx
+++ b/frontend/src/components/App.tsx
@@ -30,7 +30,7 @@ class App extends React.Component<{}, MyState> {
 
   render() {
     const horizontalBarPages = [
-      { name: "Courses", path: "/courses", icon: faChalkboardTeacher },
+      { name: "Modules", path: "/modules", icon: faChalkboardTeacher },
       { name: "Timetable", path: "/timetable", icon: faCalendarWeek },
       { name: "Exams", path: "/exams", icon: faBookOpen },
       { name: "Other", path: "/other", icon: faEllipsisH },
diff --git a/frontend/src/components/molecules/LeftBarTabGroup/index.tsx b/frontend/src/components/molecules/LeftBarTabGroup/index.tsx
index 4fc8c620cce48ad04943264b5d782121a9f3328d..52a59b0326a994f71c5016fcb9a52cd831904a7d 100644
--- a/frontend/src/components/molecules/LeftBarTabGroup/index.tsx
+++ b/frontend/src/components/molecules/LeftBarTabGroup/index.tsx
@@ -12,9 +12,9 @@ const LeftBarTabGroup: React.FC = () => {
       >
         <Button className="exam-outline-button">Progress</Button>
         <Button className="exam-outline-button-a active" type="button">
-          Course Title
+          Module Title
         </Button>
-        <Button className="exam-outline-button">Course Code</Button>
+        <Button className="exam-outline-button">Module Code</Button>
         <Button className="exam-outline-button">Term</Button>
       </div>
     </>
diff --git a/frontend/src/components/organisms/LeftBar/style.scss b/frontend/src/components/organisms/LeftBar/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..888151d3978e088ffb962a20c3b0a80d443c88ed
--- /dev/null
+++ b/frontend/src/components/organisms/LeftBar/style.scss
@@ -0,0 +1,146 @@
+@import "scss/custom";
+
+#wrapper {
+  padding-left: 0;
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  transition: all 0.5s ease;
+}
+
+#sidebar-wrapper {
+  position: fixed;
+  left: 250px;
+  width: 0;
+  margin-left: -250px;
+  height: 100%;
+  margin-bottom: 61px;
+  overflow-y: auto;
+  background: #fff;
+  background: #ffffff;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  transition: all 0.5s ease;
+}
+
+.module-outline-button {
+  margin-bottom: 10px;
+}
+
+.module-outline-button-a {
+  margin-bottom: 10px;
+  border-radius: 8px;
+  font-weight: 500;
+}
+
+#sidebar-wrapper .btn-group-vertical > .btn-group:not(:last-child) > .btn,
+#sidebar-wrapper
+  .btn-group-vertical
+  > .btn:not(:last-child):not(.dropdown-toggle) {
+  border-radius: 5px;
+}
+
+#sidebar-wrapper
+  .btn-group-vertical
+  > .btn-group:not(:first-child)
+  > #sidebar-wrapper
+  .btn,
+.btn-group-vertical > .btn:not(:first-child) {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+#wrapper.toggled {
+  padding-left: 250px;
+}
+
+#wrapper.toggled #sidebar-wrapper {
+  width: 250px;
+}
+
+@media (max-width: 992px) {
+  .sidebar-status {
+    margin-top: 30px;
+    margin-left: 16px;
+    margin-right: 16px;
+    margin-bottom: 0px;
+    font-size: 16px;
+    font-weight: 500;
+    font-family: "IBM Plex Sans";
+    color: #000000;
+    letter-spacing: 0;
+    position: absolute;
+    width: max-content;
+    text-transform: uppercase;
+  }
+
+  .module-outline-heading {
+    font-size: 24px;
+    color: #000000;
+    text-align: left;
+    margin-top: 64px;
+    margin-left: 16px;
+    margin-right: 16px;
+    position: absolute;
+    width: max-content;
+    margin-bottom: 0px;
+  }
+
+  #module-outline-button-group {
+    margin-top: 102px;
+    margin-left: 16px;
+    margin-right: 16px;
+    width: 218px;
+  }
+}
+
+@media (min-width: 992px) {
+  #wrapper {
+    padding-left: 250px;
+  }
+
+  #sidebar-wrapper {
+    width: 250px;
+  }
+
+  .sidebar-status {
+    margin-top: 30px;
+    margin-left: 32px;
+    margin-right: 32px;
+    margin-bottom: 0px;
+    font-size: 16px;
+    color: #000000;
+    letter-spacing: 0;
+    position: absolute;
+    width: max-content;
+  }
+
+  .module-outline-heading {
+    font-size: 24px;
+    color: #000000;
+    text-align: left;
+    margin-top: 64px;
+    margin-left: 32px;
+    margin-right: 32px;
+    position: absolute;
+    width: max-content;
+    margin-bottom: 0px;
+  }
+
+  #module-outline-button-group {
+    margin-top: 102px;
+    margin-left: 32px;
+    margin-right: 32px;
+    width: 186px;
+  }
+
+  #wrapper.toggled {
+    padding-left: 0;
+  }
+
+  #wrapper.toggled #sidebar-wrapper {
+    width: 0;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/components/pages/StandardView/index.tsx b/frontend/src/components/pages/StandardView/index.tsx
index 205dc1a5133e073ce9c4601a7bdc9ca40eead9ca..5438b6cc46b0cde2b217fd536c2ebeace66e2ebd 100644
--- a/frontend/src/components/pages/StandardView/index.tsx
+++ b/frontend/src/components/pages/StandardView/index.tsx
@@ -25,7 +25,7 @@ const StandardView: React.FC<StandardViewProps> = ({
     <div id="wrapper" className={isToggled ? "toggled" : ""}>
       <LeftBar />
       <Switch>
-        <Route exact path="/" render={() => <Redirect to="/courses" />} />
+        <Route exact path="/" render={() => <Redirect to="/modules" />} />
         {topBarRoutes}
       </Switch>
     </div>