diff --git a/src/app/components/components/paging/paging.component.html b/src/app/components/components/paging/paging.component.html
index 916f3d0eda..e07344ed9b 100644
--- a/src/app/components/components/paging/paging.component.html
+++ b/src/app/components/components/paging/paging.component.html
@@ -8,17 +8,16 @@
           <md-card-content>
             <p>Change Event: </p>
             <div>
-              <p>Page Size: {{event?.pageSize || '100'}}</p>
-              <p>Page: {{event?.page || '1'}} of {{event?.maxPage || '14'}}</p>
-              <p>Rows: {{event?.fromRow || '1'}} to {{event?.toRow || '100'}}</p>
+              <p>Page Size: {{event1?.pageSize || '100'}}</p>
+              <p>Page: {{event1?.page || '1'}} of {{event1?.maxPage || '14'}}</p>
+              <p>Rows: {{event1?.fromRow || '1'}} to {{event1?.toRow || '100'}}</p>
             </div>
-            <p>Total: {{event?.total || '1345'}}</p>
+            <p>Total: {{event1?.total || '1345'}}</p>
           </md-card-content>
           <md-divider></md-divider>
-          <td-paging-bar #pagingBar pageSizeAllText="All" [pageSizeAll]="true" [pageSizes]="[50,100,200,500,1000,2000]" pageLinkCount="5"
-                          [initialPage]="1" [firstLast]="firstLast" [pageSize]="100" [total]="1345" (change)="change($event)">
+          <td-paging-bar #pagingBar1 pageSizeAllText="All" [pageSizeAll]="true" [pageSizes]="[50,100,200,500,1000,2000]" pageLinkCount="5" [initialPage]="1" [firstLast]="firstLast" [pageSize]="100" [total]="1345" (change)="change1($event)">
             <span td-paging-bar-label hide-xs>Row per page:</span>
-            {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
+            {{pagingBar1.range}} <span hide-xs>of {{pagingBar1.total}}</span>
           </td-paging-bar>
       </md-tab>
       <md-tab>
@@ -27,8 +26,7 @@
           <p>HTML:</p>
           <td-highlight lang="html">
             <![CDATA[
-              <td-paging-bar #pagingBar pageSizeAllText="All" [pageSizeAll]="true" [pageSizes]="[50,100,200,500,1000,2000]" pageLinkCount="5"
-                              [initialPage]="1" [firstLast]="firstLast" [pageSize]="100" [total]="1345" (change)="change($event)">
+              <td-paging-bar #pagingBar pageSizeAllText="All" [pageSizeAll]="true" [pageSizes]="[50,100,200,500,1000,2000]" pageLinkCount="5" [initialPage]="1" [firstLast]="firstLast" [pageSize]="100" [total]="1345" (change)="change($event)">
                 <span td-paging-bar-label hide-xs>Row per page:</span>
                 { {pagingBar.range} } <span hide-xs>of { {pagingBar.total} }</span>
               </td-paging-bar>
@@ -65,77 +63,81 @@
     </div>
   </md-card-actions>
 </md-card>
+
+
 <md-card>
-  <md-card-title>TdPagingBarComponent</md-card-title>
-  <md-card-subtitle>How to use this component</md-card-subtitle>
+  <md-card-title>Paging using input</md-card-title>
+  <md-card-subtitle>Navigate to a specific page</md-card-subtitle>
   <md-divider></md-divider>
-  <md-card-content>
-    <h2><code><![CDATA[<td-paging-bar>]]></code></h2>
-    <p>Use <code><![CDATA[<td-paging-bar>]]></code> element to generate a paging bar.</p>
-    <p>The <code>(change)</code> event throws an event with the following interface:</p>
-    <td-highlight lang="typescript">
-      <![CDATA[
-        export interface IPageChangeEvent {
-          page: number;
-          maxPage: number;
-          pageSize: number;
-          total: number;
-          fromRow: number;
-          toRow: number;
-        }
-      ]]>
-    </td-highlight>
-    <h3>Properties:</h3>
-    <p>The <code><![CDATA[<td-paging-bar>]]></code> component has {{pagingBarAttrs.length}} properties:</p>
-    <md-list>
-      <ng-template let-attr let-last="attr" ngFor [ngForOf]="pagingBarAttrs">
-        <a md-list-item layout-align="row">
-          <h3 md-line> {{attr.name}}: <span>{{attr.type}}</span></h3>
-          <p md-line> {{attr.description}} </p>
-        </a>
-        <md-divider *ngIf="!last"></md-divider>
-      </ng-template>
-    </md-list>
-    <h3>Example:</h3>
-    <p>HTML:</p>
-    <td-highlight lang="html">
-      <![CDATA[
-        <td-paging-bar #pagingBar pageSizeAllText="allText" [firstLast]="true|false" [pageSizeAll]="true|false" [pageSizes]="[100,200,500,1000,2000]"
-                       pageLinkCount="5" [initialPage]="1" [pageSize]="100" [total]="1345" (change)="change($event)">
+  <md-tab-group md-stretch-tabs>
+    <md-tab>
+      <ng-template md-tab-label>Demo</ng-template>
+        <md-card-content>
+          <p>Change Event: </p>
+          <div>
+            <p>Page Size: {{event2?.pageSize || '100'}}</p>
+            <p>Page: {{event2?.page || '1'}} of {{event2?.maxPage || '14'}}</p>
+            <p>Rows: {{event2?.fromRow || '1'}} to {{event2?.toRow || '100'}}</p>
+          </div>
+          <p>Total: {{event2?.total || '1345'}}</p>
+        </md-card-content>
+        <md-divider></md-divider>
+        <td-paging-bar #pagingBar2 [pageSizes]="[50,100,200,500,1000,2000]" pageLinkCount="5" [firstLast]="false" [initialPage]="1" [pageSize]="100" [total]="1345" (change)="change2($event)">
           <span td-paging-bar-label hide-xs>Row per page:</span>
-          { {pagingBar.range} } <span hide-xs>of { {pagingBar.total} }</span>
+          {{pagingBar2.range}} <span hide-xs>of {{pagingBar2.total}}</span>
+          <p hide-xs>Go to:</p>
+          <md-input-container>
+            <input #goToInput
+                    mdInput
+                    type="number"
+                    [min]="1"
+                    [max]="pagingBar2.maxPage"
+                    [value]="pagingBar2.page"
+                    (blur)="goToInput.value = pagingBar2.page"
+                    (keyup.enter)="pagingBar2.navigateToPage(goToInput.value); goToInput.value = pagingBar2.page"/>
+          </md-input-container>
         </td-paging-bar>
-      ]]>
-    </td-highlight>
-    <p>Typescript:</p>
-    <td-highlight lang="typescript">
-      <![CDATA[
-        import { IPageChangeEvent } from '@covalent/core';
-        ...
-        })
-        export class Demo {
-
-          change(event: IPageChangeEvent): void {
+    </md-tab>
+    <md-tab>
+      <ng-template md-tab-label>Code</ng-template>
+      <md-card-content>
+        <p>HTML:</p>
+        <td-highlight lang="html">
+          <![CDATA[
+            <td-paging-bar #pagingBar [pageSizes]="[50,100,200,500,1000,2000]" pageLinkCount="5" [firstLast]="false" [initialPage]="1" [pageSize]="100" [total]="1345" (change)="change($event)">
+              <span td-paging-bar-label hide-xs>Row per page:</span>
+              { {pagingBar.range} } <span hide-xs>of { {pagingBar.total} }</span>
+              <p hide-xs>Go to:</p>
+              <md-input-container>
+                <input #goToInput
+                      mdInput
+                      type="number"
+                      [min]="1"
+                      [max]="pagingBar.maxPage"
+                      [value]="pagingBar.page"
+                      (blur)="goToInput.value = pagingBar.page"
+                      (keyup.enter)="pagingBar.navigateToPage(goToInput.value); goToInput.value = pagingBar.page"/>
+              </md-input-container>
+            </td-paging-bar>
+          ]]>
+        </td-highlight>
+        <p>Typescript:</p>
+        <td-highlight lang="typescript">
+          <![CDATA[
+            import { IPageChangeEvent } from '@covalent/core';
             ...
-          }
-          
-        }
-      ]]>
-    </td-highlight>
-    <h3>Setup:</h3>
-    <p>Import the [CovalentPagingModule] in your NgModule:</p>
-    <td-highlight lang="typescript">
-      <![CDATA[
-        import { CovalentPagingModule } from '@covalent/core';
-        @NgModule({
-          imports: [
-            CovalentPagingModule,
-            ...
-          ],
-          ...
-        })
-        export class MyModule {}
-      ]]>
-    </td-highlight>
-  </md-card-content>
+            export class Demo {
+              event: IPageChangeEvent;
+
+              change(event: IPageChangeEvent): void {
+                this.event = event;
+              }
+            }
+          ]]>
+        </td-highlight>
+      </md-card-content>
+    </md-tab>
+  </md-tab-group>
 </md-card>
+
+<td-readme-loader resourceUrl="platform/core/paging/README.md"></td-readme-loader>
\ No newline at end of file
diff --git a/src/app/components/components/paging/paging.component.ts b/src/app/components/components/paging/paging.component.ts
index 47caf600ec..87399286c0 100644
--- a/src/app/components/components/paging/paging.component.ts
+++ b/src/app/components/components/paging/paging.component.ts
@@ -14,56 +14,18 @@ export class PagingDemoComponent {
 
   @HostBinding('@routeAnimation') routeAnimation: boolean = true;
   @HostBinding('class.td-route-animation') classAnimation: boolean = true;
-
-  pagingBarAttrs: Object[] = [{
-    description: `Array that populates page size menu. Defaults to [50, 100, 200, 500, 1000]`,
-    name: 'pageSizes?',
-    type: 'number[]',
-  }, {
-    description: `Shows or hides the first and last page buttons of the paging bar. Defaults to 'false'`,
-    name: 'firstLast?',
-    type: 'boolean',
-  }, {
-    description: `Shows or hides the 'all' menu item in the page size menu. Defaults to 'false'`,
-    name: 'pageSizeAll?',
-    type: 'boolean',
-  }, {
-    description: `Text for the 'all' menu item in the page size menu. Defaults to 'All'`,
-    name: 'pageSizeAllText?',
-    type: 'boolean',
-  }, {
-    description: `Selected page size for the pagination. Defaults to first element of the [pageSizes] array.`,
-    name: 'pageSize?',
-    type: 'number',
-  }, {
-    description: `Defines the number of PageLinks to display. PageLinks are used to jump to a specific page, default is 0.`,
-    name: 'pageLinkCount?',
-    type: 'number',
-  }, {
-    description: `ets starting page for the paging bar. Defaults to '1'`,
-    name: 'initialPage?',
-    type: 'number',
-  }, {
-    description: `Total rows for the pagination.`,
-    name: 'total',
-    type: 'number',
-  }, {
-    description: `Method to be executed when page size changes or any button is clicked in the paging bar.`,
-    name: 'change',
-    type: 'function($event: IPageChangeEvent)',
-  }, {
-    description: `Navigates to a specific valid page.
-                  Returns 'true' if page is valid, else 'false'.`,
-    name: 'navigateToPage',
-    type: 'function(page: number): boolean',
-  }];
-
-  event: IPageChangeEvent;
+    
+  event1: IPageChangeEvent;
+  event2: IPageChangeEvent;
   firstLast: boolean = false;
   pageSizeAll: boolean = false;
 
-  change(event: IPageChangeEvent): void {
-    this.event = event;
+  change1(event: IPageChangeEvent): void {
+    this.event1 = event;
+  }
+
+  change2(event: IPageChangeEvent): void {
+    this.event2 = event;
   }
 
   toggleFirstLast(): void {
diff --git a/src/platform/core/paging/README.md b/src/platform/core/paging/README.md
index a2d3fc7b06..caec4c1e07 100644
--- a/src/platform/core/paging/README.md
+++ b/src/platform/core/paging/README.md
@@ -4,7 +4,7 @@
 
 The `(change)` event throws an event with the following interface:
 
-```typscript
+```typescript
 export interface IPageChangeEvent {
   page: number;
   maxPage: number;
@@ -51,10 +51,43 @@ export class MyModule {}
 
 Example for HTML usage:
 
- ```html
-<td-paging-bar #pagingBar pageSizeAllText="allText" [firstLast]="true|false" [pageSizeAll]="true|false" [pageSizes]="[100,200,500,1000,2000]"
-                       [initialPage]="1" [pageSize]="100" [total]="1345" (change)="change($event)">
+```html
+<td-paging-bar #pagingBar
+                pageSizeAllText="allText"
+                [firstLast]="true"
+                [pageSizeAll]="true"
+                [pageSizes]="[100,200,500,1000,2000]"
+                [initialPage]="1"
+                [pageSize]="100"
+                [total]="1345"
+                (change)="change($event)">
+  <span td-paging-bar-label hide-xs>Row per page:</span>
+  {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
+</td-paging-bar>
+```
+
+Example with material input for `Go to` usage: 
+
+```html
+<td-paging-bar #pagingBar
+                [pageSizes]="[50,100,200,500]"
+                pageLinkCount="5"
+                [initialPage]="1"
+                [pageSize]="100"
+                [total]="1345"
+                (change)="change($event)">
   <span td-paging-bar-label hide-xs>Row per page:</span>
   {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
+  <p hide-xs>Go to:</p>
+  <md-input-container>
+    <input #goToInput
+            mdInput
+            type="number"
+            [min]="1"
+            [max]="pagingBar.maxPage"
+            [value]="pagingBar.page"
+            (blur)="goToInput.value = pagingBar.page"
+            (keyup.enter)="pagingBar.navigateToPage(goToInput.value); goToInput.value = pagingBar.page"/>
+  </md-input-container>
 </td-paging-bar>
- ```
+```
diff --git a/src/platform/core/paging/paging-bar.component.html b/src/platform/core/paging/paging-bar.component.html
index f1e59a98a8..8d6dc6db51 100644
--- a/src/platform/core/paging/paging-bar.component.html
+++ b/src/platform/core/paging/paging-bar.component.html
@@ -1,4 +1,4 @@
-<div layout="row" layout-align="end center" class="md-caption td-paging-bar">
+<div layout="row" layout-align="end center" class="md-caption td-paging-bar" (change)="$event.stopPropagation()" >
   <ng-content select="[td-paging-bar-label]"></ng-content>
   <md-select [(ngModel)]="pageSize">
     <ng-template let-size ngFor [ngForOf]="pageSizes">
@@ -8,9 +8,7 @@
     </ng-template>
     <md-option *ngIf="pageSizeAll" [value]="total">{{pageSizeAllText}}</md-option>
   </md-select>
-  <div>
-    <ng-content></ng-content>
-  </div>
+  <ng-content></ng-content>
   <div class="td-paging-bar-navigation">
     <button [id]="'td-paging-bar-' + id + '-first-page'" md-icon-button type="button" *ngIf="firstLast" [disabled]="isMinPage()" (click)="firstPage()">
       <md-icon>{{ isRTL ? 'skip_next' : 'skip_previous' }}</md-icon>
diff --git a/src/platform/core/paging/paging-bar.component.scss b/src/platform/core/paging/paging-bar.component.scss
index de8bfba03b..209cf07971 100644
--- a/src/platform/core/paging/paging-bar.component.scss
+++ b/src/platform/core/paging/paging-bar.component.scss
@@ -3,7 +3,7 @@
 }
 .td-paging-bar {
   height: 48px;
-  > * {
+  /deep/ > * {
     margin: 0 10px;
   }
 }
diff --git a/src/platform/core/paging/paging-bar.component.spec.ts b/src/platform/core/paging/paging-bar.component.spec.ts
index 554fb7813b..f4ecafbdde 100644
--- a/src/platform/core/paging/paging-bar.component.spec.ts
+++ b/src/platform/core/paging/paging-bar.component.spec.ts
@@ -9,6 +9,7 @@ import { Component } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { TdPagingBarComponent } from './paging-bar.component';
 import { CovalentPagingModule } from './paging.module';
+import { MdInputModule } from '@angular/material';
 import { NgModule, DebugElement } from '@angular/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -18,6 +19,7 @@ describe('Component: PagingBar', () => {
     TestBed.configureTestingModule({
       imports: [
         NoopAnimationsModule,
+        MdInputModule,
         CovalentPagingModule,
       ],
       declarations: [
@@ -26,6 +28,7 @@ describe('Component: PagingBar', () => {
         TestPageSizesComponent,
         TestFirstLastComponent,
         TestPageLinkCountComponent,
+        TestGoToComponent,
       ],
     });
     TestBed.compileComponents();
@@ -172,6 +175,82 @@ describe('Component: PagingBar', () => {
       });
     });
   });
+
+  it('should jump to a page using an external material input', (done: DoneFn) => {
+    let fixture: ComponentFixture<any> = TestBed.createComponent(TestGoToComponent);
+    let component: TestGoToComponent = fixture.debugElement.componentInstance;
+    let pagingComponent: DebugElement = fixture.debugElement.query(By.directive(TdPagingBarComponent));
+    let inputElement: DebugElement = fixture.debugElement.query(By.css('input'));
+
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      expect(fixture.debugElement.query(By.css('p')).nativeElement.innerHTML).toBe('Go to:');
+      expect(fixture.debugElement.query(By.css('input')).nativeElement).toBeTruthy();
+      expect(inputElement.nativeElement.value).toBe('1');
+      
+      inputElement.nativeElement.value = '6';
+      const event: KeyboardEvent = new KeyboardEvent('keyup', {
+          'key': 'Enter',
+      });
+      inputElement.nativeElement.dispatchEvent(event);
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        expect(pagingComponent.componentInstance.page).toBe(6);
+        expect(inputElement.nativeElement.value).toBe('6');
+        done();
+      });
+    });
+  });
+
+  it('should not jump to a page if the page doesnt exist', (done: DoneFn) => {
+    let fixture: ComponentFixture<any> = TestBed.createComponent(TestGoToComponent);
+    let component: TestGoToComponent = fixture.debugElement.componentInstance;
+    let pagingComponent: DebugElement = fixture.debugElement.query(By.directive(TdPagingBarComponent));
+    let inputElement: DebugElement = fixture.debugElement.query(By.css('input'));
+
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      expect(fixture.debugElement.query(By.css('input')).nativeElement).toBeTruthy();
+      expect(inputElement.nativeElement.value).toBe('1');
+      
+      inputElement.nativeElement.value = '8';
+      const event: KeyboardEvent = new KeyboardEvent('keyup', {
+          'key': 'Enter',
+      });
+      inputElement.nativeElement.dispatchEvent(event);
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        expect(pagingComponent.componentInstance.page).toBe(1);
+        expect(inputElement.nativeElement.value).toBe('1');
+        done();
+      });
+    });
+  });
+
+  it('should floor a value before jumping to a page', (done: DoneFn) => {
+    let fixture: ComponentFixture<any> = TestBed.createComponent(TestGoToComponent);
+    let component: TestGoToComponent = fixture.debugElement.componentInstance;
+    let pagingComponent: DebugElement = fixture.debugElement.query(By.directive(TdPagingBarComponent));
+    let inputElement: DebugElement = fixture.debugElement.query(By.css('input'));
+
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      expect(fixture.debugElement.query(By.css('input')).nativeElement).toBeTruthy();
+      expect(inputElement.nativeElement.value).toBe('1');
+      
+      inputElement.nativeElement.value = '4.556';
+      const event: KeyboardEvent = new KeyboardEvent('keyup', {
+          'key': 'Enter',
+      });
+      inputElement.nativeElement.dispatchEvent(event);
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        expect(pagingComponent.componentInstance.page).toBe(4);
+        expect(inputElement.nativeElement.value).toBe('4');
+        done();
+      });
+    });
+  });
 });
 
 @Component({
@@ -220,3 +299,23 @@ class TestPageLinkCountComponent {
   pageLinkCount: number = 7;
   pageSize: number = 100;
 }
+
+@Component({
+  template: `
+    <td-paging-bar #pagingBar [pageSizes]="[50,100,200,500,1000,2000]" [pageSize]="100" [total]="650">
+      <p>Go to:</p>
+      <md-input-container>
+        <input #goToInput
+                mdInput
+                type="number"
+                [min]="1"
+                [max]="pagingBar.maxPage"
+                [value]="pagingBar.page"
+                (blur)="goToInput.value = pagingBar.page"
+                (keyup.enter)="pagingBar.navigateToPage(goToInput.value); goToInput.value = pagingBar.page"/>
+      </md-input-container>
+      
+    </td-paging-bar>`,
+})
+class TestGoToComponent {
+}
diff --git a/src/platform/core/paging/paging-bar.component.ts b/src/platform/core/paging/paging-bar.component.ts
index 3ae9e2965c..feb19b6327 100644
--- a/src/platform/core/paging/paging-bar.component.ts
+++ b/src/platform/core/paging/paging-bar.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, Output, EventEmitter, OnInit, Optional } from '@angular/core';
-import { Dir } from '@angular/cdk';
+import { Dir, coerceNumberProperty } from '@angular/cdk';
 
 export interface IPageChangeEvent {
   page: number;
@@ -176,7 +176,7 @@ export class TdPagingBarComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this._page = this.initialPage;
+    this._page = coerceNumberProperty(this.initialPage);
     this._calculateRows();
     this._calculatePageLinks();
     this._initialized = true;
@@ -188,7 +188,7 @@ export class TdPagingBarComponent implements OnInit {
    */
   navigateToPage(page: number): boolean {
     if (page === 1 || (page >= 1 && page <= this.maxPage)) {
-      this._page = page;
+      this._page = coerceNumberProperty(Math.floor(page));
       this._handleOnChange();
       return true;
     }