Index: ow/static/css/main.css
===================================================================
--- ow/static/css/main.css	(revision ea4372504bfda5b983d464377cf0b708c253e187)
+++ ow/static/css/main.css	(revision 778d53d0180c6115a5a8a7204516018101ee7326)
@@ -642,4 +642,37 @@
   background-color: #EE4056;
 }
+/*
+Very simple way to paint dropdown-like arrows, without
+using any external dependencies.
+
+To use it, add something like this to your html, to display a "down" arrow:
+
+  <i class="arrow down"></i>
+*/
+i.arrow {
+  border: solid black;
+  border-width: 0 3px 3px 0;
+  display: inline-block;
+  padding: 3px;
+  margin: 3px;
+  margin-left: 6px;
+  margin-right: 0px;
+}
+.right {
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+}
+.left {
+  transform: rotate(135deg);
+  -webkit-transform: rotate(135deg);
+}
+.up {
+  transform: rotate(-135deg);
+  -webkit-transform: rotate(-135deg);
+}
+.down {
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+}
 .header-content {
   padding: 1em 1.5em;
@@ -1488,4 +1521,21 @@
   font-size: 13px;
   font-size: 0.8125rem;
+}
+.profile-dropdown-sports,
+.profile-dropdown-years {
+  color: #151515;
+  text-decoration: none;
+}
+.profile-dropdown-sports:hover,
+.profile-dropdown-years:hover {
+  color: #151515;
+}
+.profile-dropdown-sports:active,
+.profile-dropdown-years:active,
+.profile-dropdown-sports:focus,
+.profile-dropdown-years:focus {
+  outline: 0;
+  border: none;
+  -moz-outline-style: none;
 }
 .verify-account-content {
Index: ow/static/js/ow.js
===================================================================
--- ow/static/js/ow.js	(revision ea4372504bfda5b983d464377cf0b708c253e187)
+++ ow/static/js/ow.js	(revision 778d53d0180c6115a5a8a7204516018101ee7326)
@@ -486,2 +486,77 @@
 
 };
+
+
+owjs.sport_stats = function(spec) {
+
+    "use strict";
+
+    var link_selector = spec.link_selector;
+    var stats_selector = spec.stats_selector;
+    var selected = spec.selected;
+    var dropdown_selector = spec.dropdown_selector;
+    var current_year = spec.current_year;
+    var year_link_selector = spec.year_link_selector;
+
+    var setup = function setup() {
+        // Hide all sports stats by default
+        $(stats_selector).hide();
+        // Show the pre-selected one
+        $(selected).show();
+
+        $(link_selector).on('click', function(e) {
+            e.preventDefault();
+            var selected = $(this).attr('class').split(' ')[1];
+            var sport = selected.split('-')[1]
+            // Hide them all
+            $(stats_selector).hide();
+            // Show the selected one
+            $(stats_selector + '.' + selected).show();
+            // Update the sport on the sports selector widget
+            $(dropdown_selector + ' strong').html(sport);
+            // finally "click" on the proper year to be displayed for this sport
+            $(year_link_selector + sport + '-' + current_year).click();
+        });
+    };
+
+    var that = {}
+    that.setup = setup;
+    return that
+
+};
+
+
+owjs.year_stats = function(spec) {
+
+    "use strict";
+
+    var link_selector = spec.link_selector;
+    var stats_selector = spec.stats_selector;
+    var selected = spec.selected;
+    var dropdown_selector = spec.dropdown_selector;
+
+    var setup = function setup() {
+        // Hide all years stats by default
+        $(stats_selector).hide();
+        // Show the pre-selected one
+        $(selected).show();
+
+        $(link_selector).on('click', function(e) {
+            e.preventDefault();
+            var selected = $(this).attr('class').split(' ')[1];
+            var sport = selected.split('-')[1]
+            var year = selected.split('-')[2]
+            // Hide them all
+            $(stats_selector).hide();
+            // Show the selected one
+            $(stats_selector + '.' + selected).show();
+            // Update the year on the years selector widget
+            $(dropdown_selector + sport + ' strong').html(year);
+        });
+    };
+
+    var that = {}
+    that.setup = setup;
+    return that
+
+};
Index: ow/static/less/main.less
===================================================================
--- ow/static/less/main.less	(revision ea4372504bfda5b983d464377cf0b708c253e187)
+++ ow/static/less/main.less	(revision 778d53d0180c6115a5a8a7204516018101ee7326)
@@ -23,4 +23,5 @@
 @import "ui/form.less";
 @import "ui/buttons.less";
+@import "ui/arrows.less";
 
 // Modules
Index: ow/static/less/pages/profile.less
===================================================================
--- ow/static/less/pages/profile.less	(revision ea4372504bfda5b983d464377cf0b708c253e187)
+++ ow/static/less/pages/profile.less	(revision 778d53d0180c6115a5a8a7204516018101ee7326)
@@ -128,2 +128,16 @@
 	}
 }
+
+.profile-dropdown-sports,
+.profile-dropdown-years {
+    color: @color-main;
+    text-decoration: none;
+    &:hover {
+	color: @color-main;
+    }
+    &:active, &:focus {
+        outline: 0;
+        border: none;
+        -moz-outline-style: none;
+    }
+}
Index: ow/static/less/ui/arrows.less
===================================================================
--- ow/static/less/ui/arrows.less	(revision 778d53d0180c6115a5a8a7204516018101ee7326)
+++ ow/static/less/ui/arrows.less	(revision 778d53d0180c6115a5a8a7204516018101ee7326)
@@ -0,0 +1,38 @@
+/*
+Very simple way to paint dropdown-like arrows, without
+using any external dependencies.
+
+To use it, add something like this to your html, to display a "down" arrow:
+
+  <i class="arrow down"></i>
+*/
+
+i.arrow {
+    border: solid black;
+    border-width: 0 3px 3px 0;
+    display: inline-block;
+    padding: 3px;
+    margin: 3px;
+    margin-left: 6px;
+    margin-right: 0px;
+}
+
+.right {
+    transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+}
+
+.left {
+    transform: rotate(135deg);
+    -webkit-transform: rotate(135deg);
+}
+
+.up {
+    transform: rotate(-135deg);
+    -webkit-transform: rotate(-135deg);
+}
+
+.down {
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+}
