diff --git a/assets/img/pizzamates/pizzamates1.png b/assets/img/pizzamates/pizzamates1.png
new file mode 100644
index 0000000..575c2fd
Binary files /dev/null and b/assets/img/pizzamates/pizzamates1.png differ
diff --git a/assets/img/pizzamates/pizzamates2.png b/assets/img/pizzamates/pizzamates2.png
new file mode 100644
index 0000000..2849e14
Binary files /dev/null and b/assets/img/pizzamates/pizzamates2.png differ
diff --git a/assets/img/pizzamates/pizzamates3.png b/assets/img/pizzamates/pizzamates3.png
new file mode 100644
index 0000000..d81dfa7
Binary files /dev/null and b/assets/img/pizzamates/pizzamates3.png differ
diff --git a/assets/img/portfolio/port-composerorpasta.jpg b/assets/img/portfolio/port-composerorpasta.jpg
new file mode 100644
index 0000000..70d46e7
Binary files /dev/null and b/assets/img/portfolio/port-composerorpasta.jpg differ
diff --git a/assets/img/portfolio/port05.jpg b/assets/img/portfolio/port05.jpg
index 70d46e7..2b7b465 100644
Binary files a/assets/img/portfolio/port05.jpg and b/assets/img/portfolio/port05.jpg differ
diff --git a/index.html b/index.html
index 8aabae0..6641b6e 100644
--- a/index.html
+++ b/index.html
@@ -90,7 +90,7 @@ <h1>Hi, I'm Joyce!</h1>
         <p><h4>BITCASH</h4></p>
       </div>
       <div class="col-lg-4">
-        <a class="zoom turquoise" href="composerorpasta.html"><img class="img-responsive bordered" src="assets/img/portfolio/port05.jpg" alt="" /></a>
+        <a class="zoom turquoise" href="pizzamates.html"><img class="img-responsive bordered" src="assets/img/portfolio/port05.jpg" alt="" /></a>
         <p><h4>COMPOSER OR PASTA</h4></p>
       </div>
       <div class="col-lg-4">
diff --git a/pizzamates.html b/pizzamates.html
new file mode 100644
index 0000000..9739342
--- /dev/null
+++ b/pizzamates.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
+
+    <title>Pizzamates</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="assets/css/bootstrap.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="assets/css/main.css" rel="stylesheet">
+    <link href="assets/css/font-awesome.css" rel="stylesheet">
+
+    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="assets/js/hover.zoom.js"></script>
+    <script src="assets/js/hover.zoom.conf.js"></script>
+
+    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+
+<!-- Static navbar -->
+<div class="navbar navbar-inverse navbar-static-top">
+  <div class="container">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="index.html">JOYCE YAN</a>
+    </div>
+    <div class="navbar-collapse collapse">
+      <ul class="nav navbar-nav navbar-right">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="index.html#work">Work</a></li>
+        <li><a href="resume.pdf">Resume</a></li>
+        <li><a href="#contact-me">Contact</a></li>
+      </ul>
+    </div><!--/.nav-collapse -->
+  </div>
+</div>
+
+
+  <!-- +++++ Projects Section +++++ -->
+
+  <div class="container pt">
+    <div class="row mt">
+      <div class="col-lg-8 col-lg-offset-2 centered">
+        <h3>Pizzamates</h3>
+        <hr>
+          <p>Pizzamates is a pizza delivery app I mocked out. During my Facebook internship some of the designers in my office were sponsoring a class called "Design for Engineers" where they taught us basic design principles as well as how to use Sketch. This is what I built.</p>
+          <p>Technologies Used: Sketch</p>
+      </div>
+    </div>
+
+  <div class="row mt">
+    <div class="col-lg-4">
+      <img src="assets/img/pizzamates/pizzamates1.png">
+    </div>
+    <div class="col-lg-4">
+      <img src="assets/img/pizzamates/pizzamates2.png">
+    </div>
+    <div class="col-lg-4">
+      <img src="assets/img/pizzamates/pizzamates3.png">
+    </div>
+  </div><!-- row -->
+
+  </div><!-- /container -->
+
+  <!-- +++++ Footer Section +++++ -->
+  <div id="footer">
+    <h6 id="contact-me">
+      <a href="mailto:joyce.h.yan@gmail.com" class="contact-link"><i class="fa fa-envelope fa-2x fa-inverse"></i></a>
+      <a href="https://twitter.com/joyce_y" class="contact-link"><i class="fa fa-twitter fa-2x fa-inverse"></i></a>
+      <a href="https://github.com/joyceyan" class="contact-link"><i class="fa fa-github fa-2x fa-inverse"></i></a>
+      <a href="https://www.linkedin.com/in/yanjoyce" class="contact-link"><i class="fa fa-linkedin-square fa-2x fa-inverse"></i></a>
+    </h6>
+  </div>
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="assets/js/bootstrap.min.js"></script>
+  </body>
+</html>
