diff --git a/lib/afc_web/controllers/emotion_controller.ex b/lib/afc_web/controllers/emotion_controller.ex
new file mode 100644
index 0000000..2076823
--- /dev/null
+++ b/lib/afc_web/controllers/emotion_controller.ex
@@ -0,0 +1,42 @@
+defmodule AfcWeb.EmotionController do
+  use AfcWeb, :controller
+  alias Afc.{Angry, Happy, Repo}
+
+  def show(conn, %{"id" => emotion}) do
+    {module, changeset} = get_page_module_and_changeset(emotion)
+
+    render conn, "form.html", changeset: changeset, module: module
+  end
+
+  def create(conn, params) do
+    submitted_emotion =
+      ~w(angry happy)
+      |> Enum.filter(&(Map.has_key?(params, &1)))
+      |> hd()
+
+    form_info = Map.get(params, submitted_emotion)
+
+    {module, changeset} =
+      get_page_module_and_changeset(submitted_emotion, form_info)
+
+    case Repo.insert(changeset) do
+      {:ok, _captured_emotion} ->
+
+        # The emotion itself has been captured at this point. Next step
+        # is to insert into the emotion_log table.
+        render conn, "captured.html"
+
+      {:error, changeset} ->
+        render conn, "form.html", changeset: changeset, module: module
+    end
+  end
+
+  defp get_page_module_and_changeset(page, params \\ %{}) do
+    case page do
+      "happy" ->
+        {Happy, Happy.changeset(%Happy{}, params)}
+      "angry" ->
+        {Angry, Angry.changeset(%Angry{}, params)}
+    end
+  end
+end
diff --git a/lib/afc_web/router.ex b/lib/afc_web/router.ex
index 9166a1c..b53a832 100644
--- a/lib/afc_web/router.ex
+++ b/lib/afc_web/router.ex
@@ -17,6 +17,7 @@ defmodule AfcWeb.Router do
     pipe_through :browser # Use the default browser stack
 
     get "/", PageController, :index
+    resources "/emotion", EmotionController, only: [:show, :create]
   end
 
   # Other scopes may use custom stacks.
diff --git a/lib/afc_web/templates/component/emoji_helper.html.eex b/lib/afc_web/templates/component/emoji_helper.html.eex
index 6c40e46..bbbd294 100644
--- a/lib/afc_web/templates/component/emoji_helper.html.eex
+++ b/lib/afc_web/templates/component/emoji_helper.html.eex
@@ -1,6 +1,6 @@
 <div class="tc w4">
-  <a href="/" class="pointer link black">
+  <%= link to: emotion_path(@conn, :show, @page), class: "pointer link black" do %>
     <%= emoji_p_tag(@emoji) %>
     <p class="-mt2"><%= @emotion %></p>
-  </a>
+  <%= end %>
 </div>
diff --git a/lib/afc_web/templates/page/index.html.eex b/lib/afc_web/templates/page/index.html.eex
index 67e1c6f..670bcab 100644
--- a/lib/afc_web/templates/page/index.html.eex
+++ b/lib/afc_web/templates/page/index.html.eex
@@ -1,29 +1,27 @@
 <%= component "day_week_month_bar", [] %>
 
-<div class="w-90 bg-white center br2 pa3 mt-day-week-month mb5">
-  <div class="">
-    <p class="pa3 ba br2 dib mb4">10th Oct 2019 (placeholder)</p>
-  </div>
+<div class="w-90 bg-white center br2 pa3 mb5 mt-day-week-month">
+  <p class="pa3 ba br2 dib mb4">10th Oct 2019 (placeholder)</p>
   <p class="tc b f4 mb3">How are you feeling today?</p>
   <div class="center w-90">
 
     <div class="flex justify-between pt3 ph1 mb3">
-      <%= component "emoji_helper", [emoji: "😆", emotion: "Happy"] %>
-      <%= component "emoji_helper", [emoji: "🤩", emotion: "Excited"] %>
+      <%= component "emoji_helper", [emoji: "😆", emotion: "Happy", page: "happy", conn: @conn] %>
+      <%= component "emoji_helper", [emoji: "🤩", emotion: "Excited", page: "happy", conn: @conn] %>
     </div>
 
     <div class="flex justify-between pt3 ph1 mb3">
-      <%= component "emoji_helper", [emoji: "😡", emotion: "Angry"] %>
-      <%= component "emoji_helper", [emoji: "😭", emotion: "Sad"] %>
+      <%= component "emoji_helper", [emoji: "😡", emotion: "Angry", page: "angry", conn: @conn] %>
+      <%= component "emoji_helper", [emoji: "😭", emotion: "Sad", page: "happy", conn: @conn] %>
     </div>
 
     <div class="flex justify-between pt3 ph1 mb3">
-      <%= component "emoji_helper", [emoji: "😬", emotion: "Worried"] %>
-      <%= component "emoji_helper", [emoji: "😐", emotion: "I don't know"] %>
+      <%= component "emoji_helper", [emoji: "😬", emotion: "Worried", page: "happy", conn: @conn] %>
+      <%= component "emoji_helper", [emoji: "😐", emotion: "I don't know", page: "happy", conn: @conn] %>
     </div>
 
     <div class="flex justify-between pt3 ph1 mb3">
-      <%= component "emoji_helper", [emoji: "😶", emotion: "Something else"] %>
+      <%= component "emoji_helper", [emoji: "😶", emotion: "Something else", page: "happy", conn: @conn] %>
     </div>
 
   </div>