diff --git a/app/[locale]/settings/page.tsx b/app/[locale]/settings/page.tsx
index fedf74d..6f7affd 100644
--- a/app/[locale]/settings/page.tsx
+++ b/app/[locale]/settings/page.tsx
@@ -30,8 +30,11 @@ import {
   Notifications,
   Security,
   Save,
-  MenuBook
+  MenuBook,
+  CardMembership
 } from '@mui/icons-material'
+import UsageDisplay from '@/components/subscription/usage-display'
+import Link from 'next/link'
 
 export default function SettingsPage() {
   const { user } = useAuth()
@@ -247,6 +250,44 @@ export default function SettingsPage() {
               </Card>
             </Box>
 
+            {/* Subscription & Usage */}
+            <Box sx={{ flex: '1 1 100%' }}>
+              <Card variant="outlined">
+                <CardContent>
+                  <Box display="flex" alignItems="center" justifyContent="space-between" mb={3}>
+                    <Box display="flex" alignItems="center">
+                      <CardMembership sx={{ mr: 1, color: 'primary.main' }} />
+                      <Typography variant="h6">
+                        Subscription & Usage
+                      </Typography>
+                    </Box>
+                    <Button
+                      variant="outlined"
+                      size="small"
+                      component={Link}
+                      href={`/${locale}/subscription`}
+                    >
+                      Manage Plan
+                    </Button>
+                  </Box>
+
+                  <UsageDisplay compact={true} showUpgradeButton={false} />
+
+                  <Box mt={2}>
+                    <Button
+                      variant="text"
+                      size="small"
+                      component={Link}
+                      href={`/${locale}/subscription`}
+                      fullWidth
+                    >
+                      View Subscription Details
+                    </Button>
+                  </Box>
+                </CardContent>
+              </Card>
+            </Box>
+
             {/* Bible Preferences */}
             <Box sx={{ flex: '1 1 100%' }}>
               <Card variant="outlined">