diff --git a/src/components/sections/ready/ready.tsx b/src/components/sections/ready/ready.tsx
index 991f375..6591f86 100644
--- a/src/components/sections/ready/ready.tsx
+++ b/src/components/sections/ready/ready.tsx
@@ -5,6 +5,12 @@ import { Container } from '@/components/container';
 import styles from './ready.module.css';
 
 export function Ready() {
+  const handleClick = () => {
+    const app = document.getElementById('app');
+
+    app?.scrollIntoView(true);
+  };
+
   return (
     <div className={styles.ready}>
       <Container>
@@ -18,9 +24,9 @@ export function Ready() {
 
           <h2 className={styles.title}>Are you ready?</h2>
           <p className={styles.desc}>Create your calm oasis in seconds!</p>
-          <a className={styles.button} href="#app">
+          <button className={styles.button} onClick={handleClick}>
             Use Moodist
-          </a>
+          </button>
         </div>
       </Container>
     </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f38bc12..50fec53 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -12,6 +12,6 @@ import { AboutSection, WhySection, ReadySection } from '@/components/sections';
   <App client:load />
   <AboutSection />
   <WhySection />
-  <ReadySection />
+  <ReadySection client:load />
   <Footer />
 </Layout>