diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index a8ef8ee..62bba1b 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -27,7 +27,7 @@ const Sidebar = () => (
       <ul className="flex flex-col gap-2 py-2">
         { [
             { link: '/#ueber-mich', label: 'Über mich' },
-            { link: '/lebenslauf', label: 'Lebenslauf' },
+            { link: '/lebenslauf', label: 'Berufserfahrung' },
             { link: '/projekte', label: 'Projekte' },
             { link: '/kontakt', label: 'Kontakt' },
           ].map((item) => (
diff --git a/app/components/career/CompanyLink.tsx b/app/components/career/CompanyLink.tsx
index 093628d..2f6366d 100644
--- a/app/components/career/CompanyLink.tsx
+++ b/app/components/career/CompanyLink.tsx
@@ -1,5 +1,3 @@
-import Link from 'next/link';
-
 import { Company } from '@/models/career';
 
 const CompanyLink = ({ company }: { company?: Company }) => {
diff --git a/app/components/icons/Banknotes.tsx b/app/components/icons/Banknotes.tsx
new file mode 100644
index 0000000..c4eb8e7
--- /dev/null
+++ b/app/components/icons/Banknotes.tsx
@@ -0,0 +1,9 @@
+import Icon, { IconProps } from './Icon';
+
+const Banknotes = (props: IconProps) => (
+  <Icon { ...props }>
+    <path id="banknotes" d="M20.46313,25.6745l-13.20434,4.806a.987.987,0,0,1-.3418.061,1.0001,1.0001,0,0,1-.93945-.65869l-.72382-1.98864c.0163.00024.03168.00427.048.00427a3.03431,3.03431,0,0,0,.52344-.0459l1.44842-.25537.241.66211L11.2702,26.8924,20.36,25.28961A.2.2,0,0,1,20.46313,25.6745Zm-14.98559.2088L19.57733,23.397A.2.2,0,0,0,19.5426,23h-9.232l-4.19538.73975L5.98474,23H4c-.016,0-.03094-.00452-.04694-.00476l.36628,2.077a.99923.99923,0,0,0,.98339.82617A1.01512,1.01512,0,0,0,5.47754,25.8833ZM19,13.5A3.5,3.5,0,1,1,15.5,10,3.5,3.5,0,0,1,19,13.5Zm-2,0A1.5,1.5,0,1,0,15.5,15,1.50172,1.50172,0,0,0,17,13.5ZM28,6.87274V20.12726A.87275.87275,0,0,1,27.12726,21H3.87274A.87275.87275,0,0,1,3,20.12726V6.87274A.87275.87275,0,0,1,3.87274,6H27.12726A.87275.87275,0,0,1,28,6.87274ZM5,9.99072A1.78826,1.78826,0,0,0,5.18182,10a2.00547,2.00547,0,0,0,.491-.06323A1.79129,1.79129,0,0,0,6.93646,8.67389,1.93161,1.93161,0,0,0,6.991,8H5Zm1.93677,8.33637a1.79132,1.79132,0,0,0-1.26288-1.26355A2.00467,2.00467,0,0,0,5.18188,17,1.78856,1.78856,0,0,0,5,17.00928V19H6.991A1.93426,1.93426,0,0,0,6.93677,18.32709ZM26,17.00928A1.78826,1.78826,0,0,0,25.81818,17a2.00547,2.00547,0,0,0-.491.06323,1.79129,1.79129,0,0,0-1.26361,1.26288A1.93161,1.93161,0,0,0,24.009,19H26Zm0-5.02362c-.06116.00293-.11993.01434-.18182.01434a3.99283,3.99283,0,0,1-.98432-.12506A3.79173,3.79173,0,0,1,22.12439,9.1637,3.89006,3.89006,0,0,1,22.02515,8H8.97473a3.889,3.889,0,0,1-.09979,1.16614A3.79173,3.79173,0,0,1,6.1637,11.87561,3.99492,3.99492,0,0,1,5.18182,12c-.06189,0-.12066-.01141-.18182-.01434v3.02868C5.06116,15.01141,5.11993,15,5.18188,15a3.99236,3.99236,0,0,1,.98426.12506A3.79173,3.79173,0,0,1,8.87561,17.8363,3.89006,3.89006,0,0,1,8.97485,19H22.02527a3.889,3.889,0,0,1,.09979-1.16614,3.79173,3.79173,0,0,1,2.71124-2.70947A3.99492,3.99492,0,0,1,25.81818,15c.06189,0,.12066.01141.18182.01434ZM26,8H24.009a1.93426,1.93426,0,0,0,.0542.67291,1.79132,1.79132,0,0,0,1.26288,1.26355A2.003,2.003,0,0,0,25.81818,10,1.78568,1.78568,0,0,0,26,9.99078Z"/>
+  </Icon>
+)
+
+export default Banknotes;
diff --git a/app/components/icons/BuildingsCity.tsx b/app/components/icons/BuildingsCity.tsx
new file mode 100644
index 0000000..973ee57
--- /dev/null
+++ b/app/components/icons/BuildingsCity.tsx
@@ -0,0 +1,11 @@
+import { SVGProps } from 'react';
+
+import Icon from './Icon';
+
+const BuildingsCity = (props: SVGProps<SVGSVGElement>) => (
+  <Icon { ...props }>
+    <path id="buildings-city" d="M21,4H11A2.00006,2.00006,0,0,0,9,6V27.5a.5.5,0,0,0,.5.5H13V25a1.00291,1.00291,0,0,1,1-1h4a1.00291,1.00291,0,0,1,1,1v3h3.5a.5.5,0,0,0,.5-.5V6A2.00006,2.00006,0,0,0,21,4ZM15,20.5a.5.5,0,0,1-.5.5h-2a.5.5,0,0,1-.5-.5v-2a.5.5,0,0,1,.5-.5h2a.5.5,0,0,1,.5.5Zm0-5a.5.5,0,0,1-.5.5h-2a.5.5,0,0,1-.5-.5v-2a.5.5,0,0,1,.5-.5h2a.5.5,0,0,1,.5.5Zm0-5a.5.5,0,0,1-.5.5h-2a.5.5,0,0,1-.5-.5v-2a.5.5,0,0,1,.5-.5h2a.5.5,0,0,1,.5.5Zm5,10a.5.5,0,0,1-.5.5h-2a.5.5,0,0,1-.5-.5v-2a.5.5,0,0,1,.5-.5h2a.5.5,0,0,1,.5.5Zm0-5a.5.5,0,0,1-.5.5h-2a.5.5,0,0,1-.5-.5v-2a.5.5,0,0,1,.5-.5h2a.5.5,0,0,1,.5.5Zm0-5a.5.5,0,0,1-.5.5h-2a.5.5,0,0,1-.5-.5v-2a.5.5,0,0,1,.5-.5h2a.5.5,0,0,1,.5.5ZM30,10V27.5a.5.5,0,0,1-.5.5H25V25h1.5a.5.5,0,0,0,.5-.5v-2a.5.5,0,0,0-.5-.5H25V20h1.5a.5.5,0,0,0,.5-.5v-2a.5.5,0,0,0-.5-.5H25V15h1.5a.5.5,0,0,0,.5-.5v-2a.5.5,0,0,0-.5-.5H25V8h3A2.00006,2.00006,0,0,1,30,10ZM7,28H2.5a.5.5,0,0,1-.5-.5V13a2.00006,2.00006,0,0,1,2-2H7v4H5.5a.5.5,0,0,0-.5.5v2a.5.5,0,0,0,.5.5H7v2H5.5a.5.5,0,0,0-.5.5v2a.5.5,0,0,0,.5.5H7Z"/>
+  </Icon>
+)
+
+export default BuildingsCity;
diff --git a/app/components/icons/HandHeart.tsx b/app/components/icons/HandHeart.tsx
new file mode 100644
index 0000000..61ac395
--- /dev/null
+++ b/app/components/icons/HandHeart.tsx
@@ -0,0 +1,11 @@
+import { SVGProps } from 'react';
+
+import Icon from './Icon';
+
+const HandHeart = (props: SVGProps<SVGSVGElement>) => (
+  <Icon { ...props }>
+    <path id="hand-heart" d="M15.12823,6.8363c0-2.28656,3.1164-3.923,4.78656-1.58191a.10686.10686,0,0,0,.17377.00226A2.63608,2.63608,0,0,1,24.87177,6.8363c0,1.99585-2.53718,3.58985-4.56421,5.81757a.41344.41344,0,0,1-.61512,0C17.66541,10.42615,15.12823,8.83215,15.12823,6.8363ZM5.70709,19.70709a1,1,0,0,0-1.41418,0L2,22l7,7,2.29291-2.29291a1,1,0,0,0,0-1.41418Zm24.18549-1.76373a1.49865,1.49865,0,0,0-1.94922-.83594l-3.10065,1.24024-3.86517,1.57812A1.00233,1.00233,0,0,1,20.59961,20H16a1,1,0,0,1,0-2h4.40332l1.19867-.48938A1.49495,1.49495,0,0,0,20.5,15H17l-3.32709-.86523a1.99977,1.99977,0,0,0-1.28668.17187L9.28955,15.85535a1.998,1.998,0,0,0-.519.37414L7,18l6,6h5.5a1.49157,1.49157,0,0,0,.55664-.10742l10-4A1.49946,1.49946,0,0,0,29.89258,17.94336Z"/>
+  </Icon>
+)
+
+export default HandHeart;
diff --git a/app/components/icons/Icon.tsx b/app/components/icons/Icon.tsx
index 87dfde2..3fee922 100644
--- a/app/components/icons/Icon.tsx
+++ b/app/components/icons/Icon.tsx
@@ -1,6 +1,8 @@
 import { SVGProps } from 'react';
 
-const Icon = (props: SVGProps<SVGSVGElement>) => (
+export type IconProps = SVGProps<SVGSVGElement> & { title?: string };
+
+const Icon = (props: IconProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 32 32"
@@ -11,6 +13,7 @@ const Icon = (props: SVGProps<SVGSVGElement>) => (
       className: `inline-block${props.className ? ` ${props.className}` : ''}`,
       style: { ...(props.style || {}), fill: 'currentColor' },
       children: undefined,
+      title: props.title,
     } }
   >{ props.children }</svg>
 )
diff --git a/app/components/icons/Knight.tsx b/app/components/icons/Knight.tsx
new file mode 100644
index 0000000..7a2da60
--- /dev/null
+++ b/app/components/icons/Knight.tsx
@@ -0,0 +1,9 @@
+import Icon, { IconProps } from './Icon';
+
+const Knight = (props: IconProps) => (
+  <Icon { ...props }>
+    <path id="knight" d="M26,26v2H5V26a2,2,0,0,1,2-2H24A2,2,0,0,1,26,26ZM9.9389,22H22c0-4-5.57825-5.67822-5.9624-10.38428l6.10382-.87207A.99983.99983,0,0,0,23,9.75378V8.31445a1.00005,1.00005,0,0,0-.64935-.93652L16,5V3.03809a8.799,8.799,0,0,0-7.94666,8.5747C8.05334,17,10,18,10,21,10,21.35547,9.96771,21.676,9.9389,22Z"/>
+  </Icon>
+)
+
+export default Knight;
diff --git a/app/components/projects/ProjectItem.tsx b/app/components/projects/ProjectItem.tsx
index 268f469..a9566f8 100644
--- a/app/components/projects/ProjectItem.tsx
+++ b/app/components/projects/ProjectItem.tsx
@@ -4,6 +4,7 @@ import CompanyLink from '@/app/components/career/CompanyLink';
 import TechItem from '@/app/components/career/TechItem';
 import TimeSpan from '@/app/components/career/TimeSpan';
 import ArrowRight from '@/app/components/icons/ArrowRight';
+import ProjectType from '@/app/components/projects/ProjectType';
 import { ProjectData } from '@/models/project';
 
 interface ProjectItemProps {
@@ -23,9 +24,12 @@ const ProjectItem = ({ item }: ProjectItemProps) => (
         </Link>
       </h4>
     </header>
-    { item.company ? <div className="font-thin mb-2">
-      <CompanyLink company={item.company} />
-    </div> : null }
+    { item.company
+      ? <div className="font-thin mb-2">
+        <ProjectType type={item.type} />
+        <CompanyLink company={item.company} />
+      </div>
+      : <ProjectType type={item.type} label /> }
     { item.description ? <p>{ item.description }</p> : null }
     { (!item.description && item.bullets?.length) ? (
       <ul className="bullet-list">{
diff --git a/app/components/projects/ProjectMasterData.tsx b/app/components/projects/ProjectMasterData.tsx
new file mode 100644
index 0000000..e321211
--- /dev/null
+++ b/app/components/projects/ProjectMasterData.tsx
@@ -0,0 +1,34 @@
+
+import CompanyLink from '@/app/components/career/CompanyLink';
+import TechItem from '@/app/components/career/TechItem';
+import TimeSpan from '@/app/components/career/TimeSpan';
+import ProjectType from '@/app/components/projects/ProjectType';
+import { ProjectData } from '@/models/project';
+
+const ProjectMasterData = ({ project }: { project: ProjectData }) => (
+  <section id={project.slug}>
+    <h2>{ project.title }</h2>
+
+    <p className="mb-2">{ project.description }</p>
+
+    <p className="mb-2">
+      Zeitspanne: <TimeSpan startDate={project.startDate} endDate={project.endDate} />
+    </p>
+
+    <p className="mb-2">
+      Projektart: <ProjectType type={project.type} label />
+    </p>
+
+    { project.company
+      ? <p className="mb-2">Firma: <CompanyLink company={project.company} /></p>
+      : null }
+
+    <ul className="flex flex-wrap mt-3 gap-2">
+      { (project.tech || []).map((t) => (
+        <TechItem key={t.slug} item={t} />
+      ))}
+    </ul>
+  </section>
+);
+
+export default ProjectMasterData;
diff --git a/app/components/projects/ProjectType.tsx b/app/components/projects/ProjectType.tsx
new file mode 100644
index 0000000..239390f
--- /dev/null
+++ b/app/components/projects/ProjectType.tsx
@@ -0,0 +1,35 @@
+import Banknotes from '@/app/components/icons/Banknotes';
+import BuildingsCity from '@/app/components/icons/BuildingsCity';
+import HeartEmpty from '@/app/components/icons/HeartEmpty';
+import Knight from '@/app/components/icons/Knight';
+import { ProjectType } from '@/models/project';
+
+export const projectTypeLabels = {
+  employee: 'Angestellter',
+  founder: 'Gründer',
+  freelance: 'Freiberuflich',
+  private: 'Privat',
+  volunteer: 'Ehrenamtlich',
+};
+
+const ProjectType = ({ type, label }: { type: ProjectType; label?: boolean }) => {
+  const TypeIcon = {
+    employee: BuildingsCity,
+    founder: HeartEmpty,
+    freelance: Banknotes,
+    private: Knight,
+  }[type];
+
+  if (!TypeIcon) {
+    return null;
+  }
+
+  return (
+    <>
+      <TypeIcon title={projectTypeLabels[type]} className="inline-block -mt-0.5 mr-2" />
+      { label ? projectTypeLabels[type] : null }
+    </>
+  );
+};
+
+export default ProjectType;
diff --git a/app/lebenslauf/page.tsx b/app/lebenslauf/page.tsx
index b92c616..00855f2 100644
--- a/app/lebenslauf/page.tsx
+++ b/app/lebenslauf/page.tsx
@@ -3,13 +3,13 @@ import { Metadata } from 'next';
 import CareerList from '@/app/components/career/CareerList';
 
 export const metadata: Metadata = {
-  title: 'Lebenslauf',
+  title: 'Berufserfahrung',
 };
 
 const ResumePage = () => (
   <div className="resume-page pt-4 lg:pt-10 lg:mr-80">
     <section id="lebenslauf">
-      <h2>Lebenslauf</h2>
+      <h2>Berufserfahrung</h2>
 
       <CareerList />
     </section>
diff --git a/app/not-found.tsx b/app/not-found.tsx
index b5e1214..cbd4cc7 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -4,10 +4,11 @@ import { useEffect, useState } from 'react';
 import LinkButton from './components/LinkButton';
 import ArrowRight from './components/icons/ArrowRight';
 
+const code = ['arrowup', 'arrowup', 'arrowdown', 'arrowdown', 'arrowleft', 'arrowright', 'arrowleft', 'arrowright', 'b', 'a'];
+
 const NotFound = () => {
-  const code = ['arrowup', 'arrowup', 'arrowdown', 'arrowdown', 'arrowleft', 'arrowright', 'arrowleft', 'arrowright', 'b', 'a'];
   const [index, setIndex] = useState(0);
-
+  
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (['Shift', 'CapsLock'].includes(e.key)) {
@@ -29,7 +30,7 @@ const NotFound = () => {
     return () => {
       window.removeEventListener('keydown', onKeyDown);
     };
-  }, [index, code]);
+  }, [index]);
 
   return (
     <div className="not-found-page pt-4 lg:pt-10 lg:mr-80">
@@ -83,7 +84,8 @@ const NotFound = () => {
         { 10 <= index
           ? <p className="mt-2">
             <LinkButton
-              href={`mailto:manuel@schaechinger.com?subject=[${code.map((c, i) => c[index - (i + 1)]).reverse().join('')}] Anfrage`}
+              href={`mailto:manuel@schaechinger.com?subject=Projekt-Anfrage über Homepage [${
+                code.map((c, i) => c[index - (i + 1)]).reverse().join('')}]`}
               label="Jetzt durchstarten"
             />
           </p>
diff --git a/app/projekte/[slug]/not-found.tsx b/app/projekte/[slug]/not-found.tsx
index af5344f..f1ce741 100644
--- a/app/projekte/[slug]/not-found.tsx
+++ b/app/projekte/[slug]/not-found.tsx
@@ -14,7 +14,7 @@ const ProjectNotFoundPage = (props: { params: { slug: string } }) => (
       <h2>404 &ndash; Projekt nicht gefunden</h2>
 
 
-      <p className="mb-2">
+      <p className="mb-4">
         Dieses Projekt existiert nicht oder ist nicht mehr verfgbar. Sehen Sie sich gerne meine
         anderen Projekte an und finden Sie das passende.
       </p>
diff --git a/app/projekte/[slug]/page.tsx b/app/projekte/[slug]/page.tsx
index 105618f..6245320 100644
--- a/app/projekte/[slug]/page.tsx
+++ b/app/projekte/[slug]/page.tsx
@@ -2,12 +2,10 @@ import { Metadata } from 'next';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
 
-import CompanyLink from '@/app/components/career/CompanyLink';
-import TechItem from '@/app/components/career/TechItem';
-import TimeSpan from '@/app/components/career/TimeSpan';
+import LinkButton from '@/app/components/LinkButton';
 import DetailBlock from '@/app/components/projects/DetailBlock';
 import { getDatabase } from '@/app/lib/db/factory';
-import LinkButton from '@/app/components/LinkButton';
+import ProjectMasterData from '@/app/components/projects/ProjectMasterData';
 
 interface ProjectPageProps {
   params: {
@@ -41,25 +39,7 @@ const ProjectPage = async ({ params }: ProjectPageProps) => {
 
   return (
     <div className={`project-page page--${project.slug} pt-4 lg:pt-10`}>
-      <section id={project.slug}>
-        <h2>{ project.title }</h2>
-
-        <p className="mb-2">{ project.description }</p>
-
-        <p className="mb-2">
-          Zeitspanne: <TimeSpan startDate={project.startDate} endDate={project.endDate} />
-        </p>
-
-        { project.company
-          ? <p className="mb-2">Firma: <CompanyLink company={project.company} /></p>
-          : null }
-
-        <ul className="flex flex-wrap mt-3 gap-2">
-          { (project.tech || []).map((t) => (
-            <TechItem key={t.slug} item={t} />
-          ))}
-        </ul>
-      </section>
+      <ProjectMasterData project={project} />
 
       { project.details?.requirements
         ? <DetailBlock id="anforderungen" title="Anforderungen" content={project.details.requirements} />
diff --git a/app/projekte/internetmarke/page.tsx b/app/projekte/internetmarke/page.tsx
index 276acb2..ff95e17 100644
--- a/app/projekte/internetmarke/page.tsx
+++ b/app/projekte/internetmarke/page.tsx
@@ -1,85 +1,97 @@
 import { Metadata } from 'next';
+import { unstable_noStore } from 'next/cache';
 import Link from 'next/link';
+import { notFound } from 'next/navigation';
+
+import LinkButton from '@/app/components/LinkButton';
+import ProjectMasterData from '@/app/components/projects/ProjectMasterData';
+import { getDatabase } from '@/app/lib/db/factory';
 
 export const metadata: Metadata = {
   title: 'Internetmarke',
 };
 
-const InternetmarkePage = () => (
-  <div className="project-page pt-4 lg:pt-10">
-    <section id="internetmarke">
-      <h2>Internetmarke</h2>
-
-      <p>
-        Eine Implementierung mehrerer APIs der Deutschen Post zum Erzeugen von digitalen
-        Briefmarken in Node Anwendungen.
-      </p>
-    </section>
-
-    <section id="intro" className="pt-10">
-      <h3>Was ist eine Internetmarke</h3>
-
-      <p className="mb-2">
-        Internetmarke ist ein Produkt der Deutschen Post, die Privat- wie auch Geschäftskunden
-        die Möglichkeit bietet, Porto für Briefe digital zu erstellen.
-      </p>
-
-      <p>
-        Eine Internetmarke kann im Adressformat für den Briefkopf oder als Frankierversion
-        auf ein Kuvert generiert werden. Beide Varianten gibt es dann sowohl als PNG als auch
-        als PDF für Etikettendrucker.
-      </p>
-    </section>
-
-    <section id="ziel" className="pt-10">
-      <h3>Ziel des Projekts</h3>
-
-      <p className="mb-2">
-        Ausgangsproblem war, dass die Internetmarke auf der Homepage der Deutschen Post zwar gekauft werden kann, mir das alles aber zu umständlich war, da ich die Marken direkt auf meine generierten Briefe und Rechnungen drucken wollte. Also musste die API genutzt werden und die Internetmarken möglichst einfach gekauft und genutzt werden können.
-      </p>
-
-      <p className="mb-2">
-        Angefangen habe ich 2018 mit den ersten Features und dem Kauf von Marken als PNG. Später wurde das Projekt dann komplett auf TypeScript umgeschrieben und generiert nun alle vorhandenen Marken mit Zusatzoptionen wie Einschreiben, Prio etc. und auch in PDF-Versionen, um mehrere Marken auf Labels drucken zu können.
-      </p>
-
-      <p className="mb-2">
-        Mir war wichtig, ein möglichst generisches Projekt zu erstellen, das von vielen genutzt werden kann und dann auf npm veröffentlicht werden kann.
+const InternetmarkePage = async () => {
+  unstable_noStore();
+  const project = await getDatabase()?.loadProjectBySlug('internetmarke');
+
+  if (!project) {
+    return notFound();
+  }
+
+  return (
+    <div className="project-page pt-4 lg:pt-10">
+      <ProjectMasterData project={project} />
+
+      <section id="intro" className="pt-10">
+        <h3>Was ist eine Internetmarke</h3>
+
+        <p className="mb-2">
+          Internetmarke ist ein Produkt der Deutschen Post, die Privat- wie auch Geschäftskunden
+          die Möglichkeit bietet, Porto für Briefe digital zu erstellen.
+        </p>
+
+        <p>
+          Eine Internetmarke kann im Adressformat für den Briefkopf oder als Frankierversion
+          auf ein Kuvert generiert werden. Beide Varianten gibt es dann sowohl als PNG als auch
+          als PDF für Etikettendrucker.
+        </p>
+      </section>
+
+      <section id="ziel" className="pt-10">
+        <h3>Ziel des Projekts</h3>
+
+        <p className="mb-2">
+          Ausgangsproblem war, dass die Internetmarke auf der Homepage der Deutschen Post zwar gekauft werden kann, mir das alles aber zu umständlich war, da ich die Marken direkt auf meine generierten Briefe und Rechnungen drucken wollte. Also musste die API genutzt werden und die Internetmarken möglichst einfach gekauft und genutzt werden können.
+        </p>
+
+        <p className="mb-2">
+          Angefangen habe ich 2018 mit den ersten Features und dem Kauf von Marken als PNG. Später wurde das Projekt dann komplett auf TypeScript umgeschrieben und generiert nun alle vorhandenen Marken mit Zusatzoptionen wie Einschreiben, Prio etc. und auch in PDF-Versionen, um mehrere Marken auf Labels drucken zu können.
+        </p>
+
+        <p className="mb-2">
+          Mir war wichtig, ein möglichst generisches Projekt zu erstellen, das von vielen genutzt werden kann und dann auf npm veröffentlicht werden kann.
+        </p>
+
+        <p>
+          Auch wenn wir langsam im digitalen Zeitalter angekommen sind, sind Briefe nach wie vor ein Teil des Geschäftsalltags. Die Internetmarke war ein Bestandteil meines Exkurses in die Briefwelt, nachdem ich bereits DIN 5008 Briefe mit Node generiert hatte und nun immer noch zur Post laufen musste um mir das nötige Porto zu kaufen. Mittlerweile ist zwar auch das neue Produkt #PORTO vorhanden, ich finde es aber immer noch gewöhnungsbedürftig, auf einen Geschäftsbrief handschriftlich das Porto zu hinterlegen.
+        </p>
+      </section>
+
+      <section id="features" className="pt-10">
+        <h3>Features</h3>
+
+        <p className="mb-2">
+          Marken können als Vorschau generiert, dem Warenkorb hinzugefügt und gekauft werden. Die einzelnen Variationen beim Kauf der Marken wird in vollem Umfang ermöglicht.
+        </p>
+
+        <p className="mb-2">
+          Die verfügbaren Wertmarken der Deutschen Post können über den Produktservice angefragt werden.
+        </p>
+
+        <p>
+          Um sich nicht mit IDs und Spezifikationen der einzelnen Marken herumschlagen zu müssen, gibt es nun ein Feature, das anhand von Eckdaten des Briefs (Verwendetes Papier und Kuvert) sowie Angaben zur Nutzung (Empfängerland, Zusatzleistungen wie Einschreiben) die benötigte Marke aus der Liste findet und es dem Nutzer anbietet.
+        </p>
+      </section>
+
+      <section id="links" className="pt-10">
+        <h3>Links</h3>
+
+        <p>
+          Das Projekt finden Sie auf <Link href="https://github.com/schaechinger/internetmarke#readme"
+            target="_blank" className="inline-link">GitHub</Link>.
+        </p>
+        <p>
+          Sie können das Paket mit <Link href="https://npmjs.org/package/internetmarke"
+            target="_blank" className="inline-link">npm</Link> in Ihr Projekt einbinden.
+        </p>
+      </section>
+
+      <p className="mt-4">
+        <LinkButton href="/projekte" label="Zur Projektliste" />
       </p>
-
-      <p>
-        Auch wenn wir langsam im digitalen Zeitalter angekommen sind, sind Briefe nach wie vor ein Teil des Geschäftsalltags. Die Internetmarke war ein Bestandteil meines Exkurses in die Briefwelt, nachdem ich bereits DIN 5008 Briefe mit Node generiert hatte und nun immer noch zur Post laufen musste um mir das nötige Porto zu kaufen. Mittlerweile ist zwar auch das neue Produkt #PORTO vorhanden, ich finde es aber immer noch gewöhnungsbedürftig, auf einen Geschäftsbrief handschriftlich das Porto zu hinterlegen.
-      </p>
-    </section>
-
-    <section id="features" className="pt-10">
-      <h3>Features</h3>
-
-      <p className="mb-2">
-        Marken können als Vorschau generiert, dem Warenkorb hinzugefügt und gekauft werden. Die einzelnen Variationen beim Kauf der Marken wird in vollem Umfang ermöglicht.
-      </p>
-
-      <p className="mb-2">
-        Die verfügbaren Wertmarken der Deutschen Post können über den Produktservice angefragt werden.
-      </p>
-
-      <p>
-        Um sich nicht mit IDs und Spezifikationen der einzelnen Marken herumschlagen zu müssen, gibt es nun ein Feature, das anhand von Eckdaten des Briefs (Verwendetes Papier und Kuvert) sowie Angaben zur Nutzung (Empfängerland, Zusatzleistungen wie Einschreiben) die benötigte Marke aus der Liste findet und es dem Nutzer anbietet.
-      </p>
-    </section>
-
-    <section id="links" className="pt-10">
-      <h3>Links</h3>
-
-      <p>
-        Das Projekt finden Sie auf <Link href="https://github.com/schaechinger/internetmarke#readme"
-          target="_blank" className="inline-link">GitHub</Link>.
-      </p>
-      <p>
-        Sie können das Paket mit <Link href="https://npmjs.org/package/internetmarke"
-          target="_blank" className="inline-link">npm</Link> in Ihr Projekt einbinden.
-      </p>
-    </section>
-  </div>
-);
+    </div>
+  );
+};
 
 export default InternetmarkePage;
diff --git a/app/projekte/transportkit/page.tsx b/app/projekte/transportkit/page.tsx
index c1bde37..6260d95 100644
--- a/app/projekte/transportkit/page.tsx
+++ b/app/projekte/transportkit/page.tsx
@@ -1,84 +1,91 @@
+import LinkButton from '@/app/components/LinkButton';
+import ProjectMasterData from '@/app/components/projects/ProjectMasterData';
+import { getDatabase } from '@/app/lib/db/factory';
 import { Metadata } from 'next';
+import { unstable_noStore } from 'next/cache';
 import Link from 'next/link';
+import { notFound } from 'next/navigation';
 
 export const metadata: Metadata = {
   title: 'TransportKit',
 };
 
-const InternetmarkePage = () => (
-  <div className="project-page pt-4 lg:pt-10">
-    <link rel="stylesheet"
-      href="https://static.schaechinger.com/projects/transportkit/latest/transportkit.min.css?gc=v4" />
-
-    <section id="transportkit">
-      <h2>TransportKit</h2>
-
-      <p>
-        Mit Transportkit können Linien des öffentlichen Nahverkehrs einiger Großstädte mittels
-        CSS-Klassen in Webseiten eingebunden werden.
-      </p>
-    </section>
-
-    <section id="intro" className="pt-10">
-      <h3>Was ist Transportkit</h3>
-
-      <p className="mb-2">
-        TransportKit ist ein SASS Projekt, das die Styles für die Linienanzeigen des öffentlichen
-        Nahverkehrs in München, NYC, London und weiteren Großstädten abbildet. So kann man auf
-        einfache Weise die Linien im jeweiligen Formfaktor mit passender Farbe darstellen.
-      </p>
-
-      <p className="mb-2">
-        Die Linien sind für helle und dunklere Hintergründe angepasst und können so überall
-        eingesetzt werden.
+const TransportKitPage = async () => {
+  unstable_noStore();
+  const project = await getDatabase()?.loadProjectBySlug('transportkit');
+
+  if (!project) {
+    return notFound();
+  }
+
+  return (
+    <div className="project-page pt-4 lg:pt-10">
+      <link rel="stylesheet"
+        href="https://static.schaechinger.com/projects/transportkit/latest/transportkit.min.css?gc=v4" />
+
+      <ProjectMasterData project={project} />
+
+      <section id="intro" className="pt-10">
+        <h3>Was ist Transportkit</h3>
+
+        <p className="mb-2">
+          Mit TransportKit können Icons von Linien vieler Großstädte einfach in Ihr Projekt
+          eingebunden werden.<br />
+          Die Linien sind für helle und dunklere Hintergründe angepasst und können so überall
+          eingesetzt werden.
+        </p>
+
+        <p>
+          Das Projekt ist Open Source und kann auf GitHub heruntergeladen werden. Viel Spaß bei
+          der Nutzung. Bitte beachten Sie vorab mögliche Beschränkungen oder benötigte Lizenzen
+          durch die Rechteinhaber.
+        </p>
+      </section>
+
+      <section id="munich" className="pt-10">
+        <h3>München</h3>
+
+        <h4>U-Bahn</h4>
+        { ['u1', 'u2', 'u3', 'u4', 'u5', 'u6', 'u7', 'u8'].map((line) => (
+          <span key={line} className={`transportkit-munich transportkit-munich--${line} transportkit-munich--contrast`}>{ line }</span>
+        )) }
+
+        <h4 className="mt-2">S-Bahn</h4>
+        { ['s1', 's2', 's3', 's4', 's6', 's7', 's8', 's20'].map((line) => (
+          <span key={line} className={`transportkit-munich transportkit-munich--${line} transportkit-munich--contrast`}>{ line }</span>
+        )) }
+
+        <h4 className="mt-2">Bus</h4>
+        { [['b', '132', '210'], ['bx', 'X30', 'X200'], ['bm', '53'], ['bn', 'N41'],['bnw', 'N80']].map(([type, ...lines]) => (
+          lines.map((line) => (
+            <span key={`${type}-${line}`} className={`transportkit-munich transportkit-munich--${type} transportkit-munich--contrast`}>{ line }</span>
+          ))
+        )) }
+
+        <h4 className="mt-2">Tram</h4>
+        { [['t', '17', 'N20'], ['tp', '22']].map(([type, ...lines]) => (
+          lines.map((line) => (
+            <span key={`${type}-${line}`} className={`transportkit-munich transportkit-munich--${type} transportkit-munich--contrast`}>{ line }</span>
+          ))
+        )) }
+        <br />
+        { ['12', '15', '16', '17', '18', '19', '20', '21', '22', '23', '25', '27', '28'].map((line) => (
+          <span key={line} className={`transportkit-munich transportkit-munich--t${line} transportkit-munich--contrast`}>{ line }</span>
+        )) }
+      </section>
+
+      <section id="links" className="pt-10">
+        <h3>Links</h3>
+
+        <p>Den Code zum Projekt finden Sie auf <Link href="https://github.com/schaechinger/transportkit"
+          target="_blank" className="inline-link">GitHub</Link>.</p>
+      </section>
+
+      <p className="mt-4">
+        <LinkButton href="/projekte" label="Zur Projektliste" />
       </p>
+    </div>
+  );
+};
 
-      <p>
-        Das Projekt ist Open Source und kann auf GitHub heruntergeladen werden. Viel Spaß bei
-        der Nutzung. Bitte beachten Sie vorab mögliche Beschränkungen oder benötigte Lizenzen
-        durch die Rechteinhaber.
-      </p>
-    </section>
-
-    <section id="munich" className="pt-10">
-      <h3>München</h3>
-
-      <h4>U-Bahn</h4>
-      { ['u1', 'u2', 'u3', 'u4', 'u5', 'u6', 'u7', 'u8'].map((line) => (
-        <span key={line} className={`transportkit-munich transportkit-munich--${line} transportkit-munich--contrast`}>{ line }</span>
-      )) }
-
-      <h4 className="mt-2">S-Bahn</h4>
-      { ['s1', 's2', 's3', 's4', 's6', 's7', 's8', 's20'].map((line) => (
-        <span key={line} className={`transportkit-munich transportkit-munich--${line} transportkit-munich--contrast`}>{ line }</span>
-      )) }
-
-      <h4 className="mt-2">Bus</h4>
-      { [['b', '132', '210'], ['bx', 'X30', 'X200'], ['bm', '53'], ['bn', 'N41'],['bnw', 'N80']].map(([type, ...lines]) => (
-        lines.map((line) => (
-          <span key={`${type}-${line}`} className={`transportkit-munich transportkit-munich--${type} transportkit-munich--contrast`}>{ line }</span>
-        ))
-      )) }
-
-      <h4 className="mt-2">Tram</h4>
-      { [['t', '17', 'N20'], ['tp', '22']].map(([type, ...lines]) => (
-        lines.map((line) => (
-          <span key={`${type}-${line}`} className={`transportkit-munich transportkit-munich--${type} transportkit-munich--contrast`}>{ line }</span>
-        ))
-      )) }
-      <br />
-      { ['12', '15', '16', '17', '18', '19', '20', '21', '22', '23', '25', '27', '28'].map((line) => (
-        <span key={line} className={`transportkit-munich transportkit-munich--t${line} transportkit-munich--contrast`}>{ line }</span>
-      )) }
-    </section>
-
-    <section id="links" className="pt-10">
-      <h3>Links</h3>
-
-      <p>Den Code zum Projekt finden Sie auf <Link href="https://github.com/schaechinger/transportkit"
-        target="_blank" className="inline-link">GitHub</Link>.</p>
-  </section>
-  </div>
-);
-
-export default InternetmarkePage;
+export default TransportKitPage;