diff --git a/apps/website/src/lib/download-helper.ts b/apps/website/src/lib/download-helper.ts
index 0f9642876..f2c8bc166 100644
--- a/apps/website/src/lib/download-helper.ts
+++ b/apps/website/src/lib/download-helper.ts
@@ -1,10 +1,10 @@
 import rootPackageJson from '../../../../package.json';
 
-type App = "desktop";
+type App = "desktop" | "server";
 
 export type Architecture = 'x64' | 'arm64';
 
-export type Platform = 'mac' | 'windows' | 'linux';
+export type Platform = 'macos' | 'windows' | 'linux';
 
 let version = rootPackageJson.version;
 
@@ -12,10 +12,15 @@ export function buildDesktopDownloadUrl(platform: Platform, format: string, arch
     return `https://github.com/TriliumNext/Notes/releases/download/${version}/TriliumNextNotes-${version}-${platform}-${architecture}.${format}`;
 }
 
-interface DownloadMatrixEntry {
-    title: Record<Architecture, string>;
-    description: Record<Architecture, string>;
-    downloads: Record<string, { recommended?: boolean; name: string }>;
+export interface DownloadInfo {
+    recommended?: boolean;
+    name: string;
+}
+
+export interface DownloadMatrixEntry {
+    title: Record<Architecture, string> | string;
+    description: Record<Architecture, string> | string;
+    downloads: Record<string, DownloadInfo>;
 }
 
 type DownloadMatrix = Record<App, Record<Platform, DownloadMatrixEntry>>;
@@ -86,6 +91,24 @@ export const downloadMatrix: DownloadMatrix = {
                 }
             }
         }
+    },
+    server: {
+        linux: {
+            title: "Self-hosted (Linux)",
+            description: "Deploy Trilium Notes on your own server or VPS, compatible with most Linux distributions.",
+            downloads: {
+                docker: {
+                    recommended: true,
+                    name: "View on Docker Hub"
+                },
+                tarX64: {
+                    name: "x86 (.tar.xz)"
+                },
+                tarArm64: {
+                    name: "ARM (.tar.xz)"
+                },
+            }
+        }
     }
 };
 
diff --git a/apps/website/src/routes/download/+page.svelte b/apps/website/src/routes/download/+page.svelte
index 4cf09f2a8..f0d1dd578 100644
--- a/apps/website/src/routes/download/+page.svelte
+++ b/apps/website/src/routes/download/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { Platform } from "$lib/download-helper";
     import { buildDesktopDownloadUrl, downloadMatrix, getArchitecture } from "$lib/download-helper";
+    import DownloadCard from "./download-card.svelte";
 
     let architectures = ["x64", "arm64"] as const;
     let architecture = getArchitecture();
@@ -27,66 +28,28 @@
     
         <div class="grid md:grid-cols-3 gap-10">
             {#each Object.entries(downloadMatrix.desktop) as [platformId, platform]}
-            {@const recommended = Object.entries(platform.downloads).find((e) => e[1].recommended)}
-            {@const textColor = (platformId === "windows" ? "text-blue-600" : platformId === "linux" ? "text-violet-600" : "text-gray-800")}
-            {@const bgColor = (platformId === "windows" ? "bg-blue-600" : platformId === "linux" ? "bg-violet-600" : "bg-gray-800")}
-            {@const hoverColor = (platformId === "windows" ? "hover:bg-blue-700" : platformId === "linux" ? "hover:bg-violet-700" : "hover:bg-gray-900")}
-            
-            <div class="bg-white border border-gray-200 rounded-2xl shadow-lg p-8 flex flex-col items-start">
-                <h3 class="text-2xl font-semibold {textColor} mb-2">{platform.title[architecture]}</h3>
-                <p class="text-gray-700 mb-12">{platform.description[architecture]}</p>                
-                <div class="space-y-2 mt-auto w-full">
-                    {#if recommended}
-                        <a href={buildDesktopDownloadUrl(platformId as Platform, recommended[0], architecture)} class="mt-auto block text-center {bgColor} {hoverColor} text-white font-medium py-2 px-5 rounded-full shadow transition">
-                            Download {recommended[1].name}
-                        </a>
-                    {/if}
-                    <div class="flex justify-center gap-4 text-sm {textColor} mt-2">
-                        {#each Object.entries(platform.downloads).filter((e) => !e[1].recommended) as [format, download]}
-                            <a href={buildDesktopDownloadUrl(platformId as Platform, format, architecture)} class="hover:underline block">
-                                {download.name}
-                            </a>
-                        {/each}
-                    </div>
-                </div>
-            </div>
+                {@const textColor = (platformId === "windows" ? "text-blue-600" : platformId === "linux" ? "text-violet-600" : "text-gray-800")}
+                {@const bgColor = (platformId === "windows" ? "bg-blue-600" : platformId === "linux" ? "bg-violet-600" : "bg-gray-800")}
+                {@const hoverColor = (platformId === "windows" ? "hover:bg-blue-700" : platformId === "linux" ? "hover:bg-violet-700" : "hover:bg-gray-900")}
+                <DownloadCard 
+                    {textColor} {bgColor} {hoverColor}
+                    {platform} {architecture} platformId={platformId as Platform} />
             {/each}
         </div>
     </section>
 
-    <section class="mt-20 max-w-5xl mx-auto px-4">
-        <h2 class="text-3xl font-bold text-center mb-12">Server</h2>
-        <div class="grid md:grid-cols-2 gap-10 justify-center">
-            <div class="bg-white rounded-xl shadow overflow-hidden">
-                <div class="p-6">
-                    <h3 class="text-xl font-semibold mb-2">Docker (recommended)</h3>
-                    <div class="flex flex-wrap gap-2">
-                        <a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="#">
-                            DockerHub
-                        </a>
+    <section class="max-w-6xl mx-auto px-4 mt-10">
+        <h2 class="text-3xl font-bold text-center text-gray-900 mb-8">Set up a server for access on multiple devices</h2>
 
-                        <a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="https://github.com/TriliumNext/Notes/pkgs/container/notes">
-                            ghcr.io
-                        </a>                    
-                    </div>
-
-                    <a href="#" class="block mt-4">See documentation</a>
-                </div>            
-            </div>
-
-            <div class="bg-white rounded-xl shadow overflow-hidden">
-                <div class="p-6">
-                    <h3 class="text-xl font-semibold mb-2">Linux</h3>
-                    <div class="flex flex-wrap gap-y-2">
-                        <a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="#">
-                            Portable for x86 devices (.tar.xz)
-                        </a>
-                        <a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="#">
-                            Portable for ARM devices (.tar.xz)
-                        </a>
-                    </div>
-                </div>
-            </div>
+        <div class="grid md:grid-cols-3 gap-10">
+            {#each Object.entries(downloadMatrix.server) as [platformId, platform]}
+                {@const textColor = "text-violet-600"}
+                {@const bgColor = "bg-violet-600"}
+                {@const hoverColor = "hover:bg-violet-700"}
+                <DownloadCard 
+                    {textColor} {bgColor} {hoverColor}
+                    {platform} {architecture} platformId={platformId as Platform} />
+            {/each}
         </div>
     </section>
 
diff --git a/apps/website/src/routes/download/download-card.svelte b/apps/website/src/routes/download/download-card.svelte
new file mode 100644
index 000000000..71af554d0
--- /dev/null
+++ b/apps/website/src/routes/download/download-card.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { buildDesktopDownloadUrl, type Architecture, type DownloadMatrixEntry, type Platform } from "$lib/download-helper";
+
+    export let platformId: Platform;
+    export let platform: DownloadMatrixEntry;
+    export let textColor: string;
+    export let bgColor: string;
+    export let hoverColor: string;
+    export let architecture: Architecture | null = null;
+    const recommended = Object.entries(platform.downloads).find((e) => e[1].recommended);
+</script>
+
+<div class="bg-white border border-gray-200 rounded-2xl shadow-lg p-8 flex flex-col items-start">
+    <h3 class="text-2xl font-semibold {textColor} mb-2">{typeof platform.title === "object" ? platform.title[architecture] : platform.title}</h3>
+    <p class="text-gray-700 mb-12">{typeof platform.title === "object" ? platform.description[architecture] : platform.description}</p>                
+    <div class="space-y-2 mt-auto w-full">
+        {#if recommended}
+            <a href={buildDesktopDownloadUrl(platformId as Platform, recommended[0], architecture)} class="mt-auto block text-center {bgColor} {hoverColor} text-white font-medium py-2 px-5 rounded-full shadow transition">
+                Download {recommended[1].name}
+            </a>
+        {/if}
+        <div class="flex justify-center gap-4 text-sm {textColor} mt-2">
+            {#each Object.entries(platform.downloads).filter((e) => !e[1].recommended) as [format, download]}
+                <a href={buildDesktopDownloadUrl(platformId as Platform, format, architecture)} class="hover:underline block">
+                    {download.name}
+                </a>
+            {/each}
+        </div>
+    </div>
+</div>
\ No newline at end of file