diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
index 29d4a9b..d829109 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
@@ -26,6 +26,7 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import {environment} from '../environments/environment';
 import {reducers} from './store/models/app-state.model';
 import {CharacterService} from '../services/character.service';
+import { AbilityCardComponent } from './components/ability-card/ability-card.component';
 
 @NgModule({
   declarations: [
@@ -36,6 +37,7 @@ import {CharacterService} from '../services/character.service';
     GameMasterDashboardComponent,
     PlayerDashboardComponent,
     SelectCharacterComponent,
+    AbilityCardComponent,
   ],
   imports: [
 BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.css
new file mode 100644
index 0000000..9f85d1b
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.css
@@ -0,0 +1,11 @@
+#main{
+  width: 480px;
+  height: 480px;
+}
+#main>.mat-card{
+  padding: 0px;
+}
+.diagonal-line{
+  width:100px;
+  background:linear-gradient(45deg,#ffffff 49%,#aaa 50%,#ffffff 51%);
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.html
new file mode 100644
index 0000000..5daac83
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.html
@@ -0,0 +1,19 @@
+<div *ngIf="ability" id="main">
+  <mat-card>
+    <mat-card-header id="ability-card-header">
+      {{ability.value}}
+      <div class="diagonal-line"></div>
+      {{ability.modification}}
+      <div class="diagonal-line"></div>
+      {{ability.name}}
+      <div *ngIf="ability.canSaveThrows" class="diagonal-line"></div>
+      <div *ngIf="ability.canSaveThrows">
+        {{ability.savingthrows}}
+      </div>
+    </mat-card-header>
+    <mat-divider></mat-divider>
+    <mat-card-content>
+
+    </mat-card-content>
+  </mat-card>
+</div>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.spec.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.spec.ts
new file mode 100644
index 0000000..f8de036
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AbilityCardComponent } from './ability-card.component';
+
+describe('StatisticCardComponent', () => {
+  let component: AbilityCardComponent;
+  let fixture: ComponentFixture<AbilityCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AbilityCardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AbilityCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.ts
new file mode 100644
index 0000000..2f8e4f5
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { AbilityViewModel } from '../../../types/viewmodels/ability-viewmodels/AbilityViewModel';
+
+@Component({
+  selector: 'app-ability-card',
+  templateUrl: './ability-card.component.html',
+  styleUrls: ['./ability-card.component.css'],
+})
+export class AbilityCardComponent implements OnInit {
+  @Input() ability: AbilityViewModel;
+
+  constructor() {}
+
+  ngOnInit() {}
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html
index e69de29..a9dd20f 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html
@@ -0,0 +1,5 @@
+<p></p>
+<p></p>
+<p></p>
+<p></p>
+<app-ability-card [ability]="test"></app-ability-card>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
index 9ed3789..2c99938 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
@@ -1,13 +1,24 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { AbilityViewModel } from '../../../types/viewmodels/ability-viewmodels/AbilityViewModel';
 
 @Component({
   selector: 'app-player-dashboard',
   templateUrl: './player-dashboard.component.html',
-  styleUrls: ['./player-dashboard.component.css']
+  styleUrls: ['./player-dashboard.component.css'],
 })
 export class PlayerDashboardComponent {
   isExpanded = false;
 
+  test: AbilityViewModel = {
+    id: 1,
+    name: 'Dexterity',
+    value: 20,
+    modification: 3,
+    savingthrows: 1,
+    canSaveThrows: false,
+    skills: [],
+  };
+
   collapse() {
     this.isExpanded = false;
   }
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/assets/icons/sc-icon.model.ts b/SessionCompanion/SessionCompanion/ClientApp/src/assets/icons/sc-icon.model.ts
index e3537d1..3faceea 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/assets/icons/sc-icon.model.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/assets/icons/sc-icon.model.ts
@@ -10,5 +10,5 @@ export enum scIcon {
   rogue = 'rogue',
   Sorcerer = 'sorcerer',
   Warlock = 'warlock',
-  Wizard =  'wizard'
+  Wizard = 'wizard',
 }
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/ability-viewmodels/AbilityViewModel.ts b/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/ability-viewmodels/AbilityViewModel.ts
new file mode 100644
index 0000000..1ca9248
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/ability-viewmodels/AbilityViewModel.ts
@@ -0,0 +1,11 @@
+import {SkillViewModel} from './SkillViewModel';
+
+export interface AbilityViewModel {
+  id: number;
+  name: string;
+  value: number;
+  modification: number;
+  savingthrows: number;
+  canSaveThrows: boolean;
+  skills: SkillViewModel[];
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/ability-viewmodels/SkillViewModel.ts b/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/ability-viewmodels/SkillViewModel.ts
new file mode 100644
index 0000000..94418d4
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/ability-viewmodels/SkillViewModel.ts
@@ -0,0 +1,5 @@
+export interface SkillViewModel {
+  name: string;
+  value: number;
+  can: boolean;
+}