diff --git a/Cargo.lock b/Cargo.lock
index be45b77..2df2156 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -87,6 +87,7 @@ dependencies = [
  "askama",
  "askama_axum",
  "axum",
+ "axum-htmx",
  "cargo-watch",
  "listenfd",
  "notify 6.1.1",
@@ -398,6 +399,20 @@ dependencies = [
  "tracing",
 ]
 
+[[package]]
+name = "axum-htmx"
+version = "0.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "36cdb6062317f732ed3acf4e9c28c3824092e226726616f46ebdd8cd32c82a41"
+dependencies = [
+ "async-trait",
+ "axum-core",
+ "futures",
+ "http",
+ "tokio",
+ "tower",
+]
+
 [[package]]
 name = "backtrace"
 version = "0.3.73"
@@ -1470,6 +1485,20 @@ dependencies = [
  "new_debug_unreachable",
 ]
 
+[[package]]
+name = "futures"
+version = "0.3.30"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "645c6916888f6cb6350d2550b80fb63e734897a8498abe35cfb732b6487804b0"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-io",
+ "futures-sink",
+ "futures-task",
+ "futures-util",
+]
+
 [[package]]
 name = "futures-channel"
 version = "0.3.30"
@@ -1477,6 +1506,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "eac8f7d7865dcb88bd4373ab671c8cf4508703796caa2b1985a9ca867b3fcb78"
 dependencies = [
  "futures-core",
+ "futures-sink",
 ]
 
 [[package]]
diff --git a/crates/app/Cargo.toml b/crates/app/Cargo.toml
index e095c3a..175b803 100644
--- a/crates/app/Cargo.toml
+++ b/crates/app/Cargo.toml
@@ -7,6 +7,7 @@ edition = "2021"
 askama = "0.12.1"
 askama_axum = "0.4.0"
 axum = "0.7.5"
+axum-htmx = { version = "0.6", features = ["auto-vary"] }
 listenfd = "1.0.1"
 notify = "6.1.1"
 serde = { version = "1.0.204", features = ["derive"] }
diff --git a/crates/app/src/components/base.html b/crates/app/src/components/base.html
index 651fb67..c128735 100644
--- a/crates/app/src/components/base.html
+++ b/crates/app/src/components/base.html
@@ -1,3 +1,7 @@
+{% if hx_request %}
+  <title>{% block title %}{{ title }}{% endblock %}</title>
+  {% block body %}{% endblock %}
+{% else %}
 <!doctype html>
 <html lang="fr" class="h-full">
   <head>
@@ -17,3 +21,4 @@
     </div>
   </body>
 </html>
+{% endif %}
diff --git a/crates/app/src/components/navbar/menu-item.html b/crates/app/src/components/navbar/menu-item.html
index b002e0c..fe0a264 100644
--- a/crates/app/src/components/navbar/menu-item.html
+++ b/crates/app/src/components/navbar/menu-item.html
@@ -8,6 +8,10 @@
         {% else -%}
             class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
         {% endif -%}
+        hx-get="{{ item.href }}"
+        hx-push-url="true"
+        hx-swap="outerHTML"
+        hx-select-oob="#menu-items,#page-header,#page-main"
     >
         {{ item.label }}
     </a>
diff --git a/crates/app/src/components/navbar/navbar.html b/crates/app/src/components/navbar/navbar.html
index 24a8af6..be4bd0f 100644
--- a/crates/app/src/components/navbar/navbar.html
+++ b/crates/app/src/components/navbar/navbar.html
@@ -39,7 +39,7 @@
     </button>
   </div>
   <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
-    <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
+    <ul id="menu-items" class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
       {% for item in items %}
         {% include "navbar/menu-item.html" %}
       {% endfor %}
diff --git a/crates/app/src/lib.rs b/crates/app/src/lib.rs
index 29c75dc..0c1b378 100644
--- a/crates/app/src/lib.rs
+++ b/crates/app/src/lib.rs
@@ -2,6 +2,7 @@ use std::path::Path;
 
 use askama_axum::Template;
 use axum::http::{StatusCode, Uri};
+use axum_htmx::{AutoVaryLayer, HxRequest};
 use tower_http::services::ServeDir;
 
 mod menu;
@@ -13,10 +14,12 @@ async fn fallback(uri: Uri) -> (StatusCode, String) {
 
 #[derive(Template)]
 #[template(path = "index.html")]
-pub struct GetIndexTemplate;
+pub struct GetIndexTemplate {
+    hx_request: bool,
+}
 
-async fn root() -> GetIndexTemplate {
-    GetIndexTemplate {}
+async fn root(HxRequest(hx_request): HxRequest) -> GetIndexTemplate {
+    GetIndexTemplate { hx_request }
 }
 
 pub fn get_router(assets_path: &Path) -> axum::Router {
@@ -25,4 +28,5 @@ pub fn get_router(assets_path: &Path) -> axum::Router {
         .route("/", axum::routing::get(root))
         .merge(pages::get_routes())
         .fallback(fallback)
+        .layer(AutoVaryLayer)
 }
diff --git a/crates/app/src/pages/cps.html b/crates/app/src/pages/cps.html
index 52b6e99..5e9da53 100644
--- a/crates/app/src/pages/cps.html
+++ b/crates/app/src/pages/cps.html
@@ -6,7 +6,7 @@
 {% block body %}
 {% call navbar::navbar(current="cps") %}
 <div class="py-10">
-  <header>
+  <header id="page-header">
     <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
       <h1
         id="page-title"
@@ -16,17 +16,16 @@
       </h1>
     </div>
   </header>
-  <main>
+  <main id="page-main">
     <div
-      id="main-container"
       class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8"
     >
+      <div
+        class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-96 mb-4"
+      >A</div>
       <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
         <div
           class="border-2 border-dashed border-gray-300 rounded-lg dark:border-gray-600 h-32 md:h-64"
-        >A</div>
-        <div
-          class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
         >B</div>
         <div
           class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
@@ -34,10 +33,10 @@
         <div
           class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
         >D</div>
+        <div
+          class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64"
+        >E</div>
       </div>
-      <div
-        class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-96 mb-4"
-      >E</div>
     </div>
   </main>
 </div>
diff --git a/crates/app/src/pages/cps.rs b/crates/app/src/pages/cps.rs
index 67c1de4..2a56bb6 100644
--- a/crates/app/src/pages/cps.rs
+++ b/crates/app/src/pages/cps.rs
@@ -1,34 +1,12 @@
 use askama_axum::Template;
-use axum::{
-    async_trait,
-    extract::FromRequestParts,
-    http::{request::Parts, HeaderMap, StatusCode},
-};
+use axum_htmx::HxRequest;
 
 #[derive(Template)]
 #[template(path = "cps.html")]
-pub struct CpsTemplate;
-
-pub struct ExtractHxRequest(bool);
-
-#[async_trait]
-impl<S> FromRequestParts<S> for ExtractHxRequest
-where
-    S: Send + Sync,
-{
-    type Rejection = (StatusCode, &'static str);
-
-    async fn from_request_parts(parts: &mut Parts, _state: &S) -> Result<Self, Self::Rejection> {
-        if parts.headers.get("HX-Request").is_some() {
-            Ok(ExtractHxRequest(true))
-        } else {
-            Ok(ExtractHxRequest(false))
-        }
-    }
+pub struct CpsTemplate {
+    hx_request: bool,
 }
 
-pub async fn cps(headers: HeaderMap, hx_request: ExtractHxRequest) -> CpsTemplate {
-    println!("{:#?}", headers);
-    println!("{:#?}", hx_request.0);
-    CpsTemplate
+pub async fn cps(HxRequest(hx_request): HxRequest) -> CpsTemplate {
+    CpsTemplate { hx_request }
 }
diff --git a/crates/app/src/pages/index.html b/crates/app/src/pages/index.html
index 58f0599..abe6fd4 100644
--- a/crates/app/src/pages/index.html
+++ b/crates/app/src/pages/index.html
@@ -6,7 +6,7 @@
 {% block body %}
 {% call navbar::navbar(current="home") %}
 <div class="py-10">
-  <header>
+  <header id="page-header">
     <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
       <h1
         id="page-title"
@@ -16,9 +16,8 @@
       </h1>
     </div>
   </header>
-  <main>
+  <main id="page-main">
     <div
-      id="main-container"
       class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8"
     >
       <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
