diff --git a/src/bg/main.tsx b/src/bg/main.tsx
index 85fcdcf3..8ed82189 100644
--- a/src/bg/main.tsx
+++ b/src/bg/main.tsx
@@ -1,7 +1,27 @@
+import { useEffect, useRef } from "react";
 import "./style.css";
+
 export default function Background() {
+const domRef = useRef(null)
+
+  useEffect (() => {
+  const inter = setInterval(() => {
+if(document.hasFocus() && domRef.current) {
+  //@ts-expect-error
+  domRef.current.style.filter = "blur(10px)"
+} else {
+  //@ts-ignore
+  domRef.current.style.filter = "";
+}
+  })    
+    
+    return () => {
+    clearInterval(inter)
+    }
+  }, []);
+  
   return (
- <div style={{ filter: 'blur(10px)'}}>
+ <div style={{ filter: 'blur(10px)' }} ref={domRef}>
     <ul className="background">
   {new Array(49).join('.').split('.').map((_,i) => {
     return  <li key={i} className={i % 2 === 0 ? "bg-effect" : ""}></li>
diff --git a/src/scripts/title.ts b/src/scripts/title.ts
index 11b92c14..c6c330bb 100644
--- a/src/scripts/title.ts
+++ b/src/scripts/title.ts
@@ -6,10 +6,13 @@ export function runTitle() {
         if(document.title !== 'Come Back :(') {
             title0 = document.title
         }
+        window.document.documentElement.className = "duration-500 ease-in-out "
         if (document.hasFocus()) {
           document.title = title0 || "Saahild.com"
+          window.document.documentElement.style.filter = ""
         } else {
           document.title = 'Come Back :('
+          window.document.documentElement.style.filter = "blur(30px)"
         }
       }, 200)