diff --git a/favicon.png b/favicon.png
new file mode 100644
index 0000000..4ee4a46
Binary files /dev/null and b/favicon.png differ
diff --git a/index.css b/index.css
index 62bb62d..65ec01d 100644
--- a/index.css
+++ b/index.css
@@ -1,117 +1,142 @@
+:root {
+  --background: rgb(255, 255, 230);
+  --background-intro: rgb(250, 220, 120);
+  --text: rgb(50, 50, 50);
+  --sun: rgb(245, 180, 100);
+  --hill: rgb(50, 235, 150);
+  --hillshade: rgb(40, 160, 100);
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: rgb(0, 45, 60);
+    --background-intro: rgb(0, 70, 100);
+    --text: rgb(255, 255, 255);
+    --sun: rgb(105, 210, 255);
+    --hill: rgb(0, 95, 135);
+    --hillshade: rgb(0, 45, 60);
+  }
+}
 * {
   box-sizing: border-box;
-  scrollbar-color: #ff8282 #3c3c5a;
-}
-*::-webkit-scrollbar {
-  background: #3c3c5a;
-  width: 6px;
-}
-*::-webkit-scrollbar-thumb {
-  background: #ff8282;
-}
-html {
-  overflow: hidden;
+  scrollbar-color: var(--sun) var(--background-intro);
 }
 body {
-  background: linear-gradient(rgb(15, 15, 20), rgb(65, 50, 80));
-  color: rgb(245, 245, 255);
+  background: var(--background);
+  color: var(--text);
   font-family: 'Lucida Console', 'Courier New', monospace;
   line-height: 1.8;
   margin: 0;
-  scroll-behaviour: smooth;
 }
-solarsystem {
-  background: url(stars.png);
-  display: block;
-  min-height: 100vh;
+header {
+  background: var(--background-intro);
+  color: var(--text);
+  display: flex;
+  flex-direction: column;
+  height: 40vh;
+  justify-content: center;
   overflow: hidden;
   position: relative;
+  text-align: center;
 }
-planet {
-  background: linear-gradient(-60deg, rgb(30, 30, 40), rgb(27, 56, 70) 200%);
+header h1 {
+  font-size: 3.5em;
+  margin: 0;
+  z-index: 10;
+}
+header p {
+  margin: 0;
+  z-index: 10;
+}
+header sun {
+  background: var(--sun);
   border-radius: 100%;
-  bottom: 50vh;
-  height: 60vh;
-  left: 70vw;
+  height: 10vh;
+  left: 30vw;
   position: absolute;
-  transform: translate(-50%,50%);
-  width: 60vh;
+  top: 3vh;
+  width: 10vh;
 }
-moon {
-  background: linear-gradient(-60deg, rgb(20, 23, 28), rgb(108, 97, 97));
-  border-radius: 100%;
-  height: 4vh;
-  position: absolute;
-  right: 16vh;
-  top: 20vh;
-  width: 4vh;
-}
-surface {
-  background: linear-gradient(rgb(68, 43, 43), rgb(0, 0, 0));
+header hill {
+  background: var(--hill);
+  border-radius: 40px;
   bottom: 0;
-  height: 50vh;
-  left: 50%;
+  height: 40vh;
+  left: 50vw;
   position: absolute;
-  transform: translate(-50vw, 0);
-  width: 100vw;
+  transform: rotate(45deg) translate(50%, 50%);
+  width: 40vh;
 }
-sign {
-  animation: 5s signsway 0s ease infinite;
-  bottom: 50%;
-  left: 50%;
+header hillshade {
+  background: var(--hillshade);
+  border-radius: 80px;
+  bottom: -5vh;
+  height: 40vh;
+  left: 30vw;
   position: absolute;
-  transform-origin: bottom center;
-  transform: translate(-50%,0) rotate(8deg);
+  transform: rotate(45deg) translate(50%, 50%);
+  width: 40vh;
 }
-@keyframes signsway {
-  from { transform: translate(-50%,0) rotate(10deg); }
-  50%  { transform: translate(-50%,0) rotate(8deg); }
-  to   { transform: translate(-50%,0) rotate(10deg); }
+main {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 20px;
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: 20px;
 }
-sign content {
-  background: rgb(98, 49, 37);
-  border: 5px outset rgb(49, 17, 17);
-  color: rgb(193, 193, 193);
-  display: block;
-  height: 200px;
-  overflow: hidden;
+main article {
+  background: var(--background-intro);
+  border-radius: 10px;
   padding: 20px;
   text-align: center;
-  width: 300px;
+  display: flex;
+  flex-wrap: wrap;
 }
-sign pole {
-  background: linear-gradient(rgb(32, 11, 11), rgb(47, 27, 27));
-  border-radius: 0 0 20px 5px;
-  bottom: 0;
-  content: '';
-  display: block;
-  height: 120px;
-  left: 50%;
-  position: relative;
-  transform: translate(-50%, -1px);
-  width: 20px;
+main article a {
+  background: var(--background);
+  border-bottom: 2px solid var(--text);
+  border-radius: 5px;
+  color: var(--text);
+  padding: 10px 14px;
+  text-decoration: none;
+  transition: border .15s ease, margin .15s ease;
+  margin: 0 auto;
+  align-self: end;
 }
-sun {
-  background: rgb(236, 176, 35);
-  border-radius: 100%;
-  box-shadow: 0 0 10px rgb(236, 176, 35);
-  height: 5vh;
-  left: 8vh;
-  position: absolute;
-  top: 18vh;
-  width: 5vh;
-  z-index: -10;
+main article a:hover {
+  border-bottom: 1px solid var(--text);
+  margin: 1px auto 0 auto;
 }
-footer {
-  bottom: 0;
-  color: rgb(68, 43, 43);
-  position: fixed;
-  width: 100vw;
+main article a:active {
+  border: 0;
 }
-footer a {
-  color: rgb(68, 43, 43);
+main article h1 {
+  font-size: 1.8em;
+  margin: 0 auto;
 }
-.version {
-  float: right;
-  padding: 5px 20px;
+main article p {
+  margin: auto;
+  padding: 10px 0;
+}
+@media (max-width: 1000px) {
+  header hill {
+    transform: rotate(45deg) translate(40%, 70%);
+  }
+  header hillshade {
+    transform: rotate(45deg) translate(20%, 80%);
+  }
+  main {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 600px) {
+  main {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+@media (prefers-color-scheme: dark) {
+  header sun {
+    left: unset;
+    right: 30vw;
+  }
 }
diff --git a/index.html b/index.html
index 8834729..d341995 100644
--- a/index.html
+++ b/index.html
@@ -1,29 +1,63 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <title>cozy.town</title>
+    <title>Cozy Town – Cozy Services for Cozy Townies</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="https://cozy.town/index.css" type="text/css" media="screen" />
-    <link rel="icon" type="image/png" href="/favicon.png">
+    <link rel="stylesheet" href="index.css" type="text/css" media="screen" />
+    <link rel="icon" type="image/png" href="favicon.png">
   </head>
   <body>
-    <solarsystem>
-      <planet>
-        <moon></moon>
-      </planet>
-      <surface>
-        <sign>
-          <content>It's not cozy here for now, this little universe has to form itself first.<br /><br />:)</content>
-          <pole></pole>
-        </sign>
-      </surface>
+    <header>
+      <h1>Cozy Town</h1>
+      <p>Cozy Services for Cozy Townies</p>
       <sun></sun>
-    </solarsystem>
-    <footer>
-      <section class="version">
-        <a href="https://git.vrifox.cc/cozy.town/website">concept 2020-12-29</a>
-      </section>
-    </footer>
+      <hillshade></hillshade>
+      <hill></hill>
+    </header>
+    <main>
+      <article class="matrix">
+        <h1>Matrix</h1>
+        <p>Matrix is an open-source, decentralised and secure communication standard.</p>
+        <a href="https://chat.cozy.town">Chat</a>
+        <a href="https://chat.cozy.town/register">Register</a>
+      </article>
+      <article class="xmpp">
+        <h1>XMPP/Jabber</h1>
+        <p>XMPP/Jabber is an open-source, decentralised and secure communication standard.</p>
+        <a href="https://xmpp.cozy.town">Chat</a>
+        <a href="https://xmpp.cozy.town/register">Register</a>
+      </article>
+      <!--<article class="ttrss">
+        <h1>TTRSS</h1>
+        <p>XMPP/Jabber is an open-source, decentralised and secure communication standard.</p>
+        <a href="https://feed.cozy.town">Read</a>
+      </article>-->
+      <article class="gitea">
+        <h1>Gitea</h1>
+        <p>Gitea is an open-source (source code) version control software.</p>
+        <a href="https://code.cozy.town">Code</a>
+      </article>
+      <!--<article class="nextcloud">
+        <h1>Nextcloud</h1>
+        <p>XMPP/Jabber is an open-source, decentralised and secure communication standard.</p>
+        <a href="https://cloud.cozy.town"></a>
+      </article>-->
+      <!--<article class="pleroma">
+        <h1>Pleroma</h1>
+        <p>Pleroma is an open-source and decentralised social network based on the fediverse.</p>
+        <a href="https://fedi.cozy.town">Socialize</a>
+      </article>-->
+      <!--<article class="etherpad">
+        <h1>Etherpad</h1>
+        <p>Etherpad is an open-source real time editor.</p>
+        <a href="https://text.cozy.town">Write</a>
+      </article>-->
+      <article class="mumble">
+        <h1>Mumble</h1>
+        <p>Mumble is an open-source, decentralised and secure voice chat.</p>
+        <a href="https://mumble.cozy.town">Talk</a>
+      </article>
+    </main>
   </body>
 </html>
diff --git a/stars.png b/stars.png
deleted file mode 100644
index 86b42b8..0000000
Binary files a/stars.png and /dev/null differ