diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8a535a4
--- /dev/null
+++ b/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+  <html>
+    <head>
+      <!--Import Google Icon Font-->
+      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+      <!--Import materialize.css-->
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
+
+      <!--Let browser know website is optimized for mobile-->
+      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    </head>
+
+    <body>
+      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
+      <script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>
+
+      <div class="container">
+
+        <h1>Malay Johnny</h1>
+
+        <h2>Favorite Programming Languages</h2>
+        <ul class="collection">
+          <li class="collection-item">C++</li>
+          <li class="collection-item">C#</li>
+        </ul>
+
+        <h2>Favorite Food</h2>
+        <ul class="collection" id="foods">
+
+        </ul>
+
+      </div>
+
+      <script>
+
+        // create a firebase reference to the root
+        var ref = new Firebase('https://firstucdd.firebaseio.com')
+
+        // read data from the location bio/favorite_foods, only once
+        ref.child('bio/favorite_foods').once('value', function(snapshot){
+          var foods = snapshot.val()
+          foods.forEach(function(food){
+            $('#foods').append('<li class="collection-item">' + food + '</li>')
+          })
+        })
+      </script>
+    </body>
