diff --git a/.eslintrc.json b/.eslintrc.json
index 84dca71..1d3d157 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -86,7 +86,8 @@
 
       "rules": {
         "prettier/prettier": "error",
-        "react/no-unknown-property": "off"
+        "react/no-unknown-property": "off",
+        "react/jsx-key": "off"
       },
 
       "globals": {
diff --git a/src/components/sections/about.astro b/src/components/sections/about.astro
new file mode 100644
index 0000000..611dea1
--- /dev/null
+++ b/src/components/sections/about.astro
@@ -0,0 +1,62 @@
+---
+import { Container } from '@/components/container';
+import { count as soundCount } from '@/lib/sounds';
+
+const count = soundCount();
+---
+
+<div class="about">
+  <Container>
+    <div class="titleWrapper">
+      <h2 class="title">What is Moodist?</h2>
+      <div class="line"></div>
+    </div>
+    <p class="desc">
+      Welcome to Moodist – your free, open-source ambient sound generator. With <span
+        >{count} curated sounds</span
+      >, effortlessly create your custom mix for focus or relaxation. No
+      accounts, no hassle – just pure tranquility. Explore nature&apos;s calm
+      and urban rhythms. Elevate your ambiance with Moodist, where simplicity
+      meets serenity.
+    </p>
+  </Container>
+</div>
+
+<style>
+  .about {
+    padding: 80px 0;
+
+    & .titleWrapper {
+      display: flex;
+      align-items: center;
+      column-gap: 12px;
+
+      & .title {
+        margin-bottom: 12px;
+        font-family: var(--font-display);
+        font-size: var(--font-lg);
+        font-weight: 600;
+      }
+
+      & .line {
+        height: 1px;
+        flex-grow: 1;
+        background: linear-gradient(
+          90deg,
+          var(--color-neutral-300),
+          transparent
+        );
+        transform: translateY(-0.25rem);
+      }
+    }
+
+    & .desc {
+      color: var(--color-foreground-subtle);
+      line-height: 1.7;
+
+      & span {
+        color: var(--color-foreground);
+      }
+    }
+  }
+</style>
diff --git a/src/components/sections/about/about.module.css b/src/components/sections/about/about.module.css
deleted file mode 100644
index c4f8968..0000000
--- a/src/components/sections/about/about.module.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.about {
-  padding: 80px 0;
-
-  & .titleWrapper {
-    display: flex;
-    align-items: center;
-    column-gap: 12px;
-
-    & .title {
-      margin-bottom: 12px;
-      font-family: var(--font-display);
-      font-size: var(--font-lg);
-      font-weight: 600;
-    }
-
-    & .line {
-      height: 1px;
-      flex-grow: 1;
-      background: linear-gradient(90deg, var(--color-neutral-300), transparent);
-      transform: translateY(-0.25rem);
-    }
-  }
-
-  & .desc {
-    color: var(--color-foreground-subtle);
-    line-height: 1.7;
-
-    & span {
-      color: var(--color-foreground);
-    }
-  }
-}
diff --git a/src/components/sections/about/about.tsx b/src/components/sections/about/about.tsx
deleted file mode 100644
index 4d71371..0000000
--- a/src/components/sections/about/about.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useMemo } from 'react';
-
-import { Container } from '@/components/container';
-import { count as soundCount } from '@/lib/sounds';
-
-import styles from './about.module.css';
-
-export function About() {
-  const count = useMemo(soundCount, []);
-
-  return (
-    <div className={styles.about}>
-      <Container>
-        <div className={styles.titleWrapper}>
-          <h2 className={styles.title}>What is Moodist?</h2>
-          <div className={styles.line} />
-        </div>
-        <p className={styles.desc}>
-          Welcome to Moodist – your free, open-source ambient sound generator.
-          With <span>{count} curated sounds</span>, effortlessly create your
-          custom mix for focus or relaxation. No accounts, no hassle – just pure
-          tranquility. Explore nature&apos;s calm and urban rhythms. Elevate
-          your ambiance with Moodist, where simplicity meets serenity.
-        </p>
-      </Container>
-    </div>
-  );
-}
diff --git a/src/components/sections/about/index.ts b/src/components/sections/about/index.ts
deleted file mode 100644
index 4629637..0000000
--- a/src/components/sections/about/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { About } from './about';
diff --git a/src/components/sections/index.ts b/src/components/sections/index.ts
deleted file mode 100644
index da878a0..0000000
--- a/src/components/sections/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { About as AboutSection } from './about';
-export { Why as WhySection } from './why';
-export { Ready as ReadySection } from './ready';
diff --git a/src/components/sections/ready.astro b/src/components/sections/ready.astro
new file mode 100644
index 0000000..cd1df21
--- /dev/null
+++ b/src/components/sections/ready.astro
@@ -0,0 +1,119 @@
+---
+import { RiSparkling2Line } from 'react-icons/ri/index';
+
+import { Container } from '@/components/container';
+---
+
+<div class="ready">
+  <Container>
+    <div class="wrapper">
+      <div class="iconContainer">
+        <div class="tail"></div>
+        <div class="icon">
+          <RiSparkling2Line />
+        </div>
+      </div>
+
+      <h2 class="title">Are you ready?</h2>
+      <p class="desc">Create your calm oasis in seconds!</p>
+      <button class="button" id="button"> Use Moodist</button>
+    </div>
+  </Container>
+</div>
+
+<script>
+  const button = document.getElementById('button');
+
+  button?.addEventListener('click', () => {
+    const app = document.getElementById('app');
+
+    app?.scrollIntoView(true);
+  });
+</script>
+
+<style>
+  .ready {
+    & .wrapper {
+      position: relative;
+      padding: 0 20px 40px;
+      border-radius: 0 0 20px 20px;
+      background: linear-gradient(transparent, var(--color-neutral-100));
+
+      &::after {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        width: 70%;
+        height: 1px;
+        background: linear-gradient(
+          90deg,
+          transparent,
+          var(--color-neutral-300),
+          transparent
+        );
+        content: '';
+        transform: translateX(-50%);
+      }
+    }
+
+    & .iconContainer {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-bottom: 15px;
+
+      & .tail {
+        width: 1px;
+        height: 75px;
+        background: linear-gradient(transparent, var(--color-neutral-300));
+      }
+
+      & .icon {
+        display: flex;
+        width: 45px;
+        height: 45px;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid var(--color-neutral-300);
+        border-radius: 50%;
+        background-color: var(--color-neutral-100);
+        color: #fbbf24;
+        font-size: var(--font-md);
+      }
+    }
+
+    & .title {
+      margin-bottom: 12px;
+      font-family: var(--font-display);
+      font-size: var(--font-lg);
+      font-weight: 600;
+      text-align: center;
+    }
+
+    & .desc {
+      color: var(--color-foreground-subtle);
+      text-align: center;
+    }
+
+    & .button {
+      display: flex;
+      width: 120px;
+      height: 40px;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      border-radius: 100px;
+      border-top: 2px solid var(--color-neutral-950);
+      border-bottom: 3px solid var(--color-neutral-600);
+      margin: 24px auto 0;
+      background-color: var(--color-neutral-700);
+      color: var(--color-neutral-200);
+      cursor: pointer;
+      font-family: var(--font-heading);
+      font-size: var(--font-sm);
+      line-height: 0;
+      outline: none;
+      text-decoration: none;
+    }
+  }
+</style>
diff --git a/src/components/sections/ready/index.ts b/src/components/sections/ready/index.ts
deleted file mode 100644
index ffb272e..0000000
--- a/src/components/sections/ready/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Ready } from './ready';
diff --git a/src/components/sections/ready/ready.module.css b/src/components/sections/ready/ready.module.css
deleted file mode 100644
index 97afa25..0000000
--- a/src/components/sections/ready/ready.module.css
+++ /dev/null
@@ -1,84 +0,0 @@
-.ready {
-  & .wrapper {
-    position: relative;
-    padding: 0 20px 40px;
-    border-radius: 0 0 20px 20px;
-    background: linear-gradient(transparent, var(--color-neutral-100));
-
-    &::after {
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      width: 70%;
-      height: 1px;
-      background: linear-gradient(
-        90deg,
-        transparent,
-        var(--color-neutral-300),
-        transparent
-      );
-      content: '';
-      transform: translateX(-50%);
-    }
-  }
-
-  & .iconContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-bottom: 15px;
-
-    & .tail {
-      width: 1px;
-      height: 75px;
-      background: linear-gradient(transparent, var(--color-neutral-300));
-    }
-
-    & .icon {
-      display: flex;
-      width: 45px;
-      height: 45px;
-      align-items: center;
-      justify-content: center;
-      border: 1px solid var(--color-neutral-300);
-      border-radius: 50%;
-      background-color: var(--color-neutral-100);
-      color: #fbbf24;
-      font-size: var(--font-md);
-    }
-  }
-
-  & .title {
-    margin-bottom: 12px;
-    font-family: var(--font-display);
-    font-size: var(--font-lg);
-    font-weight: 600;
-    text-align: center;
-  }
-
-  & .desc {
-    color: var(--color-foreground-subtle);
-    text-align: center;
-  }
-
-  & .button {
-    display: flex;
-    width: 120px;
-    height: 40px;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    border-radius: 100px;
-    border-top: 2px solid var(--color-neutral-950);
-    border-bottom: 3px solid var(--color-neutral-600);
-    margin: 24px auto 0;
-    background-color: var(--color-neutral-700);
-    color: var(--color-neutral-200);
-    cursor: pointer;
-    font-family: var(--font-heading);
-    font-size: var(--font-sm);
-    line-height: 0;
-    outline: none;
-    text-decoration: none;
-  }
-}
diff --git a/src/components/sections/ready/ready.tsx b/src/components/sections/ready/ready.tsx
deleted file mode 100644
index 6591f86..0000000
--- a/src/components/sections/ready/ready.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { RiSparkling2Line } from 'react-icons/ri/index';
-
-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>
-        <div className={styles.wrapper}>
-          <div className={styles.iconContainer}>
-            <div className={styles.tail} />
-            <div className={styles.icon}>
-              <RiSparkling2Line />
-            </div>
-          </div>
-
-          <h2 className={styles.title}>Are you ready?</h2>
-          <p className={styles.desc}>Create your calm oasis in seconds!</p>
-          <button className={styles.button} onClick={handleClick}>
-            Use Moodist
-          </button>
-        </div>
-      </Container>
-    </div>
-  );
-}
diff --git a/src/components/sections/why.astro b/src/components/sections/why.astro
new file mode 100644
index 0000000..758d7eb
--- /dev/null
+++ b/src/components/sections/why.astro
@@ -0,0 +1,157 @@
+---
+import { BiMoney, BiUserCircle, BiLogoGithub } from 'react-icons/bi/index';
+import { BsSoundwave, BsStars } from 'react-icons/bs/index';
+import { RxMixerHorizontal } from 'react-icons/rx/index';
+
+import { Balancer } from 'react-wrap-balancer';
+
+import { Container } from '@/components/container';
+import { count as soundCount } from '@/lib/sounds';
+
+const count = soundCount();
+
+const reasons = [
+  {
+    Icon: BiMoney,
+    body: "Immerse yourself in Moodist's ambient world without spending a dime. All features are accessible to everyone, ensuring a cost-free auditory journey.",
+    id: 'free-access',
+    label: 'Free Access',
+  },
+  {
+    Icon: BiUserCircle,
+    body: 'Embrace simplicity – Moodist skips the registration process. No accounts, no hassle; just click, play, and enjoy the serenity.',
+    id: 'no-registration',
+    label: 'No Registration',
+  },
+  {
+    Icon: BsSoundwave,
+    body: `With a curated collection of ${count} sounds, Moodist offers a spectrum of auditory experiences. From the tranquility of nature to the beat of urban life, find the perfect backdrop for your mood.`,
+    id: 'diverse-sounds',
+    label: 'Diverse Sounds',
+  },
+  {
+    Icon: RxMixerHorizontal,
+    body: 'Tailor your ambiance effortlessly. Moodist allows you to create personalized mixes, adjusting the blend of sounds to suit your focus or relaxation needs.',
+    id: 'customizable-mixes',
+    label: 'Customizable Mixes',
+  },
+  {
+    Icon: BiLogoGithub,
+    body: 'Trust in transparency. Moodist is open-source, fostering collaboration and providing users with a platform they can explore and understand.',
+    id: 'open-source',
+    label: 'Open-Source',
+    link: {
+      label: 'Source Code',
+      url: 'https://github.com/remvze/moodist',
+    },
+  },
+  {
+    Icon: BsStars,
+    body: 'Navigate with ease. Moodist provides a user-friendly interface, ensuring a smooth and hassle-free experience as you explore the diverse soundscape of calm and rhythm.',
+    id: 'seamless-experience',
+    label: 'Seamless Experience',
+  },
+];
+---
+
+<div class="why">
+  <Container>
+    <div class="titleWrapper">
+      <h2 class="title">Why use Moodist?</h2>
+      <div class="line"></div>
+    </div>
+
+    <div class="reasons">
+      {
+        reasons.map(reason => (
+          <div class="reason">
+            <div class="icon">
+              <reason.Icon />
+            </div>
+            <h3 class="label">{reason.label}</h3>
+            <p class="body">
+              <Balancer>{reason.body}</Balancer>
+            </p>
+            {reason.link && (
+              <a class="link" href={reason.link.url}>
+                {reason.link.label} →
+              </a>
+            )}
+          </div>
+        ))
+      }
+    </div>
+  </Container>
+</div>
+
+<style>
+  .why {
+    padding-bottom: 80px;
+
+    & .titleWrapper {
+      display: flex;
+      align-items: center;
+      column-gap: 12px;
+
+      & .title {
+        margin-bottom: 12px;
+        font-family: var(--font-display);
+        font-size: var(--font-lg);
+        font-weight: 600;
+      }
+
+      & .line {
+        height: 1px;
+        flex-grow: 1;
+        background: linear-gradient(
+          90deg,
+          var(--color-neutral-300),
+          transparent
+        );
+        transform: translateY(-0.25rem);
+      }
+    }
+
+    & .reasons {
+      display: grid;
+      margin-top: 24px;
+      column-gap: 20px;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      row-gap: 28px;
+
+      & .icon {
+        display: flex;
+        width: 40px;
+        height: 40px;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid var(--color-neutral-200);
+        border-radius: 12px;
+        margin-bottom: 12px;
+        background: linear-gradient(var(--color-neutral-100), transparent);
+        color: #34d399;
+        font-size: var(--font-md);
+      }
+
+      & .label {
+        margin-bottom: 8px;
+        font-family: var(--font-heading);
+        font-weight: 600;
+      }
+
+      & .body {
+        color: var(--color-foreground-subtle);
+        line-height: 1.6;
+      }
+
+      & .link {
+        display: block;
+        margin-top: 8px;
+        color: var(--color-foreground);
+        font-size: var(--font-sm);
+        font-weight: 500;
+        text-decoration: none;
+      }
+    }
+  }
+</style>
diff --git a/src/components/sections/why/index.ts b/src/components/sections/why/index.ts
deleted file mode 100644
index a7ce364..0000000
--- a/src/components/sections/why/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Why } from './why';
diff --git a/src/components/sections/why/why.module.css b/src/components/sections/why/why.module.css
deleted file mode 100644
index b40c3ec..0000000
--- a/src/components/sections/why/why.module.css
+++ /dev/null
@@ -1,65 +0,0 @@
-.why {
-  padding-bottom: 80px;
-
-  & .titleWrapper {
-    display: flex;
-    align-items: center;
-    column-gap: 12px;
-
-    & .title {
-      margin-bottom: 12px;
-      font-family: var(--font-display);
-      font-size: var(--font-lg);
-      font-weight: 600;
-    }
-
-    & .line {
-      height: 1px;
-      flex-grow: 1;
-      background: linear-gradient(90deg, var(--color-neutral-300), transparent);
-      transform: translateY(-0.25rem);
-    }
-  }
-
-  & .reasons {
-    display: grid;
-    margin-top: 24px;
-    column-gap: 20px;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    row-gap: 28px;
-
-    & .icon {
-      display: flex;
-      width: 40px;
-      height: 40px;
-      align-items: center;
-      justify-content: center;
-      border: 1px solid var(--color-neutral-200);
-      border-radius: 12px;
-      margin-bottom: 12px;
-      background: linear-gradient(var(--color-neutral-100), transparent);
-      color: #34d399;
-      font-size: var(--font-md);
-    }
-
-    & .label {
-      margin-bottom: 8px;
-      font-family: var(--font-heading);
-      font-weight: 600;
-    }
-
-    & .body {
-      color: var(--color-foreground-subtle);
-      line-height: 1.6;
-    }
-
-    & .link {
-      display: block;
-      margin-top: 8px;
-      color: var(--color-foreground);
-      font-size: var(--font-sm);
-      font-weight: 500;
-      text-decoration: none;
-    }
-  }
-}
diff --git a/src/components/sections/why/why.tsx b/src/components/sections/why/why.tsx
deleted file mode 100644
index 450286c..0000000
--- a/src/components/sections/why/why.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { useMemo } from 'react';
-import { BiMoney, BiUserCircle, BiLogoGithub } from 'react-icons/bi/index';
-import { BsSoundwave, BsStars } from 'react-icons/bs/index';
-import { RxMixerHorizontal } from 'react-icons/rx/index';
-
-import { Balancer } from 'react-wrap-balancer';
-
-import { Container } from '@/components/container';
-import { count as soundCount } from '@/lib/sounds';
-
-import styles from './why.module.css';
-
-export function Why() {
-  const count = useMemo(soundCount, []);
-
-  const reasons = [
-    {
-      body: "Immerse yourself in Moodist's ambient world without spending a dime. All features are accessible to everyone, ensuring a cost-free auditory journey.",
-      icon: <BiMoney />,
-      id: 'free-access',
-      label: 'Free Access',
-    },
-    {
-      body: 'Embrace simplicity – Moodist skips the registration process. No accounts, no hassle; just click, play, and enjoy the serenity.',
-      icon: <BiUserCircle />,
-      id: 'no-registration',
-      label: 'No Registration',
-    },
-    {
-      body: `With a curated collection of ${count} sounds, Moodist offers a spectrum of auditory experiences. From the tranquility of nature to the beat of urban life, find the perfect backdrop for your mood.`,
-      icon: <BsSoundwave />,
-      id: 'diverse-sounds',
-      label: 'Diverse Sounds',
-    },
-    {
-      body: 'Tailor your ambiance effortlessly. Moodist allows you to create personalized mixes, adjusting the blend of sounds to suit your focus or relaxation needs.',
-      icon: <RxMixerHorizontal />,
-      id: 'customizable-mixes',
-      label: 'Customizable Mixes',
-    },
-    {
-      body: 'Trust in transparency. Moodist is open-source, fostering collaboration and providing users with a platform they can explore and understand.',
-      icon: <BiLogoGithub />,
-      id: 'open-source',
-      label: 'Open-Source',
-      link: {
-        label: 'Source Code',
-        url: 'https://github.com/remvze/moodist',
-      },
-    },
-    {
-      body: 'Navigate with ease. Moodist provides a user-friendly interface, ensuring a smooth and hassle-free experience as you explore the diverse soundscape of calm and rhythm.',
-      icon: <BsStars />,
-      id: 'seamless-experience',
-      label: 'Seamless Experience',
-    },
-  ];
-
-  return (
-    <div className={styles.why}>
-      <Container>
-        <div className={styles.titleWrapper}>
-          <h2 className={styles.title}>Why use Moodist?</h2>
-          <div className={styles.line} />
-        </div>
-
-        <div className={styles.reasons}>
-          {reasons.map(reason => (
-            <div className={styles.reason} key={reason.id}>
-              <div className={styles.icon}>{reason.icon}</div>
-              <h3 className={styles.label}>{reason.label}</h3>
-              <p className={styles.body}>
-                <Balancer>{reason.body}</Balancer>
-              </p>
-              {reason.link && (
-                <a className={styles.link} href={reason.link.url}>
-                  {reason.link.label} →
-                </a>
-              )}
-            </div>
-          ))}
-        </div>
-      </Container>
-    </div>
-  );
-}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index aaba44b..02de497 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,11 +1,12 @@
 ---
 import Layout from '@/layouts/layout.astro';
+import Footer from '@/components/footer.astro';
+import AboutSection from '@/components/sections/about.astro';
+import WhySection from '@/components/sections/why.astro';
+import ReadySection from '@/components/sections/ready.astro';
 
 import { Hero } from '@/components/hero';
 import { App } from '@/components/app';
-import { AboutSection, WhySection, ReadySection } from '@/components/sections';
-
-import Footer from '@/components/footer.astro';
 ---
 
 <Layout title="Moodist: Ambient Sounds for Focus and Calm">
@@ -13,6 +14,6 @@ import Footer from '@/components/footer.astro';
   <App client:load />
   <AboutSection />
   <WhySection />
-  <ReadySection client:load />
+  <ReadySection />
   <Footer />
 </Layout>