diff --git a/packages/bee-q/src/components/dialog/__tests__/bq-dialog.e2e.ts b/packages/bee-q/src/components/dialog/__tests__/bq-dialog.e2e.ts
new file mode 100644
index 000000000..31e91bf38
--- /dev/null
+++ b/packages/bee-q/src/components/dialog/__tests__/bq-dialog.e2e.ts
@@ -0,0 +1,30 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('bq-dialog', () => {
+  it('should render', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<bq-dialog></bq-dialog>');
+
+    const element = await page.find('bq-dialog');
+
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('should have shadow root', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<bq-dialog></bq-dialog>');
+
+    const element = await page.find('bq-dialog');
+
+    expect(element.shadowRoot).not.toBeNull();
+  });
+
+  it('should display text', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<bq-dialog></bq-dialog>');
+
+    const element = await page.find('bq-dialog >>> p');
+
+    expect(element).toEqualText('My name is Stencil');
+  });
+});
diff --git a/packages/bee-q/src/components/dialog/_storybook/bq-dialog.mdx b/packages/bee-q/src/components/dialog/_storybook/bq-dialog.mdx
new file mode 100644
index 000000000..6952d9e46
--- /dev/null
+++ b/packages/bee-q/src/components/dialog/_storybook/bq-dialog.mdx
@@ -0,0 +1,15 @@
+import { ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+
+# Dialog
+
+## Variations
+
+### Default
+
+<Canvas>
+  <Story id="components-dialog--default" />
+</Canvas>
+
+## Properties
+
+<ArgsTable of="bq-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
new file mode 100644
index 000000000..d21e0bbf1
--- /dev/null
+++ b/packages/bee-q/src/components/dialog/_storybook/bq-dialog.stories.tsx
@@ -0,0 +1,24 @@
+import { html } from 'lit-html';
+import mdx from './bq-dialog.mdx';
+
+export default {
+  title: 'Components/Dialog',
+  component: 'bq-dialog',
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+  argTypes: {
+    text: { control: 'text', table: { disable: true } },
+  },
+  args: {
+    text: 'text',
+  },
+};
+
+const Template = (args) => {
+  return html`<bq-dialog>${args.text}</bq-dialog>`;
+};
+
+export const Default = (args) => Template(args);
diff --git a/packages/bee-q/src/components/dialog/bq-dialog.tsx b/packages/bee-q/src/components/dialog/bq-dialog.tsx
new file mode 100644
index 000000000..e80a589c4
--- /dev/null
+++ b/packages/bee-q/src/components/dialog/bq-dialog.tsx
@@ -0,0 +1,59 @@
+import { h, Component } from '@stencil/core';
+
+@Component({
+  tag: 'bq-dialog',
+  styleUrl: './scss/bq-dialog.scss',
+  shadow: true,
+})
+export class BqDialog {
+  // Own Properties
+  // ====================
+
+  // Reference to host HTML element
+  // ===================================
+
+  // State() variables
+  // Inlined decorator, alphabetical order
+  // =======================================
+
+  // Public Property API
+  // ========================
+
+  // Prop lifecycle events
+  // =======================
+
+  // Events section
+  // Requires JSDocs for public API documentation
+  // ==============================================
+
+  // Component lifecycle events
+  // Ordered by their natural call order
+  // =====================================
+
+  // Listeners
+  // ==============
+
+  // Public methods API
+  // These methods are exposed on the host element.
+  // Always use two lines.
+  // Public Methods must be async.
+  // Requires JSDocs for public API documentation.
+  // ===============================================
+
+  // Local methods
+  // Internal business logic.
+  // These methods cannot be called from the host element.
+  // =======================================================
+
+  // render() function
+  // Always the last one in the class.
+  // ===================================
+
+  render() {
+    return (
+      <p class="m-[var(--bq-dialog--margin)]">
+        My name is Stencil <slot />
+      </p>
+    );
+  }
+}
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
new file mode 100644
index 000000000..cb444cf68
--- /dev/null
+++ b/packages/bee-q/src/components/dialog/scss/bq-dialog-variables.scss
@@ -0,0 +1,7 @@
+/* -------------------------------------------------------------------------- */
+/*                          Dialog custom properties           */
+/* -------------------------------------------------------------------------- */
+
+:host {
+  --bq-dialog--margin: 1px;
+}
diff --git a/packages/bee-q/src/components/dialog/scss/bq-dialog.scss b/packages/bee-q/src/components/dialog/scss/bq-dialog.scss
new file mode 100644
index 000000000..fae624f45
--- /dev/null
+++ b/packages/bee-q/src/components/dialog/scss/bq-dialog.scss
@@ -0,0 +1,9 @@
+/* -------------------------------------------------------------------------- */
+/*                                Dialog styles                */
+/* -------------------------------------------------------------------------- */
+
+@import './bq-dialog-variables';
+
+:host {
+  @apply block;
+}