diff --git a/mwp-web/src/main.rs b/mwp-web/src/main.rs
index c463bce..0fe64df 100644
--- a/mwp-web/src/main.rs
+++ b/mwp-web/src/main.rs
@@ -66,6 +66,8 @@ async fn search_page(q: web::Query<SearchQuery>, index: web::Data<Index>) -> AwR
                     },
                     html! {
                         div {(format!("{:.2?}", result.timing))}
+                    },
+                    html! {
                         (listing(searcher, schema, result.docs))
                     }
                 ))
@@ -91,10 +93,13 @@ async fn tag_page(tag: web::Path<String>, index: web::Data<Index>) -> AwResult<M
             (render::header("Tags | Matt's Wiki"))
             body {
                 (render::layout(
-                    html! {
+                   html! {
                         div {(render::tags_filter(result.tags))}
                    },
-                    listing(searcher, schema, result.docs)
+                   html! {
+
+                   },
+                   listing(searcher, schema, result.docs)
                 ))
             }
         }
@@ -163,6 +168,8 @@ async fn content_page(
                                 }
                             }
                         }
+                    },
+                    html! {
                         article { (PreEscaped(html)) }
                     }
                 ))
diff --git a/mwp-web/src/render.rs b/mwp-web/src/render.rs
index 28f479b..8fde8ce 100644
--- a/mwp-web/src/render.rs
+++ b/mwp-web/src/render.rs
@@ -22,7 +22,26 @@ fn tags_list(v: Vec<&str>) -> Markup {
     }
 }
 
-pub fn layout(sidebar: Markup, content: Markup) -> Markup {
+fn footer() -> Markup {
+    html! {
+        footer {
+            div {
+                "© Matous Dzivjak, 2024"
+            }
+            div {
+                "Software Engineer @ SumUp"
+            }
+            address {
+                "Berlin, Germany · Litomerice, Czech Republic"
+            }
+            div {
+                "matousdzivjak@gmail.com · GitHub · Keybase · LinkedIn · Instagram"
+            }
+        }
+    }
+}
+
+pub fn layout(sidebar: Markup, meta: Markup, content: Markup) -> Markup {
     html! {
         .layout {
             .nav {
@@ -31,12 +50,14 @@ pub fn layout(sidebar: Markup, content: Markup) -> Markup {
                 }
                 .search {
                     form method="GET" action="/search" {
-                        input type="text" name="query" id="query" placeholder="Search...";
+                        input type="search" name="query" id="query" placeholder="Search..." accesskey="f";
                     }
                 }
             }
             .sidebar {(sidebar)}
-            main .content {(content)}
+            .meta {(meta)}
+            main {(content)}
+            (footer())
         }
     }
 }
@@ -93,15 +114,13 @@ pub fn content_navigation(children: Vec<mwp_content::Node>) -> Markup {
 
 pub fn link(title: &str, url: &str, tags: Vec<&str>) -> Markup {
     html! {
-        div {
+        div .link {
             div .title {
-                h3 {
-                    @if !url.starts_with('/') {
-                        "↗ "
-                    }
-                    a href=(url) {
-                        (title)
-                    }
+                @if !url.starts_with('/') {
+                    "↗ "
+                }
+                a href=(url) {
+                    (title)
                 }
             }
             div .url {
diff --git a/mwp-web/static/styles.css b/mwp-web/static/styles.css
index aea123f..6ed9bfe 100644
--- a/mwp-web/static/styles.css
+++ b/mwp-web/static/styles.css
@@ -75,13 +75,30 @@ h2,
 h3,
 h4,
 h5 {
-  font-weight: 700;
-  letter-spacing: -0.0425em;
+  font-weight: 400;
+  font-family: var(--font-serif);
+  letter-spacing: -0.05em;
+  margin: 0.25em 0 0.25em 0;
+  line-height: 1.375;
+  padding-top: 0.5em;
+  overflow: hidden;
 }
 
 h1 {
-  font-size: 2.4em;
-  font-weight: 800;
+  font-size: 1.8em;
+  border-bottom: 1px solid var(--light);
+  padding-bottom: 0.17em;
+}
+
+h2 {
+  font-size: 1.5em;
+  border-bottom: 1px solid var(--light);
+  padding-bottom: 0.17em;
+}
+
+h3,
+h4 {
+  font-weight: bold;
 }
 
 hr {
@@ -111,26 +128,56 @@ ol {
   padding-left: 1.2em;
 }
 
+form {
+  margin: 0;
+}
+
 .layout {
-  padding: var(--spacings-giga);
-  gap: var(--spacings-giga);
   display: grid;
-  grid-template-columns: minmax(10em, 1fr) minmax(20em, 860px) 1fr;
-  grid-template-areas: "nav nav nav" "sidebar content .";
+  grid-template-columns: 16em minmax(0, 1fr);
+  grid-template-rows: auto auto 1fr auto;
+  grid-template-areas: "nav nav" "sidebar meta" "sidebar content" "footer footer";
 }
 
 .nav {
   grid-area: nav;
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacings-kilo) var(--spacings-giga);
+  border-bottom: 2px solid var(--light);
 }
 
 .sidebar {
   grid-area: sidebar;
+  padding: var(--spacings-giga);
+  border-right: 2px solid var(--light);
+}
+
+.meta {
+  grid-area: meta;
+  padding: var(--spacings-kilo) var(--spacings-giga);
+  border-bottom: 2px solid var(--light);
 }
 
-.content {
+main {
   grid-area: content;
+  padding: var(--spacings-kilo) var(--spacings-giga);
+}
+
+footer {
+  grid-area: footer;
+  padding: var(--spacings-giga);
+  border-top: 2px solid var(--light);
+  font-size: 0.875em;
+  color: var(--light);
+}
+
+article {
+  max-width: 920px;
+  width: 100%;
+  margin: 0 auto;
 }
 
 .tags {
@@ -176,8 +223,25 @@ ol {
 }
 
 .search input {
-  font-size: 1rem;
-  font-family: var(--font-mono);
+  border-radius: 0;
+  outline: none;
+  border: 1px solid #a2a9b1;
+  box-shadow: inset 0 0 0 1px transparent;
+  box-sizing: border-box;
+  display: block;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1.375;
+  margin: 0;
+  min-height: 32px;
+  padding: 4px 8px;
+  transition-duration: 0.25s;
+  transition-property: background-color, color, border-color, box-shadow;
+  width: 100%;
+}
+.search input[type=search] {
+  -webkit-appearance: none;
+  -moz-appearance: textfield;
 }
 
 .logo {
@@ -186,3 +250,11 @@ ol {
   font-family: var(--font-mono);
   font-weight: bold;
 }
+
+.link {
+  margin-bottom: var(--spacings-mega);
+}
+.link .title {
+  margin-bottom: var(--spacings-bit);
+  font-weight: bold;
+}
diff --git a/mwp-web/static/styles.scss b/mwp-web/static/styles.scss
index 64cf88c..932e0f2 100644
--- a/mwp-web/static/styles.scss
+++ b/mwp-web/static/styles.scss
@@ -80,13 +80,30 @@ h2,
 h3,
 h4,
 h5 {
-  font-weight: 700;
-  letter-spacing: -0.0425em;
+  font-weight: 400;
+  font-family: var(--font-serif);
+  letter-spacing: -.05em;
+  margin: 0.25em 0 0.25em 0;
+  line-height: 1.375;
+  padding-top: 0.5em;
+  overflow: hidden;
 }
 
 h1 {
-  font-size: 2.4em;
-  font-weight: 800;
+  font-size: 1.8em;
+  border-bottom: 1px solid var(--light);
+  padding-bottom: 0.17em;
+}
+
+h2 {
+  font-size: 1.5em;
+  border-bottom: 1px solid var(--light);
+  padding-bottom: 0.17em;
+}
+
+h3,
+h4 {
+  font-weight: bold
 }
 
 hr {
@@ -116,30 +133,62 @@ ol {
   padding-left: 1.2em;
 }
 
+form {
+  margin: 0;
+}
+
 // content
 
 .layout {
-  padding: var(--spacings-giga);
-  gap: var(--spacings-giga);
   display: grid;
-  grid-template-columns: minmax(10em, 1fr) minmax(20em, 860px) 1fr;
+  grid-template-columns: 16em minmax(0, 1fr);
+  grid-template-rows: auto auto 1fr auto;
   grid-template-areas:
-    'nav nav nav'
-    'sidebar content .';
+    'nav nav'
+    'sidebar meta'
+    'sidebar content'
+    'footer footer';
 }
 
 .nav {
   grid-area: nav;
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacings-kilo) var(--spacings-giga);
+  border-bottom: 2px solid var(--light);
 }
 
 .sidebar {
   grid-area: sidebar;
+  padding: var(--spacings-giga);
+  border-right: 2px solid var(--light);
 }
 
-.content {
+.meta {
+  grid-area: meta;
+  padding: var(--spacings-kilo) var(--spacings-giga);
+  border-bottom: 2px solid var(--light);
+}
+
+main {
   grid-area: content;
+  padding: var(--spacings-kilo) var(--spacings-giga);
+}
+
+footer {
+  grid-area: footer;
+  padding: var(--spacings-giga);
+  border-top: 2px solid var(--light);
+  font-size: .875em;
+  color: var(--light);
+}
+
+article {
+  max-width: 920px;
+  width: 100%;
+  margin: 0 auto;
 }
 
 .tags {
@@ -193,8 +242,26 @@ ol {
 
 .search {
   input {
-    font-size: 1rem;
-    font-family: var(--font-mono);
+    border-radius: 0;
+    outline: none;
+    border: 1px solid #a2a9b1;
+    box-shadow: inset 0 0 0 1px transparent;
+    box-sizing: border-box;
+    display: block;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: 1.375;
+    margin: 0;
+    min-height: 32px;
+    padding: 4px 8px;
+    transition-duration: .25s;
+    transition-property: background-color, color, border-color, box-shadow;
+    width: 100%;
+  }
+
+  input[type="search"] {
+    -webkit-appearance: none;
+    -moz-appearance: textfield;
   }
 }
 
@@ -203,4 +270,13 @@ ol {
   text-decoration: none;
   font-family: var(--font-mono);
   font-weight: bold;
+}
+
+.link {
+  .title {
+    margin-bottom: var(--spacings-bit);
+    font-weight: bold;
+  }
+
+  margin-bottom: var(--spacings-mega);
 }
\ No newline at end of file