diff --git a/dashboard/final-example/app/dashboard/(overview)/page.tsx b/dashboard/final-example/app/dashboard/(overview)/page.tsx
index 4d9b4ce..e1a9674 100644
--- a/dashboard/final-example/app/dashboard/(overview)/page.tsx
+++ b/dashboard/final-example/app/dashboard/(overview)/page.tsx
@@ -1,4 +1,4 @@
-import Cards from '@/app/ui/dashboard/cards';
+import CardWrapper from '@/app/ui/dashboard/cards';
 import RevenueChart from '@/app/ui/dashboard/revenue-chart';
 import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
 import { lusitana } from '@/app/ui/fonts';
@@ -17,7 +17,7 @@ export default async function Page() {
       </h1>
       <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
         <Suspense fallback={<CardsSkeleton />}>
-          <Cards />
+          <CardWrapper />
         </Suspense>
       </div>
       <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
diff --git a/dashboard/final-example/app/ui/dashboard/cards.tsx b/dashboard/final-example/app/ui/dashboard/cards.tsx
index 10fadb4..2b0e4c2 100644
--- a/dashboard/final-example/app/ui/dashboard/cards.tsx
+++ b/dashboard/final-example/app/ui/dashboard/cards.tsx
@@ -14,7 +14,7 @@ const iconMap = {
   invoices: InboxIcon,
 };
 
-export default async function Cards() {
+export default async function CardWrapper() {
   const {
     numberOfInvoices,
     numberOfCustomers,
diff --git a/dashboard/starter-example/app/ui/dashboard/cards.tsx b/dashboard/starter-example/app/ui/dashboard/cards.tsx
index bbd3a86..0ee0286 100644
--- a/dashboard/starter-example/app/ui/dashboard/cards.tsx
+++ b/dashboard/starter-example/app/ui/dashboard/cards.tsx
@@ -13,7 +13,7 @@ const iconMap = {
   invoices: InboxIcon,
 };
 
-export default async function Cards() {
+export default async function CardWrapper() {
   return (
     <>
       {/* NOTE: comment in this code when you get to this point in the course */}