diff --git a/msgfmt:extract/extract.js b/msgfmt:extract/extract.js
index b8670f2..08054e2 100644
--- a/msgfmt:extract/extract.js
+++ b/msgfmt:extract/extract.js
@@ -41,7 +41,7 @@ var checkForUpdates = function(m, force) {
 
   var walker  = walk.walk(relUp, {
     followLinks: false,
-    filters: [ 
+    filters: [
       /\/\.[^\.]+\//  // skip .directories (hidden)
     ]
   });
@@ -211,7 +211,7 @@ var boundCheck = Meteor.bindEnvironment(checkForUpdates);
 
 // https://github.com/meteor/meteor/pull/3704/files
 process.on('SIGUSR2', boundCheck);  // Meteor < 1.0.4
-process.on('SIGHUP', boundCheck);   // Meteor >= 1.0.4 
+process.on('SIGHUP', boundCheck);   // Meteor >= 1.0.4
 process.on('message', boundCheck);  // Meteor >= 1.0.4
 
 // No reason to block startup, we can do update gradually asyncronously
@@ -238,7 +238,7 @@ Meteor.startup(function() {
   });
 
   checkForUpdates();
-});
+});  
 
 /* handler helpers */
 
@@ -254,7 +254,7 @@ var lastFile = null;
 function logKey(file, key, text, file, line, strings) {
   if (strings[key] && strings[key].text != text)
     log.warn('{ ' + key + ': "' + text + '" } in '
-      + file + ':' + line + ' replaces DUP_KEY\n         { '
+      + file + ':' + line + ' replaces DUP_KEY { '
       + key + ': "' + strings[key].text + '" } in '
       + strings[key].file + ':' + strings[key].line);
 
@@ -266,7 +266,11 @@ function logKey(file, key, text, file, line, strings) {
     log.trace(file);
   }
 
-  log.trace('* ' + key + ': "' + text.replace(/\s+/g, ' ') + '"');
+  log.trace('* ' + key + ': "' + (text ? text.replace(/\s+/g, ' ') : "NO TEXT") + '"');
+}
+
+function checkText(text, key) {
+  return (text == null || text == '' || text == "''" || text == '"') ? ("<" + key + ">" ) : text;
 }
 
 /* handlers */
@@ -278,12 +282,13 @@ handlers.html = function(file, data, mtime, strings) {
   var result, re;
 
   // {{mf "key" 'text' attr1=val1 attr2=val2 etc}}
-  re = /{{[\s]?mf (['"])(.*?)\1 ?(["'])(.*?)\3(.*?)}}/g;
+  re = /\{\{[\s]?mf ['"](.*?)['"] ?(["'](.*?)['"])?(.*?)\}\}/g;
   while (result = re.exec(data)) {
-    var key = result[2], text = result[4], attributes = attrDict(result[5]);
+    var key = result[1], text = result[3], attributes = attrDict(result[4]);
     var tpl = /<template .*name=(['"])(.*?)\1.*?>[\s\S]*?$/
         .exec(data.substring(0, result.index)); // TODO, optimize
     var line = data.substring(0, result.index).split('\n').length;
+    text = checkText(text, key);
     logKey(file, key, text, file, line, strings);
     strings[key] = {
       key: key,
@@ -302,6 +307,7 @@ handlers.html = function(file, data, mtime, strings) {
     var tpl = /<template .*name=(['"])(.*?)\1.*?>[\s\S]*?$/
       .exec(data.substring(0, result.index)); // TODO, optimize
     var line = data.substring(0, result.index).split('\n').length;
+    text = checkText(text, key);
     logKey(file, key, text, file, line, strings);
     strings[key] = {
       key: key,
@@ -325,6 +331,7 @@ handlers.jade = function(file, data, mtime, strings) {
     var tpl = /[\s\S]*template\s*\(\s*name\s*=\s*(['"])(.*?)\1\s*\)[\s\S]*?$/
         .exec(data.substring(0, result.index)); // TODO, optimize
     var line = data.substring(0, result.index).split('\n').length;
+    text = checkText(text, key);
     logKey(file, key, text, file, line, strings);
     strings[key] = {
       key: key,
@@ -343,6 +350,7 @@ handlers.jade = function(file, data, mtime, strings) {
     var tpl = /[\s\S]*template\s*\(\s*name\s*=\s*(['"])([^\1]+?)\1\s*\)[\s\S]*?$/
         .exec(data.substring(0, result.index)); // TODO, optimize
     var line = data.substring(0, result.index).split('\n').length;
+    text = checkText(text, key);
     logKey(file, key, text, file, line, strings);
     strings[key] = {
       key: key,
@@ -371,6 +379,7 @@ handlers.js = function(file, data, mtime, strings) {
     var func = /[\s\S]*\n*(.*?function.*?\([\s\S]*?\))[\s\S]*?$/
       .exec(data.substring(0, result.index));
     var line = data.substring(0, result.index).split('\n').length;
+    text = checkText(text, key);
     logKey(file, key, text, file, line, strings);
     strings[key] = {
       key: key,
@@ -401,6 +410,7 @@ handlers.coffee = function(file, data, mtime, strings) {
     }
 
     var line = data.substring(0, result.index).split('\n').length;
+    text = checkText(text, key);
     logKey(file, key, text, file, line, strings);
     strings[key] = {
       key: key,
diff --git a/msgfmt:ui/README.md b/msgfmt:ui/README.md
index 08bbaf8..3ac76cb 100644
--- a/msgfmt:ui/README.md
+++ b/msgfmt:ui/README.md
@@ -1,2 +1,77 @@
 ## msgfmt:ui
 
+# Configuration
+
+In order to support following popular routers, please insert following minimal configuration to your application.
+Configuration of security is left with you.
+
+# Iron Router
+
+Register router
+
+```javascript
+mfPkg.router = Router;
+```
+
+Register routes
+
+```javascript
+Router.map(function() {
+  // Main translation page, summary of all language data
+  this.route('mfTrans', {
+    path: '/translate',
+    waitOn: function() {
+      return Meteor.subscribe('mfStats');
+    },
+  });
+
+  // Modify translations for a particular language
+  this.route('mfTransLang', {
+    path: '/translate/:lang',
+    waitOn: function() {
+      Session.set("translationLanguage", this.params.lang);
+      // Note, this is in ADDITION to the regular mfStrings sub
+      return [
+        Meteor.subscribe('mfStrings', [mfPkg.native, this.params.lang], 0, true),
+        Meteor.subscribe('mfRevisions', this.params.lang, 10)
+      ];
+    }
+  });
+});
+```
+
+# Flow Router
+
+Register router
+
+```javascript
+mfPkg.router = FlowRouter;
+```
+
+Register routes
+
+
+```javascript
+FlowRouter.route("/translate/:lang", {
+  action: function(params) {
+    // hack to pass data to the temaplate
+    Session.set("translationLanguage", params.lang);
+    FlowLayout.render("BasicLayout", {main: "mfTransLang"});
+  },
+  subscriptions: function(params) {
+    this.register('strings', Meteor.subscribe('mfStrings', [mfPkg.native, params.lang], 0, true));
+    this.register('revisions', Meteor.subscribe('mfRevisions', params.lang, 10));
+  }
+});
+
+FlowRouter.route("/translate/", {
+  action: function(params) {
+    // hack to pass data to the temaplate
+    Session.set("translationLanguage", params.lang);
+    FlowLayout.render("BasicLayout", { main: "mfTrans"});
+  },
+  subscriptions: function(params) {
+    this.register('stats', Meteor.subscribe('mfStats'));
+  }
+});
+```
\ No newline at end of file
diff --git a/msgfmt:ui/lib/client.js b/msgfmt:ui/lib/client.js
index 6e18cad..f59bd9d 100644
--- a/msgfmt:ui/lib/client.js
+++ b/msgfmt:ui/lib/client.js
@@ -3,18 +3,18 @@
 // Setup in msgfmt:core on server, only used on the client in msgfmt:ui
 mfPkg.mfRevisions = new Mongo.Collection('mfRevisions');
 
-/*
- * Finds the name of the first route using the given template
- */
-function routeNameFromTemplate(name) {
-  var route = _.find(Router.routes, function(route) {
-    if (route.options.template)
-      return route.options.template == name;
-    else
-      return route.name == name;
-  });
-  return route && route.name;
-}
+// /*
+//  * Finds the name of the first route using the given template
+//  */
+// function routeNameFromTemplate(name) {
+//   var route = _.find(Router.routes, function(route) {
+//     if (route.options.template)
+//       return route.options.template == name;
+//     else
+//       return route.name == name;
+//   });
+//   return route && route.name;
+// }
 
 /*
  * After user presses ctrl up-down, if the newly highlighted row
@@ -76,98 +76,130 @@ function saveChange(lang, key, text) {
  * Called everytime the current key is changed (ctrl up/down or click)
  */
 function changeKey(newKey) {
-  var destLang = Session.get('mfTransTrans');
-  var oldKey = Session.get('mfTransKey');
-  if (oldKey == newKey) return;
+  Session.set('mfTransKey', newKey);
+  // wait for re-render and focus the new control
+  Meteor.setTimeout(function() { $('.transInput').focus(), 200 });
+}
 
-  saveChange(destLang, oldKey, $('#mfTransDest').val());
+//////////////////////////////////////
+// Template Language list
 
-  // Temporary, need to turn off preserve
-  var str = mfPkg.mfStrings.findOne({
-    key: newKey, lang: destLang
-  });
-  $('#mfTransDest').val(str ? str.text : '');
+Template.mfTrans.onCreated(function() {
+  this.data.native = mfPkg.native;
+});
 
-  Session.set('mfTransKey', newKey);
-  $('#mfTransDest').focus();
-}
+Template.mfTrans.helpers({
+  strings: function() {
+    return mfPkg.mfStrings.find();
+  }, 
+  stats: function() {
+    return mfPkg.mfMeta.findOne({_id: '__stats'});
+  } 
+})
 
-if (Package['iron:router'])
-Package['iron:router'].Router.map(function() {
-  // Main translation page, summary of all language data
-  this.route('mfTrans', {
-    path: '/translate',
-    waitOn: function() {
-      return Meteor.subscribe('mfStats');
-    },
-    data: function() {
-      var data = {};
-      data.strings = mfPkg.mfStrings.find();
-      data.stats = mfPkg.mfMeta.findOne({_id: '__stats'});
-      data.native = mfPkg.native;
-      return data;
+Template.mfTrans.events({
+  'click #mfTransNewSubmit': function() {
+    var url = '/translate/' + $('#mfTransNewText').val();
+    if (mfPkg.router) {
+      mfPkg.router.go(url);
+    } else {
+      window.location = '/translate/' + $('#mfTransNewText').val();
     }
-  });
+  },
+  'click #mfAllJs': function(event, tpl) {
+    // Make sure we have no conflicts with iron-router
+    // Not really sure why this is necessary; TODO, investigate
+    event.preventDefault();
+    event.stopPropagation();
+    window.location = '/translate/mfAll.js';
+  }
+});
 
-  // Modify translations for a particular language
-  this.route('mfTransLang', {
-    path: '/translate/:lang',
-    waitOn: function() {
-      // Note, this is in ADDITION to the regular mfStrings sub
-      return Meteor.subscribe('mfStrings',
-        [mfPkg.native, this.params.lang], 0, true);
-    },
-    onBeforeAction: function() {
-      if (!mfPkg.webUI.allowed.call(this) || mfPkg.webUI.denied.call(this)) {
-        this.render('mfTransLangDenied');
-      } else {
-        // Temporary, only used to override preserve on dest
-        Session.set('mfTransTrans', this.params.lang);
+/////////////////////////////////
+// Template Language translation
+
+Template.mfTransLang.onCreated(function () {
+  this.data.strings = {};
+  this.data.orig = mfPkg.native;
+  this.data.trans = Session.get("translationLanguage");
+});
+
+Template.mfTransLang.events({
+  'click #mfTransLang tr': function(event) {
+    var tr = $(event.target).parents('tr');
+    var key = tr.data('key');
+    if (key) changeKey(key, null);
+
+  },
+  'click #translationShowKey': function(event) {
+    Session.set('translationShowKey', event.currentTarget.checked);
+  },
+  'click .translationSort': function(event) {
+    Session.set('translationSortField', event.currentTarget.attributes['data-sortField'].value);
+  },
+  'change .transInput': function(event) {
+    var destLang = Template.currentData().trans;
+    var key = Session.get('mfTransKey');
+
+    saveChange(destLang, key, $(event.currentTarget).val());
+  },
+  'keydown .transInput': function(event) {
+    // if enter is pressed we possibly switch to textarea
+    if (event.keyCode == 13 && $(event.currentTarget).val().indexOf('\n') == -1) {
+      var destLang = Template.currentData().trans;
+      var key = Session.get('mfTransKey');
 
-        // Handle ctrl-up/ctrl-down, respectively
-        $(window).on('keydown.mfTrans', function(event) {
-          if (event.ctrlKey && (event.which == 38 || event.which == 40)) {
-            event.preventDefault(); event.stopPropagation();
-            var tr = event.which == 38
-              ? $('#mfTransLang tr.current').prev()
-              : $('#mfTransLang tr.current').next();
-            if (tr.length) {
-              changeKey(tr.data('key'));
-              mfCheckScroll(tr);
-            }
-          }
-        });
+      saveChange(destLang, key, $(event.currentTarget).val() + "\n");
+    } 
+    // if tab was pressed we save the current one and move to next input
+    else if (event.keyCode == 9) {
+      
+      event.preventDefault();
+      var destLang = Template.currentData().trans;
+      var key = Session.get('mfTransKey');
+      
+      saveChange(destLang, key, $(event.currentTarget).val());
 
-        this.subscribe('mfRevisions', this.params.lang, 10);
-        this.next();
+      var tr;
+
+      if (event.shiftKey) {
+        tr = $(event.target).parents('tr').prev();
+      } else {
+        tr = $(event.target).parents('tr').next();
+      }
+      if (tr) {
+        var key = tr.data('key');
+        if (key) changeKey(key, null);
       }
-    },
-    onStop: function() {
-      $(window).off('keydown.mfTrans');
-    },
-    data: function() {
-      var data = { strings: {} };
-      var strings, out = {};
-      data.orig = mfPkg.native;
-      data.trans = this.params.lang;
+      return false;
+    }
+  }
+});
 
-      // summarise matching keys (orig + trans) to a single record
-      strings = mfPkg.mfStrings.find({
-        $and: [{$or: [{lang: data.orig}, {lang: this.params.lang}]},
+Template.mfTransLang.helpers({
+  strings: function() {
+    // summarise matching keys (orig + trans) to a single record
+      var self = this;
+      var strings = mfPkg.mfStrings.find({
+        $and: [{$or: [{lang: self.orig}, {lang: self.trans}]},
           {removed: undefined}]
       }).fetch();
+      
+      if (!strings) return;
+      
+      var out = {};
       _.each(strings, function(str) {
         if (!out[str.key])
           out[str.key] = { key: str.key };
-        if (str.lang == data.orig)
+        if (str.lang == self.orig)
           out[str.key].orig = str.text;
         else
           out[str.key].trans = str.text;
         if (str.fuzzy)
           out[str.key].fuzzy = true;
       });
-      data.strings = _.values(out);
-      data.strings.sort(function(a, b) {
+      strings = _.values(out);
+      strings.sort(function(a, b) {
         if (!a.trans && b.trans)
           return -1;
         else if (a.trans && !b.trans)
@@ -180,34 +212,24 @@ Package['iron:router'].Router.map(function() {
 
         return a.text - b.text;
       });
-
-      return data;
+      
+      return strings;
+  },
+  sortedStrings: function(strings) {
+    var sortField = Session.get('translationSortField');
+    if (!sortField) {
+      Session.set('translationSortField', 'orig');
     }
-  });
-});
-
-Template.mfTrans.events({
-  'click #mfTransNewSubmit': function() {
-    Router.go('/translate/' + $('#mfTransNewText').val());
+    return strings.sort(function(a, b) {
+      return a[sortField] > b[sortField] ? 1 : (a[sortField] < b[sortField] ? -1 : 0);
+    });
+  },
+  showKey: function() {
+    return Session.get('translationShowKey');
+  },
+  hasMoreRows: function() {
+    return this.trans.indexOf('\n') > -1;
   },
-  'click #mfAllJs': function(event, tpl) {
-    // Make sure we have no conflicts with iron-router
-    // Not really sure why this is necessary; TODO, investigate
-    event.preventDefault();
-    event.stopPropagation();
-    window.location = '/translate/mfAll.js';
-  }
-});
-
-Template.mfTransLang.events({
-  'click #mfTransLang tr': function(event) {
-    var tr = $(event.target).parents('tr');
-    var key = tr.data('key');
-    if (key) changeKey(key);
-  }
-});
-
-Template.mfTransLang.helpers({
   stateClass: function() {
     if (this.fuzzy)
       return 'fuzzy';
@@ -239,11 +261,11 @@ Template.mfTransLang.helpers({
       key: Session.get('mfTransKey'),
       lang: this.orig
     });
-    if (str && str.template) {
-      var routeName = routeNameFromTemplate(str.template);
-      if (routeName)
-        str.routeUrl = Router.path(routeName);
-    }
+    // if (str && str.template) {
+    //   var routeName = routeNameFromTemplate(str.template);
+    //   if (routeName)
+    //     str.routeUrl = Router.path(routeName);
+    // }
     return str || {};
   }
 });
@@ -253,8 +275,6 @@ var initialRender = _.once(function() {
     tr = $('#mfTransLang tr[data-key="'+key+'"]');
   if (tr.length)
     $('#mfTransPreview .tbodyScroll').scrollTop(tr.position().top);
-
-  $('#mfTransDest').focus();
 });
 
 Template.mfTransLang.rendered = function() {
@@ -266,7 +286,5 @@ Template.mfTransLang.rendered = function() {
     Session.set('mfTransKey', key);
   }
 
-  var transDest = $('#mfTransDest');
-  if (typeof transDest.tabOverride === 'function') transDest.tabOverride();
   initialRender();
 };
diff --git a/msgfmt:ui/lib/common.js b/msgfmt:ui/lib/common.js
index 78db9cc..41f4875 100644
--- a/msgfmt:ui/lib/common.js
+++ b/msgfmt:ui/lib/common.js
@@ -39,25 +39,24 @@ if (Meteor.isServer) {
   mfPkg.mfRevisions.deny({insert:mfPkg.webUI.denied, update:mfPkg.webUI.denied, remove:mfPkg.webUI.denied});
 }
 
-// needs to be on client and server for routing to work properly
-if (Package['iron:router'])
-Package['iron:router'].Router.map(function() {
-    this.route('mfAll', {
-        path: '/translate/mfAll.js',
-        where: 'server',
-        action: function() {
-            var out, meta = { exportedAt: new Date().getTime(), updatedAt: 0 };
-            for (lang in mfPkg.strings)
-                for (key in mfPkg.strings[lang])
-                    if (mfPkg.strings[lang][key].mtime > meta.updatedAt)
-                        meta.updatedAt = mfPkg.strings[lang][key].mtime;
+// function serve content
 
-            out = 'mfPkg.syncAll('
-                + JSON.stringify(mfPkg.strings, null, 2)
-                + ', ' + JSON.stringify(meta, null, 2) + ');';
-            //this.response.writeHead(200, {'Content-Type': 'application/javascript'});
-            this.response.writeHead(200, {'Content-Disposition': 'attachment; filename=mfAll.js'});
-            this.response.end(out, 'utf8');
-        }
-    });
-});
+if (Meteor.isServer) {
+  var serve = function (req, response) { 
+  var out, meta = { exportedAt: new Date().getTime(), updatedAt: 0 };
+  for (lang in mfPkg.strings)
+      for (key in mfPkg.strings[lang])
+          if (mfPkg.strings[lang][key].mtime > meta.updatedAt)
+              meta.updatedAt = mfPkg.strings[lang][key].mtime;
+
+  out = 'mfPkg.syncAll('
+      + JSON.stringify(mfPkg.strings, null, 2)
+      + ', ' + JSON.stringify(meta, null, 2) + ');';
+  //this.response.writeHead(200, {'Content-Type': 'application/javascript'});
+  response.writeHead(200, {'Content-Disposition': 'attachment; filename=mfAll.js'});
+  response.end(out, 'utf8');
+  }
+  
+  // declare route from which we are serving the js file
+  WebApp.connectHandlers.use('/translate/mfAll.js', serve);
+}
diff --git a/msgfmt:ui/lib/ui.css b/msgfmt:ui/lib/ui.css
index 2ce98ab..633ac4f 100644
--- a/msgfmt:ui/lib/ui.css
+++ b/msgfmt:ui/lib/ui.css
@@ -42,13 +42,16 @@ div.mfTransGraph.untrans { background: #800; border-right: 1px solid black; }
 }
 
 #mfTransPreview .tbodyScroll {
-	overflow: hidden; height: 200px; overflow-y: scroll;
+	overflow: hidden; height: 400px; overflow-y: scroll;
 	border-left: 1px solid black; border-bottom: 1px solid black;
 	position: relative; /* makes jquery scroll stuff easier */
 }
 #mfTransPreview table { width: 100%; table-layout:fixed; border-collapse:separate; background: white; }
 #mfTransPreview table thead tr { background: #ede9e3; }
 #mfTransPreview table thead th { width: 50%; padding: 4px 8px 4px 8px; }
+#mfTransPreview table thead th {
+	border-left: 1px solid black; border-top: 1px solid black; border-bottom: 1px solid black;
+}
 #mfTransPreview table thead th:first-child {
 	border-left: 1px solid black; border-top: 1px solid black; border-bottom: 1px solid black;
 	border-top-left-radius: 5px; 
@@ -78,3 +81,9 @@ div.mfTransGraph.untrans { background: #800; border-right: 1px solid black; }
 	height: 5em; width: 100%;
 	margin-top: 5px;
 }
+
+.transInput {
+	width: 100%;
+	border: 1px #ddd dotted;
+	border-style: dashed;
+}
diff --git a/msgfmt:ui/lib/ui.html b/msgfmt:ui/lib/ui.html
index 7fd6e88..58d8a5b 100644
--- a/msgfmt:ui/lib/ui.html
+++ b/msgfmt:ui/lib/ui.html
@@ -1,7 +1,7 @@
 <template name="mfTrans">
   <div class="container" id="mfTransContainer">
   <h2>{{mf 'mf_site_translations' 'Site Translations'}}</h2>
-  <p>Native language: <b>{{native}}</b> ({{stats.total}} strings)</p>
+  <p>Native language: <a href="/translate/{{native}}"><b>{{native}}</b></a> ({{stats.total}} strings)</p>
 
   {{#if stats.total}}
 
@@ -60,19 +60,20 @@ <h2>{{mf 'mf_site_translations' 'Site Translations'}}</h2>
     <p>For more details see:
     <a href="http://messageformat.meteor.com/">messageformat.meteor.com</a>.
     </p>
-
   {{/if}}
   </div>
 </template>
 
 <template name="mfTransLang">
   <div class="container" id="mfTransLang">
-
     <div id="mfTransPreview">
       <table>
         <thead>
           <tr>
-            <th>Original String ({{orig}})</th>
+            {{#if showKey}}
+              <th><a href="#" class="translationSort" data-sortField="key">Key</a></th>
+            {{/if}}
+            <th><a href="#" class="translationSort" data-sortField="orig">Original String ({{orig}})</a></th>
             <th>Translation ({{trans}})</th>
           </tr>
         </thead>
@@ -80,28 +81,95 @@ <h2>{{mf 'mf_site_translations' 'Site Translations'}}</h2>
       <div class="tbodyScroll">
         <table>
           <tbody>
-          {{#each strings}}
+          {{#each sortedStrings strings}}
             <tr data-key="{{key}}" class="{{stateClass}} {{isCurrent}}">
+              {{#if showKey}}
+                <td>{{key}}</td>
+              {{/if}}
               <td>{{orig}}</td>
-              <td>{{trans}}</td>
+              <td>
+                {{#if isCurrent}}
+                  {{#if hasMoreRows}}
+                    <textarea rows="1" placeholder="{{orig}}" type="text" class="transInput">{{trans}}</textarea>
+                  {{else}}
+                    <input value="{{trans}}" placeholder="{{orig}}" type="text" class="transInput">
+                  {{/if}}
+
+                {{else}}
+                  {{trans}}
+                {{/if}}
+              </td>
             </tr>
           {{/each}}
           </tbody>
         </table>
       </div>
     </div>
-    <p>Use ctrl-up and ctrl-down to quickly change keys</p>
+    <p><input type="checkbox" id="translationShowKey">Show key, Use Tab and Shift+Tab quickly change keys</p>
     <span><b>{{keyInfo.key}}</b> in {{keyInfo.file}}:{{keyInfo.line
       }}{{#if keyInfo.template}} (template
         {{#if keyInfo.routeUrl}}
           <a href="{{keyInfo.routeUrl}}">{{keyInfo.template}}</a
         >{{else}}"{{keyInfo.template}}"{{/if}}){{/if
       }}{{#if keyInfo.func}}; {{keyInfo.func}}{{/if}}
-    </span><br />
-    <textarea id="mfTransOrig" readonly>{{mfTransOrig}}</textarea>
-    <textarea id="mfTransDest">{{mfTransTrans}}</textarea>
+    </span>
+  <p>
+    <a href="/translate">Back to Translation Summary</a>
+  </p>
+  </div>
+</template>
+
+<template name="mfTransLang1">
+{{ debug }}
+  <div class="container" id="mfTransLang">
 
-  <br /><br />
+    <div id="mfTransPreview">
+      <table>
+        <thead>
+          <tr>
+            {{#if showKey}}
+              <th><a href="#" class="translationSort" data-sortField="key">Key</a></th>
+            {{/if}}
+            <th><a href="#" class="translationSort" data-sortField="orig">Original String ({{orig}})</a></th>
+            <th>Translation ({{trans}})</th>
+          </tr>
+        </thead>
+      </table>
+      <div class="tbodyScroll">
+        <table>
+          <tbody>
+          {{#each sortedStrings}}
+            <tr data-key="{{key}}" class="{{stateClass}} {{isCurrent}}">
+              {{#if showKey}}
+                <td>{{key}}</td>
+              {{/if}}
+              <td>{{orig}}</td>
+              <td>
+                {{#if isCurrent}}
+                  {{#if hasMoreRows}}
+                    <textarea rows="1" placeholder="{{orig}}" type="text" class="transInput">{{trans}}</textarea>
+                  {{else}}
+                    <input value="{{trans}}" placeholder="{{orig}}" type="text" class="transInput">
+                  {{/if}}
+
+                {{else}}
+                  {{trans}}
+                {{/if}}
+              </td>
+            </tr>
+          {{/each}}
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <p><input type="checkbox" id="translationShowKey">Show key, Use ctrl-up and ctrl-down to quickly change keys</p>
+    <span><b>{{keyInfo.key}}</b> in {{keyInfo.file}}:{{keyInfo.line
+      }}{{#if keyInfo.template}} (template
+        {{#if keyInfo.routeUrl}}
+          <a href="{{keyInfo.routeUrl}}">{{keyInfo.template}}</a
+        >{{else}}"{{keyInfo.template}}"{{/if}}){{/if
+      }}{{#if keyInfo.func}}; {{keyInfo.func}}{{/if}}
+    </span>
   <p>
     <a href="/translate">Back to Translation Summary</a>
   </p>
@@ -115,4 +183,4 @@ <h2>{{mf 'mf_site_translations' 'Site Translations'}}</h2>
     <h1>{{mf 'access_denied' 'Access Denied'}}</h1>
     <p>{{mf 'login_and_access' 'Please ensure you are logged in and have the relevant access to add/edit translations.'}}</p>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/msgfmt:ui/package.js b/msgfmt:ui/package.js
index 1b9fa48..a8584c9 100644
--- a/msgfmt:ui/package.js
+++ b/msgfmt:ui/package.js
@@ -8,8 +8,8 @@ Package.describe({
 Package.onUse(function (api) {
   api.versionsFrom("METEOR@1.0.1");
   api.use(['templating', 'underscore'], 'client');
-  api.use('iron:router@1.0.0', ['client', 'server']);
   api.use('mongo');
+  api.use(['webapp'], 'server');
   api.use('msgfmt:core@2.0.0-preview.2');
 
   api.addFiles('lib/common.js');