diff --git a/packages/core/src/awsService/appBuilder/explorer/samProject.ts b/packages/core/src/awsService/appBuilder/explorer/samProject.ts
index ce8d0c4878a..722ec323192 100644
--- a/packages/core/src/awsService/appBuilder/explorer/samProject.ts
+++ b/packages/core/src/awsService/appBuilder/explorer/samProject.ts
@@ -30,6 +30,9 @@ export interface ResourceTreeEntity {
     Events?: ResourceTreeEntity[]
     Path?: string
     Method?: string
+    Environment?: {
+        Variables: Record<string, any>
+    }
 }
 
 export async function getStackName(projectRoot: vscode.Uri): Promise<any> {
@@ -81,10 +84,10 @@ function getResourceEntity(template: any): ResourceTreeEntity[] {
             Handler: resource.Properties?.Handler ?? template?.Globals?.Function?.Handler,
             Events: resource.Properties?.Events ? getEvents(resource.Properties.Events) : undefined,
             CodeUri: resource.Properties?.CodeUri ?? template?.Globals?.Function?.CodeUri,
+            Environment: resource.Properties?.Environment ?? template?.Globals?.Function?.Environment,
         }
         resourceTree.push(resourceEntity)
     }
-
     return resourceTree
 }
 
diff --git a/packages/core/src/lambda/vue/configEditor/samInvokeBackend.ts b/packages/core/src/lambda/vue/configEditor/samInvokeBackend.ts
index ba624536b0f..2c3c8ee40dd 100644
--- a/packages/core/src/lambda/vue/configEditor/samInvokeBackend.ts
+++ b/packages/core/src/lambda/vue/configEditor/samInvokeBackend.ts
@@ -46,6 +46,9 @@ export interface ResourceData {
     runtime: string
     stackName: string
     source: string
+    environment?: {
+        Variables: Record<string, any>
+    }
 }
 
 export type AwsSamDebuggerConfigurationLoose = AwsSamDebuggerConfiguration & {
@@ -441,6 +444,7 @@ export async function registerSamDebugInvokeVueCommand(
         runtime: resource.resource.Runtime!,
         arn: resource.functionArn ?? '',
         stackName: resource.stackName ?? '',
+        environment: resource.resource.Environment,
         source: source,
     })
     await telemetry.sam_openConfigUi.run(async (span) => {
diff --git a/packages/core/src/lambda/vue/configEditor/samInvokeComponent.vue b/packages/core/src/lambda/vue/configEditor/samInvokeComponent.vue
index 468d7393ac6..6d64291cff6 100644
--- a/packages/core/src/lambda/vue/configEditor/samInvokeComponent.vue
+++ b/packages/core/src/lambda/vue/configEditor/samInvokeComponent.vue
@@ -29,9 +29,6 @@
                     debugger to the code running in a local Docker container. open
                     <a href="#" @click.prevent="openLaunchJson">launch.json</a>.<br />
                     <br />
-                    <strong>Note:</strong> If you are accessing environment variables in your function code, ensure you
-                    input them in the "Additional fields -> Lambda -> Environment variables" section, following JSON
-                    format:<code>{"KEY":"VALUE"}</code>
                 </em>
             </p>
             <settings-panel id="config-panel" title="General configuration" description="" :start-collapsed="false">
diff --git a/packages/core/src/lambda/vue/configEditor/samInvokeFrontend.ts b/packages/core/src/lambda/vue/configEditor/samInvokeFrontend.ts
index c266abb8a4b..6502accae41 100644
--- a/packages/core/src/lambda/vue/configEditor/samInvokeFrontend.ts
+++ b/packages/core/src/lambda/vue/configEditor/samInvokeFrontend.ts
@@ -345,6 +345,11 @@ export default defineComponent({
                             this.launchConfig.invokeTarget.lambdaHandler = this.resourceData.handler
                             if (this.launchConfig.lambda) {
                                 this.launchConfig.lambda.runtime = this.resourceData.runtime
+                                if (this.resourceData.environment?.Variables !== undefined) {
+                                    this.environmentVariables.value = JSON.stringify(
+                                        this.resourceData.environment?.Variables
+                                    )
+                                }
                             }
                         }
                     },
diff --git a/packages/core/src/test/lambda/vue/samInvokeBackend.test.ts b/packages/core/src/test/lambda/vue/samInvokeBackend.test.ts
index 18ae33b67d0..cbad9bfff55 100644
--- a/packages/core/src/test/lambda/vue/samInvokeBackend.test.ts
+++ b/packages/core/src/test/lambda/vue/samInvokeBackend.test.ts
@@ -728,6 +728,9 @@ describe('SamInvokeWebview', () => {
                     },
                     lambda: {
                         runtime: 'python3.9',
+                        environmentVariables: {
+                            PARAM1: 'VALUE',
+                        },
                     },
                     sam: {
                         containerBuild: false,
diff --git a/packages/toolkit/.changes/next-release/Feature-b2217598-82cb-4268-b731-e137fa6a92e8.json b/packages/toolkit/.changes/next-release/Feature-b2217598-82cb-4268-b731-e137fa6a92e8.json
new file mode 100644
index 00000000000..e96232f471c
--- /dev/null
+++ b/packages/toolkit/.changes/next-release/Feature-b2217598-82cb-4268-b731-e137fa6a92e8.json
@@ -0,0 +1,4 @@
+{
+	"type": "Feature",
+	"description": "Lambda: Support for environment variables in the editor webview."
+}