Create empty components for timeline

src/components/pages/Timeline/components/ModuleHeading/index.tsx

+import React from "react";
+import Card from "react-bootstrap/Card";
+const ModuleHeading: React.FC = () => {
+  return (
+    <Card>
+			
+    </Card>
+  );
+};
+
+export default ModuleHeading;

src/components/pages/Timeline/components/TermSwitcher/index.tsx

+import React from "react";
+import styles from "./style.module.scss";
+import ButtonGroup from "react-bootstrap/ButtonGroup";
+import Button from "react-bootstrap/Button";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLeaf, faSeedling, faSun } from "@fortawesome/free-solid-svg-icons";
+
+const TermSwitcher: React.FC = () => {
+  return (
+    <>
+				<ButtonGroup style={{ float: "right" }}>
+              <Button
+                className={styles.termSwitch}
+                active={true}
+                variant="secondary"
+              >
+                <FontAwesomeIcon icon={faLeaf}/>
+              </Button>
+							<Button
+                className={styles.termSwitch}
+                active={false}
+                variant="secondary"
+              >
+                <FontAwesomeIcon icon={faSeedling}/>
+              </Button>
+							<Button
+                className={styles.termSwitch}
+                active={false}
+                variant="secondary"
+              >
+                <FontAwesomeIcon icon={faSun}/>
+              </Button>
+            </ButtonGroup>
+    </>
+  );
+};
+
+export default TermSwitcher;

src/components/pages/Timeline/components/TermSwitcher/style.module.scss

+.termSwitch {
+  background-color: var(--primary-button);
+  color: var(--primary-button-text);
+
+  border-width: 0px;
+  border-radius: 8px;
+
+  margin-left: 20px;
+  justify-content: space-between;
+  height: 2.25rem;
+  font-size: 1.05rem;
+
+  transition: 0.2s background-color;
+  -webkit-transition: 0.2s background-color;
+  -moz-transition: 0.2s background-color;
+}
+
+.termSwitch:active,
+.termSwitch:global(.active) {
+  background: var(--primary-button-active) !important;
+  color: var(--primary-button-text-active) !important;
+  font-weight: 500;
+  text-align: left;
+  border-width: 0rem;
+  height: 2.25rem;
+  line-height: 1.375rem;
+}
+
+.termSwitch:hover {
+  background-color: var(--primary-button-hover);
+  color: var(--primary-button-text);
+  box-shadow: none !important;
+}

src/components/pages/Timeline/components/WeekHeading/index.tsx

+import React from "react";
+const WeekHeading: React.FC = () => {
+  return (
+    <>
+    </>
+  );
+};
+
+export default WeekHeading;
\ No newline at end of file

src/components/pages/Timeline/index.tsx

 import React from "react";
+import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
+import styles from "./style.module.scss";
+import TermSwitcher from "./components/TermSwitcher";
 
 interface TimelineProps {
-	initSideBar: () => void;
-	revertSideBar: () => void;
+  initSideBar: () => void;
+  revertSideBar: () => void;
 }
 
 class Timeline extends React.Component<TimelineProps, {}> {
-
-  componentDidMount() {;
-		this.props.initSideBar();
+  componentDidMount() {
+    this.props.initSideBar();
   }
 
   componentWillUnmount() {
@@ -16,8 +18,12 @@ class Timeline extends React.Component<TimelineProps, {}> {
   }
 
   render() {
-		
-    return <></>;
+    return (
+      <div className={styles.timelineContainer}>
+        <MyBreadcrumbs />
+				{/* <TermSwitcher/> */}
+      </div>
+    );
   }
 }
 

src/components/pages/Timeline/style.module.scss

+.timelineContainer {
+	margin-top: 1.875rem;
+	margin-left: 1.875rem;
+}
\ No newline at end of file