diff --git a/css/events.scss b/css/events.scss
index 6c6de29..5f95367 100644
--- a/css/events.scss
+++ b/css/events.scss
@@ -1,5 +1,9 @@
+$eventItemP: 4px;
+$eventItemM: 1px;
+$eventItemH: 30px;
+$eventItemW: 40px;
+
 .events {
-    background: rgba(250, 200, 200, 0.1);
     bottom: 0;
     font-size: 0;
     left: 0;
@@ -8,53 +12,43 @@
 }
 
 .event-item {
-    background: #777;
-    border-color: #fff;
-    border-radius: 0 16px 16px 0;
-    border-style: solid;
-    border-width: 1px 0;
     cursor: pointer;
     display: inline-block;
-    filter: grayscale(100%);
-    height: 24px;
-    margin-bottom: 4px;
-    opacity: 0.2;
-    padding: 4px;
+    // filter: grayscale(100%);
+    height: $eventItemH + 2 * $eventItemP;
+    // opacity: 0.2;
+    margin: $eventItemM;
+    overflow: hidden;
+    padding: $eventItemP;
     position: relative;
     vertical-align: baseline;
-    width: 50px;
+    width: $eventItemW + 2 * $eventItemP;
 }
 
-.event-item.active,
-.event-item.active:hover {
-    background: #fdfdfd;
-    border-color: #aaa;
-    filter: grayscale(0%);
-    opacity: 1;
+.event-year {
+    background: #fff;
+    border: 1px solid #d5d5d5;
+    font-size: 13px;
+    height: 30px;
+    left: $eventItemP;
+    line-height: 30px;
+    position: absolute;
+    top: $eventItemP;
+    transition: top 0.1s linear;
+    width: $eventItemW;
+    z-index: 1;
 }
 
-.event-item:hover {
-    filter: grayscale(0%);
-    opacity: 0.8;
+.event-flag {
+    font-size: $eventItemH;
+    z-index: 0;
 }
 
-// .event-flag {
-//     font-size: 0;
-//     left: 4px;
-//     position: absolute;
-//     top: 4px;
-// }
-//
-// .event-flag .flag-icon {
-//     font-size: 24px;
-// }
+.event-item:hover  {
+    // filter: grayscale(0%);
+    // opacity: 0.8;
 
-// .event-location {
-//     font-size: 10px;
-//     line-height: 10px;
-// }
-
-.event-year {
-    font-size: 13px;
-    line-height: 14px;
+    .event-year {
+        top: -$eventItemH;
+    }
 }
diff --git a/css/index.scss b/css/index.scss
index 32e8d1f..ab78988 100644
--- a/css/index.scss
+++ b/css/index.scss
@@ -1,6 +1,6 @@
 .visualization {
     height: 700px;
-    margin: 20px auto;
+    margin: 10px auto;
     position: relative;
     text-align: center;
     width: 1100px;
diff --git a/css/rounds.scss b/css/rounds.scss
index 4a3d84d..1876d52 100644
--- a/css/rounds.scss
+++ b/css/rounds.scss
@@ -25,7 +25,11 @@
     background: yellow;
 }
 
-.round-hide {
+.round-text {
+    display: inline-block;
+}
+
+.round-tiny {
     display: inline-block;
     font-size: 9px;
     margin-left: 20px;
@@ -33,7 +37,3 @@
     text-transform: uppercase;
     width: 30px;
 }
-
-.round-text {
-    display: inline-block;
-}
diff --git a/css/sort.scss b/css/sort.scss
index 34be515..a36818e 100644
--- a/css/sort.scss
+++ b/css/sort.scss
@@ -25,5 +25,14 @@
 }
 
 .sort-text {
+    display: inline-block;
+}
 
+.sort-tiny {
+    display: inline-block;
+    font-size: 9px;
+    margin-left: 20px;
+    text-align: right;
+    text-transform: uppercase;
+    width: 30px;
 }
diff --git a/css/style.css b/css/style.css
index f333b78..fe72869 100644
--- a/css/style.css
+++ b/css/style.css
@@ -7,12 +7,11 @@ body {
   font-family: sans-serif; }
 .visualization {
   height: 700px;
-  margin: 20px auto;
+  margin: 10px auto;
   position: relative;
   text-align: center;
   width: 1100px; }
 .events {
-  background: rgba(250, 200, 200, 0.1);
   bottom: 0;
   font-size: 0;
   left: 0;
@@ -20,36 +19,35 @@ body {
   width: 200px; }
 
 .event-item {
-  background: #777;
-  border-color: #fff;
-  border-radius: 0 16px 16px 0;
-  border-style: solid;
-  border-width: 1px 0;
   cursor: pointer;
   display: inline-block;
-  filter: grayscale(100%);
-  height: 24px;
-  margin-bottom: 4px;
-  opacity: 0.2;
+  height: 38px;
+  margin: 1px;
+  overflow: hidden;
   padding: 4px;
   position: relative;
   vertical-align: baseline;
-  width: 50px; }
-
-.event-item.active,
-.event-item.active:hover {
-  background: #fdfdfd;
-  border-color: #aaa;
-  filter: grayscale(0%);
-  opacity: 1; }
-
-.event-item:hover {
-  filter: grayscale(0%);
-  opacity: 0.8; }
+  width: 48px; }
 
 .event-year {
+  background: #fff;
+  border: 1px solid #d5d5d5;
   font-size: 13px;
-  line-height: 14px; }
+  height: 30px;
+  left: 4px;
+  line-height: 30px;
+  position: absolute;
+  top: 4px;
+  transition: top 0.1s linear;
+  width: 40px;
+  z-index: 1; }
+
+.event-flag {
+  font-size: 30px;
+  z-index: 0; }
+
+.event-item:hover .event-year {
+  top: -30px; }
 .tourney {
   background: rgba(10, 240, 120, 0.1);
   left: 0;
@@ -108,6 +106,17 @@ body {
 
 .sort-item.active {
   background: red; }
+
+.sort-text {
+  display: inline-block; }
+
+.sort-tiny {
+  display: inline-block;
+  font-size: 9px;
+  margin-left: 20px;
+  text-align: right;
+  text-transform: uppercase;
+  width: 30px; }
 .rounds {
   background: rgba(240, 120, 10, 0.1);
   bottom: 0;
@@ -131,13 +140,13 @@ body {
 .round-item:hover {
   background: yellow; }
 
-.round-hide {
+.round-text {
+  display: inline-block; }
+
+.round-tiny {
   display: inline-block;
   font-size: 9px;
   margin-left: 20px;
   text-align: right;
   text-transform: uppercase;
   width: 30px; }
-
-.round-text {
-  display: inline-block; }
diff --git a/index.html b/index.html
index 1441bc2..d13a34b 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
     <div class="visualization">
         <div class="tourney">
             <!-- <div class="tourney-flag flag-icon flag-icon-jp"></div> -->
-            <img src="res/2002.jpg" alt="" style="width: 200px;" />
+            <a href="https://en.wikipedia.org/wiki/2002_FIFA_World_Cup" target='blank'><img src="res/2002.jpg" alt="" style="width: 200px;" /></a>
             <div class="tourney-country">Japan / South Korea</div>
             <div class="tourney-year">2002</div>
         </div>
diff --git a/js/bundle.js b/js/bundle.js
index c5151f7..68bc08e 100644
--- a/js/bundle.js
+++ b/js/bundle.js
@@ -570,19 +570,19 @@
 	        EVENT: {
 	            ITEM: 'event-item',
 	            YEAR: 'event-year',
-	            FLAG: 'event-flag',
-	            LOCATION: 'event-location'
+	            FLAG: 'event-flag'
 	        },
 
 	        SORT: {
 	            ITEM: 'sort-item',
-	            TEXT: 'sort-text'
+	            TEXT: 'sort-text',
+	            TINY: 'sort-tiny'
 	        },
 
 	        ROUND: {
 	            ITEM: 'round-item',
-	            HIDE: 'round-hide',
-	            TEXT: 'round-text'
+	            TEXT: 'round-text',
+	            TINY: 'round-tiny'
 	        }
 	    },
 
@@ -643,12 +643,12 @@
 
 	        roundsItems.forEach(function (item) {
 	            var type = item.getAttribute(UI.DATA.ROUND);
-	            var hide = item.querySelector('.' + UI.CLASSNAMES.ROUND.HIDE);
-	            hide.innerHTML = UI.I18N.SHOW;
+	            var tiny = item.querySelector('.' + UI.CLASSNAMES.ROUND.TINY);
+	            tiny.innerHTML = UI.I18N.SHOW;
 
 	            if (roundsToShow.indexOf(type) > -1) {
 	                item.className += ' active';
-	                hide.innerHTML = UI.I18N.HIDE;
+	                tiny.innerHTML = UI.I18N.HIDE;
 	            }
 	        });
 
@@ -684,7 +684,7 @@
 	        eventsList.forEach(function (evt) {
 	            var item = document.createElement('div');
 	            var year = document.createElement('div');
-	            var location = document.createElement('div');
+	            var flag = document.createElement('div');
 
 	            item.className = UI.CLASSNAMES.EVENT.ITEM;
 	            item.addEventListener('click', onClick);
@@ -694,18 +694,17 @@
 	            year.className = UI.CLASSNAMES.EVENT.YEAR;
 	            year.innerHTML = evt.year;
 
-	            location.className = UI.CLASSNAMES.EVENT.LOCATION;
-	            location.innerHTML = evt.location;
+	            flag.className = UI.CLASSNAMES.EVENT.FLAG + ' flag-icon flag-icon-' + evt.icon;
 
 	            item.appendChild(year);
-	            // item.appendChild(location);
+	            item.appendChild(flag);
 
 	            eventsDiv.appendChild(item);
 	        });
 	    },
 
 	    buildSortPane: function buildSortPane(onClick) {
-	        var sortList = [{ text: 'Order by continent', value: null }, { 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 }];
+	        var sortList = [{ text: 'Continent', value: null }, { text: 'Goals Scored', value: UI.SORT_TYPES.GOALS }, { text: 'Country Name', value: UI.SORT_TYPES.COUNTRY }];
 
 	        var sortDiv = document.querySelector('.sort');
 
@@ -716,6 +715,7 @@
 	        sortList.forEach(function (sort) {
 	            var item = document.createElement('div');
 	            var text = document.createElement('div');
+	            var tiny = document.createElement('div');
 
 	            item.className = UI.CLASSNAMES.SORT.ITEM;
 	            item.addEventListener('click', onClick);
@@ -725,7 +725,11 @@
 	            text.className = UI.CLASSNAMES.SORT.TEXT;
 	            text.innerHTML = sort.text;
 
+	            tiny.className = UI.CLASSNAMES.SORT.TINY;
+	            tiny.innerHTML = 'sort';
+
 	            item.appendChild(text);
+	            item.appendChild(tiny);
 	            sortDiv.appendChild(item);
 	        });
 	    },
@@ -746,16 +750,16 @@
 	            item.setAttribute(UI.DATA.ROUND, round.value);
 	            item.setAttribute(UI.DATA.ROOT, true);
 
-	            var hide = document.createElement('div');
-	            hide.className = UI.CLASSNAMES.ROUND.HIDE;
-	            hide.innerHTML = 'hide';
+	            var tiny = document.createElement('div');
+	            tiny.className = UI.CLASSNAMES.ROUND.TINY;
+	            tiny.innerHTML = 'hide';
 
 	            var text = document.createElement('div');
 	            text.className = UI.CLASSNAMES.ROUND.TEXT;
 	            text.innerHTML = round.text;
 
 	            item.appendChild(text);
-	            item.appendChild(hide);
+	            item.appendChild(tiny);
 	            roundsDiv.appendChild(item);
 	        });
 	    },
diff --git a/js/ui.js b/js/ui.js
index 22ffd46..72335a0 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -4,18 +4,18 @@ const UI = {
             ITEM: 'event-item',
             YEAR: 'event-year',
             FLAG: 'event-flag',
-            LOCATION: 'event-location',
         },
 
         SORT: {
             ITEM: 'sort-item',
             TEXT: 'sort-text',
+            TINY: 'sort-tiny',
         },
 
         ROUND: {
             ITEM: 'round-item',
-            HIDE: 'round-hide',
             TEXT: 'round-text',
+            TINY: 'round-tiny',
         },
     },
 
@@ -76,12 +76,12 @@ const UI = {
 
         roundsItems.forEach(item => {
             const type = item.getAttribute(UI.DATA.ROUND);
-            const hide = item.querySelector(`.${UI.CLASSNAMES.ROUND.HIDE}`);
-            hide.innerHTML = UI.I18N.SHOW;
+            const tiny = item.querySelector(`.${UI.CLASSNAMES.ROUND.TINY}`);
+            tiny.innerHTML = UI.I18N.SHOW;
 
             if (roundsToShow.indexOf(type) > -1) {
                 item.className += ' active';
-                hide.innerHTML = UI.I18N.HIDE;
+                tiny.innerHTML = UI.I18N.HIDE;
             }
         });
 
@@ -139,7 +139,7 @@ const UI = {
         eventsList.forEach((evt) => {
             const item = document.createElement('div');
             const year = document.createElement('div');
-            const location = document.createElement('div');
+            const flag = document.createElement('div');
 
             item.className = UI.CLASSNAMES.EVENT.ITEM;
             item.addEventListener('click', onClick);
@@ -149,11 +149,10 @@ const UI = {
             year.className = UI.CLASSNAMES.EVENT.YEAR;
             year.innerHTML = evt.year;
 
-            location.className = UI.CLASSNAMES.EVENT.LOCATION;
-            location.innerHTML = evt.location;
+            flag.className = `${UI.CLASSNAMES.EVENT.FLAG} flag-icon flag-icon-${evt.icon}`;
 
             item.appendChild(year);
-            // item.appendChild(location);
+            item.appendChild(flag);
 
             eventsDiv.appendChild(item);
         });
@@ -161,10 +160,10 @@ const UI = {
 
     buildSortPane: (onClick) => {
         const sortList = [
-            { text: 'Order by continent', value: null },
-            { 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 },
+            { text: 'Continent', value: null },
+            { text: 'Goals Scored', value: UI.SORT_TYPES.GOALS },
+            { text: 'Country Name', value: UI.SORT_TYPES.COUNTRY },
+            // { text: 'Order by country population', value: UI.SORT_TYPES.POPULATION },
         ];
 
         const sortDiv = document.querySelector('.sort');
@@ -176,6 +175,7 @@ const UI = {
         sortList.forEach(sort => {
             const item = document.createElement('div');
             const text = document.createElement('div');
+            const tiny = document.createElement('div');
 
             item.className = UI.CLASSNAMES.SORT.ITEM;
             item.addEventListener('click', onClick);
@@ -185,7 +185,11 @@ const UI = {
             text.className = UI.CLASSNAMES.SORT.TEXT;
             text.innerHTML = sort.text;
 
+            tiny.className = UI.CLASSNAMES.SORT.TINY;
+            tiny.innerHTML = 'sort';
+
             item.appendChild(text);
+            item.appendChild(tiny);
             sortDiv.appendChild(item);
         });
     },
@@ -213,16 +217,16 @@ const UI = {
             item.setAttribute(UI.DATA.ROUND, round.value);
             item.setAttribute(UI.DATA.ROOT, true);
 
-            const hide = document.createElement('div');
-            hide.className = UI.CLASSNAMES.ROUND.HIDE;
-            hide.innerHTML = 'hide';
+            const tiny = document.createElement('div');
+            tiny.className = UI.CLASSNAMES.ROUND.TINY;
+            tiny.innerHTML = 'hide';
 
             const text = document.createElement('div');
             text.className = UI.CLASSNAMES.ROUND.TEXT;
             text.innerHTML = round.text;
 
             item.appendChild(text);
-            item.appendChild(hide);
+            item.appendChild(tiny);
             roundsDiv.appendChild(item);
         });
     },