diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 49a94ed..69399db 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -1,60 +1,61 @@
 <script>
-	export let segment;
+  export let segment
+
+  const routes = [
+    { name: 'About', href: '/about' },
+    { name: 'Works', href: '/works' },
+    { name: 'Projects', href: '/projects' },
+    { name: 'Blog', href: 'https://blog.nicco.io' },
+    { name: 'Contact', href: '/contact' },
+  ]
 </script>
 
 <style>
-	nav {
-		border-bottom: 1px solid rgba(255,62,0,0.1);
-		font-weight: 300;
-		padding: 0 1em;
-	}
+  nav {
+    height: 100vh;
+    background-color: var(--clr-primary);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+  }
 
-	ul {
-		margin: 0;
-		padding: 0;
-	}
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
 
-	/* clearfix */
-	ul::after {
-		content: '';
-		display: block;
-		clear: both;
-	}
+  a {
+    writing-mode: vertical-rl;
+    padding: 1em;
+    text-decoration: none;
+  }
 
-	li {
-		display: block;
-		float: left;
-	}
+  h1 {
+    margin: 0;
+    writing-mode: horizontal-tb;
+    letter-spacing: -0.15em;
+    width: 1.15em;
+    font-size: 1.5em;
+  }
 
-	[aria-current] {
-		position: relative;
-		display: inline-block;
-	}
-
-	[aria-current]::after {
-		position: absolute;
-		content: '';
-		width: calc(100% - 1em);
-		height: 2px;
-		background-color: rgb(255,62,0);
-		display: block;
-		bottom: -1px;
-	}
-
-	a {
-		text-decoration: none;
-		padding: 1em 0.5em;
-		display: block;
-	}
+  @media (max-width: 30em) {
+    a {
+      padding: 0.5em;
+    }
+  }
 </style>
 
 <nav>
-	<ul>
-		<li><a aria-current="{segment === undefined ? 'page' : undefined}" href=".">home</a></li>
-		<li><a aria-current="{segment === 'about' ? 'page' : undefined}" href="about">about</a></li>
-
-		<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
-		     the blog data when we hover over the link or tap it on a touchscreen -->
-		<li><a rel=prefetch aria-current="{segment === 'blog' ? 'page' : undefined}" href="blog">blog</a></li>
-	</ul>
+  <a href="/">
+    <h1>NB</h1>
+  </a>
+  <ul>
+    {#each routes as { name, href }}
+      <li>
+        <a {href}>{name}</a>
+      </li>
+    {/each}
+  </ul>
 </nav>
diff --git a/src/components/PageTitle.svelte b/src/components/PageTitle.svelte
new file mode 100644
index 0000000..ee1459e
--- /dev/null
+++ b/src/components/PageTitle.svelte
@@ -0,0 +1,18 @@
+<script>
+  import SpacedLetters from './SpacedLetters.svelte'
+
+  export let title = ''
+</script>
+
+<style>
+  div {
+    margin-top: 8em;
+    margin-bottom: 3em;
+  }
+</style>
+
+<div>
+  <h1>
+    <SpacedLetters letters={title} />
+  </h1>
+</div>
diff --git a/src/components/SimplePage.svelte b/src/components/SimplePage.svelte
new file mode 100644
index 0000000..5e9b251
--- /dev/null
+++ b/src/components/SimplePage.svelte
@@ -0,0 +1,17 @@
+<script>
+  import PageTitle from './PageTitle.svelte'
+
+  export let title = ''
+</script>
+
+<style>
+  section {
+    max-width: 30em;
+  }
+</style>
+
+<PageTitle {title} />
+
+<section>
+  <slot />
+</section>
diff --git a/src/components/SpacedLetters.svelte b/src/components/SpacedLetters.svelte
new file mode 100644
index 0000000..5d45c5e
--- /dev/null
+++ b/src/components/SpacedLetters.svelte
@@ -0,0 +1,24 @@
+<script>
+  export let letters = []
+</script>
+
+<style>
+  span {
+    font-size: 8vw;
+    text-transform: uppercase;
+    user-select: none;
+    width: 1em;
+    text-align: center;
+    display: inline-block;
+  }
+
+  div {
+    margin-left: -0.5em;
+  }
+</style>
+
+<div>
+  {#each letters as letter}
+    <span>{letter}</span>
+  {/each}
+</div>
diff --git a/src/routes/_error.svelte b/src/routes/_error.svelte
index 320e587..488fae8 100644
--- a/src/routes/_error.svelte
+++ b/src/routes/_error.svelte
@@ -1,34 +1,22 @@
 <script>
-	export let status;
-	export let error;
+  export let status
+  export let error
 
-	const dev = process.env.NODE_ENV === 'development';
+  const dev = process.env.NODE_ENV === 'development'
 </script>
 
 <style>
-	h1, p {
-		margin: 0 auto;
-	}
+  h1 {
+    font-size: 8vw;
+  }
 
-	h1 {
-		font-size: 2.8em;
-		font-weight: 700;
-		margin: 0 0 0.5em 0;
-	}
-
-	p {
-		margin: 1em auto;
-	}
-
-	@media (min-width: 480px) {
-		h1 {
-			font-size: 4em;
-		}
-	}
+  p {
+    margin: 1em auto;
+  }
 </style>
 
 <svelte:head>
-	<title>{status}</title>
+  <title>{status}</title>
 </svelte:head>
 
 <h1>{status}</h1>
@@ -36,5 +24,5 @@
 <p>{error.message}</p>
 
 {#if dev && error.stack}
-	<pre>{error.stack}</pre>
+  <pre>{error.stack}</pre>
 {/if}
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 8432299..d05c155 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -1,22 +1,39 @@
 <script>
-	import Nav from '../components/Nav.svelte';
+  import Nav from '../components/Nav.svelte'
 
-	export let segment;
+  export let segment
 </script>
 
 <style>
-	main {
-		position: relative;
-		max-width: 56em;
-		background-color: white;
-		padding: 2em;
-		margin: 0 auto;
-		box-sizing: border-box;
-	}
+  div {
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+  }
+
+  main {
+    position: relative;
+    background-color: white;
+    padding: 3em;
+    margin: 0 auto;
+    box-sizing: border-box;
+    flex: 1 0 auto;
+    overflow: auto;
+    max-width: calc(100% - 4em);
+    max-height: 100vh;
+  }
+
+  @media (max-width: 30em) {
+    main {
+      padding: 2em;
+    }
+  }
 </style>
 
-<Nav {segment}/>
+<div>
 
-<main>
-	<slot></slot>
-</main>
\ No newline at end of file
+  <Nav {segment} />
+  <main>
+    <slot />
+  </main>
+</div>
diff --git a/src/routes/about.svelte b/src/routes/about.svelte
index e1734b3..9eda717 100644
--- a/src/routes/about.svelte
+++ b/src/routes/about.svelte
@@ -1,7 +1,22 @@
+<script>
+  import SimplePage from '../components/SimplePage.svelte'
+</script>
+
 <svelte:head>
-	<title>About</title>
+  <title>About</title>
 </svelte:head>
 
-<h1>About this site</h1>
-
-<p>This is the 'about' page. There's not much here.</p>
\ No newline at end of file
+<SimplePage title="About">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+</SimplePage>
diff --git a/src/routes/blog/[slug].json.js b/src/routes/blog/[slug].json.js
deleted file mode 100644
index 176890d..0000000
--- a/src/routes/blog/[slug].json.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import posts from './_posts.js';
-
-const lookup = new Map();
-posts.forEach(post => {
-	lookup.set(post.slug, JSON.stringify(post));
-});
-
-export function get(req, res, next) {
-	// the `slug` parameter is available because
-	// this file is called [slug].json.js
-	const { slug } = req.params;
-
-	if (lookup.has(slug)) {
-		res.writeHead(200, {
-			'Content-Type': 'application/json'
-		});
-
-		res.end(lookup.get(slug));
-	} else {
-		res.writeHead(404, {
-			'Content-Type': 'application/json'
-		});
-
-		res.end(JSON.stringify({
-			message: `Not found`
-		}));
-	}
-}
diff --git a/src/routes/blog/[slug].svelte b/src/routes/blog/[slug].svelte
deleted file mode 100644
index 9e0c419..0000000
--- a/src/routes/blog/[slug].svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script context="module">
-	export async function preload({ params, query }) {
-		// the `slug` parameter is available because
-		// this file is called [slug].svelte
-		const res = await this.fetch(`blog/${params.slug}.json`);
-		const data = await res.json();
-
-		if (res.status === 200) {
-			return { post: data };
-		} else {
-			this.error(res.status, data.message);
-		}
-	}
-</script>
-
-<script>
-	export let post;
-</script>
-
-<style>
-	/*
-		By default, CSS is locally scoped to the component,
-		and any unused styles are dead-code-eliminated.
-		In this page, Svelte can't know which elements are
-		going to appear inside the {{{post.html}}} block,
-		so we have to use the :global(...) modifier to target
-		all elements inside .content
-	*/
-	.content :global(h2) {
-		font-size: 1.4em;
-		font-weight: 500;
-	}
-
-	.content :global(pre) {
-		background-color: #f9f9f9;
-		box-shadow: inset 1px 1px 5px rgba(0,0,0,0.05);
-		padding: 0.5em;
-		border-radius: 2px;
-		overflow-x: auto;
-	}
-
-	.content :global(pre) :global(code) {
-		background-color: transparent;
-		padding: 0;
-	}
-
-	.content :global(ul) {
-		line-height: 1.5;
-	}
-
-	.content :global(li) {
-		margin: 0 0 0.5em 0;
-	}
-</style>
-
-<svelte:head>
-	<title>{post.title}</title>
-</svelte:head>
-
-<h1>{post.title}</h1>
-
-<div class='content'>
-	{@html post.html}
-</div>
diff --git a/src/routes/blog/_posts.js b/src/routes/blog/_posts.js
deleted file mode 100644
index 7791a21..0000000
--- a/src/routes/blog/_posts.js
+++ /dev/null
@@ -1,92 +0,0 @@
-// Ordinarily, you'd generate this data from markdown files in your
-// repo, or fetch them from a database of some kind. But in order to
-// avoid unnecessary dependencies in the starter template, and in the
-// service of obviousness, we're just going to leave it here.
-
-// This file is called `_posts.js` rather than `posts.js`, because
-// we don't want to create an `/blog/posts` route — the leading
-// underscore tells Sapper not to do that.
-
-const posts = [
-	{
-		title: 'What is Sapper?',
-		slug: 'what-is-sapper',
-		html: `
-			<p>First, you have to know what <a href='https://svelte.dev'>Svelte</a> is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. If you haven't already read the <a href='https://svelte.dev/blog/frameworks-without-the-framework'>introductory blog post</a>, you should!</p>
-
-			<p>Sapper is a Next.js-style framework (<a href='blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>
-
-			<ul>
-				<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li>
-				<li>Server-side rendering (SSR) with client-side hydration</li>
-				<li>Service worker for offline support, and all the PWA bells and whistles</li>
-				<li>The nicest development experience you've ever had, or your money back</li>
-			</ul>
-
-			<p>It's implemented as Express middleware. Everything is set up and waiting for you to get started, but you keep complete control over the server, service worker, webpack config and everything else, so it's as flexible as you need it to be.</p>
-		`
-	},
-
-	{
-		title: 'How to use Sapper',
-		slug: 'how-to-use-sapper',
-		html: `
-			<h2>Step one</h2>
-			<p>Create a new project, using <a href='https://github.com/Rich-Harris/degit'>degit</a>:</p>
-
-			<pre><code>npx degit "sveltejs/sapper-template#rollup" my-app
-			cd my-app
-			npm install # or yarn!
-			npm run dev
-			</code></pre>
-
-			<h2>Step two</h2>
-			<p>Go to <a href='http://localhost:3000'>localhost:3000</a>. Open <code>my-app</code> in your editor. Edit the files in the <code>src/routes</code> directory or add new ones.</p>
-
-			<h2>Step three</h2>
-			<p>...</p>
-
-			<h2>Step four</h2>
-			<p>Resist overdone joke formats.</p>
-		`
-	},
-
-	{
-		title: 'Why the name?',
-		slug: 'why-the-name',
-		html: `
-			<p>In war, the soldiers who build bridges, repair roads, clear minefields and conduct demolitions — all under combat conditions — are known as <em>sappers</em>.</p>
-
-			<p>For web developers, the stakes are generally lower than those for combat engineers. But we face our own hostile environment: underpowered devices, poor network connections, and the complexity inherent in front-end engineering. Sapper, which is short for <strong>S</strong>velte <strong>app</strong> mak<strong>er</strong>, is your courageous and dutiful ally.</p>
-		`
-	},
-
-	{
-		title: 'How is Sapper different from Next.js?',
-		slug: 'how-is-sapper-different-from-next',
-		html: `
-			<p><a href='https://github.com/zeit/next.js'>Next.js</a> is a React framework from <a href='https://vercel.com/'>Vercel</a>, and is the inspiration for Sapper. There are a few notable differences, however:</p>
-
-			<ul>
-				<li>It's powered by <a href='https://svelte.dev'>Svelte</a> instead of React, so it's faster and your apps are smaller</li>
-				<li>Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is <code>src/routes/blog/[slug].svelte</code></li>
-				<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>
-				<li>Links are just <code>&lt;a&gt;</code> elements, rather than framework-specific <code>&lt;Link&gt;</code> components. That means, for example, that <a href='blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
-			</ul>
-		`
-	},
-
-	{
-		title: 'How can I get involved?',
-		slug: 'how-can-i-get-involved',
-		html: `
-			<p>We're so glad you asked! Come on over to the <a href='https://github.com/sveltejs/svelte'>Svelte</a> and <a href='https://github.com/sveltejs/sapper'>Sapper</a> repos, and join us in the <a href='https://svelte.dev/chat'>Discord chatroom</a>. Everyone is welcome, especially you!</p>
-		`
-	}
-];
-
-posts.forEach(post => {
-	post.html = post.html.replace(/^\t{3}/gm, '');
-});
-
-export default posts;
diff --git a/src/routes/blog/index.json.js b/src/routes/blog/index.json.js
deleted file mode 100644
index bfd9389..0000000
--- a/src/routes/blog/index.json.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import posts from './_posts.js';
-
-const contents = JSON.stringify(posts.map(post => {
-	return {
-		title: post.title,
-		slug: post.slug
-	};
-}));
-
-export function get(req, res) {
-	res.writeHead(200, {
-		'Content-Type': 'application/json'
-	});
-
-	res.end(contents);
-}
\ No newline at end of file
diff --git a/src/routes/blog/index.svelte b/src/routes/blog/index.svelte
deleted file mode 100644
index e24f711..0000000
--- a/src/routes/blog/index.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script context="module">
-	export function preload({ params, query }) {
-		return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
-			return { posts };
-		});
-	}
-</script>
-
-<script>
-	export let posts;
-</script>
-
-<style>
-	ul {
-		margin: 0 0 1em 0;
-		line-height: 1.5;
-	}
-</style>
-
-<svelte:head>
-	<title>Blog</title>
-</svelte:head>
-
-<h1>Recent posts</h1>
-
-<ul>
-	{#each posts as post}
-		<!-- we're using the non-standard `rel=prefetch` attribute to
-				tell Sapper to load the data for the page as soon as
-				the user hovers over the link or taps it, instead of
-				waiting for the 'click' event -->
-		<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
-	{/each}
-</ul>
\ No newline at end of file
diff --git a/src/routes/contact.svelte b/src/routes/contact.svelte
new file mode 100644
index 0000000..fc8badc
--- /dev/null
+++ b/src/routes/contact.svelte
@@ -0,0 +1,50 @@
+<script>
+  import SimplePage from '../components/SimplePage.svelte'
+</script>
+
+<style>
+  a {
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  span {
+    margin-right: 2em;
+  }
+
+  ion-icon {
+    transform: translateY(0.3em);
+  }
+</style>
+
+<svelte:head>
+  <title>Contact</title>
+</svelte:head>
+<SimplePage title="Contact">
+  <p>
+    <span>
+      <a rel="noopener noreferrer" href="mailto:hi@nicco.io">
+        <ion-icon name="chatbubble-outline" size="large" />
+        Say hi@nicco.io
+      </a>
+    </span>
+
+    <span>
+      <a rel="noopener noreferrer" target="_blank" href="https://github.com/cupcakearmy/">
+        <ion-icon name="logo-github" size="large" />
+        Github
+      </a>
+    </span>
+
+    <span>
+      <a href="/privacy">
+        <ion-icon name="finger-print-outline" size="large" />
+        Privacy
+      </a>
+    </span>
+
+  </p>
+</SimplePage>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index af244e0..b6dfafa 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,50 +1,66 @@
+<script>
+  import SpacedLetters from '../components/SpacedLetters.svelte'
+</script>
+
 <style>
-  h1,
-  figure,
   p {
-    text-align: center;
-    margin: 0 auto;
+    font-size: 4vw;
   }
 
-  h1 {
-    font-size: 2.8em;
-    text-transform: uppercase;
-    font-weight: 700;
-    margin: 0 0 0.5em 0;
+  section {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
   }
 
-  figure {
-    margin: 0 0 1em 0;
+  section.left {
+    align-items: flex-start;
+    padding-left: 1em;
+  }
+
+  section.right {
+    align-items: flex-end;
   }
 
   img {
-    width: 100%;
-    max-width: 400px;
-    margin: 0 0 1em 0;
+    object-fit: contain;
+    height: 65vh;
+    width: 33vw;
+    /* margin-top: 16vh; */
+    transform: translateY(16vh);
   }
 
-  p {
-    margin: 1em auto;
-  }
+  @media (max-width: 30em) {
+    img {
+      transform: translateY(6em);
+      height: 69vh;
+      width: 69vw;
+    }
 
-  @media (min-width: 480px) {
-    h1 {
-      font-size: 4em;
+    section.left {
+      transform: translateY(-11em);
     }
   }
 </style>
 
 <svelte:head>
-  <title>Sapper project template</title>
+  <title>Niccolo Borgioli</title>
 </svelte:head>
 
-<h1>Letse go</h1>
+<section class="left" style="z-index: 3;">
+  <h1>
+    <SpacedLetters letters="Niccolò" />
+    <SpacedLetters letters="Borgioli" />
+  </h1>
 
-<figure>
-  <img alt="Success Kid" src="successkid.jpg" />
-  <figcaption>Have fun with Sapper!</figcaption>
-</figure>
+  <p>Design & Development</p>
+</section>
 
-<p>
-  <strong>Try editing this file (src/routes/index.svelte) to test live reloading.</strong>
-</p>
+<section class="right" style="z-index: 2;">
+  <img src="/images/decoration.jpg" />
+</section>
diff --git a/src/routes/works.svelte b/src/routes/works.svelte
new file mode 100644
index 0000000..bab48b3
--- /dev/null
+++ b/src/routes/works.svelte
@@ -0,0 +1,22 @@
+<script>
+  import SimplePage from '../components/SimplePage.svelte'
+</script>
+
+<svelte:head>
+  <title>Works</title>
+</svelte:head>
+
+<SimplePage title="Works">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+</SimplePage>
diff --git a/src/template.html b/src/template.html
index 1745ddd..6d1d257 100644
--- a/src/template.html
+++ b/src/template.html
@@ -1,33 +1,34 @@
-<!doctype html>
-<html lang='en'>
-<head>
-	<meta charset='utf-8'>
-	<meta name='viewport' content='width=device-width,initial-scale=1.0'>
-	<meta name='theme-color' content='#333333'>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="theme-color" content="#333333" />
 
-	%sapper.base%
+    %sapper.base%
 
-	<link rel='stylesheet' href='global.css'>
-	<link rel='manifest' href='manifest.json' crossorigin='use-credentials'>
-	<link rel='icon' type='image/png' href='favicon.png'>
+    <link rel="stylesheet" href="global.css" />
+    <link rel="icon" type="image/png" href="/images/monogramm.png" />
 
-	<!-- Sapper generates a <style> tag containing critical CSS
+    <!-- Sapper generates a <style> tag containing critical CSS
 	     for the current page. CSS for the rest of the app is
 	     lazily loaded when it precaches secondary pages -->
-	%sapper.styles%
+    %sapper.styles%
 
-	<!-- This contains the contents of the <svelte:head> component, if
+    <!-- This contains the contents of the <svelte:head> component, if
 	     the current page has one -->
-	%sapper.head%
-</head>
-<body>
-	<!-- The application will be rendered inside this element,
+    %sapper.head%
+  </head>
+  <body>
+    <!-- The application will be rendered inside this element,
 	     because `src/client.js` references it -->
-	<div id='sapper'>%sapper.html%</div>
+    <div id="sapper">%sapper.html%</div>
 
-	<!-- Sapper creates a <script> tag containing `src/client.js`
+    <!-- Sapper creates a <script> tag containing `src/client.js`
 	     and anything else it needs to hydrate the app and
 	     initialise the router -->
-	%sapper.scripts%
-</body>
+    %sapper.scripts%
+
+    <script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
+  </body>
 </html>
diff --git a/static/favicon.png b/static/favicon.png
deleted file mode 100644
index 7e6f5eb..0000000
Binary files a/static/favicon.png and /dev/null differ
diff --git a/static/global.css b/static/global.css
index 3566e73..be0e6bc 100644
--- a/static/global.css
+++ b/static/global.css
@@ -1,36 +1,40 @@
+@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400&family=Playfair+Display&display=swap');
+
 body {
-	margin: 0;
-	font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-	font-size: 14px;
-	line-height: 1.5;
-	color: #333;
+  margin: 0;
+  box-sizing: border-box;
+
+  font-family: 'Jost', Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans,
+    Droid Sans, Helvetica Neue, sans-serif;
+  font-size: 1em;
+  font-weight: lighter;
+  color: #000;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
 }
 
-h1, h2, h3, h4, h5, h6 {
-	margin: 0 0 0.5em 0;
-	font-weight: 400;
-	line-height: 1.2;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'Playfair Display', serif;
+  font-weight: normal;
+  margin: 0 0.5em 0 0;
 }
 
-h1 {
-	font-size: 2em;
+p {
+  text-align: justify;
+  line-height: 1.5;
+}
+
+:root {
+  --clr-primary: hsl(219, 90%, 80%);
 }
 
 a {
-	color: inherit;
+  color: inherit;
 }
-
-code {
-	font-family: menlo, inconsolata, monospace;
-	font-size: calc(1em - 2px);
-	color: #555;
-	background-color: #f0f0f0;
-	padding: 0.2em 0.4em;
-	border-radius: 2px;
-}
-
-@media (min-width: 400px) {
-	body {
-		font-size: 16px;
-	}
-}
\ No newline at end of file
diff --git a/static/images/decoration.jpg b/static/images/decoration.jpg
new file mode 100644
index 0000000..1ed3c5e
Binary files /dev/null and b/static/images/decoration.jpg differ
diff --git a/static/images/monogramm.png b/static/images/monogramm.png
new file mode 100644
index 0000000..90f09b8
Binary files /dev/null and b/static/images/monogramm.png differ
diff --git a/static/logo-192.png b/static/logo-192.png
deleted file mode 100644
index 96fac03..0000000
Binary files a/static/logo-192.png and /dev/null differ
diff --git a/static/logo-512.png b/static/logo-512.png
deleted file mode 100644
index 9f0e764..0000000
Binary files a/static/logo-512.png and /dev/null differ
diff --git a/static/manifest.json b/static/manifest.json
deleted file mode 100644
index 78ad114..0000000
--- a/static/manifest.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-	"background_color": "#ffffff",
-	"theme_color": "#333333",
-	"name": "TODO",
-	"short_name": "TODO",
-	"display": "minimal-ui",
-	"start_url": "/",
-	"icons": [
-		{
-			"src": "logo-192.png",
-			"sizes": "192x192",
-			"type": "image/png"
-		},
-		{
-			"src": "logo-512.png",
-			"sizes": "512x512",
-			"type": "image/png"
-		}
-	]
-}
diff --git a/static/successkid.jpg b/static/successkid.jpg
deleted file mode 100755
index 5ad19cc..0000000
Binary files a/static/successkid.jpg and /dev/null differ