diff --git a/index.html b/index.html
index 1447ab2..785f475 100644
--- a/index.html
+++ b/index.html
@@ -3,12 +3,26 @@
 <head>
   
 <link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>
+<script="js/bootstrap.js"></script>
 <style>
+div p {
+  font-size: 150% ;
+}
   .container {
     background-color:lightgray;
     margin-top:30px;
     padding-bottom:30px;
    }
+   
+   ul.nav li.dropdown:hover > ul.dropdown-menu {
+        display: block;
+      }
+      
+      #right {
+            position:absolute;
+            display:inline-block;
+            right: 220px;
+        }
 </style>
 <title>Bootstrap Practice</title>
 
@@ -16,11 +30,155 @@
 
 <body>
 
-<div class="container">
-  <h1>Bootstrap Practice</h1>
-  <p>Time for another mini project. Have a cup of coffee and let's continue...</p>
-  <img src="images/coffee.gif" class="img-rounded"/>
-</div>
+       <div class="navbar navbar-inverse navbar-extra">
+       
+          <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 narrow-display" href="/">LeetCode OJ</a>
+          </div>
+          <div class="navbar-collapse collapse">
+            <a class="navbar-brand" href="/">LeetCode OJ</a>
+            <ul class="nav navbar-nav">
+              
+              <li id="subscribe">
+                <a href="/subscribe/"><font color="orange">LeetCode Premium Subscription</font></a>
+              </li>
+              
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
+                  Problems
+                  <span class="caret"></span>
+                </a>
+                <ul class="dropdown-menu" role="menu">
+                  
+                  <li><a href="/problemset/algorithms/">Algorithms</a></li>
+                  
+                  <li><a href="/problemset/database/">Database</a></li>
+                  
+                  <li><a href="/problemset/shell/">Shell</a></li>
+                  
+                </ul>
+              </li>
+              <li id="pickNav"><a onclick="ga('send', 'event', 'pick-one', 'click');" href="/problems/reverse-words-in-a-string">Pick One</a></li>
+              
+                <li class="dropdown">
+                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"
+                     role="button" aria-expanded="false">
+                    Mock
+                    <span class="caret"></span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li>
+                      <a href="/mockinterview/">Mock Interview</a>
+                    </li>
+                    <li>
+                      <a href="/mockinterview/session/list/">Past Sessions</a>
+                    </li>
+                  </ul>
+                </li>
+
+              
+              <li id="articlesNav"><a href="/articles/">Articles</a></li>
+          
+              
+              <li id=""><a href="/discuss/">Discuss</a></li>
+              
+              
+              <li id="bookNav"><a href="/book/"><font color="#ed9c28">Book</font></a></li>
+              
+              
+            </ul>
+            
+            <div class="navbar-form navbar-right">
+              <a class="btn btn-primary" href="/accounts/signup">Sign up</a>
+              <a class="btn btn-default" href="/accounts/login/">Sign in</a>
+            </div>
+
+
+       </div>
+	   </div>
+
+
+ <div class="container">
+  
+
+    <h2>LeetCode Online Judge</h2>
+    <div >
+    <p> We are supporting <font color="red">JavaScript</font> and <font color="red">Ruby</font> now!</p>
+    <p>LeetCode OJ is a platform for preparing technical coding interviews. Pick from an expanding library of more
+      than <i>190</i> questions, code and submit your solution to see if you have solved it correctly. It is <i>that</i> easy!</p>
+    <p>Our platform currently supports a total of 9 languages: C, C++, Java, Python, C#, JavaScript, Ruby, Bash, MySQL.</p></div>
+    <div class="paragraph">
+      <p><a href="http://twitter.com/#!/LeetCode">Follow</a> or <a href="http://www.facebook.com/LeetCode">
+        Like LeetCode</a> and get the <font color="red">latest update</font> when a new question is added!
+      </p>
+      <ul>
+        <li><a href="http://www.facebook.com/LeetCode"><span class="glyphicon glyphicon-envelope"></span> Facebook</a></li>
+        <li><a href="http://twitter.com/#!/LeetCode"><span class="glyphicon glyphicon-envelope"></span> Twitter</a></li>
+        <li><a href="http://weibo.com/leetcode"><span class="glyphicon glyphicon-envelope"></span> Weibo</a></li>
+      </ul>
+    </div>
+    <div class="tagline">
+      <p>
+        <a href="/problemset/">Code.</a>
+        <a href="/articles/">Read.</a>
+        
+        <a href="/discuss">Discuss.</a>
+        
+      </p>
+    </div>
+
+    
+
+      <div class="row">
+        <form class="form" method="POST" action="/">
+         
+
+            <div class="form-group">
+                <div class="col-md-3 no-left-padding"><input autofocus="autofocus" id="id_username" maxlength="30" name="username" placeholder="Username" type="text" /></div>
+              </div>
+            
+          
+            <div class="form-group">
+                <div class="col-md-3 no-left-padding"><input id="id_email" name="email" placeholder="E-mail address" type="email" /></div>
+              </div>
+            
+            <div class="form-group">
+                <div class="col-md-3 no-left-padding"><input id="id_password1" name="password1" placeholder="Password" type="password" /></div>
+              </div>
+            
+          
+            
+          
+
+          <div class="col-md-3">
+            <div class="row">
+              <button class="btn btn-primary btn-lg" type="submit">Sign up for LeetCode OJ</button>
+            </div>
+          </div>
+
+          
+
+        </form>
+      </div>
+
+      
+ <div class="row" id="right" >
+          <p></p>or sign up with: </p>
+           <li><a href="http://www.facebook.com/LeetCode"><span class="glyphicon glyphicon-envelope"></span> Facebook</a></li>
+           <li><a href="http://www.google.com/LeetCode"><span class="glyphicon glyphicon-envelope"></span> Google</a></li>
+           <li><a href="http://www.github.com/LeetCode"><span class="glyphicon glyphicon-envelope"></span> Github</a></li>
+           <li><a href="http://www.linkedin.com/LeetCode"><span class="glyphicon glyphicon-envelope"></span> Linkedin</a></li>
+        </div>
+      </div>
+
+   
+   
+   
    
 </body>
 
