diff --git a/components/SingleClassView/Communicate/Communicate.tsx b/components/SingleClassView/Communicate/Communicate.tsx
new file mode 100644
index 00000000..ca85ad1d
--- /dev/null
+++ b/components/SingleClassView/Communicate/Communicate.tsx
@@ -0,0 +1,126 @@
+import React, { useContext, useEffect, useState } from "react";
+import { APIContext } from "../../../context/APIContext";
+import { AuthContext } from "../../../context/AuthContext";
+import Button from "@mui/material/Button";
+import styles from "./communicate.module.css";
+import { Announcement } from "../../../models";
+import { CustomError } from "../../../components/util/CustomError";
+import { CommunicateItem } from "./CommunicateItem";
+
+type CommunicateProps = {
+  id: string;
+};
+
+export const Communicate: React.FC<CommunicateProps> = ({ id }) => {
+  const api = useContext(APIContext);
+  const { user } = useContext(AuthContext);
+  const [popup, setPopup] = useState(false);
+  const [announcements, setAnnouncements] = useState<Announcement[]>([]);
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [refresh, setRefresh] = useState(false);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      const res = await api.getAnnouncements(id);
+      setAnnouncements(res);
+    })();
+  }, [refresh]);
+
+  const handleClick: VoidFunction = () => {
+    setPopup(!popup);
+  };
+
+  const handleCancel = async (): Promise<void> => {
+    setError(false);
+    setPopup(false);
+  };
+
+  const handleSubmit = async (): Promise<void> => {
+    if (title == "" || content == "") {
+      setError(true);
+    } else {
+      const announcement = {
+        title: title,
+        content: content,
+      };
+      await api.createAnnouncement(id, announcement);
+      triggerClassModuleRefresh();
+      setError(false);
+      setPopup(false);
+      setTitle("");
+      setContent("");
+    }
+  };
+
+  const triggerClassModuleRefresh = (): void => {
+    setRefresh(!refresh);
+  };
+
+  if (user == null) return <CustomError />;
+
+  return (
+    <div className={styles.container}>
+      {popup ? (
+        <div className={styles.popupBackground}>
+          <div className={styles.popupContainer}>
+            <div className={styles.popupTitle}>New Post</div>
+            <input
+              className={`${styles.label} ${styles.titleInput}`}
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              type="text"
+              placeholder="Summary"
+            />
+            <textarea
+              className={`${styles.label} ${styles.contentInput}`}
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              placeholder="Message here"
+            />
+            {error && (
+              <div className={styles.popupError}> Please give the post a title and a message. </div>
+            )}
+            <div className={styles.buttonContainer}>
+              <button onClick={handleCancel} className={styles.cancel}>
+                Cancel
+              </button>
+              <button onClick={handleSubmit} className={styles.submit}>
+                Submit
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      <div className={styles.title}>Communicate</div>
+      <div className={styles.line} />
+      {(user.role == "Teacher" || user.role == "Admin") && (
+        <>
+          <div className={styles.spacer} />
+          <Button className={styles.button} onClick={handleClick}>
+            + New Post
+          </Button>
+        </>
+      )}
+      <div className={styles.spacer} />
+      <div className={styles.accordionHeader}>
+        <div>
+          <div className={styles.dropdownHeader}>Announcements</div>
+        </div>
+        <div>
+          {announcements.map((announcement, idx) => (
+            <CommunicateItem
+              key={`${announcement.title}-${idx}`}
+              id={id}
+              announcement={announcement}
+              idx={idx}
+              triggerClassModuleRefresh={triggerClassModuleRefresh}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/components/SingleClassView/Communicate/CommunicateItem.tsx b/components/SingleClassView/Communicate/CommunicateItem.tsx
new file mode 100644
index 00000000..516b80e7
--- /dev/null
+++ b/components/SingleClassView/Communicate/CommunicateItem.tsx
@@ -0,0 +1,77 @@
+import styles from "./communicate.module.css";
+import React, { useState, useContext } from "react";
+import { APIContext } from "../../../context/APIContext";
+import { AuthContext } from "../../../context/AuthContext";
+import { Announcement } from "../../../models";
+import { CustomError } from "../../../components/util/CustomError";
+
+type CommunicateItemProps = {
+  id: string;
+  announcement: Announcement;
+  idx: number;
+  triggerClassModuleRefresh: () => void;
+};
+
+export const CommunicateItem: React.FC<CommunicateItemProps> = ({
+  id,
+  announcement,
+  idx,
+  triggerClassModuleRefresh,
+}) => {
+  const api = useContext(APIContext);
+  const { user } = useContext(AuthContext);
+  const [showContent, setShowContent] = useState(false);
+  const [deleteItem, setDeleteItem] = useState(false);
+
+  const handleClick: VoidFunction = () => {
+    setShowContent(!showContent);
+  };
+
+  const handleCancel: VoidFunction = () => {
+    setDeleteItem(false);
+  };
+
+  const handleDeleteConfirm = async (): Promise<void> => {
+    await api.deleteAnnouncement(id, announcement.announcementId);
+    triggerClassModuleRefresh();
+  };
+
+  if (user == null) return <CustomError />;
+
+  return (
+    <>
+      <div className={styles.dropdownItem} key={`${announcement.title}-${idx}`}>
+        <div className={styles.dropdownItemText} onClick={handleClick}>
+          {" "}
+          {announcement.title}{" "}
+        </div>
+        {(user.role == "Teacher" || user.role == "Admin") && (
+          <img src="/Trash.svg" className={styles.trash} onClick={() => setDeleteItem(true)} />
+        )}
+      </div>
+      {showContent && (
+        <div className={styles.dropdownDropdownItem} key={`${announcement.title}-${idx}`}>
+          {announcement.content.trimEnd()}
+        </div>
+      )}
+
+      {deleteItem ? (
+        <div className={styles.popupBackground}>
+          <div className={styles.popupContainer}>
+            <div className={styles.popupTitle}>
+              Do you want to delete the following lesson: {announcement.title}?
+            </div>
+            <div className={styles.buttonContainer}>
+              <button onClick={handleCancel} className={styles.cancel}>
+                Cancel
+              </button>
+              <button onClick={handleDeleteConfirm} className={styles.submit}>
+                Yes
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+};
diff --git a/components/SingleClassView/Communicate/communicate.module.css b/components/SingleClassView/Communicate/communicate.module.css
new file mode 100644
index 00000000..cfee4ed6
--- /dev/null
+++ b/components/SingleClassView/Communicate/communicate.module.css
@@ -0,0 +1,203 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: 100%;
+  padding-right: 2rem;
+  padding-top: 2rem;
+}
+
+.title {
+  composes: headlineLarge from "../../../styles/globals.css";
+  padding-bottom: 2rem;
+  position: relative;
+  align-self: left;
+  padding: 1rem;
+}
+
+.spacer {
+  height: 30px;
+}
+
+.line {
+  background: #000000;
+  height: 2px;
+  width: 100%;
+}
+
+.dropdownHeader {
+  height: 3rem;
+  width: 100%;
+  background-color: #46d5b3;
+  border-radius: 5px 5px 0px 0px;
+  padding-left: 2rem;
+  padding-top: 0.75rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.dropdownItem {
+  height: 3rem;
+  width: 100%;
+  padding-left: 2rem;
+  padding-top: 1rem;
+  border: solid #bfc1c4 1px;
+  border-top: solid #bfc1c4 0.5px;
+}
+
+.dropdownItemText {
+  float: left;
+  cursor: pointer;
+}
+
+.dropdownItemText:hover {
+  text-decoration: underline;
+}
+
+.dropdownDropdownItem {
+  height: 100%;
+  width: 100%;
+  border: solid #bfc1c4 1px;
+  border-top: solid #bfc1c4 0.5px;
+  padding: 1rem 1rem 1rem 5rem;
+  color: #373a37;
+  white-space: pre-wrap;
+}
+
+.trash {
+  float: right;
+  width: 1rem;
+  cursor: pointer;
+  color: black;
+  margin-right: 1rem;
+  padding-top: 0.2rem;
+  text-align: 50%;
+}
+
+.button {
+  float: right;
+  cursor: pointer;
+  background-color: #dadada;
+  border-radius: 10px;
+  text-transform: none;
+  color: black;
+  font-weight: bold;
+  padding: 5px 25px 5px 25px;
+  width: 135px;
+}
+
+.button:hover {
+  background-color: #dadada;
+}
+
+.submit {
+  width: 160px;
+  height: 48px;
+  border: none;
+  border-radius: 10px;
+  background: var(--orange);
+  font-family: Inter;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 22px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.cancel {
+  width: 160px;
+  height: 48px;
+  border: none;
+  border-radius: 10px;
+  border-color: black;
+  border-style: solid;
+  border-width: 2px;
+  background-color: white;
+  font-family: Inter;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 22px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.buttonContainer {
+  display: flex;
+  flex-direction: row;
+  padding-top: 2rem;
+  align-items: center;
+  justify-content: space-evenly;
+  z-index: 1;
+}
+
+.popupBackground {
+  position: fixed;
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: left;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  z-index: 1;
+  background-color: rgba(73, 76, 78, 0.24);
+}
+
+.popupContainer {
+  background-color: white;
+  padding: 2rem;
+  border-radius: 10px;
+  margin: 0.5rem;
+}
+
+.popupTitle {
+  font-size: 1.5rem;
+  font-weight: 600;
+  padding-bottom: 0.5rem;
+  text-align: center;
+}
+
+.titleInput {
+  display: block;
+  width: 850px;
+  border-width: 0px 0px 1px 0px;
+  background-color: #e1e2e4;
+  height: 40px;
+  margin: 0.5rem 3rem 0 3rem;
+  padding-left: 0.5rem;
+  border: 1px solid #c4c4c4;
+  border-radius: 5px;
+  font-size: 20px;
+}
+
+.contentInput {
+  display: block;
+  width: 850px;
+  border-width: 0px 0px 1px 0px;
+  background-color: #e1e2e4;
+  height: 275px;
+  margin: 1.5rem 3rem 0 3rem;
+  padding-left: 0.5rem;
+  padding-top: 0.5rem;
+  border: 1px solid #c4c4c4;
+  border-radius: 5px;
+  resize: none;
+  font-size: 20px;
+  font-family: "Inter";
+}
+
+.popupError {
+  color: red;
+  margin-top: 20px;
+}
+
+.accordionHeader {
+  border-radius: 5px;
+}
diff --git a/package-lock.json b/package-lock.json
index dd00a4c3..2a8159fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3517,8 +3517,7 @@
     "node_modules/@types/luxon": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-2.3.2.tgz",
-      "integrity": "sha512-WOehptuhKIXukSUUkRgGbj2c997Uv/iUgYgII8U7XLJqq9W2oF0kQ6frEznRQbdurioz+L/cdaIm4GutTQfgmA==",
-      "dev": true
+      "integrity": "sha512-WOehptuhKIXukSUUkRgGbj2c997Uv/iUgYgII8U7XLJqq9W2oF0kQ6frEznRQbdurioz+L/cdaIm4GutTQfgmA=="
     },
     "node_modules/@types/mime": {
       "version": "1.3.2",
@@ -15601,8 +15600,7 @@
     "@types/luxon": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-2.3.2.tgz",
-      "integrity": "sha512-WOehptuhKIXukSUUkRgGbj2c997Uv/iUgYgII8U7XLJqq9W2oF0kQ6frEznRQbdurioz+L/cdaIm4GutTQfgmA==",
-      "dev": true
+      "integrity": "sha512-WOehptuhKIXukSUUkRgGbj2c997Uv/iUgYgII8U7XLJqq9W2oF0kQ6frEznRQbdurioz+L/cdaIm4GutTQfgmA=="
     },
     "@types/mime": {
       "version": "1.3.2",
diff --git a/pages/class/[classId].tsx b/pages/class/[classId].tsx
index 43e41641..b98747f6 100644
--- a/pages/class/[classId].tsx
+++ b/pages/class/[classId].tsx
@@ -11,6 +11,7 @@ import useSWR from "swr";
 import { CustomLoader } from "../../components/util/CustomLoader";
 import { AttendanceComponent } from "../../components/SingleClassView/Attendance/AttendanceComponent";
 import { ClassModule } from "../../components/SingleClassView/Module/ClassModule";
+import { Communicate } from "../../components/SingleClassView/Communicate/Communicate";
 
 const Class: NextApplicationPage = () => {
   const router = useRouter();
@@ -58,14 +59,25 @@ const Class: NextApplicationPage = () => {
               Modules
             </a>
           </li>
+          <li className={styles.navitem}>
+            <a
+              id="communicate"
+              className={currentModule == "communicate" ? styles.clicked : styles.navlink}
+              onClick={() => setCurrentModule("communicate")}
+            >
+              Communicate
+            </a>
+          </li>
         </ul>
       </nav>
       {currentModule == "attendance" ? (
         <AttendanceComponent classId={classId} />
       ) : currentModule == "roster" ? (
         <Roster id={classId} />
-      ) : (
+      ) : currentModule == "modules" ? (
         <ClassModule enableEditing={user.role == "Student" ? false : true} id={classId} />
+      ) : (
+        <Communicate id={classId} />
       )}
     </div>
   );