diff --git a/src/lib.rs b/src/lib.rs
index 47a26c6..9df9a19 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -7,7 +7,7 @@ use std::io::Read;
 
 #[derive(Serialize, Deserialize)]
 /// The data contained from the json file generated by python.
-pub struct Data {
+pub struct JsonData {
     /// The names of the IAs.
     pub ias: Vec<String>,
 
@@ -15,9 +15,9 @@ pub struct Data {
     pub battles: HashMap<String, f64>,
 }
 
-impl Data {
+impl JsonData {
     /// Creates some test data.
-    pub fn test() -> Data {
+    pub fn test() -> JsonData {
 
         // Open the file
         let mut file = File::open("./assets/test.json")
@@ -30,15 +30,95 @@ impl Data {
         serde_json::from_str(&content)
             .expect("Couldn't parse json")
     }
+}
 
-    /// Returns the result for a certain battle.
-    pub fn get(&self, ia1: &str, ia2: &str) -> Option<f64> {
-        if let Some(value) = self.battles.get(&format!("{}/{}", ia1, ia2)) {
-            Some(*value)
-        } else if let Some(value) = self.battles.get(&format!("{}/{}", ia2, ia1)) {
-            Some(1.0 - *value)
-        } else {
-            None
+#[derive(Serialize, Deserialize, Clone)]
+/// An IA.
+pub struct Ia {
+    /// The name of the ia.
+    pub name: String,
+
+    /// The number of battles won by the ia.
+    pub victory_count: usize,
+
+    /// The number of battles lost by the ia.
+    pub defeat_count: usize,
+}
+
+#[derive(Serialize, Deserialize)]
+pub struct Data {
+    /// The IAs
+    pub ias: Vec<Ia>,
+
+    /// The battles.
+    ///
+    /// This hashmap is symmetric.
+    pub battles: HashMap<String, f64>,
+
+    /// The ias sorted by victory count.
+    pub sorted_ias: Vec<Ia>,
+}
+
+impl Data {
+    /// Creates some test data.
+    pub fn test() -> Data {
+        JsonData::test().into()
+    }
+}
+
+impl From<JsonData> for Data {
+    fn from(d: JsonData) -> Data {
+        let mut ias = vec![];
+
+        for ia in d.ias {
+            ias.push(Ia {
+                name: ia,
+                victory_count: 0,
+                defeat_count: 0,
+            })
+        }
+
+        let mut battles = HashMap::new();
+
+        for (key, val) in d.battles {
+
+            let playing_ias = key.split("/")
+                .collect::<Vec<_>>();
+
+            let key1 = format!("{}/{}", playing_ias[0], playing_ias[1]);
+            let key2 = format!("{}/{}", playing_ias[1], playing_ias[0]);
+
+            battles.insert(key1, val);
+            battles.insert(key2, val);
+
+            if val != 0.5 {
+                let (winner, loser) = if val > 0.5 {
+                    (playing_ias[0], playing_ias[1])
+                } else {
+                    (playing_ias[1], playing_ias[0])
+                };
+
+                for ia in &mut ias {
+                    if ia.name == winner {
+                        ia.victory_count += 1;
+                    }
+
+                    if ia.name == loser {
+                        ia.defeat_count += 1;
+                    }
+                }
+            }
+        }
+
+        let mut sorted_ias = ias.clone();
+        sorted_ias.sort_by_key(|ia| {
+            (std::usize::MAX - ia.victory_count, ia.defeat_count)
+        });
+
+        Data {
+            ias,
+            sorted_ias,
+            battles,
         }
     }
 }
diff --git a/templates/base.html.tera b/templates/base.html.tera
index 5cb65a9..71cde33 100644
--- a/templates/base.html.tera
+++ b/templates/base.html.tera
@@ -29,7 +29,7 @@
                 </div>
             </div>
         </nav>
-        {% block content %}{% endblock content %}
+        {% block content %}{% endblock %}
         <script>
             document.addEventListener('DOMContentLoaded', () => {
               const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
@@ -45,5 +45,6 @@
               }
             });
         </script>
+        {% block extrajs %}{% endblock %}
     </body>
 </html>
diff --git a/templates/index.html.tera b/templates/index.html.tera
index 23cdbad..1a5bcdd 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -2,10 +2,55 @@
 {% block content %}
 <section class="section">
     <div class="container">
-        <h1 class="title is-1">Welcome to Pytron</h1>
-        {% for ia in ias %}
-            <h5>{{ ia }}</h5>
-        {% endfor %}
+        <div class="columns is-centered">
+            <div class="column is-narrow is-desktop">
+                <table class="table is-bordered is-striped is-narrow is-hoverable">
+                    <tr>
+                        <th></th>
+                        {% for ia in ias %}
+                            <th class="has-text-centered">{{ ia.name }}</th>
+                        {% endfor %}
+                        <th class="has-text-success has-text-centered">✓</th>
+                        <th class="has-text-danger has-text-centered">✗</th>
+                    </tr>
+
+                    {% for ia1 in ias %}
+                        <tr>
+                            <th class="has-text-centered">{{ ia1.name }}</th>
+                            {% for ia2 in ias %}
+                                {% if ia1.name == ia2.name %}
+                                    <td></td>
+                                {% else %}
+                                    {% set key = ia1.name ~ "/" ~ ia2.name %}
+                                    {% set value = battles | get(key=key) %}
+                                    {% if value > 0.5 %}
+                                        <td class="has-text-success">{{ value }}</td>
+                                    {% elif value < 0.5 %}
+                                        <td class="has-text-danger">{{ value }}</td>
+                                    {% else %}
+                                        <td>{{ value }}</td>
+                                    {% endif %}
+                                    {% endif %}
+                            {% endfor %}
+                            <td class="has-text-centered"><strong>{{ ia1.victory_count }}</strong></td>
+                            <td class="has-text-centered"><strong>{{ ia1.defeat_count }}</strong></td>
+                        </tr>
+                    {% endfor %}
+                </table>
+             </div>
+            <div class="column is-narrow">
+                <table class="table is-bordered is-striped is-narrow is-hoverable">
+                    <tr><th class="has-text-centered">AI</th><th>Score</th></tr>
+                    {% for ia in sorted_ias %}
+                        <tr>
+                            <td class="has-text-centered"><strong>{{ ia.name }}</strong></td>
+                            <td class="has-text-centered">{{ ia.victory_count - ia.defeat_count }}</td>
+                        </tr>
+                    {% endfor %}
+                </table>
+            </div>
+        </div>
     </div>
 </section>
 {% endblock %}
+