diff --git a/ui/litellm-dashboard/src/components/leftnav.tsx b/ui/litellm-dashboard/src/components/leftnav.tsx
index 121f1cbb6..99da05002 100644
--- a/ui/litellm-dashboard/src/components/leftnav.tsx
+++ b/ui/litellm-dashboard/src/components/leftnav.tsx
@@ -46,8 +46,8 @@ const Sidebar: React.FC<SidebarProps> = ({
     );
   }
   return (
-    <Layout style={{ minHeight: "100vh", maxWidth: "100px" }}>
-      <Sider width={100}>
+    <Layout style={{ minHeight: "100vh", maxWidth: "120px" }}>
+      <Sider width={120}>
         <Menu
           mode="inline"
           defaultSelectedKeys={defaultSelectedKey ? defaultSelectedKey : ["1"]}
@@ -89,7 +89,7 @@ const Sidebar: React.FC<SidebarProps> = ({
           ) : null}
           <Menu.Item key="8" onClick={() => setPage("settings")}>
           <Text>
-            Settings
+            Integrations
           </Text>
           </Menu.Item>
           {userRole == "Admin" ? (
diff --git a/ui/litellm-dashboard/src/components/settings.tsx b/ui/litellm-dashboard/src/components/settings.tsx
index 31e17b6f1..fc9f48d35 100644
--- a/ui/litellm-dashboard/src/components/settings.tsx
+++ b/ui/litellm-dashboard/src/components/settings.tsx
@@ -34,6 +34,7 @@ const Settings: React.FC<SettingsPageProps> = ({
   const [callbacks, setCallbacks] = useState<string[]>([]);
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [form] = Form.useForm();
+  const [selectedCallback, setSelectedCallback] = useState<string | null>(null);
 
   useEffect(() => {
     if (!accessToken || !userRole || !userID) {
@@ -55,6 +56,7 @@ const Settings: React.FC<SettingsPageProps> = ({
   const handleCancel = () => {
     setIsModalVisible(false);
     form.resetFields();
+    setSelectedCallback(null);
   };
 
   const handleOk = () => {
@@ -64,8 +66,8 @@ const Settings: React.FC<SettingsPageProps> = ({
     // Handle form submission
     form.validateFields().then((values) => {
       // Call API to add the callback
+      console.log("Form values:", values);
       let payload;
-      console.log("Callback values:", values);
       if (values.callback === 'langfuse') {
         payload = {
           environment_variables: {
@@ -80,8 +82,19 @@ const Settings: React.FC<SettingsPageProps> = ({
 
         // add langfuse to callbacks
         setCallbacks(callbacks ? [...callbacks, values.callback] : [values.callback]);
+      } else if (values.callback === 'slack') {
+        payload = {
+          litellm_settings: {
+            success_callback: [values.callback]
+          },
+          environment_variables: {
+            SLACK_WEBHOOK_URL: values.slackWebhookUrl
+          }
+        };
+        setCallbacksCall(accessToken, payload);
 
-
+        // add slack to callbacks
+        setCallbacks(callbacks ? [...callbacks, values.callback] : [values.callback]);
       } else {
         payload = {
           error: 'Invalid callback value'
@@ -89,9 +102,14 @@ const Settings: React.FC<SettingsPageProps> = ({
       }
       setIsModalVisible(false);
       form.resetFields();
+      setSelectedCallback(null);
     });
   };
 
+  const handleCallbackChange = (value: string) => {
+    setSelectedCallback(value);
+  };
+
   return (
     <div className="w-full mx-4">
       <Grid numItems={1} className="gap-2 p-8 h-[75vh] w-full mt-2">
@@ -138,33 +156,48 @@ const Settings: React.FC<SettingsPageProps> = ({
             name="callback"
             rules={[{ required: true, message: "Please select a callback" }]}
           >
-            <Select>
+            <Select onChange={handleCallbackChange}>
               <Select.Option value="langfuse">langfuse</Select.Option>
-              <Select.Option value="slack">slack</Select.Option>
+              <Select.Option value="slack">slack alerting</Select.Option>
             </Select>
           </Form.Item>
 
-          <Form.Item
-            label="LANGFUSE_PUBLIC_KEY"
-            name="langfusePublicKey"
-            rules={[
-              { required: true, message: "Please enter the public key" },
-            ]}
-          >
-            <Input.Password />
-          </Form.Item>
+          {selectedCallback === 'langfuse' && (
+            <>
+              <Form.Item
+                label="LANGFUSE_PUBLIC_KEY"
+                name="langfusePublicKey"
+                rules={[
+                  { required: true, message: "Please enter the public key" },
+                ]}
+              >
+                <Input.Password />
+              </Form.Item>
 
-          <Form.Item
-            label="LANGFUSE_PRIVATE_KEY"
-            name="langfusePrivateKey"
-            rules={[
-              { required: true, message: "Please enter the private key" },
-            ]}
-          >
-            <Input.Password />
-          </Form.Item>
+              <Form.Item
+                label="LANGFUSE_PRIVATE_KEY"
+                name="langfusePrivateKey"
+                rules={[
+                  { required: true, message: "Please enter the private key" },
+                ]}
+              >
+                <Input.Password />
+              </Form.Item>
+            </>
+          )}
+
+          {selectedCallback === 'slack' && (
+            <Form.Item
+              label="SLACK_WEBHOOK_URL"
+              name="slackWebhookUrl"
+              rules={[
+                { required: true, message: "Please enter the Slack webhook URL" },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+          )}
 
-        
           <div style={{ textAlign: "right", marginTop: "10px" }}>
             <Button2 htmlType="submit">Save</Button2>
           </div>