diff --git a/src/demo/app-routing.module.ts b/src/demo/app-routing.module.ts
index dd5d50aa..244dd1e9 100644
--- a/src/demo/app-routing.module.ts
+++ b/src/demo/app-routing.module.ts
@@ -1,14 +1,23 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { WelcomeComponent } from './components/welcome.component';
+import { CreateAppComponent } from './create-app/create-app.component';
+import { GettingStartedComponent } from './getting-started/getting-started.component';
+import { ImportAppComponent } from './import-app/import-app.component';
 
 const routes: Routes = [{
     path: '',
-    component: WelcomeComponent,
+    component: GettingStartedComponent,
     pathMatch: 'full'
-  }
-];
+  }, {
+    path: '_createapp',
+    component: CreateAppComponent,
+    pathMatch: 'full'
+  }, {
+    path: '_importapp',
+    component: ImportAppComponent,
+    pathMatch: 'full'
+}];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes, { useHash: true })],
diff --git a/src/demo/app.component.html b/src/demo/app.component.html
index 8ce05e3f..ca303b4f 100644
--- a/src/demo/app.component.html
+++ b/src/demo/app.component.html
@@ -6,6 +6,5 @@
       </div>
     </div>
   </nav>
-  <hr />
   <router-outlet></router-outlet>
 </main>
diff --git a/src/demo/app.component.less b/src/demo/app.component.less
index e69de29b..328ae09b 100644
--- a/src/demo/app.component.less
+++ b/src/demo/app.component.less
@@ -0,0 +1 @@
+@import (reference) '../assets/stylesheets/shared/main.less';
diff --git a/src/demo/app.module.ts b/src/demo/app.module.ts
index 2097b8c5..54097c04 100644
--- a/src/demo/app.module.ts
+++ b/src/demo/app.module.ts
@@ -10,7 +10,9 @@ import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 
 // Main areas
-import { WelcomeComponent } from './components/welcome.component';
+import { CreateAppComponent } from './create-app/create-app.component';
+import { GettingStartedComponent } from './getting-started/getting-started.component';
+import { ImportAppComponent } from './import-app/import-app.component';
 
 import { DemoDependencyCheckService } from './service/demo-dependency-check.service';
 import { DemoGitProviderService } from './service/demo-git-provider.service';
@@ -51,7 +53,9 @@ import {
   ],
   declarations: [
     AppComponent,
-    WelcomeComponent
+    CreateAppComponent,
+    GettingStartedComponent,
+    ImportAppComponent
   ],
   providers: [
     HelperService,
diff --git a/src/demo/components/welcome.component.less b/src/demo/components/welcome.component.less
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/demo/components/welcome.component.ts b/src/demo/components/welcome.component.ts
deleted file mode 100644
index 9ac662bc..00000000
--- a/src/demo/components/welcome.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import {
-  Component,
-  OnInit
-} from '@angular/core';
-
-@Component({
-  selector: 'demo-welcome',
-  templateUrl: './welcome.component.html'
-})
-export class WelcomeComponent implements OnInit {
-  constructor() {
-  }
-
-  ngOnInit(): void {
-  }
-}
diff --git a/src/demo/components/welcome.component.html b/src/demo/create-app/create-app.component.html
similarity index 57%
rename from src/demo/components/welcome.component.html
rename to src/demo/create-app/create-app.component.html
index df90e38a..5e63f1b3 100644
--- a/src/demo/components/welcome.component.html
+++ b/src/demo/create-app/create-app.component.html
@@ -1,7 +1,7 @@
 <div class="padding-15">
   <div>
     <div>
-      <f8launcher [importApp]="false"></f8launcher>
+      <f8launcher></f8launcher>
     </div>
   </div>
 </div>
diff --git a/src/demo/create-app/create-app.component.ts b/src/demo/create-app/create-app.component.ts
new file mode 100644
index 00000000..d97f27e3
--- /dev/null
+++ b/src/demo/create-app/create-app.component.ts
@@ -0,0 +1,16 @@
+import {
+  Component,
+  OnInit
+} from '@angular/core';
+
+@Component({
+  selector: 'create-app',
+  templateUrl: './create-app.component.html'
+})
+export class CreateAppComponent implements OnInit {
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+}
diff --git a/src/demo/getting-started/getting-started.component.html b/src/demo/getting-started/getting-started.component.html
new file mode 100644
index 00000000..e83c2ff1
--- /dev/null
+++ b/src/demo/getting-started/getting-started.component.html
@@ -0,0 +1,59 @@
+<div class="getting-started">
+  <div>
+    <div class="container-fluid">
+      <h1>
+        Getting Started
+      </h1>
+      <p>
+        When getting started with setting up a project, there are two different set up paths you can take.
+        You can either choose to import an existing project or create a new project.
+      </p>
+    </div>
+  </div>
+  <div>
+    <div class="container-fluid container-cards-pf">
+      <div class="row row-cards-pf">
+        <div class="col-xs-12 col-md-6">
+          <div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select card-pf--medium"
+               [routerLink]="['/_importapp']">
+            <div class="card-title">
+              <h2 class="card-pf-title--title">Import Existing Application</h2>
+            </div>
+            <div class="card-pf-body--body">
+              <p class="card-description">
+                I have an existing project that I would like to import to use as the base for my application.
+              </p>
+              <div class="card-icon">
+                <i class="pficon pficon-import"></i>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select card-pf--medium"
+               [routerLink]="['/_createapp']">
+            <div class="card-title">
+              <h2 class="card-pf-title--title">Create a New Application</h2>
+            </div>
+            <div>
+              <p class="card-description">
+                I want to create a new project from scratch. I would like to use the preset technologies and missions
+                within Openshift.io to help me create a new project.
+              </p>
+              <div class="card-icon">
+                <i class="fa fa-plus-square"></i>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="container-fluid">
+      <div class="getting-started-return">
+        <button class="btn btn-link">Return to my dashboard</button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/demo/getting-started/getting-started.component.less b/src/demo/getting-started/getting-started.component.less
new file mode 100644
index 00000000..bb948842
--- /dev/null
+++ b/src/demo/getting-started/getting-started.component.less
@@ -0,0 +1,28 @@
+@import (reference) '../../assets/stylesheets/shared/main.less';
+
+.getting-started {
+  background-color: @color-pf-black-200;
+  height: 100vh;
+  .card-pf {
+    height: 300px;
+  }
+  .card-description {
+    min-height: 40px;
+  }
+  .card-icon {
+    padding-top: 40px;
+    text-align: center;
+    i {
+      margin-top: 5px;
+      font-size: 7em;
+      &.fa {
+        margin-top: 0;
+        font-size: 8em;
+      }
+    }
+  }
+}
+
+.getting-started-return {
+  text-align: center;
+}
diff --git a/src/demo/getting-started/getting-started.component.ts b/src/demo/getting-started/getting-started.component.ts
new file mode 100644
index 00000000..d4b88a13
--- /dev/null
+++ b/src/demo/getting-started/getting-started.component.ts
@@ -0,0 +1,17 @@
+import {
+  Component,
+  OnInit
+} from '@angular/core';
+
+@Component({
+  selector: 'getting-started',
+  styleUrls: ['./getting-started.component.less'],
+  templateUrl: './getting-started.component.html'
+})
+export class GettingStartedComponent implements OnInit {
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+}
diff --git a/src/demo/import-app/import-app.component.html b/src/demo/import-app/import-app.component.html
new file mode 100644
index 00000000..91d852ec
--- /dev/null
+++ b/src/demo/import-app/import-app.component.html
@@ -0,0 +1,7 @@
+<div class="padding-15">
+  <div>
+    <div>
+      <f8launcher [importApp]="true"></f8launcher>
+    </div>
+  </div>
+</div>
diff --git a/src/demo/import-app/import-app.component.ts b/src/demo/import-app/import-app.component.ts
new file mode 100644
index 00000000..b30336ac
--- /dev/null
+++ b/src/demo/import-app/import-app.component.ts
@@ -0,0 +1,16 @@
+import {
+  Component,
+  OnInit
+} from '@angular/core';
+
+@Component({
+  selector: 'import-app',
+  templateUrl: './import-app.component.html'
+})
+export class ImportAppComponent implements OnInit {
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+}