diff --git a/web/js/directimport.js b/web/js/directimport.js
index 82f61507..94e734e8 100755
--- a/web/js/directimport.js
+++ b/web/js/directimport.js
@@ -1,101 +1,128 @@
-$(document).on('data.app', function() {
-  $('#btn-import').prop('disabled', false);
-});
+$(document).on('data.app', function () {
+  $('#btn-import').prop('disabled', false)
+})
 
-$(function() {
-  $('#analyzed').on({
-    click: click_option
-  }, 'ul.dropdown-menu a');
-  $('#analyzed').on({
-    click: click_trash
-  }, 'a.glyphicon-trash');
-});
+$(function () {
+  $('#analyzed').on(
+    {
+      click: clickOption,
+    },
+    'ul.dropdown-menu a'
+  )
+  $('#analyzed').on(
+    {
+      click: click_trash,
+    },
+    'a.glyphicon-trash'
+  )
+})
 
 function click_trash(event) {
-  $(this).closest('li.list-group-item').remove();
-  update_stats();
+  $(this).closest('li.list-group-item').remove()
+  updateStats()
 }
 function do_import() {
-  $('#analyzed').empty();
-  var content = $('textarea[name="content"]').val();
-  var lines = content.split(/[\r\n]+/);
-  for(var i=0; i<lines.length; i++) {
-    var a = import_one_line(lines[i], i);
-    if(!a) continue;
-    $('#analyzed').append('<li class="list-group-item">'+a+'<a class="pull-right glyphicon glyphicon-trash"></a></li>');
+  $('#analyzed').empty()
+  const content = $('textarea[name="content"]').val()
+  const lines = content.split(/[\r\n]+/)
+
+  for (let i = 0; i < lines.length; i++) {
+    const cardRow = getCardRowForLine(lines[i], i)
+    if (!cardRow) continue
+    $('#analyzed').append(
+      `<li class="list-group-item">${cardRow}<a class="pull-right glyphicon glyphicon-trash"></a></li>`
+    )
   }
-  update_stats();
+  updateStats()
 }
-function import_one_line(line, lineNumber) {
-    var result = NRDB.fuzzy_search.lookup(line);
-    if(!result) return;
-  var options = result.cards, qty = result.qty;
-  var qty_text = "", qty_int = qty;
-  if(qty == null) {
-    options = $.grep(options, function (card) {
-      return card.type_code == "identity";
-    });
-    qty_int = 1;
-  } else {
-    qty_text = qty+"x ";
-  }
+function getCardRowForLine(line, lineNumber) {
+  const results = NRDB.fuzzy_search.lookup(line)
+  if (!results || (results.cards.length === 0 && results.qty === null)) return
 
-  if(options.length == 0) {
-    if(qty == null) return;
-    return '<i>No match for '+name+'</i>';
-  } else if(options.length == 1) {
-    return '<input type="hidden" name="'+lineNumber+'" value="'+options[0].code+':'+qty_int+'">'
-    +qty_text+'<a class="card" data-code="'+options[0].code+'" href="#">'+options[0].title+' </a>';
+  const { cards, qty } = results
+
+  if (cards.length == 0) {
+    return `<span class="card" href="#">No match for ${line}</span>`
+  } else if (cards.length == 1) {
+    return `<a class="card" data-code="${cards[0].code}" data-qty="${qty}" href="#">${cards[0].title}</a>`
   } else {
-    var text = '<input type="hidden" name="'+lineNumber+'" value="'+options[0].code+':'+qty_int+'">'
-    +qty_text+'<a class="card dropdown-toggle text-warning" data-toggle="dropdown" data-code="'+options[0].code+'" href="#">'+options[0].title+' <span class="caret"></span></a>';
-    text += '<ul class="dropdown-menu">';
-    $.each(options, function (index, option) {
-      text += '<li><a href="#" data-code="'+option.code+'">'+option.title+'</a></li>';
-    });
-    text += '</ul>';
-    return text;
+    return `
+      ${qty}x <a class="card dropdown-toggle text-warning" data-toggle="dropdown" data-code="${
+      cards[0].code
+    }" href="#"><span class="title">${
+      cards[0].title
+    }</span> <span class="caret"></span></a>
+      <ul class="dropdown-menu">
+        ${cards
+          .toSorted((a, b) => {
+            // Keep cards with the same name as the first card at the top
+            const aHasSameTitle = a.title === cards[0].title
+            const bHasSameTitle = b.title === cards[0].title
+
+            if (aHasSameTitle && !bHasSameTitle) return -1
+            if (!aHasSameTitle && bHasSameTitle) return 1
+
+            // If same title, sort by pack release date reversed
+            if (a.title === b.title) {
+              return b.pack.date_release.localCompare(a.pack.date_release)
+            }
+
+            // Else sort by title
+            return a.title.localeCompare(b.title)
+          })
+          .map(
+            (card) =>
+              `<li><a href="#" data-code="${card.code}" data-title="${card.title}">${card.title} (${card.pack.cycle.name})</a></li>`
+          )
+          .join('')}
+      </ul>
+    `
   }
 }
-function click_option(event) {
-  var name = $(this).text();
-  var code = $(this).data('code');
-  var input = $(this).closest('li.list-group-item').find('input[type="hidden"]');
-  input.val(input.val().replace(/^\d+/, code));
-  $(this).closest('li.list-group-item').find('a.card').html(name+' <span class="caret"></span>').data('code', code);
-  update_stats();
+function clickOption() {
+  const name = $(this).data('title')
+  const code = $(this).data('code')
+  const row = $(this).closest('li.list-group-item').find('a.card')
+  row.data('code', code)
+  row.find('.title').text(name)
+  updateStats()
 }
-function update_stats() {
-  var deck = {}, size = 0, types = {};
-  $('#analyzed input[type="hidden"]').each(function (index, element) {
-    var card = $(element).val().split(':');
-    var code = card[0], qty = parseInt(card[1], 10);
-    deck[code] = qty;
-    var record = NRDB.data.cards.findById(code);
-    types[record.type.name] = types[record.type.name] || 0;
-    types[record.type.name] += qty;
-  });
-  var html = '';
-  $.each(types, function (key, value) {
-    if(key != "Identity") {
-      size+=value;
-      html += value+' '+key+'s.<br>';
+
+function updateStats() {
+  let deckSize = 0
+  const types = {}
+  $('#analyzed .card').each(function (_, element) {
+    const card = $(element)
+    const code = card.data('code')
+    const qty = parseInt(card.data('qty'), 10)
+    const record = NRDB.data.cards.findById(code)
+    types[record.type.name] = types[record.type.name] ?? 0 + qty
+  })
+
+  let html = ''
+  for (const [type, amount] of Object.entries(types)) {
+    if (type !== 'Identity') {
+      deckSize += amount
+      html += `
+        <div>${amount} ${type}s</div>
+      `
     }
-  });
-  html = size+' Cards.<br>'+html;
-  $('#stats').html(html);
-  if($('#analyzed li').length > 0) {
-    $('#btn-save').prop('disabled', false);
+  }
+  html = `<div><strong>${deckSize} Cards.</strong></div>${html}`
+  $('#stats').html(html)
+  if ($('#analyzed li').length > 0) {
+    $('#btn-save').prop('disabled', false)
   } else {
-    $('#btn-save').prop('disabled', true);
+    $('#btn-save').prop('disabled', true)
   }
 }
 function do_save() {
-  var deck = {};
-  $('#analyzed input[type="hidden"]').each(function (index, element) {
-    var card = $(element).val().split(':');
-    var code = card[0], qty = parseInt(card[1], 10);
-    deck[code] = qty;
-  });
-  $('input[name="content"]').val(JSON.stringify(deck));
+  const deck = {}
+  $('#analyzed .card').each(function (_, element) {
+    const card = $(element)
+    const code = card.data('code')
+    const qty = parseInt(card.data('qty'), 10)
+    deck[code] = qty
+  })
+  $('input[name="content"]').val(JSON.stringify(deck))
 }