diff --git a/_data/languages.yml b/_data/languages.yml
new file mode 100644
index 0000000000..fa8d70293a
--- /dev/null
+++ b/_data/languages.yml
@@ -0,0 +1,86 @@
+ar:
+  name: "العربية"
+
+bn:
+  name: "বাংলা"
+
+ca:
+  name: "Català"
+
+cs:
+  name: "Čeština"
+
+de:
+  name: "Deutsch"
+
+en:
+  name: "English"
+
+es:
+  name: "Español"
+
+fa:
+  name: "فارسی"
+
+fi:
+  name: "Suomi"
+
+fr:
+  name: "Français"
+
+he:
+  name: "עברית"
+
+hi:
+  name: "हिन्दी"
+
+hu:
+  name: "Magyar"
+
+id:
+  name: "Bahasa Indonesia"
+
+it:
+  name: "Italiano"
+
+ja:
+  name: "日本語"
+
+ko:
+  name: "한국어"
+
+nl:
+  name: "Nederlands"
+
+no:
+  name: "Norsk (Bokmål)"
+
+pl:
+  name: "Polski"
+
+pt:
+  name: "Português"
+
+"pt-br":
+  name: "Português (Brasil)"
+
+ru:
+  name: "Русский"
+
+sv:
+  name: "Svenska"
+
+tr:
+  name: "Türkçe"
+
+vi:
+  name: "Tiếng Việt"
+
+uk:
+  name: "Українська"
+
+"zh-cn":
+  name: "中文 (简体)"
+
+"zh-tw":
+  name: "中文 (繁體)"
diff --git a/_includes/cheatsheet-sidebar.txt b/_includes/cheatsheet-sidebar.txt
index de5881dcc1..af79fde132 100644
--- a/_includes/cheatsheet-sidebar.txt
+++ b/_includes/cheatsheet-sidebar.txt
@@ -14,10 +14,14 @@
 <div id="scroller-anchor">
   <div id="scroller">
     {% if languages %}
-      <a href="{{ site.baseurl }}{{ rootTutorialURL }}"><img src="{{ site.baseurl }}/resources/images/language/en.png" title="Language: en" style="margin-left: 14px;"/></a>
-      {% for l in languages %}
-        <a href="{{ site.baseurl }}/{{ l }}{{ rootTutorialURL }}"><img src="{{ site.baseurl }}/resources/images/language/{{ l }}.png" title="Language: {{ l }}"/></a>
-      {% endfor %}
+      <p class="contents">Languages</p>
+      <ul class="langbar langbar-cheatsheet">
+        <li><a href="{{ site.baseurl }}{{ rootTutorialURL }}" class="lang">English</a></li>
+        {% for l in languages %}
+          {% assign lang = site.data.languages[l] %}
+          <li><a href="{{ site.baseurl }}/{{ l }}{{ rootTutorialURL }}" class="lang">{{lang.name}}</a></li>
+        {% endfor %}
+      </ul>
     {% endif %}
     <p class="contents">Contents</p>
     <div id="toc"></div>
diff --git a/_layouts/guides-index.html b/_layouts/guides-index.html
index d9d3e062f6..4e55de5d7a 100644
--- a/_layouts/guides-index.html
+++ b/_layouts/guides-index.html
@@ -30,10 +30,13 @@ <h1>About</h1>
     -->  
 
       {% if languages %}
-        <a href="{{ site.baseurl }}{{ rootIndexURL }}"><img src="{{ site.baseurl }}/resources/images/language/en.png" title="Language: en"/></a>
+      <ul class="langbar index-langbar">
+        <li><a href="{{ site.baseurl }}{{ rootIndexURL }}" class="lang">English</a></li>
         {% for l in languages %}
-          <a href="{{ site.baseurl }}/{{ l }}{{ rootIndexURL }}"><img src="{{ site.baseurl }}/resources/images/language/{{ l }}.png" title="Language: {{ l }}"/></a>
+          {% assign lang = site.data.languages[l] %}
+          <li><a href="{{ site.baseurl }}/{{ l }}{{ rootIndexURL }}" class="lang">{{lang.name}}</a></li>
         {% endfor %}
+      </ul>
       {% endif %}
     </div>
   </div>
diff --git a/_layouts/overview-large.html b/_layouts/overview-large.html
index 648354cd51..5d974386b0 100644
--- a/_layouts/overview-large.html
+++ b/_layouts/overview-large.html
@@ -25,10 +25,13 @@
 
     <div class="span6">
       {% if languages %}
-        <a href="{{ site.baseurl }}{{ rootTutorialURL }}"><img src="{{ site.baseurl }}/resources/images/language/en.png" title="Language: en"/></a>
+      <ul class="langbar">
+        <li><a href="{{ site.baseurl }}{{ rootTutorialURL }}" class="lang">English</a></li>
         {% for l in languages %}
-          <a href="{{ site.baseurl }}/{{ l }}{{ rootTutorialURL }}"><img src="{{ site.baseurl }}/resources/images/language/{{ l }}.png" title="Language: {{ l }}"/></a>
+          {% assign lang = site.data.languages[l] %}
+          <li><a href="{{ site.baseurl }}/{{ l }}{{ rootTutorialURL }}" class="lang">{{lang.name}}</a></li>
         {% endfor %}
+      </ul>
       {% endif %}
     </div>
 
diff --git a/_layouts/overview.html b/_layouts/overview.html
index 3530271aab..159e23abe3 100644
--- a/_layouts/overview.html
+++ b/_layouts/overview.html
@@ -6,7 +6,6 @@
 
 <div class="container">
   <div class="row">
-    
     <div class="span10">{% if page.title %}<h1>{{ page.title }}</h1>{% else %}<h1>{{ site.title }}</h1>{% endif %}</div>
 
     {% for pg in site.posts %}
@@ -30,10 +29,13 @@
 
     <div class="span6">
       {% if languages %}
-        <a href="{{ site.baseurl }}{{ rootTutorialURL }}"><img src="{{ site.baseurl }}/resources/images/language/en.png" title="Language: en"/></a> 
+      <ul class="langbar">
+        <li><a href="{{ site.baseurl }}{{ rootTutorialURL }}" class="lang">English</a></li>
         {% for l in languages %}
-          <a href="{{ site.baseurl }}/{{ l }}{{ rootTutorialURL }}"><img src="{{ site.baseurl }}/resources/images/language/{{ l }}.png" title="Language: {{ l }}"/></a> 
+          {% assign lang = site.data.languages[l] %}
+          <li><a href="{{ site.baseurl }}/{{ l }}{{ rootTutorialURL }}" class="lang">{{lang.name}}</a></li>
         {% endfor %}
+      </ul>
       {% endif %}
     </div>
 
diff --git a/_layouts/tutorial.html b/_layouts/tutorial.html
index 511b75b972..365fbf126d 100644
--- a/_layouts/tutorial.html
+++ b/_layouts/tutorial.html
@@ -12,7 +12,7 @@
 
       {% for pg in site.pages %}
         {% if pg.tutorial == "scala-tour" and pg.languages %}
-          {% assign lang = pg.languages %}
+          {% assign languages = pg.languages %}
         {% endif %}
       {% endfor %}
 
@@ -24,12 +24,15 @@
       {% endif %}
 
       <div class="span6">
-        {% if lang %}
-          <a href="{{ site.baseurl }}{{ rootTutorialURL }}"><img src="{{ site.baseurl }}/resources/images/language/en.png" title="Language: en"/></a> 
-  	      {% for l in lang %}
-		    <a href="{{ site.baseurl }}/{{ l }}{{ rootTutorialURL }}"><img src="{{ site.baseurl }}/resources/images/language/{{ l }}.png" title="Language: {{ l }}"/></a> 
-	      {% endfor %}
-	    {% endif %}
+        {% if languages %}
+        <ul class="langbar">
+          <li><a href="{{ site.baseurl }}{{ rootTutorialURL }}" class="lang">English</a></li>
+          {% for l in languages %}
+            {% assign lang = site.data.languages[l] %}
+            <li><a href="{{ site.baseurl }}/{{ l }}{{ rootTutorialURL }}" class="lang">{{lang.name}}</a></li>
+          {% endfor %}
+        </ul>
+        {% endif %}
       </div>
     
       <div class="span10">
diff --git a/resources/images/language/de.png b/resources/images/language/de.png
deleted file mode 100755
index e840992d97..0000000000
Binary files a/resources/images/language/de.png and /dev/null differ
diff --git a/resources/images/language/en.png b/resources/images/language/en.png
deleted file mode 100755
index 51a27cf1d6..0000000000
Binary files a/resources/images/language/en.png and /dev/null differ
diff --git a/resources/images/language/es.png b/resources/images/language/es.png
deleted file mode 100755
index 2fe8dafb46..0000000000
Binary files a/resources/images/language/es.png and /dev/null differ
diff --git a/resources/images/language/fr.png b/resources/images/language/fr.png
deleted file mode 100755
index fd40c41169..0000000000
Binary files a/resources/images/language/fr.png and /dev/null differ
diff --git a/resources/images/language/ja.png b/resources/images/language/ja.png
deleted file mode 100644
index 9ac9fd09d3..0000000000
Binary files a/resources/images/language/ja.png and /dev/null differ
diff --git a/resources/images/language/ko.png b/resources/images/language/ko.png
deleted file mode 100644
index ddc60ffaba..0000000000
Binary files a/resources/images/language/ko.png and /dev/null differ
diff --git a/resources/images/language/pt-br.png b/resources/images/language/pt-br.png
deleted file mode 100644
index 7ec371393b..0000000000
Binary files a/resources/images/language/pt-br.png and /dev/null differ
diff --git a/resources/stylesheets/base.css b/resources/stylesheets/base.css
index c1e3a7da3c..b314175c36 100644
--- a/resources/stylesheets/base.css
+++ b/resources/stylesheets/base.css
@@ -93,6 +93,26 @@
 	    font-style: italic;
 	}
 
+  .langbar li {
+    display: inline;
+  }
+
+  .langbar-cheatsheet li {
+    display: block;
+  }
+
+  .langbar li a {
+    color: rgba(0, 0, 0, 0.5);
+    font-weight: bold;
+    text-decoration: none;
+    font-size: 14px;
+    margin-right: 5px;
+  }
+
+  .langbar li a:hover {
+    text-decoration: underline;
+  }
+
 /*Coursera stuff*/
 
   .label {