diff --git a/src/components/layout/GlobalBackground.tsx b/src/components/layout/GlobalBackground.tsx
index a33ccd2..911be1d 100644
--- a/src/components/layout/GlobalBackground.tsx
+++ b/src/components/layout/GlobalBackground.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { usePageVisibility } from '@/hooks/usePageVisibility';
 import { useIntersectionObserver } from '@/hooks/useIntersectionObserver';
 
diff --git a/src/hooks/useIntersectionObserver.ts b/src/hooks/useIntersectionObserver.ts
index e93a40b..f2a1c6e 100644
--- a/src/hooks/useIntersectionObserver.ts
+++ b/src/hooks/useIntersectionObserver.ts
@@ -30,14 +30,16 @@ export const useIntersectionObserver = <T extends HTMLElement = HTMLDivElement>(
       }
     );
 
-    if (ref.current) {
-      observer.observe(ref.current);
+    const element = ref.current;
+    if (element) {
+      observer.observe(element);
     }
 
     return () => {
-      if (ref.current) {
-        observer.unobserve(ref.current);
+      if (element) {
+        observer.unobserve(element);
       }
+      observer.disconnect();
     };
   }, [threshold, root, rootMargin]);
 
diff --git a/src/hooks/usePageVisibility.ts b/src/hooks/usePageVisibility.ts
index 5eb0083..993e0d3 100644
--- a/src/hooks/usePageVisibility.ts
+++ b/src/hooks/usePageVisibility.ts
@@ -5,7 +5,9 @@ import { useState, useEffect } from 'react';
  * @returns boolean - true when page is visible, false when hidden
  */
 export const usePageVisibility = (): boolean => {
-  const [isVisible, setIsVisible] = useState<boolean>(!document.hidden);
+  const [isVisible, setIsVisible] = useState<boolean>(() =>
+    typeof document !== 'undefined' ? !document.hidden : true
+  );
 
   useEffect(() => {
     const handleVisibilityChange = () => {