diff --git a/docs-src/src/content/docs/recipes/cookbook.md b/docs-src/src/content/docs/recipes/cookbook.md
index b355aa688..7cc23862e 100644
--- a/docs-src/src/content/docs/recipes/cookbook.md
+++ b/docs-src/src/content/docs/recipes/cookbook.md
@@ -59,7 +59,7 @@ const tour = new Shepherd.Tour({
 Using the already exposed API, you could add a progress indicator of your choosing
 for each step to let your users know how far into a tour they may be.
 
-The example below uses the [Step](https://docs.shepherdpro.com/api/step/classes/step/) `options`
+The example below uses the [Step](https://docs.shepherdjs.dev/api/step/classes/step/) `options`
 object and adds to `when` on the `show` event. Within that, we create an element
 to render in the header with text of what step out of all potential steps is now
 being show.
diff --git a/landing/src/components/Header.astro b/landing/src/components/Header.astro
index c38fb59c6..c6503dca6 100644
--- a/landing/src/components/Header.astro
+++ b/landing/src/components/Header.astro
@@ -69,91 +69,108 @@ const { isHome } = Astro.props;
     <h2 class='font-body p-2 text-xl'>
       Guide your users through a tour of your app
     </h2>
-    <div class='flex justify-center w-full'>
-      {
-        isHome && (
-          <div class='flex flex-wrap max-w-6xl p-4 w-full lg:flex-nowrap'>
-            <div class='m-4 relative w-full lg:w-1/3'>
-              <div class='border-4 border-navy w-full'>
-                <img
-                  class='absolute a11y-icon z-20'
-                  src='/img/accessibility.svg'
-                  alt=''
-                  role='presentation'
-                />
-
-                <div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10'></div>
-
-                <div class='bg-white h-72 p-6 relative z-10'>
-                  <h3 class='p-2 text-2xl text-center uppercase w-full'>
-                    Accessibility
-                  </h3>
-
-                  <p class='font-body p-2 text-xl'>
-                    Shepherd has full keyboard navigation support, focus
-                    trapping, and a11y compliance via aria attributes.
-                  </p>
-                </div>
-
-                <div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0'></div>
+
+    {
+      isHome && (
+        <div class='column justify-center w-full'>
+          <div class='mx-auto max-w-2xl text-center'>
+            <div class='mt-10 flex items-center justify-center gap-x-6'>
+              <div class='bg-navy inline-block mb-4 w-56'>
+                <button
+                  id="showTour"
+                  type='button'
+                  class='button bg-white border-2 border-navy p-6 text-navy whitespace-nowrap w-full'
+                >
+                  Show Demo Tour
+                </button>
               </div>
+              <a href="#hero-including" class='mb-4 text-md font-semibold leading-6 text-gray-900'>
+                Learn more <span aria-hidden='true'>→</span>
+              </a>
             </div>
+          </div>
+        </div>
+        <div class='flex flex-wrap max-w-6xl p-4 w-full lg:flex-nowrap'>
+          <div class='m-4 relative w-full lg:w-1/3'>
+            <div class='border-4 border-navy w-full'>
+              <img
+                class='absolute a11y-icon z-20'
+                src='/img/accessibility.svg'
+                alt=''
+                role='presentation'
+              />
+
+              <div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10' />
+
+              <div class='bg-white h-72 p-6 relative z-10'>
+                <h3 class='p-2 text-2xl text-center uppercase w-full'>
+                  Accessibility
+                </h3>
+
+                <p class='font-body p-2 text-xl'>
+                  Shepherd has full keyboard navigation support, focus trapping,
+                  and a11y compliance via aria attributes.
+                </p>
+              </div>
 
-            <div class='m-4 relative w-full lg:w-1/3'>
-              <div class='border-4 border-navy w-full'>
-                <img
-                  class='absolute customizable-icon z-20'
-                  src='/img/customizable.svg'
-                  alt=''
-                  role='presentation'
-                />
-
-                <div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10'></div>
-
-                <div class='bg-white h-72 p-6 relative z-10'>
-                  <h3 class='p-2 text-2xl text-center uppercase w-full'>
-                    Highly Customizable
-                  </h3>
-
-                  <p class='font-body p-2 text-xl'>
-                    Shepherd's styles are kept minimal, allowing you to easily
-                    customize the look and feel, but still give you enough to
-                    drop in and be ready to go quickly.
-                  </p>
-                </div>
-
-                <div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0'></div>
+              <div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0' />
+            </div>
+          </div>
+
+          <div class='m-4 relative w-full lg:w-1/3'>
+            <div class='border-4 border-navy w-full'>
+              <img
+                class='absolute customizable-icon z-20'
+                src='/img/customizable.svg'
+                alt=''
+                role='presentation'
+              />
+
+              <div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10' />
+
+              <div class='bg-white h-72 p-6 relative z-10'>
+                <h3 class='p-2 text-2xl text-center uppercase w-full'>
+                  Highly Customizable
+                </h3>
+
+                <p class='font-body p-2 text-xl'>
+                  Shepherd's styles are kept minimal, allowing you to easily
+                  customize the look and feel, but still give you enough to drop
+                  in and be ready to go quickly.
+                </p>
               </div>
+
+              <div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0' />
             </div>
+          </div>
 
-            <div class='m-4 relative w-full lg:w-1/3'>
-              <div class='border-4 border-navy w-full'>
-                <img
-                  class='absolute framework-icon z-20'
-                  src='/img/framework.svg'
-                  alt=''
-                  role='presentation'
-                />
-
-                <div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10'></div>
-
-                <div class='bg-white h-72 p-6 relative z-10'>
-                  <h3 class='p-2 text-2xl text-center uppercase w-full'>
-                    Framework Ready
-                  </h3>
-
-                  <p class='font-body p-2 text-xl'>
-                    Shepherd is ready to drop into your application using React,
-                    Ember, Angular, Vue.js, ES Modules, or plain Javascript!
-                  </p>
-                </div>
-
-                <div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0'></div>
+          <div class='m-4 relative w-full lg:w-1/3'>
+            <div class='border-4 border-navy w-full'>
+              <img
+                class='absolute framework-icon z-20'
+                src='/img/framework.svg'
+                alt=''
+                role='presentation'
+              />
+
+              <div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10' />
+
+              <div class='bg-white h-72 p-6 relative z-10'>
+                <h3 class='p-2 text-2xl text-center uppercase w-full'>
+                  Framework Ready
+                </h3>
+
+                <p class='font-body p-2 text-xl'>
+                  Shepherd is ready to drop into your application using React,
+                  Ember, Angular, Vue.js, ES Modules, or plain Javascript!
+                </p>
               </div>
+
+              <div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0' />
             </div>
           </div>
-        )
-      }
-    </div>
+        </div>
+      )
+    }
   </div>
 </header>
diff --git a/landing/src/pages/index.astro b/landing/src/pages/index.astro
index 6eeaf66eb..d16adbf50 100644
--- a/landing/src/pages/index.astro
+++ b/landing/src/pages/index.astro
@@ -5,39 +5,39 @@ import MainPage from '@layouts/MainPage.astro';
 
 <MainPage isHome={true}>
   <div
-    class="font-heading mt-8 text-6xl text-center uppercase w-full"
-    slot="hero-heading"
+    class='font-heading mt-8 text-6xl text-center uppercase w-full'
+    slot='hero-heading'
   >
     <img
-      class="inline p-4 w-full lg:mt-4 lg:p-0 lg:w-auto"
-      src="/img/demo.svg"
-      alt="Demo"
+      class='inline p-4 w-full lg:mt-4 lg:p-0 lg:w-auto'
+      src='/img/demo.svg'
+      alt='Demo'
     />
   </div>
 
-  <div slot="content">
-    <div class="hero-including mt-8">
-      <h3 class="demo-heading font-heading text-2xl uppercase">
+  <div slot='content'>
+    <div class='hero-including mt-8' id='hero-including'>
+      <h3 class='demo-heading font-heading text-2xl uppercase'>
         01. How to Include
       </h3>
-      <div class="hero-example-code text-left">
+      <div class='hero-example-code text-left'>
         <Code
           code={`
 	<link rel="stylesheet" href="shepherd.js/dist/css/shepherd.css"/>
 	<script type="module" src="shepherd.js/dist/shepherd.mjs"></script>
   
 `}
-          lang="js"
-          theme="nord"
+          lang='js'
+          theme='nord'
           wrap
         />
       </div>
     </div>
 
-    <div class="hero-example mt-8">
-      <h3 class="demo-heading font-heading text-2xl uppercase">02. Example</h3>
+    <div class='hero-example mt-8'>
+      <h3 class='demo-heading font-heading text-2xl uppercase'>02. Example</h3>
 
-      <div class="hero-example-code text-left">
+      <div class='hero-example-code text-left'>
         <Code
           code={`
 	const tour = new Shepherd.Tour({
@@ -77,8 +77,8 @@ import MainPage from '@layouts/MainPage.astro';
 
 	tour.start();
 					`}
-          lang="js"
-          theme="nord"
+          lang='js'
+          theme='nord'
           wrap
         />
       </div>
@@ -94,7 +94,9 @@ import MainPage from '@layouts/MainPage.astro';
       // wait for shepherd to be ready
       setTimeout(function () {
         const shepherd = setupShepherd();
-        shepherd.start();
+        const startBtn = document.querySelector('#showTour');
+
+        startBtn?.addEventListener('click', () => shepherd.start());
       }, 400);
     }
 
diff --git a/shepherd.js/src/tour.ts b/shepherd.js/src/tour.ts
index 886eac5c2..03581d1b7 100644
--- a/shepherd.js/src/tour.ts
+++ b/shepherd.js/src/tour.ts
@@ -332,12 +332,12 @@ export class Tour extends Evented {
       if (shouldSkipStep) {
         this._skipStep(step, forward);
       } else {
+        this.currentStep = step;
         this.trigger('show', {
           step,
           previous: this.currentStep
         });
 
-        this.currentStep = step;
         step.show();
       }
     }