diff --git a/promgen/templates/promgen/service_block.html b/promgen/templates/promgen/service_block.html
index f4958c26..46c843b1 100644
--- a/promgen/templates/promgen/service_block.html
+++ b/promgen/templates/promgen/service_block.html
@@ -51,26 +51,9 @@
     </div>
   </div>
 
-  {% if service.rule_set.count or request.site.rule_set.count %}
-  <div class="panel panel-default">
-    <table class="table table-bordered table-condensed">
-      {% include "promgen/rule_header.html" %}
-      {% include "promgen/rule_block.html" with rule_list=service.rule_set.all toggle=1 delete=1 %}
-      {% include "promgen/rule_block.html" with rule_list=request.site.rule_set.all collapse="service-site-rules-" overwrite_type='service' overwrite_id=service.id %}
-    </table>
-    <div class="panel-footer">
-      <a class="btn btn-default btn-xs" role="button" data-toggle="collapse" href=".service-site-rules-{{service.id}}" aria-expanded="false" aria-controls="collapseExample">
-        {% trans 'Show Site Rules' %}
-      </a>
-    </div>
-  </div>
-  {% endif %}
+  {% include "promgen/service_block_panel_rules.inc.html" %} 
 
-  {% if service.notifiers.count %}
-  <div class="panel panel-default">
-    {% include "promgen/notifier_block.html" with object=service show_edit=1 %}
-  </div>
-  {% endif %}
+  {% include "promgen/service_block_panel_notifiers.inc.html" %}
 
   {% include "promgen/service_block_projects.html" with project_list=project_list|default:service.project_set.all service=service only %}
 
diff --git a/promgen/templates/promgen/service_block_panel_notifiers.inc.html b/promgen/templates/promgen/service_block_panel_notifiers.inc.html
new file mode 100644
index 00000000..608beb4e
--- /dev/null
+++ b/promgen/templates/promgen/service_block_panel_notifiers.inc.html
@@ -0,0 +1,7 @@
+{% load promgen %}
+
+{% if service.notifiers.count %} 
+<div class="panel panel-default">
+  {% include "promgen/notifier_block.html" with object=service show_edit=1 %}
+</div>
+{% endif %}
diff --git a/promgen/templates/promgen/service_block_panel_rules.inc.html b/promgen/templates/promgen/service_block_panel_rules.inc.html
new file mode 100644
index 00000000..5b3c6095
--- /dev/null
+++ b/promgen/templates/promgen/service_block_panel_rules.inc.html
@@ -0,0 +1,17 @@
+{% load i18n %}
+{% load promgen %}
+
+{% if service.rule_set.count or request.site.rule_set.count %}
+<div class="panel panel-default">
+  <table class="table table-bordered table-condensed">
+    {% include "promgen/rule_header.html" %}
+    {% include "promgen/rule_block.html" with rule_list=service.rule_set.all toggle=1 delete=1 %}
+    {% include "promgen/rule_block.html" with rule_list=request.site.rule_set.all collapse="service-site-rules-" overwrite_type='service' overwrite_id=service.id %}
+  </table>
+  <div class="panel-footer">
+    <a class="btn btn-default btn-xs" role="button" data-toggle="collapse" href=".service-site-rules-{{service.id}}" aria-expanded="false" aria-controls="collapseExample">
+      {% translate 'Show Site Rules' %}
+    </a>
+  </div>
+</div>
+{% endif %}
diff --git a/promgen/templates/promgen/service_block_projects.html b/promgen/templates/promgen/service_block_projects.html
index fd4540a0..bde08579 100644
--- a/promgen/templates/promgen/service_block_projects.html
+++ b/promgen/templates/promgen/service_block_projects.html
@@ -10,30 +10,8 @@
         ( <a href="{{shard.url}}">{{shard.url}}</a> )
         <a href="{% url 'project-new' service.id %}?shard={{shard.id}}" class="btn btn-primary btn-xs pull-right">{% trans "Register Project" %}</a>
     </div>
-    <table class="table table-bordered table-condensed">
-        <tr>
-            <th class="col-md-2">Project</th>
-            <th class="col-md-3">Exporters</th>
-            <th class="col-md-3">Notifiers</th>
-            <th class="col-md-1">Actions</th>
-        </tr>
-        {% for project in shard_projects %}
 
-        {% if service.notifiers.count == 0 and project.notifiers.count == 0 %}
-        <tr>
-            <td colspan="4" class="warning">
-                <span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
-                {% trans "No notifications configured for this project. Please configure some" %}
-            </td>
-        </tr>
-        {% endif %}
+    {% include 'promgen/service_detail_projects_table.html' with shard_projects=shard_projects service=service %}
 
-        {% include 'promgen/project_row.html' %}
-        {% empty %}
-        <tr>
-            <td colspan="4">No Projects?</td>
-        </tr>
-        {% endfor %}
-    </table>
 </div>
 {% endfor %}
diff --git a/promgen/templates/promgen/service_detail.html b/promgen/templates/promgen/service_detail.html
index 556b8e1b..361aaad0 100644
--- a/promgen/templates/promgen/service_detail.html
+++ b/promgen/templates/promgen/service_detail.html
@@ -8,15 +8,51 @@
 
 {% block content %}
 
-<div class="page-header" v-pre>
-  <h1>Service: {{ service.name }}</h1>
-  {% if service.owner %}
-  <p>{% trans 'Contact' %}: {{service.owner.username}}</p>
-  {% endif %}
+<div class="page-header promgen-flex-space-between-center">
+  <div>
+    <h1>Service: {{ service.name }}</h1>
+    {% if service.owner %}
+    <p>{% translate 'Contact' %}: {{service.owner.username}}</p>
+    {% endif %}
+  </div>
+
+  {% include "promgen/service_action_button_group.html" %}
 </div>
 
 {% breadcrumb service %}
 
-{% include "promgen/service_block.html" %}
+<ul class="nav nav-tabs mb-5" role="tablist">
+  <li role="presentation" class="active"><a href="#projects" data-toggle="tab">Projects</a></li>
+  <li role="presentation"><a href="#rules" data-toggle="tab">Rules</a></li>
+  <li role="presentation"><a href="#notifiers" data-toggle="tab">Notifiers</a></li>
+</ul>
+
+<div class="well">
+
+  <div class="tab-content">
+    <div role="tabpanel" class="tab-pane active" id="projects">
+      {% include "promgen/service_detail_projects.html" with project_list=project_list|default:service.project_set.all service=service only %}
+    </div>
+
+    <div role="tabpanel" class="tab-pane" id="rules">
+      <div class="text-right mb-4">
+        <a href="{% url 'rule-new' 'service' service.id %}" class="btn btn-primary btn-sm">{% translate "Register Rule" %}</a>
+      </div>
+
+      {% include "promgen/service_block_panel_rules.inc.html" %}
+
+    </div>
+
+    <div role="tabpanel" class="tab-pane" id="notifiers">
+      <div class="text-right mb-4">
+        <a href="{% url 'service-notifier' service.id %}" class="btn btn-primary btn-sm">{% translate "Register Notifier" %}</a>
+      </div>
+
+      {% include "promgen/service_block_panel_notifiers.inc.html" %}
+
+    </div>
+  </div>
+
+</div> 
 
 {% endblock %}
diff --git a/promgen/templates/promgen/service_detail_projects.html b/promgen/templates/promgen/service_detail_projects.html
new file mode 100644
index 00000000..c46624be
--- /dev/null
+++ b/promgen/templates/promgen/service_detail_projects.html
@@ -0,0 +1,20 @@
+{% load i18n %}
+
+{% regroup project_list|dictsort:"shard_id" by shard as project_shard_list %}
+
+<div class="text-right mb-4">
+    <a href="{% url 'project-new' service.id %}" class="btn btn-primary btn-sm">{% translate "Register Project" %}</a>
+</div>
+
+{% for shard, shard_projects in project_shard_list %}
+<div class="panel panel-default">
+    <div class="panel-heading" v-pre>
+        Datasource
+        <a href="{{shard.get_absolute_url}}">{{shard.name}}</a>
+        ( <a href="{{shard.url}}">{{shard.url}}</a> )
+    </div>
+
+    {% include 'promgen/service_detail_projects_table.html' with shard_projects=shard_projects service=service %}
+    
+</div>
+{% endfor %}
diff --git a/promgen/templates/promgen/service_detail_projects_table.html b/promgen/templates/promgen/service_detail_projects_table.html
new file mode 100644
index 00000000..dbf590c6
--- /dev/null
+++ b/promgen/templates/promgen/service_detail_projects_table.html
@@ -0,0 +1,27 @@
+{% load i18n %}
+
+<table class="table table-bordered table-condensed">
+  <tr>
+      <th class="col-md-2">Project</th>
+      <th class="col-md-3">Exporters</th>
+      <th class="col-md-3">Notifiers</th>
+      <th class="col-md-1">Actions</th>
+  </tr>
+  {% for project in shard_projects %}
+
+  {% if service.notifiers.count == 0 and project.notifiers.count == 0 %}
+  <tr>
+      <td colspan="4" class="warning">
+          <span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
+          {% translate "No notifications configured for this project. Please configure some" %}
+      </td>
+  </tr>
+  {% endif %}
+
+  {% include 'promgen/project_row.html' %}
+  {% empty %}
+  <tr>
+      <td colspan="4">No Projects?</td>
+  </tr>
+  {% endfor %}
+</table>