diff --git a/back/src/main.rs b/back/src/main.rs
index 141544d..23d9fc0 100644
--- a/back/src/main.rs
+++ b/back/src/main.rs
@@ -122,6 +122,8 @@ async fn main() -> Result<(), std::io::Error> {
             .service(api)
             .service(get_article)
             .service(Files::new("/", "public").index_file("index.html"))
+            .service(Files::new("/game", "public").index_file("index.html"))
+            .service(Files::new("/chaos", "public").index_file("index.html"))
     })
     .bind(("0.0.0.0", 2486))?
     .run()
diff --git a/front/src/components/NavBar.tsx b/front/src/components/NavBar.tsx
index d868b75..d6f6c87 100644
--- a/front/src/components/NavBar.tsx
+++ b/front/src/components/NavBar.tsx
@@ -11,9 +11,10 @@ export default function NavBar(){
             <Link to="/" style={{ textDecoration: "none", color: "white", fontSize: "1.5em", margin: "0.5em", fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif'}}>Home</Link>
             <Link to="/game" style={{ textDecoration: "none", color: "white", fontSize: "1.5em", margin: "0.5em", fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif'}}>Game</Link>
             <Link to="/articles" style={{ textDecoration: "none", color: "white", fontSize: "1.5em", margin: "0.5em", fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif'}}>Articles</Link>
+            <Link to="/chaos" style={{ textDecoration: "none", color: "white", fontSize: "1.5em", margin: "0.5em", fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif'}}>Le Chaos</Link>
         </div>
         <div style={{ display : "flex",  alignItems: "center", flexDirection: "row"}}>
-            <RoundButton url="https://archlinux.org" bgcolor="var(--color-white)" text="?"/>
+            <RoundButton url="https://www.apple.com/macos/macos-sequoia/" bgcolor="var(--color-white)" text="?"/>
         </div>
     </nav>);
 }
\ No newline at end of file
diff --git a/front/src/components/chaos/MonInput.tsx b/front/src/components/chaos/MonInput.tsx
new file mode 100644
index 0000000..ae96388
--- /dev/null
+++ b/front/src/components/chaos/MonInput.tsx
@@ -0,0 +1,16 @@
+//import { useState } from "react";
+
+interface MonInputProps {
+    text: string;
+    new_focus: () => void;
+    police: string;
+}
+
+export default function MonInput({text, new_focus, police}: MonInputProps) {
+
+    return (
+        <div>
+            <input readOnly value={text} onFocus={new_focus} style={{fontFamily: police,width:1000}}></input>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/front/src/components/chaos/monButton.tsx b/front/src/components/chaos/monButton.tsx
new file mode 100644
index 0000000..e06033f
--- /dev/null
+++ b/front/src/components/chaos/monButton.tsx
@@ -0,0 +1,26 @@
+
+interface MonButtonProps {
+    letter: string;
+    changetext: (arg0: string) => void;
+    sizeFrontw: number;
+    sizeFronth: number;
+    rdmFront: () => void;
+    color: string;
+}
+
+
+export default function MonButton({letter,changetext,sizeFrontw,sizeFronth,rdmFront,color}: MonButtonProps) {
+
+    
+
+    function clicked() {rdmFront();
+        changetext(letter)} 
+
+    
+
+    return (
+        <div>
+            <button className="key" onClick={clicked} style={{width:sizeFrontw,height:sizeFronth,background:color}}>{letter}</button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/front/src/components/chaos/style.css b/front/src/components/chaos/style.css
new file mode 100644
index 0000000..f0fbe2d
--- /dev/null
+++ b/front/src/components/chaos/style.css
@@ -0,0 +1,12 @@
+
+#keys {
+    display: grid;
+    grid-template-columns: auto auto 1fr;
+    
+
+}
+
+.key {
+    font-size: 10px;
+    border: solid black;
+}
\ No newline at end of file
diff --git a/front/src/main.tsx b/front/src/main.tsx
index d4ac604..a9d0f99 100644
--- a/front/src/main.tsx
+++ b/front/src/main.tsx
@@ -2,6 +2,8 @@ import { BrowserRouter, Route, Routes } from "react-router";
 import { createRoot } from 'react-dom/client'
 import MainPage from "./pages/MainPage.tsx";
 import GamePage from "./pages/GamePage.tsx";
+import ChaosPage from "./pages/ChaosPage.tsx";
+
 import ArticlePage from "./pages/ArticlePage.tsx";
 import './index.css'
 
@@ -12,6 +14,7 @@ createRoot(document.getElementById('root')!).render(
       <Route path="/" element={<MainPage />} />
       // Game page
       <Route path="/game" element={<GamePage />} />
+      <Route path="/chaos" element={<ChaosPage />} />
       // Article page (dynamic route)
       <Route path="/article/:id" element={<ArticlePage />} />
       // Not found
diff --git a/front/src/pages/ChaosPage.tsx b/front/src/pages/ChaosPage.tsx
new file mode 100644
index 0000000..9efc84b
--- /dev/null
+++ b/front/src/pages/ChaosPage.tsx
@@ -0,0 +1,86 @@
+import MonButton from "../components/chaos/monButton";
+import MonInput from "../components/chaos/MonInput";
+import "../components/chaos/style.css"
+import { useState } from "react";
+
+
+export default function ChaosPage(){
+
+    const [array_letter,setArray_letter]=useState(["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"," ","!"]);
+
+    const [sizeFrontw,setSizeFrontw] = useState(16)
+    const [sizeFronth,setSizeFronth] = useState(20)
+    const [color,setColor] = useState("#ffffff")
+
+    function randomFront(){setSizeFronth(Math.floor(Math.random() * (1000)));
+    setSizeFrontw(Math.floor(Math.random() * (1000)));
+    setColor(`#${Math.floor(Math.random() * 16777215).toString(16)}`)}
+
+    function shuffleArray(arr: string[]) {
+        for (let i = arr.length - 1; i > 0; i--) {
+          const j = Math.floor(Math.random() * (i + 1));  // Choisir un index aléatoire
+          [arr[i], arr[j]] = [arr[j], arr[i]];  // Échanger les éléments
+        }
+        return arr;
+      }
+      
+      
+    //   console.log(shuffledArray);  // Affiche un tableau mélangé
+      
+
+    const [entry1,setEntry1] = useState("")
+    function E1(ent:string) {
+        setEntry1(entry1+ent);
+    }
+    const [connarddefocus,setFocus] = useState(()=>E1)
+
+    const [entry2,setEntry2] = useState("")
+    function E2(ent:string) {
+        setEntry2(entry2+ent);
+    }
+    
+    function changeFocus(E: (ent:string)=>void) {
+        setArray_letter(shuffleArray(array_letter));
+        setFocus(()=>E);
+    }
+
+    const [entry3,setEntry3] = useState("")
+    function E3(ent:string) {
+        setEntry3(entry3+ent);
+    }
+
+    const [tel,setTel] = useState(0)
+
+    
+    return(
+        <div>
+            <h1>Chaos Page</h1>
+            <p>Quel est votre nom ?</p>
+            <MonInput text={entry1} new_focus={()=>changeFocus(E1)} police={""}/>
+            <p>Quel adjectif désigne le mieux Xi Junpin ?</p>
+            <MonInput text={entry2} new_focus={()=>changeFocus(E2)} police={""}/>
+            <p>Combien font 1+1 ?</p>
+            <MonInput text={entry3} new_focus={()=>changeFocus(E3)} police={"Wingdings"}/>
+            <div id = "keys">
+                {array_letter.map((letter) => {return <MonButton 
+                                                                letter={letter} 
+                                                                changetext={connarddefocus}
+                                                                sizeFrontw={sizeFrontw}
+                                                                sizeFronth={sizeFronth}
+                                                                rdmFront={randomFront}
+                                                                color={color}/> })}
+            </div>
+            <fieldset>
+                <legend>Formulaire super mega bien</legend>
+                <input type="text" placeholder="nom"/>
+                <input type="text" placeholder="prenom"/>
+                <input type="text" placeholder="email"/>
+                <input type="text" placeholder="mdp"/>
+                <input type="text" placeholder="mdp2"/>
+                <label htmlFor="phone">phone : {tel}</label>
+                <input type="range" min="0" max="9999999999" step="1" name="phone" id="phone" value={tel} onChange={(e)=>setTel(parseInt(e.target.value))}/>
+                <input type="submit" value="envoyer"/>
+            </fieldset>
+        </div>
+    )
+}
\ No newline at end of file