diff --git a/package.json b/package.json
index 737b6cc8..268bc23d 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@angular/platform-browser-dynamic": "2.0.0-rc.4",
     "@angular/platform-server": "2.0.0-rc.4",
     "@angular/router": "3.0.0-beta.2",
+    "@angular/forms":"0.2.0",
     "amcharts3": "github:amcharts/amcharts3",
     "ammap3": "github:amcharts/ammap3",
     "animate.css": "^3.5.1",
diff --git a/src/app/pages/forms/components/inputs/components/ratinginputs/index.ts b/src/app/pages/forms/components/inputs/components/ratinginputs/index.ts
new file mode 100644
index 00000000..9a62ed6f
--- /dev/null
+++ b/src/app/pages/forms/components/inputs/components/ratinginputs/index.ts
@@ -0,0 +1 @@
+export * from './ratinginputs.component';
diff --git a/src/app/pages/forms/components/inputs/components/ratinginputs/ratinginputs.component.ts b/src/app/pages/forms/components/inputs/components/ratinginputs/ratinginputs.component.ts
new file mode 100644
index 00000000..0e4b2e2d
--- /dev/null
+++ b/src/app/pages/forms/components/inputs/components/ratinginputs/ratinginputs.component.ts
@@ -0,0 +1,20 @@
+import { RatingComponent } from 'ng2-bootstrap/ng2-bootstrap';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'rating-inputs',
+  directives: [RatingComponent],
+  template: require('./ratinginputs.html')
+})
+
+export class Rating {
+  private _rate1:number = 3;
+  private _rate2:number = 4;
+
+  private _max1:number = 5;
+  private _max2:number = 10;
+
+  constructor() {
+  }
+
+}
diff --git a/src/app/pages/forms/components/inputs/components/ratinginputs/ratinginputs.html b/src/app/pages/forms/components/inputs/components/ratinginputs/ratinginputs.html
new file mode 100644
index 00000000..d8b7cf5a
--- /dev/null
+++ b/src/app/pages/forms/components/inputs/components/ratinginputs/ratinginputs.html
@@ -0,0 +1,9 @@
+<div class="col-md-4">
+  <rating [(ngModel)]="_rate1" max="{{_max1}}" stateOn="ion-android-star" stateOff="ion-android-star-outline" class="rating"></rating>
+  <span class="help-block">Rate: {{_rate1}}</span>
+</div>
+
+<div class="col-md-8">
+  <rating [(ngModel)]="_rate2" max="{{_max2}}" stateOn="ion-ios-heart" stateOff="ion-ios-heart-outline" class="rating"></rating>
+  <span class="help-block">Rate: {{_rate2}}</span>
+</div>
diff --git a/src/app/pages/forms/components/inputs/inputs.component.ts b/src/app/pages/forms/components/inputs/inputs.component.ts
index 34f59dbe..e2914188 100644
--- a/src/app/pages/forms/components/inputs/inputs.component.ts
+++ b/src/app/pages/forms/components/inputs/inputs.component.ts
@@ -6,11 +6,13 @@ import {StandardInputs} from './components/standardInputs';
 import {ValidationInputs} from './components/validationInputs';
 import {GroupInputs} from './components/groupInputs';
 import {CheckboxInputs} from './components/checkboxInputs';
+import {Rating} from './components/ratinginputs';
+
 
 @Component({
   selector: 'inputs',
   encapsulation: ViewEncapsulation.None,
-  directives: [BaCard, StandardInputs, ValidationInputs, GroupInputs, CheckboxInputs],
+  directives: [BaCard, StandardInputs, ValidationInputs, GroupInputs, CheckboxInputs, Rating],
   template: require('./inputs.html'),
 })
 export class Inputs {
diff --git a/src/app/pages/forms/components/inputs/inputs.html b/src/app/pages/forms/components/inputs/inputs.html
index d9db5970..96155321 100644
--- a/src/app/pages/forms/components/inputs/inputs.html
+++ b/src/app/pages/forms/components/inputs/inputs.html
@@ -19,6 +19,10 @@
       <ba-card title="Checkboxes & Radios" baCardClass="with-scroll">
         <checkbox-inputs></checkbox-inputs>
       </ba-card>
+
+      <ba-card title="Rating" baCardClass="with-scroll">
+        <rating-inputs></rating-inputs>
+      </ba-card>
     </div>
   </div>
 
diff --git a/src/app/theme/components/baCard/baCard.component.ts b/src/app/theme/components/baCard/baCard.component.ts
index 8c700c08..f49807b0 100644
--- a/src/app/theme/components/baCard/baCard.component.ts
+++ b/src/app/theme/components/baCard/baCard.component.ts
@@ -1,5 +1,4 @@
-import {Component, ViewEncapsulation, Input} from '@angular/core';
-
+import {Component, ViewEncapsulation, ViewChild, Input} from '@angular/core';
 import {BaCardBlur} from './baCardBlur.directive';
 
 @Component({
diff --git a/src/app/theme/components/baCard/index.ts b/src/app/theme/components/baCard/index.ts
index b04caf13..8a8fa6c2 100644
--- a/src/app/theme/components/baCard/index.ts
+++ b/src/app/theme/components/baCard/index.ts
@@ -1,2 +1 @@
-export * from './baCard.component.ts';
-export * from './baCardBlur.directive';
+export * from './baCard.component';
diff --git a/src/app/theme/sass/_form.scss b/src/app/theme/sass/_form.scss
index 2a7b0d8c..29b60ada 100644
--- a/src/app/theme/sass/_form.scss
+++ b/src/app/theme/sass/_form.scss
@@ -582,3 +582,11 @@ label.custom-input-danger {
 .sub-little-text {
   font-size: 12px;
 }
+
+.rating {
+  font-size: 20px;
+}
+
+rating-inputs span {
+  vertical-align: middle;
+}