diff --git a/README.md b/README.md
index 775f5aa..e724cb1 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,7 @@
 > **AI system for malaria detection from blood smear images**  
 > Implemented in Rust (Burn) with an Axum inference API and a Yew web UI.
 
+![](demo.png)
 ## Overview
 
 This model predicts:
@@ -31,7 +32,7 @@ Stage labels are weak (image-level presence inferred from filename tokens) and a
 ## Requirements
 
 - Rust toolchain
-- Optional (UI): `trunk` + target `wasm32-unknown-unknown`
+- UI: `trunk` + target `wasm32-unknown-unknown`
 
 ## Data Preparation (Crops + Manifest)
 
diff --git a/inference-ui/Cargo.lock b/inference-ui/Cargo.lock
index d9c9410..00d2d68 100644
--- a/inference-ui/Cargo.lock
+++ b/inference-ui/Cargo.lock
@@ -609,6 +609,7 @@ dependencies = [
  "js-sys",
  "log",
  "serde",
+ "serde-wasm-bindgen 0.6.5",
  "serde_json",
  "wasm-bindgen",
  "wasm-bindgen-futures",
diff --git a/inference-ui/Cargo.toml b/inference-ui/Cargo.toml
index 2950733..4102036 100644
--- a/inference-ui/Cargo.toml
+++ b/inference-ui/Cargo.toml
@@ -21,6 +21,7 @@ web-sys = { version = "0.3", features = [
 js-sys = "0.3"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
+serde-wasm-bindgen = "0.6"
 log = "0.4"
 console_error_panic_hook = "0.1"
 console_log = { version = "1", features = ["color"] }
diff --git a/inference-ui/index.html b/inference-ui/index.html
index 599a830..c502dd7 100644
--- a/inference-ui/index.html
+++ b/inference-ui/index.html
@@ -1,57 +1,225 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Malaria Inference UI (Yew)</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet">
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script>
-      tailwind.config = {
-        darkMode: 'class',
-        theme: {
-          extend: {
-            fontFamily: { sans: ['Poppins', 'ui-sans-serif', 'system-ui'] },
-            colors: {
-              primary: { DEFAULT: '#1E40AF', foreground: '#FFFFFF' },
-              'dgrv-blue': '#1E40AF',
-              'dgrv-green': '#10B981',
-              'dgrv-light-blue': '#EFF6FF',
-              'bright-blue': '#00BFFF',
-            },
-            borderRadius: {
-              lg: '0.5rem',
-              md: '0.375rem',
-              sm: '0.25rem',
-            },
-            keyframes: {
-              'fade-in': { '0%': { opacity: 0, transform: 'translateY(10px)' }, '100%': { opacity: 1, transform: 'translateY(0)' } },
-              'scale-in': { '0%': { transform: 'scale(0.95)', opacity: 0 }, '100%': { transform: 'scale(1)', opacity: 1 } },
-              glow: { '0%, 100%': { boxShadow: '0 0 5px rgba(30, 64, 175, 0.5)' }, '50%': { boxShadow: '0 0 20px rgba(30, 64, 175, 0.8)' } },
-            },
-            animation: {
-              'fade-in': 'fade-in 0.3s ease-out',
-              'scale-in': 'scale-in 0.2s ease-out',
-              glow: 'glow 2s ease-in-out infinite',
-            }
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Giemsa AI - Malaria Analysis</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          fontFamily: { sans: ['Poppins', 'ui-sans-serif', 'system-ui'] },
+          colors: {
+            primary: { DEFAULT: '#1E40AF', foreground: '#FFFFFF' },
+            'dgrv-blue': '#1E40AF',
+            'dgrv-green': '#10B981',
+            'dgrv-light-blue': '#EFF6FF',
+            'bright-blue': '#00BFFF',
+          },
+          borderRadius: {
+            lg: '0.5rem',
+            md: '0.375rem',
+            sm: '0.25rem',
+          },
+          keyframes: {
+            'fade-in': { '0%': { opacity: 0, transform: 'translateY(10px)' }, '100%': { opacity: 1, transform: 'translateY(0)' } },
+            'scale-in': { '0%': { transform: 'scale(0.95)', opacity: 0 }, '100%': { transform: 'scale(1)', opacity: 1 } },
+            glow: { '0%, 100%': { boxShadow: '0 0 5px rgba(30, 64, 175, 0.5)' }, '50%': { boxShadow: '0 0 20px rgba(30, 64, 175, 0.8)' } },
+          },
+          animation: {
+            'fade-in': 'fade-in 0.3s ease-out',
+            'scale-in': 'scale-in 0.2s ease-out',
+            glow: 'glow 2s ease-in-out infinite',
           }
         }
       }
-    </script>
-    <style>
-      :root { color-scheme: dark; }
-      body { margin: 0; }
-    </style>
-    <script>
-      // Optional: set window.VITE_API_BASE = "http://localhost:8080"; at runtime to override
-    </script>
-  </head>
-  <body>
-    <div id="root"></div>
-    <!-- Trunk will build and inject the WASM/JS for this Rust crate -->
-    <link data-trunk rel="copy-dir" href="static/" />
-    <link data-trunk rel="rust" />
-  </body>
-  </html>
+    }
+  </script>
+  <style>
+    :root {
+      color-scheme: dark;
+    }
+
+    body {
+      margin: 0;
+    }
+  </style>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+  <script>
+    window.generateMalariaReport = function (raw_data) {
+      console.log("Generating Malaria Report with data:", raw_data);
+      if (!window.jspdf) {
+        console.error("jsPDF library not loaded.");
+        alert("Error: Report generation library not loaded.");
+        return;
+      }
+
+      // Handle Map vs Object (serde-wasm-bindgen can return Maps)
+      let data = raw_data;
+      if (raw_data instanceof Map) {
+        data = Object.fromEntries(raw_data);
+      }
+
+      const { jsPDF } = window.jspdf;
+      const doc = new jsPDF();
+      const { infected, species, speciesProb, stage, stageProb, date, imageUrl } = data;
+
+      // Brand Colors
+      const primary = infected ? [153, 27, 27] : [6, 95, 70]; // Red-800 or Emerald-800
+      const accent = [16, 185, 129]; // Emerald-500
+
+      // Header
+      doc.setFillColor(primary[0], primary[1], primary[2]);
+      doc.rect(0, 0, 210, 40, 'F');
+      doc.setTextColor(255, 255, 255);
+      doc.setFontSize(22);
+      doc.setFont("helvetica", "bold");
+      doc.text("Giemsa AI Diagnostics", 20, 25);
+
+      doc.setFontSize(10);
+      doc.setFont("helvetica", "normal");
+      doc.text(`Generated on: ${date}`, 140, 25);
+
+      // Main Status
+      doc.setTextColor(0, 0, 0);
+      doc.setFontSize(16);
+      doc.setFont("helvetica", "bold");
+      doc.text("Diagnostic Summary", 20, 55);
+
+      doc.setDrawColor(primary[0], primary[1], primary[2]);
+      doc.setLineWidth(0.5);
+      doc.line(20, 58, 190, 58);
+
+      // Status Box
+      doc.setFillColor(243, 244, 246);
+      doc.roundedRect(20, 65, 170, 30, 3, 3, 'F');
+
+      doc.setFontSize(12);
+      doc.text("RESULT:", 30, 80);
+      doc.setFontSize(14);
+      doc.setTextColor(primary[0], primary[1], primary[2]);
+      doc.text(infected ? "MALARIA DETECTED" : "NO MALARIA DETECTED", 60, 80);
+
+      // Details
+      doc.setTextColor(0, 0, 0);
+      doc.setFontSize(12);
+      doc.setFont("helvetica", "bold");
+      doc.text("Analysis Details", 20, 110);
+
+      doc.setFontSize(10);
+      doc.setFont("helvetica", "normal");
+      let y = 120;
+
+      const info = [
+        ["Status", infected ? "Positive" : "Negative"],
+        ["Primary Species", species],
+        ["Species Confidence", `${(speciesProb * 100).toFixed(1)}%`],
+      ];
+
+      if (infected) {
+        info.push(["Parasite Stage", stage]);
+        info.push(["Stage Confidence", `${(stageProb * 100).toFixed(1)}%`]);
+      }
+
+      info.forEach(([label, value]) => {
+        doc.setFont("helvetica", "bold");
+        doc.text(`${label}:`, 20, y);
+        doc.setFont("helvetica", "normal");
+        doc.text(value, 60, y);
+        y += 10;
+      });
+
+      // Footer (re-defined later)
+
+      // Image Handling
+      if (imageUrl) {
+        const logoImg = new Image();
+        logoImg.src = "/static/logo.png";
+
+        const img = new Image();
+        img.src = imageUrl;
+
+        // Wait for both images (logo + evidence)
+        let loaded = 0;
+        const total = 2; // logo + evidence
+
+        const checkDone = () => {
+          loaded++;
+          if (loaded >= total) {
+            finalizeAndSave(logoImg, img);
+          }
+        };
+
+        // Fallback if images fail
+        logoImg.onerror = checkDone;
+        img.onerror = checkDone;
+
+        logoImg.onload = checkDone;
+        img.onload = checkDone;
+
+      } else {
+        // Just logo needed
+        const logoImg = new Image();
+        logoImg.src = "/static/logo.png";
+        logoImg.onload = function () { finalizeAndSave(logoImg, null); };
+        logoImg.onerror = function () { finalizeAndSave(null, null); };
+      }
+
+      function finalizeAndSave(logoImg, evidenceImg) {
+        // Add Evidence Image if loaded
+        if (evidenceImg && evidenceImg.width > 0) {
+          const canvas = document.createElement("canvas");
+          canvas.width = evidenceImg.width;
+          canvas.height = evidenceImg.height;
+          const ctx = canvas.getContext("2d");
+          ctx.drawImage(evidenceImg, 0, 0);
+          const imgData = canvas.toDataURL("image/jpeg");
+
+          doc.setDrawColor(200, 200, 200);
+          doc.rect(120, 115, 70, 70, 'S');
+          doc.addImage(imgData, 'JPEG', 121, 116, 68, 68);
+          doc.setFontSize(8);
+          doc.text("Analysis Input Image Evidence", 125, 190);
+        }
+
+        doc.setFontSize(8);
+        doc.setTextColor(150, 150, 150);
+        doc.text("Note: This is an AI-generated research report and should be verified by a certified medical professional.", 20, 280);
+        doc.text("Giemsa AI - Advanced Malaria Detection Platform", 20, 285);
+
+        // Add Logo at bottom right if loaded
+        if (logoImg && logoImg.width > 0) {
+          const canvas = document.createElement("canvas");
+          canvas.width = logoImg.width;
+          canvas.height = logoImg.height;
+          const ctx = canvas.getContext("2d");
+          ctx.drawImage(logoImg, 0, 0);
+          const logoData = canvas.toDataURL("image/png");
+          // Bottom right corner (Page height ~297mm)
+          doc.addImage(logoData, 'PNG', 170, 260, 25, 25);
+        }
+
+        doc.save(`giemsa_report_${date.replace(/[/:\s]/g, '_')}.pdf`);
+      }
+    };
+  </script>
+  <script>
+    // Optional: set window.VITE_API_BASE = "http://localhost:8080"; at runtime to override
+  </script>
+
+</head>
+
+<body>
+  <div id="root"></div>
+  <!-- Trunk will build and inject the WASM/JS for this Rust crate -->
+  <link data-trunk rel="copy-dir" href="static/" />
+  <link data-trunk rel="rust" />
+</body>
+
+</html>
\ No newline at end of file
diff --git a/inference-ui/src/app.rs b/inference-ui/src/app.rs
index 4e2aeaf..dfe17a9 100644
--- a/inference-ui/src/app.rs
+++ b/inference-ui/src/app.rs
@@ -32,6 +32,8 @@ pub enum Route {
     Demo,
     #[at("/analyze")]
     Analyze,
+    #[at("/features")]
+    Features,
     #[not_found]
     #[at("/404")]
     NotFound,
@@ -42,6 +44,7 @@ fn switch(route: Route) -> Html {
         Route::Home => html! { <pages::home::HomePage /> },
         Route::Demo => html! { <pages::demo::DemoPage /> },
         Route::Analyze => html! { <pages::analyze::AnalyzePage /> },
+        Route::Features => html! { <pages::features::FeaturesPage /> },
         Route::NotFound => html! {
             <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
                 <div class="bg-white/5 border border-white/10 rounded-xl p-6">
@@ -67,13 +70,12 @@ fn layout(props: &LayoutProps) -> Html {
 
             <header class="fixed top-0 inset-x-0 z-50 backdrop-blur supports-[backdrop-filter]:bg-black/30 bg-black/40">
                 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 grid grid-cols-3 items-center">
-                    <div class="flex items-center">
-                        { html!{
-                            <Link<Route> to={Route::Home} classes="text-lg font-bold tracking-tight text-bright-blue">
-                                { if get_locale() == "fr" { "Détection du paludisme" } else { "Malaria Detection" } }
+                        <div class="flex items-center gap-3">
+                             <Link<Route> to={Route::Home} classes="flex items-center gap-2 text-lg font-bold tracking-tight text-white hover:opacity-90">
+                                <img src="/static/logo.png" class="h-8 w-8 rounded-full" alt="Giemsa AI Logo" />
+                                <span>{"Giemsa AI"}</span>
                             </Link<Route>>
-                        } }
-                    </div>
+                        </div>
                     <nav class="flex items-center justify-center gap-6 text-sm text-bright-blue opacity-90">
                         { html!{
                             <>
@@ -83,9 +85,9 @@ fn layout(props: &LayoutProps) -> Html {
                                 <Link<Route> to={Route::Analyze} classes="hover:opacity-100">
                                     { if get_locale() == "fr" { "Analyser" } else { "Analyze" } }
                                 </Link<Route>>
-                                <a href="#features" class="hover:opacity-100">
+                                <Link<Route> to={Route::Features} classes="hover:opacity-100">
                                     { if get_locale() == "fr" { "Fonctionnalités" } else { "Features" } }
-                                </a>
+                                </Link<Route>>
                                 <a href="#contact" class="hover:opacity-100">
                                     {"Contact"}
                                 </a>
diff --git a/inference-ui/src/pages/analyze.rs b/inference-ui/src/pages/analyze.rs
index f26904b..9e82e15 100644
--- a/inference-ui/src/pages/analyze.rs
+++ b/inference-ui/src/pages/analyze.rs
@@ -1,4 +1,5 @@
 use gloo_net::http::Request;
+use js_sys;
 use wasm_bindgen::{JsCast, JsValue};
 use wasm_bindgen_futures::spawn_local;
 use web_sys::{window, DragEvent, File as WebFile, FormData, HtmlInputElement, Url};
@@ -282,7 +283,52 @@ pub fn analyze_page() -> Html {
                             "bg-black/20",
                             if res.infected { "border-red-500/40" } else { "border-emerald-500/40" }
                         )}>
-                            <div class="text-xs uppercase tracking-wide opacity-70">{"Diagnosis"}</div>
+                            <div class="flex items-center justify-between">
+                                <div class="text-xs uppercase tracking-wide opacity-70">{"Diagnosis"}</div>
+                                <button
+                                    onclick={
+                                        let res = res.clone();
+                                        let preview_url = (*preview_url).clone();
+                                        Callback::from(move |_| {
+                                            let malaria_species_labels = ["Falciparum", "Malariae", "Ovale", "Vivax", "Uninfected"];
+                                            let stage_labels = ["Ring stage (R)", "Trophozoite stage (T)", "Schizont stage (S)", "Gametocyte stage (G)"];
+
+                                            let best_species_idx = argmax(&res.species_probabilities);
+                                            let best_species_label = malaria_species_labels.get(best_species_idx).unwrap_or(&"Unknown");
+                                            let best_species_conf = res.species_probabilities[best_species_idx];
+
+                                            let best_stage_idx = argmax(&res.stage_probabilities);
+                                            let best_stage_label = stage_labels.get(best_stage_idx).unwrap_or(&"Unknown");
+                                            let best_stage_conf = res.stage_probabilities[best_stage_idx];
+
+                                            let date = js_sys::Date::new_0().to_locale_string("en-US", &JsValue::from_str("{\"dateStyle\":\"long\", \"timeStyle\":\"short\"}")).as_string().unwrap_or_default();
+
+                                            let data = serde_json::json!({
+                                                "infected": res.infected,
+                                                "species": best_species_label,
+                                                "speciesProb": best_species_conf,
+                                                "stage": best_stage_label,
+                                                "stageProb": best_stage_conf,
+                                                "date": date,
+                                                "imageUrl": preview_url
+                                            });
+
+                                            if let Ok(js_data) = serde_wasm_bindgen::to_value(&data) {
+                                                let window = web_sys::window().unwrap();
+                                                let _ = js_sys::Reflect::get(&window, &JsValue::from_str("generateMalariaReport"))
+                                                    .unwrap()
+                                                    .dyn_into::<js_sys::Function>()
+                                                    .unwrap()
+                                                    .call1(&JsValue::NULL, &js_data);
+                                            }
+                                        })
+                                    }
+                                    class="text-[10px] bg-white/10 hover:bg-white/20 px-2 py-1 rounded transition-colors flex items-center gap-1"
+                                >
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+                                    {"Download Report (PDF)"}
+                                </button>
+                            </div>
                             <div class="mt-1 text-xl font-extrabold">
                                 { if res.infected {
                                     "Malaria detected"
diff --git a/inference-ui/src/pages/demo.rs b/inference-ui/src/pages/demo.rs
index eb36f36..0e4ced2 100644
--- a/inference-ui/src/pages/demo.rs
+++ b/inference-ui/src/pages/demo.rs
@@ -1,5 +1,8 @@
 use gloo_timers::future::TimeoutFuture;
+use js_sys;
+use wasm_bindgen::JsCast;
 use wasm_bindgen_futures::spawn_local;
+use web_sys;
 use yew::prelude::*;
 
 #[derive(Clone, PartialEq, Debug)]
@@ -30,12 +33,21 @@ fn step(props: &StepProps) -> Html {
     }
 }
 
+fn get_locale() -> String {
+    web_sys::window()
+        .and_then(|w| w.local_storage().ok().flatten())
+        .and_then(|s| s.get_item("locale").ok().flatten())
+        .unwrap_or_else(|| "en".to_string())
+}
+
 #[function_component(DemoPage)]
 pub fn demo_page() -> Html {
     let preview = use_state(|| None as Option<String>);
     let progress = use_state(|| 0u32);
     let running = use_state(|| false);
     let result = use_state(|| None as Option<DemoResult>);
+    let locale = get_locale();
+    let is_fr = locale == "fr";
 
     let choose_sample = {
         let preview = preview.clone();
@@ -105,23 +117,37 @@ pub fn demo_page() -> Html {
     };
 
     let samples = [
-        ("/static/infected.png", "Infected"),
-        ("/static/uninfected.png", "Not infected"),
+        (
+            "/static/demo_infected.png",
+            if is_fr { "Infecté" } else { "Infected" },
+        ),
+        (
+            "/static/uninfected.png",
+            if is_fr {
+                "Non infecté"
+            } else {
+                "Not infected"
+            },
+        ),
     ];
 
     html! {
         <div class="w-full max-w-7xl mx-auto px-6 sm:px-8 py-20 md:py-24 space-y-6">
             <header class="text-center mb-2">
-                <h1 class="text-3xl md:text-4xl font-extrabold tracking-tight">{"Demo: Analyzing a blood smear image"}</h1>
-                <p class="mt-2 text-sm opacity-80">{"Follow the steps below to preview how the analysis works. It runs locally in your browser."}</p>
+                <h1 class="text-3xl md:text-4xl font-extrabold tracking-tight">
+                    { if is_fr { "Démo : Analyser un frottis sanguin" } else { "Demo: Analyzing a blood smear image" } }
+                </h1>
+                <p class="mt-2 text-sm opacity-80">
+                    { if is_fr { "Suivez les étapes ci-dessous pour voir comment l'analyse fonctionne. Elle s'exécute localement dans votre navigateur." } else { "Follow the steps below to preview how the analysis works. It runs locally in your browser." } }
+                </p>
             </header>
 
-            <Step number={1} title={"Preview"}>
-                {"Follow the guided steps to see how the analysis works using example images."}
+            <Step number={1} title={ if is_fr { "Aperçu" } else { "Preview" } }>
+                { if is_fr { "Suivez les étapes guidées pour voir comment l'analyse fonctionne avec des images exemples." } else { "Follow the guided steps to see how the analysis works using example images." } }
             </Step>
 
             <div class="grid lg:grid-cols-2 gap-6">
-                <Step number={2} title={"Select a sample image"}>
+                <Step number={2} title={ if is_fr { "Sélectionner une image" } else { "Select a sample image" } }>
                     <div class="grid grid-cols-3 gap-3 mb-4">
                         { for samples.iter().map(|(url, label)| {
                             let choose_sample = choose_sample.clone();
@@ -139,16 +165,18 @@ pub fn demo_page() -> Html {
                     }
                 </Step>
 
-                <Step number={3} title={"Analyze"}>
-                    <p>{"Select a sample image"}</p>
+                <Step number={3} title={ if is_fr { "Analyser" } else { "Analyze" } }>
+                    <p>{ if is_fr { "Sélectionner une image échantillon" } else { "Select a sample image" } }</p>
                     <button onclick={on_analyze}
                         disabled={(*preview).is_none() || *running}
                         class={classes!(
                             "mt-4", "px-4", "py-2", "rounded-md", "text-white",
                             if (*preview).is_none() || *running { Some("bg-gray-500/60") } else { Some("bg-emerald-600 hover:bg-emerald-700") }
                         )}
-                    >{ if *running { "Analyzing..." } else { "Analyze" } }</button>
-                    <p class="mt-2 text-[11px] opacity-60">{"Simulated demo on the client side. Not intended for diagnostic use."}</p>
+                    >{ if *running { if is_fr { "Analyse en cours..." } else { "Analyzing..." } } else if is_fr { "Analyser" } else { "Analyze" } }</button>
+                    <p class="mt-2 text-[11px] opacity-60">
+                        { if is_fr { "Démo simulée côté client. Non destinée à un usage diagnostique." } else { "Simulated demo on the client side. Not intended for diagnostic use." } }
+                    </p>
                     { if *running || *progress > 0 {
                         html!{
                             <div class="mt-4">
@@ -162,20 +190,51 @@ pub fn demo_page() -> Html {
                 </Step>
             </div>
 
-            <Step number={4} title={"View results"}>
+            <Step number={4} title={ if is_fr { "Voir les résultats" } else { "View results" } }>
                 { if let Some(r) = (*result).clone() {
                     html!{
                         <div class="space-y-2">
                             <div>
-                                {"Parasite detected: "}
-                                { if r.parasite_detected { html!{ <span class="text-red-400 font-semibold">{"Yes"}</span> } } else { html!{ <span class="text-emerald-400 font-semibold">{"No"}</span> } } }
+                                { if is_fr { "Parasite détecté : " } else { "Parasite detected: " } }
+                                { if r.parasite_detected { html!{ <span class="text-red-400 font-semibold">{ if is_fr { "Oui" } else { "Yes" } }</span> } } else { html!{ <span class="text-emerald-400 font-semibold">{ if is_fr { "Non" } else { "No" } }</span> } } }
                             </div>
-                            <div>{format!("Confidence: {:.1}%", r.confidence * 100.0)}</div>
-                            <div class="text-xs opacity-60">{format!("Processed at: {}", r.processed_at)}</div>
+                            <div>{format!("{}: {:.1}%", if is_fr { "Confiance" } else { "Confidence" }, r.confidence * 100.0)}</div>
+                            <div class="text-xs opacity-60 mb-3">{format!("{}: {}", if is_fr { "Traité à" } else { "Processed at" }, r.processed_at)}</div>
+                            <button
+                                onclick={
+                                    let r = r.clone();
+                                    let preview = (*preview).clone();
+                                    Callback::from(move |_| {
+                                        let date = js_sys::Date::new_0().to_locale_string("en-US", &wasm_bindgen::JsValue::from_str("{\"dateStyle\":\"long\", \"timeStyle\":\"short\"}")).as_string().unwrap_or_default();
+                                        let data = serde_json::json!({
+                                            "infected": r.parasite_detected,
+                                            "species": if r.parasite_detected { "Detected (Demo)" } else { "Uninfected (Demo)" },
+                                            "speciesProb": r.confidence,
+                                            "stage": "Not specified (Demo)",
+                                            "stageProb": 0.0,
+                                            "date": date,
+                                            "imageUrl": preview
+                                        });
+
+                                        if let Ok(js_data) = serde_wasm_bindgen::to_value(&data) {
+                                            let window = web_sys::window().unwrap();
+                                            let _ = js_sys::Reflect::get(&window, &wasm_bindgen::JsValue::from_str("generateMalariaReport"))
+                                                .unwrap()
+                                                .dyn_into::<js_sys::Function>()
+                                                .unwrap()
+                                                .call1(&wasm_bindgen::JsValue::NULL, &js_data);
+                                        }
+                                    })
+                                }
+                                class="bg-white/10 hover:bg-white/20 px-3 py-1.5 rounded transition-colors flex items-center gap-2 text-xs"
+                            >
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+                                { if is_fr { "Télécharger le rapport (PDF)" } else { "Download Demo Report (PDF)" } }
+                            </button>
                         </div>
                     }
                 } else {
-                    html!{ <p class="text-sm opacity-80">{"No results yet. Complete steps 1 to 3 and click Analyze."}</p> }
+                    html!{ <p class="text-sm opacity-80">{ if is_fr { "Aucun résultat. Complétez les étapes 1 à 3 et cliquez sur Analyser." } else { "No results yet. Complete steps 1 to 3 and click Analyze." } }</p> }
                 }}
             </Step>
         </div>
diff --git a/inference-ui/src/pages/features.rs b/inference-ui/src/pages/features.rs
new file mode 100644
index 0000000..558a416
--- /dev/null
+++ b/inference-ui/src/pages/features.rs
@@ -0,0 +1,125 @@
+use yew::prelude::*;
+
+fn get_locale() -> String {
+    web_sys::window()
+        .and_then(|w| w.local_storage().ok().flatten())
+        .and_then(|s| s.get_item("locale").ok().flatten())
+        .unwrap_or_else(|| "en".to_string())
+}
+
+#[function_component(FeaturesPage)]
+pub fn features_page() -> Html {
+    let locale = get_locale();
+    let is_fr = locale == "fr";
+
+    html! {
+        <div class="w-full min-h-screen bg-black/20">
+            <div class="max-w-7xl mx-auto px-6 sm:px-8 py-20">
+                <div class="text-center mb-16">
+                    <h1 class="text-4xl md:text-5xl font-extrabold tracking-tight mb-4">
+                        { if is_fr { "Fonctionnalités de la Plateforme" } else { "Platform Capabilities" } }
+                    </h1>
+                    <p class="text-lg opacity-80 max-w-2xl mx-auto">
+                        { if is_fr {
+                            "Découvrez comment Giemsa AI utilise la vision par ordinateur avancée pour transformer le diagnostic du paludisme."
+                        } else {
+                            "Discover how Giemsa AI leverages advanced computer vision to transform malaria diagnostics."
+                        } }
+                    </p>
+                </div>
+
+                <div class="grid md:grid-cols-2 gap-12 mb-20">
+                    <div class="space-y-6">
+                        <div class="h-12 w-12 rounded-lg bg-emerald-500/20 flex items-center justify-center text-emerald-400">
+                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="22" y1="12" x2="18" y2="12"/><line x1="6" y1="12" x2="2" y2="12"/><line x1="12" y1="6" x2="12" y2="2"/><line x1="12" y1="22" x2="12" y2="18"/></svg>
+                        </div>
+                        <h3 class="text-2xl font-bold">
+                            { if is_fr { "Détection de Précision" } else { "Precision Detection" } }
+                        </h3>
+                        <p class="opacity-80 leading-relaxed">
+                            { if is_fr {
+                                "Notre modèle est entraîné sur des milliers d'images de frottis sanguins colorés au Giemsa. Il identifie les parasites Plasmodium avec une grande sensibilité, distinguant les érythrocytes infectés des sains, même dans les échantillons à faible parasitémie."
+                            } else {
+                                "Our core model is trained on thousands of Giemsa-stained thin blood smear images. It identifies Plasmodium parasites with high sensitivity, distinguishing between infected and uninfected erythrocytes even in low-parasitemia samples."
+                            } }
+                        </p>
+                        <ul class="space-y-3 opacity-80">
+                            <li class="flex items-center gap-2">
+                                <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
+                                { if is_fr { "Plus de 96% de précision sur les ensembles de validation" } else { "96%+ detection accuracy on validation sets" } }
+                            </li>
+                            <li class="flex items-center gap-2">
+                                <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
+                                { if is_fr { "Robuste face aux variations de coloration" } else { "Robust against staining variations" } }
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="rounded-2xl border border-white/10 bg-white/5 p-8 flex items-center justify-center">
+                        <div class="relative">
+                            <div class="absolute -inset-4 bg-emerald-500/20 blur-xl rounded-full"></div>
+                             <img src="/static/smear_illustration.png" class="relative rounded-lg shadow-2xl w-64 h-64 object-cover" alt="Detection Example" />
+                        </div>
+                    </div>
+                </div>
+
+                <div class="grid md:grid-cols-2 gap-12 mb-20">
+                    <div class="order-2 md:order-1 rounded-2xl border border-white/10 bg-white/5 p-8 flex items-center justify-center">
+                        <div class="grid grid-cols-2 gap-4 w-full max-w-sm">
+                            <div class="p-4 rounded-xl bg-black/40 border border-white/5 text-center">
+                                <div class="text-2xl font-bold text-emerald-400">{"< 2s"}</div>
+                                <div class="text-xs opacity-60">{ if is_fr { "Temps d'inférence" } else { "Inference Time" } }</div>
+                            </div>
+                            <div class="p-4 rounded-xl bg-black/40 border border-white/5 text-center">
+                                <div class="text-2xl font-bold text-emerald-400">{"4"}</div>
+                                <div class="text-xs opacity-60">{ if is_fr { "Classes d'espèces" } else { "Species Classes" } }</div>
+                            </div>
+                            <div class="p-4 rounded-xl bg-black/40 border border-white/5 text-center">
+                                <div class="text-2xl font-bold text-emerald-400">{"API"}</div>
+                                <div class="text-xs opacity-60">{ if is_fr { "Intégration Standard" } else { "Standard Integration" } }</div>
+                            </div>
+                            <div class="p-4 rounded-xl bg-black/40 border border-white/5 text-center">
+                                <div class="text-2xl font-bold text-emerald-400">{"PDF"}</div>
+                                <div class="text-xs opacity-60">{ if is_fr { "Rapport Auto" } else { "Auto Reporting" } }</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="order-1 md:order-2 space-y-6">
+                        <div class="h-12 w-12 rounded-lg bg-blue-500/20 flex items-center justify-center text-blue-400">
+                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+                        </div>
+                        <h3 class="text-2xl font-bold">
+                            { if is_fr { "Optimisation du Flux de Travail" } else { "Workflow Optimization" } }
+                        </h3>
+                        <p class="opacity-80 leading-relaxed">
+                            { if is_fr {
+                                "Giemsa AI n'est pas seulement un modèle ; c'est un outil de flux de travail. En automatisant le dépistage initial, nous permettons aux techniciens de se concentrer uniquement sur les cas suspects."
+                            } else {
+                                "Giemsa AI isn't just a model; it's a workflow tool. By automating the initial screening, we allow lab technicians to focus only on the suspect cases flagged by the system."
+                            } }
+                        </p>
+                         <ul class="space-y-3 opacity-80">
+                            <li class="flex items-center gap-2">
+                                <span class="h-1.5 w-1.5 rounded-full bg-blue-500"></span>
+                                { if is_fr { "Réduit le temps de microscopie manuelle de ~40%" } else { "Reduces manual microscopy time by ~40%" } }
+                            </li>
+                            <li class="flex items-center gap-2">
+                                <span class="h-1.5 w-1.5 rounded-full bg-blue-500"></span>
+                                { if is_fr { "Rapport PDF standardisé pour les dossiers" } else { "Standardized PDF reporting for patient records" } }
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+                 <div class="pt-20 border-t border-white/10 text-center">
+                    <h2 class="text-2xl font-bold mb-6">
+                        { if is_fr { "Prêt à le voir en action ?" } else { "Ready to see it in action?" } }
+                    </h2>
+                    <a href="/demo" class="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-emerald-600 text-white hover:bg-emerald-700 transition-colors">
+                        { if is_fr { "Essayez la Démo Interactive" } else { "Try the Interactive Demo" } }
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
+                    </a>
+                </div>
+            </div>
+        </div>
+    }
+}
diff --git a/inference-ui/src/pages/home.rs b/inference-ui/src/pages/home.rs
index cf33381..bac1f78 100644
--- a/inference-ui/src/pages/home.rs
+++ b/inference-ui/src/pages/home.rs
@@ -19,18 +19,27 @@ pub fn home_page() -> Html {
     html! {
         <div class="w-full">
             <section class="relative overflow-hidden">
-                <div class="absolute inset-0 -z-10 bg-gradient-to-b from-emerald-700/20 via-transparent to-transparent"></div>
-                <div class="max-w-7xl mx-auto px-6 sm:px-8 py-20 md:py-28 text-center">
+                <nav class="absolute top-0 left-0 w-full z-10 px-6 py-6 flex items-center justify-between">
+                    <div class="flex items-center gap-3">
+                        <img src="/static/logo.png" class="h-8 w-8 rounded-full" alt="Giemsa AI Logo" />
+                        <span class="font-bold text-xl tracking-tight">{"Giemsa AI"}</span>
+                    </div>
+                </nav>
+                <div class="absolute inset-0 -z-10 bg-gradient-to-b from-emerald-900/30 via-transparent to-transparent"></div>
+                <div class="max-w-7xl mx-auto px-6 sm:px-8 py-24 md:py-32 text-center">
                     <>
                         <div class="inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs opacity-80">
                             { if get_locale() == "fr" { "Recherche et éducation" } else { "Research and Education Overview" } }
                         </div>
-                        <h1 class="mt-4 text-4xl md:text-6xl font-extrabold tracking-tight">
+                        <h1 class="mt-4 text-4xl md:text-6xl font-extrabold tracking-tight text-white mb-2">
+                            {"Giemsa AI"}
+                        </h1>
+                        <h2 class="text-2xl md:text-4xl font-bold tracking-tight opacity-90">
                             { if get_locale() == "fr" { "Analyse IA des frottis du paludisme" } else { "AI analysis of malaria smears" } }
                             <span class="block text-emerald-400">
                                 { if get_locale() == "fr" { "pour un triage clinique plus rapide" } else { "for faster clinical triage" } }
                             </span>
-                        </h1>
+                        </h2>
                         <p class="mt-4 text-base md:text-lg opacity-80 max-w-3xl mx-auto">
                             { if get_locale() == "fr" {
                                 "Vision par ordinateur moderne pour aider cliniciens et laboratoires avec une évaluation rapide et cohérente des images de frottis sanguins."
@@ -81,7 +90,105 @@ pub fn home_page() -> Html {
                 </div>
             </section>
 
-            <section id="features" class="px-6 sm:px-8 py-16">
+            <section class="px-6 sm:px-8 py-12 bg-white/[0.02] border-t border-white/5">
+                <div class="max-w-7xl mx-auto">
+                    <div class="text-center mb-12">
+                        <h2 class="text-3xl md:text-4xl font-bold mb-4">
+                            { if get_locale() == "fr" { "L'Urgence du Paludisme en Afrique" } else { "The Malaria Crisis in Africa" } }
+                        </h2>
+                        <p class="text-lg opacity-80 max-w-3xl mx-auto">
+                            { if get_locale() == "fr" {
+                                "Le paludisme reste l'un des plus grands défis de santé publique sur le continent. Voici pourquoi notre solution est cruciale."
+                            } else {
+                                "Malaria remains one of the greatest public health challenges on the continent. Here is why our solution is crucial."
+                            } }
+                        </p>
+                    </div>
+
+                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+                        <div class="p-6 rounded-2xl bg-emerald-950/30 border border-emerald-500/20 text-center animate-fade-in" style="animation-delay: 0.1s">
+                            <div class="text-4xl font-black text-emerald-400 mb-2">{"265M"}</div>
+                            <p class="text-sm font-semibold opacity-90 uppercase tracking-wider">
+                                { if get_locale() == "fr" { "Cas Annuels en Afrique" } else { "Annual Cases in Africa" } }
+                            </p>
+                            <p class="mt-2 text-xs opacity-60">{"95% of the total global burden falls on the African continent."}</p>
+                        </div>
+                        <div class="p-6 rounded-2xl bg-emerald-950/30 border border-emerald-500/20 text-center animate-fade-in" style="animation-delay: 0.2s">
+                            <div class="text-4xl font-black text-emerald-400 mb-2">{"579K"}</div>
+                            <p class="text-sm font-semibold opacity-90 uppercase tracking-wider">
+                                { if get_locale() == "fr" { "Décès Annuels" } else { "Annual Deaths" } }
+                            </p>
+                            <p class="mt-2 text-xs opacity-60">{"The vast majority of malaria-related deaths occur in the WHO African Region."}</p>
+                        </div>
+                        <div class="p-6 rounded-2xl bg-emerald-950/30 border border-emerald-500/20 text-center animate-fade-in" style="animation-delay: 0.3s">
+                            <div class="text-4xl font-black text-emerald-400 mb-2">{"76%"}</div>
+                            <p class="text-sm font-semibold opacity-90 uppercase tracking-wider">
+                                { if get_locale() == "fr" { "Enfants < 5 ans" } else { "Children < 5 years" } }
+                            </p>
+                            <p class="mt-2 text-xs opacity-60">{"The most vulnerable demographic, accounting for 3 out of every 4 malaria deaths."}</p>
+                        </div>
+                        <div class="p-6 rounded-2xl bg-emerald-950/30 border border-emerald-500/20 text-center animate-fade-in" style="animation-delay: 0.4s">
+                            <div class="text-4xl font-black text-emerald-400 mb-2">{"$5.1B"}</div>
+                            <p class="text-sm font-semibold opacity-90 uppercase tracking-wider">
+                                { if get_locale() == "fr" { "Déficit de Financement" } else { "Funding Gap" } }
+                            </p>
+                            <p class="mt-2 text-xs opacity-60">{"The gap between current resources and the US$9.3B needed for elimination by 2025."}</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section class="px-6 sm:px-8 py-16 overflow-hidden">
+                <div class="max-w-7xl mx-auto flex flex-col lg:flex-row items-center gap-12">
+                    <div class="flex-1 space-y-6">
+                        <div class="inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3 py-1 text-xs text-emerald-400">
+                             { if get_locale() == "fr" { "Aperçu des Données" } else { "Data Insight" } }
+                        </div>
+                        <h2 class="text-3xl md:text-5xl font-bold leading-tight">
+                            { if get_locale() == "fr" { "Pourquoi cette plateforme est nécessaire ?" } else { "Why is this platform necessary?" } }
+                        </h2>
+                        <div class="space-y-4 text-lg opacity-80">
+                            <p>
+                                { if get_locale() == "fr" {
+                                    "La détection précoce est la clé pour réduire la mortalité. Cependant, de nombreux établissements de santé en Afrique manquent de microscopistes experts ou font face à une charge de travail écrasante."
+                                } else {
+                                    "Early detection is key to reducing mortality. However, many health facilities in Africa lack expert microscopists or face overwhelming workloads."
+                                } }
+                            </p>
+                            <p>
+                                { if get_locale() == "fr" {
+                                    "Notre plateforme d'IA comble ce fossé en fournissant des outils d'analyse automatisés, rapides et précis pour soutenir le diagnostic clinique dans les régions les plus touchées."
+                                } else {
+                                    "Our AI platform bridges this gap by providing automated, rapid, and accurate analysis tools to support clinical diagnosis in the most affected regions."
+                                } }
+                            </p>
+                        </div>
+                        <div class="pt-4 border-t border-white/10 grid grid-cols-2 gap-4">
+                            <div>
+                                <h4 class="font-bold text-emerald-400 text-sm italic">{"High Burden Zone 1"}</h4>
+                                <p class="text-xl font-bold">{"Nigeria (31.9%)"}</p>
+                                <p class="text-xs opacity-60">{"of global malaria deaths"}</p>
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-emerald-400 text-sm italic">{"High Burden Zone 2"}</h4>
+                                <p class="text-xl font-bold">{"DRC (11.7%)"}</p>
+                                <p class="text-xs opacity-60">{"of global malaria deaths"}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex-1 relative">
+                        <div class="absolute -inset-4 bg-emerald-500/20 blur-3xl -z-10 rounded-full"></div>
+                        <img
+                            src="/static/malaria_map_burden.png"
+                            alt="Malaria Burden Map in Africa"
+                            class="rounded-2xl border border-white/10 shadow-2xl shadow-emerald-900/20 w-full animate-scale-in"
+                        />
+                    </div>
+                </div>
+            </section>
+
+
+            <section id="features" class="px-6 sm:px-8 py-12">
                 <div class="max-w-7xl mx-auto grid md:grid-cols-3 gap-6">
                     <article class="rounded-xl border border-white/10 p-6 bg-white/5">
                         <div class="flex items-center gap-3 mb-3">
@@ -107,7 +214,7 @@ pub fn home_page() -> Html {
                 </div>
             </section>
 
-            <section class="px-6 sm:px-8 pb-20">
+            <section class="px-6 sm:px-8 pb-16">
                 <div class="max-w-5xl mx-auto rounded-2xl border border-white/10 p-8 bg-white/5 text-center">
                     <div class="inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs opacity-80 mb-3">{"Commitment"}</div>
                     <h3 class="text-2xl md:text-3xl font-bold">{"Responsible AI for healthcare"}</h3>
diff --git a/inference-ui/src/pages/mod.rs b/inference-ui/src/pages/mod.rs
index 460b7f2..2d96703 100644
--- a/inference-ui/src/pages/mod.rs
+++ b/inference-ui/src/pages/mod.rs
@@ -1,3 +1,4 @@
 pub mod analyze;
 pub mod demo;
+pub mod features;
 pub mod home;
diff --git a/inference-ui/static/demo_infected.png b/inference-ui/static/demo_infected.png
new file mode 100644
index 0000000..888d98b
Binary files /dev/null and b/inference-ui/static/demo_infected.png differ
diff --git a/inference-ui/static/infected.png b/inference-ui/static/infected.png
index e576b44..36a37fe 100644
Binary files a/inference-ui/static/infected.png and b/inference-ui/static/infected.png differ
diff --git a/inference-ui/static/logo.png b/inference-ui/static/logo.png
new file mode 100644
index 0000000..fabbef7
Binary files /dev/null and b/inference-ui/static/logo.png differ
diff --git a/inference-ui/static/malaria_map_burden.png b/inference-ui/static/malaria_map_burden.png
new file mode 100644
index 0000000..9a57c81
Binary files /dev/null and b/inference-ui/static/malaria_map_burden.png differ
diff --git a/inference-ui/static/smear_illustration.png b/inference-ui/static/smear_illustration.png
new file mode 100644
index 0000000..23c8266
Binary files /dev/null and b/inference-ui/static/smear_illustration.png differ
