diff --git a/apps/web/package.json b/apps/web/package.json
index 6ea2fba779b7b5cc0e5cf492090e04ae65463df6..f4c172c7ad4a95e4fb3cb1cec788445362f1b6b3 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -22,6 +22,7 @@
     "@ng-bootstrap/ng-bootstrap": "^4.2.1",
     "bootstrap": "^4.3.1",
     "core-js": "^2.5.4",
+    "dayjs": "^1.10.6",
     "jquery": "^3.4.1",
     "ng-angular": "0.0.1",
     "ng-bootstrap": "^0.46.0",
@@ -37,7 +38,7 @@
     "@angular/language-service": "~11.1.1",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~8.9.4",
+    "@types/node": "^8.10.66",
     "@typescript-eslint/eslint-plugin": "^4.21.0",
     "@typescript-eslint/parser": "^4.21.0",
     "codelyzer": "^5.0.1",
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html b/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html
index 8ff2030b154451449c3cdd728b57b75df0b3f7e2..0751ab9225d74be0042253804209f21a9a106717 100644
--- a/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html
+++ b/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html
@@ -16,16 +16,18 @@
     </h5>
   </div>
 
-  <div id="created-and-updated-timestamps" class="row px-5">
-    <div class="col text-left p-2">
-      <h5 id="created-time" class="timestamp">
-        Created <strong>{{ capabilityRequest.created_at | date: "medium" }}</strong>
-      </h5>
+  <div id="created-and-updated-timestamps" class="row px-5 justify-content-between">
+    <div class="col-4 text-left p-2">
+      <ng-template class="timestamp" #createdAtToolTip>{{capabilityRequest.created_at | date: "medium"}}</ng-template>
+      <span id="created-time" class="timestamp" placement="top" [ngbTooltip]="createdAtToolTip">
+        Created <strong>{{ createdAt }}</strong>
+      </span>
     </div>
-    <div class="col text-right p-2">
-      <h5 id="last-updated-time" class="timestamp">
-        Last Updated <strong>{{ capabilityRequest.updated_at | date: "medium" }}</strong>
-      </h5>
+    <div class="col-4 text-right p-2">
+      <ng-template class="timestamp" #updatedAtToolTip>{{capabilityRequest.updated_at | date: "medium"}}</ng-template>
+      <span id="last-updated-time" class="timestamp" placement="top" [ngbTooltip]="updatedAtToolTip">
+        {{ capabilityRequest.state.toUpperCase() === 'COMPLETE' ? 'Completed' : 'Last Updated' }} <strong>{{ updatedAt }}</strong>
+      </span>
     </div>
   </div>
 </div>
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.ts b/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.ts
index d1c53430566e47885ad4bbb3667fe63fe25f520f..7b08917da15ee64b2e927b8c9e228e16069b5b04 100644
--- a/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.ts
+++ b/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.ts
@@ -1,6 +1,8 @@
 import { Component, Input, OnInit } from "@angular/core";
 import { CapabilityRequest } from "../../../../model/capability-request";
-
+import * as dayjs from 'dayjs';
+import * as relativeTime from 'dayjs/plugin/relativeTime';
+import * as localizedFormat from 'dayjs/plugin/localizedFormat';
 @Component({
   selector: "app-request-header",
   templateUrl: "./request-header.component.html",
@@ -8,8 +10,28 @@ import { CapabilityRequest } from "../../../../model/capability-request";
 })
 export class RequestHeaderComponent implements OnInit {
   @Input() capabilityRequest: CapabilityRequest;
+  createdAt;
+  updatedAt;
 
   constructor() {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.createdAt = this.formatDate(this.capabilityRequest.created_at)
+    this.updatedAt = this.formatDate(this.capabilityRequest.updated_at)
+  }
+
+  private formatDate(date): string {
+    dayjs.extend(relativeTime)
+    dayjs.extend(localizedFormat)
+
+    var dateFromNow = dayjs(date).fromNow()
+    var afterOneWeekDisplay = dateFromNow + " on " + dayjs(date).format('llll');
+    return this.isOlderThanOneWeek(date) ? afterOneWeekDisplay : dateFromNow;
+  }
+
+  private isOlderThanOneWeek(date): boolean {
+    const now = dayjs();
+    date = dayjs(date)
+    return now.diff(date, "week") ? true : false
+  }
 }
diff --git a/apps/web/src/app/workspaces/workspaces.module.ts b/apps/web/src/app/workspaces/workspaces.module.ts
index f3256d770f422e664f9301a0c4fc60e563a6d231..ad036780086b8a84429e60535e57e5885c9558c8 100644
--- a/apps/web/src/app/workspaces/workspaces.module.ts
+++ b/apps/web/src/app/workspaces/workspaces.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
 import { WorkspacesRoutingModule } from "./workspaces-routing.module";
 import { WorkspacesComponent } from "./workspaces.component";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
@@ -28,6 +29,6 @@ import { RequestOperationsComponent } from "./components/capability-request/comp
     FilesComponent,
     RequestOperationsComponent,
   ],
-  imports: [CommonModule, WorkspacesRoutingModule, ReactiveFormsModule, FormsModule],
+  imports: [CommonModule, NgbModule, WorkspacesRoutingModule, ReactiveFormsModule, FormsModule],
 })
 export class WorkspacesModule {}