diff --git a/desu.local/frontend/Dockerfile b/desu.local/frontend/Dockerfile
index 6131e17..2583d61 100644
--- a/desu.local/frontend/Dockerfile
+++ b/desu.local/frontend/Dockerfile
@@ -1,4 +1,6 @@
FROM httpd:latest
COPY httpd.conf /usr/local/apache2/conf/httpd.conf
COPY vhost.conf /usr/local/apache2/conf/vhost.conf
+CMD rm /usr/local/apache2/htdocs/index.html
+COPY src/* /usr/local/apache2/htdocs
EXPOSE 80
diff --git a/desu.local/frontend/src/index.php b/desu.local/frontend/src/index.php
new file mode 100644
index 0000000..79a425e
--- /dev/null
+++ b/desu.local/frontend/src/index.php
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <?php include $_SERVER['DOCUMENT_ROOT'].'/src/common-meta.php';?>
+ <link href="/styles/buttons.css" type="text/css" rel="stylesheet" />
+ <title>desu.local</title>
+ </head>
+ <body>
+ <?php include $_SERVER['DOCUMENT_ROOT'].'/src/common-header.php';?>
+ <div class="content">
+ <div class="iconbuttoncontainer">
+ <a href="http://jellyfin.desu.local" class="iconbutton">
+ <i class="fa fa-film"></i>
+ <h1>Jellyfin</h1>
+ <p>Media server, the thing the Roku uses</p>
+ </a>
+ <a href="http://sonarr.desu.local" class="iconbutton">
+ <i class="fa fa-feed"></i>
+ <h1>Sonarr</h1>
+ <p>Media library downloader and organizer</p>
+ </a>
+ <a href="http://transmission.desu.local" class="iconbutton">
+ <i class="fa fa-arrow-circle-down"></i>
+ <h1>Transmission</h1>
+ <p>Torrent client</p>
+ </a>
+ </div>
+ <div class="break"></div>
+ <div class="iconbuttoncontainer">
+ <a href="http://grafana.desu.local" class="iconbutton">
+ <i class="fa fa-line-chart"></i>
+ <h1>Grafana</h1>
+ <p>Monitoring and graphing solution</p>
+ </a>
+ </div>
+ </div>
+ <?php include $_SERVER['DOCUMENT_ROOT'].'/src/common-footer.php';?>
+ </body>
+</html>
diff --git a/desu.local/frontend/src/src/common-footer.php b/desu.local/frontend/src/src/common-footer.php
new file mode 100644
index 0000000..5523499
--- /dev/null
+++ b/desu.local/frontend/src/src/common-footer.php
@@ -0,0 +1,4 @@
+<div class="footer">
+ <p>Copyright © 2019-<?php echo date("Y"); ?> rehashedsalt. Distributed under the terms of the MIT License.</p>
+ <p><a href="https://git.desu.ltd/salt/9iron">source</a> <a href="/">home</a></p>
+</div>
diff --git a/desu.local/frontend/src/src/common-header.php b/desu.local/frontend/src/src/common-header.php
new file mode 100644
index 0000000..c3009ec
--- /dev/null
+++ b/desu.local/frontend/src/src/common-header.php
@@ -0,0 +1,8 @@
+<div class="header">
+ <a href="/" class="logocontainer">
+ <span>
+ <h1>desu.local</h1>
+ <p class="nomobile">Local services and stuffs</p>
+ </span>
+ </a>
+</div>
diff --git a/desu.local/frontend/src/src/common-meta.php b/desu.local/frontend/src/src/common-meta.php
new file mode 100644
index 0000000..e821a7e
--- /dev/null
+++ b/desu.local/frontend/src/src/common-meta.php
@@ -0,0 +1,7 @@
+<!-- Meta -->
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+<link href="/styles/styles.css" type="text/css" rel="stylesheet" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
+<link href="/favicon.ico" rel="shortcut icon" />
diff --git a/desu.local/frontend/src/styles/buttons.css b/desu.local/frontend/src/styles/buttons.css
new file mode 100644
index 0000000..f6e017c
--- /dev/null
+++ b/desu.local/frontend/src/styles/buttons.css
@@ -0,0 +1,37 @@
+/*
+ * buttons.css
+ * Copyright (C) 2020 Vintage Salt
+ *
+ * Distributed under terms of the MIT license.
+ */
+
+/* BIG ICON BUTTONS
+ * Used on the index for services */
+div.iconbuttoncontainer {
+ display: grid;
+ grid-gap: 1em;
+ grid-template-columns: 1fr 1fr 1fr;
+}
+a.iconbutton {
+ background: var(--background-bright);
+ border-radius: 8px;
+ box-shadow: 5px 5px var(--shadow);
+ display: block;
+ padding: 1em;
+ text-align: center;
+}
+a.iconbutton:hover {
+ background: var(--link-hover);
+ color: var(--background);
+}
+a.iconbutton i {
+ font-size: 400%
+}
+
+/* MOBILE */
+@media only screen and (max-width: 600px) {
+ div.iconbuttoncontainer {
+ grid-template-columns: 1fr;
+ }
+}
+
diff --git a/desu.local/frontend/src/styles/styles.css b/desu.local/frontend/src/styles/styles.css
new file mode 100644
index 0000000..1caa8ee
--- /dev/null
+++ b/desu.local/frontend/src/styles/styles.css
@@ -0,0 +1,181 @@
+/*
+ * styles.css
+ * Copyright (C) 2020 Vintage Salt
+ *
+ * Distributed under terms of the MIT license.
+ */
+
+/* GLOBALS */
+
+:root {
+ --background-bright: #fdfcfa;
+ --background: #ecebe9;
+ --line: rgba(0,0,0,0.1);
+ --greenlink: #327117;
+ --greenlink-hover: #47b625;
+ --link: #286a9d;
+ --link-hover: #3ea5f3;
+ --shadow: 8px -5px rgba(0,0,0,0.1);
+ --text: #414040;
+ --text-code: #a7674e;
+}
+html {
+ overflow-y: scroll;
+}
+body {
+ background: var(--background);
+ color: var(--text);
+ font-family: "Roboto", sans-serif;
+ margin: 0;
+}
+
+/* TYPES */
+/* a */
+a {
+ color: var(--link);
+ text-decoration: none;
+ transition: .04s ease-in;
+}
+a:hover {
+ color: var(--link-hover);
+}
+code {
+ color: var(--text-code);
+ display: inline-block;
+ font-size: 12pt;
+ padding: 2px 4px;
+}
+dl {
+ list-style-type: none;
+ margin: 0;
+}
+dl dt {
+ font-weight: bold;
+ margin: 1em 0 0 0;
+}
+dl dd {
+ margin: 0;
+}
+
+/* CUSTOM DIVS AND SPANS */
+a.quickbutton {
+ background: var(--background-bright);
+ border-radius: 8px;
+ box-shadow: 5px 5px var(--shadow);
+ display: block;
+ font-size: 150%;
+ margin: 0.5em 0;
+ padding: 1em;
+ text-align: center;
+}
+a.quickbutton:hover {
+ background: var(--link-hover);
+ color: var(--background);
+}
+div.break {
+ width: 4em;
+ margin: 2em auto;
+ border-bottom: 3px double var(--line);
+}
+div.quote {
+ border-left: 4px solid var(--line);
+ margin: 1em 4em;
+ padding: 1em;
+}
+i.badge {
+ font-size: 200%;
+ float: right;
+}
+img.bigimg {
+ border-radius: 8px;
+ box-shadow: 5px 5px var(--shadow);
+ display: block;
+ margin: 1em auto;
+}
+
+/* HIERARCHICAL CLASSES */
+/* HEADER */
+.header {
+ background: var(--background-bright);
+ box-shadow: 0 5px var(--shadow);
+ text-align: center;
+}
+.logocontainer {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ padding: 1em 0;
+}
+.logo {
+ border-radius: 50%;
+ height: 64px;
+ vertical-align: middle;
+ margin: 0 1em;
+ max-width: 64px;
+}
+.header h1 {
+ display: inline;
+ margin: 0;
+}
+.header p {
+ margin: 0;
+}
+.header nav ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ text-align: center;
+}
+.header nav ul li {
+ display: inline-block;
+ padding: 0.8em;
+}
+.header nav ul li:hover {
+ background: var(--link-hover);
+ color: var(--background);
+ transition: .04s ease-in;
+}
+
+/* CONTENT */
+.content {
+ max-width: 48em;
+ margin: 2em auto;
+ padding: 1em;
+}
+.subcontainer {
+ background: var(--background-bright);
+ border-radius: 8px;
+ box-shadow: 5px 5px var(--shadow);
+ margin: 1em 0;
+ padding: 1em;
+}
+.subcontainer h2 {
+ margin: 0;
+}
+.toc {
+ background: var(--background-bright);
+ border-radius: 4px;
+ box-shadow: 5px 5px var(--shadow);
+ display: inline-block;
+ margin: 0 1em 1em 1em;
+ padding: 0 1em;
+ width: auto;
+}
+
+/* FOOTER */
+.footer {
+ font-size: 11px;
+ line-height: 1.3;
+ margin: 0 0 4em 0;
+ text-align: center;
+}
+.footer p {
+ margin: 0;
+}
+
+/* MOBILE */
+@media only screen and (max-width: 600px) {
+ .nomobile {
+ display: none;
+ }
+}
diff --git a/desu.local/frontend/vhost.conf b/desu.local/frontend/vhost.conf
index bf3efbf..ca2e79f 100644
--- a/desu.local/frontend/vhost.conf
+++ b/desu.local/frontend/vhost.conf
@@ -1,4 +1,7 @@
# vim:set ft=apache:
+<VirtualHost *:80>
+ ServerName desu.local
+</VirtualHost>
<VirtualHost *:80>
ServerName jellyfin.desu.local
ProxyPreserveHost On