diff --git a/css/main.css b/css/main.css
index 30f7f23..061c271 100644
--- a/css/main.css
+++ b/css/main.css
@@ -2,9 +2,18 @@
     box-sizing: border-box;
 }
 body{
-    background-color:pink;
-    color: black;
-    font-family: Arial, Helvetica, sans-serif;
+    background-color: white;
+    color: black ;
+    font-family: 'Advent Pro';
+}
+h1{
+    text-align: center;
+    text-align: center;
+    background-color: lightcoral;
+    padding: 1em;
+    border-radius: 40px;
+    color: white;
+    font-size: 15px;
 }
 #chatBox{
     width: 100%;
@@ -18,11 +27,30 @@ body{
     position: fixed;
     bottom: 0px;
     width: 100%;
-    background-color: purple;
+    background-color: lightcoral;
     display: -webkit-box;
     display: flex;
     -webkit-box-pack: justify;
             justify-content: space-between;
-    height: 70px;
-    
-}
\ No newline at end of file
+    height: 80px;  
+    padding: .5em;
+    border-radius: 30px;
+}
+#sendBtn{
+    font-family: 'Advent Pro';
+    background-color: lightcyan;
+    border: lightcoral;
+    border-radius: 30px;
+}
+#newMsg{
+    font-family: 'Advent Pro';
+    background-color: lightcyan;
+    border: lightcoral;
+    border-radius: 30px;
+}
+#sendBtn:hover{
+    background-color: lightseagreen;
+}
+p{
+text-align: center;
+}
diff --git a/img/logo57.png b/img/logo57.png
new file mode 100644
index 0000000..af4303f
Binary files /dev/null and b/img/logo57.png differ
diff --git a/img/notif.mp3 b/img/notif.mp3
new file mode 100644
index 0000000..c7fc764
Binary files /dev/null and b/img/notif.mp3 differ
diff --git a/index.html b/index.html
index c118a78..c774c31 100644
--- a/index.html
+++ b/index.html
@@ -8,14 +8,17 @@
         <title>Mobile App Development Room Chat</title>
         <link href="css/main.css" rel="stylesheet">
         <link rel="manifest" href="manifest.json">
+        <link rel="apple-touch-icon" href="img/logo57.png.png"/>
+        <link href="https://fonts.googleapis.com/css?family=Advent+Pro&display=swap" rel="stylesheet">
     </head>
     <body>
         
-        <header><h1>Welcome to Meira's Mobile App Development Chat Room!</h1></header>
+        <header><h1>~Meira's Mobile App Chat Room~</h1></header>
+        
 
         <div id="chatBox">
         <div id="chatInput">
-            <input type="Text" id="newMsg" placeholder="Type a Messege!">
+            <input type="Text" id="newMsg" placeholder=" Type a Messege!">
             <button id="sendBtn">Send messege</button>
         </div>
 
diff --git a/js/main.js b/js/main.js
index 856c5fa..172c630 100644
--- a/js/main.js
+++ b/js/main.js
@@ -58,3 +58,9 @@ document.querySelector("#sendBtn").addEventListener('click', function(){
   });
 
   
+  // function playSound("img/notif.mp3"){
+  //   var mp3Source = '<source src="' + filename + '.mp3" type="audio/mpeg">';
+  //   var oggSource = '<source src="' + filename + '.ogg" type="audio/ogg">';
+  //   var embedSource = '<embed hidden="true" autostart="true" loop="false" src="' + filename +'.mp3">';
+  //   document.getElementById("sound").innerHTML='<audio autoplay="autoplay">' + mp3Source + oggSource + embedSource + '</audio>';
+  // }
\ No newline at end of file
