diff --git a/packages/hoppscotch-common/src/components/environments/my/Details.vue b/packages/hoppscotch-common/src/components/environments/my/Details.vue
index 28907c685..0ac9f22e5 100644
--- a/packages/hoppscotch-common/src/components/environments/my/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/Details.vue
@@ -165,8 +165,8 @@ const props = withDefaults(
   defineProps<{
     show: boolean
     action: "edit" | "new"
-    editingEnvironmentIndex: number | "Global" | null
-    editingVariableName: string | null
+    editingEnvironmentIndex?: number | "Global" | null
+    editingVariableName?: string | null
     envVars?: () => Environment["variables"]
   }>(),
   {
diff --git a/packages/hoppscotch-common/src/components/environments/teams/Details.vue b/packages/hoppscotch-common/src/components/environments/teams/Details.vue
index ac00d8ca0..6dd47a1ef 100644
--- a/packages/hoppscotch-common/src/components/environments/teams/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/Details.vue
@@ -140,7 +140,7 @@ import * as A from "fp-ts/Array"
 import * as O from "fp-ts/Option"
 import * as TE from "fp-ts/TaskEither"
 import { flow, pipe } from "fp-ts/function"
-import { parseTemplateStringE } from "@hoppscotch/data"
+import { Environment, parseTemplateStringE } from "@hoppscotch/data"
 import { refAutoReset } from "@vueuse/core"
 import { clone } from "lodash-es"
 import { useToast } from "@composables/toast"
@@ -173,16 +173,20 @@ const props = withDefaults(
   defineProps<{
     show: boolean
     action: "edit" | "new"
-    editingEnvironment: TeamEnvironment | null
+    editingEnvironment?: TeamEnvironment | null
     editingTeamId: string | undefined
-    editingVariableName: string | null
-    isViewer: boolean
+    editingVariableName?: string | null
+    isViewer?: boolean
+    envVars?: () => Environment["variables"]
   }>(),
   {
     show: false,
     action: "edit",
     editingEnvironment: null,
     editingTeamId: "",
+    editingVariableName: null,
+    isViewer: false,
+    envVars: () => [],
   }
 )
 
@@ -226,10 +230,16 @@ watch(
   () => props.show,
   (show) => {
     if (show) {
-      if (props.editingEnvironment === null) {
+      if (props.action === "new") {
         name.value = null
-        vars.value = []
-      } else {
+        vars.value = pipe(
+          props.envVars() ?? [],
+          A.map((e: { key: string; value: string }) => ({
+            id: idTicker.value++,
+            env: clone(e),
+          }))
+        )
+      } else if (props.editingEnvironment !== null) {
         name.value = props.editingEnvironment.environment.name ?? null
         vars.value = pipe(
           props.editingEnvironment.environment.variables ?? [],
diff --git a/packages/hoppscotch-common/src/components/http/TestResult.vue b/packages/hoppscotch-common/src/components/http/TestResult.vue
index 70ed156fe..a6541e129 100644
--- a/packages/hoppscotch-common/src/components/http/TestResult.vue
+++ b/packages/hoppscotch-common/src/components/http/TestResult.vue
@@ -197,11 +197,18 @@
       />
     </div>
     <EnvironmentsMyDetails
-      :show="showModalDetails"
+      :show="showMyEnvironmentDetailsModal"
       action="new"
       :env-vars="getAdditionVars"
       @hide-modal="displayModalAdd(false)"
     />
+    <EnvironmentsTeamsDetails
+      :show="showTeamEnvironmentDetailsModal"
+      action="new"
+      :env-vars="getAdditionVars"
+      :editing-team-id="workspace.type === 'team' ? workspace.teamID : null"
+      @hide-modal="displayModalAdd(false)"
+    />
   </div>
 </template>
 
@@ -225,6 +232,7 @@ import IconClose from "~icons/lucide/x"
 
 import { useColorMode } from "~/composables/theming"
 import { useVModel } from "@vueuse/core"
+import { workspaceStatus$ } from "~/newstore/workspace"
 
 const props = defineProps<{
   modelValue: HoppTestResult | null | undefined
@@ -239,10 +247,15 @@ const testResults = useVModel(props, "modelValue", emit)
 const t = useI18n()
 const colorMode = useColorMode()
 
-const showModalDetails = ref(false)
+const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
+
+const showMyEnvironmentDetailsModal = ref(false)
+const showTeamEnvironmentDetailsModal = ref(false)
 
 const displayModalAdd = (shouldDisplay: boolean) => {
-  showModalDetails.value = shouldDisplay
+  if (workspace.value.type === "personal")
+    showMyEnvironmentDetailsModal.value = shouldDisplay
+  else showTeamEnvironmentDetailsModal.value = shouldDisplay
 }
 
 /**