diff --git a/src/components/moderation/DependencyVisualizer.tsx b/src/components/moderation/DependencyVisualizer.tsx
index 513f39d4..e518aba7 100644
--- a/src/components/moderation/DependencyVisualizer.tsx
+++ b/src/components/moderation/DependencyVisualizer.tsx
@@ -4,6 +4,7 @@ import { Badge } from '@/components/ui/badge';
 import { ArrowDown, AlertCircle } from 'lucide-react';
 import { type SubmissionItemWithDeps } from '@/lib/submissionItemsService';
 import { Alert, AlertDescription } from '@/components/ui/alert';
+import { useIsMobile } from '@/hooks/use-mobile';
 
 interface DependencyVisualizerProps {
   items: SubmissionItemWithDeps[];
@@ -11,6 +12,8 @@ interface DependencyVisualizerProps {
 }
 
 export function DependencyVisualizer({ items, selectedIds }: DependencyVisualizerProps) {
+  const isMobile = useIsMobile();
+  
   const dependencyLevels = useMemo(() => {
     const levels: SubmissionItemWithDeps[][] = [];
     const visited = new Set<string>();
@@ -62,13 +65,13 @@ export function DependencyVisualizer({ items, selectedIds }: DependencyVisualize
       {dependencyLevels.map((level, levelIdx) => (
         <div key={levelIdx} className="space-y-3">
           <div className="flex items-center gap-2">
-            <h4 className="text-sm font-medium text-muted-foreground">
+            <h4 className={`font-medium text-muted-foreground ${isMobile ? 'text-xs' : 'text-sm'}`}>
               Level {levelIdx + 1}
             </h4>
             <div className="flex-1 h-px bg-border" />
           </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          <div className={`grid gap-3 ${isMobile ? 'grid-cols-1' : 'grid-cols-1 md:grid-cols-2'}`}>
             {level.map((item) => (
               <Card 
                 key={item.id}
@@ -76,28 +79,31 @@ export function DependencyVisualizer({ items, selectedIds }: DependencyVisualize
                   selectedIds.has(item.id) 
                     ? 'ring-2 ring-primary' 
                     : ''
-                }`}
+                } ${isMobile ? 'touch-manipulation' : ''}`}
               >
-                <CardHeader className="pb-2">
-                  <div className="flex items-center justify-between">
-                    <CardTitle className="text-sm">
+                <CardHeader className={isMobile ? "pb-2 p-4" : "pb-2"}>
+                  <div className="flex items-center justify-between gap-2">
+                    <CardTitle className={isMobile ? "text-xs" : "text-sm"}>
                       {item.item_type.replace('_', ' ').toUpperCase()}
                     </CardTitle>
-                    <Badge variant={
-                      item.status === 'approved' ? 'default' :
-                      item.status === 'rejected' ? 'destructive' :
-                      'secondary'
-                    }>
+                    <Badge 
+                      variant={
+                        item.status === 'approved' ? 'default' :
+                        item.status === 'rejected' ? 'destructive' :
+                        'secondary'
+                      }
+                      className={isMobile ? "text-xs shrink-0" : ""}
+                    >
                       {item.status}
                     </Badge>
                   </div>
                 </CardHeader>
-                <CardContent>
-                  <p className="text-sm font-medium">
+                <CardContent className={isMobile ? "p-4 pt-0" : ""}>
+                  <p className={`font-medium ${isMobile ? 'text-sm' : 'text-sm'}`}>
                     {item.item_data.name || 'Unnamed'}
                   </p>
                   {item.dependents && item.dependents.length > 0 && (
-                    <p className="text-xs text-muted-foreground mt-1">
+                    <p className={`text-muted-foreground mt-1 ${isMobile ? 'text-xs' : 'text-xs'}`}>
                       Has {item.dependents.length} dependent(s)
                     </p>
                   )}
@@ -108,7 +114,7 @@ export function DependencyVisualizer({ items, selectedIds }: DependencyVisualize
 
           {levelIdx < dependencyLevels.length - 1 && (
             <div className="flex justify-center py-2">
-              <ArrowDown className="w-5 h-5 text-muted-foreground" />
+              <ArrowDown className={isMobile ? "w-4 h-4 text-muted-foreground" : "w-5 h-5 text-muted-foreground"} />
             </div>
           )}
         </div>
diff --git a/src/components/moderation/ItemReviewCard.tsx b/src/components/moderation/ItemReviewCard.tsx
index 18ffc7f5..f9bbd98c 100644
--- a/src/components/moderation/ItemReviewCard.tsx
+++ b/src/components/moderation/ItemReviewCard.tsx
@@ -3,6 +3,7 @@ import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Edit, MapPin, Zap, Building2, Image, Package } from 'lucide-react';
 import { type SubmissionItemWithDeps } from '@/lib/submissionItemsService';
+import { useIsMobile } from '@/hooks/use-mobile';
 
 interface ItemReviewCardProps {
   item: SubmissionItemWithDeps;
@@ -11,6 +12,8 @@ interface ItemReviewCardProps {
 }
 
 export function ItemReviewCard({ item, onEdit, onStatusChange }: ItemReviewCardProps) {
+  const isMobile = useIsMobile();
+  
   const getItemIcon = () => {
     switch (item.item_type) {
       case 'park': return <MapPin className="w-4 h-4" />;
@@ -91,19 +94,19 @@ export function ItemReviewCard({ item, onEdit, onStatusChange }: ItemReviewCardP
       case 'photo':
         return (
           <div className="space-y-2">
-            <div className="grid grid-cols-3 gap-2">
-              {data.photos?.slice(0, 3).map((photo: any, idx: number) => (
+            <div className={`grid gap-2 ${isMobile ? 'grid-cols-2' : 'grid-cols-3'}`}>
+              {data.photos?.slice(0, isMobile ? 2 : 3).map((photo: any, idx: number) => (
                 <img
                   key={idx}
                   src={photo.url}
                   alt={photo.caption || 'Submission photo'}
-                  className="w-full h-20 object-cover rounded"
+                  className={`w-full object-cover rounded ${isMobile ? 'h-24' : 'h-20'}`}
                 />
               ))}
             </div>
-            {data.photos?.length > 3 && (
+            {data.photos?.length > (isMobile ? 2 : 3) && (
               <p className="text-sm text-muted-foreground">
-                +{data.photos.length - 3} more photo(s)
+                +{data.photos.length - (isMobile ? 2 : 3)} more photo(s)
               </p>
             )}
           </div>
@@ -120,11 +123,11 @@ export function ItemReviewCard({ item, onEdit, onStatusChange }: ItemReviewCardP
 
   return (
     <Card className="w-full">
-      <CardHeader className="pb-3">
-        <div className="flex items-start justify-between gap-2">
-          <div className="flex items-center gap-2">
+      <CardHeader className={isMobile ? "pb-3 p-4" : "pb-3"}>
+        <div className={`flex gap-2 ${isMobile ? 'flex-col' : 'items-start justify-between'}`}>
+          <div className="flex items-center gap-2 flex-wrap">
             {getItemIcon()}
-            <CardTitle className="text-base">
+            <CardTitle className={isMobile ? "text-sm" : "text-base"}>
               {item.item_type.replace('_', ' ').toUpperCase()}
             </CardTitle>
             {item.original_data && (
@@ -134,27 +137,29 @@ export function ItemReviewCard({ item, onEdit, onStatusChange }: ItemReviewCardP
             )}
           </div>
           <div className="flex items-center gap-2">
-            <Badge variant={getStatusColor()}>
+            <Badge variant={getStatusColor()} className={isMobile ? "text-xs" : ""}>
               {item.status}
             </Badge>
             {item.status === 'pending' && (
               <Button
-                size="sm"
+                size={isMobile ? "default" : "sm"}
                 variant="ghost"
                 onClick={onEdit}
+                className={isMobile ? "h-9 px-3" : ""}
               >
-                <Edit className="w-3 h-3" />
+                <Edit className={isMobile ? "w-4 h-4" : "w-3 h-3"} />
+                {isMobile && <span className="ml-2">Edit</span>}
               </Button>
             )}
           </div>
         </div>
       </CardHeader>
-      <CardContent>
+      <CardContent className={isMobile ? "p-4 pt-0" : ""}>
         {renderItemPreview()}
         
         {item.depends_on && (
           <div className="mt-3 pt-3 border-t">
-            <p className="text-xs text-muted-foreground">
+            <p className={`text-muted-foreground ${isMobile ? 'text-xs' : 'text-xs'}`}>
               Depends on another item in this submission
             </p>
           </div>
@@ -162,10 +167,10 @@ export function ItemReviewCard({ item, onEdit, onStatusChange }: ItemReviewCardP
 
         {item.rejection_reason && (
           <div className="mt-3 pt-3 border-t">
-            <p className="text-xs font-medium text-destructive">
+            <p className={`font-medium text-destructive ${isMobile ? 'text-xs' : 'text-xs'}`}>
               Rejection Reason:
             </p>
-            <p className="text-xs text-muted-foreground mt-1">
+            <p className={`text-muted-foreground mt-1 ${isMobile ? 'text-xs' : 'text-xs'}`}>
               {item.rejection_reason}
             </p>
           </div>
diff --git a/src/components/moderation/ModerationQueue.tsx b/src/components/moderation/ModerationQueue.tsx
index ff28d40c..660c3a5d 100644
--- a/src/components/moderation/ModerationQueue.tsx
+++ b/src/components/moderation/ModerationQueue.tsx
@@ -15,6 +15,7 @@ import { format } from 'date-fns';
 import { PhotoModal } from './PhotoModal';
 import { SubmissionReviewManager } from './SubmissionReviewManager';
 import { useRealtimeSubmissions } from '@/hooks/useRealtimeSubmissions';
+import { useIsMobile } from '@/hooks/use-mobile';
 
 interface ModerationItem {
   id: string;
@@ -49,6 +50,7 @@ export interface ModerationQueueRef {
 }
 
 export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
+  const isMobile = useIsMobile();
   const [items, setItems] = useState<ModerationItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [actionLoading, setActionLoading] = useState<string | null>(null);
@@ -821,10 +823,10 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
             item.status === 'rejected' ? 'border-l-red-400' :
             'border-l-amber-500'
           }`}>
-            <CardHeader className="pb-4">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-3">
-                  <Badge variant={getStatusBadgeVariant(item.status)}>
+            <CardHeader className={isMobile ? "pb-3 p-4" : "pb-4"}>
+              <div className={`flex gap-3 ${isMobile ? 'flex-col' : 'items-center justify-between'}`}>
+                <div className="flex items-center gap-2 flex-wrap">
+                  <Badge variant={getStatusBadgeVariant(item.status)} className={isMobile ? "text-xs" : ""}>
                     {item.type === 'review' ? (
                       <>
                         <MessageSquare className="w-3 h-3 mr-1" />
@@ -842,21 +844,21 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
                       </>
                     )}
                   </Badge>
-                  <Badge variant={getStatusBadgeVariant(item.status)}>
+                  <Badge variant={getStatusBadgeVariant(item.status)} className={isMobile ? "text-xs" : ""}>
                     {item.status.charAt(0).toUpperCase() + item.status.slice(1)}
                   </Badge>
                 </div>
-                <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                  <Calendar className="w-4 h-4" />
-                  {format(new Date(item.created_at), 'MMM d, yyyy HH:mm')}
+                <div className={`flex items-center gap-2 text-muted-foreground ${isMobile ? 'text-xs' : 'text-sm'}`}>
+                  <Calendar className={isMobile ? "w-3 h-3" : "w-4 h-4"} />
+                  {format(new Date(item.created_at), isMobile ? 'MMM d, yyyy' : 'MMM d, yyyy HH:mm')}
                 </div>
               </div>
               
               {item.user_profile && (
-                <div className="flex items-center gap-3 text-sm">
-                  <Avatar className="h-8 w-8">
+                <div className={`flex items-center gap-3 ${isMobile ? 'text-xs' : 'text-sm'}`}>
+                  <Avatar className={isMobile ? "h-7 w-7" : "h-8 w-8"}>
                     <AvatarImage src={item.user_profile.avatar_url} />
-                    <AvatarFallback>
+                    <AvatarFallback className={isMobile ? "text-xs" : ""}>
                       {(item.user_profile.display_name || item.user_profile.username)?.slice(0, 2).toUpperCase()}
                     </AvatarFallback>
                   </Avatar>
@@ -865,7 +867,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
                       {item.user_profile.display_name || item.user_profile.username}
                     </span>
                     {item.user_profile.display_name && (
-                      <span className="text-muted-foreground block text-xs">
+                      <span className={`text-muted-foreground block ${isMobile ? 'text-xs' : 'text-xs'}`}>
                         @{item.user_profile.username}
                       </span>
                     )}
@@ -874,8 +876,8 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
               )}
             </CardHeader>
             
-            <CardContent className="space-y-4">
-              <div className="bg-muted/50 p-4 rounded-lg">
+            <CardContent className={`space-y-4 ${isMobile ? 'p-4 pt-0' : ''}`}>
+              <div className={`bg-muted/50 rounded-lg ${isMobile ? 'p-3' : 'p-4'}`}>
                 {item.type === 'review' ? (
                   <div>
                     {item.content.title && (
@@ -1236,7 +1238,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
                     />
                   </div>
                   
-                  <div className="flex flex-col sm:flex-row gap-2 pt-2">
+                  <div className={`flex gap-2 pt-2 ${isMobile ? 'flex-col' : 'flex-col sm:flex-row'}`}>
                     {/* Show Review Items button for content submissions */}
                     {item.type === 'content_submission' && (
                       <Button
@@ -1246,9 +1248,10 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
                         }}
                         disabled={actionLoading === item.id}
                         variant="outline"
-                        className="flex-1"
+                        className={`flex-1 ${isMobile ? 'h-11' : ''}`}
+                        size={isMobile ? "default" : "default"}
                       >
-                        <ListTree className="w-4 h-4 mr-2" />
+                        <ListTree className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
                         Review Items
                       </Button>
                     )}
@@ -1256,18 +1259,20 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
                     <Button
                       onClick={() => handleModerationAction(item, 'approved', notes[item.id])}
                       disabled={actionLoading === item.id}
-                      className="flex-1"
+                      className={`flex-1 ${isMobile ? 'h-11' : ''}`}
+                      size={isMobile ? "default" : "default"}
                     >
-                      <CheckCircle className="w-4 h-4 mr-2" />
+                      <CheckCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
                       Approve
                     </Button>
                     <Button
                       variant="destructive"
                       onClick={() => handleModerationAction(item, 'rejected', notes[item.id])}
                       disabled={actionLoading === item.id}
-                      className="flex-1"
+                      className={`flex-1 ${isMobile ? 'h-11' : ''}`}
+                      size={isMobile ? "default" : "default"}
                     >
-                      <XCircle className="w-4 h-4 mr-2" />
+                      <XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
                       Reject
                     </Button>
                   </div>
@@ -1314,15 +1319,16 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
                       onChange={(e) => setNotes(prev => ({ ...prev, [`reverse-${item.id}`]: e.target.value }))}
                       rows={2}
                     />
-                    <div className="flex gap-2">
+                    <div className={`flex gap-2 ${isMobile ? 'flex-col' : ''}`}>
                       {item.status === 'approved' && (
                         <Button
                           variant="destructive"
                           onClick={() => handleModerationAction(item, 'rejected', notes[`reverse-${item.id}`])}
                           disabled={actionLoading === item.id}
-                          className="flex-1"
+                          className={`flex-1 ${isMobile ? 'h-11' : ''}`}
+                          size={isMobile ? "default" : "default"}
                         >
-                          <XCircle className="w-4 h-4 mr-2" />
+                          <XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
                           Change to Rejected
                         </Button>
                       )}
@@ -1330,9 +1336,10 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
                         <Button
                           onClick={() => handleModerationAction(item, 'approved', notes[`reverse-${item.id}`])}
                           disabled={actionLoading === item.id}
-                          className="flex-1"
+                          className={`flex-1 ${isMobile ? 'h-11' : ''}`}
+                          size={isMobile ? "default" : "default"}
                         >
-                          <CheckCircle className="w-4 h-4 mr-2" />
+                          <CheckCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
                           Change to Approved
                         </Button>
                       )}
@@ -1348,9 +1355,10 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
                     variant="destructive"
                     onClick={() => handleDeleteSubmission(item)}
                     disabled={actionLoading === item.id}
-                    className="w-full"
+                    className={`w-full ${isMobile ? 'h-11' : ''}`}
+                    size={isMobile ? "default" : "default"}
                   >
-                    <Trash2 className="w-4 h-4 mr-2" />
+                    <Trash2 className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
                     Delete Submission
                   </Button>
                 </div>
@@ -1379,12 +1387,12 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
   return (
     <div className="space-y-4">
       {/* Filter Bar */}
-      <div className="flex flex-col sm:flex-row gap-4 p-4 bg-muted/50 rounded-lg">
-        <div className="flex flex-col sm:flex-row gap-4 flex-1">
-          <div className="space-y-2 min-w-[140px]">
-            <Label className="text-sm font-medium">Entity Type</Label>
+      <div className={`flex flex-col gap-4 bg-muted/50 rounded-lg ${isMobile ? 'p-3' : 'p-4 sm:flex-row'}`}>
+        <div className={`flex gap-4 flex-1 ${isMobile ? 'flex-col' : 'flex-col sm:flex-row'}`}>
+          <div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[140px]'}`}>
+            <Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>Entity Type</Label>
             <Select value={activeEntityFilter} onValueChange={(value) => setActiveEntityFilter(value as EntityFilter)}>
-              <SelectTrigger>
+              <SelectTrigger className={isMobile ? "h-10" : ""}>
                 <SelectValue>
                   <div className="flex items-center gap-2">
                     {getEntityFilterIcon(activeEntityFilter)}
@@ -1421,10 +1429,10 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
             </Select>
           </div>
 
-          <div className="space-y-2 min-w-[120px]">
-            <Label className="text-sm font-medium">Status</Label>
+          <div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[120px]'}`}>
+            <Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>Status</Label>
             <Select value={activeStatusFilter} onValueChange={(value) => setActiveStatusFilter(value as StatusFilter)}>
-              <SelectTrigger>
+              <SelectTrigger className={isMobile ? "h-10" : ""}>
                 <SelectValue>
                   <span className="capitalize">{activeStatusFilter === 'all' ? 'All Status' : activeStatusFilter}</span>
                 </SelectValue>
@@ -1443,12 +1451,12 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
         </div>
 
         {(activeEntityFilter !== 'all' || activeStatusFilter !== 'pending') && (
-          <div className="flex items-end">
+          <div className={isMobile ? "" : "flex items-end"}>
             <Button
               variant="outline"
-              size="sm"
+              size={isMobile ? "default" : "sm"}
               onClick={clearFilters}
-              className="flex items-center gap-2"
+              className={`flex items-center gap-2 ${isMobile ? 'w-full h-10' : ''}`}
             >
               <X className="w-4 h-4" />
               Clear Filters
diff --git a/src/components/moderation/PhotoModal.tsx b/src/components/moderation/PhotoModal.tsx
index a09a6034..6e78502b 100644
--- a/src/components/moderation/PhotoModal.tsx
+++ b/src/components/moderation/PhotoModal.tsx
@@ -1,7 +1,8 @@
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { X, ChevronLeft, ChevronRight } from 'lucide-react';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
+import { useIsMobile } from '@/hooks/use-mobile';
 
 interface PhotoModalProps {
   photos: Array<{
@@ -16,8 +17,16 @@ interface PhotoModalProps {
 }
 
 export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModalProps) {
+  const isMobile = useIsMobile();
   const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const [touchStart, setTouchStart] = useState<number | null>(null);
+  const [touchEnd, setTouchEnd] = useState<number | null>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+  
   const currentPhoto = photos[currentIndex];
+  
+  // Minimum swipe distance (in px)
+  const minSwipeDistance = 50;
 
   const goToPrevious = () => {
     setCurrentIndex((prev) => (prev > 0 ? prev - 1 : photos.length - 1));
@@ -33,28 +42,62 @@ export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModal
     if (e.key === 'Escape') onClose();
   };
 
+  const onTouchStart = (e: React.TouchEvent) => {
+    setTouchEnd(null);
+    setTouchStart(e.targetTouches[0].clientX);
+  };
+
+  const onTouchMove = (e: React.TouchEvent) => {
+    setTouchEnd(e.targetTouches[0].clientX);
+  };
+
+  const onTouchEnd = () => {
+    if (!touchStart || !touchEnd) return;
+    
+    const distance = touchStart - touchEnd;
+    const isLeftSwipe = distance > minSwipeDistance;
+    const isRightSwipe = distance < -minSwipeDistance;
+    
+    if (isLeftSwipe) {
+      goToNext();
+    } else if (isRightSwipe) {
+      goToPrevious();
+    }
+  };
+
+  useEffect(() => {
+    setCurrentIndex(initialIndex);
+  }, [initialIndex]);
+
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-7xl w-full max-h-[90vh] p-0 [&>button]:hidden">
-        <div className="relative bg-black rounded-lg overflow-hidden" onKeyDown={handleKeyDown} tabIndex={0}>
+      <DialogContent className={`max-w-7xl w-full p-0 [&>button]:hidden ${isMobile ? 'max-h-screen h-screen' : 'max-h-[90vh]'}`}>
+        <div 
+          className="relative bg-black rounded-lg overflow-hidden touch-none" 
+          onKeyDown={handleKeyDown} 
+          onTouchStart={onTouchStart}
+          onTouchMove={onTouchMove}
+          onTouchEnd={onTouchEnd}
+          tabIndex={0}
+        >
           {/* Close button */}
           <Button
             variant="ghost"
-            size="sm"
+            size={isMobile ? "default" : "sm"}
             onClick={onClose}
-            className="absolute top-4 right-4 z-20 text-white hover:bg-white/10"
+            className={`absolute z-20 text-white hover:bg-white/10 ${isMobile ? 'top-2 right-2 h-10 w-10 p-0' : 'top-4 right-4'}`}
           >
-            <X className="h-4 w-4" />
+            <X className={isMobile ? "h-5 w-5" : "h-4 w-4"} />
           </Button>
 
           {/* Header */}
-          <div className="absolute top-0 left-0 right-0 z-10 bg-gradient-to-b from-black/80 to-transparent p-4">
+          <div className={`absolute top-0 left-0 right-0 z-10 bg-gradient-to-b from-black/80 to-transparent ${isMobile ? 'p-3' : 'p-4'}`}>
             <div className="text-white">
-              <h3 className="font-medium">
+              <h3 className={`font-medium ${isMobile ? 'text-sm pr-12' : ''}`}>
                 {currentPhoto?.filename || `Photo ${currentIndex + 1}`}
               </h3>
               {photos.length > 1 && (
-                <p className="text-sm text-white/70">
+                <p className={`text-white/70 ${isMobile ? 'text-xs' : 'text-sm'}`}>
                   {currentIndex + 1} of {photos.length}
                 </p>
               )}
@@ -62,17 +105,19 @@ export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModal
           </div>
 
           {/* Image */}
-          <div className="flex items-center justify-center min-h-[400px] max-h-[80vh]">
+          <div className={`flex items-center justify-center ${isMobile ? 'min-h-screen' : 'min-h-[400px] max-h-[80vh]'}`}>
             <img
+              ref={imageRef}
               src={currentPhoto?.url}
               alt={currentPhoto?.caption || `Photo ${currentIndex + 1}`}
-              className="max-w-full max-h-full object-contain"
+              className="max-w-full max-h-full object-contain select-none"
               loading="lazy"
+              draggable={false}
             />
           </div>
 
           {/* Navigation */}
-          {photos.length > 1 && (
+          {photos.length > 1 && !isMobile && (
             <>
               <Button
                 variant="ghost"
@@ -92,11 +137,29 @@ export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModal
               </Button>
             </>
           )}
+          
+          {/* Mobile navigation dots */}
+          {photos.length > 1 && isMobile && (
+            <div className="absolute bottom-20 left-0 right-0 flex justify-center gap-2 px-4">
+              {photos.map((_, idx) => (
+                <button
+                  key={idx}
+                  onClick={() => setCurrentIndex(idx)}
+                  className={`h-2 rounded-full transition-all ${
+                    idx === currentIndex 
+                      ? 'w-8 bg-white' 
+                      : 'w-2 bg-white/50'
+                  }`}
+                  aria-label={`Go to photo ${idx + 1}`}
+                />
+              ))}
+            </div>
+          )}
 
           {/* Caption */}
           {currentPhoto?.caption && (
-            <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
-              <p className="text-white text-sm">{currentPhoto.caption}</p>
+            <div className={`absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent ${isMobile ? 'p-3' : 'p-4'} ${isMobile && photos.length > 1 ? 'pb-14' : ''}`}>
+              <p className={`text-white ${isMobile ? 'text-xs' : 'text-sm'}`}>{currentPhoto.caption}</p>
             </div>
           )}
         </div>