diff --git a/promgen/forms.py b/promgen/forms.py
index 327034177..219da168f 100644
--- a/promgen/forms.py
+++ b/promgen/forms.py
@@ -4,7 +4,7 @@
 import datetime
 
 from django import forms
-
+from dateutil import parser
 from promgen import models, plugins
 
 
@@ -37,31 +37,30 @@ class ImportRuleForm(forms.Form):
 class SilenceForm(forms.Form):
     def validate_datetime(value):
         try:
-            datetime.datetime.strptime(value, '%Y-%m-%d %H:%M')
+            parser.parse(value)
         except:
             raise forms.ValidationError('Invalid timestamp')
 
-    next = forms.CharField(required=False)
     duration = forms.CharField(required=False)
-    start = forms.CharField(required=False, validators=[validate_datetime])
-    stop = forms.CharField(required=False, validators=[validate_datetime])
+    startsAt = forms.CharField(required=False, validators=[validate_datetime])
+    endsAt = forms.CharField(required=False, validators=[validate_datetime])
     comment = forms.CharField(required=False)
-    created_by = forms.CharField(required=False)
+    createdBy = forms.CharField(required=False)
 
     def clean_comment(self):
         if self.cleaned_data['comment']:
             return self.cleaned_data['comment']
         return "Silenced from Promgen"
 
-    def clean_created_by(self):
-        if self.cleaned_data['created_by']:
-            return self.cleaned_data['created_by']
+    def clean_createdBy(self):
+        if self.cleaned_data['createdBy']:
+            return self.cleaned_data['createdBy']
         return "Promgen"
 
     def clean(self):
         duration = self.data.get('duration')
-        start = self.data.get('start')
-        stop = self.data.get('stop')
+        start = self.data.get('startsAt')
+        stop = self.data.get('endsAt')
 
         if duration:
             # No further validation is required if only duration is set
@@ -69,7 +68,7 @@ def clean(self):
 
         if not all([start, stop]):
             raise forms.ValidationError('Both start and end are required')
-        elif datetime.datetime.strptime(start, '%Y-%m-%d %H:%M') > datetime.datetime.strptime(stop, '%Y-%m-%d %H:%M'):
+        elif parser.parse(start) > parser.parse(stop):
             raise forms.ValidationError('Start time and end time is mismatch')
 
 
diff --git a/promgen/prometheus.py b/promgen/prometheus.py
index 8989279e8..20722b81f 100644
--- a/promgen/prometheus.py
+++ b/promgen/prometheus.py
@@ -433,6 +433,7 @@ def silence(labels, duration=None, **kwargs):
         else:
             raise Exception('Unknown time modifier')
         kwargs['endsAt'] = end.isoformat()
+        kwargs.pop('startsAt', False)
     else:
         local_timezone = pytz.timezone(settings.PROMGEN.get('timezone', 'UTC'))
         for key in ['startsAt', 'endsAt']:
@@ -448,4 +449,7 @@ def silence(labels, duration=None, **kwargs):
 
     logger.debug('Sending silence for %s', kwargs)
     url = urljoin(settings.PROMGEN['alertmanager']['url'], '/api/v1/silences')
-    util.post(url, json=kwargs).raise_for_status()
+    response = util.post(url, json=kwargs)
+    response.raise_for_status()
+    return response
+    
diff --git a/promgen/proxy.py b/promgen/proxy.py
index 6781f3d5a..50276865d 100644
--- a/promgen/proxy.py
+++ b/promgen/proxy.py
@@ -2,12 +2,18 @@
 # These sources are released under the terms of the MIT license: see LICENSE
 
 import concurrent.futures
+import json
 import logging
+from urllib.parse import urljoin
 
-from django.http import JsonResponse
+import requests
+from dateutil import parser
+from django.conf import settings
+from django.http import HttpResponse, JsonResponse
+from django.template import defaultfilters
 from django.views.generic import View
 from django.views.generic.base import TemplateView
-from promgen import models, util
+from promgen import forms, models, prometheus, util
 from requests.exceptions import HTTPError
 
 logger = logging.getLogger(__name__)
@@ -174,3 +180,70 @@ def get(self, request):
         return JsonResponse(
             {"status": "success", "data": {"resultType": resultType, "result": data}}
         )
+
+
+class ProxyAlerts(View):
+    def get(self, request):
+        alerts = []
+        try:
+            url = urljoin(settings.PROMGEN["alertmanager"]["url"], "/api/v1/alerts")
+            response = util.get(url)
+        except requests.exceptions.ConnectionError:
+            logger.error("Error connecting to %s", url)
+            return JsonResponse({})
+
+        data = response.json().get("data", [])
+        if data is None:
+            # Return an empty alert-all if there are no active alerts from AM
+            return JsonResponse({})
+
+        for alert in data:
+            alert.setdefault("annotations", {})
+            # Humanize dates for frontend
+            for key in ["startsAt", "endsAt"]:
+                if key in alert:
+                    alert[key] = parser.parse(alert[key])
+            # Convert any links to <a> for frontend
+            for k, v in alert["annotations"].items():
+                alert["annotations"][k] = defaultfilters.urlize(v)
+            alerts.append(alert)
+        return JsonResponse({"data": data}, safe=False)
+
+
+class ProxySilences(View):
+    def get(self, request):
+        try:
+            url = urljoin(settings.PROMGEN["alertmanager"]["url"], "/api/v1/silences")
+            response = util.get(url, params={"silenced": False})
+        except requests.exceptions.ConnectionError:
+            logger.error("Error connecting to %s", url)
+            return JsonResponse({})
+        else:
+            return HttpResponse(response.content, content_type="application/json")
+
+    def post(self, request):
+        body = json.loads(request.body.decode("utf-8"))
+        body.setdefault("comment", "Silenced from Promgen")
+        body.setdefault("createdBy", request.user.email)
+
+        form = forms.SilenceForm(body)
+        if not form.is_valid():
+            return JsonResponse({"status": form.errors}, status=400)
+
+        response = prometheus.silence(body.pop("labels"), **form.cleaned_data)
+
+        return HttpResponse(
+            response.text, status=response.status_code, content_type="application/json"
+        )
+
+
+class ProxyDeleteSilence(View):
+    def delete(self, request, silence_id):
+        url = urljoin(
+            settings.PROMGEN["alertmanager"]["url"], "/api/v1/silence/%s" % silence_id
+        )
+        response = util.delete(url)
+        return HttpResponse(
+            response.text, status=response.status_code, content_type="application/json"
+        )
+
diff --git a/promgen/static/css/promgen.css b/promgen/static/css/promgen.css
index 599ffece6..6b1c8b26b 100644
--- a/promgen/static/css/promgen.css
+++ b/promgen/static/css/promgen.css
@@ -23,3 +23,11 @@ a[rel]:after {
   grid-gap: 10px;
   grid-template-columns: repeat(auto-fit, minmax(400px,1fr));
 }
+
+[v-cloak] {
+  display: none;
+}
+
+.dl-horizontal {
+  word-wrap: break-word;
+}
diff --git a/promgen/static/js/promgen.js b/promgen/static/js/promgen.js
index 28a97b288..4f955fbca 100644
--- a/promgen/static/js/promgen.js
+++ b/promgen/static/js/promgen.js
@@ -3,68 +3,15 @@
 # These sources are released under the terms of the MIT license: see LICENSE
 */
 
-function silence_tag() {
-  var labels = this.dataset;
-  var form = $('#silence-form');
-  for (var label in labels) {
-    var value = labels[label];
-    console.debug('Adding %s %s', label, value);
-
-    form.find('a.' + label).remove();
-
-    input = $('<input type="hidden" class="form-control" />');
-    input.val(value).attr('name', 'label.' + label);
-
-    span = $('<a class="label label-warning"></a>').addClass(label);
-    span.attr('onclick', 'this.parentNode.removeChild(this); return false;');
-    span.text(label + ':' + value);
-    span.append(input);
-    span.append($('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>'));
-
-    form.find('div.labels').append(span);
-  }
-
-  form.show();
-}
-
 function update_page(data) {
   for (var key in data) {
     console.log("Replacing %s", key);
     var ele = $(data[key]);
-    ele.find("a.promgen-silence").click(silence_tag);
     $(key).replaceWith(ele);
   }
 }
 
-
-function label(key, value) {
-  var tmpl = document.querySelector('template.label');
-  var ele = document.importNode(tmpl.content, true);
-  var a = ele.querySelector('a');
-  a.text = key + ':' + value;
-  a.dataset[key] = value;
-  return ele;
-}
-
-function row(href, text) {
-  var tmpl = document.querySelector('template.alertrow');
-  var ele = document.importNode(tmpl.content, true);
-  var a = ele.querySelector('td a');
-  a.href = href;
-  a.text = text;
-  return ele;
-}
-
-function annotation(dt, dd) {
-  var tmpl = document.querySelector('template.annotation');
-  var ele = document.importNode(tmpl.content, true);
-  ele.querySelector('dt').textContent = dt;
-  ele.querySelector('dd').innerHTML = dd;
-  return ele;
-}
-
 $(document).ready(function() {
-  $("a.promgen-silence").click(silence_tag);
   $('[data-toggle="popover"]').popover();
   $('[data-toggle="tooltip"]').tooltip();
 
@@ -89,51 +36,6 @@ $(document).ready(function() {
     })
   })
 
-  $.ajax("/ajax/alert").done(function(alerts){
-    var btn = document.getElementById('alert-load');
-    var panel = document.getElementById('alert-all');
-
-    for (var alert_id in alerts) {
-      var alert = alerts[alert_id];
-      var r = row(alert.generatorURL, alert.startsAt);
-      var labels = annotation('labels', '');
-      for (var k in alert.labels) {
-        var l = label(k, alert.labels[k]);
-        labels.querySelector('dd').appendChild(l);
-      }
-      r.querySelector('dl').appendChild(labels);
-
-      for (var k in alert.annotations) {
-        var a = annotation(k, alert.annotations[k]);
-        r.querySelector('dl').appendChild(a);
-      }
-
-      for (var k in alert.labels) {
-        var sel = '.promgen-alert[data-'+k+'^="'+alert.labels[k].split(':')[0]+'"]';
-        console.debug('Searching for', sel);
-        var target = document.querySelector('.promgen-alert[data-'+k+'^="'+alert.labels[k].split(':')[0]+'"]');
-        if (target) {
-          target.querySelector('table').appendChild(r.cloneNode(true));
-          target.style.display = 'block';
-        }
-      }
-      panel.querySelector('table').appendChild(r);
-    }
-
-    if (alerts.length > 0) {
-      btn.classList.remove('btn-default');
-      btn.classList.add('btn-danger');
-      btn.text = 'Alerts ' + alerts.length;
-    }
-    document.querySelectorAll('a.promgen-silence').forEach(function(ele){
-      ele.onclick = silence_tag;
-    });
-  });
-
-  $.post("/ajax/silence", {
-    'referer': window.location.toString()
-  }).done(update_page);
-
   $('[data-source]').click(function() {
     var btn = $(this);
     var query = btn.data('source') === 'self' ? btn.text() : $(btn.data('source')).val();
@@ -178,39 +80,6 @@ $(document).ready(function() {
     }
   });
 
-/* Disable pending refactoring
-  $("select[data-ajax]").each(function(index) {
-    var ele = $(this);
-    var tgt = $(ele.data('target'));
-
-    $.get(ele.data('ajax')).done(function(data){
-      data.data.forEach(function(item){
-        var option = $('<option>');
-        option.html(item);
-        option.val(item);
-        option.appendTo(ele);
-      });
-
-      tgt.typeahead({
-        source: data.data,
-        items: "all",
-        minLength: 3,
-        delay: 1,
-        updater: function(item) {
-          return item + ele.data("append")
-        }
-      })
-    });
-
-    ele.change(function(){
-      var replacement = ele.val() ? ele.val() + ele.data("append") : "";
-      tgt.selection("replace", {text: replacement, mode: "before"});
-      tgt.focus();
-    });
-
-  });
-*/
-
   $('[data-filter]').change(function(){
     var search = this.value.toUpperCase();
     $(this.dataset.filter).each(function(i, ele){
@@ -218,22 +87,4 @@ $(document).ready(function() {
       ele.style.display = txt.indexOf(search) > -1 ? "" : "none"
     })
   });
-
-  $('.silence_start').datetimepicker({
-    format: 'YYYY-MM-DD HH:mm'
-  });
-  $('.silence_end').datetimepicker({
-    format: 'YYYY-MM-DD HH:mm',
-    useCurrent: false //Important! See issue #1075
-  });
-  $(".silence_start").on("dp.change", function(e) {
-    $('.silence_end').data("DateTimePicker").minDate(e.date);
-  });
-  $(".silence_end").on("dp.change", function(e) {
-    $('.silence_start').data("DateTimePicker").maxDate(e.date);
-  });
-});
-
-$('#silence-form-close').click( function() {
-  $('#silence-form').hide();
 });
diff --git a/promgen/static/js/promgen.vue.js b/promgen/static/js/promgen.vue.js
new file mode 100644
index 000000000..6b11aad65
--- /dev/null
+++ b/promgen/static/js/promgen.vue.js
@@ -0,0 +1,128 @@
+/*
+# Copyright (c) 2019 LINE Corporation
+# These sources are released under the terms of the MIT license: see LICENSE
+*/
+
+var dataStore = {
+    newSilence: { 'labels': {} },
+    globalSilences: [],
+    globalAlerts: []
+};
+
+var app = new Vue({
+    el: '#vue',
+    data: dataStore,
+    methods: {
+        toggleTarget: function (target) {
+            let tgt = document.getElementById(target);
+            tgt.classList.toggle('collapse');
+        },
+        silenceExpire: function (id) {
+            fetch('/proxy/v1/silences/' + id, { method: 'DELETE' }).then(function (response) {
+                location.reload();
+            })
+        },
+        silenceChangeEvent: function (event) {
+            this.newSilence[event.target.name] = event.target.value;
+        },
+        silenceSubmit: function (event) {
+            fetch('/proxy/v1/silences', { method: 'POST', body: JSON.stringify(this.newSilence) }).then(function (response) {
+                location.reload();
+            })
+        },
+        silenceRemoveLabel: function (label) {
+            console.log('silenceRemoveLabel', label)
+            this.$delete(this.newSilence.labels, label)
+        },
+        showSilenceForm: function (event) {
+            document.getElementById('silence-form').classList.remove('collapse');
+            scroll(0, 0);
+        },
+        silenceAppendLabel: function (event) {
+            console.log('silenceAppendLabel', event.target.dataset);
+            this.$set(this.newSilence.labels, event.target.dataset.label, event.target.dataset.value);
+            this.showSilenceForm(event);
+        },
+        silenceSetLabels: function (event) {
+            console.log('silenceSetLabels', event.target.dataset);
+            this.$set(this.newSilence, 'labels', {});
+            for (key in event.target.dataset) {
+                this.$set(this.newSilence.labels, key, event.target.dataset[key]);
+            }
+            this.showSilenceForm(event);
+        },
+        filterBy: function (source, label) {
+            let labels = new Set();
+            for (var a in source.filter(x => x.status.state == 'active')) {
+                for (var l in source[a].labels) {
+                    if (l == label) {
+                        labels.add(source[a].labels[label]);
+                    }
+                }
+            }
+            return labels;
+        },
+        fetchSilences: function () {
+            let this_ = this;
+            fetch('/proxy/v1/silences')
+                .then(function (response) {
+                    return response.json();
+                })
+                .then(function (silences) {
+                    this_.globalSilences = silences.data;
+
+                    // Pull out the matchers and do a simpler label map
+                    // To make other code easier
+                    for (var i in this_.globalSilences) {
+                        var silence = this_.globalSilences[i];
+                        silence.labels = {}
+                        for (var m in silence.matchers) {
+                            let matcher = silence.matchers[m]
+                            silence.labels[matcher.name] = matcher.value
+                        }
+                    }
+                });
+        },
+        fetchAlerts: function () {
+            let this_ = this;
+            fetch('/proxy/v1/alerts')
+                .then(function (response) {
+                    return response.json();
+                })
+                .then(function (alerts) {
+                    this_.globalAlerts = alerts.data;
+                });
+
+        }
+
+    },
+    computed: {
+        alertLabelsService: function () {
+            return this.filterBy(this.globalAlerts, 'service');
+        },
+        alertLabelsProject: function () {
+            return this.filterBy(this.globalAlerts, 'project');
+        },
+        alertLabelsRule: function () {
+            return this.filterBy(this.globalAlerts, 'alertname');
+        },
+        silenceLabelsService: function () {
+            return this.filterBy(this.globalSilences, 'service');
+        },
+        silenceLabelsProject: function () {
+            return this.filterBy(this.globalSilences, 'project');
+        },
+        filterActiveAlerts: function () {
+            return this.globalAlerts.filter(alert => alert.status.state == 'active');
+        },
+        filterActiveSilences: function () {
+            return this.globalSilences.filter(silence => silence.status.state == 'active');
+        }
+    },
+    mounted: function () {
+        this.fetchAlerts();
+        this.fetchSilences();
+    }
+})
+
+
diff --git a/promgen/templates/base.html b/promgen/templates/base.html
index fc4729da9..cc10881a9 100644
--- a/promgen/templates/base.html
+++ b/promgen/templates/base.html
@@ -1,74 +1,40 @@
 {% load staticfiles %}
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>{% block title %}Promgen {{ VERSION }}{% endblock %}</title>
-        <link rel="stylesheet" href="{% static "/css/bootstrap.min.css" %}">
-        <link rel="stylesheet" href="{% static "/css/bootstrap-theme.min.css" %}">
-        <link rel="stylesheet" href="{% static "/css/bootstrap-datetimepicker.min.css" %}">
-        <link rel="stylesheet" href="{% static "/css/bootstrap-switch.min.css" %}">
-        <link rel="stylesheet" href="{% static "/css/promgen.css" %}">
-    </head>
-    <body>
-{% block navbar %}
-{% include "promgen/navbar.html" %}
-{% endblock %}
-        <div id="vue" class="container">
-          {% if messages %}
-              {% for message in messages %}
-              <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}" role="alert">
-                  <button type="button" class="close" data-dismiss="alert">
-                      <span aria-hidden="true">&times;</span>
-                  </button>
-                  {{ message }}
-              </div>
-              {% endfor %}
-          {% endif %}
-            <div>
-{% include 'promgen/silence_form.html' %}
-<div class="panel panel-danger collapse" id="alert-all">
-  <div class="panel-heading">
-    Alerts
-    <button type="button" class="close" data-toggle="collapse" href="#alert-all" aria-expanded="false" aria-controls="collapseExample">
-      <span aria-hidden="true">&times;</span>
-    </button>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{% block title %}Promgen {{ VERSION }}{% endblock %}</title>
+  <link rel="stylesheet" href="{% static "/css/bootstrap.min.css" %}">
+  <link rel="stylesheet" href="{% static "/css/bootstrap-theme.min.css" %}">
+  <link rel="stylesheet" href="{% static "/css/bootstrap-switch.min.css" %}">
+  <link rel="stylesheet" href="{% static "/css/promgen.css" %}">
+</head>
+
+<body>
+  <div id="vue">
+    {% block navbar %}
+    {% include "promgen/navbar.html" %}
+    {% endblock %}
+    <div class="container">
+      {% include 'promgen/global_messages.html' %}
+      {% include 'promgen/silence_form.html' %}
+      {% include 'promgen/global_alerts.html' %}
+      {% include 'promgen/global_silences.html' %}
+      {% block content %}{% endblock %}
+    </div>
   </div>
-  <table class="table table-bordered table-condensed">
-    <template class="alertrow">
-      <tr>
-        <td><a href="#"></a></td>
-        <td>
-          <dl class="dl-horizontal"></dl>
-        </td>
-      </tr>
-    </template>
-    <template class="annotation">
-      <dt>k</dt>
-      <dd>v</dd>
-    </template>
-    <template class="label">
-      <a
-        class="label label-warning promgen-silence"
-        href="#"
-        style="display: inline-block;"
-      >k:v</a>
-    </template>
-  </table>
-</div>
-<div class="panel panel-default" style="display:none" id="silence-all"></div>
-{% block content %}{% endblock %}
-            </div>
-        </div>
-        <script src="{% static "/js/jquery.min.js" %}"></script>
-        <script src="{% static "/js/jquery.selection.js" %}"></script>
-        <script src="{% static "/js/bootstrap.min.js" %}"></script>
-        <script src="{% static "/js/bootstrap3-typeahead.min.js" %}"></script>
-        <script src="{% static "/js/moment.min.js" %}"></script>
-        <script src="{% static "/js/bootstrap-datetimepicker.min.js" %}"></script>
-        <script src="{% static "/js/bootstrap-switch.min.js" %}"></script>
-        <script src="{% static "/js/promgen.js" %}"></script>
-{% block javascript %}{% endblock %}
-    </body>
+  <script src="{% static "/js/jquery.min.js" %}"></script>
+  <script src="{% static "/js/jquery.selection.js" %}"></script>
+  <script src="{% static "/js/bootstrap.min.js" %}"></script>
+  <script src="{% static "/js/bootstrap3-typeahead.min.js" %}"></script>
+  <script src="{% static "/js/moment.min.js" %}"></script>
+  <script src="{% static "/js/bootstrap-switch.min.js" %}"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+  <script src="{% static "/js/promgen.js" %}"></script>
+  <script src="{% static "/js/promgen.vue.js" %}"></script>
+  {% block javascript %}{% endblock %}
+</body>
+
 </html>
diff --git a/promgen/templates/promgen/ajax_silence.html b/promgen/templates/promgen/ajax_silence.html
index ac5a3d467..705ceefb3 100644
--- a/promgen/templates/promgen/ajax_silence.html
+++ b/promgen/templates/promgen/ajax_silence.html
@@ -27,7 +27,8 @@
     <td>
       {% for matcher in silence.matchers %}
         <a
-          class="label label-warning promgen-silence"
+          @click.prevent="silenceSetLabels"
+          class="label label-warning"
           data-{{matcher.name}}="{{matcher.value}}"
           href="#"
           style="display: inline-block;"
diff --git a/promgen/templates/promgen/alert_row.html b/promgen/templates/promgen/alert_row.html
new file mode 100644
index 000000000..bb301b08b
--- /dev/null
+++ b/promgen/templates/promgen/alert_row.html
@@ -0,0 +1,21 @@
+{% verbatim %}
+<td>
+    <a :href="alert.generatorURL" v-text="alert.startsAt"></a>
+</td>
+<td>
+    <dl class="dl-horizontal">
+        <dt>Labels</dt>
+        <dd>
+            <ul class="list-inline">
+                <li v-for="(value, label, index) in alert.labels">
+                    <a @click.prevent="silenceAppendLabel" class="label label-warning" v-bind:data-label="label" v-bind:data-value="value">{{label}}:{{value}}</a>
+                </li>
+            </ul>
+        </dd>
+        <template v-for="(value, annotation, index) in alert.annotations" class="dl-horizontal">
+            <dt>{{annotation}}</dt>
+            <dd v-html="value"></dd>
+        </template>
+    </dl>
+</td>
+{% endverbatim %}
diff --git a/promgen/templates/promgen/global_alerts.html b/promgen/templates/promgen/global_alerts.html
new file mode 100644
index 000000000..68bb6552f
--- /dev/null
+++ b/promgen/templates/promgen/global_alerts.html
@@ -0,0 +1,12 @@
+<div class="panel panel-danger collapse" id="globalAlerts">
+    <div class="panel-heading">
+        Alerts
+        <a @click.prevent="toggleTarget('globalAlerts')" class="close" role="button">&times;</a>
+    </div>
+
+    <table class="table table-bordered table-condensed">
+        <tr v-for="(alert, index) in filterActiveAlerts">
+            {% include 'promgen/alert_row.html' %}
+        </tr>
+    </table>
+</div>
diff --git a/promgen/templates/promgen/global_messages.html b/promgen/templates/promgen/global_messages.html
new file mode 100644
index 000000000..9a963adec
--- /dev/null
+++ b/promgen/templates/promgen/global_messages.html
@@ -0,0 +1,8 @@
+{% for message in messages %}
+<div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}" role="alert">
+    <button type="button" class="close" data-dismiss="alert">
+        <span aria-hidden="true">&times;</span>
+    </button>
+    {{ message }}
+</div>
+{% endfor %}
\ No newline at end of file
diff --git a/promgen/templates/promgen/global_silences.html b/promgen/templates/promgen/global_silences.html
new file mode 100644
index 000000000..29bc48fba
--- /dev/null
+++ b/promgen/templates/promgen/global_silences.html
@@ -0,0 +1,19 @@
+<div class="panel panel-warning collapse" id="globalSilences">
+    <div class="panel-heading">
+        Silences
+        <a @click.prevent="toggleTarget('globalSilences')" class="close" role="button" href="#">
+            &times;
+        </a>
+    </div>
+    <table class="table table-bordered table-condensed">
+        <tr>
+            <th>Ends</th>
+            <th>Matchers</th>
+            <th>Comment</th>
+            <th>CreatedBy</th>
+        </tr>
+        <tr v-for="(silence, index) in filterActiveSilences">
+            {% include 'promgen/silence_row.html' %}
+        </tr>
+    </table>
+</div>
diff --git a/promgen/templates/promgen/host_detail.html b/promgen/templates/promgen/host_detail.html
index 6c1a70ebc..40cc438ad 100644
--- a/promgen/templates/promgen/host_detail.html
+++ b/promgen/templates/promgen/host_detail.html
@@ -19,7 +19,8 @@ <h1>Host: {{ slug }}</h1>
 <div class="panel panel-primary">
   <div class="panel-body">
     <a
-    class="btn btn-warning promgen-silence"
+    @click.prevent="silenceSetLabels"
+    class="btn btn-warning"
     data-instance="{{slug}}:[0-9]*"
     href="#"
     style="display: inline-block;"
diff --git a/promgen/templates/promgen/navbar.html b/promgen/templates/promgen/navbar.html
index b5d1e8322..3578f9a5e 100644
--- a/promgen/templates/promgen/navbar.html
+++ b/promgen/templates/promgen/navbar.html
@@ -2,8 +2,7 @@
     <nav class="container-fluid">
         <!-- Brand and toggle get grouped for better mobile display -->
         <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
-                aria-expanded="false">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
@@ -18,8 +17,7 @@
                 <li><a href="{% url 'rules-list' %}">Rules</a></li>
                 <li><a href="{% url 'url-list' %}">URLs</a></li>
                 <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
-                        aria-expanded="false">Misc <span class="caret"></span></a>
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Misc <span class="caret"></span></a>
                     <ul class="dropdown-menu">
                         <li><a href="{% url 'audit-list' %}">Log</a></li>
                         <li><a href="{% url 'farm-list' %}">Farms</a></li>
@@ -35,8 +33,7 @@
                 </li>
                 {% if EXTERNAL_LINKS %}
                 <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
-                        aria-expanded="false">Links <span class="caret"></span></a>
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Links <span class="caret"></span></a>
                     <ul class="dropdown-menu">
                         {% for title, link in EXTERNAL_LINKS.items %}
                         <li><a rel="noopener noreferrer" href="{{ link }}">{{ title }}</a></li>
@@ -53,17 +50,19 @@
             </form>
             <form style="display:inline;" action="{% url 'commit' %}" method="POST">
                 <input name="next" type="hidden" value="{{ request.get_full_path }}" />
-                <button type="submit" class="btn btn-warning">Commit</button>
+                <button type="submit" class="btn btn-primary">Commit</button>
             </form>
-            <a id="alert-load" class="btn btn-default navbar-btn" role="button" data-toggle="collapse" href="#alert-all"
-                aria-expanded="false" aria-controls="collapseExample">
-                Alerts
+            <a @click.prevent="toggleTarget('globalAlerts')" id="toggleAlerts" class="btn btn-danger navbar-btn" role="button">Alerts
+                <span v-text="filterActiveAlerts.length" class="badge"></span>
             </a>
-            <span id="silence-load" class="btn btn-default navbar-btn">Silences</span>
+            <a @click.prevent="toggleTarget('globalSilences')" id="toggleSilences" class="btn btn-warning navbar-btn" role="button">
+                Silences
+                <span v-text="filterActiveSilences.length" class="badge"></span>
+            </a>
+
             <ul class="nav navbar-nav navbar-right">
                 <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
-                        aria-expanded="false">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                         {{user.username}} <span class="caret"></span>
                     </a>
                     <ul class="dropdown-menu">
@@ -83,4 +82,4 @@
             {% endif %}
         </div><!-- /.navbar-collapse -->
     </nav><!-- /.container-fluid -->
-</header>
\ No newline at end of file
+</header>
diff --git a/promgen/templates/promgen/notifier_block.html b/promgen/templates/promgen/notifier_block.html
index 7e7cf5334..29764000d 100644
--- a/promgen/templates/promgen/notifier_block.html
+++ b/promgen/templates/promgen/notifier_block.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-<table class="table table-bordered table-condensed{% if collapse %} collapse" id="{{ collapse }}"{% endif %}">
+<table class="table table-bordered table-condensed{% if collapse %} collapse" id="{{ collapse }}{% endif %}">
   <tr>
     <th>Notifier</th>
     <th>Value</th>
diff --git a/promgen/templates/promgen/project_detail.html b/promgen/templates/promgen/project_detail.html
index 597581925..4f6fb4cae 100644
--- a/promgen/templates/promgen/project_detail.html
+++ b/promgen/templates/promgen/project_detail.html
@@ -20,25 +20,31 @@ <h1>Project: {{ project.name }}</h1>
   {% trans 'No notifications configured for this project. Please configure some' %}
 </div>
 {% endif %}
-<div style="display:none" data-project="{{project.name}}" class="panel panel-danger promgen-alert">
-  <div class="panel-heading">Alerts</div>
-  <table class="table table-bordered table-condensed"></table>
-</div>
-<div style="display:none" id="silence-project-{{ project.name|slugify }}"></div>
 
-{% if project.owner %}
-<p>{% trans 'Contact' %}: {{project.owner.username}}</p>
-{% endif %}
+{% include "promgen/project_detail_configuration.html" %}
 
-{% if project.description %}
-  <div class="panel panel-default">
-    <div class="panel-body">
-      {{project.description|linebreaksbr|urlize}}
-    </div>
+
+<div class="panel panel-danger" v-cloak v-show="alertLabelsProject.has('{{project.name}}')">
+  <div class="panel-heading">
+    <a @click.prevent="toggleTarget('alerts-project-{{project.name|slugify}}')" class="btn btn-danger btn-sm" role="button">Alerts</a>
   </div>
-{% endif %}
+  <table id="alerts-project-{{project.name|slugify}}" class="table table-bordered table-condensed">
+    <tr v-for="(alert, index) in globalAlerts" v-if="alert.labels.project == '{{project.name}}'">
+      {% include 'promgen/alert_row.html' %}
+    </tr>
+  </table>
+</div>
 
-{% include "promgen/project_detail_configuration.html" %}
+<div id="silence-project-{{ project.name|slugify }}" class="panel panel-warning" v-cloak v-show="silenceLabelsProject.has('{{project.name}}')">
+  <div class="panel-heading">
+    <a @click.prevent="toggleTarget('silences-project-{{project.name|slugify}}')" class="btn btn-warning btn-sm" role="button">Silences</a>
+  </div>
+  <table id="silences-project-{{project.name|slugify}}" class="table table-bordered table-condensed">
+    <tr v-for="(silence, index) in filterActiveSilences" v-if="silence.labels.project == '{{project.name}}'">
+      {% include 'promgen/silence_row.html' %}
+    </tr>
+  </table>
+</div>
 
 <div class="row">
   <div class="col-md-6">
diff --git a/promgen/templates/promgen/project_detail_configuration.html b/promgen/templates/promgen/project_detail_configuration.html
index ad2772da4..497180332 100644
--- a/promgen/templates/promgen/project_detail_configuration.html
+++ b/promgen/templates/promgen/project_detail_configuration.html
@@ -9,26 +9,40 @@
 
     <form action="{% url 'project-notifier' project.id %}" style="display:inline" method="post">{% csrf_token %}
       <input type="hidden" name="sender" value="promgen.notification.user">
-      <input type="hidden" name="value" value="{{request.user.username}}"/>
+      <input type="hidden" name="value" value="{{request.user.username}}" />
       <button class="btn btn-primary btn-sm">{% trans "Subscribe to Notifications" %}</button>
     </form>
 
     <a href="{% url 'audit-list'  %}?project={{project.id}}" class="btn btn-info btn-sm">{% trans "Edit History" %}</a>
     <a href="{% url 'project-update' project.id %}" class="btn btn-warning btn-sm">{% trans "Update Project" %}</a>
+    <a @click.prevent="silenceSetLabels" class="btn btn-warning btn-sm" data-project="{{project.name}}" data-service="{{project.service.name}}">{% 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>
+      <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:project-rules' name=project.name %}">{% trans "Export Rules" %}</a></li>
         <li role="presentation"><a href="{% url 'api:project-targets' name=project.name %}">{% trans "Export Project" %}</a></li>
       </ul>
     </div>
 
-    <form method="post" action="{% url 'project-delete' project.id %}" onsubmit="return confirm('{% trans "Delete this Project?" %}')" style="display: inline">
+    <form method="post" action="{% url 'project-delete' project.id %}" onsubmit="return confirm('{% trans " Delete this Project?" %}')" style="display: inline">
       {% csrf_token %}
       <button class="btn btn-danger btn-sm pull-right">{% trans "Delete Project" %}</button>
     </form>
   </div>
+
+  {% if project.description %}
+
+  <div class="panel-body">
+    {{project.description|linebreaksbr|urlize}}
+  </div>
+
+  {% endif %}
+
+  {% if project.owner %}
+  <div class="panel-footer">{% trans 'Contact' %}: {{project.owner.username}}</div>
+  {% endif %}
 </div>
diff --git a/promgen/templates/promgen/project_detail_exporters.html b/promgen/templates/promgen/project_detail_exporters.html
index b38cedd89..945234f3f 100644
--- a/promgen/templates/promgen/project_detail_exporters.html
+++ b/promgen/templates/promgen/project_detail_exporters.html
@@ -43,7 +43,8 @@
       </td>
       <td>
         <a
-          class="btn btn-warning btn-xs promgen-silence"
+          @click.prevent="silenceSetLabels"
+          class="btn btn-warning btn-xs"
           data-job="{{exporter.job}}"
           data-project="{{project.name}}"
           data-service="{{project.service.name}}"
diff --git a/promgen/templates/promgen/project_detail_hosts.html b/promgen/templates/promgen/project_detail_hosts.html
index e4939cf3c..8259373de 100644
--- a/promgen/templates/promgen/project_detail_hosts.html
+++ b/promgen/templates/promgen/project_detail_hosts.html
@@ -14,7 +14,8 @@
       <td><a href="{% url 'host-detail' host.name %}">{{ host.name }}</a></td>
       <td>
         <a
-          class="btn btn-warning btn-xs promgen-silence"
+          @click.prevent="silenceSetLabels"
+          class="btn btn-warning btn-xs"
           data-instance="{{host.name}}:[0-9]*"
           data-project="{{project.name}}"
           data-service="{{project.service.name}}"
diff --git a/promgen/templates/promgen/project_detail_notifiers.html b/promgen/templates/promgen/project_detail_notifiers.html
index c4c0b5047..a71ffac96 100644
--- a/promgen/templates/promgen/project_detail_notifiers.html
+++ b/promgen/templates/promgen/project_detail_notifiers.html
@@ -3,8 +3,9 @@
 {% if project.service.notifiers.count %}
 <div class="panel panel-default">
   <div class="panel-heading">
-    <a class="btn btn-default btn-sm" role="button" data-toggle="collapse" href="#show-service-senders" aria-expanded="false" aria-controls="collapseExample">
-    Service Notifiers ({{project.service.notifiers.count}})
+    <a class="btn btn-default btn-sm" role="button" data-toggle="collapse" href="#show-service-senders" aria-expanded="false"
+      aria-controls="collapseExample">
+      Service Notifiers ({{project.service.notifiers.count}})
     </a>
   </div>
   {% include "promgen/notifier_block.html" with object=project.service collapse="show-service-senders" %}
@@ -19,8 +20,8 @@
     <a href="{% url 'project-notifier' project.id %}" class="btn btn-primary">{% trans "Register Notifier" %}</a>
     <form action="{% url 'project-notifier' project.id %}" style="display:inline" method="post">{% csrf_token %}
       <input type="hidden" name="sender" value="promgen.notification.user">
-      <input type="hidden" name="value" value="{{request.user.username}}"/>
+      <input type="hidden" name="value" value="{{request.user.username}}" />
       <button class="btn btn-primary">{% trans "Subscribe to Notifications" %}</button>
     </form>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/promgen/templates/promgen/rule_block.html b/promgen/templates/promgen/rule_block.html
index 957644abd..3a4aa4d6f 100644
--- a/promgen/templates/promgen/rule_block.html
+++ b/promgen/templates/promgen/rule_block.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-<table class="table table-bordered table-condensed {% if collapse %}collapse" id="{{ collapse }}"{% endif %}">
+<table class="table table-bordered table-condensed {% if collapse %}collapse" id="{{ collapse }}{% endif %}">
   <tr>
     <th class="col-xs-2">Name</th>
     <th class="col-md-7">Clause</th>
diff --git a/promgen/templates/promgen/rule_update.html b/promgen/templates/promgen/rule_update.html
index 05766f8cd..90d2a0894 100644
--- a/promgen/templates/promgen/rule_update.html
+++ b/promgen/templates/promgen/rule_update.html
@@ -12,9 +12,15 @@
   <h1>Rule: {{ rule.name }}</h1>
 </div>
 
-<div style="display:none" data-alertname="{{rule.name}}" class="panel panel-danger promgen-alert">
-  <div class="panel-heading">Alerts</div>
-  <table class="table table-bordered table-condensed"></table>
+<div data-service="{{rule.name}}" class="panel panel-danger" v-cloak v-show="alertLabelsRule.has('{{rule.name}}')">
+  <div class="panel-heading">
+    <a @click.prevent="toggleTarget('alerts-service-{{rule.name|slugify}}')" class="btn btn-danger btn-sm" role="button">Alerts</a>
+  </div>
+  <table id="alerts-service-{{rule.name|slugify}}" class="table table-bordered table-condensed collapse">
+    <tr v-for="(alert, index) in globalAlerts" v-if="alert.labels.alertname == '{{rule.name}}'">
+      {% include 'promgen/alert_row.html' %}
+    </tr>
+  </table>
 </div>
 
 <form action="{% url 'rule-edit' rule.pk %}" class="input-group" method="post">{% csrf_token %}
@@ -62,7 +68,7 @@ <h1>Rule: {{ rule.name }}</h1>
   <div class="panel panel-primary">
     <div class="panel-heading">Annotations - Provide extra details for notifications</div>
     {{ annotation_set.management_form }}
-    <table class="table">
+    <table v-pre class="table">
         <tr>
           <th>Annotation</th>
           <th>Value</th>
@@ -79,7 +85,7 @@ <h1>Rule: {{ rule.name }}</h1>
     <ul class="list-group">
       <li class="list-group-item">Examples</li>
       <li class="list-group-item">
-        <code>summary: High load on {% templatetag openvariable %} $labels.instance {% templatetag closevariable %}</pre></code>
+        <code v-pre>summary: High load on {% templatetag openvariable %} $labels.instance {% templatetag closevariable %}</pre></code>
       </li>
     </ul>
   </div>
diff --git a/promgen/templates/promgen/search.html b/promgen/templates/promgen/search.html
index 5c22f23d9..651bb2781 100644
--- a/promgen/templates/promgen/search.html
+++ b/promgen/templates/promgen/search.html
@@ -76,7 +76,6 @@ <h1>Hosts</h1>
     </tr>
     {% endfor %}
   </table>
-  </div>
 </div>
 {% endif %}
 
@@ -105,7 +104,8 @@ <h1>Hosts</h1>
           <li>
             <a href="{% url 'host-detail' host.name %}">{{ host.name }}</a>
             <a
-            class="btn btn-warning btn-xs promgen-silence"
+            @click.prevent="silenceSetLabels"
+            class="btn btn-warning btn-xs"
             data-instance="{{host.name}}:[0-9]*"
             href="#"
             style="display: inline-block;"
@@ -127,7 +127,8 @@ <h1>Hosts</h1>
       <tr>
         <td><a href="{% url 'host-detail' host.name %}">{{ host.name }}</a></td>
         <td><a
-          class="btn btn-warning btn-xs promgen-silence"
+          @click.prevent="silenceSetLabels"
+          class="btn btn-warning btn-xs"
           data-instance="{{host.name}}:[0-9]*"
           href="#"
           style="display: inline-block;"
diff --git a/promgen/templates/promgen/service_block.html b/promgen/templates/promgen/service_block.html
index d59f0175d..e040ea382 100644
--- a/promgen/templates/promgen/service_block.html
+++ b/promgen/templates/promgen/service_block.html
@@ -1,25 +1,43 @@
 {% load i18n %}
 <div class="well">
-{% if service.check_notifiers == False %}
+  {% if service.check_notifiers == False %}
   <div class="alert alert-warning" role="alert">
     <span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
     <span class="sr-only">Warning:</span>
-    {% trans 'This service does not have any notifications configured. Please configure notifications to properly route alerts' %}
+    {% trans 'This service does not have any notifications configured. Please configure notifications to properly route
+    alerts' %}
   </div>
-{% endif %}
-  <div style="display:none" data-service="{{service.name}}" class="panel panel-danger promgen-alert">
-    <div class="panel-heading">Alerts</div>
-    <table class="table table-bordered table-condensed"></table>
+  {% endif %}
+
+  <div data-service="{{service.name}}" class="panel panel-danger" v-cloak v-show="alertLabelsService.has('{{service.name}}')">
+    <div class="panel-heading">
+      <a @click.prevent="toggleTarget('alerts-service-{{service.name|slugify}}')" class="btn btn-danger btn-sm" role="button">Alerts</a>
+    </div>
+    <table id="alerts-service-{{service.name|slugify}}" class="table table-bordered table-condensed collapse">
+      <tr v-for="(alert, index) in globalAlerts" v-if="alert.labels.service == '{{service.name}}'">
+        {% include 'promgen/alert_row.html' %}
+      </tr>
+    </table>
   </div>
-  <div style="display:none" id="silence-service-{{ service.name|slugify }}"></div>
 
-{% if service.description %}
+  <div id="silence-service-{{ service.name|slugify }}" class="panel panel-warning" v-cloak v-show="silenceLabelsService.has('{{service.name}}')">
+    <div class="panel-heading">
+      <a @click.prevent="toggleTarget('silences-service-{{service.name|slugify}}')" class="btn btn-warning btn-sm" role="button">Silences</a>
+    </div>
+    <table id="silences-service-{{service.name|slugify}}" class="table table-bordered table-condensed collapse">
+      <tr v-for="(silence, index) in filterActiveSilences" v-if="silence.labels.service == '{{service.name}}'">
+        {% include 'promgen/silence_row.html' %}
+      </tr>
+    </table>
+  </div>
+
+  {% if service.description %}
   <div class="panel panel-default">
     <div class="panel-body">
       {{service.description|linebreaksbr|urlize}}
     </div>
   </div>
-{% endif %}
+  {% endif %}
 
   <div class="panel panel-default">
     <div class="panel-body">
@@ -34,119 +52,106 @@
 
       <form action="{% url 'service-notifier' service.id %}" style="display:inline" method="post">{% csrf_token %}
         <input type="hidden" name="sender" value="promgen.notification.user">
-        <input type="hidden" name="value" value="{{request.user.username}}"/>
+        <input type="hidden" name="value" value="{{request.user.username}}" />
         <button class="btn btn-primary btn-sm">{% trans "Subscribe to Notifications" %}</button>
       </form>
 
       <a href="{% url 'audit-list'  %}?service={{service.id}}" class="btn btn-info btn-sm">{% trans "Service History" %}</a>
 
       <a href="{% url 'service-update' service.id %}" class="btn btn-warning btn-sm">{% trans "Edit Service" %}</a>
-      <a data-service="{{service.name}}" href="#" class="btn btn-warning btn-sm promgen-silence">{% trans "Silence" %}</a>
+      <a @click.prevent="silenceSetLabels" 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>
+          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">
+      <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 %}
+  {% if service.rule_set.count or request.site.rule_set.count %}
   <div class="panel panel-default">
     <div class="panel-heading">Rules</div>
-{% include "promgen/rule_block.html" with rule_list=service.rule_set.all show_edit=1 %}
-{% if request.site.rule_set.count %}
+    {% include "promgen/rule_block.html" with rule_list=service.rule_set.all show_edit=1 %}
+    {% if request.site.rule_set.count %}
     <div class="panel-body">
       <a class="btn btn-default btn-sm" role="button" data-toggle="collapse" href="#show-global-rules" aria-expanded="false" aria-controls="collapseExample">
         Show Common Rules
       </a>
     </div>
-{% include "promgen/rule_block.html" with rule_list=request.site.rule_set.all content_type='service' show_overwrite=service.id collapse="show-global-rules" %}
-{% endif %}
+    {% include "promgen/rule_block.html" with rule_list=request.site.rule_set.all content_type='service' show_overwrite=service.id collapse="show-global-rules" %}
+    {% endif %}
   </div>
-{% endif %}
+  {% endif %}
 
-{% if service.notifiers.count %}
+  {% if service.notifiers.count %}
   <div class="panel panel-default">
     <div class="panel-heading">Service Notifiers</div>
     {% include "promgen/notifier_block.html" with object=service show_edit=1 %}
   </div>
-{% endif %}
-
-{% if service.project_set.count %}
-<div class="panel panel-default">
-  <div class="panel-heading">Projects</div>
-<table class="table table-bordered table-condensed">
-  <tr>
-    <th class="col-md-2">Project</th>
-    <th class="col-md-2">Farm</th>
-    <th class="col-md-2">Exporters</th>
-    <th class="col-md-3">Notifiers</th>
-    <th class="col-md-1">Actions</th>
-  </tr>
-{% for project in service.project_set.all %}
-  <tr>
-    <td>
-{% if service.notifiers.count == 0 and project.notifiers.count == 0 %}
-      <a
-        class="btn btn-xs btn-warning"
-        role="button"
-        tabindex="0"
-        title="{% trans 'Notification setting warning' %}"
-        data-toggle="popover"
-        data-content='{% trans "No notifications configured for this project. Please configure some" %}'
-        data-html="true"
-        data-placement="right"
-        data-trigger="focus"
-      ><span class="glyphicon glyphicon-alert" aria-hidden="true"></span></a>
-{% endif %}
-      <a href="{% url 'project-detail' project.id %}">{{ project.name }}</a>
-      {% if project.owner %}
-      <p>{% trans 'Contact' %}: {{project.owner}}</p>
-      {% endif %}
-    </td>
-    <td>{% if project.farm %}{{ project.farm }}{% endif %}</td>
-    <td>
-      <table style="width: 100%">
-{% for exporter in project.exporter_set.all %}
-        <tr {% if not exporter.enabled %}class="bg-disabled text-muted"{% endif %} >
-          <td>{{ exporter.job }}</td>
-          <td>{{ exporter.port }}</td>
-          <td>{{ exporter.path }}</td>
-        </tr>
-{% endfor %}
-      </table>
-    </td>
-    <td>
-      <table style="width: 100%">
-{% for notifier in project.notifiers.all %}
-        <tr>
-          <td title="Added by: {{notifier.owner}}">{{ notifier.sender }}</td>
-          <td>{{ notifier.show_value }}</td>
-        </tr>
-{% endfor %}
-      </table>
-    </td>
-    <td>
-      <a
-        class="btn btn-warning btn-xs promgen-silence"
-        data-project="{{project.name}}"
-        data-service="{{service.name}}"
-        href="#"
-      >{% trans "Silence" %}</a>
-    </td>
-  </tr>
-{% endfor %}
-</table>
+  {% endif %}
+
+  {% if service.project_set.count %}
+  <div class="panel panel-default">
+    <div class="panel-heading">Projects</div>
+    <table class="table table-bordered table-condensed">
+      <tr>
+        <th class="col-md-2">Project</th>
+        <th class="col-md-2">Farm</th>
+        <th class="col-md-2">Exporters</th>
+        <th class="col-md-3">Notifiers</th>
+        <th class="col-md-1">Actions</th>
+      </tr>
+      {% for project in service.project_set.all %}
+      <tr>
+        <td>
+          {% if service.notifiers.count == 0 and project.notifiers.count == 0 %}
+          <a class="btn btn-xs btn-warning" role="button" tabindex="0" title="{% trans 'Notification setting warning' %}" data-toggle="popover" data-content='{% trans "No notifications configured for this project. Please configure some" %}'
+            data-html="true" data-placement="right" data-trigger="focus"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span></a>
+          {% endif %}
+          <a href="{% url 'project-detail' project.id %}">{{ project.name }}</a>
+          {% if project.owner %}
+          <p>{% trans 'Contact' %}: {{project.owner}}</p>
+          {% endif %}
+        </td>
+        <td>{% if project.farm %}{{ project.farm }}{% endif %}</td>
+        <td>
+          <table style="width: 100%">
+            {% for exporter in project.exporter_set.all %}
+            <tr {% if not exporter.enabled %}class="bg-disabled text-muted" {% endif %}>
+              <td>{{ exporter.job }}</td>
+              <td>{{ exporter.port }}</td>
+              <td>{{ exporter.path }}</td>
+            </tr>
+            {% endfor %}
+          </table>
+        </td>
+        <td>
+          <table style="width: 100%">
+            {% for notifier in project.notifiers.all %}
+            <tr>
+              <td title="Added by: {{notifier.owner}}">{{ notifier.sender }}</td>
+              <td>{{ notifier.show_value }}</td>
+            </tr>
+            {% endfor %}
+          </table>
+        </td>
+        <td>
+
+          <a @click.prevent="silenceSetLabels" class="btn btn-warning btn-xs" data-project="{{project.name}}" data-service="{{service.name}}" href="#">{% trans "Silence" %}</a>
+        </td>
+      </tr>
+      {% endfor %}
+    </table>
 
 
   </div>
diff --git a/promgen/templates/promgen/silence_form.html b/promgen/templates/promgen/silence_form.html
index 4f123a066..ccc54316d 100644
--- a/promgen/templates/promgen/silence_form.html
+++ b/promgen/templates/promgen/silence_form.html
@@ -1,31 +1,44 @@
 {% load i18n %}
-<form method="post" action="{% url 'silence' %}">
+<form @submit.prevent="silenceSubmit" method="post" action="{% url 'proxy-silence' %}">
   <input name="next" type="hidden" value="{{ request.get_full_path }}" />
   {% csrf_token %}
-<div class="panel panel-warning" style="display:none" id="silence-form">
-  <div class="panel-heading">
-    Silence
-    <button type="button" id="silence-form-close" class="close">&times;</button>
+
+  <div class="panel panel-warning collapse" id="silence-form">
+    <div class="panel-heading">
+      Silence
+      <a @click.prevent="toggleTarget('silence-form')" type="button" class="close">&times;</a>
+    </div>
+
+    <div class="labels panel-body">
+      <ul class="list-inline">
+        <li v-for="(value, label) in newSilence.labels">
+          <a @click.prevent="silenceRemoveLabel(label)" class="label label-warning">
+            {% verbatim %}
+            {{label}}: {{ value }}
+            {% endverbatim %}
+            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+          </a>
+        </li>
+      </ul>
+    </div>
+    <table class="table table-bordered table-condensed">
+      <tr>
+        <th>Duration</th>
+        <th>Starts</th>
+        <th>Ends</th>
+        <th>Comment</th>
+        <th>CreatedBy</th>
+      </tr>
+      <tr>
+        <td><input v-model="newSilence.duration" placeholder="1m/1h/etc" class="form-control" /></td>
+        <td><input v-model="newSilence.startsAt" placeholder="2006-10-25 14:30" type='datetime-local' class="form-control" /></td>
+        <td><input v-model="newSilence.endsAt" placeholder="2006-10-25 14:30" type='datetime-local' class="form-control" /></td>
+        <td><input v-model="newSilence.comment" placeholder="Silenced from Promgen" class="form-control" /></td>
+        <td><input v-model="newSilence.createdBy" placeholder="Promgen" class="form-control" /></td>
+      </tr>
+    </table>
+    <div class="panel-footer">
+      <button class="btn btn-warning">{% trans "Silence" %}</button>
+    </div>
   </div>
-  <div class="labels panel-body"></div>
-  <table class="table table-bordered table-condensed duration">
-    <tr>
-      <th>Duration</th>
-      <th>Start</th>
-      <th>End</th>
-      <th>Comment</th>
-      <th>CreatedBy</th>
-    </tr>
-    <tr>
-      <td><input name="duration" placeholder="1m/1h/etc" /></td>
-      <td style="position:relative"><input name="start" type='text' class="form-control silence_start" /></td>
-      <td style="position:relative"><input name="stop" type='text' class="form-control silence_end" /></td>
-      <td><input name="comment" placeholder="Silenced from Promgen" /></td>
-      <td><input name="created_by" placeholder="Promgen" value="{{user.email}}" /></td>
-    </tr>
-  </table>
-  <div class="panel-footer">
-    <button class="btn btn-warning">{% trans "Silence" %}</button>
-  </div>
-</div>
 </form>
diff --git a/promgen/templates/promgen/silence_row.html b/promgen/templates/promgen/silence_row.html
new file mode 100644
index 000000000..143ac3dff
--- /dev/null
+++ b/promgen/templates/promgen/silence_row.html
@@ -0,0 +1,16 @@
+{% verbatim %}
+<td>{{silence.endsAt}}</td>
+<td>
+    <ul class="list-inline">
+        <li v-for="match in silence.matchers">
+            <a @click.prevent="silenceAppendLabel" class="label label-warning" v-bind:data-label="match.name" v-bind:data-value="match.value">{{match.name}}:{{match.value}}</a>
+            </a>
+        </li>
+    </ul>
+</td>
+<td>{{silence.comment}}</td>
+<td>{{silence.createdBy}}</td>
+<td>
+    <a @click.prevent="silenceExpire(silence.id)" class="btn btn-warning btn-xs">Expire</a>
+</td>
+{% endverbatim %}
diff --git a/promgen/tests/test_silence.py b/promgen/tests/test_silence.py
index 339b80c06..58373fd5c 100644
--- a/promgen/tests/test_silence.py
+++ b/promgen/tests/test_silence.py
@@ -26,16 +26,20 @@ def setUp(self):
     @override_settings(PROMGEN=TEST_SETTINGS)
     @mock.patch('promgen.util.post')
     def test_duration(self, mock_post):
+        mock_post.return_value.status_code = 200
+
         with mock.patch('django.utils.timezone.now') as mock_now:
             mock_now.return_value = datetime.datetime(2017, 12, 14, tzinfo=datetime.timezone.utc)
             # I would prefer to be able to test with multiple labels, but since
             # it's difficult to test a list of dictionaries (the order is non-
             # deterministic) we just test with a single label for now
-            self.client.post(reverse('silence'),
+            self.client.post(
+                reverse('proxy-silence'),
                 data={
                     'duration': '1m',
-                    'label.instance': 'example.com:[0-9]*'
+                    "labels": {"instance": "example.com:[0-9]*"},
                 },
+                content_type="application/json",
             )
         mock_post.assert_called_with(
             'http://alertmanager:9093/api/v1/silences',
@@ -45,14 +49,18 @@ def test_duration(self, mock_post):
     @override_settings(PROMGEN=TEST_SETTINGS)
     @mock.patch('promgen.util.post')
     def test_range(self, mock_post):
+        mock_post.return_value.status_code = 200
+
         with mock.patch('django.utils.timezone.now') as mock_now:
             mock_now.return_value = datetime.datetime(2017, 12, 14, tzinfo=datetime.timezone.utc)
-            self.client.post(reverse('silence'),
+            self.client.post(
+                reverse('proxy-silence'),
                 data={
-                    'start': '2017-12-14 00:01',
-                    'stop': '2017-12-14 00:05',
-                    'label.instance': 'example.com:[0-9]*'
+                    'startsAt': '2017-12-14 00:01',
+                    'endsAt': '2017-12-14 00:05',
+                    "labels": {"instance": "example.com:[0-9]*"},
                 },
+                content_type="application/json",
             )
         mock_post.assert_called_with(
             'http://alertmanager:9093/api/v1/silences',
diff --git a/promgen/urls.py b/promgen/urls.py
index 5d86f0727..df572f370 100644
--- a/promgen/urls.py
+++ b/promgen/urls.py
@@ -90,17 +90,11 @@
     url(r'^status/$', views.Status.as_view(), name='status'),
     url(r'^import/$', views.Import.as_view(), name='import'),
 
-    url(r'^silence$', views.Silence.as_view(), name='silence'),
-    url(r'^silence/expire$', views.SilenceExpire.as_view(), name='silence-expire'),
-
     url(r'^search/$', views.Search.as_view(), name='search'),
 
     url(r'^metrics$', csrf_exempt(views.Metrics.as_view()), name='metrics'),
     url(r'^commit$', csrf_exempt(views.Commit.as_view()), name='commit'),
 
-    url(r'^ajax/silence$', csrf_exempt(views.AjaxSilence.as_view()), name='ajax-silence'),
-    url(r'^ajax/alert$', csrf_exempt(views.AjaxAlert.as_view()), name='ajax-alert'),
-
     url('', include('django.contrib.auth.urls')),
     url('', include('social_django.urls', namespace='social')),
 
@@ -111,18 +105,26 @@
     url(r'^api/v1/config', csrf_exempt(views.ApiConfig.as_view())),
 
     # Promgen API
-    url(r'^api/v1/targets', csrf_exempt(views.ApiConfig.as_view()), name='config-targets'),
-    url(r'^api/v1/rules', csrf_exempt(views.RulesConfig.as_view()), name='config-rules'),
-    url(r'^api/v1/urls', csrf_exempt(views.URLConfig.as_view()), name='config-urls'),
-    url(r'^api/v1/alerts', csrf_exempt(views.Alert.as_view()), name='alert'),
-    url(r'^api/v1/host/(?P<slug>\S+)', views.HostDetail.as_view()),
+    path('api/v1/targets', csrf_exempt(views.ApiConfig.as_view()), name='config-targets'),
+    path('api/v1/rules', csrf_exempt(views.RulesConfig.as_view()), name='config-rules'),
+    path('api/v1/urls', csrf_exempt(views.URLConfig.as_view()), name='config-urls'),
+    path('api/v1/alerts', csrf_exempt(views.Alert.as_view()), name='alert'),
+    path('api/v1/host/<slug>', views.HostDetail.as_view()),
 
     # Prometheus Proxy
+    # these apis need to match the same path because Promgen can pretend to be a Prometheus API
     path("graph", proxy.ProxyGraph.as_view()),
     path("api/v1/label/<label>/values", proxy.ProxyLabel.as_view(), name="proxy-label"),
     path("api/v1/query_range", proxy.ProxyQueryRange.as_view()),
     path("api/v1/query", proxy.ProxyQuery.as_view(), name="proxy-query"),
     path("api/v1/series", proxy.ProxySeries.as_view()),
+
+    # Alertmanager Proxy
+    # Promgen does not pretend to be an Alertmanager so these can be slightly different
+    path("proxy/v1/alerts", csrf_exempt(proxy.ProxyAlerts.as_view()), name="proxy-alerts"),
+    path("proxy/v1/silences", csrf_exempt(proxy.ProxySilences.as_view()), name="proxy-silence"),
+    path("proxy/v1/silences/<silence_id>", csrf_exempt(proxy.ProxyDeleteSilence.as_view()), name="proxy-silence-delete"),
+
     path("api/", include((router.urls, "api"), namespace="api")),
 ]
 
diff --git a/promgen/views.py b/promgen/views.py
index d4ad900d7..d504a9ab9 100644
--- a/promgen/views.py
+++ b/promgen/views.py
@@ -1166,88 +1166,6 @@ def form_valid(self, form):
         return redirect('service-list')
 
 
-class Silence(LoginRequiredMixin, FormView):
-    form_class = forms.SilenceForm
-
-    def post(self, request):
-        form = forms.SilenceForm(request.POST)
-        if form.is_valid():
-            # Since it's a little annoying to submit forms with an array, we
-            # cheat a bit and just use a simple prefix which we can split on
-            # to build our array of labels
-            labels = {}
-            for key in request.POST:
-                if key.startswith('label.'):
-                    target = key.split('.', 1)[1]
-                    labels[target] = request.POST[key]
-
-            kwargs = {
-                'comment': form.cleaned_data['comment'],
-                'createdBy': form.cleaned_data['created_by']
-            }
-            try:
-                if form.cleaned_data['duration']:
-                    kwargs['duration'] = form.cleaned_data['duration'].lower()
-                    prometheus.silence(labels, **kwargs)
-                    messages.success(request, 'Setting silence for %s' % form.cleaned_data['duration'])
-                else:
-                    kwargs['startsAt'] = form.cleaned_data['start']
-                    kwargs['endsAt'] = form.cleaned_data['stop']
-                    prometheus.silence(labels, **kwargs)
-                    messages.success(request, 'Setting silence for %s - %s' % (form.cleaned_data['start'], form.cleaned_data['stop']))
-            except Exception as e:
-                messages.warning(request, e)
-        else:
-            messages.warning(request, 'Error setting silence')
-        return HttpResponseRedirect(request.POST.get('next', '/'))
-
-
-class SilenceExpire(LoginRequiredMixin, FormView):
-    form_class = forms.SilenceExpireForm
-
-    def post(self, request):
-        form = forms.SilenceExpireForm(request.POST)
-        if form.is_valid():
-            try:
-                silence_id = form.cleaned_data['silence_id']
-                url = urljoin(settings.PROMGEN['alertmanager']['url'], '/api/v1/silence/%s' % silence_id)
-                util.delete(url).raise_for_status()
-                messages.success(request, 'Expire silence')
-            except Exception as e:
-                messages.warning(request, e)
-        else:
-            messages.warning(request, 'Error expiring silence')
-        return HttpResponseRedirect(request.POST.get('next', '/'))
-
-
-class AjaxAlert(LoginRequiredMixin, View):
-    def get(self, request):
-        alerts = []
-        try:
-            url = urljoin(settings.PROMGEN['alertmanager']['url'], '/api/v1/alerts')
-            response = util.get(url)
-        except requests.exceptions.ConnectionError:
-            logger.error('Error connecting to %s', url)
-            return JsonResponse({})
-
-        data = response.json().get('data', [])
-        if data is None:
-            # Return an empty alert-all if there are no active alerts from AM
-            return JsonResponse({})
-
-        for alert in data:
-            alert.setdefault('annotations', {})
-            # Humanize dates for frontend
-            for key in ['startsAt', 'endsAt']:
-                if key in alert:
-                    alert[key] = parser.parse(alert[key])
-            # Convert any links to <a> for frontend
-            for k, v in alert['annotations'].items():
-                alert['annotations'][k] = defaultfilters.urlize(v)
-            alerts.append(alert)
-        return JsonResponse(alerts, safe=False)
-
-
 class RuleTest(LoginRequiredMixin, View):
     def post(self, request, pk):
         if pk == '0':
@@ -1289,40 +1207,3 @@ def post(self, request, pk):
             context['errors']['Query'] = result['error']
 
         return JsonResponse({request.POST['target']: render_to_string('promgen/ajax_clause_check.html', context)})
-
-
-class AjaxSilence(LoginRequiredMixin, View):
-    def post(self, request):
-        silences = collections.defaultdict(list)
-        try:
-            url = urljoin(settings.PROMGEN['alertmanager']['url'], '/api/v1/silences')
-            response = util.get(url)
-        except requests.exceptions.ConnectionError:
-            logger.error('Error connecting to %s', url)
-            return JsonResponse({})
-
-        data = response.json().get('data', [])
-        if data is None:
-            # Return an empty silence-all if there are no active silences from AM
-            return JsonResponse({})
-
-        currentAt = datetime.datetime.now(datetime.timezone.utc)
-
-        for silence in data:
-            if 'comment' in silence:
-                silence['comment'] = defaultfilters.urlize(silence['comment'])
-            # Since there is no status field, compare endsAt with the current time
-            if 'endsAt' in silence:
-                silence['endsAt'] = parser.parse(silence['endsAt'])
-                if silence['endsAt'] < currentAt:
-                    continue
-
-            silences['silence-all'].append(silence)
-            for matcher in silence.get('matchers'):
-                if matcher.get('name') in ['service', 'project']:
-                    silences['silence-{}-{}'.format(matcher.get('name'), matcher.get('value'))].append(silence)
-
-        context = {'#' + slugify(key): render_to_string('promgen/ajax_silence.html', {'silences': silences[key], 'key': key}, request).strip() for key in silences}
-        context['#silence-load'] = render_to_string('promgen/ajax_silence_button.html', {'silences': silences['silence-all'], 'key': 'silence-all'}).strip()
-
-        return JsonResponse(context)