diff --git a/assets/html/audio.html b/assets/html/audio.html
new file mode 100644
index 00000000..327ab887
--- /dev/null
+++ b/assets/html/audio.html
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SwapReads - Custom Audiobook Player</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            margin: 0;
+            padding: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
+
+        .audiobook-container {
+            max-width: 600px;
+            width: 100%;
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            text-align: center;
+        }
+
+        .book-image {
+            width: 200px;
+            height: 300px;
+            background-color: #ddd;
+            border-radius: 10px;
+            background-size: cover;
+            background-position: center;
+            margin: 0 auto 20px auto;
+        }
+
+        h2 {
+            font-size: 24px;
+            margin-bottom: 10px;
+        }
+
+        p {
+            color: #555;
+            margin-bottom: 20px;
+        }
+
+        .audio-player {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .controls {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            margin-bottom: 10px;
+        }
+
+        .play-btn {
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            font-size: 24px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .progress-container {
+            width: 100%;
+            background-color: #ddd;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        .progress {
+            height: 10px;
+            background-color: #4CAF50;
+            border-radius: 5px;
+            width: 0;
+        }
+
+        .time {
+            font-size: 14px;
+            color: #555;
+        }
+    </style>
+</head>
+<body>
+    <div class="audiobook-container">
+        <div class="book-image" style="background-image: url('https://m.media-amazon.com/images/I/71cpVgEK94L._AC_UF1000,1000_QL80_.jpg');"></div>
+        <h2>The Great Adventure</h2>
+        <p>by John Doe</p>
+
+        <div class="audio-player">
+            <div class="controls">
+                <button class="play-btn" id="playBtn">▶️</button>
+                <div class="time" id="currentTime">0:00</div>
+                <div class="time">/</div>
+                <div class="time" id="durationTime">0:00</div>
+            </div>
+            <div class="progress-container" id="progressContainer">
+                <div class="progress" id="progress"></div>
+            </div>
+        </div>
+
+        <audio id="audio">
+            <source src="audiobook-sample.mp3" type="audio/mpeg">
+            Your browser does not support the audio element.
+        </audio>
+    </div>
+
+    <script>
+        const audio = document.getElementById('audio');
+        const playBtn = document.getElementById('playBtn');
+        const progressContainer = document.getElementById('progressContainer');
+        const progress = document.getElementById('progress');
+        const currentTimeEl = document.getElementById('currentTime');
+        const durationTimeEl = document.getElementById('durationTime');
+
+        // Play & Pause Audio
+        playBtn.addEventListener('click', () => {
+            if (audio.paused) {
+                audio.play();
+                playBtn.textContent = '⏸️';
+            } else {
+                audio.pause();
+                playBtn.textContent = '▶️';
+            }
+        });
+
+        // Update progress bar and time
+        audio.addEventListener('timeupdate', () => {
+            const { duration, currentTime } = audio;
+            const progressPercent = (currentTime / duration) * 100;
+            progress.style.width = `${progressPercent}%`;
+
+            // Update current time
+            const minutes = Math.floor(currentTime / 60);
+            const seconds = Math.floor(currentTime % 60);
+            currentTimeEl.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+
+            // Update duration
+            const durationMinutes = Math.floor(duration / 60);
+            const durationSeconds = Math.floor(duration % 60);
+            if (!isNaN(durationMinutes)) {
+                durationTimeEl.textContent = `${durationMinutes}:${durationSeconds < 10 ? '0' : ''}${durationSeconds}`;
+            }
+        });
+
+        // Set progress bar manually
+        progressContainer.addEventListener('click', (e) => {
+            const width = progressContainer.clientWidth;
+            const clickX = e.offsetX;
+            const duration = audio.duration;
+
+            audio.currentTime = (clickX / width) * duration;
+        });
+    </script>
+</body>
+</html>
diff --git a/au1.mp3 b/au1.mp3
new file mode 100644
index 00000000..b4d7112e
Binary files /dev/null and b/au1.mp3 differ
diff --git a/index.html b/index.html
index 24e30219..36a9d151 100644
--- a/index.html
+++ b/index.html
@@ -1374,6 +1374,10 @@
                   <a href="./assets/html/freeBooks.html" onclick="lenis.scrollTo('#E-books')" class="navbar-link"
                     data-nav-link><i class="ri-price-tag-3-fill"></i>Free E-books</a>
                 </li>
+                <li class="dropdown-menu-item">
+                  <a href="./assets/html/audio.html" onclick="lenis.scrollTo('#E-books')" class="navbar-link"
+                    data-nav-link><i class="ri-price-tag-3-fill"></i>Audio Books</a>
+                </li>
                 <li class="dropdown-menu-item">
                   <a href="./assets/html/read_later.html" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Read Later</a>
                 </li>
diff --git a/sense-sensibility_01_austen_64kb.mp3 b/sense-sensibility_01_austen_64kb.mp3
new file mode 100644
index 00000000..4a4f12f9
Binary files /dev/null and b/sense-sensibility_01_austen_64kb.mp3 differ
