diff --git a/src/js/components/Card.js b/src/js/components/Card.js
index 4e9b510..d365f15 100644
--- a/src/js/components/Card.js
+++ b/src/js/components/Card.js
@@ -6,6 +6,9 @@
 
 import { Tooltip } from "./Tooltip.js";
 import { getRelativeTime } from "../utils.js";
+import { NoteModal } from "./Modal.js";
+import { db } from "../db.js";
+import { client } from "../client.js";
 
 /**
  * @param {Object} noteData
@@ -41,5 +44,22 @@ export const Card = function ( noteData )
 
   Tooltip( $card.querySelector( '[data-tooltip]' ) );
 
+  /**
+   * Note detail view & edit functionality
+   */
+  $card.addEventListener( 'click', function ()
+  {
+    const /** {Object} */ modal = NoteModal( title, text, getRelativeTime( postedOn ) );
+    modal.open();
+    modal.onSubmit( function ( noteData )
+    {
+      const updatedData = db.update.note( id, noteData );
+
+      // Update note in UI
+      client.note.update( id, updatedData );
+      modal.close();
+    })
+  } );
+
   return $card;
 }