diff --git a/ui/litellm-dashboard/src/components/claude_code_plugins/add_plugin_form.tsx b/ui/litellm-dashboard/src/components/claude_code_plugins/add_plugin_form.tsx
new file mode 100644
index 00000000000..217851f128f
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/claude_code_plugins/add_plugin_form.tsx
@@ -0,0 +1,328 @@
+import React, { useState } from "react";
+import { Modal, Form, Input, Select, message } from "antd";
+import { Button } from "@tremor/react";
+import { registerClaudeCodePlugin } from "../networking";
+import {
+  validatePluginName,
+  isValidSemanticVersion,
+  isValidEmail,
+  isValidUrl,
+  parseKeywords,
+} from "./helpers";
+
+const { TextArea } = Input;
+const { Option } = Select;
+
+interface AddPluginFormProps {
+  visible: boolean;
+  onClose: () => void;
+  accessToken: string | null;
+  onSuccess: () => void;
+}
+
+const PREDEFINED_CATEGORIES = [
+  "Development",
+  "Productivity",
+  "Learning",
+  "Security",
+  "Data & Analytics",
+  "Integration",
+  "Testing",
+  "Documentation",
+];
+
+const AddPluginForm: React.FC<AddPluginFormProps> = ({
+  visible,
+  onClose,
+  accessToken,
+  onSuccess,
+}) => {
+  const [form] = Form.useForm();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [sourceType, setSourceType] = useState<"github" | "url">("github");
+
+  const handleSubmit = async (values: any) => {
+    if (!accessToken) {
+      message.error("No access token available");
+      return;
+    }
+
+    // Validate plugin name
+    if (!validatePluginName(values.name)) {
+      message.error(
+        "Plugin name must be kebab-case (lowercase letters, numbers, and hyphens only)"
+      );
+      return;
+    }
+
+    // Validate semantic version if provided
+    if (values.version && !isValidSemanticVersion(values.version)) {
+      message.error(
+        "Version must be in semantic versioning format (e.g., 1.0.0)"
+      );
+      return;
+    }
+
+    // Validate email if provided
+    if (values.authorEmail && !isValidEmail(values.authorEmail)) {
+      message.error("Invalid email format");
+      return;
+    }
+
+    // Validate homepage URL if provided
+    if (values.homepage && !isValidUrl(values.homepage)) {
+      message.error("Invalid homepage URL format");
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      // Build plugin data
+      const pluginData: any = {
+        name: values.name.trim(),
+        source:
+          sourceType === "github"
+            ? {
+                source: "github",
+                repo: values.repo.trim(),
+              }
+            : {
+                source: "url",
+                url: values.url.trim(),
+              },
+      };
+
+      // Add optional fields
+      if (values.version) {
+        pluginData.version = values.version.trim();
+      }
+      if (values.description) {
+        pluginData.description = values.description.trim();
+      }
+      if (values.authorName || values.authorEmail) {
+        pluginData.author = {};
+        if (values.authorName) {
+          pluginData.author.name = values.authorName.trim();
+        }
+        if (values.authorEmail) {
+          pluginData.author.email = values.authorEmail.trim();
+        }
+      }
+      if (values.homepage) {
+        pluginData.homepage = values.homepage.trim();
+      }
+      if (values.category) {
+        pluginData.category = values.category;
+      }
+      if (values.keywords) {
+        pluginData.keywords = parseKeywords(values.keywords);
+      }
+
+      await registerClaudeCodePlugin(accessToken, pluginData);
+      message.success("Plugin registered successfully");
+      form.resetFields();
+      setSourceType("github");
+      onSuccess();
+      onClose();
+    } catch (error) {
+      console.error("Error registering plugin:", error);
+      message.error("Failed to register plugin");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleCancel = () => {
+    form.resetFields();
+    setSourceType("github");
+    onClose();
+  };
+
+  const handleSourceTypeChange = (value: "github" | "url") => {
+    setSourceType(value);
+    // Clear repo/url fields when switching
+    form.setFieldsValue({ repo: undefined, url: undefined });
+  };
+
+  return (
+    <Modal
+      title="Add New Claude Code Plugin"
+      open={visible}
+      onCancel={handleCancel}
+      footer={null}
+      width={700}
+      className="top-8"
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        onFinish={handleSubmit}
+        className="mt-4"
+      >
+        {/* Plugin Name */}
+        <Form.Item
+          label="Plugin Name"
+          name="name"
+          rules={[
+            { required: true, message: "Please enter plugin name" },
+            {
+              pattern: /^[a-z0-9-]+$/,
+              message:
+                "Name must be kebab-case (lowercase, numbers, hyphens only)",
+            },
+          ]}
+          tooltip="Unique identifier in kebab-case format (e.g., my-awesome-plugin)"
+        >
+          <Input placeholder="my-awesome-plugin" className="rounded-lg" />
+        </Form.Item>
+
+        {/* Source Type */}
+        <Form.Item
+          label="Source Type"
+          name="sourceType"
+          initialValue="github"
+          rules={[{ required: true, message: "Please select source type" }]}
+        >
+          <Select onChange={handleSourceTypeChange} className="rounded-lg">
+            <Option value="github">GitHub</Option>
+            <Option value="url">URL</Option>
+          </Select>
+        </Form.Item>
+
+        {/* GitHub Repository */}
+        {sourceType === "github" && (
+          <Form.Item
+            label="GitHub Repository"
+            name="repo"
+            rules={[
+              { required: true, message: "Please enter repository" },
+              {
+                pattern: /^[a-zA-Z0-9_-]+\/[a-zA-Z0-9_-]+$/,
+                message: "Repository must be in format: org/repo",
+              },
+            ]}
+            tooltip="Format: organization/repository (e.g., anthropics/claude-code)"
+          >
+            <Input placeholder="anthropics/claude-code" className="rounded-lg" />
+          </Form.Item>
+        )}
+
+        {/* Git URL */}
+        {sourceType === "url" && (
+          <Form.Item
+            label="Git URL"
+            name="url"
+            rules={[{ required: true, message: "Please enter git URL" }]}
+            tooltip="Full git URL to the repository"
+          >
+            <Input
+              type="url"
+              placeholder="https://github.com/org/repo.git"
+              className="rounded-lg"
+            />
+          </Form.Item>
+        )}
+
+        {/* Version */}
+        <Form.Item
+          label="Version (Optional)"
+          name="version"
+          tooltip="Semantic version (e.g., 1.0.0)"
+        >
+          <Input placeholder="1.0.0" className="rounded-lg" />
+        </Form.Item>
+
+        {/* Description */}
+        <Form.Item
+          label="Description (Optional)"
+          name="description"
+          tooltip="Brief description of what the plugin does"
+        >
+          <TextArea
+            rows={3}
+            placeholder="A plugin that helps with..."
+            maxLength={500}
+            className="rounded-lg"
+          />
+        </Form.Item>
+
+        {/* Category */}
+        <Form.Item
+          label="Category (Optional)"
+          name="category"
+          tooltip="Select a category or enter a custom one"
+        >
+          <Select
+            placeholder="Select or type a category"
+            allowClear
+            showSearch
+            optionFilterProp="children"
+            className="rounded-lg"
+          >
+            {PREDEFINED_CATEGORIES.map((cat) => (
+              <Option key={cat} value={cat}>
+                {cat}
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
+
+        {/* Keywords */}
+        <Form.Item
+          label="Keywords (Optional)"
+          name="keywords"
+          tooltip="Comma-separated list of keywords for search"
+        >
+          <Input placeholder="search, web, api" className="rounded-lg" />
+        </Form.Item>
+
+        {/* Author Name */}
+        <Form.Item
+          label="Author Name (Optional)"
+          name="authorName"
+          tooltip="Name of the plugin author or organization"
+        >
+          <Input placeholder="Your Name or Organization" className="rounded-lg" />
+        </Form.Item>
+
+        {/* Author Email */}
+        <Form.Item
+          label="Author Email (Optional)"
+          name="authorEmail"
+          rules={[{ type: "email", message: "Please enter a valid email" }]}
+          tooltip="Contact email for the plugin author"
+        >
+          <Input type="email" placeholder="author@example.com" className="rounded-lg" />
+        </Form.Item>
+
+        {/* Homepage */}
+        <Form.Item
+          label="Homepage (Optional)"
+          name="homepage"
+          rules={[{ type: "url", message: "Please enter a valid URL" }]}
+          tooltip="URL to the plugin's homepage or documentation"
+        >
+          <Input type="url" placeholder="https://example.com" className="rounded-lg" />
+        </Form.Item>
+
+        {/* Submit Buttons */}
+        <Form.Item className="mb-0 mt-6">
+          <div className="flex justify-end gap-2">
+            <Button
+              variant="secondary"
+              onClick={handleCancel}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" loading={isSubmitting}>
+              {isSubmitting ? "Registering..." : "Register Plugin"}
+            </Button>
+          </div>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default AddPluginForm;
diff --git a/ui/litellm-dashboard/src/components/claude_code_plugins/helpers.ts b/ui/litellm-dashboard/src/components/claude_code_plugins/helpers.ts
new file mode 100644
index 00000000000..397825828b3
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/claude_code_plugins/helpers.ts
@@ -0,0 +1,264 @@
+/**
+ * Helper utilities for Claude Code Marketplace
+ */
+
+import { PluginSource, MarketplacePluginEntry } from "./types";
+
+/**
+ * Generate install command for Claude Code CLI
+ * Format: /plugin marketplace add org/repo OR /plugin marketplace add url
+ */
+export const formatInstallCommand = (plugin: {
+  name: string;
+  source: PluginSource;
+}): string => {
+  if (plugin.source.source === "github" && plugin.source.repo) {
+    return `/plugin marketplace add ${plugin.source.repo}`;
+  } else if (plugin.source.source === "url" && plugin.source.url) {
+    return `/plugin marketplace add ${plugin.source.url}`;
+  }
+  // Fallback to plugin name
+  return `/plugin marketplace add ${plugin.name}`;
+};
+
+/**
+ * Extract unique categories from plugins list
+ * Returns array with "All" first, then sorted categories, then "Other"
+ */
+export const extractCategories = (
+  plugins: Array<{ category?: string }>
+): string[] => {
+  const categories = new Set<string>();
+
+  plugins.forEach((p) => {
+    if (p.category && p.category.trim() !== "") {
+      categories.add(p.category);
+    }
+  });
+
+  const sortedCategories = Array.from(categories).sort();
+
+  // Return: All, sorted categories, Other
+  return ["All", ...sortedCategories, "Other"];
+};
+
+/**
+ * Validate plugin name format (kebab-case)
+ * Must be lowercase letters, numbers, and hyphens only
+ */
+export const validatePluginName = (name: string): boolean => {
+  if (!name || name.trim() === "") {
+    return false;
+  }
+  // Regex: lowercase letters, numbers, hyphens
+  return /^[a-z0-9-]+$/.test(name);
+};
+
+/**
+ * Get human-readable source display text
+ */
+export const getSourceDisplayText = (source: PluginSource): string => {
+  if (source.source === "github" && source.repo) {
+    return `GitHub: ${source.repo}`;
+  } else if (source.source === "url" && source.url) {
+    return source.url;
+  }
+  return "Unknown source";
+};
+
+/**
+ * Get clickable link for plugin source
+ */
+export const getSourceLink = (source: PluginSource): string | null => {
+  if (source.source === "github" && source.repo) {
+    return `https://github.com/${source.repo}`;
+  } else if (source.source === "url" && source.url) {
+    return source.url;
+  }
+  return null;
+};
+
+/**
+ * Get badge color based on category
+ */
+export const getCategoryBadgeColor = (
+  category?: string
+): "blue" | "green" | "purple" | "red" | "orange" | "yellow" | "gray" => {
+  if (!category) {
+    return "gray";
+  }
+
+  const categoryLower = category.toLowerCase();
+
+  if (categoryLower.includes("development") || categoryLower.includes("dev")) {
+    return "blue";
+  } else if (
+    categoryLower.includes("productivity") ||
+    categoryLower.includes("workflow")
+  ) {
+    return "green";
+  } else if (
+    categoryLower.includes("learning") ||
+    categoryLower.includes("education")
+  ) {
+    return "purple";
+  } else if (
+    categoryLower.includes("security") ||
+    categoryLower.includes("safety")
+  ) {
+    return "red";
+  } else if (
+    categoryLower.includes("data") ||
+    categoryLower.includes("analytics")
+  ) {
+    return "orange";
+  } else if (
+    categoryLower.includes("integration") ||
+    categoryLower.includes("api")
+  ) {
+    return "yellow";
+  }
+
+  return "gray";
+};
+
+/**
+ * Format date to readable string
+ */
+export const formatDateString = (dateString?: string): string => {
+  if (!dateString) {
+    return "N/A";
+  }
+
+  try {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+  } catch (error) {
+    return "Invalid date";
+  }
+};
+
+/**
+ * Truncate text with ellipsis
+ */
+export const truncateText = (text: string, maxLength: number): string => {
+  if (!text || text.length <= maxLength) {
+    return text;
+  }
+  return text.substring(0, maxLength) + "...";
+};
+
+/**
+ * Filter plugins by search term
+ * Searches in: name, description, keywords
+ */
+export const filterPluginsBySearch = (
+  plugins: MarketplacePluginEntry[],
+  searchTerm: string
+): MarketplacePluginEntry[] => {
+  if (!searchTerm || searchTerm.trim() === "") {
+    return plugins;
+  }
+
+  const term = searchTerm.toLowerCase().trim();
+
+  return plugins.filter((plugin) => {
+    const nameMatch = plugin.name.toLowerCase().includes(term);
+    const descriptionMatch =
+      plugin.description?.toLowerCase().includes(term) || false;
+    const keywordsMatch =
+      plugin.keywords?.some((keyword) =>
+        keyword.toLowerCase().includes(term)
+      ) || false;
+
+    return nameMatch || descriptionMatch || keywordsMatch;
+  });
+};
+
+/**
+ * Filter plugins by category
+ */
+export const filterPluginsByCategory = (
+  plugins: MarketplacePluginEntry[],
+  category: string
+): MarketplacePluginEntry[] => {
+  if (category === "All") {
+    return plugins;
+  }
+
+  if (category === "Other") {
+    return plugins.filter((p) => !p.category || p.category.trim() === "");
+  }
+
+  return plugins.filter((p) => p.category === category);
+};
+
+/**
+ * Validate semantic version format (basic check)
+ */
+export const isValidSemanticVersion = (version?: string): boolean => {
+  if (!version) {
+    return true; // Version is optional
+  }
+
+  // Basic semver check: X.Y.Z
+  const semverRegex = /^\d+\.\d+\.\d+(-[a-zA-Z0-9.-]+)?(\+[a-zA-Z0-9.-]+)?$/;
+  return semverRegex.test(version);
+};
+
+/**
+ * Validate email format
+ */
+export const isValidEmail = (email?: string): boolean => {
+  if (!email) {
+    return true; // Email is optional
+  }
+
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+};
+
+/**
+ * Validate URL format
+ */
+export const isValidUrl = (url?: string): boolean => {
+  if (!url) {
+    return true; // URL is optional
+  }
+
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * Parse keywords from comma-separated string
+ */
+export const parseKeywords = (keywordsString: string): string[] => {
+  if (!keywordsString || keywordsString.trim() === "") {
+    return [];
+  }
+
+  return keywordsString
+    .split(",")
+    .map((kw) => kw.trim())
+    .filter((kw) => kw !== "");
+};
+
+/**
+ * Format keywords array to comma-separated string
+ */
+export const formatKeywords = (keywords?: string[]): string => {
+  if (!keywords || keywords.length === 0) {
+    return "";
+  }
+
+  return keywords.join(", ");
+};
diff --git a/ui/litellm-dashboard/src/components/claude_code_plugins/plugin_info.tsx b/ui/litellm-dashboard/src/components/claude_code_plugins/plugin_info.tsx
new file mode 100644
index 00000000000..a4eb4352e16
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/claude_code_plugins/plugin_info.tsx
@@ -0,0 +1,350 @@
+import React, { useState, useEffect } from "react";
+import {
+  Card,
+  Title,
+  Text,
+  Button,
+  Badge,
+  Grid,
+} from "@tremor/react";
+import { Spin, Switch, Tooltip, Descriptions } from "antd";
+import { ArrowLeftIcon, ExternalLinkIcon } from "@heroicons/react/outline";
+import { CopyOutlined } from "@ant-design/icons";
+import {
+  getClaudeCodePluginDetails,
+  enableClaudeCodePlugin,
+  disableClaudeCodePlugin,
+} from "../networking";
+import NotificationsManager from "../molecules/notifications_manager";
+import { Plugin } from "./types";
+import {
+  formatInstallCommand,
+  getSourceDisplayText,
+  getSourceLink,
+  getCategoryBadgeColor,
+  formatDateString,
+  formatKeywords,
+} from "./helpers";
+
+interface PluginInfoViewProps {
+  pluginId: string;
+  onClose: () => void;
+  accessToken: string | null;
+  isAdmin: boolean;
+  onPluginUpdated: () => void;
+}
+
+const PluginInfoView: React.FC<PluginInfoViewProps> = ({
+  pluginId,
+  onClose,
+  accessToken,
+  isAdmin,
+  onPluginUpdated,
+}) => {
+  const [plugin, setPlugin] = useState<Plugin | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isToggling, setIsToggling] = useState(false);
+
+  useEffect(() => {
+    fetchPluginInfo();
+  }, [pluginId, accessToken]);
+
+  const fetchPluginInfo = async () => {
+    if (!accessToken) return;
+
+    setIsLoading(true);
+    try {
+      // The backend expects plugin name, not ID
+      // We'll need to find the plugin by ID from the list
+      // For now, assume pluginId is actually the plugin name
+      const data = await getClaudeCodePluginDetails(
+        accessToken,
+        pluginId as string
+      );
+      setPlugin(data.plugin);
+    } catch (error) {
+      console.error("Error fetching plugin info:", error);
+      NotificationsManager.error("Failed to load plugin information");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleToggleEnabled = async () => {
+    if (!accessToken || !plugin) return;
+
+    setIsToggling(true);
+    try {
+      if (plugin.enabled) {
+        await disableClaudeCodePlugin(accessToken, plugin.name);
+        NotificationsManager.success(`Plugin "${plugin.name}" disabled`);
+      } else {
+        await enableClaudeCodePlugin(accessToken, plugin.name);
+        NotificationsManager.success(`Plugin "${plugin.name}" enabled`);
+      }
+      onPluginUpdated();
+      fetchPluginInfo();
+    } catch (error) {
+      NotificationsManager.error("Failed to toggle plugin status");
+    } finally {
+      setIsToggling(false);
+    }
+  };
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+    NotificationsManager.success("Copied to clipboard!");
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <Spin size="large" />
+      </div>
+    );
+  }
+
+  if (!plugin) {
+    return (
+      <div className="p-8 text-center text-gray-500">
+        <p>Plugin not found</p>
+        <Button className="mt-4" onClick={onClose}>
+          Go Back
+        </Button>
+      </div>
+    );
+  }
+
+  const installCommand = formatInstallCommand(plugin);
+  const sourceLink = getSourceLink(plugin.source);
+  const categoryBadgeColor = getCategoryBadgeColor(plugin.category);
+
+  return (
+    <div className="space-y-4">
+      {/* Header with Back Button */}
+      <div className="flex items-center gap-3 mb-6">
+        <ArrowLeftIcon
+          className="h-5 w-5 cursor-pointer text-gray-500 hover:text-gray-700"
+          onClick={onClose}
+        />
+        <h2 className="text-2xl font-bold">{plugin.name}</h2>
+        {plugin.version && (
+          <Badge color="blue" size="xs">
+            v{plugin.version}
+          </Badge>
+        )}
+        {plugin.category && (
+          <Badge color={categoryBadgeColor} size="xs">
+            {plugin.category}
+          </Badge>
+        )}
+        <Badge color={plugin.enabled ? "green" : "gray"} size="xs">
+          {plugin.enabled ? "Enabled" : "Disabled"}
+        </Badge>
+      </div>
+
+      {/* Install Command */}
+      <Card>
+        <div className="flex items-center justify-between">
+          <div className="flex-1">
+            <Text className="text-gray-600 text-xs mb-2">Install Command</Text>
+            <div className="font-mono bg-gray-100 px-3 py-2 rounded text-sm">
+              {installCommand}
+            </div>
+          </div>
+          <Tooltip title="Copy install command">
+            <Button
+              size="xs"
+              variant="secondary"
+              icon={CopyOutlined}
+              onClick={() => copyToClipboard(installCommand)}
+              className="ml-4"
+            >
+              Copy
+            </Button>
+          </Tooltip>
+        </div>
+      </Card>
+
+      {/* Plugin Details */}
+      <Card>
+        <Title>Plugin Details</Title>
+        <Grid numColsSm={2} numColsLg={3} className="gap-6 mt-4">
+          {/* Plugin ID */}
+          <div>
+            <Text className="text-gray-600 text-xs">Plugin ID</Text>
+            <div className="flex items-center gap-2 mt-1">
+              <Text className="font-mono text-xs">{plugin.id}</Text>
+              <CopyOutlined
+                className="cursor-pointer text-gray-500 hover:text-blue-500 text-xs"
+                onClick={() => copyToClipboard(plugin.id)}
+              />
+            </div>
+          </div>
+
+          {/* Name */}
+          <div>
+            <Text className="text-gray-600 text-xs">Name</Text>
+            <Text className="font-semibold mt-1">{plugin.name}</Text>
+          </div>
+
+          {/* Version */}
+          <div>
+            <Text className="text-gray-600 text-xs">Version</Text>
+            <Text className="font-semibold mt-1">
+              {plugin.version || "N/A"}
+            </Text>
+          </div>
+
+          {/* Source */}
+          <div className="col-span-2">
+            <Text className="text-gray-600 text-xs">Source</Text>
+            <div className="flex items-center gap-2 mt-1">
+              <Text className="font-semibold">
+                {getSourceDisplayText(plugin.source)}
+              </Text>
+              {sourceLink && (
+                <a
+                  href={sourceLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-500 hover:text-blue-700"
+                >
+                  <ExternalLinkIcon className="h-4 w-4" />
+                </a>
+              )}
+            </div>
+          </div>
+
+          {/* Category */}
+          <div>
+            <Text className="text-gray-600 text-xs">Category</Text>
+            <div className="mt-1">
+              {plugin.category ? (
+                <Badge color={categoryBadgeColor} size="xs">
+                  {plugin.category}
+                </Badge>
+              ) : (
+                <Text className="text-gray-400">Uncategorized</Text>
+              )}
+            </div>
+          </div>
+
+          {/* Enabled Status */}
+          {isAdmin && (
+            <div className="col-span-3">
+              <Text className="text-gray-600 text-xs">Status</Text>
+              <div className="flex items-center gap-3 mt-2">
+                <Switch
+                  checked={plugin.enabled}
+                  loading={isToggling}
+                  onChange={handleToggleEnabled}
+                />
+                <Text className="text-sm">
+                  {plugin.enabled
+                    ? "Plugin is enabled and visible in marketplace"
+                    : "Plugin is disabled and hidden from marketplace"}
+                </Text>
+              </div>
+            </div>
+          )}
+        </Grid>
+      </Card>
+
+      {/* Description */}
+      {plugin.description && (
+        <Card>
+          <Title>Description</Title>
+          <Text className="mt-2">{plugin.description}</Text>
+        </Card>
+      )}
+
+      {/* Keywords */}
+      {plugin.keywords && plugin.keywords.length > 0 && (
+        <Card>
+          <Title>Keywords</Title>
+          <div className="flex flex-wrap gap-2 mt-2">
+            {plugin.keywords.map((keyword, index) => (
+              <Badge key={index} color="gray" size="xs">
+                {keyword}
+              </Badge>
+            ))}
+          </div>
+        </Card>
+      )}
+
+      {/* Author Information */}
+      {plugin.author && (
+        <Card>
+          <Title>Author Information</Title>
+          <Grid numColsSm={2} className="gap-4 mt-4">
+            {plugin.author.name && (
+              <div>
+                <Text className="text-gray-600 text-xs">Name</Text>
+                <Text className="font-semibold mt-1">
+                  {plugin.author.name}
+                </Text>
+              </div>
+            )}
+            {plugin.author.email && (
+              <div>
+                <Text className="text-gray-600 text-xs">Email</Text>
+                <Text className="font-semibold mt-1">
+                  <a
+                    href={`mailto:${plugin.author.email}`}
+                    className="text-blue-500 hover:text-blue-700"
+                  >
+                    {plugin.author.email}
+                  </a>
+                </Text>
+              </div>
+            )}
+          </Grid>
+        </Card>
+      )}
+
+      {/* Additional Links */}
+      {plugin.homepage && (
+        <Card>
+          <Title>Homepage</Title>
+          <a
+            href={plugin.homepage}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-500 hover:text-blue-700 flex items-center gap-2 mt-2"
+          >
+            {plugin.homepage}
+            <ExternalLinkIcon className="h-4 w-4" />
+          </a>
+        </Card>
+      )}
+
+      {/* Timestamps */}
+      <Card>
+        <Title>Metadata</Title>
+        <Grid numColsSm={2} className="gap-4 mt-4">
+          <div>
+            <Text className="text-gray-600 text-xs">Created At</Text>
+            <Text className="font-semibold mt-1">
+              {formatDateString(plugin.created_at)}
+            </Text>
+          </div>
+          <div>
+            <Text className="text-gray-600 text-xs">Updated At</Text>
+            <Text className="font-semibold mt-1">
+              {formatDateString(plugin.updated_at)}
+            </Text>
+          </div>
+          {plugin.created_by && (
+            <div className="col-span-2">
+              <Text className="text-gray-600 text-xs">Created By</Text>
+              <Text className="font-semibold mt-1">{plugin.created_by}</Text>
+            </div>
+          )}
+        </Grid>
+      </Card>
+    </div>
+  );
+};
+
+export default PluginInfoView;
diff --git a/ui/litellm-dashboard/src/components/claude_code_plugins/plugin_table.tsx b/ui/litellm-dashboard/src/components/claude_code_plugins/plugin_table.tsx
new file mode 100644
index 00000000000..df9fb9303c2
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/claude_code_plugins/plugin_table.tsx
@@ -0,0 +1,351 @@
+import React, { useState } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  Button,
+  Badge,
+} from "@tremor/react";
+import {
+  SwitchVerticalIcon,
+  ChevronUpIcon,
+  ChevronDownIcon,
+  TrashIcon,
+} from "@heroicons/react/outline";
+import { Tooltip, Switch } from "antd";
+import { CopyOutlined } from "@ant-design/icons";
+import { Plugin } from "./types";
+import {
+  getCategoryBadgeColor,
+  formatDateString,
+} from "./helpers";
+import {
+  enableClaudeCodePlugin,
+  disableClaudeCodePlugin,
+} from "../networking";
+import NotificationsManager from "../molecules/notifications_manager";
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+
+interface PluginTableProps {
+  pluginsList: Plugin[];
+  isLoading: boolean;
+  onDeleteClick: (pluginName: string, displayName: string) => void;
+  accessToken: string | null;
+  onPluginUpdated: () => void;
+  isAdmin: boolean;
+  onPluginClick: (pluginId: string) => void;
+}
+
+const PluginTable: React.FC<PluginTableProps> = ({
+  pluginsList,
+  isLoading,
+  onDeleteClick,
+  accessToken,
+  onPluginUpdated,
+  isAdmin,
+  onPluginClick,
+}) => {
+  const [sorting, setSorting] = useState<SortingState>([
+    { id: "created_at", desc: true },
+  ]);
+  const [togglingPlugin, setTogglingPlugin] = useState<string | null>(null);
+
+  const formatDate = (dateString?: string) => {
+    if (!dateString) return "-";
+    const date = new Date(dateString);
+    return date.toLocaleString();
+  };
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+    NotificationsManager.success("Copied to clipboard!");
+  };
+
+  const handleToggleEnabled = async (plugin: Plugin) => {
+    if (!accessToken) return;
+
+    setTogglingPlugin(plugin.id);
+    try {
+      if (plugin.enabled) {
+        await disableClaudeCodePlugin(accessToken, plugin.name);
+        NotificationsManager.success(`Plugin "${plugin.name}" disabled`);
+      } else {
+        await enableClaudeCodePlugin(accessToken, plugin.name);
+        NotificationsManager.success(`Plugin "${plugin.name}" enabled`);
+      }
+      onPluginUpdated();
+    } catch (error) {
+      NotificationsManager.error("Failed to toggle plugin status");
+    } finally {
+      setTogglingPlugin(null);
+    }
+  };
+
+  const columns: ColumnDef<Plugin>[] = [
+    {
+      header: "Plugin Name",
+      accessorKey: "name",
+      cell: ({ row }) => {
+        const plugin = row.original;
+        const name = plugin.name || "";
+        return (
+          <div className="flex items-center gap-2">
+            <Tooltip title={name}>
+              <Button
+                size="xs"
+                variant="light"
+                className="font-mono text-blue-500 bg-blue-50 hover:bg-blue-100 text-xs font-normal px-2 py-0.5 text-left overflow-hidden truncate min-w-[150px] justify-start"
+                onClick={() => onPluginClick(plugin.id)}
+              >
+                {name}
+              </Button>
+            </Tooltip>
+            <Tooltip title="Copy Plugin ID">
+              <CopyOutlined
+                onClick={(e) => {
+                  e.stopPropagation();
+                  copyToClipboard(plugin.id);
+                }}
+                className="cursor-pointer text-gray-500 hover:text-blue-500 text-xs"
+              />
+            </Tooltip>
+          </div>
+        );
+      },
+    },
+    {
+      header: "Version",
+      accessorKey: "version",
+      cell: ({ row }) => {
+        const version = row.original.version || "N/A";
+        return <span className="text-xs text-gray-600">{version}</span>;
+      },
+    },
+    {
+      header: "Description",
+      accessorKey: "description",
+      cell: ({ row }) => {
+        const description = row.original.description || "No description";
+        return (
+          <Tooltip title={description}>
+            <span className="text-xs text-gray-600 block max-w-[300px] truncate">
+              {description}
+            </span>
+          </Tooltip>
+        );
+      },
+    },
+    {
+      header: "Category",
+      accessorKey: "category",
+      cell: ({ row }) => {
+        const category = row.original.category;
+        if (!category) {
+          return (
+            <Badge color="gray" className="text-xs font-normal" size="xs">
+              Uncategorized
+            </Badge>
+          );
+        }
+        const badgeColor = getCategoryBadgeColor(category);
+        return (
+          <Badge color={badgeColor} className="text-xs font-normal" size="xs">
+            {category}
+          </Badge>
+        );
+      },
+    },
+    {
+      header: "Enabled",
+      accessorKey: "enabled",
+      cell: ({ row }) => {
+        const plugin = row.original;
+        return (
+          <div className="flex items-center gap-2">
+            <Badge
+              color={plugin.enabled ? "green" : "gray"}
+              className="text-xs font-normal"
+              size="xs"
+            >
+              {plugin.enabled ? "Yes" : "No"}
+            </Badge>
+            {isAdmin && (
+              <Tooltip
+                title={plugin.enabled ? "Disable plugin" : "Enable plugin"}
+              >
+                <Switch
+                  size="small"
+                  checked={plugin.enabled}
+                  loading={togglingPlugin === plugin.id}
+                  onChange={() => handleToggleEnabled(plugin)}
+                />
+              </Tooltip>
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      header: "Created At",
+      accessorKey: "created_at",
+      cell: ({ row }) => {
+        const plugin = row.original;
+        return (
+          <Tooltip title={plugin.created_at}>
+            <span className="text-xs">{formatDate(plugin.created_at)}</span>
+          </Tooltip>
+        );
+      },
+    },
+    ...(isAdmin
+      ? [
+          {
+            header: "Actions",
+            id: "actions",
+            enableSorting: false,
+            cell: ({ row }: any) => {
+              const plugin = row.original;
+
+              return (
+                <div className="flex items-center gap-1">
+                  <Tooltip title="Delete plugin">
+                    <Button
+                      size="xs"
+                      variant="light"
+                      color="red"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDeleteClick(plugin.name, plugin.name);
+                      }}
+                      icon={TrashIcon}
+                      className="text-red-500 hover:text-red-700 hover:bg-red-50"
+                    />
+                  </Tooltip>
+                </div>
+              );
+            },
+          },
+        ]
+      : []),
+  ];
+
+  const table = useReactTable({
+    data: pluginsList,
+    columns,
+    state: {
+      sorting,
+    },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    enableSorting: true,
+  });
+
+  return (
+    <div className="rounded-lg custom-border relative">
+      <div className="overflow-x-auto">
+        <Table className="[&_td]:py-0.5 [&_th]:py-1">
+          <TableHead>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHeaderCell
+                    key={header.id}
+                    className={`py-1 h-8 ${
+                      header.id === "actions"
+                        ? "sticky right-0 bg-white shadow-[-4px_0_8px_-6px_rgba(0,0,0,0.1)]"
+                        : ""
+                    }`}
+                    onClick={
+                      header.column.getCanSort()
+                        ? header.column.getToggleSortingHandler()
+                        : undefined
+                    }
+                  >
+                    <div className="flex items-center justify-between gap-2">
+                      <div className="flex items-center">
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                      </div>
+                      {header.column.getCanSort() && (
+                        <div className="w-4">
+                          {header.column.getIsSorted() ? (
+                            {
+                              asc: (
+                                <ChevronUpIcon className="h-4 w-4 text-blue-500" />
+                              ),
+                              desc: (
+                                <ChevronDownIcon className="h-4 w-4 text-blue-500" />
+                              ),
+                            }[header.column.getIsSorted() as string]
+                          ) : (
+                            <SwitchVerticalIcon className="h-4 w-4 text-gray-400" />
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  </TableHeaderCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableHead>
+          <TableBody>
+            {isLoading ? (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-8 text-center">
+                  <div className="text-center text-gray-500">
+                    <p>Loading...</p>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ) : pluginsList && pluginsList.length > 0 ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id} className="h-8">
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell
+                      key={cell.id}
+                      className={`py-0.5 max-h-8 overflow-hidden text-ellipsis whitespace-nowrap ${
+                        cell.column.id === "actions"
+                          ? "sticky right-0 bg-white shadow-[-4px_0_8px_-6px_rgba(0,0,0,0.1)]"
+                          : ""
+                      }`}
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-8 text-center">
+                  <div className="text-center text-gray-500">
+                    <p>No plugins found. Add one to get started.</p>
+                  </div>
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+};
+
+export default PluginTable;