diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..015028c
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,2 @@
+FRONTEND_URL=
+BACKEND_URL=
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 5ef6a52..7b8da95 100644
--- a/.gitignore
+++ b/.gitignore
@@ -32,6 +32,7 @@ yarn-error.log*
 
 # env files (can opt-in for committing if needed)
 .env*
+!.env.example
 
 # vercel
 .vercel
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index 1c1b42c..19eeb69 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -1,15 +1,61 @@
 import Hyperlink from "@/components/ui/Hyperlink";
+import { getServices } from "@/lib/api/helpers/services";
+import { Service } from "@/lib/api/types";
 
-export default function Header() {
+const defaultServices: Service[] = [
+  {
+    id: null,
+    title: "Git Repos",
+    description: null,
+    priority: 1,
+    link: "dagemark.se/git",
+  },
+  {
+    id: null,
+    title: "Nextcloud Drive",
+    description: null,
+    priority: 3,
+    link: "dagemark.se/drive",
+  },
+  {
+    id: null,
+    title: "Game Servers",
+    description: null,
+    priority: 4,
+    link: "gserver.dagemark.se",
+  },
+  {
+    id: null,
+    title: "Immich Album",
+    description: null,
+    priority: 5,
+    link: "album.dagemark.se",
+  },
+  {
+    id: null,
+    title: "Jellyfin Streaming",
+    description: null,
+    priority: 2,
+    link: "streaming.dagemark.se",
+  },
+];
+
+export default async function Header() {
+  let services = await getServices();
+  if (services.length < 1) {
+    services = defaultServices;
+  }
   return (
-      <header className="w-full h-full bg-slate-500 dark:bg-slate-900 flex items-center justify-between">
-          <nav className="flex items-center justify-around w-full h-full px-6 py-4">
-              <Hyperlink name={"Git Repos"} link={"dagemark.se/git"} />
-              <Hyperlink name={"Nextcloud Drive"} link={"dagemark.se/drive"} />
-              <Hyperlink name={"Game Servers"} link={"gserver.dagemark.se"} />
-              <Hyperlink name={"Immich Album"} link={"album.dagemark.se"} />
-              <Hyperlink name={"Jellyfin Streaming"} link={"streaming.dagemark.se"} />
-          </nav>
-      </header>
-    )
-}
\ No newline at end of file
+    <header className="w-full h-full bg-slate-500 dark:bg-slate-900 flex items-center justify-between">
+      <nav className="flex items-center justify-around w-full h-full px-6 py-4">
+        {services.map((service) => (
+          <Hyperlink
+            key={service.priority}
+            name={service.title}
+            link={service.link}
+          />
+        ))}
+      </nav>
+    </header>
+  );
+}