diff --git a/package.json b/package.json
index 7c40954..8dd6bc8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "collabender",
-  "version": "0.7.6",
+  "version": "0.8.2",
   "description": "App with Routing built-in (recommended)",
   "engines": {
     "node": ">=20.0.0"
diff --git a/src/components/appointment-modal/add-appointment-modal.tsx b/src/components/appointment-modal/add-appointment-modal.tsx
index 953bbcb..25dccce 100644
--- a/src/components/appointment-modal/add-appointment-modal.tsx
+++ b/src/components/appointment-modal/add-appointment-modal.tsx
@@ -1,24 +1,59 @@
-import { $, type Signal, component$, useOn } from '@builder.io/qwik'
+import {
+  $,
+  type Signal,
+  component$,
+  useOn,
+  useSignal,
+  useVisibleTask$,
+} from '@builder.io/qwik'
 import { Form } from '@builder.io/qwik-city'
 import { APP_CATEGORIES } from '~/config'
 import { useAddAppointment } from '~/global'
 
+export function getDayFromUrl() {
+  const url = new URL(window.location.href)
+  const day = url.searchParams.get('day')
+
+  return day ? day : new Date().toISOString().split('T')[0]
+}
+
 export const AddAppointmentModal = component$(
   ({
     isAddAppointmentModalOpen,
-
   }: {
     isAddAppointmentModalOpen: Signal<boolean>
-
   }) => {
     const action = useAddAppointment()
-    // Default date for the date input comes form ?day on the url or today
-    const url = new URL(window.location.href)
-    const day = url.searchParams.get('day')
+    const defaultOptionForDate = useSignal<string>()
+
+    // eslint-disable-next-line qwik/no-use-visible-task
+    useVisibleTask$(() => {
+      defaultOptionForDate.value = getDayFromUrl()
+    })
+
+    const fullDayRef = useSignal<HTMLInputElement>()
+    // eslint-disable-next-line qwik/no-use-visible-task
+    useVisibleTask$(({ track }) => {
+      track(() =>
+        fullDayRef.value?.addEventListener('change', () => {
+          const timeStart = document.getElementById(
+            'time_start'
+          ) as HTMLInputElement
+          const timeEnd = document.getElementById(
+            'time_end'
+          ) as HTMLInputElement
 
-    const defaultOptionForDate = day
-      ? day
-      : new Date().toISOString().split('T')[0]
+          if (fullDayRef.value?.checked) {
+            // make the inputs disabled
+            timeStart.disabled = true
+            timeEnd.disabled = true
+          } else {
+            timeStart.disabled = false
+            timeEnd.disabled = false
+          }
+        })
+      )
+    })
 
     useOn(
       'click',
@@ -64,7 +99,7 @@ export const AddAppointmentModal = component$(
             </label>
             <input
               placeholder="Meeting with John Doe"
-              value={ ''}
+              value={''}
               required
               name="title"
               id="title"
@@ -87,7 +122,7 @@ export const AddAppointmentModal = component$(
               id="date"
               type="date"
               class="w-full border border-grayBrandMedium rounded-md px-4 py-2"
-              defaultValue={defaultOptionForDate }
+              defaultValue={defaultOptionForDate.value}
             />
           </div>
 
@@ -101,11 +136,11 @@ export const AddAppointmentModal = component$(
                 Starts at
               </label>
               <input
-                value={'8:00' }
+                value={'8:00'}
                 name="time_start"
                 id="time_start"
                 type="text"
-                class="w-full border border-grayBrandMedium rounded-md px-4 py-2"
+                class="w-full border border-grayBrandMedium rounded-md px-4 py-2 disabled:opacity-85 disabled:cursor-not-allowed disabled:text-grayBrand"
               />
             </div>
             <div class="flex flex-col gap-2 mt-2 md:mt-8 flex-1">
@@ -116,11 +151,11 @@ export const AddAppointmentModal = component$(
                 Ends at
               </label>
               <input
-                 value={'9:00' }
+                value={'9:00'}
                 name="time_end"
                 id="time_end"
                 type="text"
-                class="w-full border border-grayBrandMedium rounded-md px-4 py-2"
+                class="w-full border border-grayBrandMedium rounded-md px-4 py-2 disabled:opacity-85 disabled:cursor-not-allowed disabled:text-grayBrand"
               />
             </div>
           </div>
@@ -131,6 +166,7 @@ export const AddAppointmentModal = component$(
               Is it a full day event?
             </label>
             <input
+              ref={fullDayRef}
               name="full_day"
               id="full_day"
               type="checkbox"
diff --git a/src/components/appointment-modal/edit-appointment-modal.tsx b/src/components/appointment-modal/edit-appointment-modal.tsx
index 54b9ae1..209639b 100644
--- a/src/components/appointment-modal/edit-appointment-modal.tsx
+++ b/src/components/appointment-modal/edit-appointment-modal.tsx
@@ -1,18 +1,56 @@
-import { $, type Signal, component$, useOn } from '@builder.io/qwik'
+import {
+  $,
+  type Signal,
+  component$,
+  useOn,
+  useSignal,
+  useVisibleTask$,
+} from '@builder.io/qwik'
 import { Form } from '@builder.io/qwik-city'
 import { APP_CATEGORIES } from '~/config'
-import { useAddAppointment } from '~/global'
+import { useEditAppointment } from '~/global'
+import { IconManager } from '~/icons/icon-manager'
+import { type IAppointment } from '~/types/types'
 
 export const EditAppointmentModal = component$(
   ({
     isEditAppointmentModalOpen,
     editModalData,
-    
   }: {
     isEditAppointmentModalOpen: Signal<boolean>
-    editModalData: any
+    editModalData: IAppointment
   }) => {
-    const action = useAddAppointment()
+    const action = useEditAppointment()
+    const fullDayRef = useSignal<HTMLInputElement>()
+    // eslint-disable-next-line qwik/no-use-visible-task
+    useVisibleTask$(({ track }) => {
+      const timeStart = document.getElementById(
+        'time_start'
+      ) as HTMLInputElement
+      const timeEnd = document.getElementById('time_end') as HTMLInputElement
+
+      if (fullDayRef.value?.checked) {
+        // make the inputs disabled
+        timeStart.disabled = true
+        timeEnd.disabled = true
+      } else {
+        timeStart.disabled = false
+        timeEnd.disabled = false
+      }
+
+      track(() =>
+        fullDayRef.value?.addEventListener('change', () => {
+          if (fullDayRef.value?.checked) {
+            // make the inputs disabled
+            timeStart.disabled = true
+            timeEnd.disabled = true
+          } else {
+            timeStart.disabled = false
+            timeEnd.disabled = false
+          }
+        })
+      )
+    })
 
     useOn(
       'click',
@@ -32,6 +70,9 @@ export const EditAppointmentModal = component$(
       $(() => {
         isEditAppointmentModalOpen.value = false
         document.body.style.overflow = 'auto'
+        // make a fake push window to the same url we are in
+        // TODO: had to make it reload the page to get the last changes
+        window.location.reload()
       })
     )
 
@@ -81,7 +122,7 @@ export const EditAppointmentModal = component$(
               id="date"
               type="date"
               class="w-full border border-grayBrandMedium rounded-md px-4 py-2"
-              value={editModalData.date }
+              value={editModalData.date}
             />
           </div>
 
@@ -95,11 +136,11 @@ export const EditAppointmentModal = component$(
                 Starts at
               </label>
               <input
-                value={editModalData.start}
+                value={editModalData.time_start}
                 name="time_start"
                 id="time_start"
                 type="text"
-                class="w-full border border-grayBrandMedium rounded-md px-4 py-2"
+                class="w-full border border-grayBrandMedium rounded-md px-4 py-2 disabled:opacity-85 disabled:cursor-not-allowed disabled:text-grayBrand"
               />
             </div>
             <div class="flex flex-col gap-2 mt-2 md:mt-8 flex-1">
@@ -110,11 +151,11 @@ export const EditAppointmentModal = component$(
                 Ends at
               </label>
               <input
-                 value={editModalData.end}
+                value={editModalData.time_end}
                 name="time_end"
                 id="time_end"
                 type="text"
-                class="w-full border border-grayBrandMedium rounded-md px-4 py-2"
+                class="w-full border border-grayBrandMedium rounded-md px-4 py-2 disabled:opacity-85 disabled:cursor-not-allowed disabled:text-grayBrand"
               />
             </div>
           </div>
@@ -125,10 +166,11 @@ export const EditAppointmentModal = component$(
               Is it a full day event?
             </label>
             <input
+              ref={fullDayRef}
               name="full_day"
               id="full_day"
               type="checkbox"
-              checked={editModalData.fullDay}
+              checked={editModalData.full_day === 1}
               class="w-3 h-3 accent-primary"
             />
           </div>
@@ -156,14 +198,22 @@ export const EditAppointmentModal = component$(
             </select>
           </div>
 
+          <input
+            hidden
+            type="number"
+            id="id"
+            name="id"
+            value={editModalData.id}
+          />
+
           <footer class="mt-5">
             <div class="flex justify-between gap-4 items-center">
-                <button
-                class="btn flex justify-center items-center gap-2 bg-grayBrandLight text-black mt-2 md:mt-8"
-
-                >
-
-                Delete Event
+              <button class="btn flex justify-center items-center gap-2 bg-grayBrandLight text-black mt-2 md:mt-8 group">
+                <IconManager
+                  icon="remove"
+                  classCustom="w-6 h-auto text-primary group-hover:text-white group-focus:text-white"
+                />
+                <span>Delete Event</span>
               </button>
               <button
                 class="btn bg-grayBrandLight text-black mt-2 md:mt-8"
diff --git a/src/components/views/list-view.tsx b/src/components/views/list-view.tsx
index ce04707..9f9eeb1 100644
--- a/src/components/views/list-view.tsx
+++ b/src/components/views/list-view.tsx
@@ -8,12 +8,12 @@ export const ListView = component$(
     appointments,
     users,
     isEditAppointmentModalOpen,
-    editModalData
+    editModalData,
   }: {
     appointments: Array<IAppointment>
     users: Array<IUser>
     isEditAppointmentModalOpen: Signal<boolean>
-    editModalData: any
+    editModalData: IAppointment
   }) => {
     const futureAppointments = useComputed$(() => {
       if (appointments.length === 0) return []
diff --git a/src/components/views/task-card.tsx b/src/components/views/task-card.tsx
index b8f7029..28d2173 100644
--- a/src/components/views/task-card.tsx
+++ b/src/components/views/task-card.tsx
@@ -46,16 +46,20 @@ export default component$((props: IProps) => {
         </div>
 
         {props.showEdit ? (
-          <button class="flex justify-end" 
-                  onClick$={$(() =>{props.isEditAppointmentModalOpen.value = true
-                                    props.editModalData.id = props.id
-                                    props.editModalData.title = props.title
-                                    props.editModalData.date = props.date
-                                    props.editModalData.start = props.time_start
-                                    props.editModalData.end = props.time_end
-                                    props.editModalData.fullDay = props.full_day
-                                    props.editModalData.category = props.category
-                  }) }>
+          <button
+            class="flex justify-end"
+            onClick$={$(() => {
+              // TODO: // make this more beautiful
+              props.isEditAppointmentModalOpen.value = true
+              props.editModalData.id = props.id
+              props.editModalData.title = props.title
+              props.editModalData.date = props.date
+              props.editModalData.time_start = props.time_start
+              props.editModalData.time_end = props.time_end
+              props.editModalData.full_day = props.full_day
+              props.editModalData.category = props.category
+            })}
+          >
             <IconManager icon="edit" classCustom="h-12 w-12" />
           </button>
         ) : (
diff --git a/src/db/queries.ts b/src/db/queries.ts
index 865b8b4..7b50594 100644
--- a/src/db/queries.ts
+++ b/src/db/queries.ts
@@ -74,3 +74,13 @@ export async function createAppointment(data: InsertAppointment) {
 export async function deleteAppointment(id: number) {
   await db.delete(appointmentsTable).where(eq(appointmentsTable.id, id))
 }
+
+/**
+ * Update an appointment by its ID
+ */
+export async function updateAppointment(id: number, data: InsertAppointment) {
+  await db
+    .update(appointmentsTable)
+    .set(data)
+    .where(eq(appointmentsTable.id, id))
+}
diff --git a/src/global/index.tsx b/src/global/index.tsx
index b680407..bbabbfc 100644
--- a/src/global/index.tsx
+++ b/src/global/index.tsx
@@ -1,8 +1,7 @@
-import { globalAction$,  } from '@builder.io/qwik-city'
+import { globalAction$ } from '@builder.io/qwik-city'
 import { APP_USERS } from '~/config'
 
-import { db } from '~/db/db'
-import * as schema from '~/db/schema'
+import { createAppointment, updateAppointment } from '~/db/queries'
 import { type IUser } from '~/types/types'
 import { getIdByAuthorName, getListAvailablePasswords } from '~/utils/functions'
 
@@ -49,7 +48,6 @@ export const useSubmitPassword = globalAction$(async (data, { cookie }) => {
 export const useAddAppointment = globalAction$(async (data, { cookie }) => {
   const isFullDay = data['full_day'] === 'on' ? 1 : 0
 
-
   const authorName = cookie.get('collabender-user')?.value
   const authorId = getIdByAuthorName(authorName as string, APP_USERS)
 
@@ -64,9 +62,34 @@ export const useAddAppointment = globalAction$(async (data, { cookie }) => {
     created_by: authorId,
   }
 
-  
-  await db.insert(schema.appointmentsTable).values(appointment)
+  await createAppointment(appointment)
+
+  return {
+    success: true,
+  }
+})
+
+/**
+ * Action to add an appointment
+ */
+export const useEditAppointment = globalAction$(async (data, { cookie }) => {
+  const isFullDay = data['full_day'] === 'on' ? 1 : 0
+
+  const authorName = cookie.get('collabender-user')?.value
+  const authorId = getIdByAuthorName(authorName as string, APP_USERS)
+
+  // TODO: Add validation for the date and time with zod
+  const newAppointment = {
+    title: data['title'] as string,
+    date: data['date'] as string,
+    time_start: data['time_start'] as string,
+    time_end: data['time_end'] as string,
+    full_day: isFullDay,
+    category: data['category'] as string,
+    created_by: authorId,
+  }
 
+  await updateAppointment(data['id'] as number, newAppointment)
   return {
     success: true,
   }
diff --git a/src/icons/icon-manager.tsx b/src/icons/icon-manager.tsx
index c48129c..c78c220 100644
--- a/src/icons/icon-manager.tsx
+++ b/src/icons/icon-manager.tsx
@@ -9,6 +9,7 @@ import {
   IconHistoryFill,
   IconList,
   IconListFill,
+  IconRemove,
   IconUser,
 } from './icons'
 
@@ -51,6 +52,8 @@ export const IconManager = component$<IconManagerProps>(
         return <IconAdd classCustom={classCustom} />
       case 'edit':
         return <IconEdit classCustom={classCustom} />
+      case 'remove':
+        return <IconRemove classCustom={classCustom} />
       case 'history':
         return <IconHistory classCustom={classCustom} />
       case 'history-fill':
diff --git a/src/icons/icons.tsx b/src/icons/icons.tsx
index 4ffba50..47569e5 100644
--- a/src/icons/icons.tsx
+++ b/src/icons/icons.tsx
@@ -436,3 +436,56 @@ export const IconHistoryFill = component$(
     )
   }
 )
+
+export const IconRemove = component$(
+  ({ classCustom }: { classCustom?: string }) => {
+    return (
+      <svg
+        class={classCustom}
+        width="33"
+        height="33"
+        viewBox="0 0 33 33"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <mask
+          id="mask0_1_1448"
+          style="mask-type:alpha"
+          maskUnits="userSpaceOnUse"
+          x="5"
+          y="1"
+          width="23"
+          height="32"
+        >
+          <path
+            d="M26.9996 3.85408C27.5411 3.74514 27.8917 3.21791 27.7827 2.67648C27.6738 2.13504 27.1466 1.78444 26.6051 1.89338L6.725 5.89338C6.18357 6.00232 5.83296 6.52955 5.9419 7.07098C6.05084 7.61242 6.57807 7.96302 7.1195 7.85408L26.9996 3.85408Z"
+            fill="#212121"
+          />
+          <path
+            d="M13.67 14.5696C14.2223 14.5696 14.67 15.0174 14.67 15.5696V25.5006C14.67 26.0529 14.2223 26.5006 13.67 26.5006C13.1178 26.5006 12.67 26.0529 12.67 25.5006V15.5696C12.67 15.0174 13.1178 14.5696 13.67 14.5696Z"
+            fill="#212121"
+          />
+          <path
+            d="M20.6446 15.5696C20.6446 15.0174 20.1969 14.5696 19.6446 14.5696C19.0923 14.5696 18.6446 15.0174 18.6446 15.5696L18.6446 25.5006C18.6446 26.0529 19.0923 26.5006 19.6446 26.5006C20.1969 26.5006 20.6446 26.0529 20.6446 25.5006L20.6446 15.5696Z"
+            fill="#212121"
+          />
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M8.78578 8.52979C7.01969 8.52979 5.63572 10.0478 5.79855 11.8064L7.46083 29.759C7.60371 31.3021 8.89836 32.4824 10.448 32.4824H22.7803C24.3272 32.4824 25.6205 31.3062 25.7669 29.7663L27.4736 11.8137C27.641 10.0526 26.2561 8.52979 24.4871 8.52979H8.78578ZM7.79003 11.622C7.73576 11.0358 8.19708 10.5298 8.78578 10.5298H24.4871C25.0767 10.5298 25.5384 11.0374 25.4826 11.6244L23.7759 29.577C23.7271 30.0903 23.296 30.4824 22.7803 30.4824H10.448C9.93149 30.4824 9.49994 30.089 9.45231 29.5746L7.79003 11.622Z"
+            fill="#212121"
+          />
+        </mask>
+        <g mask="url(#mask0_1_1448)">
+          <rect
+            x="0.599243"
+            y="0.5"
+            width="32"
+            height="32"
+            fill="currentColor"
+          />
+        </g>
+      </svg>
+    )
+  }
+)
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 099048d..1da7e5a 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -23,7 +23,10 @@ import { LoginForm } from '~/components/login-form/login-form'
 import { Footer } from '~/components/footer/footer'
 import { AddAppointmentModal } from '~/components/appointment-modal/add-appointment-modal'
 import { EditAppointmentModal } from '~/components/appointment-modal/edit-appointment-modal'
-import { IS_ADD_APPOINTMENT_MODAL_OPENED, IS_EDIT_APPOINTMENT_MODAL_OPENED } from '~/config'
+import {
+  IS_ADD_APPOINTMENT_MODAL_OPENED,
+  IS_EDIT_APPOINTMENT_MODAL_OPENED,
+} from '~/config'
 
 export const useUsersAndAppointments = routeLoader$(
   async (requestEvent: RequestEventBase) => {
@@ -36,6 +39,7 @@ export const useUsersAndAppointments = routeLoader$(
     const users = await getUsers()
     const appointments = await getAppointments()
 
+    // console.log(appointments)
     // Check if user is authorized and who is the user
     const isAuthorized =
       requestEvent.cookie.get('collabender-rules')?.value === '1'
@@ -59,17 +63,16 @@ export default component$(() => {
 
   const selectedView = useSignal<ViewKeys>(initialView)
   const isAddAppointmentModalOpen = useSignal(IS_ADD_APPOINTMENT_MODAL_OPENED)
-
   const isEditAppointmentModalOpen = useSignal(IS_EDIT_APPOINTMENT_MODAL_OPENED)
 
-  const editModalData = useStore({
-    id: '',
+  const editModalData: IAppointment = useStore({
+    id: -1,
     title: '',
     date: '',
-    start: '',
-    end: '',
-    fullDay: false,
-    category: ''
+    time_start: '',
+    time_end: '',
+    full_day: 0,
+    category: '',
   })
 
   const openAddAppointmentModal = $(() => {
@@ -113,13 +116,24 @@ export default component$(() => {
         </div>
 
         {selectedView.value === VIEWS.CALENDAR ? (
-          <CalendarView appointments={appointments} users={users} isAddAppointmentModalOpen={isAddAppointmentModalOpen} isEditAppointmentModalOpen={isEditAppointmentModalOpen} editModalData={editModalData}/>
+          <CalendarView
+            appointments={appointments}
+            users={users}
+            isAddAppointmentModalOpen={isAddAppointmentModalOpen}
+            isEditAppointmentModalOpen={isEditAppointmentModalOpen}
+            editModalData={editModalData}
+          />
         ) : (
           ''
         )}
 
         {selectedView.value === VIEWS.LIST ? (
-          <ListView appointments={appointments} users={users} isEditAppointmentModalOpen={isEditAppointmentModalOpen} editModalData={editModalData}/>
+          <ListView
+            appointments={appointments}
+            users={users}
+            isEditAppointmentModalOpen={isEditAppointmentModalOpen}
+            editModalData={editModalData}
+          />
         ) : (
           ''
         )}
@@ -133,7 +147,6 @@ export default component$(() => {
         {isAddAppointmentModalOpen.value ? (
           <AddAppointmentModal
             isAddAppointmentModalOpen={isAddAppointmentModalOpen}
-   
           />
         ) : (
           ''
diff --git a/src/types/types.d.ts b/src/types/types.d.ts
index c99f2c1..dee2693 100644
--- a/src/types/types.d.ts
+++ b/src/types/types.d.ts
@@ -40,7 +40,7 @@ export interface IAppointment {
   time_end: string
   full_day: number
   category: string
-  created_at: string
+  created_at?: string
   user_id?: number
   created_by?: number
 }
@@ -50,4 +50,4 @@ export interface CalendarDay {
   month: number
   year: number
   disabled: boolean
-}
\ No newline at end of file
+}