diff --git a/frontend/src/app/edit/edit.component.html b/frontend/src/app/edit/edit.component.html
index 59280322..8b094f69 100644
--- a/frontend/src/app/edit/edit.component.html
+++ b/frontend/src/app/edit/edit.component.html
@@ -377,8 +377,13 @@ <h4 *ngIf="sideBarTab" class="sidebarHeaderText">History</h4>
             alt=""
             (click)="expandSnapshot(obj, $event)"
           />
-          <p>{{ obj.LastModified }}</p>
-          <!-- <p>{{obj.LastModifiedString}}</p> -->
+          <img
+            class="snapshotIcon"
+            src="assets/Icons/editIcons/snapshot.png"
+            alt=""
+          />
+          <!-- <p>{{ obj.LastModified }}</p> -->
+          <p>{{obj.LastModifiedString}}</p>
           <img
             class="historyIcon"
             src="assets/Icons/editIcons/ellipse.svg"
@@ -392,9 +397,14 @@ <h4 *ngIf="sideBarTab" class="sidebarHeaderText">History</h4>
             [ngClass]="{ selectedHistory: diffObj.isCurrent }"
             (click)="insertContent(diffObj)"
           >
+            <img
+              class="snapshotIcon"
+              src="assets/Icons/editIcons/diffArrow.png"
+              alt=""
+            />
             <!-- <p>{{ diffObj.Name }}</p> -->
-            <!-- <p>{{ diffObj.LastModifiedString }}</p> -->
-            <p>{{ diffObj.LastModified }}</p>
+            <p>{{ diffObj.LastModifiedString }}</p>
+            <!-- <p>{{ diffObj.LastModified }}</p> -->
             <img
               class="historyIcon"
               src="assets/Icons/editIcons/ellipse.svg"
diff --git a/frontend/src/app/edit/edit.component.scss b/frontend/src/app/edit/edit.component.scss
index 291b5812..c8aef93c 100644
--- a/frontend/src/app/edit/edit.component.scss
+++ b/frontend/src/app/edit/edit.component.scss
@@ -740,7 +740,7 @@ Preserve the relative scale, though. */
 .historyObject {
     transition: 0.2s;
     display: grid;
-    grid-template-columns: 0.5fr 4fr 0.5fr;
+    grid-template-columns: 0.5fr 0.5fr 3.5fr 0.5fr;
     justify-content: space-around;
     width: $sidebar-content-width;
     border-radius: 8px;
@@ -765,7 +765,7 @@ Preserve the relative scale, though. */
 
 .diffObject{
     margin-left: 20px;
-    grid-template-columns: 2fr 0.5fr;
+    grid-template-columns:0.5fr 2fr 0.5fr;
 }
 
 .selectedHistory {
@@ -776,7 +776,8 @@ Preserve the relative scale, though. */
     background-color: #dfd;
 }
 
-.historyIcon {
+.historyIcon,
+.snapshotIcon {
     margin: 0;
     margin: auto 0;
     width: 30px;
diff --git a/frontend/src/app/edit/edit.component.ts b/frontend/src/app/edit/edit.component.ts
index 241dca60..142f4f4f 100644
--- a/frontend/src/app/edit/edit.component.ts
+++ b/frontend/src/app/edit/edit.component.ts
@@ -658,14 +658,19 @@ export class EditComponent implements AfterViewInit, OnInit {
         );
 
         let diffNumber = 0;
+        let currentSnapshot = new SnapshotDTO();
+        currentSnapshot.ChildDiffs = [];
         for (let i = 0; i < diff.length; i++) {
           if (!diff[i].HasSnapshot) {
             diff[i].LastModifiedString = this.formatDate(diff[i].LastModified);
             diff[i].VersionNumber = ++diffNumber;
             diff[i].Name = 'Diff ' + diff[i].VersionNumber;
-            this.history.push(diff[i]);
+            currentSnapshot.ChildDiffs.push(diff[i]);
           }
         }
+        currentSnapshot.Name = 'Latest';
+        currentSnapshot.LastModifiedString = 'now';
+        this.history.push(currentSnapshot);
         snapshot.forEach((a) => this.history.push(a));
 
         console.log(this.history);
@@ -754,16 +759,22 @@ export class EditComponent implements AfterViewInit, OnInit {
   }
 
   formatDate(dateString: Date): string {
-    if (!dateString) {
-      return dateString; // Return the input string as-is if it's empty or null.
-    }
-
+    const months = [
+      'January', 'February', 'March', 'April', 'May', 'June',
+      'July', 'August', 'September', 'October', 'November', 'December'
+    ];
+    if(!dateString) return '';
     const date = new Date(dateString);
-    const year = date.getFullYear().toString();
-    const month = (date.getMonth() + 1).toString().padStart(2, '0');
-    const day = date.getDate().toString().padStart(2, '0');
 
-    return `${year}-${month}-${day}`;
+    const dd = String(date.getDate()).padStart(2, '0');
+    const mm = date.getMonth() ; // January is 0!
+    const yyyy = date.getFullYear();
+
+    const hh = String(date.getHours()).padStart(2, '0');
+    const min = String(date.getMinutes()).padStart(2, '0');
+    const ss = String(date.getSeconds()).padStart(2, '0');
+
+    return `${dd} ${months[mm]}, ${hh}:${min}:${ss}`;
   }
 
   enableReadOnly() {
@@ -775,15 +786,17 @@ export class EditComponent implements AfterViewInit, OnInit {
   }
 
   insertContent(obj: any) {
-    this.deselectAllHistory();
-    obj.isCurrent = true;
-    if (obj.SnapshotID === 'LATEST') {
-      this.disableReadOnly();
-      this.editor.setData(obj.Content);
-      return;
-    }
-    this.enableReadOnly();
-    this.editor.setData(obj.Content);
+
+    console.log("Just clicked on: " , obj);
+    // this.deselectAllHistory();
+    // obj.isCurrent = true;
+    // if (obj.SnapshotID === 'LATEST') {
+    //   this.disableReadOnly();
+    //   this.editor.setData(obj.Content);
+    //   return;
+    // }
+    // this.enableReadOnly();
+    // this.editor.setData(obj.Content);
   }
 
   deselectAllHistory() {
@@ -804,5 +817,20 @@ export class EditComponent implements AfterViewInit, OnInit {
     arrowElement.classList.toggle('expanded');
 
     event.stopPropagation();
+
+    //retrieve all diff content and previous snapshot content
+    this.versioningApiService.loadHistorySet(this.editService.getMarkdownID() as string, snapshot.ChildDiffs, snapshot.snapshotID).then((data) => {
+      if(data !== null){
+        console.log("Process diff data.");
+      }
+      else {
+        this.messageService.add({
+          severity: 'error',
+          summary: 'Error',
+          detail: 'Error retrieving history set',
+        });
+        return;
+      }
+    });
   }
 }