diff --git a/src/components/organisms/passageNavigation.module.scss b/src/components/organisms/passageNavigation.module.scss
index e3d64b9de..52bf41f30 100644
--- a/src/components/organisms/passageNavigation.module.scss
+++ b/src/components/organisms/passageNavigation.module.scss
@@ -96,11 +96,6 @@
 
 .chaptersWrapper {
 	width: 100%;
-	display: none;
-}
-
-.chaptersWrapper:global(.active) {
-	display: block;
 	float: left;
 }
 
diff --git a/src/components/organisms/passageNavigation.tsx b/src/components/organisms/passageNavigation.tsx
index 7d750dc9b..3207b8b5a 100644
--- a/src/components/organisms/passageNavigation.tsx
+++ b/src/components/organisms/passageNavigation.tsx
@@ -2,15 +2,58 @@ import clsx from 'clsx';
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import Link from '~components/atoms/linkWithoutPrefetch';
-
 import { PassageNavigationFragment } from './__generated__/passageNavigation';
+import BookGrid from './bookGrid';
+import BookList from './bookList';
 import styles from './passageNavigation.module.scss';
 
 type Props = {
 	books: Array<PassageNavigationFragment>;
 };
 
+// FIXME
+const OT = [
+	'genesis',
+	'exodus',
+	'leviticus',
+	'numbers',
+	'deuteronomy',
+	'joshua',
+	'judges',
+	'ruth',
+	'1 samuel',
+	'2 samuel',
+	'1 kings',
+	'2 kings',
+	'1 chronicles',
+	'2 chronicles',
+	'ezra',
+	'nehemiah',
+	'esther',
+	'job',
+	'psalms',
+	'proverbs',
+	'ecclesiastes',
+	'song of solomon',
+	'isaiah',
+	'jeremiah',
+	'lamentations',
+	'ezekiel',
+	'daniel',
+	'hosea',
+	'joel',
+	'amos',
+	'obadiah',
+	'jonah',
+	'micah',
+	'nahum',
+	'habakkuk',
+	'zephaniah',
+	'haggai',
+	'zechariah',
+	'malachi',
+];
+
 export default function PassageNavigation({ books }: Props): JSX.Element {
 	const [selectedBook, setSelectedBook] = useState<string | number | null>(
 		null,
@@ -42,56 +85,30 @@ export default function PassageNavigation({ books }: Props): JSX.Element {
 				</button>
 			</div>
 
-			<ul className={clsx(styles.books, { grid: selectedView === 'grid' })}>
-				{books.map((book) => {
-					const chapters = book.recordings.nodes;
-
-					return (
-						<>
-							<li
-								key={book.id}
-								className={clsx(styles.book, {
-									active: book.id === selectedBook,
-								})}
-							>
-								<button
-									onClick={() => {
-										setSelectedBook(book.id);
-									}}
-								>
-									{selectedView === 'grid'
-										? book.title.replace(' ', '').substring(0, 3)
-										: book.title}
-								</button>
-							</li>
-							{book.id === selectedBook ? (
-								<li
-									className={clsx(styles.chaptersWrapper, {
-										active: book.id === selectedBook,
-									})}
-								>
-									<ul
-										className={clsx(styles.chapters, {
-											active: book.id === selectedBook,
-										})}
-									>
-										{chapters?.map((chapter) => {
-											const n = Number(chapter.title.split(' ').pop());
-											return (
-												<li key={n} className={styles.chapter}>
-													<Link href={chapter.canonicalPath}>{n}</Link>
-												</li>
-											);
-										})}
-									</ul>
-								</li>
-							) : (
-								''
-							)}
-						</>
-					);
-				})}
-			</ul>
+			{selectedView === 'list' ? (
+				<BookList
+					books={books}
+					selectedBook={selectedBook}
+					selectBook={setSelectedBook}
+				/>
+			) : (
+				<>
+					<BookGrid
+						books={books.filter((book) =>
+							OT.includes(book.title.toLocaleLowerCase()),
+						)}
+						selectedBook={selectedBook}
+						selectBook={setSelectedBook}
+					/>
+					<BookGrid
+						books={books.filter(
+							(book) => !OT.includes(book.title.toLocaleLowerCase()),
+						)}
+						selectedBook={selectedBook}
+						selectBook={setSelectedBook}
+					/>
+				</>
+			)}
 		</div>
 	);
 }
diff --git a/src/pages/[language]/bibles/index.tsx b/src/pages/[language]/bibles/index.tsx
index 97b5abf41..cfe92d8cf 100644
--- a/src/pages/[language]/bibles/index.tsx
+++ b/src/pages/[language]/bibles/index.tsx
@@ -31,10 +31,10 @@ async function transform(
 ): Promise<ApiBible> {
 	const books = Object.keys(BOOK_ID_MAP).map(
 		async (bookId, i): Promise<ApiBook> => {
-			const testiment = i < 39 ? 'OT' : 'NT';
+			const testament = i < 39 ? 'OT' : 'NT';
 			const bbChapters = await getBibleBookChapters(
 				bible.id,
-				testiment,
+				testament,
 				bookId,
 			);
 			const chapters = bbChapters.map(
@@ -55,9 +55,9 @@ async function transform(
 			const title = bbChapters[0].book_name;
 
 			if (!title) {
-				console.log({ bible, testiment, bookId, bbChapters });
+				console.log({ bible, testament, bookId, bbChapters });
 				throw new Error(
-					`Could not determine book title: ${bible.id} ${testiment} ${bookId}`,
+					`Could not determine book title: ${bible.id} ${testament} ${bookId}`,
 				);
 			}