diff --git a/packages/x-components/src/x-modules/experience-controls/components/experience-controls.vue b/packages/x-components/src/x-modules/experience-controls/components/experience-controls.vue
index 952916008f..9ae4b77842 100644
--- a/packages/x-components/src/x-modules/experience-controls/components/experience-controls.vue
+++ b/packages/x-components/src/x-modules/experience-controls/components/experience-controls.vue
@@ -1,10 +1,8 @@
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
-  import { XOn } from '../../../components/decorators/bus.decorators';
+  import { defineComponent } from 'vue';
   import { XEvent, XEventsTypes } from '../../../wiring/events.types';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { experienceControlsXModule } from '../x-module';
+  import { useNoElementRender, useXBus } from '../../../composables';
 
   /**
    * This component subscribes to changes in the ExperienceControls module to fire the events that
@@ -12,25 +10,28 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(experienceControlsXModule)]
-  })
-  export default class ExperienceControls extends Vue {
-    /**.
-     * Iterates the list of XEvents received and emits them
-     *
-     * @param events - events to be emitted
-     */
-    @XOn('ExperienceControlsEventsChanged')
-    onEventsChanged(events: Partial<XEventsTypes>): void {
-      Object.entries(events).forEach(([eventName, eventPayload]) => {
-        this.$x.emit(eventName as XEvent, eventPayload);
-      });
-    }
+  export default defineComponent({
+    name: 'ExperienceControls',
+    xModule: experienceControlsXModule.name,
+    setup(_, { slots }) {
+      const xBus = useXBus();
+
+      /**
+       * Iterates the list of XEvents received and emits them.
+       *
+       * @param events - Events to be emitted.
+       */
+      function onEventsChanged(events: Partial<XEventsTypes>): void {
+        Object.entries(events).forEach(([eventName, eventPayload]) => {
+          xBus.emit(eventName as XEvent, eventPayload);
+        });
+      }
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    render(): void {}
-  }
+      xBus.on('ExperienceControlsEventsChanged', false).subscribe(event => onEventsChanged(event));
+
+      return () => useNoElementRender(slots);
+    }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/experience-controls/x-module.ts b/packages/x-components/src/x-modules/experience-controls/x-module.ts
index 6a75f46eb1..0080f90ba5 100644
--- a/packages/x-components/src/x-modules/experience-controls/x-module.ts
+++ b/packages/x-components/src/x-modules/experience-controls/x-module.ts
@@ -1,4 +1,5 @@
 import { XModule } from '../x-modules.types';
+import { XPlugin } from '../../plugins/index';
 import { experienceControlsEmitters } from './store/emitters';
 import { experienceControlsXStoreModule } from './store/module';
 import { ExperienceControlsXStoreModule } from './store/types';
@@ -23,3 +24,5 @@ export const experienceControlsXModule: ExperienceControlsXModule = {
   storeEmitters: experienceControlsEmitters,
   wiring: experienceControlsWiring
 };
+
+XPlugin.registerXModule(experienceControlsXModule);