diff --git a/script.ts b/script.ts
index 84fce2d..fe4ec98 100644
--- a/script.ts
+++ b/script.ts
@@ -41,4 +41,3 @@ const searchResult = await search(movieDB, {
   term: 'Chr',
 })
 
-console.log(searchResult)
diff --git a/src/components/StudyChapter.svelte b/src/components/StudyChapter.svelte
index 6d80e69..d0620e1 100644
--- a/src/components/StudyChapter.svelte
+++ b/src/components/StudyChapter.svelte
@@ -5,7 +5,7 @@
   import SvelteMarkdown from 'svelte-markdown'
 
   import { user } from '@/state/user'
-  import { books, versions } from '@/constants'
+  import { books } from '@/constants'
   import { createAlert } from '@/services/alert'
   import Button from '@/components/Button.svelte'
   import { draft, studyMode } from '@/state/study'
@@ -15,10 +15,11 @@
   import { formatName } from '@/utils/chapter'
   import { DEFAULT_NOTE, searchName } from '@/constants'
   import { sendCreateNote, sendNoteToUpdate } from '@/state/notes'
+  import { version } from '@/state/bible'
   
 
   /** @type {string} */
-  export let version = 'rv1960'
+  export let versionRead = 'rv1960'
 
   /** @type {string} */
   export let book = 'genesis'
@@ -37,7 +38,7 @@
   let hasError = false
   let selectBook = false
   let selectChapter = false
-  let selectVersion = false
+  let selectversionRead = false
 
   /** @type {import('./Passage.svelte').PassageInfo} */
   let info = {
@@ -73,14 +74,14 @@
       chapters = bookInfo.chapters
       if (chapter > chapters) {
         chapter = 1
-        goto(`/chapter/${version}/${searchName(book)}/${chapter}`)
+        goto(`/read/${versionRead}/${searchName(book)}/${chapter}`)
       }
     }
     chapters = bookInfo.chapters
 
     loading = true
     const resp = await fetch(
-      `https://bible-api.deno.dev/api/${version === '' ? 'rv1960' : version}/book/${searchName(
+      `https://bible-api.deno.dev/api/${versionRead === '' ? 'rv1960' : versionRead}/book/${searchName(
         book
       )}/${chapter}`
     )
@@ -105,32 +106,32 @@
   /**
    * @param {string} book
    * @param {number} chapter
-   * @param {string} version
+   * @param {string} versionRead
    */
-  async function handleChange(book, chapter, version) {
+  async function handleChange(book, chapter, versionRead) {
     localStorage.setItem(
       'bookmark',
       JSON.stringify({
-        version,
+        versionRead,
         chapter,
         book
       })
     )
-    goto(`/chapter/${version}/${searchName(book)}/${chapter}`)
+    goto(`/read/${versionRead}/${searchName(book)}/${chapter}`)
     info = await getData()
   }
 
   /**
    * @param {string|number} value
-   * @param {'version'|'book'|'chapter'} prop
+   * @param {'versionRead'|'book'|'chapter'} prop
    */
   function updateData(value, prop) {
     loading = true
     switch (prop) {
-      case 'version':
+      case 'versionRead':
         if (typeof value === 'string') {
-          version = value
-          selectVersion = false
+          versionRead = value
+          selectversionRead = false
         }
         break
       case 'book':
@@ -146,7 +147,7 @@
         }
         break
     }
-    handleChange(book, chapter, version).then()
+    handleChange(book, chapter, versionRead).then()
   }
 
   /**
@@ -186,7 +187,7 @@
   }
 
   function getCurrentPage() {
-    return `${$page.url.origin}/chapter/${version}/${searchName(book)}/${chapter}`
+    return `${$page.url.origin}/read/${versionRead}/${searchName(book)}/${chapter}`
   }
 
 	/**
@@ -257,7 +258,7 @@
   
 
   /**
-   * @param {'book'|'chapter'|'version'} selector
+   * @param {'book'|'chapter'|'versionRead'} selector
    */
   function unSelect(selector) {
     switch (selector) {
@@ -267,8 +268,8 @@
       case 'chapter':
         selectChapter = !selectChapter
         break
-      case 'version':
-        selectVersion = !selectVersion
+      case 'versionRead':
+        selectversionRead = !selectversionRead
         break
     }
   }
@@ -289,32 +290,32 @@
   <wc-toast />
   <section class="flex flex-col justify-between gap-4 sm:flex-row sm:items-center sm:gap-12">
     <div class="flex items-center gap-3">
-      <div use:clickOutside on:click_outside={() => (selectVersion = false)}>
-        <h4>Version</h4>
+      <div use:clickOutside on:click_outside={() => (selectversionRead = false)}>
+        <h4>versionRead</h4>
         <Button
           disabled={loading}
           color="green"
           id="selectBook"
           className="w-12 dark:text-white dark:bg-green-800 dark:border-none dark:hover:bg-green-600"
-          on:click={() => unSelect('version')}
+          on:click={() => unSelect('versionRead')}
         >
-          {version === '' ? 'Selecciona tu version' : version}
+          {versionRead === '' ? 'Selecciona tu versionRead' : versionRead}
         </Button>
 
-        {#if selectVersion}
+        {#if selectversionRead}
           <ul
             class="list absolute flex h-fit flex-col  rounded bg-gray-50 ring-1 ring-gray-300"
           >
-            {#each versions as v}
+            {#each versionReads as v}
               <button
                 class="cursor-pointer select-none p-6 hover:bg-gray-200 dark:bg-[#1e293b] dark:hover:bg-[#445268]"
                 disabled={loading}
                 on:click={() => {
-                  if (v.url === version) {
-                    selectVersion = false
+                  if (v.url === versionRead) {
+                    selectversionRead = false
                     return
                   }
-                  updateData(v.url, 'version')
+                  updateData(v.url, 'versionRead')
                 }}
               >
                 {v.name}
@@ -428,9 +429,10 @@
         Capítulo anterior
       </Button>
 
+	  
       <Button
-        disabled={loading}
-        className="dark:text-white dark:bg-blue-500 dark:border-none dark:hover:bg-blue-600"
+	  disabled={loading}
+	  className="dark:text-white dark:bg-blue-500 dark:border-none dark:hover:bg-blue-600"
         on:click={() => {
           if (chapter + 1 > chapters) {
             createAlert('Error ese capitulo no esta disponible', 'error')
@@ -444,24 +446,52 @@
         Siguiente capítulo
       </Button>
       <Button
-        disabled={loading}
-        className="dark:text-white dark:bg-green-800 dark:border-none dark:hover:bg-green-600"
-        on:click={() => {
-          const url = `${$page.url.origin}/chapter/${version}/${book}/${chapter}`
+	  disabled={loading}
+	  className="dark:text-white dark:bg-green-800 dark:border-none dark:hover:bg-green-600"
+	  on:click={() => {
+		  const url = `${$page.url.origin}/read/${versionRead}/${book}/${chapter}`
           navigator.clipboard
-            .writeText(url)
-            .then(() => {
-              createAlert('Url copiada al portapapeles', 'success')
+		  .writeText(url)
+		  .then(() => {
+			  createAlert('Url copiada al portapapeles', 'success')
             })
             .catch((err) => {
-              createAlert('Error al copiar url', 'error')
+				createAlert('Error al copiar url', 'error')
             })
         }}
         color="green"
-      >
+		>
         Compartir capítulo
-      </Button>
-    </div>
+	</Button>
+</div>
+
+<div class="flex items-center gap-4">
+	<Button
+	  className="dark:text-white dark:bg-blue-500 dark:border-none dark:hover:bg-blue-600"
+	  disabled={loading}
+	  on:click={() => {
+		version.set(versionRead)
+		goto('/books?testament=old')
+		  
+	  }}
+	  color="blue"
+	>
+	  Antiguo Testamento
+	</Button>
+	
+	<Button
+	  className="dark:text-white dark:bg-blue-500 dark:border-none dark:hover:bg-blue-600"
+	  disabled={loading}
+	  on:click={() => {
+		version.set(versionRead)
+		goto('/books?testament=new')
+	  }}
+	  color="blue"
+	>
+	  Nuevo Testamento
+	</Button>
+</div>
+
   </section>
 
   {#if loading }
diff --git a/src/constants.ts b/src/constants.ts
index 0aeffcd..39ac839 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -67,6 +67,78 @@ export const books = [
   'Apocalipsis'
 ]
 
+export const oldTestament = [
+  'Genesis',
+  'Exodo',
+  'Levitico',
+  'Numeros',
+  'Deuteronomio',
+  'Josue',
+  'Jueces',
+  'Rut',
+  '1-Samuel',
+  '2-Samuel',
+  '1-Reyes',
+  '2-Reyes',
+  '1-Cronicas',
+  '2-Cronicas',
+  'Esdras',
+  'Nehemias',
+  'Ester',
+  'Job',
+  'Salmos',
+  'Proverbios',
+  'Eclesiastes',
+  'Cantares',
+  'Isaias',
+  'Jeremias',
+  'Lamentaciones',
+  'Ezequiel',
+  'Daniel',
+  'Oseas',
+  'Joel',
+  'Amos',
+  'Abdias',
+  'Jonas',
+  'Miqueas',
+  'Nahum',
+  'Habacuc',
+  'Sofonias',
+  'Hageo',
+  'Zacarias',
+  'Malaquias',
+]
+
+export const newTestament = [
+	 'Mateo',
+  'Marcos',
+  'Lucas',
+  'Juan',
+  'Hechos',
+  'Romanos',
+  '1-Corintios',
+  '2-Corintios',
+  'Galatas',
+  'Efesios',
+  'Filipenses',
+  'Colosenses',
+  '1-Tesalonicenses',
+  '2-Tesalonicenses',
+  '1-Timoteo',
+  '2-Timoteo',
+  'Tito',
+  'Filemon',
+  'Hebreos',
+  'Santiago',
+  '1-Pedro',
+  '2-Pedro',
+  '1-Juan',
+  '2-Juan',
+  '3-Juan',
+  'Judas',
+  'Apocalipsis'
+]
+
 export const VERSIONS = {
   rv1960: 'Reina Valera 1960',
   rv1995: 'Reina Valera 1995',
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6cf1faf..6f99723 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -9,6 +9,7 @@
   import OpenSource from '@/components/icons/OpenSource.svelte'
   import Lightning from '@/components/icons/Lightning.svelte'
   import ZeroAdds from '@/components/icons/ZeroAdds.svelte'
+  import { goto } from '$app/navigation'
 </script>
 
 <div class="flex flex-col items-start p-0 sm:flex-row sm:p-6">
@@ -36,7 +37,7 @@
       class="min-lg:place-items-start m-4 flex font-bold max-lg:justify-around max-lg:text-xl max-md:justify-center max-md:gap-4 max-sm:flex-col max-sm:place-content-center max-sm:align-middle lg:gap-3 lg:text-2xl"
     >
       <Button
-        on:click={() => goToChapter()}
+        on:click={() => goto('/versions')}
         color="blue"
         className="hover:scale-105 transition-transform lg:p-8 max-lg:p-2"
       >
diff --git a/src/routes/books/+page.svelte b/src/routes/books/+page.svelte
new file mode 100644
index 0000000..92f2d35
--- /dev/null
+++ b/src/routes/books/+page.svelte
@@ -0,0 +1,96 @@
+
+<script>
+  import { goto } from "$app/navigation"
+  import { page } from "$app/stores"
+  import Button from "@/components/Button.svelte"
+  import { newTestament, oldTestament, versions } from "@/constants";
+  import { book } from "@/state/bible"
+  import { formatName } from "@/utils/chapter"
+  import { scale } from "svelte/transition"
+
+  /**
+   * @type {'old' | 'new'} testament
+   */
+  let testament = 'old'
+  const urlParam = $page.url.searchParams.get('testament')
+  if (urlParam !== 'old' && urlParam !== 'new') {
+	testament = 'old'
+  } else {
+	testament = urlParam
+  }
+
+
+  /**
+   * 
+   * @param {string} b
+   */
+  function setBook(b) {
+	book.set(b)
+	goto(`/chapters/${b.toLowerCase()}`)
+  }
+</script>
+
+<section class="flex flex-col gap-6">
+
+	<div class="flex flex-row justify-center align-middle p-4 gap-4">
+
+		<button 
+				class={`text-2xl w- select-none p-2 transition-shadow ${testament === 'old' ? 'bg-[#a8cae8]' : ''}hover:bg-[#7faddb]  hover:shadow- rounded-sm dark:bg-[#4366b2] dark:hover:bg-blue-600 ${testament === 'old' ? 'bg-[#d3eac8] dark:bg-[#4c8435] dark:hover:bg-[#afd89d] hover:bg-[#afd89d] hover:text-black' : ''}`}
+		on:click={() => (testament = 'old')} >
+			<span
+				>
+				Antiguo testamento
+			</span>
+		</button>
+	
+		<button 
+				class={`text-2xl w- select-none p-2 transition-shadow hover:bg-[#7faddb]  hover:shadow- rounded-sm dark:bg-[#4366b2] dark:hover:bg-blue-600 ${testament === 'new' ? 'bg-[#d3eac8] dark:bg-[#4c8435] dark:hover:bg-[#afd89d] hover:bg-[#afd89d] hover:text-black' : ''}`}
+		on:click={() => (testament = 'new')} >
+			<span
+	
+			
+				>
+				Nuevo testamento
+			</span>
+		</button>
+
+	</div>	
+
+	<div transition:scale={{ duration: 300 }}>
+
+		{#if testament === 'old'} 
+			<ul class="grid grid-cols-2 md:grid-cols-4 sm:grid-cols-3 gap-10 p-6">
+				{#each oldTestament as book}
+					<button
+						class="text-xl select-none p-4 transition-shadow bg-[#a8cae8] hover:bg-[#7faddb]  hover:shadow rounded-sm dark:bg-[#4366b2] dark:hover:bg-blue-600"
+					 on:click={() => setBook(book)}>
+						<span >
+							{formatName(book)}
+						</span>
+		
+					</button>
+				{/each}
+			</ul>
+		{:else}
+			<ul class="grid grid-cols-2 md:grid-cols-4 sm:grid-cols-3 gap-10 p-6">
+				{#each newTestament as book}
+					<button class=" text-xl max-w p-4 bg-[#a8cae8] hover:bg-[#7faddb]  hover:shadow- rounded-sm dark:bg-[#4366b2] dark:hover:bg-blue-600" on:click={() => setBook(book)}>
+						<span class="select-none transition-shadow" >
+							{formatName(book)}
+						</span>
+		
+					</button>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+
+	<Button color='blue' className='self-center w-fit p-4' on:click={() => window.history.back()}>
+		<span>
+			Back
+		</span>
+		<svg xmlns="http://www.w3.org/2000/svg" width="3rem" height="3em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M224 480h640a32 32 0 1 1 0 64H224a32 32 0 0 1 0-64"/><path fill="currentColor" d="m237.248 512l265.408 265.344a32 32 0 0 1-45.312 45.312l-288-288a32 32 0 0 1 0-45.312l288-288a32 32 0 1 1 45.312 45.312z"/></svg>
+	</Button>
+
+</section>
+
diff --git a/src/routes/chapters/[book]/+page.js b/src/routes/chapters/[book]/+page.js
new file mode 100644
index 0000000..60e47ff
--- /dev/null
+++ b/src/routes/chapters/[book]/+page.js
@@ -0,0 +1,14 @@
+/** @type {import('./$types').PageLoad} */
+export function load({ params }) {
+  return {
+    params
+  }
+  // if (params.slug === 'hello-world') {
+  //  return {
+  //    title: 'Hello world!',
+  //    content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
+  // }
+  // }
+
+  // throw error(404, 'Not found')
+}
diff --git a/src/routes/chapters/[book]/+page.svelte b/src/routes/chapters/[book]/+page.svelte
new file mode 100644
index 0000000..e69c930
--- /dev/null
+++ b/src/routes/chapters/[book]/+page.svelte
@@ -0,0 +1,86 @@
+
+<script>
+  import { goto } from "$app/navigation"
+  import Button from "@/components/Button.svelte"
+  import { createAlert } from "@/services/alert.js"
+  import { getInfoBook } from "@/services/api/auth.js"
+  import { book, chapter, version } from "@/state/bible"
+  import { formatName, goToChapter } from "@/utils/chapter"
+  import { onMount } from "svelte"
+
+  export let data
+  let chapters = 0 
+
+  /**
+   * 
+   * @param {string } book
+   */
+  async function getNumChapter(book) {
+	const bk = await getInfoBook(book)
+
+	if (!bk) {
+		createAlert('No se pudo encontrar el libro', 'error')
+		return
+	}
+
+	chapters = bk.chapters
+
+  }
+
+  onMount(async () => {
+	await getNumChapter(data.params.book.toLowerCase())
+  })
+
+  /**
+   * 
+   * @param {number} chapt
+   */
+  function setChapter(chapt) {
+	chapter.set(chapt)
+	goToPassage()
+  }
+
+  function goToPassage() {
+	if ($book === '') {
+		goto('/books')
+	} else if ($version === '') {
+		goto(`/versions`)
+	}
+	goto(`/read/${$version}/${$book}/${$chapter}`)
+  }
+</script>
+
+<wc-toast/>
+<section class="flex flex-col gap-6">
+	<div class="flex flex-row justify-center align-middle">
+		<h2>
+			Capitulos del libro {formatName(data.params.book)}
+		</h2>
+	</div>
+
+	<div class="flex flex-row justify-center align-middle p-4 gap-4">
+
+		<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+			{#if chapters > 0}
+				{#each { length: chapters } as _, i}
+					<button
+						on:click={() => setChapter(i + 1)}
+						class="text-2xl w-[10rem] select-none p-4 transition-shadow bg-[#a8cae8] hover:bg-[#7faddb]  hover:shadow rounded-sm dark:bg-[#4366b2] dark:hover:bg-blue-600"
+						>
+						{i + 1}
+					</button>
+				{/each}
+			{/if} 
+		</div>
+	</div>
+</section>
+
+	<Button color='blue' className='self-center w-fit p-4' on:click={() => window.history.back()}>
+		<span>
+			Back
+		</span>
+		<svg xmlns="http://www.w3.org/2000/svg" width="3rem" height="3em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M224 480h640a32 32 0 1 1 0 64H224a32 32 0 0 1 0-64"/><path fill="currentColor" d="m237.248 512l265.408 265.344a32 32 0 0 1-45.312 45.312l-288-288a32 32 0 0 1 0-45.312l288-288a32 32 0 1 1 45.312 45.312z"/></svg>
+	</Button>
+
+
+
diff --git a/src/routes/chapter/[version]/[book]/[chapter]/+page.js b/src/routes/read/[version]/[book]/[chapter]/+page.js
similarity index 100%
rename from src/routes/chapter/[version]/[book]/[chapter]/+page.js
rename to src/routes/read/[version]/[book]/[chapter]/+page.js
diff --git a/src/routes/chapter/[version]/[book]/[chapter]/+page.svelte b/src/routes/read/[version]/[book]/[chapter]/+page.svelte
similarity index 100%
rename from src/routes/chapter/[version]/[book]/[chapter]/+page.svelte
rename to src/routes/read/[version]/[book]/[chapter]/+page.svelte
diff --git a/src/routes/search/+page.svelte b/src/routes/search/+page.svelte
index 9e6a002..a77b692 100644
--- a/src/routes/search/+page.svelte
+++ b/src/routes/search/+page.svelte
@@ -47,7 +47,7 @@
    * @param {number} chapter
    */
   function urlVerse(book, chapter) {
-    const endpoint = `https://bible-study.vercel.app/chapter/${
+    const endpoint = `https://bible-study.vercel.app/read/${
       $versionSearch.url
     }/${book.toLowerCase()}/${chapter}`
     return endpoint
@@ -73,7 +73,6 @@
           loadingResults.set(false)
         })
         .catch((e) => {
-          console.log('fetch cancelado')
           console.error(e)
           loadingResults.set(false)
         })
diff --git a/src/routes/versions/+page.svelte b/src/routes/versions/+page.svelte
new file mode 100644
index 0000000..7c6ec5f
--- /dev/null
+++ b/src/routes/versions/+page.svelte
@@ -0,0 +1,34 @@
+
+<script>
+  import { goto } from "$app/navigation"
+  import { versions } from "@/constants";
+  import { version } from "@/state/bible"
+
+
+  /**
+   * 
+   * @param {{url: string, name: string}} v
+   */
+  function setVersion(v) {
+	version.set(v.url)
+	goto('/books')
+  }
+</script>
+
+<div>
+	<h1 class="p-2 text-3xl font-bold">Versiones</h1>
+
+	<ul class="flex flex-col gap-2 p-2">
+		{#each versions as versionBible}
+			<button 
+					class=" text-xl max-w p-4 bg-[#a8cae8] hover:bg-[#7faddb]  hover:shadow- rounded-sm dark:bg-[#4366b2] dark:hover:bg-blue-600"
+			on:click={() => setVersion(versionBible)}>
+				<span>
+					{versionBible.name}
+				</span>
+
+			</button>
+		{/each}
+	</ul>
+</div>
+
diff --git a/src/services/api/auth.js b/src/services/api/auth.js
index cb09add..0bf8f81 100644
--- a/src/services/api/auth.js
+++ b/src/services/api/auth.js
@@ -37,6 +37,28 @@ export async function singIn(data) {
   return response
 }
 
+/**
+ *
+ * @param {string} book
+ * @returns {Promise<{
+ *     name: string
+ *     abrev: string
+ *     chapters: number
+ *     testament: string
+ * }| undefined>}
+ */
+export async function getInfoBook(book) {
+  const resp = await fetch(`https://bible-api.deno.dev/api/book/${book}`)
+
+  if (!resp.ok) {
+    return
+  }
+
+  const info = await resp.json()
+
+  return info
+}
+
 /**
  * @param {any} data
  * @returns {Promise<Response>}
@@ -72,7 +94,7 @@ export async function singUp(data) {
   return response
 }
 
-export async function signOut () {
+export async function signOut() {
   await fetch(`${API_BASE_URL}/auth/logout`, {
     headers: { 'Content-Type': 'application/json' },
     credentials: 'include'
@@ -85,7 +107,7 @@ export async function signOut () {
   })
 }
 
-export async function updateUserInfo () {
+export async function updateUserInfo() {
   try {
     const res = await fetch(`${API_BASE_URL}/user`, {
       credentials: 'include'
diff --git a/src/state/bible.js b/src/state/bible.js
new file mode 100644
index 0000000..3c795cf
--- /dev/null
+++ b/src/state/bible.js
@@ -0,0 +1,6 @@
+
+import { writable } from 'svelte/store'
+
+export const version = writable('')
+export const book = writable('')
+export const chapter = writable(0)
diff --git a/src/utils/chapter.js b/src/utils/chapter.js
index 51fcda3..0f80364 100644
--- a/src/utils/chapter.js
+++ b/src/utils/chapter.js
@@ -10,11 +10,11 @@ export function goToChapter() {
     const version = bkmark.version
     const chapter = bkmark.chapter
 
-    goto(`/chapter/${version}/${book}/${chapter}`)
+    goto(`/read/${version}/${book}/${chapter}`)
     return
   }
 
-  goto('/chapter/rv1960/Genesis/1')
+  goto('/read/rv1960/Genesis/1')
 }
 
 /**