diff --git a/ui/litellm-dashboard/src/app/(dashboard)/customers/CustomersView.tsx b/ui/litellm-dashboard/src/app/(dashboard)/customers/CustomersView.tsx
index 2890306abdb..ccd4130ff49 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/customers/CustomersView.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/customers/CustomersView.tsx
@@ -1,14 +1,14 @@
 import React, { useState } from "react";
-import { Button, Card, Col, Grid, TabPanel, Text } from "@tremor/react";
+import { Button, Card, TabPanel, Text } from "@tremor/react";
 import { RefreshCw } from "lucide-react";
 import CustomersTable from "@/app/(dashboard)/customers/components/CustomersTable";
+import CustomerInfo from "@/app/(dashboard)/customers/components/CustomerInfo";
 import CreateCustomerModal from "@/app/(dashboard)/customers/components/modals/CreateCustomerModal";
-import CustomerInfoModal from "@/app/(dashboard)/customers/components/modals/CustomerInfoModal";
 import DeleteCustomerModal from "@/app/(dashboard)/customers/components/modals/DeleteCustomerModal";
 import CustomersHeaderTabs from "@/app/(dashboard)/customers/components/CustomersHeaderTabs";
 import CustomersFilters from "@/app/(dashboard)/customers/components/CustomersFilters";
 import type { Customer, NewCustomerData } from "@/app/(dashboard)/customers/types";
-import { customerCreateCall, customerDeleteCall, customerUpdateCall } from "@/components/networking";
+import { customerDeleteCall } from "@/components/networking";
 
 interface CustomersViewProps {
   customers: Customer[];
@@ -43,53 +43,48 @@ const CustomersView: React.FC<CustomersViewProps> = ({
   });
 
   const [showCreateModal, setShowCreateModal] = useState(false);
-  const [showInfoModal, setShowInfoModal] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [selectedCustomer, setSelectedCustomer] = useState<Customer | null>(null);
+  const [selectedCustomerId, setSelectedCustomerId] = useState<string | null>(null);
+  const [customerDetailDefaultTab, setCustomerDetailDefaultTab] = useState<"overview" | "settings">("overview");
   const [lastRefreshed, setLastRefreshed] = useState(new Date().toLocaleString("en-US"));
 
-  const handleCreateCustomer = async (data: NewCustomerData) => {
+  const handleCreateCustomer = async () => {
     if (!accessToken) return;
-
     try {
-      const response = await customerCreateCall(accessToken, data);
-      if (response) {
-        // Refresh the customer list
-        const { allEndUsersCall } = await import("@/components/networking");
-        const listData = await allEndUsersCall(accessToken);
-        if (listData) {
-          setCustomers(Array.isArray(listData) ? listData : []);
-        }
+      const { allEndUsersCall } = await import("@/components/networking");
+      const listData = await allEndUsersCall(accessToken);
+      if (listData) {
+        setCustomers(Array.isArray(listData) ? listData : []);
       }
       setShowCreateModal(false);
     } catch (error) {
-      console.error("Error creating customer:", error);
+      console.error("Error refreshing customers:", error);
     }
   };
 
   const handleEditCustomer = (customer: Customer) => {
+    setSelectedCustomerId(customer.user_id);
     setSelectedCustomer(customer);
-    setShowInfoModal(true);
+    setCustomerDetailDefaultTab("settings");
   };
 
   const handleViewInfo = (customer: Customer) => {
+    setSelectedCustomerId(customer.user_id);
     setSelectedCustomer(customer);
-    setShowInfoModal(true);
+    setCustomerDetailDefaultTab("overview");
   };
 
-  const handleSaveCustomer = async (updated: Customer) => {
-    if (!accessToken) return;
+  const handleCloseCustomerInfo = () => {
+    setSelectedCustomerId(null);
+    setSelectedCustomer(null);
+  };
 
-    try {
-      await customerUpdateCall(accessToken, updated);
-      setCustomers(
-        customers.map((c) => (c.user_id === updated.user_id ? updated : c))
-      );
-      setShowInfoModal(false);
-      setSelectedCustomer(null);
-    } catch (error) {
-      console.error("Error updating customer:", error);
-    }
+  const handleUpdateCustomer = (updated: Customer) => {
+    setCustomers((prev) =>
+      prev.map((c) => (c.user_id === updated.user_id ? updated : c))
+    );
+    setSelectedCustomer(updated);
   };
 
   const handleDeleteClick = (customer: Customer) => {
@@ -142,46 +137,67 @@ const CustomersView: React.FC<CustomersViewProps> = ({
     return matchesUserId && matchesAlias && matchesBlocked && matchesRegion;
   });
 
-  return (
-    <div className="w-full mx-4 h-[75vh]">
-      <Grid numItems={1} className="gap-2 p-8 w-full mt-2">
-        <Col numColSpan={1} className="flex flex-col gap-2">
-          {(userRole === "Admin" || userRole === "Org Admin") && (
-            <Button className="w-fit" onClick={() => setShowCreateModal(true)}>
-              + Create New Customer
-            </Button>
-          )}
+  const initialCustomerForDetail =
+    selectedCustomerId && selectedCustomer?.user_id === selectedCustomerId
+      ? selectedCustomer
+      : customers.find((c) => c.user_id === selectedCustomerId) ?? null;
 
-          <CustomersHeaderTabs lastRefreshed={lastRefreshed} onRefresh={handleRefresh} userRole={userRole}>
-            <TabPanel>
-              <Text>
-                Click on &ldquo;Customer ID&rdquo; to view customer details and manage settings.
-              </Text>
-              <Grid numItems={1} className="gap-2 pt-2 pb-2 h-[75vh] w-full mt-2">
-                <Col numColSpan={1}>
-                  <Card className="w-full mx-auto flex-auto overflow-hidden overflow-y-auto max-h-[50vh]">
-                    <div className="border-b px-6 py-4">
-                      <CustomersFilters
-                        filters={filters}
-                        showFilters={showFilters}
-                        onToggleFilters={setShowFilters}
-                        onChange={handleFilterChange}
-                        onReset={handleFilterReset}
-                      />
-                    </div>
-                    <CustomersTable
-                      customers={filteredCustomers}
-                      userRole={userRole}
-                      onEdit={handleEditCustomer}
-                      onDelete={handleDeleteClick}
-                      onViewInfo={handleViewInfo}
-                      isLoading={isLoading}
-                    />
-                  </Card>
-                </Col>
-              </Grid>
-            </TabPanel>
-          </CustomersHeaderTabs>
+  if (selectedCustomerId) {
+    return (
+      <div className="w-full max-w-full px-4 py-4 md:px-6">
+        <CustomerInfo
+          customerId={selectedCustomerId}
+          initialCustomer={initialCustomerForDetail}
+          onClose={handleCloseCustomerInfo}
+          onUpdate={handleUpdateCustomer}
+          accessToken={accessToken}
+          userRole={userRole}
+          defaultTab={customerDetailDefaultTab}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full max-w-full px-4 py-4 md:px-6">
+      <div className="flex flex-col gap-4">
+        {(userRole === "Admin" || userRole === "Org Admin") && (
+          <Button className="w-fit" onClick={() => setShowCreateModal(true)}>
+            + Create New Customer
+          </Button>
+        )}
+        <Text className="text-sm text-gray-500">
+          Customers are end-users of an AI application (e.g. users of your internal chat UI).
+        </Text>
+
+        <CustomersHeaderTabs lastRefreshed={lastRefreshed} onRefresh={handleRefresh} userRole={userRole}>
+          <TabPanel>
+            <Text className="block mb-3">
+              Click on &ldquo;Customer ID&rdquo; to view customer details and manage settings.
+            </Text>
+            <Card className="w-full overflow-hidden flex flex-col min-h-[400px]">
+              <div className="border-b px-4 sm:px-6 py-4 shrink-0">
+                <CustomersFilters
+                  filters={filters}
+                  showFilters={showFilters}
+                  onToggleFilters={setShowFilters}
+                  onChange={(key, value) => handleFilterChange(key as keyof FilterState, value)}
+                  onReset={handleFilterReset}
+                />
+              </div>
+              <div className="overflow-auto flex-1 min-h-0">
+                <CustomersTable
+                  customers={filteredCustomers}
+                  userRole={userRole}
+                  onEdit={handleEditCustomer}
+                  onDelete={handleDeleteClick}
+                  onViewInfo={handleViewInfo}
+                  isLoading={isLoading}
+                />
+              </div>
+            </Card>
+          </TabPanel>
+        </CustomersHeaderTabs>
 
           {(userRole === "Admin" || userRole === "Org Admin") && (
             <>
@@ -190,15 +206,6 @@ const CustomersView: React.FC<CustomersViewProps> = ({
                 onClose={() => setShowCreateModal(false)}
                 onCreate={handleCreateCustomer}
               />
-              <CustomerInfoModal
-                isOpen={showInfoModal}
-                onClose={() => {
-                  setShowInfoModal(false);
-                  setSelectedCustomer(null);
-                }}
-                customer={selectedCustomer}
-                onSave={handleSaveCustomer}
-              />
               <DeleteCustomerModal
                 isOpen={showDeleteModal}
                 onClose={() => {
@@ -211,8 +218,7 @@ const CustomersView: React.FC<CustomersViewProps> = ({
               />
             </>
           )}
-        </Col>
-      </Grid>
+      </div>
     </div>
   );
 };
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/customers/components/CustomerFormFields.tsx b/ui/litellm-dashboard/src/app/(dashboard)/customers/components/CustomerFormFields.tsx
new file mode 100644
index 00000000000..718891578eb
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/customers/components/CustomerFormFields.tsx
@@ -0,0 +1,91 @@
+import React from "react";
+import { Form, Input, InputNumber, Select as AntSelect, Switch } from "antd";
+import type { FormInstance } from "antd";
+
+interface CustomerFormFieldsProps {
+  form: FormInstance;
+  mode: "create" | "edit";
+  disabledFields?: string[];
+}
+
+const defaultModelOptions = [
+  { value: "", label: "None" },
+  { value: "gpt-4o", label: "gpt-4o" },
+  { value: "gpt-4o-mini", label: "gpt-4o-mini" },
+  { value: "gpt-4-turbo", label: "gpt-4-turbo" },
+  { value: "claude-3-sonnet", label: "claude-3-sonnet" },
+  { value: "claude-3-opus", label: "claude-3-opus" },
+  { value: "claude-3-haiku", label: "claude-3-haiku" },
+];
+
+const regionOptions = [
+  { value: "", label: "Any region" },
+  { value: "us", label: "US" },
+  { value: "eu", label: "EU" },
+];
+
+const CustomerFormFields: React.FC<CustomerFormFieldsProps> = ({
+  form,
+  mode,
+  disabledFields = [],
+}) => {
+  const isDisabled = (field: string) => disabledFields.includes(field);
+
+  return (
+    <>
+      <Form.Item label="Alias" name="alias">
+        <Input placeholder={mode === "create" ? "e.g. Acme Corp" : "Customer alias"} />
+      </Form.Item>
+
+      <div className="grid grid-cols-2 gap-4">
+        <Form.Item label="Max Budget" name="max_budget">
+          <InputNumber
+            className="w-full"
+            placeholder={mode === "create" ? "e.g. 500" : "No limit"}
+            min={0}
+            disabled={isDisabled("max_budget")}
+          />
+        </Form.Item>
+        <Form.Item label="Budget ID" name="budget_id">
+          <Input placeholder="e.g. free_tier" />
+        </Form.Item>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <Form.Item label="Default Model" name="default_model">
+          <AntSelect
+            placeholder={mode === "create" ? "Select model..." : "None"}
+            allowClear={mode === "edit"}
+            options={defaultModelOptions}
+          />
+        </Form.Item>
+        <Form.Item label="Allowed Region" name="allowed_model_region">
+          <AntSelect
+            placeholder="Any region"
+            allowClear={mode === "edit"}
+            options={regionOptions}
+          />
+        </Form.Item>
+      </div>
+
+      <Form.Item label="Budget Duration" name="budget_duration">
+        <Input placeholder={mode === "create" ? "e.g. 30d, 24h, 60m" : "e.g. 30d, 24h"} />
+      </Form.Item>
+
+      {mode === "edit" && (
+        <Form.Item label="Blocked" name="blocked" valuePropName="checked">
+          <div className="flex items-center gap-3">
+            <Switch />
+            <span className="text-sm text-gray-500">
+              {form.getFieldValue("blocked")
+                ? "This customer is currently blocked from making requests"
+                : "This customer can make requests normally"}
+            </span>
+          </div>
+        </Form.Item>
+      )}
+    </>
+  );
+};
+
+export default CustomerFormFields;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/customers/components/CustomerInfo.tsx b/ui/litellm-dashboard/src/app/(dashboard)/customers/components/CustomerInfo.tsx
new file mode 100644
index 00000000000..e66624aa5ef
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/customers/components/CustomerInfo.tsx
@@ -0,0 +1,326 @@
+import React, { useEffect, useState } from "react";
+import { Button, Form, Input, Tabs } from "antd";
+import { ArrowLeftIcon } from "@heroicons/react/outline";
+import { Badge, Card, Grid, Text, Title } from "@tremor/react";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { copyToClipboard as utilCopyToClipboard } from "@/utils/dataUtils";
+import { formatNumberWithCommas } from "@/utils/dataUtils";
+import { customerUpdateCall } from "@/components/networking";
+import type { Customer } from "@/app/(dashboard)/customers/types";
+import CustomerFormFields from "@/app/(dashboard)/customers/components/CustomerFormFields";
+import MCPServerSelector from "@/components/mcp_server_management/MCPServerSelector";
+import AgentSelector from "@/components/agent_management/AgentSelector";
+import MCPToolPermissions from "@/components/mcp_server_management/MCPToolPermissions";
+import ObjectPermissionsView from "@/components/object_permissions_view";
+
+export interface CustomerInfoProps {
+  customerId: string;
+  initialCustomer: Customer | null;
+  onClose: () => void;
+  onUpdate: (customer: Customer) => void;
+  accessToken: string | null;
+  userRole: string | null;
+  defaultTab?: "overview" | "settings";
+}
+
+const CustomerInfo: React.FC<CustomerInfoProps> = ({
+  customerId,
+  initialCustomer,
+  onClose,
+  onUpdate,
+  accessToken,
+  userRole,
+  defaultTab = "overview",
+}) => {
+  const [customer, setCustomer] = useState<Customer | null>(initialCustomer);
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [activeTab, setActiveTab] = useState(defaultTab);
+
+  useEffect(() => {
+    setCustomer(initialCustomer);
+  }, [initialCustomer]);
+
+  useEffect(() => {
+    if (customer) {
+      const op = customer.object_permission;
+      form.setFieldsValue({
+        ...customer,
+        max_budget: customer.litellm_budget_table?.max_budget,
+        budget_duration: customer.litellm_budget_table?.budget_duration,
+        allowed_mcp_servers_and_groups: {
+          servers: op?.mcp_servers ?? [],
+          accessGroups: op?.mcp_access_groups ?? [],
+        },
+        allowed_agents_and_groups: {
+          agents: op?.agents ?? [],
+          accessGroups: op?.agent_access_groups ?? [],
+        },
+        mcp_tool_permissions: op?.mcp_tool_permissions ?? {},
+      });
+    }
+  }, [customer, form]);
+
+  const copyToClipboard = async () => {
+    if (!customerId) return;
+    const success = await utilCopyToClipboard(customerId);
+    if (success) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const buildObjectPermission = (values: Record<string, any>) => {
+    const objPerm: {
+      mcp_servers?: string[];
+      mcp_access_groups?: string[];
+      mcp_tool_permissions?: Record<string, string[]>;
+      agents?: string[];
+      agent_access_groups?: string[];
+    } = {};
+    const mcp = values.allowed_mcp_servers_and_groups;
+    if (mcp && (mcp.servers?.length > 0 || mcp.accessGroups?.length > 0)) {
+      if (mcp.servers?.length) objPerm.mcp_servers = mcp.servers;
+      if (mcp.accessGroups?.length) objPerm.mcp_access_groups = mcp.accessGroups;
+    }
+    if (values.mcp_tool_permissions && Object.keys(values.mcp_tool_permissions).length > 0) {
+      objPerm.mcp_tool_permissions = values.mcp_tool_permissions;
+    }
+    const agents = values.allowed_agents_and_groups;
+    if (agents && (agents.agents?.length > 0 || agents.accessGroups?.length > 0)) {
+      if (agents.agents?.length) objPerm.agents = agents.agents;
+      if (agents.accessGroups?.length) objPerm.agent_access_groups = agents.accessGroups;
+    }
+    return Object.keys(objPerm).length > 0 ? objPerm : undefined;
+  };
+
+  const handleSave = async () => {
+    if (!customer || !accessToken) return;
+    try {
+      const values = await form.validateFields();
+      setLoading(true);
+      const {
+        allowed_mcp_servers_and_groups,
+        allowed_agents_and_groups,
+        mcp_tool_permissions,
+        ...rest
+      } = values;
+      const object_permission = buildObjectPermission(values);
+      const updated: Customer = {
+        ...customer,
+        ...rest,
+        ...(object_permission ? { object_permission } : {}),
+      };
+      await customerUpdateCall(accessToken, updated);
+      setCustomer(updated);
+      onUpdate(updated);
+    } catch (error) {
+      console.error("Validation failed:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const canEdit = userRole === "Admin" || userRole === "Org Admin";
+
+  if (!customer && !initialCustomer) {
+    return (
+      <div className="p-4">
+        <Button type="text" icon={<ArrowLeftIcon className="h-4 w-4" />} onClick={onClose} className="mb-4">
+          Back to Customers
+        </Button>
+        <Text>Customer not found.</Text>
+      </div>
+    );
+  }
+
+  const c = customer ?? initialCustomer!;
+  const displayName = c.alias || c.user_id;
+
+  return (
+    <div className="p-4">
+      <div className="flex justify-between items-center mb-6">
+        <div>
+          <Button
+            type="text"
+            icon={<ArrowLeftIcon className="h-4 w-4" />}
+            onClick={onClose}
+            className="mb-4"
+          >
+            Back to Customers
+          </Button>
+          <Title>{displayName}</Title>
+          <div className="flex items-center gap-2">
+            <Text className="text-gray-500 font-mono text-sm">{c.user_id}</Text>
+            <Button
+              type="text"
+              size="small"
+              icon={copied ? <CheckIcon size={12} /> : <CopyIcon size={12} />}
+              onClick={copyToClipboard}
+              className={copied ? "text-green-600" : "text-gray-500 hover:text-gray-700"}
+            />
+          </div>
+        </div>
+      </div>
+
+      <Tabs
+        activeKey={activeTab}
+        onChange={(key) => setActiveTab(key as "overview" | "settings")}
+        className="mb-4"
+        items={[
+          {
+            key: "overview",
+            label: "Overview",
+            children: (
+              <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-6">
+                <Card>
+                  <Text>Spend (USD)</Text>
+                  <div className="mt-2">
+                    <Title>${formatNumberWithCommas(c.spend, 4)}</Title>
+                  </div>
+                </Card>
+                <Card>
+                  <Text>Budget (USD)</Text>
+                  <div className="mt-2">
+                    <Text>
+                      {c.litellm_budget_table?.max_budget != null
+                        ? `$${formatNumberWithCommas(c.litellm_budget_table.max_budget, 4)}`
+                        : "No limit"}
+                    </Text>
+                    {c.litellm_budget_table?.budget_duration && (
+                      <Text className="text-gray-500 block">Duration: {c.litellm_budget_table.budget_duration}</Text>
+                    )}
+                  </div>
+                </Card>
+                <Card>
+                  <Text>Default Model</Text>
+                  <div className="mt-2">
+                    {c.default_model ? (
+                      <Badge color="gray">{c.default_model}</Badge>
+                    ) : (
+                      <Text className="text-gray-500">—</Text>
+                    )}
+                  </div>
+                </Card>
+                <Card>
+                  <Text>Region</Text>
+                  <div className="mt-2">
+                    <Text>{c.allowed_model_region ? c.allowed_model_region.toUpperCase() : "Any"}</Text>
+                  </div>
+                </Card>
+                <Card>
+                  <Text>Status</Text>
+                  <div className="mt-2">
+                    {c.blocked ? (
+                      <Badge color="red">Blocked</Badge>
+                    ) : (
+                      <Badge color="green">Active</Badge>
+                    )}
+                  </div>
+                </Card>
+
+                <ObjectPermissionsView
+                  objectPermission={{
+                    object_permission_id: "",
+                    vector_stores: [],
+                    mcp_servers: c.object_permission?.mcp_servers ?? [],
+                    mcp_access_groups: c.object_permission?.mcp_access_groups ?? [],
+                    mcp_tool_permissions: c.object_permission?.mcp_tool_permissions ?? {},
+                    agents: c.object_permission?.agents ?? [],
+                    agent_access_groups: c.object_permission?.agent_access_groups ?? [],
+                  }}
+                  variant="card"
+                  accessToken={accessToken}
+                />
+              </Grid>
+            ),
+          },
+          ...(canEdit
+            ? [
+                {
+                  key: "settings",
+                  label: "Settings",
+                  children: (
+                    <Card className="overflow-y-auto max-h-[65vh]">
+                      <div className="flex justify-between items-center mb-4">
+                        <Title>Customer Settings</Title>
+                      </div>
+                      <Form form={form} layout="vertical" onFinish={handleSave}>
+                        <Form.Item label="Customer ID">
+                          <Input value={c.user_id} disabled className="font-mono bg-gray-50" />
+                        </Form.Item>
+                        <Form.Item label="Spend (USD)">
+                          <Input value={c.spend.toFixed(4)} disabled className="bg-gray-50" />
+                        </Form.Item>
+                        <CustomerFormFields form={form} mode="edit" />
+
+                        <div className="pt-6 mt-6 border-t border-gray-200">
+                          <Text className="font-semibold text-gray-900 block mb-3">MCP Servers / Access Groups</Text>
+                          <Form.Item
+                            name="allowed_mcp_servers_and_groups"
+                            help="Select MCP servers or access groups this customer can access"
+                          >
+                            <MCPServerSelector
+                              onChange={(val: any) => form.setFieldValue("allowed_mcp_servers_and_groups", val)}
+                              value={form.getFieldValue("allowed_mcp_servers_and_groups")}
+                              accessToken={accessToken || ""}
+                              placeholder="Select MCP servers or access groups (optional)"
+                            />
+                          </Form.Item>
+                          <Form.Item name="mcp_tool_permissions" initialValue={{}} hidden>
+                            <Input type="hidden" />
+                          </Form.Item>
+                          <Form.Item
+                            noStyle
+                            shouldUpdate={(prevValues, currentValues) =>
+                              prevValues.allowed_mcp_servers_and_groups !== currentValues.allowed_mcp_servers_and_groups ||
+                              prevValues.mcp_tool_permissions !== currentValues.mcp_tool_permissions
+                            }
+                          >
+                            {() => (
+                              <div className="mb-6">
+                                <MCPToolPermissions
+                                  accessToken={accessToken || ""}
+                                  selectedServers={form.getFieldValue("allowed_mcp_servers_and_groups")?.servers || []}
+                                  toolPermissions={form.getFieldValue("mcp_tool_permissions") || {}}
+                                  onChange={(toolPerms) => form.setFieldsValue({ mcp_tool_permissions: toolPerms })}
+                                />
+                              </div>
+                            )}
+                          </Form.Item>
+                        </div>
+
+                        <div className="pt-6 mt-6 border-t border-gray-200">
+                          <Text className="font-semibold text-gray-900 block mb-3">Agents / Access Groups</Text>
+                          <Form.Item
+                            name="allowed_agents_and_groups"
+                            help="Select agents or access groups this customer can access"
+                          >
+                            <AgentSelector
+                              onChange={(val: any) => form.setFieldValue("allowed_agents_and_groups", val)}
+                              value={form.getFieldValue("allowed_agents_and_groups")}
+                              accessToken={accessToken || ""}
+                              placeholder="Select agents or access groups (optional)"
+                            />
+                          </Form.Item>
+                        </div>
+
+                        <Form.Item className="mt-6 mb-0">
+                          <Button type="primary" htmlType="submit" loading={loading}>
+                            Save Changes
+                          </Button>
+                        </Form.Item>
+                      </Form>
+                    </Card>
+                  ),
+                },
+              ]
+            : []),
+        ]}
+      />
+    </div>
+  );
+};
+
+export default CustomerInfo;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/customers/components/CustomersHeaderTabs.tsx b/ui/litellm-dashboard/src/app/(dashboard)/customers/components/CustomersHeaderTabs.tsx
index 951f46b78ae..28bf7245dbe 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/customers/components/CustomersHeaderTabs.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/customers/components/CustomersHeaderTabs.tsx
@@ -16,18 +16,15 @@ const CustomersHeaderTabs: React.FC<CustomersHeaderTabsProps> = ({
   children,
 }) => {
   return (
-    <div>
-      <div className="flex items-center justify-between mb-2">
-        <TabGroup>
-          <TabList className="mt-2">
-            <Tab>Your Customers</Tab>
-            {(userRole === "Admin" || userRole === "Org Admin") && (
-              <Tab>Customer Settings</Tab>
-            )}
-          </TabList>
-          <TabPanels>{children}</TabPanels>
-        </TabGroup>
-        <div className="flex items-center gap-2 text-xs text-gray-500">
+    <TabGroup className="w-full">
+      <div className="flex items-center justify-between gap-4 mb-2">
+        <TabList className="mt-2">
+          <Tab>Your Customers</Tab>
+          {(userRole === "Admin" || userRole === "Org Admin") && (
+            <Tab>Customer Settings</Tab>
+          )}
+        </TabList>
+        <div className="flex items-center gap-2 text-xs text-gray-500 shrink-0">
           <Text>Last Refreshed: {lastRefreshed}</Text>
           <button
             onClick={onRefresh}
@@ -38,7 +35,8 @@ const CustomersHeaderTabs: React.FC<CustomersHeaderTabsProps> = ({
           </button>
         </div>
       </div>
-    </div>
+      <TabPanels>{children}</TabPanels>
+    </TabGroup>
   );
 };
 
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/customers/components/modals/CreateCustomerModal.tsx b/ui/litellm-dashboard/src/app/(dashboard)/customers/components/modals/CreateCustomerModal.tsx
index 46d4648c427..1d944753bbc 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/customers/components/modals/CreateCustomerModal.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/customers/components/modals/CreateCustomerModal.tsx
@@ -1,11 +1,20 @@
-import React, { useState } from "react";
-import { Modal, Form, Input, InputNumber, Select as AntSelect } from "antd";
+import React, { useEffect, useState } from "react";
+import { Modal, Form, Input } from "antd";
+import { Accordion, AccordionBody, AccordionHeader } from "@tremor/react";
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { Tooltip } from "antd";
 import type { NewCustomerData } from "@/app/(dashboard)/customers/types";
+import CustomerFormFields from "@/app/(dashboard)/customers/components/CustomerFormFields";
+import MCPServerSelector from "@/components/mcp_server_management/MCPServerSelector";
+import AgentSelector from "@/components/agent_management/AgentSelector";
+import MCPToolPermissions from "@/components/mcp_server_management/MCPToolPermissions";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import { customerCreateCall, fetchMCPAccessGroups } from "@/components/networking";
 
 interface CreateCustomerModalProps {
   isOpen: boolean;
   onClose: () => void;
-  onCreate: (customer: NewCustomerData) => void;
+  onCreate: (customer?: NewCustomerData) => void;
 }
 
 const CreateCustomerModal: React.FC<CreateCustomerModalProps> = ({
@@ -13,15 +22,59 @@ const CreateCustomerModal: React.FC<CreateCustomerModalProps> = ({
   onClose,
   onCreate,
 }) => {
+  const { accessToken } = useAuthorized();
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
 
+  useEffect(() => {
+    const loadMCPAccessGroups = async () => {
+      if (!accessToken) return;
+      try {
+        await fetchMCPAccessGroups(accessToken);
+      } catch (error) {
+        console.error("Failed to fetch MCP access groups:", error);
+      }
+    };
+    if (isOpen) loadMCPAccessGroups();
+  }, [accessToken, isOpen]);
+
+  const buildObjectPermission = (values: Record<string, any>) => {
+    const objPerm: {
+      mcp_servers?: string[];
+      mcp_access_groups?: string[];
+      mcp_tool_permissions?: Record<string, string[]>;
+      agents?: string[];
+      agent_access_groups?: string[];
+    } = {};
+    const mcp = values.allowed_mcp_servers_and_groups;
+    if (mcp && (mcp.servers?.length > 0 || mcp.accessGroups?.length > 0)) {
+      if (mcp.servers?.length) objPerm.mcp_servers = mcp.servers;
+      if (mcp.accessGroups?.length) objPerm.mcp_access_groups = mcp.accessGroups;
+    }
+    if (values.mcp_tool_permissions && Object.keys(values.mcp_tool_permissions).length > 0) {
+      objPerm.mcp_tool_permissions = values.mcp_tool_permissions;
+    }
+    const agents = values.allowed_agents_and_groups;
+    if (agents && (agents.agents?.length > 0 || agents.accessGroups?.length > 0)) {
+      if (agents.agents?.length) objPerm.agents = agents.agents;
+      if (agents.accessGroups?.length) objPerm.agent_access_groups = agents.accessGroups;
+    }
+    return Object.keys(objPerm).length > 0 ? objPerm : undefined;
+  };
+
   const handleOk = async () => {
+    if (!accessToken) return;
     try {
       const values = await form.validateFields();
       setLoading(true);
-      onCreate(values);
+      const { allowed_mcp_servers_and_groups, allowed_agents_and_groups, mcp_tool_permissions, ...rest } = values;
+      const payload: any = { ...rest };
+      const object_permission = buildObjectPermission(values);
+      if (object_permission) payload.object_permission = object_permission;
+      await customerCreateCall(accessToken, payload);
       form.resetFields();
+      onCreate();
+      onClose();
     } catch (error) {
       console.error("Validation failed:", error);
     } finally {
@@ -44,11 +97,7 @@ const CreateCustomerModal: React.FC<CreateCustomerModalProps> = ({
       okText="Create Customer"
       width={600}
     >
-      <Form
-        form={form}
-        layout="vertical"
-        className="mt-4"
-      >
+      <Form form={form} layout="vertical" className="mt-4">
         <Form.Item
           label="User ID"
           name="user_id"
@@ -57,78 +106,90 @@ const CreateCustomerModal: React.FC<CreateCustomerModalProps> = ({
           <Input placeholder="e.g. customer-007" />
         </Form.Item>
 
-        <Form.Item
-          label="Alias"
-          name="alias"
-        >
-          <Input placeholder="e.g. Acme Corp" />
+        <CustomerFormFields form={form} mode="create" />
+
+        <Form.Item label="Metadata (JSON)" name="metadata" initialValue="{}">
+          <Input.TextArea rows={3} className="font-mono" placeholder="{}" />
         </Form.Item>
 
-        <div className="grid grid-cols-2 gap-4">
-          <Form.Item
-            label="Max Budget"
-            name="max_budget"
-          >
-            <InputNumber
-              className="w-full"
-              placeholder="e.g. 500"
-              min={0}
-            />
-          </Form.Item>
+        <Accordion className="mt-4 mb-4">
+          <AccordionHeader>
+            <b>MCP Settings</b>
+          </AccordionHeader>
+          <AccordionBody>
+            <Form.Item
+              label={
+                <span>
+                  Allowed MCP Servers{" "}
+                  <Tooltip title="Select which MCP servers or access groups this customer can access">
+                    <InfoCircleOutlined style={{ marginLeft: "4px" }} />
+                  </Tooltip>
+                </span>
+              }
+              name="allowed_mcp_servers_and_groups"
+              initialValue={{ servers: [], accessGroups: [] }}
+              className="mt-4"
+              help="Select MCP servers or access groups this customer can access"
+            >
+              <MCPServerSelector
+                onChange={(val: any) => form.setFieldValue("allowed_mcp_servers_and_groups", val)}
+                value={form.getFieldValue("allowed_mcp_servers_and_groups")}
+                accessToken={accessToken || ""}
+                placeholder="Select MCP servers or access groups (optional)"
+              />
+            </Form.Item>
+            <Form.Item name="mcp_tool_permissions" initialValue={{}} hidden>
+              <Input type="hidden" />
+            </Form.Item>
+            <Form.Item
+              noStyle
+              shouldUpdate={(prevValues, currentValues) =>
+                prevValues.allowed_mcp_servers_and_groups !== currentValues.allowed_mcp_servers_and_groups ||
+                prevValues.mcp_tool_permissions !== currentValues.mcp_tool_permissions
+              }
+            >
+              {() => (
+                <div className="mt-6">
+                  <MCPToolPermissions
+                    accessToken={accessToken || ""}
+                    selectedServers={form.getFieldValue("allowed_mcp_servers_and_groups")?.servers || []}
+                    toolPermissions={form.getFieldValue("mcp_tool_permissions") || {}}
+                    onChange={(toolPerms) => form.setFieldsValue({ mcp_tool_permissions: toolPerms })}
+                  />
+                </div>
+              )}
+            </Form.Item>
+          </AccordionBody>
+        </Accordion>
 
-          <Form.Item
-            label="Budget ID"
-            name="budget_id"
-          >
-            <Input placeholder="e.g. free_tier" />
-          </Form.Item>
-        </div>
-
-        <div className="grid grid-cols-2 gap-4">
-          <Form.Item
-            label="Default Model"
-            name="default_model"
-          >
-            <AntSelect placeholder="Select model...">
-              <AntSelect.Option value="gpt-4o">gpt-4o</AntSelect.Option>
-              <AntSelect.Option value="gpt-4o-mini">gpt-4o-mini</AntSelect.Option>
-              <AntSelect.Option value="gpt-4-turbo">gpt-4-turbo</AntSelect.Option>
-              <AntSelect.Option value="claude-3-sonnet">claude-3-sonnet</AntSelect.Option>
-              <AntSelect.Option value="claude-3-opus">claude-3-opus</AntSelect.Option>
-              <AntSelect.Option value="claude-3-haiku">claude-3-haiku</AntSelect.Option>
-            </AntSelect>
-          </Form.Item>
-
-          <Form.Item
-            label="Allowed Region"
-            name="allowed_model_region"
-          >
-            <AntSelect placeholder="Any region">
-              <AntSelect.Option value="">Any region</AntSelect.Option>
-              <AntSelect.Option value="us">US</AntSelect.Option>
-              <AntSelect.Option value="eu">EU</AntSelect.Option>
-            </AntSelect>
-          </Form.Item>
-        </div>
-
-        <Form.Item
-          label="Budget Duration"
-          name="budget_duration"
-        >
-          <Input placeholder="e.g. 30d, 24h, 60m" />
-        </Form.Item>
-
-        <Form.Item
-          label="Metadata (JSON)"
-          name="metadata"
-          initialValue="{}"
-        >
-          <Input.TextArea
-            rows={3}
-            className="font-mono"
-            placeholder="{}"
-          />
-        </Form.Item>
+        <Accordion className="mt-4 mb-4">
+          <AccordionHeader>
+            <b>Agent Settings</b>
+          </AccordionHeader>
+          <AccordionBody>
+            <Form.Item
+              label={
+                <span>
+                  Allowed Agents{" "}
+                  <Tooltip title="Select which agents or access groups this customer can access">
+                    <InfoCircleOutlined style={{ marginLeft: "4px" }} />
+                  </Tooltip>
+                </span>
+              }
+              name="allowed_agents_and_groups"
+              initialValue={{ agents: [], accessGroups: [] }}
+              className="mt-4"
+              help="Select agents or access groups this customer can access"
+            >
+              <AgentSelector
+                onChange={(val: any) => form.setFieldValue("allowed_agents_and_groups", val)}
+                value={form.getFieldValue("allowed_agents_and_groups")}
+                accessToken={accessToken || ""}
+                placeholder="Select agents or access groups (optional)"
+              />
+            </Form.Item>
+          </AccordionBody>
+        </Accordion>
       </Form>
     </Modal>
   );
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/customers/types.ts b/ui/litellm-dashboard/src/app/(dashboard)/customers/types.ts
index f054a9493a6..704172aca41 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/customers/types.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/customers/types.ts
@@ -1,3 +1,11 @@
+export interface CustomerObjectPermission {
+  mcp_servers?: string[];
+  mcp_access_groups?: string[];
+  mcp_tool_permissions?: Record<string, string[]>;
+  agents?: string[];
+  agent_access_groups?: string[];
+}
+
 export interface Customer {
   user_id: string;
   alias: string | null;
@@ -12,6 +20,7 @@ export interface Customer {
     max_budget: number | null;
     budget_duration: string | null;
   } | null;
+  object_permission?: CustomerObjectPermission | null;
 }
 
 export interface NewCustomerData {
@@ -23,4 +32,5 @@ export interface NewCustomerData {
   allowed_model_region?: string;
   budget_duration?: string;
   metadata?: string;
+  object_permission?: CustomerObjectPermission;
 }
diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index ae3bd76e3cf..d4522646724 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -4,6 +4,7 @@ import APIReferenceView from "@/app/(dashboard)/api-reference/APIReferenceView";
 import SidebarProvider from "@/app/(dashboard)/components/SidebarProvider";
 import OldModelDashboard from "@/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView";
 import PlaygroundPage from "@/app/(dashboard)/playground/page";
+import CustomersPage from "@/app/(dashboard)/customers/page";
 import AdminPanel from "@/components/AdminPanel";
 import AgentsPanel from "@/components/agents";
 import BudgetPanel from "@/components/budgets/budget_panel";
@@ -459,6 +460,8 @@ function CreateKeyPageContent() {
                       premiumUser={premiumUser}
                       searchParams={searchParams}
                     />
+                  ) : page == "customers" ? (
+                    <CustomersPage />
                   ) : page == "organizations" ? (
                     <Organizations
                       organizations={organizations}
diff --git a/ui/litellm-dashboard/src/components/leftnav.tsx b/ui/litellm-dashboard/src/components/leftnav.tsx
index 150be88de21..6233d2463fc 100644
--- a/ui/litellm-dashboard/src/components/leftnav.tsx
+++ b/ui/litellm-dashboard/src/components/leftnav.tsx
@@ -9,6 +9,7 @@ import {
   BgColorsOutlined,
   BlockOutlined,
   BookOutlined,
+  ContactsOutlined,
   CreditCardOutlined,
   DatabaseOutlined,
   ExperimentOutlined,
@@ -172,6 +173,17 @@ const menuGroups: MenuGroup[] = [
         label: "Teams",
         icon: <TeamOutlined />,
       },
+      {
+        key: "customers",
+        page: "customers",
+        label: (
+          <span className="flex items-center gap-2">
+            Customers <NewBadge />
+          </span>
+        ),
+        icon: <ContactsOutlined />,
+        roles: all_admin_roles,
+      },
       {
         key: "organizations",
         page: "organizations",