diff --git a/src/components/KitchenInventory/GardenManagement/GardenManagementPage.jsx b/src/components/KitchenInventory/GardenManagement/GardenManagementPage.jsx
new file mode 100644
index 0000000000..507bbb1ae1
--- /dev/null
+++ b/src/components/KitchenInventory/GardenManagement/GardenManagementPage.jsx
@@ -0,0 +1,538 @@
+import { useState } from 'react';
+import { useSelector } from 'react-redux';
+import styles from './GardenManagementPage.module.css';
+
+const calendarEventsData = {
+  seeding: [
+    {
+      id: 1,
+      name: 'Tomatoes',
+      startDate: '2025-03-01',
+      endDate: '2025-03-15',
+      location: 'Indoor',
+      status: 'upcoming',
+    },
+    {
+      id: 2,
+      name: 'Peppers',
+      startDate: '2025-03-01',
+      endDate: '2025-03-15',
+      location: 'Indoor',
+      status: 'upcoming',
+    },
+    {
+      id: 3,
+      name: 'Lettuce',
+      startDate: '2025-02-15',
+      endDate: '2025-03-01',
+      location: 'Cold Frame',
+      status: 'active',
+    },
+    {
+      id: 4,
+      name: 'Carrots',
+      startDate: '2025-04-01',
+      endDate: '2025-04-15',
+      location: 'Garden Bed 1',
+      status: 'upcoming',
+    },
+  ],
+  transplanting: [
+    {
+      id: 1,
+      name: 'Tomatoes',
+      date: '2025-05-01',
+      from: 'Indoor',
+      to: 'Garden Pot A',
+      status: 'upcoming',
+    },
+    {
+      id: 2,
+      name: 'Peppers',
+      date: '2025-05-10',
+      from: 'Indoor',
+      to: 'Garden Pot B',
+      status: 'upcoming',
+    },
+    {
+      id: 3,
+      name: 'Cabbage',
+      date: '2025-04-20',
+      from: 'Cold Frame',
+      to: 'Garden Bed 2',
+      status: 'upcoming',
+    },
+  ],
+  succession: [
+    {
+      id: 1,
+      name: 'Lettuce',
+      lastSow: '2025-03-01',
+      nextSow: '2025-03-15',
+      interval: 'Every 14 days',
+      status: 'active',
+    },
+    {
+      id: 2,
+      name: 'Radishes',
+      lastSow: '2025-03-10',
+      nextSow: '2025-03-24',
+      interval: 'Every 14 days',
+      status: 'active',
+    },
+    {
+      id: 3,
+      name: 'Beans',
+      lastSow: '2025-05-01',
+      nextSow: '2025-05-15',
+      interval: 'Every 14 days',
+      status: 'upcoming',
+    },
+  ],
+  harvesting: [
+    { id: 1, name: 'Tomatoes', expected: '2025-07-15', yield: '80 lbs', status: 'growing' },
+    { id: 2, name: 'Carrots', expected: '2025-06-01', yield: '50 lbs', status: 'growing' },
+    { id: 3, name: 'Lettuce', expected: '2025-04-20', yield: '30 lbs', status: 'growing' },
+    { id: 4, name: 'Basil', expected: '2025-06-10', yield: '15 lbs', status: 'growing' },
+  ],
+};
+
+const seedInventoryData = [
+  {
+    id: 1,
+    name: 'Tomato Seeds (Heirloom)',
+    collectedDate: '2024-09-15',
+    quantity: 250,
+    viable: 95,
+  },
+  { id: 2, name: 'Carrot Seeds', collectedDate: '2024-08-20', quantity: 180, viable: 88 },
+  { id: 3, name: 'Lettuce Seeds', collectedDate: '2024-07-10', quantity: 320, viable: 92 },
+  { id: 4, name: 'Basil Seeds', collectedDate: '2024-09-01', quantity: 150, viable: 90 },
+];
+
+const seedOrdersData = [
+  {
+    id: 'ORD-001',
+    supplier: 'GreenThumb Seeds Co.',
+    items: [
+      { name: 'Heirloom Tomato Seeds', qty: 5, unit: 'packets' },
+      { name: 'Basil Seeds', qty: 3, unit: 'packets' },
+    ],
+    orderDate: '2025-02-10',
+    deliveryDate: '2025-02-20',
+    status: 'pending',
+  },
+  {
+    id: 'ORD-002',
+    supplier: "Nature's Best Nursery",
+    items: [
+      { name: 'Carrot Seeds', qty: 10, unit: 'packets' },
+      { name: 'Lettuce Seeds', qty: 6, unit: 'packets' },
+    ],
+    orderDate: '2025-02-15',
+    deliveryDate: '2025-02-25',
+    status: 'received',
+  },
+  {
+    id: 'ORD-003',
+    supplier: 'Organic Farm Supply',
+    items: [{ name: 'Pepper Seeds', qty: 4, unit: 'packets' }],
+    orderDate: '2025-02-18',
+    deliveryDate: '2025-03-01',
+    status: 'pending',
+  },
+];
+
+const onlineToolsData = [
+  {
+    id: 1,
+    name: 'Gardenate',
+    description: 'Plan your vegetable garden with a planting calendar tailored to your climate.',
+    features: ['Planting calendar', 'Climate-based suggestions', 'Monthly reminders'],
+    url: 'https://www.gardenate.com',
+    icon: '🌱',
+  },
+  {
+    id: 2,
+    name: "Old Farmer's Almanac Garden Planner",
+    description: 'Drag-and-drop garden layout tool with companion planting suggestions.',
+    features: ['Garden layout designer', 'Companion planting', 'Frost date calculator'],
+    url: 'https://www.almanac.com/garden/planner',
+    icon: '📅',
+  },
+  {
+    id: 3,
+    name: 'SeedSavers Exchange',
+    description: 'Find and exchange rare and heirloom seeds from a global community.',
+    features: ['Seed library', 'Heirloom varieties', 'Community exchange'],
+    url: 'https://www.seedsavers.org',
+    icon: '🫘',
+  },
+  {
+    id: 4,
+    name: "Dave's Garden",
+    description: 'Comprehensive plant database and gardening community forum.',
+    features: ['Plant database', 'Gardening forum', 'Plant reviews'],
+    url: 'https://davesgarden.com',
+    icon: '🌿',
+  },
+];
+
+const StatCard = ({ label, value, icon, bgColor, darkMode }) => (
+  <div className={styles.statCard}>
+    <div>
+      <p className={styles.statLabel}>{label}</p>
+      <p className={styles.statValue}>{value}</p>
+    </div>
+    <div className={styles.statIcon} style={{ '--stat-bg': bgColor }}>
+      {icon}
+    </div>
+  </div>
+);
+
+const CalendarEventCard = ({ event, type }) => {
+  const getStatusClass = status => {
+    if (status === 'active') return styles.statusActive;
+    if (status === 'upcoming') return styles.statusUpcoming;
+    if (status === 'growing') return styles.statusGrowing;
+    return '';
+  };
+
+  return (
+    <div className={styles.eventCard}>
+      <div className={styles.eventHeader}>
+        <span className={styles.eventName}>{event.name}</span>
+        <span className={`${styles.statusBadge} ${getStatusClass(event.status)}`}>
+          {event.status}
+        </span>
+      </div>
+      {type === 'seeding' && (
+        <div className={styles.eventDetails}>
+          <p>
+            Start: {event.startDate} - End: {event.endDate}
+          </p>
+          <p>Location: {event.location}</p>
+        </div>
+      )}
+      {type === 'transplanting' && (
+        <div className={styles.eventDetails}>
+          <p>Date: {event.date}</p>
+          <p>
+            Move: {event.from} → {event.to}
+          </p>
+        </div>
+      )}
+      {type === 'succession' && (
+        <div className={styles.eventDetails}>
+          <p>Last sow: {event.lastSow}</p>
+          <p>
+            Next sow: {event.nextSow} ({event.interval})
+          </p>
+        </div>
+      )}
+      {type === 'harvesting' && (
+        <div className={styles.eventDetails}>
+          <p>Expected: {event.expected}</p>
+          <p>Yield: {event.yield}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const CalendarSection = ({ title, events, type, icon, darkMode }) => {
+  const getButtonText = () => {
+    switch (type) {
+      case 'seeding':
+        return '+ Add Seeding';
+      case 'transplanting':
+        return '+ Schedule Transplant';
+      case 'succession':
+        return '+ Add Succession Plan';
+      case 'harvesting':
+        return '+ Log Harvest';
+      default:
+        return '+ Add Event';
+    }
+  };
+
+  const getSubtitle = () => {
+    switch (type) {
+      case 'seeding':
+        return 'Upcoming seed starting schedule';
+      case 'transplanting':
+        return 'Scheduled transplant dates';
+      case 'succession':
+        return 'Continuous planting schedule';
+      case 'harvesting':
+        return 'Expected harvest dates and yields';
+      default:
+        return '';
+    }
+  };
+
+  return (
+    <div className={styles.calendarCard}>
+      <div className={styles.calendarHeader}>
+        <h3 className={styles.calendarTitle}>
+          <span>{icon}</span> {title}
+        </h3>
+        <button className={styles.addButton} onClick={() => console.log(`Adding ${type} event`)}>
+          {getButtonText()}
+        </button>
+      </div>
+      <p className={styles.calendarSubtitle}>{getSubtitle()}</p>
+      <div className={styles.eventsContainer}>
+        {events.map(event => (
+          <CalendarEventCard key={event.id} event={event} type={type} darkMode={darkMode} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const SeedInventoryCard = ({ seed }) => (
+  <div className={styles.seedCard}>
+    <div className={styles.seedIcon}>🌱</div>
+    <div className={styles.seedInfo}>
+      <div className={styles.seedName}>{seed.name}</div>
+      <div className={styles.seedDate}>Collected: {seed.collectedDate}</div>
+    </div>
+    <div className={styles.seedStats}>
+      <div className={styles.seedQuantity}>{seed.quantity} seeds</div>
+      <div className={styles.viabilityBadge}>{seed.viable}% viable</div>
+    </div>
+  </div>
+);
+
+const SeedOrderCard = ({ order }) => {
+  const getStatusClass = status =>
+    status === 'pending' ? styles.statusPending : styles.statusReceived;
+
+  const getStatusLabel = status => (status === 'pending' ? '⏳ Pending' : '✅ Received');
+
+  return (
+    <div className={styles.orderCard}>
+      <div className={styles.orderHeader}>
+        <div>
+          <span className={styles.orderId}>{order.id}</span>
+          <span className={styles.orderSupplier}>{order.supplier}</span>
+        </div>
+        <span className={`${styles.orderStatusBadge} ${getStatusClass(order.status)}`}>
+          {getStatusLabel(order.status)}
+        </span>
+      </div>
+      <div className={styles.orderItems}>
+        {order.items.map((item, idx) => (
+          <span key={idx} className={styles.orderItemTag}>
+            {item.name} × {item.qty} {item.unit}
+          </span>
+        ))}
+      </div>
+      <div className={styles.orderDates}>
+        <span>📦 Ordered: {order.orderDate}</span>
+        <span>🚚 Delivery: {order.deliveryDate}</span>
+      </div>
+      <div className={styles.orderActions}>
+        <button className={styles.viewDetailsBtn}>View Details</button>
+        {order.status === 'pending' && (
+          <button
+            className={styles.markReceivedBtn}
+            onClick={() => console.log(`Marked ${order.id} as received`)}
+          >
+            Mark as Received
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const OnlineToolCard = ({ tool }) => (
+  <div className={styles.toolCard}>
+    <div className={styles.toolIcon}>{tool.icon}</div>
+    <div className={styles.toolInfo}>
+      <h3 className={styles.toolName}>{tool.name}</h3>
+      <p className={styles.toolDescription}>{tool.description}</p>
+      <ul className={styles.toolFeatures}>
+        {tool.features.map((f, idx) => (
+          <li key={idx}>✓ {f}</li>
+        ))}
+      </ul>
+    </div>
+    <a href={tool.url} target="_blank" rel="noopener noreferrer" className={styles.toolLink}>
+      Visit Tool →
+    </a>
+  </div>
+);
+
+function GardenManagementPage() {
+  const [activeTab, setActiveTab] = useState('calendars');
+  // const [darkMode, setDarkMode] = useState(false);
+  const darkMode = useSelector(state => state.theme?.darkMode ?? false);
+
+  const containerClass = `${styles.container} ${darkMode ? styles.containerDark : ''}`;
+
+  return (
+    <div className={containerClass}>
+      <main className={styles.main}>
+        <h1 className={styles.pageTitle}>Garden Management</h1>
+        <p className={styles.pageSubtitle}>
+          Manage seeds, plan seasonal calendars, and track garden productivity
+        </p>
+
+        {/* Summary Cards */}
+        <div className={styles.statsGrid}>
+          <StatCard
+            label="Seed Varieties"
+            value={seedInventoryData.length}
+            icon="🌱"
+            bgColor={darkMode ? '#1b4332' : '#e8f5e9'}
+            darkMode={darkMode}
+          />
+          <StatCard
+            label="Active Plantings"
+            value="12"
+            icon="🌿"
+            bgColor={darkMode ? '#355c2d' : '#f1f8e9'}
+            darkMode={darkMode}
+          />
+          <StatCard
+            label="Upcoming Harvests"
+            value="4"
+            icon="🌾"
+            bgColor={darkMode ? '#5d4037' : '#fff3e0'}
+            darkMode={darkMode}
+          />
+          <StatCard
+            label="Seed Orders"
+            value={seedOrdersData.filter(o => o.status === 'pending').length}
+            icon="🛒"
+            bgColor={darkMode ? '#0d3b66' : '#e3f2fd'}
+            darkMode={darkMode}
+          />
+        </div>
+
+        {/* Tabs */}
+        <div className={styles.tabs}>
+          {[
+            { id: 'calendars', label: 'Calendars' },
+            { id: 'seed-inventory', label: 'Seed Inventory' },
+            { id: 'seed-orders', label: 'Seed Orders' },
+            { id: 'online-tools', label: 'Online Tools' },
+          ].map(tab => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`${styles.tab} ${activeTab === tab.id ? styles.tabActive : ''}`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Calendars Section */}
+        {activeTab === 'calendars' && (
+          <div className={styles.calendarsGrid}>
+            <CalendarSection
+              title="Seeding Calendar"
+              events={calendarEventsData.seeding}
+              type="seeding"
+              icon="🌱"
+            />
+            <CalendarSection
+              title="Transplanting Calendar"
+              events={calendarEventsData.transplanting}
+              type="transplanting"
+              icon="📋"
+            />
+            <CalendarSection
+              title="Succession Calendar"
+              events={calendarEventsData.succession}
+              type="succession"
+              icon="🕐"
+            />
+            <CalendarSection
+              title="Harvesting Calendar"
+              events={calendarEventsData.harvesting}
+              type="harvesting"
+              icon="🌾"
+            />
+          </div>
+        )}
+
+        {/* Seed Inventory Section */}
+        {activeTab === 'seed-inventory' && (
+          <div className={styles.seedInventorySection}>
+            <div className={styles.sectionHeader}>
+              <div>
+                <h2 className={styles.sectionTitle}>Seed Collection</h2>
+                <p className={styles.sectionSubtitle}>
+                  Seeds collected from the garden for next season
+                </p>
+              </div>
+              <button className={styles.addSeedsButton} onClick={() => console.log('Add seeds')}>
+                + Add Seeds
+              </button>
+            </div>
+            <div className={styles.seedsList}>
+              {seedInventoryData.map(seed => (
+                <SeedInventoryCard key={seed.id} seed={seed} />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Seed Orders Section */}
+        {activeTab === 'seed-orders' && (
+          <div className={styles.seedOrdersSection}>
+            <div className={styles.sectionHeader}>
+              <div>
+                <h2 className={styles.sectionTitle}>Seed Orders</h2>
+                <p className={styles.sectionSubtitle}>Recent seed orders and delivery status</p>
+              </div>
+              <button className={styles.addSeedsButton} onClick={() => console.log('New order')}>
+                + New Order
+              </button>
+            </div>
+            <h3 className={styles.orderGroupTitle}>⏳ Pending Orders</h3>
+            <div className={styles.ordersList}>
+              {seedOrdersData
+                .filter(o => o.status === 'pending')
+                .map(order => (
+                  <SeedOrderCard key={order.id} order={order} />
+                ))}
+            </div>
+            <h3 className={styles.orderGroupTitle}>✅ Received Orders</h3>
+            <div className={styles.ordersList}>
+              {seedOrdersData
+                .filter(o => o.status === 'received')
+                .map(order => (
+                  <SeedOrderCard key={order.id} order={order} />
+                ))}
+            </div>
+          </div>
+        )}
+
+        {/* Online Tools Section */}
+        {activeTab === 'online-tools' && (
+          <div className={styles.onlineToolsSection}>
+            <div className={styles.sectionHeader}>
+              <div>
+                <h2 className={styles.sectionTitle}>Online Garden Tools</h2>
+                <p className={styles.sectionSubtitle}>Helpful external tools for garden planning</p>
+              </div>
+            </div>
+            <div className={styles.toolsGrid}>
+              {onlineToolsData.map(tool => (
+                <OnlineToolCard key={tool.id} tool={tool} />
+              ))}
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}
+
+export default GardenManagementPage;
diff --git a/src/components/KitchenInventory/GardenManagement/GardenManagementPage.module.css b/src/components/KitchenInventory/GardenManagement/GardenManagementPage.module.css
new file mode 100644
index 0000000000..2ecd70f2cd
--- /dev/null
+++ b/src/components/KitchenInventory/GardenManagement/GardenManagementPage.module.css
@@ -0,0 +1,917 @@
+/* Container */
+.container {
+  min-height: 100vh;
+  background-color: #f8f9fa;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.containerDark {
+  background-color: #1a1a2e;
+  color: #e0e0e0;
+}
+
+/* Header */
+.header {
+  background-color: #fff;
+  border-bottom: 1px solid #e0e0e0;
+  padding: 12px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.containerDark .header {
+  background-color: #16213e;
+  border-bottom-color: #2a2a4a;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.logoIcon {
+  width: 36px;
+  height: 36px;
+  background-color: #2e7d32;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.logoText {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.containerDark .logoText {
+  color: #e0e0e0;
+}
+
+.logoSubtext {
+  margin: 0;
+  font-size: 11px;
+  color: #666;
+}
+
+.containerDark .logoSubtext {
+  color: #aaa;
+}
+
+.nav {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+
+.navLink {
+  color: #666;
+  text-decoration: none;
+  font-size: 14px;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.navLink:hover {
+  color: #2e7d32;
+}
+
+.containerDark .navLink {
+  color: #aaa;
+}
+
+.darkModeToggle {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  background: #fff;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.containerDark .darkModeToggle {
+  background: #2a2a4a;
+  border-color: #3a3a5a;
+  color: #e0e0e0;
+}
+
+/* Main */
+.main {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 600;
+  color: #333;
+  margin: 0 0 8px;
+}
+
+.containerDark .pageTitle {
+  color: #e0e0e0;
+}
+
+.pageSubtitle {
+  color: #666;
+  margin: 0 0 24px;
+  font-size: 14px;
+}
+
+.containerDark .pageSubtitle {
+  color: #aaa;
+}
+
+/* Stats Grid */
+.statsGrid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+@media (width <= 1024px) {
+  .statsGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (width <= 600px) {
+  .statsGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.statCard {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.containerDark .statCard {
+  background-color: #16213e;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
+}
+
+.statLabel {
+  color: #666;
+  font-size: 13px;
+  margin: 0 0 6px;
+}
+
+.containerDark .statLabel {
+  color: #aaa;
+}
+
+.statValue {
+  font-size: 28px;
+  font-weight: 600;
+  color: #333;
+  margin: 0;
+}
+
+.containerDark .statValue {
+  color: #e0e0e0;
+}
+
+.statIcon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+}
+
+/* Tabs */
+.tabs {
+  display: flex;
+  gap: 8px;
+  border-bottom: 2px solid #e0e0e0;
+  margin-bottom: 24px;
+  overflow-x: auto;
+}
+
+.containerDark .tabs {
+  border-bottom-color: #2a2a4a;
+}
+
+.tab {
+  padding: 12px 20px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 14px;
+  color: #666;
+  border-bottom: 3px solid transparent;
+  margin-bottom: -2px;
+  white-space: nowrap;
+  transition: all 0.2s;
+  font-weight: 500;
+}
+
+.tab:hover {
+  color: #2e7d32;
+}
+
+.containerDark .tab {
+  color: #aaa;
+}
+
+.tabActive {
+  color: #2e7d32;
+  border-bottom-color: #2e7d32;
+  font-weight: 600;
+}
+
+/* Calendars Grid */
+.calendarsGrid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 24px;
+}
+
+@media (width <= 900px) {
+  .calendarsGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Calendar Card */
+.calendarCard {
+  background-color: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
+  padding: 24px;
+  border-top: 4px solid #2e7d32;
+}
+
+.containerDark .calendarCard {
+  background-color: #16213e;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
+  border-top-color: #4caf50;
+}
+
+.calendarHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  gap: 12px;
+}
+
+.calendarTitle {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.containerDark .calendarTitle {
+  color: #e0e0e0;
+}
+
+.addButton {
+  padding: 8px 16px;
+  background-color: #2e7d32;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  transition: background-color 0.2s;
+  white-space: nowrap;
+}
+
+.addButton:hover {
+  background-color: #1b5e20;
+}
+
+.calendarSubtitle {
+  color: #999;
+  font-size: 13px;
+  margin: 0 0 20px;
+}
+
+.containerDark .calendarSubtitle {
+  color: #aaa;
+}
+
+/* Events Container */
+.eventsContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* Event Card */
+.eventCard {
+  background-color: #f9fafb;
+  border-radius: 8px;
+  padding: 16px;
+  border-left: 4px solid #2e7d32;
+  transition: all 0.2s;
+}
+
+.eventCard:hover {
+  background-color: #f1f3f4;
+  box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
+}
+
+.containerDark .eventCard {
+  background-color: #2e3a52;
+  border-left-color: #4caf50;
+}
+
+.containerDark .eventCard:hover {
+  background-color: #1e2d4a;
+}
+
+.eventHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.eventName {
+  font-weight: 600;
+  color: #333;
+  font-size: 15px;
+}
+
+.containerDark .eventName {
+  color: #e0e0e0;
+}
+
+/* Status Badges */
+.statusBadge {
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: lowercase;
+}
+
+.statusActive {
+  background-color: #1a1a1a;
+  color: #fff;
+}
+
+.statusUpcoming {
+  background-color: #e8f5e9;
+  color: #2e7d32;
+}
+
+.statusGrowing {
+  background-color: #e8f5e9;
+  color: #2e7d32;
+}
+
+.containerDark .statusActive {
+  background-color: #333;
+  color: #fff;
+}
+
+.containerDark .statusUpcoming,
+.containerDark .statusGrowing {
+  background-color: #1b4332;
+  color: #81c784;
+}
+
+/* Event Details */
+.eventDetails {
+  color: #666;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.containerDark .eventDetails {
+  color: #aaa;
+}
+
+.eventDetails p {
+  margin: 4px 0;
+}
+
+.containerDark .eventDetails p {
+  color: #c5d2e7;
+}
+
+/* Empty State */
+.emptyState {
+  text-align: center;
+  padding: 80px 20px;
+  color: #999;
+  background-color: #fff;
+  border-radius: 12px;
+  margin-top: 20px;
+  font-size: 15px;
+}
+
+.containerDark .emptyState {
+  background-color: #16213e;
+  color: #aaa;
+}
+
+/* Responsive */
+@media (width <= 768px) {
+  .header {
+    padding: 12px 16px;
+  }
+  
+  .nav {
+    gap: 12px;
+    font-size: 13px;
+  }
+  
+  .main {
+    padding: 16px;
+  }
+  
+  .pageTitle {
+    font-size: 22px;
+  }
+  
+  .calendarHeader {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .addButton {
+    width: 100%;
+  }
+  
+  .statCard {
+    padding: 16px;
+  }
+  
+  .statValue {
+    font-size: 24px;
+  }
+  
+  .statIcon {
+    width: 40px;
+    height: 40px;
+    font-size: 18px;
+  }
+}
+
+/* ========== SEED INVENTORY SECTION ========== */
+
+.seedInventorySection {
+  margin-top: 20px;
+}
+
+.sectionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 24px;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.sectionTitle {
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+  margin: 0 0 4px;
+}
+
+.containerDark .sectionTitle {
+  color: #e0e0e0;
+}
+
+.sectionSubtitle {
+  color: #999;
+  font-size: 14px;
+  margin: 0;
+}
+
+.containerDark .sectionSubtitle {
+  color: #aaa;
+}
+
+.addSeedsButton {
+  padding: 10px 20px;
+  background-color: #2e7d32;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.addSeedsButton:hover {
+  background-color: #1b5e20;
+}
+
+.seedsList {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.seedCard {
+  background-color: #f0f7f0;
+  border-radius: 8px;
+  padding: 16px 20px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  transition: all 0.2s;
+  border: 1px solid #e0e0e0;
+}
+
+.seedCard:hover {
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+  transform: translateY(-1px);
+}
+
+.containerDark .seedCard {
+  background-color: #1a2744;
+  border-color: #2a2a4a;
+}
+
+.containerDark .seedCard:hover {
+  box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
+}
+
+.seedIcon {
+  width: 48px;
+  height: 48px;
+  background-color: #e8f5e9;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.containerDark .seedIcon {
+  background-color: #1b4332;
+}
+
+.seedInfo {
+  flex: 1;
+}
+
+.seedName {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.containerDark .seedName {
+  color: #e0e0e0;
+}
+
+.seedDate {
+  font-size: 13px;
+  color: #999;
+}
+
+.containerDark .seedDate {
+  color: #aaa;
+}
+
+.seedStats {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.seedQuantity {
+  font-size: 15px;
+  font-weight: 600;
+  color: #333;
+}
+
+.containerDark .seedQuantity {
+  color: #e0e0e0;
+}
+
+.viabilityBadge {
+  background-color: #e8f5e9;
+  color: #2e7d32;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.containerDark .viabilityBadge {
+  background-color: #1b4332;
+  color: #81c784;
+}
+
+@media (width <= 768px) {
+  .sectionHeader {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .addSeedsButton {
+    width: 100%;
+  }
+  
+  .seedCard {
+    flex-wrap: wrap;
+  }
+  
+  .seedStats {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+
+/* ========== SEED ORDERS SECTION ========== */
+.seedOrdersSection {
+  margin-top: 20px;
+}
+
+.orderGroupTitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: #555;
+  margin: 20px 0 12px;
+}
+
+.containerDark .orderGroupTitle {
+  color: #aaa;
+}
+
+.ordersList {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.orderCard {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 18px 20px;
+  box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
+  border: 1px solid #e0e0e0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.containerDark .orderCard {
+  background-color: #16213e;
+  border-color: #2a2a4a;
+}
+
+.orderHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.orderId {
+  font-size: 12px;
+  color: #999;
+  margin-right: 10px;
+  font-weight: 500;
+}
+
+.containerDark .orderId {
+  color: #aaa;
+}
+
+.orderSupplier {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.containerDark .orderSupplier {
+  color: #e0e0e0;
+}
+
+.orderStatusBadge {
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.statusPending {
+  background-color: #fff3e0;
+  color: #e65100;
+}
+
+.statusReceived {
+  background-color: #e8f5e9;
+  color: #2e7d32;
+}
+
+.containerDark .statusPending {
+  background-color: #3e2000;
+  color: #ffb74d;
+}
+
+.containerDark .statusReceived {
+  background-color: #1b4332;
+  color: #81c784;
+}
+
+.orderItems {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.orderItemTag {
+  background-color: #f1f8e9;
+  color: #33691e;
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.containerDark .orderItemTag {
+  background-color: #1b3320;
+  color: #a5d6a7;
+}
+
+.orderDates {
+  display: flex;
+  gap: 20px;
+  font-size: 13px;
+  color: #666;
+  flex-wrap: wrap;
+}
+
+.containerDark .orderDates {
+  color: #aaa;
+}
+
+.orderActions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.viewDetailsBtn {
+  padding: 8px 16px;
+  background-color: transparent;
+  border: 1px solid #2e7d32;
+  color: #2e7d32;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.viewDetailsBtn:hover {
+  background-color: #2e7d32;
+  color: #fff;
+}
+
+.markReceivedBtn {
+  padding: 8px 16px;
+  background-color: #2e7d32;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.markReceivedBtn:hover {
+  background-color: #1b5e20;
+}
+
+/* ========== ONLINE TOOLS SECTION ========== */
+.onlineToolsSection {
+  margin-top: 20px;
+}
+
+.toolsGrid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+}
+
+@media (width <= 768px) {
+  .toolsGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.toolCard {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
+  border: 1px solid #e0e0e0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  transition: box-shadow 0.2s;
+}
+
+.toolCard:hover {
+  box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
+}
+
+.containerDark .toolCard {
+  background-color: #16213e;
+  border-color: #2a2a4a;
+}
+
+.toolIcon {
+  font-size: 32px;
+}
+
+.toolName {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin: 0 0 6px;
+}
+
+.containerDark .toolName {
+  color: #e0e0e0;
+}
+
+.toolDescription {
+  font-size: 13px;
+  color: #666;
+  margin: 0 0 10px;
+  line-height: 1.5;
+}
+
+.containerDark .toolDescription {
+  color: #aaa;
+}
+
+.toolFeatures {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.toolFeatures li {
+  font-size: 12px;
+  color: #2e7d32;
+  font-weight: 500;
+}
+
+.containerDark .toolFeatures li {
+  color: #81c784;
+}
+
+.toolLink {
+  display: inline-block;
+  padding: 8px 16px;
+  background-color: #2e7d32;
+  color: #fff;
+  border-radius: 6px;
+  text-decoration: none;
+  font-size: 13px;
+  font-weight: 500;
+  text-align: center;
+  transition: background-color 0.2s;
+}
+
+.toolLink:hover {
+  background-color: #1b5e20;
+}
\ No newline at end of file
diff --git a/src/routes.jsx b/src/routes.jsx
index e455294c76..d3667bae0f 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -42,6 +42,7 @@ import EDailyActivityLog from './components/BMDashboard/Equipment/DailyActivityL
 import EquipmentUpdateLog from './components/BMDashboard/Equipment/EHistory';
 import LogTools from './components/BMDashboard/LogTools/LogTools';
 import OrdersPage from './components/KitchenInventory/Orders/OrdersPage';
+import GardenManagementPage from './components/KitchenInventory/GardenManagement/GardenManagementPage';
 import Toolslist from './components/BMDashboard/Tools/ToolsList';
 import AddTool from './components/BMDashboard/Tools/AddTool';
 import EquipmentUpdate from './components/BMDashboard/Tools/EquipmentUpdate';
@@ -988,6 +989,10 @@ export default (
         <Route path="/unsubscribe" component={UnsubscribePage} />
         <Route path="/collaboration" component={Collaboration} />
         <ProtectedRoute path="/kitchenandinventory/orders" component={OrdersPage} />
+        <ProtectedRoute
+          path="/kitchenandinventory/gardenmanagement"
+          component={GardenManagementPage}
+        />
         <Route path="/suggestedjobslist" component={SuggestedJobsList} />
         <ProtectedRoute path="/jobformbuilder" fallback component={JobFormBuilder} />
         <ProtectedRoute path="/materials/mostwastedmaterials" component={MostWastedMaterials} />