diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css
index ba2546c8..66585578 100755
--- a/datacenterlight/static/datacenterlight/css/landing-page.css
+++ b/datacenterlight/static/datacenterlight/css/landing-page.css
@@ -794,17 +794,20 @@ tech-sub-sec h2 {
     font-size: 40px;
     line-height: 55px;
 }
-
-.space-middle {
-    padding: 45px 0;
+.space-middle{
+	padding: 45px 0;
+	display: inline-block;
 }
-
-.padding-vertical {
-    padding: 35px 0;
+.ssdimg {
+	vertical-align: middle;
+	display: inline-block;
+}
+.padding-vertical{
+	padding: 30px 9px;
 }
 
 .percent-text img {
-    margin-left: 20px;
+    /* margin-left: 20px; */
 }
 
 .space-block {
@@ -1085,24 +1088,24 @@ tech-sub-sec h2 {
 }
 
 @media(max-width:767px) {
-    .percent-text {
-        font-size: 50px;
-    }
-    #tech_stack h3 {
-        font-size: 30px;
-        line-height: 40px;
-        width: 100%;
-    }
-    .navbar-nav .open .dropdown-menu {
-        text-align: left;
-        font-size: 12px;
-    }
-    .visible-mobile {
-        display: block;
-    }
-    .visible-desktop {
-        display: none !important;
-    }
+	.percent-text {
+		/* font-size: 50px; */
+	}
+	#tech_stack h3 {
+		font-size: 30px;
+		line-height: 40px;
+		width: 100%;
+	}
+	.navbar-nav .open .dropdown-menu {
+    text-align: left;
+    font-size: 12px;
+	}
+	.visible-mobile {
+	display:block;
+	}
+	.visible-desktop {
+	display:none !important;
+	}
     .navbar-default .navbar-nav>.open>a,
     .navbar-default .navbar-nav>.open>a:focus,
     .navbar-default .navbar-nav>.open>a:hover {
@@ -1158,11 +1161,12 @@ tech-sub-sec h2 {
 
 @media(max-width:768px) {
     .percent-text {
-        font-size: 43px;
+        /* font-size: 43px; */
     }
-    .tech-sub-sec h2 {
-        font-size: 30px;
-        line-height: 40px;
+	   .tech-sub-sec h2 {
+        /* font-size: 30px; */
+        /* line-height: 40px; */
+        /* font-weight: 500; */
     }
     .single-heading h2 {
         font-size: 50px;
@@ -1348,7 +1352,9 @@ tech-sub-sec h2 {
         padding: 30px;
     }
     .percent-text {
-        text-align: center;
+        font-family: 'Lato';
+    	font-size: 31px;
+    	/* text-align: center; */
     }
     .pricing-section .card {
         width: 90%;
@@ -1472,3 +1478,33 @@ a#forgotpassword {
 .error-message-box {
     margin-top: 20px;
 }
+
+.flex-row-rev {
+	margin-top: 25px;
+}
+
+@media (min-width: 768px) {
+	.flex-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+	.flex-row .percent-text {
+		flex-shrink : 0;
+		padding: 0 15px;
+	}
+	.flex-row .percent-text,
+	.flex-row .desc-text {
+		max-width: 600px;
+	}
+	.flex-row-rev .percent-text {
+		order: 2;
+	}
+	.flex-row-rev {
+		margin-bottom: 25px;
+	}
+}
+
+.w380 {
+	max-width: 380px !important;
+}
\ No newline at end of file
diff --git a/datacenterlight/templates/datacenterlight/beta_success.html b/datacenterlight/templates/datacenterlight/beta_success.html
index 327198e7..2512a05c 100644
--- a/datacenterlight/templates/datacenterlight/beta_success.html
+++ b/datacenterlight/templates/datacenterlight/beta_success.html
@@ -2,19 +2,18 @@
 {% load i18n %}
 
 <div class="modal fade bs-example-modal-sm" style="color:black;"  id="successModal" tabindex="-1" role="dialog">
-    <div class="vertical-alignment-helper">
-        <div class="modal-dialog vertical-align-center">
-			<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>
-				<h4 class="modal-title">{% trans "Request Sent" %}</h4>
-			  </div>
-			  <div class="modal-body">
-				<p>{% trans "Thank you for your subscription! You will receive a confirmation mail from our team" %}</p>
-			  </div>
-			</div><!-- /.modal-content -->
-		</div>
-	</div>
+    <div class="modal-dialog">
+        <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>
+            </div>
+            <div class="modal-body">
+              <div class="modal-icon"><i class="fa fa-check" aria-hidden="true"></i></div>
+              <h4 class="modal-title">{% trans "Request Sent" %}</h4>
+              <p class="modal-text">{% trans "Thank you for your subscription! You will receive a confirmation mail from our team" %}</p>
+            </div>
+        </div><!-- /.modal-content -->
+    </div>
 </div><!-- /.modal -->
 <script>
 	// Show modal
@@ -22,7 +21,7 @@
 	// close the modal after 3 seconds
 	setTimeout(function() {
 	    $('#successModal').modal('hide');
-	}, 5000);	
+	}, 5000);
 </script>
 <style>
 .vertical-alignment-helper {
diff --git a/datacenterlight/templates/datacenterlight/whydatacenterlight.html b/datacenterlight/templates/datacenterlight/whydatacenterlight.html
index 948a51b2..f080963d 100644
--- a/datacenterlight/templates/datacenterlight/whydatacenterlight.html
+++ b/datacenterlight/templates/datacenterlight/whydatacenterlight.html
@@ -64,7 +64,7 @@
                         <img class="img-responsive btm-space-tayga" src="{% static 'datacenterlight/img/tayga.png' %}" alt="Tayga">
                         <span class="logo-caption">{% trans "Our NAT64 gateway" %}</span>
                     </div>
-                    
+
                 </div>
             </div>
         </div>
@@ -98,30 +98,25 @@
         <hr class="thick-divider"/><!-- Divider -->
         <div class="space">
         <div class="container">
-            <div class="row">
-                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
-                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 tech-sub-sec">
-                        <h2>{% trans "We bring the future to you." %}</h2>
-                    </div>
-                    <div class="col-xs-12 col-sm-7 col-md-8 col-lg-8 text-left tech-sub-sec landscape-xs-6">
-                            <p class="lead new-lead">{% blocktrans %} Data Center Light uses the most modern technologies out there.<br>
-                            Your VM needs only IPv6. Data Center Light provides<br> transparent two-way IPv6/IPv4 translation.
-                            {% endblocktrans %}</p>
-                    </div>
-                    <div class="col-xs-12 col-sm-5 col-md-4 col-lg-4 percent-text text-right landscape-xs-6">
-                            100% <strong>IPv6</strong>
-                    </div>
+            <div class="tech-sub-sec">
+                <h2>{% trans "We bring the future to you." %}</h2>
+            </div>
+            <div class="flex-row flex-row-rev">
+                <div class="percent-text">
+                    100% <strong>IPv6</strong>
                 </div>
-                <div class="col-lg-12 space-block"></div>
-                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
-                    <div class="col-xs-12 col-sm-7 col-md-8 col-lg-8 percent-text landscape-xs-8">
-                            <span class="pull-left space-middle"> 100% <strong>SSD</strong></span> <span class="pull-left ssdimg"><img class="img-responsive" src="{% static 'datacenterlight/img/ssd.jpg' %}" alt="SSD"></span>
-                    </div>
-                    <div class="col-xs-12 col-sm-5 col-md-4 col-lg-4 text-right tech-sub-sec  padding-vertical landscape-xs-4">
-                        <div>
-                            <p class="lead new-lead">{% blocktrans %} No more spinning metal plates! Data Center Light uses only SSDs. We keep things faster and lighter. {% endblocktrans %}</p>
-                        </div>
-                    </div>
+                <div class="desc-text padding-vertical">
+                    <p class="lead new-lead">{% blocktrans %} Data Center Light uses the most modern technologies out there.<br>
+                    Your VM needs only IPv6. Data Center Light provides<br> transparent two-way IPv6/IPv4 translation.
+                    {% endblocktrans %}</p>
+                </div>
+            </div>
+            <div class="flex-row">
+                <div class="percent-text">
+                    <span class="space-middle"> 100% <strong>SSD</strong></span> <span class="ssdimg"><img class="img-responsive" src="{% static 'datacenterlight/img/ssd.jpg' %}" alt="SSD"></span>
+                </div>
+                <div class="desc-text padding-vertical w380">
+                    <p class="lead new-lead">{% blocktrans %} No more spinning metal plates! Data Center Light uses only SSDs. We keep things faster and lighter. {% endblocktrans %}</p>
                 </div>
             </div>
         </div>
@@ -154,6 +149,6 @@
          </div>
 
     </div>
-    
+
     <!-- End Why Data Center Light? -->
 {% endblock %}
diff --git a/hosting/static/hosting/css/commons.css b/hosting/static/hosting/css/commons.css
index c6d0ac05..0da317ba 100644
--- a/hosting/static/hosting/css/commons.css
+++ b/hosting/static/hosting/css/commons.css
@@ -1,22 +1,23 @@
 .dashboard-container {
-	padding-top:70px; padding-bottom: 70px;
-	width: 90%;
-	margin: 0 auto;
-	max-width: 768px;
+  padding-top:70px;
+  padding-bottom: 70px;
+  width: 90%;
+  margin: 0 auto;
+  max-width: 768px;
 }
 
 .content-dashboard{
-	min-height: 100vh;
-	width: 80%;
-	margin: 0 auto;
-	max-width: 1120px;
+  min-height: 100vh;
+  width: 80%;
+  margin: 0 auto;
+  max-width: 1120px;
 }
 .container-table{
-	margin-top: 35px;
-	overflow-y: hidden; 
+  margin-top: 35px;
+  overflow-y: hidden;
 }
 .container-table table{
-	overflow-y: auto; 
+  overflow-y: auto;
 }
 .borderless td {
     border: none !important;
@@ -36,28 +37,146 @@
 }
 
 .space-above {
-	margin-top: 4%;
+  margin-top: 4%;
 }
 
 .space-above-big {
-	margin-top: 20%;
+  margin-top: 20%;
 }
 
 .table>tbody>tr>td{
-	vertical-align: middle;
+  vertical-align: middle;
 }
 .fa-separate{
-	margin-right: 15px;
+  margin-right: 15px;
 }
 @media (max-width: 540px) {
     select {
-    	width: 280px; 
+      width: 280px;
     }
     .content-dashboard {
-	    width: 90%;
-	}
+      width: 90%;
+  }
 }
-
 .btn:focus, .btn:active:focus {
 	outline: 0;
-}
\ No newline at end of file
+}
+
+/***********Styles for Model********************/
+.modal-content {
+    border-radius: 0px;
+    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    width: 100%;
+  float: left;
+  border-radius: 0;
+  font-weight: 300;
+}
+
+.modal-header {
+  min-height: 25px;
+}
+
+.modal-header .close {
+    font-size: 75px;
+    font-weight: 300;
+    margin-top: 0;
+    position: absolute;
+    top: 0;
+    right: 15px;
+    z-index: 10;
+}
+
+.modal-header .close:focus {
+  outline: 0;
+}
+
+.modal-header {
+    border-bottom: 0px solid #e5e5e5;
+    padding: 0px 15px;
+    width: 100%;
+ }
+.modal-body {
+    text-align: center;
+    width: 100%;
+  float: left;
+  padding: 0px 30px 15px 30px;
+}
+.modal-body .modal-icon i {
+    font-size: 80px;
+    font-weight: 100;
+    color: #999;
+}
+.modal-title {
+    margin: 0;
+    line-height: 1.42857143;
+    font-size: 25px;
+    padding: 0;
+    font-family: 'Lato', sans-serif;
+}
+.modal-text {
+    padding-top: 15px;
+    font-size: 16px;
+}
+.modal-footer {
+    border-top: 0px solid #e5e5e5;
+    width: 100%;
+    float: left;
+    text-align: center;
+    padding: 15px 15px;
+}
+.modal-footer button[type="submit"] {
+  min-width: 80px;
+}
+@media (min-width: 1300px) {
+    .modal-dialog {/*     top: 30%; */width: 35%;}
+}
+@media (max-width: 1299px) {
+    .modal-dialog {
+/*     top: 20%; */
+    width: 43%;
+  }
+}
+@media (max-width: 900px) {
+    .modal-dialog {
+/*     top: 20%; */
+    width: 50%;
+  }
+}
+@media (max-width: 767px) {
+    .modal-dialog {
+/*     top: 30%; */
+    width: 90%;
+    margin: 0 auto !important;
+  }
+}
+
+
+
+/* ========= */
+@media(min-width: 320px) {
+   .modal:before {
+     content: '';
+     display: inline-block;
+     height: 100%;
+     vertical-align: middle;
+     margin-right: -4px;
+   }
+ }
+
+
+ @media (min-width: 768px) {
+   .modal-dialog {
+/*        width: 520px; */
+       margin: 15px auto;
+   }
+ }
+
+ .modal {
+   text-align: center;
+ }
+
+ .modal-dialog {
+   display: inline-block;
+   text-align: left;
+   vertical-align: middle;
+ }
diff --git a/hosting/templates/hosting/orders.html b/hosting/templates/hosting/orders.html
index 99aab23e..c9c1ca22 100644
--- a/hosting/templates/hosting/orders.html
+++ b/hosting/templates/hosting/orders.html
@@ -52,16 +52,13 @@
                                             </button>
                                         </div>
                                         <div class="modal-body">
-                                            <h4 class="modal-title" id="ModalLabel">{% trans "Do You want to delete your order?"%}</h4>
+                                            <div class="modal-icon"><i class="fa fa-trash" aria-hidden="true"></i></div>
+                                            <h4 class="modal-title" id="ModalLabel">{% trans "Do you want to delete your order?"%}</h4>
 
                                             <form method="post"
                                                   action="{% url 'hosting:delete_order' order.id %}">
                                                 {% csrf_token %}
                                                 <div class="modal-footer">
-                                                    <button type="button" class="btn btn-default"
-                                                            data-dismiss="modal">
-                                                        {% trans "Close"%}
-                                                    </button>
                                                     <button type="submit" class="btn btn-primary">{% trans "Delete"%}
                                                     </button>
                                                 </div>
@@ -71,7 +68,6 @@
                                 </div>
                             </div>
                         {% endfor %}
-
                         </tbody>
                     </table>
 
diff --git a/hosting/templates/hosting/user_keys.html b/hosting/templates/hosting/user_keys.html
index 47dec19e..7d9dd6e0 100644
--- a/hosting/templates/hosting/user_keys.html
+++ b/hosting/templates/hosting/user_keys.html
@@ -3,7 +3,7 @@
 {% block content %}
 <div>
 	<div class="container virtual-machine-container dashboard-container ">
-        <h2><i class="fa fa-key" aria-hidden="true"></i>&nbsp;{% trans "Your SSH Keys" %}</h2>
+        <h1 class="h1-thin"><i class="fa fa-key" aria-hidden="true"></i>&nbsp;{% trans "Your SSH Keys" %}</h1>
         {% if messages %}
         <div class="alert alert-warning">
             {% for message in messages %}
@@ -123,7 +123,6 @@
 
     window.onload = function () {
         {% for user_key in keys %}
-            // var locale_date = new Date(document.getElementById("ssh-created_at-{{user_key.id}}").textContent).toISOString();
             var locale_date = moment.utc(document.getElementById("ssh-created_at-{{user_key.id}}").textContent,'YYYY-MM-DD HH:mm').toDate();
             locale_date =  moment(locale_date).format("YYYY-MM-DD h:mm:ss a");
             document.getElementById('ssh-created_at-{{user_key.id}}').innerHTML = locale_date;
diff --git a/hosting/templates/hosting/virtual_machine_detail.html b/hosting/templates/hosting/virtual_machine_detail.html
index 441d6260..1ae26dc0 100644
--- a/hosting/templates/hosting/virtual_machine_detail.html
+++ b/hosting/templates/hosting/virtual_machine_detail.html
@@ -2,7 +2,7 @@
 {% load staticfiles bootstrap3 %}
 {% load i18n %}
 
-{% block content %} 
+{% block content %}
 <div>
 	<div class="virtual-machine-container dashboard-container ">
 		<div class="row">
@@ -46,19 +46,19 @@
 												<button type="link"
 					data-clipboard-text="{{virtual_machine.ipv4}}" id="copy_vm_id" class="to_copy btn btn-link"
 													data-toggle="tooltip"  data-placement="bottom" title="Copied"  data-trigger="click">
-														Ipv4: {{virtual_machine.ipv4}} <i class="fa fa-files-o" aria-hidden="true"></i> 
+														Ipv4: {{virtual_machine.ipv4}} <i class="fa fa-files-o" aria-hidden="true"></i>
 												</button>
 												<button type="link"
 					data-clipboard-text="{{virtual_machine.ipv6}}" id="copy_vm_id" class="to_copy btn btn-link"
 													data-toggle="tooltip"  data-placement="bottom" title="Copied"  data-trigger="click">
-														Ipv6: {{virtual_machine.ipv6}} <i class="fa fa-files-o" aria-hidden="true"></i> 
+														Ipv6: {{virtual_machine.ipv6}} <i class="fa fa-files-o" aria-hidden="true"></i>
 												</button>
 											</div>
 										{% else %}
 
 											<div class="pull-right right-place">
 												<span class="label label-warning"><strong>{% trans "Ip not assigned yet"%}</strong></span>
-												<i data-toggle="tooltip"  title="Your ip will be assigned soon" class="fa fa-info-circle" aria-hidden="true"></i> 
+												<i data-toggle="tooltip"  title="Your ip will be assigned soon" class="fa fa-info-circle" aria-hidden="true"></i>
 											</div>
 
 										{% endif %}
@@ -85,12 +85,12 @@
 								      </div>
 								      <div class="col-md-3">
 								        <div class="well text-center box-setting">
-								        	<i class="fa fa-hdd-o" aria-hidden="true"></i> 
+								        	<i class="fa fa-hdd-o" aria-hidden="true"></i>
 								        	<span>{% trans "Disk"%}</span>
 								        	<span class="label label-success">{{virtual_machine.disk_size|floatformat:2}} GB</span>
 								        </div>
 								      </div>
-								    </div><!--/row-->    
+								    </div><!--/row-->
 								  </div><!--/col-12-->
 								</div><!--/row-->
 								<div class="row">
@@ -106,7 +106,7 @@
 				            	<div class="row ">
 									<div class="col-md-12 inline-headers">
 										<h3>{% trans "Current pricing"%}</h3>
-										<span class="h3 pull-right"><strong>{{virtual_machine.price|floatformat}} CHF</strong>/month</span> 
+										<span class="h3 pull-right"><strong>{{virtual_machine.price|floatformat}} CHF</strong>/month</span>
 										<hr>
 									</div>
 				            	</div>
@@ -136,13 +136,13 @@
 										<div class="pull-right">
 											<form method="POST"
                  id="virtual_machine_cancel_form" class="cancel-form" action="{% url 'hosting:virtual_machines' virtual_machine.vm_id %}">
-											{% csrf_token %} 
-											</form>	
-												
+											{% csrf_token %}
+											</form>
+
 												<button type="text" data-href="{% url 'hosting:virtual_machines' virtual_machine.vm_id %}" data-toggle="modal" data-target="#confirm-cancel" class="btn btn-danger">{% trans "Terminate Virtual Machine"%}</button>
-																						
+
 										</div>
-    
+
 									</div>
                                     <div class="col-md-12">
                                         <br/>
@@ -159,14 +159,18 @@
 									<div class="modal fade" id="confirm-cancel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 									    <div class="modal-dialog">
 									        <div class="modal-content">
-									            <div class="modal-header">
-									                {% trans "Terminate your Virtual Machine"%}
-									            </div>
+												<div class="modal-header">
+													<button type="button" class="close" data-dismiss="modal"
+															aria-label="Confirm"><span
+															aria-hidden="true">&times;</span>
+													</button>
+												</div>
 									            <div class="modal-body">
-									                {% trans "Are you sure do you want to cancel your Virtual Machine "%} {{virtual_machine.name}} ?
+													<div class="modal-icon"><i class="fa fa-ban" aria-hidden="true"></i></div>
+													<h4 class="modal-title" id="ModalLabel">{% trans "Terminate your Virtual Machine"%}</h4>
+									                <p class="modal-text">{% trans "Are you sure do you want to cancel your Virtual Machine "%} {{virtual_machine.name}} ?</p>
 									            </div>
 									            <div class="modal-footer">
-									                <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Cancel"%}</button>
 									                <a class="btn btn-danger btn-ok">OK</a>
 									            </div>
 									        </div>