diff --git a/maternal-app/maternal-app-backend/src/modules/invite-codes/invite-codes.controller.ts b/maternal-app/maternal-app-backend/src/modules/invite-codes/invite-codes.controller.ts
index 27a35fc..bdfc995 100644
--- a/maternal-app/maternal-app-backend/src/modules/invite-codes/invite-codes.controller.ts
+++ b/maternal-app/maternal-app-backend/src/modules/invite-codes/invite-codes.controller.ts
@@ -9,11 +9,14 @@ import {
   Query,
   UseGuards,
   Request,
+  Patch,
 } from '@nestjs/common';
 import { InviteCodesService } from './invite-codes.service';
 import { CreateInviteCodeDto, UpdateInviteCodeDto } from './invite-codes.dto';
+import { AdminGuard } from '../../common/guards/admin.guard';
 
 @Controller('api/v1/admin/invite-codes')
+@UseGuards(AdminGuard)
 export class InviteCodesController {
   constructor(private readonly inviteCodesService: InviteCodesService) {}
 
@@ -57,6 +60,11 @@ export class InviteCodesController {
     return this.inviteCodesService.update(id, dto);
   }
 
+  @Patch(':id')
+  async patch(@Param('id') id: string, @Body() dto: UpdateInviteCodeDto) {
+    return this.inviteCodesService.update(id, dto);
+  }
+
   @Delete(':id')
   async remove(@Param('id') id: string) {
     await this.inviteCodesService.delete(id);
diff --git a/parentflow-admin/src/app/invite-codes/page.tsx b/parentflow-admin/src/app/invite-codes/page.tsx
index 0f17a43..4d99500 100644
--- a/parentflow-admin/src/app/invite-codes/page.tsx
+++ b/parentflow-admin/src/app/invite-codes/page.tsx
@@ -17,7 +17,6 @@ import {
   Switch,
   Alert,
   Tooltip,
-  Grid,
 } from '@mui/material';
 import { DataGrid, GridColDef } from '@mui/x-data-grid';
 import {
@@ -178,7 +177,7 @@ export default function InviteCodesPage() {
       width: 100,
       renderCell: (params) => (
         <Typography variant="body2">
-          {params.value} / {params.row.maxUses || '∞'}
+          {params.value.toLocaleString()} / {params.row.maxUses?.toLocaleString() || '∞'}
         </Typography>
       ),
     },
@@ -255,50 +254,42 @@ export default function InviteCodesPage() {
           </Box>
         </Box>
 
-        <Grid container spacing={3} sx={{ mb: 3 }}>
-          <Grid item xs={12} sm={6} md={3}>
-            <Paper sx={{ p: 2 }}>
-              <Typography variant="body2" color="text.secondary" gutterBottom>
-                Total Codes
-              </Typography>
-              <Typography variant="h4">{inviteCodes.length}</Typography>
-            </Paper>
-          </Grid>
-          <Grid item xs={12} sm={6} md={3}>
-            <Paper sx={{ p: 2 }}>
-              <Typography variant="body2" color="text.secondary" gutterBottom>
-                Active Codes
-              </Typography>
-              <Typography variant="h4">
-                {inviteCodes.filter(c => c.isActive).length}
-              </Typography>
-            </Paper>
-          </Grid>
-          <Grid item xs={12} sm={6} md={3}>
-            <Paper sx={{ p: 2 }}>
-              <Typography variant="body2" color="text.secondary" gutterBottom>
-                Total Uses
-              </Typography>
-              <Typography variant="h4">
-                {inviteCodes.reduce((sum, c) => sum + c.uses, 0)}
-              </Typography>
-            </Paper>
-          </Grid>
-          <Grid item xs={12} sm={6} md={3}>
-            <Paper sx={{ p: 2 }}>
-              <Typography variant="body2" color="text.secondary" gutterBottom>
-                Available
-              </Typography>
-              <Typography variant="h4">
-                {inviteCodes.filter(c => {
-                  const isExpired = c.expiresAt && new Date(c.expiresAt) < new Date();
-                  const isMaxedOut = c.maxUses && c.uses >= c.maxUses;
-                  return c.isActive && !isExpired && !isMaxedOut;
-                }).length}
-              </Typography>
-            </Paper>
-          </Grid>
-        </Grid>
+        <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: 3, mb: 3 }}>
+          <Paper sx={{ p: 2 }}>
+            <Typography variant="body2" color="text.secondary" gutterBottom>
+              Total Codes
+            </Typography>
+            <Typography variant="h4">{inviteCodes.length.toLocaleString()}</Typography>
+          </Paper>
+          <Paper sx={{ p: 2 }}>
+            <Typography variant="body2" color="text.secondary" gutterBottom>
+              Active Codes
+            </Typography>
+            <Typography variant="h4">
+              {inviteCodes.filter(c => c.isActive).length.toLocaleString()}
+            </Typography>
+          </Paper>
+          <Paper sx={{ p: 2 }}>
+            <Typography variant="body2" color="text.secondary" gutterBottom>
+              Total Uses
+            </Typography>
+            <Typography variant="h4">
+              {inviteCodes.reduce((sum, c) => sum + c.uses, 0).toLocaleString()}
+            </Typography>
+          </Paper>
+          <Paper sx={{ p: 2 }}>
+            <Typography variant="body2" color="text.secondary" gutterBottom>
+              Available
+            </Typography>
+            <Typography variant="h4">
+              {inviteCodes.filter(c => {
+                const isExpired = c.expiresAt && new Date(c.expiresAt) < new Date();
+                const isMaxedOut = c.maxUses && c.uses >= c.maxUses;
+                return c.isActive && !isExpired && !isMaxedOut;
+              }).length.toLocaleString()}
+            </Typography>
+          </Paper>
+        </Box>
 
         <Paper sx={{ p: 2 }}>
           <DataGrid