diff --git a/.github/workflows/testing.yml b/.github/workflows/testing.yml
index dc3e150..d1b21f5 100644
--- a/.github/workflows/testing.yml
+++ b/.github/workflows/testing.yml
@@ -17,5 +17,9 @@ jobs:
       uses: actions/setup-java@v1
       with:
         java-version: ${{ matrix.jdk }}
+    - name: Update apt-get
+      run: sudo apt-get update
+    - name: Update Chrome
+      run: sudo apt-get upgrade google-chrome-stable -y
     - name: Run all tests
       run: mvn clean verify
diff --git a/pom.xml b/pom.xml
index 5625006..8db0eef 100644
--- a/pom.xml
+++ b/pom.xml
@@ -24,7 +24,7 @@
 
    <groupId>com.bernardomg.maven.archetypes</groupId>
    <artifactId>spring-mvc-angular-archetype</artifactId>
-   <version>1.0.0-SNAPSHOT</version>
+   <version>1.0.0</version>
    <packaging>maven-archetype</packaging>
 
    <name>Spring MVC with Angular Maven Archetype</name>
diff --git a/src/main/resources/META-INF/maven/archetype-metadata.xml b/src/main/resources/META-INF/maven/archetype-metadata.xml
index e2a0a1f..5695134 100644
--- a/src/main/resources/META-INF/maven/archetype-metadata.xml
+++ b/src/main/resources/META-INF/maven/archetype-metadata.xml
@@ -57,8 +57,11 @@
          <directory>src/main/js</directory>
          <includes>
             <include>**/*.js</include>
-            <include>**/*.scss</include>
             <include>**/*.json</include>
+            <include>**/*.sass</include>
+            <include>**/*.ts</include>
+            <include>**/*.html</include>
+            <include>**/*.gitkeep</include>
          </includes>
       </fileSet>
       <fileSet filtered="false" encoding="UTF-8">
@@ -166,6 +169,7 @@
          <!-- Frontend project files -->
          <directory></directory>
          <includes>
+            <include>angular.json</include>
             <include>package.json</include>
          </includes>
       </fileSet>
@@ -173,10 +177,10 @@
          <!-- Frontend files -->
          <directory></directory>
          <includes>
-            <include>webpack.*.js</include>
-            <include>.babelrc</include>
-            <include>.eslintrc</include>
-            <include>.nvmrc</include>
+            <include>.browserslistrc</include>
+            <include>.editorconfig</include>
+            <include>karma.conf.js</include>
+            <include>tslint.json</include>
          </includes>
       </fileSet>
    </fileSets>
diff --git a/src/main/resources/archetype-resources/angular.json b/src/main/resources/archetype-resources/angular.json
index f9df31f..41f3eea 100644
--- a/src/main/resources/archetype-resources/angular.json
+++ b/src/main/resources/archetype-resources/angular.json
@@ -3,15 +3,15 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "dnd5-api-angular-client": {
+    "${artifactId}": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
           "style": "sass"
         }
       },
-      "root": "",
-      "sourceRoot": "src/main/js",
+      "root": "src/main/js",
+      "sourceRoot": ".",
       "prefix": "app",
       "architect": {
         "build": {
@@ -21,7 +21,7 @@
             "index": "src/main/js/index.html",
             "main": "src/main/js/main.ts",
             "polyfills": "src/main/js/polyfills.ts",
-            "tsConfig": "tsconfig.app.json",
+            "tsConfig": "src/main/js/tsconfig.app.json",
             "aot": true,
             "assets": [
               "src/main/js/assets"
@@ -66,18 +66,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "dnd5-api-angular-client:build"
+            "browserTarget": "${artifactId}:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "dnd5-api-angular-client:build:production"
+              "browserTarget": "${artifactId}:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "dnd5-api-angular-client:build"
+            "browserTarget": "${artifactId}:build"
           }
         },
         "test": {
@@ -85,7 +85,7 @@
           "options": {
             "main": "src/main/js/test.ts",
             "polyfills": "src/main/js/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
+            "tsConfig": "src/main/js/tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "assets": [
               "src/main/js/assets"
@@ -98,7 +98,7 @@
           },
           "configurations": {
             "production": {
-              "devServerTarget": "dnd5-api-angular-client:serve:production"
+              "devServerTarget": "${artifactId}:serve:production"
             },
             "ci": {
               "watch": false,
@@ -111,8 +111,8 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
+              "src/main/js/tsconfig.app.json",
+              "src/main/js/tsconfig.spec.json",
               "src/main/js/e2e/tsconfig.json"
             ],
             "exclude": [
@@ -124,14 +124,14 @@
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
             "protractorConfig": "src/main/js/e2e/protractor.conf.js",
-            "devServerTarget": "dnd5-api-angular-client:serve"
+            "devServerTarget": "${artifactId}:serve"
           },
           "configurations": {
             "production": {
-              "devServerTarget": "dnd5-api-angular-client:serve:production"
+              "devServerTarget": "${artifactId}:serve:production"
             },
             "ci": {
-              "devServerTarget": "dnd5-api-angular-client:serve:production",
+              "devServerTarget": "${artifactId}:serve:production",
               "protractorConfig": "src/main/js/e2e/protractor-ci.conf.js"
             }
           }
@@ -139,5 +139,5 @@
       }
     }
   },
-  "defaultProject": "dnd5-api-angular-client"
+  "defaultProject": "${artifactId}"
 }
\ No newline at end of file
diff --git a/src/main/resources/archetype-resources/karma.conf.js b/src/main/resources/archetype-resources/karma.conf.js
index 1dd50c8..60cb018 100644
--- a/src/main/resources/archetype-resources/karma.conf.js
+++ b/src/main/resources/archetype-resources/karma.conf.js
@@ -16,7 +16,7 @@ module.exports = function (config) {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, './coverage/dnd5-api-angular-client'),
+      dir: require('path').join(__dirname, './coverage/${artifactId}'),
       reports: ['html', 'lcovonly', 'text-summary'],
       fixWebpackSourcePaths: true
     },
diff --git a/src/main/resources/archetype-resources/package.json b/src/main/resources/archetype-resources/package.json
index 9d49271..5e90830 100644
--- a/src/main/resources/archetype-resources/package.json
+++ b/src/main/resources/archetype-resources/package.json
@@ -1,19 +1,19 @@
 {
-   "name": "test",
-   "version": "0.0.1-SNAPSHOT",
-   "description": "A Spring MVC project using React+Redux for the views.",
-   "author": "Bernardo Martínez Garrido",
-   "homepage": "https://github.com/bernardo-mg/test",
+   "name": "${artifactId}",
+   "version": "${version}",
+   "description": "${projectDescription}",
+   "author": "${developerName}",
+   "homepage": "https://github.com/${repoUserId}/${artifactId}",
    "license": "MIT",
    "keywords": [
-      "keywords"
+      ${keywords}
    ],
    "repository": {
       "type": "git",
-      "url": "git@github.com:bernardo-mg/test.git"
+      "url": "git@github.com:${repoUserId}/${artifactId}.git"
    },
    "bugs": {
-      "url": "https://www.github.com/bernardo-mg/test/issues"
+      "url": "https://www.github.com/${repoUserId}/${artifactId}/issues"
    },
    "scripts": {
       "ng": "ng",
diff --git a/src/main/resources/archetype-resources/pom.xml b/src/main/resources/archetype-resources/pom.xml
index 1b0aa26..c981c1a 100644
--- a/src/main/resources/archetype-resources/pom.xml
+++ b/src/main/resources/archetype-resources/pom.xml
@@ -809,6 +809,12 @@
 
    <build>
       <defaultGoal>clean package</defaultGoal>
+      <resources>
+         <resource>
+            <directory>src/main/resources</directory>
+            <filtering>true</filtering>
+         </resource>
+      </resources>
       <pluginManagement>
          <plugins>
             <plugin>
diff --git a/src/main/resources/archetype-resources/src/main/js/app/api-page.ts b/src/main/resources/archetype-resources/src/main/js/app/api-page.ts
new file mode 100644
index 0000000..de3a803
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/api-page.ts
@@ -0,0 +1,11 @@
+export interface ApiPage<T> {
+    content: T;
+    empty: boolean;
+    first: boolean;
+    last: boolean;
+    number: number;
+    numberOfElements: number;
+    size: number;
+    totalElements: number;
+    totalPages: number;
+}
\ No newline at end of file
diff --git a/src/main/resources/archetype-resources/src/main/js/app/api-response.ts b/src/main/resources/archetype-resources/src/main/js/app/api-response.ts
index 25095b6..b1740b1 100644
--- a/src/main/resources/archetype-resources/src/main/js/app/api-response.ts
+++ b/src/main/resources/archetype-resources/src/main/js/app/api-response.ts
@@ -1,4 +1,6 @@
+import { ApiPage } from './api-page';
+
 export interface ApiResponse<T> {
-    count: number;
-    results: T;
+    content: ApiPage<T>;
+    status: T;
 }
\ No newline at end of file
diff --git a/src/main/resources/archetype-resources/src/main/js/app/app-routing.module.ts b/src/main/resources/archetype-resources/src/main/js/app/app-routing.module.ts
index 984d9b3..3acdf38 100644
--- a/src/main/resources/archetype-resources/src/main/js/app/app-routing.module.ts
+++ b/src/main/resources/archetype-resources/src/main/js/app/app-routing.module.ts
@@ -1,11 +1,14 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { CharclassComponent } from './charclass-view/charclass/charclass.component';
+import { DataViewSearchComponent } from './data-view/data-view-search/data-view-search.component';
+import { DataFormViewComponent } from './data-form/data-form-view/data-form-view.component';
+import { DataReportComponent } from './data-report/data-report.component';
 
 const routes: Routes = [
-  { path: '', redirectTo: '/classes', pathMatch: 'full' },
-  { path: 'classes', redirectTo: 'classes/', pathMatch: 'full' },
-  { path: 'classes/:id', component: CharclassComponent }
+  { path: '', redirectTo: '/data', pathMatch: 'full' },
+  { path: 'data', component: DataViewSearchComponent },
+  { path: 'form', component: DataFormViewComponent },
+  { path: 'report', component: DataReportComponent }
 ];
 
 @NgModule({
diff --git a/src/main/resources/archetype-resources/src/main/js/app/app.component.spec.ts b/src/main/resources/archetype-resources/src/main/js/app/app.component.spec.ts
index 56ca2fa..e802fca 100644
--- a/src/main/resources/archetype-resources/src/main/js/app/app.component.spec.ts
+++ b/src/main/resources/archetype-resources/src/main/js/app/app.component.spec.ts
@@ -20,16 +20,16 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'dnd5-api-angular-client'`, () => {
+  it(`should have as title '${artifactId}'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('dnd5-api-angular-client');
+    expect(app.title).toEqual('${artifactId}');
   });
 
   // it('should render title', () => {
   //   const fixture = TestBed.createComponent(AppComponent);
   //   fixture.detectChanges();
   //   const compiled = fixture.nativeElement;
-  //   expect(compiled.querySelector('.content span').textContent).toContain('dnd5-api-angular-client app is running!');
+  //   expect(compiled.querySelector('.content span').textContent).toContain('${artifactId} app is running!');
   // });
 });
diff --git a/src/main/resources/archetype-resources/src/main/js/app/app.component.ts b/src/main/resources/archetype-resources/src/main/js/app/app.component.ts
index 139e9e0..5bee928 100644
--- a/src/main/resources/archetype-resources/src/main/js/app/app.component.ts
+++ b/src/main/resources/archetype-resources/src/main/js/app/app.component.ts
@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.sass']
 })
 export class AppComponent {
-  title = 'dnd5-api-angular-client';
+  title = '${artifactId}';
 }
diff --git a/src/main/resources/archetype-resources/src/main/js/app/app.module.ts b/src/main/resources/archetype-resources/src/main/js/app/app.module.ts
index 4848cf3..c4577f8 100644
--- a/src/main/resources/archetype-resources/src/main/js/app/app.module.ts
+++ b/src/main/resources/archetype-resources/src/main/js/app/app.module.ts
@@ -6,18 +6,22 @@ import { LayoutModule } from '@angular/cdk/layout';
 
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { CharclassViewModule } from './charclass-view/charclass-view.module';
 import { NavigationComponent } from './navigation/navigation.component';
+import { DataViewModule } from './data-view/data-view.module';
+import { DataFormModule } from './data-form/data-form.module';
+import { DataReportComponent } from './data-report/data-report.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    NavigationComponent
+    NavigationComponent,
+    DataReportComponent
   ],
   imports: [
     AppRoutingModule,
@@ -25,11 +29,13 @@ import { NavigationComponent } from './navigation/navigation.component';
     HttpClientModule,
     BrowserAnimationsModule,
     LayoutModule,
-    CharclassViewModule,
     MatButtonModule,
     MatIconModule,
+    MatListModule,
     MatSidenavModule,
-    MatToolbarModule
+    MatToolbarModule,
+    DataViewModule,
+    DataFormModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-detail/charclass-detail.component.html b/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-detail/charclass-detail.component.html
deleted file mode 100644
index 3905abb..0000000
--- a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-detail/charclass-detail.component.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<div *ngIf="charclass">
-  <h2>{{charclass.name}}</h2>
-  <div>hit_die: {{charclass.hit_die}}</div>
-  <div>sub_classes: {{asList(charclass.subclasses).join(', ')}}</div>
-  <h2>proficiencies</h2>
-  <div>saving_throws: {{asList(charclass.saving_throws).join(', ')}}</div>
-  <div>proficiencies: {{asList(charclass.proficiencies).join(', ')}}</div>
-  <h3>picks</h3>
-  <div *ngFor="let choice of charclass.proficiency_choices;let index=index">
-    <div>pick {{choice.choose}} of {{asList(choice.from).join(', ')}}</div>
-    <mat-divider *ngIf="index < (charclass.proficiency_choices.length-1)"></mat-divider>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-detail/charclass-detail.component.spec.ts b/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-detail/charclass-detail.component.spec.ts
deleted file mode 100644
index e938804..0000000
--- a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-detail/charclass-detail.component.spec.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AppRoutingModule } from '../../app-routing.module';
-import { HttpClientModule } from '@angular/common/http';
-
-import { CharclassDetailComponent } from './charclass-detail.component';
-
-describe('CharclassDetailComponent', () => {
-  let component: CharclassDetailComponent;
-  let fixture: ComponentFixture<CharclassDetailComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [AppRoutingModule, HttpClientModule],
-      declarations: [ CharclassDetailComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CharclassDetailComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-detail/charclass-detail.component.ts b/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-detail/charclass-detail.component.ts
deleted file mode 100644
index e96ac34..0000000
--- a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-detail/charclass-detail.component.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { Charclass } from '../../charclass';
-import { ActivatedRoute } from '@angular/router';
-import { CharclassService } from '../../charclass.service';
-
-@Component({
-  selector: 'app-charclass-detail',
-  templateUrl: './charclass-detail.component.html',
-  styleUrls: ['./charclass-detail.component.sass']
-})
-export class CharclassDetailComponent implements OnInit {
-
-  @Input() charclass: Charclass;
-
-  constructor(
-    private route: ActivatedRoute,
-    private charclassService: CharclassService
-  ) { }
-
-  ngOnInit(): void {
-    this.route.params.subscribe(params => {
-      this.getCharClass(params['id']);
-    });
-  }
-
-  getCharClass(id: string): void {
-    if (id) {
-      this.charclassService.getCharClass(id)
-        .subscribe(charclass => this.charclass = charclass);
-    }
-  }
-
-  asList(data: any[]) {
-    return data.map(obj => obj.name);
-  }
-
-}
diff --git a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-list/charclass-list.component.html b/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-list/charclass-list.component.html
deleted file mode 100644
index 6c70161..0000000
--- a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-list/charclass-list.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<mat-list class="mat-elevation-z8">
-  <a *ngFor="let charclass of charclasses;let index=index" routerLink="/classes/{{charclass.index}}">
-    <mat-list-item class="selection-item">
-      {{charclass.name}}
-      <mat-divider *ngIf="index < (charclasses.length-1)"></mat-divider>
-    </mat-list-item>
-  </a>
-</mat-list>
\ No newline at end of file
diff --git a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-list/charclass-list.component.ts b/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-list/charclass-list.component.ts
deleted file mode 100644
index f27e7a1..0000000
--- a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-list/charclass-list.component.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Charclass } from '../../charclass';
-import { CharclassService } from '../../charclass.service';
-
-@Component({
-  selector: 'app-charclass-list',
-  templateUrl: './charclass-list.component.html',
-  styleUrls: ['./charclass-list.component.sass']
-})
-export class CharclassListComponent implements OnInit {
-
-  charclasses: Charclass[];
-
-  constructor(private charclassService: CharclassService) { }
-
-  ngOnInit(): void {
-    this.getCharClasses();
-  }
-
-  getCharClasses(): void {
-    this.charclassService.getCharClasses().subscribe(charclasses => this.charclasses = charclasses);
-  }
-
-}
diff --git a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-view.module.ts b/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-view.module.ts
deleted file mode 100644
index c30cf91..0000000
--- a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-view.module.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-
-import { FlexLayoutModule } from '@angular/flex-layout';
-
-import { MatListModule } from '@angular/material/list';
-
-import { CharclassListComponent } from './charclass-list/charclass-list.component';
-import { CharclassComponent } from './charclass/charclass.component';
-import { CharclassDetailComponent } from './charclass-detail/charclass-detail.component';
-
-@NgModule({
-  declarations: [
-    CharclassComponent,
-    CharclassDetailComponent,
-    CharclassListComponent
-  ],
-  imports: [
-    CommonModule,
-    RouterModule,
-    FlexLayoutModule,
-    MatListModule
-  ],
-  exports: [
-    CommonModule,
-    RouterModule,
-    FlexLayoutModule,
-    MatListModule,
-    CharclassListComponent,
-    CharclassComponent,
-    CharclassDetailComponent
-  ]
-})
-export class CharclassViewModule { }
diff --git a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass/charclass.component.html b/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass/charclass.component.html
deleted file mode 100644
index db055bf..0000000
--- a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass/charclass.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div fxLayout="row" fxLayoutAlign="space-between">
-  <div fxFlex="80">
-    <app-charclass-detail></app-charclass-detail>
-  </div>
-  <div fxFlex="20">
-    <app-charclass-list></app-charclass-list>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass/charclass.component.sass b/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass/charclass.component.sass
deleted file mode 100644
index 72b96f5..0000000
--- a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass/charclass.component.sass
+++ /dev/null
@@ -1,2 +0,0 @@
-.selection-item:hover
-  font-weight: bold
\ No newline at end of file
diff --git a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass/charclass.component.ts b/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass/charclass.component.ts
deleted file mode 100644
index 2a4780d..0000000
--- a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass/charclass.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Charclass } from '../../charclass';
-import { CharclassService } from '../../charclass.service';
-
-@Component({
-  selector: 'app-charclass',
-  templateUrl: './charclass.component.html',
-  styleUrls: ['./charclass.component.sass']
-})
-export class CharclassComponent {
-
-}
diff --git a/src/main/resources/archetype-resources/src/main/js/app/charclass.service.ts b/src/main/resources/archetype-resources/src/main/js/app/charclass.service.ts
deleted file mode 100644
index 2b7814f..0000000
--- a/src/main/resources/archetype-resources/src/main/js/app/charclass.service.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Charclass } from './charclass';
-import { ApiResponse } from './api-response';
-import { Observable, of } from 'rxjs';
-import { catchError, map, tap } from 'rxjs/operators';
-import { HttpClient } from '@angular/common/http';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class CharclassService {
-
-  private charclassesUrl = 'https://www.dnd5eapi.co/api/classes';  // URL to web api
-
-  constructor(
-    private http: HttpClient
-  ) { }
-
-  getCharClasses(): Observable<Charclass[]> {
-    return this.http.get<ApiResponse<Charclass[]>>(this.charclassesUrl).pipe(
-      map((response: ApiResponse<Charclass[]>) => { return response.results }),
-      catchError(this.handleError<Charclass[]>('getCharClasses', []))
-    ).pipe(
-      catchError(this.handleError<Charclass[]>('getCharClasses', []))
-    );
-  }
-
-  getCharClass(id: string): Observable<Charclass> {
-    const url = `${this.charclassesUrl}/${id}`;
-    return this.http.get<Charclass>(url);
-  }
-
-  /**
- * Handle Http operation that failed.
- * Let the app continue.
- * @param operation - name of the operation that failed
- * @param result - optional value to return as the observable result
- */
-  private handleError<T>(operation = 'operation', result?: T) {
-    return (error: any): Observable<T> => {
-
-      // TODO: send the error to remote logging infrastructure
-      console.error(error); // log to console instead
-
-      // Let the app keep running by returning an empty result.
-      return of(result as T);
-    };
-  }
-
-}
diff --git a/src/main/resources/archetype-resources/src/main/js/app/charclass.ts b/src/main/resources/archetype-resources/src/main/js/app/charclass.ts
deleted file mode 100644
index 73135bf..0000000
--- a/src/main/resources/archetype-resources/src/main/js/app/charclass.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Proficiency } from './proficiency';
-import { ProficiencyChoice } from './proficiency-choice';
-import { SavingThrow } from './saving-throw';
-import { Subclass } from './subclass';
-
-export interface Charclass {
-    index: string;
-    name: string;
-    hit_die: number;
-    proficiency_choices: ProficiencyChoice[];
-    proficiencies: Proficiency[];
-    saving_throws: SavingThrow[];
-    starting_equipment: any;
-    class_levels: any;
-    subclasses: Subclass[];
-    url: string;
-}
\ No newline at end of file
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-form/data-form-view/data-form-view.component.html b/src/main/resources/archetype-resources/src/main/js/app/data-form/data-form-view/data-form-view.component.html
new file mode 100644
index 0000000..038ce8d
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/data-form/data-form-view/data-form-view.component.html
@@ -0,0 +1 @@
+<app-data-input></app-data-input>
diff --git a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-detail/charclass-detail.component.sass b/src/main/resources/archetype-resources/src/main/js/app/data-form/data-form-view/data-form-view.component.sass
similarity index 100%
rename from src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-detail/charclass-detail.component.sass
rename to src/main/resources/archetype-resources/src/main/js/app/data-form/data-form-view/data-form-view.component.sass
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-form/data-form-view/data-form-view.component.spec.ts b/src/main/resources/archetype-resources/src/main/js/app/data-form/data-form-view/data-form-view.component.spec.ts
new file mode 100644
index 0000000..8ab5d3e
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/data-form/data-form-view/data-form-view.component.spec.ts
@@ -0,0 +1,28 @@
+import { HttpClientModule } from '@angular/common/http';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+
+import { DataFormViewComponent } from './data-form-view.component';
+
+describe('DataFormViewComponent', () => {
+  let component: DataFormViewComponent;
+  let fixture: ComponentFixture<DataFormViewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientModule, FormsModule],
+      declarations: [ DataFormViewComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DataFormViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-form/data-form-view/data-form-view.component.ts b/src/main/resources/archetype-resources/src/main/js/app/data-form/data-form-view/data-form-view.component.ts
new file mode 100644
index 0000000..cb4a845
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/data-form/data-form-view/data-form-view.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-data-form-view',
+  templateUrl: './data-form-view.component.html',
+  styleUrls: ['./data-form-view.component.sass']
+})
+export class DataFormViewComponent {
+
+  constructor() { }
+
+}
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-form/data-form.module.ts b/src/main/resources/archetype-resources/src/main/js/app/data-form/data-form.module.ts
new file mode 100644
index 0000000..ddb7116
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/data-form/data-form.module.ts
@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+
+import { DataInputComponent } from './data-input/data-input.component';
+import { DataFormViewComponent } from './data-form-view/data-form-view.component';
+
+
+
+@NgModule({
+  declarations: [
+    DataInputComponent,
+    DataFormViewComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatInputModule
+  ],
+  exports: [
+    DataInputComponent,
+    DataFormViewComponent,
+    MatButtonModule,
+    MatInputModule
+  ]
+})
+export class DataFormModule { }
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-form/data-input/data-input.component.html b/src/main/resources/archetype-resources/src/main/js/app/data-form/data-input/data-input.component.html
new file mode 100644
index 0000000..1d2e689
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/data-form/data-input/data-input.component.html
@@ -0,0 +1,16 @@
+<div class="container">
+    <h1>Input Form</h1>
+    <form (ngSubmit)="onSubmit()" #dataForm="ngForm">
+        <div class="form-group">
+            <mat-form-field class="example-full-width">
+                <mat-label for="name">Name</mat-label>
+                <input matInput type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name"
+                    #name="ngModel">
+                <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
+                    Name is required
+                </div>
+            </mat-form-field>
+        </div>
+        <button mat-raised-button type="submit" [disabled]="!dataForm.form.valid">Submit</button>
+    </form>
+</div>
\ No newline at end of file
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-form/data-input/data-input.component.sass b/src/main/resources/archetype-resources/src/main/js/app/data-form/data-input/data-input.component.sass
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-form/data-input/data-input.component.spec.ts b/src/main/resources/archetype-resources/src/main/js/app/data-form/data-input/data-input.component.spec.ts
new file mode 100644
index 0000000..894c120
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/data-form/data-input/data-input.component.spec.ts
@@ -0,0 +1,28 @@
+import { HttpClientModule } from '@angular/common/http';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+
+import { DataInputComponent } from './data-input.component';
+
+describe('DataInputComponent', () => {
+  let component: DataInputComponent;
+  let fixture: ComponentFixture<DataInputComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientModule, FormsModule],
+      declarations: [DataInputComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DataInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-form/data-input/data-input.component.ts b/src/main/resources/archetype-resources/src/main/js/app/data-form/data-input/data-input.component.ts
new file mode 100644
index 0000000..f7e0ea4
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/data-form/data-input/data-input.component.ts
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { DataService } from 'app/data.service';
+import { DataForm } from '../../dataForm';
+
+@Component({
+  selector: 'app-data-input',
+  templateUrl: './data-input.component.html',
+  styleUrls: ['./data-input.component.sass']
+})
+export class DataInputComponent {
+
+  model = new DataForm("");
+
+  constructor(private dataService: DataService) { }
+
+  onSubmit() {
+    this.dataService.save(this.model);
+  }
+
+}
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-report/data-report.component.html b/src/main/resources/archetype-resources/src/main/js/app/data-report/data-report.component.html
new file mode 100644
index 0000000..4bc8d45
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/data-report/data-report.component.html
@@ -0,0 +1 @@
+<button mat-raised-button (click)="download()">Download Report</button>
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-report/data-report.component.sass b/src/main/resources/archetype-resources/src/main/js/app/data-report/data-report.component.sass
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-list/charclass-list.component.spec.ts b/src/main/resources/archetype-resources/src/main/js/app/data-report/data-report.component.spec.ts
similarity index 58%
rename from src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-list/charclass-list.component.spec.ts
rename to src/main/resources/archetype-resources/src/main/js/app/data-report/data-report.component.spec.ts
index ced3e8a..6aaacf2 100644
--- a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-list/charclass-list.component.spec.ts
+++ b/src/main/resources/archetype-resources/src/main/js/app/data-report/data-report.component.spec.ts
@@ -1,23 +1,22 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { HttpClientModule } from '@angular/common/http';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CharclassListComponent } from './charclass-list.component';
+import { DataReportComponent } from './data-report.component';
 
-describe('CharclassComponent', () => {
-  let component: CharclassListComponent;
-  let fixture: ComponentFixture<CharclassListComponent>;
+describe('DataReportComponent', () => {
+  let component: DataReportComponent;
+  let fixture: ComponentFixture<DataReportComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientModule],
-      declarations: [ CharclassListComponent ]
+      declarations: [ DataReportComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(CharclassListComponent);
+    fixture = TestBed.createComponent(DataReportComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-report/data-report.component.ts b/src/main/resources/archetype-resources/src/main/js/app/data-report/data-report.component.ts
new file mode 100644
index 0000000..bc92c52
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/data-report/data-report.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { DataService } from 'app/data.service';
+
+@Component({
+  selector: 'app-data-report',
+  templateUrl: './data-report.component.html',
+  styleUrls: ['./data-report.component.sass']
+})
+export class DataReportComponent {
+
+  constructor(private dataService: DataService) { }
+
+  public download(): void {
+    this.dataService.report();
+  }
+
+}
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-view/data-list/data-list.component.html b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-list/data-list.component.html
new file mode 100644
index 0000000..49eb1bf
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-list/data-list.component.html
@@ -0,0 +1,8 @@
+<mat-list class="mat-elevation-z8">
+  <a *ngFor="let d of data;let index=index">
+    <mat-list-item class="selection-item">
+      {{d.name}}
+      <mat-divider *ngIf="index < (data.length-1)"></mat-divider>
+    </mat-list-item>
+  </a>
+</mat-list>
\ No newline at end of file
diff --git a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-list/charclass-list.component.sass b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-list/data-list.component.sass
similarity index 100%
rename from src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass-list/charclass-list.component.sass
rename to src/main/resources/archetype-resources/src/main/js/app/data-view/data-list/data-list.component.sass
diff --git a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass/charclass.component.spec.ts b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-list/data-list.component.spec.ts
similarity index 60%
rename from src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass/charclass.component.spec.ts
rename to src/main/resources/archetype-resources/src/main/js/app/data-view/data-list/data-list.component.spec.ts
index f1915a5..97bdb65 100644
--- a/src/main/resources/archetype-resources/src/main/js/app/charclass-view/charclass/charclass.component.spec.ts
+++ b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-list/data-list.component.spec.ts
@@ -2,22 +2,22 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { HttpClientModule } from '@angular/common/http';
 
-import { CharclassComponent } from './charclass.component';
+import { DataListComponent } from './data-list.component';
 
-describe('CharclassComponent', () => {
-  let component: CharclassComponent;
-  let fixture: ComponentFixture<CharclassComponent>;
+describe('DataComponent', () => {
+  let component: DataListComponent;
+  let fixture: ComponentFixture<DataListComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientModule],
-      declarations: [ CharclassComponent ]
+      declarations: [ DataListComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(CharclassComponent);
+    fixture = TestBed.createComponent(DataListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-view/data-list/data-list.component.ts b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-list/data-list.component.ts
new file mode 100644
index 0000000..f500d1a
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-list/data-list.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Data } from '../../data';
+
+@Component({
+  selector: 'app-data-list',
+  templateUrl: './data-list.component.html',
+  styleUrls: ['./data-list.component.sass']
+})
+export class DataListComponent {
+
+  @Input() data: Data[];
+
+  constructor() { }
+
+}
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search-form/data-view-search-form.component.html b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search-form/data-view-search-form.component.html
new file mode 100644
index 0000000..fb27d65
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search-form/data-view-search-form.component.html
@@ -0,0 +1,9 @@
+<div>
+    <div>
+        <mat-form-field class="example-full-width">
+            <mat-label>Search criteria</mat-label>
+            <input matInput (keyup.enter)="handleClick(criteria.value)" #criteria type="search">
+        </mat-form-field>
+        <button mat-button (click)="handleClick(criteria.value)">Search</button>
+    </div>
+</div>
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search-form/data-view-search-form.component.sass b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search-form/data-view-search-form.component.sass
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search-form/data-view-search-form.component.spec.ts b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search-form/data-view-search-form.component.spec.ts
new file mode 100644
index 0000000..54b20af
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search-form/data-view-search-form.component.spec.ts
@@ -0,0 +1,28 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HttpClientModule } from '@angular/common/http';
+
+import { DataViewSearchFormComponent } from './data-view-search-form.component';
+
+describe('DataViewSearchFormComponent', () => {
+  let component: DataViewSearchFormComponent;
+  let fixture: ComponentFixture<DataViewSearchFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientModule],
+      declarations: [ DataViewSearchFormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DataViewSearchFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search-form/data-view-search-form.component.ts b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search-form/data-view-search-form.component.ts
new file mode 100644
index 0000000..5c9efed
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search-form/data-view-search-form.component.ts
@@ -0,0 +1,18 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-data-view-search-form',
+  templateUrl: './data-view-search-form.component.html',
+  styleUrls: ['./data-view-search-form.component.sass']
+})
+export class DataViewSearchFormComponent {
+
+  @Output() update: EventEmitter<any> = new EventEmitter();
+
+  constructor() {}
+
+  public handleClick(value: string): void {
+    this.update.next({ value: value });
+  }
+
+}
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search/data-view-search.component.html b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search/data-view-search.component.html
new file mode 100644
index 0000000..974f0d0
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search/data-view-search.component.html
@@ -0,0 +1,2 @@
+<app-data-view-search-form (update)="handleSearch($event)"></app-data-view-search-form>
+<app-data-list [data]="shownData"></app-data-list>
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search/data-view-search.component.sass b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search/data-view-search.component.sass
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search/data-view-search.component.spec.ts b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search/data-view-search.component.spec.ts
new file mode 100644
index 0000000..17e88c1
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search/data-view-search.component.spec.ts
@@ -0,0 +1,28 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HttpClientModule } from '@angular/common/http';
+
+import { DataViewSearchComponent } from './data-view-search.component';
+
+describe('DataViewSearchComponent', () => {
+  let component: DataViewSearchComponent;
+  let fixture: ComponentFixture<DataViewSearchComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientModule],
+      declarations: [ DataViewSearchComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DataViewSearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search/data-view-search.component.ts b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search/data-view-search.component.ts
new file mode 100644
index 0000000..050326c
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view-search/data-view-search.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { Data } from '../../data';
+import { DataService } from '../../data.service';
+
+@Component({
+  selector: 'app-data-view-search',
+  templateUrl: './data-view-search.component.html',
+  styleUrls: ['./data-view-search.component.sass']
+})
+export class DataViewSearchComponent implements OnInit {
+
+  shownData: Data[];
+
+  constructor(private dataService: DataService) { }
+
+  ngOnInit(): void {
+    this.getAllData();
+  }
+
+  getAllData(): void {
+    this.dataService.search("").subscribe(data => this.shownData = data);
+  }
+
+  handleSearch(query): void {
+    this.dataService.search(query.value).subscribe(data => this.shownData = data);
+  }
+
+}
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view.module.ts b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view.module.ts
new file mode 100644
index 0000000..0b57648
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/data-view/data-view.module.ts
@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+
+import { DataListComponent } from './data-list/data-list.component';
+import { DataViewSearchComponent } from './data-view-search/data-view-search.component';
+import { DataViewSearchFormComponent } from './data-view-search-form/data-view-search-form.component';
+
+@NgModule({
+  declarations: [
+    DataListComponent,
+    DataViewSearchComponent,
+    DataViewSearchFormComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule,
+    FlexLayoutModule,
+    MatButtonModule,
+    MatInputModule,
+    MatListModule
+  ],
+  exports: [
+    CommonModule,
+    RouterModule,
+    FlexLayoutModule,
+    MatButtonModule,
+    MatInputModule,
+    MatListModule,
+    DataListComponent
+  ]
+})
+export class DataViewModule { }
diff --git a/src/main/resources/archetype-resources/src/main/js/app/charclass.service.spec.ts b/src/main/resources/archetype-resources/src/main/js/app/data.service.spec.ts
similarity index 62%
rename from src/main/resources/archetype-resources/src/main/js/app/charclass.service.spec.ts
rename to src/main/resources/archetype-resources/src/main/js/app/data.service.spec.ts
index 17a893e..0475e11 100644
--- a/src/main/resources/archetype-resources/src/main/js/app/charclass.service.spec.ts
+++ b/src/main/resources/archetype-resources/src/main/js/app/data.service.spec.ts
@@ -2,16 +2,16 @@ import { TestBed } from '@angular/core/testing';
 
 import { HttpClientModule } from '@angular/common/http';
 
-import { CharclassService } from './charclass.service';
+import { DataService } from './data.service';
 
-describe('CharclassService', () => {
-  let service: CharclassService;
+describe('DataService', () => {
+  let service: DataService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientModule]
     });
-    service = TestBed.inject(CharclassService);
+    service = TestBed.inject(DataService);
   });
 
   it('should be created', () => {
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data.service.ts b/src/main/resources/archetype-resources/src/main/js/app/data.service.ts
new file mode 100644
index 0000000..3224c4d
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/data.service.ts
@@ -0,0 +1,70 @@
+import { Injectable } from '@angular/core';
+import { Data } from './data';
+import { ApiResponse } from './api-response';
+import { Observable, of } from 'rxjs';
+import { catchError, map, tap } from 'rxjs/operators';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { DataForm } from './dataForm';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DataService {
+
+  private endpoint = 'http://localhost:8080/rest/entity';
+
+  private reportEndpoint = 'http://localhost:8080/rest/entity/pdf';
+
+  constructor(
+    private http: HttpClient
+  ) { }
+
+  search(query: string): Observable<Data[]> {
+    const params = { query };
+    return this.http.get<ApiResponse<Data[]>>(this.endpoint, { params: params }).pipe(
+      map((response: ApiResponse<Data[]>) => { return response.content.content }),
+      catchError(this.handleError<Data[]>('search', []))
+    ).pipe(
+      catchError(this.handleError<Data[]>('search', []))
+    );
+  }
+
+  save(data: DataForm): void {
+    this.http.post<DataForm>(this.endpoint, data).pipe(
+      catchError(this.handleError<DataForm>('getData', data))
+    ).subscribe();
+  }
+
+  report(): void {
+    let headers = new HttpHeaders();
+    headers = headers.set('Accept', 'application/pdf');
+    this.http.get(this.reportEndpoint, { headers: headers, responseType: 'blob' }).subscribe(response => this.downLoadFile(response, 'application/pdf'));
+  }
+
+  downLoadFile(data: any, type: string) {
+    let blob = new Blob([data], { type: type });
+    let url = window.URL.createObjectURL(blob);
+    let pwa = window.open(url);
+    if (!pwa || pwa.closed || typeof pwa.closed == 'undefined') {
+      alert('Please disable your Pop-up blocker and try again.');
+    }
+  }
+
+  /**
+ * Handle Http operation that failed.
+ * Let the app continue.
+ * @param operation - name of the operation that failed
+ * @param result - optional value to return as the observable result
+ */
+  private handleError<T>(operation = 'operation', result?: T) {
+    return (error: any): Observable<T> => {
+
+      // TODO: send the error to remote logging infrastructure
+      console.error(error); // log to console instead
+
+      // Let the app keep running by returning an empty result.
+      return of(result as T);
+    };
+  }
+
+}
diff --git a/src/main/resources/archetype-resources/src/main/js/app/data.ts b/src/main/resources/archetype-resources/src/main/js/app/data.ts
new file mode 100644
index 0000000..cdb6920
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/data.ts
@@ -0,0 +1,5 @@
+
+export interface Data {
+    id: number;
+    name: string;
+}
\ No newline at end of file
diff --git a/src/main/resources/archetype-resources/src/main/js/app/dataForm.ts b/src/main/resources/archetype-resources/src/main/js/app/dataForm.ts
new file mode 100644
index 0000000..bcfff96
--- /dev/null
+++ b/src/main/resources/archetype-resources/src/main/js/app/dataForm.ts
@@ -0,0 +1,7 @@
+export class DataForm {
+
+    constructor(
+      public name: string
+    ) {  }
+  
+  }
\ No newline at end of file
diff --git a/src/main/resources/archetype-resources/src/main/js/app/navigation/navigation.component.html b/src/main/resources/archetype-resources/src/main/js/app/navigation/navigation.component.html
index 6fab72d..2d119d4 100644
--- a/src/main/resources/archetype-resources/src/main/js/app/navigation/navigation.component.html
+++ b/src/main/resources/archetype-resources/src/main/js/app/navigation/navigation.component.html
@@ -3,7 +3,9 @@
     [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) === false">
     <mat-toolbar>Menu</mat-toolbar>
     <mat-nav-list>
-      <a mat-list-item routerLink="/classes">Classes</a>
+      <a mat-list-item routerLink="/data">Data</a>
+      <a mat-list-item routerLink="/form">Form</a>
+      <a mat-list-item routerLink="/report">Report</a>
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>
diff --git a/src/main/resources/archetype-resources/src/main/js/app/proficiency-choice.ts b/src/main/resources/archetype-resources/src/main/js/app/proficiency-choice.ts
deleted file mode 100644
index 0400ee4..0000000
--- a/src/main/resources/archetype-resources/src/main/js/app/proficiency-choice.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Proficiency } from './proficiency';
-
-export interface ProficiencyChoice {
-    choose: number;
-    type: string;
-    from: Proficiency[];
-}
\ No newline at end of file
diff --git a/src/main/resources/archetype-resources/src/main/js/app/proficiency.ts b/src/main/resources/archetype-resources/src/main/js/app/proficiency.ts
deleted file mode 100644
index 2a5dc6e..0000000
--- a/src/main/resources/archetype-resources/src/main/js/app/proficiency.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface Proficiency {
-    name: string;
-    url: string;
-}
\ No newline at end of file
diff --git a/src/main/resources/archetype-resources/src/main/js/app/saving-throw.ts b/src/main/resources/archetype-resources/src/main/js/app/saving-throw.ts
deleted file mode 100644
index a672438..0000000
--- a/src/main/resources/archetype-resources/src/main/js/app/saving-throw.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface SavingThrow {
-    name: string;
-    url: string;
-}
\ No newline at end of file
diff --git a/src/main/resources/archetype-resources/src/main/js/app/subclass.ts b/src/main/resources/archetype-resources/src/main/js/app/subclass.ts
deleted file mode 100644
index bf135af..0000000
--- a/src/main/resources/archetype-resources/src/main/js/app/subclass.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface Subclass {
-    name: string;
-    url: string;
-}
\ No newline at end of file
diff --git a/src/main/resources/archetype-resources/src/main/js/e2e/src/app.e2e-spec.ts b/src/main/resources/archetype-resources/src/main/js/e2e/src/app.e2e-spec.ts
index 4dd3d81..de0f658 100644
--- a/src/main/resources/archetype-resources/src/main/js/e2e/src/app.e2e-spec.ts
+++ b/src/main/resources/archetype-resources/src/main/js/e2e/src/app.e2e-spec.ts
@@ -10,7 +10,7 @@ describe('workspace-project App', () => {
 
   // it('should display welcome message', () => {
   //   page.navigateTo();
-  //   expect(page.getTitleText()).toEqual('dnd5-api-angular-client app is running!');
+  //   expect(page.getTitleText()).toEqual('${artifactId} app is running!');
   // });
 
   afterEach(async () => {
diff --git a/src/main/resources/archetype-resources/tsconfig.app.json b/src/main/resources/archetype-resources/src/main/js/tsconfig.app.json
similarity index 72%
rename from src/main/resources/archetype-resources/tsconfig.app.json
rename to src/main/resources/archetype-resources/src/main/js/tsconfig.app.json
index 9ac4d92..14d3bb9 100644
--- a/src/main/resources/archetype-resources/tsconfig.app.json
+++ b/src/main/resources/archetype-resources/src/main/js/tsconfig.app.json
@@ -6,10 +6,10 @@
     "types": []
   },
   "files": [
-    "src/main/js/main.ts",
-    "src/main/js/polyfills.ts"
+    "main.ts",
+    "polyfills.ts"
   ],
   "include": [
-    "src/main/js/**/*.d.ts"
+    "**/*.d.ts"
   ]
 }
diff --git a/src/main/resources/archetype-resources/tsconfig.base.json b/src/main/resources/archetype-resources/src/main/js/tsconfig.base.json
similarity index 100%
rename from src/main/resources/archetype-resources/tsconfig.base.json
rename to src/main/resources/archetype-resources/src/main/js/tsconfig.base.json
diff --git a/src/main/resources/archetype-resources/tsconfig.json b/src/main/resources/archetype-resources/src/main/js/tsconfig.json
similarity index 100%
rename from src/main/resources/archetype-resources/tsconfig.json
rename to src/main/resources/archetype-resources/src/main/js/tsconfig.json
diff --git a/src/main/resources/archetype-resources/tsconfig.spec.json b/src/main/resources/archetype-resources/src/main/js/tsconfig.spec.json
similarity index 68%
rename from src/main/resources/archetype-resources/tsconfig.spec.json
rename to src/main/resources/archetype-resources/src/main/js/tsconfig.spec.json
index ccf0604..3305892 100644
--- a/src/main/resources/archetype-resources/tsconfig.spec.json
+++ b/src/main/resources/archetype-resources/src/main/js/tsconfig.spec.json
@@ -8,11 +8,11 @@
     ]
   },
   "files": [
-    "src/main/js/test.ts",
-    "src/main/js/polyfills.ts"
+    "test.ts",
+    "polyfills.ts"
   ],
   "include": [
-    "src/main/js/**/*.spec.ts",
-    "src/main/js/**/*.d.ts"
+    "**/*.spec.ts",
+    "**/*.d.ts"
   ]
 }
diff --git a/src/main/resources/archetype-resources/src/main/resources/static/css/index.css b/src/main/resources/archetype-resources/src/main/resources/static/css/index.css
deleted file mode 100644
index 603d126..0000000
--- a/src/main/resources/archetype-resources/src/main/resources/static/css/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.loader {
-   border: 16px solid #f3f3f3; /* Light grey */
-   border-top: 16px solid #3498db; /* Blue */
-   border-radius: 50%;
-   width: 120px;
-   height: 120px;
-   animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-   0% { transform: rotate(0deg); }
-   100% { transform: rotate(360deg); }
-}
diff --git a/src/main/resources/archetype-resources/src/main/resources/templates/index.html b/src/main/resources/archetype-resources/src/main/resources/templates/index.html
index 034c909..bf116de 100644
--- a/src/main/resources/archetype-resources/src/main/resources/templates/index.html
+++ b/src/main/resources/archetype-resources/src/main/resources/templates/index.html
@@ -6,6 +6,9 @@
 
    <title>@project.name@</title>
 
+   <!-- Favicon -->
+   <link rel="icon" type="image/x-icon" href="favicon.ico">
+
    <!-- Metadata -->
    <meta name="description" content="@project.description@" />
    <meta name="keywords" content="@view.keywords@">
@@ -25,20 +28,19 @@
    <meta name="twitter:description" content="@project.description@"/>
 
    <!-- CSS -->
-   <link rel="stylesheet" th:href="@{/static/css/index.css}">
+   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
 </head>
 <body>
 
    <noscript>Javascript should be enabled for this app to run</noscript>
+   <app-root></app-root>
 
-   <div id="root">
-      <div id="loader" class="loader"></div>
-   </div>
-
-   <script th:src="@{/static/vendor.js}"></script>
-   <script th:src="@{/static/app.js}"></script>
+   <script th:src="@{/static/runtime.js}" defer></script>
+   <script th:src="@{/static/polyfills.js}" defer></script>
+   <script th:src="@{/static/styles.js}" defer></script>
+   <script th:src="@{/static/vendor.js}" defer></script>
+   <script th:src="@{/static/main.js}" defer></script>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/archetype-resources/src/test/java/test/unit/controller/rest/TestExampleEntityController.java b/src/main/resources/archetype-resources/src/test/java/test/unit/controller/rest/TestExampleEntityController.java
index 3032554..3bf7f8b 100644
--- a/src/main/resources/archetype-resources/src/test/java/test/unit/controller/rest/TestExampleEntityController.java
+++ b/src/main/resources/archetype-resources/src/test/java/test/unit/controller/rest/TestExampleEntityController.java
@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
+#set( $symbol_dollar = '$' )
 package ${package}.test.unit.controller.rest;
 
 import java.util.ArrayList;
@@ -92,7 +92,7 @@ public final void testGet_ExpectedResults() throws Exception {
         result.andExpect(MockMvcResultMatchers.status().isOk());
 
         // The response model contains the expected attributes
-        result.andExpect(MockMvcResultMatchers.jsonPath("$.content",
+        result.andExpect(MockMvcResultMatchers.jsonPath("${symbol_dollar}.content",
                 Matchers.hasSize(3)));
     }