diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
index cc5f4fa5..e4129eb9 100644
--- a/blocks/hero/hero.css
+++ b/blocks/hero/hero.css
@@ -15,14 +15,16 @@ main .hero {
 }
 
 main .hero h1 {
-  max-width: 1200px;
-  margin-left: auto;
-  margin-right: auto;
+  line-height: 1.2;
+  padding: 0;
   color: white;
+  font-size: 44px;
+  text-shadow: 0 0 6px rgba(0,0,0,50%);
 }
 
 main .hero picture {
   position: absolute;
+  height : 310px;
   z-index: -1;
   top: 0;
   left: 0;
@@ -36,4 +38,4 @@ main .hero img {
   object-fit: cover;
   width: 100%;
   height: 100%;
-}
+}
\ No newline at end of file
diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js
index e69de29b..b9bcab3f 100644
--- a/blocks/hero/hero.js
+++ b/blocks/hero/hero.js
@@ -0,0 +1,23 @@
+export default function decorate() {
+  const heroClass = document.getElementsByClassName('hero block');
+  heroClass[0].children[0].setAttribute('class', 'outer');
+  heroClass[0].children[0].children[0].setAttribute('class', 'vertical');
+  const heroDiv = heroClass[0].children[0].children[0];
+  const pTags = heroDiv.getElementsByTagName('p');
+  let innerElements = '';
+  for (let i = 0; i < pTags.length; i += 1) {
+    if (pTags[i].outerHTML.includes('class')) {
+      innerElements += pTags[i].innerHTML.replace('class="button"', 'style="background-color:#000;" class="hs-button" target="_blank"');
+    } else if (i === 1) {
+      const heroTitle = pTags[i].outerHTML.replace(/<p[ ]*>/g, '');
+      innerElements += heroTitle.replace(/<\/p>/g, '<br>');
+    } else if (i === 2) {
+      const heroDescription = pTags[i].outerHTML.replace(/<p[ ]*>/g, '<span style="font-size: 70%;">');
+      innerElements += heroDescription.replace(/<\/p>/g, '</span><br>');
+    } else {
+      const heroImage = pTags[i].outerHTML.replace(/<p[ ]*>/g, '');
+      innerElements += heroImage.replace(/<\/p>/g, '<br>');
+    }
+  }
+  heroDiv.innerHTML = `<h1>${innerElements}</h1>`;
+}