diff --git a/README.md b/README.md
index 76d1888..4ea47a4 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,5 @@
 AddressBook
 ===========
 Simple wish list and studying in Grunt.
+
+![Alt text](screeshot.png?raw=true "Optional Title")
diff --git a/bower.json b/bower.json
index 79bf37c..5896ca3 100644
--- a/bower.json
+++ b/bower.json
@@ -15,5 +15,8 @@
   ],
   "devDependencies": {
     "angular": "~1.3.5"
+  },
+  "dependencies": {
+    "bootstrap": "^3.3.7"
   }
 }
diff --git a/index.html b/index.html
index e278143..cef64d2 100644
--- a/index.html
+++ b/index.html
@@ -4,54 +4,98 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <!-- <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" -->
+  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
   <link rel="stylesheet" href="main.css">
   <title>The Online Rolodex</title>
 </head>
 <body>
   <div class="container" ng-controller="AddressBookController as abc">
-    <h1> Leslie Knope's Address Book </h1>
-    <form name="myForm" ng-submit = 'myForm.$valid && abc.addNewContact()' novalidate>
-      <label>Name</label><input type="text" ng-model="abc.newContact.name" required>
-      <label>Phone Number</label><input type="text" ng-model="abc.newContact.phone">
-      <label>Email Address</label><input type="text" ng-model="abc.newContact.email">
-      <label>Important Dates</label><input type="text" ng-model="abc.newContact.dates">
-      <label>Group</label>
-        <select ng-model="abc.newContact.group">
-          <option value={{key}} ng-repeat="(key,value) in abc.groupOptions">
-          {{value}}
-          </option>
-        </select>
-        <input type="submit" value="Add Contact" ng-show="myForm.$valid"/>
-      </form>
+     <div class="row text-center">
+         <div class="col-md-11" style="padding-left:0px;">
+            <h1>Leslie Knope's Address Book</h1>  
+         </div>
+         <div class="col-md-1">
+            <button class="btn btn-info btn-lg">ADD</button>
+         </div>
+     </div>
+     <div class="row hiddenbox" id="target">
+         <form class="form-inline" name="myForm" ng-submit = 'myForm.$valid && abc.addNewContact()' novalidate>
+            <div class="form-group">
+              <label for="name" class="control-label">Name</label>
+              <input class="form-control" id="name" type="text" ng-model="abc.newContact.name" required placeholder="Name">
+            </div>
+            &nbsp;&nbsp;
+            <div class="form-group">
+              <label for="phone">Phone Number</label>
+              <input class="form-control" placeholder="phone" id="phone" type="text" ng-model="abc.newContact.phone">
+            </div>
+&nbsp;&nbsp;
+            <div class="form-group">
+              <label for="email">Email Address</label>
+              <input class="form-control" id="email" type="text" ng-model="abc.newContact.email" placeholder="email">
+            </div>
+            &nbsp;&nbsp;
+            <div class="form-group">
+              <label for="Importantdates">Important Dates</label>
+              <input class="form-control" id="Importantdates" type="text" ng-model="abc.newContact.dates" placeholder="Important Dates">
+            </div>
+            <br><br>
 
-    <table>
-      <thead>
-        <tr>
-          <th>Contact Pic</th>
-          <th>Contact Name</th>
-          <th>Phone Number</th>
-          <th>Email Address</th>
-          <th>Important Dates</th>
-          <th>Group</th>
-        </tr>
-      </thead>
-      <tbody>
-      <tr ng-repeat="person in abc.contact">
-      <td><img class="image" ng-src="{{person.image}}"></td>
-      <td>{{person.name}}</td>
-      <td>{{person.phone}}</td>
-      <td>{{person.email}}</td>
-      <td>{{person.dates}}</td>
-      <td>{{person.group}}</td>
-      <td><button ng-click='abc.removeContact(person)'>Delete</button></td>
-      </tr>
-      </tbody>
-    </table>
+            <div class="form-group">
+                <label>Group</label>
+                <select class="form-control" ng-model="abc.newContact.group">
+                  <option value={{key}} ng-repeat="(key,value) in abc.groupOptions">
+                  {{value}}
+                  </option>
+                </select>
+            </div>
+            
+            <input class="btn btn-primary" type="submit" value="Add Contact" ng-show="myForm.$valid" />
+         
+         </form>
+     </div>
+      <br>
+     <div class="row data">
+         <table class="table table-bordered">
+            <thead>
+              <tr>
+                <th>Contact Pic</th>
+                <th>Contact Name</th>
+                <th>Phone Number</th>
+                <th>Email Address</th>
+                <th>Important Dates</th>
+                <th>Group</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+            <tr ng-repeat="person in abc.contact">
+            <td><img class="image img-thumbnail" ng-src="{{person.image}}"></td>
+            <td>{{person.name}}</td>
+            <td>{{person.phone}}</td>
+            <td>{{person.email}}</td>
+            <td>{{person.dates}}</td>
+            <td>{{person.group}}</td>
+            <td class="text-center"><button class="btn btn-danger" ng-click='abc.removeContact(person)'>Delete</button></td>
+            </tr>
+            </tbody>
+          </table>
+     </div>
   </div>
+
   <script src="bower_components/jquery/dist/jquery.min.js"></script>
   <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
   <script src="bower_components/angular/angular.min.js"></script>
   <script src="js/main.js"></script>
+
+  <script type="text/javascript">
+     $(document).ready(function(){
+        $('.btn-info').click(function(){
+           $('#target').toggleClass("hiddenbox");
+        });
+     });
+
+  </script>
+
 </body>
 </html>
diff --git a/main.css b/main.css
index 77aa8dd..07ec6a2 100644
--- a/main.css
+++ b/main.css
@@ -1,40 +1,55 @@
+@import 'https://fonts.googleapis.com/css?family=Raleway';
+body {
+  font-family: Helvetica;
+  background-color: #34495e;
+  font-family: 'Raleway', sans-serif;
+  color: white;
+}
+
 .image {
   height: 100px;
   width: 100px;
-  border: 3px solid lightgrey;
 }
 
-td {
-  width: 200px;
+h1 {
+  background-color: #3498db;
+  padding: 15px;
+  color: white;
+  font-family: 'Raleway', sans-serif;
+  border-radius: 10px;
 }
-
-body {
-  font-family: Helvetica;
-  background-color: whitesmoke;
+.table > tbody > tr > td {
+     vertical-align: middle;
+     text-align: center;
 }
-
-form {
-  margin-bottom: 20px;
-  padding: 10px;
-  border-bottom: 1px solid grey;
-  background-color: lightgrey;
+.table th{
+   text-align: center;
 }
-
-
-
-form input {
-  padding: 5px;
-  margin: 5px;
+.hiddenbox{
+  display: none;
 }
-
-th{
-  text-align: left;
-  color: darkgrey;
+#target{
+  background: #2ecc71;
+  padding: 10px;
+  border-radius: 10px;
 }
-
-h1 {
-  background-color: grey;
-  margin: 0;
+.btn-info{
+  margin-top: 30px;
+}
+.data{
+  background: #2c3e50;
+  border-radius: 10px;
   padding: 10px;
-  color: black;
+  height: 400px;
+  overflow: scroll;
+  overflow-x: hidden;
+}
+::-webkit-scrollbar {
+    width: 5px;
 }
+::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+    background: #1abc9c;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
+}
\ No newline at end of file
diff --git a/screeshot.png b/screeshot.png
new file mode 100644
index 0000000..a43301a
Binary files /dev/null and b/screeshot.png differ
