diff --git a/Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css b/Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css
index a5803a412..73d6e9e4a 100644
--- a/Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css
+++ b/Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css
@@ -9,6 +9,7 @@
.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),
@@ -46,7 +47,8 @@
background-color: var(--color-0);
border: 1px solid var(--color-1);
border-radius: 4px;
- margin: 5px 10px;
+ margin: 5px 0;
+ margin-left: 20px;
color: white;
font-family: var(--popup-font-family-0);
cursor: pointer;
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 (
+
+
+
Create new organization
+
+
+
+
+
+ {PopupModalTextfield()}
+
+
+
+
+
+
+
+ );
+}
+
+export default DualButtonPopupModalWithTextfields;
+
+function PopupModalTextfield() {
+ return (
+
+ );
+}
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
index 843753704..2128dcae2 100644
--- a/Client/src/screens/PlayGround/PlayGround-Popup-Modals.jsx
+++ b/Client/src/screens/PlayGround/PlayGround-Popup-Modals.jsx
@@ -1,10 +1,14 @@
import React from "react";
import DualButtonPopupModal from "../../components/PopupModals/DualButtonPopupModal/DualButtonPopupModal";
+import DualButtonPopupModalWithTextfields from "../../components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields";
function PlayGroundPopupModals() {
return (
-