diff --git a/src/components/App.js b/src/components/App.js
index 0135e2d..6928ae9 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -25,10 +25,17 @@ class App extends Component {
   render() {
     return (
       <div className="container-fluid">
-        <div className="navbar-fixed">
+        <div className="navbar">
           <nav>
-            <div className="nav-wrapper indigo lighten-4">
-              <a href="/" className="bran-logo" center>My Feed</a>
+            <div className="nav-wrapper">
+              <a href="/" className="brand-logo center">Logo</a>
+              <ul id="nav-mobile" className="left hide-on-med-and-down">
+                <li className="active"><a href="/">Dashboard</a></li>
+                <li><a href="/">Upcoming Migrations</a></li>
+                <li><a href="/">Reports</a></li>
+                <li><a href="/">Historical Migrations</a></li>
+
+              </ul>
             </div>
           </nav>
         </div>
diff --git a/src/components/Migrations/MigrationSingle.js b/src/components/Migrations/MigrationSingle.js
index 7acfd46..2fd124e 100644
--- a/src/components/Migrations/MigrationSingle.js
+++ b/src/components/Migrations/MigrationSingle.js
@@ -1,28 +1,22 @@
 import React from 'react';
 
 const MigrationSingle = ({ item }) => (
-    <div className="col s4">
-        <div className="card">
-            <div className="card-image">
-                <slian className="card-title">{item.migration_status}</slian>
-            </div>
-            <div className="card-content">
-                <li>{item.id}</li>
-                <li>{item.submit_time}</li>
-                <li>{item.domain}</li>
-                <li>{item.booked_time}</li>
-                <li>{item.original_server}</li>
-                <li>{item.new_server}</li>
-                <li>{item.username}</li>
-                <li>{item.brand}</li>
-                <li>{item.ticket_id}</li>
-                <li>{item.migration_status}</li>
-                <li>{item.agent_booked}</li>
-                <li>{item.migration_type}</li>
-            </div>
 
+    <div className="col s4 m4">
+        <div className="card">
+            <div className="card-content black-text">
+                <ul className="collection with-header">
+                    <li className="collection-header"><p>{item.migration_status}</p></li>
+                    <li className="collection-item">{item.domain}</li>
+                    <li className="collection-item">{item.booked_time}</li>
+                    <li className="collection-item">{item.migration_status}</li>
+                    <li className="collection-item">{item.id}</li>
+                </ul>
+
+            </div>
         </div>
     </div>
+
 );
 
 export default MigrationSingle;
diff --git a/src/components/Migrations/Migrations.js b/src/components/Migrations/Migrations.js
index a1e83c5..e892d0a 100644
--- a/src/components/Migrations/Migrations.js
+++ b/src/components/Migrations/Migrations.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import axios from 'axios';
 import MigrationSingle from './MigrationSingle';
 import Error from './Error';
 
@@ -12,24 +13,25 @@ class Migrations extends Component {
     }
 
     componentDidMount() {
-        const url = `http://benjamyn.love:8000/migrations/`;
+        const url = `https://devapi.benjamyn.love/migrations/`;
 
-        fetch(url)
+        axios.get(url)
             .then((response) => {
-                return response.json();
-            })
-            .then((data) => {
                 this.setState({
-                    migs: data
-                })
+                    migs: response.data
+                });
+
             })
+
             .catch((error) => {
                 this.setState({
                     error: true
                 })
-            });
+            })
+
     }
 
+
     renderItems() {
         if (!this.state.error) {
             return this.state.migs.map((item) => (