diff --git a/frontend/src/components/BookingForm.vue b/frontend/src/components/BookingForm.vue
index ffa85e5..bae8a1b 100644
--- a/frontend/src/components/BookingForm.vue
+++ b/frontend/src/components/BookingForm.vue
@@ -1,33 +1,6 @@
 <template>
   <div class="booking-form">
     <form @submit.prevent="handleSubmit">
-      <!-- Template Selection -->
-      <div class="form-group">
-        <label for="template" class="form-label">Use Template (optional)</label>
-        <div class="template-selector">
-          <select
-            id="template"
-            v-model="selectedTemplateId"
-            class="form-input"
-            @change="applyTemplate"
-          >
-            <option :value="null">-- No template --</option>
-            <option v-for="template in templates" :key="template.id" :value="template.id">
-              {{ template.name }} ({{ template.duration_minutes }}min)
-            </option>
-          </select>
-          <button
-            type="button"
-            class="btn btn-outline"
-            :disabled="!canSaveAsTemplate"
-            @click="showSaveTemplateModal = true"
-            title="Save current form as template"
-          >
-            Save as Template
-          </button>
-        </div>
-      </div>
-
       <!-- Space Selection -->
       <div class="form-group">
         <label for="space" class="form-label">Space *</label>
@@ -55,6 +28,94 @@
         <span v-if="errors.space_id" class="form-error">{{ errors.space_id }}</span>
       </div>
 
+      <!-- Title -->
+      <div class="form-group">
+        <label for="title" class="form-label">Titlu *</label>
+        <input
+          id="title"
+          v-model="formData.title"
+          type="text"
+          class="form-input"
+          :class="{ 'form-input-error': errors.title }"
+          placeholder="Titlu rezervare"
+        />
+        <span v-if="errors.title" class="form-error">{{ errors.title }}</span>
+      </div>
+
+      <!-- Description -->
+      <div class="form-group">
+        <label for="description" class="form-label">Descriere (opțional)</label>
+        <textarea
+          id="description"
+          v-model="formData.description"
+          class="form-textarea"
+          rows="3"
+          placeholder="Detalii suplimentare..."
+        ></textarea>
+      </div>
+
+      <!-- Start Date & Time -->
+      <div class="form-group">
+        <label class="form-label">Început *</label>
+        <div class="datetime-row">
+          <div class="datetime-field">
+            <label for="start-date" class="form-sublabel">Data</label>
+            <input
+              id="start-date"
+              v-model="formData.start_date"
+              type="date"
+              class="form-input"
+              :class="{ 'form-input-error': errors.start_date }"
+              :min="minDate"
+            />
+          </div>
+          <div class="datetime-field">
+            <label for="start-time" class="form-sublabel">Ora</label>
+            <input
+              id="start-time"
+              v-model="formData.start_time"
+              type="time"
+              class="form-input"
+              :class="{ 'form-input-error': errors.start_time }"
+            />
+          </div>
+        </div>
+        <span v-if="errors.start_date || errors.start_time" class="form-error">
+          {{ errors.start_date || errors.start_time }}
+        </span>
+      </div>
+
+      <!-- End Date & Time -->
+      <div class="form-group">
+        <label class="form-label">Sfârșit *</label>
+        <div class="datetime-row">
+          <div class="datetime-field">
+            <label for="end-date" class="form-sublabel">Data</label>
+            <input
+              id="end-date"
+              v-model="formData.end_date"
+              type="date"
+              class="form-input"
+              :class="{ 'form-input-error': errors.end_date }"
+              :min="formData.start_date || minDate"
+            />
+          </div>
+          <div class="datetime-field">
+            <label for="end-time" class="form-sublabel">Ora</label>
+            <input
+              id="end-time"
+              v-model="formData.end_time"
+              type="time"
+              class="form-input"
+              :class="{ 'form-input-error': errors.end_time }"
+            />
+          </div>
+        </div>
+        <span v-if="errors.end_date || errors.end_time" class="form-error">
+          {{ errors.end_date || errors.end_time }}
+        </span>
+      </div>
+
       <!-- Warning Banner -->
       <div v-if="availabilityWarning" class="warning-banner">
         <span class="warning-icon">⚠️</span>
@@ -71,185 +132,6 @@
         </div>
       </div>
 
-      <!-- Date -->
-      <div class="form-group">
-        <label for="date" class="form-label">Date *</label>
-        <input
-          id="date"
-          v-model="formData.date"
-          type="date"
-          class="form-input"
-          :class="{ 'form-input-error': errors.date }"
-          :min="minDate"
-        />
-        <span v-if="errors.date" class="form-error">{{ errors.date }}</span>
-      </div>
-
-      <!-- Timezone Notice -->
-      <div v-if="userTimezone" class="timezone-notice">
-        Times are in your timezone: <strong>{{ userTimezone }}</strong>
-      </div>
-
-      <!-- Time Range -->
-      <div class="form-row">
-        <div class="form-group">
-          <label for="start-time" class="form-label">Start Time *</label>
-          <input
-            id="start-time"
-            v-model="formData.start_time"
-            type="time"
-            class="form-input"
-            :class="{ 'form-input-error': errors.start_time }"
-          />
-          <span v-if="errors.start_time" class="form-error">{{ errors.start_time }}</span>
-        </div>
-
-        <div class="form-group">
-          <label for="end-time" class="form-label">End Time *</label>
-          <input
-            id="end-time"
-            v-model="formData.end_time"
-            type="time"
-            class="form-input"
-            :class="{ 'form-input-error': errors.end_time }"
-          />
-          <span v-if="errors.end_time" class="form-error">{{ errors.end_time }}</span>
-        </div>
-      </div>
-
-      <!-- Title -->
-      <div class="form-group">
-        <label for="title" class="form-label">Title *</label>
-        <input
-          id="title"
-          v-model="formData.title"
-          type="text"
-          class="form-input"
-          :class="{ 'form-input-error': errors.title }"
-          placeholder="Meeting title or purpose"
-        />
-        <span v-if="errors.title" class="form-error">{{ errors.title }}</span>
-      </div>
-
-      <!-- Description -->
-      <div class="form-group">
-        <label for="description" class="form-label">Description</label>
-        <textarea
-          id="description"
-          v-model="formData.description"
-          class="form-textarea"
-          rows="3"
-          placeholder="Additional details (optional)"
-        ></textarea>
-      </div>
-
-      <!-- Recurring Options -->
-      <div class="form-group recurring-section">
-        <label class="checkbox-label">
-          <input type="checkbox" v-model="isRecurring" />
-          <span>Repeat Weekly</span>
-        </label>
-
-        <div v-if="isRecurring" class="recurring-options">
-          <div class="form-group">
-            <label class="form-label">Select Days *</label>
-            <div class="day-selector">
-              <label
-                v-for="(day, index) in weekDays"
-                :key="index"
-                class="day-checkbox"
-                :class="{ active: selectedDays.includes(index) }"
-              >
-                <input type="checkbox" :value="index" v-model="selectedDays" />
-                <span>{{ day }}</span>
-              </label>
-            </div>
-            <span v-if="errors.recurrence_days" class="form-error">{{
-              errors.recurrence_days
-            }}</span>
-          </div>
-
-          <div class="form-row">
-            <div class="form-group">
-              <label for="recurring-start-date" class="form-label">Start Date *</label>
-              <input
-                id="recurring-start-date"
-                v-model="recurringStartDate"
-                type="date"
-                class="form-input"
-                :class="{ 'form-input-error': errors.recurring_start_date }"
-                :min="minDate"
-              />
-              <span v-if="errors.recurring_start_date" class="form-error">{{
-                errors.recurring_start_date
-              }}</span>
-            </div>
-
-            <div class="form-group">
-              <label for="recurring-end-date" class="form-label">End Date *</label>
-              <input
-                id="recurring-end-date"
-                v-model="recurringEndDate"
-                type="date"
-                class="form-input"
-                :class="{ 'form-input-error': errors.recurring_end_date }"
-                :min="recurringStartDate || minDate"
-              />
-              <span v-if="errors.recurring_end_date" class="form-error">{{
-                errors.recurring_end_date
-              }}</span>
-            </div>
-          </div>
-
-          <div class="form-group">
-            <label class="checkbox-label">
-              <input type="checkbox" v-model="skipConflicts" />
-              <span>Skip conflicted dates (otherwise stop on first conflict)</span>
-            </label>
-          </div>
-
-          <div v-if="occurrenceCount > 0" class="occurrence-preview">
-            <p>
-              <strong>Will create {{ occurrenceCount }} bookings</strong>
-              <span v-if="occurrenceCount >= 52" class="max-notice">(max 52)</span>
-            </p>
-            <p v-if="firstOccurrences.length > 0" class="first-dates">
-              First dates: {{ firstOccurrences.join(', ') }}
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <!-- File Attachments -->
-      <div class="form-group">
-        <label class="form-label">Attachments (optional, max 5 files, 10MB each)</label>
-        <div class="file-upload-area">
-          <input
-            id="file-upload"
-            ref="fileInput"
-            type="file"
-            multiple
-            accept=".pdf,.docx,.pptx,.xlsx,.xls,.png,.jpg,.jpeg"
-            class="file-input-hidden"
-            @change="handleFileSelect"
-          />
-          <label for="file-upload" class="file-upload-button">
-            Choose Files
-          </label>
-          <span class="file-upload-hint">PDF, DOCX, PPTX, XLSX, PNG, JPG</span>
-        </div>
-        <ul v-if="selectedFiles.length > 0" class="file-list">
-          <li v-for="(file, index) in selectedFiles" :key="index" class="file-item">
-            <span class="file-name">{{ file.name }}</span>
-            <span class="file-size">{{ formatFileSize(file.size) }}</span>
-            <button type="button" class="btn-remove-file" @click="removeFile(index)">
-              Remove
-            </button>
-          </li>
-        </ul>
-        <span v-if="errors.files" class="form-error">{{ errors.files }}</span>
-      </div>
-
       <!-- API Error -->
       <div v-if="apiError" class="api-error">
         {{ apiError }}
@@ -268,69 +150,25 @@
           :disabled="submitting"
           @click="handleCancel"
         >
-          Cancel
+          Anulează
         </button>
         <button type="submit" class="btn btn-primary" :disabled="submitting">
-          {{ submitting ? 'Creating...' : 'Create Booking' }}
+          {{ submitting ? 'Se creează...' : 'Creează rezervare' }}
         </button>
       </div>
     </form>
-
-    <!-- Save Template Modal -->
-    <div v-if="showSaveTemplateModal" class="modal-overlay" @click="showSaveTemplateModal = false">
-      <div class="modal-content" @click.stop>
-        <h3>Save as Template</h3>
-        <div class="form-group">
-          <label for="template-name" class="form-label">Template Name *</label>
-          <input
-            id="template-name"
-            v-model="newTemplateName"
-            type="text"
-            class="form-input"
-            placeholder="e.g., Weekly Team Sync"
-          />
-        </div>
-        <div v-if="templateError" class="api-error">
-          {{ templateError }}
-        </div>
-        <div class="modal-actions">
-          <button
-            type="button"
-            class="btn btn-secondary"
-            @click="showSaveTemplateModal = false"
-          >
-            Cancel
-          </button>
-          <button
-            type="button"
-            class="btn btn-primary"
-            :disabled="!newTemplateName.trim() || savingTemplate"
-            @click="saveAsTemplate"
-          >
-            {{ savingTemplate ? 'Saving...' : 'Save Template' }}
-          </button>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
-import { bookingsApi, bookingTemplatesApi, spacesApi, attachmentsApi, handleApiError } from '@/services/api'
-import { useAuthStore } from '@/stores/auth'
-import { formatDate as formatDateUtil } from '@/utils/datetime'
+import { bookingsApi, spacesApi, handleApiError } from '@/services/api'
 import type {
   Space,
   BookingCreate,
-  BookingTemplate,
-  AvailabilityCheck,
-  RecurringBookingResult
+  AvailabilityCheck
 } from '@/types'
 
-const authStore = useAuthStore()
-const userTimezone = computed(() => authStore.user?.timezone || 'UTC')
-
 interface Props {
   spaceId?: number
 }
@@ -346,18 +184,39 @@ const emit = defineEmits<Emits>()
 // Form data
 interface FormData {
   space_id: number | null
-  date: string
+  start_date: string
   start_time: string
+  end_date: string
   end_time: string
   title: string
   description: string
 }
 
+// Initialize with default values (today, next hour, 1 hour duration)
+const getDefaults = () => {
+  const now = new Date()
+  const startHour = now.getHours() + 1
+  const endHour = startHour + 1
+
+  const year = now.getFullYear()
+  const month = String(now.getMonth() + 1).padStart(2, '0')
+  const day = String(now.getDate()).padStart(2, '0')
+
+  return {
+    date: `${year}-${month}-${day}`,
+    start_time: `${String(startHour).padStart(2, '0')}:00`,
+    end_time: `${String(endHour).padStart(2, '0')}:00`
+  }
+}
+
+const defaults = getDefaults()
+
 const formData = ref<FormData>({
   space_id: props.spaceId || null,
-  date: '',
-  start_time: '',
-  end_time: '',
+  start_date: defaults.date,
+  start_time: defaults.start_time,
+  end_date: defaults.date,
+  end_time: defaults.end_time,
   title: '',
   description: ''
 })
@@ -371,30 +230,6 @@ const loadingSpaces = ref(false)
 const spaces = ref<Space[]>([])
 const availabilityWarning = ref<AvailabilityCheck | null>(null)
 
-// File upload state
-const selectedFiles = ref<File[]>([])
-const fileInput = ref<HTMLInputElement | null>(null)
-
-const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10MB
-const MAX_FILES = 5
-const ALLOWED_EXTENSIONS = ['.pdf', '.docx', '.pptx', '.xlsx', '.xls', '.png', '.jpg', '.jpeg']
-
-// Template state
-const templates = ref<BookingTemplate[]>([])
-const selectedTemplateId = ref<number | null>(null)
-const showSaveTemplateModal = ref(false)
-const newTemplateName = ref('')
-const savingTemplate = ref(false)
-const templateError = ref('')
-
-// Recurring booking state
-const isRecurring = ref(false)
-const selectedDays = ref<number[]>([])
-const recurringStartDate = ref('')
-const recurringEndDate = ref('')
-const skipConflicts = ref(true)
-const weekDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-
 // Computed values
 const activeSpaces = computed(() => spaces.value.filter((s) => s.is_active))
 
@@ -409,58 +244,10 @@ const minDate = computed(() => {
   return today.toISOString().split('T')[0]
 })
 
-const canSaveAsTemplate = computed(() => {
-  return (
-    formData.value.space_id &&
-    formData.value.title.trim() &&
-    formData.value.start_time &&
-    formData.value.end_time
-  )
-})
-
-const occurrenceCount = computed(() => {
-  if (!isRecurring.value || selectedDays.value.length === 0 || !recurringStartDate.value || !recurringEndDate.value) {
-    return 0
-  }
-
-  const start = new Date(recurringStartDate.value)
-  const end = new Date(recurringEndDate.value)
-
-  if (start > end) return 0
-
-  let count = 0
-  let current = new Date(start)
-
-  while (current <= end && count < 52) {
-    if (selectedDays.value.includes(current.getDay() === 0 ? 6 : current.getDay() - 1)) {
-      count++
-    }
-    current.setDate(current.getDate() + 1)
-  }
-
-  return count
-})
-
-const firstOccurrences = computed(() => {
-  if (!isRecurring.value || selectedDays.value.length === 0 || !recurringStartDate.value || !recurringEndDate.value) {
-    return []
-  }
-
-  const start = new Date(recurringStartDate.value)
-  const end = new Date(recurringEndDate.value)
-  const dates: string[] = []
-  let current = new Date(start)
-
-  while (current <= end && dates.length < 5) {
-    const dayIndex = current.getDay() === 0 ? 6 : current.getDay() - 1
-    if (selectedDays.value.includes(dayIndex)) {
-      dates.push(formatDateUtil(current.toISOString(), userTimezone.value))
-    }
-    current.setDate(current.getDate() + 1)
-  }
-
-  return dates
-})
+// Helper to construct datetime from separate date and time fields
+const constructDateTime = (date: string, time: string): string => {
+  return `${date}T${time}:00`
+}
 
 // Load spaces
 const loadSpaces = async () => {
@@ -474,102 +261,16 @@ const loadSpaces = async () => {
   }
 }
 
-// Load templates
-const loadTemplates = async () => {
-  try {
-    templates.value = await bookingTemplatesApi.getAll()
-  } catch (err) {
-    console.error('Failed to load templates:', err)
-    // Don't show error - templates are optional feature
-  }
-}
-
-// Apply template
-const applyTemplate = () => {
-  if (!selectedTemplateId.value) return
-
-  const template = templates.value.find((t) => t.id === selectedTemplateId.value)
-  if (!template) return
-
-  // Apply template fields
-  if (template.space_id) {
-    formData.value.space_id = template.space_id
-  }
-  formData.value.title = template.title
-  formData.value.description = template.description || ''
-
-  // Calculate time based on duration
-  if (template.duration_minutes && formData.value.start_time) {
-    const start = new Date(`2000-01-01T${formData.value.start_time}`)
-    const end = new Date(start.getTime() + template.duration_minutes * 60000)
-    formData.value.end_time = end.toTimeString().substring(0, 5)
-  }
-}
-
-// Save as template
-const saveAsTemplate = async () => {
-  templateError.value = ''
-
-  if (!newTemplateName.value.trim()) {
-    templateError.value = 'Template name is required'
-    return
-  }
-
-  if (!formData.value.space_id) {
-    templateError.value = 'Please select a space first'
-    return
-  }
-
-  if (!formData.value.start_time || !formData.value.end_time) {
-    templateError.value = 'Please set start and end times first'
-    return
-  }
-
-  // Calculate duration
-  const start = new Date(`2000-01-01T${formData.value.start_time}`)
-  const end = new Date(`2000-01-01T${formData.value.end_time}`)
-  const durationMinutes = Math.floor((end.getTime() - start.getTime()) / 60000)
-
-  if (durationMinutes <= 0) {
-    templateError.value = 'End time must be after start time'
-    return
-  }
-
-  savingTemplate.value = true
-
-  try {
-    const newTemplate = await bookingTemplatesApi.create({
-      name: newTemplateName.value.trim(),
-      space_id: formData.value.space_id,
-      duration_minutes: durationMinutes,
-      title: formData.value.title.trim(),
-      description: formData.value.description.trim() || undefined
-    })
-
-    // Add to local list
-    templates.value.push(newTemplate)
-
-    // Close modal and reset
-    showSaveTemplateModal.value = false
-    newTemplateName.value = ''
-    templateError.value = ''
-
-    // Show success message briefly
-    successMessage.value = 'Template saved successfully!'
-    setTimeout(() => {
-      successMessage.value = ''
-    }, 3000)
-  } catch (err) {
-    templateError.value = handleApiError(err)
-  } finally {
-    savingTemplate.value = false
-  }
-}
-
-// Watch time fields and check availability (debounced)
+// Watch date/time fields and check availability (debounced)
 let checkTimeout: number | undefined
 watch(
-  [() => formData.value.space_id, () => formData.value.date, () => formData.value.start_time, () => formData.value.end_time],
+  [
+    () => formData.value.space_id,
+    () => formData.value.start_date,
+    () => formData.value.start_time,
+    () => formData.value.end_date,
+    () => formData.value.end_time
+  ],
   () => {
     if (checkTimeout) {
       clearTimeout(checkTimeout)
@@ -577,8 +278,9 @@ watch(
     checkTimeout = window.setTimeout(async () => {
       if (
         formData.value.space_id &&
-        formData.value.date &&
+        formData.value.start_date &&
         formData.value.start_time &&
+        formData.value.end_date &&
         formData.value.end_time
       ) {
         await checkAvailability()
@@ -592,8 +294,8 @@ watch(
 // Check availability
 const checkAvailability = async () => {
   try {
-    const start_datetime = constructDatetime(formData.value.date, formData.value.start_time)
-    const end_datetime = constructDatetime(formData.value.date, formData.value.end_time)
+    const start_datetime = constructDateTime(formData.value.start_date, formData.value.start_time)
+    const end_datetime = constructDateTime(formData.value.end_date, formData.value.end_time)
 
     const response = await bookingsApi.checkAvailability({
       space_id: formData.value.space_id!,
@@ -624,82 +326,45 @@ const validateForm = (): boolean => {
     isValid = false
   }
 
-  if (isRecurring.value) {
-    // Recurring booking validation
-    if (selectedDays.value.length === 0) {
-      errors.value.recurrence_days = 'Please select at least one day'
-      isValid = false
-    }
+  // Date and time validation
+  if (!formData.value.start_date) {
+    errors.value.start_date = 'Data de început este obligatorie'
+    isValid = false
+  }
 
-    if (!recurringStartDate.value) {
-      errors.value.recurring_start_date = 'Start date is required'
-      isValid = false
-    }
+  if (!formData.value.start_time) {
+    errors.value.start_time = 'Ora de început este obligatorie'
+    isValid = false
+  }
 
-    if (!recurringEndDate.value) {
-      errors.value.recurring_end_date = 'End date is required'
-      isValid = false
-    } else if (recurringStartDate.value && recurringEndDate.value) {
-      const start = new Date(recurringStartDate.value)
-      const end = new Date(recurringEndDate.value)
-      if (end < start) {
-        errors.value.recurring_end_date = 'End date must be after start date'
-        isValid = false
-      }
-    }
+  if (!formData.value.end_date) {
+    errors.value.end_date = 'Data de sfârșit este obligatorie'
+    isValid = false
+  }
 
-    // Start time required
-    if (!formData.value.start_time) {
-      errors.value.start_time = 'Start time is required'
-      isValid = false
-    }
+  if (!formData.value.end_time) {
+    errors.value.end_time = 'Ora de sfârșit este obligatorie'
+    isValid = false
+  }
 
-    // End time required
-    if (!formData.value.end_time) {
-      errors.value.end_time = 'End time is required'
+  // Validate start is not in the past
+  if (formData.value.start_date && formData.value.start_time) {
+    const startDateTime = new Date(constructDateTime(formData.value.start_date, formData.value.start_time))
+    const now = new Date()
+    if (startDateTime < now) {
+      errors.value.start_date = 'Data și ora de început nu pot fi în trecut'
       isValid = false
-    } else if (formData.value.start_time && formData.value.end_time) {
-      const start = new Date(`2000-01-01T${formData.value.start_time}`)
-      const end = new Date(`2000-01-01T${formData.value.end_time}`)
-      if (end <= start) {
-        errors.value.end_time = 'End time must be after start time'
-        isValid = false
-      }
-    }
-  } else {
-    // Regular booking validation
-    // Date
-    if (!formData.value.date) {
-      errors.value.date = 'Date is required'
-      isValid = false
-    } else {
-      const selectedDate = new Date(formData.value.date)
-      const today = new Date()
-      today.setHours(0, 0, 0, 0)
-      if (selectedDate < today) {
-        errors.value.date = 'Date cannot be in the past'
-        isValid = false
-      }
     }
+  }
 
-    // Start time
-    if (!formData.value.start_time) {
-      errors.value.start_time = 'Start time is required'
-      isValid = false
-    }
+  // Validate end is after start
+  if (formData.value.start_date && formData.value.start_time && formData.value.end_date && formData.value.end_time) {
+    const startDateTime = new Date(constructDateTime(formData.value.start_date, formData.value.start_time))
+    const endDateTime = new Date(constructDateTime(formData.value.end_date, formData.value.end_time))
 
-    // End time
-    if (!formData.value.end_time) {
-      errors.value.end_time = 'End time is required'
+    if (endDateTime <= startDateTime) {
+      errors.value.end_time = 'Sfârșitul trebuie să fie după început'
       isValid = false
-    } else if (formData.value.start_time && formData.value.end_time) {
-      // Check if end time is after start time
-      const start = new Date(`2000-01-01T${formData.value.start_time}`)
-      const end = new Date(`2000-01-01T${formData.value.end_time}`)
-      if (end <= start) {
-        errors.value.end_time = 'End time must be after start time'
-        isValid = false
-      }
     }
   }
 
@@ -712,79 +377,6 @@ const validateForm = (): boolean => {
   return isValid
 }
 
-// Construct ISO datetime strings
-const constructDatetime = (date: string, time: string): string => {
-  return `${date}T${time}:00`
-}
-
-// File handling
-const handleFileSelect = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  if (!target.files) return
-
-  const newFiles = Array.from(target.files)
-
-  // Validate total count
-  if (selectedFiles.value.length + newFiles.length > MAX_FILES) {
-    errors.value.files = `Maximum ${MAX_FILES} files allowed`
-    return
-  }
-
-  // Validate each file
-  for (const file of newFiles) {
-    // Check file size
-    if (file.size > MAX_FILE_SIZE) {
-      errors.value.files = `File "${file.name}" exceeds 10MB limit`
-      return
-    }
-
-    // Check file extension
-    const ext = '.' + file.name.split('.').pop()?.toLowerCase()
-    if (!ALLOWED_EXTENSIONS.includes(ext)) {
-      errors.value.files = `File "${file.name}" has invalid type. Allowed: PDF, DOCX, PPTX, XLSX, PNG, JPG`
-      return
-    }
-  }
-
-  // Add files
-  selectedFiles.value.push(...newFiles)
-  errors.value.files = ''
-
-  // Reset input
-  if (fileInput.value) {
-    fileInput.value.value = ''
-  }
-}
-
-const removeFile = (index: number) => {
-  selectedFiles.value.splice(index, 1)
-  errors.value.files = ''
-}
-
-const formatFileSize = (bytes: number): string => {
-  if (bytes === 0) return '0 Bytes'
-  const k = 1024
-  const sizes = ['Bytes', 'KB', 'MB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i]
-}
-
-// Upload attachments after booking creation
-const uploadAttachments = async (bookingId: number) => {
-  if (selectedFiles.value.length === 0) return
-
-  const uploadPromises = selectedFiles.value.map(file =>
-    attachmentsApi.upload(bookingId, file)
-  )
-
-  try {
-    await Promise.all(uploadPromises)
-  } catch (err) {
-    console.error('Failed to upload some attachments:', err)
-    // Don't fail the booking creation - just log the error
-  }
-}
-
 // Submit handler
 const handleSubmit = async () => {
   apiError.value = ''
@@ -797,48 +389,23 @@ const handleSubmit = async () => {
   submitting.value = true
 
   try {
-    if (isRecurring.value) {
-      // Create recurring booking
-      const start = new Date(`2000-01-01T${formData.value.start_time}`)
-      const end = new Date(`2000-01-01T${formData.value.end_time}`)
-      const durationMinutes = Math.floor((end.getTime() - start.getTime()) / 60000)
-
-      const result = await bookingsApi.createRecurring({
-        space_id: formData.value.space_id!,
-        start_time: formData.value.start_time,
-        duration_minutes: durationMinutes,
-        title: formData.value.title.trim(),
-        description: formData.value.description.trim() || undefined,
-        recurrence_days: selectedDays.value,
-        start_date: recurringStartDate.value,
-        end_date: recurringEndDate.value,
-        skip_conflicts: skipConflicts.value
-      })
-
-      // Show result
-      showRecurringResult(result)
-    } else {
-      // Regular booking creation
-      const payload: BookingCreate = {
-        space_id: formData.value.space_id!,
-        start_datetime: constructDatetime(formData.value.date, formData.value.start_time),
-        end_datetime: constructDatetime(formData.value.date, formData.value.end_time),
-        title: formData.value.title.trim(),
-        description: formData.value.description.trim() || undefined
-      }
-
-      const booking = await bookingsApi.create(payload)
-
-      // Upload attachments if any
-      await uploadAttachments(booking.id)
-
-      successMessage.value = 'Booking created successfully!'
-
-      // Emit success event
-      setTimeout(() => {
-        emit('submit', booking.id)
-      }, 1000)
+    // Create booking
+    const payload: BookingCreate = {
+      space_id: formData.value.space_id!,
+      start_datetime: constructDateTime(formData.value.start_date, formData.value.start_time),
+      end_datetime: constructDateTime(formData.value.end_date, formData.value.end_time),
+      title: formData.value.title.trim(),
+      description: formData.value.description.trim() || undefined
     }
+
+    const booking = await bookingsApi.create(payload)
+
+    successMessage.value = 'Rezervare creată cu succes!'
+
+    // Emit success event
+    setTimeout(() => {
+      emit('submit', booking.id)
+    }, 1000)
   } catch (err) {
     apiError.value = handleApiError(err)
   } finally {
@@ -846,52 +413,24 @@ const handleSubmit = async () => {
   }
 }
 
-// Show recurring booking result
-const showRecurringResult = (result: RecurringBookingResult) => {
-  let message = `Created ${result.total_created} of ${result.total_requested} bookings.`
-
-  if (result.total_skipped > 0) {
-    message += `\n\nSkipped ${result.total_skipped} dates due to conflicts:`
-    result.skipped_dates.slice(0, 5).forEach((skip) => {
-      const formattedDate = formatDateUtil(skip.date, userTimezone.value)
-      message += `\n- ${formattedDate}: ${skip.reason}`
-    })
-    if (result.total_skipped > 5) {
-      message += `\n... and ${result.total_skipped - 5} more`
-    }
-  }
-
-  successMessage.value = message
-
-  // Emit success event after delay
-  setTimeout(() => {
-    emit('submit', result.created_bookings[0]?.id || 0)
-  }, 3000)
-}
-
 // Cancel handler
 const handleCancel = () => {
   emit('cancel')
 }
 
-// Load spaces and templates on mount
+// Load spaces on mount
 onMounted(() => {
   loadSpaces()
-  loadTemplates()
 })
 </script>
 
 <style scoped>
 .booking-form {
-  background: white;
-  border-radius: 8px;
-  padding: 24px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  max-width: 600px;
+  /* No extra styling - will inherit from parent modal */
 }
 
 .form-group {
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 }
 
 .form-label {
@@ -902,13 +441,33 @@ onMounted(() => {
   font-size: 14px;
 }
 
+.form-sublabel {
+  display: block;
+  margin-bottom: 4px;
+  font-weight: 400;
+  color: #6b7280;
+  font-size: 12px;
+}
+
+.datetime-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.datetime-field {
+  display: flex;
+  flex-direction: column;
+}
+
 .form-input,
 .form-textarea {
   width: 100%;
-  padding: 10px 12px;
+  padding: 8px 12px;
   border: 1px solid #d1d5db;
-  border-radius: 6px;
+  border-radius: 4px;
   font-size: 14px;
+  font-family: inherit;
   transition: border-color 0.2s;
 }
 
@@ -930,7 +489,6 @@ onMounted(() => {
 
 .form-textarea {
   resize: vertical;
-  min-height: 80px;
 }
 
 .form-error {
@@ -940,17 +498,11 @@ onMounted(() => {
   font-size: 13px;
 }
 
-.form-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-}
-
 .api-error {
   padding: 12px;
   background: #fee2e2;
   color: #991b1b;
-  border-radius: 6px;
+  border-radius: 4px;
   margin-bottom: 16px;
   font-size: 14px;
 }
@@ -959,7 +511,7 @@ onMounted(() => {
   padding: 12px;
   background: #d1fae5;
   color: #065f46;
-  border-radius: 6px;
+  border-radius: 4px;
   margin-bottom: 16px;
   font-size: 14px;
 }
@@ -968,21 +520,20 @@ onMounted(() => {
   display: flex;
   gap: 12px;
   justify-content: flex-end;
-  margin-top: 24px;
 }
 
 .btn {
   padding: 10px 20px;
-  border-radius: 6px;
+  border: none;
+  border-radius: 4px;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s;
-  border: none;
 }
 
 .btn:disabled {
-  opacity: 0.6;
+  opacity: 0.5;
   cursor: not-allowed;
 }
 
@@ -996,33 +547,34 @@ onMounted(() => {
 }
 
 .btn-secondary {
-  background: #f3f4f6;
-  color: #374151;
+  background: #6b7280;
+  color: white;
 }
 
 .btn-secondary:hover:not(:disabled) {
-  background: #e5e7eb;
+  background: #4b5563;
 }
 
 .warning-banner {
   background: #fff3cd;
   border: 1px solid #ffc107;
-  border-radius: 6px;
+  border-radius: 4px;
   padding: 12px;
-  margin: 16px 0;
+  margin-bottom: 16px;
   display: flex;
   gap: 12px;
   align-items: flex-start;
+  font-size: 14px;
 }
 
 .warning-icon {
-  font-size: 24px;
+  font-size: 20px;
   flex-shrink: 0;
 }
 
 .conflicts-list {
   margin-top: 8px;
-  font-size: 14px;
+  font-size: 13px;
 }
 
 .conflicts-list p {
@@ -1039,236 +591,8 @@ onMounted(() => {
   margin: 2px 0;
 }
 
-.template-selector {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.template-selector select {
-  flex: 1;
-}
-
-.btn-outline {
-  background: white;
-  color: #3b82f6;
-  border: 1px solid #3b82f6;
-}
-
-.btn-outline:hover:not(:disabled) {
-  background: #eff6ff;
-}
-
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.modal-content {
-  background: white;
-  border-radius: 8px;
-  padding: 24px;
-  max-width: 400px;
-  width: 90%;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-}
-
-.modal-content h3 {
-  margin: 0 0 16px 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #111827;
-}
-
-.modal-actions {
-  display: flex;
-  gap: 12px;
-  justify-content: flex-end;
-  margin-top: 20px;
-}
-
-.file-upload-area {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.file-input-hidden {
-  display: none;
-}
-
-.file-upload-button {
-  padding: 10px 20px;
-  background: white;
-  color: #3b82f6;
-  border: 1px solid #3b82f6;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.file-upload-button:hover {
-  background: #eff6ff;
-}
-
-.file-upload-hint {
-  font-size: 13px;
-  color: #6b7280;
-}
-
-.file-list {
-  list-style: none;
-  padding: 0;
-  margin: 12px 0 0 0;
-  width: 100%;
-}
-
-.file-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  background: #f3f4f6;
-  border-radius: 6px;
-  margin-bottom: 8px;
-  gap: 12px;
-}
-
-.file-name {
-  flex: 1;
-  font-size: 14px;
-  color: #374151;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.file-size {
-  font-size: 13px;
-  color: #6b7280;
-  flex-shrink: 0;
-}
-
-.btn-remove-file {
-  padding: 4px 12px;
-  background: white;
-  color: #ef4444;
-  border: 1px solid #ef4444;
-  border-radius: 4px;
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.2s;
-  flex-shrink: 0;
-}
-
-.btn-remove-file:hover {
-  background: #fef2f2;
-}
-
-.recurring-section {
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 16px;
-  background: #f9fafb;
-}
-
-.checkbox-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.checkbox-label input[type='checkbox'] {
-  cursor: pointer;
-  width: 18px;
-  height: 18px;
-}
-
-.recurring-options {
-  margin-top: 16px;
-  padding-top: 16px;
-  border-top: 1px solid #e5e7eb;
-}
-
-.day-selector {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.day-checkbox {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 12px;
-  border: 2px solid #d1d5db;
-  border-radius: 6px;
-  background: white;
-  cursor: pointer;
-  transition: all 0.2s;
-  font-size: 14px;
-  font-weight: 500;
-  min-width: 50px;
-}
-
-.day-checkbox input[type='checkbox'] {
-  display: none;
-}
-
-.day-checkbox:hover {
-  border-color: #3b82f6;
-  background: #eff6ff;
-}
-
-.day-checkbox.active {
-  border-color: #3b82f6;
-  background: #3b82f6;
-  color: white;
-}
-
-.occurrence-preview {
-  margin-top: 12px;
-  padding: 12px;
-  background: #dbeafe;
-  border-radius: 6px;
-  font-size: 14px;
-}
-
-.occurrence-preview p {
-  margin: 4px 0;
-}
-
-.occurrence-preview strong {
-  color: #1e40af;
-}
-
-.max-notice {
-  color: #dc2626;
-  font-weight: 500;
-  margin-left: 8px;
-}
-
-.first-dates {
-  color: #374151;
-  font-size: 13px;
-}
-
 @media (max-width: 640px) {
-  .form-row {
+  .datetime-row {
     grid-template-columns: 1fr;
   }
 
@@ -1279,30 +603,5 @@ onMounted(() => {
   .btn {
     width: 100%;
   }
-
-  .template-selector {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .template-selector select,
-  .template-selector button {
-    width: 100%;
-  }
-}
-
-.timezone-notice {
-  background-color: #e3f2fd;
-  border: 1px solid #90caf9;
-  border-radius: 4px;
-  padding: 0.75rem;
-  margin-bottom: 1rem;
-  color: #1565c0;
-  font-size: 0.9rem;
-  text-align: center;
-}
-
-.timezone-notice strong {
-  font-weight: 600;
 }
 </style>
diff --git a/frontend/src/components/SpaceCalendar.vue b/frontend/src/components/SpaceCalendar.vue
index 5976d27..7bd4731 100644
--- a/frontend/src/components/SpaceCalendar.vue
+++ b/frontend/src/components/SpaceCalendar.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import FullCalendar from '@fullcalendar/vue3'
 import dayGridPlugin from '@fullcalendar/daygrid'
 import timeGridPlugin from '@fullcalendar/timegrid'
@@ -251,6 +251,7 @@ const calendarOptions = computed<CalendarOptions>(() => ({
     right: 'dayGridMonth,timeGridWeek,timeGridDay'
   },
   timeZone: userTimezone.value,
+  firstDay: 1, // Start week on Monday (0=Sunday, 1=Monday)
   events: events.value,
   datesSet: handleDatesSet,
   editable: isEditable.value, // Enable drag/resize for admins
@@ -301,6 +302,12 @@ const refresh = () => {
   }
 }
 
+// Initialize calendar on mount
+onMounted(() => {
+  // Load initial bookings for current month
+  refresh()
+})
+
 defineExpose({ refresh })
 </script>
 
diff --git a/frontend/src/views/Admin.vue b/frontend/src/views/Admin.vue
index 3dd9342..2669fe3 100644
--- a/frontend/src/views/Admin.vue
+++ b/frontend/src/views/Admin.vue
@@ -1,69 +1,10 @@
 <template>
   <div class="admin">
-    <h2>Admin Dashboard - Space Management</h2>
-
-    <!-- Create/Edit Form -->
-    <div class="card">
-      <h3>{{ editingSpace ? 'Edit Space' : 'Create New Space' }}</h3>
-      <form @submit.prevent="handleSubmit" class="space-form">
-        <div class="form-group">
-          <label for="name">Name *</label>
-          <input
-            id="name"
-            v-model="formData.name"
-            type="text"
-            required
-            placeholder="Conference Room A"
-          />
-        </div>
-
-        <div class="form-group">
-          <label for="type">Type *</label>
-          <select id="type" v-model="formData.type" required>
-            <option value="sala">Sala</option>
-            <option value="birou">Birou</option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label for="capacity">Capacity *</label>
-          <input
-            id="capacity"
-            v-model.number="formData.capacity"
-            type="number"
-            required
-            min="1"
-            placeholder="10"
-          />
-        </div>
-
-        <div class="form-group">
-          <label for="description">Description</label>
-          <textarea
-            id="description"
-            v-model="formData.description"
-            rows="3"
-            placeholder="Optional description..."
-          ></textarea>
-        </div>
-
-        <div class="form-actions">
-          <button type="submit" class="btn btn-primary" :disabled="loading">
-            {{ editingSpace ? 'Update' : 'Create' }}
-          </button>
-          <button
-            v-if="editingSpace"
-            type="button"
-            class="btn btn-secondary"
-            @click="cancelEdit"
-          >
-            Cancel
-          </button>
-        </div>
-      </form>
-
-      <div v-if="error" class="error">{{ error }}</div>
-      <div v-if="success" class="success">{{ success }}</div>
+    <div class="page-header">
+      <h2>Admin Dashboard - Space Management</h2>
+      <button class="btn btn-primary" @click="openCreateModal">
+        Create New Space
+      </button>
     </div>
 
     <!-- Spaces List -->
@@ -113,6 +54,125 @@
         </tbody>
       </table>
     </div>
+
+    <!-- Create/Edit Space Modal -->
+    <div v-if="showModal" class="modal" @click.self="closeModal">
+      <div class="modal-content">
+        <h3>{{ editingSpace ? 'Edit Space' : 'Create New Space' }}</h3>
+        <form @submit.prevent="handleSubmit" class="space-form">
+          <div class="form-group">
+            <label for="name">Name *</label>
+            <input
+              id="name"
+              v-model="formData.name"
+              type="text"
+              required
+              placeholder="Conference Room A"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="type">Type *</label>
+            <select id="type" v-model="formData.type" required>
+              <option value="sala">Sala</option>
+              <option value="birou">Birou</option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="capacity">Capacity *</label>
+            <input
+              id="capacity"
+              v-model.number="formData.capacity"
+              type="number"
+              required
+              min="1"
+              placeholder="10"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="description">Description</label>
+            <textarea
+              id="description"
+              v-model="formData.description"
+              rows="3"
+              placeholder="Optional description..."
+            ></textarea>
+          </div>
+
+          <!-- Per-Space Scheduling Settings -->
+          <div class="form-section-header">
+            <h4>Per-Space Scheduling Settings</h4>
+            <p class="help-text">Leave blank to use global defaults</p>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label for="working_hours_start">Working Hours Start (hour)</label>
+              <input
+                id="working_hours_start"
+                v-model.number="formData.working_hours_start"
+                type="number"
+                min="0"
+                max="23"
+                placeholder="e.g., 8 (leave blank for global)"
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="working_hours_end">Working Hours End (hour)</label>
+              <input
+                id="working_hours_end"
+                v-model.number="formData.working_hours_end"
+                type="number"
+                min="0"
+                max="23"
+                placeholder="e.g., 20 (leave blank for global)"
+              />
+            </div>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label for="min_duration_minutes">Min Duration (minutes)</label>
+              <input
+                id="min_duration_minutes"
+                v-model.number="formData.min_duration_minutes"
+                type="number"
+                min="15"
+                step="15"
+                placeholder="e.g., 30 (leave blank for global)"
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="max_duration_minutes">Max Duration (minutes)</label>
+              <input
+                id="max_duration_minutes"
+                v-model.number="formData.max_duration_minutes"
+                type="number"
+                min="15"
+                step="15"
+                placeholder="e.g., 480 (leave blank for global)"
+              />
+            </div>
+          </div>
+
+          <div v-if="error" class="error">{{ error }}</div>
+          <div v-if="success" class="success">{{ success }}</div>
+
+          <div class="form-actions">
+            <button type="submit" class="btn btn-primary" :disabled="loading">
+              {{ editingSpace ? 'Update' : 'Create' }}
+            </button>
+            <button type="button" class="btn btn-secondary" @click="closeModal">
+              Cancel
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -127,12 +187,17 @@ const loading = ref(false)
 const error = ref('')
 const success = ref('')
 const editingSpace = ref<Space | null>(null)
+const showModal = ref(false)
 
 const formData = ref({
   name: '',
   type: 'sala',
   capacity: 1,
-  description: ''
+  description: '',
+  working_hours_start: null as number | null,
+  working_hours_end: null as number | null,
+  min_duration_minutes: null as number | null,
+  max_duration_minutes: null as number | null
 })
 
 const loadSpaces = async () => {
@@ -161,8 +226,8 @@ const handleSubmit = async () => {
       success.value = 'Space created successfully!'
     }
 
-    resetForm()
     await loadSpaces()
+    closeModal()
 
     // Clear success message after 3 seconds
     setTimeout(() => {
@@ -175,18 +240,28 @@ const handleSubmit = async () => {
   }
 }
 
+const openCreateModal = () => {
+  resetForm()
+  showModal.value = true
+}
+
 const startEdit = (space: Space) => {
   editingSpace.value = space
   formData.value = {
     name: space.name,
     type: space.type,
     capacity: space.capacity,
-    description: space.description || ''
+    description: space.description || '',
+    working_hours_start: space.working_hours_start ?? null,
+    working_hours_end: space.working_hours_end ?? null,
+    min_duration_minutes: space.min_duration_minutes ?? null,
+    max_duration_minutes: space.max_duration_minutes ?? null
   }
-  window.scrollTo({ top: 0, behavior: 'smooth' })
+  showModal.value = true
 }
 
-const cancelEdit = () => {
+const closeModal = () => {
+  showModal.value = false
   resetForm()
 }
 
@@ -196,7 +271,11 @@ const resetForm = () => {
     name: '',
     type: 'sala',
     capacity: 1,
-    description: ''
+    description: '',
+    working_hours_start: null,
+    working_hours_end: null,
+    min_duration_minutes: null,
+    max_duration_minutes: null
   }
 }
 
@@ -245,6 +324,38 @@ onMounted(() => {
   gap: 16px;
 }
 
+.form-section-header {
+  margin-top: 16px;
+  margin-bottom: 8px;
+  padding-top: 16px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.form-section-header h4 {
+  margin: 0 0 4px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.help-text {
+  margin: 0;
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+@media (max-width: 640px) {
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+}
+
 .form-group {
   display: flex;
   flex-direction: column;
@@ -254,6 +365,7 @@ onMounted(() => {
 .form-group label {
   font-weight: 500;
   color: #374151;
+  font-size: 14px;
 }
 
 .form-group input,
@@ -408,4 +520,46 @@ onMounted(() => {
   display: flex;
   gap: 8px;
 }
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.page-header h2 {
+  margin: 0;
+}
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 8px;
+  padding: 24px;
+  max-width: 600px;
+  width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.modal-content h3 {
+  margin-top: 0;
+  margin-bottom: 20px;
+}
 </style>
diff --git a/frontend/src/views/MyBookings.vue b/frontend/src/views/MyBookings.vue
index 00e2bad..6f47dff 100644
--- a/frontend/src/views/MyBookings.vue
+++ b/frontend/src/views/MyBookings.vue
@@ -124,56 +124,99 @@
     <!-- Edit Modal -->
     <div v-if="showEditModal" class="modal-overlay" @click.self="closeEditModal">
       <div class="modal-content">
-        <h3>Edit Booking</h3>
+        <h3>Editare rezervare</h3>
         <form @submit.prevent="saveEdit">
+          <!-- Space (read-only) -->
           <div class="form-group">
-            <label for="edit-title">Title *</label>
+            <label for="edit-space" class="form-label">Spațiu</label>
+            <input
+              id="edit-space"
+              type="text"
+              :value="editingBooking?.space?.name || 'Unknown Space'"
+              class="form-input"
+              readonly
+              disabled
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="edit-title">Titlu *</label>
             <input
               id="edit-title"
               v-model="editForm.title"
               type="text"
               required
               maxlength="200"
-              placeholder="Meeting title"
+              placeholder="Titlu rezervare"
             />
           </div>
 
           <div class="form-group">
-            <label for="edit-description">Description</label>
+            <label for="edit-description">Descriere (opțional)</label>
             <textarea
               id="edit-description"
               v-model="editForm.description"
               rows="3"
-              placeholder="Optional description"
+              placeholder="Detalii suplimentare..."
             />
           </div>
 
+          <!-- Start Date & Time -->
           <div class="form-group">
-            <label for="edit-start">Start Date/Time *</label>
-            <input
-              id="edit-start"
-              v-model="editForm.start_datetime"
-              type="datetime-local"
-              required
-            />
+            <label class="form-label">Început *</label>
+            <div class="datetime-row">
+              <div class="datetime-field">
+                <label for="edit-start-date" class="form-sublabel">Data</label>
+                <input
+                  id="edit-start-date"
+                  v-model="editForm.start_date"
+                  type="date"
+                  required
+                />
+              </div>
+              <div class="datetime-field">
+                <label for="edit-start-time" class="form-sublabel">Ora</label>
+                <input
+                  id="edit-start-time"
+                  v-model="editForm.start_time"
+                  type="time"
+                  required
+                />
+              </div>
+            </div>
           </div>
 
+          <!-- End Date & Time -->
           <div class="form-group">
-            <label for="edit-end">End Date/Time *</label>
-            <input
-              id="edit-end"
-              v-model="editForm.end_datetime"
-              type="datetime-local"
-              required
-            />
+            <label class="form-label">Sfârșit *</label>
+            <div class="datetime-row">
+              <div class="datetime-field">
+                <label for="edit-end-date" class="form-sublabel">Data</label>
+                <input
+                  id="edit-end-date"
+                  v-model="editForm.end_date"
+                  type="date"
+                  required
+                />
+              </div>
+              <div class="datetime-field">
+                <label for="edit-end-time" class="form-sublabel">Ora</label>
+                <input
+                  id="edit-end-time"
+                  v-model="editForm.end_time"
+                  type="time"
+                  required
+                />
+              </div>
+            </div>
           </div>
 
           <div v-if="editError" class="error-message">{{ editError }}</div>
 
           <div class="form-actions">
-            <button type="button" class="btn btn-secondary" @click="closeEditModal">Cancel</button>
+            <button type="button" class="btn btn-secondary" @click="closeEditModal">Anulează</button>
             <button type="submit" class="btn btn-primary" :disabled="saving">
-              {{ saving ? 'Saving...' : 'Save Changes' }}
+              {{ saving ? 'Se salvează...' : 'Salvează modificările' }}
             </button>
           </div>
         </form>
@@ -209,8 +252,10 @@ const editingBooking = ref<Booking | null>(null)
 const editForm = ref({
   title: '',
   description: '',
-  start_datetime: '',
-  end_datetime: ''
+  start_date: '',
+  start_time: '',
+  end_date: '',
+  end_time: ''
 })
 const editError = ref('')
 const saving = ref(false)
@@ -251,12 +296,22 @@ const formatStatus = (status: string): string => {
 
 const openEditModal = (booking: Booking) => {
   editingBooking.value = booking
-  // Convert ISO datetime to datetime-local format in user's timezone
+
+  // Extract date and time from ISO datetime
+  const startLocal = isoToLocalDateTime(booking.start_datetime, userTimezone.value)
+  const endLocal = isoToLocalDateTime(booking.end_datetime, userTimezone.value)
+
+  // Split YYYY-MM-DDTHH:mm into date and time parts
+  const [startDate, startTime] = startLocal.split('T')
+  const [endDate, endTime] = endLocal.split('T')
+
   editForm.value = {
     title: booking.title,
     description: booking.description || '',
-    start_datetime: isoToLocalDateTime(booking.start_datetime, userTimezone.value),
-    end_datetime: isoToLocalDateTime(booking.end_datetime, userTimezone.value)
+    start_date: startDate,
+    start_time: startTime,
+    end_date: endDate,
+    end_time: endTime
   }
   editError.value = ''
   showEditModal.value = true
@@ -275,12 +330,15 @@ const saveEdit = async () => {
   editError.value = ''
 
   try {
-    // Convert datetime-local format to ISO without Z (backend will handle timezone conversion)
+    // Combine date and time, then convert to ISO
+    const startDateTime = `${editForm.value.start_date}T${editForm.value.start_time}`
+    const endDateTime = `${editForm.value.end_date}T${editForm.value.end_time}`
+
     const updateData = {
       title: editForm.value.title,
       description: editForm.value.description,
-      start_datetime: localDateTimeToISO(editForm.value.start_datetime),
-      end_datetime: localDateTimeToISO(editForm.value.end_datetime)
+      start_datetime: localDateTimeToISO(startDateTime),
+      end_datetime: localDateTimeToISO(endDateTime)
     }
 
     await bookingsApi.update(editingBooking.value.id, updateData)
@@ -558,6 +616,33 @@ onMounted(() => {
   color: #374151;
 }
 
+.form-label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: #374151;
+  font-size: 14px;
+}
+
+.form-sublabel {
+  display: block;
+  margin-bottom: 4px;
+  font-weight: 400;
+  color: #6b7280;
+  font-size: 12px;
+}
+
+.datetime-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.datetime-field {
+  display: flex;
+  flex-direction: column;
+}
+
 .form-group input,
 .form-group textarea {
   width: 100%;
diff --git a/frontend/src/views/SpaceDetail.vue b/frontend/src/views/SpaceDetail.vue
index 5a31f7c..a134015 100644
--- a/frontend/src/views/SpaceDetail.vue
+++ b/frontend/src/views/SpaceDetail.vue
@@ -61,7 +61,7 @@
               d="M12 6v6m0 0v6m0-6h6m-6 0H6"
             />
           </svg>
-          Reserve Space
+          {{ showBookingForm ? 'Cancel Reservation' : 'Reserve Space' }}
         </button>
       </div>
 
@@ -75,7 +75,19 @@
       <div class="card calendar-card">
         <h3>Availability Calendar</h3>
         <p class="calendar-subtitle">View existing bookings and available time slots</p>
-        <SpaceCalendar :space-id="space.id" />
+        <SpaceCalendar ref="calendarRef" :space-id="space.id" />
+      </div>
+    </div>
+
+    <!-- Booking Modal -->
+    <div v-if="showBookingForm && space" class="modal" @click.self="closeBookingModal">
+      <div class="modal-content">
+        <h3>Create Booking</h3>
+        <BookingForm
+          :space-id="space.id"
+          @submit="handleBookingSubmit"
+          @cancel="closeBookingModal"
+        />
       </div>
     </div>
   </div>
@@ -83,17 +95,19 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { spacesApi, handleApiError } from '@/services/api'
 import SpaceCalendar from '@/components/SpaceCalendar.vue'
+import BookingForm from '@/components/BookingForm.vue'
 import type { Space } from '@/types'
 
 const route = useRoute()
-const router = useRouter()
 
 const space = ref<Space | null>(null)
 const loading = ref(true)
 const error = ref('')
+const showBookingForm = ref(false)
+const calendarRef = ref<InstanceType<typeof SpaceCalendar> | null>(null)
 
 // Format space type for display
 const formatType = (type: string): string => {
@@ -136,12 +150,18 @@ const loadSpace = async () => {
 
 // Handle reserve button click
 const handleReserve = () => {
-  // Placeholder for US-004d: Redirect to booking creation page
-  // For now, navigate to a placeholder route
-  router.push({
-    path: '/booking/new',
-    query: { space: space.value?.id }
-  })
+  showBookingForm.value = !showBookingForm.value
+}
+
+// Close booking modal
+const closeBookingModal = () => {
+  showBookingForm.value = false
+}
+
+// Handle booking form submit
+const handleBookingSubmit = () => {
+  showBookingForm.value = false
+  calendarRef.value?.refresh()
 }
 
 onMounted(() => {
@@ -364,6 +384,11 @@ onMounted(() => {
   line-height: 1.6;
 }
 
+/* Booking Card */
+.booking-card h3 {
+  margin-bottom: 16px;
+}
+
 /* Calendar Card */
 .calendar-subtitle {
   color: #6b7280;
@@ -371,6 +396,36 @@ onMounted(() => {
   margin-bottom: 20px;
 }
 
+/* Modal */
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 8px;
+  padding: 24px;
+  max-width: 600px;
+  width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.modal-content h3 {
+  margin-top: 0;
+  margin-bottom: 20px;
+}
+
 /* Responsive */
 @media (max-width: 768px) {
   .space-header {
diff --git a/frontend/src/views/Users.vue b/frontend/src/views/Users.vue
index 58dfb73..34cf233 100644
--- a/frontend/src/views/Users.vue
+++ b/frontend/src/views/Users.vue
@@ -1,81 +1,10 @@
 <template>
   <div class="users">
-    <h2>Admin Dashboard - User Management</h2>
-
-    <!-- Create/Edit Form -->
-    <div class="card">
-      <h3>{{ editingUser ? 'Edit User' : 'Create New User' }}</h3>
-      <form @submit.prevent="handleSubmit" class="user-form">
-        <div class="form-group">
-          <label for="email">Email *</label>
-          <input
-            id="email"
-            v-model="formData.email"
-            type="email"
-            required
-            placeholder="user@example.com"
-            :disabled="!!editingUser"
-          />
-        </div>
-
-        <div class="form-group">
-          <label for="full_name">Full Name *</label>
-          <input
-            id="full_name"
-            v-model="formData.full_name"
-            type="text"
-            required
-            placeholder="John Doe"
-          />
-        </div>
-
-        <div class="form-group" v-if="!editingUser">
-          <label for="password">Password *</label>
-          <input
-            id="password"
-            v-model="formData.password"
-            type="password"
-            :required="!editingUser"
-            placeholder="Minimum 8 characters"
-            minlength="8"
-          />
-        </div>
-
-        <div class="form-group">
-          <label for="role">Role *</label>
-          <select id="role" v-model="formData.role" required>
-            <option value="user">User</option>
-            <option value="admin">Admin</option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label for="organization">Organization</label>
-          <input
-            id="organization"
-            v-model="formData.organization"
-            type="text"
-            placeholder="Optional organization"
-          />
-        </div>
-
-        <div class="form-actions">
-          <button type="submit" class="btn btn-primary" :disabled="loading">
-            {{ editingUser ? 'Update' : 'Create' }}
-          </button>
-          <button
-            v-if="editingUser"
-            type="button"
-            class="btn btn-secondary"
-            @click="cancelEdit"
-          >
-            Cancel
-          </button>
-        </div>
-      </form>
-
-      <div v-if="error" class="error">{{ error }}</div>
-      <div v-if="success" class="success">{{ success }}</div>
+    <div class="page-header">
+      <h2>Admin Dashboard - User Management</h2>
+      <button class="btn btn-primary" @click="openCreateModal">
+        Create New User
+      </button>
     </div>
 
     <!-- Filters -->
@@ -165,6 +94,79 @@
       </table>
     </div>
 
+    <!-- Create/Edit User Modal -->
+    <div v-if="showFormModal" class="modal" @click.self="closeFormModal">
+      <div class="modal-content">
+        <h3>{{ editingUser ? 'Edit User' : 'Create New User' }}</h3>
+        <form @submit.prevent="handleSubmit" class="user-form">
+          <div class="form-group">
+            <label for="email">Email *</label>
+            <input
+              id="email"
+              v-model="formData.email"
+              type="email"
+              required
+              placeholder="user@example.com"
+              :disabled="!!editingUser"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="full_name">Full Name *</label>
+            <input
+              id="full_name"
+              v-model="formData.full_name"
+              type="text"
+              required
+              placeholder="John Doe"
+            />
+          </div>
+
+          <div class="form-group" v-if="!editingUser">
+            <label for="password">Password *</label>
+            <input
+              id="password"
+              v-model="formData.password"
+              type="password"
+              :required="!editingUser"
+              placeholder="Minimum 8 characters"
+              minlength="8"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="role">Role *</label>
+            <select id="role" v-model="formData.role" required>
+              <option value="user">User</option>
+              <option value="admin">Admin</option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="organization">Organization</label>
+            <input
+              id="organization"
+              v-model="formData.organization"
+              type="text"
+              placeholder="Optional organization"
+            />
+          </div>
+
+          <div v-if="error" class="error">{{ error }}</div>
+          <div v-if="success" class="success">{{ success }}</div>
+
+          <div class="form-actions">
+            <button type="submit" class="btn btn-primary" :disabled="loading">
+              {{ editingUser ? 'Update' : 'Create' }}
+            </button>
+            <button type="button" class="btn btn-secondary" @click="closeFormModal">
+              Cancel
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
     <!-- Reset Password Modal -->
     <div v-if="resetPasswordUser" class="modal" @click.self="closeResetPassword">
       <div class="modal-content">
@@ -206,6 +208,7 @@ const loading = ref(false)
 const error = ref('')
 const success = ref('')
 const editingUser = ref<User | null>(null)
+const showFormModal = ref(false)
 const resetPasswordUser = ref<User | null>(null)
 const newPassword = ref('')
 const filterRole = ref('')
@@ -259,8 +262,8 @@ const handleSubmit = async () => {
       success.value = 'User created successfully!'
     }
 
-    resetForm()
     await loadUsers()
+    closeFormModal()
 
     // Clear success message after 3 seconds
     setTimeout(() => {
@@ -273,6 +276,11 @@ const handleSubmit = async () => {
   }
 }
 
+const openCreateModal = () => {
+  resetForm()
+  showFormModal.value = true
+}
+
 const startEdit = (user: User) => {
   editingUser.value = user
   formData.value = {
@@ -282,10 +290,11 @@ const startEdit = (user: User) => {
     role: user.role,
     organization: user.organization || ''
   }
-  window.scrollTo({ top: 0, behavior: 'smooth' })
+  showFormModal.value = true
 }
 
-const cancelEdit = () => {
+const closeFormModal = () => {
+  showFormModal.value = false
   resetForm()
 }
 
@@ -363,6 +372,19 @@ onMounted(() => {
   margin: 0 auto;
 }
 
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.page-header h2 {
+  margin: 0;
+}
+
 .card {
   background: white;
   border-radius: 8px;