diff --git a/frontend/app/(sidebar)/farms/[farmId]/crops/[cropId]/analytics-dialog.tsx b/frontend/app/(sidebar)/farms/[farmId]/crops/[cropId]/analytics-dialog.tsx
new file mode 100644
index 0000000..7beeff7
--- /dev/null
+++ b/frontend/app/(sidebar)/farms/[farmId]/crops/[cropId]/analytics-dialog.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { LineChart, Sprout, Droplets, Sun } from "lucide-react";
+import type { Crop, CropAnalytics } from "@/types";
+
+interface AnalyticsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  crop: Crop;
+  analytics: CropAnalytics;
+}
+
+export function AnalyticsDialog({ open, onOpenChange, crop, analytics }: AnalyticsDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[800px]">
+        <DialogHeader>
+          <DialogTitle>Crop Analytics - {crop.name}</DialogTitle>
+        </DialogHeader>
+
+        <Tabs defaultValue="overview">
+          <TabsList className="grid w-full grid-cols-3">
+            <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger value="growth">Growth</TabsTrigger>
+            <TabsTrigger value="environment">Environment</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="overview" className="space-y-4">
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="text-sm font-medium">Growth Rate</CardTitle>
+                  <Sprout className="h-4 w-4 text-muted-foreground" />
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold">+2.5%</div>
+                  <p className="text-xs text-muted-foreground">+20.1% from last week</p>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="text-sm font-medium">Water Usage</CardTitle>
+                  <Droplets className="h-4 w-4 text-muted-foreground" />
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold">15.2L</div>
+                  <p className="text-xs text-muted-foreground">per day average</p>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <CardTitle className="text-sm font-medium">Sunlight</CardTitle>
+                  <Sun className="h-4 w-4 text-muted-foreground" />
+                </CardHeader>
+                <CardContent>
+                  <div className="text-2xl font-bold">{analytics.sunlight}%</div>
+                  <p className="text-xs text-muted-foreground">optimal conditions</p>
+                </CardContent>
+              </Card>
+            </div>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Growth Timeline</CardTitle>
+                <CardDescription>Daily growth rate over time</CardDescription>
+              </CardHeader>
+              <CardContent className="h-[200px] flex items-center justify-center text-muted-foreground">
+                <LineChart className="h-8 w-8" />
+                <span className="ml-2">Growth chart placeholder</span>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="growth" className="space-y-4">
+            <Card>
+              <CardHeader>
+                <CardTitle>Detailed Growth Analysis</CardTitle>
+                <CardDescription>Comprehensive growth metrics</CardDescription>
+              </CardHeader>
+              <CardContent className="h-[300px] flex items-center justify-center text-muted-foreground">
+                Detailed growth analysis placeholder
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="environment" className="space-y-4">
+            <Card>
+              <CardHeader>
+                <CardTitle>Environmental Conditions</CardTitle>
+                <CardDescription>Temperature, humidity, and more</CardDescription>
+              </CardHeader>
+              <CardContent className="h-[300px] flex items-center justify-center text-muted-foreground">
+                Environmental metrics placeholder
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/app/(sidebar)/farms/[farmId]/crops/[cropId]/chatbot-dialog.tsx b/frontend/app/(sidebar)/farms/[farmId]/crops/[cropId]/chatbot-dialog.tsx
new file mode 100644
index 0000000..e704521
--- /dev/null
+++ b/frontend/app/(sidebar)/farms/[farmId]/crops/[cropId]/chatbot-dialog.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { useState } from "react";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Send } from "lucide-react";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+
+interface Message {
+  role: "user" | "assistant";
+  content: string;
+}
+
+interface ChatbotDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  cropName: string;
+}
+
+export function ChatbotDialog({ open, onOpenChange, cropName }: ChatbotDialogProps) {
+  const [messages, setMessages] = useState<Message[]>([
+    {
+      role: "assistant",
+      content: `Hello! I'm your farming assistant. How can I help you with your ${cropName} today?`,
+    },
+  ]);
+  const [input, setInput] = useState("");
+
+  const handleSend = () => {
+    if (!input.trim()) return;
+
+    const newMessages: Message[] = [
+      ...messages,
+      { role: "user", content: input },
+      { role: "assistant", content: `Here's some information about ${cropName}: [AI response placeholder]` },
+    ];
+    setMessages(newMessages);
+    setInput("");
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <VisuallyHidden>
+        <DialogTitle></DialogTitle>
+      </VisuallyHidden>
+      <DialogContent className="sm:max-w-[500px] p-0">
+        <div className="flex flex-col h-[600px]">
+          <div className="p-4 border-b">
+            <h2 className="text-lg font-semibold">Farming Assistant</h2>
+            <p className="text-sm text-muted-foreground">Ask questions about your {cropName}</p>
+          </div>
+
+          <ScrollArea className="flex-1 p-4">
+            <div className="space-y-4">
+              {messages.map((message, i) => (
+                <div key={i} className={`flex ${message.role === "user" ? "justify-end" : "justify-start"}`}>
+                  <div
+                    className={`rounded-lg px-4 py-2 max-w-[80%] ${
+                      message.role === "user" ? "bg-primary text-primary-foreground" : "bg-muted"
+                    }`}>
+                    {message.content}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
+
+          <div className="p-4 border-t">
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                handleSend();
+              }}
+              className="flex gap-2">
+              <Input placeholder="Type your message..." value={input} onChange={(e) => setInput(e.target.value)} />
+              <Button type="submit" size="icon">
+                <Send className="h-4 w-4" />
+              </Button>
+            </form>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/app/(sidebar)/farms/[farmId]/crops/[cropId]/page.tsx b/frontend/app/(sidebar)/farms/[farmId]/crops/[cropId]/page.tsx
new file mode 100644
index 0000000..7e94118
--- /dev/null
+++ b/frontend/app/(sidebar)/farms/[farmId]/crops/[cropId]/page.tsx
@@ -0,0 +1,253 @@
+"use client";
+
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  ArrowLeft,
+  MapPin,
+  Sprout,
+  LineChart,
+  MessageSquare,
+  Settings,
+  AlertCircle,
+  Droplets,
+  Sun,
+  ThermometerSun,
+  Timer,
+  ListCollapse,
+} from "lucide-react";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { Progress } from "@/components/ui/progress";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ChatbotDialog } from "./chatbot-dialog";
+import { AnalyticsDialog } from "./analytics-dialog";
+import type { Crop, CropAnalytics } from "@/types";
+
+const getCropById = (id: string): Crop => {
+  return {
+    id,
+    farmId: "1",
+    name: "Monthong Durian",
+    plantedDate: new Date("2024-01-15"),
+    status: "growing",
+  };
+};
+
+const getAnalyticsByCropId = (id: string): CropAnalytics => {
+  return {
+    cropId: id,
+    growthProgress: 45, // Percentage
+    humidity: 75, // Percentage
+    temperature: 28, // °C
+    sunlight: 85, // Percentage
+    waterLevel: 65, // Percentage
+    plantHealth: "good", // "good", "warning", "critical"
+    nextAction: "Water the plant",
+    nextActionDue: new Date("2024-02-15"),
+  };
+};
+
+export default function CropDetailPage({ params }: { params: Promise<{ farmId: string; cropId: string }> }) {
+  const { farmId, cropId } = React.use(params);
+
+  const router = useRouter();
+  const [crop] = useState(getCropById(cropId));
+  const analytics = getAnalyticsByCropId(cropId);
+
+  // Colors for plant health badge.
+  const healthColors = {
+    good: "text-green-500",
+    warning: "text-yellow-500",
+    critical: "text-red-500",
+  };
+
+  const actions = [
+    {
+      title: "Analytics",
+      icon: LineChart,
+      description: "View detailed growth analytics",
+      onClick: () => setIsAnalyticsOpen(true),
+    },
+    {
+      title: "Chat Assistant",
+      icon: MessageSquare,
+      description: "Get help and advice",
+      onClick: () => setIsChatOpen(true),
+    },
+    {
+      title: "Detailed",
+      icon: ListCollapse,
+      description: "View detailed of crop",
+      onClick: () => console.log("Detailed clicked"),
+    },
+    {
+      title: "Settings",
+      icon: Settings,
+      description: "Configure crop settings",
+      onClick: () => console.log("Settings clicked"),
+    },
+    {
+      title: "Report Issue",
+      icon: AlertCircle,
+      description: "Report a problem",
+      onClick: () => console.log("Report clicked"),
+    },
+  ];
+
+  const [isChatOpen, setIsChatOpen] = useState(false);
+  const [isAnalyticsOpen, setIsAnalyticsOpen] = useState(false);
+
+  return (
+    <div className="container max-w-screen-xl p-8">
+      <Button variant="ghost" className="mb-4" onClick={() => router.back()}>
+        <ArrowLeft className="mr-2 h-4 w-4" /> Back to Farm
+      </Button>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* Left Column - Crop Details */}
+        <div className="space-y-6">
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <div className="flex items-center space-x-2">
+                <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
+                  <Sprout className="h-4 w-4 text-primary" />
+                </div>
+                <div>
+                  <h1 className="text-2xl font-bold">{crop.name}</h1>
+                  <p className="text-sm text-muted-foreground">Planted on {crop.plantedDate.toLocaleDateString()}</p>
+                </div>
+              </div>
+              <Badge variant="outline" className={healthColors[analytics.plantHealth]}>
+                {analytics.plantHealth.toUpperCase()}
+              </Badge>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div>
+                  <p className="text-sm text-muted-foreground mb-2">Growth Progress</p>
+                  <Progress value={analytics.growthProgress} className="h-2" />
+                  <p className="text-sm text-muted-foreground mt-1">{analytics.growthProgress}% Complete</p>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <div className="flex items-center gap-2">
+                      <Droplets className="h-4 w-4 text-blue-500" />
+                      <span className="text-sm">Humidity</span>
+                    </div>
+                    <p className="text-2xl font-semibold">{analytics.humidity}%</p>
+                  </div>
+                  <div className="space-y-2">
+                    <div className="flex items-center gap-2">
+                      <ThermometerSun className="h-4 w-4 text-orange-500" />
+                      <span className="text-sm">Temperature</span>
+                    </div>
+                    <p className="text-2xl font-semibold">{analytics.temperature}°C</p>
+                  </div>
+                  <div className="space-y-2">
+                    <div className="flex items-center gap-2">
+                      <Sun className="h-4 w-4 text-yellow-500" />
+                      <span className="text-sm">Sunlight</span>
+                    </div>
+                    <p className="text-2xl font-semibold">{analytics.sunlight}%</p>
+                  </div>
+                  <div className="space-y-2">
+                    <div className="flex items-center gap-2">
+                      <Droplets className="h-4 w-4 text-blue-500" />
+                      <span className="text-sm">Water Level</span>
+                    </div>
+                    <p className="text-2xl font-semibold">{analytics.waterLevel}%</p>
+                  </div>
+                </div>
+
+                <Separator />
+
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2">
+                    <Timer className="h-4 w-4 text-primary" />
+                    <span className="text-sm font-medium">Next Action Required</span>
+                  </div>
+                  <div className="bg-muted/50 p-4 rounded-lg">
+                    <p className="font-medium">{analytics.nextAction}</p>
+                    <p className="text-sm text-muted-foreground">
+                      Due by {analytics.nextActionDue.toLocaleDateString()}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <h2 className="text-lg font-semibold">Actions</h2>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 gap-4">
+                {actions.map((action) => (
+                  <Button
+                    key={action.title}
+                    variant="outline"
+                    className="h-auto p-4 flex flex-col items-center gap-2"
+                    onClick={action.onClick}>
+                    <action.icon className="h-6 w-6" />
+                    <span className="font-medium">{action.title}</span>
+                    <span className="text-xs text-muted-foreground text-center">{action.description}</span>
+                  </Button>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="space-y-6">
+          <Card className="h-[400px]">
+            <CardContent className="p-0 h-full">
+              <div className="h-full w-full bg-muted/20 flex items-center justify-center">
+                <div className="text-center space-y-2">
+                  <MapPin className="h-8 w-8 mx-auto text-muted-foreground" />
+                  <p className="text-sm text-muted-foreground">
+                    Map placeholder
+                    <br />
+                    Click to view full map
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <h2 className="text-lg font-semibold">Quick Analytics</h2>
+            </CardHeader>
+            <CardContent>
+              <Tabs defaultValue="growth">
+                <TabsList className="grid w-full grid-cols-3">
+                  <TabsTrigger value="growth">Growth</TabsTrigger>
+                  <TabsTrigger value="health">Health</TabsTrigger>
+                  <TabsTrigger value="water">Water</TabsTrigger>
+                </TabsList>
+                <TabsContent value="growth" className="flex items-center justify-center text-muted-foreground">
+                  Growth chart placeholder
+                </TabsContent>
+                <TabsContent value="health" className="flex items-center justify-center text-muted-foreground">
+                  Health metrics placeholder
+                </TabsContent>
+                <TabsContent value="water" className="flex items-center justify-center text-muted-foreground">
+                  Water usage placeholder
+                </TabsContent>
+              </Tabs>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      <ChatbotDialog open={isChatOpen} onOpenChange={setIsChatOpen} cropName={crop.name} />
+
+      <AnalyticsDialog open={isAnalyticsOpen} onOpenChange={setIsAnalyticsOpen} crop={crop} analytics={analytics} />
+    </div>
+  );
+}
diff --git a/frontend/components/ui/badge.tsx b/frontend/components/ui/badge.tsx
new file mode 100644
index 0000000..e87d62b
--- /dev/null
+++ b/frontend/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/frontend/components/ui/progress.tsx b/frontend/components/ui/progress.tsx
new file mode 100644
index 0000000..4fc3b47
--- /dev/null
+++ b/frontend/components/ui/progress.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
diff --git a/frontend/components/ui/scroll-area.tsx b/frontend/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..0b4a48d
--- /dev/null
+++ b/frontend/components/ui/scroll-area.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/frontend/components/ui/tabs.tsx b/frontend/components/ui/tabs.tsx
new file mode 100644
index 0000000..0f4caeb
--- /dev/null
+++ b/frontend/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/frontend/package.json b/frontend/package.json
index e7de5e8..eca4aa1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,6 +24,7 @@
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.8",
+    "@radix-ui/react-visually-hidden": "^1.1.2",
     "@react-google-maps/api": "^2.20.6",
     "@tailwindcss/typography": "^0.5.16",
     "@tanstack/react-query": "^5.66.0",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 271ea63..1f662f2 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -53,6 +53,9 @@ importers:
       '@radix-ui/react-tooltip':
         specifier: ^1.1.8
         version: 1.1.8(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@radix-ui/react-visually-hidden':
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@19.0.3(@types/react@19.0.8))(@types/react@19.0.8)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@react-google-maps/api':
         specifier: ^2.20.6
         version: 2.20.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
diff --git a/frontend/types.ts b/frontend/types.ts
index 5ae3150..98fc9b1 100644
--- a/frontend/types.ts
+++ b/frontend/types.ts
@@ -6,6 +6,18 @@ export interface Crop {
   status: "growing" | "harvested" | "planned";
 }
 
+export interface CropAnalytics {
+  cropId: string;
+  humidity: number;
+  temperature: number;
+  sunlight: number;
+  waterLevel: number;
+  growthProgress: number;
+  plantHealth: "good" | "warning" | "critical";
+  nextAction: string;
+  nextActionDue: Date;
+}
+
 export interface Farm {
   id: string;
   name: string;