diff --git a/_i18n/en.yml b/_i18n/en.yml
index 76a346c..9bd4e00 100644
--- a/_i18n/en.yml
+++ b/_i18n/en.yml
@@ -2,6 +2,8 @@ global:
   english: English
   spanish: Español
   russian: Русский
+  portugese: Portugese
+  italian: Italiano
   chinese: 简体中文
   twitter: Twitter
   github: GitHub
diff --git a/_includes/nav-desktop.html b/_includes/nav-desktop.html
index fac246a..98929ee 100644
--- a/_includes/nav-desktop.html
+++ b/_includes/nav-desktop.html
@@ -11,23 +11,44 @@
 
 <header id="top" class="content">
 
+    <a href="{{ basenav }}/" class="logo"><img class="logo__img" src="{{ base }}/assets/img/logo-{{ logo-color }}.png" alt="Dash"></a>
 
-    <a href="{{ basenav }}/" class="logo"><img src="{{ base }}/assets/img/logo-{{ logo-color }}.png" alt="Dash"></a>
+    <nav class="nav">
+        <ul class="nav__list">
+            <li class="nav__item"><a href="{{ basenav }}/" class="nav__link">{% t nav.what-is-dash %}</a></li>
+            <li class="nav__item"><a href="{{ basenav }}/get-dash/" class="nav__link">{% t nav.get-dash %}</a></li>
+            <li class="nav__item"><a href="{{ basenav }}/participate/" class="nav__link">{% t nav.participate %}</a></li>
+            <li class="nav__item"><a href="{{ basenav }}/currency/" class="nav__link">{% t nav.currency %}</a></li>
+            <li class="nav__item"><a href="{{ basenav }}/community/" class="nav__link">{% t nav.community %}</a></li>
+            <li class="nav__item"><a href="{{ basenav }}/blog/" class="nav__link">{% t nav.blog %}</a></li>
+            <li class="nav__item"><a href="{{ basenav }}" class="nav__link">{% t nav.project %}</a></li>
 
-    <nav>
-        <ul>
-            <li><a href="{{ basenav }}/">{% t nav.what-is-dash %}</a></li>
-            <li><a href="{{ basenav }}/get-dash/">{% t nav.get-dash %}</a></li>
-            <li><a href="{{ basenav }}/participate/">{% t nav.participate %}</a></li>
-            <li><a href="{{ basenav }}/currency/">{% t nav.currency %}</a></li>
-            <li><a href="{{ basenav }}/community/">{% t nav.community %}</a></li>
-            <li><a href="{{ basenav }}/blog/">{% t nav.blog %}</a></li>
-            <li><a href="{{ basenav }}">{% t nav.project %}</a></li>
+            <li class="nav__item nav__item--languages">
+                <a href="#" class="nav__link">{{ site.lang }}</a>
+                <ul class="nav__sublist">
+                    <!-- TODO: dynamically generate this list -->
+                    <li class="nav__subitem">
+                        <a href="{{ base }}{{ page.url }}" class="nav__link {% if site.lang == 'en' %}is-active{% endif %}">{% t global.english %}</a>
+                    </li>
+                    <li class="nav__subitem">
+                        <a href="{{ base }}/es{{ page.url  }}" class="nav__link {% if site.lang == 'es' %}is-active{% endif %}">{% t global.spanish %}</a>
+                    </li>
+                    <li class="nav__subitem">
+                        <a href="{{ base }}/pt{{ page.url  }}" class="nav__link {% if site.lang == 'pt' %}is-active{% endif %}">{% t global.portugese %}</a>
+                    </li>
+                    <li class="nav__subitem">
+                        <a href="{{ base }}/it{{ page.url  }}" class="nav__link {% if site.lang == 'it' %}is-active{% endif %}">{% t global.italian %}</a>
+                    </li>
+                    <li class="nav__subitem">
+                        <a href="{{ base }}/cn{{ page.url  }}" class="nav__link {% if site.lang == 'cn' %}is-active{% endif %}">{% t global.chinese %}</a>
+                    </li>
+                    <li class="nav__subitem">
+                        <a href="{{ base }}/ru{{ page.url  }}" class="nav__link {% if site.lang == 'ru' %}is-active{% endif %}">{% t global.russian %}</a>
+                    </li>
+                </ul>
+            </li>
 
-            <li><a href="{{ base }}{{ page.url }}">{% t global.english %}</a></li>
-            <li><a href="{{ base }}/es{{ page.url  }}">{% t global.spanish %}</a></li>
-
-            <li><a href="{{ basenav }}" title="{% t nav.search %}">S</a></li>
+            <li class="nav__item"><a href="{{ basenav }}" class="nav__link" title="{% t nav.search %}">S</a></li>
         </ul>
     </nav>
 
diff --git a/_includes/nav-mobile.html b/_includes/nav-mobile.html
index e702583..9080ef8 100644
--- a/_includes/nav-mobile.html
+++ b/_includes/nav-mobile.html
@@ -9,7 +9,7 @@
         <li><a href="{{ basenav }}/community/">{% t nav.community %}</a></li>
         <li><a href="{{ basenav }}/blog/">{% t nav.blog %}</a></li>
         <li><a href="{{ basenav }}">{% t nav.project %}</a></li>
-        
+
         <li><a href="{{ base }}{{ page.url }}">{% t global.english %}</a></li>
         <li><a href="{{ base }}/es{{ page.url  }}">{% t global.spanish %}</a></li>
     </ul>
diff --git a/_sass/_header.scss b/_sass/_header.scss
index e475578..9a12151 100644
--- a/_sass/_header.scss
+++ b/_sass/_header.scss
@@ -1,19 +1,13 @@
+#top {
+	border-bottom: 1px solid rgba($white, 0.35);
+	margin-bottom: 20px;
+}
+
 #hero {
 	height: 600px;
 	color: $white;
 	position: relative;
 
-	#top {
-		border-bottom: 1px solid rgba($white, 0.35);
-		nav li a {
-			color: rgba($white, 0.9);
-			&:hover {
-				color: rgba($white, 1);
-				text-shadow: 0 0 2em black;
-			}
-		}
-	}
-
 	> .content {
 		> h1, > p {
 			text-shadow: 2px 2px 5px rgba(black, 0.2);
diff --git a/_sass/_logo.scss b/_sass/_logo.scss
new file mode 100644
index 0000000..ced01e4
--- /dev/null
+++ b/_sass/_logo.scss
@@ -0,0 +1,11 @@
+.logo {
+    width: 180px;
+    height: 90px;
+    display: inline-block;
+    &__img {
+        position: relative;
+        top: 50%;
+        transform: translateY(-50%);
+        max-width: 100%;
+    }
+}
\ No newline at end of file
diff --git a/_sass/_nav.scss b/_sass/_nav.scss
index 5ef8f5a..62ae546 100644
--- a/_sass/_nav.scss
+++ b/_sass/_nav.scss
@@ -1,46 +1,60 @@
-#top {
-	border-bottom: 1px solid $blue;
-	margin-bottom: 20px;
-	@extend %clearfix;
+.nav {
+    float: right;
+    text-align: right;
 
-	nav {
-		float: right;
-		text-align: right;
-		li {
-			display: inline-block;
-			text-transform: uppercase;
-			font-size: 14px;
-			font-weight: 600;
-			line-height: 90px;
+    &__list {
+        list-style: none;
+    }
 
-			a {
-				padding: 0 10px;
-				display: inline-block;
-				text-decoration: none;
-				color: rgba($black, 0.9);
+    &__item {
+        position: relative;
+        display: inline-block;
+        text-transform: uppercase;
+        font-size: 14px;
+        letter-spacing: 0.02em;
+        font-weight: 600;
+        line-height: 90px;
+        &:last-child > .nav__link {
+            padding-right: 0;
+        }
 
-				&:hover {
-					color: rgba($black, 1.0);
-				}
-			}
-			&:last-child > a {
-				padding-right: 0;
-			}
-			.status {
-				color: $blue;
-			}
-		}
-	}
+        &--languages {
+            & > .nav__link {
+                padding: 0 25px;
+            }
+        }
 
-	.logo {
-		width: 180px;
-		height: 90px;
-		display: inline-block;
-		> img {
-			position: relative;
-			top: 50%;
-			transform: translateY(-50%);
-			max-width: 100%;
-		}
-	}
+        &:hover {
+            .nav__sublist {
+                display: block;
+                opacity: 1;
+                animation: fadein 0.4s;
+            }
+        }
+    }
+
+    &__sublist {
+        display: none;
+        position: absolute;
+        top: 100%;
+        right: 0;
+        padding-top: 10px;
+    }
+
+    &__subitem {
+        line-height: 45px;
+    }
+
+    &__link {
+        display: inline-block;
+        padding: 0 10px;
+        text-decoration: none;
+        color: rgba($white, 1);
+    }
 }
+
+
+@keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
\ No newline at end of file
diff --git a/assets/css/style.scss b/assets/css/style.scss
index a1861ed..fc5b6db 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -14,6 +14,7 @@
 //stuff every page needs
 @import "header";
 @import "nav";
+@import "logo";
 @import "buttons";
 @import "forms";
 @import "footer";