diff --git a/Webpage/index.html b/Webpage/index.html
index 6e49b6c..19f8ec6 100644
--- a/Webpage/index.html
+++ b/Webpage/index.html
@@ -16,7 +16,6 @@
   }
 
   function localSet(key, val){
-
     localStorage.setItem(key, JSON.stringify(val));
   }
 
@@ -28,14 +27,14 @@
   function documentExists(id){
     var docsList = localGet("DOCUMENTS_MANIFEST");
     return docsList.includes(id);
-    // Array#includes seems to be compatible with mobile device browsers
   }
 
   function writeDocument(id, name, paths, undone){
     var obj = {
       name: name,
       paths: paths,
-      undone: undone
+      undone: undone,
+      time: (new Date()).toLocaleString()
     };
 
     localSet(id, obj);
@@ -54,6 +53,10 @@
     window.location.href = window.location.origin + "/?" + id;
   }
 
+  function goBack(){
+     window.location.href = window.location.origin;
+  }
+
 </script>
 
 <script>
@@ -71,12 +74,13 @@
   var sessionId = '';
   var PATH_TIME_MARGIN = 1000;
   var inStroke = false;
+
 /*========================================================================*/
     function updateWritingProgress(saveStatus){
       	var color, message;
       	if(saveStatus){
         	color = "green";
-        	message = "Saved";
+        	message = "Paused";
       	} else {
         	color = "yellow";
         	message = "Writing";
@@ -89,7 +93,7 @@
       	$("#undone").toggle();
     }
 /*========================================================================*/
-  	function draw(context, path, color='black', lineWidth=10){
+  	function draw(context, path, color='black', lineWidth=5){
       console.log("drawing path:");
       console.log(path);
       context.strokeStyle = color;
@@ -111,9 +115,9 @@
       		oy = path.pts[i][1];
       		if(Math.abs(lastX - ox) > NEW_PATH_MARGIN * THUMBNAIL_WIDTH_RATIO || Math.abs(lastY - oy) > NEW_PATH_MARGIN * THUMBNAIL_HEIGHT_RATIO){
               	// context.moveTo(ox,oy);
-            }
-            lastX = ox;
-            lastY = oy;
+          }
+          lastX = ox;
+          lastY = oy;
       		context.lineTo(ox, oy);
       		context.stroke();
           context.moveTo(ox,oy);
@@ -141,11 +145,20 @@
     	return pathChanged;
   	}
 /*========================================================================*/
-  	function addToUndone(path){
+  	function addToUndone(path, keepsize=false){
     	if(typeof path === 'undefined')
         return;
-      undone.push(transformSize(path));
-    	$("#undone").append("<div style='border-style: solid'><canvas height='" + CANVAS_HEIGHT * SCALE + "' width='" + CANVAS_WIDTH * SCALE + "'></canvas></div>");
+      var firstEl = false;
+      var i = 0;
+      while(!firstEl){
+        firstEl = path.pts[i];
+        i++;
+      }
+      if(keepsize)
+        undone.push(path);
+      else
+        undone.push(transformSize(path));
+    	$("#undone").append("<div style='border-style: solid'>" + firstEl[2] + "<canvas height='" + CANVAS_HEIGHT * SCALE + "' width='" + CANVAS_WIDTH * SCALE + "'></canvas></div>");
     	draw($("#undone").children().last().children().first()[0].getContext('2d'), path,  'red', 5);
   	}
 /*========================================================================*/
@@ -187,31 +200,11 @@
     function getSessionName(){
       return $("#docName").val();
     }
-    /*
-    Saving function that will take paths and undone, check if they are empty, and save it on the phone
-    Inorder to access function in android, the name "Android", a varable created in android studio as a identifier between the two codes, must be use.
-    .showToast is a function that will make a pop-up.
 
-    Remove any lines of code that has Android. if testing without an android emulator, and uncomment line 213 to line 226 if testing on browser.
-    */
     function saveNotes(){
       writeDocument(sessionId, getSessionName(), paths, undone);
-      /*
-      var pathCheck = "";
-      
-      for (var i = 0; i < paths.length; i++)
-      {
-        for (var j = 0; j < paths[i].pts.length; j++)
-        {
-          pathCheck += paths[i].pts[j][0];
-          pathCheck += " ";
-          pathCheck += paths[i].pts[j][1];
-          pathCheck += " ";
-        }
-        pathCheck += "\t";
-      }
-      $("#saveChecker").html(pathCheck);*/
     }
+
 /*========================================================================*/
   window.onload = function(){
       checkWindowSetup();
@@ -221,9 +214,10 @@
         var docsList = localGet("DOCUMENTS_MANIFEST");
         for(var i = 0; i < docsList.length; i++){
           var id = docsList[i];
-          $("#menu").append("<a href='/?" + id + "'>" + localGet(id).name + "</a><br>");
+          $("#menu").append("<a href='/?" + id + "'>" + localGet(id).name + "<br>Last edited:" + localGet(id).time + "</a><br>");
         }
       } else {
+        $("#home").show();
         $("#editor").show();
         toggleHistory();
         CANVAS_HEIGHT = window.innerHeight - 80;
@@ -231,65 +225,74 @@
         var inPath = false;
         var lastTouch;
         ctx = Sketch.create({
-            autoclear: false,
-            draw: function() {
-              this.lineCap = 'round';
-                this.lineJoin = 'round';
-                this.fillStyle = this.strokeStyle = "BLACK";
-                this.lineWidth = 10;
-                touch = this.touches[0];
-                if(typeof touch === 'undefined'){
-                  if(inPath && inStroke){
-                    paths[paths.length-1].pts.push(false);
-                  }
-                  inStroke = false;
-                  
-                  if(Date.now() - lastTouch > PATH_TIME_MARGIN && inPath){
-                    inPath = false;
-                    ctx.closePath();
-                    updateWritingProgress(true);
-                  } else {
-                      if(inPath)
-                      updateWritingProgress(false);
-                  }
-                  return;
-                }
-                lastTouch = Date.now();
-                inStroke = true;
-                if(!writingMode){
-                    return;
-                }
-                if(!inPath || paths.length == 0){
-                    ctx.beginPath();
-                    inPath = true;
-                    paths.push({pts:[]})
-                }
-                 
+        autoclear: false,
+        draw: function() {
+          this.lineCap = 'round';
+          this.lineJoin = 'round';
+          this.fillStyle = this.strokeStyle = "BLACK";
+          this.lineWidth = 5;
+          touch = this.touches[0];
+          if(typeof touch === 'undefined'){
+            if(inPath && inStroke){
+              paths[paths.length-1].pts.push(false);
+            }
+            inStroke = false;
+            
+            if(Date.now() - lastTouch > PATH_TIME_MARGIN && inPath){
+              inPath = false;
+              ctx.closePath();
+              updateWritingProgress(true);
+            } else {
+                if(inPath)
                 updateWritingProgress(false);
-                
-                var ox = touch.ox;
-                var oy = touch.oy;
-                this.moveTo( ox, oy );
-                this.lineTo( touch.x, touch.y );
-                paths[paths.length - 1].pts.push([touch.x, touch.y])
-                this.stroke();
             }
-        });
-        paths = localGet(sessionId).paths;
-        for(var i = 0; i < paths.length; i++){
-          draw(ctx, paths[i]);
+            return;
+          }
+          lastTouch = Date.now();
+          inStroke = true;
+          if(!writingMode){
+              return;
+          }
+          if(!inPath || paths.length == 0){
+              ctx.beginPath();
+              inPath = true;
+              paths.push({pts:[]})
+          }
+           
+          updateWritingProgress(false);
+          
+          var ox = touch.ox;
+          var oy = touch.oy;
+          this.moveTo( ox, oy );
+          this.lineTo( touch.x, touch.y );
+          paths[paths.length - 1].pts.push([touch.x, touch.y, (new Date()).toLocaleString()])
+          this.stroke();
         }
-        $('canvas').first().height(CANVAS_HEIGHT).width(CANVAS_WIDTH);
-        $('canvas').first().css('border-style', 'dashed');
+      });
+      paths = localGet(sessionId).paths;
+      for(var i = 0; i < paths.length; i++){
+        draw(ctx, paths[i]);
+      }
+      var _undone = localGet(sessionId).undone;
+      for(var i = 0; i < _undone.length; i++){
+        addToUndone(_undone[i], true);
+      }
+      $('canvas').last().height(CANVAS_HEIGHT).width(CANVAS_WIDTH);
+      $('canvas').last().css('border-style', 'dashed');
     }
   };
 </script>
 </head>
 <body>
-	<div id="spacer" style="height: 100px;">SAVE IT v.2.1325</div>
-  
+  <ul>
+    <li><b>Save It</b></li>
+    <li><a onclick="goBack()">Home</a></li>
+    <li><a onclick="newNote()">New note</a></li>
+  </ul>
+
+  <div id="spacer" style="height: 20px;"></div>
+
   <div id="menu" style="display: none;">
-    <button onclick="newNote()">New note</button>  
     <div id="notesList"></div>
   </div>
   
@@ -307,9 +310,9 @@
     </div>
     <div>
       <button onclick="saveNotes()">SaveNotes</button>
-      <div id="saveChecker" style="height: 100px;">Testing</div>
     </div>
-    <div id="undone" style="position:absolute"></div>
+     <div id="spacer2" style="height: 50px;"></div>
+    <div id="undone" style="position:absolute; background-color: white; width:100%; height:800px;"></div>
   </div>
 </body>
 </html>
diff --git a/Webpage/style.css b/Webpage/style.css
index f9db0c9..10e425a 100644
--- a/Webpage/style.css
+++ b/Webpage/style.css
@@ -1,4 +1,45 @@
 button {
 	height: 50px;
-	width: 100px;
+	width: 20%;
+	float:left;
+	margin-bottom:10px;
 }
+
+.toolbar {
+	width:100%;
+	background-color:red;
+	padding:10px;
+}
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+}
+
+li {
+    float: left;
+}
+li b {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+a:hover:not(.active) {
+    background-color: #111;
+}
+
+.active {
+background-color:#4CAF50;
+}
\ No newline at end of file