diff --git a/BUILDIT.md b/BUILDIT.md
index 52673f83..ce194dd9 100644
--- a/BUILDIT.md
+++ b/BUILDIT.md
@@ -825,7 +825,7 @@ defmodule App.TimerTest do
       {:ok, timer} =
         Timer.start(%{item_id: item.id, person_id: 1, start: seven_seconds_ago})
       
-      # stop the timer based on it's item_id
+      # stop the timer based on it's item_id
       Timer.stop_timer_for_item_id(item.id)
       
       stopped_timer = Timer.get_timer!(timer.id)
@@ -3165,10 +3165,10 @@ everytime `Start/Resume` or `Stop` is called.
     person_id = get_person_id(socket.assigns)
     items = Item.items_with_timers(person_id)
 
-    isEditingItem = socket.assigns.editing
+    is_editing_item = socket.assigns.editing
 
     # If the item is being edited, we update the timer list of the item being edited.
-    if isEditingItem do
+    if is_editing_item do
       case payload do
         {:start, item_id} ->
           timers_list_changeset = Timer.list_timers_changesets(item_id)
@@ -5469,13 +5469,13 @@ to the `LiveView` server during the mounting phase.
 
 Open `assets/js/app.js`
 and locate the 
-`let liveSocket = new LiveSocket()` variable.
+`let live_socket = new LiveSocket()` variable.
 We are going to be changing the `params` attribute.
 Change it to the following:
 
 ```js
 params: {
-  _csrf_token: csrfToken,
+  _csrf_token: csrf_token,
   hours_offset_fromUTC: -new Date().getTimezoneOffset()/60
 }
 ```
@@ -5927,4 +5927,4 @@ please let us know by starring the repo on GitHub! ⭐
 
 <br />
 
-[![HitCount](https://hits.dwyl.com/dwyl/app-mvp-build.svg)](https://hits.dwyl.com/dwyl/app-mvp)
+[![HitCount](https://hits.dwyl.com/dwyl/app-mvp-build.svg)](https://hits.dwyl.com/dwyl/app-mvp)
\ No newline at end of file
diff --git a/assets/js/app.js b/assets/js/app.js
index 9797d5b1..eaa495f1 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -14,13 +14,13 @@ window.addEventListener("phx:page-loading-stop", info => topbar.hide())
 window.addEventListener("phx:highlight", (e) => {
   document.querySelectorAll("[data-highlight]").forEach(el => {
     if(el.id == e.detail.id) {
-        liveSocket.execJS(el, el.getAttribute("data-highlight"))
+        live_socket.execJS(el, el.getAttribute("data-highlight"))
     }
   })
 })
 
-// Item id of the destination in the DOM
-let itemId_to;
+// Item ID of the destination during drag over in the DOM
+let item_id_destination;
 
 let Hooks = {}
 Hooks.Items = {
@@ -33,31 +33,31 @@ Hooks.Items = {
     })
 
     this.el.addEventListener("remove-highlight", e => {
-      hook.pushEventTo("#items", "removeHighlight", {id: e.detail.id})
+      hook.pushEventTo("#items", "remove_highlight", {id: e.detail.id})
       // console.log('remove-highlight', e.detail.id)
     })
 
-    this.el.addEventListener("dragoverItem", e => {
-      // console.log("dragoverItem", e.detail)
-      const currentItemId = e.detail.currentItem.id
-      const selectedItemId = e.detail.selectedItemId
-      if( currentItemId != selectedItemId) {
-        hook.pushEventTo("#items", "dragoverItem", {currentItemId: currentItemId, selectedItemId: selectedItemId})
-        itemId_to = e.detail.currentItem.dataset.id
+    this.el.addEventListener("dragover_item", e => {
+      // console.log("dragover_item", e.detail)
+      const current_item_id = e.detail.current_item.id
+      const selected_item_id = e.detail.selected_item_id
+      if( current_item_id != selected_item_id) {
+        hook.pushEventTo("#items", "dragover_item", {current_item_id: current_item_id, selected_item_id: selected_item_id})
+        item_id_destination = e.detail.current_item.dataset.id
       }
     })
 
-    this.el.addEventListener("update-indexes", e => {
+    this.el.addEventListener("update_indexes", e => {
       const item_id = e.detail.fromItemId 
       const list_ids = get_list_item_cids()
-      console.log("update-indexes", e.detail, "list: ", list_ids)
+      console.log("update_indexes", e.detail, "list: ", list_ids)
       // Check if both "from" and "to" are defined
-      if(item_id && itemId_to && item_id != itemId_to) {
+      if(item_id && item_id_destination && item_id != item_id_destination) {
         hook.pushEventTo("#items", "update_list_seq", 
           {seq: list_ids})
       }
       
-      itemId_to = null;
+      item_id_destination = null;
     })
   }
 }
@@ -78,33 +78,33 @@ function get_list_item_cids() {
 window.addEventListener("phx:remove-highlight", (e) => {
   document.querySelectorAll("[data-highlight]").forEach(el => {
     if(el.id == e.detail.id) {
-        liveSocket.execJS(el, el.getAttribute("data-remove-highlight"))
+        live_socket.execJS(el, el.getAttribute("data-remove-highlight"))
     }
   })
 })
 
 window.addEventListener("phx:dragover-item", (e) => {
   console.log("phx:dragover-item", e.detail)
-  const selectedItem = document.querySelector(`#${e.detail.selected_item_id}`)
-  const currentItem = document.querySelector(`#${e.detail.current_item_id}`)
+  const selected_item = document.querySelector(`#${e.detail.selected_item_id}`)
+  const current_item = document.querySelector(`#${e.detail.current_item_id}`)
 
   const items = document.querySelector('#items')
-  const listItems = [...document.querySelectorAll('.item')]
+  const list_items = [...document.querySelectorAll('.item')]
 
-  if(listItems.indexOf(selectedItem) < listItems.indexOf(currentItem)){
-    items.insertBefore(selectedItem, currentItem.nextSibling)
+  if(list_items.indexOf(selected_item) < list_items.indexOf(current_item)){
+    items.insertBefore(selected_item, current_item.nextSibling)
   }
 
-  if(listItems.indexOf(selectedItem) > listItems.indexOf(currentItem)){
-    items.insertBefore(selectedItem, currentItem)
+  if(list_items.indexOf(selected_item) > list_items.indexOf(current_item)){
+    items.insertBefore(selected_item, current_item)
   }
 })
 
-// liveSocket related setup:
+// live_socket related setup:
 
-let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
+let csrf_token = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 
-let liveSocket = new LiveSocket("/live", Socket, {
+let live_socket = new LiveSocket("/live", Socket, {
   hooks: Hooks,
   dom:{
         onBeforeElUpdated(from, to) {
@@ -114,17 +114,17 @@ let liveSocket = new LiveSocket("/live", Socket, {
         }
   },
   params: {
-    _csrf_token: csrfToken,
+    _csrf_token: csrf_token,
     hours_offset_fromUTC: -new Date().getTimezoneOffset()/60
   }
 })
 
 // connect if there are any LiveViews on the page
-liveSocket.connect()
+live_socket.connect()
 
-// expose liveSocket on window for web console debug logs and latency simulation:
-// >> liveSocket.enableDebug()
-// >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
-// >> liveSocket.disableLatencySim()
-window.liveSocket = liveSocket
+// expose live_socket on window for web console debug logs and latency simulation:
+// >> live_socket.enableDebug()
+// >> live_socket.enableLatencySim(1000)  // enabled for duration of browser session
+// >> live_socket.disableLatencySim()
+window.live_socket = live_socket
 
diff --git a/lib/app/item.ex b/lib/app/item.ex
index 43a1e742..fc8d8590 100644
--- a/lib/app/item.ex
+++ b/lib/app/item.ex
@@ -38,7 +38,13 @@ defmodule App.Item do
     item
     |> cast(attrs, [:person_id, :status, :text])
     |> validate_required([:person_id])
-    |> App.Cid.put_cid()
+  end
+
+  # Update an item without changing the cid ref: #418
+  def changeset_update(item, attrs) do
+    item
+    |> cast(attrs, [:cid, :person_id, :status, :text])
+    |> validate_required([:cid, :text, :person_id])
   end
 
   @doc """
@@ -137,13 +143,13 @@ defmodule App.Item do
       [%Item{}, ...]
 
   """
-  def list_items do
+  def get_items do
     Item
     |> where([i], is_nil(i.status) or i.status != 6)
     |> Repo.all()
   end
 
-  def list_person_items(person_id) do
+  def get_person_items(person_id) do
     Item
     |> where(person_id: ^person_id)
     |> Repo.all()
@@ -164,7 +170,7 @@ defmodule App.Item do
   """
   def update_item(%Item{} = item, attrs) do
     item
-    |> Item.changeset(attrs)
+    |> Item.changeset_update(attrs)
     |> PaperTrail.update(originator: %{id: Map.get(attrs, :person_id, 0)})
   end
 
@@ -186,7 +192,7 @@ defmodule App.Item do
 
   def delete_item(id) do
     get_item!(id)
-    |> Item.changeset(%{status: 6})
+    |> Item.changeset_update(%{status: 6})
     |> Repo.update()
   end
 
@@ -201,21 +207,28 @@ defmodule App.Item do
   #  👩‍💻   Feedback/Pairing/Refactoring Welcome!  🙏
 
   @doc """
-  `items_with_timers/1` Returns a List of items with the latest associated timers.
-  This list is ordered with the position that is detailed inside the Items schema.
+  `items_with_timers/2` Returns a List of items with the latest associated timers.
+  The result set is ordered by the `list.seq`.
+  Accepts an optional second parameter `list_cid` which is the unique ID of the `list`
+  to retrieve `items` for.
 
   ## Examples
 
   iex> items_with_timers()
   [
-    %{text: "hello", person_id: 1, status: 2, start: 2022-07-14 09:35:18},
-    %{text: "world", person_id: 2, status: 7, start: 2022-07-15 04:20:42}
+    %{text: "hello", person_id: 0, status: 2, start: 2022-07-14 09:35:18},
+    %{text: "world", person_id: 0, status: 7, start: 2022-07-15 04:20:42}
   ]
   """
-  #
-  def items_with_timers(person_id \\ 0) do
-    all_list = App.List.get_all_list_for_person(person_id)
-    seq = App.List.get_list_seq(all_list)
+  def items_with_timers(person_id \\ 0, list_cid \\ nil) do
+    seq =
+      if is_nil(list_cid) do
+        App.List.get_all_list_for_person(person_id)
+        |> App.List.get_list_seq()
+      else
+        App.List.get_list_by_cid!(list_cid)
+        |> App.List.get_list_seq()
+      end
 
     sql = """
     SELECT i.id, i.cid, i.text, i.status, i.person_id, i.updated_at,
@@ -233,7 +246,7 @@ defmodule App.Item do
       |> map_columns_to_values()
 
     items_tags =
-      list_person_items(person_id)
+      get_person_items(person_id)
       |> Enum.reduce(%{}, fn i, acc -> Map.put(acc, i.id, i) end)
 
     accumulate_item_timers(values, seq)
@@ -378,7 +391,7 @@ defmodule App.Item do
   This will not be needed once all records are transitioned.
   """
   def update_all_items_cid do
-    items = list_items()
+    items = get_items()
 
     Enum.each(items, fn i ->
       # coveralls-ignore-start
diff --git a/lib/app/list.ex b/lib/app/list.ex
index a4d7c993..74d351b6 100644
--- a/lib/app/list.ex
+++ b/lib/app/list.ex
@@ -18,13 +18,20 @@ defmodule App.List do
   end
 
   @doc false
-  def changeset(list, attrs) do
+  def changeset(list, attrs \\ %{}) do
     list
     |> cast(attrs, [:name, :person_id, :seq, :sort, :status])
     |> validate_required([:name, :person_id])
     |> App.Cid.put_cid()
   end
 
+  # Update an list without changing the cid ref: #418
+  def changeset_update(list, attrs \\ %{}) do
+    list
+    |> cast(attrs, [:name, :person_id, :seq, :sort, :status])
+    |> validate_required([:cid, :name, :person_id])
+  end
+
   @doc """
   `create_list/1` creates an `list`.
 
@@ -62,6 +69,16 @@ defmodule App.List do
     |> Repo.get!(id)
   end
 
+  @doc """
+  `delete_list/1` "soft" deletes a list
+  so it can easily be restored in the event of mistaken deletion.
+  """
+  def delete_list(id) do
+    get_list!(id)
+    |> changeset_update(%{status: 6})
+    |> Repo.update()
+  end
+
   @doc """
   `get_list_by_cid!/1` gets the `list` record by its' `cid`.
 
@@ -96,7 +113,7 @@ defmodule App.List do
   """
   def update_list(%List{} = list, attrs) do
     list
-    |> List.changeset(attrs)
+    |> List.changeset_update(attrs)
     |> PaperTrail.update()
   end
 
@@ -106,6 +123,8 @@ defmodule App.List do
   def get_lists_for_person(person_id) do
     List
     |> where(person_id: ^person_id)
+    |> where([l], l.status != 6)
+    |> order_by(asc: :name)
     |> Repo.all()
   end
 
@@ -146,6 +165,17 @@ defmodule App.List do
     end
   end
 
+  @doc """
+  `update_list_seq/3` update the `list.seq` for the `list.cid` for the `person_id`.
+  """
+  def update_list_seq(list_cid, person_id, seq) do
+    list = get_list_by_cid!(list_cid)
+    update_list(list, %{seq: seq, person_id: person_id})
+  end
+
+  @doc """
+  `add_item_to_list/3` adds the `item.cid` to the `list.cid` for the given `person_id`.
+  """
   def add_item_to_list(item_cid, list_cid, person_id) do
     list = get_list_by_cid!(list_cid)
     prev_seq = get_list_seq(list)
@@ -153,11 +183,33 @@ defmodule App.List do
     update_list(list, %{seq: seq, person_id: person_id})
   end
 
-  def update_list_seq(list_cid, person_id, seq) do
+  @doc """
+  `remove_item_from_list/3` update the `list.seq` for the `list.cid` for the `person_id`.
+  """
+  def remove_item_from_list(item_cid, list_cid, person_id) do
     list = get_list_by_cid!(list_cid)
+    # get existing list.seq
+    seq =
+      get_list_seq(list)
+      # remove the item_cid from the list.seq:
+      |> Useful.remove_item_from_list(item_cid)
+      |> Enum.join(",")
+
     update_list(list, %{seq: seq, person_id: person_id})
   end
 
+  @doc """
+  `move_item_from_lista_to_listb/4` moves the `item_cid`
+  from `lista_cid` to `listb_cid` (removes from `lista`) for `person_id`.
+  "From A to B".
+  """
+  def move_item_from_lista_to_listb(item_cid, lista_cid, listb_cid, person_id) do
+    # Remove from List A:
+    remove_item_from_list(item_cid, lista_cid, person_id)
+    # Add to List B:
+    add_item_to_list(item_cid, listb_cid, person_id)
+  end
+
   # feel free to refactor this to use pattern matching:
   def add_papertrail_item_to_all_list(tuple) do
     # extract the item from the tuple:
@@ -174,6 +226,13 @@ defmodule App.List do
     tuple
   end
 
+  @doc """
+  `get_list_seq/1` receives a `%List{}` `Map`/`Struct`
+  and returns a `List` of `item` `cids`
+  that can easily be used to lookup which `items` are on a given `list`.
+  e.g: ["F4VbyA5NNSxNvVwAAAWi", "A8y3Fk4ht", "RJX0VSn", "etc"]
+  OR if the `list` does not yet have an `items`, returns an *empty* `List`: []
+  """
   def get_list_seq(list) do
     if is_nil(list.seq) do
       []
diff --git a/lib/app_web.ex b/lib/app_web.ex
index 36833c05..a9119adb 100644
--- a/lib/app_web.ex
+++ b/lib/app_web.ex
@@ -34,7 +34,9 @@ defmodule AppWeb do
     quote do
       use Phoenix.View,
         root: "lib/app_web/templates",
-        namespace: AppWeb
+        namespace: AppWeb,
+        # elixirforum.com/t/html-heex-file-for-phoenix-component-template/42516/4
+        pattern: "**/*"
 
       # Import convenience functions from controllers
       import Phoenix.Controller,
diff --git a/lib/app_web/controllers/list_controller.ex b/lib/app_web/controllers/list_controller.ex
new file mode 100644
index 00000000..48389105
--- /dev/null
+++ b/lib/app_web/controllers/list_controller.ex
@@ -0,0 +1,93 @@
+defmodule AppWeb.ListController do
+  use AppWeb, :controller
+  alias App.List
+  plug :permission_list when action in [:edit, :update, :delete]
+
+  def index(conn, _params) do
+    person_id = conn.assigns[:person][:id] || 0
+    lists = List.get_lists_for_person(person_id)
+
+    render(conn, "index.html", lists: lists, custom_list: false)
+  end
+
+  def new(conn, _params) do
+    changeset = List.changeset(%List{})
+    render(conn, "new.html", changeset: changeset)
+  end
+
+  defp downcase_name(list_params) do
+    list_name = Map.get(list_params, "name") || nil
+
+    if list_name != nil do
+      Map.put(list_params, "name", String.downcase(list_name))
+    else
+      list_params
+    end
+  end
+
+  def create(conn, %{"list" => list_params}) do
+    person_id = conn.assigns[:person][:id] || 0
+
+    list_params =
+      downcase_name(list_params)
+      |> Map.put("person_id", person_id)
+      |> Map.put("status", 2)
+
+    case List.create_list(list_params) do
+      {:ok, _list} ->
+        conn
+        |> put_flash(:info, "List created successfully.")
+        |> redirect(to: Routes.list_path(conn, :index))
+
+      {:error, %Ecto.Changeset{} = changeset} ->
+        render(conn, "new.html", changeset: changeset)
+    end
+  end
+
+  # TODO: need to ensure we are checking for the person_id before editing
+  # Should return 404 if person_id is not valid for this list.
+  def edit(conn, %{"id" => id}) do
+    list = List.get_list!(id)
+    changeset = List.changeset(list)
+    render(conn, "edit.html", list: list, changeset: changeset)
+  end
+
+  def update(conn, %{"id" => id, "list" => list_params}) do
+    list = List.get_list!(id)
+    list_params = downcase_name(list_params)
+
+    case List.update_list(list, list_params) do
+      {:ok, _list} ->
+        conn
+        |> put_flash(:info, "List updated successfully.")
+        |> redirect(to: Routes.list_path(conn, :index))
+
+      {:error, %Ecto.Changeset{} = changeset} ->
+        render(conn, "edit.html", list: list, changeset: changeset)
+    end
+  end
+
+  #  TODO: MUST check person_id matches before allowing "delete"!
+  def delete(conn, %{"id" => id}) do
+    list = List.get_list!(id)
+    {:ok, _list} = List.delete_list(list.id)
+
+    conn
+    |> put_flash(:info, "list deleted successfully.")
+    |> redirect(to: Routes.list_path(conn, :index))
+  end
+
+  defp permission_list(conn, _opts) do
+    list = List.get_list!(conn.params["id"])
+    person_id = conn.assigns[:person][:id] || 0
+
+    if list.person_id == person_id && list.name != "all" do
+      conn
+    else
+      conn
+      |> put_flash(:info, "You can't access that page")
+      |> redirect(to: "/lists")
+      |> halt()
+    end
+  end
+end
diff --git a/lib/app_web/controllers/tag_controller.ex b/lib/app_web/controllers/tag_controller.ex
index c8b525e8..0fa43d67 100644
--- a/lib/app_web/controllers/tag_controller.ex
+++ b/lib/app_web/controllers/tag_controller.ex
@@ -7,7 +7,11 @@ defmodule AppWeb.TagController do
     person_id = conn.assigns[:person][:id] || 0
     tags = Tag.list_person_tags(person_id)
 
-    render(conn, "index.html", tags: tags)
+    render(conn, "index.html",
+      tags: tags,
+      lists: App.List.get_lists_for_person(person_id),
+      custom_list: false
+    )
   end
 
   def new(conn, _params) do
diff --git a/lib/app_web/live/app_live.ex b/lib/app_web/live/app_live.ex
index c6c884ef..ef63cf6c 100644
--- a/lib/app_web/live/app_live.ex
+++ b/lib/app_web/live/app_live.ex
@@ -13,19 +13,41 @@ defmodule AppWeb.AppLive do
   @stats_topic "stats"
 
   defp get_list_cid(assigns), do: assigns[:list_cid]
+  defp get_list_name(assigns), do: assigns[:list_name]
+
+  defp list_cid_from_url_params(params) do
+    if Map.has_key?(params, "list_cid"), do: Map.get(params, "list_cid", nil)
+  end
 
   @impl true
-  def mount(_params, _session, socket) do
+  def mount(params, _session, socket) do
     # subscribe to the channel
     if connected?(socket), do: AppWeb.Endpoint.subscribe(@topic)
     AppWeb.Endpoint.subscribe(@stats_topic)
 
     person_id = Person.get_person_id(socket.assigns)
-    # Create or Get the "all" list for the person_id
-    all_list = App.List.get_all_list_for_person(person_id)
-    # Temporary function to add All *existing* items to the "All" list:
-    App.List.add_all_items_to_all_list_for_person_id(person_id)
-    items = Item.items_with_timers(person_id)
+
+    custom_list = list_cid_from_url_params(params)
+
+    list_cid =
+      if custom_list == nil do
+        # Create or Get the "all" list for the person_id
+        all_list = App.List.get_all_list_for_person(person_id)
+
+        # Temporary function to add All *existing* items to the "All" list:
+        App.List.add_all_items_to_all_list_for_person_id(person_id)
+
+        # return the "all" list cid
+        all_list.cid
+      else
+        custom_list
+      end
+
+    lists = App.List.get_lists_for_person(person_id)
+    list = Enum.find(lists, fn list -> list.cid == list_cid end)
+
+    # Assigns
+    items = Item.items_with_timers(person_id, list_cid)
     tags = Tag.list_person_tags(person_id)
     selected_tags = []
     draft_item = Item.get_draft_item(person_id)
@@ -37,7 +59,10 @@ defmodule AppWeb.AppLive do
        editing: nil,
        filter: "active",
        filter_tag: nil,
-       list_cid: all_list.cid,
+       custom_list: custom_list,
+       list_cid: list_cid,
+       list_name: list.name,
+       lists: lists,
        tags: tags,
        selected_tags: selected_tags,
        text_value: draft_item.text || "",
@@ -60,7 +85,7 @@ defmodule AppWeb.AppLive do
   def handle_event("create", %{"text" => text}, socket) do
     person_id = Person.get_person_id(socket.assigns)
 
-    {:ok, %{model: _item}} =
+    {:ok, %{model: item}} =
       Item.create_item_with_tags(%{
         text: text,
         person_id: person_id,
@@ -68,8 +93,13 @@ defmodule AppWeb.AppLive do
         tags: socket.assigns.selected_tags
       })
 
-    # Add this newly created `item` to the "All" list:
-    # App.ListItem.add_item_to_all_list(item)
+    # Add this newly created `item` to the list current list:
+    list_cid = get_list_cid(socket.assigns)
+    list_name = get_list_name(socket.assigns)
+
+    if list_name !== "all" do
+      App.List.add_item_to_list(item.cid, list_cid, person_id)
+    end
 
     draft = Item.get_draft_item(person_id)
     Item.update_draft(draft, %{text: ""})
@@ -273,17 +303,17 @@ defmodule AppWeb.AppLive do
   end
 
   @impl true
-  def handle_event("removeHighlight", %{"id" => id}, socket) do
+  def handle_event("remove_highlight", %{"id" => id}, socket) do
     AppWeb.Endpoint.broadcast(@topic, "move_items", {:drop_item, id})
     {:noreply, socket}
   end
 
   @impl true
   def handle_event(
-        "dragoverItem",
+        "dragover_item",
         %{
-          "currentItemId" => current_item_id,
-          "selectedItemId" => selected_item_id
+          "current_item_id" => current_item_id,
+          "selected_item_id" => selected_item_id
         },
         socket
       ) do
@@ -342,11 +372,12 @@ defmodule AppWeb.AppLive do
   @impl true
   def handle_info(%Broadcast{event: "update", payload: payload}, socket) do
     person_id = Person.get_person_id(socket.assigns)
-    items = Item.items_with_timers(person_id)
-    isEditingItem = socket.assigns.editing
+    list_cid = get_list_cid(socket.assigns)
+    items = Item.items_with_timers(person_id, list_cid)
+    is_editing_item = socket.assigns.editing
 
     # If the item is being edited, we update the timer list of the item being edited.
-    if isEditingItem do
+    if is_editing_item do
       case payload do
         {:start, item_id} ->
           timers_list_changeset = Timer.list_timers_changesets(item_id)
diff --git a/lib/app_web/live/app_live.html.heex b/lib/app_web/live/app_live.html.heex
index 45a9d2a2..fec2c4f7 100644
--- a/lib/app_web/live/app_live.html.heex
+++ b/lib/app_web/live/app_live.html.heex
@@ -142,7 +142,7 @@
     </div>
   </.form>
   <!-- List of items with inline buttons and controls -->
-  <ul id="items" phx-hook="Items" x-data="{selectedItem: null}" class="w-full">
+  <ul id="items" phx-hook="Items" x-data="{selected_item: null}" class="w-full">
     <%= for item <- filter_items(@items, @filter, @filter_tag) do %>
       <li
         id={"item-#{item.id}"}
@@ -150,10 +150,10 @@
         class={"mt-2 flex flex-col w-full border-t border-slate-200 py-2 item #{if item.id == @editing do 'cursor-default' else 'cursor-grab' end}"}
         draggable={"#{if item.id == @editing do 'false' else 'true' end}"}
         x-data="{selected: false}"
-        x-on:dragstart="selected = true; $dispatch('highlight', {id: $el.id}); selectedItem = $el"
-        x-on:dragend="selected = false; $dispatch('remove-highlight', {id: $el.id}); selectedItem = null; $dispatch('update-indexes', {fromItemId: $el.dataset.id})"
+        x-on:dragstart="selected = true; $dispatch('highlight', {id: $el.id}); selected_item = $el"
+        x-on:dragend="selected = false; $dispatch('remove-highlight', {id: $el.id}); selected_item = null; $dispatch('update_indexes', {fromItemId: $el.dataset.id})"
         x-bind:class="selected ?? 'cursor-grabbing'"
-        x-on:dragover.throttle="$dispatch('dragoverItem', {selectedItemId: selectedItem.id, currentItem: $el})"
+        x-on:dragover.throttle="$dispatch('dragover_item', {selected_item_id: selected_item.id, current_item: $el})"
         data-highlight={JS.add_class("bg-teal-300")}
         data-remove-highlight={JS.remove_class("bg-teal-300")}
       >
diff --git a/lib/app_web/live/components/nav.ex b/lib/app_web/live/components/nav.ex
new file mode 100644
index 00000000..1edd1dca
--- /dev/null
+++ b/lib/app_web/live/components/nav.ex
@@ -0,0 +1,7 @@
+defmodule AppWeb.Nav do
+  use Phoenix.LiveComponent
+
+  def render(assigns) do
+    Phoenix.View.render(AppWeb.NavView, "nav.html", assigns)
+  end
+end
diff --git a/lib/app_web/live/stats_live.ex b/lib/app_web/live/stats_live.ex
index ef365323..92dd8d68 100644
--- a/lib/app_web/live/stats_live.ex
+++ b/lib/app_web/live/stats_live.ex
@@ -22,7 +22,9 @@ defmodule AppWeb.StatsLive do
        person_id: person_id,
        metrics: metrics,
        sort_column: :person_id,
-       sort_order: :asc
+       sort_order: :asc,
+       lists: App.List.get_lists_for_person(person_id),
+       custom_list: false
      )}
   end
 
diff --git a/lib/app_web/router.ex b/lib/app_web/router.ex
index 05a33463..ceb3149b 100644
--- a/lib/app_web/router.ex
+++ b/lib/app_web/router.ex
@@ -29,6 +29,7 @@ defmodule AppWeb.Router do
   scope "/", AppWeb do
     pipe_through [:browser, :authOptional]
     live "/", AppLive
+    resources "/lists", ListController, except: [:show]
     get "/logout", AuthController, :logout
     live "/stats", StatsLive
     resources "/tags", TagController, except: [:show]
diff --git a/lib/app_web/templates/layout/live.html.heex b/lib/app_web/templates/layout/live.html.heex
index 05433985..74a86392 100644
--- a/lib/app_web/templates/layout/live.html.heex
+++ b/lib/app_web/templates/layout/live.html.heex
@@ -1 +1,2 @@
+<.live_component module={AppWeb.Nav} id="menu" {assigns} />
 <%= @inner_content %>
diff --git a/lib/app_web/templates/layout/root.html.heex b/lib/app_web/templates/layout/root.html.heex
index e7e3b631..82c04ea7 100644
--- a/lib/app_web/templates/layout/root.html.heex
+++ b/lib/app_web/templates/layout/root.html.heex
@@ -43,153 +43,6 @@
     </script>
   </head>
   <body>
-    <nav x-data="{ openMenu: false }" class="bg-gray-800">
-      <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
-        <div class="relative flex h-16 items-center justify-between">
-          <div class="absolute inset-y-0 left-0 flex items-center pr-2">
-            <%= if @loggedin do %>
-              <!-- Profile dropdown -->
-              <div
-                x-data="{showProfileDropdown: false}"
-                x-on:click="showProfileDropdown = !showProfileDropdown"
-                class="relative ml-3"
-              >
-                <div>
-                  <button
-                    type="button"
-                    class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
-                    id="user-menu-button"
-                    aria-expanded="false"
-                    aria-haspopup="true"
-                  >
-                    <span class="sr-only">Open user menu</span>
-                    <img
-                      src={@person.picture}
-                      class="h-8 w-8 rounded-full"
-                      alt="avatar image"
-                    />
-                  </button>
-                </div>
-                <!-- Dropdown menu, show/hide based on menu state. -->
-                <div
-                  x-show="showProfileDropdown"
-                  x-on:click.away="showProfileDropdown = false"
-                  x-transition:enter="transition ease-out duration-100"
-                  x-transition:enter-start="transform opacity-0 scale-95"
-                  x-transition:enter-end="transform opacity-100 scale-100"
-                  x-transition:leave="transition ease-in duration-75"
-                  x-transition:leave-start="transform opacity-100 scale-100"
-                  x-transition:leave-end="transform opacity-0 scale-95"
-                  class="absolute left-0 z-10 mt-2 w-48 origin-top-left rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-                  role="menu"
-                  aria-orientation="vertical"
-                  aria-labelledby="user-menu-button"
-                  tabindex="-1"
-                >
-                  <!-- Active: "bg-gray-100", Not Active: "" -->
-                  <%= link to: "/logout" , class: "block px-4 py-2 text-sm text-gray-700" do %>
-                    Sign out
-                  <% end %>
-                </div>
-              </div>
-            <% else %>
-              <div class="flex-shrink-0">
-                <%= link to: "/login" , class: "relative inline-flex items-center gap-x-1.5 rounded-md bg-[#0F766E] px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500" do %>
-                  Login
-                <% end %>
-              </div>
-            <% end %>
-          </div>
-
-          <div class="flex flex-1 items-center justify-center">
-            <div class="flex flex-shrink-0 items-center">
-              <a href="/" class="flex items-center">
-                <img
-                  src="https://dwyl.com/img/common/dwyl-heart-only-logo.png"
-                  height="32"
-                  width="32"
-                  alt="dwyl logo"
-                />
-              </a>
-            </div>
-          </div>
-
-          <div class="absolute inset-y-0 right-0 flex items-center">
-            <!-- Mobile menu button-->
-            <button
-              x-on:click="openMenu = !openMenu"
-              type="button"
-              class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
-              aria-controls="mobile-menu"
-              aria-expanded="false"
-            >
-              <span class="sr-only">Open main menu</span>
-              <!--
-                Icon when menu is closed.
-
-                Menu open: "hidden", Menu closed: "block"
-              -->
-              <svg
-                class="block h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
-                />
-              </svg>
-              <!--
-                Icon when menu is open.
-
-                Menu open: "block", Menu closed: "hidden"
-              -->
-              <svg
-                class="hidden h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-      <!-- Mobile menu, show/hide based on menu state. -->
-      <div x-show="openMenu" id="mobile-menu">
-        <div class="space-y-1 px-2 pb-3 pt-2 text-right">
-          <!--  <a href="#" class="bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium" aria-current="page">Current</a> -->
-          <%= link("📥 All",
-            to: "/tags",
-            class:
-              "text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium"
-          ) %>
-        </div>
-      </div>
-
-      <div x-show="openMenu" id="mobile-menu">
-        <div class="space-y-1 px-2 pb-3 pt-2 text-right">
-          <!--  <a href="#" class="bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium" aria-current="page">Current</a> -->
-          <%= link("🏷️ Tags",
-            to: "/tags",
-            class:
-              "text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium"
-          ) %>
-        </div>
-      </div>
-    </nav>
-
     <%= @inner_content %>
   </body>
 </html>
diff --git a/lib/app_web/templates/list/edit.html.heex b/lib/app_web/templates/list/edit.html.heex
new file mode 100644
index 00000000..2af8184d
--- /dev/null
+++ b/lib/app_web/templates/list/edit.html.heex
@@ -0,0 +1,11 @@
+<.container>
+  <h2 class="text-center mt-4 mb-4 text-4xl font-semibold leading-6 text-gray-900 clear-both">
+    <i>Edit</i> List
+  </h2>
+
+  <%= render(
+    "form.html",
+    Map.put(assigns, :action, Routes.list_path(@conn, :update, @list))
+    |> Map.put(:method, "patch")
+  ) %>
+</.container>
diff --git a/lib/app_web/templates/list/form.html.heex b/lib/app_web/templates/list/form.html.heex
new file mode 100644
index 00000000..b9cbe865
--- /dev/null
+++ b/lib/app_web/templates/list/form.html.heex
@@ -0,0 +1,44 @@
+<.form :let={f} for={@changeset} action={@action} method={@method} class="py-3">
+  <%= if @changeset.action do %>
+    <div class="alert alert-danger">
+      <p>Oops, something went wrong! Please check the errors below.</p>
+    </div>
+  <% end %>
+
+  <div class="flex flex-col justify-center items-center block text-xl2 font-medium leading-6 text-gray-900 mb-4">
+    <.form_field type="text_input" form={f} field={:name} />
+  </div>
+
+  <div class="flex justify-end mr-1 float-right">
+    <button
+      class="inline-flex items-center px-4 py-2 mt-1
+      rounded-md bg-green-600 hover:bg-green-700 text-white text-2xl text-center font-semibold"
+      type="submit"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-5 w-5 mr-2"
+        fill="none"
+        viewBox="0 0 22 22"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z"
+        />
+      </svg>
+      Save
+    </button>
+  </div>
+
+  <%= link("< Back to Lists",
+    to: Routes.list_path(@conn, :index),
+    class:
+      "float-left rounded-md bg-orange-600 hover:bg-orange-700 
+      mt-2 ml-4 px-4 py-2 text-center text-sm font-semibold text-white shadow-sm",
+    data: [confirm: "Are you sure you want to discard this list?
+      (The data cannot be recovered!)"]
+  ) %>
+</.form>
diff --git a/lib/app_web/templates/list/index.html.heex b/lib/app_web/templates/list/index.html.heex
new file mode 100644
index 00000000..5f33a4e5
--- /dev/null
+++ b/lib/app_web/templates/list/index.html.heex
@@ -0,0 +1,126 @@
+<%= render(AppWeb.NavView, "nav.html", assigns) %>
+
+<h2 class="text-center mt-3 text-4xl font-semibold leading-6 text-gray-900">
+  Lists
+</h2>
+
+<div class="px-4 sm:px-6 lg:px-8">
+  <div class="sm:flex sm:items-center">
+    <div class="sm:flex-auto">
+      <p class="mt-4 text-sm text-gray-700 text-center sm:flex-auto">
+        These are <b>your <code>Lists</code></b>. <br /> Use
+        <b><code>Lists</code></b>
+        to <b>organize</b>
+        your <b><code>Items</code></b>. <br /> Create a
+        <b><i>New</i> <code>List</code></b>
+        for a project or area <br /> you need to keep track of.
+      </p>
+    </div>
+    <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
+      <.button
+        link_type="a"
+        to={Routes.list_path(@conn, :new)}
+        label="New List"
+        class="block rounded-md bg-green-600 px-5 py-2 text-center text-2xl font-semibold text-white shadow-sm hover:bg-green-700 
+        focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-800"
+      />
+    </div>
+  </div>
+  <div class="mt-8 flow-root">
+    <div class="-mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+      <div class="inline-block min-w-full py-2 align-middle">
+        <table class="table-auto min-w-full border-separate border-spacing-0">
+          <thead>
+            <tr>
+              <th
+                scope="col"
+                class="sticky top-0 z-10 border-b border-gray-300 bg-white bg-opacity-75 py-3.5 pl-4 pr-3 
+                  text-left text-sm font-semibold text-gray-900 backdrop-blur backdrop-filter sm:pl-6 lg:pl-8"
+              >
+                Name
+              </th>
+              <th
+                scope="col"
+                class="sticky top-0 z-10 hidden border-b border-gray-300 bg-white bg-opacity-75 px-3 py-3.5 
+                  text-center text-sm font-semibold text-gray-900 backdrop-blur backdrop-filter sm:table-cell"
+              >
+                Item Count
+              </th>
+              <th
+                scope="col"
+                class="sticky top-0 z-10 hidden border-b border-gray-300 bg-white bg-opacity-75 px-3 py-3.5 
+                  text-center text-sm font-semibold text-gray-900 backdrop-blur backdrop-filter sm:table-cell"
+              >
+                Created
+              </th>
+              <th
+                scope="col"
+                class="sticky top-0 z-10 hidden border-b border-gray-300 bg-white bg-opacity-75 px-3 py-3.5 
+                  text-center text-sm font-semibold text-gray-900 backdrop-blur backdrop-filter sm:table-cell"
+              >
+                Last Updated
+              </th>
+              <th
+                scope="col"
+                class="sticky top-0 z-10 border-b border-gray-300 bg-white bg-opacity-75 py-3.5 pl-3 pr-4 backdrop-blur backdrop-filter sm:pr-6 lg:pr-8"
+              >
+                <span class="sr-only">Edit</span>
+              </th>
+              <th
+                scope="col"
+                class="sticky top-0 z-10 border-b border-gray-300 bg-white bg-opacity-75 py-3.5 pl-3 pr-4 backdrop-blur backdrop-filter sm:pr-6 lg:pr-8"
+              >
+                <span class="sr-only">Delete</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <%= for list <- @lists do %>
+              <tr>
+                <td class="whitespace-nowrap border-b border-gray-200 py-4 pl-4 pr-3 font-medium text-gray-900 sm:pl-6 lg:pl-8">
+                  <%= title_case(list.name) %>
+                </td>
+                <td class="whitespace-nowrap border-b border-gray-200 hidden px-3 py-4 text-center text-xl text-gray-800 sm:table-cell">
+                  <%= list_item_count(list) %>
+                </td>
+                <td class="whitespace-nowrap border-b border-gray-200 hidden px-3 py-4 text-center text-sm text-gray-800 sm:table-cell">
+                  <%= format_date(list.inserted_at) %>
+                </td>
+                <td class="whitespace-nowrap border-b border-gray-200 hidden px-3 py-4 text-center text-sm text-gray-800 sm:table-cell">
+                  <%= format_date(list.updated_at) %>
+                </td>
+                <!-- Don't show Edit or Delete buttons for "all" list. ref: github.com/dwyl/mvp/issues/400 -->
+                <%= if list.name == "all" do %>
+                  <td class="relative border-b border-gray-200"></td>
+                  <td class="relative border-b border-gray-200"></td>
+                <% else %>
+                  <td class="whitespace-nowrap border-b border-gray-200 py-4 pr-4 font-medium">
+                    <%= link("Edit",
+                      to: Routes.list_path(@conn, :edit, list),
+                      class:
+                        "float-right rounded-md bg-sky-500 px-4 py-2 text-center font-semibold text-white shadow-sm hover:bg-sky-600 
+                      focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700"
+                    ) %>
+                  </td>
+                  <td class="whitespace-nowrap border-b border-gray-200 pr-4 font-medium">
+                    <%= link("Delete",
+                      to: Routes.list_path(@conn, :delete, list),
+                      method: :delete,
+                      data: [
+                        confirm: "Are you sure you want to delete this list?"
+                      ],
+                      class:
+                        "float-right rounded-md bg-red-500 px-4 py-2 text-center font-semibold text-white shadow-sm hover:bg-red-600 
+                      focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-700"
+                    ) %>
+                  </td>
+                <% end %>
+              </tr>
+            <% end %>
+            <!-- More people... -->
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/lib/app_web/templates/list/new.html.heex b/lib/app_web/templates/list/new.html.heex
new file mode 100644
index 00000000..69025cee
--- /dev/null
+++ b/lib/app_web/templates/list/new.html.heex
@@ -0,0 +1,18 @@
+<h2 class="text-center mt-4 text-4xl font-semibold leading-6 text-gray-900 clear-both">
+  <i>New</i> List
+</h2>
+
+<div class="sm:flex-auto">
+  <p class="mt-4 text-sm text-gray-700 text-center sm:flex-auto">
+    Create a <b><i>New</i> <code>List</code></b>
+    for a project or area you need to keep track of:
+  </p>
+</div>
+
+<div class="mt-3 clear-both">
+  <%= render(
+    "form.html",
+    Map.put(assigns, :action, Routes.list_path(@conn, :create))
+    |> Map.put(:method, "post")
+  ) %>
+</div>
diff --git a/lib/app_web/templates/nav/nav.html.heex b/lib/app_web/templates/nav/nav.html.heex
new file mode 100644
index 00000000..bdb34d3f
--- /dev/null
+++ b/lib/app_web/templates/nav/nav.html.heex
@@ -0,0 +1,155 @@
+<nav class="bg-gray-800" x-data="{ openMenu: false, showProfileDropdown: false}">
+  <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+    <div class="relative flex h-16 items-center justify-between">
+      <div class="absolute inset-y-0 left-0 flex items-center pr-2">
+        <%= if @loggedin do %>
+          <!-- Profile dropdown -->
+          <div
+            x-on:click="showProfileDropdown = !showProfileDropdown"
+            class="relative ml-3"
+          >
+            <div>
+              <button
+                type="button"
+                class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
+                id="user-menu-button"
+                aria-expanded="false"
+                aria-haspopup="true"
+              >
+                <span class="sr-only">Open user menu</span>
+                <img
+                  src={@person.picture}
+                  class="h-8 w-8 rounded-full"
+                  alt="avatar image"
+                />
+              </button>
+            </div>
+            <!-- Dropdown menu, show/hide based on menu state. -->
+            <div
+              x-show="showProfileDropdown"
+              x-on:click.away="showProfileDropdown = false"
+              x-transition:enter="transition ease-out duration-100"
+              x-transition:enter-start="transform opacity-0 scale-95"
+              x-transition:enter-end="transform opacity-100 scale-100"
+              x-transition:leave="transition ease-in duration-75"
+              x-transition:leave-start="transform opacity-100 scale-100"
+              x-transition:leave-end="transform opacity-0 scale-95"
+              class="absolute left-0 z-10 mt-2 w-48 origin-top-left rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+              role="menu"
+              aria-orientation="vertical"
+              aria-labelledby="user-menu-button"
+              tabindex="-1"
+            >
+              <!-- Active: "bg-gray-100", Not Active: "" -->
+              <%= link to: "/logout" , class: "block px-4 py-2 text-sm text-gray-700" do %>
+                Sign out
+              <% end %>
+            </div>
+          </div>
+        <% else %>
+          <div class="flex-shrink-0">
+            <%= link to: "/login" ,
+                class: "relative inline-flex items-center gap-x-1.5 rounded-md bg-[#0F766E] px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+                do %>
+              Login
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+
+      <div class="flex flex-1 items-center justify-center">
+        <div class="flex flex-shrink-0 items-center">
+          <%= if @custom_list do %>
+            <h1 class="text-white text-2xl"><%= list_name(@list_name) %></h1>
+          <% else %>
+            <!-- show the @dwyl logo and link to root -->
+            <a href="/" class="flex items-center">
+              <img
+                src="https://dwyl.com/img/common/dwyl-heart-only-logo.png"
+                height="32"
+                width="32"
+                alt="dwyl logo"
+              />
+            </a>
+          <% end %>
+        </div>
+      </div>
+
+      <div class="absolute inset-y-0 right-0 flex items-center">
+        <!-- Mobile menu button-->
+        <button
+          x-on:click="openMenu = !openMenu"
+          type="button"
+          class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white 
+            focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+        >
+          <span class="sr-only">Open main menu</span>
+          <!-- Icon when menu is closed. Menu open: "hidden", Menu closed: "block" -->
+          <svg
+            class="block h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+            />
+          </svg>
+          <!-- Icon when menu is open. Menu open: "block", Menu closed: "hidden" -->
+          <svg
+            class="hidden h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+  <!-- Mobile menu, show/hide based on menu state. -->
+  <div x-show="openMenu">
+    <%= for list <- @lists do %>
+      <div class="space-y-1 px-2 pb-3 pt-2 text-right">
+        <a
+          class="text-white bg-gray-700 hover:bg-gray-600 rounded-md px-3 py-2 text-sm font-medium"
+          href={list_url(list.cid)}
+        >
+          <%= list_name(list.name) %>
+        </a>
+      </div>
+    <% end %>
+    <div class="space-y-1 px-2 pb-3 pt-2 text-right">
+      <%= link("🗄 Lists",
+        to: "/lists",
+        class:
+          "text-gray-900 bg-white hover:bg-gray-200 rounded-md px-3 py-2 text-sm font-medium"
+      ) %>
+    </div>
+    <div class="space-y-1 px-2 pb-3 pt-2 text-right">
+      <%= link("📈 Stats",
+        to: "/stats",
+        class:
+          "text-gray-900 bg-white hover:bg-gray-200 rounded-md px-3 py-2 text-sm font-medium"
+      ) %>
+    </div>
+    <div class="space-y-1 px-2 pb-3 pt-2 text-right">
+      <%= link("🏷️ Tags",
+        to: "/tags",
+        class:
+          "text-gray-900 bg-white hover:bg-gray-200 rounded-md px-3 py-2 text-sm font-medium"
+      ) %>
+    </div>
+  </div>
+</nav>
diff --git a/lib/app_web/templates/tag/index.html.heex b/lib/app_web/templates/tag/index.html.heex
index 1eb03e18..4d5d70a9 100644
--- a/lib/app_web/templates/tag/index.html.heex
+++ b/lib/app_web/templates/tag/index.html.heex
@@ -1,3 +1,4 @@
+<%= render(AppWeb.NavView, "nav.html", assigns) %>
 <.h2 class="text-center mt-3">Listing Tags</.h2>
 
 <.container>
@@ -13,7 +14,7 @@
         <.td>
           <span
             style={"background-color:#{tag.color}"}
-            class="max-w-[144px] text-white font-bold py-1 px-2 rounded-full 
+            class="max-w-[144px] text-white font-bold pyx-1 px-2 rounded-full 
             overflow-hidden text-ellipsis whitespace-nowrap inline-block"
           >
             <%= tag.text %>
diff --git a/lib/app_web/views/list_view.ex b/lib/app_web/views/list_view.ex
new file mode 100644
index 00000000..178d6b76
--- /dev/null
+++ b/lib/app_web/views/list_view.ex
@@ -0,0 +1,25 @@
+defmodule AppWeb.ListView do
+  use AppWeb, :view
+
+  def list_item_count(list) do
+    if list.seq == nil do
+      "0"
+    else
+      list.seq |> String.split(",") |> length |> to_string
+    end
+  end
+
+  @doc """
+  `title_case/1` convert "title case" string to "Title Case"
+  ref: https://en.wikipedia.org/wiki/Letter_case#Title_case
+  """
+  def title_case(name) do
+    name
+    |> String.split()
+    |> Enum.map_join(" ", &String.capitalize(&1))
+  end
+
+  def format_date(date) do
+    App.DateTimeHelper.format_date(date)
+  end
+end
diff --git a/lib/app_web/views/nav_view.ex b/lib/app_web/views/nav_view.ex
new file mode 100644
index 00000000..3cb80bb4
--- /dev/null
+++ b/lib/app_web/views/nav_view.ex
@@ -0,0 +1,16 @@
+defmodule AppWeb.NavView do
+  use AppWeb, :view
+
+  # Avoid duplicating Tailwind classes and show hot to inline a function call:
+  # defp btn(color) do
+  #   "text-6xl pb-2 w-20 rounded-lg bg-#{color}-500 hover:bg-#{color}-600"
+  # end
+  def list_url(cid) do
+    "/?list_cid=" <> cid
+  end
+
+  def list_name(name) do
+    name = if name == "all", do: "📥 All", else: name
+    AppWeb.ListView.title_case(name)
+  end
+end
diff --git a/priv/repo/seeds.exs b/priv/repo/seeds.exs
index 6600bcb3..994f7af5 100644
--- a/priv/repo/seeds.exs
+++ b/priv/repo/seeds.exs
@@ -21,29 +21,37 @@ if env == :test || env == :dev do
   Repo.delete_all(Item)
   Repo.delete_all(Tag)
 
+  # Create "all"" List!
+  {:ok, %{model: _all_list}} =
+    App.List.create_list(%{name: "all", person_id: person_id, status: 2})
+
   # Create a few items for testing on localhost
-  item0 =
-    Repo.insert!(%Item{person_id: person_id, text: "Use the MVP!", status: 3})
+  {:ok, %{model: item0}} =
+    Item.create_item(%{person_id: person_id, text: "Use the MVP!", status: 3})
 
-  item1 =
-    Repo.insert!(%Item{person_id: person_id, text: "Buy Bananas", status: 2})
+  {:ok, %{model: item1}} =
+    Item.create_item(%{person_id: person_id, text: "Buy Bananas", status: 2})
 
-  item2 =
-    Repo.insert!(%Item{
+  {:ok, %{model: item2}} =
+    Item.create_item(%{
       person_id: person_id,
       text: "Make Banana Muffins",
       status: 2
     })
 
-  item3 =
-    Repo.insert!(%Item{
+  {:ok, %{model: item3}} =
+    Item.create_item(%{
       person_id: person_id,
       text: "Eat Banana Muffin!",
       status: 2
     })
 
-  item4 =
-    Repo.insert!(%Item{person_id: person_id, text: "Go to Shops", status: 2})
+  {:ok, %{model: item4}} =
+    Item.create_item(%{
+      person_id: person_id,
+      text: "Go to Shops",
+      status: 2
+    })
 
   # Tags
   tag0 =
@@ -73,13 +81,9 @@ if env == :test || env == :dev do
   {:ok, _timer1} =
     Timer.start(%{item_id: item0.id, person_id: person_id, start: started})
 
-  # Create "all"" List!
-  {:ok, %{model: _all_list}} =
-    App.List.create_list(%{name: "all", person_id: person_id, status: 2})
-
   # Add Cid to all existing items before adding them to the "all" list:
   App.Item.update_all_items_cid()
 
   # Add items to lists:
-  # App.ListItems.add_all_items_to_all_list_for_person_id(person_id)
+  # App.List.add_all_items_to_all_list_for_person_id(person_id)
 end
diff --git a/test/app/item_test.exs b/test/app/item_test.exs
index 5c1cfdaa..c095954c 100644
--- a/test/app/item_test.exs
+++ b/test/app/item_test.exs
@@ -4,6 +4,7 @@ defmodule App.ItemTest do
 
   describe "items" do
     @valid_attrs %{text: "Buy Bananas", person_id: 1, status: 2}
+    @valid_attrs2 %{text: "Make Muffins", person_id: 1, status: 2}
     @update_attrs %{text: "some updated text", person_id: 1}
     @invalid_attrs %{text: nil}
 
@@ -25,10 +26,9 @@ defmodule App.ItemTest do
       assert {:ok, %{model: item}} =
                Item.create_item(@valid_attrs)
 
-      # dbg(item)
       assert item.text == @valid_attrs.text
 
-      inserted_item = List.first(Item.list_items())
+      inserted_item = List.first(Item.get_items())
       assert inserted_item.text == "Use the MVP!"
     end
 
@@ -54,16 +54,6 @@ defmodule App.ItemTest do
       assert {:error, %Ecto.Changeset{}} = Item.create_item(@invalid_attrs)
     end
 
-    # test "list_items/0 returns a list of items stored in the DB" do
-    #   {:ok, %{model: _item1}} =
-    #     Item.create_item(@valid_attrs)
-
-    #   {:ok, %{model: _item2}} =
-    #     Item.create_item(@valid_attrs)
-
-    #   assert Enum.count(Item.list_items()) == 2
-    # end
-
     test "update_item/2 with valid data updates the item" do
       {:ok, %{model: item}} = Item.create_item(@valid_attrs)
 
@@ -201,5 +191,26 @@ defmodule App.ItemTest do
       item_timers = Item.items_with_timers(1)
       assert length(item_timers) > 0
     end
+
+    test "Item.items_with_timers/1 returns a list filtered by list_cid" do
+      person_id = 468
+      {:ok, %{model: item1}} = Item.create_item(%{@valid_attrs | person_id: person_id})
+      {:ok, %{model: item2}} = Item.create_item(%{@valid_attrs2 | person_id: person_id})
+
+      # Create a New List:
+      list_attrs = %{name: "Todo List", person_id: person_id, status: 2}
+      assert {:ok, %{model: list}} = App.List.create_list(list_attrs)
+      assert list.name == list_attrs.name
+
+      # Add these items to the new list
+      App.List.update_list_seq(list.cid, person_id, "#{item1.cid},#{item2.cid}")
+
+      # Confirm that both items are on the list:
+      items = Item.items_with_timers(person_id, list.cid)
+      first = List.first(items)
+      last = List.last(items)
+      assert first.cid == item1.cid
+      assert last.cid == item2.cid
+    end
   end
 end
diff --git a/test/app/list_test.exs b/test/app/list_test.exs
index 2b881214..fedc0035 100644
--- a/test/app/list_test.exs
+++ b/test/app/list_test.exs
@@ -1,41 +1,43 @@
 defmodule App.ListTest do
   use App.DataCase, async: true
-  alias App.{Item, List}
+  alias App.{Item}
 
   describe "list" do
     @person_id 7
     # @valid_item_attrs %{text: "some text", person_id: @person_id, status: 2}
     @valid_attrs %{name: "My List", person_id: @person_id, status: 2}
+    @valid_item %{text: "Buy Bananas", person_id: 1, status: 2}
+    @valid_item2 %{text: "Make Muffins", person_id: 1, status: 2}
     @update_attrs %{name: "some updated text", person_id: @person_id}
     @invalid_attrs %{name: nil}
 
 
     test "get_list!/2 returns the list with given id" do
-      {:ok, %{model: list}} = List.create_list(@valid_attrs)
-      assert List.get_list!(list.id).name == list.name
+      {:ok, %{model: list}} = App.List.create_list(@valid_attrs)
+      assert App.List.get_list!(list.id).name == list.name
     end
 
     test "get_list_by_cid!/2 returns the list with given cid" do
-      {:ok, %{model: list}} = List.create_list(@valid_attrs)
-      assert List.get_list_by_cid!(list.cid).name == list.name
+      {:ok, %{model: list}} = App.List.create_list(@valid_attrs)
+      assert App.List.get_list_by_cid!(list.cid).name == list.name
     end
 
     test "create_list/1 with valid data creates a list" do
       assert {:ok, %{model: list}} =
-               List.create_list(@valid_attrs)
+               App.List.create_list(@valid_attrs)
 
       assert list.name == @valid_attrs.name
     end
 
     test "create_list/1 with invalid data returns error changeset" do
-      assert {:error, %Ecto.Changeset{}} = List.create_list(@invalid_attrs)
+      assert {:error, %Ecto.Changeset{}} = App.List.create_list(@invalid_attrs)
     end
 
     test "update_list/2 with valid data updates the list" do
-      {:ok, %{model: list}} = List.create_list(@valid_attrs)
+      {:ok, %{model: list}} = App.List.create_list(@valid_attrs)
 
       assert {:ok, %{model: list}} =
-               List.update_list(list, @update_attrs)
+               App.List.update_list(list, @update_attrs)
 
       assert list.name == "some updated text"
     end
@@ -120,4 +122,65 @@ defmodule App.ListTest do
     {:ok, %{model: list}} = App.List.update_list_seq(all_list.cid, person_id, updated_seq)
     assert list.seq == updated_seq
   end
+
+  test "remove_item_from_list/3 removes the item.cid from the list.seq" do
+    # Random Person ID
+    person_id = 386
+    all_list = App.List.get_all_list_for_person(person_id)
+
+    # Create items:
+    assert {:ok, %{model: item1}} =
+      Item.create_item(%{text: "buy land!", person_id: person_id, status: 2})
+    assert {:ok, %{model: item2}} =
+      Item.create_item(%{text: "prepare for societal collapse", person_id: person_id, status: 2})
+
+    # Add both items to the list:
+    seq = "#{item1.cid},#{item2.cid}"
+    {:ok, %{model: list}} = App.List.update_list_seq(all_list.cid, person_id, seq)
+    assert list.seq == seq
+
+    # Remove the first item from the list:
+    {:ok, %{model: list}} = App.List.remove_item_from_list(item1.cid, all_list.cid, person_id)
+
+    # Only item2 should be on the list.seq:
+    updated_seq = "#{item2.cid}"
+    # Confirm removed:
+    assert list.seq == updated_seq
+  end
+
+
+  test "Item.items_with_timers/1 returns a list filtered by list_cid" do
+    person_id = 472
+    {:ok, %{model: item1}} = Item.create_item(%{@valid_item | person_id: person_id})
+    {:ok, %{model: item2}} = Item.create_item(%{@valid_item2 | person_id: person_id})
+
+    # Create a New List:
+    lista_attrs = %{name: "Todo List", person_id: person_id, status: 2}
+    assert {:ok, %{model: lista}} = App.List.create_list(lista_attrs)
+    assert lista.name == lista_attrs.name
+
+    listb_attrs = %{name: "Delegated", person_id: person_id, status: 2}
+    assert {:ok, %{model: listb}} = App.List.create_list(listb_attrs)
+    assert listb.name == listb_attrs.name
+
+    # Add both items to List A:
+    App.List.update_list_seq(lista.cid, person_id, "#{item1.cid},#{item2.cid}")
+
+    # Confirm that both items are on List A:
+    seq = App.List.get_list_by_cid!(lista.cid) |> App.List.get_list_seq()
+    first = List.first(seq)
+    last = List.last(seq)
+    assert first == item1.cid
+    assert last == item2.cid
+
+    # Move item1 from List A to List B:
+    App.List.move_item_from_lista_to_listb(item1.cid, lista.cid, listb.cid, person_id)
+
+    seqa = App.List.get_list_by_cid!(lista.cid) |> App.List.get_list_seq()
+    assert not Enum.member?(seqa, item1.cid)
+
+    seqb = App.List.get_list_by_cid!(listb.cid) |> App.List.get_list_seq()
+    assert Enum.member?(seqb, item1.cid)
+  end
+
 end
diff --git a/test/app/timer_test.exs b/test/app/timer_test.exs
index b842bdf0..917be8b5 100644
--- a/test/app/timer_test.exs
+++ b/test/app/timer_test.exs
@@ -49,7 +49,7 @@ defmodule App.TimerTest do
       {:ok, timer} =
         Timer.start(%{item_id: item.id, person_id: 1, start: seven_seconds_ago})
 
-      #  stop the timer based on it's item_id
+      #  stop the timer based on it's item_id
       Timer.stop_timer_for_item_id(item.id)
 
       stopped_timer = Timer.get_timer!(timer.id)
diff --git a/test/app_web/controllers/list_controller_test.exs b/test/app_web/controllers/list_controller_test.exs
new file mode 100644
index 00000000..0c330801
--- /dev/null
+++ b/test/app_web/controllers/list_controller_test.exs
@@ -0,0 +1,110 @@
+defmodule AppWeb.ListControllerTest do
+  use AppWeb.ConnCase
+
+  alias App.{List}
+
+  @create_attrs %{name: "list1", person_id: 1}
+  @update_attrs %{name: "list1 updated"}
+  @invalid_attrs %{name: nil, person_id: 1}
+
+  def fixture(:list) do
+    {:ok, %{model: list}} = List.create_list(@create_attrs)
+    list
+  end
+
+  describe "index" do
+    test "lists all lists", %{conn: conn} do
+      conn = get(conn, Routes.list_path(conn, :index))
+      assert html_response(conn, 200) =~ "Lists"
+    end
+  end
+
+  describe "new list" do
+    test "Display new list form", %{conn: conn} do
+      conn = get(conn, Routes.list_path(conn, :new))
+      assert html_response(conn, 200) =~ "New"
+    end
+  end
+
+  describe "create list" do
+    test "redirects to index when data is valid", %{conn: conn} do
+      conn =
+        conn
+        |> assign(:person, %{id: 1})
+        |> post(Routes.list_path(conn, :create), list: @create_attrs)
+
+      assert redirected_to(conn) == Routes.list_path(conn, :index)
+    end
+
+    test "renders errors when data is invalid", %{conn: conn} do
+      conn =
+        conn
+        |> assign(:person, %{id: 1})
+        |> post(Routes.list_path(conn, :create), list: @invalid_attrs)
+
+      assert html_response(conn, 200) =~ "New"
+    end
+  end
+
+  describe "edit list" do
+    setup [:create_list]
+
+    test "renders form for editing chosen list", %{conn: conn, list: list} do
+      conn =
+        conn
+        |> assign(:person, %{id: 1})
+        |> get(Routes.list_path(conn, :edit, list))
+
+      assert html_response(conn, 200) =~ "Edit"
+    end
+
+    test "redirect to index when missing permission to edit the list", %{
+      conn: conn,
+      list: list
+    } do
+      conn = get(conn, Routes.list_path(conn, :edit, list))
+
+      assert redirected_to(conn) == Routes.list_path(conn, :index)
+    end
+  end
+
+  describe "update list" do
+    setup [:create_list]
+
+    test "redirects to index when data is valid", %{conn: conn, list: list} do
+      conn =
+        conn
+        |> assign(:person, %{id: 1})
+        |> put(Routes.list_path(conn, :update, list), list: @update_attrs)
+
+      assert redirected_to(conn) == Routes.list_path(conn, :index)
+    end
+
+    test "renders errors when data is invalid", %{conn: conn, list: list} do
+      conn =
+        conn
+        |> assign(:person, %{id: 1})
+        |> put(Routes.list_path(conn, :update, list), list: @invalid_attrs)
+
+      assert html_response(conn, 200) =~ "Edit"
+    end
+  end
+
+  describe "delete list" do
+    setup [:create_list]
+
+    test "deletes chosen list", %{conn: conn, list: list} do
+      conn =
+        conn
+        |> assign(:person, %{id: 1})
+        |> delete(Routes.list_path(conn, :delete, list))
+
+      assert redirected_to(conn) == Routes.list_path(conn, :index)
+    end
+  end
+
+  defp create_list(_) do
+    list = fixture(:list)
+    %{list: list}
+  end
+end
diff --git a/test/app_web/controllers/tag_controller_test.exs b/test/app_web/controllers/tag_controller_test.exs
index f8930488..652aadb0 100644
--- a/test/app_web/controllers/tag_controller_test.exs
+++ b/test/app_web/controllers/tag_controller_test.exs
@@ -27,17 +27,6 @@ defmodule AppWeb.TagControllerTest do
     end
   end
 
-  describe "new tag" do
-    test "renders form for creating a tag", %{conn: conn} do
-      conn =
-        conn
-        |> assign(:jwt, AuthPlug.Token.generate_jwt!(%{id: 1, picture: ""}))
-        |> get(Routes.tag_path(conn, :new))
-
-      assert html_response(conn, 200) =~ "New Tag"
-    end
-  end
-
   describe "create tag" do
     test "redirects to show when data is valid", %{conn: conn} do
       conn =
@@ -60,6 +49,17 @@ defmodule AppWeb.TagControllerTest do
     end
   end
 
+  describe "new tag" do
+    test "renders form for creating a tag", %{conn: conn} do
+      conn =
+        conn
+        |> assign(:jwt, AuthPlug.Token.generate_jwt!(%{id: 1, picture: ""}))
+        |> get(Routes.tag_path(conn, :new))
+
+      assert html_response(conn, 200) =~ "New Tag"
+    end
+  end
+
   describe "edit tag" do
     setup [:create_tag]
 
diff --git a/test/app_web/live/app_live_test.exs b/test/app_web/live/app_live_test.exs
index 3986622b..6d12caac 100644
--- a/test/app_web/live/app_live_test.exs
+++ b/test/app_web/live/app_live_test.exs
@@ -848,12 +848,12 @@ defmodule AppWeb.AppLiveTest do
       |> length() > 0
 
     # Dragover and remove highlight
-    render_hook(view, "dragoverItem", %{
-      "currentItemId" => item2.id,
-      "selectedItemId" => item.id
+    render_hook(view, "dragover_item", %{
+      "current_item_id" => item2.id,
+      "selected_item_id" => item.id
     })
 
-    assert render_hook(view, "removeHighlight", %{"id" => item.id})
+    assert render_hook(view, "remove_highlight", %{"id" => item.id})
 
     # reorder items:
     render_hook(view, "update_list_seq", %{
@@ -872,7 +872,6 @@ defmodule AppWeb.AppLiveTest do
     # Update list_item.seq:
     {:ok, %{model: list}} = App.List.update_list_seq(list.cid, person_id, "#{item.cid},#{item3.cid},#{item2.cid}")
     new_seq = list.seq |> String.split(",")
-    # dbg(new_seq)
     pos2 = Enum.find_index(new_seq, fn x -> x == "#{item2.cid}" end)
     pos3 = Enum.find_index(new_seq, fn x -> x == "#{item3.cid}" end)
     assert pos3 < pos2
@@ -903,7 +902,7 @@ defmodule AppWeb.AppLiveTest do
 
     assert render_submit(view, :create, %{text: "tag enter pressed"})
 
-    last_item_inserted = Item.list_person_items(0) |> List.last()
+    last_item_inserted = Item.get_person_items(0) |> List.last()
 
     assert last_item_inserted.tags == []
   end
diff --git a/test/app_web/live/stats_live_test.exs b/test/app_web/live/stats_live_test.exs
index d418219c..7fbdcc57 100644
--- a/test/app_web/live/stats_live_test.exs
+++ b/test/app_web/live/stats_live_test.exs
@@ -158,6 +158,6 @@ defmodule AppWeb.StatsLiveTest do
     [first_element | _] = Floki.find(result, "td[data-test-id=person_id]")
 
     # assert first_element |> Floki.text() =~ "1"
-    first_element |> Floki.text() |> dbg()
+    first_element |> Floki.text()
   end
 end