diff --git a/background_scripts/bootstrap.js b/background_scripts/background.js
similarity index 100%
rename from background_scripts/bootstrap.js
rename to background_scripts/background.js
diff --git a/config/css/config.css b/config/css/config.css
index d8a6ced..382a3d0 100644
--- a/config/css/config.css
+++ b/config/css/config.css
@@ -1,3 +1,7 @@
 body {
-    width: 800px;
+    min-width: 800px;
+}
+
+.list-group-item .badge a {
+    color: white;
 }
\ No newline at end of file
diff --git a/config/index.html b/config/index.html
index fbb10ff..2ceffb5 100644
--- a/config/index.html
+++ b/config/index.html
@@ -10,16 +10,26 @@
         <link href="css/bootstrap-theme.min.css" rel="stylesheet">
     </head>
     <body>
-        <header>
-        </header>
         <section class="container">
+            <div class="row">
+                <div class="col-xs-12 col-md-12">
+                    <p>
+                        Enter regular expressions on the right, to create a new
+                        blocking rule.  On the right, select which functionality
+                        should be blocked for hosts matching each regular expression.
+                    </p>
+                </div>
+            </div>
             <div class="row">
                 <div class="col-xs-4 col-md-4 well">
                     <domain-rules :domain-names="domainNames" :selected-domain="selectedDomain"></domain-rules>
                 </div>
 
-                <div class="col-xs-7 col-md-7 col-md-offset-1 col-xs-offset-1">
-                    <web-api-standards :standards="standards" :selected-standards="selectedStandards"></web-api-standards>
+                <div class="col-xs-8 col-md-8">
+                    <web-api-standards :standards="standards"
+                                       :selected-standards="selectedStandards"
+                                       :selected-domain="selectedDomain">
+                    </web-api-standards>
                 </div>
             </div>
         </section>
diff --git a/config/js/components/web-api-standards.vue.js b/config/js/components/web-api-standards.vue.js
index 1a55a7d..acc78d9 100644
--- a/config/js/components/web-api-standards.vue.js
+++ b/config/js/components/web-api-standards.vue.js
@@ -5,11 +5,17 @@
     const standardsDefaults = window.WEB_API_MANAGER.defaults;
 
     Vue.component("web-api-standards", {
-        props: ["standards", "selectedStandards"],
+        props: ["standards", "selectedStandards", "selectedDomain"],
         template: `
             <div class="web-api-standards-container">
-                <div class="form-horizontal">
-                    <div class="form-group">
+                <h3>Pattern: <code>{{ selectedDomain }}</code></h3>
+
+                <div class="panel panel-default form-horizontal">
+                    <div class="panel-heading">
+                        Default configurations
+                    </div>
+
+                    <div class="panel-body">
                         <button @click="onConservativeClicked">
                             Use Conservative Settings
                         </button>
@@ -18,15 +24,23 @@
                         </button>
                     </div>
                 </div>
-                <div class="checkbox" v-for="standard in standards">
-                    <label>
-                        <input type="checkbox"
-                             :value="standard.info.idenitifer"
-                            v-model="selectedStandards"
-                            @change="onStandardChecked">
-                        {{ standard.info.idenitifer }}
-                        <a href="{{ standard.info.url }}" v-if="standard.info.url">[info]</a>
-                    </label>
+
+                <div class="panel panel-default">
+                    <div class="panel-heading">Blocked standards</div>
+
+                    <ul class="list-group">
+                        <li class="list-group-item" v-for="standard in standards">
+                            <span v-if="standard.info.url" class="badge">
+                                <a href="{{ standard.info.url }}">info</a>
+                            </span>
+
+                            <input type="checkbox"
+                                :value="standard.info.idenitifer"
+                                v-model="selectedStandards"
+                                @change="onStandardChecked">
+                            {{ standard.info.idenitifer }}
+                        </li>
+                    </ul>
                 </div>
             </div>
         `,
diff --git a/manifest.json b/manifest.json
index b92f9f7..84ee897 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "WebAPI Manager",
-  "version": "0.4",
+  "version": "0.5",
   "description": "Improves browser security by restricting page access to parts of the Web API.",
   "icons": {
     "48": "images/uic-48.png",
@@ -46,7 +46,7 @@
       "lib/storage.js",
       "lib/URI.js",
       "content_scripts/dist/standards.js",
-      "background_scripts/bootstrap.js"
+      "background_scripts/background.js"
     ]
   },
   "options_ui": {
diff --git a/popup/css/popup.css b/popup/css/popup.css
new file mode 100644
index 0000000..c1fd3fe
--- /dev/null
+++ b/popup/css/popup.css
@@ -0,0 +1,7 @@
+body, html {
+    min-width: 320px;
+}
+
+section .row {
+    margin-bottom: 1em;
+}
\ No newline at end of file
diff --git a/popup/js/example.js b/popup/js/popup.js
similarity index 74%
rename from popup/js/example.js
rename to popup/js/popup.js
index 6639d6f..27cfc4c 100644
--- a/popup/js/example.js
+++ b/popup/js/popup.js
@@ -1,5 +1,14 @@
+/*jslint es6: true*/
+/*global window*/
 (function () {
     const rootObject = window.browser || window.chrome;
+    const configureButton = window.document.getElementById("config-page-link");
+
+    configureButton.addEventListener("click", function (event) {
+        rootObject.runtime.openOptionsPage();
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    }, false);
 
     rootObject.tabs.executeScript(
         {
@@ -20,9 +29,13 @@
                     
                     const liElm = document.createElement("li");
                     liElm.className = "list-group-item";
+                    if (domainRule !== "(default)") {
+                        liElm.className += " list-group-item-success";
+                    }
 
                     const spanElm = document.createElement("span");
                     spanElm.className = "badge";
+
                     const badgeText = document.createTextNode(domainRule);
                     spanElm.appendChild(badgeText);
                     liElm.appendChild(spanElm);
diff --git a/popup/popup.html b/popup/popup.html
index 7818f3e..7203b16 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -7,14 +7,30 @@
         <title>Frame listing popup</title>
         <link href="../config/css/bootstrap.min.css" rel="stylesheet">
         <link href="../config/css/bootstrap-theme.min.css" rel="stylesheet">
+        <link href="css/popup.css" rel="stylesheet">
     </head>
     <body>
-        <section>
-            This page has loaded the followng frames…
-            <ul class="list-group">
-            </ul>
+        <header class="container">
+            <div class="row">
+                <div class="col-xs-12">
+                    <h2>Blocking Rules</h2>
+                </div>
+            </div>
+        </header>
+        <section class="container">
+            <div class="row">
+                <div class="col-xs-12">
+                    <p>The following origins are execiting code on this page.</p>
+                    <ul class="list-group">
+                    </ul>
+
+                    <button type="button" id="config-page-link" class="btn btn-default btn-block">
+                        Configure blocking rules
+                    </button>
+                </div>
+            </div>
         </section>
-        <script src="js/example.js"></script>
+        <script src="js/popup.js"></script>
     </body>
 </html>