diff --git a/hosting/static/hosting/css/landing-page.css b/hosting/static/hosting/css/landing-page.css
index b1972eed..63a2f54a 100644
--- a/hosting/static/hosting/css/landing-page.css
+++ b/hosting/static/hosting/css/landing-page.css
@@ -39,6 +39,30 @@ h6 {
     font-size: 14px;
 }
 
+.navbar-transparent {
+    background: transparent;
+    border: none;
+    padding: 20px;
+}
+
+.navbar-transparent .navbar-nav>li>a {
+    color: #fff;
+    cursor: pointer;
+    font-family: 'Lato-Regular', sans-serif;
+}
+.navbar-transparent .navbar-nav>li>a:hover {
+    color: #fff;
+}
+.navbar-transparent .navbar-nav>li>a:focus, .navbar-transparent .navbar-nav>li>a:hover {
+    color: #fff;
+    background-color: transparent;
+}
+
+.navbar-transparent #logoWhite{
+    display: block;
+    width: 220px;
+}
+
 .lead {
     font-size: 18px;
     font-weight: 400;
@@ -634,11 +658,11 @@ a.unlink:hover {
     .card-cvc-element {
     padding-left: 10px;
     }
-    
+
     .hide-mobile{
     display:none;
     }
-    
+
     #billing-form .form-control {
     box-shadow: none !important;
     font-weight: 400;
diff --git a/hosting/templates/hosting/base_short.html b/hosting/templates/hosting/base_short.html
index 6a08b97b..21aa93db 100644
--- a/hosting/templates/hosting/base_short.html
+++ b/hosting/templates/hosting/base_short.html
@@ -48,24 +48,26 @@
 <body>
 
 
-    <!-- Navigation -->
-    
-    <nav class="navbar navbar-default  navbar-fixed-top topnav" role="navigation">
-        <div class="container 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">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                </button>
-                <a class="navbar-brand topnav" href="{% if site_url %}{{site_url}}{% else %}{{ request.session.hosting_url}}{% endif %}"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
-            </div>
-            {% if request.user.is_authenticated %}
-            <!-- Collect the nav links, forms, and other content for toggling -->
-            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-                <ul class="nav navbar-nav navbar-right">
+    {% block navbar %}
+
+        <!-- Navigation -->
+
+        <nav class="navbar navbar-default  navbar-fixed-top topnav" role="navigation">
+            <div class="container 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">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand topnav" href="{% if site_url %}{{site_url}}{% else %}{{ request.session.hosting_url}}{% endif %}"><img src="{% static 'datacenterlight/img/logo_black.svg' %}"></a>
+                </div>
+                {% if request.user.is_authenticated %}
+                <!-- Collect the nav links, forms, and other content for toggling -->
+                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                    <ul class="nav navbar-nav navbar-right">
                         <li>
                             <a href="{% url 'hosting:virtual_machines' %}">
                                 <i class="fa fa-server" aria-hidden="true"></i> {% trans "My Virtual Machines"%}
@@ -93,33 +95,14 @@
                             <li><a href="{% url 'hosting:logout' %}"><i class="glyphicon glyphicon-lock"></i>{% trans "Logout"%} </a></li>
                           </ul>
                         </li>
-                        <!-- 
-                        <li>
-                            <a href="{{ request.session.hosting_url}}#how">{% trans "How it works"%}</a>
-                        </li>
-                        <li>
-                            <a href="{{ request.session.hosting_url }}#your">{% trans "Your infrastructure"%}</a>
-                        </li>
-                       <li>
-                            <a href="{{ request.session.hosting_url }}#our">{% trans "Our inftrastructure"%}</a>
-                        </li>
-                        <li>
-                            <a href="{{ request.session.hosting_url }}#price">{% trans "Pricing" %}</a>
-                        </li>
-                        <li>
-                            <a href="{{ request.session.hosting_url }}#contact">{% trans "Contact"%}</a>
-                        </li>  
-                        <li>
-                            <a href="{% url 'hosting:login' %}?next={{request.current_path}}">{% trans "Login"%}</a>
-                        </li>  -->
-                </ul>
+                    </ul>
+                </div>
+                {% endif %}
+                <!-- /.navbar-collapse -->
             </div>
-            {% endif %}
-            <!-- /.navbar-collapse -->
-        </div>
-        <!-- /.container -->
-    </nav>
-
+            <!-- /.container -->
+        </nav>
+    {% endblock navbar %}
 
 
     <div class="content-dashboard">
diff --git a/hosting/templates/hosting/includes/_navbar_transparent.html b/hosting/templates/hosting/includes/_navbar_transparent.html
new file mode 100644
index 00000000..31bbe6bf
--- /dev/null
+++ b/hosting/templates/hosting/includes/_navbar_transparent.html
@@ -0,0 +1,11 @@
+{% load static i18n %}
+
+<nav class="navbar navbar-default  navbar-fixed-top topnav navbar-transparent" role="navigation">
+    <div class="container topnav">
+        <!-- Brand and toggle get grouped for better mobile display -->
+        <div class="navbar-header">
+            <a id="logoWhite" class="navbar-brand topnav" href="{% if site_url %}{{site_url}}{% else %}{{ request.session.hosting_url}}{% endif %}"><img src="{% static 'datacenterlight/img/logo_white.svg' %}"></a>
+        </div>
+    </div>
+    <!-- /.container -->
+</nav>
\ No newline at end of file
diff --git a/hosting/templates/hosting/login.html b/hosting/templates/hosting/login.html
index 3ae7b7c2..12c9eba6 100644
--- a/hosting/templates/hosting/login.html
+++ b/hosting/templates/hosting/login.html
@@ -1,18 +1,23 @@
 {% extends "hosting/base_short.html" %}
 {% load i18n %}
 {% load staticfiles bootstrap3%}
+
+{% block navbar %}
+    {% include  'hosting/includes/_navbar_transparent.html' %}
+{% endblock navbar %}
+
 {% block content %}
 
 <div class="auth-container">
     <div class="auth-bg"></div>
 
         <div class="auth-center">
-            
+
             <div class="auth-title">
                 <h2>{% trans "Your VM hosted in Switzerland"%}</h2>
             </div>
             <div class="auth-content">
-                
+
                 <div class="intro-message auth-box">
                     <h2 class="section-heading">{% trans "Login"%}</h2>
                     <form action="{% url 'hosting:login' %}" method="post" class="form" novalidated>
@@ -26,8 +31,8 @@
                                 {% trans "Login"%}
                             </button>
                         {% endbuttons %}
-						
-						<input type='hidden' name='next' value='{{request.GET.next}}'/> 
+
+						<input type='hidden' name='next' value='{{request.GET.next}}'/>
                     </form>
                     <div class="auth-footer">
                         <div class="text">
diff --git a/hosting/templates/hosting/reset_password.html b/hosting/templates/hosting/reset_password.html
index be9fb82b..b24546c5 100644
--- a/hosting/templates/hosting/reset_password.html
+++ b/hosting/templates/hosting/reset_password.html
@@ -2,6 +2,11 @@
 {% load staticfiles bootstrap3%}
 {% load i18n %}
 
+{% block navbar %}
+    {% include  'hosting/includes/_navbar_transparent.html' %}
+{% endblock navbar %}
+
+
 {% block content %}
 <div class="auth-container">
    <div class="auth-bg"></div>
@@ -10,7 +15,7 @@
                 <h2>{% trans "Your VM hosted in Switzerland"%}</h2>
             </div>
             <div class="auth-content">
-                
+
                 <div class="intro-message auth-box sign-up">
                     <h2  class="section-heading">{% trans "Reset your password"%}</h2>
                     <form action="{% url 'hosting:reset_password' %}" method="post" class="form" novalidate>
diff --git a/hosting/templates/hosting/signup.html b/hosting/templates/hosting/signup.html
index 959cf346..5d97a3b6 100644
--- a/hosting/templates/hosting/signup.html
+++ b/hosting/templates/hosting/signup.html
@@ -1,6 +1,10 @@
 {% extends "hosting/base_short.html" %}
 {% load staticfiles bootstrap3 i18n %}
 
+{% block navbar %}
+    {% include  'hosting/includes/_navbar_transparent.html' %}
+{% endblock navbar %}
+
 {% block content %}
 <div class="auth-container auth-signup">
    <div class="auth-bg"></div>
@@ -32,7 +36,7 @@
                     </div>
                 </div>
              </div>
-            
+
         </div>
 </div>
 {% endblock %}
