From 6fd78aa92fbade3955d2d5eb331bf8fa7db87aa9 Mon Sep 17 00:00:00 2001
From: Laux Dev <2201104208@student.buksu.edu.ph>
Date: Wed, 18 Mar 2026 16:18:55 +0800
Subject: [PATCH] Add feature

---
 .../app/components/checkbox/styles.module.css |  10 +-
 frontend/src/app/components/icons/check.jsx   |   3 +-
 .../components/radio-button/RadioButton.jsx   |  15 +
 .../components/radio-button/styles.module.css |  44 ++
 .../[servicesId]/LogsModal/styles.module.css  |   4 +-
 .../app/projects/view/[servicesId]/page.jsx   | 424 +++------------
 .../view/[servicesId]/projectDetails.jsx      | 323 +++++++++++
 .../projects/view/[servicesId]/settings.jsx   | 171 ++++++
 .../view/[servicesId]/styles.module.css       | 155 +++++-
 .../[servicesId]/variableStyles.module.css    |  23 +-
 .../projects/view/add-from-scratch/page.jsx   |  23 +-
 .../view/add-from-scratch/projectDetails.jsx  | 511 ++++++++++--------
 .../view/add-from-scratch/settings.jsx        |   3 +-
 .../view/add-from-scratch/styles.module.css   | 105 +++-
 .../variableStyles.module.css                 |  14 +-
 .../AddConfigMap/AddConfigMapModal.jsx        |  53 +-
 .../AddConfigMap/styles.module.css            |  37 +-
 .../AddVariableModal/AddVariableModal.jsx     |   4 +-
 .../AddVariableModal/styles.module.css        |  17 +-
 .../AddVolumes/styles.module.css              |  13 +-
 20 files changed, 1268 insertions(+), 684 deletions(-)
 create mode 100644 frontend/src/app/components/radio-button/RadioButton.jsx
 create mode 100644 frontend/src/app/components/radio-button/styles.module.css
 create mode 100644 frontend/src/app/projects/view/[servicesId]/projectDetails.jsx
 create mode 100644 frontend/src/app/projects/view/[servicesId]/settings.jsx

diff --git a/frontend/src/app/components/checkbox/styles.module.css b/frontend/src/app/components/checkbox/styles.module.css
index dbe7766..adfd1fb 100644
--- a/frontend/src/app/components/checkbox/styles.module.css
+++ b/frontend/src/app/components/checkbox/styles.module.css
@@ -1,7 +1,7 @@
 .switch {
   display: flex;
-  width: 53px;
-  height: 33px;
+  width: 50px;
+  height: 30px;
   align-items: center;
   background-color: white;
   cursor: pointer;
@@ -16,8 +16,8 @@
   display: none;
 }
 .knob {
-  width: 25px;
-  height: 25px;
+  width: 22px;
+  height: 22px;
   background-color: #6d6d6d;
   border-radius: 50%;
   display: flex;
@@ -32,7 +32,7 @@
 }
 
 .check:checked + .switch .knob {
-  transform: translateX(78%);
+  transform: translateX(90%);
   background-color: white;
 }
 
diff --git a/frontend/src/app/components/icons/check.jsx b/frontend/src/app/components/icons/check.jsx
index 510727f..cc22737 100644
--- a/frontend/src/app/components/icons/check.jsx
+++ b/frontend/src/app/components/icons/check.jsx
@@ -11,8 +11,9 @@ const CheckIcon = (props) => {
       {...props}
     >
       <path
-        d="M4.53125 10L8.4375 13.9062L16.25 6.09375"
+        d="M14.625 6.14583V16.9375L10 13.8542L5.375 16.9375V6.14583C5.375 5.32808 5.69985 4.54382 6.27809 3.96559C6.85632 3.38735 7.64058 3.0625 8.45833 3.0625H11.5417C12.3594 3.0625 13.1437 3.38735 13.7219 3.96559C14.3001 4.54382 14.625 5.32808 14.625 6.14583Z"
         stroke="white"
+        strokeOpacity={1}
         strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
diff --git a/frontend/src/app/components/radio-button/RadioButton.jsx b/frontend/src/app/components/radio-button/RadioButton.jsx
new file mode 100644
index 0000000..f678a28
--- /dev/null
+++ b/frontend/src/app/components/radio-button/RadioButton.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import styles from "./styles.module.css";
+const RadioButton = (props) => {
+  return (
+    <div className={styles.container}>
+      <label className={styles.radio}>
+        <input type="radio" {...props} />
+        <span className={styles.custom}></span>
+        <span className={styles.labelText}>{props?.label}</span>
+      </label>
+    </div>
+  );
+};
+
+export default RadioButton;
diff --git a/frontend/src/app/components/radio-button/styles.module.css b/frontend/src/app/components/radio-button/styles.module.css
new file mode 100644
index 0000000..8891da5
--- /dev/null
+++ b/frontend/src/app/components/radio-button/styles.module.css
@@ -0,0 +1,44 @@
+.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);
+}
+.radio input:not(:checked) + .custom + span,
+.radio input:not(:checked) + .custom + * {
+  color: #85869b;
+}
diff --git a/frontend/src/app/projects/view/[servicesId]/LogsModal/styles.module.css b/frontend/src/app/projects/view/[servicesId]/LogsModal/styles.module.css
index 4e575f9..da54ad4 100644
--- a/frontend/src/app/projects/view/[servicesId]/LogsModal/styles.module.css
+++ b/frontend/src/app/projects/view/[servicesId]/LogsModal/styles.module.css
@@ -115,10 +115,10 @@
   gap: 12px;
 }
 .autoScroll input[type="checkbox"] {
-  accent-color: #5980f1;
+  accent-color: #4271ff;
   height: 16px;
   width: 16px;
-  background: white;
+  background-color: transparent;
 }
 
 .autoScroll p {
diff --git a/frontend/src/app/projects/view/[servicesId]/page.jsx b/frontend/src/app/projects/view/[servicesId]/page.jsx
index a6b69b8..9f7502d 100644
--- a/frontend/src/app/projects/view/[servicesId]/page.jsx
+++ b/frontend/src/app/projects/view/[servicesId]/page.jsx
@@ -4,21 +4,44 @@ import globalStyle from "@/app/globalStyle.module.css";
 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 CustomCheckbox from "@/app/components/checkbox/CheckBox";
-import DeleteIcon from "@/app/components/icons/delete";
-import SelectField from "@/app/components/select/SelectField";
-import ActionButton from "@/app/components/actionButton/ActionButton";
 import LogsModal from "./LogsModal/logsModas";
+import ProjectDetails from "./projectDetails";
+import Settings from "./settings";
+import useServicesForm from "@/app/hooks/useServicesForm";
+import useIsMobile from "@/app/hooks/useIsMobile";
 const AddServices = () => {
-  const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
   const [triggerAddVariable, setTriggerAddVariable] = useState(false);
   const [triggerAddVolume, setTriggerAddVolume] = useState(false);
-  const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false);
+  const [triggerAddConfigMap, setTriggerAddConfigMap] = useState(false);
+  const [isProjectDetails, setIsProjectDetails] = useState(true);
   const [triggerLogsModal, setTriggerLogsModal] = useState(false);
+  const [isEnableIngress, setIsEnableIngress] = useState(false);
+  const isMobile = useIsMobile();
+
+  const {
+    register,
+    handleSubmit,
+    errors,
+    onSubmit,
+    triggerAlert,
+    disableScaling,
+    disableReadiness,
+    disableLiveness,
+    setDisableScaling,
+    setDisableReadiness,
+    setDisableLiveness,
+    setTriggerAlert,
+    minPods,
+    maxPods,
+    readinessPath,
+    readinessPort,
+    livenessPort,
+    livenessPath,
+  } = useServicesForm();
+
   const sampleData = [
     { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
     { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
@@ -38,7 +61,7 @@ const AddServices = () => {
       {triggerAddVolume && (
         <AddVolumeModal setTriggerAddVolume={setTriggerAddVolume} />
       )}
-      {triggeAddConfigMap && (
+      {triggerAddConfigMap && (
         <AddConfigMapModal setTriggerAddConfigMap={setTriggerAddConfigMap} />
       )}
       <div className={globalStyle.mainContainer}>
@@ -51,348 +74,53 @@ const AddServices = () => {
             requiredButtons={["back", "title", "edit", "download"]}
             setTriggerLogsModal={setTriggerLogsModal}
           />
-          <div className={styles.contentContainer}>
-            <div className={styles.fieldsContainerCreateNew}>
-              <div className={styles.projectDetails}>
-                <div className={styles.projectDetailsHeader}>
-                  <p>Project Details</p>
-                </div>
-                <div className={styles.fieldsCreateNew}>
-                  <div>
-                    <div>
-                      <p>Name</p>
-                      <TextField placeHolder="Enter service name" />
-                    </div>
-                    <div>
-                      <p>Version</p>
-                      <TextField placeHolder="Service version" />
-                    </div>
-                  </div>
-                  <div>
-                    <div>
-                      <p>
-                        Image <span>(Optional)</span>
-                      </p>
-                      <TextField placeHolder="Enter image name" />
-                    </div>
-                  </div>
-                  <div>
-                    <div>
-                      <p>Port</p>
-                      <TextField placeHolder="Enter port" />
-                    </div>
-                  </div>
-                  <div>
-                    <div>
-                      <p>Ingress</p>
-                      <SelectField
-                        label="Select"
-                        options={[
-                          { label: "Option", value: "option" },
-                          { label: "Option 1", value: "option 1" },
-                          { label: "Option 2", value: "option 2" },
-                        ]}
-                      />
-                    </div>
-                    <div>
-                      <p>Ingress</p>
-                      <SelectField
-                        label="Select"
-                        options={[
-                          { label: "Option", value: "option" },
-                          { label: "Option 1", value: "option 1" },
-                          { label: "Option 2", value: "option 2" },
-                        ]}
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className={styles.resource}>
-                <div className={styles.projectDetailsHeader}>
-                  <p>Resource</p>
-                </div>
-                <div className={styles.resourceFields}>
-                  <div>
-                    <div>
-                      <p>CPU Request (MB)</p>
-                      <TextField placeHolder="250" />
-                    </div>
-                    <div>
-                      <p>CPU Limit (MB)</p>
-                      <TextField placeHolder="250" />
-                    </div>
-                  </div>
-                  <div>
-                    <div>
-                      <p>Memory Request (MB)</p>
-                      <TextField placeHolder="250" />
-                    </div>
-                    <div>
-                      <p>Memory Limit (MB)</p>
-                      <TextField placeHolder="500" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className={styles.additionalDetails}>
-                <div>
-                  <div>
-                    <div className={styles.additionalDetailsHeader}>
-                      <div>
-                        <p>Auto Scaling</p>
-                        <CustomCheckbox id="scalingCheckBox" />
-                      </div>
-                    </div>
-                    <div className={styles.additionalDetailsFields}>
-                      <div>
-                        <div>
-                          <div>
-                            <p>Minimum pods</p>
-
-                            <TextField placeHolder="1" />
-                          </div>
-                          <div>
-                            <p>Maximum pods</p>
-                            <TextField placeHolder="1" />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div>
-                    <div className={styles.additionalDetailsHeader}>
-                      <div>
-                        <p>Readiness</p>
-                        <CustomCheckbox id="readiNessCheckBox" />
-                      </div>
-                    </div>
-                    <div className={styles.additionalDetailsFields}>
-                      <div>
-                        <div>
-                          <div>
-                            <p>Readiness Path</p>
-                            <TextField placeHolder="Enter Readiness path" />
-                          </div>
-                          <div>
-                            <p>Readiness Port</p>
-                            <TextField placeHolder="Enter Readiness port" />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div>
-                    <div className={styles.additionalDetailsHeader}>
-                      <div>
-                        <p>Liveness</p>
-                        <CustomCheckbox id="liveNessCheckBox" />
-                      </div>
-                    </div>
-                    <div className={styles.additionalDetailsFields}>
-                      <div>
-                        <div>
-                          <div>
-                            <p>Liveness Path</p>
-                            <TextField placeHolder="Enter liveness path" />
-                          </div>
-                          <div>
-                            <p>Liveness Port</p>
-
-                            <TextField placeHolder="Enter liveness port" />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
+          <div className={styles.content}>
+            <div className={styles.heading}>
+              <div>
+                <p
+                  className={`${isProjectDetails ? styles.active : null}`}
+                  onClick={() => setIsProjectDetails(true)}
+                >
+                  Project Details
+                </p>
+                <p
+                  className={`${!isProjectDetails ? styles.active : null}`}
+                  onClick={() => setIsProjectDetails(false)}
+                >
+                  Settings
+                </p>
               </div>
             </div>
-            <div className={variableStyles.variables}>
-              <div className={variableStyles.variablesHeader}>
-                <div>
-                  <div className={variableStyles.searchContainer}>
-                    <div className={variableStyles.searchInputGroup}>
-                      <svg
-                        width="20"
-                        height="20"
-                        viewBox="0 0 20 20"
-                        fill="none"
-                      >
-                        <g clipPath="url(#clip0)">
-                          <path
-                            d="M8.66099 16.0271C12.7292 16.0271 16.0271 12.7292 16.0271 8.66099C16.0271 4.59282 12.7292 1.29492 8.66099 1.29492C4.59282 1.29492 1.29492 4.59282 1.29492 8.66099C1.29492 12.7292 4.59282 16.0271 8.66099 16.0271Z"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                          <path
-                            d="M18.7051 18.7061L14.0176 14.0186"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                        </g>
-                      </svg>
-                      <input type="text" placeholder="Search" />
-                    </div>
-                  </div>
-                  <div className={variableStyles.variablesHeaderDropDown}>
-                    <div
-                      className={variableStyles.variableHeaderDropdownButton}
-                      onClick={() =>
-                        setTriggerVariableDropDown(!triggerVariableDropDown)
-                      }
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                      >
-                        <path
-                          d="M12 5.29199V18.7087"
-                          stroke="white"
-                          strokeWidth="2"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                        <path
-                          d="M5.29102 12H18.7077"
-                          stroke="white"
-                          strokeWidth="2"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                      </svg>
-                    </div>
-                    {triggerVariableDropDown && (
-                      <div className={variableStyles.dropDownContainer}>
-                        <div
-                          onClick={() => {
-                            setTriggerAddVariable(true);
-                            setTriggerVariableDropDown(
-                              !triggerVariableDropDown,
-                            );
-                          }}
-                        >
-                          <p>Environment Variables</p>
-                        </div>
-                        <div
-                          onClick={() => {
-                            setTriggerAddVolume(true);
-                            setTriggerVariableDropDown(
-                              !triggerVariableDropDown,
-                            );
-                          }}
-                        >
-                          <p>Volumes</p>
-                        </div>
-                        <div
-                          onClick={() => {
-                            setTriggerAddConfigMap(true);
-                            setTriggerVariableDropDown(
-                              !triggerVariableDropDown,
-                            );
-                          }}
-                        >
-                          <p>Config Maps</p>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-              <div className={variableStyles.variablesContentContainer}>
-                <div>
-                  <div className={variableStyles.variablesContent}>
-                    <div
-                      className={variableStyles.environmentVariablesContainer}
-                    >
-                      <div
-                        className={variableStyles.environmentVariablesHeader}
-                      >
-                        <p>Environment Variables</p>
-                      </div>
-                      <div className={variableStyles.envVariablesHeader}>
-                        <div>
-                          <p>Key</p>
-                          <p>Value</p>
-                        </div>
-                      </div>
-                      <div className={variableStyles.variableList}>
-                        {/*  <div className={variableStyles.emptyVariableList}>
-                          <div>
-                            <p>No Environment Variables added</p>
-                          </div>
-                        </div> */}
-                        {sampleData.map((data, key) => {
-                          return (
-                            <div className={variableStyles.variable} key={key}>
-                              <p>{data.key}</p>
-                              <p>{data.value}</p>
-                              <ActionButton icon={<DeleteIcon />} />
-                            </div>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  </div>
-                  <div className={variableStyles.variablesContent}>
-                    <div
-                      className={variableStyles.environmentVariablesContainer}
-                    >
-                      <div
-                        className={variableStyles.environmentVariablesHeader}
-                      >
-                        <p>Volumes</p>
-                      </div>
-                      <div className={variableStyles.envVariablesHeader}>
-                        <div>
-                          <p>Name</p>
-                          <p>Path</p>
-                          <p>Size/Type</p>
-                          <p>Access Mode</p>
-                          <p>Storage Class</p>
-                        </div>
-                      </div>
-                      <div className={variableStyles.variableList}>
-                        <div className={variableStyles.emptyVariableList}>
-                          <div>
-                            <p>No volume added</p>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div className={variableStyles.variablesContent}>
-                    <div
-                      className={variableStyles.environmentVariablesContainer}
-                    >
-                      <div
-                        className={variableStyles.environmentVariablesHeader}
-                      >
-                        <p>Config maps</p>
-                      </div>
-
-                      <div className={variableStyles.variableList}>
-                        <div className={variableStyles.emptyVariableList}>
-                          <div>
-                            <p>No config map added</p>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
+            <div className={styles.contentContainer}>
+              <ProjectDetails
+                className={`${styles.fieldsContainerCreateNew} ${!isMobile || (isProjectDetails && isMobile) ? styles.hasDisplay : styles.noDisplay}`}
+                register={register}
+                handleSubmit={handleSubmit}
+                errors={errors}
+                onSubmit={onSubmit}
+                triggerAlert={triggerAlert}
+                disableScaling={disableScaling}
+                disableReadiness={disableReadiness}
+                disableLiveness={disableLiveness}
+                setDisableScaling={setDisableScaling}
+                setDisableReadiness={setDisableReadiness}
+                setDisableLiveness={setDisableLiveness}
+                setTriggerAlert={setTriggerAlert}
+                minPods={minPods}
+                maxPods={maxPods}
+                readinessPath={readinessPath}
+                readinessPort={readinessPort}
+                livenessPort={livenessPort}
+                livenessPath={livenessPath}
+                setIsEnableIngress={setIsEnableIngress}
+                isEnableIngress={isEnableIngress}
+              />
+              <Settings
+                className={`${variableStyles.variables} ${!isMobile || (!isProjectDetails && isMobile) ? variableStyles.hasDisplay : variableStyles.noDisplay}`}
+                setTriggerAddConfigMap={setTriggerAddConfigMap}
+                setTriggerAddVariable={setTriggerAddVariable}
+                setTriggerAddVolume={setTriggerAddVolume}
+              />
             </div>
           </div>
         </div>
diff --git a/frontend/src/app/projects/view/[servicesId]/projectDetails.jsx b/frontend/src/app/projects/view/[servicesId]/projectDetails.jsx
new file mode 100644
index 0000000..61817d9
--- /dev/null
+++ b/frontend/src/app/projects/view/[servicesId]/projectDetails.jsx
@@ -0,0 +1,323 @@
+"use client";
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+import TextField from "@/app/components/fields/textfield";
+import CustomCheckbox from "@/app/components/checkbox/CheckBox";
+import SelectField from "@/app/components/select/SelectField";
+import RadioButton from "@/app/components/radio-button/RadioButton";
+
+const ProjectDetails = ({
+  register,
+  handleSubmit,
+  errors,
+  onSubmit,
+  triggerAlert,
+  disableScaling,
+  disableReadiness,
+  disableLiveness,
+  setDisableScaling,
+  setDisableReadiness,
+  setDisableLiveness,
+  setTriggerAlert,
+  minPods,
+  maxPods,
+  readinessPath,
+  readinessPort,
+  livenessPort,
+  livenessPath,
+  setIsEnableIngress,
+  isEnableIngress,
+  ...props
+}) => {
+  return (
+    <form {...props} id="form" onSubmit={handleSubmit(onSubmit)}>
+      <div className={styles.projectDetails}>
+        <div className={styles.projectDetailsHeader}>
+          <p>Project Details</p>
+        </div>
+        <div className={styles.fieldsCreateNew}>
+          <div className={styles.inputGroup}>
+            <div>
+              <p>Name</p>
+              <TextField
+                placeHolder="Enter service name"
+                {...register("serviceName", { required: true })}
+                hasError={!!errors.serviceName}
+              />
+            </div>
+            <div>
+              <p>Version</p>
+              <TextField
+                placeHolder="Service version"
+                {...register("serviceVersion", { required: true })}
+                hasError={!!errors.serviceVersion}
+              />
+            </div>
+          </div>
+          <div>
+            <div>
+              <p>
+                Image <span>(Optional)</span>
+              </p>
+              <TextField
+                placeHolder="Enter image name"
+                {...register("imageName", { required: false })}
+                hasError={!!errors.imageName}
+              />
+            </div>
+          </div>
+          <div>
+            <div>
+              <p>Port</p>
+              <TextField
+                placeHolder="Enter port"
+                {...register("port", { required: true })}
+                hasError={!!errors.port}
+              />
+            </div>
+          </div>
+          <div>
+            <div>
+              <p>Ingress</p>
+              <div className={styles.radioButtonContainer}>
+                <div>
+                  <RadioButton
+                    label="Enable"
+                    name="isEnable"
+                    value="true"
+                    checked={isEnableIngress === true}
+                    onChange={(e) =>
+                      setIsEnableIngress(e.target.value === "true")
+                    }
+                  />
+                  <RadioButton
+                    label="Disable"
+                    name="isEnable"
+                    value="false"
+                    checked={isEnableIngress === false}
+                    onChange={(e) =>
+                      setIsEnableIngress(e.target.value === "true")
+                    }
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {isEnableIngress && (
+            <>
+              <div>
+                <div>
+                  <p>Sub Domain</p>
+                  <TextField
+                    placeHolder="Subdomain-"
+                    {...register("subDomain", { required: isEnableIngress })}
+                    hasError={!!errors.imageName}
+                  />
+                </div>
+
+                <div>
+                  <p>Sub Domain</p>
+                  <TextField
+                    placeHolder="Subdomain-"
+                    {...register("subDomain", { required: isEnableIngress })}
+                    hasError={!!errors.imageName}
+                  />
+                </div>
+              </div>
+              <div>
+                <div>
+                  <p>
+                    Allowed Ips <span>(Optional)</span>
+                  </p>
+                  <textarea
+                    className={styles.textarea}
+                    name=""
+                    id=""
+                    placeholder="Enter allowed IP addresses (comma-separated, e.g., 192.168.1.1, 10.0.0.0/24)"
+                  ></textarea>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+      <div className={styles.resource}>
+        <div className={styles.projectDetailsHeader}>
+          <p>Resource</p>
+        </div>
+        <div className={styles.resourceFields}>
+          <div className={styles.inputGroup}>
+            <div>
+              <p>CPU Request (MB)</p>
+              <TextField
+                placeHolder="250"
+                {...register("cpuRequest", { required: true })}
+                hasError={!!errors.cpuRequest}
+              />
+            </div>
+            <div>
+              <p>CPU Limit (MB)</p>
+              <TextField
+                placeHolder="250"
+                {...register("cpuLimit", { required: true })}
+                hasError={!!errors.cpuLimit}
+              />
+            </div>
+          </div>
+          <div className={styles.inputGroup}>
+            <div>
+              <p>Memory Request (MB)</p>
+              <TextField
+                placeHolder="250"
+                {...register("memoryRequest", { required: true })}
+                hasError={!!errors.memoryRequest}
+              />
+            </div>
+            <div>
+              <p>Memory Limit (MB)</p>
+              <TextField
+                placeHolder="500"
+                {...register("memoryLimit", { required: true })}
+                hasError={!!errors.memoryLimit}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={styles.additionalDetails}>
+        <div>
+          <div>
+            <div className={styles.additionalDetailsHeader}>
+              <div>
+                <p>Auto Scaling</p>
+                <CustomCheckbox
+                  id="scalingCheckBox"
+                  setChecked={() => setDisableScaling(!disableScaling)}
+                />
+              </div>
+            </div>
+            <div className={styles.additionalDetailsFields}>
+              <div>
+                <div className={styles.inputGroup}>
+                  <div>
+                    <p>Minimum pods</p>
+
+                    <TextField
+                      placeHolder="1"
+                      disabled={disableScaling}
+                      {...register("minPods", {
+                        required: maxPods.trim() !== "" && !disableScaling,
+                      })}
+                      hasError={!!errors.minPods}
+                    />
+                  </div>
+                  <div>
+                    <p>Maximum pods</p>
+                    <TextField
+                      placeHolder="1"
+                      disabled={disableScaling}
+                      {...register("maxPods", {
+                        required: minPods.trim() !== "" && !disableScaling,
+                      })}
+                      hasError={!!errors.maxPods}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div>
+            <div className={styles.additionalDetailsHeader}>
+              <div>
+                <p>Readiness</p>
+                <CustomCheckbox
+                  id="readiNessCheckBox"
+                  setChecked={() => setDisableReadiness(!disableReadiness)}
+                />
+              </div>
+            </div>
+            <div className={styles.additionalDetailsFields}>
+              <div>
+                <div className={styles.inputGroup}>
+                  <div>
+                    <p>Readiness Path</p>
+
+                    <TextField
+                      placeHolder="Enter Readiness path"
+                      disabled={disableReadiness}
+                      {...register("readinessPath", {
+                        required:
+                          readinessPort.trim() !== "" && !disableReadiness,
+                      })}
+                      hasError={!!errors.readinessPath}
+                    />
+                  </div>
+                  <div>
+                    <p>Readiness Port</p>
+                    <TextField
+                      placeHolder="Enter Readiness port"
+                      disabled={disableReadiness}
+                      {...register("readinessPort", {
+                        required:
+                          readinessPath.trim() !== "" && !disableReadiness,
+                      })}
+                      hasError={!!errors.readinessPort}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div>
+            <div className={styles.additionalDetailsHeader}>
+              <div>
+                <p>Liveness</p>
+                <CustomCheckbox
+                  id="liveNessCheckBox"
+                  setChecked={() => setDisableLiveness(!disableLiveness)}
+                />
+              </div>
+            </div>
+            <div className={styles.additionalDetailsFields}>
+              <div>
+                <div className={styles.inputGroup}>
+                  <div>
+                    <p>Liveness Path</p>
+                    <TextField
+                      placeHolder="Enter liveness path"
+                      disabled={disableLiveness}
+                      {...register("livenessPath", {
+                        required:
+                          livenessPort.trim() !== "" && !disableLiveness,
+                      })}
+                      hasError={!!errors.livenessPath}
+                    />
+                  </div>
+                  <div>
+                    <p>Liveness Port</p>
+                    <TextField
+                      placeHolder="Enter liveness port"
+                      disabled={disableLiveness}
+                      {...register("livenessPort", {
+                        required:
+                          livenessPath.trim() !== "" && !disableLiveness,
+                      })}
+                      hasError={!!errors.livenessPort}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default ProjectDetails;
diff --git a/frontend/src/app/projects/view/[servicesId]/settings.jsx b/frontend/src/app/projects/view/[servicesId]/settings.jsx
new file mode 100644
index 0000000..b360843
--- /dev/null
+++ b/frontend/src/app/projects/view/[servicesId]/settings.jsx
@@ -0,0 +1,171 @@
+"use client";
+import React, { useState } from "react";
+import variableStyles from "./variableStyles.module.css";
+const Settings = ({
+  setTriggerAddVariable,
+  setTriggerAddVolume,
+  setTriggerAddConfigMap,
+  ...props
+}) => {
+  const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
+
+  return (
+    <div {...props}>
+      <div className={variableStyles.variablesHeader}>
+        <div>
+          <div className={variableStyles.searchContainer}>
+            <div className={variableStyles.searchInputGroup}>
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <g clipPath="url(#clip0)">
+                  <path
+                    d="M8.66099 16.0271C12.7292 16.0271 16.0271 12.7292 16.0271 8.66099C16.0271 4.59282 12.7292 1.29492 8.66099 1.29492C4.59282 1.29492 1.29492 4.59282 1.29492 8.66099C1.29492 12.7292 4.59282 16.0271 8.66099 16.0271Z"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  <path
+                    d="M18.7051 18.7061L14.0176 14.0186"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </g>
+              </svg>
+              <input type="text" placeholder="Search" />
+            </div>
+          </div>
+          <div className={variableStyles.variablesHeaderDropDown}>
+            <div
+              className={variableStyles.variableHeaderDropdownButton}
+              onClick={() =>
+                setTriggerVariableDropDown(!triggerVariableDropDown)
+              }
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+              >
+                <path
+                  d="M12 5.29199V18.7087"
+                  stroke="white"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+                <path
+                  d="M5.29102 12H18.7077"
+                  stroke="white"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </div>
+            {triggerVariableDropDown && (
+              <div className={variableStyles.dropDownContainer}>
+                <div
+                  onClick={() => {
+                    setTriggerAddVariable(true);
+                    setTriggerVariableDropDown(!triggerVariableDropDown);
+                  }}
+                >
+                  <p>Environment Variables</p>
+                </div>
+                <div
+                  onClick={() => {
+                    setTriggerAddVolume(true);
+                    setTriggerVariableDropDown(!triggerVariableDropDown);
+                  }}
+                >
+                  <p>Volumes</p>
+                </div>
+                <div
+                  onClick={() => {
+                    setTriggerAddConfigMap(true);
+                    setTriggerVariableDropDown(!triggerVariableDropDown);
+                  }}
+                >
+                  <p>Config Maps</p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className={variableStyles.variablesContentContainer}>
+        <div>
+          <div className={variableStyles.variablesContent}>
+            <div className={variableStyles.environmentVariablesContainer}>
+              <div className={variableStyles.environmentVariablesHeader}>
+                <p>Environment Variables</p>
+              </div>
+              <div className={variableStyles.envVariablesHeader}>
+                <div>
+                  <p>Key</p>
+                  <p>Value</p>
+                </div>
+              </div>
+              <div className={variableStyles.variableList}>
+                <div className={variableStyles.emptyVariableList}>
+                  <div>
+                    <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>
+          <div className={variableStyles.variablesContent}>
+            <div className={variableStyles.environmentVariablesContainer}>
+              <div className={variableStyles.environmentVariablesHeader}>
+                <p>Volumes</p>
+              </div>
+              <div className={variableStyles.envVariablesHeader}>
+                <div>
+                  <p>Name</p>
+                  <p>Path</p>
+                  <p>Size/Type</p>
+                  <p>Access Mode</p>
+                  <p>Storage Class</p>
+                </div>
+              </div>
+              <div className={variableStyles.variableList}>
+                <div className={variableStyles.emptyVariableList}>
+                  <div>
+                    <p>No volume added</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className={variableStyles.variablesContent}>
+            <div className={variableStyles.environmentVariablesContainer}>
+              <div className={variableStyles.environmentVariablesHeader}>
+                <p>Config maps</p>
+              </div>
+
+              <div className={variableStyles.variableList}>
+                <div className={variableStyles.emptyVariableList}>
+                  <div>
+                    <p>No config map added</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Settings;
diff --git a/frontend/src/app/projects/view/[servicesId]/styles.module.css b/frontend/src/app/projects/view/[servicesId]/styles.module.css
index 13bab16..3f1c59d 100644
--- a/frontend/src/app/projects/view/[servicesId]/styles.module.css
+++ b/frontend/src/app/projects/view/[servicesId]/styles.module.css
@@ -1,24 +1,119 @@
+.content {
+  display: flex;
+
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 32px;
+  min-height: 0;
+
+  align-self: stretch;
+}
 .contentContainer {
   display: flex;
   align-items: flex-start;
-  flex: 1 0 0;
+  height: calc(100vh - 240px);
+  flex: 1;
+
   align-self: stretch;
 }
+
+.heading {
+  display: none;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 0 16px;
+  align-self: stretch;
+  background: #191a24;
+}
+.heading > div {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.heading p {
+  display: flex;
+  padding: 24px 4px 16px 4px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  color: #85869b;
+  font-family: Inter;
+  font-size: 18px;
+
+  font-weight: 400;
+}
+.heading .active {
+  border-bottom: 1px solid #959aff;
+  color: #959aff;
+}
 .fieldsContainerCreateNew {
   display: flex;
   padding-top: 36px;
   flex-direction: column;
-  width: 550px;
   align-items: flex-start;
   gap: 36px;
   background: #191a24;
-  height: calc(100vh - 175px);
+  height: calc(100vh - 170px);
+  min-height: 0;
+  flex: 1;
   overflow-y: scroll;
   scrollbar-width: none;
 }
+.radioButtonContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+}
+.radioButtonContainer > div {
+  display: flex;
+  align-items: flex-start;
+  gap: 24px;
+  padding: 20px 0;
+}
+.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;
+  outline: none;
+}
+.textarea:focus {
+  border-radius: 6px;
+  border: 1px solid #959aff;
+  background: rgba(75, 79, 109, 0.25);
+}
+.textarea:focus::placeholder {
+  color: #4b4f6d;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
 .projectDetails {
   display: flex;
-  padding: 0 36px;
+  padding: 0 20px;
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
@@ -48,7 +143,7 @@
 }
 .resource {
   display: flex;
-  padding: 0 36px;
+  padding: 0 20px;
   flex-direction: column;
   align-items: flex-start;
   align-self: stretch;
@@ -65,7 +160,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
   align-self: stretch;
 }
 
@@ -92,25 +187,6 @@
   color: #85869b;
 }
 
-.fieldsCreateNew > div > div select,
-.resourceFields > div > div select {
-  display: flex;
-  padding: 12px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 10px;
-  align-self: stretch;
-  border-radius: 4px;
-  border: 1px solid #4b4f6d;
-  background-color: transparent;
-  color: white;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  letter-spacing: 0.16px;
-}
-
 .repositoryForm {
   display: flex;
   padding: 12px;
@@ -217,3 +293,32 @@
   line-height: normal;
   letter-spacing: 0.16px;
 }
+.noDisplay {
+  display: none;
+}
+.hasDisplay {
+  display: flex;
+}
+@media (max-width: 768px) {
+  .heading {
+    display: flex;
+  }
+  .fieldsContainerCreateNew {
+    height: calc(100vh - 262px);
+  }
+  .content {
+    padding: 0;
+  }
+  .fieldsCreateNew .inputGroup,
+  .additionalDetailsFields > div .inputGroup,
+  .resourceFields .inputGroup {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  .fieldsCreateNew .inputGroup div,
+  .additionalDetailsFields > div .inputGroup div,
+  .resourceFields .inputGroup div {
+    width: 100%;
+  }
+}
diff --git a/frontend/src/app/projects/view/[servicesId]/variableStyles.module.css b/frontend/src/app/projects/view/[servicesId]/variableStyles.module.css
index e90ceb2..2cdbf6a 100644
--- a/frontend/src/app/projects/view/[servicesId]/variableStyles.module.css
+++ b/frontend/src/app/projects/view/[servicesId]/variableStyles.module.css
@@ -2,9 +2,8 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  flex: 1 0 0;
+  flex: 1;
   align-self: stretch;
-
   background: #161720;
 }
 .variablesHeader {
@@ -23,7 +22,7 @@
 }
 .searchContainer > div {
   display: flex;
-  width: 310px;
+  width: 100%;
   padding: 8px 12px;
   align-items: center;
   gap: 9px;
@@ -103,6 +102,13 @@
   align-self: stretch;
   text-wrap: nowrap;
   width: 100%;
+  border-radius: 4px;
+  color: #acb0ff;
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
 }
 .dropDownContainer > div:hover {
   background: #3c4159;
@@ -251,3 +257,14 @@
   font-weight: 500;
   line-height: normal;
 }
+.noDisplay {
+  display: none;
+}
+.hasDisplay {
+  display: flex;
+}
+@media (max-width: 768px) {
+  .variablesContentContainer > div {
+    height: calc(100vh - 342px);
+  }
+}
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 1a4a182..52f636f 100644
--- a/frontend/src/app/projects/view/add-from-scratch/page.jsx
+++ b/frontend/src/app/projects/view/add-from-scratch/page.jsx
@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import globalStyle from "@/app/globalStyle.module.css";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import styles from "./styles.module.css";
+import variableStyles from "./variableStyles.module.css";
 import AddVariableModal from "../variableModals/AddVariableModal/AddVariableModal";
 import AddVolumeModal from "../variableModals/AddVolumes/AddVolumeModal";
 import AddConfigMapModal from "../variableModals/AddConfigMap/AddConfigMapModal";
@@ -10,10 +11,14 @@ import useServicesForm from "@/app/hooks/useServicesForm";
 import Alert from "@/app/components/alerts/Alert";
 import ProjectDetails from "./projectDetails";
 import Settings from "./settings";
+import useIsMobile from "@/app/hooks/useIsMobile";
 const AddServices = () => {
   const [triggerAddVariable, setTriggerAddVariable] = useState(false);
   const [triggerAddVolume, setTriggerAddVolume] = useState(false);
   const [triggerAddConfigMap, setTriggerAddConfigMap] = useState(false);
+  const [isProjectDetails, setIsProjectDetails] = useState(true);
+  const [isEnableIngress, setIsEnableIngress] = useState(false);
+  const isMobile = useIsMobile();
 
   const {
     register,
@@ -66,12 +71,23 @@ const AddServices = () => {
           <div className={styles.content}>
             <div className={styles.heading}>
               <div>
-                <p>Project Details</p>
-                <p>Settings</p>
+                <p
+                  className={`${isProjectDetails ? styles.active : null}`}
+                  onClick={() => setIsProjectDetails(true)}
+                >
+                  Project Details
+                </p>
+                <p
+                  className={`${!isProjectDetails ? styles.active : null}`}
+                  onClick={() => setIsProjectDetails(false)}
+                >
+                  Settings
+                </p>
               </div>
             </div>
             <div className={styles.contentContainer}>
               <ProjectDetails
+                className={`${styles.fieldsContainerCreateNew} ${!isMobile || (isProjectDetails && isMobile) ? styles.hasDisplay : styles.noDisplay}`}
                 register={register}
                 handleSubmit={handleSubmit}
                 errors={errors}
@@ -90,8 +106,11 @@ const AddServices = () => {
                 readinessPort={readinessPort}
                 livenessPort={livenessPort}
                 livenessPath={livenessPath}
+                setIsEnableIngress={setIsEnableIngress}
+                isEnableIngress={isEnableIngress}
               />
               <Settings
+                className={`${variableStyles.variables} ${!isMobile || (!isProjectDetails && isMobile) ? variableStyles.hasDisplay : variableStyles.noDisplay}`}
                 setTriggerAddConfigMap={setTriggerAddConfigMap}
                 setTriggerAddVariable={setTriggerAddVariable}
                 setTriggerAddVolume={setTriggerAddVolume}
diff --git a/frontend/src/app/projects/view/add-from-scratch/projectDetails.jsx b/frontend/src/app/projects/view/add-from-scratch/projectDetails.jsx
index 0be6b74..c91605e 100644
--- a/frontend/src/app/projects/view/add-from-scratch/projectDetails.jsx
+++ b/frontend/src/app/projects/view/add-from-scratch/projectDetails.jsx
@@ -4,6 +4,7 @@ import styles from "./styles.module.css";
 import TextField from "@/app/components/fields/textfield";
 import CustomCheckbox from "@/app/components/checkbox/CheckBox";
 import SelectField from "@/app/components/select/SelectField";
+import RadioButton from "@/app/components/radio-button/RadioButton";
 
 const ProjectDetails = ({
   register,
@@ -24,263 +25,313 @@ const ProjectDetails = ({
   readinessPort,
   livenessPort,
   livenessPath,
+  setIsEnableIngress,
+  isEnableIngress,
+  ...props
 }) => {
   return (
-    <form
-      className={styles.fieldsContainerCreateNew}
-      id="form"
-      onSubmit={handleSubmit(onSubmit)}
-    >
-      <div>
-        <div className={styles.projectDetails}>
-          <div className={styles.projectDetailsHeader}>
-            <p>Project Details</p>
-          </div>
-          <div className={styles.fieldsCreateNew}>
-            <div>
-              <div>
-                <p>
-                  Repository <span>(Optional)</span>
-                </p>
-                <label className={styles.repositoryForm} htmlFor="#repo">
-                  + Link Repository
-                </label>
-              </div>
-            </div>
-            <div>
-              <div>
-                <p>Name</p>
-                <TextField
-                  placeHolder="Enter service name"
-                  {...register("serviceName", { required: true })}
-                  hasError={!!errors.serviceName}
-                />
-              </div>
-              <div>
-                <p>Version</p>
-                <TextField
-                  placeHolder="Service version"
-                  {...register("serviceVersion", { required: true })}
-                  hasError={!!errors.serviceVersion}
-                />
-              </div>
-            </div>
-            <div>
-              <div>
-                <p>
-                  Image <span>(Optional)</span>
-                </p>
-                <TextField
-                  placeHolder="Enter image name"
-                  {...register("imageName", { required: false })}
-                  hasError={!!errors.imageName}
-                />
-              </div>
-            </div>
-            <div>
-              <div>
-                <p>Port</p>
-                <TextField
-                  placeHolder="Enter port"
-                  {...register("port", { required: true })}
-                  hasError={!!errors.port}
-                />
-              </div>
-            </div>
-            <div>
-              <div>
-                <p>Ingress</p>
-                <SelectField
-                  label="Select"
-                  options={[
-                    { label: "Option", value: "option" },
-                    { label: "Option 1", value: "option 1" },
-                    { label: "Option 2", value: "option 2" },
-                  ]}
-                />
-              </div>
-              <div>
-                <p>Ingress</p>
-                <SelectField
-                  label="Select"
-                  options={[
-                    { label: "Option", value: "option" },
-                    { label: "Option 1", value: "option 1" },
-                    { label: "Option 2", value: "option 2" },
-                  ]}
-                />
-              </div>
-            </div>
-          </div>
+    <form {...props} id="form" onSubmit={handleSubmit(onSubmit)}>
+      <div className={styles.projectDetails}>
+        <div className={styles.projectDetailsHeader}>
+          <p>Project Details</p>
         </div>
-        <div className={styles.resource}>
-          <div className={styles.projectDetailsHeader}>
-            <p>Resource</p>
-          </div>
-          <div className={styles.resourceFields}>
-            <div>
-              <div>
-                <p>CPU Request (MB)</p>
-                <TextField
-                  placeHolder="250"
-                  {...register("cpuRequest", { required: true })}
-                  hasError={!!errors.cpuRequest}
-                />
-              </div>
-              <div>
-                <p>CPU Limit (MB)</p>
-                <TextField
-                  placeHolder="250"
-                  {...register("cpuLimit", { required: true })}
-                  hasError={!!errors.cpuLimit}
-                />
-              </div>
-            </div>
-            <div>
-              <div>
-                <p>Memory Request (MB)</p>
-                <TextField
-                  placeHolder="250"
-                  {...register("memoryRequest", { required: true })}
-                  hasError={!!errors.memoryRequest}
-                />
-              </div>
-              <div>
-                <p>Memory Limit (MB)</p>
-                <TextField
-                  placeHolder="500"
-                  {...register("memoryLimit", { required: true })}
-                  hasError={!!errors.memoryLimit}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className={styles.additionalDetails}>
+        <div className={styles.fieldsCreateNew}>
           <div>
             <div>
-              <div className={styles.additionalDetailsHeader}>
+              <p>
+                Repository <span>(Optional)</span>
+              </p>
+              <label className={styles.repositoryForm} htmlFor="#repo">
+                + Link Repository
+              </label>
+            </div>
+          </div>
+          <div className={styles.inputGroup}>
+            <div>
+              <p>Name</p>
+              <TextField
+                placeHolder="Enter service name"
+                {...register("serviceName", { required: true })}
+                hasError={!!errors.serviceName}
+              />
+            </div>
+            <div>
+              <p>Version</p>
+              <TextField
+                placeHolder="Service version"
+                {...register("serviceVersion", { required: true })}
+                hasError={!!errors.serviceVersion}
+              />
+            </div>
+          </div>
+          <div>
+            <div>
+              <p>
+                Image <span>(Optional)</span>
+              </p>
+              <TextField
+                placeHolder="Enter image name"
+                {...register("imageName", { required: false })}
+                hasError={!!errors.imageName}
+              />
+            </div>
+          </div>
+          <div>
+            <div>
+              <p>Port</p>
+              <TextField
+                placeHolder="Enter port"
+                {...register("port", { required: true })}
+                hasError={!!errors.port}
+              />
+            </div>
+          </div>
+          <div>
+            <div>
+              <p>Ingress</p>
+              <div className={styles.radioButtonContainer}>
                 <div>
-                  <p>Auto Scaling</p>
-                  <CustomCheckbox
-                    id="scalingCheckBox"
-                    setChecked={() => setDisableScaling(!disableScaling)}
+                  <RadioButton
+                    label="Enable"
+                    name="isEnable"
+                    value="true"
+                    checked={isEnableIngress === true}
+                    onChange={(e) =>
+                      setIsEnableIngress(e.target.value === "true")
+                    }
+                  />
+                  <RadioButton
+                    label="Disable"
+                    name="isEnable"
+                    value="false"
+                    checked={isEnableIngress === false}
+                    onChange={(e) =>
+                      setIsEnableIngress(e.target.value === "true")
+                    }
                   />
                 </div>
               </div>
-              <div className={styles.additionalDetailsFields}>
-                <div>
-                  <div>
-                    <div>
-                      <p>Minimum pods</p>
+            </div>
+          </div>
 
-                      <TextField
-                        placeHolder="1"
-                        disabled={disableScaling}
-                        {...register("minPods", {
-                          required: maxPods.trim() !== "" && !disableScaling,
-                        })}
-                        hasError={!!errors.minPods}
-                      />
-                    </div>
-                    <div>
-                      <p>Maximum pods</p>
-                      <TextField
-                        placeHolder="1"
-                        disabled={disableScaling}
-                        {...register("maxPods", {
-                          required: minPods.trim() !== "" && !disableScaling,
-                        })}
-                        hasError={!!errors.maxPods}
-                      />
-                    </div>
+          {isEnableIngress && (
+            <>
+              <div>
+                <div>
+                  <p>Sub Domain</p>
+                  <TextField
+                    placeHolder="Subdomain-"
+                    {...register("subDomain", { required: isEnableIngress })}
+                    hasError={!!errors.imageName}
+                  />
+                </div>
+
+                <div>
+                  <p>Sub Domain</p>
+                  <TextField
+                    placeHolder="Subdomain-"
+                    {...register("subDomain", { required: isEnableIngress })}
+                    hasError={!!errors.imageName}
+                  />
+                </div>
+              </div>
+              <div>
+                <div>
+                  <p>
+                    Allowed Ips <span>(Optional)</span>
+                  </p>
+                  <textarea
+                    className={styles.textarea}
+                    name=""
+                    id=""
+                    placeholder="Enter allowed IP addresses (comma-separated, e.g., 192.168.1.1, 10.0.0.0/24)"
+                  ></textarea>
+                </div>
+              </div>
+            </>
+          )}
+          <div>
+            <div>
+              <p>Type</p>
+              <SelectField
+                label="Select"
+                options={[
+                  { label: "Option", value: "option" },
+                  { label: "Option 1", value: "option 1" },
+                  { label: "Option 2", value: "option 2" },
+                ]}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={styles.resource}>
+        <div className={styles.projectDetailsHeader}>
+          <p>Resource</p>
+        </div>
+        <div className={styles.resourceFields}>
+          <div className={styles.inputGroup}>
+            <div>
+              <p>CPU Request (MB)</p>
+              <TextField
+                placeHolder="250"
+                {...register("cpuRequest", { required: true })}
+                hasError={!!errors.cpuRequest}
+              />
+            </div>
+            <div>
+              <p>CPU Limit (MB)</p>
+              <TextField
+                placeHolder="250"
+                {...register("cpuLimit", { required: true })}
+                hasError={!!errors.cpuLimit}
+              />
+            </div>
+          </div>
+          <div className={styles.inputGroup}>
+            <div>
+              <p>Memory Request (MB)</p>
+              <TextField
+                placeHolder="250"
+                {...register("memoryRequest", { required: true })}
+                hasError={!!errors.memoryRequest}
+              />
+            </div>
+            <div>
+              <p>Memory Limit (MB)</p>
+              <TextField
+                placeHolder="500"
+                {...register("memoryLimit", { required: true })}
+                hasError={!!errors.memoryLimit}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={styles.additionalDetails}>
+        <div>
+          <div>
+            <div className={styles.additionalDetailsHeader}>
+              <div>
+                <p>Auto Scaling</p>
+                <CustomCheckbox
+                  id="scalingCheckBox"
+                  setChecked={() => setDisableScaling(!disableScaling)}
+                />
+              </div>
+            </div>
+            <div className={styles.additionalDetailsFields}>
+              <div>
+                <div className={styles.inputGroup}>
+                  <div>
+                    <p>Minimum pods</p>
+
+                    <TextField
+                      placeHolder="1"
+                      disabled={disableScaling}
+                      {...register("minPods", {
+                        required: maxPods.trim() !== "" && !disableScaling,
+                      })}
+                      hasError={!!errors.minPods}
+                    />
+                  </div>
+                  <div>
+                    <p>Maximum pods</p>
+                    <TextField
+                      placeHolder="1"
+                      disabled={disableScaling}
+                      {...register("maxPods", {
+                        required: minPods.trim() !== "" && !disableScaling,
+                      })}
+                      hasError={!!errors.maxPods}
+                    />
                   </div>
                 </div>
               </div>
             </div>
           </div>
+        </div>
+        <div>
           <div>
-            <div>
-              <div className={styles.additionalDetailsHeader}>
-                <div>
-                  <p>Readiness</p>
-                  <CustomCheckbox
-                    id="readiNessCheckBox"
-                    setChecked={() => setDisableReadiness(!disableReadiness)}
-                  />
-                </div>
+            <div className={styles.additionalDetailsHeader}>
+              <div>
+                <p>Readiness</p>
+                <CustomCheckbox
+                  id="readiNessCheckBox"
+                  setChecked={() => setDisableReadiness(!disableReadiness)}
+                />
               </div>
-              <div className={styles.additionalDetailsFields}>
-                <div>
+            </div>
+            <div className={styles.additionalDetailsFields}>
+              <div>
+                <div className={styles.inputGroup}>
                   <div>
-                    <div>
-                      <p>Readiness Path</p>
+                    <p>Readiness Path</p>
 
-                      <TextField
-                        placeHolder="Enter Readiness path"
-                        disabled={disableReadiness}
-                        {...register("readinessPath", {
-                          required:
-                            readinessPort.trim() !== "" && !disableReadiness,
-                        })}
-                        hasError={!!errors.readinessPath}
-                      />
-                    </div>
-                    <div>
-                      <p>Readiness Port</p>
-                      <TextField
-                        placeHolder="Enter Readiness port"
-                        disabled={disableReadiness}
-                        {...register("readinessPort", {
-                          required:
-                            readinessPath.trim() !== "" && !disableReadiness,
-                        })}
-                        hasError={!!errors.readinessPort}
-                      />
-                    </div>
+                    <TextField
+                      placeHolder="Enter Readiness path"
+                      disabled={disableReadiness}
+                      {...register("readinessPath", {
+                        required:
+                          readinessPort.trim() !== "" && !disableReadiness,
+                      })}
+                      hasError={!!errors.readinessPath}
+                    />
+                  </div>
+                  <div>
+                    <p>Readiness Port</p>
+                    <TextField
+                      placeHolder="Enter Readiness port"
+                      disabled={disableReadiness}
+                      {...register("readinessPort", {
+                        required:
+                          readinessPath.trim() !== "" && !disableReadiness,
+                      })}
+                      hasError={!!errors.readinessPort}
+                    />
                   </div>
                 </div>
               </div>
             </div>
           </div>
+        </div>
+        <div>
           <div>
-            <div>
-              <div className={styles.additionalDetailsHeader}>
-                <div>
-                  <p>Liveness</p>
-                  <CustomCheckbox
-                    id="liveNessCheckBox"
-                    setChecked={() => setDisableLiveness(!disableLiveness)}
-                  />
-                </div>
+            <div className={styles.additionalDetailsHeader}>
+              <div>
+                <p>Liveness</p>
+                <CustomCheckbox
+                  id="liveNessCheckBox"
+                  setChecked={() => setDisableLiveness(!disableLiveness)}
+                />
               </div>
-              <div className={styles.additionalDetailsFields}>
-                <div>
+            </div>
+            <div className={styles.additionalDetailsFields}>
+              <div>
+                <div className={styles.inputGroup}>
                   <div>
-                    <div>
-                      <p>Liveness Path</p>
-                      <TextField
-                        placeHolder="Enter liveness path"
-                        disabled={disableLiveness}
-                        {...register("livenessPath", {
-                          required:
-                            livenessPort.trim() !== "" && !disableLiveness,
-                        })}
-                        hasError={!!errors.livenessPath}
-                      />
-                    </div>
-                    <div>
-                      <p>Liveness Port</p>
-                      <TextField
-                        placeHolder="Enter liveness port"
-                        disabled={disableLiveness}
-                        {...register("livenessPort", {
-                          required:
-                            livenessPath.trim() !== "" && !disableLiveness,
-                        })}
-                        hasError={!!errors.livenessPort}
-                      />
-                    </div>
+                    <p>Liveness Path</p>
+                    <TextField
+                      placeHolder="Enter liveness path"
+                      disabled={disableLiveness}
+                      {...register("livenessPath", {
+                        required:
+                          livenessPort.trim() !== "" && !disableLiveness,
+                      })}
+                      hasError={!!errors.livenessPath}
+                    />
+                  </div>
+                  <div>
+                    <p>Liveness Port</p>
+                    <TextField
+                      placeHolder="Enter liveness port"
+                      disabled={disableLiveness}
+                      {...register("livenessPort", {
+                        required:
+                          livenessPath.trim() !== "" && !disableLiveness,
+                      })}
+                      hasError={!!errors.livenessPort}
+                    />
                   </div>
                 </div>
               </div>
diff --git a/frontend/src/app/projects/view/add-from-scratch/settings.jsx b/frontend/src/app/projects/view/add-from-scratch/settings.jsx
index a288f4d..b360843 100644
--- a/frontend/src/app/projects/view/add-from-scratch/settings.jsx
+++ b/frontend/src/app/projects/view/add-from-scratch/settings.jsx
@@ -5,11 +5,12 @@ const Settings = ({
   setTriggerAddVariable,
   setTriggerAddVolume,
   setTriggerAddConfigMap,
+  ...props
 }) => {
   const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
 
   return (
-    <div className={variableStyles.variables}>
+    <div {...props}>
       <div className={variableStyles.variablesHeader}>
         <div>
           <div className={variableStyles.searchContainer}>
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 ae940e1..b03c523 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
@@ -1,23 +1,24 @@
 .content {
   display: flex;
-  padding: 0 16px;
+
   flex-direction: column;
   align-items: flex-start;
-  height: calc(100vh - 170px);
-  /* ✅ fills remaining space */
+  gap: 32px;
   min-height: 0;
+
   align-self: stretch;
 }
 .contentContainer {
   display: flex;
   align-items: flex-start;
+  height: calc(100vh - 240px);
   flex: 1;
-  background-color: red;
+
   align-self: stretch;
 }
 
 .heading {
-  display: flex;
+  display: none;
   flex-direction: column;
   align-items: flex-start;
   gap: 16px;
@@ -41,10 +42,12 @@
   color: #85869b;
   font-family: Inter;
   font-size: 18px;
-  font-style: normal;
+
   font-weight: 400;
-  line-height: normal;
-  letter-spacing: 0.18px;
+}
+.heading .active {
+  border-bottom: 1px solid #959aff;
+  color: #959aff;
 }
 .fieldsContainerCreateNew {
   display: flex;
@@ -53,9 +56,9 @@
   align-items: flex-start;
   gap: 36px;
   background: #191a24;
-  height: 100%;
+  height: calc(100vh - 170px);
   min-height: 0;
-  background-color: red;
+  flex: 1;
   overflow-y: scroll;
   scrollbar-width: none;
 }
@@ -90,9 +93,58 @@
   gap: 16px;
   align-self: stretch;
 }
+.radioButtonContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+}
+.radioButtonContainer > div {
+  display: flex;
+  align-items: flex-start;
+  gap: 24px;
+  padding: 20px 0;
+}
+.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;
+  outline: none;
+}
+.textarea:focus {
+  border-radius: 6px;
+  border: 1px solid #959aff;
+  background: rgba(75, 79, 109, 0.25);
+}
+.textarea:focus::placeholder {
+  color: #4b4f6d;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
 .resource {
   display: flex;
-  padding: 0 36px;
+  padding: 0 20px;
   flex-direction: column;
   align-items: flex-start;
   align-self: stretch;
@@ -126,7 +178,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
-  gap: 12px;
+  gap: 16px;
   flex: 1 0 0;
 }
 .fieldsCreateNew > div > div p,
@@ -249,3 +301,32 @@
   line-height: normal;
   letter-spacing: 0.16px;
 }
+.noDisplay {
+  display: none;
+}
+.hasDisplay {
+  display: flex;
+}
+@media (max-width: 768px) {
+  .heading {
+    display: flex;
+  }
+  .fieldsContainerCreateNew {
+    height: calc(100vh - 262px);
+  }
+  .content {
+    padding: 0;
+  }
+  .fieldsCreateNew .inputGroup,
+  .additionalDetailsFields > div .inputGroup,
+  .resourceFields .inputGroup {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  .fieldsCreateNew .inputGroup div,
+  .additionalDetailsFields > div .inputGroup div,
+  .resourceFields .inputGroup div {
+    width: 100%;
+  }
+}
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 e28c2b5..2cdbf6a 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
@@ -2,9 +2,8 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  flex: 1 0 0;
+  flex: 1;
   align-self: stretch;
-
   background: #161720;
 }
 .variablesHeader {
@@ -258,3 +257,14 @@
   font-weight: 500;
   line-height: normal;
 }
+.noDisplay {
+  display: none;
+}
+.hasDisplay {
+  display: flex;
+}
+@media (max-width: 768px) {
+  .variablesContentContainer > div {
+    height: calc(100vh - 342px);
+  }
+}
diff --git a/frontend/src/app/projects/view/variableModals/AddConfigMap/AddConfigMapModal.jsx b/frontend/src/app/projects/view/variableModals/AddConfigMap/AddConfigMapModal.jsx
index f3c01cc..ac5467e 100644
--- a/frontend/src/app/projects/view/variableModals/AddConfigMap/AddConfigMapModal.jsx
+++ b/frontend/src/app/projects/view/variableModals/AddConfigMap/AddConfigMapModal.jsx
@@ -4,7 +4,10 @@ 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";
+import SelectField from "@/app/components/select/SelectField";
+import RadioButton from "@/app/components/radio-button/RadioButton";
 const AddConfigMapModal = (props) => {
+  const [typeOption, setTypeOption] = useState("raw");
   return (
     <div className={styles.container}>
       <div className={styles.modal}>
@@ -33,21 +36,20 @@ const AddConfigMapModal = (props) => {
                   <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>
+                      <RadioButton
+                        name="typeOption"
+                        value="raw"
+                        checked={typeOption === "raw"}
+                        onChange={(e) => setTypeOption(e.target.value)}
+                        label="Raw"
+                      />
+                      <RadioButton
+                        name="typeOption"
+                        value="credential"
+                        checked={typeOption === "credential"}
+                        onChange={(e) => setTypeOption(e.target.value)}
+                        label="Credential"
+                      />
                     </div>
                   </div>
                 </div>
@@ -57,11 +59,22 @@ const AddConfigMapModal = (props) => {
                       <p>Value</p>
                     </div>
 
-                    <textarea
-                      name=""
-                      id=""
-                      placeholder="Enter a description"
-                    ></textarea>
+                    {typeOption === "raw" ? (
+                      <textarea
+                        name=""
+                        id=""
+                        placeholder="Enter a description"
+                      ></textarea>
+                    ) : (
+                      <SelectField
+                        label="Select"
+                        options={[
+                          { label: "Option", value: "option" },
+                          { label: "Option 1", value: "option 1" },
+                          { label: "Option 2", value: "option 2" },
+                        ]}
+                      />
+                    )}
                   </div>
                 </div>
               </div>
diff --git a/frontend/src/app/projects/view/variableModals/AddConfigMap/styles.module.css b/frontend/src/app/projects/view/variableModals/AddConfigMap/styles.module.css
index 12d9922..01405f1 100644
--- a/frontend/src/app/projects/view/variableModals/AddConfigMap/styles.module.css
+++ b/frontend/src/app/projects/view/variableModals/AddConfigMap/styles.module.css
@@ -7,13 +7,14 @@
   z-index: 10;
   display: flex;
   align-items: center;
+  padding: 5px;
   justify-content: center;
   background-color: #00000037;
 }
 .modal {
   display: flex;
-  width: 593px;
-
+  max-width: 593px;
+  width: 100%;
   padding: 16px 16px 24px 16px;
   flex-direction: column;
   align-items: flex-start;
@@ -174,28 +175,7 @@
   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;
-  outline: none;
-  line-height: normal;
-  letter-spacing: 0.16px;
-}
+
 .verticalInput textarea:focus {
   border-radius: 6px;
   border: 1px solid #959aff;
@@ -286,3 +266,12 @@
   gap: 16px;
   align-self: stretch;
 }
+@media (max-width: 768px) {
+  .horizontalInput > div {
+    flex-direction: column;
+    gap: 10px;
+  }
+  .horizontalInput > div > div {
+    width: 100%;
+  }
+}
diff --git a/frontend/src/app/projects/view/variableModals/AddVariableModal/AddVariableModal.jsx b/frontend/src/app/projects/view/variableModals/AddVariableModal/AddVariableModal.jsx
index 4ca99c3..83501a9 100644
--- a/frontend/src/app/projects/view/variableModals/AddVariableModal/AddVariableModal.jsx
+++ b/frontend/src/app/projects/view/variableModals/AddVariableModal/AddVariableModal.jsx
@@ -102,11 +102,11 @@ const AddVariableModal = (props) => {
                       <div className={styles.horizontalInput}>
                         <div>
                           <div>
-                            <p>Protocol</p>
+                            <p>Username</p>
                             <TextField placeHolder="MongoDB" />
                           </div>
                           <div>
-                            <p>Service</p>
+                            <p>Password</p>
                             <TextField placeHolder="Select a service" />
                           </div>
                         </div>
diff --git a/frontend/src/app/projects/view/variableModals/AddVariableModal/styles.module.css b/frontend/src/app/projects/view/variableModals/AddVariableModal/styles.module.css
index a3f0a6d..13adb83 100644
--- a/frontend/src/app/projects/view/variableModals/AddVariableModal/styles.module.css
+++ b/frontend/src/app/projects/view/variableModals/AddVariableModal/styles.module.css
@@ -4,6 +4,7 @@
   position: absolute;
   top: 0;
   left: 0;
+  padding: 5px;
   z-index: 10;
   display: flex;
   align-items: center;
@@ -12,8 +13,8 @@
 }
 .modal {
   display: flex;
-  width: 593px;
-  height: 566px;
+  max-width: 593px;
+  width: 100%;
   padding: 16px 16px 24px 16px;
   flex-direction: column;
   align-items: flex-start;
@@ -189,14 +190,11 @@
 }
 .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;
@@ -213,3 +211,12 @@
   gap: 16px;
   align-self: stretch;
 }
+@media (max-width: 768px) {
+  .horizontalInput > div {
+    flex-direction: column;
+    gap: 10px;
+  }
+  .horizontalInput > div > div {
+    width: 100%;
+  }
+}
diff --git a/frontend/src/app/projects/view/variableModals/AddVolumes/styles.module.css b/frontend/src/app/projects/view/variableModals/AddVolumes/styles.module.css
index 947bdea..815e7c5 100644
--- a/frontend/src/app/projects/view/variableModals/AddVolumes/styles.module.css
+++ b/frontend/src/app/projects/view/variableModals/AddVolumes/styles.module.css
@@ -12,8 +12,8 @@
 }
 .modal {
   display: flex;
-  width: 593px;
-
+  max-width: 593px;
+  width: 100%;
   padding: 16px 16px 24px 16px;
   flex-direction: column;
   align-items: flex-start;
@@ -200,3 +200,12 @@
   gap: 16px;
   align-self: stretch;
 }
+@media (max-width: 768px) {
+  .horizontalInput > div {
+    flex-direction: column;
+    gap: 10px;
+  }
+  .horizontalInput > div > div {
+    width: 100%;
+  }
+}