diff --git a/app/packages/rehype-embedded-github-code/index.ts b/app/packages/rehype-embedded-github-code/index.ts
index 8cafb43..d5b965c 100644
--- a/app/packages/rehype-embedded-github-code/index.ts
+++ b/app/packages/rehype-embedded-github-code/index.ts
@@ -1,8 +1,7 @@
 import type { Root } from "hast";
 import type { Plugin, Transformer } from "unified";
-import { h } from "hastscript";
 import { visit } from "unist-util-visit";
-import { buildRequestURL, extractCodeByLines, extractRepoDataFromURL } from "./utils";
+import { buildRequestURL, createCodeBlock, extractCodeByLines, extractRepoDataFromURL } from "./utils";
 
 type Option = {
   githubPAT: string;
@@ -46,9 +45,13 @@ const rehypeEmbeddedGithubCode: Plugin<Option[], Root> = (options): Transformer<
           const codeBase64 = content.content;
           const code = extractCodeByLines(Buffer.from(codeBase64, "base64").toString("utf-8"), lines);
 
-          const newElement = h("pre", [h("code", [h(null, [{ type: "text", value: code }])])]);
+          const codeBlockElement = createCodeBlock(
+            `${repoName}/${path}${lines ? `#L${lines.startLine}-L${lines.endLine}` : ""}`,
+            String(node.properties.href),
+            code,
+          );
 
-          parent.children[index] = newElement;
+          parent.children[index] = codeBlockElement;
         } catch (error) {
           throw new Error("Failed to fetch code from GitHub", { cause: error });
         }
diff --git a/app/packages/rehype-embedded-github-code/utils.ts b/app/packages/rehype-embedded-github-code/utils.ts
index 811ac98..851aaa6 100644
--- a/app/packages/rehype-embedded-github-code/utils.ts
+++ b/app/packages/rehype-embedded-github-code/utils.ts
@@ -1,3 +1,5 @@
+import { h } from "hastscript";
+
 const extractRepoName = (urlParts: string[]): string => {
   return urlParts.slice(0, 2).join("/");
 };
@@ -56,4 +58,13 @@ const extractCodeByLines = (code: string, lines: LineNumbers | undefined): strin
   return codeLines.slice(lines.startLine - 1, lines.endLine).join("\n");
 };
 
-export { extractRepoDataFromURL, buildRequestURL, extractCodeByLines };
+const createCodeBlock = (title: string, href: string, code: string) => {
+  return h("div", [
+    h("span", { class: ["rehype-embedded-github-code-title"] }, [
+      h("a", { href: href }, [h(null, [{ type: "text", value: title }])]),
+    ]),
+    h("pre", [h("code", [h(null, [{ type: "text", value: code }])])]),
+  ]);
+};
+
+export { extractRepoDataFromURL, buildRequestURL, extractCodeByLines, createCodeBlock };
diff --git a/app/routes/_renderer.tsx b/app/routes/_renderer.tsx
index 48e181f..1626e39 100644
--- a/app/routes/_renderer.tsx
+++ b/app/routes/_renderer.tsx
@@ -46,6 +46,7 @@ export default jsxRenderer(({ children, title, description }) => {
         {/* global css */}
         <link rel="stylesheet" href="/static/markdown-styles.css" />
         <link rel="stylesheet" href="/static/rehype-attention-block.css" />
+        <link rel="stylesheet" href="/static/rehype-embedded-github-code.css" />
         <Style />
 
         <Script src="/app/client.ts" async />
diff --git a/public/static/rehype-embedded-github-code.css b/public/static/rehype-embedded-github-code.css
new file mode 100644
index 0000000..6a9f910
--- /dev/null
+++ b/public/static/rehype-embedded-github-code.css
@@ -0,0 +1,3 @@
+.rehype-embedded-github-code-title {
+  padding: 0 12px;
+}