From ac4da5c13491abc5c0e4d2a64f29f8791c440f2f Mon Sep 17 00:00:00 2001
From: ryan-crabbe-berri <ryan@berri.ai>
Date: Sat, 11 Jul 2026 16:01:07 -0700
Subject: [PATCH 1/2] refactor(ui): colocate the usage view, keeping the shared
 usage components

Split for the usage (UsagePage) segment. Most of the folder is the usage page's
own view, but four pieces are reused elsewhere and stay in @/components/UsagePage:
TopKeyView (old-usage), KeyModelUsageView and value_formatters (activity_metrics),
and the shared types (activity_metrics, chartUtils). The other 21 files move into
usage/_components, preserving the folder structure.

The external consumers import only the retained files, so they are untouched. The
moved files' imports of the retained files become @/components/UsagePage paths,
other escaping relative imports are absolutized, and lint suppressions are re-keyed
for moved files only. No behavior change.
---
 ui/litellm-dashboard/eslint-suppressions.json | 18 +++++-----
 .../EndpointUsage/EndpointUsage.test.tsx      |  0
 .../EndpointUsage/EndpointUsage.tsx           |  2 +-
 .../components/EndpointUsageBarChart.test.tsx |  0
 .../components/EndpointUsageBarChart.tsx      |  2 +-
 .../EndpointUsageLineChart.test.tsx           |  0
 .../components/EndpointUsageLineChart.tsx     |  2 +-
 .../components/EndpointUsageTable.test.tsx    |  0
 .../components/EndpointUsageTable.tsx         |  2 +-
 .../EntityUsage/EntityUsage.test.tsx          | 14 ++++----
 .../components/EntityUsage/EntityUsage.tsx    | 24 +++++++++-----
 .../EntityUsage/SpendByProvider.test.tsx      |  4 +--
 .../EntityUsage/SpendByProvider.tsx           |  4 +--
 .../EntityUsage/TopModelView.test.tsx         |  0
 .../components/EntityUsage/TopModelView.tsx   |  4 +--
 .../components/UsageAIChatPanel.test.tsx      |  4 +--
 .../components/UsageAIChatPanel.tsx           |  2 +-
 .../components/UsagePageView.test.tsx         | 22 ++++++-------
 .../_components}/components/UsagePageView.tsx | 33 +++++++++++--------
 .../UsageViewSelect/UsageViewSelect.test.tsx  |  0
 .../UsageViewSelect/UsageViewSelect.tsx       |  0
 .../hooks/usePaginatedDailyActivity.ts        |  2 +-
 .../src/app/(dashboard)/usage/page.tsx        |  2 +-
 23 files changed, 76 insertions(+), 65 deletions(-)
 rename ui/litellm-dashboard/src/{components/UsagePage => app/(dashboard)/usage/_components}/components/EndpointUsage/EndpointUsage.test.tsx (100%)
 rename ui/litellm-dashboard/src/{components/UsagePage => app/(dashboard)/usage/_components}/components/EndpointUsage/EndpointUsage.tsx (97%)
 rename ui/litellm-dashboard/src/{components/UsagePage => app/(dashboard)/usage/_components}/components/EndpointUsage/components/EndpointUsageBarChart.test.tsx (100%)
 rename ui/litellm-dashboard/src/{components/UsagePage => app/(dashboard)/usage/_components}/components/EndpointUsage/components/EndpointUsageBarChart.tsx (96%)
 rename ui/litellm-dashboard/src/{components/UsagePage => app/(dashboard)/usage/_components}/components/EndpointUsage/components/EndpointUsageLineChart.test.tsx (100%)
 rename ui/litellm-dashboard/src/{components/UsagePage => app/(dashboard)/usage/_components}/components/EndpointUsage/components/EndpointUsageLineChart.tsx (97%)
 rename ui/litellm-dashboard/src/{components/UsagePage => app/(dashboard)/usage/_components}/components/EndpointUsage/components/EndpointUsageTable.test.tsx (100%)
 rename ui/litellm-dashboard/src/{components/UsagePage => app/(dashboard)/usage/_components}/components/EndpointUsage/components/EndpointUsageTable.tsx (98%)
 rename ui/litellm-dashboard/src/{components/UsagePage => app/(dashboard)/usage/_components}/components/EntityUsage/EntityUsage.test.tsx (98%)
 rename ui/litellm-dashboard/src/{components/UsagePage => app/(dashboard)/usage/_components}/components/EntityUsage/EntityUsage.tsx (97%)
 rename ui/litellm-dashboard/src/{components/UsagePage => app/(dashboard)/usage/_components}/components/EntityUsage/SpendByProvider.test.tsx (98%)
 rename ui/litellm-dashboard/src/{components/UsagePage => app/(dashboard)/usage/_components}/components/EntityUsage/SpendByProvider.tsx (96%)
 rename ui/litellm-dashboard/src/{components/UsagePage => app/(dashboard)/usage/_components}/components/EntityUsage/TopModelView.test.tsx (100%)
 rename ui/litellm-dashboard/src/{components/UsagePage => app/(dashboard)/usage/_components}/components/EntityUsage/TopModelView.tsx (96%)
 rename ui/litellm-dashboard/src/{components/UsagePage => app/(dashboard)/usage/_components}/components/UsageAIChatPanel.test.tsx (96%)
 rename ui/litellm-dashboard/src/{components/UsagePage => app/(dashboard)/usage/_components}/components/UsageAIChatPanel.tsx (99%)
 rename ui/litellm-dashboard/src/{components/UsagePage => app/(dashboard)/usage/_components}/components/UsagePageView.test.tsx (98%)
 rename ui/litellm-dashboard/src/{components/UsagePage => app/(dashboard)/usage/_components}/components/UsagePageView.tsx (97%)
 rename ui/litellm-dashboard/src/{components/UsagePage => app/(dashboard)/usage/_components}/components/UsageViewSelect/UsageViewSelect.test.tsx (100%)
 rename ui/litellm-dashboard/src/{components/UsagePage => app/(dashboard)/usage/_components}/components/UsageViewSelect/UsageViewSelect.tsx (100%)
 rename ui/litellm-dashboard/src/{components/UsagePage => app/(dashboard)/usage/_components}/hooks/usePaginatedDailyActivity.ts (99%)

diff --git a/ui/litellm-dashboard/eslint-suppressions.json b/ui/litellm-dashboard/eslint-suppressions.json
index f328ecbdcfa5..f033847a5343 100644
--- a/ui/litellm-dashboard/eslint-suppressions.json
+++ b/ui/litellm-dashboard/eslint-suppressions.json
@@ -1502,27 +1502,27 @@
       "count": 1
     }
   },
-  "src/components/UsagePage/components/EndpointUsage/components/EndpointUsageBarChart.tsx": {
+  "src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageBarChart.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/UsagePage/components/EndpointUsage/components/EndpointUsageLineChart.tsx": {
+  "src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageLineChart.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/UsagePage/components/EndpointUsage/components/EndpointUsageTable.tsx": {
+  "src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageTable.tsx": {
     "no-nested-ternary": {
       "count": 1
     }
   },
-  "src/components/UsagePage/components/EntityUsage/EntityUsage.tsx": {
+  "src/app/(dashboard)/usage/_components/components/EntityUsage/EntityUsage.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/UsagePage/components/EntityUsage/SpendByProvider.tsx": {
+  "src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
@@ -1532,7 +1532,7 @@
       "count": 1
     }
   },
-  "src/components/UsagePage/components/EntityUsage/TopModelView.tsx": {
+  "src/app/(dashboard)/usage/_components/components/EntityUsage/TopModelView.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
@@ -1542,7 +1542,7 @@
       "count": 1
     }
   },
-  "src/components/UsagePage/components/UsageAIChatPanel.tsx": {
+  "src/app/(dashboard)/usage/_components/components/UsageAIChatPanel.tsx": {
     "no-nested-ternary": {
       "count": 1
     },
@@ -1550,7 +1550,7 @@
       "count": 1
     }
   },
-  "src/components/UsagePage/components/UsagePageView.tsx": {
+  "src/app/(dashboard)/usage/_components/components/UsagePageView.tsx": {
     "no-nested-ternary": {
       "count": 1
     },
@@ -1564,7 +1564,7 @@
       "count": 3
     }
   },
-  "src/components/UsagePage/hooks/usePaginatedDailyActivity.ts": {
+  "src/app/(dashboard)/usage/_components/hooks/usePaginatedDailyActivity.ts": {
     "react-hooks/refs": {
       "count": 1
     },
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/EndpointUsage.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/EndpointUsage.test.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/EndpointUsage.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/EndpointUsage.test.tsx
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/EndpointUsage.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/EndpointUsage.tsx
similarity index 97%
rename from ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/EndpointUsage.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/EndpointUsage.tsx
index 68959405a8f0..64fdb13a0b9d 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/EndpointUsage.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/EndpointUsage.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import EndpointUsageBarChart from "./components/EndpointUsageBarChart";
 import EndpointUsageLineChart from "./components/EndpointUsageLineChart";
 import EndpointUsageTable from "./components/EndpointUsageTable";
-import { DailyData, MetricWithMetadata } from "../../types";
+import { DailyData, MetricWithMetadata } from "@/components/UsagePage/types";
 
 interface EndpointUsageProps {
   userSpendData?: {
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/components/EndpointUsageBarChart.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageBarChart.test.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/components/EndpointUsageBarChart.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageBarChart.test.tsx
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/components/EndpointUsageBarChart.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageBarChart.tsx
similarity index 96%
rename from ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/components/EndpointUsageBarChart.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageBarChart.tsx
index dd712fdb2320..2badbe308683 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/components/EndpointUsageBarChart.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageBarChart.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { BarChart, Card, Title } from "@tremor/react";
 import { CustomLegend, CustomTooltip } from "@/components/common_components/chartUtils";
-import { MetricWithMetadata } from "../../../types";
+import { MetricWithMetadata } from "@/components/UsagePage/types";
 
 interface EndpointUsageBarChartProps {
   endpointData?: Record<string, MetricWithMetadata>;
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/components/EndpointUsageLineChart.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageLineChart.test.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/components/EndpointUsageLineChart.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageLineChart.test.tsx
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/components/EndpointUsageLineChart.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageLineChart.tsx
similarity index 97%
rename from ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/components/EndpointUsageLineChart.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageLineChart.tsx
index 564eaa1fe857..9f838d6156a7 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/components/EndpointUsageLineChart.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageLineChart.tsx
@@ -1,6 +1,6 @@
 import { Card, LineChart, Title } from "@tremor/react";
 import { useMemo } from "react";
-import { DailyData } from "../../../types";
+import { DailyData } from "@/components/UsagePage/types";
 
 interface EndpointUsageLineChartProps {
   dailyData?: { results: DailyData[] };
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/components/EndpointUsageTable.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageTable.test.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/components/EndpointUsageTable.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageTable.test.tsx
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/components/EndpointUsageTable.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageTable.tsx
similarity index 98%
rename from ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/components/EndpointUsageTable.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageTable.tsx
index 88f92360ab58..60282b2fa1dd 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/EndpointUsage/components/EndpointUsageTable.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageTable.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Table, Progress } from "antd";
 import type { ColumnsType } from "antd/es/table";
 import { MoneyCell } from "@/components/shared/table_cells";
-import { MetricWithMetadata } from "../../../types";
+import { MetricWithMetadata } from "@/components/UsagePage/types";
 
 interface EndpointUsageTableProps {
   endpointData: Record<string, MetricWithMetadata>;
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/EntityUsage.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/EntityUsage.test.tsx
similarity index 98%
rename from ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/EntityUsage.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/EntityUsage.test.tsx
index 15f572717e75..af4575a8ba63 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/EntityUsage.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/EntityUsage.test.tsx
@@ -1,6 +1,6 @@
 import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
-import * as networking from "../../../networking";
+import * as networking from "@/components/networking";
 import EntityUsage from "./EntityUsage";
 
 beforeAll(() => {
@@ -14,7 +14,7 @@ beforeAll(() => {
 });
 
 // Mock the networking module
-vi.mock("../../../networking", () => ({
+vi.mock("@/components/networking", () => ({
   tagDailyActivityCall: vi.fn(),
   teamDailyActivityCall: vi.fn(),
   organizationDailyActivityCall: vi.fn(),
@@ -24,12 +24,12 @@ vi.mock("../../../networking", () => ({
 }));
 
 // Mock the child components to simplify testing
-vi.mock("../../../activity_metrics", () => ({
+vi.mock("@/components/activity_metrics", () => ({
   ActivityMetrics: () => <div>Activity Metrics</div>,
   processActivityData: () => ({ data: [], metadata: {} }),
 }));
 
-vi.mock("./TopKeyView", () => ({
+vi.mock("@/components/UsagePage/components/EntityUsage/TopKeyView", () => ({
   default: () => <div>Top Keys</div>,
 }));
 
@@ -37,15 +37,15 @@ vi.mock("./TopModelView", () => ({
   default: () => <div>Top Models</div>,
 }));
 
-vi.mock("../../../EntityUsageExport/EntityUsageExportModal", () => ({
+vi.mock("@/components/EntityUsageExport/EntityUsageExportModal", () => ({
   default: () => <div>Entity Usage Export Modal</div>,
 }));
 
-vi.mock("../../../EntityUsageExport", () => ({
+vi.mock("@/components/EntityUsageExport", () => ({
   UsageExportHeader: () => <div>Usage Export Header</div>,
 }));
 
-vi.mock("../../../common_components/team_multi_select", () => ({
+vi.mock("@/components/common_components/team_multi_select", () => ({
   default: () => <div>Team Multi Select</div>,
 }));
 
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/EntityUsage.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/EntityUsage.tsx
similarity index 97%
rename from ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/EntityUsage.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/EntityUsage.tsx
index 9dd72f44f675..84ea83736572 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/EntityUsage.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/EntityUsage.tsx
@@ -26,10 +26,10 @@ import {
 import { ExportOutlined, LoadingOutlined } from "@ant-design/icons";
 import { Alert, Button } from "antd";
 import React, { useMemo, useState } from "react";
-import TeamMultiSelect from "../../../common_components/team_multi_select";
-import { ActivityMetrics, processActivityData } from "../../../activity_metrics";
-import { UsageExportHeader } from "../../../EntityUsageExport";
-import type { EntityType } from "../../../EntityUsageExport/types";
+import TeamMultiSelect from "@/components/common_components/team_multi_select";
+import { ActivityMetrics, processActivityData } from "@/components/activity_metrics";
+import { UsageExportHeader } from "@/components/EntityUsageExport";
+import type { EntityType } from "@/components/EntityUsageExport/types";
 import {
   agentDailyActivityCall,
   customerDailyActivityCall,
@@ -37,13 +37,19 @@ import {
   tagDailyActivityCall,
   teamDailyActivityCall,
   userDailyActivityCall,
-} from "../../../networking";
-import { getProviderLogoAndName } from "../../../provider_info_helpers";
+} from "@/components/networking";
+import { getProviderLogoAndName } from "@/components/provider_info_helpers";
 import { usePaginatedDailyActivity } from "../../hooks/usePaginatedDailyActivity";
-import { BreakdownMetrics, DailyData, EntityMetricWithMetadata, KeyMetricWithMetadata, TagUsage } from "../../types";
-import { valueFormatterSpend } from "../../utils/value_formatters";
+import {
+  BreakdownMetrics,
+  DailyData,
+  EntityMetricWithMetadata,
+  KeyMetricWithMetadata,
+  TagUsage,
+} from "@/components/UsagePage/types";
+import { valueFormatterSpend } from "@/components/UsagePage/utils/value_formatters";
 import EndpointUsage from "../EndpointUsage/EndpointUsage";
-import TopKeyView from "./TopKeyView";
+import TopKeyView from "@/components/UsagePage/components/EntityUsage/TopKeyView";
 import TopModelView from "./TopModelView";
 
 interface EntityMetrics {
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/SpendByProvider.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.test.tsx
similarity index 98%
rename from ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/SpendByProvider.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.test.tsx
index 7eea7653ef1c..2d4f6dcf3e49 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/SpendByProvider.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.test.tsx
@@ -2,13 +2,13 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi, beforeEach } from "vitest";
 import SpendByProvider from "./SpendByProvider";
 
-vi.mock("../../../shared/chart_loader", () => ({
+vi.mock("@/components/shared/chart_loader", () => ({
   ChartLoader: ({ isDateChanging }: { isDateChanging: boolean }) => (
     <div data-testid="chart-loader">{isDateChanging ? "Processing date selection..." : "Loading chart data..."}</div>
   ),
 }));
 
-vi.mock("../../../molecules/models/ProviderLogo", () => ({
+vi.mock("@/components/molecules/models/ProviderLogo", () => ({
   ProviderLogo: ({ provider }: { provider: string }) => <div data-testid={`provider-logo-${provider}`}>{provider}</div>,
 }));
 
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/SpendByProvider.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.tsx
similarity index 96%
rename from ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/SpendByProvider.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.tsx
index 5cea84affb98..df2954c7ac51 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/SpendByProvider.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.tsx
@@ -17,8 +17,8 @@ import {
 } from "@tremor/react";
 import { Tooltip } from "antd";
 import React, { useState } from "react";
-import { ProviderLogo } from "../../../molecules/models/ProviderLogo";
-import { ChartLoader } from "../../../shared/chart_loader";
+import { ProviderLogo } from "@/components/molecules/models/ProviderLogo";
+import { ChartLoader } from "@/components/shared/chart_loader";
 
 interface ProviderSpendData {
   provider: string;
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopModelView.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/TopModelView.test.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopModelView.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/TopModelView.test.tsx
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopModelView.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/TopModelView.tsx
similarity index 96%
rename from ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopModelView.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/TopModelView.tsx
index 8938767c02c6..08dd10480efb 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopModelView.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/TopModelView.tsx
@@ -2,8 +2,8 @@ import { BarChart } from "@tremor/react";
 import { Segmented } from "antd";
 import { useState } from "react";
 import { MoneyCell } from "@/components/shared/table_cells";
-import { formatNumberWithCommas } from "../../../../utils/dataUtils";
-import { DataTable } from "../../../view_logs/table";
+import { formatNumberWithCommas } from "@/utils/dataUtils";
+import { DataTable } from "@/components/view_logs/table";
 
 interface TopModel {
   key: string;
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/UsageAIChatPanel.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsageAIChatPanel.test.tsx
similarity index 96%
rename from ui/litellm-dashboard/src/components/UsagePage/components/UsageAIChatPanel.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsageAIChatPanel.test.tsx
index 268dfdf758ae..54bf4fc25cef 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/UsageAIChatPanel.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsageAIChatPanel.test.tsx
@@ -1,6 +1,6 @@
 import { screen } from "@testing-library/react";
 import { beforeAll, describe, expect, it, vi } from "vitest";
-import { renderWithProviders } from "../../../../tests/test-utils";
+import { renderWithProviders } from "@/../tests/test-utils";
 import UsageAIChatPanel from "./UsageAIChatPanel";
 
 beforeAll(() => {
@@ -13,7 +13,7 @@ beforeAll(() => {
   }
 });
 
-vi.mock("../../networking", () => ({
+vi.mock("@/components/networking", () => ({
   modelHubCall: vi.fn().mockResolvedValue({
     data: [{ model_group: "gpt-4" }, { model_group: "claude-3-opus" }],
   }),
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/UsageAIChatPanel.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsageAIChatPanel.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/components/UsagePage/components/UsageAIChatPanel.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsageAIChatPanel.tsx
index 9841889b9284..9d6b09353a22 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/UsageAIChatPanel.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsageAIChatPanel.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Button, Select, Input, Spin } from "antd";
 import ReactMarkdown from "react-markdown";
-import { modelHubCall, usageAiChatStream, UsageAiToolCallEvent } from "../../networking";
+import { modelHubCall, usageAiChatStream, UsageAiToolCallEvent } from "@/components/networking";
 
 const { TextArea } = Input;
 
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.test.tsx
similarity index 98%
rename from ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.test.tsx
index 7d5aec5f0b85..4fb171be5f6d 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.test.tsx
@@ -5,9 +5,9 @@ import { useCurrentUser } from "@/app/(dashboard)/hooks/users/useCurrentUser";
 import { useInfiniteUsers } from "@/app/(dashboard)/hooks/users/useUsers";
 import { act, fireEvent, screen, waitFor } from "@testing-library/react";
 import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
-import { renderWithProviders } from "../../../../tests/test-utils";
-import type { Organization } from "../../networking";
-import * as networking from "../../networking";
+import { renderWithProviders } from "@/../tests/test-utils";
+import type { Organization } from "@/components/networking";
+import * as networking from "@/components/networking";
 import UsagePage from "./UsagePageView";
 
 // Polyfill ResizeObserver for test environment
@@ -22,23 +22,23 @@ beforeAll(() => {
 });
 
 // Mock the networking module
-vi.mock("../../networking", () => ({
+vi.mock("@/components/networking", () => ({
   userDailyActivityCall: vi.fn(),
   userDailyActivityAggregatedCall: vi.fn(),
   tagListCall: vi.fn(),
 }));
 
 // Mock child components to simplify testing
-vi.mock("../../activity_metrics", () => ({
+vi.mock("@/components/activity_metrics", () => ({
   ActivityMetrics: () => <div>Activity Metrics</div>,
   processActivityData: () => ({ data: [], metadata: {} }),
 }));
 
-vi.mock("../../view_user_spend", () => ({
+vi.mock("@/components/view_user_spend", () => ({
   default: () => <div>View User Spend</div>,
 }));
 
-vi.mock("./EntityUsage/TopKeyView", () => ({
+vi.mock("@/components/UsagePage/components/EntityUsage/TopKeyView", () => ({
   default: () => <div>Top Keys</div>,
 }));
 
@@ -80,7 +80,7 @@ vi.mock("./UsageViewSelect/UsageViewSelect", async () => {
   return { UsageViewSelect };
 });
 
-vi.mock("../../shared/advanced_date_picker", async () => {
+vi.mock("@/components/shared/advanced_date_picker", async () => {
   const React = await import("react");
   const AdvancedDatePicker = () => {
     return React.createElement("div", { "data-testid": "advanced-date-picker" }, "Date Picker");
@@ -89,15 +89,15 @@ vi.mock("../../shared/advanced_date_picker", async () => {
   return { default: AdvancedDatePicker };
 });
 
-vi.mock("../../user_agent_activity", () => ({
+vi.mock("@/components/user_agent_activity", () => ({
   default: () => <div>User Agent Activity</div>,
 }));
 
-vi.mock("../../cloudzero_export_modal", () => ({
+vi.mock("@/components/cloudzero_export_modal", () => ({
   default: () => <div>CloudZero Export Modal</div>,
 }));
 
-vi.mock("../../EntityUsageExport", () => ({
+vi.mock("@/components/EntityUsageExport", () => ({
   default: () => <div>Entity Usage Export Modal</div>,
 }));
 
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx
similarity index 97%
rename from ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx
index 37c2a25c6a60..ba2fcf7bd850 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx
@@ -31,24 +31,29 @@ import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import { useCurrentUser } from "@/app/(dashboard)/hooks/users/useCurrentUser";
 import { useInfiniteUsers } from "@/app/(dashboard)/hooks/users/useUsers";
 import { formatNumberWithCommas } from "@/utils/dataUtils";
-import { all_admin_roles, internalUserRoles } from "../../../utils/roles";
-import { ActivityMetrics, processActivityData } from "../../activity_metrics";
-import CloudZeroExportModal from "../../cloudzero_export_modal";
-import EntityUsageExportModal from "../../EntityUsageExport";
-import { Team } from "../../key_team_helpers/key_list";
-import { Organization, tagListCall, userDailyActivityAggregatedCall, userDailyActivityCall } from "../../networking";
-import AdvancedDatePicker from "../../shared/advanced_date_picker";
-import { ChartLoader } from "../../shared/chart_loader";
-import { Tag } from "../../tag_management/types";
-import UserAgentActivity from "../../user_agent_activity";
-import ViewUserSpend from "../../view_user_spend";
+import { all_admin_roles, internalUserRoles } from "@/utils/roles";
+import { ActivityMetrics, processActivityData } from "@/components/activity_metrics";
+import CloudZeroExportModal from "@/components/cloudzero_export_modal";
+import EntityUsageExportModal from "@/components/EntityUsageExport";
+import { Team } from "@/components/key_team_helpers/key_list";
+import {
+  Organization,
+  tagListCall,
+  userDailyActivityAggregatedCall,
+  userDailyActivityCall,
+} from "@/components/networking";
+import AdvancedDatePicker from "@/components/shared/advanced_date_picker";
+import { ChartLoader } from "@/components/shared/chart_loader";
+import { Tag } from "@/components/tag_management/types";
+import UserAgentActivity from "@/components/user_agent_activity";
+import ViewUserSpend from "@/components/view_user_spend";
 import { usePaginatedDailyActivity } from "../hooks/usePaginatedDailyActivity";
-import { DailyData, KeyMetricWithMetadata, MetricWithMetadata } from "../types";
-import { valueFormatterSpend } from "../utils/value_formatters";
+import { DailyData, KeyMetricWithMetadata, MetricWithMetadata } from "@/components/UsagePage/types";
+import { valueFormatterSpend } from "@/components/UsagePage/utils/value_formatters";
 import EndpointUsage from "./EndpointUsage/EndpointUsage";
 import EntityUsage, { EntityList } from "./EntityUsage/EntityUsage";
 import SpendByProvider from "./EntityUsage/SpendByProvider";
-import TopKeyView from "./EntityUsage/TopKeyView";
+import TopKeyView from "@/components/UsagePage/components/EntityUsage/TopKeyView";
 import UsageAIChatPanel from "./UsageAIChatPanel";
 import { UsageOption, UsageViewSelect } from "./UsageViewSelect/UsageViewSelect";
 
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/UsageViewSelect/UsageViewSelect.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsageViewSelect/UsageViewSelect.test.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/components/UsagePage/components/UsageViewSelect/UsageViewSelect.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsageViewSelect/UsageViewSelect.test.tsx
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/UsageViewSelect/UsageViewSelect.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsageViewSelect/UsageViewSelect.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/components/UsagePage/components/UsageViewSelect/UsageViewSelect.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsageViewSelect/UsageViewSelect.tsx
diff --git a/ui/litellm-dashboard/src/components/UsagePage/hooks/usePaginatedDailyActivity.ts b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/hooks/usePaginatedDailyActivity.ts
similarity index 99%
rename from ui/litellm-dashboard/src/components/UsagePage/hooks/usePaginatedDailyActivity.ts
rename to ui/litellm-dashboard/src/app/(dashboard)/usage/_components/hooks/usePaginatedDailyActivity.ts
index dedea0658251..86b26bda5393 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/hooks/usePaginatedDailyActivity.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/hooks/usePaginatedDailyActivity.ts
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { DailyData } from "../types";
+import { DailyData } from "@/components/UsagePage/types";
 
 export interface PaginationProgress {
   currentPage: number;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/page.tsx
index 7382262cbd58..32ce0a69aea6 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/usage/page.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import NewUsagePage from "@/components/UsagePage/components/UsagePageView";
+import NewUsagePage from "./_components/components/UsagePageView";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import { useTeams } from "@/app/(dashboard)/hooks/teams/useTeams";
 import { useOrganizations } from "@/app/(dashboard)/hooks/organizations/useOrganizations";

From fc169b5e3be88ef741c936670c1932c8c1bde06c Mon Sep 17 00:00:00 2001
From: ryan-crabbe-berri <ryan@berri.ai>
Date: Sat, 11 Jul 2026 17:29:30 -0700
Subject: [PATCH 2/2] refactor(ui): colocate the mcp-servers view, keeping the
 shared mcp_tools surface

---
 ui/litellm-dashboard/eslint-suppressions.json | 40 +++++++++----------
 .../_components}/DcrBridgeToggle.tsx          |  2 +-
 .../_components}/EnvVarsSection.tsx           |  0
 .../_components}/MCPLogoSelector.test.tsx     |  0
 .../_components}/MCPLogoSelector.tsx          |  0
 .../_components}/MCPNetworkSettings.tsx       |  4 +-
 .../MCPPermissionManagement.test.tsx          |  0
 .../_components}/MCPPermissionManagement.tsx  |  2 +-
 .../_components}/MCPServerCard.test.tsx       |  2 +-
 .../_components}/MCPServerCard.tsx            |  2 +-
 .../MCPStandardsSettings.test.tsx             |  2 +-
 .../_components}/MCPStandardsSettings.tsx     |  2 +-
 .../_components}/MCPSubmissionsTab.tsx        |  2 +-
 .../_components}/MCPToolsetsTab.tsx           | 12 ++++--
 .../_components}/OAuthFormFields.test.tsx     |  0
 .../_components}/OAuthFormFields.tsx          |  2 +-
 .../_components}/OpenAPIFormSection.tsx       |  2 +-
 .../_components}/OpenAPIQuickPicker.tsx       |  2 +-
 .../PassthroughAuthorizeSection.test.tsx      |  0
 .../PassthroughAuthorizeSection.tsx           |  2 +-
 .../_components}/StdioConfiguration.tsx       |  0
 .../TokenEndpointAuthMethodField.tsx          |  0
 .../_components}/TokenExchangeFormFields.tsx  |  0
 .../_components}/ToolTestPanel.test.tsx       |  4 +-
 .../_components}/ToolTestPanel.tsx            |  4 +-
 .../_components}/TruePassthroughWarning.tsx   |  2 +-
 .../_components}/UserEnvVarsModal.tsx         |  6 +--
 .../_components}/create_mcp_server.test.tsx   |  4 +-
 .../_components}/create_mcp_server.tsx        |  6 +--
 .../mcp-servers/_components}/index.tsx        |  0
 .../mcp-servers/_components}/mcp_connect.tsx  |  4 +-
 .../mcp_connection_status.test.tsx            |  0
 .../_components}/mcp_connection_status.tsx    |  0
 .../_components}/mcp_discovery.tsx            |  4 +-
 .../_components}/mcp_server_cost_config.tsx   |  2 +-
 .../_components}/mcp_server_cost_display.tsx  |  2 +-
 .../_components}/mcp_server_edit.test.tsx     |  8 ++--
 .../_components}/mcp_server_edit.tsx          | 11 +++--
 .../_components}/mcp_server_view.tsx          |  2 +-
 .../_components}/mcp_servers.test.tsx         |  6 +--
 .../mcp-servers/_components}/mcp_servers.tsx  | 24 ++++++-----
 .../mcp_tool_configuration.test.tsx           |  0
 .../_components}/mcp_tool_configuration.tsx   |  2 +-
 .../_components}/mcp_tools.test.tsx           |  4 +-
 .../mcp-servers/_components}/mcp_tools.tsx    |  4 +-
 .../mcp-servers/_components}/testUtils.ts     |  0
 .../mcp-servers/_components}/utils.test.tsx   |  0
 .../mcp-servers/_components}/utils.tsx        |  2 +-
 .../src/app/(dashboard)/mcp-servers/page.tsx  |  2 +-
 .../tests/CreateKeyPage.expiredToken.test.tsx |  2 +-
 50 files changed, 100 insertions(+), 83 deletions(-)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/DcrBridgeToggle.tsx (95%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/EnvVarsSection.tsx (100%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/MCPLogoSelector.test.tsx (100%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/MCPLogoSelector.tsx (100%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/MCPNetworkSettings.tsx (97%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/MCPPermissionManagement.test.tsx (100%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/MCPPermissionManagement.tsx (99%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/MCPServerCard.test.tsx (96%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/MCPServerCard.tsx (99%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/MCPStandardsSettings.test.tsx (97%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/MCPStandardsSettings.tsx (96%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/MCPSubmissionsTab.tsx (99%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/MCPToolsetsTab.tsx (98%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/OAuthFormFields.test.tsx (100%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/OAuthFormFields.tsx (99%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/OpenAPIFormSection.tsx (98%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/OpenAPIQuickPicker.tsx (98%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/PassthroughAuthorizeSection.test.tsx (100%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/PassthroughAuthorizeSection.tsx (99%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/StdioConfiguration.tsx (100%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/TokenEndpointAuthMethodField.tsx (100%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/TokenExchangeFormFields.tsx (100%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/ToolTestPanel.test.tsx (97%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/ToolTestPanel.tsx (99%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/TruePassthroughWarning.tsx (94%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/UserEnvVarsModal.tsx (95%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/create_mcp_server.test.tsx (99%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/create_mcp_server.tsx (99%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/index.tsx (100%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/mcp_connect.tsx (99%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/mcp_connection_status.test.tsx (100%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/mcp_connection_status.tsx (100%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/mcp_discovery.tsx (98%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/mcp_server_cost_config.tsx (98%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/mcp_server_cost_display.tsx (97%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/mcp_server_edit.test.tsx (99%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/mcp_server_edit.tsx (99%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/mcp_server_view.tsx (99%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/mcp_servers.test.tsx (98%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/mcp_servers.tsx (97%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/mcp_tool_configuration.test.tsx (100%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/mcp_tool_configuration.tsx (99%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/mcp_tools.test.tsx (98%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/mcp_tools.tsx (99%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/testUtils.ts (100%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/utils.test.tsx (100%)
 rename ui/litellm-dashboard/src/{components/mcp_tools => app/(dashboard)/mcp-servers/_components}/utils.tsx (97%)

diff --git a/ui/litellm-dashboard/eslint-suppressions.json b/ui/litellm-dashboard/eslint-suppressions.json
index 48b400536bd6..eb8bdee0ea21 100644
--- a/ui/litellm-dashboard/eslint-suppressions.json
+++ b/ui/litellm-dashboard/eslint-suppressions.json
@@ -1878,17 +1878,17 @@
       "count": 1
     }
   },
-  "src/components/mcp_tools/MCPLogoSelector.test.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/MCPLogoSelector.test.tsx": {
     "unused-imports/no-unused-imports": {
       "count": 1
     }
   },
-  "src/components/mcp_tools/MCPNetworkSettings.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/MCPNetworkSettings.tsx": {
     "react-hooks/immutability": {
       "count": 2
     }
   },
-  "src/components/mcp_tools/MCPSubmissionsTab.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/MCPSubmissionsTab.tsx": {
     "react-hooks/set-state-in-effect": {
       "count": 1
     }
@@ -1898,7 +1898,7 @@
       "count": 5
     }
   },
-  "src/components/mcp_tools/MCPToolsetsTab.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/MCPToolsetsTab.tsx": {
     "no-nested-ternary": {
       "count": 1
     },
@@ -1920,7 +1920,7 @@
       "count": 1
     }
   },
-  "src/components/mcp_tools/OAuthFormFields.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/OAuthFormFields.tsx": {
     "no-nested-ternary": {
       "count": 1
     },
@@ -1928,12 +1928,12 @@
       "count": 1
     }
   },
-  "src/components/mcp_tools/OpenAPIQuickPicker.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/OpenAPIQuickPicker.tsx": {
     "react-hooks/set-state-in-effect": {
       "count": 1
     }
   },
-  "src/components/mcp_tools/ToolTestPanel.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/ToolTestPanel.tsx": {
     "no-nested-ternary": {
       "count": 3
     },
@@ -1944,12 +1944,12 @@
       "count": 1
     }
   },
-  "src/components/mcp_tools/UserEnvVarsModal.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/UserEnvVarsModal.tsx": {
     "no-nested-ternary": {
       "count": 2
     }
   },
-  "src/components/mcp_tools/create_mcp_server.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/create_mcp_server.tsx": {
     "no-nested-ternary": {
       "count": 1
     },
@@ -1960,7 +1960,7 @@
       "count": 4
     }
   },
-  "src/components/mcp_tools/mcp_connect.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/mcp_connect.tsx": {
     "no-restricted-imports": {
       "count": 1
     },
@@ -1968,7 +1968,7 @@
       "count": 4
     }
   },
-  "src/components/mcp_tools/mcp_connection_status.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/mcp_connection_status.tsx": {
     "no-nested-ternary": {
       "count": 3
     },
@@ -1976,22 +1976,22 @@
       "count": 1
     }
   },
-  "src/components/mcp_tools/mcp_discovery.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/mcp_discovery.tsx": {
     "react-hooks/set-state-in-effect": {
       "count": 2
     }
   },
-  "src/components/mcp_tools/mcp_server_cost_config.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/mcp_server_cost_config.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/mcp_tools/mcp_server_cost_display.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/mcp_server_cost_display.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/mcp_tools/mcp_server_edit.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/mcp_server_edit.tsx": {
     "no-nested-ternary": {
       "count": 1
     },
@@ -2005,12 +2005,12 @@
       "count": 5
     }
   },
-  "src/components/mcp_tools/mcp_server_view.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/mcp_server_view.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/mcp_tools/mcp_servers.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/mcp_servers.tsx": {
     "no-nested-ternary": {
       "count": 1
     },
@@ -2021,12 +2021,12 @@
       "count": 2
     }
   },
-  "src/components/mcp_tools/mcp_tool_configuration.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/mcp_tool_configuration.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/mcp_tools/mcp_tools.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/mcp_tools.tsx": {
     "no-nested-ternary": {
       "count": 1
     },
@@ -2558,4 +2558,4 @@
       "count": 1
     }
   }
-}
\ No newline at end of file
+}
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/DcrBridgeToggle.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/DcrBridgeToggle.tsx
similarity index 95%
rename from ui/litellm-dashboard/src/components/mcp_tools/DcrBridgeToggle.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/DcrBridgeToggle.tsx
index f1b642293c0b..49c182aa6bee 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/DcrBridgeToggle.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/DcrBridgeToggle.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Form, Switch, Tooltip } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
-import { isClientForwardedTokenMode } from "./types";
+import { isClientForwardedTokenMode } from "@/components/mcp_tools/types";
 
 /**
  * DCR-bridge toggle for the client-forwarded token modes (true_passthrough /
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/EnvVarsSection.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/EnvVarsSection.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/components/mcp_tools/EnvVarsSection.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/EnvVarsSection.tsx
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/MCPLogoSelector.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPLogoSelector.test.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/components/mcp_tools/MCPLogoSelector.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPLogoSelector.test.tsx
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/MCPLogoSelector.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPLogoSelector.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/components/mcp_tools/MCPLogoSelector.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPLogoSelector.tsx
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/MCPNetworkSettings.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPNetworkSettings.tsx
similarity index 97%
rename from ui/litellm-dashboard/src/components/mcp_tools/MCPNetworkSettings.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPNetworkSettings.tsx
index 003234657319..7ab240389f32 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/MCPNetworkSettings.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPNetworkSettings.tsx
@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from "react";
 import { Select, Button, Card, Typography, Spin, Tag } from "antd";
 import { SaveOutlined, PlusOutlined } from "@ant-design/icons";
-import { DeprecationBanner } from "../DeprecationBanner";
+import { DeprecationBanner } from "@/components/DeprecationBanner";
 import {
   getGeneralSettingsCall,
   updateConfigFieldSetting,
   deleteConfigFieldSetting,
   fetchMCPClientIp,
-} from "../networking";
+} from "@/components/networking";
 
 const { Text } = Typography;
 
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/MCPPermissionManagement.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPPermissionManagement.test.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/components/mcp_tools/MCPPermissionManagement.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPPermissionManagement.test.tsx
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/MCPPermissionManagement.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPPermissionManagement.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/components/mcp_tools/MCPPermissionManagement.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPPermissionManagement.tsx
index 27cbdf2ea345..aae13d4b4679 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/MCPPermissionManagement.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPPermissionManagement.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { Alert, Form, Select, Tooltip, Collapse, Input, Space, Button, Switch } from "antd";
 import { InfoCircleOutlined, MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
-import { MCPServer, AUTH_TYPE } from "./types";
+import { MCPServer, AUTH_TYPE } from "@/components/mcp_tools/types";
 const { Panel } = Collapse;
 
 interface MCPPermissionManagementProps {
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/MCPServerCard.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPServerCard.test.tsx
similarity index 96%
rename from ui/litellm-dashboard/src/components/mcp_tools/MCPServerCard.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPServerCard.test.tsx
index 8463a23cc162..a0998b587fbe 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/MCPServerCard.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPServerCard.test.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 import { describe, it, expect, vi } from "vitest";
 import MCPServerCard from "./MCPServerCard";
-import type { MCPServer } from "./types";
+import type { MCPServer } from "@/components/mcp_tools/types";
 
 const baseServer: MCPServer = {
   server_id: "srv-1",
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/MCPServerCard.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPServerCard.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/components/mcp_tools/MCPServerCard.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPServerCard.tsx
index c16ad87980e4..4282cdba2789 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/MCPServerCard.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPServerCard.tsx
@@ -8,7 +8,7 @@ import {
   MoreOutlined,
   ThunderboltOutlined,
 } from "@ant-design/icons";
-import { AUTH_TYPE, type MCPServer } from "./types";
+import { AUTH_TYPE, type MCPServer } from "@/components/mcp_tools/types";
 import { getMaskedAndFullUrl } from "./utils";
 
 const { Text } = Typography;
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/MCPStandardsSettings.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPStandardsSettings.test.tsx
similarity index 97%
rename from ui/litellm-dashboard/src/components/mcp_tools/MCPStandardsSettings.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPStandardsSettings.test.tsx
index fd8d9f92c484..08f65a72537b 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/MCPStandardsSettings.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPStandardsSettings.test.tsx
@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { FIELD_GROUPS, MCP_REQUIRED_FIELD_DEFS, SETTINGS_KEY } from "./MCPStandardsSettings";
-import { MCPServer } from "./types";
+import { MCPServer } from "@/components/mcp_tools/types";
 
 const makeServer = (overrides: Partial<MCPServer> = {}): MCPServer => ({
   server_id: "s1",
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/MCPStandardsSettings.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPStandardsSettings.tsx
similarity index 96%
rename from ui/litellm-dashboard/src/components/mcp_tools/MCPStandardsSettings.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPStandardsSettings.tsx
index fb38e392631a..13a9b7c171eb 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/MCPStandardsSettings.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPStandardsSettings.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { MCPServer } from "./types";
+import { MCPServer } from "@/components/mcp_tools/types";
 
 export interface RequiredFieldDef {
   key: string;
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/MCPSubmissionsTab.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPSubmissionsTab.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/components/mcp_tools/MCPSubmissionsTab.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPSubmissionsTab.tsx
index 50c88a63582e..de030420bc35 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/MCPSubmissionsTab.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPSubmissionsTab.tsx
@@ -18,7 +18,7 @@ import {
   getGeneralSettingsCall,
   updateConfigFieldSetting,
 } from "@/components/networking";
-import { MCPServer, MCPSubmissionsSummary } from "./types";
+import { MCPServer, MCPSubmissionsSummary } from "@/components/mcp_tools/types";
 import { FIELD_GROUPS, MCP_REQUIRED_FIELD_DEFS, SETTINGS_KEY } from "./MCPStandardsSettings";
 import NotificationsManager from "@/components/molecules/notifications_manager";
 
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/MCPToolsetsTab.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPToolsetsTab.tsx
similarity index 98%
rename from ui/litellm-dashboard/src/components/mcp_tools/MCPToolsetsTab.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPToolsetsTab.tsx
index 5e7e99ee8eca..fa44694887b8 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/MCPToolsetsTab.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPToolsetsTab.tsx
@@ -7,9 +7,15 @@ import { useMCPToolsets } from "@/app/(dashboard)/hooks/mcpServers/useMCPToolset
 import { useMCPServers } from "@/app/(dashboard)/hooks/mcpServers/useMCPServers";
 import { useQueryClient } from "@tanstack/react-query";
 import { DateCell, IdCell } from "@/components/shared/table_cells";
-import { DataTable } from "../view_logs/table";
-import { createMCPToolset, updateMCPToolset, deleteMCPToolset, listMCPTools, getProxyBaseUrl } from "../networking";
-import { MCPToolset, MCPToolsetTool } from "./types";
+import { DataTable } from "@/components/view_logs/table";
+import {
+  createMCPToolset,
+  updateMCPToolset,
+  deleteMCPToolset,
+  listMCPTools,
+  getProxyBaseUrl,
+} from "@/components/networking";
+import { MCPToolset, MCPToolsetTool } from "@/components/mcp_tools/types";
 
 const { Text: AntdText } = Typography;
 
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/OAuthFormFields.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/OAuthFormFields.test.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/components/mcp_tools/OAuthFormFields.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/OAuthFormFields.test.tsx
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/OAuthFormFields.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/OAuthFormFields.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/components/mcp_tools/OAuthFormFields.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/OAuthFormFields.tsx
index 93afefe43582..f359bdee065a 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/OAuthFormFields.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/OAuthFormFields.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Form, Input, InputNumber, Select, Tooltip } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
 import { Button, TextInput } from "@tremor/react";
-import { OAUTH_FLOW } from "./types";
+import { OAUTH_FLOW } from "@/components/mcp_tools/types";
 import TokenEndpointAuthMethodField from "./TokenEndpointAuthMethodField";
 
 interface OAuthFlowStatus {
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/OpenAPIFormSection.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/OpenAPIFormSection.tsx
similarity index 98%
rename from ui/litellm-dashboard/src/components/mcp_tools/OpenAPIFormSection.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/OpenAPIFormSection.tsx
index d606b8ba1fc7..073780b359fd 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/OpenAPIFormSection.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/OpenAPIFormSection.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Form, Input, Tooltip } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
 import { FormInstance } from "antd/es/form";
-import { AUTH_TYPE, OAUTH_FLOW } from "./types";
+import { AUTH_TYPE, OAUTH_FLOW } from "@/components/mcp_tools/types";
 import OpenAPIQuickPicker, { OpenAPIRegistryEntry, OpenAPIKeyTool } from "./OpenAPIQuickPicker";
 
 interface OpenAPIFormSectionProps {
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/OpenAPIQuickPicker.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/OpenAPIQuickPicker.tsx
similarity index 98%
rename from ui/litellm-dashboard/src/components/mcp_tools/OpenAPIQuickPicker.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/OpenAPIQuickPicker.tsx
index a8208a09286e..0aec81fdf4b5 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/OpenAPIQuickPicker.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/OpenAPIQuickPicker.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Spin } from "antd";
-import { fetchOpenAPIRegistry } from "../networking";
+import { fetchOpenAPIRegistry } from "@/components/networking";
 
 export interface OpenAPIKeyTool {
   name: string;
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/PassthroughAuthorizeSection.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/PassthroughAuthorizeSection.test.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/components/mcp_tools/PassthroughAuthorizeSection.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/PassthroughAuthorizeSection.test.tsx
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/PassthroughAuthorizeSection.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/PassthroughAuthorizeSection.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/components/mcp_tools/PassthroughAuthorizeSection.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/PassthroughAuthorizeSection.tsx
index 0ed4ee555d11..dc10f0f13929 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/PassthroughAuthorizeSection.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/PassthroughAuthorizeSection.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Button, Checkbox, Form, Input } from "antd";
 import DcrBridgeToggle from "./DcrBridgeToggle";
-import { credentialAuthClass, isClientForwardedTokenMode } from "./types";
+import { credentialAuthClass, isClientForwardedTokenMode } from "@/components/mcp_tools/types";
 
 interface PassthroughOAuthFlow {
   startOAuthFlow: () => void | Promise<void>;
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/StdioConfiguration.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/StdioConfiguration.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/components/mcp_tools/StdioConfiguration.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/StdioConfiguration.tsx
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/TokenEndpointAuthMethodField.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/TokenEndpointAuthMethodField.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/components/mcp_tools/TokenEndpointAuthMethodField.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/TokenEndpointAuthMethodField.tsx
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/TokenExchangeFormFields.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/TokenExchangeFormFields.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/components/mcp_tools/TokenExchangeFormFields.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/TokenExchangeFormFields.tsx
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/ToolTestPanel.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/ToolTestPanel.test.tsx
similarity index 97%
rename from ui/litellm-dashboard/src/components/mcp_tools/ToolTestPanel.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/ToolTestPanel.test.tsx
index 4bd351216b81..0613e84feedc 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/ToolTestPanel.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/ToolTestPanel.test.tsx
@@ -3,9 +3,9 @@ import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 
 import { ToolTestPanel } from "./ToolTestPanel";
-import { InputSchema, MCPTool } from "./types";
+import { InputSchema, MCPTool } from "@/components/mcp_tools/types";
 
-vi.mock("../molecules/notifications_manager", () => ({
+vi.mock("@/components/molecules/notifications_manager", () => ({
   default: {
     success: vi.fn(),
     fromBackend: vi.fn(),
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/ToolTestPanel.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/ToolTestPanel.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/components/mcp_tools/ToolTestPanel.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/ToolTestPanel.tsx
index c15150eee58a..8f042445c01d 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/ToolTestPanel.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/ToolTestPanel.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 import { Button, TextInput } from "@tremor/react";
-import { MCPTool, InputSchema, InputSchemaProperty } from "./types";
+import { MCPTool, InputSchema, InputSchemaProperty } from "@/components/mcp_tools/types";
 import { resolveLogoSrc } from "@/lib/assetPaths";
 import { Form, Select, Tooltip } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
-import NotificationsManager from "../molecules/notifications_manager";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 
 const isPlainObject = (value: unknown): value is Record<string, any> =>
   typeof value === "object" && value !== null && !Array.isArray(value);
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/TruePassthroughWarning.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/TruePassthroughWarning.tsx
similarity index 94%
rename from ui/litellm-dashboard/src/components/mcp_tools/TruePassthroughWarning.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/TruePassthroughWarning.tsx
index b52d3f4c672e..9c57cbd7d145 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/TruePassthroughWarning.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/TruePassthroughWarning.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Alert } from "antd";
-import { AUTH_TYPE } from "./types";
+import { AUTH_TYPE } from "@/components/mcp_tools/types";
 
 /**
  * Warning shown in the create/edit MCP server forms when auth_type
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/UserEnvVarsModal.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/UserEnvVarsModal.tsx
similarity index 95%
rename from ui/litellm-dashboard/src/components/mcp_tools/UserEnvVarsModal.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/UserEnvVarsModal.tsx
index 08a285cd56bb..f76aef365f76 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/UserEnvVarsModal.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/UserEnvVarsModal.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { Modal, Form, Input, Button, Alert, Spin, Tag, Typography } from "antd";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { MCPServer, MCPUserEnvVarsStatus } from "./types";
-import { getMCPUserEnvVars, storeMCPUserEnvVars } from "../networking";
-import NotificationsManager from "../molecules/notifications_manager";
+import { MCPServer, MCPUserEnvVarsStatus } from "@/components/mcp_tools/types";
+import { getMCPUserEnvVars, storeMCPUserEnvVars } from "@/components/networking";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 
 const { Text, Title } = Typography;
 
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/create_mcp_server.test.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/create_mcp_server.test.tsx
index 32fe439a3168..6ce7f5c75ed3 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/create_mcp_server.test.tsx
@@ -1,12 +1,12 @@
 import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import * as networking from "../networking";
+import * as networking from "@/components/networking";
 import { setToken } from "@/utils/mcpTokenStore";
 import CreateMCPServer from "./create_mcp_server";
 import { selectAntOption } from "./testUtils";
 
-vi.mock("../networking", () => ({
+vi.mock("@/components/networking", () => ({
   createMCPServer: vi.fn(),
   fetchOpenAPIRegistry: vi.fn().mockResolvedValue({ apis: [] }),
   registerMCPServer: vi.fn(),
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/create_mcp_server.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/create_mcp_server.tsx
index b9a6f5d229d8..70838c592c8c 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/create_mcp_server.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Modal, Tooltip, Form, Select, Input, InputNumber, Switch, Collapse } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
 import { Button, TextInput } from "@tremor/react";
-import { createMCPServer, registerMCPServer, storeMCPOAuthUserCredential } from "../networking";
+import { createMCPServer, registerMCPServer, storeMCPOAuthUserCredential } from "@/components/networking";
 import { setToken } from "@/utils/mcpTokenStore";
 import {
   AUTH_TYPE,
@@ -20,7 +20,7 @@ import {
   isHeldOAuthTokenStale,
   preservedDeclaredAppCredentials,
   withoutMintedTokenCredentials,
-} from "./types";
+} from "@/components/mcp_tools/types";
 import OAuthFormFields from "./OAuthFormFields";
 import TruePassthroughWarning from "./TruePassthroughWarning";
 import PassthroughAuthorizeSection from "./PassthroughAuthorizeSection";
@@ -35,7 +35,7 @@ import MCPLogoSelector from "./MCPLogoSelector";
 import EnvVarsSection from "./EnvVarsSection";
 import { isAdminRole } from "@/utils/roles";
 import { validateMCPServerUrl, validateMCPServerName, normalizeEnvVars, TOOL_DISPLAY_NAME_PATTERN } from "./utils";
-import NotificationsManager from "../molecules/notifications_manager";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 import { useMcpOAuthFlow } from "@/hooks/useMcpOAuthFlow";
 import { useTestMCPConnection } from "@/hooks/useTestMCPConnection";
 import { getSecureItem, setSecureItem } from "@/utils/secureStorage";
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/index.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/index.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/components/mcp_tools/index.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/index.tsx
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_connect.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_connect.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/components/mcp_tools/mcp_connect.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_connect.tsx
index 42c557f142fc..7bdfd9c6b8fd 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_connect.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_connect.tsx
@@ -4,8 +4,8 @@ import React, { useState } from "react";
 import { Card, Typography, Space, Alert, Button, Switch, Form, Collapse } from "antd";
 import { TabPanel, TabPanels, TabGroup, TabList, Tab, Title as TremorTitle, Text as TremorText } from "@tremor/react";
 import { CopyIcon, Code, Terminal, Globe, CheckIcon, ExternalLinkIcon, KeyIcon, ServerIcon, Zap } from "lucide-react";
-import { getProxyBaseUrl } from "../networking";
-import { copyToClipboard as utilCopyToClipboard } from "../../utils/dataUtils";
+import { getProxyBaseUrl } from "@/components/networking";
+import { copyToClipboard as utilCopyToClipboard } from "@/utils/dataUtils";
 
 const { Title, Text } = Typography;
 const { Panel } = Collapse;
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_connection_status.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_connection_status.test.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/components/mcp_tools/mcp_connection_status.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_connection_status.test.tsx
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_connection_status.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_connection_status.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/components/mcp_tools/mcp_connection_status.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_connection_status.tsx
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_discovery.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.tsx
similarity index 98%
rename from ui/litellm-dashboard/src/components/mcp_tools/mcp_discovery.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.tsx
index 189b52dd6b2a..6fcff011ba6d 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_discovery.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useMemo, useEffect } from "react";
 import { Modal, Input, Typography } from "antd";
-import { fetchDiscoverableMCPServers } from "../networking";
-import { DiscoverableMCPServer, DiscoverMCPServersResponse } from "./types";
+import { fetchDiscoverableMCPServers } from "@/components/networking";
+import { DiscoverableMCPServer, DiscoverMCPServersResponse } from "@/components/mcp_tools/types";
 import { mcpLogoImg } from "./create_mcp_server";
 import { resolveLogoSrc } from "@/lib/assetPaths";
 
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_cost_config.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_cost_config.tsx
similarity index 98%
rename from ui/litellm-dashboard/src/components/mcp_tools/mcp_server_cost_config.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_cost_config.tsx
index 3f3986d5a2e1..89c41693a4cd 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_cost_config.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_cost_config.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Tooltip, InputNumber, Collapse, Badge } from "antd";
 import { InfoCircleOutlined, DollarOutlined, ToolOutlined } from "@ant-design/icons";
 import { Card, Title, Text } from "@tremor/react";
-import { MCPServerCostInfo } from "./types";
+import { MCPServerCostInfo } from "@/components/mcp_tools/types";
 
 interface MCPServerCostConfigProps {
   value?: MCPServerCostInfo;
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_cost_display.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_cost_display.tsx
similarity index 97%
rename from ui/litellm-dashboard/src/components/mcp_tools/mcp_server_cost_display.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_cost_display.tsx
index e41a06b879ef..f26f7ba23202 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_cost_display.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_cost_display.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Text } from "@tremor/react";
-import { MCPServerCostInfo } from "./types";
+import { MCPServerCostInfo } from "@/components/mcp_tools/types";
 
 interface MCPServerCostDisplayProps {
   costConfig?: MCPServerCostInfo | null;
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_edit.test.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_edit.test.tsx
index 5b8d0aac8c09..278bf6f7e13b 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_edit.test.tsx
@@ -4,18 +4,18 @@ import { render, screen, waitFor, fireEvent, act } from "@testing-library/react"
 import userEvent from "@testing-library/user-event";
 import MCPServerEdit, { EDIT_OAUTH_UI_STATE_KEY } from "./mcp_server_edit";
 import { setSecureItem } from "@/utils/secureStorage";
-import * as networking from "../networking";
-import NotificationsManager from "../molecules/notifications_manager";
+import * as networking from "@/components/networking";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 import { selectAntOption } from "./testUtils";
 
-vi.mock("../networking", () => ({
+vi.mock("@/components/networking", () => ({
   updateMCPServer: vi.fn(),
   listMCPTools: vi.fn().mockResolvedValue({ tools: [], error: null }),
   storeMCPOAuthUserCredential: vi.fn().mockResolvedValue({}),
   testMCPToolsListRequest: vi.fn().mockResolvedValue({ tools: [], error: null }),
 }));
 
-vi.mock("../molecules/notifications_manager", () => ({
+vi.mock("@/components/molecules/notifications_manager", () => ({
   default: {
     success: vi.fn(),
     fromBackend: vi.fn(),
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_edit.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_edit.tsx
index 6709eb02c656..3b184cc6f1ec 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_edit.tsx
@@ -18,8 +18,13 @@ import {
   TRANSPORT,
   getMcpOAuthMode,
   oauth2FlowToFormValue,
-} from "./types";
-import { updateMCPServer, listMCPTools, storeMCPOAuthUserCredential, testMCPToolsListRequest } from "../networking";
+} from "@/components/mcp_tools/types";
+import {
+  updateMCPServer,
+  listMCPTools,
+  storeMCPOAuthUserCredential,
+  testMCPToolsListRequest,
+} from "@/components/networking";
 import { getToken, isTokenValid, removeToken, setToken } from "@/utils/mcpTokenStore";
 import { buildMcpPassthroughAuthHeader } from "@/utils/mcpHeaderUtils";
 import MCPServerCostConfig from "./mcp_server_cost_config";
@@ -39,7 +44,7 @@ import {
   normalizeToolOverrideMap,
   TOOL_DISPLAY_NAME_PATTERN,
 } from "./utils";
-import NotificationsManager from "../molecules/notifications_manager";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 import { useMcpOAuthFlow } from "@/hooks/useMcpOAuthFlow";
 import { getSecureItem, setSecureItem } from "@/utils/secureStorage";
 
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_view.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_view.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/components/mcp_tools/mcp_server_view.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_view.tsx
index 7ed00f74225f..620f76a739a9 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_view.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_view.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { ArrowLeftIcon, EyeIcon, EyeOffIcon } from "@heroicons/react/outline";
 import { Title, Card, Button, Text, Grid, TabGroup, TabList, TabPanel, TabPanels, Tab, Icon } from "@tremor/react";
 
-import { MCPServer, handleTransport, handleAuth } from "./types";
+import { MCPServer, handleTransport, handleAuth } from "@/components/mcp_tools/types";
 // TODO: Move Tools viewer from index file
 import { MCPToolsViewer } from ".";
 import MCPServerEdit, { EDIT_OAUTH_UI_STATE_KEY } from "./mcp_server_edit";
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_servers.test.tsx
similarity index 98%
rename from ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_servers.test.tsx
index 446fdd8c22d9..d61bc23c757f 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_servers.test.tsx
@@ -3,10 +3,10 @@ import { render, waitFor, screen, fireEvent, act } from "@testing-library/react"
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import MCPServers from "./mcp_servers";
-import * as networking from "../networking";
+import * as networking from "@/components/networking";
 
 // Mock the networking module
-vi.mock("../networking", () => ({
+vi.mock("@/components/networking", () => ({
   fetchMCPServers: vi.fn(),
   fetchMCPServerHealth: vi.fn(),
   deleteMCPServer: vi.fn(),
@@ -19,7 +19,7 @@ vi.mock("../networking", () => ({
 }));
 
 // Mock NotificationsManager
-vi.mock("../molecules/notifications_manager", () => ({
+vi.mock("@/components/molecules/notifications_manager", () => ({
   default: {
     success: vi.fn(),
     fromBackend: vi.fn(),
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_servers.tsx
similarity index 97%
rename from ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_servers.tsx
index f0d3e60b32e6..0afb4bd9314a 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_servers.tsx
@@ -1,29 +1,35 @@
 import { isAdminRole } from "@/utils/roles";
 import { QuestionCircleOutlined, SearchOutlined } from "@ant-design/icons";
 import { Button, Tab, TabGroup, TabList, TabPanel, TabPanels, Text, Title } from "@tremor/react";
-import NewBadge from "../common_components/NewBadge";
+import NewBadge from "@/components/common_components/NewBadge";
 import { Descriptions, Empty, Input, Modal, Select, Spin, Tooltip, Typography } from "antd";
 import React, { useEffect, useState, useMemo, useCallback } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { useMCPServers } from "../../app/(dashboard)/hooks/mcpServers/useMCPServers";
-import { useMCPServerHealth } from "../../app/(dashboard)/hooks/mcpServers/useMCPServerHealth";
-import NotificationsManager from "../molecules/notifications_manager";
-import { deleteMCPServer } from "../networking";
+import { useMCPServers } from "@/app/(dashboard)/hooks/mcpServers/useMCPServers";
+import { useMCPServerHealth } from "@/app/(dashboard)/hooks/mcpServers/useMCPServerHealth";
+import NotificationsManager from "@/components/molecules/notifications_manager";
+import { deleteMCPServer } from "@/components/networking";
 import { MCPSubmissionsTab } from "./MCPSubmissionsTab";
 import { MCPToolsetsTab } from "./MCPToolsetsTab";
 import CreateMCPServer from "./create_mcp_server";
 import MCPConnect from "./mcp_connect";
 import MCPServerCard from "./MCPServerCard";
 import { MCPServerView } from "./mcp_server_view";
-import type { DiscoverableMCPServer, MCPServer, MCPServerProps, MCPUserEnvVarsStatus, Team } from "./types";
-import MCPSemanticFilterSettings from "../Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings";
+import type {
+  DiscoverableMCPServer,
+  MCPServer,
+  MCPServerProps,
+  MCPUserEnvVarsStatus,
+  Team,
+} from "@/components/mcp_tools/types";
+import MCPSemanticFilterSettings from "@/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings";
 import MCPNetworkSettings from "./MCPNetworkSettings";
 import MCPDiscovery from "./mcp_discovery";
-import { ByokCredentialModal } from "./ByokCredentialModal";
+import { ByokCredentialModal } from "@/components/mcp_tools/ByokCredentialModal";
 import { getSecureItem } from "@/utils/secureStorage";
 import { TOOLS_OAUTH_UI_STATE_KEY } from "@/hooks/mcpOAuthUtils";
 import UserEnvVarsModal from "./UserEnvVarsModal";
-import { listMCPUserEnvVarStatus } from "../networking";
+import { listMCPUserEnvVarStatus } from "@/components/networking";
 
 type SortKey = "created_desc" | "updated_desc" | "name_asc" | "health";
 
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_tool_configuration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_tool_configuration.test.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/components/mcp_tools/mcp_tool_configuration.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_tool_configuration.test.tsx
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_tool_configuration.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_tool_configuration.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/components/mcp_tools/mcp_tool_configuration.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_tool_configuration.tsx
index 1ebc07eac866..60c4c264c3ce 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_tool_configuration.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_tool_configuration.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Card, Title, Text } from "@tremor/react";
 import { ToolOutlined, CheckCircleOutlined, SearchOutlined, EditOutlined } from "@ant-design/icons";
 import { Badge, Spin, Checkbox, Input, Radio } from "antd";
-import McpCrudPermissionPanel from "./McpCrudPermissionPanel";
+import McpCrudPermissionPanel from "@/components/mcp_tools/McpCrudPermissionPanel";
 import { TOOL_DISPLAY_NAME_PATTERN } from "./utils";
 
 interface KeyTool {
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_tools.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_tools.test.tsx
similarity index 98%
rename from ui/litellm-dashboard/src/components/mcp_tools/mcp_tools.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_tools.test.tsx
index 2e8fa901f6d0..8b0e6d62f660 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_tools.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_tools.test.tsx
@@ -2,10 +2,10 @@ import { render, screen, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { describe, expect, it, vi, beforeEach } from "vitest";
 import MCPToolsViewer from "./mcp_tools";
-import { listMCPTools, getMCPOAuthUserCredentialStatus } from "../networking";
+import { listMCPTools, getMCPOAuthUserCredentialStatus } from "@/components/networking";
 import { isTokenValid, getToken } from "@/utils/mcpTokenStore";
 
-vi.mock("../networking", () => ({
+vi.mock("@/components/networking", () => ({
   listMCPTools: vi.fn(),
   callMCPTool: vi.fn(),
   getMCPOAuthUserCredentialStatus: vi.fn(),
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_tools.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_tools.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/components/mcp_tools/mcp_tools.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_tools.tsx
index 928a2e3c6bb1..428c10da2848 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_tools.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_tools.tsx
@@ -9,8 +9,8 @@ import {
   MCPContent,
   CallMCPToolResponse,
   getMcpOAuthMode,
-} from "./types";
-import { listMCPTools, callMCPTool, getMCPOAuthUserCredentialStatus } from "../networking";
+} from "@/components/mcp_tools/types";
+import { listMCPTools, callMCPTool, getMCPOAuthUserCredentialStatus } from "@/components/networking";
 import { isTokenValid, getToken, removeToken } from "@/utils/mcpTokenStore";
 import { sanitizeMcpAliasForHeader, buildMcpPassthroughAuthHeader } from "@/utils/mcpHeaderUtils";
 import { useToolsOAuthFlow } from "@/hooks/useToolsOAuthFlow";
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/testUtils.ts b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/testUtils.ts
similarity index 100%
rename from ui/litellm-dashboard/src/components/mcp_tools/testUtils.ts
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/testUtils.ts
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/utils.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/utils.test.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/components/mcp_tools/utils.test.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/utils.test.tsx
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/utils.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/utils.tsx
similarity index 97%
rename from ui/litellm-dashboard/src/components/mcp_tools/utils.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/utils.tsx
index 7d6e24fc480f..4738e1e8fba4 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/utils.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/utils.tsx
@@ -1,4 +1,4 @@
-import { MCPEnvVar, MCPEnvVarScope } from "./types";
+import { MCPEnvVar, MCPEnvVarScope } from "@/components/mcp_tools/types";
 
 export const extractMCPToken = (url: string): { token: string | null; baseUrl: string } => {
   try {
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/page.tsx
index dfc7ca158963..462c48360cd3 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/page.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { MCPServers } from "@/components/mcp_tools";
+import { MCPServers } from "./_components";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 export default function McpServers() {
diff --git a/ui/litellm-dashboard/tests/CreateKeyPage.expiredToken.test.tsx b/ui/litellm-dashboard/tests/CreateKeyPage.expiredToken.test.tsx
index e871bbe82729..62346eff057a 100644
--- a/ui/litellm-dashboard/tests/CreateKeyPage.expiredToken.test.tsx
+++ b/ui/litellm-dashboard/tests/CreateKeyPage.expiredToken.test.tsx
@@ -130,7 +130,7 @@ vi.mock("@/components/cache_dashboard", () => ({ default: stub("cache-dashboard"
 vi.mock("@/app/(dashboard)/guardrails/_components", () => ({ default: stub("guardrails") }));
 vi.mock("@/components/prompts", () => ({ default: stub("prompts") }));
 vi.mock("@/components/transform_request", () => ({ default: stub("transform-request") }));
-vi.mock("@/components/mcp_tools", () => ({ MCPServers: stub("mcp-servers") }));
+vi.mock("@/app/(dashboard)/mcp-servers/_components", () => ({ MCPServers: stub("mcp-servers") }));
 vi.mock("@/app/(dashboard)/tag-management/_components", () => ({ default: stub("tag-management") }));
 vi.mock("@/app/(dashboard)/vector-stores/_components", () => ({ default: stub("vector-stores") }));
 vi.mock("@/components/ui_theme_settings", () => ({ default: stub("ui-theme-settings") }));