From 7dc818ab7191274bf07145136478034aef3817c8 Mon Sep 17 00:00:00 2001
From: Yashwin <yashwin.shankar@tech4biz.io>
Date: Wed, 22 Apr 2026 19:43:23 +0530
Subject: [PATCH] feat: implement prompt management features including editing,
 version history, cloning, status toggling, and deletion.

---
 src/components/shared/FormField.tsx           |   4 +-
 src/components/shared/FormSlider.tsx          | 102 +++
 src/components/shared/FormTextArea.tsx        |   4 +-
 src/components/shared/index.ts                |   1 +
 src/components/tenant/PromptVersionsModal.tsx | 136 ++++
 src/pages/tenant/AIGateway.tsx                |   6 +-
 src/pages/tenant/CompletionCreate.tsx         | 182 +++--
 src/pages/tenant/PromptCreate.tsx             | 725 ++++++++++++------
 src/pages/tenant/PromptEdit.tsx               | 625 +++++++++++++++
 src/pages/tenant/PromptManagement.tsx         | 212 ++++-
 src/routes/tenant-admin-routes.tsx            |   5 +
 src/services/ai-service.ts                    |  48 ++
 src/types/ai.ts                               |  21 +-
 13 files changed, 1734 insertions(+), 337 deletions(-)
 create mode 100644 src/components/shared/FormSlider.tsx
 create mode 100644 src/components/tenant/PromptVersionsModal.tsx
 create mode 100644 src/pages/tenant/PromptEdit.tsx

diff --git a/src/components/shared/FormField.tsx b/src/components/shared/FormField.tsx
index 277f844..5213739 100644
--- a/src/components/shared/FormField.tsx
+++ b/src/components/shared/FormField.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, type ReactNode } from 'react';
 import type { ReactElement, InputHTMLAttributes } from 'react';
 import { Eye, EyeOff } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -7,7 +7,7 @@ interface FormFieldProps extends InputHTMLAttributes<HTMLInputElement> {
   label: string;
   required?: boolean;
   error?: string;
-  helperText?: string;
+  helperText?: ReactNode;
 }
 
 export const FormField = ({
diff --git a/src/components/shared/FormSlider.tsx b/src/components/shared/FormSlider.tsx
new file mode 100644
index 0000000..cc3d464
--- /dev/null
+++ b/src/components/shared/FormSlider.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface FormSliderProps {
+  label: string;
+  min: number;
+  max: number;
+  step?: number;
+  value: number;
+  onChange: (value: number) => void;
+  helperText?: string;
+  error?: string;
+  className?: string;
+}
+
+export const FormSlider: React.FC<FormSliderProps> = ({
+  label,
+  min,
+  max,
+  step = 0.1,
+  value,
+  onChange,
+  helperText,
+  error,
+  className,
+}) => {
+  // Calculate percentage for gradient track
+  const percentage = ((value - min) / (max - min)) * 100;
+
+  return (
+    <div className={cn("space-y-2 pb-4", className)}>
+      <div className="flex items-center justify-between mb-1">
+        <label className="text-[13px] font-semibold text-[#0e1b2a]">
+          {label}
+        </label>
+        <div className="px-1.5 py-0.5 border border-gray-200 rounded text-[12px] font-medium text-gray-700 bg-white min-w-[36px] text-center shadow-sm">
+          {value}
+        </div>
+      </div>
+
+      <div className="relative h-6 flex flex-col justify-center">
+        <input
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          onChange={(e) => onChange(parseFloat(e.target.value))}
+          className="form-range-slider w-full cursor-pointer appearance-none bg-transparent"
+          style={{
+            background: `linear-gradient(to right, #00cfd5 0%, #00cfd5 ${percentage}%, #eff6ff ${percentage}%, #eff6ff 100%)`,
+            height: '4px',
+            borderRadius: '4px',
+          }}
+        />
+        <div className="flex justify-between mt-2 px-0.5">
+          <span className="text-[10px] font-medium text-gray-400">{min}</span>
+          <span className="text-[10px] font-medium text-gray-400">{max}</span>
+        </div>
+      </div>
+
+      {helperText && !error && (
+        <p className="text-[11px] text-gray-400 leading-tight mt-1">
+          {helperText}
+        </p>
+      )}
+      {error && (
+        <p className="text-[11px] text-red-500 leading-tight mt-1 font-medium">
+          {error}
+        </p>
+      )}
+
+      <style dangerouslySetInnerHTML={{ __html: `
+        .form-range-slider::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          appearance: none;
+          width: 16px;
+          height: 16px;
+          background: #0f172a;
+          border-radius: 50%;
+          cursor: pointer;
+          border: 2px solid #fff;
+          box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+          transition: transform 0.1s ease;
+          margin-top: 0px;
+        }
+        .form-range-slider::-moz-range-thumb {
+          width: 16px;
+          height: 16px;
+          background: #0f172a;
+          border-radius: 50%;
+          cursor: pointer;
+          border: 2px solid #fff;
+          box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+        }
+        .form-range-slider::-webkit-slider-thumb:hover {
+          transform: scale(1.1);
+        }
+      `}} />
+    </div>
+  );
+};
diff --git a/src/components/shared/FormTextArea.tsx b/src/components/shared/FormTextArea.tsx
index 6f49a7a..0877db1 100644
--- a/src/components/shared/FormTextArea.tsx
+++ b/src/components/shared/FormTextArea.tsx
@@ -1,11 +1,11 @@
-import type { ReactElement, TextareaHTMLAttributes } from 'react';
+import type { ReactElement, TextareaHTMLAttributes, ReactNode } from 'react';
 import { cn } from '@/lib/utils';
 
 interface FormTextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   label: string;
   required?: boolean;
   error?: string;
-  helperText?: string;
+  helperText?: ReactNode;
 }
 
 export const FormTextArea = ({
diff --git a/src/components/shared/index.ts b/src/components/shared/index.ts
index 43b3bb1..1aeaa61 100644
--- a/src/components/shared/index.ts
+++ b/src/components/shared/index.ts
@@ -34,6 +34,7 @@ export { ViewSupplierModal } from './ViewSupplierModal';
 export { SupplierContactsModal } from './SupplierContactsModal';
 export { SupplierScorecardsModal } from './SupplierScorecardsModal';
 export { FormTextArea } from './FormTextArea';
+export { FormSlider } from './FormSlider';
 export { RichTextEditor } from './RichTextEditor';
 export { FileUploadModal } from './FileUploadModal';
 export type { FileUploadModalProps } from './FileUploadModal';
diff --git a/src/components/tenant/PromptVersionsModal.tsx b/src/components/tenant/PromptVersionsModal.tsx
new file mode 100644
index 0000000..a628fa2
--- /dev/null
+++ b/src/components/tenant/PromptVersionsModal.tsx
@@ -0,0 +1,136 @@
+import { useEffect, useState } from "react";
+import { Modal, DataTable, type Column, PrimaryButton, StatusBadge } from "@/components/shared";
+import { aiService } from "@/services/ai-service";
+import type { AIPrompt } from "@/types/ai";
+import { showToast } from "@/utils/toast";
+import { formatDate } from "@/utils/format-date";
+import { RotateCcw } from "lucide-react";
+
+interface PromptVersionsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  prompt: AIPrompt | null;
+  onRollbackSuccess: () => void;
+}
+
+export const PromptVersionsModal = ({
+  isOpen,
+  onClose,
+  prompt,
+  onRollbackSuccess,
+}: PromptVersionsModalProps) => {
+  const [versions, setVersions] = useState<AIPrompt[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isRollingBack, setIsRollingBack] = useState(false);
+
+  const loadVersions = async () => {
+    if (!prompt) return;
+    setIsLoading(true);
+    try {
+      const data = await aiService.getVersions(prompt.id);
+      setVersions(data);
+    } catch (err: any) {
+      showToast.error("Failed to load versions");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen && prompt) {
+      void loadVersions();
+    }
+  }, [isOpen, prompt]);
+
+  const handleRollback = async (version: number) => {
+    if (!prompt) return;
+    setIsRollingBack(true);
+    try {
+      await aiService.rollback(prompt.id, version);
+      showToast.success(`Successfully rolled back to version ${version}`);
+      onRollbackSuccess();
+      onClose();
+    } catch (err: any) {
+      showToast.error("Failed to rollback version");
+    } finally {
+      setIsRollingBack(false);
+    }
+  };
+
+  const columns: Column<AIPrompt>[] = [
+    {
+      key: "version",
+      label: "Version",
+      render: (row) => <span className="font-semibold text-gray-900">v{row.version}</span>,
+    },
+    {
+      key: "status",
+      label: "Status",
+      render: (row) => (
+        <StatusBadge variant={row.status === "active" ? "success" : "process"}>
+          {row.status || "draft"}
+        </StatusBadge>
+      ),
+    },
+    {
+      key: "change_notes",
+      label: "Change Notes",
+      render: (row) => <span className="text-xs text-gray-500">{row.change_notes}</span>,
+    },
+    // {
+    //   key: "created_by_email",
+    //   label: "Created By",
+    //   render: (row) => <span className="text-xs text-gray-500">{row.created_by_email}</span>,
+    // },
+    {
+      key: "updated_at",
+      label: "Created At",
+      render: (row) => (
+        <span className="text-xs text-gray-500">{formatDate(row.updated_at || row.created_at || "")}</span>
+      ),
+    },
+    {
+      key: "actions",
+      label: "Actions",
+      align: "right",
+      render: (row) => (
+        <div className="flex justify-end gap-2">
+          {row.version !== prompt?.version && (
+            <PrimaryButton
+              size="small"
+              className="h-8 text-[11px] bg-[#112868] hover:bg-[#0a1b4a]"
+              onClick={() => handleRollback(row.version!)}
+              disabled={isRollingBack}
+            >
+              <RotateCcw className="w-3 h-3 mr-1" />
+              Rollback
+            </PrimaryButton>
+          )}
+          {row.version === prompt?.version && (
+            <span className="text-[11px] font-medium text-gray-400 py-1 px-2 border border-gray-100 rounded bg-gray-50">Current</span>
+          )}
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={`Version History - ${prompt?.name}`}
+      description="View previous versions of this prompt and rollback if needed."
+      maxWidth="lg"
+    >
+      <div className="border-t border-gray-100">
+        <DataTable
+          data={versions}
+          columns={columns}
+          keyExtractor={(item) => item.version?.toString() || item.id}
+          isLoading={isLoading}
+          emptyMessage="No version history available"
+        />
+      </div>
+    </Modal>
+  );
+};
diff --git a/src/pages/tenant/AIGateway.tsx b/src/pages/tenant/AIGateway.tsx
index e6ab247..10e9195 100644
--- a/src/pages/tenant/AIGateway.tsx
+++ b/src/pages/tenant/AIGateway.tsx
@@ -452,9 +452,9 @@ const AIGateway = (): ReactElement => {
 
   const promptColumns: Column<AIPrompt>[] = [
     { key: "name", label: "Prompt Name" },
-    { key: "use_case", label: "Use Case" },
-    { key: "provider", label: "Provider", render: (row) => row.provider || "-" },
-    { key: "model", label: "Model", render: (row) => row.model || "-" },
+    { key: "useCase", label: "Use Case" },
+    { key: "provider", label: "Provider", render: (row) => row.defaultParameters?.provider || "-" },
+    { key: "model", label: "Model", render: (row) => row.defaultParameters?.model || "-" },
     {
       key: "status",
       label: "Status",
diff --git a/src/pages/tenant/CompletionCreate.tsx b/src/pages/tenant/CompletionCreate.tsx
index 9c9bbd2..1010028 100644
--- a/src/pages/tenant/CompletionCreate.tsx
+++ b/src/pages/tenant/CompletionCreate.tsx
@@ -1,10 +1,23 @@
 import { useEffect, useMemo, useRef, useState, type ReactElement } from "react";
 import { Layout } from "@/components/layout/Layout";
-import { FormField, FormSelect, PrimaryButton, SecondaryButton, StatusBadge } from "@/components/shared";
+import { FormSelect, PrimaryButton, SecondaryButton, StatusBadge, FormSlider } from "@/components/shared";
 import { aiService } from "@/services/ai-service";
 import type { AIProviderInfo } from "@/types/ai";
 import { showToast } from "@/utils/toast";
 import { Bot, Send, User } from "lucide-react";
+import { useForm, Controller } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+
+const playgroundSchema = z.object({
+  user: z.string().min(1, "Message is required"),
+  provider: z.string().optional(),
+  model: z.string().optional(),
+  temperature: z.number().min(0).max(2),
+  max_tokens: z.number().int().min(1).max(128000),
+});
+
+type PlaygroundFormData = z.infer<typeof playgroundSchema>;
 
 const CompletionCreate = (): ReactElement => {
   const [providers, setProviders] = useState<AIProviderInfo[]>([]);
@@ -13,13 +26,25 @@ const CompletionCreate = (): ReactElement => {
   const [isSending, setIsSending] = useState<boolean>(false);
   const [isPlaygroundMode, setIsPlaygroundMode] = useState<boolean>(true);
 
-  const [form, setForm] = useState({
-    user: "",
-    provider: "gemini",
-    model: "",
-    temperature: "0.7",
-    max_tokens: "1024",
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { errors }
+  } = useForm<PlaygroundFormData>({
+    resolver: zodResolver(playgroundSchema),
+    defaultValues: {
+      user: "",
+      provider: "gemini",
+      model: "",
+      temperature: 0.7,
+      max_tokens: 1024,
+    },
   });
+
+  const formValues = watch();
+
   const [lastSentUserMessage, setLastSentUserMessage] = useState<string>("");
   const [displayedResponse, setDisplayedResponse] = useState<string>("");
   const typingIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -44,12 +69,12 @@ const CompletionCreate = (): ReactElement => {
   const modelOptions = useMemo(
     () =>
       models
-        .filter((m) => !form.provider || m.provider === form.provider)
+        .filter((m) => !formValues.provider || m.provider === formValues.provider)
         .map((m) => ({
           value: m.id,
           label: `${m.id}${m.isDefault ? " • default" : ""}`,
         })),
-    [models, form.provider],
+    [models, formValues.provider],
   );
 
   const loadOptions = async (): Promise<void> => {
@@ -77,13 +102,8 @@ const CompletionCreate = (): ReactElement => {
     };
   }, []);
 
-  const handleSend = async (): Promise<void> => {
-    const userMessage = form.user.trim();
-    if (!userMessage) {
-      showToast.error("Please enter a message before sending");
-      return;
-    }
-
+  const onSend = async (data: PlaygroundFormData): Promise<void> => {
+    const userMessage = data.user.trim();
     if (typingIntervalRef.current) {
       clearInterval(typingIntervalRef.current);
       typingIntervalRef.current = null;
@@ -96,17 +116,17 @@ const CompletionCreate = (): ReactElement => {
       const result = isPlaygroundMode
         ? await aiService.playground({
             messages: [{ role: "user", content: userMessage }],
-            provider: form.provider || undefined,
-            model: form.model || undefined,
-            temperature: Number(form.temperature),
-            max_tokens: Number(form.max_tokens),
+            provider: data.provider || undefined,
+            model: data.model || undefined,
+            temperature: data.temperature,
+            max_tokens: data.max_tokens,
           })
         : await aiService.createCompletion({
             messages: [{ role: "user", content: userMessage }],
-            provider: form.provider || undefined,
-            model: form.model || undefined,
-            temperature: Number(form.temperature),
-            max_tokens: Number(form.max_tokens),
+            provider: data.provider || undefined,
+            model: data.model || undefined,
+            temperature: data.temperature,
+            max_tokens: data.max_tokens,
           });
 
       setResponseData({
@@ -139,6 +159,7 @@ const CompletionCreate = (): ReactElement => {
       showToast.success(
         isPlaygroundMode ? "Playground response received" : "Completion created and saved to history",
       );
+      setValue("user", "");
     } catch (err: any) {
       showToast.error(
         err?.response?.data?.error?.message ||
@@ -225,14 +246,25 @@ const CompletionCreate = (): ReactElement => {
 
           <div className="p-2.5 md:p-3 border-t border-[rgba(0,0,0,0.08)] bg-white">
             <div className="flex gap-2 items-center">
-              <input
-                value={form.user}
-                onChange={(e) => setForm((prev) => ({ ...prev, user: e.target.value }))}
-                placeholder="Type your message here..."
-                className="flex-1 h-10 md:h-11 px-3 rounded-lg border border-[rgba(0,0,0,0.12)] text-sm text-[#0f1724] placeholder:text-[#94a3b8] focus:outline-none focus:ring-2 focus:ring-[#112868]/20"
+              <Controller
+                name="user"
+                control={control}
+                render={({ field }) => (
+                  <input
+                    {...field}
+                    placeholder="Type your message here..."
+                    className="flex-1 h-10 md:h-11 px-3 rounded-lg border border-[rgba(0,0,0,0.12)] text-sm text-[#0f1724] placeholder:text-[#94a3b8] focus:outline-none focus:ring-2 focus:ring-[#112868]/20"
+                    onKeyPress={(e) => {
+                      if (e.key === "Enter" && !e.shiftKey) {
+                        e.preventDefault();
+                        void handleSubmit(onSend)();
+                      }
+                    }}
+                  />
+                )}
               />
               <PrimaryButton
-                onClick={handleSend}
+                onClick={handleSubmit(onSend)}
                 disabled={isSending || isLoading}
                 className="h-10 md:h-11 px-3 md:px-4 min-w-[84px] md:min-w-[96px] shrink-0"
               >
@@ -240,6 +272,7 @@ const CompletionCreate = (): ReactElement => {
                 <span className="hidden sm:inline">{isSending ? "Sending..." : "Send"}</span>
               </PrimaryButton>
             </div>
+            {errors.user && <p className="text-[10px] text-red-500 mt-1">{errors.user.message}</p>}
           </div>
         </section>
 
@@ -267,41 +300,66 @@ const CompletionCreate = (): ReactElement => {
 
           <h3 className="text-sm font-semibold text-[#0f1724] mb-3">Model Configuration</h3>
 
-          <FormSelect
-            label="Provider"
-            value={form.provider}
-            options={providerOptions}
-            onValueChange={(value) => setForm((prev) => ({ ...prev, provider: value, model: "" }))}
+          <Controller
+            name="provider"
+            control={control}
+            render={({ field }) => (
+              <FormSelect
+                {...field}
+                label="Provider"
+                options={providerOptions}
+                onValueChange={(value) => {
+                  field.onChange(value);
+                  setValue("model", "");
+                }}
+              />
+            )}
           />
-          <FormSelect
-            label="Model"
-            value={form.model}
-            options={modelOptions}
-            placeholder="Provider default"
-            onValueChange={(value) => setForm((prev) => ({ ...prev, model: value }))}
+
+          <Controller
+            name="model"
+            control={control}
+            render={({ field }) => (
+              <FormSelect
+                {...field}
+                label="Model"
+                options={modelOptions}
+                placeholder="Provider default"
+                onValueChange={field.onChange}
+              />
+            )}
           />
-          {!isPlaygroundMode && (
-            <FormField
-              label="Temperature"
-              type="number"
-              value={form.temperature}
-              onChange={(e) => setForm((prev) => ({ ...prev, temperature: e.target.value }))}
-            />
-          )}
-          <input
-            type="range"
-            min="0"
-            max="2"
-            step="0.1"
-            value={Number(form.temperature)}
-            onChange={(e) => setForm((prev) => ({ ...prev, temperature: e.target.value }))}
-            className={`w-full ${isPlaygroundMode ? "mb-3 mt-0" : "-mt-2 mb-3"}`}
+
+          <Controller
+            name="temperature"
+            control={control}
+            render={({ field }) => (
+              <FormSlider
+                {...field}
+                label="Temperature"
+                min={0}
+                max={2}
+                step={0.1}
+                helperText="Lower values make output more deterministic"
+                error={errors.temperature?.message}
+              />
+            )}
           />
-          <FormField
-            label="Max Tokens"
-            type="number"
-            value={form.max_tokens}
-            onChange={(e) => setForm((prev) => ({ ...prev, max_tokens: e.target.value }))}
+
+          <Controller
+            name="max_tokens"
+            control={control}
+            render={({ field }) => (
+              <FormSlider
+                {...field}
+                label="Max Tokens"
+                min={1}
+                max={5000}
+                step={1}
+                helperText="Maximum response token budget for generated output."
+                error={errors.max_tokens?.message}
+              />
+            )}
           />
 
           <div className="mt-2 mb-4 flex gap-2">
diff --git a/src/pages/tenant/PromptCreate.tsx b/src/pages/tenant/PromptCreate.tsx
index 8e53af9..3f2e2b5 100644
--- a/src/pages/tenant/PromptCreate.tsx
+++ b/src/pages/tenant/PromptCreate.tsx
@@ -1,50 +1,113 @@
-import { useEffect, useMemo, useState, type ReactElement } from "react";
+import { useEffect, useState, type ReactElement } from "react";
 import { useNavigate } from "react-router-dom";
 import { Layout } from "@/components/layout/Layout";
-import { FormField, FormSelect, FormTextArea, PrimaryButton, SecondaryButton } from "@/components/shared";
+import {
+  FormField,
+  FormSelect,
+  FormTextArea,
+  PrimaryButton,
+  SecondaryButton,
+  FormSlider,
+} from "@/components/shared";
 import { Plus, Trash2 } from "lucide-react";
 import { aiService } from "@/services/ai-service";
 import { showToast } from "@/utils/toast";
+import { useForm, useFieldArray, Controller } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { cn } from "@/lib/utils";
 
-type PromptVariable = {
-  name: string;
-  type: "string" | "number" | "boolean" | "array";
-  required: boolean;
-  default: string;
-};
+const variableSchema = z.object({
+  name: z.string().min(1, "Variable name is required").max(100),
+  type: z.enum(["string", "number", "boolean", "array"]),
+  required: z.boolean(),
+  default: z.string().optional(),
+});
+
+const promptSchema = z.object({
+  name: z.string().min(1, "Name is required").max(255),
+  description: z.string().optional(),
+  use_case: z.string().min(1, "Use case is required").max(100),
+  system_message: z.string().optional(),
+  user_template: z.string().min(1, "User template is required").max(50000),
+  provider: z.string().optional(),
+  model: z.string().optional(),
+  temperature: z.number().min(0).max(2),
+  max_tokens: z.number().int().min(1).max(128000),
+  tags: z.string().optional(),
+  is_default: z.boolean(),
+  variables: z.array(variableSchema),
+});
+
+type PromptFormData = z.infer<typeof promptSchema>;
 
 const PromptCreate = (): ReactElement => {
   const navigate = useNavigate();
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-  const [providers, setProviders] = useState<Array<{ value: string; label: string }>>([]);
-  const [models, setModels] = useState<Array<{ value: string; label: string }>>([]);
+  const [providers, setProviders] = useState<
+    Array<{ value: string; label: string }>
+  >([]);
+  const [models, setModels] = useState<Array<{ value: string; label: string }>>(
+    [],
+  );
 
-  const [form, setForm] = useState({
-    name: "",
-    description: "",
-    use_case: "",
-    system_message: "",
-    user_template: "",
-    provider: "",
-    model: "",
-    temperature: "0.3",
-    max_tokens: "2048",
-    tags: "",
-    is_default: false,
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<PromptFormData>({
+    resolver: zodResolver(promptSchema),
+    defaultValues: {
+      name: "",
+      description: "",
+      use_case: "",
+      system_message: "",
+      user_template: "",
+      provider: "",
+      model: "",
+      temperature: 0.7,
+      max_tokens: 2048,
+      tags: "",
+      is_default: true,
+      variables: [
+        {
+          name: "",
+          type: "string",
+          required: false,
+          default: "",
+        },
+      ],
+    },
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "variables",
   });
-  const [variables, setVariables] = useState<PromptVariable[]>([
-    { name: "focus_areas", type: "string", required: false, default: "regulatory obligations, deadlines, action items" },
-  ]);
 
   useEffect(() => {
     const loadMeta = async (): Promise<void> => {
       try {
-        const [providerData, modelData] = await Promise.all([aiService.getProviders(), aiService.getModels()]);
-        setProviders(providerData.map((p) => ({ value: p.name, label: p.displayName || p.name })));
-        setModels(modelData.map((m) => ({ value: m.id, label: `${m.id} (${m.provider})` })));
+        const [providerData, modelData] = await Promise.all([
+          aiService.getProviders(),
+          aiService.getModels(),
+        ]);
+        setProviders(
+          providerData.map((p) => ({
+            value: p.name,
+            label: p.displayName || p.name,
+          })),
+        );
+        setModels(
+          modelData.map((m) => ({
+            value: m.id,
+            label: `${m.id} (${m.provider})`,
+          })),
+        );
       } catch (err: unknown) {
         showToast.error(
-          (err as { response?: { data?: { error?: { message?: string } } } })?.response?.data?.error?.message ||
+          (err as { response?: { data?: { error?: { message?: string } } } })
+            ?.response?.data?.error?.message ||
             "Failed to load provider metadata",
         );
       }
@@ -52,236 +115,446 @@ const PromptCreate = (): ReactElement => {
     void loadMeta();
   }, []);
 
-  const parsedTags = useMemo(
-    () =>
-      form.tags
-        .split(",")
-        .map((tag) => tag.trim())
-        .filter(Boolean),
-    [form.tags],
-  );
+  const onFormSubmit = async (data: PromptFormData): Promise<void> => {
+    const parsedTags = data.tags
+      ? data.tags
+          .split(",")
+          .map((tag) => tag.trim())
+          .filter(Boolean)
+      : [];
 
-  const addVariable = (): void => {
-    setVariables((prev) => [...prev, { name: "", type: "string", required: false, default: "" }]);
-  };
-
-  const updateVariable = (index: number, patch: Partial<PromptVariable>): void => {
-    setVariables((prev) => prev.map((item, idx) => (idx === index ? { ...item, ...patch } : item)));
-  };
-
-  const removeVariable = (index: number): void => {
-    setVariables((prev) => prev.filter((_, idx) => idx !== index));
-  };
-
-  const handleSubmit = async (): Promise<void> => {
-    if (!form.name.trim() || !form.use_case.trim() || !form.user_template.trim()) {
-      showToast.error("Name, use case, and user template are required");
-      return;
-    }
-
-    const sanitizedVariables = variables
-      .filter((v) => v.name.trim())
+    const sanitizedVariables = data.variables
+      ?.filter((v) => v.name.trim())
       .map((v) => ({
         name: v.name.trim(),
         type: v.type,
         required: v.required,
-        ...(v.default.trim() ? { default: v.default.trim() } : {}),
+        ...(v.default?.trim() ? { default: v.default.trim() } : {}),
       }));
 
     setIsSubmitting(true);
     try {
       await aiService.createPrompt({
-        name: form.name.trim(),
-        description: form.description.trim() || undefined,
-        use_case: form.use_case.trim(),
-        system_message: form.system_message.trim() || undefined,
-        user_template: form.user_template,
-        model: form.model || undefined,
-        provider: form.provider || undefined,
-        temperature: Number(form.temperature),
-        max_tokens: Number(form.max_tokens),
+        name: data.name.trim(),
+        description: data.description?.trim() || undefined,
+        use_case: data.use_case.trim(),
+        system_message: data.system_message?.trim() || undefined,
+        user_template: data.user_template,
+        model: data.model || undefined,
+        provider: data.provider || undefined,
+        temperature: data.temperature,
+        max_tokens: data.max_tokens,
         variables: sanitizedVariables,
         tags: parsedTags,
-        is_default: form.is_default,
+        is_default: data.is_default,
       });
       showToast.success("Prompt created successfully");
       navigate("/tenant/ai/prompts");
     } catch (err: unknown) {
       showToast.error(
-        (err as { response?: { data?: { error?: { message?: string } } } })?.response?.data?.error?.message ||
-          "Failed to create prompt",
+        (err as { response?: { data?: { error?: { message?: string } } } })
+          ?.response?.data?.error?.message || "Failed to create prompt",
       );
     } finally {
       setIsSubmitting(false);
     }
   };
 
+  const handleCreatePrompt = () => {
+    handleSubmit(onFormSubmit)();
+  };
+
   return (
     <Layout
       currentPage="Create Prompt"
       pageHeader={{
         title: "Create Prompt",
         description: "Create a reusable prompt template for AI workflows.",
-      }}
-    >
-      <div className="max-w-5xl mx-auto bg-white border border-[rgba(0,0,0,0.08)] rounded-lg">
-        <div className="p-5 md:p-6 space-y-5">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <FormField
-              label="Template Name"
-              required
-              value={form.name}
-              onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))}
-              placeholder="e.g., Code Review Assitant"
-              helperText="Max 255 characters. Must be unique per tenant and version"
-            />
-            <FormField
-              label="Use Case"
-              required
-              value={form.use_case}
-              onChange={(e) => setForm((prev) => ({ ...prev, use_case: e.target.value }))}
-              placeholder="doc_summary"
-            />
-          </div>
-
-          <FormTextArea
-            label="Description"
-            value={form.description}
-            onChange={(e) => setForm((prev) => ({ ...prev, description: e.target.value }))}
-            placeholder="Describe what this prompt template is used for..."
-            helperText="Optional template summary to explain the purpose and expected usage."
-          />
-
-          <FormTextArea
-            label="System Message"
-            value={form.system_message}
-            onChange={(e) => setForm((prev) => ({ ...prev, system_message: e.target.value }))}
-            placeholder="You are a regulatory compliance expert..."
-          />
-
-          <FormTextArea
-            label="User Template"
-            required
-            value={form.user_template}
-            onChange={(e) => setForm((prev) => ({ ...prev, user_template: e.target.value }))}
-            placeholder={"Summarize the following document:\n\n{{document_text}}\n\nFocus on: {{focus_areas}}"}
-          />
-
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-            <FormSelect
-              label="Provider"
-              value={form.provider}
-              onValueChange={(value) => setForm((prev) => ({ ...prev, provider: value }))}
-              options={providers}
-              placeholder="Select provider"
-            />
-            <FormSelect
-              label="Model"
-              value={form.model}
-              onValueChange={(value) => setForm((prev) => ({ ...prev, model: value }))}
-              options={models}
-              placeholder="Select model"
-            />
-            <FormField
-              label="Temperature"
-              type="number"
-              value={form.temperature}
-              onChange={(e) => setForm((prev) => ({ ...prev, temperature: e.target.value }))}
-            />
-            <FormField
-              label="Max Tokens"
-              type="number"
-              value={form.max_tokens}
-              onChange={(e) => setForm((prev) => ({ ...prev, max_tokens: e.target.value }))}
-            />
-          </div>
-
-          <FormField
-            label="Tags (comma separated)"
-            value={form.tags}
-            onChange={(e) => setForm((prev) => ({ ...prev, tags: e.target.value }))}
-            placeholder="compliance, document, summary"
-          />
-
-          <label className="inline-flex items-center gap-2 text-sm text-[#334155]">
-            <input
-              type="checkbox"
-              checked={form.is_default}
-              onChange={(e) => setForm((prev) => ({ ...prev, is_default: e.target.checked }))}
-              className="w-4 h-4"
-            />
-            Set as default prompt
-          </label>
-
-          <div className="border border-[rgba(0,0,0,0.08)] rounded-md p-4 space-y-3">
-            <div className="flex items-center justify-between">
-              <h3 className="text-sm font-semibold text-[#0f1724]">Variables</h3>
-              <button
-                type="button"
-                onClick={addVariable}
-                className="inline-flex items-center gap-1 text-xs font-medium text-[#112868]"
-              >
-                <Plus className="w-3.5 h-3.5" />
-                Add Variable
-              </button>
-            </div>
-
-            {variables.length === 0 && <p className="text-xs text-[#94a3b8]">No variables added.</p>}
-
-            {variables.map((variable, index) => (
-              <div key={index} className="grid grid-cols-1 md:grid-cols-5 gap-3 items-end">
-                <FormField
-                  label="Name"
-                  value={variable.name}
-                  onChange={(e) => updateVariable(index, { name: e.target.value })}
-                  placeholder="focus_areas"
-                />
-                <FormSelect
-                  label="Type"
-                  value={variable.type}
-                  onValueChange={(value) => updateVariable(index, { type: value as PromptVariable["type"] })}
-                  options={[
-                    { value: "string", label: "string" },
-                    { value: "number", label: "number" },
-                    { value: "boolean", label: "boolean" },
-                    { value: "array", label: "array" },
-                  ]}
-                />
-                <FormField
-                  label="Default"
-                  value={variable.default}
-                  onChange={(e) => updateVariable(index, { default: e.target.value })}
-                  placeholder="optional default"
-                />
-                <label className="inline-flex items-center gap-2 text-sm text-[#334155] h-10">
-                  <input
-                    type="checkbox"
-                    checked={variable.required}
-                    onChange={(e) => updateVariable(index, { required: e.target.checked })}
-                    className="w-4 h-4"
-                  />
-                  Required
-                </label>
-                <button
-                  type="button"
-                  onClick={() => removeVariable(index)}
-                  className="h-10 inline-flex items-center justify-center gap-1 text-xs font-medium text-[#ef4444] border border-[rgba(239,68,68,0.2)] rounded-md"
-                >
-                  <Trash2 className="w-3.5 h-3.5" />
-                  Remove
-                </button>
-              </div>
-            ))}
-          </div>
-
-          <div className="flex items-center justify-end gap-2 pt-2 border-t border-[rgba(0,0,0,0.06)]">
-            <SecondaryButton onClick={() => navigate("/tenant/ai/prompts")}>Cancel</SecondaryButton>
-            <PrimaryButton onClick={handleSubmit} disabled={isSubmitting}>
+        action: (
+          <div className="flex gap-2">
+            <SecondaryButton onClick={() => navigate("/tenant/ai/prompts")}>
+              Cancel
+            </SecondaryButton>
+            <PrimaryButton onClick={handleCreatePrompt} disabled={isSubmitting}>
               {isSubmitting ? "Creating..." : "Create Prompt"}
             </PrimaryButton>
           </div>
+        ),
+      }}
+    >
+      <form
+        onSubmit={handleSubmit(onFormSubmit)}
+        className="flex items-start gap-6"
+      >
+        {/* LEFT SIDE */}
+        <div className="flex flex-col gap-6 flex-[2]">
+          {/* General Information */}
+          <div className="bg-white border border-gray-300 rounded-lg shadow-sm p-4 space-y-4">
+            <h2 className="text-sm font-semibold text-gray-800">
+              General Information
+            </h2>
+
+            <Controller
+              name="name"
+              control={control}
+              render={({ field }) => (
+                <FormField
+                  {...field}
+                  label="Template Name"
+                  required
+                  placeholder="e.g., Code Review Assistant"
+                  helperText="Max 255 characters. Must be unique per tenant and version"
+                  error={errors.name?.message}
+                />
+              )}
+            />
+
+            <Controller
+              name="description"
+              control={control}
+              render={({ field }) => (
+                <FormTextArea
+                  {...field}
+                  label="Description"
+                  placeholder="Describe what this prompt template is used for..."
+                  helperText="Optional template summary to explain the purpose and expected usage."
+                  error={errors.description?.message}
+                />
+              )}
+            />
+          </div>
+
+          {/* Prompt Content */}
+          <div className="bg-white border border-gray-300 rounded-lg shadow-sm p-4 space-y-4">
+            <h2 className="text-sm font-semibold text-gray-800">
+              Prompt Content
+            </h2>
+
+            <Controller
+              name="system_message"
+              control={control}
+              render={({ field }) => (
+                <FormTextArea
+                  {...field}
+                  label="System Message"
+                  placeholder="You are an expert software engineer..."
+                  error={errors.system_message?.message}
+                  helperText="Optional system prompt that is added before the template content to guide assistant behavior."
+                />
+              )}
+            />
+
+            <Controller
+              name="user_template"
+              control={control}
+              render={({ field }) => (
+                <FormTextArea
+                  {...field}
+                  label="User Template"
+                  required
+                  placeholder={
+                    "Summarize the following document:\n{{document_text}}\nFocus on: {{focus_areas}}"
+                  }
+                  error={errors.user_template?.message}
+                  helperText="Use {{variable_name}} for dynamic inputs"
+                />
+              )}
+            />
+
+            {/* Variables Section */}
+            <div className="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
+              <div className="p-4 border-b border-gray-100 flex items-center justify-between">
+                <h3 className="text-sm font-semibold text-gray-800">
+                  Variables Configuration
+                </h3>
+                <PrimaryButton
+                  onClick={() =>
+                    append({
+                      name: "",
+                      type: "string",
+                      required: false,
+                      default: "",
+                    })
+                  }
+                  size="small"
+                  className="h-8 py-0"
+                >
+                  <Plus className="w-4 h-4 mr-1" />
+                  Add Variable
+                </PrimaryButton>
+              </div>
+
+              <div className="p-4">
+                {fields.length > 0 && (
+                  <div className="grid grid-cols-[1fr_120px_1fr_80px_40px] gap-4 px-2 mb-2">
+                    <span className="text-[11px] font-bold text-gray-400 uppercase tracking-wider">
+                      Variable Name
+                    </span>
+                    <span className="text-[11px] font-bold text-gray-400 uppercase tracking-wider text-center">
+                      Type
+                    </span>
+                    <span className="text-[11px] font-bold text-gray-400 uppercase tracking-wider">
+                      Default Value
+                    </span>
+                    <span className="text-[11px] font-bold text-gray-400 uppercase tracking-wider text-center">
+                      Required
+                    </span>
+                    <span></span>
+                  </div>
+                )}
+
+                {fields.length === 0 && (
+                  <div className="text-center py-8 bg-gray-50 rounded-lg border border-dashed border-gray-200">
+                    <p className="text-sm text-gray-400">
+                      No variables configured yet.
+                    </p>
+                  </div>
+                )}
+
+                <div className="space-y-3">
+                  {fields.map((field, index) => (
+                    <div
+                      key={field.id}
+                      className="grid grid-cols-[1fr_120px_1fr_80px_40px] gap-4 items-start border-b border-gray-50 pb-3 last:border-0 last:pb-0"
+                    >
+                      <Controller
+                        name={`variables.${index}.name`}
+                        control={control}
+                        render={({ field }) => (
+                          <div className="space-y-1">
+                            <input
+                              {...field}
+                              placeholder="e.g context"
+                              className={cn(
+                                "h-10 w-full px-3.5 py-1 bg-white border border-[rgba(0,0,0,0.08)] rounded-md text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#112868]/20 focus-visible:border-[#112868]",
+                                errors.variables?.[index]?.name &&
+                                  "border-red-500",
+                              )}
+                            />
+                            {errors.variables?.[index]?.name && (
+                              <p className="text-[10px] text-red-500">
+                                {errors.variables?.[index]?.name?.message}
+                              </p>
+                            )}
+                          </div>
+                        )}
+                      />
+                      <Controller
+                        name={`variables.${index}.type`}
+                        control={control}
+                        render={({ field }) => (
+                          <div className="h-10 flex flex-col justify-center">
+                            <FormSelect
+                              label=""
+                              className="pb-0"
+                              value={field.value}
+                              onValueChange={field.onChange}
+                              options={[
+                                { value: "string", label: "String" },
+                                { value: "number", label: "Number" },
+                                { value: "boolean", label: "Boolean" },
+                                { value: "array", label: "Array" },
+                              ]}
+                              error={errors.variables?.[index]?.type?.message}
+                            />
+                          </div>
+                        )}
+                      />
+                      <Controller
+                        name={`variables.${index}.default`}
+                        control={control}
+                        render={({ field }) => (
+                          <div className="space-y-1">
+                            <input
+                              {...field}
+                              placeholder="Enter default value"
+                              className={cn(
+                                "h-10 w-full px-3.5 py-1 bg-white border border-[rgba(0,0,0,0.08)] rounded-md text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#112868]/20 focus-visible:border-[#112868]",
+                                errors.variables?.[index]?.default &&
+                                  "border-red-500",
+                              )}
+                            />
+                            {errors.variables?.[index]?.default && (
+                              <p className="text-[10px] text-red-500">
+                                {errors.variables?.[index]?.default?.message}
+                              </p>
+                            )}
+                          </div>
+                        )}
+                      />
+                      <div className="h-10 flex items-center justify-center">
+                        <Controller
+                          name={`variables.${index}.required`}
+                          control={control}
+                          render={({ field }) => (
+                            <div
+                              className={cn(
+                                "w-10 h-5 rounded-full relative transition-colors duration-200 cursor-pointer",
+                                field.value ? "bg-[#084cc8]" : "bg-gray-200",
+                              )}
+                              onClick={() => field.onChange(!field.value)}
+                            >
+                              <div
+                                className={cn(
+                                  "absolute top-1 left-1 w-3 h-3 bg-white rounded-full transition-transform duration-200 shadow-sm",
+                                  field.value && "translate-x-5",
+                                )}
+                              />
+                            </div>
+                          )}
+                        />
+                      </div>
+                      <button
+                        type="button"
+                        onClick={() => remove(index)}
+                        className="h-10 flex items-center justify-center text-gray-400 hover:text-red-500 transition-colors"
+                      >
+                        <Trash2 className="w-5 h-5" />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
+
+        {/* RIGHT SIDE (Sidebar) */}
+        <div className="flex flex-col gap-6 flex-1 max-w-[320px] w-full">
+          {/* Settings */}
+          <div className="bg-white border border-gray-300 rounded-lg shadow-sm p-4 space-y-4">
+            <h2 className="text-sm font-semibold text-gray-800">Settings</h2>
+
+            <Controller
+              name="use_case"
+              control={control}
+              render={({ field }) => (
+                <FormField
+                  {...field}
+                  label="Use Case"
+                  required
+                  placeholder="e.g. document_analysis"
+                  error={errors.use_case?.message}
+                />
+              )}
+            />
+
+            <div className="space-y-2 pt-2">
+              <label className="text-[13px] font-semibold text-[#0e1b2a]">Is Default</label>
+              <div className="flex items-center gap-3">
+                <Controller
+                  name="is_default"
+                  control={control}
+                  render={({ field }) => (
+                    <div
+                      className={cn(
+                        "w-10 h-5 rounded-full relative transition-colors duration-200 cursor-pointer",
+                        field.value ? "bg-[#112868]" : "bg-gray-200",
+                      )}
+                      onClick={() => field.onChange(!field.value)}
+                    >
+                      <div
+                        className={cn(
+                          "absolute top-1 left-1 w-3 h-3 rounded-full transition-transform duration-200 shadow-sm",
+                          field.value ? "translate-x-5 bg-[#00cfd5]" : "bg-white",
+                        )}
+                      />
+                    </div>
+                  )}
+                />
+                <span className="text-[13px] text-gray-500 font-medium">Make default for this use case</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Model Config */}
+          <div className="bg-white border border-gray-300 rounded-lg shadow-sm p-4 space-y-2">
+            <h2 className="text-sm font-semibold text-gray-800 mb-2">
+              Model Configuration
+            </h2>
+
+            <Controller
+              name="provider"
+              control={control}
+              render={({ field }) => (
+                <FormSelect
+                  label="Provider"
+                  value={field.value || ""}
+                  onValueChange={field.onChange}
+                  options={providers}
+                  error={errors.provider?.message}
+                />
+              )}
+            />
+
+            <Controller
+              name="model"
+              control={control}
+              render={({ field }) => (
+                <FormSelect
+                  label="Model"
+                  value={field.value || ""}
+                  onValueChange={field.onChange}
+                  options={models}
+                  error={errors.model?.message}
+                />
+              )}
+            />
+
+            <Controller
+              name="temperature"
+              control={control}
+              render={({ field }) => (
+                <FormSlider
+                  {...field}
+                  label="Temperature"
+                  min={0}
+                  max={2}
+                  step={0.1}
+                  helperText="Lower values make output more deterministic"
+                  error={errors.temperature?.message}
+                />
+              )}
+            />
+
+            <Controller
+              name="max_tokens"
+              control={control}
+              render={({ field }) => (
+                <FormSlider
+                  {...field}
+                  label="Max Tokens"
+                  min={1}
+                  max={5000}
+                  step={1}
+                  helperText="Maximum response token budget for generated output."
+                  error={errors.max_tokens?.message}
+                />
+              )}
+            />
+          </div>
+
+          {/* Organization */}
+          <div className="bg-white border border-gray-300 rounded-lg shadow-sm p-4 space-y-4">
+            <h2 className="text-sm font-semibold text-gray-800">
+              Organization
+            </h2>
+            <Controller
+              name="tags"
+              control={control}
+              render={({ field }) => (
+                <FormField
+                  {...field}
+                  label="Tags"
+                  placeholder="e.g. analysis, legal, code"
+                  helperText="Comma separated values"
+                  error={errors.tags?.message}
+                />
+              )}
+            />
+          </div>
+        </div>
+      </form>
     </Layout>
   );
 };
diff --git a/src/pages/tenant/PromptEdit.tsx b/src/pages/tenant/PromptEdit.tsx
new file mode 100644
index 0000000..98e523d
--- /dev/null
+++ b/src/pages/tenant/PromptEdit.tsx
@@ -0,0 +1,625 @@
+import { useEffect, useState, type ReactElement } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { Layout } from "@/components/layout/Layout";
+import {
+  FormField,
+  FormSelect,
+  FormTextArea,
+  PrimaryButton,
+  SecondaryButton,
+  FormSlider,
+} from "@/components/shared";
+import { Plus, Trash2, ArrowLeft } from "lucide-react";
+import { aiService } from "@/services/ai-service";
+import { showToast } from "@/utils/toast";
+import { useForm, useFieldArray, Controller } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { cn } from "@/lib/utils";
+
+const variableSchema = z.object({
+  name: z.string().min(1, "Variable name is required").max(100),
+  type: z.enum(["string", "number", "boolean", "array"]),
+  required: z.boolean(),
+  default: z.string().optional(),
+});
+
+const promptSchema = z.object({
+  name: z.string().min(1, "Name is required").max(255),
+  description: z.string().optional(),
+  use_case: z.string().min(1, "Use case is required").max(100),
+  system_message: z.string().optional(),
+  user_template: z.string().min(1, "User template is required").max(50000),
+  provider: z.string().optional(),
+  model: z.string().optional(),
+  temperature: z.number().min(0).max(2),
+  max_tokens: z.number().int().min(1).max(128000),
+  tags: z.string().optional(),
+  is_default: z.boolean(),
+  variables: z.array(variableSchema),
+  change_notes: z.string().optional(),
+});
+
+type PromptFormData = z.infer<typeof promptSchema>;
+
+const PromptEdit = (): ReactElement => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const [providers, setProviders] = useState<
+    Array<{ value: string; label: string }>
+  >([]);
+  const [models, setModels] = useState<Array<{ value: string; label: string }>>(
+    [],
+  );
+  const [currentVersion, setCurrentVersion] = useState<number>(1);
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<PromptFormData>({
+    resolver: zodResolver(promptSchema),
+    defaultValues: {
+      name: "",
+      description: "",
+      use_case: "",
+      system_message: "",
+      user_template: "",
+      provider: "",
+      model: "",
+      temperature: 0.7,
+      max_tokens: 2048,
+      tags: "",
+      is_default: false,
+      variables: [],
+      change_notes: "",
+    },
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "variables",
+  });
+
+  useEffect(() => {
+    const loadData = async (): Promise<void> => {
+      if (!id) return;
+      try {
+        setIsLoading(true);
+        const [providerData, modelData, promptData] = await Promise.all([
+          aiService.getProviders(),
+          aiService.getModels(),
+          aiService.getPrompt(id),
+        ]);
+
+        setProviders(
+          providerData.map((p) => ({
+            value: p.name,
+            label: p.displayName || p.name,
+          })),
+        );
+        setModels(
+          modelData.map((m) => ({
+            value: m.id,
+            label: `${m.id} (${m.provider})`,
+          })),
+        );
+
+        reset({
+          name: promptData.name,
+          description: promptData.description || "",
+          use_case: promptData.useCase,
+          system_message: promptData.systemMessage || "",
+          user_template: promptData.template,
+          provider: promptData.defaultParameters?.provider || "",
+          model: promptData.defaultParameters?.model || "",
+          temperature: promptData.defaultParameters?.temperature ?? 0.7,
+          max_tokens: promptData.defaultParameters?.max_tokens ?? 2048,
+          tags: (promptData.tags || []).join(", "),
+          is_default: promptData.isDefault || false,
+          variables: (promptData.variables || []).map((v) => ({
+            name: v.name,
+            type: v.type || "string",
+            required: !!v.required,
+            default: v.default ? String(v.default) : "",
+          })),
+          change_notes: "",
+        });
+        setCurrentVersion(promptData.version || 1);
+      } catch (err: unknown) {
+        showToast.error(
+          (err as { response?: { data?: { error?: { message?: string } } } })
+            ?.response?.data?.error?.message ||
+            "Failed to load prompt data",
+        );
+        navigate("/tenant/ai/prompts");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    void loadData();
+  }, [id, reset, navigate]);
+
+  const onFormSubmit = async (data: PromptFormData): Promise<void> => {
+    if (!id) return;
+    const parsedTags = data.tags
+      ? data.tags
+          .split(",")
+          .map((tag) => tag.trim())
+          .filter(Boolean)
+      : [];
+
+    const sanitizedVariables = data.variables
+      ?.filter((v) => v.name.trim())
+      .map((v) => ({
+        name: v.name.trim(),
+        type: v.type,
+        required: v.required,
+        ...(v.default?.trim() ? { default: v.default.trim() } : {}),
+      }));
+
+    setIsSubmitting(true);
+    try {
+      await aiService.updatePrompt(id, {
+        name: data.name.trim(),
+        description: data.description?.trim() || undefined,
+        use_case: data.use_case.trim(),
+        system_message: data.system_message?.trim() || undefined,
+        user_template: data.user_template,
+        model: data.model || undefined,
+        provider: data.provider || undefined,
+        temperature: data.temperature,
+        max_tokens: data.max_tokens,
+        variables: sanitizedVariables,
+        tags: parsedTags,
+        is_default: data.is_default,
+        change_notes: data.change_notes,
+      });
+      showToast.success("Prompt updated successfully");
+      navigate("/tenant/ai/prompts");
+    } catch (err: unknown) {
+      showToast.error(
+        (err as { response?: { data?: { error?: { message?: string } } } })
+          ?.response?.data?.error?.message || "Failed to update prompt",
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <Layout currentPage="Edit Prompt">
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="flex flex-col items-center gap-3">
+            <div className="w-10 h-10 border-4 border-gray-200 border-t-[#112868] rounded-full animate-spin"></div>
+            <p className="text-sm text-gray-500">Loading prompt details...</p>
+          </div>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout
+      currentPage="Edit Prompt"
+      pageHeader={{
+        title: "Edit Prompt",
+        description: "Modify prompt template and configuration settings.",
+        action: (
+          <div className="flex gap-2">
+            <SecondaryButton onClick={() => navigate("/tenant/ai/prompts")}>
+              Cancel
+            </SecondaryButton>
+            <PrimaryButton onClick={handleSubmit(onFormSubmit)} disabled={isSubmitting}>
+              {isSubmitting ? "Updating..." : "Update Prompt"}
+            </PrimaryButton>
+          </div>
+        ),
+      }}
+    >
+      <div className="mb-4">
+        <button
+          onClick={() => navigate("/tenant/ai/prompts")}
+          className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-900 transition-colors"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          Back to list
+        </button>
+      </div>
+
+      <form
+        onSubmit={handleSubmit(onFormSubmit)}
+        className="flex items-start gap-6"
+      >
+        {/* LEFT SIDE */}
+        <div className="flex flex-col gap-6 flex-[2]">
+          {/* General Information */}
+          <div className="bg-white border border-gray-300 rounded-lg shadow-sm p-4 space-y-4">
+            <h2 className="text-sm font-semibold text-gray-800">
+              General Information
+            </h2>
+
+            <Controller
+              name="name"
+              control={control}
+              render={({ field }) => (
+                <FormField
+                  {...field}
+                  label="Template Name"
+                  required
+                  placeholder="e.g., Code Review Assistant"
+                  helperText="Max 255 characters. Must be unique per tenant and version"
+                  error={errors.name?.message}
+                />
+              )}
+            />
+
+            <Controller
+              name="description"
+              control={control}
+              render={({ field }) => (
+                <FormTextArea
+                  {...field}
+                  label="Description"
+                  placeholder="Describe what this prompt template is used for..."
+                  helperText="Optional template summary to explain the purpose and expected usage."
+                  error={errors.description?.message}
+                />
+              )}
+            />
+          </div>
+
+          {/* Prompt Content */}
+          <div className="bg-white border border-gray-300 rounded-lg shadow-sm p-4 space-y-4">
+            <h2 className="text-sm font-semibold text-gray-800">
+              Prompt Content
+            </h2>
+
+            <Controller
+              name="system_message"
+              control={control}
+              render={({ field }) => (
+                <FormTextArea
+                  {...field}
+                  label="System Message"
+                  placeholder="You are an expert software engineer..."
+                  error={errors.system_message?.message}
+                  helperText="Optional system prompt that is added before the template content to guide assistant behavior."
+                />
+              )}
+            />
+
+            <Controller
+              name="user_template"
+              control={control}
+              render={({ field }) => (
+                <FormTextArea
+                  {...field}
+                  label="User Template"
+                  required
+                  placeholder={
+                    "Summarize the following document:\n{{document_text}}\nFocus on: {{focus_areas}}"
+                  }
+                  error={errors.user_template?.message}
+                  helperText={
+                    <>
+                      Use <code className="text-[#112868] font-bold">{"{{variable_name}}"}</code> for dynamic inputs.
+                      <p className="mt-1.5 text-amber-600 font-medium flex items-center gap-1.5">
+                        <span className="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse" />
+                        Updating this template will create a new version (v{currentVersion + 1})
+                      </p>
+                    </>
+                  }
+                />
+              )}
+            />
+
+            <Controller
+              name="change_notes"
+              control={control}
+              render={({ field }) => (
+                <FormTextArea
+                  {...field}
+                  label="Change Notes"
+                  placeholder="e.g. Optimized the system message for better accuracy, added new variables..."
+                  helperText="Describe what changed in this version. This will be visible in the version history."
+                  error={errors.change_notes?.message}
+                />
+              )}
+            />
+
+            {/* Variables Section */}
+            <div className="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
+              <div className="p-4 border-b border-gray-100 flex items-center justify-between">
+                <h3 className="text-sm font-semibold text-gray-800">
+                  Variables Configuration
+                </h3>
+                <PrimaryButton
+                  onClick={() =>
+                    append({
+                      name: "",
+                      type: "string",
+                      required: false,
+                      default: "",
+                    })
+                  }
+                  size="small"
+                  className="h-8 py-0"
+                >
+                  <Plus className="w-4 h-4 mr-1" />
+                  Add Variable
+                </PrimaryButton>
+              </div>
+
+              <div className="p-4">
+                {fields.length > 0 && (
+                  <div className="grid grid-cols-[1fr_120px_1fr_80px_40px] gap-4 px-2 mb-2">
+                    <span className="text-[11px] font-bold text-gray-400 uppercase tracking-wider">
+                      Variable Name
+                    </span>
+                    <span className="text-[11px] font-bold text-gray-400 uppercase tracking-wider text-center">
+                      Type
+                    </span>
+                    <span className="text-[11px] font-bold text-gray-400 uppercase tracking-wider">
+                      Default Value
+                    </span>
+                    <span className="text-[11px] font-bold text-gray-400 uppercase tracking-wider text-center">
+                      Required
+                    </span>
+                    <span></span>
+                  </div>
+                )}
+
+                <div className="space-y-3">
+                  {fields.map((field, index) => (
+                    <div
+                      key={field.id}
+                      className="grid grid-cols-[1fr_120px_1fr_80px_40px] gap-4 items-start border-b border-gray-50 pb-3 last:border-0 last:pb-0"
+                    >
+                      <Controller
+                        name={`variables.${index}.name`}
+                        control={control}
+                        render={({ field }) => (
+                          <div className="space-y-1">
+                            <input
+                              {...field}
+                              placeholder="e.g context"
+                              className={cn(
+                                "h-10 w-full px-3.5 py-1 bg-white border border-[rgba(0,0,0,0.08)] rounded-md text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#112868]/20 focus-visible:border-[#112868]",
+                                errors.variables?.[index]?.name &&
+                                  "border-red-500",
+                              )}
+                            />
+                            {errors.variables?.[index]?.name && (
+                              <p className="text-[10px] text-red-500">
+                                {errors.variables?.[index]?.name?.message}
+                              </p>
+                            )}
+                          </div>
+                        )}
+                      />
+                      <Controller
+                        name={`variables.${index}.type`}
+                        control={control}
+                        render={({ field }) => (
+                          <div className="h-10 flex flex-col justify-center">
+                            <FormSelect
+                              label=""
+                              className="pb-0"
+                              value={field.value}
+                              onValueChange={field.onChange}
+                              options={[
+                                { value: "string", label: "String" },
+                                { value: "number", label: "Number" },
+                                { value: "boolean", label: "Boolean" },
+                                { value: "array", label: "Array" },
+                              ]}
+                              error={errors.variables?.[index]?.type?.message}
+                            />
+                          </div>
+                        )}
+                      />
+                      <Controller
+                        name={`variables.${index}.default`}
+                        control={control}
+                        render={({ field }) => (
+                          <div className="space-y-1">
+                            <input
+                              {...field}
+                              placeholder="Enter default value"
+                              className={cn(
+                                "h-10 w-full px-3.5 py-1 bg-white border border-[rgba(0,0,0,0.08)] rounded-md text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#112868]/20 focus-visible:border-[#112868]",
+                                errors.variables?.[index]?.default &&
+                                  "border-red-500",
+                              )}
+                            />
+                            {errors.variables?.[index]?.default && (
+                              <p className="text-[10px] text-red-500">
+                                {errors.variables?.[index]?.default?.message}
+                              </p>
+                            )}
+                          </div>
+                        )}
+                      />
+                      <div className="h-10 flex items-center justify-center">
+                        <Controller
+                          name={`variables.${index}.required`}
+                          control={control}
+                          render={({ field }) => (
+                            <div
+                              className={cn(
+                                "w-10 h-5 rounded-full relative transition-colors duration-200 cursor-pointer",
+                                field.value ? "bg-[#084cc8]" : "bg-gray-200",
+                              )}
+                              onClick={() => field.onChange(!field.value)}
+                            >
+                              <div
+                                className={cn(
+                                  "absolute top-1 left-1 w-3 h-3 bg-white rounded-full transition-transform duration-200 shadow-sm",
+                                  field.value && "translate-x-5",
+                                )}
+                              />
+                            </div>
+                          )}
+                        />
+                      </div>
+                      <button
+                        type="button"
+                        onClick={() => remove(index)}
+                        className="h-10 flex items-center justify-center text-gray-400 hover:text-red-500 transition-colors"
+                      >
+                        <Trash2 className="w-5 h-5" />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* RIGHT SIDE (Sidebar) */}
+        <div className="flex flex-col gap-6 flex-1 max-w-[320px] w-full">
+          {/* Settings */}
+          <div className="bg-white border border-gray-300 rounded-lg shadow-sm p-4 space-y-4">
+            <h2 className="text-sm font-semibold text-gray-800">Settings</h2>
+
+            <Controller
+              name="use_case"
+              control={control}
+              render={({ field }) => (
+                <FormField
+                  {...field}
+                  label="Use Case"
+                  required
+                  placeholder="e.g. document_analysis"
+                  error={errors.use_case?.message}
+                />
+              )}
+            />
+
+            <div className="space-y-2 pt-2">
+              <label className="text-[13px] font-semibold text-[#0e1b2a]">Is Default</label>
+              <div className="flex items-center gap-3">
+                <Controller
+                  name="is_default"
+                  control={control}
+                  render={({ field }) => (
+                    <div
+                      className={cn(
+                        "w-10 h-5 rounded-full relative transition-colors duration-200 cursor-pointer",
+                        field.value ? "bg-[#112868]" : "bg-gray-200",
+                      )}
+                      onClick={() => field.onChange(!field.value)}
+                    >
+                      <div
+                        className={cn(
+                          "absolute top-1 left-1 w-3 h-3 rounded-full transition-transform duration-200 shadow-sm",
+                          field.value ? "translate-x-5 bg-[#00cfd5]" : "bg-white",
+                        )}
+                      />
+                    </div>
+                  )}
+                />
+                <span className="text-[13px] text-gray-500 font-medium">Make default for this use case</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Model Config */}
+          <div className="bg-white border border-gray-300 rounded-lg shadow-sm p-4 space-y-2">
+            <h2 className="text-sm font-semibold text-gray-800 mb-2">
+              Model Configuration
+            </h2>
+
+            <Controller
+              name="provider"
+              control={control}
+              render={({ field }) => (
+                <FormSelect
+                  label="Provider"
+                  value={field.value || ""}
+                  onValueChange={field.onChange}
+                  options={providers}
+                  error={errors.provider?.message}
+                />
+              )}
+            />
+
+            <Controller
+              name="model"
+              control={control}
+              render={({ field }) => (
+                <FormSelect
+                  label="Model"
+                  value={field.value || ""}
+                  onValueChange={field.onChange}
+                  options={models}
+                  error={errors.model?.message}
+                />
+              )}
+            />
+
+            <Controller
+              name="temperature"
+              control={control}
+              render={({ field }) => (
+                <FormSlider
+                  {...field}
+                  label="Temperature"
+                  min={0}
+                  max={2}
+                  step={0.1}
+                  helperText="Lower values make output more deterministic"
+                  error={errors.temperature?.message}
+                />
+              )}
+            />
+
+            <Controller
+              name="max_tokens"
+              control={control}
+              render={({ field }) => (
+                <FormSlider
+                  {...field}
+                  label="Max Tokens"
+                  min={1}
+                  max={5000}
+                  step={1}
+                  helperText="Maximum response token budget."
+                  error={errors.max_tokens?.message}
+                />
+              )}
+            />
+          </div>
+
+          {/* Organization */}
+          <div className="bg-white border border-gray-300 rounded-lg shadow-sm p-4 space-y-4">
+            <h2 className="text-sm font-semibold text-gray-800">
+              Organization
+            </h2>
+            <Controller
+              name="tags"
+              control={control}
+              render={({ field }) => (
+                <FormField
+                  {...field}
+                  label="Tags"
+                  placeholder="e.g. analysis, legal, code"
+                  helperText="Comma separated values"
+                  error={errors.tags?.message}
+                />
+              )}
+            />
+          </div>
+        </div>
+      </form>
+    </Layout>
+  );
+};
+
+export default PromptEdit;
diff --git a/src/pages/tenant/PromptManagement.tsx b/src/pages/tenant/PromptManagement.tsx
index ce9399c..81c5a56 100644
--- a/src/pages/tenant/PromptManagement.tsx
+++ b/src/pages/tenant/PromptManagement.tsx
@@ -1,16 +1,23 @@
 import { useEffect, useMemo, useState, type ReactElement } from "react";
 import { useNavigate } from "react-router-dom";
-import { Plus, Search } from "lucide-react";
+import { Plus, Search, Copy, History, Trash2, Edit3 } from "lucide-react";
 import { Layout } from "@/components/layout/Layout";
-import { DataTable, type Column, Pagination, PrimaryButton, StatusBadge } from "@/components/shared";
+import {
+  DataTable,
+  type Column,
+  Pagination,
+  PrimaryButton,
+  ActionDropdown,
+  DeleteConfirmationModal,
+} from "@/components/shared";
 import { aiService } from "@/services/ai-service";
 import type { AIPrompt } from "@/types/ai";
 import { showToast } from "@/utils/toast";
 import { formatDate } from "@/utils/format-date";
-import { useAppTheme } from "@/hooks/useAppTheme";
+import { PromptVersionsModal } from "@/components/tenant/PromptVersionsModal";
+import { cn } from "@/lib/utils";
 
 const PromptManagement = (): ReactElement => {
-  const { primaryColor } = useAppTheme();
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
@@ -26,6 +33,12 @@ const PromptManagement = (): ReactElement => {
     totalPages: 1,
   });
 
+  // Modal states
+  const [selectedPrompt, setSelectedPrompt] = useState<AIPrompt | null>(null);
+  const [isVersionsOpen, setIsVersionsOpen] = useState(false);
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+  const [isActionLoading, setIsActionLoading] = useState(false);
+
   useEffect(() => {
     const timer = setTimeout(() => {
       setDebouncedSearch(search);
@@ -52,8 +65,8 @@ const PromptManagement = (): ReactElement => {
       });
     } catch (err: unknown) {
       const message =
-        (err as { response?: { data?: { error?: { message?: string } } } })?.response?.data?.error?.message ||
-        "Failed to load prompts";
+        (err as { response?: { data?: { error?: { message?: string } } } })
+          ?.response?.data?.error?.message || "Failed to load prompts";
       setError(message);
       showToast.error(message);
     } finally {
@@ -65,6 +78,42 @@ const PromptManagement = (): ReactElement => {
     void loadPrompts();
   }, [page, limit, debouncedSearch]);
 
+  const handleStatusToggle = async (prompt: AIPrompt) => {
+    const newStatus = prompt.status === "active" ? "draft" : "active";
+    try {
+      await aiService.updatePromptStatus(prompt.id, newStatus);
+      showToast.success(`Prompt marked as ${newStatus}`);
+      void loadPrompts();
+    } catch (err: any) {
+      showToast.error("Failed to update status");
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!selectedPrompt) return;
+    setIsActionLoading(true);
+    try {
+      await aiService.deletePrompt(selectedPrompt.id);
+      showToast.success("Prompt deleted successfully");
+      setIsDeleteOpen(false);
+      void loadPrompts();
+    } catch (err: any) {
+      showToast.error("Failed to delete prompt");
+    } finally {
+      setIsActionLoading(false);
+    }
+  };
+
+  const handleClone = async (prompt: AIPrompt) => {
+    try {
+      await aiService.clonePrompt(prompt.id); // Assuming this exists or I'll add it
+      showToast.success("Prompt cloned successfully");
+      void loadPrompts();
+    } catch (err: any) {
+      showToast.error("Failed to clone prompt");
+    }
+  };
+
   const columns: Column<AIPrompt>[] = useMemo(
     () => [
       {
@@ -72,20 +121,24 @@ const PromptManagement = (): ReactElement => {
         label: "Name & Description",
         render: (row) => (
           <div className="min-w-0">
-            <p className="text-sm font-semibold text-[#0f1724] truncate">{row.name}</p>
-            <p className="text-xs text-[#64748b] truncate">{row.description || "No description"}</p>
+            <p className="text-sm font-semibold text-[#112868] hover:underline cursor-pointer" onClick={() => navigate(`/tenant/ai/prompts/${row.id}/edit`)}>
+              {row.name}
+            </p>
+            <p className="text-xs text-[#64748b] truncate max-w-[280px]">
+              {row.description || "No description"}
+            </p>
           </div>
         ),
       },
       {
-        key: "use_case",
+        key: "useCase",
         label: "Use Case",
         render: (row) => {
-          const useCase = (row as any).useCase || row.use_case;
-          if (!useCase) return <span className="text-sm text-[#94a3b8]">—</span>;
+          if (!row.useCase)
+            return <span className="text-sm text-[#94a3b8]">—</span>;
           return (
-            <span className="inline-flex items-center rounded-full border border-[#084cc8] bg-white px-3 py-1 text-xs font-medium text-[#084cc8]">
-              {String(useCase)}
+            <span className="inline-flex items-center rounded-full border border-[#e2e8f0] bg-[#f8fafc] px-2.5 py-0.5 text-[11px] font-medium text-[#1e293b]">
+              {row.useCase}
             </span>
           );
         },
@@ -94,9 +147,37 @@ const PromptManagement = (): ReactElement => {
         key: "status",
         label: "Status",
         render: (row) => (
-          <StatusBadge variant={((row as any).status || "draft") === "active" ? "success" : "process"}>
-            {(row as any).status || "draft"}
-          </StatusBadge>
+          <div className="flex items-center gap-3">
+            <div
+              className={cn(
+                "w-9 h-[18px] rounded-full relative transition-colors duration-200 cursor-pointer shadow-inner",
+                row.status === "active" ? "bg-[#112868]" : "bg-gray-200",
+              )}
+              onClick={() => handleStatusToggle(row)}
+            >
+              <div
+                className={cn(
+                  "absolute top-[2px] left-[2px] w-3.5 h-3.5 rounded-full transition-transform duration-200 shadow-sm",
+                  row.status === "active" ? "translate-x-[18px] bg-[#00cfd5]" : "bg-white",
+                )}
+              />
+            </div>
+            <span className={cn(
+              "text-[11px] font-medium uppercase tracking-wider",
+              row.status === "active" ? "text-green-600" : "text-gray-400"
+            )}>
+              {row.status || "draft"}
+            </span>
+          </div>
+        ),
+      },
+      {
+        key: "version",
+        label: "Version",
+        render: (row) => (
+          <span className="text-xs font-semibold px-2 py-0.5 rounded bg-blue-50 text-blue-600 border border-blue-100">
+            v{row.version || 1}
+          </span>
         ),
       },
       {
@@ -104,38 +185,79 @@ const PromptManagement = (): ReactElement => {
         label: "Tags",
         render: (row) => {
           const tags = ((row as any).tags || []) as string[];
-      
+
           if (!tags.length) {
             return <span className="text-xs text-[#94a3b8]">—</span>;
           }
-      
+
           return (
             <div className="flex flex-wrap gap-1">
-              {tags.map((tag, index) => (
+              {tags.slice(0, 2).map((tag, index) => (
                 <span
                   key={index}
-                  className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium"
-                  style={{
-                    backgroundColor: `${primaryColor}1A`,
-                    color: primaryColor,
-                  }}
+                  className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium bg-gray-100 text-gray-600"
                 >
                   {tag}
                 </span>
               ))}
+              {tags.length > 2 && (
+                <span className="text-[10px] text-gray-400 font-medium">+{tags.length - 2}</span>
+              )}
             </div>
           );
         },
       },
       {
-        key: "Created At",
-        label: "Created At",
+        key: "Updated",
+        label: "Last Updated",
         render: (row) => (
-          <span className="text-xs text-[#334155]">{formatDate((row as any).createdAt || "")}</span>
+          <span className="text-xs text-[#64748b]">
+            {formatDate(row.updatedAt || row.createdAt || "")}
+          </span>
+        ),
+      },
+      {
+        key: "actions",
+        label: "",
+        align: "right",
+        render: (row) => (
+          <div className="flex justify-end pr-2">
+            <ActionDropdown
+              actions={[
+                {
+                  icon: <Edit3 className="w-3.5 h-3.5 shrink-0" />,
+                  label: "Edit Prompt",
+                  onClick: () => navigate(`/tenant/ai/prompts/${row.id}/edit`),
+                },
+                {
+                  icon: <History className="w-3.5 h-3.5 shrink-0" />,
+                  label: "Version History",
+                  onClick: () => {
+                    setSelectedPrompt(row);
+                    setIsVersionsOpen(true);
+                  },
+                },
+                {
+                  icon: <Copy className="w-3.5 h-3.5 shrink-0" />,
+                  label: "Clone Prompt",
+                  onClick: () => handleClone(row),
+                },
+                {
+                  icon: <Trash2 className="w-3.5 h-3.5 shrink-0" />,
+                  label: "Delete Prompt",
+                  variant: "danger",
+                  onClick: () => {
+                    setSelectedPrompt(row);
+                    setIsDeleteOpen(true);
+                  },
+                },
+              ]}
+            />
+          </div>
         ),
       },
     ],
-    [],
+    [navigate, loadPrompts],
   );
 
   return (
@@ -145,23 +267,26 @@ const PromptManagement = (): ReactElement => {
         title: "Prompt Management",
         description: "Manage reusable AI prompts and versioned templates.",
         action: (
-          <PrimaryButton onClick={() => navigate("/tenant/ai/prompts/create")} className="flex items-center gap-2">
+          <PrimaryButton
+            onClick={() => navigate("/tenant/ai/prompts/create")}
+            className="flex items-center gap-2 h-10 shadow-sm"
+          >
             <Plus className="w-4 h-4" />
             Create Prompt
           </PrimaryButton>
         ),
       }}
     >
-      <div className="bg-white border border-[rgba(0,0,0,0.08)] rounded-lg overflow-hidden">
-        <div className="p-4 border-b border-[rgba(0,0,0,0.08)]">
+      <div className="bg-white border border-[rgba(0,0,0,0.08)] rounded-xl shadow-sm overflow-hidden">
+        <div className="p-4 border-b border-[rgba(0,0,0,0.06)] bg-gray-50/50">
           <div className="relative w-full md:w-80">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[#94a3b8]" />
             <input
               type="text"
               value={search}
               onChange={(e) => setSearch(e.target.value)}
-              placeholder="Search prompts by name or use case..."
-              className="w-full pl-9 pr-4 py-2 border border-[rgba(0,0,0,0.08)] rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[#112868]/10 focus:border-[#112868]"
+              placeholder="Search prompts..."
+              className="w-full pl-9 pr-4 py-2 bg-white border border-[rgba(0,0,0,0.08)] rounded-lg text-sm transition-all focus:outline-none focus:ring-2 focus:ring-[#112868]/10 focus:border-[#112868]"
             />
           </div>
         </div>
@@ -172,11 +297,11 @@ const PromptManagement = (): ReactElement => {
           keyExtractor={(item) => item.id}
           isLoading={isLoading}
           error={error}
-          emptyMessage="No prompts found"
+          emptyMessage="No prompts found. Click 'Create Prompt' to get started."
         />
 
         {pagination.total > 0 && (
-          <div className="border-t border-[rgba(0,0,0,0.08)] px-4 py-3">
+          <div className="border-t border-[rgba(0,0,0,0.08)] px-5 py-4 bg-gray-50/30">
             <Pagination
               currentPage={pagination.page}
               totalPages={pagination.totalPages}
@@ -191,6 +316,23 @@ const PromptManagement = (): ReactElement => {
           </div>
         )}
       </div>
+
+      <PromptVersionsModal
+        isOpen={isVersionsOpen}
+        onClose={() => setIsVersionsOpen(false)}
+        prompt={selectedPrompt}
+        onRollbackSuccess={loadPrompts}
+      />
+
+      <DeleteConfirmationModal
+        isOpen={isDeleteOpen}
+        onClose={() => setIsDeleteOpen(false)}
+        onConfirm={handleDelete}
+        isLoading={isActionLoading}
+        title="Delete Prompt"
+        message="Are you sure you want to delete this prompt"
+        itemName={selectedPrompt?.name}
+      />
     </Layout>
   );
 };
diff --git a/src/routes/tenant-admin-routes.tsx b/src/routes/tenant-admin-routes.tsx
index 1b961db..9691417 100644
--- a/src/routes/tenant-admin-routes.tsx
+++ b/src/routes/tenant-admin-routes.tsx
@@ -42,6 +42,7 @@ const CompletionCreate = lazy(() => import("@/pages/tenant/CompletionCreate"));
 const CompletionDetail = lazy(() => import("@/pages/tenant/CompletionDetail"));
 const PromptManagement = lazy(() => import("@/pages/tenant/PromptManagement"));
 const PromptCreate = lazy(() => import("@/pages/tenant/PromptCreate"));
+const PromptEdit = lazy(() => import("@/pages/tenant/PromptEdit"));
 
 // Loading fallback component
 const RouteLoader = (): ReactElement => (
@@ -200,6 +201,10 @@ export const tenantAdminRoutes: RouteConfig[] = [
     path: "/tenant/ai/prompts/create",
     element: <LazyRoute component={PromptCreate} />,
   },
+  {
+    path: "/tenant/ai/prompts/:id/edit",
+    element: <LazyRoute component={PromptEdit} />,
+  },
   {
     path: "/tenant/ai/knowledge",
     element: <LazyRoute component={AIGateway} />,
diff --git a/src/services/ai-service.ts b/src/services/ai-service.ts
index 7d88a51..d9ccf15 100644
--- a/src/services/ai-service.ts
+++ b/src/services/ai-service.ts
@@ -140,6 +140,35 @@ class AIService {
     return unwrap<AIPrompt>(response);
   }
 
+  async getPrompt(id: string): Promise<AIPrompt> {
+    const response = await apiClient.get(`/ai/prompts/${id}`);
+    return unwrap<AIPrompt>(response);
+  }
+
+  async updatePrompt(id: string, payload: {
+    name: string;
+    description?: string;
+    use_case: string;
+    system_message?: string;
+    user_template: string;
+    provider?: string;
+    model?: string;
+    temperature?: number;
+    max_tokens?: number;
+    variables?: Array<{ name: string; type?: "string" | "number" | "boolean" | "array"; required?: boolean }>;
+    tags?: string[];
+    is_default?: boolean;
+    change_notes?: string;
+  }): Promise<AIPrompt> {
+    const response = await apiClient.put(`/ai/prompts/${id}`, payload);
+    return unwrap<AIPrompt>(response);
+  }
+
+  async clonePrompt(id: string): Promise<AIPrompt> {
+    const response = await apiClient.post(`/ai/prompts/${id}/clone`);
+    return unwrap<AIPrompt>(response);
+  }
+
   async listPrompts(params: { page?: number; limit?: number; status?: string; search?: string } = {}): Promise<{
     data: AIPrompt[];
     pagination?: { page: number; limit: number; total: number; totalPages: number };
@@ -156,6 +185,25 @@ class AIService {
     return unwrap<AIPrompt>(response);
   }
 
+  async deletePrompt(id: string): Promise<void> {
+    await apiClient.delete(`/ai/prompts/${id}`);
+  }
+
+  async getVersions(id: string): Promise<AIPrompt[]> {
+    const response = await apiClient.get(`/ai/prompts/${id}/versions`);
+    return unwrap<AIPrompt[]>(response);
+  }
+
+  async getVersion(id: string, version: number): Promise<AIPrompt> {
+    const response = await apiClient.get(`/ai/prompts/${id}/versions/${version}`);
+    return unwrap<AIPrompt>(response);
+  }
+
+  async rollback(id: string, version: number): Promise<AIPrompt> {
+    const response = await apiClient.post(`/ai/prompts/${id}/rollback`, { version });
+    return unwrap<AIPrompt>(response);
+  }
+
   async executePrompt(
     id: string,
     payload: { variables?: Record<string, unknown>; provider?: string; model?: string; temperature?: number; max_tokens?: number },
diff --git a/src/types/ai.ts b/src/types/ai.ts
index 9d9730b..a8396b5 100644
--- a/src/types/ai.ts
+++ b/src/types/ai.ts
@@ -104,19 +104,26 @@ export interface AIPrompt {
   id: string;
   name: string;
   description?: string;
-  use_case: string;
-  system_message?: string;
-  user_template: string;
+  useCase: string;
+  systemMessage?: string;
+  template: string;
   status?: "draft" | "active" | "archived" | "deprecated";
-  provider?: string;
-  model?: string;
-  temperature?: number;
-  max_tokens?: number;
+  defaultParameters?: {
+    provider?: string;
+    model?: string;
+    temperature?: number;
+    max_tokens?: number;
+  };
   variables?: PromptVariable[];
   tags?: string[];
+  isDefault?: boolean;
   version?: number;
+  change_notes?: string;
   created_at?: string;
   updated_at?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  created_by_email?:string;
 }
 
 export interface KnowledgeCollection {