diff --git a/crowdsec-docs/docs/appsec/intro.md b/crowdsec-docs/docs/appsec/intro.md
index aea72dc98..f3060c4a6 100644
--- a/crowdsec-docs/docs/appsec/intro.md
+++ b/crowdsec-docs/docs/appsec/intro.md
@@ -4,9 +4,20 @@ title: AppSec Component - CrowdSec WAF
 sidebar_position: 1
 ---
 
-## Introduction
+## What is CrowdSec?
+
+If you're new to CrowdSec, here's a quick overview:
+
+**CrowdSec** is an open-source, collaborative security solution that:
+- Detects and blocks malicious actors threatening your infrastructure and applications
+- Provides real-time threat intelligence through a participative community
+- Offers both **Infrastructure Protection** (IP reputation, DDoS mitigation) and **Application Security** (WAF capabilities)
+
+:::tip New to CrowdSec?
+For a more detailed introduction, check out our [Getting Started Guide](/u/getting_started/intro).
+:::
 
-<!-- xx : fix crowdsec version -->
+## Introduction
 
 Meet the Crowdsec **Application Security Component** (AKA : **AppSec Component**), a new capability for advanced application security turning your CrowdSec install into a full fledged **WAF**.
 
@@ -23,10 +34,55 @@ This component capitalizes on existing remediation functions in web servers (suc
 
 ![appsec-global](/img/appsec-global.svg)
 
+### How it works
+
 1. The Web Server receives the HTTP request
-2. The HTTP Request is intercepted and passed to the CrowdSec Security Engine via [the HTTP API](appsec/protocol.md)
-3. The Security Engine answers to the Web Server once the Appsec inband rules have been processed.
-4. Based on the [Security Engine answer](appsec/protocol.md#response-code), the Web Server either blocks the HTTP Request or processes it as usual
+2. The HTTP Request is forwarded to the CrowdSec Security Engine via a local HTTP interface
+3. The Security Engine analyzes the request against AppSec rules (inband rules for immediate blocking)
+4. Based on the analysis, the Web Server either blocks the HTTP Request or processes it as usual
+
+## Supported Web Servers & Reverse Proxies
+
+The AppSec Component works seamlessly with modern web servers and reverse proxies:
+
+<div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '20px', marginBottom: '30px'}}>
+
+<div style={{display: 'flex', flexDirection: 'column', gap: '12px', padding: '16px', border: '1px solid #e5e7eb', borderRadius: '8px', alignItems: 'center', textAlign: 'center'}}>
+<img src="/img/nginx.svg" alt="Nginx" style={{height: '50px', objectFit: 'contain'}} />
+<strong>Nginx</strong>
+<a href="/appsec/quickstart/nginxopenresty.mdx">Quick Start Guide →</a>
+</div>
+
+<div style={{display: 'flex', flexDirection: 'column', gap: '12px', padding: '16px', border: '1px solid #e5e7eb', borderRadius: '8px', alignItems: 'center', textAlign: 'center'}}>
+<img src="/img/openresty.png" alt="OpenResty" style={{height: '50px', objectFit: 'contain'}} />
+<strong>OpenResty</strong>
+<a href="/appsec/quickstart/nginxopenresty.mdx">Quick Start Guide →</a>
+</div>
+
+<div style={{display: 'flex', flexDirection: 'column', gap: '12px', padding: '16px', border: '1px solid #e5e7eb', borderRadius: '8px', alignItems: 'center', textAlign: 'center'}}>
+<img src="/img/traefik.logo.png" alt="Traefik" style={{height: '50px', objectFit: 'contain'}} />
+<strong>Traefik</strong>
+<a href="/appsec/quickstart/traefik.mdx">Quick Start Guide →</a>
+</div>
+
+{/* HAProxy support coming soon - uncomment when feature is released */}
+{/*
+<div style={{display: 'flex', flexDirection: 'column', gap: '12px', padding: '16px', border: '1px solid #e5e7eb', borderRadius: '8px', alignItems: 'center', textAlign: 'center'}}>
+<img src="/img/haproxy-logo.png" alt="HAProxy" style={{height: '50px', objectFit: 'contain'}} />
+<strong>HAProxy</strong>
+<a href="https://hub.crowdsec.net/browse/#remediation-components">Hub Component →</a>
+</div>
+*/}
+
+<div style={{display: 'flex', flexDirection: 'column', gap: '12px', padding: '16px', border: '1px solid #e5e7eb', borderRadius: '8px', alignItems: 'center', textAlign: 'center'}}>
+<img src="/img/WordPress-logotype-wmark.png" alt="WordPress" style={{height: '50px', objectFit: 'contain'}} />
+<strong>WordPress</strong>
+<a href="/appsec/quickstart/wordpress.mdx">Quick Start Guide →</a>
+</div>
+
+</div>
+
+**Looking for other integrations?** Check out the [full list of remediation components](https://hub.crowdsec.net/browse/#remediation-components) on the CrowdSec Hub. We're constantly adding new integrations!
 
 ## Inband Rules and Out-Of-Band Rules
 
@@ -75,4 +131,4 @@ Or consider learning more about the AppSec capabilities:
 -   **Scenarios**: [How to create scenarios that leverage the AppSec Component events](/appsec/alerts_and_scenarios.md)
 -   **Hooks**: [To customise behavior of the AppSec at runtime](/appsec/hooks.md)
 -   **Troubleshoot**: [How to troubleshoot the behavior of the AppSec Component](/appsec/troubleshooting.md)
--   **AppSec Protocol**: [if you're maintaining or creating a remedation component and want to add the AppSec capabilities](/appsec/protocol.md)
+-   **AppSec Technical Details**: [For developers integrating with the AppSec Component](/appsec/protocol.md)
diff --git a/crowdsec-docs/static/img/WordPress-logotype-wmark.png b/crowdsec-docs/static/img/WordPress-logotype-wmark.png
new file mode 100644
index 000000000..835a2285d
Binary files /dev/null and b/crowdsec-docs/static/img/WordPress-logotype-wmark.png differ
diff --git a/crowdsec-docs/static/img/haproxy-logo.png b/crowdsec-docs/static/img/haproxy-logo.png
new file mode 100644
index 000000000..96ebcd790
Binary files /dev/null and b/crowdsec-docs/static/img/haproxy-logo.png differ
diff --git a/crowdsec-docs/static/img/nginx.svg b/crowdsec-docs/static/img/nginx.svg
new file mode 100644
index 000000000..27062a830
--- /dev/null
+++ b/crowdsec-docs/static/img/nginx.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title>file_type_nginx</title><path d="M15.948,2h.065a10.418,10.418,0,0,1,.972.528Q22.414,5.65,27.843,8.774a.792.792,0,0,1,.414.788c-.008,4.389,0,8.777-.005,13.164a.813.813,0,0,1-.356.507q-5.773,3.324-11.547,6.644a.587.587,0,0,1-.657.037Q9.912,26.6,4.143,23.274a.7.7,0,0,1-.4-.666q0-6.582,0-13.163a.693.693,0,0,1,.387-.67Q9.552,5.657,14.974,2.535c.322-.184.638-.379.974-.535" style="fill:#019639"/><path d="M8.767,10.538q0,5.429,0,10.859a1.509,1.509,0,0,0,.427,1.087,1.647,1.647,0,0,0,2.06.206,1.564,1.564,0,0,0,.685-1.293c0-2.62-.005-5.24,0-7.86q3.583,4.29,7.181,8.568a2.833,2.833,0,0,0,2.6.782,1.561,1.561,0,0,0,1.251-1.371q.008-5.541,0-11.081a1.582,1.582,0,0,0-3.152,0c0,2.662-.016,5.321,0,7.982-2.346-2.766-4.663-5.556-7-8.332A2.817,2.817,0,0,0,10.17,9.033,1.579,1.579,0,0,0,8.767,10.538Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/crowdsec-docs/static/img/openresty.png b/crowdsec-docs/static/img/openresty.png
new file mode 100644
index 000000000..60a8dfa7e
Binary files /dev/null and b/crowdsec-docs/static/img/openresty.png differ