diff --git a/hosting/static/hosting/css/commons.css b/hosting/static/hosting/css/commons.css
index 156e1974..1ebae4b4 100644
--- a/hosting/static/hosting/css/commons.css
+++ b/hosting/static/hosting/css/commons.css
@@ -162,29 +162,75 @@
 
 /* ========= */
 @media(min-width: 320px) {
-   .modal:before {
-     content: '';
-     display: inline-block;
-     height: 100%;
-     vertical-align: middle;
-     margin-right: -4px;
-   }
- }
+  .modal:before {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+    margin-right: -4px;
+  }
+}
 
 
- @media (min-width: 768px) {
-   .modal-dialog {
+@media (min-width: 768px) {
+  .modal-dialog {
 /*        width: 520px; */
-       margin: 15px auto;
-   }
- }
+      margin: 15px auto;
+  }
+}
 
- .modal {
-   text-align: center;
- }
+.modal {
+  text-align: center;
+}
 
- .modal-dialog {
-   display: inline-block;
-   text-align: left;
-   vertical-align: middle;
- }
+.modal-dialog {
+  display: inline-block;
+  text-align: left;
+  vertical-align: middle;
+}
+
+.un-icon {
+  width: 15px;
+  height: 15px;
+  opacity: 0.5;
+  margin-top: -1px;
+}
+
+.css-plus {
+  position: relative;
+  width: 16px;
+  height: 20px;
+  display: inline-block;
+  vertical-align: middle;
+  /*   top: -1px; */
+}
+
+.css-plus + span {
+  vertical-align: middle;
+}
+
+.css-plus:before {
+  content: '';
+  width: 10px;
+  height: 2px;
+  background: #f6f7f9;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.css-plus:after {
+  content: '';
+  width: 2px;
+  height: 10px;
+  background: #f6f7f9;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
\ No newline at end of file
diff --git a/hosting/static/hosting/css/virtual-machine.css b/hosting/static/hosting/css/virtual-machine.css
index e043879d..0dd89866 100644
--- a/hosting/static/hosting/css/virtual-machine.css
+++ b/hosting/static/hosting/css/virtual-machine.css
@@ -227,4 +227,147 @@
     .btn-create-vm {
       float: left !important; 
     }
+}
+
+/* New styles */
+.dashboard-title-thin {
+  font-weight: 300;
+  font-size: 32px;
+}
+
+.dashboard-title-thin .un-icon {
+  height: 34px;
+  margin-right: 5px;
+  margin-top: -1px;
+  width: 20px;
+}
+
+.dashboard-subtitle {
+  font-weight: 300;
+  margin-bottom: 25px;
+}
+
+.btn-vm {
+  background: #1596DA;
+  color: #fff;
+  font-weight: 400;
+  letter-spacing: 0.8px;
+  border-radius: 3px;
+  padding-bottom: 7px;
+  border: 2px solid #1596DA;
+}
+
+.btn-vm:hover, .btn-vm:focus {
+  color: #1596DA;
+  background: #fff;
+}
+.btn-vm:hover .css-plus:after,
+.btn-vm:focus .css-plus:after,
+.btn-vm:hover .css-plus:before,
+.btn-vm:focus .css-plus:before {
+  background: #1596DA;
+}
+.btn-vm-detail {
+  background: #3770CC;
+  color: #fff;
+  font-weight: 400;
+  letter-spacing: 0.6px;
+  font-size: 14px;
+  border-radius: 3px;
+  border: 2px solid #3770CC;
+  padding: 4px 20px;
+  /*   padding-bottom: 7px; */
+}
+
+.btn-vm-detail:hover, .btn-vm-detail:focus {
+  background: #fff;
+  color: #3770CC;
+}
+
+.vm-status, .vm-status-active, .vm-status-failed {
+  font-weight: 600;
+}
+.vm-status-active {
+  color: #4A90E2;
+}
+.vm-status-failed {
+  color: #eb4d5c;
+}
+
+@media (min-width:768px) {
+  .dashboard-subtitle {
+    display: flex;
+    justify-content: space-between;
+    font-size: 16px;
+  }
+}
+@media (max-width:767px) {
+  .dashboard-title-thin {
+    font-size: 22px;
+  }
+  .dashboard-title-thin .un-icon {
+    height: 20px;
+    width: 18px;
+    margin-top: -3px;
+  }
+  .dashboard-subtitle p {
+    width: 200px;
+  }
+}
+
+.table-switch {
+  color: #555;
+}
+
+.table-switch > tbody > tr > td {
+  padding: 12px 8px;
+}
+
+@media (min-width: 768px) {
+  .table-switch > tbody > tr > td:nth-child(1) {
+    padding-right: 45px;
+  }
+}
+
+.table-switch .un-icon {
+  margin-left: 5px;
+}
+
+@media (max-width:767px) {
+  .dashboard-subtitle {
+    margin-bottom: 15px;
+  }
+  .table-switch .un-icon {
+    float: right;
+    margin-top: 0;
+  }
+  .table-switch thead {
+    display: none;
+  }
+  .table-switch tbody tr {
+    display: block;
+    position: relative;
+    border-top: 1px solid #ddd;
+    margin-top: 15px;
+    padding-top: 5px;
+  }
+  .table-switch tbody tr td {
+    display: block;
+    padding-top: 28px;
+    padding-bottom: 6px;
+    position: relative;
+    border: 0;
+  }
+  .table-switch td:before {
+    content: attr(data-header);
+    font-weight: 600;
+    position: absolute;
+    top: 5px;
+
+  }
+  .table-switch .last-td {
+    position: absolute;
+    bottom: 5px;
+    right: 0;
+  }
 }
\ No newline at end of file
diff --git a/hosting/static/hosting/img/copy.svg b/hosting/static/hosting/img/copy.svg
new file mode 100644
index 00000000..c30b5922
--- /dev/null
+++ b/hosting/static/hosting/img/copy.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+<g><path d="M691,160.8V10H269.5C206.3,72.6,143.1,135.2,80,197.8v641.4h227.9V990H920V160.8H691z M269.5,64.4v134.4H133.1C178.5,154,224,109.2,269.5,64.4z M307.9,801.2H117.5V236.8h190.5V47.9h344.5v112.9h-154c-63.5,62.9-127,125.9-190.5,188.8V801.2z M499.5,215.2v134.5H363.1v-1c45.1-44.5,90.2-89,135.3-133.5L499.5,215.2z M881.5,952h-535V386.6H538V198.8h343.5V952z"/></g>
+</svg>
\ No newline at end of file
diff --git a/hosting/static/hosting/img/vm.svg b/hosting/static/hosting/img/vm.svg
new file mode 100644
index 00000000..376e7d0a
--- /dev/null
+++ b/hosting/static/hosting/img/vm.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+<g><path d="M724.6,224.4c0,28.2,22.9,51,51,51s51-22.9,51-51c0-28.2-22.9-51-51-51S724.6,196.2,724.6,224.4z M724.6,551c0,28.2,22.9,51,51,51s51-22.9,51-51c0-28.2-22.9-51-51-51S724.6,522.9,724.6,551L724.6,551z M10,683.7c0,45.1,36.5,81.7,81.7,81.7h347.1v56.4c-10,6.7-18.6,15.3-25.3,25.3l-250.3,0c-28.2,0-51,22.9-51,51s22.9,51,51,51h250.3c16.5,24.7,44.5,40.8,76.4,40.8c31.8,0,59.8-16.1,76.4-40.8h270.7c28.2,0,51-22.9,51-51s-22.9-51-51-51H566.2c-6.7-10-15.3-18.6-25.3-25.3v-56.3h367.5c45.1,0,81.7-36.5,81.7-81.7V91.7c0-45.1-36.5-81.7-81.7-81.7H91.7C46.5,10,10,46.5,10,91.7L10,683.7L10,683.7z M157,112.1h686c24.9,0,44.9,20,44.9,44.9v134.7c0,24.9-20,44.9-44.9,44.9H157c-24.9,0-44.9-20-44.9-44.9V157C112.1,132.1,132.1,112.1,157,112.1L157,112.1L157,112.1z M157,438.7h686c24.9,0,44.9,20,44.9,44.9v134.7c0,24.9-20,44.9-44.9,44.9H157c-24.9,0-44.9-20-44.9-44.9V483.7C112.1,458.8,132.1,438.7,157,438.7L157,438.7L157,438.7z"/></g>
+</svg>
\ No newline at end of file
diff --git a/hosting/templates/hosting/virtual_machines.html b/hosting/templates/hosting/virtual_machines.html
index c149be41..5ee9e1ff 100644
--- a/hosting/templates/hosting/virtual_machines.html
+++ b/hosting/templates/hosting/virtual_machines.html
@@ -1,6 +1,75 @@
 {% extends "hosting/base_short.html" %}
 {% load staticfiles bootstrap3 i18n %}
 {% block content %}
+<div class="dashboard-container">
+    <h3 class="dashboard-title-thin"><img src="{% static 'hosting/img/vm.svg' %}" class="un-icon"> {% trans "Virtual Machines" %}</h3>
+    <div class="dashboard-subtitle">
+        <p>{% trans 'To create a new virtual machine, click "Create VM"' %}</p>
+        <div class="text-right">
+            <a class="btn btn-vm" href="{% url 'hosting:create_virtual_machine' %}"><span class="css-plus"></span> <span>{% trans "CREATE VM"%}</span></a>
+        </div>
+    </div>
+
+    <table class="table table-switch">
+        <thead>
+            <tr>
+                <th>ID</th>
+                <th>Ipv4</th>
+                <th>Ipv6</th>
+                <th>{% trans "Status" %}</th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for vm in vms %}
+            <tr>
+                <td data-header="ID">{{vm.vm_id}}</td>
+                {% if vm.ipv6  %}
+                    <td data-header="Ipv4">{{vm.ipv4}}</td>
+                    <td data-header="Ipv6">{{vm.ipv6}}</td>
+                {% endif %}
+                <td data-header="{% trans 'Status' %}">
+                    {% if vm.state == 'ACTIVE' %}
+                        <span class="vm-status-active"><strong>{{vm.state}}</strong></span>
+                    {% elif  vm.state == 'FAILED' %}
+                        <span class="vm-status-failed"><strong>{{vm.state}}</strong></span>
+                    {% else %}
+                        <span class="vm-status"><strong>{{vm.state}}</strong></span>
+                    {% endif %}
+
+                </td>
+                <td class="text-right last-td">
+                    <a class="btn btn-vm-detail" href="{% url 'hosting:virtual_machines' vm.vm_id %}">{% trans "View Detail"%}</a>
+                </td>
+            </tr>
+            {% endfor %}
+            <tr>
+                <td data-header="ID">13638</td>
+                <td data-header="Ipv4">185.203.112.75 <img src="{% static 'hosting/img/copy.svg' %}" class="un-icon"></td>
+                <td data-header="Ipv6">2a0a:e5c0:0:2:400:b3ff:fe39:7996 <img src="{% static 'hosting/img/copy.svg' %}" class="un-icon"></td>
+                <td data-header="{% trans 'Status' %}">
+                    <span class="vm-status-active">Active</span>
+                </td>
+                <td class="text-right last-td">
+                    <a class="btn btn-vm-detail" href="/hosting/my-virtual-machines/13638">View Detail</a>
+                </td>
+            </tr>
+            <tr>
+                <td data-header="ID">13638</td>
+                <td data-header="Ipv4">185.203.112.75 <img src="{% static 'hosting/img/copy.svg' %}" class="un-icon"></td>
+                <td data-header="Ipv6">2a0a:e5c0:0:2:400:b3ff:fe39:7996 <img src="{% static 'hosting/img/copy.svg' %}" class="un-icon"></td>
+                <td data-header="Status">
+                    <span class="vm-status-failed">Failed</span>
+                </td>
+                <td class="text-right last-td">
+                    <a class="btn btn-vm-detail" href="/hosting/my-virtual-machines/13638">View Detail</a>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+{% comment %}
 <div>
 	<div class="dashboard-container">
 		<div class="row">
@@ -78,12 +147,11 @@
 			            </span>
 			        </div>
 			    {% endif %}
-
 			</div>
 
 	    </div>
 	</div>
 
 </div>
-
+{% endcomment %}
 {%endblock%}