diff --git a/ui/litellm-dashboard/src/components/model_dashboard.tsx b/ui/litellm-dashboard/src/components/model_dashboard.tsx
index 1cc2d98a83..44b3ac684e 100644
--- a/ui/litellm-dashboard/src/components/model_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/model_dashboard.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Card, Title, Subtitle, Table, TableHead, TableRow, TableCell, TableBody, Metric, Grid } from "@tremor/react";
 import { modelInfoCall } from "./networking";
-import { Badge, BadgeDelta } from '@tremor/react';
+import { Badge, BadgeDelta, Button } from '@tremor/react';
 
 interface ModelDashboardProps {
   accessToken: string | null;
@@ -85,6 +85,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
     console.log(modelData.data[i]);
 
   }
+  // when users click request access show pop up to allow them to request access
 
   return (
     <div style={{ width: "100%" }}>
@@ -109,7 +110,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
                 <TableCell>{model.provider}</TableCell>
 
                 <TableCell>
-                  {model.user_access ? <Badge color={"green"}>Yes</Badge> : <Badge color={"red"}>Request Access</Badge>}
+                  {model.user_access ? <Badge color={"green"}>Yes</Badge> : <Button color={"red"} size="xs">Request Access</Button>}
                 </TableCell>
 
                 <TableCell>{model.input_cost}</TableCell>
diff --git a/ui/litellm-dashboard/src/components/user_dashboard.tsx b/ui/litellm-dashboard/src/components/user_dashboard.tsx
index f3f24e4449..89dc377b9c 100644
--- a/ui/litellm-dashboard/src/components/user_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/user_dashboard.tsx
@@ -129,7 +129,7 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
             const model_info = await modelInfoCall(accessToken, userID, userRole);
             console.log("model_info:", model_info);
             // loop through model_info["data"] and create an array of element.model_name
-            let available_model_names = model_info["data"].map((element: { model_name: string; }) => element.model_name);
+            let available_model_names = model_info["data"].filter((element: { model_name: string; user_access: boolean }) => element.user_access === true).map((element: { model_name: string; }) => element.model_name);
             console.log("available_model_names:", available_model_names);
             setUserModels(available_model_names);