diff --git a/index.html b/index.html
index 1d6f9cf..1e6d7a3 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
   <div class="site-wrapper">
     <header class="site-header">
       <h1 class="site-header__title">Messages</h1>
-			<a href="#" class="button">My Archives</a>
+			<a href="#" class="button button--clear">My Archives</a>
     </header>
     <div class="messages">
 			<div class="message">
@@ -50,10 +50,12 @@ <h1 class="site-header__title">Messages</h1>
 				</div>
 			</div>
 		</div>
-		<form class="add-message">
-			<input type="text" class="add-message__input" placeholder="What would you like to say?">
-			<button class="button">Send</button>
-		</form>
+		<footer class="site-footer">
+			<form class="add-message">
+				<input type="text" class="add-message__input" autofocus placeholder="What would you like to say?">
+				<button class="button">Send</button>
+			</form>
+		</footer>
   </div>
 </body>
 
diff --git a/style.css b/style.css
index a90c341..32ba1d2 100644
--- a/style.css
+++ b/style.css
@@ -34,9 +34,12 @@ input {
 	text-decoration: none;
 	cursor: pointer;
 }
-
+.button--clear {
+	border: 1px solid #fff;
+	box-shadow: 2px 2px #00000054;
+}
 /* Site title and top navigation */
-.site-header {
+.site-header, .site-footer {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -59,7 +62,7 @@ input {
 	padding: 0.5rem;
 	font-size: 14px;
 	line-height: 1.8em;
-	border-radius: 2px;
+	border-radius: 10px;
 	background: #fff;
 	box-shadow: 0 2px 2px rgba(0,0,0,0.1);
 }
@@ -68,6 +71,7 @@ input {
 	font-size: 12px;
 	font-weight: 700;
 	color: rgba(0,0,0,0.6);
+	
 }
 
 .message__content {
@@ -84,6 +88,12 @@ input {
 .add-message {
 	padding: 0.5rem 1rem;
 }
+.message--self{
+	margin-left: 6rem;
+	border-color: rgb(21, 165, 223);
+	border-radius: 10PX;
+
+}
 
 .add-message__input {
 	padding: 0.25em 0.5em;
@@ -92,3 +102,6 @@ input {
 	box-shadow: 0 2px 2px rgba(0,0,0,0.1);
 	background: #fff;
 }
+.site-footer{
+	background: white;
+}