diff --git a/src/app/card-component/card.component.html b/src/app/card-component/card.component.html
index 57ef4e8..05ae077 100644
--- a/src/app/card-component/card.component.html
+++ b/src/app/card-component/card.component.html
@@ -1,10 +1,18 @@
 <mat-card>
-    <mat-card-title class="card-word">{{ card.word }}</mat-card-title>
+    <mat-card-header>
+        <mat-card-title class="card-word">{{ card.word }}</mat-card-title>
+    </mat-card-header>
     <mat-divider></mat-divider>
     <mat-card-content>
-        <div class="card-synonym card-line" [ngClass]="{'hint-selected': this.selected.indexOf(1) != -1}"><div class="card-desc">Synonym:</div> <div class="card-cont">{{ card.synonym }}</div></div>
-        <div class="card-antonym card-line" [ngClass]="{'hint-selected': this.selected.indexOf(2) != -1}"><div class="card-desc">Antonym:</div> <div class="card-cont">{{ card.antonym }}</div></div>
-        <div class="card-general-usage card-line" [ngClass]="{'hint-selected': this.selected.indexOf(3) != -1}"><div class="card-desc">General usage:</div> <div class="card-cont">{{ card.general_sense }}</div></div>
+        <div class="card-synonym card-line" [ngClass]="{'hint-selected': this.selected.indexOf(1) != -1}"><div class="card-desc">Synonym:</div> <div class="card-cont">{{ card.synonym }}</div></div><br>
+        <div class="card-antonym card-line" [ngClass]="{'hint-selected': this.selected.indexOf(2) != -1}"><div class="card-desc">Antonym:</div> <div class="card-cont">{{ card.antonym }}</div></div><br>
+        <div class="card-general-usage card-line" [ngClass]="{'hint-selected': this.selected.indexOf(3) != -1}"><div class="card-desc">General usage:</div> <div class="card-cont">{{ card.general_sense }}</div></div><br>
         <div class="card-example-usage card-line" [ngClass]="{'hint-selected': this.selected.indexOf(4) != -1}"><div class="card-desc">Example usage:</div> <div class="card-cont">{{ card.example_usage }}</div></div>
     </mat-card-content>
+    <mat-card-actions align="end">
+        <button mat-icon-button color="primary" [disabled]="DisableButton" class="card-vote"(click)= "hitLike()">
+            <mat-icon>thumb_up</mat-icon>
+        </button>
+    </mat-card-actions>
+
 </mat-card>
diff --git a/src/app/card-component/card.component.scss b/src/app/card-component/card.component.scss
index 57f62c3..9d1d557 100644
--- a/src/app/card-component/card.component.scss
+++ b/src/app/card-component/card.component.scss
@@ -1,13 +1,8 @@
 .hint-selected {
     background-color: yellow;
 }
-.card-line {
-    margin-top: 5px;
-
-}
+.card-line {  margin-top: 5px; }
 .card-desc { float: left; width: 120px; }
 .card-cont { margin-left: 120px; }
-
-.card-word, .card-cont {
-    word-wrap: break-word;
-}
+.card-vote { bottom: 0; position: absolute;}
+.card-word, .card-cont {  word-wrap: break-word; }
diff --git a/src/app/card-component/card.component.spec.ts b/src/app/card-component/card.component.spec.ts
index 1d75621..3a1da71 100644
--- a/src/app/card-component/card.component.spec.ts
+++ b/src/app/card-component/card.component.spec.ts
@@ -9,6 +9,7 @@ import {Component} from "@angular/core";
 import {Card} from "../card/card";
 import {browser} from "protractor";
 
+
 describe('CardComponent', () => {
   let component: CardComponent;
   let fixture: ComponentFixture<TestComponentWrapper>;
@@ -41,7 +42,6 @@ describe('CardComponent', () => {
         expect(component.card.general_sense).toContain("test general_sense");
         expect(component.card.example_usage).toContain("test example_usage");
 
-
     });
 
      it('synonym should be highlighted', () => {
@@ -63,6 +63,28 @@ describe('CardComponent', () => {
         let synonym: HTMLElement = debugElement.query(By.css('.card-example-usage')).nativeElement;
         expect(synonym.classList).not.toContain("hint-selected");
     });
+
+    it('should check whether the button has been called', async(() => {
+        spyOn(component, 'hitLike');
+
+        let button = fixture.debugElement.nativeElement.querySelector('button');
+        button.click();
+
+        fixture.whenStable().then(() => {
+            expect(component.hitLike).toHaveBeenCalled();
+        })
+    }));
+    it('should increment the like by 1', async(() => {
+        spyOn(component, 'hitLike');
+
+        let button = fixture.debugElement.nativeElement.querySelector('button');
+        button.click();
+
+        fixture.whenStable().then(() => {
+            expect(this.likes = 1);
+        })
+    }));
+
 });
 
 @Component({
@@ -76,6 +98,7 @@ class TestComponentWrapper {
         antonym: "test antonym",
         general_sense: "test general_sense",
         example_usage: "test example_usage",
+        likes: 0
     };
 
 
diff --git a/src/app/card-component/card.component.ts b/src/app/card-component/card.component.ts
index 33edc26..e9246ca 100644
--- a/src/app/card-component/card.component.ts
+++ b/src/app/card-component/card.component.ts
@@ -8,6 +8,8 @@ import {Card} from "../card/card";
 })
 export class CardComponent implements OnInit {
 
+    DisableButton: boolean = false;
+
   constructor() {
   }
 
@@ -18,4 +20,11 @@ export class CardComponent implements OnInit {
   ngOnInit() {
   }
 
+  hitLike(): number {
+      this.card.likes += 1;
+      this.DisableButton = true;
+      console.log(this.card.likes);
+      return this.card.likes;
+  }
+
 }
diff --git a/src/app/card/card.ts b/src/app/card/card.ts
index 11b0a5f..e996554 100644
--- a/src/app/card/card.ts
+++ b/src/app/card/card.ts
@@ -4,5 +4,6 @@ export interface Card {
     synonym: string,
     antonym: string,
     general_sense: string,
-    example_usage: string
+    example_usage: string,
+    likes: number;
 }
diff --git a/src/app/deck/deck.service.ts b/src/app/deck/deck.service.ts
index 9cbef7d..2e6b8cd 100644
--- a/src/app/deck/deck.service.ts
+++ b/src/app/deck/deck.service.ts
@@ -34,13 +34,14 @@ export class DeckService {
     }
 
     public addNewCard(deckID: string, word: string, synonym: string, antonym: string, general: string, example: string) {
-        const body : Card = {
+        const body: Card = {
             word: word,
             synonym: synonym,
             antonym: antonym,
             general_sense: general,
-            example_usage: example
-        }
+            example_usage: example,
+            likes: 0
+        };
         console.log(body);
 
         return this.db.doc('decks/' + deckID).collection('cards').add(body);
diff --git a/src/app/new-card-dialog/new-card-dialog.component.ts b/src/app/new-card-dialog/new-card-dialog.component.ts
index 5f831c1..5880905 100644
--- a/src/app/new-card-dialog/new-card-dialog.component.ts
+++ b/src/app/new-card-dialog/new-card-dialog.component.ts
@@ -51,7 +51,8 @@ export class NewCardDialogComponent implements OnInit {
             this.newCardSynonym,
             this.newCardAntonym,
             this.newCardGeneral,
-            this.newCardExample).then(
+            this.newCardExample,
+            ).then(
             succeeded => {
                 //this.cardAddSuccess = true;
                 this.matDialogRef.close(succeeded);