diff --git a/.DS_Store b/.DS_Store
index e670f7a..1db1709 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/build/components.html b/build/components.html
index dd68fe4..a4be84e 100644
--- a/build/components.html
+++ b/build/components.html
@@ -10,15 +10,129 @@
     </div>
 </div>
 </script>
-<script type="text/ractive" id="teacher"><div class="row">
-    <div class="col s12 m6 offset-m3">
-        <div class="card">
-            <div class="card-content">
-                <span class="card-title grey-text">{{studentName}} - {{age}}</span>
-                <p>I am a very simple card. I am good at containing small bits of information.
-                    I am convenient because I require little markup to use effectively.</p>
-            </div>
-        </div>
+<script type="text/ractive" id="teacher"><!-- {{JSON.stringify(.)}} -->
+
+
+<!-- Navbar goes here -->
+<nav>
+    <div class="nav-wrapper">
+    <!-- Using the Logo as a Modal Trigger (added the modal-trigger class) -->
+      <a href="#modal1" class="brand-logo right modal-trigger">Click here for the Modal</a>
+
+      <ul id="nav-mobile" class="left hide-on-med-and-down">
+        <li><a href="#">Class Data</a></li>
+        <li><a href="#">Notifications</a></li>
+        <li><a href="#">Administrate Students</a></li>
+      </ul>
     </div>
-</div>
+  </nav>
+  
+ <!-- Modal Trigger -->
+  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
+
+  <!-- Modal Structure -->
+  <div id="modal1" class="modal">
+    <div class="modal-content">
+      <h4>Modal Header</h4>
+      <p>A bunch of text</p>
+    </div>
+    <div class="modal-footer">
+      <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
+    </div>
+  </div>
+
+<!-- Page Layout here -->
+<div class="row">
+	<div class="col s12 m4 l3"> <!-- Note that "m4 l3" was added -->
+        <!-- Grey navigation panel
+
+              This content will be:
+          3-columns-wide on large screens,
+          4-columns-wide on medium screens,
+          12-columns-wide on small screens  -->
+          <ul class='fields'> <!--from http://learn.ractivejs.org/partials/2 -->
+          	{{#each fields:i}}
+          		{{>field}}
+          	{{/each}}
+          	<strong>Fields are in here</strong>
+          </ul>
+      </div>
+
+      <div class="col s12 m8 l9"> <!-- Note that "m8 l9" was added -->
+        <!-- Teal page content
+
+              This content will be:
+          9-columns-wide on large screens,
+          8-columns-wide on medium screens,
+          12-columns-wide on small screens  -->
+
+          <div class="card z-depth-2">
+          	<div class="card-content">
+          		<span class="card-title grey-text">{{studentName}} - {{age}}</span>
+          		<p>I am a very simple card. I am good at containing small bits of information.
+          			I am convenient because I require little markup to use effectively.</p>
+          			Class 8Y/IT1 <br>
+          			ICT Module Box <br>
+          			<br>
+          			Behaviour <br>
+          			etc. <br>
+          			<p>This is where the actual table data goes </p>
+
+          			<table class="highlight">
+          				<thead>
+          					<tr>
+          						<th data-field="id">Name</th>
+          						<th data-field="name">Item Name</th>
+          						<th data-field="price">Item Price</th>
+          					</tr>
+          				</thead>
+          				<tbody>
+          					<tr>
+          						<td>Alvin</td>
+          						<td>Eclair</td>
+          						<td>$0.87</td>
+          					</tr>
+          					<tr>
+          						<td>Alan</td>
+          						<td>Jellybean</td>
+          						<td>$3.76</td>
+          					</tr>
+          					<tr>
+          						<td>Jonathan</td>
+          						<td>Lollipop</td>
+          						<td>$7.00</td>
+          					</tr>
+          					<tr>
+          						<td>Shannon</td>
+          						<td>KitKat</td>
+          						<td>$9.99</td>
+          					</tr>
+          				</tbody>
+          			</table>
+
+          		</div>
+          	</div>
+
+
+          </div>
+
+      </div>
+
+
+<!-- <div class="col s12 m6 offset-m3">
+      	<div class="card">
+      		<div class="card-content">
+      			<span class="card-title grey-text">{{studentName}} - {{age}}</span>
+      			<p>I am a very simple card. I am good at containing small bits of information.
+      				I am convenient because I require little markup to use effectively.</p>
+      			</div>
+      		</div>
+      	</div>
+      </div> -->
+
+
+
+
+
+      
 </script>
\ No newline at end of file
diff --git a/build/components.js b/build/components.js
index f978894..193bc1f 100644
--- a/build/components.js
+++ b/build/components.js
@@ -5,3 +5,22 @@ Ractive.components.parent = Ractive.extend({
 Ractive.components.teacher = Ractive.extend({
     template:'#teacher'
 });
+
+// $(document).ready(function(){
+//     // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
+//     $('.modal-trigger').leanModal({
+//       dismissible: false, // Modal can be dismissed by clicking outside of the modal
+//       opacity: .5, // Opacity of modal background
+//       in_duration: 300, // Transition in duration
+//       out_duration: 200, // Transition out duration
+//       ready: function() { alert('Ready'); }, // Callback for Modal open
+//       complete: function() { alert('Closed'); } // Callback for Modal close
+//     }
+//   );
+//   });
+
+  $(document).ready(function(){
+    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
+    $('.modal-trigger').leanModal();
+  });
+          
diff --git a/build/index.html b/build/index.html
index 7d44a6c..e432fde 100644
--- a/build/index.html
+++ b/build/index.html
@@ -3,16 +3,9 @@
     <head>
         <meta charset="utf-8">
         <title>RCard</title>
-        <script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
-        <script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
-
         <!-- Compiled and minified CSS -->
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
 
-        <!-- Compiled and minified JavaScript -->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
-
-        <script src='/index.js'></script>
     </head>
     <body>
 
@@ -28,20 +21,141 @@
     </div>
 </div>
 </script>
-<script type="text/ractive" id="teacher"><div class="row">
-    <div class="col s12 m6 offset-m3">
-        <div class="card">
-            <div class="card-content">
-                <span class="card-title grey-text">{{studentName}} - {{age}}</span>
-                <p>I am a very simple card. I am good at containing small bits of information.
-                    I am convenient because I require little markup to use effectively.</p>
-            </div>
-        </div>
+<script type="text/ractive" id="teacher"><!-- {{JSON.stringify(.)}} -->
+
+
+<!-- Navbar goes here -->
+<nav>
+    <div class="nav-wrapper">
+    <!-- Using the Logo as a Modal Trigger (added the modal-trigger class) -->
+      <a href="#modal1" class="brand-logo right modal-trigger">Click here for the Modal</a>
+
+      <ul id="nav-mobile" class="left hide-on-med-and-down">
+        <li><a href="#">Class Data</a></li>
+        <li><a href="#">Notifications</a></li>
+        <li><a href="#">Administrate Students</a></li>
+      </ul>
     </div>
-</div>
+  </nav>
+  
+ <!-- Modal Trigger -->
+  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
+
+  <!-- Modal Structure -->
+  <div id="modal1" class="modal">
+    <div class="modal-content">
+      <h4>Modal Header</h4>
+      <p>A bunch of text</p>
+    </div>
+    <div class="modal-footer">
+      <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
+    </div>
+  </div>
+
+<!-- Page Layout here -->
+<div class="row">
+	<div class="col s12 m4 l3"> <!-- Note that "m4 l3" was added -->
+        <!-- Grey navigation panel
+
+              This content will be:
+          3-columns-wide on large screens,
+          4-columns-wide on medium screens,
+          12-columns-wide on small screens  -->
+          <ul class='fields'> <!--from http://learn.ractivejs.org/partials/2 -->
+          	{{#each fields:i}}
+          		{{>field}}
+          	{{/each}}
+          	<strong>Fields are in here</strong>
+          </ul>
+      </div>
+
+      <div class="col s12 m8 l9"> <!-- Note that "m8 l9" was added -->
+        <!-- Teal page content
+
+              This content will be:
+          9-columns-wide on large screens,
+          8-columns-wide on medium screens,
+          12-columns-wide on small screens  -->
+
+          <div class="card z-depth-2">
+          	<div class="card-content">
+          		<span class="card-title grey-text">{{studentName}} - {{age}}</span>
+          		<p>I am a very simple card. I am good at containing small bits of information.
+          			I am convenient because I require little markup to use effectively.</p>
+          			Class 8Y/IT1 <br>
+          			ICT Module Box <br>
+          			<br>
+          			Behaviour <br>
+          			etc. <br>
+          			<p>This is where the actual table data goes </p>
+
+          			<table class="highlight">
+          				<thead>
+          					<tr>
+          						<th data-field="id">Name</th>
+          						<th data-field="name">Item Name</th>
+          						<th data-field="price">Item Price</th>
+          					</tr>
+          				</thead>
+          				<tbody>
+          					<tr>
+          						<td>Alvin</td>
+          						<td>Eclair</td>
+          						<td>$0.87</td>
+          					</tr>
+          					<tr>
+          						<td>Alan</td>
+          						<td>Jellybean</td>
+          						<td>$3.76</td>
+          					</tr>
+          					<tr>
+          						<td>Jonathan</td>
+          						<td>Lollipop</td>
+          						<td>$7.00</td>
+          					</tr>
+          					<tr>
+          						<td>Shannon</td>
+          						<td>KitKat</td>
+          						<td>$9.99</td>
+          					</tr>
+          				</tbody>
+          			</table>
+
+          		</div>
+          	</div>
+
+
+          </div>
+
+      </div>
+
+
+<!-- <div class="col s12 m6 offset-m3">
+      	<div class="card">
+      		<div class="card-content">
+      			<span class="card-title grey-text">{{studentName}} - {{age}}</span>
+      			<p>I am a very simple card. I am good at containing small bits of information.
+      				I am convenient because I require little markup to use effectively.</p>
+      			</div>
+      		</div>
+      	</div>
+      </div> -->
+
+
+
+
+
+      
 </script>
 
         <div id='load'></div>
 
+        <script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
+        <script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
+
+        <!-- Compiled and minified JavaScript -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
+
+        <script src='/index.js'></script>
     </body>
 </html>
diff --git a/build/index.js b/build/index.js
index 8cbd2d5..b07b058 100644
--- a/build/index.js
+++ b/build/index.js
@@ -8,6 +8,25 @@ Ractive.components.teacher = Ractive.extend({
     template:'#teacher'
 });
 
+// $(document).ready(function(){
+//     // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
+//     $('.modal-trigger').leanModal({
+//       dismissible: false, // Modal can be dismissed by clicking outside of the modal
+//       opacity: .5, // Opacity of modal background
+//       in_duration: 300, // Transition in duration
+//       out_duration: 200, // Transition out duration
+//       ready: function() { alert('Ready'); }, // Callback for Modal open
+//       complete: function() { alert('Closed'); } // Callback for Modal close
+//     }
+//   );
+//   });
+
+  $(document).ready(function(){
+    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
+    $('.modal-trigger').leanModal();
+  });
+          
+
 
   $.getJSON('/data/'+location.pathname.split('/').slice(3).join('/'), function(res){
 
diff --git a/client/components/teacher/teacher.html b/client/components/teacher/teacher.html
index 2c594fa..9ba99cf 100644
--- a/client/components/teacher/teacher.html
+++ b/client/components/teacher/teacher.html
@@ -1,11 +1,125 @@
-<div class="row">
-    <div class="col s12 m6 offset-m3">
-        <div class="card">
-            <div class="card-content">
-                <span class="card-title grey-text">{{studentName}} - {{age}}</span>
-                <p>I am a very simple card. I am good at containing small bits of information.
-                    I am convenient because I require little markup to use effectively.</p>
-            </div>
-        </div>
+<!-- {{JSON.stringify(.)}} -->
+
+
+<!-- Navbar goes here -->
+<nav>
+    <div class="nav-wrapper">
+    <!-- Using the Logo as a Modal Trigger (added the modal-trigger class) -->
+      <a href="#modal1" class="brand-logo right modal-trigger">Click here for the Modal</a>
+
+      <ul id="nav-mobile" class="left hide-on-med-and-down">
+        <li><a href="#">Class Data</a></li>
+        <li><a href="#">Notifications</a></li>
+        <li><a href="#">Administrate Students</a></li>
+      </ul>
     </div>
-</div>
+  </nav>
+  
+ <!-- Modal Trigger -->
+  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
+
+  <!-- Modal Structure -->
+  <div id="modal1" class="modal">
+    <div class="modal-content">
+      <h4>Modal Header</h4>
+      <p>A bunch of text</p>
+    </div>
+    <div class="modal-footer">
+      <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
+    </div>
+  </div>
+
+<!-- Page Layout here -->
+<div class="row">
+	<div class="col s12 m4 l3"> <!-- Note that "m4 l3" was added -->
+        <!-- Grey navigation panel
+
+              This content will be:
+          3-columns-wide on large screens,
+          4-columns-wide on medium screens,
+          12-columns-wide on small screens  -->
+          <ul class='fields'> <!--from http://learn.ractivejs.org/partials/2 -->
+          	{{#each fields:i}}
+          		{{>field}}
+          	{{/each}}
+          	<strong>Fields are in here</strong>
+          </ul>
+      </div>
+
+      <div class="col s12 m8 l9"> <!-- Note that "m8 l9" was added -->
+        <!-- Teal page content
+
+              This content will be:
+          9-columns-wide on large screens,
+          8-columns-wide on medium screens,
+          12-columns-wide on small screens  -->
+
+          <div class="card z-depth-2">
+          	<div class="card-content">
+          		<span class="card-title grey-text">{{studentName}} - {{age}}</span>
+          		<p>I am a very simple card. I am good at containing small bits of information.
+          			I am convenient because I require little markup to use effectively.</p>
+          			Class 8Y/IT1 <br>
+          			ICT Module Box <br>
+          			<br>
+          			Behaviour <br>
+          			etc. <br>
+          			<p>This is where the actual table data goes </p>
+
+          			<table class="highlight">
+          				<thead>
+          					<tr>
+          						<th data-field="id">Name</th>
+          						<th data-field="name">Item Name</th>
+          						<th data-field="price">Item Price</th>
+          					</tr>
+          				</thead>
+          				<tbody>
+          					<tr>
+          						<td>Alvin</td>
+          						<td>Eclair</td>
+          						<td>$0.87</td>
+          					</tr>
+          					<tr>
+          						<td>Alan</td>
+          						<td>Jellybean</td>
+          						<td>$3.76</td>
+          					</tr>
+          					<tr>
+          						<td>Jonathan</td>
+          						<td>Lollipop</td>
+          						<td>$7.00</td>
+          					</tr>
+          					<tr>
+          						<td>Shannon</td>
+          						<td>KitKat</td>
+          						<td>$9.99</td>
+          					</tr>
+          				</tbody>
+          			</table>
+
+          		</div>
+          	</div>
+
+
+          </div>
+
+      </div>
+
+
+<!-- <div class="col s12 m6 offset-m3">
+      	<div class="card">
+      		<div class="card-content">
+      			<span class="card-title grey-text">{{studentName}} - {{age}}</span>
+      			<p>I am a very simple card. I am good at containing small bits of information.
+      				I am convenient because I require little markup to use effectively.</p>
+      			</div>
+      		</div>
+      	</div>
+      </div> -->
+
+
+
+
+
+      
diff --git a/client/components/teacher/teacher.js b/client/components/teacher/teacher.js
index 23744ba..e08850f 100644
--- a/client/components/teacher/teacher.js
+++ b/client/components/teacher/teacher.js
@@ -1,3 +1,22 @@
 Ractive.components.teacher = Ractive.extend({
     template:'#teacher'
 });
+
+// $(document).ready(function(){
+//     // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
+//     $('.modal-trigger').leanModal({
+//       dismissible: false, // Modal can be dismissed by clicking outside of the modal
+//       opacity: .5, // Opacity of modal background
+//       in_duration: 300, // Transition in duration
+//       out_duration: 200, // Transition out duration
+//       ready: function() { alert('Ready'); }, // Callback for Modal open
+//       complete: function() { alert('Closed'); } // Callback for Modal close
+//     }
+//   );
+//   });
+
+  $(document).ready(function(){
+    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
+    $('.modal-trigger').leanModal();
+  });
+          
diff --git a/client/index.html b/client/index.html
index cd353ff..5fe0e08 100644
--- a/client/index.html
+++ b/client/index.html
@@ -3,16 +3,9 @@
     <head>
         <meta charset="utf-8">
         <title>RCard</title>
-        <script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
-        <script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
-
         <!-- Compiled and minified CSS -->
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
 
-        <!-- Compiled and minified JavaScript -->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
-
-        <script src='/index.js'></script>
     </head>
     <body>
 
@@ -20,5 +13,12 @@
 
         <div id='load'></div>
 
+        <script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
+        <script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
+
+        <!-- Compiled and minified JavaScript -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
+
+        <script src='/index.js'></script>
     </body>
 </html>