diff --git a/docs/components/AnchorModal.jsx b/docs/components/AnchorModal.jsx
new file mode 100644
index 00000000..a12f01e5
--- /dev/null
+++ b/docs/components/AnchorModal.jsx
@@ -0,0 +1,42 @@
+import { useState } from 'react'
+import PropTypes from 'prop-types'
+
+import Modal from '@/components/Modal'
+
+function AnchorModal({
+  children,
+  anchorText = 'Click Me',
+  modalTitle
+}) {
+  const [isModalOpen, setModalOpen] = useState(false)
+
+  return (
+    <>
+      <a
+        href="#"
+        className="underline hover:text-blue-600"
+        onClick={(e) => {
+          e.preventDefault()
+          setModalOpen(prev => !prev)
+        }}>
+        {anchorText}
+      </a>
+
+      <Modal
+        title={modalTitle ?? anchorText}
+        isOpen={isModalOpen}
+        onClose={() => setModalOpen(prev => !prev)}
+      >
+        {children}
+      </Modal>
+    </>
+  )
+}
+
+AnchorModal.propTypes = {
+  children: PropTypes.node,
+  anchorText: PropTypes.string,
+  modalTitle: PropTypes.string
+}
+
+export default AnchorModal
diff --git a/docs/components/Modal/index.jsx b/docs/components/Modal/index.jsx
new file mode 100644
index 00000000..9e5bcb50
--- /dev/null
+++ b/docs/components/Modal/index.jsx
@@ -0,0 +1,47 @@
+import { useMemo } from 'react'
+import { useTheme } from 'next-themes'
+import PropTypes from 'prop-types'
+
+function Modal({ children, title, isOpen = false, onClose }) {
+  const { resolvedTheme } = useTheme()
+
+  const modalBgStyle = useMemo(() => {
+    const bg = resolvedTheme === 'dark'
+      ? 'bg-neutral-800'
+      : 'bg-neutral-50'
+
+    return `${bg} rounded-lg shadow-lg p-6 max-w-md w-full`
+  }, [resolvedTheme])
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+      <div className={modalBgStyle}>
+        <h2 className="text-xl font-semibold mb-4">
+          {title}
+        </h2>
+
+        {children}
+
+        <div className="flex justify-end mt-4">
+          <button
+            onClick={onClose}
+            className="bg-neutral-500 text-white rounded-lg px-4 py-2 hover:bg-neutral-600 transition duration-200"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+Modal.propTypes = {
+  children: PropTypes.node,
+  title: PropTypes.string,
+  isOpen: PropTypes.bool,
+  onClose: PropTypes.func
+}
+
+export default Modal
diff --git a/docs/components/Modal/modal.css b/docs/components/Modal/modal.css
new file mode 100644
index 00000000..8ac81db5
--- /dev/null
+++ b/docs/components/Modal/modal.css
@@ -0,0 +1,19 @@
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-content {
+  background: white;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
\ No newline at end of file
diff --git a/docs/pages/articles/provinces-municipalities.mdx b/docs/pages/articles/provinces-municipalities.mdx
index 1d6ed3a0..ee714874 100644
--- a/docs/pages/articles/provinces-municipalities.mdx
+++ b/docs/pages/articles/provinces-municipalities.mdx
@@ -12,8 +12,8 @@ export function FAQBox({ title, children, open = false }) {
 
   const detailsBgStyle = useMemo(() => {
     const bg = resolvedTheme === 'dark'
-    ? 'bg-neutral-800'
-    : 'bg-neutral-50'
+      ? 'bg-neutral-800'
+      : 'bg-neutral-50'
 
     return `last-of-type:mb-0 rounded-lg ${bg} p-2 mt-4`
   }, [resolvedTheme])
diff --git a/docs/pages/changelog.mdx b/docs/pages/changelog.mdx
index 8ed74989..7034130f 100644
--- a/docs/pages/changelog.mdx
+++ b/docs/pages/changelog.mdx
@@ -12,8 +12,8 @@ export function FAQBoxError({ title, children, open = false }) {
 
   const detailsBgStyle = useMemo(() => {
     const bg = resolvedTheme === 'dark'
-    ? 'nx-bg-red-900/30'
-    : 'nx-bg-red-100'
+      ? 'nx-bg-red-900/30'
+      : 'nx-bg-red-100'
 
     return {
       details: `nx-overflow-x-auto nx-mt-6 nx-flex nx-rounded-lg nx-border nx-py-2 ltr:nx-pr-4 rtl:nx-pl-4 contrast-more:nx-border-current contrast-more:dark:nx-border-current nx-border-red-200 nx-bg-red-100 nx-text-red-900 dark:nx-border-red-200/30 dark:nx-bg-red-900/30 dark:nx-text-red-200`,
@@ -59,11 +59,11 @@ Version 2.0 and later versions may have new requirements that will thrive on new
 </Callout>
 
 <FAQBoxError title="💀 Version 2.0 - 2.1 Security Technical Debts:">
-1. **Lenient use of the Firestore database:** Inadvertently allows unvalidated input in new collections via Firestore REST APIs outside the front end, bypassing the intended front-end controls. This issue, not present in Version 1.0, began with Version 2.0 using methods to speed up the development process and feature delivery. We are addressing this in future updates.
-2. **Validation of crop recommendations WYSIWYG HTML input:** This is necessary to mitigate Cross-Site Scripting (XSS) attacks (related to the above issue), which also arose from new development approaches in Version 2.0. Enhancements to security will be implemented in future releases.
-3. **Crop recommendations data integrity:** Ensuring unaltered data presentation in PDF bulletins, resulting from the issues identified in items 1 and 2.
+1. **Flexible Firestore Database Use:** Version 2.0+ adopted a more flexible approach for handling data management, facilitating faster feature development. However, this shift also introduced the potential for data to enter the database without the usual front-end controls through the Firestore REST APIs. While this was not an issue in Version 1.0, it emerged as part of the effort to enhance development speed and feature delivery starting with Version 2.0.
+2. **Cross-Site Scripting (XSS) Vulnerability in Crop Recommendations:** Related to item 1, the new process for editing WYSIWYG HTML-form crop recommendations input may allow unsafe or inaccurate content due to limited validation. Risks associated with this were recognized early in the process, but the focus on delivering core features led to a delay in integrating security measures. Additionally, the smaller scope of the project contributed to a perception that it might not require the same level of thorough security measures typically expected in larger-scale projects.
+3. **Crop recommendations data integrity:** Ensuring that data presentations in PDF bulletins remain unaltered, trustworthy, and accurate is crucial for users and future developers. This priority stems from the concerns identified in items 1 and 2.
 
-> These issues, brought to the attention of the current active ACAP Maintainer during the early stages of 2.0 development, are to be resolved and addressed within their available time and schedule in the current ACAP timeline or the new ACAP iterations.
+> These issues, raised during the early 2.0 development phase, have been communicated to the new main ACAP Maintainer, who is also the primary developer leading the creation and enhancement of new features for Version 2.0. The Maintainer has made decisions for balancing development speed with feature delivery, reflecting their understanding of the project's scope and the perceived security needs. They are open to addressing these issues as time and priorities allow within the ACAP project timeline.
 </FAQBoxError>
 
 <br />
diff --git a/docs/pages/security.mdx b/docs/pages/security.mdx
index f5817bba..4bdf5756 100644
--- a/docs/pages/security.mdx
+++ b/docs/pages/security.mdx
@@ -1,4 +1,6 @@
+import { useEffect, useState } from 'react'
 import { Callout, Steps } from 'nextra/components'
+import AnchorModal from '@/components/AnchorModal'
 
 # Security Guidelines
 
@@ -13,7 +15,14 @@ ACAP adheres to strict security practices as defined by its technology stack, st
 1. Manually test and ensure using the [Firestore Web API](https://firebase.google.com/docs/firestore/quickstart) and [Firestore REST APIs](https://firebase.google.com/docs/firestore/use-rest-api) that:
    - (a) Signed-in users cannot perform **CREATE/EDIT/DELETE** operations in the Firestore collections and documents defined in the Firestore Rules.
       <Callout type="warning">
-      NOTE: If there is a need to perform **CREATE/EDIT/DELETE** operations _**"directly"**_ in the Firestore collections or documents using the [Firestore Web API](https://firebase.google.com/docs/firestore/quickstart) or [Firestore REST APIs](https://firebase.google.com/docs/firestore/use-rest-api), please ensure the creation and testing of robust, new [Firestore Rules](https://firebase.google.com/docs/firestore/security/get-started) that will meet the "new" requirements (ACAP <span className="text-xl font-bold text-red-600">1.0</span> only performs such operations thru the [backend NodeJS REST APIs](/directories/server), **Database #2**, **Database #3**). This ensures manageable security and safety, preventing security breaches like the cross-site scripting (XSS) attack example detailed [here](https://www.youtube.com/watch?v=b9UZ6_OCTaY).
+      NOTE: If there is a need to perform **CREATE/EDIT/DELETE** operations _**"directly"**_ in the Firestore collections or documents using the [Firestore Web API](https://firebase.google.com/docs/firestore/quickstart) or [Firestore REST APIs](https://firebase.google.com/docs/firestore/use-rest-api), please ensure the creation and testing of robust, new [Firestore Rules](https://firebase.google.com/docs/firestore/security/get-started) that will meet the "new" requirements (ACAP <span className="text-xl font-bold text-red-600">1.0</span> only performs such operations thru the [backend NodeJS REST APIs](/directories/server), **Database #2**, **Database #3**). This ensures manageable security and safety, preventing security breaches like the cross-site scripting (XSS) attack example detailed at:<br /><br />
+      <AnchorModal
+        anchorText="XSS Vulnerability Awareness in ACAP 2.0"
+      >
+         A YouTube video detailing steps for exploiting XSS vulnerabilities in the **ACAP 2.0 crop recommendations** at https://www.youtube.com/watch?v=b9UZ6_OCTaY has been set to private permissions to limit exposure. This video is a resource for understanding the security challenges associated with these vulnerabilities and ACAP, which occurred starting on **version 2.0** due to new development approaches and priorities.
+
+         For ACAP Maintainers or developers interested in exploring the content, please contact the current active ACAP Maintainer(s) for an invitation to access the video. Engaging with this material can provide insights into the security considerations that have been acknowledged and inform future enhancements to the system's security measures.
+      </AnchorModal>
       </Callout>
    - (b) Signed-in users cannot **CREATE** new Firestore collections and documents
    - (c) Public users without sign-in authentication cannot **VIEW** sensitive information such as phonebook contacts and email information