diff --git a/datacenterlight/static/datacenterlight/css/hosting.css b/datacenterlight/static/datacenterlight/css/hosting.css
index c64eca96..1c6d9f4e 100644
--- a/datacenterlight/static/datacenterlight/css/hosting.css
+++ b/datacenterlight/static/datacenterlight/css/hosting.css
@@ -118,6 +118,13 @@ h6 {
     }
 }
 
+.un-icon {
+  width: 15px;
+  height: 15px;
+  opacity: 0.5;
+  margin-top: -1px;
+}
+
 .network-name {
     text-transform: uppercase;
     font-size: 14px;
@@ -248,20 +255,6 @@ p.copyright {
     }
 }
 
-.footer-light {
-    position: relative;
-}
-.footer-light footer {
-    background: transparent;
-    color: #eee;
-}
-.footer-light a,
-.footer-light .text-muted {
-    color: #ddd;
-}
-.footer-light a:hover, .footer-light a:focus, .footer-light a:active {
-    color: #fff;
-}
 .footer-vm p.copyright {
     margin-top: 4px;
 }
@@ -590,4 +583,130 @@ p.copyright {
 
 .no-padding {
     padding: 0 !important;
+}
+
+/* hosting-order */
+.order-detail-container {
+    max-width: 600px;
+    margin: 100px auto 40px;
+    border: 1px solid #ccc;
+    padding: 30px 30px 20px;
+}
+
+.order-detail-container .dashboard-title-thin {
+    margin-top: 0;
+    margin-left: -3px;
+}
+
+.order-detail-container .dashboard-title-thin .un-icon {
+    margin-top: -6px;
+}
+
+.order-detail-container .dashboard-container-head {
+    position: relative;
+    padding: 0;
+    margin-bottom: 38px;
+}
+
+.order-detail-container .order-details {
+    margin-bottom: 15px;
+}
+
+.order-detail-container .order-details strong {
+    color: #595959;
+}
+
+.order-detail-container h4 {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.order-detail-container p {
+    margin-bottom: 5px;
+    color: #595959;
+}
+
+.order-detail-container hr {
+    margin: 15px 0;
+}
+
+@media (max-width: 767px) {
+    .order-detail-container {
+        padding: 15px;
+    }
+    .order-confirm-btn {
+        text-align: center;
+        margin-top: 10px;
+    }
+    .order-detail-container .dashboard-container-options {
+        position: absolute;
+        top: 4px;
+        right: -4px;
+    }
+    .order-detail-container .dashboard-container-options .svg-img {
+        height: 16px;
+        width: 16px;
+    }
+}
+
+.order_detail_footer {
+    font-size: 9px;
+    letter-spacing: 1px;
+    color: #333333;
+}
+
+.order_detail_footer strong {
+    font-size: 11px;
+}
+
+#virtual_machine_create_form {
+    padding: 15px 0;
+}
+
+.dashboard-title-thin {
+  font-weight: 300;
+  font-size: 32px;
+}
+
+.dashboard-title-thin .un-icon {
+  height: 34px;
+  margin-right: 5px;
+  margin-top: -2px;
+  width: 34px;
+  vertical-align: middle;
+}
+
+@media (max-width:767px) {
+  .dashboard-title-thin {
+    font-size: 22px;
+  }
+  .dashboard-title-thin .un-icon {
+    height: 22px;
+    width: 22px;
+    margin-top: -3px;
+  }
+}
+
+
+.locale_date {
+  opacity: 0;
+}
+
+.locale_date.done{
+  opacity: 1;
+}
+
+.btn-vm-back {
+  color: #fff;
+  background: #C4CEDA;
+  border: 2px solid #C4CEDA;
+  padding: 5px 25px;
+  font-size: 12px;
+  letter-spacing: 1.3px;
+}
+.btn-vm-back:hover, .btn-vm-back:focus {
+  color: #fff;
+  background: #8da4c0;
+  border-color: #8da4c0;
 }
\ No newline at end of file
diff --git a/datacenterlight/templates/datacenterlight/base_hosting.html b/datacenterlight/templates/datacenterlight/base_hosting.html
index d88d49f8..ebe779cb 100644
--- a/datacenterlight/templates/datacenterlight/base_hosting.html
+++ b/datacenterlight/templates/datacenterlight/base_hosting.html
@@ -73,6 +73,9 @@
         </div>
     {% endif %}
 
+    <!-- Moment -->
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.js"></script>
     {% addtoblock "vendor_js" %}
         <!-- jQuery -->
         <script src="{% static 'hosting/js/jquery.js' %}"></script>
diff --git a/datacenterlight/templates/datacenterlight/order_detail.html b/datacenterlight/templates/datacenterlight/order_detail.html
index 79119777..6b103970 100644
--- a/datacenterlight/templates/datacenterlight/order_detail.html
+++ b/datacenterlight/templates/datacenterlight/order_detail.html
@@ -1,24 +1,135 @@
 {% extends "datacenterlight/base_hosting.html" %}
-{% load i18n %}
+{% load staticfiles bootstrap3 i18n custom_tags %}
 
-{% block navbar %}
-    {% include "datacenterlight/includes/_navbar.html" %}
-{% endblock navbar %}
+{% block content %}
+<div id="order-detail{{order.pk}}" class="order-detail-container">
+    {% if messages %}
+        <div class="alert alert-warning">
+            {% for message in messages %}
+                <span>{{ message }}</span>
+            {% endfor %}
+        </div>
+    {% endif %}
+    {% if not error %}
+        <div class="dashboard-container-head">
+            <h1 class="dashboard-title-thin">
+                <img src="{% static 'hosting/img/billing.svg' %}" class="un-icon">{% blocktrans with page_header_text=page_header_text|default:"Invoice" %}{{page_header_text}}{% endblocktrans %}
+            </h1>
+        </div>
+        <div class="order-details">
+            <p>
+                <strong>{% trans "Date" %}:</strong>
+                <span class="locale_date">
+                    {% now "Y-m-d h:i a" %}
+                </span>
+            </p>
+            <hr>
+            <div>
+                <address>
+                    <h4>{% trans "Billed to" %}:</h4>
+                    <p>
+                      {% with request.session.billing_address_data as billing_address %}
+                          {{billing_address.cardholder_name}}<br>
+                          {{billing_address.street_address}}, {{billing_address.postal_code}}<br>
+                          {{billing_address.city}}, {{billing_address.country}}
+                      {% endwith %}
+                    </p>
+                </address>
+            </div>
+            <hr>
+            <div>
+                <h4>{% trans "Payment method" %}:</h4>
+                <p>
+                    {{cc_brand|default:_('Credit Card')}} {% trans "ending in" %} ****{{cc_last4}}<br>
+                    {{request.user.email}}
+                </p>
+            </div>
+            <hr>
+            <div>
+                <h4>{% trans "Order summary" %}</h4>
+                <p>
+                    <strong>{% trans "Product" %}:</strong>&nbsp;
+                    {{ request.session.template.name }}
+                </p>
+                <div class="row">
+                    <div class="col-sm-6">
+                        <p>
+                            <span>{% trans "Cores" %}: </span>
+                            <span class="pull-right">{{vm.cpu|floatformat}}</span>
+                        </p>
+                        <p>
+                            <span>{% trans "Memory" %}: </span>
+                            <span class="pull-right">{{vm.memory}} GB</span>
+                        </p>
+                        <p>
+                            <span>{% trans "Disk space" %}: </span>
+                            <span class="pull-right">{{vm.disk_size}} GB</span>
+                        </p>
+                        <p>
+                            <span>{% trans "Total" %}</span>
+                            <span class="pull-right">{{vm.price}} CHF</span>
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <hr>
+        </div>
+        <form id="virtual_machine_create_form" action="" method="POST">
+            {% csrf_token %}
+            <div class="row">
+                <div class="col-sm-8">
+                    <div class="dcl-place-order-text">{% blocktrans with vm_price=request.session.specs.price %}By clicking "Place order" this plan will charge your credit card account with the fee of {{ vm_price }}CHF/month{% endblocktrans %}.</div>
+                </div>
+                <div class="col-sm-4 order-confirm-btn text-right">
+                    <button class="btn choice-btn" id="btn-create-vm" data-toggle="modal" data-target="#createvm-modal">
+                      {% trans "Place order" %}
+                    </button>
+                </div>
+            </div>
+        </form>
+    {% endif %}
+</div>
 
-{% block submit_btn %}
-  <form id="virtual_machine_create_form" action="" method="POST">
-      {% csrf_token %}
-      <div class="row">
-          <div class="col-sm-8">
-              <div class="dcl-place-order-text">{% blocktrans with vm_price=request.session.specs.price %}By clicking "Place order" this plan will charge your credit card account with the fee of {{ vm_price }}CHF/month{% endblocktrans %}.</div>
-          </div>
-          <div class="col-sm-4 order-confirm-btn text-right">
-              <button class="btn choice-btn" id="btn-create-vm"
-                      data-toggle="modal" data-target="#createvm-modal">
-				{% trans "Place order" %}
-              </button>
-          </div>
-      </div>
-  </form>
-{% endblock submit_btn %}
 
+<!-- Create VM Modal -->
+<div class="modal fade" id="createvm-modal" tabindex="-1" role="dialog"
+     aria-hidden="true" data-backdrop="static" data-keyboard="false">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+            </div>
+            <div class="modal-body">
+                <div class="modal-icon">
+                    <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
+                    <span class="sr-only">{% trans "Processing..." %}</span>
+                </div>
+                <h4 class="modal-title" id="createvm-modal-title"></h4>
+                <div class="modal-text" id="createvm-modal-body">
+                    {% trans "Hold tight, we are processing your request" %}
+                </div>
+                <div class="modal-footer">
+                    <a id="createvm-modal-done-btn" class="btn btn-success btn-ok btn-wide hide" href="{% url 'hosting:virtual_machines' %}">{% trans "OK" %}</a>
+                    <button id="createvm-modal-close-btn" type="button" class="btn btn-danger btn-ok btn-wide hide" data-dismiss="modal" aria-label="create-vm-close">{% trans "Close" %}</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- / Create VM Modal -->
+
+<script type="text/javascript">
+    {% trans "Some problem encountered. Please try again later." as err_msg %}
+    var create_vm_error_message = '{{err_msg|safe}}';
+    window.onload = function () {
+        var locale_dates = document.getElementsByClassName("locale_date");
+        var formats = ['YYYY-MM-DD hh:mm a']
+        var i;
+        for (i = 0; i < locale_dates.length; i++) {
+            var oldDate = moment.utc(locale_dates[i].textContent, formats);
+            var outputFormat = locale_dates[i].getAttribute('data-format') || oldDate._f;
+            locale_dates[i].innerHTML = oldDate.local().format(outputFormat);
+            locale_dates[i].className += ' done';
+        }
+    };
+</script>
+{%endblock%}
\ No newline at end of file