diff --git a/README.md b/README.md
index a0fa470..b4c63c1 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,7 @@ Part of this tutorial was to deploy it out to vercel. It was very slick.I took t
 6. [Setting Up Your Database ♻️][2-6]  
 7. [Fetching Data ♻️][2-7]  
 8. [Static and Dynamic Rendering ♻️][2-8]
-9. Streaming 🚧 
+9. [Streaming ♻️][2-9]
 10. Partial Prerendering ️🚧 
 11. Adding Search and Pagination 🚧 
 12. Mutating Data 🚧 
@@ -57,4 +57,5 @@ Part of this tutorial was to deploy it out to vercel. It was very slick.I took t
 [2-5]: https://github.com/treejamie/next-js-learn/pull/12
 [2-6]: https://github.com/treejamie/next-js-learn/pull/13
 [2-7]: https://github.com/treejamie/next-js-learn/pull/15
-[2-8]: https://github.com/treejamie/next-js-learn/pull/16
\ No newline at end of file
+[2-8]: https://github.com/treejamie/next-js-learn/pull/16
+[2-9]: https://github.com/treejamie/next-js-learn/pull/17
\ No newline at end of file
diff --git a/app-router/nextjs-dashboard/app/dashboard/page.tsx b/app-router/nextjs-dashboard/app/dashboard/page.tsx
deleted file mode 100644
index 2cd53e6..0000000
--- a/app-router/nextjs-dashboard/app/dashboard/page.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Card } 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';
-import { fetchRevenue, fetchLatestInvoices, fetchCardData } from '@/app/lib/data';
-
-export default async function Page() {
-  const revenue = await fetchRevenue();
-  const latestInvoices = await fetchLatestInvoices();
-  const {
-    numberOfCustomers,
-    numberOfInvoices,
-    totalPaidInvoices,
-    totalPendingInvoices, 
-
-  } = await fetchCardData();
-
-  return (
-    <main>
-      <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
-        Dashboard
-      </h1>
-      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
-        <Card title="Collected" value={totalPaidInvoices} type="collected" />
-        <Card title="Pending" value={totalPendingInvoices} type="pending" />
-        <Card title="Total Invoices" value={numberOfInvoices} type="invoices" />
-        <Card
-          title="Total Customers"
-          value={numberOfCustomers}
-          type="customers"
-        />
-      </div>
-      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
-        <RevenueChart revenue={revenue}  />
-        <LatestInvoices latestInvoices={latestInvoices} />
-      </div>
-    </main>
-  );
-}
\ No newline at end of file
diff --git a/app-router/nextjs-dashboard/app/lib/data.ts b/app-router/nextjs-dashboard/app/lib/data.ts
index 58698d1..8a0b003 100644
--- a/app-router/nextjs-dashboard/app/lib/data.ts
+++ b/app-router/nextjs-dashboard/app/lib/data.ts
@@ -16,8 +16,11 @@ export async function fetchRevenue() {
     // this is where chapter 8 inserted a delay.
     // it was to labour the point that with dynamic rendering
     // you can only be as fast as your slowest fetch.
+    console.log('Fetching revenue data...');
+    await new Promise((resolve) => setTimeout(resolve, 1000)) // changed to one second
 
     // get the data and return it
+    console.log('Data fetch completed after 1 seconds.');
     const data = await sql<Revenue[]>`SELECT * FROM revenue`;
     return data;
   } catch (error) {
diff --git a/app-router/nextjs-dashboard/app/ui/dashboard/revenue-chart.tsx b/app-router/nextjs-dashboard/app/ui/dashboard/revenue-chart.tsx
index 6a2be6e..b1cf525 100644
--- a/app-router/nextjs-dashboard/app/ui/dashboard/revenue-chart.tsx
+++ b/app-router/nextjs-dashboard/app/ui/dashboard/revenue-chart.tsx
@@ -1,7 +1,7 @@
 import { generateYAxis } from '@/app/lib/utils';
 import { CalendarIcon } from '@heroicons/react/24/outline';
 import { lusitana } from '@/app/ui/fonts';
-import { Revenue } from '@/app/lib/definitions';
+import { fetchRevenue } from '@/app/lib/data';
 
 // This component is representational only.
 // For data visualization UI, check out:
@@ -9,14 +9,9 @@ import { Revenue } from '@/app/lib/definitions';
 // https://www.chartjs.org/
 // https://airbnb.io/visx/
 
-export default async function RevenueChart({
-  revenue,
-}: {
-  revenue: Revenue[];
-}) {
+export default async function RevenueChart() { // Make component async, remove the props
+  const revenue = await fetchRevenue(); // Fetch data inside the component
   const chartHeight = 350;
-  // NOTE: Uncomment this code in Chapter 7
-
   const { yAxisLabels, topLabel } = generateYAxis(revenue);
 
   if (!revenue || revenue.length === 0) {