diff --git a/client/components/settings/OAuthConnections.tsx b/client/components/settings/OAuthConnections.tsx
new file mode 100644
index 00000000..d0847173
--- /dev/null
+++ b/client/components/settings/OAuthConnections.tsx
@@ -0,0 +1,162 @@
+import { memo } from "react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import { Loader2, Link as LinkIcon, Unlink, ShieldCheck } from "lucide-react";
+
+export type ProviderKey = "google" | "github";
+
+export interface ProviderDescriptor {
+  provider: ProviderKey;
+  name: string;
+  description: string;
+  Icon: React.ComponentType<{ className?: string }>;
+  gradient: string;
+}
+
+export interface LinkedProviderMeta {
+  provider: ProviderKey;
+  identityId?: string;
+  linkedAt?: string;
+  lastSignInAt?: string;
+}
+
+interface OAuthConnectionsProps {
+  providers: readonly ProviderDescriptor[];
+  linkedProviderMap: Record<string, LinkedProviderMeta | undefined>;
+  connectionAction: string | null;
+  onLink: (provider: ProviderKey) => void;
+  onUnlink: (provider: ProviderKey) => void;
+  ensureSecondarySignIn?: boolean;
+}
+
+const formatTimestamp = (value?: string) => {
+  if (!value) return null;
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return null;
+  try {
+    return new Intl.DateTimeFormat(undefined, {
+      dateStyle: "medium",
+      timeStyle: "short",
+    }).format(date);
+  } catch {
+    return date.toLocaleString();
+  }
+};
+
+const statusCopy = {
+  linked: "Linked",
+  notLinked: "Not linked yet",
+};
+
+const OAuthConnections = memo(function OAuthConnections({
+  providers,
+  linkedProviderMap,
+  connectionAction,
+  onLink,
+  onUnlink,
+}: OAuthConnectionsProps) {
+  return (
+    <div className="space-y-4" aria-live="polite">
+      {providers.map((providerConfig) => {
+        const { provider, name, description, Icon, gradient } = providerConfig;
+        const linkedMeta = linkedProviderMap[provider];
+        const isLinking = connectionAction === `${provider}-link`;
+        const isUnlinking = connectionAction === `${provider}-unlink`;
+
+        const linkedBadge = linkedMeta ? (
+          <Badge className="bg-emerald-600/90 hover:bg-emerald-600 text-white border-emerald-500">
+            <ShieldCheck className="mr-1 h-3.5 w-3.5" />
+            {statusCopy.linked}
+          </Badge>
+        ) : (
+          <Badge variant="outline" className="border-border/50 text-muted-foreground">
+            {statusCopy.notLinked}
+          </Badge>
+        );
+
+        return (
+          <section
+            key={provider}
+            className={cn(
+              "flex flex-col gap-4 rounded-xl border p-4 md:flex-row md:items-center md:justify-between",
+              linkedMeta ? "border-emerald-500/40 bg-emerald-500/5" : "border-border/50 bg-background/20",
+            )}
+          >
+            <div className="flex flex-1 items-start gap-4">
+              <div
+                className={cn(
+                  "flex h-12 w-12 shrink-0 items-center justify-center rounded-lg text-white shadow-lg",
+                  `bg-gradient-to-br ${gradient}`,
+                )}
+              >
+                <Icon className="h-6 w-6" />
+              </div>
+              <div className="flex-1 space-y-2">
+                <div className="flex flex-col gap-1 md:flex-row md:items-center md:gap-3">
+                  <h3 className="text-lg font-semibold text-foreground">{name}</h3>
+                  {linkedBadge}
+                </div>
+                <p className="text-sm text-muted-foreground">{description}</p>
+                {linkedMeta && (
+                  <div className="grid gap-1 text-xs text-muted-foreground sm:grid-cols-2">
+                    {linkedMeta.linkedAt && (
+                      <div>
+                        <span className="font-medium text-foreground">Linked:</span>{" "}
+                        {formatTimestamp(linkedMeta.linkedAt)}
+                      </div>
+                    )}
+                    {linkedMeta.lastSignInAt && (
+                      <div>
+                        <span className="font-medium text-foreground">Last sign-in:</span>{" "}
+                        {formatTimestamp(linkedMeta.lastSignInAt)}
+                      </div>
+                    )}
+                    {linkedMeta.identityId && (
+                      <div className="truncate" title={linkedMeta.identityId}>
+                        <span className="font-medium text-foreground">Identity:</span>{" "}
+                        {linkedMeta.identityId}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className="flex items-center gap-3 md:self-center">
+              {linkedMeta ? (
+                <Button
+                  variant="outline"
+                  className="flex items-center gap-2"
+                  disabled={isUnlinking}
+                  onClick={() => onUnlink(provider)}
+                >
+                  {isUnlinking ? (
+                    <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
+                  ) : (
+                    <Unlink className="h-4 w-4" aria-hidden="true" />
+                  )}
+                  <span>Unlink</span>
+                </Button>
+              ) : (
+                <Button
+                  className="flex items-center gap-2 bg-aethex-500 hover:bg-aethex-600"
+                  disabled={isLinking}
+                  onClick={() => onLink(provider)}
+                >
+                  {isLinking ? (
+                    <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
+                  ) : (
+                    <LinkIcon className="h-4 w-4" aria-hidden="true" />
+                  )}
+                  <span>Link {name}</span>
+                </Button>
+              )}
+            </div>
+          </section>
+        );
+      })}
+    </div>
+  );
+});
+
+export default OAuthConnections;