diff --git a/src/components/root/Navigation.js b/src/components/root/Navigation.js
index cc9ae91..37981b4 100644
--- a/src/components/root/Navigation.js
+++ b/src/components/root/Navigation.js
@@ -5,7 +5,7 @@ export class Navigation extends Component {
   render() {
     return (
       <nav>
-        <div className="navbar-fixed">
+        <div className="navbar-fixed cyan darken-4">
           <div className="nav-wrapper">
             <ul className="left hide-on-med-and-down">
               <li>
@@ -13,7 +13,7 @@ export class Navigation extends Component {
                   Dashboard
                 </Link>
               </li>
-              <li class="active">
+              <li>
                 <Link to="/book">Book</Link>
               </li>
               <li>
diff --git a/src/components/root/Pages/Book.js b/src/components/root/Pages/Book.js
index 36a33e0..6ceaa15 100644
--- a/src/components/root/Pages/Book.js
+++ b/src/components/root/Pages/Book.js
@@ -5,8 +5,17 @@ import FormPage from "./Forms/FormPage";
 export default class Book extends Component {
   render() {
     return (
-      <div>
-        <FormPage />
+      <div className="container-fluid">
+        <div className="section">
+          <h3>Book your migrations here</h3>
+        </div>
+        <div className="divider"></div>
+
+        <div className="section">
+          <div className="col s12">
+            <FormPage />
+          </div>
+        </div>
       </div>
     );
   }
diff --git a/src/components/root/Pages/Migrations.js b/src/components/root/Pages/Migrations.js
index ec4cedc..170ae0b 100644
--- a/src/components/root/Pages/Migrations.js
+++ b/src/components/root/Pages/Migrations.js
@@ -4,34 +4,6 @@ import MigrationSingle from "./Migrations/MigrationSingle";
 import Error from "../../actions/Error";
 
 class Migrations extends Component {
-  //  constructor(props) {
-  //    super(props);
-  //    this.state = {
-  //      migs: [],
-  //      migs1: [],
-  //      error: false,
-  //    };
-  //  }
-  //
-  //  componentDidMount() {
-  //    const url = `https://devapi.benjamyn.love/migrations/`;
-  //
-  //    axios
-  //      .get(url)
-  //      .then((response) => {
-  //        this.setState({
-  //          migs: response.data,
-  //          migs1: response.data.migration_status,
-  //        });
-  //      })
-  //
-  //      .catch((error) => {
-  //        this.setState({
-  //          error: true,
-  //        });
-  //      });
-  //  }
-
   renderItems() {
     if (!this.props.error) {
       return this.props.migs.map((item) => (
@@ -68,7 +40,7 @@ class Migrations extends Component {
               {this.bookedMig()}
             </div>
             <div className="card-action">
-              <a href="/upcoming-migrations">Booked Migrations</a>
+              <a href="/upcoming-migrations">booked</a>
             </div>
           </div>
         </div>
@@ -80,7 +52,7 @@ class Migrations extends Component {
               {this.waitingMig()}
             </div>
             <div className="card-action">
-              <a href="/upcoming-migrations">Waiting Termination</a>
+              <a href="/upcoming-migrations">waiting</a>
             </div>
           </div>
         </div>
@@ -92,7 +64,7 @@ class Migrations extends Component {
               {this.completedMig()}
             </div>
             <div className="card-action">
-              <a href="/historical-migrations">Completed</a>
+              <a href="/historical-migrations">complete</a>
             </div>
           </div>
         </div>
diff --git a/src/components/root/Pages/Migrations/UpcomingSingle.js b/src/components/root/Pages/Migrations/UpcomingSingle.js
index 6692c9e..e9e5230 100644
--- a/src/components/root/Pages/Migrations/UpcomingSingle.js
+++ b/src/components/root/Pages/Migrations/UpcomingSingle.js
@@ -3,6 +3,27 @@ import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
 import "../../../../../node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css";
 
 export const UpcomingSingle = ({ data }) => {
+  const options = {
+    sizePerPageList: [
+      {
+        text: "100",
+        value: 100,
+      },
+      {
+        text: "200",
+        value: 200,
+      },
+      {
+        text: "All",
+        value: data.length,
+      },
+    ],
+    sizePerPage: 20,
+    // pageStartIndex: 0,
+    // prePage: "Prev",
+    // nextPage: "Next",
+  };
+
   return (
     <div>
       <BootstrapTable
@@ -13,50 +34,92 @@ export const UpcomingSingle = ({ data }) => {
         condensed
         pagination
         version="4"
+        options={options}
       >
-        <TableHeaderColumn isKey dataField="submit_time" width="45%">
+        <TableHeaderColumn
+          isKey
+          dataField="submit_time"
+          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
+        >
           Submit time
         </TableHeaderColumn>
-        <TableHeaderColumn dataField="domain" width="35%">
+        <TableHeaderColumn
+          dataField="domain"
+          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
+        >
           Domain
         </TableHeaderColumn>
-        <TableHeaderColumn dataField="booked_time" width="20%">
+        <TableHeaderColumn
+          dataField="booked_time"
+          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
+        >
           Booked time
         </TableHeaderColumn>
-        <TableHeaderColumn dataField="original_server" width="20%">
+        <TableHeaderColumn
+          dataField="original_server"
+          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
+        >
           Original server
         </TableHeaderColumn>
-        <TableHeaderColumn dataField="new_server" width="20%">
+        <TableHeaderColumn
+          dataField="new_server"
+          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
+        >
           New server
         </TableHeaderColumn>
-        <TableHeaderColumn dataField="username" width="20%">
+        <TableHeaderColumn
+          dataField="username"
+          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
+        >
           Username
         </TableHeaderColumn>
-        <TableHeaderColumn dataField="notes" width="35%">
-          Notes
-        </TableHeaderColumn>
-        <TableHeaderColumn dataField="brand" width="20%">
+        <TableHeaderColumn dataField="notes">Notes</TableHeaderColumn>
+        <TableHeaderColumn
+          dataField="brand"
+          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
+        >
           Brand
         </TableHeaderColumn>
-        <TableHeaderColumn dataField="ticket_id" width="20%">
+        <TableHeaderColumn
+          dataField="ticket_id"
+          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
+        >
           Ticket ID
         </TableHeaderColumn>
-        <TableHeaderColumn dataField="migration_status" width="20%">
+        <TableHeaderColumn
+          dataField="migration_status"
+          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
+        >
           Status
         </TableHeaderColumn>
-        <TableHeaderColumn dataField="agent_booked" width="20%">
+        <TableHeaderColumn
+          dataField="agent_booked"
+          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
+        >
           Agent
         </TableHeaderColumn>
-        <TableHeaderColumn dataField="additional_domains" width="35%">
+        <TableHeaderColumn
+          dataField="additional_domains"
+          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
+        >
           Additional Domains
         </TableHeaderColumn>
-        <TableHeaderColumn dataField="migration_type" width="20%">
+        <TableHeaderColumn
+          dataField="migration_type"
+          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
+        >
           Migration type
         </TableHeaderColumn>
-        <TableHeaderColumn dataField="term_date" width="20%">
+        <TableHeaderColumn
+          dataField="term_date"
+          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
+        >
           est. Terminaton Date
         </TableHeaderColumn>
-        <TableHeaderColumn dataField="migration_cmd" width="20%">
+        <TableHeaderColumn
+          dataField="migration_cmd"
+          filter={{ type: "TextFilter", delay: 300, placeholder: "Filter" }}
+        >
           Migration CMD
         </TableHeaderColumn>
       </BootstrapTable>
@@ -66,24 +129,3 @@ export const UpcomingSingle = ({ data }) => {
 };
 {
 }
-
-{
-  /* <BootstrapTable data={data} pagination striped hover condensed>
-<TableHeaderColumn isKey dataField="domain">
-  Domain
-</TableHeaderColumn>
-
-<TableHeaderColumn dataField="domain">Domain</TableHeaderColumn>
-
-<TableHeaderColumn dataField="domain">Domain</TableHeaderColumn>
-<TableHeaderColumn dataField="booked_time">
-  Booked Time
-</TableHeaderColumn>
-<TableHeaderColumn
-  dataField="migration_status"
-  filter={{ type: "TextFilter", delay: 1000 }}
->
-  Status
-</TableHeaderColumn>
-</BootstrapTable> */
-}