diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/ContactInfo.js b/GrossesMitaines/grosses-mitaines-ui/src/components/ContactInfo.js
new file mode 100644
index 0000000..54a39aa
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/ContactInfo.js
@@ -0,0 +1,59 @@
+import { Link } from "react-router-dom";
+
+const ContactInfo = () => {
+    return (
+
+        <div className="row contact-info-container">
+            <ul className="contact-info-list">
+                <li>
+                    <h5>
+                        <span className="fa fa-location-arrow"></span> Adresse:
+                    </h5>
+                    <a href="https://goo.gl/maps/B76oSoXg9FXuTmCD6" target="_blank">
+                        <span className="fa fa-arrow-up-right-from-square"></span> 3005 Bd Laframboise, Saint-Hyacinthe, QC J2S 4Z6
+                    </a>
+                </li>
+                <br />
+                <li>
+                    <h5 >
+                        <span className="fa fa-envelope"></span> Courriel:
+                    </h5>
+                    <a href="mailto:grossesmitaines@example.com" >
+                        <span className="fa fa-feather"></span> grossesmitaines@example.com
+                    </a>
+                </li>
+                <br />
+                <li>
+                    <h5 >
+                        <span className="fa fa-phone"></span> Appellez-nous:
+                    </h5>
+                    <a href="tel:666-666-6666">
+                        <span className="fa fa-phone-volume"></span> 666-666-666
+                    </a>
+                </li>
+                <br />
+                <li>
+                    <h5 >
+                        Réseaux Sociaux:
+                    </h5>
+                    <div className="socials">
+                        <span className="socials-icon fa fa-facebook"></span>
+                        <span className="socials-icon fa fa-etsy"></span>
+                        <span className="socials-icon fa fa-pinterest"></span>
+                    </div>
+                </li>
+                <br />
+                <li>
+                    <h5 >
+                        Question?
+                    </h5>
+                    <Link to="/contactUs">
+                        Nous Contacter
+                    </Link>
+                </li>
+            </ul>
+        </div>
+    );
+}
+
+export default ContactInfo;
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/AboutUs.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/AboutUs.js
index f45e4a7..497b2dc 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/AboutUs.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/AboutUs.js
@@ -1,5 +1,6 @@
 import React from "react";
 import { useEffect } from "react";
+import ContactInfo from "../components/ContactInfo";
 
 const AbtouUs = () => {
 
@@ -8,7 +9,7 @@ const AbtouUs = () => {
     });
 
     return (
-        <>
+        <div className="about-us-container">
             <div className="row">
                 <div className="col-12 text-light">
                     <h1>À propos de nous:</h1>
@@ -19,7 +20,7 @@ const AbtouUs = () => {
                 <div className="col col-12 col-md-6 col-lg-4 ">
                     <img className="border-quetaine" src="/images/madamebrossard.jpg"/>
                 </div>
-                <div className="col col-12 col-md-6 col-lg-8 text-light">
+                <div className="col col-12 col-md-6 col-lg-8 employee-text">
                     <br />
                     <h4>
                         Ginette - Co-Fondatrice
@@ -36,7 +37,7 @@ const AbtouUs = () => {
             <br />
             <br />
             <div className="row">
-                <div className="col col-12 col-md-6 col-lg-8 text-light">
+                <div className="col col-12 col-md-6 col-lg-8 employee-text">
                     <h4>
                         Monique - Autre Co-Fondatrice
                     </h4>
@@ -55,57 +56,8 @@ const AbtouUs = () => {
             <br />
             <br />
             <br />
-            <div className="row bg-dark text-light pt-3">
-                <ul>
-                    <li>
-                        <h5>
-                            <span className="fa fa-location-dot"></span> Adresse:
-                        </h5>
-                        <a href="https://goo.gl/maps/B76oSoXg9FXuTmCD6" target="_blank">
-                            <span className="fa fa-arrow-up-right-from-square"></span> 3005 Bd Laframboise, Saint-Hyacinthe, QC J2S 4Z6
-                        </a>
-                    </li>
-                    <br />
-                    <li>
-                        <h5 >
-                            <span className="fa fa-envelope"></span> Courriel:
-                        </h5>
-                        <a href="mailto:grossesmitaines@example.com" >
-                            <span className="fa fa-feather"></span> grossesmitaines@example.com
-                        </a>
-                    </li>
-                    <br />
-                    <li>
-                        <h5 >
-                            <span className="fa fa-phone"></span> Appellez-nous:
-                        </h5>
-                        <a href="tel:666-666-6666">
-                            <span className="fa fa-phone-volume"></span> 666-666-666
-                        </a>
-                    </li>
-                    <br />
-                    <li>
-                        <h5 >
-                            Réseaux Sociaux:
-                        </h5>
-                        <div className="row">
-                            <span className="col-4 fa fa-facebook"></span>
-                            <span className="col-4 fa fa-etsy"></span>
-                            <span className="col-4 fa fa-pinterest"></span>
-                        </div>
-                    </li>
-                    <br />
-                    <li>
-                        <h5 >
-                            Question?
-                        </h5>
-                        <a>
-                            Nous Contacter
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </>
+           <ContactInfo/>
+        </div>
 
     );
 }
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
index 47e01b5..a13b86a 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
@@ -7,42 +7,42 @@ body {
     min-height: 100%;
 }
 
-html{
-    height:100%;
+html {
+    height: 100%;
 }
 
-.home-text{
+.home-text {
     /* border: black 1px solid; */
     text-align: center;
-    background-color:beige;
+    background-color: beige;
     box-shadow: 2px 3px rgba(11, 11, 11, 0.5);
-    padding:1% 2% 1% 2%;
+    padding: 1% 2% 1% 2%;
     margin: 1% 2% 1% 2%;
 }
 
-.home-title{
+.home-title {
     margin: 10px 10% 0% 10%;
-    padding: 0px 0px 0px 0px ;
+    padding: 0px 0px 0px 0px;
     border-radius: 5px 25px;
-    color:plum;
+    color: plum;
     background-color: rgba(0, 0, 0, .75);
 }
 
-.home-subtitle{
+.home-subtitle {
     text-shadow: 3px 2px 5px rgba(0, 0, 0, .5);
 }
 
-.home-img{
+.home-img {
     width: 20%;
     height: auto;
 }
 
-.home-description{
+.home-description {
     margin-top: 2%;
     /* border-top: 1px black solid; */
 }
 
-.topbar-container{
+.topbar-container {
     background-color: beige;
     margin-bottom: 2%;
     border-bottom: rgb(82, 4, 82) solid 1px;
@@ -56,7 +56,7 @@ html{
     box-shadow: 2px 3px rgba(0, 0, 0, .25);
     border-radius: 5px;
     height: 40px;
-    margin:auto;
+    margin: auto;
     margin-bottom: 2%;
     width: 90%;
 }
@@ -111,58 +111,100 @@ html{
     background-color: plum;
 }
 
-.contact-form-container{
-    padding:3% 5% 3% 5%;
-    color:black;
+.contact-form-container {
+    padding: 3% 5% 3% 5%;
+    color: black;
     background-color: beige;
 }
 
-.contact-form-input{
-    border:3px solid rgba(0,0,0,.25);
+.contact-form-input {
+    border: 3px solid rgba(0, 0, 0, .25);
     /* box-shadow: 1px 2px rgba(0, 0, 0, .25); */
 }
 
-.contact-form-btn{
-    margin-top:3%;
-    color:beige;
+.contact-form-btn {
+    margin-top: 3%;
+    color: beige;
     background-color: purple !important;
 }
 
-.contact-form-btn:hover{
+.contact-form-btn:hover {
     background-color: plum !important;
 }
 
-.footer-container{
+.about-us-container {
+    padding: 3% 2% 3% 2%;
+    border-top: 3px solid rgba(123, 9, 102, 0.5);
+    background-color: rgba(0, 0, 0, .25);
+}
+
+.border-quetaine {
+    border: 3px dotted purple;
+    padding: 3px;
+}
+
+.employee-text {
+    color: whitesmoke;
+    background-color: rgba(0, 0, 0, .25);
+}
+
+.contact-info-container {
+    color: white;
+    background-color: rgb(12, 13, 13);
+    padding: 2% 5% 2% 5%;
+}
+
+.contact-info-list {
+    list-style-type: none;
+}
+
+.socials {
+    margin-top: 5%;
+    width: 50%;
+    left: 10px;
+    display: flex;
+}
+
+.socials-icon {
+    margin: auto;
+}
+
+.footer-container {
     color: black;
     margin-top: 5%;
     padding: 2% 3% 2% 3%;
     background-color: white;
 }
 
-.footer-links{
+.footer-links {
     display: flex;
 }
 
-.footer-link{
-    color:purple;
+.footer-link {
+    color: purple;
     text-shadow: 5px 5px 10px rgba(0, 0, 0, .75);
-    margin:auto;
+    margin: auto;
 }
 
-.footer-link:hover{
+.footer-link:hover {
     color: plum;
 }
 
-.footer-partners{
-    display:flex;
+.footer-partners {
+    display: flex;
 }
-.partner-img{
-    margin:auto;
-    height:50px;
+
+.partner-img {
+    margin: auto;
+    height: 50px;
 
 }
 
+
+/* -------------------------------------------------------- */
 /* specification pour les écrans plus petits / cells */
+/* -------------------------------------------------------- */
+
 @media (max-width:450px) {
     .featured-img {
         border: 5px purple double;
@@ -180,21 +222,30 @@ html{
         background-color: rgba(255, 255, 255, .75);
     }
 
-    .contact-form-container{
+    .contact-form-container {
         margin-bottom: 35px;
         margin-top: 35px;
     }
-    
-    .contact-form-input{
+
+    .contact-form-input {
         min-height: 50px;
     }
 
-    .contact-form-btn{
+    .contact-form-btn {
         margin-left: 10%;
-        margin-right:10%;
-        height:75px;
+        margin-right: 10%;
+        height: 75px;
         width: 80%;
     }
 
 
+    .contact-info-container{
+        padding-top:5%;
+    }
+
+    .employee-text {
+        margin: 5px;
+        padding: 10px;
+    }
+
 }
\ No newline at end of file