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..ba90ccfd9 100644
--- a/promgen/static/css/promgen.css
+++ b/promgen/static/css/promgen.css
@@ -81,6 +81,19 @@ a[rel]:after {
   cursor: pointer;
 }
 
+
+/* service-detail */
+.promgen-flex-space-between-center {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+hr {
+  margin-top: 5px !important;
+  margin-bottom: 5px !important;
+}
+
 /* 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..77bf524fd
--- /dev/null
+++ b/promgen/templates/promgen/service_action_button_group.html
@@ -0,0 +1,48 @@
+{% load i18n %}
+{% load promgen %}
+
+
+<div style="display: inline-block;">
+  <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 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">
+        <a href="">
+          <form method="post" action="{% url 'service-delete' service.id %}" onsubmit="return confirm('{% translate "Delete this service?" %}')" style="display: inline">
+            {% csrf_token %}   
+              <button style="background:none;border: none;padding: 0;">{% translate "Delete Service" %}</button>  
+          </form>
+        </a>
+      </li>
+
+      <hr>
+
+      <li>
+        <a href="">
+          <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 style="background:none;border: none;padding: 0;">{% translate "Subscribe to Notifications" %}</button>
+          </form>
+        </a>
+      </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 7d768bc6d..d27003cb8 100644
--- a/promgen/templates/promgen/service_block.html
+++ b/promgen/templates/promgen/service_block.html
@@ -33,50 +33,19 @@
 
   <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>
 
@@ -89,7 +58,7 @@
     </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' %}
+        {% translate 'Show Site Rules' %}
       </a>
     </div>
   </div>
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..890358e0d 100644
--- a/promgen/templates/promgen/service_detail.html
+++ b/promgen/templates/promgen/service_detail.html
@@ -8,15 +8,66 @@
 
 {% 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="#project" data-toggle="tab">Project</a></li>
+  <li role="presentation"><a href="#rule" data-toggle="tab">Rule</a></li>
+  <li role="presentation"><a href="#notifier" data-toggle="tab">Notifier</a></li>
+</ul>
+
+<div class="well">
+
+  <div class="tab-content">
+    <div role="tabpanel" class="tab-pane active" id="project">
+      {% 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="rule">
+      <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>
+      {% 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 %}
+    </div>
+
+    <div role="tabpanel" class="tab-pane" id="notifier">
+      <div class="text-right mb-4">
+        <a href="{% url 'service-notifier' service.id %}" class="btn btn-primary btn-sm">{% translate "Register Notifier" %}</a>
+      </div>
+      {% if service.notifiers.count %} 
+      <div class="panel panel-default">
+        {% include "promgen/notifier_block.html" with object=service show_edit=1 %}
+      </div>
+      {% endif %} 
+    </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..8a5e6dd95
--- /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>
\ No newline at end of file