diff --git a/services/frontend/src/components/Modal/service/Create.tsx b/services/frontend/src/components/Modal/service/Create.tsx
index e8835b3..e7101ba 100644
--- a/services/frontend/src/components/Modal/service/Create.tsx
+++ b/services/frontend/src/components/Modal/service/Create.tsx
@@ -12,6 +12,7 @@ import {
 } from "./form-utils";
 import Build from "./Build";
 import { styled } from "@mui/joy";
+import Environment from "./Environment";
 
 interface IModalServiceProps {
   onHide: CallbackFunction;
@@ -122,6 +123,7 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
 
                     <TabBody className="relative px-4 py-3 flex-auto">
                       {openTab === "General" && <General />}
+                      {openTab === "Environment" && <Environment />}
                       {openTab === "Data" && <Data />}
                       {openTab === "Build" && <Build />}
                     </TabBody>
diff --git a/services/frontend/src/components/Modal/service/Data.tsx b/services/frontend/src/components/Modal/service/Data.tsx
index 5cddbd8..34d19f6 100644
--- a/services/frontend/src/components/Modal/service/Data.tsx
+++ b/services/frontend/src/components/Modal/service/Data.tsx
@@ -10,30 +10,6 @@ const Root = styled("div")`
 const Volumes = () => {
   return (
     <Root>
-      <Records
-        name="environmentVariables"
-        title="Environment"
-        fields={(index: number) => [
-          {
-            name: `environmentVariables[${index}].key`,
-            placeholder: "Key",
-            required: true,
-            type: "text"
-          },
-          {
-            name: `environmentVariables[${index}].value`,
-            placeholder: "Value",
-            required: false,
-            type: "text"
-          }
-        ]}
-        newValue={{
-          hostPort: "",
-          containerPort: "",
-          protocol: ""
-        }}
-      />
-
       <Records
         name="volumes"
         title="Volumes"
diff --git a/services/frontend/src/components/Modal/service/Edit.tsx b/services/frontend/src/components/Modal/service/Edit.tsx
index f4c0e94..7d8b738 100644
--- a/services/frontend/src/components/Modal/service/Edit.tsx
+++ b/services/frontend/src/components/Modal/service/Edit.tsx
@@ -11,6 +11,8 @@ import {
   validationSchema,
   tabs
 } from "./form-utils";
+import Environment from "./Environment";
+import Build from "./Build";
 
 export interface IModalServiceProps {
   node: IServiceNodeItem;
@@ -102,7 +104,9 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
 
                     <div className="relative px-4 py-3 flex-auto">
                       {openTab === "General" && <General />}
+                      {openTab === "Environment" && <Environment />}
                       {openTab === "Data" && <Data />}
+                      {openTab === "Build" && <Build />}
                     </div>
 
                     <div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
diff --git a/services/frontend/src/components/Modal/service/form-utils.ts b/services/frontend/src/components/Modal/service/form-utils.ts
index 35a32f3..935ec91 100644
--- a/services/frontend/src/components/Modal/service/form-utils.ts
+++ b/services/frontend/src/components/Modal/service/form-utils.ts
@@ -16,6 +16,12 @@ export const tabs = [
     current: true,
     hidden: false
   },
+  {
+    name: "Environment",
+    href: "#",
+    current: false,
+    hidden: false
+  },
   {
     name: "Data",
     href: "#",