diff --git a/promgen/locale/ja/LC_MESSAGES/django.po b/promgen/locale/ja/LC_MESSAGES/django.po
index a13701c8f..c06544ec7 100644
--- a/promgen/locale/ja/LC_MESSAGES/django.po
+++ b/promgen/locale/ja/LC_MESSAGES/django.po
@@ -172,3 +172,7 @@ msgstr "Serviceを登録"
 #: templates/promgen/project_detail_hosts.html:49
 msgid "Silence selected hosts"
 msgstr "選択したHostをSilence"
+
+#: templates/promgen/service_detail.html:23
+msgid "Actions"
+msgstr "Actions"
diff --git a/promgen/static/css/promgen.css b/promgen/static/css/promgen.css
index d106ccbc3..f01ae226c 100644
--- a/promgen/static/css/promgen.css
+++ b/promgen/static/css/promgen.css
@@ -81,6 +81,29 @@ a[rel]:after {
   cursor: pointer;
 }
 
+
+/* service-detail */
+.promgen-flex-space-between-center {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+
+/* service-action-button-group */
+.service-action-button-group {
+  hr {
+    margin-top: 5px !important;
+    margin-bottom: 5px !important;
+  }
+  .dropdown-menu > li > form > button {
+    padding: 3px 20px;
+    white-space: nowrap;
+    background: none;
+    border: none;
+  }
+}
+
 /* Margin Top */
 .mt-0 { margin-top: 0 !important; }
 .mt-1 { margin-top: 0.25rem !important; }
diff --git a/promgen/templates/promgen/service_action_button_group.html b/promgen/templates/promgen/service_action_button_group.html
new file mode 100644
index 000000000..1b478d3f1
--- /dev/null
+++ b/promgen/templates/promgen/service_action_button_group.html
@@ -0,0 +1,44 @@
+{% load i18n %}
+{% load promgen %}
+
+<div style="display: inline-block;" class="service-action-button-group">
+  <div class="btn-group btn-group-sm" role="group" aria-label="...">
+    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      {% translate "Actions" %} <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+
+      <li>
+        <form action="{% url 'service-notifier' service.id %}" style="display:inline" method="post" v-pre>{% csrf_token %}
+          <input type="hidden" name="sender" value="promgen.notification.user">
+          <input type="hidden" name="value" value="{{request.user.username}}" />
+          <button>{% translate "Subscribe to Notifications" %}</button>
+        </form>
+      </li>
+
+      <hr>
+
+      <li role="presentation"><a href="{% urlqs 'audit-list' service=service.id %}">{% translate "Edit History" %}</a></li>
+      <li role="presentation"><a href="{% urlqs 'alert-list' service=service.name %}">{% translate "Alert History" %}</a></li>
+
+      <hr>
+
+      <li role="presentation"><a href="{% url 'api:service-rules' name=service.name %}">{% translate "Export Rules" %}</a></li>
+      <li role="presentation"><a href="{% url 'api:service-targets' name=service.name %}">{% translate "Export Service" %}</a></li>
+
+      <hr>
+
+      <li role="presentation">
+        <form method="post" action="{% url 'service-delete' service.id %}" onsubmit="return confirm('{% translate "Delete this service?" %}')" style="display: inline">
+          {% csrf_token %}   
+          <button type="submit" style="color:#d9534f;">{% translate "Delete Service" %}</button>  
+        </form>
+      </li>
+
+    </ul>
+  </div>
+  <a @click="setSilenceDataset" data-service="{{service.name}}" class="btn btn-warning btn-sm ml-2 mr-2">{% translate "Silence" %}</a>
+
+  <a href="{% url 'service-update' service.id %}" class="btn btn-warning btn-sm">{% translate "Edit Service" %}</a>
+
+</div>
diff --git a/promgen/templates/promgen/service_block.html b/promgen/templates/promgen/service_block.html
index 441752edd..5e99b51b7 100644
--- a/promgen/templates/promgen/service_block.html
+++ b/promgen/templates/promgen/service_block.html
@@ -35,73 +35,25 @@
 
   <div class="panel panel-default">
     <div class="panel-body">
-      <div class="btn-group btn-group-sm" role="group" aria-label="...">
+      <div class="btn-group btn-group-sm mr-2" role="group" aria-label="...">
         <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          {% trans "Register" %} <span class="caret"></span>
+          {% translate "Register" %} <span class="caret"></span>
         </button>
         <ul class="dropdown-menu">
-          <li role="presentation"><a href="{% url 'project-new' service.id %}">{% trans "Register Project" %}</a></li>
-          <li role="presentation"><a href="{% url 'rule-new' 'service' service.id %}">{% trans "Register Rule" %}</a></li>
-          <li role="presentation"><a href="{% url 'service-notifier' service.id %}">{% trans "Register Notifier" %}</a></li>
+          <li role="presentation"><a href="{% url 'project-new' service.id %}">{% translate "Register Project" %}</a></li>
+          <li role="presentation"><a href="{% url 'rule-new' 'service' service.id %}">{% translate "Register Rule" %}</a></li>
+          <li role="presentation"><a href="{% url 'service-notifier' service.id %}">{% translate "Register Notifier" %}</a></li>
         </ul>
       </div>
 
-      <form action="{% url 'service-notifier' service.id %}" style="display:inline" method="post" v-pre>{% csrf_token %}
-        <input type="hidden" name="sender" value="promgen.notification.user">
-        <input type="hidden" name="value" value="{{request.user.username}}" />
-        <button class="btn btn-primary btn-sm">{% trans "Subscribe to Notifications" %}</button>
-      </form>
+      {% include "promgen/service_action_button_group.html" %}
 
-      <div class="btn-group btn-group-sm" role="group" aria-label="...">
-        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          {% trans "Change History" %} <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu">
-          <li role="presentation"><a href="{% urlqs 'audit-list' service=service.id %}">{% trans "Edit History" %}</a></li>
-          <li role="presentation"><a href="{% urlqs 'alert-list' service=service.name %}">{% trans "Alert History" %}</a></li>
-        </ul>
-      </div>
-
-      <a href="{% url 'service-update' service.id %}" class="btn btn-warning btn-sm">{% trans "Edit Service" %}</a>
-      <a @click="setSilenceDataset" data-service="{{service.name}}" class="btn btn-warning btn-sm">{% trans "Silence" %}</a>
-
-      <div class="btn-group btn-group-sm" role="group" aria-label="...">
-        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          Export <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu">
-          <li role="presentation"><a href="{% url 'api:service-rules' name=service.name %}">{% trans "Export Rules" %}</a></li>
-          <li role="presentation"><a href="{% url 'api:service-targets' name=service.name %}">{% trans "Export Service" %}</a></li>
-        </ul>
-      </div>
-
-      <form method="post" action="{% url 'service-delete' service.id %}" onsubmit="return confirm('{% trans "Delete this service?" %}')" style="display: inline">
-        {% csrf_token %}
-        <button class="btn btn-danger btn-sm pull-right">{% trans "Delete Service" %}</button>
-      </form>
-    </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 000000000..608beb4e5
--- /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 000000000..5b3c6095b
--- /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 fd4540a03..bde08579b 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 556b8e1b6..75b137804 100644
--- a/promgen/templates/promgen/service_detail.html
+++ b/promgen/templates/promgen/service_detail.html
@@ -8,15 +8,53 @@
 
 {% 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 000000000..c46624be9
--- /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 000000000..dbf590c60
--- /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>