diff --git a/js/diagram.js b/js/diagram.js
index c4a3ec4..a6347a8 100644
--- a/js/diagram.js
+++ b/js/diagram.js
@@ -94,33 +94,33 @@ const Diagram = {
         return chords;
     },
 
-    swapGroups: (data, eventIndex, chords, i, j) => {
+    swapGroups: (data, eventKey, chords, i, j) => {
         Diagram.swapGroupArcs(chords, i, j);
-        Matrices.swapIndices(data.tourneys[eventIndex].teams, i, j);
+        Matrices.swapIndices(data.tourneys[eventKey].teams, i, j);
         return chords;
     },
 
-    getCountryName: (data, eventIndex, n) => {
-        const team = data.tourneys[eventIndex].teams[n];
+    getCountryName: (data, eventKey, n) => {
+        const team = data.tourneys[eventKey].teams[n];
         return data.countries[team.cId];
     },
 
-    getPopulation: (data, eventIndex, n) => {
-        const team = data.tourneys[eventIndex].teams[n];
+    getPopulation: (data, eventKey, n) => {
+        const team = data.tourneys[eventKey].teams[n];
         return team.p;
     },
 
-    getGoalsFor: (data, eventIndex, n) => {
-        const team = data.tourneys[eventIndex].teams[n];
+    getGoalsFor: (data, eventKey, n) => {
+        const team = data.tourneys[eventKey].teams[n];
         return team.ga;
     },
 
-    getGoalsAgainst: (data, eventIndex, n) => {
-        const team = data.tourneys[eventIndex].teams[n];
+    getGoalsAgainst: (data, eventKey, n) => {
+        const team = data.tourneys[eventKey].teams[n];
         return team.gf;
     },
 
-    build: (data, eventIndex, matrix) => {
+    build: (data, eventKey, matrix) => {
         const svg = d3.select("svg"),
             width = +svg.attr("width"),
             height = +svg.attr("height"),
@@ -132,14 +132,14 @@ const Diagram = {
             .padAngle(0.05)
             .call(null, matrix);
 
-        const sortedChords = Sorter.sort(chords, 0, chords.groups.length - 1,
-            // Diagram.getCountryName.bind(null, data, eventIndex),
-            // Diagram.getGoalsFor.bind(null, data, eventIndex),
-            Diagram.getGoalsAgainst.bind(null, data, eventIndex),
-            // Diagram.getPopulation.bind(null, data, eventIndex),
-            Diagram.swapGroups.bind(null, data, eventIndex));
+        // const sortedChords = Sorter.sort(chords, 0, chords.groups.length - 1,
+        //     // Diagram.getCountryName.bind(null, data, eventKey),
+        //     // Diagram.getGoalsFor.bind(null, data, eventKey),
+        //     Diagram.getGoalsAgainst.bind(null, data, eventKey),
+        //     // Diagram.getPopulation.bind(null, data, eventKey),
+        //     Diagram.swapGroups.bind(null, data, eventKey));
 
-        // const sortedChords = chords;
+        const sortedChords = chords; // SORTED: "null"
         // let sortedChords = Diagram.swapGroups(data, "1930", chords, 2, 10);
         // sortedChords = Diagram.swapGroups(data, "1930", chords, 2, 8);
         // [ Romania, Belgium, Serbia, France, US, Mexico, Paraguay, Peru, Uruguay, Chile, Bolivia, Brazil, Argentina ]
@@ -192,13 +192,13 @@ const Diagram = {
             .attr("class", "ribbon")
             .append("title")
             .text(function(d) {
-                const t1 = data.tourneys[eventIndex].teams[d.source.index];
-                const t2 = data.tourneys[eventIndex].teams[d.target.index];
+                const t1 = data.tourneys[eventKey].teams[d.source.index];
+                const t2 = data.tourneys[eventKey].teams[d.target.index];
 
                 const c1 = data.countries[t1.cId];
                 const c2 = data.countries[t2.cId];
 
-                const game = data.tourneys[eventIndex].games.find(v => {
+                const game = data.tourneys[eventKey].games.find(v => {
                     return (v.t1 === t1.tId || v.t1 === t2.tId) && (v.t2 === t1.tId || v.t2 === t2.tId);
                 });
 
@@ -223,7 +223,7 @@ const Diagram = {
           .text(function(d) {
               // STRANGE EXTENDED TIME CHILE-BRAZIL (when? not 1930) - FIX BY HAND? IS BECAUE se1 IS SCORE __GOING INTO__ EXTENDED TIME
 
-                const team = data.tourneys[eventIndex].teams[d.index];
+                const team = data.tourneys[eventKey].teams[d.index];
                 const country = data.countries[team.cId];
                 return data.countries[team.cId] + ' ' + team.p;
           });
diff --git a/js/main.js b/js/main.js
index c54d300..7cafc3a 100644
--- a/js/main.js
+++ b/js/main.js
@@ -10,22 +10,76 @@ const fetch = (url) => new Promise((resolve, reject) => {
 });
 
 const main = {
-    generateDiagram: (eventKey) => {
-        const matrix = Matrices.buildMatrix(main.json, eventKey);
-        Diagram.clear();
-        Diagram.build(main.json, eventKey, matrix);
+    changeEvent: (evt) => {
+        let target = evt.target;
+        while (target !== document.body && target.getAttribute(UI.DATA.EVENT) === null) {
+            target = target.parentNode;
+        }
+
+        main.setState({ eventKey: target.getAttribute(UI.DATA.EVENT) });
+        main.updateUI();
+    },
+
+    changeRound: (evt) => {
+        main.setState({ round: evt.year });
+        main.updateUI();
+    },
+
+    changeSort: (evt) => {
+        main.setState({ sort: evt.year });
+        main.updateUI();
     },
 
     generateUI: () => {
-        UI.buildEventsPane();
+        UI.buildEventsPane(main.changeEvent);
+        // UI.buildSortPane(main.changeSort);
+        // UI.buildSortPane(main.changeRound);
+    },
+
+    updateUI: () => {
+        const state = main.getState();
+
+        UI.updateEventsPane(state.eventKey);
+        // UI.updateRounds(state);
+        // UI.updateSort(state);
+
+        const matrix = Matrices.buildMatrix(main.json, state.eventKey);
+        Diagram.clear();
+        Diagram.build(main.json, state.eventKey, matrix);
     },
 
     initJSON: (strData) => {
         main.json = JSON.parse(strData);
     },
+
+    getState: () => {
+        const params = window.location.href.split('?')[1];
+
+        if (!params) {
+            return {};
+        }
+
+        return params.split('&').reduce((acc, v) => {
+            const tmp = v.split('=');
+            acc[tmp[0]] = tmp[1];
+            return acc;
+        }, {});
+    },
+
+    setState: (next) => {
+        const prev = main.getState();
+        const url = window.location.href.split('?')[0];
+
+        const eventKey = next.eventKey || prev.eventKey;
+        const round = next.round || prev.round || null;
+        const sort = next.sort || prev.sort || null;
+
+        history.pushState(null, null, `${url}?eventKey=${eventKey}&sort=${sort}&round=${round}`);
+    },
 }
 
 fetch('worldcup.json')
     .then(main.initJSON)
+    .then(main.setState.call(null, { sort: null, eventKey: "1930" }))
     .then(main.generateUI)
-    .then(main.generateDiagram.bind(null, 1930));
+    .then(main.updateUI);
diff --git a/js/ui.js b/js/ui.js
index 70d3d61..1f3eda2 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -1,5 +1,31 @@
 const UI = {
-    buildEventsPane: () => {
+    CLASSNAMES: {
+        ITEM: 'event-item',
+        YEAR: 'event-year',
+        FLAG: 'event-flag',
+        LOCATION: 'event-location',
+    },
+
+    DATA: {
+        EVENT: 'data-event-key',
+        ROUND: 'data-round-key',
+        SORT: 'data-sort-key',
+    },
+
+    updateEventsPane: (eventKey) => {
+        const events = document.querySelectorAll(`.${UI.CLASSNAMES.ITEM}`);
+        
+        events.forEach(node => {
+            const classes = node.className.split(' ');
+            classes.splice(1, classes.indexOf('active'));
+            node.className = classes.join(' ');
+        });
+
+        const activeEventNode = document.querySelector(`[${UI.DATA.EVENT}="${eventKey}"`);
+        activeEventNode.className += ' active';
+    },
+
+    buildEventsPane: (onClick) => {
         const eventsList = [
             { year: 1930, location: "Uruguay", icon: "uy" },
             { year: 1934, location: "Italy", icon: "it" },
@@ -35,12 +61,13 @@ const UI = {
             const flag = document.createElement('div');
             const flagIcon = document.createElement('div');
 
-            item.className = "event-item";
-            year.className = "event-year";
-            location.className = "event-location";
-            flag.className = "event-flag";
+            item.className = UI.CLASSNAMES.ITEM;
+            year.className = UI.CLASSNAMES.YEAR;
+            location.className = UI.CLASSNAMES.LOCATION;
+            flag.className = UI.CLASSNAMES.FLAG;
 
-            item.addEventListener('click', main.generateDiagram.bind(null, evt.year));
+            item.addEventListener('click', onClick);
+            item.setAttribute('data-event-key', evt.year);
 
             year.innerHTML = evt.year;
             location.innerHTML = evt.location;