diff --git a/etc/docs/lib/docs_web/live/page_live/components/content_component.ex b/etc/docs/lib/docs_web/live/page_live/components/content_component.ex
index 6bdf4ed251..62995ed8fa 100644
--- a/etc/docs/lib/docs_web/live/page_live/components/content_component.ex
+++ b/etc/docs/lib/docs_web/live/page_live/components/content_component.ex
@@ -2,20 +2,20 @@ defmodule DocsWeb.PageLive.ContentComponent do
   use DocsWeb, :live_component
 
   @impl true
-  def update(%{content: content, active_tab: active_tab}, socket) do
-    {:ok, assign(socket, content: content, active_tab: active_tab)}
+  def update(%{content: content, active_tab: active_tab, active_page: active_page}, socket) do
+    {:ok, assign(socket, content: content, active_tab: active_tab, active_page: active_page)}
   end
 
   @impl true
   def render(assigns) when assigns.active_tab == :fx or assigns.active_tab == :synths do
-    #test = Map.take(assigns.content, [:doc])
     Phoenix.View.render(DocsWeb.PageView, "components/synths_or_fx_component.html", assigns)
   end
 
-  # TODO: Store active_page per tab? this would allow us to check whether a page has been chosen on each tab,
-  # and if not, render a default. (Also to render the last active page per tab when switching between them).
-  @impl true
-  def render(assigns) when assigns.active_tab == nil do
-    Phoenix.View.render(DocsWeb.PageView, "components/welcome_component.html", %{})
+  def render(assigns) when assigns.active_tab == :samples do
+    Phoenix.View.render(DocsWeb.PageView, "components/samples_component.html", assigns)
+  end
+
+  def render(assigns) when assigns.active_tab == :lang do
+    Phoenix.View.render(DocsWeb.PageView, "components/lang_component.html", assigns)
   end
 end
diff --git a/etc/docs/lib/docs_web/live/page_live/components/side_nav_component.ex b/etc/docs/lib/docs_web/live/page_live/components/side_nav_component.ex
index 892b068178..abd1d84f61 100644
--- a/etc/docs/lib/docs_web/live/page_live/components/side_nav_component.ex
+++ b/etc/docs/lib/docs_web/live/page_live/components/side_nav_component.ex
@@ -9,10 +9,10 @@ defmodule DocsWeb.PageLive.SideNavComponent do
   end
 
   @impl true
-  def update(%{active_page: active_page, active_tab: active_tab, active_pages: active_pages, page_titles: page_titles}, socket) do
+  def update(%{active_page: active_page, active_tab: active_tab, active_pages: active_pages, page_keys: page_keys}, socket) do
     case active_tab do
-      nil -> {:ok, assign(socket, active_pages: active_pages, page_titles: page_titles)}
-      _ -> {:ok, assign(socket, active_page: active_page, active_pages: %{active_pages | active_tab => active_page}, page_titles: page_titles)}
+      nil -> {:ok, assign(socket, active_pages: active_pages, page_keys: page_keys)}
+      _ -> {:ok, assign(socket, active_page: active_page, active_pages: %{active_pages | active_tab => active_page}, page_keys: page_keys)}
     end
   end
 end
diff --git a/etc/docs/lib/docs_web/live/page_live/page_live.ex b/etc/docs/lib/docs_web/live/page_live/page_live.ex
index 54fae863d6..6780c852b0 100644
--- a/etc/docs/lib/docs_web/live/page_live/page_live.ex
+++ b/etc/docs/lib/docs_web/live/page_live/page_live.ex
@@ -6,9 +6,11 @@ defmodule DocsWeb.PageLive do
   @impl true
   def mount(_params, %{"metadata" => metadata}, socket) do
     metadata = Enum.reject(metadata, fn {k, _v} -> k == :_build end)
-    page_titles = Enum.into(metadata, %{}, fn {k, v} -> {k, Enum.flat_map(v, fn x -> Map.keys(x) end)} end)
+    page_keys = Enum.into(metadata, %{}, fn {k, v} -> {k, Enum.flat_map(v, fn x -> Map.keys(x) end)} end)
     active_pages = Enum.into(metadata, %{}, fn {k, v} -> {k, hd(Enum.flat_map(v, fn x -> Map.keys(x) end))} end)
-    {:ok, assign(socket, metadata: metadata, active_tab: :fx, active_page: :bitcrusher, active_pages: active_pages, page_titles: page_titles[:fx], content: nil)}
+    content = Enum.find(metadata[:synths], fn p -> Enum.member?(Map.keys(p), :dull_bell)  end)
+    %{dull_bell:  data} = content
+    {:ok, assign(socket, metadata: metadata, active_tab: :synths, active_page: :dull_bell, active_pages: active_pages, page_keys: page_keys[:synths], content: data)}
   end
 
   @impl true
@@ -19,21 +21,21 @@ defmodule DocsWeb.PageLive do
   @impl true
   def handle_event("change_tab", %{"active_tab" => active_tab}, socket) do
     active_tab = String.to_atom(active_tab)
-    page_titles = socket.assigns.metadata[active_tab]
-    |> Enum.flat_map(&Map.keys/1)
-    |> Enum.uniq
-
-    {:noreply, assign(socket, active_tab: active_tab, active_pages: socket.assigns.active_pages, page_titles: page_titles)}
+    page_keys = Enum.into(socket.assigns.metadata, %{}, fn {k, v} -> {k, Enum.flat_map(v, fn x -> Map.keys(x) end)} end)[active_tab]
+    active_page = socket.assigns.active_pages[active_tab]
+    pages = socket.assigns.metadata[active_tab]
+    content = Enum.find(pages, fn p -> Enum.member?(Map.keys(p), active_page)  end)
+    %{^active_page => data} = content
+    {:noreply, assign(socket, active_tab: active_tab, active_pages: socket.assigns.active_pages, page_keys: page_keys, content: data)}
   end
 
   @impl true
   def handle_event("change_page", %{"active_page" => active_page}, socket) do
     active_tab = socket.assigns.active_tab
     pages = socket.assigns.metadata[active_tab]
-    page = String.to_atom(active_page)
-    content = Enum.find(pages, fn p -> Enum.member?(Map.keys(p), page)  end)
-    %{^page => data} = content
-    {:noreply, assign(socket, active_pages: %{socket.assigns.active_pages | active_tab => page}, content: data)}
+    active_page = String.to_atom(active_page)
+    content = Enum.find(pages, fn p -> Enum.member?(Map.keys(p), active_page)  end)
+    %{^active_page => data} = content
+    {:noreply, assign(socket, active_pages: %{socket.assigns.active_pages | active_tab => active_page}, content: data)}
   end
-
 end
diff --git a/etc/docs/lib/docs_web/templates/page/components/lang_component.html.heex b/etc/docs/lib/docs_web/templates/page/components/lang_component.html.heex
index 9b90823cc8..39319007be 100644
--- a/etc/docs/lib/docs_web/templates/page/components/lang_component.html.heex
+++ b/etc/docs/lib/docs_web/templates/page/components/lang_component.html.heex
@@ -1 +1 @@
-<h1><%= inspect(@content) %></h1>
+<h1><%= @content[:summary] %></h1>
diff --git a/etc/docs/lib/docs_web/templates/page/components/navbar_component.html.heex b/etc/docs/lib/docs_web/templates/page/components/navbar_component.html.heex
index 248f79cc33..7398cbf2b3 100644
--- a/etc/docs/lib/docs_web/templates/page/components/navbar_component.html.heex
+++ b/etc/docs/lib/docs_web/templates/page/components/navbar_component.html.heex
@@ -1,19 +1,21 @@
 <ul class="nav nav-pills justify-content-center">
   <li class="nav-item">
     <button
-      class={is_active(@active_tab, :tutorial)}
+      class={["disabled", is_active(@active_tab, :tutorial)]}
       phx-click="change_tab"
 	    phx-value-active_tab={:tutorial}
       aria-current="page"
+      disabled
       >
       Tutorial
     </button>
   </li>
   <li class="nav-item">
     <button
-      class={is_active(@active_tab, :examples)}
+      class={["disabled", is_active(@active_tab, :examples)]}
       phx-click="change_tab"
 	    phx-value-active_tab={:examples}
+      disabled
       >
       Examples
     </button>
diff --git a/etc/docs/lib/docs_web/templates/page/components/samples_component.html.heex b/etc/docs/lib/docs_web/templates/page/components/samples_component.html.heex
index 9b90823cc8..3d8c229bc5 100644
--- a/etc/docs/lib/docs_web/templates/page/components/samples_component.html.heex
+++ b/etc/docs/lib/docs_web/templates/page/components/samples_component.html.heex
@@ -1 +1 @@
-<h1><%= inspect(@content) %></h1>
+<h1><%= String.capitalize(Atom.to_string(@active_page)) %> sounds</h1>
diff --git a/etc/docs/lib/docs_web/templates/page/components/side_nav_component.html.heex b/etc/docs/lib/docs_web/templates/page/components/side_nav_component.html.heex
index b1f3d7c1b2..e5faa77e45 100644
--- a/etc/docs/lib/docs_web/templates/page/components/side_nav_component.html.heex
+++ b/etc/docs/lib/docs_web/templates/page/components/side_nav_component.html.heex
@@ -1,5 +1,5 @@
 <ul class="nav nav-pills flex-column">
-  <%= for title <- @page_titles do %>
+  <%= for title <- @page_keys do %>
     <li class="nav-item">
       <button
         class={is_active(@active_page, title)}
diff --git a/etc/docs/lib/docs_web/templates/page/components/synths_or_fx_component.html.heex b/etc/docs/lib/docs_web/templates/page/components/synths_or_fx_component.html.heex
index 9b90823cc8..5892b8f0ba 100644
--- a/etc/docs/lib/docs_web/templates/page/components/synths_or_fx_component.html.heex
+++ b/etc/docs/lib/docs_web/templates/page/components/synths_or_fx_component.html.heex
@@ -1 +1 @@
-<h1><%= inspect(@content) %></h1>
+<h1><%= @content.name %></h1>
diff --git a/etc/docs/lib/docs_web/templates/page/page.html.heex b/etc/docs/lib/docs_web/templates/page/page.html.heex
index f3ba878ac7..936661ac08 100644
--- a/etc/docs/lib/docs_web/templates/page/page.html.heex
+++ b/etc/docs/lib/docs_web/templates/page/page.html.heex
@@ -2,10 +2,10 @@
 <div class="container-fluid">
   <div class="row">
     <div class="col-2">
-      <%= live_component(@socket, DocsWeb.PageLive.SideNavComponent, active_tab: @active_tab, active_pages: @active_pages, active_page: @active_pages[@active_tab], page_titles: @page_titles) %>
+      <%= live_component(@socket, DocsWeb.PageLive.SideNavComponent, active_tab: @active_tab, active_pages: @active_pages, active_page: @active_pages[@active_tab], page_keys: @page_keys) %>
     </div>
     <div class="col-10">
-      <%= live_component(@socket, DocsWeb.PageLive.ContentComponent, active_tab: @active_tab, content: @content) %>
+      <%= live_component(@socket, DocsWeb.PageLive.ContentComponent, active_tab: @active_tab, active_page: @active_pages[@active_tab], content: @content) %>
     </div>
   </div>
 </div>