diff --git a/backend/src/db/daos/noteDao.js b/backend/src/db/daos/noteDao.js
index 7286cb09..98260813 100644
--- a/backend/src/db/daos/noteDao.js
+++ b/backend/src/db/daos/noteDao.js
@@ -1,5 +1,6 @@
 import Note from "../models/note.js";
 import Group from "../models/group.js";
+import { HttpError } from "../../util/error.js";
 
 /**
  * Checks if a user is in a group
@@ -31,7 +32,7 @@ const createNote = async (groupId, title, email, text = "") => {
   if (role === null) {
     return null;
   }
-  const dbNote = new Note({ title, role, text });
+  const dbNote = new Note({ title, role, text, date: new Date() });
   await dbNote.save();
   const updateQuery = {};
   updateQuery[`notes.${role}`] = dbNote.id;
@@ -48,19 +49,17 @@ const createNote = async (groupId, title, email, text = "") => {
  */
 const deleteNote = async (noteId, groupId, email) => {
   const role = await checkRole(groupId, email);
-  const note = await Note.findById(noteId);
-  if (note.role !== role) {
-    return null;
-  }
+  const note = await Note.findById(noteId, { role: 1 }).lean();
+  if (note?.role !== role) throw new HttpError(403, "Forbidden");
 
-  const updateQuery = {
-    $pull: { [`notes.${note.role}`]: noteId },
-  };
+  const updateQuery = { $pull: { [`notes.${note.role}`]: noteId } };
+  await Promise.all([
+    // remove reference
+    Group.updateOne({ _id: groupId }, updateQuery),
+    // remove document
+    Note.deleteOne({ _id: noteId }),
+  ]);
 
-  //  delete note from group
-  await Group.updateOne({ _id: groupId }, updateQuery);
-  //  delete note from note collection
-  await note.delete();
   return null;
 };
 
@@ -94,24 +93,13 @@ const updateNote = async (noteId, updatedNote, groupId, email) => {
  * @returns list of database note objects
  */
 //  I know the group is fetched for twice but this is currently not used anywhere
-const retrieveNoteList = async (groupId, email) => {
-  const dbGroup = await Group.findById(groupId);
-  const role = await checkRole(groupId, email);
-  //  if user is not in group return null
-  if (role === null) {
-    return null;
-  }
-  const allNotes = [];
-  const noteIds = [...dbGroup.notes.values()].flat();
-  const dbNotes = await Note.find({ _id: { $in: noteIds } }, [
-    "title",
-    "role",
-    "date",
-    "text",
-  ]);
+const retrieveNoteList = async (groupId) => {
+  const { notes } = await Group.findById(groupId, { notes: 1 }).lean();
+
+  const noteIds = Object.values(notes).flat();
+  const dbNotes = await Note.find({ _id: { $in: noteIds } }, { __v: 0 });
 
-  allNotes.push(...dbNotes);
-  return allNotes;
+  return dbNotes;
 };
 
 /**
diff --git a/backend/src/routes/api/note.js b/backend/src/routes/api/note.js
index 8b771601..44451044 100644
--- a/backend/src/routes/api/note.js
+++ b/backend/src/routes/api/note.js
@@ -7,6 +7,8 @@ import {
   retrieveNote,
 } from "../../db/daos/noteDao.js";
 import auth from "../../middleware/firebaseAuth.js";
+import { handle } from "../../util/error.js";
+import STATUS from "../../util/status.js";
 
 const router = Router();
 const HTTP_OK = 200;
@@ -14,9 +16,9 @@ const HTTP_OK = 200;
 router.use(auth);
 
 // Retrieve note list
-router.get("/retrieveList/:groupId", async (req, res) => {
+router.get("/retrieveAll/:groupId", async (req, res) => {
   const { groupId } = req.params;
-  const notes = retrieveNoteList(groupId);
+  const notes = await retrieveNoteList(groupId);
   res.status(HTTP_OK).json(notes);
 });
 
@@ -43,9 +45,12 @@ router.put("/update", async (req, res) => {
 });
 
 // Delete a note
-router.delete("/delete", async (req, res) => {
-  const { noteId, groupId, email } = req.body;
-  await deleteNote(noteId, groupId, email);
-  res.status(HTTP_OK).json("note deleted");
-});
+router.delete(
+  "/delete",
+  handle(async (req, res) => {
+    const { noteId, groupId, email } = req.body;
+    await deleteNote(noteId, groupId, email);
+    res.status(STATUS.OK).json("note deleted");
+  })
+);
 export default router;
diff --git a/frontend/src/features/playScenario/components/Note/Note.jsx b/frontend/src/features/playScenario/components/Note/Note.jsx
deleted file mode 100644
index 07ff605b..00000000
--- a/frontend/src/features/playScenario/components/Note/Note.jsx
+++ /dev/null
@@ -1,310 +0,0 @@
-import AuthenticationContext from "context/AuthenticationContext";
-import { useAuthDelete, useAuthGet, useAuthPut } from "hooks/crudHooks";
-import { useContext, useEffect, useState } from "react";
-import styles from "./Note.module.scss";
-
-export default function Note({ role, noteId, group, refetchGroup }) {
-  const { user } = useContext(AuthenticationContext);
-  const [noteContent, setContent] = useState();
-  const [title, setTitle] = useState();
-  const [date, setDate] = useState();
-  const [open, setOpen] = useState(false);
-  //  lock save process while saving
-  const [save, setSave] = useState(false);
-  //  check if user has same role
-  const [isRole, setRole] = useState(false);
-  //  show delete confirmation
-  const [showConfirm, setShowConfirm] = useState(false);
-  //  is the current version of the note saved
-  const [saved, setSaved] = useState(false);
-  const {
-    response: noteData,
-    loading: noteLoading,
-    error: noteError,
-    getRequest: retrieveNoteRequest,
-  } = useAuthGet(`/api/note/retrieve/${noteId}`);
-
-  const {
-    response: updateResult,
-    loading: updateLoading,
-    error: updateError,
-    putRequest: updateNoteRequest,
-  } = useAuthPut("/api/note/update");
-
-  const {
-    response: deleteResult,
-    loading: deleteLoading,
-    error: deleteError,
-    deleteRequest: deleteNoteRequest,
-  } = useAuthDelete(`/api/note/delete`);
-
-  const getRole = () => {
-    group.users.forEach((userToCheck) => {
-      if (userToCheck.email === user.email) {
-        if (userToCheck.role === role) {
-          setRole(true);
-        }
-      }
-    });
-  };
-
-  const loadNote = async () => {
-    if (noteData) {
-      setContent(noteData.text);
-      setTitle(noteData.title);
-      if (noteData.date) {
-        const dateObject = new Date(noteData.date);
-        setDate(dateObject);
-      }
-    }
-  };
-
-  async function fetchNote() {
-    console.log("fetching note");
-    await retrieveNoteRequest();
-    getRole();
-  }
-
-  useEffect(() => {
-    loadNote();
-  }, [noteData]);
-
-  useEffect(() => {
-    fetchNote();
-  }, []);
-
-  const handleContentInput = (e) => {
-    setSaved(false);
-    setContent(e.target.value);
-  };
-
-  const handleTitleInput = (e) => {
-    setSaved(false);
-    setTitle(e.target.value);
-  };
-
-  const handleOpen = () => {
-    setOpen(true);
-  };
-
-  const saveNote = async () => {
-    try {
-      await updateNoteRequest({
-        noteId,
-        text: noteContent,
-        title,
-        groupId: group._id,
-        email: user.email,
-      });
-      setSaved(true);
-    } catch (e) {
-      console.log(e);
-      throw new Error("Failed to save note");
-    }
-  };
-
-  const handleSave = async () => {
-    if (save) return;
-    setSave(true);
-    try {
-      await saveNote();
-      await fetchNote();
-    } catch (e) {
-      console.log(e);
-    } finally {
-      console.log("note updated");
-      setSave(false);
-    }
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  const deleteNote = async () => {
-    setShowConfirm(false);
-    try {
-      await deleteNoteRequest({
-        noteId,
-        groupId: group._id,
-        email: user.email,
-      });
-      refetchGroup();
-      handleClose();
-    } catch (e) {
-      console.log(e);
-    }
-  };
-
-  const handleDelete = () => {
-    setShowConfirm(true);
-  };
-
-  const handleKeyPress = (e) => {
-    if (e.key === "Escape") {
-      handleClose();
-    }
-  };
-
-  if (noteLoading) {
-    return (
-      <div
-        role="button"
-        onClick={handleOpen}
-        onKeyDown={handleKeyPress}
-        tabIndex={0}
-        className={styles.note}
-      >
-        Loading...
-      </div>
-    );
-  }
-
-  if (noteError) {
-    return (
-      <div
-        role="button"
-        onClick={handleOpen}
-        onKeyDown={handleKeyPress}
-        tabIndex={0}
-        className={styles.note}
-      >
-        Error
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <div
-        className="card bg-slate-50 w-60 h-40 shadow-xl cursor-pointer border-2 border-slate-50 hover:border-slate-300 "
-        onClick={handleOpen}
-        onKeyDown={handleKeyPress}
-      >
-        <div className="card-body p-5">
-          <h2 className="card-title overflow-hidden text-ellipsis text-nowrap">
-            <span className="capitalize">[{role || "-"}]</span>
-            <span className="overflow-hidden text-ellipsis">
-              {noteData?.title || "-"}
-            </span>
-          </h2>
-          <p className="overflow-hidden text-ellipsis">
-            {noteData?.text || "-"}
-          </p>
-          {/* Date time */}
-          <p>
-            Last edit: {date instanceof Date ? date.toLocaleDateString() : "-"}
-          </p>
-        </div>
-      </div>
-
-      {open && (
-        <div>
-          <div className={styles.noteContent}>
-            {isRole && (
-              <input
-                className={styles.titleInput}
-                type="text"
-                value={title}
-                maxLength="50"
-                onChange={(e) => handleTitleInput(e)}
-              />
-            )}
-            {isRole && (
-              <textarea
-                className={styles.inputField}
-                type="text"
-                value={noteContent}
-                onChange={(e) => handleContentInput(e)}
-              />
-            )}
-            {!isRole && <h2>{title}</h2>}
-            {!isRole && <p className={styles.inputField}>{noteContent}</p>}
-            {date instanceof Date ? (
-              <div>
-                <p>Last saved at:</p>
-                <p>{date.toLocaleDateString()}</p>
-                <p>{date.toLocaleTimeString()}</p>
-              </div>
-            ) : (
-              ""
-            )}
-            {updateLoading ? <p>Saving...</p> : ""}
-            {updateError ? <p>Error saving note</p> : ""}
-            {saved && updateResult ? <p>Note saved</p> : ""}
-            {deleteLoading ? <p>Deleting...</p> : ""}
-            {deleteError ? <p>Error deleting note</p> : ""}
-            {deleteResult ? <p>Note deleted</p> : ""}
-            <div>
-              {" "}
-              {isRole && (
-                <button
-                  type="button"
-                  onClick={handleClose}
-                  className={styles.closeButton}
-                >
-                  Close
-                </button>
-              )}
-              {isRole && (
-                <button
-                  type="button"
-                  onClick={handleSave}
-                  className={styles.saveButton}
-                >
-                  Save
-                </button>
-              )}
-              {isRole && (
-                <button
-                  type="button"
-                  onClick={handleDelete}
-                  className={styles.deleteButton}
-                >
-                  Delete
-                </button>
-              )}
-              {!isRole && (
-                <button
-                  type="button"
-                  onClick={handleClose}
-                  className={styles.notRoleCloseButton}
-                >
-                  Close
-                </button>
-              )}
-            </div>
-            {showConfirm && (
-              <div
-                role="button"
-                onKeyDown={handleKeyPress}
-                tabIndex={0}
-                className={styles.overlay}
-                onClick={() => setShowConfirm(false)}
-              >
-                {" "}
-                <div className={styles.conform}>
-                  <p>Are you sure you want to delete this note?</p>
-                  <button
-                    type="button"
-                    onClick={deleteNote}
-                    className={styles.conformButton}
-                  >
-                    Yes
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => setShowConfirm(false)}
-                    className={styles.rejectButton}
-                  >
-                    No
-                  </button>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
diff --git a/frontend/src/features/playScenario/modals/NotesModal/EditPage.jsx b/frontend/src/features/playScenario/modals/NotesModal/EditPage.jsx
new file mode 100644
index 00000000..1fe4ff71
--- /dev/null
+++ b/frontend/src/features/playScenario/modals/NotesModal/EditPage.jsx
@@ -0,0 +1,214 @@
+import AuthenticationContext from "context/AuthenticationContext";
+import { useAuthDelete, useAuthGet, useAuthPut } from "hooks/crudHooks";
+import { useContext, useEffect, useState } from "react";
+import CloseIcon from "@mui/icons-material/Close";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import styles from "./Note.module.scss";
+
+export default function EditPage({ role, noteId, group, goBack, handleClose }) {
+  const { user } = useContext(AuthenticationContext);
+  const [noteContent, setContent] = useState();
+  const [title, setTitle] = useState();
+  const [date, setDate] = useState();
+  //  lock save process while saving
+  const [save, setSave] = useState(false);
+  //  check if user has same role
+  const [isRole, setRole] = useState(false);
+  //  show delete confirmation
+  const [showConfirm, setShowConfirm] = useState(false);
+  //  is the current version of the note saved
+  const [saved, setSaved] = useState(false);
+  const {
+    response: noteData,
+    loading: noteLoading,
+    error: noteError,
+    getRequest: retrieveNoteRequest,
+  } = useAuthGet(`/api/note/retrieve/${noteId}`);
+
+  const {
+    response: updateResult,
+    loading: updateLoading,
+    error: updateError,
+    putRequest: updateNoteRequest,
+  } = useAuthPut("/api/note/update");
+
+  const {
+    response: deleteResult,
+    loading: deleteLoading,
+    error: deleteError,
+    deleteRequest: deleteNoteRequest,
+  } = useAuthDelete(`/api/note/delete`);
+
+  const loadNote = async () => {
+    if (noteData) {
+      setContent(noteData.text);
+      setTitle(noteData.title);
+      if (noteData.date) {
+        const dateObject = new Date(noteData.date);
+        setDate(dateObject);
+      }
+      if (noteData.role === role) {
+        setRole(true);
+      }
+    }
+  };
+
+  async function fetchNote() {
+    await retrieveNoteRequest();
+  }
+
+  useEffect(() => {
+    loadNote();
+  }, [noteData]);
+
+  useEffect(() => {
+    fetchNote();
+  }, []);
+
+  const handleContentInput = (e) => {
+    setSaved(false);
+    setContent(e.target.value);
+  };
+
+  const handleTitleInput = (e) => {
+    setSaved(false);
+    setTitle(e.target.value);
+  };
+
+  const saveNote = async () => {
+    try {
+      await updateNoteRequest({
+        noteId,
+        text: noteContent,
+        title,
+        groupId: group._id,
+        email: user.email,
+      });
+      setSaved(true);
+    } catch (e) {
+      console.log(e);
+      throw new Error("Failed to save note");
+    }
+  };
+
+  const handleSave = async () => {
+    if (save) return;
+    setSave(true);
+    try {
+      await saveNote();
+      await fetchNote();
+    } catch (e) {
+      console.log(e);
+    } finally {
+      console.log("note updated");
+      setSave(false);
+    }
+  };
+
+  const deleteNote = async () => {
+    setShowConfirm(false);
+    try {
+      await deleteNoteRequest({
+        noteId,
+        groupId: group._id,
+        email: user.email,
+      });
+      goBack();
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const handleDelete = () => {
+    setShowConfirm(true);
+  };
+
+  return (
+    <>
+      <div className="flex w-full justify-between gap-10">
+        <input
+          className="text-2xl font-semibold grow bg-slate-50 p-2 rounded-md outline-none border-slate-150 border-2 focus:border-slate-300"
+          type="text"
+          value={title}
+          maxLength="50"
+          onChange={handleTitleInput}
+          disabled={!isRole}
+        />
+        <button type="button" onClick={goBack}>
+          <ArrowBackIcon />
+        </button>
+        <button type="button" onClick={handleClose}>
+          <CloseIcon />
+        </button>
+      </div>
+      <textarea
+        className="w-full grow bg-slate-50 p-2 rounded-md outline-none border-slate-150 border-2 focus:border-slate-300"
+        type="text"
+        value={noteContent}
+        onChange={(e) => handleContentInput(e)}
+        disabled={!isRole}
+      />
+      <div className="flex flex-row justify-between">
+        {date ? (
+          <p>
+            {`Last edit: ${date.toLocaleDateString()} at ${date.toLocaleTimeString(
+              [],
+              {
+                hour: "2-digit",
+                minute: "2-digit",
+              }
+            )}`}
+            {}
+          </p>
+        ) : (
+          ""
+        )}
+        {isRole && (
+          <div className="flex gap-10 grow flex-row-reverse">
+            <button
+              type="button"
+              onClick={handleSave}
+              className="btn vps w-[100px]"
+            >
+              Save
+            </button>
+            <button
+              type="button"
+              onClick={handleDelete}
+              className="btn vps important w-[100px]"
+            >
+              Delete
+            </button>
+          </div>
+        )}
+      </div>
+      {showConfirm && (
+        <div
+          role="button"
+          tabIndex={0}
+          className={styles.overlay}
+          onClick={() => setShowConfirm(false)}
+        >
+          {" "}
+          <div className={styles.conform}>
+            <p>Are you sure you want to delete this note?</p>
+            <button
+              type="button"
+              onClick={deleteNote}
+              className={styles.conformButton}
+            >
+              Yes
+            </button>
+            <button
+              type="button"
+              onClick={() => setShowConfirm(false)}
+              className={styles.rejectButton}
+            >
+              No
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/frontend/src/features/playScenario/components/Note/Note.module.scss b/frontend/src/features/playScenario/modals/NotesModal/Note.module.scss
similarity index 100%
rename from frontend/src/features/playScenario/components/Note/Note.module.scss
rename to frontend/src/features/playScenario/modals/NotesModal/Note.module.scss
diff --git a/frontend/src/features/playScenario/modals/NotesModal/NoteCard.jsx b/frontend/src/features/playScenario/modals/NotesModal/NoteCard.jsx
new file mode 100644
index 00000000..426e1fcd
--- /dev/null
+++ b/frontend/src/features/playScenario/modals/NotesModal/NoteCard.jsx
@@ -0,0 +1,22 @@
+const NoteCard = ({ title, role, text, date, onClick }) => {
+  return (
+    <div
+      className="card bg-slate-50 w-60 h-40 shadow-md cursor-pointer border-2 border-slate-50 hover:border-slate-300 "
+      onClick={onClick}
+    >
+      <div className="card-body p-5">
+        <h2 className="card-title overflow-hidden text-ellipsis text-nowrap">
+          <span className="capitalize">[{role || "-"}]</span>
+          <span className="overflow-hidden text-ellipsis">{title || "-"}</span>
+        </h2>
+        <p className="overflow-hidden text-ellipsis">{text || "-"}</p>
+        {/* Date time */}
+        <p>
+          {`Last edit: ${date ? new Date(date).toLocaleDateString() : "-"}`}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default NoteCard;
diff --git a/frontend/src/features/playScenario/modals/NotesModal/NotesModal.jsx b/frontend/src/features/playScenario/modals/NotesModal/NotesModal.jsx
index 39cd0938..44df2b1d 100644
--- a/frontend/src/features/playScenario/modals/NotesModal/NotesModal.jsx
+++ b/frontend/src/features/playScenario/modals/NotesModal/NotesModal.jsx
@@ -1,82 +1,31 @@
 import { useAuthGet, useAuthPost } from "hooks/crudHooks";
 import { useEffect, useState } from "react";
 
-import { Add } from "@material-ui/icons";
-import Note from "../../components/Note/Note";
 import styles from "./NotesModal.module.scss";
+import ViewPage from "./ViewPage.jsx";
+import EditPage from "./EditPage";
 
 export default function NotesModal({ group, user, handleClose }) {
-  const [notes, setNotes] = useState([]);
-  const [userRole, setRole] = useState(null);
-  const {
-    response: groupData,
-    loading: groupLoading,
-    error: groupError,
-    getRequest: retrieveGroupRequest,
-  } = useAuthGet(`/api/group/retrieve/${group._id}`);
+  const [content, setContent] = useState("");
+  const [role, setRole] = useState(null);
 
-  const {
-    response: createResponse,
-    loading: noteCreating,
-    error: createError,
-    postRequest: createNoteRequest,
-  } = useAuthPost("/api/note/");
-
-  async function loadNotes() {
-    if (!groupData) {
-      return;
-    }
-    const noteList = Object.entries(groupData.notes).flatMap(([role, ids]) =>
-      ids.map((id) => ({ role, id }))
-    );
-    setNotes(noteList);
-  }
+  const handleKeyPress = (e) => {
+    if (e.key === "Escape") handleClose();
+  };
 
   useEffect(() => {
-    loadNotes();
-  }, [groupData]);
-
-  // refetch group data to get updated notes
-  async function fetchNotesData() {
-    await retrieveGroupRequest();
-  }
+    document.addEventListener("keydown", handleKeyPress);
+    return () => document.removeEventListener("keydown", handleKeyPress);
+  }, []);
 
   useEffect(() => {
-    // Check roles
     group.users.forEach((userToCheck) => {
       if (userToCheck.email === user.email) {
         setRole(userToCheck.role);
       }
     });
-
-    fetchNotesData();
-  }, []);
-
-  const handleKeyPress = (e) => {
-    if (e.key === "Escape") {
-      handleClose();
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener("keydown", handleKeyPress);
-    return () => {
-      document.removeEventListener("keydown", handleKeyPress);
-    };
   }, []);
 
-  const handleCreate = async () => {
-    if (!userRole) {
-      return;
-    }
-    await createNoteRequest({
-      groupId: group._id,
-      title: "New Note",
-      email: user.email,
-    });
-    fetchNotesData();
-  };
-
   return (
     <>
       <div>
@@ -88,33 +37,25 @@ export default function NotesModal({ group, user, handleClose }) {
           onKeyDown={handleKeyPress}
           aria-label="Close Card"
         />
-
         <div className={styles.noteCard}>
-          {groupLoading ? <div>Loading...</div> : ""}
-          {groupError ? <div>Error loading notes</div> : ""}
-          {noteCreating ? <div>Creating note...</div> : ""}
-          {createError ? <div>Error creating note</div> : ""}
-          {createResponse ? <div>Note created</div> : ""}
-          <div className={styles.notesContainer}>
-            {notes.map((note) => (
-              <Note
-                key={note.id}
-                role={note.role}
-                noteId={note.id}
+          <div className="flex flex-col gap-5 w-full">
+            {!content ? (
+              <ViewPage
                 group={group}
                 user={user}
-                refetchGroup={fetchNotesData}
+                role={role}
+                setContent={setContent}
+                handleClose={handleClose}
+              />
+            ) : (
+              <EditPage
+                noteId={content}
+                group={group}
+                role={role}
+                goBack={() => setContent("")}
+                handleClose={handleClose}
               />
-            ))}
-            <div
-              className="card bg-slate-50 w-60 h-40 shadow-xl cursor-pointer hover:border-2 border-slate-300"
-              onClick={handleCreate}
-              onKeyDown={handleKeyPress}
-            >
-              <div className="card-body flex justify-center items-center text-slate-500">
-                <Add fontSize="large" />
-              </div>
-            </div>
+            )}
           </div>
         </div>
       </div>
diff --git a/frontend/src/features/playScenario/modals/NotesModal/NotesModal.module.scss b/frontend/src/features/playScenario/modals/NotesModal/NotesModal.module.scss
index ff18acc8..f22e1491 100644
--- a/frontend/src/features/playScenario/modals/NotesModal/NotesModal.module.scss
+++ b/frontend/src/features/playScenario/modals/NotesModal/NotesModal.module.scss
@@ -8,7 +8,7 @@
   justify-content: left;
   background-color: rgb(255, 255, 255);
   border: 5px solid #515151;
-  padding: 20px;
+  padding: 40px;
   border-radius: 13px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   visibility: "visible";
diff --git a/frontend/src/features/playScenario/modals/NotesModal/ViewPage.jsx b/frontend/src/features/playScenario/modals/NotesModal/ViewPage.jsx
new file mode 100644
index 00000000..045da9fb
--- /dev/null
+++ b/frontend/src/features/playScenario/modals/NotesModal/ViewPage.jsx
@@ -0,0 +1,74 @@
+import { useAuthGet, useAuthPost } from "hooks/crudHooks";
+import { useEffect, useState } from "react";
+
+import { Add } from "@material-ui/icons";
+import NoteCard from "./NoteCard.jsx";
+import CloseIcon from "@mui/icons-material/Close";
+
+export default function ViewPage({
+  group,
+  user,
+  role,
+  setContent,
+  handleClose,
+}) {
+  const [notes, setNotes] = useState([]);
+
+  const {
+    response: groupData,
+    loading: groupLoading,
+    error: groupError,
+    getRequest: retrieveNotes,
+  } = useAuthGet(`/api/note/retrieveAll/${group._id}`, setNotes);
+
+  const {
+    response: createResponse,
+    loading: noteCreating,
+    error: createError,
+    postRequest: createNoteRequest,
+  } = useAuthPost("/api/note/");
+
+  useEffect(() => {
+    retrieveNotes();
+  }, []);
+
+  const handleCreate = async () => {
+    if (!role) return;
+
+    await createNoteRequest({
+      groupId: group._id,
+      title: "New Note",
+      email: user.email,
+    });
+
+    retrieveNotes();
+  };
+
+  return (
+    <>
+      <div className="flex w-full justify-between">
+        <h2 className="text-2xl font-semibold">Notes</h2>
+        <button type="button" onClick={handleClose}>
+          <CloseIcon />
+        </button>
+      </div>
+      <div className="flex flex-wrap gap-10 h-fit">
+        {notes.map((note) => (
+          <NoteCard
+            key={note.id}
+            {...note}
+            onClick={() => setContent(note._id)}
+          />
+        ))}
+        <div
+          className="card bg-slate-50 w-60 h-40 shadow-md cursor-pointer hover:border-2 border-slate-300"
+          onClick={handleCreate}
+        >
+          <div className="card-body flex justify-center items-center text-slate-500">
+            <Add fontSize="large" />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}