diff --git a/src/components/BusinessSocials.tsx b/src/components/BusinessSocials.tsx
new file mode 100644
index 0000000..a19401f
--- /dev/null
+++ b/src/components/BusinessSocials.tsx
@@ -0,0 +1,55 @@
+'use client'
+import { useEffect, useState } from 'react'
+
+interface Social { network: string; url: string }
+
+/** Inline SVGs, so the site needs no icon package for this. */
+const PATHS: Record<string, string> = {
+  facebook: 'M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12z',
+  instagram: 'M12 2.2c3.2 0 3.6 0 4.9.1 3.3.1 4.8 1.7 4.9 4.9.1 1.3.1 1.6.1 4.8s0 3.6-.1 4.9c-.1 3.2-1.7 4.8-4.9 4.9-1.3.1-1.6.1-4.9.1s-3.6 0-4.9-.1c-3.2-.1-4.8-1.7-4.9-4.9C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9C2.4 3.9 4 2.4 7.1 2.3 8.4 2.2 8.8 2.2 12 2.2zm0 3.1a6.7 6.7 0 1 0 0 13.4 6.7 6.7 0 0 0 0-13.4zm0 11a4.3 4.3 0 1 1 0-8.6 4.3 4.3 0 0 1 0 8.6zm6.9-11.2a1.6 1.6 0 1 1-3.1 0 1.6 1.6 0 0 1 3.1 0z',
+  tiktok: 'M16.6 5.8a4.8 4.8 0 0 1-1.2-3.2h-3.3v13.1a2.9 2.9 0 1 1-2-2.8V9.5a6.1 6.1 0 1 0 5.3 6V9.1a8 8 0 0 0 4.6 1.5V7.3a4.8 4.8 0 0 1-3.4-1.5z',
+  linkedin: 'M6.9 21.5H3.3V9.1h3.6v12.4zM5.1 7.5a2.1 2.1 0 1 1 0-4.2 2.1 2.1 0 0 1 0 4.2zm16.4 14h-3.6v-6c0-1.4 0-3.3-2-3.3s-2.3 1.6-2.3 3.2v6.1H10V9.1h3.4v1.7h.1a3.8 3.8 0 0 1 3.4-1.9c3.6 0 4.3 2.4 4.3 5.5v7.1z',
+  whatsapp: 'M12 2a10 10 0 0 0-8.6 15L2 22l5.1-1.3A10 10 0 1 0 12 2zm5.8 14.1c-.2.7-1.4 1.3-2 1.4-.5.1-1.2.1-1.9-.1-.4-.1-1-.3-1.8-.6-3.1-1.3-5.1-4.4-5.3-4.6-.1-.2-1.2-1.6-1.2-3s.7-2.1 1-2.4c.2-.3.5-.4.7-.4h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.3 0 .5l-.3.5-.4.4c-.1.1-.3.3-.1.6.1.3.6 1.1 1.4 1.8 1 .9 1.8 1.1 2.1 1.2.3.1.4.1.6-.1l.8-1c.2-.2.3-.2.6-.1l2 1c.3.1.4.2.5.3 0 .1 0 .5-.2 1.1z',
+}
+
+const LABELS: Record<string, string> = {
+  facebook: 'Facebook', instagram: 'Instagram', tiktok: 'TikTok',
+  linkedin: 'LinkedIn', whatsapp: 'WhatsApp',
+}
+
+export default function BusinessSocials({ className = '' }: { className?: string }) {
+  const [socials, setSocials] = useState<Social[]>([])
+
+  useEffect(() => {
+    const base = process.env.NEXT_PUBLIC_VULA_COMMERCE_URL
+    const id = process.env.NEXT_PUBLIC_VULA_PROJECT_ID
+    if (!base || !id) return
+    let live = true
+    fetch(base + '/api/public/profile/' + id)
+      .then((r) => (r.ok ? r.json() : null))
+      .then((d) => { if (live && Array.isArray(d?.profile?.socials)) setSocials(d.profile.socials) })
+      .catch(() => { /* no icons is where the site already was */ })
+    return () => { live = false }
+  }, [])
+
+  if (!socials.length) return null
+
+  return (
+    <div className={'flex items-center gap-3 ' + className}>
+      {socials.map((s) => (
+        <a
+          key={s.network}
+          href={s.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label={LABELS[s.network] ?? s.network}
+          className="opacity-70 transition-opacity hover:opacity-100"
+        >
+          <svg viewBox="0 0 24 24" className="h-5 w-5" fill="currentColor" aria-hidden="true">
+            <path d={PATHS[s.network]} />
+          </svg>
+        </a>
+      ))}
+    </div>
+  )
+}