diff --git a/src/components/Data/components/LoadingRows.tsx b/src/components/Data/components/LoadingRows.tsx
index e4c34f69..4b937e6b 100644
--- a/src/components/Data/components/LoadingRows.tsx
+++ b/src/components/Data/components/LoadingRows.tsx
@@ -8,7 +8,7 @@ type Props = {
   numRows?: number
 }
 
-const LoadingRows: React.FC<Props> = ({ loading = true, numRows = 1 }) => loading ? (
+export const LoadingRows: React.FC<Props> = ({ loading = true, numRows = 1 }) => loading ? (
   <RepeatChildren times={ numRows }>
     <Definition term={ <SmallSkeleton /> } value={ <SmallSkeleton /> } />
   </RepeatChildren>
diff --git a/src/components/Data/components/index.ts b/src/components/Data/components/index.ts
new file mode 100644
index 00000000..4e2cb806
--- /dev/null
+++ b/src/components/Data/components/index.ts
@@ -0,0 +1,2 @@
+export * from "./LoadingRows"
+export * from "./Placeholder"
\ No newline at end of file
diff --git a/src/components/HolidayRentalRegistrations/HolidayRentalRegistrations.tsx b/src/components/HolidayRentalRegistrations/HolidayRentalRegistrations.tsx
index e060d6cf..378b6e7a 100644
--- a/src/components/HolidayRentalRegistrations/HolidayRentalRegistrations.tsx
+++ b/src/components/HolidayRentalRegistrations/HolidayRentalRegistrations.tsx
@@ -1,13 +1,14 @@
 import React from "react"
-import Placeholder from "../Data/components/Placeholder"
+import { Spinner } from "@amsterdam/asc-ui"
 import type { HolidayRentalRegistration } from "./types"
 import Registration from "./components/Registration"
-import LoadingRows from "../Data/components/LoadingRows"
+import { Placeholder, LoadingRows } from "../Data/components"
 
 type Props = {
   data: HolidayRentalRegistration[]
-  loading?: boolean
   horizontalBordered?: boolean
+  loading?: boolean
+  loadingRows?: number
 }
 
 /**
@@ -15,26 +16,27 @@ type Props = {
  */
 
 const HolidayRentalRegistrations: React.FC<Props> = ({
-  data, loading = false, horizontalBordered = true
+  data,
+  horizontalBordered = true,
+  loading = false,
+  loadingRows
 }) => {
-
   if (loading) {
-    return <LoadingRows numRows={ 6 } />
+    return loadingRows ? <LoadingRows numRows={loadingRows} /> : <Spinner />
   }
   return (
     <>
-      { data === undefined || data.length === 0 ? (
+      {data === undefined || data.length === 0 ? (
         <Placeholder>Geen registraties gevonden</Placeholder>
       ) : (
         <>
-          { data.map(registration => (
+          {data.map((registration) => (
             <Registration
-              key={ registration.registrationNumber }
-              registration={ registration }
-              horizontalBordered={ horizontalBordered }
+              key={registration.registrationNumber}
+              registration={registration}
+              horizontalBordered={horizontalBordered}
             />
-          )
-          )}
+          ))}
         </>
       )}
     </>
diff --git a/src/components/HolidayRentalRegistrations/components/Registration.tsx b/src/components/HolidayRentalRegistrations/components/Registration.tsx
index 2bc50410..b6b8013f 100644
--- a/src/components/HolidayRentalRegistrations/components/Registration.tsx
+++ b/src/components/HolidayRentalRegistrations/components/Registration.tsx
@@ -18,7 +18,7 @@ const Registration: React.FC<Props> = ({ registration, horizontalBordered }) =>
   return (
     <StyledDiv>
       <DefinitionList 
-        title="Registratie"
+        title={ `Registratie (${ registration.registrationNumber })` }
         data={ values }
         horizontalBordered={ horizontalBordered }
         headingSize="h4"
diff --git a/src/components/HolidayRentalRegistrations/components/hooks/useValues.tsx b/src/components/HolidayRentalRegistrations/components/hooks/useValues.tsx
index c854e7e6..046ef5cd 100644
--- a/src/components/HolidayRentalRegistrations/components/hooks/useValues.tsx
+++ b/src/components/HolidayRentalRegistrations/components/hooks/useValues.tsx
@@ -10,7 +10,6 @@ const formatRequester = (requester: HolidayRentalRegistration["requester"]) => {
 
 export default (registration: HolidayRentalRegistration) => {
   const {
-    registrationNumber,
     requester,
     agreementDate,
     createdAt,
@@ -20,7 +19,6 @@ export default (registration: HolidayRentalRegistration) => {
   const requesterName = formatRequester(requester)
 
   const values = {
-    "Registratienummer": registrationNumber,
     "Aanvrager": requesterName,
     "E-mail": requester?.email,
     "Aangemaakt": <DateDisplay date={createdAt} emptyText="-" />,
diff --git a/src/components/HolidayRentalReports/HolidayRentalReports.tsx b/src/components/HolidayRentalReports/HolidayRentalReports.tsx
index 7dd4d602..509b14b2 100644
--- a/src/components/HolidayRentalReports/HolidayRentalReports.tsx
+++ b/src/components/HolidayRentalReports/HolidayRentalReports.tsx
@@ -3,37 +3,41 @@ import { Spinner } from "@amsterdam/asc-ui"
 import type { RentalReport } from "./types"
 import ReportsPerYear from "./components/ReportsPerYear"
 import Report from "./components/Report"
-import Placeholder from "../Data/components/Placeholder"
+import { Placeholder, LoadingRows } from "../Data/components"
 
 type Props = {
   data: RentalReport[]
-  loading?: boolean
   horizontalBordered?: boolean
+  loading?: boolean
+  loadingRows?: number
 }
 
+/**
+ *  Overview of Vakantieverhuur meldingen.
+ */
+
 const HolidayRentalReports: React.FC<Props> = ({
-  data = [], loading = false, horizontalBordered = true
+  data = [],
+  horizontalBordered = true,
+  loading = false,
+  loadingRows
 }) => {
-
   if (loading) {
-    return <Spinner data-testid="spinner"/>
+    return loadingRows ? <LoadingRows numRows={loadingRows} /> : <Spinner />
   }
   if (!(data.length > 0)) {
-    return (
-      <Placeholder>Geen vakantieverhuur meldingen</Placeholder>
-    )
+    return <Placeholder>Geen vakantieverhuur meldingen</Placeholder>
   }
   return (
     <>
-      <ReportsPerYear data={ data } />
-      { data.map((report) => (
-          <Report
-            report={ report }
-            key={ `${ report.startDatum }-${ report.eindDatum } `}
-            horizontalBordered={ horizontalBordered }
-          />
-        ))
-      }
+      <ReportsPerYear data={data} />
+      {data.map((report) => (
+        <Report
+          report={report}
+          key={`${ report.startDatum }-${ report.eindDatum } `}
+          horizontalBordered={horizontalBordered}
+        />
+      ))}
     </>
   )
 }
diff --git a/src/components/PermitsOverview/PermitsOverview.tsx b/src/components/PermitsOverview/PermitsOverview.tsx
index 1af7741c..35f447e0 100644
--- a/src/components/PermitsOverview/PermitsOverview.tsx
+++ b/src/components/PermitsOverview/PermitsOverview.tsx
@@ -3,13 +3,14 @@ import { Spinner } from "@amsterdam/asc-ui"
 import type Permit from "./Permit"
 import PermitDetails from "./components/PermitDetails"
 import useKnownPermits from "./hooks/useKnownPermits"
-import Placeholder from "../Data/components/Placeholder"
+import { Placeholder, LoadingRows } from "../Data/components"
 
 export type Props = {
-  permits: Permit[]
+  horizontalBordered?: boolean
   loading?: boolean
+  loadingRows?: number
+  permits: Permit[]
   showUnknown?: boolean
-  horizontalBordered?: boolean
 }
 
 /**
@@ -18,28 +19,31 @@ export type Props = {
  */
 
 const PermitsOverview: React.FC<Props> = ({
-  permits, loading = false, showUnknown = false, horizontalBordered = true
+  permits,
+  loading = false,
+  showUnknown = false,
+  horizontalBordered = true,
+  loadingRows
 }) => {
   const knownPermits = useKnownPermits(permits)
   const filteredPermits = showUnknown ? permits : knownPermits
 
   if (loading) {
-    return <Spinner data-testid="spinner" />
+    return loadingRows ? <LoadingRows numRows={loadingRows} /> : <Spinner />
   }
   return (
     <>
-      { filteredPermits === undefined || filteredPermits.length === 0 ? (
+      {filteredPermits === undefined || filteredPermits.length === 0 ? (
         <Placeholder>Geen vergunningen gevonden</Placeholder>
       ) : (
         <div>
-          { filteredPermits.map(permit => (
+          {filteredPermits.map((permit) => (
             <PermitDetails
-              key={ permit.permit_type }
-              permit={ permit }
-              horizontalBordered={ horizontalBordered }
+              key={permit.permit_type}
+              permit={permit}
+              horizontalBordered={horizontalBordered}
             />
-          )
-          )}
+          ))}
         </div>
       )}
     </>
diff --git a/src/components/PermitsSynopsis/PermitsSynopsis.tsx b/src/components/PermitsSynopsis/PermitsSynopsis.tsx
index 1aa6d643..39e953bd 100644
--- a/src/components/PermitsSynopsis/PermitsSynopsis.tsx
+++ b/src/components/PermitsSynopsis/PermitsSynopsis.tsx
@@ -4,13 +4,14 @@ import { Spinner } from "@amsterdam/asc-ui"
 import type PermitType from "./PermitType"
 import PermitDetails from "./components/PermitDetails"
 import { getValidPermits } from "./utils"
-import Placeholder from "../Data/components/Placeholder"
+import { Placeholder, LoadingRows } from "../Data/components"
 
 export type Props = {
-  permits: PermitType[]
-  loading?: boolean
   displayOnlyValidPermits?: boolean
   horizontalBordered?: boolean
+  loading?: boolean
+  loadingRows?: number
+  permits: PermitType[]
 }
 
 /**
@@ -19,29 +20,34 @@ export type Props = {
  */
 
 const PermitsSynopsis: React.FC<Props> = ({
-  permits = [], loading = false, displayOnlyValidPermits = false, horizontalBordered = true
+  displayOnlyValidPermits = false,
+  horizontalBordered = true,
+  loading = false,
+  loadingRows,
+  permits = []
 }) => {
   const validPermits = getValidPermits(permits)
   const filteredPermits = displayOnlyValidPermits ? validPermits : permits
-  const sortedPermits = filteredPermits.sort((a, b) => dayjs(b?.startdatum).diff(dayjs(a?.startdatum)))
+  const sortedPermits = filteredPermits.sort((a, b) =>
+    dayjs(b?.startdatum).diff(dayjs(a?.startdatum))
+  )
 
   if (loading) {
-    return <Spinner data-testid="spinner" />
+    return loadingRows ? <LoadingRows numRows={loadingRows} /> : <Spinner />
   }
   return (
     <>
-      { sortedPermits === undefined || sortedPermits.length === 0 ? (
+      {sortedPermits === undefined || sortedPermits.length === 0 ? (
         <Placeholder>{`Geen ${ permits.length > 0 ? "valide " : "" }vergunningen gevonden`}</Placeholder>
       ) : (
         <div>
-          { sortedPermits.map((permit, index) => (
+          {sortedPermits.map((permit, index) => (
             <PermitDetails
-              key={ `${ permit.muT_DAT }${ index }` }
-              permit={ permit }
-              horizontalBordered={ horizontalBordered }
+              key={`${ permit.muT_DAT }${ index }`}
+              permit={permit}
+              horizontalBordered={horizontalBordered}
             />
-          )
-          )}
+          ))}
         </div>
       )}
     </>
diff --git a/src/components/Residents/Residents.tsx b/src/components/Residents/Residents.tsx
index 825d4c7a..a4fe2ced 100644
--- a/src/components/Residents/Residents.tsx
+++ b/src/components/Residents/Residents.tsx
@@ -6,8 +6,9 @@ import ResidentsView from "./ResidentsView"
 
 type Props = {
   data?: ResidentsType
-  loading?: boolean
   header?: boolean
+  loading?: boolean
+  loadingRows?: number
 }
 
 const NUMBER_OF_YEARS_DECEASED_PERSON_IS_VISIBLE = 1
@@ -21,8 +22,13 @@ const getResidents = (data?: ResidentsType) => {
       const deceased = resident?.overlijden?.datum?.datum
       if (deceased) {
         const deceasedDate = dayjs(deceased)
-        const dateDeceasedPersonIsVisible = dayjs().subtract(NUMBER_OF_YEARS_DECEASED_PERSON_IS_VISIBLE, "year")
-        const isDeceasedPersonVisible = deceasedDate.isAfter(dateDeceasedPersonIsVisible) || deceasedDate.isSame(dateDeceasedPersonIsVisible)
+        const dateDeceasedPersonIsVisible = dayjs().subtract(
+          NUMBER_OF_YEARS_DECEASED_PERSON_IS_VISIBLE,
+          "year"
+        )
+        const isDeceasedPersonVisible =
+          deceasedDate.isAfter(dateDeceasedPersonIsVisible) ||
+          deceasedDate.isSame(dateDeceasedPersonIsVisible)
         return isDeceasedPersonVisible
       }
       return true
@@ -31,14 +37,22 @@ const getResidents = (data?: ResidentsType) => {
   return residents
 }
 
-const Residents: React.FC<Props> = ({ data, loading = false, header = false }) => {
-
+const Residents: React.FC<Props> = ({
+  data,
+  loading = false,
+  header = false,
+  loadingRows
+}) => {
   const residents = getResidents(data)
 
   return (
     <>
-      { header && <ResidentsHeader residents={ residents } /> }
-      <ResidentsView residents={ residents } loading={ loading } />
+      {header && <ResidentsHeader residents={residents} />}
+      <ResidentsView
+        residents={residents}
+        loading={loading}
+        loadingRows={loadingRows}
+      />
     </>
   )
 }
diff --git a/src/components/Residents/ResidentsView.tsx b/src/components/Residents/ResidentsView.tsx
index 19e26654..02586477 100644
--- a/src/components/Residents/ResidentsView.tsx
+++ b/src/components/Residents/ResidentsView.tsx
@@ -2,43 +2,38 @@ import React from "react"
 import styled from "styled-components"
 import { themeSpacing, Spinner } from "@amsterdam/asc-ui"
 import Resident from "./Resident"
-import Placeholder from "../Data/components/Placeholder"
+import { Placeholder, LoadingRows } from "../Data/components"
 
 type Props = {
-  residents?: any
   loading?: boolean
+  loadingRows?: number
+  residents?: any
 }
 
 const Ul = styled.ul`
   margin-top: ${ themeSpacing(8) };
   padding: 0;
   list-style: none;
-
   li {
     margin-bottom: ${ themeSpacing(14) };
   }
 `
 
-const Residents: React.FC<Props> = ({ residents, loading }) => {
+const Residents: React.FC<Props> = ({ residents, loading, loadingRows }) => {
   if (loading) {
-    return <Spinner data-testid="spinner" />
+    return loadingRows ? <LoadingRows numRows={loadingRows} /> : <Spinner />
   }
   if (!(residents?.length >= 0)) {
-    return (
-      <Placeholder>Oeps, er gaat iets mis...</Placeholder>
-    )
+    return <Placeholder>Oeps, er gaat iets mis...</Placeholder>
   }
   if (residents?.length === 0) {
-    return (
-      <Placeholder>Geen ingeschreven personen gevonden</Placeholder>
-    )
+    return <Placeholder>Geen ingeschreven personen gevonden</Placeholder>
   } else {
     return (
       <Ul data-testid="residents">
-        { residents.map((resident: any, index: number) => (
-            <Resident resident={ resident } key={ index } num={ index + 1 } />
-          ))
-        }
+        {residents.map((resident: any, index: number) => (
+          <Resident resident={resident} key={index} num={index + 1} />
+        ))}
       </Ul>
     )
   }
diff --git a/src/stories/HolidayRentalReports.stories.tsx b/src/stories/HolidayRentalReports.stories.tsx
index c33e0faa..d205292d 100644
--- a/src/stories/HolidayRentalReports.stories.tsx
+++ b/src/stories/HolidayRentalReports.stories.tsx
@@ -1,24 +1,20 @@
-import React from "react"
-import { Meta } from "@storybook/react"
-
+import { Meta, StoryObj } from "@storybook/react"
 import { HolidayRentalReports } from "../index"
 import holidayRentalReportsData from "./mockedData/holidayRentalReportsData"
 
-export default {
+const meta: Meta<typeof HolidayRentalReports> = {
   title: "HolidayRentalReports",
   component: HolidayRentalReports
-} as Meta
+}
 
-const StoryComponent = (args) => <HolidayRentalReports {...args} />
+export default meta
 
-export const Default = StoryComponent.bind({})
-Default.parameters =  {
-  docs: {
-    storyDescription: "Overview of holiday reports"
+type Story = StoryObj<typeof HolidayRentalReports>
+
+export const Default: Story = {
+  args: {
+    data: holidayRentalReportsData,
+    horizontalBordered: true,
+    loading: false
   }
 }
-Default.args = {
-  data: holidayRentalReportsData,
-  horizontalBordered: true,
-  loading: false
-}
diff --git a/src/stories/PermitsOverview.stories.tsx b/src/stories/PermitsOverview.stories.tsx
index ed90bc11..7353113f 100644
--- a/src/stories/PermitsOverview.stories.tsx
+++ b/src/stories/PermitsOverview.stories.tsx
@@ -1,25 +1,21 @@
-import React from "react"
-import { Meta } from "@storybook/react"
-
+import { Meta, StoryObj } from "@storybook/react"
 import { PermitsOverview } from "../index"
 import permitsOverviewData from "./mockedData/permitsOverviewData"
 
-export default {
+const meta: Meta<typeof PermitsOverview> = {
   title: "PermitsOverview",
   component: PermitsOverview
-} as Meta
+}
 
-const StoryComponent = (args) => <PermitsOverview { ...args } />
+export default meta
 
-export const Default = StoryComponent.bind({})
-Default.parameters =  {
-  docs: {
-    storyDescription: "Overview of permits"
+type Story = StoryObj<typeof PermitsOverview>
+
+export const Default: Story = {
+  args: {
+    horizontalBordered: true,
+    loading: false,
+    permits: permitsOverviewData,
+    showUnknown: false
   }
 }
-Default.args = {
-  horizontalBordered: true,
-  loading: false,
-  permits: permitsOverviewData,
-  showUnknown: false
-}
diff --git a/src/stories/PermitsSynopsis.stories.tsx b/src/stories/PermitsSynopsis.stories.tsx
index e491eb29..685eb6be 100644
--- a/src/stories/PermitsSynopsis.stories.tsx
+++ b/src/stories/PermitsSynopsis.stories.tsx
@@ -1,25 +1,21 @@
-import React from "react"
-import { Meta } from "@storybook/react"
-
+import { Meta, StoryObj } from "@storybook/react"
 import { PermitsSynopsis } from "../index"
 import PermitsSynopsisData from "./mockedData/PermitsSynopsisData"
 
-export default {
+const meta: Meta<typeof PermitsSynopsis> = {
   title: "PermitsSynopsis",
   component: PermitsSynopsis
-} as Meta
+}
 
-const StoryComponent = (args) => <PermitsSynopsis { ...args } />
+export default meta
 
-export const Default = StoryComponent.bind({})
-Default.parameters =  {
-  docs: {
-    storyDescription: "Overview of permits"
+type Story = StoryObj<typeof PermitsSynopsis>
+
+export const Default: Story = {
+  args: {
+    horizontalBordered: true,
+    loading: false,
+    permits: PermitsSynopsisData,
+    displayOnlyValidPermits: false
   }
 }
-Default.args = {
-  horizontalBordered: true,
-  loading: false,
-  permits: PermitsSynopsisData,
-  displayOnlyValidPermits: false
-}
diff --git a/src/stories/Residents.stories.tsx b/src/stories/Residents.stories.tsx
index 9b43a869..1e91c39d 100644
--- a/src/stories/Residents.stories.tsx
+++ b/src/stories/Residents.stories.tsx
@@ -1,24 +1,20 @@
-import React from "react"
-import { Meta } from "@storybook/react"
-
+import { Meta, StoryObj } from "@storybook/react"
 import { Residents } from "../index"
 import residentsData from "./mockedData/residentsData"
 
-export default {
+const meta: Meta<typeof Residents> = {
   title: "Residents",
   component: Residents
-} as Meta
+}
 
-const StoryComponent = (args) => <Residents {...args} />
+export default meta
 
-export const Default = StoryComponent.bind({})
-Default.parameters =  {
-  docs: {
-    storyDescription: "Overview of the residents of a residence."
+type Story = StoryObj<typeof Residents>
+
+export const Default: Story = {
+  args: {
+    data: residentsData,
+    loading: false,
+    header: false
   }
 }
-Default.args = {
-  data: residentsData,
-  loading: false,
-  header: false
-}