diff --git a/lib/memex_web/components/core_components.ex b/lib/memex_web/components/core_components.ex
index 8120fd8..ecc9bff 100644
--- a/lib/memex_web/components/core_components.ex
+++ b/lib/memex_web/components/core_components.ex
@@ -136,6 +136,7 @@ defmodule MemexWeb.CoreComponents do
     """
   end
 
+  attr :id, :string, required: true
   attr :datetime, :any, required: true, doc: "A `DateTime` struct or nil"
 
   @doc """
@@ -151,6 +152,7 @@ defmodule MemexWeb.CoreComponents do
 
   defp cast_datetime(_datetime), do: ""
 
+  attr :id, :string, required: true
   attr :date, :any, required: true, doc: "A `Date` struct or nil"
 
   @doc """
diff --git a/lib/memex_web/components/core_components/date.html.heex b/lib/memex_web/components/core_components/date.html.heex
index 56d1ca3..9240afa 100644
--- a/lib/memex_web/components/core_components/date.html.heex
+++ b/lib/memex_web/components/core_components/date.html.heex
@@ -1,4 +1,4 @@
-<time :if={@date} datetime={@date |> Date.to_iso8601(:extended)} x-data={~s<{
+<time :if={@date} id={@id} datetime={@date |> Date.to_iso8601(:extended)} x-data={~s<{
     date:
       Intl.DateTimeFormat([], {timeZone: 'Etc/UTC', dateStyle: 'short'})
         .format(new Date("#{Date.to_iso8601(@date, :extended)}"))
diff --git a/lib/memex_web/components/core_components/datetime.html.heex b/lib/memex_web/components/core_components/datetime.html.heex
index 116a6ee..8ea2bc3 100644
--- a/lib/memex_web/components/core_components/datetime.html.heex
+++ b/lib/memex_web/components/core_components/datetime.html.heex
@@ -1,4 +1,4 @@
-<time :if={@datetime} datetime={cast_datetime(@datetime)} x-data={~s/{
+<time :if={@datetime} id={@id} datetime={cast_datetime(@datetime)} x-data={~s/{
     datetime:
       Intl.DateTimeFormat([], {dateStyle: 'short', timeStyle: 'long'})
         .format(new Date("#{cast_datetime(@datetime)}"))
diff --git a/lib/memex_web/components/core_components/user_card.html.heex b/lib/memex_web/components/core_components/user_card.html.heex
index 6da4b13..596881a 100644
--- a/lib/memex_web/components/core_components/user_card.html.heex
+++ b/lib/memex_web/components/core_components/user_card.html.heex
@@ -16,7 +16,7 @@
           "user confirmed on%{confirmed_datetime}",
           confirmed_datetime: ""
         ) %>
-        <.datetime datetime={@user.confirmed_at} />
+        <.datetime id={"#{@user.id}-confirmed-at"} datetime={@user.confirmed_at} />
       <% else %>
         <%= gettext("email unconfirmed") %>
       <% end %>
@@ -27,7 +27,7 @@
         "user registered on%{registered_datetime}",
         registered_datetime: ""
       ) %>
-      <.datetime datetime={@user.inserted_at} />
+      <.datetime id={"#{@user.id}-inserted-at"} datetime={@user.inserted_at} />
     </p>
   </h3>