diff --git a/.gitignore b/.gitignore
index 2868872..980b45b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,6 +27,7 @@ labelmaker-*.tar
 
 # Ignore assets that are produced by build tools.
 /priv/static/assets/
+/priv/static/labels/
 
 # Ignore digested assets cache.
 /priv/static/cache_manifest.json
diff --git a/lib/labelmaker_web.ex b/lib/labelmaker_web.ex
index 168a74a..081f748 100644
--- a/lib/labelmaker_web.ex
+++ b/lib/labelmaker_web.ex
@@ -17,7 +17,7 @@ defmodule LabelmakerWeb do
   those modules here.
   """
 
-  def static_paths, do: ~w(assets fonts images favicon.ico robots.txt)
+  def static_paths, do: ~w(assets fonts images labels favicon.ico robots.txt)
 
   def router do
     quote do
diff --git a/lib/labelmaker_web/live/home.ex b/lib/labelmaker_web/live/home.ex
new file mode 100644
index 0000000..e5c0339
--- /dev/null
+++ b/lib/labelmaker_web/live/home.ex
@@ -0,0 +1,22 @@
+defmodule LabelmakerWeb.Home do
+  use LabelmakerWeb, :live_view
+
+  def mount(_params, _session, socket) do
+    {:ok, assign(socket, :label, "")}
+  end
+
+  def handle_event("update_label", %{"label" => label}, socket) do
+    {:noreply, assign(socket, :label, label)}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div>
+      <h1>|{@label}|</h1>
+      <form phx-change="update_label">
+        <input type="text" name="label" value={@label} placeholder="Enter your label" />
+      </form>
+    </div>
+    """
+  end
+end
diff --git a/lib/labelmaker_web/live/label.ex b/lib/labelmaker_web/live/label.ex
new file mode 100644
index 0000000..fb32dc6
--- /dev/null
+++ b/lib/labelmaker_web/live/label.ex
@@ -0,0 +1,53 @@
+defmodule LabelmakerWeb.Label do
+  use LabelmakerWeb, :live_view
+
+  @label_dir Path.join(:code.priv_dir(:labelmaker), "static/labels")
+
+  def mount(%{"label" => label}, _session, socket) do
+    File.mkdir_p!(@label_dir)
+
+    filename = "#{label}.png"
+    filepath = Path.join(@label_dir, filename)
+
+    unless File.exists?(filepath) do
+      generate_label_image(label, filepath)
+    end
+
+    {:ok,
+     assign(socket,
+       label: label,
+       image_path: ~p"/labels/#{filename}"
+     )}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div>
+      <h1>Label: {@label}</h1>
+      <img src={@image_path} alt="" />
+    </div>
+    """
+  end
+
+  defp generate_label_image(label, filepath) do
+    args = [
+      "-background",
+      "none",
+      "-fill",
+      "black",
+      "-pointsize",
+      "24",
+      "-font",
+      "Comic-Sans-MS",
+      "label:#{label}",
+      filepath
+    ]
+
+    {_, 0} = System.cmd("magick", args)
+
+    IO.puts(filepath)
+    # png_binary = File.read!(filepath)
+    # File.rm(tmp_file)
+    # Base.encode64(png_binary)
+  end
+end
diff --git a/lib/labelmaker_web/router.ex b/lib/labelmaker_web/router.ex
index 9e432bc..16838f6 100644
--- a/lib/labelmaker_web/router.ex
+++ b/lib/labelmaker_web/router.ex
@@ -14,10 +14,17 @@ defmodule LabelmakerWeb.Router do
     plug :accepts, ["json"]
   end
 
+  # scope "/", LabelmakerWeb do
+  #   pipe_through :browser
+  #
+  #   get "/", PageController, :home
+  # end
+
   scope "/", LabelmakerWeb do
     pipe_through :browser
 
-    get "/", PageController, :home
+    live "/", Home
+    live "/:label", Label
   end
 
   # Other scopes may use custom stacks.
diff --git a/mix.lock b/mix.lock
index 1316be7..9d250db 100644
--- a/mix.lock
+++ b/mix.lock
@@ -11,6 +11,7 @@
   "hpax": {:hex, :hpax, "1.0.3", "ed67ef51ad4df91e75cc6a1494f851850c0bd98ebc0be6e81b026e765ee535aa", [:mix], [], "hexpm", "8eab6e1cfa8d5918c2ce4ba43588e894af35dbd8e91e6e55c817bca5847df34a"},
   "jason": {:hex, :jason, "1.4.4", "b9226785a9aa77b6857ca22832cffa5d5011a667207eb2a0ad56adb5db443b8a", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "c5eb0cab91f094599f94d55bc63409236a8ec69a21a67814529e8d5f6cc90b3b"},
   "mime": {:hex, :mime, "2.0.6", "8f18486773d9b15f95f4f4f1e39b710045fa1de891fada4516559967276e4dc2", [:mix], [], "hexpm", "c9945363a6b26d747389aac3643f8e0e09d30499a138ad64fe8fd1d13d9b153e"},
+  "mogrify": {:hex, :mogrify, "0.9.3", "238c782f00271dace01369ad35ae2e9dd020feee3443b9299ea5ea6bed559841", [:mix], [], "hexpm", "0189b1e1de27455f2b9ae8cf88239cefd23d38de9276eb5add7159aea51731e6"},
   "phoenix": {:hex, :phoenix, "1.7.21", "14ca4f1071a5f65121217d6b57ac5712d1857e40a0833aff7a691b7870fc9a3b", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.1", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.7", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:websock_adapter, "~> 0.5.3", [hex: :websock_adapter, repo: "hexpm", optional: false]}], "hexpm", "336dce4f86cba56fed312a7d280bf2282c720abb6074bdb1b61ec8095bdd0bc9"},
   "phoenix_html": {:hex, :phoenix_html, "4.2.1", "35279e2a39140068fc03f8874408d58eef734e488fc142153f055c5454fd1c08", [:mix], [], "hexpm", "cff108100ae2715dd959ae8f2a8cef8e20b593f8dfd031c9cba92702cf23e053"},
   "phoenix_live_dashboard": {:hex, :phoenix_live_dashboard, "0.8.7", "405880012cb4b706f26dd1c6349125bfc903fb9e44d1ea668adaf4e04d4884b7", [:mix], [{:ecto, "~> 3.6.2 or ~> 3.7", [hex: :ecto, repo: "hexpm", optional: true]}, {:ecto_mysql_extras, "~> 0.5", [hex: :ecto_mysql_extras, repo: "hexpm", optional: true]}, {:ecto_psql_extras, "~> 0.7", [hex: :ecto_psql_extras, repo: "hexpm", optional: true]}, {:ecto_sqlite3_extras, "~> 1.1.7 or ~> 1.2.0", [hex: :ecto_sqlite3_extras, repo: "hexpm", optional: true]}, {:mime, "~> 1.6 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.19 or ~> 1.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:telemetry_metrics, "~> 0.6 or ~> 1.0", [hex: :telemetry_metrics, repo: "hexpm", optional: false]}], "hexpm", "3a8625cab39ec261d48a13b7468dc619c0ede099601b084e343968309bd4d7d7"},