diff --git a/src/routes/_merkl.protocols.$id.tsx b/src/routes/_merkl.protocols.$id.tsx
index 67de4b57..5fc8fc64 100644
--- a/src/routes/_merkl.protocols.$id.tsx
+++ b/src/routes/_merkl.protocols.$id.tsx
@@ -1,5 +1,10 @@
-import { type LoaderFunctionArgs, type MetaFunction, json } from "@remix-run/node";
+import {
+  type LoaderFunctionArgs,
+  type MetaFunction,
+  json,
+} from "@remix-run/node";
 import { Outlet, useLoaderData } from "@remix-run/react";
+import { Button, Group, Icon } from "dappkit";
 import { ProtocolService } from "src/api/services/protocol.service";
 import Hero from "src/components/composite/Hero";
 
@@ -21,7 +26,15 @@ export default function Index() {
   return (
     <Hero
       icons={[{ src: protocol?.icon }]}
-      title={protocol?.name}
+      title={
+        <Group className="items-center">
+          {protocol?.name}
+          {/* TODO: add the link to this button */}
+          <Button look="soft" size="xl" to={protocol?.name}>
+            <Icon remix="RiArrowRightUpLine" />
+          </Button>
+        </Group>
+      }
       breadcrumbs={[
         { link: "/protocols", name: "Protocols" },
         { link: `/protocols/${protocol.name}`, name: protocol.name },
@@ -33,7 +46,8 @@ export default function Index() {
           link: `/protocols/${protocol.name?.toLowerCase()}`,
           key: crypto.randomUUID(),
         },
-      ]}>
+      ]}
+    >
       <Outlet />
     </Hero>
   );