diff --git a/views/header.tt b/views/header.tt
index 881a455..bbee627 100644
--- a/views/header.tt
+++ b/views/header.tt
@@ -1,17 +1,46 @@
 
 <!-- Fixed navbar -->
-<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
-    <div class="container">
-        <div class="navbar-header">
-            <a class="navbar-brand" href="/">NetLib.re</a>
-            <p class="navbar-brand">
-            Un nom de domaine gratuit, administrable facilement.
-            </p>
-        </div>
+<nav class="navbar navbar-inverse  navbar-fixed-top">
+  <div class="container-fluid">
+    <!-- Brand and toggle get grouped for better mobile display -->
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mobile-menu" aria-expanded="false">
+        <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" href="/">NetLib.re</a>
+      <span class="navbar-brand hidden-xs">Un nom de domaine gratuit, administrable facilement.</span>
     </div>
-</div>
-<br />
-<br />
-<br />
-<br />
 
+    <!-- Collect the nav links, forms, and other content for toggling -->
+    <div class="collapse navbar-collapse" id="mobile-menu">
+      <ul class="nav navbar-nav navbar-right visible-xs">
+        <% IF login.defined %>
+            <li><a href="/user/home">Ma page</a></li>
+            <% IF admin == 1 %>
+                <li><a href="/admin">Administration</a></li>
+            <% END %>
+            <li><a href="/user/logout">Déconnexion</a></li>
+
+        <% ELSE %>
+        <form class="navbar-form"  role="form" action="/user/login" method="post" accept-charset="utf-8">
+            <div class="form-group">
+                <input type="text" name="login" class="form-control input-menu-mobile" id="login" placeholder="Votre identifiant" />
+                <input type="password" name="password" class="form-control input-menu-mobile" id="password" placeholder="Mot de passe" />
+            </div>
+            <button type="submit" class="btn btn-default input-menu-mobile">Connexion &rarr;</button>
+        </form>
+        <% END %>
+
+      </ul>
+    </div><!-- /.navbar-collapse -->
+  </div><!-- /.container-fluid -->
+</nav>
+
+
+<br />
+<br />
+<br />
+<br />
diff --git a/views/layouts/main.tt b/views/layouts/main.tt
index 4937a45..83ea7ae 100644
--- a/views/layouts/main.tt
+++ b/views/layouts/main.tt
@@ -10,6 +10,7 @@
 
 <link rel="stylesheet" href="/css/bootstrap-theme.min.css">
 <link rel="stylesheet" href="/css/bootstrap.min.css">
+<link rel="stylesheet" href="/css/dnsmanager.css">
 <script src="/js/bootstrap.min.js"></script>
 <script src="/js/npm.js"></script>
 
@@ -19,7 +20,7 @@
 
         <div class="container">
             <% content %>
-            
+
             <div class="row">
                 <div class="col-md-12">
                     <div class="well" id="footer">
diff --git a/views/sidebar.tt b/views/sidebar.tt
index 66f1eaf..417b197 100644
--- a/views/sidebar.tt
+++ b/views/sidebar.tt
@@ -1,121 +1,103 @@
 <div class="row">
-<div class="col-sm-3 col-xs-12">
+	<div class="col-md-3 col-sm-4 hidden-xs">
 
-    <div class="panel panel-primary">
-        <div class="panel-heading">
-            <h3 class="panel-title">Navigation</h3>
-        </div>
+		<div class="panel panel-primary">
+			<div class="panel-heading">
+				<h3 class="panel-title">Navigation</h3>
+			</div>
 
-        <div class="panel-body">
-            <% IF login.defined %>
+			<div class="panel-body">
+				<% IF login.defined %>
 
-            Salut <% login %> !
-            <hr />
+					Salut
+					<% login %> !
+						<hr />
 
-            <div class="btn-group-vertical" role="group">
-                <a href="/user/logout">
-                    <button type="button"
-                            class="btn btn-default btn-lg list-group-item">
-                        Déconnexion
-                    </button>
-                </a>
-                <a href='/user/home'>
-                    <button type="button"
-                            class="btn btn-default btn-lg list-group-item">
-                        Ma page
-                    </button>
-                </a>
+						<div class="btn-group-vertical sidebar-group" role="group">
+							<a href="/user/logout">
+								<button type="button" class="btn btn-default btn-lg list-group-item">Déconnexion</button>
+							</a>
+							<a href='/user/home'>
+								<button type="button" class="btn btn-default btn-lg list-group-item">Ma page</button>
+							</a>
 
-                <% IF admin == 1 %>
-                <a href='/admin'>
-                    <button type="button"
-                            class="btn btn-default btn-lg list-group-item">
-                        Administration
-                    </button>
-                </a>
-                <% END %>
+							<% IF admin == 1 %>
+								<a href='/admin'>
+									<button type="button" class="btn btn-default btn-lg list-group-item">Administration</button>
+								</a>
+							<% END %>
 
-                <% IF domain.defined %>
-                <!-- Button trigger modal -->
-                <button type="button"
-                        class="btn btn-danger btn-lg"
-                        data-toggle="modal"
-                        data-target="#suppressionZoneModal">
-                    Supprimer
-                </button>
+							<% IF domain.defined %>
+								<!-- Button trigger modal -->
+								<button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#suppressionZoneModal">Supprimer</button>
 
-                <!-- Modal -->
-                <div class="modal fade" id="suppressionZoneModal"
-                                        tabindex="-1"
-                                        role="dialog"
-                                        aria-labelledby="myModalLabel">
-                    <div class="modal-dialog" role="document">
-                        <div class="modal-content">
-                            <div class="modal-header">
+								<!-- Modal -->
+								<div class="modal fade" id="suppressionZoneModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+									<div class="modal-dialog" role="document">
+										<div class="modal-content">
+											<div class="modal-header">
 
-                                <button type="button" class="close"
-                                                      data-dismiss="modal"
-                                                      aria-label="Close">
-                                    <span aria-hidden="true">&times;</span>
-                                </button>
+												<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                                    <span aria-hidden="true">&times;</span>
+                                                </button>
 
-                                <h4 class="modal-title"
-                                    id="suppressionZoneModalLabel">
-                                    Voulez-vous vraiment supprimer la zone ?
-                                </h4>
-                            </div>
+												<h4 class="modal-title" id="suppressionZoneModalLabel">
+                                                    Voulez-vous vraiment supprimer la zone ?
+                                                </h4>
+											</div>
 
-                            <div class="modal-body">
-                                Supprimer sa zone est irréversible.
-                            </div>
+											<div class="modal-body">
+												Supprimer sa zone est irréversible.
+											</div>
 
-                            <div class="modal-footer">
-                                <button type="button" class="btn btn-default"
-                                                      data-dismiss="modal">
-                                    Non j'aime ma zone !
-                                </button>
-                                <a href="/domain/del/<% domain %>">
-                                    <button type="button"
-                                            class="btn btn-danger">
-                                        Supprimer la zone
-                                    </button>
-                                </a>
-                            </div>
+											<div class="modal-footer">
+												<button type="button" class="btn btn-default" data-dismiss="modal">
+                                                    Non j'aime ma zone !
+                                                </button>
+                                                <a href="/domain/del/<% domain %>">
+												    <button type="button" class="btn btn-danger">
+                                                    Supprimer la zone
+                                                    </button>
+												</a>
+											</div>
 
-                        </div>
-                    </div>
-                </div>
+										</div>
+									</div>
+								</div>
 
-                <% END %>
-            </div>
+							<% END %>
+						</div>
 
-            <% IF domains.defined && domains.size > 0 %>
-            <hr />
-            <p>Mes domaines</p>
-            <% FOREACH domain IN domains %>
-            <a href="/domain/details/<% domain.domain %>"><% domain.domain %></a><br />
-            <% END %>
-            <% END %>
+						<% IF domains.defined && domains.size > 0 %>
+							<hr />
+							<p>Mes domaines</p>
+							<% FOREACH domain IN domains %>
+								<a href="/domain/details/<% domain.domain %>">
+									<% domain.domain %>
+								</a><br />
+							<% END %>
+						<% END %>
 
-            <% ELSE %>
-            <form class="form" role="form" action="/user/login" method="post" accept-charset="utf-8">
-                <div class="form-group">
-                    <fieldset>
-                        <legend>Se connecter :</legend>
-                        <label for="login">Votre identifiant : </label>
-                        <input type="text" name="login" class="form-control" id="login" placeholder="Votre identifiant" />
+						<% ELSE %>
+							<form class="form" role="form" action="/user/login" method="post" accept-charset="utf-8">
+								<div class="form-group">
+									<fieldset>
+										<legend>Se connecter :</legend>
+										<label for="login">Votre identifiant : </label>
+										<input type="text" name="login" class="form-control" id="login" placeholder="Votre identifiant" />
 
-                        <label for="password">Votre mot de passe : </label>
-                        <input type="password" name="password" class="form-control" id="password" placeholder="Mot de passe" />
+										<label for="password">Votre mot de passe : </label>
+										<input type="password" name="password" class="form-control" id="password" placeholder="Mot de passe" />
 
-                        <br />
-                        <button type="submit" class="btn btn-default">Connexion &rarr;</button>
-                    </fieldset>
-                </div>
-            </form>
+										<br />
+										<button type="submit" class="btn btn-default">Connexion &rarr;</button>
+									</fieldset>
+								</div>
+							</form>
 
-            <% END %>
-        </div>
-    </div>
-</div><!-- /.col-sm-2 -->
-<div class="col-sm-8">
+						<% END %>
+			</div>
+		</div>
+	</div>
+	<!-- /.col-sm-2 -->
+	<div class="col-sm-8">