diff --git a/css/main.css b/css/main.css
index 9c6e7c3..30f7f23 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,5 +1,28 @@
+*{
+    box-sizing: border-box;
+}
 body{
     background-color:pink;
-    color:#eee;
+    color: black;
     font-family: Arial, Helvetica, sans-serif;
+}
+#chatBox{
+    width: 100%;
+    position: absolute;
+    bottom: 50px;
+    right: 0px;
+    left: 0px;
+
+}
+#chatInput{
+    position: fixed;
+    bottom: 0px;
+    width: 100%;
+    background-color: purple;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: justify;
+            justify-content: space-between;
+    height: 70px;
+    
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 4c01dd8..c118a78 100644
--- a/index.html
+++ b/index.html
@@ -13,11 +13,13 @@
         
         <header><h1>Welcome to Meira's Mobile App Development Chat Room!</h1></header>
 
-        <div>
-            <input type="Type here hehe">
-            <button>Send messege</button>
+        <div id="chatBox">
+        <div id="chatInput">
+            <input type="Text" id="newMsg" placeholder="Type a Messege!">
+            <button id="sendBtn">Send messege</button>
         </div>
-        <input type="messeges here">
+
+      
 
         
 
diff --git a/js/main.js b/js/main.js
index acc09bf..856c5fa 100644
--- a/js/main.js
+++ b/js/main.js
@@ -12,4 +12,49 @@ if ('serviceWorker' in navigator) {
     console.log('CLIENT: service workers are not supported.');
   }
 
+var sampleMessage = {
+  sentBy:"Meira", 
+  dateStamp:"02/20/2020 at 2:50", 
+  text:"Hello,this is a message."
 
+}
+
+
+  let allMessages = [];
+  let chatBox = document.querySelector("#chatBox")
+
+
+allMessages.push(sampleMessage);
+console.log(allMessages);
+
+
+
+
+
+function makeAndDisplaymMessage(sender,dateStamp,text){
+  var newMessage = {
+    sentBy: sender, 
+    dateStamp: dateStamp, 
+    text:text
+  }
+
+  //display message
+
+  var newMsgP = document.createElement("p");
+  newMsgP.innerText = sender + ": " + text;
+
+  chatBox.appendChild(newMsgP);  
+
+  allMessages.push(newMessage);
+  console.log(allMessages);
+}
+
+document.querySelector("#sendBtn").addEventListener('click', function(){
+ 
+   makeAndDisplaymMessage("me","now", document.querySelector("#newMsg").value);
+  document.querySelector("#newMsg").value = "";
+  document.querySelector("#newMsg").focus();
+
+  });
+
+