diff --git a/src/app/components/our-work/our-work.component.html b/src/app/components/our-work/our-work.component.html
index 2c8a4cf..9209964 100644
--- a/src/app/components/our-work/our-work.component.html
+++ b/src/app/components/our-work/our-work.component.html
@@ -1,24 +1,20 @@
-
 <div class="section">
     <div class="container">
         <h2>Our Work</h2>
         <div class="work-section">
-            <div class="row justify-content-cente">
-                <button type="button" class="slider_button btn btn-danger btn-just-icon"><i class="	fa fa-angle-left"
-                        (click)="backward()"></i></button>
-                <div class="project card" *ngFor="let x of view">
-                    <img class="card-img-top" src="../../../assets/img/faces/{{x.image}}" alt="Card image cap">
+            <div class="row justify-content-center">
+                <button type="button" class="slider_button btn btn-danger btn-just-icon" (click)="backward()"><i
+                        class="	fa fa-angle-left"></i></button>
+                <div class="project card" *ngFor="let project of listedProjects">
+                    <img class="card-img-top" src="../../../assets/img/work/{{project.image}}" alt="Card image cap">
                     <div class="card-body">
-                        <h5 class="card-title">Sertum</h5>
-                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
-                            the
-                            card's
-                            content.</p>
+                        <h5 class="card-title"><b>{{project.projectName}}</b></h5>
+                        <p class="card-text" style="text-align: justify; font-size: 12px;">{{project.description}}</p>
                         <a href="#" class="btn btn-default">See more</a>
                     </div>
                 </div>
-                <button type="button" class="slider_button btn btn-danger btn-just-icon"><i class="fa fa-angle-right"
-                        (click)="foward()"></i></button>
+                <button type="button" class="slider_button btn btn-danger btn-just-icon" (click)="foward()"><i
+                        class="fa fa-angle-right"></i></button>
             </div>
         </div>
     </div>
diff --git a/src/app/components/our-work/our-work.component.scss b/src/app/components/our-work/our-work.component.scss
index 11aeecf..76d9fd0 100644
--- a/src/app/components/our-work/our-work.component.scss
+++ b/src/app/components/our-work/our-work.component.scss
@@ -1,10 +1,14 @@
-.project{
+.project {
   margin: 2px 20px 2px;
   width: 18rem;
 }
 
-.slider_button{
+.slider_button {
   display: block;
   margin-top: auto;
   margin-bottom: auto;
-}
\ No newline at end of file
+}
+
+.work-section {
+  margin-top: 5vh;
+}
diff --git a/src/app/components/our-work/our-work.component.ts b/src/app/components/our-work/our-work.component.ts
index c3693b4..bc738d4 100644
--- a/src/app/components/our-work/our-work.component.ts
+++ b/src/app/components/our-work/our-work.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, HostListener } from '@angular/core';
-import projects from '../../../assets/json/work.json';
+import projects from '../../../assets/json/projects.json';
 
 
 @Component({
@@ -10,7 +10,7 @@ import projects from '../../../assets/json/work.json';
 export class OurWorkComponent implements OnInit {
 
   private displayCount;
-  public view;
+  public listedProjects;
   private clicker = 0;
   @HostListener('window:resize', ['$event'])
   onResize(event) {
@@ -22,21 +22,24 @@ export class OurWorkComponent implements OnInit {
   }
 
   foward() {
+    console.log('clicked F');
     if (this.clicker < projects.length - this.displayCount) {
       this.clicker++;
-      this.view = projects.slice(0 + this.clicker, this.displayCount + this.clicker);
+      this.listedProjects = projects.slice(0 + this.clicker, this.displayCount + this.clicker);
     }
+    console.log(this.clicker);
   }
 
   backward() {
+    console.log('clicked B');
     if (this.clicker > 0) {
       this.clicker--;
-      this.view = projects.slice(0 + this.clicker, this.displayCount + this.clicker);
+      this.listedProjects = projects.slice(0 + this.clicker, this.displayCount + this.clicker);
     }
+    console.log(this.clicker);
   }
 
   adjustScreen(width) {
-    console.log(width)
     if (width < 750) {
       this.displayCount = 1;
     } else if (width < 800) {
@@ -49,6 +52,6 @@ export class OurWorkComponent implements OnInit {
     }else{
       this.displayCount = 4;
     }
-    this.view = projects.slice(0, this.displayCount);
+    this.listedProjects = projects.slice(0, this.displayCount);
   }
 }
diff --git a/src/app/components/project-card/project-card.component.html b/src/app/components/project-card/project-card.component.html
new file mode 100644
index 0000000..dd1ab72
--- /dev/null
+++ b/src/app/components/project-card/project-card.component.html
@@ -0,0 +1,3 @@
+<p>
+  project-card works!
+</p>
diff --git a/src/app/components/project-card/project-card.component.scss b/src/app/components/project-card/project-card.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/project-card/project-card.component.spec.ts b/src/app/components/project-card/project-card.component.spec.ts
new file mode 100644
index 0000000..710d77b
--- /dev/null
+++ b/src/app/components/project-card/project-card.component.spec.ts
@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ProjectCardComponent } from './project-card.component';
+
+describe('ProjectCardComponent', () => {
+  let component: ProjectCardComponent;
+  let fixture: ComponentFixture<ProjectCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProjectCardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProjectCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/project-card/project-card.component.ts b/src/app/components/project-card/project-card.component.ts
new file mode 100644
index 0000000..e55662b
--- /dev/null
+++ b/src/app/components/project-card/project-card.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-project-card',
+  templateUrl: './project-card.component.html',
+  styleUrls: ['./project-card.component.scss']
+})
+export class ProjectCardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/assets/img/click.png b/src/assets/img/click.png
new file mode 100644
index 0000000..e5dbd7c
Binary files /dev/null and b/src/assets/img/click.png differ
diff --git a/src/assets/img/faces/sertum.jpg b/src/assets/img/faces/sertum.jpg
deleted file mode 100644
index 79aca53..0000000
Binary files a/src/assets/img/faces/sertum.jpg and /dev/null differ
diff --git a/src/assets/img/work/Cake-a-licious.png b/src/assets/img/work/Cake-a-licious.png
new file mode 100644
index 0000000..d3f74bf
Binary files /dev/null and b/src/assets/img/work/Cake-a-licious.png differ
diff --git a/src/assets/img/work/ajithMotors.jpg b/src/assets/img/work/ajithMotors.jpg
new file mode 100644
index 0000000..1984acf
Binary files /dev/null and b/src/assets/img/work/ajithMotors.jpg differ
diff --git a/src/assets/img/work/codeJuctionWebsite.png b/src/assets/img/work/codeJuctionWebsite.png
new file mode 100644
index 0000000..bf6b814
Binary files /dev/null and b/src/assets/img/work/codeJuctionWebsite.png differ
diff --git a/src/assets/img/work/fhix.png b/src/assets/img/work/fhix.png
new file mode 100644
index 0000000..08997a2
Binary files /dev/null and b/src/assets/img/work/fhix.png differ
diff --git a/src/assets/img/work/firecall.jpg b/src/assets/img/work/firecall.jpg
new file mode 100644
index 0000000..c81db94
Binary files /dev/null and b/src/assets/img/work/firecall.jpg differ
diff --git a/src/assets/img/work/sertum.jpg b/src/assets/img/work/sertum.jpg
index 79aca53..d46a384 100644
Binary files a/src/assets/img/work/sertum.jpg and b/src/assets/img/work/sertum.jpg differ
diff --git a/src/assets/json/projects.json b/src/assets/json/projects.json
new file mode 100644
index 0000000..86fbb8b
--- /dev/null
+++ b/src/assets/json/projects.json
@@ -0,0 +1,32 @@
+[
+  {
+    "projectName": "Sertum",
+    "image": "sertum.jpg",
+    "description": "Sertum is a robot which can do both cleaning and serving on its own."
+  },
+  {
+    "projectName": "Cake-a-licious Website",
+    "image": "Cake-a-licious.png",
+    "description": "The official website of cake-a-licious cake store."
+  },
+  {
+    "projectName": "Ajith motors Entry System",
+    "image": "ajithMotors.jpg",
+    "description": "A data entry managment system deployed in Ajith motors car sale."
+  },
+  {
+    "projectName": "Fhix 45 Website",
+    "image": "fhix.png",
+    "description": "The official website of Fhix 45 gymnasium."
+  },
+  {
+    "projectName": "CodeJunction Website",
+    "image": "codeJuctionWebsite.png",
+    "description": "The official website of CodeJunction. (Open Source ❤️)"
+  },
+  {
+    "projectName": "Fire call",
+    "image": "firecall.jpg",
+    "description": "A sound wave classifying tool which analyse audio content. (Open Source ❤️)"
+  }
+]
\ No newline at end of file
diff --git a/src/assets/json/work.json b/src/assets/json/work.json
deleted file mode 100644
index d19964a..0000000
--- a/src/assets/json/work.json
+++ /dev/null
@@ -1,58 +0,0 @@
-[
-    {
-      "firstName": "Hasal",
-      "fullName": "Hasal Fernando",
-      "image": "hasal.jpg",
-      "social": {
-        "linkedin": "https://www.linkedin.com/in/hasalfernando/",
-        "facebook": "https://www.facebook.com/hasal98fernando/",
-        "instagram": "https://www.instagram.com/hasalfernando/"
-      },
-      "description": "Royalist, Co-Founder of codeJunction, undergraduate who's doing his internship as a Trainee Software Engineer at Zone 24x7. Developed passion towards tech from childhood. Quiet person by nature but, surely QUITE LOUD when it comes to tech. Apart from coding, loves to edit videos. Unsurprisingly, most of them are about tech and others are about the places he travels to, during his leisurely hours. "
-    },
-    {
-      "firstName": "Janeth",
-      "fullName": "Janeth Fernando",
-      "image": "janeth.jpg",
-      "social": {
-        "linkedin": "https://www.linkedin.com/in/janethfernando/",
-        "facebook": "https://www.facebook.com/janethavishka",
-        "instagram": "https://www.instagram.com/_jan.eth_/"
-      },
-      "description": "Janeth is a software engineering undergraduate who currently does his internship at WSO2. He went to S.Thomas' College Mount Lavinia and he has done pretty well in both studies and extracurricular activities. Working in the ICT society at STC brought him the passion for being a software engineer. In his free time, he loves to travel around with his friends. Photography is one of his hobbies."
-    },
-    {
-      "firstName": "Nandula",
-      "fullName": "Nandula Perera",
-      "image": "nandula.png",
-      "social": {
-        "linkedin": "https://www.linkedin.com/in/nandulaperera/",
-        "facebook": "https://www.facebook.com/nandula.perera.927",
-        "instagram": "https://www.instagram.com/nandulaperera/"
-      },
-      "description": "Computer Science undergraduate at University of Colombo School of Computing. Studied at Lyceum International School, Panadura and excelled in both studies and extra activities. Has a great passion towards music, problem solving and application development. Interested to play the piano and the guitar during his free time."
-    },
-    {
-      "firstName": "Purushoth",
-      "fullName": "Purushoth Anandaraja",
-      "image": "purushoth.jpg",
-      "social": {
-        "linkedin": "https://www.linkedin.com/in/purushoth-anandaraja-ba9603160/",
-        "facebook": "https://www.facebook.com/purushoth.anandaraja.5",
-        "instagram": "https://www.instagram.com/purushoth_h/"
-      },
-      "description": "Purushoth is an undergraduate from IIT, who's reading for a degree in Software Engineering. He is currently working as an intern at Global Market Technologies. He is interested in Software development and Project Management. He writes Blogs and loves to learn new trends in IT."
-    },
-    {
-      "firstName": "Rajitha",
-      "fullName": "Rajitha Warusavitarana",
-      "image": "sertum.jpg",
-      "social": {
-        "linkedin": "https://www.linkedin.com/in/rajithawaru/",
-        "facebook": "https://www.facebook.com/rajitha.Warusavitarana",
-        "instagram": "https://www.instagram.com/rajitha.98/"
-      },
-      "description": "Rajitha is a software engineering undergraduate who is currently working as an intern at 99X Technology. He is passionate in cloud  computing, web development, data science and open-source.  He is a fan of food and ready to eat kottu at any time.  Rajitha loves to travel, swim, sing and party during his free time."
-    }
-  ]
-  
\ No newline at end of file