diff --git a/index.html b/index.html
index 6354310..00e3b52 100644
--- a/index.html
+++ b/index.html
@@ -72,6 +72,7 @@ body {
 
         <h5>TODO</h5>
         fix setState to not remove everything
+        fix jumping when show/hide round
         1974 two germanies?
         embiggen current event flag
         move styling out of index.html
diff --git a/js/main.js b/js/main.js
index d523454..a239dc7 100644
--- a/js/main.js
+++ b/js/main.js
@@ -10,44 +10,28 @@ const fetch = (url) => new Promise((resolve, reject) => {
 });
 
 const main = {
-    SORT_TYPES: {
-        GOALS: 'goals',
-        COUNTRY: 'country',
-        POPULATION: 'population',
-    },
-
-    ROUND_TYPES: {
-        PRELIM: 'prelims',
-        ROUNDOF16: 'round-of-16',
-        QUARTERFINAL: 'quarterfinals',
-        SEMIFINAL: 'semifinals',
-        CONSOLATION: 'consolation',
-        FINAL: 'finals',
-    },
-
     changeEvent: (e) => {
         const target = UI.findRoot(e.target);
         main.setState({ eventKey: target.getAttribute(UI.DATA.EVENT) });
         main.updateUI();
     },
 
+    changeSort: (e) => {
+        const target = UI.findRoot(e.target);
+        main.setState({ sort: target.getAttribute(UI.DATA.SORT) });
+        main.updateUI();
+    },
+
     changeRound: (e) => {
-        const state = main.getState();
         const target = UI.findRoot(e.target);
-        const rounds = state.rounds ? state.rounds.split(',') : [];
         const r = target.getAttribute(UI.DATA.ROUND)
-        const i = rounds.indexOf(r);
-
-        (i === -1) ? rounds.push(r) : rounds.splice(i, 1);
-        UI.toggleRoundRibbons(rounds, main.ROUND_TYPES, main.json.rounds);
 
-        UI.toggleRoundItem(target);
-        main.setState({ rounds });
-    },
+        const state = main.getState();
+        const roundsToShow = state.rounds ? state.rounds.split(',') : [];
+        const i = roundsToShow.indexOf(r);
+        (i === -1) ? roundsToShow.push(r) : roundsToShow.splice(i, 1);
 
-    changeSort: (e) => {
-        const target = UI.findRoot(e.target);
-        main.setState({ sort: target.getAttribute(UI.DATA.SORT) });
+        main.setState({ rounds: roundsToShow });
         main.updateUI();
     },
 
@@ -73,19 +57,20 @@ const main = {
         const state = main.getState();
 
         UI.buildEventsPane(main.changeEvent);
-        UI.buildSortPane(main.changeSort, main.SORT_TYPES);
-        UI.buildRoundsPane(main.changeRound, main.ROUND_TYPES);
+        UI.buildSortPane(main.changeSort);
+        UI.buildRoundsPane(main.changeRound);
     },
 
     updateUI: () => {
         const state = main.getState();
 
-        UI.updateEventsPane(state.eventKey);
-        UI.updateSortPane(state.sort);
-
         const matrix = Matrices.buildMatrix(main.json, state.eventKey);
         Diagram.clear();
-        Diagram.build(main.json, state.eventKey, state.sort, main.SORT_TYPES, matrix);
+        Diagram.build(main.json, state.eventKey, state.sort, UI.SORT_TYPES, matrix);
+
+        UI.updateEventsPane(state.eventKey);
+        UI.updateSortPane(state.sort);
+        UI.updateRoundsPane(state.rounds.split(','), main.json.rounds);
     },
 
     initJSON: (strData) => {
@@ -118,7 +103,7 @@ const main = {
         }
 
         if (state.rounds === undefined) {
-            state.rounds = Object.values(main.ROUND_TYPES);
+            state.rounds = Object.values(UI.ROUND_TYPES);
         }
 
         main.setState(state);
diff --git a/js/ui.js b/js/ui.js
index 843fff3..24613c8 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -19,6 +19,21 @@ const UI = {
         },
     },
 
+    SORT_TYPES: {
+        GOALS: 'goals',
+        COUNTRY: 'country',
+        POPULATION: 'population',
+    },
+
+    ROUND_TYPES: {
+        PRELIM: 'prelims',
+        ROUNDOF16: 'round-of-16',
+        QUARTERFINAL: 'quarterfinals',
+        SEMIFINAL: 'semifinals',
+        CONSOLATION: 'consolation',
+        FINAL: 'finals',
+    },
+
     DATA: {
         ROOT: 'data-root',
         EVENT: 'data-event-key',
@@ -47,16 +62,33 @@ const UI = {
         });
     },
 
-    toggleRoundItem: (target) => {
-        const hide = target.querySelector(`.${UI.CLASSNAMES.ROUND.HIDE}`);
-        hide.innerHTML = (hide.innerHTML === UI.I18N.HIDE ? UI.I18N.SHOW : UI.I18N.HIDE);
+    updateEventsPane: (eventKey) => {
+        const eventItems = document.querySelectorAll(`.${UI.CLASSNAMES.EVENT.ITEM}`);
+        UI.clearActive(eventItems);
+
+        const activeEventNode = document.querySelector(`[${UI.DATA.EVENT}="${eventKey}"`);
+        activeEventNode.className += ' active';
     },
 
-    toggleRoundRibbons: (roundsToShow, ROUND_TYPES, allRounds) => {
+    updateRoundsPane: (roundsToShow, allRounds) => {
+        const roundsItems = document.querySelectorAll(`.${UI.CLASSNAMES.ROUND.ITEM}`);
+        UI.clearActive(roundsItems);
+
+        roundsItems.forEach(item => {
+            const type = item.getAttribute(UI.DATA.ROUND);
+
+            const hide = item.querySelector(`.${UI.CLASSNAMES.ROUND.HIDE}`);
+            hide.innerHTML = (hide.innerHTML === UI.I18N.HIDE ? UI.I18N.SHOW : UI.I18N.HIDE);
+
+            if (roundsToShow.indexOf(type) > -1) {
+                item.className += ' active';
+            }
+        });
+
         const ribbons = document.querySelectorAll('.ribbon');
         ribbons.forEach(ribbon => {
             const name = allRounds[ribbon.getAttribute("data-round-id")];
-            const type = UI.getRoundType(name, ROUND_TYPES);
+            const type = UI.getRoundType(name);
 
             roundsToShow.indexOf(type) === -1
                 ? ribbon.style.display = 'none'
@@ -64,18 +96,6 @@ const UI = {
         });
     },
 
-    updateEventsPane: (eventKey) => {
-        const eventItems = document.querySelectorAll(`.${UI.CLASSNAMES.EVENT.ITEM}`);
-        UI.clearActive(eventItems);
-
-        const activeEventNode = document.querySelector(`[${UI.DATA.EVENT}="${eventKey}"`);
-        activeEventNode.className += ' active';
-    },
-
-    updateRoundsPane: (rounds) => {
-        const roundsDiv = document.querySelector('.rounds');
-    },
-
     updateSortPane: (sort) => {
         const sortItems = document.querySelectorAll('.sort-item');
         UI.clearActive(sortItems);
@@ -146,12 +166,12 @@ const UI = {
         });
     },
 
-    buildSortPane: (onClick, SORT_TYPES) => {
+    buildSortPane: (onClick) => {
         const sortList = [
             { text: 'Order by continent', value: null },
-            { text: 'Order by goals scored', value: SORT_TYPES.GOALS },
-            { text: 'Order by country name', value: SORT_TYPES.COUNTRY },
-            { text: 'Order by country population', value: SORT_TYPES.POPULATION },
+            { text: 'Order by goals scored', value: UI.SORT_TYPES.GOALS },
+            { text: 'Order by country name', value: UI.SORT_TYPES.COUNTRY },
+            { text: 'Order by country population', value: UI.SORT_TYPES.POPULATION },
         ];
 
         const sortDiv = document.querySelector('.sort');
@@ -177,14 +197,14 @@ const UI = {
         });
     },
 
-    buildRoundsPane: (onClick, ROUND_TYPES) => {
+    buildRoundsPane: (onClick) => {
         const roundsList = [
-            { text: 'Preliminaries', value: ROUND_TYPES.PRELIM },
-            { text: 'Round of 16', value: ROUND_TYPES.ROUNDOF16 },
-            { text: 'Quarterfinals', value: ROUND_TYPES.QUARTERFINAL },
-            { text: 'Semifinals', value: ROUND_TYPES.SEMIFINAL },
-            { text: 'Consolation', value: ROUND_TYPES.CONSOLATION },
-            { text: 'Final', value: ROUND_TYPES.FINAL },
+            { text: 'Preliminaries', value: UI.ROUND_TYPES.PRELIM },
+            { text: 'Round of 16', value: UI.ROUND_TYPES.ROUNDOF16 },
+            { text: 'Quarterfinals', value: UI.ROUND_TYPES.QUARTERFINAL },
+            { text: 'Semifinals', value: UI.ROUND_TYPES.SEMIFINAL },
+            { text: 'Consolation', value: UI.ROUND_TYPES.CONSOLATION },
+            { text: 'Final', value: UI.ROUND_TYPES.FINAL },
         ];
 
         const roundsDiv = document.querySelector('.rounds');
@@ -214,7 +234,7 @@ const UI = {
         });
     },
 
-    getRoundType: (name, ROUND_TYPES) => {
+    getRoundType: (name) => {
         const name2 = name.match(/^Matchday/) ? 'First round' : name;
 
         switch (name2) {
@@ -225,25 +245,25 @@ const UI = {
             case 'Group-2 Play-off':
             case 'Group-3 Play-off':
             case 'Group-4 Play-off':
-                return ROUND_TYPES.PRELIM;
+                return UI.ROUND_TYPES.PRELIM;
             case 'Round of 16':
-                return ROUND_TYPES.ROUNDOF16;
+                return UI.ROUND_TYPES.ROUNDOF16;
             case 'Third place match':
             case 'Third-place match':
             case 'Match for third place':
             case 'Third place play-off':
             case 'Third-place play-off':
-                return ROUND_TYPES.CONSOLATION;
+                return UI.ROUND_TYPES.CONSOLATION;
             case 'Quarterfinals':
             case 'Quarter-finals':
             case 'Quarter-finals replays':
-                return ROUND_TYPES.QUARTERFINAL;
+                return UI.ROUND_TYPES.QUARTERFINAL;
             case 'Semifinals':
             case 'Semi-finals':
-                return ROUND_TYPES.SEMIFINAL;
+                return UI.ROUND_TYPES.SEMIFINAL;
             case 'Final':
             case 'Finals':
-                return ROUND_TYPES.FINAL;
+                return UI.ROUND_TYPES.FINAL;
         }
 
         console.error(`Unknown round name: ${name}`);
diff --git a/res/rounds.css b/res/rounds.css
index a46f29f..85e7e88 100644
--- a/res/rounds.css
+++ b/res/rounds.css
@@ -12,9 +12,14 @@
     cursor: pointer;
     font-size: 13px;
     line-height: 34px;
+    opacity: 0.2;
     padding: 0 10px;
 }
 
+.round-item.active {
+    opacity: 1;
+}
+
 .round-item:hover {
     background: yellow;
 }