diff --git a/browserid/static/dialog/ICanHaz.min.js b/browserid/static/dialog/ICanHaz.min.js
new file mode 100644
index 0000000000000000000000000000000000000000..77a947b726b045d89e9bd06def1ad430cb78ea43
--- /dev/null
+++ b/browserid/static/dialog/ICanHaz.min.js
@@ -0,0 +1,9 @@
+(function(i){var n=function(){var f=function(){};f.prototype={otag:"{{",ctag:"}}",pragmas:{},buffer:[],pragmas_implemented:{"IMPLICIT-ITERATOR":true},context:{},render:function(a,b,c,d){if(!d){this.context=b;this.buffer=[]}if(!this.includes("",a))if(d)return a;else{this.send(a);return}a=this.render_pragmas(a);a=this.render_section(a,b,c);if(d)return this.render_tags(a,b,c,d);this.render_tags(a,b,c,d)},send:function(a){a!=""&&this.buffer.push(a)},render_pragmas:function(a){if(!this.includes("%",a))return a;
+var b=this;return a.replace(RegExp(this.otag+"%([\\w-]+) ?([\\w]+=[\\w]+)?"+this.ctag),function(c,d,e){if(!b.pragmas_implemented[d])throw{message:"This implementation of mustache doesn't understand the '"+d+"' pragma"};b.pragmas[d]={};if(e){c=e.split("=");b.pragmas[d][c[0]]=c[1]}return""})},render_partial:function(a,b,c){a=this.trim(a);if(!c||c[a]===undefined)throw{message:"unknown_partial '"+a+"'"};if(typeof b[a]!="object")return this.render(c[a],b,c,true);return this.render(c[a],b[a],c,true)},render_section:function(a,
+b,c){if(!this.includes("#",a)&&!this.includes("^",a))return a;var d=this;return a.replace(RegExp(this.otag+"(\\^|\\#)\\s*(.+)\\s*"+this.ctag+"\n*([\\s\\S]+?)"+this.otag+"\\/\\s*\\2\\s*"+this.ctag+"\\s*","mg"),function(e,j,k,h){e=d.find(k,b);if(j=="^")return!e||d.is_array(e)&&e.length===0?d.render(h,b,c,true):"";else if(j=="#")return d.is_array(e)?d.map(e,function(g){return d.render(h,d.create_context(g),c,true)}).join(""):d.is_object(e)?d.render(h,d.create_context(e),c,true):typeof e==="function"?
+e.call(b,h,function(g){return d.render(g,b,c,true)}):e?d.render(h,b,c,true):""})},render_tags:function(a,b,c,d){var e=this,j=function(){return RegExp(e.otag+"(=|!|>|\\{|%)?([^\\/#\\^]+?)\\1?"+e.ctag+"+","g")},k=j(),h=function(o,m,l){switch(m){case "!":return"";case "=":e.set_delimiters(l);k=j();return"";case ">":return e.render_partial(l,b,c);case "{":return e.find(l,b);default:return e.escape(e.find(l,b))}};a=a.split("\n");for(var g=0;g<a.length;g++){a[g]=a[g].replace(k,h,this);d||this.send(a[g])}if(d)return a.join("\n")},
+set_delimiters:function(a){a=a.split(" ");this.otag=this.escape_regex(a[0]);this.ctag=this.escape_regex(a[1])},escape_regex:function(a){if(!arguments.callee.sRE)arguments.callee.sRE=RegExp("(\\/|\\.|\\*|\\+|\\?|\\||\\(|\\)|\\[|\\]|\\{|\\}|\\\\)","g");return a.replace(arguments.callee.sRE,"\\$1")},find:function(a,b){a=this.trim(a);var c;if(b[a]===false||b[a]===0||b[a])c=b[a];else if(this.context[a]===false||this.context[a]===0||this.context[a])c=this.context[a];if(typeof c==="function")return c.apply(b);
+if(c!==undefined)return c;return""},includes:function(a,b){return b.indexOf(this.otag+a)!=-1},escape:function(a){a=String(a===null?"":a);return a.replace(/&(?!\w+;)|["<>\\]/g,function(b){switch(b){case "&":return"&amp;";case "\\":return"\\\\";case '"':return'"';case "<":return"&lt;";case ">":return"&gt;";default:return b}})},create_context:function(a){if(this.is_object(a))return a;else{var b=".";if(this.pragmas["IMPLICIT-ITERATOR"])b=this.pragmas["IMPLICIT-ITERATOR"].iterator;var c={};c[b]=a;return c}},
+is_object:function(a){return a&&typeof a=="object"},is_array:function(a){return Object.prototype.toString.call(a)==="[object Array]"},trim:function(a){return a.replace(/^\s*|\s*$/g,"")},map:function(a,b){if(typeof a.map=="function")return a.map(b);else{for(var c=[],d=a.length,e=0;e<d;e++)c.push(b(a[e]));return c}}};return{name:"mustache.js",version:"0.3.0",to_html:function(a,b,c,d){var e=new f;if(d)e.send=d;e.render(a,b,c);if(!d)return e.buffer.join("\n")}}}();window.ich=new function(){var f=this;
+f.VERSION="0.9";f.templates={};f.partials={};f.addTemplate=function(a,b){if(f[a])throw"Invalid name: "+a+".";if(f.templates[a])throw'Template " + name + " exists';f.templates[a]=b;f[a]=function(c,d){c=c||{};var e=n.to_html(f.templates[a],c,f.partials);return d?e:i(e)}};f.addPartial=function(a,b){if(f.partials[a])throw'Partial " + name + " exists';else f.partials[a]=b};f.grabTemplates=function(){i('script[type="text/html"]').each(function(a,b){var c=i(typeof a==="number"?b:a),d="".trim?c.html().trim():
+i.trim(c.html());f[c.hasClass("partial")?"addPartial":"addTemplate"](c.attr("id"),d);c.remove()})};f.clearAll=function(){for(var a in f.templates)delete f[a];f.templates={};f.partials={}};f.refresh=function(){f.clearAll();f.grabTemplates()}};i(function(){ich.grabTemplates()})})(window.jQuery||window.Zepto);
diff --git a/browserid/static/dialog/backbone-min.js b/browserid/static/dialog/backbone-min.js
new file mode 100644
index 0000000000000000000000000000000000000000..f3de7cd41a5907ed82ba9864ad012c73956948e9
--- /dev/null
+++ b/browserid/static/dialog/backbone-min.js
@@ -0,0 +1,32 @@
+// Backbone.js 0.5.1
+// (c) 2010 Jeremy Ashkenas, DocumentCloud Inc.
+// Backbone may be freely distributed under the MIT license.
+// For all details and documentation:
+// http://documentcloud.github.com/backbone
+(function(){var h=this,p=h.Backbone,e;e=typeof exports!=="undefined"?exports:h.Backbone={};e.VERSION="0.5.1";var f=h._;if(!f&&typeof require!=="undefined")f=require("underscore")._;var g=h.jQuery||h.Zepto;e.noConflict=function(){h.Backbone=p;return this};e.emulateHTTP=!1;e.emulateJSON=!1;e.Events={bind:function(a,b){var c=this._callbacks||(this._callbacks={});(c[a]||(c[a]=[])).push(b);return this},unbind:function(a,b){var c;if(a){if(c=this._callbacks)if(b){c=c[a];if(!c)return this;for(var d=0,e=c.length;d<
+e;d++)if(b===c[d]){c[d]=null;break}}else c[a]=[]}else this._callbacks={};return this},trigger:function(a){var b,c,d,e,f=2;if(!(c=this._callbacks))return this;for(;f--;)if(b=f?a:"all",b=c[b])for(var g=0,h=b.length;g<h;g++)(d=b[g])?(e=f?Array.prototype.slice.call(arguments,1):arguments,d.apply(this,e)):(b.splice(g,1),g--,h--);return this}};e.Model=function(a,b){var c;a||(a={});if(c=this.defaults)f.isFunction(c)&&(c=c()),a=f.extend({},c,a);this.attributes={};this._escapedAttributes={};this.cid=f.uniqueId("c");
+this.set(a,{silent:!0});this._changed=!1;this._previousAttributes=f.clone(this.attributes);if(b&&b.collection)this.collection=b.collection;this.initialize(a,b)};f.extend(e.Model.prototype,e.Events,{_previousAttributes:null,_changed:!1,idAttribute:"id",initialize:function(){},toJSON:function(){return f.clone(this.attributes)},get:function(a){return this.attributes[a]},escape:function(a){var b;if(b=this._escapedAttributes[a])return b;b=this.attributes[a];return this._escapedAttributes[a]=(b==null?"":
+""+b).replace(/&(?!\w+;|#\d+;|#x[\da-f]+;)/gi,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27").replace(/\//g,"&#x2F;")},has:function(a){return this.attributes[a]!=null},set:function(a,b){b||(b={});if(!a)return this;if(a.attributes)a=a.attributes;var c=this.attributes,d=this._escapedAttributes;if(!b.silent&&this.validate&&!this._performValidation(a,b))return!1;if(this.idAttribute in a)this.id=a[this.idAttribute];var e=this._changing;this._changing=!0;
+for(var g in a){var h=a[g];if(!f.isEqual(c[g],h))c[g]=h,delete d[g],this._changed=!0,b.silent||this.trigger("change:"+g,this,h,b)}!e&&!b.silent&&this._changed&&this.change(b);this._changing=!1;return this},unset:function(a,b){if(!(a in this.attributes))return this;b||(b={});var c={};c[a]=void 0;if(!b.silent&&this.validate&&!this._performValidation(c,b))return!1;delete this.attributes[a];delete this._escapedAttributes[a];a==this.idAttribute&&delete this.id;this._changed=!0;b.silent||(this.trigger("change:"+
+a,this,void 0,b),this.change(b));return this},clear:function(a){a||(a={});var b,c=this.attributes,d={};for(b in c)d[b]=void 0;if(!a.silent&&this.validate&&!this._performValidation(d,a))return!1;this.attributes={};this._escapedAttributes={};this._changed=!0;if(!a.silent){for(b in c)this.trigger("change:"+b,this,void 0,a);this.change(a)}return this},fetch:function(a){a||(a={});var b=this,c=a.success;a.success=function(d,e,f){if(!b.set(b.parse(d,f),a))return!1;c&&c(b,d)};a.error=i(a.error,b,a);return(this.sync||
+e.sync).call(this,"read",this,a)},save:function(a,b){b||(b={});if(a&&!this.set(a,b))return!1;var c=this,d=b.success;b.success=function(a,e,f){if(!c.set(c.parse(a,f),b))return!1;d&&d(c,a,f)};b.error=i(b.error,c,b);var f=this.isNew()?"create":"update";return(this.sync||e.sync).call(this,f,this,b)},destroy:function(a){a||(a={});if(this.isNew())return this.trigger("destroy",this,this.collection,a);var b=this,c=a.success;a.success=function(d){b.trigger("destroy",b,b.collection,a);c&&c(b,d)};a.error=i(a.error,
+b,a);return(this.sync||e.sync).call(this,"delete",this,a)},url:function(){var a=k(this.collection)||this.urlRoot||l();if(this.isNew())return a;return a+(a.charAt(a.length-1)=="/"?"":"/")+encodeURIComponent(this.id)},parse:function(a){return a},clone:function(){return new this.constructor(this)},isNew:function(){return this.id==null},change:function(a){this.trigger("change",this,a);this._previousAttributes=f.clone(this.attributes);this._changed=!1},hasChanged:function(a){if(a)return this._previousAttributes[a]!=
+this.attributes[a];return this._changed},changedAttributes:function(a){a||(a=this.attributes);var b=this._previousAttributes,c=!1,d;for(d in a)f.isEqual(b[d],a[d])||(c=c||{},c[d]=a[d]);return c},previous:function(a){if(!a||!this._previousAttributes)return null;return this._previousAttributes[a]},previousAttributes:function(){return f.clone(this._previousAttributes)},_performValidation:function(a,b){var c=this.validate(a);if(c)return b.error?b.error(this,c,b):this.trigger("error",this,c,b),!1;return!0}});
+e.Collection=function(a,b){b||(b={});if(b.comparator)this.comparator=b.comparator;f.bindAll(this,"_onModelEvent","_removeReference");this._reset();a&&this.reset(a,{silent:!0});this.initialize.apply(this,arguments)};f.extend(e.Collection.prototype,e.Events,{model:e.Model,initialize:function(){},toJSON:function(){return this.map(function(a){return a.toJSON()})},add:function(a,b){if(f.isArray(a))for(var c=0,d=a.length;c<d;c++)this._add(a[c],b);else this._add(a,b);return this},remove:function(a,b){if(f.isArray(a))for(var c=
+0,d=a.length;c<d;c++)this._remove(a[c],b);else this._remove(a,b);return this},get:function(a){if(a==null)return null;return this._byId[a.id!=null?a.id:a]},getByCid:function(a){return a&&this._byCid[a.cid||a]},at:function(a){return this.models[a]},sort:function(a){a||(a={});if(!this.comparator)throw Error("Cannot sort a set without a comparator");this.models=this.sortBy(this.comparator);a.silent||this.trigger("reset",this,a);return this},pluck:function(a){return f.map(this.models,function(b){return b.get(a)})},
+reset:function(a,b){a||(a=[]);b||(b={});this.each(this._removeReference);this._reset();this.add(a,{silent:!0});b.silent||this.trigger("reset",this,b);return this},fetch:function(a){a||(a={});var b=this,c=a.success;a.success=function(d,f,e){b[a.add?"add":"reset"](b.parse(d,e),a);c&&c(b,d)};a.error=i(a.error,b,a);return(this.sync||e.sync).call(this,"read",this,a)},create:function(a,b){var c=this;b||(b={});a=this._prepareModel(a,b);if(!a)return!1;var d=b.success;b.success=function(a,e,f){c.add(a,b);
+d&&d(a,e,f)};a.save(null,b);return a},parse:function(a){return a},chain:function(){return f(this.models).chain()},_reset:function(){this.length=0;this.models=[];this._byId={};this._byCid={}},_prepareModel:function(a,b){if(a instanceof e.Model){if(!a.collection)a.collection=this}else{var c=a;a=new this.model(c,{collection:this});a.validate&&!a._performValidation(c,b)&&(a=!1)}return a},_add:function(a,b){b||(b={});a=this._prepareModel(a,b);if(!a)return!1;var c=this.getByCid(a)||this.get(a);if(c)throw Error(["Can't add the same model to a set twice",
+c.id]);this._byId[a.id]=a;this._byCid[a.cid]=a;this.models.splice(b.at!=null?b.at:this.comparator?this.sortedIndex(a,this.comparator):this.length,0,a);a.bind("all",this._onModelEvent);this.length++;b.silent||a.trigger("add",a,this,b);return a},_remove:function(a,b){b||(b={});a=this.getByCid(a)||this.get(a);if(!a)return null;delete this._byId[a.id];delete this._byCid[a.cid];this.models.splice(this.indexOf(a),1);this.length--;b.silent||a.trigger("remove",a,this,b);this._removeReference(a);return a},
+_removeReference:function(a){this==a.collection&&delete a.collection;a.unbind("all",this._onModelEvent)},_onModelEvent:function(a,b,c,d){(a=="add"||a=="remove")&&c!=this||(a=="destroy"&&this._remove(b,d),b&&a==="change:"+b.idAttribute&&(delete this._byId[b.previous(b.idAttribute)],this._byId[b.id]=b),this.trigger.apply(this,arguments))}});f.each(["forEach","each","map","reduce","reduceRight","find","detect","filter","select","reject","every","all","some","any","include","contains","invoke","max",
+"min","sortBy","sortedIndex","toArray","size","first","rest","last","without","indexOf","lastIndexOf","isEmpty"],function(a){e.Collection.prototype[a]=function(){return f[a].apply(f,[this.models].concat(f.toArray(arguments)))}});e.Router=function(a){a||(a={});if(a.routes)this.routes=a.routes;this._bindRoutes();this.initialize.apply(this,arguments)};var q=/:([\w\d]+)/g,r=/\*([\w\d]+)/g,s=/[-[\]{}()+?.,\\^$|#\s]/g;f.extend(e.Router.prototype,e.Events,{initialize:function(){},route:function(a,b,c){e.history||
+(e.history=new e.History);f.isRegExp(a)||(a=this._routeToRegExp(a));e.history.route(a,f.bind(function(d){d=this._extractParameters(a,d);c.apply(this,d);this.trigger.apply(this,["route:"+b].concat(d))},this))},navigate:function(a,b){e.history.navigate(a,b)},_bindRoutes:function(){if(this.routes){var a=[],b;for(b in this.routes)a.unshift([b,this.routes[b]]);b=0;for(var c=a.length;b<c;b++)this.route(a[b][0],a[b][1],this[a[b][1]])}},_routeToRegExp:function(a){a=a.replace(s,"\\$&").replace(q,"([^/]*)").replace(r,
+"(.*?)");return RegExp("^"+a+"$")},_extractParameters:function(a,b){return a.exec(b).slice(1)}});e.History=function(){this.handlers=[];f.bindAll(this,"checkUrl")};var j=/^#*/,t=/msie [\w.]+/,m=!1;f.extend(e.History.prototype,{interval:50,getFragment:function(a,b){if(a==null)if(this._hasPushState||b){a=window.location.pathname;var c=window.location.search;c&&(a+=c);a.indexOf(this.options.root)==0&&(a=a.substr(this.options.root.length))}else a=window.location.hash;return a.replace(j,"")},start:function(a){if(m)throw Error("Backbone.history has already been started");
+this.options=f.extend({},{root:"/"},this.options,a);this._wantsPushState=!!this.options.pushState;this._hasPushState=!(!this.options.pushState||!window.history||!window.history.pushState);a=this.getFragment();var b=document.documentMode;if(b=t.exec(navigator.userAgent.toLowerCase())&&(!b||b<=7))this.iframe=g('<iframe src="javascript:0" tabindex="-1" />').hide().appendTo("body")[0].contentWindow,this.navigate(a);this._hasPushState?g(window).bind("popstate",this.checkUrl):"onhashchange"in window&&!b?
+g(window).bind("hashchange",this.checkUrl):setInterval(this.checkUrl,this.interval);this.fragment=a;m=!0;a=window.location;b=a.pathname==this.options.root;if(this._wantsPushState&&!this._hasPushState&&!b)this.fragment=this.getFragment(null,!0),window.location.replace(this.options.root+"#"+this.fragment);else if(this._wantsPushState&&this._hasPushState&&b&&a.hash)this.fragment=a.hash.replace(j,""),window.history.replaceState({},document.title,a.protocol+"//"+a.host+this.options.root+this.fragment);
+return this.loadUrl()},route:function(a,b){this.handlers.unshift({route:a,callback:b})},checkUrl:function(){var a=this.getFragment();a==this.fragment&&this.iframe&&(a=this.getFragment(this.iframe.location.hash));if(a==this.fragment||a==decodeURIComponent(this.fragment))return!1;this.iframe&&this.navigate(a);this.loadUrl()||this.loadUrl(window.location.hash)},loadUrl:function(a){var b=this.fragment=this.getFragment(a);return f.any(this.handlers,function(a){if(a.route.test(b))return a.callback(b),!0})},
+navigate:function(a,b){var c=(a||"").replace(j,"");if(!(this.fragment==c||this.fragment==decodeURIComponent(c))){if(this._hasPushState){var d=window.location;c.indexOf(this.options.root)!=0&&(c=this.options.root+c);this.fragment=c;window.history.pushState({},document.title,d.protocol+"//"+d.host+c)}else if(window.location.hash=this.fragment=c,this.iframe&&c!=this.getFragment(this.iframe.location.hash))this.iframe.document.open().close(),this.iframe.location.hash=c;b&&this.loadUrl(a)}}});e.View=function(a){this.cid=
+f.uniqueId("view");this._configure(a||{});this._ensureElement();this.delegateEvents();this.initialize.apply(this,arguments)};var u=/^(\S+)\s*(.*)$/,n=["model","collection","el","id","attributes","className","tagName"];f.extend(e.View.prototype,e.Events,{tagName:"div",$:function(a){return g(a,this.el)},initialize:function(){},render:function(){return this},remove:function(){g(this.el).remove();return this},make:function(a,b,c){a=document.createElement(a);b&&g(a).attr(b);c&&g(a).html(c);return a},delegateEvents:function(a){if(a||
+(a=this.events))for(var b in g(this.el).unbind(".delegateEvents"+this.cid),a){var c=this[a[b]];if(!c)throw Error('Event "'+a[b]+'" does not exist');var d=b.match(u),e=d[1];d=d[2];c=f.bind(c,this);e+=".delegateEvents"+this.cid;d===""?g(this.el).bind(e,c):g(this.el).delegate(d,e,c)}},_configure:function(a){this.options&&(a=f.extend({},this.options,a));for(var b=0,c=n.length;b<c;b++){var d=n[b];a[d]&&(this[d]=a[d])}this.options=a},_ensureElement:function(){if(this.el){if(f.isString(this.el))this.el=
+g(this.el).get(0)}else{var a=this.attributes||{};if(this.id)a.id=this.id;if(this.className)a["class"]=this.className;this.el=this.make(this.tagName,a)}}});e.Model.extend=e.Collection.extend=e.Router.extend=e.View.extend=function(a,b){var c=v(this,a,b);c.extend=this.extend;return c};var w={create:"POST",update:"PUT","delete":"DELETE",read:"GET"};e.sync=function(a,b,c){var d=w[a];c=f.extend({type:d,dataType:"json",processData:!1},c);if(!c.url)c.url=k(b)||l();if(!c.data&&b&&(a=="create"||a=="update"))c.contentType=
+"application/json",c.data=JSON.stringify(b.toJSON());if(e.emulateJSON)c.contentType="application/x-www-form-urlencoded",c.processData=!0,c.data=c.data?{model:c.data}:{};if(e.emulateHTTP&&(d==="PUT"||d==="DELETE")){if(e.emulateJSON)c.data._method=d;c.type="POST";c.beforeSend=function(a){a.setRequestHeader("X-HTTP-Method-Override",d)}}return g.ajax(c)};var o=function(){},v=function(a,b,c){var d;d=b&&b.hasOwnProperty("constructor")?b.constructor:function(){return a.apply(this,arguments)};f.extend(d,
+a);o.prototype=a.prototype;d.prototype=new o;b&&f.extend(d.prototype,b);c&&f.extend(d,c);d.prototype.constructor=d;d.__super__=a.prototype;return d},k=function(a){if(!a||!a.url)return null;return f.isFunction(a.url)?a.url():a.url},l=function(){throw Error('A "url" property or function must be specified');},i=function(a,b,c){return function(d){a?a(b,d,c):b.trigger("error",b,d,c)}}}).call(this);
diff --git a/browserid/static/dialog/index.html b/browserid/static/dialog/index.html
index 34b6ba9e8d38449e839d51880103435a2b9ede02..a82a72b0bd365f09a6ce85b471b45fe74733e0f1 100644
--- a/browserid/static/dialog/index.html
+++ b/browserid/static/dialog/index.html
@@ -2,14 +2,18 @@
 <head>
   <title> BrowserID </title>
   <link href="../dialog/style.css" type="text/css" media="screen" rel="stylesheet"></link>
-</head>
-<body id="body">
-<div id="header">
-  <div class="title"><img src="../i/browserid_logo_lil.png"></div><div class="subtitle">A better way to log in.</div>
-</div>
-<div id="authenticate_dialog" class="dialog">
+  <!-- XXX: jquery shouldn't be used, it's too big.  we're using it now cause this is a proof of concept -->
+  <script src="../dialog/jquery-min.js"></script>
+  <script src="../dialog/underscore-min.js"></script>
+  <script src="../dialog/backbone-min.js"></script>
+  <script src="../dialog/ICanHaz.min.js"></script>
+  <script src="../dialog/jschannel.js"></script>
+  <script src="../dialog/crypto-stubs.js"></script>
+  <script src="../dialog/main.js"></script>
+
+<script id="authenticate_dialog" type="text/html">
   <div class="content">
-    <p class="prompt">Logging into <span class="sitename bad"></span>:</p>
+    <p class="prompt">Logging into <span class="sitename bad">{{sitename}}</span>:</p>
     <div class="input">
       <div class="label"> Email </div>
       <div class="input"> <input type="text"></input></div>
@@ -26,8 +30,13 @@
       <div class="action"><a href="#">Don't have a BrowserID yet?</a></div>
     </div>
   </div>
+<div id="bottom-bar">
+  <button id="back">Go Back</button>
+  <button id="submit" class="righty action">Sign In</button>
+  <button id="cancel" class="righty">Cancel</button>
 </div>
-<div id="create_dialog" class="dialog">
+</script>
+<script id="create_dialog" type="text/html">
   <div class="content">
     <div class="summary create">BrowserID makes logging in <b>safer and easier</b>.  To begin, please provide an email address and pick a password:</div>
     <div class="summary forgot"><b>Forgot your password?</b>  No problem!  Enter your email address, pick a new password, and we'll get you set up again!</div>
@@ -49,11 +58,11 @@
       <span id="in_use_email">Email</span> in use, If this email is yours you can <a href="#">log in</a> with it?
     </div>
   </div>
-</div>
-<div id="confirm_email_dialog" class="dialog">
+</script>
+<script id="confirm_email_dialog" type="text/html">
   <div class="title"> Confirm Your Email </div>
   <div class="content">
-    <div class="summary">Welcome, <span class="email good"></span>.  You will receive a <strong>confirmation email</strong> in a few moments.  To activate your BrowserID, please <strong>visit the link</strong> included in the email.</div>
+    <div class="summary">Welcome, <span class="email good">{{email}}</span>.  You will receive a <strong>confirmation email</strong> in a few moments.  To activate your BrowserID, please <strong>visit the link</strong> included in the email.</div>
     <div class="attention">
       Waiting for email confirmation...
     </div>
@@ -61,17 +70,17 @@
       <div class="action"> No email yet?  <a href="#">Resend it!</a></div>
     </div>
   </div>
-</div>
-<div id="confirmed_email_dialog" class="dialog">
+</script>
+<script id="confirmed_email_dialog" type="text/html">
   <div class="title"> Confirm Your Email </div>
   <div class="content">
-    <div class="summary">Welcome, <span class="email good"></span>.  You will receive a <strong>confirmation email</strong> in a few moments.  To prove that this is your email address, please <strong>visit the link</strong> included in the email.</div>
+    <div class="summary">Welcome, <span class="email good">{{email}}</span>.  You will receive a <strong>confirmation email</strong> in a few moments.  To prove that this is your email address, please <strong>visit the link</strong> included in the email.</div>
     <div class="attention_awesome ">
       Your email has been confirmed! </span>
     </div>
   </div>
-</div>
-<div id="add_email_dialog" class="dialog">
+</script>
+<script id="add_email_dialog" type="text/html">
   <div class="title"> Add a new email address </div>
   <div class="content">
     <div class="summary">Setting up a up a new email address is easy, tell us what it is and we'll get started:</div>
@@ -81,37 +90,36 @@
       <div class="note"></div>
     </div>
   </div>
-</div>
-<div id="sign_in_dialog" class="dialog">
+</script>
+<script id="sign_in_dialog" type="text/html">
   <div class="content">
-    <p class="prompt">What email address would you like to use to log into <span class="sitename bad"></span>?</p>
+    <p class="prompt">What email address would you like to use to log into <span class="sitename bad">{{sitename}}</span>?</p>
     <form id="identities" name="identities">
+      <!-- add identities form -->
     </form>
   </div>
   <div class="actions">
     <div class="action"><a href="#">Add a new email address</a></div>
     <div class="action"><a href="#">This is not me.</a></div>
   </div>
-</div>
-<div id="error_dialog" class="dialog">
+</script>
+<script id="error_dialog" type="text/html">
   <div class="title"> Sign in with BrowserID </div>
   <div class="content">
   </div>
-</div>
-<div id="waiting_dialog" class="dialog">
+</script>
+<script id="waiting_dialog" type="text/html">
   <div class="title"> Sign in with BrowserID </div>
   <div class="content">
   </div>
+</script>
+
+</head>
+<body id="body">
+<div id="header">
+  <div class="title"><img src="../i/browserid_logo_lil.png"></div><div class="subtitle">A better way to log in.</div>
 </div>
-<div id="bottom-bar">
-  <button id="back">Go Back</button>
-  <button id="submit" class="righty action">Sign In</button>
-  <button id="cancel" class="righty">Cancel</button>
+<div id="main" class="dialog">
 </div>
 </body>
-<!-- XXX: jquery shouldn't be used, it's too big.  we're using it now cause this is a proof of concept -->
-<script src="../dialog/jquery-min.js"></script>
-<script src="../dialog/jschannel.js"></script>
-<script src="../dialog/crypto-stubs.js"></script>
-<script src="../dialog/main.js"></script>
 </html>
diff --git a/browserid/static/dialog/main.js b/browserid/static/dialog/main.js
index e17f0ce41c3b9bd7410781ae12e8f6b2ea17a71c..0f4fd9554604fa0080b2f8ccb19279a1bede71cd 100644
--- a/browserid/static/dialog/main.js
+++ b/browserid/static/dialog/main.js
@@ -19,6 +19,35 @@
     return undefined;
   }
 
+  function showDialog(name, args) {
+    // there must be a better way to do this
+    $('#main').show();
+    $('#main').html(DIALOGS[name].render(args).el.innerHTML);
+  }
+
+  var DIALOGS = {};
+  
+  var AuthenticateView = Backbone.View.extend({
+      tagName: 'div',
+      className: 'dialog',
+      render : function() {
+        $(this.el).html(ich.authenticate_dialog());
+        return this;
+      }
+    });
+
+  DIALOGS['authenticate'] = new AuthenticateView();
+
+  var SigninView = Backbone.View.extend({
+      className: 'dialog',
+      render: function(args) {
+        $(this.el).html(ich.sign_in_dialog(args));
+        return this;
+      }
+    });
+
+  DIALOGS['signin'] = new SigninView();
+
   function checkAuthStatus(authcb, notauthcb, onsuccess, onerror) {
     runWaitingDialog(
       "Communicating with server",
@@ -149,6 +178,8 @@
   }
 
   function runSignInDialog(onsuccess, onerror) {
+    return showDialog('signin', {sitename: remoteOrigin});
+
     $(".dialog").hide();
 
     $("#back").hide();