diff --git a/css/bootstrap.css b/css/bootstrap.css
index 42c79d6..9d7c369 100644
--- a/css/bootstrap.css
+++ b/css/bootstrap.css
@@ -4,8 +4,12 @@
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+
+.red { color: #FF0000; }
+.orange { color: #FFBF00; }
+
 html {
-  font-family: sans-serif;
+  font-family: monaco;
   -webkit-text-size-adjust: 100%;
       -ms-text-size-adjust: 100%;
 }
@@ -5823,7 +5827,7 @@ button.list-group-item-danger.active:focus {
   min-height: 20px;
   padding: 19px;
   margin-bottom: 20px;
-  background-color: #f5f5f5;
+  background-color: lightgray;
   border: 1px solid #e3e3e3;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
diff --git a/index.html b/index.html
index 761ae56..5f5a6c9 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
 <link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>
 <script src="js/jquery-1.12.2.min.js"></script>
 <script src="js/bootstrap.js"></script>
+
 <style>
   .container {
     background-color:lightgray;
@@ -12,28 +13,99 @@
     padding-bottom:30px;
    }
 </style>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
+  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <title>Bootstrap Practice</title>
 
 </head>
 
 <body>
+  
+  <nav class="navbar navbar-inverse">
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <a class="navbar-brand" href="#">LeetCode OJ</a>
+    </div>
+    <ul class="nav navbar-nav">
+      <li class="active"><a href="#"><span class = "orange"> LeetCode Premium Suscription </span></a></li>
+      <li class="dropdown">
+      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+      Problems <span class="caret"></span></a>
+      <ul class="dropdown-menu" role="menu">
+      <li><a href="#"></a>.</li>
+      
+    </ul>
+      <li><a href="#">Pick One</a></li> 
+      <li class="dropdown">
+      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+      Mock <span class="caret"></span></a>
+      <ul class="dropdown-menu">
+        <li><a href="#">Mock Interview</a></li> 
+        <li><a href="#">Past Sessions</a></li>
+    </ul>
+    <li><a href="#">Articles</a></li> 
+    <li><a href="#">Discuss</a></li> 
+    <li><a href="#"><span class = "orange">Book</span></a></li> 
+    </ul>
+
+    <a href="#" class="btn btn-primary btn-sm" role="button">Sign Up</a> </li>
+    <a href="#" class="btn btn-default btn-sm" role="button">Sign In</a>
+  </ul>
+  </div>
+</nav>
+  
+
 
-<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 img-responsive"/>
  
-  <p><div class="dropdown">
-    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
-      Bootstrap Dependencies 
-      <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu">
-      <li><a href="#">Bootstrap CSS file</a></li>
-      <li><a href="#">Bootstrap JS file</a></li>
-      <li><a href="#">Needs JQuery!</a></li>
-    </ul>
-  </div></p>
+
+
+<div class="container">
+  <div class="well well-lg">
+  <h1>LeetCode Online Judge</h1>
+  <p>We are supporting <span class= "red">JavaScript </span> and <span class= "red">Ruby</span> now!
+  <p>LeetCode OJ is a platform for preparing technical coding interviews. Pick from an expanding library of more than 190
+  questions, code, and submit you solution to see if you have solved it correctly. It is that easy!</p>
+  <p>Our platform currently supports a total of 9 languages: C, C++, Java, Python, C#, JavaScript, Ruby, Bash, MySQL</p>
+  <p><a href="url">Follow</a> or <a href="url">Like LeetCode</a> and get the <span class= "red">latest update</span> when a new question is added!</p>
+  <ul>
+    <li><a href="url">Facebook</a></li>
+    <li><a href="url">Twitter</a></li>
+    <li><a href="url">Weibo</a></li>
+  </ul>
+  
+ <p> <a href="url">Code.</a> <a href="url">Read.</a> <a href="url">Discuss</a> </p>
+  
+  <form class="form-inline" role="form">
+    <div class="form-group">
+      <label class="sr-only" for="email">Email:</label>
+      <input type="email" class="form-control" id="email" placeholder="Username">
+    </div>
+    <div class="form-group">
+      <label class="sr-only" for="pwd">Password:</label>
+      <input type="password" class="form-control" id="pwd" placeholder="Email Address">
+    </div>
+    <div class="form-group">
+      <label class="sr-only" for="pwd">Password:</label>
+      <input type="password" class="form-control" id="pwd" placeholder="Password">
+    </div>
+    <div class="checkbox">
+    </div>
+    <button type="submit" class="btn btn-primary">Sign up for LeetCode OJ</button>
+  </form>
+  <hr>
+  <div class="row">
+    <div class="col-sm-4"></div>
+    <div class="col-sm-4"></div>
+    <div class="col-sm-4">Or Sign Up With</div>
+  </div>
+  </div>
+</div>
+
+<div> </div>
+
+
 </div>
    
 </body>
