diff --git a/saturn/server/static/css/index.css b/saturn/server/static/css/index.css
new file mode 100644
index 0000000..19bd8f8
--- /dev/null
+++ b/saturn/server/static/css/index.css
@@ -0,0 +1,61 @@
+body {
+	display: grid;
+	grid-template-columns:
+		1fr
+		1fr;
+	grid-template-rows:
+		auto
+		1fr;
+	column-gap: 2rem;
+}
+
+body > h1 {
+	grid-row: 1;
+	grid-column: 1 / span 2;
+}
+
+body > * {
+	margin: 2rem;
+}
+
+.event {
+	margin: 1rem;
+	display: grid;
+	grid-template-columns:
+		1fr
+		1fr;
+	grid-template-rows:
+		auto
+		auto
+		auto;
+	gap: .5rem;
+	background: var(--ui-01);
+	padding: 1rem;
+}
+.event > .summary {
+	font-weight: 400;
+	font-size: 1.5rem;
+	grid-row: 1;
+	grid-column: 1 / span 2;
+}
+.event > .date {
+	grid-row: 2;
+	font-size: 1.1rem;
+}
+.event > .start-date {
+	grid-column: 1;
+	text-align: right;
+}
+.event > .end-date {
+	grid-column: 2;
+}
+.event > .description {
+	grid-column: 1;
+}
+.event > .other {
+	grid-column: 2;
+}
+.event > .description,
+.event > .other > * {
+	padding-top: 1rem;
+}
diff --git a/saturn/server/static/css/main.css b/saturn/server/static/css/main.css
new file mode 100644
index 0000000..a6d63cf
--- /dev/null
+++ b/saturn/server/static/css/main.css
@@ -0,0 +1,20 @@
+:root {
+	--ui-background: white;
+	--ui-01: var(--gray-10);
+	--text-01: var(--gray-100);
+
+	--gray-10: #f4f4f4;
+	--gray-100: #161616;
+}
+
+body {
+	margin: 0;
+	font-family: Inter, sans-serif;
+	background: var(--ui-background);
+	color: var(--text-01);
+}
+
+h1 {
+	font-weight: 300;
+	font-size: 3rem;
+}
diff --git a/saturn/server/templates/base.html b/saturn/server/templates/base.html
new file mode 100644
index 0000000..d3658c3
--- /dev/null
+++ b/saturn/server/templates/base.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang='en'>
+	<head>
+		<meta charset='utf-8' />
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<title>{% block title %}Saturn{% endblock %}</title>
+		
+		{% block style %}
+		<link rel="stylesheet" href="/static/css/main.css" />
+		{% endblock %}
+	</head>
+	<body>
+		{% block body %}{% endblock %}
+	</body>
+</html>
diff --git a/saturn/server/templates/index.html b/saturn/server/templates/index.html
index 43ba2bc..38362a6 100644
--- a/saturn/server/templates/index.html
+++ b/saturn/server/templates/index.html
@@ -1,38 +1,51 @@
-<!DOCTYPE html>
-<html lang='en'>
-	<head>
-		<title>Saturn</title>
-	</head>
-	<body>
-		{% for event in events %}
-			<div>
-				<ul>
-					<li>{{ event.dtstart.value }}</li>
-					<li>{{ event.dtend.value }}</li>
-					<li>{{ event.summary.value }}</li>
-					{% if event.description %}
-					<li>{{ event.description.value }}</li>
-					{% endif %}
-					{% if event.location %}
-					<li>{{ event.location.value }}</li>
-					{% endif %}
-					{% if event.rrule %}
-					<li>{{ event.rrule.value }}</li>
-					{% endif %}
-				</ul>
-			</div>
-		{% endfor %}
-		{% for event in events_day %}
-			<div>
-				<ul>
-					<li>{{ event.dtstart.value }}</li>
-					<li>{{ event.dtend.value }}</li>
-					<li>{{ event.summary.value }}</li>
-					{% if event.description %}
-					<li>{{ event.description.value }}</li>
-					{% endif %}
-				</ul>
-			</div>
-		{% endfor %}
-	</body>
-</html>
+{% extends 'base.html' %}
+
+{% block style %}
+{{ super() }}
+<link rel="stylesheet" href="/static/css/index.css" />
+{% endblock %}
+
+{% block body %}
+<h1>Saturn</h1>
+
+<div id="events">
+	{% for event in events %}
+	<div class="event">
+		<div class="summary">{{ event.summary.value }}</div>
+		<div class="date start-date">{{ event.dtstart.value.isoformat() }}</div>
+		<div class="date end-date">{{ event.dtend.value.isoformat() }}</div>
+		{% if event.description %}
+		<div class="description">{{ event.description.value }}</div>
+		{% endif %}
+		<div class="other">
+			{% if event.location %}
+			<div>{{ event.location.value }}</div>
+			{% endif %}
+			{% if event.rrule %}
+			<div>{{ event.rrule.value }}</div>
+			{% endif %}
+		</div>
+	</div>
+	{% endfor %}
+</div>
+<div id="events_day">
+	{% for event in events_day %}
+	<div class="event">
+		<div class="summary">{{ event.summary.value }}</div>
+		<div class="date start-date">{{ event.dtstart.value }}</div>
+		<div class="date end-date">{{ event.dtend.value }}</div>
+		{% if event.description %}
+		<div class="description">{{ event.description.value }}</div>
+		{% endif %}
+		<div class="other">
+			{% if event.location %}
+			<div>{{ event.location.value }}</div>
+			{% endif %}
+			{% if event.rrule %}
+			<div>{{ event.rrule.value }}</div>
+			{% endif %}
+		</div>
+	</div>
+	{% endfor %}
+</div>
+{% endblock %}
