diff --git a/docs/my-website/docs/proxy/config_settings.md b/docs/my-website/docs/proxy/config_settings.md
index 03406c9bfa4..0c226ffca64 100644
--- a/docs/my-website/docs/proxy/config_settings.md
+++ b/docs/my-website/docs/proxy/config_settings.md
@@ -433,6 +433,7 @@ router_settings:
 | GALILEO_PASSWORD | Password for Galileo authentication
 | GALILEO_PROJECT_ID | Project ID for Galileo usage
 | GALILEO_USERNAME | Username for Galileo authentication
+| GOOGLE_SECRET_MANAGER_PROJECT_ID | Project ID for Google Secret Manager
 | GCS_BUCKET_NAME | Name of the Google Cloud Storage bucket
 | GCS_PATH_SERVICE_ACCOUNT | Path to the Google Cloud service account JSON file
 | GCS_FLUSH_INTERVAL | Flush interval for GCS logging (in seconds). Specify how often you want a log to be sent to GCS. **Default is 20 seconds**
diff --git a/ui/litellm-dashboard/package-lock.json b/ui/litellm-dashboard/package-lock.json
index e49ad6bf2d3..88a66c9c585 100644
--- a/ui/litellm-dashboard/package-lock.json
+++ b/ui/litellm-dashboard/package-lock.json
@@ -22,6 +22,7 @@
         "fs": "^0.0.1-security",
         "jsonwebtoken": "^9.0.2",
         "jwt-decode": "^4.0.0",
+        "lucide-react": "^0.513.0",
         "moment": "^2.30.1",
         "next": "^14.2.26",
         "openai": "^4.93.0",
@@ -557,7 +558,6 @@
       "cpu": [
         "ia32"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -4352,6 +4352,14 @@
         "node": "14 || >=16.14"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.513.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.513.0.tgz",
+      "integrity": "sha512-CJZKq2g8Y8yN4Aq002GahSXbG2JpFv9kXwyiOAMvUBv7pxeOFHUWKB0mO7MiY4ZVFCV4aNjv2BJFq/z3DgKPQg==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/mdast-util-from-markdown": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.0.tgz",
@@ -7993,21 +8001,6 @@
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
-    },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.26",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.26.tgz",
-      "integrity": "sha512-GQWg/Vbz9zUGi9X80lOeGsz1rMH/MtFO/XqigDznhhhTfDlDoynCM6982mPCbSlxJ/aveZcKtTlwfAjwhyxDpg==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
     }
   }
 }
diff --git a/ui/litellm-dashboard/package.json b/ui/litellm-dashboard/package.json
index 356f3bd0e0a..0406d55fda8 100644
--- a/ui/litellm-dashboard/package.json
+++ b/ui/litellm-dashboard/package.json
@@ -23,6 +23,7 @@
     "fs": "^0.0.1-security",
     "jsonwebtoken": "^9.0.2",
     "jwt-decode": "^4.0.0",
+    "lucide-react": "^0.513.0",
     "moment": "^2.30.1",
     "next": "^14.2.26",
     "openai": "^4.93.0",
diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index 66f36b0348b..987504538ca 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -405,7 +405,8 @@ export default function CreateKeyPage() {
                   userRole={userRole}
                   token={token}
                   accessToken={accessToken}
-                  allTeams={(teams as Team[]) ?? []}
+                  allTeams={teams as Team[] ?? []}
+                  premiumUser={premiumUser}
                 />
               ) : page == "mcp-servers" ? (
                 <MCPServers
diff --git a/ui/litellm-dashboard/src/components/key_info_view.tsx b/ui/litellm-dashboard/src/components/key_info_view.tsx
index 4154c616115..087d60d20ec 100644
--- a/ui/litellm-dashboard/src/components/key_info_view.tsx
+++ b/ui/litellm-dashboard/src/components/key_info_view.tsx
@@ -18,7 +18,7 @@ import {
 import { ArrowLeftIcon, TrashIcon, RefreshIcon } from "@heroicons/react/outline";
 import { keyDeleteCall, keyUpdateCall } from "./networking";
 import { KeyResponse } from "./key_team_helpers/key_list";
-import { Form, Input, InputNumber, message, Select } from "antd";
+import { Form, Input, InputNumber, message, Select, Tooltip } from "antd";
 import { KeyEditView } from "./key_edit_view";
 import { RegenerateKeyModal } from "./regenerate_key_modal";
 import { rolesWithWriteAccess } from '../utils/roles';
@@ -34,9 +34,10 @@ interface KeyInfoViewProps {
   userID: string | null;
   userRole: string | null;
   teams: any[] | null;
+  premiumUser: boolean;
 }
 
-export default function KeyInfoView({ keyId, onClose, keyData, accessToken, userID, userRole, teams, onKeyDataUpdate, onDelete }: KeyInfoViewProps) {
+export default function KeyInfoView({ keyId, onClose, keyData, accessToken, userID, userRole, teams, onKeyDataUpdate, onDelete, premiumUser }: KeyInfoViewProps) {
   const [isEditing, setIsEditing] = useState(false);
   const [form] = Form.useForm();
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@@ -150,14 +151,19 @@ export default function KeyInfoView({ keyId, onClose, keyData, accessToken, user
         </div>
         {userRole && rolesWithWriteAccess.includes(userRole) && (
           <div className="flex gap-2">
-            <Button
-              icon={RefreshIcon}
-              variant="secondary"
-              onClick={() => setIsRegenerateModalOpen(true)}
-              className="flex items-center"
-            >
-              Regenerate Key
-            </Button>
+            <Tooltip title={!premiumUser ? "This is a LiteLLM Enterprise feature, and requires a valid key to use." : ""}>
+              <span className="inline-block">
+                <Button
+                  icon={RefreshIcon}
+                  variant="secondary"
+                  onClick={() => setIsRegenerateModalOpen(true)}
+                  className="flex items-center"
+                  disabled={!premiumUser}
+                >
+                  Regenerate Key
+                </Button>
+              </span>
+            </Tooltip>
             <Button
               icon={TrashIcon}
               variant="secondary"
@@ -176,6 +182,7 @@ export default function KeyInfoView({ keyId, onClose, keyData, accessToken, user
         visible={isRegenerateModalOpen}
         onClose={() => setIsRegenerateModalOpen(false)}
         accessToken={accessToken}
+        premiumUser={premiumUser}
       />
 
       {/* Delete Confirmation Modal */}
diff --git a/ui/litellm-dashboard/src/components/view_logs/audit_logs.tsx b/ui/litellm-dashboard/src/components/view_logs/audit_logs.tsx
new file mode 100644
index 00000000000..d98640375d4
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/view_logs/audit_logs.tsx
@@ -0,0 +1,568 @@
+import { DataTable } from "./table";
+import moment from "moment";
+import { useRef, useState, useEffect, useCallback, useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { uiAuditLogsCall, keyListCall } from "../networking";
+import { AuditLogEntry, auditLogColumns } from "./columns";
+import { Text } from "@tremor/react";
+import { Team } from "../key_team_helpers/key_list";
+
+interface AuditLogsProps {
+  accessToken: string | null;
+  token: string | null;
+  userRole: string | null;
+  userID: string | null;
+  isActive: boolean;
+  premiumUser: boolean;
+  allTeams: Team[];
+}
+
+export default function AuditLogs({
+  userID,
+  userRole,
+  token,
+  accessToken,
+  isActive,
+  premiumUser,
+  allTeams,
+}: AuditLogsProps) {
+  const [startTime, setStartTime] = useState<string>(
+    moment().subtract(24, "hours").format("YYYY-MM-DDTHH:mm")
+  );
+
+  const actionFilterRef = useRef<HTMLDivElement>(null);
+  const tableFilterRef = useRef<HTMLDivElement>(null);
+  const [clientCurrentPage, setClientCurrentPage] = useState(1);
+  const [pageSize] = useState(50);
+  const [filters, setFilters] = useState<Record<string, string>>({});
+  const [selectedTeamId, setSelectedTeamId] = useState("");
+  const [selectedKeyHash, setSelectedKeyHash] = useState("");
+  const [objectIdSearch, setObjectIdSearch] = useState("");
+  const [selectedActionFilter, setSelectedActionFilter] = useState("all");
+  const [selectedTableFilter, setSelectedTableFilter] = useState("all");
+  const [actionFilterOpen, setActionFilterOpen] = useState(false);
+  const [tableFilterOpen, setTableFilterOpen] = useState(false);
+
+  const allLogsQuery = useQuery<AuditLogEntry[]>({
+    queryKey: [
+      "all_audit_logs",
+      accessToken,
+      token,
+      userRole,
+      userID,
+      startTime,
+    ],
+    queryFn: async () => {
+      if (!accessToken || !token || !userRole || !userID) {
+        return [];
+      }
+
+      const formattedStartTimeStr = moment(startTime).utc().format("YYYY-MM-DD HH:mm:ss");
+      const formattedEndTimeStr = moment().utc().format("YYYY-MM-DD HH:mm:ss");
+
+      let accumulatedLogs: AuditLogEntry[] = [];
+      let currentPageToFetch = 1;
+      let totalPagesFromBackend = 1;
+      const backendPageSize = 50;
+
+      do {
+        const response = await uiAuditLogsCall(
+          accessToken,
+          formattedStartTimeStr,
+          formattedEndTimeStr,
+          currentPageToFetch,
+          backendPageSize
+        );
+        accumulatedLogs = accumulatedLogs.concat(response.audit_logs);
+        totalPagesFromBackend = response.total_pages;
+        currentPageToFetch++;
+      } while (currentPageToFetch <= totalPagesFromBackend);
+
+      return accumulatedLogs;
+    },
+    enabled: !!accessToken && !!token && !!userRole && !!userID && isActive,
+    refetchInterval: 5000,
+    refetchIntervalInBackground: true,
+  });
+
+  const handleRefresh = () => {
+    allLogsQuery.refetch();
+  };
+  
+  const handleFilterChange = (newFilters: Record<string, string>) => {
+    setFilters(newFilters);
+  };
+
+  const handleFilterReset = () => {
+    setFilters({});
+    setSelectedTeamId("");
+    setSelectedKeyHash("");
+    setObjectIdSearch("");
+    setSelectedActionFilter("all");
+    setSelectedTableFilter("all");
+    setClientCurrentPage(1);
+  };
+
+  const fetchKeyHashForAlias = useCallback(async (keyAlias: string) => {
+    if (!accessToken) return;
+    
+    try {
+      const response = await keyListCall(
+        accessToken,
+        null,
+        null,
+        keyAlias,
+        null,
+        null,
+        1,
+        10
+      );
+
+      const selectedKey = response.keys.find(
+        (key: any) => key.key_alias === keyAlias
+      );
+
+      if (selectedKey) {
+        setSelectedKeyHash(selectedKey.token);
+      } else {
+        setSelectedKeyHash("");
+      }
+    } catch (error) {
+      console.error("Error fetching key hash for alias:", error);
+      setSelectedKeyHash("");
+    }
+  }, [accessToken]);
+
+  useEffect(() => {
+    if(!accessToken) return;
+
+    let teamIdChanged = false;
+    let keyHashChanged = false;
+
+    if (filters['Team ID']) {
+      if (selectedTeamId !== filters['Team ID']) {
+        setSelectedTeamId(filters['Team ID']);
+        teamIdChanged = true;
+      }
+    } else {
+      if (selectedTeamId !== "") {
+        setSelectedTeamId("");
+        teamIdChanged = true;
+      }
+    }
+    
+    if (filters['Key Hash']) {
+      if (selectedKeyHash !== filters['Key Hash']) {
+        setSelectedKeyHash(filters['Key Hash']);
+        keyHashChanged = true;
+      }
+    } else if (filters['Key Alias']) {
+      fetchKeyHashForAlias(filters['Key Alias']);
+    } else {
+      if (selectedKeyHash !== "") {
+        setSelectedKeyHash("");
+        keyHashChanged = true;
+      }
+    }
+
+    if (teamIdChanged || keyHashChanged) {
+        setClientCurrentPage(1);
+    }
+  }, [filters, accessToken, fetchKeyHashForAlias, selectedTeamId, selectedKeyHash]);
+
+  useEffect(() => {
+    setClientCurrentPage(1);
+  }, [selectedTeamId, selectedKeyHash, startTime, objectIdSearch, selectedActionFilter, selectedTableFilter]);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        actionFilterRef.current &&
+        !actionFilterRef.current.contains(event.target as Node)
+      ) {
+        setActionFilterOpen(false);
+      }
+      if (
+        tableFilterRef.current &&
+        !tableFilterRef.current.contains(event.target as Node)
+      ) {
+        setTableFilterOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () =>
+      document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const completeFilteredLogs = useMemo(() => {
+    if (!allLogsQuery.data) return [];
+    return allLogsQuery.data.filter(log => {
+      let matchesTeam = true;
+      let matchesKey = true;
+      let matchesObjectId = true;
+      let matchesAction = true;
+      let matchesTable = true;
+
+      if (selectedTeamId) {
+        const beforeTeamId = typeof log.before_value === 'string' ? JSON.parse(log.before_value)?.team_id : log.before_value?.team_id;
+        const updatedTeamId = typeof log.updated_values === 'string' ? JSON.parse(log.updated_values)?.team_id : log.updated_values?.team_id;
+        matchesTeam = beforeTeamId === selectedTeamId || updatedTeamId === selectedTeamId;
+      }
+
+      if (selectedKeyHash) {
+        try {
+          const beforeBody = typeof log.before_value === 'string' ? JSON.parse(log.before_value) : log.before_value;
+          const updatedBody = typeof log.updated_values === 'string' ? JSON.parse(log.updated_values) : log.updated_values;
+          
+          const beforeKey = beforeBody?.token;
+          const updatedKey = updatedBody?.token;
+
+          matchesKey = (typeof beforeKey === 'string' && beforeKey.includes(selectedKeyHash)) ||
+                      (typeof updatedKey === 'string' && updatedKey.includes(selectedKeyHash));
+        } catch (e) {
+          matchesKey = false;
+        }
+      }
+
+      if (objectIdSearch) {
+        matchesObjectId = log.object_id?.toLowerCase().includes(objectIdSearch.toLowerCase());
+      }
+
+      if (selectedActionFilter !== "all") {
+        matchesAction = log.action?.toLowerCase() === selectedActionFilter.toLowerCase();
+      }
+
+      if (selectedTableFilter !== "all") {
+        let tableMatchName = "";
+        switch(selectedTableFilter) {
+          case "keys": tableMatchName = "litellm_verificationtoken"; break;
+          case "teams": tableMatchName = "litellm_teamtable"; break;
+          case "users": tableMatchName = "litellm_usertable"; break;
+          // Add other direct table names if needed, or rely on a more generic match
+          default: tableMatchName = selectedTableFilter; // Should not happen with current UI options
+        }
+        matchesTable = log.table_name?.toLowerCase() === tableMatchName;
+      }
+
+      return matchesTeam && matchesKey && matchesObjectId && matchesAction && matchesTable;
+    });
+  }, [allLogsQuery.data, selectedTeamId, selectedKeyHash, objectIdSearch, selectedActionFilter, selectedTableFilter]);
+
+  const totalFilteredItems = completeFilteredLogs.length;
+  const totalFilteredPages = Math.ceil(totalFilteredItems / pageSize) || 1;
+
+  const paginatedViewOfFilteredLogs = useMemo(() => {
+    const start = (clientCurrentPage - 1) * pageSize;
+    const end = start + pageSize;
+    return completeFilteredLogs.slice(start, end);
+  }, [completeFilteredLogs, clientCurrentPage, pageSize]);
+
+  const renderSubComponent = useCallback(({ row }: { row: any }) => {
+    const AuditLogRowExpansionPanel = ({ rowData }: { rowData: AuditLogEntry }) => {
+      const { before_value, updated_values, table_name, action } = rowData;
+    
+      const renderValue = (value: Record<string, any>, isKeyTable: boolean) => {
+        if (!value || Object.keys(value).length === 0) return <Text>N/A</Text>;
+
+        if (isKeyTable) {
+          const changedKeys = Object.keys(value);
+          const knownKeyFields = ['token', 'spend', 'max_budget'];
+          
+          const onlyKnownFieldsChanged = changedKeys.every(key => knownKeyFields.includes(key));
+
+          if (onlyKnownFieldsChanged && changedKeys.length > 0) {
+            return (
+              <div>
+                {changedKeys.includes('token') && <p><strong>Token:</strong> {value.token || 'N/A'}</p>}
+                {changedKeys.includes('spend') && <p><strong>Spend:</strong> {value.spend !== undefined ? `$${Number(value.spend).toFixed(6)}` : 'N/A'}</p>}
+                {changedKeys.includes('max_budget') && <p><strong>Max Budget:</strong> {value.max_budget !== undefined ? `$${Number(value.max_budget).toFixed(6)}` : 'N/A'}</p>}
+              </div>
+            );
+          } else {
+            if (value["No differing fields detected in 'before' state"] || value["No differing fields detected in 'updated' state"] || value["No fields changed"]) {
+               return <Text>{value[Object.keys(value)[0]]}</Text> // Display the N/A message string
+            }
+            return <pre className="p-2 bg-gray-50 border rounded text-xs overflow-auto max-h-60">{JSON.stringify(value, null, 2)}</pre>;
+          }
+        }
+        
+        return <pre className="p-2 bg-gray-50 border rounded text-xs overflow-auto max-h-60">{JSON.stringify(value, null, 2)}</pre>;
+      };
+
+      let displayBeforeValue = before_value;
+      let displayUpdatedValue = updated_values;
+
+      if ((action === "updated" || action === "rotated") && before_value && updated_values) {
+        if (table_name === "LiteLLM_TeamTable" || table_name === "LiteLLM_UserTable" || table_name === "LiteLLM_VerificationToken") {
+
+          const changedBefore: Record<string, any> = {};
+          const changedUpdated: Record<string, any> = {};
+          const allKeys = new Set([...Object.keys(before_value), ...Object.keys(updated_values)]);
+
+          allKeys.forEach(key => {
+            const beforeValStr = JSON.stringify(before_value[key]);
+            const updatedValStr = JSON.stringify(updated_values[key]);
+            if (beforeValStr !== updatedValStr) {
+              if (before_value.hasOwnProperty(key)) {
+                 changedBefore[key] = before_value[key];
+              }
+              if (updated_values.hasOwnProperty(key)) {
+                changedUpdated[key] = updated_values[key];
+              }
+            }
+          });
+          
+          Object.keys(before_value).forEach(key => {
+            if (!updated_values.hasOwnProperty(key) && !changedBefore.hasOwnProperty(key)) {
+                changedBefore[key] = before_value[key];
+                changedUpdated[key] = undefined; 
+            }
+          });
+
+          Object.keys(updated_values).forEach(key => {
+            if (!before_value.hasOwnProperty(key) && !changedUpdated.hasOwnProperty(key)) {
+                changedUpdated[key] = updated_values[key];
+                changedBefore[key] = undefined; 
+            }
+          });
+
+          displayBeforeValue = Object.keys(changedBefore).length > 0 ? changedBefore : { "No differing fields detected in 'before' state": "N/A" };
+          displayUpdatedValue = Object.keys(changedUpdated).length > 0 ? changedUpdated : { "No differing fields detected in 'updated' state": "N/A" };
+          
+          if (Object.keys(changedBefore).length === 0 && Object.keys(changedUpdated).length === 0) {
+             displayBeforeValue = {"No fields changed": "N/A"};
+             displayUpdatedValue = {"No fields changed": "N/A"};
+          }
+        }
+      }
+    
+      return (
+        <div className="-mx-4 p-4 bg-slate-100 border-y border-slate-300 grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <h4 className="font-semibold mb-2 text-sm text-slate-700">Before Value:</h4>
+            {renderValue(displayBeforeValue, table_name === "LiteLLM_VerificationToken")}
+          </div>
+          <div>
+            <h4 className="font-semibold mb-2 text-sm text-slate-700">Updated Value:</h4>
+            {renderValue(displayUpdatedValue, table_name === "LiteLLM_VerificationToken")}
+          </div>
+        </div>
+      );
+    };
+
+    return <AuditLogRowExpansionPanel rowData={row.original as AuditLogEntry} />;
+  }, []);
+
+  if (!premiumUser) {
+    return (
+      <div>
+        <Text>This is a LiteLLM Enterprise feature, and requires a valid key to use. Get a trial key <a href="https://litellm.ai/pricing" target="_blank" rel="noopener noreferrer">here</a>.</Text>
+      </div>
+    );
+  }
+
+  const currentDisplayItemsStart = totalFilteredItems > 0 ? (clientCurrentPage - 1) * pageSize + 1 : 0;
+  const currentDisplayItemsEnd = Math.min(clientCurrentPage * pageSize, totalFilteredItems);
+
+  return (
+    <>
+      <div className="flex items-center justify-between mb-4">
+        
+      </div>
+      {/* <FilterComponent options={auditLogFilterOptions} onApplyFilters={handleFilterChange} onResetFilters={handleFilterReset} /> */}
+      <div className="bg-white rounded-lg shadow">
+        <div className="border-b px-6 py-4">
+        <h1 className="text-xl font-semibold py-4">
+              Audit Logs
+            </h1>
+          <div className="flex flex-col md:flex-row items-start md:items-center justify-between space-y-4 md:space-y-0">
+            
+            <div className="flex flex-wrap items-center gap-3">
+            
+              <div className="flex items-center gap-2">
+                <div className="flex items-center">
+                  <input
+                    type="text"
+                    placeholder="Search by Object ID..."
+                    value={objectIdSearch}
+                    onChange={(e) => setObjectIdSearch(e.target.value)}
+                    className="px-3 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  />
+                </div>
+                
+                <button
+                  onClick={handleRefresh}
+                  className="px-3 py-2 text-sm border rounded-md hover:bg-gray-50 flex items-center gap-2"
+                  title="Refresh data"
+                >
+                  <svg
+                    className={`w-4 h-4 ${allLogsQuery.isFetching ? 'animate-spin' : ''}`}
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                    />
+                  </svg>
+                  <span>Refresh</span>
+                </button>
+              </div>
+
+            </div>
+
+            <div className="flex items-center space-x-4">
+              {/* Custom Action Filter Dropdown */}
+              <div className="relative" ref={actionFilterRef}>
+                <label htmlFor="actionFilterDisplay" className="mr-2 text-sm font-medium text-gray-700 sr-only">Action:</label>
+                <button
+                  id="actionFilterDisplay"
+                  onClick={() => setActionFilterOpen(!actionFilterOpen)}
+                  className="px-3 py-2 text-sm border rounded-md hover:bg-gray-50 flex items-center gap-2 bg-white w-40 text-left justify-between"
+                >
+                  <span>
+                    {selectedActionFilter === "all" && "All Actions"}
+                    {selectedActionFilter === "created" && "Created"}
+                    {selectedActionFilter === "updated" && "Updated"}
+                    {selectedActionFilter === "deleted" && "Deleted"}
+                    {selectedActionFilter === "rotated" && "Rotated"}
+                  </span>
+                  <svg className="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
+                </button>
+                {actionFilterOpen && (
+                  <div className="absolute left-0 mt-2 w-40 bg-white rounded-lg shadow-lg border p-1 z-50">
+                    <div className="space-y-1">
+                      {[
+                        { label: "All Actions", value: "all" },
+                        { label: "Created", value: "created" },
+                        { label: "Updated", value: "updated" },
+                        { label: "Deleted", value: "deleted" },
+                        { label: "Rotated", value: "rotated" },
+                      ].map((option) => (
+                        <button
+                          key={option.value}
+                          className={`w-full px-3 py-2 text-left text-sm hover:bg-gray-50 rounded-md ${
+                            selectedActionFilter === option.value ? 'bg-blue-50 text-blue-600 font-medium' : 'font-normal'
+                          }`}
+                          onClick={() => {
+                            setSelectedActionFilter(option.value);
+                            setActionFilterOpen(false);
+                          }}
+                        >
+                          {option.label}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* Custom Table Filter Dropdown */}
+              <div className="relative" ref={tableFilterRef}>
+                <label htmlFor="tableFilterDisplay" className="mr-2 text-sm font-medium text-gray-700 sr-only">Table:</label>
+                <button
+                  id="tableFilterDisplay"
+                  onClick={() => setTableFilterOpen(!tableFilterOpen)}
+                  className="px-3 py-2 text-sm border rounded-md hover:bg-gray-50 flex items-center gap-2 bg-white w-40 text-left justify-between"
+                >
+                  <span>
+                    {selectedTableFilter === "all" && "All Tables"}
+                    {selectedTableFilter === "keys" && "Keys"}
+                    {selectedTableFilter === "teams" && "Teams"}
+                    {selectedTableFilter === "users" && "Users"}
+                  </span>
+                  <svg className="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
+                </button>
+                {tableFilterOpen && (
+                  <div className="absolute left-0 mt-2 w-40 bg-white rounded-lg shadow-lg border p-1 z-50">
+                    <div className="space-y-1">
+                      {[
+                        { label: "All Tables", value: "all" },
+                        { label: "Keys", value: "keys" },
+                        { label: "Teams", value: "teams" },
+                        { label: "Users", value: "users" },
+                      ].map((option) => (
+                        <button
+                          key={option.value}
+                          className={`w-full px-3 py-2 text-left text-sm hover:bg-gray-50 rounded-md ${
+                            selectedTableFilter === option.value ? 'bg-blue-50 text-blue-600 font-medium' : 'font-normal'
+                          }`}
+                          onClick={() => {
+                            setSelectedTableFilter(option.value);
+                            setTableFilterOpen(false);
+                          }}
+                        >
+                          {option.label}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+              
+              <span className="text-sm text-gray-700">
+                Showing{" "}
+                {allLogsQuery.isLoading
+                  ? "..."
+                  : currentDisplayItemsStart}{" "}
+                -{" "}
+                {allLogsQuery.isLoading
+                  ? "..."
+                  : currentDisplayItemsEnd}{" "}
+                of{" "}
+                {allLogsQuery.isLoading
+                  ? "..."
+                  : totalFilteredItems}{" "}
+                results
+              </span>
+              <div className="flex items-center space-x-2">
+                <span className="text-sm text-gray-700">
+                  Page {allLogsQuery.isLoading ? "..." : clientCurrentPage} of{" "}
+                  {allLogsQuery.isLoading
+                    ? "..."
+                    : totalFilteredPages}
+                </span>
+                <button
+                  onClick={() =>
+                    setClientCurrentPage((p) => Math.max(1, p - 1))
+                  }
+                  disabled={allLogsQuery.isLoading || clientCurrentPage === 1}
+                  className="px-3 py-1 text-sm border rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  Previous
+                </button>
+                <button
+                  onClick={() =>
+                    setClientCurrentPage((p) =>
+                      Math.min(
+                        totalFilteredPages,
+                        p + 1,
+                      ),
+                    )
+                  }
+                  disabled={
+                    allLogsQuery.isLoading ||
+                    clientCurrentPage === totalFilteredPages
+                  }
+                  className="px-3 py-1 text-sm border rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  Next
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <DataTable
+          columns={auditLogColumns}
+          data={paginatedViewOfFilteredLogs}
+          renderSubComponent={renderSubComponent}
+          getRowCanExpand={() => true}
+        />
+      </div>
+    </>
+  );
+}
diff --git a/ui/litellm-dashboard/src/components/view_logs/columns.tsx b/ui/litellm-dashboard/src/components/view_logs/columns.tsx
index 54670bbab5c..95a38853fad 100644
--- a/ui/litellm-dashboard/src/components/view_logs/columns.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/columns.tsx
@@ -1,12 +1,10 @@
 import type { ColumnDef } from "@tanstack/react-table";
-import { getCountryFromIP } from "./ip_lookup";
-import moment from "moment";
-import React from "react";
-import { CountryCell } from "./country_cell";
+import React, { useState } from "react";
 import { getProviderLogoAndName } from "../provider_info_helpers";
 import { Tooltip } from "antd";
 import { TimeCell } from "./time_cell";
-import { Button } from "@tremor/react";
+import { Button, Badge } from "@tremor/react";
+import { Eye, EyeOff} from "lucide-react"
 
 // Helper to get the appropriate logo URL
 const getLogoUrl = (
@@ -361,3 +359,189 @@ export const RequestResponsePanel = ({ request, response }: { request: any; resp
     </div>
   );
 };
+
+// New component for collapsible JSON display
+const CollapsibleJsonCell = ({ jsonData }: { jsonData: any }) => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const jsonString = JSON.stringify(jsonData, null, 2);
+
+  if (!jsonData || Object.keys(jsonData).length === 0) {
+    return <span>-</span>;
+  }
+
+  return (
+    <div>
+      <button 
+        onClick={() => setIsExpanded(!isExpanded)} 
+        className="text-blue-500 hover:text-blue-700 text-xs"
+      >
+        {isExpanded ? 'Hide JSON' : 'Show JSON'} ({Object.keys(jsonData).length} fields)
+      </button>
+      {isExpanded && (
+        <pre className="mt-2 p-2 bg-gray-50 border rounded text-xs overflow-auto max-h-60">
+          {jsonString}
+        </pre>
+      )}
+    </div>
+  );
+};
+
+export type AuditLogEntry = {
+  id: string;
+  updated_at: string;
+  changed_by: string;
+  changed_by_api_key: string;
+  action: string;
+  table_name: string;
+  object_id: string;
+  before_value: Record<string, any>;
+  updated_values: Record<string, any>;
+}
+
+
+const getActionBadge = (action: string) => {
+  const actionColors = {
+    created: "blue",
+    updated: "slate",
+    deleted: "red",
+    rotated: "amber",
+  } as const;
+
+  return (
+    <Badge 
+      color={actionColors[action as keyof typeof actionColors] || "gray"} 
+      className="flex items-center gap-1"
+    >
+      <span className="whitespace-nowrap text-xs">{action}</span>
+    </Badge>
+
+  )
+}
+
+export const auditLogColumns: ColumnDef<AuditLogEntry>[] = [
+  {
+    id: "expander",
+    header: () => null,
+    cell: ({ row }) => {
+      const ExpanderCell = () => {
+        const [localExpanded, setLocalExpanded] = React.useState(row.getIsExpanded());
+
+        const toggleHandler = React.useCallback(() => {
+          setLocalExpanded((prev) => !prev);
+          row.getToggleExpandedHandler()();
+        }, [row]);
+
+        return row.getCanExpand() ? (
+          <button
+            onClick={toggleHandler}
+            style={{ cursor: "pointer" }}
+            aria-label={localExpanded ? "Collapse row" : "Expand row"}
+            className="w-6 h-6 flex items-center justify-center focus:outline-none"
+          >
+            {localExpanded ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+          </button>
+        ) : (
+          <span className="w-6 h-6 flex items-center justify-center text-gray-300">●</span>
+        );
+      };
+      return <ExpanderCell />;
+    },
+  },
+  {
+    header: "Created At",
+    accessorKey: "before_value.created_at",
+    cell: (info: any) => {
+      const createdAt = info.row.original.before_value?.created_at;
+      return createdAt ? <TimeCell utcTime={createdAt} /> : "-";
+    },
+  },
+  {
+    header: "Updated At",
+    accessorKey: "updated_at",
+    cell: (info: any) => <TimeCell utcTime={info.getValue()} />,
+  },
+  {
+    header: "Action",
+    accessorKey: "action",
+    cell: (info: any) => <span>{getActionBadge(info.getValue())}</span>,
+  },
+  {
+    header: "Changed By",
+    accessorKey: "changed_by",
+    cell: (info: any) => {
+      const changedBy = info.row.original.changed_by;
+      const apiKey = info.row.original.changed_by_api_key;
+      return (
+        <div className="space-y-1">
+          <div className="font-medium">{changedBy}</div>
+          {apiKey && ( // Only show API key if it exists
+            <Tooltip title={apiKey}>
+              <div className="text-xs text-muted-foreground max-w-[15ch] truncate"> {/* Apply max-width and truncate */}
+                {apiKey}
+              </div>
+            </Tooltip>
+          )}
+        </div>
+      );
+    },
+  },
+  {
+    header: "Table Name",
+    accessorKey: "table_name",
+    cell: (info: any) => {
+      const tableName = info.getValue();
+      let displayValue = tableName;
+      switch (tableName) {
+        case "LiteLLM_VerificationToken":
+          displayValue = "Keys";
+          break;
+        case "LiteLLM_TeamTable":
+          displayValue = "Teams";
+          break;
+        case "LiteLLM_OrganizationTable":
+          displayValue = "Organizations";
+          break;
+        case "LiteLLM_UserTable":
+          displayValue = "Users";
+          break;
+        default:
+          displayValue = tableName;
+      }
+      return <span>{displayValue}</span>;
+    },
+  },
+  {
+    header: "Affected Item ID",
+    accessorKey: "object_id",
+    cell: (props) => {
+      const ObjectIdDisplay = () => {
+        const objectId = props.getValue();
+        const [copied, setCopied] = useState(false);
+
+        if (!objectId) return <>-</>;
+
+        const handleCopy = async () => {
+          try {
+            await navigator.clipboard.writeText(String(objectId));
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+          } catch (err) {
+            console.error("Failed to copy object ID: ", err);
+          }
+        };
+
+        return (
+          <Tooltip title={copied ? "Copied!" : String(objectId)}>
+            <span
+              className="max-w-[20ch] truncate block cursor-pointer hover:text-blue-600"
+              onClick={handleCopy}
+            >
+              {String(objectId)}
+            </span>
+          </Tooltip>
+        );
+      };
+      return <ObjectIdDisplay />;
+    },
+  },
+]
\ No newline at end of file
diff --git a/ui/litellm-dashboard/src/components/view_logs/index.tsx b/ui/litellm-dashboard/src/components/view_logs/index.tsx
index b6be331aba5..bb0d2a223a7 100644
--- a/ui/litellm-dashboard/src/components/view_logs/index.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/index.tsx
@@ -22,6 +22,16 @@ import FilterComponent from "../common_components/filter";
 import { FilterOption } from "../common_components/filter";
 import { useLogFilterLogic } from "./log_filter_logic";
 import { fetchAllKeyAliases } from "../key_team_helpers/filter_helpers";
+import {
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanels,
+  TabPanel,
+  Text,
+} from "@tremor/react";
+import AuditLogs from "./audit_logs";
+import { getTimeRangeDisplay } from "./logs_utils";
 
 interface SpendLogsTableProps {
   accessToken: string | null;
@@ -29,6 +39,7 @@ interface SpendLogsTableProps {
   userRole: string | null;
   userID: string | null;
   allTeams: Team[];
+  premiumUser: boolean;
 }
 
 export interface PaginatedResponse {
@@ -50,6 +61,7 @@ export default function SpendLogsTable({
   userRole,
   userID,
   allTeams,
+  premiumUser,
 }: SpendLogsTableProps) {
   const [searchTerm, setSearchTerm] = useState("");
   const [showFilters, setShowFilters] = useState(false);
@@ -82,6 +94,7 @@ export default function SpendLogsTable({
   const [filterByCurrentUser, setFilterByCurrentUser] = useState(
     userRole && internalUserRoles.includes(userRole)
   );
+  const [activeTab, setActiveTab] = useState("request logs");
 
   const [expandedRequestId, setExpandedRequestId] = useState<string | null>(null);
   const [selectedSessionId, setSelectedSessionId] = useState<string | null>(null);
@@ -208,7 +221,7 @@ export default function SpendLogsTable({
 
       return response;
     },
-    enabled: !!accessToken && !!token && !!userRole && !!userID,
+    enabled: !!accessToken && !!token && !!userRole && !!userID && activeTab === "request logs",
     refetchInterval: 5000,
     refetchIntervalInBackground: true,
   });
@@ -354,25 +367,7 @@ export default function SpendLogsTable({
     logs.refetch();
   };
 
-  // Add this function to format the time range display
-  const getTimeRangeDisplay = () => {
-    if (isCustomDate) {
-      return `${moment(startTime).format('MMM D, h:mm A')} - ${moment(endTime).format('MMM D, h:mm A')}`;
-    }
-    
-    const now = moment();
-    const start = moment(startTime);
-    const diffMinutes = now.diff(start, 'minutes');
-    
-    if (diffMinutes <= 15) return 'Last 15 Minutes';
-    if (diffMinutes <= 60) return 'Last Hour';
-    
-    const diffHours = now.diff(start, 'hours');
-    if (diffHours <= 4) return 'Last 4 Hours';
-    if (diffHours <= 24) return 'Last 24 Hours';
-    if (diffHours <= 168) return 'Last 7 Days';
-    return `${start.format('MMM D')} - ${now.format('MMM D')}`;
-  };
+
 
   const handleRowExpand = (requestId: string | null) => {
     setExpandedRequestId(requestId);
@@ -447,252 +442,276 @@ export default function SpendLogsTable({
 
   return (
     <div className="w-full p-6">
-
-      <div className="flex items-center justify-between mb-4">
-        <h1 className="text-xl font-semibold">
-          {selectedSessionId ? (
-            <>
-              Session: <span className="font-mono">{selectedSessionId}</span>
-              <button
-                className="ml-4 px-3 py-1 text-sm border rounded hover:bg-gray-50"
-                onClick={() => setSelectedSessionId(null)}
-              >
-                ← Back to All Logs
-              </button>
-            </>
-          ) : (
-            "Request Logs"
-          )}
-        </h1>
-      </div>
-      {selectedKeyInfo && selectedKeyIdInfoView && selectedKeyInfo.api_key === selectedKeyIdInfoView ? (
-        <KeyInfoView keyId={selectedKeyIdInfoView} keyData={selectedKeyInfo} accessToken={accessToken} userID={userID} userRole={userRole} teams={allTeams} onClose={() => setSelectedKeyIdInfoView(null)} />
-      ) : selectedSessionId ? (
-        <div className="bg-white rounded-lg shadow">
-          <DataTable
-            columns={columns}
-            data={sessionData}
-            renderSubComponent={RequestViewer}
-            getRowCanExpand={() => true}
-            // Optionally: add session-specific row expansion state
-          />
-        </div>
-      ) : (
-        <>
-        <FilterComponent options={logFilterOptions} onApplyFilters={handleFilterChange} onResetFilters={handleFilterReset} />
-        <div className="bg-white rounded-lg shadow">
-          <div className="border-b px-6 py-4">
-            <div className="flex flex-col md:flex-row items-start md:items-center justify-between space-y-4 md:space-y-0">
-              <div className="flex flex-wrap items-center gap-3">
-                <div className="relative w-64">
-                  <input
-                    type="text"
-                    placeholder="Search by Request ID"
-                    className="w-full px-3 py-2 pl-8 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                    value={searchTerm}
-                    onChange={(e) => setSearchTerm(e.target.value)}
-                  />
-                  <svg
-                    className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                    />
-                  </svg>
-                </div>
-
-                <div className="flex items-center gap-2">
-                  <div className="relative" ref={quickSelectRef}>
+      <TabGroup defaultIndex={0} onIndexChange={(index) => setActiveTab(index === 0 ? "request logs" : "audit logs")}>
+        <TabList>
+          <Tab>
+            Request Logs
+          </Tab>
+          <Tab>
+            Audit Logs
+          </Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <div className="flex items-center justify-between mb-4">
+              <h1 className="text-xl font-semibold">
+                {selectedSessionId ? (
+                  <>
+                    Session: <span className="font-mono">{selectedSessionId}</span>
                     <button
-                      onClick={() => setQuickSelectOpen(!quickSelectOpen)}
-                      className="px-3 py-2 text-sm border rounded-md hover:bg-gray-50 flex items-center gap-2"
+                      className="ml-4 px-3 py-1 text-sm border rounded hover:bg-gray-50"
+                      onClick={() => setSelectedSessionId(null)}
                     >
-                      <svg
-                        className="w-4 h-4"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                        />
-                      </svg>
-                      {getTimeRangeDisplay()}
+                      ← Back to All Logs
                     </button>
-
-                    {quickSelectOpen && (
-                      <div className="absolute right-0 mt-2 w-64 bg-white rounded-lg shadow-lg border p-2 z-50">
-                        <div className="space-y-1">
-                          {[
-                            { label: "Last 15 Minutes", value: 15, unit: "minutes" },
-                            { label: "Last Hour", value: 1, unit: "hours" },
-                            { label: "Last 4 Hours", value: 4, unit: "hours" },
-                            { label: "Last 24 Hours", value: 24, unit: "hours" },
-                            { label: "Last 7 Days", value: 7, unit: "days" },
-                          ].map((option) => (
-                            <button
-                              key={option.label}
-                              className={`w-full px-3 py-2 text-left text-sm hover:bg-gray-50 rounded-md ${
-                                getTimeRangeDisplay() === option.label ? 'bg-blue-50 text-blue-600' : ''
-                              }`}
-                              onClick={() => {
-                                setEndTime(moment().format("YYYY-MM-DDTHH:mm"));
-                                setStartTime(
-                                  moment()
-                                    .subtract(option.value, option.unit as any)
-                                    .format("YYYY-MM-DDTHH:mm")
-                                );
-                                setQuickSelectOpen(false);
-                                setIsCustomDate(false);
-                              }}
-                            >
-                              {option.label}
-                            </button>
-                          ))}
-                          <div className="border-t my-2" />
-                          <button
-                            className={`w-full px-3 py-2 text-left text-sm hover:bg-gray-50 rounded-md ${
-                              isCustomDate ? 'bg-blue-50 text-blue-600' : ''
-                            }`}
-                            onClick={() => setIsCustomDate(!isCustomDate)}
-                          >
-                            Custom Range
-                          </button>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                  
-                  <button
-                    onClick={handleRefresh}
-                    className="px-3 py-2 text-sm border rounded-md hover:bg-gray-50 flex items-center gap-2"
-                    title="Refresh data"
-                  >
-                    <svg
-                      className={`w-4 h-4 ${logs.isFetching ? 'animate-spin' : ''}`}
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                      />
-                    </svg>
-                    <span>Refresh</span>
-                  </button>
-                </div>
-
-                {isCustomDate && (
-                  <div className="flex items-center gap-2">
-                    <div>
-                      <input
-                        type="datetime-local"
-                        value={startTime}
-                        onChange={(e) => {
-                          setStartTime(e.target.value);
-                          setCurrentPage(1);
-                        }}
-                        className="px-3 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                      />
-                    </div>
-                    <span className="text-gray-500">to</span>
-                    <div>
-                      <input
-                        type="datetime-local"
-                        value={endTime}
-                        onChange={(e) => {
-                          setEndTime(e.target.value);
-                          setCurrentPage(1);
-                        }}
-                        className="px-3 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                      />
-                    </div>
-                  </div>
+                  </>
+                ) : (
+                  "Request Logs"
                 )}
-              </div>
-
-              <div className="flex items-center space-x-4">
-                <span className="text-sm text-gray-700">
-                  Showing{" "}
-                  {logs.isLoading
-                    ? "..."
-                    : filteredLogs
-                    ? (currentPage - 1) * pageSize + 1
-                    : 0}{" "}
-                  -{" "}
-                  {logs.isLoading
-                    ? "..."
-                    : filteredLogs
-                    ? Math.min(currentPage * pageSize, filteredLogs.total)
-                    : 0}{" "}
-                  of{" "}
-                  {logs.isLoading
-                    ? "..."
-                    : filteredLogs
-                    ? filteredLogs.total
-                    : 0}{" "}
-                  results
-                </span>
-                <div className="flex items-center space-x-2">
-                  <span className="text-sm text-gray-700">
-                    Page {logs.isLoading ? "..." : currentPage} of{" "}
-                    {logs.isLoading
-                      ? "..."
-                      : filteredLogs
-                      ? filteredLogs.total_pages
-                      : 1}
-                  </span>
-                  <button
-                    onClick={() =>
-                      setCurrentPage((p) => Math.max(1, p - 1))
-                    }
-                    disabled={logs.isLoading || currentPage === 1}
-                    className="px-3 py-1 text-sm border rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    Previous
-                  </button>
-                  <button
-                    onClick={() =>
-                      setCurrentPage((p) =>
-                        Math.min(
-                          filteredLogs.total_pages || 1,
-                          p + 1,
-                        ),
-                      )
-                    }
-                    disabled={
-                      logs.isLoading ||
-                      currentPage === (filteredLogs.total_pages || 1)
-                    }
-                    className="px-3 py-1 text-sm border rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    Next
-                  </button>
-                </div>
-              </div>
+              </h1>
             </div>
-          </div>
-          <DataTable
-            columns={columns}
-            data={filteredData}
-            renderSubComponent={RequestViewer}
-            getRowCanExpand={() => true}
-          />
-        </div>
-        </>
-      )} 
+            {selectedKeyInfo && selectedKeyIdInfoView && selectedKeyInfo.api_key === selectedKeyIdInfoView ? (
+              <KeyInfoView keyId={selectedKeyIdInfoView} keyData={selectedKeyInfo} accessToken={accessToken} userID={userID} userRole={userRole} teams={allTeams} onClose={() => setSelectedKeyIdInfoView(null)} />
+            ) : selectedSessionId ? (
+              <div className="bg-white rounded-lg shadow">
+                <DataTable
+                  columns={columns}
+                  data={sessionData}
+                  renderSubComponent={RequestViewer}
+                  getRowCanExpand={() => true}
+                  // Optionally: add session-specific row expansion state
+                />
+              </div>
+            ) : (
+              <>
+              <FilterComponent options={logFilterOptions} onApplyFilters={handleFilterChange} onResetFilters={handleFilterReset} />
+              <div className="bg-white rounded-lg shadow">
+                <div className="border-b px-6 py-4">
+                  <div className="flex flex-col md:flex-row items-start md:items-center justify-between space-y-4 md:space-y-0">
+                    <div className="flex flex-wrap items-center gap-3">
+                      <div className="relative w-64">
+                        <input
+                          type="text"
+                          placeholder="Search by Request ID"
+                          className="w-full px-3 py-2 pl-8 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                          value={searchTerm}
+                          onChange={(e) => setSearchTerm(e.target.value)}
+                        />
+                        <svg
+                          className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                          />
+                        </svg>
+                      </div>
+
+                      <div className="flex items-center gap-2">
+                        <div className="relative" ref={quickSelectRef}>
+                          <button
+                            onClick={() => setQuickSelectOpen(!quickSelectOpen)}
+                            className="px-3 py-2 text-sm border rounded-md hover:bg-gray-50 flex items-center gap-2"
+                          >
+                            <svg
+                              className="w-4 h-4"
+                              fill="none"
+                              stroke="currentColor"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                              />
+                            </svg>
+                            {getTimeRangeDisplay(isCustomDate, startTime, endTime)}
+                          </button>
+
+                          {quickSelectOpen && (
+                            <div className="absolute right-0 mt-2 w-64 bg-white rounded-lg shadow-lg border p-2 z-50">
+                              <div className="space-y-1">
+                                {[
+                                  { label: "Last 15 Minutes", value: 15, unit: "minutes" },
+                                  { label: "Last Hour", value: 1, unit: "hours" },
+                                  { label: "Last 4 Hours", value: 4, unit: "hours" },
+                                  { label: "Last 24 Hours", value: 24, unit: "hours" },
+                                  { label: "Last 7 Days", value: 7, unit: "days" },
+                                ].map((option) => (
+                                  <button
+                                    key={option.label}
+                                    className={`w-full px-3 py-2 text-left text-sm hover:bg-gray-50 rounded-md ${
+                                      getTimeRangeDisplay(isCustomDate, startTime, endTime) === option.label ? 'bg-blue-50 text-blue-600' : ''
+                                    }`}
+                                    onClick={() => {
+                                      setEndTime(moment().format("YYYY-MM-DDTHH:mm"));
+                                      setStartTime(
+                                        moment()
+                                          .subtract(option.value, option.unit as any)
+                                          .format("YYYY-MM-DDTHH:mm")
+                                      );
+                                      setQuickSelectOpen(false);
+                                      setIsCustomDate(false);
+                                    }}
+                                  >
+                                    {option.label}
+                                  </button>
+                                ))}
+                                <div className="border-t my-2" />
+                                <button
+                                  className={`w-full px-3 py-2 text-left text-sm hover:bg-gray-50 rounded-md ${
+                                    isCustomDate ? 'bg-blue-50 text-blue-600' : ''
+                                  }`}
+                                  onClick={() => setIsCustomDate(!isCustomDate)}
+                                >
+                                  Custom Range
+                                </button>
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                        
+                        <button
+                          onClick={handleRefresh}
+                          className="px-3 py-2 text-sm border rounded-md hover:bg-gray-50 flex items-center gap-2"
+                          title="Refresh data"
+                        >
+                          <svg
+                            className={`w-4 h-4 ${logs.isFetching ? 'animate-spin' : ''}`}
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                            />
+                          </svg>
+                          <span>Refresh</span>
+                        </button>
+                      </div>
+
+                      {isCustomDate && (
+                        <div className="flex items-center gap-2">
+                          <div>
+                            <input
+                              type="datetime-local"
+                              value={startTime}
+                              onChange={(e) => {
+                                setStartTime(e.target.value);
+                                setCurrentPage(1);
+                              }}
+                              className="px-3 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                            />
+                          </div>
+                          <span className="text-gray-500">to</span>
+                          <div>
+                            <input
+                              type="datetime-local"
+                              value={endTime}
+                              onChange={(e) => {
+                                setEndTime(e.target.value);
+                                setCurrentPage(1);
+                              }}
+                              className="px-3 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                            />
+                          </div>
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="flex items-center space-x-4">
+                      <span className="text-sm text-gray-700">
+                        Showing{" "}
+                        {logs.isLoading
+                          ? "..."
+                          : filteredLogs
+                          ? (currentPage - 1) * pageSize + 1
+                          : 0}{" "}
+                        -{" "}
+                        {logs.isLoading
+                          ? "..."
+                          : filteredLogs
+                          ? Math.min(currentPage * pageSize, filteredLogs.total)
+                          : 0}{" "}
+                        of{" "}
+                        {logs.isLoading
+                          ? "..."
+                          : filteredLogs
+                          ? filteredLogs.total
+                          : 0}{" "}
+                        results
+                      </span>
+                      <div className="flex items-center space-x-2">
+                        <span className="text-sm text-gray-700">
+                          Page {logs.isLoading ? "..." : currentPage} of{" "}
+                          {logs.isLoading
+                            ? "..."
+                            : filteredLogs
+                            ? filteredLogs.total_pages
+                            : 1}
+                        </span>
+                        <button
+                          onClick={() =>
+                            setCurrentPage((p) => Math.max(1, p - 1))
+                          }
+                          disabled={logs.isLoading || currentPage === 1}
+                          className="px-3 py-1 text-sm border rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                          Previous
+                        </button>
+                        <button
+                          onClick={() =>
+                            setCurrentPage((p) =>
+                              Math.min(
+                                filteredLogs.total_pages || 1,
+                                p + 1,
+                              ),
+                            )
+                          }
+                          disabled={
+                            logs.isLoading ||
+                            currentPage === (filteredLogs.total_pages || 1)
+                          }
+                          className="px-3 py-1 text-sm border rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                          Next
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <DataTable
+                  columns={columns}
+                  data={filteredData}
+                  renderSubComponent={RequestViewer}
+                  getRowCanExpand={() => true}
+                />
+              </div>
+              </>
+            )} 
+          </TabPanel>
+          <TabPanel>
+            <AuditLogs 
+              userID={userID}
+              userRole={userRole}
+              token={token}
+              accessToken={accessToken}
+              isActive={activeTab === "audit logs"}
+              premiumUser={premiumUser}
+              allTeams={allTeams}
+            />
+          </TabPanel>
+        </TabPanels>
+      </TabGroup>
     </div>
   );
 }
diff --git a/ui/litellm-dashboard/src/components/view_logs/logs_utils.tsx b/ui/litellm-dashboard/src/components/view_logs/logs_utils.tsx
new file mode 100644
index 00000000000..b19a5bbead3
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/view_logs/logs_utils.tsx
@@ -0,0 +1,21 @@
+import moment from "moment";
+
+// Add this function to format the time range display
+export const getTimeRangeDisplay = (isCustomDate: boolean, startTime: string, endTime: string) => {
+  if (isCustomDate) {
+    return `${moment(startTime).format('MMM D, h:mm A')} - ${moment(endTime).format('MMM D, h:mm A')}`;
+  }
+  
+  const now = moment();
+  const start = moment(startTime);
+  const diffMinutes = now.diff(start, 'minutes');
+  
+  if (diffMinutes <= 15) return 'Last 15 Minutes';
+  if (diffMinutes <= 60) return 'Last Hour';
+  
+  const diffHours = now.diff(start, 'hours');
+  if (diffHours <= 4) return 'Last 4 Hours';
+  if (diffHours <= 24) return 'Last 24 Hours';
+  if (diffHours <= 168) return 'Last 7 Days';
+  return `${start.format('MMM D')} - ${now.format('MMM D')}`;
+};
\ No newline at end of file