diff --git a/.gitignore b/.gitignore
index 2bbdbfe..1141f09 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 .direnv
 result
+public
diff --git a/config.toml b/config.toml
new file mode 100644
index 0000000..c758f30
--- /dev/null
+++ b/config.toml
@@ -0,0 +1,17 @@
+# The URL the site will be built for
+base_url = "https://sondell.org"
+
+# Whether to automatically compile all Sass files in the sass directory
+compile_sass = false
+
+# Whether to build a search index to be used later on by a JavaScript library
+build_search_index = false
+
+[markdown]
+# Whether to do syntax highlighting
+# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
+highlight_code = true
+
+[extra]
+# Put all your custom variables here
+icon = "icon"
diff --git a/content/_index.md b/content/_index.md
new file mode 100644
index 0000000..e650c31
--- /dev/null
+++ b/content/_index.md
@@ -0,0 +1,5 @@
++++
+title = "Selfhosted Services"
++++
+
+
diff --git a/content/nextcloud/_index.md b/content/nextcloud/_index.md
new file mode 100644
index 0000000..2dcff85
--- /dev/null
+++ b/content/nextcloud/_index.md
@@ -0,0 +1,10 @@
++++
+title = "Nextcloud"
+[extra]
+icon ="./nextcloud_icon_14.png"
++++
+
+Nextcloud is a suite of client-server software for creating and using file
+hosting services. Our nextcloud server is integrated with OnlyOffice and can
+provide functionality similar to Dropbox, Office 365 or Google Drive.
+
diff --git a/content/nextcloud/footer/1desktop.md b/content/nextcloud/footer/1desktop.md
new file mode 100644
index 0000000..d07da1e
--- /dev/null
+++ b/content/nextcloud/footer/1desktop.md
@@ -0,0 +1,7 @@
++++
+title = "googleplay"
++++
+
+<a class="app-link desktop" href="https://www.onlyoffice.com/download-desktop.aspx#desktop">
+  <p>Desktop App</p>
+</a>
diff --git a/content/nextcloud/footer/_index.md b/content/nextcloud/footer/_index.md
new file mode 100644
index 0000000..f05d887
--- /dev/null
+++ b/content/nextcloud/footer/_index.md
@@ -0,0 +1,21 @@
++++
+title= "footer"
+template ="footer.html"
+sort_by = "slug"
++++
+
+#### Get Started
+
+<p>
+Download the app for your device and login with the server adress:
+<code class="link">
+  https://cloud.sondell.org/
+</code>
+<button class="url" _="on click
+    writeText(my previousElementSibling's innerText) into navigator's clipboard
+    put 'copied!' into me
+    wait 1s
+    put 'copy url' into me">
+  copy url
+</button>
+</p>
diff --git a/content/nextcloud/footer/googleplay.md b/content/nextcloud/footer/googleplay.md
new file mode 100644
index 0000000..cca3da4
--- /dev/null
+++ b/content/nextcloud/footer/googleplay.md
@@ -0,0 +1,10 @@
++++
+title = "googleplay"
++++
+
+<a class="app-link" href="https://play.google.com/store/apps/details?id=com.nextcloud.client" rel="nofollow">
+  <img src="./googleplay-trim.png" alt="Download from Google Play" height="40"
+    data-canonical-src="https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png"
+    style="max-width: 100%;">
+</a>
+
diff --git a/content/nextcloud/footer/ios.md b/content/nextcloud/footer/ios.md
new file mode 100644
index 0000000..0996404
--- /dev/null
+++ b/content/nextcloud/footer/ios.md
@@ -0,0 +1,12 @@
++++
+title = "ios store"
++++
+
+<a class="app-link" href="https://itunes.apple.com/us/app/nextcloud/id1125420102" rel="nofollow">
+  <img
+    src="https://camo.githubusercontent.com/c4395f930c17c2f878dbd98b55d461375f6feb7a998e0ac6e3be2376b8429b8a/68747470733a2f2f646576656c6f7065722e6170706c652e636f6d2f6173736574732f656c656d656e74732f6261646765732f646f776e6c6f61642d6f6e2d7468652d6170702d73746f72652e737667"
+    alt="the Nextcloud iOS files app" height="40"
+    data-canonical-src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg"
+    style="max-width: 100%;">
+</a>
+
diff --git a/content/nextcloud/footer/webapp.md b/content/nextcloud/footer/webapp.md
new file mode 100644
index 0000000..020a96b
--- /dev/null
+++ b/content/nextcloud/footer/webapp.md
@@ -0,0 +1,9 @@
++++
+title = "googleplay"
++++
+
+<a class="app-link" href="https://cloud.sondell.org" rel="nofollow">
+  <img src="./pwa-badge.png" alt="Demo of the Nextcloud iOS files app" height="40"
+    data-canonical-src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg"
+    style="max-width: 100%;">
+</a>
diff --git a/content/oldnext.md b/content/oldnext.md
new file mode 100644
index 0000000..b141b1b
--- /dev/null
+++ b/content/oldnext.md
@@ -0,0 +1,11 @@
++++
+title = "Nextcloud"
+[extra]
+icon ="./nextcloud_icon_14.png"
++++
+
+<p class="text">
+Nextcloud is a suite of client-server software for creating and using file
+hosting services. Our nextcloud server is integrated with OnlyOffice and can
+provide functionality similar to Dropbox, Office 365 or Google Drive.
+</p>
diff --git a/flake.nix b/flake.nix
index d806910..fb73cd9 100644
--- a/flake.nix
+++ b/flake.nix
@@ -27,6 +27,7 @@
           dev_serve
           imagemagick
           ffmpeg
+          zola
         ];
       };
     });
diff --git a/static/cert.pem b/static/cert.pem
deleted file mode 100644
index 6459383..0000000
--- a/static/cert.pem
+++ /dev/null
@@ -1,32 +0,0 @@
------BEGIN CERTIFICATE-----
-MIIFkzCCA3ugAwIBAgIUY2yV3rWekKEfUlLf97PpItQkT5AwDQYJKoZIhvcNAQEL
-BQAwWTELMAkGA1UEBhMCc2UxEzARBgNVBAgMClNvbWUtU3RhdGUxFTATBgNVBAcM
-DExpZGvDg8K2cGluZzEOMAwGA1UECgwFYWx0ZW4xDjAMBgNVBAMMBUdsZW5uMB4X
-DTI0MDQwODEyMDIzOVoXDTI1MDQwODEyMDIzOVowWTELMAkGA1UEBhMCc2UxEzAR
-BgNVBAgMClNvbWUtU3RhdGUxFTATBgNVBAcMDExpZGvDg8K2cGluZzEOMAwGA1UE
-CgwFYWx0ZW4xDjAMBgNVBAMMBUdsZW5uMIICIjANBgkqhkiG9w0BAQEFAAOCAg8A
-MIICCgKCAgEAk0wgeIbwmluNQcAhpyHEo4aYfsUfTQ8grCv38Qm5u4Iw8hTXS/Cr
-bKFLqencbSiwznt9gcnBBSY/T8fQmKv36vm3389T9Y2MF1hppSCeLNiSTuqM/gjm
-hV4YF1pf9dM18jkbMVvdxVAKjrUuAP7ib0ex5CJzUO5eh268vNNeAE45LdAFa2G2
-gUFlUV2hk7WMThad8GKhCcNmGmBwOoqBHFxjkzQepDpbKQJyqN69U/F4GuwpzeU5
-2ZJ4LISOLUE1hKtkLo+7HM14+z3cL8KXKPkzcP6pSK5V2PXU9P8WfivSnl3Y82hJ
-QPi+jfcbjNS03fd0X7VFLmw/+uRQ4SyCt6ZvnBiA2XqZY8Zz92DWAyGnrdhxNc31
-zfF4BDwHg9psZKqucHyipQL+AsbUQWZNUzH9O/tXL6s9bVF7IO2Hhm5Nl5XaVvUb
-vQK881056jSGyFWZJansPVo4NgpgA/RpIS9pIHm6q8In5nU72N6+Jw4u8JOoFj5O
-ZB4DPqKMVCgKkpEWueUfRzPPyJpHza6Xg0ujVO1MRLD5eu6B+Wl7PRk7Ao9XaF5w
-BanGQmRxWy5NljkzhLJjZyVckGTk3bBtH0c8XVlf9fyBR/v0N/QOqTs/yacF/MNX
-lVRzb0mv4Ldf62tNcTvupb6T5jhTKxuupen2J7hMSWZ4qKyt7bZB9B0CAwEAAaNT
-MFEwHQYDVR0OBBYEFCRiBTOba7s51vrAWbTbQVxyJNDlMB8GA1UdIwQYMBaAFCRi
-BTOba7s51vrAWbTbQVxyJNDlMA8GA1UdEwEB/wQFMAMBAf8wDQYJKoZIhvcNAQEL
-BQADggIBAD1SRzFIq7akymHwSFmOGjf1degQvfZ80fCygQgQ9EQ0XYoePrXFGJO3
-6trvPcShe+/gFk3YJ13MdoIfnFT3PoquwCL2JOWgiBf9vQOX2yWUeVx/EShLQnSa
-mog7mUqL04UVd9IIGrH4N5yegc+E/2UrWFxcuuAvEsm6WPcna8EO+ke5hIDh/4Sn
-1jnUhKts2+SCC07PyWFInp+vzSJSps83XuO6qIi253cvVyMLsMLwsOyq2KvQSMPe
-JPIoFTf3Oz/83eZ1s/oYQZsF29weFTv+Lu6kEn9sgIXVc3Mc/gy4CvxSXL8r9nUd
-Wo1R47ITrJdDDIEfL6ojlMUJhTAAc+u4ri7OLnWKYIkBUKjCxiJabHhFeHBEWwGi
-rhEnRTTGwl/pedz5EGzGhmlJedh9euDIxlaVuzpeQQtqSCUHuNHc1OWxj/ULXdyo
-nJhKzw4V6Zewh7Gwu6FozqqfwNidRLYuUVD4Nl0g7RuZkQYAYk71vLi5AOmlUrqd
-77D2D1SXWlIkZ6U4RGmHPLX1mf97NtwgEWHnu6SAU/tA0i8CWDL014EEzEj5kTP8
-zg4bUn1YtHnlLuNabedlw1vI5fZ1VXEPPBsjJ6A1alC3d4LEOQq3YJ7TCwqtc9eX
-3iakJwecQ4fxHOv76czyqmErPI1mmPJ93mPNJ1xUHjxVUXFctBKO
------END CERTIFICATE-----
diff --git a/static/index.html b/static/index.html
index eb4093a..502abe1 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1,15 +1,9 @@
 <!DOCTYPE html>
 <html>
 
-<h1>
-  Selfhosted Services
-</h1>
 
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <script src="https://unpkg.com/htmx.org@1.9.11"
-    integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0"
-    crossorigin="anonymous"></script>
   <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
   <link rel="stylesheet" href="./style.css">
 
@@ -17,8 +11,11 @@
 
 <body>
 
-  <ul class="lasdist">
-    <div class="card derp" _="on click toggle .trunc on me">
+<h1>
+  Selfhosted Services
+</h1>
+  <ul class="list">
+    <div class="card trunc" _="on click toggle .trunc on me">
       <img class="icon" src="nextcloud_icon_14.png">
       <h3>Nextcloud</h3>
       <p class="text">
@@ -33,23 +30,76 @@
           <code class="link">
             https://cloud.sondell.org/
           </code>
-          <button
-            style="font:inherit;font-size:.8em;background:#3465a4;color:white;border:none;padding: 0 .4em; border-radius: .4em"
-            _="on click
+          <button class="url" _="on click
               writeText(my previousElementSibling's innerText) into navigator's clipboard
               put 'copied!' into me
               wait 1s
-              put 'copy' into me">
-            copy
+              put 'copy url' into me">
+            copy url
           </button>
         </p>
         <span>
 
-          <a class="app-link" href="https://nextcloud.com/install/#card-clients-btns">
-            <img src="./desktop.svg" height="40">
+          <a class="app-link desktop" href="https://www.onlyoffice.com/download-desktop.aspx#desktop">
+            <p>Desktop App</p>
           </a>
 
-          <a class="app-link" href= "https://play.google.com/store/apps/details?id=com.nextcloud.client" rel="nofollow">
+          <a class="app-link" href="https://play.google.com/store/apps/details?id=com.nextcloud.client" rel="nofollow">
+            <img src="./googleplay-trim.png" alt="Download from Google Play" height="40"
+              data-canonical-src="https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png"
+              style="max-width: 100%;">
+          </a>
+
+          <a class="app-link" href="https://itunes.apple.com/us/app/nextcloud/id1125420102" rel="nofollow">
+            <img
+              src="https://camo.githubusercontent.com/c4395f930c17c2f878dbd98b55d461375f6feb7a998e0ac6e3be2376b8429b8a/68747470733a2f2f646576656c6f7065722e6170706c652e636f6d2f6173736574732f656c656d656e74732f6261646765732f646f776e6c6f61642d6f6e2d7468652d6170702d73746f72652e737667"
+              alt="the Nextcloud iOS files app" height="40"
+              data-canonical-src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg"
+              style="max-width: 100%;">
+          </a>
+          <a class="app-link" href="https://cloud.sondell.org" rel="nofollow">
+            <img src="./pwa-badge.png" alt="Demo of the Nextcloud iOS files app" height="40"
+              data-canonical-src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg"
+              style="max-width: 100%;">
+          </a>
+
+        </span>
+      </div>
+    </div>
+
+    <div id="onlyoffice" class="card" _="on click toggle .trunc on me">
+      <img class="icon" src="./onlyoffice.png">
+      <h3>Onlyoffice</h3>
+      <p class="text">
+        OnlyOffice is a free software
+        office suite and ecosystem of collaborative applications. It features online
+        editors for text documents, spreadsheets, presentations, forms and PDFs, and the
+        room-based collaborative platform. Our onlyoffice server is integreated with our nextcloud.
+      </p>
+      <div class="footer" _="on click halt the event's bubbling">
+        <h4>Get started</h4>
+        <p>
+          Download the app for your device and connect to our cloud with the server adress:
+          <code class="link">
+            https://cloud.sondell.org/
+          </code>
+          <button class="url" _="on click
+              writeText(my previousElementSibling's innerText) into navigator's clipboard
+              put 'copied!' into me
+              wait 1s
+              put 'copy url' into me
+              ">
+            copy url
+          </button>
+        </p>
+        <span>
+
+          <a class="app-link desktop" href="https://www.onlyoffice.com/download-desktop.aspx#desktop">
+            <!- img src="./desktop.svg" height="40" ->
+            <p>Desktop App</p>
+          </a>
+
+          <a class="app-link" href="https://play.google.com/store/apps/details?id=com.nextcloud.client" rel="nofollow">
             <img src="./googleplay-trim.png" alt="Download from Google Play" height="40"
               data-canonical-src="https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png"
               style="max-width: 100%;">
@@ -71,18 +121,6 @@
         </span>
       </div>
     </div>
-
-    <div class="card">
-      <img class="icon" src="nextcloud_icon_14.png">
-      <h3>Nextcloud</h3>
-      <p class="text">
-        Mollis, ante non euismod ornare, orci diam ornare orci, eu mattis
-        tortor lectus at erat. Nam rutrum erat nec euismod lacinia. Curabitur
-        et velit ut mauris euismod tempus. Fusce pharetra augue lectus, quis
-        maximus quam auctor pellentesque.
-      </p>
-      <a class="footer" href="https://cloud.sondell.org">web app</a>
-    </div>
   </ul>
 </body>
 
diff --git a/static/key.pem b/static/key.pem
deleted file mode 100644
index edb4be1..0000000
--- a/static/key.pem
+++ /dev/null
@@ -1,54 +0,0 @@
------BEGIN ENCRYPTED PRIVATE KEY-----
-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
-EHU8dH9MirHEhLDPbxlZnA==
------END ENCRYPTED PRIVATE KEY-----
diff --git a/static/onlyoffice.png b/static/onlyoffice.png
new file mode 100644
index 0000000..0943f4b
Binary files /dev/null and b/static/onlyoffice.png differ
diff --git a/static/style.css b/static/style.css
index 3383786..15062da 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,3 +1,10 @@
+body {
+	padding-left: 2%;
+	padding-right: 2%;
+	padding-bottom: 4em;
+
+}
+
 .icon {
 	height: 100px;
 	float: left;
@@ -6,27 +13,66 @@
 }
 
 .app-link {
-	margin: 6px;
 	text-decoration: none;
+
+	img {
+		margin: 6px 6px 0px 6px;
+	}
 }
 
 .link {
 	color: green;
 }
 
+button.url {
+	font: inherit;
+	font-size: .8em;
+	background: #3465a4;
+	color: white;
+	border: none;
+	padding: 0 .4em;
+	border-radius: .4em;
+
+	&:hover {
+		background: lightblue;
+	}
+}
+
+.app-link.desktop {
+	color: white;
+	background-color: black;
+	display: inline-block;
+	text-align: center;
+	height: 40px;
+	width: 120px;
+	border-radius: 5px;
+	overflow: hidden;
+
+	p {
+		display: inline;
+		line-height: 40px;
+		vertical-align: middle;
+		font-family: sans;
+		font-weight: 500;
+	}
+}
+
 .list {
-	display: flex;
+	/* display: flex; */
 	flex-direction: column;
+	padding: 0px;
 }
 
 .card {
-	border: 1px solid #1948e3;
+	/* border: 2px solid #1948e3; */
+	border: 2px solid darkblue;
 	border-radius: 25px;
-	margin: 0 auto;
+	margin: 0 0 0 0;
 	padding: 1em;
+	max-width: 400em;
 
 	&:hover {
-		background-color: lightblue;
+		background-color: lightgoldenrodyellow;
 	}
 
 	&:not(:last-of-type) {
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..11dab0c
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
+  <link rel="stylesheet" href="./style.css">
+  <title>Sondell</title>
+</head>
+
+<body>
+  {% block content %} 
+  {% endblock %}
+</body>
+
+</html>
diff --git a/templates/footer.html b/templates/footer.html
new file mode 100644
index 0000000..7d7e489
--- /dev/null
+++ b/templates/footer.html
@@ -0,0 +1,5 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+{% endblock content %}
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..957be60
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,32 @@
+{% extends "base.html" %}
+
+{% block content %}
+<h1 class="title">
+	Selfhosted Services
+</h1>
+
+<ul class="list">
+	{% for card_path in section.subsections %}
+	{% set card = get_section(path=card_path) %}
+	<div class="card trunc" _="on click toggle .trunc on me">
+		<img class="icon" src="{{ card.extra.icon }}">
+		<h2> {{ card.title }} </h2>
+		<p class="text">
+			{{ card.content | markdown(inline=true) | safe }}
+		</p>
+		<div class="footer" _="on click halt the event's bubbling">
+			{% set footer = get_section(path=card.subsections[0]) %}
+			{{ footer.content | markdown(inline=true) | safe }}
+		<div>
+		{% for page in footer.pages %}
+		{{ page.content | markdown(inline=true) | safe }}
+		{% endfor %}
+		</div>
+
+		</div>
+	</div>
+	{% endfor %}
+</ul>
+
+
+{% endblock content %}