diff --git a/src/App.css b/src/App.css
index 53d18b8..e69de29 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,8 +0,0 @@
-#niklas-birk-root {
-    text-align: center;
-    margin-top: 60px;
-}
-
-#logo {
-    width: 10%;
-}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index d154bf6..79d92cb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,7 @@
-import logo from './assets/niklas-birk-logo.png';
 import './App.css';
 
 import {createTheme, NextUIProvider} from "@nextui-org/react"
+import SiteContentRoot from "./components/SiteContentRoot";
 
 const theme = createTheme({
     type: "dark",
@@ -49,23 +49,7 @@ const theme = createTheme({
 function App() {
     return (
         <NextUIProvider theme={theme}>
-            <div id="niklas-birk-root">
-                <img id="logo" alt="Ein Logo von Niklas Birk" src={logo}/>
-                <div>
-                    <h1>Work in Progress</h1>
-                    Das ist eine Seite im Aufbau.
-                    <br/><br/>
-                    Wichtige links:
-                    <ul>
-                        <li> Mail an <a href="mailto://niklas.birk@niklas-birk.de"> niklas.birk@niklas-birk.de </a></li>
-                        <li> Meine self-hosted git repositories bei <a href="https://git.niklas-birk.de">Gitea</a></li>
-                        <li> Mein self-hosted <a href="https://blog.niklas-birk.de">Blog</a></li>
-                        <li> Meine self-hosted <a href="https://survey.niklas-birk.de">Umfragen</a></li>
-                        <li> ...</li>
-                    </ul>
-                </div>
-                <a href={process.env.PUBLIC_URL + 'impressum.html'}>Impressum und Datenschutz</a>
-            </div>
+            <SiteContentRoot />
         </NextUIProvider>
     );
 }
diff --git a/src/assets/blog_logo.png b/src/assets/blog_logo.png
new file mode 100644
index 0000000..c3aa215
Binary files /dev/null and b/src/assets/blog_logo.png differ
diff --git a/src/assets/git_logo.png b/src/assets/git_logo.png
new file mode 100644
index 0000000..f1a1d53
Binary files /dev/null and b/src/assets/git_logo.png differ
diff --git a/src/assets/niklas-birk-logo.svg b/src/assets/niklas-birk-logo.svg
deleted file mode 100644
index 6a05b1d..0000000
--- a/src/assets/niklas-birk-logo.svg
+++ /dev/null
@@ -1,97 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns:ooo="http://xml.openoffice.org/svg/export" version="1.2" width="100mm" height="100mm" viewBox="0 0 10000 10000"
-     preserveAspectRatio="xMidYMid" fill-rule="evenodd" stroke-width="28.222" stroke-linejoin="round"
-     xmlns="http://www.w3.org/2000/svg"
-     xml:space="preserve">
- <defs class="ClipPathGroup">
-  <clipPath id="presentation_clip_path" clipPathUnits="userSpaceOnUse">
-   <rect x="0" y="0" width="10000" height="10000"/>
-  </clipPath>
-     <clipPath id="presentation_clip_path_shrink" clipPathUnits="userSpaceOnUse">
-   <rect x="10" y="10" width="9980" height="9980"/>
-  </clipPath>
- </defs>
-    <defs class="TextShapeIndex">
-  <g ooo:slide="id1" ooo:id-list="id3"/>
- </defs>
-    <defs class="EmbeddedBulletChars">
-  <g id="bullet-char-template-57356" transform="scale(0.00048828125,-0.00048828125)">
-   <path d="M 580,1141 L 1163,571 580,0 -4,571 580,1141 Z"/>
-  </g>
-        <g id="bullet-char-template-57354" transform="scale(0.00048828125,-0.00048828125)">
-   <path d="M 8,1128 L 1137,1128 1137,0 8,0 8,1128 Z"/>
-  </g>
-        <g id="bullet-char-template-10146" transform="scale(0.00048828125,-0.00048828125)">
-   <path d="M 174,0 L 602,739 174,1481 1456,739 174,0 Z M 1358,739 L 309,1346 659,739 1358,739 Z"/>
-  </g>
-        <g id="bullet-char-template-10132" transform="scale(0.00048828125,-0.00048828125)">
-   <path d="M 2015,739 L 1276,0 717,0 1260,543 174,543 174,936 1260,936 717,1481 1274,1481 2015,739 Z"/>
-  </g>
-        <g id="bullet-char-template-10007" transform="scale(0.00048828125,-0.00048828125)">
-   <path d="M 0,-2 C -7,14 -16,27 -25,37 L 356,567 C 262,823 215,952 215,954 215,979 228,992 255,992 264,992 276,990 289,987 310,991 331,999 354,1012 L 381,999 492,748 772,1049 836,1024 860,1049 C 881,1039 901,1025 922,1006 886,937 835,863 770,784 769,783 710,716 594,584 L 774,223 C 774,196 753,168 711,139 L 727,119 C 717,90 699,76 672,76 641,76 570,178 457,381 L 164,-76 C 142,-110 111,-127 72,-127 30,-127 9,-110 8,-76 1,-67 -2,-52 -2,-32 -2,-23 -1,-13 0,-2 Z"/>
-  </g>
-        <g id="bullet-char-template-10004" transform="scale(0.00048828125,-0.00048828125)">
-   <path d="M 285,-33 C 182,-33 111,30 74,156 52,228 41,333 41,471 41,549 55,616 82,672 116,743 169,778 240,778 293,778 328,747 346,684 L 369,508 C 377,444 397,411 428,410 L 1163,1116 C 1174,1127 1196,1133 1229,1133 1271,1133 1292,1118 1292,1087 L 1292,965 C 1292,929 1282,901 1262,881 L 442,47 C 390,-6 338,-33 285,-33 Z"/>
-  </g>
-        <g id="bullet-char-template-9679" transform="scale(0.00048828125,-0.00048828125)">
-   <path d="M 813,0 C 632,0 489,54 383,161 276,268 223,411 223,592 223,773 276,916 383,1023 489,1130 632,1184 813,1184 992,1184 1136,1130 1245,1023 1353,916 1407,772 1407,592 1407,412 1353,268 1245,161 1136,54 992,0 813,0 Z"/>
-  </g>
-        <g id="bullet-char-template-8226" transform="scale(0.00048828125,-0.00048828125)">
-   <path d="M 346,457 C 273,457 209,483 155,535 101,586 74,649 74,723 74,796 101,859 155,911 209,963 273,989 346,989 419,989 480,963 531,910 582,859 608,796 608,723 608,648 583,586 532,535 482,483 420,457 346,457 Z"/>
-  </g>
-        <g id="bullet-char-template-8211" transform="scale(0.00048828125,-0.00048828125)">
-   <path d="M -4,459 L 1135,459 1135,606 -4,606 -4,459 Z"/>
-  </g>
-        <g id="bullet-char-template-61548" transform="scale(0.00048828125,-0.00048828125)">
-   <path d="M 173,740 C 173,903 231,1043 346,1159 462,1274 601,1332 765,1332 928,1332 1067,1274 1183,1159 1299,1043 1357,903 1357,740 1357,577 1299,437 1183,322 1067,206 928,148 765,148 601,148 462,206 346,322 231,437 173,577 173,740 Z"/>
-  </g>
- </defs>
-    <g>
-  <g id="id2" class="Master_Slide">
-   <g id="bg-id2" class="Background"/>
-      <g id="bo-id2" class="BackgroundObjects"/>
-  </g>
- </g>
-    <g class="SlideGroup">
-  <g>
-   <g id="container-id1">
-    <g id="id1" class="Slide" clip-path="url(#presentation_clip_path)">
-     <g class="Page">
-      <g class="Graphic">
-       <g id="id3">
-        <rect class="BoundingBox" stroke="none" fill="none" x="0" y="1" width="10001" height="10001"/>
-           <defs>
-         <clipPath id="clip_path_1" clipPathUnits="userSpaceOnUse">
-          <path d="M 0,1 L 10000,1 10000,10001 0,10001 0,1 Z"/>
-         </clipPath>
-        </defs>
-           <g clip-path="url(#clip_path_1)"/>
-           <defs>
-         <clipPath id="clip_path_2" clipPathUnits="userSpaceOnUse">
-          <path d="M 0,1 L 10000,1 10000,10001 0,10001 0,1 Z"/>
-         </clipPath>
-        </defs>
-           <g clip-path="url(#clip_path_2)">
-         <path fill="rgb(76,103,13)" stroke="none"
-               d="M 5008,14323 L -4206,14323 -4206,-4302 14222,-4302 14222,14323 5008,14323 Z"/>
-               <path fill="rgb(255,255,2)" stroke="none"
-                     d="M 8556,4978 C 8556,5618 8387,6246 8067,6801 7747,7355 7287,7815 6733,8135 6178,8455 5549,8624 4909,8624 4269,8624 3641,8455 3086,8135 2532,7815 2072,7355 1752,6801 1432,6246 1263,5618 1263,4978 1263,4337 1432,3709 1752,3154 2072,2600 2532,2140 3086,1820 3641,1500 4269,1331 4909,1331 5549,1331 6178,1500 6733,1820 7287,2140 7747,2600 8067,3154 8387,3709 8556,4337 8556,4978 L 8556,4978 Z"/>
-               <path fill="rgb(26,23,27)" stroke="none"
-                     d="M 6305,5010 C 6305,5483 6241,5948 6118,6357 5996,6767 5820,7107 5607,7344 5395,7580 5154,7705 4909,7705 4664,7705 4424,7580 4211,7344 3999,7107 3823,6767 3700,6357 3578,5948 3513,5483 3513,5010 3513,4537 3578,4073 3700,3663 3823,3254 3999,2914 4211,2677 4424,2441 4664,2316 4909,2316 5154,2316 5395,2441 5607,2677 5820,2914 5996,3254 6118,3663 6241,4073 6305,4537 6305,5010 L 6305,5010 Z"/>
-               <path fill="rgb(152,19,5)" stroke="none"
-                     d="M 5287,5010 C 5287,5152 5270,5290 5237,5413 5203,5535 5156,5637 5098,5707 5041,5778 4976,5815 4909,5815 4843,5815 4778,5778 4720,5707 4663,5637 4615,5535 4582,5413 4549,5290 4532,5152 4532,5010 4532,4869 4549,4730 4582,4608 4615,4486 4663,4384 4720,4313 4778,4243 4843,4206 4909,4206 4976,4206 5041,4243 5098,4313 5156,4384 5203,4486 5237,4608 5270,4730 5287,4869 5287,5010 L 5287,5010 Z"/>
-               <path fill="rgb(76,103,13)" stroke="none"
-                     d="M 3846,1085 L 5972,1085 5972,1085 C 6429,1085 6877,1205 7272,1433 7667,1661 7996,1990 8224,2385 8452,2780 8572,3228 8572,3685 L 8572,3685 8572,3779 1247,3779 1247,3685 1247,3685 C 1247,3228 1367,2780 1595,2385 1823,1990 2151,1661 2546,1433 2942,1205 3390,1085 3846,1085 L 3846,1085 Z"/>
-               <path fill="rgb(111,103,28)" stroke="none"
-                     d="M 8621,3828 L 1197,3828 1197,3738 C 1197,2248 2410,1036 3900,1036 L 5919,1036 C 7409,1036 8621,2248 8621,3738 L 8621,3828 Z M 1296,3729 L 8523,3729 C 8518,2298 7352,1134 5919,1134 L 3900,1134 C 2467,1134 1301,2298 1296,3729 L 1296,3729 Z"/>
-        </g>
-           <g clip-path="url(#clip_path_1)"/>
-       </g>
-      </g>
-     </g>
-    </g>
-   </g>
-  </g>
- </g>
-</svg>
\ No newline at end of file
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..23eee31
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,20 @@
+import {Link} from "@nextui-org/react";
+
+function Footer() {
+    return (
+        <Link
+            href={process.env.PUBLIC_URL + 'impressum.html'}
+            block
+            css={{
+                position: "fixed",
+                bottom: 0,
+                right: 0,
+                textAlign: "center",
+                margin: 15
+            }}>
+            Impressum und Datenschutz
+        </Link>
+    );
+}
+
+export default Footer;
\ No newline at end of file
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 0000000..f43c9a6
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,28 @@
+import {Image, Spacer, Text} from "@nextui-org/react";
+import logo from "../assets/niklas-birk-logo.png";
+
+function Header() {
+    return (
+        <>
+            <Spacer y={3} />
+            <Image
+                src={logo}
+                width={200}
+                height={200}
+                alt="Ein Logo von Niklas Birk"
+                objectFit="fill" />
+            <Text
+                h1
+                color="$draculaCyan"
+                css={{
+                    textAlign: "center"
+                }}
+                weight="bold">
+                Niklas Birk
+            </Text>
+            <Spacer y={2} />
+        </>
+    );
+}
+
+export default Header;
\ No newline at end of file
diff --git a/src/components/ServiceCard.js b/src/components/ServiceCard.js
new file mode 100644
index 0000000..8701c4f
--- /dev/null
+++ b/src/components/ServiceCard.js
@@ -0,0 +1,73 @@
+import {Card, Col, Text} from "@nextui-org/react";
+
+function ServiceCard(props) {
+    return (
+        <Card isPressable>
+            <Card.Header css={{ position: "absolute", zIndex: 1, top: 5}}>
+                <Col>
+                    <Text size={12} weight="bold" transform="uppercase">
+                        {props.introText}
+                    </Text>
+                    <Text h3>
+                        {props.serviceText}
+                    </Text>
+                    <Text size={12} weight="bold" transform="uppercase">
+                        {props.vendorText}
+                    </Text>
+                </Col>
+            </Card.Header>
+            <Card.Body css={{ p: 0 }}>
+                <Card.Image
+                    src={props.logo}
+                    // width="50%"
+                    // height="50%"
+                    objectFit="fill"
+                    alt="Card example background"
+                />
+            </Card.Body>
+            {/*<Card.Footer*/}
+            {/*    isBlurred*/}
+            {/*    css={{*/}
+            {/*        position: "absolute",*/}
+            {/*        bgBlur: "$draculaCurrentLine",*/}
+            {/*        borderTop: "$borderWeights$light solid rgba(255, 255, 255, 0.2)",*/}
+            {/*        bottom: 0,*/}
+            {/*        zIndex: 1,*/}
+            {/*    }}>*/}
+            {/*    <Row justify="center">*/}
+            {/*        <Button flat auto rounded color="primary">*/}
+            {/*            <Text*/}
+            {/*                css={{*/}
+            {/*                    color: "inherit"*/}
+            {/*                }}*/}
+            {/*                size={12}*/}
+            {/*                weight="bold"*/}
+            {/*                transform="uppercase">*/}
+            {/*                Zu den Repositories*/}
+            {/*            </Text>*/}
+            {/*        </Button>*/}
+            {/*    </Row>*/}
+            {/*</Card.Footer>*/}
+        </Card>
+
+        // <div id="niklas-birk-root">
+        //     <img id="logo" alt="Ein Logo von Niklas Birk" src={logo}/>
+        //     <div>
+        //         <h1>Work in Progress</h1>
+        //         Das ist eine Seite im Aufbau.
+        //         <br/><br/>
+        //         Wichtige links:
+        //         <ul>
+        //             <li> Mail an <a href="mailto://niklas.birk@niklas-birk.de"> niklas.birk@niklas-birk.de </a></li>
+        //             <li> Meine self-hosted git repositories bei <a href="https://git.niklas-birk.de">Gitea</a></li>
+        //             <li> Mein self-hosted <a href="https://blog.niklas-birk.de">Blog</a></li>
+        //             <li> Meine self-hosted <a href="https://survey.niklas-birk.de">Umfragen</a></li>
+        //             <li> ...</li>
+        //         </ul>
+        //     </div>
+        //     <a href={process.env.PUBLIC_URL + 'impressum.html'}>Impressum und Datenschutz</a>
+        // </div>
+    );
+}
+
+export default ServiceCard;
\ No newline at end of file
diff --git a/src/components/Services.js b/src/components/Services.js
new file mode 100644
index 0000000..3ab2719
--- /dev/null
+++ b/src/components/Services.js
@@ -0,0 +1,45 @@
+import {Grid} from "@nextui-org/react";
+import ServiceCard from "./ServiceCard";
+import gitLogo from "../assets/git_logo.png";
+import blogLogo from "../assets/blog_logo.png";
+
+function Services() {
+    return (
+        <Grid.Container gap={2} justify="center">
+            <Grid xs={3}>
+                <ServiceCard
+                    introText="Meine self-hosted"
+                    serviceText="git Repositories"
+                    vendorText="mit Gitea"
+                    logo={gitLogo} />
+            </Grid>
+            <Grid xs={3}>
+                <ServiceCard
+                    introText="Mein self-hosted"
+                    serviceText="Blog"
+                    vendorText="über Mathematik"
+                    logo={blogLogo} />
+            </Grid>
+        </Grid.Container>
+
+        // <div id="niklas-birk-root">
+        //     <img id="logo" alt="Ein Logo von Niklas Birk" src={logo}/>
+        //     <div>
+        //         <h1>Work in Progress</h1>
+        //         Das ist eine Seite im Aufbau.
+        //         <br/><br/>
+        //         Wichtige links:
+        //         <ul>
+        //             <li> Mail an <a href="mailto://niklas.birk@niklas-birk.de"> niklas.birk@niklas-birk.de </a></li>
+        //             <li> Meine self-hosted git repositories bei <a href="https://git.niklas-birk.de">Gitea</a></li>
+        //             <li> Mein self-hosted <a href="https://blog.niklas-birk.de">Blog</a></li>
+        //             <li> Meine self-hosted <a href="https://survey.niklas-birk.de">Umfragen</a></li>
+        //             <li> ...</li>
+        //         </ul>
+        //     </div>
+        //     <a href={process.env.PUBLIC_URL + 'impressum.html'}>Impressum und Datenschutz</a>
+        // </div>
+    );
+}
+
+export default Services;
\ No newline at end of file
diff --git a/src/components/SiteContentRoot.js b/src/components/SiteContentRoot.js
new file mode 100644
index 0000000..22d0d28
--- /dev/null
+++ b/src/components/SiteContentRoot.js
@@ -0,0 +1,16 @@
+import Services from "./Services";
+import Header from "./Header";
+import Footer from "./Footer";
+
+
+function SiteContentRoot() {
+    return (
+        <>
+            <Header />
+            <Services />
+            <Footer />
+        </>
+    );
+}
+
+export default SiteContentRoot;