diff --git a/dashboard/index.html b/dashboard/index.html
index 3db58fb..0dbb901 100644
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -66,51 +66,77 @@
 </head>
 
 <body onload="onLoad();">
-  <div id="main_content">
-  <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
-    <header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
-      <div class="mdl-layout__header-row">
-        <span class="mdl-layout-title">Dashboard</span>
-        <div class="mdl-layout-spacer"></div>
-      </div>
-    </header>
-    <div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
-      <header class="demo-drawer-header">
-        <img src="" id="firebase_photo" class="demo-avatar">
-        <span id="firebase_name"></span>
-        <div class="demo-avatar-dropdown">
-          <span id="firebase_email"></span>
+  <img src="loading.gif" id="loading">
+  <div id="main_content" style="display: none;">
+    <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
+      <header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
+        <div class="mdl-layout__header-row">
+          <span class="mdl-layout-title">Dashboard</span>
           <div class="mdl-layout-spacer"></div>
-          <button id="accbtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
-            <i class="material-icons" role="presentation">arrow_drop_down</i>
-            <span class="visuallyhidden">Options</span>
-          </button>
-          <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="accbtn">
-            <li class="mdl-menu__item" onclick="logOut()">Log Out</li>
-          </ul>
         </div>
       </header>
-      <nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
-        <a class="mdl-navigation__link" href="javascript:displayProjects('all')"><i class="mdl-color-text--blue-grey-400 material-icons"
-          role="presentation">home</i>Home</a>
-        <a class="mdl-navigation__link" href="javascript:displayProjects('active')"><i class="mdl-color-text--blue-grey-400 material-icons"
-            role="presentation">home</i>Projects</a>
-        <a class="mdl-navigation__link" href="javascript:displayProjects('inactive')"><i class="mdl-color-text--blue-grey-400 material-icons"
-            role="presentation">inbox</i>Blog Posts</a>
-        <a class="mdl-navigation__link" href="javascript:displayProjects('canceled')"><i class="mdl-color-text--blue-grey-400 material-icons"
-            role="presentation">delete</i>Software Programs</a>
-            <a class="mdl-navigation__link" href="javascript:displayProjects('canceled')"><i class="mdl-color-text--blue-grey-400 material-icons"
-              role="presentation">delete</i>Satellite Images</a>
-              <a class="mdl-navigation__link" href="javascript:displayProjects('canceled')"><i class="mdl-color-text--blue-grey-400 material-icons"
-                role="presentation">delete</i>Link Explorer</a>
-      </nav>
+      <div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
+        <header class="demo-drawer-header">
+          <img src="" id="firebase_photo" class="demo-avatar">
+          <span id="firebase_name"></span>
+          <div class="demo-avatar-dropdown">
+            <span id="firebase_email"></span>
+            <div class="mdl-layout-spacer"></div>
+            <button id="accbtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
+              <i class="material-icons" role="presentation">arrow_drop_down</i>
+              <span class="visuallyhidden">Options</span>
+            </button>
+            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="accbtn">
+              <li class="mdl-menu__item" onclick="logOut()">Log Out</li>
+            </ul>
+          </div>
+        </header>
+        <nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
+          <a class="mdl-navigation__link" href="javascript:displayProjects('all')"><i
+              class="mdl-color-text--blue-grey-400 material-icons" role="presentation">home</i>Home</a>
+          <a class="mdl-navigation__link" href="javascript:displayProjects('active')"><i
+              class="mdl-color-text--blue-grey-400 material-icons" role="presentation">grid_view</i>Projects</a>
+          <a class="mdl-navigation__link" href="javascript:displayProjects('inactive')"><i
+              class="mdl-color-text--blue-grey-400 material-icons" role="presentation">rss_feed</i>Blog Posts</a>
+          <a class="mdl-navigation__link" href="javascript:displayProjects('canceled')"><i
+              class="mdl-color-text--blue-grey-400 material-icons" role="presentation">developer_board</i>Software</a>
+          <a class="mdl-navigation__link" href="javascript:displayProjects('canceled')"><i
+              class="mdl-color-text--blue-grey-400 material-icons"
+              role="presentation">settings_input_antenna</i>Satellite Images</a>
+          <a class="mdl-navigation__link" href="javascript:displayProjects('canceled')"><i
+              class="mdl-color-text--blue-grey-400 material-icons" role="presentation">link</i>Link Explorer</a>
+          <a href="https://nicholaspease.com" class="mdl-navigation__link"
+            href="javascript:displayProjects('canceled')"><i class="mdl-color-text--blue-grey-400 material-icons"
+              role="presentation">keyboard_return</i>Return to Website</a>
+        </nav>
+      </div>
+      <main class="mdl-layout__content mdl-color--grey-100">
+        <div id="projects_tab">
+          <div class="square-left" id="projects">
+
+          </div>
+          <div class="square-right">
+            <h1>Title</h1>
+            <form action="#">
+              <div class="mdl-textfield mdl-js-textfield">
+                <input class="mdl-textfield__input" type="text" id="sample1">
+                <label class="mdl-textfield__label" for="sample1">Link </label>
+                
+                <!-- Floating Multiline Textfield -->
+                <form action="#">
+                  <div class="mdl-textfield mdl-js-textfield">
+                    <textarea class="mdl-textfield__input" type="text" rows="3" id="sample5"></textarea>
+                    <label class="mdl-textfield__label" for="sample5">Description</label>
+                  </div>
+                </form>
+              </div>
+            </form>
+          </div>
+        </div>
+      </main>
     </div>
-    <main class="mdl-layout__content mdl-color--grey-100">
-      <div id="projects"></div>
-    </main>
   </div>
-  </div>
-  <div id="login_container">
+  <div id="login_container" style="display: none;">
     <div class="login-card mdl-card mdl-shadow--2dp">
       <div class="mdl-card__title mdl-card--expand">
         <h2 class="mdl-card__title-text">Admin Dashboard - Login</h2>
@@ -125,7 +151,7 @@
       </div>
     </div>
   </div>
-  <div id="unauthorized">
+  <div id="unauthorized" style="display: none;">
     <div class="unauthorized-card mdl-card mdl-shadow--2dp">
       <div class="mdl-card__title mdl-card--expand">
         <h2 class="mdl-card__title-text">Unauthorized Login</h2>
diff --git a/dashboard/loading.gif b/dashboard/loading.gif
new file mode 100644
index 0000000..a423474
Binary files /dev/null and b/dashboard/loading.gif differ
diff --git a/dashboard/script.js b/dashboard/script.js
index bf1cb82..0691096 100644
--- a/dashboard/script.js
+++ b/dashboard/script.js
@@ -5,6 +5,7 @@ function onLoad() {
     document.getElementById("main_content").style.display = "none";
     document.getElementById("unauthorized").style.display = "none";
     checkLogin()
+    displayProjects("all")
     setInterval(function() {
         checkLogin();
     }, 1000);
@@ -24,6 +25,27 @@ function startFirebase() {
     firebase.initializeApp(config);
 }
 
+function displayProjects(status) {
+    document.getElementById("projects").innerHTML = ""
+    database = firebase.database().ref("projects");
+    database.once('value', function (snapshot) {
+        snapshot.forEach(function (child) {
+            firebase.database().ref("projects/" + child["key"]).on('value', function (data) {
+                var data1 = data.val();
+                var a = document.createElement("div")
+                var title = "'"+data1["title"]+"'"
+                a.innerHTML = '<div class="project-card mdl-card mdl-shadow--2dp"> <div class="mdl-card__title mdl-card--expand"> <h2 class="mdl-card__title-text">' + data1["title"].replace(/,/g, ".") + '<br>' + data1["status"] + '</h2> </div> <div class="mdl-card__supporting-text">' + data1["description"] + ' </div> <div class="mdl-card__actions mdl-card--border"> <a href="javascript:editProject(' + title + ')" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> Edit </a> </div> </div>'
+                
+                if (status === "all") {
+                    document.getElementById("projects").appendChild(a)
+                } else if (data1["status"] === status) {
+                    document.getElementById("projects").appendChild(a)
+                }
+            })
+        })
+    });
+}
+
 // Make completly sure user is authenticated.
 function verify() {
     firebase.auth().onAuthStateChanged(function (user) {
@@ -47,6 +69,7 @@ function checkLogin() {
         if (user) {
             readData("users", function (array) {
                 if (array[firebase.auth().currentUser.uid]) {
+                    document.getElementById("loading").style.display = "none";
                     document.getElementById("firebase_name").innerText = firebase.auth().currentUser.displayName
                     document.getElementById("firebase_email").innerText = firebase.auth().currentUser.email
                     document.getElementById("firebase_photo").setAttribute("src", firebase.auth().currentUser.photoURL)
@@ -54,12 +77,14 @@ function checkLogin() {
                     document.getElementById("login_container").style.display = "none";
                     document.getElementById("unauthorized").style.display = "none";
                 } else {
+                    document.getElementById("loading").style.display = "none";
                     document.getElementById("main_content").innerHTML = ""
                     document.getElementById("login_container").innerHTML = ""
                     document.getElementById("unauthorized").style.display = "block";
                 }
             })
         } else {
+            document.getElementById("loading").style.display = "none";
             document.getElementById("main_content").style.display = "none";
             document.getElementById("login_container").style.display = "block";
             document.getElementById("unauthorized").style.display = "none";
diff --git a/dashboard/style.css b/dashboard/style.css
index 31da49b..59982d3 100644
--- a/dashboard/style.css
+++ b/dashboard/style.css
@@ -1,3 +1,34 @@
+.square-left {
+    position: absolute;
+    left: 2%;
+    width: 40%;
+    top: 2%;
+    height: 96%;
+    background-color: white;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+    overflow: auto;
+}
+
+.square-right {
+    position: absolute;
+    right: 2%;
+    width: 54%;
+    top: 2%;
+    height: 96%;
+    background-color: white;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+}
+
+#projects_tab {
+    width: 100%;
+    height: 100%;;
+}
+
+.project-card {
+    width: 90%;
+    margin: 10px;
+}
+
 .login-card {
     position: absolute;
     top: 0; left: 0; bottom: 0; right: 0;
@@ -22,6 +53,13 @@
     height: 100%;
 }
 
+#loading {
+    width: 100%;
+    position: absolute;
+    top: 0; left: 0; bottom: 0; right: 0;
+    margin: auto;
+}
+
 .active {color: green;}
 .inactive {color: orange;}
 .canceled {color: red;}
