diff --git a/package.json b/package.json
index 747f810..3689f30 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,8 @@
     "@astrojs/cloudflare": "^6.3.0",
     "@astrojs/rss": "^2.4.1",
     "@astrojs/sitemap": "^1.3.0",
+    "@fontsource/ubuntu": "^5.0.2",
+    "@fontsource/ubuntu-mono": "^5.0.2",
     "@picocss/pico": "^1.5.10",
     "astro": "^2.5.0"
   },
diff --git a/public/favicon.svg b/public/favicon.svg
index f157bd1..b5e4535 100644
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,9 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 87C0 38.9512 38.9512 0 87 0H425C473.049 0 512 38.9512 512 87V425C512 473.049 473.049 512 425 512H87C38.9512 512 0 473.049 0 425V87Z" fill="#212222"/>
+<path d="M65 259.4L141.8 227.2L148.6 248.8L92.6 270.6L148.6 292.4L141.8 314L65 281.6V259.4Z" fill="#FFB300"/>
+<path d="M168.6 231C173 229.8 178.4 228.667 184.8 227.6C191.333 226.533 198.4 226 206 226C213.467 226 219.667 227.067 224.6 229.2C229.533 231.2 233.4 234.133 236.2 238C239.133 241.733 241.2 246.267 242.4 251.6C243.6 256.8 244.2 262.6 244.2 269V322H219.6V272.2C219.6 263.4 218.6 257.067 216.6 253.2C214.6 249.333 210.533 247.4 204.4 247.4C202.533 247.4 200.667 247.467 198.8 247.6C197.067 247.733 195.2 247.933 193.2 248.2V322H168.6V231Z" fill="#FFB300"/>
+<path d="M291 355H265.4L321.4 182.2H346.6L291 355Z" fill="#FFB300"/>
+<path d="M447.8 281.8L371 314.2L364 292.6L420.2 270.8L364 249L371 227.4L447.8 259.6V281.8Z" fill="#FFB300"/>
 </svg>
diff --git a/public/logo-square.png b/public/logo-square.png
new file mode 100644
index 0000000..6285bc6
Binary files /dev/null and b/public/logo-square.png differ
diff --git a/public/logo-square.svg b/public/logo-square.svg
new file mode 100644
index 0000000..b5e4535
--- /dev/null
+++ b/public/logo-square.svg
@@ -0,0 +1,7 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 87C0 38.9512 38.9512 0 87 0H425C473.049 0 512 38.9512 512 87V425C512 473.049 473.049 512 425 512H87C38.9512 512 0 473.049 0 425V87Z" fill="#212222"/>
+<path d="M65 259.4L141.8 227.2L148.6 248.8L92.6 270.6L148.6 292.4L141.8 314L65 281.6V259.4Z" fill="#FFB300"/>
+<path d="M168.6 231C173 229.8 178.4 228.667 184.8 227.6C191.333 226.533 198.4 226 206 226C213.467 226 219.667 227.067 224.6 229.2C229.533 231.2 233.4 234.133 236.2 238C239.133 241.733 241.2 246.267 242.4 251.6C243.6 256.8 244.2 262.6 244.2 269V322H219.6V272.2C219.6 263.4 218.6 257.067 216.6 253.2C214.6 249.333 210.533 247.4 204.4 247.4C202.533 247.4 200.667 247.467 198.8 247.6C197.067 247.733 195.2 247.933 193.2 248.2V322H168.6V231Z" fill="#FFB300"/>
+<path d="M291 355H265.4L321.4 182.2H346.6L291 355Z" fill="#FFB300"/>
+<path d="M447.8 281.8L371 314.2L364 292.6L420.2 270.8L364 249L371 227.4L447.8 259.6V281.8Z" fill="#FFB300"/>
+</svg>
diff --git a/public/placeholder-about.jpg b/public/placeholder-about.jpg
deleted file mode 100644
index 2f736d9..0000000
Binary files a/public/placeholder-about.jpg and /dev/null differ
diff --git a/public/placeholder-hero.jpg b/public/placeholder-hero.jpg
deleted file mode 100644
index 66c8649..0000000
Binary files a/public/placeholder-hero.jpg and /dev/null differ
diff --git a/public/placeholder-social.jpg b/public/placeholder-social.jpg
deleted file mode 100644
index e8844fe..0000000
Binary files a/public/placeholder-social.jpg and /dev/null differ
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 3129da8..eb35879 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,18 +1,23 @@
 ---
 import HeaderLink from './HeaderLink.astro'
 import ThemeIcon from './ThemeIcon.astro'
+import Logo from './Logo.astro'
 ---
 
 <header class="container">
-  <nav>
+  <nav id="navigation">
     <ul>
-      <HeaderLink href="/">nzambello.dev</HeaderLink>
+      <HeaderLink href="/">
+        <Logo />
+      </HeaderLink>
     </ul>
-    <ul>
+    <ul class="menu">
       <HeaderLink href="/blog">Blog</HeaderLink>
       <HeaderLink href="/about">About</HeaderLink>
       <HeaderLink href="https://twitter.com/astrodotbuild" target="_blank">Twitter</HeaderLink>
       <HeaderLink href="https://github.com/withastro/astro" target="_blank">GitHub</HeaderLink>
+    </ul>
+    <ul>
       <li>
         <ThemeIcon />
       </li>
@@ -20,7 +25,21 @@ import ThemeIcon from './ThemeIcon.astro'
   </nav>
 </header>
 <style>
-  header {
-    margin: 0em 0 2em;
+  body > header.container {
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-bottom: 2rem;
+    margin-top: 1rem;
+  }
+
+  @media (max-width: 767px) {
+    nav ul.menu {
+      display: none;
+    }
+  }
+  nav ul.menu {
+    flex-grow: 1;
+    flex-shrink: 0;
+    justify-content: flex-end;
   }
 </style>
diff --git a/src/components/Logo.astro b/src/components/Logo.astro
new file mode 100644
index 0000000..4e8a7ed
--- /dev/null
+++ b/src/components/Logo.astro
@@ -0,0 +1,62 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="logo" width="456" height="94" viewBox="0 0 435 94" fill="none">
+  <g class="text-container">
+    <text
+      x="43"
+      y="79.45"
+      dominant-baseline="ideographic"
+      textLength="324"
+      lengthAdjust="spacingAndGlyphs"
+      class="fills">nzambello</text
+    >
+  </g>
+  <g class="text-container text-container--light">
+    <text
+      x="372"
+      y="79.45"
+      dominant-baseline="ideographic"
+      textLength="72"
+      lengthAdjust="spacingAndGlyphs"
+      class="fills">/&gt;</text
+    >
+  </g>
+  <g class="text-container text-container--light">
+    <text y="79.45" dominant-baseline="ideographic" textLength="36" lengthAdjust="spacingAndGlyphs" class="fills"
+      >&lt;</text
+    >
+  </g>
+</svg>
+<style>
+  svg.logo {
+    width: 10rem;
+    height: auto;
+    fill: none;
+    color: var(--text-color);
+  }
+  @media (max-width: 575px) {
+    svg.logo {
+      width: 9rem;
+    }
+  }
+  svg.logo .text-container {
+    font-family: 'Ubuntu Mono';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 72px;
+    text-decoration: currentColor;
+    direction: ltr;
+    fill: currentColor;
+    fill-opacity: 1;
+  }
+  svg.logo .text-container--light {
+    fill-opacity: 0.6;
+  }
+  svg.logo:hover .text-container--light,
+  svg.logo:focus .text-container--light {
+    fill-opacity: 0.85;
+  }
+  svg.logo .fills {
+    text-transform: none;
+    letter-spacing: normal;
+    white-space: pre;
+  }
+</style>
diff --git a/src/consts.ts b/src/consts.ts
index 1d5dbf6..711aef7 100644
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -1,5 +1,2 @@
-// Place any global data in this file.
-// You can import this data from anywhere in your site by using the `import` keyword.
-
-export const SITE_TITLE = 'My personal website.';
-export const SITE_DESCRIPTION = 'Welcome to my website!';
+export const SITE_TITLE = 'Nicola Zambello'
+export const SITE_DESCRIPTION = 'Welcome to my website!'
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 41e0f04..32e4472 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,10 +1,15 @@
 ---
 import '@picocss/pico/css/pico.min.css'
+import '@fontsource/ubuntu-mono/400.css'
+import '@fontsource/ubuntu-mono/700.css'
+import '@fontsource/ubuntu/400.css'
+import '@fontsource/ubuntu/700.css'
+import '@fontsource/ubuntu/400-italic.css'
 import '../styles/global.css'
 
 import Header from '../components/Header.astro'
 import Footer from '../components/Footer.astro'
-const { title, description, image = '/placeholder-social.jpg' } = Astro.props
+const { title, description, image = '/logo-square.png' } = Astro.props
 const canonicalURL = new URL(Astro.url.pathname, Astro.site)
 ---
 
@@ -15,7 +20,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site)
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="application-name" content="nzambello.dev" />
     <meta name="og:type" content="website" />
-    <meta name="generator" content={Astro.generator} />
+    <meta name="generator" content="Astro + Plone" />
     <link rel="canonical" href={canonicalURL} />
 
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@@ -39,8 +44,10 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site)
     <meta property="twitter:image" content={new URL(image, Astro.url)} />
   </head>
   <body>
+    <a class="skip-link" href="#navigation">Skip to navigation</a>
+    <a class="skip-link" href="#main">Skip to content</a>
     <Header />
-    <main class="container">
+    <main class="container" id="main">
       <slot />
     </main>
     <Footer />
diff --git a/src/styles/global.css b/src/styles/global.css
index c2fda0f..dd500d2 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -6,6 +6,7 @@
 	--primary-hover: #ffa000;
 	--primary-focus: rgba(255, 179, 0, 0.125);
 	--primary-inverse: rgba(0, 0, 0, 0.75);
+	--text-color: hsl(205, 20%, 32%);
 }
 
 /* Amber Dark scheme (Auto) */
@@ -17,6 +18,7 @@
 		--primary-focus: rgba(255, 179, 0, 0.25);
 		--primary-inverse: rgba(0, 0, 0, 0.75);
 		--background-color: #212222;
+		--text-color: hsl(205, 16%, 77%);
 	}
 }
 
@@ -28,6 +30,7 @@
 	--primary-focus: rgba(255, 179, 0, 0.25);
 	--primary-inverse: rgba(0, 0, 0, 0.75);
 	--background-color: #212222;
+	--text-color: hsl(205, 16%, 77%);
 }
 
 /* Amber (Common styles) */
@@ -36,4 +39,33 @@
 	--form-element-focus-color: var(--primary-focus);
 	--switch-color: var(--primary-inverse);
 	--switch-checked-background-color: var(--primary);
+	--font-family: 'Ubuntu', system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
+		"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+		"Segoe UI Symbol", "Noto Color Emoji";
+}
+
+body {
+	font-family: 'Ubuntu', sans-serif;
+}
+
+pre,
+code,
+kbd,
+samp {
+	--font-family: 'Ubuntu Mono', "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
+		"Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
+		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+.skip-link {
+	padding: 5px 10px;
+	position: absolute;
+	top: 0;
+	left: 0;
+	transform: translateY(-100%);
+	transition: transform 0.3s;
+}
+
+a:focus {
+	transform: translateY(0%);
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index bafe460..bea710f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -801,6 +801,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fontsource/ubuntu-mono@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "@fontsource/ubuntu-mono@npm:5.0.2"
+  checksum: bbb311558b6217e038938b3b1d82d7b0f685521622018a3369a9d4e4474abf48c517752fcc07a41b6b064801221aee8442dd18003457c9c0b4a9826d909be80e
+  languageName: node
+  linkType: hard
+
+"@fontsource/ubuntu@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "@fontsource/ubuntu@npm:5.0.2"
+  checksum: a0fee79129e37f07900fcfc9c8b1fa6e7ff9b59ec1e8e60030b3d9df8a286e08f5ceddcf55c35f82a42e3e60d71cc54af324b78bb8578fab381c2856bced7330
+  languageName: node
+  linkType: hard
+
 "@gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -4097,6 +4111,8 @@ __metadata:
     "@astrojs/cloudflare": ^6.3.0
     "@astrojs/rss": ^2.4.1
     "@astrojs/sitemap": ^1.3.0
+    "@fontsource/ubuntu": ^5.0.2
+    "@fontsource/ubuntu-mono": ^5.0.2
     "@picocss/pico": ^1.5.10
     astro: ^2.5.0
     wrangler: ^3.0.1