diff --git a/public/admin.js b/public/admin.js
deleted file mode 100644
index ae15582..0000000
--- a/public/admin.js
+++ /dev/null
@@ -1,1549 +0,0 @@
-// public/admin.js (for admin.html)
-
-// Global variables
-let currentAdminDate = new Date();
-let currentAdminMonth = currentAdminDate.getMonth();
-let currentAdminYear = currentAdminDate.getFullYear();
-let selectedAdminDate = null;
-const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-
-// Helper function to convert time string to minutes since midnight
-function timeToMinutes(timeStr) {
-    const match = timeStr.match(/([0-9]+)(?::([0-9]+))?(am|pm)/i);
-    if (!match) return 0;
-    
-    let hours = parseInt(match[1]);
-    const minutes = parseInt(match[2] || '0');
-    const meridian = match[3].toLowerCase();
-    
-    if (meridian === 'pm' && hours !== 12) {
-        hours += 12;
-    } else if (meridian === 'am' && hours === 12) {
-        hours = 0;
-    }
-    
-    return hours * 60 + minutes;
-}
-
-// Helper function to ensure consistent time format
-function formatTimeSlot(hour) {
-    const meridian = hour >= 12 ? 'pm' : 'am';
-    const displayHour = hour > 12 ? hour - 12 : (hour === 0 ? 12 : hour);
-    return `${displayHour}:00${meridian}`;
-}
-
-// Render the admin calendar with available dates highlighted
-async function renderAdminCalendar(month, year) {
-    const adminCalendarDates = document.getElementById('adminCalendarDates');
-    const adminMonthYear = document.getElementById('adminMonthYear');
-    if (!adminCalendarDates || !adminMonthYear) {
-        console.error('Required calendar elements not found');
-        return;
-    }
-
-    // Clear existing calendar
-    adminCalendarDates.innerHTML = '';
-    adminMonthYear.textContent = `${months[month]} ${year}`;
-
-    // Get current UID and availability
-    const selectedUid = document.getElementById('uidSelect').value;
-    if (!selectedUid) {
-        // If no UID selected, just show empty calendar
-        return;
-    }
-
-    const firstDay = new Date(year, month, 1).getDay();
-    const daysInMonth = new Date(year, month + 1, 0).getDate();
-    const today = new Date();
-    const currentMinutes = today.getHours() * 60 + today.getMinutes();
-    const availability = await fetchAvailability();
-
-    // Start of today (midnight)
-    const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
-
-    // Create blank cells for days before the first day of the month
-    for (let i = 0; i < firstDay; i++) {
-        const blank = document.createElement('div');
-        blank.classList.add('date-item', 'p-2', 'rounded-pill', 'text-center', 'text-muted', 'empty-cell');
-        blank.style.cursor = 'default'; // Remove pointer cursor
-        blank.style.pointerEvents = 'none'; // Disable hover and click events
-        adminCalendarDates.appendChild(blank);
-    }
-
-    // Clear any existing selected date
-    const existingSelected = adminCalendarDates.querySelector('.selected');
-    if (existingSelected) {
-        existingSelected.classList.remove('selected');
-    }
-
-    // Populate the calendar with days
-    let todayElement = null;
-    for (let i = 1; i <= daysInMonth; i++) {
-        const day = document.createElement('div');
-        day.classList.add('date-item', 'p-2', 'rounded-pill', 'text-center');
-        day.textContent = i;
-        const date = new Date(year, month, i);
-        const dateStr = date.toISOString().split('T')[0];
-
-        // Check if date is in the past
-        const isPastDate = date < startOfToday;
-        const isToday = date.toDateString() === today.toDateString();
-
-        if (isToday) {
-            day.classList.add('current');
-            todayElement = day;
-        }
-        
-        // Check if the date has available time slots
-        let hasAvailableTimes = false;
-        if (availability[dateStr]) {
-            let times = [];
-            if (typeof availability[dateStr] === 'string') {
-                times = availability[dateStr].split(',').map(t => t.trim());
-            } else if (Array.isArray(availability[dateStr])) {
-                times = availability[dateStr].map(t => t.trim());
-            }
-            
-            // For today, filter out past times
-            if (isToday) {
-                times = times.filter(time => timeToMinutes(time) > currentMinutes);
-            }
-            
-            // Only mark as available if there are valid times
-            hasAvailableTimes = times.length > 0;
-        }
-        
-        // Only add 'available' class if the date is not in the past AND has available times
-        if (hasAvailableTimes && !isPastDate) {
-            day.classList.add('available');
-        }
-        
-        if (isPastDate) {
-            day.classList.add('disabled');
-        } else {
-            day.addEventListener('click', () => selectAdminDate(date, firstDay));
-        }
-        adminCalendarDates.appendChild(day);
-    }
-
-    // If a date was previously selected, re-select it
-    if (selectedAdminDate && 
-        selectedAdminDate.getMonth() === month && 
-        selectedAdminDate.getFullYear() === year) {
-        selectAdminDate(selectedAdminDate, firstDay);
-    }
-}
-
-// Handle admin date selection
-async function selectAdminDate(date, firstDay) {
-    // Check if the date is in the past
-    const today = new Date();
-    const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
-    if (date < startOfToday) {
-        console.warn('Attempted to select a past date');
-        return;
-    }
-
-    // Update selected date and time slots
-    selectedAdminDate = date;
-    await updateTimeSlots(date);
-    const dateItems = document.querySelectorAll('#adminCalendarDates .date-item');
-    dateItems.forEach(item => item.classList.remove('selected')); // Ensure only one date is selected
-    // Find the exact date item for the clicked date
-    const selectedDay = Array.from(dateItems).find(item => {
-        const dayText = item.textContent;
-        const itemDate = new Date(currentAdminYear, currentAdminMonth, parseInt(dayText));
-        return itemDate.toDateString() === date.toDateString();
-    });
-    if (selectedDay) selectedDay.classList.add('selected');
-    
-    // Remove the selected date display text
-    const selectedDateDisplay = document.getElementById('selectedDateDisplay');
-    if (selectedDateDisplay) {
-        selectedDateDisplay.textContent = '';
-    }
-}
-
-// Update time slots based on selected date
-async function updateTimeSlots(date) {
-    const availability = await fetchAvailability();
-    const dateStr = date.toISOString().split('T')[0];
-    let availableTimes = [];
-    
-    // Handle case where availability might be undefined or null
-    if (availability && availability[dateStr]) {
-        if (typeof availability[dateStr] === 'string') {
-            availableTimes = availability[dateStr].split(',').map(t => t.trim());
-        } else if (Array.isArray(availability[dateStr])) {
-            availableTimes = [...availability[dateStr]];
-        }
-    }
-
-    // Sort available times chronologically
-    availableTimes.sort((a, b) => timeToMinutes(a) - timeToMinutes(b));
-
-    const timeSlots = document.getElementById('timeSlots');
-    if (!timeSlots) return;
-    
-    // Clear existing time slots
-    timeSlots.innerHTML = '';
-    
-    // Create time button directly without the container and heading
-    const timeButton = document.createElement('button');
-    timeButton.type = 'button';
-    timeButton.id = 'customTimeInput';
-    timeButton.classList.add('btn', 'btn-success', 'btn-lg', 'w-100', 'mb-4');
-    timeButton.style.backgroundColor = '#2e8b57'; // Money green color
-    timeButton.style.borderColor = '#2e8b57';
-    timeButton.style.fontSize = '1.25rem';
-    timeButton.style.padding = '0.75rem 1.25rem';
-    timeButton.innerHTML = '<i class="bi bi-clock"></i> Add Time Slot';
-    
-    // Add button directly to time slots
-    timeSlots.appendChild(timeButton);
-    
-    // Initialize visual time picker
-    initializeVisualTimePicker(dateStr, availableTimes);
-    
-    // Add divider
-    const divider = document.createElement('hr');
-    timeSlots.appendChild(divider);
-    
-    // Display existing time slots
-    if (availableTimes.length === 0) {
-        const noTimesMessage = document.createElement('p');
-        noTimesMessage.classList.add('text-muted', 'text-center');
-        noTimesMessage.textContent = 'No time slots available for this date.';
-        timeSlots.appendChild(noTimesMessage);
-    } else {
-        // Create container for time slot list
-        const timeSlotsContainer = document.createElement('div');
-        timeSlotsContainer.classList.add('d-flex', 'flex-column', 'gap-2', 'mt-3');
-
-        // Display all slots in chronological order
-        availableTimes.forEach(time => {
-            // Create a container div for the time slot
-            const timeSlotContainer = document.createElement('div');
-            timeSlotContainer.classList.add('position-relative', 'w-100', 'd-flex', 'align-items-center', 'mb-2');
-            
-            // Create the time slot pill
-            const timeSlotItem = document.createElement('div');
-            timeSlotItem.classList.add('btn', 'btn-light', 'rounded-pill', 'px-4', 'py-3', 'flex-grow-1');
-            timeSlotItem.style.backgroundColor = '#e9f2ff';
-            timeSlotItem.style.color = '#0d6efd';
-            timeSlotItem.style.border = '1px solid #0d6efd';
-            timeSlotItem.style.textAlign = 'center';
-            timeSlotItem.style.fontSize = '1.1rem';
-            timeSlotItem.style.fontWeight = '500';
-            timeSlotItem.style.transition = 'all 0.2s ease';
-            
-            // Add time text directly to the pill
-            timeSlotItem.textContent = time;
-            
-            // Add delete button/icon as a separate element
-            const deleteIcon = document.createElement('button');
-            deleteIcon.innerHTML = '<i class="bi bi-trash"></i>';
-            deleteIcon.classList.add('btn', 'btn-sm', 'text-danger', 'ms-3');
-            deleteIcon.style.backgroundColor = 'transparent';
-            deleteIcon.style.border = 'none';
-            deleteIcon.style.fontSize = '1.2rem';
-            deleteIcon.style.padding = '8px';
-            deleteIcon.style.cursor = 'pointer';
-            deleteIcon.style.transition = 'all 0.2s ease';
-            deleteIcon.style.opacity = '0.8';
-            deleteIcon.style.borderRadius = '50%';
-            deleteIcon.style.display = 'flex';
-            deleteIcon.style.alignItems = 'center';
-            deleteIcon.style.justifyContent = 'center';
-            
-            // Add hover effects
-            timeSlotItem.addEventListener('mouseenter', () => {
-                timeSlotItem.style.backgroundColor = '#0d6efd';
-                timeSlotItem.style.color = 'white';
-                timeSlotItem.style.transform = 'translateY(-2px)';
-                timeSlotItem.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
-            });
-            
-            timeSlotItem.addEventListener('mouseleave', () => {
-                timeSlotItem.style.backgroundColor = '#e9f2ff';
-                timeSlotItem.style.color = '#0d6efd';
-                timeSlotItem.style.transform = 'translateY(0)';
-                timeSlotItem.style.boxShadow = 'none';
-            });
-            
-            // Add hover effects for delete icon
-            deleteIcon.addEventListener('mouseenter', () => {
-                deleteIcon.style.opacity = '1';
-                deleteIcon.style.transform = 'scale(1.2)';
-                deleteIcon.style.backgroundColor = 'rgba(220, 53, 69, 0.1)';
-            });
-            
-            deleteIcon.addEventListener('mouseleave', () => {
-                deleteIcon.style.opacity = '0.8';
-                deleteIcon.style.transform = 'scale(1)';
-                deleteIcon.style.backgroundColor = 'transparent';
-            });
-            
-            deleteIcon.addEventListener('click', (e) => {
-                e.stopPropagation();
-                removeTime(dateStr, time);
-            });
-            
-            timeSlotContainer.appendChild(timeSlotItem);
-            timeSlotContainer.appendChild(deleteIcon);
-            timeSlotsContainer.appendChild(timeSlotContainer);
-        });
-        
-        timeSlots.appendChild(timeSlotsContainer);
-    }
-}
-
-// Initialize visual time picker function
-function initializeVisualTimePicker(dateStr, availableTimes) {
-    const timeButton = document.getElementById('customTimeInput');
-    if (!timeButton) return;
-    
-    // Remove any existing time picker
-    const existingTimePicker = document.getElementById('visualTimePicker');
-    if (existingTimePicker) {
-        existingTimePicker.remove();
-    }
-    
-    // Create the timepicker modal from the template - moved to a separate function for clarity
-    document.body.insertAdjacentHTML('beforeend', createTimepickerTemplate());
-        
-    // Initialize timepicker functionality and store the reference to the controller
-    const timepickerController = initializeTimepickerFunctionality(dateStr, availableTimes);
-    
-    // Show time picker when button is clicked
-    timeButton.addEventListener('click', (e) => {
-        showTimepicker(timepickerController);
-        e.stopPropagation();
-    });
-    
-    // Close time picker when clicking outside
-    document.addEventListener('click', (e) => {
-        const timepicker = document.getElementById('visualTimePicker');
-        const timepickerContainer = document.querySelector('.timepicker-container');
-        
-        // Only close if we're not in the middle of a drag operation
-        if (timepicker && 
-            timepicker.style.display === 'block' && 
-            e.target !== timeButton && 
-            (!timepickerContainer || !timepickerContainer.contains(e.target)) &&
-            !window.timepickerDragging) { // Check the global dragging flag
-            timepickerController.closeTimepicker();
-        }
-    });
-}
-
-// Helper function to show the timepicker
-function showTimepicker(timepickerController) {
-    const timepicker = document.getElementById('visualTimePicker');
-    if (!timepicker) return;
-    
-    // First make the timepicker visible but with opacity 0
-    timepicker.style.display = 'block';
-    timepicker.style.opacity = '0';
-    
-    // Force a reflow to ensure the clock dimensions are calculated
-    setTimeout(() => {
-        // Always start with hours view when opening the timepicker
-        timepickerController.switchToHoursView();
-        
-        // Make the timepicker visible
-        timepicker.style.opacity = '1';
-        document.body.style.overflow = 'hidden';
-        document.body.style.paddingRight = '0px';
-    }, 10);
-}
-
-// Create the timepicker HTML template
-function createTimepickerTemplate() {
-    return `
-    <div class="timepicker-modal" role="dialog" tabindex="-1" id="visualTimePicker" style="display: none;">
-      <div id="timepickerWrapper" class="timepicker-wrapper h-100 d-flex align-items-center justify-content-center flex-column position-fixed animation fade-in" style="animation-duration: 300ms;">
-        <div class="d-flex align-items-center justify-content-center flex-column timepicker-container">
-          <div class="d-flex flex-column timepicker-elements justify-content-around">
-            
-            <div id="timepickerHead" class="timepicker-head d-flex flex-row align-items-center justify-content-center" style="padding-right:0px">
-              <div class="timepicker-head-content d-flex w-100 justify-content-evenly">
-                <div class="timepicker-current-wrapper">
-                  <span class="position-relative h-100">
-                    <button type="button" class="timepicker-current timepicker-hour active" tabindex="0" style="pointer-events: none;">12</button>
-                  </span>
-                  <button type="button" class="timepicker-dot" disabled="">:</button>
-                  <span class="position-relative h-100">
-                    <button type="button" class="timepicker-current timepicker-minute" tabindex="0">00</button>
-                  </span>
-                </div>
-            
-                <div class="d-flex flex-column justify-content-center timepicker-mode-wrapper">
-                  <button type="button" class="timepicker-hour-mode timepicker-am" tabindex="0">AM</button>
-                  <button type="button" class="timepicker-hour-mode timepicker-pm active" tabindex="0">PM</button>
-                </div>
-              </div>
-            </div>
-      
-            <div id="timepickerClockWrapper" class="timepicker-clock-wrapper d-flex justify-content-center flex-column align-items-center">
-              <div class="timepicker-clock timepicker-clock-animation">
-                <span class="timepicker-middle-dot position-absolute"></span>
-                <div class="timepicker-hand-pointer position-absolute" style="transform: rotateZ(360deg);">
-                  <div class="timepicker-circle position-absolute active"></div>
-                </div>
-                <!-- Clock face will be dynamically generated by JS -->
-              </div>
-            </div>
-          </div>
-            
-          <div id="timepickerFooter" class="timepicker-footer">
-            <div class="w-100 d-flex justify-content-between">
-              <button type="button" class="timepicker-button timepicker-clear" tabindex="0">Clear</button>
-              <button type="button" class="timepicker-button timepicker-cancel" tabindex="0">Cancel</button>
-              <button type="button" class="timepicker-button timepicker-submit" tabindex="0">Ok</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>`;
-}
-
-// Initialize the timepicker functionality
-function initializeTimepickerFunctionality(dateStr, availableTimes) {
-    // DOM elements - group related elements together
-    const timeElements = {
-        hour: document.querySelector('.timepicker-hour'),
-        minute: document.querySelector('.timepicker-minute'),
-        am: document.querySelector('.timepicker-am'),
-        pm: document.querySelector('.timepicker-pm'),
-        dot: document.querySelector('.timepicker-dot')
-    };
-    
-    const clockElements = {
-        wrapper: document.querySelector('.timepicker-clock-wrapper'),
-        clock: document.querySelector('.timepicker-clock'),
-        hand: document.querySelector('.timepicker-hand-pointer')
-    };
-    
-    const actionButtons = {
-        clear: document.querySelector('.timepicker-clear'),
-        cancel: document.querySelector('.timepicker-cancel'),
-        submit: document.querySelector('.timepicker-submit')
-    };
-
-    // State variables
-    const state = {
-        currentView: 'hours',
-        selectedHour: 12,
-        selectedMinute: 0,
-        isDragging: false,
-        isPM: timeElements.pm.classList.contains('active')
-    };
-    
-    // Create a global variable to track if we're dragging from inside the timepicker
-    window.timepickerDragging = false;
-
-    // Initialize
-    setupEventListeners();
-    renderClockFace(state.currentView);
-
-    function setupEventListeners() {
-        // Header hour/minute buttons
-        timeElements.hour.addEventListener('click', () => switchView('hours'));
-        timeElements.minute.addEventListener('click', () => switchView('minutes'));
-        
-        // Clock face events
-        clockElements.clock.addEventListener('mousedown', handleClockMouseDown);
-        document.addEventListener('mousemove', handleClockMouseMove);
-        document.addEventListener('mouseup', handleClockMouseUp);
-        
-        // Prevent text selection on the clock
-        clockElements.clock.style.userSelect = 'none';
-        clockElements.clock.style.webkitUserSelect = 'none';
-        clockElements.clock.style.msUserSelect = 'none';
-        
-        // AM/PM buttons
-        timeElements.am.addEventListener('click', () => setAmPm('AM'));
-        timeElements.pm.addEventListener('click', () => setAmPm('PM'));
-        
-        // Action buttons
-        actionButtons.clear.addEventListener('click', clearTime);
-        actionButtons.cancel.addEventListener('click', closeTimepicker);
-        actionButtons.submit.addEventListener('click', submitTime);
-    }
-
-    function switchView(view) {
-        state.currentView = view;
-        
-        // Update active state in header
-        if (view === 'hours') {
-            timeElements.hour.classList.add('active');
-            timeElements.minute.classList.remove('active');
-            timeElements.hour.style.pointerEvents = 'none';
-            timeElements.minute.style.pointerEvents = 'auto';
-        } else {
-            timeElements.hour.classList.remove('active');
-            timeElements.minute.classList.add('active');
-            timeElements.hour.style.pointerEvents = 'auto';
-            timeElements.minute.style.pointerEvents = 'none';
-        }
-        
-        renderClockFace(view);
-    }
-
-    function renderClockFace(view) {
-        // Clear existing time tips
-        const existingTips = clockElements.clock.querySelectorAll('.timepicker-time-tips-hours, .timepicker-time-tips-minutes');
-        existingTips.forEach(tip => tip.remove());
-        
-        if (view === 'hours') {
-            renderHoursFace();
-            updateHandPosition(state.selectedHour, 'hours');
-        } else {
-            renderMinutesFace();
-            updateHandPosition(state.selectedMinute, 'minutes');
-        }
-    }
-
-    function renderHoursFace() {
-        const clockRadius = clockElements.clock.offsetWidth / 2;
-        const tipRadius = clockRadius * 0.85; // Position closer to the edge (85% of radius)
-        
-        for (let hour = 1; hour <= 12; hour++) {
-            const tip = createClockTip(hour, clockRadius, tipRadius, 'hours');
-            
-            if (hour === state.selectedHour) {
-                tip.classList.add('active');
-            }
-            
-            clockElements.clock.appendChild(tip);
-        }
-    }
-
-    function renderMinutesFace() {
-        const clockRadius = clockElements.clock.offsetWidth / 2;
-        const tipRadius = clockRadius * 0.85; // Position closer to the edge (85% of radius)
-        
-        for (let minute = 0; minute < 60; minute += 5) {
-            const tip = createClockTip(minute, clockRadius, tipRadius, 'minutes');
-            
-            if (minute === state.selectedMinute) {
-                tip.classList.add('active');
-            }
-            
-            clockElements.clock.appendChild(tip);
-        }
-    }
-    
-    // Helper function to create clock face tips (numbers)
-    function createClockTip(value, clockRadius, tipRadius, type) {
-        // Calculate angle and position
-        let angle, displayValue;
-        
-        if (type === 'hours') {
-            angle = ((value * 30) - 90) * (Math.PI / 180);
-            displayValue = value;
-        } else {
-            angle = ((value * 6) - 90) * (Math.PI / 180);
-            displayValue = value.toString().padStart(2, '0');
-        }
-        
-        // Calculate position
-        const left = clockRadius + tipRadius * Math.cos(angle);
-        const top = clockRadius + tipRadius * Math.sin(angle);
-        
-        // Create the tip element
-        const tip = document.createElement('span');
-        tip.className = `timepicker-time-tips-${type}`;
-        tip.style.left = `${left}px`;
-        tip.style.top = `${top}px`;
-        tip.style.position = 'absolute';
-        tip.style.transform = 'translate(-50%, -50%)';
-        tip.style.userSelect = 'none';
-        tip.style.webkitUserSelect = 'none';
-        tip.style.msUserSelect = 'none';
-        
-        const tipElement = document.createElement('span');
-        tipElement.className = 'timepicker-tips-element';
-        tipElement.textContent = displayValue;
-        
-        tip.appendChild(tipElement);
-        return tip;
-    }
-
-    function updateHandPosition(value, view) {
-        let angle;
-        
-        if (view === 'hours') {
-            // For hours, convert 12 to 0 for calculation purposes
-            const hour = value === 12 ? 0 : value;
-            angle = (hour / 12) * 360;
-        } else {
-            angle = (value / 60) * 360;
-        }
-        
-        clockElements.hand.style.transform = `rotateZ(${angle}deg)`;
-        
-        // Update the active circle on the hand
-        const circle = clockElements.hand.querySelector('.timepicker-circle');
-        if (circle) {
-            circle.classList.add('active');
-        }
-    }
-
-    function handleClockMouseDown(event) {
-        state.isDragging = true;
-        // Set the global flag to indicate we're dragging from inside the timepicker
-        window.timepickerDragging = true;
-        updateTimeFromClockPosition(event);
-    }
-
-    function handleClockMouseMove(event) {
-        if (state.isDragging) {
-            updateTimeFromClockPosition(event);
-        }
-    }
-
-    function handleClockMouseUp() {
-        if (state.isDragging) {
-            state.isDragging = false;
-            
-            // Reset the global dragging flag after a short delay
-            // This allows the click event to process first
-            setTimeout(() => {
-                window.timepickerDragging = false;
-            }, 10);
-            
-            // If we just finished selecting an hour, switch to minutes
-            if (state.currentView === 'hours') {
-                switchView('minutes');
-            }
-        }
-    }
-
-    function updateTimeFromClockPosition(event) {
-        const clockRect = clockElements.clock.getBoundingClientRect();
-        const centerX = clockRect.left + clockRect.width / 2;
-        const centerY = clockRect.top + clockRect.height / 2;
-        
-        // Calculate angle from center to mouse position
-        const x = event.clientX - centerX;
-        const y = event.clientY - centerY;
-        
-        // Calculate angle in degrees, starting from 12 o'clock position
-        let angle = Math.atan2(y, x) * (180 / Math.PI) + 90;
-        
-        // Normalize angle to 0-360
-        if (angle < 0) {
-            angle += 360;
-        }
-        
-        if (state.currentView === 'hours') {
-            updateHourFromAngle(angle);
-        } else {
-            updateMinuteFromAngle(angle);
-        }
-    }
-    
-    function updateHourFromAngle(angle) {
-        // Convert angle to hour (1-12)
-        let hour = Math.round(angle / 30);
-        
-        // Handle edge cases for full circle
-        if (hour === 0 || hour > 12) hour = 12;
-        
-        state.selectedHour = hour;
-        timeElements.hour.textContent = hour;
-        updateHandPosition(hour, 'hours');
-        
-        // Update active class on hour tips
-        const hourTips = clockElements.clock.querySelectorAll('.timepicker-time-tips-hours');
-        hourTips.forEach(tip => {
-            const hourValue = parseInt(tip.querySelector('.timepicker-tips-element').textContent);
-            if (hourValue === state.selectedHour) {
-                tip.classList.add('active');
-            } else {
-                tip.classList.remove('active');
-            }
-        });
-    }
-    
-    function updateMinuteFromAngle(angle) {
-        // Convert angle to minute (0-55, step 5)
-        let minute = Math.floor(angle / 6);
-        
-        // Round to nearest 5
-        minute = Math.round(minute / 5) * 5;
-        
-        // Handle edge case for full circle
-        if (minute >= 60) minute = 0;
-        
-        state.selectedMinute = minute;
-        timeElements.minute.textContent = minute.toString().padStart(2, '0');
-        updateHandPosition(minute, 'minutes');
-        
-        // Update active class on minute tips
-        const minuteTips = clockElements.clock.querySelectorAll('.timepicker-time-tips-minutes');
-        minuteTips.forEach(tip => {
-            const minuteValue = parseInt(tip.querySelector('.timepicker-tips-element').textContent);
-            if (minuteValue === state.selectedMinute) {
-                tip.classList.add('active');
-            } else {
-                tip.classList.remove('active');
-            }
-        });
-    }
-
-    function setAmPm(period) {
-        if (period === 'AM') {
-            timeElements.am.classList.add('active');
-            timeElements.pm.classList.remove('active');
-            state.isPM = false;
-        } else {
-            timeElements.am.classList.remove('active');
-            timeElements.pm.classList.add('active');
-            state.isPM = true;
-        }
-    }
-
-    function clearTime() {
-        state.selectedHour = 12;
-        state.selectedMinute = 0;
-        timeElements.hour.textContent = '12';
-        timeElements.minute.textContent = '00';
-        setAmPm('PM');
-        switchView('hours');
-    }
-
-    function closeTimepicker() {
-        const timepicker = document.getElementById('visualTimePicker');
-        if (timepicker) {
-            timepicker.style.display = 'none';
-            document.body.style.overflow = '';
-            document.body.style.paddingRight = '';
-        }
-    }
-
-    function submitTime() {
-        const formattedHour = state.selectedHour;
-        const formattedMinute = state.selectedMinute.toString().padStart(2, '0');
-        const period = state.isPM ? 'PM' : 'AM';
-        
-        const timeValue = `${formattedHour}:${formattedMinute}${period.toLowerCase()}`;
-        
-        // Check if time already exists in available times
-        if (availableTimes.includes(timeValue)) {
-            // Silently handle duplicate time slots - no error message
-            console.log('Time slot already exists, not adding duplicate');
-        } else {
-            // Automatically add the time slot
-            addSingleTime(dateStr, timeValue);
-        }
-        
-        closeTimepicker();
-    }
-
-    // Return controller object with public methods
-    return {
-        renderClockFace,
-        closeTimepicker,
-        switchToHoursView: () => switchView('hours')
-    };
-}
-
-// Fetch available dates from the API
-async function fetchAvailability() {
-    try {
-        const selectedUid = document.getElementById('uidSelect').value;
-        if (!selectedUid) return {};
-
-        const response = await fetch(`/api/availability/${selectedUid}`);
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        const availability = await response.json();
-        return availability;
-    } catch (error) {
-        console.error('Error fetching availability:', error);
-        return {};
-    }
-}
-
-// Helper function to update calendar UI after availability changes
-async function updateAvailabilityUI() {
-    const availability = await fetchAvailability();
-    if (selectedAdminDate) {
-        await updateTimeSlots(selectedAdminDate);
-    }
-
-    const calendarDates = document.getElementById('adminCalendarDates');
-    if (calendarDates) {
-        const allDateElements = calendarDates.querySelectorAll('.date-item');
-        const today = new Date();
-        const currentMinutes = today.getHours() * 60 + today.getMinutes();
-        
-        allDateElements.forEach(dateElement => {
-            if (!dateElement.textContent) return; // Skip empty cells
-            const day = parseInt(dateElement.textContent);
-            const date = new Date(currentAdminYear, currentAdminMonth, day);
-            const dateStr = date.toISOString().split('T')[0];
-            
-            // Check if date is in the past
-            const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
-            const isPastDate = date < startOfToday;
-            const isToday = date.toDateString() === today.toDateString();
-            
-            // Check if the date has available time slots
-            let hasAvailableTimes = false;
-            if (availability[dateStr]) {
-                let times = [];
-                if (typeof availability[dateStr] === 'string') {
-                    times = availability[dateStr].split(',').map(t => t.trim());
-                } else if (Array.isArray(availability[dateStr])) {
-                    times = availability[dateStr].map(t => t.trim());
-                }
-                
-                // For today, filter out past times
-                if (isToday) {
-                    times = times.filter(time => timeToMinutes(time) > currentMinutes);
-                }
-                
-                // Only mark as available if there are valid times
-                hasAvailableTimes = times.length > 0;
-            }
-            
-            // Only add 'available' class if the date is not in the past AND has available times
-            if (hasAvailableTimes && !isPastDate) {
-                dateElement.classList.add('available');
-            } else {
-                dateElement.classList.remove('available');
-            }
-            
-            // Always ensure past dates have the disabled class
-            if (isPastDate) {
-                dateElement.classList.add('disabled');
-                dateElement.classList.remove('available');
-            }
-        });
-    }
-}
-
-// UID management functions
-async function loadUids() {
-    try {
-        const response = await fetch('/api/uids');
-        if (!response.ok) {
-            const errorData = await response.json();
-            throw new Error(errorData.error || 'Failed to fetch UIDs');
-        }
-        const uids = await response.json();
-        
-        const select = document.getElementById('uidSelect');
-        select.innerHTML = '<option value="">Select a Schedule UID...</option>';
-        
-        uids.forEach(uidObj => {
-            const option = document.createElement('option');
-            option.value = uidObj.uid;
-            option.textContent = uidObj.uid;
-            select.appendChild(option);
-        });
-    } catch (error) {
-        console.error('Error loading UIDs:', error);
-    }
-}
-
-async function createUid(uid) {
-    try {
-        const response = await fetch('/api/uids', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ uid })
-        });
-        
-        if (!response.ok) {
-            const errorData = await response.json();
-            throw new Error(errorData.error || 'Failed to create UID');
-        }
-
-        // Reload UIDs and select the new one
-        await loadUids();
-        
-        // Select the new UID and trigger change event
-        const select = document.getElementById('uidSelect');
-        select.value = uid;
-        select.dispatchEvent(new Event('change'));
-
-
-        return true;
-    } catch (error) {
-        console.error('Error creating UID:', error);
-        return false;
-    }
-}
-
-async function deleteUid(uid) {
-    try {
-        const response = await fetch(`/api/uids/${uid}`, {
-            method: 'DELETE'
-        });
-        
-        if (!response.ok) throw new Error('Failed to delete UID');
-        await loadUids();
-        return true;
-    } catch (error) {
-        console.error('Error deleting UID:', error);
-        return false;
-    }
-}
-
-
-
-// Add a single time for the selected date
-async function addSingleTime(dateStr, time) {
-    const selectedUid = document.getElementById('uidSelect').value;
-    if (!selectedUid) {
-        alert('Please select a UID first');
-        return;
-    }
-
-    try {
-        const availability = await fetchAvailability();
-        let times = [];
-        if (availability && availability[dateStr]) {
-            if (typeof availability[dateStr] === 'string') {
-                times = availability[dateStr].split(',').map(t => t.trim());
-            } else if (Array.isArray(availability[dateStr])) {
-                times = [...availability[dateStr]];
-            }
-        }
-        times.push(time);
-
-        const response = await fetch(`/api/availability/${selectedUid}`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ date: dateStr, times: [...new Set(times)] }) // Remove duplicates
-        });
-
-        if (!response.ok) {
-            const errorData = await response.json();
-            throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
-        }
-
-        const result = await response.json();
-        console.log(result.message);
-        await updateAvailabilityUI();
-    } catch (error) {
-        console.error('Error adding time slot:', error);
-        alert('Failed to add time slot. Please try again.');
-    }
-}
-
-// Remove a single time for the selected date
-async function removeTime(dateStr, time) {
-    const selectedUid = document.getElementById('uidSelect').value;
-    if (!selectedUid) {
-        alert('Please select a UID first');
-        return;
-    }
-
-    try {
-        const availability = await fetchAvailability();
-        let times = [];
-        if (availability && availability[dateStr]) {
-            if (typeof availability[dateStr] === 'string') {
-                times = availability[dateStr].split(',').filter(t => t.trim() !== time);
-            } else if (Array.isArray(availability[dateStr])) {
-                times = availability[dateStr].filter(t => t.trim() !== time);
-            }
-        }
-
-        const response = await fetch(`/api/availability/${selectedUid}`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ date: dateStr, times })
-        });
-
-        if (!response.ok) {
-            const errorData = await response.json();
-            throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
-        }
-        await updateAvailabilityUI();
-    } catch (error) {
-        console.error('Error removing time slot:', error);
-        alert('Failed to remove time slot. Please try again.');
-    }
-}
-
-// Helper function to convert time string to minutes since midnight
-function timeToMinutes(timeStr) {
-    const match = timeStr.match(/([0-9]+)(?::([0-9]+))?(am|pm)/i);
-    if (!match) return 0;
-    
-    let [_, hours, minutes, period] = match;
-    hours = parseInt(hours);
-    minutes = minutes ? parseInt(minutes) : 0;
-    period = period.toLowerCase();
-
-    if (period === 'pm' && hours !== 12) hours += 12;
-    if (period === 'am' && hours === 12) hours = 0;
-    
-    return hours * 60 + minutes;
-}
-
-// Helper function to ensure consistent time format
-function formatTimeSlot(hour) {
-    const period = hour < 12 ? 'am' : 'pm';
-    const displayHour = hour === 0 ? 12 : (hour > 12 ? hour - 12 : hour);
-    return `${displayHour}:00${period}`;
-}
-
-document.addEventListener('DOMContentLoaded', async () => {
-    // Add custom CSS for the current date to make it more distinguishable
-    const style = document.createElement('style');
-    style.textContent = `
-        .date-item.current {
-            border: 2px solid #ffc107 !important; /* Yellow border */
-            background-color: rgba(255, 193, 7, 0.1) !important; /* Light yellow background */
-            font-weight: bold !important;
-            color: #212529 !important; /* Ensure text is visible */
-        }
-        
-        /* Ensure current date styling takes precedence but doesn't interfere with selection */
-        .date-item.current.selected {
-            border: 2px solid #0d6efd !important; /* Blue border for selected */
-            background-color: #0d6efd !important; /* Dark blue background when selected */
-            color: white !important; /* White text for better contrast */
-            font-weight: bold !important;
-        }
-        
-        /* Prevent hover effects on empty calendar cells */
-        .date-item.empty-cell {
-            cursor: default !important;
-            pointer-events: none !important;
-        }
-        
-        .date-item.empty-cell:hover {
-            background-color: transparent !important;
-            transform: none !important;
-        }
-        
-        /* Time picker styling */
-        #visualTimePicker {
-            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
-            border-radius: 8px;
-            overflow: hidden;
-        }
-        
-        #visualTimePicker .card-header {
-            background-color: #0d6efd;
-        }
-        
-        #visualTimePicker .display-4 {
-            font-size: 3rem;
-            font-weight: 300;
-            color: white;
-        }
-        
-        .time-picker-clock {
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-        }
-        
-        .hour-number, .minute-number {
-            border-radius: 50%;
-            transition: all 0.2s ease;
-        }
-        
-        .hour-number:hover, .minute-number:hover {
-            background-color: rgba(13, 110, 253, 0.1);
-        }
-        
-        /* Time slot pills styling */
-        .time-slot {
-            transition: all 0.2s ease;
-        }
-        
-        .time-slot:hover {
-            transform: translateY(-2px);
-        }
-        
-        /* Make all UID buttons consistent */
-        #createUid, #deleteUid, #flushDatabase, #copyUrlBtn {
-            border-radius: 30px;
-            padding: 0.75rem 1.5rem;
-            font-size: 1.25rem;
-            font-weight: 500;
-            height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-            transition: all 0.3s ease;
-        }
-        
-        #createUid {
-            background-color: #2e8b57; /* Money green color */
-            border-color: #2e8b57;
-        }
-        
-        #createUid:hover {
-            background-color: #267349;
-            border-color: #267349;
-        }
-        
-        /* URL container styling */
-        .url-container {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        
-        .url-display {
-            flex-grow: 1;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-    `;
-    document.head.appendChild(style);
-    
-    // Create and add the Copy URL button
-    const urlContainer = document.querySelector('.form-control-lg.bg-light.p-3');
-    if (urlContainer) {
-        // Create a wrapper div for the URL and button
-        const wrapper = document.createElement('div');
-        wrapper.classList.add('url-container', 'mt-2');
-        wrapper.style.display = 'flex';
-        wrapper.style.alignItems = 'center';
-        wrapper.style.gap = '10px';
-        wrapper.style.flexWrap = 'nowrap'; // Prevent wrapping
-        
-        // Move the existing elements to the wrapper
-        const uidPlaceholder = document.getElementById('uidPlaceholder');
-        const uidUrl = document.getElementById('uidUrl');
-        
-        // Create a div to contain the URL display
-        const urlDisplay = document.createElement('div');
-        urlDisplay.classList.add('url-display');
-        urlDisplay.style.overflow = 'hidden';
-        urlDisplay.style.textOverflow = 'ellipsis';
-        urlDisplay.style.whiteSpace = 'nowrap'; // Keep URL on one line
-        urlDisplay.style.minWidth = '0'; // Allow flex item to shrink below content size
-        urlDisplay.style.flexGrow = '1'; // Take available space
-        urlDisplay.style.flexShrink = '1'; // Allow shrinking
-        
-        // Move the existing elements to the URL display div
-        if (uidPlaceholder) urlDisplay.appendChild(uidPlaceholder);
-        if (uidUrl) urlDisplay.appendChild(uidUrl);
-        
-        // Add the URL display to the wrapper
-        wrapper.appendChild(urlDisplay);
-        
-        // Create the Copy URL button
-        const copyUrlBtn = document.createElement('button');
-        copyUrlBtn.id = 'copyUrlBtn';
-        copyUrlBtn.classList.add('btn', 'btn-primary', 'rounded-pill', 'd-none');
-        copyUrlBtn.style.height = '40px';
-        copyUrlBtn.style.padding = '0 15px';
-        copyUrlBtn.style.fontSize = '0.9rem';
-        copyUrlBtn.style.whiteSpace = 'nowrap';
-        copyUrlBtn.style.width = 'auto'; // Only as wide as content
-        copyUrlBtn.style.minWidth = 'fit-content'; // Ensure it fits content
-        copyUrlBtn.style.flexShrink = '0'; // Prevent button from shrinking
-        
-        copyUrlBtn.innerHTML = '<i class="bi bi-clipboard"></i><span style="margin-left: 8px;">Copy URL</span>';
-        
-        // Add click event to copy URL to clipboard
-        copyUrlBtn.addEventListener('click', () => {
-            const url = document.getElementById('uidUrl').href;
-            if (url && url !== '#') {
-                navigator.clipboard.writeText(url)
-                    .then(() => {
-                        // Change button text temporarily to indicate success
-                        const originalText = copyUrlBtn.innerHTML;
-                        copyUrlBtn.innerHTML = '<i class="bi bi-check"></i> Copied!';
-                        copyUrlBtn.classList.remove('btn-primary');
-                        copyUrlBtn.classList.add('btn-success');
-                        
-                        // Reset button after 2 seconds
-                        setTimeout(() => {
-                            copyUrlBtn.innerHTML = originalText;
-                            copyUrlBtn.classList.remove('btn-success');
-                            copyUrlBtn.classList.add('btn-primary');
-                        }, 2000);
-                    })
-                    .catch(err => {
-                        console.error('Failed to copy URL: ', err);
-                        alert('Failed to copy URL to clipboard');
-                    });
-            }
-        });
-        
-        // Add the button to the wrapper
-        wrapper.appendChild(copyUrlBtn);
-        
-        // Clear the container and add the wrapper
-        urlContainer.innerHTML = '';
-        urlContainer.appendChild(document.createElement('small')).classList.add('d-block', 'text-muted', 'mb-1');
-        urlContainer.querySelector('small').textContent = 'Public Access URL:';
-        urlContainer.appendChild(wrapper);
-        
-        // Show the button if a UID is already selected
-        const selectedUid = document.getElementById('uidSelect').value;
-        if (selectedUid) {
-            copyUrlBtn.classList.remove('d-none');
-        }
-    }
-    
-    // Load existing UIDs
-    await loadUids();
-
-    // Handle UID selection
-    const uidSelect = document.getElementById('uidSelect');
-    const deleteUidBtn = document.getElementById('deleteUid');
-    const uidUrl = document.getElementById('uidUrl');
-    const uidPlaceholder = document.getElementById('uidPlaceholder');
-
-    uidSelect.addEventListener('change', async () => {
-        const selectedUid = uidSelect.value;
-        deleteUidBtn.disabled = !selectedUid;
-        flushDatabaseBtn.disabled = !selectedUid;
-        
-        // Show or hide calendar and availability sections based on UID selection
-        const calendarSection = document.getElementById('calendarSection');
-        const calendarDatesSection = document.getElementById('calendarDatesSection');
-        const availabilitySection = document.getElementById('availabilitySection');
-        
-        if (selectedUid) {
-            calendarSection.classList.remove('d-none');
-            calendarDatesSection.classList.remove('d-none');
-            availabilitySection.classList.remove('d-none');
-            
-            // Show URL link and hide placeholder
-            uidPlaceholder.classList.add('d-none');
-            uidUrl.classList.remove('d-none');
-            
-            // Show copy button when URL is displayed
-            if (document.getElementById('copyUrlBtn')) {
-                document.getElementById('copyUrlBtn').classList.remove('d-none');
-            }
-        } else {
-            calendarSection.classList.add('d-none');
-            calendarDatesSection.classList.add('d-none');
-            availabilitySection.classList.add('d-none');
-            
-            // Hide URL link and show placeholder
-            uidPlaceholder.classList.remove('d-none');
-            uidUrl.classList.add('d-none');
-            
-            // Hide copy button when no URL is displayed
-            if (document.getElementById('copyUrlBtn')) {
-                document.getElementById('copyUrlBtn').classList.add('d-none');
-            }
-        }
-        
-        // Clear current selections
-        selectedAdminDate = null;
-        const selectedDateElem = document.getElementById('selectedDateDisplay');
-        const timeSlotsElem = document.getElementById('timeSlots');
-        const calendarDatesElem = document.getElementById('adminCalendarDates');
-        const adminMonthYear = document.getElementById('adminMonthYear');
-        
-        // Clear all UI elements
-        if (selectedDateElem) selectedDateElem.textContent = '';
-        if (timeSlotsElem) timeSlotsElem.innerHTML = '';
-        if (calendarDatesElem) calendarDatesElem.innerHTML = '';
-        if (adminMonthYear) adminMonthYear.textContent = '';
-        
-        if (selectedUid) {
-            const url = `${window.location.origin}/${selectedUid}`;
-            uidUrl.textContent = url;
-            uidUrl.href = url;
-            
-            // Refresh calendar with new UID's data
-            await renderAdminCalendar(currentAdminMonth, currentAdminYear);
-            
-            // Automatically select today's date and show time slots
-            const today = new Date();
-            if (today.getMonth() === currentAdminMonth && today.getFullYear() === currentAdminYear) {
-                // Get the first day of the month to pass to selectAdminDate
-                const firstDay = new Date(currentAdminYear, currentAdminMonth, 1).getDay();
-                
-                // Select today's date
-                selectedAdminDate = today;
-                await updateTimeSlots(today);
-                
-                // Highlight today in the calendar
-                const dateItems = document.querySelectorAll('#adminCalendarDates .date-item');
-                dateItems.forEach(item => item.classList.remove('selected'));
-                
-                // Find today's element in the calendar
-                const todayDay = today.getDate();
-                const todayElement = Array.from(dateItems).find(item => {
-                    return item.textContent && parseInt(item.textContent) === todayDay;
-                });
-                
-                if (todayElement) {
-                    todayElement.classList.add('selected');
-                }
-            }
-        } else {
-            uidUrl.textContent = '';
-            uidUrl.href = '#';
-            // Add placeholder text
-            if (selectedDateElem) selectedDateElem.textContent = 'Please select a UID to view the calendar';
-            await renderAdminCalendar(currentAdminMonth, currentAdminYear);
-        }
-    });
-
-    // Handle new UID creation
-    const createUidBtn = document.getElementById('createUid');
-    const modalUidInput = document.getElementById('modalUidInput');
-    const confirmCreateUidBtn = document.getElementById('confirmCreateUid');
-    const createUidModal = new bootstrap.Modal(document.getElementById('createUidModal'));
-
-    // Add event listener for modal shown event to focus the input field
-    document.getElementById('createUidModal').addEventListener('shown.bs.modal', function () {
-        modalUidInput.focus();
-    });
-
-    createUidBtn.addEventListener('click', () => {
-        modalUidInput.value = '';
-        createUidModal.show();
-    });
-
-    // Add event listener for Enter key on the input field
-    modalUidInput.addEventListener('keyup', (event) => {
-        if (event.key === 'Enter') {
-            confirmCreateUidBtn.click();
-        }
-    });
-
-    confirmCreateUidBtn.addEventListener('click', async () => {
-        const uid = modalUidInput.value.trim().toLowerCase();
-        
-        if (!/^[a-z0-9-]+$/.test(uid)) {
-            alert('UID can only contain lowercase letters, numbers, and hyphens');
-            return;
-        }
-        
-        if (await createUid(uid)) {
-            createUidModal.hide();
-        } else {
-            alert('Failed to create UID. Please try again.');
-        }
-    });
-
-    // Handle UID deletion
-    deleteUidBtn.addEventListener('click', async () => {
-        const uid = uidSelect.value;
-        if (!uid) return;
-        
-        if (!confirm(`Are you sure you want to delete UID: ${uid}?\nThis will remove all associated availability data.`)) {
-            return;
-        }
-        
-        if (await deleteUid(uid)) {
-            // Clear selection and trigger change event
-            uidSelect.value = '';
-            uidSelect.dispatchEvent(new Event('change'));
-        } else {
-            alert('Failed to delete UID. Please try again.');
-        }
-    });
-
-    // Initialize UI elements
-    const adminCalendarDates = document.getElementById('adminCalendarDates');
-    const adminMonthYear = document.getElementById('adminMonthYear');
-    const adminPrevMonthBtn = document.getElementById('adminPrevMonth');
-    const adminNextMonthBtn = document.getElementById('adminNextMonth');
-    const selectedDateDisplay = document.getElementById('selectedDateDisplay');
-    const timeSlots = document.getElementById('timeSlots');
-    const flushDatabaseBtn = document.getElementById('flushDatabase');
-    const resetDatabaseBtn = document.getElementById('resetDatabase');
-    const devToolsBtn = document.getElementById('devToolsBtn');
-    const devToolsModal = new bootstrap.Modal(document.getElementById('devToolsModal'));
-
-    // Show Dev Tools modal when button is clicked
-    devToolsBtn.addEventListener('click', () => {
-        devToolsModal.show();
-    });
-
-    // Handle database reset
-    resetDatabaseBtn.addEventListener('click', async () => {
-        if (!confirm('⚠️ WARNING: This will permanently delete ALL UIDs and their associated availability data. This action cannot be undone.\n\nAre you absolutely sure you want to proceed?')) {
-            return;
-        }
-
-        try {
-            const response = await fetch('/api/reset', {
-                method: 'POST'
-            });
-
-            if (!response.ok) {
-                const errorData = await response.json();
-                throw new Error(errorData.error || 'Failed to reset database');
-            }
-
-            // Reload the page to reset all state
-            window.location.reload();
-        } catch (error) {
-            console.error('Error resetting database:', error);
-            alert('Failed to reset database. Please try again.');
-        }
-    });
-
-    // Check if a date has availability
-    async function checkAvailabilityForDate(date) {
-        const availability = await fetchAvailability();
-        const dateStr = date.toISOString().split('T')[0];
-        return !!availability[dateStr];
-    }
-
-    // Flush (delete) all entries from the database
-    flushDatabaseBtn.addEventListener('click', async () => {
-        const selectedUid = document.getElementById('uidSelect').value;
-        if (!selectedUid) {
-            alert('Please select a UID first');
-            return;
-        }
-
-        if (!confirm(`Are you sure you want to delete ALL availability entries for UID: ${selectedUid}?`)) {
-            return;
-        }
-
-        try {
-            console.log(`Attempting to delete all availability for UID: ${selectedUid}...`);
-            const response = await fetch(`/api/availability/${selectedUid}/flush`, {
-                method: 'DELETE',
-                headers: { 'Content-Type': 'application/json' }
-            });
-
-            if (!response.ok) {
-                const errorData = await response.json();
-                throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
-            }
-
-            const result = await response.json();
-            console.log('Delete availability response:', result);
-            
-            // Refresh data
-            await fetchAvailability(); // Refresh availability data
-            
-            // Reset UI
-            selectedAdminDate = null; // Clear selected date
-            selectedDateDisplay.textContent = '';
-            timeSlots.innerHTML = ''; // Clear time slots
-            
-            // Re-render the calendar
-            await renderAdminCalendar(currentAdminMonth, currentAdminYear);
-            
-            // If a date was previously selected in the calendar, update the time slots UI
-            const selectedDateElement = document.querySelector('#adminCalendarDates .date-item.selected');
-            if (selectedDateElement) {
-                const day = parseInt(selectedDateElement.textContent);
-                selectedAdminDate = new Date(currentAdminYear, currentAdminMonth, day);
-                await updateTimeSlots(selectedAdminDate);
-            } else {
-                // If no date was selected, select today's date if it's in the current month
-                const today = new Date();
-                if (today.getMonth() === currentAdminMonth && today.getFullYear() === currentAdminYear) {
-                    selectedAdminDate = today;
-                    await updateTimeSlots(today);
-                    
-                    // Find and highlight today in the calendar
-                    const dateItems = document.querySelectorAll('#adminCalendarDates .date-item');
-                    const todayDay = today.getDate();
-                    const todayElement = Array.from(dateItems).find(item => {
-                        return item.textContent && parseInt(item.textContent) === todayDay;
-                    });
-                    
-                    if (todayElement) {
-                        todayElement.classList.add('selected');
-                    }
-                }
-            }
-        } catch (error) {
-            console.error('Error deleting availability:', error);
-            alert('Failed to delete availability. Please try again.');
-        }
-    });
-
-    // Navigate to previous month (admin)
-    adminPrevMonthBtn.addEventListener('click', () => {
-        currentAdminMonth--;
-        if (currentAdminMonth < 0) {
-            currentAdminMonth = 11;
-            currentAdminYear--;
-        }
-        renderAdminCalendar(currentAdminMonth, currentAdminYear);
-    });
-
-    // Navigate to next month (admin)
-    adminNextMonthBtn.addEventListener('click', () => {
-        currentAdminMonth++;
-        if (currentAdminMonth > 11) {
-            currentAdminMonth = 0;
-            currentAdminYear++;
-        }
-        renderAdminCalendar(currentAdminMonth, currentAdminYear);
-    });
-
-    // Handle global database flush
-    const flushGlobalDatabaseBtn = document.getElementById('flushGlobalDatabase');
-    if (flushGlobalDatabaseBtn) {
-        flushGlobalDatabaseBtn.addEventListener('click', async () => {
-            if (!confirm('WARNING: This will delete ALL UIDs and their availability data. This action cannot be undone. Are you sure you want to proceed?')) {
-                return;
-            }
-
-            try {
-                const response = await fetch('/api/flush-global', {
-                    method: 'DELETE',
-                    headers: { 'Content-Type': 'application/json' }
-                });
-
-                if (!response.ok) {
-                    const errorData = await response.json();
-                    throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
-                }
-
-                const result = await response.json();
-                console.log('Global database flush response:', result);
-                alert(result.message || 'Database flushed successfully!');
-                
-                // Reset everything
-                selectedAdminDate = null;
-                const selectedDateElem = document.getElementById('selectedDateDisplay');
-                const timeSlotsElem = document.getElementById('timeSlots');
-                const calendarDatesElem = document.getElementById('adminCalendarDates');
-                if (selectedDateElem) selectedDateElem.textContent = '';
-                if (timeSlotsElem) timeSlotsElem.innerHTML = '';
-                if (calendarDatesElem) calendarDatesElem.innerHTML = '';
-                
-                // Reload UIDs
-                await loadUids();
-                
-                // Update UID URL display
-                const uidUrl = document.getElementById('uidUrl');
-                if (uidUrl) uidUrl.textContent = 'Select a UID first';
-                
-                // Disable delete button
-                const deleteUidBtn = document.getElementById('deleteUid');
-                if (deleteUidBtn) deleteUidBtn.disabled = true;
-            } catch (error) {
-                console.error('Error flushing database:', error);
-                alert('Failed to flush database. Please try again.');
-            }
-        });
-    }
-
-    // Initial render with current date
-    renderAdminCalendar(currentAdminMonth, currentAdminYear);
-    if (currentAdminDate.getDate() <= new Date(currentAdminYear, currentAdminMonth, 0).getDate()) {
-        const hasAvailability = await checkAvailabilityForDate(currentAdminDate);
-        if (hasAvailability) {
-            selectAdminDate(currentAdminDate, new Date(currentAdminYear, currentAdminMonth, 1).getDay());
-        }
-    }
-});
\ No newline at end of file
diff --git a/public/avatar.jpg b/public/images/avatar.jpg
similarity index 100%
rename from public/avatar.jpg
rename to public/images/avatar.jpg
diff --git a/public/script.js b/public/script.js
deleted file mode 100644
index f93b1e8..0000000
--- a/public/script.js
+++ /dev/null
@@ -1,245 +0,0 @@
-// public/public.js (for index.html)
-document.addEventListener('DOMContentLoaded', async () => {
-  const calendarDates = document.getElementById('calendarDates');
-  const monthYear = document.getElementById('monthYear');
-  const prevMonthBtn = document.getElementById('prevMonth');
-  const nextMonthBtn = document.getElementById('nextMonth');
-  const currentTimeElement = document.getElementById('currentTime');
-  const timeSlotsContainer = document.getElementById('timeSlots');
-
-  // Check if navigation buttons exist before adding event listeners
-  if (!prevMonthBtn || !nextMonthBtn) {
-      console.error('Navigation buttons (prevMonth or nextMonth) not found in the DOM');
-      return;
-  }
-
-  let currentDate = new Date();
-  let currentMonth = currentDate.getMonth();
-  let currentYear = currentDate.getFullYear();
-  let selectedDate = null; // Track selected date
-
-  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-
-  // Fetch available dates from the API
-  async function fetchAvailability() {
-      try {
-          const response = await fetch('/api/availability');
-          if (!response.ok) {
-              throw new Error(`HTTP error! status: ${response.status}`);
-          }
-          const availability = await response.json();
-          return availability;
-      } catch (error) {
-          console.error('Error fetching availability:', error);
-          return {};
-      }
-  }
-
-  // Render the calendar with available dates highlighted and automatically select/display the current date
-  async function renderCalendar(month, year) {
-      // Fetch availability first to ensure data is ready
-      const availability = await fetchAvailability();
-
-      calendarDates.innerHTML = '';
-      monthYear.textContent = `${months[month]} ${year}`;
-
-      const firstDay = new Date(year, month, 1).getDay();
-      const daysInMonth = new Date(year, month + 1, 0).getDate();
-      const today = new Date();
-      
-      // Start of today (midnight)
-      const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
-
-      // Create blank cells for days before the first day of the month
-      for (let i = 0; i < firstDay; i++) {
-          const blank = document.createElement('div');
-          blank.classList.add('date-item', 'p-2', 'rounded-pill', 'text-center', 'text-muted');
-          calendarDates.appendChild(blank);
-      }
-
-      // Populate the calendar with days
-      for (let i = 1; i <= daysInMonth; i++) {
-          const day = document.createElement('div');
-          day.classList.add('date-item', 'p-2', 'rounded-pill', 'text-center');
-          day.textContent = i;
-          const date = new Date(year, month, i);
-          const dateStr = date.toISOString().split('T')[0];
-
-          // Check if date is in the past
-          const isPastDate = date < startOfToday;
-
-          if (date.toDateString() === today.toDateString()) {
-              day.classList.add('current');
-          }
-          if (availability[dateStr]) {
-              day.classList.add('available');
-          }
-          if (isPastDate) {
-              day.classList.add('text-muted');
-              day.style.cursor = 'not-allowed';
-          } else {
-              day.addEventListener('click', () => selectDate(date, firstDay));
-              day.style.cursor = 'pointer';
-          }
-          calendarDates.appendChild(day);
-      }
-
-      // Only try to select today if we're in the current month and year
-      if (today.getMonth() === month && today.getFullYear() === year) {
-          await selectDate(today, firstDay); // Use await to ensure selection and display complete
-      }
-  }
-
-  // Handle date selection
-  async function selectDate(date, firstDay) {
-      // Check if the date is in the past
-      const today = new Date();
-      const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
-      if (date < startOfToday) {
-          console.warn('Attempted to select a past date');
-          return;
-      }
-
-      selectedDate = date;
-      const dateItems = document.querySelectorAll('#calendarDates .date-item');
-      dateItems.forEach(item => item.classList.remove('selected')); // Ensure only one date is selected
-      // Find the exact date item for the clicked or auto-selected date
-      const selectedDay = Array.from(dateItems).find(item => {
-          const dayText = item.textContent;
-          const itemDate = new Date(currentYear, currentMonth, parseInt(dayText));
-          return itemDate.toDateString() === date.toDateString();
-      });
-      if (selectedDay) selectedDay.classList.add('selected');
-      await updateTimeSlots(date); // Update time slots based on selected date, ensuring async completion
-  }
-
-  // Helper function to convert time string to minutes for sorting
-  function timeToMinutes(timeStr) {
-      console.log('Converting time:', timeStr);
-      const match = timeStr.match(/([0-9]+)(?::([0-9]+))?(am|pm)/i);
-      if (!match) {
-          console.warn('No match for time:', timeStr);
-          return 0;
-      }
-      
-      let [_, hours, minutes, period] = match;
-      hours = parseInt(hours);
-      minutes = minutes ? parseInt(minutes) : 0;
-      period = period.toLowerCase();
-
-      if (period === 'pm' && hours !== 12) hours += 12;
-      if (period === 'am' && hours === 12) hours = 0;
-      
-      const totalMinutes = hours * 60 + minutes;
-      console.log(`${timeStr} -> ${totalMinutes} minutes`);
-      return totalMinutes;
-  }
-
-  // Update time slots based on selected date
-  async function updateTimeSlots(date) {
-      const availability = await fetchAvailability();
-      const dateStr = date.toISOString().split('T')[0];
-      let times = [];
-      if (availability[dateStr]) {
-          // Ensure availability[dateStr] is a string or array before processing
-          if (typeof availability[dateStr] === 'string') {
-              times = availability[dateStr].split(',').map(t => t.trim());
-          } else if (Array.isArray(availability[dateStr])) {
-              times = availability[dateStr].map(t => t.trim());
-          } else {
-              console.warn(`Unexpected data format for date ${dateStr}:`, availability[dateStr]);
-          }
-      }
-
-      // Clear available time slots or message
-      timeSlotsContainer.innerHTML = '';
-
-      // Get current time in minutes for comparison
-      const now = new Date();
-      const currentMinutes = now.getHours() * 60 + now.getMinutes();
-      const isToday = date.toDateString() === now.toDateString();
-
-      // Filter out past times if it's today
-      if (isToday) {
-          times = times.filter(time => timeToMinutes(time) > currentMinutes);
-      }
-
-      // Sort remaining times chronologically
-      times.sort((a, b) => timeToMinutes(a) - timeToMinutes(b));
-
-      if (times.length === 0) {
-          // Display appropriate message based on context
-          const noAvailabilityMsg = document.createElement('p');
-          noAvailabilityMsg.classList.add('text-muted', 'text-center', 'fw-bold', 'fs-5', 'py-3');
-          
-          let message;
-          if (isToday) {
-              if (currentMinutes > timeToMinutes('5:00pm')) {
-                  message = 'No more availability today.';
-              } else {
-                  message = 'No available time slots for today.';
-              }
-          } else {
-              message = 'No availability on selected date.';
-          }
-          
-          noAvailabilityMsg.textContent = message;
-          timeSlotsContainer.appendChild(noAvailabilityMsg);
-      } else {
-          // Populate time slots dynamically
-          times.forEach(time => {
-              const button = document.createElement('button');
-              button.classList.add('time-slot', 'btn', 'rounded-pill', 'w-100', 'mb-2');
-              button.classList.add('btn-outline-primary', 'available');
-              button.textContent = time;
-              button.addEventListener('click', () => {
-                  if (button.classList.contains('available') && selectedDate) {
-                      const allTimeSlots = timeSlotsContainer.querySelectorAll('.time-slot');
-                      allTimeSlots.forEach(s => s.classList.remove('selected'));
-                      button.classList.add('selected');
-                  }
-              });
-              timeSlotsContainer.appendChild(button);
-          });
-      }
-  }
-
-  // Navigate to previous month
-  prevMonthBtn.addEventListener('click', () => {
-      currentMonth--;
-      if (currentMonth < 0) {
-          currentMonth = 11;
-          currentYear--;
-      }
-      renderCalendar(currentMonth, currentYear);
-  });
-
-  // Navigate to next month
-  nextMonthBtn.addEventListener('click', () => {
-      currentMonth++;
-      if (currentMonth > 11) {
-          currentMonth = 0;
-          currentYear++;
-      }
-      renderCalendar(currentMonth, currentYear);
-  });
-
-  // Update current time in Eastern Time (US & Canada)
-  function updateCurrentTime() {
-      const options = {
-          timeZone: 'America/New_York',
-          hour: '2-digit',
-          minute: '2-digit',
-          hour12: true
-      };
-      const time = new Date().toLocaleTimeString('en-US', options);
-      currentTimeElement.textContent = time;
-  }
-
-  // Update time every second
-  setInterval(updateCurrentTime, 1000);
-  updateCurrentTime(); // Initial call
-
-  // Initial render (set to current date, automatically selecting and displaying it)
-  await renderCalendar(currentMonth, currentYear); // Use await to ensure the initial render completes
-});
\ No newline at end of file
diff --git a/public/styles.css b/public/styles.css
deleted file mode 100644
index 4476b18..0000000
--- a/public/styles.css
+++ /dev/null
@@ -1,380 +0,0 @@
-/* Custom styles to modernize and align with Calendly-inspired design */
-:root {
-    --primary-color: #007bff; /* Blue from Calendly */
-    --secondary-color: #6c757d; /* Gray for muted elements */
-    --light-bg: #f8f9fa; /* Light background for modern look */
-    --shadow-color: rgba(0, 0, 0, 0.1);
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Arial', sans-serif; /* Matches Calendly font */
-}
-
-.container-fluid {
-    max-width: 1000px;
-    margin: 20px auto;
-    background-color: #fff;
-    border-radius: 6px;
-    box-shadow: 0 2px 4px var(--shadow-color);
-    overflow: hidden;
-}
-
-.sidebar {
-    width: 30%;
-    padding: 20px;
-    border-right: 1px solid #e1e8ed;
-    text-align: center;
-    background-color: #fff;
-}
-
-.profile-pic {
-    width: 80px;
-    height: 80px;
-    object-fit: cover;
-    border-radius: 50%;
-    margin-bottom: 10px;
-    border: 2px solid #fff;
-    box-shadow: 0 2px 4px var(--shadow-color);
-}
-
-.sidebar h2 {
-    font-size: 1.25rem;
-    color: #333;
-    margin-bottom: 5px;
-    font-weight: 600;
-}
-
-.sidebar h3 {
-    font-size: 0.9rem;
-    color: #666;
-    margin-bottom: 5px;
-    font-weight: 400;
-}
-
-.duration {
-    font-size: 0.875rem;
-    color: #666;
-}
-
-.main-content {
-    width: 70%;
-    padding: 20px;
-    position: relative;
-}
-
-.calendar-header h1 {
-    font-size: 1.5rem;
-    color: #333;
-    font-weight: 700;
-    margin-bottom: 10px;
-}
-
-.month-nav {
-    display: flex;
-    justify-content: space-between;
-    font-size: 1rem;
-    color: #333;
-    padding: 0.5rem 0;
-    border-bottom: 1px solid #e1e8ed;
-}
-
-.month-nav button {
-    color: var(--secondary-color);
-    transition: color 0.3s ease;
-}
-
-.month-nav button:hover {
-    color: var(--primary-color);
-}
-
-.days-of-week, .dates {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    gap: 5px;
-    text-align: center;
-}
-
-.days-of-week span {
-    font-weight: bold;
-    color: #666;
-    padding: 5px;
-}
-
-.dates .date-item {
-    padding: 10px;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: background-color 0.3s ease, transform 0.2s ease;
-}
-
-.dates .date-item.disabled {
-    cursor: not-allowed;
-    color: var(--secondary-color);
-    opacity: 0.5;
-}
-
-.dates .date-item:hover {
-    background-color: #f0f8ff;
-    transform: scale(1.05);
-}
-
-.dates .date-item.available {
-    background-color: #e9f2ff;
-    border: 2px solid var(--primary-color);
-    font-weight: 600;
-}
-
-.dates .date-item.selected {
-    background-color: #0d6efd !important;
-    color: #fff !important;
-    border-radius: 6px;
-    font-weight: 600;
-    border: none !important;
-}
-
-.dates .date-item.current {
-    background-color: #e9f2ff;
-    border: 2px solid var(--primary-color);
-    font-weight: 600;
-}
-
-.time-slot {
-    font-size: 1rem;
-    padding: 0.75rem 1.5rem;
-    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
-}
-
-.time-slot.available {
-    background-color: #e9f2ff;
-    border-color: var(--primary-color);
-    color: var(--primary-color);
-}
-
-.time-slots .text-muted {
-    color: #6c757d; /* Muted text color, matching Calendly */
-    font-size: rem; /* Slightly larger font, e.g., 20px instead of 16px */
-    font-weight: bold; /* Bold text */
-    padding: 2.2rem 0;
-    text-align: center;
-}
-
-.time-slot.available:hover, .time-slot:hover {
-    background-color: var(--primary-color);
-    color: #fff;
-    transform: scale(1.05);
-}
-
-.timezone {
-    font-size: 0.875rem;
-    color: #666;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-}
-
-#timezone {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-}
-
-.powered-by {
-    font-size: 0.75rem;
-    color: #666;
-    opacity: 0.8;
-    transition: opacity 0.3s ease;
-    z-index: 10;
-    background-color: transparent;
-    padding: 5px;
-    margin-left: auto; /* Push to the right */
-    pointer-events: auto;
-}
-
-.powered-by.text-end {
-    text-align: right;
-}
-
-.powered-by a {
-    color: inherit;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-.powered-by a.github-link {
-    display: inline-flex;
-    align-items: center;
-    background-color: #e9e9e9;
-    color: #333;
-    padding: 8px 12px;
-    border-radius: 20px;
-    font-size: 14px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    white-space: nowrap;
-}
-
-.octocat-icon {
-    margin-right: 8px;
-    display: flex;
-    align-items: center;
-}
-
-.octocat-icon svg {
-    fill: #333;
-}
-
-.powered-by:hover {
-    opacity: 1;
-}
-
-/* Admin-specific powered-by styling */
-.admin-powered-by {
-    position: absolute;
-    bottom: 20px;
-    right: 20px;
-    margin-top: 0;
-}
-
-/* Index-specific powered-by styling */
-.index-powered-by {
-    text-align: right;
-    margin-top: 0;
-    margin-left: auto;
-    display: inline-flex;
-    justify-content: flex-end;
-    align-items: center;
-    flex-shrink: 0;
-}
-
-/* Add clearance for elements with flex classes */
-.d-flex.flex-column.gap-2.mt-3 {
-    margin-bottom: 50px; /* Increased margin to ensure these elements don't overlap with the powered-by button */
-}
-
-/* Admin-specific styles */
-#admin .calendar {
-    margin-bottom: 20px;
-}
-
-#admin .form-control, #admin .form-select {
-    border-radius: 6px;
-}
-
-#admin .btn-primary, #admin .btn-danger {
-    border-radius: 4px;
-}
-
-#availabilityList .list-group-item {
-    border-radius: 4px;
-    margin-bottom: 5px;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-    .container-fluid {
-        margin: 10px;
-        border-radius: 6px;
-    }
-
-    .sidebar, .main-content {
-        width: 100%;
-    }
-
-    .sidebar {
-        border-right: none;
-        border-bottom: 1px solid #e1e8ed;
-    }
-
-    #admin .row {
-        flex-direction: column;
-    }
-    #admin .col-md-6 {
-        width: 100%;
-    }
-    
-    .powered-by {
-        position: relative;
-        bottom: auto;
-        right: auto;
-        text-align: center;
-        margin-top: 30px;
-    }
-    
-    .admin-powered-by {
-        position: relative;
-        bottom: auto;
-        right: auto;
-        text-align: right;
-        margin-top: 20px;
-    }
-    
-    .index-powered-by {
-        position: relative;
-        text-align: right;
-        margin-left: auto;
-        display: inline-flex;
-        justify-content: flex-end;
-    }
-}
-
-/* Sidebar buttons styling */
-.sidebar .btn {
-    padding: 12px 20px;
-    font-size: 1.1rem;
-    font-weight: 500;
-    border: none;
-    transition: all 0.3s ease;
-}
-
-.sidebar .btn-success {
-    background-color: #2e8b57; /* Money green color */
-    border-color: #2e8b57;
-}
-
-.sidebar .btn-success:hover {
-    background-color: #267349;
-    border-color: #267349;
-}
-
-.sidebar .btn-warning {
-    background-color: #ffc107;
-    border-color: #ffc107;
-    color: #212529;
-}
-
-.sidebar .btn-warning:hover {
-    background-color: #e0a800;
-    border-color: #e0a800;
-}
-
-.sidebar .btn-danger {
-    background-color: #dc3545;
-    border-color: #dc3545;
-}
-
-.sidebar .btn-danger:hover {
-    background-color: #c82333;
-    border-color: #c82333;
-}
-
-/* Dev Tools button styling */
-.sidebar .btn-info {
-    background-color: #00bfff; /* Neon blue color */
-    border-color: #00bfff;
-    color: white;
-    box-shadow: 0 0 10px rgba(0, 191, 255, 0.5); /* Neon glow effect */
-}
-
-.sidebar .btn-info:hover {
-    background-color: #0099cc;
-    border-color: #0099cc;
-    box-shadow: 0 0 15px rgba(0, 191, 255, 0.7); /* Enhanced glow on hover */
-}
-
-.time-slots {
-    margin-bottom: 50px; /* Increased margin to ensure time slots don't overlap with the powered-by button */
-}
\ No newline at end of file
diff --git a/public/timepicker.css b/public/timepicker.css
deleted file mode 100644
index 1e9af76..0000000
--- a/public/timepicker.css
+++ /dev/null
@@ -1,413 +0,0 @@
-/**
- * Timepicker styling
- */
-/* Core timepicker styling */
-.timepicker-wrapper {
-  --fs-timepicker-wrapper-bg: rgba(0, 0, 0, 0.4);
-  --fs-timepicker-elements-min-width: 310px;
-  --fs-timepicker-elements-min-height: 325px;
-  --fs-timepicker-elements-background: #fff;
-  --fs-timepicker-elements-border-top-right-radius: 0.6rem;
-  --fs-timepicker-elements-border-top-left-radius: 0.6rem;
-  --fs-timepicker-head-bg: #3b71ca;
-  --fs-timepicker-head-height: 100px;
-  --fs-timepicker-head-border-top-right-radius: 0.5rem;
-  --fs-timepicker-head-border-top-left-radius: 0.5rem;
-  --fs-timepicker-head-padding-y: 10px;
-  --fs-timepicker-head-padding-right: 24px;
-  --fs-timepicker-head-padding-left: 50px;
-  --fs-timepicker-button-font-size: 0.8rem;
-  --fs-timepicker-button-min-width: 64px;
-  --fs-timepicker-button-font-weight: 500;
-  --fs-timepicker-button-line-height: 40px;
-  --fs-timepicker-button-border-radius: 10px;
-  --fs-timepicker-button-color: #4f4f4f;
-  --fs-timepicker-button-hover-bg: rgba(0, 0, 0, 0.08);
-  --fs-timepicker-button-focus-bg: rgba(0, 0, 0, 0.08);
-  --fs-timepicker-button-padding-x: 10px;
-  --fs-timepicker-button-height: 40px;
-  --fs-timepicker-button-margin-bottom: 10px;
-  --fs-timepicker-current-font-size: 3.75rem;
-  --fs-timepicker-current-font-weight: 300;
-  --fs-timepicker-current-line-height: 1.2;
-  --fs-timepicker-current-color: #fff;
-  --fs-timepicker-current-opacity: 0.54;
-  --fs-timepicker-clock-wrapper-min-width: 310px;
-  --fs-timepicker-clock-wrapper-max-width: 325px;
-  --fs-timepicker-clock-wrapper-min-height: 305px;
-  --fs-timepicker-clock-wrapper-text-color: #4f4f4f;
-  --fs-timepicker-mode-wrapper-font-size: 18px;
-  --fs-timepicker-mode-wrapper-color: rgba(255, 255, 255, 0.54);
-  --fs-timepicker-clock-width: 260px;
-  --fs-timepicker-clock-height: 260px;
-  --fs-timepicker-clock-face-bg: #f0f0f0;
-  --fs-timepicker-time-tips-inner-active-color: #fff;
-  --fs-timepicker-time-tips-inner-active-bg: #3b71ca;
-  --fs-timepicker-time-tips-inner-active-font-weight: 400;
-  --fs-timepicker-dot-font-weight: 300;
-  --fs-timepicker-dot-line-height: 1.2;
-  --fs-timepicker-dot-color: #fff;
-  --fs-timepicker-dot-font-size: 3.75rem;
-  --fs-timepicker-dot-opacity: 0.54;
-  --fs-timepicker-item-middle-dot-width: 6px;
-  --fs-timepicker-item-middle-dot-height: 6px;
-  --fs-timepicker-item-middle-dot-border-radius: 50%;
-  --fs-timepicker-item-middle-dot-bg: #3b71ca;
-  --fs-timepicker-hand-pointer-bg: #3b71ca;
-  --fs-timepicker-hand-pointer-bottom: 50%;
-  --fs-timepicker-hand-pointer-height: 40%;
-  --fs-timepicker-hand-pointer-left: calc(50% - 1px);
-  --fs-timepicker-hand-pointer-width: 2px;
-  --fs-timepicker-circle-top: -21px;
-  --fs-timepicker-circle-left: -15px;
-  --fs-timepicker-circle-width: 4px;
-  --fs-timepicker-circle-border-width: 14px;
-  --fs-timepicker-circle-border-color: #3b71ca;
-  --fs-timepicker-circle-height: 4px;
-  --fs-timepicker-circle-active-background-color: #fff;
-  --fs-timepicker-hour-mode-color: #fff;
-  --fs-timepicker-hour-mode-opacity: 0.54;
-  --fs-timepicker-hour-mode-hover-bg: rgba(0, 0, 0, 0.15);
-  --fs-timepicker-hour-mode-active-color: #fff;
-  --fs-timepicker-footer-border-bottom-left-radius: 0.5rem;
-  --fs-timepicker-footer-border-bottom-right-radius: 0.5rem;
-  --fs-timepicker-footer-height: 56px;
-  --fs-timepicker-footer-padding-x: 12px;
-  --fs-timepicker-footer-bg: #fff;
-  --fs-timepicker-clock-animation: show-up-clock 350ms linear;
-  --fs-timepicker-zindex: 1065;
-  
-  touch-action: none;
-  z-index: var(--fs-timepicker-zindex);
-  opacity: 1;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  left: 0;
-  background-color: var(--fs-timepicker-wrapper-bg);
-}
-
-/* Animation */
-.animation {
-  animation-fill-mode: both;
-}
-
-.fade-in {
-  animation-name: fadeIn;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes show-up-clock {
-  0% {
-    opacity: 0;
-    transform: scale(0.7);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-/* Timepicker components */
-.timepicker-modal {
-  margin: 0;
-  font-family: "Roboto", sans-serif;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.6;
-  color: #4f4f4f;
-  text-align: left;
-  background-color: #fff;
-  z-index: var(--fs-timepicker-zindex);
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: transparent;
-}
-
-/* Ensure all elements inside the timepicker use border-box */
-.timepicker-modal *,
-.timepicker-modal *::before,
-.timepicker-modal *::after {
-  box-sizing: border-box;
-}
-
-.timepicker-container {
-  max-height: calc(100% - 64px);
-  overflow-y: auto;
-  box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
-}
-
-.timepicker-elements {
-  min-width: var(--fs-timepicker-elements-min-width);
-  min-height: var(--fs-timepicker-elements-min-height);
-  background: var(--fs-timepicker-elements-background);
-  border-top-right-radius: var(--fs-timepicker-elements-border-top-right-radius);
-  border-top-left-radius: var(--fs-timepicker-elements-border-top-left-radius);
-}
-
-.timepicker-head {
-  background-color: var(--fs-timepicker-head-bg);
-  height: var(--fs-timepicker-head-height);
-  border-top-right-radius: var(--fs-timepicker-head-border-top-right-radius);
-  border-top-left-radius: var(--fs-timepicker-head-border-top-left-radius);
-  padding: var(--fs-timepicker-head-padding-y) var(--fs-timepicker-head-padding-right) var(--fs-timepicker-head-padding-y) var(--fs-timepicker-head-padding-left);
-}
-
-.timepicker-current {
-  font-size: var(--fs-timepicker-current-font-size);
-  font-weight: var(--fs-timepicker-current-font-weight);
-  line-height: var(--fs-timepicker-current-line-height);
-  color: var(--fs-timepicker-current-color);
-  opacity: var(--fs-timepicker-current-opacity);
-  border: none;
-  background: transparent;
-  padding: 0;
-  position: relative;
-  vertical-align: unset;
-}
-
-.timepicker-current.active {
-  opacity: 1;
-}
-
-.timepicker-dot {
-  font-size: var(--fs-timepicker-dot-font-size);
-  font-weight: var(--fs-timepicker-dot-font-weight);
-  line-height: var(--fs-timepicker-dot-line-height);
-  color: var(--fs-timepicker-dot-color);
-  opacity: var(--fs-timepicker-dot-opacity);
-  border: none;
-  background: transparent;
-  padding: 0;
-}
-
-.timepicker-mode-wrapper {
-  font-size: var(--fs-timepicker-mode-wrapper-font-size);
-  color: var(--fs-timepicker-mode-wrapper-color);
-}
-
-.timepicker-hour-mode {
-  padding: 0;
-  background-color: transparent;
-  border: none;
-  color: var(--fs-timepicker-hour-mode-color);
-  opacity: var(--fs-timepicker-hour-mode-opacity);
-  cursor: pointer;
-}
-
-/* These focus styles are overridden later in the file with !important */
-.timepicker-hour-mode:hover,
-.timepicker-hour-mode:focus,
-.timepicker-hour:hover,
-.timepicker-hour:focus,
-.timepicker-minute:hover,
-.timepicker-minute:focus {
-  background-color: var(--fs-timepicker-hour-mode-hover-bg);
-  outline: none;
-  cursor: pointer;
-}
-
-.timepicker-hour-mode.active,
-.timepicker-hour.active,
-.timepicker-minute.active {
-  color: #fff;
-  opacity: 1;
-  outline: none;
-}
-
-.timepicker-clock-wrapper {
-  min-width: var(--fs-timepicker-clock-wrapper-min-width);
-  max-width: var(--fs-timepicker-clock-wrapper-max-width);
-  min-height: var(--fs-timepicker-clock-wrapper-min-height);
-  overflow-x: hidden;
-  height: 100%;
-  color: var(--fs-timepicker-clock-wrapper-text-color);
-}
-
-.timepicker-clock {
-  position: relative;
-  border-radius: 100%;
-  width: var(--fs-timepicker-clock-width);
-  height: var(--fs-timepicker-clock-height);
-  cursor: default;
-  margin: 0 auto;
-  background-color: var(--fs-timepicker-clock-face-bg);
-  user-select: none;
-}
-
-.timepicker-clock-animation {
-  animation: var(--fs-timepicker-clock-animation);
-}
-
-.timepicker-middle-dot {
-  top: 50%;
-  left: 50%;
-  width: var(--fs-timepicker-item-middle-dot-width);
-  height: var(--fs-timepicker-item-middle-dot-height);
-  transform: translate(-50%, -50%);
-  border-radius: var(--fs-timepicker-item-middle-dot-border-radius);
-  background-color: var(--fs-timepicker-item-middle-dot-bg);
-}
-
-.timepicker-hand-pointer {
-  background-color: var(--fs-timepicker-hand-pointer-bg);
-  bottom: var(--fs-timepicker-hand-pointer-bottom);
-  height: var(--fs-timepicker-hand-pointer-height);
-  left: var(--fs-timepicker-hand-pointer-left);
-  transform-origin: center bottom 0;
-  width: var(--fs-timepicker-hand-pointer-width);
-}
-
-.timepicker-circle {
-  top: var(--fs-timepicker-circle-top);
-  left: var(--fs-timepicker-circle-left);
-  width: var(--fs-timepicker-circle-width);
-  border: var(--fs-timepicker-circle-border-width) solid var(--fs-timepicker-circle-border-color);
-  height: var(--fs-timepicker-circle-height);
-  box-sizing: content-box;
-  border-radius: 100%;
-  background-color: transparent;
-}
-
-.timepicker-circle.active {
-  background-color: var(--fs-timepicker-circle-active-background-color);
-}
-
-.timepicker-time-tips-minutes,
-.timepicker-time-tips-hours {
-  position: absolute;
-  border-radius: 100%;
-  width: 32px;
-  height: 32px;
-  text-align: center;
-  cursor: pointer;
-  font-size: 1.1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: 300;
-  user-select: none;
-}
-
-.timepicker-time-tips-minutes.active,
-.timepicker-time-tips-hours.active {
-  color: var(--fs-timepicker-time-tips-inner-active-color);
-  background-color: var(--fs-timepicker-time-tips-inner-active-bg);
-  font-weight: var(--fs-timepicker-time-tips-inner-active-font-weight);
-}
-
-.timepicker-footer {
-  border-bottom-left-radius: var(--fs-timepicker-footer-border-bottom-left-radius);
-  border-bottom-right-radius: var(--fs-timepicker-footer-border-bottom-right-radius);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  height: var(--fs-timepicker-footer-height);
-  padding-left: var(--fs-timepicker-footer-padding-x);
-  padding-right: var(--fs-timepicker-footer-padding-x);
-  background-color: var(--fs-timepicker-footer-bg);
-}
-
-.timepicker-button {
-  font-size: var(--fs-timepicker-button-font-size);
-  min-width: var(--fs-timepicker-button-min-width);
-  box-sizing: border-box;
-  font-weight: var(--fs-timepicker-button-font-weight);
-  line-height: var(--fs-timepicker-button-line-height);
-  border-radius: var(--fs-timepicker-button-border-radius);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--fs-timepicker-button-color);
-  border: none;
-  background-color: transparent;
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  outline: none;
-  padding: 0 var(--fs-timepicker-button-padding-x);
-  height: var(--fs-timepicker-button-height);
-  margin-bottom: var(--fs-timepicker-button-margin-bottom);
-  cursor: pointer;
-}
-
-.timepicker-button:hover {
-  background-color: var(--fs-timepicker-button-hover-bg);
-}
-
-.timepicker-button:focus {
-  outline: none;
-  background-color: var(--fs-timepicker-button-focus-bg);
-}
-
-/* Add missing button styling */
-button {
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-/** Remove focus from buttons after clicked **/
-/* Prevent selection/focus styling on all buttons in the timepicker */
-.timepicker-modal button {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-tap-highlight-color: transparent;
-  touch-action: manipulation;
-}
-
-/* Override focus styles completely */
-.timepicker-modal button:focus {
-  outline: none !important;
-  box-shadow: none !important;
-  -webkit-box-shadow: none !important;
-}
-
-/* Prevent text selection on all elements */
-.timepicker-modal * {
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-}
-
-/* Add this to the body when the timepicker is active */
-body.timepicker-active {
-  -webkit-tap-highlight-color: transparent;
-}
-
-/* Add !important to ensure these styles take precedence */
-.timepicker-current:focus,
-.timepicker-dot:focus,
-.timepicker-hour-mode:focus,
-.timepicker-button:focus {
-  outline: none !important;
-  background-color: transparent !important;
-}
-
-/* Only apply background color on hover, not on focus */
-.timepicker-hour-mode:hover,
-.timepicker-hour:hover,
-.timepicker-minute:hover,
-.timepicker-button:hover {
-  background-color: var(--fs-timepicker-hour-mode-hover-bg);
-}
-
-/* Ensure active states are properly styled */
-.timepicker-hour-mode.active,
-.timepicker-hour.active,
-.timepicker-minute.active {
-  color: #fff !important;
-  opacity: 1 !important;
-} 
\ No newline at end of file
diff --git a/views/admin.html b/views/admin.html
index 71ade52..0cd961f 100644
--- a/views/admin.html
+++ b/views/admin.html
@@ -16,7 +16,7 @@
         <div class="row g-0">
             <div class="col-md-4 sidebar bg-light border-end border-gray-300">
                 <div class="d-flex flex-column align-items-center p-4">
-                    <img src="/avatar.jpg" alt="Doug Masiero" class="profile-pic rounded-circle mb-3 shadow-sm">
+                    <img src="/images/avatar.jpg" alt="Doug Masiero" class="profile-pic rounded-circle mb-3 shadow-sm">
                     <h2 class="fs-5 text-dark fw-bold mb-2">Doug Masiero</h2>
                     <h3 class="fs-6 text-muted mb-2">30 Minute Meeting</h3>
                     <p class="text-muted fs-6">30 min</p>
diff --git a/views/index.html b/views/index.html
index 3a8dafb..81b143b 100644
--- a/views/index.html
+++ b/views/index.html
@@ -6,7 +6,7 @@
     <title>FreeSched Meeting Scheduler</title>
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="/styles.css">
+    <link rel="stylesheet" href="/css/styles.css">
     <!-- Bootstrap Icons -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
 </head>
@@ -21,7 +21,7 @@
         <div class="row g-0">
             <div class="col-md-4 sidebar bg-light border-end border-gray-300">
                 <div class="d-flex flex-column align-items-center p-4">
-                    <img src="/avatar.jpg" alt="Doug Masiero" class="profile-pic rounded-circle mb-3 shadow-sm">
+                    <img src="/images/avatar.jpg" alt="Doug Masiero" class="profile-pic rounded-circle mb-3 shadow-sm">
                     <h2 class="fs-5 text-dark fw-bold mb-2">Doug Masiero</h2>
                     <h3 class="fs-6 text-muted mb-2">30 Minute Meeting</h3>
                     <p class="text-muted fs-6">30 min</p>