diff --git a/MANIFEST.in b/MANIFEST.in
index f71cb1a..02327c2 100644
--- a/MANIFEST.in
+++ b/MANIFEST.in
@@ -7,7 +7,7 @@ include AUTHORS
 include LICENSE
 include Makefile
 include manage.py
-include README.md
+include README.rst
 include run_tests.sh
 include tox.ini
 include doc/Makefile
diff --git a/README.md b/README.rst
similarity index 100%
rename from README.md
rename to README.rst
diff --git a/tuskar_boxes/overview/panel.py b/tuskar_boxes/overview/panel.py
index fb5e303..844f938 100644
--- a/tuskar_boxes/overview/panel.py
+++ b/tuskar_boxes/overview/panel.py
@@ -16,7 +16,8 @@ from django.utils.translation import ugettext_lazy as _
 
 import horizon
 
-from tuskar_ui.infrastructure import dashboard
+import tuskar_ui.infrastructure.dashboard as tuskar_dashboard
+from tuskar_ui.infrastructure.overview.panel import Overview as TuskarOverview
 
 
 class Overview(horizon.Panel):
@@ -24,4 +25,5 @@ class Overview(horizon.Panel):
     slug = "overview"
 
 
-dashboard.Infrastructure.register(Overview)
+tuskar_dashboard.Infrastructure.unregister(TuskarOverview)
+tuskar_dashboard.Infrastructure.register(Overview)
diff --git a/tuskar_boxes/overview/templates/overview/_deploy_confirmation.html b/tuskar_boxes/overview/templates/overview/_deploy_confirmation.html
deleted file mode 100644
index c8b5e84..0000000
--- a/tuskar_boxes/overview/templates/overview/_deploy_confirmation.html
+++ /dev/null
@@ -1,26 +0,0 @@
-{% extends "horizon/common/_modal_form.html" %}
-{% load i18n %}
-{% load url from future %}
-
-{% block form_id %}provision_form{% endblock %}
-{% block form_action %}{% url 'horizon:infrastructure:overview:deploy_confirmation' %}{% endblock %}
-
-{% block modal_id %}provision_modal{% endblock %}
-{% block modal-header %}{% trans "Deployment Confirmation" %}{% endblock %}
-
-{% block modal-body %}
-<div>
-    <p>{% trans "You are about deploy your overcloud" %}
-    </p>
-    {% if autogenerated_parameters %}
-        <strong>These parameters will be randomly generated before the deployment:</strong>
-        <p>{{ autogenerated_parameters|join:", " }}</p>
-    {% endif %}
-    <p>{% trans "This operation cannot be undone. Are you sure you want to do that?" %}</p>
-</div>
-{% endblock %}
-
-{% block modal-footer %}
-  <input class="btn btn-primary" type="submit" value="{% trans "Deploy" %}" />
-  <a href="{% url 'horizon:infrastructure:overview:index' %}" class="btn secondary cancel close">{% trans "Cancel" %}</a>
-{% endblock %}
diff --git a/tuskar_boxes/overview/templates/overview/_post_deploy_init.html b/tuskar_boxes/overview/templates/overview/_post_deploy_init.html
deleted file mode 100644
index 9e5dfee..0000000
--- a/tuskar_boxes/overview/templates/overview/_post_deploy_init.html
+++ /dev/null
@@ -1,27 +0,0 @@
-{% extends "horizon/common/_modal_form.html" %}
-{% load i18n %}
-{% load url from future %}
-
-{% block form_id %}post_deploy_init_form{% endblock %}
-{% block form_action %}{% url 'horizon:infrastructure:overview:post_deploy_init' %}{% endblock %}
-
-{% block modal_id %}provision_modal{% endblock %}
-{% block modal-header %}{% trans "Initialize Overcloud" %}{% endblock %}
-
-{% block modal-body %}
-<div>
-  <fieldset>
-    <div class="left">
-      {% include "horizon/common/_form_fields.html" %}
-    </div>
-    <div class="right">
-      {% trans "Your OpenStack cloud nodes are deployed. They need to be initialized before your cloud will be live."%}
-    </div>
-  </fieldset>
-</div>
-{% endblock %}
-
-{% block modal-footer %}
-  <input class="btn btn-primary" type="submit" value="{% trans "Initialize" %}" />
-  <a href="{% url 'horizon:infrastructure:overview:index' %}" class="btn secondary cancel close">{% trans "Cancel" %}</a>
-{% endblock %}
diff --git a/tuskar_boxes/overview/templates/overview/_undeploy_confirmation.html b/tuskar_boxes/overview/templates/overview/_undeploy_confirmation.html
deleted file mode 100644
index 9fc0c5e..0000000
--- a/tuskar_boxes/overview/templates/overview/_undeploy_confirmation.html
+++ /dev/null
@@ -1,25 +0,0 @@
-{% extends "horizon/common/_modal_form.html" %}
-{% load i18n %}
-{% load url from future %}
-
-{% block form_id %}provision_form{% endblock %}
-{% block form_action %}{% url 'horizon:infrastructure:overview:undeploy_confirmation' %}{% endblock %}
-
-{% block modal_id %}provision_modal{% endblock %}
-{% block modal-header %}{% trans "Undeployment Confirmation" %}{% endblock %}
-
-{% block modal-body %}
-<div>
-    <p>{% trans "You are about undeploy your overcloud" %}
-    </p>
-    <p>{% trans "This operation cannot be undone. Are you sure you want to do that?" %}</p>
-  <fieldset>
-  {% include "horizon/common/_form_fields.html" %}
-  </fieldset>
-</div>
-{% endblock %}
-
-{% block modal-footer %}
-  <input class="btn btn-primary" type="submit" value="{% trans "Undeploy" %}" />
-  <a href="{% url 'horizon:infrastructure:overview:index' %}" class="btn secondary cancel close">{% trans "Cancel" %}</a>
-{% endblock %}
diff --git a/tuskar_boxes/overview/templates/overview/deploy_confirmation.html b/tuskar_boxes/overview/templates/overview/deploy_confirmation.html
deleted file mode 100644
index 74f6dc8..0000000
--- a/tuskar_boxes/overview/templates/overview/deploy_confirmation.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% extends 'infrastructure/base.html' %}
-{% load i18n %}
-{% block title %}{% trans "Deploy overcloud" %}{% endblock %}
-
-{% block page_header %}
-  {% include "horizon/common/_page_header.html" with title=_("Deploy overcloud") %}
-{% endblock page_header %}
-
-{% block infrastructure_main %}
-    {% include "infrastructure/overview/_deploy_confirmation.html" %}
-{% endblock %}
diff --git a/tuskar_boxes/overview/templates/overview/deployment_base.html b/tuskar_boxes/overview/templates/overview/deployment_base.html
deleted file mode 100644
index ca55e96..0000000
--- a/tuskar_boxes/overview/templates/overview/deployment_base.html
+++ /dev/null
@@ -1,22 +0,0 @@
-{% load i18n %}
-{% load url from future%}
-
-<div class="deployment-icon">
-  {% block deployment-icon %}
-    <i class="fa fa-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="fa fa-trash"></i>
-        {% trans "Undeploy" %}
-      </a>
-    {% endblock %}
-  </div>
-</div>
diff --git a/tuskar_boxes/overview/templates/overview/deployment_failed.html b/tuskar_boxes/overview/templates/overview/deployment_failed.html
deleted file mode 100644
index d7add0c..0000000
--- a/tuskar_boxes/overview/templates/overview/deployment_failed.html
+++ /dev/null
@@ -1,44 +0,0 @@
-{% extends "infrastructure/overview/deployment_base.html" %}
-
-{% load i18n %}
-{% load url from future%}
-
-{% block deployment-icon %}
-  <i class="fa fa-exclamation-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 %}
-  {{ block.super }}
-{% endblock %}
-
diff --git a/tuskar_boxes/overview/templates/overview/deployment_initialize.html b/tuskar_boxes/overview/templates/overview/deployment_initialize.html
deleted file mode 100644
index 65419b9..0000000
--- a/tuskar_boxes/overview/templates/overview/deployment_initialize.html
+++ /dev/null
@@ -1,23 +0,0 @@
-{% extends "infrastructure/overview/deployment_base.html" %}
-
-{% load i18n %}
-{% load url from future%}
-
-{% block deployment-icon %}
-  <i class="fa fa-exclamation-triangle 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="fa fa-flag-checkered"></i>
-     {% trans "Initialize" %}
-  </a>
-{% endblock %}
diff --git a/tuskar_boxes/overview/templates/overview/deployment_live.html b/tuskar_boxes/overview/templates/overview/deployment_live.html
deleted file mode 100644
index 92ab9f8..0000000
--- a/tuskar_boxes/overview/templates/overview/deployment_live.html
+++ /dev/null
@@ -1,33 +0,0 @@
-{% extends "infrastructure/overview/deployment_base.html" %}
-
-{% load i18n %}
-{% load url from future%}
-
-{% block deployment-icon %}
-  <i class="fa fa-check-circle-o 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>admin</dd>
-  <dt></dt>
-  <dd>
-    <form>
-        <fieldset>
-            <div class="form-group">
-              <label class="control-label  required" for="id_password">{% trans "Password" %}</label>
-              <div>
-                <input class="form-control" id="id_password" type="password" value="{{ admin_password }}" disabled="true" readonly="true"/>
-              </div>
-            </div>
-        </fieldset>
-    </form>
-  </dd>
-</dl>
-{% endblock %}
diff --git a/tuskar_boxes/overview/templates/overview/deployment_plan.html b/tuskar_boxes/overview/templates/overview/deployment_plan.html
deleted file mode 100644
index 9c90617..0000000
--- a/tuskar_boxes/overview/templates/overview/deployment_plan.html
+++ /dev/null
@@ -1,43 +0,0 @@
-{% extends "infrastructure/overview/deployment_base.html" %}
-
-{% load i18n %}
-{% load url from future%}
-
-{% block deployment-icon %}
-{% if plan_invalid %}
-  <i class="fa fa-exclamation-circle text-danger"></i>
-{% else %}
-  <i class="fa fa-check-circle text-success"></i>
-{% endif %}
-{% endblock %}
-
-{% block deployment-title %}
-{% if plan_invalid %}
-  {% trans "Design your deployment" %}
-{% else %}
-  {% trans "Ready to get deployed" %}
-{% endif %}
-{% endblock %}
-
-{% block deployment-info %}
-<ul class="list-unstyled">
-    {% for message in plan_messages %}
-    <li class="{% if message.is_critical %}text-danger{% else %}text-warning{% endif %}"><p>
-        {{ message.text }}
-        {% if message.link_url %}
-          <a href="{{ message.link_url }}">
-            {{ message.link_label|default:message.link_url }}
-          </a>
-        {% endif %}
-    </p></li>
-    {% endfor %}
-</ul>
-{% endblock %}
-
-{% block deployment-buttons %}
-<a href="{% url 'horizon:infrastructure:overview:deploy_confirmation' %}"
-class="btn btn-primary ajax-modal btn-default {% if plan_invalid %}disabled{% endif %}">
-<i class="fa fa-rocket"></i>
-{% trans "Deploy" %}
-</a>
-{% endblock %}
diff --git a/tuskar_boxes/overview/templates/overview/deployment_progress.html b/tuskar_boxes/overview/templates/overview/deployment_progress.html
deleted file mode 100644
index d4ee783..0000000
--- a/tuskar_boxes/overview/templates/overview/deployment_progress.html
+++ /dev/null
@@ -1,61 +0,0 @@
-{% extends "infrastructure/overview/deployment_base.html" %}
-
-{% load i18n %}
-{% load url from future%}
-
-{% block deployment-icon %}
-  <i class="fa fa-spinner 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="fa fa-close"></i>
-        {% trans "Stop" %}
-      </a>
-    {% endif %}
-{% endblock %}
-
diff --git a/tuskar_boxes/overview/templates/overview/post_deploy_init.html b/tuskar_boxes/overview/templates/overview/post_deploy_init.html
deleted file mode 100644
index 835c0e5..0000000
--- a/tuskar_boxes/overview/templates/overview/post_deploy_init.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% extends 'infrastructure/base.html' %}
-{% load i18n %}
-{% block title %}{% trans "Initialize" %}{% endblock %}
-
-{% block page_header %}
-  {% include "horizon/common/_page_header.html" with title=_("Initialize Overcloud") %}
-{% endblock page_header %}
-
-{% block infrastructure_main %}
-    {% include "infrastructure/overview/_post_deploy_init.html" %}
-{% endblock %}
diff --git a/tuskar_boxes/overview/templates/overview/role_nodes_edit.html b/tuskar_boxes/overview/templates/overview/role_nodes_edit.html
deleted file mode 100644
index 2b0f5bc..0000000
--- a/tuskar_boxes/overview/templates/overview/role_nodes_edit.html
+++ /dev/null
@@ -1,32 +0,0 @@
-{% load i18n %}
-{% load url from future %}
-{% load form_helpers %}
-
-<h4>{% trans "Deployment Roles" %}</h4>
-<form method="POST" action="." class="deployment-roles-form">
-{% csrf_token %}
-{% include 'horizon/common/_form_errors.html' with form=form %}
-{% for role in roles %}
-    <div class="form-group well well-sm clearfix{% if field.errors %} error{% endif %} {{ field.css_classes }}">
-      <div class="col-sm-2">
-        {{ role.field|add_bootstrap_class }}
-      </div>
-      <div class="col-sm-10">
-        <a
-          href="{% url "horizon:infrastructure:roles:detail" role_id=role.id %}"
-          class="deployment-roles-label"
-        >{{ role.name }}</a>
-        {% for error in role.field.errors %}
-        <span class="help-block"><span class="text-danger">
-          {{ error }}
-        </span></span>
-        {% endfor %}
-      </div>
-    </div>
-{% endfor %}
-<hr>
-<button type="submit" class="btn btn-default">
-  <i class="fa fa-save"></i>
-  {% trans "Save changes" %}
-</button>
-</form>
diff --git a/tuskar_boxes/overview/templates/overview/role_nodes_status.html b/tuskar_boxes/overview/templates/overview/role_nodes_status.html
deleted file mode 100644
index 688835a..0000000
--- a/tuskar_boxes/overview/templates/overview/role_nodes_status.html
+++ /dev/null
@@ -1,28 +0,0 @@
-{% 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_boxes/overview/templates/overview/undeploy_confirmation.html b/tuskar_boxes/overview/templates/overview/undeploy_confirmation.html
deleted file mode 100644
index b234ac9..0000000
--- a/tuskar_boxes/overview/templates/overview/undeploy_confirmation.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% extends 'infrastructure/base.html' %}
-{% load i18n %}
-{% block title %}{% trans "Undeploy overcloud" %}{% endblock %}
-
-{% block page_header %}
-  {% include "horizon/common/_page_header.html" with title=_("Undeploy overcloud") %}
-{% endblock page_header %}
-
-{% block infrastructure_main %}
-    {% include "infrastructure/overview/_undeploy_confirmation.html" %}
-{% endblock %}
diff --git a/tuskar_boxes/overview/urls.py b/tuskar_boxes/overview/urls.py
index 7cbac26..683c350 100644
--- a/tuskar_boxes/overview/urls.py
+++ b/tuskar_boxes/overview/urls.py
@@ -15,12 +15,14 @@
 from django.conf import urls
 
 from tuskar_ui.infrastructure.overview import views
-import tuskar_boxes.views
+import tuskar_boxes.overview.views as boxes_views
 
 
 urlpatterns = urls.patterns(
     '',
-    urls.url(r'^$', tuskar_boxes.views.IndexView.as_view(), name='index'),
+    urls.url(r'^$',
+             boxes_views.IndexView.as_view(),
+             name='index'),
     urls.url(r'^deploy-confirmation$',
              views.DeployConfirmationView.as_view(),
              name='deploy_confirmation'),
diff --git a/tuskar_boxes/overview/views.py b/tuskar_boxes/overview/views.py
index 8dce6a9..7fcebac 100644
--- a/tuskar_boxes/overview/views.py
+++ b/tuskar_boxes/overview/views.py
@@ -12,7 +12,40 @@
 #    License for the specific language governing permissions and limitations
 #    under the License.
 
+from tuskar_ui import api
 from tuskar_ui.infrastructure.overview import views
 
+
+def flavor_nodes(request, flavor):
+    """Lists all nodes that match the given flavor exactly."""
+    for node in api.node.Node.list(request):
+        if all([
+            int(node.cpus) == int(flavor.vcpus),
+            int(node.memory_mb) == int(flavor.ram),
+            int(node.local_gb) == int(flavor.disk),
+            # TODO(rdopieralski) add architecture when available
+        ]):
+            yield node
+
 class IndexView(views.IndexView):
-    pass
+    template_name = "tuskar_boxes/overview/index.html"
+
+    def get_context_data(self, *args, **kwargs):
+        context = super(IndexView, self).get_context_data(*args, **kwargs)
+        flavors = api.flavor.Flavor.list(self.request)
+        flavors.sort(key=lambda np: (np.vcpus, np.ram, np.disk))
+        context['flavors'] = []
+        for flavor in flavors:
+            nodes = [{
+                'role': '',
+            } for node in flavor_nodes(self.request, flavor)]
+            flavor = {
+                'name': flavor.name,
+                'vcpus': flavor.vcpus,
+                'ram': flavor.ram,
+                'disk': flavor.disk,
+                'nodes': nodes,
+            }
+            if nodes:  # Don't list empty flavors
+                context['flavors'].append(flavor)
+        return context
diff --git a/tuskar_boxes/overview/templates/overview/index.html b/tuskar_boxes/templates/tuskar_boxes/overview/index.html
similarity index 84%
rename from tuskar_boxes/overview/templates/overview/index.html
rename to tuskar_boxes/templates/tuskar_boxes/overview/index.html
index 60ac0d4..b50171d 100644
--- a/tuskar_boxes/overview/templates/overview/index.html
+++ b/tuskar_boxes/templates/tuskar_boxes/overview/index.html
@@ -4,13 +4,6 @@
 
 {% block title %}{% trans 'My OpenStack Deployment' %}{% endblock %}
 
-{% block css %}
-  {% if stack.is_deploying %}
-    <meta http-equiv="refresh" content="30">
-  {% endif %}
-  {{ block.super }}
-{% endblock %}
-
 {% block page_header %}
   {% include 'horizon/common/_domain_page_header.html' with title=_('My OpenStack Deployment') %}
 {% endblock page_header %}
@@ -36,7 +29,7 @@
     {% if stack %}
       {% include "infrastructure/overview/role_nodes_status.html" %}
     {% else %}
-      {% include "infrastructure/overview/role_nodes_edit.html" %}
+      {% include "tuskar_boxes/overview/role_nodes_edit.html" %}
     {% endif %}
   </div>
 </div>
diff --git a/tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html b/tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html
new file mode 100644
index 0000000..178c3ca
--- /dev/null
+++ b/tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html
@@ -0,0 +1,205 @@
+{% load i18n %}
+{% load url from future %}
+{% load form_helpers %}
+
+<h4>{% trans "Available Deployment Roles" %}</h4>
+<form method="POST" action="." class="boxes-form">
+{% csrf_token %}
+{% include 'horizon/common/_form_errors.html' with form=form %}
+
+<div class="boxes-available-roles">
+{% for role in roles %}{% spaceless %}
+    <div class="boxes-role-{{ role.name|slugify }} boxes-role" data-name="{{ role.name|slugify }}">
+        {{ role.field|add_bootstrap_class }}
+        {{ role.name|title }}
+    </div>
+{% endspaceless %}{% endfor %}
+</div>
+
+<h4>{% trans "Available Node Profiles" %}</h4>
+{% for flavor in flavors %}
+<div class="boxes-flavor">
+    <p>
+        <strong>Node Profile:</strong>
+        <i>{{ flavor.name }}</i>
+        {{ flavor.vcpus }} CPU,
+        {{ flavor.ram }}MB RAM,
+        {{ flavor.disk }}GB Disk
+    </p>
+    <div class="row">
+        <div class="col-xs-5">
+            <div class="boxes-drop-roles">
+            </div>
+            <div class="boxes-drop">
+                <i class="fa fa-plus"></i>
+            </div>
+        </div>
+        <div class="col-xs-7 boxes-nodes">
+            {% for node in flavor.nodes %}{% spaceless %}
+            <div class="boxes-node">free</div>
+            {% endspaceless %}{% endfor %}
+        </div>
+    </div>
+<div>
+{% endfor %}
+
+
+<hr>
+<button type="submit" class="btn btn-default">
+  <i class="fa fa-save"></i>
+  {% trans "Save changes" %}
+</button>
+</form>
+
+<script type="text/javascript">
+(window.$ || window.addHorizonLoadEvent)(function () {
+  function get_role_counts($flavor) {
+    var roles = {};
+    $flavor.find('div.boxes-drop-roles div.boxes-role').each(function () {
+      var $this = $(this);
+      var name = $this.data('name');
+      var count = +$this.find('input.number-picker').val();
+      roles[name] = count;
+    });
+    return roles;
+  }
+
+  function update_boxes() {
+    $('div.boxes-flavor').each(function () {
+        var $flavor = $(this);
+        var roles = get_role_counts($flavor);
+        var role_names = Object.getOwnPropertyNames(roles);
+        var count = 0;
+        var role = 0;
+        $flavor.find('div.boxes-nodes div.boxes-node').each(function () {
+          var $this = $(this);
+          $this.removeClass('boxes-role-controller boxes-role-compute boxes-role-block-storage boxes-role-object-storage');
+          while (count >= roles[role_names[role]]) {
+            role += 1;
+            count = 0;
+          }
+          if (!role_names[role]) {
+            $(this).html('free');
+          } else {
+            $this.addClass('boxes-role-' + role_names[role]).html('&nbsp;');
+          }
+          count += 1;
+        });
+    });
+  }
+
+  $('div.boxes-role').draggable({
+      revert: 'invalid',
+      helper: 'clone',
+      stack: '.boxes-roles',
+      opacity: 0.5
+  });
+  $('div.boxes-drop').droppable({
+      accept: 'div.boxes-role',
+      activeClass: 'boxes-drop-active',
+      hoverClass: 'boxes-drop-hover',
+      tolerance: 'touch',
+      drop: function (ev, ui) {
+        ui.draggable.appendTo($(this).prev('.boxes-drop-roles'));
+        ui.draggable.find('input.number-picker').val(1);
+        window.setTimeout(update_boxes, 0);
+      }
+  });
+  $('div.boxes-available-roles').droppable({
+      accept: 'div.boxes-role',
+      activeClass: 'boxes-drop-active',
+      hoverClass: 'boxes-drop-hover',
+      tolerance: 'touch',
+      drop: function (ev, ui) {
+        ui.draggable.appendTo(this);
+        ui.draggable.find('input.number-picker').val(0);
+        window.setTimeout(update_boxes, 0);
+      }
+  });
+
+  update_boxes();
+  $('input.number-picker').change(update_boxes);
+});
+</script>
+
+<style type="text/css">
+.boxes-node {
+    display: inline-block;
+    width: 60px;
+    height: 60px;
+    border-radius: 2px;
+    border: 1px solid #999;
+    background: #eee;
+    margin: 0 4px 4px 0;
+    text-align: center;
+    color: #666;
+    padding: 20px 4px 0 4px;
+}
+.boxes-available-roles {
+    border-radius: 2px;
+    background: #eee;
+    border: 1px dashed #666;
+    min-height: 42px;
+    min-width: 120px;
+    display: inline-block;
+    padding: 4px 0 0 4px;
+}
+.boxes-role {
+    display: inline-block;
+    padding: 6px;
+    border: 1px solid;
+    width: 180px;
+    cursor: move;
+    border-radius: 2px;
+    margin: 0 4px 4px 0;
+    background-color: #fce94f;
+    border-color: #edd400;
+    color: #c4a000;
+}
+.boxes-available-roles .boxes-role {
+    text-align: center;
+    width: 120px;
+}
+.boxes-available-roles .boxes-role .form-control {
+    display: none;
+}
+.boxes-role-controller {
+    background-color: #fcaf3e;
+    border-color: #f57900;
+    color: #ce5c00;
+}
+.boxes-role-compute {
+    background-color: #8ae234;
+    border-color: #73d216;
+    color: #4e9a06;
+}
+.boxes-role-object-storage {
+    background-color: #729fcf;
+    border-color: #3465a4;
+    color: #204a87;
+}
+.boxes-role-block-storage {
+    background-color: #ad7fa8;
+    border-color: #75507b;
+    color: #5c3566;
+}
+.boxes-drop {
+    display: inline-block;
+    padding: 6px;
+    border: 1px dashed;
+    width: 180px;
+    text-align: center;
+    border-radius: 2px;
+    background-color: #eee;
+    border-color: #666;
+    color: #444;
+}
+.boxes-drop-active {
+    background-color: #ccc;
+    border-style: solid;
+}
+.boxes-drop-hover {
+    background-color: #999;
+    border-style: solid;
+}
+</style>