diff --git a/lib/memex_web/components/core_components.ex b/lib/memex_web/components/core_components.ex
index 1f9e36b..8120fd8 100644
--- a/lib/memex_web/components/core_components.ex
+++ b/lib/memex_web/components/core_components.ex
@@ -136,6 +136,39 @@ defmodule MemexWeb.CoreComponents do
     """
   end
 
+  attr :datetime, :any, required: true, doc: "A `DateTime` struct or nil"
+
+  @doc """
+  Phoenix.Component for a <time> element that renders the naivedatetime in the
+  user's local timezone with Alpine.js
+  """
+  def datetime(assigns)
+
+  @spec cast_datetime(NaiveDateTime.t() | nil) :: String.t()
+  defp cast_datetime(%NaiveDateTime{} = datetime) do
+    datetime |> DateTime.from_naive!("Etc/UTC") |> DateTime.to_iso8601(:extended)
+  end
+
+  defp cast_datetime(_datetime), do: ""
+
+  attr :date, :any, required: true, doc: "A `Date` struct or nil"
+
+  @doc """
+  Phoenix.Component for a <date> element that renders the Date in the user's
+  local timezone with Alpine.js
+  """
+  def date(assigns)
+
+  attr :content, :string, required: true
+  attr :filename, :string, default: "qrcode", doc: "filename without .png extension"
+  attr :image_class, :string, default: "w-64 h-max"
+  attr :width, :integer, default: 384, doc: "width of png to generate"
+
+  @doc """
+  Creates a downloadable QR Code element
+  """
+  def qr_code(assigns)
+
   attr :note, Note, required: true
 
   def note_content(assigns) do
diff --git a/lib/memex_web/components/core_components/date.html.heex b/lib/memex_web/components/core_components/date.html.heex
new file mode 100644
index 0000000..56d1ca3
--- /dev/null
+++ b/lib/memex_web/components/core_components/date.html.heex
@@ -0,0 +1,7 @@
+<time :if={@date} 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)}"))
+  }>} x-text="date">
+  <%= @date |> Date.to_iso8601(:extended) %>
+</time>
diff --git a/lib/memex_web/components/core_components/datetime.html.heex b/lib/memex_web/components/core_components/datetime.html.heex
new file mode 100644
index 0000000..116a6ee
--- /dev/null
+++ b/lib/memex_web/components/core_components/datetime.html.heex
@@ -0,0 +1,7 @@
+<time :if={@datetime} datetime={cast_datetime(@datetime)} x-data={~s/{
+    datetime:
+      Intl.DateTimeFormat([], {dateStyle: 'short', timeStyle: 'long'})
+        .format(new Date("#{cast_datetime(@datetime)}"))
+  }/} x-text="datetime">
+  <%= cast_datetime(@datetime) %>
+</time>
diff --git a/lib/memex_web/components/core_components/qr_code.html.heex b/lib/memex_web/components/core_components/qr_code.html.heex
new file mode 100644
index 0000000..0b0b6c5
--- /dev/null
+++ b/lib/memex_web/components/core_components/qr_code.html.heex
@@ -0,0 +1,3 @@
+<a href={qr_code_image(@content)} download={@filename <> ".png"}>
+  <img class={@image_class} alt={@filename} src={qr_code_image(@content)} />
+</a>
diff --git a/lib/memex_web/views/view_helpers.ex b/lib/memex_web/views/view_helpers.ex
index 60179d3..7516431 100644
--- a/lib/memex_web/views/view_helpers.ex
+++ b/lib/memex_web/views/view_helpers.ex
@@ -7,61 +7,6 @@ defmodule MemexWeb.ViewHelpers do
 
   use Phoenix.Component
 
-  @doc """
-  Phoenix.Component for a <time> element that renders the naivedatetime in the
-  user's local timezone with Alpine.js
-  """
-
-  attr :datetime, :any, required: true, doc: "A `DateTime` struct or nil"
-
-  def datetime(assigns) do
-    ~H"""
-    <time
-      :if={@datetime}
-      datetime={cast_datetime(@datetime)}
-      x-data={"{
-        datetime:
-          Intl.DateTimeFormat([], {dateStyle: 'short', timeStyle: 'long'})
-            .format(new Date(\"#{cast_datetime(@datetime)}\"))
-      }"}
-      x-text="datetime"
-    >
-      <%= cast_datetime(@datetime) %>
-    </time>
-    """
-  end
-
-  @spec cast_datetime(NaiveDateTime.t() | nil) :: String.t()
-  defp cast_datetime(%NaiveDateTime{} = datetime) do
-    datetime |> DateTime.from_naive!("Etc/UTC") |> DateTime.to_iso8601(:extended)
-  end
-
-  defp cast_datetime(_datetime), do: ""
-
-  @doc """
-  Phoenix.Component for a <date> element that renders the Date in the user's
-  local timezone with Alpine.js
-  """
-
-  attr :date, :any, required: true, doc: "A `Date` struct or nil"
-
-  def date(assigns) do
-    ~H"""
-    <time
-      :if={@date}
-      datetime={@date |> Date.to_iso8601(:extended)}
-      x-data={"{
-        date:
-          Intl.DateTimeFormat([], {timeZone: 'Etc/UTC', dateStyle: 'short'})
-            .format(new Date(\"#{@date |> Date.to_iso8601(:extended)}\"))
-      }"}
-      x-text="date"
-    >
-      <%= @date |> Date.to_iso8601(:extended) %>
-    </time>
-    """
-  end
-
   @doc """
   Displays content in a QR code as a base64 encoded PNG
   """
@@ -76,21 +21,4 @@ defmodule MemexWeb.ViewHelpers do
 
     "data:image/png;base64," <> img_data
   end
-
-  @doc """
-  Creates a downloadable QR Code element
-  """
-
-  attr :content, :string, required: true
-  attr :filename, :string, default: "qrcode", doc: "filename without .png extension"
-  attr :image_class, :string, default: "w-64 h-max"
-  attr :width, :integer, default: 384, doc: "width of png to generate"
-
-  def qr_code(assigns) do
-    ~H"""
-    <a href={qr_code_image(@content)} download={@filename <> ".png"}>
-      <img class={@image_class} alt={@filename} src={qr_code_image(@content)} />
-    </a>
-    """
-  end
 end