diff --git a/src/components/sections/about/about.module.css b/src/components/sections/about/about.module.css
index 2861165..2d329c1 100644
--- a/src/components/sections/about/about.module.css
+++ b/src/components/sections/about/about.module.css
@@ -1,11 +1,24 @@
 .about {
   padding: 80px 0;
 
-  & .title {
-    margin-bottom: 12px;
-    font-family: var(--font-display);
-    font-size: var(--font-lg);
-    font-weight: 600;
+  & .titleWrapper {
+    display: flex;
+    align-items: center;
+    column-gap: 15px;
+
+    & .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.188rem);
+    }
   }
 
   & .desc {
diff --git a/src/components/sections/about/about.tsx b/src/components/sections/about/about.tsx
index 31aeb3a..02c92c4 100644
--- a/src/components/sections/about/about.tsx
+++ b/src/components/sections/about/about.tsx
@@ -19,7 +19,10 @@ export function About() {
   return (
     <div className={styles.about}>
       <Container>
-        <h2 className={styles.title}>What is Moodist?</h2>
+        <div className={styles.titleWrapper}>
+          <h2 className={styles.title}>What is Moodist?</h2>
+          <div className={styles.line} />
+        </div>
         <p className={styles.desc}>
           Moodist is your gateway to a world of serenity and focus. It&apos;s a
           free online ambient sound generator offering <span>{count}</span>{' '}
diff --git a/src/components/sections/why/why.module.css b/src/components/sections/why/why.module.css
index ea66faa..c0d7c57 100644
--- a/src/components/sections/why/why.module.css
+++ b/src/components/sections/why/why.module.css
@@ -1,11 +1,24 @@
 .why {
   padding-bottom: 80px;
 
-  & .title {
-    margin-bottom: 12px;
-    font-family: var(--font-display);
-    font-size: var(--font-lg);
-    font-weight: 600;
+  & .titleWrapper {
+    display: flex;
+    align-items: center;
+    column-gap: 15px;
+
+    & .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.188rem);
+    }
   }
 
   & .reasons {
diff --git a/src/components/sections/why/why.tsx b/src/components/sections/why/why.tsx
index eee2c9b..23512b2 100644
--- a/src/components/sections/why/why.tsx
+++ b/src/components/sections/why/why.tsx
@@ -30,7 +30,10 @@ export function Why() {
   return (
     <div className={styles.why}>
       <Container>
-        <h2 className={styles.title}>Why use Moodist?</h2>
+        <div className={styles.titleWrapper}>
+          <h2 className={styles.title}>Why use Moodist?</h2>
+          <div className={styles.line} />
+        </div>
 
         <div className={styles.reasons}>
           {reasons.map(reason => (