diff --git a/static/css/introHCI.css b/static/css/introHCI.css
index 04dbf742..bf174653 100644
--- a/static/css/introHCI.css
+++ b/static/css/introHCI.css
@@ -31,4 +31,5 @@ body {
      right: 0;
      position: absolute;
      z-index: -1;	
-}
\ No newline at end of file
+}
+
diff --git a/static/index.html b/static/index.html
index 693e6bc2..46de6df9 100644
--- a/static/index.html
+++ b/static/index.html
@@ -5,8 +5,17 @@
 	<title>HCI Project Portfolio</title>	
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<!-- Bootstrap -->
+	<link href="css/bootstrap.min.css" rel="stylesheet">
+	<link href="css/bootstrap-theme.min.css" rel="stylesheet">
+
 	<!-- this is a comment in HTML -->
+	<link href="css/introHCI.css" rel= "stylesheet">
+
+	<script src="https://code.jquery.com/jquery.js"></script>
 
+<script src="js/bootstrap.min.js"></script>
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>
@@ -16,12 +25,12 @@
 </head>
 
 <body>
-	<div>
+	<div class="container">
 		<!-- h1 through h6 are headers. The higher the number, the smaller the header -->
 		<!-- p means paragraph -->
-		<div>
-			<h1>Michael Bernstein</h1>
-			<p>human-computer interaction &middot; social computing &middot; crowdsourcing</p>
+		<div class="jumbotron">
+			<h1>Yuxiao Fang</h1>
+			<p>human-computer interaction &middot; natural computation &middot; machine learning</p>
 		</div>
 
 
@@ -29,51 +38,51 @@ <h4>Projects</h4>
 		<!-- divs are invisible structuring elements that stack vertically by default. Use them to organize your code -->
 		<!-- img tags are images. Lorem Pixel will deliver random images; handy! -->
 		<!-- a are anchors, also known as hyperlinks. Use the href attribute to tell the browser where to go when the user clicks -->
-		<div id="project1">
-			<a href="project.html">
-				<img src="images/lorempixel.people.1.jpeg" alt="Lorem Pixel image">
+		<div class= "project" id="project1">
+			<a href="project.html" class="thumbnail">
+				<img src="images/lorempixel.people.1.jpeg" alt="Lorem Pixel image" class="img">
 				<p>Waiting in Line</p>
 			</a>
 		</div>
-		<div id="project2">
-			<a href="project.html">
-				<img src="images/lorempixel.city.1.jpeg" alt="Lorem Pixel image">
+		<div class= "project" id="project2">
+			<a href="project.html" class="thumbnail">
+				<img src="images/lorempixel.city.1.jpeg" alt="Lorem Pixel image" class="img">
 				<p>Needfinding</p>
 			</a>
 		</div>
-		<div id="project3">
-			<a href="project.html">
-				<img src="images/lorempixel.technics.1.jpeg" alt="Lorem Pixel image">
+		<div class= "project" id="project3">
+			<a href="project.html" class="thumbnail">
+				<img src="images/lorempixel.technics.1.jpeg" alt="Lorem Pixel image" class="img">
 				<p>Prototyping</p>
 			</a>
 		</div>
-		<div id="project4">
-			<a href="project.html">
-				<img src="images/lorempixel.abstract.1.jpeg" alt="Lorem Pixel image">
+		<div class= "project" id="project4">
+			<a href="project.html" class="thumbnail">
+				<img src="images/lorempixel.abstract.1.jpeg" alt="Lorem Pixel image" class="img">
 				<p>Heuristic Evaluation</p>
 			</a>
 		</div>
-		<div id="project5">
-			<a href="project.html">
-				<img src="images/lorempixel.abstract.8.jpeg" alt="Lorem Pixel image">
+		<div class= "project" id="project5">
+			<a href="project.html" class="thumbnail">
+				<img src="images/lorempixel.abstract.8.jpeg" alt="Lorem Pixel image" class="img">
 				<p>Visualization</p>
 			</a>
 		</div>
-		<div id="project6">
-			<a href="project.html">
-				<img src="images/lorempixel.people.2.jpeg" alt="Lorem Pixel image">
+		<div class= "project" id="project6">
+			<a href="project.html" class="thumbnail">
+				<img src="images/lorempixel.people.2.jpeg" alt="Lorem Pixel image" class="img">
 				<p>Social design</p>
 			</a>
 		</div>
-		<div id="project7">
-			<a href="project.html">
-				<img src="images/lorempixel.technics.2.jpeg" alt="Lorem Pixel image">
+		<div class= "project" id="project7">
+			<a href="project.html" class="thumbnail">
+				<img src="images/lorempixel.technics.2.jpeg" alt="Lorem Pixel image" class="img">
 				<p>Gestural interaction</p>
 			</a>
 		</div>
-		<div id="project8">
-			<a href="project.html">
-				<img src="images/lorempixel.city.2.jpeg" alt="Lorem Pixel image">
+		<div class= "project" id="project8">
+			<a href="project.html" class="thumbnail">
+				<img src="images/lorempixel.city.2.jpeg" alt="Lorem Pixel image" class="img">
 				<p>Design tools</p>
 			</a>
 		</div>
