diff --git a/static/js/file_reader.js b/static/js/file_reader.js
index 0e7c796..cb0126d 100644
--- a/static/js/file_reader.js
+++ b/static/js/file_reader.js
@@ -1,16 +1,21 @@
-function fileInputHanlder() {
-    console.log("WIN");
-    var file = document.getElementById("fileUpload").files[0];
-    if (file) {
-        var reader = new FileReader();
-        reader.readAsText(file, "UTF-8");
-        reader.onload = function (evt) {
-            document.getElementById("fileUpload").innerHTML = evt.target.result;
-            console.log( evt.target.result);
-            document.getElementById("textArea").value = evt.target.result
-        };
-        reader.onerror = function (evt) {
-            document.getElementById("fileUpload").innerHTML = "error reading file";
-        };
+function sortByTitle() {
+    var sort_by_title = function (a, b) {
+        let x = a.getElementsByClassName('card-title')[0];
+        let y = b.getElementsByClassName('card-title')[0];
+        console.log(x);
+        return x.innerHTML.toLowerCase().localeCompare(y.innerHTML.toLowerCase());
+    };
+
+    var notes = document.getElementsByClassName("sortable");
+    var notesArr = [];
+    for (const node of notes) {
+        notesArr.push(node);
     }
-}
+    console.log(notesArr);
+    notesArr.sort(sort_by_title);
+    console.log(notesArr);
+    let parent = document.getElementById('sortable-wrapper');
+    for (let elem of notesArr) {
+        parent.appendChild(elem);
+    }
+}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 4d77076..b1ed77e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -14,9 +14,14 @@
 </nav>
 <div class="container-fluid">
     <div class="row">
+        <div class="col">
+            <button class="btn btn-success" onclick="sortByTitle()">Sort By Title</button>
+        </div>
+    </div>
+    <div id="sortable-wrapper" class="row">
         {% for note in notes %}
         {% if note[1] and note[2] %}
-        <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 mb-2">
+        <div class="sortable col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 mb-2">
             <a href="{{host}}/{{note[2]}}">
                 <div class="card" style="width: 18rem;">
                     <div class="card-body">