diff --git a/management-dashboard-web-app/src/components/CameraConfigModal.tsx b/management-dashboard-web-app/src/components/CameraConfigModal.tsx
index bf1971d..39abdbb 100755
--- a/management-dashboard-web-app/src/components/CameraConfigModal.tsx
+++ b/management-dashboard-web-app/src/components/CameraConfigModal.tsx
@@ -168,7 +168,7 @@ export function CameraConfigModal({ cameraName, isOpen, onClose, onSuccess, onEr
   return (
     <div className="fixed inset-0 flex items-center justify-center overflow-y-auto modal z-999999">
       <div
-        className="fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[32px]"
+        className="fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[2px]"
         onClick={onClose}
       />
       <div className="relative w-full rounded-2xl bg-white shadow-theme-xl dark:bg-gray-900 max-w-4xl mx-4 max-h-[90vh] overflow-hidden" onClick={(e) => e.stopPropagation()}>
diff --git a/management-dashboard-web-app/src/components/CameraPreviewModal.tsx b/management-dashboard-web-app/src/components/CameraPreviewModal.tsx
index f64b8d1..19d74e7 100755
--- a/management-dashboard-web-app/src/components/CameraPreviewModal.tsx
+++ b/management-dashboard-web-app/src/components/CameraPreviewModal.tsx
@@ -102,7 +102,7 @@ export function CameraPreviewModal({ cameraName, isOpen, onClose, onError }: Cam
   return (
     <div className="fixed inset-0 flex items-center justify-center overflow-y-auto modal z-999999">
       <div
-        className="fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[32px]"
+        className="fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[2px]"
         onClick={handleClose}
       />
       <div className="relative w-11/12 max-w-4xl rounded-2xl bg-white shadow-theme-xl dark:bg-gray-900 p-5" onClick={(e) => e.stopPropagation()}>
diff --git a/management-dashboard-web-app/src/components/CreateUserModal.tsx b/management-dashboard-web-app/src/components/CreateUserModal.tsx
index f378d05..dcaa614 100755
--- a/management-dashboard-web-app/src/components/CreateUserModal.tsx
+++ b/management-dashboard-web-app/src/components/CreateUserModal.tsx
@@ -108,7 +108,7 @@ export function CreateUserModal({ roles, onClose, onUserCreated }: CreateUserMod
   return (
     <div className="fixed inset-0 flex items-center justify-center overflow-y-auto modal z-999999">
       <div
-        className="fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[32px]"
+        className="fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[2px]"
         onClick={onClose}
       />
       <div className="relative w-full rounded-2xl bg-white shadow-theme-xl dark:bg-gray-900 max-w-md mx-auto p-4" onClick={(e) => e.stopPropagation()}>
diff --git a/management-dashboard-web-app/src/components/ExperimentModal.tsx b/management-dashboard-web-app/src/components/ExperimentModal.tsx
index 5b3ecf3..b4d9a82 100755
--- a/management-dashboard-web-app/src/components/ExperimentModal.tsx
+++ b/management-dashboard-web-app/src/components/ExperimentModal.tsx
@@ -63,7 +63,7 @@ export function ExperimentModal({ experiment, onClose, onExperimentSaved, phaseI
   return (
     <div className="fixed inset-0 flex items-center justify-center overflow-y-auto modal z-999999">
       <div
-        className="fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[32px]"
+        className="fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[2px]"
         onClick={onClose}
       />
       <div className="relative w-full rounded-2xl bg-white shadow-theme-xl dark:bg-gray-900 max-w-4xl mx-auto max-h-[90vh] overflow-y-auto p-4" onClick={(e) => e.stopPropagation()}>
diff --git a/management-dashboard-web-app/src/components/RepetitionScheduleModal.tsx b/management-dashboard-web-app/src/components/RepetitionScheduleModal.tsx
index 0a307ea..73cd3bf 100755
--- a/management-dashboard-web-app/src/components/RepetitionScheduleModal.tsx
+++ b/management-dashboard-web-app/src/components/RepetitionScheduleModal.tsx
@@ -94,7 +94,7 @@ export function RepetitionScheduleModal({ experiment, repetition, onClose, onSch
   return (
     <div className="fixed inset-0 flex items-center justify-center overflow-y-auto modal z-999999">
       <div
-        className="fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[32px]"
+        className="fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[2px]"
         onClick={onClose}
       />
       <div className="relative w-full rounded-2xl bg-white shadow-theme-xl dark:bg-gray-900 max-w-md mx-auto max-h-[90vh] overflow-y-auto p-4" onClick={(e) => e.stopPropagation()}>
diff --git a/management-dashboard-web-app/src/components/ScheduleModal.tsx b/management-dashboard-web-app/src/components/ScheduleModal.tsx
index 2cd7133..1539882 100755
--- a/management-dashboard-web-app/src/components/ScheduleModal.tsx
+++ b/management-dashboard-web-app/src/components/ScheduleModal.tsx
@@ -94,7 +94,7 @@ export function ScheduleModal({ experiment, onClose, onScheduleUpdated }: Schedu
   return (
     <div className="fixed inset-0 flex items-center justify-center overflow-y-auto modal z-999999">
       <div
-        className="fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[32px]"
+        className="fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[2px]"
         onClick={onClose}
       />
       <div className="relative w-full rounded-2xl bg-white shadow-theme-xl dark:bg-gray-900 max-w-md mx-auto p-4" onClick={(e) => e.stopPropagation()}>
diff --git a/management-dashboard-web-app/src/components/Scheduling.tsx b/management-dashboard-web-app/src/components/Scheduling.tsx
index 81e14dd..4ebbc4e 100644
--- a/management-dashboard-web-app/src/components/Scheduling.tsx
+++ b/management-dashboard-web-app/src/components/Scheduling.tsx
@@ -362,52 +362,40 @@ function AvailabilityCalendar({ user }: { user: User }) {
         }
     ])
 
-    const [selectedDate, setSelectedDate] = useState<Date | null>(null)
-    const [showTimeSlotForm, setShowTimeSlotForm] = useState(false)
-    const [newTimeSlot, setNewTimeSlot] = useState({
-        startTime: '09:00',
-        endTime: '17:00',
-        title: 'Available'
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null)
+  const [showTimeSlotForm, setShowTimeSlotForm] = useState(false)
+  const [newTimeSlot, setNewTimeSlot] = useState({
+    startTime: '09:00',
+    endTime: '17:00'
+  })
+  const [currentView, setCurrentView] = useState(Views.MONTH)
+
+  const eventStyleGetter = (event: CalendarEvent) => {
+    return {
+      style: {
+        backgroundColor: '#10b981', // green-500 for available
+        borderColor: '#10b981',
+        color: 'white',
+        borderRadius: '4px',
+        border: 'none',
+        display: 'block'
+      }
+    }
+  }
+
+  const handleSelectSlot = ({ start, end }: { start: Date; end: Date }) => {
+    // Set the selected date and show the time slot form
+    setSelectedDate(start)
+    setShowTimeSlotForm(true)
+    
+    // Pre-fill the form with the selected time range
+    const startTime = moment(start).format('HH:mm')
+    const endTime = moment(end).format('HH:mm')
+    setNewTimeSlot({
+      startTime,
+      endTime
     })
-
-    const eventStyleGetter = (event: CalendarEvent) => {
-        let backgroundColor = '#3174ad'
-        let borderColor = '#3174ad'
-
-        if (event.resource === 'available') {
-            backgroundColor = '#10b981' // green-500
-            borderColor = '#10b981'
-        } else if (event.resource === 'unavailable') {
-            backgroundColor = '#ef4444' // red-500
-            borderColor = '#ef4444'
-        }
-
-        return {
-            style: {
-                backgroundColor,
-                borderColor,
-                color: 'white',
-                borderRadius: '4px',
-                border: 'none',
-                display: 'block'
-            }
-        }
-    }
-
-    const handleSelectSlot = ({ start, end }: { start: Date; end: Date }) => {
-        // Set the selected date and show the time slot form
-        setSelectedDate(start)
-        setShowTimeSlotForm(true)
-
-        // Pre-fill the form with the selected time range
-        const startTime = moment(start).format('HH:mm')
-        const endTime = moment(end).format('HH:mm')
-        setNewTimeSlot({
-            startTime,
-            endTime,
-            title: 'Available'
-        })
-    }
+  }
 
     const handleSelectEvent = (event: CalendarEvent) => {
         if (window.confirm('Do you want to remove this availability?')) {
@@ -495,10 +483,35 @@ function AvailabilityCalendar({ user }: { user: User }) {
                 </div>
             </div>
 
-      {/* Time Slot Form Modal */}
-      {showTimeSlotForm && selectedDate && (
-        <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-[9999]">
-          <div className="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md mx-4 shadow-2xl">
+            {/* Time Slot Form Modal */}
+            {showTimeSlotForm && selectedDate && (
+                <div className="fixed inset-0 flex items-center justify-center overflow-y-auto modal z-999999">
+                    <div
+                        className="fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[2px]"
+                        onClick={handleCancelTimeSlot}
+                    />
+                    <div className="relative w-full rounded-2xl bg-white shadow-theme-xl dark:bg-gray-900 max-w-md mx-auto p-4" onClick={(e) => e.stopPropagation()}>
+                        {/* Close Button */}
+                        <button
+                            onClick={handleCancelTimeSlot}
+                            className="absolute right-3 top-3 z-999 flex h-9.5 w-9.5 items-center justify-center rounded-full bg-gray-100 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:right-6 sm:top-6 sm:h-11 sm:w-11"
+                        >
+                            <svg
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
+                                <path
+                                    fillRule="evenodd"
+                                    clipRule="evenodd"
+                                    d="M6.04289 16.5413C5.65237 16.9318 5.65237 17.565 6.04289 17.9555C6.43342 18.346 7.06658 18.346 7.45711 17.9555L11.9987 13.4139L16.5408 17.956C16.9313 18.3466 17.5645 18.3466 17.955 17.956C18.3455 17.5655 18.3455 16.9323 17.955 16.5418L13.4129 11.9997L17.955 7.4576C18.3455 7.06707 18.3455 6.43391 17.955 6.04338C17.5645 5.65286 16.9313 5.65286 16.5408 6.04338L11.9987 10.5855L7.45711 6.0439C7.06658 5.65338 6.43342 5.65338 6.04289 6.0439C5.65237 6.43442 5.65237 7.06759 6.04289 7.45811L10.5845 11.9997L6.04289 16.5413Z"
+                                    fill="currentColor"
+                                />
+                            </svg>
+                        </button>
+
                         <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                             Add Availability for {moment(selectedDate).format('MMMM D, YYYY')}
                         </h3>
diff --git a/management-dashboard-web-app/src/features/video-streaming/components/Pagination.tsx b/management-dashboard-web-app/src/features/video-streaming/components/Pagination.tsx
index 8a891d7..e5ed533 100755
--- a/management-dashboard-web-app/src/features/video-streaming/components/Pagination.tsx
+++ b/management-dashboard-web-app/src/features/video-streaming/components/Pagination.tsx
@@ -5,7 +5,6 @@
  * Provides page navigation with first/last, previous/next, and numbered page buttons.
  */
 
-import React from 'react';
 import { type PaginationProps } from '../types';
 
 export const Pagination: React.FC<PaginationProps> = ({
diff --git a/management-dashboard-web-app/src/features/video-streaming/components/VideoCard.tsx b/management-dashboard-web-app/src/features/video-streaming/components/VideoCard.tsx
index a471567..6d6d8f3 100755
--- a/management-dashboard-web-app/src/features/video-streaming/components/VideoCard.tsx
+++ b/management-dashboard-web-app/src/features/video-streaming/components/VideoCard.tsx
@@ -4,7 +4,6 @@
  * A reusable card component for displaying video information with thumbnail, metadata, and actions.
  */
 
-import React from 'react';
 import { type VideoCardProps } from '../types';
 import { VideoThumbnail } from './VideoThumbnail';
 import {
diff --git a/management-dashboard-web-app/vite.config.ts b/management-dashboard-web-app/vite.config.ts
index c8c46f5..967a5c6 100755
--- a/management-dashboard-web-app/vite.config.ts
+++ b/management-dashboard-web-app/vite.config.ts
@@ -5,7 +5,9 @@ import tailwindcss from '@tailwindcss/vite'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
-    react(),
+    react({
+      jsxRuntime: 'automatic'
+    }),
     tailwindcss(),
   ],
   server: {