diff --git a/app/components/catalog/PriceSparkline.vue b/app/components/catalog/PriceSparkline.vue
new file mode 100644
index 0000000..5542b92
--- /dev/null
+++ b/app/components/catalog/PriceSparkline.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="w-20 h-10">
+    <Line :data="chartData" :options="chartOptions" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Line } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  LineElement,
+  PointElement,
+  LinearScale,
+  CategoryScale,
+  Filler
+} from 'chart.js'
+
+ChartJS.register(LineElement, PointElement, LinearScale, CategoryScale, Filler)
+
+const props = defineProps<{
+  data: number[]
+}>()
+
+const isUptrend = computed(() => {
+  if (props.data.length < 2) return true
+  return props.data[props.data.length - 1] >= props.data[0]
+})
+
+const lineColor = computed(() => isUptrend.value ? '#22c55e' : '#ef4444')
+
+const chartData = computed(() => ({
+  labels: props.data.map((_, i) => i.toString()),
+  datasets: [{
+    data: props.data,
+    borderColor: lineColor.value,
+    backgroundColor: `${lineColor.value}20`,
+    borderWidth: 1.5,
+    fill: true,
+    tension: 0.3,
+    pointRadius: 0
+  }]
+}))
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: { display: false },
+    tooltip: { enabled: false }
+  },
+  scales: {
+    x: { display: false },
+    y: { display: false }
+  },
+  elements: {
+    line: { borderCapStyle: 'round' as const }
+  }
+}
+</script>
diff --git a/app/pages/catalog/hubs/[id].vue b/app/pages/catalog/hubs/[id].vue
index ad77ccd..234dc7e 100644
--- a/app/pages/catalog/hubs/[id].vue
+++ b/app/pages/catalog/hubs/[id].vue
@@ -48,6 +48,7 @@
               v-for="product in products"
               :key="product.uuid"
               :name="product.name"
+              :price-history="getMockPriceHistory(product.uuid)"
               :selected="selectedProductUuid === product.uuid"
               @select="selectedProductUuid = product.uuid"
             />
@@ -97,6 +98,16 @@ const selectedSourceUuid = ref('')
 const rawSources = ref<any[]>([])
 const offersData = ref<Map<string, any>>(new Map())
 
+// Mock price history generator (seeded by uuid for consistent results)
+const getMockPriceHistory = (uuid: string): number[] => {
+  const seed = uuid.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
+  const basePrice = 100 + (seed % 200)
+  return Array.from({ length: 7 }, (_, i) => {
+    const variation = Math.sin(seed + i * 0.5) * 20 + Math.cos(seed * 0.3 + i) * 10
+    return Math.round(basePrice + variation)
+  })
+}
+
 const hubId = computed(() => route.params.id as string)
 
 // Selected product name