diff --git a/frontend/src/components/molecules/CalendarGroup/index.tsx b/frontend/src/components/molecules/CalendarGroup/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9189e60fefaf29bc91ebd340f6cbc2dc56014a1a
--- /dev/null
+++ b/frontend/src/components/molecules/CalendarGroup/index.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import Button from "react-bootstrap/Button";
+import styles from "./style.module.scss";
+import Card from "react-bootstrap/Card";
+
+const CalendarGroup: React.FC = () => {
+  return (
+    <>
+      <h1 className={styles.moduleOutlineHeading}>Today</h1>
+      <div
+        className={"btn-group-vertical " + styles.moduleOutlineButtonGroup}
+        role="group"
+      >
+        {/* <Button className={styles.moduleOutlineButton}>Progress</Button>
+        <Button className={"active " + styles.moduleOutlineButton}>
+          Module Title
+        </Button> */}
+
+      </div>
+    </>
+  );
+};
+
+export default CalendarGroup;
diff --git a/frontend/src/components/molecules/CalendarGroup/style.module.scss b/frontend/src/components/molecules/CalendarGroup/style.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ae6c1931c8d4729a676fb9eb2b9cb4d84e0f8523
--- /dev/null
+++ b/frontend/src/components/molecules/CalendarGroup/style.module.scss
@@ -0,0 +1,73 @@
+@import "assets/scss/custom";
+
+.moduleOutlineButton {
+	margin-bottom: 10px;
+
+	color: #000;
+  background: #f6f8fa;
+  font-size: 17px;
+  letter-spacing: 0;
+  border-width: 0px;
+  height: 40px;
+  border-radius: 5px !important;
+	text-align: left;
+	
+}
+
+.moduleOutlineButton:global(.active),
+.moduleOutlineButton:active{
+  color: #fff;
+	background-color: #000 !important;
+  font-weight: 500;
+  text-align: left;
+  border-width: 0px;
+  height: 40px;
+}
+
+.moduleOutlineButton:hover {
+	background-color: #e5e5e5;
+	border-color: #fff;
+	color: #000;
+}
+
+@media (max-width: 992px) {
+  .moduleOutlineButtonGroup {
+    margin-top: 102px;
+    margin-left: 16px;
+    margin-right: 16px;
+    width: 218px !important;
+	}
+	
+	.moduleOutlineHeading {
+    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;
+  }
+}
+
+@media (min-width: 992px) {
+  .moduleOutlineButtonGroup {
+    margin-top: 102px;
+    margin-left: 32px;
+    margin-right: 32px;
+    width: 186px !important;
+	}
+	
+	.moduleOutlineHeading {
+    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;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/components/organisms/RightBar/index.tsx b/frontend/src/components/organisms/RightBar/index.tsx
index b3414ae987da53801bb03e748306938a4738ef75..d79f03253d60e3eb95ade99f94e8e2457b45510e 100644
--- a/frontend/src/components/organisms/RightBar/index.tsx
+++ b/frontend/src/components/organisms/RightBar/index.tsx
@@ -1,10 +1,12 @@
 import React from "react";
-import styles from "./style.module.scss"
+import styles from "./style.module.scss";
+import CalendarGroup from "components/molecules/CalendarGroup";
 
 const RightBar: React.FC = () => {
   return (
     <div id={styles.rightbarWrapper}>
       <p className={styles.rightbarStatus}>2020-08-05 15:08</p>
+			<CalendarGroup/>
     </div>
   );
 };