diff --git a/src/pages/Contact.js b/src/pages/Contact.js
index 70f7638..d1c3f40 100644
--- a/src/pages/Contact.js
+++ b/src/pages/Contact.js
@@ -6,7 +6,7 @@ import { FaGitter } from 'react-icons/fa';
 
 function Contact(){
   let formIsValid = false
-
+  
   const [email, setEmailAttr] = useState({
     value: '',
     focused: false
@@ -56,10 +56,12 @@ function Contact(){
 
   return (
     <Container>
+    <center>
       <h1 className="mt-4">Contact Us</h1>
       <p className='mt-p'>
         Ideas? Comments? Critiques? Want to help out? Here’s how to get in contact:
       </p>
+    </center>
       <Row className='contact-card-one'>
         <Col md={6}>
           <div className='contact-card' style={{ color: '#E74D3C' }}>
@@ -130,6 +132,10 @@ function Contact(){
       </Row>
       <hr />
       <Row>
+     <center>
+    <h2>Send us a message</h2>
+    <p>Sends us a message and we will get back to you asap!</p>
+     </center>
         <Col md={6} className='contact-form'>
           <Form onSubmit={formSubmitHandler}>
             <Form.Group as={Row} controlId='formHorizontalEmail'>
@@ -192,4 +198,4 @@ function Contact(){
   )
 };
 
-export default Contact
\ No newline at end of file
+export default Contact
diff --git a/src/styles/Contact.css b/src/styles/Contact.css
index d7c0d27..aaa7027 100644
--- a/src/styles/Contact.css
+++ b/src/styles/Contact.css
@@ -5,16 +5,24 @@
   border-radius: 10px;
   text-align: center;
   line-height: 4;
-  background-color: #f3f3f3;
+  background-color: #fefefe;
+  box-shadow: 0.5px 0.5px 6px rgb(208, 204, 204);
+  transition: all 0.2s
+}
+.contact-card:hover{
+  transform: scale(1.03);
+}
+
+h2{
+  color: #3d9dd9;
 }
 
 .contact-form {
-  margin-bottom: 4em;
+  margin: 0.5em auto 4em auto;
 }
 .contact-padding{
   padding-top: 8.7em;
 }
-
 .invalidInput{
   color: red;
   font-size: small;