diff --git a/assets/css/styles.css b/assets/css/styles.css
index be32e06..d53fc73 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -416,9 +416,12 @@ img.menu__img {
 }
 /*========== FOOTER ==========*/
 .footer__container{
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  row-gap: 2rem;
+  grid-template-columns: 2fr 1fr 2fr;
+  width: 100vw;
+  height: 300%;
+  gap: 0.3rem;
 }
+
 .footer__logo{
   font-size: var(--h3-font-size);
   color: var(--first-color);
@@ -436,18 +439,82 @@ img.menu__img {
   color: var(--title-color);
   margin-right: var(--mb-2);
 }
+
+#services-div{
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  background-color: #069C54;
+  align-items: flex-start;
+  padding-top: 10%;
+  padding-bottom: 10%;
+}
+#footer__title__services{
+  display: flex;
+  justify-content: center;
+  /* text-align: center; */
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+#info-div{
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  background-color: #18b3be;
+  align-items: flex-start;
+  padding-top: 15%;
+  padding-bottom: 10%;
+}
+#footer__title__info{
+    display: flex;
+    justify-content: center;
+    /* text-align: center; */
+    align-items: center;
+    height: 100%;
+    width: 100%;
+}
+#address-div{
+  display: grid;
+  grid-template-columns: 1fr 2fr 2fr;
+  background-color: #ff3232;
+  align-items: flex-start;
+  padding-top: 10%;
+  padding-bottom: 10%;
+}
+#footer__title__address{
+  display: flex;
+  justify-content: center;
+  /* text-align: center; */
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+
+#socials{
+  display: flex;
+  justify-content: end;
+  /* text-align: center; */
+  align-items: end;
+  align-content: end;
+  height: 100%;
+  width: 100%;
+}
+#address-list{
+  color: white;
+}
+
+
 .footer__title{
   font-size: var(--h2-font-size);
-  color: var(--title-color);
-  margin-bottom: var(--mb-2);
+  color: #F1F3F2;
+  transform: rotate(-90deg);
 }
 .footer__link{
   display: inline-block;
-  color: var(--text-color);
+  color:#F1F3F2;
   margin-bottom: var(--mb-1);
 }
 .footer__link:hover{
-  color: var(--first-color);
+  color: yellow;
 }
 .footer__copy{
   text-align: center;
diff --git a/index.html b/index.html
index d8c21d5..b9b45d3 100644
--- a/index.html
+++ b/index.html
@@ -185,20 +185,17 @@ <h2 class="section-title contact__initial">Contact us</h2>
         </main>
 
         <!--========== FOOTER ==========-->
-        <footer class="footer section bd-container">
-            <div class="footer__container bd-grid">
-                <div class="footer__content">
+        <footer class="footer__container bd-grid">
+
+
+                <div class="footer__content" id="services-div">
+                    <!-- <div id="footer__logo">
                     <a href="#" class="footer__logo">Tasty Food</a>
-                    <span class="footer__description">Restaurant</span>
-                    <div>
-                        <a href="#" class="footer__social"><i class='bx bxl-facebook'></i></a>
-                        <a href="#" class="footer__social"><i class='bx bxl-instagram'></i></a>
-                        <a href="#" class="footer__social"><i class='bx bxl-twitter'></i></a>
+                </div> -->
+                <div id="footer__title__services">
+                    <h3 class="footer__title" id="footer__title__services" style="color: #F1F3F2;">Services</h3>
                     </div>
-                </div>
-
-                <div class="footer__content">
-                    <h3 class="footer__title">Services</h3>
+                    <div id="services__content">
                     <ul>
                         <li><a href="#" class="footer__link">Delivery</a></li>
                         <li><a href="#" class="footer__link">Pricing</a></li>
@@ -206,9 +203,13 @@ <h3 class="footer__title">Services</h3>
                         <li><a href="#" class="footer__link">Reserve your spot</a></li>
                     </ul>
                 </div>
+                </div>
 
-                <div class="footer__content">
+                <div class="footer__content" id="info-div">
+                    <div id="footer__title__info">
                     <h3 class="footer__title">Information</h3>
+                    </div>
+                    <div id="info__content">
                     <ul>
                         <li><a href="#" class="footer__link">Event</a></li>
                         <li><a href="#" class="footer__link">Contact us</a></li>
@@ -216,17 +217,26 @@ <h3 class="footer__title">Information</h3>
                         <li><a href="#" class="footer__link">Terms of services</a></li>
                     </ul>
                 </div>
+                </div>
 
-                <div class="footer__content">
-                    <h3 class="footer__title">Adress</h3>
-                    <ul>
+                <div class="footer__content" id="address-div">
+                    <div id="footer__title__address">
+                    <h3 class="footer__title">Address</h3>
+                    </div>
+                    <div id="address__content">
+                    <ul id="address-list">
                         <li>Lima - Peru</li>
                         <li>Jr Union #999</li>
                         <li>999 - 888 - 777</li>
                         <li>tastyfood@email.com</li>
                     </ul>
                 </div>
-            </div>
+                    <div id="socials">
+                        <a href="#" class="footer__social"><i class='bx bxl-facebook'></i></a>
+                        <a href="#" class="footer__social"><i class='bx bxl-instagram'></i></a>
+                        <a href="#" class="footer__social"><i class='bx bxl-twitter'></i></a>
+                    </div>
+                </div>
 
             <p class="footer__copy">&#169; 2020 Bedimcode. All right reserved</p>
         </footer>