diff --git a/images/check.png b/images/check.png
new file mode 100644
index 0000000..b58a53e
Binary files /dev/null and b/images/check.png differ
diff --git a/images/guide-icon.png b/images/guide-icon.png
new file mode 100644
index 0000000..923124d
Binary files /dev/null and b/images/guide-icon.png differ
diff --git a/images/head.png b/images/head.png
new file mode 100644
index 0000000..89e1daa
Binary files /dev/null and b/images/head.png differ
diff --git a/index.html b/index.html
index dac8d61..a7a4665 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,8 @@
   <head>
     <title>DoEverythingBar</title>
 
+    <link rel="icon" href="images/head.png">
+    <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
     <script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
@@ -10,26 +12,27 @@
     <link rel="stylesheet" type="text/css" href="main.css">
 
   </head>
-  <body>
+  <body spellcheck="false">
 
     <button id="authorize-button" style="display: none;">Sign-In</button>
     <button id="signout-button" style="display: none;">Sign-Out</button>
     <button id="create-event" style="display: none;">Create-Event</button>
-    <button id="SkypeButton_Call_justinkimchi77_1" style="display:none;">
-      
+    <div id="SkypeButton_Call_justinkimchi77_1" style="display:none;">
       <script type="text/javascript">
+        //function skypeCall(userName) {
             Skype.ui({
-            "name": "call",
-            "element": "SkypeButton_Call_justinkimchi77_1",
-            "participants": [""]
+              "name": "call",
+              "element": "SkypeButton_Call_justinkimchi77_1",
+              "participants": ['justinkimchi77']
             });
+        //  }
       </script>
-    </button>
+    </div>
 
     <div class="container main-bg" id="content">
       <div class="row">
-        <div class="col-xs-8 search-col">
-          <div id="search-cont">
+        <div class="col-xs-12 search-col">
+          <div id="search-cont" class="search-cont">
                 <div class="input-group stylish-input-group">
                     <input type="text" id="input" class="form-control"  placeholder="Search" >
                     <span class="input-group-addon">
@@ -42,6 +45,7 @@
             </div>
           </div>
       </div>
+      <image src="images/guide-icon.png" class="guide-icon" id="guide-icon">
 
       <iframe
         height="100%"
@@ -52,6 +56,21 @@
       </iframe>
     </div>
 
+    <div class="guide-popup container">
+      <div id="cancelParent"><image class="cancelPop" src="images/error.png"></div>
+      <div class="row">
+        <div class="col-xs-4 cols">
+          <p class="text">gcal | googlecalendar<br><hr><br>mapsd | directions<br><hr><br>skype</p>
+        </div>
+        <div class="col-xs-8 cols" style="border-left: 1px solid white;">
+          <p class="text"><br><i>[mm/dd/yy] [00:00] [00:00]</i><br><hr><br><i>[address]</i> to <i>[address]</i> <i>[method of travel]</i><br><hr><br><i>[username]</i></p>
+        </div>
+      </div>
+    </div>
+
+    <div class="updateCont">
+    <image class="check" src="images/check.png">Added Event!</div>
+
     <script type="text/javascript" src="google/maps.js"></script>
     <script type="text/javascript" src="google/calendar.js"></script>
     <script type="text/javascript" src="main.js"></script>
diff --git a/main.css b/main.css
index fa18287..82298e4 100644
--- a/main.css
+++ b/main.css
@@ -9,8 +9,18 @@ body {
   width: 100%;
   margin: 0;
   padding: 0;
+  font-family: 'Playfair Display', serif;
+}
+.row {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-right: -50%;
+  transform: translate(-50%, -50%);
 }
-
 div.main-bg {
   background-image: url("images/main-bg.jpg");
   background-repeat: no-repeat;
@@ -19,18 +29,25 @@ div.main-bg {
   padding: 0;
   height: 100%;
   width: 100%;
-  /*border: 2px solid red;*/
+}
+.guide-icon {
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  top: 15px;
+  left: 15px;
+  height: 20px;
+  width: 20px;
+}
+.search-col {
+  width:500px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-right: -50%;
+  transform: translate(-50%, -50%);
 }
 
-.search-col {
-  margin: 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-right: -50%;
-    transform: translate(-50%, -50%);
-  font-size: 30px;
-}
 
 .stylish-input-group .input-group-addon{
     background: white !important;
@@ -55,3 +72,71 @@ div.main-bg {
   height: 15px;
   width: 15px;
 }
+
+.guide-popup {
+  position: fixed;
+  height: 280px;
+  width: 500px;
+  background-color:#dce2ed;
+  border-radius: 4px;
+  top: 50%;
+  left: 50%;
+  margin-right: -50%;
+  transform: translate(-50%, -50%);
+  color: black;
+  font-family: 'Playfair Display', serif;
+  border: .5px solid black;
+  display: none;
+}
+div.cols {
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  height: 260px;
+  top: 0;
+}
+p.text {
+  margin-top: 20px;
+  font-size: 15px;
+}
+#cancelParent {
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  right: 5px;
+  top: 5px;
+  height: 20px;
+  width: 20px;
+  z-index: 10;
+}
+.cancelPop {
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  right: 5px;
+  top: 5px;
+  height: 20px;
+  width: 20px;
+}
+.updateCont {
+  position: fixed;
+  font-weight: bold;
+  left: 50%;
+  margin-right: -50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+  width: 120px;
+  color: green;
+  display: none;
+}
+
+.check {
+  margin-right: 5px;
+  height:15px;
+  width: 15px;
+  right:0;
+  top: 0;
+}
diff --git a/main.js b/main.js
index 56cc3db..85c8cc5 100644
--- a/main.js
+++ b/main.js
@@ -2,14 +2,25 @@ var enterBtn = document.getElementById("enter");
 var authorizeButton = document.getElementById('authorize-button');
 var signoutButton = document.getElementById('signout-button');
 
+var guideIcon = document.getElementById('guide-icon');
+  guideIcon.addEventListener("click", function() {
+    $('.guide-popup').slideDown(500);
+    $('.cancelPop').fadeIn();
+    $('#cancelParent').click(function() {
+      console.log('hi');
+      $(this).fadeOut();
+      $('.cancelPop').fadeOut();
+      $('.guide-popup').fadeOut();
+    });
+  });
 var runCommandBtn = document.getElementById('create-event');
-enterBtn.addEventListener("click", captureInput);
-window.addEventListener("keypress", function(e) {
-  var key = e.which || e.keycode;
-  if (key == 13) {
-    captureInput();
-  }
-});
+  enterBtn.addEventListener("click", captureInput);
+  window.addEventListener("keypress", function(e) {
+    var key = e.which || e.keycode;
+    if (key == 13) {
+      captureInput();
+    }
+  });
 var actualCommand = '';
 var command = '';
 
@@ -18,7 +29,7 @@ var dict = {
   "googlecalendar": makeEvent,
   "mapsd": directionsURL,
   "directions": directionsURL,
-  "skype": skypeCall
+  "skype": 'buffer'
 };
 
 function error() {
@@ -42,7 +53,11 @@ function captureInput() {
         console.log('actualCommand is empty!!');
         error();
       }
-
+      else if (command == "skype") {
+        console.log('launched skype app');
+        //skypeCall(actualCommand);
+        document.getElementById('SkypeButton_Call_justinkimchi77_1').click();
+      }
       else if (gapi.auth2.getAuthInstance().isSignedIn.get()) {
         console.log('already signed in');
         runCommandBtn.addEventListener("click", runCommand);
@@ -51,6 +66,9 @@ function captureInput() {
             dict[command](actualCommand);
           }
         runCommandBtn.click();
+        if (command == 'gcal') {
+          $('.updateCont').slideDown().fadeIn().delay(5000).fadeOut();
+        }
         runCommandBtn.removeEventListener("click", runCommand);
       }
 
diff --git a/test.html b/test.html
index f1cf0e6..6f7ab16 100644
--- a/test.html
+++ b/test.html
@@ -1,18 +1,34 @@
 <!DOCTYPE html>
 <html>
-<head></head>
+<head>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head>
 <body>
-<script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>
-<div id="SkypeButton_Call_justinkimchi77_1">
- <script type="text/javascript">
-         Skype.ui({
-         "name": "call",
-         "element": "SkypeButton_Call_justinkimchi77_1",
-         "participants": [""]
-         });
- </script>
-</div>
-
+  <script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>
+      <div id="SkypeButton_Call_justinkimchi77_1">
+         <script type="text/javascript">
+          var friend = "justinkimchi77";
+          function skypeCall(str) {
+                 Skype.ui({
+                 "name": "call",
+                 "element": "SkypeButton_Call_justinkimchi77_1",
+                 "participants": [str]
+                 });
+               }
+            skypeCall(friend);
+            jQuery('body').trigger("click");
+         </script>
+      </div>
+    </form>
+    <!--<div id="SkypeButton_Call_justinkimchi77_1">
+       <script type="text/javascript">
+               Skype.ui({
+               "name": "call",
+               "element": "SkypeButton_Call_justinkimchi77_1",
+               "participants": ["justinkimchi77"]
+               });
+       </script>
+    </div> --->
 </body>
 
 </html>
