diff --git a/lib/surface/catalogue/components/component_tree.ex b/lib/surface/catalogue/components/component_tree.ex
index b975d07..364b1d8 100644
--- a/lib/surface/catalogue/components/component_tree.ex
+++ b/lib/surface/catalogue/components/component_tree.ex
@@ -3,8 +3,6 @@ defmodule Surface.Catalogue.Components.ComponentTree do
 
   use Surface.LiveComponent
 
-  alias Surface.Components.LivePatch
-
   prop selected_component, :string
   prop single_catalogue?, :boolean
   prop components, :map
@@ -29,12 +27,12 @@ defmodule Surface.Catalogue.Components.ComponentTree do
     ~F"""
     <ul class={"menu-list", "is-hidden": !show_nodes?(@parent_keys, @selected_component, @single_catalogue?)}>
       <li :if={@parent_keys == []}>
-        <LivePatch to="/catalogue/" class={"has-text-weight-bold": !@selected_component}>
+        <.link patch="/catalogue/" class={"has-text-weight-bold": !@selected_component}>
           <span class="icon">
             <i class="fa fa-home" />
           </span>
           Home
-        </LivePatch>
+        </.link>
       </li>
       {#for {key, value} <- Enum.sort(@node),
           mod_path = @parent_keys ++ [key],
@@ -42,15 +40,15 @@ defmodule Surface.Catalogue.Components.ComponentTree do
           component_type = component_type(module),
           {has_child_selected?} = {has_child_selected?(mod_path, @selected_component)}}
         <li :if={component_type != :none}>
-          <LivePatch
-            to={"/catalogue/components/#{inspect(module)}"}
+          <.link
+            patch={"/catalogue/components/#{inspect(module)}"}
             class={"has-text-weight-bold": selected_component?(mod_path, @selected_component)}
           >
             <span class="icon">
               <i class={component_icon(component_type)} />
             </span>
             {key}
-          </LivePatch>
+          </.link>
         </li>
         <li :if={value != %{} && @single_catalogue? && @parent_keys == []}>
           <a style="cursor: default;">
diff --git a/lib/surface/catalogue/live/page_live.ex b/lib/surface/catalogue/live/page_live.ex
index 04f5adc..e984e27 100644
--- a/lib/surface/catalogue/live/page_live.ex
+++ b/lib/surface/catalogue/live/page_live.ex
@@ -3,7 +3,6 @@ defmodule Surface.Catalogue.PageLive do
 
   alias Surface.Catalogue.{Playground, Util, ExampleLive, PlaygroundLive, Markdown}
   alias Surface.Catalogue.Components.{ComponentInfo, ComponentTree, PlaygroundTools}
-  alias Surface.Components.LivePatch
 
   @playground_default_height "160px"
   @playground_default_width "100%"
@@ -99,22 +98,22 @@ defmodule Surface.Catalogue.PageLive do
               <div class="component tabs is-medium">
                 <ul>
                   <li class={"is-active": @action == "docs"}>
-                    <LivePatch to={path_to(__MODULE__, @component_name, :docs)}>
+                    <.link patch={path_to(__MODULE__, @component_name, :docs)}>
                       <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true" /></span>
                       <span>Docs &amp; API</span>
-                    </LivePatch>
+                    </.link>
                   </li>
                   <li :if={@has_example?} class={"is-active": @action == "example"}>
-                    <LivePatch to={path_to(__MODULE__, @component_name, :example)}>
+                    <.link patch={path_to(__MODULE__, @component_name, :example)}>
                       <span class="icon is-small"><i class="fas fa-image" aria-hidden="true" /></span>
                       <span>Examples</span>
-                    </LivePatch>
+                    </.link>
                   </li>
                   <li :if={@has_playground?} class={"is-active": @action == "playground"}>
-                    <LivePatch to={path_to(__MODULE__, @component_name, :playground)}>
+                    <.link patch={path_to(__MODULE__, @component_name, :playground)}>
                       <span class="icon is-small"><i class="far fa-play-circle" aria-hidden="true" /></span>
                       <span id="playground-tab-label" phx-update="ignore">Playground</span>
-                    </LivePatch>
+                    </.link>
                   </li>
                 </ul>
               </div>