diff --git a/opensaas-sh/app_diff/deletions b/opensaas-sh/app_diff/deletions
index 16949c49..5e6e3b06 100644
--- a/opensaas-sh/app_diff/deletions
+++ b/opensaas-sh/app_diff/deletions
@@ -1,6 +1,10 @@
 public/public-banner.png
 src/client/static/avatar-placeholder.png
-src/client/static/open-saas-banner.png
+src/client/static/avatar-placeholder.webp
+src/client/static/da-boi.png
+src/client/static/da-boi.webp
+src/client/static/logo.png
+src/client/static/open-saas-banner.webp
 src/landing-page/logos/SalesforceLogo.tsx
 src/payment/lemonSqueezy/checkoutUtils.ts
 src/payment/lemonSqueezy/paymentDetails.ts
diff --git a/opensaas-sh/app_diff/src/landing-page/components/Hero.tsx.diff b/opensaas-sh/app_diff/src/landing-page/components/Hero.tsx.diff
index 8d65bc20..b034fd2c 100644
--- a/opensaas-sh/app_diff/src/landing-page/components/Hero.tsx.diff
+++ b/opensaas-sh/app_diff/src/landing-page/components/Hero.tsx.diff
@@ -1,7 +1,7 @@
 --- template/app/src/landing-page/components/Hero.tsx
 +++ opensaas-sh/app/src/landing-page/components/Hero.tsx
 @@ -1,7 +1,25 @@
--import openSaasBanner from '../../client/static/open-saas-banner.png';
+-import openSaasBannerWebp from '../../client/static/open-saas-banner.webp';
 -import { DocsUrl } from '../../shared/common';
 +import { useState, useEffect } from 'react';
 +import { AiFillGithub } from 'react-icons/ai';
@@ -26,9 +26,9 @@
 +  }, []);
 +
    return (
-     <div className='relative pt-14 w-full '>
-       <div
-@@ -29,30 +47,47 @@
+     <div className='relative pt-14 w-full'>
+       <TopGradient />
+@@ -9,32 +27,47 @@
        <div className='py-24 sm:py-32'>
          <div className='mx-auto max-w-8xl px-6 lg:px-8'>
            <div className='lg:mb-18 mx-auto max-w-3xl text-center'>
@@ -69,15 +69,18 @@
 +              </a>
              </div>
            </div>
-           <div className='mt-14 flow-root sm:mt-14 '>
--            <div className='-m-2 rounded-xl  lg:-m-4 lg:rounded-2xl lg:p-4'>
+-          <div className='mt-14 flow-root sm:mt-14'>
+-            <div className='-m-2  flex justify-center rounded-xl lg:-m-4 lg:rounded-2xl lg:p-4'>
 -              <img
--                src={openSaasBanner}
+-                src={openSaasBannerWebp}
 -                alt='App screenshot'
--                width={2432}
--                height={1442}
+-                width={1000}
+-                height={530}
+-                loading='lazy'
+-                decoding='async'
 -                className='rounded-md shadow-2xl ring-1 ring-gray-900/10'
 -              />
++          <div className='mt-14 flow-root sm:mt-14 '>
 +            <div className='-m-2 mx-auto rounded-xl lg:-m-4 lg:rounded-2xl lg:p-4'>
 +              <iframe
 +                className=' mx-auto w-full md:w-[85%] aspect-[4/3] shadow-2xl'
diff --git a/opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff b/opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff
index 51351b68..bd6b210e 100644
--- a/opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff
+++ b/opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff
@@ -2,8 +2,8 @@
 +++ opensaas-sh/app/src/landing-page/contentSections.ts
 @@ -1,74 +1,131 @@
 -import { DocsUrl, BlogUrl } from '../shared/common';
--import daBoiAvatar from '../client/static/da-boi.png';
--import avatarPlaceholder from '../client/static/avatar-placeholder.png';
+-import daBoiAvatar from '../client/static/da-boi.webp';
+-import avatarPlaceholder from '../client/static/avatar-placeholder.webp';
 -import { routes } from 'wasp/client/router';
 +import { DocsUrl, BlogUrl, GithubUrl } from '../shared/common';
  
diff --git a/opensaas-sh/app_diff/tailwind.config.cjs.diff b/opensaas-sh/app_diff/tailwind.config.cjs.diff
index 825c6702..2fcd39c2 100644
--- a/opensaas-sh/app_diff/tailwind.config.cjs.diff
+++ b/opensaas-sh/app_diff/tailwind.config.cjs.diff
@@ -1,13 +1,15 @@
 --- template/app/tailwind.config.cjs
 +++ opensaas-sh/app/tailwind.config.cjs
-@@ -8,6 +8,7 @@
+@@ -8,7 +8,8 @@
    theme: {
      extend: {
        fontFamily: {
+-        satoshi: ['Satoshi', 'system-ui', 'sans-serif'],
 +        sans: ['ui-monospace', 'Liberation Mono', 'Menlo', 'monospace'],
-         satoshi: ['Satoshi', 'sans-serif'],
++        satoshi: ['Satoshi', 'sans-serif'],
        },
        colors: {
+         current: 'currentColor',
 @@ -246,6 +247,9 @@
          'spin-2': 'spin 2s linear infinite',
          'spin-3': 'spin 3s linear infinite',
diff --git a/template/app/src/landing-page/components/Hero.tsx b/template/app/src/landing-page/components/Hero.tsx
index f0844af5..3938eb3a 100644
--- a/template/app/src/landing-page/components/Hero.tsx
+++ b/template/app/src/landing-page/components/Hero.tsx
@@ -4,9 +4,8 @@ import { DocsUrl } from '../../shared/common';
 export default function Hero() {
   return (
     <div className='relative pt-14 w-full'>
-      {/* <BackgroundGradient1 />
-      <BackgroundGradient2 /> */}
-
+      <TopGradient />
+      <BottomGradient />
       <div className='py-24 sm:py-32'>
         <div className='mx-auto max-w-8xl px-6 lg:px-8'>
           <div className='lg:mb-18 mx-auto max-w-3xl text-center'>
@@ -44,3 +43,34 @@ export default function Hero() {
   );
 }
 
+function TopGradient() {
+  return (
+    <div
+      className='absolute top-0 right-0 -z-10 transform-gpu overflow-hidden w-full blur-3xl sm:top-0'
+    aria-hidden='true'
+  >
+    <div
+      className='aspect-[1020/880] w-[55rem] flex-none sm:right-1/4 sm:translate-x-1/2 dark:hidden bg-gradient-to-tr from-amber-400 to-purple-300 opacity-40'
+      style={{
+        clipPath: 'polygon(80% 20%, 90% 55%, 50% 100%, 70% 30%, 20% 50%, 50% 0)',
+      }}
+      />
+    </div>
+  );
+}
+
+function BottomGradient() {
+  return (
+    <div
+      className='absolute inset-x-0 top-[calc(100%-40rem)] sm:top-[calc(100%-65rem)] -z-10 transform-gpu overflow-hidden blur-3xl'
+    aria-hidden='true'
+  >
+    <div
+      className='relative aspect-[1020/880] sm:-left-3/4 sm:translate-x-1/4 dark:hidden bg-gradient-to-br from-amber-400 to-purple-300  opacity-50 w-[72.1875rem]'
+      style={{
+        clipPath: 'ellipse(80% 30% at 80% 50%)',
+      }}
+    />
+    </div>
+  );
+}
\ No newline at end of file