diff --git a/ui/litellm-dashboard/src/app/globals.css b/ui/litellm-dashboard/src/app/globals.css
index 12ff7cd519f..30f3a326bb4 100644
--- a/ui/litellm-dashboard/src/app/globals.css
+++ b/ui/litellm-dashboard/src/app/globals.css
@@ -4,7 +4,7 @@
 
 :root {
   --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
+  --background-start-rgb: 255, 255, 255;
   --background-end-rgb: 255, 255, 255;
 }
 
diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index f475c5e316a..f806050c6be 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -4,8 +4,7 @@ import UserDashboard from "../components/user_dashboard";
 const CreateKeyPage = () => {
   return (
     <Suspense fallback={<div>Loading...</div>}>
-    <div className="flex min-h-screen flex-col items-center">
-      <Navbar />
+    <div className="flex min-h-screen flex-col ">
       <UserDashboard />
     </div>
     </Suspense>
diff --git a/ui/litellm-dashboard/src/components/navbar.tsx b/ui/litellm-dashboard/src/components/navbar.tsx
index ebba1e20989..75b5ada9be4 100644
--- a/ui/litellm-dashboard/src/components/navbar.tsx
+++ b/ui/litellm-dashboard/src/components/navbar.tsx
@@ -1,7 +1,20 @@
+"use client";
+
 import Link from 'next/link';
 import Image from 'next/image'
 import React, { useState } from 'react';
-function Navbar() {
+import { useSearchParams } from "next/navigation";
+import { Button, Text, Metric,Title, TextInput, Grid, Col } from "@tremor/react";
+
+// Define the props type
+interface NavbarProps {
+    userID: string | null;
+}
+const Navbar: React.FC<NavbarProps> = ({ userID }) => {
+    const searchParams = useSearchParams();
+    const token = searchParams.get("token");
+    console.log("User ID:", userID);
+
     return (
         <nav className="left-0 right-0 top-0 flex justify-between items-center h-12">
             <div className="text-left mx-4 my-2 absolute top-0 left-0">
@@ -12,13 +25,11 @@ function Navbar() {
             </div>
             </div>
             <div className="text-right mx-4 my-2 absolute top-0 right-0">
-            <a href="https://docs.litellm.ai/docs/" target="_blank" rel="noopener noreferrer">
-                <button className="border border-gray-800 rounded-lg text-gray-800 text-xl px-4 py-1 rounded p-1 mr-2 text-center">Docs</button>
-            </a>
-            <a href="https://calendly.com/d/4mp-gd3-k5k/berriai-1-1-onboarding-litellm-hosted-version" target="_blank" rel="noopener noreferrer">
-                <button className="border border-gray-800 rounded-lg text-gray-800 text-xl px-4 py-1 rounded p-1 text-center">Schedule Demo</button>
-            </a>
+                <Button color="white">
+                <Title>{userID}</Title>
+                </Button>
             </div>
+            
         </nav>
     )
 }
diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx
index 6384005c1af..7859c6a8cd9 100644
--- a/ui/litellm-dashboard/src/components/networking.tsx
+++ b/ui/litellm-dashboard/src/components/networking.tsx
@@ -3,7 +3,8 @@
  */
 import { message } from 'antd';
 
-const proxyBaseUrl = null
+// const proxyBaseUrl = null;
+const proxyBaseUrl = "http://localhost:4000" // http://localhost:4000
 
 export const keyCreateCall = async (
   accessToken: string,
diff --git a/ui/litellm-dashboard/src/components/user_dashboard.tsx b/ui/litellm-dashboard/src/components/user_dashboard.tsx
index 4a0a72e189d..db09cd8d1b7 100644
--- a/ui/litellm-dashboard/src/components/user_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/user_dashboard.tsx
@@ -5,10 +5,12 @@ import { Grid, Col, Card, Text } from "@tremor/react";
 import CreateKey from "./create_key_button";
 import ViewKeyTable from "./view_key_table";
 import EnterProxyUrl from "./enter_proxy_url";
+import Navbar from "./navbar";
 import { useSearchParams } from "next/navigation";
 import { jwtDecode } from "jwt-decode";
 
-const proxyBaseUrl = null
+// const proxyBaseUrl = null;
+const proxyBaseUrl = "http://localhost:4000" // http://localhost:4000
 
 const UserDashboard = () => {
   const [data, setData] = useState<null | any[]>(null); // Keep the initialization of state here
@@ -67,7 +69,11 @@ const UserDashboard = () => {
 
   
   return (
-    <Grid numItems={1} className="gap-0 p-10 h-[75vh] w-full">
+    <div>
+      <Navbar
+        userID={userID}
+      />
+      <Grid numItems={1} className="gap-0 p-10 h-[75vh] w-full">
       <Col numColSpan={1}>
         <ViewKeyTable
           userID={userID}
@@ -83,6 +89,8 @@ const UserDashboard = () => {
         />
       </Col>
     </Grid>
+    </div>
+
   );
 };