diff --git a/assets/css/style.css b/assets/css/style.css
old mode 100644
new mode 100755
index e69de29..50e9eae
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -0,0 +1,392 @@
+                body {
+                    width: 100%;
+                    height: 100%;
+                    font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
+                    color: white;
+                    background-color: black;
+                }
+
+                html {
+                    width: 100%;
+                    height: 100%;
+                }
+
+                h1,
+                h2,
+                h3,
+                h4,
+                h5,
+                h6 {
+                    margin: 0 0 35px;
+                    text-transform: uppercase;
+                    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
+                    font-weight: 700;
+                    letter-spacing: 1px;
+                }
+
+                p {
+                    margin: 0 0 25px;
+                    font-size: 18px;
+                    line-height: 1.5;
+                }
+
+                @media (min-width: 768px) {
+                    p {
+                        margin: 0 0 35px;
+                        font-size: 20px;
+                        line-height: 1.6;
+                    }
+                }
+
+                a {
+                    color: #42DCA3;
+                    -webkit-transition: all 0.2s ease-in-out;
+                    -moz-transition: all 0.2s ease-in-out;
+                    transition: all 0.2s ease-in-out;
+                }
+
+                a:hover,
+                a:focus {
+                    text-decoration: none;
+                    color: #1d9b6c;
+                }
+
+                .light {
+                    font-weight: 400;
+                }
+
+                .navbar-custom {
+                    margin-bottom: 0;
+                    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+                    text-transform: uppercase;
+                    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
+                    background-color: black;
+                }
+
+                .navbar-custom .navbar-toggle {
+                    color: white;
+                    background-color: rgba(255, 255, 255, 0.2);
+                    font-size: 12px;
+                }
+
+                .navbar-custom .navbar-toggle:focus,
+                .navbar-custom .navbar-toggle:active {
+                    outline: none;
+                }
+
+                .navbar-custom .navbar-brand {
+                    font-weight: 700;
+                }
+
+                .navbar-custom .navbar-brand:focus {
+                    outline: none;
+                }
+
+                .navbar-custom a {
+                    color: white;
+                }
+
+                .navbar-custom .nav li a {
+                    -webkit-transition: background 0.3s ease-in-out;
+                    -moz-transition: background 0.3s ease-in-out;
+                    transition: background 0.3s ease-in-out;
+                }
+
+                .navbar-custom .nav li a:hover {
+                    color: rgba(255, 255, 255, 0.8);
+                    outline: none;
+                    background-color: transparent;
+                }
+
+                .navbar-custom .nav li a:focus,
+                .navbar-custom .nav li a:active {
+                    outline: none;
+                    background-color: transparent;
+                }
+
+                .navbar-custom .nav li.active {
+                    outline: none;
+                }
+
+                .navbar-custom .nav li.active a {
+                    background-color: rgba(255, 255, 255, 0.3);
+                }
+
+                .navbar-custom .nav li.active a:hover {
+                    color: white;
+                }
+
+                @media (min-width: 768px) {
+                    .navbar-custom {
+                        padding: 20px 0;
+                        border-bottom: none;
+                        letter-spacing: 1px;
+                        background: transparent;
+                        -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
+                        -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
+                        transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
+                    }
+                    .navbar-custom.top-nav-collapse {
+                        padding: 0;
+                        background: black;
+                        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+                    }
+                }
+
+                .intro {
+                    display: table;
+                    width: 100%;
+                    height: auto;
+                    padding: 100px 0;
+                    text-align: center;
+                    color: white;
+                    background: url(../images/mood.jpg) no-repeat bottom center scroll;
+                    background-color: rgba(63, 0, 39, -103.5);
+                    -webkit-background-size: cover;
+                    -moz-background-size: cover;
+                    background-size: cover;
+                    -o-background-size: cover;
+                }
+
+                .intro .intro-body {
+                    display: table-cell;
+                    vertical-align: middle;
+                }
+
+                .intro .intro-body .brand-heading {
+                    font-size: 40px;
+                    font-family: source code pro;
+                }
+
+                .intro .intro-body .intro-text {
+                    font-size: 18px;
+                }
+
+                @media (min-width: 768px) {
+                    .intro {
+                        height: 100%;
+                        padding: 0;
+                    }
+                    .intro .intro-body .brand-heading {
+                        font-size: 100px;
+                    }
+                    .intro .intro-body .intro-text {
+                        font-size: 26px;
+                    }
+                }
+
+                .btn-circle {
+                    width: 70px;
+                    height: 70px;
+                    margin-top: 15px;
+                    padding: 7px 16px;
+                    border: 0px solid white;
+                    border-radius: 100% !important;
+                    font-size: 40px;
+                    color: white;
+                    background: transparent;
+                    -webkit-transition: background 0.3s ease-in-out;
+                    -moz-transition: background 0.3s ease-in-out;
+                    transition: background 0.3s ease-in-out;
+                }
+
+                .btn-circle:hover,
+                .btn-circle:focus {
+                    outline: none;
+                    color: white;
+                    background: rgba(255, 255, 255, 0.1);
+                }
+
+                .btn-circle i.animated {
+                    -webkit-transition-property: -webkit-transform;
+                    -webkit-transition-duration: 1s;
+                    -moz-transition-property: -moz-transform;
+                    -moz-transition-duration: 1s;
+                }
+
+                .btn-circle:hover i.animated {
+                    -webkit-animation-name: pulse;
+                    -moz-animation-name: pulse;
+                    -webkit-animation-duration: 1.5s;
+                    -moz-animation-duration: 1.5s;
+                    -webkit-animation-iteration-count: infinite;
+                    -moz-animation-iteration-count: infinite;
+                    -webkit-animation-timing-function: linear;
+                    -moz-animation-timing-function: linear;
+                }
+
+                #loadPicIcon {
+                    margin: 15px;
+                    padding: 10px;
+                    border-radius: 100% !important;
+                    -webkit-transition: background 0.3s ease-in-out;
+                    -moz-transition: background 0.3s ease-in-out;
+                    transition: background 0.3s ease-in-out;
+                }
+
+                #loadPicIcon:hover,
+                #loadPicIcon:focus {
+                    outline: none;
+                    color: white;
+                    background: rgba(255, 255, 255, 0.1);
+                }
+
+                #loadPicIcon i.animated {
+                    -webkit-transition-property: -webkit-transform;
+                    -webkit-transition-duration: 1s;
+                    -moz-transition-property: -moz-transform;
+                    -moz-transition-duration: 1s;
+                }
+
+                #loadPicIcon:hover i.animated {
+                    -webkit-animation-name: pulse;
+                    -moz-animation-name: pulse;
+                    -webkit-animation-duration: 1.5s;
+                    -moz-animation-duration: 1.5s;
+                    -webkit-animation-iteration-count: infinite;
+                    -moz-animation-iteration-count: infinite;
+                    -webkit-animation-timing-function: linear;
+                    -moz-animation-timing-function: linear;
+                }
+
+                @-webkit-keyframes pulse {
+                    0% {
+                        -webkit-transform: scale(1);
+                        transform: scale(1);
+                    }
+                    50% {
+                        -webkit-transform: scale(1.2);
+                        transform: scale(1.2);
+                    }
+                    100% {
+                        -webkit-transform: scale(1);
+                        transform: scale(1);
+                    }
+                }
+
+                @-moz-keyframes pulse {
+                    0% {
+                        -moz-transform: scale(1);
+                        transform: scale(1);
+                    }
+                    50% {
+                        -moz-transform: scale(1.2);
+                        transform: scale(1.2);
+                    }
+                    100% {
+                        -moz-transform: scale(1);
+                        transform: scale(1);
+                    }
+                }
+
+                .content-section {
+                    padding-top: 100px;
+                    padding-bottom: 100px;
+                }
+
+                .results-section {
+                    width: 100%;
+                    padding: 50px 0;
+                    color: white;
+                    background-color: rgba(255, 255, 255, 0.3);
+                    -webkit-background-size: cover;
+                    -moz-background-size: cover;
+                    background-size: cover;
+                    -o-background-size: cover;
+                }
+
+                @media (min-width: 767px) {
+                    .content-section {
+                        padding-top: 250px;
+                        padding-bottom: 250px;
+                    }
+                    .results-section {
+                        padding: 100px 0;
+                    }
+                    .btn {
+                        text-transform: uppercase;
+                        font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
+                        font-weight: 400;
+                        -webkit-transition: all 0.3s ease-in-out;
+                        -moz-transition: all 0.3s ease-in-out;
+                        transition: all 0.3s ease-in-out;
+                        border-radius: 0;
+                    }
+                    .btn-default {
+                        border: 1px solid #116043;
+                        color: #116043;
+                        background-color: transparent;
+                    }
+                    .btn-default:hover,
+                    .btn-default:focus {
+                        border: 1px solid #116043;
+                        outline: none;
+                        color: black;
+                        background-color: #116043;
+                    }
+                    ul.banner-social-buttons {
+                        margin-top: 0;
+                    }
+                    @media (max-width: 1199px) {
+                        ul.banner-social-buttons {
+                            margin-top: 15px;
+                        }
+                    }
+                    @media (max-width: 767px) {
+                        ul.banner-social-buttons li {
+                            display: block;
+                            margin-bottom: 20px;
+                            padding: 0;
+                        }
+                        ul.banner-social-buttons li:last-child {
+                            margin-bottom: 0;
+                        }
+                    }
+                    footer {
+                        padding: 50px 0;
+                    }
+                    footer p {
+                        margin: 0;
+                    }
+                     ::-moz-selection {
+                        text-shadow: none;
+                        background: #fcfcfc;
+                        background: rgba(255, 255, 255, 0.2);
+                    }
+                     ::selection {
+                        text-shadow: none;
+                        background: #fcfcfc;
+                        background: rgba(255, 255, 255, 0.2);
+                    }
+                    img::selection {
+                        background: transparent;
+                    }
+                    img::-moz-selection {
+                        background: transparent;
+                    }
+                    body {
+                        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
+                    }
+                    #mic {
+                        padding: 20px;
+                        font-size: 8.333333em;
+                        background-image: url(water.png);
+                        -webkit-background-clip: text;
+                        -webkit-text-fill-color: transparent;
+                    }
+                    @keyframes mic-animate {
+                        0% {
+                            background-position: 700px;
+                        }
+                        50% {
+                            background-position: 400px;
+                        }
+                        100% {
+                            background-position: 700px;
+                        }
+                    }
+                }
+
+                #mapSection {
+                    background-color: black;
+                }
\ No newline at end of file
diff --git a/assets/css/water.png b/assets/css/water.png
new file mode 100755
index 0000000..8fad629
Binary files /dev/null and b/assets/css/water.png differ
diff --git a/assets/images/mood.jpg b/assets/images/mood.jpg
new file mode 100755
index 0000000..b7e10b8
Binary files /dev/null and b/assets/images/mood.jpg differ
diff --git a/assets/javascript/app.js b/assets/javascript/app.js
old mode 100644
new mode 100755
index 2e849e9..a94092e
--- a/assets/javascript/app.js
+++ b/assets/javascript/app.js
@@ -1,13 +1,30 @@
-$(function () {
-
+$(document).ready(function () {
+
+    // read a this greeting message for the user depense on his name
+    var user = sessionStorage.getItem('user');
+    speechSynthesis.speak(new SpeechSynthesisUtterance("Hi,  " + user + '. upload your photo and check your mood today'));
+
+    // jQuery for page scrolling feature - requires jQuery Easing plugin
+    $(function () {
+        $('a.page-scroll').bind('click', function (event) {
+            var $anchor = $(this);
+            $('html, body').stop().animate({
+                scrollTop: $($anchor.attr('href')).offset().top
+            }, 1500, 'easeInOutExpo');
+            event.preventDefault();
+        });
+    });
 
+    // Google vision API upload and pass photo to the API
     $("#pic").change(function encodeImagetoBase64(element) {
+        $("#loadPicIcon").attr("class", "fa fa-refresh fa-spin fa-3x fa-fw");
 
         var file = this.files[0];
         var reader = new FileReader();
 
         reader.onloadend = function () {
             var convertedPic = reader.result;
+            // Removes the extra string characters before the /
             var sliceNum = convertedPic.indexOf(",") + 1;
             var convertedPicSlice = convertedPic.slice(sliceNum);
 
@@ -30,19 +47,35 @@ $(function () {
                 success: function (result) {
                     // CallBack(result);
 
+                    // Scroll to voice section once results are produced for the image
+                    $('html, body').stop().animate({
+                        scrollTop: $("#voice").offset().top
+                    }, 1500, 'easeInOutExpo');
+
                     var faceResults = result.responses[0].faceAnnotations[0];
                     var anger = faceResults.angerLikelihood;
                     var joy = faceResults.joyLikelihood;
                     var sorrow = faceResults.sorrowLikelihood;
                     var surprise = faceResults.surpriseLikelihood;
 
-                    console.log(faceResults);
+                    // console.log(faceResults);
 
                     console.log("Anger " + anger);
                     console.log("Joy " + joy);
                     console.log("Sorrow " + sorrow);
                     console.log("Surprise " + surprise);
 
+                    var mood;
+                    if (joy === "LIKELY" || joy === "POSSIBLE" || joy === "VERY_LIKELY") {
+                        mood = 'happy';
+                    }
+                    if (sorrow === "LIKELY" || sorrow === "POSSIBLE" || sorrow === "VERY_LIKELY") {
+                        mood = 'sad';
+                    }
+
+                    setTimeout(googleVoice(mood), 1000);
+                    $("#loadPicIcon").attr("class", "fa fa-cloud-upload fa-5x");
+
                 },
                 error: function (error) {
                     console.log(error);
@@ -54,13 +87,160 @@ $(function () {
         }
         reader.readAsDataURL(file);
 
+
     });
 
 
 
+    function googleVoice(mood) {
+
+        var speechMessage = new SpeechSynthesisUtterance();
+        speechMessage.lang = 'en-US';
+        speechMessage.text = 'oh  you  look  ' + mood + ' Today  how  can I  help  you';
+        speechSynthesis.speak(speechMessage);
+
+        speechMessage.onstart = function (event) {
+            console.log(event);
+        };
+        if ('webkitSpeechRecognition' in window) {
+            var speechRecognizer = new window.webkitSpeechRecognition();
+            speechRecognizer.continuous = true;
+            speechRecognizer.interimResults = true;
+            speechRecognizer.lang = 'en-US';
+            speechRecognizer.maxAlternatives = 1;
+
+
+            setTimeout(function () {
+                f(mood)
+            }, 3000);
+
 
+            $("#mic").on('click', function () {
+                f(mood);
+            });
+            // console.log(x);
+
+            function f(mood) {
+                // console.log(x);
+
+                $("#mic").css("animation", "mic-animate 2s linear infinite");
+                speechRecognizer.start();
+                speechRecognizer.onresult = function (event) {
+                    for (var i = event.resultIndex; i < event.results.length; ++i) {
+                        interimResults = event.results[i][0].transcript;
+                        x = $('textarea').val();
+                        console.log(event.results[i][0].transcript);
+
+                        if (event.results[i].isFinal) {
+
+                            if (compare2string(event.results[i][0].transcript, "Im looking for some food")) {
+                                speechRecognizer.stop();
+                                speechSynthesis.speak(new SpeechSynthesisUtterance("go and  cook  some  food  for  your  self"));
+                            }
+                            if (compare2string(event.results[i][0].transcript, "go")) {
+                                window.open("https://www.google.com/search?source=hp&q=" + x);
+                                speechRecognizer.stop();
+                                $('textarea').val("");
+                                $("#mic").css("animation", 'none');
+                                break;
+                            }
+                            if (compare2string(event.results[i][0].transcript, "stop")) {
+                                speechRecognizer.stop();
+                                $('textarea').val("");
+                                $("#mic").css("animation", 'none');
+                                break;
+                            }
+                            if (compare2string(event.results[i][0].transcript, "delete")) {
+                                var lastIndex = x.lastIndexOf(" ");
+                                x = x.substring(0, lastIndex);
+                                $('textarea').val(x);
+                                break;
+                            }
+                            if (compare2string(event.results[i][0].transcript, "delete all")) {
+                                $('textarea').val("");
+                                break;
+                            }
+                            if (compare2string(event.results[i][0].transcript, "I want to get out of the house") && mood == "sad") {
+                                speechRecognizer.stop();
+                                speechSynthesis.speak(new SpeechSynthesisUtterance("Since your feeling blue you should treat yourself to some relaxation. A spa day perhaps and long massage"));
+                                foodMap("spa");
+                                break;
+                            }
+                            if (compare2string(event.results[i][0].transcript, "I want to get out of the house") && mood == "happy") {
+                                speechRecognizer.stop();
+                                speechSynthesis.speak(new SpeechSynthesisUtterance("Well since your having such a good day why don't you go ahead and add to it by visiting one of your local parks, go and be one with nature"));
+                                foodMap("parks");
+                                break;
+                            }
+                            if (compare2string(event.results[i][0].transcript, "I want to watch a movie") && mood == "sad") {
+                                speechRecognizer.stop();
+                                speechSynthesis.speak(new SpeechSynthesisUtterance("How about an animated film, or maybe even a musical that will get your spirits up, here are your local theatre's"));
+                                foodMap("theatre");
+                                break;
+                            }
+                            if (compare2string(event.results[i][0].transcript, "I want to watch a movie") && mood == "happy") {
+                                speechRecognizer.stop();
+                                speechSynthesis.speak(new SpeechSynthesisUtterance("Well your feeling pretty good how about an action film or maybe a comedy, here are your local theatre's"));
+                                foodMap("theatre");
+                                break;
+                            }
+                            if (compare2string(event.results[i][0].transcript, "I want to eat something") && mood == "sad") {
+                                speechRecognizer.stop();
+                                speechSynthesis.speak(new SpeechSynthesisUtterance("Sorry your feeling sad, here's some food that will comfort you. It's mostly ice cream, my favorite"));
+                                foodMap("ice cream");
+                                break;
+                            }
+                            if (compare2string(event.results[i][0].transcript, "I want to eat something") && mood == "happy") {
+                                speechRecognizer.stop();
+                                speechSynthesis.speak(new SpeechSynthesisUtterance("Glad to see your feeling good, here's some food that will keep you happy and healthy"));
+                                foodMap("healthy food");
+                                break;
+                            }
+
+
+                            $('textarea').val(x + " " + interimResults);
+                            console.log("final results: " + event.results[i][0].transcript);
+                        }
+                    }
+                }
+            }
+        }
+
+        function compare2string(x, y) {
+            if (x.toLowerCase().replace(/ /g, '').replace(/'/g, '') === y.toLowerCase().replace(/ /g, '').replace(/'/g, '')) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+    }
+
+    $.getJSON("https://ipapi.co/json/",
+        function (json) {
+            // console.log(json);
+            var city = json.city;
 
+            $("iframe").attr("src", "https://www.google.com/maps/embed/v1/search?key=AIzaSyD0X2UTW5AczWoZ9-Wj517k9yvMZqBEeA4&q=" + city);
+        });
 
+    function foodMap(search) {
+
+        $("#mic").css("animation", 'none');
+        $('textarea').val("");
+
+        // Scroll to voice section once results are produced for the image
+        $('html, body').stop().animate({
+            scrollTop: $("#mapSection").offset().top
+        }, 1500, 'easeInOutExpo');
+
+        $.getJSON("https://ipapi.co/json/",
+            function (json) {
+                // console.log(json);
+                var city = json.city;
+
+                $("iframe").attr("src", "https://www.google.com/maps/embed/v1/search?key=AIzaSyD0X2UTW5AczWoZ9-Wj517k9yvMZqBEeA4&q=" + search + "+in+" + city);
+            });
+    }
 
 
 
diff --git a/index.html b/index.html
index 1ce8669..463bb67 100644
--- a/index.html
+++ b/index.html
@@ -4,31 +4,190 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+
   <!-- Added link to the jQuery Library -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+
+  <!-- Bootstrap JavaScript -->
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
+    crossorigin="anonymous"></script>
+
+  <!-- Plugin jQuery Easing JavaScript -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
+
   <!-- Link to external javaScript -->
-  <script src="assets/javascript/app.js" type="text/javascript"></script>
+  <script src="https://www.gstatic.com/firebasejs/4.4.0/firebase.js"></script>
+
   <!-- Added link to the Bootstrap Library -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
     crossorigin="anonymous">
+
+  <!-- Custom Fonts -->
+  <script src="https://use.fontawesome.com/7c7cf4a181.js"></script>
+  <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
+
+
   <!-- Link to external CSS -->
   <link rel="stylesheet" href="assets/css/style.css">
   <title>Moody</title>
+
 </head>
 
-<body>
+<body id="page-top" style="overflow:hidden" data-target=".navbar-fixed-top">
+
 
-  <div class="container">
+  <!-- Navigation -->
+  <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
+    <div class="container">
+      <div class="navbar-header">
+        <a class="navbar-brand page-scroll" href="#page-top">
+          <i class="fa fa-hashtag"></i> <span class="light">Moody</span>
+        </a>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Login-->
+  <header class="intro" id="header">
+    <div class="intro-body">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-4 col-md-offset-4">
+            <div class="form-group">
+              <label for="usr" style="font-size:15px">Username</label>
+              <input type="text" class="form-control" id="username">
+            </div>
+            <div class="form-group">
+              <label for="pwd" style="font-size:15px">Password</label>
+              <input type="password" class="form-control" id="password">
+            </div>
+            <br>
+            <div style="display:grid">
+              <button type="button" id='Connect' class="btn btn-success btn-block">Log In</button><br>
+              <a href="#Subscribe">
+              <button type="button" class="btn btn-danger btn-block">Sign Up</button>                       
+             </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
 
-    <div class="form-group">
-      <label for="exampleInputFile">Upload Photo</label>
-      <input type="file" id="pic">
-      <p class="help-block">Once you upload I can figure out your mood</p>
+  <!-- Sign Up -->
+  <section id="Subscribe" class="intro">
+    <div class="intro-body">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-4 col-md-offset-4">
+            <div class="form-group">
+              <label for="usr" style="font-size:15px">Username</label>
+              <input type="text" class="form-control" id="Username">
+            </div>
+            <div class="form-group">
+              <label for="Email" style="font-size:15px">Email</label>
+              <input type="text" class="form-control" id="Email">
+            </div>
+            <div class="form-group">
+              <label for="pwd" style="font-size:15px">Password</label>
+              <input type="password" class="form-control" id="Password">
+            </div>
+            <div class="form-group">
+              <label for="pwd" style="font-size:15px">Re-enter Password</label>
+              <input type="password" class="form-control" id="con-Password">
+            </div>
+            <br>
+            <button id="Submit" type="button" class="btn btn-success btn-block">Submit</button>
+          </div>
+        </div>
+      </div>
     </div>
+  </section>
+</body>
+<script>
+  // Initialize Firebase
+  var config = {
+    apiKey: "AIzaSyBjtiq0vAqMLSYipkvVn7FAhMjz8w87o1w",
+    authDomain: "prefab-icon-181104.firebaseapp.com",
+    databaseURL: "https://prefab-icon-181104.firebaseio.com",
+    projectId: "prefab-icon-181104",
+    storageBucket: "prefab-icon-181104.appspot.com",
+    messagingSenderId: "418253791179"
+  };
+  $(document).ready(function () {
+    firebase.initializeApp(config);
+    database = firebase.database();
+    ref = database.ref();
+    $("#Connect").on('click', function () {
+      var user = $('#username').val().trim();
+      $('#username').val('');
+      var Password = $('#password').val().trim();
+      $('#password').val('');
+      if (user === "" || Password === "") {
+        alert('Please enter Username and Password.');
+      } else {
+        var authenSucces = false;
+        ref.once('value', function (snapshot) {
+          $.each(snapshot.val(), function (k, v) {
 
-    <div id="image"></div>
+            if ((v.Username === user) && (v.Password === Password)) {
+              authenSucces = true;
+              sessionStorage.setItem('user', v.Username);
+            }
+          });
+          if (authenSucces === true) {
+            window.location.href = 'indexmainpage.html';
 
-  </div>
+          }
+          if (authenSucces === false) {
+            alert('User not found');
+          }
+        });
+      }
+    });
+    $('#Submit').on('click', function () {
+      subscribe();
+    });
 
+    function subscribe() {
+      var Username = $('#Username').val().trim();
+      $('#Username').val('');
+      var Email = $('#Email').val().trim();
+      $('#Email').val('');
+      var Userexist = false;
+      ref.on('value', function (snapshot) {
+        $.each(snapshot.val(), function (k, v) {
+          if (v.Username == Username) {
+            Userexist = true;
+          }
+          console.log(Userexist);
+        });
+      });
+      if (Userexist === true) {
+        alert("this Username has been used");
+      } else {
+        if ($('#Password').val() === $('#con-Password').val()) {
+          var Password = $('#Password').val().trim();
+        } else {
+          alert('please repeat');
+        }
+        $('#Password').val('');
+        $('#con-Password').val('');
+        if (Username === "" || Password === "" || Email === '') {
+          alert('please fill the whole form');
+        } else {
+          window.location.hash = "#header";
+          ref.push({
+            Username: Username,
+            Email: Email,
+            Password: Password
+          });
+        }
+      }
+    }
+  });
+</script>
 
 </html>
\ No newline at end of file
diff --git a/indexmainpage.html b/indexmainpage.html
new file mode 100644
index 0000000..6e8794d
--- /dev/null
+++ b/indexmainpage.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <!-- Added link to the jQuery Library -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+
+  <!-- Bootstrap JavaScript -->
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
+    crossorigin="anonymous"></script>
+
+  <!-- Plugin jQuery Easing JavaScript -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
+
+  <!-- Google map API -->
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB17PLXf3yC5S-gh9hDuFBUKVqvFZajmX8&libraries=places"></script>
+
+  <!-- Link to external javaScript -->
+  <script src="assets/javascript/app.js" type="text/javascript"></script>
+
+  <!-- Link to colors CSS -->
+  <link rel=stylesheet href="https://s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css">
+
+  <!-- Added link to the Bootstrap Library -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
+    crossorigin="anonymous">
+
+  <!-- Custom Fonts -->
+  <script src="https://use.fontawesome.com/7c7cf4a181.js"></script>
+  <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
+
+
+  <!-- Link to external CSS -->
+  <link rel="stylesheet" href="assets/css/style.css">
+  <title>Moody</title>
+
+</head>
+
+<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
+
+
+  <!-- Navigation -->
+  <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
+    <div class="container">
+      <div class="navbar-header">
+        <a class="navbar-brand page-scroll" href="#page-top">
+          <i class="fa fa-hashtag"></i> <span class="light">Moody</span>
+        </a>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Intro Header -->
+  <header class="intro">
+    <div class="intro-body">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-8 col-md-offset-2">
+            <h1 style="font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;" class="brand-heading">
+              <span style="color: #0074D9">M</span>
+              <span style="color:#01FF70">O</span>
+              <span style="color:#FF851B">O</span>
+              <span style="color:#FFDC00">D</span>
+              <span style="color:#7FDBFF">Y</span></h1>
+            <p class="intro-text">
+              Show me your mood and I'll try to match it
+            </p>
+            <a href="#upload" class="btn btn-circle page-scroll">
+              <i class="fa fa-angle-down animated"></i>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <!-- Upload photo Section -->
+  <section id="upload" class="container content-section text-center">
+    <div class="row">
+      <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2">
+        <div class="form-group">
+          <h2>Upload a photo</h2>
+          <label for="pic"><i class="fa fa-cloud-upload fa-5x" aria-hidden="true" id="loadPicIcon"></i></label>
+          <input type="file" id="pic" style="display: none">
+          <p class="help-block">Once you upload I can figure out your mood</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Google voice -->
+  <section id="voice" class="container results-section text-center">
+    <div class="row">
+      <div class="col-lg-8 col-lg-offset-2">
+        <h2>Lets talk about it</h2>
+        <div id="A" class="form-group">
+          <label for="comment">Say: "I want to eat something"</label><br>
+          <label for="comment">Say: "I want to watch a movie"</label><br>
+          <label for="comment">Say: "I want to get out of the house"</label><br> 
+          <label for="comment">Say: "Go" to open google search</label><br>                    
+          <label for="comment">Say: "Stop" to stop listening</label><br>
+          <br>
+          <textarea class="form-control" rows="1" id="comment"></textarea>
+          <br>
+          <div id="button">
+            <i id="mic" class="fa fa-microphone fa-lg" style="font-size: 8.333333em" aria-hidden="true"></i>
+            <h2>Click the mic to start listening</h2>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section id="mapSection" class="container results-section text-center">
+    <div class="row">
+      <div class="col-lg-8 col-lg-offset-2">
+        <h2>Match the mood</h2>
+        <div id="map">
+          <iframe width="950" height="350" frameborder="0" style="border:0" src="" allowfullscreen>
+          </iframe>
+        </div>
+      </div>
+    </div>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer>
+    <div class="container text-center">
+      <p>Hope you enjoyed</p>
+    </div>
+  </footer>
+
+</body>
+
+
+</html>
\ No newline at end of file