diff --git a/Client/src/App.jsx b/Client/src/App.jsx
index 519f2fc59..3e3a46702 100644
--- a/Client/src/App.jsx
+++ b/Client/src/App.jsx
@@ -1,7 +1,11 @@
+import PlayGroundPopupModals from "./screens/PlayGround/PlayGround-Popup-Modals";
+
 function App() {
   return (
     <>
-      <div></div>
+      <div>
+        <PlayGroundPopupModals />
+      </div>
     </>
   );
 }
diff --git a/Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx b/Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx
new file mode 100644
index 000000000..f1585a9cb
--- /dev/null
+++ b/Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx
@@ -0,0 +1,20 @@
+import "./dualButtonPopupModal.css";
+import React from "react";
+
+function DualButtonPopupModal({ open = true }) {
+  return (
+    <div className="dual-button-popup-modal-holder">
+      <div className="dual-button-popup-modal-subject">Unsaved changes</div>
+      <div className="dual-button-popup-modal-description">
+        Do you want to save or discard changes?
+      </div>
+      <div className="dual-modal-spacing"></div>
+      <div className="dual-button-popup-modal-controllers">
+        <button className="transparent-discard-button">Discard</button>
+        <button className="blue-save-button">Save changes</button>
+      </div>
+    </div>
+  );
+}
+
+export default DualButtonPopupModal;
diff --git a/Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css b/Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css
new file mode 100644
index 000000000..73d6e9e4a
--- /dev/null
+++ b/Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css
@@ -0,0 +1,62 @@
+:root {
+  --popup-color-border-0: #f2f2f2;
+  --popup-font-family-0: "Roboto", "Helvetica", "Arial", sans-serif;
+  --popup-color-0: #101828;
+  --popup-color-1: #475467;
+  --color-0: #1570ef;
+  --color-1: #175cd3;
+}
+
+.dual-button-popup-modal-holder {
+  width: 380px;
+  height: 130px;
+  margin: 10px 20px;
+  padding: 30px;
+  box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03),
+    0px 20px 24px -4px rgba(16, 24, 40, 0.08);
+  border: 1px solid var(--popup-color-border-0);
+  border-radius: 4px;
+}
+
+.dual-button-popup-modal-subject {
+  font-family: var(--popup-font-family-0);
+  color: var(--popup-color-0);
+  font-weight: 900;
+}
+
+.dual-button-popup-modal-description {
+  font-family: var(--popup-font-family-0);
+  color: var(--popup-color-1);
+  font-size: 13px;
+  margin-top: 10px;
+}
+
+.dual-modal-spacing {
+  height: 40px;
+}
+
+.dual-button-popup-modal-controllers {
+  display: flex;
+  justify-content: end;
+}
+
+.blue-save-button {
+  width: 145px;
+  height: 35px;
+  padding: 5px 20px;
+  background-color: var(--color-0);
+  border: 1px solid var(--color-1);
+  border-radius: 4px;
+  margin: 5px 0;
+  margin-left: 20px;
+  color: white;
+  font-family: var(--popup-font-family-0);
+  cursor: pointer;
+}
+
+.transparent-discard-button {
+  border: none;
+  background-color: transparent;
+  font-family: var(--popup-font-family-0);
+  margin: 5px 10px;
+}
diff --git a/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx b/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx
new file mode 100644
index 000000000..950e592af
--- /dev/null
+++ b/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx
@@ -0,0 +1,36 @@
+import "./dualButtonPopupModalWithTextfields.css";
+import React from "react";
+import CloseIcon from "@mui/icons-material/Close";
+import { TextField } from "@mui/material";
+
+function DualButtonPopupModalWithTextfields() {
+  return (
+    <div className="popup-modal-holder">
+      <div className="popup-modal-header">
+        <div className="popup-modal-title">Create new organization</div>
+        <div className="popup-modal-close">
+          <CloseIcon style={{ fill: "#98A2B3" }} />
+        </div>
+      </div>
+      <div className="spacing-height"></div>
+      {PopupModalTextfield()}
+      <div className="spacing-height"></div>
+      <div className="spacing-height"></div>
+      <div className="popup-modal-controllers">
+        <button className="white-cancel-button">Cancel</button>
+        <button className="blue-save-button">Save</button>
+      </div>
+    </div>
+  );
+}
+
+export default DualButtonPopupModalWithTextfields;
+
+function PopupModalTextfield() {
+  return (
+    <div className="popup-modal-input">
+      <div className="popup-modal-input-title">Name</div>
+      <input type="text" className="popup-modal-text-field" />
+    </div>
+  );
+}
diff --git a/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css b/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css
new file mode 100644
index 000000000..af66589d2
--- /dev/null
+++ b/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css
@@ -0,0 +1,60 @@
+:root {
+  --popup-color-with-input-border-0: #f2f2f2;
+  --popup-color-with-input-border-1: #d0d5dd;
+  --popup-modal-with-input-title-color: #344054;
+}
+
+.popup-modal-holder {
+  width: 480px;
+  font-family: var(--popup-font-family-0);
+  padding: 50px 40px;
+  border-radius: 4px;
+  margin: 10px 20px;
+  border: 1px solid var(--popup-color-with-input-border-0);
+  box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03),
+    0px 20px 24px -4px rgba(16, 24, 40, 0.08);
+}
+
+.popup-modal-header {
+  display: flex;
+  justify-content: space-between;
+  font-weight: bold;
+}
+
+.popup-modal-close {
+  cursor: pointer;
+}
+
+.spacing-height {
+  height: 30px;
+}
+
+.popup-modal-input-title {
+  margin-bottom: 20px;
+  color: var(--popup-modal-with-input-title-color);
+}
+
+.popup-modal-text-field {
+  width: 100%;
+  height: 35px;
+  border: 1px solid var(--popup-color-with-input-border-1);
+  border-radius: 4px;
+}
+
+.popup-modal-controllers {
+  display: flex;
+  justify-content: end;
+}
+
+.white-cancel-button {
+  border: none;
+  background-color: transparent;
+  font-family: var(--popup-font-family-0);
+  margin: 5px 10px;
+  width: 145px;
+  height: 35px;
+  padding: 5px 20px;
+  border: 1px solid var(--popup-color-with-input-border-1);
+  border-radius: 4px;
+  cursor: pointer;
+}
diff --git a/Client/src/screens/PlayGround/PlayGround-Popup-Modals.jsx b/Client/src/screens/PlayGround/PlayGround-Popup-Modals.jsx
new file mode 100644
index 000000000..2128dcae2
--- /dev/null
+++ b/Client/src/screens/PlayGround/PlayGround-Popup-Modals.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import DualButtonPopupModal from "../../components/PopupModals/DualButtonPopupModal/DualButtonPopupModal";
+import DualButtonPopupModalWithTextfields from "../../components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields";
+
+function PlayGroundPopupModals() {
+  return (
+    <div style={{ display: "flex" }}>
+      <DualButtonPopupModal />
+      <br />
+      <br />
+      <DualButtonPopupModalWithTextfields />
+    </div>
+  );
+}
+
+export default PlayGroundPopupModals;