diff --git a/SmearcarDB/static/index.css b/SmearcarDB/static/index.css
index 1e031df..484d6ec 100644
--- a/SmearcarDB/static/index.css
+++ b/SmearcarDB/static/index.css
@@ -200,9 +200,12 @@ a {
 
 	transition: opacity 0.3s cubic-bezier(.25,.8,.25,1);
 
-	grid-gap: 2vh;
+	grid-gap: 2vh;	
+}
+
+#home, #dataValues {
 	grid-template-columns: 1fr 1fr;
-	grid-template-rows: 2fr 4fr 4fr;
+	grid-template-rows: 2fr 5fr 2fr;
 }
 
 .card {
@@ -264,11 +267,33 @@ a {
 }
 
 #langInfoCont {
+	display: grid;
+	font-weight: 300;
 	font-size: 150%;
-	margin-left: 4vh;
+	margin: auto 0 auto 4vh;
 }
 
 #dataTable {
 	grid-column: 1 / 3;
 	grid-row: 2;
+}
+
+#dataTableCont {
+	display: grid;
+	font-weight: 300;
+	grid-template-columns: repeat(4, 1fr);
+	grid-template-rows: 100%;
+	grid-gap: 2vh;
+	padding: 2vh;
+}
+
+#dataTableCont div {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	grid-template-rows: repeat(8, 1fr);
+}
+
+#dataTableCont div p {
+	font-size: 130%;
+	padding: 0 5% 0 5%;
 }
\ No newline at end of file
diff --git a/SmearcarDB/static/index.js b/SmearcarDB/static/index.js
index 040133e..cd3a67e 100644
--- a/SmearcarDB/static/index.js
+++ b/SmearcarDB/static/index.js
@@ -1,6 +1,7 @@
 var navSelect = "home";
-var serverURL = window.location.href;
+var serverURL = window.location.origin;
 var data;
+var trelloInfo = {};
 
 
 var navi = [ // Array containing navigation items in form [Font-Awesome class name, Display Text, Onclick function].
@@ -10,6 +11,10 @@ var navi = [ // Array containing navigation items in form [Font-Awesome class na
     ["bell", "Updates and Progress", "updates"]
 ];
 
+var members = [
+    "Kenneth Jao", "Yaman Qalieh", "Enrico Colon", "Arav Agarwal"
+];
+
 var dropOp = {
     //Insert correct   
 };
@@ -63,7 +68,7 @@ function updateNav(op) {
 
 function getData() {
     $.ajax({
-            url: serverURL + 'server',
+            url: serverURL + '/server',
             type: 'GET'
         })
         .then(
@@ -93,31 +98,75 @@ function phoneme(p) {
         }
         return undefined;
     }).filter(function(a) {
-        if (a === undefined) {
-            return false;
-        }
-        return true;
+        return (a !== undefined);
     });
 }
 
 function generateDropOp() { // For options that change based on data.
     dropOp["langSelect"] = [function() {
-        var info = document.getElementById("langInfoCont");
-        while (info.firstChild) {
-            info.removeChild(info.firstChild);
-        }
-        var p = document.createElement("p");
-        var p2 = document.createElement("p2");
-        var a = document.createElement("a");
+        // Generate info box material.
         var langInfo = language(dropOpStore["langSelect"]);
-        p.appendChild(document.createTextNode("Type: " + langInfo.type));
-        p2.appendChild(document.createTextNode("Source: "));
-        a.href = langInfo.source;
-        srcText = (langInfo.source.length > 60) ? langInfo.source.substring(0, langInfo.source.length - 3) + "..." : langInfo.source;
-        a.appendChild(document.createTextNode(srcText));
-        p2.appendChild(a);
-        info.appendChild(p);
-        info.appendChild(p2);
+        var info = document.getElementById("langInfoCont");
+        info.style.opacity = "0";
+        setTimeout(function() {
+            while (info.firstChild) {
+                info.removeChild(info.firstChild);
+            }
+            var p = document.createElement("p");
+            var p2 = document.createElement("p");
+            var a = document.createElement("a");
+            p.appendChild(document.createTextNode("Type: " + (langInfo.type || "N/A")));
+            p2.appendChild(document.createTextNode("Source: "));
+            if(langInfo.source.length > 0) {
+                a.href = langInfo.source;
+                srcText = (langInfo.source.length > 60) ? langInfo.source.substring(0, langInfo.source.length - 3) + "..." : langInfo.source;
+                a.appendChild(document.createTextNode(srcText));
+                p2.appendChild(a); 
+            } else {
+                p2.appendChild(document.createTextNode("N/A"));
+            }
+            info.appendChild(p);
+            info.appendChild(p2);
+            info.style.opacity = "1";
+        }, 300);
+        // Generate data box material.
+        var dataBox = document.getElementById("dataTableCont");
+        var phonemes = Object.keys(langInfo.phonemes);
+        dataBox.style.opacity = "0";
+        setTimeout(function() {
+            while (dataBox.firstChild) {
+                dataBox.removeChild(dataBox.firstChild);
+            }
+            dataBox.style.gridTemplateColumns = "repeat("+Math.ceil(phonemes.length/6).toString() + ", 1fr)";
+            for(var i = 0; i < 9; i++) dataBox.appendChild(document.createElement("div")); // Extra divs will be filled if necessary.
+            for(i = 0; i < phonemes.length; i++) {
+                var tableNum = Math.floor(i/6);
+                var row = i+2-tableNum*7;
+                var p1 = document.createElement("p");
+                var p2 = document.createElement("p");
+                p1.style.textAlign = "right";
+                p2.style.textAlign = "left";
+                p1.style.borderRight = "1px solid #D5D5D5";
+                if(i%6 === 0) {
+                    var pT1 = document.createElement("p");
+                    var pT2 = document.createElement("p");
+                    pT1.style.textAlign = "right";
+                    pT2.style.textAlign = "left";
+                    pT1.style.borderRight = "1px solid #D5D5D5";
+                    pT1.style.borderBottom = "1px solid #D5D5D5";
+                    pT2.style.borderBottom = "1px solid #D5D5D5";
+                    pT1.appendChild(document.createTextNode("Phoneme"));
+                    pT2.appendChild(document.createTextNode("Percent"));
+                    dataBox.children[tableNum].appendChild(pT1);
+                    dataBox.children[tableNum].appendChild(pT2);
+                } 
+                p1.appendChild(document.createTextNode(phonemes[i]));
+                p2.appendChild(document.createTextNode(langInfo.phonemes[phonemes[i]])); 
+                dataBox.children[tableNum].appendChild(p1);
+                dataBox.children[tableNum].appendChild(p2);
+            }
+            dataBox.style.opacity = "1";
+        }, 300);
     }].concat(["Select language..."].concat(data.languages));
 }
 
@@ -175,7 +224,6 @@ function createDrop() {
 function dropOpUpdate(op) {
     var dropdown = document.querySelectorAll(".dropdown[option=" + op + "] .button p")[0];
     dropdown.textContent = dropOpStore[op];
-    console.log("hi");
     (dropOp[op][0])();
 }
 
@@ -189,6 +237,34 @@ document.onclick = function(event) {
     }
 }
 
+function getTrelloCards() {
+    Trello.authorize();
+    var cardArr, listArr, lists;
+    var cards = window.Trello.rest(
+        "GET", "boards/vm2c2IZd/cards", 
+        function success() {
+            cardArr = JSON.parse(cards.responseText);
+            lists = window.Trello.rest(
+            "GET", "boards/vm2c2IZd/lists",
+            function success() {
+                listArr = JSON.parse(lists.responseText);
+                for(var i = 0; i < listArr.length; i++) {
+                    var arr = cardArr.filter(function(obj) {
+                        return obj.idList === listArr[i].id;
+                    }).map(a => a.name);
+                    trelloInfo[listArr[i].name] = arr;
+                }
+            },
+            function error(e) {
+                console.log(e);
+            });
+        },
+        function error(e) {
+            console.log(e);
+    });
+}
+
 getData();
+getTrelloCards();
 createNav();
 updateNav(navSelect);
diff --git a/SmearcarDB/templates/index.html b/SmearcarDB/templates/index.html
index 92ad66f..0efc234 100644
--- a/SmearcarDB/templates/index.html
+++ b/SmearcarDB/templates/index.html
@@ -12,6 +12,7 @@
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script src="{{ url_for('static', filename='velocity.min.js') }}"></script>
     <script src="https://use.fontawesome.com/c8d5486cd8.js"></script>
+    <script src="https://trello.com/1/client.js?key=dd3d6b561fe1a0abcacdc80ad0c4fd9a"></script>
 </head>
 
 <body>
@@ -24,6 +25,14 @@
     </div>
     <div id="mainContainer">
         <div id="home" class="optionContainer">
+            <div id="roles" class="card">
+            </div>
+            <div id="about" class="card">
+            </div>
+            <div id="tasks">
+            </div>
+        </div>
+        <div id="dataValues" class="optionContainer">
             <div id="langSelect" class="card">
                 <h2>Language</h2>
                 <div option="langSelect" class="dropdown transition">
@@ -32,35 +41,22 @@
             <div id="dataInfo" class="card">
                 <h2>Info</h2>
                 <div id="langInfoCont">
-                    
                 </div>
             </div>
             <div id="dataTable" class="card">
                 <h2>Data</h2>
-            </div>
-        </div>
-        <div id="dataValues" class="optionContainer">
-            <div id="langSelect" class="card">
-            </div>
-            <div id="dataInfo" class="card">
-            </div>
-            <div id="dataTable" class="card">
+                <div id="dataTableCont">
+                </div>
             </div>
         </div>
         <div id="files" class="optionContainer">
-            <div id="langSelect" class="card">
-            </div>
-            <div id="dataInfo" class="card">
-            </div>
-            <div id="dataTable" class="card">
+            <div class="temp card">
+                <h2>Currently in progress!</h2>
             </div>
         </div>
         <div id="updates" class="optionContainer">
-            <div id="langSelect" class="card">
-            </div>
-            <div id="dataInfo" class="card">
-            </div>
-            <div id="dataTable" class="card">
+            <div class="temp card">
+                <h2>Currently in progress!</h2>
             </div>
         </div>
     </div>