diff --git a/assets/scss/errorpages.scss b/assets/scss/errorpages.scss
new file mode 100644
index 0000000..dc77a36
--- /dev/null
+++ b/assets/scss/errorpages.scss
@@ -0,0 +1,12 @@
+@import 'partials/main';
+@import 'partials/nav'; 
+
+header {
+  text-align: center;
+  margin: 150px 0;
+  h1 {
+    font-size: 2em;
+  }
+}
+
+@import 'partials/footer';
diff --git a/layouts/404.html b/layouts/404.html
deleted file mode 100644
index 2c47ced..0000000
--- a/layouts/404.html
+++ /dev/null
@@ -1,29 +0,0 @@
-{{ define "stylesheet" }}{{ $sass := resources.Get "scss/index.scss" }}{{ $style := $sass | resources.ToCSS }}
-    <link rel="stylesheet" href="{{ $style.Permalink }}" type="text/css" media="screen" />
-{{ end }}
-
-{{ define "main" }}
-<main class="container">
-  <section>
-    <header>
-      <h1>{{ .Params.heading }}</h1>
-      <span class="subtitle">{{.Params.subheading}}</span>
-    </header>
-    {{.Content}}
-  </section>
-  <section class="section-articles">
-    {{ range first 3 (where .Site.RegularPages "Type" "post") }}
-    <article>
-      <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
-      <p class="date" title="{{ .Date.Format "2 Jan 2006, 15:04 MST" }}">{{ .Date.Format "2 January 2006" }}</p>
-      {{ with .Description }}
-      <p>{{ . }}</p>
-      {{ end }}
-      {{ with .Params.featured_image }}
-      <img src="{{ . | absURL }}">
-      {{ end }}
-    </article>
-    {{ end }}
-  </section>
-</main>
-{{ end }}
diff --git a/layouts/errorpages/list.html b/layouts/errorpages/list.html
new file mode 100644
index 0000000..601949b
--- /dev/null
+++ b/layouts/errorpages/list.html
@@ -0,0 +1,18 @@
+{{ define "stylesheet" }}{{ $sass := resources.Get "scss/errorpages.scss" }}{{ $style := $sass | resources.ToCSS }}
+    <link rel="stylesheet" href="{{ $style.Permalink }}" type="text/css" media="screen" />
+{{ end }}
+
+{{ define "main" }}
+<main>
+  <div class="container">
+    <section>
+      <header>
+        <h1>{{ .Params.heading }}</h1>
+        <span class="subtitle">{{.Params.subheading}}</span>
+      </header>
+      {{.Content}}
+    </section>
+  </div>
+</main>
+{{ end }}
+ 
diff --git a/layouts/errorpages/single.html b/layouts/errorpages/single.html
new file mode 100644
index 0000000..79d2af5
--- /dev/null
+++ b/layouts/errorpages/single.html
@@ -0,0 +1,17 @@
+{{ define "stylesheet" }}{{ $sass := resources.Get "scss/errorpages.scss" }}{{ $style := $sass | resources.ToCSS }}
+    <link rel="stylesheet" href="{{ $style.Permalink }}" type="text/css" media="screen" />
+{{ end }}
+
+{{ define "main" }}
+<main>
+  <div class="container">
+    <section>
+      <header>
+        <h1>{{ .Params.heading }}</h1>
+        <span class="subtitle">{{.Params.subheading}}</span>
+      </header>
+      {{.Content}}
+    </section>
+  </div>
+</main>
+{{ end }}
diff --git a/layouts/index.html b/layouts/index.html
index dce0d8c..785cf41 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -3,43 +3,45 @@
 {{ end }}
 
 {{ define "main" }}
-<main class="container">
-  <section>
-    <header>
-      <h1>{{ .Params.heading }}</h1>
-      <span class="subtitle">{{.Params.subheading}}</span>
-    </header>
-    {{.Content}}
-  </section>
-  <h1>latest <a href="{{ "/blog" | relURL }}">posts</a></h1>
-  <section class="section-articles">
-    {{ range first 2 (where .Site.RegularPages "Type" "post") }}
-    <a href="{{ .Permalink }}">
-      <article>
-        <h1>{{ .Title }}</h1>
-        <p class="meta" title="{{ .Date.Format "2 Jan 2006, 15:04 MST" }}"><span class="date">{{ .Date.Format "2 January 2006" }}</span> <span class="author">by {{ .Params.author }}</span></p>
-        {{ with .Description }}
-        <p>{{ . }}</p>
-        {{ end }}
-        {{ with .Params.featured_image }}
-        <img src="{{ . | relURL }}">
-        {{ end }}
-      </article>
-    </a>
-    {{ end }}
-  </section>
-  <h1>latest <a href="{{ "/projects" | relURL }}">projects</a></h1>
-  <section class="section-projects">
-    {{ range first 3 (where .Site.RegularPages "Type" "project") }}
-    <a href="{{ .Permalink }}">
-      <article>
-        <h1>{{ .Title }}</h1>
-        <p class="meta" title="last change: {{ .Date.Format "2 Jan 2006" }}">{{ with .Params.activetime }}<span class="date">{{ . }}</span>{{ end }} {{ with .Params.status }}<span class="status">{{ . }}</span>{{ end }}</p>
-        {{ with .Description }}<p>{{ . }}</p>{{ end }}
-        <img {{ with .Params.featured_image }}src="{{ . | relURL }}"{{ end }}>
-      </article>
-    </a>
-    {{ end }}
-  </section>
+<main>
+  <div class="container">
+    <section>
+      <header>
+        <h1>{{ .Params.heading }}</h1>
+        <span class="subtitle">{{.Params.subheading}}</span>
+      </header>
+      {{.Content}}
+    </section>
+    <h1>latest <a href="{{ "/blog" | relURL }}">posts</a></h1>
+    <section class="section-articles">
+      {{ range first 2 (where .Site.RegularPages "Type" "post") }}
+      <a href="{{ .Permalink }}">
+        <article>
+          <h1>{{ .Title }}</h1>
+          <p class="meta" title="{{ .Date.Format "2 Jan 2006, 15:04 MST" }}"><span class="date">{{ .Date.Format "2 January 2006" }}</span> <span class="author">by {{ .Params.author }}</span></p>
+          {{ with .Description }}
+          <p>{{ . }}</p>
+          {{ end }}
+          {{ with .Params.featured_image }}
+          <img src="{{ . | relURL }}">
+          {{ end }}
+        </article>
+      </a>
+      {{ end }}
+    </section>
+    <h1>latest <a href="{{ "/projects" | relURL }}">projects</a></h1>
+    <section class="section-projects">
+      {{ range first 3 (where .Site.RegularPages "Type" "project") }}
+      <a href="{{ .Permalink }}">
+        <article>
+          <h1>{{ .Title }}</h1>
+          <p class="meta" title="last change: {{ .Date.Format "2 Jan 2006" }}">{{ with .Params.activetime }}<span class="date">{{ . }}</span>{{ end }} {{ with .Params.status }}<span class="status">{{ . }}</span>{{ end }}</p>
+          {{ with .Description }}<p>{{ . }}</p>{{ end }}
+          <img {{ with .Params.featured_image }}src="{{ . | relURL }}"{{ end }}>
+        </article>
+      </a>
+      {{ end }}
+    </section>
+  </div>
 </main>
 {{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 41a70ad..72c3b0c 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,7 +1,7 @@
 <footer>
   <div class="container">
     <section class="website-version">
-      <span>version {{ .Site.Params.version }}</span>
+      <span title="{{ now.Format "2. January 2006, 15:04 MST" }}">version {{ now.Format "2006-01-02" }}</span>
     </section>
     <section class="website-subnav">
       <ul>
diff --git a/resources/_gen/assets/scss/scss/404.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/scss/404.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
new file mode 100644
index 0000000..ed77df1
--- /dev/null
+++ b/resources/_gen/assets/scss/scss/404.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -0,0 +1,109 @@
+* {
+  box-sizing: border-box; }
+
+@font-face {
+  font-family: PoppinsLatin;
+  src: url(/fonts/PoppinsLatin-Regular.otf); }
+
+html {
+  scrollbar-width: thin;
+  scrollbar-color: #ff8282 #3c3c5a;
+  overflow-x: hidden;
+  overflow-y: scroll; }
+
+body {
+  background: #28283c;
+  color: #f0f0ff;
+  margin: 0;
+  font-family: PoppinsLatin, Monaco, Lucida Console, monospace;
+  display: grid; }
+
+a {
+  color: #ff8282;
+  text-decoration: none; }
+
+a:hover {
+  text-decoration: underline; }
+
+.container {
+  width: calc(100% - 40px);
+  max-width: 1140px;
+  margin: 0 auto; }
+
+main {
+  width: 100vw; }
+
+nav {
+  background: #3c3c5a;
+  white-space: nowrap;
+  overflow-x: auto; }
+  nav .container {
+    display: flex;
+    align-items: center; }
+    nav .container .website-name a {
+      color: whitesmoke;
+      text-decoration: none;
+      background: #ff8282;
+      padding: 5px 10px;
+      border-radius: 20px;
+      text-shadow: #ff6464 2px 2px; }
+    nav .container .website-nav {
+      margin-left: auto; }
+      nav .container .website-nav ul {
+        display: flex;
+        padding: 0; }
+      nav .container .website-nav li {
+        list-style-type: none;
+        padding: 10px 0 10px 30px; }
+      nav .container .website-nav a {
+        color: whitesmoke;
+        text-decoration: none; }
+
+@media (max-width: 600px) {
+  nav .container {
+    max-width: none; }
+    nav .container .website-nav {
+      padding: 0 20px; } }
+
+header {
+  text-align: center;
+  margin: 150px 0; }
+  header h1 {
+    font-size: 2em; }
+
+footer {
+  background: #1e1e2d;
+  color: #c8c8e6;
+  margin-top: 100px;
+  white-space: nowrap;
+  overflow-x: auto; }
+  footer .container {
+    display: flex;
+    align-items: center; }
+    footer .container .website-subnav {
+      margin-left: auto; }
+      footer .container .website-subnav ul {
+        display: flex;
+        padding: 0; }
+      footer .container .website-subnav li {
+        list-style-type: none;
+        padding: 10px 0 10px 30px; }
+      footer .container .website-subnav a {
+        color: #c8c8e6; }
+
+footer::after {
+  content: '';
+  background: #1e1e2d;
+  position: fixed;
+  height: 10000px;
+  width: 100vw;
+  overflow: hidden; }
+
+@media (max-width: 600px) {
+  footer .container {
+    max-width: none; }
+    footer .container .website-version {
+      order: 2;
+      padding: 10px 20px; }
+    footer .container .website-subnav li {
+      padding: 10px 30px 10px 0; } }
diff --git a/resources/_gen/assets/scss/scss/404.scss_f300667da4f5b5f84e1a9e0702b2fdde.json b/resources/_gen/assets/scss/scss/404.scss_f300667da4f5b5f84e1a9e0702b2fdde.json
new file mode 100644
index 0000000..31ca317
--- /dev/null
+++ b/resources/_gen/assets/scss/scss/404.scss_f300667da4f5b5f84e1a9e0702b2fdde.json
@@ -0,0 +1 @@
+{"Target":"scss/404.css","MediaType":"text/css","Data":{}}
\ No newline at end of file
diff --git a/resources/_gen/assets/scss/scss/_default/list.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/scss/_default/list.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
index 5ba2bed..a33459a 100644
--- a/resources/_gen/assets/scss/scss/_default/list.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/resources/_gen/assets/scss/scss/_default/list.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -7,15 +7,16 @@
 
 html {
   scrollbar-width: thin;
-  scrollbar-color: #ff8282 #3c3c5a; }
+  scrollbar-color: #ff8282 #3c3c5a;
+  overflow-x: hidden;
+  overflow-y: scroll; }
 
 body {
   background: #28283c;
   color: #f0f0ff;
   margin: 0;
   font-family: PoppinsLatin, Monaco, Lucida Console, monospace;
-  display: grid;
-  overflow-x: hidden; }
+  display: grid; }
 
 a {
   color: #ff8282;
diff --git a/resources/_gen/assets/scss/scss/errorpages.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/scss/errorpages.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
new file mode 100644
index 0000000..ed77df1
--- /dev/null
+++ b/resources/_gen/assets/scss/scss/errorpages.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -0,0 +1,109 @@
+* {
+  box-sizing: border-box; }
+
+@font-face {
+  font-family: PoppinsLatin;
+  src: url(/fonts/PoppinsLatin-Regular.otf); }
+
+html {
+  scrollbar-width: thin;
+  scrollbar-color: #ff8282 #3c3c5a;
+  overflow-x: hidden;
+  overflow-y: scroll; }
+
+body {
+  background: #28283c;
+  color: #f0f0ff;
+  margin: 0;
+  font-family: PoppinsLatin, Monaco, Lucida Console, monospace;
+  display: grid; }
+
+a {
+  color: #ff8282;
+  text-decoration: none; }
+
+a:hover {
+  text-decoration: underline; }
+
+.container {
+  width: calc(100% - 40px);
+  max-width: 1140px;
+  margin: 0 auto; }
+
+main {
+  width: 100vw; }
+
+nav {
+  background: #3c3c5a;
+  white-space: nowrap;
+  overflow-x: auto; }
+  nav .container {
+    display: flex;
+    align-items: center; }
+    nav .container .website-name a {
+      color: whitesmoke;
+      text-decoration: none;
+      background: #ff8282;
+      padding: 5px 10px;
+      border-radius: 20px;
+      text-shadow: #ff6464 2px 2px; }
+    nav .container .website-nav {
+      margin-left: auto; }
+      nav .container .website-nav ul {
+        display: flex;
+        padding: 0; }
+      nav .container .website-nav li {
+        list-style-type: none;
+        padding: 10px 0 10px 30px; }
+      nav .container .website-nav a {
+        color: whitesmoke;
+        text-decoration: none; }
+
+@media (max-width: 600px) {
+  nav .container {
+    max-width: none; }
+    nav .container .website-nav {
+      padding: 0 20px; } }
+
+header {
+  text-align: center;
+  margin: 150px 0; }
+  header h1 {
+    font-size: 2em; }
+
+footer {
+  background: #1e1e2d;
+  color: #c8c8e6;
+  margin-top: 100px;
+  white-space: nowrap;
+  overflow-x: auto; }
+  footer .container {
+    display: flex;
+    align-items: center; }
+    footer .container .website-subnav {
+      margin-left: auto; }
+      footer .container .website-subnav ul {
+        display: flex;
+        padding: 0; }
+      footer .container .website-subnav li {
+        list-style-type: none;
+        padding: 10px 0 10px 30px; }
+      footer .container .website-subnav a {
+        color: #c8c8e6; }
+
+footer::after {
+  content: '';
+  background: #1e1e2d;
+  position: fixed;
+  height: 10000px;
+  width: 100vw;
+  overflow: hidden; }
+
+@media (max-width: 600px) {
+  footer .container {
+    max-width: none; }
+    footer .container .website-version {
+      order: 2;
+      padding: 10px 20px; }
+    footer .container .website-subnav li {
+      padding: 10px 30px 10px 0; } }
diff --git a/resources/_gen/assets/scss/scss/errorpages.scss_f300667da4f5b5f84e1a9e0702b2fdde.json b/resources/_gen/assets/scss/scss/errorpages.scss_f300667da4f5b5f84e1a9e0702b2fdde.json
new file mode 100644
index 0000000..3488e27
--- /dev/null
+++ b/resources/_gen/assets/scss/scss/errorpages.scss_f300667da4f5b5f84e1a9e0702b2fdde.json
@@ -0,0 +1 @@
+{"Target":"scss/errorpages.css","MediaType":"text/css","Data":{}}
\ No newline at end of file
diff --git a/resources/_gen/assets/scss/scss/projects/list.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/scss/projects/list.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
index 3f06464..c565c6a 100644
--- a/resources/_gen/assets/scss/scss/projects/list.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/resources/_gen/assets/scss/scss/projects/list.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -7,15 +7,16 @@
 
 html {
   scrollbar-width: thin;
-  scrollbar-color: #ff8282 #3c3c5a; }
+  scrollbar-color: #ff8282 #3c3c5a;
+  overflow-x: hidden;
+  overflow-y: scroll; }
 
 body {
   background: #28283c;
   color: #f0f0ff;
   margin: 0;
   font-family: PoppinsLatin, Monaco, Lucida Console, monospace;
-  display: grid;
-  overflow-x: hidden; }
+  display: grid; }
 
 a {
   color: #ff8282;