diff --git a/src/components/SupabaseIntegration.tsx b/src/components/SupabaseIntegration.tsx
new file mode 100644
index 0000000..c68af0e
--- /dev/null
+++ b/src/components/SupabaseIntegration.tsx
@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+// We might need a Supabase icon here, but for now, let's use a generic one or text.
+// import { Supabase } from "lucide-react"; // Placeholder
+import { DatabaseZap } from "lucide-react"; // Using DatabaseZap as a placeholder
+import { useSettings } from "@/hooks/useSettings";
+import { showSuccess, showError } from "@/lib/toast";
+
+export function SupabaseIntegration() {
+  const { settings, updateSettings } = useSettings();
+  const [isDisconnecting, setIsDisconnecting] = useState(false);
+
+  const handleDisconnectFromSupabase = async () => {
+    setIsDisconnecting(true);
+    try {
+      // Clear the entire supabase object in settings
+      const result = await updateSettings({
+        supabase: undefined,
+      });
+      if (result) {
+        showSuccess("Successfully disconnected from Supabase");
+      } else {
+        showError("Failed to disconnect from Supabase");
+      }
+    } catch (err: any) {
+      showError(
+        err.message || "An error occurred while disconnecting from Supabase"
+      );
+    } finally {
+      setIsDisconnecting(false);
+    }
+  };
+
+  // Check if there's any Supabase accessToken to determine connection status
+  const isConnected = !!settings?.supabase?.accessToken;
+
+  if (!isConnected) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center justify-between">
+      <div>
+        <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+          Supabase Integration
+        </h3>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+          Your account is connected to Supabase.
+        </p>
+      </div>
+
+      <Button
+        onClick={handleDisconnectFromSupabase}
+        variant="destructive"
+        size="sm"
+        disabled={isDisconnecting}
+        className="flex items-center gap-2"
+      >
+        {isDisconnecting ? "Disconnecting..." : "Disconnect from Supabase"}
+        <DatabaseZap className="h-4 w-4" /> {/* Placeholder icon */}
+      </Button>
+    </div>
+  );
+}
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index 1eae295..3163137 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -12,6 +12,7 @@ import { Button } from "@/components/ui/button";
 import { ArrowLeft } from "lucide-react";
 import { useRouter } from "@tanstack/react-router";
 import { GitHubIntegration } from "@/components/GitHubIntegration";
+import { SupabaseIntegration } from "@/components/SupabaseIntegration";
 
 export default function SettingsPage() {
   const { theme, setTheme } = useTheme();
@@ -142,6 +143,7 @@ export default function SettingsPage() {
             </h2>
             <div className="space-y-4">
               <GitHubIntegration />
+              <SupabaseIntegration />
             </div>
           </div>