diff --git a/packages/bee-q/src/components.d.ts b/packages/bee-q/src/components.d.ts
index 16099a5c9..6897c1f96 100644
--- a/packages/bee-q/src/components.d.ts
+++ b/packages/bee-q/src/components.d.ts
@@ -177,6 +177,10 @@ export namespace Components {
           * Hides  the dialog
          */
         "close": () => Promise<void>;
+        /**
+          * If true will not close on escape press
+         */
+        "disableEscKeyDownClose": boolean;
         /**
           * If true will not close on outside click
          */
@@ -909,6 +913,10 @@ declare namespace LocalJSX {
         "value": string;
     }
     interface BqDialog {
+        /**
+          * If true will not close on escape press
+         */
+        "disableEscKeyDownClose"?: boolean;
         /**
           * If true will not close on outside click
          */
diff --git a/packages/bee-q/src/components/dialog/_storybook/bq-dialog.stories.tsx b/packages/bee-q/src/components/dialog/_storybook/bq-dialog.stories.tsx
index 66f621d59..58564d86f 100644
--- a/packages/bee-q/src/components/dialog/_storybook/bq-dialog.stories.tsx
+++ b/packages/bee-q/src/components/dialog/_storybook/bq-dialog.stories.tsx
@@ -19,6 +19,7 @@ const meta: Meta = {
     'footer-apperance': { control: 'select', options: [...DIALOG_FOOTER_APPEARANCE] },
     'hide-close-button': { control: 'boolean' },
     'disable-outside-click-close': { control: 'boolean' },
+    'disable-esc-key-down-close': { control: 'boolean' },
   },
   args: {
     text: 'text',
@@ -44,22 +45,21 @@ const Template = (args: Args) => {
       footer-apperance=${args['footer-apperance']}
       ?hide-close-button=${args['hide-close-button']}
       ?disable-outside-click-close=${args['disable-outside-click-close']}
+      ?disable-esc-key-down-close=${args['disable-esc-key-down-close']}
     >
-      <div slot="icon">
-        <bq-icon name="info" color="text--accent" role="img" title="Info" part="icon-on" />
-      </div>
+      <bq-icon name="info" color="text--accent" role="img" title="Info" part="icon-on" slot="icon"></bq-icon>
       <h3 slot="title">Title</h3>
-      <p slot="content">
+      <p slot="description">
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
         standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
         a type specimen book.
       </p>
-      <footer slot="footer">
-        <bq-button appearance="primary" size="medium" type="button" variant="ghost" class="hydrated">
-          Ghost button
-        </bq-button>
-        <bq-button appearance="primary" size="medium" type="button" variant="standard"> Standard button </bq-button>
-      </footer>
+      <bq-button appearance="primary" size="medium" type="button" variant="ghost" class="hydrated" slot="footer">
+        Ghost button
+      </bq-button>
+      <bq-button appearance="primary" size="medium" type="button" variant="standard" slot="footer">
+        Standard button
+      </bq-button>
     </bq-dialog>
   `;
 };
@@ -86,31 +86,32 @@ const ConfirmTemplate = (args: Args) => {
       footer-apperance=${args['footer-apperance']}
       ?hide-close-button=${args['hide-close-button']}
       ?disable-outside-click-close=${args['disable-outside-click-close']}
+      ?disable-esc-key-down-close=${args['disable-esc-key-down-close']}
     >
       <h3 slot="title">Lorem Ipsum ?</h3>
-      <p slot="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
-      <footer slot="footer">
-        <bq-button
-          appearance="primary"
-          size="medium"
-          type="button"
-          variant="ghost"
-          class="hydrated"
-          @bqClick=${handleCloseDialog}
-        >
-          Disagree
-        </bq-button>
-        <bq-button
-          appearance="primary"
-          size="medium"
-          type="button"
-          variant="ghost"
-          class="hydrated"
-          @bqClick=${handleCloseDialog}
-        >
-          Agree
-        </bq-button>
-      </footer>
+      <p slot="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+      <bq-button
+        appearance="primary"
+        size="medium"
+        type="button"
+        variant="ghost"
+        class="hydrated"
+        @bqClick=${handleCloseDialog}
+        slot="footer"
+      >
+        Disagree
+      </bq-button>
+      <bq-button
+        appearance="primary"
+        size="medium"
+        type="button"
+        variant="standard"
+        class="hydrated"
+        @bqClick=${handleCloseDialog}
+        slot="footer"
+      >
+        Agree
+      </bq-button>
     </bq-dialog>
   `;
 };
@@ -120,5 +121,6 @@ export const Confirm: Story = {
   args: {
     'hide-close-button': true,
     'disable-outside-click-close': true,
+    'disable-esc-key-down-close': true,
   },
 };
diff --git a/packages/bee-q/src/components/dialog/bq-dialog.tsx b/packages/bee-q/src/components/dialog/bq-dialog.tsx
index f314ac2bf..9c791e613 100644
--- a/packages/bee-q/src/components/dialog/bq-dialog.tsx
+++ b/packages/bee-q/src/components/dialog/bq-dialog.tsx
@@ -1,13 +1,18 @@
-import { h, Component, Prop, Element, Watch, State, Method, Host } from '@stencil/core';
+import { h, Component, Prop, Element, Watch, State, Method, Host, Listen } from '@stencil/core';
 
 import { DIALOG_SIZE, TDialogSize, TDialogFooterAppearance, DIALOG_FOOTER_APPEARANCE } from './bq-dialog.types';
 import { hasSlotContent, validatePropValue } from '../../shared/utils';
 
 /**
  * @part base - The component wrapper container inside the shadow DOM
+ * @part backdrop - The `<div>` that displays the background
  * @part container - The `<div>` container that holds the dialog content
+ * @part header - The `<header>` that holds the icon, title, description and close button
  * @part icon - The `<div>` that holds the info icon
+ * @part title - The `<div>` that holds the title content
  * @part button-close - The button that close the dialog on click
+ * @part description- The `<div>` that holds the description content
+ * @part content- The `<main>` that holds the content
  * @part footer - The `<footer>` that holds footer content
  */
 
@@ -21,7 +26,9 @@ export class BqDialog {
   // ====================
 
   private overlayElem: HTMLDivElement;
-  private iconElem: HTMLElement;
+  private iconElem: HTMLDivElement;
+  private contentElem: HTMLElement;
+  private footerElem: HTMLElement;
 
   // Reference to host HTML element
   // ===================================
@@ -33,7 +40,11 @@ export class BqDialog {
 
   @State() private isOpen = false;
 
-  @State() private hasIconIcon = false;
+  @State() private hasIcon = false;
+
+  @State() private hasContent = false;
+
+  @State() private hasFooter = false;
 
   // Public Property API
   // ========================
@@ -50,6 +61,9 @@ export class BqDialog {
   /** If true will not close on outside click */
   @Prop({ reflect: true }) disableOutsideClickClose = false;
 
+  /** If true will not close on escape press */
+  @Prop({ reflect: true }) disableEscKeyDownClose = false;
+
   // Prop lifecycle events
   // =======================
   @Watch('size')
@@ -74,6 +88,15 @@ export class BqDialog {
   // Listeners
   // ==============
 
+  @Listen('keydown', { target: 'body', passive: true })
+  async onKeyDown(event: KeyboardEvent) {
+    if (!this.open || this.disableEscKeyDownClose) return;
+
+    if (event.key === 'Escape') {
+      await this.close();
+    }
+  }
+
   // Public methods API
   // These methods are exposed on the host element.
   // Always use two lines.
@@ -98,17 +121,26 @@ export class BqDialog {
   // These methods cannot be called from the host element.
   // =======================================================
 
-  handleCloseClick = () => {
+  private handleOverlayClick = (event: MouseEvent) => {
+    if (event.target !== this.overlayElem || this.disableOutsideClickClose) return;
+
     this.isOpen = false;
   };
 
-  handleOverlayClick = (event: MouseEvent) => {
-    if (event.target !== this.overlayElem || this.disableOutsideClickClose) return;
+  private handleCloseClick = () => {
     this.isOpen = false;
   };
 
   private handleIconSlotChange = () => {
-    this.hasIconIcon = hasSlotContent(this.iconElem, 'icon');
+    this.hasIcon = hasSlotContent(this.iconElem, 'icon');
+  };
+
+  private handleContentSlotChange = () => {
+    this.hasContent = hasSlotContent(this.contentElem, 'content');
+  };
+
+  private handleFooterSlotChange = () => {
+    this.hasFooter = hasSlotContent(this.footerElem, 'footer');
   };
 
   // render() function
@@ -119,49 +151,50 @@ export class BqDialog {
     return (
       <Host class={{ 'is-open': this.isOpen }} part="base">
         <div
-          class="overlay fixed h-full w-full bg-bg-tertiary opacity-75"
+          class="bq-dialog__backdrop"
+          ref={(divElem) => (this.overlayElem = divElem)}
           onClick={this.handleOverlayClick}
-          ref={(el) => (this.overlayElem = el)}
+          part="backdrop"
         />
-        <div
-          class={{
-            'z-10 m-auto flex flex-col rounded-s bg-bg-primary shadow-m': true,
-            [`bq-dialog__size--${this.size}`]: true,
-          }}
-          part="container"
-        >
-          <header class="bq-dialog__header">
-            <div
-              class={{ 'bq-dialog__icon': this.hasIconIcon }}
-              ref={(divElem) => (this.iconElem = divElem)}
-              part="icon"
-            >
+        <div class={{ [`bq-dialog__container bq-dialog__container--${this.size}`]: true }} part="container">
+          <header class="bq-dialog__header" part="header">
+            <div class={{ 'bq-dialog__icon': this.hasIcon }} ref={(divElem) => (this.iconElem = divElem)} part="icon">
               <slot name="icon" onSlotchange={this.handleIconSlotChange} />
             </div>
-            <div class="flex flex-col pl-m">
-              <slot name="title" />
-              <div class="bq-description">
-                <slot name="content" />
+            <div class="flex flex-col gap-s">
+              <div class="bq-dialog__title" part="title">
+                <slot name="title" />
+                <div part="button-close" class="self-baseline" onClick={this.handleCloseClick}>
+                  <slot name="button-close">
+                    {!this.hideCloseButton && (
+                      <bq-button class="bq-dialog__button-close" appearance="text" size="small" slot="button-close">
+                        <bq-icon class="cursor-pointer" name="x" role="img" title="Close" />
+                      </bq-button>
+                    )}
+                  </slot>
+                </div>
+              </div>
+              <div part="description">
+                <slot name="description" />
               </div>
-            </div>
-            <div part="button-close" onClick={this.handleCloseClick}>
-              <slot name="button-close">
-                {!this.hideCloseButton && (
-                  <bq-button class="cursor-auto" appearance="text" size="small" slot="button-close">
-                    <bq-icon class="cursor-pointer" name="x" role="img" title="Close" />
-                  </bq-button>
-                )}
-              </slot>
             </div>
           </header>
+          <main
+            class={{ hidden: !this.hasContent, 'px-l': this.hasContent }}
+            ref={(mainElem) => (this.contentElem = mainElem)}
+            part="content"
+          >
+            <slot name="content" onSlotchange={this.handleContentSlotChange} />
+          </main>
           <footer
             class={{
-              'flex w-full items-center justify-end px-l py-s': true,
+              'bq-dialog__footer': this.hasFooter,
               'bg-ui-secondary-light': this.footerApperance === 'highlight',
             }}
+            ref={(footerElem) => (this.footerElem = footerElem)}
             part="footer"
           >
-            <slot name="footer" />
+            <slot name="footer" onSlotchange={this.handleFooterSlotChange} />
           </footer>
         </div>
       </Host>
diff --git a/packages/bee-q/src/components/dialog/readme.md b/packages/bee-q/src/components/dialog/readme.md
index a1ef2a998..95fb3e985 100644
--- a/packages/bee-q/src/components/dialog/readme.md
+++ b/packages/bee-q/src/components/dialog/readme.md
@@ -9,6 +9,7 @@
 
 | Property                   | Attribute                     | Description                             | Type                             | Default      |
 | -------------------------- | ----------------------------- | --------------------------------------- | -------------------------------- | ------------ |
+| `disableEscKeyDownClose`   | `disable-esc-key-down-close`  | If true will not close on escape press  | `boolean`                        | `false`      |
 | `disableOutsideClickClose` | `disable-outside-click-close` | If true will not close on outside click | `boolean`                        | `false`      |
 | `footerApperance`          | `footer-apperance`            | The appearance of footer                | `"highlight" \| "standard"`      | `'standard'` |
 | `hideCloseButton`          | `hide-close-button`           | If true it hides close button           | `boolean`                        | `false`      |
@@ -40,13 +41,20 @@ Type: `Promise<void>`
 
 ## Shadow Parts
 
-| Part             | Description                                           |
-| ---------------- | ----------------------------------------------------- |
-| `"base"`         | The component wrapper container inside the shadow DOM |
-| `"button-close"` | The button that close the dialog on click             |
-| `"container"`    | The `<div>` container that holds the dialog content   |
-| `"footer"`       | The `<footer>` that holds footer content              |
-| `"icon"`         | The `<div>` that holds the info icon                  |
+| Part                                                            | Description                                                             |
+| --------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `"backdrop"`                                                    | The `<div>` that displays the background                                |
+| `"base"`                                                        | The component wrapper container inside the shadow DOM                   |
+| `"button-close"`                                                | The button that close the dialog on click                               |
+| `"container"`                                                   | The `<div>` container that holds the dialog content                     |
+| `"content"`                                                     |                                                                         |
+| `"content- The `<main>` that holds the content"`                |                                                                         |
+| `"description"`                                                 |                                                                         |
+| `"description- The `<div>` that holds the description content"` |                                                                         |
+| `"footer"`                                                      | The `<footer>` that holds footer content                                |
+| `"header"`                                                      | The `<header>` that holds the icon, title, description and close button |
+| `"icon"`                                                        | The `<div>` that holds the info icon                                    |
+| `"title"`                                                       | The `<div>` that holds the title content                                |
 
 
 ## Dependencies
diff --git a/packages/bee-q/src/components/dialog/scss/bq-dialog.scss b/packages/bee-q/src/components/dialog/scss/bq-dialog.scss
index fa45c7dc9..e5a90cc9f 100644
--- a/packages/bee-q/src/components/dialog/scss/bq-dialog.scss
+++ b/packages/bee-q/src/components/dialog/scss/bq-dialog.scss
@@ -14,21 +14,13 @@
   @apply visible #{!important};
 }
 
-.bq-dialog__header {
-  @apply flex justify-between px-l pt-l;
+.bq-dialog__backdrop {
+  @apply fixed h-full w-full bg-bg-tertiary opacity-75;
 }
 
-.bq-dialog__icon {
-  @apply pl-xs2 pt-xs2;
-
-  ::slotted(bq-icon) {
-    --bq-icon--size: var(--bq-dialog--icon-size) #{!important};
-  }
-}
+.bq-dialog__container {
+  @apply z-[var(--bq-dialog-z-index)] m-auto flex flex-col gap-l rounded-s bg-bg-primary shadow-m;
 
-// Size
-
-.bq-dialog__size {
   &--small {
     @apply w-[var(--bq-dialog--small-width)];
   }
@@ -41,3 +33,33 @@
     @apply w-[var(--bq-dialog--large-width)];
   }
 }
+
+.bq-dialog__header {
+  @apply flex gap-s p-l pb-0;
+}
+
+.bq-dialog__title {
+  @apply flex min-h-[var(--bq-dialog--icon-size)] items-center justify-between;
+}
+
+.bq-dialog__icon {
+  @apply p-xs3 pb-0;
+
+  ::slotted(bq-icon) {
+    --bq-icon--size: var(--bq-dialog--icon-size) #{!important};
+  }
+}
+
+.bq-dialog__button-close {
+  @apply cursor-auto;
+  --bq-button--small-paddingX: theme('spacing.xs2');
+  --bq-button--small-paddingY: theme('spacing.xs2');
+
+  &::part(button) {
+    @apply border-none;
+  }
+}
+
+.bq-dialog__footer {
+  @apply flex w-full items-center justify-end gap-xs px-l py-s;
+}