diff --git a/mobile/package.json b/mobile/package.json
index de5819d..3be0821 100644
--- a/mobile/package.json
+++ b/mobile/package.json
@@ -2,7 +2,7 @@
   "name": "net.dariogenga.fecharts",
   "displayName": "FE_Charts",
   "version": "1.0.0",
-  "description": "A sample Apache Cordova application that responds to the deviceready event.",
+  "description": "Fire Emblem Charts is a mobile application that allows you to view the statistics of the characters in the game Fire Emblem Three Houses in the form of graphics.",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
diff --git a/mobile/www/index.html b/mobile/www/index.html
index 2e9a254..0049461 100644
--- a/mobile/www/index.html
+++ b/mobile/www/index.html
@@ -91,6 +91,7 @@
 <script src="js/database.js"></script>
 <script src="js/graph.js"></script>
 <script src="js/stats.js"></script>
+<script src="js/comparator.js"></script>
 <script src="js/index.js"></script>
 
 </body>
diff --git a/mobile/www/js/comparator.js b/mobile/www/js/comparator.js
new file mode 100644
index 0000000..6598b03
--- /dev/null
+++ b/mobile/www/js/comparator.js
@@ -0,0 +1,117 @@
+/*
+File name : comparator.js
+Description : Allow the user to compare multiple characters
+ */
+
+const GRAPH_CONTAINER_COMPARATOR_ID = "container-comparator";
+let smartComparator;
+let selectedCharacters = [];
+
+function configureSmartSelectOfCharacters() {
+    const characters = feData.characters;
+    const houses = feData.houses;
+
+    // Create the options of the select
+    houses.forEach(house => {
+        const optgroup = "<optgroup id='optgroup-house-" + house.id + "' label='" + house.name + "'>";
+        $$("#select-compare").append(optgroup);
+    });
+    characters.forEach(char => {
+        const option = "<option id='" + char.id + "'>" + char.firstName + "</option>";
+        $$("#optgroup-house-" + char.idHouse).append(option);
+    });
+
+    // Configure the smartselect
+    smartComparator = app.smartSelect.create({
+        el: '.smart-select',
+    });
+    smartComparator.open();
+
+    smartComparator.on("close", () => {
+        displayComparedCharacters();
+    });
+
+    $$("#btn-compare").on("click", () => {
+        smartComparator.open();
+    });
+}
+
+function displayComparedCharacters() {
+    const selectedCharactersName = smartComparator.getValue();
+
+    selectedCharacters = [];
+    selectedCharactersName.forEach(name => {
+        selectedCharacters.push(feData.characters.find(x => x.firstName == name));
+    });
+
+    $$("#table-comparator-content").empty();
+
+    selectedCharacters.forEach(char => {
+        // Fill the table
+        const tr = $$("<tr>");
+        const tdName = $$("<td>" + char.firstName + "</td>");
+        const tdClass = $$("<td>" + "none" + "</td>");
+        tr.append(tdName);
+        tr.append(tdClass);
+        $$("#table-comparator-content").append(tr);
+    });
+
+    displayCurrentGraph();
+}
+
+function displayCurrentGraph() {
+    if ($$("#btn-graph-column-chart").hasClass("button-active")) {
+        compareWithColumnGraph();
+    } else {
+        compareWithPolarSpider();
+    }
+}
+
+function compareWithColumnGraph() {
+    const statsNames = feData.stats.map(x => x.name);
+    const charactersData = [];
+
+    selectedCharacters.forEach(char => {
+        // Create the graph
+        const statsValues = [];
+        const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == char.id) ? x : null).filter((x) => x != null);
+        const charData = {
+            name: char.firstName,
+            stack: char.id,
+        };
+
+        charGrowthRates.forEach(gr => {
+            statsValues.push(gr.value);
+        });
+        charData.data = statsValues;
+
+        charactersData.push((charData));
+    });
+
+    displayColumnChart(GRAPH_CONTAINER_COMPARATOR_ID, statsNames, charactersData);
+}
+
+function compareWithPolarSpider() {
+    const charactersData = [];
+    const statsNames = feData.stats.map(x => x.name);
+
+
+    selectedCharacters.forEach(char => {
+        const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == char.id) ? x : null).filter((x) => x != null);
+        const statsValues = charGrowthRates.map(x => x.value);
+        const charData = {
+            name: char.firstName,
+            data: statsValues,
+        };
+
+        charactersData.push(charData);
+    });
+
+    displayPolarSpider(GRAPH_CONTAINER_COMPARATOR_ID, statsNames, charactersData);
+}
+
+function switchGraph(event) {
+    $$(".button-active").removeClass("button-active");
+    $$(event.target).addClass("button-active");
+    displayCurrentGraph();
+}
diff --git a/mobile/www/js/graph.js b/mobile/www/js/graph.js
index 73696cd..f81a0b1 100644
--- a/mobile/www/js/graph.js
+++ b/mobile/www/js/graph.js
@@ -3,8 +3,8 @@ File name : graph.js
 Description : Display some graphs according to their settings
  */
 
-function displayColumnChart(categories, data) {
-    Highcharts.chart('container-char-gr', {
+function displayColumnChart(containerId, categories, data) {
+    Highcharts.chart(containerId, {
         chart: {
             type: 'column'
         },
@@ -12,7 +12,7 @@ function displayColumnChart(categories, data) {
             text: ''
         },
         tooltip: {
-            pointFormat: 'Growth Rates: <b>{point.y}%</b>'
+            pointFormat: '{series.name}: <b>{point.y}%</b>'
         },
         xAxis: {
             categories: categories,
@@ -33,8 +33,8 @@ function displayColumnChart(categories, data) {
     });
 }
 
-function displayPolarSpider(categories, data) {
-    Highcharts.chart('container-char-gr', {
+function displayPolarSpider(containerId, categories, series) {
+    Highcharts.chart(containerId, {
         chart: {
             polar: true,
             type: 'line'
@@ -58,15 +58,16 @@ function displayPolarSpider(categories, data) {
             lineWidth: 0,
             min: 0,
         },
+        plotOptions: {
+            series: {
+                pointPlacement: 'on'
+            }
+        },
         tooltip: {
             shared: true,
-            pointFormat: '<span style="color:{series.color}"><b>{point.y}%</b><br/>'
+            pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y}%</b><br/>'
         },
-        series: [{
-            name: 'Growth Rates',
-            data: data,
-            pointPlacement: 'on'
-        }],
+        series: series,
         responsive: {
             rules: [{
                 condition: {
diff --git a/mobile/www/js/index.js b/mobile/www/js/index.js
index 8610932..64672ac 100644
--- a/mobile/www/js/index.js
+++ b/mobile/www/js/index.js
@@ -73,6 +73,9 @@ function displayCharacters() {
                 keys: ['from', 'to'],
             }
         },
+        credits: {
+            enabled: false
+        },
         series: [{
             dataLabels: {
                 enabled: true,
diff --git a/mobile/www/js/routes.js b/mobile/www/js/routes.js
index 50d8ea1..d90cb03 100644
--- a/mobile/www/js/routes.js
+++ b/mobile/www/js/routes.js
@@ -39,7 +39,21 @@ routes = [
     },
     {
         path: '/comparator/',
-        templateUrl: './pages/comparator.html'
+        templateUrl: './pages/comparator.html',
+        on: {
+            pageInit: (e, page) => {
+                $$("#btn-graph-column-chart").on("click", (event) => {
+                    switchGraph(event);
+                });
+                $$("#btn-graph-spider-web").on("click", (event) => {
+                    switchGraph(event);
+                });
+            },
+            // We must use the pageAfterIn event in order to open the smartselect directly
+            pageAfterIn: (e, page) => {
+                configureSmartSelectOfCharacters();
+            }
+        }
     },
     {
         path: '/about/',
diff --git a/mobile/www/js/stats.js b/mobile/www/js/stats.js
index bc9f12c..22a3111 100644
--- a/mobile/www/js/stats.js
+++ b/mobile/www/js/stats.js
@@ -6,6 +6,7 @@ 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";
+const GRAPH_CONTAINER_GR_ID = "container-char-gr";
 let actualCharId;
 
 function createTableOfStats() {
@@ -60,15 +61,19 @@ function displayColumnChartOfGrowthRates(charId) {
     });
     charData.data = statsValues;
 
-    displayColumnChart(statsNames, [charData]); // The data must be an array
+    displayColumnChart(GRAPH_CONTAINER_GR_ID, 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);
+    const charData = [{
+        name: feData.characters.find(x => x.id == charId).firstName,
+        data: statsValues,
+    }];
 
-    displayPolarSpider(statsNames, statsValues);
+    displayPolarSpider(GRAPH_CONTAINER_GR_ID, statsNames, charData);
 }
 
 function displayPieChartOfGrowthRates(charId) {
diff --git a/mobile/www/pages/comparator.html b/mobile/www/pages/comparator.html
index 7371174..3e9c249 100644
--- a/mobile/www/pages/comparator.html
+++ b/mobile/www/pages/comparator.html
@@ -1,19 +1,54 @@
-<div class="view safe-areas">
-    <div class="page">
-        <div class="navbar">
-            <div class="navbar-inner">
-                <div class="left">
-                    <a href="#" class="link icon-only panel-open" data-panel="left">
-                        <i class="icon f7-icons ios-only">menu</i>
-                        <i class="icon material-icons md-only">menu</i>
-                    </a>
-                </div>
-                <div class="title sliding">Fire Emblem Charts</div>
+<div class="page page-comparator">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left">
+                <a href="#" class="link icon-only panel-open" data-panel="left">
+                    <i class="icon f7-icons ios-only">menu</i>
+                    <i class="icon material-icons md-only">menu</i>
+                </a>
             </div>
+            <div class="title sliding">Comparator</div>
         </div>
-        <div class="page-content">
-            <div class="block block-strong">
-                <p>Comparator page</p>
+    </div>
+    <div class="page-content">
+        <div class="card data-table data-table-collapsible data-table-init">
+            <table id="table-comparator">
+                <thead id="table-comparator-header">
+                <tr>
+                    <th>Character</th>
+                    <th>Class</th>
+                </tr>
+                </thead>
+                <tbody id="table-comparator-content">
+                </tbody>
+            </table>
+            <button id="btn-compare" class="button button-fill">Compare</button>
+            <a class="item-link smart-select smart-select-init" data-open-in="popup"  data-searchbar="true" data-searchbar-placeholder="Search a character...">
+                <select id="select-compare" multiple maxlength="8">
+                </select>
+                <div class="item-content" hidden>
+                    <div class="item-inner">
+                        <div class="item-title">Comparator</div>
+                    </div>
+                </div>
+            </a>
+        </div>
+        <div class="list no-hairlines-md">
+            <ul>
+                <li class="item-content item-input">
+                    <div class="item-media">
+                        <i class="icon demo-list-icon"></i>
+                    </div>
+                </li>
+            </ul>
+            <figure class="highcharts-figure">
+                <div id="container-comparator"></div>
+            </figure>
+            <div class="block">
+                <p class="segmented segmented-raised segmented-round">
+                    <button id="btn-graph-column-chart" class="button button-round button-active">Column chart</button>
+                    <button id="btn-graph-spider-web" class="button button-round">Spider web</button>
+                </p>
             </div>
         </div>
     </div>