diff --git a/demo/index.html b/demo/index.html
index 6b87090..29baec1 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -19,6 +19,7 @@
     <link rel="import" href="../../oauth-authorization/oauth1-authorization.html">
     <link rel="import" href="../../xhr-simple-request/xhr-simple-request.html">
     <link rel="import" href="../../arc-polyfills/arc-polyfills.html">
+    <link rel="import" href="../../api-console-default-theme/api-console-default-theme.html">
     <link rel="import" href="../api-request-editor.html">
     <custom-style>
       <style is="custom-style" include="demo-pages-shared-styles">
@@ -46,11 +47,21 @@
           @apply --paper-font-body1;
         };
       }
+
       html,
       body {
         margin: 0;
         padding: 0;
       }
+
+      h1 {
+        @apply --paper-font-headline;
+      }
+
+      h2 {
+        @apply --paper-font-title;
+      }
+
       header {
         padding: 12px 24px;
         background-color: #C5E1A5;
@@ -60,6 +71,18 @@
           color: #3E2723;
         };
       }
+
+      .vertical-section-container {
+        background-color: #fff;
+        padding: 20px;
+        margin-bottom: 24px;
+        margin-top: 24px;
+        @apply --shadow-elevation-2dp;
+      }
+
+      paper-checkbox {
+        margin-bottom: 12px;
+      }
       </style>
     </custom-style>
   </head>
@@ -70,39 +93,74 @@
         <oauth1-authorization></oauth1-authorization>
         <xhr-simple-request></xhr-simple-request>
         <header>
-          <span id="endpointSelector"></span>
-          <span id="methodSelector"></span>
-          <!-- <paper-dropdown-menu label="Select demo endpoint">
-            <paper-listbox slot="dropdown-content" on-selected-changed="_endpointChanged">
+          <paper-dropdown-menu label="Select demo endpoint">
+            <paper-listbox slot="dropdown-content" on-selected-changed="_endpointChanged" id="endpointSelector">
               <template is="dom-repeat" items="[[endpoints]]">
                 <paper-item>[[item]]</paper-item>
               </template>
             </paper-listbox>
           </paper-dropdown-menu>
           <paper-dropdown-menu label="Select endpoint's method">
-            <paper-listbox slot="dropdown-content" selected="{{selectedShape}}" on-selected-changed="_methodChanged">
+            <paper-listbox slot="dropdown-content" selected="{{selectedShape}}" on-selected-changed="_methodChanged" id="methodSelector">
               <template is="dom-repeat" items="[[operations]]">
                 <paper-item>[[item.label]]</paper-item>
               </template>
             </paper-listbox>
-          </paper-dropdown-menu> -->
+          </paper-dropdown-menu>
         </header>
         <section role="main" class="vertical-section-container centered main">
-          <api-request-editor narrow="[[narrow]]" amf-model="[[amfModel]]" base-uri="[[baseUri]]" selected="[[selectedAmfId]]" narrow="[[narrow]]" allow-custom="[[allowCustom]]" allow-disable-params="[[allowDisableParams]]" allow-hide-optional="[[allowHideOptional]]"></api-request-editor>
+          <h1>API request editor</h1>
+          <api-request-editor
+            narrow="[[narrow]]"
+            amf-model="[[amfModel]]"
+            base-uri="[[baseUri]]"
+            selected="[[selectedAmfId]]"
+            narrow="[[narrow]]"
+            allow-custom="[[allowCustom]]"
+            allow-disable-params="[[allowDisableParams]]"
+            allow-hide-optional="[[allowHideOptional]]"
+            redirect-uri="[[redirectUri]]"
+            no-url-editor="[[noUrlEditor]]"
+            no-docs="[[noDocs]]"
+            selected-tab="{{selectedTab}}"
+            content-type="{{contentType}}"
+            is-payload-request="{{isPayloadRequest}}"
+            auth-required="{{authRequired}}"
+            auth-valid="{{authValid}}"
+            auth-not-required="{{authNotRequired}}"
+            loading-request="{{loadingRequest}}"
+            params-invalid="{{paramsInvalid}}"
+            headers-invalid="{{headersInvalid}}"></api-request-editor>
         </section>
         <section class="vertical-section-container centered">
+          <h2>Configuration options</h2>
           <paper-checkbox checked="{{narrow}}">Render narrow view</paper-checkbox>
           <paper-checkbox checked="{{allowCustom}}">Allow custom properties</paper-checkbox>
           <paper-checkbox checked="{{allowHideOptional}}">Allow auto hide optional headers</paper-checkbox>
           <paper-checkbox checked="{{allowDisableParams}}">Allow disabling parameters</paper-checkbox>
+          <paper-checkbox checked="{{noUrlEditor}}">Remove URL editor</paper-checkbox>
+          <paper-checkbox checked="{{noDocs}}">Remove inline documentatrion</paper-checkbox>
           <paper-input label="Override base uri" value="{{baseUri}}"></paper-input>
         </section>
+        <section class="vertical-section-container centered">
+          <h2>Editor state</h2>
+          <p>Selected editor tab: [[selectedTab]]</p>
+          <p>Selected content type: [[contentType]]</p>
+          <p>Is payload requested: [[isPayloadRequest]]</p>
+          <p>Authorization is required: [[authRequired]]</p>
+          <p>Authorization is valid: [[authValid]]</p>
+          <p>Authorization is not required: [[authNotRequired]]</p>
+          <p>Request is being loaded: [[loadingRequest]]</p>
+          <p>Parameter form is invalid: [[paramsInvalid]]</p>
+          <p>Headers for is invalid: [[headersInvalid]]</p>
+        </section>
         <paper-toast text="Request send event detected" id="rsend"></paper-toast>
         <paper-toast text="Request abort event detected" id="rabort"></paper-toast>
       </template>
     </dom-bind>
     <script>
     (function(app) {
+      app.redirectUri = 'https://auth.advancedrestclient.com/oauth-popup.html';
       app.allowCustom = true;
       app.allowHideOptional = true;
       app.allowDisableParams = true;
@@ -132,38 +190,22 @@
       app._setEndpointsList = function(data) {
         data = data[0][ApiElements.Amf.ns.raml.vocabularies.document + 'encodes'][0];
         const endpoints = data[ApiElements.Amf.ns.raml.vocabularies.http + 'endpoint'];
-
-        const selector = document.createElement('paper-dropdown-menu');
-        selector.label = 'Select demo endpoint';
-        const list = document.createElement('paper-listbox');
-        list.slot = 'dropdown-content';
-        list.addEventListener('selected-changed', app._endpointChanged);
-
         const labels = [];
         endpoints.forEach((item) => {
           const label = app._getAmfValue(item[ApiElements.Amf.ns.raml.vocabularies.http + 'path']);
           labels.push(label);
-          const pItem = document.createElement('paper-item');
-          pItem.innerText = label;
-          list.appendChild(pItem);
         });
         app.endpoints = labels;
-        list.selected = 0;
-        selector.appendChild(list);
-        app.$.endpointSelector.appendChild(selector);
+        document.getElementById('endpointSelector').selected = 0;
       };
       app._endpointChanged = function(e) {
+        document.getElementById('methodSelector').selected = undefined;
         const index = e.detail.value;
         app._computeOperations(index);
       };
 
       app._clearOperations = function() {
-        const selector = document.body.querySelector('#methodDropdown');
-        if (selector) {
-          const list = app.$.methodSelector.querySelector('paper-listbox');
-          list.removeEventListener('selected-changed', app._methodChanged);
-          selector.parentNode.removeChild(selector);
-        }
+        app.operations = undefined;
       };
       app._computeOperations = function(index) {
         app._clearOperations();
@@ -173,12 +215,6 @@
         if (!operations) {
           return;
         }
-        const selector = document.createElement('paper-dropdown-menu');
-        selector.label = 'Select endpoint\'s method';
-        selector.id = 'methodDropdown';
-        const list = document.createElement('paper-listbox');
-        list.slot = 'dropdown-content';
-        list.addEventListener('selected-changed', app._methodChanged);
         const items = [];
         operations.forEach((item) => {
           const label = app._getAmfValue(item[ApiElements.Amf.ns.w3.hydra.core + 'method']);
@@ -186,14 +222,9 @@
             id: item['@id'],
             label: label
           });
-          const pItem = document.createElement('paper-item');
-          pItem.innerText = label;
-          list.appendChild(pItem);
         });
         app.operations = items;
-        list.selected = 0;
-        selector.appendChild(list);
-        app.$.methodSelector.appendChild(selector);
+        document.getElementById('methodSelector').selected = 0;
       };
       app._computeApiParams = function(apiPrams) {
         if (!apiPrams) {
@@ -202,19 +233,13 @@
         return JSON.stringify(apiPrams, null, 1);
       };
       app._methodChanged = function(e) {
+        if (e.detail.value === undefined) {
+          return;
+        }
         const id = app.operations[e.detail.value].id;
         app.selectedAmfId = id;
       };
-      app._apiRequestHandler = function(e) {
-        setTimeout(() => {
-          const ev = new CustomEvent('api-response', {
-            bubbles: true,
-            detail: {
-              id: e.detail.id
-            }
-          });
-          document.body.dispatchEvent(ev);
-        }, 1500);
+      app._apiRequestHandler = function() {
         document.getElementById('rsend').opened = true;
       };
       app._apiAbortHandler = function() {