diff --git a/layouts/index.html b/layouts/index.html
index c09fba2df290..464a75a1384e 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,33 +1,37 @@
 {{ define "hero" }}
     <header class="bg-purple-500 text-white py-24 px-4">
-        <div class="container mx-auto text-white md:flex">
-            <div class="md:w-1/2 md:mr-8">
+        <div class="container mx-auto text-white lg:flex">
+            <div class="lg:w-1/2 lg:mr-8">
                 <h1 class="text-white">Modern Infrastructure as Code</h1>
                 <p class="text-xl leading-relaxed text-purple-100">
                     Create, deploy, and manage infrastructure on any cloud using your
                     favorite language.
                 </p>
-                <div class="mt-4">
-                    <a class="inline-block btn btn-lg mr-2" href="{{ relref . "/docs/quickstart" }}">Try Pulumi for Free</a>
-                    <a class="inline-block btn btn-lg btn-orange-translucent mt-4" href="{{ relref . "/why-pulumi" }}">Why Pulumi</a>
+                <div class="flex md:inline-flex items-center mt-4 md:mt-2 flex-col md:flex-row">
+                    <a class="w-full text-center btn btn-lg mb-4 md:mb-0 md:mr-4" href="{{ relref . "/docs/quickstart" }}">Try Pulumi for Free</a>
+                    <a class="w-full text-center btn btn-lg btn-orange-translucent" href="{{ relref . "/why-pulumi" }}">Why Pulumi</a>
                 </div>
             </div>
-            <div class="md:w-1/2 md:ml-8 text-white">
-                [ Carousel ]
-                <!-- Carousel here. -->
+            <div class="lg:w-1/2 text-white mt-8 lg:mt-0">
+                <iframe class="rounded shadow-lg max-w-full"
+                    width="642" height="351"
+                    src="https://www.youtube.com/embed/xgzkbW6LEEg?rel=0"
+                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                    frameborder="0"
+                    allowfullscreen></iframe>
             </div>
         </div>
     </header>
 {{ end }}
 
 {{ define "main" }}
-    <nav class="bg-purple-700 text-white py-6 px-4 md:px-0">
+    <nav class="bg-purple-700 text-white py-6 px-4 lg:px-0">
         <div class="container mx-auto">
             <div class="flex items-center justify-center">
-                <div class="text-sm text-white mx-8">
+                <div class="hidden md:block text-sm text-white mx-8 whitespace-no-wrap">
                     Any Cloud
                 </div>
-                <ul class="inline-flex list-none p-0 items-center mx-8">
+                <ul class="inline-flex list-none p-0 items-center mx-4 md:mx-8">
                     <li class="mr-2">
                         <a href="{{ relref . "/partner/aws" }}"><img class="w-8" src="/logos/tech/logo-aws_white.png" alt="aws"></a>
                     </li>
@@ -41,7 +45,7 @@ <h1 class="text-white">Modern Infrastructure as Code</h1>
                         <a href="{{ relref . "/topics/kubernetes" }}"><img class="w-8" src="/logos/tech/logo-kubernetes.png" alt="kubernetes"></a>
                     </li>
                 </ul>
-                <ul class="inline-flex list-none p-0 items-center mx-8">
+                <ul class="inline-flex list-none p-0 items-center mx-4 md:mx-8">
                     <li class="mr-2">
                         <img class="w-8" src="/logos/tech/logo-js.png" alt="js">
                     </li>
@@ -55,7 +59,7 @@ <h1 class="text-white">Modern Infrastructure as Code</h1>
                         <img class="w-8" src="/logos/tech/logo-ts.png" alt="typescript">
                     </li>
                 </ul>
-                <div class="text-sm text-white mx-8">
+                <div class="hidden md:block text-sm text-white mx-8 whitespace-no-wrap">
                     Any Language
                 </div>
             </div>
@@ -63,12 +67,12 @@ <h1 class="text-white">Modern Infrastructure as Code</h1>
     </nav>
 
     <section class="py-16">
-        <div class="container mx-auto text-center px-4 md:px-0">
+        <div class="container mx-auto text-center px-4 lg:px-0">
             <h2 class="text-black">Companies Innovating with Pulumi</h2>
-            <div class="flex justify-center my-12">
-                <img class="h-12 mx-8" src="/logos/customers/tableau_logo.png" alt="Tableau Software">
-                <img class="h-12 mx-8" src="/logos/customers/mercedes-benz-RDNA_logo.png" alt="Mercedes-Benz Research and Development">
-                <img class="h-12 mx-8" src="/logos/customers/mindbody_logo.svg" alt="MindBody">
+            <div class="lg:flex justify-center my-12">
+                <img class="mx-auto lg:mx-8 h-12 mx-8" src="/logos/customers/tableau_logo.png" alt="Tableau Software">
+                <img class="mx-auto lg:mx-8 my-8 lg:my-0 h-12 mx-8" src="/logos/customers/mercedes-benz-RDNA_logo.png" alt="Mercedes-Benz Research and Development">
+                <img class="mx-auto lg:mx-8 h-12 mx-8" src="/logos/customers/mindbody_logo.svg" alt="MindBody">
             </div>
             <blockquote class="border-orange-500 italic text-gray-800 mb-8 max-w-5xl mx-auto">
                 We have hundreds of microservices on-premises, and we are in the process
@@ -89,7 +93,7 @@ <h2 class="text-black">Companies Innovating with Pulumi</h2>
         </div>
     </section>
 
-    <section class="py-16 bg-purple-700">
+    <section class="pt-16 pb-4 bg-purple-800">
         <div class="container mx-auto text-center px-4 md:px-0">
             <h2 class="text-white">Go Multi-Cloud</h2>
             <p class="text-xl leading-relaxed text-purple-100 max-w-3xl mx-auto">
@@ -97,8 +101,8 @@ <h2 class="text-white">Go Multi-Cloud</h2>
                 infrastructure &mdash; while also unleashing one consistent approach to
                 software delivery no matter your cloud provider.
             </p>
-            <div class="md:flex mt-8 mb-4">
-                <div class="md:w-1/4 mb-8 bg-purple-800 text-white text-sm p-8 mx-4 shadow-lg">
+            <div class="md:flex flex-wrap justify-center mt-8 mb-12 mb-4">
+                <div class="w-10/12 mx-auto mb-4 md:w-1/3 md:mx-3 lg:w-1/5 bg-purple-700 text-white text-sm p-8 shadow-lg rounded">
                     <div class="flex flex-col justify-between h-full">
                         <img class="inline-block w-24 mx-auto" src="/icons/icon-feature-containers.svg">
                         <h3 class="text-white">Containers</h3>
@@ -109,7 +113,7 @@ <h3 class="text-white">Containers</h3>
                         <a class="btn btn-sm btn-orange-translucent mt-8" href="{{ relref . "/topics/containers.md" }}">More Containers</a>
                     </div>
                 </div>
-                <div class="md:w-1/4 mb-8 bg-purple-800 text-white text-sm p-8 mx-4 shadow-lg">
+                <div class="w-10/12 mx-auto mb-4 md:w-1/3 md:mx-3 lg:w-1/5 bg-purple-700 text-white text-sm p-8 shadow-lg rounded">
                     <div class="flex flex-col justify-between h-full">
                         <img class="inline-block w-24 mx-auto" src="/icons/icon-feature-serverless.svg">
                         <h3 class="text-white">Serverless</h3>
@@ -121,7 +125,7 @@ <h3 class="text-white">Serverless</h3>
                         <a class="btn btn-sm btn-orange-translucent mt-8" href="{{ relref . "/topics/serverless.md" }}">More Serverless</a>
                     </div>
                 </div>
-                <div class="md:w-1/4 mb-8 bg-purple-800 text-white text-sm p-8 mx-4 shadow-lg">
+                <div class="w-10/12 mx-auto mb-4 md:w-1/3 md:mx-3 lg:w-1/5 bg-purple-700 text-white text-sm p-8 shadow-lg rounded">
                     <div class="flex flex-col justify-between h-full">
                         <img class="inline-block w-24 mx-auto" src="/icons/icon-feature-data.svg">
                         <h3 class="text-white">Infrastructure</h3>
@@ -133,7 +137,7 @@ <h3 class="text-white">Infrastructure</h3>
                         <a class="btn btn-sm btn-orange-translucent mt-8" href="{{ relref . "/docs/reference/tutorials/aws/tutorial-ec2-webserver" }}">More Infrastructure</a>
                     </div>
                 </div>
-                <div class="md:w-1/4 mb-8 bg-purple-800 text-white text-sm p-8 mx-4 shadow-lg">
+                <div class="w-10/12 mx-auto mb-4 md:w-1/3 md:mx-3 lg:w-1/5 bg-purple-700 text-white text-sm p-8 shadow-lg rounded">
                     <div class="flex flex-col justify-between h-full">
                         <img class="inline-block w-24 mx-auto" src="/icons/icon-feature-kubernetes.svg">
                         <h3 class="text-white">Kubernetes</h3>
@@ -153,11 +157,11 @@ <h3 class="text-white">Kubernetes</h3>
     <img class="w-full" src="/images/waves.svg">
 
     <section class="py-16">
-        <div class="container mx-auto px-4 md:px-0">
+        <div class="container mx-auto px-4 lg:px-0">
             <h2 class="text-black text-center mb-8">What They're Saying About Pulumi</h2>
-            <div class="md:flex max-w-3xl mx-auto">
+            <div class="lg:flex max-w-3xl mx-auto">
                 {{ range $.Site.Data.testimonials.testimonial }}
-                    <div class="md:mx-4">
+                    <div class="lg:mx-4 my-8 lg:my-0">
                         <blockquote class="border-orange-500 italic text-gray-800 mb-4">
                             {{ .content }}
                         </blockquote>
@@ -172,7 +176,7 @@ <h2 class="text-black text-center mb-8">What They're Saying About Pulumi</h2>
     </section>
 
     <section class="bg-gray-200 py-16">
-        <div class="container mx-auto px-4 md:px-0 max-w-4xl">
+        <div class="container mx-auto px-4 lg:px-0 max-w-4xl">
             <h2 class="text-black">Any Code. Any Cloud. Any Team.</h2>
 
             <p class="text-xl">
@@ -180,9 +184,9 @@ <h2 class="text-black">Any Code. Any Cloud. Any Team.</h2>
                 apps and infrastructure.
             </p>
 
-            <div class="md:flex my-12">
-                <div class="md:w-1/3">
-                    <img class="h-20 mb-4" src="/icons/icon-audience-dev.svg">
+            <div class="lg:flex mt-12">
+                <div class="max-w-sm md:w-auto text-center md:text-left mx-auto md:mx-0 md:w-1/3">
+                    <img class="mx-auto md:mx-0 h-20 mb-4" src="/icons/icon-audience-dev.svg">
                     <div class="text-xs text-purple-800">FOR DEVELOPERS</div>
                     <div class="text-2xl text-black">Any Code.</div>
                     <p class="text-sm">
@@ -193,8 +197,8 @@ <h2 class="text-black">Any Code. Any Cloud. Any Team.</h2>
                         Learn More &rarr;
                     </a>
                 </div>
-                <div class="md:w-1/3 md:mx-8 my-12 md:my-0">
-                    <img class="h-20 mb-4" src="/icons/icon-audience-devops.svg">
+                <div class="max-w-sm md:w-auto text-center md:text-left mx-auto md:mx-0 md:w-1/3 lg:mx-8 my-12 lg:my-0">
+                    <img class="mx-auto md:mx-0 h-20 mb-4" src="/icons/icon-audience-devops.svg">
                     <div class="text-xs text-purple-800">FOR DEVOPS</div>
                     <div class="text-2xl text-black">Any Cloud.</div>
                     <p class="text-sm">
@@ -205,8 +209,8 @@ <h2 class="text-black">Any Code. Any Cloud. Any Team.</h2>
                         Learn More &rarr;
                     </a>
                 </div>
-                <div class="md:w-1/3">
-                    <img class="h-20 mb-4" src="/icons/icon-audience-enterprise.svg">
+                <div class="max-w-sm md:w-auto text-center md:text-left mx-auto md:mx-0 md:w-1/3">
+                    <img class="mx-auto md:mx-0 h-20 mb-4" src="/icons/icon-audience-enterprise.svg">
                     <div class="text-xs text-purple-800">FOR ENTERPRISES</div>
                     <div class="text-2xl text-black">Any Team.</div>
                     <p class="text-sm">
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 925a7be91722..f6a175caf088 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -36,7 +36,7 @@
                 {{ range $.Site.Menus.header }}
                     <li>
                         {{ $active := hasPrefix $.RelPermalink .URL }}
-                        <a href="{{ .URL }}" class="block py-2 md:py-0 md:px-4 md:py-2 md:mx-4 border text-sm hover:border-purple-500 hover:bg-purple-600 rounded {{ if $active }}border-purple-500 bg-purple-600{{ else }}border-purple-700{{ end }}">
+                        <a href="{{ .URL }}" class="block py-2 px-4 md:px-0 md:py-0 md:px-4 md:py-2 md:mx-4 border text-sm hover:border-purple-500 hover:bg-purple-600 rounded {{ if $active }}border-purple-500 bg-purple-600{{ else }}border-purple-700{{ end }}">
                             {{ .Title }}
                         </a>
                     </li>