diff --git a/demo/demo.css b/demo/demo.css
index 78558f5..846df99 100644
--- a/demo/demo.css
+++ b/demo/demo.css
@@ -20,7 +20,8 @@ h1 {
   padding-left: 15px; }
 
 .b-change-theme {
-  padding: 20px; }
+  padding: 20px;
+  margin-bottom: 20px; }
   .b-change-theme__link {
     font-size: 16px;
     line-height: 20px;
@@ -107,3 +108,17 @@ th.sortable {
     top: 0;
     bottom: 6px;
     margin: auto 0; }
+
+.col-wrap {
+  font-size: 0;
+  padding: 25px 0; }
+  .col-wrap .col2 {
+    vertical-align: top;
+    display: inline-block;
+    width: 50%;
+    padding: 0 15px; }
+  .col-wrap .col3 {
+    vertical-align: top;
+    display: inline-block;
+    width: 33.33%;
+    padding: 0 15px; }
diff --git a/demo/index.html b/demo/index.html
index b0fc361..36716cf 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -11,140 +11,130 @@
     <div class="container">
         <h1>Angular Data Grid</h1>
         <div class="b-change-theme">
-            <span class="b-change-theme__link _active">Material Design</span>
             <a href="../index.html" class="b-change-theme__link">Bootstrap</a>
+            <span class="b-change-theme__link _active">Material Design</span>
         </div>
-        <div class="row">
-            <div class="col-xs-12">
-                <div class="col-md-3">
+        <div>
+            <div class="col-wrap">
+                <div class="col3">
                     <div class="form-group">
-                        <input type="text" class="form-control order-search-box"
-                               placeholder="Search By Order #"
+                        <input type="text"
+                               id="sort"
+                               class="form-control order-search-box"
                                ng-change="gridActions.filter()"
                                ng-model="code"
                                filter-by="code"
                                filter-type="text">
+                        <label for="sort" class="input-label">Search By Order #</label>
                     </div>
                 </div>
-                <div class="col-md-9 buttons-right">
-                    <div class="form-inline margin-bottom-small">
-                        <div class="form-group">
-                            <label class="control-label">From: </label>
-
-                            <div class="input-group datepicker">
-                                <input type="text"
-                                       id="dateFrom"
-                                       class="form-control"
-                                       is-open="dateFromOpened"
-                                       ng-click="dateFromOpened = true"
-                                       datepicker-popup="shortDate"
-                                       filter-by="placed"
-                                       filter-type="dateFrom"
-                                       ng-model="dateFrom"
-                                       ng-blur="gridActions.filter()"
-                                       ng-focus="gridActions.filter()"
-                                       max-date="dateTo"
-                                       show-weeks="false"
-                                       close-text="Close"
-                                       placeholder="MM/DD/YY"/>
-                            <span class="input-group-btn">
-                            <label for="dateFrom" class="btn btn-default form-control">
-                                <i class="fa fa-calendar"></i></label>
-                            </span>
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label class="control-label">To: </label>
-
-                            <div class="input-group datepicker">
-                                <input type="text"
-                                       id="dateTo"
-                                       class="form-control"
-                                       is-open="dateToOpened"
-                                       ng-click="dateToOpened = true"
-                                       min-date="dateFrom"
-                                       datepicker-popup="shortDate"
-                                       filter-by="placed"
-                                       filter-type="dateTo"
-                                       ng-model="dateTo"
-                                       ng-blur="gridActions.filter()"
-                                       ng-focus="gridActions.filter()"
-                                       show-weeks="false"
-                                       close-text="Close"
-                                       placeholder="MM/DD/YY"/>
-                                <span class="input-group-btn">
-                                <label for="dateTo" class="btn btn-default form-control">
-                                    <i class="fa fa-calendar"></i></label>
-                                </span>
-                            </div>
+                <div class="col3">
+                    <div class="form-group">
+                        <div class="input-group datepicker">
+                            <input type="text"
+                                   id="dateFrom"
+                                   class="form-control"
+                                   is-open="dateFromOpened"
+                                   ng-click="dateFromOpened = true"
+                                   datepicker-popup="shortDate"
+                                   filter-by="placed"
+                                   filter-type="dateFrom"
+                                   ng-model="dateFrom"
+                                   ng-blur="gridActions.filter()"
+                                   ng-focus="gridActions.filter()"
+                                   max-date="dateTo"
+                                   show-weeks="false"
+                                   close-text="Close"/>
+                            <label for="dateFrom" class="input-label">From</label>
                         </div>
                     </div>
                     <div ng-show="dateTo || dateFrom" class="buttons-right">
                         <a href="" ng-click="dateTo = ''; dateFrom = ''; reloadGrid();">Clear Dates</a>
                     </div>
                 </div>
-                <div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
-                    <div class="row margin-bottom-big">
-                        <strong class="col-md-12">
-                            found : {{filtered.length}} items
-                        </strong>
-
+                <div class="col3">
+                    <div class="form-group">
+                        <div class="input-group datepicker">
+                            <input type="text"
+                                   id="dateTo"
+                                   class="form-control"
+                                   is-open="dateToOpened"
+                                   ng-click="dateToOpened = true"
+                                   min-date="dateFrom"
+                                   datepicker-popup="shortDate"
+                                   filter-by="placed"
+                                   filter-type="dateTo"
+                                   ng-model="dateTo"
+                                   ng-blur="gridActions.filter()"
+                                   ng-focus="gridActions.filter()"
+                                   show-weeks="false"
+                                   close-text="Close"/>
+                            <label for="dateTo" class="input-label">To</label>
+                        </div>
                     </div>
-                    <pagination max-size="5"
-                                boundary-links="true"
-                                class="pagination-sm"
-                                ng-if="paginationOptions.totalItems  > paginationOptions.itemsPerPage"
-                                total-items="paginationOptions.totalItems"
-                                ng-model="paginationOptions.currentPage"
-                                ng-change="reloadGrid()"
-                                items-per-page="paginationOptions.itemsPerPage"></pagination>
-                    <table class="table table-hover table-leo table-condensed table-bordered table-striped">
-                        <thead>
-                        <tr>
-                            <th sortable="code" class="sortable">
-                                Order #
-                            </th>
-                            <th sortable="placed" class="sortable">
-                                Date Placed
-                            </th>
-                            <th sortable="purchaseOrderNumber" class="sortable">
-                                Purchase Order #
-                            </th>
-                            <th class="st-sort-disable th-dropdown">
-                                <select class="form-control width-15"
-                                        filter-by="statusDisplay"
-                                        filter-type="select"
-                                        ng-model="status"
-                                        ng-change="filter()">
-                                    <option value="">All Statuses</option>
-                                </select>
-                            </th>
-                            <th sortable='total.value' class="sortable">
-                                Total
-                            </th>
-                            <th class="st-sort-disable">
-                            </th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr grid-item>
-                            <td>
-                                <a href="{{globalData.contextPath + '/my-account/order/' + item.code}}"
-                                   ng-bind="item.id"></a>
-                            </td>
-                            <td ng-bind="item.placed | date:'MM/dd/yyyy'"></td>
-                            <td ng-bind="item.purchaseOrderNumber"></td>
-                            <td ng-bind="item.statusDisplay"></td>
-                            <td ng-bind="item.total.formattedValue"></td>
-                            <td>
-                                <a class="btn btn-secondary btn-sm"
-                                   href="{{globalData.contextPath + '/my-account/order/' + item.code}}">View
-                                    Order</a>
-                            </td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <div class="row">
+                </div>
+            </div>
+            <div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
+                <div>
+                    <strong>
+                        found : {{filtered.length}} items
+                    </strong>
+                </div>
+                <pagination max-size="5"
+                            boundary-links="true"
+                            class="pagination-sm"
+                            ng-if="paginationOptions.totalItems  > paginationOptions.itemsPerPage"
+                            total-items="paginationOptions.totalItems"
+                            ng-model="paginationOptions.currentPage"
+                            ng-change="reloadGrid()"
+                            items-per-page="paginationOptions.itemsPerPage"></pagination>
+                <table class="table table-hover table-leo table-condensed table-bordered table-striped">
+                    <thead>
+                    <tr>
+                        <th sortable="code" class="sortable">
+                            Order #
+                        </th>
+                        <th sortable="placed" class="sortable">
+                            Date Placed
+                        </th>
+                        <th sortable="purchaseOrderNumber" class="sortable">
+                            Purchase Order #
+                        </th>
+                        <th class="st-sort-disable th-dropdown">
+                            <select class="form-control width-15"
+                                    filter-by="statusDisplay"
+                                    filter-type="select"
+                                    ng-model="status"
+                                    ng-change="filter()">
+                                <option value="">All Statuses</option>
+                            </select>
+                        </th>
+                        <th sortable='total.value' class="sortable">
+                            Total
+                        </th>
+                        <th class="st-sort-disable">
+                        </th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr grid-item>
+                        <td>
+                            <a ng-bind="item.code"></a>
+                        </td>
+                        <td ng-bind="item.placed | date:'MM/dd/yyyy'"></td>
+                        <td ng-bind="item.purchaseOrderNumber"></td>
+                        <td ng-bind="item.statusDisplay"></td>
+                        <td ng-bind="item.total.formattedValue"></td>
+                        <td>
+                            <a class="btn btn-secondary btn-sm"
+                               href="{{globalData.contextPath + '/my-account/order/' + item.code}}">View
+                                Order</a>
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+                <div class="col-wrap">
+                    <div class="col2">
                         <pagination max-size="5"
                                     boundary-links="true"
                                     class="pagination-sm"
@@ -153,6 +143,8 @@ <h1>Angular Data Grid</h1>
                                     ng-model="paginationOptions.currentPage"
                                     ng-change="reloadGrid()"
                                     items-per-page="paginationOptions.itemsPerPage"></pagination>
+                    </div>
+                    <div class="col2">
                         <div grid-item-per-page="10, 25, 50, 75" class="pagination-sm"></div>
                     </div>
                 </div>
@@ -160,6 +152,7 @@ <h1>Angular Data Grid</h1>
         </div>
     </div>
 </div>
+</div>
 </body>
 
 <!--<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>-->
diff --git a/dist/material.css b/dist/material.css
index 823b576..b84d354 100644
--- a/dist/material.css
+++ b/dist/material.css
@@ -1,6 +1,8 @@
 table {
   border-collapse: collapse;
   border-spacing: 0;
+  width: 100%;
+  font-size: 16px;
   margin: 8px;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); }
 
@@ -93,3 +95,139 @@ th.sortable {
 
 .items-per-page a {
   cursor: pointer; }
+
+.pagination-prev a {
+  font-size: 0;
+  width: 30px;
+  position: relative; }
+  .pagination-prev a:before {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    position: absolute;
+    display: block;
+    width: 10px;
+    height: 10px;
+    content: '';
+    transform-origin: center;
+    border-left: 2px solid #333;
+    border-bottom: 2px solid #333;
+    transform: rotate(45deg); }
+
+.pagination-next a {
+  font-size: 0;
+  width: 30px;
+  position: relative; }
+  .pagination-next a:before {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    position: absolute;
+    display: block;
+    width: 10px;
+    height: 10px;
+    content: '';
+    transform-origin: center;
+    border-left: 2px solid #333;
+    border-bottom: 2px solid #333;
+    transform: rotate(-135deg); }
+
+.pagination-first a {
+  font-size: 0;
+  width: 30px;
+  position: relative; }
+  .pagination-first a:before {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    position: absolute;
+    display: block;
+    width: 10px;
+    height: 10px;
+    content: '';
+    transform-origin: center;
+    border-left: 2px solid #333;
+    border-bottom: 2px solid #333;
+    transform: rotate(45deg); }
+  .pagination-first a:after {
+    left: 4px;
+    width: 2px;
+    height: 14px;
+    content: '';
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    margin: auto 0;
+    background: #333; }
+
+.pagination-last a {
+  font-size: 0;
+  width: 30px;
+  position: relative; }
+  .pagination-last a:before {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    position: absolute;
+    display: block;
+    width: 10px;
+    height: 10px;
+    content: '';
+    transform-origin: center;
+    border-left: 2px solid #333;
+    border-bottom: 2px solid #333;
+    transform: rotate(-135deg); }
+  .pagination-last a:after {
+    right: 4px;
+    width: 2px;
+    height: 14px;
+    content: '';
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    margin: auto 0;
+    background: #333; }
+
+.form-group {
+  position: relative; }
+
+input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea {
+  background-color: transparent;
+  border: none;
+  border-bottom: 1px solid #444;
+  border-radius: 0;
+  outline: none;
+  height: 3rem;
+  width: 100%;
+  font-size: 1rem;
+  margin: 0 0 15px 0;
+  padding: 0;
+  box-shadow: none;
+  box-sizing: content-box;
+  transition: all .2s; }
+  input:not([type]):focus, input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=url]:focus, input[type=time]:focus, input[type=date]:focus, input[type=datetime-local]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=search]:focus, textarea.materialize-textarea:focus {
+    border-bottom: 1px solid #106cc8;
+    box-shadow: 0 1px 0 0 #106cc8; }
+    input:not([type]):focus ~ .input-label, input[type=text]:focus ~ .input-label, input[type=password]:focus ~ .input-label, input[type=email]:focus ~ .input-label, input[type=url]:focus ~ .input-label, input[type=time]:focus ~ .input-label, input[type=date]:focus ~ .input-label, input[type=datetime-local]:focus ~ .input-label, input[type=tel]:focus ~ .input-label, input[type=number]:focus ~ .input-label, input[type=search]:focus ~ .input-label, textarea.materialize-textarea:focus ~ .input-label {
+      -webkit-transform: translateY(-140%) scale(1);
+      transform: translateY(-140%) scale(1);
+      color: #106cc8; }
+
+.input-label {
+  color: #444;
+  position: absolute;
+  top: 0.8rem;
+  left: 0;
+  font-size: 1rem;
+  cursor: text;
+  transition: all .2s;
+  transform: scale(1.25);
+  transform-origin: left bottom; }
diff --git a/index.html b/index.html
index 1ad4606..f16c8d0 100644
--- a/index.html
+++ b/index.html
@@ -128,18 +128,6 @@ <h1>Angular Data Grid</h1>
                         </tr>
                         </thead>
                         <tbody>
-                        <!--<tr grid-item>-->
-                            <!--<td>-->
-                                <!--<a ng-bind="item.code"></a>-->
-                            <!--</td>-->
-                            <!--<td ng-bind="item.placed | date:'MM/dd/yyyy'"></td>-->
-                            <!--<td ng-bind="item.purchaseOrderNumber"></td>-->
-                            <!--<td ng-bind="item.statusDisplay"></td>-->
-                            <!--<td ng-bind="item.total.formattedValue"></td>-->
-                            <!--<td>-->
-                                <!--View Order-->
-                            <!--</td>-->
-                        <!--</tr>-->
                         <tr grid-item>
                             <td>
                                 <a ng-bind="item.code"></a>
diff --git a/src/css/demo.scss b/src/css/demo.scss
index 05c77cc..1b60d93 100644
--- a/src/css/demo.scss
+++ b/src/css/demo.scss
@@ -21,6 +21,7 @@ h1 {
 }
 .b-change-theme {
   padding: 20px;
+  margin-bottom: 20px;
   &__link {
     font-size: 16px;
     line-height: 20px;
@@ -123,4 +124,20 @@ th.sortable {
       margin: auto 0;
     }
   }
+}
+.col-wrap {
+  font-size: 0;
+  padding: 25px 0;
+  .col2 {
+    vertical-align: top;
+    display: inline-block;
+    width: 50%;
+    padding: 0 15px;
+  }
+  .col3 {
+    vertical-align: top;
+    display: inline-block;
+    width: 33.33%;
+    padding: 0 15px;
+  }
 }
\ No newline at end of file
diff --git a/src/css/material.scss b/src/css/material.scss
index b68987d..fa69a9a 100644
--- a/src/css/material.scss
+++ b/src/css/material.scss
@@ -3,6 +3,8 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
 
+  width: 100%;
+  font-size: 16px;
   margin: 8px;
   box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
 }
@@ -52,7 +54,7 @@ table {
 .pagination-page {
   transition: background .1s ease-out, color .1s ease-out;
   &.active {
-    background: $activeBg;
+    background: $activeColor;
     a {
       color: $activeText;
     }
@@ -61,7 +63,7 @@ table {
 .pagination {
   transition: background .1s ease-out, color .1s ease-out;
   .active {
-    background: $activeBg;
+    background: $activeColor;
     a {
       color: $activeText;
     }
@@ -107,7 +109,7 @@ th.sortable {
 
 .items-per-page {
   .active {
-    background: $activeBg;
+    background: $activeColor;
     a {
       color: $activeText;
     }
@@ -115,4 +117,150 @@ th.sortable {
   a {
     cursor: pointer;
   }
+}
+
+.pagination-prev a {
+  font-size: 0;
+  width: 30px;
+  position: relative;
+  &:before {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    position: absolute;
+    display: block;
+    width: 10px;
+    height: 10px;
+    content: '';
+    transform-origin:center;
+    border-left: 2px solid $iconsColor;
+    border-bottom: 2px solid $iconsColor;
+    transform: rotate(45deg);
+  }
+}
+.pagination-next a {
+  font-size: 0;
+  width: 30px;
+  position: relative;
+  &:before {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    position: absolute;
+    display: block;
+    width: 10px;
+    height: 10px;
+    content: '';
+    transform-origin:center;
+    border-left: 2px solid $iconsColor;
+    border-bottom: 2px solid $iconsColor;
+    transform: rotate(-135deg);
+  }
+}
+.pagination-first a {
+  font-size: 0;
+  width: 30px;
+  position: relative;
+  &:before {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    position: absolute;
+    display: block;
+    width: 10px;
+    height: 10px;
+    content: '';
+    transform-origin:center;
+    border-left: 2px solid $iconsColor;
+    border-bottom: 2px solid $iconsColor;
+    transform: rotate(45deg);
+  }
+  &:after {
+    left: 4px;
+    width: 2px;
+    height: 14px;
+    content: '';
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    margin: auto 0;
+    background: $iconsColor;
+  }
+}
+.pagination-last a {
+  font-size: 0;
+  width: 30px;
+  position: relative;
+  &:before {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    position: absolute;
+    display: block;
+    width: 10px;
+    height: 10px;
+    content: '';
+    transform-origin:center;
+    border-left: 2px solid $iconsColor;
+    border-bottom: 2px solid $iconsColor;
+    transform: rotate(-135deg);
+  }
+  &:after {
+    right: 4px;
+    width: 2px;
+    height: 14px;
+    content: '';
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    margin: auto 0;
+    background: $iconsColor;
+  }
+}
+
+.form-group {
+  position: relative;
+}
+input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea {
+  background-color: transparent;
+  border: none;
+  border-bottom: 1px solid $textColor;
+  border-radius: 0;
+  outline: none;
+  height: 3rem;
+  width: 100%;
+  font-size: 1rem;
+  margin: 0 0 15px 0;
+  padding: 0;
+  box-shadow: none;
+  box-sizing: content-box;
+  transition: all .2s;
+  &:focus {
+    border-bottom: 1px solid $activeColor;
+    box-shadow: 0 1px 0 0 $activeColor;
+    &~.input-label{
+      -webkit-transform: translateY(-140%) scale(1);
+      transform: translateY(-140%) scale(1);
+      color: $activeColor;
+    }
+  }
+}
+.input-label {
+  color: $textColor;
+  position: absolute;
+  top: 0.8rem;
+  left: 0;
+  font-size: 1rem;
+  cursor: text;
+  transition: all .2s;
+  transform: scale(1.25);
+  transform-origin: left bottom;
 }
\ No newline at end of file
diff --git a/src/css/variables.scss b/src/css/variables.scss
index 0ed9536..6217f6b 100644
--- a/src/css/variables.scss
+++ b/src/css/variables.scss
@@ -1,3 +1,4 @@
-$activeBg: rgb(16,108,200);
+$activeColor: rgb(16,108,200);
 $activeText: #fff;
-$textColor: #444;
\ No newline at end of file
+$textColor: #444;
+$iconsColor: #333;
\ No newline at end of file