diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 7a94b237..75814d59 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,55 +1,56 @@
-/** @type {import("eslint").Linter.Config} */
+/** @type {import('eslint').Linter.Config} */
 const config = {
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: true
-  },
-  plugins: ["@typescript-eslint", "prettier"],
-  extends: [
-    "next/core-web-vitals",
-    "plugin:@typescript-eslint/recommended-type-checked",
-    "plugin:@typescript-eslint/stylistic-type-checked",
-    "plugin:prettier/recommended",
-    "plugin:storybook/recommended"
-  ],
-  "ignorePatterns": ["/styled-system/*"],
-  rules: {
-    // These opinionated rules are enabled in stylistic-type-checked above.
-    // Feel free to reconfigure them to your own preference.
-    "@typescript-eslint/array-type": "off",
-    "@typescript-eslint/consistent-type-definitions": "off",
+	parser: '@typescript-eslint/parser',
+	parserOptions: {
+		project: true,
+	},
+	plugins: ['@typescript-eslint', 'prettier'],
+	extends: [
+		'next/core-web-vitals',
+		'plugin:@typescript-eslint/recommended-type-checked',
+		'plugin:@typescript-eslint/stylistic-type-checked',
+		'plugin:prettier/recommended',
+		'plugin:storybook/recommended',
+		'plugin:tailwindcss/recommended',
+	],
+	'ignorePatterns': ['/styled-system/*'],
+	rules: {
+		// These opinionated rules are enabled in stylistic-type-checked above.
+		// Feel free to reconfigure them to your own preference.
+		'@typescript-eslint/array-type': 'off',
+		'@typescript-eslint/consistent-type-definitions': 'off',
 
-    "@typescript-eslint/consistent-type-imports": [
-      "warn",
-      {
-        prefer: "type-imports",
-        fixStyle: "inline-type-imports"
-      }
-    ],
-    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
-    "@typescript-eslint/no-misused-promises": [
-      2,
-      {
-        checksVoidReturn: { attributes: false }
-      }
-    ],
+		'@typescript-eslint/consistent-type-imports': [
+			'warn',
+			{
+				prefer: 'type-imports',
+				fixStyle: 'inline-type-imports',
+			},
+		],
+		'@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+		'@typescript-eslint/no-misused-promises': [
+			2,
+			{
+				checksVoidReturn: { attributes: false },
+			},
+		],
 
-    "react/jsx-curly-brace-presence": ["error", { props: "never", children: "never" }],
-    "prefer-arrow-callback": "error",
-    "arrow-body-style": "error",
+		'react/jsx-curly-brace-presence': ['error', { props: 'never', children: 'never' }],
+		'prefer-arrow-callback': 'error',
+		'arrow-body-style': 'error',
 
-    "prettier/prettier": [
-      "warn",
-      {},
-      {
-        "usePrettierrc": true
-      }
-    ],
-    "@typescript-eslint/ban-ts-comment": "warn",
+		'prettier/prettier': [
+			'warn',
+			{},
+			{
+				'usePrettierrc': true,
+			},
+		],
+		'@typescript-eslint/ban-ts-comment': 'warn',
 
-    "no-console": ["error", { allow: ["warn", "error"] }],
-    "import/no-cycle": "error"
-  }
-};
+		'no-console': ['warn', { allow: ['warn', 'error'] }],
+		'import/no-cycle': 'error',
+	},
+}
 
-module.exports = config;
+module.exports = config
diff --git a/package.json b/package.json
index 9ea29437..4eb68581 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@t3-oss/env-nextjs": "^0.7.0",
     "@tailwindcss/forms": "^0.5.7",
     "cheerio": "1.0.0-rc.12",
+    "eslint-plugin-tailwindcss": "^3.13.0",
     "fast-xml-parser": "^4.3.2",
     "file-system-cache": "^2.4.4",
     "jotai": "^2.5.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 42342f0c..fa57603c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ dependencies:
   cheerio:
     specifier: 1.0.0-rc.12
     version: 1.0.0-rc.12
+  eslint-plugin-tailwindcss:
+    specifier: ^3.13.0
+    version: 3.13.0(tailwindcss@3.3.5)
   fast-xml-parser:
     specifier: ^4.3.2
     version: 4.3.2
@@ -6606,6 +6609,17 @@ packages:
       - typescript
     dev: true
 
+  /eslint-plugin-tailwindcss@3.13.0(tailwindcss@3.3.5):
+    resolution: {integrity: sha512-Fcep4KDRLWaK3KmkQbdyKHG0P4GdXFmXdDaweTIPcgOP60OOuWFbh1++dufRT28Q4zpKTKaHwTsXPJ4O/EjU2Q==}
+    engines: {node: '>=12.13.0'}
+    peerDependencies:
+      tailwindcss: ^3.3.2
+    dependencies:
+      fast-glob: 3.3.1
+      postcss: 8.4.31
+      tailwindcss: 3.3.5
+    dev: false
+
   /eslint-scope@5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
diff --git a/src/_pages/ReaderPage/Reader.page.tsx b/src/_pages/ReaderPage/Reader.page.tsx
index 188b6033..0359591e 100644
--- a/src/_pages/ReaderPage/Reader.page.tsx
+++ b/src/_pages/ReaderPage/Reader.page.tsx
@@ -1,12 +1,18 @@
-import { NavBar } from '~/_pages/ReaderPage/components/NavBar'
-import { ReaderNavButtons } from '~/_pages/ReaderPage/components/ReaderNavButtons'
+import { renderChapterContent } from '~/_pages/ReaderPage/chapterDataProcessing/renderChapterContent'
 import { getBookWithCache, getChapterWithCache } from '~/db'
-import { getChapterObjectModel } from './chapterContentData/getChapterObjectModel'
-import { ChapterContent } from './components/ChapterContent'
+import { getChapterObjectModel } from './chapterDataProcessing/getChapterObjectModel'
+import { ChapterContentContainer } from './components/ChapterContentContainer'
+import { NavBar } from './components/NavBar'
+import { ReaderNavButtons } from './components/ReaderNavButtons'
 import { ReaderPageContainer } from './components/ReaderPageContainer'
 import { READER_MODE, type ReaderPageParams } from './ReaderPage.types'
 
-export const ReaderPage = async ({ params }: { params: ReaderPageParams }) => {
+export const ReaderPage = async ({
+	params,
+}: {
+	params: ReaderPageParams
+	searchParams: { 'verse-start': string; 'verse-end': string }
+}) => {
 	const { bookCode, chapter, readerMode } = params
 
 	const isStudyMode = readerMode === READER_MODE.Study
@@ -20,7 +26,7 @@ export const ReaderPage = async ({ params }: { params: ReaderPageParams }) => {
 		throw new Error('No chapter data')
 	}
 
-	const chapterContentHtml = getChapterObjectModel(chapterData.content)
+	const chapterObjectModel = getChapterObjectModel(chapterData.content)
 
 	const book = await getBookWithCache(bookCode.toUpperCase())
 
@@ -32,10 +38,9 @@ export const ReaderPage = async ({ params }: { params: ReaderPageParams }) => {
 		<>
 			<NavBar bookName={book.name} chapter={chapter} />
 			<ReaderPageContainer>
-				<ChapterContent
-					chapterContentHtml={chapterContentHtml}
-					isStudyMode={isStudyMode}
-				/>
+				<ChapterContentContainer>
+					{renderChapterContent(chapterObjectModel, isStudyMode)}
+				</ChapterContentContainer>
 				<ReaderNavButtons
 					bookCode={bookCode}
 					chapter={chapter}
diff --git a/src/_pages/ReaderPage/chapterContentData/getChapterObjectModel.tsx b/src/_pages/ReaderPage/chapterDataProcessing/getChapterObjectModel.tsx
similarity index 95%
rename from src/_pages/ReaderPage/chapterContentData/getChapterObjectModel.tsx
rename to src/_pages/ReaderPage/chapterDataProcessing/getChapterObjectModel.tsx
index 669f0e34..70fc7420 100644
--- a/src/_pages/ReaderPage/chapterContentData/getChapterObjectModel.tsx
+++ b/src/_pages/ReaderPage/chapterDataProcessing/getChapterObjectModel.tsx
@@ -4,10 +4,12 @@ import { type JSX } from 'react/jsx-runtime'
 
 export type IntrinsicEl = keyof JSX.IntrinsicElements
 
+export type VerseId = `${string}.${number}.${number}`
+
 export type ElNode = {
 	[key in IntrinsicEl]: ChapterOMNode[]
 } & {
-	':@': { attrs: { className: string } }
+	':@': { attrs: { className: string; 'data-usfm'?: VerseId } }
 }
 
 export type TextNode = { '#text': string }
diff --git a/src/_pages/ReaderPage/chapterContentData/renderChapterContent.tsx b/src/_pages/ReaderPage/chapterDataProcessing/renderChapterContent.tsx
similarity index 94%
rename from src/_pages/ReaderPage/chapterContentData/renderChapterContent.tsx
rename to src/_pages/ReaderPage/chapterDataProcessing/renderChapterContent.tsx
index 6f11be70..e15e47b3 100644
--- a/src/_pages/ReaderPage/chapterContentData/renderChapterContent.tsx
+++ b/src/_pages/ReaderPage/chapterDataProcessing/renderChapterContent.tsx
@@ -9,14 +9,15 @@ import {
 	Paragraph,
 	Quote,
 	SectionTitle,
-	Verse,
 	VerseLabel,
 } from '../components/ReaderComponents'
+import { Verse } from '../components/ReaderComponents.client'
 import {
 	type ChapterOM,
 	type ChapterOMNode,
 	type IntrinsicEl,
 	type TextNode,
+	type VerseId,
 } from './getChapterObjectModel'
 
 function isTextNode(node: ChapterOMNode): node is TextNode {
@@ -97,9 +98,11 @@ export const renderChapterContent = (
 		}
 
 		if (nodeClass === 'verse') {
+			const verseId = item[':@'].attrs['data-usfm']!
+
 			return [
 				...acc,
-				<Verse key={i} isStudyMode={isStudyMode}>
+				<Verse key={i} isStudyMode={isStudyMode} verseId={verseId}>
 					{renderChapterContent(item[NodeType], isStudyMode)}
 				</Verse>,
 			]
diff --git a/src/_pages/ReaderPage/components/ChapterContent.tsx b/src/_pages/ReaderPage/components/ChapterContent.tsx
deleted file mode 100644
index 559e40cd..00000000
--- a/src/_pages/ReaderPage/components/ChapterContent.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-'use client'
-
-import { twMerge } from 'tailwind-merge'
-import { type ChapterOM } from '../chapterContentData/getChapterObjectModel'
-import { renderChapterContent } from '../chapterContentData/renderChapterContent'
-import './ChapterContent.css'
-
-export const ChapterContent = ({
-	chapterContentHtml,
-	isStudyMode,
-}: {
-	chapterContentHtml: ChapterOM
-	isStudyMode: boolean
-}) => (
-	<div
-		className={twMerge(
-			'reader',
-			'mt-reader-gap md:mt-reader-gap-md text-base md:text-lg leading-[2em] md:leading-[2.25em]',
-		)}
-	>
-		{renderChapterContent(chapterContentHtml, isStudyMode)}
-	</div>
-)
diff --git a/src/_pages/ReaderPage/components/ChapterContentContainer.tsx b/src/_pages/ReaderPage/components/ChapterContentContainer.tsx
new file mode 100644
index 00000000..1c3b7a81
--- /dev/null
+++ b/src/_pages/ReaderPage/components/ChapterContentContainer.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+import { type ReactNode, useEffect } from 'react'
+import { twMerge } from 'tailwind-merge'
+import './ChapterContent.css'
+
+export const ChapterContentContainer = ({
+	children,
+}: {
+	children: ReactNode
+}) => {
+	const searchParams = useSearchParams()
+	const verseStart = parseInt(searchParams.get('verse-start')!)
+
+	useEffect(() => {
+		const passageStartVerse = document.querySelector(
+			`.rc-verse[data-verse-order="${verseStart}"]`,
+		)
+		const passageStartVerseQuote =
+			passageStartVerse?.parentElement?.classList?.contains('rc-quote') &&
+			passageStartVerse.parentElement
+		if (passageStartVerseQuote) {
+			passageStartVerseQuote?.scrollIntoView()
+		} else {
+			passageStartVerse?.scrollIntoView()
+		}
+	}, [verseStart])
+	return (
+		<div
+			className={twMerge(
+				'reader',
+				'mt-reader-gap md:mt-reader-gap-md text-base md:text-lg leading-[2em] md:leading-[2.25em]',
+			)}
+		>
+			{children}
+		</div>
+	)
+}
diff --git a/src/_pages/ReaderPage/components/NavBar.tsx b/src/_pages/ReaderPage/components/NavBar.tsx
index 7d446686..65c42b22 100644
--- a/src/_pages/ReaderPage/components/NavBar.tsx
+++ b/src/_pages/ReaderPage/components/NavBar.tsx
@@ -3,10 +3,10 @@ import { wChildren, wClassName, wName } from '~/component-helpers'
 import { setPageWidthCls } from '~/components/Page'
 
 const NavBarContainer = wChildren(({ children }) => (
-	<div className="z-10 sticky top-0 w-full bg-bgSurface">
+	<div id="navbar" className="sticky top-0 z-10 w-full bg-bgSurface">
 		<div className={setPageWidthCls}>
 			<div className="border-b border-b-borderEmphasized">
-				<nav className="flex sm:flex-row gap-6 justify-between items-center h-16">
+				<nav className="flex h-16 items-center justify-between gap-6 sm:flex-row">
 					{children}
 				</nav>
 			</div>
diff --git a/src/_pages/ReaderPage/components/ReaderComponents.client.tsx b/src/_pages/ReaderPage/components/ReaderComponents.client.tsx
new file mode 100644
index 00000000..8081f163
--- /dev/null
+++ b/src/_pages/ReaderPage/components/ReaderComponents.client.tsx
@@ -0,0 +1,50 @@
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+import { type ReactNode, useEffect, useRef, useState } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+export const Verse = ({
+	children,
+	isStudyMode,
+	verseId,
+	initialIsFocused,
+}: {
+	children: ReactNode
+	isStudyMode: boolean
+	verseId: `${string}.${number}.${number}`
+	initialIsFocused?: boolean
+}) => {
+	const [isFocused, setIsFocused] = useState(useRef(initialIsFocused).current)
+
+	const verseOrder = parseInt(verseId.split('.')[2]!)
+
+	const searchParams = useSearchParams()
+	const verseStart = parseInt(searchParams.get('verse-start')!)
+	const verseEnd = parseInt(searchParams.get('verse-end')!)
+
+	useEffect(() => {
+		const isIncludedInPassage =
+			verseOrder >= verseStart && verseOrder <= verseEnd
+		setIsFocused(isIncludedInPassage)
+	}, [verseEnd, verseOrder, verseStart])
+
+	return (
+		<span
+			data-verse-order={verseOrder}
+			className={twMerge(
+				'rc-verse scroll-mt-[65px]',
+				isStudyMode && 'block relative',
+			)}
+		>
+			<span
+				className={twMerge(
+					'border-b-2 border-b-transparent transition duration-quick ease-in',
+					isFocused && 'border-b-borderEmphasized',
+				)}
+			>
+				{children}
+			</span>
+		</span>
+	)
+}
diff --git a/src/_pages/ReaderPage/components/ReaderComponents.tsx b/src/_pages/ReaderPage/components/ReaderComponents.tsx
index 643054c2..93ccf271 100644
--- a/src/_pages/ReaderPage/components/ReaderComponents.tsx
+++ b/src/_pages/ReaderPage/components/ReaderComponents.tsx
@@ -1,6 +1,5 @@
 import { type ReactNode } from 'react'
 import { twMerge } from 'tailwind-merge'
-import { Icon } from '~/components'
 
 export const LargeSectionTitle = ({ children }: { children: ReactNode }) => (
 	<h2
@@ -41,7 +40,7 @@ export const LargeSectionCrossReference = ({
 )
 
 export const SectionTitle = ({ children }: { children: ReactNode }) => (
-	<h2 className="rc-section-title font-bold text-lg md:text-xl">{children}</h2>
+	<h2 className="rc-section-title text-lg font-bold md:text-xl">{children}</h2>
 )
 
 export const FancyAside = ({ children }: { children: ReactNode }) => (
@@ -54,18 +53,6 @@ export const Paragraph = ({ children }: { children: ReactNode }) => (
 	<p className={twMerge('rc-paragraph')}>{children}</p>
 )
 
-export const Verse = ({
-	children,
-	isStudyMode,
-}: {
-	children: ReactNode
-	isStudyMode: boolean
-}) => (
-	<span className={twMerge('rc-verse', isStudyMode && 'block relative')}>
-		{children}
-	</span>
-)
-
 export const VerseLabel = ({
 	verseNumber,
 	isStudyMode,
@@ -104,15 +91,9 @@ export const CrossReference = ({
 }) => (
 	<span className="rc-cross-reference">
 		&nbsp;
-		<span className="inline-flex translate-y-[2px] -m-1 p-1">
-			<Icon
-				name="article_shortcut"
-				fill
-				size={16}
-				weight={700}
-				className="text-fgFaded cursor-pointer"
-			/>
-		</span>
+		<sup className="font-sans text-[0.75em] text-fgFaded [font-weight:1000]">
+			&dagger;
+		</sup>
 		<span className="hidden">{referenceList}</span>
 	</span>
 )
@@ -124,5 +105,7 @@ export const JesusWords = ({ children }: { children: ReactNode }) => (
 )
 
 export const Quote = ({ children }: { children: ReactNode }) => (
-	<span className={twMerge('rc-quote block font-mono')}>{children}</span>
+	<span className={twMerge('rc-quote block font-mono scroll-mt-[65px]')}>
+		{children}
+	</span>
 )
diff --git a/src/_pages/ReaderPage/components/ReaderNavButtons.tsx b/src/_pages/ReaderPage/components/ReaderNavButtons.tsx
index b94e4a51..e954328e 100644
--- a/src/_pages/ReaderPage/components/ReaderNavButtons.tsx
+++ b/src/_pages/ReaderPage/components/ReaderNavButtons.tsx
@@ -12,7 +12,7 @@ export const ReaderNavButtons = ({
 	chapter,
 	readerMode,
 }: ReaderPageParams) => (
-	<div className="flex justify-between mt-[2.5rem] md:mt-[3rem]">
+	<div className="mt-[2.5rem] flex justify-between md:mt-[3rem]">
 		<ChapterNavLink href={`/${readerMode}/${bookCode}/${Number(chapter) - 1}`}>
 			Previous chapter
 		</ChapterNavLink>
diff --git a/src/_pages/ReaderPage/index.ts b/src/_pages/ReaderPage/index.ts
index 463d9d57..cd6de8fc 100644
--- a/src/_pages/ReaderPage/index.ts
+++ b/src/_pages/ReaderPage/index.ts
@@ -1,2 +1,2 @@
 export * from './Reader.page'
-export { getChapterObjectModel } from '~/_pages/ReaderPage/chapterContentData/getChapterObjectModel'
+export { getChapterObjectModel } from '~/_pages/ReaderPage/chapterDataProcessing/getChapterObjectModel'
diff --git a/src/components/molecules/Footer.tsx b/src/components/molecules/Footer.tsx
index 9539408f..ada45125 100644
--- a/src/components/molecules/Footer.tsx
+++ b/src/components/molecules/Footer.tsx
@@ -1,7 +1,7 @@
 import { Icon } from '~/components/atoms/Icon/Icon'
 
 export const Footer = () => (
-	<footer className="flex flex-col gap-12 leading-relaxed items-center text-center text-xs text-fgSubtle mx-auto w-full max-w-2xl px-8 my-20 md:my-32">
+	<footer className="mx-auto my-20 flex w-full max-w-2xl flex-col items-center gap-12 px-8 text-center text-xs leading-relaxed text-fgSubtle md:my-32">
 		<div className="flex flex-col gap-4">
 			<p>
 				© Drepturi de autor British and Foreign Bible Society (BFBS) și