diff --git a/src/components/about/about.module.css b/src/components/sections/about/about.module.css
similarity index 100%
rename from src/components/about/about.module.css
rename to src/components/sections/about/about.module.css
diff --git a/src/components/about/about.tsx b/src/components/sections/about/about.tsx
similarity index 60%
rename from src/components/about/about.tsx
rename to src/components/sections/about/about.tsx
index 09a48cb..31aeb3a 100644
--- a/src/components/about/about.tsx
+++ b/src/components/sections/about/about.tsx
@@ -1,9 +1,9 @@
-import { Container } from '@/components/container';
+import { useMemo } from 'react';
 
+import { Container } from '@/components/container';
 import { sounds } from '@/data/sounds';
 
 import styles from './about.module.css';
-import { useMemo } from 'react';
 
 export function About() {
   const count = useMemo(() => {
@@ -22,12 +22,12 @@ export function About() {
         <h2 className={styles.title}>What is Moodist?</h2>
         <p className={styles.desc}>
           Moodist is your gateway to a world of serenity and focus. It&apos;s a
-          free and registration-free online ambient sound generator offering{' '}
-          <span>{count}</span> handpicked sounds in various categories, from
-          nature&apos;s tranquil melodies to the soothing ambiance of urban
-          life. Whether you&apos;re seeking relaxation or a productivity boost,
-          Moodist lets you effortlessly customize your environment with the
-          perfect background sounds.
+          free online ambient sound generator offering <span>{count}</span>{' '}
+          handpicked sounds in various categories, from nature&apos;s tranquil
+          melodies to the soothing ambiance of urban life. Whether you&apos;re
+          seeking relaxation or a productivity boost, Moodist lets you
+          effortlessly customize your environment with the perfect background
+          sounds.
         </p>
       </Container>
     </div>
diff --git a/src/components/about/index.ts b/src/components/sections/about/index.ts
similarity index 100%
rename from src/components/about/index.ts
rename to src/components/sections/about/index.ts
diff --git a/src/components/sections/index.ts b/src/components/sections/index.ts
new file mode 100644
index 0000000..405ecc1
--- /dev/null
+++ b/src/components/sections/index.ts
@@ -0,0 +1,2 @@
+export { About as AboutSection } from './about';
+export { Why as WhySection } from './why';
diff --git a/src/components/sections/why/index.ts b/src/components/sections/why/index.ts
new file mode 100644
index 0000000..a7ce364
--- /dev/null
+++ b/src/components/sections/why/index.ts
@@ -0,0 +1 @@
+export { Why } from './why';
diff --git a/src/components/why-section/why-section.module.css b/src/components/sections/why/why.module.css
similarity index 98%
rename from src/components/why-section/why-section.module.css
rename to src/components/sections/why/why.module.css
index 5140379..4fc8ca8 100644
--- a/src/components/why-section/why-section.module.css
+++ b/src/components/sections/why/why.module.css
@@ -1,4 +1,4 @@
-.whySection {
+.why {
   padding-bottom: 80px;
 
   & .title {
diff --git a/src/components/why-section/why-section.tsx b/src/components/sections/why/why.tsx
similarity index 92%
rename from src/components/why-section/why-section.tsx
rename to src/components/sections/why/why.tsx
index d06e206..eee2c9b 100644
--- a/src/components/why-section/why-section.tsx
+++ b/src/components/sections/why/why.tsx
@@ -3,9 +3,9 @@ import { Balancer } from 'react-wrap-balancer';
 
 import { Container } from '@/components/container';
 
-import styles from './why-section.module.css';
+import styles from './why.module.css';
 
-export function WhySection() {
+export function Why() {
   const reasons = [
     {
       body: 'Moodist is a cost-free solution, offering you high-quality ambient sounds without any financial commitment.',
@@ -28,7 +28,7 @@ export function WhySection() {
   ];
 
   return (
-    <div className={styles.whySection}>
+    <div className={styles.why}>
       <Container>
         <h2 className={styles.title}>Why use Moodist?</h2>
 
diff --git a/src/components/why-section/index.ts b/src/components/why-section/index.ts
deleted file mode 100644
index e921490..0000000
--- a/src/components/why-section/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { WhySection } from './why-section';
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 19c8b96..d5f69bb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,15 +3,14 @@ import Layout from '@/layouts/layout.astro';
 
 import { Hero } from '@/components/hero';
 import { App } from '@/components/app';
-import { About } from '@/components/about';
-import { WhySection } from '@/components/why-section';
+import { AboutSection, WhySection } from '@/components/sections';
 ---
 
 <Layout title="Welcome to Astro.">
   <main>
     <Hero />
     <App client:load />
-    <About />
+    <AboutSection />
     <WhySection />
   </main>
 </Layout>