diff --git a/resources/css/app.css b/resources/css/app.css
index 4fe6317..cb2c059 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -22,3 +22,21 @@
     width: auto;
     display: block;
 }
+
+.bg-pattern {
+    position: fixed;
+    inset: 0;
+    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='0.5' fill='%23999'/%3E%3C/svg%3E");
+    opacity: 0.05;
+    z-index: -1;
+    pointer-events: none;
+    background-repeat: repeat;
+    background-position: 0 0;
+    transition: background-position 2s ease-out;
+}
+
+
+@keyframes moveBackground {
+    from { background-position: 0 0; }
+    to { background-position: 1000px 1000px; }
+}
diff --git a/resources/js/app.js b/resources/js/app.js
index cd5bf61..b1cbbab 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -14,3 +14,15 @@ document.addEventListener('DOMContentLoaded', () => {
         parent: '.grid' // dit moet de container zijn waarin sticky moet blijven
     });
 });
+
+const cursor = document.getElementById('custom-cursor');
+
+document.addEventListener('mousemove', (e) => {
+    gsap.to(cursor, {
+        duration: 0.2,
+        x: e.clientX + 20,
+        y: e.clientY - 15,
+        ease: 'power2.out'
+    });
+});
+
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index c4477f2..5551dd0 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -23,6 +23,9 @@
 </head>
 
 <body class="text-zinc-950 antialiased lg:bg-zinc-100 dark:bg-zinc-900 dark:text-white dark:lg:bg-zinc-950">
+    <div class="bg-pattern"></div>
+
+
     <div class="max-w-5xl mx-auto p-6 space-y-8">
 
         <header
@@ -135,16 +138,35 @@
         </div>
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
-        <script>
-            const cursor = document.getElementById('custom-cursor');
 
-            document.addEventListener('mousemove', (e) => {
-                gsap.to(cursor, {
-                    duration: 0.2,
-                    x: e.clientX + 20,
-                    y: e.clientY - 15,
-                    ease: 'power2.out'
-                });
+        <script>
+            let bgPosX = 0;
+            let bgPosY = 0;
+            let targetPosX = 0;
+            let targetPosY = 0;
+
+            const scrollSpeed = 2; // hoe snel hij versnelt tijdens scroll
+            const bgElement = document.querySelector('.bg-pattern');
+
+
+            // Update loop (smooth afremmen)
+            gsap.ticker.add(() => {
+                bgPosX += (targetPosX - bgPosX) * 0.1;
+                bgPosY += (targetPosY - bgPosY) * 0.1;
+
+                bgElement.style.setProperty('--bg-x', `${bgPosX}px`);
+                bgElement.style.setProperty('--bg-y', `${bgPosY}px`);
+                bgElement.style.backgroundPosition = `${bgPosX}px ${bgPosY}px`;
+            });
+
+            // Scroll detectie
+            window.addEventListener('scroll', () => {
+                const scrollTop = window.scrollY;
+                const scrollLeft = window.scrollX;
+
+                // beweeg diagonaal voor extra effect
+                targetPosX = -scrollLeft * scrollSpeed;
+                targetPosY = -scrollTop * scrollSpeed;
             });
         </script>
 
