diff --git a/mobile/www/index.html b/mobile/www/index.html
index 13c73a9..2e9a254 100644
--- a/mobile/www/index.html
+++ b/mobile/www/index.html
@@ -88,6 +88,9 @@
 
 <!-- Your custom app scripts -->
 <script src="js/app.js"></script>
+<script src="js/database.js"></script>
+<script src="js/graph.js"></script>
+<script src="js/stats.js"></script>
 <script src="js/index.js"></script>
 
 </body>
diff --git a/mobile/www/js/database.js b/mobile/www/js/database.js
new file mode 100644
index 0000000..2f546b8
--- /dev/null
+++ b/mobile/www/js/database.js
@@ -0,0 +1,57 @@
+/*
+File name : database.js
+Description : Communicates with the server to ensure that the data is up to date.
+ */
+
+const BASE_URL = "http://localhost:3000/";
+let feData = JSON.parse(localStorage.getItem("feData"));
+
+if (feData != null) {
+    fetch(BASE_URL + "update", {
+        method: "POST",
+        body: JSON.stringify({version: feData.version}),
+        headers: {
+            'Content-Type': 'application/json'
+        },
+    })
+        .then(res => {
+            if (res.ok) {
+                return res.json();
+            } else {
+                console.log(res);
+            }
+        })
+        .then(data => {
+            updateData(data);
+        })
+        .catch(err => {
+            console.log(err);
+        });
+} else {
+    // Import the data if none was found
+    fetch(BASE_URL + "all")
+        .then(res => {
+            if (res.ok) {
+                return res.json();
+            } else {
+                console.log(res);
+            }
+        })
+        .then(data => {
+            updateData(data);
+        })
+        .catch(err => {
+            console.log(err);
+        });
+}
+
+function updateData(data) {
+    // If the data received from the server are not empty then we can save them in the local storage
+    if (Object.keys(data).length > 0) {
+        localStorage.setItem("feData", JSON.stringify(data));
+        feData = data;
+    }
+
+    // End of the update process, we can now display the data
+    displayCharacters();
+}
\ No newline at end of file
diff --git a/mobile/www/js/graph.js b/mobile/www/js/graph.js
new file mode 100644
index 0000000..73696cd
--- /dev/null
+++ b/mobile/www/js/graph.js
@@ -0,0 +1,118 @@
+/*
+File name : graph.js
+Description : Display some graphs according to their settings
+ */
+
+function displayColumnChart(categories, data) {
+    Highcharts.chart('container-char-gr', {
+        chart: {
+            type: 'column'
+        },
+        title: {
+            text: ''
+        },
+        tooltip: {
+            pointFormat: 'Growth Rates: <b>{point.y}%</b>'
+        },
+        xAxis: {
+            categories: categories,
+        },
+        credits: {
+            enabled: false
+        },
+        plotOptions: {
+            column: {
+                stacking: 'normal',
+                dataLabels: {
+                    enabled: true,
+                    format: '{point.y}%'
+                }
+            }
+        },
+        series: data,
+    });
+}
+
+function displayPolarSpider(categories, data) {
+    Highcharts.chart('container-char-gr', {
+        chart: {
+            polar: true,
+            type: 'line'
+        },
+        title: {
+            text: '',
+        },
+        pane: {
+            size: '100%'
+        },
+        credits: {
+            enabled: false
+        },
+        xAxis: {
+            categories: categories,
+            tickmarkPlacement: 'on',
+            lineWidth: 0,
+        },
+        yAxis: {
+            gridLineInterpolation: 'polygon',
+            lineWidth: 0,
+            min: 0,
+        },
+        tooltip: {
+            shared: true,
+            pointFormat: '<span style="color:{series.color}"><b>{point.y}%</b><br/>'
+        },
+        series: [{
+            name: 'Growth Rates',
+            data: data,
+            pointPlacement: 'on'
+        }],
+        responsive: {
+            rules: [{
+                condition: {
+                    maxWidth: 800
+                },
+                chartOptions: {
+                    pane: {
+                        size: '50%'
+                    }
+                }
+            }]
+        }
+    });
+}
+
+function displayPieChart(data) {
+    Highcharts.chart('container-char-gr', {
+        chart: {
+            plotBackgroundColor: null,
+            plotBorderWidth: null,
+            plotShadow: false,
+            type: 'pie'
+        },
+        title: {
+            text: ''
+        },
+        tooltip: {
+            pointFormat: '{series.name}: <b>{point.y}%</b>'
+        },
+        credits: {
+            enabled: false
+        },
+        plotOptions: {
+            pie: {
+                allowPointSelect: true,
+                cursor: 'pointer',
+                dataLabels: {
+                    enabled: true,
+                    format: '<b>{point.name}</b>: {point.y}%'
+                },
+            }
+        },
+        series: [{
+            name: 'Growth Rates',
+            colorByPoint: true,
+            data: data,
+        }]
+    });
+}
\ No newline at end of file
diff --git a/mobile/www/js/index.js b/mobile/www/js/index.js
index 41810ca..8610932 100644
--- a/mobile/www/js/index.js
+++ b/mobile/www/js/index.js
@@ -1,57 +1,9 @@
-const BASE_URL = "http://localhost:3000/";
+/*
+File name : index.js
+Description : Display the content of the home page
+ */
+
 const PRIMARY_NODE_NAME = "Fire Emblem Three House";
-const GRAPH_PIE_CHART_VALUE = "pie-chart";
-const GRAPH_SPIDER_WEB_VALUE = "spider-web";
-const GRAPH_COLUMN_CHART_VALUE = "column-chart";
-let actualCharId;
-
-let feData = JSON.parse(localStorage.getItem("feData"));
-
-function updateData(data) {
-    if (Object.keys(data).length > 0) {
-        localStorage.setItem("feData", JSON.stringify(data));
-        feData = data;
-    }
-    displayCharacters();
-}
-
-if (feData != null) {
-    fetch(BASE_URL + "update", {
-        method: "POST",
-        body: JSON.stringify({version: feData.version}),
-        headers: {
-            'Content-Type': 'application/json'
-        },
-    })
-        .then(res => {
-            if (res.ok) {
-                return res.json();
-            } else {
-                console.log(res);
-            }
-        })
-        .then(data => {
-            updateData(data);
-        })
-        .catch(err => {
-            console.log(err);
-        });
-} else {
-    fetch(BASE_URL + "all")
-        .then(res => {
-            if (res.ok) {
-                return res.json();
-            } else {
-                console.log(res);
-            }
-        })
-        .then(data => {
-            updateData(data);
-        })
-        .catch(err => {
-            console.log(err);
-        });
-}
 
 function displayCharacters() {
     const housesWithCharacters = [];
@@ -139,189 +91,4 @@ function displayCharacters() {
             }
         }]
     });
-
 }
-
-function createTableOfStats() {
-    const stats = feData.stats;
-    stats.forEach(stat => {
-        const th = $$(`<th>${stat.shortName}</th>`);
-        const td = $$(`<td id="stat-${stat.id}"></td>`);
-        $$("#table-gr-header").append(th);
-        $$("#table-gr-content").append(td);
-    });
-}
-
-function displayTableOfGrowthRates() {
-    const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == actualCharId) ? x : null).filter((x) => x != null);
-
-    charGrowthRates.forEach(gr => {
-        $$("#stat-" + gr.idStat).text(gr.value);
-    });
-
-    displayGraphOfGrowthRates();
-}
-
-function displayGraphOfGrowthRates() {
-    const selectedGraph = $$("#select-graph").val();
-
-    switch (selectedGraph) {
-        case GRAPH_SPIDER_WEB_VALUE:
-            displayPolarSpiderOfGrowthRates(actualCharId);
-            break;
-        case GRAPH_PIE_CHART_VALUE:
-            displayPieChartOfGrowthRates(actualCharId);
-            break;
-        case GRAPH_COLUMN_CHART_VALUE:
-        default:
-            displayColumnChartOfGrowthRates(actualCharId);
-            // Column chart graph by default
-            break;
-    }
-}
-
-function displayPolarSpiderOfGrowthRates(charId) {
-    const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == charId) ? x : null).filter((x) => x != null);
-    const statsNames = feData.stats.map(x => x.name);
-    const statsValues = charGrowthRates.map(x => x.value);
-
-    Highcharts.chart('container-char-gr', {
-        chart: {
-            polar: true,
-            type: 'line'
-        },
-        title: {
-            text: '',
-        },
-        pane: {
-            size: '100%'
-        },
-        credits: {
-            enabled: false
-        },
-        xAxis: {
-            categories: statsNames,
-            tickmarkPlacement: 'on',
-            lineWidth: 0,
-        },
-        yAxis: {
-            gridLineInterpolation: 'polygon',
-            lineWidth: 0,
-            min: 0,
-        },
-        tooltip: {
-            shared: true,
-            pointFormat: '<span style="color:{series.color}"><b>{point.y}%</b><br/>'
-        },
-        series: [{
-            name: 'Growth Rates',
-            data: statsValues,
-            pointPlacement: 'on'
-        }],
-        responsive: {
-            rules: [{
-                condition: {
-                    maxWidth: 800
-                },
-                chartOptions: {
-                    pane: {
-                        size: '50%'
-                    }
-                }
-            }]
-        }
-
-    });
-}
-
-function displayPieChartOfGrowthRates(charId) {
-    const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == charId) ? x : null).filter((x) => x != null);
-    const statsValues = [];
-
-    charGrowthRates.forEach(gr => {
-        const nameStat = feData.stats.find(x => x.id == gr.idStat).name;
-        const statWithValue = {
-            name: nameStat,
-            y: gr.value,
-        };
-        statsValues.push(statWithValue);
-    });
-
-
-    Highcharts.chart('container-char-gr', {
-        chart: {
-            plotBackgroundColor: null,
-            plotBorderWidth: null,
-            plotShadow: false,
-            type: 'pie'
-        },
-        title: {
-            text: ''
-        },
-        tooltip: {
-            pointFormat: '{series.name}: <b>{point.y}%</b>'
-        },
-        credits: {
-            enabled: false
-        },
-        plotOptions: {
-            pie: {
-                allowPointSelect: true,
-                cursor: 'pointer',
-                dataLabels: {
-                    enabled: true,
-                    format: '<b>{point.name}</b>: {point.y}%'
-                },
-            }
-        },
-        series: [{
-            name: 'Growth Rates',
-            colorByPoint: true,
-            data: statsValues,
-        }]
-    });
-
-}
-
-function displayColumnChartOfGrowthRates(charId) {
-    const charFirstName = feData.characters.find(x => x.id == charId).firstName;
-    const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == charId) ? x : null).filter((x) => x != null);
-    const statsNames = feData.stats.map(x => x.name);
-    const statsValues = [];
-    const charData = {
-        name: charFirstName,
-    };
-
-    charGrowthRates.forEach(gr => {
-        statsValues.push(gr.value);
-    });
-    charData.data = statsValues;
-
-    Highcharts.chart('container-char-gr', {
-        chart: {
-            type: 'column'
-        },
-        title: {
-            text: ''
-        },
-        tooltip: {
-            pointFormat: 'Growth Rates: <b>{point.y}%</b>'
-        },
-        xAxis: {
-            categories: statsNames
-        },
-        credits: {
-            enabled: false
-        },
-        plotOptions: {
-            column: {
-                stacking: 'normal',
-                dataLabels: {
-                    enabled: true,
-                    format: '{point.y}%'
-                }
-            }
-        },
-        series: [charData],
-    });
-}
\ No newline at end of file
diff --git a/mobile/www/js/stats.js b/mobile/www/js/stats.js
new file mode 100644
index 0000000..bc9f12c
--- /dev/null
+++ b/mobile/www/js/stats.js
@@ -0,0 +1,88 @@
+/*
+File name : stats.js
+Description : Display the stats of a character and/or class with various graphs
+ */
+
+const GRAPH_PIE_CHART_VALUE = "pie-chart";
+const GRAPH_SPIDER_WEB_VALUE = "spider-web";
+const GRAPH_COLUMN_CHART_VALUE = "column-chart";
+let actualCharId;
+
+function createTableOfStats() {
+    const stats = feData.stats;
+    stats.forEach(stat => {
+        const th = $$(`<th>${stat.shortName}</th>`);
+        const td = $$(`<td id="stat-${stat.id}"></td>`);
+        $$("#table-gr-header").append(th);
+        $$("#table-gr-content").append(td);
+    });
+}
+
+function displayTableOfGrowthRates() {
+    const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == actualCharId) ? x : null).filter((x) => x != null);
+
+    charGrowthRates.forEach(gr => {
+        $$("#stat-" + gr.idStat).text(gr.value);
+    });
+
+    displayGraphOfGrowthRates();
+}
+
+function displayGraphOfGrowthRates() {
+    const selectedGraph = $$("#select-graph").val();
+
+    switch (selectedGraph) {
+        case GRAPH_SPIDER_WEB_VALUE:
+            displayPolarSpiderOfGrowthRates(actualCharId);
+            break;
+        case GRAPH_PIE_CHART_VALUE:
+            displayPieChartOfGrowthRates(actualCharId);
+            break;
+        case GRAPH_COLUMN_CHART_VALUE:
+        default:
+            displayColumnChartOfGrowthRates(actualCharId);
+            // Column chart graph by default
+            break;
+    }
+}
+
+function displayColumnChartOfGrowthRates(charId) {
+    const charFirstName = feData.characters.find(x => x.id == charId).firstName;
+    const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == charId) ? x : null).filter((x) => x != null);
+    const statsNames = feData.stats.map(x => x.name);
+    const statsValues = [];
+    const charData = {
+        name: charFirstName,
+    };
+
+    charGrowthRates.forEach(gr => {
+        statsValues.push(gr.value);
+    });
+    charData.data = statsValues;
+
+    displayColumnChart(statsNames, [charData]); // The data must be an array
+}
+
+function displayPolarSpiderOfGrowthRates(charId) {
+    const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == charId) ? x : null).filter((x) => x != null);
+    const statsNames = feData.stats.map(x => x.name);
+    const statsValues = charGrowthRates.map(x => x.value);
+
+    displayPolarSpider(statsNames, statsValues);
+}
+
+function displayPieChartOfGrowthRates(charId) {
+    const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == charId) ? x : null).filter((x) => x != null);
+    const statsValues = [];
+
+    charGrowthRates.forEach(gr => {
+        const nameStat = feData.stats.find(x => x.id == gr.idStat).name;
+        const statWithValue = {
+            name: nameStat,
+            y: gr.value,
+        };
+        statsValues.push(statWithValue);
+    });
+
+    displayPieChart(statsValues);
+}
\ No newline at end of file