diff --git a/convert/convertBooks.ts b/convert/convertBooks.ts
index cc658347a..2d70defc9 100644
--- a/convert/convertBooks.ts
+++ b/convert/convertBooks.ts
@@ -322,7 +322,7 @@ type ConvertBookContext = {
     bcId: string;
 };
 
-const unsupportedBookTypes = ['story', 'songs', 'audio-only', 'bloom-player', 'quiz', 'undefined'];
+const unsupportedBookTypes = ['story', 'audio-only', 'bloom-player', 'quiz', 'undefined'];
 export async function convertBooks(
     dataDir: string,
     scriptureConfig: ScriptureConfig,
@@ -395,7 +395,6 @@ export async function convertBooks(
             let bookConverted = false;
             switch (book.type) {
                 case 'story':
-                case 'songs':
                 case 'audio-only':
                 case 'bloom-player':
                 case 'undefined':
@@ -727,10 +726,10 @@ function convertScriptureBook(
                 if (context.verbose) {
                     console.log(
                         context.docSet +
-                            ' <- ' +
-                            book.name +
-                            ': ' +
-                            path.join(context.dataDir, 'books', context.bcId, book.file)
+                        ' <- ' +
+                        book.name +
+                        ': ' +
+                        path.join(context.dataDir, 'books', context.bcId, book.file)
                     );
                 }
                 displayBookId(context.bcId, book.id);
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
index 85ddaa6de..b12b1fb4b 100644
--- a/src/lib/components/Sidebar.svelte
+++ b/src/lib/components/Sidebar.svelte
@@ -34,6 +34,7 @@ The sidebar/drawer.
         SearchIcon,
         SettingsIcon,
         ShareIcon,
+        SongBookIcon,
         TextAppearanceIcon
     } from '$lib/icons';
     import { gotoRoute } from '$lib/navigate';
@@ -61,6 +62,7 @@ The sidebar/drawer.
     const showBookmarks = config.mainFeatures['annotation-bookmarks'];
     const showNotes = config.mainFeatures['annotation-notes'];
     const showHighlights = config.mainFeatures['annotation-highlights'];
+    const showSongbooks = true;
     const showPlans = config.plans?.plans.length > 0;
     const showShare =
         config.mainFeatures['share-app-link'] ||
@@ -213,7 +215,14 @@ The sidebar/drawer.
                     </button>
                 </li>
             {/if}
-            {#if showHistory || showBookmarks || showNotes || showHighlights}
+            {#if showSongbooks}
+                <li>
+                    <button class="btn" style:color={textColor} onclick={() => gotoRoute('/songs')}>
+                        <SongBookIcon color={iconColor} />{$t['Menu_Song_Books']}Song Books
+                    </button>
+                </li>
+            {/if}
+            {#if showHistory || showBookmarks || showNotes || showHighlights || showSongbooks}
                 <div class="dy-divider m-1"></div>
             {/if}
             {#if showShare}
diff --git a/src/lib/components/SongBook.svelte b/src/lib/components/SongBook.svelte
new file mode 100644
index 000000000..f945de2bb
--- /dev/null
+++ b/src/lib/components/SongBook.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { convertStyle, s, t, themeColors } from '$lib/data/stores';
+    import type { SongBook } from '$lib/types';
+
+    export let Sbook: SongBook;
+
+    // This is the path to the book's page
+    export let bookPath = `${base}/songs/${Sbook.collection}/${Sbook.id}`;
+
+    // This function can be used to navigate to the book's page
+    function navigateToBook() {
+        window.location.href = bookPath;
+    }
+</script>
diff --git a/src/lib/icons/SongBookIcon.svelte b/src/lib/icons/SongBookIcon.svelte
new file mode 100644
index 000000000..da3b10c42
--- /dev/null
+++ b/src/lib/icons/SongBookIcon.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    // info from https://fonts.google.com/icons
+    // Filled = 1
+    // Weight = 400
+    // Grade = 0
+    // Optical size = 24px
+    export let color = 'black';
+    export let style = '';
+</script>
+
+<svg
+    fill={color}
+    {style}
+    xmlns="http://www.w3.org/2000/svg"
+    height="24px"
+    viewBox="0 0 24 24"
+    width="24px"
+    ><path d="M0 0h24v24H0V0z" fill="none" /><path
+        d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+    /></svg
+>
diff --git a/src/lib/icons/index.js b/src/lib/icons/index.js
index 82e86dcb1..5a059ccc6 100644
--- a/src/lib/icons/index.js
+++ b/src/lib/icons/index.js
@@ -32,6 +32,7 @@ import SettingsIcon from './SettingsIcon.svelte';
 import ShareIcon from './ShareIcon.svelte';
 import SideBySideIcon from './SideBySideIcon.svelte';
 import SinglePaneIcon from './SinglePaneIcon.svelte';
+import SongBookIcon from './SongBookIcon.svelte';
 import SortIcon from './SortIcon.svelte';
 import TextAppearanceIcon from './TextAppearanceIcon.svelte';
 import TriangleLeftIcon from './TriangleLeftIcon.svelte';
@@ -74,5 +75,6 @@ export {
     TextAppearanceIcon,
     VerseByVerseIcon,
     TriangleLeftIcon,
-    TriangleRightIcon
+    TriangleRightIcon,
+    SongBookIcon
 };
diff --git a/src/lib/types.ts b/src/lib/types.ts
index e9204ae4a..9f691e9ee 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -7,3 +7,9 @@ export interface SearchFormSubmitEvent {
     wholeWords: boolean;
     matchAccents: boolean;
 }
+
+export interface SongBook {
+    id: string;
+    collection: string;
+    name: string;
+}
\ No newline at end of file
diff --git a/src/routes/songs/+page.svelte b/src/routes/songs/+page.svelte
new file mode 100644
index 000000000..4aff1aa37
--- /dev/null
+++ b/src/routes/songs/+page.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import BookSelector from '$lib/components/BookSelector.svelte';
+    import Sbook from '$lib/components/SongBook.svelte';
+
+    let { collection, id } = $props();
+
+    // This is the path to the song's page
+    let songPath = `${base}/songs/${collection}/${id}`;
+
+    // This function can be used to navigate to the song's page
+    function navigateToSong() {
+        window.location.href = songPath;
+    }
+</script>
+
+<div class="drawer drawer-end">
+    <input id="songbook-drawer" type="checkbox" class="drawer-toggle" />
+    <div class="drawer-content">
+        <!-- Page content here -->
+        <label for="songbook-drawer" class="btn btn-primary">Song Books</label>
+    </div>
+    <div class="drawer-side">
+        <label for="songbook-drawer" class="drawer-overlay"></label>
+        <div class="menu p-4 w-80 min-h-full bg-base-200 text-base-content">
+            <Sbook {bookPath} />
+        </div>
+    </div>
+</div>
diff --git a/src/routes/songs/[collection]/[id]/+page.svelte b/src/routes/songs/[collection]/[id]/+page.svelte
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/routes/songs/[collection]/[id]/+page.ts b/src/routes/songs/[collection]/[id]/+page.ts
new file mode 100644
index 000000000..34149224a
--- /dev/null
+++ b/src/routes/songs/[collection]/[id]/+page.ts
@@ -0,0 +1,14 @@
+import { initProskomma } from '$lib/data/scripture';
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ params, fetch }) {
+    const { collection, id } = params;
+    const filename = `${collection}-${id}-songs-by-number.txt`;
+    const proskomma = await initProskomma({ fetch });
+    return {
+        fetch,
+        collection,
+        id,
+        filename
+    };
+}
\ No newline at end of file