diff --git a/www/css/mail.css b/www/css/mail.css
new file mode 100644
index 0000000..0303f56
--- /dev/null
+++ b/www/css/mail.css
@@ -0,0 +1,63 @@
+ul#webmail {
+	margin-top: 0;
+	margin-left: auto;
+	margin-right: auto;
+	table-layout: fixed;
+	display: table;
+	width: 100%;
+	padding: 0;
+}
+ul#webmail li {
+	display: table-cell;
+	text-align: center;
+}
+@media all and (min-width: 980px) {
+	ul#webmail {
+		max-width: 1280px;
+	}
+	ul#webmail li {
+		display: table-cell;
+		text-align: center;
+	}		
+}
+@media all and (max-width: 980px) {
+	ul#webmail {
+		max-width: 650px;
+	}
+	ul#webmail li {
+		display: table-row;
+		text-align: center;
+	}		
+}
+ul#webmail li div {
+	position: relative;
+	background: white;
+	margin: 1em 1em;
+	box-shadow: rgba(0,0,0,.3) 0 .1em .17em;
+	border-radius: .5rem;
+    cursor: pointer;
+}
+ul#webmail li:hover div {
+    box-shadow: rgba(0,0,0,.5) 0 .15em .2em;
+}
+ul#webmail li div a {
+	padding-top: 10em;
+	display: block;
+	text-decoration: none;
+	color: black;
+}
+ul#webmail li#squirrelmail div {
+	background: white url('squirrelmail.png') no-repeat;
+	background-size: auto 10em;
+	background-position: 50% 0;
+}
+ul#webmail li#roundcube div {
+	background: white url('roundcube.png') no-repeat;
+	background-size: auto 10em;
+	background-position: 50% 0;
+}
+ul#webmail li#rainloop div {
+	background: white url('rainloop.png') no-repeat;
+	background-size: auto 10em;
+	background-position: 50% 0;
+}
diff --git a/www/css/rainloop.png b/www/css/rainloop.png
new file mode 100644
index 0000000..1cb320c
Binary files /dev/null and b/www/css/rainloop.png differ
diff --git a/www/css/roundcube.png b/www/css/roundcube.png
new file mode 100644
index 0000000..e9fa36d
Binary files /dev/null and b/www/css/roundcube.png differ
diff --git a/www/css/squirrelmail.png b/www/css/squirrelmail.png
new file mode 100644
index 0000000..4f00d15
Binary files /dev/null and b/www/css/squirrelmail.png differ
diff --git a/www/mail/index.php b/www/mail/index.php
new file mode 100644
index 0000000..5e54567
--- /dev/null
+++ b/www/mail/index.php
@@ -0,0 +1,31 @@
+<?php 
+require_once dirname(dirname(__DIR__)) . implode(DIRECTORY_SEPARATOR, ['', 'inc', 'include.php']);
+?>
+<!DOCTYPE html>
+<html lang=no>
+<style>
+p {hyphens: auto;}
+</style>
+<title>Programvareverkstedet</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+<link rel="stylesheet" href="../css/normalize.css">
+<link rel="stylesheet" href="../css/style.css">
+<link rel="stylesheet" href="../css/mail.css">
+
+<header>Programvareverkstedet</header>
+
+<main>
+
+<ul id="webmail">
+	<li id="squirrelmail"><div><a href="https://webmail.pvv.ntnu.no/squirrelmail/">squirrelmail</a>
+	<li id="roundcube"><div><a href="https://webmail.pvv.ntnu.no/roundcube/">roundcube</a>
+	<li id="rainloop"><div><a href="https://webmail.pvv.ntnu.no/rainloop/">rainloop</a>
+</ul>
+
+</main>
+
+<nav>
+	<?= navbar(1); ?>
+	<?= loginbar($sp, $pdo); ?>
+</nav>
