diff --git a/backend/src/db/daos/groupDao.js b/backend/src/db/daos/groupDao.js
index 9dfc1d34..88043cfb 100644
--- a/backend/src/db/daos/groupDao.js
+++ b/backend/src/db/daos/groupDao.js
@@ -4,7 +4,8 @@ import Group from "../models/group";
 import Scene from "../models/scene";
 
 const getGroup = async (groupId) => {
-  return await Group.findById(groupId);
+  const group = await Group.findById(groupId);
+  return group;
 };
 
 const getGroupByScenarioId = async (SId) => {
diff --git a/backend/src/db/daos/noteDao.js b/backend/src/db/daos/noteDao.js
index 17f6d532..b3084fdd 100644
--- a/backend/src/db/daos/noteDao.js
+++ b/backend/src/db/daos/noteDao.js
@@ -25,15 +25,12 @@ const createNote = async (groupId, title, role, text = "") => {
  */
 const deleteNote = async (noteId, groupId) => {
   const note = await Note.findById(noteId);
-  console.log("note:", note);
-  console.log("groupId:", groupId);
   const updateQuery = {
     $pull: { [`notes.${note.role}`]: noteId },
   };
 
   //  delete note from group
-  let res = await Group.updateOne({ _id: groupId }, updateQuery);
-  console.log(res);
+  await Group.updateOne({ _id: groupId }, updateQuery);
   //  delete note from note collection
   await note.delete();
 };
diff --git a/frontend/src/components/Note.jsx b/frontend/src/components/Note.jsx
index 2ee02883..e560df8c 100644
--- a/frontend/src/components/Note.jsx
+++ b/frontend/src/components/Note.jsx
@@ -9,6 +9,7 @@ export default function Note({ role, id, group, user, refetchGroup }) {
   const [open, setOpen] = useState(false);
   const [save, setSave] = useState(false);
   const [isRole, setRole] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
   const [date, setDate] = useState();
 
   const checkRole = () => {
@@ -82,9 +83,8 @@ export default function Note({ role, id, group, user, refetchGroup }) {
     setOpen(false);
   };
 
-  const handleDelete = async () => {
-    const res = window.confirm("Are you sure you want to delete this note?");
-    if (!res) return;
+  const deleteNote = async () => {
+    setShowConfirm(false);
     try {
       await usePost("/api/note/delete", { noteId: id, groupId: group._id });
       refetchGroup();
@@ -95,6 +95,10 @@ export default function Note({ role, id, group, user, refetchGroup }) {
     }
   };
 
+  const handleDelete = () => {
+    setShowConfirm(true);
+  };
+
   const handleKeyPress = (e) => {
     if (e.key === "Escape") {
       handleClose();
@@ -195,6 +199,34 @@ export default function Note({ role, id, group, user, refetchGroup }) {
                 </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/styling/Note.module.scss b/frontend/src/styling/Note.module.scss
index ac5bcde6..602d683e 100644
--- a/frontend/src/styling/Note.module.scss
+++ b/frontend/src/styling/Note.module.scss
@@ -225,3 +225,70 @@
   margin: 2px 0;
   padding: 0;
 }
+
+.conform {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-wrap: wrap;
+  background-color: rgb(255, 255, 255);
+  border: 5px solid #515151;
+  padding: 20px;
+  border-radius: 13px;
+  visibility: "visible";
+  opacity: 1;
+  width: 50%;
+  height: 50%;
+  flex-direction: column;
+  z-index: 10;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9;
+}
+
+.conformButton {
+  position: fixed;
+  bottom: 150px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 25%;
+  height: 40px;
+  border-radius: 5px;
+  color: rgb(0, 0, 0);
+  transition-duration: 0.4s;
+  text-align: center;
+  border: none;
+  background-color: #97d5f0;
+}
+
+.conformButton:hover {
+  width: 50%;
+}
+
+.rejectButton {
+  position: fixed;
+  bottom: 50px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 25%;
+  height: 40px;
+  border-radius: 5px;
+  color: rgb(0, 0, 0);
+  transition-duration: 0.4s;
+  text-align: center;
+  border: none;
+  background-color: #97d5f0;
+}
+
+.rejectButton:hover {
+  width: 50%;
+}