From 9fe16d4e29321a4b77a565028746afa04ad44827 Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Fri, 23 Jan 2026 11:28:16 -0800
Subject: [PATCH] UI fixes

---
 ui/litellm-dashboard/src/app/page.tsx         |   3 +
 .../policies/add_attachment_form.tsx          |  78 ++--
 .../components/policies/add_policy_form.tsx   |  94 ++--
 .../components/policies/attachment_table.tsx  | 348 ++++++++++-----
 .../src/components/policies/index.tsx         | 340 +++++++--------
 .../src/components/policies/policy_info.tsx   |  98 ++---
 .../src/components/policies/policy_table.tsx  | 405 ++++++++++++------
 7 files changed, 829 insertions(+), 537 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index 8ca25eb9e4c..8ac1f756f96 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -14,6 +14,7 @@ import LoadingScreen from "@/components/common_components/LoadingScreen";
 import { CostTrackingSettings } from "@/components/CostTrackingSettings";
 import GeneralSettings from "@/components/general_settings";
 import GuardrailsPanel from "@/components/guardrails";
+import PoliciesPanel from "@/components/policies";
 import { Team } from "@/components/key_team_helpers/key_list";
 import { MCPServers } from "@/components/mcp_tools";
 import ModelHubTable from "@/components/AIHub/ModelHubTable";
@@ -472,6 +473,8 @@ export default function CreateKeyPage() {
                   <BudgetPanel accessToken={accessToken} />
                 ) : page == "guardrails" ? (
                   <GuardrailsPanel accessToken={accessToken} userRole={userRole} />
+                ) : page == "policies" ? (
+                  <PoliciesPanel accessToken={accessToken} userRole={userRole} />
                 ) : page == "agents" ? (
                   <AgentsPanel accessToken={accessToken} userRole={userRole} />
                 ) : page == "prompts" ? (
diff --git a/ui/litellm-dashboard/src/components/policies/add_attachment_form.tsx b/ui/litellm-dashboard/src/components/policies/add_attachment_form.tsx
index 37428c03d77..7b302333943 100644
--- a/ui/litellm-dashboard/src/components/policies/add_attachment_form.tsx
+++ b/ui/litellm-dashboard/src/components/policies/add_attachment_form.tsx
@@ -1,15 +1,11 @@
 import React, { useState } from "react";
-import {
-  Modal,
-  Form,
-  Input,
-  Select,
-  Button,
-  Space,
-  Radio,
-  Divider,
-} from "antd";
+import { Modal, Form, Select, Radio, Divider, Typography } from "antd";
+import { Button } from "@tremor/react";
 import { Policy, PolicyAttachmentCreateRequest } from "./types";
+import { createPolicyAttachmentCall } from "../networking";
+import NotificationsManager from "../molecules/notifications_manager";
+
+const { Text } = Typography;
 
 interface AddAttachmentFormProps {
   visible: boolean;
@@ -17,7 +13,6 @@ interface AddAttachmentFormProps {
   onSuccess: () => void;
   accessToken: string | null;
   policies: Policy[];
-  onCreateAttachment: (data: PolicyAttachmentCreateRequest) => Promise<void>;
 }
 
 const AddAttachmentForm: React.FC<AddAttachmentFormProps> = ({
@@ -26,17 +21,31 @@ const AddAttachmentForm: React.FC<AddAttachmentFormProps> = ({
   onSuccess,
   accessToken,
   policies,
-  onCreateAttachment,
 }) => {
   const [form] = Form.useForm();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [scopeType, setScopeType] = useState<"global" | "specific">("global");
 
-  const handleSubmit = async (values: any) => {
-    if (!accessToken) return;
+  const resetForm = () => {
+    form.resetFields();
+    setScopeType("global");
+  };
 
-    setIsSubmitting(true);
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+
+  const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
+      await form.validateFields();
+      const values = form.getFieldsValue(true);
+
+      if (!accessToken) {
+        throw new Error("No access token available");
+      }
+
       const data: PolicyAttachmentCreateRequest = {
         policy_name: values.policy_name,
       };
@@ -55,13 +64,17 @@ const AddAttachmentForm: React.FC<AddAttachmentFormProps> = ({
         }
       }
 
-      await onCreateAttachment(data);
+      await createPolicyAttachmentCall(accessToken, data);
+      NotificationsManager.success("Attachment created successfully");
+
+      resetForm();
       onSuccess();
       onClose();
-      form.resetFields();
-      setScopeType("global");
     } catch (error) {
-      console.error("Error creating attachment:", error);
+      console.error("Failed to create attachment:", error);
+      NotificationsManager.fromBackend(
+        "Failed to create attachment: " + (error instanceof Error ? error.message : String(error))
+      );
     } finally {
       setIsSubmitting(false);
     }
@@ -76,14 +89,13 @@ const AddAttachmentForm: React.FC<AddAttachmentFormProps> = ({
     <Modal
       title="Create Policy Attachment"
       open={visible}
-      onCancel={onClose}
+      onCancel={handleClose}
       footer={null}
       width={600}
     >
       <Form
         form={form}
         layout="vertical"
-        onFinish={handleSubmit}
         initialValues={{
           scope_type: "global",
         }}
@@ -100,10 +112,13 @@ const AddAttachmentForm: React.FC<AddAttachmentFormProps> = ({
             filterOption={(input, option) =>
               (option?.label ?? "").toLowerCase().includes(input.toLowerCase())
             }
+            style={{ width: "100%" }}
           />
         </Form.Item>
 
-        <Divider orientation="left">Scope</Divider>
+        <Divider orientation="left">
+          <Text strong>Scope</Text>
+        </Divider>
 
         <Form.Item label="Scope Type">
           <Radio.Group
@@ -126,6 +141,7 @@ const AddAttachmentForm: React.FC<AddAttachmentFormProps> = ({
                 mode="tags"
                 placeholder="Enter team aliases (e.g., healthcare-team)"
                 tokenSeparators={[","]}
+                style={{ width: "100%" }}
               />
             </Form.Item>
 
@@ -138,6 +154,7 @@ const AddAttachmentForm: React.FC<AddAttachmentFormProps> = ({
                 mode="tags"
                 placeholder="Enter key aliases (e.g., dev-key-*)"
                 tokenSeparators={[","]}
+                style={{ width: "100%" }}
               />
             </Form.Item>
 
@@ -150,19 +167,20 @@ const AddAttachmentForm: React.FC<AddAttachmentFormProps> = ({
                 mode="tags"
                 placeholder="Enter model names (e.g., gpt-4, bedrock/*)"
                 tokenSeparators={[","]}
+                style={{ width: "100%" }}
               />
             </Form.Item>
           </>
         )}
 
-        <Form.Item>
-          <Space>
-            <Button onClick={onClose}>Cancel</Button>
-            <Button type="primary" htmlType="submit" loading={isSubmitting}>
-              Create Attachment
-            </Button>
-          </Space>
-        </Form.Item>
+        <div className="flex justify-end space-x-2 mt-4">
+          <Button variant="secondary" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} loading={isSubmitting}>
+            Create Attachment
+          </Button>
+        </div>
       </Form>
     </Modal>
   );
diff --git a/ui/litellm-dashboard/src/components/policies/add_policy_form.tsx b/ui/litellm-dashboard/src/components/policies/add_policy_form.tsx
index c49754bc8ef..0c14cac418b 100644
--- a/ui/litellm-dashboard/src/components/policies/add_policy_form.tsx
+++ b/ui/litellm-dashboard/src/components/policies/add_policy_form.tsx
@@ -1,20 +1,13 @@
 import React, { useState, useEffect } from "react";
-import {
-  Modal,
-  Form,
-  Input,
-  Select,
-  Button,
-  Space,
-  Typography,
-  Divider,
-} from "antd";
-import { PlusOutlined, MinusCircleOutlined } from "@ant-design/icons";
+import { Form, Select, Modal, Divider, Typography } from "antd";
+import { Button, TextInput, Textarea } from "@tremor/react";
 import { Policy, PolicyCreateRequest, PolicyUpdateRequest } from "./types";
 import { Guardrail } from "../guardrails/types";
+import { createPolicyCall, updatePolicyCall } from "../networking";
+import NotificationsManager from "../molecules/notifications_manager";
 
-const { TextArea } = Input;
 const { Text } = Typography;
+const { Option } = Select;
 
 interface AddPolicyFormProps {
   visible: boolean;
@@ -24,8 +17,6 @@ interface AddPolicyFormProps {
   editingPolicy?: Policy | null;
   existingPolicies: Policy[];
   availableGuardrails: Guardrail[];
-  onCreatePolicy: (data: PolicyCreateRequest) => Promise<void>;
-  onUpdatePolicy: (policyId: string, data: PolicyUpdateRequest) => Promise<void>;
 }
 
 const AddPolicyForm: React.FC<AddPolicyFormProps> = ({
@@ -36,8 +27,6 @@ const AddPolicyForm: React.FC<AddPolicyFormProps> = ({
   editingPolicy,
   existingPolicies,
   availableGuardrails,
-  onCreatePolicy,
-  onUpdatePolicy,
 }) => {
   const [form] = Form.useForm();
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -59,11 +48,25 @@ const AddPolicyForm: React.FC<AddPolicyFormProps> = ({
     }
   }, [visible, editingPolicy, form]);
 
-  const handleSubmit = async (values: any) => {
-    if (!accessToken) return;
+  const resetForm = () => {
+    form.resetFields();
+  };
 
-    setIsSubmitting(true);
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+
+  const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
+      await form.validateFields();
+      const values = form.getFieldsValue(true);
+
+      if (!accessToken) {
+        throw new Error("No access token available");
+      }
+
       const data: PolicyCreateRequest | PolicyUpdateRequest = {
         policy_name: values.policy_name,
         description: values.description || undefined,
@@ -76,16 +79,21 @@ const AddPolicyForm: React.FC<AddPolicyFormProps> = ({
       };
 
       if (isEditing && editingPolicy) {
-        await onUpdatePolicy(editingPolicy.policy_id, data as PolicyUpdateRequest);
+        await updatePolicyCall(accessToken, editingPolicy.policy_id, data as PolicyUpdateRequest);
+        NotificationsManager.success("Policy updated successfully");
       } else {
-        await onCreatePolicy(data as PolicyCreateRequest);
+        await createPolicyCall(accessToken, data as PolicyCreateRequest);
+        NotificationsManager.success("Policy created successfully");
       }
 
+      resetForm();
       onSuccess();
       onClose();
-      form.resetFields();
     } catch (error) {
-      console.error("Error saving policy:", error);
+      console.error("Failed to save policy:", error);
+      NotificationsManager.fromBackend(
+        "Failed to save policy: " + (error instanceof Error ? error.message : String(error))
+      );
     } finally {
       setIsSubmitting(false);
     }
@@ -107,14 +115,13 @@ const AddPolicyForm: React.FC<AddPolicyFormProps> = ({
     <Modal
       title={isEditing ? "Edit Policy" : "Create New Policy"}
       open={visible}
-      onCancel={onClose}
+      onCancel={handleClose}
       footer={null}
       width={700}
     >
       <Form
         form={form}
         layout="vertical"
-        onFinish={handleSubmit}
         initialValues={{
           guardrails_add: [],
           guardrails_remove: [],
@@ -132,20 +139,22 @@ const AddPolicyForm: React.FC<AddPolicyFormProps> = ({
             },
           ]}
         >
-          <Input
+          <TextInput
             placeholder="e.g., global-baseline, healthcare-compliance"
             disabled={isEditing}
           />
         </Form.Item>
 
         <Form.Item name="description" label="Description">
-          <TextArea
+          <Textarea
             rows={2}
             placeholder="Describe what this policy does..."
           />
         </Form.Item>
 
-        <Divider orientation="left">Inheritance</Divider>
+        <Divider orientation="left">
+          <Text strong>Inheritance</Text>
+        </Divider>
 
         <Form.Item
           name="inherit"
@@ -156,10 +165,13 @@ const AddPolicyForm: React.FC<AddPolicyFormProps> = ({
             allowClear
             placeholder="Select a parent policy (optional)"
             options={policyOptions}
+            style={{ width: "100%" }}
           />
         </Form.Item>
 
-        <Divider orientation="left">Guardrails</Divider>
+        <Divider orientation="left">
+          <Text strong>Guardrails</Text>
+        </Divider>
 
         <Form.Item
           name="guardrails_add"
@@ -171,6 +183,7 @@ const AddPolicyForm: React.FC<AddPolicyFormProps> = ({
             allowClear
             placeholder="Select guardrails to add"
             options={guardrailOptions}
+            style={{ width: "100%" }}
           />
         </Form.Item>
 
@@ -184,27 +197,30 @@ const AddPolicyForm: React.FC<AddPolicyFormProps> = ({
             allowClear
             placeholder="Select guardrails to remove (from inherited)"
             options={guardrailOptions}
+            style={{ width: "100%" }}
           />
         </Form.Item>
 
-        <Divider orientation="left">Conditions (Optional)</Divider>
+        <Divider orientation="left">
+          <Text strong>Conditions (Optional)</Text>
+        </Divider>
 
         <Form.Item
           name="model_condition"
           label="Model Condition"
           tooltip="Only apply this policy when the model matches this pattern (supports regex)"
         >
-          <Input placeholder="e.g., gpt-4.* or bedrock/claude-3" />
+          <TextInput placeholder="e.g., gpt-4.* or bedrock/claude-3" />
         </Form.Item>
 
-        <Form.Item>
-          <Space>
-            <Button onClick={onClose}>Cancel</Button>
-            <Button type="primary" htmlType="submit" loading={isSubmitting}>
-              {isEditing ? "Update Policy" : "Create Policy"}
-            </Button>
-          </Space>
-        </Form.Item>
+        <div className="flex justify-end space-x-2 mt-4">
+          <Button variant="secondary" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} loading={isSubmitting}>
+            {isEditing ? "Update Policy" : "Create Policy"}
+          </Button>
+        </div>
       </Form>
     </Modal>
   );
diff --git a/ui/litellm-dashboard/src/components/policies/attachment_table.tsx b/ui/litellm-dashboard/src/components/policies/attachment_table.tsx
index d8b357b19ec..14156bf1285 100644
--- a/ui/litellm-dashboard/src/components/policies/attachment_table.tsx
+++ b/ui/litellm-dashboard/src/components/policies/attachment_table.tsx
@@ -1,10 +1,17 @@
-import React from "react";
-import { Table, Tag, Button, Space, Tooltip, Typography } from "antd";
-import { DeleteOutlined } from "@ant-design/icons";
+import React, { useState } from "react";
+import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Icon, Badge } from "@tremor/react";
+import { TrashIcon, SwitchVerticalIcon, ChevronUpIcon, ChevronDownIcon } from "@heroicons/react/outline";
+import { Tooltip, Tag } from "antd";
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
 import { PolicyAttachment } from "./types";
 
-const { Text } = Typography;
-
 interface AttachmentTableProps {
   attachments: PolicyAttachment[];
   isLoading: boolean;
@@ -18,135 +25,256 @@ const AttachmentTable: React.FC<AttachmentTableProps> = ({
   onDeleteClick,
   isAdmin,
 }) => {
-  const columns = [
+  const [sorting, setSorting] = useState<SortingState>([{ id: "created_at", desc: true }]);
+
+  // Format date helper function
+  const formatDate = (dateString?: string) => {
+    if (!dateString) return "-";
+    const date = new Date(dateString);
+    return date.toLocaleString();
+  };
+
+  const columns: ColumnDef<PolicyAttachment>[] = [
     {
-      title: "Policy",
-      dataIndex: "policy_name",
-      key: "policy_name",
-      render: (text: string) => <Tag color="blue">{text}</Tag>,
+      header: "Attachment ID",
+      accessorKey: "attachment_id",
+      cell: (info: any) => (
+        <Tooltip title={String(info.getValue() || "")}>
+          <span className="font-mono text-xs text-gray-600">
+            {info.getValue() ? `${String(info.getValue()).slice(0, 7)}...` : ""}
+          </span>
+        </Tooltip>
+      ),
     },
     {
-      title: "Scope",
-      dataIndex: "scope",
-      key: "scope",
-      render: (scope: string | null) =>
-        scope === "*" ? (
-          <Tag color="gold">Global (*)</Tag>
-        ) : scope ? (
-          <Tag>{scope}</Tag>
+      header: "Policy",
+      accessorKey: "policy_name",
+      cell: ({ row }) => {
+        const attachment = row.original;
+        return (
+          <Badge color="blue" size="xs">
+            {attachment.policy_name}
+          </Badge>
+        );
+      },
+    },
+    {
+      header: "Scope",
+      accessorKey: "scope",
+      cell: ({ row }) => {
+        const attachment = row.original;
+        if (attachment.scope === "*") {
+          return (
+            <Badge color="amber" size="xs">
+              Global (*)
+            </Badge>
+          );
+        }
+        return attachment.scope ? (
+          <span className="text-xs">{attachment.scope}</span>
         ) : (
-          <Text type="secondary">-</Text>
-        ),
+          <span className="text-xs text-gray-400">-</span>
+        );
+      },
     },
     {
-      title: "Teams",
-      dataIndex: "teams",
-      key: "teams",
-      render: (teams: string[]) => (
-        <Space wrap>
-          {teams && teams.length > 0 ? (
-            teams.slice(0, 3).map((t) => (
-              <Tag key={t} color="cyan">
+      header: "Teams",
+      accessorKey: "teams",
+      cell: ({ row }) => {
+        const attachment = row.original;
+        const teams = attachment.teams || [];
+        if (teams.length === 0) {
+          return <span className="text-xs text-gray-400">-</span>;
+        }
+        return (
+          <div className="flex flex-wrap gap-1">
+            {teams.slice(0, 2).map((t, i) => (
+              <Tag key={i} color="cyan" className="text-xs">
                 {t}
               </Tag>
-            ))
-          ) : (
-            <Text type="secondary">-</Text>
-          )}
-          {teams && teams.length > 3 && (
-            <Tooltip title={teams.slice(3).join(", ")}>
-              <Tag>+{teams.length - 3} more</Tag>
-            </Tooltip>
-          )}
-        </Space>
-      ),
+            ))}
+            {teams.length > 2 && (
+              <Tooltip title={teams.slice(2).join(", ")}>
+                <Tag className="text-xs">+{teams.length - 2}</Tag>
+              </Tooltip>
+            )}
+          </div>
+        );
+      },
     },
     {
-      title: "Keys",
-      dataIndex: "keys",
-      key: "keys",
-      render: (keys: string[]) => (
-        <Space wrap>
-          {keys && keys.length > 0 ? (
-            keys.slice(0, 3).map((k) => (
-              <Tag key={k} color="purple">
+      header: "Keys",
+      accessorKey: "keys",
+      cell: ({ row }) => {
+        const attachment = row.original;
+        const keys = attachment.keys || [];
+        if (keys.length === 0) {
+          return <span className="text-xs text-gray-400">-</span>;
+        }
+        return (
+          <div className="flex flex-wrap gap-1">
+            {keys.slice(0, 2).map((k, i) => (
+              <Tag key={i} color="purple" className="text-xs">
                 {k}
               </Tag>
-            ))
-          ) : (
-            <Text type="secondary">-</Text>
-          )}
-          {keys && keys.length > 3 && (
-            <Tooltip title={keys.slice(3).join(", ")}>
-              <Tag>+{keys.length - 3} more</Tag>
-            </Tooltip>
-          )}
-        </Space>
-      ),
+            ))}
+            {keys.length > 2 && (
+              <Tooltip title={keys.slice(2).join(", ")}>
+                <Tag className="text-xs">+{keys.length - 2}</Tag>
+              </Tooltip>
+            )}
+          </div>
+        );
+      },
     },
     {
-      title: "Models",
-      dataIndex: "models",
-      key: "models",
-      render: (models: string[]) => (
-        <Space wrap>
-          {models && models.length > 0 ? (
-            models.slice(0, 3).map((m) => (
-              <Tag key={m} color="green">
+      header: "Models",
+      accessorKey: "models",
+      cell: ({ row }) => {
+        const attachment = row.original;
+        const models = attachment.models || [];
+        if (models.length === 0) {
+          return <span className="text-xs text-gray-400">-</span>;
+        }
+        return (
+          <div className="flex flex-wrap gap-1">
+            {models.slice(0, 2).map((m, i) => (
+              <Tag key={i} color="green" className="text-xs">
                 {m}
               </Tag>
-            ))
-          ) : (
-            <Text type="secondary">-</Text>
-          )}
-          {models && models.length > 3 && (
-            <Tooltip title={models.slice(3).join(", ")}>
-              <Tag>+{models.length - 3} more</Tag>
-            </Tooltip>
-          )}
-        </Space>
-      ),
+            ))}
+            {models.length > 2 && (
+              <Tooltip title={models.slice(2).join(", ")}>
+                <Tag className="text-xs">+{models.length - 2}</Tag>
+              </Tooltip>
+            )}
+          </div>
+        );
+      },
     },
     {
-      title: "Created At",
-      dataIndex: "created_at",
-      key: "created_at",
-      render: (date: string) =>
-        date ? new Date(date).toLocaleDateString() : "-",
+      header: "Created At",
+      accessorKey: "created_at",
+      cell: ({ row }) => {
+        const attachment = row.original;
+        return (
+          <Tooltip title={attachment.created_at}>
+            <span className="text-xs">{formatDate(attachment.created_at)}</span>
+          </Tooltip>
+        );
+      },
     },
     {
-      title: "Actions",
-      key: "actions",
-      render: (_: any, record: PolicyAttachment) => (
-        <Space>
-          {isAdmin && (
-            <Tooltip title="Delete">
-              <Button
-                type="text"
-                danger
-                icon={<DeleteOutlined />}
-                onClick={() => onDeleteClick(record.attachment_id)}
-              />
-            </Tooltip>
-          )}
-        </Space>
-      ),
+      id: "actions",
+      header: "Actions",
+      cell: ({ row }) => {
+        const attachment = row.original;
+        return (
+          <div className="flex space-x-2">
+            {isAdmin && (
+              <Tooltip title="Delete attachment">
+                <Icon
+                  icon={TrashIcon}
+                  size="sm"
+                  onClick={() => onDeleteClick(attachment.attachment_id)}
+                  className="cursor-pointer hover:text-red-500"
+                />
+              </Tooltip>
+            )}
+          </div>
+        );
+      },
     },
   ];
 
+  const table = useReactTable({
+    data: attachments,
+    columns,
+    state: {
+      sorting,
+    },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    enableSorting: true,
+  });
+
   return (
-    <Table
-      columns={columns}
-      dataSource={attachments}
-      rowKey="attachment_id"
-      loading={isLoading}
-      pagination={{
-        pageSize: 10,
-        showSizeChanger: true,
-        showTotal: (total, range) =>
-          `${range[0]}-${range[1]} of ${total} attachments`,
-      }}
-    />
+    <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.getToggleSortingHandler()}
+                  >
+                    <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.id !== "actions" && (
+                        <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>
+            ) : attachments.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 attachments found</p>
+                  </div>
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
   );
 };
 
diff --git a/ui/litellm-dashboard/src/components/policies/index.tsx b/ui/litellm-dashboard/src/components/policies/index.tsx
index b41829a2333..ab1de283694 100644
--- a/ui/litellm-dashboard/src/components/policies/index.tsx
+++ b/ui/litellm-dashboard/src/components/policies/index.tsx
@@ -1,12 +1,24 @@
 import React, { useState, useEffect, useCallback } from "react";
-import { Button, Tabs, Modal, message } from "antd";
-import { PlusOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
+import { Button, TabGroup, TabList, Tab, TabPanels, TabPanel } from "@tremor/react";
+import { Modal, message } from "antd";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
 import { isAdminRole } from "@/utils/roles";
 import PolicyTable from "./policy_table";
 import PolicyInfoView from "./policy_info";
 import AddPolicyForm from "./add_policy_form";
 import AttachmentTable from "./attachment_table";
 import AddAttachmentForm from "./add_attachment_form";
+import {
+  getPoliciesList,
+  createPolicyCall,
+  updatePolicyCall,
+  deletePolicyCall,
+  getPolicyInfo,
+  getPolicyAttachmentsList,
+  createPolicyAttachmentCall,
+  deletePolicyAttachmentCall,
+  getGuardrailsList,
+} from "../networking";
 import {
   Policy,
   PolicyAttachment,
@@ -15,34 +27,16 @@ import {
   PolicyAttachmentCreateRequest,
 } from "./types";
 import { Guardrail } from "../guardrails/types";
+import DeleteResourceModal from "../common_components/DeleteResourceModal";
 
 interface PoliciesPanelProps {
   accessToken: string | null;
   userRole?: string;
-  // API functions passed from parent
-  getPoliciesList: (accessToken: string) => Promise<{ policies: Policy[]; total_count: number }>;
-  createPolicy: (accessToken: string, data: PolicyCreateRequest) => Promise<Policy>;
-  updatePolicy: (accessToken: string, policyId: string, data: PolicyUpdateRequest) => Promise<Policy>;
-  deletePolicy: (accessToken: string, policyId: string) => Promise<void>;
-  getPolicy: (accessToken: string, policyId: string) => Promise<Policy>;
-  getAttachmentsList: (accessToken: string) => Promise<{ attachments: PolicyAttachment[]; total_count: number }>;
-  createAttachment: (accessToken: string, data: PolicyAttachmentCreateRequest) => Promise<PolicyAttachment>;
-  deleteAttachment: (accessToken: string, attachmentId: string) => Promise<void>;
-  getGuardrailsList: (accessToken: string) => Promise<{ guardrails: Guardrail[] }>;
 }
 
 const PoliciesPanel: React.FC<PoliciesPanelProps> = ({
   accessToken,
   userRole,
-  getPoliciesList,
-  createPolicy,
-  updatePolicy,
-  deletePolicy,
-  getPolicy,
-  getAttachmentsList,
-  createAttachment,
-  deleteAttachment,
-  getGuardrailsList,
 }) => {
   const [policiesList, setPoliciesList] = useState<Policy[]>([]);
   const [attachmentsList, setAttachmentsList] = useState<PolicyAttachment[]>([]);
@@ -53,7 +47,10 @@ const PoliciesPanel: React.FC<PoliciesPanelProps> = ({
   const [isAddAttachmentModalVisible, setIsAddAttachmentModalVisible] = useState(false);
   const [editingPolicy, setEditingPolicy] = useState<Policy | null>(null);
   const [selectedPolicyId, setSelectedPolicyId] = useState<string | null>(null);
-  const [activeTab, setActiveTab] = useState<string>("policies");
+  const [activeTab, setActiveTab] = useState<number>(0);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [policyToDelete, setPolicyToDelete] = useState<Policy | null>(null);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 
   const isAdmin = userRole ? isAdminRole(userRole) : false;
 
@@ -63,40 +60,40 @@ const PoliciesPanel: React.FC<PoliciesPanelProps> = ({
     setIsLoading(true);
     try {
       const response = await getPoliciesList(accessToken);
-      setPoliciesList(response.policies);
+      setPoliciesList(response.policies || []);
     } catch (error) {
       console.error("Error fetching policies:", error);
       message.error("Failed to fetch policies");
     } finally {
       setIsLoading(false);
     }
-  }, [accessToken, getPoliciesList]);
+  }, [accessToken]);
 
   const fetchAttachments = useCallback(async () => {
     if (!accessToken) return;
 
     setIsAttachmentsLoading(true);
     try {
-      const response = await getAttachmentsList(accessToken);
-      setAttachmentsList(response.attachments);
+      const response = await getPolicyAttachmentsList(accessToken);
+      setAttachmentsList(response.attachments || []);
     } catch (error) {
       console.error("Error fetching attachments:", error);
       message.error("Failed to fetch attachments");
     } finally {
       setIsAttachmentsLoading(false);
     }
-  }, [accessToken, getAttachmentsList]);
+  }, [accessToken]);
 
   const fetchGuardrails = useCallback(async () => {
     if (!accessToken) return;
 
     try {
       const response = await getGuardrailsList(accessToken);
-      setGuardrailsList(response.guardrails);
+      setGuardrailsList(response.guardrails || []);
     } catch (error) {
       console.error("Error fetching guardrails:", error);
     }
-  }, [accessToken, getGuardrailsList]);
+  }, [accessToken]);
 
   useEffect(() => {
     fetchPolicies();
@@ -104,44 +101,51 @@ const PoliciesPanel: React.FC<PoliciesPanelProps> = ({
     fetchGuardrails();
   }, [fetchPolicies, fetchAttachments, fetchGuardrails]);
 
-  const handleCreatePolicy = async (data: PolicyCreateRequest) => {
-    if (!accessToken) return;
-    await createPolicy(accessToken, data);
-    message.success("Policy created successfully");
+  const handleAddPolicy = () => {
+    if (selectedPolicyId) {
+      setSelectedPolicyId(null);
+    }
+    setEditingPolicy(null);
+    setIsAddPolicyModalVisible(true);
   };
 
-  const handleUpdatePolicy = async (policyId: string, data: PolicyUpdateRequest) => {
-    if (!accessToken) return;
-    await updatePolicy(accessToken, policyId, data);
-    message.success("Policy updated successfully");
+  const handleCloseModal = () => {
+    setIsAddPolicyModalVisible(false);
+    setEditingPolicy(null);
   };
 
-  const handleDeletePolicy = (policyId: string, policyName: string) => {
-    Modal.confirm({
-      title: "Delete Policy",
-      icon: <ExclamationCircleOutlined />,
-      content: `Are you sure you want to delete the policy "${policyName}"? This action cannot be undone.`,
-      okText: "Delete",
-      okType: "danger",
-      cancelText: "Cancel",
-      onOk: async () => {
-        if (!accessToken) return;
-        try {
-          await deletePolicy(accessToken, policyId);
-          message.success("Policy deleted successfully");
-          fetchPolicies();
-        } catch (error) {
-          console.error("Error deleting policy:", error);
-          message.error("Failed to delete policy");
-        }
-      },
-    });
+  const handleSuccess = () => {
+    fetchPolicies();
+    setEditingPolicy(null);
   };
 
-  const handleCreateAttachment = async (data: PolicyAttachmentCreateRequest) => {
-    if (!accessToken) return;
-    await createAttachment(accessToken, data);
-    message.success("Attachment created successfully");
+  const handleDeleteClick = (policyId: string, policyName: string) => {
+    const policy = policiesList.find((p) => p.policy_id === policyId) || null;
+    setPolicyToDelete(policy);
+    setIsDeleteModalOpen(true);
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!policyToDelete || !accessToken) return;
+
+    setIsDeleting(true);
+    try {
+      await deletePolicyCall(accessToken, policyToDelete.policy_id);
+      message.success(`Policy "${policyToDelete.policy_name}" deleted successfully`);
+      await fetchPolicies();
+    } catch (error) {
+      console.error("Error deleting policy:", error);
+      message.error("Failed to delete policy");
+    } finally {
+      setIsDeleting(false);
+      setIsDeleteModalOpen(false);
+      setPolicyToDelete(null);
+    }
+  };
+
+  const handleDeleteCancel = () => {
+    setIsDeleteModalOpen(false);
+    setPolicyToDelete(null);
   };
 
   const handleDeleteAttachment = (attachmentId: string) => {
@@ -155,7 +159,7 @@ const PoliciesPanel: React.FC<PoliciesPanelProps> = ({
       onOk: async () => {
         if (!accessToken) return;
         try {
-          await deleteAttachment(accessToken, attachmentId);
+          await deletePolicyAttachmentCall(accessToken, attachmentId);
           message.success("Attachment deleted successfully");
           fetchAttachments();
         } catch (error) {
@@ -166,134 +170,106 @@ const PoliciesPanel: React.FC<PoliciesPanelProps> = ({
     });
   };
 
-  const fetchPolicyById = useCallback(
-    async (policyId: string): Promise<Policy | null> => {
-      if (!accessToken) return null;
-      try {
-        return await getPolicy(accessToken, policyId);
-      } catch (error) {
-        console.error("Error fetching policy:", error);
-        return null;
-      }
-    },
-    [accessToken, getPolicy]
-  );
-
-  const handlePolicySuccess = () => {
-    fetchPolicies();
-    setEditingPolicy(null);
-  };
-
   const handleAttachmentSuccess = () => {
     fetchAttachments();
   };
 
-  const tabItems = [
-    {
-      key: "policies",
-      label: "Policies",
-      children: selectedPolicyId ? (
-        <PolicyInfoView
-          policyId={selectedPolicyId}
-          onClose={() => setSelectedPolicyId(null)}
-          onEdit={(policy) => {
-            setEditingPolicy(policy);
-            setIsAddPolicyModalVisible(true);
-            setSelectedPolicyId(null);
-          }}
-          accessToken={accessToken}
-          isAdmin={isAdmin}
-          fetchPolicy={fetchPolicyById}
-        />
-      ) : (
-        <>
-          <div style={{ marginBottom: 16 }}>
-            {isAdmin && (
-              <Button
-                type="primary"
-                icon={<PlusOutlined />}
-                onClick={() => {
-                  setEditingPolicy(null);
-                  setIsAddPolicyModalVisible(true);
-                }}
-              >
-                Add New Policy
-              </Button>
-            )}
-          </div>
-          <PolicyTable
-            policies={policiesList}
-            isLoading={isLoading}
-            onDeleteClick={handleDeletePolicy}
-            onEditClick={(policy) => {
-              setEditingPolicy(policy);
-              setIsAddPolicyModalVisible(true);
-            }}
-            onViewClick={(policyId) => setSelectedPolicyId(policyId)}
-            isAdmin={isAdmin}
-          />
-        </>
-      ),
-    },
-    {
-      key: "attachments",
-      label: "Attachments",
-      children: (
-        <>
-          <div style={{ marginBottom: 16 }}>
-            {isAdmin && (
-              <Button
-                type="primary"
-                icon={<PlusOutlined />}
-                onClick={() => setIsAddAttachmentModalVisible(true)}
-                disabled={policiesList.length === 0}
-              >
-                Add New Attachment
-              </Button>
-            )}
-          </div>
-          <AttachmentTable
-            attachments={attachmentsList}
-            isLoading={isAttachmentsLoading}
-            onDeleteClick={handleDeleteAttachment}
-            isAdmin={isAdmin}
-          />
-        </>
-      ),
-    },
-  ];
-
   return (
     <div className="w-full mx-auto flex-auto overflow-y-auto m-8 p-2">
-      <Tabs
-        activeKey={activeTab}
-        onChange={setActiveTab}
-        items={tabItems}
-      />
+      <TabGroup index={activeTab} onIndexChange={setActiveTab}>
+        <TabList className="mb-4">
+          <Tab>Policies</Tab>
+          <Tab>Attachments</Tab>
+        </TabList>
 
-      <AddPolicyForm
-        visible={isAddPolicyModalVisible}
-        onClose={() => {
-          setIsAddPolicyModalVisible(false);
-          setEditingPolicy(null);
-        }}
-        onSuccess={handlePolicySuccess}
-        accessToken={accessToken}
-        editingPolicy={editingPolicy}
-        existingPolicies={policiesList}
-        availableGuardrails={guardrailsList}
-        onCreatePolicy={handleCreatePolicy}
-        onUpdatePolicy={handleUpdatePolicy}
-      />
+        <TabPanels>
+          <TabPanel>
+            <div className="flex justify-between items-center mb-4">
+              <Button onClick={handleAddPolicy} disabled={!accessToken}>
+                + Add New Policy
+              </Button>
+            </div>
 
-      <AddAttachmentForm
-        visible={isAddAttachmentModalVisible}
-        onClose={() => setIsAddAttachmentModalVisible(false)}
-        onSuccess={handleAttachmentSuccess}
-        accessToken={accessToken}
-        policies={policiesList}
-        onCreateAttachment={handleCreateAttachment}
-      />
+            {selectedPolicyId ? (
+              <PolicyInfoView
+                policyId={selectedPolicyId}
+                onClose={() => setSelectedPolicyId(null)}
+                onEdit={(policy) => {
+                  setEditingPolicy(policy);
+                  setIsAddPolicyModalVisible(true);
+                  setSelectedPolicyId(null);
+                }}
+                accessToken={accessToken}
+                isAdmin={isAdmin}
+              />
+            ) : (
+              <PolicyTable
+                policies={policiesList}
+                isLoading={isLoading}
+                onDeleteClick={handleDeleteClick}
+                onEditClick={(policy) => {
+                  setEditingPolicy(policy);
+                  setIsAddPolicyModalVisible(true);
+                }}
+                onViewClick={(policyId) => setSelectedPolicyId(policyId)}
+                isAdmin={isAdmin}
+              />
+            )}
+
+            <AddPolicyForm
+              visible={isAddPolicyModalVisible}
+              onClose={handleCloseModal}
+              onSuccess={handleSuccess}
+              accessToken={accessToken}
+              editingPolicy={editingPolicy}
+              existingPolicies={policiesList}
+              availableGuardrails={guardrailsList}
+            />
+
+            <DeleteResourceModal
+              isOpen={isDeleteModalOpen}
+              title="Delete Policy"
+              message={`Are you sure you want to delete policy: ${policyToDelete?.policy_name}? This action cannot be undone.`}
+              resourceInformationTitle="Policy Information"
+              resourceInformation={[
+                { label: "Name", value: policyToDelete?.policy_name },
+                { label: "ID", value: policyToDelete?.policy_id, code: true },
+                { label: "Description", value: policyToDelete?.description || "-" },
+                { label: "Inherits From", value: policyToDelete?.inherit || "-" },
+              ]}
+              onCancel={handleDeleteCancel}
+              onOk={handleDeleteConfirm}
+              confirmLoading={isDeleting}
+            />
+          </TabPanel>
+
+          <TabPanel>
+            <div className="flex justify-between items-center mb-4">
+              <Button
+                onClick={() => setIsAddAttachmentModalVisible(true)}
+                disabled={!accessToken || policiesList.length === 0}
+              >
+                + Add New Attachment
+              </Button>
+            </div>
+
+            <AttachmentTable
+              attachments={attachmentsList}
+              isLoading={isAttachmentsLoading}
+              onDeleteClick={handleDeleteAttachment}
+              isAdmin={isAdmin}
+            />
+
+            <AddAttachmentForm
+              visible={isAddAttachmentModalVisible}
+              onClose={() => setIsAddAttachmentModalVisible(false)}
+              onSuccess={handleAttachmentSuccess}
+              accessToken={accessToken}
+              policies={policiesList}
+            />
+          </TabPanel>
+        </TabPanels>
+      </TabGroup>
     </div>
   );
 };
diff --git a/ui/litellm-dashboard/src/components/policies/policy_info.tsx b/ui/litellm-dashboard/src/components/policies/policy_info.tsx
index 2ee6877093d..7acd0ff1464 100644
--- a/ui/litellm-dashboard/src/components/policies/policy_info.tsx
+++ b/ui/litellm-dashboard/src/components/policies/policy_info.tsx
@@ -1,16 +1,9 @@
-import React, { useState, useEffect } from "react";
-import {
-  Card,
-  Descriptions,
-  Tag,
-  Button,
-  Space,
-  Typography,
-  Spin,
-  Divider,
-} from "antd";
-import { ArrowLeftOutlined, EditOutlined } from "@ant-design/icons";
+import React, { useState, useEffect, useCallback } from "react";
+import { Card, Badge, Button } from "@tremor/react";
+import { ArrowLeftIcon, PencilIcon } from "@heroicons/react/outline";
+import { Descriptions, Tag, Spin, Divider, Typography } from "antd";
 import { Policy } from "./types";
+import { getPolicyInfo } from "../networking";
 
 const { Title, Text } = Typography;
 
@@ -20,7 +13,6 @@ interface PolicyInfoViewProps {
   onEdit: (policy: Policy) => void;
   accessToken: string | null;
   isAdmin: boolean;
-  fetchPolicy: (policyId: string) => Promise<Policy | null>;
 }
 
 const PolicyInfoView: React.FC<PolicyInfoViewProps> = ({
@@ -29,32 +21,31 @@ const PolicyInfoView: React.FC<PolicyInfoViewProps> = ({
   onEdit,
   accessToken,
   isAdmin,
-  fetchPolicy,
 }) => {
   const [policy, setPolicy] = useState<Policy | null>(null);
   const [isLoading, setIsLoading] = useState(true);
 
+  const fetchPolicy = useCallback(async () => {
+    if (!accessToken || !policyId) return;
+
+    setIsLoading(true);
+    try {
+      const data = await getPolicyInfo(accessToken, policyId);
+      setPolicy(data);
+    } catch (error) {
+      console.error("Error fetching policy:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [policyId, accessToken]);
+
   useEffect(() => {
-    const loadPolicy = async () => {
-      if (!accessToken || !policyId) return;
-
-      setIsLoading(true);
-      try {
-        const data = await fetchPolicy(policyId);
-        setPolicy(data);
-      } catch (error) {
-        console.error("Error fetching policy:", error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    loadPolicy();
-  }, [policyId, accessToken, fetchPolicy]);
+    fetchPolicy();
+  }, [fetchPolicy]);
 
   if (isLoading) {
     return (
-      <div style={{ textAlign: "center", padding: "50px" }}>
+      <div className="flex justify-center items-center p-12">
         <Spin size="large" />
       </div>
     );
@@ -65,7 +56,7 @@ const PolicyInfoView: React.FC<PolicyInfoViewProps> = ({
       <Card>
         <Text type="danger">Policy not found</Text>
         <br />
-        <Button onClick={onClose} style={{ marginTop: 16 }}>
+        <Button onClick={onClose} className="mt-4">
           Go Back
         </Button>
       </Card>
@@ -74,34 +65,37 @@ const PolicyInfoView: React.FC<PolicyInfoViewProps> = ({
 
   return (
     <Card>
-      <Space direction="vertical" style={{ width: "100%" }} size="large">
-        <Space style={{ justifyContent: "space-between", width: "100%" }}>
-          <Button icon={<ArrowLeftOutlined />} onClick={onClose}>
+      <div className="space-y-6">
+        <div className="flex justify-between items-center">
+          <Button
+            variant="secondary"
+            icon={ArrowLeftIcon}
+            onClick={onClose}
+          >
             Back to Policies
           </Button>
           {isAdmin && (
             <Button
-              type="primary"
-              icon={<EditOutlined />}
+              icon={PencilIcon}
               onClick={() => onEdit(policy)}
             >
               Edit Policy
             </Button>
           )}
-        </Space>
+        </div>
 
         <Title level={4}>{policy.policy_name}</Title>
 
         <Descriptions bordered column={1}>
           <Descriptions.Item label="Policy ID">
-            <Text code>{policy.policy_id}</Text>
+            <code className="text-xs bg-gray-100 px-2 py-1 rounded">{policy.policy_id}</code>
           </Descriptions.Item>
           <Descriptions.Item label="Description">
             {policy.description || <Text type="secondary">No description</Text>}
           </Descriptions.Item>
           <Descriptions.Item label="Inherits From">
             {policy.inherit ? (
-              <Tag color="blue">{policy.inherit}</Tag>
+              <Badge color="blue" size="sm">{policy.inherit}</Badge>
             ) : (
               <Text type="secondary">None</Text>
             )}
@@ -118,11 +112,13 @@ const PolicyInfoView: React.FC<PolicyInfoViewProps> = ({
           </Descriptions.Item>
         </Descriptions>
 
-        <Divider orientation="left">Guardrails Configuration</Divider>
+        <Divider orientation="left">
+          <Text strong>Guardrails Configuration</Text>
+        </Divider>
 
         <Descriptions bordered column={1}>
           <Descriptions.Item label="Guardrails to Add">
-            <Space wrap>
+            <div className="flex flex-wrap gap-1">
               {policy.guardrails_add && policy.guardrails_add.length > 0 ? (
                 policy.guardrails_add.map((g) => (
                   <Tag key={g} color="green">
@@ -132,10 +128,10 @@ const PolicyInfoView: React.FC<PolicyInfoViewProps> = ({
               ) : (
                 <Text type="secondary">None</Text>
               )}
-            </Space>
+            </div>
           </Descriptions.Item>
           <Descriptions.Item label="Guardrails to Remove">
-            <Space wrap>
+            <div className="flex flex-wrap gap-1">
               {policy.guardrails_remove && policy.guardrails_remove.length > 0 ? (
                 policy.guardrails_remove.map((g) => (
                   <Tag key={g} color="red">
@@ -145,22 +141,28 @@ const PolicyInfoView: React.FC<PolicyInfoViewProps> = ({
               ) : (
                 <Text type="secondary">None</Text>
               )}
-            </Space>
+            </div>
           </Descriptions.Item>
         </Descriptions>
 
-        <Divider orientation="left">Conditions</Divider>
+        <Divider orientation="left">
+          <Text strong>Conditions</Text>
+        </Divider>
 
         <Descriptions bordered column={1}>
           <Descriptions.Item label="Model Condition">
             {policy.condition?.model ? (
-              <Tag color="purple">{policy.condition.model}</Tag>
+              <Tag color="purple">
+                {typeof policy.condition.model === "string"
+                  ? policy.condition.model
+                  : JSON.stringify(policy.condition.model)}
+              </Tag>
             ) : (
               <Text type="secondary">No model condition (applies to all models)</Text>
             )}
           </Descriptions.Item>
         </Descriptions>
-      </Space>
+      </div>
     </Card>
   );
 };
diff --git a/ui/litellm-dashboard/src/components/policies/policy_table.tsx b/ui/litellm-dashboard/src/components/policies/policy_table.tsx
index 072ad206d27..63241d8f213 100644
--- a/ui/litellm-dashboard/src/components/policies/policy_table.tsx
+++ b/ui/litellm-dashboard/src/components/policies/policy_table.tsx
@@ -1,17 +1,24 @@
-import React from "react";
-import { Table, Tag, Button, Space, Tooltip, Typography } from "antd";
-import { DeleteOutlined, EditOutlined, EyeOutlined } from "@ant-design/icons";
+import React, { useState } from "react";
+import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Icon, Button, Badge } from "@tremor/react";
+import { TrashIcon, PencilIcon, SwitchVerticalIcon, ChevronUpIcon, ChevronDownIcon } from "@heroicons/react/outline";
+import { Tooltip, Tag } from "antd";
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
 import { Policy } from "./types";
 
-const { Text } = Typography;
-
 interface PolicyTableProps {
   policies: Policy[];
   isLoading: boolean;
   onDeleteClick: (policyId: string, policyName: string) => void;
   onEditClick: (policy: Policy) => void;
   onViewClick: (policyId: string) => void;
-  isAdmin: boolean;
+  isAdmin?: boolean;
 }
 
 const PolicyTable: React.FC<PolicyTableProps> = ({
@@ -20,140 +27,282 @@ const PolicyTable: React.FC<PolicyTableProps> = ({
   onDeleteClick,
   onEditClick,
   onViewClick,
-  isAdmin,
+  isAdmin = false,
 }) => {
-  const columns = [
+  const [sorting, setSorting] = useState<SortingState>([{ id: "created_at", desc: true }]);
+
+  // Format date helper function
+  const formatDate = (dateString?: string) => {
+    if (!dateString) return "-";
+    const date = new Date(dateString);
+    return date.toLocaleString();
+  };
+
+  const columns: ColumnDef<Policy>[] = [
     {
-      title: "Policy Name",
-      dataIndex: "policy_name",
-      key: "policy_name",
-      render: (text: string, record: Policy) => (
-        <Button type="link" onClick={() => onViewClick(record.policy_id)}>
-          {text}
-        </Button>
+      header: "Policy ID",
+      accessorKey: "policy_id",
+      cell: (info: any) => (
+        <Tooltip title={String(info.getValue() || "")}>
+          <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 max-w-[200px]"
+            onClick={() => info.getValue() && onViewClick(info.getValue())}
+          >
+            {info.getValue() ? `${String(info.getValue()).slice(0, 7)}...` : ""}
+          </Button>
+        </Tooltip>
       ),
     },
     {
-      title: "Description",
-      dataIndex: "description",
-      key: "description",
-      render: (text: string | null) => text || <Text type="secondary">-</Text>,
-    },
-    {
-      title: "Inherits From",
-      dataIndex: "inherit",
-      key: "inherit",
-      render: (text: string | null) =>
-        text ? <Tag color="blue">{text}</Tag> : <Text type="secondary">-</Text>,
-    },
-    {
-      title: "Guardrails (Add)",
-      dataIndex: "guardrails_add",
-      key: "guardrails_add",
-      render: (guardrails: string[]) => (
-        <Space wrap>
-          {guardrails && guardrails.length > 0 ? (
-            guardrails.slice(0, 3).map((g) => (
-              <Tag key={g} color="green">
-                {g}
-              </Tag>
-            ))
-          ) : (
-            <Text type="secondary">-</Text>
-          )}
-          {guardrails && guardrails.length > 3 && (
-            <Tooltip title={guardrails.slice(3).join(", ")}>
-              <Tag>+{guardrails.length - 3} more</Tag>
-            </Tooltip>
-          )}
-        </Space>
-      ),
-    },
-    {
-      title: "Guardrails (Remove)",
-      dataIndex: "guardrails_remove",
-      key: "guardrails_remove",
-      render: (guardrails: string[]) => (
-        <Space wrap>
-          {guardrails && guardrails.length > 0 ? (
-            guardrails.slice(0, 3).map((g) => (
-              <Tag key={g} color="red">
-                {g}
-              </Tag>
-            ))
-          ) : (
-            <Text type="secondary">-</Text>
-          )}
-          {guardrails && guardrails.length > 3 && (
-            <Tooltip title={guardrails.slice(3).join(", ")}>
-              <Tag>+{guardrails.length - 3} more</Tag>
-            </Tooltip>
-          )}
-        </Space>
-      ),
-    },
-    {
-      title: "Model Condition",
-      dataIndex: "condition",
-      key: "condition",
-      render: (condition: { model?: string } | null) =>
-        condition?.model ? (
-          <Tag color="purple">{condition.model}</Tag>
-        ) : (
-          <Text type="secondary">-</Text>
-        ),
-    },
-    {
-      title: "Actions",
-      key: "actions",
-      render: (_: any, record: Policy) => (
-        <Space>
-          <Tooltip title="View">
-            <Button
-              type="text"
-              icon={<EyeOutlined />}
-              onClick={() => onViewClick(record.policy_id)}
-            />
+      header: "Name",
+      accessorKey: "policy_name",
+      cell: ({ row }) => {
+        const policy = row.original;
+        return (
+          <Tooltip title={policy.policy_name}>
+            <span className="text-xs font-medium">{policy.policy_name || "-"}</span>
           </Tooltip>
-          {isAdmin && (
-            <>
-              <Tooltip title="Edit">
-                <Button
-                  type="text"
-                  icon={<EditOutlined />}
-                  onClick={() => onEditClick(record)}
-                />
+        );
+      },
+    },
+    {
+      header: "Description",
+      accessorKey: "description",
+      cell: ({ row }) => {
+        const policy = row.original;
+        return (
+          <Tooltip title={policy.description}>
+            <span className="text-xs truncate max-w-[200px] block">
+              {policy.description || "-"}
+            </span>
+          </Tooltip>
+        );
+      },
+    },
+    {
+      header: "Inherits From",
+      accessorKey: "inherit",
+      cell: ({ row }) => {
+        const policy = row.original;
+        return policy.inherit ? (
+          <Badge color="blue" size="xs">
+            {policy.inherit}
+          </Badge>
+        ) : (
+          <span className="text-xs text-gray-400">-</span>
+        );
+      },
+    },
+    {
+      header: "Guardrails (Add)",
+      accessorKey: "guardrails_add",
+      cell: ({ row }) => {
+        const policy = row.original;
+        const guardrails = policy.guardrails_add || [];
+        if (guardrails.length === 0) {
+          return <span className="text-xs text-gray-400">-</span>;
+        }
+        return (
+          <div className="flex flex-wrap gap-1">
+            {guardrails.slice(0, 2).map((g, i) => (
+              <Tag key={i} color="green" className="text-xs">
+                {g}
+              </Tag>
+            ))}
+            {guardrails.length > 2 && (
+              <Tooltip title={guardrails.slice(2).join(", ")}>
+                <Tag className="text-xs">+{guardrails.length - 2}</Tag>
               </Tooltip>
-              <Tooltip title="Delete">
-                <Button
-                  type="text"
-                  danger
-                  icon={<DeleteOutlined />}
-                  onClick={() =>
-                    onDeleteClick(record.policy_id, record.policy_name)
-                  }
-                />
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      header: "Guardrails (Remove)",
+      accessorKey: "guardrails_remove",
+      cell: ({ row }) => {
+        const policy = row.original;
+        const guardrails = policy.guardrails_remove || [];
+        if (guardrails.length === 0) {
+          return <span className="text-xs text-gray-400">-</span>;
+        }
+        return (
+          <div className="flex flex-wrap gap-1">
+            {guardrails.slice(0, 2).map((g, i) => (
+              <Tag key={i} color="red" className="text-xs">
+                {g}
+              </Tag>
+            ))}
+            {guardrails.length > 2 && (
+              <Tooltip title={guardrails.slice(2).join(", ")}>
+                <Tag className="text-xs">+{guardrails.length - 2}</Tag>
               </Tooltip>
-            </>
-          )}
-        </Space>
-      ),
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      header: "Model Condition",
+      accessorKey: "condition",
+      cell: ({ row }) => {
+        const policy = row.original;
+        const modelCondition = policy.condition?.model;
+        if (!modelCondition) {
+          return <span className="text-xs text-gray-400">-</span>;
+        }
+        return (
+          <Tooltip title={typeof modelCondition === "string" ? modelCondition : JSON.stringify(modelCondition)}>
+            <code className="text-xs bg-gray-100 px-1 py-0.5 rounded">
+              {typeof modelCondition === "string"
+                ? modelCondition.length > 20
+                  ? modelCondition.slice(0, 20) + "..."
+                  : modelCondition
+                : "Multiple"}
+            </code>
+          </Tooltip>
+        );
+      },
+    },
+    {
+      header: "Created At",
+      accessorKey: "created_at",
+      cell: ({ row }) => {
+        const policy = row.original;
+        return (
+          <Tooltip title={policy.created_at}>
+            <span className="text-xs">{formatDate(policy.created_at)}</span>
+          </Tooltip>
+        );
+      },
+    },
+    {
+      id: "actions",
+      header: "Actions",
+      cell: ({ row }) => {
+        const policy = row.original;
+        return (
+          <div className="flex space-x-2">
+            {isAdmin && (
+              <>
+                <Tooltip title="Edit policy">
+                  <Icon
+                    icon={PencilIcon}
+                    size="sm"
+                    onClick={() => onEditClick(policy)}
+                    className="cursor-pointer hover:text-blue-500"
+                  />
+                </Tooltip>
+                <Tooltip title="Delete policy">
+                  <Icon
+                    icon={TrashIcon}
+                    size="sm"
+                    onClick={() =>
+                      policy.policy_id &&
+                      onDeleteClick(policy.policy_id, policy.policy_name || "Unnamed Policy")
+                    }
+                    className="cursor-pointer hover:text-red-500"
+                  />
+                </Tooltip>
+              </>
+            )}
+          </div>
+        );
+      },
     },
   ];
 
+  const table = useReactTable({
+    data: policies,
+    columns,
+    state: {
+      sorting,
+    },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    enableSorting: true,
+  });
+
   return (
-    <Table
-      columns={columns}
-      dataSource={policies}
-      rowKey="policy_id"
-      loading={isLoading}
-      pagination={{
-        pageSize: 10,
-        showSizeChanger: true,
-        showTotal: (total, range) =>
-          `${range[0]}-${range[1]} of ${total} policies`,
-      }}
-    />
+    <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.getToggleSortingHandler()}
+                  >
+                    <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.id !== "actions" && (
+                        <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>
+            ) : policies.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 policies found</p>
+                  </div>
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
   );
 };