diff --git a/app/api/drops/active/route.ts b/app/api/drops/active/route.ts
index 24f84d0..286c48b 100644
--- a/app/api/drops/active/route.ts
+++ b/app/api/drops/active/route.ts
@@ -1,11 +1,11 @@
 import { NextResponse } from 'next/server'
 import pool from '@/lib/db'
 
-// GET /api/drops/active - Get the currently active drop (not sold out)
+// GET /api/drops/active - Get the earliest unfilled drop (not sold out)
 export async function GET() {
   try {
     const [rows] = await pool.execute(
-      'SELECT * FROM drops WHERE fill < size ORDER BY created_at DESC LIMIT 1'
+      'SELECT * FROM drops WHERE fill < size ORDER BY created_at ASC LIMIT 1'
     )
     
     const drops = rows as any[]
diff --git a/app/components/Drop.tsx b/app/components/Drop.tsx
index c32bcd4..a3b8cdd 100644
--- a/app/components/Drop.tsx
+++ b/app/components/Drop.tsx
@@ -1,52 +1,178 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import Image from 'next/image'
 
+interface DropData {
+  id: number
+  item: string
+  size: number
+  fill: number
+  unit: string
+  ppu: number
+  image_url: string | null
+  created_at: string
+}
+
 export default function Drop() {
-  const [selectedSize, setSelectedSize] = useState('50g')
+  const [drop, setDrop] = useState<DropData | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [selectedSize, setSelectedSize] = useState(50)
+
+  useEffect(() => {
+    fetchActiveDrop()
+  }, [])
+
+  const fetchActiveDrop = async () => {
+    try {
+      const response = await fetch('/api/drops/active')
+      if (response.ok) {
+        const data = await response.json()
+        setDrop(data)
+      }
+    } catch (error) {
+      console.error('Error fetching active drop:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const getProgressPercentage = (fill: number, size: number) => {
+    return Math.min((fill / size) * 100, 100)
+  }
+
+  const formatSize = (size: number, unit: string) => {
+    if (unit === 'g' && size >= 1000) {
+      return `${(size / 1000).toFixed(1)}kg`
+    }
+    return `${size}${unit}`
+  }
+
+  const getAvailableSizes = () => {
+    if (!drop) return []
+    const sizes = [50, 100, 250] // Always in grams
+    
+    // Calculate remaining inventory in grams
+    let remainingInGrams = 0
+    if (drop.unit === 'kg') {
+      remainingInGrams = (drop.size - drop.fill) * 1000
+    } else {
+      // For 'g' or any other unit, assume same unit
+      remainingInGrams = drop.size - drop.fill
+    }
+    
+    // Only show sizes that don't exceed remaining inventory
+    return sizes.filter((size) => size <= remainingInGrams)
+  }
+
+  if (loading) {
+    return (
+      <div className="drop">
+        <div style={{ gridColumn: '1 / -1', textAlign: 'center', padding: '40px' }}>
+          <p style={{ color: 'var(--muted)' }}>Loading...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!drop) {
+    return (
+      <div className="drop">
+        <div style={{ gridColumn: '1 / -1', textAlign: 'center', padding: '60px' }}>
+          <h2 style={{ marginBottom: '16px' }}>Drop Sold Out</h2>
+          <p style={{ color: 'var(--muted)', marginBottom: '20px' }}>
+            The current collective drop has been fully reserved.
+          </p>
+          <p style={{ color: 'var(--muted)' }}>
+            Next collective drop coming soon.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  const progressPercentage = getProgressPercentage(drop.fill, drop.size)
+  const availableSizes = getAvailableSizes()
+  
+  // Calculate remaining in the drop's unit
+  const remaining = drop.size - drop.fill
+  const hasRemaining = remaining > 0
 
   return (
     <div className="drop">
-      <Image
-        src="https://images.unsplash.com/photo-1604908554027-0b6c2c9c7e92"
-        alt="Harlequin CBD"
-        width={420}
-        height={420}
-        style={{ width: '100%', height: 'auto', borderRadius: '16px', objectFit: 'cover' }}
-      />
+      {drop.image_url ? (
+        <Image
+          src={drop.image_url}
+          alt={drop.item}
+          width={420}
+          height={420}
+          style={{ width: '100%', height: 'auto', borderRadius: '16px', objectFit: 'cover' }}
+        />
+      ) : (
+        <div
+          style={{
+            width: '100%',
+            aspectRatio: '1 / 1',
+            background: 'var(--bg-soft)',
+            borderRadius: '16px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: 'var(--muted)',
+          }}
+        >
+          No Image
+        </div>
+      )}
       <div>
-        <h2>Harlequin – Collective Drop</h2>
-        <div className="meta">1kg Batch · Indoor · Switzerland</div>
-        <div className="price">2.50 CHF / g · incl. 2.5% VAT</div>
+        <h2>{drop.item}</h2>
+        <div className="meta">
+          {formatSize(drop.size, drop.unit)} Batch
+        </div>
+        <div className="price">
+          {drop.ppu.toFixed(2)} CHF / {drop.unit} · incl. 2.5% VAT
+        </div>
 
         <div className="progress">
-          <span></span>
+          <span style={{ width: `${progressPercentage}%` }}></span>
         </div>
-        <div className="meta">620g of 1,000g reserved</div>
-
-        <div className="options">
-          <button
-            className={selectedSize === '50g' ? 'active' : ''}
-            onClick={() => setSelectedSize('50g')}
-          >
-            50g
-          </button>
-          <button
-            className={selectedSize === '100g' ? 'active' : ''}
-            onClick={() => setSelectedSize('100g')}
-          >
-            100g
-          </button>
-          <button
-            className={selectedSize === '250g' ? 'active' : ''}
-            onClick={() => setSelectedSize('250g')}
-          >
-            250g
-          </button>
+        <div className="meta">
+          {drop.fill}
+          {drop.unit} of {drop.size}
+          {drop.unit} reserved
         </div>
 
-        <button className="cta">Join Drop</button>
+        {hasRemaining && availableSizes.length > 0 && (
+          <>
+            <div className="options">
+              {availableSizes.map((size) => (
+                <button
+                  key={size}
+                  className={selectedSize === size ? 'active' : ''}
+                  onClick={() => setSelectedSize(size)}
+                >
+                  {size}g
+                </button>
+              ))}
+            </div>
+
+            <button className="cta">Join Drop</button>
+          </>
+        )}
+
+        {hasRemaining && availableSizes.length === 0 && (
+          <div style={{ marginTop: '30px', padding: '20px', background: 'var(--bg-soft)', borderRadius: '12px', textAlign: 'center' }}>
+            <p style={{ margin: 0, color: 'var(--muted)' }}>
+              Less than 50{drop.unit} remaining. This drop is almost fully reserved.
+            </p>
+          </div>
+        )}
+
+        {!hasRemaining && (
+          <div style={{ marginTop: '30px', padding: '20px', background: 'var(--bg-soft)', borderRadius: '12px', textAlign: 'center' }}>
+            <p style={{ margin: 0, color: 'var(--muted)' }}>This drop is fully reserved</p>
+          </div>
+        )}
       </div>
     </div>
   )