diff --git a/public/serviceWorker.js b/public/serviceWorker.js
new file mode 100644
index 0000000..3403a67
--- /dev/null
+++ b/public/serviceWorker.js
@@ -0,0 +1,41 @@
+self.addEventListener("activate", (event) => {
+  event.waitUntil(self.clients.claim());
+  console.log("ServiceWorker.js activated");
+});
+
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "TOKEN") {
+    accessToken = event.data.token;
+    console.log("token received by Service Worker:", accessToken);
+  }
+});
+
+self.addEventListener("fetch", (event) => {
+  const { request } = event;
+  const url = new URL(event.request.url);
+  console.log("fetch", url);
+
+  if (
+    accessToken &&
+    url.origin.startsWith("https://") &&
+    url.origin.endsWith(".ideaconsult.net") &&
+    request.method === "GET" &&
+    url.origin !== "https://iam.ideaconsult.net" &&
+    url.origin !== "https://idp.ideaconsult.net" &&
+    request.destination === "image" &&
+    event.request.headers["Authorization"] == undefined
+  ) {
+    const authRequest = new Request(request, {
+      headers: new Headers({
+        ...request.headers,
+        Authorization: `Bearer ${accessToken}`,
+      }),
+      mode: "cors",
+    });
+    event.respondWith(fetch(authRequest));
+    console.log("with token");
+  } else {
+    event.respondWith(fetch(request));
+    console.log("without token");
+  }
+});
diff --git a/public/worker.js b/public/worker.js
index 3656649..592917c 100644
--- a/public/worker.js
+++ b/public/worker.js
@@ -1,11 +1,13 @@
 let accessToken = null;
 
 self.addEventListener("install", (event) => {
-  event.waitUntil(self.skipWaiting());
+  console.log("Installed worked");
+
+  // self.skipWaiting();
 });
 
 self.addEventListener("activate", (event) => {
-  event.waitUntil(clients.claim());
+  event.waitUntil(self.clients.claim());
   console.log("Service worker activated");
 });
 
@@ -24,18 +26,18 @@ self.addEventListener("fetch", (event) => {
   const { request } = event;
   const url = new URL(event.request.url);
   console.log("fetch", url);
-  console.log("fetch. Token:", accessToken);
-  console.log(
-    "conditions:",
-    url.origin.startsWith("https://"),
-    url.origin.endsWith(".ideaconsult.net"),
-    request.method === "GET",
-    isGeneratedImage(url),
-    url.origin !== "https://iam.ideaconsult.net",
-    url.origin !== "https://idp.ideaconsult.net",
-    // request.destination === "image",
-    event.request.headers["Authorization"] == undefined
-  );
+  // console.log("fetch. Token:", accessToken);
+  // console.log(
+  //   "conditions:",
+  //   url.origin.startsWith("https://"),
+  //   url.origin.endsWith(".ideaconsult.net"),
+  //   request.method === "GET",
+  //   isGeneratedImage(url),
+  //   url.origin !== "https://iam.ideaconsult.net",
+  //   url.origin !== "https://idp.ideaconsult.net",
+  //   // request.destination === "image",
+  //   event.request.headers["Authorization"] == undefined
+  // );
 
   if (
     accessToken &&
diff --git a/src/main.jsx b/src/main.jsx
index 67d9e30..f23947d 100755
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -29,32 +29,63 @@ const Main = () => {
     ? "https://spectra-dev.adma.ai/search/"
     : "http://localhost:5173/search/";
 
-  if ("serviceWorker" in navigator) {
-    window.addEventListener("load", () => {
-      navigator.serviceWorker
-        .register(base_url, { scope: scope_url })
-        .then((registration) => {
-          console.log(
-            "Service Worker registered with scope: ",
-            registration.scope
-          );
-        })
-        .catch((error) => {
-          console.log("Service Worker registration failed: ", error);
+  const registerServiceWorker = async () => {
+    if ("serviceWorker" in navigator) {
+      try {
+        const registration = await navigator.serviceWorker.register(
+          "/serviceWorker.js",
+          { scope: scope_url }
+        );
+        console.log("scope", registration.scope);
+
+        await registration.active.postMessage({
+          type: "TOKEN",
+          token: token,
         });
-    });
-  }
+      } catch (error) {
+        console.log(`Registration failed with ${error}`);
+      }
+    }
+  };
+
+  useEffect(() => {
+    registerServiceWorker();
+  }, [token]);
+
+  // if ("serviceWorker" in navigator) {
+  //   window.addEventListener("load", () => {
+  //     navigator.serviceWorker
+  //       .register(base_url)
+  //       .then((registration) => {
+  //         console.log(
+  //           "Service Worker registered with scope: ",
+  //           registration.scope
+  //         );
+  //         if (token && registration.active) {
+  //           console.log("registration.active");
+
+  //           registration.active.postMessage({
+  //             type: "SET_TOKEN",
+  //             token: token,
+  //           });
+  //         }
+  //       })
+  //       .catch((error) => {
+  //         console.log("ServiceWorker registration failed: ", error);
+  //       });
+  //   });
+  // }
 
-  if (navigator.serviceWorker.controller) {
-    console.log("post message", navigator);
+  // if (navigator.serviceWorker.controller) {
+  //   console.log("post message", navigator);
 
-    navigator.serviceWorker.controller.postMessage({
-      type: "SET_TOKEN",
-      token: token,
-    });
-  } else {
-    console.log("no message", navigator.serviceWorker);
-  }
+  //   navigator.serviceWorker.controller.postMessage({
+  //     type: "SET_TOKEN",
+  //     token: token,
+  //   });
+  // } else {
+  //   console.log("no message", navigator.serviceWorker);
+  // }
 
   return <></>;
 };