diff --git a/app/about/page.tsx b/app/about/page.tsx
index 7e729f1..0eb4d52 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -1,22 +1,14 @@
 "use client";
 
-import { useSiteConfig, useMonetizationConfig } from "@/hooks/useRuntimeConfig";
+import { useSiteConfig, useMonetizationConfig, usePIPConfig } from "@/hooks/useRuntimeConfig";
 import AdFrame from "@/components/ui/AdFrame";
-import { usePIPConfig } from "@/hooks/useRuntimeConfig";
+import VideoAdPlayer from "@/components/ui/VideoAdPlayer";
 import { Play, Code2, Coffee, Lightbulb } from "lucide-react";
-import { useMemo } from "react";
 
 export default function AboutPage() {
   const SITE = useSiteConfig();
   const MONETIZATION = useMonetizationConfig();
   const pip = usePIPConfig();
-  const videoId = useMemo(() => {
-    const url = pip.videoUrl;
-    if (!url) return null;
-    const patterns = [/(?:youtube\.com\/watch\?v=)([\w-]+)/, /(?:youtu\.be\/)([\w-]+)/, /(?:youtube\.com\/embed\/)([\w-]+)/];
-    for (const p of patterns) { const m = url.match(p); if (m) return m[1]; }
-    return null;
-  }, [pip.videoUrl]);
 
   return (
     <>
@@ -64,10 +56,14 @@ export default function AboutPage() {
             </div>
           </div>
 
-          {videoId && (
+          {pip.videoUrl && (
             <div className="max-w-3xl mx-auto mb-12">
               <div className="relative aspect-video rounded-xl overflow-hidden border border-border-primary shadow-2xl">
-                <iframe src={`https://www.youtube-nocookie.com/embed/${videoId}?rel=0&modestbranding=1`} title="WSA Installer Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen className="absolute inset-0 w-full h-full" />
+                <VideoAdPlayer
+                  videoUrl={pip.videoUrl}
+                  title="WSA Installer Demo"
+                  className="absolute inset-0"
+                />
               </div>
             </div>
           )}
diff --git a/app/docs/page.tsx b/app/docs/page.tsx
index 9df59b5..e808e32 100644
--- a/app/docs/page.tsx
+++ b/app/docs/page.tsx
@@ -1,24 +1,15 @@
 "use client";
 
-import { useContentConfig, useSiteConfig } from "@/hooks/useRuntimeConfig";
+import { useContentConfig, useSiteConfig, usePIPConfig } from "@/hooks/useRuntimeConfig";
 import Link from "next/link";
 import { FileCode, Settings, HardDrive, Wrench, Shield, Code2, BookOpen, AlertTriangle, FileText } from "lucide-react";
 import AdFrame from "@/components/ui/AdFrame";
-import { usePIPConfig } from "@/hooks/useRuntimeConfig";
-import { useMemo } from "react";
+import VideoAdPlayer from "@/components/ui/VideoAdPlayer";
 
 export default function DocsPage() {
   const CONTENT = useContentConfig();
   const SITE = useSiteConfig();
-
   const pip = usePIPConfig();
-  const videoId = useMemo(() => {
-    const url = pip.videoUrl;
-    if (!url) return null;
-    const patterns = [/(?:youtube\.com\/watch\?v=)([\w-]+)/, /(?:youtu\.be\/)([\w-]+)/, /(?:youtube\.com\/embed\/)([\w-]+)/];
-    for (const p of patterns) { const m = url.match(p); if (m) return m[1]; }
-    return null;
-  }, [pip.videoUrl]);
 
   return (
     <>
@@ -48,12 +39,16 @@ export default function DocsPage() {
         </div>
       </section>
 
-      {videoId && (
+      {pip.videoUrl && (
         <section className="py-6">
           <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
             <div className="max-w-4xl mx-auto">
               <div className="relative aspect-video rounded-xl overflow-hidden border border-border-primary shadow-2xl">
-                <iframe src={`https://www.youtube-nocookie.com/embed/${videoId}?rel=0&modestbranding=1`} title="WSA Installer Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen className="absolute inset-0 w-full h-full" />
+                <VideoAdPlayer
+                  videoUrl={pip.videoUrl}
+                  title="WSA Installer Demo"
+                  className="absolute inset-0"
+                />
               </div>
             </div>
           </div>
diff --git a/app/downloads/page.tsx b/app/downloads/page.tsx
index 9f52be2..9b9903c 100644
--- a/app/downloads/page.tsx
+++ b/app/downloads/page.tsx
@@ -1,26 +1,17 @@
 "use client";
 
-import { useSiteConfig, useDownloadUrls, useMonetizationConfig, useContentConfig } from "@/hooks/useRuntimeConfig";
+import { useSiteConfig, useDownloadUrls, useMonetizationConfig, useContentConfig, usePIPConfig } from "@/hooks/useRuntimeConfig";
 import { Download, Shield, Zap, Coffee } from "lucide-react";
 import Link from "next/link";
 import AdFrame from "@/components/ui/AdFrame";
-import { usePIPConfig } from "@/hooks/useRuntimeConfig";
-import { useMemo } from "react";
+import VideoAdPlayer from "@/components/ui/VideoAdPlayer";
 
 export default function DownloadsPage() {
   const SITE = useSiteConfig();
   const CONTENT = useContentConfig();
   const downloads = useDownloadUrls();
   const MONETIZATION = useMonetizationConfig();
-
   const pip = usePIPConfig();
-  const videoId = useMemo(() => {
-    const url = pip.videoUrl;
-    if (!url) return null;
-    const patterns = [/(?:youtube\.com\/watch\?v=)([\w-]+)/, /(?:youtu\.be\/)([\w-]+)/, /(?:youtube\.com\/embed\/)([\w-]+)/];
-    for (const p of patterns) { const m = url.match(p); if (m) return m[1]; }
-    return null;
-  }, [pip.videoUrl]);
 
   return (
     <>
@@ -141,12 +132,16 @@ export default function DownloadsPage() {
         </div>
       </section>
 
-      {videoId && (
+      {pip.videoUrl && (
         <section className="py-6">
           <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
             <div className="max-w-4xl mx-auto">
               <div className="relative aspect-video rounded-xl overflow-hidden border border-border-primary shadow-2xl">
-                <iframe src={`https://www.youtube-nocookie.com/embed/${videoId}?rel=0&modestbranding=1`} title="WSA Installer Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen className="absolute inset-0 w-full h-full" />
+                <VideoAdPlayer
+                  videoUrl={pip.videoUrl}
+                  title="WSA Installer Demo"
+                  className="absolute inset-0"
+                />
               </div>
             </div>
           </div>
diff --git a/app/features/page.tsx b/app/features/page.tsx
index 7adb260..961fd96 100644
--- a/app/features/page.tsx
+++ b/app/features/page.tsx
@@ -1,14 +1,13 @@
 "use client";
 
-import { useContentConfig } from "@/hooks/useRuntimeConfig";
+import { useContentConfig, usePIPConfig } from "@/hooks/useRuntimeConfig";
 import Link from "next/link";
 import {
   Cpu, Settings2, Zap, Store, Download, Wrench, Activity, RefreshCw,
   FolderOpen, Shield, Package, Terminal, Search, HardDrive, CheckCircle2,
 } from "lucide-react";
 import AdFrame from "@/components/ui/AdFrame";
-import { usePIPConfig } from "@/hooks/useRuntimeConfig";
-import { useMemo } from "react";
+import VideoAdPlayer from "@/components/ui/VideoAdPlayer";
 
 const iconMap: Record<string, React.ElementType> = {
   Cpu, Settings2, Zap, Store, Download, Wrench, Activity, RefreshCw,
@@ -27,13 +26,6 @@ const categories = [
 export default function FeaturesPage() {
   const CONTENT = useContentConfig();
   const pip = usePIPConfig();
-  const videoId = useMemo(() => {
-    const url = pip.videoUrl;
-    if (!url) return null;
-    const patterns = [/(?:youtube\.com\/watch\?v=)([\w-]+)/, /(?:youtu\.be\/)([\w-]+)/, /(?:youtube\.com\/embed\/)([\w-]+)/];
-    for (const p of patterns) { const m = url.match(p); if (m) return m[1]; }
-    return null;
-  }, [pip.videoUrl]);
 
   return (
     <>
@@ -88,12 +80,16 @@ export default function FeaturesPage() {
       </section>
 
       {/* Video */}
-      {videoId && (
+      {pip.videoUrl && (
         <section className="py-6">
           <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
             <div className="max-w-4xl mx-auto">
               <div className="relative aspect-video rounded-xl overflow-hidden border border-border-primary shadow-2xl">
-                <iframe src={`https://www.youtube-nocookie.com/embed/${videoId}?rel=0&modestbranding=1`} title="WSA Installer Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen className="absolute inset-0 w-full h-full" />
+                <VideoAdPlayer
+                  videoUrl={pip.videoUrl}
+                  title="WSA Installer Demo"
+                  className="absolute inset-0"
+                />
               </div>
             </div>
           </div>
diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx
index b16f7f0..54e1eb3 100644
--- a/app/gallery/page.tsx
+++ b/app/gallery/page.tsx
@@ -1,10 +1,11 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
-import { useContentConfig, useSiteConfig } from "@/hooks/useRuntimeConfig";
+import { useContentConfig, useSiteConfig, usePIPConfig } from "@/hooks/useRuntimeConfig";
 import { X, ChevronLeft, ChevronRight, ZoomIn, ZoomOut } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 import AdFrame from "@/components/ui/AdFrame";
+import VideoAdPlayer from "@/components/ui/VideoAdPlayer";
 
 interface GalleryImage {
   src: string;
@@ -17,6 +18,7 @@ const categories = ["All", "Welcome", "System", "Install", "PlayStore", "Brandin
 export default function GalleryPage() {
   const CONTENT = useContentConfig();
   const SITE = useSiteConfig();
+  const pip = usePIPConfig();
   const [images, setImages] = useState<GalleryImage[]>([]);
   const [loading, setLoading] = useState(true);
   const [activeCategory, setActiveCategory] = useState("All");
@@ -80,12 +82,10 @@ export default function GalleryPage() {
           </div>
           <div className="max-w-4xl mx-auto">
             <div className="relative aspect-video rounded-xl overflow-hidden border border-border-primary shadow-2xl">
-              <iframe
-                src="https://www.youtube-nocookie.com/embed/-h-YR-N5BrA"
+              <VideoAdPlayer
+                videoUrl={pip.videoUrl}
                 title="WSA Installer - Installation Guide"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                allowFullScreen
-                className="absolute inset-0 w-full h-full"
+                className="absolute inset-0"
               />
             </div>
           </div>
diff --git a/app/layout.tsx b/app/layout.tsx
index 0362b81..8529905 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -9,6 +9,7 @@ import ScrollProgress from "@/components/ui/ScrollProgress";
 import PIPVideoPlayer from "@/components/ui/PIPVideoPlayer";
 import FooterAd from "@/components/ui/FooterAd";
 import Footer from "@/components/sections/Footer";
+import NavigationAdController from "@/components/ui/NavigationAdController";
 import "./globals.css";
 
 const outfit = Outfit({
@@ -87,6 +88,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
               <Footer />
             </div>
             <PIPVideoPlayer />
+            <NavigationAdController />
           </ConfigProvider>
         </ThemeProvider>
       </body>
diff --git a/app/page.tsx b/app/page.tsx
index 6ed5361..3aca0a9 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,9 +3,9 @@
 import { useSiteConfig, useDownloadUrls, useContentConfig, usePIPConfig } from "@/hooks/useRuntimeConfig";
 import { Download, Code2, Cpu, Settings2, Zap, Store, Shield, Terminal } from "lucide-react";
 import Link from "next/link";
-import { useMemo } from "react";
 import AdFrame from "@/components/ui/AdFrame";
 import Typewriter from "@/components/ui/Typewriter";
+import VideoAdPlayer from "@/components/ui/VideoAdPlayer";
 
 const featureIcons = [Cpu, Settings2, Zap, Store, Shield, Terminal];
 
@@ -22,28 +22,12 @@ const typewriterPhrases = [
   "Zero-Trust Security",
 ];
 
-function getYouTubeVideoId(url: string): string | null {
-  const patterns = [
-    /(?:youtube\.com\/watch\?v=)([\w-]+)/,
-    /(?:youtu\.be\/)([\w-]+)/,
-    /(?:youtube-nocookie\.com\/embed\/)([\w-]+)/,
-    /(?:youtube\.com\/embed\/)([\w-]+)/,
-  ];
-  for (const p of patterns) {
-    const m = url.match(p);
-    if (m) return m[1];
-  }
-  return null;
-}
-
 export default function HomePage() {
   const SITE = useSiteConfig();
   const CONTENT = useContentConfig();
   const downloads = useDownloadUrls();
   const pip = usePIPConfig();
 
-  const videoId = useMemo(() => getYouTubeVideoId(pip.videoUrl), [pip.videoUrl]);
-
   return (
     <>
       {/* Hero */}
@@ -56,9 +40,9 @@ export default function HomePage() {
         <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="grid lg:grid-cols-[4fr_8fr] gap-8 items-center">
             <div className="text-center lg:text-left animate-slide-in-left">
-              <h1 className="text-2xl md:text-3xl lg:text-4xl font-bold text-text-primary leading-tight">
+              <h1 className="text-xl md:text-2xl lg:text-3xl font-bold text-text-primary leading-tight flex flex-wrap items-baseline gap-x-3 gap-y-1">
                 WSA <span className="text-accent-primary">Installer</span>
-                <span className="inline-flex items-center rounded-full font-mono tracking-wider bg-accent-primary/10 text-accent-primary border border-accent-primary/20 ml-4 text-[10px] font-bold px-2 py-0.5 align-middle">
+                <span className="inline-flex items-center rounded-full font-mono tracking-wider bg-accent-primary/10 text-accent-primary border border-accent-primary/20 text-[10px] font-bold px-2 py-0.5 align-middle shrink-0">
                   v{SITE.version}
                 </span>
               </h1>
@@ -102,19 +86,11 @@ export default function HomePage() {
             <div className="relative animate-slide-in-right">
               <div className="relative rounded-xl overflow-hidden border border-border-primary shadow-2xl box-glow">
                 <div className="relative w-full" style={{ paddingBottom: "56.25%" }}>
-                  {videoId ? (
-                    <iframe
-                      src={`https://www.youtube-nocookie.com/embed/${videoId}?rel=0&modestbranding=1`}
-                      title="WSA Installer Demo"
-                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                      allowFullScreen
-                      className="absolute inset-0 w-full h-full"
-                    />
-                  ) : (
-                    <div className="absolute inset-0 flex items-center justify-center bg-bg-secondary text-text-muted">
-                      No video configured
-                    </div>
-                  )}
+                  <VideoAdPlayer
+                    videoUrl={pip.videoUrl}
+                    title="WSA Installer Demo"
+                    className="absolute inset-0"
+                  />
                 </div>
               </div>
               <div className="absolute -top-2 -left-2 w-8 h-8 border-t-2 border-l-2 border-accent-primary/50 rounded-tl-lg" />
diff --git a/components/ui/AdFrame.tsx b/components/ui/AdFrame.tsx
index 453304f..098c3b5 100644
--- a/components/ui/AdFrame.tsx
+++ b/components/ui/AdFrame.tsx
@@ -17,6 +17,10 @@ interface AdSlide {
   failed: boolean;
 }
 
+interface AdsbygoogleWindow {
+  adsbygoogle?: Array<Record<string, unknown>>;
+}
+
 export default function AdFrame({
   slot,
   className = "",
@@ -25,31 +29,31 @@ export default function AdFrame({
   rotateInterval = 15000,
 }: AdFrameProps) {
   const { adNetworks, adPlacements } = useMonetizationConfig();
-  const [slides, setSlides] = useState<AdSlide[]>([]);
-  const [activeIndex, setActiveIndex] = useState(0);
-  const containerRefs = useRef<(HTMLDivElement | null)[]>([]);
-  const rotateTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
-  const loadTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const placement = adPlacements.find((p) => p.slot === slot);
 
   const enabledNetworks = useMemo(
     () =>
-      (placement?.networks
+      placement?.networks
         ? adNetworks
             .filter((n) => n.enabled && placement.networks?.includes(n.id))
             .sort((a, b) => a.priority - b.priority)
         : adNetworks
             .filter((n) => n.enabled)
-            .sort((a, b) => a.priority - b.priority)
-      ),
+            .sort((a, b) => a.priority - b.priority),
     [adNetworks, placement]
   );
 
   const enabledNetworkKey = enabledNetworks.map((n) => n.id).join(",");
+  const [slides, setSlides] = useState<AdSlide[]>(() =>
+    enabledNetworks.map((n) => ({ networkId: n.id, loaded: false, failed: false }))
+  );
+  const [activeIndex, setActiveIndex] = useState(0);
+  const containerRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const rotateTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const loadTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
-    if (enabledNetworks.length === 0) return;
     setSlides(enabledNetworks.map((n) => ({ networkId: n.id, loaded: false, failed: false })));
     setActiveIndex(0);
   }, [enabledNetworkKey]);
@@ -86,80 +90,6 @@ export default function AdFrame({
     };
   }, [rotate, rotateInterval, slides]);
 
-  const loadAd = useCallback(
-    (networkIndex: number, container: HTMLDivElement) => {
-      const network = enabledNetworks[networkIndex];
-      if (!network) return;
-
-      container.innerHTML = "";
-
-      const detectAdLoad = (targetEl: Element) => {
-        const observer = new MutationObserver(() => {
-          const hasAd = targetEl.querySelector("iframe, ins.adsbygoogle, script[src]");
-          if (hasAd) {
-            markLoaded(network.id);
-            observer.disconnect();
-          }
-        });
-        observer.observe(targetEl, { childList: true, subtree: true });
-
-        setTimeout(() => {
-          observer.disconnect();
-          markFailed(network.id);
-        }, 5000);
-      };
-
-      if (network.type === "adsense" && network.publisherId) {
-        try {
-          const ins = document.createElement("ins");
-          ins.className = "adsbygoogle";
-          ins.style.display = "block";
-          ins.style.width = "100%";
-          if (format === "sidebar") ins.style.height = "600px";
-          else if (format === "native") {
-            ins.setAttribute("data-ad-format", "fluid");
-            ins.setAttribute("data-ad-layout", "in-article");
-          } else ins.style.height = "90px";
-          ins.setAttribute("data-ad-client", network.publisherId);
-          ins.setAttribute("data-ad-slot", slot);
-          container.appendChild(ins);
-          try {
-            (window as any).adsbygoogle = (window as any).adsbygoogle || [];
-            (window as any).adsbygoogle.push({});
-          } catch {}
-          detectAdLoad(ins);
-        } catch {
-          markFailed(network.id);
-        }
-      } else if (network.type === "monetag" && network.publisherId) {
-        try {
-          const script = document.createElement("script");
-          script.src = `//viblast.com/${network.publisherId}/invoke.js`;
-          script.async = true;
-          script.onload = () => markLoaded(network.id);
-          script.onerror = () => markFailed(network.id);
-          container.appendChild(script);
-        } catch {
-          markFailed(network.id);
-        }
-      } else if (network.type === "adsterra" && network.publisherId) {
-        try {
-          const script = document.createElement("script");
-          script.src = `//pl${network.publisherId}.adsterra.com/${network.publisherId}.js`;
-          script.async = true;
-          script.onload = () => markLoaded(network.id);
-          script.onerror = () => markFailed(network.id);
-          container.appendChild(script);
-        } catch {
-          markFailed(network.id);
-        }
-      } else {
-        markFailed(network.id);
-      }
-    },
-    [enabledNetworks, format, slot, markLoaded, markFailed]
-  );
-
   useEffect(() => {
     if (rotate) return;
     if (enabledNetworks.length === 0) return;
@@ -220,9 +150,13 @@ export default function AdFrame({
           ins.setAttribute("data-ad-slot", slot);
           container.appendChild(ins);
           try {
-            (window as any).adsbygoogle = (window as any).adsbygoogle || [];
-            (window as any).adsbygoogle.push({});
-          } catch {}
+            if (!ins.getAttribute("data-ad-status")) {
+              const win = window as unknown as AdsbygoogleWindow;
+              win.adsbygoogle = win.adsbygoogle || [];
+              win.adsbygoogle.push({});
+              ins.setAttribute("data-ad-status", "pushed");
+            }
+          } catch { /* ignore */ }
           detectAdLoad(ins);
         } catch {
           clearTimeout(timeout);
@@ -292,23 +226,18 @@ export default function AdFrame({
         : "min-h-[60px]";
 
   const hasLoadedAd = slides.some((s) => s.loaded);
-  const loadedCount = slides.filter((s) => !s.failed).length;
-  const anyFailed = slides.length > 0 && slides.every((s) => s.failed);
 
   const frameContent = (
     <>
-      {/* Corner accents */}
       <div className="absolute -top-px -left-px w-4 h-4 border-t-2 border-l-2 border-accent-primary/60 rounded-tl-lg" />
       <div className="absolute -bottom-px -right-px w-4 h-4 border-b-2 border-r-2 border-accent-primary/60 rounded-br-lg" />
 
-      {/* Ad label */}
       <div className="absolute top-2 right-2 z-10">
         <span className="text-[9px] font-mono text-text-muted/50 uppercase tracking-wider">
           Ad
         </span>
       </div>
 
-      {/* Ad containers */}
       {rotate ? (
         enabledNetworks.map((network, i) => (
           <div
@@ -323,7 +252,6 @@ export default function AdFrame({
         <div ref={(el) => { containerRefs.current[0] = el; }} className="w-full h-full" />
       )}
 
-      {/* Placeholder when no ad loaded */}
       {!hasLoadedAd && (
         <div className="absolute inset-0 flex items-center justify-center z-[2]">
           <div className="flex flex-col items-center gap-1.5 opacity-40">
@@ -335,8 +263,7 @@ export default function AdFrame({
         </div>
       )}
 
-      {/* Dot indicators */}
-      {rotate && loadedCount > 1 && (
+      {rotate && slides.length > 1 && (
         <div className="absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex items-center gap-1.5">
           {slides.map((slide, i) => (
             <button
diff --git a/components/ui/NavigationAdController.tsx b/components/ui/NavigationAdController.tsx
new file mode 100644
index 0000000..d121ea0
--- /dev/null
+++ b/components/ui/NavigationAdController.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { usePathname } from "next/navigation";
+import NavigationAdOverlay from "./NavigationAdOverlay";
+import { useNavigationAdConfig } from "@/hooks/useRuntimeConfig";
+
+const STORAGE_KEY = "wsa-nav-count";
+const FIRST_VISIT_KEY = "wsa-nav-first-visit";
+
+export default function NavigationAdController() {
+  const pathname = usePathname();
+  const navAd = useNavigationAdConfig();
+  const [showAd, setShowAd] = useState(false);
+  const [pendingPath, setPendingPath] = useState<string | null>(null);
+  const lastPathRef = useRef(pathname);
+
+  useEffect(() => {
+    if (!navAd.enabled) return;
+
+    const isFirstVisit = !localStorage.getItem(FIRST_VISIT_KEY);
+    if (isFirstVisit) {
+      localStorage.setItem(FIRST_VISIT_KEY, "true");
+      lastPathRef.current = pathname;
+      return;
+    }
+
+    if (pathname !== lastPathRef.current) {
+      lastPathRef.current = pathname;
+      return;
+    }
+  }, [pathname, navAd.enabled]);
+
+  useEffect(() => {
+    if (!navAd.enabled) return;
+
+    const checkAndShowAd = () => {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      const count = stored ? parseInt(stored, 10) : 0;
+      const newCount = count + 1;
+      localStorage.setItem(STORAGE_KEY, String(newCount));
+
+      if (newCount > 0 && newCount % navAd.showEvery === 0) {
+        return true;
+      }
+      return false;
+    };
+
+    const handler = (url: string) => {
+      if (url === lastPathRef.current) return;
+
+      if (checkAndShowAd()) {
+        setPendingPath(url);
+        setShowAd(true);
+        return false;
+      }
+      lastPathRef.current = url;
+      return true;
+    };
+
+    const originalPush = window.history.pushState;
+    const originalReplace = window.history.replaceState;
+
+    window.history.pushState = function (...args) {
+      const result = originalPush.apply(this, args);
+      if (args[2] && typeof args[2] === "string") {
+        handler(args[2]);
+      }
+      return result;
+    };
+
+    window.history.replaceState = function (...args) {
+      return originalReplace.apply(this, args);
+    };
+
+    return () => {
+      window.history.pushState = originalPush;
+      window.history.replaceState = originalReplace;
+    };
+  }, [navAd.enabled, navAd.showEvery]);
+
+  const handleAccept = useCallback(() => {
+    setShowAd(false);
+    if (pendingPath) {
+      lastPathRef.current = pendingPath;
+      window.history.pushState({}, "", pendingPath);
+      window.dispatchEvent(new PopStateEvent("popstate"));
+      setPendingPath(null);
+    }
+  }, [pendingPath]);
+
+  const handleSkip = useCallback(() => {
+    setShowAd(false);
+    if (pendingPath) {
+      lastPathRef.current = pendingPath;
+      window.history.pushState({}, "", pendingPath);
+      window.dispatchEvent(new PopStateEvent("popstate"));
+      setPendingPath(null);
+    }
+  }, [pendingPath]);
+
+  return (
+    <NavigationAdOverlay
+      visible={showAd}
+      onAccept={handleAccept}
+      onSkip={handleSkip}
+    />
+  );
+}
diff --git a/components/ui/NavigationAdOverlay.tsx b/components/ui/NavigationAdOverlay.tsx
new file mode 100644
index 0000000..a8bdc9f
--- /dev/null
+++ b/components/ui/NavigationAdOverlay.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { X, Shield, ExternalLink } from "lucide-react";
+import { useNavigationAdConfig, useMonetizationConfig } from "@/hooks/useRuntimeConfig";
+
+interface NavigationAdOverlayProps {
+  visible: boolean;
+  onAccept: () => void;
+  onSkip: () => void;
+}
+
+export default function NavigationAdOverlay({ visible, onAccept, onSkip }: NavigationAdOverlayProps) {
+  const navAd = useNavigationAdConfig();
+  const monetization = useMonetizationConfig();
+  const [countdown, setCountdown] = useState(navAd.skipAfter);
+  const canSkip = countdown <= 0;
+
+  useEffect(() => {
+    if (!visible) return;
+    setCountdown(navAd.skipAfter);
+  }, [visible, navAd.skipAfter]);
+
+  useEffect(() => {
+    if (!visible || countdown <= 0) return;
+    const timer = setTimeout(() => setCountdown((c) => c - 1), 1000);
+    return () => clearTimeout(timer);
+  }, [visible, countdown]);
+
+  useEffect(() => {
+    if (!visible) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && canSkip) onSkip();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [visible, canSkip, onSkip]);
+
+  const adsenseId = monetization.adSensePublisherId;
+
+  if (!visible) return null;
+
+  return (
+    <div className="fixed inset-0 z-[99998] flex items-center justify-center bg-black/80 backdrop-blur-sm animate-fade-in">
+      <div className="relative w-full max-w-lg mx-4 animate-slide-up opacity-0" style={{ animationFillMode: "forwards" }}>
+        <div className="rounded-2xl border border-border-primary bg-bg-primary/95 backdrop-blur-xl shadow-2xl overflow-hidden">
+          <div className="flex items-center justify-between px-5 py-3 border-b border-border-primary bg-bg-secondary/50">
+            <div className="flex items-center gap-2">
+              <Shield className="w-4 h-4 text-accent-primary" />
+              <span className="text-sm font-semibold text-text-primary">Sponsored Content</span>
+            </div>
+            <button
+              onClick={onSkip}
+              className="flex items-center gap-1 text-xs text-text-muted hover:text-text-primary transition-colors"
+            >
+              {canSkip ? (
+                <>
+                  <X className="w-3.5 h-3.5" />
+                  Skip
+                </>
+              ) : (
+                <span className="font-mono">Skip in {countdown}s</span>
+              )}
+            </button>
+          </div>
+
+          <div className="p-6">
+            <div className="relative min-h-[120px] flex items-center justify-center rounded-xl border border-border-primary bg-bg-secondary/30 overflow-hidden">
+              <div className="w-full p-4">
+                <ins
+                  className="adsbygoogle"
+                  style={{ display: "block" }}
+                  data-ad-client={adsenseId}
+                  data-ad-slot="navigation-interstitial"
+                  data-ad-format="auto"
+                  data-full-width-responsive="true"
+                />
+              </div>
+              <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 pointer-events-none">
+                <div className="w-10 h-10 rounded-xl border border-border-primary bg-bg-tertiary flex items-center justify-center">
+                  <span className="text-xs text-text-muted font-mono">AD</span>
+                </div>
+                <span className="text-xs text-text-muted">Advertisement</span>
+              </div>
+            </div>
+
+            <div className="mt-5 flex flex-col sm:flex-row gap-3">
+              <button
+                onClick={onAccept}
+                className="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium rounded-lg bg-button-primary text-bg-primary hover:bg-button-primary-hover transition-all"
+              >
+                Continue to Site
+                <ExternalLink className="w-3.5 h-3.5" />
+              </button>
+              {canSkip && (
+                <button
+                  onClick={onSkip}
+                  className="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium rounded-lg border border-border-secondary text-text-secondary hover:text-text-primary hover:border-border-accent transition-all"
+                >
+                  Skip Ad
+                </button>
+              )}
+            </div>
+          </div>
+
+          <div className="px-5 py-2 border-t border-border-primary bg-bg-secondary/30">
+            <p className="text-[10px] text-text-muted text-center">
+              This advertisement helps keep WSA Installer free and open source.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/ui/PIPVideoPlayer.tsx b/components/ui/PIPVideoPlayer.tsx
index 0e633a2..65d7881 100644
--- a/components/ui/PIPVideoPlayer.tsx
+++ b/components/ui/PIPVideoPlayer.tsx
@@ -3,55 +3,23 @@
 import { useState, useEffect, useRef, useMemo } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { ExternalLink, Volume2, VolumeX } from "lucide-react";
-import { usePIPConfig } from "@/hooks/useRuntimeConfig";
+import { usePIPConfig, useVideoAdsConfig } from "@/hooks/useRuntimeConfig";
 import AdFrame from "@/components/ui/AdFrame";
-
-interface YTPlayerEvent {
-  target: YTPlayerInstance;
-  data: number;
-}
-
-interface YTPlayerInstance {
-  playVideo: () => void;
-  pauseVideo: () => void;
-  mute: () => void;
-  unMute: () => void;
-  isMuted: () => boolean;
-  destroy: () => void;
-}
-
-interface YTStatic {
-  Player: new (elementId: string, config: Record<string, unknown>) => YTPlayerInstance;
-  PlayerState: { PLAYING: number; PAUSED: number; ENDED: number; BUFFERING: number };
-}
-
-declare global {
-  interface Window {
-    YT: YTStatic;
-    onYouTubeIframeAPIReady: (() => void) | undefined;
-  }
-}
-
-function getYouTubeVideoId(url: string): string | null {
-  const patterns = [
-    /(?:youtube\.com\/watch\?v=)([\w-]+)/,
-    /(?:youtu\.be\/)([\w-]+)/,
-    /(?:youtube-nocookie\.com\/embed\/)([\w-]+)/,
-    /(?:youtube\.com\/embed\/)([\w-]+)/,
-  ];
-  for (const p of patterns) {
-    const m = url.match(p);
-    if (m) return m[1];
-  }
-  return null;
-}
+import VideoAdOverlay from "@/components/ui/VideoAdOverlay";
+import type { YTPlayerEvent, YTPlayerInstance } from "@/lib/types/youtube";
+import "@/lib/types/youtube";
+import { getYouTubeVideoId } from "@/lib/utils/youtube";
 
 export default function PIPVideoPlayer() {
   const pip = usePIPConfig();
+  const videoAds = useVideoAdsConfig();
   const playerRef = useRef<YTPlayerInstance | null>(null);
   const [isMuted, setIsMuted] = useState(true);
   const [isPlayerReady, setIsPlayerReady] = useState(false);
   const [videoTitle, setVideoTitle] = useState("");
+  const [pipPlaying, setPipPlaying] = useState(false);
+  const [pipCurrentTime, setPipCurrentTime] = useState(0);
+  const [pipDuration, setPipDuration] = useState(0);
 
   const videoId = useMemo(() => getYouTubeVideoId(pip.videoUrl), [pip.videoUrl]);
   const thumbnailUrl = videoId ? `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg` : "";
@@ -69,7 +37,7 @@ export default function PIPVideoPlayer() {
     let active = true;
 
     const initPlayer = () => {
-      if (!active) return;
+      if (!active || !window.YT?.Player) return;
       try {
         playerRef.current = new window.YT.Player("pip-youtube-player", {
           height: "100%",
@@ -92,6 +60,13 @@ export default function PIPVideoPlayer() {
               event.target.mute();
               event.target.playVideo();
               setIsPlayerReady(true);
+              setPipDuration(event.target.getDuration());
+            },
+            onStateChange: (event: YTPlayerEvent) => {
+              if (!active) return;
+              const playing = event.target.getPlayerState() === window.YT!.PlayerState.PLAYING;
+              setPipPlaying(playing);
+              if (playing) setPipDuration(event.target.getDuration());
             },
           },
         });
@@ -124,6 +99,17 @@ export default function PIPVideoPlayer() {
     };
   }, [pip.enabled, videoId]);
 
+  useEffect(() => {
+    if (!isPlayerReady || !playerRef.current) return;
+    const interval = setInterval(() => {
+      try {
+        const ct = playerRef.current?.getCurrentTime();
+        if (ct !== undefined) setPipCurrentTime(ct);
+      } catch { /* ignore */ }
+    }, 500);
+    return () => clearInterval(interval);
+  }, [isPlayerReady]);
+
   const toggleMute = () => {
     if (playerRef.current && typeof playerRef.current.isMuted === "function") {
       if (isMuted) {
@@ -204,6 +190,23 @@ export default function PIPVideoPlayer() {
                 Looping
               </div>
             )}
+
+            {videoAds.enabled && videoAds.vastTag && (
+              <VideoAdOverlay
+                vastTag={videoAds.vastTag}
+                adCount={videoAds.adCount}
+                nonSkippable={videoAds.nonSkippable}
+                videoDuration={pipDuration}
+                currentTime={pipCurrentTime}
+                isPlaying={pipPlaying}
+                onAdStart={() => {
+                  try { playerRef.current?.pauseVideo(); } catch { /* ignore */ }
+                }}
+                onAdEnd={() => {
+                  try { playerRef.current?.playVideo(); } catch { /* ignore */ }
+                }}
+              />
+            )}
           </div>
 
           <div className="p-4">
diff --git a/components/ui/VideoAdOverlay.tsx b/components/ui/VideoAdOverlay.tsx
new file mode 100644
index 0000000..a530b80
--- /dev/null
+++ b/components/ui/VideoAdOverlay.tsx
@@ -0,0 +1,165 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import { calculateAdTimestamps } from "@/lib/utils/youtube";
+
+interface VideoAdOverlayProps {
+  vastTag: string;
+  adCount: number;
+  nonSkippable: boolean;
+  videoDuration: number;
+  currentTime: number;
+  isPlaying: boolean;
+  onAdStart: () => void;
+  onAdEnd: () => void;
+}
+
+export default function VideoAdOverlay({
+  vastTag,
+  adCount,
+  nonSkippable,
+  videoDuration,
+  currentTime,
+  isPlaying,
+  onAdStart,
+  onAdEnd,
+}: VideoAdOverlayProps) {
+  const [active, setActive] = useState(false);
+  const [adVideoUrl, setAdVideoUrl] = useState<string | null>(null);
+  const [countdown, setCountdown] = useState(0);
+  const [adDuration, setAdDuration] = useState(0);
+  const adVideoRef = useRef<HTMLVideoElement | null>(null);
+  const triggeredRef = useRef<Set<number>>(new Set());
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const adTimestamps = calculateAdTimestamps(videoDuration, adCount);
+
+  const fetchVastMediaUrl = useCallback(async (url: string): Promise<string | null> => {
+    try {
+      const res = await fetch(url);
+      const text = await res.text();
+      const parser = new DOMParser();
+      const xml = parser.parseFromString(text, "text/xml");
+      const mediaFile = xml.querySelector("MediaFile > MediaFile");
+      if (!mediaFile) {
+        const allMedia = xml.querySelectorAll("MediaFile");
+        for (const mf of allMedia) {
+          const src = mf.querySelector("StaticResource, IFrameResource, HTMLResource")?.textContent?.trim()
+            || mf.getAttribute("src")
+            || mf.textContent?.trim();
+          if (src && (src.startsWith("http") || src.startsWith("//"))) return src;
+        }
+        const inlineSrc = xml.querySelector("Linear > StaticResource")?.textContent?.trim();
+        if (inlineSrc) return inlineSrc;
+        return null;
+      }
+      const src = mediaFile.querySelector("StaticResource, IFrameResource, HTMLResource")?.textContent?.trim()
+        || mediaFile.getAttribute("src")
+        || mediaFile.textContent?.trim();
+      return src && (src.startsWith("http") || src.startsWith("//")) ? src : null;
+    } catch {
+      return null;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isPlaying || active || adTimestamps.length === 0 || !vastTag) return;
+
+    for (const ts of adTimestamps) {
+      if (currentTime >= ts && currentTime < ts + 2 && !triggeredRef.current.has(ts)) {
+        triggeredRef.current.add(ts);
+        setActive(true);
+        onAdStart();
+        fetchVastMediaUrl(vastTag).then((url) => {
+          if (url) setAdVideoUrl(url);
+        });
+        break;
+      }
+    }
+  }, [currentTime, isPlaying, active, adTimestamps, vastTag, onAdStart, fetchVastMediaUrl]);
+
+  useEffect(() => {
+    if (!active || !adVideoUrl || !adVideoRef.current) return;
+    const video = adVideoRef.current;
+    video.load();
+    video.play().catch(() => {});
+  }, [active, adVideoUrl]);
+
+  useEffect(() => {
+    if (!active) return;
+    const interval = setInterval(() => {
+      if (adVideoRef.current) {
+        const remaining = Math.ceil(adVideoRef.current.duration - adVideoRef.current.currentTime);
+        setCountdown(remaining > 0 ? remaining : 0);
+        setAdDuration(adVideoRef.current.duration || 0);
+      }
+    }, 250);
+    return () => clearInterval(interval);
+  }, [active]);
+
+  const handleAdEnded = useCallback(() => {
+    setActive(false);
+    setAdVideoUrl(null);
+    setCountdown(0);
+    onAdEnd();
+  }, [onAdEnd]);
+
+  const handleSkip = useCallback(() => {
+    if (nonSkippable && countdown > 0) return;
+    handleAdEnded();
+  }, [nonSkippable, countdown, handleAdEnded]);
+
+  if (!active) return null;
+
+  const progress = adDuration > 0 ? ((adDuration - countdown) / adDuration) * 100 : 0;
+  const canSkip = !nonSkippable || countdown <= 0;
+
+  return (
+    <div ref={containerRef} className="absolute inset-0 z-50 bg-black flex items-center justify-center">
+      {adVideoUrl ? (
+        <video
+          ref={adVideoRef}
+          className="w-full h-full object-contain"
+          onEnded={handleAdEnded}
+          playsInline
+          muted
+          controls={false}
+        >
+          <source src={adVideoUrl} type="video/mp4" />
+        </video>
+      ) : (
+        <div className="flex flex-col items-center gap-3">
+          <div className="w-8 h-8 border-2 border-accent-primary border-t-transparent rounded-full animate-spin" />
+          <span className="text-sm text-text-muted font-mono">Loading ad...</span>
+        </div>
+      )}
+
+      <div className="absolute top-3 right-3 bg-black/70 rounded-lg px-3 py-1.5 flex items-center gap-2">
+        <span className="text-xs text-text-muted font-mono">
+          Ad {nonSkippable ? "" : `remaining: `}{countdown}s
+        </span>
+        {nonSkippable && countdown > 0 && (
+          <div className="w-16 h-1 bg-white/20 rounded-full overflow-hidden">
+            <div
+              className="h-full bg-accent-primary transition-all duration-250"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+        )}
+      </div>
+
+      {canSkip && (
+        <button
+          onClick={handleSkip}
+          className="absolute bottom-4 right-4 bg-black/70 hover:bg-black/90 text-white text-xs font-mono px-4 py-2 rounded-lg border border-white/20 transition-colors"
+        >
+          ✕ Close Ad
+        </button>
+      )}
+
+      <div className="absolute bottom-3 left-3 bg-black/70 rounded-lg px-3 py-1.5">
+        <span className="text-[10px] text-text-muted font-mono uppercase tracking-wider">Advertisement</span>
+      </div>
+    </div>
+  );
+}
diff --git a/components/ui/VideoAdPlayer.tsx b/components/ui/VideoAdPlayer.tsx
new file mode 100644
index 0000000..e2143da
--- /dev/null
+++ b/components/ui/VideoAdPlayer.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import { useState, useEffect, useRef, useMemo, useId } from "react";
+import { getYouTubeVideoId } from "@/lib/utils/youtube";
+import VideoAdOverlay from "./VideoAdOverlay";
+import { useVideoAdsConfig } from "@/hooks/useRuntimeConfig";
+import type { YTPlayerEvent, YTPlayerInstance } from "@/lib/types/youtube";
+import "@/lib/types/youtube";
+
+interface VideoAdPlayerProps {
+  videoUrl: string;
+  title?: string;
+  className?: string;
+}
+
+let ytApiLoading = false;
+let ytApiLoaded = false;
+
+function loadYtApi(): Promise<void> {
+  if (ytApiLoaded) return Promise.resolve();
+  if (ytApiLoading) {
+    return new Promise((resolve) => {
+      const check = setInterval(() => {
+        if (ytApiLoaded) { clearInterval(check); resolve(); }
+      }, 100);
+    });
+  }
+  ytApiLoading = true;
+  return new Promise((resolve) => {
+    const tag = document.createElement("script");
+    tag.src = "https://www.youtube.com/iframe_api";
+    document.body.appendChild(tag);
+    window.onYouTubeIframeAPIReady = () => {
+      ytApiLoaded = true;
+      resolve();
+    };
+  });
+}
+
+export default function VideoAdPlayer({ videoUrl, className = "" }: VideoAdPlayerProps) {
+  const videoId = useMemo(() => getYouTubeVideoId(videoUrl), [videoUrl]);
+  const videoAds = useVideoAdsConfig();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const playerRef = useRef<YTPlayerInstance | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [apiReady, setApiReady] = useState(false);
+  const rawId = useId();
+  const uid = useMemo(() => `yt-vap-${rawId.replace(/:/g, "")}`, [rawId]);
+
+  useEffect(() => {
+    if (!videoId) return;
+    let active = true;
+
+    loadYtApi().then(() => {
+      if (!active || !window.YT?.Player) return;
+      try {
+        playerRef.current = new window.YT.Player(uid, {
+          height: "100%",
+          width: "100%",
+          videoId,
+          playerVars: {
+            autoplay: 0,
+            controls: 1,
+            modestbranding: 1,
+            rel: 0,
+          },
+          events: {
+            onReady: (e: YTPlayerEvent) => {
+              if (!active) return;
+              setDuration(e.target.getDuration());
+              setApiReady(true);
+            },
+            onStateChange: (e: YTPlayerEvent) => {
+              if (!active) return;
+              const state = e.target.getPlayerState();
+              const playing = state === window.YT!.PlayerState.PLAYING;
+              setIsPlaying(playing);
+              if (playing) setDuration(e.target.getDuration());
+            },
+          },
+        });
+      } catch { /* silent */ }
+    });
+
+    return () => {
+      active = false;
+      if (playerRef.current && typeof playerRef.current.destroy === "function") {
+        playerRef.current.destroy();
+        playerRef.current = null;
+      }
+      setApiReady(false);
+    };
+  }, [videoId, uid]);
+
+  useEffect(() => {
+    if (!apiReady || !playerRef.current) return;
+    const interval = setInterval(() => {
+      try {
+        const ct = playerRef.current?.getCurrentTime();
+        if (ct !== undefined) setCurrentTime(ct);
+      } catch { /* ignore */ }
+    }, 500);
+    return () => clearInterval(interval);
+  }, [apiReady]);
+
+  const handleAdStart = () => {
+    try { playerRef.current?.pauseVideo(); } catch { /* ignore */ }
+  };
+
+  const handleAdEnd = () => {
+    try { playerRef.current?.playVideo(); } catch { /* ignore */ }
+  };
+
+  if (!videoId) {
+    return (
+      <div className={`relative flex items-center justify-center bg-bg-secondary text-text-muted ${className}`}>
+        No video configured
+      </div>
+    );
+  }
+
+  return (
+    <div ref={containerRef} className={`relative w-full h-full ${className}`}>
+      <div id={uid} className="absolute inset-0 w-full h-full" />
+
+      {videoAds.enabled && videoAds.vastTag && (
+        <VideoAdOverlay
+          vastTag={videoAds.vastTag}
+          adCount={videoAds.adCount}
+          nonSkippable={videoAds.nonSkippable}
+          videoDuration={duration}
+          currentTime={currentTime}
+          isPlaying={isPlaying}
+          onAdStart={handleAdStart}
+          onAdEnd={handleAdEnd}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/config.json b/config.json
index f9e14d6..8b84e79 100644
--- a/config.json
+++ b/config.json
@@ -218,6 +218,19 @@
         { "name": "NordVPN", "url": "https://nordvpn.com/", "description": "Secure your WSA browsing" },
         { "name": "DigitalOcean", "url": "https://digitalocean.com/", "description": "Cloud hosting for WSA development" }
       ]
+    },
+    "videoAds": {
+      "enabled": true,
+      "vastTag": "",
+      "adCount": 4,
+      "nonSkippable": true
+    },
+    "navigationAd": {
+      "enabled": true,
+      "network": "adsense",
+      "showEvery": 3,
+      "duration": 5,
+      "skipAfter": 3
     }
   },
   "pipVideo": {
diff --git a/hooks/useRuntimeConfig.tsx b/hooks/useRuntimeConfig.tsx
index bc6f040..0e84e0d 100644
--- a/hooks/useRuntimeConfig.tsx
+++ b/hooks/useRuntimeConfig.tsx
@@ -132,3 +132,54 @@ export function usePIPConfig() {
     ctaUrl: c?.ctaUrl ?? "",
   };
 }
+
+export interface VideoAdsConfig {
+  enabled: boolean;
+  vastTag: string;
+  adCount: number;
+  nonSkippable: boolean;
+}
+
+export interface NavigationAdConfig {
+  enabled: boolean;
+  network: string;
+  showEvery: number;
+  duration: number;
+  skipAfter: number;
+}
+
+interface MonetizationConfig {
+  provider: string;
+  adSensePublisherId: string;
+  adNetworks: AdNetwork[];
+  adPlacements: AdPlacement[];
+  buyMeACoffee: { enabled: boolean; url: string; username: string };
+  gitHubSponsors: { enabled: boolean; url: string };
+  koFi: { enabled: boolean; url: string };
+  affiliateLinks: { enabled: boolean; links: { name: string; url: string; description: string }[] };
+  videoAds: { enabled: boolean; vastTag: string; adCount: number; nonSkippable: boolean };
+  navigationAd: { enabled: boolean; network: string; showEvery: number; duration: number; skipAfter: number };
+}
+
+export function useVideoAdsConfig(): VideoAdsConfig {
+  const c = useConfig().monetization as MonetizationConfig;
+  const v = c.videoAds;
+  return {
+    enabled: v?.enabled ?? false,
+    vastTag: v?.vastTag ?? "",
+    adCount: v?.adCount ?? 4,
+    nonSkippable: v?.nonSkippable ?? true,
+  };
+}
+
+export function useNavigationAdConfig(): NavigationAdConfig {
+  const c = useConfig().monetization as MonetizationConfig;
+  const n = c.navigationAd;
+  return {
+    enabled: n?.enabled ?? false,
+    network: n?.network ?? "adsense",
+    showEvery: n?.showEvery ?? 3,
+    duration: n?.duration ?? 5,
+    skipAfter: n?.skipAfter ?? 3,
+  };
+}
diff --git a/lib/types/youtube.ts b/lib/types/youtube.ts
new file mode 100644
index 0000000..7b10688
--- /dev/null
+++ b/lib/types/youtube.ts
@@ -0,0 +1,30 @@
+export interface YTPlayerEvent {
+  target: YTPlayerInstance;
+  data: number;
+}
+
+export interface YTPlayerInstance {
+  playVideo: () => void;
+  pauseVideo: () => void;
+  mute: () => void;
+  unMute: () => void;
+  isMuted: () => boolean;
+  getCurrentTime: () => number;
+  getDuration: () => number;
+  getPlayerState: () => number;
+  destroy: () => void;
+}
+
+export interface YTStatic {
+  Player: new (elementId: string, config: Record<string, unknown>) => YTPlayerInstance;
+  PlayerState: { PLAYING: number; PAUSED: number; ENDED: number; BUFFERING: number };
+}
+
+declare global {
+  interface Window {
+    YT?: YTStatic;
+    onYouTubeIframeAPIReady?: (() => void) | undefined;
+  }
+}
+
+export {};
diff --git a/lib/utils/youtube.ts b/lib/utils/youtube.ts
new file mode 100644
index 0000000..d84b677
--- /dev/null
+++ b/lib/utils/youtube.ts
@@ -0,0 +1,28 @@
+const YOUTUBE_PATTERNS = [
+  /(?:youtube\.com\/watch\?v=)([\w-]+)/,
+  /(?:youtu\.be\/)([\w-]+)/,
+  /(?:youtube-nocookie\.com\/embed\/)([\w-]+)/,
+  /(?:youtube\.com\/embed\/)([\w-]+)/,
+];
+
+export function getYouTubeVideoId(url: string): string | null {
+  for (const p of YOUTUBE_PATTERNS) {
+    const m = url.match(p);
+    if (m) return m[1];
+  }
+  return null;
+}
+
+export function getYouTubeThumbnail(videoId: string): string {
+  return `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
+}
+
+export function calculateAdTimestamps(videoDuration: number, adCount: number): number[] {
+  if (adCount <= 0 || videoDuration <= 0) return [];
+  const interval = videoDuration / (adCount + 1);
+  const timestamps: number[] = [];
+  for (let i = 1; i <= adCount; i++) {
+    timestamps.push(Math.round(interval * i));
+  }
+  return timestamps;
+}