diff --git a/packages/bee-q/src/components.d.ts b/packages/bee-q/src/components.d.ts
index cebe8ce44..16099a5c9 100644
--- a/packages/bee-q/src/components.d.ts
+++ b/packages/bee-q/src/components.d.ts
@@ -173,22 +173,22 @@ export namespace Components {
         "value": string;
     }
     interface BqDialog {
-        /**
-          * If true renders x icon
-         */
-        "closable": boolean;
         /**
           * Hides  the dialog
          */
         "close": () => Promise<void>;
         /**
-          * If true  will not close on outside click
+          * If true will not close on outside click
          */
         "disableOutsideClickClose": boolean;
         /**
           * The appearance of footer
          */
         "footerApperance": TDialogFooterAppearance;
+        /**
+          * If true it hides close button
+         */
+        "hideCloseButton": boolean;
         /**
           * Shows the dialog
          */
@@ -910,17 +910,17 @@ declare namespace LocalJSX {
     }
     interface BqDialog {
         /**
-          * If true renders x icon
-         */
-        "closable"?: boolean;
-        /**
-          * If true  will not close on outside click
+          * If true will not close on outside click
          */
         "disableOutsideClickClose"?: boolean;
         /**
           * The appearance of footer
          */
         "footerApperance"?: TDialogFooterAppearance;
+        /**
+          * If true it hides close button
+         */
+        "hideCloseButton"?: boolean;
         /**
           * The size of the dialog
          */
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 2a102632d..66f621d59 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
@@ -17,14 +17,13 @@ const meta: Meta = {
     text: { control: 'text', table: { disable: true } },
     size: { control: 'select', options: [...DIALOG_SIZE] },
     'footer-apperance': { control: 'select', options: [...DIALOG_FOOTER_APPEARANCE] },
-    closable: { control: 'boolean' },
+    'hide-close-button': { control: 'boolean' },
     'disable-outside-click-close': { control: 'boolean' },
   },
   args: {
     text: 'text',
     size: 'medium',
     'footer-apperance': 'standard',
-    closable: true,
   },
 };
 
@@ -43,10 +42,10 @@ const Template = (args: Args) => {
     <bq-dialog
       size=${args.size}
       footer-apperance=${args['footer-apperance']}
-      ?closable=${args.closable}
+      ?hide-close-button=${args['hide-close-button']}
       ?disable-outside-click-close=${args['disable-outside-click-close']}
     >
-      <div slot="info">
+      <div slot="icon">
         <bq-icon name="info" color="text--accent" role="img" title="Info" part="icon-on" />
       </div>
       <h3 slot="title">Title</h3>
@@ -55,11 +54,11 @@ const Template = (args: Args) => {
         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="buttons">
-        <bq-button appearance="primary" size="small" type="button" variant="ghost" class="hydrated">
+      <footer slot="footer">
+        <bq-button appearance="primary" size="medium" type="button" variant="ghost" class="hydrated">
           Ghost button
         </bq-button>
-        <bq-button appearance="primary" size="small" type="button" variant="standard"> Standard button </bq-button>
+        <bq-button appearance="primary" size="medium" type="button" variant="standard"> Standard button </bq-button>
       </footer>
     </bq-dialog>
   `;
@@ -85,15 +84,15 @@ const ConfirmTemplate = (args: Args) => {
     <bq-dialog
       size=${args.size}
       footer-apperance=${args['footer-apperance']}
-      closable=${args.closable}
+      ?hide-close-button=${args['hide-close-button']}
       ?disable-outside-click-close=${args['disable-outside-click-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="buttons">
+      <footer slot="footer">
         <bq-button
           appearance="primary"
-          size="small"
+          size="medium"
           type="button"
           variant="ghost"
           class="hydrated"
@@ -103,7 +102,7 @@ const ConfirmTemplate = (args: Args) => {
         </bq-button>
         <bq-button
           appearance="primary"
-          size="small"
+          size="medium"
           type="button"
           variant="ghost"
           class="hydrated"
@@ -118,49 +117,8 @@ const ConfirmTemplate = (args: Args) => {
 
 export const Confirm: Story = {
   render: ConfirmTemplate,
-};
-
-const InformTemplate = (args: Args) => {
-  const handleOpenDialog = async () => {
-    const dialogElem = document.querySelector('bq-dialog');
-    await dialogElem.open();
-  };
-
-  const handleCloseDialog = async () => {
-    const dialogElem = document.querySelector('bq-dialog');
-    await dialogElem.close();
-  };
-
-  return html`
-    <bq-button @bqClick=${handleOpenDialog}>Open Inform Dialog</bq-button>
-    <bq-dialog
-      size=${args.size}
-      footer-apperance=${args['footer-apperance']}
-      closable=${args.closable}
-      ?disable-outside-click-close=${args['disable-outside-click-close']}
-    >
-      <h3 slot="title">Something went wrong!</h3>
-      <p slot="content">
-        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="buttons">
-        <bq-button
-          appearance="primary"
-          size="small"
-          type="button"
-          variant="ghost"
-          class="hydrated"
-          @bqClick=${handleCloseDialog}
-        >
-          Close
-        </bq-button>
-      </footer>
-    </bq-dialog>
-  `;
-};
-
-export const Inform: Story = {
-  render: InformTemplate,
+  args: {
+    'hide-close-button': true,
+    'disable-outside-click-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 6e03b1dcf..f314ac2bf 100644
--- a/packages/bee-q/src/components/dialog/bq-dialog.tsx
+++ b/packages/bee-q/src/components/dialog/bq-dialog.tsx
@@ -6,7 +6,7 @@ import { hasSlotContent, validatePropValue } from '../../shared/utils';
 /**
  * @part base - The component wrapper container inside the shadow DOM
  * @part container - The `<div>` container that holds the dialog content
- * @part info - The `<div>` that holds the info icon
+ * @part icon - The `<div>` that holds the info icon
  * @part button-close - The button that close the dialog on click
  * @part footer - The `<footer>` that holds footer content
  */
@@ -21,7 +21,7 @@ export class BqDialog {
   // ====================
 
   private overlayElem: HTMLDivElement;
-  private infoElem: HTMLElement;
+  private iconElem: HTMLElement;
 
   // Reference to host HTML element
   // ===================================
@@ -33,7 +33,7 @@ export class BqDialog {
 
   @State() private isOpen = false;
 
-  @State() private hasInfoIcon = false;
+  @State() private hasIconIcon = false;
 
   // Public Property API
   // ========================
@@ -44,10 +44,10 @@ export class BqDialog {
   /** The appearance of footer */
   @Prop({ reflect: true }) footerApperance: TDialogFooterAppearance = 'standard';
 
-  /** If true renders x icon */
-  @Prop({ reflect: true }) closable = true;
+  /** If true it hides close button */
+  @Prop({ reflect: true }) hideCloseButton = false;
 
-  /** If true  will not close on outside click */
+  /** If true will not close on outside click */
   @Prop({ reflect: true }) disableOutsideClickClose = false;
 
   // Prop lifecycle events
@@ -85,7 +85,6 @@ export class BqDialog {
   @Method()
   async open() {
     this.isOpen = true;
-    this.handleSlotChange();
   }
 
   /** Hides  the dialog */
@@ -108,8 +107,8 @@ export class BqDialog {
     this.isOpen = false;
   };
 
-  private handleSlotChange = () => {
-    this.hasInfoIcon = hasSlotContent(this.infoElem, 'info');
+  private handleIconSlotChange = () => {
+    this.hasIconIcon = hasSlotContent(this.iconElem, 'icon');
   };
 
   // render() function
@@ -127,17 +126,17 @@ export class BqDialog {
         <div
           class={{
             'z-10 m-auto flex flex-col rounded-s bg-bg-primary shadow-m': true,
-            [`size--${this.size}`]: true,
+            [`bq-dialog__size--${this.size}`]: true,
           }}
           part="container"
         >
-          <header class="bq-header">
+          <header class="bq-dialog__header">
             <div
-              class={{ 'bq-placeholder-info': this.hasInfoIcon }}
-              ref={(divElem) => (this.infoElem = divElem)}
-              part="info"
+              class={{ 'bq-dialog__icon': this.hasIconIcon }}
+              ref={(divElem) => (this.iconElem = divElem)}
+              part="icon"
             >
-              <slot name="info" onSlotchange={this.handleSlotChange} />
+              <slot name="icon" onSlotchange={this.handleIconSlotChange} />
             </div>
             <div class="flex flex-col pl-m">
               <slot name="title" />
@@ -145,16 +144,10 @@ export class BqDialog {
                 <slot name="content" />
               </div>
             </div>
-            <div part="button-close">
+            <div part="button-close" onClick={this.handleCloseClick}>
               <slot name="button-close">
-                {this.closable && (
-                  <bq-button
-                    class="cursor-auto"
-                    appearance="text"
-                    size="small"
-                    onClick={this.handleCloseClick}
-                    slot="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>
                 )}
@@ -163,12 +156,12 @@ export class BqDialog {
           </header>
           <footer
             class={{
-              'flex h-[72px] w-full items-center justify-end p-l': true,
-              'rounded-s bg-ui-secondary-light': this.footerApperance === 'highlight',
+              'flex w-full items-center justify-end px-l py-s': true,
+              'bg-ui-secondary-light': this.footerApperance === 'highlight',
             }}
             part="footer"
           >
-            <slot name="buttons" />
+            <slot name="footer" />
           </footer>
         </div>
       </Host>
diff --git a/packages/bee-q/src/components/dialog/readme.md b/packages/bee-q/src/components/dialog/readme.md
index 000f9606c..a1ef2a998 100644
--- a/packages/bee-q/src/components/dialog/readme.md
+++ b/packages/bee-q/src/components/dialog/readme.md
@@ -7,12 +7,12 @@
 
 ## Properties
 
-| Property                   | Attribute                     | Description                              | Type                             | Default      |
-| -------------------------- | ----------------------------- | ---------------------------------------- | -------------------------------- | ------------ |
-| `closable`                 | `closable`                    | If true renders x icon                   | `boolean`                        | `true`       |
-| `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'` |
-| `size`                     | `size`                        | The size of the dialog                   | `"large" \| "medium" \| "small"` | `'medium'`   |
+| Property                   | Attribute                     | Description                             | Type                             | Default      |
+| -------------------------- | ----------------------------- | --------------------------------------- | -------------------------------- | ------------ |
+| `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`      |
+| `size`                     | `size`                        | The size of the dialog                  | `"large" \| "medium" \| "small"` | `'medium'`   |
 
 
 ## Methods
@@ -46,7 +46,7 @@ Type: `Promise<void>`
 | `"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              |
-| `"info"`         | The `<div>` that holds the info icon                  |
+| `"icon"`         | The `<div>` that holds the info icon                  |
 
 
 ## Dependencies
diff --git a/packages/bee-q/src/components/dialog/scss/bq-dialog-variables.scss b/packages/bee-q/src/components/dialog/scss/bq-dialog-variables.scss
index cb548b172..648fc77f4 100644
--- a/packages/bee-q/src/components/dialog/scss/bq-dialog-variables.scss
+++ b/packages/bee-q/src/components/dialog/scss/bq-dialog-variables.scss
@@ -3,6 +3,7 @@
 /* -------------------------------------------------------------------------- */
 
 :host {
+  --bq-dialog-z-index: 10;
   --bq-dialog--small-width: 320px;
   --bq-dialog--medium-width: 480px;
   --bq-dialog--large-width: 640px;
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 8db392ea7..fa45c7dc9 100644
--- a/packages/bee-q/src/components/dialog/scss/bq-dialog.scss
+++ b/packages/bee-q/src/components/dialog/scss/bq-dialog.scss
@@ -5,38 +5,30 @@
 @import './bq-dialog-variables';
 
 :host {
-  @apply fixed left-0 top-0 -z-10 flex h-full w-full items-center justify-center;
+  @apply fixed left-0 top-0 -z-[var(--bq-dialog-z-index)] flex h-full w-full items-center justify-center;
   @apply invisible #{!important};
 }
 
 :host(.is-open) {
-  @apply z-10;
+  @apply z-[var(--bq-dialog-z-index)];
   @apply visible #{!important};
 }
 
-header {
-  @apply px-l pt-l;
+.bq-dialog__header {
+  @apply flex justify-between px-l pt-l;
 }
 
-.open {
-  @apply flex;
-}
-
-.bq-header {
-  @apply flex justify-between;
-}
-
-.bq-placeholder-info {
+.bq-dialog__icon {
   @apply pl-xs2 pt-xs2;
 
   ::slotted(bq-icon) {
-    --bq-icon--size: var(--bq-dialog--icon-size) !important;
+    --bq-icon--size: var(--bq-dialog--icon-size) #{!important};
   }
 }
 
 // Size
 
-.size {
+.bq-dialog__size {
   &--small {
     @apply w-[var(--bq-dialog--small-width)];
   }