diff --git a/src/app/services/background.service.ts b/src/app/services/background.service.ts
index 5eda005a7..441a0b76e 100644
--- a/src/app/services/background.service.ts
+++ b/src/app/services/background.service.ts
@@ -6,4 +6,20 @@ import { Injectable } from '@angular/core';
 export class BackgroundService {
 
   constructor() { }
+
+  online() {
+    document.body.style.setProperty(`--color`, "#0782C9");
+    document.body.style.setProperty(`--color2`, "#45BAFF");
+    document.body.style.setProperty(`--color3`, "#0782C9");
+    document.body.style.setProperty(`--color4`, "#0782c9f0");
+    document.body.style.setProperty(`--color5`, "#45BAFF");
+  }
+
+  offline() {
+    document.body.style.setProperty(`--color`, "#ffb703");
+    document.body.style.setProperty(`--color2`, "#ffb703");
+    document.body.style.setProperty(`--color3`, "#ffb703");
+    document.body.style.setProperty(`--color4`, "#ffb703");
+    document.body.style.setProperty(`--color5`, "#ffb703");
+  }
 }
diff --git a/src/app/services/socket/synchro.service.ts b/src/app/services/socket/synchro.service.ts
index d8b0c060e..70383bdb7 100644
--- a/src/app/services/socket/synchro.service.ts
+++ b/src/app/services/socket/synchro.service.ts
@@ -27,6 +27,10 @@ export class SynchroService {
   callback = function(){}
   private _connected = false;
   private BackgroundService = new BackgroundService()
+  private callBacks: {
+    type: 'Offline' | 'Online'
+    funx: Function
+  }[] = []
 
 	constructor(){}
 
@@ -51,6 +55,13 @@ export class SynchroService {
     this.url = `${wss.url}${wss.header.id}/${wss.header.jwt}/${wss.header.bluePrint}/${this.id}/`
   }
 
+  registerCallback(type: 'Offline' | 'Online', funx: Function) {
+    this.callBacks.push({
+      type,
+      funx
+    })
+  }
+
 	connect() {
 
 		this.connection  = new WebSocket(this.url);
@@ -64,6 +75,13 @@ export class SynchroService {
 	private onopen = () =>{
     
     this.BackgroundService.online()
+    
+    this.callBacks.forEach((e)=>{
+      if(e.type == 'Online') {
+        e.funx()
+      }
+    })
+
     console.log('open ======================= welcome to socket server')
     this._connected = true
 
@@ -95,8 +113,18 @@ export class SynchroService {
 				// event.code is usually 1006 in this case
 				console.log('[close] Connection died');
         console.log('Reconnect')
+
         this.BackgroundService.offline();
+
+        this.callBacks.forEach((e)=>{
+          if(e.type == 'Offline') {
+            e.funx()
+          }
+        })
+
+        // status
         this._connected = false
+        // reconnect
         this.connect()
         
 			}