diff --git a/frontend-lectures/lesson3/openriver/EXPLICACION_ES5.md b/frontend-lectures/lesson3/openriver/EXPLICACION_ES5.md
new file mode 100644
index 0000000..033ae27
--- /dev/null
+++ b/frontend-lectures/lesson3/openriver/EXPLICACION_ES5.md
@@ -0,0 +1,731 @@
+# OpenRiver - Explicación Completa del Código en ES5
+
+## Tabla de Contenidos
+1. [Estructura General](#estructura-general)
+2. [Configuración Principal (_app.tsx)](#configuración-principal)
+3. [Configuración Web3 (wagmi.ts)](#configuración-web3)
+4. [Layout (layout.tsx)](#layout)
+5. [Header (Header.tsx)](#header)
+6. [Componentes de Tarjetas (Card.tsx, Cards.tsx)](#componentes-tarjetas)
+7. [Páginas (list, mint, dashboard, marketplace, myNFT)](#páginas)
+8. [Contratos Inteligentes (contracts.ts)](#contratos)
+
+---
+
+## Estructura General
+
+Este es un proyecto de **NFT Marketplace** construido con:
+- **Next.js**: Framework React para aplicaciones web
+- **wagmi**: Librería para interactuar con contratos de Ethereum
+- **RainbowKit**: Interfaz para conectar carteras de criptomonedas
+- **Tailwind CSS**: Framework para estilos
+
+El proyecto permite a usuarios:
+✓ Conectar su cartera de criptomonedas
+✓ Crear (mintear) nuevos NFTs
+✓ Listar NFTs en el mercado
+✓ Ver NFTs disponibles para comprar
+✓ Ver su colección personal de NFTs
+
+---
+
+## Configuración Principal (_app.tsx)
+
+```typescript
+import '../styles/globals.css';
+import '@rainbow-me/rainbowkit/styles.css';
+```
+
+**Línea por línea:**
+
+1. `import '../styles/globals.css'`
+   - Importa los estilos CSS globales que se aplican a toda la aplicación
+   - Estos estilos definen el look general de la aplicación
+
+2. `import '@rainbow-me/rainbowkit/styles.css'`
+   - Importa los estilos de la librería RainbowKit
+   - Estila el botón de conectar cartera y los modales
+
+```typescript
+import type { AppProps } from 'next/app';
+```
+
+3. `import type { AppProps }`
+   - Importa el tipo TypeScript que define las propiedades que recibe el componente App
+   - `AppProps` contiene `Component` (el componente actual) y `pageProps` (las propiedades)
+
+```typescript
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+```
+
+4. `QueryClient` - Objeto que maneja el caché de datos
+5. `QueryClientProvider` - Componente que proporciona QueryClient a toda la aplicación
+
+```typescript
+import { WagmiProvider } from 'wagmi';
+```
+
+6. `WagmiProvider` - Componente que proporciona funciones para interactuar con Ethereum a toda la aplicación
+
+```typescript
+import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
+```
+
+7. `RainbowKitProvider` - Componente que proporciona la interfaz de cartera a toda la aplicación
+
+```typescript
+import { config } from '../wagmi';
+import DashboardLayout from './layout';
+```
+
+8. `config` - Configuración de wagmi (redes, proyecto ID, etc.)
+9. `DashboardLayout` - Componente que proporciona el header y footer a todas las páginas
+
+```typescript
+const client = new QueryClient();
+```
+
+10. Se crea una instancia de QueryClient para manejar datos
+
+```typescript
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={client}>
+        <RainbowKitProvider>
+          <DashboardLayout>
+            <Component {...pageProps} />
+          </DashboardLayout>
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+}
+```
+
+11. `MyApp` es el componente raíz que envuelve toda la aplicación
+
+**Estructura de Providers (como cajas anidadas):**
+```
+WagmiProvider (acceso a Ethereum)
+  └─ QueryClientProvider (caché de datos)
+     └─ RainbowKitProvider (cartera)
+        └─ DashboardLayout (header y footer)
+           └─ Component (página actual)
+```
+
+Cada provider proporciona funcionalidades especiales a sus componentes internos.
+
+---
+
+## Configuración Web3 (wagmi.ts)
+
+```typescript
+import { getDefaultConfig } from '@rainbow-me/rainbowkit';
+import { sepolia } from 'wagmi/chains';
+```
+
+1. `getDefaultConfig` - Función que crea una configuración lista para usar
+2. `sepolia` - Red de prueba de Ethereum (usada para desarrollo, no requiere dinero real)
+
+```typescript
+export const config = getDefaultConfig({
+  appName: 'RainbowKit App',
+```
+
+3. `appName` - Nombre de la aplicación que aparecerá en la cartera
+
+```typescript
+  projectId: 'd69f9edb23bbe0354a3b186e1bee340c',
+```
+
+4. `projectId` - ID único para este proyecto en WalletConnect (servicio que conecta aplicaciones con carteras)
+
+```typescript
+  chains: [sepolia],
+```
+
+5. `chains` - Array de redes disponibles. Aquí solo Sepolia (red de prueba)
+
+```typescript
+  ssr: true,
+```
+
+6. `ssr: true` - Server-Side Rendering habilitado (renderiza en el servidor para mejor rendimiento)
+
+---
+
+## Layout (layout.tsx)
+
+```typescript
+import type { ReactNode } from 'react'
+import Header from '../components/Header'
+
+type LayoutProps = {
+  children: ReactNode
+}
+```
+
+1. `ReactNode` - Tipo que representa cualquier contenido React (componentes, texto, etc.)
+2. `LayoutProps` - Define que este componente recibe `children` (contenido interno)
+
+```typescript
+export default function DashboardLayout({ children }: LayoutProps) {
+  return (
+    <div style={{ minHeight: '100vh', backgroundColor: '#f8fafc' }}>
+        <Header/>
+      <main>{children}</main>
+          <footer>Footer</footer>
+    </div>
+  )
+}
+```
+
+3. `minHeight: '100vh'` - La altura mínima es la altura total de la pantalla
+4. `backgroundColor: '#f8fafc'` - Color de fondo gris claro
+5. `<Header/>` - Componente de navegación
+6. `{children}` - Aquí va el contenido de cada página
+7. `<footer>` - Pie de página
+
+Este componente es como una "plantilla" que todas las páginas usan.
+
+---
+
+## Header (Header.tsx)
+
+```typescript
+import { ConnectButton } from '@rainbow-me/rainbowkit'
+import Link from 'next/link'
+```
+
+1. `ConnectButton` - Botón que permite conectar la cartera
+2. `Link` - Componente de Next.js para navegación entre páginas
+
+```typescript
+const Header = () => {
+  return (
+    <div className='w-full bg-gray-100 flex justify-between items-center p-5'>
+```
+
+3. `w-full` - Ancho completo
+4. `bg-gray-100` - Fondo gris claro
+5. `flex justify-between items-center` - Alinea elementos horizontalmente con espacio entre ellos
+6. `p-5` - Padding (espacio interno) de 5 unidades
+
+```typescript
+      <div className="font-extrabold text-4xl text-blue-700">Open River</div>
+```
+
+7. Título de la aplicación en azul, muy grande y negrita
+
+```typescript
+      <div className="flex gap-5">
+        <Link href={"/"}>Home</Link>
+        <Link href={"/dashboard"}>Dashboard</Link>
+        <Link href={"/mint"}>Minting</Link>
+        <Link href={"/list"}>Listing</Link>
+        <Link href={"/myNFT"}>MyNFTs</Link>
+      </div>
+```
+
+8. Menú de navegación con 5 enlaces (Home, Dashboard, Minting, Listing, MyNFTs)
+9. `gap-5` - Espacio de 5 unidades entre cada enlace
+
+```typescript
+      <div className="cta"><ConnectButton/></div>
+```
+
+10. `cta` - "Call To Action" (botón para conectar cartera en el lado derecho)
+
+---
+
+## Componentes Tarjetas (Card.tsx y Cards.tsx)
+
+### Cards.tsx (Contenedor de múltiples tarjetas)
+
+```typescript
+export const Cards = ({ nftNum }: { nftNum?: bigint }) => {
+```
+
+1. Recibe `nftNum` - el número total de NFTs (tipo `bigint` = número muy grande)
+
+```typescript
+    const { data: tokenIdsRaw } = useReadContract({
+        abi: openriverAbi,
+        address: openriverAddress,
+        functionName: "tokenIds",
+    });
+```
+
+2. `useReadContract` - Hook que llama a una función de lectura del contrato
+3. `abi` - "Application Binary Interface" - interfaz del contrato
+4. `address` - Dirección del contrato en Ethereum
+5. `functionName: "tokenIds"` - Llamamos a la función `tokenIds` del contrato
+6. `data` - Resultado de la llamada
+
+```typescript
+    const tokenIds = tokenIdsRaw as bigint | undefined;
+    const count = nftNum ?? tokenIds;
+```
+
+7. `as bigint | undefined` - Decimos que el resultado es un número grande o indefinido
+8. `??` - Si `nftNum` es nulo, usamos `tokenIds`
+
+```typescript
+    return (
+        <div className="flex gap-10 flex-wrap w-360 mt-5 m-auto">
+            {Array.from({ length: Number(count ?? 0) }, (_, i) => i + 1).map((index) => (
+                <Card key={index} tokenId={BigInt(index)} />
+            ))}
+        </div>
+    )
+```
+
+9. `flex gap-10 flex-wrap` - Los elementos se colocan horizontalmente con espacio, envolviendo en nuevas líneas
+10. `Array.from(...)` - Crea un array con números del 1 al total de NFTs
+11. `.map(...)` - Por cada número, crea un componente `<Card>`
+12. `key={index}` - Identifica únicamente cada Card
+13. `tokenId={BigInt(index)}` - Envía el ID del NFT a Card
+
+### Card.tsx (Una sola tarjeta de NFT)
+
+```typescript
+const Card = ({ tokenId, showOnlyListed }: { tokenId: bigint; showOnlyListed?: boolean }) => {
+```
+
+1. Recibe `tokenId` - ID único del NFT
+2. Recibe `showOnlyListed` - Si es true, solo muestra NFTs listados (opcional)
+
+```typescript
+  const { data: onchainNFT } = useReadContract({
+    abi: openriverAbi,
+    address: openriverAddress,
+    functionName: 'tokenURI',
+    args: [tokenId],
+  });
+```
+
+3. Llama a `tokenURI` del contrato para obtener la URL del NFT
+4. `args: [tokenId]` - Envía el ID del NFT como parámetro
+
+```typescript
+  const normalizedImageSrc = React.useMemo(() => {
+    if (typeof onchainNFT !== 'string' || !onchainNFT) {
+      return null;
+    }
+    if (onchainNFT.startsWith('ipfs://')) {
+      return `https://ipfs.io/ipfs/${onchainNFT.replace('ipfs://', '')}`;
+    }
+    return onchainNFT;
+  }, [onchainNFT]);
+```
+
+5. `useMemo` - Optimización: solo recalcula si `onchainNFT` cambia
+6. Si la URL es de IPFS (almacenamiento descentralizado), la convierte a HTTP
+7. Ejemplo: `ipfs://QmX...` → `https://ipfs.io/ipfs/QmX...`
+
+```typescript
+  const { data: marketData } = useReadContract({
+    abi: openriverAbi,
+    address: openriverAddress,
+    functionName: 'marketplace',
+    args: [tokenId],
+  });
+```
+
+8. Obtiene datos de mercado del NFT (si está listado, precio, etc.)
+
+```typescript
+  React.useEffect(() => {
+    console.log(`Token ${tokenId.toString()} marketplace data:`, marketData);
+  }, [marketData, tokenId]);
+```
+
+9. `useEffect` - Se ejecuta cuando `marketData` o `tokenId` cambian
+10. Registra en consola los datos (para debugging)
+
+```typescript
+  const isListed = (() => {
+    if (!marketData) return false;
+    if (Array.isArray(marketData)) return marketData[0];
+    return (marketData as any).listing ?? false;
+  })();
+```
+
+11. Determina si el NFT está listado
+12. Maneja dos formatos: array o objeto
+
+```typescript
+  const priceWei = (() => {
+    if (!marketData) return BigInt(0);
+    if (Array.isArray(marketData)) return marketData[1] as bigint;
+    return (marketData as any).price ?? BigInt(0);
+  })();
+  
+  const priceEth = formatEther(priceWei);
+```
+
+13. Obtiene el precio en Wei (unidad pequeña de Ethereum)
+14. `formatEther` - Convierte Wei a ETH (unidad legible)
+15. Ejemplo: 1000000000000000000 Wei = 1 ETH
+
+```typescript
+  if (showOnlyListed && !isListed) {
+    return null;
+  }
+```
+
+16. Si solo queremos NFTs listados y este no lo está, no mostramos nada
+
+```typescript
+  return (
+    <div className="w-full max-w-[300px] rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
+      <div className="flex h-[180px] items-center justify-center overflow-hidden rounded-md bg-slate-100">
+        {normalizedImageSrc ? (
+          <img
+            alt={`NFT #${tokenId}`}
+            src={normalizedImageSrc}
+            className="h-full w-full object-cover"
+          />
+        ) : (
+          <p className="text-sm text-slate-500">NFT image unavailable</p>
+        )}
+      </div>
+      <div className="flex justify-between py-5">
+        <h2 className="text-3xl">#{tokenId.toString()}</h2>
+        <h2 className="text-3xl font-bold">
+          {isListed ? `${priceEth} ETH` : 'Not listed'}
+        </h2>
+      </div>
+    </div>
+  );
+```
+
+17. `max-w-[300px]` - Ancho máximo de 300 píxeles
+18. `rounded-lg` - Esquinas redondeadas
+19. `border border-slate-200` - Borde gris
+20. `shadow-sm` - Sombra pequeña
+21. `h-[180px]` - Altura de imagen de 180px
+22. Muestra la imagen del NFT o mensaje si no hay
+23. Muestra el ID del NFT (ej: #1)
+24. Muestra el precio en ETH o "Not listed"
+
+---
+
+## Páginas
+
+### list/index.tsx - Página para Listar NFTs
+
+```typescript
+const index = () => {
+    const { writeContract: listNFT } = useWriteContract();
+```
+
+1. `useWriteContract` - Hook para escribir en el contrato (realizar transacciones)
+2. `writeContract` se renombra como `listNFT`
+
+```typescript
+    const [tokenId, setTokenId] = useState(0);
+    const [price, setPrice] = useState(0);
+```
+
+3. Estado local para guardar ID del NFT y precio
+4. Inician en 0
+
+```typescript
+    const handleListNFT = () => {
+        listNFT({
+            abi: openriverAbi,
+            address: openriverAddress,
+            functionName: "listOnMarketplace",
+            args: [
+                BigInt(tokenId),
+                BigInt(price),
+            ],
+        });
+    };
+```
+
+5. Función que se llama al hacer clic en "List NFT"
+6. Llama a `listOnMarketplace` en el contrato
+7. Envía el ID y precio como parámetros
+8. `BigInt()` - Convierte números a formato que el contrato entiende
+
+```typescript
+    return (
+        <div className='mt-20'>
+            <div className="flex flex-col gap-5 items-center justify-center">
+                <input
+                    className='w-125 p-5'
+                    type="number"
+                    placeholder="Token Id"
+                    onChange={(e) => setTokenId(Number(e.target.value))}
+                />
+```
+
+9. `mt-20` - Margen superior de 20 unidades
+10. `flex flex-col` - Elementos apilados verticalmente
+11. Input para número del NFT
+12. `onChange` - Actualiza estado cuando el usuario escribe
+
+```typescript
+                <input
+                    className='w-125 p-5'
+                    type="number"
+                    placeholder="Price (in Wei)"
+                    onChange={(e) => setPrice(Number(e.target.value))}
+                />
+```
+
+13. Input para el precio en Wei
+
+```typescript
+                <Button label="List NFT" onClick={handleListNFT} />
+```
+
+14. Botón que ejecuta `handleListNFT`
+
+### mint/index.tsx - Página para Crear NFTs
+
+Estructura similar a `list`, pero llama a `newItem` en lugar de `listOnMarketplace`.
+
+### dashboard/index.tsx - Panel de Control
+
+```typescript
+const { address, isConnected } = useAccount();
+```
+
+1. `useAccount` - Hook que obtiene información de la cartera conectada
+2. `address` - Dirección de la cartera
+3. `isConnected` - Si la cartera está conectada
+
+```typescript
+    const { data: totalSupplyRaw } = useReadContract({
+        abi: openriverAbi,
+        address: openriverAddress,
+        functionName: "tokenIds",
+    });
+```
+
+4. Obtiene el número total de NFTs creados
+
+```typescript
+    const { data: ownedCount } = useReadContract({
+        abi: openriverAbi,
+        address: openriverAddress,
+        functionName: "balanceOf",
+        args: address ? [address] : undefined,
+        query: { enabled: !!address },
+    }) as { data?: bigint };
+```
+
+5. Obtiene cuántos NFTs posee el usuario actual
+6. `args: address ? [address] : undefined` - Solo llama si hay dirección
+7. `enabled: !!address` - Solo ejecuta la consulta si hay dirección
+
+```typescript
+    if (!isConnected) {
+        return (
+            <div className="flex flex-col items-center justify-center mt-32 gap-4">
+                <p className="text-xl text-slate-600">Connect your wallet to view your dashboard.</p>
+            </div>
+        );
+    }
+```
+
+8. Si no hay cartera conectada, muestra mensaje
+
+```typescript
+    return (
+        <div className="max-w-3xl mx-auto mt-16 px-6">
+            <h1 className="text-3xl font-extrabold text-blue-700 mb-8">Dashboard</h1>
+
+            <div className="grid grid-cols-2 gap-6 mb-10">
+                <div className="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
+                    <p className="text-sm text-slate-500 mb-1">Total NFTs minted</p>
+                    <p className="text-4xl font-bold text-blue-700">{totalSupply?.toString() ?? '—'}</p>
+                </div>
+                <div className="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
+                    <p className="text-sm text-slate-500 mb-1">NFTs you own</p>
+                    <p className="text-4xl font-bold text-blue-700">{ownedCount?.toString() ?? '—'}</p>
+                </div>
+            </div>
+```
+
+9. `grid grid-cols-2` - Crea 2 columnas
+10. Muestra dos cajas: NFTs totales y NFTs del usuario
+11. `??` - Si el valor es null, muestra "—"
+
+### marketplace/index.tsx - Página del Mercado
+
+```typescript
+const Marketplace: NextPage = () => {
+    const { data: totalSupplyRaw } = useReadContract({
+        abi: openriverAbi,
+        address: openriverAddress,
+        functionName: "tokenIds",
+    });
+
+    const totalSupply = totalSupplyRaw as bigint | undefined;
+
+    return (
+        <div className="mt-16 px-6">
+            <h1 className="text-3xl font-extrabold text-blue-700 mb-8">Marketplace</h1>
+            
+            <div className="flex gap-10 flex-wrap w-full">
+                {Array.from({ length: Number(totalSupply ?? 0) }, (_, i) => i + 1).map((index) => (
+                    <div key={index} className="flex-shrink-0">
+                        <Card tokenId={BigInt(index)} showOnlyListed={true} />
+                    </div>
+                ))}
+            </div>
+
+            {totalSupply === BigInt(0) && (
+                <div className="text-center mt-12">
+                    <p className="text-xl text-slate-500">No NFTs listed yet</p>
+                </div>
+            )}
+        </div>
+    );
+};
+```
+
+1. Obtiene el número total de NFTs
+2. Itera por cada NFT y muestra Card
+3. `showOnlyListed={true}` - Solo muestra NFTs listados para venta
+4. Si no hay NFTs, muestra mensaje
+
+### myNFT/index.tsx - Mis NFTs
+
+```typescript
+const MyNFT: NextPage = () => {
+    const { data } = useReadContract({
+        abi: openriverAbi,
+        address: openriverAddress,
+        functionName: "tokenIds",
+    });
+
+    const nftmaxNum = data as bigint | undefined;
+
+    return (
+        <div>
+            <p>{nftmaxNum?.toString()}</p>
+            <main>
+                <Cards nftNum={nftmaxNum} />
+            </main>
+        </div>
+    );
+};
+```
+
+1. Obtiene total de NFTs
+2. Muestra el número total
+3. Usa el componente `<Cards>` para mostrar todos
+
+---
+
+## Contratos Inteligentes (contracts.ts)
+
+Este archivo contiene:
+
+1. **openriverAddress** - La dirección del contrato en Ethereum
+2. **openriverAbi** - Especificación de todas las funciones del contrato
+
+### Funciones Principales del Contrato:
+
+**approve(address to, uint256 tokenId)**
+- Autoriza a otra dirección a transferir tu NFT
+
+**listOnMarketplace(uint256 _tokenId, uint256 _price)**
+- Lista un NFT en el mercado a un precio específico
+- Parámetros: ID del NFT, precio en Wei
+
+**removeFromMarketplace(uint256 _tokenId)**
+- Quita un NFT de la venta
+
+**balanceOf(address account)**
+- Retorna cuántos NFTs posee una dirección
+
+**tokenIds()**
+- Retorna el número total de NFTs creados
+
+**marketplace(uint256 tokenId)**
+- Retorna información del NFT:
+  - listing (bool) - ¿está listado?
+  - price (uint256) - precio en Wei
+  - publisher (address) - quién lo creó
+  - royalty (uint256) - regalías del creador
+
+**newItem(string tokenURI, uint256 royalty)**
+- Crea un nuevo NFT
+- Parámetros: URL de metadatos, porcentaje de regalías
+
+**tokenURI(uint256 tokenId)**
+- Retorna la URL de los metadatos del NFT (imagen, descripción, etc.)
+
+---
+
+## Flujo Completo de la Aplicación
+
+1. **Usuario abre la app**
+   - Componente `_app.tsx` carga
+   - Todos los Providers se inicializan
+   - El usuario ve el Header y puede navegar
+
+2. **Usuario se conecta con cartera**
+   - Hace clic en ConnectButton (en Header)
+   - RainbowKit muestra opciones de cartera
+   - Se conecta a su cartera
+
+3. **Usuario va al Dashboard**
+   - Ve cuántos NFTs existen en total
+   - Ve cuántos NFTs posee él
+
+4. **Usuario va a Minting**
+   - Ingresa URL del NFT y regalías
+   - Hace clic en "Mint"
+   - Se crea un nuevo NFT
+
+5. **Usuario va a Listing**
+   - Ingresa el ID del NFT y precio
+   - Hace clic en "List"
+   - El NFT se lista en el mercado
+
+6. **Usuario va al Marketplace**
+   - Ve todos los NFTs listados (solo los que tienen `listing = true`)
+   - Ve el precio de cada uno en ETH
+
+7. **Usuario va a MyNFTs**
+   - Ve todos sus NFTs (listados o no)
+   - Ve los precios de los que están listados
+
+---
+
+## Resumen de Tecnologías
+
+| Tecnología | Propósito |
+|-----------|----------|
+| Next.js | Framework React con rutas automáticas |
+| React | Librería para crear interfaces |
+| wagmi | Interactuar con contratos de Ethereum |
+| RainbowKit | Conectar carteras de criptomonedas |
+| Tailwind CSS | Estilos CSS predefinidos |
+| Ethereum/Solidity | Contratos inteligentes en blockchain |
+
+---
+
+## Conceptos Clave
+
+**BigInt**: Números muy grandes que usa JavaScript para Ethereum (hasta 2^256)
+
+**Wei**: Unidad más pequeña de Ethereum. 1 ETH = 1,000,000,000,000,000,000 Wei
+
+**ABI**: Especificación de cómo hablar con un contrato (qué funciones tiene, qué parámetros)
+
+**Hook**: Función de React que proporciona funcionalidad especial (`useReadContract`, `useState`, etc.)
+
+**Provider**: Componente que proporciona funcionalidades a todos sus componentes internos
+
+**Blockchain**: Red de computadoras que mantiene un registro permanente de transacciones
+
+**NFT**: "Non-Fungible Token" - activo digital único que no puede ser copiado
diff --git a/frontend-lectures/lesson3/openriver/package-lock.json b/frontend-lectures/lesson3/openriver/package-lock.json
index dec71de..4e6584d 100644
--- a/frontend-lectures/lesson3/openriver/package-lock.json
+++ b/frontend-lectures/lesson3/openriver/package-lock.json
@@ -1084,9 +1084,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1103,9 +1100,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1122,9 +1116,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1141,9 +1132,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1160,9 +1148,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1179,9 +1164,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1198,9 +1180,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1217,9 +1196,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1236,9 +1212,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1261,9 +1234,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1286,9 +1256,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1311,9 +1278,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1336,9 +1300,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1361,9 +1322,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1386,9 +1344,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1411,9 +1366,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2231,9 +2183,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2250,9 +2199,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2269,9 +2215,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2288,9 +2231,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2787,6 +2727,17 @@
         }
       }
     },
+    "node_modules/@reown/appkit-controllers/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/@reown/appkit-pay": {
       "version": "1.7.8",
       "resolved": "https://registry.npmjs.org/@reown/appkit-pay/-/appkit-pay-1.7.8.tgz",
@@ -3144,6 +3095,17 @@
         }
       }
     },
+    "node_modules/@reown/appkit-utils/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/@reown/appkit-wallet": {
       "version": "1.7.8",
       "resolved": "https://registry.npmjs.org/@reown/appkit-wallet/-/appkit-wallet-1.7.8.tgz",
@@ -3453,6 +3415,17 @@
         }
       }
     },
+    "node_modules/@reown/appkit/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -4644,9 +4617,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4663,9 +4633,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4682,9 +4649,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4701,9 +4665,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5281,9 +5242,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5298,9 +5256,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5315,9 +5270,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5332,9 +5284,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5349,9 +5298,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5366,9 +5312,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5383,9 +5326,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5400,9 +5340,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5417,9 +5354,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5434,9 +5368,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6208,6 +6139,17 @@
         }
       }
     },
+    "node_modules/@walletconnect/utils/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/@walletconnect/window-getters": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@walletconnect/window-getters/-/window-getters-1.0.1.tgz",
@@ -9948,9 +9890,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -9971,9 +9910,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -9994,9 +9930,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -10017,9 +9950,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
diff --git a/frontend-lectures/lesson3/openriver/src/components/Button.tsx b/frontend-lectures/lesson3/openriver/src/components/Button.tsx
index bb79ee4..4b87551 100644
--- a/frontend-lectures/lesson3/openriver/src/components/Button.tsx
+++ b/frontend-lectures/lesson3/openriver/src/components/Button.tsx
@@ -1,8 +1,29 @@
 import React from 'react'
 
-const Button = () => {
+type ButtonProps = {
+  label: string;
+  onClick?: () => void;
+  type?: 'button' | 'submit';
+  variant?: 'primary' | 'danger';
+  disabled?: boolean;
+}
+
+const Button = ({ label, onClick, type = 'button', variant = 'primary', disabled = false }: ButtonProps) => {
+  const base = 'w-52 py-2 px-4 rounded text-white font-semibold transition-opacity';
+  const variants = {
+    primary: 'bg-blue-500 hover:bg-blue-600',
+    danger: 'bg-red-500 hover:bg-red-600',
+  };
+
   return (
-    <div>Button</div>
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      className={`${base} ${variants[variant]} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+    >
+      {label}
+    </button>
   )
 }
 
diff --git a/frontend-lectures/lesson3/openriver/src/components/Card.tsx b/frontend-lectures/lesson3/openriver/src/components/Card.tsx
index 0c24e68..5aa10ec 100644
--- a/frontend-lectures/lesson3/openriver/src/components/Card.tsx
+++ b/frontend-lectures/lesson3/openriver/src/components/Card.tsx
@@ -1,43 +1,65 @@
 import React from 'react'
 import { useReadContract } from 'wagmi'
+import { formatEther } from 'viem'
 import { openriverAbi, openriverAddress } from '../contracts';
 
-const Card = ({ tokenId }: { tokenId: bigint }) => {
+const Card = ({ tokenId, showOnlyListed }: { tokenId: bigint; showOnlyListed?: boolean }) => {
   const { data: onchainNFT } = useReadContract({
     abi: openriverAbi,
     address: openriverAddress,
     functionName: 'tokenURI',
     args: [tokenId],
-  })
+  });
 
   const normalizedImageSrc = React.useMemo(() => {
     if (typeof onchainNFT !== 'string' || !onchainNFT) {
-      return null
+      return null;
     }
-
     if (onchainNFT.startsWith('ipfs://')) {
-      return `https://ipfs.io/ipfs/${onchainNFT.replace('ipfs://', '')}`
+      return `https://ipfs.io/ipfs/${onchainNFT.replace('ipfs://', '')}`;
     }
+    return onchainNFT;
+  }, [onchainNFT]);
+
+  // wagmi returns the marketplace struct as a typed object with named fields
+  const { data: marketData } = useReadContract({
+    abi: openriverAbi,
+    address: openriverAddress,
+    functionName: 'marketplace',
+    args: [tokenId],
+  });
 
-    return onchainNFT
-  }, [onchainNFT])
+  // Debug: log what we're getting
+  React.useEffect(() => {
+    console.log(`Token ${tokenId.toString()} marketplace data:`, marketData);
+  }, [marketData, tokenId]);
 
+  // Handle the data - it could be an array or an object depending on wagmi version
+  const isListed = (() => {
+    if (!marketData) return false;
+    if (Array.isArray(marketData)) return marketData[0];
+    return (marketData as any).listing ?? false;
+  })();
 
-         const {data: marketData} = useReadContract({
-        abi: openriverAbi,
-        address: openriverAddress,
-        functionName: "marketplace",
-        args: [BigInt(tokenId)]
-    })
+  const priceWei = (() => {
+    if (!marketData) return BigInt(0);
+    if (Array.isArray(marketData)) return marketData[1] as bigint;
+    return (marketData as any).price ?? BigInt(0);
+  })();
+  
+  const priceEth = formatEther(priceWei);
 
-    console.log(marketData?.[0])
+  // Hide non-listed NFTs if showOnlyListed is true
+  if (showOnlyListed && !isListed) {
+    return null;
+  }
 
   return (
     <div className="w-full max-w-[300px] rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
       <div className="flex h-[180px] items-center justify-center overflow-hidden rounded-md bg-slate-100">
         {normalizedImageSrc ? (
           <img
-            alt="This one na NFT"
+            alt={`NFT #${tokenId}`}
             src={normalizedImageSrc}
             className="h-full w-full object-cover"
           />
@@ -46,11 +68,13 @@ const Card = ({ tokenId }: { tokenId: bigint }) => {
         )}
       </div>
       <div className="flex justify-between py-5">
-        <h2 className="text-3xl">#29</h2>
-        <h2 className="text-3xl font-bold">200 ETH</h2>
+        <h2 className="text-3xl">#{tokenId.toString()}</h2>
+        <h2 className="text-3xl font-bold">
+          {isListed ? `${priceEth} ETH` : 'Not listed'}
+        </h2>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Card
\ No newline at end of file
+export default Card;
diff --git a/frontend-lectures/lesson3/openriver/src/components/Cards.tsx b/frontend-lectures/lesson3/openriver/src/components/Cards.tsx
index c16fe41..381680c 100644
--- a/frontend-lectures/lesson3/openriver/src/components/Cards.tsx
+++ b/frontend-lectures/lesson3/openriver/src/components/Cards.tsx
@@ -3,23 +3,24 @@ import Card from "./Card";
 import { openriverAbi, openriverAddress } from "../contracts";
 
 export const Cards = ({ nftNum }: { nftNum?: bigint }) => {
-  
-    const {data: tokenIds} = useReadContract({
+
+    const { data: tokenIdsRaw } = useReadContract({
         abi: openriverAbi,
         address: openriverAddress,
         functionName: "tokenIds",
-    })
-
-
+    });
 
+    const tokenIds = tokenIdsRaw as bigint | undefined;
 
+    // Use the prop if provided (e.g. from MyNFT page), otherwise fall back to
+    // the value fetched directly from the contract (used on the home page).
+    const count = nftNum ?? tokenIds;
 
-  
-  return (
-    <div className="flex gap-10 flex-wrap w-360 mt-5  m-auto ">
-        {Array.from({ length: Number(nftNum) }, (_, i) => i + 1).map((index) => (
-            <Card key={index} tokenId={BigInt(index)} />
-        ))}
-    </div>
-  )
+    return (
+        <div className="flex gap-10 flex-wrap w-360 mt-5 m-auto">
+            {Array.from({ length: Number(count ?? 0) }, (_, i) => i + 1).map((index) => (
+                <Card key={index} tokenId={BigInt(index)} />
+            ))}
+        </div>
+    );
 }
diff --git a/frontend-lectures/lesson3/openriver/src/components/Header.tsx b/frontend-lectures/lesson3/openriver/src/components/Header.tsx
index 162d66b..7fd9761 100644
--- a/frontend-lectures/lesson3/openriver/src/components/Header.tsx
+++ b/frontend-lectures/lesson3/openriver/src/components/Header.tsx
@@ -8,10 +8,10 @@ const Header = () => {
       <div className="font-extrabold text-4xl text-blue-700">Open River</div>
       <div className="flex gap-5">
         <Link href={"/"}>Home</Link>
+        <Link href={"/dashboard"}>Dashboard</Link>
         <Link href={"/mint"}>Minting</Link>
         <Link href={"/list"}>Listing</Link>
         <Link href={"/myNFT"}>MyNFTs</Link>
-
       </div>
       <div className="cta"><ConnectButton/></div>
     </div>
diff --git a/frontend-lectures/lesson3/openriver/src/pages/dashboard/index.tsx b/frontend-lectures/lesson3/openriver/src/pages/dashboard/index.tsx
index bbe41a6..4f0556e 100644
--- a/frontend-lectures/lesson3/openriver/src/pages/dashboard/index.tsx
+++ b/frontend-lectures/lesson3/openriver/src/pages/dashboard/index.tsx
@@ -1,35 +1,58 @@
-import { useWriteContract } from "wagmi"
+import { useReadContract, useAccount } from "wagmi";
 import { openriverAbi, openriverAddress } from "../../contracts";
-import { useState } from "react";
-
+import Link from "next/link";
+import Button from "../../components/Button";
 
 const Dashboard = () => {
-    const { writeContract: mintNFT } = useWriteContract();
-    const [tokenUrI, setTokenUrI] = useState("");
-    const [royalty, setRoyalty] = useState(0);
-
-    const handleMintNFT = async () => {
-        mintNFT(
-            {
-                abi: openriverAbi,
-                address: openriverAddress,
-                functionName: "newItem",
-                args: [
-                    tokenUrI,
-                    royalty
-                ]
-            }
-        )
+    const { address, isConnected } = useAccount();
+
+    const { data: totalSupplyRaw } = useReadContract({
+        abi: openriverAbi,
+        address: openriverAddress,
+        functionName: "tokenIds",
+    });
+
+    const totalSupply = totalSupplyRaw as bigint | undefined;
+
+    const { data: ownedCount } = useReadContract({
+        abi: openriverAbi,
+        address: openriverAddress,
+        functionName: "balanceOf",
+        args: address ? [address] : undefined,
+        query: { enabled: !!address },
+    }) as { data?: bigint };
+
+    if (!isConnected) {
+        return (
+            <div className="flex flex-col items-center justify-center mt-32 gap-4">
+                <p className="text-xl text-slate-600">Connect your wallet to view your dashboard.</p>
+            </div>
+        );
     }
+
     return (
-        <div>
-            <div className="">
-                <input type="text" placeholder="Token URI" onChange={(e) => setTokenUrI(e.target.value)} />
-                <input type="number" placeholder="Royalty" onChange={(e) => setRoyalty(Number(e.target.value))} />
-                <button onClick={handleMintNFT}>Mint NFT</button>
+        <div className="max-w-3xl mx-auto mt-16 px-6">
+            <h1 className="text-3xl font-extrabold text-blue-700 mb-8">Dashboard</h1>
+
+            <div className="grid grid-cols-2 gap-6 mb-10">
+                <div className="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
+                    <p className="text-sm text-slate-500 mb-1">Total NFTs minted</p>
+                    <p className="text-4xl font-bold text-blue-700">{totalSupply?.toString() ?? '—'}</p>
+                </div>
+                <div className="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
+                    <p className="text-sm text-slate-500 mb-1">NFTs you own</p>
+                    <p className="text-4xl font-bold text-blue-700">{ownedCount?.toString() ?? '—'}</p>
+                </div>
+            </div>
+
+            <div className="flex gap-4">
+                <Link href="/mint"><Button label="Mint an NFT" /></Link>
+                <Link href="/list"><Button label="List an NFT" variant="danger" /></Link>
+                <Link href="/marketplace"><Button label="Marketplace" /></Link>
+                <Link href="/myNFT"><Button label="My NFTs" /></Link>
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default Dashboard
\ No newline at end of file
+export default Dashboard;
\ No newline at end of file
diff --git a/frontend-lectures/lesson3/openriver/src/pages/list/index.tsx b/frontend-lectures/lesson3/openriver/src/pages/list/index.tsx
index d0896b1..a3d2f63 100644
--- a/frontend-lectures/lesson3/openriver/src/pages/list/index.tsx
+++ b/frontend-lectures/lesson3/openriver/src/pages/list/index.tsx
@@ -1,35 +1,44 @@
 import { useState } from 'react'
 import { useWriteContract } from 'wagmi';
 import { openriverAbi, openriverAddress } from '../../contracts';
+import Button from '../../components/Button';
 
- const index = () => {
-  const { writeContract: mintNFT } = useWriteContract();
+const index = () => {
+    const { writeContract: listNFT } = useWriteContract();
     const [tokenId, setTokenId] = useState(0);
     const [price, setPrice] = useState(0);
 
-    const handleMintNFT = async () => {
-        mintNFT(
-            {
-                abi: openriverAbi,
-                address: openriverAddress,
-                functionName: "listOnMarketplace",
-                args: [
-                    tokenId,
-                    price
-                ]
-            }
-        )
-    }
+    const handleListNFT = () => {
+        listNFT({
+            abi: openriverAbi,
+            address: openriverAddress,
+            functionName: "listOnMarketplace",
+            args: [
+                BigInt(tokenId),   // contract expects uint256
+                BigInt(price),     // contract expects uint256
+            ],
+        });
+    };
+
     return (
         <div className='mt-20'>
             <div className="flex flex-col gap-5 items-center justify-center">
-                <input className='w-125 p-5' type="text" placeholder="Token Id" onChange={(e) => setTokenId(Number(e.target.value))} />
-                <input className='w-125 p-5' type="number" placeholder="Price" onChange={(e) => setPrice(Number(e.target.value))} />
-                <button className='w-52 bg-blue-500 text-white py-2 px-4 rounded' onClick={handleMintNFT}>List NFT</button>
+                <input
+                    className='w-125 p-5'
+                    type="number"
+                    placeholder="Token Id"
+                    onChange={(e) => setTokenId(Number(e.target.value))}
+                />
+                <input
+                    className='w-125 p-5'
+                    type="number"
+                    placeholder="Price (in Wei)"
+                    onChange={(e) => setPrice(Number(e.target.value))}
+                />
+                <Button label="List NFT" onClick={handleListNFT} />
             </div>
         </div>
-    )
-}
-
+    );
+};
 
-export default index
\ No newline at end of file
+export default index;
diff --git a/frontend-lectures/lesson3/openriver/src/pages/marketplace/index.tsx b/frontend-lectures/lesson3/openriver/src/pages/marketplace/index.tsx
new file mode 100644
index 0000000..8965626
--- /dev/null
+++ b/frontend-lectures/lesson3/openriver/src/pages/marketplace/index.tsx
@@ -0,0 +1,36 @@
+import { NextPage } from "next";
+import { useReadContract } from "wagmi";
+import { openriverAbi, openriverAddress } from "../../contracts";
+import Card from "../../components/Card";
+
+const Marketplace: NextPage = () => {
+    const { data: totalSupplyRaw } = useReadContract({
+        abi: openriverAbi,
+        address: openriverAddress,
+        functionName: "tokenIds",
+    });
+
+    const totalSupply = totalSupplyRaw as bigint | undefined;
+
+    return (
+        <div className="mt-16 px-6">
+            <h1 className="text-3xl font-extrabold text-blue-700 mb-8">Marketplace</h1>
+            
+            <div className="flex gap-10 flex-wrap w-full">
+                {Array.from({ length: Number(totalSupply ?? 0) }, (_, i) => i + 1).map((index) => (
+                    <div key={index} className="flex-shrink-0">
+                        <Card tokenId={BigInt(index)} showOnlyListed={true} />
+                    </div>
+                ))}
+            </div>
+
+            {totalSupply === BigInt(0) && (
+                <div className="text-center mt-12">
+                    <p className="text-xl text-slate-500">No NFTs listed yet</p>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Marketplace;
diff --git a/frontend-lectures/lesson3/openriver/src/pages/mint/index.tsx b/frontend-lectures/lesson3/openriver/src/pages/mint/index.tsx
index ebd6ea6..a782d48 100644
--- a/frontend-lectures/lesson3/openriver/src/pages/mint/index.tsx
+++ b/frontend-lectures/lesson3/openriver/src/pages/mint/index.tsx
@@ -1,35 +1,44 @@
 import React, { useState } from 'react'
 import { useWriteContract } from 'wagmi';
 import { openriverAbi, openriverAddress } from '../../contracts';
+import Button from '../../components/Button';
 
- const index = () => {
-  const { writeContract: mintNFT } = useWriteContract();
+const index = () => {
+    const { writeContract: mintNFT } = useWriteContract();
     const [tokenUrI, setTokenUrI] = useState("");
     const [royalty, setRoyalty] = useState(0);
 
-    const handleMintNFT = async () => {
-        mintNFT(
-            {
-                abi: openriverAbi,
-                address: openriverAddress,
-                functionName: "newItem",
-                args: [
-                    tokenUrI,
-                    royalty
-                ]
-            }
-        )
-    }
+    const handleMintNFT = () => {
+        mintNFT({
+            abi: openriverAbi,
+            address: openriverAddress,
+            functionName: "newItem",
+            args: [
+                tokenUrI,
+                BigInt(royalty),   // contract expects uint256
+            ],
+        });
+    };
+
     return (
         <div className='mt-20'>
             <div className="flex flex-col gap-5 items-center justify-center">
-                <input className='w-125 p-5' type="text" placeholder="Token URI" onChange={(e) => setTokenUrI(e.target.value)} />
-                <input className='w-125 p-5' type="number" placeholder="Royalty" onChange={(e) => setRoyalty(Number(e.target.value))} />
-                <button className='w-52 bg-blue-500 text-white py-2 px-4 rounded' onClick={handleMintNFT}>Mint NFT</button>
+                <input
+                    className='w-125 p-5'
+                    type="text"
+                    placeholder="Token URI"
+                    onChange={(e) => setTokenUrI(e.target.value)}
+                />
+                <input
+                    className='w-125 p-5'
+                    type="number"
+                    placeholder="Royalty"
+                    onChange={(e) => setRoyalty(Number(e.target.value))}
+                />
+                <Button label="Mint NFT" onClick={handleMintNFT} />
             </div>
         </div>
-    )
-}
-
+    );
+};
 
-export default index
\ No newline at end of file
+export default index;
diff --git a/frontend-lectures/lesson3/openriver/src/pages/myNFT/index.tsx b/frontend-lectures/lesson3/openriver/src/pages/myNFT/index.tsx
index 3c1e0b9..c52abf5 100644
--- a/frontend-lectures/lesson3/openriver/src/pages/myNFT/index.tsx
+++ b/frontend-lectures/lesson3/openriver/src/pages/myNFT/index.tsx
@@ -2,36 +2,25 @@ import { NextPage } from "next";
 import { Cards } from "../../components/Cards";
 import { useReadContract } from "wagmi";
 import { openriverAbi, openriverAddress } from "../../contracts";
-import { useEffect, useState } from "react";
 
 const MyNFT: NextPage = () => {
-    const [nftsNum, setNftsNum] = useState<bigint | null>()
-
-    const { data: nftmaxNum } = useReadContract({
+    const { data } = useReadContract({
         abi: openriverAbi,
         address: openriverAddress,
         functionName: "tokenIds",
-    }) as any
-
-    useEffect(() => {
-        setNftsNum(nftmaxNum)
-    }, [nftmaxNum])
-
-    useEffect(() => {
-        setNftsNum(nftmaxNum)
-    }, [nftmaxNum])
+    });
 
+    const nftmaxNum = data as bigint | undefined;
 
+    // nftmaxNum is bigint | undefined — pass directly to Cards
     return (
-        <div className="">
-
-            <p>{nftsNum?.toString()}</p>
-            <main className="">
-                <Cards nftNum={nftsNum} />
+        <div>
+            <p>{nftmaxNum?.toString()}</p>
+            <main>
+                <Cards nftNum={nftmaxNum} />
             </main>
-
         </div>
     );
 };
 
-export default MyNFT;
\ No newline at end of file
+export default MyNFT;
diff --git a/frontend-lectures/lesson3/openriver/tsconfig.json b/frontend-lectures/lesson3/openriver/tsconfig.json
index 748d124..ce48752 100644
--- a/frontend-lectures/lesson3/openriver/tsconfig.json
+++ b/frontend-lectures/lesson3/openriver/tsconfig.json
@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "target": "es5",
     "lib": [
       "dom",
       "dom.iterable",
@@ -17,7 +16,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
-    "incremental": true
+    "incremental": true,
+    "target": "ES2017"
   },
   "include": [
     "next-env.d.ts",
diff --git a/wk-6 Testing/hardhat_test/contracts/Adashe.sol b/wk-6 Testing/hardhat_test/contracts/Adashe.sol
index fe83797..701209b 100644
--- a/wk-6 Testing/hardhat_test/contracts/Adashe.sol	
+++ b/wk-6 Testing/hardhat_test/contracts/Adashe.sol	
@@ -1,9 +1,6 @@
 // SPDX-License-Identifier: MIT
 pragma solidity ^0.8.28;
 
-/// @title Adashe
-/// @notice A rotating savings circle (ROSCA): members register, contribute each round,
-///         and the pooled amount goes to the member whose turn matches the current round.
 contract Adashe {
     uint8 public noOfPeople;
     uint8 public maxPeople;
@@ -62,17 +59,11 @@ contract Adashe {
     }
 
     modifier adasheIsNotFull() {
-        // if (noOfPeople >= maxPeople) revert AdasheFull();
         require(noOfPeople < maxPeople, "AdasheFull");
         _;
     }
 
-    /// @notice Register for the savings circle. Turn order follows registration order.
     function registerForAdashe(string calldata _name) public adasheIsNotFull returns (uint256 turn_) {
-        // if (isRegistered[msg.sender]) revert AlreadyRegistered();
-        // if (bytes(_name).length == 0) revert EmptyName();
-        
-        
         require(!isRegistered[msg.sender], "AlreadyRegistered");
         require(bytes(_name).length > 0, "EmptyName");
         noOfPeople++;
@@ -99,7 +90,6 @@ contract Adashe {
         return turn_;
     }
 
-    /// @notice Pay your contribution for the current round.
     function contribute() external payable {
         if (status != Packed.PACKED) revert AdasheNotPacked();
         if (!isRegistered[msg.sender]) revert NotRegistered();
@@ -120,7 +110,6 @@ contract Adashe {
         }
     }
 
-    /// @notice Read a member by 1-based person id.
     function getAdasheMember(uint8 _personId) public view returns (Person memory person_) {
         if (_personId == 0 || _personId > noOfPeople) revert InvalidPersonId();
         person_ = adashePeople[_personId];