diff --git a/PLAYBOOK.md b/PLAYBOOK.md
index c9cb01f0b..459dbb641 100644
--- a/PLAYBOOK.md
+++ b/PLAYBOOK.md
@@ -314,6 +314,7 @@ ng g lib ThemePicker --tags=public-module --publishable=true --unit-test-runner=
 ng g component ThemePicker --project=theme-picker --flat -d
 ng g service  ThemeStorage --project=theme-picker -d
 ng g service  StyleManager --project=theme-picker -d
+ng g module ThemePickerService --project=theme-picker --flat -d
 
 # generate components for `Notifications` Module
 ng g lib Notifications --tags=public-module --publishable=true --unit-test-runner=jest -d
diff --git a/libs/ngx-utils/package.json b/libs/ngx-utils/package.json
index ddfca1854..97b8ccda5 100644
--- a/libs/ngx-utils/package.json
+++ b/libs/ngx-utils/package.json
@@ -2,7 +2,9 @@
   "name": "@ngx-starter-kit/ngx-utils",
   "version": "0.0.1",
   "peerDependencies": {
-    "@angular/common": "^7.1.0",
-    "@angular/core": "^7.1.0"
+    "@angular/common": ">=6.0.0 <8.0.0",
+    "@angular/core": ">=6.0.0 <8.0.0",
+    "date-fns": "^2.0.0-alpha.26",
+    "rxjs": ">=6.0.0"
   }
 }
diff --git a/libs/socketio-plugin/src/lib/RxSocketioSubject.ts b/libs/socketio-plugin/src/lib/RxSocketioSubject.ts
index 2aa731882..0e4bfe7cf 100644
--- a/libs/socketio-plugin/src/lib/RxSocketioSubject.ts
+++ b/libs/socketio-plugin/src/lib/RxSocketioSubject.ts
@@ -90,7 +90,9 @@ export class RxSocketioSubject<T> extends AnonymousSubject<T> {
 
     this._socket = config.connectOpts ? io(config.url, config.connectOpts) : io(config.url);
 
-    this._socket.on('connect', event => config.openObserver.next(event));
+    this._socket.on('connect', event =>
+      config.openObserver.next(new CustomEvent('opened', { detail: { id: this._socket.id } })),
+    );
 
     this._socket.on('disconnect', event => config.closeObserver.next(event));
 
diff --git a/libs/socketio-plugin/src/lib/symbols.ts b/libs/socketio-plugin/src/lib/symbols.ts
index 9db7f309d..ffde8139e 100644
--- a/libs/socketio-plugin/src/lib/symbols.ts
+++ b/libs/socketio-plugin/src/lib/symbols.ts
@@ -80,6 +80,7 @@ export class SendWebSocketAction {
 
 export class WebSocketConnected {
   static readonly type = '[Websocket] Connected';
+  constructor(public payload: { socketId: string }) {}
 }
 
 export class WebSocketDisconnected {
diff --git a/libs/socketio-plugin/src/lib/websocket-handler.ts b/libs/socketio-plugin/src/lib/websocket-handler.ts
index 3ba7ffc70..4e181c5bd 100644
--- a/libs/socketio-plugin/src/lib/websocket-handler.ts
+++ b/libs/socketio-plugin/src/lib/websocket-handler.ts
@@ -31,7 +31,7 @@ export class WebSocketHandler {
     actions.pipe(ofActionDispatched(AuthenticateWebSocket)).subscribe(event => socket.auth({ sumo: 1 }));
     socket.connectionStatus.pipe(distinctUntilChanged()).subscribe(status => {
       if (status) {
-        store.dispatch(new WebSocketConnected());
+        store.dispatch(new WebSocketConnected({ socketId: socket.id }));
       } else {
         store.dispatch(new WebSocketDisconnected());
       }
diff --git a/libs/socketio-plugin/src/lib/websocket-subject.ts b/libs/socketio-plugin/src/lib/websocket-subject.ts
index c93e46a34..57f28a289 100644
--- a/libs/socketio-plugin/src/lib/websocket-subject.ts
+++ b/libs/socketio-plugin/src/lib/websocket-subject.ts
@@ -15,6 +15,10 @@ export class WebSocketSubject extends Subject<any> {
    * The connection status of the websocket.
    */
   connectionStatus = new Subject<boolean>();
+  private _id: string;
+  get id() {
+    return this._id;
+  }
 
   private _socket: RxSocketioSubject<SocketIOEvent>;
   private _internalConfig: RxSocketioSubjectConfig<SocketIOEvent>;
@@ -32,7 +36,12 @@ export class WebSocketSubject extends Subject<any> {
         },
       },
       openObserver: {
-        next: (e: Event) => this.connectionStatus.next(true),
+        next: (e: CustomEvent) => {
+          if (e.detail.id) {
+            this._id = e.detail.id;
+          }
+          this.connectionStatus.next(true);
+        },
       },
     };
   }