diff --git a/tuskar_ui/infrastructure/overview/templates/overview/_deployment_status.html b/tuskar_ui/infrastructure/overview/templates/overview/_deployment_status.html
deleted file mode 100644
index 90ee5759a..000000000
--- a/tuskar_ui/infrastructure/overview/templates/overview/_deployment_status.html
+++ /dev/null
@@ -1,106 +0,0 @@
-{% load i18n %}
-{% load url from future%}
-
-{% if stack %}
-  {% if stack.is_deleting or stack.is_delete_failed or stack.is_deploying or stack.is_failed %}
-    <div class="row">
-      <div class="col-xs-12">
-        <div class="alert alert-info">
-          <div class="row">
-            <div class="col-xs-2">
-              <strong>
-                {% if stack.is_deleting %}
-                  Undeploying...
-                {% elif stack.is_delete_failed %}
-                  Undeploying failed
-                {% elif stack.is_deploying %}
-                  Deploying...
-                {% elif stack.is_failed %}
-                  Deployment failed
-                {% endif %}
-              </strong>
-              <div class="progress progress-striped progress-danger">
-                <div class="bar bar-info" style="width:{{ progress }}%"></div>
-              </div>
-            </div>
-            <div class="col-xs-10">
-              {% if last_failed_events %}
-                <strong>{% trans "Last failed events:" %}</strong>
-                {% for event in last_failed_events %}
-                <div>
-                  <dl>
-                    <dt>{% trans "Timestamp" %}</dt>
-                    <dd><time datetime="{{ event.event_time }}">{{ event.event_time }}</time></dd>
-                    <dt>{% trans "Resource Name" %}</dt>
-                    <dd>{{ event.resource_name }}</dd>
-                    <dt>{% trans "Status" %}</dt>
-                    <dd>{{ event.resource_status }}</dd>
-                    <dt>{% trans "Reason" %}</dt>
-                    <dd>{{ event.resource_status_reason }}</dd>
-                  </dl>
-                </div>
-                {% endfor %}
-              {% endif %}
-              <a href="{% url 'horizon:infrastructure:history:index' %}" class="pull-right">See full log</a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  {% endif %}
-
-  {% if stack.is_deployed and not stack.is_initialized %}
-    <div class="row">
-      <div class="col-xs-12">
-        <div class="alert alert-info">
-          <div class="row">
-            <div class="col-xs-2">
-              <span class="text-success" style="font-size: x-large; vertical-align:middle">
-                <i class="glyphicon glyphicon-warning-sign"></i>
-              </span>
-            </div>
-            <div class="col-xs-10">
-              <p>{% trans "Your OpenStack cloud is deployed but it needs to get initialized in order to get live." %}</p>
-              <a href="{% url 'horizon:infrastructure:overview:post_deploy_init' %}"
-                 class="btn btn-primary ajax-modal">
-                 {% trans "Initialize" %}
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  {% else %}
-    Deployment is live
-    <div class="widget">
-      <h2>{% trans "Access Information" %}</h2>
-      {% for dashboard_url in dashboard_urls %}
-        <p>
-          <a href="{{ dashboard_url }}">
-            {% trans "Horizon URL" %} ({{ dashboard_url }})
-          </a>
-        </p>
-      {% endfor %}
-    </div>
-  {% endif %}
-  <hr>
-
-
-    <a href="{% url 'horizon:infrastructure:overview:undeploy_confirmation' %}"
-       class="btn btn-danger ajax-modal">
-      <i class="glyphicon glyphicon-fire"></i>
-      {% trans "Undeploy" %}
-    </a>
-{% else %}
-  <div class="text-success deployment-icon">
-      <i class="glyphicon glyphicon-ok-circle"></i>
-  </div>
-  <div class="deployment-box">
-    <h4>{% trans "Ready to get deployed" %}</h4>
-    <a href="{% url 'horizon:infrastructure:overview:deploy_confirmation' %}"
-     class="btn btn-danger ajax-modal btn-default">
-      <i class="glyphicon glyphicon-cloud-upload"></i>
-      {% trans "Deploy" %}
-    </a>
-  </div>
-{% endif %}
diff --git a/tuskar_ui/infrastructure/overview/templates/overview/deployment_base.html b/tuskar_ui/infrastructure/overview/templates/overview/deployment_base.html
new file mode 100644
index 000000000..51f579b31
--- /dev/null
+++ b/tuskar_ui/infrastructure/overview/templates/overview/deployment_base.html
@@ -0,0 +1,22 @@
+{% load i18n %}
+{% load url from future%}
+
+<div class="deployment-icon">
+  {% block deployment-icon %}
+    <i class="glyphicon glyphicon-cloud text-info"></i>
+  {% endblock %}
+</div>
+<div class="deployment-box clearfix">
+  <h4>{% block deployment-title %}{% endblock %}</h4>
+  {% block deployment-info %}{% endblock %}
+  <div class="deployment-buttons clearfix">
+    {% block deployment-buttons %}
+      <a
+    href="{% url 'horizon:infrastructure:overview:undeploy_confirmation' %}"
+    class="btn btn-danger ajax-modal">
+        <i class="glyphicon glyphicon-trash"></i>
+        {% trans "Undeploy" %}
+      </a>
+    {% endblock %}
+  </div>
+</div>
diff --git a/tuskar_ui/infrastructure/overview/templates/overview/deployment_failed.html b/tuskar_ui/infrastructure/overview/templates/overview/deployment_failed.html
new file mode 100644
index 000000000..74ce6d469
--- /dev/null
+++ b/tuskar_ui/infrastructure/overview/templates/overview/deployment_failed.html
@@ -0,0 +1,43 @@
+{% extends "infrastructure/overview/deployment_base.html" %}
+
+{% load i18n %}
+{% load url from future%}
+
+{% block deployment-icon %}
+  <i class="glyphicon glyphicon-remove-circle text-danger"></i>
+{% endblock %}
+
+{% block deployment-title %}
+            {% if stack.is_delete_failed %}
+                {% trans "Undeploying failed" %}
+            {% elif stack.is_failed %}
+                {% trans "Deployment failed" %}
+            {% else %}
+                {% trans "Failure" %}
+            {% endif %}
+{% endblock %}
+
+{% block deployment-info %}
+{% if last_failed_events %}
+<strong>{% trans "Last failed events:" %}</strong>
+{% for event in last_failed_events %}
+<div>
+  <dl>
+    <dt>{% trans "Timestamp" %}</dt>
+    <dd><time datetime="{{ event.event_time }}">{{ event.event_time }}</time></dd>
+    <dt>{% trans "Resource Name" %}</dt>
+    <dd>{{ event.resource_name }}</dd>
+    <dt>{% trans "Status" %}</dt>
+    <dd>{{ event.resource_status }}</dd>
+    <dt>{% trans "Reason" %}</dt>
+    <dd>{{ event.resource_status_reason }}</dd>
+  </dl>
+</div>
+{% endfor %}
+{% endif %}
+<p><a href="{% url 'horizon:infrastructure:history:index' %}">See full log</a></p>
+{% endblock %}
+
+{% block deployment-buttons %}
+{% endblock %}
+
diff --git a/tuskar_ui/infrastructure/overview/templates/overview/deployment_initialize.html b/tuskar_ui/infrastructure/overview/templates/overview/deployment_initialize.html
new file mode 100644
index 000000000..c44495133
--- /dev/null
+++ b/tuskar_ui/infrastructure/overview/templates/overview/deployment_initialize.html
@@ -0,0 +1,23 @@
+{% extends "infrastructure/overview/deployment_base.html" %}
+
+{% load i18n %}
+{% load url from future%}
+
+{% block deployment-icon %}
+  <i class="glyphicon glyphicon-warning-sign text-warning"></i>
+{% endblock %}
+
+{% block deployment-title %}{% trans "Initialization" %}{% endblock %}
+
+{% block deployment-info %}
+<p>{% trans "Your OpenStack cloud is deployed but it needs to get initialized in order to get live." %}</p>
+{% endblock %}
+
+{% block deployment-buttons %}
+  {{ block.super }}
+  <a href="{% url 'horizon:infrastructure:overview:post_deploy_init' %}"
+     class="btn btn-primary ajax-modal">
+     <i class="glyphicon glyphicon-flag"></i>
+     {% trans "Initialize" %}
+  </a>
+{% endblock %}
diff --git a/tuskar_ui/infrastructure/overview/templates/overview/deployment_live.html b/tuskar_ui/infrastructure/overview/templates/overview/deployment_live.html
new file mode 100644
index 000000000..5b36b8a7e
--- /dev/null
+++ b/tuskar_ui/infrastructure/overview/templates/overview/deployment_live.html
@@ -0,0 +1,22 @@
+{% extends "infrastructure/overview/deployment_base.html" %}
+
+{% load i18n %}
+{% load url from future%}
+
+{% block deployment-icon %}
+  <i class="glyphicon glyphicon-ok-sign text-success"></i>
+{% endblock %}
+{% block deployment-title %}{% trans "Deployment is live" %}{% endblock %}
+{% block deployment-info %}
+<strong>{% trans "Access information" %}</strong>
+<dl>
+  {% for dashboard_url in dashboard_urls %}
+  <dt>{% trans "Horizon URL" %}</dt>
+  <dd><a href="{{ dashboard_url }}">{{ dashboard_url }}</a></dd>
+  {% endfor %}
+  <dt>{% trans "User name" %}</dt>
+  <dd>TO BE ADDED</dd>
+  <dt>{% trans "Password" %}</dt>
+  <dd>TO BE ADDED</dd>
+</dl>
+{% endblock %}
diff --git a/tuskar_ui/infrastructure/overview/templates/overview/deployment_plan.html b/tuskar_ui/infrastructure/overview/templates/overview/deployment_plan.html
new file mode 100644
index 000000000..904b63c4b
--- /dev/null
+++ b/tuskar_ui/infrastructure/overview/templates/overview/deployment_plan.html
@@ -0,0 +1,20 @@
+{% extends "infrastructure/overview/deployment_base.html" %}
+
+{% load i18n %}
+{% load url from future%}
+
+{% block deployment-icon %}
+  <i class="glyphicon glyphicon-ok-circle text-success"></i>
+{% endblock %}
+
+{% block deployment-title %}
+  {% trans "Ready to get deployed" %}
+{% endblock %}
+
+{% block deployment-buttons %}
+  <a href="{% url 'horizon:infrastructure:overview:deploy_confirmation' %}"
+   class="btn btn-primary ajax-modal btn-default">
+    <i class="glyphicon glyphicon-ok"></i>
+    {% trans "Deploy" %}
+  </a>
+{% endblock %}
diff --git a/tuskar_ui/infrastructure/overview/templates/overview/deployment_progress.html b/tuskar_ui/infrastructure/overview/templates/overview/deployment_progress.html
new file mode 100644
index 000000000..71fbb25ff
--- /dev/null
+++ b/tuskar_ui/infrastructure/overview/templates/overview/deployment_progress.html
@@ -0,0 +1,61 @@
+{% extends "infrastructure/overview/deployment_base.html" %}
+
+{% load i18n %}
+{% load url from future%}
+
+{% block deployment-icon %}
+  <i class="glyphicon glyphicon-cog text-info"></i>
+{% endblock %}
+
+{% block deployment-title %}
+            {% if stack.is_deleting %}
+                {% trans "Undeploying..." %}
+            {% elif stack.is_deploying %}
+                {% trans "Deploying..." %}
+            {% endif %}
+{% endblock %}
+
+{% block deployment-info %}
+{% if progress %}
+  <div class="progress">
+    <div
+      class="progress-bar progress-bar-striped active"
+      role="progressbar"
+      aria-valuenow="{{ progress }}"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      style="width: {{ progress }}%"
+      ><span class="sr-only">{{ progress }}% {% trans "Complete" %}</span></div>
+  </div>
+{% endif %}
+{% if last_failed_events %}
+  <strong>{% trans "Last failed events:" %}</strong>
+{% for event in last_failed_events %}
+<div>
+  <dl>
+    <dt>{% trans "Timestamp" %}</dt>
+    <dd><time datetime="{{ event.event_time }}">{{ event.event_time }}</time></dd>
+    <dt>{% trans "Resource Name" %}</dt>
+    <dd>{{ event.resource_name }}</dd>
+    <dt>{% trans "Status" %}</dt>
+    <dd>{{ event.resource_status }}</dd>
+    <dt>{% trans "Reason" %}</dt>
+    <dd>{{ event.resource_status_reason }}</dd>
+  </dl>
+</div>
+{% endfor %}
+{% endif %}
+<p><a href="{% url 'horizon:infrastructure:history:index' %}">See full log</a></p>
+{% endblock %}
+
+{% block deployment-buttons %}
+    {% if stack.is_deploying %}
+      <a
+    href="{% url 'horizon:infrastructure:overview:undeploy_confirmation' %}"
+    class="btn btn-danger ajax-modal">
+        <i class="glyphicon glyphicon-remove"></i>
+        {% trans "Stop" %}
+      </a>
+    {% endif %}
+{% endblock %}
+
diff --git a/tuskar_ui/infrastructure/overview/templates/overview/index.html b/tuskar_ui/infrastructure/overview/templates/overview/index.html
index 835efa426..60ac0d49c 100644
--- a/tuskar_ui/infrastructure/overview/templates/overview/index.html
+++ b/tuskar_ui/infrastructure/overview/templates/overview/index.html
@@ -18,10 +18,26 @@
 {% block main %}
 <div class="row">
   <div class="col-xs-3">
-    {% include "infrastructure/overview/_deployment_status.html" %}
+    {% if stack %}
+      {% if stack.is_deleting or stack.is_deploying %}
+        {% include "infrastructure/overview/deployment_progress.html" %}
+      {% elif stack.is_delete_failed or stack.is_failed %}
+        {% include "infrastructure/overview/deployment_failed.html" %}
+      {% elif stack.is_deployed and not stack.is_initialized %}
+        {% include "infrastructure/overview/deployment_initialize.html" %}
+      {% else %}
+        {% include "infrastructure/overview/deployment_live.html" %}
+      {% endif %}
+    {% else %}
+      {% include "infrastructure/overview/deployment_plan.html" %}
+    {% endif %}
   </div>
   <div class="col-xs-6">
-    {% include "infrastructure/overview/_role_nodes.html" %}
+    {% if stack %}
+      {% include "infrastructure/overview/role_nodes_status.html" %}
+    {% else %}
+      {% include "infrastructure/overview/role_nodes_edit.html" %}
+    {% endif %}
   </div>
 </div>
 {% endblock %}
diff --git a/tuskar_ui/infrastructure/overview/templates/overview/_role_nodes.html b/tuskar_ui/infrastructure/overview/templates/overview/role_nodes_edit.html
similarity index 87%
rename from tuskar_ui/infrastructure/overview/templates/overview/_role_nodes.html
rename to tuskar_ui/infrastructure/overview/templates/overview/role_nodes_edit.html
index 193d532f9..d1f438839 100644
--- a/tuskar_ui/infrastructure/overview/templates/overview/_role_nodes.html
+++ b/tuskar_ui/infrastructure/overview/templates/overview/role_nodes_edit.html
@@ -25,5 +25,8 @@
     </div>
 {% endfor %}
 <hr>
-<button type="submit" class="btn btn-default">{% trans "Update" %}</button>
+<button type="submit" class="btn btn-default">
+  <i class="glyphicon glyphicon-save"></i>
+  {% trans "Save changes" %}
+</button>
 </form>
diff --git a/tuskar_ui/infrastructure/overview/templates/overview/role_nodes_status.html b/tuskar_ui/infrastructure/overview/templates/overview/role_nodes_status.html
new file mode 100644
index 000000000..688835ab6
--- /dev/null
+++ b/tuskar_ui/infrastructure/overview/templates/overview/role_nodes_status.html
@@ -0,0 +1,28 @@
+{% load i18n %}
+{% load url from future %}
+
+<h4>{% trans "Deployment Roles" %}</h4>
+{% for role in roles %}
+    <div class="alert well-sm clearfix
+      {% if role.error_node_count %}
+        alert-danger
+      {% elif role.deployed_node_count == role.planned_node_count %}
+        alert-success
+      {% else %}
+        alert-info
+      {% endif %}
+      ">
+      <div class="col-sm-2">
+        {% if role.deployed_node_count < role.planned_node_count %}
+          <strong>{{ role.deployed_node_count }}</strong><small class="text-muted">/{{ role.planned_node_count }}</small>
+        {% else %}
+          <strong>{{ role.planned_node_count }}</strong>
+        {% endif %}
+      </div>
+      <div class="col-sm-10">
+        <a
+          href="{% url "horizon:infrastructure:roles:detail" role_id=role.id %}"
+        >{{ role.name }}</a>
+      </div>
+    </div>
+{% endfor %}
diff --git a/tuskar_ui/infrastructure/overview/tests.py b/tuskar_ui/infrastructure/overview/tests.py
index f9f14356f..09937c25d 100644
--- a/tuskar_ui/infrastructure/overview/tests.py
+++ b/tuskar_ui/infrastructure/overview/tests.py
@@ -90,7 +90,7 @@ class OverviewTests(test.BaseAdminViewTests):
         self.assertTemplateUsed(
             res, 'infrastructure/overview/index.html')
         self.assertTemplateUsed(
-            res, 'infrastructure/overview/_role_nodes.html')
+            res, 'infrastructure/overview/role_nodes_edit.html')
 
     def test_index_stack_not_created_post(self):
         with contextlib.nested(
@@ -140,7 +140,7 @@ class OverviewTests(test.BaseAdminViewTests):
         self.assertTemplateUsed(
             res, 'infrastructure/overview/index.html')
         self.assertTemplateUsed(
-            res, 'infrastructure/overview/_deployment_status.html')
+            res, 'infrastructure/overview/deployment_live.html')
 
     def test_index_stack_undeploy_in_progress(self):
         stack = api.heat.Stack(TEST_DATA.heatclient_stacks.first())
@@ -163,7 +163,7 @@ class OverviewTests(test.BaseAdminViewTests):
         self.assertTemplateUsed(
             res, 'infrastructure/overview/index.html')
         self.assertTemplateUsed(
-            res, 'infrastructure/overview/_deployment_status.html')
+            res, 'infrastructure/overview/deployment_progress.html')
 
     def test_deploy_get(self):
         with _mock_plan():
diff --git a/tuskar_ui/infrastructure/overview/views.py b/tuskar_ui/infrastructure/overview/views.py
index c2905506e..9e2cd60c2 100644
--- a/tuskar_ui/infrastructure/overview/views.py
+++ b/tuskar_ui/infrastructure/overview/views.py
@@ -140,8 +140,10 @@ class IndexView(horizon.forms.ModalFormView, StackMixin):
             else:
                 # stack is active
                 total = sum(d['total_node_count'] for d in roles)
-                context['progress'] = 100 * sum(d.get('deployed_node_count', 0)
-                                                for d in roles) // (total or 1)
+                context['progress'] = max(
+                    5, 100 * sum(d.get('deployed_node_count', 0)
+                                 for d in roles) // (total or 1)
+                )
                 context['dashboard_urls'] = stack.dashboard_urls
 
         return context
diff --git a/tuskar_ui/infrastructure/static/infrastructure/scss/_individual_pages.scss b/tuskar_ui/infrastructure/static/infrastructure/scss/_individual_pages.scss
index 97b7481ac..65a602aab 100644
--- a/tuskar_ui/infrastructure/static/infrastructure/scss/_individual_pages.scss
+++ b/tuskar_ui/infrastructure/static/infrastructure/scss/_individual_pages.scss
@@ -158,7 +158,13 @@ $link-color: #428bca;
 
 .deployment-box {
     border-left: 4px solid #eee;
-    margin-left: 12px;
+    margin-left: 16px;
+    margin-bottom: 12px;
+    padding-left: 20px;
+}
+
+.deployment-buttons {
+    margin-top: 12px;
 }
 
 .deployment-roles-label {