diff --git a/public/css/app.css b/public/css/app.css
index da4b6bc..b412b72 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -12527,54 +12527,76 @@ label {
   color: #B1B1B1;
 }
 
-.container-border {
-  border-top: 2px solid gray;
-  padding-top: 20px;
-}
-
 .navbar {
   margin-bottom: 0;
   border-radius: 0;
-  background-color: #E5F6E3 !important;
+  background-color: #EAEEFF !important;
   border: 0;
-  border-bottom: 1px solid #F6F6F6;
-  padding: 30px 0;
+  padding: 10px 0;
+}
+.navbar .container {
+  max-width: 1192px;
+}
+.navbar .navbar-brand {
+  width: 25%;
 }
 .navbar .button-border {
   border: 1px solid black;
   border-radius: 10px;
-  background-color: #fff;
   padding: 10px 25px;
 }
 .navbar .menu, .navbar .menu-items {
-  justify-content: flex-end;
+  width: 100%;
+  float: right;
+  display: flex;
 }
 .navbar .menu ul, .navbar .menu-items ul {
-  gap: 0;
-  align-items: end;
+  margin: auto;
+  float: right;
 }
 .navbar .menu ul li, .navbar .menu-items ul li {
-  width: fit-content !important;
+  width: fit-content;
   float: right;
 }
 .navbar .menu .nav-item, .navbar .menu-items .nav-item {
   line-height: 43px;
-  display: inline-block;
   text-align: right;
-  padding: 0 10px;
-  border-left: 1px solid black;
+  padding: 0 20px;
 }
 .navbar .menu .nav-link, .navbar .menu-items .nav-link {
-  color: black;
+  color: #282222;
   padding: 0;
 }
 .navbar .menu a, .navbar .menu-items a {
   display: flex;
-  font-size: 18px;
-  font-weight: 700;
+  font-size: 16px;
+  font-weight: 600;
   float: right;
 }
+.navbar .menu-right {
+  width: 25%;
+  padding-top: 15px;
+}
 @media (max-width: 991px) {
+  .navbar .menu-right {
+    width: 100%;
+    margin-top: 10px;
+  }
+}
+.navbar .menu-right ul {
+  display: flex;
+  float: right;
+  list-style-type: none;
+}
+.navbar .menu-right a {
+  font-size: 16px;
+  font-weight: 600;
+  font-family: "Raleway", sans-serif;
+}
+@media (max-width: 991px) {
+  .navbar {
+    padding: 10px 0;
+  }
   .navbar .menu {
     display: none;
   }
@@ -12620,39 +12642,6 @@ label {
   padding-top: 80px;
   padding-bottom: 50px;
 }
-.navbar .app-footer {
-  padding: 60px;
-  background: #fff;
-}
-.navbar .app-footer .title {
-  margin-bottom: 30px;
-}
-.navbar .app-footer .container {
-  max-width: 1540px;
-  border-top: 2px solid gray !important;
-}
-.navbar .app-footer p {
-  margin-bottom: 0;
-  font-size: 14px;
-}
-.navbar .app-footer h2, .navbar .app-footer .h2 {
-  font-weight: 700;
-  font-family: "Space Grotesk", sans-serif;
-  font-size: 24px;
-}
-.navbar .app-footer .margin-small {
-  margin-bottom: 10px;
-}
-.navbar .app-footer .margin-large {
-  margin-bottom: 30px;
-}
-.navbar .app-footer .enjoy {
-  margin-bottom: 5px;
-  font-size: 20px;
-  color: #3B3B3B;
-  font-family: "Montserrat", sans-serif;
-  font-weight: 200;
-}
 .navbar .alert ul {
   display: block;
   margin: 0;
@@ -12696,14 +12685,43 @@ label {
   }
   .navbar .navbar-brand img {
     display: block;
-    width: 230px;
-    height: 40px;
+    width: 192px;
+    height: 30px;
   }
   .navbar .navbar-brand .company {
     width: 170px;
   }
 }
 
+.app-footer {
+  padding: 70px 0 50px;
+  background: #E8F0FF;
+}
+.app-footer .title {
+  margin-bottom: 30px;
+}
+.app-footer .container {
+  max-width: 1192px;
+}
+.app-footer h2, .app-footer .h2 {
+  font-weight: 700;
+  font-family: "Space Grotesk", sans-serif;
+  font-size: 24px;
+}
+.app-footer .margin-small {
+  margin-bottom: 5px;
+}
+.app-footer .margin-large {
+  margin-bottom: 30px;
+}
+.app-footer .enjoy {
+  margin-bottom: 5px;
+  font-size: 20px;
+  color: #3B3B3B;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 200;
+}
+
 .footer-item-support {
   padding-top: 2px;
 }
@@ -12728,28 +12746,42 @@ label {
   text-decoration: underline;
 }
 
-.footer-headline {
+.footer-text {
   margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
 }
-.footer-headline a {
+.footer-text a {
   color: #4B67F9;
   text-decoration: none;
 }
-.footer-headline a:hover {
+.footer-text a:hover {
   color: #4B67F9;
   text-decoration: underline;
 }
 
-.dk_widget {
+.footer-item {
   font-family: Barlow, serif;
   padding: 20px 10px;
 }
 
 .footer-item-title {
-  font-weight: bold !important;
+  font-weight: 700;
   font-family: "Barlow", sans-serif;
-  font-size: 18px;
   margin-bottom: 10px;
+  color: #2943CA;
+}
+
+.footer-copyright {
+  border-top: 1px solid rgba(142, 142, 142, 0.4);
+  background: #E8F0FF;
+  color: #A6A6A6;
+  font-family: "Space Grotesk", sans-serif;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 22.5px;
+  padding: 30px 0;
+  justify-content: center;
 }
 
 @media (max-width: 991px) {
@@ -12761,7 +12793,7 @@ label {
 .page-intro {
   position: relative;
   padding: 80px 0;
-  background: linear-gradient(180deg, #E5F6E3 0%, #FFFFFF 100%);
+  background: linear-gradient(180deg, #E7EAFF 0%, #FFFFFF 100%);
 }
 .page-intro h2, .page-intro .h2 {
   margin: 0 0 50px 0;
@@ -12807,9 +12839,12 @@ label {
   font-family: "Barlow", sans-serif;
   font-style: normal;
   font-weight: 400;
-  font-size: 24px;
-  line-height: 32px;
-  color: #000000;
+  font-size: 16px;
+  line-height: 140%;
+  color: #282222;
+  text-align: center;
+  width: 380px;
+  margin: 20px auto;
 }
 @media (max-width: 500px) {
   .home-intro .subtext {
@@ -12862,8 +12897,15 @@ label {
 }
 /** Home page **/
 .home-intro {
-  background: linear-gradient(180deg, #E5F6E3 0%, #FFFFFF 100%);
-  padding: 30px 0;
+  padding: 165px 0;
+  background-size: cover;
+  background-position: left top;
+  background-repeat: no-repeat;
+}
+@media (max-width: 991px) {
+  .home-intro {
+    padding: 20px 0;
+  }
 }
 @media (min-width: 1550px) {
   .home-intro .container {
@@ -12874,8 +12916,49 @@ label {
   width: 100%;
 }
 .home-intro .title {
-  padding-bottom: 30px;
   margin: auto;
+  width: 640px;
+}
+.home-intro .title .buttons {
+  display: flex;
+  gap: 15px;
+  justify-content: center;
+}
+@media (max-width: 991px) {
+  .home-intro .title .buttons {
+    display: block;
+  }
+}
+.home-intro .title .dark-button {
+  border-radius: 5px;
+  padding: 10px;
+  background: linear-gradient(90deg, #221F1F 0%, #4B67F9 100%);
+}
+@media (max-width: 991px) {
+  .home-intro .title .dark-button {
+    margin-bottom: 10px;
+    text-align: center;
+  }
+}
+.home-intro .title .dark-button a {
+  color: white;
+  font-weight: 700;
+  text-decoration: none;
+}
+.home-intro .title .light-button {
+  border-radius: 5px;
+  padding: 10px;
+  border: 1px solid black;
+}
+@media (max-width: 991px) {
+  .home-intro .title .light-button {
+    text-align: center;
+  }
+}
+.home-intro .title .light-button a {
+  color: black;
+  font-weight: 700;
+  text-decoration: none;
 }
 .home-intro .logo-third-party {
   display: flex;
@@ -12883,8 +12966,8 @@ label {
   margin-top: 30px;
 }
 .home-intro .laminas {
-  width: 200px;
-  margin-top: 20px;
+  width: 175px;
+  margin-top: 10px;
 }
 @media (max-width: 768px) {
   .home-intro .laminas {
@@ -12893,22 +12976,21 @@ label {
   }
 }
 .home-intro .mezzio {
-  width: 70px;
-  height: 60px;
+  width: 65px;
+  height: 80px;
+  padding: 10px 0;
 }
 @media (max-width: 768px) {
   .home-intro .mezzio {
-    width: 35px;
-    height: 27px;
+    width: 30px;
+    height: 50px;
   }
 }
 .home-intro .mezzio-title {
   color: #013755;
   font-family: "Barlow", sans-serif;
   font-weight: 400;
-  font-size: 55px;
-  line-height: 55px;
-  padding-left: 10px;
+  font-size: 40px;
 }
 @media (max-width: 768px) {
   .home-intro .mezzio-title {
@@ -12921,10 +13003,10 @@ label {
 .home-intro h1, .home-intro .h1 {
   font-family: "Space Grotesk", sans-serif;
   font-style: normal;
-  font-weight: 700;
-  font-size: 70px;
-  line-height: 95px;
-  color: #000000;
+  font-weight: 500;
+  font-size: 52px;
+  color: #232323;
+  text-align: center;
 }
 
 .home-intro .arrow_down {
@@ -12943,12 +13025,6 @@ label {
   height: 103px;
 }
 
-@media (max-width: 1200px) {
-  .home-intro h1, .home-intro .h1 {
-    font-size: 60px;
-    line-height: 75px;
-  }
-}
 @media (max-width: 768px) {
   .home-intro h1, .home-intro .h1 {
     font-size: 30px;
@@ -12958,20 +13034,39 @@ label {
     width: 100%;
   }
 }
+@media (max-width: 991px) {
+  .content-background {
+    background-position: left top;
+    background-size: contain;
+  }
+}
 .home-list {
-  padding-top: 50px;
-  padding-bottom: 70px;
+  padding-bottom: 100px;
+}
+@media (max-width: 991px) {
+  .home-list {
+    padding-bottom: 10px;
+  }
 }
 .home-list p {
   color: #00110f;
+  justify-content: center;
+  display: flex;
 }
 
+.boxes .item {
+  width: 50%;
+}
+@media (max-width: 991px) {
+  .boxes .item {
+    width: 100%;
+  }
+}
 .boxes .box {
   border: 1px solid black;
   border-radius: 20px;
-  padding: 40px 60px;
-  box-shadow: 10px 10px 0 0 rgba(13, 95, 255, 0.3019607843);
-  background-color: #fff;
+  padding: 50px;
+  background: rgba(255, 255, 255, 0.6901960784);
 }
 @media (max-width: 1199px) {
   .boxes .box {
@@ -13010,7 +13105,7 @@ label {
   text-decoration: none;
 }
 .boxes .box-left {
-  margin: 20px 15px 60px 0;
+  margin: 20px 25px 60px 0;
 }
 @media (max-width: 767px) {
   .boxes .box-left {
@@ -13018,11 +13113,11 @@ label {
   }
 }
 .boxes .box-right {
-  margin: 20px 0 60px 15px;
+  margin: 20px 0 60px 25px;
 }
 @media (max-width: 767px) {
   .boxes .box-right {
-    margin: 20px 0 60px 0;
+    margin: 0 0 60px 0;
   }
 }
 .boxes .top-text {
@@ -13032,16 +13127,18 @@ label {
   text-transform: uppercase;
   line-height: 12px;
   letter-spacing: 0.15em;
-  color: #C71F38;
+  color: #4B67F9;
   margin: 0;
+  justify-content: left;
 }
 .boxes h4, .boxes .h4 {
   padding: 20px 0;
-  font-size: 24px;
+  font-size: 20px;
   font-family: "Space Grotesk", sans-serif;
   font-weight: 700;
   color: #00110f;
   margin: 0;
+  text-align: left;
 }
 @media (max-width: 1199px) {
   .boxes h4, .boxes .h4 {
@@ -13055,17 +13152,33 @@ label {
 }
 .boxes p {
   margin: auto;
+  font-size: 16px;
+  font-weight: 400;
+  text-align: left;
 }
 .boxes .description {
-  display: flex;
-  margin-bottom: 20px;
+  margin: 0 20px 50px;
+  width: 33%;
+}
+@media (max-width: 991px) {
+  .boxes .description {
+    margin: 20px 0;
+    width: 100%;
+  }
+}
+.boxes .description p {
+  display: block;
+}
+.boxes .description p .script {
+  font-style: italic;
 }
 .boxes .main-text {
   font-family: "Space Grotesk", sans-serif;
-  font-size: 42px;
+  font-size: 36px;
   font-weight: 400;
   line-height: 48px;
-  padding-right: 130px;
+  margin: 40px auto 70px;
+  width: 1000px;
 }
 @media (max-width: 1199px) {
   .boxes .main-text {
@@ -13082,7 +13195,7 @@ label {
 }
 .boxes .main-text span {
   font-weight: 700;
-  color: #bd1f3d;
+  color: #4B67F9;
 }
 .boxes .icon {
   background-color: #E4EDFF;
@@ -13099,6 +13212,7 @@ label {
     height: 75px;
     width: 75px;
     padding: 13px;
+    margin-bottom: 10px;
   }
   .boxes .icon img {
     height: 47px;
@@ -13115,44 +13229,64 @@ label {
   }
 }
 .boxes .bar-first {
-  font-size: 18px;
+  font-size: 16px;
   font-family: "Barlow", sans-serif;
   font-weight: 600;
   text-transform: uppercase;
   margin: auto;
   width: 33%;
+  text-align: left;
 }
 @media (max-width: 1199px) {
   .boxes .bar-first {
     font-size: 14px;
   }
 }
-@media (max-width: 500px) {
+@media (max-width: 767px) {
   .boxes .bar-first {
     font-size: 12px;
+    width: 100%;
+    margin-bottom: 10px;
   }
 }
 .boxes .align {
   margin: auto 5px;
-  width: 33%;
+  width: 32%;
+  white-space: nowrap;
+}
+@media (max-width: 767px) {
+  .boxes .align {
+    width: 100%;
+    margin-bottom: 10px;
+  }
+}
+@media (max-width: 500px) {
+  .boxes .align {
+    width: 100%;
+    margin-bottom: 10px;
+  }
 }
 .boxes .box-bar {
   margin: 20px 15px 20px 10px;
+  padding: 20px 40px;
   display: flex;
   justify-content: space-between;
+  height: 100px;
 }
 @media (max-width: 767px) {
   .boxes .box-bar {
     margin: 10px auto;
     width: 95%;
+    display: block;
+    height: initial;
   }
 }
 .boxes .box-header {
   margin: 20px 15px 10px 10px;
   display: flex;
   justify-content: space-between;
-  padding: 0 60px;
-  font-size: 24px;
+  padding: 0 100px 0 55px;
+  font-size: 18px;
   font-weight: 700;
   font-family: "Space Grotesk", sans-serif;
 }
@@ -13163,21 +13297,34 @@ label {
 }
 @media (max-width: 991px) {
   .boxes .box-header {
-    font-size: 18px;
-    margin: 10px auto;
+    margin: 0 auto;
     width: 95%;
   }
 }
-@media (max-width: 500px) {
+@media (max-width: 767px) {
   .boxes .box-header {
     font-size: 14px;
+    display: block;
   }
 }
+.boxes .box-header .red-item {
+  color: #C71F38;
+}
+.boxes .box-header .blue-item {
+  color: #4B67F9;
+}
 .boxes .bar-grey {
-  height: 32px;
+  height: 20px;
   width: 150px;
   border-radius: 16px;
-  background-color: #F0F0F0;
+  background-color: #D9D9D9;
+}
+@media (max-width: 1400px) {
+  .boxes .bar-grey {
+    height: 20px;
+    width: 140px;
+    border-radius: 10px;
+  }
 }
 @media (max-width: 1199px) {
   .boxes .bar-grey {
@@ -13188,29 +13335,22 @@ label {
 }
 @media (max-width: 991px) {
   .boxes .bar-grey {
-    height: 32px;
+    height: 20px;
     width: 150px;
     border-radius: 16px;
   }
 }
 @media (max-width: 767px) {
-  .boxes .bar-grey {
-    height: 20px;
-    width: 100px;
-    border-radius: 10px;
-  }
-}
-@media (max-width: 500px) {
   .boxes .bar-grey {
     height: 15px;
-    width: 80px;
+    width: 90%;
     border-radius: 8px;
   }
 }
 .boxes .bar-orange {
-  height: 32px;
+  height: 20px;
   border-radius: 16px;
-  background-color: #F05700;
+  background-color: #C71F38;
 }
 @media (max-width: 1199px) {
   .boxes .bar-orange {
@@ -13220,26 +13360,20 @@ label {
 }
 @media (max-width: 991px) {
   .boxes .bar-orange {
-    height: 32px;
+    height: 20px;
     border-radius: 16px;
   }
 }
 @media (max-width: 767px) {
-  .boxes .bar-orange {
-    height: 20px;
-    border-radius: 10px;
-  }
-}
-@media (max-width: 500px) {
   .boxes .bar-orange {
     height: 15px;
     border-radius: 8px;
   }
 }
 .boxes .bar-green {
-  height: 32px;
+  height: 20px;
   border-radius: 16px;
-  background-color: #54A957;
+  background-color: #4B67F9;
 }
 @media (max-width: 1199px) {
   .boxes .bar-green {
@@ -13249,17 +13383,11 @@ label {
 }
 @media (max-width: 991px) {
   .boxes .bar-green {
-    height: 32px;
+    height: 20px;
     border-radius: 16px;
   }
 }
 @media (max-width: 767px) {
-  .boxes .bar-green {
-    height: 20px;
-    border-radius: 10px;
-  }
-}
-@media (max-width: 500px) {
   .boxes .bar-green {
     height: 15px;
     border-radius: 8px;
@@ -13280,12 +13408,7 @@ label {
 }
 @media (max-width: 767px) {
   .boxes .bar-25 {
-    width: 20px;
-  }
-}
-@media (max-width: 500px) {
-  .boxes .bar-25 {
-    width: 15px;
+    width: 25%;
   }
 }
 .boxes .bar-50 {
@@ -13303,12 +13426,7 @@ label {
 }
 @media (max-width: 767px) {
   .boxes .bar-50 {
-    width: 50px;
-  }
-}
-@media (max-width: 500px) {
-  .boxes .bar-50 {
-    width: 40px;
+    width: 50%;
   }
 }
 .boxes .bar-65 {
@@ -13326,12 +13444,7 @@ label {
 }
 @media (max-width: 767px) {
   .boxes .bar-65 {
-    width: 66px;
-  }
-}
-@media (max-width: 500px) {
-  .boxes .bar-65 {
-    width: 50px;
+    width: 65%;
   }
 }
 .boxes .bar-80 {
@@ -13349,12 +13462,7 @@ label {
 }
 @media (max-width: 767px) {
   .boxes .bar-80 {
-    width: 80px;
-  }
-}
-@media (max-width: 500px) {
-  .boxes .bar-80 {
-    width: 60px;
+    width: 80%;
   }
 }
 .boxes .bar-90 {
@@ -13372,12 +13480,7 @@ label {
 }
 @media (max-width: 767px) {
   .boxes .bar-90 {
-    width: 90px;
-  }
-}
-@media (max-width: 500px) {
-  .boxes .bar-90 {
-    width: 70px;
+    width: 90%;
   }
 }
 .boxes .bar-100 {
@@ -13395,12 +13498,7 @@ label {
 }
 @media (max-width: 767px) {
   .boxes .bar-100 {
-    width: 100px;
-  }
-}
-@media (max-width: 500px) {
-  .boxes .bar-100 {
-    width: 80px;
+    width: 100%;
   }
 }
 .boxes .bar-description {
@@ -13414,11 +13512,13 @@ label {
 }
 
 .home-list h2, .home-list .h2 {
-  margin: 50px 0;
+  margin: 50px 0 20px;
   font-weight: 700;
   color: #2C2C2C;
   font-family: "Space Grotesk", sans-serif;
   font-size: 42px;
+  justify-content: center;
+  display: flex;
 }
 
 .home-list h3 a, .home-list .h3 a {
@@ -13428,6 +13528,37 @@ label {
   font-weight: 200;
 }
 
+.home-list .boxes {
+  text-align: center;
+  margin: auto;
+}
+.home-list .boxes .content {
+  display: flex;
+  gap: 50px;
+}
+@media (max-width: 991px) {
+  .home-list .boxes .content {
+    display: block;
+  }
+}
+.home-list .boxes .content .item {
+  width: 25%;
+}
+@media (max-width: 991px) {
+  .home-list .boxes .content .item {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+}
+.home-list .boxes .offset {
+  margin-top: 40px;
+}
+@media (max-width: 991px) {
+  .home-list .boxes .offset {
+    margin-top: 0;
+  }
+}
+
 .home-list .card {
   border: none;
 }
@@ -13498,7 +13629,7 @@ label {
   .home-list h2, .home-list .h2,
   .home-list h2 a,
   .home-list .h2 a {
-    font-size: 36px;
+    font-size: 24px;
   }
 }
 @media (max-width: 767px) {
@@ -13565,7 +13696,7 @@ label {
 }
 
 .flow-graphs {
-  margin: 0 auto 100px;
+  margin: 0 auto 60px;
   padding-bottom: 0;
 }
 .flow-graphs .flow-container {
@@ -13577,11 +13708,12 @@ label {
   border: 1px solid #000;
   border-radius: 20px;
   color: #000;
+  background: rgba(255, 255, 255, 0.6901960784);
   font-family: "Space Grotesk", sans-serif;
   font-weight: 700;
   font-size: 18px;
   text-align: center;
-  line-height: 47px;
+  line-height: 48px;
 }
 .flow-graphs .arrow-down {
   height: 30px;
@@ -13592,31 +13724,32 @@ label {
   width: 50px;
 }
 .flow-graphs .black {
-  background-color: #000;
+  background-color: #4B67F9;
   color: #fff;
-  box-shadow: 10px 10px 0 0 rgba(159, 159, 159, 0.3019607843);
+  border: 1px solid #4B67F9;
 }
 .flow-graphs .white {
-  background-color: #fff;
-  box-shadow: 10px 10px 0 0 rgba(255, 138, 0, 0.3019607843);
+  box-shadow: 8px 8px 20px 0 rgba(255, 216, 170, 0.2);
+  border: 1px solid var(--Pink-stroke, rgba(222, 172, 172, 0.4));
 }
 .flow-graphs .blue {
-  background-color: #D9F3F8;
-  box-shadow: 10px 10px 0 0 rgba(3, 112, 133, 0.3019607843);
+  box-shadow: 8px 8px 20px 0 rgba(139, 185, 193, 0.2);
+  border: 1px solid var(--Color-blue-stroke, rgba(19, 110, 128, 0.2509803922));
 }
 .flow-graphs .purple {
-  background-color: #E2ECFF;
-  box-shadow: 10px 10px 0 0 rgba(0, 72, 212, 0.3019607843);
+  box-shadow: 8px 8px 20px 0 rgba(145, 166, 206, 0.3019607843);
+  border: 1px solid var(--ColorGreen-stroke, rgba(84, 169, 87, 0.4));
 }
 .flow-graphs .yellow {
-  background-color: #F9FFF0;
-  box-shadow: 10px 10px 0 0 rgba(27, 108, 7, 0.3019607843);
+  box-shadow: 8px 8px 20px 0 rgba(213, 255, 203, 0.3019607843);
+  border: 1px solid var(--Color-lilla-stroke, rgba(115, 122, 194, 0.4));
 }
 .flow-graphs .box-big {
   width: 1016px;
   height: 110px;
-  border: 1px solid #000;
+  border: 1px solid #8D8D8D;
   border-radius: 20px;
+  background: rgba(255, 255, 255, 0.6901960784);
   color: #000;
   font-family: "Space Grotesk", sans-serif;
   font-weight: 700;
@@ -13635,7 +13768,8 @@ label {
 }
 .flow-graphs .box-big .title {
   width: 460px;
-  padding: 20px;
+  padding: 16px;
+  line-height: 32px;
 }
 @media (max-width: 1199px) {
   .flow-graphs .box-big .title {
@@ -13657,11 +13791,11 @@ label {
 .flow-graphs .box-big .box-small {
   width: 245px;
   height: 64px;
-  border: 1px solid #000;
+  border: 1px solid #8D8D8D;
   border-radius: 20px;
   font-family: "Space Grotesk", sans-serif;
   font-weight: 700;
-  font-size: 12px;
+  font-size: 16px;
   line-height: 30px;
   background-color: #fff;
   margin: 0 20px 0 0;
@@ -13682,11 +13816,11 @@ label {
 .flow-graphs .box-big .box-small .button {
   width: 91px;
   height: 32px;
-  border: 1px solid #000;
   border-radius: 20px;
-  background-color: #CDE4CE;
+  background-color: #4B67F9;
+  color: white;
   text-align: center;
-  line-height: 28px;
+  line-height: 32px;
   margin-left: 39px;
 }
 .flow-graphs .gray-gradient {
diff --git a/public/images/app/bigK-bg.png b/public/images/app/bigK-bg.png
new file mode 100644
index 0000000..ab55218
Binary files /dev/null and b/public/images/app/bigK-bg.png differ
diff --git a/public/images/app/bigK.png b/public/images/app/bigK.png
new file mode 100644
index 0000000..054869d
Binary files /dev/null and b/public/images/app/bigK.png differ
diff --git a/public/images/app/favicon/android-chrome-192x192.png b/public/images/app/favicon/android-chrome-192x192.png
index 71bd055..ba679e0 100644
Binary files a/public/images/app/favicon/android-chrome-192x192.png and b/public/images/app/favicon/android-chrome-192x192.png differ
diff --git a/public/images/app/favicon/apple-touch-icon.png b/public/images/app/favicon/apple-touch-icon.png
index f448270..d2988d0 100644
Binary files a/public/images/app/favicon/apple-touch-icon.png and b/public/images/app/favicon/apple-touch-icon.png differ
diff --git a/public/images/app/favicon/favicon-16x16.png b/public/images/app/favicon/favicon-16x16.png
index ef098a2..c2879a9 100644
Binary files a/public/images/app/favicon/favicon-16x16.png and b/public/images/app/favicon/favicon-16x16.png differ
diff --git a/public/images/app/favicon/favicon-32x32.png b/public/images/app/favicon/favicon-32x32.png
index f6f96c1..cffd9db 100644
Binary files a/public/images/app/favicon/favicon-32x32.png and b/public/images/app/favicon/favicon-32x32.png differ
diff --git a/public/images/app/favicon/favicon.ico b/public/images/app/favicon/favicon.ico
index 93bb70e..bb1d402 100644
Binary files a/public/images/app/favicon/favicon.ico and b/public/images/app/favicon/favicon.ico differ
diff --git a/public/images/app/favicon/mstile-150x150.png b/public/images/app/favicon/mstile-150x150.png
index 196c42c..39d2c9f 100644
Binary files a/public/images/app/favicon/mstile-150x150.png and b/public/images/app/favicon/mstile-150x150.png differ
diff --git a/public/images/app/hero-background.png b/public/images/app/hero-background.png
new file mode 100644
index 0000000..6904207
Binary files /dev/null and b/public/images/app/hero-background.png differ
diff --git a/public/images/app/logo-blue.png b/public/images/app/logo-blue.png
new file mode 100644
index 0000000..8c5731c
Binary files /dev/null and b/public/images/app/logo-blue.png differ
diff --git a/public/images/app/twitter-card-api.png b/public/images/app/twitter-card-api.png
index bd244ac..9074167 100644
Binary files a/public/images/app/twitter-card-api.png and b/public/images/app/twitter-card-api.png differ
diff --git a/src/App/assets/images/favicon/android-chrome-192x192.png b/src/App/assets/images/favicon/android-chrome-192x192.png
index 71bd055..ba679e0 100644
Binary files a/src/App/assets/images/favicon/android-chrome-192x192.png and b/src/App/assets/images/favicon/android-chrome-192x192.png differ
diff --git a/src/App/assets/images/favicon/apple-touch-icon.png b/src/App/assets/images/favicon/apple-touch-icon.png
index f448270..d2988d0 100644
Binary files a/src/App/assets/images/favicon/apple-touch-icon.png and b/src/App/assets/images/favicon/apple-touch-icon.png differ
diff --git a/src/App/assets/images/favicon/favicon-16x16.png b/src/App/assets/images/favicon/favicon-16x16.png
index ef098a2..c2879a9 100644
Binary files a/src/App/assets/images/favicon/favicon-16x16.png and b/src/App/assets/images/favicon/favicon-16x16.png differ
diff --git a/src/App/assets/images/favicon/favicon-32x32.png b/src/App/assets/images/favicon/favicon-32x32.png
index f6f96c1..cffd9db 100644
Binary files a/src/App/assets/images/favicon/favicon-32x32.png and b/src/App/assets/images/favicon/favicon-32x32.png differ
diff --git a/src/App/assets/images/favicon/favicon.ico b/src/App/assets/images/favicon/favicon.ico
index 93bb70e..bb1d402 100644
Binary files a/src/App/assets/images/favicon/favicon.ico and b/src/App/assets/images/favicon/favicon.ico differ
diff --git a/src/App/assets/images/favicon/mstile-150x150.png b/src/App/assets/images/favicon/mstile-150x150.png
index 196c42c..39d2c9f 100644
Binary files a/src/App/assets/images/favicon/mstile-150x150.png and b/src/App/assets/images/favicon/mstile-150x150.png differ
diff --git a/src/App/assets/scss/components/_general.scss b/src/App/assets/scss/components/_general.scss
index f701fa2..4239714 100644
--- a/src/App/assets/scss/components/_general.scss
+++ b/src/App/assets/scss/components/_general.scss
@@ -80,62 +80,87 @@ label {
   color: #B1B1B1;
 }
 
-.container-border {
-  border-top: 2px solid  gray;
-  padding-top: 20px;
-}
-
 .navbar {
   margin-bottom: 0;
   border-radius: 0;
-  background-color: #E5F6E3 !important;
+  background-color: #EAEEFF !important;
   border: 0;
-  border-bottom: 1px solid #F6F6F6;
-  padding: 30px 0;
+  padding: 10px 0;
+
+  .container {
+    max-width: 1192px;
+  }
+
+  .navbar-brand {
+    width: 25%;
+  }
 
   .button-border {
     border: 1px solid black;
     border-radius: 10px;
-    background-color: #fff;
     padding: 10px 25px;
   }
 
   .menu, .menu-items {
-    justify-content: flex-end;
+    width: 100%;
+    float: right;
+    display: flex;
 
     ul {
-      gap: 0;
-      align-items: end;
+      margin: auto;
+      float: right;
 
       li {
-        width: fit-content !important;
+        width: fit-content;
         float: right;
       }
     }
 
     .nav-item {
       line-height: 43px;
-      display: inline-block;
       text-align: right;
-      padding: 0 10px;
-      border-left: 1px solid black;
+      padding: 0 20px;
     }
 
     .nav-link {
-      color: black;
+      color: #282222;
       padding: 0;
     }
 
     a {
       display: flex;
-      font-size: 18px;
-      font-weight: 700;
+      font-size: 16px;
+      font-weight: 600;
       float: right;
     }
 
   }
 
+  .menu-right {
+    width: 25%;
+    padding-top: 15px;
+
+    @media (max-width: 991px) {
+      width: 100%;
+      margin-top: 10px;
+    }
+
+    ul {
+      display: flex;
+      float: right;
+      list-style-type: none;
+    }
+
+    a {
+      font-size: 16px;
+      font-weight: 600;
+      font-family: 'Raleway', sans-serif;
+    }
+  }
+
   @media (max-width: 991px) {
+    padding: 10px 0;
+
     .menu {
       display: none;
     }
@@ -199,47 +224,6 @@ label {
     }
   }
 
-  .app-footer {
-    padding: 60px;
-    background: #fff;
-
-    .title {
-      margin-bottom: 30px;
-    }
-
-    .container {
-      max-width: 1540px;
-      border-top: 2px solid gray!important;
-    }
-
-    p {
-      margin-bottom: 0;
-      font-size: 14px;
-    }
-
-    h2 {
-      font-weight: 700;
-      font-family: 'Space Grotesk', sans-serif;
-      font-size: 24px;
-    }
-
-    .margin-small {
-      margin-bottom: 10px;
-    }
-
-    .margin-large {
-      margin-bottom: 30px;
-    }
-
-    .enjoy {
-      margin-bottom: 5px;
-      font-size: 20px;
-      color: #3B3B3B;
-      font-family: 'Montserrat', sans-serif;
-      font-weight: 200;
-    }
-  }
-
   .alert {
     ul {
       display: block;
@@ -292,8 +276,8 @@ label {
     .navbar-brand {
       img {
         display: block;
-        width: 230px;
-        height: 40px;
+        width: 192px;
+        height: 30px;
       }
 
       .company {
@@ -304,6 +288,41 @@ label {
   }
 }
 
+.app-footer {
+  padding: 70px 0 50px;
+  background: #E8F0FF;
+
+  .title {
+    margin-bottom: 30px;
+  }
+
+  .container {
+    max-width: 1192px;
+  }
+
+  h2 {
+    font-weight: 700;
+    font-family: 'Space Grotesk', sans-serif;
+    font-size: 24px;
+  }
+
+  .margin-small {
+    margin-bottom: 5px;
+  }
+
+  .margin-large {
+    margin-bottom: 30px;
+  }
+
+  .enjoy {
+    margin-bottom: 5px;
+    font-size: 20px;
+    color: #3B3B3B;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 200;
+  }
+}
+
 .footer-item-support {
   padding-top:2px;
   a {
@@ -333,8 +352,11 @@ label {
   }
 }
 
-.footer-headline{
+.footer-text{
   margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+
   a {
     color: #4B67F9;
     text-decoration: none;
@@ -346,16 +368,28 @@ label {
   }
 }
 
-.dk_widget {
+.footer-item {
   font-family: Barlow, serif;
   padding: 20px 10px;
 }
 
 .footer-item-title {
-  font-weight: bold!important;
+  font-weight: 700;
   font-family: 'Barlow', sans-serif;
-  font-size: 18px;
   margin-bottom: 10px;
+  color: #2943CA;
+}
+
+.footer-copyright {
+  border-top: 1px solid #8E8E8E66;
+  background: #E8F0FF;
+  color: #A6A6A6;
+  font-family: 'Space Grotesk', sans-serif;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 22.5px;
+  padding: 30px 0;
+  justify-content: center;
 }
 
 @media (max-width: 991px) {
diff --git a/src/App/assets/scss/components/_pages.scss b/src/App/assets/scss/components/_pages.scss
index c197191..de711c2 100644
--- a/src/App/assets/scss/components/_pages.scss
+++ b/src/App/assets/scss/components/_pages.scss
@@ -2,7 +2,7 @@
 .page-intro {
   position: relative;
   padding: 80px 0;
-  background: linear-gradient(180deg, #E5F6E3 0%, #FFFFFF 100%);
+  background: linear-gradient(180deg, #E7EAFF 0%, #FFFFFF 100%);
 
   h2 {
     margin: 0 0 50px 0;
@@ -49,9 +49,12 @@
   font-family: 'Barlow', sans-serif;
   font-style: normal;
   font-weight: 400;
-  font-size: 24px;
-  line-height: 32px;
-  color: #000000;
+  font-size: 16px;
+  line-height: 140%;
+  color: #282222;
+  text-align: center;
+  width: 380px;
+  margin: 20px auto;
 
   @media (max-width: 500px) {
     font-size: 17px;
@@ -109,8 +112,14 @@
 
 /** Home page **/
 .home-intro {
-  background: linear-gradient(180deg, #E5F6E3 0%, #FFFFFF 100%);
-  padding: 30px 0;
+  padding: 165px 0;
+  background-size: cover;
+  background-position: left top;
+  background-repeat: no-repeat;
+
+  @media (max-width: 991px) {
+    padding: 20px 0;
+  }
 
   @media (min-width: 1550px) {
     .container {
@@ -123,8 +132,51 @@
   }
 
   .title {
-    padding-bottom: 30px;
     margin: auto;
+    width: 640px;
+
+    .buttons {
+      display: flex;
+      gap: 15px;
+      justify-content: center;
+
+      @media (max-width: 991px) {
+        display: block;
+      }
+    }
+
+    .dark-button {
+      border-radius: 5px;
+      padding: 10px;
+      background: linear-gradient(90deg, #221F1F 0%, #4B67F9 100%);
+
+      @media (max-width: 991px) {
+        margin-bottom: 10px;
+        text-align: center;
+      }
+
+      a {
+        color: white;
+        font-weight: 700;
+        text-decoration: none;
+      }
+    }
+
+    .light-button {
+      border-radius: 5px;
+      padding: 10px;
+      border: 1px solid black;
+
+      @media (max-width: 991px) {
+        text-align: center;
+      }
+
+      a {
+        color: black;
+        font-weight: 700;
+        text-decoration: none;
+      }
+    }
   }
 
   .logo-third-party {
@@ -134,8 +186,8 @@
   }
 
   .laminas {
-    width: 200px;
-    margin-top: 20px;
+    width: 175px;
+    margin-top: 10px;
 
     @media ( max-width: 768px) {
       width: 100px;
@@ -144,12 +196,13 @@
   }
 
   .mezzio {
-    width: 70px;
-    height: 60px;
+    width: 65px;
+    height: 80px;
+    padding: 10px 0;
 
     @media ( max-width: 768px) {
-      width: 35px;
-      height: 27px;
+      width: 30px;
+      height: 50px;
     }
   }
 
@@ -157,9 +210,7 @@
     color: #013755;
     font-family: "Barlow", sans-serif;
     font-weight: 400;
-    font-size: 55px;
-    line-height: 55px;
-    padding-left: 10px;
+    font-size: 40px;
 
     @media ( max-width: 768px) {
       font-size: 27px;
@@ -172,10 +223,10 @@
 .home-intro h1 {
   font-family: 'Space Grotesk', sans-serif;
   font-style: normal;
-  font-weight: 700;
-  font-size: 70px;
-  line-height: 95px;
-  color: #000000;
+  font-weight: 500;
+  font-size: 52px;
+  color: #232323;
+  text-align: center;
 }
 
 .home-intro .arrow_down {
@@ -194,13 +245,6 @@
   height: 103px;
 }
 
-@media ( max-width: 1200px) {
-  .home-intro h1 {
-    font-size: 60px;
-    line-height: 75px;
-  }
-}
-
 @media ( max-width: 768px) {
   .home-intro h1 {
     font-size: 30px;
@@ -212,23 +256,40 @@
   }
 }
 
+@media (max-width: 991px) {
+  .content-background {
+    background-position: left top;
+    background-size: contain;
+  }
+}
+
 .home-list {
-  padding-top: 50px;
-  padding-bottom: 70px;
-  //background: #FFFFFF;
+  padding-bottom: 100px;
+  @media (max-width: 991px) {
+    padding-bottom: 10px;
+  }
 
   p {
     color: #00110f;
+    justify-content: center;
+    display: flex;
   }
 }
 
 .boxes {
+  .item {
+    width: 50%;
+
+    @media (max-width: 991px) {
+      width: 100%;
+    }
+  }
+
   .box {
     border: 1px solid black;
     border-radius: 20px;
-    padding: 40px 60px;
-    box-shadow: 10px 10px 0 0 #0D5FFF4D;
-    background-color: #fff;
+    padding: 50px;
+    background: #FFFFFFB0;
 
     @media (max-width: 1199px) {
       padding: 20px 30px;
@@ -269,7 +330,7 @@
   }
 
   .box-left {
-    margin: 20px 15px 60px 0;
+    margin: 20px 25px 60px 0;
 
     @media ( max-width: 767px) {
       margin: 20px 0 60px 0;
@@ -277,10 +338,10 @@
   }
 
   .box-right {
-    margin: 20px 0 60px 15px;
+    margin: 20px 0 60px 25px;
 
     @media ( max-width: 767px) {
-      margin: 20px 0 60px 0;
+      margin: 0 0 60px 0;
     }
   }
 
@@ -291,17 +352,19 @@
     text-transform: uppercase;
     line-height: 12px;
     letter-spacing: 0.15em;
-    color: #C71F38;
+    color: #4B67F9;
     margin: 0;
+    justify-content: left;
   }
 
   h4, .h4 {
     padding: 20px 0;
-    font-size: 24px;
+    font-size: 20px;
     font-family: "Space Grotesk", sans-serif;
     font-weight: 700;
     color: #00110f;
     margin: 0;
+    text-align: left;
 
     @media ( max-width: 1199px) {
       font-size: 24px;
@@ -314,19 +377,36 @@
 
   p {
     margin: auto;
+    font-size: 16px;
+    font-weight: 400;
+    text-align: left;
   }
 
   .description {
-    display: flex;
-    margin-bottom: 20px;
+    margin: 0 20px 50px;
+    width: 33%;
+
+    @media (max-width: 991px) {
+      margin: 20px 0;
+      width: 100%;
+    }
+
+    p {
+      display: block;
+
+      .script {
+        font-style: italic;
+      }
+    }
   }
 
   .main-text {
     font-family: "Space Grotesk", sans-serif;
-    font-size: 42px;
+    font-size: 36px;
     font-weight: 400;
     line-height: 48px;
-    padding-right: 130px;
+    margin: 40px auto 70px;
+    width: 1000px;
 
     @media ( max-width: 1199px) {
       font-size: 30px;
@@ -341,7 +421,7 @@
 
     span {
       font-weight: 700;
-      color: #bd1f3d;
+      color: #4B67F9;
     }
   }
 
@@ -359,6 +439,7 @@
       height: 75px;
       width: 75px;
       padding: 13px;
+      margin-bottom: 10px;
 
       img {
         height: 47px;
@@ -377,35 +458,53 @@
   }
 
   .bar-first {
-    font-size: 18px;
+    font-size: 16px;
     font-family: 'Barlow', sans-serif;
     font-weight: 600;
     text-transform: uppercase;
     margin: auto;
     width: 33%;
+    text-align: left;
 
     @media (max-width: 1199px) {
       font-size: 14px;
     }
 
-    @media (max-width: 500px) {
+    @media (max-width: 767px) {
       font-size: 12px;
+      width: 100%;
+      margin-bottom: 10px;
     }
   }
 
   .align {
     margin: auto 5px;
-    width: 33%;
+    width: 32%;
+    white-space: nowrap;
+
+    @media (max-width: 767px) {
+      width: 100%;
+      margin-bottom: 10px;
+    }
+
+    @media (max-width: 500px) {
+      width: 100%;
+      margin-bottom: 10px;
+    }
   }
 
   .box-bar {
     margin: 20px 15px 20px 10px;
+    padding: 20px 40px;
     display: flex;
     justify-content: space-between;
+    height: 100px;
 
     @media (max-width: 767px) {
       margin: 10px auto;
       width: 95%;
+      display: block;
+      height: initial;
     }
   }
 
@@ -413,8 +512,8 @@
     margin: 20px 15px 10px 10px;
     display: flex;
     justify-content: space-between;
-    padding: 0 60px;
-    font-size: 24px;
+    padding: 0 100px 0 55px;
+    font-size: 18px;
     font-weight: 700;
     font-family: 'Space Grotesk', sans-serif;
 
@@ -423,21 +522,35 @@
     }
 
     @media (max-width: 991px) {
-      font-size: 18px;
-      margin: 10px auto;
+      margin: 0 auto;
       width: 95%;
     }
 
-    @media (max-width: 500px) {
+    @media (max-width: 767px) {
       font-size: 14px;
+      display: block;
+    }
+
+    .red-item {
+      color: #C71F38;
+    }
+
+    .blue-item {
+      color: #4B67F9;
     }
   }
 
   .bar-grey {
-    height: 32px;
+    height: 20px;
     width: 150px;
     border-radius: 16px;
-    background-color: #F0F0F0;
+    background-color: #D9D9D9;
+
+    @media (max-width: 1400px) {
+      height: 20px;
+      width: 140px;
+      border-radius: 10px;
+    }
 
     @media (max-width: 1199px) {
       height: 20px;
@@ -446,28 +559,22 @@
     }
 
     @media (max-width: 991px) {
-      height: 32px;
+      height: 20px;
       width: 150px;
       border-radius: 16px;
     }
 
     @media (max-width: 767px) {
-      height: 20px;
-      width: 100px;
-      border-radius: 10px;
-    }
-
-    @media (max-width: 500px) {
       height: 15px;
-      width: 80px;
+      width: 90%;
       border-radius: 8px;
     }
   }
 
   .bar-orange {
-    height: 32px;
+    height: 20px;
     border-radius: 16px;
-    background-color: #F05700;
+    background-color: #C71F38;
 
     @media (max-width: 1199px) {
       height: 20px;
@@ -475,25 +582,20 @@
     }
 
     @media (max-width: 991px) {
-      height: 32px;
+      height: 20px;
       border-radius: 16px;
     }
 
     @media (max-width: 767px) {
-      height: 20px;
-      border-radius: 10px;
-    }
-
-    @media (max-width: 500px) {
       height: 15px;
       border-radius: 8px;
     }
   }
 
   .bar-green {
-    height: 32px;
+    height: 20px;
     border-radius: 16px;
-    background-color: #54A957;
+    background-color: #4B67F9;
 
     @media (max-width: 1199px) {
       height: 20px;
@@ -501,16 +603,11 @@
     }
 
     @media (max-width: 991px) {
-      height: 32px;
+      height: 20px;
       border-radius: 16px;
     }
 
     @media (max-width: 767px) {
-      height: 20px;
-      border-radius: 10px;
-    }
-
-    @media (max-width: 500px) {
       height: 15px;
       border-radius: 8px;
     }
@@ -528,11 +625,7 @@
     }
 
     @media (max-width: 767px) {
-      width: 20px;
-    }
-
-    @media (max-width: 500px) {
-      width: 15px;
+      width: 25%;
     }
   }
 
@@ -548,11 +641,7 @@
     }
 
     @media (max-width: 767px) {
-      width: 50px;
-    }
-
-    @media (max-width: 500px) {
-      width: 40px;
+      width: 50%;
     }
   }
 
@@ -568,11 +657,7 @@
     }
 
     @media (max-width: 767px) {
-      width: 66px;
-    }
-
-    @media (max-width: 500px) {
-      width: 50px;
+      width: 65%;
     }
   }
 
@@ -588,11 +673,7 @@
     }
 
     @media (max-width: 767px) {
-      width: 80px;
-    }
-
-    @media (max-width: 500px) {
-      width: 60px;
+      width: 80%;
     }
   }
 
@@ -608,11 +689,7 @@
     }
 
     @media (max-width: 767px) {
-      width: 90px;
-    }
-
-    @media (max-width: 500px) {
-      width: 70px;
+      width: 90%;
     }
   }
 
@@ -628,11 +705,7 @@
     }
 
     @media (max-width: 767px) {
-      width: 100px;
-    }
-
-    @media (max-width: 500px) {
-      width: 80px;
+      width: 100%;
     }
   }
 
@@ -647,11 +720,13 @@
 }
 
 .home-list h2 {
-  margin: 50px 0;
+  margin: 50px 0 20px;
   font-weight: 700;
   color: #2C2C2C;
   font-family: 'Space Grotesk', sans-serif;
   font-size: 42px;
+  justify-content: center;
+  display: flex;
 }
 
 .home-list h3 a {
@@ -661,6 +736,37 @@
   font-weight: 200;
 }
 
+.home-list .boxes {
+  text-align: center;
+  margin: auto;
+
+  .content {
+    display: flex;
+    gap: 50px;
+
+    @media (max-width: 991px) {
+      display: block;
+    }
+
+    .item {
+      width: 25%;
+
+      @media (max-width: 991px) {
+        width: 100%;
+        margin-bottom: 20px;
+      }
+    }
+  }
+
+  .offset {
+    margin-top: 40px;
+
+    @media (max-width: 991px) {
+      margin-top: 0;
+    }
+  }
+}
+
 .home-list .card {
   border: none;
 }
@@ -732,7 +838,7 @@
 @media ( max-width: 1199px) {
   .home-list h2,
   .home-list h2 a {
-    font-size: 36px;
+    font-size: 24px;
   }
 }
 
@@ -812,7 +918,7 @@
 }
 
 .flow-graphs {
-  margin: 0 auto 100px;
+  margin: 0 auto 60px;
   padding-bottom: 0;
 
   .flow-container {
@@ -825,11 +931,12 @@
     border: 1px solid #000;
     border-radius: 20px;
     color: #000;
+    background: #FFFFFFB0;
     font-family: 'Space Grotesk', sans-serif;
     font-weight: 700;
     font-size: 18px;
     text-align: center;
-    line-height: 47px;
+    line-height: 48px;
   }
 
   .arrow-down {
@@ -843,36 +950,37 @@
   }
 
   .black {
-    background-color: #000;
+    background-color: #4B67F9;
     color: #fff;
-    box-shadow: 10px 10px 0 0 #9F9F9F4D;
+    border: 1px solid #4B67F9;
   }
 
   .white {
-    background-color: #fff;
-    box-shadow: 10px 10px 0 0 #FF8A004D;
+    box-shadow: 8px 8px 20px 0 #FFD8AA33;
+    border: 1px solid var(--Pink-stroke, #DEACAC66);
   }
 
   .blue {
-    background-color: #D9F3F8;
-    box-shadow: 10px 10px 0 0 #0370854D;
+    box-shadow: 8px 8px 20px 0 #8BB9C133;
+    border: 1px solid var(--Color-blue-stroke, #136E8040);
   }
 
   .purple {
-    background-color: #E2ECFF;
-    box-shadow: 10px 10px 0 0 #0048D44D;
+    box-shadow: 8px 8px 20px 0 #91A6CE4D;
+    border: 1px solid var(--ColorGreen-stroke, #54A95766);
   }
 
   .yellow {
-    background-color: #F9FFF0;
-    box-shadow: 10px 10px 0 0 #1B6C074D;
+    box-shadow: 8px 8px 20px 0 #D5FFCB4D;
+    border: 1px solid var(--Color-lilla-stroke, #737AC266);
   }
 
   .box-big {
     width: 1016px;
     height: 110px;
-    border: 1px solid #000;
+    border: 1px solid #8D8D8D;
     border-radius: 20px;
+    background: #FFFFFFB0;
     color: #000;
     font-family: 'Space Grotesk', sans-serif;
     font-weight: 700;
@@ -890,7 +998,8 @@
 
     .title {
       width: 460px;
-      padding: 20px;
+      padding: 16px;
+      line-height: 32px;
 
       @media ( max-width: 1199px) {
         width: 1016px;
@@ -914,11 +1023,11 @@
     .box-small {
       width: 245px;
       height: 64px;
-      border: 1px solid #000;
+      border: 1px solid #8D8D8D;
       border-radius: 20px;
       font-family: 'Space Grotesk', sans-serif;
       font-weight: 700;
-      font-size: 12px;
+      font-size: 16px;
       line-height: 30px;
       background-color: #fff;
       margin: 0 20px 0 0;
@@ -940,11 +1049,11 @@
       .button {
         width: 91px;
         height: 32px;
-        border: 1px solid #000;
         border-radius: 20px;
-        background-color: #CDE4CE;
+        background-color: #4B67F9;
+        color: white;
         text-align: center;
-        line-height: 28px;
+        line-height: 32px;
         margin-left: 39px;
       }
     }
diff --git a/src/App/templates/app/index.html.twig b/src/App/templates/app/index.html.twig
index 283a5c0..577aa26 100644
--- a/src/App/templates/app/index.html.twig
+++ b/src/App/templates/app/index.html.twig
@@ -5,27 +5,26 @@
 {% block page_title %}{% endblock %}
 
 {% block content %}
-    <div class="home-intro">
+    <div class="home-intro" style="background: top / cover no-repeat url('{{ asset('images/app/hero-background.png') }}'), linear-gradient(180deg, #E7EAFF 0%, #FFFFFF 100%);">
         <div class="container">
             <div class="row">
-                <div class="col-lg-6 title">
-                    <p class="welcome">Dotkernel API</p>
+                <div class="col-lg-12 title">
                     <h1>PHP skeleton app for building REST APIs using
-                        <img class="laminas" src="{{ asset('images/app/laminas-foundation-rgb.svg') }}"
-                             alt="Laminas Foundation">
                         <img class="mezzio" src="{{ asset('images/app/trademark-laminas-mezzio.svg') }}" alt="Mezzio">
                         <span class="mezzio-title">Mezzio</span>
+                        <img class="laminas" src="{{ asset('images/app/laminas-foundation-rgb.svg') }}"
+                             alt="Laminas Foundation">
                     </h1>
-                    <div class="row boxes">
-                        <div class="box-small box-left">
-                            <p class="subtext"><b>Dotkernel API</b> is an alternative for legacy <b>Laminas API
-                                    Tools</b> (formerly Apigility) applications</p>
-                            <div class="button-border">
+                    <div class="row">
+                        <p class="subtext"><b>Dotkernel API</b> is an alternative for legacy <b>Laminas API
+                                Tools</b> (formerly Apigility) applications</p>
+                        <div class="buttons">
+                            <div class="dark-button">
                                 <a target="_blank"
                                    href="https://www.dotkernel.com/dotkernel-api/dotkernel-api-versus-laminas-api-tools/">
                                     Comparison table</a>
                             </div>
-                            <div class="button-border">
+                            <div class="light-button">
                                 <a target="_blank"
                                    href="https://getlaminas.org/blog/2024-07-02-dotkernel-a-replacement-for-laminas-api-tools.html">
                                     Official Announcement</a>
@@ -33,633 +32,607 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-lg-6 banner">
-                    <img src="{{ asset('images/app/banner.svg') }}" alt="Dotkernel API">
-                </div>
             </div>
         </div>
     </div>
 
-    <div class="home-list" style="background-color: #fff">
-        <div class="container">
-            <div class="row boxes">
-                <div class="col-lg-6 col-sm-12 main-text">
-                    An opinionated framework-less tool aimed at intermediate-to-advanced level programmers <span>to
-                        start implementing REST APIs swiftly and efficiently.</span>
-                </div>
-                <div class="col-lg-3 col-md-6 col-sm-12">
-                    <div class="icon">
-                        <img src="{{ asset('images/app/icon/arming_countdown.svg') }}" alt="Fine-tuned security">
-                    </div>
-                    <h4>
-                        Fine-tuned security
-                    </h4>
-                    <p>
-                        Create users with varying levels of access to control what each user type can do with your REST
-                        API.
-                    </p>
-                </div>
-                <div class="col-lg-3 col-md-6 col-sm-12">
-                    <div class="icon">
-                        <img src="{{ asset('images/app/icon/live_help.svg') }}" alt="Long-term support">
-                    </div>
-                    <h4>
-                        Long-term support
-                    </h4>
-                    <p>
-                        The REST API is backed by the Dotkernel team to stay on top of the latest coding trends.
-                    </p>
-                </div>
-                <div class="col-lg-6 col-sm-12" style="height: 0">&nbsp;</div>
-                <div class="col-lg-3 col-md-6 col-sm-12">
-                    <div class="icon">
-                        <img src="{{ asset('images/app/icon/cycle.svg') }}" alt="Reusability">
-                    </div>
-                    <h4>
-                        Reusability
-                    </h4>
-                    <p>
-                        We follow the coding principles of KISS, YAGNI, DRY for clean, concise and repetition-free code.
-                    </p>
-                </div>
-                <div class="col-lg-3 col-md-6 col-sm-12">
-                    <div class="icon">
-                        <img src="{{ asset('images/app/icon/cadence.svg') }}" alt="Gradual learning curve">
-                    </div>
-                    <h4>
-                        Gradual learning curve
-                    </h4>
-                    <p>
-                        We have an ever-expanding documentation to help you with installation and usage. If you can't
-                        find a solution for your particular problem, feel free to drop us a line.
-                    </p>
+    <div class="content-background" style="background-image: url('{{ asset('images/app/bigK-bg.png') }}');background-repeat: repeat-y;background-position: center top;background-size: contain;">
+        <div class="home-list">
+            <div class="container">
+                <div class="row boxes">
+                    <div class="main-text">
+                        An opinionated framework-less tool aimed at intermediate-to-advanced level programmers <span>to
+                            start implementing REST APIs swiftly and efficiently.</span>
+                    </div>
+                    <div class="content">
+                        <div class="item">
+                            <div class="icon"><img src="{{ asset('images/app/icon/cadence.svg') }}" alt="Gradual learning curve"></div>
+                            <h4>Gradual learning curve</h4>
+                            <p>We have an ever-expanding documentation to help you with installation and usage. If you can't find a solution for your particular problem, feel free to drop us a line.</p>
+                        </div>
+                        <div class="item">
+                            <div class="icon"><img src="{{ asset('images/app/icon/arming_countdown.svg') }}" alt="Fine-tuned security"></div>
+                            <h4>Fine-tuned security</h4>
+                            <p>Create users with varying levels of access to control what each user type can do with your REST API.</p>
+                        </div>
+                        <div class="item">
+                            <div class="icon"><img src="{{ asset('images/app/icon/cycle.svg') }}" alt="Reusability"></div>
+                            <h4>Reusability</h4>
+                            <p>We follow the coding principles of KISS, YAGNI, DRY for clean, concise and repetition-free code.</p>
+                        </div>
+                        <div class="item">
+                            <div class="icon"><img src="{{ asset('images/app/icon/live_help.svg') }}" alt="Long-term support"></div>
+                            <h4>Long-term support</h4>
+                            <p>The REST API is backed by the Dotkernel team to stay on top of the latest coding trends.</p>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
 
-    <div class="home-list"
-         style="background: url('images/app/asterisk-green.svg') no-repeat right center;background-color: #fff">
-        <div class="container">
-            <div class="row boxes">
-                <div class="col-lg-6 col-md-6">
+        <div class="home-list">
+            <div class="container">
+                <div class="row boxes">
                     <h2 class="text-decoration-none">Packed with everything you need</h2>
-                    <div class="box box-left">
-                        <p class="top-text">
-                            Modern Technologies
-                        </p>
-                        <h4>
-                            Supports a Core submodule that can be used in multiple codebases for the same project
-                        </h4>
-                        <p>
-                            Do you need multiple codebases for the same project? You can expand the REST API to use a
-                            Core submodule that is also used by your frontend and admin platforms (also available from
-                            Dotkernel). This way you ensure there are no incompatibilities between your platforms. Any
-                            change is easily pushed to all of them to sync the latest updates.
-                        </p>
-                    </div>
-                    <div class="box box-left">
-                        <p class="top-text">
-                            Modern Technologies
-                        </p>
-                        <h4>
-                            Has an active team of experienced developers working on keeping the codebase up-to-date
-                        </h4>
-                        <p>
-                            We at Dotkernel have been working on our REST API for the past decade to bring you a stable,
-                            fast, reliable solution for your needs. We have been using this REST API for our own
-                            projects and have ironed out all the kinks for you. Follow our quick tutorial and you are
-                            set. Visit our documentation pages for more details.
-                        </p>
-                    </div>
-                </div>
-                <div class="col-lg-6 col-md-6">
-                    <div class="box box-right">
-                        <p class="top-text">
-                            Modern Technologies
-                        </p>
-                        <h4>
-                            Has support for the latest PHP version 8.3
-                        </h4>
-                        <p>
-                            PHP is a popular programming language with a dedicated community that regularly delivers
-                            enhancements and refinements. PHP 8.3 puts emphasis on better performance, clean code and
-                            contains bug fixes as well as new features. Dotkernel subscribes to all standards
-                            recommendations (PSR) and keeps the REST API up-to-date with the latest version in all
-                            included 3rd party libraries.
-                        </p>
-                    </div>
-                    <div class="box box-right">
-                        <p class="top-text">
-                            Modern Technologies
-                        </p>
-                        <h4>
-                            Has been and always will be open source
-                        </h4>
-                        <p>
-                            The Dotkernel team monitors the code regularly to check for bugs and apply improvements. We
-                            welcome all feedback regarding our REST API from developers in the global PHP community.
-                        </p>
+                    <div class="col-lg-6 col-md-6">
+                        <div class="box box-left">
+                            <p class="top-text">
+                                Modern Technologies
+                            </p>
+                            <h4>
+                                Supports a Core submodule that can be used in multiple codebases for the same project
+                            </h4>
+                            <p>
+                                Do you need multiple codebases for the same project? You can expand the REST API to use a
+                                Core submodule that is also used by your frontend and admin platforms (also available from
+                                Dotkernel). This way you ensure there are no incompatibilities between your platforms. Any
+                                change is easily pushed to all of them to sync the latest updates.
+                            </p>
+                        </div>
+                        <div class="box box-left">
+                            <p class="top-text">
+                                Modern Technologies
+                            </p>
+                            <h4>
+                                Has an active team of experienced developers working on keeping the codebase up-to-date
+                            </h4>
+                            <p>
+                                We at Dotkernel have been working on our REST API for the past decade to bring you a stable,
+                                fast, reliable solution for your needs. We have been using this REST API for our own
+                                projects and have ironed out all the kinks for you. Follow our quick tutorial and you are
+                                set. Visit our documentation pages for more details.
+                            </p>
+                        </div>
+                    </div>
+                    <div class="col-lg-6 col-md-6 offset">
+                        <div class="box box-right">
+                            <p class="top-text">
+                                Modern Technologies
+                            </p>
+                            <h4>
+                                Has support for the latest PHP version 8.3
+                            </h4>
+                            <p>
+                                PHP is a popular programming language with a dedicated community that regularly delivers
+                                enhancements and refinements. PHP 8.3 puts emphasis on better performance, clean code and
+                                contains bug fixes as well as new features. Dotkernel subscribes to all standards
+                                recommendations (PSR) and keeps the REST API up-to-date with the latest version in all
+                                included 3rd party libraries.
+                            </p>
+                        </div>
+                        <div class="box box-right">
+                            <p class="top-text">
+                                Modern Technologies
+                            </p>
+                            <h4>
+                                Has been and always will be open source
+                            </h4>
+                            <p>
+                                The Dotkernel team monitors the code regularly to check for bugs and apply improvements. We
+                                welcome all feedback regarding our REST API from developers in the global PHP community.
+                            </p>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
 
-    <div class="home-list"
-         style="background: url('images/app/comparison-green.svg') no-repeat left center;background-color: #fff">
-        <div class="container">
-            <div class="row boxes">
-                <h2 class="col-lg-6 col-sm-12">
-                    Key Features
-                </h2>
-                <div class="col-lg-6 col-md-6 col-sm-12">
-                    <div class="description">
-                        <div class="icon"><img src="{{ asset('images/app/icon/notepad.svg') }}" alt="RESTful API"></div>
-                        <p>It’s a RESTful API, meaning it conforms to the constraints of representational state transfer
-                            (REST) architectural style.</p>
-                    </div>
-                    <div class="description">
-                        <div class="icon"><img src="{{ asset('images/app/icon/user1.svg') }}" alt="OAuth2 Secured">
+        <div class="home-list">
+            <div class="container">
+                <div class="row boxes">
+                    <h2>
+                        Key Features
+                    </h2>
+                    <div class="content">
+                        <div class="description">
+                            <div class="icon"><img src="{{ asset('images/app/icon/notepad.svg') }}" alt="RESTful API"></div>
+                            <p>It’s a RESTful API, meaning it conforms to the constraints of representational state transfer (REST) architectural style.</p>
                         </div>
-                        <p>It’s secured with OAuth2, a standard designed to allow the REST API to access resources on
-                            behalf of a user.</p>
-                    </div>
-                    <div class="description">
-                        <div class="icon"><img src="{{ asset('images/app/icon/jump.svg') }}" alt="Postman Integration">
+                        <div class="description">
+                            <div class="icon"><img src="{{ asset('images/app/icon/user1.svg') }}" alt="OAuth2 Secured"></div>
+                            <p>It’s secured with OAuth2, a standard designed to allow the REST API to access resources on behalf of a user.</p>
+                        </div>
+                        <div class="description">
+                            <div class="icon"><img src="{{ asset('images/app/icon/jump.svg') }}" alt="Postman Integration"></div>
+                            <p>It has integration with Postman, an API platform that simplifies each step of the REST API development lifecycle.</p>
                         </div>
-                        <p>It has integration with Postman, an API platform that simplifies each step of the REST API
-                            development lifecycle.</p>
-                    </div>
-                    <div class="description">
-                        <div class="icon"><img src="{{ asset('images/app/icon/migrate.svg') }}"
-                                               alt="Generate Database Migrations"></div>
-                        <p>You can generate and run database migrations easily for fast deployment.</p>
                     </div>
-                    <div class="description">
-                        <div class="icon"><img src="{{ asset('images/app/icon/integration.svg') }}"
-                                               alt="List Endpoints"></div>
-                        <p>You can quickly list all endpoints for a global review of the REST API with <span
-                                    class="script">php ./bin/cli.php route:list</span></p>
+                    <div class="content">
+                        <div class="description">
+                            <div class="icon"><img src="{{ asset('images/app/icon/migrate.svg') }}" alt="Generate Database Migrations"></div>
+                            <p>You can generate and run database migrations easily for fast deployment.</p>
+                        </div>
+                        <div class="description">
+                            <div class="icon"><img src="{{ asset('images/app/icon/integration.svg') }}" alt="List Endpoints"></div>
+                            <p>You can quickly list all endpoints for a global review of the REST API with <span class="script">php ./bin/cli.php route:list</span></p>
+                        </div>
+                        <div class="description">
+    {#                        <div class="icon">&nbsp;</div>#}
+                            <p>&nbsp;</p>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
 
-    <div class="home-list"
-         style="background: url('images/app/hashtag-green.svg') no-repeat right center;background-color: #fff">
-        <div class="container">
-            <div class="row">
-                <h2>The best there is at what we do</h2>
-            </div>
-            <div class="row boxes">
-                <div class="col-lg-7 col-md-12 col-sm-12 box-header">
-                    <div class="col-lg-4 col-md-4 col-sm-4 align">&nbsp;</div>
-                    <div class="col-lg-4 col-md-4 col-sm-4 align">
-                    </div>
-                    <div class="col-lg-4 col-md-4 col-sm-4 align">
-                        Dotkernel
+        <div class="home-list">
+            <div class="container">
+                <div class="row">
+                    <h2>The best there is at what we do</h2>
+                </div>
+                <div class="row boxes">
+                    <div class="col-lg-6 col-md-12 col-sm-12 box-header">
+                        <div class="col-lg-4 col-md-4 col-sm-4 align">&nbsp;</div>
+                        <div class="col-lg-4 col-md-4 col-sm-4 align red-item" style="color: #C71F38;">The competition</div>
+                        <div class="col-lg-4 col-md-4 col-sm-4 align blue-item" style="color: #4B67F9;">Dotkernel</div>
                     </div>
                 </div>
-            </div>
-            <div class="row boxes">
-                <div class="col-lg-7 col-md-12 col-sm-12 box box-bar">
-                    <div class="col-lg-4 col-md-4 col-sm-4 bar-first">API First</div>
-                    <div class="col-lg-4 col-md-4 col-sm-4 align">
-                        <div class="bar-grey">
-                            <div class="bar-orange bar-50">&nbsp;</div>
+                <div class="row boxes">
+                    <div class="item">
+                        <div class="box box-bar">
+                            <div class="col-lg-4 col-md-4 col-sm-4 bar-first">PHP Standardization</div>
+                            <div class="col-lg-4 col-md-4 col-sm-4 align">
+                                <div class="bar-grey">
+                                    <div class="bar-orange bar-25">&nbsp;</div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4 col-md-4 col-sm-4 align">
+                                <div class="bar-grey">
+                                    <div class="bar-green bar-100">&nbsp;</div>
+                                </div>
+                            </div>
                         </div>
-                    </div>
-                    <div class="col-lg-4 col-md-4 col-sm-4 align">
-                        <div class="col-lg-4 bar-grey">
-                            <div class="bar-green bar-100">&nbsp;</div>
+                        <div class="bar-description">
+                            <p>Dotkernel API is a collection of PSR-7 Middleware applications that implements these standards:
+                                PSR-3, PSR-4, PSR-11 and PSR-15.
+                                They are outlined by the PHP Framework Interop Group that aims to provide standardization of
+                                programming concepts in PHP.</p>
                         </div>
                     </div>
-                </div>
-                <div class="col-lg-4 col-md-12 col-sm-12 bar-description">
-                    <p>Dotkernel API is API-first, so you don’t need to install additional packages for e.g. token
-                        authentication.</p>
-                </div>
-                <div class="col-lg-7 col-md-12 col-sm-12 box box-bar">
-                    <div class="col-lg-4 col-md-4 col-sm-4 bar-first">Code Control</div>
-                    <div class="col-lg-4 col-md-4 col-sm-4 align">
-                        <div class="bar-grey">
-                            <div class="bar-orange bar-65">&nbsp;</div>
+                    <div class="item">
+                        <div class="box box-bar">
+                            <div class="col-lg-4 col-md-4 col-sm-4 bar-first">API First</div>
+                            <div class="col-lg-4 col-md-4 col-sm-4 align">
+                                <div class="bar-grey">
+                                    <div class="bar-orange bar-50">&nbsp;</div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4 col-md-4 col-sm-4 align">
+                                <div class="col-lg-4 bar-grey">
+                                    <div class="bar-green bar-100">&nbsp;</div>
+                                </div>
+                            </div>
                         </div>
-                    </div>
-                    <div class="col-lg-4 col-md-4 col-sm-4 align">
-                        <div class="bar-grey">
-                            <div class="bar-green bar-80">&nbsp;</div>
+                        <div class="bar-description">
+                            <p>Dotkernel API is API-first, so you don’t need to install additional packages for e.g. token
+                                authentication.</p>
                         </div>
                     </div>
-                </div>
-                <div class="col-lg-4 col-md-12 col-sm-12 bar-description">
-                    <p>Dotkernel API’s code architecture is structured in a way which helps developers that are still
-                        unfamiliar with it to understand where everything goes.</p>
-                </div>
-                <div class="col-lg-7 box box-bar">
-                    <div class="col-lg-4 col-md-4 col-sm-4 bar-first">Request Management</div>
-                    <div class="col-lg-4 col-md-4 col-sm-4 align">
-                        <div class="bar-grey">
-                            <div class="bar-orange bar-50">&nbsp;</div>
+                    <div class="item">
+                        <div class="box box-bar">
+                            <div class="col-lg-4 col-md-4 col-sm-4 bar-first">Code Control</div>
+                            <div class="col-lg-4 col-md-4 col-sm-4 align">
+                                <div class="bar-grey">
+                                    <div class="bar-orange bar-65">&nbsp;</div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4 col-md-4 col-sm-4 align">
+                                <div class="bar-grey">
+                                    <div class="bar-green bar-80">&nbsp;</div>
+                                </div>
+                            </div>
                         </div>
-                    </div>
-                    <div class="col-lg-4 col-md-4 col-sm-4 align">
-                        <div class="bar-grey">
-                            <div class="bar-green bar-90">&nbsp;</div>
+                        <div class="bar-description">
+                            <p>Dotkernel API’s code architecture is structured in a way which helps developers that are still
+                                unfamiliar with it to understand where everything goes.</p>
                         </div>
                     </div>
-                </div>
-                <div class="col-lg-4 col-md-12 col-sm-12 bar-description">
-                    <p>Dotkernel API uses the ResponseInterface defined in PSR-7 which helps teams manage
-                        request/responses easier.</p>
-                </div>
-                <div class="col-lg-7 box box-bar">
-                    <div class="col-lg-4 col-md-4 col-sm-4 bar-first">PHP Standardization</div>
-                    <div class="col-lg-4 col-md-4 col-sm-4 align">
-                        <div class="bar-grey">
-                            <div class="bar-orange bar-25">&nbsp;</div>
+                    <div class="item">
+                        <div class="box box-bar">
+                            <div class="col-lg-4 col-md-4 col-sm-4 bar-first">Request Management</div>
+                            <div class="col-lg-4 col-md-4 col-sm-4 align">
+                                <div class="bar-grey">
+                                    <div class="bar-orange bar-50">&nbsp;</div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4 col-md-4 col-sm-4 align">
+                                <div class="bar-grey">
+                                    <div class="bar-green bar-90">&nbsp;</div>
+                                </div>
+                            </div>
                         </div>
-                    </div>
-                    <div class="col-lg-4 col-md-4 col-sm-4 align">
-                        <div class="bar-grey">
-                            <div class="bar-green bar-100">&nbsp;</div>
+                        <div class="bar-description">
+                            <p>Dotkernel API uses the ResponseInterface defined in PSR-7 which helps teams manage
+                                request/responses easier.</p>
                         </div>
                     </div>
                 </div>
-                <div class="col-lg-4 col-md-12 col-sm-12 bar-description">
-                    <p>Dotkernel API is a collection of PSR-7 Middleware applications that implements these standards:
-                        PSR-3, PSR-4, PSR-11 and PSR-15.
-                        They are outlined by the PHP Framework Interop Group that aims to provide standardization of
-                        programming concepts in PHP.</p>
-                </div>
             </div>
         </div>
-    </div>
 
-    <div class="home-list flow-graphs hide-mobile" id="middleware-flow">
-        <div class="container">
-            <div class="row">
-                <h2>Middleware Flow</h2>
+        <div class="home-list flow-graphs hide-mobile" id="middleware-flow">
+            <div class="container">
+                <div class="row">
+                    <h2>Middleware Flow</h2>
+                </div>
+                <p>The graph below demonstrates a default flow between Dotkernel's middlewares.</p>
             </div>
-            <p>The graph below demonstrates a default flow between Dotkernel's middlewares.</p>
         </div>
-    </div>
 
-    <div class="flow-graphs middlewares hide-mobile">
-        <div class="flow-container">
-            <div class="box-big gray-gradient">
-                <div class="title">ErrorHandlerInterface</div>
-                <div class="box-small request">
-                    <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
-                    <div class="text">Request</div>
-                </div>
-                <div class="box-small response">
-                    <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
-                    Response
+        <div class="flow-graphs middlewares hide-mobile">
+            <div class="flow-container">
+                <div class="box-big">
+                    <div class="title">ErrorHandlerInterface</div>
+                    <div class="box-small request">
+                        <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                        <div class="text">Request</div>
+                    </div>
+                    <div class="box-small response">
+                        <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                        Response
+                    </div>
+                </div>
+                <div class="two-arrows">
+                    <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                    <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
                 </div>
-            </div>
-            <div class="two-arrows">
-                <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
-                <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
-            </div>
 
-            <div class="box-big blue-gradient">
-                <div class="title">Other Middlewares (Optional)</div>
-                <div class="box-small request">
-                    <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
-                    <div class="text">Request</div>
+                <div class="box-big">
+                    <div class="title">Other Middlewares (Optional)</div>
+                    <div class="box-small request">
+                        <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                        <div class="text">Request</div>
+                    </div>
+                    <div class="box-small response">
+                        <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                        Response
+                    </div>
                 </div>
-                <div class="box-small response">
-                    <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
-                    Response
+                <div class="two-arrows">
+                    <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                    <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
                 </div>
-            </div>
-            <div class="two-arrows">
-                <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
-                <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
-            </div>
 
-            <div class="box-big blue-gradient">
-                <div class="title">CorsMiddleware</div>
-                <div class="box-small request">
-                    <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
-                    <div class="text">Request</div>
+                <div class="box-big">
+                    <div class="title">CorsMiddleware</div>
+                    <div class="box-small request">
+                        <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                        <div class="text">Request</div>
+                    </div>
+                    <div class="box-small response">
+                        <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                        Response
+                    </div>
                 </div>
-                <div class="box-small response">
-                    <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
-                    Response
+                <div class="two-arrows">
+                    <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                    <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
                 </div>
-            </div>
-            <div class="two-arrows">
-                <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
-                <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
-            </div>
 
-            <div class="box-big blue-gradient">
-                <div class="title">RouteMiddleware</div>
-                <div class="box-small request">
-                    <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
-                    <div class="text">Request</div>
-                    <div class="button">Route</div>
+                <div class="box-big">
+                    <div class="title">RouteMiddleware</div>
+                    <div class="box-small request">
+                        <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                        <div class="text">Request</div>
+                        <div class="button">Route</div>
+                    </div>
+                    <div class="box-small response">
+                        <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                        Response
+                    </div>
                 </div>
-                <div class="box-small response">
-                    <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
-                    Response
+                <div class="two-arrows">
+                    <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                    <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
                 </div>
-            </div>
-            <div class="two-arrows">
-                <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
-                <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
-            </div>
 
-            <div class="box-big blue-gradient">
-                <div class="title">Other Middlewares (Optional)</div>
-                <div class="box-small request">
-                    <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
-                    <div class="text">Request</div>
-                    <div class="button">Route</div>
+                <div class="box-big">
+                    <div class="title">Other Middlewares (Optional)</div>
+                    <div class="box-small request">
+                        <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                        <div class="text">Request</div>
+                        <div class="button">Route</div>
+                    </div>
+                    <div class="box-small response">
+                        <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                        Response
+                    </div>
                 </div>
-                <div class="box-small response">
-                    <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
-                    Response
+                <div class="two-arrows">
+                    <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                    <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
                 </div>
-            </div>
-            <div class="two-arrows">
-                <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
-                <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
-            </div>
 
-            <div class="box-big blue-gradient">
-                <div class="title">ContentNegotiationMiddleware</div>
-                <div class="box-small request">
-                    <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
-                    <div class="text">Request</div>
-                    <div class="button">Route</div>
+                <div class="box-big">
+                    <div class="title">ContentNegotiationMiddleware</div>
+                    <div class="box-small request">
+                        <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                        <div class="text">Request</div>
+                        <div class="button">Route</div>
+                    </div>
+                    <div class="box-small response">
+                        <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                        Response
+                    </div>
                 </div>
-                <div class="box-small response">
-                    <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
-                    Response
+                <div class="two-arrows">
+                    <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                    <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
                 </div>
-            </div>
-            <div class="two-arrows">
-                <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
-                <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
-            </div>
 
-            <div class="box-big blue-gradient">
-                <div class="title">ResponseHeaderMiddleware</div>
-                <div class="box-small request">
-                    <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
-                    <div class="text">Request</div>
-                    <div class="button">Route</div>
+                <div class="box-big">
+                    <div class="title">ResponseHeaderMiddleware</div>
+                    <div class="box-small request">
+                        <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                        <div class="text">Request</div>
+                        <div class="button">Route</div>
+                    </div>
+                    <div class="box-small response">
+                        <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                        Response
+                    </div>
                 </div>
-                <div class="box-small response">
-                    <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
-                    Response
+                <div class="two-arrows">
+                    <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                    <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
                 </div>
-            </div>
-            <div class="two-arrows">
-                <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
-                <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
-            </div>
 
-            <div class="box-big blue-gradient">
-                <div class="title">UrlHelperMiddleware</div>
-                <div class="box-small request">
-                    <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
-                    <div class="text">Request</div>
-                    <div class="button">Route</div>
+                <div class="box-big">
+                    <div class="title">UrlHelperMiddleware</div>
+                    <div class="box-small request">
+                        <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                        <div class="text">Request</div>
+                        <div class="button">Route</div>
+                    </div>
+                    <div class="box-small response">
+                        <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                        Response
+                    </div>
                 </div>
-                <div class="box-small response">
-                    <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
-                    Response
+                <div class="two-arrows">
+                    <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                    <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
                 </div>
-            </div>
-            <div class="two-arrows">
-                <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
-                <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
-            </div>
 
-            <div class="box-big blue-gradient">
-                <div class="title">AuthenticationMiddleware</div>
-                <div class="box-small request">
-                    <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
-                    <div class="text">Request</div>
-                    <div class="button">Route</div>
+                <div class="box-big">
+                    <div class="title">AuthenticationMiddleware</div>
+                    <div class="box-small request">
+                        <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                        <div class="text">Request</div>
+                        <div class="button">Route</div>
+                    </div>
+                    <div class="box-small response">
+                        <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                        Response
+                    </div>
                 </div>
-                <div class="box-small response">
-                    <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
-                    Response
+                <div class="two-arrows">
+                    <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                    <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
                 </div>
-            </div>
-            <div class="two-arrows">
-                <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
-                <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
-            </div>
 
-            <div class="box-big blue-gradient">
-                <div class="title">AuthorizationMiddleware</div>
-                <div class="box-small request">
-                    <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
-                    <div class="text">Request</div>
-                    <div class="button">Route</div>
+                <div class="box-big">
+                    <div class="title">AuthorizationMiddleware</div>
+                    <div class="box-small request">
+                        <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                        <div class="text">Request</div>
+                        <div class="button">Route</div>
+                    </div>
+                    <div class="box-small response">
+                        <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                        Response
+                    </div>
                 </div>
-                <div class="box-small response">
-                    <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
-                    Response
+                <div class="two-arrows">
+                    <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                    <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
                 </div>
-            </div>
-            <div class="two-arrows">
-                <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
-                <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
-            </div>
 
-            <div class="box-big blue-gradient">
-                <div class="title">DispatchMiddleware</div>
-                <div class="box-small request">
-                    <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
-                    <div class="text">Request</div>
-                    <div class="button">Route</div>
+                <div class="box-big">
+                    <div class="title">DispatchMiddleware</div>
+                    <div class="box-small request">
+                        <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                        <div class="text">Request</div>
+                        <div class="button">Route</div>
+                    </div>
+                    <div class="box-small response">
+                        <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                        Response
+                    </div>
                 </div>
-                <div class="box-small response">
-                    <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
-                    Response
+                <div class="two-arrows">
+                    <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
+                    <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
                 </div>
-            </div>
-            <div class="two-arrows">
-                <img class="arrow-down" src="{{ asset('images/app/icon/arrow-down.svg') }}" alt="Request">
-                <img class="arrow-up" src="{{ asset('images/app/icon/arrow-up.svg') }}" alt="Response">
-            </div>
 
-            <div class="box-big gray-gradient">
-                <div class="title">NotFoundHandler (Fallback)</div>
-                <div class="box-small request">
-                    <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
-                    <div class="text">Request</div>
-                    <div class="button">Route</div>
-                </div>
-                <div class="box-small response">
-                    <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
-                    Response
+                <div class="box-big">
+                    <div class="title">NotFoundHandler (Fallback)</div>
+                    <div class="box-small request">
+                        <img src="{{ asset('images/app/icon/arrow-in.svg') }}" alt="Request">
+                        <div class="text">Request</div>
+                        <div class="button">Route</div>
+                    </div>
+                    <div class="box-small response">
+                        <img src="{{ asset('images/app/icon/arrow-out.svg') }}" alt="Response">
+                        Response
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
 
-    <div class="home-list flow-graphs hide-mobile" id="library-flow">
-        <div class="container">
-            <div class="row">
-                <h2>Default Library Flow</h2>
+        <div class="home-list flow-graphs hide-mobile" id="library-flow">
+            <div class="container">
+                <div class="row">
+                    <h2>Default Library Flow</h2>
+                </div>
+                <p>The graph below demonstrates a default flow between Dotkernel's libraries.</p>
             </div>
-            <p>The graph below demonstrates a default flow between Dotkernel's libraries.</p>
         </div>
-    </div>
 
-    <div class="flow-graphs libraries hide-mobile">
-        <div class="flow-container">
-            <div class="row">
-                <div class="box black">Request</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box white">dotkernel/dot-errorhandler</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box blue">mezzio/mezzio-cors</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box blue">mezzio/mezzio-router</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box white">dotkernel/dot-response-header</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box blue">mezzio/mezzio-helpers</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box blue">mezzio/mezzio-authentication</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box blue">mezzio/mezzio-authorization</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row" style="display: flex">
-                <div class="box blue">mezzio/mezzio-router</div>
-                <div class="arrow-right"
-                     style="background: url('/images/app/icon/arrow-right.svg') no-repeat center;"></div>
-                <div class="box blue">laminas/laminas-diactoros - (NotFound)</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box white">dotkernel/dot-dependency-injection</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box yellow">doctrine/orm</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box blue">mezzio/mezzio-hal</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box purple">laminas/laminas-diactoros</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box yellow">psr/http-message</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box black">Response</div>
+        <div class="flow-graphs libraries hide-mobile">
+            <div class="flow-container">
+                <div class="row">
+                    <div class="box black">Request</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box white">dotkernel/dot-errorhandler</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box blue">mezzio/mezzio-cors</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box blue">mezzio/mezzio-router</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box white">dotkernel/dot-response-header</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box blue">mezzio/mezzio-helpers</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box blue">mezzio/mezzio-authentication</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box blue">mezzio/mezzio-authorization</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row" style="display: flex">
+                    <div class="box blue">mezzio/mezzio-router</div>
+                    <div class="arrow-right"
+                         style="background: url('/images/app/icon/arrow-right.svg') no-repeat center;"></div>
+                    <div class="box blue">laminas/laminas-diactoros - (NotFound)</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box white">dotkernel/dot-dependency-injection</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box yellow">doctrine/orm</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box blue">mezzio/mezzio-hal</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box purple">laminas/laminas-diactoros</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box yellow">psr/http-message</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box black">Response</div>
+                </div>
             </div>
         </div>
-    </div>
 
-    <div class="home-list flow-graphs hide-mobile" id="library-email-flow">
-        <div class="container">
-            <div class="row">
-                <h2>Library Flow for Email</h2>
+        <div class="home-list flow-graphs hide-mobile" id="library-email-flow">
+            <div class="container">
+                <div class="row">
+                    <h2>Library Flow for Email</h2>
+                </div>
+                <p>The graph below demonstrates the simplified flow between Dotkernel's libraries for sending an email.</p>
             </div>
-            <p>The graph below demonstrates the simplified flow between Dotkernel's libraries for sending an email.</p>
         </div>
-    </div>
 
-    <div class="flow-graphs libraries hide-mobile">
-        <div class="flow-container">
-            <div class="row">
-                <div class="box black">Request</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box white">dotkernel/dot-errorhandler</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box blue">mezzio/mezzio-cors</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box blue">mezzio/mezzio-router</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box white">dotkernel/dot-response-header</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box blue">mezzio/mezzio-helpers</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box blue">mezzio/mezzio-authentication</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box blue">mezzio/mezzio-authorization</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row" style="display: flex">
-                <div class="box blue">mezzio/mezzio-router</div>
-                <div class="arrow-right"
-                     style="background: url('/images/app/icon/arrow-right.svg') no-repeat center;"></div>
-                <div class="box blue">laminas/laminas-diactoros - (NotFound)</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box white">dotkernel/dot-dependency-injection</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box yellow">doctrine/orm</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box white">dotkernel/dot-mail</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box blue">mezzio/mezzio-hal</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box purple">laminas/laminas-diactoros</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box yellow">psr/http-message</div>
-            </div>
-            <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
-            <div class="row">
-                <div class="box black">Response</div>
+        <div class="flow-graphs libraries hide-mobile">
+            <div class="flow-container">
+                <div class="row">
+                    <div class="box black">Request</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box white">dotkernel/dot-errorhandler</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box blue">mezzio/mezzio-cors</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box blue">mezzio/mezzio-router</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box white">dotkernel/dot-response-header</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box blue">mezzio/mezzio-helpers</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box blue">mezzio/mezzio-authentication</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box blue">mezzio/mezzio-authorization</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row" style="display: flex">
+                    <div class="box blue">mezzio/mezzio-router</div>
+                    <div class="arrow-right"
+                         style="background: url('/images/app/icon/arrow-right.svg') no-repeat center;"></div>
+                    <div class="box blue">laminas/laminas-diactoros - (NotFound)</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box white">dotkernel/dot-dependency-injection</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box yellow">doctrine/orm</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box white">dotkernel/dot-mail</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box blue">mezzio/mezzio-hal</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box purple">laminas/laminas-diactoros</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box yellow">psr/http-message</div>
+                </div>
+                <div class="arrow-down" style="background: url('/images/app/icon/arrow-down.svg') no-repeat left;"></div>
+                <div class="row">
+                    <div class="box black">Response</div>
+                </div>
             </div>
         </div>
     </div>
diff --git a/src/App/templates/layout/default.html.twig b/src/App/templates/layout/default.html.twig
index e1d13db..c89a2d9 100644
--- a/src/App/templates/layout/default.html.twig
+++ b/src/App/templates/layout/default.html.twig
@@ -39,19 +39,19 @@
         <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Space+Grotesk:200,300,400,500,700" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Barlow:400,500,600" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css?family=Raleway:600" rel="stylesheet">
 
-        <link href="{{ asset('css/app.css?v=3') }}" rel="stylesheet" />
+        <link href="{{ asset('css/app.css?v=9') }}" rel="stylesheet" />
 
         {% block stylesheets %}{% endblock %}
     </head>
     <body class="app {% block body_class %}{% endblock %}">
         <div id="wrapper">
             <header class="app-header">
-
                 <nav class="navbar navbar-expand-lg navbar-light bg-light">
                     <div class="container">
                         <a href="/" class="navbar-brand">
-                            <img src="{{ asset('images/app/logo-red-full.svg') }}" alt="Dotkernel API"/>
+                            <img src="{{ asset('images/app/logo-blue.png') }}" alt="Dotkernel API"/>
                         </a>
                         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader"
                                 aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
@@ -65,11 +65,16 @@
                                 </li>
                                 <li class="nav-item">
                                     <a class="nav-link" target="_blank" href="https://www.dotkernel.com/">Dotkernel
-                                        Applications (Skeletons)</a>
+                                        Applications</a>
                                 </li>
                                 <li class="nav-item">
                                     <a class="nav-link" target="_blank" href="https://www.dotkernel.com/blog/">Blog</a>
                                 </li>
+                            </ul>
+                        </div>
+
+                        <div class="menu-right">
+                            <ul class="">
                                 <li class="button-border">
                                     <a class="nav-link" target="_blank" href="https://github.com/dotkernel/api">GitHub</a>
                                 </li>
@@ -96,14 +101,43 @@
         </div>
 
         <footer class="app-footer">
-            <div class="container container-border">
+            <div class="container">
                 <div class="row">
-                    <div class="col-md-9">
+                    <div class="col-md-12">
                         <div class="footer_head">
-                            <h2>Dotkernel</h2>
+                            <img src="{{ asset('images/app/logo-blue.png') }}" alt="Dotkernel API"/>
                         </div>
                         <div class="row">
-                            <div class="col-md-6 dk_widget">
+                            <div class="col-md-4 footer-item">
+                                <p class="footer-item-title">
+                                    Dotkernel All Repositories
+                                </p>
+                                <p class="footer-item-link margin-large">
+                                    <a href="https://github.com/dotkernel" target="_blank">
+                                        <img src="{{ asset('images/app/icon/hand.svg') }}">
+                                        Go to Git
+                                    </a>
+                                </p>
+                                <p class="footer-item-title">
+                                    Dotkernel Admin
+                                </p>
+                                <p class="footer-item-link margin-large">
+                                    <a href="https://github.com/dotkernel/admin" target="_blank">
+                                        <img src="{{ asset('images/app/icon/hand.svg') }}">
+                                        Go to Git
+                                    </a>
+                                </p>
+                                <p class="footer-item-title">
+                                    Dotkernel Frontend
+                                </p>
+                                <p class="footer-item-link margin-large">
+                                    <a href="https://github.com/dotkernel/frontend" target="_blank">
+                                        <img src="{{ asset('images/app/icon/hand.svg') }}">
+                                        Go to Git
+                                    </a>
+                                </p>
+                            </div>
+                            <div class="col-md-4 footer-item">
                                 <p class="footer-item-title">
                                     Dotkernel API
                                 </p>
@@ -132,70 +166,47 @@
                                     </a>
                                 </p>
                             </div>
-                            <div class="col-md-6 dk_widget">
+                            <div class="col-md-4 footer-item">
                                 <p class="footer-item-title">
-                                    Dotkernel All Repositories
+                                    Support
                                 </p>
-                                <p class="footer-item-link margin-large">
+                                <p class="footer-item-support margin-small">
                                     <a href="https://github.com/dotkernel" target="_blank">
-                                        <img src="{{ asset('images/app/icon/hand.svg') }}">
-                                        Go to Git
+                                        <img src="{{ asset('images/app/icon/vector.svg') }}">
+                                        Git
                                     </a>
                                 </p>
-                                <p class="footer-item-title">
-                                    Dotkernel Admin
-                                </p>
-                                <p class="footer-item-link margin-large">
-                                    <a href="https://github.com/dotkernel/admin" target="_blank">
-                                        <img src="{{ asset('images/app/icon/hand.svg') }}">
-                                        Go to Git
-                                    </a>
-                                </p>
-                                <p class="footer-item-title">
-                                    Dotkernel Frontend
-                                </p>
-                                <p class="footer-item-link margin-large">
-                                    <a href="https://github.com/dotkernel/frontend" target="_blank">
-                                        <img src="{{ asset('images/app/icon/hand.svg') }}">
-                                        Go to Git
+                                <p class="footer-item-support margin-small">
+                                    <a href="https://x.com/dotkernel" target="_blank">
+                                        <img src="{{ asset('images/app/icon/twitter.png') }}">
+                                        Find Us on X
                                     </a>
                                 </p>
                             </div>
                         </div>
                     </div>
-                    <div class="col-md-3">
-                        <div class="footer_head">
-                            <h2>Support</h2>
-                        </div>
-                        <p class="footer-item-support margin-small">
-                            <a href="https://github.com/dotkernel" target="_blank">
-                                <img src="{{ asset('images/app/icon/vector.svg') }}">
-                                Git
-                            </a>
-                        </p>
-                        <p class="footer-item-support margin-small">
-                            <a href="https://x.com/dotkernel" target="_blank">
-                                <img src="{{ asset('images/app/icon/twitter.png') }}">
-                                Find Us on X
-                            </a>
-                        </p>
-                    </div>
                 </div>
 
-                <div class="row">
-                    <p class="footer-headline">
-                        © {{ 'now'|date('Y') }} by <a href="https://www.dotkernel.com" target="_blank">
-                         Dotkernel</a> a collection of PSR-7 Middleware applications and libraries
-                        <br>
-                        Website built on <a href="https://github.com/dotkernel/light" target="_blank">Dotkernel Light</a>
-                        <br>
-                        The Laminas logo is copyright of the
-                        <a href="https://getlaminas.org/about/foundation" target="_blank">Laminas Foundation</a>
-                    </p>
+                <div class="row footer-text">
+                    <div class="col-md-4">
+                        <p>© {{ 'now'|date('Y') }} by <a href="https://www.dotkernel.com" target="_blank">
+                         Dotkernel</a> a collection of PSR-7 Middleware applications and libraries</p>
+                    </div>
+                    <div class="col-md-4">
+                        <p>The Laminas logo is copyright of<br>the
+                            <a href="https://getlaminas.org/about/foundation" target="_blank">Laminas Foundation</a></p>
+                    </div>
+                    <div class="col-md-4">
+                        <p>Website built on<br><a href="https://github.com/dotkernel/light" target="_blank">Dotkernel Light</a></p>
+                    </div>
                 </div>
             </div>
         </footer>
 
+        <div class="row footer-copyright">
+            © Copyright Dotkernel API 2025. All rights reserved.
+        </div>
+
         <script src="{{ asset('js/app.js?v=3') }}"></script>
         {% block javascript %}{% endblock %}
     </body>