diff --git a/packages/contract-cli/README.md b/packages/contract-cli/README.md
index 1fee04f1eb8e2c2629b127feff14b99540c954db..3294e2ef3c4c39b0d590130b39fc7aba02e6a384 100755
--- a/packages/contract-cli/README.md
+++ b/packages/contract-cli/README.md
@@ -219,3 +219,10 @@ We will take the jsdoc output and create an additional temporary contract file (
 ---
 
 MIT (c) [to1source](https://to1source.cn) & [NEWBRAN LTD](https://newbran.ch)
+
+
+"socket.io-client": "^2.2.0",
+"ts-node": "^8.3.0",
+"typescript": "^3.5.3",
+"ws": "^7.1.2",
+"@types/node": "^12.7.1",
diff --git a/packages/contract-cli/lib/public-contract/index.js b/packages/contract-cli/lib/public-contract/index.js
index 0eb6e281b032251e1d8317b4ec7360fadc37b881..6322cb74cb795f258a2bc1f3a13e62d76a3f7846 100644
--- a/packages/contract-cli/lib/public-contract/index.js
+++ b/packages/contract-cli/lib/public-contract/index.js
@@ -72,6 +72,7 @@ function getEnvContractFile(contractDir) {
 function getExpired(config, contractJson) {
   const { expired } = config;
   const { timestamp } = contractJson;
+  // the timestamp now comes with milsecond ... 
   if (expired && expired > timestamp) {
     return { expired }
   }
diff --git a/packages/contract-cli/lib/utils.js b/packages/contract-cli/lib/utils.js
index 910833698a7bb4e4594afc677bb78facfd940ef4..413a57610790d6487d8f8b0a9964360fd283db8f 100644
--- a/packages/contract-cli/lib/utils.js
+++ b/packages/contract-cli/lib/utils.js
@@ -8,8 +8,8 @@ const checkOptions = require('./options')
 const { transform } = require('lodash')
 const debug = require('debug')('jsonql-contract:utils')
 const { JsonqlError } = require('jsonql-errors')
-
-const getTimestamp = () => Math.round(Date.now()/1000)
+// timestamp with mil seconds
+const getTimestamp = () => Date.now()
 
 /**
  * check if there is a config file and use that value instead
@@ -92,7 +92,7 @@ const checkFile = config => {
     if (config.returnAs === 'file') {
       if (!fsx.existsSync(dist)) {
         throw new JsonqlError('File is not generated!', dist)
-      } 
+      }
       console.info('Your contract file generated in: %s', dist)
     } else {
       if (!isObject(dist)) {
diff --git a/packages/contract-cli/package.json b/packages/contract-cli/package.json
index 1f6a12caf012223f6d8914ab452e387128794fda..fa6bc196ec82ba74b19651e68e72747508999946 100755
--- a/packages/contract-cli/package.json
+++ b/packages/contract-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jsonql-contract",
-  "version": "1.7.6",
+  "version": "1.7.7",
   "description": "An command line tool to generate the contract.json for jsonql",
   "main": "index.js",
   "files": [
@@ -38,25 +38,20 @@
     "jsonql-contract": "./cli.js"
   },
   "dependencies": {
-    "acorn": "^6.2.1",
+    "acorn": "^7.0.0",
     "chokidar": "^3.0.2",
     "colors": "^1.3.3",
     "fs-extra": "^8.1.0",
     "glob": "^7.1.4",
     "jsdoc-api": "^5.0.2",
-    "jsonql-constants": "^1.7.8",
+    "jsonql-constants": "^1.7.9",
     "jsonql-errors": "^1.0.9",
     "jsonql-params-validator": "^1.4.3",
     "kefir": "^3.8.6",
     "lodash": "^4.17.15",
-    "socket.io-client": "^2.2.0",
-    "ts-node": "^8.3.0",
-    "typescript": "^3.5.3",
-    "ws": "^7.1.1",
     "yargs": "^13.3.0"
   },
   "devDependencies": {
-    "@types/node": "^12.6.8",
     "ava": "^2.2.0",
     "debug": "^4.1.1",
     "nyc": "^14.1.1",
@@ -77,13 +72,7 @@
     "failWithoutAssertions": false,
     "tap": false,
     "verbose": true,
-    "compileEnhancements": false,
-    "extensions": [
-      "ts"
-    ],
-    "require": [
-      "ts-node/register"
-    ]
+    "compileEnhancements": false
   },
   "engine": {
     "node": ">=8"
diff --git a/packages/contract-cli/tests/generator.test.js b/packages/contract-cli/tests/generator.test.js
index d3b73926446ab88b8cb72b39eb3f4eb3cf8b7401..7e68a788320848e1f3bb0a8b928a50411309dc26 100755
--- a/packages/contract-cli/tests/generator.test.js
+++ b/packages/contract-cli/tests/generator.test.js
@@ -23,7 +23,7 @@ const esContractDir = join(__dirname, 'fixtures', 'tmp', 'es')
 const esResolverDir = join(__dirname, 'fixtures', 'es')
 
 
-const expired = Math.round(Date.now()/1000) + 60*365;
+const expired = Date.now() + 60*365*1000;
 
 test.after(async t => {
   fsx.removeSync(contractDir)
diff --git a/packages/koa/package.json b/packages/koa/package.json
index 89a76124e64b94141e08a425497798da15595a73..47283e27b87bd45049f06a30c487fa7b88d0a7ea 100755
--- a/packages/koa/package.json
+++ b/packages/koa/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jsonql-koa",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "description": "jsonql Koa middleware",
   "main": "index.js",
   "files": [
@@ -25,7 +25,7 @@
     "test:throw": "DEBUG=jsonql-* ava ./tests/throw.test.js",
     "test:gen": "DEBUG=jsonql* ava ./tests/contract.test.js",
     "test:jsonp": "DEBUG=jsonql* ava --verbose ./tests/jsonp.test.js",
-    "web-console": "DEBUG=jsonql-koa* node ./tests/helpers/browser.js",
+    "web-console": "DEBUG=jsonql-koa*,jsonql-web-console* node ./tests/helpers/browser.js",
     "contract": "node ./node_modules/jsonql-contract/cmd.js ./tests/fixtures/resolvers ./tests/fixtures/contracts"
   },
   "keywords": [
@@ -46,7 +46,7 @@
     "jsonql-jwt": "^1.2.1",
     "jsonql-node-client": "^1.1.3",
     "jsonql-params-validator": "^1.4.3",
-    "jsonql-web-console": "^0.2.0",
+    "jsonql-web-console": "^0.4.2",
     "koa": "^2.7.0",
     "koa-compose": "^4.1.0",
     "lodash": "^4.17.15",
diff --git a/packages/web-console/koa/dev.js b/packages/web-console/koa/dev.js
deleted file mode 100644
index 1a8e8db33f87db853779532bbf781620c70627b6..0000000000000000000000000000000000000000
--- a/packages/web-console/koa/dev.js
+++ /dev/null
@@ -1,9 +0,0 @@
-const serverIoCore = require('server-io-core')
-const { join } = require('path')
-
-serverIoCore({
-  webroot: [
-    join(__dirname, 'public'),
-    join(__dirname, '..', 'node_modules')
-  ]
-})
diff --git a/packages/web-console/koa/index.js b/packages/web-console/koa/index.js
index 3ee2e3720a00bee5ba39a42ae24bdd5d370b72c4..3eda21fe7d3e847a7feec36e382b332e21ff86c5 100644
--- a/packages/web-console/koa/index.js
+++ b/packages/web-console/koa/index.js
@@ -1,125 +1,44 @@
 // The main interface to the middleware
-const { join, extname } = require('path')
-const fsx = require('fs-extra')
-const _ = require('lodash')
 const {
-  DEFAULT_CONTRACT_FILE_NAME,
-  PUBLIC_CONTRACT_FILE_NAME
-} = require('jsonql-constants')
-const publicDir = join(__dirname, 'public')
-const assets = [
-  '/jsonql-web-console.css'
-]
-// const debug = require('debug')('jsonql-web-console:koa')
+  getContractJson,
+  isWebConsoleAssets,
+  getDocLen,
+  render
+} = require('./utils')
+const debug = require('debug')('jsonql-web-console:middleware')
 let contractJson = null;
-/**
- * Just to read the contract json
- * search for the contract file
- * should we check if there is a public-contract first
- * if it's not found then we check if there is a contract.json?
- * also in the case of just start up, it might happen a fight situation
- * @param {object} config configuration
- */
-const getContractJson = config => {
-  const searchDir = [
-    join(config.contractDir, PUBLIC_CONTRACT_FILE_NAME),
-    join(config.contractDir, DEFAULT_CONTRACT_FILE_NAME)
-  ]
-  return _(searchDir)
-    .chain()
-    .filter(dir => fsx.existsSync(dir))
-    .thru(dirs => {
-      if (dirs.length) {
-        return fsx.readJsonSync(dirs[0])
-      }
-      return false;
-    })
-    .value()
-}
-
-/**
- * check if the path matches our assets
- * @param {object} ctx koa context
- * @return {boolean|string} false when its not
- */
-const isWebConsoleAssets = ctx => {
-  return _(assets)
-    .chain()
-    .filter(path => ctx.path === path)
-    .thru(path => {
-      if (path.length) {
-        return path[0]
-      }
-      return false;
-    })
-    .value()
-}
-
-/**
- * Get document (string) byte length for use in header
- * @param {string} doc to calculate
- * @return {number} length
- */
-const getDocLen = doc => Buffer.byteLength(doc, 'utf8')
-
-// dirty hack
-const fix = json => {
-  if (!json.socket) {
-    json.socket = false;
-  }
-  if (_.isEqual(json.auth, {})) {
-    json.auth = false;
-  }
-  return json;
-}
-
-/**
- * @param {string} content output string from file
- * @param {object} json contract
- */
-const renderTpl = (content, json) => {
-  return _.template(content)(fix(json))
-}
-
-/**
- * Render out the content
- * @param {object} ctx koa context
- * @param {string} file to serve up
- * @return {void} nothing should stop here
- */
-const render = (ctx, file, json = false) => {
-  let content = fsx.readFileSync(join(publicDir, file))
-  if (json !== false) {
-    content = renderTpl(content, json)
-  }
-  let ext = extname(file)
-  if (ext === '.css') {
-    ctx.type = 'text/css';
-  } else {
-    ctx.type = 'text/html';
-  }
-
-  ctx.size = getDocLen(content)
-  // should we try to get the contentType?
-  // ctx.type = opts.contentType;
-  ctx.status = 200;
-  ctx.body = content;
-}
-
 /**
  * @param {object} config configuration
  * @param {function} isJsonqlConsoleUrl to check if it's the top calling methods
  */
 module.exports = function jsonqlWebConsole(config, isJsonqlConsoleUrl) {
-  if (contractJson === null) {
-    contractJson = getContractJson(config)
-  }
   return async function(ctx, next) {
     if (isJsonqlConsoleUrl(ctx, config)) {
-      if (contractJson === false) {
+      let error = false;
+      if (!contractJson) {
+        // we should try to check if ctx contain the contract at this point as well
+        if (ctx.state && ctx.state.jsonql) {
+          const { contract } = ctx.state.jsonql;
+          debug('ctx.state.jsonql.contract', contract)
+          if (contract) {
+            contractJson = contract;
+          } else {
+            error = true; // just throw it
+          }
+        }
+
+        if (!contractJson) {
+          contractJson = getContractJson(config)
+          debug('contractJson', contractJson)
+          error = !!contractJson
+        }
+      }
+
+      if (error !== false) {
         // render the error page
         return render(ctx, 'error.html')
       }
+
       return render(ctx, 'index.html', contractJson)
     } else {
       const asset = isWebConsoleAssets(ctx, config)
diff --git a/packages/web-console/koa/public/index.html b/packages/web-console/koa/public/index.html
index 16c410928398a5b36894638d726853237e7a1f47..96df62fbde2e5f2751b71cbe8466789499b3fce2 100644
--- a/packages/web-console/koa/public/index.html
+++ b/packages/web-console/koa/public/index.html
@@ -6,6 +6,11 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>jsonql web-console</title>
     <link href="jsonql-web-console.css" rel="stylesheet" />
+    <style>
+      .menu-label {
+        text-transform: none;
+      }
+    </style>
   </head>
   <body>
     <nav class="navbar is-info" role="navigation" aria-label="main navigation">
@@ -14,23 +19,20 @@
           <span class="is-uppercase">jsonql web console <sup>alpha</sup></span>
         </a>
       </div>
-
       <div class="navbar-end">
         <div class="navbar-item">
           Created on <%- timestamp %>
         </div>
       </div>
-
     </nav>
 
-    <div class="container" style="margin-top: 1em">
-
+    <div class="container" style="margin-top: 1em" id="top">
       <div class="columns">
         <div class="column is-one-quarter" id="left-menu">
           <div class="box">
             <aside class="menu">
               <% if (query) { %>
-                <p class="menu-label"><a href="#query-section">Query</a></p>
+                <p class="menu-label"><a href="#query-section" class="is-uppercase">Query</a></p>
                 <ul class="menu-list">
                   <% _.forEach(query, function(v, name) { %>
                   <li class="menu-label">
@@ -81,301 +83,20 @@
           </div>
         </div>
         <div class="column" id="main-content">
-          <% if (query) { %>
-            <h2 class="is-uppercase" id="query-section">Query</h2>
-            <% _.forEach(query, function(value, name) { %>
-              <div class="card" id="query-<%- name %>" style="margin-bottom: 1em">
-                <header class="card-header">
-                  <p class="card-header-title">
-                    <span class="is-family-code"><%- name %></span>
-                  </p>
-                  <!-- a href="#" class="card-header-icon" aria-label="more options">
-                    <span class="icon">
-                      <i class="fas fa-angle-down" aria-hidden="true"></i>
-                    </span>
-                  </a -->
-                </header>
-                <div class="card-content">
-                  <div class="content">
-                    <% if (value.description) { %>
-                      <strong><%- value.description %></strong>
-                    <% } else { %>
-                      <span class="is-italic has-text-info">No description</span>
-                    <% } %>
-                    <hr />
-                    <h5 class="has-text-link is-uppercase">parameters</h5>
-                    <table class="table">
-                      <thead>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Description</th>
-                      </thead>
-                      <tbody>
-                    <% if (value.params.length) { %>
-                    <% _.forEach(value.params, function(param) { %>
-                        <tr>
-                          <td><%- param.name %></td>
-                          <td><% if (param.variable) { %>...<% } %><%- param.type %></td>
-                          <td><%- param.description %></td>
-                        </tr>
-                    <% }) %>
-                    <% } else { %>
-                      <tr>
-                        <td colspan="3">
-                          <span class="is-italic has-text-info">No parameter required</span>
-                        </td>
-                      </tr>
-                    <% } %>
-                      </tbody>
-                    </table>
-                    <h5 class="has-text-link is-uppercase">returns</h5>
-                    <table class="table">
-                      <thead>
-                        <th>Type</th>
-                        <th>Description</th>
-                      </thead>
-                      <tbody>
-                      <% _.forEach(value.returns, function(returns) { %>
-                        <tr>
-                          <td><%- returns.type %></td>
-                          <td><%- returns.description %></td>
-                        </tr>
-                      <% }) %>
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-                <!-- footer class="card-footer">
-                  <a href="#" class="card-footer-item">Save</a>
-                  <a href="#" class="card-footer-item">Edit</a>
-                  <a href="#" class="card-footer-item">Delete</a>
-                </footer -->
-              </div>
-            <% }) %>
+          <% if (queryBlock !== false) { %>
+          <%= queryBlock %>
           <% } %>
-
-          <% if (mutation) { %>
-            <h2 class="is-uppercase" id="query-section">Mutation</h2>
-            <% _.forEach(mutation, function(value, name) { %>
-              <div class="card" id="query-<%- name %>" style="margin-bottom: 1em">
-                <header class="card-header">
-                  <p class="card-header-title">
-                    <span class="is-family-code"><%- name %></span>
-                  </p>
-                  <!-- a href="#" class="card-header-icon" aria-label="more options">
-                    <span class="icon">
-                      <i class="fas fa-angle-down" aria-hidden="true"></i>
-                    </span>
-                  </a -->
-                </header>
-                <div class="card-content">
-                  <div class="content">
-                    <% if (value.description) { %>
-                      <strong><%- value.description %></strong>
-                    <% } else { %>
-                      <span class="is-italic has-text-info">No description</span>
-                    <% } %>
-                    <hr />
-                    <h5 class="has-text-link is-uppercase">parameters</h5>
-                    <table class="table">
-                      <thead>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Description</th>
-                      </thead>
-                      <tbody>
-                    <% if (value.params.length) { %>
-                    <% _.forEach(value.params, function(param) { %>
-                        <tr>
-                          <td><%- param.name %></td>
-                          <td><% if (param.variable) { %>...<% } %><%- param.type %></td>
-                          <td><%- param.description %></td>
-                        </tr>
-                    <% }) %>
-                    <% } else { %>
-                      <tr>
-                        <td colspan="3">
-                          <span class="is-italic has-text-info">No parameter required</span>
-                        </td>
-                      </tr>
-                    <% } %>
-                      </tbody>
-                    </table>
-                    <h5 class="has-text-link is-uppercase">returns</h5>
-                    <table class="table">
-                      <thead>
-                        <th>Type</th>
-                        <th>Description</th>
-                      </thead>
-                      <tbody>
-                      <% _.forEach(value.returns, function(returns) { %>
-                        <tr>
-                          <td><%- returns.type %></td>
-                          <td><%- returns.description %></td>
-                        </tr>
-                      <% }) %>
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-                <!-- footer class="card-footer">
-                  <a href="#" class="card-footer-item">Save</a>
-                  <a href="#" class="card-footer-item">Edit</a>
-                  <a href="#" class="card-footer-item">Delete</a>
-                </footer -->
-              </div>
-            <% }) %>
+          <% if (mutationBlock !== false) { %>
+          <%= mutationBlock %>
           <% } %>
-
-          <% if (auth) { %>
-            <h2 class="is-uppercase" id="query-section">auth</h2>
-            <% _.forEach(auth, function(value, name) { %>
-              <div class="card" id="query-<%- name %>" style="margin-bottom: 1em">
-                <header class="card-header">
-                  <p class="card-header-title">
-                    <span class="is-family-code"><%- name %></span>
-                  </p>
-                  <!-- a href="#" class="card-header-icon" aria-label="more options">
-                    <span class="icon">
-                      <i class="fas fa-angle-down" aria-hidden="true"></i>
-                    </span>
-                  </a -->
-                </header>
-                <div class="card-content">
-                  <div class="content">
-                    <% if (value.description) { %>
-                      <strong><%- value.description %></strong>
-                    <% } else { %>
-                      <span class="is-italic has-text-info">No description</span>
-                    <% } %>
-                    <hr />
-                    <h5 class="has-text-link is-uppercase">parameters</h5>
-                    <table class="table">
-                      <thead>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Description</th>
-                      </thead>
-                      <tbody>
-                    <% if (value.params.length) { %>
-                    <% _.forEach(value.params, function(param) { %>
-                        <tr>
-                          <td><%- param.name %></td>
-                          <td><% if (param.variable) { %>...<% } %><%- param.type %></td>
-                          <td><%- param.description %></td>
-                        </tr>
-                    <% }) %>
-                    <% } else { %>
-                      <tr>
-                        <td colspan="3">
-                          <span class="is-italic has-text-info">No parameter required</span>
-                        </td>
-                      </tr>
-                    <% } %>
-                      </tbody>
-                    </table>
-                    <h5 class="has-text-link is-uppercase">returns</h5>
-                    <table class="table">
-                      <thead>
-                        <th>Type</th>
-                        <th>Description</th>
-                      </thead>
-                      <tbody>
-                      <% _.forEach(value.returns, function(returns) { %>
-                        <tr>
-                          <td><%- returns.type %></td>
-                          <td><%- returns.description %></td>
-                        </tr>
-                      <% }) %>
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-                <!-- footer class="card-footer">
-                  <a href="#" class="card-footer-item">Save</a>
-                  <a href="#" class="card-footer-item">Edit</a>
-                  <a href="#" class="card-footer-item">Delete</a>
-                </footer -->
-              </div>
-            <% }) %>
+          <% if (socketBlock !== false) { %>
+          <%= socketBlock %>
           <% } %>
-
-          <% if (socket) { %>
-            <h2 class="is-uppercase" id="query-section">socket</h2>
-            <% _.forEach(socket, function(value, name) { %>
-              <div class="card" id="query-<%- name %>" style="margin-bottom: 1em">
-                <header class="card-header">
-                  <p class="card-header-title">
-                    <span class="is-family-code"><%- name %></span>
-                  </p>
-                  <!-- a href="#" class="card-header-icon" aria-label="more options">
-                    <span class="icon">
-                      <i class="fas fa-angle-down" aria-hidden="true"></i>
-                    </span>
-                  </a -->
-                </header>
-                <div class="card-content">
-                  <div class="content">
-                    <% if (value.description) { %>
-                      <strong><%- value.description %></strong>
-                    <% } else { %>
-                      <span class="is-italic has-text-info">No description</span>
-                    <% } %>
-                    <hr />
-                    <h5 class="has-text-link is-uppercase">parameters</h5>
-                    <table class="table">
-                      <thead>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Description</th>
-                      </thead>
-                      <tbody>
-                    <% if (value.params.length) { %>
-                    <% _.forEach(value.params, function(param) { %>
-                        <tr>
-                          <td><%- param.name %></td>
-                          <td><% if (param.variable) { %>...<% } %><%- param.type %></td>
-                          <td><%- param.description %></td>
-                        </tr>
-                    <% }) %>
-                    <% } else { %>
-                      <tr>
-                        <td colspan="3">
-                          <span class="is-italic has-text-info">No parameter required</span>
-                        </td>
-                      </tr>
-                    <% } %>
-                      </tbody>
-                    </table>
-                    <h5 class="has-text-link is-uppercase">returns</h5>
-                    <table class="table">
-                      <thead>
-                        <th>Type</th>
-                        <th>Description</th>
-                      </thead>
-                      <tbody>
-                      <% _.forEach(value.returns, function(returns) { %>
-                        <tr>
-                          <td><%- returns.type %></td>
-                          <td><%- returns.description %></td>
-                        </tr>
-                      <% }) %>
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-                <!-- footer class="card-footer">
-                  <a href="#" class="card-footer-item">Save</a>
-                  <a href="#" class="card-footer-item">Edit</a>
-                  <a href="#" class="card-footer-item">Delete</a>
-                </footer -->
-              </div>
-            <% }) %>
+          <% if (authBlock) { %>
+          <%= authBlock %>
           <% } %>
         </div>
       </div>
     </div>
-
-
   </body>
 </html>
diff --git a/packages/web-console/koa/public/templates/block.tpl.html b/packages/web-console/koa/public/templates/block.tpl.html
new file mode 100644
index 0000000000000000000000000000000000000000..e7921f5c507593688d474155b4a7c60c1bb9ebc4
--- /dev/null
+++ b/packages/web-console/koa/public/templates/block.tpl.html
@@ -0,0 +1,83 @@
+<h2 class="is-uppercase has-text-link" id="query-section"><%- resolverType %></h2>
+<% _.forEach(resolverData, function(value, name) { %>
+  <div class="card" id="<%- resolverType %>-<%- name %>" style="margin-bottom: 1em">
+    <header class="card-header">
+      <p class="card-header-title">
+        <span class="is-family-code"><%- name %></span>
+      </p>
+      <a href="#top" class="card-header-icon" aria-label="back to top">
+        <span class="icon">
+          ^
+          <!-- i class="fas fa-angle-up" aria-hidden="true"></i -->
+        </span>
+      </a>
+    </header>
+    <div class="card-content">
+      <div class="content">
+        <% if (value.description) { %>
+          <strong><%- value.description %></strong>
+        <% } else { %>
+          <span class="is-italic has-text-info">No description</span>
+        <% } %>
+        <hr />
+        <strong class="has-text-info is-uppercase">parameters</strong>
+        <table class="table is-bordered">
+          <thead>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Description</th>
+          </thead>
+          <tbody>
+        <% if (value.params && value.params.length) { %>
+        <% _.forEach(value.params, function(param, i) { %>
+            <tr<% if (i > 0 && i%2) {%> class="has-background-light"<%} %>>
+              <td><% if (param.variable) { %>...<% } %><%- param.name %></td>
+              <td><%- param.type %></td>
+              <td><%- param.description %></td>
+            </tr>
+            <%
+              if (param.keys && param.keys.length) {
+                _.forEach(param.keys, function(keys) {
+            %>
+            <tr<% if (i > 0 && i%2) {%> class="has-background-light"<%} %>>
+              <td><%- keys.parent %>.<%- keys.name %></td>
+              <td><%- keys.type %></td>
+              <td><%- keys.description %></td>
+            </tr>
+            <%
+                })
+            } %>
+        <% }) %>
+        <% } else { %>
+          <tr>
+            <td colspan="3">
+              <span class="is-italic has-text-info">No parameter required</span>
+            </td>
+          </tr>
+        <% } %>
+          </tbody>
+        </table>
+        <strong class="has-text-info is-uppercase">returns</strong>
+        <table class="table is-bordered">
+          <thead>
+            <th>Type</th>
+            <th>Description</th>
+          </thead>
+          <tbody>
+          <% _.forEach(value.returns, function(returns) { %>
+            <tr>
+              <td><%- returns.type %></td>
+              <td><%- returns.description %></td>
+            </tr>
+          <% }) %>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <!-- footer class="card-footer">
+      <a href="#" class="card-footer-item">Save</a>
+      <a href="#" class="card-footer-item">Edit</a>
+      <a href="#" class="card-footer-item">Delete</a>
+    </footer -->
+  </div>
+<% }) %>
diff --git a/packages/web-console/koa/utils.js b/packages/web-console/koa/utils.js
new file mode 100644
index 0000000000000000000000000000000000000000..3af016cb73c6d9a13707601b73e4ad03137bf134
--- /dev/null
+++ b/packages/web-console/koa/utils.js
@@ -0,0 +1,154 @@
+// all the require methods
+const { join, extname } = require('path')
+const fsx = require('fs-extra')
+const _ = require('lodash')
+const {
+  DEFAULT_CONTRACT_FILE_NAME,
+  PUBLIC_CONTRACT_FILE_NAME,
+  RESOLVER_TYPES,
+  AUTH_TYPE
+} = require('jsonql-constants')
+const publicDir = process.env.PUBLIC_DIR || join(__dirname, 'public')
+const assets = ['/jsonql-web-console.css']
+const resolverTypes = [AUTH_TYPE].concat(RESOLVER_TYPES)
+const debug = require('debug')('jsonql-web-console:utils')
+
+/**
+ * Just to read the contract json
+ * search for the contract file
+ * should we check if there is a public-contract first
+ * if it's not found then we check if there is a contract.json?
+ * also in the case of just start up, it might happen a fight situation
+ * @param {object} config configuration
+ */
+const getContractJson = config => {
+  const searchDir = [
+    join(config.contractDir, PUBLIC_CONTRACT_FILE_NAME),
+    join(config.contractDir, DEFAULT_CONTRACT_FILE_NAME)
+  ]
+  return _(searchDir)
+    .chain()
+    .filter(dir => fsx.existsSync(dir))
+    .thru(dirs => {
+      debug('dirs', dirs)
+      if (dirs.length) {
+        return fsx.readJsonSync(dirs[0])
+      }
+      return false;
+    })
+    .value()
+}
+
+/**
+ * check if the path matches our assets
+ * @param {object} ctx koa context
+ * @return {boolean|string} false when its not
+ */
+const isWebConsoleAssets = ctx => {
+  return _(assets)
+    .chain()
+    .filter(path => ctx.path === path)
+    .thru(path => {
+      if (path.length) {
+        return path[0]
+      }
+      return false;
+    })
+    .value()
+}
+
+/**
+ * Get document (string) byte length for use in header
+ * @param {string} doc to calculate
+ * @return {number} length
+ */
+const getDocLen = doc => Buffer.byteLength(doc, 'utf8')
+
+/**
+ * Pre-render the block data and add to the json for final output
+ * @param {object} json the contract data
+ * @return {object} the transformed version
+ */
+const transformTplData = json => {
+  let outJson = json;
+  if (outJson.timestamp) {
+    debug('timestamp', outJson.timestamp)
+    outJson.timestamp = timeStamp2String(parseInt(outJson.timestamp))
+  }
+
+  const tpl = fsx.readFileSync(join(publicDir, 'templates', 'block.tpl.html'))
+  return resolverTypes.map(resolverType => {
+    let typeName = resolverType + 'Block';
+    let data = json[resolverType]
+    debug(resolverType, data)
+    if (data && !_.isEqual(data, {})) {
+      return {
+        [typeName]: _.template(tpl)({
+          resolverType,
+          resolverData: data
+        })
+      }
+    }
+    return {[typeName]: false, [resolverType]: false}
+  })
+  .reduce(_.merge, outJson)
+}
+
+/**
+ * @param {string} content output string from file
+ * @param {object} json contract
+ */
+const renderTpl = (content, json) => {
+  return _.template(content)(transformTplData(json))
+}
+
+/**
+ * Render out the content
+ * @param {object} ctx koa context
+ * @param {string} file to serve up
+ * @return {void} nothing should stop here
+ */
+const render = (ctx, file, json = false) => {
+  let content = fsx.readFileSync(join(publicDir, file))
+  if (json !== false) {
+    content = renderTpl(content, json)
+  }
+  let ext = extname(file)
+  if (ext === '.css') {
+    ctx.type = 'text/css';
+  } else if (ext === '.js') {
+    ctx.type = 'application/javascript';
+  } else {
+    ctx.type = 'text/html';
+  }
+
+  ctx.size = getDocLen(content)
+  // should we try to get the contentType?
+  // ctx.type = opts.contentType;
+  ctx.status = 200;
+  ctx.body = content;
+}
+
+// from https://blog.csdn.net/xxm524/article/details/47373089
+function timeStamp2String(time) {
+  var datetime = new Date();
+      datetime.setTime(time);
+  var year = datetime.getFullYear();
+  var month = datetime.getMonth() + 1;
+  var date = datetime.getDate();
+  var hour = datetime.getHours();
+  var minute = datetime.getMinutes();
+  var second = datetime.getSeconds();
+  var mseconds = datetime.getMilliseconds();
+  return year + "-" + month + "-" + date+" "+hour+":"+minute+":"+second+"."+mseconds;
+}
+
+
+module.exports = {
+  getContractJson,
+  isWebConsoleAssets,
+  getDocLen,
+  transformTplData,
+  renderTpl,
+  render
+}
diff --git a/packages/web-console/package.json b/packages/web-console/package.json
index 5e1e73ec458c8ddf3c45ed957ae97dce3712ae1e..103c8e3c2639ce4a3d949c33370711114e7b0e66 100644
--- a/packages/web-console/package.json
+++ b/packages/web-console/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jsonql-web-console",
-  "version": "0.2.0",
+  "version": "0.4.3",
   "main": "koa/index.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -9,15 +9,15 @@
     "jsonql": "node ./tests/fixtures/server.js",
     "dev": "npm run jsonql & npm run serve",
     "dev:koa": "node ./koa/dev.js",
-    "test:browser": "DEBUG=jsonql-web-console*,server-io-core* node ./tests/fixtures/run.js",
-    "test:tpl": "DEBUG=jsonql-web-console* node ./tests/fixtures/tpl.js"
+    "test:browser": "DEBUG=jsonql-web-console* node ./tests/fixtures/run.js",
+    "test:tpl": "DEBUG=jsonql-web-console* PUBLIC_DIR=~/jsonql/packages/web-console/koa/public node ./tests/fixtures/tpl.js"
   },
   "files": [
     "koa",
     "index.js"
   ],
   "dependencies": {
-    "bulma": "^0.7.5",
+    "debug": "^4.1.1",
     "fs-extra": "^8.1.0",
     "jsonql-constants": "^1.7.9",
     "lodash": "^4.17.15"
@@ -27,12 +27,12 @@
     "@vue/cli-plugin-eslint": "^3.10.0",
     "@vue/cli-service": "^3.10.0",
     "babel-eslint": "^10.0.2",
-    "core-js": "^3.2.0",
-    "debug": "^4.1.1",
+    "bulma": "^0.7.5",
+    "core-js": "^3.2.1",
     "eslint": "^6.1.0",
     "eslint-plugin-vue": "^5.2.3",
     "jsonql-client": "^1.3.1",
-    "jsonql-koa": "^1.3.4",
+    "jsonql-koa": "^1.3.5",
     "jsonql-ws-client": "^1.0.0-beta.1",
     "server-io-core": "^1.2.0",
     "vue": "^2.6.10",
diff --git a/packages/web-console/tests/fixtures/contract/contract.json b/packages/web-console/tests/fixtures/contract/contract.json
index cb069393ef61930092e53abf325137b2055513de..d43635813b4d062f48c9825194e46bf62825ff92 100644
--- a/packages/web-console/tests/fixtures/contract/contract.json
+++ b/packages/web-console/tests/fixtures/contract/contract.json
@@ -1,14 +1,14 @@
 {
   "query": {
-    "defaultCall": {
-      "file": "/home/joel/projects/open-source/jsonql/packages/contract-console/tests/fixtures/resolvers/query/default-call.js",
-      "description": false,
+    "getUser": {
+      "file": "/home/joel/projects/xuefou/packages/postgres-api/resolvers/query/get-user.js",
+      "description": "Get a user info",
       "params": [
         {
           "type": [
             "number"
           ],
-          "description": "a phony id",
+          "description": "the user id",
           "name": "id"
         }
       ],
@@ -17,39 +17,79 @@
           "type": [
             "object"
           ],
-          "description": "an object with whatever"
+          "description": "userdata"
         }
       ]
     }
   },
   "mutation": {
-    "defaultSave": {
-      "file": "/home/joel/projects/open-source/jsonql/packages/contract-console/tests/fixtures/resolvers/mutation/default-save.js",
-      "description": false,
+    "saveUser": {
+      "file": "/home/joel/projects/xuefou/packages/postgres-api/resolvers/mutation/save-user.js",
+      "description": "Save userdata using id to identify which one",
       "params": [
         {
           "type": [
             "object"
           ],
-          "name": "payload"
+          "description": "the userdata object --> create interface",
+          "name": "payload",
+          "keys": [
+            {
+              "type": [
+                "string"
+              ],
+              "description": "name of user",
+              "name": "username",
+              "parent": "payload"
+            },
+            {
+              "type": [
+                "string"
+              ],
+              "description": "full name",
+              "name": "fullname",
+              "parent": "payload"
+            },
+            {
+              "type": [
+                "number",
+                "any"
+              ],
+              "description": "optional time stamp when created",
+              "name": "created",
+              "parent": "payload"
+            }
+          ]
         },
         {
           "type": [
             "object"
           ],
-          "name": "condition"
+          "description": "where cause",
+          "name": "condition",
+          "keys": [
+            {
+              "type": [
+                "number"
+              ],
+              "description": "the user id",
+              "name": "id",
+              "parent": "condition"
+            }
+          ]
         }
       ],
       "returns": [
         {
           "type": [
             "boolean"
-          ]
+          ],
+          "description": "true when OK"
         }
       ]
     }
   },
   "auth": {},
-  "timestamp": 1563798679,
+  "timestamp": 1565667859,
   "sourceType": "module"
 }
diff --git a/packages/web-console/tests/fixtures/contract/public-contract.json b/packages/web-console/tests/fixtures/contract/public-contract.json
index c7808b85dd107461dbde05cacbebb7de39147319..a31c6b80a11bdfe1923576081bed546d7e2a0c57 100644
--- a/packages/web-console/tests/fixtures/contract/public-contract.json
+++ b/packages/web-console/tests/fixtures/contract/public-contract.json
@@ -10,14 +10,14 @@
         }
       ]
     },
-    "defaultCall": {
-      "description": false,
+    "getUser": {
+      "description": "Get a user info",
       "params": [
         {
           "type": [
             "number"
           ],
-          "description": "a phony id",
+          "description": "the user id",
           "name": "id"
         }
       ],
@@ -26,37 +26,77 @@
           "type": [
             "object"
           ],
-          "description": "an object with whatever"
+          "description": "userdata"
         }
       ]
     }
   },
   "mutation": {
-    "defaultSave": {
-      "description": false,
+    "saveUser": {
+      "description": "Save userdata using id to identify which one",
       "params": [
         {
           "type": [
             "object"
           ],
-          "name": "payload"
+          "description": "the userdata object --> create interface",
+          "name": "payload",
+          "keys": [
+            {
+              "type": [
+                "string"
+              ],
+              "description": "name of user",
+              "name": "username",
+              "parent": "payload"
+            },
+            {
+              "type": [
+                "string"
+              ],
+              "description": "full name",
+              "name": "fullname",
+              "parent": "payload"
+            },
+            {
+              "type": [
+                "number",
+                "any"
+              ],
+              "description": "optional time stamp when created",
+              "name": "created",
+              "parent": "payload"
+            }
+          ]
         },
         {
           "type": [
             "object"
           ],
-          "name": "condition"
+          "description": "where cause",
+          "name": "condition",
+          "keys": [
+            {
+              "type": [
+                "number"
+              ],
+              "description": "the user id",
+              "name": "id",
+              "parent": "condition"
+            }
+          ]
         }
       ],
       "returns": [
         {
           "type": [
             "boolean"
-          ]
+          ],
+          "description": "true when OK"
         }
       ]
     }
   },
   "auth": {},
-  "timestamp": 1563798679
+  "timestamp": 1565667859
 }
diff --git a/packages/web-console/tests/fixtures/tpl.js b/packages/web-console/tests/fixtures/tpl.js
index 3fab9608e3dbd5536e157f39cb0b805695e996bd..23dc172f448818db9d8d3e1f4a5de614422bed9c 100644
--- a/packages/web-console/tests/fixtures/tpl.js
+++ b/packages/web-console/tests/fixtures/tpl.js
@@ -4,25 +4,10 @@ const fsx = require('fs-extra')
 const { join } = require('path')
 const debug = require('debug')('jsonql-web-console:test:tpl')
 const dir = join(__dirname, '..', '..', 'koa')
-
 const content = fsx.readFileSync(join(dir, 'public', 'index.html'))
-
 const json = fsx.readJsonSync(join(__dirname, 'contract', 'public-contract.json'))
+const { renderTpl } = require('../../koa/utils')
 
-const fix = json => {
-  if (!json.socket) {
-    json.socket = false;
-  }
-  if (_.isEqual(json.auth, {})) {
-    json.auth = false;
-  }
-  return json;
-}
-
-const out = _.template(content)(
-  fix(json)
-)
-
-debug('type', typeof out)
+const out = renderTpl(content, json) 
 
 debug(out)