diff --git a/.env.sample b/.env.sample
new file mode 100644
index 0000000..3bf87d7
--- /dev/null
+++ b/.env.sample
@@ -0,0 +1 @@
+THEATERS=[{"id":"C0071","name":"Écoles Cinéma Club","latitude":48.848363,"longitude":2.348973},{"id":"C2954","name":"MK2 Bibliothèque","latitude":48.832448,"longitude":2.375488},{"id":"C0050","name":"MK2 Beaubourg","latitude":48.861584,"longitude":2.352312},{"id":"W7504","name":"Épée de bois","latitude":48.8413,"longitude":2.349555},{"id":"C0076","name":"Cinéma du Panthéon","latitude":48.847488,"longitude":2.342385},{"id":"C0089","name":"Max Linder Panorama","latitude":48.87137,"longitude":2.344856},{"id":"C0013","name":"Luminor Hotel de Ville","latitude":48.858676,"longitude":2.353602},{"id":"C0072","name":"Le Grand Action","latitude":48.84753,"longitude":2.352129},{"id":"C0099","name":"MK2 Parnasse","latitude":48.842813,"longitude":2.330526},{"id":"C0073","name":"Le Champo","latitude":48.84998,"longitude":2.343223},{"id":"C0020","name":"Filmothèque du Quartier Latin","latitude":48.84951,"longitude":2.34279},{"id":"C0074","name":"Reflet Medicis","latitude":48.84951,"longitude":2.34279},{"id":"C0159","name":"UGC Ciné Cité Les Halles","latitude":48.849777,"longitude":2.343014},{"id":"C0026","name":"UGC Ciné Cité Bercy","latitude":48.832182,"longitude":2.385291}]
diff --git a/.gitignore b/.gitignore
index a589ee0..6d95311 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 __pycache__/
 .vscode/
 .venv
-.DS_Store
\ No newline at end of file
+.DS_Store
+.env
diff --git a/app.py b/app.py
index da2f49c..34a388e 100644
--- a/app.py
+++ b/app.py
@@ -1,34 +1,39 @@
+import dotenv
+import json
+import os
 from flask import Flask, render_template, request
 from datetime import datetime, timedelta
 
-# IMPORT DES MODULES 
+# IMPORT DES MODULES
 from modules.Classes import *
 
-cinemas = {
-    "C0071": "Écoles Cinéma Club",
-    "C2954": "MK2 Bibliothèque",
-    "C0050": "MK2 Beaubourg",
-    "W7504": "Épée de bois",
-    "C0076": "Cinéma du Panthéon",
-    "C0089": "Max Linder Panorama",
-    "C0013": "Luminor Hotel de Ville",
-    "C0072": "Le Grand Action",
-    "C0099": "MK2 Parnasse",
-    "C0073": "Le Champo",
-    "C0020": "Filmothèque du Quartier Latin",
-    "C0074": "Reflet Medicis",
-    "C0159": "UGC Ciné Cité Les Halles",
-    "C0026": "UGC Ciné Cité Bercy"
-}
+# On charge les variables d'environnement...
+dotenv.load_dotenv(".env")
+# et celles par défaut pour avoir la liste des cinémas
+dotenv.load_dotenv(".env.sample")
+
+WEBSITE_TITLE = os.environ.get("WEBSITE_TITLE", "GrainParisArt")
+MAPBOX_TOKEN = os.environ.get("MAPBOX_TOKEN", "")
+
+theaters_json = json.loads(os.environ.get("THEATERS", "[]"))
 
 theaters: list[Theater] = []
-for id, name in cinemas.items():
+for theater in theaters_json:
     theaters.append(Theater({
-        "name": name,
-        "internalId": id,
+        "name": theater["name"],
+        "internalId": theater["id"],
+        "latitude": theater["latitude"],
+        "longitude": theater["longitude"],
         "location": None
     }))
 
+theater_locations = []
+for theater in theaters:
+    theater_locations.append({
+        "coordinates": [theater.longitude, theater.latitude],
+        "description": theater.name,
+    })
+
 def getShowtimes(date):
     showtimes:list[Showtime] = []
 
@@ -56,7 +61,7 @@ def getShowtimes(date):
                 "seances": {}
             }
 
-            
+
         if theater.name not in data[movie.title]["seances"].keys():
             data[movie.title]["seances"][theater.name] = []
 
@@ -126,7 +131,15 @@ def home():
             "index": i
         })
 
-    return render_template('index.html', page_actuelle='home', films=showtimes[delta], dates=dates)
+    return render_template(
+        'index.html',
+        page_actuelle='home',
+        films=showtimes[delta],
+        dates=dates,
+        theater_locations=theater_locations,
+        website_title=WEBSITE_TITLE,
+        mapbox_token=MAPBOX_TOKEN,
+    )
 
 if __name__ == '__main__':
-    app.run() 
\ No newline at end of file
+    app.run()
\ No newline at end of file
diff --git a/modules/Classes.py b/modules/Classes.py
index b85889d..2dd47d5 100644
--- a/modules/Classes.py
+++ b/modules/Classes.py
@@ -1,6 +1,14 @@
+from dataclasses import dataclass
 from datetime import datetime
 import requests
 
+@dataclass
+class Cinema:
+    id: str
+    name: str
+    latitude: float
+    longitude: float
+
 class Movie:
     def __init__(self, data) -> None:
         self.data = data
@@ -63,6 +71,8 @@ class Theater:
         self.name = data['name']
         self.id = data['internalId']
         self.location = data['location']
+        self.latitude = data['latitude']
+        self.longitude = data['longitude']
 
     def __repr__(self) -> str:
         return f"<{self.__class__.__name__} name={self.name}>"
diff --git a/requirements.txt b/requirements.txt
index 0eb56cd..9a1e985 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,2 +1,3 @@
 Flask
+python-dotenv
 requests
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 72ea9bd..4cd00f0 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -7,13 +7,13 @@
     <link href='https://api.mapbox.com/mapbox-gl-js/v2.8.1/mapbox-gl.css' rel='stylesheet' />
     <script src='https://api.mapbox.com/mapbox-gl-js/v2.8.1/mapbox-gl.js'></script>
     <link rel="shortcut icon" type="image/png" href="static/images/favicon.png"/>
-    <title>grainParisArt</title>
+    <title>{{ website_title }}</title>
     {% block head %} {% endblock %}
 </head>
 
 <header id="headerTop">
     <div class="divHeader">
-        <h1 class="textLogo_header">GrainParisArt</h1>
+        <h1 class="textLogo_header">{{ website_title }}</h1>
         <p>Quand ça va pas, y aura toujours le cinéma</p>
     </div>
 </header>
diff --git a/templates/index.html b/templates/index.html
index 050ffb5..a2e6bc2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -89,7 +89,7 @@
 
 
 <script>
-    mapboxgl.accessToken = '###';
+    mapboxgl.accessToken = {{ mapbox_token | tojson }};
 
     var map = new mapboxgl.Map({
         container: 'map',
@@ -100,22 +100,7 @@
 
     map.addControl(new mapboxgl.NavigationControl());
 
-    var locations = [
-        { coordinates: [2.348973, 48.848363], description: "Écoles Cinéma club" },
-        { coordinates: [2.546596, 48.840113], description: "UGC Ciné Cité Noisy-le-Grand" },
-        { coordinates: [2.343014, 48.849777], description: "UGC Ciné Cité les Halles" },
-        { coordinates: [2.342790, 48.849510], description: "Reflet Medicis" },
-        { coordinates: [2.342790, 48.849510], description: "Fimothèque du quartier Latin" },
-        { coordinates: [2.343223, 48.849980], description: "Le Champo" },
-        { coordinates: [2.330526, 48.842813], description: "MK2 Parnasse" },
-        { coordinates: [2.352129, 48.847530], description: "Le Grand Action" },
-        { coordinates: [2.353602, 48.858676], description: "Luminor Hotel de Ville" },
-        { coordinates: [2.344856, 48.871370], description: "Max Linder Panorama" },
-        { coordinates: [2.342385, 48.847488], description: "Cinéma du Panthéon" },
-        { coordinates: [2.349555, 48.841300], description: "Épée de bois" },
-        { coordinates: [2.375488, 48.832448], description: "MK2 Bibliothèque" },
-        { coordinates: [2.352312, 48.861584], description: "MK2 Beaubourg" }
-    ];
+    var locations = {{ theater_locations | tojson }};
 
     locations.forEach(function (location) {
         var el = document.createElement('div');