diff --git a/ui/litellm-dashboard/src/components/model_hub.tsx b/ui/litellm-dashboard/src/components/model_hub.tsx
index 63431d13b3..6ce413c703 100644
--- a/ui/litellm-dashboard/src/components/model_hub.tsx
+++ b/ui/litellm-dashboard/src/components/model_hub.tsx
@@ -1,20 +1,26 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
 
 import { modelHubCall } from "./networking";
 
-import { Card, Text, Title, Grid, Button, Badge, Tab,
-    TabGroup,
-    TabList,
-    TabPanel,
-    TabPanels, } from "@tremor/react";
+import {
+  Card,
+  Text,
+  Title,
+  Grid,
+  Button,
+  Badge,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+} from "@tremor/react";
 
-import { RightOutlined, CopyOutlined } from '@ant-design/icons';
+import { RightOutlined, CopyOutlined } from "@ant-design/icons";
 
-import { Modal, Tooltip } from 'antd';
+import { Modal, Tooltip } from "antd";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 
-
-
 interface ModelHubProps {
   userID: string | null;
   userRole: string | null;
@@ -22,25 +28,20 @@ interface ModelHubProps {
   accessToken: string | null;
   keys: any; // Replace with the appropriate type for 'keys' prop
   premiumUser: boolean;
-
 }
 
 interface ModelInfo {
-    model_group: string;
-    mode: string;
-    supports_function_calling: boolean;
-    supports_vision: boolean;
-    max_input_tokens?: number;
-    max_output_tokens?: number;
-
-    // Add other properties if needed
-
-  }
-
+  model_group: string;
+  mode: string;
+  supports_function_calling: boolean;
+  supports_vision: boolean;
+  max_input_tokens?: number;
+  max_output_tokens?: number;
 
+  // Add other properties if needed
+}
 
 const ModelHub: React.FC<ModelHubProps> = ({
-
   userID,
 
   userRole,
@@ -52,200 +53,141 @@ const ModelHub: React.FC<ModelHubProps> = ({
   keys,
 
   premiumUser,
-
 }) => {
-
-  const [modelHubData, setModelHubData] =  useState<ModelInfo[] | null>(null);
+  const [modelHubData, setModelHubData] = useState<ModelInfo[] | null>(null);
   const [isModalVisible, setIsModalVisible] = useState(false);
-  const [selectedModel, setSelectedModel] =  useState<null | ModelInfo>(null);
-
+  const [selectedModel, setSelectedModel] = useState<null | ModelInfo>(null);
 
   useEffect(() => {
-
     if (!accessToken || !token || !userRole || !userID) {
       return;
     }
 
-
-
     const fetchData = async () => {
-
       try {
-
         const _modelHubData = await modelHubCall(accessToken, userID, userRole);
 
         console.log("ModelHubData:", _modelHubData);
 
         setModelHubData(_modelHubData.data);
-
       } catch (error) {
-
         console.error("There was an error fetching the model data", error);
-
       }
-
     };
 
-
-
     fetchData();
-
   }, [accessToken, token, userRole, userID]);
 
-
-
   const showModal = (model: ModelInfo) => {
-
     setSelectedModel(model);
 
     setIsModalVisible(true);
-
   };
 
-
-
   const handleOk = () => {
-
     setIsModalVisible(false);
 
     setSelectedModel(null);
-
   };
 
-
-
   const handleCancel = () => {
-
     setIsModalVisible(false);
 
     setSelectedModel(null);
-
   };
 
-
-
   const copyToClipboard = (text: string) => {
-
     navigator.clipboard.writeText(text);
-
   };
 
-
-
   return (
-
     <div>
+      <div className="w-full m-2 mt-2 p-8">
+        <div className="relative w-full"></div>
 
-<div className="w-full m-2 mt-2 p-8">
-
-            <div className="relative w-full">
-
- 
-
-</div>
-
-
-        <div className='flex items-center'>
-
-        <Title className='ml-8 text-center '>Model Hub</Title>
-        <Button className='ml-4'>
-        <a href="https://forms.gle/W3U4PZpJGFHWtHyA9" target="_blank">
-        ✨ Share
-        </a>
-
-
-</Button>
-            
+        <div className="flex items-center">
+          <Title className="ml-8 text-center ">Model Hub</Title>
+          <Button className="ml-4">
+            <a href="https://forms.gle/W3U4PZpJGFHWtHyA9" target="_blank">
+              ✨ Make Public
+            </a>
+          </Button>
         </div>
-      
-              
+
         <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-4">
+          {modelHubData &&
+            modelHubData.map((model: ModelInfo) => (
+              <Card key={model.model_group} className="mt-5 mx-8">
+                <pre className="flex justify-between">
+                  <Title>{model.model_group}</Title>
+                  <Tooltip title={model.model_group}>
+                    <CopyOutlined
+                      onClick={() => copyToClipboard(model.model_group)}
+                      style={{ cursor: "pointer", marginRight: "10px" }}
+                    />
+                  </Tooltip>
+                </pre>
 
-        
-          {modelHubData && modelHubData.map((model: ModelInfo) => (
-
-            <Card
-
-              key={model.model_group}
-
-              className="mt-5 mx-8"
-
-            >
-
-
-
-              <pre className='flex justify-between'>
-                
-
-                <Title>{model.model_group}</Title>
-                <Tooltip title={model.model_group}>
-
-                    <CopyOutlined onClick={() => copyToClipboard(model.model_group)} style={{ cursor: 'pointer', marginRight: '10px' }} />
-
-                    </Tooltip>
-
-              </pre>
-
-              <div className='my-5'>
-
-              <Text>Mode: {model.mode}</Text>
-              <Text>Supports Function Calling: {model?.supports_function_calling == true ? "Yes" : "No"}</Text>
-              <Text>Supports Vision: {model?.supports_vision == true ? "Yes" : "No"}</Text>
-              <Text>Max Input Tokens: {model?.max_input_tokens ? model?.max_input_tokens : "N/A"}</Text>
-              <Text>Max Output Tokens: {model?.max_output_tokens ? model?.max_output_tokens : "N/A"}</Text>
-
-              </div>
-
-              <div style={{ marginTop: 'auto', textAlign: 'right' }}>
-
-            
-
-                <a href="#" onClick={() => showModal(model)} style={{ color: '#1890ff', fontSize: 'smaller' }}>
-
-                  View more <RightOutlined />
-
-                </a>
-
-              </div>
-
-            </Card>
-
-          ))}
+                <div className="my-5">
+                  <Text>Mode: {model.mode}</Text>
+                  <Text>
+                    Supports Function Calling:{" "}
+                    {model?.supports_function_calling == true ? "Yes" : "No"}
+                  </Text>
+                  <Text>
+                    Supports Vision:{" "}
+                    {model?.supports_vision == true ? "Yes" : "No"}
+                  </Text>
+                  <Text>
+                    Max Input Tokens:{" "}
+                    {model?.max_input_tokens ? model?.max_input_tokens : "N/A"}
+                  </Text>
+                  <Text>
+                    Max Output Tokens:{" "}
+                    {model?.max_output_tokens
+                      ? model?.max_output_tokens
+                      : "N/A"}
+                  </Text>
+                </div>
 
+                <div style={{ marginTop: "auto", textAlign: "right" }}>
+                  <a
+                    href="#"
+                    onClick={() => showModal(model)}
+                    style={{ color: "#1890ff", fontSize: "smaller" }}
+                  >
+                    View more <RightOutlined />
+                  </a>
+                </div>
+              </Card>
+            ))}
         </div>
-
       </div>
 
       <Modal
-
         title="Model Usage"
         width={800}
-
         visible={isModalVisible}
         footer={null}
-
         onOk={handleOk}
-
         onCancel={handleCancel}
-
       >
-
         {selectedModel && (
-
           <div>
+            <p>
+              <strong>Model Name:</strong> {selectedModel.model_group}
+            </p>
 
-            <p><strong>Model Name:</strong> {selectedModel.model_group}</p>
-           
             <TabGroup>
-                  <TabList>
-                    <Tab>OpenAI Python SDK</Tab>
-                    <Tab>LlamaIndex</Tab>
-                    <Tab>Langchain Py</Tab>
-                  </TabList>
-                  <TabPanels>
-                    <TabPanel>
-                      <SyntaxHighlighter language="python">
-                        {`
+              <TabList>
+                <Tab>OpenAI Python SDK</Tab>
+                <Tab>LlamaIndex</Tab>
+                <Tab>Langchain Py</Tab>
+              </TabList>
+              <TabPanels>
+                <TabPanel>
+                  <SyntaxHighlighter language="python">
+                    {`
 import openai
 client = openai.OpenAI(
     api_key="your_api_key",
@@ -264,11 +206,11 @@ response = client.chat.completions.create(
 
 print(response)
             `}
-                      </SyntaxHighlighter>
-                    </TabPanel>
-                    <TabPanel>
-                      <SyntaxHighlighter language="python">
-                        {`
+                  </SyntaxHighlighter>
+                </TabPanel>
+                <TabPanel>
+                  <SyntaxHighlighter language="python">
+                    {`
 import os, dotenv
 
 from llama_index.llms import AzureOpenAI
@@ -300,11 +242,11 @@ response = query_engine.query("What did the author do growing up?")
 print(response)
 
             `}
-                      </SyntaxHighlighter>
-                    </TabPanel>
-                    <TabPanel>
-                      <SyntaxHighlighter language="python">
-                        {`
+                  </SyntaxHighlighter>
+                </TabPanel>
+                <TabPanel>
+                  <SyntaxHighlighter language="python">
+                    {`
 from langchain.chat_models import ChatOpenAI
 from langchain.prompts.chat import (
     ChatPromptTemplate,
@@ -332,27 +274,19 @@ response = chat(messages)
 print(response)
 
             `}
-                      </SyntaxHighlighter>
-                    </TabPanel>
-                  </TabPanels>
-                </TabGroup>
+                  </SyntaxHighlighter>
+                </TabPanel>
+              </TabPanels>
+            </TabGroup>
 
             {/* <p><strong>Additional Params:</strong> {JSON.stringify(selectedModel.litellm_params)}</p> */}
 
             {/* Add other model details here */}
-
           </div>
-
         )}
-
       </Modal>
-
     </div>
-
   );
-
 };
 
-
-
-export default ModelHub;
\ No newline at end of file
+export default ModelHub;