BerriAI · yuneng-berri · May 27, 2026
@@ -35,7 +35,7 @@ const MIGRATED_PAGES: Record<string, string> = {};
 function LayoutContent({ children }: { children: React.ReactNode }) {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const { accessToken } = useAuthorized();
+  const { accessToken, userRole, userId, userEmail, premiumUser } = useAuthorized();
   const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);
   const [page, setPage] = useState(() => {
     return searchParams.get("page") || "api-keys";
@@ -68,9 +68,15 @@ function LayoutContent({ children }: { children: React.ReactNode }) {
           isPublicPage={false}
           sidebarCollapsed={sidebarCollapsed}
           onToggleSidebar={toggleSidebar}
+          userID={userId}
+          userEmail={userEmail}
+          userRole={userRole}
+          premiumUser={premiumUser}
           proxySettings={undefined}
           setProxySettings={() => { }}
           accessToken={accessToken}
+          isDarkMode={false}
+          toggleDarkMode={() => { }}
         />
         <DebugWarningBanner accessToken={accessToken} />
         <div className="flex flex-1 overflow-auto">

@@ -376,12 +376,18 @@ function CreateKeyPageContent() {
             ) : (
               <div className="flex flex-col min-h-screen">
                 <Navbar
+                  userID={userID}
+                  userRole={userRole}
+                  premiumUser={premiumUser}
+                  userEmail={userEmail}
                   setProxySettings={setProxySettings}
                   proxySettings={proxySettings}
                   accessToken={accessToken}
                   isPublicPage={false}
                   sidebarCollapsed={sidebarCollapsed}
                   onToggleSidebar={toggleSidebar}
+                  isDarkMode={isDarkMode}
+                  toggleDarkMode={toggleDarkMode}
                 />
                 <div className="flex flex-1">
                   <div className="mt-2">

@@ -1,7 +1,6 @@
 import { useDisableBlogPosts } from "@/app/(dashboard)/hooks/useDisableBlogPosts";
 import { useBlogPosts, type BlogPost } from "@/app/(dashboard)/hooks/blogPosts/useBlogPosts";
-import { NAV_PRODUCT_LINK_CLASS } from "@/components/Navbar/navProductLinkClass";
-import { DownOutlined, LoadingOutlined } from "@ant-design/icons";
+import { LoadingOutlined } from "@ant-design/icons";
 import { Button, Dropdown, Space, Typography } from "antd";
 import type { MenuProps } from "antd";
 import React from "react";
@@ -75,13 +74,9 @@ export const BlogDropdown: React.FC = () => {
     ];
   }
 
-  // Blog opens a post list; Docs is a single outbound link — navbar adds a layout-only chevron there for alignment.
   return (
     <Dropdown menu={{ items }} trigger={["hover"]} placement="bottomRight">
-      <Button type="text" className={`${NAV_PRODUCT_LINK_CLASS} !border-0 !bg-transparent`}>
-        Blog
-        <DownOutlined className="text-[10px] text-gray-500" aria-hidden />
-      </Button>
+      <Button type="text">Blog</Button>
     </Dropdown>
   );
 };

@@ -29,14 +29,14 @@ describe("CommunityEngagementButtons", () => {
     expect(joinSlackLink).toHaveAttribute("rel", "noopener noreferrer");
   });
 
-  it("should render GitHub link with correct href", () => {
+  it("should render Star us on GitHub button with correct link", () => {
     renderWithProviders(<CommunityEngagementButtons />);
 
-    const githubLink = screen.getByRole("link", { name: /litellm on github/i });
-    expect(githubLink).toBeInTheDocument();
-    expect(githubLink).toHaveAttribute("href", "https://github.com/BerriAI/litellm");
-    expect(githubLink).toHaveAttribute("target", "_blank");
-    expect(githubLink).toHaveAttribute("rel", "noopener noreferrer");
+    const starOnGithubLink = screen.getByRole("link", { name: /star us on github/i });
+    expect(starOnGithubLink).toBeInTheDocument();
+    expect(starOnGithubLink).toHaveAttribute("href", "https://github.com/BerriAI/litellm");
+    expect(starOnGithubLink).toHaveAttribute("target", "_blank");
+    expect(starOnGithubLink).toHaveAttribute("rel", "noopener noreferrer");
   });
 
   it("should not render buttons when prompts are disabled", () => {
@@ -45,6 +45,6 @@ describe("CommunityEngagementButtons", () => {
     renderWithProviders(<CommunityEngagementButtons />);
 
     expect(screen.queryByRole("link", { name: /join slack/i })).not.toBeInTheDocument();
-    expect(screen.queryByRole("link", { name: /litellm on github/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole("link", { name: /star us on github/i })).not.toBeInTheDocument();
   });
 });
@@ -1,45 +1,36 @@
 import { useDisableShowPrompts } from "@/app/(dashboard)/hooks/useDisableShowPrompts";
 import { GithubOutlined, SlackOutlined } from "@ant-design/icons";
-import { Tooltip } from "antd";
+import { Button } from "antd";
 import React from "react";
 
-const iconBtnClass =
-  "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border-0 bg-transparent text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 cursor-pointer";
-
 export const CommunityEngagementButtons: React.FC = () => {
   const disableShowPrompts = useDisableShowPrompts();
 
+  // Hide buttons if prompts are disabled
   if (disableShowPrompts) {
     return null;
   }
 
   return (
-    <div
-      className="flex items-center gap-0.5 rounded-md border border-gray-200/80 bg-gray-50 px-0.5 py-0"
-      aria-label="Community links"
-    >
-      <Tooltip title="LiteLLM Slack community">
-        <a
-          href="https://www.litellm.ai/support"
-          target="_blank"
-          rel="noopener noreferrer"
-          className={iconBtnClass}
-          aria-label="Join Slack"
-        >
-          <SlackOutlined className="text-lg" />
-        </a>
-      </Tooltip>
-      <Tooltip title="LiteLLM on GitHub">
-        <a
-          href="https://github.com/BerriAI/litellm"
-          target="_blank"
-          rel="noopener noreferrer"
-          className={iconBtnClass}
-          aria-label="LiteLLM on GitHub"
-        >
-          <GithubOutlined className="text-lg" />
-        </a>
-      </Tooltip>
-    </div>
+    <>
+      <Button
+        href="https://www.litellm.ai/support"
+        target="_blank"
+        rel="noopener noreferrer"
+        icon={<SlackOutlined />}
+        className="shadow-md shadow-indigo-500/20 hover:shadow-indigo-500/50 transition-shadow"
+      >
+        Join Slack
+      </Button>
+      <Button
+        href="https://github.com/BerriAI/litellm"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="shadow-md shadow-indigo-500/20 hover:shadow-indigo-500/50 transition-shadow"
+        icon={<GithubOutlined />}
+      >
+        Star us on GitHub
+      </Button>
+    </>
   );
 };