diff --git a/client/src/components/TicketAttachments.tsx b/client/src/components/TicketAttachments.tsx
index ce31022..e022983 100644
--- a/client/src/components/TicketAttachments.tsx
+++ b/client/src/components/TicketAttachments.tsx
@@ -114,6 +114,27 @@ export function TicketAttachments({
   const isVideo = (type: string) => type.startsWith('video/');
   const isPdf = (type: string) => type === 'application/pdf';
 
+  const normalizedCdnHost = config?.cdnDomain
+    ? (() => {
+        const raw = config.cdnDomain.trim();
+        try {
+          const parsed = new URL(raw.startsWith('http') ? raw : `https://${raw}`);
+          return parsed.hostname.toLowerCase();
+        } catch {
+          return raw.replace(/^https?:\/\//i, '').split('/')[0].toLowerCase();
+        }
+      })()
+    : null;
+
+  const isTrustedCdnUrl = (url: string) => {
+    if (!normalizedCdnHost) return false;
+    try {
+      return new URL(url).hostname.toLowerCase() === normalizedCdnHost;
+    } catch {
+      return false;
+    }
+  };
+
   if (!config?.backblazeConfigured) {
     return (
       <div className="p-4 bg-muted/50 rounded-lg">
@@ -200,19 +221,19 @@ export function TicketAttachments({
                       <DialogTitle>{attachment.fileName}</DialogTitle>
                     </DialogHeader>
                     <div className="mt-4">
-                      {isImage(attachment.fileType) ? (
+                      {isImage(attachment.fileType) && isTrustedCdnUrl(attachment.url) ? (
                         <img 
                           src={attachment.url} 
                           alt={attachment.fileName}
                           className="max-w-full h-auto rounded-lg"
                         />
-                      ) : isVideo(attachment.fileType) ? (
+                      ) : isVideo(attachment.fileType) && isTrustedCdnUrl(attachment.url) ? (
                         <video 
                           src={attachment.url} 
                           controls 
                           className="max-w-full h-auto rounded-lg"
                         />
-                      ) : isPdf(attachment.fileType) ? (
+                      ) : isPdf(attachment.fileType) && isTrustedCdnUrl(attachment.url) ? (
                         <iframe
                           src={attachment.url}
                           className="w-full h-96 rounded-lg"
@@ -284,4 +305,4 @@ export function TicketAttachments({
   return content;
 }
 
-export default TicketAttachments;
\ No newline at end of file
+export default TicketAttachments;
diff --git a/client/src/components/analytics/TicketAnalytics.tsx b/client/src/components/analytics/TicketAnalytics.tsx
index 0331653..face58e 100644
--- a/client/src/components/analytics/TicketAnalytics.tsx
+++ b/client/src/components/analytics/TicketAnalytics.tsx
@@ -23,9 +23,6 @@ const COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899'
 const statusColorMap: { [key: string]: string } = {
   'Open': '#3b82f6',
   'Closed': '#10b981',
-  'Under Review': '#f59e0b',
-  'Pending Player Response': '#8b5cf6',
-  'Resolved': '#10b981',
   'Unfinished': '#6b7280'
 };
 
diff --git a/client/src/components/dashboard/AssignedTicketUpdatesSection.tsx b/client/src/components/dashboard/AssignedTicketUpdatesSection.tsx
index a18bfbf..72b2881 100644
--- a/client/src/components/dashboard/AssignedTicketUpdatesSection.tsx
+++ b/client/src/components/dashboard/AssignedTicketUpdatesSection.tsx
@@ -5,6 +5,7 @@ import { Button } from '@modl-gg/shared-web/components/ui/button';
 import { UserCheck, Clock, User, MessageSquare, X } from 'lucide-react';
 import { useLocation } from 'wouter';
 import { formatTimeAgo } from '@/utils/date-utils';
+import { stripMarkdown } from '@/utils/markdown-utils';
 
 const INITIAL_VISIBLE = 2;
 const LOAD_MORE_COUNT = 2;
@@ -24,13 +25,13 @@ export interface AssignedTicketUpdate {
 interface AssignedTicketUpdatesSectionProps {
   updates: AssignedTicketUpdate[];
   loading: boolean;
-  onMarkAsRead: (updateId: string) => Promise<void>;
+  onDismissTicket: (ticketId: string) => Promise<void>;
 }
 
 export function AssignedTicketUpdatesSection({
   updates,
   loading,
-  onMarkAsRead,
+  onDismissTicket,
 }: AssignedTicketUpdatesSectionProps) {
   const [, setLocation] = useLocation();
   const [visibleCount, setVisibleCount] = useState(INITIAL_VISIBLE);
@@ -39,17 +40,17 @@ export function AssignedTicketUpdatesSection({
     setLocation(`/panel/tickets/${ticketId}`);
   };
 
-  const handleMarkAsRead = async (updateId: string) => {
+  const handleDismissTicket = async (ticketId: string) => {
     try {
-      await onMarkAsRead(updateId);
+      await onDismissTicket(ticketId);
     } catch (error) {
-      console.error('Error marking update as read:', error);
+      console.error('Error dismissing ticket updates:', error);
     }
   };
 
   const truncateContent = (content: string | undefined | null, maxLength: number = 100) => {
     if (!content) return 'No content available';
-    const contentStr = String(content);
+    const contentStr = stripMarkdown(String(content));
     if (contentStr.length <= maxLength) return contentStr;
     return contentStr.substring(0, maxLength) + '...';
   };
@@ -136,9 +137,9 @@ export function AssignedTicketUpdatesSection({
                             className="h-6 w-6 p-0 text-muted-foreground hover:text-blue-500"
                             onClick={(e) => {
                               e.stopPropagation();
-                              handleMarkAsRead(update.id);
+                              handleDismissTicket(update.ticketId);
                             }}
-                            title="Mark as read"
+                            title="Dismiss all updates for this ticket"
                           >
                             <X className="h-3 w-3" />
                           </Button>
diff --git a/client/src/components/dashboard/RecentTicketsSection.tsx b/client/src/components/dashboard/RecentTicketsSection.tsx
index 163805d..e282eb6 100644
--- a/client/src/components/dashboard/RecentTicketsSection.tsx
+++ b/client/src/components/dashboard/RecentTicketsSection.tsx
@@ -5,6 +5,7 @@ import { Button } from '@modl-gg/shared-web/components/ui/button';
 import { Ticket, Clock, User } from 'lucide-react';
 import { useLocation } from 'wouter';
 import { formatTimeAgo } from '@/utils/date-utils';
+import { stripMarkdown } from '@/utils/markdown-utils';
 
 export interface RecentTicket {
   id: string;
@@ -25,9 +26,7 @@ interface RecentTicketsSectionProps {
 const statusColors: Record<string, string> = {
   open: 'bg-blue-500/20 text-blue-500',
   closed: 'bg-green-500/20 text-green-500',
-  under_review: 'bg-yellow-500/20 text-yellow-500',
-  pending_player_response: 'bg-purple-500/20 text-purple-500',
-  draft: 'bg-gray-500/20 text-gray-500'
+  unfinished: 'bg-gray-500/20 text-gray-500'
 };
 
 const priorityColors: Record<string, string> = {
@@ -47,7 +46,7 @@ export function RecentTicketsSection({ tickets, loading }: RecentTicketsSectionP
 
   const truncateMessage = (message: string | undefined | null, maxLength: number = 120) => {
     if (!message) return 'No message available';
-    const messageStr = String(message);
+    const messageStr = stripMarkdown(String(message));
     if (messageStr.length <= maxLength) return messageStr;
     return messageStr.substring(0, maxLength) + '...';
   };
diff --git a/client/src/components/dashboard/TicketSubscriptionsSection.tsx b/client/src/components/dashboard/TicketSubscriptionsSection.tsx
index d247576..d763ca5 100644
--- a/client/src/components/dashboard/TicketSubscriptionsSection.tsx
+++ b/client/src/components/dashboard/TicketSubscriptionsSection.tsx
@@ -24,14 +24,14 @@ interface TicketSubscriptionsSectionProps {
   updates: TicketSubscriptionUpdate[];
   loading: boolean;
   onUnsubscribe: (ticketId: string) => Promise<void>;
-  onMarkAsRead: (updateId: string) => Promise<void>;
+  onDismissTicket: (ticketId: string) => Promise<void>;
 }
 
-export function TicketSubscriptionsSection({ 
-  updates, 
-  loading, 
-  onUnsubscribe, 
-  onMarkAsRead 
+export function TicketSubscriptionsSection({
+  updates,
+  loading,
+  onUnsubscribe,
+  onDismissTicket
 }: TicketSubscriptionsSectionProps) {
   const [, setLocation] = useLocation();
   const { toast } = useToast();
@@ -56,11 +56,11 @@ export function TicketSubscriptionsSection({
     }
   };
 
-  const handleMarkAsRead = async (updateId: string) => {
+  const handleDismissTicket = async (ticketId: string) => {
     try {
-      await onMarkAsRead(updateId);
+      await onDismissTicket(ticketId);
     } catch (error) {
-      console.error('Error marking update as read:', error);
+      console.error('Error dismissing ticket updates:', error);
     }
   };
 
@@ -157,9 +157,9 @@ export function TicketSubscriptionsSection({
                           className="h-6 w-6 p-0 text-muted-foreground hover:text-blue-500"
                           onClick={(e) => {
                             e.stopPropagation();
-                            handleMarkAsRead(update.id);
+                            handleDismissTicket(update.ticketId);
                           }}
-                          title="Mark as read"
+                          title="Dismiss all updates for this ticket"
                         >
                           <X className="h-3 w-3" />
                         </Button>
diff --git a/client/src/components/settings/ArticleListItem.tsx b/client/src/components/settings/ArticleListItem.tsx
index c38f298..5ea56be 100644
--- a/client/src/components/settings/ArticleListItem.tsx
+++ b/client/src/components/settings/ArticleListItem.tsx
@@ -97,7 +97,7 @@ const ArticleListItem: React.FC<ArticleListItemProps> = ({
           <div className="flex items-center">
             <GripVertical className="mr-2 h-5 w-5 text-muted-foreground cursor-grab" />
             <span className="text-sm">{article.title}</span>
-            {article.is_visible ? (
+            {article.isVisible ? (
               <Eye className="ml-2 h-3 w-3 text-green-600" />
             ) : (
               <EyeOff className="ml-2 h-3 w-3 text-gray-400" />
@@ -127,4 +127,4 @@ const ArticleListItem: React.FC<ArticleListItemProps> = ({
   );
 };
 
-export default ArticleListItem;
\ No newline at end of file
+export default ArticleListItem;
diff --git a/client/src/components/settings/BillingSettings.tsx b/client/src/components/settings/BillingSettings.tsx
index 1c152c4..6f6237a 100644
--- a/client/src/components/settings/BillingSettings.tsx
+++ b/client/src/components/settings/BillingSettings.tsx
@@ -6,6 +6,12 @@ import { useToast } from '@modl-gg/shared-web/hooks/use-toast';
 import { loadStripe } from '@stripe/stripe-js';
 import { apiFetch } from '@/lib/api';
 import { useBillingStatus, useCancelSubscription, useResubscribe } from '@/hooks/use-data';
+import {
+  formatSubscriptionStatusLabel,
+  hasPremiumAccess,
+  normalizeSubscriptionStatus,
+  type SubscriptionStatus,
+} from '@/lib/backend-enums';
 import { useQueryClient } from '@tanstack/react-query';
 import { Skeleton } from '@modl-gg/shared-web/components/ui/skeleton';
 import { 
@@ -29,6 +35,7 @@ import {
 import { Alert, AlertDescription } from '@modl-gg/shared-web/components/ui/alert';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@modl-gg/shared-web/components/ui/alert-dialog';
 import { Progress } from '@modl-gg/shared-web/components/ui/progress';
+import { Slider } from '@modl-gg/shared-web/components/ui/slider';
 import { Switch } from '@modl-gg/shared-web/components/ui/switch';
 import { Label } from '@modl-gg/shared-web/components/ui/label';
 
@@ -88,7 +95,7 @@ const plans: Plan[] = [
       { text: 'Unlimited players', included: true, icon: <Users className="h-4 w-4" /> },
       { text: 'Advanced ticket system', included: true, icon: <Shield className="h-4 w-4" /> },
       { text: 'Unlimited staff members', included: true, icon: <Users className="h-4 w-4" /> },
-      { text: '500k API requests per month', included: true, icon: <Zap className="h-4 w-4" /> },
+      { text: 'Extended service limits', included: true, icon: <Zap className="h-4 w-4" /> },
       { text: '200GB CDN storage ($0.08/GB/month past 200GB)', included: true, icon: <HardDrive className="h-4 w-4" /> },
       { text: 'AI moderation', included: true, icon: <Brain className="h-4 w-4" /> },
       { text: 'Priority support', included: true, icon: <Crown className="h-4 w-4" /> }
@@ -255,53 +262,13 @@ const BillingSettings = () => {
 
   const getCurrentPlan = () => {
     if (!billingStatus) return 'free';
-    const { plan, subscriptionStatus, currentPeriodEnd } = billingStatus;
-    
-    // If plan is explicitly set to premium in the database, trust it
-    if (plan === 'premium') {
-      // For cancelled subscriptions, check if the period has ended
-      if (subscriptionStatus === 'canceled') {
-        if (!currentPeriodEnd) {
-          return 'free'; // No end date means it's already expired
-        }
-        const endDate = new Date(currentPeriodEnd);
-        const now = new Date();
-        if (endDate <= now) {
-          return 'free'; // Cancellation period has ended
-        }
-        return 'premium'; // Still has access until end date
-      }
-      return 'premium';
-    }
-    
-    // Fallback logic for subscription status
-    if (subscriptionStatus === 'canceled') {
-      if (!currentPeriodEnd) {
-        return 'free';
-      }
-      const endDate = new Date(currentPeriodEnd);
-      const now = new Date();
-      if (endDate <= now) {
-        return 'free';
-      }
-      return 'premium';
-    }
-    
-    if (['active', 'trialing'].includes(subscriptionStatus)) {
-      return 'premium';
-    }
-    
-    if (['past_due', 'unpaid', 'incomplete'].includes(subscriptionStatus)) {
-      if (currentPeriodEnd) {
-        const endDate = new Date(currentPeriodEnd);
-        const now = new Date();
-        if (endDate > now) {
-          return 'premium';
-        }
-      }
-    }
-    
-    return 'free';
+    return hasPremiumAccess({
+      plan: billingStatus.plan,
+      subscriptionStatus: billingStatus.subscriptionStatus,
+      currentPeriodEnd: billingStatus.currentPeriodEnd,
+    })
+      ? 'premium'
+      : 'free';
   };
 
   const isPremiumUser = () => {
@@ -311,10 +278,11 @@ const BillingSettings = () => {
   const getSubscriptionAlert = () => {
     if (isBillingLoading || !billingStatus) return null;
 
-    const { subscriptionStatus, currentPeriodEnd } = billingStatus;
+    const { currentPeriodEnd } = billingStatus;
+    const normalizedStatus = normalizeSubscriptionStatus(billingStatus.subscriptionStatus);
 
     // Special handling for cancelled subscriptions
-    if (subscriptionStatus === 'canceled') {
+    if (normalizedStatus === 'CANCELED') {
       if (!currentPeriodEnd) {
         // No end date means it's already expired - show expired message
         return (
@@ -356,7 +324,7 @@ const BillingSettings = () => {
     }
 
     // Handle other problematic statuses
-    if (['past_due', 'unpaid'].includes(subscriptionStatus)) {
+    if (normalizedStatus === 'PAST_DUE' || normalizedStatus === 'UNPAID') {
       return (
         <Alert variant="destructive" className="flex items-center">
           <AlertTriangle className="h-4 w-4" />
@@ -373,10 +341,11 @@ const BillingSettings = () => {
   const getSubscriptionStatusBadge = () => {
     if (!billingStatus) return null;
     
-    const { subscriptionStatus, currentPeriodEnd } = billingStatus;
+    const { currentPeriodEnd } = billingStatus;
+    const normalizedStatus = normalizeSubscriptionStatus(billingStatus.subscriptionStatus);
     
     // Special handling for cancelled subscriptions
-    if (subscriptionStatus === 'canceled') {
+    if (normalizedStatus === 'CANCELED') {
       if (!currentPeriodEnd) {
         return <Badge variant="secondary" className="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100"><AlertTriangle className="h-3 w-3 mr-1" />Expired</Badge>;
       }
@@ -389,15 +358,15 @@ const BillingSettings = () => {
       }
     }
     
-    switch (subscriptionStatus) {
-      case 'active':
+    switch (normalizedStatus) {
+      case 'ACTIVE':
         return <Badge variant="secondary" className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100"><CheckCircle className="h-3 w-3 mr-1" />Active</Badge>;
-      case 'trialing':
+      case 'TRIALING':
         return <Badge variant="secondary" className="bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100"><Clock className="h-3 w-3 mr-1" />Trial</Badge>;
-      case 'past_due':
+      case 'PAST_DUE':
         return <Badge variant="destructive"><AlertTriangle className="h-3 w-3 mr-1" />Past Due</Badge>;
       default:
-        return <Badge variant="outline">{subscriptionStatus}</Badge>;
+        return <Badge variant="outline">{formatSubscriptionStatusLabel(normalizedStatus)}</Badge>;
     }
   };
 
@@ -472,51 +441,54 @@ const BillingSettings = () => {
   };
 
   const PremiumBillingView = () => {
-    const { subscriptionStatus, currentPeriodEnd, maxStorageLimitBytes } = billingStatus || {};
-    const [storageLimitGB, setStorageLimitGB] = useState<number>(
-      maxStorageLimitBytes ? Math.round(maxStorageLimitBytes / (1024 * 1024 * 1024)) : 200
+    const {
+      currentPeriodEnd,
+      maxStorageLimitBytes,
+      maxAiOverageRequests,
+    } = billingStatus || {};
+    const normalizedStatus: SubscriptionStatus = normalizeSubscriptionStatus(billingStatus?.subscriptionStatus);
+    const [storageOverageGB, setStorageOverageGB] = useState<number>(
+      maxStorageLimitBytes ? Math.max(0, Math.round(maxStorageLimitBytes / (1024 * 1024 * 1024)) - 200) : 0
     );
-    const [savingStorageLimit, setSavingStorageLimit] = useState(false);
+    const [aiOverageRequests, setAiOverageRequests] = useState<number>(maxAiOverageRequests ?? 0);
+    const [savingOverageLimits, setSavingOverageLimits] = useState(false);
 
     useEffect(() => {
       if (maxStorageLimitBytes) {
-        setStorageLimitGB(Math.round(maxStorageLimitBytes / (1024 * 1024 * 1024)));
+        setStorageOverageGB(Math.max(0, Math.round(maxStorageLimitBytes / (1024 * 1024 * 1024)) - 200));
       }
     }, [maxStorageLimitBytes]);
 
-    const handleSaveStorageLimit = async () => {
-      if (storageLimitGB > 10000) {
-        toast({
-          title: 'Error',
-          description: 'If you need in excess of 10TB of storage, please contact support.',
-          variant: 'destructive',
-        });
-        return;
-      }
-      setSavingStorageLimit(true);
+    useEffect(() => {
+      setAiOverageRequests(maxAiOverageRequests ?? 0);
+    }, [maxAiOverageRequests]);
+
+    const handleSaveOverageLimits = async () => {
+      setSavingOverageLimits(true);
       try {
-        const response = await apiFetch('/v1/panel/billing/storage-limit', {
+        const response = await apiFetch('/v1/panel/billing/overage-limits', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ maxStorageLimitBytes: storageLimitGB * 1024 * 1024 * 1024 }),
+          body: JSON.stringify({ maxStorageOverageGB: storageOverageGB, maxAiOverageRequests: aiOverageRequests }),
         });
         if (!response.ok) {
           const data = await response.json();
-          throw new Error(data.error || 'Failed to update storage limit');
+          throw new Error(data.error || 'Failed to update overage limits');
         }
         toast({
-          title: 'Storage Limit Updated',
-          description: `Maximum storage limit set to ${storageLimitGB} GB.`,
+          title: 'Overage Limits Updated',
+          description: `Storage overage: ${storageOverageGB} GB, AI overage: ${aiOverageRequests} requests.`,
         });
         queryClient.invalidateQueries({ queryKey: ['/v1/panel/billing/status'] });
+        queryClient.invalidateQueries({ queryKey: ['/v1/panel/billing/usage'] });
       } catch (error: any) {
         toast({
           title: 'Error',
-          description: error.message || 'Failed to update storage limit.',
+          description: error.message || 'Failed to update overage limits.',
           variant: 'destructive',
         });
       } finally {
-        setSavingStorageLimit(false);
+        setSavingOverageLimits(false);
       }
     };
 
@@ -534,13 +506,13 @@ const BillingSettings = () => {
                   <span className="text-2xl font-bold text-primary">$9.99/month</span>
                 </CardTitle>
                 <CardDescription className='mt-4'>
-                  {subscriptionStatus === 'canceled' && currentPeriodEnd
+                  {normalizedStatus === 'CANCELED' && currentPeriodEnd
                     ? `Access ends ${new Date(currentPeriodEnd).toLocaleDateString()}`
-                    : subscriptionStatus === 'canceled' && !currentPeriodEnd
+                    : normalizedStatus === 'CANCELED' && !currentPeriodEnd
                     ? 'Your subscription has been cancelled and access has ended.'
                     : currentPeriodEnd 
-                    ? `${subscriptionStatus === 'trialing' ? 'Trial ends' : 'Next billing'} ${new Date(currentPeriodEnd).toLocaleDateString()}`
-                    : subscriptionStatus === 'active'
+                    ? `${normalizedStatus === 'TRIALING' ? 'Trial ends' : 'Next billing'} ${new Date(currentPeriodEnd).toLocaleDateString()}`
+                    : normalizedStatus === 'ACTIVE'
                     ? 'Your premium subscription is active. Billing information is being synced with Stripe.'
                     : 'Modl uses Stripe to handle billing. Use the buttons below to manage your subscription.'
                   }
@@ -554,7 +526,7 @@ const BillingSettings = () => {
           <CardContent className="space-y-6">
             {/* Billing Management Buttons */}
             <div className="flex gap-3">
-              {subscriptionStatus !== 'canceled' && (
+              {normalizedStatus !== 'CANCELED' && (
                 <Button 
                   onClick={handleCreatePortalSession}
                   disabled={isLoading}
@@ -565,7 +537,7 @@ const BillingSettings = () => {
                 </Button>
               )}
               
-              {subscriptionStatus === 'active' && (
+              {normalizedStatus === 'ACTIVE' && (
                 <AlertDialog>
                   <AlertDialogTrigger asChild>
                     <Button 
@@ -599,7 +571,7 @@ const BillingSettings = () => {
                 </AlertDialog>
               )}
               
-              {subscriptionStatus === 'canceled' && (
+              {normalizedStatus === 'CANCELED' && (
                 <>
                   <Button 
                     onClick={handleCreatePortalSession}
@@ -647,48 +619,79 @@ const BillingSettings = () => {
           </CardContent>
         </Card>
 
-        {/* Storage Limit Configuration */}
+        {/* Usage Overage Limits */}
         <Card>
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
-              <HardDrive className="h-5 w-5" />
-              Storage Limit
+              <Settings className="h-5 w-5" />
+              Usage Overage Limits
             </CardTitle>
             <CardDescription>
-              Configure the maximum storage limit for your server. The base 200GB is included with your premium plan.
-              Usage above 200GB is billed at $0.08/GB/month.
+              Configure the maximum overage you're willing to allow beyond your included plan limits.
+              Set to 0 to prevent any overage charges.
             </CardDescription>
           </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex items-end gap-3">
-              <div className="flex-1">
-                <Label htmlFor="storage-limit">Maximum Storage (GB)</Label>
-                <input
-                  id="storage-limit"
-                  type="number"
-                  min={1}
-                  value={storageLimitGB}
-                  onChange={(e) => setStorageLimitGB(Math.max(1, parseInt(e.target.value) || 1))}
-                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 mt-1.5"
-                />
+          <CardContent className="space-y-6">
+            {/* Storage Overage Slider */}
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <Label className="flex items-center gap-2">
+                  <HardDrive className="h-4 w-4" />
+                  Storage Overage Limit
+                </Label>
+                <span className="text-sm font-medium">{storageOverageGB} GB</span>
               </div>
-              <Button
-                onClick={handleSaveStorageLimit}
-                disabled={savingStorageLimit || storageLimitGB > 10000}
-              >
-                {savingStorageLimit ? 'Saving...' : 'Save'}
-              </Button>
-            </div>
-            {storageLimitGB > 10000 && (
-              <p className="text-sm text-destructive">
-                If you need in excess of 10TB of storage, please contact support.
+              <Slider
+                value={[storageOverageGB]}
+                onValueChange={([v]) => setStorageOverageGB(v)}
+                min={0}
+                max={2000}
+                step={10}
+              />
+              <div className="flex items-center justify-between text-xs text-muted-foreground">
+                <span>0 GB (no overage)</span>
+                <span>2,000 GB</span>
+              </div>
+              <p className="text-sm text-muted-foreground">
+                Rate: $0.08/GB/month &middot; Max cost: <strong>${(storageOverageGB * 0.08).toFixed(2)}/month</strong>
               </p>
-            )}
-            {storageLimitGB > 200 && storageLimitGB <= 10000 && (
+            </div>
+
+            {/* AI Request Overage Slider */}
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <Label className="flex items-center gap-2">
+                  <Brain className="h-4 w-4" />
+                  AI Request Overage Limit
+                </Label>
+                <span className="text-sm font-medium">{aiOverageRequests.toLocaleString()} requests</span>
+              </div>
+              <Slider
+                value={[aiOverageRequests]}
+                onValueChange={([v]) => setAiOverageRequests(v)}
+                min={0}
+                max={5000}
+                step={100}
+              />
+              <div className="flex items-center justify-between text-xs text-muted-foreground">
+                <span>0 (no overage)</span>
+                <span>5,000 requests</span>
+              </div>
               <p className="text-sm text-muted-foreground">
-                Estimated overage cost: <strong>${((storageLimitGB - 200) * 0.08).toFixed(2)}/month</strong> if fully used (at $0.08/GB/month for storage above 200GB).
+                Rate: $0.02/request &middot; Max cost: <strong>${(aiOverageRequests * 0.02).toFixed(2)}/month</strong>
               </p>
-            )}
+            </div>
+
+            <p className="text-sm text-muted-foreground">
+              Need higher limits? Contact support for custom pricing.
+            </p>
+
+            <Button
+              onClick={handleSaveOverageLimits}
+              disabled={savingOverageLimits}
+            >
+              {savingOverageLimits ? 'Saving...' : 'Save'}
+            </Button>
           </CardContent>
         </Card>
       </div>
@@ -696,7 +699,8 @@ const BillingSettings = () => {
   };
 
   const FreePlanView = () => {
-    const premiumPlan = plans.find(p => p.id === 'premium')!;
+    const premiumPlan = plans.find(p => p.id === 'premium');
+    const premiumFeatures = premiumPlan?.features ?? [];
     
   return (
       <div className="space-y-6">
@@ -738,7 +742,7 @@ const BillingSettings = () => {
               <div className="lg:col-span-2 flex flex-col justify-center ml-0 lg:ml-8 mt-0 lg:mt-[-80px]">
                 <h4 className="font-medium text-sm text-muted-foreground mb-4">Premium Features</h4>
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                  {premiumPlan.features.map((feature, index) => (
+                  {premiumFeatures.map((feature, index) => (
                     <div key={index} className="flex items-center gap-3">
                       <Check className="h-4 w-4 text-green-600 flex-shrink-0" />
                       {feature.icon && (
@@ -750,6 +754,9 @@ const BillingSettings = () => {
                     </div>
                   ))}
                 </div>
+                {premiumFeatures.length === 0 && (
+                  <p className="text-sm text-muted-foreground">Premium feature list is currently unavailable.</p>
+                )}
               </div>
             </div>
           </CardContent>
@@ -795,4 +802,4 @@ const BillingSettings = () => {
   );
 };
 
-export default BillingSettings;
\ No newline at end of file
+export default BillingSettings;
diff --git a/client/src/components/settings/DomainSettings.tsx b/client/src/components/settings/DomainSettings.tsx
index 08ebc48..837d03b 100644
--- a/client/src/components/settings/DomainSettings.tsx
+++ b/client/src/components/settings/DomainSettings.tsx
@@ -274,11 +274,11 @@ const DomainSettings: React.FC = () => {
     }
   };
 
-  // Only show to users with admin settings permissions
-  if (!user || !hasPermission('admin.settings.modify')) {
+  // Only show to users with domain view permissions
+  if (!user || !hasPermission('admin.settings.view.domain')) {
     return (
       <div className="flex items-center justify-center h-64 border-2 border-dashed border-muted rounded-lg">
-        <p className="text-muted-foreground">You do not have permission to view this page.</p>
+        <p className="text-muted-foreground">You do not have permission to do that.</p>
       </div>
     );
   }
diff --git a/client/src/components/settings/GeneralSettings.tsx b/client/src/components/settings/GeneralSettings.tsx
index 88eee4d..987e208 100644
--- a/client/src/components/settings/GeneralSettings.tsx
+++ b/client/src/components/settings/GeneralSettings.tsx
@@ -309,7 +309,7 @@ const GeneralSettings = ({
 
         {visibleSection === 'server-config' && serverConfigContent}
 
-        {visibleSection === 'domain' && hasPermission('admin.settings.view') && (
+        {visibleSection === 'domain' && hasPermission('admin.settings.view.domain') && (
           <DomainSettings />
         )}
 
@@ -393,7 +393,7 @@ const GeneralSettings = ({
         </Collapsible>
 
         {/* Custom Domain Settings */}
-        {hasPermission('admin.settings.view') && (
+        {hasPermission('admin.settings.view.domain') && (
           <Collapsible open={isDomainExpanded} onOpenChange={setIsDomainExpanded}>
             <CollapsibleTrigger className="flex items-center justify-between w-full p-4 bg-muted/50 rounded-lg hover:bg-muted/70 transition-colors">
               <div className="flex items-center">
diff --git a/client/src/components/settings/HomepageCardSettings.tsx b/client/src/components/settings/HomepageCardSettings.tsx
index 2f953ad..d4b1d38 100644
--- a/client/src/components/settings/HomepageCardSettings.tsx
+++ b/client/src/components/settings/HomepageCardSettings.tsx
@@ -56,13 +56,13 @@ interface HomepageCard {
   title: string;
   description: string;
   icon: string;
-  icon_color?: string;
-  action_type: 'url' | 'category_dropdown';
-  action_url?: string;
-  action_button_text?: string;
-  category_id?: string;
-  background_color?: string;
-  is_enabled: boolean;
+  iconColor?: string;
+  actionType: 'url' | 'category_dropdown';
+  actionUrl?: string;
+  actionButtonText?: string;
+  categoryId?: string;
+  backgroundColor?: string;
+  isEnabled: boolean;
   ordinal: number;
   category?: {
     id: string;
@@ -114,13 +114,13 @@ const HomepageCardSettings: React.FC = () => {
     title: '',
     description: '',
     icon: 'BookOpen',
-    icon_color: '#3b82f6', // Default blue color
-    action_type: 'url' as 'url' | 'category_dropdown',
-    action_url: '',
-    action_button_text: '',
-    category_id: '',
-    background_color: '',
-    is_enabled: true
+    iconColor: '#3b82f6', // Default blue color
+    actionType: 'url' as 'url' | 'category_dropdown',
+    actionUrl: '',
+    actionButtonText: '',
+    categoryId: '',
+    backgroundColor: '',
+    isEnabled: true
   });
 
   const availableIcons = getAvailableIcons();
@@ -215,13 +215,13 @@ const HomepageCardSettings: React.FC = () => {
       title: '',
       description: '',
       icon: 'BookOpen',
-      icon_color: '#3b82f6',
-      action_type: 'url',
-      action_url: '',
-      action_button_text: '',
-      category_id: '',
-      background_color: '',
-      is_enabled: true
+      iconColor: '#3b82f6',
+      actionType: 'url',
+      actionUrl: '',
+      actionButtonText: '',
+      categoryId: '',
+      backgroundColor: '',
+      isEnabled: true
     });
   };
 
@@ -231,12 +231,12 @@ const HomepageCardSettings: React.FC = () => {
       return;
     }
 
-    if (formData.action_type === 'url' && !formData.action_url.trim()) {
+    if (formData.actionType === 'url' && !formData.actionUrl.trim()) {
       toast({ title: 'Error', description: 'URL is required for URL actions.', variant: 'destructive' });
       return;
     }
 
-    if (formData.action_type === 'category_dropdown' && !formData.category_id) {
+    if (formData.actionType === 'category_dropdown' && !formData.categoryId) {
       toast({ title: 'Error', description: 'Category is required for category dropdown actions.', variant: 'destructive' });
       return;
     }
@@ -261,13 +261,13 @@ const HomepageCardSettings: React.FC = () => {
       title: card.title,
       description: card.description,
       icon: card.icon,
-      icon_color: card.icon_color || '#3b82f6',
-      action_type: card.action_type,
-      action_url: card.action_url || '',
-      action_button_text: card.action_button_text || '',
-      category_id: card.category_id || '',
-      background_color: card.background_color || '',
-      is_enabled: card.is_enabled
+      iconColor: card.iconColor || '#3b82f6',
+      actionType: card.actionType,
+      actionUrl: card.actionUrl || '',
+      actionButtonText: card.actionButtonText || '',
+      categoryId: card.categoryId || '',
+      backgroundColor: card.backgroundColor || '',
+      isEnabled: card.isEnabled
     });
     setIsCreating(true);
   };
@@ -327,7 +327,7 @@ const HomepageCardSettings: React.FC = () => {
                         {availableIcons.map(iconName => (
                           <SelectItem key={iconName} value={iconName}>
                             <div className="flex items-center gap-2">
-                              <IconPreview iconName={iconName} color={formData.icon_color} />
+                              <IconPreview iconName={iconName} color={formData.iconColor} />
                               {iconName}
                             </div>
                           </SelectItem>
@@ -338,24 +338,24 @@ const HomepageCardSettings: React.FC = () => {
                 </div>
 
                 <div>
-                  <Label htmlFor="icon_color">Icon Color</Label>
+                  <Label htmlFor="iconColor">Icon Color</Label>
                   <div className="flex items-center gap-3">
                     <Input
-                      id="icon_color"
+                      id="iconColor"
                       type="color"
-                      value={formData.icon_color}
-                      onChange={(e) => setFormData({ ...formData, icon_color: e.target.value })}
+                      value={formData.iconColor}
+                      onChange={(e) => setFormData({ ...formData, iconColor: e.target.value })}
                       className="w-16 h-10 p-1 rounded cursor-pointer"
                     />
                     <Input
                       type="text"
                       placeholder="#3b82f6"
-                      value={formData.icon_color}
-                      onChange={(e) => setFormData({ ...formData, icon_color: e.target.value })}
+                      value={formData.iconColor}
+                      onChange={(e) => setFormData({ ...formData, iconColor: e.target.value })}
                       className="flex-1"
                     />
                     <div className="flex items-center gap-2 px-3 py-2 border rounded-md bg-muted/30">
-                      <IconPreview iconName={formData.icon} color={formData.icon_color} />
+                      <IconPreview iconName={formData.icon} color={formData.iconColor} />
                       <span className="text-sm text-muted-foreground">Preview</span>
                     </div>
                   </div>
@@ -372,10 +372,10 @@ const HomepageCardSettings: React.FC = () => {
                 </div>
 
                 <div>
-                  <Label htmlFor="action_type">Action Type</Label>
+                  <Label htmlFor="actionType">Action Type</Label>
                   <Select 
-                    value={formData.action_type} 
-                    onValueChange={(value: 'url' | 'category_dropdown') => setFormData({ ...formData, action_type: value })}
+                    value={formData.actionType} 
+                    onValueChange={(value: 'url' | 'category_dropdown') => setFormData({ ...formData, actionType: value })}
                   >
                     <SelectTrigger>
                       <SelectValue />
@@ -387,33 +387,33 @@ const HomepageCardSettings: React.FC = () => {
                   </Select>
                 </div>
 
-                {formData.action_type === 'url' ? (
+                {formData.actionType === 'url' ? (
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div>
-                      <Label htmlFor="action_url">URL</Label>
+                      <Label htmlFor="actionUrl">URL</Label>
                       <Input
-                        id="action_url"
+                        id="actionUrl"
                         placeholder="https://example.com or /internal-page"
-                        value={formData.action_url}
-                        onChange={(e) => setFormData({ ...formData, action_url: e.target.value })}
+                        value={formData.actionUrl}
+                        onChange={(e) => setFormData({ ...formData, actionUrl: e.target.value })}
                       />
                     </div>
                     <div>
-                      <Label htmlFor="action_button_text">Button Text</Label>
+                      <Label htmlFor="actionButtonText">Button Text</Label>
                       <Input
-                        id="action_button_text"
+                        id="actionButtonText"
                         placeholder="Learn More"
-                        value={formData.action_button_text}
-                        onChange={(e) => setFormData({ ...formData, action_button_text: e.target.value })}
+                        value={formData.actionButtonText}
+                        onChange={(e) => setFormData({ ...formData, actionButtonText: e.target.value })}
                       />
                     </div>
                   </div>
                 ) : (
                   <div>
-                    <Label htmlFor="category_id">Category</Label>
+                    <Label htmlFor="categoryId">Category</Label>
                     <Select 
-                      value={formData.category_id} 
-                      onValueChange={(value) => setFormData({ ...formData, category_id: value })}
+                      value={formData.categoryId} 
+                      onValueChange={(value) => setFormData({ ...formData, categoryId: value })}
                     >
                       <SelectTrigger>
                         <SelectValue placeholder="Select a category" />
@@ -431,11 +431,11 @@ const HomepageCardSettings: React.FC = () => {
 
                 <div className="flex items-center space-x-2">
                   <Switch
-                    id="is_enabled"
-                    checked={formData.is_enabled}
-                    onCheckedChange={(checked) => setFormData({ ...formData, is_enabled: checked })}
+                    id="isEnabled"
+                    checked={formData.isEnabled}
+                    onCheckedChange={(checked) => setFormData({ ...formData, isEnabled: checked })}
                   />
-                  <Label htmlFor="is_enabled">Enabled</Label>
+                  <Label htmlFor="isEnabled">Enabled</Label>
                 </div>
 
                 <div className="flex gap-2">
@@ -470,17 +470,17 @@ const HomepageCardSettings: React.FC = () => {
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-3">
                       <GripVertical className="h-5 w-5 text-muted-foreground cursor-grab" />
-                      <IconPreview iconName={card.icon} color={card.icon_color} />
+                      <IconPreview iconName={card.icon} color={card.iconColor} />
                       <div>
                         <h4 className="font-medium">{card.title}</h4>
                         <p className="text-sm text-muted-foreground">{card.description}</p>
                         <p className="text-xs text-muted-foreground">
-                          {card.action_type === 'url' ? `URL: ${card.action_url}` : `Category: ${card.category?.name}`}
+                          {card.actionType === 'url' ? `URL: ${card.actionUrl}` : `Category: ${card.category?.name}`}
                         </p>
                       </div>
                     </div>
                     <div className="flex items-center gap-2">
-                      {card.is_enabled ? (
+                      {card.isEnabled ? (
                         <Eye className="h-4 w-4 text-green-600" />
                       ) : (
                         <EyeOff className="h-4 w-4 text-muted-foreground" />
@@ -535,3 +535,4 @@ const HomepageCardSettings: React.FC = () => {
 };
 
 export default HomepageCardSettings;
+
diff --git a/client/src/components/settings/KnowledgebaseSettings.tsx b/client/src/components/settings/KnowledgebaseSettings.tsx
index fe35bb6..63f2505 100644
--- a/client/src/components/settings/KnowledgebaseSettings.tsx
+++ b/client/src/components/settings/KnowledgebaseSettings.tsx
@@ -19,6 +19,18 @@ import { KnowledgebaseCategory, KnowledgebaseArticle } from '@modl-gg/shared-web
 
 // TODO: Define these types based on your backend schema
 
+const normalizeArticle = (article: any): KnowledgebaseArticle => ({
+  ...article,
+  isVisible: article?.isVisible ?? article?.visible ?? true,
+});
+
+const normalizeCategory = (category: any): KnowledgebaseCategory => ({
+  ...category,
+  articles: Array.isArray(category?.articles)
+    ? category.articles.map(normalizeArticle)
+    : [],
+});
+
 const fetchCategories = async (): Promise<KnowledgebaseCategory[]> => {
   const { getApiUrl, getCurrentDomain } = await import('@/lib/api');
   const response = await fetch(getApiUrl('/v1/panel/knowledgebase/categories'), {
@@ -28,7 +40,8 @@ const fetchCategories = async (): Promise<KnowledgebaseCategory[]> => {
   if (!response.ok) {
     throw new Error('Failed to fetch categories');
   }
-  return response.json();
+  const data = await response.json();
+  return Array.isArray(data) ? data.map(normalizeCategory) : [];
 };
 const ItemTypes = {
   CATEGORY: 'category',
@@ -220,7 +233,7 @@ const KnowledgebaseSettings: React.FC = () => {
   // editingCategory state is now part of KnowledgebaseSettings
   const [editingArticle, setEditingArticle] = useState<KnowledgebaseArticle | null>(null);
   // const [selectedCategoryForNewArticle, setSelectedCategoryForNewArticle] = useState<string | null>(null); // Replaced by newArticleForModal
-  const [newArticleForModal, setNewArticleForModal] = useState<{ categoryId: string; title: string; content: string; is_visible: boolean } | null>(null);
+  const [newArticleForModal, setNewArticleForModal] = useState<{ categoryId: string; title: string; content: string; isVisible: boolean } | null>(null);
 
   // Delete confirmation dialog state
   const [deleteCategoryDialogOpen, setDeleteCategoryDialogOpen] = useState(false);
@@ -391,13 +404,13 @@ const KnowledgebaseSettings: React.FC = () => {
 
 
   // Article Mutations
-  const createArticleMutation = useMutation<KnowledgebaseArticle, Error, { categoryId: string; title: string; content: string; is_visible?: boolean }>({
+  const createArticleMutation = useMutation<KnowledgebaseArticle, Error, { categoryId: string; title: string; content: string; isVisible?: boolean }>({
     mutationFn: async (newArticle) => {
       const csrfFetch = apiFetch;
       const response = await csrfFetch(`/v1/panel/knowledgebase/categories/${newArticle.categoryId}/articles`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ title: newArticle.title, content: newArticle.content, is_visible: newArticle.is_visible }),
+        body: JSON.stringify({ title: newArticle.title, content: newArticle.content, isVisible: newArticle.isVisible }),
       });
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({ message: 'Failed to create article' }));
@@ -416,13 +429,13 @@ const KnowledgebaseSettings: React.FC = () => {
     },
   });
 
-  const updateArticleMutation = useMutation<KnowledgebaseArticle, Error, { categoryId: string; articleId: string; title: string; content: string; is_visible: boolean }>({
+  const updateArticleMutation = useMutation<KnowledgebaseArticle, Error, { categoryId: string; articleId: string; title: string; content: string; isVisible: boolean }>({
     mutationFn: async (updatedArticle) => {
       const csrfFetch = apiFetch;
       const response = await csrfFetch(`/v1/panel/knowledgebase/categories/${updatedArticle.categoryId}/articles/${updatedArticle.articleId}`, {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ title: updatedArticle.title, content: updatedArticle.content, is_visible: updatedArticle.is_visible }),
+        body: JSON.stringify({ title: updatedArticle.title, content: updatedArticle.content, isVisible: updatedArticle.isVisible }),
       });
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({ message: 'Failed to update article' }));
@@ -484,7 +497,7 @@ const KnowledgebaseSettings: React.FC = () => {
 
 
   const openCreateArticleModal = (categoryId: string) => {
-    setNewArticleForModal({ categoryId, title: '', content: '', is_visible: true });
+    setNewArticleForModal({ categoryId, title: '', content: '', isVisible: true });
     
     // Scroll to the article writing section with smooth animation
     setTimeout(() => {
@@ -505,7 +518,7 @@ const KnowledgebaseSettings: React.FC = () => {
         categoryId: newArticleForModal.categoryId,
         title: newArticleForModal.title,
         content: newArticleForModal.content,
-        is_visible: newArticleForModal.is_visible,
+        isVisible: newArticleForModal.isVisible,
       });
     } else {
       toast({ title: "Error", description: "Title and content are required.", variant: "destructive" });
@@ -521,7 +534,7 @@ const KnowledgebaseSettings: React.FC = () => {
         throw new Error('Failed to fetch article details');
       }
       const articleData = await response.json();
-      setEditingArticle(articleData);
+      setEditingArticle(normalizeArticle(articleData));
 
       // Scroll to the article editing section with smooth animation
       setTimeout(() => {
@@ -547,7 +560,7 @@ const KnowledgebaseSettings: React.FC = () => {
         articleId: editingArticle.id,
         title: editingArticle.title,
         content: editingArticle.content,
-        is_visible: editingArticle.is_visible,
+        isVisible: editingArticle.isVisible,
       });
     }
   };
@@ -666,8 +679,8 @@ const KnowledgebaseSettings: React.FC = () => {
                         <input
                             type="checkbox"
                             id={`article-visible-${editingArticle.id}`}
-                            checked={editingArticle.is_visible}
-                            onChange={(e) => setEditingArticle(prev => prev ? {...prev, is_visible: e.target.checked} : null)}
+                            checked={editingArticle.isVisible}
+                            onChange={(e) => setEditingArticle(prev => prev ? {...prev, isVisible: e.target.checked} : null)}
                         />
                         <label htmlFor={`article-visible-${editingArticle.id}`}>Visible to users</label>
                     </div>
@@ -706,8 +719,8 @@ const KnowledgebaseSettings: React.FC = () => {
                 <input
                   type="checkbox"
                   id="new-article-visible"
-                  checked={newArticleForModal.is_visible}
-                  onChange={(e) => setNewArticleForModal(prev => prev ? { ...prev, is_visible: e.target.checked } : null)}
+                  checked={newArticleForModal.isVisible}
+                  onChange={(e) => setNewArticleForModal(prev => prev ? { ...prev, isVisible: e.target.checked } : null)}
                 />
                 <label htmlFor="new-article-visible">Visible to users</label>
               </div>
@@ -773,4 +786,4 @@ const KnowledgebaseSettings: React.FC = () => {
   );
 };
 
-export default KnowledgebaseSettings;
\ No newline at end of file
+export default KnowledgebaseSettings;
diff --git a/client/src/components/settings/PunishmentSettings.tsx b/client/src/components/settings/PunishmentSettings.tsx
index 0f26618..af57313 100644
--- a/client/src/components/settings/PunishmentSettings.tsx
+++ b/client/src/components/settings/PunishmentSettings.tsx
@@ -20,10 +20,12 @@ interface StatusThresholds {
   gameplay: {
     medium: number;
     habitual: number;
+    pointExpiryMonths: number;
   };
   social: {
     medium: number;
     habitual: number;
+    pointExpiryMonths: number;
   };
 }
 
@@ -60,6 +62,14 @@ const PunishmentSettings = ({
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [punishmentToDelete, setPunishmentToDelete] = useState<PunishmentType | null>(null);
 
+  const formatMonths = (months: number): string => {
+    const years = Math.floor(months / 12);
+    const remainingMonths = months % 12;
+    if (years === 0) return `${remainingMonths} month${remainingMonths !== 1 ? 's' : ''}`;
+    if (remainingMonths === 0) return `${years} year${years !== 1 ? 's' : ''}`;
+    return `${years} year${years !== 1 ? 's' : ''} ${remainingMonths} month${remainingMonths !== 1 ? 's' : ''}`;
+  };
+
   // Determine which sections to show
   const showThresholds = !visibleSection || visibleSection === 'thresholds';
   const showTypes = !visibleSection || visibleSection === 'types';
@@ -133,6 +143,27 @@ const PunishmentSettings = ({
                   }))}
                 />
               </div>
+
+              <div className="space-y-2">
+                <div className="flex justify-between">
+                  <Label htmlFor="gameplay-point-expiry">Point Expiry</Label>
+                  <span className="text-sm text-muted-foreground">{formatMonths(statusThresholds.gameplay.pointExpiryMonths)}</span>
+                </div>
+                <Slider
+                  id="gameplay-point-expiry"
+                  value={[statusThresholds.gameplay.pointExpiryMonths]}
+                  min={1}
+                  max={60}
+                  step={1}
+                  onValueChange={values => setStatusThresholds(prev => ({
+                    ...prev,
+                    gameplay: {
+                      ...prev.gameplay,
+                      pointExpiryMonths: values[0]
+                    }
+                  }))}
+                />
+              </div>
             </div>
           </div>
 
@@ -183,6 +214,27 @@ const PunishmentSettings = ({
                   }))}
                 />
               </div>
+
+              <div className="space-y-2">
+                <div className="flex justify-between">
+                  <Label htmlFor="social-point-expiry">Point Expiry</Label>
+                  <span className="text-sm text-muted-foreground">{formatMonths(statusThresholds.social.pointExpiryMonths)}</span>
+                </div>
+                <Slider
+                  id="social-point-expiry"
+                  value={[statusThresholds.social.pointExpiryMonths]}
+                  min={1}
+                  max={60}
+                  step={1}
+                  onValueChange={values => setStatusThresholds(prev => ({
+                    ...prev,
+                    social: {
+                      ...prev.social,
+                      pointExpiryMonths: values[0]
+                    }
+                  }))}
+                />
+              </div>
             </div>
           </div>
         </div>
diff --git a/client/src/components/settings/StaffRolesCard.tsx b/client/src/components/settings/StaffRolesCard.tsx
index c41da59..b819acc 100644
--- a/client/src/components/settings/StaffRolesCard.tsx
+++ b/client/src/components/settings/StaffRolesCard.tsx
@@ -13,7 +13,8 @@ import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, D
 import { Separator } from '@modl-gg/shared-web/components/ui/separator';
 import { useSettings, useRoles, usePermissions, useCreateRole, useUpdateRole, useDeleteRole } from '@/hooks/use-data';
 import { useAuth } from '@/hooks/use-auth';
-import { apiFetch, getCSRFToken } from '@/lib/api';
+import { usePermissions as useUserPermissions } from '@/hooks/use-permissions';
+import { apiFetch } from '@/lib/api';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@modl-gg/shared-web/components/ui/alert-dialog';
 
 // Permission categories and definitions
@@ -22,6 +23,7 @@ interface Permission {
   name: string;
   description: string;
   category: 'punishment' | 'ticket' | 'admin';
+  parentId: string | null;
 }
 
 interface StaffRole {
@@ -43,19 +45,48 @@ const PERMISSION_CATEGORIES = {
 
 const DEFAULT_PERMISSIONS: Permission[] = [
   // Admin permissions
-  { id: 'admin.settings.view', name: 'View Settings', description: 'View all system settings', category: 'admin' },
-  { id: 'admin.settings.modify', name: 'Modify Settings', description: 'Modify system settings (excluding account settings)', category: 'admin' },
-  { id: 'admin.staff.manage', name: 'Manage Staff', description: 'Invite, remove, and modify staff members', category: 'admin' },
-  { id: 'admin.audit.view', name: 'View Audit', description: 'Access audit logs and system activity', category: 'admin' },
-  
+  { id: 'admin.settings.view', name: 'View Settings', description: 'View all system settings (includes all sub-permissions)', category: 'admin', parentId: null },
+  { id: 'admin.settings.view.punishments', name: 'View Punishments Config', description: 'View punishment type configuration', category: 'admin', parentId: 'admin.settings.view' },
+  { id: 'admin.settings.view.content', name: 'View Content', description: 'View homepage cards, knowledgebase, media', category: 'admin', parentId: 'admin.settings.view' },
+  { id: 'admin.settings.view.domain', name: 'View Domain', description: 'View custom domain configuration', category: 'admin', parentId: 'admin.settings.view' },
+  { id: 'admin.settings.view.billing', name: 'View Billing', description: 'View billing, subscription, and payment info', category: 'admin', parentId: 'admin.settings.view' },
+  { id: 'admin.settings.view.migration', name: 'View Migration', description: 'View import/export data configuration', category: 'admin', parentId: 'admin.settings.view' },
+  { id: 'admin.settings.view.storage', name: 'View Storage', description: 'View storage configuration', category: 'admin', parentId: 'admin.settings.view' },
+  { id: 'admin.settings.modify', name: 'Modify Settings', description: 'Full control over system settings (includes all sub-permissions)', category: 'admin', parentId: null },
+  { id: 'admin.settings.modify.punishments', name: 'Modify Punishments Config', description: 'Create/edit/delete punishment types', category: 'admin', parentId: 'admin.settings.modify' },
+  { id: 'admin.settings.modify.content', name: 'Modify Content', description: 'Edit homepage cards, knowledgebase, media', category: 'admin', parentId: 'admin.settings.modify' },
+  { id: 'admin.settings.modify.domain', name: 'Modify Domain', description: 'Change custom domain configuration', category: 'admin', parentId: 'admin.settings.modify' },
+  { id: 'admin.settings.modify.billing', name: 'Modify Billing', description: 'Update subscription and payment methods', category: 'admin', parentId: 'admin.settings.modify' },
+  { id: 'admin.settings.modify.migration', name: 'Modify Migration', description: 'Import/export data between platforms', category: 'admin', parentId: 'admin.settings.modify' },
+  { id: 'admin.settings.modify.storage', name: 'Modify Storage', description: 'Configure storage backends and limits', category: 'admin', parentId: 'admin.settings.modify' },
+  { id: 'admin.staff.manage', name: 'Manage Staff', description: 'Full staff management (includes all sub-permissions)', category: 'admin', parentId: null },
+  { id: 'admin.staff.manage.members', name: 'Manage Members', description: 'Invite, remove, and reassign staff', category: 'admin', parentId: 'admin.staff.manage' },
+  { id: 'admin.staff.manage.roles', name: 'Manage Roles', description: 'Create/edit/delete roles and permissions', category: 'admin', parentId: 'admin.staff.manage' },
+  { id: 'admin.audit.view', name: 'View Audit', description: 'Full audit access (includes all sub-permissions)', category: 'admin', parentId: null },
+  { id: 'admin.audit.view.dashboard', name: 'View Dashboard', description: 'View dashboard statistics', category: 'admin', parentId: 'admin.audit.view' },
+  { id: 'admin.audit.view.analytics', name: 'View Analytics', description: 'View player and ticket analytics', category: 'admin', parentId: 'admin.audit.view' },
+  { id: 'admin.audit.view.logs', name: 'View Logs', description: 'View audit trail of staff actions', category: 'admin', parentId: 'admin.audit.view' },
+
   // Punishment permissions
-  { id: 'punishment.modify', name: 'Modify Punishments', description: 'Pardon, modify duration, and edit existing punishments', category: 'punishment' },
-  
+  { id: 'punishment.modify', name: 'Modify Punishments', description: 'Full control over existing punishments (includes all sub-permissions)', category: 'punishment', parentId: null },
+  { id: 'punishment.modify.pardon', name: 'Pardon Punishments', description: 'Pardon punishments and clear associated points', category: 'punishment', parentId: 'punishment.modify' },
+  { id: 'punishment.modify.duration', name: 'Modify Duration', description: 'Change punishment duration', category: 'punishment', parentId: 'punishment.modify' },
+  { id: 'punishment.modify.note', name: 'Add Notes', description: 'Add staff notes to punishments', category: 'punishment', parentId: 'punishment.modify' },
+  { id: 'punishment.modify.evidence', name: 'Manage Evidence', description: 'Add and view evidence on punishments', category: 'punishment', parentId: 'punishment.modify' },
+  { id: 'punishment.modify.options', name: 'Toggle Options', description: 'Toggle alt-blocking and stat-wipe options', category: 'punishment', parentId: 'punishment.modify' },
+
   // Ticket permissions
-  { id: 'ticket.view.all', name: 'View All Tickets', description: 'View all tickets regardless of type', category: 'ticket' },
-  { id: 'ticket.reply.all', name: 'Reply to All Tickets', description: 'Reply to all ticket types', category: 'ticket' },
-  { id: 'ticket.close.all', name: 'Close/Reopen All Tickets', description: 'Close and reopen all ticket types', category: 'ticket' },
-  { id: 'ticket.delete.all', name: 'Delete Tickets', description: 'Delete tickets from the system', category: 'ticket' },
+  { id: 'ticket.view.all', name: 'View All Tickets', description: 'View all tickets (includes all sub-permissions)', category: 'ticket', parentId: null },
+  { id: 'ticket.view.all.notes', name: 'View Staff Notes', description: 'View internal staff notes on tickets', category: 'ticket', parentId: 'ticket.view.all' },
+  { id: 'ticket.reply.all', name: 'Reply to All Tickets', description: 'Reply to all ticket types (includes all sub-permissions)', category: 'ticket', parentId: null },
+  { id: 'ticket.reply.all.notes', name: 'Add Staff Notes', description: 'Add staff-only internal notes', category: 'ticket', parentId: 'ticket.reply.all' },
+  { id: 'ticket.close.all', name: 'Close/Reopen All Tickets', description: 'Close and reopen all ticket types (includes all sub-permissions)', category: 'ticket', parentId: null },
+  { id: 'ticket.close.all.lock', name: 'Lock Tickets', description: 'Lock tickets to prevent further replies', category: 'ticket', parentId: 'ticket.close.all' },
+  { id: 'ticket.manage', name: 'Manage Tickets', description: 'Advanced ticket management (includes all sub-permissions)', category: 'ticket', parentId: null },
+  { id: 'ticket.manage.tags', name: 'Manage Tags', description: 'Add and remove tags from tickets', category: 'ticket', parentId: 'ticket.manage' },
+  { id: 'ticket.manage.hide', name: 'Hide Tickets', description: 'Hide tickets from public view', category: 'ticket', parentId: 'ticket.manage' },
+  { id: 'ticket.manage.subscribe', name: 'Manage Subscriptions', description: 'Manage ticket notification subscriptions', category: 'ticket', parentId: 'ticket.manage' },
+  { id: 'ticket.delete.all', name: 'Delete Tickets', description: 'Delete tickets from the system', category: 'ticket', parentId: null },
 ];
 
 const DEFAULT_ROLES: StaffRole[] = [
@@ -254,10 +285,12 @@ const DraggableRoleCard: React.FC<DraggableRoleCardProps> = ({
         <div className="flex flex-wrap gap-1">
           {Object.entries(PERMISSION_CATEGORIES).map(([category, label]) => {
             const categoryPermissions = getPermissionsByCategory(category);
-            const total = categoryPermissions.length;
+            // Count only parent/standalone permissions for badge totals
+            const parentPermissions = categoryPermissions.filter((p: Permission) => !p.parentId);
+            const total = parentPermissions.length;
             // Super Admin always has all permissions
             const isSuperAdmin = role.name === 'Super Admin' || role.id === 'super-admin';
-            const granted = isSuperAdmin ? total : categoryPermissions.filter(p => hasPermission(role, p.id)).length;
+            const granted = isSuperAdmin ? total : parentPermissions.filter((p: Permission) => hasPermission(role, p.id)).length;
 
             if (total === 0) return null;
 
@@ -297,7 +330,16 @@ export default function StaffRolesCard() {
   const createRoleMutation = useCreateRole();
   const updateRoleMutation = useUpdateRole();
   const deleteRoleMutation = useDeleteRole();
-  
+  const { hasPermission: userHasPermission } = useUserPermissions();
+
+  const isSuperAdmin = currentUser?.role === 'Super Admin';
+
+  // Check if the current user can grant a specific permission
+  const canGrantPermission = (permissionId: string): boolean => {
+    if (isSuperAdmin) return true;
+    return userHasPermission(permissionId);
+  };
+
   const roles = rolesData?.roles || [];
   const permissions = permissionsData?.permissions || [];
   const permissionCategories = permissionsData?.categories || PERMISSION_CATEGORIES;
@@ -373,9 +415,6 @@ export default function StaffRolesCard() {
     if (!pendingReorder) return;
     
     try {
-      // Pre-fetch CSRF token to avoid initial request failure
-      await getCSRFToken();
-      
       // Filter out Super Admin from the reorder request since it should never be reordered
       // Super Admin should always stay at order 0, other roles start from order 1
       const nonSuperAdminRoles = pendingReorder.filter(role => role.name !== 'Super Admin');
@@ -571,12 +610,24 @@ export default function StaffRolesCard() {
   };
 
   const togglePermission = (permissionId: string) => {
-    setRoleFormData(prev => ({
-      ...prev,
-      permissions: prev.permissions.includes(permissionId)
-        ? prev.permissions.filter(p => p !== permissionId)
-        : [...prev.permissions, permissionId]
-    }));
+    if (!canGrantPermission(permissionId)) return;
+    const allPerms = permissions.length > 0 ? permissions : DEFAULT_PERMISSIONS;
+    const isCurrentlyEnabled = roleFormData.permissions.includes(permissionId);
+    const childPermissions = allPerms.filter((p: Permission) => p.parentId === permissionId).map((p: Permission) => p.id);
+
+    if (isCurrentlyEnabled) {
+      // Toggling OFF: remove only the parent, children become individually manageable
+      setRoleFormData(prev => ({
+        ...prev,
+        permissions: prev.permissions.filter(p => p !== permissionId)
+      }));
+    } else {
+      // Toggling ON: add the parent and all its children
+      setRoleFormData(prev => ({
+        ...prev,
+        permissions: [...new Set([...prev.permissions, permissionId, ...childPermissions])]
+      }));
+    }
   };
 
   const getPermissionsByCategory = (category: string) => {
@@ -584,7 +635,8 @@ export default function StaffRolesCard() {
   };
 
   const hasPermission = (role: StaffRole, permissionId: string) => {
-    return role.permissions.includes(permissionId);
+    if (role.permissions.includes(permissionId)) return true;
+    return role.permissions.some(p => permissionId.startsWith(p + '.'));
   };
 
   // Helper function to check if the role form is valid
@@ -689,6 +741,11 @@ export default function StaffRolesCard() {
                 const categoryPermissions = getPermissionsByCategory(category);
                 if (categoryPermissions.length === 0) return null;
 
+                // Separate parents and children
+                const parentPermissions = categoryPermissions.filter((p: Permission) => !p.parentId);
+                const getChildren = (parentId: string) => categoryPermissions.filter((p: Permission) => p.parentId === parentId);
+                const isParentEnabled = (parentId: string) => roleFormData.permissions.includes(parentId);
+
                 return (
                   <div key={category} className="space-y-3">
                     <div className="flex items-center gap-2">
@@ -699,10 +756,10 @@ export default function StaffRolesCard() {
                           variant="outline"
                           size="sm"
                           onClick={() => {
-                            const allCategoryPermissions = categoryPermissions.map((p: Permission) => p.id);
+                            const grantablePermissions = categoryPermissions.filter((p: Permission) => canGrantPermission(p.id)).map((p: Permission) => p.id);
                             setRoleFormData(prev => ({
                               ...prev,
-                              permissions: [...prev.permissions.filter((p: string) => !allCategoryPermissions.includes(p)), ...allCategoryPermissions]
+                              permissions: [...prev.permissions.filter((p: string) => !grantablePermissions.includes(p)), ...grantablePermissions]
                             }));
                           }}
                         >
@@ -713,10 +770,10 @@ export default function StaffRolesCard() {
                           variant="outline"
                           size="sm"
                           onClick={() => {
-                            const allCategoryPermissions = categoryPermissions.map((p: Permission) => p.id);
+                            const grantablePermissions = categoryPermissions.filter((p: Permission) => canGrantPermission(p.id)).map((p: Permission) => p.id);
                             setRoleFormData(prev => ({
                               ...prev,
-                              permissions: prev.permissions.filter((p: string) => !allCategoryPermissions.includes(p))
+                              permissions: prev.permissions.filter((p: string) => !grantablePermissions.includes(p))
                             }));
                           }}
                         >
@@ -724,30 +781,70 @@ export default function StaffRolesCard() {
                         </Button>
                       </div>
                     </div>
-                    
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3 pl-4">
-                      {categoryPermissions.map((permission: Permission) => (
-                        <div key={permission.id} className="flex items-start space-x-2">
-                          <Checkbox
-                            id={permission.id}
-                            checked={roleFormData.permissions.includes(permission.id)}
-                            onCheckedChange={() => togglePermission(permission.id)}
-                          />
-                          <div className="grid gap-1.5 leading-none">
-                            <Label
-                              htmlFor={permission.id}
-                              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                            >
-                              {permission.name}
-                            </Label>
-                            <p className="text-xs text-muted-foreground">
-                              {permission.description}
-                            </p>
+
+                    <div className="space-y-3 pl-4">
+                      {parentPermissions.map((permission: Permission) => {
+                        const children = getChildren(permission.id);
+                        const parentChecked = isParentEnabled(permission.id);
+
+                        return (
+                          <div key={permission.id} className="space-y-2">
+                            {/* Parent permission */}
+                            <div className="flex items-start space-x-2">
+                              <Checkbox
+                                id={permission.id}
+                                checked={roleFormData.permissions.includes(permission.id)}
+                                disabled={!canGrantPermission(permission.id)}
+                                onCheckedChange={() => togglePermission(permission.id)}
+                              />
+                              <div className="grid gap-1.5 leading-none">
+                                <Label
+                                  htmlFor={permission.id}
+                                  className={`text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${!canGrantPermission(permission.id) ? 'text-muted-foreground' : ''}`}
+                                >
+                                  {permission.name}
+                                </Label>
+                                <p className="text-xs text-muted-foreground">
+                                  {!canGrantPermission(permission.id) ? "You don't have this permission" : permission.description}
+                                </p>
+                              </div>
+                            </div>
+
+                            {/* Child permissions */}
+                            {children.length > 0 && (
+                              <div className="grid grid-cols-1 md:grid-cols-2 gap-2 pl-8">
+                                {children.map((child: Permission) => {
+                                  const cantGrant = !canGrantPermission(child.id);
+                                  const isDisabled = parentChecked || cantGrant;
+                                  return (
+                                    <div key={child.id} className="flex items-start space-x-2">
+                                      <Checkbox
+                                        id={child.id}
+                                        checked={parentChecked || roleFormData.permissions.includes(child.id)}
+                                        disabled={isDisabled}
+                                        onCheckedChange={() => !isDisabled && togglePermission(child.id)}
+                                      />
+                                      <div className="grid gap-1.5 leading-none">
+                                        <Label
+                                          htmlFor={child.id}
+                                          className={`text-sm font-medium leading-none ${isDisabled ? 'text-muted-foreground' : ''}`}
+                                        >
+                                          {child.name}
+                                        </Label>
+                                        <p className="text-xs text-muted-foreground">
+                                          {cantGrant ? "You don't have this permission" : parentChecked ? 'Granted by parent' : child.description}
+                                        </p>
+                                      </div>
+                                    </div>
+                                  );
+                                })}
+                              </div>
+                            )}
                           </div>
-                        </div>
-                      ))}
+                        );
+                      })}
                     </div>
-                    
+
                     {category !== 'admin' && <Separator />}
                   </div>
                 );
diff --git a/client/src/components/settings/TicketSettings.tsx b/client/src/components/settings/TicketSettings.tsx
index 41745b5..41f1261 100644
--- a/client/src/components/settings/TicketSettings.tsx
+++ b/client/src/components/settings/TicketSettings.tsx
@@ -18,6 +18,7 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
 import { QuickResponseAction, QuickResponseCategory, QuickResponsesConfiguration, defaultQuickResponsesConfig } from '@/types/quickResponses';
 import { useBillingStatus } from '@/hooks/use-data';
 import { useAuth } from '@/hooks/use-auth';
+import { formatStrictnessLabel, hasPremiumAccess, normalizeStrictnessLevel } from '@/lib/backend-enums';
 
 // Import the types we need for the form builder
 interface TicketFormField {
@@ -417,20 +418,12 @@ const TicketSettings = ({
   // Check if user has premium access
   const isPremiumUser = () => {
     if (!billingStatus) return false;
-    const { subscriptionStatus, currentPeriodEnd, plan } = billingStatus;
-    
-    // For cancelled subscriptions, check if the period has ended
-    if (subscriptionStatus === 'canceled') {
-      if (!currentPeriodEnd) return false;
-      const endDate = new Date(currentPeriodEnd);
-      const now = new Date();
-      return endDate > now && plan === 'premium';
-    }
-    
-    // Active, trialing, or payment issues within period
-    return (['active', 'trialing'].includes(subscriptionStatus) && plan === 'premium') ||
-           (['past_due', 'unpaid', 'incomplete'].includes(subscriptionStatus) && plan === 'premium' && 
-            currentPeriodEnd && new Date(currentPeriodEnd) > new Date());
+
+    return hasPremiumAccess({
+      plan: billingStatus.plan,
+      subscriptionStatus: billingStatus.subscriptionStatus,
+      currentPeriodEnd: billingStatus.currentPeriodEnd,
+    });
   };
 
   // Collapsible state
@@ -845,7 +838,7 @@ const TicketSettings = ({
               <div>
                 <CardTitle className="text-base">{category.name}</CardTitle>
                 <p className="text-sm text-muted-foreground mt-1">
-                  {category.ticketTypes.join(', ')} • {category.actions.length} actions
+                  {category.ticketTypes.join(', ')} - {category.actions.length} actions
                 </p>
               </div>
               <div className="flex items-center space-x-2">
@@ -1732,7 +1725,7 @@ const TicketSettings = ({
                           <div>
                             <CardTitle className="text-base">{category.name}</CardTitle>
                             <p className="text-sm text-muted-foreground mt-1">
-                              {category.ticketTypes.join(', ')} • {category.actions.length} actions
+                              {category.ticketTypes.join(', ')} - {category.actions.length} actions
                             </p>
                           </div>
                           <div className="flex items-center space-x-2">
@@ -2030,7 +2023,7 @@ const TicketSettings = ({
               <div className="flex items-center space-x-2">
                 {!isAIModerationExpanded && isPremiumUser() && (
                   <span className="text-sm text-muted-foreground">
-                    {aiModerationSettings.enableAutomatedActions ? 'Automated' : 'Manual'} • {aiModerationSettings.strictnessLevel}
+                    {aiModerationSettings.enableAutomatedActions ? 'Automated' : 'Manual'} - {formatStrictnessLabel(aiModerationSettings.strictnessLevel)}
                   </span>
                 )}
                 {!isPremiumUser() && (
@@ -2115,7 +2108,7 @@ const TicketSettings = ({
                         <div className="space-y-3">
                           <Label className="text-sm font-medium">AI Strictness Level</Label>
                           <Select
-                            value={aiModerationSettings.strictnessLevel}
+                            value={normalizeStrictnessLevel(aiModerationSettings.strictnessLevel)}
                             onValueChange={(value) => {
                               setAiModerationSettings((prev: any) => ({
                                 ...prev,
@@ -2127,9 +2120,9 @@ const TicketSettings = ({
                               <SelectValue placeholder="Select strictness level" />
                             </SelectTrigger>
                             <SelectContent>
-                              <SelectItem value="lenient">Lenient - Only flagrant violations</SelectItem>
-                              <SelectItem value="standard">Standard - Balanced approach</SelectItem>
-                              <SelectItem value="strict">Strict - Zero tolerance policy</SelectItem>
+                              <SelectItem value="LENIENT">Lenient - Only flagrant violations</SelectItem>
+                              <SelectItem value="STANDARD">Standard - Balanced approach</SelectItem>
+                              <SelectItem value="STRICT">Strict - Zero tolerance policy</SelectItem>
                             </SelectContent>
                           </Select>
                           <p className="text-xs text-muted-foreground">
@@ -2881,4 +2874,4 @@ const DraggableQuickResponseAction = ({
   );
 };
 
-export default TicketSettings;
\ No newline at end of file
+export default TicketSettings;
diff --git a/client/src/components/settings/UsageSettings.tsx b/client/src/components/settings/UsageSettings.tsx
index a3be5d0..e462a77 100644
--- a/client/src/components/settings/UsageSettings.tsx
+++ b/client/src/components/settings/UsageSettings.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { HardDrive, Search, Filter, Trash2, Download, FolderOpen, Calendar, AlertCircle, Settings, CreditCard, Brain, Zap } from 'lucide-react';
+import { HardDrive, Search, Trash2, Download, FolderOpen, Calendar, AlertCircle, Settings, CreditCard, Brain } from 'lucide-react';
 import { getApiUrl, getCurrentDomain, apiFetch } from '@/lib/api';
 import { Button } from '@modl-gg/shared-web/components/ui/button';
 import { Input } from '@modl-gg/shared-web/components/ui/input';
@@ -26,6 +26,7 @@ interface StorageFile {
 }
 
 interface StorageUsage {
+  isPremium: boolean;
   totalUsed: number;
   totalQuota: number;
   byType: {
@@ -110,6 +111,7 @@ const UsageSettings = () => {
   const [newOverageLimit, setNewOverageLimit] = useState<number>(0);
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(25);
+  const DEFAULT_AI_LIMIT = 1000;
 
   useEffect(() => {
     fetchStorageData();
@@ -120,12 +122,22 @@ const fetchStorageData = async () => {
     try {
       setLoading(true);
 
-      // Fetch storage usage using quota endpoint
-      const usageResponse = await fetch(getApiUrl('/v1/panel/storage/quota'), {
-        credentials: 'include',
+      const requestOptions = {
+        credentials: 'include' as RequestCredentials,
         headers: { 'X-Server-Domain': getCurrentDomain() }
-      });
+      };
+
+      const [usageResponse, billingUsageResponse] = await Promise.all([
+        fetch(getApiUrl('/v1/panel/storage/quota'), requestOptions),
+        fetch(getApiUrl('/v1/panel/billing/usage'), requestOptions)
+      ]);
+
+      if (!usageResponse.ok) {
+        throw new Error(`Failed to fetch storage quota: ${usageResponse.status}`);
+      }
+
       const usageData = await usageResponse.json();
+      const billingUsageData = billingUsageResponse.ok ? await billingUsageResponse.json() : null;
       
       // Detect response format: 
       // - Old format: { usedBytes, maxBytes, usedPercentage, usedFormatted, maxFormatted } (values in bytes)
@@ -166,7 +178,10 @@ const fetchStorageData = async () => {
         other: cdnUsedBytes
       };
 
+      const isPremium = Boolean(usageData.isPremium);
+
       const usage: StorageUsage = {
+        isPremium,
         totalUsed: cdnUsedBytes,
         totalQuota: cdnLimitBytes,
         byType,
@@ -182,12 +197,25 @@ const fetchStorageData = async () => {
           overageUsed: 0,
           overageUsedFormatted: '0 Bytes',
           overageCost: usageData.cdn?.overageCost ?? 0,
-          isPaid: usageData.usageBillingEnabled ?? false,
+          isPaid: billingUsageData?.usageBillingEnabled ?? usageData.usageBillingEnabled ?? false,
           canUpload: cdnPercentage < 100,
           usagePercentage: Math.round(cdnPercentage * 100) / 100,
           baseUsagePercentage: Math.round(cdnPercentage * 100) / 100
         },
-        aiQuota: usageData.aiQuota ? {
+        aiQuota: isPremium && billingUsageData?.ai ? {
+          totalUsed: Number(billingUsageData.ai.used ?? 0),
+          baseLimit: Number(billingUsageData.ai.limit ?? DEFAULT_AI_LIMIT),
+          overageUsed: Number(billingUsageData.ai.overage ?? 0),
+          overageCost: Number(billingUsageData.ai.overageCost ?? 0),
+          canUseAI: Number(billingUsageData.ai.used ?? 0) < Number(billingUsageData.ai.limit ?? DEFAULT_AI_LIMIT),
+          usagePercentage: Math.max(0, Math.min(100, Math.round(Number(billingUsageData.ai.percentage ?? 0) * 100) / 100)),
+          byService: {
+            moderation: 0,
+            ticket_analysis: 0,
+            appeal_analysis: 0,
+            other: Number(billingUsageData.ai.used ?? 0)
+          }
+        } : isPremium && usageData.aiQuota ? {
           totalUsed: usageData.aiQuota.totalUsed ?? 0,
           baseLimit: usageData.aiQuota.baseLimit ?? 0,
           overageUsed: usageData.aiQuota.overageUsed ?? 0,
@@ -205,7 +233,7 @@ const fetchStorageData = async () => {
             appeal_analysis: 0,
             other: usageData.aiQuota.totalUsed ?? 0
           }
-        } : usageData.ai ? {
+        } : isPremium && usageData.ai ? {
           totalUsed: usageData.ai.used ?? 0,
           baseLimit: usageData.ai.limit ?? 0,
           overageUsed: usageData.ai.overage ?? 0,
@@ -221,12 +249,12 @@ const fetchStorageData = async () => {
         } : undefined,
         pricing: {
           storage: {
-            overagePricePerGB: usageData.cdn?.overageRate ?? 0.08,
+            overagePricePerGB: billingUsageData?.cdn?.overageRate ?? usageData.cdn?.overageRate ?? 0.08,
             currency: 'USD',
             period: 'month'
           },
           ai: {
-            overagePricePerRequest: usageData.ai?.overageRate ?? 0.01,
+            overagePricePerRequest: billingUsageData?.ai?.overageRate ?? usageData.ai?.overageRate ?? 0.02,
             currency: 'USD',
             period: 'month'
           }
@@ -236,10 +264,10 @@ const fetchStorageData = async () => {
       setStorageUsage(usage);
 
       // Fetch files
-      const filesResponse = await fetch(getApiUrl('/v1/panel/storage/files'), {
-        credentials: 'include',
-        headers: { 'X-Server-Domain': getCurrentDomain() }
-      });
+      const filesResponse = await fetch(getApiUrl('/v1/panel/storage/files'), requestOptions);
+      if (!filesResponse.ok) {
+        throw new Error(`Failed to fetch files: ${filesResponse.status}`);
+      }
       const filesData = await filesResponse.json();
       
       // Transform the file data to match the expected structure
@@ -381,6 +409,8 @@ const fetchStorageData = async () => {
     }
   };
 
+  const formatRequestCount = (value: number) => Math.round(value).toLocaleString();
+
   const filteredAndSortedFiles = files
     .filter(file => {
       const matchesSearch = (file.name?.toLowerCase() || '').includes(searchTerm.toLowerCase()) ||
@@ -660,8 +690,8 @@ const fetchStorageData = async () => {
                   <>
                     <div>
                       <div className="flex justify-between text-sm mb-2">
-                        <span>Used: {storageUsage.aiQuota.totalUsed} requests</span>
-                        <span>Limit: {storageUsage.aiQuota.baseLimit} requests</span>
+                        <span>Used: {formatRequestCount(storageUsage.aiQuota.totalUsed)} requests</span>
+                        <span>Limit: {formatRequestCount(storageUsage.aiQuota.baseLimit)} requests</span>
                       </div>
                       <Progress 
                         value={storageUsage.aiQuota.usagePercentage}
@@ -676,7 +706,7 @@ const fetchStorageData = async () => {
                       <div className="space-y-2">
                         <div className="flex justify-between text-sm">
                           <span>Overage Used:</span>
-                          <span>{storageUsage.aiQuota.overageUsed} requests</span>
+                          <span>{formatRequestCount(storageUsage.aiQuota.overageUsed)} requests</span>
                         </div>
                         <div className="flex justify-between text-sm">
                           <span>Overage Cost:</span>
@@ -685,17 +715,17 @@ const fetchStorageData = async () => {
                       </div>
                     )}
                     
-                    <div className="space-y-1">
-                      <div className="text-xs font-medium text-muted-foreground">By Service:</div>
+                    <div className="border-t pt-4 mt-4 space-y-1">
+                      <div className="text-xs font-medium text-muted-foreground">AI Breakdown</div>
                       {Object.entries(storageUsage.aiQuota.byService).map(([service, count]) => (
                         <div key={service} className="flex justify-between text-xs">
                           <span className="capitalize">{service.replace('_', ' ')}: </span>
-                          <span>{count}</span>
+                          <span>{formatRequestCount(count as number)}</span>
                         </div>
                       ))}
                     </div>
                   </>
-                ) : (
+                ) : storageUsage.isPremium ? (
                   <div className="space-y-2">
                     <div className="flex justify-between text-sm">
                       <span>Status:</span>
@@ -705,6 +735,19 @@ const fetchStorageData = async () => {
                       AI usage tracking is not enabled for this server.
                     </p>
                   </div>
+                ) : (
+                  <div className="space-y-2">
+                    <div className="flex justify-between text-sm">
+                      <span>Status:</span>
+                      <span className="text-muted-foreground">Premium only</span>
+                    </div>
+                    <p className="text-xs text-muted-foreground">
+                      AI is only available for Premium users.
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      Upgrade to Premium to access AI moderation and analysis features.
+                    </p>
+                  </div>
                 )}
               </div>
             </CardContent>
@@ -763,8 +806,8 @@ const fetchStorageData = async () => {
                 </div>
                 <div className="flex justify-between text-sm">
                   <span>AI Available:</span>
-                  <span className={storageUsage.aiQuota?.canUseAI ? 'text-green-600' : 'text-red-600'}>
-                    {storageUsage.aiQuota?.canUseAI ? 'Yes' : 'No'}
+                  <span className={storageUsage.isPremium && storageUsage.aiQuota ? 'text-green-600' : 'text-red-600'}>
+                    {storageUsage.isPremium && storageUsage.aiQuota ? 'Yes' : 'No'}
                   </span>
                 </div>
               </div>
@@ -1092,4 +1135,4 @@ const fetchStorageData = async () => {
   );
 };
 
-export default UsageSettings;
\ No newline at end of file
+export default UsageSettings;
diff --git a/client/src/components/ui/markdown-renderer.tsx b/client/src/components/ui/markdown-renderer.tsx
index 8ffceba..87a34f1 100644
--- a/client/src/components/ui/markdown-renderer.tsx
+++ b/client/src/components/ui/markdown-renderer.tsx
@@ -1,6 +1,8 @@
+import { useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { cn } from '@modl-gg/shared-web/lib/utils';
 import { ClickablePlayer } from './clickable-player';
+import { useMediaUploadConfig } from '@/hooks/use-media-upload';
 
 interface MarkdownRendererProps {
   content: string;
@@ -90,6 +92,40 @@ const MarkdownRenderer = ({ content, className, allowHtml = false, disableClicka
   }
 
   const processedContent = processMarkdownContent(content, disableClickablePlayers);
+  const { data: mediaConfig } = useMediaUploadConfig();
+
+  const normalizedCdnHost = useMemo(() => {
+    const rawDomain = mediaConfig?.cdnDomain?.trim();
+    if (!rawDomain) return null;
+
+    try {
+      const parsed = new URL(rawDomain.startsWith('http') ? rawDomain : `https://${rawDomain}`);
+      return parsed.hostname.toLowerCase();
+    } catch {
+      return rawDomain.replace(/^https?:\/\//i, '').split('/')[0].toLowerCase();
+    }
+  }, [mediaConfig?.cdnDomain]);
+
+  const getTrustedMediaKind = (href?: string): 'image' | 'video' | null => {
+    if (!href || !normalizedCdnHost) return null;
+
+    const imageMatch = href.match(/\.(jpg|jpeg|png|gif|webp)(\?.*)?$/i);
+    const videoMatch = href.match(/\.(mp4|webm|mov)(\?.*)?$/i);
+    if (!imageMatch && !videoMatch) return null;
+
+    try {
+      const parsed = new URL(href);
+      if (parsed.hostname.toLowerCase() !== normalizedCdnHost) {
+        return null;
+      }
+    } catch {
+      return null;
+    }
+
+    if (imageMatch) return 'image';
+    if (videoMatch) return 'video';
+    return null;
+  };
 
   // Check if content contains structured form data (bullet points, bold labels)
   const hasStructuredContent = /\*\*[^*]+\*\*:\s*\n(•[^\n]*\n?)+/.test(content);
@@ -170,17 +206,9 @@ const MarkdownRenderer = ({ content, className, allowHtml = false, disableClicka
           },
           // Custom link renderer to handle media URLs and external links
           a: ({ href, children, ...props }) => {
-            // Check if this is a media URL that should be embedded
-            const isMediaUrl = href && (
-              href.match(/\.(jpg|jpeg|png|gif|webp)(\?.*)?$/i) ||
-              href.match(/\.(mp4|webm|mov)(\?.*)?$/i)
-            );
-            
-            if (isMediaUrl) {
-              const isImage = href.match(/\.(jpg|jpeg|png|gif|webp)(\?.*)?$/i);
-              const isVideo = href.match(/\.(mp4|webm|mov)(\?.*)?$/i);
-              
-              if (isImage) {
+            const mediaKind = getTrustedMediaKind(href);
+
+            if (mediaKind === 'image') {
                 return (
                   <div className="my-4">
                     <img 
@@ -201,7 +229,7 @@ const MarkdownRenderer = ({ content, className, allowHtml = false, disableClicka
                     </div>
                   </div>
                 );
-              } else if (isVideo) {
+            } else if (mediaKind === 'video') {
                 return (
                   <div className="my-4">
                     <video 
@@ -222,7 +250,6 @@ const MarkdownRenderer = ({ content, className, allowHtml = false, disableClicka
                     </div>
                   </div>
                 );
-              }
             }
             
             // Default link behavior for non-media URLs
@@ -286,4 +313,4 @@ const MarkdownRenderer = ({ content, className, allowHtml = false, disableClicka
   );
 };
 
-export default MarkdownRenderer;
\ No newline at end of file
+export default MarkdownRenderer;
diff --git a/client/src/components/ui/player-punishment.tsx b/client/src/components/ui/player-punishment.tsx
index a302ccb..aacbd50 100644
--- a/client/src/components/ui/player-punishment.tsx
+++ b/client/src/components/ui/player-punishment.tsx
@@ -866,6 +866,10 @@ const PlayerPunishment: React.FC<PlayerPunishmentProps> = ({
           `Apply: ${getPunishmentPreview() || 'Select punishment options'}`
         )}
       </Button>
+      <p className="text-xs text-muted-foreground text-center">
+        The expiration timer for punishments issued on offline players will not begin until the player successfully attempts to login (unimpeded by a previous ban).
+        To force start a punishment, modify it's duration and the timer for the modified duration will begin immediately.
+      </p>
     </div>
   );
 };
diff --git a/client/src/hooks/use-auth.tsx b/client/src/hooks/use-auth.tsx
index 445706c..f6bbb00 100644
--- a/client/src/hooks/use-auth.tsx
+++ b/client/src/hooks/use-auth.tsx
@@ -2,11 +2,12 @@ import { createContext, ReactNode, useContext, useState, useEffect } from "react
 import { useLocation } from "wouter";
 import { useToast } from "@modl-gg/shared-web/hooks/use-toast";
 import { getApiUrl, getCurrentDomain } from "@/lib/api";
+import { isPublicPage } from "@/utils/routes";
 import { setDateLocale, setDateFormat } from "@/utils/date-utils";
 import i18n from "@/lib/i18n";
 
 interface User {
-  _id: string;
+  id: string;
   email: string;
   username: string;
   role: 'Super Admin' | 'Admin' | 'Moderator' | 'Helper';
@@ -40,7 +41,7 @@ async function authFetch(url: string, options: RequestInit = {}): Promise<Respon
 
 function mapUserFromMeResponse(userData: any): User {
   return {
-    _id: userData.id || '',
+    id: userData.id || '',
     email: userData.email,
     username: userData.username,
     role: userData.role,
@@ -68,15 +69,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
   // Check for existing session on mount (skip on public pages)
   useEffect(() => {
-    const path = window.location.pathname;
-    const isPublicPage = path.startsWith('/ticket/') ||
-                         path.startsWith('/appeal') ||
-                         path.startsWith('/submit-ticket') ||
-                         path === '/' ||
-                         path.startsWith('/knowledgebase') ||
-                         path.startsWith('/article/');
-
-    if (isPublicPage) {
+    if (isPublicPage()) {
       setIsLoading(false);
       return;
     }
@@ -118,8 +111,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         let description = errorMessage;
 
         if (response.status === 429) {
-          if (data.timeRemaining) {
-            description += ` Please wait ${data.timeRemaining} before trying again.`;
+          if (data.retryAfterSeconds) {
+            description += ` Please wait ${data.retryAfterSeconds} seconds before trying again.`;
           }
         }
 
@@ -162,8 +155,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         let description = errorMessage;
 
         if (response.status === 429) {
-          if (data.timeRemaining) {
-            description += ` Please wait ${data.timeRemaining} before trying again.`;
+          if (data.retryAfterSeconds) {
+            description += ` Please wait ${data.retryAfterSeconds} seconds before trying again.`;
           }
         }
 
@@ -211,6 +204,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
   const logout = async () => {
     setIsLoading(true);
+    let shouldRedirectToAuth = false;
+
     try {
       const response = await authFetch('/v1/panel/auth/logout', { method: 'POST' });
       if (!response.ok) {
@@ -220,23 +215,50 @@ export function AuthProvider({ children }: { children: ReactNode }) {
           description: errorData.message || i18n.t('toast.logoutErrorDesc'),
           variant: "destructive",
         });
-      } else {
+        try {
+          const authenticatedUser = await fetchAuthenticatedUser();
+          setUser(authenticatedUser);
+        } catch {
+          // Keep the current client state if we can't verify server auth state.
+        }
+        return;
+      }
+
+      const authenticatedUser = await fetchAuthenticatedUser();
+      if (authenticatedUser) {
+        setUser(authenticatedUser);
         toast({
-          title: i18n.t('toast.logoutSuccess'),
-          description: i18n.t('toast.logoutSuccessDesc'),
+          title: i18n.t('toast.logoutError'),
+          description: "Logout did not fully clear your server session. Please try again.",
+          variant: "destructive",
         });
+        return;
       }
+
+      setUser(null);
+      shouldRedirectToAuth = true;
+      toast({
+        title: i18n.t('toast.logoutSuccess'),
+        description: i18n.t('toast.logoutSuccessDesc'),
+      });
     } catch (error) {
       console.error("Logout error:", error);
+      try {
+        const authenticatedUser = await fetchAuthenticatedUser();
+        setUser(authenticatedUser);
+      } catch {
+        // Keep the current client state if we can't verify server auth state.
+      }
       toast({
         title: i18n.t('toast.logoutError'),
         description: i18n.t('toast.logoutErrorDesc'),
         variant: "destructive",
       });
     } finally {
-      setUser(null);
       setIsLoading(false);
-      navigate('/auth');
+      if (shouldRedirectToAuth) {
+        navigate('/auth');
+      }
     }
   };
 
diff --git a/client/src/hooks/use-data.tsx b/client/src/hooks/use-data.tsx
index 2ddf7bb..2c938b0 100644
--- a/client/src/hooks/use-data.tsx
+++ b/client/src/hooks/use-data.tsx
@@ -3,17 +3,48 @@ import { useQuery, useMutation, useQueryClient, QueryClient, useQueries } from '
 import { queryClient } from '../lib/queryClient';
 import { useAuth } from './use-auth';
 import { getApiUrl, getCurrentDomain } from '@/lib/api';
+import { isPublicPage } from '@/utils/routes';
 
 // Helper function to make API requests with the X-Server-Domain header
 async function apiFetch(url: string, options: RequestInit = {}): Promise<Response> {
-  return fetch(getApiUrl(url), {
+  const credentials = options.credentials
+    ?? (url.startsWith('/v1/public/') ? 'omit' : 'include');
+
+  const response = await fetch(getApiUrl(url), {
     ...options,
-    credentials: 'include',
+    credentials,
     headers: {
       ...options.headers,
       'X-Server-Domain': getCurrentDomain(),
     },
   });
+  if (response.status === 429) {
+    const { handleRateLimitResponse, getCurrentPath } = await import('../utils/rate-limit-handler');
+    await handleRateLimitResponse(response, getCurrentPath());
+    throw new Error('Rate limit exceeded');
+  }
+  return response;
+}
+
+type SettingsEnvelope<T> = {
+  data: T;
+  _meta?: {
+    version: number;
+    updatedAt?: string | null;
+  } | null;
+};
+
+function toSettingsEnvelope<T>(payload: any): SettingsEnvelope<T> {
+  if (payload && typeof payload === 'object' && 'data' in payload) {
+    return payload as SettingsEnvelope<T>;
+  }
+  return {
+    data: payload as T,
+    _meta: {
+      version: 0,
+      updatedAt: null,
+    },
+  };
 }
 
 export function usePlayer(uuid: string) {
@@ -409,16 +440,10 @@ export function useSettings() {
   return useQuery({
     queryKey: ['/v1/settings'],
     queryFn: async () => {
-      const currentPath = window.location.pathname;
-      const isPublicPage = currentPath.startsWith('/ticket/') ||
-                          currentPath.startsWith('/appeal') ||
-                          currentPath.startsWith('/submit-ticket') ||
-                          currentPath === '/' ||
-                          currentPath.startsWith('/knowledgebase') ||
-                          currentPath.startsWith('/article/');
+      const isPublic = isPublicPage();
 
       try {
-        if (isPublicPage) {
+        if (isPublic) {
           const publicRes = await apiFetch('/v1/public/settings');
 
           if (publicRes.ok) {
@@ -441,7 +466,8 @@ export function useSettings() {
           ]);
 
           if (res.ok) {
-            const data = await res.json();
+            const generalEnvelope = toSettingsEnvelope<any>(await res.json());
+            const general = generalEnvelope.data || {};
             let webhookSettings = null;
 
             if (webhookRes.ok) {
@@ -450,7 +476,9 @@ export function useSettings() {
 
             return {
               settings: {
-                ...data,
+                ...general,
+                general,
+                generalMeta: generalEnvelope._meta || null,
                 webhookSettings
               }
             };
@@ -478,13 +506,25 @@ export function useSettings() {
         throw new Error('Failed to fetch settings from all available endpoints');
       } catch (error) {
         try {
-          const fallbackUrl = isPublicPage ? '/v1/panel/settings/general' : '/v1/public/settings';
+          const fallbackUrl = isPublic ? '/v1/panel/settings/general' : '/v1/public/settings';
           const fallbackRes = await apiFetch(fallbackUrl);
 
           if (fallbackRes.ok) {
-            if (isPublicPage) {
-              const data = JSON.parse(await fallbackRes.text());
-              return { settings: data.settings || {} };
+            if (isPublic) {
+              const payload = await fallbackRes.json();
+              if (payload && typeof payload === 'object' && 'settings' in payload) {
+                return { settings: (payload as any).settings || {} };
+              }
+
+              const generalEnvelope = toSettingsEnvelope<any>(payload);
+              const general = generalEnvelope.data || {};
+              return {
+                settings: {
+                  ...general,
+                  general,
+                  generalMeta: generalEnvelope._meta || null,
+                }
+              };
             } else {
               const publicData = await fallbackRes.json();
               return {
@@ -525,7 +565,7 @@ export function useSettings() {
 }
 
 export function useTicketFormSettings() {
-  return useQuery({
+  return useQuery<SettingsEnvelope<any> | null>({
     queryKey: ['/v1/panel/settings/ticket-forms'],
     queryFn: async () => {
       const res = await apiFetch('/v1/panel/settings/ticket-forms');
@@ -535,7 +575,7 @@ export function useTicketFormSettings() {
         }
         throw new Error('Failed to fetch ticket form settings');
       }
-      return res.json();
+      return toSettingsEnvelope(await res.json());
     },
     staleTime: 1000 * 60 * 5,
     refetchOnWindowFocus: false
@@ -543,7 +583,7 @@ export function useTicketFormSettings() {
 }
 
 export function useQuickResponses() {
-  return useQuery({
+  return useQuery<SettingsEnvelope<any> | null>({
     queryKey: ['/v1/panel/settings/quick-responses'],
     queryFn: async () => {
       const res = await apiFetch('/v1/panel/settings/quick-responses');
@@ -553,7 +593,7 @@ export function useQuickResponses() {
         }
         throw new Error('Failed to fetch quick responses');
       }
-      return res.json();
+      return toSettingsEnvelope(await res.json());
     },
     staleTime: 1000 * 60 * 5,
     refetchOnWindowFocus: false
@@ -561,7 +601,7 @@ export function useQuickResponses() {
 }
 
 export function useStatusThresholds() {
-  return useQuery({
+  return useQuery<SettingsEnvelope<any> | null>({
     queryKey: ['/v1/panel/settings/status-thresholds'],
     queryFn: async () => {
       const res = await apiFetch('/v1/panel/settings/status-thresholds');
@@ -571,7 +611,25 @@ export function useStatusThresholds() {
         }
         throw new Error('Failed to fetch status thresholds');
       }
-      return res.json();
+      return toSettingsEnvelope(await res.json());
+    },
+    staleTime: 1000 * 60 * 5,
+    refetchOnWindowFocus: false
+  });
+}
+
+export function useTicketLabelSettings() {
+  return useQuery<SettingsEnvelope<any> | null>({
+    queryKey: ['/v1/panel/settings/ticket-labels'],
+    queryFn: async () => {
+      const res = await apiFetch('/v1/panel/settings/ticket-labels');
+      if (!res.ok) {
+        if (res.status === 401 || res.status === 403) {
+          return null;
+        }
+        throw new Error('Failed to fetch ticket label settings');
+      }
+      return toSettingsEnvelope(await res.json());
     },
     staleTime: 1000 * 60 * 5,
     refetchOnWindowFocus: false
@@ -814,9 +872,9 @@ export function usePanelTicket(id: string) {
 
 export function usePlayerTickets(uuid: string) {
   return useQuery({
-    queryKey: ['/v1/panel/tickets/creator', uuid],
+    queryKey: ['/v1/panel/tickets/player', uuid],
     queryFn: async () => {
-      const res = await apiFetch(`/v1/panel/tickets/creator/${uuid}`);
+      const res = await apiFetch(`/v1/panel/tickets/player/${uuid}`);
       if (!res.ok) {
         if (res.status === 404) {
           return [];
@@ -1201,7 +1259,7 @@ export function useRecentTickets(limit: number = 5) {
       return res.json();
     },
     staleTime: 2 * 60 * 1000,
-    refetchOnWindowFocus: true,
+    refetchOnWindowFocus: false,
   });
 }
 
@@ -1216,7 +1274,7 @@ export function useRecentPunishments(limit: number = 10) {
       return res.json();
     },
     staleTime: 2 * 60 * 1000,
-    refetchOnWindowFocus: true,
+    refetchOnWindowFocus: false,
   });
 }
 
@@ -1277,7 +1335,7 @@ export function useMarkSubscriptionUpdateAsRead() {
 
   return useMutation({
     mutationFn: async (updateId: string) => {
-      const res = await apiFetch(`/v1/panel/ticket-subscriptions/updates/${updateId}/read`, {
+      const res = await apiFetch(`/v1/panel/ticket-subscriptions/updates/${encodeURIComponent(updateId)}/read`, {
         method: 'POST',
       });
 
@@ -1289,6 +1347,29 @@ export function useMarkSubscriptionUpdateAsRead() {
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['/v1/panel/ticket-subscriptions/updates'] });
+      queryClient.invalidateQueries({ queryKey: ['/v1/panel/ticket-subscriptions/assigned-updates'] });
+    },
+  });
+}
+
+export function useMarkTicketAsRead() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (ticketId: string) => {
+      const res = await apiFetch(`/v1/panel/ticket-subscriptions/tickets/${encodeURIComponent(ticketId)}/read`, {
+        method: 'POST',
+      });
+
+      if (!res.ok) {
+        throw new Error('Failed to mark ticket as read');
+      }
+
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['/v1/panel/ticket-subscriptions/updates'] });
+      queryClient.invalidateQueries({ queryKey: ['/v1/panel/ticket-subscriptions/assigned-updates'] });
     },
   });
 }
@@ -1408,14 +1489,17 @@ export function useBulkUpdateTickets() {
 
 export function useLabels() {
   return useQuery({
-    queryKey: ['/v1/panel/settings/general/labels'],
+    queryKey: ['/v1/panel/settings/ticket-labels', 'labels'],
     queryFn: async () => {
-      const res = await apiFetch('/v1/panel/settings/general');
+      const res = await apiFetch('/v1/panel/settings/ticket-labels');
       if (!res.ok) {
+        if (res.status === 401 || res.status === 403) {
+          return [];
+        }
         throw new Error('Failed to fetch labels');
       }
-      const data = await res.json();
-      return data.labels || [];
+      const envelope = toSettingsEnvelope<any>(await res.json());
+      return envelope?.data?.labels || [];
     },
     staleTime: 1000 * 60 * 5,
     refetchOnWindowFocus: false
@@ -1433,7 +1517,7 @@ export function useAssignedTicketUpdates(limit: number = 10) {
       return res.json();
     },
     staleTime: 30 * 1000,
-    refetchOnWindowFocus: true,
+    refetchOnWindowFocus: false,
   });
 }
 
diff --git a/client/src/hooks/use-media-upload.tsx b/client/src/hooks/use-media-upload.tsx
index 3cb05a6..871a34e 100644
--- a/client/src/hooks/use-media-upload.tsx
+++ b/client/src/hooks/use-media-upload.tsx
@@ -1,16 +1,26 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { getApiUrl, getCurrentDomain } from '@/lib/api';
+import { isPublicPage } from '@/utils/routes';
 
 async function apiFetch(url: string, options: RequestInit = {}): Promise<Response> {
+  const credentials = options.credentials
+    ?? (url.startsWith('/v1/public/') ? 'omit' : 'include');
+
   const fullUrl = getApiUrl(url);
-  return fetch(fullUrl, {
+  const response = await fetch(fullUrl, {
     ...options,
-    credentials: "include",
+    credentials,
     headers: {
       ...options.headers,
       "X-Server-Domain": getCurrentDomain(),
     },
   });
+  if (response.status === 429) {
+    const { handleRateLimitResponse, getCurrentPath } = await import('../utils/rate-limit-handler');
+    await handleRateLimitResponse(response, getCurrentPath());
+    throw new Error('Rate limit exceeded');
+  }
+  return response;
 }
 
 export interface MediaUploadConfig {
@@ -54,15 +64,18 @@ export interface UploadProgress {
   percentage: number;
 }
 
+interface UploadMetadata {
+  entityId?: string;
+  ticketId?: string;
+  appealId?: string;
+  accessToken?: string;
+  ticketToken?: string;
+}
+
 const MEDIA_CONFIG_QUERY_KEY = ['/v1/media/config'];
 
 async function fetchMediaConfig(): Promise<MediaUploadConfig> {
-  const currentPath = window.location.pathname;
-  const isPublic = currentPath.startsWith('/ticket/') ||
-                      currentPath.startsWith('/appeal') ||
-                      currentPath === '/' ||
-                      currentPath.startsWith('/knowledgebase') ||
-                      currentPath.startsWith('/article/');
+  const isPublic = isPublicPage();
 
   try {
     if (isPublic) {
@@ -123,36 +136,75 @@ export function useMediaUploadConfig() {
   });
 }
 
-function isPublicPage(): boolean {
-  const currentPath = window.location.pathname;
-  return currentPath.startsWith('/ticket/') ||
-         currentPath.startsWith('/appeal') ||
-         currentPath === '/' ||
-         currentPath.startsWith('/knowledgebase') ||
-         currentPath.startsWith('/article/');
-}
-
 function getEndpointPrefix(): string {
   return isPublicPage() ? '/v1/public/media' : '/v1/panel/media';
 }
 
+function getCookieValue(name: string): string | null {
+  if (typeof document === 'undefined') {
+    return null;
+  }
+
+  const target = `${name}=`;
+  const match = document.cookie
+    .split(';')
+    .map((cookie) => cookie.trim())
+    .find((cookie) => cookie.startsWith(target));
+
+  if (!match) {
+    return null;
+  }
+
+  return decodeURIComponent(match.slice(target.length));
+}
+
+function resolveUploadContext(metadata: UploadMetadata = {}): { entityId?: string; accessToken?: string } {
+  const rawEntityId = metadata.entityId
+    || metadata.ticketId
+    || metadata.appealId;
+  const entityId = rawEntityId?.trim();
+
+  let accessToken = metadata.accessToken || metadata.ticketToken;
+  if (!accessToken && entityId) {
+    const normalized = entityId.toLowerCase();
+    if (normalized !== 'new' && normalized !== 'unknown') {
+      accessToken = getCookieValue(`ticket_auth_${entityId}`);
+    }
+  }
+
+  return {
+    entityId: entityId || undefined,
+    accessToken: accessToken || undefined,
+  };
+}
+
 async function getPresignedUrl(
   file: File,
-  uploadType: string
+  uploadType: string,
+  metadata: UploadMetadata = {}
 ): Promise<PresignResponse> {
   const endpoint = `${getEndpointPrefix()}/presign`;
+  const context = resolveUploadContext(metadata);
+
+  const payload: Record<string, unknown> = {
+    uploadType,
+    fileName: file.name,
+    fileSize: file.size,
+    contentType: file.type,
+  };
+  if (context.entityId) {
+    payload.entityId = context.entityId;
+  }
+  if (context.accessToken) {
+    payload.accessToken = context.accessToken;
+  }
   
   const response = await apiFetch(endpoint, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
-    body: JSON.stringify({
-      uploadType,
-      fileName: file.name,
-      fileSize: file.size,
-      contentType: file.type,
-    }),
+    body: JSON.stringify(payload),
   });
 
   if (!response.ok) {
@@ -212,15 +264,20 @@ async function uploadToS3(
   });
 }
 
-async function confirmUpload(key: string): Promise<ConfirmResponse> {
+async function confirmUpload(key: string, metadata: UploadMetadata = {}): Promise<ConfirmResponse> {
   const endpoint = `${getEndpointPrefix()}/confirm`;
+  const context = resolveUploadContext(metadata);
+  const payload: Record<string, string> = { key };
+  if (context.accessToken) {
+    payload.accessToken = context.accessToken;
+  }
   
   const response = await apiFetch(endpoint, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
-    body: JSON.stringify({ key }),
+    body: JSON.stringify(payload),
   });
 
   if (!response.ok) {
@@ -238,7 +295,7 @@ export function useMediaUpload() {
   const uploadMedia = async (
     file: File,
     uploadType: 'evidence' | 'ticket' | 'appeal' | 'article' | 'server-icon',
-    _metadata: Record<string, unknown> = {},
+    metadata: Record<string, unknown> = {},
     onProgress?: (progress: UploadProgress) => void
   ): Promise<{ url: string; key: string }> => {
     // Get fresh config from cache or fetch it
@@ -254,11 +311,11 @@ export function useMediaUpload() {
       throw new Error('Media storage is not configured. Please check your Backblaze B2 credentials.');
     }
 
-    const presign = await getPresignedUrl(file, uploadType);
+    const presign = await getPresignedUrl(file, uploadType, metadata as UploadMetadata);
 
     await uploadToS3(presign.presignedUrl, file, presign.requiredHeaders, onProgress);
 
-    const confirmed = await confirmUpload(presign.key);
+    const confirmed = await confirmUpload(presign.key, metadata as UploadMetadata);
 
     return { url: confirmed.url, key: confirmed.key };
   };
diff --git a/client/src/hooks/use-permissions.tsx b/client/src/hooks/use-permissions.tsx
index fc690c5..7f8d3b3 100644
--- a/client/src/hooks/use-permissions.tsx
+++ b/client/src/hooks/use-permissions.tsx
@@ -6,7 +6,7 @@ import { getApiUrl, getCurrentDomain } from '@/lib/api';
 
 async function apiFetch(url: string, options: RequestInit = {}): Promise<Response> {
   const fullUrl = getApiUrl(url);
-  return fetch(fullUrl, {
+  const response = await fetch(fullUrl, {
     ...options,
     credentials: "include",
     headers: {
@@ -14,35 +14,71 @@ async function apiFetch(url: string, options: RequestInit = {}): Promise<Respons
       "X-Server-Domain": getCurrentDomain(),
     },
   });
+  if (response.status === 429) {
+    const { handleRateLimitResponse, getCurrentPath } = await import('../utils/rate-limit-handler');
+    await handleRateLimitResponse(response, getCurrentPath());
+    throw new Error('Rate limit exceeded');
+  }
+  return response;
 }
 
 // Define permissions that match the backend permission system
 export const PERMISSIONS = {
   // Admin settings permissions
   ADMIN_SETTINGS_VIEW: 'admin.settings.view',
+  ADMIN_SETTINGS_VIEW_PUNISHMENTS: 'admin.settings.view.punishments',
+  ADMIN_SETTINGS_VIEW_CONTENT: 'admin.settings.view.content',
+  ADMIN_SETTINGS_VIEW_DOMAIN: 'admin.settings.view.domain',
+  ADMIN_SETTINGS_VIEW_BILLING: 'admin.settings.view.billing',
+  ADMIN_SETTINGS_VIEW_MIGRATION: 'admin.settings.view.migration',
+  ADMIN_SETTINGS_VIEW_STORAGE: 'admin.settings.view.storage',
   ADMIN_SETTINGS_MODIFY: 'admin.settings.modify',
+  ADMIN_SETTINGS_MODIFY_PUNISHMENTS: 'admin.settings.modify.punishments',
+  ADMIN_SETTINGS_MODIFY_CONTENT: 'admin.settings.modify.content',
+  ADMIN_SETTINGS_MODIFY_DOMAIN: 'admin.settings.modify.domain',
+  ADMIN_SETTINGS_MODIFY_BILLING: 'admin.settings.modify.billing',
+  ADMIN_SETTINGS_MODIFY_MIGRATION: 'admin.settings.modify.migration',
+  ADMIN_SETTINGS_MODIFY_STORAGE: 'admin.settings.modify.storage',
   ADMIN_STAFF_MANAGE: 'admin.staff.manage',
+  ADMIN_STAFF_MANAGE_MEMBERS: 'admin.staff.manage.members',
+  ADMIN_STAFF_MANAGE_ROLES: 'admin.staff.manage.roles',
   ADMIN_AUDIT_VIEW: 'admin.audit.view',
-  
+  ADMIN_AUDIT_VIEW_DASHBOARD: 'admin.audit.view.dashboard',
+  ADMIN_AUDIT_VIEW_ANALYTICS: 'admin.audit.view.analytics',
+  ADMIN_AUDIT_VIEW_LOGS: 'admin.audit.view.logs',
+
   // Punishment permissions
   PUNISHMENT_MODIFY: 'punishment.modify',
-  
+  PUNISHMENT_MODIFY_PARDON: 'punishment.modify.pardon',
+  PUNISHMENT_MODIFY_DURATION: 'punishment.modify.duration',
+  PUNISHMENT_MODIFY_NOTE: 'punishment.modify.note',
+  PUNISHMENT_MODIFY_EVIDENCE: 'punishment.modify.evidence',
+  PUNISHMENT_MODIFY_OPTIONS: 'punishment.modify.options',
+
   // Ticket permissions
   TICKET_VIEW_ALL: 'ticket.view.all',
+  TICKET_VIEW_ALL_NOTES: 'ticket.view.all.notes',
   TICKET_REPLY_ALL: 'ticket.reply.all',
+  TICKET_REPLY_ALL_NOTES: 'ticket.reply.all.notes',
   TICKET_CLOSE_ALL: 'ticket.close.all',
+  TICKET_CLOSE_ALL_LOCK: 'ticket.close.all.lock',
+  TICKET_MANAGE: 'ticket.manage',
+  TICKET_MANAGE_TAGS: 'ticket.manage.tags',
+  TICKET_MANAGE_HIDE: 'ticket.manage.hide',
+  TICKET_MANAGE_SUBSCRIBE: 'ticket.manage.subscribe',
   TICKET_DELETE_ALL: 'ticket.delete.all',
 } as const;
 
 // Settings-specific permissions map
+// Each tab lists ALL permissions that grant access (matched with hasAnyPermission)
 export const SETTINGS_PERMISSIONS = {
   account: [], // Everyone can access account settings
-  general: [PERMISSIONS.ADMIN_SETTINGS_VIEW], // Server & Billing
-  punishment: [PERMISSIONS.ADMIN_SETTINGS_VIEW], // Punishment Types
-  tags: [PERMISSIONS.ADMIN_SETTINGS_VIEW], // Tickets - requires settings view
-  staff: [PERMISSIONS.ADMIN_STAFF_MANAGE], // Staff Management
-  knowledgebase: [PERMISSIONS.ADMIN_SETTINGS_VIEW], // Knowledgebase - requires settings view
-  homepage: [PERMISSIONS.ADMIN_SETTINGS_VIEW], // Homepage Cards
+  general: [PERMISSIONS.ADMIN_SETTINGS_VIEW, PERMISSIONS.ADMIN_SETTINGS_VIEW_BILLING, PERMISSIONS.ADMIN_SETTINGS_VIEW_DOMAIN, PERMISSIONS.ADMIN_SETTINGS_VIEW_STORAGE, PERMISSIONS.ADMIN_SETTINGS_VIEW_MIGRATION],
+  punishment: [PERMISSIONS.ADMIN_SETTINGS_VIEW, PERMISSIONS.ADMIN_SETTINGS_VIEW_PUNISHMENTS],
+  tags: [], // Tickets tab has mixed permission gates by sub-section
+  staff: [PERMISSIONS.ADMIN_STAFF_MANAGE],
+  knowledgebase: [PERMISSIONS.ADMIN_SETTINGS_VIEW, PERMISSIONS.ADMIN_SETTINGS_VIEW_CONTENT],
+  homepage: [PERMISSIONS.ADMIN_SETTINGS_VIEW, PERMISSIONS.ADMIN_SETTINGS_VIEW_CONTENT],
 } as const;
 
 export function usePermissions() {
@@ -85,9 +121,14 @@ export function usePermissions() {
       return serverPermissions;
     }
     
-    // If serverPermissions is explicitly null, it means fetch failed - use fallback
-    // If serverPermissions is undefined, query is still loading - also use fallback
-    // Fallback to default role permissions for backward compatibility
+    // If serverPermissions is explicitly null, it means fetch failed - deny all permissions
+    // Server is the authority; on failure, grant no permissions for security
+    if (serverPermissions === null) {
+      return [];
+    }
+
+    // If serverPermissions is undefined, query is still loading - use default role permissions
+    // only for the initial load before the first fetch completes
     const defaultPermissions: Record<string, string[]> = {
       'Super Admin': [
         PERMISSIONS.ADMIN_SETTINGS_VIEW,
@@ -117,14 +158,14 @@ export function usePermissions() {
         PERMISSIONS.TICKET_REPLY_ALL,
       ],
     };
-    
+
     return defaultPermissions[user.role] || [];
   }, [user, serverPermissions]);
 
-  // Check if user has a specific permission
+  // Check if user has a specific permission (with hierarchical matching)
   const hasPermission = (permission: string): boolean => {
     if (!user) return false;
-    return userPermissions.includes(permission);
+    return userPermissions.some(p => p === permission || permission.startsWith(p + '.'));
   };
 
   // Check if user has all required permissions
@@ -144,9 +185,17 @@ export function usePermissions() {
   // Check if user can access a specific settings tab
   const canAccessSettingsTab = (tabName: keyof typeof SETTINGS_PERMISSIONS): boolean => {
     if (!user) return false;
+    if (tabName === 'tags') {
+      return hasAnyPermission([
+        PERMISSIONS.ADMIN_SETTINGS_VIEW,
+        PERMISSIONS.TICKET_VIEW_ALL,
+        PERMISSIONS.TICKET_MANAGE_TAGS,
+      ]);
+    }
     const requiredPermissions = SETTINGS_PERMISSIONS[tabName];
     if (!requiredPermissions || !Array.isArray(requiredPermissions)) return false; // Defensive check
-    return requiredPermissions.length === 0 || hasAllPermissions(requiredPermissions);
+    if (requiredPermissions.length === 0) return true;
+    return hasAnyPermission(requiredPermissions as unknown as string[]);
   };
 
   // Get accessible settings tabs
@@ -206,7 +255,7 @@ export function usePermissions() {
     }
     
     // For other roles, they can only change their own
-    return user._id === targetUserId;
+    return user.id === targetUserId;
   };
 
   return {
@@ -222,4 +271,4 @@ export function usePermissions() {
     canAssignStaffMinecraftPlayer,
     roleHierarchy,
   };
-}
\ No newline at end of file
+}
diff --git a/client/src/hooks/use-provisioning-status.tsx b/client/src/hooks/use-provisioning-status.tsx
index bf1077c..eb49188 100644
--- a/client/src/hooks/use-provisioning-status.tsx
+++ b/client/src/hooks/use-provisioning-status.tsx
@@ -1,11 +1,13 @@
 import { useEffect } from 'react';
 import { useLocation } from 'wouter';
 import { apiFetch } from '@/lib/api';
+import { normalizeProvisioningStatus } from '@/lib/backend-enums';
 
 interface ProvisioningStatusResponse {
-  status: string;
-  serverName: string;
-  emailVerified: boolean;
+  status?: string | null;
+  provisioningStatus?: string | null;
+  serverName?: string | null;
+  emailVerified?: boolean | null;
 }
 
 export function useProvisioningStatusCheck() {
@@ -42,12 +44,14 @@ export function useProvisioningStatusCheck() {
         }
 
         const data: ProvisioningStatusResponse = await response.json();
+        const provisioningStatus = normalizeProvisioningStatus(data.status ?? data.provisioningStatus);
+        const emailVerified = data.emailVerified === true;
 
         // If email not verified or server not completed, redirect to setup page
         if (process.env.ENVIRONMENT !== 'development') {
-          if (!data.emailVerified) {
+          if (!emailVerified) {
             setLocation('/verify-email?status=check&reason=email_not_verified');
-          } else if (data.status !== 'completed') {
+          } else if (provisioningStatus !== 'COMPLETED') {
             setLocation('/verify-email?status=check&reason=provisioning_incomplete');
           }
         }
@@ -60,4 +64,4 @@ export function useProvisioningStatusCheck() {
 
     checkProvisioningStatus();
   }, [setLocation, location]);
-} 
\ No newline at end of file
+} 
diff --git a/client/src/hooks/use-public-settings.tsx b/client/src/hooks/use-public-settings.tsx
index 2097f6d..a725115 100644
--- a/client/src/hooks/use-public-settings.tsx
+++ b/client/src/hooks/use-public-settings.tsx
@@ -2,10 +2,13 @@ import { useQuery } from '@tanstack/react-query';
 import { getApiUrl, getCurrentDomain } from '@/lib/api';
 
 async function apiFetch(url: string, options: RequestInit = {}): Promise<Response> {
+  const credentials = options.credentials
+    ?? (url.startsWith('/v1/public/') ? 'omit' : 'include');
+
   const fullUrl = getApiUrl(url);
   return fetch(fullUrl, {
     ...options,
-    credentials: "include",
+    credentials,
     headers: {
       ...options.headers,
       "X-Server-Domain": getCurrentDomain(),
diff --git a/client/src/lib/api.ts b/client/src/lib/api.ts
index badfbbc..e6841e8 100644
--- a/client/src/lib/api.ts
+++ b/client/src/lib/api.ts
@@ -48,6 +48,15 @@ interface RequestOptions extends Omit<RequestInit, 'method' | 'body'> {
   body?: unknown;
 }
 
+function resolveCredentials(path: string, options?: RequestOptions): RequestCredentials {
+  if (options?.credentials) {
+    return options.credentials;
+  }
+
+  const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+  return normalizedPath.startsWith('/v1/public/') ? 'omit' : 'include';
+}
+
 function createHeaders(options?: RequestOptions): Headers {
   const headers = new Headers(options?.headers);
   headers.set('X-Server-Domain', getCurrentDomain());
@@ -88,7 +97,7 @@ export async function apiFetch(
     ...rest,
     method,
     headers,
-    credentials: 'include',
+    credentials: resolveCredentials(path, options),
     body: processedBody,
   });
 
@@ -113,12 +122,6 @@ export const api = {
     apiFetch(path, { ...options, method: 'DELETE' }),
 };
 
-// Legacy function for backwards compatibility - now a no-op
-// Spring Boot backend uses cookie-based authentication without CSRF tokens
-export async function getCSRFToken(): Promise<string> {
-  return '';
-}
-
 export async function apiUpload(
   path: string,
   formData: FormData,
@@ -132,7 +135,7 @@ export async function apiUpload(
     ...options,
     method: 'POST',
     headers,
-    credentials: 'include',
+    credentials: resolveCredentials(path, options),
     body: formData,
   });
 
diff --git a/client/src/lib/backend-enums.ts b/client/src/lib/backend-enums.ts
new file mode 100644
index 0000000..343cd1a
--- /dev/null
+++ b/client/src/lib/backend-enums.ts
@@ -0,0 +1,133 @@
+type NullableString = string | null | undefined;
+type NullableDateValue = string | Date | null | undefined;
+
+export type ServerPlan = "FREE" | "PREMIUM";
+
+export type SubscriptionStatus =
+  | "ACTIVE"
+  | "CANCELED"
+  | "PAST_DUE"
+  | "INACTIVE"
+  | "TRIALING"
+  | "INCOMPLETE"
+  | "INCOMPLETE_EXPIRED"
+  | "UNPAID"
+  | "PAUSED";
+
+export type ProvisioningStatus = "PENDING" | "IN_PROGRESS" | "COMPLETED" | "FAILED";
+
+export type StrictnessLevel = "LENIENT" | "STANDARD" | "STRICT";
+
+const SUBSCRIPTION_STATUS_SET = new Set<SubscriptionStatus>([
+  "ACTIVE",
+  "CANCELED",
+  "PAST_DUE",
+  "INACTIVE",
+  "TRIALING",
+  "INCOMPLETE",
+  "INCOMPLETE_EXPIRED",
+  "UNPAID",
+  "PAUSED",
+]);
+
+const PROVISIONING_STATUS_SET = new Set<ProvisioningStatus>([
+  "PENDING",
+  "IN_PROGRESS",
+  "COMPLETED",
+  "FAILED",
+]);
+
+const STRICTNESS_LEVEL_SET = new Set<StrictnessLevel>(["LENIENT", "STANDARD", "STRICT"]);
+
+function normalizeEnumKey(value: NullableString): string {
+  if (!value) return "";
+  return value.trim().toUpperCase().replace(/[\s-]+/g, "_");
+}
+
+function toValidDate(value: NullableDateValue): Date | null {
+  if (!value) return null;
+  const parsed = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(parsed.getTime()) ? null : parsed;
+}
+
+export function normalizeServerPlan(value: NullableString): ServerPlan {
+  return normalizeEnumKey(value) === "PREMIUM" ? "PREMIUM" : "FREE";
+}
+
+export function normalizeSubscriptionStatus(value: NullableString): SubscriptionStatus {
+  const normalized = normalizeEnumKey(value);
+  return SUBSCRIPTION_STATUS_SET.has(normalized as SubscriptionStatus)
+    ? (normalized as SubscriptionStatus)
+    : "INACTIVE";
+}
+
+export function normalizeProvisioningStatus(value: NullableString): ProvisioningStatus {
+  const normalized = normalizeEnumKey(value);
+  return PROVISIONING_STATUS_SET.has(normalized as ProvisioningStatus)
+    ? (normalized as ProvisioningStatus)
+    : "PENDING";
+}
+
+export function normalizeStrictnessLevel(value: NullableString): StrictnessLevel {
+  const normalized = normalizeEnumKey(value);
+  return STRICTNESS_LEVEL_SET.has(normalized as StrictnessLevel)
+    ? (normalized as StrictnessLevel)
+    : "STANDARD";
+}
+
+export function formatStrictnessLabel(value: NullableString): string {
+  const strictness = normalizeStrictnessLevel(value);
+  switch (strictness) {
+    case "LENIENT":
+      return "Lenient";
+    case "STRICT":
+      return "Strict";
+    default:
+      return "Standard";
+  }
+}
+
+export function formatSubscriptionStatusLabel(value: NullableString): string {
+  const status = normalizeSubscriptionStatus(value);
+  switch (status) {
+    case "ACTIVE":
+      return "Active";
+    case "TRIALING":
+      return "Trial";
+    case "PAST_DUE":
+      return "Past Due";
+    case "CANCELED":
+      return "Canceled";
+    case "INCOMPLETE_EXPIRED":
+      return "Incomplete Expired";
+    default:
+      return status.replace(/_/g, " ").toLowerCase().replace(/\b\w/g, (c) => c.toUpperCase());
+  }
+}
+
+export function hasPremiumAccess(params: {
+  plan: NullableString;
+  subscriptionStatus: NullableString;
+  currentPeriodEnd?: NullableDateValue;
+}): boolean {
+  const plan = normalizeServerPlan(params.plan);
+  if (plan !== "PREMIUM") return false;
+
+  const status = normalizeSubscriptionStatus(params.subscriptionStatus);
+  const currentPeriodEnd = toValidDate(params.currentPeriodEnd);
+  const hasFuturePeriod = currentPeriodEnd ? currentPeriodEnd.getTime() > Date.now() : false;
+
+  if (status === "CANCELED") {
+    return hasFuturePeriod;
+  }
+
+  if (status === "PAST_DUE" || status === "UNPAID" || status === "INCOMPLETE") {
+    return hasFuturePeriod;
+  }
+
+  if (status === "INACTIVE" || status === "INCOMPLETE_EXPIRED" || status === "PAUSED") {
+    return false;
+  }
+
+  return true;
+}
diff --git a/client/src/lib/queryClient.ts b/client/src/lib/queryClient.ts
index d81572c..2e61ba0 100644
--- a/client/src/lib/queryClient.ts
+++ b/client/src/lib/queryClient.ts
@@ -1,6 +1,15 @@
 import { QueryClient, QueryFunction } from "@tanstack/react-query";
 import { getApiUrl, getCurrentDomain } from "./api";
 
+function resolveCredentials(url: string, credentials?: RequestCredentials): RequestCredentials {
+  if (credentials) {
+    return credentials;
+  }
+
+  const normalizedPath = url.startsWith("/") ? url : `/${url}`;
+  return normalizedPath.startsWith("/v1/public/") ? "omit" : "include";
+}
+
 async function throwIfResNotOk(res: Response) {
   if (!res.ok) {
     const text = (await res.text()) || res.statusText;
@@ -22,7 +31,7 @@ export async function apiRequest(
       "X-Server-Domain": getCurrentDomain(),
     },
     body: data ? JSON.stringify(data) : undefined,
-    credentials: "include",
+    credentials: resolveCredentials(url),
   });
 
   await throwIfResNotOk(res);
@@ -36,9 +45,10 @@ export const getQueryFn: <T>(options: {
   ({ on401: unauthorizedBehavior }) =>
   async ({ queryKey }) => {
     const fullUrl = getApiUrl(queryKey[0] as string);
+    const url = queryKey[0] as string;
 
     const res = await fetch(fullUrl, {
-      credentials: "include",
+      credentials: resolveCredentials(url),
       headers: {
         "X-Server-Domain": getCurrentDomain(),
       },
diff --git a/client/src/pages/AcceptInvitationPage.tsx b/client/src/pages/AcceptInvitationPage.tsx
index 2d91b37..288845b 100644
--- a/client/src/pages/AcceptInvitationPage.tsx
+++ b/client/src/pages/AcceptInvitationPage.tsx
@@ -35,10 +35,11 @@ const AcceptInvitationPage = () => {
     const verifyToken = async () => {
       try {
         const { getApiUrl, getCurrentDomain } = await import('@/lib/api');
-        const response = await fetch(getApiUrl(`/v1/public/staff/invitations/accept?token=${token}`), {
-          method: 'GET',
+        const response = await fetch(getApiUrl('/v1/public/staff/invitations/accept'), {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', 'X-Server-Domain': getCurrentDomain() },
           credentials: 'include',
-          headers: { 'X-Server-Domain': getCurrentDomain() }
+          body: JSON.stringify({ token })
         });
         if (response.ok) {
           setStatus('Invitation accepted! Redirecting...');
diff --git a/client/src/pages/ArticleDetailPage.tsx b/client/src/pages/ArticleDetailPage.tsx
index 0cf2d76..d371ce3 100644
--- a/client/src/pages/ArticleDetailPage.tsx
+++ b/client/src/pages/ArticleDetailPage.tsx
@@ -15,8 +15,8 @@ interface ArticleDetail {
     name: string;
     slug: string;
   };
-  created_at: string;
-  updated_at: string;
+  createdAt: string;
+  updatedAt: string;
 }
 
 const ArticleDetailPage: React.FC = () => {
@@ -83,7 +83,7 @@ const ArticleDetailPage: React.FC = () => {
         <article className="prose lg:prose-xl max-w-none bg-card p-6 rounded-lg shadow prose-headings:text-foreground prose-p:text-foreground prose-strong:text-foreground prose-em:text-foreground prose-li:text-foreground prose-blockquote:text-foreground prose-code:text-foreground prose-pre:bg-muted prose-pre:text-foreground dark:prose-invert">
           <h1 className="text-3xl font-bold mb-4 text-foreground">{article.title}</h1>
           <div className="text-sm text-muted-foreground mb-4">
-            <span>Last updated: {new Date(article.updated_at).toLocaleDateString()}</span>
+            <span>Last updated: {new Date(article.updatedAt).toLocaleDateString()}</span>
           </div>
           <ReactMarkdown>{article.content}</ReactMarkdown>
         </article>
@@ -92,4 +92,4 @@ const ArticleDetailPage: React.FC = () => {
   );
 };
 
-export default ArticleDetailPage;
\ No newline at end of file
+export default ArticleDetailPage;
diff --git a/client/src/pages/HomePage.tsx b/client/src/pages/HomePage.tsx
index 42ff6c0..5794afc 100644
--- a/client/src/pages/HomePage.tsx
+++ b/client/src/pages/HomePage.tsx
@@ -47,11 +47,11 @@ interface HomepageCard {
   title: string;
   description: string;
   icon: string;
-  icon_color?: string;
-  action_type: 'url' | 'category_dropdown';
-  action_url?: string;
-  action_button_text?: string;
-  background_color?: string;
+  iconColor?: string;
+  actionType: 'url' | 'category_dropdown';
+  actionUrl?: string;
+  actionButtonText?: string;
+  backgroundColor?: string;
   ordinal: number;
   category?: {
     id: string;
@@ -170,9 +170,9 @@ const HomePage: React.FC = () => {
   const renderHomepageCard = (card: HomepageCard, index: number) => {
     const IconComponent = getIconComponent(card.icon);
     const isExpanded = expandedCards.has(card.id);
-    const iconColor = card.icon_color || '#3b82f6'; // Default to blue if no color specified
+    const iconColor = card.iconColor || '#3b82f6'; // Default to blue if no color specified
 
-    if (card.action_type === 'category_dropdown' && card.category) {
+    if (card.actionType === 'category_dropdown' && card.category) {
       return (
         <Card key={card.id} className="group hover:shadow-md transition-all duration-300 hover:-translate-y-1 h-72">
           <Collapsible open={isExpanded} onOpenChange={() => toggleExpanded(card.id)}>
@@ -197,8 +197,8 @@ const HomePage: React.FC = () => {
       );
     } else {
       // URL action type
-      const buttonText = card.action_button_text || 'Learn More';
-      const url = card.action_url || '#';
+      const buttonText = card.actionButtonText || 'Learn More';
+      const url = card.actionUrl || '#';
       
       return (
         <Card key={card.id} className="group hover:shadow-md transition-all duration-300 hover:-translate-y-1 h-64 sm:h-72">
@@ -439,10 +439,10 @@ const HomePage: React.FC = () => {
             <div className="mt-6 space-y-4">
               {homepageCards.length > 0 ? (
                 homepageCards
-                  .filter(card => card.action_type === 'category_dropdown' && card.category && expandedCards.has(card.id))
+                  .filter(card => card.actionType === 'category_dropdown' && card.category && expandedCards.has(card.id))
                   .map(card => {
                     const IconComponent = getIconComponent(card.icon);
-                    const iconColor = card.icon_color || '#3b82f6';
+                    const iconColor = card.iconColor || '#3b82f6';
                     
                     return (
                       <Card key={`expanded-${card.id}`} className="bg-muted/20 border-2 border-dashed border-primary/20">
@@ -486,4 +486,4 @@ const HomePage: React.FC = () => {
   );
 };
 
-export default HomePage;
\ No newline at end of file
+export default HomePage;
diff --git a/client/src/pages/SetupPage.tsx b/client/src/pages/SetupPage.tsx
index 8e4ef60..34f3976 100644
--- a/client/src/pages/SetupPage.tsx
+++ b/client/src/pages/SetupPage.tsx
@@ -4,6 +4,7 @@ import { CheckCircle, XCircle, Loader2, Mail, Server, LogIn } from 'lucide-react
 import { Button } from '@modl-gg/shared-web/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@modl-gg/shared-web/components/ui/card';
 import { getApiUrl, getCurrentDomain } from '@/lib/api';
+import { normalizeProvisioningStatus } from '@/lib/backend-enums';
 
 type SetupState = 'verifying' | 'verified' | 'provisioning' | 'completing' | 'complete' | 'error';
 
@@ -117,8 +118,9 @@ export default function SetupPage() {
       }
 
       setServerName(status.serverName);
+      const provisioningStatus = normalizeProvisioningStatus(status.provisioningStatus);
 
-      if (status.provisioningStatus === 'completed') {
+      if (provisioningStatus === 'COMPLETED') {
         setState('completing');
         setMessage('Setup complete! Logging you in...');
 
@@ -134,7 +136,7 @@ export default function SetupPage() {
           setMessage(loginResult.message || 'Auto-login failed. Please sign in manually.');
           setState('error');
         }
-      } else if (status.provisioningStatus === 'failed') {
+      } else if (provisioningStatus === 'FAILED') {
         setMessage('Server setup failed. Please contact support.');
         setState('error');
       } else {
diff --git a/client/src/pages/api-docs.tsx b/client/src/pages/api-docs.tsx
index 4313ab5..c003fdd 100644
--- a/client/src/pages/api-docs.tsx
+++ b/client/src/pages/api-docs.tsx
@@ -226,11 +226,11 @@ const ApiDocs = () => {
           responseType: 'GeneralSettings'
         },
         {
-          method: 'PUT',
+          method: 'PATCH',
           path: '/v1/panel/settings/general',
-          description: 'Update general settings',
-          requestType: 'GeneralSettings',
-          responseType: 'GeneralSettings'
+          description: 'Patch general settings (partial fields + expectedVersion)',
+          requestType: 'PatchGeneralSettingsRequest',
+          responseType: 'SettingsEnvelope<GeneralSettings>'
         },
         {
           method: 'GET',
@@ -245,7 +245,7 @@ const ApiDocs = () => {
           responseType: 'AIModerationSettings'
         },
         {
-          method: 'PUT',
+          method: 'PATCH',
           path: '/v1/panel/settings/ai-moderation',
           description: 'Update AI moderation settings',
           requestType: 'AIModerationSettings',
@@ -258,12 +258,25 @@ const ApiDocs = () => {
           responseType: 'WebhookSettings'
         },
         {
-          method: 'PUT',
+          method: 'PATCH',
           path: '/v1/panel/settings/webhooks',
           description: 'Update webhook settings',
           requestType: 'WebhookSettings',
           responseType: 'WebhookSettings'
         },
+        {
+          method: 'GET',
+          path: '/v1/panel/settings/ticket-labels',
+          description: 'Retrieve ticket label settings',
+          responseType: 'SettingsEnvelope<TicketLabelSettings>'
+        },
+        {
+          method: 'PATCH',
+          path: '/v1/panel/settings/ticket-labels',
+          description: 'Patch ticket labels (labels + expectedVersion)',
+          requestType: 'PatchTicketLabelSettingsRequest',
+          responseType: 'SettingsEnvelope<TicketLabelSettings>'
+        },
         {
           method: 'POST',
           path: '/v1/panel/settings/webhooks/test',
@@ -339,4 +352,4 @@ const ApiDocs = () => {
   );
 };
 
-export default ApiDocs;
\ No newline at end of file
+export default ApiDocs;
diff --git a/client/src/pages/appeals.tsx b/client/src/pages/appeals.tsx
index dc9aed5..2c2eb7b 100644
--- a/client/src/pages/appeals.tsx
+++ b/client/src/pages/appeals.tsx
@@ -938,7 +938,7 @@ const AppealsPage = () => {
                         uploadType="appeal"
                         onUploadComplete={handleFileUpload}
                         metadata={{
-                          appealId: appealForm.getValues('banId') || 'unknown',
+                          entityId: 'new',
                           fieldId: field.id
                         }}
                         variant="compact"
@@ -1323,7 +1323,7 @@ const AppealsPage = () => {
                                   }
                                 }}
                                 metadata={{
-                                  appealId: appealInfo?.id || 'unknown',
+                                  appealId: appealInfo?.id || 'new',
                                   fieldId: 'reply'
                                 }}
                                 variant="button-only"
diff --git a/client/src/pages/audit.tsx b/client/src/pages/audit.tsx
index 1ce4690..272e239 100644
--- a/client/src/pages/audit.tsx
+++ b/client/src/pages/audit.tsx
@@ -1206,7 +1206,7 @@ const StaffDetailModal = ({ staff, isOpen, onClose, initialPeriod = '30d' }: {
                             </td>
                             <td className="p-2">{ticket.subject || ticket.title || 'No subject'}</td>
                             <td className="p-2">
-                              <Badge variant={ticket.status === 'resolved' || ticket.status === 'Resolved' || ticket.status === 'closed' || ticket.status === 'Closed' ? 'outline' : 'secondary'}>
+                              <Badge variant={ticket.status === 'closed' || ticket.status === 'Closed' ? 'outline' : 'secondary'}>
                                 {ticket.status}
                               </Badge>
                             </td>
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 8332e90..51bc018 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -13,7 +13,7 @@ import {
   useRecentTickets,
   useRecentPunishments,
   useAssignedTicketUpdates,
-  useMarkSubscriptionUpdateAsRead
+  useMarkTicketAsRead
 } from '@/hooks/use-data';
 import { useToast } from '@modl-gg/shared-web/hooks/use-toast';
 import PageContainer from '@/components/layout/PageContainer';
@@ -34,7 +34,7 @@ const Home = () => {
   const { data: assignedUpdatesData, isLoading: isLoadingUpdates, refetch: refetchUpdates } = useAssignedTicketUpdates(10);
 
   // Mutations for updates management
-  const markAsReadMutation = useMarkSubscriptionUpdateAsRead();
+  const markTicketAsReadMutation = useMarkTicketAsRead();
 
   const handleRefreshData = async () => {
     setIsSpinning(true);
@@ -63,8 +63,8 @@ const Home = () => {
     }
   };
 
-  const handleMarkAsRead = async (updateId: string) => {
-    return markAsReadMutation.mutateAsync(updateId);
+  const handleDismissTicket = async (ticketId: string) => {
+    return markTicketAsReadMutation.mutateAsync(ticketId);
   };
 
   return (
@@ -98,7 +98,7 @@ const Home = () => {
         <AssignedTicketUpdatesSection
           updates={assignedUpdatesData || []}
           loading={isLoadingUpdates}
-          onMarkAsRead={handleMarkAsRead}
+          onDismissTicket={handleDismissTicket}
         />
 
         {/* Dashboard Grid */}
diff --git a/client/src/pages/lookup.tsx b/client/src/pages/lookup.tsx
index a76308d..ea4cdf0 100644
--- a/client/src/pages/lookup.tsx
+++ b/client/src/pages/lookup.tsx
@@ -90,8 +90,9 @@ const PlayerLookupWindow = ({
           : 'None';
         
         // Format IP
-        const lastIP = player.ipList && player.ipList.length > 0 
-          ? player.ipList[player.ipList.length - 1].ipAddress.replace(/\d+$/, 'x.x') 
+        const ipAddresses = Array.isArray(player.ipAddresses) ? player.ipAddresses : [];
+        const lastIP = ipAddresses.length > 0 && ipAddresses[ipAddresses.length - 1]?.ipAddress
+          ? ipAddresses[ipAddresses.length - 1].ipAddress.replace(/\d+$/, 'x.x')
           : 'Unknown';
           
         // Determine player status
@@ -113,12 +114,14 @@ const PlayerLookupWindow = ({
         // Add punishments to warnings
         if (player.punishments) {
           player.punishments.forEach((punishment: any) => {
+            const issuedAt = punishment.issued || punishment.date;
+            const expiresAt = punishment.expires || punishment.expiresAt;
             warnings.push({
               type: punishment.type,
               reason: punishment.reason,
-              date: new Date(punishment.date).toLocaleDateString(),
-              by: punishment.issuerName + (punishment.expires ? ` (until ${new Date(punishment.expires).toLocaleDateString()})` : ''),
-              originalDate: punishment.date // Store original date for sorting
+              date: issuedAt ? new Date(issuedAt).toLocaleDateString() : 'Unknown',
+              by: punishment.issuerName + (expiresAt ? ` (until ${new Date(expiresAt).toLocaleDateString()})` : ''),
+              originalDate: issuedAt // Store original date for sorting
             });
           });
         }
@@ -572,4 +575,4 @@ const Lookup = () => {
   );
 };
 
-export default Lookup;
\ No newline at end of file
+export default Lookup;
diff --git a/client/src/pages/player-detail-page.tsx b/client/src/pages/player-detail-page.tsx
index 0f255a9..e106b6d 100644
--- a/client/src/pages/player-detail-page.tsx
+++ b/client/src/pages/player-detail-page.tsx
@@ -2476,9 +2476,8 @@ const PlayerDetailPage = () => {
                       <div className="flex-1">
                         <div className="flex items-center gap-2 mb-1">
                           <Badge variant="outline" className={`text-xs ${
-                            ticket.status === 'open' ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 border-green-300 dark:border-green-700' :
-                            ticket.status === 'in_progress' ? 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 border-blue-300 dark:border-blue-700' :
-                            ticket.status === 'resolved' ? 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-gray-300 dark:border-gray-600' :
+                            ticket.status === 'Open' ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 border-green-300 dark:border-green-700' :
+                            ticket.status === 'Closed' ? 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-gray-300 dark:border-gray-600' :
                             'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 border-red-300 dark:border-red-700'
                           }`}>
                             {ticket.status?.replace('_', ' ').toUpperCase() || 'UNKNOWN'}
@@ -2494,8 +2493,13 @@ const PlayerDetailPage = () => {
                           </p>
                         </div>
                         <div className="text-xs text-muted-foreground mt-2">
-                          Created: {ticket.createdAt ? formatDateWithTime(ticket.createdAt) : 'Unknown'} 
-                          {ticket.assignedTo && ` • Assigned to: ${ticket.assignedTo}`}
+                          Created: {ticket.createdAt ? formatDateWithTime(ticket.createdAt) : 'Unknown'}
+                          {(() => {
+                            const assigneeDisplay = Array.isArray(ticket.assignedTo)
+                              ? ticket.assignedTo.join(', ')
+                              : ticket.assignedTo;
+                            return assigneeDisplay ? ` • Assigned to: ${assigneeDisplay}` : '';
+                          })()}
                         </div>
                       </div>
                       <div className="ml-2">
@@ -2597,4 +2601,4 @@ const PlayerDetailPage = () => {
   );
 };
 
-export default PlayerDetailPage;
\ No newline at end of file
+export default PlayerDetailPage;
diff --git a/client/src/pages/player-ticket.tsx b/client/src/pages/player-ticket.tsx
index e40cd53..4f2ce11 100644
--- a/client/src/pages/player-ticket.tsx
+++ b/client/src/pages/player-ticket.tsx
@@ -35,6 +35,7 @@ import MarkdownRenderer from '@/components/ui/markdown-renderer';
 import MarkdownHelp from '@/components/ui/markdown-help';
 import { formatDate } from '@/utils/date-utils';
 import { getCreatorIdentifier, getUnverifiedExplanation, shouldShowUnverifiedBadge } from '@/utils/creator-verification';
+import { useMediaUpload } from '@/hooks/use-media-upload';
 
 export interface TicketMessage {
   id: string;
@@ -189,7 +190,9 @@ const PlayerTicket = () => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [formSubject, setFormSubject] = useState('');
   const [formData, setFormData] = useState<Record<string, string>>({});
+  const [formPendingFiles, setFormPendingFiles] = useState<Record<string, File[]>>({});
   const [replyAttachments, setReplyAttachments] = useState<TicketAttachment[]>([]);
+  const { uploadMedia } = useMediaUpload();
   
   // Use React Query to fetch ticket data
   const { data: ticketData, isLoading, isError } = useTicket(id || '');
@@ -274,7 +277,7 @@ const PlayerTicket = () => {
         id: ticketData.id || ticketData._id,
         subject: ticketData.subject || 'No Subject',
         status: mappedStatus as 'Unfinished' | 'Open' | 'Closed',
-        reportedBy: ticketData.creator || ticketData.reportedBy || 'Unknown',
+        reportedBy: ticketData.creatorName || ticketData.reportedBy || 'Unknown',
         date: validDate,
         category: ticketData.category || 'Support',
         // Use category if it's a more specific type, otherwise use type. Normalize to lowercase.
@@ -286,8 +289,8 @@ const PlayerTicket = () => {
       });
       
       // If creator is set, use it as the default playerName
-      if ((ticketData.creator || ticketData.reportedBy) && !playerName) {
-        const name = ticketData.creator || ticketData.reportedBy;
+      if ((ticketData.creatorName || ticketData.reportedBy) && !playerName) {
+        const name = ticketData.creatorName || ticketData.reportedBy;
         setPlayerName(name);
         localStorage.setItem('playerName', name);
       }
@@ -646,6 +649,10 @@ const PlayerTicket = () => {
       for (const [fieldId, value] of Object.entries(formData)) {
         // Find the field config to get its label
         const fieldConfig = allFormFields.find((f: FormField) => f.id === fieldId);
+        if (fieldConfig?.type === 'file_upload') {
+          // File uploads are transmitted via `attachments` for proper media preview rendering.
+          continue;
+        }
         if (fieldConfig && fieldConfig.label) {
           labeledFormData[fieldConfig.label] = value;
         } else {
@@ -654,12 +661,63 @@ const PlayerTicket = () => {
         }
       }
 
+      const visibleFileUploadFields = allFormFields.filter((field: FormField) => {
+        if (field.type !== 'file_upload') return false;
+        return !field.sectionId || visibleSections.has(field.sectionId);
+      });
+      const visibleFileFieldIds = new Set(visibleFileUploadFields.map((field: FormField) => field.id));
+
+      let hiddenExcludedFiles = 0;
+      for (const [fieldId, files] of Object.entries(formPendingFiles)) {
+        if (files.length > 0 && !visibleFileFieldIds.has(fieldId)) {
+          hiddenExcludedFiles += files.length;
+        }
+      }
+
+      const attachments: Array<{
+        url: string;
+        key: string;
+        fileName: string;
+        fileType: string;
+        fileSize: number;
+        fieldId: string;
+        fieldLabel?: string;
+      }> = [];
+
+      for (const field of visibleFileUploadFields) {
+        const files = formPendingFiles[field.id] || [];
+        for (const file of files) {
+          const result = await uploadMedia(file, 'ticket', {
+            ticketId: ticketDetails.id,
+            ticketType: ticketDetails.type,
+            fieldId: field.id
+          });
+          attachments.push({
+            url: result.url,
+            key: result.key,
+            fileName: file.name,
+            fileType: file.type || 'application/octet-stream',
+            fileSize: file.size,
+            fieldId: field.id,
+            fieldLabel: field.label
+          });
+        }
+      }
+
+      if (hiddenExcludedFiles > 0) {
+        toast({
+          title: "Hidden Attachments Excluded",
+          description: `${hiddenExcludedFiles} hidden attachment${hiddenExcludedFiles > 1 ? 's were' : ' was'} not submitted.`,
+        });
+      }
+
       // Submit the form to complete the ticket using the new public endpoint
       await submitFormMutation.mutateAsync({
         id: ticketDetails.id,
         formData: {
           subject: finalSubject,
           formData: labeledFormData,
+          attachments,
           creatorIdentifier: getCreatorIdentifier(ticketDetails.id) // Include creator identifier for verification
         }
       });
@@ -770,7 +828,7 @@ const PlayerTicket = () => {
     };
     
     // Adjust order of existing fields to make room for email field
-    const adjustedFields = fields.map(field => ({
+    const adjustedFields = fields.map((field: FormField) => ({
       ...field,
       order: field.order >= 1 ? field.order + 1 : field.order
     }));
@@ -1017,9 +1075,15 @@ const PlayerTicket = () => {
           <div className="space-y-2">
             <MediaUpload
               uploadType="ticket"
-              onUploadComplete={(result) => {
-                // Store the uploaded file URL in form data
-                handleFormFieldChange(field.id, result.url);
+              autoUpload={false}
+              onFilesSelected={(files) => {
+                const selected = files[0];
+                if (!selected) return;
+                handleFormFieldChange(field.id, selected.name);
+                setFormPendingFiles((prev) => ({
+                  ...prev,
+                  [field.id]: [selected]
+                }));
               }}
               metadata={{
                 ticketId: ticketDetails.id,
@@ -1029,11 +1093,11 @@ const PlayerTicket = () => {
               variant="compact"
               maxFiles={1}
             />
-            {formData[field.id] && (
+            {formPendingFiles[field.id]?.length ? (
               <div className="text-sm text-muted-foreground">
-                File uploaded: {formData[field.id].split('/').pop()}
+                Selected file: {formPendingFiles[field.id][0].name} (uploads on submit)
               </div>
-            )}
+            ) : null}
           </div>
         ) : (
           <Input
diff --git a/client/src/pages/settings.tsx b/client/src/pages/settings.tsx
index 1cd7be5..acfd972 100644
--- a/client/src/pages/settings.tsx
+++ b/client/src/pages/settings.tsx
@@ -18,7 +18,7 @@ import { Badge } from '@modl-gg/shared-web/components/ui/badge';
 import { Checkbox } from '@modl-gg/shared-web/components/ui/checkbox';
 import { useToast } from '@modl-gg/shared-web/hooks/use-toast';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@modl-gg/shared-web/components/ui/select';
-import { useSettings, useBillingStatus, useUsageData, usePunishmentTypes, useTicketFormSettings, useQuickResponses, useStatusThresholds } from '@/hooks/use-data';
+import { useSettings, useBillingStatus, useUsageData, usePunishmentTypes, useTicketFormSettings, useQuickResponses, useStatusThresholds, useTicketLabelSettings } from '@/hooks/use-data';
 import PageContainer from '@/components/layout/PageContainer'
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@modl-gg/shared-web/components/ui/dialog";
 import { queryClient } from '@/lib/queryClient';
@@ -27,7 +27,7 @@ import { useLocation } from "wouter"; // For wouter navigation
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@modl-gg/shared-web/components/ui/tooltip";
 import { useAuth } from '@/hooks/use-auth';
 import { useIsMobile } from '@/hooks/use-mobile';
-import { usePermissions } from '@/hooks/use-permissions';
+import { PERMISSIONS, usePermissions } from '@/hooks/use-permissions';
 import StaffManagementPanel from '@/components/settings/StaffManagementPanel';
 import StaffRolesCard from '@/components/settings/StaffRolesCard';
 import BillingSettings from '@/components/settings/BillingSettings';
@@ -42,6 +42,12 @@ import WebhookSettings from '@/components/settings/WebhookSettings';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { QuickResponsesConfiguration, defaultQuickResponsesConfig } from '@/types/quickResponses';
+import {
+  formatSubscriptionStatusLabel,
+  hasPremiumAccess,
+  normalizeStrictnessLevel,
+  normalizeSubscriptionStatus,
+} from '@/lib/backend-enums';
 
 // Type definitions for appeal form fields
 interface AppealFormField {
@@ -162,10 +168,12 @@ interface StatusThresholds {
   gameplay: {
     medium: number;  // Points threshold for medium offender status
     habitual: number; // Points threshold for habitual offender status
+    pointExpiryMonths: number; // Months after punishment expiry that points still count
   };
   social: {
     medium: number;  // Points threshold for medium offender status
     habitual: number; // Points threshold for habitual offender status
+    pointExpiryMonths: number; // Months after punishment expiry that points still count
   };
 }
 
@@ -186,7 +194,7 @@ interface IAIPunishmentConfig {
 interface IAIModerationSettings {
   enableAIReview: boolean;
   enableAutomatedActions: boolean;
-  strictnessLevel: 'lenient' | 'standard' | 'strict';
+  strictnessLevel: 'LENIENT' | 'STANDARD' | 'STRICT';
   aiPunishmentConfigs: Record<string, IAIPunishmentConfig>;
 }
 
@@ -751,7 +759,11 @@ const Settings = () => {
   const { } = useSidebar();
   const [location, navigateWouter] = useLocation();
   const { user, logout } = useAuth();
-  const { canAccessSettingsTab, getAccessibleSettingsTabs } = usePermissions();
+  const { canAccessSettingsTab, hasPermission } = usePermissions();
+  const canViewAdminSettings = hasPermission(PERMISSIONS.ADMIN_SETTINGS_VIEW);
+  const canViewAllTickets = hasPermission(PERMISSIONS.TICKET_VIEW_ALL);
+  const canManageTicketTags = hasPermission(PERMISSIONS.TICKET_MANAGE_TAGS);
+  const canAccessGeneralSettings = canAccessSettingsTab('general');
   const isMobile = useIsMobile();
   const mainContentClass = "ml-[32px] pl-8";
   const [expandedCategory, setExpandedCategory] = useState<string | null>(null);
@@ -760,14 +772,11 @@ const Settings = () => {
 
   const isPremiumUser = () => {
     if (!billingStatusTop) return false;
-    const { subscriptionStatus, currentPeriodEnd, plan } = billingStatusTop;
-    if (subscriptionStatus === 'canceled') {
-      if (!currentPeriodEnd) return false;
-      return new Date(currentPeriodEnd) > new Date() && plan === 'premium';
-    }
-    return (['active', 'trialing'].includes(subscriptionStatus) && plan === 'premium') ||
-           (['past_due', 'unpaid', 'incomplete'].includes(subscriptionStatus) && plan === 'premium' &&
-            currentPeriodEnd && new Date(currentPeriodEnd) > new Date());
+    return hasPremiumAccess({
+      plan: billingStatusTop.plan,
+      subscriptionStatus: billingStatusTop.subscriptionStatus,
+      currentPeriodEnd: billingStatusTop.currentPeriodEnd,
+    });
   };
 
   // Update URL when category changes
@@ -814,15 +823,21 @@ const Settings = () => {
         setExpandedCategory(mappedCategory);
         if (urlSubCategory) {
           const subCat = urlSubCategory.split(',')[0];
+          const canAccessTicketSubCategory = mappedCategory !== 'tickets'
+            || (
+              (['label-management', 'quick-responses', 'ticket-forms', 'ai-moderation'].includes(subCat) && canViewAdminSettings)
+            );
           if ((subCat === 'billing' || subCat === 'server-config') && user?.role !== 'Super Admin') {
             // Non-super-admins cannot access billing or server config
+          } else if (!canAccessTicketSubCategory) {
+            // No permission for this tickets sub-section
           } else {
             setExpandedSubCategory(subCat);
           }
         }
       }
     }
-  }, [user, canAccessSettingsTab]);
+  }, [user, canAccessSettingsTab, canManageTicketTags, canViewAllTickets, canViewAdminSettings]);
 
   // Handle sub-category selection - only one can be selected at a time
   const handleSubCategorySelect = (category: string, subCategory: string) => {
@@ -848,6 +863,49 @@ const Settings = () => {
   const pendingChangesRef = useRef(false);
   const initialLoadCompletedRef = useRef(false);
   const dirtyCategoriesRef = useRef<Set<string>>(new Set());
+
+  const [generalVersion, setGeneralVersion] = useState(0);
+  const [quickResponsesVersion, setQuickResponsesVersion] = useState(0);
+  const [ticketFormsVersion, setTicketFormsVersion] = useState(0);
+  const [statusThresholdsVersion, setStatusThresholdsVersion] = useState(0);
+  const [ticketLabelsVersion, setTicketLabelsVersion] = useState(0);
+
+  const generalSnapshotRef = useRef({
+    serverDisplayName: '',
+    discordWebhookUrl: '',
+    homepageIconUrl: '',
+    panelIconUrl: '',
+  });
+  const quickResponsesSnapshotRef = useRef<QuickResponsesConfiguration>(defaultQuickResponsesConfig);
+  const ticketFormsSnapshotRef = useRef<TicketFormsConfiguration>({
+    bug: { fields: [], sections: [] },
+    support: { fields: [], sections: [] },
+    application: { fields: [], sections: [] }
+  });
+  const statusThresholdsSnapshotRef = useRef<StatusThresholds>({
+    gameplay: { medium: 5, habitual: 10, pointExpiryMonths: 24 },
+    social: { medium: 4, habitual: 8, pointExpiryMonths: 24 }
+  });
+  const ticketLabelsSnapshotRef = useRef<any[]>([]);
+
+  const hasDeepChanges = (current: any, snapshot: any): boolean => {
+    return JSON.stringify(current) !== JSON.stringify(snapshot);
+  };
+
+  const toSettingsEnvelope = <T,>(value: any): { data: T; _meta?: { version?: number; updatedAt?: string | null } } => {
+    if (value && typeof value === 'object' && 'data' in value) {
+      return value;
+    }
+    return { data: value as T, _meta: { version: 0, updatedAt: null } };
+  };
+
+  const applyServerSyncedState = (apply: () => void) => {
+    justLoadedFromServerRef.current = true;
+    apply();
+    setTimeout(() => {
+      justLoadedFromServerRef.current = false;
+    }, 100);
+  };
   
   // Refs to capture latest profile values for auto-save
   const profileUsernameRef = useRef('');
@@ -876,11 +934,13 @@ const Settings = () => {
   const [statusThresholdsState, setStatusThresholdsState] = useState<StatusThresholds>({
     gameplay: {
       medium: 5,  // 5+ points = medium offender
-      habitual: 10 // 10+ points = habitual offender
+      habitual: 10, // 10+ points = habitual offender
+      pointExpiryMonths: 24 // points count for 24 months after punishment expiry
     },
     social: {
       medium: 4,  // 4+ points = medium offender
-      habitual: 8  // 8+ points = habitual offender
+      habitual: 8,  // 8+ points = habitual offender
+      pointExpiryMonths: 24 // points count for 24 months after punishment expiry
     }
   });
   // Selected punishment for editing
@@ -1018,7 +1078,7 @@ const Settings = () => {
   const [aiModerationSettings, setAiModerationSettings] = useState<IAIModerationSettings>({
     enableAIReview: false,
     enableAutomatedActions: false,
-    strictnessLevel: 'standard',
+    strictnessLevel: 'STANDARD',
     aiPunishmentConfigs: {}
   });
   const [isLoadingAiSettings, setIsLoadingAiSettings] = useState(false);
@@ -1030,6 +1090,7 @@ const Settings = () => {
   const { data: punishmentTypesData, isLoading: isLoadingPunishmentTypes } = usePunishmentTypes();
   const { data: quickResponsesData, isLoading: isLoadingQuickResponses } = useQuickResponses();
   const { data: statusThresholdsData, isLoading: isLoadingStatusThresholds } = useStatusThresholds();
+  const { data: ticketLabelSettingsData, isLoading: isLoadingTicketLabels } = useTicketLabelSettings();
   const { data: billingStatus } = useBillingStatus();
   const { data: usageData } = useUsageData();
   const [currentEmail, setCurrentEmail] = useState('');
@@ -1037,70 +1098,20 @@ const Settings = () => {
   // Helper functions for enhanced summaries
   const getBillingSummary = () => {
     if (!billingStatus) return "Loading billing info...";
-    
-    // Use the same logic as BillingSettings.tsx getCurrentPlan() function
-    const getCurrentPlan = () => {
-      const { plan, subscriptionStatus, currentPeriodEnd } = billingStatus;
-      
-      // If plan is explicitly set to premium in the database, trust it
-      if (plan === 'premium') {
-        if (subscriptionStatus === 'canceled') {
-          if (!currentPeriodEnd) {
-            return 'Free';
-          }
-          const endDate = new Date(currentPeriodEnd);
-          const now = new Date();
-          if (endDate <= now) {
-            return 'Free';
-          }
-          return 'Premium';
-        }
-        return 'Premium';
-      }
-      
-      // For cancelled subscriptions, check if the period has ended
-      if (subscriptionStatus === 'canceled') {
-        if (!currentPeriodEnd) {
-          return 'Free'; // No end date means it's already expired
-        }
-        const endDate = new Date(currentPeriodEnd);
-        const now = new Date();
-        if (endDate <= now) {
-          return 'Free'; // Cancellation period has ended
-        }
-        return 'Premium'; // Still has access until end date
-      }
-      
-      // Active and trialing are clearly premium
-      if (['active', 'trialing'].includes(subscriptionStatus)) {
-        return 'Premium';
-      }
-      
-      // For payment issues (past_due, unpaid), check if still within period
-      if (['past_due', 'unpaid', 'incomplete'].includes(subscriptionStatus)) {
-        if (currentPeriodEnd) {
-          const endDate = new Date(currentPeriodEnd);
-          const now = new Date();
-          if (endDate > now) {
-            return 'Premium'; // Still within paid period despite payment issues
-          }
-        }
-      }
-      
-      return 'Free';
-    };
 
-    const plan = getCurrentPlan();
-    const status = billingStatus.subscriptionStatus || "active";
+    const plan = hasPremiumAccess({
+      plan: billingStatus.plan,
+      subscriptionStatus: billingStatus.subscriptionStatus,
+      currentPeriodEnd: billingStatus.currentPeriodEnd,
+    })
+      ? "Premium"
+      : "Free";
+    const status = normalizeSubscriptionStatus(billingStatus.subscriptionStatus);
     const nextBilling = billingStatus.currentPeriodEnd ? new Date(billingStatus.currentPeriodEnd).toLocaleDateString() : null;
-    
-    let statusBadge = "";
-    if (status === "active") statusBadge = "Active";
-    else if (status === "canceled") statusBadge = "Cancelled";
-    else if (status === "past_due") statusBadge = "Past Due";
-    else statusBadge = status;
-    
-    return nextBilling ? `${plan} Plan • ${statusBadge} • Next: ${nextBilling}` : `${plan} Plan • ${statusBadge}`;
+
+    const statusBadge = formatSubscriptionStatusLabel(status);
+
+    return nextBilling ? `${plan} Plan - ${statusBadge} - Next: ${nextBilling}` : `${plan} Plan - ${statusBadge}`;
   };
 
   const getUsageSummary = () => {
@@ -1160,7 +1171,7 @@ const Settings = () => {
     try {
       const csrfFetch = apiFetch;
       const response = await csrfFetch('/v1/panel/settings/webhooks', {
-        method: 'PUT',
+        method: 'PATCH',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(webhookSettings),
         credentials: 'include'
@@ -1170,7 +1181,7 @@ const Settings = () => {
         throw new Error('Failed to save webhook settings');
       }
 
-      queryClient.invalidateQueries({ queryKey: ['/v1/panel/settings/general'] });
+      queryClient.invalidateQueries({ queryKey: ['/v1/settings'] });
     } catch (error) {
       console.error('Error saving webhook settings:', error);
       throw error;
@@ -1230,10 +1241,10 @@ const Settings = () => {
 
   // Load API key on component mount (only for users with appropriate permissions)
   useEffect(() => {
-    if (user && canAccessSettingsTab('general')) {
+    if (user && canAccessGeneralSettings) {
       loadApiKey();
     }
-  }, [user?.role]); // Only depend on user role, not the function
+  }, [user, canAccessGeneralSettings]);
 
   // File upload functions
   const uploadIcon = async (file: File, iconType: 'homepage' | 'panel'): Promise<string | null> => {
@@ -1282,7 +1293,7 @@ const Settings = () => {
       setPanelIconUrl(uploadedUrl);
       
       // Refresh webhook settings to get updated avatar URL
-      queryClient.invalidateQueries({ queryKey: ['/v1/panel/settings/general'] });
+      queryClient.invalidateQueries({ queryKey: ['/v1/settings'] });
 
       toast({
         title: "Panel Icon Uploaded",
@@ -1461,6 +1472,7 @@ const Settings = () => {
         setAiModerationSettings(prev => ({
           ...prev,
           ...data,
+          strictnessLevel: normalizeStrictnessLevel(data.strictnessLevel),
           aiPunishmentConfigs: data.aiPunishmentConfigs || prev.aiPunishmentConfigs || {}
         }));
       } else {
@@ -1478,12 +1490,13 @@ const Settings = () => {
     try {
       const payload = {
         ...settings,
+        strictnessLevel: normalizeStrictnessLevel(settings.strictnessLevel),
         aiPunishmentConfigs: configs || settings.aiPunishmentConfigs
       };
       
       const csrfFetch = apiFetch;
       const response = await csrfFetch('/v1/panel/settings/ai-moderation', {
-        method: 'PUT',
+        method: 'PATCH',
         headers: {
           'Content-Type': 'application/json',
         },
@@ -1649,51 +1662,68 @@ const Settings = () => {
 
   // Load AI moderation settings on component mount (only for users with appropriate permissions)
   useEffect(() => {
-    if (user && canAccessSettingsTab('tags')) {
+    if (user && canViewAdminSettings) {
       loadAiModerationSettings();
       loadAvailablePunishmentTypes();
     }
-  }, [user?.role]); // Only depend on user role, not the function
+  }, [user, canViewAdminSettings]);
 
   // Auto-save AI moderation settings when they change
   useEffect(() => {
-    if (!isLoadingAiSettings && initialLoadCompletedRef.current && canAccessSettingsTab('tags')) {
+    if (!isLoadingAiSettings && initialLoadCompletedRef.current && canViewAdminSettings) {
       const saveTimeout = setTimeout(() => {
         saveAiModerationSettings(aiModerationSettings);
       }, 1000);
       return () => clearTimeout(saveTimeout);
     }
-  }, [aiModerationSettings, isLoadingAiSettings]); // Don't include canAccessSettingsTab in dependencies
+  }, [aiModerationSettings, isLoadingAiSettings, canViewAdminSettings]);
 
   // Auto-save AI punishment configs when they change
   useEffect(() => {
-    if (!isLoadingAiSettings && initialLoadCompletedRef.current && canAccessSettingsTab('tags') && aiModerationSettings?.aiPunishmentConfigs) {
+    if (!isLoadingAiSettings && initialLoadCompletedRef.current && canViewAdminSettings && aiModerationSettings?.aiPunishmentConfigs) {
       const saveTimeout = setTimeout(() => {
         saveAiModerationSettings(aiModerationSettings);
       }, 1000);
       return () => clearTimeout(saveTimeout);
     }
-  }, [aiModerationSettings?.aiPunishmentConfigs, aiModerationSettings, isLoadingAiSettings]); // Don't include canAccessSettingsTab in dependencies
+  }, [aiModerationSettings?.aiPunishmentConfigs, aiModerationSettings, isLoadingAiSettings, canViewAdminSettings]);
 
   // Define captureInitialSettings first, before it's used anywhere else
   const captureInitialSettings = useCallback(() => {
     const currentSettingsSnapshot = {
-      punishmentTypes: JSON.parse(JSON.stringify(punishmentTypes)), // Deep copy
-      statusThresholds: JSON.parse(JSON.stringify(statusThresholds)), // Deep copy
-      labels: JSON.parse(JSON.stringify(labels)), // Deep copy
-      bugReportTags: JSON.parse(JSON.stringify(bugReportTags)), // Deep copy
-      playerReportTags: JSON.parse(JSON.stringify(playerReportTags)), // Deep copy
-      appealTags: JSON.parse(JSON.stringify(appealTags)), // Deep copy
-      ticketForms: JSON.parse(JSON.stringify(ticketForms)), // Deep copy
-      mongodbUri,
-      has2FA,
-      hasPasskey,
+      punishmentTypes: JSON.parse(JSON.stringify(punishmentTypes)),
+      statusThresholds: JSON.parse(JSON.stringify(statusThresholds)),
+      labels: JSON.parse(JSON.stringify(labels)),
+      ticketForms: JSON.parse(JSON.stringify(ticketForms)),
+      quickResponses: JSON.parse(JSON.stringify(quickResponsesState)),
       serverDisplayName,
+      discordWebhookUrl,
       homepageIconUrl,
       panelIconUrl,
     };
     initialSettingsRef.current = currentSettingsSnapshot;
-  }, [punishmentTypes, statusThresholds, labels, bugReportTags, playerReportTags, appealTags, ticketForms, quickResponsesState, mongodbUri, has2FA, hasPasskey, serverDisplayName, homepageIconUrl, panelIconUrl]);
+
+    generalSnapshotRef.current = {
+      serverDisplayName,
+      discordWebhookUrl,
+      homepageIconUrl,
+      panelIconUrl,
+    };
+    quickResponsesSnapshotRef.current = JSON.parse(JSON.stringify(quickResponsesState));
+    ticketFormsSnapshotRef.current = JSON.parse(JSON.stringify(ticketForms));
+    statusThresholdsSnapshotRef.current = JSON.parse(JSON.stringify(statusThresholds));
+    ticketLabelsSnapshotRef.current = JSON.parse(JSON.stringify(labels));
+  }, [
+    punishmentTypes,
+    statusThresholds,
+    labels,
+    ticketForms,
+    quickResponsesState,
+    serverDisplayName,
+    discordWebhookUrl,
+    homepageIconUrl,
+    panelIconUrl
+  ]);
 
   // Helper to apply a settings object to all state variables without triggering auto-save
   const applySettingsObjectToState = useCallback((settingsObject: any) => {
@@ -1801,7 +1831,10 @@ const Settings = () => {
     if (settingsObject.aiModerationSettings) {
       const aiSettings = settingsObject.aiModerationSettings;
       const parsedAiSettings = typeof aiSettings === 'string' ? JSON.parse(aiSettings) : JSON.parse(JSON.stringify(aiSettings));
-      setAiModerationSettings(parsedAiSettings);
+      setAiModerationSettings({
+        ...parsedAiSettings,
+        strictnessLevel: normalizeStrictnessLevel(parsedAiSettings.strictnessLevel),
+      });
     }
 
     // After a short delay, reset the flag to allow auto-saving
@@ -1827,80 +1860,253 @@ const Settings = () => {
     try {
       const csrfFetch = apiFetch;
       let hasError = false;
+      const failedSections = new Set<string>();
+      const reloadGeneralSettings = async () => {
+        try {
+          const latestGeneralResponse = await csrfFetch('/v1/panel/settings/general');
+          if (!latestGeneralResponse.ok) {
+            return;
+          }
 
-      // Save general settings only if dirty
-      if (dirty.has('general')) {
-        const generalSettingsPayload = {
-          serverDisplayName,
-          discordWebhookUrl,
-          homepageIconUrl,
-          panelIconUrl,
-          labels,
-          bugReportTags,
-          playerReportTags,
-          appealTags,
-        };
+          const latestEnvelope = toSettingsEnvelope<any>(await latestGeneralResponse.json());
+          const latestGeneral = {
+            serverDisplayName: latestEnvelope?.data?.serverDisplayName ?? '',
+            discordWebhookUrl: latestEnvelope?.data?.discordWebhookUrl ?? '',
+            homepageIconUrl: latestEnvelope?.data?.homepageIconUrl ?? '',
+            panelIconUrl: latestEnvelope?.data?.panelIconUrl ?? '',
+          };
+
+          const latestVersion = Number(latestEnvelope?._meta?.version ?? 0);
+          setGeneralVersion(Number.isFinite(latestVersion) ? latestVersion : 0);
+          applyServerSyncedState(() => {
+            setServerDisplayName(latestGeneral.serverDisplayName);
+            setDiscordWebhookUrl(latestGeneral.discordWebhookUrl);
+            setHomepageIconUrl(latestGeneral.homepageIconUrl);
+            setPanelIconUrl(latestGeneral.panelIconUrl);
+          });
+          generalSnapshotRef.current = latestGeneral;
+        } catch (reloadError) {
+          console.error('Failed to reload latest general settings:', reloadError);
+        }
+      };
 
-        const response = await csrfFetch('/v1/panel/settings/general', {
-          method: 'PUT',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify(generalSettingsPayload)
+      const handleFailedSave = async (
+        response: Response,
+        sectionLabel: string,
+        queryKey: readonly unknown[],
+        sectionKey: string
+      ) => {
+        hasError = true;
+        const errorData = await response.json().catch(() => ({ error: 'Unknown error' }));
+        console.error(`${sectionLabel} save failed:`, response.status, errorData);
+
+        if (response.status === 409) {
+          toast({
+            title: "Update Conflict",
+            description: `Someone else changed ${sectionLabel}. Reloaded latest values.`,
+            variant: "destructive"
+          });
+          if (sectionKey === 'general') {
+            await reloadGeneralSettings();
+          }
+          queryClient.invalidateQueries({ queryKey });
+          return;
+        }
+
+        if (response.status === 403) {
+          toast({
+            title: "Permission Denied",
+            description: errorData.error || errorData.message || 'You do not have permission to modify these settings.',
+            variant: "destructive"
+          });
+          if (sectionKey === 'general') {
+            await reloadGeneralSettings();
+          }
+          queryClient.invalidateQueries({ queryKey });
+          return;
+        }
+
+        failedSections.add(sectionKey);
+
+        toast({
+          title: "Error",
+          description: `Failed to save ${sectionLabel}: ${errorData.error || response.statusText}`,
+          variant: "destructive"
         });
+      };
 
-        if (!response.ok) {
-          hasError = true;
-          const errorData = await response.json().catch(() => ({ error: 'Unknown error' }));
-          console.error('General settings save failed:', response.status, errorData);
+      if (dirty.has('general')) {
+        const snapshot = generalSnapshotRef.current;
+        const patch: any = { expectedVersion: generalVersion };
+        if (serverDisplayName !== snapshot.serverDisplayName) patch.serverDisplayName = serverDisplayName;
+        if (discordWebhookUrl !== snapshot.discordWebhookUrl) patch.discordWebhookUrl = discordWebhookUrl;
+        if (homepageIconUrl !== snapshot.homepageIconUrl) patch.homepageIconUrl = homepageIconUrl;
+        if (panelIconUrl !== snapshot.panelIconUrl) patch.panelIconUrl = panelIconUrl;
+
+        if (Object.keys(patch).length > 1) {
+          const response = await csrfFetch('/v1/panel/settings/general', {
+            method: 'PATCH',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(patch)
+          });
 
-          if (response.status === 403) {
-            toast({
-              title: "Permission Denied",
-              description: errorData.error || errorData.message || 'You do not have permission to modify these settings.',
-              variant: "destructive"
-            });
+          if (!response.ok) {
+            await handleFailedSave(response, 'general settings', ['/v1/settings'], 'general');
           } else {
-            toast({
-              title: "Error",
-              description: `Failed to save settings: ${errorData.error || response.statusText}`,
-              variant: "destructive"
+            const envelope = toSettingsEnvelope<any>(await response.json());
+            const canonicalGeneral = envelope?.data || {};
+            const nextVersion = Number(envelope?._meta?.version ?? generalVersion + 1);
+            setGeneralVersion(Number.isFinite(nextVersion) ? nextVersion : generalVersion + 1);
+
+            const nextGeneralSnapshot = {
+              serverDisplayName: canonicalGeneral.serverDisplayName ?? '',
+              discordWebhookUrl: canonicalGeneral.discordWebhookUrl ?? '',
+              homepageIconUrl: canonicalGeneral.homepageIconUrl ?? '',
+              panelIconUrl: canonicalGeneral.panelIconUrl ?? '',
+            };
+
+            applyServerSyncedState(() => {
+              setServerDisplayName(nextGeneralSnapshot.serverDisplayName);
+              setDiscordWebhookUrl(nextGeneralSnapshot.discordWebhookUrl);
+              setHomepageIconUrl(nextGeneralSnapshot.homepageIconUrl);
+              setPanelIconUrl(nextGeneralSnapshot.panelIconUrl);
             });
+
+            generalSnapshotRef.current = nextGeneralSnapshot;
           }
         }
       }
 
-      // Save quick responses only if dirty
       if (dirty.has('quick-responses')) {
-        await csrfFetch('/v1/panel/settings/quick-responses', {
-          method: 'PUT',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify(quickResponsesState)
-        });
+        const snapshot = quickResponsesSnapshotRef.current;
+        if (hasDeepChanges(quickResponsesState, snapshot)) {
+          const response = await csrfFetch('/v1/panel/settings/quick-responses', {
+            method: 'PATCH',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+              expectedVersion: quickResponsesVersion,
+              categories: quickResponsesState.categories
+            })
+          });
+
+          if (!response.ok) {
+            await handleFailedSave(response, 'quick responses', ['/v1/panel/settings/quick-responses'], 'quick-responses');
+          } else {
+            const envelope = toSettingsEnvelope<any>(await response.json());
+            const canonicalQuickResponses = envelope?.data?.categories
+              ? envelope.data
+              : defaultQuickResponsesConfig;
+            const nextVersion = Number(envelope?._meta?.version ?? quickResponsesVersion + 1);
+            setQuickResponsesVersion(Number.isFinite(nextVersion) ? nextVersion : quickResponsesVersion + 1);
+
+            applyServerSyncedState(() => {
+              setQuickResponsesState(JSON.parse(JSON.stringify(canonicalQuickResponses)));
+            });
+            quickResponsesSnapshotRef.current = JSON.parse(JSON.stringify(canonicalQuickResponses));
+          }
+        }
       }
 
-      // Save ticket forms only if dirty
       if (dirty.has('ticket-forms') && ticketForms) {
-        await csrfFetch('/v1/panel/settings/ticket-forms', {
-          method: 'PUT',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify(ticketForms)
-        });
+        const snapshot = ticketFormsSnapshotRef.current;
+        if (hasDeepChanges(ticketForms, snapshot)) {
+          const response = await csrfFetch('/v1/panel/settings/ticket-forms', {
+            method: 'PATCH',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+              expectedVersion: ticketFormsVersion,
+              settings: ticketForms
+            })
+          });
+
+          if (!response.ok) {
+            await handleFailedSave(response, 'ticket forms', ['/v1/panel/settings/ticket-forms'], 'ticket-forms');
+          } else {
+            const envelope = toSettingsEnvelope<any>(await response.json());
+            const canonicalTicketForms = envelope?.data || ticketForms;
+            const nextVersion = Number(envelope?._meta?.version ?? ticketFormsVersion + 1);
+            setTicketFormsVersion(Number.isFinite(nextVersion) ? nextVersion : ticketFormsVersion + 1);
+
+            applyServerSyncedState(() => {
+              setTicketFormsState(JSON.parse(JSON.stringify(canonicalTicketForms)));
+            });
+            ticketFormsSnapshotRef.current = JSON.parse(JSON.stringify(canonicalTicketForms));
+          }
+        }
       }
 
-      // Save status thresholds only if dirty
       if (dirty.has('status-thresholds')) {
-        await csrfFetch('/v1/panel/settings/status-thresholds', {
-          method: 'PUT',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify(statusThresholds)
-        });
+        const snapshot = statusThresholdsSnapshotRef.current;
+        if (hasDeepChanges(statusThresholds, snapshot)) {
+          const response = await csrfFetch('/v1/panel/settings/status-thresholds', {
+            method: 'PATCH',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+              expectedVersion: statusThresholdsVersion,
+              settings: statusThresholds
+            })
+          });
+
+          if (!response.ok) {
+            await handleFailedSave(response, 'status thresholds', ['/v1/panel/settings/status-thresholds'], 'status-thresholds');
+          } else {
+            const envelope = toSettingsEnvelope<any>(await response.json());
+            const canonicalStatusThresholds = envelope?.data?.social && envelope?.data?.gameplay
+              ? envelope.data
+              : statusThresholds;
+            const nextVersion = Number(envelope?._meta?.version ?? statusThresholdsVersion + 1);
+            setStatusThresholdsVersion(Number.isFinite(nextVersion) ? nextVersion : statusThresholdsVersion + 1);
+
+            applyServerSyncedState(() => {
+              setStatusThresholdsState(JSON.parse(JSON.stringify(canonicalStatusThresholds)));
+            });
+            statusThresholdsSnapshotRef.current = JSON.parse(JSON.stringify(canonicalStatusThresholds));
+          }
+        }
+      }
+
+      if (dirty.has('ticket-labels')) {
+        const snapshot = ticketLabelsSnapshotRef.current;
+        if (hasDeepChanges(labels, snapshot)) {
+          const response = await csrfFetch('/v1/panel/settings/ticket-labels', {
+            method: 'PATCH',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+              expectedVersion: ticketLabelsVersion,
+              labels
+            })
+          });
+
+          if (!response.ok) {
+            await handleFailedSave(response, 'ticket labels', ['/v1/panel/settings/ticket-labels'], 'ticket-labels');
+          } else {
+            const envelope = toSettingsEnvelope<any>(await response.json());
+            const canonicalLabels = Array.isArray(envelope?.data?.labels) ? envelope.data.labels : [];
+            const nextVersion = Number(envelope?._meta?.version ?? ticketLabelsVersion + 1);
+            setTicketLabelsVersion(Number.isFinite(nextVersion) ? nextVersion : ticketLabelsVersion + 1);
+
+            applyServerSyncedState(() => {
+              setLabelsState(JSON.parse(JSON.stringify(canonicalLabels)));
+            });
+            ticketLabelsSnapshotRef.current = JSON.parse(JSON.stringify(canonicalLabels));
+            queryClient.invalidateQueries({ queryKey: ['/v1/panel/settings/ticket-labels'] });
+          }
+        }
+      }
+
+      if (failedSections.size > 0) {
+        failedSections.forEach(section => dirtyCategoriesRef.current.add(section));
+        pendingChangesRef.current = true;
       }
 
       if (!hasError) {
@@ -1908,6 +2114,8 @@ const Settings = () => {
       }
     } catch (error) {
       console.error("Error saving settings:", error);
+      dirty.forEach(section => dirtyCategoriesRef.current.add(section));
+      pendingChangesRef.current = true;
       toast({
         title: "Error",
         description: "An unexpected error occurred while saving",
@@ -1918,7 +2126,9 @@ const Settings = () => {
     }
   }, [
     serverDisplayName, discordWebhookUrl, homepageIconUrl, panelIconUrl,
-    labels, bugReportTags, playerReportTags, appealTags, ticketForms, quickResponsesState, statusThresholds, toast
+    labels, ticketForms, quickResponsesState, statusThresholds,
+    generalVersion, quickResponsesVersion, ticketFormsVersion, statusThresholdsVersion, ticketLabelsVersion, toast,
+    applyServerSyncedState, toSettingsEnvelope
   ]);
 
   // Effect: Load settings from React Query into local component state
@@ -1932,6 +2142,8 @@ const Settings = () => {
 
     if (settingsData?.settings && Object.keys(settingsData.settings).length > 0 && !initialLoadCompletedRef.current) {
       applySettingsObjectToState(settingsData.settings); // Call directly
+      const loadedGeneralVersion = Number(settingsData.settings?.generalMeta?.version ?? 0);
+      setGeneralVersion(Number.isFinite(loadedGeneralVersion) ? loadedGeneralVersion : 0);
 
       // Capture settings for future reference and mark initial load as complete
       // This timeout ensures state updates from applySettingsObjectToState have settled
@@ -1969,9 +2181,14 @@ const Settings = () => {
       return;
     }
 
+    const ticketFormEnvelope = toSettingsEnvelope<any>(ticketFormSettingsData);
+    const ticketFormPayload = ticketFormEnvelope.data;
+    const loadedVersion = Number(ticketFormEnvelope?._meta?.version ?? 0);
+    setTicketFormsVersion(Number.isFinite(loadedVersion) ? loadedVersion : 0);
+
     // Check if the ticket forms data has meaningful content
-    const hasData = ticketFormSettingsData && typeof ticketFormSettingsData === 'object' &&
-      Object.values(ticketFormSettingsData).some((form: any) =>
+    const hasData = ticketFormPayload && typeof ticketFormPayload === 'object' &&
+      Object.values(ticketFormPayload).some((form: any) =>
         form && (
           (Array.isArray(form.fields) && form.fields.length > 0) ||
           (Array.isArray(form.sections) && form.sections.length > 0)
@@ -1980,7 +2197,8 @@ const Settings = () => {
 
     if (hasData) {
       justLoadedFromServerRef.current = true;
-      setTicketFormsState(ticketFormSettingsData as TicketFormsConfiguration);
+      setTicketFormsState(ticketFormPayload as TicketFormsConfiguration);
+      ticketFormsSnapshotRef.current = JSON.parse(JSON.stringify(ticketFormPayload));
       setTimeout(() => {
         justLoadedFromServerRef.current = false;
       }, 100);
@@ -1993,10 +2211,16 @@ const Settings = () => {
       return;
     }
 
+    const quickResponsesEnvelope = toSettingsEnvelope<any>(quickResponsesData);
+    const quickResponsesPayload = quickResponsesEnvelope.data;
+    const loadedVersion = Number(quickResponsesEnvelope?._meta?.version ?? 0);
+    setQuickResponsesVersion(Number.isFinite(loadedVersion) ? loadedVersion : 0);
+
     // Check if quick responses data has categories
-    if (quickResponsesData.categories && Array.isArray(quickResponsesData.categories)) {
+    if (quickResponsesPayload?.categories && Array.isArray(quickResponsesPayload.categories)) {
       justLoadedFromServerRef.current = true;
-      setQuickResponsesState(quickResponsesData as QuickResponsesConfiguration);
+      setQuickResponsesState(quickResponsesPayload as QuickResponsesConfiguration);
+      quickResponsesSnapshotRef.current = JSON.parse(JSON.stringify(quickResponsesPayload));
       setTimeout(() => {
         justLoadedFromServerRef.current = false;
       }, 100);
@@ -2009,21 +2233,53 @@ const Settings = () => {
       return;
     }
 
-    if (statusThresholdsData.social && statusThresholdsData.gameplay) {
+    const statusThresholdEnvelope = toSettingsEnvelope<any>(statusThresholdsData);
+    const statusThresholdPayload = statusThresholdEnvelope.data;
+    const loadedVersion = Number(statusThresholdEnvelope?._meta?.version ?? 0);
+    setStatusThresholdsVersion(Number.isFinite(loadedVersion) ? loadedVersion : 0);
+
+    if (statusThresholdPayload?.social && statusThresholdPayload?.gameplay) {
       justLoadedFromServerRef.current = true;
-      setStatusThresholdsState(statusThresholdsData);
+      setStatusThresholdsState(statusThresholdPayload);
+      statusThresholdsSnapshotRef.current = JSON.parse(JSON.stringify(statusThresholdPayload));
       setTimeout(() => {
         justLoadedFromServerRef.current = false;
       }, 100);
     }
   }, [statusThresholdsData, isLoadingStatusThresholds]);
 
+  useEffect(() => {
+    if (isLoadingTicketLabels || !ticketLabelSettingsData) {
+      return;
+    }
+
+    const ticketLabelEnvelope = toSettingsEnvelope<any>(ticketLabelSettingsData);
+    const labelPayload = Array.isArray(ticketLabelEnvelope?.data?.labels)
+      ? ticketLabelEnvelope.data.labels
+      : [];
+    const loadedVersion = Number(ticketLabelEnvelope?._meta?.version ?? 0);
+    setTicketLabelsVersion(Number.isFinite(loadedVersion) ? loadedVersion : 0);
+
+    justLoadedFromServerRef.current = true;
+    setLabelsState(JSON.parse(JSON.stringify(labelPayload)));
+    ticketLabelsSnapshotRef.current = JSON.parse(JSON.stringify(labelPayload));
+    setTimeout(() => {
+      justLoadedFromServerRef.current = false;
+    }, 100);
+  }, [ticketLabelSettingsData, isLoadingTicketLabels]);
+
   // Track which settings categories are dirty
   useEffect(() => {
     if (!justLoadedFromServerRef.current && initialLoadCompletedRef.current) {
       dirtyCategoriesRef.current.add('general');
     }
-  }, [serverDisplayName, discordWebhookUrl, homepageIconUrl, panelIconUrl, labels, bugReportTags, playerReportTags, appealTags]);
+  }, [serverDisplayName, discordWebhookUrl, homepageIconUrl, panelIconUrl]);
+
+  useEffect(() => {
+    if (!justLoadedFromServerRef.current && initialLoadCompletedRef.current) {
+      dirtyCategoriesRef.current.add('ticket-labels');
+    }
+  }, [labels]);
 
   useEffect(() => {
     if (!justLoadedFromServerRef.current && initialLoadCompletedRef.current) {
@@ -2072,7 +2328,7 @@ const Settings = () => {
       }
     };  }, [
     serverDisplayName, discordWebhookUrl, homepageIconUrl, panelIconUrl,
-    labels, bugReportTags, playerReportTags, appealTags, ticketForms, quickResponsesState, statusThresholds,
+    labels, ticketForms, quickResponsesState, statusThresholds,
     // punishmentTypes, mongodbUri, has2FA, hasPasskey removed - they have their own save mechanisms
     isLoadingSettings, isFetchingSettings, saveSettings
   ]);
@@ -3084,10 +3340,18 @@ const Settings = () => {
       icon: FileText,
       permission: 'tags',
       subCategories: [
-        { id: 'quick-responses', title: 'Quick Responses', icon: MessageCircle },
-        { id: 'label-management', title: 'Label Management', icon: Tag },
-        { id: 'ticket-forms', title: 'Ticket Forms', icon: Layers },
-        { id: 'ai-moderation', title: 'AI Moderation', icon: Bot },
+        ...(canViewAdminSettings
+          ? [{ id: 'quick-responses', title: 'Quick Responses', icon: MessageCircle }]
+          : []),
+        ...(canViewAdminSettings
+          ? [{ id: 'label-management', title: 'Label Management', icon: Tag }]
+          : []),
+        ...(canViewAdminSettings
+          ? [{ id: 'ticket-forms', title: 'Ticket Forms', icon: Layers }]
+          : []),
+        ...(canViewAdminSettings
+          ? [{ id: 'ai-moderation', title: 'AI Moderation', icon: Bot }]
+          : []),
       ],
     },
     {
@@ -3153,6 +3417,9 @@ const Settings = () => {
             if (category.permission && !canAccessSettingsTab(category.permission as any)) {
               return null;
             }
+            if (category.subCategories && category.subCategories.length === 0) {
+              return null;
+            }
 
             // Only highlight if this category has a selected sub-category
             const isSelected = expandedCategory === category.id && !!expandedSubCategory;
@@ -4339,7 +4606,7 @@ const Settings = () => {
                     if (selectedPunishment) {
                       try {
                         const response = await apiFetch(`/v1/panel/settings/punishment-types/${selectedPunishment.ordinal}`, {
-                          method: 'PUT',
+                          method: 'PATCH',
                           headers: { 'Content-Type': 'application/json' },
                           body: JSON.stringify(selectedPunishment),
                         });
diff --git a/client/src/pages/submit-ticket.tsx b/client/src/pages/submit-ticket.tsx
index 4c5beec..8903992 100644
--- a/client/src/pages/submit-ticket.tsx
+++ b/client/src/pages/submit-ticket.tsx
@@ -26,6 +26,7 @@ import { useToast } from "@/hooks/use-toast";
 import { useSettings } from "@/hooks/use-data";
 import MediaUpload from '@/components/MediaUpload';
 import { getCreatorIdentifier } from '@/utils/creator-verification';
+import { useMediaUpload } from '@/hooks/use-media-upload';
 
 async function apiFetch(url: string, options: RequestInit = {}): Promise<Response> {
   const fullUrl = getApiUrl(url);
@@ -87,7 +88,9 @@ const SubmitTicketPage = () => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [formSubject, setFormSubject] = useState('');
   const [formData, setFormData] = useState<Record<string, string>>({});
+  const [formPendingFiles, setFormPendingFiles] = useState<Record<string, File[]>>({});
   const [displayName, setDisplayName] = useState('');
+  const { uploadMedia } = useMediaUpload();
 
   // Fetch settings to get form templates
   const { data: settingsData, isLoading: isLoadingSettings } = useSettings();
@@ -261,6 +264,10 @@ const SubmitTicketPage = () => {
 
       for (const [fieldId, value] of Object.entries(formData)) {
         const fieldConfig = allFormFields.find((f: FormField) => f.id === fieldId);
+        if (fieldConfig?.type === 'file_upload') {
+          // File uploads are sent via `attachments` for preview support.
+          continue;
+        }
         if (fieldConfig && fieldConfig.label) {
           labeledFormData[fieldConfig.label] = value;
         } else if (fieldId === 'email') {
@@ -270,6 +277,49 @@ const SubmitTicketPage = () => {
         }
       }
 
+      const visibleFileUploadFields = allFormFields.filter((field: FormField) => {
+        if (field.type !== 'file_upload') return false;
+        return !field.sectionId || visibleSections.has(field.sectionId);
+      });
+      const visibleFileFieldIds = new Set(visibleFileUploadFields.map((field: FormField) => field.id));
+
+      let hiddenExcludedFiles = 0;
+      for (const [fieldId, files] of Object.entries(formPendingFiles)) {
+        if (files.length > 0 && !visibleFileFieldIds.has(fieldId)) {
+          hiddenExcludedFiles += files.length;
+        }
+      }
+
+      const attachments: Array<{
+        url: string;
+        key: string;
+        fileName: string;
+        fileType: string;
+        fileSize: number;
+        fieldId: string;
+        fieldLabel?: string;
+      }> = [];
+
+      for (const field of visibleFileUploadFields) {
+        const files = formPendingFiles[field.id] || [];
+        for (const file of files) {
+          const result = await uploadMedia(file, 'ticket', {
+            ticketId: 'new',
+            ticketType: effectiveType,
+            fieldId: field.id
+          });
+          attachments.push({
+            url: result.url,
+            key: result.key,
+            fileName: file.name,
+            fileType: file.type || 'application/octet-stream',
+            fileSize: file.size,
+            fieldId: field.id,
+            fieldLabel: field.label
+          });
+        }
+      }
+
       // Generate a creator identifier for this submission
       const tempTicketId = `temp-${Date.now()}`;
       const creatorIdentifier = getCreatorIdentifier(tempTicketId);
@@ -277,6 +327,13 @@ const SubmitTicketPage = () => {
       // Format the creator name as "{name} (Web User)" for unverified submissions
       const webCreatorName = `${displayName.trim()} (Web User)`;
 
+      if (hiddenExcludedFiles > 0) {
+        toast({
+          title: "Hidden Attachments Excluded",
+          description: `${hiddenExcludedFiles} hidden attachment${hiddenExcludedFiles > 1 ? 's were' : ' was'} not submitted.`,
+        });
+      }
+
       // Create the ticket with all data
       const response = await apiFetch('/v1/public/tickets', {
         method: 'POST',
@@ -286,6 +343,7 @@ const SubmitTicketPage = () => {
           creatorName: webCreatorName,
           creatorEmail: formData['email'],
           formData: labeledFormData,
+          attachments,
           creatorIdentifier: creatorIdentifier,
           createdServer: 'Web',
           emailAuthEnabled: formData['emailAuthEnabled'] === 'true',
@@ -607,8 +665,15 @@ const SubmitTicketPage = () => {
             <div className="space-y-2">
               <MediaUpload
                 uploadType="ticket"
-                onUploadComplete={(result) => {
-                  handleFormFieldChange(field.id, result.url);
+                autoUpload={false}
+                onFilesSelected={(files) => {
+                  const selected = files[0];
+                  if (!selected) return;
+                  handleFormFieldChange(field.id, selected.name);
+                  setFormPendingFiles((prev) => ({
+                    ...prev,
+                    [field.id]: [selected]
+                  }));
                 }}
                 metadata={{
                   ticketId: 'new',
@@ -618,11 +683,11 @@ const SubmitTicketPage = () => {
                 variant="compact"
                 maxFiles={1}
               />
-              {formData[field.id] && (
+              {formPendingFiles[field.id]?.length ? (
                 <div className="text-sm text-muted-foreground">
-                  File uploaded: {formData[field.id].split('/').pop()}
+                  Selected file: {formPendingFiles[field.id][0].name} (uploads on submit)
                 </div>
-              )}
+              ) : null}
             </div>
           ) : (
             <Input
diff --git a/client/src/pages/ticket-detail.tsx b/client/src/pages/ticket-detail.tsx
index 3492015..940bc1e 100644
--- a/client/src/pages/ticket-detail.tsx
+++ b/client/src/pages/ticket-detail.tsx
@@ -62,7 +62,7 @@ import { getUnverifiedExplanation } from '@/utils/creator-verification';
 import PlayerPunishment, { PlayerPunishmentData } from '@/components/ui/player-punishment';
 import MediaUpload from '@/components/MediaUpload';
 import TicketAttachments from '@/components/TicketAttachments';
-import { useMediaUpload } from '@/hooks/use-media-upload';
+import { useMediaUpload, useMediaUploadConfig } from '@/hooks/use-media-upload';
 
 // Define PunishmentType interface
 interface PunishmentType {
@@ -784,6 +784,29 @@ const TicketDetail = () => {
   const [noteAttachments, setNoteAttachments] = useState<Array<{id: string, url: string, key: string, fileName: string, fileType: string, fileSize: number, uploadedAt: string, uploadedBy: string}>>([]);
   const [pendingFiles, setPendingFiles] = useState<File[]>([]);
   const { uploadMedia } = useMediaUpload();
+  const { data: mediaConfig } = useMediaUploadConfig();
+
+  const normalizedCdnHost = useMemo(() => {
+    const rawDomain = mediaConfig?.cdnDomain?.trim();
+    if (!rawDomain) return null;
+
+    try {
+      const parsed = new URL(rawDomain.startsWith('http') ? rawDomain : `https://${rawDomain}`);
+      return parsed.hostname.toLowerCase();
+    } catch {
+      return rawDomain.replace(/^https?:\/\//i, '').split('/')[0].toLowerCase();
+    }
+  }, [mediaConfig?.cdnDomain]);
+
+  const isTrustedCdnUrl = (url?: string | null): boolean => {
+    if (!url || !normalizedCdnHost) return false;
+    try {
+      const parsed = new URL(url);
+      return parsed.hostname.toLowerCase() === normalizedCdnHost;
+    } catch {
+      return false;
+    }
+  };
   
 
   // Helper function to get file icon
@@ -834,8 +857,9 @@ const TicketDetail = () => {
   // Function to get available quick responses for current ticket category
   const getQuickResponsesForTicket = (category: TicketCategory) => {
     // Use quick responses from dedicated endpoint, fallback to default config
+    const quickResponsesPayload = (quickResponsesData as any)?.data ?? quickResponsesData;
     const quickResponses: QuickResponsesConfiguration =
-      (quickResponsesData?.categories ? quickResponsesData : null) || defaultQuickResponsesConfig;
+      (quickResponsesPayload?.categories ? quickResponsesPayload : null) || defaultQuickResponsesConfig;
 
     // Map display category to possible ticketType values
     // Support both formats: 'chat_report' (TicketSettings format) and 'chat' (MongoDB format)
@@ -926,7 +950,11 @@ const TicketDetail = () => {
   const { data: ticketData, isLoading, isError, error, refetch } = usePanelTicket(ticketId);
   
   useEffect(() => {
-    // Ticket data received
+    if (ticketData) {
+      // Backend marks the ticket as read on fetch — invalidate dashboard notification queries
+      queryClient.invalidateQueries({ queryKey: ['/v1/panel/ticket-subscriptions/updates'] });
+      queryClient.invalidateQueries({ queryKey: ['/v1/panel/ticket-subscriptions/assigned-updates'] });
+    }
   }, [ticketData]);
 
   // Scroll to top of message list when messages load
@@ -1167,7 +1195,7 @@ const TicketDetail = () => {
         relatedPlayerId: ticketData.relatedPlayer?.uuid || ticketData.relatedPlayerId || ticketData.reportedPlayerUuid,
         messages: ((ticketData.messages || ticketData.replies || []).map((reply: any, index: number) => ({
           id: reply._id || reply.id || `msg-${Date.now()}-${Math.random().toString(36).substring(2, 7)}`,
-          sender: reply.name || reply.sender || (reply.staff ? 'Staff' : (index === 0 ? (ticketData.creator || ticketData.reportedBy || 'Player') : 'Player')),
+          sender: reply.name || reply.sender || (reply.staff ? 'Staff' : (index === 0 ? (ticketData.creatorName || ticketData.reportedBy || 'Player') : 'Player')),
           senderType: reply.type === 'staff' ? 'staff' :
                      reply.type === 'system' ? 'system' : 'user',
           content: reply.content,
@@ -2235,8 +2263,9 @@ const TicketDetail = () => {
                                     else if (['mp4', 'webm', 'mov'].includes(ext || '')) fileType = 'video/' + ext;
                                   }
 
-                                  const isImage = fileType?.startsWith('image/');
-                                  const isVideo = fileType?.startsWith('video/');
+                                  const canPreview = isTrustedCdnUrl(attachmentData.url);
+                                  const isImage = canPreview && fileType?.startsWith('image/');
+                                  const isVideo = canPreview && fileType?.startsWith('video/');
 
                                   if (isImage) {
                                     return (
@@ -2836,6 +2865,29 @@ const PunishmentDetailsCard = ({ punishmentId }: { punishmentId: string }) => {
   const [showAdditionalData, setShowAdditionalData] = useState(false);
   const { user } = useAuth();
   const { toast } = useToast();
+  const { data: mediaConfig } = useMediaUploadConfig();
+
+  const normalizedCdnHost = useMemo(() => {
+    const rawDomain = mediaConfig?.cdnDomain?.trim();
+    if (!rawDomain) return null;
+
+    try {
+      const parsed = new URL(rawDomain.startsWith('http') ? rawDomain : `https://${rawDomain}`);
+      return parsed.hostname.toLowerCase();
+    } catch {
+      return rawDomain.replace(/^https?:\/\//i, '').split('/')[0].toLowerCase();
+    }
+  }, [mediaConfig?.cdnDomain]);
+
+  const isTrustedCdnUrl = (url?: string | null): boolean => {
+    if (!url || !normalizedCdnHost) return false;
+    try {
+      const parsed = new URL(url);
+      return parsed.hostname.toLowerCase() === normalizedCdnHost;
+    } catch {
+      return false;
+    }
+  };
 
   useEffect(() => {
     const fetchPunishmentDetails = async () => {
@@ -3177,6 +3229,8 @@ const PunishmentDetailsCard = ({ punishmentId }: { punishmentId: string }) => {
                   
                   // Helper function to detect media type from URL
                   const getMediaType = (url: string) => {
+                    if (!isTrustedCdnUrl(url)) return 'link';
+
                     const imageExts = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
                     const videoExts = ['.mp4', '.webm', '.mov'];
                     const urlLower = url.toLowerCase();
@@ -3569,4 +3623,4 @@ const PunishmentDetailsCard = ({ punishmentId }: { punishmentId: string }) => {
   );
 };
 
-export default TicketDetail;
\ No newline at end of file
+export default TicketDetail;
diff --git a/client/src/pages/tickets.tsx b/client/src/pages/tickets.tsx
index 78b79cf..14ded6f 100644
--- a/client/src/pages/tickets.tsx
+++ b/client/src/pages/tickets.tsx
@@ -42,7 +42,7 @@ interface Ticket {
   locked?: boolean;
   hidden?: boolean;
   tags?: string[];
-  assignedTo?: string;
+  assignedTo?: string[] | string;
   lastReply?: {
     created: string;
     name: string;
@@ -270,6 +270,10 @@ const Tickets = () => {
     const ticketLabels = ticket.tags || [];
     const availableLabelsForTicket = labels.filter(l => !ticketLabels.includes(l.name));
 
+    const assigneeDisplay = Array.isArray(ticket.assignedTo)
+      ? ticket.assignedTo.join(', ')
+      : (ticket.assignedTo || '');
+
     return (
       <TableRow
         key={ticket.id}
@@ -347,10 +351,10 @@ const Tickets = () => {
           </div>
         </TableCell>
         <TableCell className="text-right text-sm text-muted-foreground">
-          {ticket.assignedTo && (
+          {assigneeDisplay && (
             <div className="flex items-center justify-end gap-1">
               <User className="h-3.5 w-3.5" />
-              <span>{ticket.assignedTo}</span>
+              <span>{assigneeDisplay}</span>
             </div>
           )}
         </TableCell>
@@ -382,6 +386,10 @@ const Tickets = () => {
     const ticketLabels = ticket.tags || [];
     const availableLabelsForTicket = labels.filter(l => !ticketLabels.includes(l.name));
 
+    const assigneeDisplay = Array.isArray(ticket.assignedTo)
+      ? ticket.assignedTo.join(', ')
+      : (ticket.assignedTo || '');
+
     return (
       <Card
         key={ticket.id}
@@ -457,10 +465,10 @@ const Tickets = () => {
               <div className="text-xs text-muted-foreground">
                 #{ticket.id} - {ticket.reportedByName || ticket.reportedBy} - {formatTimeAgo(ticket.date)}
               </div>
-              {ticket.assignedTo && (
+              {assigneeDisplay && (
                 <div className="text-xs text-muted-foreground mt-1 flex items-center gap-1">
                   <User className="h-3 w-3" />
-                  {ticket.assignedTo}
+                  {assigneeDisplay}
                 </div>
               )}
             </div>
diff --git a/client/src/utils/csrf.ts b/client/src/utils/csrf.ts
deleted file mode 100644
index 778b9d5..0000000
--- a/client/src/utils/csrf.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// API fetch utility - re-exports from centralized api module
-// Spring Boot backend uses cookie-based authentication without CSRF tokens
-import React from 'react';
-import { apiFetch, api, apiUpload } from '@/lib/api';
-
-// Re-export the main fetch function for backwards compatibility
-export const csrfFetch = apiFetch;
-
-// Re-export the api object for convenience
-export { api, apiUpload };
-
-// Legacy function for backwards compatibility - now a no-op
-export async function getCSRFToken(): Promise<string> {
-  return '';
-}
-
-// Clear function for backwards compatibility - now a no-op
-export function clearCSRFToken(): void {
-  // No-op - CSRF tokens are no longer used
-}
-
-// Hook for React components - now just returns empty state
-export function useCSRFToken() {
-  const [token] = React.useState<string | null>('');
-  const [loading] = React.useState(false);
-  const [error] = React.useState<string | null>(null);
-
-  return { token, loading, error, refetch: () => Promise.resolve('') };
-}
-
-// Export for direct import in non-React contexts
-export { csrfFetch as fetch };
diff --git a/client/src/utils/markdown-utils.ts b/client/src/utils/markdown-utils.ts
new file mode 100644
index 0000000..2f23e9e
--- /dev/null
+++ b/client/src/utils/markdown-utils.ts
@@ -0,0 +1,32 @@
+/**
+ * Strip markdown syntax from text for use in plain-text previews.
+ */
+export function stripMarkdown(text: string): string {
+  return text
+    // Remove fenced code blocks (``` ... ```)
+    .replace(/```[\s\S]*?```/g, '')
+    // Remove inline code (`...`)
+    .replace(/`([^`]*)`/g, '$1')
+    // Remove bold/italic (**, __, *, _)
+    .replace(/\*\*(.+?)\*\*/g, '$1')
+    .replace(/__(.+?)__/g, '$1')
+    .replace(/\*(.+?)\*/g, '$1')
+    .replace(/_(.+?)_/g, '$1')
+    // Remove headers (# ... )
+    .replace(/^#{1,6}\s+/gm, '')
+    // Remove links [text](url) → text
+    .replace(/\[([^\]]*)\]\([^)]*\)/g, '$1')
+    // Remove images ![alt](url)
+    .replace(/!\[([^\]]*)\]\([^)]*\)/g, '$1')
+    // Remove blockquotes
+    .replace(/^>\s+/gm, '')
+    // Remove horizontal rules
+    .replace(/^[-*_]{3,}\s*$/gm, '')
+    // Collapse multiple newlines into a single space
+    .replace(/\n{2,}/g, ' ')
+    // Replace single newlines with space
+    .replace(/\n/g, ' ')
+    // Collapse multiple spaces
+    .replace(/\s{2,}/g, ' ')
+    .trim();
+}
diff --git a/client/src/utils/routes.ts b/client/src/utils/routes.ts
new file mode 100644
index 0000000..53168b1
--- /dev/null
+++ b/client/src/utils/routes.ts
@@ -0,0 +1,9 @@
+export function isPublicPage(path?: string): boolean {
+  const p = path || window.location.pathname;
+  return p.startsWith('/ticket/') ||
+         p.startsWith('/appeal') ||
+         p.startsWith('/submit-ticket') ||
+         p === '/' ||
+         p.startsWith('/knowledgebase') ||
+         p.startsWith('/article/');
+}
diff --git a/package-lock.json b/package-lock.json
index da908b0..6cf19e9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@hookform/resolvers": "^3.10.0",
-        "@modl-gg/shared-web": "^1.0.4",
+        "@modl-gg/shared-web": "^1.0.5",
         "@radix-ui/react-accordion": "^1.2.4",
         "@radix-ui/react-alert-dialog": "^1.1.7",
         "@radix-ui/react-aspect-ratio": "^1.1.3",
@@ -515,9 +515,9 @@
       }
     },
     "node_modules/@modl-gg/shared-web": {
-      "version": "1.0.4",
-      "resolved": "https://npm.pkg.github.com/download/@modl-gg/shared-web/1.0.4/a3f577092ad72b5aae471e2510b288a48282b0fd",
-      "integrity": "sha512-C9BbfzIUGqOj9zK7zeLY4w2DLpuLH9351MMlvyJ1Bm1dibOCL/C5zNm6oz7HsA0qqah76iE5vPxGQQjCZFKPzQ==",
+      "version": "1.0.5",
+      "resolved": "https://npm.pkg.github.com/download/@modl-gg/shared-web/1.0.5/c5558a040cda5a6ed5cc4ebc5e228f2753f88cbb",
+      "integrity": "sha512-fNda4w3bI7zA0Kdw7mAHsKUCQVsuz6Jn8cExAt16JhtyGXObMKtSEkRhJ4kNv3vA2R0uX3Sa4z9/iRwNWBPcfA==",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@radix-ui/react-accordion": "^1.2.0",
diff --git a/package.json b/package.json
index 12a5503..edd1d62 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.10.0",
-    "@modl-gg/shared-web": "^1.0.4",
+    "@modl-gg/shared-web": "^1.0.5",
     "@radix-ui/react-accordion": "^1.2.4",
     "@radix-ui/react-alert-dialog": "^1.1.7",
     "@radix-ui/react-aspect-ratio": "^1.1.3",
diff --git a/shared/role-hierarchy-core.ts b/shared/role-hierarchy-core.ts
index 4d67873..f6b8d39 100644
--- a/shared/role-hierarchy-core.ts
+++ b/shared/role-hierarchy-core.ts
@@ -145,7 +145,7 @@ export function hasPermission(
     return false;
   }
   
-  return roleInfo.permissions.includes(permission);
+  return roleInfo.permissions.some(p => p === permission || permission.startsWith(p + '.'));
 }
 
 /**