diff --git a/client/components/cards/LazySeriesCard.cy.js b/client/components/cards/LazySeriesCard.cy.js
index da9bbbe3..cf9ecb68 100644
--- a/client/components/cards/LazySeriesCard.cy.js
+++ b/client/components/cards/LazySeriesCard.cy.js
@@ -67,7 +67,7 @@ describe("LazySeriesCard", () => {
     })
     cy.get("#seriesLengthMarker").should("be.visible").and("have.text", propsData.seriesMount.books.length)
     cy.get("#seriesProgressBar").should("not.exist")
-    cy.get("#HoveringDisplayTitle").should("be.hidden")
+    cy.get("#hoveringDisplayTitle").should("be.hidden")
     cy.get("#rssFeedMarker").should("be.visible")
     cy.get("#standardBottomDisplayTitle").should("not.exist")
     cy.get("#detailBottomDisplayTitle").should("be.visible")
@@ -79,7 +79,7 @@ describe("LazySeriesCard", () => {
     cy.mount(LazySeriesCard, { propsData, stubs, mocks })
     cy.get("#series-card-0").trigger("mouseover")
 
-    cy.get("#HoveringDisplayTitle").should("be.visible").should("have.text", "The Lord of the Rings")
+    cy.get("#hoveringDisplayTitle").should("be.visible").should("have.text", "The Lord of the Rings")
     cy.get("#rssFeedMarker").should("not.exist")
   })
 
diff --git a/client/components/cards/LazySeriesCard.vue b/client/components/cards/LazySeriesCard.vue
index 5b301d72..44828abd 100644
--- a/client/components/cards/LazySeriesCard.vue
+++ b/client/components/cards/LazySeriesCard.vue
@@ -9,7 +9,7 @@
 
     <div id="seriesProgressBar" v-if="seriesPercentInProgress > 0" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b w-full" :class="isSeriesFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: seriesPercentInProgress * 100 + '%' }" />
 
-    <div id="HoveringDisplayTitle" v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
+    <div id="hoveringDisplayTitle" v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
       <p :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ displayTitle }}</p>
     </div>
 
diff --git a/client/components/cards/NarratorCard.cy.js b/client/components/cards/NarratorCard.cy.js
index 7ab79811..ac10b6b3 100644
--- a/client/components/cards/NarratorCard.cy.js
+++ b/client/components/cards/NarratorCard.cy.js
@@ -42,7 +42,7 @@ describe('<NarratorCard />', () => {
     let mountOptions = { propsData, mocks }
     cy.mount(NarratorCard, mountOptions)
 
-    cy.get('#numbooks').should('have.text', '5 Books')
+    cy.get('#numBooks').should('have.text', '5 Books')
   })
 
   it('renders 1 book correctly', () => {
@@ -50,7 +50,7 @@ describe('<NarratorCard />', () => {
     let mountOptions = { propsData, mocks }
     cy.mount(NarratorCard, mountOptions)
 
-    cy.get('#numbooks').should('have.text', '1 Book')
+    cy.get('#numBooks').should('have.text', '1 Book')
 
   })
 
@@ -59,7 +59,7 @@ describe('<NarratorCard />', () => {
     let mountOptions = { propsData, mocks }
     cy.mount(NarratorCard, mountOptions)
     cy.get('#name').should('have.text', '')
-    cy.get('#numbooks').should('have.text', '0 Books')
+    cy.get('#numBooks').should('have.text', '0 Books')
   })
 
   it('has the correct width and height', () => {
@@ -81,6 +81,6 @@ describe('<NarratorCard />', () => {
     let mountOptions = { propsData, mocks }
     cy.mount(NarratorCard, mountOptions)
     cy.get('#name').should('have.css', 'font-size', '14.4px') // 0.75 * 1.2 * 16
-    cy.get('#numbooks').should('have.css', 'font-size', '12.48px') // 0.65 * 1.2 * 16
+    cy.get('#numBooks').should('have.css', 'font-size', '12.48px') // 0.65 * 1.2 * 16
   })
 })
\ No newline at end of file
diff --git a/client/components/cards/NarratorCard.vue b/client/components/cards/NarratorCard.vue
index d830e994..3a4d6752 100644
--- a/client/components/cards/NarratorCard.vue
+++ b/client/components/cards/NarratorCard.vue
@@ -8,7 +8,7 @@
       <!-- Narrator name & num books overlay -->
       <div class="absolute bottom-0 left-0 w-full py-1 bg-black bg-opacity-60 px-2">
         <p id="name" class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
-        <p id="numbooks" class="text-center text-gray-200" :style="{ fontSize: sizeMultiplier * 0.65 + 'rem' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
+        <p id="numBooks" class="text-center text-gray-200" :style="{ fontSize: sizeMultiplier * 0.65 + 'rem' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
       </div>
     </div>
   </nuxt-link>