diff --git a/css/main.css b/css/main.css
index 1381e03..1496731 100644
--- a/css/main.css
+++ b/css/main.css
@@ -2,11 +2,13 @@
 @media (min-width:768px){ .footer{position:absolute;width:100%;bottom:0;height:100px;} }
 .header-container{
     width: 100%;
-    height: 900px;
+    height: 760px;
     border-left: none;
     border-right: none;
     position: relative;
-    padding: 20px;
+}
+.temp{
+    height: 1000px;
 }
 .video-container
 {
@@ -23,9 +25,6 @@ video{
     opacity: 0.78;
     width: 100%;
 }
-.temp{
-    height: 1000px;
-}
 .icon-bar
 {
     background-color: #FFF !important;
@@ -37,6 +36,7 @@ video{
     margin-top: 25.833333333%;
     margin-left: 2%
 }
+/*
 html {
     position: relative;
     min-height: 100%;
@@ -50,7 +50,7 @@ body {
     width: 100%;
     height: 100px;
     background-color: #393939;
-}
+}*/
 .footer-text {
     color: #FF9900;    
 }
@@ -105,4 +105,11 @@ body {
     width: 100%;
     bottom: 0;
     position: absolute;
+}
+#list{
+  list-style:none;
+  padding:50px 50px 50px 50px;
+}
+#image{
+  cursor: pointer;
 }
\ No newline at end of file
diff --git a/images/gallery/android.png b/images/gallery/android.png
new file mode 100644
index 0000000..39931a9
Binary files /dev/null and b/images/gallery/android.png differ
diff --git a/images/gallery/cplusplus.png b/images/gallery/cplusplus.png
new file mode 100644
index 0000000..09710d4
Binary files /dev/null and b/images/gallery/cplusplus.png differ
diff --git a/images/gallery/css3.png b/images/gallery/css3.png
new file mode 100644
index 0000000..e97c6a6
Binary files /dev/null and b/images/gallery/css3.png differ
diff --git a/images/gallery/html5.png b/images/gallery/html5.png
new file mode 100644
index 0000000..6e20956
Binary files /dev/null and b/images/gallery/html5.png differ
diff --git a/images/gallery/java.png b/images/gallery/java.png
new file mode 100644
index 0000000..5ba98e8
Binary files /dev/null and b/images/gallery/java.png differ
diff --git a/images/gallery/jquery.png b/images/gallery/jquery.png
new file mode 100644
index 0000000..98971fd
Binary files /dev/null and b/images/gallery/jquery.png differ
diff --git a/images/gallery/js.png b/images/gallery/js.png
new file mode 100644
index 0000000..6af6a35
Binary files /dev/null and b/images/gallery/js.png differ
diff --git a/images/gallery/markdown.png b/images/gallery/markdown.png
new file mode 100644
index 0000000..ebe1918
Binary files /dev/null and b/images/gallery/markdown.png differ
diff --git a/images/gallery/php.png b/images/gallery/php.png
new file mode 100644
index 0000000..19aea33
Binary files /dev/null and b/images/gallery/php.png differ
diff --git a/images/gallery/python.png b/images/gallery/python.png
new file mode 100644
index 0000000..7a8a013
Binary files /dev/null and b/images/gallery/python.png differ
diff --git a/images/gallery/ruby.png b/images/gallery/ruby.png
new file mode 100644
index 0000000..74c5b6c
Binary files /dev/null and b/images/gallery/ruby.png differ
diff --git a/images/gallery/windows.png b/images/gallery/windows.png
new file mode 100644
index 0000000..a065dc1
Binary files /dev/null and b/images/gallery/windows.png differ
diff --git a/index.html b/index.html
index 6e8e22c..74ca41f 100644
--- a/index.html
+++ b/index.html
@@ -72,10 +72,37 @@
             	<img class="logo" src="./images/logo/logo_white.png">
         	</div>
     	</div>
-        <div class="temp">
-            <p>hello</p>    
+        <div>
+            <div class="container">
+                <ul class="row row-content">
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/css3.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/html5.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/java.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/jquery.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/js.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/python.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/android.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/cplusplus.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/markdown.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/php.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/ruby.png"></li>
+                    <li id="list" class="col-sm-3 col-xs-4"><img id="image" class="img-responsive" src="./images/gallery/windows.png"></li>
+                </ul>
+            </div>
         </div>
-        <footer class="footer">
+        
+        
+        
+        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-body">
+                    </div>
+                </div><!-- /.modal-content -->
+            </div><!-- /.modal-dialog -->
+        </div><!-- /.modal -->
+        
+        <footer>
             <div class="container">
                 <div class="row row-footer">
                     <div class="col-sm-10 col-xs-12">
diff --git a/js/main.js b/js/main.js
index 5b624a5..5fbc53c 100644
--- a/js/main.js
+++ b/js/main.js
@@ -17,3 +17,16 @@ $(document).ready(function() {
 		}
 	});
 });
+$(document).ready(function(){
+   $('li img').on('click',function(){
+        var src = $(this).attr('src');
+        var img = '<img src="' + src + '" class="img-responsive"/>';
+        $('#myModal').modal();
+        $('#myModal').on('shown.bs.modal', function(){
+            $('#myModal .modal-body').html(img);
+        });
+        $('#myModal').on('hidden.bs.modal', function(){
+            $('#myModal .modal-body').html('');
+        });
+   });
+})
\ No newline at end of file