diff --git a/assets/css/styles.css b/assets/css/styles.css
index db09e16..e0601ae 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -298,12 +298,15 @@ img {
   color: var(--text-color);
   transition: color 0.4s;
 }
+
 .home__social-link:hover {
   color: var(--first-color);
 }
+
 .home__button {
   justify-self: center;
 }
+
 /*=============== BUTTON ===============*/
 .button {
   font-weight: var(--font-semi-bold);
@@ -317,21 +320,26 @@ img {
   column-gap: 0.5rem;
   transition: box-shadow 0.4s;
 }
+
 .button i {
   font-size: 2rem;
   font-weight: initial;
   color: var(--first-color);
 }
+
 .button:hover {
   box-shadow: 0 12px 32px hsla(23, 100%, 50%, 0.12);
 }
+
 /*=============== ABOUT ===============*/
 .about__container {
   row-gap: 3.5rem;
 }
+
 .about__data {
   text-align: center;
 }
+
 .about__description {
   margin-bottom: 2.5rem;
 }
@@ -345,6 +353,7 @@ img {
 .favorite__container {
   padding-top: 2rem;
 }
+
 .favorite__article {
   width: 220px;
   display: grid;
@@ -353,16 +362,19 @@ img {
   scale: 0.8;
   transition: filter 0.3s, scale 0.3s;
 }
+
 .favorite__img {
   width: 220px;
   margin-bottom: 1.5rem;
 }
+
 .favorite__model {
   color: var(--white-color);
   background: var(--gradient-color);
   padding: 0.5rem 1.5rem;
   border-radius: 4rem;
 }
+
 /* Swiper class */
 .swiper-slide-active,
 .swiper-slide-duplicate-active {
@@ -375,16 +387,20 @@ img {
   padding-top: 2rem;
   row-gap: 2.5rem;
 }
+
 .model__content {
   position: relative;
   justify-self: center;
 }
+
 .model__img {
   width: 280px;
 }
+
 .model__tooltip-img {
   width: 60px;
 }
+
 .model__tooltip-text {
   font-size: var(--small-font-size);
   font-weight: var(--font-medium);
@@ -396,44 +412,55 @@ img {
   transform: translate(60px, -40px);
   white-space: nowrap;
 }
+
 .model__tooltip-1,
 .model__tooltip-2 {
   transform: scaleX(-1);
 }
+
 .model__tooltip-1 .model__tooltip-text,
 .model__tooltip-2 .model__tooltip-text {
   transform: translate(60px, -40px) scaleX(-1);
 }
+
 .model__tooltip {
   position: absolute;
 }
+
 .model__tooltip-1 {
   top: 5.5rem;
   left: 5rem;
 }
+
 .model__tooltip-2 {
   top: 1rem;
   right: 1.5rem;
 }
+
 .model__tooltip-3 {
   bottom: 1.8rem;
   left: 3.5rem;
 }
+
 .model__tooltip-4 {
   bottom: 7rem;
   right: 5rem;
 }
+
 .model__button {
   justify-self: center;
 }
+
 /*=============== SPONSOR ===============*/
 .sponsor__img {
   width: 100px;
   transition: transform 0.4s;
 }
+
 .sponsor__img:hover {
   transform: scale(1.1);
 }
+
 .sponsor__container {
   padding: 0.5rem 4.5rem;
   grid-template-columns: repeat(2, max-content);
@@ -443,8 +470,85 @@ img {
 }
 
 /*=============== FOOTER ===============*/
+.footer {
+  padding-block: 2rem;
+  overflow: hidden;
+}
 
-
+.footer__container{
+  row-gap: 4rem;
+}
+.footer__logo {
+  font-size: var(--h2-font-size);
+  font-weight: var(--font-semi-bold);
+  color: var(--first-color);
+}
+.footer__data {
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 4rem;
+}
+.footer__title {
+  font-size: var(--h3-font-size);
+  margin-bottom: 1rem;
+}
+.footer__links {
+  display: grid;
+  row-gap: 0.75rem;
+}
+.footer__link {
+  color: var(--text-color);
+  transition: color 0.4s;
+}
+.footer__link:hover {
+  color: var(--first-color);
+}
+.footer__group {
+  grid-column: 1/3;
+}
+.footer__form {
+  display: grid;
+  row-gap: 1rem;
+  margin-bottom: 2rem;
+}
+.footer__input,
+.footer__button {
+  font-size: var(--normal-font-size);
+  font-family: var(--body-font);
+  border: none;
+  outline: none;
+}
+.footer__input {
+  width: 100%;
+  padding: 1.15rem 1.25rem;
+  border-radius: 4rem;
+  color: var(--text-color);
+  background-color: var(--container-color);
+}
+.footer__input::placeholder {
+  color: var(--text-color);
+}
+.footer__button {
+  cursor: pointer;
+}
+.footer__social {
+  display: flex;
+  justify-content: center;
+  column-gap: 1rem;
+}
+.footer__social-link {
+  font-size: 1.25rem;
+  color: var(--white-color);
+  transition: color 0.4s;
+}
+.footer__social-link:hover {
+   color: var(--first-color);
+}
+.footer__copy {
+  display: block;
+  margin-top: 5rem;
+  font-size: var(--small-font-size);
+  text-align: center;
+}
 /*=============== SCROLL BAR ===============*/
 
 
diff --git a/index.html b/index.html
index c2563c0..83c1767 100644
--- a/index.html
+++ b/index.html
@@ -178,7 +178,69 @@ <h2 class="section__title">
 
       <!--==================== FOOTER ====================-->
       <footer class="footer">
-         
+         <div class="footer__container container grid">
+            <div>
+               <a class="footer__logo" href="">JBL</a>
+            </div>
+            <div class="footer__data grid">
+               <div>
+                  <h3 class="footer__title">Products</h3>
+                  <ul class="footer__links">
+                     <li>
+                        <a class="footer__link" href="">Headphones</a>
+                     </li>
+                     <li>
+                        <a class="footer__link" href="">Earphones</a>
+                     </li>
+                     <li>
+                        <a class="footer__link" href="">Earbuds</a>
+                     </li>
+                     <li>
+                        <a class="footer__link" href="">Accesories</a>
+                     </li>
+                  </ul>
+               </div>
+               <div>
+                  <h3 class="footer__title">Support</h3>
+                  <ul class="footer__links">
+                     <li>
+                        <a class="footer__link" href="">Product Help</a>
+                     </li>
+                     <li>
+                        <a class="footer__link" href="">Register</a>
+                     </li>
+                     <li>
+                        <a class="footer__link" href="">Updates</a>
+                     </li>
+                     <li>
+                        <a class="footer__link" href="">Provides</a>
+                     </li>
+                  </ul>
+               </div>
+               <div class="footer__group">
+                  <form class="footer__form" action="">
+                     <input class="footer__input" placeholder="Email" type="text" name="" id="">
+                     <button class="footer__button button">
+                        Subscribe <i class="ri-send-plane-fill"></i>
+                     </button>
+                  </form>
+                  <div class="footer__social">
+                     <a class="footer__social-link" target="_blank" href="http://www.instagram.com">
+                        <i class="ri-instagram-fill"></i>
+                     </a>
+                     <a class="footer__social-link" target="_blank" href="http://www.facebook.com">
+                        <i class="ri-facebook-circle-fill"></i>
+                     </a>
+                     <a class="footer__social-link" target="_blank" href="http://www.youtube.com">
+                        <i class="ri-youtube-fill"></i>
+                     </a>
+                  </div>
+               </div>
+            </div>
+         </div>
+         <span class="footer__copy">
+            &#169; All Rights Are Reserved
+         </span>
       </footer>
 
       <!--========== SCROLL UP ==========-->