diff --git a/packages/bee-q/src/components.d.ts b/packages/bee-q/src/components.d.ts
index 1f08e8a2e..b6451dbe4 100644
--- a/packages/bee-q/src/components.d.ts
+++ b/packages/bee-q/src/components.d.ts
@@ -297,7 +297,7 @@ export namespace Components {
         /**
           * If true, the notification will be shown
          */
-        "isOpen": boolean;
+        "open": boolean;
         /**
           * Method to be called to show the notification component
          */
@@ -1153,10 +1153,6 @@ declare namespace LocalJSX {
           * If true, the notification icon won't be shown
          */
         "hideIcon"?: boolean;
-        /**
-          * If true, the notification will be shown
-         */
-        "isOpen"?: boolean;
         /**
           * Callback handler to be called when the notification is hidden
          */
@@ -1165,6 +1161,10 @@ declare namespace LocalJSX {
           * Callback handler to be called when the notification is shown
          */
         "onBqShow"?: (event: BqNotificationCustomEvent<any>) => void;
+        /**
+          * If true, the notification will be shown
+         */
+        "open"?: boolean;
         /**
           * The length of time, in milliseconds, after which the notification will close itself. Only valid if `autoDismiss="true"`
          */
diff --git a/packages/bee-q/src/components/notification/__tests__/bq-notification.e2e.ts b/packages/bee-q/src/components/notification/__tests__/bq-notification.e2e.ts
index 88ea161ca..6054cf2ce 100644
--- a/packages/bee-q/src/components/notification/__tests__/bq-notification.e2e.ts
+++ b/packages/bee-q/src/components/notification/__tests__/bq-notification.e2e.ts
@@ -17,6 +17,42 @@ describe('bq-notification', () => {
     expect(element.shadowRoot).not.toBeNull();
   });
 
+  it('should render as hidden', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<bq-notification></bq-notification>');
+
+    const element = await page.find('bq-notification');
+    expect(element).toEqualAttribute('aria-hidden', 'true');
+    expect(element).toHaveClass('is-hidden');
+  });
+
+  it('should render as hidden with `open="false"`', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<bq-notification open="false"></bq-notification>');
+
+    const element = await page.find('bq-notification');
+    expect(element).toEqualAttribute('aria-hidden', 'true');
+    expect(element).toHaveClass('is-hidden');
+  });
+
+  it('should render as open', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<bq-notification open></bq-notification>');
+
+    const element = await page.find('bq-notification');
+    expect(element).not.toEqualAttribute('aria-hidden', 'true');
+    expect(element).not.toHaveClass('is-hidden');
+  });
+
+  it('should render as open with `open="true"`', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<bq-notification open="true"></bq-notification>');
+
+    const element = await page.find('bq-notification');
+    expect(element).not.toEqualAttribute('aria-hidden', 'true');
+    expect(element).not.toHaveClass('is-hidden');
+  });
+
   it('should render basic notification', async () => {
     const page = await newE2EPage();
     await page.setContent(`
diff --git a/packages/bee-q/src/components/notification/_storybook/bq-notification.stories.tsx b/packages/bee-q/src/components/notification/_storybook/bq-notification.stories.tsx
index a290b9c37..98c126f5f 100644
--- a/packages/bee-q/src/components/notification/_storybook/bq-notification.stories.tsx
+++ b/packages/bee-q/src/components/notification/_storybook/bq-notification.stories.tsx
@@ -18,7 +18,7 @@ const meta: Meta = {
     'auto-dismiss': { control: 'boolean' },
     'disable-close': { control: 'boolean' },
     'hide-icon': { control: 'boolean' },
-    'is-open': { control: 'boolean' },
+    open: { control: 'boolean' },
     time: { control: 'number' },
     type: { control: 'select', options: [...NOTIFICATION_TYPE] },
     // Not part of the component API, but used for the story
@@ -28,7 +28,7 @@ const meta: Meta = {
     'auto-dismiss': false,
     'disable-close': false,
     'hide-icon': false,
-    'is-open': false,
+    open: false,
     time: 3000,
     type: 'info',
     // Not part of the component API, but used for the story
@@ -45,7 +45,7 @@ const Template = (args: Args) => html`
       ?auto-dismiss=${args['auto-dismiss']}
       ?disable-close=${args['disable-close']}
       ?hide-icon=${args['hide-icon']}
-      ?is-open=${args['is-open']}
+      ?open=${args.open}
       time=${args.time}
       type=${args.type}
     >
@@ -56,7 +56,7 @@ const Template = (args: Args) => html`
       ?auto-dismiss=${args['auto-dismiss']}
       ?disable-close=${args['disable-close']}
       ?hide-icon=${args['hide-icon']}
-      ?is-open=${args['is-open']}
+      ?open=${args.open}
       time=${args.time}
       type=${args.type}
     >
@@ -71,7 +71,7 @@ const Template = (args: Args) => html`
       ?auto-dismiss=${args['auto-dismiss']}
       ?disable-close=${args['disable-close']}
       ?hide-icon=${args['hide-icon']}
-      ?is-open=${args['is-open']}
+      ?open=${args.open}
       time=${args.time}
       type=${args.type}
     >
@@ -91,7 +91,7 @@ const Template = (args: Args) => html`
 export const Default: Story = {
   render: Template,
   args: {
-    'is-open': true,
+    open: true,
   },
 };
 
@@ -100,7 +100,7 @@ export const ErrorType: Story = {
   name: 'Error',
   render: Template,
   args: {
-    'is-open': true,
+    open: true,
     type: 'error',
   },
 };
@@ -108,7 +108,7 @@ export const ErrorType: Story = {
 export const Neutral: Story = {
   render: Template,
   args: {
-    'is-open': true,
+    open: true,
     type: 'neutral',
   },
 };
@@ -116,7 +116,7 @@ export const Neutral: Story = {
 export const Success: Story = {
   render: Template,
   args: {
-    'is-open': true,
+    open: true,
     type: 'success',
   },
 };
@@ -124,7 +124,7 @@ export const Success: Story = {
 export const Warning: Story = {
   render: Template,
   args: {
-    'is-open': true,
+    open: true,
     type: 'warning',
   },
 };
@@ -132,7 +132,7 @@ export const Warning: Story = {
 export const CustomIcon: Story = {
   render: Template,
   args: {
-    'is-open': true,
+    open: true,
     customIcon: true,
   },
 };
diff --git a/packages/bee-q/src/components/notification/bq-notification.tsx b/packages/bee-q/src/components/notification/bq-notification.tsx
index 567ad060d..fbe960883 100644
--- a/packages/bee-q/src/components/notification/bq-notification.tsx
+++ b/packages/bee-q/src/components/notification/bq-notification.tsx
@@ -57,7 +57,7 @@ export class BqNotification {
   @Prop({ reflect: true }) hideIcon: boolean;
 
   /** If true, the notification will be shown */
-  @Prop({ reflect: true, mutable: true }) isOpen: boolean;
+  @Prop({ reflect: true, mutable: true }) open: boolean;
 
   /** The length of time, in milliseconds, after which the notification will close itself. Only valid if `autoDismiss="true"` */
   @Prop({ reflect: true }) time: number = 3000;
@@ -77,14 +77,14 @@ export class BqNotification {
       this.hide();
     }, this.time);
     // Make sure to autodismiss the notification if the `auto-dismiss` value changed while open
-    if (this.isOpen) this.autoDismissDebounce();
+    if (this.open) this.autoDismissDebounce();
   }
 
-  @Watch('isOpen')
+  @Watch('open')
   handleOpenChange() {
     this.autoDismissDebounce?.cancel();
 
-    if (!(this.autoDismiss && this.isOpen)) return;
+    if (!(this.autoDismiss && this.open)) return;
     this.autoDismissDebounce();
   }
 
@@ -173,14 +173,14 @@ export class BqNotification {
   private handleHide = () => {
     const ev = this.bqHide.emit(this.el);
     if (!ev.defaultPrevented) {
-      this.isOpen = false;
+      this.open = false;
     }
   };
 
   private handleShow = () => {
     const ev = this.bqShow.emit(this.el);
     if (!ev.defaultPrevented) {
-      this.isOpen = true;
+      this.open = true;
     }
   };
 
@@ -211,7 +211,12 @@ export class BqNotification {
 
   render() {
     return (
-      <Host aria-hidden={!this.isOpen ? 'true' : 'false'} hidden={!this.isOpen ? 'true' : 'false'} role="alert">
+      <Host
+        class={{ 'is-hidden': !this.open }}
+        aria-hidden={!this.open ? 'true' : 'false'}
+        hidden={!this.open ? 'true' : 'false'}
+        role="alert"
+      >
         <div class="bq-notification" part="wrapper">
           {/* CLOSE BUTTON */}
           {!this.disableClose && (
diff --git a/packages/bee-q/src/components/notification/readme.md b/packages/bee-q/src/components/notification/readme.md
index 277e97182..a36355892 100644
--- a/packages/bee-q/src/components/notification/readme.md
+++ b/packages/bee-q/src/components/notification/readme.md
@@ -12,7 +12,7 @@
 | `autoDismiss`  | `auto-dismiss`  | If true, the notification will automatically hide after the specified amount of time                                    | `boolean`                                                  | `undefined` |
 | `disableClose` | `disable-close` | If true, the close button at the top right of the notification won't be shown                                           | `boolean`                                                  | `undefined` |
 | `hideIcon`     | `hide-icon`     | If true, the notification icon won't be shown                                                                           | `boolean`                                                  | `undefined` |
-| `isOpen`       | `is-open`       | If true, the notification will be shown                                                                                 | `boolean`                                                  | `undefined` |
+| `open`         | `open`          | If true, the notification will be shown                                                                                 | `boolean`                                                  | `undefined` |
 | `time`         | `time`          | The length of time, in milliseconds, after which the notification will close itself. Only valid if `autoDismiss="true"` | `number`                                                   | `3000`      |
 | `type`         | `type`          | Type of Notification                                                                                                    | `"error" \| "info" \| "neutral" \| "success" \| "warning"` | `'info'`    |
 
diff --git a/packages/bee-q/src/components/notification/scss/bq-notification.scss b/packages/bee-q/src/components/notification/scss/bq-notification.scss
index b0b8c8bd7..f216b638c 100644
--- a/packages/bee-q/src/components/notification/scss/bq-notification.scss
+++ b/packages/bee-q/src/components/notification/scss/bq-notification.scss
@@ -5,11 +5,11 @@
 @import './bq-notification.variables';
 
 :host {
-  @apply hidden;
+  @apply block;
 }
 
-:host([is-open]) {
-  @apply block;
+:host(.is-hidden) {
+  @apply hidden;
 }
 
 .bq-notification {