From d86f71ee6ad2e5a14774d0ba690d340943554448 Mon Sep 17 00:00:00 2001
From: Laux Dev <2201104208@student.buksu.edu.ph>
Date: Sun, 1 Mar 2026 12:46:48 +0800
Subject: [PATCH] Added modals

---
 .../buttons/primarybutton/PrimaryButton.jsx   |  13 +
 .../buttons/primarybutton/styles.module.css   |  21 ++
 .../projects/view/add-from-scratch/page.jsx   |  49 +++-
 .../view/add-from-scratch/styles.module.css   |   2 +-
 .../AddConfigMap/AddConfigMapModal.jsx        |  78 ++++++
 .../AddConfigMap/styles.module.css            | 253 ++++++++++++++++++
 .../AddVariableModal/AddVariableModal.jsx     | 103 +++++--
 .../AddVariableModal/styles.module.css        | 201 ++++++++++++++
 .../AddVolumes/AddVolumeModal.jsx             |  71 +++++
 .../AddVolumes/styles.module.css              | 201 ++++++++++++++
 .../variableStyles.module.css                 |  28 +-
 11 files changed, 993 insertions(+), 27 deletions(-)
 create mode 100644 frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx
 create mode 100644 frontend/src/app/components/buttons/primarybutton/styles.module.css

diff --git a/frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx b/frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx
new file mode 100644
index 0000000..25e077b
--- /dev/null
+++ b/frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import styles from "./styles.module.css";
+import AddIcon from "../../icons/add";
+const PrimaryButton = (props) => {
+  return (
+    <button className={styles.button} {...props}>
+      <AddIcon width={20} height={20} />
+      Add
+    </button>
+  );
+};
+
+export default PrimaryButton;
diff --git a/frontend/src/app/components/buttons/primarybutton/styles.module.css b/frontend/src/app/components/buttons/primarybutton/styles.module.css
new file mode 100644
index 0000000..6285de4
--- /dev/null
+++ b/frontend/src/app/components/buttons/primarybutton/styles.module.css
@@ -0,0 +1,21 @@
+.button {
+  display: flex;
+  padding: 8px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  font-family: inter;
+  border-radius: 6px;
+  border: 0.5px solid #8187ff;
+  background: rgba(83, 89, 242, 0.25);
+  color: #fff;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.16px;
+  cursor: pointer;
+}
+.button:hover {
+  background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%);
+}
diff --git a/frontend/src/app/projects/view/add-from-scratch/page.jsx b/frontend/src/app/projects/view/add-from-scratch/page.jsx
index faca479..3c918bc 100644
--- a/frontend/src/app/projects/view/add-from-scratch/page.jsx
+++ b/frontend/src/app/projects/view/add-from-scratch/page.jsx
@@ -5,11 +5,26 @@ import TopHeader from "@/app/components/topHeader/TopHeader";
 import styles from "./styles.module.css";
 import variableStyles from "./variableStyles.module.css";
 import TextField from "@/app/components/fields/textfield";
+import AddVariableModal from "./variableModals/AddVariableModal/AddVariableModal";
+import AddVolumeModal from "./variableModals/AddVolumes/AddVolumeModal";
+import AddConfigMapModal from "./variableModals/AddConfigMap/AddConfigMapModal";
+import DeleteIcon from "@/app/components/icons/delete";
 const AddServices = () => {
   const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
-
+  const [triggerAddVariable, setTriggerAddVariable] = useState(false);
+  const [triggerAddVolume, setTriggerAddVolume] = useState(false);
+  const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(true);
   return (
     <div className={globalStyle.section}>
+      {triggerAddVariable && (
+        <AddVariableModal setTriggerAddVariable={setTriggerAddVariable} />
+      )}
+      {triggerAddVolume && (
+        <AddVolumeModal setTriggerAddVolume={setTriggerAddVolume} />
+      )}
+      {triggeAddConfigMap && (
+        <AddConfigMapModal setTriggerAddConfigMap={setTriggerAddConfigMap} />
+      )}
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
           <TopHeader
@@ -245,13 +260,34 @@ const AddServices = () => {
                     </div>
                     {triggerVariableDropDown && (
                       <div className={variableStyles.dropDownContainer}>
-                        <div>
+                        <div
+                          onClick={() => {
+                            setTriggerAddVariable(true);
+                            setTriggerVariableDropDown(
+                              !triggerVariableDropDown,
+                            );
+                          }}
+                        >
                           <p>Environment Variables</p>
                         </div>
-                        <div>
+                        <div
+                          onClick={() => {
+                            setTriggerAddVolume(true);
+                            setTriggerVariableDropDown(
+                              !triggerVariableDropDown,
+                            );
+                          }}
+                        >
                           <p>Volumes</p>
                         </div>
-                        <div>
+                        <div
+                          onClick={() => {
+                            setTriggerAddConfigMap(true);
+                            setTriggerVariableDropDown(
+                              !triggerVariableDropDown,
+                            );
+                          }}
+                        >
                           <p>Config Maps</p>
                         </div>
                       </div>
@@ -282,6 +318,11 @@ const AddServices = () => {
                             <p>No Environment Variables added</p>
                           </div>
                         </div>
+                        {/* <div className={variableStyles.variable}>
+                          <p>REQUEST_SERVICE_GRPC</p>
+                          <p>request-service:50053</p>
+                          <DeleteIcon />
+                        </div> */}
                       </div>
                     </div>
                   </div>
diff --git a/frontend/src/app/projects/view/add-from-scratch/styles.module.css b/frontend/src/app/projects/view/add-from-scratch/styles.module.css
index 56bed09..a02fb33 100644
--- a/frontend/src/app/projects/view/add-from-scratch/styles.module.css
+++ b/frontend/src/app/projects/view/add-from-scratch/styles.module.css
@@ -18,7 +18,7 @@
 }
 .projectDetails {
   display: flex;
-  padding: 0 36px;
+  padding: 0 24px;
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
diff --git a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/AddConfigMapModal.jsx b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/AddConfigMapModal.jsx
index 8b13789..4061ff7 100644
--- a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/AddConfigMapModal.jsx
+++ b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/AddConfigMapModal.jsx
@@ -1 +1,79 @@
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+import CloseIcon from "@/app/components/icons/close";
+import TextField from "@/app/components/fields/textfield";
+import AddIcon from "@/app/components/icons/add";
+import PrimaryButton from "@/app/components/buttons/primarybutton/PrimaryButton";
+const AddConfigMapModal = (props) => {
+  const [isGeneric, setIsGeneric] = useState(true);
+  return (
+    <div className={styles.container}>
+      <div className={styles.modal}>
+        <div className={styles.header}>
+          <p>Volumes</p>
+          <CloseIcon onClick={() => props.setTriggerAddConfigMap(false)} />
+        </div>
+        <div className={styles.contentContainer}>
+          <div>
+            <div className={styles.fieldContainer}>
+              <div className={styles.fields}>
+                <div className={styles.horizontalInput}>
+                  <div>
+                    <div>
+                      <p>Sub Path</p>
+                      <TextField placeHolder="Enter volume name" />
+                    </div>
+                    <div>
+                      <p>Mount Path</p>
+                      <TextField placeHolder="Enter path    " />
+                    </div>
+                  </div>
+                </div>
 
+                <div className={styles.radioButtonsContainer}>
+                  <div>
+                    <p>Type</p>
+                    <div>
+                      {" "}
+                      <div>
+                        <label className={styles.radio}>
+                          <input type="radio" name="typeOption" />
+                          <span className={styles.custom}></span>
+                          Raw
+                        </label>
+                      </div>
+                      <div>
+                        <label className={styles.radio}>
+                          <input type="radio" name="typeOption" />
+                          <span className={styles.custom}></span>
+                          Credential
+                        </label>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className={styles.verticalInput}>
+                  <div>
+                    <div>
+                      <p>Value</p>
+                    </div>
+
+                    <textarea
+                      name=""
+                      id=""
+                      placeholder="Enter a description"
+                    ></textarea>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className={styles.addButtonContainer}>
+          <PrimaryButton />
+        </div>
+      </div>
+    </div>
+  );
+};
+export default AddConfigMapModal;
diff --git a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/styles.module.css b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/styles.module.css
index e69de29..4c1b441 100644
--- a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/styles.module.css
+++ b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/styles.module.css
@@ -0,0 +1,253 @@
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #00000037;
+}
+.modal {
+  display: flex;
+  width: 593px;
+
+  padding: 16px 16px 24px 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  border-radius: 8px;
+  background: #21232f;
+  animation-name: modalAnimation;
+  animation-duration: 200ms;
+}
+
+@keyframes modalAnimation {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.header > svg {
+  cursor: pointer;
+}
+
+.header > p {
+  color: #d2d3e1;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.24px;
+}
+.contentContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.contentContainer > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 32px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.contentHeader {
+  display: flex;
+  padding-top: 8px;
+  align-items: flex-start;
+  gap: 17px;
+  align-self: stretch;
+}
+.contentHeader > div {
+  display: flex;
+  padding: 0 6px 6px 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  color: #d2d3e1;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.16px;
+  cursor: pointer;
+}
+.selectActive {
+  border-bottom: 2px solid #8187ff;
+}
+.fieldContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.fields {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.horizontalInput {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+}
+.horizontalInput > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex: 1 0 0;
+}
+
+.horizontalInput > div > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1 0 0;
+}
+.verticalInput {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+}
+.verticalInput > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+
+  flex: 1 0 0;
+}
+.verticalInput p {
+  color: #d2d3e1;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+
+.verticalInput textarea {
+  display: flex;
+  height: 120px;
+  padding: 12px;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: transparent;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 1px solid #4b4f6d;
+  resize: none;
+  color: #85869b;
+  font-size: 16px;
+  font-family: inter;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+.radioButtonsContainer {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.radioButtonsContainer > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1 0 0;
+}
+.radioButtonsContainer p {
+  display: flex;
+  align-items: flex-start;
+  color: #d2d3e1;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+.radioButtonsContainer > div > div {
+  display: flex;
+  align-items: flex-start;
+  gap: 24px;
+}
+.radioButtonsContainer > div > div > div {
+  display: flex;
+  padding: 12px 4px;
+  align-items: center;
+  gap: 12px;
+}
+.radio {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  gap: 8px;
+}
+.radio input {
+  display: none;
+}
+
+.radio .custom {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #4b4f6d;
+  border-radius: 50%;
+  position: relative;
+  background-color: #fff;
+}
+
+.radio .custom::after {
+  content: "";
+  width: 10px;
+  height: 10px;
+  background: #5980f1;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0);
+}
+
+.radio input:checked + .custom::after {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.addButtonContainer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+}
diff --git a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/AddVariableModal.jsx b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/AddVariableModal.jsx
index c18b080..a478a53 100644
--- a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/AddVariableModal.jsx
+++ b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/AddVariableModal.jsx
@@ -1,45 +1,112 @@
-import React from "react";
+import React, { useState } from "react";
 import styles from "./styles.module.css";
 import CloseIcon from "@/app/components/icons/close";
 import TextField from "@/app/components/fields/textfield";
-const AddConfigMapModal = () => {
+import AddIcon from "@/app/components/icons/add";
+import PrimaryButton from "@/app/components/buttons/primarybutton/PrimaryButton";
+const AddVariableModal = (props) => {
+  const [isGeneric, setIsGeneric] = useState(true);
   return (
     <div className={styles.container}>
       <div className={styles.modal}>
-        <div className={styles.modalHeader}>
+        <div className={styles.header}>
           <p>Environment Variables</p>
-          <CloseIcon />
+          <CloseIcon onClick={() => props.setTriggerAddVariable(false)} />
         </div>
         <div className={styles.contentContainer}>
           <div>
             <div className={styles.contentHeader}>
-              <div>
+              <div
+                className={isGeneric ? styles.selectActive : ""}
+                onClick={() => setIsGeneric(true)}
+              >
                 <p>Generic</p>
               </div>
-              <div>
-                <p>Generic</p>
+              <div
+                className={!isGeneric ? styles.selectActive : ""}
+                onClick={() => setIsGeneric(false)}
+              >
+                <p>Connection String</p>
               </div>
             </div>
             <div className={styles.fieldContainer}>
               <div className={styles.fields}>
-                <div>
-                  <div>
-                    <div>
-                      <p>Key</p>
-                      <TextField placeHolder="Enter variable key" />
+                {isGeneric ? (
+                  <>
+                    <div className={styles.horizontalInput}>
+                      <div>
+                        <div>
+                          <p>Key</p>
+                          <TextField placeHolder="Enter variable key" />
+                        </div>
+                        <div>
+                          <p>Value</p>
+                          <TextField placeHolder="Enter Value" />
+                        </div>
+                      </div>
                     </div>
-                    <div>
-                      <p>Value</p>
-                      <TextField placeHolder="Enter" />
+                    <div className={styles.verticalInput}>
+                      <div>
+                        <div>
+                          <p>Description (Optional)</p>
+                        </div>
+
+                        <textarea
+                          name=""
+                          id=""
+                          placeholder="Enter a description"
+                        ></textarea>
+                      </div>
                     </div>
-                  </div>
-                </div>
+                  </>
+                ) : (
+                  <>
+                    <div className={styles.verticalInput}>
+                      <div>
+                        <div>
+                          <p>Variable Name</p>
+                        </div>
+                        <TextField />
+                      </div>
+                    </div>
+                    <div className={styles.horizontalInput}>
+                      <div>
+                        <div>
+                          <p>Protocol</p>
+                          <TextField placeHolder="MongoDB" />
+                        </div>
+                        <div>
+                          <p>Service</p>
+                          <TextField placeHolder="Select a service" />
+                        </div>
+                      </div>
+                    </div>
+                    <div className={styles.authenticationContainer}>
+                      <p>Authentication (Optional)</p>
+                      <div className={styles.horizontalInput}>
+                        <div>
+                          <div>
+                            <p>Protocol</p>
+                            <TextField placeHolder="MongoDB" />
+                          </div>
+                          <div>
+                            <p>Service</p>
+                            <TextField placeHolder="Select a service" />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </>
+                )}
               </div>
             </div>
           </div>
         </div>
+        <div className={styles.addButtonContainer}>
+          <PrimaryButton />
+        </div>
       </div>
     </div>
   );
 };
-export default AddConfigMapModal;
+export default AddVariableModal;
diff --git a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/styles.module.css b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/styles.module.css
index e69de29..597ca7e 100644
--- a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/styles.module.css
+++ b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/styles.module.css
@@ -0,0 +1,201 @@
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #00000037;
+}
+.modal {
+  display: flex;
+  width: 593px;
+  height: 566px;
+  padding: 16px 16px 24px 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  border-radius: 8px;
+  background: #21232f;
+  animation-name: modalAnimation;
+  animation-duration: 200ms;
+}
+@keyframes modalAnimation {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.header > svg {
+  cursor: pointer;
+}
+
+.header > p {
+  color: #d2d3e1;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.24px;
+}
+.contentContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.contentContainer > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 32px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.contentHeader {
+  display: flex;
+  padding-top: 8px;
+  align-items: flex-start;
+  gap: 17px;
+  align-self: stretch;
+}
+.contentHeader > div {
+  display: flex;
+  padding: 0 6px 6px 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  color: #d2d3e1;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.16px;
+  cursor: pointer;
+}
+.selectActive {
+  border-bottom: 2px solid #8187ff;
+}
+.fieldContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.fields {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.horizontalInput {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+}
+.horizontalInput > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex: 1 0 0;
+}
+
+.horizontalInput > div > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1 0 0;
+}
+.verticalInput {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+}
+.verticalInput > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+
+  flex: 1 0 0;
+}
+.verticalInput p {
+  color: #d2d3e1;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+
+.verticalInput textarea {
+  display: flex;
+  height: 120px;
+  padding: 12px;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: transparent;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 1px solid #4b4f6d;
+  resize: none;
+  color: #85869b;
+  font-size: 16px;
+  font-family: inter;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+.authenticationContainer {
+  display: flex;
+  padding: 12px 12px 32px 12px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  border-radius: 6px;
+  background: #272b3a;
+}
+.authenticationContainer > p {
+  color: #85869b;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+.addButtonContainer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+}
diff --git a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/AddVolumeModal.jsx b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/AddVolumeModal.jsx
index e69de29..6f2ffdd 100644
--- a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/AddVolumeModal.jsx
+++ b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/AddVolumeModal.jsx
@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+import CloseIcon from "@/app/components/icons/close";
+import TextField from "@/app/components/fields/textfield";
+import AddIcon from "@/app/components/icons/add";
+import PrimaryButton from "@/app/components/buttons/primarybutton/PrimaryButton";
+const AddVolumeModal = (props) => {
+  const [isGeneric, setIsGeneric] = useState(true);
+  return (
+    <div className={styles.container}>
+      <div className={styles.modal}>
+        <div className={styles.header}>
+          <p>Volumes</p>
+          <CloseIcon onClick={() => props.setTriggerAddVolume(false)} />
+        </div>
+        <div className={styles.contentContainer}>
+          <div>
+            <div className={styles.fieldContainer}>
+              <div className={styles.fields}>
+                <div className={styles.horizontalInput}>
+                  <div>
+                    <div>
+                      <p>Name</p>
+                      <TextField placeHolder="Enter volume name" />
+                    </div>
+                    <div>
+                      <p>Path</p>
+                      <TextField placeHolder="Enter path    " />
+                    </div>
+                  </div>
+                </div>
+                <div className={styles.horizontalInput}>
+                  <div>
+                    <div>
+                      <p>Existing Claim (Optional)</p>
+                      <TextField placeHolder="Create new PVC" />
+                    </div>
+                    <div>
+                      <p>Volume size (MB)</p>
+                      <TextField placeHolder="0" />
+                    </div>
+                  </div>
+                </div>
+                <div className={styles.verticalInput}>
+                  <div>
+                    <div>
+                      <p>Storage Class name</p>
+                    </div>
+                    <TextField placeHolder="e.g., efs-sc" />
+                  </div>
+                </div>
+                <div className={styles.verticalInput}>
+                  <div>
+                    <div>
+                      <p>Access Mode</p>
+                    </div>
+                    <TextField placeHolder="ReadWriteOnce (RWO) - Single node read-write" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className={styles.addButtonContainer}>
+          <PrimaryButton />
+        </div>
+      </div>
+    </div>
+  );
+};
+export default AddVolumeModal;
diff --git a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/styles.module.css b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/styles.module.css
index e69de29..fae6e73 100644
--- a/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/styles.module.css
+++ b/frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/styles.module.css
@@ -0,0 +1,201 @@
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #00000037;
+}
+.modal {
+  display: flex;
+  width: 593px;
+
+  padding: 16px 16px 24px 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  border-radius: 8px;
+  background: #21232f;
+  animation-name: modalAnimation;
+  animation-duration: 200ms;
+}
+@keyframes modalAnimation {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.header > svg {
+  cursor: pointer;
+}
+
+.header > p {
+  color: #d2d3e1;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.24px;
+}
+.contentContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.contentContainer > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 32px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.contentHeader {
+  display: flex;
+  padding-top: 8px;
+  align-items: flex-start;
+  gap: 17px;
+  align-self: stretch;
+}
+.contentHeader > div {
+  display: flex;
+  padding: 0 6px 6px 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  color: #d2d3e1;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.16px;
+  cursor: pointer;
+}
+.selectActive {
+  border-bottom: 2px solid #8187ff;
+}
+.fieldContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+.fields {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.horizontalInput {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+}
+.horizontalInput > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex: 1 0 0;
+}
+
+.horizontalInput > div > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1 0 0;
+}
+.verticalInput {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+}
+.verticalInput > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+
+  flex: 1 0 0;
+}
+.verticalInput p {
+  color: #d2d3e1;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+
+.verticalInput textarea {
+  display: flex;
+  height: 120px;
+  padding: 12px;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: transparent;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 1px solid #4b4f6d;
+  resize: none;
+  color: #85869b;
+  font-size: 16px;
+  font-family: inter;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+.authenticationContainer {
+  display: flex;
+  padding: 12px 12px 32px 12px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  border-radius: 6px;
+  background: #272b3a;
+}
+.authenticationContainer > p {
+  color: #85869b;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+}
+.addButtonContainer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+}
diff --git a/frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css b/frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css
index fa6f5c1..98754a4 100644
--- a/frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css
+++ b/frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css
@@ -145,6 +145,26 @@
   border-radius: 4px;
   background: #1d1e2a;
 }
+.variable {
+  display: flex;
+  padding: 8px 0;
+  align-items: center;
+  align-self: stretch;
+  border-bottom: 0.5px solid #2e3042;
+  width: 100%;
+}
+.variable p {
+  display: flex;
+  align-items: center;
+  flex: 1 0 0;
+  align-self: stretch;
+  color: #d2d3e1;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.15px;
+}
 .environmentVariablesContainer {
   display: flex;
   padding-bottom: 50px;
@@ -199,13 +219,14 @@
 }
 .variableList {
   display: flex;
-  padding: 24px 16px 0 16px;
-  align-items: flex-start;
+  padding: 0 16px 16px 16px;
+  flex-direction: column;
+  align-items: center;
   align-self: stretch;
 }
 .emptyVariableList {
   display: flex;
-  padding-bottom: 24px;
+  padding: 24px 16px 0 16px;
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
@@ -224,7 +245,6 @@
   flex: 1 0 0;
   color: #85869b;
   text-align: center;
-  font-family: Inter;
   font-size: 16px;
   font-style: normal;
   font-weight: 500;