diff --git a/src/pages/Inventory/Inventory.tsx b/src/pages/Inventory/Inventory.tsx
index c4f26fd..68e1022 100644
--- a/src/pages/Inventory/Inventory.tsx
+++ b/src/pages/Inventory/Inventory.tsx
@@ -64,6 +64,8 @@ const NAV_SECTIONS = [
       { label: 'FilterBar', href: '#filterbar' },
       { label: 'GroupCard', href: '#groupcard' },
       { label: 'LineChart', href: '#linechart' },
+      { label: 'LoginDialog', href: '#logindialog' },
+      { label: 'LoginForm', href: '#loginform' },
       { label: 'MenuItem', href: '#menuitem' },
       { label: 'Modal', href: '#modal' },
       { label: 'MultiSelect', href: '#multi-select' },
diff --git a/src/pages/Inventory/sections/CompositesSection.tsx b/src/pages/Inventory/sections/CompositesSection.tsx
index 7207896..dfde29f 100644
--- a/src/pages/Inventory/sections/CompositesSection.tsx
+++ b/src/pages/Inventory/sections/CompositesSection.tsx
@@ -16,6 +16,8 @@ import {
   FilterBar,
   GroupCard,
   LineChart,
+  LoginDialog,
+  LoginForm,
   MenuItem,
   Modal,
   MultiSelect,
@@ -219,6 +221,11 @@ export function CompositesSection() {
   // MultiSelect
   const [multiValue, setMultiValue] = useState<string[]>(['admin'])
 
+  // LoginDialog
+  const [loginDialogOpen, setLoginDialogOpen] = useState(false)
+  const [loginLoading, setLoginLoading] = useState(false)
+  const [loginError, setLoginError] = useState<string | undefined>()
+
   // 15. Modal
   const [modalOpen, setModalOpen] = useState(false)
 
@@ -502,6 +509,59 @@ export function CompositesSection() {
           <LineChart series={CHART_SERIES} xLabel="Time (minutes)" yLabel="Count" width={420} height={180} />
         </DemoCard>
 
+        {/* LoginDialog */}
+        <DemoCard
+          id="logindialog"
+          title="LoginDialog"
+          description="Modal login dialog wrapping LoginForm. Supports social providers, credentials, and error states."
+        >
+          <div className={styles.demoAreaRow}>
+            <Button size="sm" variant="primary" onClick={() => setLoginDialogOpen(true)}>
+              Open LoginDialog
+            </Button>
+            <Button size="sm" variant="secondary" onClick={() => { setLoginError('Invalid email or password.'); setLoginDialogOpen(true) }}>
+              With error
+            </Button>
+          </div>
+          <LoginDialog
+            open={loginDialogOpen}
+            onClose={() => { setLoginDialogOpen(false); setLoginError(undefined); setLoginLoading(false) }}
+            logo={<div style={{ width: 40, height: 40, borderRadius: 'var(--radius-md)', background: 'var(--amber)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontWeight: 700, fontSize: 16 }}>C</div>}
+            title="Sign in to Cameleer"
+            socialProviders={[
+              { label: 'Continue with Google', onClick: () => {} },
+              { label: 'Continue with GitHub', onClick: () => {} },
+            ]}
+            onSubmit={() => {
+              setLoginLoading(true)
+              setTimeout(() => { setLoginLoading(false); setLoginDialogOpen(false) }, 1500)
+            }}
+            onForgotPassword={() => {}}
+            onSignUp={() => {}}
+            error={loginError}
+            loading={loginLoading}
+          />
+        </DemoCard>
+
+        {/* LoginForm */}
+        <DemoCard
+          id="loginform"
+          title="LoginForm"
+          description="Standalone login form with configurable social providers, validation, and loading state."
+        >
+          <div style={{ maxWidth: 360 }}>
+            <LoginForm
+              title="Sign in"
+              socialProviders={[
+                { label: 'Continue with Google', onClick: () => {} },
+              ]}
+              onSubmit={() => {}}
+              onForgotPassword={() => {}}
+              onSignUp={() => {}}
+            />
+          </div>
+        </DemoCard>
+
         {/* 14. MenuItem */}
         <DemoCard
           id="menuitem"