diff --git a/src/pages/ResourceCalendar.tsx b/src/pages/ResourceCalendar.tsx
index cc24227..771c97a 100644
--- a/src/pages/ResourceCalendar.tsx
+++ b/src/pages/ResourceCalendar.tsx
@@ -11,6 +11,18 @@ const ResourceCalendar: React.FC = () => {
   const [currentWeek, setCurrentWeek] = useState(new Date());
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  
+  // Mobile detection
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
+  
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
 
   useEffect(() => {
     if (!id) return;
@@ -20,17 +32,13 @@ const ResourceCalendar: React.FC = () => {
     const loadData = async () => {
       try {
         setLoading(true);
-        console.log('Loading calendar for resource ID:', id);
         const [resourceData, reservationsData] = await Promise.all([
           api.getResource(id),
           api.getReservations(id)
         ]);
-        console.log('Resource data:', resourceData);
-        console.log('Reservations data:', reservationsData);
         setResource(resourceData);
         setReservations(reservationsData);
       } catch (err) {
-        console.log('Error loading calendar:', err);
         setError(err instanceof Error ? err.message : 'Failed to load data');
       } finally {
         setLoading(false);
@@ -43,8 +51,6 @@ const ResourceCalendar: React.FC = () => {
   const weekStart = startOfWeek(currentWeek, { weekStartsOn: 1 });
   const weekDays = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i));
   
-  
-  
   // Generate time slots from 8 AM to 8 PM
   const timeSlots = Array.from({ length: 13 }, (_, i) => {
     const hour = i + 8; // Start at 8 AM
@@ -69,7 +75,8 @@ const ResourceCalendar: React.FC = () => {
   };
 
   const navigateWeek = (direction: 'prev' | 'next') => {
-    setCurrentWeek(prev => addDays(prev, direction === 'next' ? 7 : -7));
+    const days = direction === 'next' ? 7 : -7;
+    setCurrentWeek(addDays(currentWeek, days));
   };
 
   if (loading) {
@@ -100,105 +107,132 @@ const ResourceCalendar: React.FC = () => {
   }
 
   return (
-    <div>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
-        <div>
-          <h2>{resource.name} - Calendar</h2>
-          {resource.description && (
-            <p style={{ color: '#666', margin: '0.5rem 0' }}>{resource.description}</p>
-          )}
-        </div>
+    <div style={{ padding: '0.5rem', maxWidth: '100vw', overflowX: 'auto' }}>
+      {/* Header - Mobile Optimized */}
+      <div style={{ marginBottom: '1.5rem' }}>
+        <h2 style={{ margin: '0 0 0.5rem 0', fontSize: '1.5rem' }}>{resource.name}</h2>
+        {resource.description && (
+          <p style={{ color: '#666', margin: '0 0 1rem 0', fontSize: '0.875rem' }}>{resource.description}</p>
+        )}
         <Link 
-          to={`/reservations/new?resourceId=${resource.id}`}
+          to={`/reservations/new?resourceId=${resource.resourceId}`}
           style={{
             display: 'inline-block',
-            padding: '0.75rem 1.5rem',
+            width: '100%',
+            padding: '0.75rem',
             backgroundColor: '#27ae60',
             color: 'white',
             textDecoration: 'none',
             borderRadius: '4px',
-            fontWeight: '500'
+            fontWeight: '500',
+            textAlign: 'center',
+            fontSize: '0.875rem'
           }}
         >
           Book This Resource
         </Link>
       </div>
 
-      {/* Week Navigation */}
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem', padding: '1rem', backgroundColor: '#f8f9fa', borderRadius: '4px' }}>
-        <button 
-          onClick={() => navigateWeek('prev')}
-          style={{
-            padding: '0.5rem 1rem',
-            backgroundColor: '#3498db',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer'
-          }}
-        >
-          ← Previous Week
-        </button>
-        <h3 style={{ margin: 0, color: '#2c3e50' }}>
+      {/* Week Navigation - Mobile Optimized */}
+      <div style={{ 
+        display: 'flex', 
+        flexDirection: 'column', 
+        gap: '0.75rem', 
+        marginBottom: '1.5rem', 
+        padding: '1rem', 
+        backgroundColor: '#f8f9fa', 
+        borderRadius: '4px',
+        textAlign: 'center'
+      }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <button 
+            onClick={() => navigateWeek('prev')}
+            style={{
+              padding: '0.5rem 1rem',
+              backgroundColor: '#3498db',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              fontSize: '0.875rem',
+              flex: 1,
+              marginRight: '0.5rem'
+            }}
+          >
+            ← Previous
+          </button>
+          <button 
+            onClick={() => navigateWeek('next')}
+            style={{
+              padding: '0.5rem 1rem',
+              backgroundColor: '#3498db',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              fontSize: '0.875rem',
+              flex: 1,
+              marginLeft: '0.5rem'
+            }}
+          >
+            Next →
+          </button>
+        </div>
+        <h3 style={{ margin: '0.5rem 0 0 0', color: '#2c3e50', fontSize: '1rem' }}>
           {format(weekStart, 'MMM d')} - {format(addDays(weekStart, 6), 'MMM d, yyyy')}
         </h3>
-        <button 
-          onClick={() => navigateWeek('next')}
-          style={{
-            padding: '0.5rem 1rem',
-            backgroundColor: '#3498db',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer'
-          }}
-        >
-          Next Week →
-        </button>
       </div>
 
-      {/* Calendar Grid */}
+      {/* Calendar Grid - Mobile Responsive */}
       <div style={{ 
         border: '1px solid #ddd', 
         borderRadius: '4px', 
         overflow: 'hidden',
-        backgroundColor: 'white'
+        backgroundColor: 'white',
+        fontSize: '0.75rem'
       }}>
-        {/* Header Row */}
-        <div style={{ display: 'grid', gridTemplateColumns: '100px repeat(7, 1fr)', backgroundColor: '#2c3e50', color: 'white' }}>
-          <div style={{ padding: '1rem', textAlign: 'center', fontWeight: 'bold', borderRight: '1px solid #ddd' }}>
+        {/* Header Row - Mobile Responsive */}
+        <div style={{ 
+          display: 'grid', 
+          gridTemplateColumns: isMobile ? '50px repeat(7, 0.8fr)' : '60px repeat(7, 1fr)', 
+          backgroundColor: '#2c3e50', 
+          color: 'white',
+          fontSize: isMobile ? '0.6rem' : '0.7rem'
+        }}>
+          <div style={{ padding: '0.5rem', textAlign: 'center', fontWeight: 'bold', borderRight: '1px solid #ddd' }}>
             Time
           </div>
           {weekDays.map((day, index) => (
             <div 
               key={index} 
               style={{ 
-                padding: '1rem', 
+                padding: '0.5rem', 
                 textAlign: 'center', 
                 fontWeight: 'bold',
                 borderRight: index < 6 ? '1px solid #ddd' : 'none',
                 backgroundColor: isToday(day) ? '#34495e' : 'transparent'
               }}
             >
-              <div>{format(day, 'EEEE')}</div>
-              <div style={{ fontSize: '0.875rem', opacity: 0.8 }}>
-                {format(day, 'MMM d')}
+              <div>{format(day, 'EEE')}</div>
+              <div style={{ fontSize: '0.7rem', opacity: 0.8 }}>
+                {format(day, 'M/d')}
               </div>
             </div>
           ))}
         </div>
-
-        {/* Time Slots */}
+        
+        {/* Time Slots - Mobile Responsive */}
         {timeSlots.map((timeSlot, timeIndex) => (
-          <div key={timeIndex} style={{ display: 'grid', gridTemplateColumns: '100px repeat(7, 1fr)' }}>
+          <div key={timeIndex} style={{ display: 'grid', gridTemplateColumns: isMobile ? '50px repeat(7, 0.8fr)' : '60px repeat(7, 1fr)' }}>
             {/* Time Column */}
             <div style={{ 
-              padding: '0.75rem', 
+              padding: '0.5rem', 
               textAlign: 'center', 
               borderRight: '1px solid #ddd', 
               borderBottom: '1px solid #ddd',
               backgroundColor: '#f8f9fa',
-              fontSize: '0.875rem'
+              fontSize: '0.7rem',
+              fontWeight: '500'
             }}>
               {format(timeSlot, 'h a')}
             </div>
@@ -215,27 +249,46 @@ const ResourceCalendar: React.FC = () => {
                     borderRight: dayIndex < 6 ? '1px solid #ddd' : 'none',
                     borderBottom: '1px solid #ddd',
                     backgroundColor: reservation 
-                      ? reservation.status === 'confirmed' ? '#d4edda' 
-                      : reservation.status === 'cancelled' ? '#f8d7da' 
-                      : '#fff3cd'
+                      ? '#d4edda' 
                       : isToday(day) ? '#f8f9fa' : 'white',
-                    fontSize: '0.75rem',
-                    minHeight: '40px',
+                    fontSize: '0.7rem',
+                    minHeight: '35px',
                     display: 'flex',
                     alignItems: 'center',
-                    justifyContent: 'center'
+                    justifyContent: 'center',
+                    position: 'relative'
                   }}
                 >
                   {reservation && (
                     <div style={{
                       textAlign: 'center',
-                      color: reservation.status === 'cancelled' ? '#721c24' : '#333',
+                      color: '#333',
                       fontWeight: '500',
-                      padding: '0.25rem'
+                      padding: '0.2rem',
+                      width: '100%',
+                      height: '100%',
+                      overflow: 'hidden',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      justifyContent: 'center'
                     }}>
-                      <div style={{ fontWeight: 'bold' }}>{reservation.title}</div>
-                      <div style={{ fontSize: '0.625rem', opacity: 0.8 }}>
-                        {format(new Date(reservation.startDate), 'h:mm')} - {format(new Date(reservation.endDate), 'h:mm')}
+                      <div style={{ 
+                        fontWeight: 'bold', 
+                        fontSize: '0.6rem',
+                        lineHeight: '1.2',
+                        overflow: 'hidden',
+                        display: '-webkit-box',
+                        WebkitLineClamp: 2,
+                        WebkitBoxOrient: 'vertical'
+                      }}>
+                        {reservation.title}
+                      </div>
+                      <div style={{ 
+                        fontSize: '0.55rem', 
+                        opacity: 0.8,
+                        lineHeight: '1'
+                      }}>
+                        {format(new Date(reservation.startDate), 'h:mm')}
                       </div>
                     </div>
                   )}