diff --git a/assets/images/tasks.png b/assets/images/tasks.png
index fb31d80..bec0fbc 100644
Binary files a/assets/images/tasks.png and b/assets/images/tasks.png differ
diff --git a/src/constants/Commands.ts b/src/constants/Commands.ts
index 6815906..0442c4c 100644
--- a/src/constants/Commands.ts
+++ b/src/constants/Commands.ts
@@ -43,6 +43,12 @@ export const Commands = {
   // Webviews
   samplesGallery: `${EXTENSION_NAME}.samplesGallery`,
 
+  // Bundle
+  bundleProject: `${EXTENSION_NAME}.bundleProject`,
+
+  // Package
+  packageProject: `${EXTENSION_NAME}.packageProject`,
+
   // Serving
   serveProject: `${EXTENSION_NAME}.serveProject`,
 
diff --git a/src/panels/CommandPanel.ts b/src/panels/CommandPanel.ts
index ca9792b..669d36d 100644
--- a/src/panels/CommandPanel.ts
+++ b/src/panels/CommandPanel.ts
@@ -285,12 +285,10 @@ export class CommandPanel {
   private static taskTreeView() {
     const taskCommands: ActionTreeItem[] = [
       new ActionTreeItem('Build project', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp build'),
-      new ActionTreeItem('Bundle project (local)', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp bundle'),
-      new ActionTreeItem('Bundle project (production)', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp bundle --ship'),
+      new ActionTreeItem('Bundle project', '', { name: 'debug-start', custom: false }, undefined, Commands.bundleProject),
       new ActionTreeItem('Clean project', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp clean'),
       new ActionTreeItem('Deploy project assets to Azure Storage', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp deploy-azure-storage'),
-      new ActionTreeItem('Package (local)', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp package-solution'),
-      new ActionTreeItem('Package (production)', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp package-solution --ship'),
+      new ActionTreeItem('Package', '', { name: 'debug-start', custom: false }, undefined, Commands.packageProject),
       new ActionTreeItem('Serve', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp serve'),
       new ActionTreeItem('Serve (nobrowser)', '', { name: 'debug-start', custom: false }, undefined, Commands.executeTerminalCommand, 'gulp serve --nobrowser'),
       new ActionTreeItem('Serve from configuration', '', { name: 'debug-start', custom: false }, undefined, Commands.serveProject),
diff --git a/src/services/executeWrappers/TerminalCommandExecuter.ts b/src/services/executeWrappers/TerminalCommandExecuter.ts
index 5b73b84..284f9e5 100644
--- a/src/services/executeWrappers/TerminalCommandExecuter.ts
+++ b/src/services/executeWrappers/TerminalCommandExecuter.ts
@@ -22,6 +22,12 @@ export class TerminalCommandExecuter {
     subscriptions.push(
       commands.registerCommand(Commands.serveProject, TerminalCommandExecuter.serveProject)
     );
+    subscriptions.push(
+      commands.registerCommand(Commands.bundleProject, TerminalCommandExecuter.bundleProject)
+    );
+    subscriptions.push(
+      commands.registerCommand(Commands.packageProject, TerminalCommandExecuter.packageProject)
+    );
     subscriptions.push(
       commands.registerCommand(Commands.executeTerminalCommand, TerminalCommandExecuter.runCommand)
     );
@@ -93,6 +99,39 @@ export class TerminalCommandExecuter {
     commands.executeCommand(Commands.executeTerminalCommand, `gulp serve --config=${answer}`);
   }
 
+  /**
+   * Bundles the project based on the environment type selected by the user.
+   */
+  public static async bundleProject() {
+    const answer = await TerminalCommandExecuter.environmentTypePrompt();
+
+    if (answer) {
+      commands.executeCommand(Commands.executeTerminalCommand, `gulp bundle${answer === 'local' ? '' : ' --ship'}`);
+    }
+  }
+
+  /**
+   * Prompts the user to select an environment type and executes the appropriate
+   * Gulp command to package the project based on the user's selection.
+   */
+  public static async packageProject() {
+    const answer = await TerminalCommandExecuter.environmentTypePrompt();
+
+    if (answer) {
+      commands.executeCommand(Commands.executeTerminalCommand, `gulp package-solution${answer === 'local' ? '' : ' --ship'}`);
+    }
+  }
+
+  /**
+   * Prompts the user to select the target environment type.
+   */
+  private static async environmentTypePrompt(): Promise<string | undefined> {
+    return await window.showQuickPick(['local', 'production'], {
+      title: 'Select the target environment',
+      ignoreFocusOut: true
+    });
+  }
+
   /**
    * Initializes the shell path for executing terminal commands.
    * If the shell path is an object with a `path` property, it sets the `shellPath` to that value.