diff --git a/backend/src/api.py b/backend/src/api.py
index 90cc34c..052738d 100644
--- a/backend/src/api.py
+++ b/backend/src/api.py
@@ -30,11 +30,12 @@ def get_tile(tile_id):
         return jsonify({'error': 'Tuile non trouvée'}), 404
     
     tile = tiles[tile_id]
+    svg = f'<svg viewBox="0 0 500 700" width="100" height="140">{tile.get_img()}</svg>'
     return jsonify({
         'id': tile.id,
         'family': str(tile.family),
         'value': str(tile.value),
-        'svg': tile.get_img()
+        'svg': svg
     })
 
 # ============== POST ================
diff --git a/backend/src/game/tile.py b/backend/src/game/tile.py
index 83230b0..3a11a59 100644
--- a/backend/src/game/tile.py
+++ b/backend/src/game/tile.py
@@ -52,15 +52,13 @@ class Tile:
         
     def get_img(self):
         if self.img == None:
-            shadow = self._load_svg(self.img_shadow, x=4, y=4)
+            shadow = self._load_svg(self.img_shadow, x=10, y=10)
             front = self._load_svg(self.img_front, x=0, y=0)
             symbol = self._load_svg(self.img_symbol, x=12, y=20, scale=0.9)
 
-            self.img = f"""<g class="tile tile-{self.id}" data-tile-id="{self.id}">
-                {shadow}
-                {front}
-                {symbol}
-            </g>"""
+            ratio = 400 / 300
+            width = 60
+            self.img = f"""<svg class="tile tile-{self.id}" data-tile-id="{self.id}" viewBox="0 0 310 410" height="{ratio * width}" width="{width}">{shadow}{front}{symbol}</svg>"""
         return self.img
     
     @staticmethod
diff --git a/index.html b/index.html
index 93ea8bb..a2dd1e1 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,46 @@
 <head>
   <meta charset="UTF-8">
   <title>Tuto Riichi</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      background: #f0f0f0;
+    }
+
+    #menu {
+      position: relative;
+      z-index: 10;
+    }
+
+    #tile-rain {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+
+    .falling-tile {
+      position: absolute;
+      top: -100px;
+      animation: fall linear forwards;
+    }
+
+    @keyframes fall {
+      to {
+        transform: translateY(100vh) rotate(360deg);
+        opacity: 0;
+      }
+    }
+  </style>
 </head>
 <body>
   <div id="menu"></div>
+  <div id="tile-container"></div>
+  <div id="tile-rain"></div>
   
   <script>
     // Charger le menu
@@ -13,6 +50,34 @@
       .then(r => r.text())
       .then(html => document.getElementById('menu').innerHTML = html);
 
+    let allTiles = [];
+
+    // Récupérer les tuiles
+    fetch('http://localhost:5000/api/tiles')
+      .then(r => r.json())
+      .then(data => {
+        allTiles = data.tiles;
+        
+        // Lancer la pluie de tuiles
+        startTileRain();
+      });
+
+    function startTileRain() {
+      const container = document.getElementById('tile-rain');
+      setInterval(() => {
+        const randomTile = allTiles[Math.floor(Math.random() * allTiles.length)];
+        const tileElem = document.createElement('div');
+        tileElem.className = 'falling-tile';
+        tileElem.innerHTML = randomTile.svg;
+        tileElem.style.left = Math.random() * window.innerWidth + 'px';
+        const duration = 3 + Math.random() * 2;
+        tileElem.style.animationDuration = duration + 's';
+        container.appendChild(tileElem);
+
+        setTimeout(() => tileElem.remove(), duration * 1000);
+      }, 300);
+    }
+
   </script>
 </body>
 </html>
\ No newline at end of file
