diff --git a/django-site/adminpage/templates/adminpage/adminpage.html b/django-site/adminpage/templates/adminpage/adminpage.html
index cf32e12..c0a45d9 100644
--- a/django-site/adminpage/templates/adminpage/adminpage.html
+++ b/django-site/adminpage/templates/adminpage/adminpage.html
@@ -77,6 +77,26 @@
       margin-bottom: 2rem;
     }
 
+    .demo-credentials {
+      background: #FFF4E0;
+      border: 1px solid #F0E0C0;
+      border-radius: 8px;
+      padding: 0.75rem;
+      margin-bottom: 1.5rem;
+      font-size: 0.8rem;
+      color: #6B5A00;
+    }
+
+    .demo-credentials strong {
+      display: block;
+      margin-bottom: 0.3rem;
+      color: #4A3D00;
+    }
+
+    .demo-credentials div {
+      margin-bottom: 0.2rem;
+    }
+
     .field-group { margin-bottom: 1.25rem; }
 
     .field-group label {
@@ -166,6 +186,25 @@
       color: var(--text);
     }
 
+    .user-badge {
+      font-size: 0.75rem;
+      padding: 0.25rem 0.6rem;
+      border-radius: 4px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .user-badge.admin {
+      background: #E6F4EA;
+      color: #276B3C;
+    }
+
+    .user-badge.user {
+      background: #E3F2FD;
+      color: #1565C0;
+    }
+
     .nav-actions {
       display: flex;
       align-items: center;
@@ -251,9 +290,39 @@
       display: flex;
       flex-direction: column;
       transition: transform 0.2s, box-shadow 0.2s;
+      position: relative;
     }
     .resource-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
 
+    .delete-btn {
+      position: absolute;
+      top: 0.5rem;
+      right: 0.5rem;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: rgba(255,255,255,0.95);
+      border: 1.5px solid #FCE8E8;
+      color: #8B2020;
+      font-size: 1.1rem;
+      cursor: pointer;
+      display: none;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s;
+      z-index: 10;
+    }
+
+    .resource-card:hover .delete-btn {
+      display: flex;
+    }
+
+    .delete-btn:hover {
+      background: #FCE8E8;
+      border-color: #8B2020;
+      transform: scale(1.1);
+    }
+
     .card-image {
       width: 100%;
       aspect-ratio: 4/3;
@@ -333,6 +402,46 @@
     }
     .empty-state p { font-size: 0.95rem; }
 
+    .reservation-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+
+    .reservation-item {
+      background: var(--surface);
+      border-radius: 8px;
+      padding: 1rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border: 1px solid var(--border);
+    }
+
+    .reservation-info h4 {
+      font-size: 0.95rem;
+      margin-bottom: 0.3rem;
+    }
+
+    .reservation-info p {
+      font-size: 0.8rem;
+      color: var(--muted);
+    }
+
+    .btn-cancel {
+      padding: 0.4rem 0.9rem;
+      background: transparent;
+      border: 1.5px solid #8B2020;
+      color: #8B2020;
+      border-radius: 6px;
+      font-size: 0.8rem;
+      font-weight: 500;
+      cursor: pointer;
+      font-family: 'DM Sans', sans-serif;
+      transition: background 0.2s, color 0.2s;
+    }
+    .btn-cancel:hover { background: #8B2020; color: white; }
+
     .modal-overlay {
       display: none;
       position: fixed;
@@ -583,6 +692,12 @@
     <h1>Sign in to continue</h1>
     <p class="subtitle">Campus Resource Reservation System</p>
 
+    <div class="demo-credentials">
+      <strong>Demo Credentials:</strong>
+      <div>👑 Admin: admin@csuchico.edu / admin123</div>
+      <div>👤 User: user@csuchico.edu / user123</div>
+    </div>
+
     <div class="field-group">
       <label>University Email</label>
       <input type="email" id="login-email" placeholder="yourname@csuchico.edu">
@@ -602,9 +717,10 @@ <h1>Sign in to continue</h1>
     <div class="nav-brand">
       <div class="nav-logo">CR</div>
       <span class="nav-title">Campus Resources</span>
+      <span class="user-badge" id="user-badge"></span>
     </div>
     <div class="nav-actions">
-      <button class="btn-outline" onclick="openAddModal()">+ Add Resource</button>
+      <button class="btn-outline" id="action-btn" style="display:none"></button>
       <button class="btn-sm-primary" onclick="doLogout()">Sign Out</button>
     </div>
   </nav>
@@ -623,13 +739,13 @@ <h1>Sign in to continue</h1>
         <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M9 9h6M9 13h4"/></svg>
         <p>No resources yet.<br>Click <strong>+ Add Resource</strong> to add one.</p>
       </div>
+      <div class="reservation-list" id="reservation-list" style="display:none"></div>
     </div>
   </div>
 </div>
 
 <!-- add resource modal -->
 <div class="modal-overlay" id="add-modal" onclick="closeOnOverlay(event,'add-modal')">
-  {% csrf_token %}
   <div class="modal-box">
     <div class="modal-header">
       <h3>Add New Resource</h3>
@@ -697,45 +813,83 @@ <h3 id="detail-title"></h3>
         <input type="checkbox" id="agree-check" onchange="toggleSchedule()">
         I agree to the campus resource usage policy
       </label>
-      <button class="btn-schedule" id="schedule-btn" disabled onclick="doSchedule()">Schedule</button>
+      <button class="btn-schedule" id="schedule-btn" disabled onclick="doSchedule()">Reserve</button>
     </div>
   </div>
 </div>
 
 <div id="toast"></div>
 
-{{ resources|json_script:"resource_data" }}
 <script>
-  const resourcedataE1 = document.getElementById('resource-data');
-  let allResources = []
-
-  if (resourcedataE1){
-    try{
-      allResources = JSON.parse(resourcedataE1.textContent);
-      console.log('Loaded resources:', allResources);
-    } catch (error){
-      console.error('Failed to parse resources:', error);
-    }
-  }
-  else{
-    console.warn('resource-data element not found');
-  }
-
-  const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]')?.value;
-
+  // Initialize resources from localStorage or use empty object
+  let allResources = JSON.parse(localStorage.getItem('campusResources')) || [];
   let currentTab = 'Books';
   let currentResource = null;
+  let currentUser = null; // { email, role: 'admin' | 'user' }
+  let userReservations = []; // Array of { resourceId, resourceName, timeSlot, timestamp }
+
+  // Mock user database (in production, this would be server-side)
+  const mockUsers = {
+    'admin@csuchico.edu': { password: 'admin123', role: 'admin' },
+    'user@csuchico.edu': { password: 'user123', role: 'user' }
+  };
 
   function doLogin() {
     const email = document.getElementById('login-email').value.trim();
     const pass = document.getElementById('login-pass').value;
     if (!email || !pass) { showToast('Please fill in all fields.'); return; }
+    
+    // Check credentials (in production, this would be server-side)
+    const user = mockUsers[email];
+    if (!user || user.password !== pass) {
+      showToast('Invalid email or password.');
+      return;
+    }
+    
+    currentUser = { email, role: user.role };
+    loadUserReservations();
+    
     document.getElementById('login-page').style.display = 'none';
     document.getElementById('app-page').style.display = 'block';
+    updateUIForRole();
     renderTab(currentTab);
   }
+  
+  function updateUIForRole() {
+    const actionBtn = document.getElementById('action-btn');
+    const userBadge = document.getElementById('user-badge');
+    
+    // Update user badge
+    userBadge.textContent = currentUser.role;
+    userBadge.className = `user-badge ${currentUser.role}`;
+    
+    if (currentUser.role === 'admin') {
+      actionBtn.textContent = '+ Add Resource';
+      actionBtn.onclick = openAddModal;
+      actionBtn.style.display = 'inline-block';
+    } else {
+      actionBtn.textContent = 'My Reservations';
+      actionBtn.onclick = showMyReservations;
+      actionBtn.style.display = 'inline-block';
+    }
+  }
+  
+  function loadUserReservations() {
+    const stored = localStorage.getItem(`reservations_${currentUser.email}`);
+    userReservations = stored ? JSON.parse(stored) : [];
+  }
+  
+  function saveUserReservations() {
+    localStorage.setItem(`reservations_${currentUser.email}`, JSON.stringify(userReservations));
+  }
+  
+  function saveResources() {
+    localStorage.setItem('campusResources', JSON.stringify(allResources));
+  }
 
   function doLogout() {
+    currentUser = null;
+    userReservations = [];
     document.getElementById('app-page').style.display = 'none';
     document.getElementById('login-page').style.display = 'flex';
     document.getElementById('login-email').value = '';
@@ -752,6 +906,12 @@ <h3 id="detail-title"></h3>
   function renderTab(tab) {
     const grid = document.getElementById('card-grid');
     const empty = document.getElementById('empty-state');
+    const reservationList = document.getElementById('reservation-list');
+    
+    // Hide reservation list
+    reservationList.style.display = 'none';
+    grid.style.display = 'grid';
+    
     const list = allResources.filter(r => r.category === tab);
     grid.innerHTML = '';
     if (list.length === 0) {
@@ -763,9 +923,11 @@ <h3 id="detail-title"></h3>
       let statusClass = 'status-unavailable';
       if (r.avail === 'Available') statusClass = 'status-available';
       else if (r.avail === 'Limited') statusClass = 'status-limited';
+      
       const card = document.createElement('div');
       card.className = 'resource-card';
       card.innerHTML = `
+        ${currentUser.role === 'admin' ? `<button class="delete-btn" onclick="deleteResource('${r.id}')">&times;</button>` : ''}
         <div class="card-image">
           <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1.2">
             <rect x="3" y="3" width="18" height="18" rx="2"/>
@@ -780,65 +942,80 @@ <h3 id="detail-title"></h3>
         </div>
         <div class="card-footer">
           <span class="card-location">📍 ${r.location}</span>
-          <button class="btn-view" onclick="openDetail(${r.id})">View details</button>
+          <button class="btn-view" onclick="openDetail('${r.id}')">View details</button>
         </div>`;
       grid.appendChild(card);
     });
   }
 
-  function openAddModal() { openModal('add-modal'); }
+  function openAddModal() { 
+    if (currentUser.role !== 'admin') {
+      showToast('Only admins can add resources.');
+      return;
+    }
+    openModal('add-modal'); 
+  }
 
-  async function submitResource() {
+  function submitResource() {
     const name = document.getElementById('r-name').value.trim();
     const loc = document.getElementById('r-location').value.trim();
     const cat = document.getElementById('r-category').value;
     const desc = document.getElementById('r-desc').value.trim();
     const avail = document.getElementById('r-avail').value;
-    if (!name || !loc || !desc) { showToast('Please fill in all required fields.'); return; }
-    try{
-      const response = await fetch('/add-resource/', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-CSRFToken': csrftoken
-        },
-        body: JSON.stringify({
-          name,
-          location: loc,
-          category: cat,
-          desc,
-          avail
-        })
-      });
-
-
-      const result = await response.json();
-      if (!result.success){
-        showToast(result.error || 'Failed to save resource.');
-        return;
-      }
-
-      allResources.push(result.resource);
-      closeModal('add-modal');
-      if (cat === currentTab) renderTab(currentTab);
-      document.querySelectorAll('.tab-btn').forEach(b => {
-        if (b.textContent === cat) b.click();
-      });
-
-      showToast(`"${name}" added to ${cat}.`);
-      document.getElementById('r-name').value = '';
-      document.getElementById('r-location').value = '';
-      document.getElementById('r-desc').value = '';
-      document.getElementById('r-avail').value = 'Available';
-    } catch (error) {
-      console.error(error);
-      showToast('Something went wrong while saving.');
+    
+    if (!name || !loc || !desc) { 
+      showToast('Please fill in all required fields.'); 
+      return; 
+    }
+    
+    const newResource = {
+      id: Date.now().toString(),
+      name,
+      location: loc,
+      category: cat,
+      desc,
+      avail
+    };
+    
+    allResources.push(newResource);
+    saveResources();
+    
+    closeModal('add-modal');
+    if (cat === currentTab) renderTab(currentTab);
+    
+    document.querySelectorAll('.tab-btn').forEach(b => {
+      if (b.textContent === cat) b.click();
+    });
+    
+    showToast(`"${name}" added to ${cat}.`);
+    
+    // Clear form
+    document.getElementById('r-name').value = '';
+    document.getElementById('r-location').value = '';
+    document.getElementById('r-desc').value = '';
+    document.getElementById('r-avail').value = 'Available';
+  }
+
+  function deleteResource(resourceId) {
+    if (currentUser.role !== 'admin') {
+      showToast('Only admins can delete resources.');
+      return;
+    }
+    
+    const resource = allResources.find(r => r.id === resourceId);
+    if (!resource) return;
+    
+    if (confirm(`Are you sure you want to delete "${resource.name}"?`)) {
+      allResources = allResources.filter(r => r.id !== resourceId);
+      saveResources();
+      renderTab(currentTab);
+      showToast(`"${resource.name}" has been deleted.`);
     }
   }
 
   function openDetail(resourceId) {
     const r = allResources.find(r => r.id === resourceId);
-    if (!r){
+    if (!r) {
       showToast("Resource not found.");
       return;
     }
@@ -874,10 +1051,75 @@ <h3 id="detail-title"></h3>
   }
 
   function doSchedule() {
+    if (currentUser.role !== 'user') {
+      showToast('Only users can make reservations.');
+      return;
+    }
+    
     const selected = document.querySelector('.time-slot.selected');
-    if (!selected) { showToast('Please select a time slot.'); return; }
+    if (!selected) { 
+      showToast('Please select a time slot.'); 
+      return; 
+    }
+    
+    const reservation = {
+      id: Date.now().toString(),
+      resourceId: currentResource.id,
+      resourceName: currentResource.name,
+      timeSlot: selected.textContent,
+      timestamp: new Date().toISOString()
+    };
+    
+    userReservations.push(reservation);
+    saveUserReservations();
+    
     closeModal('detail-modal');
-    showToast(`Scheduled: "${currentResource.name}" at ${selected.textContent}`);
+    showToast(`Reserved: "${currentResource.name}" at ${selected.textContent}`);
+  }
+
+  function showMyReservations() {
+    const grid = document.getElementById('card-grid');
+    const empty = document.getElementById('empty-state');
+    const reservationList = document.getElementById('reservation-list');
+    
+    grid.style.display = 'none';
+    empty.style.display = 'none';
+    reservationList.style.display = 'flex';
+    
+    // Update tab to show "My Reservations"
+    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+    
+    reservationList.innerHTML = '';
+    
+    if (userReservations.length === 0) {
+      reservationList.innerHTML = '<div class="empty-state" style="display:flex"><p>You have no reservations yet.</p></div>';
+      return;
+    }
+    
+    userReservations.forEach(res => {
+      const item = document.createElement('div');
+      item.className = 'reservation-item';
+      item.innerHTML = `
+        <div class="reservation-info">
+          <h4>${res.resourceName}</h4>
+          <p>Time: ${res.timeSlot} • Reserved on ${new Date(res.timestamp).toLocaleDateString()}</p>
+        </div>
+        <button class="btn-cancel" onclick="cancelReservation('${res.id}')">Cancel</button>
+      `;
+      reservationList.appendChild(item);
+    });
+  }
+
+  function cancelReservation(reservationId) {
+    const reservation = userReservations.find(r => r.id === reservationId);
+    if (!reservation) return;
+    
+    if (confirm(`Are you sure you want to cancel your reservation for "${reservation.resourceName}"?`)) {
+      userReservations = userReservations.filter(r => r.id !== reservationId);
+      saveUserReservations();
+      showMyReservations();
+      showToast('Reservation cancelled successfully.');
+    }
   }
 
   function openModal(id) { document.getElementById(id).classList.add('open'); }
@@ -896,4 +1138,4 @@ <h3 id="detail-title"></h3>
   });
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file