diff --git a/apps/web/src/app/(app)/layout.tsx b/apps/web/src/app/(app)/layout.tsx
index d7d1bb30..c6108174 100644
--- a/apps/web/src/app/(app)/layout.tsx
+++ b/apps/web/src/app/(app)/layout.tsx
@@ -27,12 +27,13 @@ export default function RootLayout({
   return (
     <html lang="en">
       <head>
-        {process.env.NODE_ENV !== "production" && (
-          <script
-            crossOrigin="anonymous"
-            src="//unpkg.com/react-scan/dist/auto.global.js"
-          />
-        )}
+        {process.env.NODE_ENV !== "production" &&
+          process.env.NEXT_PUBLIC_DISABLE_REACT_SCAN !== "true" && (
+            <script
+              crossOrigin="anonymous"
+              src="//unpkg.com/react-scan/dist/auto.global.js"
+            />
+          )}
       </head>
       <body className={inter.className}>
         {isDemoApp && (
diff --git a/apps/web/src/features/agents/components/agent-card.tsx b/apps/web/src/features/agents/components/agent-card.tsx
index f4c04f31..224ee9c0 100644
--- a/apps/web/src/features/agents/components/agent-card.tsx
+++ b/apps/web/src/features/agents/components/agent-card.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import {
   Bot,
   Brain,
+  Clock,
   Cloud,
   Edit,
   MessageSquare,
@@ -25,6 +26,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { isUserCreatedDefaultAssistant } from "@/lib/agent-utils";
+import { CronDialog } from "@/features/crons/components/cron-dialog";
 
 function SupportedConfigBadge({
   type,
@@ -67,6 +69,7 @@ interface AgentCardProps {
 
 export function AgentCard({ agent, showDeployment }: AgentCardProps) {
   const [showEditDialog, setShowEditDialog] = useState(false);
+  const [showCronDialog, setShowCronDialog] = useState(false);
   const deployments = getDeployments();
   const selectedDeployment = deployments.find(
     (d) => d.id === agent.deploymentId,
@@ -131,16 +134,28 @@ export function AgentCard({ agent, showDeployment }: AgentCardProps) {
           </div>
         </CardHeader>
         <CardFooter className="mt-auto flex w-full justify-between pt-2">
-          {!isDefaultAgent && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setShowEditDialog(true)}
-            >
-              <Edit className="mr-2 h-3.5 w-3.5" />
-              Edit
-            </Button>
-          )}
+          <div className="flex gap-2">
+            {!isDefaultAgent && (
+              <>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setShowEditDialog(true)}
+                >
+                  <Edit className="mr-2 h-3.5 w-3.5" />
+                  Edit
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setShowCronDialog(true)}
+                >
+                  <Clock className="mr-2 h-3.5 w-3.5" />
+                  Crons
+                </Button>
+              </>
+            )}
+          </div>
           <NextLink
             href={`/?agentId=${agent.assistant_id}&deploymentId=${agent.deploymentId}`}
             className="ml-auto"
@@ -157,6 +172,11 @@ export function AgentCard({ agent, showDeployment }: AgentCardProps) {
         open={showEditDialog}
         onOpenChange={(c) => setShowEditDialog(c)}
       />
+      <CronDialog
+        agent={agent}
+        open={showCronDialog}
+        onOpenChange={(c) => setShowCronDialog(c)}
+      />
     </>
   );
 }
diff --git a/apps/web/src/features/crons/components/cron-dialog.tsx b/apps/web/src/features/crons/components/cron-dialog.tsx
new file mode 100644
index 00000000..3e0f8169
--- /dev/null
+++ b/apps/web/src/features/crons/components/cron-dialog.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { Agent } from "@/types/agent";
+import { useCrons } from "@/hooks/use-crons";
+import { Plus, Edit, Trash2, Loader2 } from "lucide-react";
+import { Cron } from "@/types/cron";
+import { CronForm } from "./cron-form";
+
+interface CronDialogProps {
+  agent: Agent;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function CronDialog({ agent, open, onOpenChange }: CronDialogProps) {
+  const { crons, loading, listCrons, deleteCron } = useCrons();
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [editingCron, setEditingCron] = useState<Cron | null>(null);
+  const [deletingCron, setDeletingCron] = useState<Cron | null>(null);
+
+  // Fetch crons when dialog opens
+  useEffect(() => {
+    if (open && agent.assistant_id && agent.deploymentId) {
+      listCrons(agent.assistant_id, agent.deploymentId);
+    }
+  }, [open, agent.assistant_id, agent.deploymentId, listCrons]);
+
+  // Helper function to format the input message
+  const getInputMessage = (cron: Cron) => {
+    const messages = cron.input?.messages || [];
+    const firstMessage = messages.find((msg) => msg.role === "user");
+    return firstMessage?.content || "No message";
+  };
+
+  // Helper function to format the cron schedule in a readable way
+  const formatSchedule = (schedule: string) => {
+    // Basic cron schedule descriptions
+    const commonPatterns: Record<string, string> = {
+      "0 * * * *": "Every hour",
+      "0 0 * * *": "Daily at midnight",
+      "0 9 * * *": "Daily at 9 AM",
+      "0 0 * * 0": "Weekly on Sunday",
+      "0 0 1 * *": "Monthly on the 1st",
+      "*/5 * * * *": "Every 5 minutes",
+      "*/15 * * * *": "Every 15 minutes",
+      "*/30 * * * *": "Every 30 minutes",
+    };
+
+    return commonPatterns[schedule] || schedule;
+  };
+
+  return (
+    <AlertDialog
+      open={open}
+      onOpenChange={onOpenChange}
+    >
+      <AlertDialogContent className="flex max-h-[80vh] max-w-4xl flex-col overflow-hidden">
+        <AlertDialogHeader>
+          <AlertDialogTitle>Cron Jobs for {agent.name}</AlertDialogTitle>
+        </AlertDialogHeader>
+
+        <div className="flex-1 overflow-auto">
+          <div className="space-y-4">
+            {/* Create button */}
+            <div className="flex justify-end">
+              <Button
+                onClick={() => setShowCreateForm(true)}
+                disabled={loading}
+              >
+                <Plus className="mr-2 h-4 w-4" />
+                Create New Cron Job
+              </Button>
+            </div>
+
+            {/* Crons table */}
+            {loading ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader2 className="h-6 w-6 animate-spin" />
+              </div>
+            ) : crons.length === 0 ? (
+              <div className="text-muted-foreground py-8 text-center">
+                No cron jobs found. Create one to get started.
+              </div>
+            ) : (
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Name</TableHead>
+                    <TableHead>Schedule</TableHead>
+                    <TableHead>Input Message</TableHead>
+                    <TableHead className="text-right">Actions</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {crons.map((cron) => (
+                    <TableRow key={cron.cron_id}>
+                      <TableCell className="font-medium">
+                        {cron.metadata?.name || "Unnamed"}
+                      </TableCell>
+                      <TableCell>
+                        <div>
+                          <div className="font-mono text-sm">
+                            {cron.schedule}
+                          </div>
+                          <div className="text-muted-foreground text-xs">
+                            {formatSchedule(cron.schedule)}
+                          </div>
+                        </div>
+                      </TableCell>
+                      <TableCell className="max-w-xs truncate">
+                        {getInputMessage(cron)}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <div className="flex justify-end gap-2">
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => setEditingCron(cron)}
+                          >
+                            <Edit className="h-4 w-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => setDeletingCron(cron)}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            )}
+          </div>
+        </div>
+
+        {/* Cron form for create/edit */}
+        {(showCreateForm || editingCron) && (
+          <div className="mt-4 rounded-lg border p-4">
+            <h3 className="mb-4 text-lg font-semibold">
+              {editingCron ? "Edit Cron Job" : "Create New Cron Job"}
+            </h3>
+            <CronForm
+              agent={agent}
+              cron={editingCron}
+              onSuccess={() => {
+                setShowCreateForm(false);
+                setEditingCron(null);
+              }}
+              onCancel={() => {
+                setShowCreateForm(false);
+                setEditingCron(null);
+              }}
+            />
+          </div>
+        )}
+      </AlertDialogContent>
+
+      {/* Delete confirmation dialog */}
+      <AlertDialog
+        open={!!deletingCron}
+        onOpenChange={(open) => !open && setDeletingCron(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete the
+              cron job
+              <span className="font-semibold">
+                {" "}
+                "{deletingCron?.metadata?.name || "Unnamed"}"
+              </span>
+              .
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setDeletingCron(null)}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={async () => {
+                if (deletingCron) {
+                  await deleteCron(
+                    deletingCron.cron_id,
+                    agent.deploymentId,
+                    agent.assistant_id,
+                  );
+                  setDeletingCron(null);
+                }
+              }}
+              className="bg-destructive hover:bg-destructive/90 text-white"
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </AlertDialog>
+  );
+}
diff --git a/apps/web/src/features/crons/components/cron-form.tsx b/apps/web/src/features/crons/components/cron-form.tsx
new file mode 100644
index 00000000..c7b26d03
--- /dev/null
+++ b/apps/web/src/features/crons/components/cron-form.tsx
@@ -0,0 +1,182 @@
+"use client";
+
+import { useEffect } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { CreateCronFormData, Cron } from "@/types/cron";
+import { Agent } from "@/types/agent";
+import { useCrons } from "@/hooks/use-crons";
+import { toast } from "sonner";
+import { Loader2 } from "lucide-react";
+
+interface CronFormProps {
+  agent: Agent;
+  cron?: Cron | null;
+  onSuccess?: () => void;
+  onCancel?: () => void;
+}
+
+export function CronForm({ agent, cron, onSuccess, onCancel }: CronFormProps) {
+  const { createCron, updateCron, loading } = useCrons();
+
+  const form = useForm<CreateCronFormData>({
+    defaultValues: {
+      name: "",
+      schedule: "",
+      inputMessage: "",
+    },
+  });
+
+  // Pre-fill form when editing
+  useEffect(() => {
+    if (cron) {
+      form.reset({
+        name: cron.metadata?.name || "",
+        schedule: cron.schedule || "",
+        inputMessage: cron.input?.messages?.[0]?.content || "",
+      });
+    }
+  }, [cron, form]);
+
+  const onSubmit = async (data: CreateCronFormData) => {
+    // Validate required fields
+    if (!data.name.trim()) {
+      toast.error("Name is required");
+      return;
+    }
+    if (!data.schedule.trim()) {
+      toast.error("Schedule is required");
+      return;
+    }
+    if (!data.inputMessage.trim()) {
+      toast.error("Input message is required");
+      return;
+    }
+
+    // Validate cron expression format (basic validation)
+    const cronParts = data.schedule.trim().split(" ");
+    if (cronParts.length !== 5) {
+      toast.error(
+        "Invalid cron expression. Must have 5 parts (minute hour day month weekday)",
+      );
+      return;
+    }
+
+    try {
+      if (cron) {
+        // Update existing cron
+        const result = await updateCron(
+          cron.cron_id,
+          agent.deploymentId,
+          agent.assistant_id,
+          data,
+        );
+        if (result) {
+          onSuccess?.();
+        }
+      } else {
+        // Create new cron
+        const result = await createCron(
+          agent.assistant_id,
+          agent.deploymentId,
+          data,
+        );
+        if (result) {
+          form.reset();
+          onSuccess?.();
+        }
+      }
+    } catch (error) {
+      console.error("Failed to save cron:", error);
+    }
+  };
+
+  return (
+    <FormProvider {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="space-y-4"
+      >
+        <div className="space-y-2">
+          <Label htmlFor="name">
+            Name <span className="text-red-500">*</span>
+          </Label>
+          <Input
+            id="name"
+            {...form.register("name")}
+            placeholder="Daily Report Generator"
+            disabled={loading}
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="schedule">
+            Schedule <span className="text-red-500">*</span>
+          </Label>
+          <Input
+            id="schedule"
+            {...form.register("schedule")}
+            placeholder="0 9 * * *"
+            disabled={loading}
+          />
+          <p className="text-muted-foreground text-xs">
+            Use cron expression format: minute hour day month weekday. Examples:
+          </p>
+          <ul className="text-muted-foreground ml-4 list-disc text-xs">
+            <li>"0 9 * * *" - Daily at 9 AM</li>
+            <li>"0 * * * *" - Every hour</li>
+            <li>"*/15 * * * *" - Every 15 minutes</li>
+            <li>"0 0 * * 0" - Weekly on Sunday at midnight</li>
+          </ul>
+          <p className="text-muted-foreground text-xs">
+            <a
+              href="https://crontab.cronhub.io/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary hover:underline"
+            >
+              Use cron expression builder →
+            </a>
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="inputMessage">
+            Input Message <span className="text-red-500">*</span>
+          </Label>
+          <Textarea
+            id="inputMessage"
+            {...form.register("inputMessage")}
+            placeholder="Generate a daily report of all activities"
+            rows={4}
+            disabled={loading}
+          />
+          <p className="text-muted-foreground text-xs">
+            This message will be sent to the agent when the cron job runs
+          </p>
+        </div>
+
+        <div className="flex justify-end gap-2 pt-4">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={onCancel}
+            disabled={loading}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            disabled={loading}
+          >
+            {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            {cron ? "Update" : "Create"} Cron Job
+          </Button>
+        </div>
+      </form>
+    </FormProvider>
+  );
+}
diff --git a/apps/web/src/hooks/use-crons.tsx b/apps/web/src/hooks/use-crons.tsx
new file mode 100644
index 00000000..506d33e4
--- /dev/null
+++ b/apps/web/src/hooks/use-crons.tsx
@@ -0,0 +1,200 @@
+import { useState, useCallback } from "react";
+import { createClient } from "@/lib/client";
+import { useAuthContext } from "@/providers/Auth";
+import { Cron, CronInput, CreateCronFormData } from "@/types/cron";
+import { toast } from "sonner";
+
+/**
+ * Custom hook for managing cron job operations
+ * Provides functions to list, create, update, and delete cron jobs
+ */
+export function useCrons() {
+  const { session, user } = useAuthContext();
+  const [loading, setLoading] = useState(false);
+  const [crons, setCrons] = useState<Cron[]>([]);
+
+  /**
+   * List all crons for a specific assistant
+   */
+  const listCrons = useCallback(
+    async (assistantId: string, deploymentId: string) => {
+      if (!session?.access_token) {
+        toast.error("Authentication required");
+        return [];
+      }
+
+      setLoading(true);
+      try {
+        const client = createClient(deploymentId, session.access_token);
+
+        // Get all crons and filter by assistant_id and owner
+        const response = await client.crons.list();
+        const userCrons = response.filter(
+          (cron: Cron) =>
+            cron.assistant_id === assistantId &&
+            cron.metadata?.owner === user?.id,
+        );
+
+        setCrons(userCrons);
+        return userCrons;
+      } catch (error) {
+        console.error("Failed to list crons:", error);
+        toast.error("Failed to load cron jobs");
+        return [];
+      } finally {
+        setLoading(false);
+      }
+    },
+    [session, user],
+  );
+
+  /**
+   * Create a new cron job
+   */
+  const createCron = useCallback(
+    async (
+      assistantId: string,
+      deploymentId: string,
+      formData: CreateCronFormData,
+    ) => {
+      if (!session?.access_token || !user?.id) {
+        toast.error("Authentication required");
+        return null;
+      }
+
+      setLoading(true);
+      try {
+        const client = createClient(deploymentId, session.access_token);
+
+        const cronInput: CronInput = {
+          schedule: formData.schedule,
+          input: {
+            messages: [
+              {
+                role: "user",
+                content: formData.inputMessage,
+              },
+            ],
+          },
+          metadata: {
+            owner: user.id,
+            name: formData.name,
+          },
+        };
+
+        const newCron = await client.crons.create(assistantId, cronInput);
+
+        toast.success("Cron job created successfully");
+
+        // Refresh the crons list
+        await listCrons(assistantId, deploymentId);
+
+        return newCron;
+      } catch (error) {
+        console.error("Failed to create cron:", error);
+        toast.error("Failed to create cron job");
+        return null;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [session, user, listCrons],
+  );
+
+  /**
+   * Update an existing cron job
+   */
+  const updateCron = useCallback(
+    async (
+      cronId: string,
+      deploymentId: string,
+      assistantId: string,
+      formData: CreateCronFormData,
+    ) => {
+      if (!session?.access_token || !user?.id) {
+        toast.error("Authentication required");
+        return null;
+      }
+
+      setLoading(true);
+      try {
+        const client = createClient(deploymentId, session.access_token);
+
+        // LangGraph SDK update method expects the full cron input
+        const updateInput: CronInput = {
+          schedule: formData.schedule,
+          input: {
+            messages: [
+              {
+                role: "user",
+                content: formData.inputMessage,
+              },
+            ],
+          },
+          metadata: {
+            owner: user.id,
+            name: formData.name,
+          },
+        };
+
+        const updatedCron = await client.crons.update(cronId, updateInput);
+
+        toast.success("Cron job updated successfully");
+
+        // Refresh the crons list
+        await listCrons(assistantId, deploymentId);
+
+        return updatedCron;
+      } catch (error) {
+        console.error("Failed to update cron:", error);
+        toast.error("Failed to update cron job");
+        return null;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [session, user, listCrons],
+  );
+
+  /**
+   * Delete a cron job
+   */
+  const deleteCron = useCallback(
+    async (cronId: string, deploymentId: string, assistantId: string) => {
+      if (!session?.access_token) {
+        toast.error("Authentication required");
+        return false;
+      }
+
+      setLoading(true);
+      try {
+        const client = createClient(deploymentId, session.access_token);
+
+        await client.crons.delete(cronId);
+
+        toast.success("Cron job deleted successfully");
+
+        // Refresh the crons list
+        await listCrons(assistantId, deploymentId);
+
+        return true;
+      } catch (error) {
+        console.error("Failed to delete cron:", error);
+        toast.error("Failed to delete cron job");
+        return false;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [session, listCrons],
+  );
+
+  return {
+    crons,
+    loading,
+    listCrons,
+    createCron,
+    updateCron,
+    deleteCron,
+  };
+}
diff --git a/apps/web/src/types/cron.ts b/apps/web/src/types/cron.ts
new file mode 100644
index 00000000..2fd20b29
--- /dev/null
+++ b/apps/web/src/types/cron.ts
@@ -0,0 +1,63 @@
+/**
+ * Types for cron job functionality in Open Agent Platform
+ * These types align with the LangGraph SDK cron API
+ */
+
+/**
+ * Metadata for a cron job
+ * The owner field is required to track which user created the cron
+ */
+export interface CronMetadata {
+  owner: string; // Supabase user ID
+  name?: string; // User-friendly name for the cron job
+  [key: string]: any; // Allow additional metadata fields
+}
+
+/**
+ * Input structure for creating or updating a cron job
+ */
+export interface CronInput {
+  schedule: string; // Cron expression (e.g., "0 9 * * *" for 9 AM daily)
+  input: {
+    messages: Array<{
+      role: "user" | "assistant" | "system";
+      content: string;
+    }>;
+    [key: string]: any; // Allow additional input fields
+  };
+  metadata?: CronMetadata;
+}
+
+/**
+ * Complete cron job object as returned by the API
+ */
+export interface Cron {
+  cron_id: string;
+  assistant_id: string;
+  thread_id?: string; // Optional - only present for thread-specific crons
+  schedule: string;
+  input: CronInput["input"];
+  metadata?: CronMetadata;
+  created_at?: string;
+  updated_at?: string;
+  next_run_at?: string;
+  last_run_at?: string;
+}
+
+/**
+ * Input for creating a new cron job with user-friendly fields
+ */
+export interface CreateCronFormData {
+  name: string;
+  schedule: string;
+  inputMessage: string;
+}
+
+/**
+ * Input for updating an existing cron job
+ */
+export interface UpdateCronInput {
+  schedule?: string;
+  input?: CronInput["input"];
+  metadata?: Partial<CronMetadata>;
+}
