diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index b655716..18f8768 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -8,6 +8,7 @@ import LanguageSwitcher from './LanguageSwitcher';
 import Sidebar from './Sidebar';
 
 const Header: React.FC = () => {
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
   const location = useLocation();
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const { theme, toggleTheme } = useTheme();
diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
deleted file mode 100644
index 8e760e7..0000000
--- a/src/components/Timeline.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import React from "react";
-import { motion } from "framer-motion";
-import {
-  Sprout,
-  Truck,
-  Store,
-  MapPin,
-  User,
-  Clock,
-} from "lucide-react";
-
-type Stage = "farmer" | "transport" | "retailer";
-type Status = "completed" | "pending" | "flagged";
-
-interface TimelineEvent {
-  stage: Stage;
-  actor: string;
-  location: string;
-  timestamp: string;
-  status: Status;
-  notes?: string;
-}
-
-interface TimelineProps {
-  events: TimelineEvent[];
-}
-
-const stageIconMap = {
-  farmer: Sprout,
-  transport: Truck,
-  retailer: Store,
-};
-
-const statusStyles = {
-  completed: {
-    dot: "bg-green-500",
-    badge: "text-green-600 bg-green-100",
-  },
-  pending: {
-    dot: "bg-gray-400",
-    badge: "text-gray-600 bg-gray-100",
-  },
-  flagged: {
-    dot: "bg-red-500",
-    badge: "text-red-600 bg-red-100",
-  },
-};
-
-const Timeline: React.FC<TimelineProps> = ({ events }) => {
-  const formatDate = (dateString: string) =>
-    new Date(dateString).toLocaleString("en-US", {
-      dateStyle: "medium",
-      timeStyle: "short",
-    });
-
-  return (
-    <div className="relative">
-      {/* Vertical line */}
-      <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-gray-300" />
-
-      <div className="space-y-10">
-        {events.map((event, index) => {
-          const Icon = stageIconMap[event.stage];
-          const styles = statusStyles[event.status];
-
-          return (
-            <motion.div
-              key={index}
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: index * 0.15 }}
-              className="relative flex items-start gap-6"
-            >
-              {/* Timeline dot */}
-              <div
-                className={`z-10 h-14 w-14 rounded-full flex items-center justify-center ${styles.dot} shadow-lg`}
-              >
-                <Icon className="h-6 w-6 text-white" />
-              </div>
-
-              {/* Card */}
-              <div className="flex-1 bg-white rounded-xl border p-6 shadow-sm">
-                <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-3">
-                  <h3 className="text-lg font-semibold capitalize">
-                    {event.stage}
-                  </h3>
-                  <span
-                    className={`text-xs font-medium px-2 py-1 rounded-full uppercase ${styles.badge}`}
-                  >
-                    {event.status}
-                  </span>
-                </div>
-
-                <div className="flex items-center text-sm text-gray-500 mb-4">
-                  <Clock className="h-4 w-4 mr-1" />
-                  {formatDate(event.timestamp)}
-                </div>
-
-                <div className="grid sm:grid-cols-2 gap-3 mb-4">
-                  <div className="flex items-center text-gray-700">
-                    <User className="h-4 w-4 mr-2 text-green-600" />
-                    {event.actor}
-                  </div>
-                  <div className="flex items-center text-gray-700">
-                    <MapPin className="h-4 w-4 mr-2 text-blue-600" />
-                    {event.location}
-                  </div>
-                </div>
-
-                {event.notes && (
-                  <div className="bg-gray-50 rounded-lg p-3 text-sm text-gray-700">
-                    {event.notes}
-                  </div>
-                )}
-              </div>
-            </motion.div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-
-export default Timeline;
diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx
new file mode 100644
index 0000000..3fb3897
--- /dev/null
+++ b/src/components/Timeline/Timeline.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import TimelineStep from './TimelineStep';
+import { TimelineEvent } from './types';
+
+interface TimelineProps {
+  events: TimelineEvent[];
+  globalCertifications?: string;
+}
+
+const Timeline: React.FC<TimelineProps> = ({ events, globalCertifications }) => {
+  return (
+    <div className="relative">
+      {/* Vertical line */}
+      <div className="absolute left-7 top-0 bottom-0 w-0.5 bg-gray-200" />
+
+      <div className="space-y-8 pb-8">
+        {events.map((event, index) => (
+          <TimelineStep
+            key={index}
+            event={event}
+            index={index}
+            globalCertifications={globalCertifications}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Timeline;
diff --git a/src/components/Timeline/TimelineStep.tsx b/src/components/Timeline/TimelineStep.tsx
new file mode 100644
index 0000000..9161ff5
--- /dev/null
+++ b/src/components/Timeline/TimelineStep.tsx
@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  Sprout,
+  Truck,
+  Store,
+  ChevronDown,
+  Building
+} from 'lucide-react';
+import TimelineStepDetails from './TimelineStepDetails';
+import { TimelineEvent } from './types';
+
+interface TimelineStepProps {
+  event: TimelineEvent;
+  index: number;
+  globalCertifications?: string;
+}
+
+const stageIconMap: Record<string, any> = {
+  farmer: Sprout,
+  transport: Truck,
+  retailer: Store,
+  mandi: Building,
+};
+
+const statusStyles: Record<string, { dot: string; badge: string }> = {
+  completed: {
+    dot: "bg-green-500",
+    badge: "text-green-600 bg-green-100",
+  },
+  pending: {
+    dot: "bg-gray-400",
+    badge: "text-gray-600 bg-gray-100",
+  },
+  flagged: {
+    dot: "bg-red-500",
+    badge: "text-red-600 bg-red-100",
+  },
+};
+
+const TimelineStep: React.FC<TimelineStepProps> = ({ event, index, globalCertifications }) => {
+  const [open, setOpen] = useState(false);
+
+  // Fallback for icon and styles
+  const Icon = stageIconMap[event.stage as string] || Store;
+  const status = event.status || 'completed';
+  const styles = statusStyles[status];
+
+  // Certifications can come from event or global
+  const certs = event.certifications || globalCertifications;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: index * 0.15 }}
+      className="relative flex items-start gap-4 sm:gap-6"
+    >
+      {/* Timeline Dot */}
+      <div
+        className={`z-10 h-14 w-14 rounded-full flex items-center justify-center ${styles.dot} shadow-lg shrink-0`}
+      >
+        <Icon className="h-6 w-6 text-white" />
+      </div>
+
+      {/* Card */}
+      <div
+        className={`flex-1 bg-white rounded-xl border p-4 sm:p-6 shadow-sm hover:shadow-md transition-all cursor-pointer ${open ? 'ring-2 ring-green-100' : ''}`}
+        onClick={() => setOpen(!open)}
+      >
+        <div className="flex items-center justify-between">
+            <div className="flex flex-col sm:flex-row sm:items-center gap-2">
+                <h3 className="text-lg font-semibold capitalize text-gray-800">
+                    {event.stage}
+                </h3>
+                 <span
+                    className={`text-xs font-medium px-2 py-0.5 rounded-full uppercase w-fit ${styles.badge}`}
+                  >
+                    {status}
+                  </span>
+            </div>
+
+             {/* Arrow Rotation */}
+            <motion.div
+                animate={{ rotate: open ? 180 : 0 }}
+                transition={{ duration: 0.2 }}
+            >
+                <ChevronDown className="h-5 w-5 text-gray-400" />
+            </motion.div>
+        </div>
+
+        {/* Expandable Section */}
+        <AnimatePresence>
+            {open && (
+                <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: "auto", opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.25 }}
+                    className="overflow-hidden"
+                >
+                    <TimelineStepDetails
+                        actor={event.actor}
+                        location={event.location}
+                        timestamp={event.timestamp}
+                        certifications={certs}
+                        notes={event.notes}
+                    />
+                </motion.div>
+            )}
+        </AnimatePresence>
+      </div>
+    </motion.div>
+  );
+};
+
+export default TimelineStep;
diff --git a/src/components/Timeline/TimelineStepDetails.tsx b/src/components/Timeline/TimelineStepDetails.tsx
new file mode 100644
index 0000000..1f07cf5
--- /dev/null
+++ b/src/components/Timeline/TimelineStepDetails.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { Clock, User, MapPin, Award } from 'lucide-react';
+
+interface TimelineStepDetailsProps {
+  actor: string;
+  location: string;
+  timestamp: string;
+  certifications?: string;
+  notes?: string;
+}
+
+const TimelineStepDetails: React.FC<TimelineStepDetailsProps> = ({
+  actor,
+  location,
+  timestamp,
+  certifications,
+  notes,
+}) => {
+  const formatDate = (dateString: string) =>
+    new Date(dateString).toLocaleString("en-US", {
+      dateStyle: "medium",
+      timeStyle: "short",
+    });
+
+  return (
+    <div className="mt-4 space-y-3 text-sm text-gray-600 border-t pt-4">
+      <div className="flex items-center gap-2">
+        <Clock className="h-4 w-4 text-gray-400" />
+        <span className="font-medium">Timestamp:</span>
+        <span>{formatDate(timestamp)}</span>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <User className="h-4 w-4 text-green-600" />
+        <span className="font-medium">Actor:</span>
+        <span>{actor}</span>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <MapPin className="h-4 w-4 text-blue-600" />
+        <span className="font-medium">Location:</span>
+        <span>{location}</span>
+      </div>
+
+      {certifications && (
+        <div className="flex items-center gap-2">
+          <Award className="h-4 w-4 text-yellow-600" />
+          <span className="font-medium">Certifications:</span>
+          <span>{certifications}</span>
+        </div>
+      )}
+
+      {notes && (
+        <div className="bg-gray-50 rounded-lg p-3 text-gray-700 mt-2">
+          {notes}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TimelineStepDetails;
diff --git a/src/components/Timeline/index.ts b/src/components/Timeline/index.ts
new file mode 100644
index 0000000..89aef85
--- /dev/null
+++ b/src/components/Timeline/index.ts
@@ -0,0 +1,3 @@
+import Timeline from './Timeline';
+export default Timeline;
+export * from './types';
diff --git a/src/components/Timeline/types.ts b/src/components/Timeline/types.ts
new file mode 100644
index 0000000..3474cac
--- /dev/null
+++ b/src/components/Timeline/types.ts
@@ -0,0 +1,12 @@
+export type Stage = "farmer" | "transport" | "retailer" | "mandi" | string;
+export type Status = "completed" | "pending" | "flagged";
+
+export interface TimelineEvent {
+  stage: Stage;
+  actor: string;
+  location: string;
+  timestamp: string;
+  status?: Status;
+  notes?: string;
+  certifications?: string;
+}
diff --git a/src/main.tsx b/src/main.tsx
index 4438c13..8d7602c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,6 +2,7 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
 import './index.css';
+import { AuthProvider } from './context/AuthContext';
 import { ThemeProvider } from './context/ThemeContext';
 import './i18n/config'; // Initialize i18n
 import { AuthProvider } from './context/AuthContext.tsx';
diff --git a/src/pages/TrackBatch.tsx b/src/pages/TrackBatch.tsx
index d4949d5..04ed54b 100644
--- a/src/pages/TrackBatch.tsx
+++ b/src/pages/TrackBatch.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { Search, QrCode, Package, Calendar, MapPin, User, FileText } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { cropBatchService } from '../services/cropBatchService';
+import Timeline from '../components/Timeline';
 import { realCropBatchService } from '../services/realCropBatchService';
 // import Timeline from '../components/Timeline';
 import QRScanner from '../components/QRScanner';
@@ -193,7 +195,7 @@ const TrackBatch: React.FC = () => {
               <FileText className="h-6 w-6 mr-3 text-green-600 dark:text-green-400" />
               Supply Chain Journey
             </h3>
-            {/* <Timeline events={batch.updates} /> */}
+            <Timeline events={batch.updates} globalCertifications={batch.certifications} />
           </div>
 
           {/* QR Code */}
diff --git a/src/pages/UpdateBatch.tsx b/src/pages/UpdateBatch.tsx
index d76f0dd..535317e 100644
--- a/src/pages/UpdateBatch.tsx
+++ b/src/pages/UpdateBatch.tsx
@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import { RefreshCw, Search, Package, Clock, User, MapPin } from 'lucide-react';
+import { cropBatchService } from '../services/cropBatchService';
+import Timeline from '../components/Timeline';
 import { realCropBatchService } from '../services/realCropBatchService';
 // import Timeline from '../components/Timeline';
 import { FormSkeleton, BatchInfoSkeleton } from '../components/skeletons';
@@ -179,7 +181,7 @@ const UpdateBatch: React.FC = () => {
               <Clock className="h-6 w-6 mr-3 text-green-600 dark:text-green-400" />
               Supply Chain Timeline
             </h2>
-            {/* <Timeline events={batch.updates} /> */}
+            <Timeline events={batch.updates} globalCertifications={batch.certifications} />
           </div>
 
           {/* Update Form */}