diff --git a/app/components/full-calendar.hbs b/app/components/full-calendar.hbs
index 35bf4c1..e005429 100644
--- a/app/components/full-calendar.hbs
+++ b/app/components/full-calendar.hbs
@@ -1,10 +1,21 @@
-{{#if this.clickedDate}}
+{{#if this.clickedDateInfo}}
   <TimeLogPopover
     @anchorElement={{this.clickedDateElement}}
     @projects={{@projects}}
     @favoriteProjects={{@favoriteProjects}}
     @onSave={{this.onEventsAdded}}
-    @onCancel={{this.clearSelectedRange}}
+    @onCancel={{this.onCancel}}
+  />
+{{/if}}
+{{#if this.clickedEventInfo}}
+  <TimeEditPopover
+    @anchorElement={{this.clickedDateElement}}
+    @projects={{@projects}}
+    @favoriteProjects={{@favoriteProjects}}
+    @selectedHourLog={{this.clickedHourLog}}
+    @onSave={{fn this.editHourLog this.clickedHourLog}}
+    @onCancel={{this.onCancel}}
+    @onDelete={{fn this.deleteHourLog this.clickedHourLog}}
   />
 {{/if}}
 <div
diff --git a/app/components/full-calendar.js b/app/components/full-calendar.js
index b873c5b..cbe2f07 100644
--- a/app/components/full-calendar.js
+++ b/app/components/full-calendar.js
@@ -8,11 +8,13 @@ import { service } from '@ember/service';
 
 export default class FullCalendarComponent extends Component {
   @service dateNavigation;
+  @service mockData;
 
   @tracked calendar = null;
   calendarEl = null;
-  @tracked clickedDate = null;
-  @tracked clickedDateElement = null;
+
+  @tracked clickedEventInfo = null;
+  @tracked clickedDateInfo = null;
 
   @action
   setupCalendar(element) {
@@ -34,11 +36,9 @@ export default class FullCalendarComponent extends Component {
       plugins: [interactionPlugin, dayGridPlugin],
       initialView: 'dayGridMonth', // Sets the default view to month grid
       events: this.args.events || [], // Pass the events from parent as an argument
-      editable: false,
       droppable: false, // Allows for drag and drop of external elements
       dateClick: this.onDateClick.bind(this), // Example of handling date clicks
-      select: this.onDateSelect.bind(this),
-      unselect: this.onDateUnselect.bind(this),
+      eventClick: this.onEventClick.bind(this),
       eventDisplay: 'list-item',
       // selectable: true,
       dayMaxEvents: 6,
@@ -57,6 +57,15 @@ export default class FullCalendarComponent extends Component {
         start: firstDayOfMonth,
         end: lastDayOfMonth,
       },
+
+      // Drag and Drop
+      editable: true, // Allows for drag and drop of internal events
+      eventConstraint: {
+        // Where events can be dragged to
+        start: firstDayOfMonth,
+        end: lastDayOfMonth,
+      },
+      eventDrop: this.onEventDrop.bind(this),
       customButtons: {
         prev: {
           text: 'Previous',
@@ -77,24 +86,35 @@ export default class FullCalendarComponent extends Component {
     this.calendar.render(); // Renders the calendar
   }
 
-  @action
-  onDateClick(info) {
-    if (info.date.getMonth() === this.args.focusDate.getMonth()) {
-      this.clickedDate = info.date;
-      this.clickedDateElement = this.calendarEl.querySelector(
-        `[data-date="${info.dateStr}"]`,
-      );
-    }
+  onEventClick(info) {
+    this.clickedDateInfo = false;
+    this.clickedEventInfo = info;
   }
 
-  @action
-  onDateSelect({ start, end }) {
-    this.selectedRange = [start, end];
+  onEventDrop(info) {
+    const newLog = {
+      ...info.oldEvent.extendedProps.hourLog,
+      date: info.event.startStr,
+    };
+    this.mockData.updateHourLogById(
+      info.oldEvent.extendedProps.hourLog.id,
+      newLog,
+    );
+  }
+
+  get clickedDateElement() {
+    const dateStr = this.clickedEventInfo
+      ? this.clickedEventInfo.event.startStr
+      : this.clickedDateInfo.dateStr;
+    return this.calendarEl.querySelector(`[data-date="${dateStr}"]`);
   }
 
   @action
-  onDateUnselect() {
-    // this.clearSelectedRange();
+  onDateClick(info) {
+    this.clickedEventInfo = null;
+    if (info.date.getMonth() === this.args.focusDate.getMonth()) {
+      this.clickedDateInfo = info;
+    }
   }
 
   @action
@@ -115,9 +135,13 @@ export default class FullCalendarComponent extends Component {
   }
 
   @action
-  clearSelectedRange() {
-    this.selectedRange = null;
-    this.clickedDate = null;
+  onCancel() {
+    this.clearPopovers();
+  }
+
+  clearPopovers() {
+    this.clickedDateInfo = null;
+    this.clickedEventInfo = null;
   }
 
   @action
@@ -128,6 +152,23 @@ export default class FullCalendarComponent extends Component {
     this.calendar.render();
   }
 
+  @action
+  editHourLog(hourLog, { hours, project }) {
+    const newLog = { ...hourLog, hours, project };
+    this.mockData.updateHourLogById(hourLog.id, newLog);
+    this.clearPopovers();
+  }
+
+  @action
+  deleteHourLog(hourLog) {
+    this.mockData.deleteHourLogById(hourLog.id);
+    this.clearPopovers();
+  }
+
+  get clickedHourLog() {
+    return this.clickedEventInfo?.event.extendedProps.hourLog;
+  }
+
   @action
   gotoFocusDate() {
     this.calendar.gotoDate(this.args.focusDate);
diff --git a/app/components/popover.hbs b/app/components/popover.hbs
new file mode 100644
index 0000000..69fb4d2
--- /dev/null
+++ b/app/components/popover.hbs
@@ -0,0 +1,11 @@
+<div
+  class="transform transition-all ease-in-out animate-fly-right animate-fly-left-out absolute z-10 w-80 rounded-md shadow-xl bg-white ring-1 ring-black ring-opacity-5"
+  role="menu"
+  aria-orientation="vertical"
+  aria-labelledby="menu-button"
+  tabindex="-1"
+  {{did-insert this.onInsert}}
+  {{floating-ui-auto-update @anchorElement this.moveToScreenPos}}
+>
+  {{yield}}
+</div>
\ No newline at end of file
diff --git a/app/components/popover.js b/app/components/popover.js
new file mode 100644
index 0000000..8d1a298
--- /dev/null
+++ b/app/components/popover.js
@@ -0,0 +1,40 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { computePosition, shift, offset } from '@floating-ui/dom';
+import { tracked } from '@glimmer/tracking';
+import { service } from '@ember/service';
+
+export default class TimeLogPopoverComponent extends Component {
+  @service localStorage;
+
+  elementRef = null;
+
+  @action
+  onInsert(el) {
+    this.elementRef = el;
+  }
+
+  @action
+  onToggle(value) {
+    this.localStorage.useAdvancedLogPopover = value;
+  }
+
+  @action
+  moveToScreenPos() {
+    computePosition(this.args.anchorElement, this.elementRef, {
+      placement: 'right-start',
+      middleware: [
+        offset({
+          mainAxis: 8,
+          crossAxis: -8,
+        }),
+        shift({ padding: 5 }),
+      ],
+    }).then(({ x, y }) => {
+      Object.assign(this.elementRef.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+    });
+  }
+}
diff --git a/app/components/time-edit-popover.hbs b/app/components/time-edit-popover.hbs
new file mode 100644
index 0000000..a8e0b03
--- /dev/null
+++ b/app/components/time-edit-popover.hbs
@@ -0,0 +1,13 @@
+<Popover @anchorElement={{@anchorElement}}>
+  <div class="mx-4 mb-3 mt-4">
+    <TimeLogPopover::Simple
+      @selectedHourLog={{@selectedHourLog}}
+      @projects={{@projects}}
+      @favoriteProjects={{@favoriteProjects}}
+      @onSave={{@onSave}}
+      @onCancel={{@onCancel}}
+      @onDelete={{@onDelete}}
+      @allowDelete={{true}}
+    />
+  </div>
+</Popover>
\ No newline at end of file
diff --git a/app/components/time-log-popover.hbs b/app/components/time-log-popover.hbs
index 7370edc..561539d 100644
--- a/app/components/time-log-popover.hbs
+++ b/app/components/time-log-popover.hbs
@@ -1,14 +1,6 @@
-<div
-  class="transform transition-all ease-in-out animate-fly-right animate-fly-left-out absolute z-10 w-80 rounded-md shadow-xl bg-white ring-1 ring-black ring-opacity-5"
-  role="menu"
-  aria-orientation="vertical"
-  aria-labelledby="menu-button"
-  tabindex="-1"
-  {{did-insert this.onInsert}}
-  {{floating-ui-auto-update @anchorElement this.moveToScreenPos}}
->
-  <div class="mx-4 mb-2">
-    <div class="flex justify-end my-4">
+<Popover @anchorElement={{@anchorElement}}>
+  <div class="mx-4 mb-3">
+    <div class="flex justify-end mt-4 mb-2">
       <Toggle::Small
         @checked={{this.localStorage.useAdvancedLogPopover}}
         @onToggle={{this.onToggle}}
@@ -16,7 +8,6 @@
     </div>
     {{#if this.localStorage.useAdvancedLogPopover}}
       <TimeLogPopover::Multi
-        @anchorElement={{@anchorElement}}
         @projects={{@projects}}
         @favoriteProjects={{@favoriteProjects}}
         @onSave={{@onSave}}
@@ -24,7 +15,6 @@
       />
     {{else}}
       <TimeLogPopover::Simple
-        @anchorElement={{@anchorElement}}
         @projects={{@projects}}
         @favoriteProjects={{@favoriteProjects}}
         @onSave={{@onSave}}
@@ -32,4 +22,4 @@
       />
     {{/if}}
   </div>
-</div>
\ No newline at end of file
+</Popover>
\ No newline at end of file
diff --git a/app/components/time-log-popover.js b/app/components/time-log-popover.js
index e5f72cd..5669f49 100644
--- a/app/components/time-log-popover.js
+++ b/app/components/time-log-popover.js
@@ -22,7 +22,7 @@ export default class TimeLogPopoverComponent extends Component {
   @action
   moveToScreenPos() {
     computePosition(this.args.anchorElement, this.elementRef, {
-      placement: 'right-start',
+      placement: this.args.placement ?? 'right-start',
       middleware: [
         offset({
           mainAxis: 8,
diff --git a/app/components/time-log-popover/simple.hbs b/app/components/time-log-popover/simple.hbs
index 25b5651..cfae2b8 100644
--- a/app/components/time-log-popover/simple.hbs
+++ b/app/components/time-log-popover/simple.hbs
@@ -1,4 +1,11 @@
 <div role="none">
+  {{#if @allowDelete}}
+    <div class="flex justify-end">
+      <button type="button" {{on "click" @onDelete}}>
+        <TrashIcon class="size-5 stroke-red-500" />
+      </button>
+    </div>
+  {{/if}}
   <form {{on "submit" this.submitLog}}>
     <div>
       <label
diff --git a/app/components/time-log-popover/simple.js b/app/components/time-log-popover/simple.js
index 39eac54..e583afa 100644
--- a/app/components/time-log-popover/simple.js
+++ b/app/components/time-log-popover/simple.js
@@ -1,28 +1,24 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { ref } from 'ember-ref-bucket';
+import { trackedReset } from 'tracked-toolbox';
 
 export default class TimeLogPopoverComponent extends Component {
-  @tracked isPopoverOpen = false;
-  @tracked hours = 8;
-  @tracked project = this.args.projects[0];
-  elementRef = null;
-
-  @action
-  togglePopover() {
-    this.isPopoverOpen = !this.isPopoverOpen;
-    if (this.isPopoverOpen) {
-      // Focus on the hours input when the popover opens
-      this.focusHoursInput();
-    }
-  }
-
-  @action
-  closePopover() {
-    this.isPopoverOpen = false;
-    this.args.onCancel?.();
-  }
+  @trackedReset({
+    memo: 'args.selectedHourLog',
+    update() {
+      return this.args.selectedHourLog.hours;
+    },
+  })
+  hours = 8;
+
+  @trackedReset({
+    memo: 'args.selectedHourLog',
+    update() {
+      return this.args.selectedHourLog.project;
+    },
+  })
+  project = this.args.projects[0];
 
   @action
   updateHours(event) {
@@ -34,60 +30,18 @@ export default class TimeLogPopoverComponent extends Component {
     this.project = event.target.value;
   }
 
+  @action
+  closePopover() {
+    this.args.onCancel?.();
+  }
+
   @action
   submitLog(event) {
     event.preventDefault();
 
-    // Log the time
-    console.log(`Logged ${this.hours} hours: ${this.project}`);
     this.args.onSave?.({
       hours: this.hours,
       project: this.project,
     });
-
-    this.resetFields();
-    this.closePopover();
-  }
-
-  resetFields() {
-    // Reset fields
-    this.hours = 8;
-    this.project = this.args.projects[1];
-  }
-
-  @action
-  focusHoursInput() {
-    if (this.hoursInput) {
-      this.hoursInput.focus();
-      this.hoursInput.select();
-    }
-  }
-
-  @action
-  onInsert(el) {
-    this.elementRef = el;
-    this.focusHoursInput();
-    this.moveToScreenPos(el);
-  }
-
-  @action
-  onUpdate(el) {
-    this.focus;
-    this.moveToScreenPos(el);
-    this.resetFields();
-    this.focusHoursInput();
-  }
-
-  moveToScreenPos(el) {
-    const { right, top } = this.args.screenPos;
-    const popoverBox = el.getBoundingClientRect();
-    el.style.left = `${right + 5}px`;
-    const maybeNewTop = top - 10;
-    const maybeNewBottom = maybeNewTop + popoverBox.height;
-    const bottomOverlap =
-      maybeNewBottom > window.screen.availHeight
-        ? maybeNewBottom - window.screen.availHeight
-        : 0;
-    el.style.top = `${maybeNewTop - bottomOverlap}px`;
   }
 }
diff --git a/app/components/trash-icon.hbs b/app/components/trash-icon.hbs
new file mode 100644
index 0000000..1e87b20
--- /dev/null
+++ b/app/components/trash-icon.hbs
@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="currentColor"
+  class="size-6"
+  ...attributes
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+  />
+</svg>
\ No newline at end of file