diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css
index 07ecc3b6..ba2546c8 100755
--- a/datacenterlight/static/datacenterlight/css/landing-page.css
+++ b/datacenterlight/static/datacenterlight/css/landing-page.css
@@ -156,6 +156,14 @@ h6 {
     background-color: transparent;
 }
 
+.navbar-transparent .navbar-nav>li>.on-hover-border {
+	transition: all 0.3s linear;
+	box-shadow: none;
+}
+.navbar-transparent .navbar-nav>li>.on-hover-border:hover {
+	box-shadow: 0 0 0 1px #eee;
+	border-radius: 5px;
+}
 .navbar-default .btn-link {
     box-shadow: none;
 }
@@ -196,44 +204,61 @@ h6 {
     margin-right: 5px;
     font-family: 'Lato', sans-serif;
 }
-
-.nav-language .drop-language {
-    position: absolute;
+.nav-language .drop-language{
+    /*position: absolute;*/
     top: 45px;
-    left: -8px;
-    background: #fff;
+    left: auto !important;
+    /*     background: #fff; */
     width: 100px;
+    min-width: 100px;
     height: 40px;
     padding: 9px 10px;
-    -webkit-box-shadow: -8px 13px 31px -8px rgba(77, 77, 77, 1);
-    -moz-box-shadow: -8px 13px 31px -8px rgba(77, 77, 77, 1);
-    box-shadow: -8px 13px 31px -8px rgba(77, 77, 77, 1);
-    display: none;
+    -webkit-box-shadow: -8px 13px 31px -8px rgba(77,77,77,1);
+    -moz-box-shadow: -8px 13px 31px -8px rgba(77,77,77,1);
+    box-shadow: -8px 13px 31px -8px rgba(77,77,77,1);
+    /*display: none;*/
     z-index: 100;
     /* margin-left: 10px; */
     text-align: center;
     border-radius: 4px;
 }
 
-.nav-language .drop-language a {
-    cursor: pointer;
-    font-family: 'Lato', sans-serif;
+.nav-language .open .drop-language{
+	width: 100px;
+	min-width: 100px;
 }
 
-.navbar-transparent .nav-language .drop-language {
+.nav-language .drop-language a{
+   cursor: pointer;
+   padding: 5px 10px !important;
+   font-family: 'Lato-Light', sans-serif;
+}
+
+/* Show the dropdown menu on hover */
+@media (min-width: 769px) {
+	.nav-language .dropdown:hover .dropdown-menu {
+		display: block;
+	}
+}
+@media (max-width: 767px){
+	.nav-language .open .dropdown-menu>li>a {
+    	line-height: 1.42857143;
+	}
+}
+
+.navbar-transparent .nav-language .drop-language{
     background: transparent;
     border: 1px solid #fff;
 }
 
 .navbar-transparent .nav-language .drop-language a {
     color: #fff;
+    padding: 5px 10px !important;
     font-family: 'Lato-Light', sans-serif;
 }
-
-.nav-language:hover .drop-language {
+/* .nav-language:hover .drop-language{
     display: block;
-}
-
+} */
 .intro-header {
     height: 100vh;
     text-align: center;
@@ -1188,8 +1213,8 @@ tech-sub-sec h2 {
         font-size: 14px;
         color: #777;
     }
-    .nav-language:hover {
-        height: 80px;
+    .nav-language:hover{
+        /*height: 80px;*/
     }
     .navbar-transparent .nav-language .select-language {
         color: #777;
diff --git a/datacenterlight/templates/datacenterlight/includes/_navbar.html b/datacenterlight/templates/datacenterlight/includes/_navbar.html
index b32fe10d..99f6a4a8 100644
--- a/datacenterlight/templates/datacenterlight/includes/_navbar.html
+++ b/datacenterlight/templates/datacenterlight/includes/_navbar.html
@@ -1,8 +1,6 @@
-{% load staticfiles i18n%}
-{% get_current_language as LANGUAGE_CODE %}
-{% load custom_tags %}
+{% load staticfiles i18n%} {% get_current_language as LANGUAGE_CODE %} {% load custom_tags %}
 <nav class="navbar navbar-default navbar-fixed-top topnav">
-<div class="topnav">
+  <div class="topnav">
             <!-- Brand and toggle get grouped for better mobile display -->
   <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
@@ -22,44 +20,55 @@
   </div>
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!-- Start Navbar collapse-->
     <ul class="nav navbar-nav navbar-right">
-		{% if request.resolver_match.url_name == "index" or request.resolver_match.url_name == "whydatacenterlight" %}
+        {% if request.resolver_match.url_name == "index" or request.resolver_match.url_name == "whydatacenterlight" %}
            <li class="dropdown">
                 <a class="dropdown-toggle  visible-mobile" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Highlights" %}<span class="caret"></span></a>
                 <a class="dropdown-toggle url disabled visible-desktop menu-url" data-url="#how" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Highlights" %}<span class="caret"></span></a>
-			<ul class="dropdown-menu">
-				<li><a class="url menu-url" data-url="#your" href="#your">{% trans "Scale out" %}</a></li>
-				<li><a class="url menu-url" data-url="#our" href="#our">{% trans "Reliable and light" %}</a></li>
-				<li> <a class="url menu-url" data-url="#price" href="#price">{% trans "Order VM" %}</a></li>
-			</ul>
-           </li>
-			<li>
-				<a href="{% url 'datacenterlight:whydatacenterlight' %}" >{% trans "Why Data Center Light?" %}</a>
-			</li>
-			<li>
-				<a class="url" href="{% url 'datacenterlight:index' %}#contact" data-url="#contact"  >{% trans "Contact" %}</a>
-			</li>
-			{% endif %}
-			<li class="nav-language">
-				<div class="select-language">
-				{% if LANGUAGE_CODE == 'en-us'%}
-				<span>English</span>
-				{% else %}
-				<span>Deutsch</span>
-				{% endif %}
-				<i class="fa fa-globe" aria-hidden="true"></i>
-				</div>
+            <ul class="dropdown-menu">
+                <li><a class="url menu-url" data-url="#your" href="#your">{% trans "Scale out" %}</a></li>
+                <li><a class="url menu-url" data-url="#our" href="#our">{% trans "Reliable and light" %}</a></li>
+                <li> <a class="url menu-url" data-url="#price" href="#price">{% trans "Order VM" %}</a></li>
+            </ul>
+          </li>
+    			<li>
+    				<a href="{% url 'datacenterlight:whydatacenterlight' %}" >{% trans "Why Data Center Light?" %}</a>
+    			</li>
+    			<li>
+    				<a class="url" href="{% url 'datacenterlight:index' %}#contact" data-url="#contact"  >{% trans "Contact" %}</a>
+    			</li>
+  			{% endif %}
 
-				<div class="drop-language">
-				{% if LANGUAGE_CODE == 'en-us'%}
-				<a href="{% change_lang 'de' %}">Deutsch</a>
-				{% else %}
-				<a href="{% change_lang 'en-us' %}" >English</a>
-				{% endif %}
-				</div>
-
-			</li>
-        </ul>
-  </div><!-- /.navbar-collapse -->
+        <li>
+          {% if LANGUAGE_CODE == 'en-us'%}
+            <a class="on-hover-border" href="{% change_lang 'de' %}">Deutsch&nbsp;&nbsp;<i class="fa fa-globe" aria-hidden="true"></i></a>
+          {% else %}
+            <a class="on-hover-border" href="{% change_lang 'en-us' %}">English&nbsp;&nbsp;<i class="fa fa-globe" aria-hidden="true"></i></a>
+          {% endif %}
+        </li>
+        {% comment %}
+        <!-- to be used when more than one option for language -->
+        <li class="nav-language">
+          <div class="dropdown">
+            <div class="dropdown-toggle select-language" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+              {% if LANGUAGE_CODE == 'en-us'%}
+                <span>English</span>
+              {% else %}
+                <span>Deutsch</span>
+              {% endif %}
+              <i class="fa fa-globe" aria-hidden="true"></i>
+            </div>
+            <ul class="dropdown-menu drop-language dropdown-menu-right">
+              {% if LANGUAGE_CODE == 'en-us'%}
+                <li><a class="url" href="{% change_lang 'de' %}">Deutsch</a></li>
+              {% else %}
+                <li><a class="url" href="{% change_lang 'en-us' %}">English</a></li>
+              {% endif %}
+            </ul>
+          </div>
+        </li>
+        {% endcomment %}
+      </ul>
+    </div>
+    <!-- /.navbar-collapse -->
   </div>
-  </div>
-</nav>
+</nav>
\ No newline at end of file