diff --git a/assets/img/icons/header/download-black.svg b/assets/img/icons/header/download-black.svg
new file mode 100644
index 0000000..17f1bcd
--- /dev/null
+++ b/assets/img/icons/header/download-black.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 0.72 0.72"
+   fill="none"
+   version="1.1"
+   id="svg53761"
+   sodipodi:docname="download-black.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs53765" />
+  <sodipodi:namedview
+     id="namedview53763"
+     pagecolor="#000000"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="true"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="31.819805"
+     inkscape:cx="12.85363"
+     inkscape:cy="13.010765"
+     inkscape:window-width="3410"
+     inkscape:window-height="1357"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg53761" />
+  <path
+     style="color:#000000;fill:#000000;stroke-width:0.0719988;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+     d="m 0.35997231,0 c -0.039757,4.7409529e-6 -0.0719854,0.0322332 -0.0719902,0.0719902 V 0.47417117 L 0.12289872,0.30908779 c -0.02811638,-0.0281124 -0.07369804,-0.0281124 -0.10181442,0 -0.0281124,0.0281164 -0.0281124,0.073698 0,0.10181442 l 0.2879948,0.2879948 c 0.0134999,0.0135079 0.0318111,0.021098 0.0509072,0.021103 0.0190967,-4.94e-6 0.0374081,-0.007595 0.0509072,-0.021103 l 0.2879948,-0.2879948 c 0.0281124,-0.0281164 0.0281124,-0.073698 0,-0.10181442 -0.0281164,-0.0281124 -0.073698,-0.0281124 -0.10181442,0 L 0.43199051,0.47417117 V 0.0719902 C 0.43198577,0.0322254 0.39974511,-6.3990471e-6 0.35998031,0 Z"
+     id="path53759"
+     sodipodi:nodetypes="scccccccccccccss" />
+</svg>
diff --git a/assets/img/icons/header/info-black.svg b/assets/img/icons/header/info-black.svg
new file mode 100644
index 0000000..2886522
--- /dev/null
+++ b/assets/img/icons/header/info-black.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+
+<svg
+   width="24.000401"
+   height="24.000401"
+   viewBox="0 0 0.72001202 0.72001202"
+   fill="none"
+   version="1.1"
+   id="svg53698"
+   sodipodi:docname="info-black.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs53702" />
+  <sodipodi:namedview
+     id="namedview53700"
+     pagecolor="#000000"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="true"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="31.819805"
+     inkscape:cx="13.042192"
+     inkscape:cy="13.859293"
+     inkscape:window-width="3410"
+     inkscape:window-height="1357"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg53698" />
+  <path
+     style="color:#000000;fill:#000000;stroke-width:0.0720018;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none"
+     d="M 0.35982946,1.8379106e-8 C 0.32007077,4.7592483e-6 0.28784106,0.03223453 0.28783626,0.07199322 c 4.74e-6,0.03975869 0.0322343,0.0719884 0.0719932,0.0719932 h 7.0612e-4 c 0.0397589,-4.74e-6 0.0719884,-0.0322343 0.0719932,-0.0719932 C 0.43252404,0.03223453 0.40029447,4.8192593e-6 0.36053558,1.8379106e-8 Z m 0,0.288006801620894 c -0.0397587,4.74e-6 -0.0719884,0.0322343 -0.0719932,0.0719932 v 0.2880068 c 4.74e-6,0.0397587 0.0322343,0.0719884 0.0719932,0.0719932 0.0397667,6.3e-6 0.0720084,-0.0322265 0.0720132,-0.0719932 v -0.2880068 c -4.74e-6,-0.0397665 -0.0322467,-0.0719994 -0.0720132,-0.0719932 z"
+     id="path53696"
+     sodipodi:nodetypes="scsscssccccccc" />
+</svg>
diff --git a/assets/views/footer.html b/assets/views/footer.html
index 34204b3..d2aa1db 100644
--- a/assets/views/footer.html
+++ b/assets/views/footer.html
@@ -1,36 +1,56 @@
 <div class="flexrow footer">
     <div class="wrapgroup">
-      <a href="https://pogmom.me" class="flexbutton">
-        <img src="assets/img/icons/social/home.svg">
-      </a>
-      <a href="https://masto.pogmom.me/@pogmommy" class="flexbutton">
-        <img src="assets/img/icons/social/mastodon.svg">
-      </a>
-      <a href="http://pixel.pogmom.me/pogmommy" class="flexbutton">
-        <img alt="pixelfed icon" src="assets/img/icons/social/pixelfed.svg">
-      </a>
-      <a href="https://peertube.pogmom.me/a/pogmommy" class="flexbutton">
-        <img src="assets/img/icons/social/peertube.svg">
-      </a>
-      <a href="https://matrix.to/#/@pogmommy:matrix.pogmom.me" class="flexbutton">
-        <img src="assets/img/icons/social/matrix.svg">
-      </a>
+      <div class="flexbutton pinkborder">
+        <a href="https://pogmom.me">
+          <img src="assets/img/icons/social/home.svg">
+        </a>
+      </div>
+      <div class="flexbutton pinkborder">
+        <a href="https://masto.pogmom.me/@pogmommy">
+          <img src="assets/img/icons/social/mastodon.svg">
+        </a>
+      </div>
+      <div class="flexbutton pinkborder">
+        <a href="http://pixel.pogmom.me/pogmommy">
+          <img alt="pixelfed icon" src="assets/img/icons/social/pixelfed.svg">
+        </a>
+      </div>
+      <div class="flexbutton pinkborder">
+        <a href="https://peertube.pogmom.me/a/pogmommy">
+          <img src="assets/img/icons/social/peertube.svg">
+        </a>
+      </div>
+      <div class="flexbutton pinkborder">
+        <a href="https://matrix.to/#/@pogmommy:matrix.pogmom.me">
+          <img src="assets/img/icons/social/matrix.svg">
+        </a>
+      </div>
     </div>
     <div class="wrapgroup">
-      <a href="https://git.pogmom.me/pogmommy" class="flexbutton">
-        <img src="assets/img/icons/social/gitea.svg">
-      </a>
-      <a href="mailto:penelope@pogmom.me" class="flexbutton">
-        <img src="assets/img/icons/social/email.svg">
-      </a>
-      <a href="https://trakt.tv/users/pogmommy" class="flexbutton">
-        <img src="assets/img/icons/social/trakt.svg">
-      </a>
-      <a href="https://www.last.fm/user/Pogmommy" class="flexbutton">
-        <img src="assets/img/icons/social/lastfm.svg">
-      </a>
-      <a href="https://merch.pogmom.me" class="flexbutton">
-        <img src="assets/img/icons/social/shop.svg">
-      </a>
+      <div class="flexbutton pinkborder">
+        <a href="https://git.pogmom.me/pogmommy">
+          <img src="assets/img/icons/social/gitea.svg">
+        </a>
+      </div>
+      <div class="flexbutton pinkborder">
+        <a href="mailto:penelope@pogmom.me">
+          <img src="assets/img/icons/social/email.svg">
+        </a>
+      </div>
+      <div class="flexbutton pinkborder">
+        <a href="https://trakt.tv/users/pogmommy">
+          <img src="assets/img/icons/social/trakt.svg">
+        </a>
+      </div>
+      <div class="flexbutton pinkborder">
+        <a href="https://www.last.fm/user/Pogmommy">
+          <img src="assets/img/icons/social/lastfm.svg">
+        </a>
+      </div>
+      <div class="flexbutton pinkborder">
+        <a href="https://merch.pogmom.me">
+          <img src="assets/img/icons/social/shop.svg">
+        </a>
+      </div>
     </div>
   </div>
diff --git a/assets/views/header.html b/assets/views/header.html
index 8840e53..cd0d857 100644
--- a/assets/views/header.html
+++ b/assets/views/header.html
@@ -1,24 +1,24 @@
 <div class="flexrow header">
     <div class="wrapgroup">
-      <div class="flexbutton">
+      <div class="flexbutton pinkborder">
         <a href="/">
           <img alt="account icon" src="/assets/img/icons/header/suite.svg">
           <p>suite</p>
         </a>
       </div>
-      <div class="flexbutton">
+      <div class="flexbutton pinkborder">
         <a href="https://accounts.pogmom.me">
           <img alt="account icon" src="/assets/img/icons/header/accounts.svg">
           <p>account</p>
         </a>
       </div>
-      <div class="flexbutton">
+      <div class="flexbutton pinkborder">
         <a href="https://cloud.pogmom.me/apps/forms/s/wsEkks78nqJEZCkEYpGoMNr5">
           <img src="/assets/img/icons/header/register.svg">
           <p>register</p>
         </a>
       </div>
-      <div class="flexbutton">
+      <div class="flexbutton pinkborder">
         <a href="https://requests.pogmom.me/">
           <img src="/assets/img/icons/header/request.svg">
           <p>request</p>
@@ -26,19 +26,19 @@
       </div>
     </div>
     <div class="wrapgroup">
-      <div class="flexbutton">
+      <div class="flexbutton pinkborder">
         <a href="/about.html">
           <img src="/assets/img/icons/header/info.svg">
           <p>about</p>
         </a>
       </div>
-      <div class="flexbutton">
+      <div class="flexbutton pinkborder">
         <a href="https://liberapay.com/pogmommy/donate">
           <img src="/assets/img/icons/header/donate.svg">
           <p>donate</p>
         </a>
       </div>
-      <div class="flexbutton">
+      <div class="flexbutton pinkborder">
         <a  href="https://pogmom.me/status.html">
           <img src="/assets/img/icons/header/status.svg">
           <p>status</p>
diff --git a/clients.html b/clients.html
new file mode 100644
index 0000000..09ac95a
--- /dev/null
+++ b/clients.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Pogmom Suite | About</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <link rel="stylesheet" href="/style/css/style.css">
+</head>
+<body>
+  <h1>Pogmom Suite</h1>
+  <div>An Archival & Decentralization Project</div>
+  <div id="header"></div>
+  <hr>
+  <div id="nextcloud">
+    <h2>Nextcloud</h2>
+    <div class="flexrow">
+      <div class="clientgroup pinkborder">
+        <h2>Desktop</h2>
+        <p>Visit the <a href="https://nextcloud.com/install/#desktop-files">Nextcloud website</a> to download the desktop client for your system.</p>
+      </div>
+      <div class="clientgroup pinkborder">
+        <h2>Mobile</h2>
+        <h3>Android</h3>
+        <p>Nextcloud<br>Official Nextcloud client for Android<br><a href="https://f-droid.org/packages/com.nextcloud.client/">F-Droid &gt;</a><br><a href="https://play.google.com/store/apps/details?id=com.nextcloud.client">Google Play Store &gt;</a></p>
+        <h3>iOS</h3>
+        <p>Nextcloud<br>Official Nextcloud client for iOS<br><a href="https://itunes.apple.com/us/app/nextcloud/id1125420102">App Store &gt;</a></p>
+      </div>
+    </div>
+  </h2>
+  </div>
+  <div id="mastodon">
+    <h2>Mastodon</h2>
+    <div class="flexrow">
+      <div class="clientgroup pinkborder">
+        <h2>Desktop</h2>
+        <p>It is recommended to use your browser to interface with Mastodon on desktop platforms</p>
+      </div>
+      <div class="clientgroup pinkborder">
+        <h2>Mobile</h2>
+        <h3>Android</h3>
+        <p>Fedilab<br>A multifunctional Android client to access the distributed Fediverse<br><a href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/">F-Droid &gt;</a><br><a href="https://play.google.com/store/apps/details?id=app.fedilab.android">Google Play Store &gt;</a></p>
+        <p>Mastodon<br>Official Mastodon client for Android<br><a href="https://f-droid.org/packages/org.joinmastodon.android/">F-Droid &gt;</a><br><a href="https://play.google.com/store/apps/details?id=org.joinmastodon.android">Google Play Store &gt;</a></p>
+        <h3>iOS</h3>
+        <p>Mastodon<br>Official Mastodon client for iOS<br><a href="https://apps.apple.com/us/app/mastodon-for-iphone/id1571998974">App Store &gt;</a></p>
+      </div>
+    </div>
+  </div>
+  <div id="pixelfed">
+    <h2>Pixelfed</h2>
+    <div class="flexrow">
+      <div class="clientgroup pinkborder">
+        <h2>Desktop</h2>
+      </div>
+      <div class="clientgroup pinkborder">
+        <h2>Mobile</h2>
+      </div>
+    </div>
+  </div>
+  <div id="peertube">
+    <h2>Peertube</h2>
+    <div class="flexrow">
+      <div class="clientgroup pinkborder">
+        <h2>Desktop</h2>
+      </div>
+      <div class="clientgroup pinkborder">
+        <h2>Mobile</h2>
+      </div>
+    </div>
+  </div>
+  <div id="element">
+    <h2>Element</h2>
+    <div class="flexrow">
+      <div class="clientgroup pinkborder">
+        <h2>Desktop</h2>
+      </div>
+      <div class="clientgroup pinkborder">
+        <h2>Mobile</h2>
+      </div>
+    </div>
+  </div>
+  <div id="jellyfin">
+    <h2>Jellyfin</h2>
+    <div class="flexrow">
+      <div class="clientgroup pinkborder">
+        <h2>Desktop</h2>
+      </div>
+      <div class="clientgroup pinkborder">
+        <h2>Mobile</h2>
+      </div>
+    </div>
+  </div>
+  <div id="airsonic">
+    <h2>Airsonic</h2>
+    <div class="flexrow">
+      <div class="clientgroup pinkborder">
+        <h2>Desktop</h2>
+      </div>
+      <div class="clientgroup pinkborder">
+        <h2>Mobile</h2>
+      </div>
+    </div>
+  </div>
+  <div id="calibre">
+    <h2>Calibre</h2>
+    <div class="flexrow">
+      <div class="clientgroup pinkborder">
+        <h2>Desktop</h2>
+      </div>
+      <div class="clientgroup pinkborder">
+        <h2>Mobile</h2>
+      </div>
+    </div>
+  </div>
+  <div id="emulatorjs">
+    <h2>EmulatorJS</h2>
+    <div class="flexrow">
+      <div class="clientgroup pinkborder">
+        <h2>Desktop</h2>
+      </div>
+      <div class="clientgroup pinkborder">
+        <h2>Mobile</h2>
+      </div>
+    </div>
+  </div>
+  <div id="minecraft">
+    <h2>Minecraft</h2>
+    <div class="flexrow">
+      <div class="clientgroup pinkborder">
+        <h2>Desktop</h2>
+      </div>
+      <div class="clientgroup pinkborder">
+        <h2>Mobile</h2>
+      </div>
+    </div>
+  </div>
+  <hr>
+  <div id="footer"></div>
+  <script src="/style/js/views.js"></script>
+</body>
+</html>
diff --git a/index.html b/index.html
index f95320f..a2b36b8 100644
--- a/index.html
+++ b/index.html
@@ -14,79 +14,157 @@
   <h2>Social</h2>
   <div class="flexrow">
     <div class="wrapgroup">
-      <div class="flexbutton">
+      <div class="flexbutton pinkborder">
         <a href="https://cloud.pogmom.me">
           <img src="assets/img/icons/suite/nextcloud.svg">
           <p>Nextcloud</p>
         </a>
+        <div class="buttondetails">
+          <a href="/info.html#nextcloud">
+            <img src="/assets/img/icons/header/info.svg">
+          </a>
+          <a href="/clients.html#nextcloud">
+            <img src="/assets/img/icons/header/download.svg">
+          </a>
+        </div>
       </div>  
-      <div class="flexbutton">
+      <div class="flexbutton pinkborder">
         <a href="https://masto.pogmom.me">
         <img src="assets/img/icons/suite/mastodon.svg">
         <p>Mastodon</p>
         </a>
+        <div class="buttondetails">
+          <a href="/info.html#mastodon">
+            <img src="/assets/img/icons/header/info.svg">
+          </a>
+          <a href="/clients.html#mastodon">
+            <img src="/assets/img/icons/header/download.svg">
+          </a>
+        </div>
       </div>
     </div>
     <div class="wrapgroup">
-      <div class="flexbutton">
+      <div class="flexbutton pinkborder">
         <a href="https://pixel.pogmom.me">
-        <img src="assets/img/icons/suite/pixelfed.svg">
-        <p>Pixelfed</p>
+          <img src="assets/img/icons/suite/pixelfed.svg">
+          <p>Pixelfed</p>
         </a>
+        <div class="buttondetails">
+          <a href="/info.html#pixelfed">
+            <img src="/assets/img/icons/header/info.svg">
+          </a>
+          <a href="/clients.html#pixelfed">
+            <img src="/assets/img/icons/header/download.svg">
+          </a>
+        </div>
       </div>
-      <div class="flexbutton">
+      <div class="flexbutton pinkborder">
         <a href="https://peertube.pogmom.me">
-        <img src="assets/img/icons/suite/peertube.svg">
-        <p>Peertube</p>
+          <img src="assets/img/icons/suite/peertube.svg">
+          <p>Peertube</p>
         </a>
+        <div class="buttondetails">
+          <a href="/info.html#peertube">
+            <img src="/assets/img/icons/header/info.svg">
+          </a>
+          <a href="/clients.html#peertube">
+            <img src="/assets/img/icons/header/download.svg">
+          </a>
+        </div>
       </div>
-      <div class="flexbutton">
+      <div class="flexbutton pinkborder">
         <a href="https://chat.pogmom.me">
-        <img src="assets/img/icons/suite/element.svg">
-        <p>Element</p>
+          <img src="assets/img/icons/suite/element.svg">
+          <p>Element</p>
         </a>
+        <div class="buttondetails">
+          <a href="/info.html#element">
+            <img src="/assets/img/icons/header/info.svg">
+          </a>
+          <a href="/clients.html#element">
+            <img src="/assets/img/icons/header/download.svg">
+          </a>
+        </div>
       </div>
     </div>
   </div>
   <h2>Multimedia</h2>
   <div class="flexrow">
     <div class="wrapgroup">
-      <div class="flexbutton">
+      <div class="flexbutton pinkborder">
         <a href="https://listen.pogmom.me">
-        <img src="assets/img/icons/suite/calibre.svg">
-        <p>Calibre</p>
+          <img src="assets/img/icons/suite/jellyfin.svg">
+          <p>Jellyfin</p>
         </a>
+        <div class="buttondetails">
+          <a href="/info.html#jellyfin">
+            <img src="/assets/img/icons/header/info.svg">
+          </a>
+          <a href="/clients.html#jellyfin">
+            <img src="/assets/img/icons/header/download.svg">
+          </a>
+        </div>
       </div>
-      <div class="flexbutton">
+      <div class="flexbutton pinkborder">
         <a href="https://listen.pogmom.me">
-        <img src="assets/img/icons/suite/jellyfin.svg">
-        <p>Jellyfin</p>
-        </a>
-      </div>
-      <div class="flexbutton">
-        <a href="https://listen.pogmom.me">
-        <img src="assets/img/icons/suite/airsonic.svg">
-        <p>Airsonic</p>
+          <img src="assets/img/icons/suite/airsonic.svg">
+          <p>Airsonic</p>
         </a>
+        <div class="buttondetails">
+          <a href="/info.html#airsonic">
+            <img src="/assets/img/icons/header/info.svg">
+          </a>
+          <a href="/clients.html#airsonic">
+            <img src="/assets/img/icons/header/download.svg">
+          </a>
+        </div>
       </div>  
+      <div class="flexbutton pinkborder">
+        <a href="https://listen.pogmom.me">
+          <img src="assets/img/icons/suite/calibre.svg">
+          <p>Calibre</p>
+        </a>
+        <div class="buttondetails">
+          <a href="/info.html#calibre">
+            <img src="/assets/img/icons/header/info.svg">
+          </a>
+          <a href="/clients.html#calibre">
+            <img src="/assets/img/icons/header/download.svg">
+          </a>
+        </div>
+      </div>
     </div>
   </div>
   <h2>Games</h2>
   <div class="flexrow">
     <div class="wrapgroup">
-      <div class="flexbutton">
+      <div class="flexbutton pinkborder">
         <a href="https://mc.pogmom.me">
-        <img src="assets/img/icons/suite/emulatorjs.svg">
-        <p>EmulatorJS</p>
+          <img src="assets/img/icons/suite/emulatorjs.svg">
+          <p>EmuJS</p>
         </a>
+        <div class="buttondetails">
+          <a href="/info.html#emulatorjs">
+            <img src="/assets/img/icons/header/info.svg">
+          </a>
+          <a href="/clients.html#emulatorjs">
+            <img src="/assets/img/icons/header/download.svg">
+          </a>
+        </div>
       </div>
-      <div class="flexbutton">
+      <div class="flexbutton pinkborder">
         <a href="https://mc.pogmom.me">
           <img src="assets/img/icons/suite/minecraft.svg">
           <p>Minecraft</p>
         </a>
-        <p>about</p>
-        <p>clients</p>
+        <div class="buttondetails">
+          <a href="/info.html#minecraft">
+            <img src="/assets/img/icons/header/info.svg">
+          </a>
+          <a href="/clients.html#minecraft">
+            <img src="/assets/img/icons/header/download.svg">
+          </a>
+        </div>
       </div>
     </div>
   </div>
diff --git a/info.html b/info.html
new file mode 100644
index 0000000..015fcfd
--- /dev/null
+++ b/info.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Pogmom Suite | About</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <link rel="stylesheet" href="/style/css/style.css">
+</head>
+<body>
+  <h1>Pogmom Suite</h1>
+  <div>An Archival & Decentralization Project</div>
+  <div id="header"></div>
+  <hr>
+  <div class="textsection pinkborder" id="nextcloud">
+    <h2>Nextcloud</h2>
+    <p>NextCloud is a productivity and cloud storage platform.<br>
+    <a href="https://nextcloud.com/">Learn more &gt;</a></p>
+  </h2>
+  </div>
+  <div class="textsection pinkborder" id="mastodon">
+    <h2>Mastodon</h2>
+    <p>Mastodon is a federated microblogging social media platform powered by ActivityPub.<br>
+    <a href="https://joinmastodon.org/">Learn more &gt;</a></p>
+  </div>
+  <div class="textsection pinkborder" id="pixel">
+    <h2>Pixelfed</h2>
+    <p>Pixelfed is a federated image sharing social media platform powered by ActivityPub.<br>
+    <a href="https://pixelfed.org/">Learn more &gt;</a></p>
+  </div>
+  <div class="textsection pinkborder" id="peertube">
+    <h2>Peertube</h2>
+    <p>Peertube is a federated video platform powered by ActivityPub.<br>
+    <a href="https://joinpeertube.org/">Learn more &gt;</a></p>
+  </div>
+  <div class="textsection pinkborder" id="element">
+    <h2>Element</h2>
+    <p>Element is a frontend for Matrix, a federated real-time communication platform.<br>
+    <a href="https://element.io/">Learn more &gt;</a></p>
+  </div>
+  <div class="textsection pinkborder" id="jellyfin">
+    <h2>Jellyfin</h2>
+    <p>Jellyfin is a Movie, Television, and Music streaming service.<br>
+    <a href="https://jellyfin.org/">Learn more &gt;</a></p>
+  </div>
+  <div class="textsection pinkborder" id="airsonic">
+    <h2>Airsonic</h2>
+    <p>Airsonic is fully-featured music server powered by the Subsonic API.<br>
+    <a href="https://github.com/airsonic-advanced/airsonic-advanced">Learn more &gt;</a></p>
+  </div>
+  <div class="textsection pinkborder" id="calibre">
+    <h2>Calibre</h2>
+    <p>Calibre-Web is an online reader for Text Books, Novels, Comic Books, and Manga.<br>
+    <a href="https://github.com/janeczku/calibre-web">Learn more &gt;</a></p>
+  </div>
+  <div class="textsection pinkborder" id="emulatorjs">
+    <h2>EmulatorJS</h2>
+    <p>EmulatorJS is a retro game catalog playable in your browser.<br>
+    <a href="https://emulatorjs.org/">Learn more &gt;</a></p>
+  </div>
+  <div class="textsection pinkborder" id="minecraft">
+    <h2>Minecraft</h2>
+    <p>A survival Minecraft server compatible with both the Java and Bedrock editions of Minecraft.<br>
+    <a href="https://minecraft.net">Learn more &gt;</a></p>
+  </div>
+  <hr>
+  <div id="footer"></div>
+  <script src="/style/js/views.js"></script>
+</body>
+</html>
diff --git a/style/css/style.css b/style/css/style.css
index e5581fd..5cf77bc 100644
--- a/style/css/style.css
+++ b/style/css/style.css
@@ -2,14 +2,15 @@ body {
   background-color: #000000;
   margin: 0 5vw;
 }
-h1,h2,p,hr {
+h1,h2,h3,p,a,hr {
   color: #da74e5;
 }
-h1,h2,p{
+h1,h2,h3,p,a{
   font-family: 'Overpass', sans-serif;
   font-weight: 50;
   text-align: center;
   margin-bottom: 0;
+  text-decoration: none;
 }
 h1 {
   font-size: 3em;
@@ -41,9 +42,9 @@ h1 {
   }
 }
 .footer {
-  .wrapgroup > .flexbutton {
-    min-width: 5vmin;
-    padding: 1vmax;
+  .wrapgroup > .flexbutton > a {
+    min-width: 35px;
+/*    padding: 1vmax;*/
   }
 }
 .flexbutton,.flexbutton > a {
@@ -51,27 +52,62 @@ h1 {
   flex-direction: column;
   justify-content: center;
 }
-.flexbutton {
+.pinkborder {
   border-style: solid;
   border-color: #da74e5;
   border-width: 3px;
   border-radius: 8px;
+}
+.flexbutton {
   margin: 1vh 1vw;
   transition: 0.5s;
-  a {
+  > a {
     min-width: 75px;
     text-decoration: none;
     padding: 1.5vh;
-    p {
+    > p {
       font-size: 1em;
       margin-bottom: 0px;
     }
   }
+  > .buttondetails {
+    display:flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-evenly;
+    > a {
+      width: 50%;
+      padding: 10px 0;
+      > img {
+        display: block;
+        margin: 0 auto;
+      }
+    }
+    > a:hover {
+      opacity: 50%;
+    }
+  }
 }
+
 .flexbutton:hover {
   box-shadow: 0px 0px 30px #da75e5dd;
   transition: 0.25s;
 }
+.textsection {
+  padding: 0 2vw 2vh;
+  margin: 2vh 10vw;
+}
+.clientgroup{
+  width: 40%;
+/*  flex-grow:1;*/
+  margin: 0vh 2vw;
+}
+:target {
+/*  box-shadow: 0px 0px 30px #da75e5dd;*/
+  background-color: #da75e533;
+  border-radius: 13px;
+  padding: 2vh 0;
+}
 /* latin-ext */
 @font-face {
   font-family: 'Overpass';