diff --git a/src/components/SchematicDownload.svelte b/src/components/SchematicDownload.svelte
new file mode 100644
index 0000000..dd31fe2
--- /dev/null
+++ b/src/components/SchematicDownload.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { schemRepo } from "@repo/schem.ts";
+
+    $: code = new URLSearchParams(window.location.search).get("code") || "";
+
+    $: downloadUrl = $schemRepo.getSchematicDownloadUrl(code);
+    $: schematic = $schemRepo.getSchematicCodeInfo(code);
+</script>
+
+{#await schematic then schem}
+    <h1 class="text-2xl font-bold">{schem.name}</h1>
+    <div class="flex justify-center">
+        <a href={downloadUrl} class="btn" target="_blank">Download</a>
+    </div>
+{:catch error}
+    <p>{error.message}</p>
+{/await}
diff --git a/src/components/repo/schem.ts b/src/components/repo/schem.ts
index 3ec6846..e83edb4 100644
--- a/src/components/repo/schem.ts
+++ b/src/components/repo/schem.ts
@@ -39,11 +39,11 @@ export class SchematicRepo {
     }
 
     public async getSchematicCodeInfo(code: string): Promise<Schematic> {
-        return await fetchWithToken(this.token, `/schem/download/${code}/info`).then(value => value.json()).then(SchematicSchema.parse);
+        return await fetchWithToken(this.token, `/download/${code}/info`).then(value => value.json()).then(SchematicSchema.parse);
     }
 
     public getSchematicDownloadUrl(code: string): string {
-        return `/schem/download/${code}`;
+        return `${import.meta.env.PUBLIC_API_SERVER}/download/${code}`;
     }
 
     public async uploadSchematic(name: string, content: string) {
diff --git a/src/pages/schematic.astro b/src/pages/schematic.astro
new file mode 100644
index 0000000..710597b
--- /dev/null
+++ b/src/pages/schematic.astro
@@ -0,0 +1,8 @@
+---
+import PageLayout from "../layouts/PageLayout.astro";
+import SchematicDownload from "@components/SchematicDownload.svelte";
+---
+
+<PageLayout title={""}>
+    <SchematicDownload client:only="svelte" />
+</PageLayout>
\ No newline at end of file