diff --git a/libs/superagent/app/api/vector_dbs.py b/libs/superagent/app/api/vector_dbs.py
index 6d9de4682..fd7e3336a 100644
--- a/libs/superagent/app/api/vector_dbs.py
+++ b/libs/superagent/app/api/vector_dbs.py
@@ -102,3 +102,14 @@ async def update(
         return {"success": True, "data": data}
     except Exception as e:
         handle_exception(e)
+
+
+@router.delete(
+    "/vector-dbs/{vector_db_id}",
+    name="delete",
+    description="Delete a Vector Database",
+)
+async def delete(vector_db_id: str, api_user=Depends(get_current_api_user)):
+    """Endpoint for deleting a Vector Database"""
+    await prisma.vectordb.delete(where={"id": vector_db_id, "apiUserId": api_user.id})
+    return {"success": True}
diff --git a/libs/ui/app/integrations/storage.tsx b/libs/ui/app/integrations/storage.tsx
index fcf52a41d..7f30c0183 100644
--- a/libs/ui/app/integrations/storage.tsx
+++ b/libs/ui/app/integrations/storage.tsx
@@ -3,12 +3,14 @@
 import * as React from "react"
 import Image from "next/image"
 import { useRouter } from "next/navigation"
+import { VectorDb } from "@/models/models"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 import * as z from "zod"
 
 import { siteConfig } from "@/config/site"
 import { Api } from "@/lib/api"
+import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import {
   Dialog,
@@ -29,8 +31,9 @@ import {
   FormMessage,
 } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
-import { Skeleton } from "@/components/ui/skeleton"
 import { Spinner } from "@/components/ui/spinner"
+import { Toaster } from "@/components/ui/toaster"
+import { useToast } from "@/components/ui/use-toast"
 
 const pineconeSchema = z.object({
   PINECONE_API_KEY: z.string(),
@@ -83,6 +86,7 @@ export default function Storage({
   const [open, setOpen] = React.useState<boolean>()
   const [selectedDB, setSelectedDB] = React.useState<any>()
   const router = useRouter()
+  const { toast } = useToast()
   const api = new Api(profile.api_key)
   const { ...form } = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -116,6 +120,20 @@ export default function Storage({
     setOpen(false)
   }
 
+  const onDelete = async (vectorDb: VectorDb) => {
+    await api.deleteVectorDb(vectorDb.id)
+    router.refresh()
+
+    let providerName = vectorDb.provider.toLowerCase()
+
+    providerName = providerName.charAt(0).toUpperCase() + providerName.slice(1)
+
+    toast({
+      title: "Success",
+      description: `Successfully disconnected: ${providerName}`,
+    })
+  }
+
   return (
     <div className="container flex max-w-4xl flex-col space-y-10 pt-10">
       <div className="flex flex-col">
@@ -127,7 +145,7 @@ export default function Storage({
       </div>
       <div className="flex-col border-b">
         {siteConfig.vectorDbs.map((vectorDb) => {
-          const isConfigured = configuredDBs.find(
+          const currentDB = configuredDBs.find(
             (db: any) => db.provider === vectorDb.provider
           )
 
@@ -137,11 +155,12 @@ export default function Storage({
               key={vectorDb.provider}
             >
               <div className="flex items-center space-x-4">
-                {isConfigured ? (
-                  <div className="h-2 w-2 rounded-full bg-green-400" />
-                ) : (
-                  <div className="h-2 w-2 rounded-full bg-muted" />
-                )}
+                <div
+                  className={cn(
+                    "h-2 w-2 rounded-full",
+                    currentDB ? "bg-green-400" : "bg-muted"
+                  )}
+                />
                 <div className="flex items-center space-x-3">
                   <Image
                     src={vectorDb.logo}
@@ -152,16 +171,27 @@ export default function Storage({
                   <p className="font-medium">{vectorDb.name}</p>
                 </div>
               </div>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => {
-                  setSelectedDB(vectorDb)
-                  setOpen(true)
-                }}
-              >
-                Settings
-              </Button>
+              {currentDB ? (
+                <Button
+                  variant="outline"
+                  className="border-destructive text-destructive hover:bg-destructive"
+                  size="sm"
+                  onClick={() => onDelete(new VectorDb(currentDB))}
+                >
+                  Disconnect
+                </Button>
+              ) : (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    setSelectedDB(vectorDb)
+                    setOpen(true)
+                  }}
+                >
+                  Connect
+                </Button>
+              )}
             </div>
           )
         })}
@@ -241,6 +271,7 @@ export default function Storage({
           </div>
         </DialogContent>
       </Dialog>
+      <Toaster />
     </div>
   )
 }
diff --git a/libs/ui/lib/api.ts b/libs/ui/lib/api.ts
index 5533d48c3..d3359f5ce 100644
--- a/libs/ui/lib/api.ts
+++ b/libs/ui/lib/api.ts
@@ -299,4 +299,10 @@ export class Api {
       body: JSON.stringify(payload),
     })
   }
+
+  async deleteVectorDb(id: string) {
+    return this.fetchFromApi(`/vector-dbs/${id}`, {
+      method: "DELETE",
+    })
+  }
 }