diff --git a/package.json b/package.json
index 79380f144f..8d98545d6b 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "mathjs": "^11.12.0",
     "p5": "^1.9.0",
     "react": "^18.2.0",
+    "react-chatbot-kit": "^2.2.2",
     "react-codemirror2": "^7.3.0",
     "react-color": "^2.19.3",
     "react-confetti": "^6.1.0",
diff --git a/src/plays/schulte-tables/components/SchulteTable.jsx b/src/plays/schulte-tables/components/SchulteTable.jsx
index 623456388d..b7c7b9eec6 100644
--- a/src/plays/schulte-tables/components/SchulteTable.jsx
+++ b/src/plays/schulte-tables/components/SchulteTable.jsx
@@ -10,7 +10,7 @@ const SchulteTable = ({ nextNumber, setNextNumber, data, setStart, start, setRes
 
   return (
     <section>
-      <div className="flex">
+      <div className="schulte-table-flex">
         <h1>
           Time:{' '}
           <Timer nextNumber={nextNumber} setResult={setResult} setStart={setStart} start={start} />
diff --git a/src/plays/schulte-tables/styles.css b/src/plays/schulte-tables/styles.css
index 0fae1b5c1e..471d79bd4c 100644
--- a/src/plays/schulte-tables/styles.css
+++ b/src/plays/schulte-tables/styles.css
@@ -29,7 +29,7 @@
   cursor: pointer;
 }
 
-.flex {
+.schulte-table-flex {
   display: flex;
   margin: 0 auto;
   justify-content: space-between;
diff --git a/src/plays/zoomlogin/Readme.md b/src/plays/zoomlogin/Readme.md
new file mode 100644
index 0000000000..36c61ed82a
--- /dev/null
+++ b/src/plays/zoomlogin/Readme.md
@@ -0,0 +1,30 @@
+# zoomlogin
+
+Clone project for the zoom login page and the help chatbot
+
+## Play Demographic
+
+- Language: js
+- Level: Intermediate
+
+## Creator Information
+
+- User: day-lee
+- Gihub Link: https://github.com/day-lee
+- Blog:
+- Video:
+
+## Implementation Details
+
+- Login form validation
+- Help chatbot, customizing the React-Chatbot-Library
+- Responsive design to display ads or Zoom images based on screen size
+- Accessibility features, including form submission via Enter key, alt attributes, aria-labels, and button hover saturation changes
+
+## Consideration
+
+Update all considerations(if any)
+
+## Resources
+
+react-chatbot-kit
diff --git a/src/plays/zoomlogin/Zoomlogin.js b/src/plays/zoomlogin/Zoomlogin.js
new file mode 100644
index 0000000000..a16ba5b769
--- /dev/null
+++ b/src/plays/zoomlogin/Zoomlogin.js
@@ -0,0 +1,24 @@
+import PlayHeader from 'common/playlists/PlayHeader';
+import './styles.css';
+
+import App from 'plays/zoomlogin/components/App';
+
+// WARNING: Do not change the entry componenet name
+function Zoomlogin(props) {
+  // Your Code Start below.
+
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={props} />
+        <div className="play-details-body">
+          {/* Your Code Starts Here */}
+          <App />
+          {/* Your Code Ends Here */}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Zoomlogin;
diff --git a/src/plays/zoomlogin/assets/cancelCircle.svg b/src/plays/zoomlogin/assets/cancelCircle.svg
new file mode 100644
index 0000000000..8ac5e80811
--- /dev/null
+++ b/src/plays/zoomlogin/assets/cancelCircle.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="64px" height="64px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <title>cancel</title> <path d="M10.771 8.518c-1.144 0.215-2.83 2.171-2.086 2.915l4.573 4.571-4.573 4.571c-0.915 0.915 1.829 3.656 2.744 2.742l4.573-4.571 4.573 4.571c0.915 0.915 3.658-1.829 2.744-2.742l-4.573-4.571 4.573-4.571c0.915-0.915-1.829-3.656-2.744-2.742l-4.573 4.571-4.573-4.571c-0.173-0.171-0.394-0.223-0.657-0.173v0zM16 1c-8.285 0-15 6.716-15 15s6.715 15 15 15 15-6.716 15-15-6.715-15-15-15zM16 4.75c6.213 0 11.25 5.037 11.25 11.25s-5.037 11.25-11.25 11.25-11.25-5.037-11.25-11.25c0.001-6.213 5.037-11.25 11.25-11.25z"/> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/plays/zoomlogin/assets/chatbot/cancelCircle.svg b/src/plays/zoomlogin/assets/chatbot/cancelCircle.svg
new file mode 100644
index 0000000000..227f63528c
--- /dev/null
+++ b/src/plays/zoomlogin/assets/chatbot/cancelCircle.svg
@@ -0,0 +1,12 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="64px" height="64px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
+<g id="SVGRepo_iconCarrier"> <title>cancel</title> <path d="M10.771 8.518c-1.144 0.215-2.83 2.171-2.086 2.915l4.573 4.571-4.573 4.571c-0.915 0.915 1.829 3.656 2.744 2.742l4.573-4.571 4.573 4.571c0.915 0.915 3.658-1.829 2.744-2.742l-4.573-4.571 4.573-4.571c0.915-0.915-1.829-3.656-2.744-2.742l-4.573 4.571-4.573-4.571c-0.173-0.171-0.394-0.223-0.657-0.173v0zM16 1c-8.285 0-15 6.716-15 15s6.715 15 15 15 15-6.716 15-15-6.715-15-15-15zM16 4.75c6.213 0 11.25 5.037 11.25 11.25s-5.037 11.25-11.25 11.25-11.25-5.037-11.25-11.25c0.001-6.213 5.037-11.25 11.25-11.25z"/> </g>
+
+</svg>
\ No newline at end of file
diff --git a/src/plays/zoomlogin/assets/chatbot/document-new-svgrepo-com.svg b/src/plays/zoomlogin/assets/chatbot/document-new-svgrepo-com.svg
new file mode 100644
index 0000000000..af4037f886
--- /dev/null
+++ b/src/plays/zoomlogin/assets/chatbot/document-new-svgrepo-com.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <rect width="24" height="24" fill="white"/> <path d="M13 3L16 6L19 9M13 3L5 3L5 21L19 21L19 9M13 3L13 9L19 9" stroke="#868383" stroke-linejoin="round"/> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/plays/zoomlogin/assets/chatbot/document-svgrepo-com.svg b/src/plays/zoomlogin/assets/chatbot/document-svgrepo-com.svg
new file mode 100644
index 0000000000..38f6a90647
--- /dev/null
+++ b/src/plays/zoomlogin/assets/chatbot/document-svgrepo-com.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6 1C4.34315 1 3 2.34315 3 4V20C3 21.6569 4.34315 23 6 23H18C19.6569 23 21 21.6569 21 20V8.82843C21 8.03278 20.6839 7.26972 20.1213 6.70711L15.2929 1.87868C14.7303 1.31607 13.9672 1 13.1716 1H6ZM5 4C5 3.44772 5.44772 3 6 3H12V8C12 9.10457 12.8954 10 14 10H19V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20V4ZM18.5858 8L14 3.41421V8H18.5858Z" fill="#9e9e9e"/> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/plays/zoomlogin/assets/chatbot/down-arrow.svg b/src/plays/zoomlogin/assets/chatbot/down-arrow.svg
new file mode 100644
index 0000000000..9e4d37cd5c
--- /dev/null
+++ b/src/plays/zoomlogin/assets/chatbot/down-arrow.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#757575" height="64px" width="64px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 330" xml:space="preserve" stroke="#757575" stroke-width="0.0033">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path id="XMLID_225_" d="M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393 c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393 s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z"/> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/plays/zoomlogin/assets/chatbot/downloadArrow.svg b/src/plays/zoomlogin/assets/chatbot/downloadArrow.svg
new file mode 100644
index 0000000000..84fa6d0fbd
--- /dev/null
+++ b/src/plays/zoomlogin/assets/chatbot/downloadArrow.svg
@@ -0,0 +1,12 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
+<g id="SVGRepo_iconCarrier"> <g id="Interface / Download"> <path id="Vector" d="M6 21H18M12 3V17M12 17L17 12M12 17L7 12" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g> </g>
+
+</svg>
\ No newline at end of file
diff --git a/src/plays/zoomlogin/assets/chatbot/microphone.svg b/src/plays/zoomlogin/assets/chatbot/microphone.svg
new file mode 100644
index 0000000000..ba23504755
--- /dev/null
+++ b/src/plays/zoomlogin/assets/chatbot/microphone.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="64px" width="64px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.00 512.00" xml:space="preserve" stroke="#000000" stroke-width="0.00512">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <g> <g> <g> <path d="M426.667,213.333c-11.782,0-21.333,9.551-21.333,21.333V256c0,82.469-66.865,149.333-149.333,149.333 S106.667,338.469,106.667,256v-21.333c0-11.782-9.551-21.333-21.333-21.333c-11.782,0-21.333,9.551-21.333,21.333V256 c0,98.821,74.674,180.199,170.667,190.814v22.519H192c-11.782,0-21.333,9.551-21.333,21.333S180.218,512,192,512h128 c11.782,0,21.333-9.551,21.333-21.333s-9.551-21.333-21.333-21.333h-42.667v-22.519C373.326,436.199,448,354.821,448,256v-21.333 C448,222.885,438.449,213.333,426.667,213.333z"/> <path d="M256,384c70.683,0,128-57.317,128-128V128C384,57.317,326.683,0,256,0S128,57.317,128,128v128 C128,326.683,185.317,384,256,384z M170.667,128c0-47.119,38.214-85.333,85.333-85.333S341.333,80.881,341.333,128v128 c0,47.119-38.214,85.333-85.333,85.333S170.667,303.119,170.667,256V128z"/> </g> </g> </g> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/plays/zoomlogin/assets/chatbot/smile-circle-svgrepo-com.svg b/src/plays/zoomlogin/assets/chatbot/smile-circle-svgrepo-com.svg
new file mode 100644
index 0000000000..30004746bf
--- /dev/null
+++ b/src/plays/zoomlogin/assets/chatbot/smile-circle-svgrepo-com.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75ZM1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM8.39747 15.5534C8.64413 15.2206 9.11385 15.1508 9.44661 15.3975C10.175 15.9373 11.0541 16.25 12 16.25C12.9459 16.25 13.825 15.9373 14.5534 15.3975C14.8862 15.1508 15.3559 15.2206 15.6025 15.5534C15.8492 15.8862 15.7794 16.3559 15.4466 16.6025C14.4742 17.3233 13.285 17.75 12 17.75C10.715 17.75 9.5258 17.3233 8.55339 16.6025C8.22062 16.3559 8.15082 15.8862 8.39747 15.5534Z" fill="#868383"/> <path d="M16 10.5C16 11.3284 15.5523 12 15 12C14.4477 12 14 11.3284 14 10.5C14 9.67157 14.4477 9 15 9C15.5523 9 16 9.67157 16 10.5Z" fill="#868383"/> <path d="M10 10.5C10 11.3284 9.55229 12 9 12C8.44772 12 8 11.3284 8 10.5C8 9.67157 8.44772 9 9 9C9.55229 9 10 9.67157 10 10.5Z" fill="#868383"/> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/plays/zoomlogin/assets/chatbot/zoomsupport.png b/src/plays/zoomlogin/assets/chatbot/zoomsupport.png
new file mode 100644
index 0000000000..8f03dda2bc
Binary files /dev/null and b/src/plays/zoomlogin/assets/chatbot/zoomsupport.png differ
diff --git a/src/plays/zoomlogin/assets/circle-information-svgrepo-com.svg b/src/plays/zoomlogin/assets/circle-information-svgrepo-com.svg
new file mode 100644
index 0000000000..cc5aacbdcb
--- /dev/null
+++ b/src/plays/zoomlogin/assets/circle-information-svgrepo-com.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 8H12.01M12 11V16M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/plays/zoomlogin/assets/down-arrow.svg b/src/plays/zoomlogin/assets/down-arrow.svg
new file mode 100644
index 0000000000..9e4d37cd5c
--- /dev/null
+++ b/src/plays/zoomlogin/assets/down-arrow.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#757575" height="64px" width="64px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 330" xml:space="preserve" stroke="#757575" stroke-width="0.0033">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path id="XMLID_225_" d="M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393 c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393 s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z"/> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/plays/zoomlogin/assets/downloadArrow.svg b/src/plays/zoomlogin/assets/downloadArrow.svg
new file mode 100644
index 0000000000..e4dbd99dda
--- /dev/null
+++ b/src/plays/zoomlogin/assets/downloadArrow.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <g id="Interface / Download"> <path id="Vector" d="M6 21H18M12 3V17M12 17L17 12M12 17L7 12" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/plays/zoomlogin/assets/eye-password-hide-svgrepo-com.svg b/src/plays/zoomlogin/assets/eye-password-hide-svgrepo-com.svg
new file mode 100644
index 0000000000..2db4988e1c
--- /dev/null
+++ b/src/plays/zoomlogin/assets/eye-password-hide-svgrepo-com.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 2L22 22" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.71277 6.7226C3.66479 8.79527 2 12 2 12C2 12 5.63636 19 12 19C14.0503 19 15.8174 18.2734 17.2711 17.2884M11 5.05822C11.3254 5.02013 11.6588 5 12 5C18.3636 5 22 12 22 12C22 12 21.3082 13.3317 20 14.8335" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 14.2362C13.4692 14.7112 12.7684 15.0001 12 15.0001C10.3431 15.0001 9 13.657 9 12.0001C9 11.1764 9.33193 10.4303 9.86932 9.88818" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/plays/zoomlogin/assets/eye-password-show-svgrepo-com.svg b/src/plays/zoomlogin/assets/eye-password-show-svgrepo-com.svg
new file mode 100644
index 0000000000..4c26f86eb3
--- /dev/null
+++ b/src/plays/zoomlogin/assets/eye-password-show-svgrepo-com.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 12C1 12 5 20 12 20C19 20 23 12 23 12" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="12" cy="12" r="3" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/plays/zoomlogin/assets/icons8-linkedin.svg b/src/plays/zoomlogin/assets/icons8-linkedin.svg
new file mode 100644
index 0000000000..6c362c319d
--- /dev/null
+++ b/src/plays/zoomlogin/assets/icons8-linkedin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><path fill="#0078d4" d="M24,4C12.954,4,4,12.954,4,24s8.954,20,20,20s20-8.954,20-20S35.046,4,24,4z"/><path d="M30,35v-9c0-1.103-0.897-2-2-2s-2,0.897-2,2v9h-6V18h6v1.027C27.04,18.359,28.252,18,29.5,18	c3.584,0,6.5,2.916,6.5,6.5V35H30z M13,35V18h2.966C14.247,18,13,16.738,13,14.999C13,13.261,14.267,12,16.011,12	c1.696,0,2.953,1.252,2.989,2.979C19,16.733,17.733,18,15.988,18H19v17H13z" opacity=".05"/><path d="M30.5,34.5V26c0-1.378-1.121-2.5-2.5-2.5s-2.5,1.122-2.5,2.5v8.5h-5v-16h5v1.534	c1.09-0.977,2.512-1.534,4-1.534c3.309,0,6,2.691,6,6v10H30.5z M13.5,34.5v-16h5v16H13.5z M15.966,17.5	c-1.429,0-2.466-1.052-2.466-2.501c0-1.448,1.056-2.499,2.511-2.499c1.436,0,2.459,1.023,2.489,2.489	c0,1.459-1.057,2.511-2.512,2.511H15.966z" opacity=".07"/><path fill="#fff" d="M14,19h4v15h-4V19z M15.988,17h-0.022C14.772,17,14,16.11,14,14.999C14,13.864,14.796,13,16.011,13	c1.217,0,1.966,0.864,1.989,1.999C18,16.11,17.228,17,15.988,17z M35,24.5c0-3.038-2.462-5.5-5.5-5.5	c-1.862,0-3.505,0.928-4.5,2.344V19h-4v15h4v-8c0-1.657,1.343-3,3-3s3,1.343,3,3v8h4C35,34,35,24.921,35,24.5z"/></svg>
\ No newline at end of file
diff --git a/src/plays/zoomlogin/assets/microphone.svg b/src/plays/zoomlogin/assets/microphone.svg
new file mode 100644
index 0000000000..ba23504755
--- /dev/null
+++ b/src/plays/zoomlogin/assets/microphone.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="64px" width="64px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.00 512.00" xml:space="preserve" stroke="#000000" stroke-width="0.00512">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <g> <g> <g> <path d="M426.667,213.333c-11.782,0-21.333,9.551-21.333,21.333V256c0,82.469-66.865,149.333-149.333,149.333 S106.667,338.469,106.667,256v-21.333c0-11.782-9.551-21.333-21.333-21.333c-11.782,0-21.333,9.551-21.333,21.333V256 c0,98.821,74.674,180.199,170.667,190.814v22.519H192c-11.782,0-21.333,9.551-21.333,21.333S180.218,512,192,512h128 c11.782,0,21.333-9.551,21.333-21.333s-9.551-21.333-21.333-21.333h-42.667v-22.519C373.326,436.199,448,354.821,448,256v-21.333 C448,222.885,438.449,213.333,426.667,213.333z"/> <path d="M256,384c70.683,0,128-57.317,128-128V128C384,57.317,326.683,0,256,0S128,57.317,128,128v128 C128,326.683,185.317,384,256,384z M170.667,128c0-47.119,38.214-85.333,85.333-85.333S341.333,80.881,341.333,128v128 c0,47.119-38.214,85.333-85.333,85.333S170.667,303.119,170.667,256V128z"/> </g> </g> </g> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/plays/zoomlogin/assets/sso-logo.svg b/src/plays/zoomlogin/assets/sso-logo.svg
new file mode 100644
index 0000000000..c18ac35d8e
--- /dev/null
+++ b/src/plays/zoomlogin/assets/sso-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="24px" height="24px"><path d="M 14.414063 11.144531 C 14.957031 10.09375 15.273438 8.902344 15.273438 7.636719 C 15.273438 3.421875 11.851563 0 7.636719 0 C 3.421875 0 0 3.417969 0 7.636719 C 0 11.851563 3.421875 15.273438 7.636719 15.273438 C 8.902344 15.273438 10.09375 14.960938 11.140625 14.414063 L 15.273438 18.542969 L 17.453125 18.542969 C 17.453125 18.546875 17.453125 20.726563 17.453125 20.726563 L 19.636719 20.726563 L 19.636719 22.910156 L 20.726563 24 L 24 24 L 24 20.726563 Z M 5.5 8 C 4.121094 8 3 6.882813 3 5.5 C 3 4.117188 4.121094 3 5.5 3 C 6.882813 3 8 4.117188 8 5.5 C 8 6.882813 6.882813 8 5.5 8 Z"/></svg>
\ No newline at end of file
diff --git a/src/plays/zoomlogin/assets/window-open.png b/src/plays/zoomlogin/assets/window-open.png
new file mode 100644
index 0000000000..95f130f72b
Binary files /dev/null and b/src/plays/zoomlogin/assets/window-open.png differ
diff --git a/src/plays/zoomlogin/assets/zoom-help-1.png b/src/plays/zoomlogin/assets/zoom-help-1.png
new file mode 100644
index 0000000000..6d130c6e86
Binary files /dev/null and b/src/plays/zoomlogin/assets/zoom-help-1.png differ
diff --git a/src/plays/zoomlogin/assets/zoom-help-2.png b/src/plays/zoomlogin/assets/zoom-help-2.png
new file mode 100644
index 0000000000..9057b2a8c4
Binary files /dev/null and b/src/plays/zoomlogin/assets/zoom-help-2.png differ
diff --git a/src/plays/zoomlogin/assets/zoom-img.png b/src/plays/zoomlogin/assets/zoom-img.png
new file mode 100644
index 0000000000..4642e22312
Binary files /dev/null and b/src/plays/zoomlogin/assets/zoom-img.png differ
diff --git a/src/plays/zoomlogin/assets/zoom-logo.png b/src/plays/zoomlogin/assets/zoom-logo.png
new file mode 100644
index 0000000000..0fc70a796e
Binary files /dev/null and b/src/plays/zoomlogin/assets/zoom-logo.png differ
diff --git a/src/plays/zoomlogin/assets/zoom-svgrepo-com.svg b/src/plays/zoomlogin/assets/zoom-svgrepo-com.svg
new file mode 100644
index 0000000000..28bd5e45f2
--- /dev/null
+++ b/src/plays/zoomlogin/assets/zoom-svgrepo-com.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+   <style>
+      .st1{fill:#fff}
+   </style>
+   <g id="Icon">
+      <circle id="Background" cx="512" cy="512" r="512" style="fill:#2d8cff"/>
+      <path class="st1" d="M458.7 467.3c-12.3-12.3-28.4-18.5-44.7-18.5-16.1 0-32.4 6.2-44.7 18.5-24.7 24.7-24.7 64.6 0 89.4 24.7 24.7 64.6 24.7 89.4 0 24.7-24.6 24.7-64.8 0-89.4zm-17.8 71.6c-14.9 14.9-38.9 14.9-53.6 0-14.9-14.9-14.9-38.9 0-53.6 14.9-14.9 38.9-14.9 53.6 0 14.7 14.7 14.7 38.7 0 53.6z"/>
+      <path class="st1" d="M591.5 467.3c-12.3-12.3-28.4-18.5-44.7-18.5-16.1 0-32.4 6.2-44.7 18.5-24.7 24.7-24.7 64.6 0 89.4 24.7 24.7 64.6 24.7 89.4 0 24.6-24.6 24.6-64.8 0-89.4zm-17.9 71.6c-14.9 14.9-38.9 14.9-53.6 0-14.9-14.9-14.9-38.9 0-53.6 14.9-14.9 38.9-14.9 53.6 0 14.7 14.7 14.7 38.7 0 53.6zm-317.6 36 6.3.3h94.8l-.3-6.3c-.8-10.4-8.2-18-18.6-18.6l-6.3-.3H275l75.9-75.9-.3-6.3c-.5-10.4-8.2-18.2-18.6-18.6l-6.3-.3h-94.8l.3 6.3c.8 10.3 8.4 18 18.6 18.6l6.3.3H313l-76 75.8.3 6.3c.7 10.5 8.3 18.1 18.7 18.7zm432.7-88.2c2.2 3.8 2.8 7.9 3.2 12.6l.3 6.3v44.2l.3 6.3c.6 10.3 8.2 18 18.6 18.6l6.3.3v-69.5l.3-6.3c.3-4.7.9-9 3.2-12.8 4.4-7.6 12.5-12.5 21.8-12.5s17.5 5.1 22 12.6c2.2 3.8 2.8 8.1 3 12.6l.3 6.3v44.2l.3 6.3c.6 10.4 8.2 18 18.6 18.6l6.3.3V499c0-28-22.6-50.6-50.6-50.6-15.2 0-28.6 6.6-37.9 17.1-9.3-10.4-22.8-17.1-37.9-17.1-10.4 0-20.2 3.2-28.3 8.7-4.9-5.5-16-8.7-22.3-8.7v126.4l6.3-.3c10.6-.6 18.2-8.2 18.6-18.6l.3-6.3v-44.2l.3-6.3c.3-4.7.9-9 3.2-12.6 4.4-7.6 12.5-12.6 21.8-12.6 9.5.2 17.7 5.2 22 12.8z"/>
+   </g>
+</svg>
\ No newline at end of file
diff --git a/src/plays/zoomlogin/assets/zoomAd.png b/src/plays/zoomlogin/assets/zoomAd.png
new file mode 100644
index 0000000000..b1fecb60c7
Binary files /dev/null and b/src/plays/zoomlogin/assets/zoomAd.png differ
diff --git a/src/plays/zoomlogin/assets/zoomImg.png b/src/plays/zoomlogin/assets/zoomImg.png
new file mode 100644
index 0000000000..db701a6cbd
Binary files /dev/null and b/src/plays/zoomlogin/assets/zoomImg.png differ
diff --git a/src/plays/zoomlogin/assets/zoomsupport.png b/src/plays/zoomlogin/assets/zoomsupport.png
new file mode 100644
index 0000000000..8f03dda2bc
Binary files /dev/null and b/src/plays/zoomlogin/assets/zoomsupport.png differ
diff --git a/src/plays/zoomlogin/components/App.js b/src/plays/zoomlogin/components/App.js
new file mode 100644
index 0000000000..e790f9647c
--- /dev/null
+++ b/src/plays/zoomlogin/components/App.js
@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import CopyText from './CopyText';
+import Footer from './Footer';
+
+import React from 'react';
+import zoomhelpaf from '../assets/zoom-help-1.png';
+import ZoomPage from './Zoom/ZoomPage';
+
+function App() {
+  const [isModalOpen, setIsModalOpen] = useState(true);
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <>
+      {isModalOpen && (
+        <div
+          aria-modal="true"
+          className="bg-gray-500 fixed inset-0 z-30 bg-opacity-50 flex items-center justify-center"
+          role="dialog"
+        >
+          <div className="absolute w-[240px] sm:w-[300px] sm:top-[400px] z-40 p-6 bg-white rounded-md text-wrap">
+            <p className="text-lg text-center font-bold pb-2">Test Guide </p>
+            <hr /> <br />
+            <div className="mb-2">
+              <span className="font-bold">Login form: </span>
+              <span className="text-base">
+                Copy and paste the credentials provided in the header.
+              </span>
+            </div>
+            <div>
+              <span className="font-bold">Chatbot: </span>
+              <span className="text-base">
+                Click the{' '}
+                <span className="border-red-500 border-2 rounded-full py-1 px-1"> Help</span> button
+                and the icon will appear
+              </span>
+              <img alt="Zoom help icon" className="w-7 inline-block" src={zoomhelpaf} /> <br />
+              <span className="text-base">
+                Test by typing <i>"password reset"</i> or <i>"dog pic"</i> etc. <br />
+              </span>
+            </div>
+            <div className="grid items-center mt-4">
+              <button
+                aria-label="close modal"
+                className="font-semibold rounded-lg bg-[#0956b5] text-white px-2 py-1 hover:bg-[#07428f]"
+                onClick={closeModal}
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="sticky top-[-1rem] h-[120px] sm:h-20 bg-blue-900 text-white font-semibold text-3xl shadow-lg">
+        <div className="flex items-center justify-between py-3 px-3 sm:px-5 h-[120px] sm:h-20">
+          <div className="flex justify-center ml-4">
+            <p className="font-mono">
+              Clone Coding
+              <p className="text-sm text-gray-300">Login form pages</p>
+            </p>
+          </div>
+          <div>
+            <div className="relative">
+              <p className="text-sm text-gray-300">Test credentials</p>
+              <p className="text-xs mr-10">test@example.com</p>
+              <div className="absolute top-1 right-0 text-yellow-400">
+                <CopyText copyText="test@example.com" />
+              </div>
+              <p className="text-xs">1234abc!</p>
+              <div className="absolute bottom-[-2px] right-14 text-yellow-400">
+                <CopyText copyText="1234abc!" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <ZoomPage />
+      </div>
+      <Footer />
+    </>
+  );
+}
+
+export default App;
diff --git a/src/plays/zoomlogin/components/CopyText.js b/src/plays/zoomlogin/components/CopyText.js
new file mode 100644
index 0000000000..08c8744541
--- /dev/null
+++ b/src/plays/zoomlogin/components/CopyText.js
@@ -0,0 +1,18 @@
+function CopyText({ copyText }) {
+  const copyToClipboard = (text) => {
+    navigator.clipboard.writeText(text).then(
+      () => {},
+      (err) => {
+        console.error('failed to copy: ', err);
+      }
+    );
+  };
+
+  return (
+    <button className="text-xs text-yellow-400" onClick={() => copyToClipboard(copyText)}>
+      Copy
+    </button>
+  );
+}
+
+export default CopyText;
diff --git a/src/plays/zoomlogin/components/Footer.js b/src/plays/zoomlogin/components/Footer.js
new file mode 100644
index 0000000000..7f30d8d3c1
--- /dev/null
+++ b/src/plays/zoomlogin/components/Footer.js
@@ -0,0 +1,23 @@
+function Footer() {
+  return (
+    <div className="flex-col bg-grey h-[140px] p-10">
+      <div className="flex gap-1 justify-center">
+        <a
+          href="https://www.linkedin.com/in/dev-dayeonlee/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <img alt="LinkedIn Logo" src="https://cdn.simpleicons.org/linkedin" width="30" />
+        </a>
+        <a href="https://github.com/day-lee/" rel="noopener noreferrer" target="_blank">
+          <img alt="GitHub Logo" src="https://cdn.simpleicons.org/github" width="30" />
+        </a>
+      </div>
+      <div className="flex items-center justify-center gap-1 p-2 text-sm sm:text-base">
+        <span> &copy; 2024 all rights reserved | day-lee</span>
+      </div>
+    </div>
+  );
+}
+
+export default Footer;
diff --git a/src/plays/zoomlogin/components/Zoom/ZoomHeader.js b/src/plays/zoomlogin/components/Zoom/ZoomHeader.js
new file mode 100644
index 0000000000..9cbfe7ab98
--- /dev/null
+++ b/src/plays/zoomlogin/components/Zoom/ZoomHeader.js
@@ -0,0 +1,54 @@
+import zoomLogo from '../../assets/zoom-logo.png';
+import ZoomLanguageDropdown from './ZoomLanguageDropdown.js';
+
+const signupLink = 'https://zoom.us/signup#/signup';
+const supportLink = 'https://support.zoom.com/hc/en';
+
+function ZoomHeader() {
+  const linkSignup = () => {
+    window.open(signupLink, '_blank', 'noreferrer');
+  };
+
+  const linkSupport = () => {
+    window.open(supportLink, '_blank', 'noreferrer');
+  };
+
+  return (
+    <div className="flex justify-between relative bg-white text-[#0956b5] font-semibold text-[14px] border-b-2">
+      <div className="ml-4 sm:ml-10 py-4">
+        <img alt="zoomlogo" className="bg-white w-[110px] h-[25px]" src={zoomLogo} />
+      </div>
+      <div className="flex absolute right-0 pt-4">
+        <div className="mr-1 text-black hidden sm:inline-flex font-medium">
+          <span>New to Zoom? </span>
+        </div>
+        <div className=" mr-3 sm:mr-10">
+          <button className="lg:hidden hover:underline underline-offset-2" onClick={linkSignup}>
+            Sign Up
+          </button>
+          <button
+            className="hidden lg:inline-block hover:underline underline-offset-2"
+            onClick={linkSignup}
+          >
+            Sign Up Free
+          </button>
+        </div>
+        <div className="mr-10 hidden sm:inline-flex">
+          <button
+            className="hover:text-[#0956b5] hover:underline underline-offset-2"
+            onClick={linkSupport}
+          >
+            Support
+          </button>
+        </div>
+        <div>
+          <div className="mr-10">
+            <ZoomLanguageDropdown />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ZoomHeader;
diff --git a/src/plays/zoomlogin/components/Zoom/ZoomLanguageDropdown.js b/src/plays/zoomlogin/components/Zoom/ZoomLanguageDropdown.js
new file mode 100644
index 0000000000..c4b0cb5622
--- /dev/null
+++ b/src/plays/zoomlogin/components/Zoom/ZoomLanguageDropdown.js
@@ -0,0 +1,36 @@
+function ZoomLanguageDropdown() {
+  return (
+    <>
+      <div className="text-zoomblue ">
+        <form>
+          <label htmlFor="language" />
+          <select
+            className="w-20 cursor-pointer mx-1 h-6 rounded-md hover:bg-[#D0E8FF]"
+            id="language"
+            name="language"
+          >
+            <option value="English">English </option>
+            <option value="Español"> Español</option>
+            <option value="Deutsch"> Deutsch</option>
+            <option value="简体中文"> 简体中文</option>
+            <option value="繁體中文"> 繁體中文</option>
+            <option value="Français">Français </option>
+            <option value="Português"> ortuguês</option>
+            <option value="日本語"> 日本語</option>
+            <option value="Русский">Русский </option>
+            <option value="한국어">한국어 </option>
+            <option value="Italiano">Italiano </option>
+            <option value="Tiếng Việt">Tiếng Việt </option>
+            <option value="polski">polski </option>
+            <option value="Türkçe"> Türkçe</option>
+            <option value="Bahasa Indonesia">Bahasa Indonesia </option>
+            <option value="Nederlands"> Nederlands</option>
+            <option value="Svenska"> Svenska</option>
+          </select>
+        </form>
+      </div>
+    </>
+  );
+}
+
+export default ZoomLanguageDropdown;
diff --git a/src/plays/zoomlogin/components/Zoom/ZoomPage.js b/src/plays/zoomlogin/components/Zoom/ZoomPage.js
new file mode 100644
index 0000000000..aa8c2d106c
--- /dev/null
+++ b/src/plays/zoomlogin/components/Zoom/ZoomPage.js
@@ -0,0 +1,99 @@
+import { useState } from 'react';
+
+import Chatbot from 'react-chatbot-kit';
+import ActionProvider from '../chatbot/ActionProvider';
+import '../chatbot/ChatbotOverride.css';
+import MessageParser from '../chatbot/MessageParser';
+import config from '../chatbot/config';
+import ZoomHeader from './ZoomHeader';
+import ZoomSignin from './ZoomSignin';
+
+import zoomhelpbf from '../../assets/zoom-help-1.png';
+import zoomhelpaf from '../../assets/zoom-help-2.png';
+import zoomImg from '../../assets/zoom-img.png';
+import zoomAdImg from '../../assets/zoomAd.png';
+
+function ZoomPage() {
+  const [isHelp, setIsHelp] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isChatbotClose, setIsChatbotClose] = useState(true);
+  const [isChatbotHeaderClose, setIsChatbotHeaderClose] = useState(true);
+
+  const handleHover = () => {
+    setIsHovered(!isHovered);
+  };
+
+  const handleChatbotModal = () => {
+    setIsChatbotClose(!isChatbotClose);
+    setIsChatbotHeaderClose(false);
+    setIsHelp(false);
+  };
+
+  const toggleHeaderActionMenuModal = () => {
+    setIsChatbotHeaderClose(!isChatbotHeaderClose);
+  };
+
+  const validateInput = (message) => {
+    if (!message.trim()) {
+      return false;
+    }
+
+    return true;
+  };
+
+  return (
+    <>
+      <ZoomHeader />
+      <div className="flex relative w-full mx-auto sm:h-[900px] h-[1000px]">
+        {/* desktop img */}
+        <div className="bg-[#f7f9fa] lg:w-3/5 lg:p-[6rem]">
+          <div className="hidden lg:pt-[160px] lg:inline-block">
+            <img alt="zoomimg" className="w-[400px] min-w-[360px]" src={zoomImg} />
+          </div>
+          <div className="absolute top-16 left-[90px] hidden 2xl:pt-[160px] 2xl:inline-block z-10">
+            <a
+              href="https://www.zoom.com/en/blog/zoom-docs-guide/?itm_source=signinpage&itm_medium=imm-en&itm_campaign=FY25_ZoomDocs_Aug5"
+              rel="noreferrer"
+              target="_blank"
+            >
+              <img alt="zoomAdimg" className="w-[555px] min-w-[360px]" src={zoomAdImg} />
+            </a>
+          </div>
+        </div>
+        <div className="relative flex flex-col items-center bg-white pt-20 px-16 py-5 w-full sm:h-[900px] h-[1000px]">
+          <div className="flex justify-center absolute w-full bg-[#f7f9fa] top-0 lg:hidden">
+            <img alt="zoomimg" className="w-[205px]" src={zoomImg} />
+          </div>
+          <div className="absolute top-[200px] lg:top-20 h-[536px]">
+            <div className="">
+              <ZoomSignin help={isHelp} helpHandle={() => setIsHelp(true)} />
+            </div>
+            <div className={`fixed right-5 bottom-5 rounded-lg ${isChatbotClose && 'hidden'}`}>
+              <Chatbot
+                actionProvider={ActionProvider}
+                config={config({
+                  isChatbotHeaderClose,
+                  handleChatbotModal,
+                  toggleHeaderActionMenuModal
+                })}
+                messageParser={MessageParser}
+                validator={validateInput}
+              />
+            </div>
+          </div>
+        </div>
+        <button
+          aria-label="help button"
+          className="fixed bottom-14 right-10 z-10"
+          onClick={handleChatbotModal}
+          onMouseEnter={handleHover}
+          onMouseLeave={handleHover}
+        >
+          {isHelp && <img alt="help" className="b-2" src={isHovered ? zoomhelpaf : zoomhelpbf} />}
+        </button>
+      </div>
+    </>
+  );
+}
+
+export default ZoomPage;
diff --git a/src/plays/zoomlogin/components/Zoom/ZoomSignin.js b/src/plays/zoomlogin/components/Zoom/ZoomSignin.js
new file mode 100644
index 0000000000..6b42c5be39
--- /dev/null
+++ b/src/plays/zoomlogin/components/Zoom/ZoomSignin.js
@@ -0,0 +1,409 @@
+import { useState } from 'react';
+
+import ZoomSpinner from './ZoomSpinner';
+
+import info from '../../assets/circle-information-svgrepo-com.svg';
+import passwordHide from '../../assets/eye-password-hide-svgrepo-com.svg';
+import passwordShow from '../../assets/eye-password-show-svgrepo-com.svg';
+import ssologo from '../../assets/sso-logo.svg';
+import openwindow from '../../assets/window-open.png';
+
+const applelogo = 'https://cdn.simpleicons.org/apple';
+const facebooklogo = 'https://cdn.simpleicons.org/facebook';
+const googlelogo = 'https://www.gstatic.com/images/branding/product/1x/gsa_512dp.png';
+
+const INITIAL_VALUES = { zoomemail: '', zoompassword: '' };
+const ERROR_VALUES = {
+  error: false,
+  errorEmail: '',
+  errorPassword: '',
+  errorMsg: '',
+  isBothError: false
+};
+const forgotPasswordLink = 'https://zoom.us/signin#/forgot-password';
+const googlePrivacyLink = 'https://policies.google.com/privacy';
+const googleTermsLink = 'https://policies.google.com/terms';
+const zoomPrivavyLink = 'https://explore.zoom.us/en/privacy/';
+const zoomTermsLink = 'https://www.zoom.com/en/trust/terms/';
+const ssoLink = 'https://zoom.us/web/sso/login?en=signin#/';
+
+const appleLink =
+  'https://appleid.apple.com/auth/authorize?response_type=code&client_id=us.zoom.videomeetings.appleidsign' +
+  '&redirect_uri=https%3A%2F%2Fzoom.us%2Fapple%2Foauth&scope=name%20email&response_mode=form_post' +
+  '&state=OHhYazhoMUxUYS1MUm5NMGRPVXRjQSxhcHBsZV9zaWduaW4&_x_zm_rtaid=Le30iYENQ7Oz09-6XiRodw' +
+  '.1722720173320.5ca1e6651661b022ad92de02a35c40a6&_x_zm_rhtaid=755';
+
+const googleLink =
+  'https://accounts.google.com/v3/signin/identifier?opparams=%253F_x_zm_rhtaid%253D755%2526_x_zm_rtaid' +
+  '%253DLe30iYENQ7Oz09-6XiRodw.1722720173320.5ca1e6651661b022ad92de02a35c40a6&dsh=S-281526729%3A1722720312758671' +
+  '&access_type=offline&client_id=849883241272-ed6lnodi1grnoomiuknqkq2rbvd2udku.apps.googleusercontent.com&ddm=0' +
+  '&o2v=2&prompt=select_account&redirect_uri=https%3A%2F%2Fzoom.us%2Fgoogle%2Foauth&response_type=code&scope=profile' +
+  '+email&service=lso&state=OHhYazhoMUxUYS1MUm5NMGRPVXRjQSxnb29nbGVfc2lnbmlu&flowName=GeneralOAuthFlow&continue=' +
+  'https%3A%2F%2Faccounts.google.com%2Fsignin%2Foauth%2Fconsent%3Fauthuser%3Dunknown%26part%3DAJi8hAPo1pO2TBbE-' +
+  'x9nPQwHbcJMy1JdVLo_wwCMwR_JBDYKAn4TI2P1afU2NQRS2gEqetq8e3--FPw5oTbfqgLOcDM-_W9Oe5KBg3arFmnSA221nilIab124VdaCejv' +
+  '0qjOkBp4g0xc--YtSX8zXSkxPPg0UxNvta6IXnzxm0yZCuyLuImS5fpqOHW9pi0id9x8Naj0-jPfzFDxwXM7mP21oG9eaZmbd0I13ncxfDOIs' +
+  '2ytK--DnlyxUxxgrdsp1VcEcmzatco_Ns6ThuuPsFQiT40dBTkDKRk9KZG7-FJESkHIusvpi51t6x983I8PDIzgtKxILLfp_mIc5ZyLIbfjtt' +
+  'fe7xI1DxMVsSAgPB22Mjhnp4fuiDZnVyJ1z370WH7ISsU94f7Wx9AOZvfosPh3468CkabZWG4TRL44gmX3_nD3FD5Vqj9CM07r3R4Jt5a74y' +
+  'a8JqCThE1qWsOWInBp3Bz2Wh2WqA%26flowName%3DGeneralOAuthFlow%26as%3DS-281526729%253A1722720312758671%26client_id' +
+  '%3D849883241272-ed6lnodi1grnoomiuknqkq2rbvd2udku.apps.googleusercontent.com%23&app_domain=https%3A%2F%2Fzoom.us' +
+  '&rart=ANgoxceSzqcQIvlHl3mNVBldm0CCGyyuObU6tCTT8Ej99ULMq2xjF1XG16usoS2ZmbAEpAOWLoE_mvDt0Lr9qCOG5l-tmauukjE6g_OEO' +
+  'dlaV8jxYVVXcVk';
+
+const facebookLink =
+  'https://www.facebook.com/login.php?skip_api_login=1&api_key=113289095462482&kid_directed_site=0&app_id' +
+  '=113289095462482&signed_next=1&next=https%3A%2F%2Fwww.facebook.com%2Fv18.0%2Fdialog%2Foauth%3Fresponse_type' +
+  '%3Dcode%26client_id%3D113289095462482%26scope%3Demail%252Cpublic_profile%26redirect_uri%3Dhttps%253A%252F%252F' +
+  'zoom.us%252Ffacebook%252Foauth%26state%3DOHhYazhoMUxUYS1MUm5NMGRPVXRjQSxmYWNlYm9va19zaWduaW4%26_x_zm_rtaid' +
+  '%3DLe30iYENQ7Oz09-6XiRodw.1722720173320.5ca1e6651661b022ad92de02a35c40a6%26_x_zm_rhtaid%3D755%26ret%3Dlogin%26fbapp' +
+  '_pres%3D0%26logger_id%3D53b0a444-102e-4327-abb9-682c77d42eb3%26tp%3Dunspecified&cancel_url=https%3A%2F%2Fzoom.us' +
+  '%2Ffacebook%2Foauth%3Ferror%3Daccess_denied%26error_code%3D200%26error_description%3DPermissions%2Berror%26error_reason' +
+  '%3Duser_denied%26state%3DOHhYazhoMUxUYS1MUm5NMGRPVXRjQSxmYWNlYm9va19zaWduaW4%23_%3D_&display=page&locale=ko_KR&pl_dbl=0';
+
+function ZoomSignin({ helpHandle }) {
+  const [formValues, setFormValues] = useState(INITIAL_VALUES);
+  const [errorValues, setErrorValues] = useState(ERROR_VALUES);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isEmailFocused, setIsEmailFocused] = useState(false);
+  const [isPasswordFocused, setIsPasswordFocused] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { zoomemail, zoompassword } = formValues;
+  const { error, errorEmail, errorPassword, isBothError, errorMsg } = errorValues;
+
+  const validateEmail = (email) => {
+    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+    return regex.test(email);
+  };
+
+  const onInputChange = (e) => {
+    setErrorValues((prev) => ({
+      ...prev,
+      errorEmail: '',
+      errorPassword: '',
+      errorMsg: '',
+      error: false,
+      isBothError: false
+    }));
+    const { name, value } = e.target;
+    setFormValues((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      document.getElementById('zoomSignIn').click();
+    }
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    const buttonName = e.nativeEvent.submitter.name;
+    if (buttonName === 'zoomSignin') {
+      if (zoomemail === '' && zoompassword === '') {
+        setErrorValues((prev) => ({
+          ...prev,
+          errorEmail: 'Please enter your email address',
+          errorPassword: 'Please enter your password',
+          error: true
+        }));
+      } else if (!validateEmail(zoomemail)) {
+        setErrorValues((prev) => ({
+          ...prev,
+          errorEmail: 'Please enter your email address',
+          error: true
+        }));
+      } else if (zoompassword !== '1234abc!') {
+        setErrorValues((prev) => ({
+          ...prev,
+          isBothError: true,
+          errorMsg:
+            'Incorrect email or password. Enter your sign ininformation again, or request an email to gain access to your account.'
+        }));
+      } else {
+        setIsLoading(true);
+        const timer = setTimeout(() => {
+          alert(`Zoom: You have successfully logged in as ${zoomemail} `);
+          setFormValues(INITIAL_VALUES);
+          setIsLoading(false);
+        }, 2000);
+
+        return () => clearTimeout(timer);
+      }
+    } else if (buttonName === 'zoomHelp') {
+      helpHandle();
+    } else if (buttonName === 'zoomPasswordVisibility') {
+      setIsVisible(!isVisible);
+    }
+  };
+
+  const handleForgotPassword = () => {
+    window.open(forgotPasswordLink, '_blank');
+  };
+
+  const openExternalLink = (url) => window.open(url, '_blank', 'noreferrer');
+
+  const handleSSOClick = (e) => {
+    const { name } = e.currentTarget;
+    switch (name) {
+      case 'sso':
+        openExternalLink(ssoLink);
+
+        break;
+      case 'apple':
+        openExternalLink(appleLink);
+
+        break;
+      case 'google':
+        openExternalLink(googleLink);
+
+        break;
+      case 'facebook':
+        openExternalLink(facebookLink);
+
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <>
+      <div>
+        <div className="flex-col">
+          <p
+            className="hidden lg:flex justify-center
+           text-[32px] mb-[32px] font-semibold"
+          >
+            Sign In
+          </p>
+          <form className="w-[246px] sm:w-[346px]" id="zoomForm" onSubmit={handleSubmit}>
+            <div>
+              <div className="relative mb-2">
+                {isEmailFocused && (
+                  <label
+                    className="absolute text-slate-500 pt-1 pb-2 left-0 top-0 text-xs mb-1 px-2"
+                    htmlFor="email"
+                  >
+                    Email Address
+                  </label>
+                )}
+                <input
+                  className={`zoominput w-full h-12 rounded-lg px-2 mb-4 placeholer:pt-0 placeholder:text-slate-500 
+                    focus:placeholder-transparent focus:pt-4 ${
+                      !error ? 'border border-[#6e7680]' : 'mb-0 border  border-red-500'
+                    }`}
+                  id="zoomemail"
+                  name="zoomemail"
+                  placeholder="Email Address"
+                  type="text"
+                  value={zoomemail}
+                  onBlur={() => setIsEmailFocused(false)}
+                  onChange={onInputChange}
+                  onFocus={() => setIsEmailFocused(true)}
+                  onKeyDown={handleKeyDown}
+                />
+                <div className="text-[#b22424] text-sm ">{errorEmail}</div>
+              </div>
+              <div className="relative flex">
+                {isPasswordFocused && (
+                  <label
+                    className="absolute text-slate-500 pt-1 pb-2 left-0 top-0 text-xs mb-1 px-2"
+                    htmlFor="email"
+                  >
+                    Password
+                  </label>
+                )}
+                <input
+                  className={`zoominput w-full h-12 rounded-lg px-2 mb-4 placeholer:pt-0 placeholder:text-slate-500 
+                    focus:placeholder-transparent focus:pt-4 ${
+                      !error ? 'border border-[#6e7680]' : 'mb-0 border  border-red-500'
+                    }`}
+                  id="zoompassword"
+                  name="zoompassword"
+                  placeholder="Password"
+                  type={isVisible ? 'text' : 'password'}
+                  value={zoompassword}
+                  onBlur={() => setIsPasswordFocused(false)}
+                  onChange={onInputChange}
+                  onFocus={() => setIsPasswordFocused(true)}
+                  onKeyDown={handleKeyDown}
+                />
+                <div className="absolute flex items-center top-4 right-3">
+                  <button
+                    aria-label={isVisible ? 'Hide password' : 'Show password'}
+                    className="w-4 h-4"
+                    id="zoomPasswordVisibility"
+                    name="zoomPasswordVisibility"
+                  >
+                    {!isVisible ? (
+                      <img alt="show" src={passwordShow} />
+                    ) : (
+                      <img alt="hide" src={passwordHide} />
+                    )}
+                  </button>
+                </div>
+              </div>
+              <div className="text-[#b22424] text-sm">{errorPassword}</div>
+            </div>
+            <div className="flex justify-between mb-3">
+              <button
+                aria-label="forgot password"
+                className="flex text-[#0956b5] font-semibold text-sm py-2 hover:underline underline-offset-2 hover:text-zoomhoverblue "
+                id="forgotPassword"
+                name="forgotPassword"
+                onClick={handleForgotPassword}
+              >
+                Forgot password?
+              </button>
+              <button
+                aria-label="help"
+                className="flex text-[#0956b5] font-semibold text-sm py-2 hover:text-zoomhoverblue 
+                 hover:underline underline-offset-2 border-4 rounded-full px-2 border-red-400"
+                name="zoomHelp"
+              >
+                Help
+                <img
+                  alt="open-window"
+                  className="w-4 h-4 ml-2 flex items-cneter"
+                  src={openwindow}
+                />
+              </button>
+            </div>
+            <div
+              className={`bg-[#fff2f5] p-[16px] my-[16px] rounded text-sm ${
+                !isBothError && 'hidden'
+              }`}
+            >
+              {errorMsg}
+            </div>
+            <div className="relative">
+              <button
+                aria-label="zoom signin"
+                className={`w-full ${
+                  isLoading ? 'bg-[#f1f4f6] text-[#6e7680]' : 'bg-[#0e72ed] text-white border p-2'
+                }  rounded-lg font-bold  h-[40px]`}
+                id="zoomSignIn"
+                name="zoomSignin"
+                type="submit"
+              >
+                {isLoading && (
+                  <div className="absolute left-5 top-4">
+                    <ZoomSpinner />
+                  </div>
+                )}
+                Sign In
+              </button>
+            </div>
+            <div className="zoomsignin">
+              <p className="text-[#747487] text-sm font-semibold mt-4 mb-[10px]">
+                By signing in, I agree to the &nbsp;
+                <span className="text-[#0956b5] hover:underline underline-offset-2">
+                  <a className="zoomlink" href={zoomPrivavyLink} rel="noreferrer" target="_blank">
+                    &nbsp;Zoom's Privacy Statement
+                  </a>
+                </span>
+                &nbsp; and &nbsp;
+                <a
+                  className="zoomlink text-[#0956b5] hover:underline underline-offset-2"
+                  href={zoomTermsLink}
+                  rel="noreferrer"
+                  target="_blank"
+                >
+                  Terms of Service.
+                </a>
+              </p>
+              <div className="flex items-center">
+                <p className="text-[#6e7680] text-sm mt-[8px] font-medium">
+                  <input type="checkbox" /> Stay signed in &nbsp;
+                </p>
+                <img alt="info" className="w-4 h-4 mt-2" src={info} />
+              </div>
+            </div>
+            <div className="text-[#747487] text-sm font-semibold mt-4">
+              <div className="flex justify-center mt-[12px] mb-[24px]">
+                <span className="block border-b w-1/4 sm:w-1/3 my-auto" />
+                <span>&nbsp; Or sign in with &nbsp;</span>
+                <span className="block border-b w-1/4 sm:w-1/3 my-auto" />
+              </div>
+              <div className="flex justify-evenly">
+                <div className="relative w-[85px] h-[86px] hover:text-black">
+                  <button
+                    aria-label="sso login"
+                    className="border m-2 p-3 w-[48px] h-[48px] rounded-2xl hover:bg-[#F0F0F0]"
+                    id="sso"
+                    name="sso"
+                    onClick={handleSSOClick}
+                  >
+                    <img alt="ssologo" src={ssologo} />
+                    <p className="absolute left-5 mt-6">SSO</p>
+                  </button>
+                </div>
+                <div className="relative w-[85px] h-[86px] hover:text-black">
+                  <button
+                    aria-label="appe login"
+                    className="border m-2 p-3 pt-3 pb-3 w-[48px] h-[48px] rounded-2xl hover:bg-[#F0F0F0]"
+                    id="apple"
+                    name="apple"
+                    onClick={handleSSOClick}
+                  >
+                    <img alt="applelogo" src={applelogo} />
+                    <p className="absolute left-[0.8rem] mt-5">Apple</p>
+                  </button>
+                </div>
+                <div className="relative w-[85px] h-[86px] hover:text-black">
+                  <button
+                    aria-label="google login"
+                    className="border m-2 p-3 w-[48px] h-[48px] rounded-2xl hover:bg-[#F0F0F0]"
+                    id="google"
+                    name="google"
+                    onClick={handleSSOClick}
+                  >
+                    <img alt="googlelogo" src={googlelogo} />
+                    <p className="absolute left-2 mt-5">Google</p>
+                  </button>
+                </div>
+                <div className="relative w-[85px] h-[86px] hover:text-black">
+                  <button
+                    aria-label="facebook login"
+                    className="border m-2 p-3 w-[48px] h-[48px] rounded-2xl hover:bg-[#F0F0F0]"
+                    id="facebook"
+                    name="facebook"
+                    onClick={handleSSOClick}
+                  >
+                    <img alt="facebooklogo" src={facebooklogo} />
+                    <p className="absolute left-1 pt-5">Facebook</p>
+                  </button>
+                </div>
+              </div>
+              <div className="mt-[32px] text-[#6e7680] ">
+                Zoom is protected by reCAPTCHA and the{' '}
+                <a
+                  className="text-[#0956b5] hover:underline underline-offset-2"
+                  href={googlePrivacyLink}
+                  rel="noreferrer"
+                  target="_blank"
+                >
+                  Privacy Policy{' '}
+                </a>
+                and{' '}
+                <a
+                  className="text-[#0956b5] hover:underline underline-offset-2"
+                  href={googleTermsLink}
+                  rel="noreferrer"
+                  target="_blank"
+                >
+                  Terms of Service{' '}
+                </a>
+                apply.
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default ZoomSignin;
diff --git a/src/plays/zoomlogin/components/Zoom/ZoomSpinner.js b/src/plays/zoomlogin/components/Zoom/ZoomSpinner.js
new file mode 100644
index 0000000000..f775cccdba
--- /dev/null
+++ b/src/plays/zoomlogin/components/Zoom/ZoomSpinner.js
@@ -0,0 +1,22 @@
+const ZoomSpinner = () => {
+  return (
+    <div className="flex justify-center items-center h-[6px]">
+      <div className="relative w-2 h-2">
+        {[...Array(12)].map((_, index) => (
+          <div
+            className="w-[1px] h-[5px] bg-gray-700 absolute top-1/2 left-1/2 transform origin-bottom-center"
+            key={index}
+            style={{
+              transform: `rotate(${index * 30}deg) translateX(-50%) translateY(-130%)`,
+              animation: `bar-fade 1.2s linear infinite`,
+              animationDelay: `${index * 0.1}s`,
+              opacity: `${(12 - index) / 12}` // Gradually decrease the opacity
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ZoomSpinner;
diff --git a/src/plays/zoomlogin/components/chatbot/ActionProvider.jsx b/src/plays/zoomlogin/components/chatbot/ActionProvider.jsx
new file mode 100644
index 0000000000..990965042f
--- /dev/null
+++ b/src/plays/zoomlogin/components/chatbot/ActionProvider.jsx
@@ -0,0 +1,178 @@
+import React from 'react';
+import { createClientMessage, createCustomMessage } from 'react-chatbot-kit';
+
+const ActionProvider = ({ createChatBotMessage, setState, children }) => {
+  const handleButtonClickResponse = (message) => {
+    const userMessage = createClientMessage(`${message}`);
+    setState((prev) => ({
+      ...prev,
+      messages: [...prev.messages, userMessage]
+    }));
+  };
+
+  const handleNotFindAnswer = () => {
+    const firstBotMessage = createChatBotMessage(
+      "Hmm, I couldn't find an answer to that. Can you try asking it a different way?"
+    );
+    setState((prev) => ({
+      ...prev,
+      messages: [...prev.messages, firstBotMessage]
+    }));
+  };
+
+  const handleAccountLocked = () => {
+    const firstBotMessage = createChatBotMessage(
+      'Your Zoom account will be inaccessible if it is disabled, deactivated, or locked. I can help you recover your account.'
+    );
+    const secondBotMessage = createChatBotMessage(
+      'Click the account access issue you are having below ⬇️',
+      {
+        widget: 'accountLockedOptions'
+      }
+    );
+
+    setState((prev) => ({
+      ...prev,
+      messages: [...prev.messages, firstBotMessage, secondBotMessage]
+    }));
+  };
+
+  const handleAccountAccessIssue = () => {
+    const firstBotMessage = createChatBotMessage('Your Zoom account will be inaccessible....');
+    const secondBotMessage = createChatBotMessage('Click the account access...', {
+      widget: 'accountAccessIssue'
+    });
+
+    setState((prev) => ({
+      ...prev,
+      messages: [...prev.messages, firstBotMessage, secondBotMessage]
+    }));
+  };
+
+  const handleError1003 = () => {
+    const firstBotMessage = createCustomMessage('value', 'requestAppealCustommsg', {
+      widget: 'error1003Option'
+    });
+    setState((prev) => ({
+      ...prev,
+      messages: [...prev.messages, firstBotMessage]
+    }));
+  };
+
+  const handleRequestAppeal = () => {
+    const firstBotMessage = createChatBotMessage(
+      'The Zoom Trust & Safety team will review your appeal and provide additional information.'
+    );
+    setState((prev) => ({
+      ...prev,
+      messages: [...prev.messages, firstBotMessage]
+    }));
+  };
+
+  const handleResetPasswordDepth1 = () => {
+    const firstBotMessage = createCustomMessage('value', 'resetPassword2CustomMsg');
+    const secondBotMessage = createCustomMessage('value', 'resetPassword2NoteCustomMsg', {
+      widget: 'resetPasswordDepth1Options'
+    });
+
+    setState((prev) => ({
+      ...prev,
+      messages: [...prev.messages, firstBotMessage, secondBotMessage]
+    }));
+  };
+
+  const handleDog = () => {
+    const botMessage = createChatBotMessage("here's a nice dog pics for you.", {
+      widget: 'dogPicture'
+    });
+
+    setState((prev) => ({
+      ...prev,
+      messages: [...prev.messages, botMessage]
+    }));
+  };
+
+  const handleAccountDisabled = () => {
+    const firstBotMessage = createChatBotMessage(
+      'If you sign in to your Zoom account and receive a message that says "Account is disabled. Please contact your account owner or administrator" this means your account owner or admins have deactivated your Zoom account.'
+    );
+    const secondBotMessage = createChatBotMessage(
+      'You will need to contact your account owner or admins directly to reactivate your account.'
+    );
+    const thirdBotMessage = createCustomMessage('value', 'reactivateAccountCustomMsg', {
+      widget: 'accountDisabledOption'
+    });
+
+    setState((prev) => ({
+      ...prev,
+      messages: [...prev.messages, firstBotMessage, secondBotMessage, thirdBotMessage]
+    }));
+  };
+
+  const handleReactivateAccount = () => {
+    const firstBotMessage = createChatBotMessage('Let me know if you need additional assistance.');
+    setState((prev) => ({
+      ...prev,
+      messages: [...prev.messages, firstBotMessage]
+    }));
+  };
+
+  const handleDisabledAccount = () => {
+    const firstBotMessage = createChatBotMessage('Let me know if you need additional assistance.');
+    setState((prev) => ({
+      ...prev,
+      messages: [...prev.messages, firstBotMessage]
+    }));
+  };
+
+  const handleAccountBlocked = () => {
+    const firstBotMessage = createChatBotMessage(
+      'When multiple sign-in attempts to your Zoom account have failed because of incorrect credentials, your Zoom account will be blocked and you will be locked out.'
+    );
+    const secondBotMessage = createCustomMessage('value', 'resetPasswordCustomMsg', {
+      widget: 'blockedResetPasswordOption'
+    });
+
+    setState((prev) => ({
+      ...prev,
+      messages: [...prev.messages, firstBotMessage, secondBotMessage]
+    }));
+  };
+
+  const handleResetPasswordDepth2 = () => {
+    const firstBotMessage = createCustomMessage('value', 'resetPassword3CustomMsg', {
+      widget: 'resetPasswordDepth2Options'
+    });
+
+    setState((prev) => ({
+      ...prev,
+      messages: [...prev.messages, firstBotMessage]
+    }));
+  };
+
+  return (
+    <div>
+      {React.Children.map(children, (child) => {
+        return React.cloneElement(child, {
+          actions: {
+            handleButtonClickResponse,
+            handleNotFindAnswer,
+            handleAccountLocked,
+            handleAccountAccessIssue,
+            handleError1003,
+            handleRequestAppeal,
+            handleResetPasswordDepth1,
+            handleReactivateAccount,
+            handleAccountDisabled,
+            handleAccountBlocked,
+            handleDisabledAccount,
+            handleResetPasswordDepth2,
+            handleDog
+          }
+        });
+      })}
+    </div>
+  );
+};
+
+export default ActionProvider;
diff --git a/src/plays/zoomlogin/components/chatbot/ChatbotOverride.css b/src/plays/zoomlogin/components/chatbot/ChatbotOverride.css
new file mode 100644
index 0000000000..d3ed09047c
--- /dev/null
+++ b/src/plays/zoomlogin/components/chatbot/ChatbotOverride.css
@@ -0,0 +1,235 @@
+.react-chatbot-kit-user-chat-message-container {
+  display: flex;
+  margin: 45px 0 10px 0;
+  justify-content: flex-end;
+  position: relative;
+}
+
+.react-chatbot-kit-user-avatar-container {
+  display: hidden;
+}
+
+.react-chatbot-kit-user-avatar-icon {
+  display: hidden;
+}
+
+.react-chatbot-kit-user-chat-message {
+  background-color: #e7f1fd;
+  padding: 10px;
+  border-radius: 12px;
+  font-size: 0.9rem;
+  color: #222230;
+  font-weight: 500;
+  position: relative;
+  text-align: left;
+}
+
+.react-chatbot-kit-chat-bot-message-container {
+  margin: 5px 0;
+}
+
+.react-chatbot-kit-chat-bot-avatar-container {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  font-size: 1.2rem;
+  margin-right: 12.5px;
+  background-color: #d8d8d8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.react-chatbot-kit-chat-bot-avatar-icon {
+  fill: #494646;
+  width: 22.5px;
+  height: 22.5px;
+}
+
+.react-chatbot-kit-chat-bot-avatar-letter {
+  color: #1d1d1d;
+  margin: 0;
+  padding: 0;
+}
+
+.react-chatbot-kit-chat-bot-message {
+  background-color: #f7f7fc;
+  padding: 10px;
+  border-radius: 12px;
+  font-size: 0.9rem;
+  color: #222230;
+  font-weight: 500;
+  position: relative;
+  width: 270px;
+  margin-left: auto;
+  text-align: left;
+}
+
+@media (min-width: 640px) {
+  .react-chatbot-kit-chat-bot-message {
+    width: 330px;
+  }
+}
+
+.react-chatbot-kit-chat-bot-loading-icon-container {
+  height: 17px;
+  width: 25px;
+}
+
+.chatbot-loader-container {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
+#chatbot-loader #chatbot-loader-dot1 {
+  animation: load 1s infinite;
+}
+
+#chatbot-loader #chatbot-loader-dot2 {
+  animation: load 1s infinite;
+  animation-delay: 0.2s;
+}
+
+#chatbot-loader #chatbot-loader-dot3 {
+  animation: load 1s infinite;
+  animation-delay: 0.4s;
+}
+
+@keyframes load {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.react-chatbot-kit-chat-container {
+  position: relative;
+  background-color: #fff;
+  width: 360px;
+  height: 610px;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+@media (min-width: 640px) {
+  .react-chatbot-kit-chat-container {
+    width: 428px;
+  }
+}
+
+.react-chatbot-kit-chat-inner-container {
+  height: 500px;
+  background-color: #fff;
+  border-radius: 3px;
+  border-radius: 5px;
+}
+
+.react-chatbot-kit-chat-header {
+  border-top-right-radius: 5px;
+  border-top-left-radius: 5px;
+  background-color: #ffff;
+  font-family: Arial;
+  display: flex;
+  align-items: center;
+  font-size: 0.85rem;
+  color: #514f4f;
+  padding: 12px;
+  font-weight: bold;
+  border-radius: 12px;
+}
+
+.react-chatbot-kit-chat-input-container {
+  position: relative;
+  bottom: 0;
+  width: 100%;
+  height: 84px;
+  display: flex;
+  background-color: #fff;
+  border-radius: 12px;
+}
+
+.react-chatbot-kit-chat-message-container {
+  padding: 16px 12px;
+  overflow: scroll;
+  height: 426px;
+  position: relative;
+}
+
+.react-chatbot-kit-chat-input {
+  width: 100%;
+  padding: 12.5px;
+  border: none;
+  font-size: 0.85rem;
+  font-weight: 500;
+  border-top: 1px solid #d8d8d8;
+  border-bottom-left-radius: 5px;
+}
+
+.react-chatbot-kit-chat-input-form {
+  width: 100%;
+  height: 84px;
+}
+
+.react-chatbot-kit-chat-input::placeholder {
+  color: #585858;
+}
+
+.react-chatbot-kit-chat-input:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.react-chatbot-kit-chat-btn-send {
+  background-color: #52528017 !important;
+  width: 24px;
+  margin: 38px 0 0 0;
+  height: 24px;
+  border: none;
+  color: #fff;
+  border-bottom-right-radius: 5px;
+  border-radius: 8px;
+  position: absolute;
+  bottom: 4px;
+  right: 12px;
+}
+
+.react-chatbot-kit-chat-btn-send-icon {
+  fill: gray;
+  width: 11px;
+  margin: 0 auto;
+  transform: rotate(19deg);
+}
+
+.react-chatbot-kit-error {
+  background-color: #fff;
+  border-radius: 3px;
+  padding: 15px;
+}
+
+.react-chatbot-kit-error-container {
+  width: 260px;
+}
+
+.react-chatbot-kit-error-header {
+  font-size: 1.3rem;
+  color: #1d1d1d;
+  margin-bottom: 30px;
+}
+
+.react-chatbot-kit-error-docs {
+  display: block;
+  margin: 25px auto;
+  color: rgb(56, 104, 139);
+  padding: 8px;
+  border: 1px solid rgb(40, 152, 236);
+  width: 130px;
+  text-align: center;
+  text-decoration: none;
+  font-size: 1rem;
+}
diff --git a/src/plays/zoomlogin/components/chatbot/DogPicture.jsx b/src/plays/zoomlogin/components/chatbot/DogPicture.jsx
new file mode 100644
index 0000000000..de48ac9aec
--- /dev/null
+++ b/src/plays/zoomlogin/components/chatbot/DogPicture.jsx
@@ -0,0 +1,32 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+const DogPicture = () => {
+  const [imageUrl, setImageUrl] = useState('');
+  const imageRef = useRef(null);
+
+  useEffect(() => {
+    fetch('https://dog.ceo/api/breeds/image/random')
+      .then((res) => res.json())
+      .then((data) => {
+        setImageUrl(data.message);
+      });
+  }, []);
+  useEffect(() => {
+    if (imageUrl && imageRef.current) {
+      const imageElement = imageRef.current;
+      const handleImageLoad = () => {
+        imageElement.scrollIntoView({ behavior: 'smooth' });
+      };
+
+      imageElement.addEventListener('load', handleImageLoad);
+
+      return () => {
+        imageElement.removeEventListener('load', handleImageLoad);
+      };
+    }
+  }, [imageUrl]);
+
+  return <div>{imageUrl && <img alt="a dog" ref={imageRef} src={imageUrl} />}</div>;
+};
+
+export default DogPicture;
diff --git a/src/plays/zoomlogin/components/chatbot/FlightBotAvatar.jsx b/src/plays/zoomlogin/components/chatbot/FlightBotAvatar.jsx
new file mode 100644
index 0000000000..3e38fbb858
--- /dev/null
+++ b/src/plays/zoomlogin/components/chatbot/FlightBotAvatar.jsx
@@ -0,0 +1,32 @@
+import zoomsupport from '../../assets/chatbot/zoomsupport.png';
+
+const FlightBotAvatar = () => {
+  const now = new Date();
+  const formattedTime = new Intl.DateTimeFormat('en-US', {
+    hour: 'numeric',
+    minute: 'numeric',
+    hour12: true
+  }).format(now);
+
+  return (
+    <div className="relative flex items-baseline gap-3">
+      <img alt="zoomsupport" className="w-11 h-11 absolute bottom-[-44px]" src={zoomsupport} />
+      <div className="flex">
+        <div className="pb-2 pl-16 text-xs " style={{ fontSize: '11px' }}>
+          Bot{' '}
+          <span
+            className="inline-block bg-gray-100 text-[#02021c99] px-1 mx-1 font-bold"
+            style={{ fontSize: '10px' }}
+          >
+            BOT
+          </span>{' '}
+          <span className="text-[#0404138f]" style={{ fontSize: '11px' }}>
+            {formattedTime}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FlightBotAvatar;
diff --git a/src/plays/zoomlogin/components/chatbot/Header.jsx b/src/plays/zoomlogin/components/chatbot/Header.jsx
new file mode 100644
index 0000000000..7e338206c4
--- /dev/null
+++ b/src/plays/zoomlogin/components/chatbot/Header.jsx
@@ -0,0 +1,68 @@
+import cancelCircle from '../../assets/cancelCircle.svg';
+import downArrow from '../../assets/down-arrow.svg';
+import downloadArrow from '../../assets/downloadArrow.svg';
+import microPhone from '../../assets/microphone.svg';
+import zoomsupport from '../../assets/zoomsupport.png';
+
+const Header = ({ isChatbotHeaderClose, handleChatbotModal, toggleHeaderActionMenuModal }) => {
+  return (
+    <div className="relative w-[380px] sm:w-[428px] h-[96px] bg-white rounded-t-3xl">
+      {isChatbotHeaderClose && (
+        <div className="absolute top-10 rounded-lg right-3 border-2 border-gray text-[13px] py-2 bg-white w-[222px] z-10">
+          <div className="flex items-center h-[44px] py-2 gap-4 hover:bg-[#0e72ed] cursor-not-allowed">
+            <div className="w-4 h-4 ml-3 ">
+              <img alt="microphone" src={microPhone} />
+            </div>
+            <div title="NOT IMPLEMENTED">Mute Chat</div>
+          </div>
+          <div className="flex items-center h-[44px] py-2 gap-4 hover:bg-[#0e72ed] cursor-not-allowed ">
+            <div className="w-4 h-4 ml-3 cursor-not-allowed">
+              <img alt="download arrow" src={downloadArrow} />
+            </div>
+            <div className="cursor-not-allowed" title="NOT IMPLEMENTED">
+              Download Transcript
+            </div>
+          </div>
+          <div
+            aria-label="end chat button"
+            className="flex items-center cursor-pointer h-[44px] py-2 gap-4 hover:bg-[#0e72ed]"
+            role="button"
+            onClick={handleChatbotModal}
+          >
+            <div className="w-4 h-4 ml-3">
+              <img alt="cancel" src={cancelCircle} />
+            </div>
+            <div>End Chat</div>
+          </div>
+        </div>
+      )}
+      <div className="flex flex-col h-[96px] p-3  border-b border-gray">
+        <div className="flex justify-end">
+          <div className="flex mx-2 gap-3">
+            <button onClick={handleChatbotModal}>
+              <img
+                alt="close"
+                className="w-4 h-4 rounded-md hover:bg-gray-200 mt-1"
+                src={downArrow}
+              />
+            </button>
+            <button onClick={toggleHeaderActionMenuModal}>
+              <span className="bold text-gray-500 font-extrabold px-1 rounded-md hover:bg-gray-200 hover:cursor-pointer">
+                ···
+              </span>
+            </button>
+          </div>
+        </div>
+        <div className="flex ">
+          <img alt="zoomsupport" className="w-11 h-11 mr-7" src={zoomsupport} />
+          <div className="flex flex-col" style={{ fontSize: '14px' }}>
+            <p className="font-bold">Zoom Support</p>
+            <p>Powered by Zoom Virtual Agent</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;
diff --git a/src/plays/zoomlogin/components/chatbot/MessageParser.jsx b/src/plays/zoomlogin/components/chatbot/MessageParser.jsx
new file mode 100644
index 0000000000..6c34041e94
--- /dev/null
+++ b/src/plays/zoomlogin/components/chatbot/MessageParser.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+const passwordResetWords = ['reset', 'password'];
+
+const MessageParser = ({ children, actions }) => {
+  const parse = (rawMessage) => {
+    let message = rawMessage.toLowerCase();
+
+    if (passwordResetWords.some((word) => message.includes(word))) {
+      actions.handleResetPasswordDepth1();
+    } else if (message.includes('lock')) {
+      actions.handleAccountLocked();
+    } else if (message.includes('dog')) {
+      actions.handleDog();
+    } else {
+      actions.handleNotFindAnswer();
+    }
+  };
+
+  return (
+    <div>
+      {React.Children.map(children, (child) => {
+        return React.cloneElement(child, {
+          parse: parse,
+          actions
+        });
+      })}
+    </div>
+  );
+};
+
+export default MessageParser;
diff --git a/src/plays/zoomlogin/components/chatbot/MyUserAvatar.jsx b/src/plays/zoomlogin/components/chatbot/MyUserAvatar.jsx
new file mode 100644
index 0000000000..4d2d0fa1a5
--- /dev/null
+++ b/src/plays/zoomlogin/components/chatbot/MyUserAvatar.jsx
@@ -0,0 +1,22 @@
+const FlightBotAvatar = () => {
+  const now = new Date();
+  const formattedTime = new Intl.DateTimeFormat('en-US', {
+    hour: 'numeric',
+    minute: 'numeric',
+    hour12: true
+  }).format(now);
+
+  return (
+    <div className="flex absolute top-[-20px] right-2 items-baseline gap-3">
+      <div className="flex">
+        <div className="pb-2 pl-16 text-xs " style={{ fontSize: '11px' }}>
+          <span className="text-[#0404138f]" style={{ fontSize: '11px' }}>
+            {formattedTime} <span className="text-[#222230] ml-1"> You</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FlightBotAvatar;
diff --git a/src/plays/zoomlogin/components/chatbot/config.js b/src/plays/zoomlogin/components/chatbot/config.js
new file mode 100644
index 0000000000..fcf9db450d
--- /dev/null
+++ b/src/plays/zoomlogin/components/chatbot/config.js
@@ -0,0 +1,101 @@
+import { createChatBotMessage, createCustomMessage } from 'react-chatbot-kit';
+
+import DogPicture from './DogPicture';
+import FlightBotAvatar from './FlightBotAvatar';
+import Header from './Header.jsx';
+import MyUserAvatar from './MyUserAvatar';
+
+import AccountBlockedOption from './widget/AccountBlockedOption';
+import AccountDisabledOption from './widget/AccountDisabledOption';
+import AccountLockedOptions from './widget/AccountLockedOptions';
+import BlockedResetPasswordOption from './widget/BlockedResetPasswordOption';
+import {
+  ReactivateAccountCustomMsg,
+  RequestAppealCustomMsg,
+  ResetPassword2CustomMsg,
+  ResetPassword2NoteCustomMsg,
+  ResetPassword3CustomMsg,
+  ResetPasswordCustomMsg
+} from './widget/CustomMessages';
+import Error1030Option from './widget/Error1003Option';
+import InitialButtonOptions from './widget/InitialButtonOptions';
+import { InitialCustomMsg1, InitialCustomMsg2 } from './widget/InitialCustomMessages';
+import ResetPasswordDepth1Options from './widget/ResetPasswordDepth1Options';
+import ResetPasswordDepth2Options from './widget/ResetPasswordDepth2Options';
+
+const config = ({ isChatbotHeaderClose, handleChatbotModal, toggleHeaderActionMenuModal }) => {
+  return {
+    initialMessages: [
+      createCustomMessage('test', 'initialCustomMsg1'),
+      createCustomMessage('test', 'initialCustomMsg2'),
+      createChatBotMessage(
+        "It looks like you need help accessing your Zoom account. I'm here to help! How can I assist you?",
+        {
+          widget: 'initialButtonOptions',
+          withAvatar: false
+        }
+      )
+    ],
+    widgets: [
+      {
+        widgetName: 'dogPicture',
+        widgetFunc: (props) => <DogPicture {...props} />
+      },
+      {
+        widgetName: 'initialButtonOptions',
+        widgetFunc: (props) => <InitialButtonOptions {...props} />
+      },
+      {
+        widgetName: 'resetPasswordDepth1Options',
+        widgetFunc: (props) => <ResetPasswordDepth1Options {...props} />
+      },
+      {
+        widgetName: 'blockedResetPasswordOption',
+        widgetFunc: (props) => <BlockedResetPasswordOption {...props} />
+      },
+      {
+        widgetName: 'accountLockedOptions',
+        widgetFunc: (props) => <AccountLockedOptions {...props} />
+      },
+      {
+        widgetName: 'error1003Option',
+        widgetFunc: (props) => <Error1030Option {...props} />
+      },
+      {
+        widgetName: 'resetPasswordDepth2Options',
+        widgetFunc: (props) => <ResetPasswordDepth2Options {...props} />
+      },
+      {
+        widgetName: 'accountDisabledOption',
+        widgetFunc: (props) => <AccountDisabledOption {...props} />
+      },
+      {
+        widgetName: 'accountBlockedOption',
+        widgetFunc: (props) => <AccountBlockedOption {...props} />
+      }
+    ],
+    customComponents: {
+      header: () => (
+        <Header
+          handleChatbotModal={handleChatbotModal}
+          isChatbotHeaderClose={isChatbotHeaderClose}
+          toggleHeaderActionMenuModal={toggleHeaderActionMenuModal}
+        />
+      ),
+      botAvatar: (props) => <FlightBotAvatar {...props} />,
+      userAvatar: (props) => <MyUserAvatar {...props} />
+    },
+    customMessages: {
+      initialCustomMsg1: (props) => <InitialCustomMsg1 {...props} />,
+      initialCustomMsg2: (props) => <InitialCustomMsg2 {...props} />,
+      requestAppealCustommsg: (props) => <RequestAppealCustomMsg {...props} />,
+      reactivateAccountCustomMsg: (props) => <ReactivateAccountCustomMsg {...props} />,
+      resetPasswordCustomMsg: (props) => <ResetPasswordCustomMsg {...props} />,
+      resetPassword2CustomMsg: (props) => <ResetPassword2CustomMsg {...props} />,
+      resetPassword2NoteCustomMsg: (props) => <ResetPassword2NoteCustomMsg {...props} />,
+      resetPassword3CustomMsg: (props) => <ResetPassword3CustomMsg {...props} />
+    }
+  };
+};
+
+export default config;
diff --git a/src/plays/zoomlogin/components/chatbot/widget/AccountBlockedOption.jsx b/src/plays/zoomlogin/components/chatbot/widget/AccountBlockedOption.jsx
new file mode 100644
index 0000000000..46e8f993de
--- /dev/null
+++ b/src/plays/zoomlogin/components/chatbot/widget/AccountBlockedOption.jsx
@@ -0,0 +1,19 @@
+const AccountBlockedOption = (props) => {
+  const resetPasswordHandle = (message) => {
+    props.actionProvider.handleButtonClickResponse(message);
+    props.actionProvider.handleBlockedAccount(message);
+  };
+
+  return (
+    <div className="text-[#0e72ed] ml-[4rem] font-extrabold text-[14px]">
+      <button
+        className="inline-block border border-[#0e72ed] rounded-3xl px-4 py-1.5 m-1 hover:bg-[#0e72ed] hover:text-white hover:cursor-pointer"
+        onClick={resetPasswordHandle('Reset Password')}
+      >
+        Reset Password
+      </button>
+    </div>
+  );
+};
+
+export default AccountBlockedOption;
diff --git a/src/plays/zoomlogin/components/chatbot/widget/AccountDisabledOption.jsx b/src/plays/zoomlogin/components/chatbot/widget/AccountDisabledOption.jsx
new file mode 100644
index 0000000000..b0ad5749b0
--- /dev/null
+++ b/src/plays/zoomlogin/components/chatbot/widget/AccountDisabledOption.jsx
@@ -0,0 +1,23 @@
+const disabledAccountLink =
+  'https://support.zoom.com/hc/en/article?id=zm_kb&sysparm_article=KB0066997#h_16319724-d120-4be6-af5d-31582d134ea0';
+
+const AccountDisabledOption = (props) => {
+  const appealClickHandle = (message) => {
+    window.open(disabledAccountLink, '_blank', 'noreferrer');
+    props.actionProvider.handleButtonClickResponse(message);
+    props.actionProvider.handleReactivateAccount(message);
+  };
+
+  return (
+    <div className="text-[#0e72ed] ml-[4rem] font-extrabold text-[14px]">
+      <button
+        className="inline-block border border-[#0e72ed] rounded-3xl px-4 py-1.5 m-1 hover:bg-[#0e72ed] hover:text-white hover:cursor-pointer"
+        onClick={() => appealClickHandle('Reactivate Account')}
+      >
+        Reactivate Account
+      </button>
+    </div>
+  );
+};
+
+export default AccountDisabledOption;
diff --git a/src/plays/zoomlogin/components/chatbot/widget/AccountLockedOptions.jsx b/src/plays/zoomlogin/components/chatbot/widget/AccountLockedOptions.jsx
new file mode 100644
index 0000000000..8120673cfe
--- /dev/null
+++ b/src/plays/zoomlogin/components/chatbot/widget/AccountLockedOptions.jsx
@@ -0,0 +1,41 @@
+const AccountLockedOptions = (props) => {
+  const handleError1003 = (message) => {
+    props.actionProvider.handleButtonClickResponse(message);
+    props.actionProvider.handleError1003(message);
+  };
+
+  const handleAccountDisabled = (message) => {
+    props.actionProvider.handleButtonClickResponse(message);
+    props.actionProvider.handleAccountDisabled(message);
+  };
+
+  const handleAccountBlocked = (message) => {
+    props.actionProvider.handleButtonClickResponse(message);
+    props.actionProvider.handleAccountBlocked(message);
+  };
+
+  return (
+    <div className="text-[#0e72ed] ml-[4rem] font-extrabold text-[14px]">
+      <button
+        className="inline-block border border-[#0e72ed] rounded-3xl px-4 py-1.5 m-1 hover:bg-[#0e72ed] hover:text-white hover:cursor-pointer"
+        onClick={() => handleError1003('Error 1003')}
+      >
+        Error 1003
+      </button>
+      <button
+        className="inline-block border border-[#0e72ed] rounded-3xl px-4 py-1.5 m-1 hover:bg-[#0e72ed] hover:text-white hover:cursor-pointer"
+        onClick={() => handleAccountDisabled('Account is Disabled')}
+      >
+        Account is Disabled
+      </button>
+      <button
+        className="inline-block border border-[#0e72ed] rounded-3xl px-4 py-1.5 m-1 hover:bg-[#0e72ed] hover:text-white hover:cursor-pointer"
+        onClick={() => handleAccountBlocked('Account is Blocked')}
+      >
+        Account is Blocked
+      </button>
+    </div>
+  );
+};
+
+export default AccountLockedOptions;
diff --git a/src/plays/zoomlogin/components/chatbot/widget/BlockedResetPasswordOption.jsx b/src/plays/zoomlogin/components/chatbot/widget/BlockedResetPasswordOption.jsx
new file mode 100644
index 0000000000..630548dd6e
--- /dev/null
+++ b/src/plays/zoomlogin/components/chatbot/widget/BlockedResetPasswordOption.jsx
@@ -0,0 +1,19 @@
+const BlockedResetPasswordOption = (props) => {
+  const clickHandle = (message) => {
+    props.actionProvider.handleButtonClickResponse(message);
+    props.actionProvider.handleResetPasswordDepth1(message);
+  };
+
+  return (
+    <div className="text-[#0e72ed] ml-[4rem] font-extrabold text-[14px]">
+      <button
+        className="inline-block border border-[#0e72ed] rounded-3xl px-4 py-1.5 m-1 hover:bg-[#0e72ed] hover:text-white hover:cursor-pointer"
+        onClick={() => clickHandle('Reset Password')}
+      >
+        Reset Password
+      </button>
+    </div>
+  );
+};
+
+export default BlockedResetPasswordOption;
diff --git a/src/plays/zoomlogin/components/chatbot/widget/CustomMessages.jsx b/src/plays/zoomlogin/components/chatbot/widget/CustomMessages.jsx
new file mode 100644
index 0000000000..52c1b147a9
--- /dev/null
+++ b/src/plays/zoomlogin/components/chatbot/widget/CustomMessages.jsx
@@ -0,0 +1,149 @@
+import zoomsupport from '../../../assets/zoomsupport.png';
+
+const AvatarFirstMsg = (props) => {
+  const now = new Date();
+  const formattedTime = new Intl.DateTimeFormat('en-US', {
+    hour: 'numeric',
+    minute: 'numeric',
+    hour12: true
+  }).format(now);
+
+  return (
+    <>
+      <div className="relative flex items-baseline gap-3">
+        <img alt="zoomsupport" className="w-11 h-11 absolute bottom-[-44px]" src={zoomsupport} />
+        <div className="flex">
+          <div className="pb-2 pl-16 text-xs " style={{ fontSize: '11px' }}>
+            Bot{' '}
+            <span
+              className="inline-block bg-gray-100 text-[#02021c99] px-1 mx-1 font-bold"
+              style={{ fontSize: '10px' }}
+            >
+              BOT
+            </span>{' '}
+            <span className="text-[#0404138f]" style={{ fontSize: '11px' }}>
+              {formattedTime}
+            </span>
+          </div>
+        </div>
+      </div>
+      <div className="react-chatbot-kit-chat-bot-message-container">
+        <div className="react-chatbot-kit-chat-bot-message">{props.children}</div>
+      </div>
+    </>
+  );
+};
+
+export const RequestAppealCustomMsg = () => {
+  return (
+    <AvatarFirstMsg>
+      <span>
+        Accounts that don't follow{' '}
+        <u>
+          <a href="https://www.zoom.com/en/trust/terms/" rer="noopener noreferrer" target="_blank">
+            Zoom's Terms of Service
+          </a>{' '}
+        </u>{' '}
+        or{' '}
+        <u>
+          <a
+            href="https://explore.zoom.us/en/acceptable-use-guidelines/"
+            rer="noopener noreferrer"
+            target="_blank"
+          >
+            {' '}
+            Acceptable Use Guidelines
+          </a>
+        </u>{' '}
+        may be disabled without warning. Click <strong>Request an Appeal</strong> below to submit an
+        appeal to Zoom's Trust and Safety team.
+      </span>
+    </AvatarFirstMsg>
+  );
+};
+
+export const ReactivateAccountCustomMsg = () => {
+  return (
+    <div className="react-chatbot-kit-chat-bot-message-container">
+      <div className="react-chatbot-kit-chat-bot-message">
+        Click <strong>Reactivate Account</strong> below ⬇️ for instructions to provide to your
+        account owner or admins.
+      </div>
+    </div>
+  );
+};
+
+export const ResetPasswordCustomMsg = () => {
+  return (
+    <div className="react-chatbot-kit-chat-bot-message-container">
+      <div className="react-chatbot-kit-chat-bot-message">
+        <span>
+          Please wait 30 minutes and attempt to sign in to your Zoom account again. If you are not
+          sure what your password is, select <strong>Reset Password</strong> below ⬇️
+        </span>
+      </div>
+    </div>
+  );
+};
+// /avatar
+export const ResetPassword2CustomMsg = () => {
+  return (
+    <AvatarFirstMsg>
+      <span>
+        Click the <strong>Reset Password</strong> button below to start resetting your password.
+      </span>
+    </AvatarFirstMsg>
+  );
+};
+
+export const ResetPassword2NoteCustomMsg = () => {
+  return (
+    <div className="react-chatbot-kit-chat-bot-message-container">
+      <div className="react-chatbot-kit-chat-bot-message">
+        <i>
+          <strong>Note</strong>: For SSO accounts please contact your IT admin for assistance.
+        </i>
+      </div>
+    </div>
+  );
+};
+
+// avatar
+export const ResetPassword3CustomMsg = () => {
+  return (
+    <AvatarFirstMsg>
+      <span>
+        On the{' '}
+        <u>
+          <a
+            href="https://zoom.us/signin?_x_zm_rtaid=fivljXWpQrKKoem7pDiJ-A.1718349161955.560ac81f4ba3e98f5c967286d2f85289&_x_zm_rhtaid=430#/forgot-password"
+            rer="noopener noreferrer"
+            target="_blank"
+          >
+            Reset Password page
+          </a>
+        </u>
+        , follow these instructions: <br />
+        <br />
+        <i>
+          <strong>Note</strong>: To continue following instructions here, select the{' '}
+          <span className="text-red-600">Help</span> icon on the Reset Password page. <br />
+          <br />
+        </i>
+        <ul className="list-disc pl-10">
+          <li>
+            Enter your registered email address in the <strong>Email Address</strong> field
+          </li>
+          <li>
+            Click the <strong>I'm not a robot</strong> checkbox to complete the captcha verification
+          </li>
+          <li>
+            Click <strong>Send</strong>
+          </li>
+          <br />
+        </ul>
+        Check your email inbox and spam folders. Did you receive a verification email?
+      </span>
+    </AvatarFirstMsg>
+  );
+};
diff --git a/src/plays/zoomlogin/components/chatbot/widget/Error1003Option.jsx b/src/plays/zoomlogin/components/chatbot/widget/Error1003Option.jsx
new file mode 100644
index 0000000000..e79337ddfe
--- /dev/null
+++ b/src/plays/zoomlogin/components/chatbot/widget/Error1003Option.jsx
@@ -0,0 +1,22 @@
+const appealsLink = 'https://zoom.us/appeals';
+
+const Error1003Option = (props) => {
+  const appealClickHandle = (message) => {
+    window.open(appealsLink, '_blank', 'noreferrer');
+    props.actionProvider.handleButtonClickResponse(message);
+    props.actionProvider.handleRequestAppeal(message);
+  };
+
+  return (
+    <div className="text-[#0e72ed] ml-[4rem] font-extrabold text-[14px]">
+      <button
+        className="inline-block border border-[#0e72ed] rounded-3xl px-4 py-1.5 m-1 hover:bg-[#0e72ed] hover:text-white hover:cursor-pointer"
+        onClick={() => appealClickHandle('Request an Appeal')}
+      >
+        Request an Appeal
+      </button>
+    </div>
+  );
+};
+
+export default Error1003Option;
diff --git a/src/plays/zoomlogin/components/chatbot/widget/InitialButtonOptions.jsx b/src/plays/zoomlogin/components/chatbot/widget/InitialButtonOptions.jsx
new file mode 100644
index 0000000000..6658c199a6
--- /dev/null
+++ b/src/plays/zoomlogin/components/chatbot/widget/InitialButtonOptions.jsx
@@ -0,0 +1,47 @@
+const InitialButtonOptions = (props) => {
+  const handleAccountLockedClick = (message) => {
+    props.actionProvider.handleButtonClickResponse(message);
+    props.actionProvider.handleAccountLocked(message);
+  };
+  const handlePasswordLockedClick = (message) => {
+    props.actionProvider.handleButtonClickResponse(message);
+    props.actionProvider.handleResetPasswordDepth1(message);
+  };
+
+  return (
+    <div className="text-[#0e72ed] ml-[4rem] font-extrabold text-[13px] sm:text-[14px]">
+      <button
+        aria-label="My Account is Locked"
+        className="inline-block border border-[#0e72ed] rounded-3xl px-4 py-1.5 m-1 hover:bg-[#0e72ed] hover:text-white hover:cursor-not-allowed"
+        title="My Account is Locked"
+        onClick={() => handleAccountLockedClick('My Account is Locked')}
+      >
+        My Account is Locked
+      </button>
+      <button
+        aria-label="Reset Password"
+        className="inline-block border border-[#0e72ed] rounded-3xl px-4 py-1.5 m-1 hover:bg-[#0e72ed] hover:text-white hover:cursor-pointer"
+        title="Reset Password"
+        onClick={() => handlePasswordLockedClick('Reset Password')}
+      >
+        Reset Password
+      </button>
+      <button
+        aria-label="Not Receiving Emails from Zoom"
+        className="block border border-[#0e72ed] rounded-3xl px-4 py-1.5 m-1 hover:bg-[#0e72ed] hover:text-white hover:cursor-not-allowed"
+        title="Not Receiving Emails from Zoom"
+      >
+        Not Receiving Emails from Zoom
+      </button>
+      <button
+        aria-label="Zoom Account Does Not Exist"
+        className="inline-block border border-[#0e72ed] rounded-3xl px-4 py-1.5 m-1 hover:bg-[#0e72ed] hover:text-white hover:cursor-not-allowed"
+        title="Zoom Account Does Not Exist"
+      >
+        Zoom Account Does Not Exist
+      </button>
+    </div>
+  );
+};
+
+export default InitialButtonOptions;
diff --git a/src/plays/zoomlogin/components/chatbot/widget/InitialCustomMessages.jsx b/src/plays/zoomlogin/components/chatbot/widget/InitialCustomMessages.jsx
new file mode 100644
index 0000000000..fc035f4631
--- /dev/null
+++ b/src/plays/zoomlogin/components/chatbot/widget/InitialCustomMessages.jsx
@@ -0,0 +1,50 @@
+import zoomsupport from '../../../assets/zoomsupport.png';
+
+export const InitialCustomMsg1 = () => {
+  const now = new Date();
+  const formattedTime = new Intl.DateTimeFormat('en-US', {
+    hour: 'numeric',
+    minute: 'numeric',
+    hour12: true
+  }).format(now);
+
+  return (
+    <>
+      <div className="relative flex items-baseline gap-3">
+        <img alt="zoomsupport" className="w-11 h-11 absolute bottom-[-44px]" src={zoomsupport} />
+        <div className="flex">
+          <div className="pb-2 pl-16 text-xs " style={{ fontSize: '11px' }}>
+            Bot{' '}
+            <span
+              className="inline-block bg-gray-100 text-[#02021c99] px-1 mx-1 font-bold"
+              style={{ fontSize: '10px' }}
+            >
+              BOT
+            </span>{' '}
+            <span className="text-[#0404138f]" style={{ fontSize: '11px' }}>
+              {formattedTime}
+            </span>
+          </div>
+        </div>
+      </div>
+      <div className="react-chatbot-kit-chat-bot-message-container">
+        <div className="react-chatbot-kit-chat-bot-message">
+          <span className="italic">
+            Zoom may retain your chat transcript to use for quality, training, and analysis
+            purposes.
+          </span>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export const InitialCustomMsg2 = () => {
+  return (
+    <div className="react-chatbot-kit-chat-bot-message-container">
+      <div className="react-chatbot-kit-chat-bot-message">
+        Hi, I'm Zoe 🤖. Zoom's Virtual Agent for technical <b>Support</b> and <b>Billing</b>.
+      </div>
+    </div>
+  );
+};
diff --git a/src/plays/zoomlogin/components/chatbot/widget/ResetPasswordDepth1Options.jsx b/src/plays/zoomlogin/components/chatbot/widget/ResetPasswordDepth1Options.jsx
new file mode 100644
index 0000000000..a94fb2510f
--- /dev/null
+++ b/src/plays/zoomlogin/components/chatbot/widget/ResetPasswordDepth1Options.jsx
@@ -0,0 +1,37 @@
+const resetLink =
+  'https://zoom.us/signin?_x_zm_rtaid=HKrzXjrHSn2vowuK4sLAaw.1726436024755.6343ff4a8170c09e626fbdcb49099710&_x_zm_rhtaid=186#/forgot-password';
+
+const ResetPasswordDepth1Options = (props) => {
+  const handleResetPassword = (message) => {
+    window.open(resetLink, '_blank', 'noreferrer');
+    props.actionProvider.handleButtonClickResponse(message);
+    props.actionProvider.handleResetPasswordDepth2(message);
+  };
+
+  return (
+    <div className="text-[#0e72ed] ml-[4rem] font-extrabold text-[14px]">
+      <button
+        className="inline-block border border-[#0e72ed] rounded-3xl px-4 py-1.5 m-1 hover:bg-[#0e72ed] hover:text-white hover:cursor-pointer"
+        onClick={() => handleResetPassword('Reset Password')}
+      >
+        Reset Password
+      </button>
+      <button
+        className="inline-block border border-[#0e72ed] rounded-3xl px-4 py-1.5 m-1 hover:bg-[#0e72ed] hover:text-white hover:cursor-not-allowed"
+        title="NOT IMPLEMENTED"
+        onClick={() => alert('NOT IMPLEMENTED')}
+      >
+        Issues after resetting my password
+      </button>
+      <button
+        className="inline-block border border-[#0e72ed] rounded-3xl px-4 py-1.5 m-1 hover:bg-[#0e72ed] hover:text-white hover:cursor-not-allowed"
+        title="NOT IMPLEMENTED"
+        onClick={() => alert('NOT IMPLEMENTED')}
+      >
+        Other SSO related issues
+      </button>
+    </div>
+  );
+};
+
+export default ResetPasswordDepth1Options;
diff --git a/src/plays/zoomlogin/components/chatbot/widget/ResetPasswordDepth2Options.jsx b/src/plays/zoomlogin/components/chatbot/widget/ResetPasswordDepth2Options.jsx
new file mode 100644
index 0000000000..40b913bcea
--- /dev/null
+++ b/src/plays/zoomlogin/components/chatbot/widget/ResetPasswordDepth2Options.jsx
@@ -0,0 +1,32 @@
+const ResetPasswordDepth2Options = (props) => {
+  const handleYes = (message) => {
+    props.actionProvider.handleButtonClickResponse(message);
+  };
+
+  return (
+    <div className="text-[#0e72ed] ml-[4rem] font-extrabold text-[14px]">
+      <button
+        className="inline-block border border-[#0e72ed] rounded-3xl px-4 py-1.5 m-1 hover:bg-[#0e72ed] hover:text-white hover:cursor-pointer"
+        onClick={() => handleYes('Yes')}
+      >
+        Yes
+      </button>
+      <button
+        className="inline-block border border-[#0e72ed] rounded-3xl px-4 py-1.5 m-1 hover:bg-[#0e72ed] hover:text-white hover:cursor-not-allowed"
+        title="NOT IMPLEMENTED"
+        onClick={() => alert('NOT IMPLEMENTED')}
+      >
+        No
+      </button>
+      <button
+        className="inline-block border border-[#0e72ed] rounded-3xl px-4 py-1.5 m-1 hover:bg-[#0e72ed] hover:text-white hover:cursor-not-allowed"
+        title="NOT IMPLEMENTED"
+        onClick={() => alert('NOT IMPLEMENTED')}
+      >
+        Go back to previous menu
+      </button>
+    </div>
+  );
+};
+
+export default ResetPasswordDepth2Options;
diff --git a/src/plays/zoomlogin/styles.css b/src/plays/zoomlogin/styles.css
new file mode 100644
index 0000000000..0222fed60b
--- /dev/null
+++ b/src/plays/zoomlogin/styles.css
@@ -0,0 +1,46 @@
+/* enter stlyes here */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.play-details .play-details-body * {
+  font-family:
+    -apple-system,
+    Helvetica Neue,
+    sans-serif;
+}
+
+.play-details .play-details-body p .zoomlink {
+  color: #033a7d;
+}
+
+.play-details .play-details-body .zoominput {
+  border-width: 1px;
+  width: 100%;
+  margin: 0 0 12px 0;
+  border: 1px solid rgb(189 183 183);
+  padding: 0 0.5rem;
+}
+
+.react-chatbot-kit-chat-message-container .border {
+  border-color: #0e72ed;
+  border-style: solid;
+  margin: 4px;
+  padding: 6px 16px;
+}
+
+.react-chatbot-kit-chat-container ::-webkit-scrollbar-thumb {
+  background-color: #edeef0;
+  border-radius: 20px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+  height: 100px;
+}
+.react-chatbot-kit-chat-container ::-webkit-scrollbar {
+  width: 12px;
+}
+
+#zoomSignIn {
+  margin: 0;
+  border: none;
+}