diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css
index 0097448..f50c1b1 100644
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -65,6 +65,19 @@ p, li { font-size: clamp(1rem, 2.5vw, 1.125rem); line-height: 1.7; }
 }
 
 @layer components {
+  /* Shared glass and card utilities */
+  .glass {
+    @apply bg-white/80 dark:bg-slate-900/80 backdrop-blur-lg border border-white/20 dark:border-white/10 shadow-lg;
+  }
+
+  .glass-strong {
+    @apply bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl border border-white/30 dark:border-white/10 shadow-xl;
+  }
+
+  .card-panel {
+    @apply rounded-2xl glass p-6 transition-shadow duration-200 hover:shadow-xl;
+  }
+
   .btn {
     @apply inline-flex items-center justify-center rounded-full border-gray-400 border bg-transparent font-medium text-center text-base text-page leading-snug transition py-3.5 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800 cursor-pointer;
     /* Enhanced visibility for light mode */
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index aeb0c65..d6bf49e 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -66,6 +66,9 @@ const { language, textDirection } = I18N;
   </head>
 
   <body class="antialiased text-default bg-page tracking-tight">
+    <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:bg-white focus:text-blue-600 focus:rounded focus:px-3 focus:py-2 dark:focus:bg-slate-800">
+      Skip to main content
+    </a>
     <GlobalBackground />
     <header role="banner">
       <slot name="header" />
@@ -73,7 +76,7 @@ const { language, textDirection } = I18N;
     <nav role="navigation" aria-label="Main navigation">
       <slot name="navigation" />
     </nav>
-    <main role="main">
+    <main role="main" id="main-content">
       <slot name="structured-data" />
       <slot />
     </main>
@@ -87,62 +90,35 @@ const { language, textDirection } = I18N;
     
     
     <script type="text/javascript">
-      // Initialize RocketChat livechat widget with proper error handling
+      // Initialize RocketChat livechat widget without client-facing logs
       (function(w, d, s, u) {
-        console.log('RocketChat initialization started');
-        
-        // Initialize RocketChat object if it doesn't exist
-        w.RocketChat = function(c) { 
+        w.RocketChat = function(c) {
           if (w.RocketChat._) {
             w.RocketChat._.push(c);
           } else {
             w.RocketChat._ = [c];
           }
-        }; 
-        
+        };
         if (!w.RocketChat._) {
           w.RocketChat._ = [];
         }
-        
         w.RocketChat.url = u;
-        console.log('RocketChat URL set to:', u);
-        
-        // Wait for DOM to be ready before loading the script
         function loadRocketChat() {
           try {
-            console.log('Loading RocketChat script...');
             const h = d.getElementsByTagName(s)[0];
             if (!h) {
-              console.warn('No script tag found to insert before');
               return;
             }
-            
             const j = d.createElement(s);
-            j.async = true; 
+            j.async = true;
             j.src = 'https://chat.365devnet.eu/livechat/rocketchat-livechat.min.js?_=201903270000';
-            
-            // Add error handling for script loading
-            j.onerror = function() {
-              console.warn('RocketChat livechat script failed to load');
-            };
-            
-            j.onload = function() {
-              console.log('RocketChat script loaded successfully');
-            };
-            
+            j.onerror = function() {};
             h.parentNode.insertBefore(j, h);
-            console.log('RocketChat script tag inserted');
-          } catch (error) {
-            console.warn('Error loading RocketChat livechat:', error);
-          }
+          } catch (_) {}
         }
-        
-        // Load when DOM is ready
         if (d.readyState === 'loading') {
-          console.log('DOM still loading, waiting for DOMContentLoaded');
           d.addEventListener('DOMContentLoaded', loadRocketChat);
         } else {
-          console.log('DOM already loaded, loading RocketChat immediately');
           loadRocketChat();
         }
       })(window, document, 'script', 'https://chat.365devnet.eu/livechat');
diff --git a/src/pages/[lang]/aboutme.astro b/src/pages/[lang]/aboutme.astro
index 051e020..f3e9326 100644
--- a/src/pages/[lang]/aboutme.astro
+++ b/src/pages/[lang]/aboutme.astro
@@ -152,6 +152,16 @@ const metadata = {
     }
   }
 
+  /* Reduce motion and heavy effects on mobile */
+  @media (max-width: 768px) {
+    .animated-hero-bg { animation: none; background-size: 200% 200%; }
+    .floating-elements { display: none; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .animated-hero-bg { animation: none; }
+    .floating-shape { animation: none; }
+  }
+
   /* Enhanced glassmorphism effects for all sections */
   :global(.glass-enhanced) {
     background: rgba(255, 255, 255, 0.95) !important;
diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
index 5431ab3..59fee70 100644
--- a/src/pages/[lang]/index.astro
+++ b/src/pages/[lang]/index.astro
@@ -45,6 +45,19 @@ const metadata = {
     overflow: hidden;
   }
 
+  /* Prefer reduced motion and mobile fallback for heavy animation */
+  @media (max-width: 768px) {
+    .hero-explosive {
+      animation: none;
+      background-size: 200% 200%, 200% 200%, 200% 200%, 300% 300%;
+    }
+    .floating-orbs { display: none; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .hero-explosive { animation: none; }
+    .orb { animation: none; }
+  }
+
   /* Floating orbs with vivid colors */
   .floating-orbs {
     position: absolute;
@@ -490,8 +503,6 @@ const metadata = {
           variant: 'primary',
           text: explosive.actions.learnMore,
           href: '#services',
-          
-          variant: 'primary'
         },
         { 
           text: explosive.actions.contactMe,
diff --git a/src/pages/[lang]/topdesk.astro b/src/pages/[lang]/topdesk.astro
index 23f232e..7ce7f75 100644
--- a/src/pages/[lang]/topdesk.astro
+++ b/src/pages/[lang]/topdesk.astro
@@ -147,6 +147,16 @@ const metadata = {
     }
   }
 
+  /* Mobile and reduced-motion fallbacks for heavy visuals */
+  @media (max-width: 768px) {
+    .animated-hero-bg { animation: none; background-size: 200% 200%; }
+    .floating-elements { display: none; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .animated-hero-bg { animation: none; }
+    .floating-shape { animation: none; }
+  }
+
   /* Enhanced glassmorphism effects for all sections */
   :global(.glass-enhanced) {
     background: rgba(255, 255, 255, 0.95) !important;
diff --git a/src/pages/antifp.astro b/src/pages/antifp.astro
index 629081b..32107d5 100644
--- a/src/pages/antifp.astro
+++ b/src/pages/antifp.astro
@@ -1,23 +1,66 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import Layout from '~/layouts/PageLayout.astro';
+import Hero from '~/components/widgets/Hero.astro';
+import Content from '~/components/widgets/Content.astro';
+import CallToAction from '~/components/widgets/CallToAction.astro';
+import Image from '~/components/common/Image.astro';
+import type { MetaData } from '~/types';
+
+const metadata: MetaData = {
+  title: 'Anti‑Fingerprinting Shield Plus | Userscript Overview',
+  description: 'Enhance privacy by blocking or spoofing browser fingerprinting techniques. Works with Tampermonkey and Violentmonkey.',
+};
 ---
 
-<Layout>
-  <div class="max-w-3xl mx-auto px-4 py-8">
-    <h1 class="text-3xl font-bold mb-4">Anti-Fingerprinting Shield Plus</h1>
-    <p class="mb-4">
-      <a href="https://greasyfork.org/en/scripts/534570-anti-fingerprinting-shield-plus" target="_blank" rel="noopener noreferrer" class="text-blue-600 underline">View on GreasyFork</a>
-    </p>
-    <p class="mb-6">
-      <strong>Anti-Fingerprinting Shield Plus</strong> is a userscript designed to enhance your privacy by blocking or spoofing browser fingerprinting techniques. It works on a wide range of sites and is compatible with popular script managers like Tampermonkey and Violentmonkey.
-    </p>
-    <h2 class="text-xl font-semibold mb-2">How to Install</h2>
-    <ol class="list-decimal list-inside mb-6">
-      <li>Install a userscript manager such as Tampermonkey or Violentmonkey.</li>
-      <li>Visit the <a href="https://greasyfork.org/en/scripts/534570-anti-fingerprinting-shield-plus" target="_blank" rel="noopener noreferrer" class="text-blue-600 underline">Anti-Fingerprinting Shield Plus GreasyFork page</a>.</li>
-      <li>Click the "Install this script" button.</li>
-      <li>Follow the prompts to add the script to your userscript manager.</li>
-    </ol>
-    <p class="text-gray-600">For more details and updates, visit the GreasyFork page linked above.</p>
+<Layout metadata={metadata}>
+  <Hero id="hero" isDark={false}>
+    <Fragment slot="title">
+      <span class="text-4xl md:text-5xl font-extrabold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">Anti‑Fingerprinting Shield Plus</span>
+    </Fragment>
+    <Fragment slot="subtitle">
+      <p class="subtitle-responsive text-muted">Userscript to reduce browser fingerprinting by blocking or spoofing common techniques. Compatible with Tampermonkey and Violentmonkey.</p>
+    </Fragment>
+  </Hero>
+
+  <div class="max-w-5xl mx-auto p-4 md:px-8">
+    <Content id="overview" columns={2} items={[]}
+      classes={{ container: 'glass-strong', content: '' }}
+      image={{ src: '~/assets/images/HomepageIntroImage.webp', alt: 'Privacy protection illustration', loading: 'lazy' }}>
+      <Fragment slot="content">
+        <div class="space-y-4">
+          <p>
+            <strong>Anti‑Fingerprinting Shield Plus</strong> is a userscript designed to enhance your privacy by blocking or spoofing browser fingerprinting techniques across a wide range of websites.
+          </p>
+          <p>
+            It is lightweight and works seamlessly with popular userscript managers.
+          </p>
+          <div class="grid sm:grid-cols-2 gap-3 mt-4">
+            {['Blocks canvas and WebGL probes','Masks audio and font entropy','Randomizes non-essential signals','Minimal performance impact'].map((item) => (
+              <div class="card-panel flex items-start gap-2">
+                <span class="text-green-600 mt-0.5">✓</span>
+                <span class="text-sm text-gray-700 dark:text-slate-300">{item}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </Fragment>
+    </Content>
+
+    <Content id="install" columns={1} items={[]} classes={{ container: 'glass', content: '' }}>
+      <Fragment slot="content">
+        <h2 class="text-2xl font-bold mb-3">How to Install</h2>
+        <ol class="list-decimal list-inside space-y-2 text-gray-700 dark:text-slate-300">
+          <li>Install a userscript manager such as Tampermonkey or Violentmonkey.</li>
+          <li>Visit the <a href="https://greasyfork.org/en/scripts/534570-anti-fingerprinting-shield-plus" target="_blank" rel="noopener noreferrer" class="text-blue-600 dark:text-blue-400 underline">Anti‑Fingerprinting Shield Plus on GreasyFork</a>.</li>
+          <li>Click the "Install this script" button and confirm.</li>
+          <li>Reload target websites to apply protections.</li>
+        </ol>
+      </Fragment>
+    </Content>
+
+    <CallToAction callToAction={{ text: 'View on GreasyFork', href: 'https://greasyfork.org/en/scripts/534570-anti-fingerprinting-shield-plus', icon: 'tabler:external-link', variant: 'primary' }}>
+      <Fragment slot="title">Try the userscript now</Fragment>
+      <Fragment slot="subtitle">Open-source, actively maintained, and easy to install.</Fragment>
+    </CallToAction>
   </div>
-</Layout> 
\ No newline at end of file
+</Layout>
\ No newline at end of file
