diff --git a/.github/build-package-pages.sh b/.github/build-package-pages.sh
old mode 100755
new mode 100644
diff --git a/.github/prepare-thumb-images.sh b/.github/prepare-thumb-images.sh
old mode 100755
new mode 100644
diff --git a/src/layouts/index.html b/src/layouts/index.html
index 4639ae9..b070954 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -2,142 +2,9 @@
 
 <!-- Hero Section -->
 
-<style>
-
-  #hero-grid-system{
-    position:absolute;
-    width:100%;
-    z-index: -3;
-    margin-top:-5px;
-  }
-
-  .hero-container{
-    position:relative;
-    z-index: 2;
-  }
-
-  .full-width-cta-container{
-    position:relative;
-    z-index: 2;
-  }
-</style>
-
-<style>
-
-  #m-home-gen-art-1{
-    position:absolute;
-    width:57vw;
-    height: 19.3vw;
-    left: 6.8vw;
-    margin-top:164vw;
-    z-index: 1;
-    background-image: url("/Images/gen-art/orange-pattern.jpg");
-    background-position: center;
-    background-repeat: repeat;
-    background-size: cover;
-  }
-
-  #m-home-gen-art-2{
-    position:absolute;
-    width:36vw;
-    height: 19.3vw;
-    right: 6.8vw;
-    margin-top:154vw;
-    z-index: 3;
-    background-image: url("/Images/gen-art/gen-art-_0010_DALL·E 2022-09-01 10.48.33 - bright blue and green _It’s time we stop robbing Peter to pay Mark and Jeff._.jpg");
-    background-position: center;
-    background-repeat: repeat;
-    background-size: cover;
-  }
-
-  #m-home-gen-art-3{
-    position:absolute;
-    width:18vw;
-    height: 18vw;
-    border-radius:200px;
-    right: 40vw;
-    margin-top:167vw;
-    z-index: 3;
-    background-image: url("/Images/gen-art/gen-art-_0002_DALL·E 2022-09-01 09.50.45 - rainbow oil spill on pavement.png.jpg");
-    background-position: center;
-    background-repeat: repeat;
-    background-size: cover;
-    animation: rotation 10s infinite linear;
-  }
-
-  #m-home-gen-art-4{
-    position:absolute;
-    width:36vw;
-    height: 12vw;
-    right: 50vw;
-    margin-top:180vw;
-    z-index: 2;
-    background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
-    background-position: center;
-    background-repeat: repeat;
-    background-size: cover;
-  }
-
-  #m-home-gen-art-5{
-    position:absolute;
-    width:36vw;
-    height: 100vw;
-    right: 50vw;
-    margin-top:20vw;
-    z-index: 1;
-    background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
-    background-position: center;
-    background-repeat: repeat;
-    background-size: cover;
-  }
-
-  #m-home-gen-art-6{
-    position:absolute;
-    width:36vw;
-    height: 60vw;
-    right: 30vw;
-    margin-top:30vw;
-    z-index: 0;
-    background-image: url("/Images/gen-art/gen-art-_0020_DALL·E 2022-09-02 12.25.55 - crystals in polarized light under microscope.png.jpg");
-    background-position: center;
-    background-repeat: repeat;
-    background-size: cover;
-  }
-
-  @keyframes rotation {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-
-}
-
-@media only screen and (min-width: 576px) {
-
-  .gen-art-mobile{
-    display: none;
-  }
-
-}
-
-</style>
-
-<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-1"></div>
-<div class="gen-art-mobile animated-5 animatedFadeInUp fadeInUp" id="m-home-gen-art-2"></div>
-<div class="gen-art-mobile" id="m-home-gen-art-3"></div>
-<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-4"></div>
-<div class="gen-art-mobile animated-5 animatedFadeInUp fadeInUp" id="m-home-gen-art-5"></div>
-<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-6"></div>
+{{- partial "mobile-art-home" -}}
 
 <section class="hero-section">
-<!-- Comment out generative art for now -- adding into SVG itself
-<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="gen-art-1"></div>
-<div class="gen-art animated-5 animatedFadeInUp fadeInUp" id="gen-art-2"></div>
--->
-
-<!--<img src="/Images/x-large-grid-hero.svg" id="hero-grid-system" alt="hero-grid-system">-->
   <div class="container hero-container">
     <div class="row">
       <div class="col">
diff --git a/src/layouts/page/products.html b/src/layouts/page/products.html
index 46c923e..9ecc14b 100644
--- a/src/layouts/page/products.html
+++ b/src/layouts/page/products.html
@@ -2,12 +2,7 @@
 
 <!-- Desktop Gen Art -->
 
-<section class="two-boxes hero-section">
-<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="pro-gen-art-1"></div>
-<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="pro-gen-art-2"></div>
-<div class="gen-art animated-5 animatedFadeInUp fadeInUp" id="pro-gen-art-3"></div>
-<div class="gen-art animated-5 animatedFadeInUp fadeInUp" id="pro-gen-art-4"></div>
-<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="pro-gen-art-5"></div>
+<section class="two-boxes product-hero-section">
 
 <!-- Mobile Gen Art -->
 
@@ -97,9 +92,11 @@
   <div class="container">
     <div class="row">
       <div class="col" style="position:relative; z-index:4;">
-        <h1>Products</h1>
-        <p class="lead animated-5 animatedFadeInUp fadeInUp">Just like the perfect cup of tea, greatness takes time to steep. But the wait is over… it’s time to take your first sip.</p>
-        <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
+        <h1 style="margin-bottom: 0px !important;">Products</h1>
+        <div class="lead-text-container animated-25 animatedFadeInUp fadeInUp black-bg p-4">
+          <p class="lead" style="margin-bottom: 0px">Just like the perfect cup of tea, greatness takes time to steep. But the wait is over… it’s time to take your first sip.</p>
+          <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/layouts/partials/mobile-art-home.html b/src/layouts/partials/mobile-art-home.html
new file mode 100644
index 0000000..3c6d9fc
--- /dev/null
+++ b/src/layouts/partials/mobile-art-home.html
@@ -0,0 +1,108 @@
+<style>
+
+  #m-home-gen-art-1{
+    position:absolute;
+    width:57vw;
+    height: 19.3vw;
+    left: 6.8vw;
+    margin-top:164vw;
+    z-index: 1;
+    background-image: url("/Images/gen-art/orange-pattern.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #m-home-gen-art-2{
+    position:absolute;
+    width:36vw;
+    height: 19.3vw;
+    right: 6.8vw;
+    margin-top:154vw;
+    z-index: 3;
+    background-image: url("/Images/gen-art/gen-art-_0010_DALL·E 2022-09-01 10.48.33 - bright blue and green _It’s time we stop robbing Peter to pay Mark and Jeff._.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #m-home-gen-art-3{
+    position:absolute;
+    width:18vw;
+    height: 18vw;
+    border-radius:200px;
+    right: 40vw;
+    margin-top:167vw;
+    z-index: 3;
+    background-image: url("/Images/gen-art/gen-art-_0002_DALL·E 2022-09-01 09.50.45 - rainbow oil spill on pavement.png.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+    animation: rotation 10s infinite linear;
+  }
+
+  #m-home-gen-art-4{
+    position:absolute;
+    width:36vw;
+    height: 12vw;
+    right: 50vw;
+    margin-top:180vw;
+    z-index: 2;
+    background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #m-home-gen-art-5{
+    position:absolute;
+    width:36vw;
+    height: 100vw;
+    right: 50vw;
+    margin-top:20vw;
+    z-index: 1;
+    background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #m-home-gen-art-6{
+    position:absolute;
+    width:36vw;
+    height: 60vw;
+    right: 30vw;
+    margin-top:30vw;
+    z-index: 0;
+    background-image: url("/Images/gen-art/gen-art-_0020_DALL·E 2022-09-02 12.25.55 - crystals in polarized light under microscope.png.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  @keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+
+}
+
+@media only screen and (min-width: 576px) {
+
+  .gen-art-mobile{
+    display: none;
+  }
+
+}
+
+</style>
+
+<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-1"></div>
+<div class="gen-art-mobile animated-5 animatedFadeInUp fadeInUp" id="m-home-gen-art-2"></div>
+<div class="gen-art-mobile" id="m-home-gen-art-3"></div>
+<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-4"></div>
+<div class="gen-art-mobile animated-5 animatedFadeInUp fadeInUp" id="m-home-gen-art-5"></div>
+<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-6"></div>
diff --git a/src/static/Images/prouct-x-large-grid-generative-art.gif b/src/static/Images/prouct-x-large-grid-generative-art.gif
new file mode 100644
index 0000000..6c2905a
Binary files /dev/null and b/src/static/Images/prouct-x-large-grid-generative-art.gif differ
diff --git a/src/static/css/products.css b/src/static/css/products.css
index 8426c56..c4b0372 100644
--- a/src/static/css/products.css
+++ b/src/static/css/products.css
@@ -4,20 +4,14 @@
 
 @media only screen and (min-width: 1200px) {
 
-  .products-hero{
-    background-image: url("Images/x-large-grid.svg");
+  .product-hero-section{
+    background-image: url("/Images/prouct-x-large-grid-generative-art.gif") !important;
     background-attachment: scroll;
     background-position: top;
     background-repeat: repeat;
     background-size: cover;
   }
 
-  .lead-container{
-    padding-left: 25vw;
-    padding-right: 25vw;
-    margin-bottom: -2.7vw;
-  }
-
 }
 
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
diff --git a/src/static/css/typography.css b/src/static/css/typography.css
index 408e287..faaf19e 100644
--- a/src/static/css/typography.css
+++ b/src/static/css/typography.css
@@ -80,7 +80,6 @@ a:hover{
     line-height: 12.4vw;
     margin-top: -1.116vw;
     margin-left: -0.837vw;
-    margin-bottom: 1.2vw;
   }
 
   h2{