diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts
index 692f911f1..149ec5f8a 100644
--- a/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts
+++ b/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts
@@ -73,6 +73,7 @@ export class Example7 {
         formatter: () => `<div class="button-style margin-auto" style="width: 35px; margin-top: -1px;"><span class="mdi mdi-chevron-down mdi-22px color-primary"></span></div>`,
         cellMenu: {
           width: 185,
+          hideCloseButton: false,
           commandTitleKey: 'COMMANDS',
           commandItems: [
             {
diff --git a/packages/common/src/extensions/menuBaseClass.ts b/packages/common/src/extensions/menuBaseClass.ts
index c79a4978c..8049f46a7 100644
--- a/packages/common/src/extensions/menuBaseClass.ts
+++ b/packages/common/src/extensions/menuBaseClass.ts
@@ -111,10 +111,19 @@ export class MenuBaseClass<M extends CellMenu | ContextMenu | GridMenu | HeaderM
     menuOptions: M,
     commandOrOptionMenuElm: HTMLElement,
     commandOrOptionItems: Array<ExtractMenuType<ExtendableItemTypes, MenuType>>,
-    args: any,
+    args: unknown,
     itemClickCallback: (event: DOMMouseEvent<HTMLDivElement>, type: MenuType, item: ExtractMenuType<ExtendableItemTypes, MenuType>, columnDef?: Column) => void
   ) {
     if (args && commandOrOptionItems && menuOptions) {
+      for (const item of commandOrOptionItems) {
+        this.populateSingleCommandOrOptionItem(itemType, menuOptions, commandOrOptionMenuElm, item, args, itemClickCallback);
+      }
+    }
+  }
+
+  /** Add the Command/Options Title when necessary. */
+  protected populateCommandOrOptionTitle(itemType: MenuType, menuOptions: M, commandOrOptionMenuElm: HTMLElement) {
+    if (menuOptions) {
       const menuHeaderElm = this._menuElm?.querySelector(`.slick-${itemType}-header`) ?? createDomElement('div', { className: `slick-${itemType}-header` });
       // user could pass a title on top of the Commands/Options section
       const titleProp: 'commandTitle' | 'optionTitle' = `${itemType}Title`;
@@ -126,9 +135,6 @@ export class MenuBaseClass<M extends CellMenu | ContextMenu | GridMenu | HeaderM
         menuHeaderElm.classList.add('no-title');
       }
       commandOrOptionMenuElm.appendChild(menuHeaderElm);
-      for (const item of commandOrOptionItems) {
-        this.populateSingleCommandOrOptionItem(itemType, menuOptions, commandOrOptionMenuElm, item, args, itemClickCallback);
-      }
     }
   }
 
diff --git a/packages/common/src/extensions/menuFromCellBaseClass.ts b/packages/common/src/extensions/menuFromCellBaseClass.ts
index 1461db474..a1b2de20d 100644
--- a/packages/common/src/extensions/menuFromCellBaseClass.ts
+++ b/packages/common/src/extensions/menuFromCellBaseClass.ts
@@ -105,12 +105,9 @@ export class MenuFromCellBaseClass<M extends CellMenu | ContextMenu> extends Men
       // -- Option List section
       if (!(this.addonOptions as CellMenu | ContextMenu).hideOptionSection && isColumnOptionAllowed && optionItems.length > 0) {
         const optionMenuElm = createDomElement('div', { className: `${this._menuCssPrefix}-option-list` });
+        this.populateCommandOrOptionTitle('option', this.addonOptions, optionMenuElm);
         if (!this.addonOptions.hideCloseButton) {
-          this._bindEventService.bind(closeButtonElm, 'click', ((e: DOMMouseEvent<HTMLDivElement>) => this.handleCloseButtonClicked(e)) as EventListener);
-          const optionMenuHeaderElm = createDomElement('div', { className: 'slick-option-header' });
-          optionMenuHeaderElm?.appendChild(closeButtonElm);
-          optionMenuElm.appendChild(optionMenuHeaderElm);
-          optionMenuHeaderElm.classList.add('with-close');
+          this.populateCommandOrOptionCloseBtn('option', closeButtonElm, optionMenuElm);
         }
         this._menuElm.appendChild(optionMenuElm);
         this.populateCommandOrOptionItems(
@@ -126,12 +123,9 @@ export class MenuFromCellBaseClass<M extends CellMenu | ContextMenu> extends Men
       // -- Command List section
       if (!(this.addonOptions as CellMenu | ContextMenu).hideCommandSection && isColumnCommandAllowed && commandItems.length > 0) {
         const commandMenuElm = createDomElement('div', { className: `${this._menuCssPrefix}-command-list` });
+        this.populateCommandOrOptionTitle('command', this.addonOptions, commandMenuElm);
         if (!this.addonOptions.hideCloseButton && (!isColumnOptionAllowed || optionItems.length === 0 || (this.addonOptions as CellMenu | ContextMenu).hideOptionSection)) {
-          this._bindEventService.bind(closeButtonElm, 'click', ((e: DOMMouseEvent<HTMLDivElement>) => this.handleCloseButtonClicked(e)) as EventListener);
-          const commandMenuHeaderElm = createDomElement('div', { className: 'slick-command-header' });
-          commandMenuHeaderElm?.appendChild(closeButtonElm);
-          commandMenuElm.appendChild(commandMenuHeaderElm);
-          commandMenuHeaderElm.classList.add('with-close');
+          this.populateCommandOrOptionCloseBtn('command', closeButtonElm, commandMenuElm);
         }
         this._menuElm.appendChild(commandMenuElm);
         this.populateCommandOrOptionItems(
@@ -239,6 +233,14 @@ export class MenuFromCellBaseClass<M extends CellMenu | ContextMenu> extends Men
     }
   }
 
+  protected populateCommandOrOptionCloseBtn(itemType: MenuType, closeButtonElm: HTMLButtonElement, commandOrOptionMenuElm: HTMLDivElement) {
+    this._bindEventService.bind(closeButtonElm, 'click', ((e: DOMMouseEvent<HTMLDivElement>) => this.handleCloseButtonClicked(e)) as EventListener);
+    const commandOrOptionMenuHeaderElm = commandOrOptionMenuElm.querySelector<HTMLDivElement>(`.slick-${itemType}-header`) ?? createDomElement('div', { className: `slick-${itemType}-header` });
+    commandOrOptionMenuHeaderElm?.appendChild(closeButtonElm);
+    commandOrOptionMenuElm.appendChild(commandOrOptionMenuHeaderElm);
+    commandOrOptionMenuHeaderElm.classList.add('with-close');
+  }
+
   protected repositionMenu(event: DOMMouseEvent<HTMLDivElement>) {
     if (this._menuElm && event.target) {
       // move to 0,0 before calulating height/width since it could be cropped values
diff --git a/packages/common/src/extensions/slickColumnPicker.ts b/packages/common/src/extensions/slickColumnPicker.ts
index bbfc4a746..baeea905c 100644
--- a/packages/common/src/extensions/slickColumnPicker.ts
+++ b/packages/common/src/extensions/slickColumnPicker.ts
@@ -108,10 +108,10 @@ export class SlickColumnPicker {
     this._menuElm.setAttribute('aria-expanded', 'false');
 
     // add Close button and optiona a Column list title
-    addCloseButtomElement.call(this, this._menuElm);
     addColumnTitleElementWhenDefined.call(this, this._menuElm);
+    addCloseButtomElement.call(this, this._menuElm);
 
-    this._listElm = createDomElement('span', { className: 'slick-column-picker-list' });
+    this._listElm = createDomElement('div', { className: 'slick-column-picker-list' });
     this._bindEventService.bind(this._menuElm, 'click', handleColumnPickerItemClick.bind(this) as EventListener);
 
     // Hide the menu on outside click.
diff --git a/packages/common/src/extensions/slickGridMenu.ts b/packages/common/src/extensions/slickGridMenu.ts
index 831cbc8df..09100bfb4 100644
--- a/packages/common/src/extensions/slickGridMenu.ts
+++ b/packages/common/src/extensions/slickGridMenu.ts
@@ -173,7 +173,7 @@ export class SlickGridMenu extends MenuBaseClass<GridMenu> {
       // user could pass a title on top of the columns list
       addColumnTitleElementWhenDefined.call(this, this._menuElm);
 
-      this._listElm = createDomElement('span', { className: 'slick-column-picker-list' });
+      this._listElm = createDomElement('div', { className: 'slick-column-picker-list' });
 
       // update all columns on any of the column title button click from column picker
       this._bindEventService.bind(this._menuElm, 'click', handleColumnPickerItemClick.bind(this) as EventListener);
@@ -795,7 +795,8 @@ export class SlickGridMenu extends MenuBaseClass<GridMenu> {
   /** Re/Create Command List by adding title, close & list of commands */
   recreateCommandList(addonOptions: GridMenu, callbackArgs: GridMenuEventWithElementCallbackArgs) {
     // add Close button
-    const commandMenuHeaderElm = createDomElement('div', { className: 'slick-command-header' });
+    this.populateCommandOrOptionTitle('command', addonOptions, this._commandMenuElm);
+    const commandMenuHeaderElm = this._commandMenuElm.querySelector<HTMLDivElement>(`.slick-command-header`) ?? createDomElement('div', { className: 'slick-command-header' });
     commandMenuHeaderElm.classList.add('with-close');
     addCloseButtomElement.call(this, commandMenuHeaderElm);
     this._commandMenuElm.appendChild(commandMenuHeaderElm);
diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
index 407e010f4..2e328babb 100644
--- a/packages/common/src/styles/_variables.scss
+++ b/packages/common/src/styles/_variables.scss
@@ -306,6 +306,7 @@ $slick-column-picker-label-margin:                          4px !default;
 $slick-column-picker-label-font-weight:                     normal !default;
 $slick-column-picker-link-background-color:                 #ffffff !default;
 $slick-column-picker-list-margin-bottom:                    8px !default;
+$slick-column-picker-list-width:                            max-content !default;
 $slick-column-picker-title-border-bottom:                   1px solid #d6d6d6 !default;
 $slick-column-picker-title-font-size:                       calc(#{$slick-column-picker-item-font-size} + 2px) !default;
 $slick-column-picker-title-font-weight:                     normal !default;
@@ -332,6 +333,7 @@ $slick-menu-close-btn-color:                                #909090 !default;
 $slick-menu-close-btn-font-family:                          $slick-column-picker-close-btn-font-family !default;
 $slick-menu-close-btn-font-size:                            $slick-column-picker-close-btn-font-size !default;
 $slick-menu-close-btn-height:                               18px !default;
+$slick-menu-close-btn-line-height:                          16px !default;
 $slick-menu-close-btn-width:                                18px !default;
 $slick-menu-close-btn-margin:                               0px !default;
 $slick-menu-close-btn-padding:                              0px !default;
@@ -357,15 +359,18 @@ $slick-menu-item-width-when-button:                         calc(100% - #{$slick
 $slick-menu-icon-margin-right:                              4px !default;
 $slick-menu-icon-width:                                     16px !default;
 $slick-menu-line-height:                                    24px !default;
-$slick-menu-min-width:                                      125px !default;
+$slick-menu-min-width:                                      140px !default;
 $slick-menu-option-list-margin-bottom:                      6px !default;
 $slick-menu-padding:                                        6px !default;
+$slick-menu-title-container-display:                        flex !default;
+$slick-menu-title-container-align-items:                    flex-start !default;
+$slick-menu-title-container-justify-content:                flex-end !default;
 $slick-menu-title-border-bottom:                            1px solid #d6d6d6 !default;
 $slick-menu-title-font-size:                                calc(#{$slick-font-size-base} + 2px) !default;
 $slick-menu-title-font-weight:                              normal !default;
 $slick-menu-title-margin-bottom:                            6px !default;
 $slick-menu-title-margin-right:                             7px !default;
-$slick-menu-title-width:                                    calc(100% - #{$slick-menu-close-btn-width} - 10px) !default;
+$slick-menu-title-width:                                    100% !default;
 
 /* Header Button Plugin */
 $slick-header-button-float:                                 right !default;
diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
index 1c6c8d590..67085ff95 100644
--- a/packages/common/src/styles/slick-plugins.scss
+++ b/packages/common/src/styles/slick-plugins.scss
@@ -85,7 +85,7 @@ li.hidden {
 }
 
 .slick-column-picker-list, .slick-grid-menu-list {
-  width: 100%;
+  width: var(--slick-column-picker-list-width, $slick-column-picker-list-width);
 
   li {
     border: var(--slick-column-picker-item-border, $slick-column-picker-item-border);
@@ -96,7 +96,6 @@ li.hidden {
     list-style: none outside none;
     margin: 0;
     padding: var(--slick-column-picker-item-padding, $slick-column-picker-item-padding);
-    width: auto;
     &:hover {
       border: var(--slick-column-picker-item-hover-border, $slick-column-picker-item-hover-border);
       background-color: var(--slick-column-picker-item-hover-color, $slick-column-picker-item-hover-color);
@@ -208,6 +207,12 @@ li.hidden {
 .slick-cell-menu, .slick-context-menu, .slick-grid-menu, .slick-header-menu {
   .slick-menu-option-list,
   .slick-menu-command-list {
+    .slick-command-header, .slick-option-header {
+      display: var(--slick-menu-title-container-display, $slick-menu-title-container-display);
+      align-items: var(--slick-menu-title-container-align-items, $slick-menu-title-container-align-items);
+      justify-content: var(--slick-menu-title-container-justify-content, $slick-menu-title-container-justify-content);
+    }
+
     .slick-command-header.with-title, .slick-option-header.with-title {
       border-bottom: var(--slick-menu-title-border-bottom, $slick-menu-title-border-bottom);
       margin-bottom: var(--slick-menu-title-margin-bottom, $slick-menu-title-margin-bottom);
@@ -229,7 +234,7 @@ li.hidden {
       font-family: var(--slick-menu-close-btn-font-family, $slick-menu-close-btn-font-family);
       font-size: var(--slick-menu-close-btn-font-size, $slick-menu-close-btn-font-size);
       height: var(--slick-menu-close-btn-height, $slick-menu-close-btn-height);
-      line-height: calc(var(--slick-menu-close-btn-height, $slick-menu-close-btn-height) - 2px);
+      line-height: var(--slick-menu-close-btn-line-height, $slick-menu-close-btn-line-height);
       margin: var(--slick-menu-close-btn-margin, $slick-menu-close-btn-margin);
       padding: var(--slick-menu-close-btn-padding, $slick-menu-close-btn-padding);
       width: var(--slick-menu-close-btn-width, $slick-menu-close-btn-width);