diff --git a/public/page-data/index/page-data.json b/public/page-data/index/page-data.json
deleted file mode 100644
index 19e417a7..00000000
--- a/public/page-data/index/page-data.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-    "componentChunkName": "component---src-pages-index-js",
-    "path": "/",
-    "result": {"pageContext":{}},
-    "staticQueryHashes": ["1128713364","176670904","1886264361","2898073905","3206133181","4006044966","943162249"]}
\ No newline at end of file
diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
index 8e8db17e..aec32ab1 100644
--- a/src/components/Banner/Banner.js
+++ b/src/components/Banner/Banner.js
@@ -1,18 +1,21 @@
 import React from "react"
 import { Link } from "gatsby"
 import "./Banner.scss"
+import { useTheme } from "../../context/themeContext"
 
 const Banner = ({ data }) => {
+  const { theme } = useTheme()
   const title = data?.title
   const variant = data?.variant
   const summary = data?.summary
   const image = data?.image
+  const imageDark = data?.imageDark
   const button = data?.button
   return (
     <div className={`banner ${variant}`} id={data.strapi_component + "-" + data.id}>
-      <div className="title container">
-        <div className="col-12 col-md-6">
-          <h1>{title}</h1>
+      <div className="title container-md">
+        <div className="col-12 col-lg-6">
+          {variant === 'hero' ? <h1>{title}</h1> : <h2>{title}</h2>}
           <h3>{summary}</h3>
           {button &&
             (button?.landing_page ? (
@@ -32,8 +35,16 @@ const Banner = ({ data }) => {
         </div>
       </div>
       
-      <div className="imagen col-12 col-md-6">
-        <img src={image?.url} alt={title} />
+      <div className={`imagen col-12 ${variant === 'diagonal' ? 'col-md-8' : variant === 'diagonalReverse' ? 'col-md-4' : 'col-md-6'} `}>
+        {/* <img src={image?.url} alt={title} /> */}
+        <img
+          src={
+            theme === "dark" && imageDark
+              ? imageDark?.url
+              : image?.url
+          }
+          alt={title}
+        />
       </div>
     </div>
   )
diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss
index a06f26ca..45fca86c 100644
--- a/src/components/Banner/Banner.scss
+++ b/src/components/Banner/Banner.scss
@@ -27,6 +27,13 @@
     .title {
       h1 {
         text-transform: uppercase;
+        text-align: left;
+        margin-bottom: 0.8rem;
+        word-wrap: initial;
+      }
+      h3 {
+        font-weight: 400;
+        text-align: left;
       }
     }
   }
@@ -42,6 +49,35 @@
     .imagen {
       display: flex;
       justify-content: flex-end;
+      img {
+        max-width: 450px;
+      }
+    }
+    .title {
+      padding-top: 2rem;
+      padding-bottom: 2rem;
+      h2 {
+        text-transform: uppercase;
+        text-align: center;
+        word-wrap: initial;
+      }
+      h3 {
+        display: none;
+      }
+    }
+  }
+  &.topReverse {
+    height: auto;
+    justify-content: end;
+    .button {
+      @include primaryBtn;
+      margin-top: 20px;
+      margin-bottom: 20px;
+      display: inline-block;
+    }
+    .imagen {
+      display: flex;
+      justify-content: flex-start;
       img {
         width: 100%;
         max-width: 450px;
@@ -49,9 +85,11 @@
     }
     .title {
       padding-top: 2rem;
-      h1 {
+      padding-bottom: 2rem;
+      h2 {
         text-transform: uppercase;
         text-align: center;
+        word-wrap: initial;
       }
       h3 {
         display: none;
@@ -59,13 +97,17 @@
     }
   }
   &.diagonal {
-    height: auto;
+    min-height: 300px;
     justify-content: end;
-    background-color: #f2f0f7;
+    background-color: $bg-diagonal;
     .button {
       margin-top: 20px;
       margin-bottom: 20px;
       display: inline-block;
+      font-weight: 600;
+      color: #607ee7;
+      text-decoration: underline;
+      padding-left: 5px;
     }
     .imagen {
       display: flex;
@@ -76,10 +118,12 @@
     }
     .title {
       padding-top: 2rem;
-      h1 {
+      padding-bottom: 2rem;
+      h2 {
         text-transform: uppercase;
         color: #607ee7;
         margin-bottom: 0;
+        word-wrap: initial;
       }
       h3 {
         display: none;
@@ -90,25 +134,32 @@
   &.diagonalReverse {
     height: auto;
     justify-content: end;
-    background-color: #f2f0f7;
+
     .button {
       margin-top: 20px;
       margin-bottom: 20px;
       display: inline-block;
+      color: #607ee7;
+      text-decoration: underline;
+      padding-left: 5px;
     }
     .imagen {
       display: flex;
-      justify-content: flex-end;
+      justify-content: center;
+      align-items: center;
       img {
-        width: 100%;
+        max-width: 200px;
       }
     }
     .title {
       padding-top: 2rem;
-      h1 {
+      padding-bottom: 2rem;
+      background-color: $bg-diagonal;
+      h2 {
         text-transform: uppercase;
         color: #607ee7;
         margin-bottom: 0;
+        word-wrap: initial;
       }
       h3 {
         display: none;
@@ -158,7 +209,6 @@
         padding: 0;
         justify-content: flex-end;
         img {
-          width: 100%;
           max-width: 600px;
         }
       }
@@ -166,10 +216,11 @@
       .title {
         position: absolute;
         padding-top: 0;
+        padding-bottom: 0;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
-        h1 {
+        h2 {
           margin-bottom: 1rem;
           padding-right: 3rem;
           text-align: left;
@@ -180,29 +231,29 @@
         }
       }
     }
-    &.diagonal {
+    &.topReverse {
       height: 400px;
       position: relative;
       align-items: center;
+      flex-direction: row-reverse;
       .imagen {
-        height: 500px;
+        max-height: 500px;
         overflow: hidden;
         padding: 0;
-        justify-content: flex-end;
         img {
           width: 100%;
+          max-width: 600px;
         }
       }
 
       .title {
-        position: absolute;
         padding-top: 0;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        h1 {
+        padding-bottom: 0;
+        flex-direction: row-reverse;
+        h2 {
           margin-bottom: 1rem;
           padding-right: 3rem;
+          text-align: left;
         }
         h3 {
           font-weight: 400;
@@ -210,11 +261,13 @@
         }
       }
     }
-    &.diagonalReverse {
-      height: 400px;
+    &.diagonal {
+      height: 300px;
       position: relative;
       align-items: center;
       .imagen {
+        -webkit-clip-path: polygon(17% 0, 100% 0, 100% 55%, 91% 100%, 0 100%);
+        clip-path: polygon(17% 0, 100% 0, 100% 55%, 91% 100%, 0 100%);
         height: 500px;
         overflow: hidden;
         padding: 0;
@@ -227,12 +280,15 @@
       .title {
         position: absolute;
         padding-top: 0;
+        padding-bottom: 0;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
-        h1 {
+
+        h2 {
           margin-bottom: 1rem;
           padding-right: 3rem;
+          max-width: 400px;
         }
         h3 {
           font-weight: 400;
@@ -240,5 +296,56 @@
         }
       }
     }
+    &.diagonalReverse {
+      height: 300px;
+      position: relative;
+      align-items: center;
+      justify-content: flex-start;
+      flex-direction: row-reverse;
+      .imagen {
+        height: 500px;
+        overflow: hidden;
+        padding: 0;
+        justify-content: flex-end;
+      }
+      .button {
+        padding-left: 5rem;
+      }
+      .title {
+        background-color: $bg-diagonal;
+        -webkit-clip-path: polygon(0 0, 92% 0, 100% 45%, 100% 100%, 17% 100%);
+        clip-path: polygon(0 0, 92% 0, 100% 45%, 100% 100%, 17% 100%);
+        display: flex;
+        justify-content: flex-end;
+        flex-direction: row-reverse;
+        height: 100%;
+        align-items: center;
+        h2 {
+          margin-bottom: 1rem;
+          padding-left: 5rem;
+        }
+        h3 {
+          font-weight: 400;
+          padding-left: 5rem;
+        }
+      }
+    }
+  }
+  @media screen and (min-width: $breakpoint-lg) {
+    &.diagonal {
+      height: 400px;
+    }
+    &.diagonalReverse {
+      height: 400px;
+      .title {
+        h2 {
+          padding-left: 10rem;
+        }
+      }
+      .button {
+        padding-left: 10rem;
+      }
+    }
+
   }
 }
diff --git a/src/components/BlogPage/BlogContainer.js b/src/components/BlogPage/BlogContainer.js
index 3fee539e..ed54c4d9 100644
--- a/src/components/BlogPage/BlogContainer.js
+++ b/src/components/BlogPage/BlogContainer.js
@@ -3,7 +3,7 @@ import { useBlog } from "../../hooks"
 import Layout from "../../components/layout"
 import BlogGrid from "./BlogGrid/BlogGrid"
 import BlogArticle from "./BlogArticle/BlogArticle"
-import { Seo, BannerHead } from "../index"
+import { Seo } from "../index"
 
 import "./BlogContainer.scss"
 
@@ -13,7 +13,6 @@ const Blog = () => {
 
   const data = blogData?.allStrapiBlogCategory?.nodes
   const dataArticles = blogData?.allStrapiArticle?.nodes
-  const bannerHead = blogData?.allStrapiBlogPage?.nodes[0]?.bannerHead
   const filterArticle = data.map(category => dataArticles.filter(article => category.name === article.blog_category.name))
 
   const {
@@ -34,7 +33,7 @@ const Blog = () => {
       {data.length > 0 && (
         <div className="blog__container">
 
-          {bannerHead && <BannerHead data={bannerHead} />}
+          
 
           {filterArticle?.map((category, idx) => (
             <BlogGrid key={idx} title={category[0]?.blog_category?.name}>
diff --git a/src/context/themeContext.js b/src/context/themeContext.js
index 5ecc8f3c..7d1b846f 100644
--- a/src/context/themeContext.js
+++ b/src/context/themeContext.js
@@ -16,6 +16,7 @@ const themes = {
     "--secondary-container": "#25cad3",
     "--border-bottom": "#cdcdcd",
     "--bg-form": "#DBDBDD",
+    "--bg-diagonal": "#f2f0f7",
   },
   dark: {
     "--nav-footer-container": "#383838",
@@ -32,6 +33,7 @@ const themes = {
     "--secondary": "#67f293",
     "--secondary-container": "#191919",
     "--bg-form": "#FAF8F8",
+    "--bg-diagonal": "#4A494B",
 
   },
 }
diff --git a/src/fonts/plain-bold-webfont.woff b/src/fonts/plain-bold-webfont.woff
new file mode 100644
index 00000000..caa7824b
Binary files /dev/null and b/src/fonts/plain-bold-webfont.woff differ
diff --git a/src/fonts/plain-bold-webfont.woff2 b/src/fonts/plain-bold-webfont.woff2
new file mode 100644
index 00000000..306c0498
Binary files /dev/null and b/src/fonts/plain-bold-webfont.woff2 differ
diff --git a/src/fonts/plain-medium-webfont.woff b/src/fonts/plain-medium-webfont.woff
new file mode 100644
index 00000000..7610c24e
Binary files /dev/null and b/src/fonts/plain-medium-webfont.woff differ
diff --git a/src/fonts/plain-medium-webfont.woff2 b/src/fonts/plain-medium-webfont.woff2
new file mode 100644
index 00000000..3a4ed064
Binary files /dev/null and b/src/fonts/plain-medium-webfont.woff2 differ
diff --git a/src/fonts/plain-regular-webfont.woff b/src/fonts/plain-regular-webfont.woff
new file mode 100644
index 00000000..47b84ea5
Binary files /dev/null and b/src/fonts/plain-regular-webfont.woff differ
diff --git a/src/fonts/plain-regular-webfont.woff2 b/src/fonts/plain-regular-webfont.woff2
new file mode 100644
index 00000000..11dfc003
Binary files /dev/null and b/src/fonts/plain-regular-webfont.woff2 differ
diff --git a/src/hooks/useBlog.js b/src/hooks/useBlog.js
index 854a409e..a940b8bf 100644
--- a/src/hooks/useBlog.js
+++ b/src/hooks/useBlog.js
@@ -33,23 +33,7 @@ const useBlog = () => {
             pageKeywords
             pageDescription
           }
-          bannerHead {
-            title
-            image {
-              localFile {
-                childImageSharp {
-                  gatsbyImageData
-                }
-              }
-            }
-            imageDark {
-              localFile {
-                childImageSharp {
-                  gatsbyImageData
-                }
-              }
-            }
-          }          
+         
         }
       }
     }
diff --git a/src/pages/index.js b/src/pages/index.js
index 4e7bf076..f7b0e4c6 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,6 +1,7 @@
 import * as React from "react"
 import "bootstrap/dist/css/bootstrap.min.css"
 import Home from "./../components/HomePage/HomeContainer/HomeContainer"
+import "../styles/typography.css";
 
 const IndexPage = ({location}) => <Home location={location} />
 
diff --git a/src/styles/global.scss b/src/styles/global.scss
index ae5e2e52..04e6c766 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,6 +1,7 @@
 /* Fonts */
 @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+
 $primary-font: "Plain", sans-serif;
 $secondary-font: "Roboto", sans-serif;
 $medium: 20px;
@@ -19,6 +20,7 @@ $border-bottom: var(--border-bottom);
 $title-jobs: var(--title-jobs);
 $jobs-hover: var(--jobs-hover);
 $bg-form: var(--bg-form);
+$bg-diagonal: var(--bg-diagonal);
 
 main {
   background-color: $primary-container !important;
@@ -65,19 +67,20 @@ $extra-large: 45px;
 
 //buttons
 @mixin primaryBtn {
-  padding: 5px 15px;
+  padding: 10px 15px;
   font-weight: 500;
   border: none;
   background-color: $secondary;
   color: $primary-invert;
   border-radius: 5px;
   transition: filter 200ms ease-in;
+  font-size: 18px;
   &:hover {
     filter: brightness(135%);
     box-shadow: 0px 3px 10px rgba(138, 254, 113, 0.5);
   }
   @media screen and (min-width: $breakpoint-lg) {
-    padding: 8px 30px;
+    padding: 12px 30px;
   }
 }
 
@@ -112,16 +115,18 @@ $breakpoint-xxl: 1400px;
 body {
   font-size: 16px;
   font-family: $secondary-font;
+  line-height: 1;
   p {
+    line-height: 1.2;
     em {
-      font-size: 16px;
+      font-size: 14px;
       font-family: $secondary-font;
     }
     strong {
-      font-size: 16px;
+      font-size: 14px;
       font-family: $secondary-font;
     }
-    font-size: 16px;
+    font-size: 14px;
     font-family: $secondary-font;
   }
   button {
@@ -133,23 +138,23 @@ body {
     font-family: $primary-font;
   }
   h1 {
-    font-size: 36px;
+    font-size: 32px;
     font-family: $primary-font;
   }
   h2 {
-    font-size: 32px;
+    font-size: 28px;
     font-family: $primary-font;
   }
   h3 {
     span {
-      font-size: 28px;
+      font-size: 24px;
       font-family: $primary-font;
     }
-    font-size: 28px;
+    font-size: 24px;
     font-family: $primary-font;
   }
   h4 {
-    font-size: 24px;
+    font-size: 22px;
     font-family: $primary-font;
   }
   h5 {
@@ -167,36 +172,36 @@ body {
 
 @media screen and (min-width: $breakpoint-lg) {
   body {
-    font-size: 20px;
+    font-size: 18px;
     p {
       em {
-        font-size: 20px;
+        font-size: 18px;
       }
       strong {
-        font-size: 20px;
+        font-size: 18px;
       }
-      font-size: 20px;
+      font-size: 18px;
     }
     h1 {
-      font-size: 60px;
+      font-size: 52px;
     }
     h2 {
-      font-size: 56px;
+      font-size: 42px;
     }
     h3 {
       span {
-        font-size: 48px;
+        font-size: 32px;
       }
-      font-size: 48px;
+      font-size: 32px;
     }
     h4 {
-      font-size: 36px;
+      font-size: 28px;
     }
     h5 {
-      font-size: 32px;
+      font-size: 24px;
     }
     h6 {
-      font-size: 24px;
+      font-size: 20px;
     }
     small {
       font-size: 18px;
diff --git a/src/styles/typography.css b/src/styles/typography.css
new file mode 100644
index 00000000..c6faaad5
--- /dev/null
+++ b/src/styles/typography.css
@@ -0,0 +1,29 @@
+/* @font-face {
+  font-family: "Plain";
+  src: url("../fonts/Updock-Regular.ttf");
+} */
+
+@font-face {
+  font-family: 'Plain';
+  src:local('Plain'),
+  url('../fonts/plain-regular-webfont.woff') format('woff'),
+  url('../fonts/plain-regular-webfont.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Plain';
+  src:local('Plain'),
+  url('../fonts/plain-medium-webfont.woff') format('woff'),
+  url('../fonts/plain-medium-webfont.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Plain';
+  src:local('Plain'),
+  url('../fonts/plain-bold-webfont.woff') format('woff'),
+  url('../fonts/plain-bold-webfont.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+}