diff --git a/components/bible/verse-details-panel.tsx b/components/bible/verse-details-panel.tsx
index a9d475d..6be46cb 100644
--- a/components/bible/verse-details-panel.tsx
+++ b/components/bible/verse-details-panel.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { Box, Paper, Typography, Tabs, Tab, IconButton, useMediaQuery, useTheme, TextField, Button } from '@mui/material'
 import { Close, Bookmark, BookmarkBorder } from '@mui/icons-material'
 import { BibleVerse } from '@/types'
@@ -26,6 +26,11 @@ export function VersDetailsPanel({
   const [tabValue, setTabValue] = useState(0)
   const [noteText, setNoteText] = useState('')
 
+  // Reset to Notes tab when verse changes
+  useEffect(() => {
+    setTabValue(0)
+  }, [verse?.id])
+
   if (!verse || !isOpen) return null
 
   const handleAddNote = () => {
@@ -39,10 +44,14 @@ export function VersDetailsPanel({
     <Box sx={{ p: 2 }}>
       {/* Verse Header */}
       <Box sx={{ mb: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
-        <Typography variant="subtitle1" fontWeight={600}>
-          Verse {verse.verseNum}
+        <Typography variant="subtitle1" fontWeight={600} id="verse-details-header">
+          {verse.chapter?.book?.name} {verse.chapter?.chapterNum}:{verse.verseNum}
         </Typography>
-        <IconButton size="small" onClick={onClose}>
+        <IconButton
+          size="small"
+          onClick={onClose}
+          aria-label="Close verse details"
+        >
           <Close />
         </IconButton>
       </Box>
@@ -57,6 +66,7 @@ export function VersDetailsPanel({
       {/* Bookmark Button */}
       <Box sx={{ mb: 2 }}>
         <Button
+          aria-label={isBookmarked ? 'Remove bookmark' : 'Add bookmark'}
           startIcon={isBookmarked ? <Bookmark /> : <BookmarkBorder />}
           onClick={onToggleBookmark}
           variant={isBookmarked ? 'contained' : 'outlined'}
@@ -88,6 +98,9 @@ export function VersDetailsPanel({
               multiline
               rows={3}
               placeholder="Add a note..."
+              aria-label="Note text"
+              helperText={`${noteText.length}/500 characters`}
+              inputProps={{ maxLength: 500 }}
               value={noteText}
               onChange={(e) => setNoteText(e.target.value)}
               size="small"
@@ -122,6 +135,9 @@ export function VersDetailsPanel({
   if (isMobile) {
     return (
       <Box
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="verse-details-header"
         sx={{
           position: 'fixed',
           bottom: 0,