diff --git a/src/components/Flamelink.js b/src/components/Flamelink.js
deleted file mode 100644
index d79007e..0000000
--- a/src/components/Flamelink.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import Grid from '@material-ui/core/Grid';
-import flamelinkApp from '../flamelink.js';
-import Layout from './Layout';
-class Flamelink extends Component {
-    constructor() {
-        super();
-
-        this.state = {
-          schemaDetails: ''
-        }
-      }
-
-    componentDidMount() {
-        // fetch the project name, once it retrieves resolve the promsie and update the state. 
-        flamelinkApp.schemas.getFields('martenSchemaDemo', { fields: [ 'title', 'key' ] })
-        .then(result => this.setState({
-          schemaDetails: result
-        }))
-      }
-
-    render() {
-
-        return(
-            <Fragment>
-                <Layout schemaDetails = {this.state.schemaDetails}/>
-            </Fragment>
-        );
-    }
-}
-
-export default Flamelink;
\ No newline at end of file
diff --git a/src/components/Layout.js b/src/components/Layout.js
index 760b0dc..c53272a 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -1,47 +1,27 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component} from 'react';
+import FlameLinkStructure from './FlameLinkStructure';
+import Grid from '@material-ui/core/Grid';
 import flamelinkApp from '../flamelink.js';
 
 class Layout extends Component {
-        constructor() {
-            super();
 
-            this.state = {
-              contentDetails: ''
-            }
-          }
-
-
-    getData(schemaData){
-        for (var val in this.props.schemaDetails){
-             this.getMoreData(this.props.schemaDetails[val]);
+    getSchemaFieldData(schemaData){
+        var arr = [];
+        for (var val in schemaData){
+            arr.push(val);
         }
+        return arr.map(this.createComponents, schemaData);
     }
 
-    getMoreData(moreData){
-        var tArray = document.createElement("H1");
-        var kArray = document.createElement("P");
-        this.getTitle(moreData.title, tArray);
-        this.getKey(moreData.key, kArray);
-    }
-
-    getTitle(title, arr){
-       var t = document.createTextNode(title);
-       arr.appendChild(t);
-       document.getElementById("demo").appendChild(arr);
-    }
-
-
-    getKey(key, arr){
-       var k = document.createTextNode(key); 
-       arr.appendChild(k);
-       document.getElementById("demo").appendChild(arr); 
+    createComponents(num){
+        return <FlameLinkStructure field={this[num]} type={this[num].type}/>
     }
 
     render() {
         return(
-            <div>
-                <p id="demo">{this.getData(this.props)}</p>
-            </div>
+                <Grid container>
+                    {this.getSchemaFieldData(this.props.schemaDetails)}
+                </Grid>
         );
     }
 }
diff --git a/src/firebase.js b/src/firebase.js
index 8d01e36..51e4393 100644
--- a/src/firebase.js
+++ b/src/firebase.js
@@ -10,6 +10,6 @@ const config = {
     messagingSenderId: "659856510832"
 };
 
-firebase.initializeApp(config);
+const firebaseApp = firebase.initializeApp(config);
 
 export default firebase;
\ No newline at end of file
diff --git a/src/pages/Info.js b/src/pages/Info.js
index 3db9d8f..72fa1cd 100644
--- a/src/pages/Info.js
+++ b/src/pages/Info.js
@@ -1,9 +1,22 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import Typography from '@material-ui/core/Typography';
-import Flamelink from '../components/Flamelink';
-
+import Layout from '../components/Layout';
+import flamelinkApp from '../flamelink.js';
 
 class Info extends Component {
+    constructor() {
+        super();
+
+        this.state = {
+          schemaDetails: '',
+        }
+
+        flamelinkApp.schemas.getFields('martenSchemaDemo', { fields: [ 'title', 'key', 'type', 'gridColumns' ] })
+        .then(result => this.setState({
+          schemaDetails: result
+        }))
+      }
+
     render() {
         
         return (
@@ -12,7 +25,10 @@ class Info extends Component {
                 <Typography variant='display1' align='center' gutterBottom>
                     Info
                 </Typography>
-                <Flamelink/>
+
+                <Fragment>
+                    <Layout schemaDetails = {this.state.schemaDetails}/>
+                </Fragment>
           
             </div>
         );