diff --git a/articles/index.php b/articles/index.php
new file mode 100644
index 0000000..ec5d1fa
--- /dev/null
+++ b/articles/index.php
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<?php require "../inc/head.inc" ?>
+	</head>
+	<body>
+		<?php require "../inc/nav.inc" ?>
+
+        <div id="main-and-sidebar" dir="rtl" class="inline-block">
+            <div id="main-wrapper" class="inline-block">
+                <div id="main" class="inline-block">
+                    <main>
+
+						<div class="section container">
+							<h1>Articles</h1>
+							This is a collection of articles written by me and my friends
+						</div>
+
+						<div class="section container">
+							<?php $articles = json_decode(file_get_contents("../data/articles.json")) ?>
+							<?php foreach ($articles as $i=>$article): ?>
+								<a class="reverse-link" href="/articles/<?= $article->slug ?>">
+									<h2 style="margin: 0"><?= $article->title ?></h2>
+								</a>
+								by <?= $article->author ?> &bull; <i>written <?= $article->created ?></i>
+								<?php if ($i != count($articles) - 1): ?><hr><?php endif ?>
+							<?php endforeach ?>
+						</div>
+
+					</main>
+				</div>
+			</div><!--
+
+			--><?php require "../inc/sidebar.inc" ?>
+		</div>
+
+		<?php require "../inc/background.inc" ?>
+	</body>
+</html>
+
diff --git a/assets/style/main.css b/assets/style/main.css
index 56f757f..d2ca2db 100644
--- a/assets/style/main.css
+++ b/assets/style/main.css
@@ -27,12 +27,15 @@ body {
     -webkit-transition: all 0.2s linear, width 0s;
     -moz-transition:    all 0.2s linear, width 0s;
 }
-a {
-    outline: none;
-}
 a:hover {
     text-decoration: none;
 }
+a.reverse-link {
+	text-decoration: none;
+}
+a.reverse-link:hover {
+	text-decoration: underline;
+}
 .loading, .loading * {
     cursor: wait !important;
 }
@@ -265,3 +268,14 @@ object {
 img {
     border: none; /* Fix ico images on internet explorer */
 }
+
+@media print {
+	#grass, .light.tree, .dark.tree {
+		display: none !important;
+	}
+
+	.container {
+		background-color: red !important;
+	}
+}
+
diff --git a/data/articles.json b/data/articles.json
new file mode 100644
index 0000000..dbb0229
--- /dev/null
+++ b/data/articles.json
@@ -0,0 +1,15 @@
+[
+	{
+		"author": "Reimar",
+		"title": "Test",
+		"slug": "test",
+		"created": "2022-08-15"
+	},
+	{
+		"author": "Reimar",
+		"title": "Test",
+		"slug": "test",
+		"created": "2022-08-15"
+	}
+]
+
diff --git a/inc/nav.inc b/inc/nav.inc
index 846a63c..d2bf9e7 100644
--- a/inc/nav.inc
+++ b/inc/nav.inc
@@ -4,7 +4,8 @@
 
             $links = [
                 ["/", "Home"],
-                ["/about", "About"]
+				["/articles", "Articles"],
+                ["/about", "About"],
             ];
 
             $path = parse_url("http://test" . $_SERVER["REQUEST_URI"])["path"];
