diff --git a/angular.json b/angular.json
index 9bd7650..c060520 100644
--- a/angular.json
+++ b/angular.json
@@ -158,6 +158,46 @@
           }
         }
       }
+    },
+    "product-grid": {
+      "root": "projects/product-grid",
+      "sourceRoot": "projects/product-grid/src",
+      "projectType": "library",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/product-grid/tsconfig.lib.json",
+            "project": "projects/product-grid/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "project": "projects/product-grid/ng-package.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/product-grid/src/test.ts",
+            "tsConfig": "projects/product-grid/tsconfig.spec.json",
+            "karmaConfig": "projects/product-grid/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/product-grid/tsconfig.lib.json",
+              "projects/product-grid/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
     }
   },
   "defaultProject": "angular-poc"
diff --git a/package.json b/package.json
index b3967f1..d9c0b22 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,10 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^6.0.0",
     "@angular/common": "^6.0.0",
-    "@angular/compiler": "^6.0.0",
     "@angular/core": "^6.0.0",
+    "@angular/compiler": "^6.0.0",
+    "@angular/animations": "^6.0.0",
     "@angular/forms": "^6.0.0",
     "@angular/http": "^6.0.0",
     "@angular/platform-browser": "^6.0.0",
@@ -28,6 +28,7 @@
     "ngx-socket-io": "^2.0.0",
     "ngx-virtual-scroller": "^1.0.16",
     "ram-product-list": "0.0.1",
+    "ram-product-grid": "0.0.2",
     "rxjs": "6.3.0",
     "zone.js": "^0.8.26"
   },
diff --git a/projects/product-grid/karma.conf.js b/projects/product-grid/karma.conf.js
new file mode 100644
index 0000000..4c5f8d0
--- /dev/null
+++ b/projects/product-grid/karma.conf.js
@@ -0,0 +1,31 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};
diff --git a/projects/product-grid/ng-package.json b/projects/product-grid/ng-package.json
new file mode 100644
index 0000000..0aea775
--- /dev/null
+++ b/projects/product-grid/ng-package.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/product-grid",
+  "deleteDestPath": false,
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/product-grid/ng-package.prod.json b/projects/product-grid/ng-package.prod.json
new file mode 100644
index 0000000..96df05f
--- /dev/null
+++ b/projects/product-grid/ng-package.prod.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/product-grid",
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  }
+}
\ No newline at end of file
diff --git a/projects/product-grid/package.json b/projects/product-grid/package.json
new file mode 100644
index 0000000..9c81af4
--- /dev/null
+++ b/projects/product-grid/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "ram-product-grid",
+  "version": "0.0.2",
+  "peerDependencies": {
+    "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
+    "@angular/core": "^6.0.0-rc.0 || ^6.0.0"
+  }
+}
\ No newline at end of file
diff --git a/projects/product-grid/src/lib/product-grid.component.html b/projects/product-grid/src/lib/product-grid.component.html
new file mode 100644
index 0000000..989cb48
--- /dev/null
+++ b/projects/product-grid/src/lib/product-grid.component.html
@@ -0,0 +1,12 @@
+<div class="card border-dark mb-3 col-md-6">
+    <div class="card-header bg-transparent border-dark">{{ item.productCode }}</div>
+    <div class="card-body text-dark">
+        <h5 class="card-title">{{ item.productName }}</h5>
+        <p class="card-text">Description: <span *ngIf="item.description; else noData">{{ item.description }}</span></p>
+        <p class="card-text">Launch Date: {{ item.date | date }}</p>
+        <p class="card-text">Price: {{ item.value | currency: '$' }}</p>
+    </div>
+    <div class="card-footer bg-transparent border-dark">StarRating: {{ item.starRating }}</div>
+</div>
+
+<ng-template #noData>Not available.</ng-template>
\ No newline at end of file
diff --git a/projects/product-grid/src/lib/product-grid.component.spec.ts b/projects/product-grid/src/lib/product-grid.component.spec.ts
new file mode 100644
index 0000000..3645732
--- /dev/null
+++ b/projects/product-grid/src/lib/product-grid.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductGridComponent } from './product-grid.component';
+
+describe('ProductGridComponent', () => {
+  let component: ProductGridComponent;
+  let fixture: ComponentFixture<ProductGridComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProductGridComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProductGridComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/product-grid/src/lib/product-grid.component.ts b/projects/product-grid/src/lib/product-grid.component.ts
new file mode 100644
index 0000000..74fef02
--- /dev/null
+++ b/projects/product-grid/src/lib/product-grid.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+    selector: 'lib-product-grid',
+    templateUrl: './product-grid.component.html',
+    styles: []
+})
+export class ProductGridComponent implements OnInit {
+
+    @Input() item = {
+        id: 1,
+        productName: 'Test',
+        productCode: 'Test-001',
+        description: 'This is a test product',
+        starRating: 0.0,
+        date: new Date(),
+        value: 0
+    };
+
+    constructor() { }
+
+    ngOnInit() { }
+
+}
diff --git a/projects/product-grid/src/lib/product-grid.module.ts b/projects/product-grid/src/lib/product-grid.module.ts
new file mode 100644
index 0000000..da82b9a
--- /dev/null
+++ b/projects/product-grid/src/lib/product-grid.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { ProductGridComponent } from './product-grid.component';
+
+@NgModule({
+  imports: [BrowserModule],
+  declarations: [ProductGridComponent],
+  exports: [ProductGridComponent]
+})
+export class ProductGridModule { }
diff --git a/projects/product-grid/src/lib/product-grid.service.spec.ts b/projects/product-grid/src/lib/product-grid.service.spec.ts
new file mode 100644
index 0000000..71d9d1f
--- /dev/null
+++ b/projects/product-grid/src/lib/product-grid.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ProductGridService } from './product-grid.service';
+
+describe('ProductGridService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ProductGridService]
+    });
+  });
+
+  it('should be created', inject([ProductGridService], (service: ProductGridService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/projects/product-grid/src/lib/product-grid.service.ts b/projects/product-grid/src/lib/product-grid.service.ts
new file mode 100644
index 0000000..c804347
--- /dev/null
+++ b/projects/product-grid/src/lib/product-grid.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProductGridService {
+
+  constructor() { }
+}
diff --git a/projects/product-grid/src/public_api.ts b/projects/product-grid/src/public_api.ts
new file mode 100644
index 0000000..2f036da
--- /dev/null
+++ b/projects/product-grid/src/public_api.ts
@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of product-grid
+ */
+
+export * from './lib/product-grid.service';
+export * from './lib/product-grid.component';
+export * from './lib/product-grid.module';
diff --git a/projects/product-grid/src/test.ts b/projects/product-grid/src/test.ts
new file mode 100644
index 0000000..e11ff1c
--- /dev/null
+++ b/projects/product-grid/src/test.ts
@@ -0,0 +1,22 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/product-grid/tsconfig.lib.json b/projects/product-grid/tsconfig.lib.json
new file mode 100644
index 0000000..3a2b0b9
--- /dev/null
+++ b/projects/product-grid/tsconfig.lib.json
@@ -0,0 +1,33 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "declaration": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2015"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "flatModuleId": "AUTOGENERATED",
+    "flatModuleOutFile": "AUTOGENERATED"
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/product-grid/tsconfig.spec.json b/projects/product-grid/tsconfig.spec.json
new file mode 100644
index 0000000..16da33d
--- /dev/null
+++ b/projects/product-grid/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/product-grid/tslint.json b/projects/product-grid/tslint.json
new file mode 100644
index 0000000..73f120b
--- /dev/null
+++ b/projects/product-grid/tslint.json
@@ -0,0 +1,17 @@
+{
+    "extends": "../../tslint.json",
+    "rules": {
+        "directive-selector": [
+            true,
+            "attribute",
+            "lib",
+            "camelCase"
+        ],
+        "component-selector": [
+            true,
+            "element",
+            "lib",
+            "kebab-case"
+        ]
+    }
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6ac19d6..7a0a5bd 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,7 +4,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { VirtualScrollerModule } from 'ngx-virtual-scroller';
 import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
 import { ProductListModule } from 'ram-product-list';
-
+import { ProductGridModule } from 'ram-product-grid';
 
 import { ROUTING } from './app-routing.module';
 
@@ -35,7 +35,8 @@ const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} };
     SharedModule,
     VirtualScrollerModule,
     SocketIoModule.forRoot(config),
-    ProductListModule
+    ProductListModule,
+    ProductGridModule
   ],
   declarations: [
     AppComponent,
diff --git a/src/app/products/product-grid/product-grid.component.html b/src/app/products/product-grid/product-grid.component.html
index 3e76cb0..42e5c44 100644
--- a/src/app/products/product-grid/product-grid.component.html
+++ b/src/app/products/product-grid/product-grid.component.html
@@ -1,12 +1,3 @@
-<div class="card border-dark mb-3 col-md-6" *ngFor="let product of products">
-  <div class="card-header bg-transparent border-dark">{{ product.productCode }}</div>
-  <div class="card-body text-dark">
-    <h5 class="card-title">{{ product.productName }}</h5>
-    <p class="card-text">Description: <span *ngIf="product.description; else noData">{{ product.description }}</span></p>
-    <p class="card-text">Launch Date: {{ product.date | date }}</p>
-    <p class="card-text">Price: {{ product.value | currency: '$' }}</p>
-  </div>
-  <div class="card-footer bg-transparent border-dark">StarRating: {{ product.starRating }}</div>
-</div>
-
-<ng-template #noData>Not available.</ng-template>
\ No newline at end of file
+<ng-container *ngFor="let product of products">
+  <lib-product-grid [item]="product"></lib-product-grid>
+</ng-container>
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 315d551..050ec86 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,6 +19,9 @@
     "paths": {
       "product-list": [
         "dist/product-list"
+      ],
+      "product-grid": [
+        "dist/product-grid"
       ]
     }
   }