diff --git a/web/src/lib/api.ts b/web/src/lib/api.ts
index 59d5725..7bbeb08 100644
--- a/web/src/lib/api.ts
+++ b/web/src/lib/api.ts
@@ -132,8 +132,11 @@ export const api = {
 
   listDemos: () => request<{ items: Demo[] }>('GET', '/demos'),
   getDemo: (id: string) => request<Demo>('GET', `/demos/${id}`),
-  createDemo: (leadId?: string) =>
-    request<Demo>('POST', '/demos', leadId ? { lead_id: leadId } : {}),
+  createDemo: (username: string, leadId?: string) =>
+    request<Demo>('POST', '/demos', {
+      username,
+      ...(leadId ? { lead_id: leadId } : {}),
+    }),
   extendDemo: (id: string) => request<Demo>('POST', `/demos/${id}/extend`),
   deleteDemo: (id: string) => request<Demo>('DELETE', `/demos/${id}`),
 
diff --git a/web/src/pages/backoffice/Demos.tsx b/web/src/pages/backoffice/Demos.tsx
index a5bbb16..b403da5 100644
--- a/web/src/pages/backoffice/Demos.tsx
+++ b/web/src/pages/backoffice/Demos.tsx
@@ -3,8 +3,11 @@ import {
   Badge,
   Button,
   Flex,
+  FormControl,
+  FormLabel,
   Heading,
   HStack,
+  Input,
   Link,
   Modal,
   ModalBody,
@@ -45,6 +48,10 @@ export function Demos() {
   const [busy, setBusy] = useState<string | null>(null)
   const [toDelete, setToDelete] = useState<Demo | null>(null)
 
+  // --- Formulaire de création ---
+  const [newUsername, setNewUsername] = useState('')
+  const [newLeadId, setNewLeadId] = useState('')
+
   // --- Détails d'une démo (modale) ---
   const [detailsFor, setDetailsFor] = useState<Demo | null>(null)
   const [details, setDetails] = useState<DemoDetails | null>(null)
@@ -69,10 +76,16 @@ export function Demos() {
   }, [load])
 
   const create = async () => {
+    if (!newUsername.trim()) {
+      toast({ status: 'warning', title: 'Username requis' })
+      return
+    }
     setBusy('new')
     try {
-      await api.createDemo()
+      await api.createDemo(newUsername.trim(), newLeadId.trim() || undefined)
       toast({ status: 'success', title: 'Démo lancée' })
+      setNewUsername('')
+      setNewLeadId('')
       await load()
     } catch (err) {
       const msg = err instanceof ApiError ? err.message : 'Erreur'
@@ -138,9 +151,33 @@ export function Demos() {
 
   return (
     <>
-      <Flex mb={6} align="center">
-        <Heading size="md">Démos</Heading>
+      <Flex mb={6} align="flex-end" gap={4} wrap="wrap">
+        <Heading size="md" mr={4}>
+          Démos
+        </Heading>
         <Spacer />
+        <FormControl maxW="220px">
+          <FormLabel fontSize="sm" mb={1}>
+            Username
+          </FormLabel>
+          <Input
+            size="sm"
+            placeholder="ex: acme-corp"
+            value={newUsername}
+            onChange={(e) => setNewUsername(e.target.value)}
+          />
+        </FormControl>
+        <FormControl maxW="220px">
+          <FormLabel fontSize="sm" mb={1}>
+            Lead ID (optionnel)
+          </FormLabel>
+          <Input
+            size="sm"
+            placeholder="uuid du lead"
+            value={newLeadId}
+            onChange={(e) => setNewLeadId(e.target.value)}
+          />
+        </FormControl>
         <Button colorScheme="primary" isLoading={busy === 'new'} onClick={create}>
           Nouvelle démo
         </Button>