diff --git a/cinera/cinera.c b/cinera/cinera.c
index dd64cb7..472f146 100644
--- a/cinera/cinera.c
+++ b/cinera/cinera.c
@@ -14,7 +14,7 @@ typedef struct
 version CINERA_APP_VERSION = {
     .Major = 0,
     .Minor = 5,
-    .Patch = 27
+    .Patch = 28
 };
 
 // TODO(matt): Copy in the DB 3 stuff from cinera_working.c
@@ -4373,7 +4373,7 @@ IndexToBuffer(buffers *CollationBuffers) // NOTE(matt): This guy malloc's Collat
         }
 
         int ThemeStringLength = StringsDiffer(Config.Theme, "") ? (StringLength(Config.Theme) * 2) : (StringLength(Config.ProjectID) * 2);
-        char queryContainer[512 + ThemeStringLength];
+        char queryContainer[680 + ThemeStringLength];
         CopyString(queryContainer,
                 "<div class=\"cineraQueryContainer %s\">\n"
                 "            <label for=\"query\">Query:</label>\n"
@@ -4387,7 +4387,9 @@ IndexToBuffer(buffers *CollationBuffers) // NOTE(matt): This guy malloc's Collat
                 "        <div id=\"cineraResultsSummary\">Found: 0 episodes, 0 markers, 0h 0m 0s total.</div>\n"
                 "        <div id=\"cineraResults\"></div>\n"
                 "\n"
-                "        <dl id=\"cineraIndex\" class=\"%s\">\n",
+                "        <div id=\"cineraIndex\" class=\"%s\">\n"
+                "            <div id=\"cineraIndexSort\" data-id=\"chronal\">Sort: Old to New &#9206;</div>\n"
+                "            <div id=\"cineraIndexEntries\">\n",
                 StringsDiffer(Config.Theme, "") ? Config.Theme : Config.ProjectID,
                 StringsDiffer(Config.Theme, "") ? Config.Theme : Config.ProjectID);
 
@@ -4399,8 +4401,10 @@ IndexToBuffer(buffers *CollationBuffers) // NOTE(matt): This guy malloc's Collat
         ClaimBuffer(&PlayerURL, "PlayerURL", 4096);
         ConstructPlayerURL(&PlayerURL, "");
 
-        char Script[512 + StringLength(URLPrefix.Location) + (StringLength(Config.ProjectID) * 2)];
-        CopyString(Script, "        </dl>\n"
+        char Script[532 + StringLength(URLPrefix.Location) + (StringLength(Config.ProjectID) * 2)];
+        CopyString(Script,
+                "            </div>\n"
+                "        </div>\n"
                 "        <script type=\"text/javascript\">\n"
                 "            var projectID = \"%s\";\n"
                 "            var theme = \"%s\";\n"
@@ -4458,8 +4462,8 @@ IndexToBuffer(buffers *CollationBuffers) // NOTE(matt): This guy malloc's Collat
             if(StringsDiffer(ProjectInfo[ProjectIndex].Unit, ""))
             {
                 CopyStringToBuffer(&CollationBuffers->Index,
-                        "            <dt>\n"
-                        "                <a href=\"%s\">", PlayerURL.Location);
+                        "                <div>\n"
+                        "                    <a href=\"%s\">", PlayerURL.Location);
 
                 char Text[1024]; // NOTE(matt): Surely this will be big enough
                 CopyString(Text, "%s %s: %s",
@@ -4471,14 +4475,14 @@ IndexToBuffer(buffers *CollationBuffers) // NOTE(matt): This guy malloc's Collat
 
                 CopyStringToBuffer(&CollationBuffers->Index,
                         "</a>\n"
-                        "            </dt>\n");
+                        "                </div>\n");
             }
             else
             {
                 CopyStringToBuffer(&CollationBuffers->Index,
-                        "            <dt>\n"
-                        "                <a href=\"%s\">%s</a>\n"
-                        "            </dt>\n",
+                        "                <div>\n"
+                        "                    <a href=\"%s\">%s</a>\n"
+                        "                </div>\n",
                         PlayerURL.Location,
                         Title);
             }
diff --git a/cinera/cinera.css b/cinera/cinera.css
index f606ea7..eca11be 100644
--- a/cinera/cinera.css
+++ b/cinera/cinera.css
@@ -40,6 +40,23 @@
     max-width: 800px;
 }
 
+#cineraIndex #cineraIndexSort {
+    margin-bottom: 8px;
+    display: inline-block;
+    padding: 5px;
+    cursor: pointer;
+}
+
+#cineraIndex #cineraIndexEntries {
+    display: flex;
+    flex-flow: column;
+    width: 100%;
+}
+
+#cineraIndex #cineraIndexEntries.sort_reverse {
+    flex-flow: column-reverse;
+}
+
 #cineraResults .dayContainer {
     display: flex;
 }
@@ -55,7 +72,7 @@
     width: 200px;
 }
 
-#cineraIndex dt a {
+#cineraIndexEntries div a {
     display: block;
     padding: 5px;
     text-decoration: none;
diff --git a/cinera/cinera_search.js b/cinera/cinera_search.js
index c6b9387..86ee431 100644
--- a/cinera/cinera_search.js
+++ b/cinera/cinera_search.js
@@ -6,8 +6,26 @@ if (location.hash && location.hash.length > 0) {
     document.getElementById("query").value = decodeURIComponent(initialQuery);
 }
 
-
 var indexContainer = document.getElementById("cineraIndex");
+var indexSort = indexContainer.querySelector("#cineraIndexSort");
+var indexEntries = indexContainer.querySelector("#cineraIndexEntries");
+
+indexSort.addEventListener("click", function(ev) {
+    switch(this.getAttribute("data-id"))
+    {
+        case "chronal":
+            this.setAttribute("data-id", "reverse_chronal");
+            this.firstChild.nodeValue = "Sort: New to Old ⏷"
+            indexEntries.classList.add("sort_reverse");
+            break;
+        case "reverse_chronal":
+            this.setAttribute("data-id", "chronal");
+            this.firstChild.nodeValue = "Sort: Old to New ⏶"
+            indexEntries.classList.remove("sort_reverse");
+            break;
+    }
+})
+
 var lastQuery = null;
 var resultsToRender = [];
 var resultsIndex = 0;