diff --git a/assets/css/styles.css b/assets/css/styles.css
index 55c062d..5bfe64b 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -4423,6 +4423,10 @@ video {
   height: 4rem;
 }
 
+.h-17 {
+  height: 4.188rem;
+}
+
 .h-20 {
   height: 5rem;
 }
@@ -4802,6 +4806,10 @@ video {
   margin: 5rem;
 }
 
+.m-22 {
+  margin: 5.5rem;
+}
+
 .m-24 {
   margin: 6rem;
 }
@@ -5210,6 +5218,16 @@ video {
   margin-right: 5rem;
 }
 
+.my-22 {
+  margin-top: 5.5rem;
+  margin-bottom: 5.5rem;
+}
+
+.mx-22 {
+  margin-left: 5.5rem;
+  margin-right: 5.5rem;
+}
+
 .my-24 {
   margin-top: 6rem;
   margin-bottom: 6rem;
@@ -6068,6 +6086,22 @@ video {
   margin-left: 5rem;
 }
 
+.mt-22 {
+  margin-top: 5.5rem;
+}
+
+.mr-22 {
+  margin-right: 5.5rem;
+}
+
+.mb-22 {
+  margin-bottom: 5.5rem;
+}
+
+.ml-22 {
+  margin-left: 5.5rem;
+}
+
 .mt-24 {
   margin-top: 6rem;
 }
@@ -7232,6 +7266,10 @@ video {
   max-width: 1700px;
 }
 
+.max-w-32\.5 {
+  max-width: 32.5rem;
+}
+
 .max-w-code {
   max-width: 38.375rem;
 }
@@ -7830,10 +7868,18 @@ video {
   padding: 3.5rem;
 }
 
+.p-15 {
+  padding: 3.75rem;
+}
+
 .p-16 {
   padding: 4rem;
 }
 
+.p-18 {
+  padding: 4.5rem;
+}
+
 .p-20 {
   padding: 5rem;
 }
@@ -8080,6 +8126,16 @@ video {
   padding-right: 3.5rem;
 }
 
+.py-15 {
+  padding-top: 3.75rem;
+  padding-bottom: 3.75rem;
+}
+
+.px-15 {
+  padding-left: 3.75rem;
+  padding-right: 3.75rem;
+}
+
 .py-16 {
   padding-top: 4rem;
   padding-bottom: 4rem;
@@ -8090,6 +8146,16 @@ video {
   padding-right: 4rem;
 }
 
+.py-18 {
+  padding-top: 4.5rem;
+  padding-bottom: 4.5rem;
+}
+
+.px-18 {
+  padding-left: 4.5rem;
+  padding-right: 4.5rem;
+}
+
 .py-20 {
   padding-top: 5rem;
   padding-bottom: 5rem;
@@ -8570,6 +8636,22 @@ video {
   padding-left: 3.5rem;
 }
 
+.pt-15 {
+  padding-top: 3.75rem;
+}
+
+.pr-15 {
+  padding-right: 3.75rem;
+}
+
+.pb-15 {
+  padding-bottom: 3.75rem;
+}
+
+.pl-15 {
+  padding-left: 3.75rem;
+}
+
 .pt-16 {
   padding-top: 4rem;
 }
@@ -8586,6 +8668,22 @@ video {
   padding-left: 4rem;
 }
 
+.pt-18 {
+  padding-top: 4.5rem;
+}
+
+.pr-18 {
+  padding-right: 4.5rem;
+}
+
+.pb-18 {
+  padding-bottom: 4.5rem;
+}
+
+.pl-18 {
+  padding-left: 4.5rem;
+}
+
 .pt-20 {
   padding-top: 5rem;
 }
@@ -14096,6 +14194,10 @@ video {
   width: 4rem;
 }
 
+.w-17 {
+  width: 4.188rem;
+}
+
 .w-20 {
   width: 5rem;
 }
@@ -14464,6 +14566,10 @@ video {
   gap: 6rem;
 }
 
+.gap-26 {
+  gap: 6.875rem;
+}
+
 .gap-28 {
   gap: 7rem;
 }
@@ -14626,6 +14732,11 @@ video {
        column-gap: 6rem;
 }
 
+.gap-x-26 {
+  -moz-column-gap: 6.875rem;
+       column-gap: 6.875rem;
+}
+
 .gap-x-28 {
   -moz-column-gap: 7rem;
        column-gap: 7rem;
@@ -14788,6 +14899,10 @@ video {
   row-gap: 6rem;
 }
 
+.gap-y-26 {
+  row-gap: 6.875rem;
+}
+
 .gap-y-28 {
   row-gap: 7rem;
 }
@@ -22286,6 +22401,10 @@ video {
     height: 4rem;
   }
 
+  .none\:h-17 {
+    height: 4.188rem;
+  }
+
   .none\:h-20 {
     height: 5rem;
   }
@@ -22665,6 +22784,10 @@ video {
     margin: 5rem;
   }
 
+  .none\:m-22 {
+    margin: 5.5rem;
+  }
+
   .none\:m-24 {
     margin: 6rem;
   }
@@ -23073,6 +23196,16 @@ video {
     margin-right: 5rem;
   }
 
+  .none\:my-22 {
+    margin-top: 5.5rem;
+    margin-bottom: 5.5rem;
+  }
+
+  .none\:mx-22 {
+    margin-left: 5.5rem;
+    margin-right: 5.5rem;
+  }
+
   .none\:my-24 {
     margin-top: 6rem;
     margin-bottom: 6rem;
@@ -23931,6 +24064,22 @@ video {
     margin-left: 5rem;
   }
 
+  .none\:mt-22 {
+    margin-top: 5.5rem;
+  }
+
+  .none\:mr-22 {
+    margin-right: 5.5rem;
+  }
+
+  .none\:mb-22 {
+    margin-bottom: 5.5rem;
+  }
+
+  .none\:ml-22 {
+    margin-left: 5.5rem;
+  }
+
   .none\:mt-24 {
     margin-top: 6rem;
   }
@@ -25095,6 +25244,10 @@ video {
     max-width: 1700px;
   }
 
+  .none\:max-w-32\.5 {
+    max-width: 32.5rem;
+  }
+
   .none\:max-w-code {
     max-width: 38.375rem;
   }
@@ -25693,10 +25846,18 @@ video {
     padding: 3.5rem;
   }
 
+  .none\:p-15 {
+    padding: 3.75rem;
+  }
+
   .none\:p-16 {
     padding: 4rem;
   }
 
+  .none\:p-18 {
+    padding: 4.5rem;
+  }
+
   .none\:p-20 {
     padding: 5rem;
   }
@@ -25943,6 +26104,16 @@ video {
     padding-right: 3.5rem;
   }
 
+  .none\:py-15 {
+    padding-top: 3.75rem;
+    padding-bottom: 3.75rem;
+  }
+
+  .none\:px-15 {
+    padding-left: 3.75rem;
+    padding-right: 3.75rem;
+  }
+
   .none\:py-16 {
     padding-top: 4rem;
     padding-bottom: 4rem;
@@ -25953,6 +26124,16 @@ video {
     padding-right: 4rem;
   }
 
+  .none\:py-18 {
+    padding-top: 4.5rem;
+    padding-bottom: 4.5rem;
+  }
+
+  .none\:px-18 {
+    padding-left: 4.5rem;
+    padding-right: 4.5rem;
+  }
+
   .none\:py-20 {
     padding-top: 5rem;
     padding-bottom: 5rem;
@@ -26433,6 +26614,22 @@ video {
     padding-left: 3.5rem;
   }
 
+  .none\:pt-15 {
+    padding-top: 3.75rem;
+  }
+
+  .none\:pr-15 {
+    padding-right: 3.75rem;
+  }
+
+  .none\:pb-15 {
+    padding-bottom: 3.75rem;
+  }
+
+  .none\:pl-15 {
+    padding-left: 3.75rem;
+  }
+
   .none\:pt-16 {
     padding-top: 4rem;
   }
@@ -26449,6 +26646,22 @@ video {
     padding-left: 4rem;
   }
 
+  .none\:pt-18 {
+    padding-top: 4.5rem;
+  }
+
+  .none\:pr-18 {
+    padding-right: 4.5rem;
+  }
+
+  .none\:pb-18 {
+    padding-bottom: 4.5rem;
+  }
+
+  .none\:pl-18 {
+    padding-left: 4.5rem;
+  }
+
   .none\:pt-20 {
     padding-top: 5rem;
   }
@@ -31946,6 +32159,10 @@ video {
     width: 4rem;
   }
 
+  .none\:w-17 {
+    width: 4.188rem;
+  }
+
   .none\:w-20 {
     width: 5rem;
   }
@@ -32314,6 +32531,10 @@ video {
     gap: 6rem;
   }
 
+  .none\:gap-26 {
+    gap: 6.875rem;
+  }
+
   .none\:gap-28 {
     gap: 7rem;
   }
@@ -32476,6 +32697,11 @@ video {
          column-gap: 6rem;
   }
 
+  .none\:gap-x-26 {
+    -moz-column-gap: 6.875rem;
+         column-gap: 6.875rem;
+  }
+
   .none\:gap-x-28 {
     -moz-column-gap: 7rem;
          column-gap: 7rem;
@@ -32638,6 +32864,10 @@ video {
     row-gap: 6rem;
   }
 
+  .none\:gap-y-26 {
+    row-gap: 6.875rem;
+  }
+
   .none\:gap-y-28 {
     row-gap: 7rem;
   }
@@ -40055,6 +40285,10 @@ video {
     height: 4rem;
   }
 
+  .sm\:h-17 {
+    height: 4.188rem;
+  }
+
   .sm\:h-20 {
     height: 5rem;
   }
@@ -40434,6 +40668,10 @@ video {
     margin: 5rem;
   }
 
+  .sm\:m-22 {
+    margin: 5.5rem;
+  }
+
   .sm\:m-24 {
     margin: 6rem;
   }
@@ -40842,6 +41080,16 @@ video {
     margin-right: 5rem;
   }
 
+  .sm\:my-22 {
+    margin-top: 5.5rem;
+    margin-bottom: 5.5rem;
+  }
+
+  .sm\:mx-22 {
+    margin-left: 5.5rem;
+    margin-right: 5.5rem;
+  }
+
   .sm\:my-24 {
     margin-top: 6rem;
     margin-bottom: 6rem;
@@ -41700,6 +41948,22 @@ video {
     margin-left: 5rem;
   }
 
+  .sm\:mt-22 {
+    margin-top: 5.5rem;
+  }
+
+  .sm\:mr-22 {
+    margin-right: 5.5rem;
+  }
+
+  .sm\:mb-22 {
+    margin-bottom: 5.5rem;
+  }
+
+  .sm\:ml-22 {
+    margin-left: 5.5rem;
+  }
+
   .sm\:mt-24 {
     margin-top: 6rem;
   }
@@ -42864,6 +43128,10 @@ video {
     max-width: 1700px;
   }
 
+  .sm\:max-w-32\.5 {
+    max-width: 32.5rem;
+  }
+
   .sm\:max-w-code {
     max-width: 38.375rem;
   }
@@ -43462,10 +43730,18 @@ video {
     padding: 3.5rem;
   }
 
+  .sm\:p-15 {
+    padding: 3.75rem;
+  }
+
   .sm\:p-16 {
     padding: 4rem;
   }
 
+  .sm\:p-18 {
+    padding: 4.5rem;
+  }
+
   .sm\:p-20 {
     padding: 5rem;
   }
@@ -43712,6 +43988,16 @@ video {
     padding-right: 3.5rem;
   }
 
+  .sm\:py-15 {
+    padding-top: 3.75rem;
+    padding-bottom: 3.75rem;
+  }
+
+  .sm\:px-15 {
+    padding-left: 3.75rem;
+    padding-right: 3.75rem;
+  }
+
   .sm\:py-16 {
     padding-top: 4rem;
     padding-bottom: 4rem;
@@ -43722,6 +44008,16 @@ video {
     padding-right: 4rem;
   }
 
+  .sm\:py-18 {
+    padding-top: 4.5rem;
+    padding-bottom: 4.5rem;
+  }
+
+  .sm\:px-18 {
+    padding-left: 4.5rem;
+    padding-right: 4.5rem;
+  }
+
   .sm\:py-20 {
     padding-top: 5rem;
     padding-bottom: 5rem;
@@ -44202,6 +44498,22 @@ video {
     padding-left: 3.5rem;
   }
 
+  .sm\:pt-15 {
+    padding-top: 3.75rem;
+  }
+
+  .sm\:pr-15 {
+    padding-right: 3.75rem;
+  }
+
+  .sm\:pb-15 {
+    padding-bottom: 3.75rem;
+  }
+
+  .sm\:pl-15 {
+    padding-left: 3.75rem;
+  }
+
   .sm\:pt-16 {
     padding-top: 4rem;
   }
@@ -44218,6 +44530,22 @@ video {
     padding-left: 4rem;
   }
 
+  .sm\:pt-18 {
+    padding-top: 4.5rem;
+  }
+
+  .sm\:pr-18 {
+    padding-right: 4.5rem;
+  }
+
+  .sm\:pb-18 {
+    padding-bottom: 4.5rem;
+  }
+
+  .sm\:pl-18 {
+    padding-left: 4.5rem;
+  }
+
   .sm\:pt-20 {
     padding-top: 5rem;
   }
@@ -49715,6 +50043,10 @@ video {
     width: 4rem;
   }
 
+  .sm\:w-17 {
+    width: 4.188rem;
+  }
+
   .sm\:w-20 {
     width: 5rem;
   }
@@ -50083,6 +50415,10 @@ video {
     gap: 6rem;
   }
 
+  .sm\:gap-26 {
+    gap: 6.875rem;
+  }
+
   .sm\:gap-28 {
     gap: 7rem;
   }
@@ -50245,6 +50581,11 @@ video {
          column-gap: 6rem;
   }
 
+  .sm\:gap-x-26 {
+    -moz-column-gap: 6.875rem;
+         column-gap: 6.875rem;
+  }
+
   .sm\:gap-x-28 {
     -moz-column-gap: 7rem;
          column-gap: 7rem;
@@ -50407,6 +50748,10 @@ video {
     row-gap: 6rem;
   }
 
+  .sm\:gap-y-26 {
+    row-gap: 6.875rem;
+  }
+
   .sm\:gap-y-28 {
     row-gap: 7rem;
   }
@@ -57824,6 +58169,10 @@ video {
     height: 4rem;
   }
 
+  .md\:h-17 {
+    height: 4.188rem;
+  }
+
   .md\:h-20 {
     height: 5rem;
   }
@@ -58203,6 +58552,10 @@ video {
     margin: 5rem;
   }
 
+  .md\:m-22 {
+    margin: 5.5rem;
+  }
+
   .md\:m-24 {
     margin: 6rem;
   }
@@ -58611,6 +58964,16 @@ video {
     margin-right: 5rem;
   }
 
+  .md\:my-22 {
+    margin-top: 5.5rem;
+    margin-bottom: 5.5rem;
+  }
+
+  .md\:mx-22 {
+    margin-left: 5.5rem;
+    margin-right: 5.5rem;
+  }
+
   .md\:my-24 {
     margin-top: 6rem;
     margin-bottom: 6rem;
@@ -59469,6 +59832,22 @@ video {
     margin-left: 5rem;
   }
 
+  .md\:mt-22 {
+    margin-top: 5.5rem;
+  }
+
+  .md\:mr-22 {
+    margin-right: 5.5rem;
+  }
+
+  .md\:mb-22 {
+    margin-bottom: 5.5rem;
+  }
+
+  .md\:ml-22 {
+    margin-left: 5.5rem;
+  }
+
   .md\:mt-24 {
     margin-top: 6rem;
   }
@@ -60633,6 +61012,10 @@ video {
     max-width: 1700px;
   }
 
+  .md\:max-w-32\.5 {
+    max-width: 32.5rem;
+  }
+
   .md\:max-w-code {
     max-width: 38.375rem;
   }
@@ -61231,10 +61614,18 @@ video {
     padding: 3.5rem;
   }
 
+  .md\:p-15 {
+    padding: 3.75rem;
+  }
+
   .md\:p-16 {
     padding: 4rem;
   }
 
+  .md\:p-18 {
+    padding: 4.5rem;
+  }
+
   .md\:p-20 {
     padding: 5rem;
   }
@@ -61481,6 +61872,16 @@ video {
     padding-right: 3.5rem;
   }
 
+  .md\:py-15 {
+    padding-top: 3.75rem;
+    padding-bottom: 3.75rem;
+  }
+
+  .md\:px-15 {
+    padding-left: 3.75rem;
+    padding-right: 3.75rem;
+  }
+
   .md\:py-16 {
     padding-top: 4rem;
     padding-bottom: 4rem;
@@ -61491,6 +61892,16 @@ video {
     padding-right: 4rem;
   }
 
+  .md\:py-18 {
+    padding-top: 4.5rem;
+    padding-bottom: 4.5rem;
+  }
+
+  .md\:px-18 {
+    padding-left: 4.5rem;
+    padding-right: 4.5rem;
+  }
+
   .md\:py-20 {
     padding-top: 5rem;
     padding-bottom: 5rem;
@@ -61971,6 +62382,22 @@ video {
     padding-left: 3.5rem;
   }
 
+  .md\:pt-15 {
+    padding-top: 3.75rem;
+  }
+
+  .md\:pr-15 {
+    padding-right: 3.75rem;
+  }
+
+  .md\:pb-15 {
+    padding-bottom: 3.75rem;
+  }
+
+  .md\:pl-15 {
+    padding-left: 3.75rem;
+  }
+
   .md\:pt-16 {
     padding-top: 4rem;
   }
@@ -61987,6 +62414,22 @@ video {
     padding-left: 4rem;
   }
 
+  .md\:pt-18 {
+    padding-top: 4.5rem;
+  }
+
+  .md\:pr-18 {
+    padding-right: 4.5rem;
+  }
+
+  .md\:pb-18 {
+    padding-bottom: 4.5rem;
+  }
+
+  .md\:pl-18 {
+    padding-left: 4.5rem;
+  }
+
   .md\:pt-20 {
     padding-top: 5rem;
   }
@@ -67484,6 +67927,10 @@ video {
     width: 4rem;
   }
 
+  .md\:w-17 {
+    width: 4.188rem;
+  }
+
   .md\:w-20 {
     width: 5rem;
   }
@@ -67852,6 +68299,10 @@ video {
     gap: 6rem;
   }
 
+  .md\:gap-26 {
+    gap: 6.875rem;
+  }
+
   .md\:gap-28 {
     gap: 7rem;
   }
@@ -68014,6 +68465,11 @@ video {
          column-gap: 6rem;
   }
 
+  .md\:gap-x-26 {
+    -moz-column-gap: 6.875rem;
+         column-gap: 6.875rem;
+  }
+
   .md\:gap-x-28 {
     -moz-column-gap: 7rem;
          column-gap: 7rem;
@@ -68176,6 +68632,10 @@ video {
     row-gap: 6rem;
   }
 
+  .md\:gap-y-26 {
+    row-gap: 6.875rem;
+  }
+
   .md\:gap-y-28 {
     row-gap: 7rem;
   }
@@ -75593,6 +76053,10 @@ video {
     height: 4rem;
   }
 
+  .lg\:h-17 {
+    height: 4.188rem;
+  }
+
   .lg\:h-20 {
     height: 5rem;
   }
@@ -75972,6 +76436,10 @@ video {
     margin: 5rem;
   }
 
+  .lg\:m-22 {
+    margin: 5.5rem;
+  }
+
   .lg\:m-24 {
     margin: 6rem;
   }
@@ -76380,6 +76848,16 @@ video {
     margin-right: 5rem;
   }
 
+  .lg\:my-22 {
+    margin-top: 5.5rem;
+    margin-bottom: 5.5rem;
+  }
+
+  .lg\:mx-22 {
+    margin-left: 5.5rem;
+    margin-right: 5.5rem;
+  }
+
   .lg\:my-24 {
     margin-top: 6rem;
     margin-bottom: 6rem;
@@ -77238,6 +77716,22 @@ video {
     margin-left: 5rem;
   }
 
+  .lg\:mt-22 {
+    margin-top: 5.5rem;
+  }
+
+  .lg\:mr-22 {
+    margin-right: 5.5rem;
+  }
+
+  .lg\:mb-22 {
+    margin-bottom: 5.5rem;
+  }
+
+  .lg\:ml-22 {
+    margin-left: 5.5rem;
+  }
+
   .lg\:mt-24 {
     margin-top: 6rem;
   }
@@ -78402,6 +78896,10 @@ video {
     max-width: 1700px;
   }
 
+  .lg\:max-w-32\.5 {
+    max-width: 32.5rem;
+  }
+
   .lg\:max-w-code {
     max-width: 38.375rem;
   }
@@ -79000,10 +79498,18 @@ video {
     padding: 3.5rem;
   }
 
+  .lg\:p-15 {
+    padding: 3.75rem;
+  }
+
   .lg\:p-16 {
     padding: 4rem;
   }
 
+  .lg\:p-18 {
+    padding: 4.5rem;
+  }
+
   .lg\:p-20 {
     padding: 5rem;
   }
@@ -79250,6 +79756,16 @@ video {
     padding-right: 3.5rem;
   }
 
+  .lg\:py-15 {
+    padding-top: 3.75rem;
+    padding-bottom: 3.75rem;
+  }
+
+  .lg\:px-15 {
+    padding-left: 3.75rem;
+    padding-right: 3.75rem;
+  }
+
   .lg\:py-16 {
     padding-top: 4rem;
     padding-bottom: 4rem;
@@ -79260,6 +79776,16 @@ video {
     padding-right: 4rem;
   }
 
+  .lg\:py-18 {
+    padding-top: 4.5rem;
+    padding-bottom: 4.5rem;
+  }
+
+  .lg\:px-18 {
+    padding-left: 4.5rem;
+    padding-right: 4.5rem;
+  }
+
   .lg\:py-20 {
     padding-top: 5rem;
     padding-bottom: 5rem;
@@ -79740,6 +80266,22 @@ video {
     padding-left: 3.5rem;
   }
 
+  .lg\:pt-15 {
+    padding-top: 3.75rem;
+  }
+
+  .lg\:pr-15 {
+    padding-right: 3.75rem;
+  }
+
+  .lg\:pb-15 {
+    padding-bottom: 3.75rem;
+  }
+
+  .lg\:pl-15 {
+    padding-left: 3.75rem;
+  }
+
   .lg\:pt-16 {
     padding-top: 4rem;
   }
@@ -79756,6 +80298,22 @@ video {
     padding-left: 4rem;
   }
 
+  .lg\:pt-18 {
+    padding-top: 4.5rem;
+  }
+
+  .lg\:pr-18 {
+    padding-right: 4.5rem;
+  }
+
+  .lg\:pb-18 {
+    padding-bottom: 4.5rem;
+  }
+
+  .lg\:pl-18 {
+    padding-left: 4.5rem;
+  }
+
   .lg\:pt-20 {
     padding-top: 5rem;
   }
@@ -85253,6 +85811,10 @@ video {
     width: 4rem;
   }
 
+  .lg\:w-17 {
+    width: 4.188rem;
+  }
+
   .lg\:w-20 {
     width: 5rem;
   }
@@ -85621,6 +86183,10 @@ video {
     gap: 6rem;
   }
 
+  .lg\:gap-26 {
+    gap: 6.875rem;
+  }
+
   .lg\:gap-28 {
     gap: 7rem;
   }
@@ -85783,6 +86349,11 @@ video {
          column-gap: 6rem;
   }
 
+  .lg\:gap-x-26 {
+    -moz-column-gap: 6.875rem;
+         column-gap: 6.875rem;
+  }
+
   .lg\:gap-x-28 {
     -moz-column-gap: 7rem;
          column-gap: 7rem;
@@ -85945,6 +86516,10 @@ video {
     row-gap: 6rem;
   }
 
+  .lg\:gap-y-26 {
+    row-gap: 6.875rem;
+  }
+
   .lg\:gap-y-28 {
     row-gap: 7rem;
   }
@@ -93362,6 +93937,10 @@ video {
     height: 4rem;
   }
 
+  .xl\:h-17 {
+    height: 4.188rem;
+  }
+
   .xl\:h-20 {
     height: 5rem;
   }
@@ -93741,6 +94320,10 @@ video {
     margin: 5rem;
   }
 
+  .xl\:m-22 {
+    margin: 5.5rem;
+  }
+
   .xl\:m-24 {
     margin: 6rem;
   }
@@ -94149,6 +94732,16 @@ video {
     margin-right: 5rem;
   }
 
+  .xl\:my-22 {
+    margin-top: 5.5rem;
+    margin-bottom: 5.5rem;
+  }
+
+  .xl\:mx-22 {
+    margin-left: 5.5rem;
+    margin-right: 5.5rem;
+  }
+
   .xl\:my-24 {
     margin-top: 6rem;
     margin-bottom: 6rem;
@@ -95007,6 +95600,22 @@ video {
     margin-left: 5rem;
   }
 
+  .xl\:mt-22 {
+    margin-top: 5.5rem;
+  }
+
+  .xl\:mr-22 {
+    margin-right: 5.5rem;
+  }
+
+  .xl\:mb-22 {
+    margin-bottom: 5.5rem;
+  }
+
+  .xl\:ml-22 {
+    margin-left: 5.5rem;
+  }
+
   .xl\:mt-24 {
     margin-top: 6rem;
   }
@@ -96171,6 +96780,10 @@ video {
     max-width: 1700px;
   }
 
+  .xl\:max-w-32\.5 {
+    max-width: 32.5rem;
+  }
+
   .xl\:max-w-code {
     max-width: 38.375rem;
   }
@@ -96769,10 +97382,18 @@ video {
     padding: 3.5rem;
   }
 
+  .xl\:p-15 {
+    padding: 3.75rem;
+  }
+
   .xl\:p-16 {
     padding: 4rem;
   }
 
+  .xl\:p-18 {
+    padding: 4.5rem;
+  }
+
   .xl\:p-20 {
     padding: 5rem;
   }
@@ -97019,6 +97640,16 @@ video {
     padding-right: 3.5rem;
   }
 
+  .xl\:py-15 {
+    padding-top: 3.75rem;
+    padding-bottom: 3.75rem;
+  }
+
+  .xl\:px-15 {
+    padding-left: 3.75rem;
+    padding-right: 3.75rem;
+  }
+
   .xl\:py-16 {
     padding-top: 4rem;
     padding-bottom: 4rem;
@@ -97029,6 +97660,16 @@ video {
     padding-right: 4rem;
   }
 
+  .xl\:py-18 {
+    padding-top: 4.5rem;
+    padding-bottom: 4.5rem;
+  }
+
+  .xl\:px-18 {
+    padding-left: 4.5rem;
+    padding-right: 4.5rem;
+  }
+
   .xl\:py-20 {
     padding-top: 5rem;
     padding-bottom: 5rem;
@@ -97509,6 +98150,22 @@ video {
     padding-left: 3.5rem;
   }
 
+  .xl\:pt-15 {
+    padding-top: 3.75rem;
+  }
+
+  .xl\:pr-15 {
+    padding-right: 3.75rem;
+  }
+
+  .xl\:pb-15 {
+    padding-bottom: 3.75rem;
+  }
+
+  .xl\:pl-15 {
+    padding-left: 3.75rem;
+  }
+
   .xl\:pt-16 {
     padding-top: 4rem;
   }
@@ -97525,6 +98182,22 @@ video {
     padding-left: 4rem;
   }
 
+  .xl\:pt-18 {
+    padding-top: 4.5rem;
+  }
+
+  .xl\:pr-18 {
+    padding-right: 4.5rem;
+  }
+
+  .xl\:pb-18 {
+    padding-bottom: 4.5rem;
+  }
+
+  .xl\:pl-18 {
+    padding-left: 4.5rem;
+  }
+
   .xl\:pt-20 {
     padding-top: 5rem;
   }
@@ -103022,6 +103695,10 @@ video {
     width: 4rem;
   }
 
+  .xl\:w-17 {
+    width: 4.188rem;
+  }
+
   .xl\:w-20 {
     width: 5rem;
   }
@@ -103390,6 +104067,10 @@ video {
     gap: 6rem;
   }
 
+  .xl\:gap-26 {
+    gap: 6.875rem;
+  }
+
   .xl\:gap-28 {
     gap: 7rem;
   }
@@ -103552,6 +104233,11 @@ video {
          column-gap: 6rem;
   }
 
+  .xl\:gap-x-26 {
+    -moz-column-gap: 6.875rem;
+         column-gap: 6.875rem;
+  }
+
   .xl\:gap-x-28 {
     -moz-column-gap: 7rem;
          column-gap: 7rem;
@@ -103714,6 +104400,10 @@ video {
     row-gap: 6rem;
   }
 
+  .xl\:gap-y-26 {
+    row-gap: 6.875rem;
+  }
+
   .xl\:gap-y-28 {
     row-gap: 7rem;
   }
@@ -111131,6 +111821,10 @@ video {
     height: 4rem;
   }
 
+  .xxl\:h-17 {
+    height: 4.188rem;
+  }
+
   .xxl\:h-20 {
     height: 5rem;
   }
@@ -111510,6 +112204,10 @@ video {
     margin: 5rem;
   }
 
+  .xxl\:m-22 {
+    margin: 5.5rem;
+  }
+
   .xxl\:m-24 {
     margin: 6rem;
   }
@@ -111918,6 +112616,16 @@ video {
     margin-right: 5rem;
   }
 
+  .xxl\:my-22 {
+    margin-top: 5.5rem;
+    margin-bottom: 5.5rem;
+  }
+
+  .xxl\:mx-22 {
+    margin-left: 5.5rem;
+    margin-right: 5.5rem;
+  }
+
   .xxl\:my-24 {
     margin-top: 6rem;
     margin-bottom: 6rem;
@@ -112776,6 +113484,22 @@ video {
     margin-left: 5rem;
   }
 
+  .xxl\:mt-22 {
+    margin-top: 5.5rem;
+  }
+
+  .xxl\:mr-22 {
+    margin-right: 5.5rem;
+  }
+
+  .xxl\:mb-22 {
+    margin-bottom: 5.5rem;
+  }
+
+  .xxl\:ml-22 {
+    margin-left: 5.5rem;
+  }
+
   .xxl\:mt-24 {
     margin-top: 6rem;
   }
@@ -113940,6 +114664,10 @@ video {
     max-width: 1700px;
   }
 
+  .xxl\:max-w-32\.5 {
+    max-width: 32.5rem;
+  }
+
   .xxl\:max-w-code {
     max-width: 38.375rem;
   }
@@ -114538,10 +115266,18 @@ video {
     padding: 3.5rem;
   }
 
+  .xxl\:p-15 {
+    padding: 3.75rem;
+  }
+
   .xxl\:p-16 {
     padding: 4rem;
   }
 
+  .xxl\:p-18 {
+    padding: 4.5rem;
+  }
+
   .xxl\:p-20 {
     padding: 5rem;
   }
@@ -114788,6 +115524,16 @@ video {
     padding-right: 3.5rem;
   }
 
+  .xxl\:py-15 {
+    padding-top: 3.75rem;
+    padding-bottom: 3.75rem;
+  }
+
+  .xxl\:px-15 {
+    padding-left: 3.75rem;
+    padding-right: 3.75rem;
+  }
+
   .xxl\:py-16 {
     padding-top: 4rem;
     padding-bottom: 4rem;
@@ -114798,6 +115544,16 @@ video {
     padding-right: 4rem;
   }
 
+  .xxl\:py-18 {
+    padding-top: 4.5rem;
+    padding-bottom: 4.5rem;
+  }
+
+  .xxl\:px-18 {
+    padding-left: 4.5rem;
+    padding-right: 4.5rem;
+  }
+
   .xxl\:py-20 {
     padding-top: 5rem;
     padding-bottom: 5rem;
@@ -115278,6 +116034,22 @@ video {
     padding-left: 3.5rem;
   }
 
+  .xxl\:pt-15 {
+    padding-top: 3.75rem;
+  }
+
+  .xxl\:pr-15 {
+    padding-right: 3.75rem;
+  }
+
+  .xxl\:pb-15 {
+    padding-bottom: 3.75rem;
+  }
+
+  .xxl\:pl-15 {
+    padding-left: 3.75rem;
+  }
+
   .xxl\:pt-16 {
     padding-top: 4rem;
   }
@@ -115294,6 +116066,22 @@ video {
     padding-left: 4rem;
   }
 
+  .xxl\:pt-18 {
+    padding-top: 4.5rem;
+  }
+
+  .xxl\:pr-18 {
+    padding-right: 4.5rem;
+  }
+
+  .xxl\:pb-18 {
+    padding-bottom: 4.5rem;
+  }
+
+  .xxl\:pl-18 {
+    padding-left: 4.5rem;
+  }
+
   .xxl\:pt-20 {
     padding-top: 5rem;
   }
@@ -120791,6 +121579,10 @@ video {
     width: 4rem;
   }
 
+  .xxl\:w-17 {
+    width: 4.188rem;
+  }
+
   .xxl\:w-20 {
     width: 5rem;
   }
@@ -121159,6 +121951,10 @@ video {
     gap: 6rem;
   }
 
+  .xxl\:gap-26 {
+    gap: 6.875rem;
+  }
+
   .xxl\:gap-28 {
     gap: 7rem;
   }
@@ -121321,6 +122117,11 @@ video {
          column-gap: 6rem;
   }
 
+  .xxl\:gap-x-26 {
+    -moz-column-gap: 6.875rem;
+         column-gap: 6.875rem;
+  }
+
   .xxl\:gap-x-28 {
     -moz-column-gap: 7rem;
          column-gap: 7rem;
@@ -121483,6 +122284,10 @@ video {
     row-gap: 6rem;
   }
 
+  .xxl\:gap-y-26 {
+    row-gap: 6.875rem;
+  }
+
   .xxl\:gap-y-28 {
     row-gap: 7rem;
   }
@@ -128900,6 +129705,10 @@ video {
     height: 4rem;
   }
 
+  .xxxl\:h-17 {
+    height: 4.188rem;
+  }
+
   .xxxl\:h-20 {
     height: 5rem;
   }
@@ -129279,6 +130088,10 @@ video {
     margin: 5rem;
   }
 
+  .xxxl\:m-22 {
+    margin: 5.5rem;
+  }
+
   .xxxl\:m-24 {
     margin: 6rem;
   }
@@ -129687,6 +130500,16 @@ video {
     margin-right: 5rem;
   }
 
+  .xxxl\:my-22 {
+    margin-top: 5.5rem;
+    margin-bottom: 5.5rem;
+  }
+
+  .xxxl\:mx-22 {
+    margin-left: 5.5rem;
+    margin-right: 5.5rem;
+  }
+
   .xxxl\:my-24 {
     margin-top: 6rem;
     margin-bottom: 6rem;
@@ -130545,6 +131368,22 @@ video {
     margin-left: 5rem;
   }
 
+  .xxxl\:mt-22 {
+    margin-top: 5.5rem;
+  }
+
+  .xxxl\:mr-22 {
+    margin-right: 5.5rem;
+  }
+
+  .xxxl\:mb-22 {
+    margin-bottom: 5.5rem;
+  }
+
+  .xxxl\:ml-22 {
+    margin-left: 5.5rem;
+  }
+
   .xxxl\:mt-24 {
     margin-top: 6rem;
   }
@@ -131709,6 +132548,10 @@ video {
     max-width: 1700px;
   }
 
+  .xxxl\:max-w-32\.5 {
+    max-width: 32.5rem;
+  }
+
   .xxxl\:max-w-code {
     max-width: 38.375rem;
   }
@@ -132307,10 +133150,18 @@ video {
     padding: 3.5rem;
   }
 
+  .xxxl\:p-15 {
+    padding: 3.75rem;
+  }
+
   .xxxl\:p-16 {
     padding: 4rem;
   }
 
+  .xxxl\:p-18 {
+    padding: 4.5rem;
+  }
+
   .xxxl\:p-20 {
     padding: 5rem;
   }
@@ -132557,6 +133408,16 @@ video {
     padding-right: 3.5rem;
   }
 
+  .xxxl\:py-15 {
+    padding-top: 3.75rem;
+    padding-bottom: 3.75rem;
+  }
+
+  .xxxl\:px-15 {
+    padding-left: 3.75rem;
+    padding-right: 3.75rem;
+  }
+
   .xxxl\:py-16 {
     padding-top: 4rem;
     padding-bottom: 4rem;
@@ -132567,6 +133428,16 @@ video {
     padding-right: 4rem;
   }
 
+  .xxxl\:py-18 {
+    padding-top: 4.5rem;
+    padding-bottom: 4.5rem;
+  }
+
+  .xxxl\:px-18 {
+    padding-left: 4.5rem;
+    padding-right: 4.5rem;
+  }
+
   .xxxl\:py-20 {
     padding-top: 5rem;
     padding-bottom: 5rem;
@@ -133047,6 +133918,22 @@ video {
     padding-left: 3.5rem;
   }
 
+  .xxxl\:pt-15 {
+    padding-top: 3.75rem;
+  }
+
+  .xxxl\:pr-15 {
+    padding-right: 3.75rem;
+  }
+
+  .xxxl\:pb-15 {
+    padding-bottom: 3.75rem;
+  }
+
+  .xxxl\:pl-15 {
+    padding-left: 3.75rem;
+  }
+
   .xxxl\:pt-16 {
     padding-top: 4rem;
   }
@@ -133063,6 +133950,22 @@ video {
     padding-left: 4rem;
   }
 
+  .xxxl\:pt-18 {
+    padding-top: 4.5rem;
+  }
+
+  .xxxl\:pr-18 {
+    padding-right: 4.5rem;
+  }
+
+  .xxxl\:pb-18 {
+    padding-bottom: 4.5rem;
+  }
+
+  .xxxl\:pl-18 {
+    padding-left: 4.5rem;
+  }
+
   .xxxl\:pt-20 {
     padding-top: 5rem;
   }
@@ -138560,6 +139463,10 @@ video {
     width: 4rem;
   }
 
+  .xxxl\:w-17 {
+    width: 4.188rem;
+  }
+
   .xxxl\:w-20 {
     width: 5rem;
   }
@@ -138928,6 +139835,10 @@ video {
     gap: 6rem;
   }
 
+  .xxxl\:gap-26 {
+    gap: 6.875rem;
+  }
+
   .xxxl\:gap-28 {
     gap: 7rem;
   }
@@ -139090,6 +140001,11 @@ video {
          column-gap: 6rem;
   }
 
+  .xxxl\:gap-x-26 {
+    -moz-column-gap: 6.875rem;
+         column-gap: 6.875rem;
+  }
+
   .xxxl\:gap-x-28 {
     -moz-column-gap: 7rem;
          column-gap: 7rem;
@@ -139252,6 +140168,10 @@ video {
     row-gap: 6rem;
   }
 
+  .xxxl\:gap-y-26 {
+    row-gap: 6.875rem;
+  }
+
   .xxxl\:gap-y-28 {
     row-gap: 7rem;
   }
@@ -142800,4 +143720,4 @@ video {
     -webkit-animation: bounce 1s infinite;
             animation: bounce 1s infinite;
   }
-}
\ No newline at end of file
+}
diff --git a/index.html b/index.html
index 8a66fa1..ebc7b06 100644
--- a/index.html
+++ b/index.html
@@ -10,30 +10,28 @@
 		<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
 	</head>
 	<body class="text-rectangle97 overflow-x-hidden">
-
 		<header class="lg:px-8 xl:px-13">
+			<div class="lg:container lg:mx-auto">
 			<div class="relative flex justify-between items-center py-2 px-4 md:py-8 md:px-10 md:border-b md:border-grey lg:px-0">
-				<svg width="40" height="40" viewBox="0 0 40 40" fill="none">
-					<path d="M30.4191 5.7826C27.0753 3.8861 23.8255 2.04303 20.5756 0.199959C20.025 -0.10722 19.4879 -0.0537975 18.9507 0.253381C13.0151 3.6457 7.07946 7.02467 1.15726 10.417C0.969256 10.5238 0.794679 10.831 0.794679 11.0447C0.78125 17.816 0.767821 24.5739 0.808108 31.3318C0.808108 31.7726 1.14383 32.4003 1.50642 32.614C4.70253 34.4971 7.93892 36.3001 11.1753 38.1298C11.2022 38.1432 11.2559 38.1298 11.4036 38.1298C11.4036 37.8761 11.4036 37.609 11.4036 37.3552C11.4036 30.7041 11.417 24.0664 11.3902 17.4153C11.3902 16.7876 11.6185 16.4938 12.1288 16.2133C18.0778 12.8477 24.0135 9.46874 29.9491 6.08977C30.07 6.023 30.2042 5.92951 30.4191 5.7826Z" fill="#132644"/>
-					<path d="M25.1279 40.0001C25.1279 39.693 25.1279 39.4392 25.1279 39.1988C25.1279 34.5511 25.1413 29.9033 25.1144 25.2422C25.1144 24.6412 25.289 24.3207 25.8262 24.0269C29.9623 21.7163 34.0716 19.3658 38.1943 17.0285C38.3958 16.9217 38.5838 16.8015 38.8255 16.6546C38.718 16.5611 38.6509 16.4809 38.5569 16.4275C35.8711 14.8916 33.1719 13.3691 30.4995 11.8065C29.7072 11.339 29.0223 11.3257 28.2031 11.7931C24.2013 14.1037 20.1726 16.3741 16.1439 18.6446C15.7007 18.885 15.5664 19.1654 15.5664 19.6596C15.5798 24.294 15.5798 28.915 15.5664 33.5494C15.5664 34.2439 15.7813 34.7915 16.399 35.1387C19.1788 36.7147 21.9452 38.2773 24.725 39.8532C24.819 39.9067 24.9399 39.9334 25.1279 40.0001Z" fill="#132644"/>
-					<path d="M38.9064 32.2405C35.67 30.3974 32.5545 28.6345 29.3584 26.8181C29.3584 30.4642 29.3584 33.9901 29.3584 37.6629C32.5276 35.8599 35.6432 34.0969 38.9064 32.2405Z" fill="#132644"/>
+				<svg class="w-10 h-10">
+					<use href="#logo"/>
 				</svg>
 				<div id="menu-wrapper" class="absolute z-10 top-0 left-0 transform -translate-y-full duration-200 w-screen h-screen flex md:bg-green md:top-1/2 md:left-1/2 md:transform md:-translate-y-2/4 md:-translate-x-2/4 md:w-auto md:h-auto">
 					<div class="bg-black opacity-40 w-1/4 h-full md:hidden"></div>
-					<div class="flex flex-col bg-rectangle102 w-3/4 h-full p-6 pt-20 md:p-0 md:w-full">
+					<div class="flex flex-col overflow-y-auto bg-rectangle102 w-3/4 h-full p-6 pt-20 md:p-0 md:w-full md:overflow-visible">
 						<nav class="mb-auto">
 							<ul class="md:flex">
 								<li class="items-center menu-item relative mb-8 cursor-pointer md:flex md:m-0 md:py-2">
-									<a class="font-special font-bold text-xs" href="">Docs</a>
+									<a class="inline-block font-special font-bold text-xs mb-4 md:m-0" href="">Docs</a>
 									<img class="hidden transform duration-200 rotate-90 ml-2 md:block" src="./assets/images/arrow/arrow-black.svg" alt="">
 									<ul class="bg-rectangle102 md:absolute md:top-full md:left-2/4 md:transform md:-translate-x-2/4 md:p-4 md:shadow md:hidden">
-										<li class="my-4 md:my-0 md:mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">Quick Start</a></li>
+										<li class="mb-4 md:my-0 md:mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">Quick Start</a></li>
 										<li class="mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">Guides</a></li>
 										<li class="mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">Docs</a></li>
 										<li><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">Github</a></li>
 									</ul>
 								</li>
-								<li class="menu-item md:m-0 cursor-pointer md:mx-16 md:py-2">
+								<li class="menu-item md:m-0 cursor-pointer mb-8 md:mb-0 md:mx-16 md:py-2">
 									<a class="font-special font-bold text-xs" href="">Use Cases</a>
 								</li>
 								<li class="items-center menu-item relative mb-8 cursor-pointer md:flex md:m-0 md:py-2">
@@ -49,7 +47,7 @@
 							</ul>
 							<button class="border border-rectangle97 font-bold text-xs py-3 px-6 md:hidden">Get Started</button>
 						</nav>
-						<div class="flex items-center justify-center md:hidden">
+						<div class="flex items-center justify-center mt-6 md:hidden">
 							<a href="">
 								<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
 									<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C18.6274 0 24 5.37259 24 12C24 18.6274 18.6274 24 12 24C5.37259 24 0 18.6274 0 12C0 5.37259 5.37259 0 12 0ZM7.56029 18.3317C7.56029 18.3317 8.1648 17.6592 8.59973 17.0662C6.50477 16.4729 5.71493 15.2865 5.71493 15.2865C7.89312 16.6332 9.92741 17.1514 12 17.0841C14.0726 17.1513 16.1069 16.6332 18.2848 15.2865C18.2848 15.2865 17.4952 16.4729 15.4 17.0662C15.8351 17.6594 16.4394 18.3317 16.4394 18.3317C19.3784 18.267 20.8461 16.7848 21.3275 16.2986C21.4348 16.1902 21.4931 16.1313 21.5078 16.1486C21.5078 11.2526 19.1309 7.26605 19.1309 7.26605C17.0037 5.73965 15.0216 5.67619 14.6429 5.66827L14.4011 5.89766C17.1165 6.65698 18.4299 7.84344 18.4299 7.84344C16.0993 6.71779 13.9028 6.32184 12 6.29813C10.0972 6.32213 7.9008 6.71779 5.57011 7.84344C5.57011 7.84344 6.88349 6.65698 9.59885 5.89766L9.35712 5.66827C8.9784 5.67619 6.99629 5.73946 4.86912 7.26605C4.86912 7.26605 2.49221 11.2525 2.49221 16.1486C2.50689 16.1313 2.56519 16.1902 2.67246 16.2986C3.15385 16.7847 4.62153 18.267 7.56029 18.3317ZM14.9237 11.2374V11.2295C15.8422 11.2295 16.5835 11.9889 16.5835 12.9222C16.5835 13.8555 15.8422 14.6149 14.9237 14.6149C14.0051 14.6149 13.2638 13.8555 13.2638 12.9301C13.2638 11.9967 14.0131 11.2374 14.9237 11.2374ZM9.07449 11.2367V11.2288C8.15591 11.2288 7.41465 11.9881 7.41465 12.9214C7.41465 13.8548 8.15596 14.6142 9.07449 14.6142C9.99302 14.6142 10.7344 13.8548 10.7344 12.9294C10.7344 11.996 9.985 11.2367 9.07449 11.2367Z" fill="currentColor"/>
@@ -75,10 +73,9 @@
 					<span class="block w-6 h-0.5 bg-rectangle97"></span>
 				</button>
 			</div>
+			</div>
 		</header>
-
 		<div class="container mx-auto">
-
 			<!-- HERO -->
 			<section class="py-10 mb-10 border-b border-grey md:pl-20 lg:flex lg:justify-center lg:py-26 lg:mb-26">
 				<div class="max-w-lg md:max-w-2xl">
@@ -87,7 +84,6 @@
 					<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 hover:underline" href="" >See the docs</a>
 				</div>
 			</section>
-
 			<!-- Grid section -->
 			<section class="flex flex-col items-center mb-18 md:mb-20 lg:mb-32">
 				<h2 class="font-bold text-sm leading-6 mb-18">The future of Communication</h2>
@@ -109,7 +105,6 @@
 					</div>
 				</div>
 			</section>
-
 			<!-- section code -->
 			<section class="border-b border-grey pb-10 mb-10 md:border-0 lg:border-b lg:flex lg:justify-between lg:px-28 lg:pb-25 lg:mb-25">
 				<div class="mb-11 md:mb-15 lg:max-w-xs">
@@ -133,7 +128,6 @@
 						</code></pre>
 				</div>
 			</section>
-
 			<!-- Use Cases -->
 			<section class="border-b border-grey pb-10 mb-10 md:pb-20 md:mb-20 lg:flex lg:justify-between lg:px-28 lg:pb-25 lg:mb-25">
 				<div class="mb-11 md:mb-5 lg:max-w-xs lg:mb-0 lg:mr-15">
@@ -146,24 +140,140 @@
 						<h3 class="font-bold text-sm text-right leading-6 mb-5 md:mb-7">Decentralized Chat</h3>
 						<a class="text-black text-xs font-bold italic bg-link-arrow-black bg-left bg-no-repeat pl-3 hover:underline" href="">View the guide</a>
 					</div>
-
 					<div class="flex flex-col items-end justify-end bg-rectangle99 pt-10 px-4 pb-5 md:h-58 xl:p-10">
 						<h3 class="font-bold text-sm text-right leading-6 mb-5 md:mb-7">Gasless Polling</h3>
 						<a class="text-black text-xs font-bold italic bg-link-arrow-black bg-left bg-no-repeat pl-3 hover:underline" href="">View the guide</a>
 					</div>
-
 					<div class="flex flex-col items-end justify-end bg-rectangle96 pt-10 px-4 pb-5 md:h-58 xl:p-10">
 						<h3 class="font-bold text-sm text-right text-rectangle99 leading-6 mb-5 md:mb-7">dApp to Wallet Notifications</h3>
 						<a class="text-rectangle99 text-xs text-rectangle99 font-bold italic bg-link-arrow-green bg-left bg-no-repeat pl-3 hover:underline" href="">View the guide</a>
 					</div>
-
 					<div class="flex flex-col items-end justify-end bg-rectangle98 pt-10 px-4 pb-5 md:h-58 xl:p-10">
 						<h3 class="font-bold text-sm text-right leading-6 mb-5 md:mb-7">Layer 2 Communication</h3>
 						<a class="text-black text-xs font-bold italic bg-link-arrow-black bg-left bg-no-repeat pl-3 hover:underline" href="">View the guide</a>
 					</div>
 				</div>
 			</section>
+			<!-- Built with Waku -->
+			<section class="lg:px-28">
+				<div class="flex flex-col items-center mb-11 xl:mb-26">
+					<h2 class="font-bold text-sm text-center leading-6 whitespace-nowrap mb-4">Built with Waku</h2>
+					<p class="text-sm text-center leading-6 italic opacity-75 mb-7 md:max-w-32.5">Waku is a suite of protocols designed for private, secure, decentralized messaging. The communication layer for Web3.</p>
+					<a class="text-blue text-xs text-center font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 hover:underline" href="">Learn more about Waku</a>
+				</div>
+				<div class="grid grid-cols-1 gap-6 mb-20 md:grid-cols-3 xl:gap-26">
+					<div>
+						<h3 class="font-bold text-sm leading-6 whitespace-nowrap mb-5 md:text-center xl:text-left">Tools, Docs, and Libraries</h3>
+						<p class="text-sm leading-6 opacity-75 md:text-center xl:text-left">DappConnect provides you with everything you need to facilitate the usage of Waku in dApps.</p>
+					</div>
+					<div>
+						<h3 class="font-bold text-sm leading-6 whitespace-nowrap mb-5 md:text-center xl:text-left">SDK’s</h3>
+						<p class="text-sm leading-6 opacity-75 md:text-center xl:text-left">Most common Waku use-cases can be added to your dApp thanks to ready-to-use npm packages and React components.</p>
+					</div>
+					<div>
+						<h3 class="font-bold text-sm leading-6 whitespace-nowrap mb-5 md:text-center xl:text-left">js-waku</h3>
+						<p class="text-sm leading-6 opacity-75 md:text-center xl:text-left">JS-Waku is the JavaScript implementation of the Waku protocol. Use it directly in your dApp for more advanced use cases.</p>
+					</div>
+				</div>
+			</section>
+			<!-- Green section -->
+			<section class="mb-20 lg:px-28 lg:mb-22">
+				<div class="bg-green p-6 md:flex md:items-center md:justify-center md:py-14 xl:py-15">
+					<svg id="logo" class="w-10 h-10 lg:w-17 lg:h-17 mr-10" viewBox="0 0 67 67" fill="none">
+						<path d="M50.952 9.68594C45.3511 6.50931 39.9076 3.42217 34.4642 0.335022C33.5419 -0.179502 32.6422 -0.0900197 31.7425 0.424504C21.8003 6.10664 11.8581 11.7664 1.93841 17.4485C1.6235 17.6275 1.33109 18.142 1.33109 18.5C1.30859 29.8419 1.2861 41.1614 1.35358 52.4809C1.35358 53.2192 1.91592 54.2706 2.52325 54.6285C7.87673 57.7828 13.2977 60.8028 18.7187 63.8676C18.7636 63.8899 18.8536 63.8676 19.101 63.8676C19.101 63.4425 19.101 62.9951 19.101 62.5701C19.101 51.4295 19.1235 40.3113 19.0786 29.1707C19.0786 28.1193 19.4609 27.6272 20.3157 27.1574C30.2804 21.52 40.2225 15.8602 50.1647 10.2005C50.3672 10.0886 50.5921 9.93202 50.952 9.68594Z" fill="currentColor"/>
+						<path d="M42.0897 67.0004C42.0897 66.4859 42.0897 66.0608 42.0897 65.6582C42.0897 57.8732 42.1122 50.0882 42.0672 42.2809C42.0672 41.2742 42.3596 40.7373 43.2593 40.2451C50.1874 36.375 57.0704 32.4378 63.976 28.5229C64.3134 28.344 64.6283 28.1426 65.0332 27.8966C64.8532 27.74 64.7407 27.6057 64.5833 27.5163C60.0846 24.9436 55.5633 22.3934 51.0871 19.776C49.76 18.9931 48.6128 18.9707 47.2407 19.7537C40.5376 23.6238 33.7895 27.4268 27.0414 31.2298C26.2992 31.6325 26.0742 32.1022 26.0742 32.9299C26.0967 40.6926 26.0967 48.4328 26.0742 56.1954C26.0742 57.3587 26.4341 58.2759 27.4688 58.8575C32.125 61.4972 36.7587 64.1146 41.4149 66.7543C41.5723 66.8438 41.7748 66.8885 42.0897 67.0004Z" fill="currentColor"/>
+						<path d="M65.1678 54.0029C59.7468 50.9157 54.5283 47.9628 49.1748 44.9204C49.1748 51.0276 49.1748 56.9334 49.1748 63.0854C54.4833 60.0653 59.7018 57.1124 65.1678 54.0029Z" fill="currentColor"/>
+					</svg>
+					<div>
+						<h2 class="font-bold text-sm leading-6 mt-6 mb-5 md:mt-0">Use DappConnect for decentralized communications now</h2>
+						<a class="text-rectangle97 text-xs font-bold italic bg-link-arrow-black bg-left bg-no-repeat pl-3 hover:underline" href="">Get started</a>
+					</div>
+				</div>
+			</section>
+			<!-- Links section -->
+			<section class="mb-10 lg:px-16 lg:mb-22">
+				<div class="grid grid-cols-2 gap-y-11 md:grid-cols-5">
+					<div class="flex flex-col items-center">
+						<svg width="33" height="32" viewBox="0 0 33 32" fill="none">
+								<path d="M32.2485 6.11174C31.0521 6.63195 29.7858 6.97584 28.4889 7.13272C29.8537 6.31485 30.8728 5.0282 31.3574 3.51145C30.0749 4.27728 28.6694 4.81685 27.202 5.10672C26.2146 4.04199 24.9034 3.33325 23.4741 3.09165C22.0448 2.85006 20.5782 3.08927 19.3044 3.77178C18.0305 4.45428 17.0215 5.54148 16.4354 6.86285C15.8494 8.18423 15.7196 9.66504 16.0664 11.073C13.4644 10.9415 10.9164 10.2642 8.58778 9.08511C6.25917 7.90606 4.20206 6.25164 2.5501 4.22932C1.97971 5.23461 1.68321 6.37308 1.69007 7.53154C1.69369 8.60736 1.96329 9.667 2.47485 10.6161C2.98641 11.5652 3.72407 12.3743 4.62214 12.9714C3.58182 12.9431 2.56241 12.664 1.65061 12.1578L1.65103 12.2376C1.66676 13.745 2.20265 15.2034 3.16805 16.3661C4.13346 17.5289 5.46911 18.3246 6.94909 18.6187C6.38089 18.7919 5.7905 18.8832 5.19569 18.8899C4.78391 18.8851 4.37297 18.8477 3.96673 18.7782C4.39457 20.0749 5.21527 21.2081 6.31464 22.0201C7.41401 22.8321 8.73736 23.2826 10.1006 23.3088C7.8084 25.1199 4.97187 26.1083 2.04314 26.1165C1.5099 26.1182 0.976899 26.0863 0.447338 26.0208C3.44777 27.9515 6.9379 28.9764 10.4973 28.972C12.9537 28.9975 15.388 28.5333 17.6579 27.6066C19.9279 26.6798 21.9881 25.3091 23.7181 23.5744C25.4482 21.8397 26.8134 19.7759 27.734 17.5034C28.6547 15.231 29.1123 12.7955 29.0801 10.3392C29.0787 10.068 29.0772 9.78087 29.0757 9.49372C30.3226 8.56019 31.3962 7.41576 32.2485 6.11174Z" fill="#132644"/>
+						</svg>
+						<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="">Twitter</a>
+					</div>
+					<div class="flex flex-col items-center">
+						<svg width="40" height="32" viewBox="0 0 40 32" fill="none">
+							<path d="M37.7988 13.6081C36.2597 8.19607 34.5066 5.39968 34.4783 5.34952C34.3782 5.22592 31.8959 2.22193 25.8867 0L25.0796 2.17663C27.9384 3.23372 29.9637 4.52331 31.0769 5.35655C27.7456 4.35535 23.7796 3.74217 20.2641 3.74217C16.7486 3.74217 12.7762 4.35535 9.43433 5.35655C10.5562 4.52339 12.5951 3.23372 15.4651 2.17663L14.6809 0C8.64845 2.22193 6.13452 5.22592 6.0331 5.34952C6.0043 5.39968 4.22168 8.19607 2.62568 13.6081C1.08748 18.8237 0.47484 26.1813 0.452441 26.4764C0.585942 26.6878 3.65409 31.9996 12.0919 31.9996L14.247 28.8875C11.8543 28.2482 9.57488 27.2172 7.49073 25.8183L8.77957 23.888C12.1419 26.1448 16.0702 27.3377 20.1399 27.3377C24.2097 27.3377 28.1506 26.1448 31.5366 23.888L32.8051 25.8183C30.7064 27.2172 28.416 28.2482 26.0165 28.8875L28.1389 31.9996C36.5767 31.9996 39.7008 26.6878 39.8365 26.4764C39.8172 26.1813 39.282 18.8237 37.7988 13.6081ZM14.8451 19.6744H12.5375L12.5578 15.8096H14.8655L14.8451 19.6744ZM27.8231 19.6744H25.5154L25.5358 15.8096H27.8434L27.8231 19.6744Z" fill="#132644"/>
+						</svg>
+						<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="">Discord</a>
+					</div>
+					<div class="flex flex-col items-center">
+						<svg width="33" height="32" viewBox="0 0 33 32" fill="none">
+							<path d="M15.9978 -0.000488281C7.1639 -0.000488281 0.0375093 7.12605 0.0837804 15.9173C0.120789 22.9487 4.73612 28.9139 11.1071 31.0206C11.9079 31.1672 12.1973 30.6757 12.1951 30.2536C12.1931 29.8751 12.1738 28.8743 12.1588 27.5465C7.71394 28.5076 6.75766 25.4121 6.75766 25.4121C6.02199 23.573 4.96943 23.0835 4.96943 23.0835C3.51026 22.0965 5.07234 22.1163 5.07234 22.1163C6.67891 22.2293 7.53094 23.7573 7.53094 23.7573C8.97172 26.1889 11.286 25.4874 12.1958 25.0791C12.3344 24.0506 12.7447 23.349 13.2006 22.9507C9.64655 22.5484 5.90341 21.1829 5.87132 15.0849C5.86217 13.3469 6.47868 11.926 7.49681 10.8122C7.32869 10.4099 6.77218 8.79076 7.63064 6.60087C7.63064 6.60087 8.97237 6.1728 12.0392 8.23189C13.3133 7.87913 14.6803 7.70275 16.0423 7.6968C17.4003 7.70473 18.7712 7.87913 20.0511 8.23387C23.0942 6.17479 24.4384 6.60285 24.4384 6.60285C25.3219 8.79472 24.7825 10.4119 24.6206 10.8142C25.6524 11.9279 26.2779 13.3489 26.287 15.0869C26.3192 21.2008 22.5864 22.5464 19.0245 22.9408C19.6011 23.4323 20.1182 24.4033 20.126 25.8877C20.1372 28.0161 20.1262 29.7324 20.129 30.2536C20.1312 30.6797 20.4218 31.1751 21.233 31.0186C27.5718 28.9099 32.1203 22.9467 32.0833 15.9173C32.0371 7.12605 24.8357 -0.000488281 15.9978 -0.000488281Z" fill="#132644"/>
+						</svg>
+						<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="">Github</a>
+					</div>
+					<div class="flex flex-col items-center">
+						<svg class="w-8 h-8" viewBox="0 0 40 32" fill="none">
+							<use href="#logo"/>
+						</svg>
+						<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="">Forum</a>
+					</div>
+					<div class="flex flex-col items-center">
+						<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+							<path d="M22.7754 4.97859C20.4766 3.67482 18.2425 2.40777 16.0083 1.14072C15.6298 0.929547 15.2605 0.966273 14.8913 1.17745C10.8107 3.50955 6.73019 5.83247 2.65889 8.16457C2.52964 8.23803 2.40962 8.4492 2.40962 8.5961C2.40039 13.2511 2.39116 17.897 2.41885 22.5428C2.41885 22.8458 2.64965 23.2773 2.89892 23.4242C5.09613 24.7188 7.32104 25.9583 9.54595 27.2162C9.56441 27.2254 9.60134 27.2162 9.70289 27.2162C9.70289 27.0417 9.70289 26.8581 9.70289 26.6837C9.70289 22.1113 9.71213 17.5481 9.69366 12.9757C9.69366 12.5442 9.85061 12.3422 10.2014 12.1493C14.2912 9.83561 18.3717 7.51269 22.4523 5.18977C22.5354 5.14386 22.6277 5.07959 22.7754 4.97859Z" fill="#132644"/>
+							<path d="M10.1758 27.3105C12.4745 28.6142 14.7087 29.8813 16.9428 31.1483C17.3213 31.3595 17.6906 31.3228 18.0599 31.1116C22.1404 28.7795 26.221 26.4566 30.2923 24.1245C30.4215 24.051 30.5415 23.8399 30.5415 23.693C30.5508 19.0379 30.56 14.3921 30.5323 9.74625C30.5323 9.44326 30.3015 9.01173 30.0523 8.86483C27.855 7.57023 25.6301 6.33073 23.4052 5.07286C23.3868 5.06368 23.3498 5.07286 23.2483 5.07286C23.2483 5.24731 23.2483 5.43094 23.2483 5.60539C23.2483 10.1778 23.239 14.741 23.2575 19.3134C23.2575 19.7449 23.1006 19.9469 22.7498 20.1397C18.66 22.4535 14.5794 24.7764 10.4989 27.0993C10.4158 27.1452 10.3235 27.2095 10.1758 27.3105Z" fill="#132644"/>
+						</svg>
+						<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="">Blog</a>
+					</div>
+				</div>
+			</section>
 		</div>
+		<footer class="bg-rectangle97 pt-4 pb-8 md:pt-10">
+			<div class="container mx-auto">
+				<div class="md:px-5 lg:px-28">
+					<div class="md:flex xl:justify-between xl:px-14">
+						<div class="flex mb-6 md:min-w-max md:mr-22">
+							<svg class="w-8 h-8 text-rectangle102">
+								<use href="#logo"/>
+							</svg>
+							<p class="text-sm text-rectangle102 leading-6 opacity-75 ml-10">DappConnect <br> Empower your dApp with <br> decentralized communication</p>
+						</div>
+						<div class="flex flex-wrap justify-between md:w-full xl:max-w-xl">
+							<div class="text-rectangle102 w-1/2 sm:w-auto md:w-24">
+								<h3 class="text-sm leading-6 mb-5">Developers</h3>
+								<ul>
+									<li class="mb-3.5"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Quick Starts</a></li>
+									<li class="mb-3.5"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Docs</a></li>
+									<li><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Guides</a></li>
+								</ul>
+							</div>
+							<div class="text-rectangle102 w-1/2 sm:w-auto md:w-24 sm:order-3 xl:w-auto">
+								<h3 class="text-sm leading-6 mb-5">Connect</h3>
+								<ul class="xl:grid xl:grid-cols-2 xl:gap-x-16">
+									<li class="mb-3.5 xl:order-1"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Twitter</a></li>
+									<li class="mb-3.5 xl:order-3"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Discord</a></li>
+									<li class="mb-3.5 xl:order-5"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Github</a></li>
+									<li class="mb-3.5 xl:order-2"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Forum</a></li>
+									<li class="xl:order-4"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Blog</a></li>
+								</ul>
+							</div>
+							<div class="text-rectangle102 w-1/2 -mt-10 sm:w-auto md:w-24 sm:mt-0">
+								<h3 class="text-sm leading-6 mb-5">About us</h3>
+								<ul>
+									<li class="mb-3.5"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">About</a></li>
+									<li><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Careers</a></li>
+								</ul>
+							</div>
+						</div>
+					</div>
+					<div class="flex items-center justify-center mt-14 md:w-full md:justify-start md:-mt-6 xl:mt-4 xl:pl-32">
+						<p class="text-sm text-rectangle102 opacity-75 leading-6">Part of the Status Network</p>
+						<svg class="ml-4" width="24" height="25" viewBox="0 0 24 25" fill="none">
+							<path d="M12.062 11.9736C12.6672 12.0362 13.272 12.0988 14.0159 12.0576C16.0308 11.9458 17.2515 10.9155 17.1648 9.37564C17.0764 7.80878 15.4526 6.84364 13.8279 6.93407C11.1799 7.08064 9.23248 9.39664 9.01356 12.0426C9.37327 11.9591 9.75185 11.9085 10.1086 11.8888C10.8524 11.8476 11.4572 11.9102 12.062 11.9732V11.9736ZM6.87167 15.3988C6.95494 16.8349 8.49333 17.7199 10.0326 17.6368C12.5419 17.5022 14.3863 15.3795 14.5937 12.9538C14.2528 13.0309 13.8944 13.0768 13.5562 13.0952C12.8518 13.1329 12.2788 13.0751 11.7053 13.0181C11.1323 12.9602 10.5593 12.9028 9.85444 12.9409C7.94562 13.0434 6.78968 13.9875 6.87124 15.3992L6.87167 15.3988Z" fill="white"/>
+						</svg>
+					</div>
+				</div>
+			</div>
+		</footer>
 
 		<script src="./src/main.js"></script>
 	</body>
diff --git a/src/styles.css b/src/styles.css
index 531513a..624be57 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -22,4 +22,4 @@
 
 .body-noScroll {
     @apply overflow-hidden
-}
\ No newline at end of file
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 0ab4f77..f5afd5b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -52,19 +52,25 @@ module.exports = {
 			},
 			gap: theme => ({
 				'22': '5.5rem',
+				'26': '6.875rem',
 			}),
 			height: theme => ({
+				'17': '4.188rem',
 				'58': '14.5rem',
 			}),
 			width: theme => ({
+				'17': '4.188rem',
 				'22': '5.5rem',
 			}),
 			maxWidth: theme => ({
 				'31': '31rem',
+				'32.5': '32.5rem',
 				'code': '38.375rem'
 			}),
 			padding: theme => ({
 				'13': '3.125rem',
+				'15': '3.75rem',
+				'18': '4.5rem',
 				'22': '5.5rem',
 				'25': '6.25rem',
 				'26': '6.5rem',
@@ -73,6 +79,7 @@ module.exports = {
 			margin: theme => ({
 				'15': '3.75rem',
 				'18': '4.5rem',
+				'22': '5.5rem',
 				'25': '6.25rem',
 				'26': '6.5rem',
 			}),