diff --git a/ngapp/src/app/core/about-dialog/about-dialog.component.html b/ngapp/src/app/core/about-dialog/about-dialog.component.html
index 94c54881..916a796f 100644
--- a/ngapp/src/app/core/about-dialog/about-dialog.component.html
+++ b/ngapp/src/app/core/about-dialog/about-dialog.component.html
@@ -1,28 +1,3 @@
-<div class="about-modal-pf">
-  <div class="modal-header">
-    <button type="button" class="close" (click)="close()" aria-hidden="true">
-      <span class="pficon pficon-close"></span>
-    </button>
-    <img [src]="appImageSrc" alt="{{appImageAlt}}" />
-  </div>
-  <div *ngIf="!info" class="modal-body">
-    <h2><span i18n="@@about.loading"
-              class="spinner spinner-inverse-lg spinner-inline">
-        </span> Loading about information...
-    </h2>
-  </div>
-  <div *ngIf="info" class="modal-body">
-    <h1>{{ info.appTitle }}</h1>
-    <div class="product-versions-pf">{{ info.appDescription }}</div>
-    <div class="product-versions-pf">
-      <ul class="list-unstyled">
-        <li><strong>App Name:</strong> {{ info.appName }}</li>
-        <li><strong>App Version:</strong> {{ info.appVersion }}</li>
-      </ul>
-    </div>
-    <div class="trademark-pf">{{ info.copyright }}</div>
-  </div>
-  <div class="modal-footer">
-    <img [src]="logoImageSrc" alt="{{logoImageAlt}}" />
-  </div>
-</div>
+<pfng-about-modal [config]="aboutConfig"
+                  (onCancel)="close()">
+</pfng-about-modal>
diff --git a/ngapp/src/app/core/about-dialog/about-dialog.component.ts b/ngapp/src/app/core/about-dialog/about-dialog.component.ts
index 4205ac72..9f7e14e2 100644
--- a/ngapp/src/app/core/about-dialog/about-dialog.component.ts
+++ b/ngapp/src/app/core/about-dialog/about-dialog.component.ts
@@ -15,9 +15,13 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, Output, ViewEncapsulation } from "@angular/core";
-import { AboutEvent } from "@core/about-dialog/about-event";
-import { About } from "@core/about-dialog/about.model";
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from "@angular/core";
+import { AboutEvent } from "app/core/about-dialog/about-event";
+import { About } from "app/core/about-dialog/about.model";
+import { BsModalService } from "ngx-bootstrap/modal";
+import { AboutModalConfig } from "patternfly-ng/modal";
+import { AboutService } from "@core/about-dialog/about.service";
+import { LoggerService } from "@core/logger.service";
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -25,7 +29,7 @@ import { About } from "@core/about-dialog/about.model";
   templateUrl: "./about-dialog.component.html",
   styleUrls: ["./about-dialog.component.css"]
 })
-export class AboutDialogComponent {
+export class AboutDialogComponent implements OnInit {
 
   /**
    * The Event is emitted when modal is closed
@@ -37,11 +41,43 @@ export class AboutDialogComponent {
    */
   @Input() public info: About;
 
+  private aboutConfig: AboutModalConfig;
+  private aboutService: AboutService;
+  private logger: LoggerService;
+
   /**
    * The default contructor
    */
-  constructor() {
-    // nothing to do
+  constructor(private modalService: BsModalService,
+              logger: LoggerService,
+              aboutService: AboutService) {
+    this.aboutService = aboutService;
+    this.logger = logger;
+  }
+
+  public ngOnInit(): void {
+
+    const self = this;
+
+    this.aboutService.getAboutInformation().subscribe(
+      ( result ) => {
+        this.aboutConfig = {
+          additionalInfo: result.appDescription,
+          copyright: result.copyright,
+          logoImageAlt: this.appImageAlt,
+          logoImageSrc: this.appImageSrc,
+          title: result.appTitle,
+          productInfo: [
+            { name: "Version", value: result.appVersion },
+            { name: "Server Name", value: "Localhost_update_me" },
+            { name: "User Name", value: "admin_update_me" },
+            { name: "User Role", value: "Administrator_update_me" }]
+        } as AboutModalConfig;
+      },
+      ( error ) => {
+        this.logger.error( error, "Error getting about information.");
+      }
+    );
   }
 
   public get appImageAlt(): string {
diff --git a/ngapp/src/app/core/about-dialog/about.model.ts b/ngapp/src/app/core/about-dialog/about.model.ts
index c6c42ea8..24e6da10 100644
--- a/ngapp/src/app/core/about-dialog/about.model.ts
+++ b/ngapp/src/app/core/about-dialog/about.model.ts
@@ -23,6 +23,7 @@ export class About {
   //   "Information": {
   //     "App Name": "vdb-builder",
   //     "App Title": "Vdb Builder",
+  //     "copyright": "2017-1018",
   //     "App Description": "A tool that allows creating, editing and managing dynamic VDBs and their contents",
   //     "App Version": "0.0.4-SNAPSHOT",
   //     "Repository Workspace": "komodoLocalWorkspace",
diff --git a/ngapp/src/app/core/about-dialog/about.service.ts b/ngapp/src/app/core/about-dialog/about.service.ts
index b3b4d2f7..f1a49faa 100644
--- a/ngapp/src/app/core/about-dialog/about.service.ts
+++ b/ngapp/src/app/core/about-dialog/about.service.ts
@@ -46,5 +46,4 @@ export class AboutService extends ApiService {
       } )
       .catch( ( error ) => this.handleError( error ) );
   }
-
 }
diff --git a/ngapp/src/app/core/vertical-nav/vertical-nav.component.ts b/ngapp/src/app/core/vertical-nav/vertical-nav.component.ts
index e05f8b15..f1ef656a 100644
--- a/ngapp/src/app/core/vertical-nav/vertical-nav.component.ts
+++ b/ngapp/src/app/core/vertical-nav/vertical-nav.component.ts
@@ -15,12 +15,11 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, TemplateRef, ViewEncapsulation } from "@angular/core";
+import {Component, Input, OnInit, TemplateRef, ViewEncapsulation} from "@angular/core";
 import { Router } from "@angular/router";
 import { ConnectionsConstants } from "@connections/shared/connections-constants";
 import { AboutEvent } from "@core/about-dialog/about-event";
 import { About } from "@core/about-dialog/about.model";
-import { AboutService } from "@core/about-dialog/about.service";
 import { LoggerService } from "@core/logger.service";
 import { DataservicesConstants } from "@dataservices/shared/dataservices-constants";
 import { BsModalService } from "ngx-bootstrap/modal";
@@ -37,23 +36,25 @@ import { NavigationItemConfig } from "patternfly-ng";
 
 export class VerticalNavComponent implements OnInit {
 
+  /**
+   * The about information.
+   */
+  @Input() public info: About;
+
   public aboutInfo: About;
   public navigationItems: NavigationItemConfig[];
 
   private aboutRef: BsModalRef;
-  private aboutService: AboutService;
   private logger: LoggerService;
   private modalService: BsModalService;
   private router: Router;
 
   constructor( router: Router,
                logger: LoggerService,
-               modalService: BsModalService,
-               aboutService: AboutService ) {
+               modalService: BsModalService ) {
     this.router = router;
     this.logger = logger;
     this.modalService = modalService;
-    this.aboutService = aboutService;
   }
 
   public closeAbout( $event: AboutEvent ): void {
@@ -77,18 +78,6 @@ export class VerticalNavComponent implements OnInit {
   }
 
   public openAbout( template: TemplateRef< any > ): void {
-    const self = this;
-
-    this.aboutService.getAboutInformation().subscribe(
-      ( result ) => {
-        self.aboutInfo = result;
-      },
-      ( error ) => {
-        this.logger.error( error, "Error getting about information.");
-      }
-    );
-
-    console.error( template );
     this.aboutRef = this.modalService.show( template );
   }