diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
index cc5f4fa5..f448537b 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,.5);
 }
 
 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..6dd7394b 100644
--- a/blocks/hero/hero.js
+++ b/blocks/hero/hero.js
@@ -0,0 +1,23 @@
+export default function decorate(block) {
+    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');
+    var innerElements='';
+    for(var i=0;i<pTags.length; i++){
+        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>';
+  }