diff --git a/app.js b/app.js
index 67e6317..7f380d0 100644
--- a/app.js
+++ b/app.js
@@ -4,6 +4,46 @@
 const startBtn = document.querySelector('#start');
 const stopBtn = document.querySelector('#end');
 const speakBtn = document.querySelector('#speak');
+const time = document.querySelector('#time');
+const battery = document.querySelector('#battery')
+const internet = document.querySelector('#internet')
+const turn_on = document.querySelector('#turn_on')
+const msgs = document.querySelector(".messages")
+
+
+
+document.querySelector("#start_rolex_btn").addEventListener("click", () =>{
+  recognition.start()
+})
+// rolex's commands
+let rolexComs = [];
+rolexComs.push("hi rolex");
+rolexComs.push("what are your commands");
+rolexComs.push("close this - to close opened popups");
+rolexComs.push(
+  "change my information - information regarding your acoounts and you"
+);
+// rolexComs.push("whats the weather or temperature");
+// rolexComs.push("show the full weather report");
+rolexComs.push("are you there - to check rolexs presence");
+rolexComs.push("shut down - stop voice recognition");
+rolexComs.push("open google");
+rolexComs.push('search for "your keywords" - to search on google ');
+rolexComs.push("open whatsapp");
+rolexComs.push("open youtube");
+rolexComs.push('play "your keywords" - to search on youtube ');
+rolexComs.push("close this youtube tab - to close opened youtube tab");
+rolexComs.push("open firebase");
+rolexComs.push("open netlify");
+rolexComs.push("open twitter");
+rolexComs.push("open my twitter profile");
+// rolexComs.push("open instagram");
+rolexComs.push("open my linkedin profile");
+rolexComs.push("open github");
+rolexComs.push("open my coding profile");
+rolexComs.push("Find my deivice")
+rolexComs.push("loacte")
+
 
 //speech recogition setup
 const SpeechRecognition = 
@@ -17,16 +57,132 @@ recognition.onstart = function(){
   console.log("vr active");
 };
 
+  // create a new chat
+  function createMsg(who,msg){
+    let newmsg = document.createElement('p')
+    newmsg.innerText = msg;
+    newmsg.setAttribute('class',who)
+    msgs.appendChild(newmsg)
+  }
+
+// time setup
+let date = new Date()
+let hrs = date.getHours()
+let mins = date.getMinutes()
+let secs = date.getSeconds()
+// autojarvis
+function autojarvis(){
+  setTimeout(()=>{
+    recognition.start()
+  },1000)
+}
+// onload window
+
+window.onload = () =>{
+  // onstartup
+turn_on.play()
+turn_on.addEventListener('onend' , ()=>{
+  setTimeout(()=> {
+    autojarvis()
+    readOut('Ready To Go Sir')
+    if(localStorage.getItem('rolex_setup')=== null){
+      readOut('Please fill out the form')
+    }
+  },200);
+})
+
+// rolex commands adding
+rolexComs.forEach((e) =>{
+  document.querySelector('.commands').innerHTML += `<p>#${e}</p><br/>`
+
+})
+
+
+  // time setup
+  time.textContent = `${hrs}:${mins}:${secs}`
+  time.style.color = 'white'
+  setInterval(() => {
+    let date = new Date()
+let hrs = date.getHours()
+let mins = date.getMinutes()
+let secs = date.getSeconds()
+time.textContent = `${hrs}:${mins}:${secs}`
+
+  },1000);
+
+
+
+
+  // battery setup
+  let batteryPromise = navigator.getBattery()
+  batteryPromise.then(batteryCallback)
+
+  function batteryCallback(batteryObject){
+    printBatteryStatus(batteryObject)
+    setInterval(()=>{
+      printBatteryStatus(batteryObject)
+
+    },5000);
+  }
+
+    battery.style.color = 'white'
+  function printBatteryStatus(batteryObject){
+    battery.textContent = `${batteryObject.level*100}%`
+    if (batteryObject.charging = true){
+      document.querySelector('.battery').style.width = '10px'
+      battery.textContent = `${batteryObject.level*100}% Charge`
+      
+    }
+    else if (batteryObject.charging = false){battery.textContent = `${batteryObject.level*100}%`}
+  }
+   // internet connectivity
+
+   if(navigator.onLine){
+    document.querySelector("#internet").textContent = "online"
+    connectivity = "online"
+  } else {
+    document.querySelector("#internet").textContent = "offline"
+    connectivity = "offline"
+  }
+  internet.style.color = 'white'
+setInterval(() => {
+  if(navigator.onLine){
+    document.querySelector("#internet").textContent = "online"
+    connectivity = "online"
+  } else {
+    document.querySelector("#internet").textContent = "offline"
+    connectivity = "offline"
+  }
+}, 6000);
+
+
+
+  }
+// }
+
 //result
  recognition.onresult = function(event){
   let current = event.resultIndex;
   let transcript = event.results[current][0].transcript;
+  let userdata = localStorage.getItem('rolex_setup')
+  
+createMsg("usermsg",transcript)
+
   console.log(event);
  transcript = transcript.toLowerCase();
  
 if(transcript.includes("hello rolex")){
   readOut("hello sir");
 }
+if(transcript.includes("close this")){
+  readOut("closed")
+  document.querySelector('.commands').style.display = 'none';
+  setup.style.display = 'none'
+}
+if(transcript.includes("commands")){
+  readOut("Sir, I follow the following commands ");
+  document.querySelector('.commands').style.display = 'block';
+}
 if (transcript.includes("open youtube")){
   readOut("opening youtube sir!");
   window.open("https://www.youtube.com/")
@@ -35,28 +191,158 @@ if (transcript.includes("open google")){
   readOut("opening google sir!");
   window.open("https://www.google.com/");
 }
+
+if(transcript.includes('motivational')){
+  readOut("you only fail, when you stop trying!")
+  return;
+  }
+  if(transcript.includes('drive')){
+    readOut("opening your drive sir!")
+  window.open("https://drive.google.com/drive/my-drive");
+    return;
+    }
+    if(transcript.includes('mails')){
+      readOut("checking your mails sir!")
+    window.open("https://mail.google.com/mail/u/0/#inbox");
+      return;
+      }
+      if(transcript.includes('amazon')){
+        readOut("opening amazon shopping sir!")
+      window.open("https://www.amazon.in/");
+        return;
+        }
+        if(transcript.includes('find my device') ){
+          readOut("locating your device sir!")
+        window.open("https://www.google.com/android/find/");
+        return;
+      
+          }
+          if(transcript.includes('weather today') || (transcript.includes('todays weather report'))){
+            readOut("here is the report")
+            window.open("https://www.accuweather.com/en/in/bengaluru/204108/weather-forecast/204108");
+            return;
+          }
+          if(transcript.includes('stocks today') || (transcript.includes('stocks to buy today'))){
+            readOut("here are some suggestions!")
+            window.open("https://in.investing.com/equities/most-active-stocks");
+           return; 
+          }
+          if (transcript.includes('open whatsapp')) {
+            readOut('Opening whats app Sir')
+            window.open('https://web.whatsapp.com/')
+            return;
+          }
   //google search
-  if (transcript.includes("search for")){
-    readOut("here's the result")
-    let input = transcript.split(""); //
-    input.splice(0,11) //
-    input.pop(); // 
-    input = input.join("").split(" ").join("+"); // 
-    console.log(input); // it will transfer voice into transcript
+  if (transcript.includes("search for")) {
+    let input = transcript.split("search for").at(-1)
+    console.log(input);
+    readOut(`searching for ${input}`)
     window.open(`https://www.google.com/search?q=${input}`)
+    return;
   }
-  //youtube search
-  if (transcript.includes("play")){
-    readOut("playing")
-    let input = transcript.split("");
-    input.splice(0,11)
-    input.pop();
-    input = input.join("").split(" ").join("+");
+  if (transcript.includes('play the song')) {
+    let input = transcript.split("play the song").at(-1)
+    readOut(`playing ${input} from spotify`)
+    input = input.replace(' ', '%20')
+    console.log(input)
+    window.open(`https://open.spotify.com/search/${input}`)
+    return;
+  }
+  // youtube search
+  if (transcript.includes("play")) {
+    let input = transcript.split("play").at(-1)
     console.log(input);
-    window.open(`https://www.youtube.com/results?search_query=${input}`)
+    readOut(`playing ${input} from youtube! sir..`)
+    window.open(`https://www.youtube.com/results?search_query=${input}`);
+    return;
+  }
+
+
+  // Maps
+
+  // locate kormangala
+  if (transcript.includes('locate')) {
+    let input = transcript.split("locate").at(-1)
+    readOut(`locating ${input} from google maps`)
+    input = input.replace(' ', '+')
+    console.log(input)
+    window.open(`https://www.google.com/maps/search/${input}/`)
+    return;
   }
+
+  if (transcript.includes("open my github profile") || transcript.includes('open my coding profile')) {
+    readOut('Opening your github profile sir')
+    window.open(`https://github.com/${JSON.parse(userdata).github}`)
+    return;
+  }
+  if (transcript.includes("open my linkedin profile")) {
+    readOut('Opening your linkedin profile sir')
+    window.open(`https://www.linkedin.com/${JSON.parse(userdata).linkedin}`)
+    return;
+  }
+  if (transcript.includes("owner")){
+    readOut(`Currently my owner is ${JSON.parse(userdata).name}`)
+    return;
+  }
+  if (transcript.includes('founder')){
+    readOut('I was created by my god kupendra sir')
+  }
+  if (transcript.includes("open github")) {
+    readOut('Opening github sir')
+    window.open('https://github.com/')
+    return;
+  }
+  if(transcript.includes('twitter profile') ){
+    readOut("opening your twitter profile sir!")
+  window.open("https://twitter.com/kupendrav99");
+    return;
+    }
+  if(transcript.includes('linkedin profile') ){
+    readOut("opening your linkedin profile sir!")
+  window.open("https://www.linkedin.com/in/kupendra-v2903/");
+    return;
+    }
+
+  // if (transcript) {
+  //   readOut("i didn't get your sir")
+  // }
 };
 
+if (localStorage.getItem("rolex_setup") !== null){
+  
+}
+
+// rolex setup
+const setup = document.querySelector(".rolex_setup")
+// setup.style.display = "none"
+if(localStorage.getItem('rolex_setup') === null){
+  // setup.style.display = 'block'
+  setup.querySelector('button').addEventListener('click',userInfo)
+}
+
+// userinfo setup
+function userInfo(){
+  let setupInfo = {
+    name: setup.querySelectorAll('input')[0].value,
+    bio : setup.querySelectorAll('input')[1].value,
+    github : setup.querySelectorAll('input')[2].value,
+    twitter : setup.querySelectorAll('input')[3].value,
+    linkedIn : setup.querySelectorAll('input')[4].value,
+  }
+  let testArr = []
+  setup.querySelectorAll('input').forEach((e) =>{
+    testArr.push(e.value) 
+   })
+   if(testArr.includes('')){
+    readOut('⚠️Please Enter your complete information')
+   } else{
+    localStorage.clear()
+    localStorage.setItem(
+      'rolex_setup', JSON.stringify({...setupInfo})
+      )
+      setup.style.display = "none"
+   }
+}
 
 // end
 recognition.onend = function (){
@@ -87,6 +373,7 @@ function readOut(message){
 
   window.speechSynthesis.speak(speech);
   console.log("speaking out");
+  createMsg('jmsg',message)
 }
 
 speakBtn.addEventListener("click",() => {
diff --git a/assets/audio/Jarvis.mp3 b/assets/audio/Jarvis.mp3
new file mode 100644
index 0000000..b20e195
Binary files /dev/null and b/assets/audio/Jarvis.mp3 differ
diff --git a/assets/audio/power up.mp3 b/assets/audio/power up.mp3
new file mode 100644
index 0000000..363bc8d
Binary files /dev/null and b/assets/audio/power up.mp3 differ
diff --git a/assets/img/Triangle-Gif-003-1-Revised.gif b/assets/img/Triangle-Gif-003-1-Revised.gif
new file mode 100644
index 0000000..93e4923
Binary files /dev/null and b/assets/img/Triangle-Gif-003-1-Revised.gif differ
diff --git a/assets/img/blueiron.gif b/assets/img/blueiron.gif
new file mode 100644
index 0000000..666ec8f
Binary files /dev/null and b/assets/img/blueiron.gif differ
diff --git a/assets/img/dataanaly.gif b/assets/img/dataanaly.gif
new file mode 100644
index 0000000..c9819b1
Binary files /dev/null and b/assets/img/dataanaly.gif differ
diff --git a/assets/img/heart.gif b/assets/img/heart.gif
new file mode 100644
index 0000000..9043b38
Binary files /dev/null and b/assets/img/heart.gif differ
diff --git a/assets/img/icons8-battery.gif b/assets/img/icons8-battery.gif
new file mode 100644
index 0000000..4f0c7aa
Binary files /dev/null and b/assets/img/icons8-battery.gif differ
diff --git a/assets/img/icons8-clock.gif b/assets/img/icons8-clock.gif
new file mode 100644
index 0000000..4776eda
Binary files /dev/null and b/assets/img/icons8-clock.gif differ
diff --git a/assets/img/icons8-wifi.gif b/assets/img/icons8-wifi.gif
new file mode 100644
index 0000000..bc749b4
Binary files /dev/null and b/assets/img/icons8-wifi.gif differ
diff --git a/assets/img/iranpng-removebg-preview.png b/assets/img/iranpng-removebg-preview.png
new file mode 100644
index 0000000..bc43d60
Binary files /dev/null and b/assets/img/iranpng-removebg-preview.png differ
diff --git a/assets/img/iron.gif b/assets/img/iron.gif
new file mode 100644
index 0000000..1488044
Binary files /dev/null and b/assets/img/iron.gif differ
diff --git a/assets/img/super.gif b/assets/img/super.gif
new file mode 100644
index 0000000..5c17d3e
Binary files /dev/null and b/assets/img/super.gif differ
diff --git a/index.html b/index.html
index ea35134..94fa4ad 100644
--- a/index.html
+++ b/index.html
@@ -5,15 +5,70 @@
   <link rel="stylesheet" href="style.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>R O L E X</title>
+  <link rel="shortcut icon" href="/assets/img/iranpng-removebg-preview.png" type="image/x-icon">
  </head>
  <body>
-  <h1>
+  <audio src="./assets/audio/power up.mp3" id="turn_on"></audio>
+  <div class="machine">
+    <div class="clock count">
+    <img src="./assets/img/icons8-clock.gif" alt="" class="icon">
+    <p id="time"></p>
+  </div>
+  <div class="internet count">
+    <img src="./assets/img/icons8-wifi.gif" alt="" class="icon">
+    <p id="internet"></p>
+  </div>
+  <div class="battery count">
+    <img src="./assets/img/icons8-battery.gif" alt="" class="icon">
+    <p id="battery"></p>
+
+  </div>
+    <div class="data">
+      <img src="./assets/img/dataanaly.gif" alt="">
+      <p id="data"></p>
+  </div> 
+  
+  <img src="./assets/img/iron.gif" alt="" id="heart">
+<img src="./assets/img/heart.gif" alt="" id="iron_man">
+
+</div>
+ <div id="start_rolex_btn" title="START ROLEX">
+  <img src="./assets/img/super.gif" alt="">
+</div>  
+  <!-- <h1>
     Hello, we are building R O L E X
-  </h1>
-  <!-- weather -->
-  <button id="start">start</button>
-  <button id="end">end</button>
-  <button id="speak">Speak out</button>
+  </h1> -->  
+
+<!-- userinfo -->
+<div class="rolex_setup in_middle hide_on_small">
+  <label for="">Your Name</label>
+  <input type="text">
+  <br>
+  <label for="">Your Bio</label>
+  <input type="text">
+  <br>
+  <label for=""> Github profile</label>
+  <input type="text">
+  <br>
+  <label for="">Twitter profile</label>
+  <input type="text">
+  <br>
+  <label for="">linkedin profile</label>
+  <input type="text">
+  <br>
+  <br>
+  <button id="sub-btn">Submit</button>
+</div> 
+<div   class="messages"></div>
+<div class="commands in_middle"></div> 
+
+  <button id="start" style="display: none;">start</button>
+  <button id="end" style="display: none;">end</button>
+  <button id="speak" style="display: none;">Speak out</button>
+
+  <div class="new_rolex_window">
+    <img src="./assets/img/blueiron.gif" height="230" id="jarvis_start">
+  </div>
  <script src="app.js"></script>
  </body>
  </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index e69de29..640f0cc 100644
--- a/style.css
+++ b/style.css
@@ -0,0 +1,204 @@
+@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap');
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  color: rgb(10, 9, 9);
+  position: fixed;
+  font-family: 'Nanum Gothic Coding', monospace;
+  user-select: none;
+  /* background-color: black; */
+}
+
+label{
+  color: crimson;
+  text-align: left;
+}
+
+input{
+  height: 5vh;
+  color: rgb(105, 5, 5);
+  border: none;
+  /* border-bottom: 2px solid black; */
+  width: 60vw;
+}
+#sub-btn{
+  background-color: #484848;
+  background-image: linear-gradient(43deg, #484848 0%, #00e2f6 22%, #cd1315 49%);
+  color: white;  
+  width: 80px;
+  padding: 10px 5px;
+  outline: none;
+  border: none;
+  border-radius: 10%;
+
+}
+.machine{
+  background-color: black;
+  height: 100vh;
+  width: 100vw;
+  user-select: none;
+}
+.machine *{
+  position: absolute;
+}
+#heart{
+  bottom: 0;
+  right: 0;
+}
+#iron_man{
+  bottom: 0;
+  left: 0;
+}
+/* time css to be done */
+ .in_middle{
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  padding: 50px;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  z-index: 10000;
+  align-items: center;
+  border:3px solid lightseagreen;
+  line-height: 2;
+  /* gap: 1vh; */
+  /* height: 50vh; */
+  /* overflow-y: scroll; */
+}
+.in_middle *{
+  position: static;
+}
+.in_middle ::-webkit-scrollbar{
+    display: none;
+}
+.in_middle ::-webkit-scrollbar-track{
+    border-radius: 10px;
+}
+.in_middle ::-webkit-scrollbar-thumb{
+  background-color: #cd1315;
+  border-radius: 10px;
+} 
+
+.icon{
+  height: 50px;
+  width: 50px;
+  object-fit: cover;
+  padding: 3px;
+  background-color: white;
+  border-radius: 50%;
+}
+.count *{
+  position: static;
+  
+}
+
+.count{
+  top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+.battery{
+  left: 50%;
+  top: 0px;
+  gap: 10px;
+  /* width: 200px; */
+  /* transform:translate(-50%) ; */
+}
+.data{
+  left: 56vw;
+}
+.clock{
+  width: 6vw;
+  top: 3vh;
+  left: 3vh;
+  gap: 10px;
+}
+
+.internet{
+  top: 11vh;
+  width: 6vw;
+  gap: 10px;
+  left: 2.5vh;
+}
+.messages{
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%,0);
+  width: 30vw;
+  height: 20vh;
+  
+  overflow: auto;
+  white-space: nowrap;
+  display: flex;
+   flex-direction:column-reverse;
+  align-items: flex-end;
+  justify-content:center; 
+  padding-bottom: 15px;
+  z-index: 1000;
+  font-size: 1em;
+}
+.messages::-webkit-scrollbar{
+  display: none;
+}
+.usermsg , .jmsg{
+  margin: 5px 0;
+  display: flex;
+  overflow: visible;
+}
+.usermsg{
+  text-align: right;
+  width: 10vw;
+  color: #00e2f6;
+  max-height: 4em;
+  margin-bottom: -4em;
+}
+.jmsg{
+  text-align: left;
+  margin-top: 5px;
+  width: 20vw; 
+  color: #cd1315;
+  max-height: 4em;
+}
+
+.commands{
+  display: none;
+  background-color: white;
+}
+
+.commands p {
+  color: darkred;
+}
+#start_rolex_btn{
+  border: none;
+  outline: none;
+  position: fixed;
+  /* left: 10px; */
+  transform: translateX(0);
+  top: 20vh;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+#start_rolex_btn img{
+  height: 40vh;
+}
+.new_rolex_window{
+  display: none;
+}
+@media (max-width:300px) {
+  .hide_on_small{
+    display: none;
+  }
+  .new_rolex_window{
+    display: block;
+  }
+  #start_rolex_btn{
+    display: none;
+  }
+}
\ No newline at end of file