diff --git a/app/assets/javascripts/tracks_pages.js b/app/assets/javascripts/tracks_pages.js
index fbd5c0e4..754931b0 100644
--- a/app/assets/javascripts/tracks_pages.js
+++ b/app/assets/javascripts/tracks_pages.js
@@ -193,5 +193,21 @@ var TracksPages = {
 
     /* fade flashes and alerts in automatically */
     $(".alert").fadeOut(8000);
+  }, sort_container: function(container) {
+    function comparator(a, b) {
+        var contentA = $(a).attr('data-sort') || '';
+        var contentB = $(b).attr('data-sort') || '';
+        if (contentA > contentB) {
+            return 1;
+        }
+        if (contentB > contentA) {
+            return -1;
+        }
+        return 0;
+    }
+
+    var unsortedActions = container.children();
+    var sortedChildren = unsortedActions.sort(comparator);
+    container.append(sortedChildren);
   }
 };
diff --git a/app/helpers/todos_helper.rb b/app/helpers/todos_helper.rb
index 1c99fc9b..f54e01e8 100644
--- a/app/helpers/todos_helper.rb
+++ b/app/helpers/todos_helper.rb
@@ -357,6 +357,18 @@ module TodosHelper
     text_field_tag name, value, {"size" => 12, "id" => id, "class" => "Date", "autocomplete" => "off"}.update(options.stringify_keys)
   end
 
+  def sort_key(todo)
+    # actions are sorted using {order("todos.due IS NULL, todos.due ASC, todos.created_at ASC")}
+    # the JavaScript frontend sorts using unicode/ascii
+    format = "%Y%m%d%H%M%S%L"
+    if todo.due?
+      sort_by_due = todo.due.strftime format
+    else
+      sort_by_due = "Z" * 17 # length of format string
+    end
+    sort_by_due + todo.created_at.strftime(format)
+  end
+
   # === helpers for default layout
 
   def default_contexts_for_autocomplete
diff --git a/app/views/todos/_todo.html.erb b/app/views/todos/_todo.html.erb
index 07e8da70..714aee6b 100644
--- a/app/views/todos/_todo.html.erb
+++ b/app/views/todos/_todo.html.erb
@@ -12,7 +12,7 @@ parameters += "&_tag_name=#{@tag_name}" if @source_view == 'tag'
 # also make different caches per source_view to handle difference in showing [C] and [P]
 cache [todo, current_user.date.strftime("%Y%m%d"), @source_view, current_user.prefs.verbose_action_descriptors] do
 %>
-  <div id="<%= dom_id(todo) %>" class="item-container">
+  <div id="<%= dom_id(todo) %>" class="item-container" data-sort="<%= sort_key(todo) %>">
     <div id="<%= dom_id(todo, 'line') %>" class="item-show">
       <%= remote_star_icon(todo) %>
       <%= remote_toggle_checkbox(todo) %>
diff --git a/app/views/todos/create.js.erb b/app/views/todos/create.js.erb
index 2caaa66b..c1a67199 100644
--- a/app/views/todos/create.js.erb
+++ b/app/views/todos/create.js.erb
@@ -49,7 +49,10 @@
 
   function add_todo_to_existing_container(next_steps) {
     $('#<%= empty_container_msg_div_id %>').hide();
-    $('#<%= item_container_id(@todo) %>_items').append(html_for_new_todo());
+    var container = $('#<%= item_container_id(@todo) %>_items');
+    container.append(html_for_new_todo());
+    TracksPages.sort_container(container);
+
     $('#<%= item_container_id(@todo) %>').slideDown(500, function() {
       $('#<%= dom_id(@todo) %>').effect('highlight', {}, 2000 );
       next_steps.go();