diff --git a/src/layouts/Footer.astro b/src/components/Footer.astro
similarity index 73%
rename from src/layouts/Footer.astro
rename to src/components/Footer.astro
index 41988e07c8..8fab00ef6e 100644
--- a/src/layouts/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,15 +1,18 @@
 ---
 import { Icon } from 'astro-icon/components';
 import { getEntry } from 'astro:content';
-import Container from '../components/layout/Container.astro';
-import InlineSVG from '../components/util/InlineSVG.astro';
+
+import Container from '@/components/layout/Container.astro';
+import InlineSVG from '@/components/util/InlineSVG.astro';
+import Link from '@/components/util/Link.astro';
+
 const footerMenu = await getEntry('menus', 'footer');
 ---
 
 <footer>
   <div class="clear-both bg-nix-blue-darker font-light text-white">
     <Container>
-      <div class="flex flex-col flex-wrap gap-y-8 py-8 sm:flex-row">
+      <div class="flex flex-col flex-wrap gap-y-8 py-14 sm:flex-row">
         {
           footerMenu.data.sections.map((menu) => (
             <div class="basis-1/2 lg:basis-1/4">
@@ -19,7 +22,7 @@ const footerMenu = await getEntry('menus', 'footer');
               <ul class="space-y-2 font-extralight">
                 {menu.items.map((item) => (
                   <li>
-                    <a href={item.link}>{item.name}</a>
+                    <Link href={item.link}>{item.name}</Link>
                   </li>
                 ))}
               </ul>
@@ -27,20 +30,22 @@ const footerMenu = await getEntry('menus', 'footer');
           ))
         }
       </div>
+
       <hr class="border-nix-blue-light" />
+
       <div
-        class="flex flex-col flex-wrap gap-8 py-8 font-extralight lg:flex-row lg:gap-0"
+        class="flex flex-col flex-wrap gap-4 py-4 font-extralight lg:flex-row lg:gap-0"
       >
-        <div class="flex basis-1/2 flex-row gap-2">
+        <div class="flex basis-1/2 gap-2">
           <InlineSVG
             src="/src/assets/image/flake-white.svg"
-            class="inline-block h-16 w-16"
+            class="inline-block h-14 w-14"
           />
           <div class="flex flex-col justify-center">
             <div>
               Copyright © {new Date().getFullYear()} NixOS contributors
             </div>
-            <a
+            <Link
               href="https://github.com/NixOS/nixos-homepage/blob/master/LICENSES/CC-BY-SA-4.0.txt"
             >
               <abbr
@@ -48,27 +53,28 @@ const footerMenu = await getEntry('menus', 'footer');
               >
                 CC-BY-SA-4.0
               </abbr>
-            </a>
+            </Link>
           </div>
         </div>
+
         <hr class="border-nix-blue-light lg:hidden" />
+
         <div
-          class="flex basis-1/2 flex-row justify-between gap-4 font-extralight lg:justify-end"
+          class="flex basis-1/2 justify-between gap-4 font-extralight lg:justify-end"
         >
           <h4 class="my-auto">Connect with us:</h4>
-          <div class="my-auto flex flex-row gap-3">
+          <div class="my-auto flex gap-4">
             {
               footerMenu.data.social.map((item) => (
-                <a
+                <Link
                   href={item.link}
                   aria-label={`Connect with us on ${item.name}`}
                 >
                   <Icon
-                    alt={item.name}
-                    class="h-7 w-7"
+                    class="h-5 w-5"
                     name={`simple-icons:${item.name.toLowerCase()}`}
                   />
-                </a>
+                </Link>
               ))
             }
           </div>
diff --git a/src/layouts/Header.astro b/src/components/Header.astro
similarity index 77%
rename from src/layouts/Header.astro
rename to src/components/Header.astro
index a4091c895d..998d5cbbb9 100644
--- a/src/layouts/Header.astro
+++ b/src/components/Header.astro
@@ -1,8 +1,11 @@
 ---
 import { Icon } from 'astro-icon/components';
 import { getEntry } from 'astro:content';
-import Container from '../components/layout/Container.astro';
-import InlineSVG from '../components/util/InlineSVG.astro';
+
+import Container from '@/components/layout/Container.astro';
+import InlineSVG from '@/components/util/InlineSVG.astro';
+import Link from '@/components/util/Link.astro';
+
 const headerMenu = await getEntry('menus', 'header');
 
 const currentTopRoute = `/${Astro.url.pathname.split('/')[1]}`;
@@ -14,27 +17,28 @@ const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-wh
 
 <header
   role="banner"
-  class="bg-white font-extralight text-black drop-shadow-md"
+  class="sticky top-0 z-50 bg-white font-extralight text-black drop-shadow-md"
 >
   <Container class="flex flex-col justify-between md:flex-row md:items-center">
     <div
       class="my-2 flex items-center justify-between gap-2 text-4xl font-normal md:justify-start"
     >
-      <a
+      <Link
         href="/"
         class="flex select-none items-center justify-between gap-2 md:justify-start"
       >
         <InlineSVG
-          class="h-16 w-auto"
+          class="h-12 w-auto"
           src="/src/assets/image/nixos-logo-notext.svg"
           alt="Nixos Logo"
         />
         <InlineSVG
-          class="block h-16 w-auto md:hidden xl:block"
+          class="block h-12 w-auto md:hidden xl:block"
           src="/src/assets/image/nixos-logo-text.svg"
           alt="Nixos Logo Text"
         />
-      </a>
+      </Link>
+
       <button
         aria-label="Main Navigation Toggle"
         class="block rounded-lg bg-nix-blue-light p-4 md:hidden"
@@ -45,17 +49,18 @@ const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-wh
         <span class="block h-1 w-8 bg-white"></span>
       </button>
     </div>
+
     <nav
       aria-label="Main Navigation"
       role="menubar"
-      class="flex flex-col gap-0.5 pb-4 md:flex md:flex-row md:gap-5 md:pb-0"
+      class="flex flex-col gap-0.5 pb-4 leading-none md:flex md:flex-row md:gap-5 md:pb-0"
       id="navbar-menu"
     >
       {
         headerMenu.data.items.map((item) => (
-          <a
+          <Link
             class:list={[
-              'pb-6 pt-8',
+              'pb-6 pt-7',
               navbarItemStyle,
               currentTopRoute === item.link
                 ? navbarItemActiveStyle
@@ -64,28 +69,22 @@ const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-wh
             href={item.link}
           >
             {item.name}
-          </a>
+          </Link>
         ))
       }
-      <a
-        target="_blank"
-        rel="noreferrer noopener"
-        class={`pt-8 md:pt-7 pb-6 ${navbarItemStyle} ${navbarItemInactiveStyle}`}
+      <Link
+        class={`pt-7 pb-6 md:pt-5 md:pb-3 ${navbarItemStyle} ${navbarItemInactiveStyle}`}
         href="https://search.nixos.org"
         arial-label="Nixos package and options search"
       >
-        <Icon
-          alt="Search"
-          class="hidden h-8 w-8 text-nix-blue md:block"
-          name="mdi:search"
-        />
+        <Icon class="hidden h-8 w-8 text-nix-blue md:block" name="mdi:search" />
         <span class="inline-block md:hidden">Search</span>
-      </a>
+      </Link>
     </nav>
   </Container>
 </header>
 
-<script lang="ts">
+<script>
   const navigationToggle = document.getElementById('navigation-toggle');
   const navbarMenu = document.getElementById('navbar-menu');
 
diff --git a/src/components/util/Link.astro b/src/components/util/Link.astro
new file mode 100644
index 0000000000..e05c3fd148
--- /dev/null
+++ b/src/components/util/Link.astro
@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'a'> {}
+
+const { href, ...props } = Astro.props;
+
+let linkProps = { href, ...props };
+
+if (!!href && href.toString().startsWith('http')) {
+  linkProps = { ...linkProps, target: '_blank', rel: 'noopener noreferrer' };
+}
+---
+
+<a {...linkProps}>
+  <slot />
+</a>
diff --git a/src/content/menus/footer.yaml b/src/content/menus/footer.yaml
index 22845e10f7..9af45cdb52 100644
--- a/src/content/menus/footer.yaml
+++ b/src/content/menus/footer.yaml
@@ -36,8 +36,8 @@ sections:
 social:
   - name: Mastodon
     link: https://chaos.social/@nixos_org
-  - name: Twitter
-    link: https://twitter.com/nixos_org
+  - name: X
+    link: https://x.com/nixos_org
   - name: Youtube
     link: https://www.youtube.com/channel/UC3vIimi9q4AT8EgxYp_dWIw
   - name: GitHub
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 3413e3e7f1..2302b698b7 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,14 +1,14 @@
 ---
 import { SEO } from 'astro-seo';
+import { getImage } from 'astro:assets';
+import { getEntry } from 'astro:content';
 
-import Footer from './Footer.astro';
-import Header from './Header.astro';
+import Footer from '@/components/Footer.astro';
+import Header from '@/components/Header.astro';
 
-import { getImage } from 'astro:assets';
-import '../styles/base.css';
+import '@/styles/base.css';
 
-import { getEntry } from 'astro:content';
-import faviconSvgSrc from '../assets/image/flake-blue.svg';
+import faviconSvgSrc from '@/assets/image/flake-blue.svg';
 
 const {
   title = 'Nix &amp; NixOS | Declarative builds and deployments',
@@ -80,10 +80,13 @@ const headFeedLinks = blogMenu.data.map((e) => {
   </head>
   <body class="flex min-h-screen flex-col bg-white text-gray-950">
     <Header />
+
     <main class="flex-1">
       <slot />
     </main>
+
     <Footer />
+
     <script>
       import 'htmx.org';
 
diff --git a/src/layouts/MDXLayout.astro b/src/layouts/MDXLayout.astro
index 71bde75036..9a150ffc82 100644
--- a/src/layouts/MDXLayout.astro
+++ b/src/layouts/MDXLayout.astro
@@ -1,8 +1,8 @@
 ---
 import type { MarkdownLayoutProps } from 'astro';
 
-import Container from '../components/layout/Container.astro';
-import PageHeader from '../components/layout/PageHeader.astro';
+import Container from '@/components/layout/Container.astro';
+import PageHeader from '@/components/layout/PageHeader.astro';
 import Layout from './Layout.astro';
 
 type Props = MarkdownLayoutProps<{
@@ -10,7 +10,7 @@ type Props = MarkdownLayoutProps<{
   parentPath?: string;
 }>;
 
-const { frontmatter, url } = Astro.props;
+const { frontmatter } = Astro.props;
 ---
 
 <Layout title={frontmatter.title}>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 7548ca82f8..91ab1d498d 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,17 +1,18 @@
 const { addDynamicIconSelectors } = require('@iconify/tailwind');
-const plugin = require('tailwindcss/plugin')
+const plugin = require('tailwindcss/plugin');
 const fs = require('node:fs');
+const path = require('node:path');
 const parser = require('node-html-parser');
 const svgo = require('svgo');
-const colors = require('tailwindcss/colors')
+const colors = require('tailwindcss/colors');
 
-const defaultTheme = require("tailwindcss/defaultTheme");
+const defaultTheme = require('tailwindcss/defaultTheme');
 
 const inlineSvgs = {
-  'hero': './src/assets/image/hero-bg.svg',
+  hero: './src/assets/image/hero-bg.svg',
   'landing-search-top': './src/assets/image/divider/landing_search_top.svg',
   'header-nixdarkblue': './src/assets/image/divider/header_nixdarkblue.svg',
-}
+};
 
 const shadow = {
   md: '0 8px 2px rgba(0,0,0,0.2)',
@@ -21,13 +22,15 @@ const shadow = {
 };
 
 function inlineSvg({ svg }) {
-  const file = fs.readFileSync(svg, "utf8");
+  const filePath = path.resolve(__dirname, svg);
+  const file = fs.readFileSync(filePath, 'utf8');
   const stringified = parser.parse(file).toString();
+
   const optimized = svgo.optimize(stringified, {
     multipass: true,
     plugins: [
       {
-        name: "preset-default",
+        name: 'preset-default',
         params: {
           overrides: {
             removeViewBox: false,
@@ -37,76 +40,78 @@ function inlineSvg({ svg }) {
       },
     ],
   });
+
   const base64 = Buffer.from(optimized.data).toString('base64');
-  return "data:image/svg+xml;base64," + base64;
+
+  return 'data:image/svg+xml;base64,' + base64;
 }
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
-    "./node_modules/asciinema-player/**/*.js"
+    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
+    './node_modules/asciinema-player/**/*.js',
   ],
   theme: {
     fontFamily: {
-      sans: ["Roboto Flex Variable", ...defaultTheme.fontFamily.sans],
-      serif: ["Overpass Variable", ...defaultTheme.fontFamily.serif],
-      heading: ["Overpass Variable", ...defaultTheme.fontFamily.sans],
-      mono: ["Fira Code Variable", ...defaultTheme.fontFamily.mono],
+      sans: ['Roboto Flex Variable', ...defaultTheme.fontFamily.sans],
+      serif: ['Overpass Variable', ...defaultTheme.fontFamily.serif],
+      heading: ['Overpass Variable', ...defaultTheme.fontFamily.sans],
+      mono: ['Fira Code Variable', ...defaultTheme.fontFamily.mono],
     },
     colors: {
-      "nix-blue": {
-        "extralight": "#f2f8fd", // nixlighterblue
-        "lighter": "#e6ecf5", // nixlighterblue-dimmed
-        "light": "#7ebae4", // nixlightblue
-        DEFAULT: "#5277c3", // nixdarkblue
-        "dark": "#405D99", // nixsemidarkblue
-        "darker": "#27385d", // nixdarkerblue
+      'nix-blue': {
+        extralight: '#f2f8fd', // nixlighterblue
+        lighter: '#e6ecf5', // nixlighterblue-dimmed
+        light: '#7ebae4', // nixlightblue
+        DEFAULT: '#5277c3', // nixdarkblue
+        dark: '#405D99', // nixsemidarkblue
+        darker: '#27385d', // nixdarkerblue
       },
-      "nix-orange": {
-        "lighter": "#fff5e1", // nixlightorange
-        DEFAULT: "#ffab0d", // nixorange
-        "dark": "#ff8657", // nixdarkorange
-        "darker": "#cc3900", // nixdarkerorange
+      'nix-orange': {
+        lighter: '#fff5e1', // nixlightorange
+        DEFAULT: '#ffab0d', // nixorange
+        dark: '#ff8657', // nixdarkorange
+        darker: '#cc3900', // nixdarkerorange
       },
-      "nix-green": {
-        DEFAULT: "#6ad541", // nixgreen
-        "dark": "#51ba29", // nixdarkgreen
+      'nix-green': {
+        DEFAULT: '#6ad541', // nixgreen
+        dark: '#51ba29', // nixdarkgreen
       },
-      "gray": colors.gray,
-      "white": colors.white,
-      "black": colors.black,
-      "transparent": colors.transparent,
+      gray: colors.gray,
+      white: colors.white,
+      black: colors.black,
+      transparent: colors.transparent,
     },
     boxShadow: shadow,
     dropShadow: shadow,
     extend: {
       borderWidth: {
-        '0.5': '0.5px',
-        '1': '1px'
+        0.5: '0.5px',
+        1: '1px',
       },
       listStyleType: {
-        "circle": "circle",
+        circle: 'circle',
       },
       textDecorationThickness: {
-        '0.5': '0.5px'
+        0.5: '0.5px',
       },
       backgroundSize: {
-        'divider': 'auto 100%',
+        divider: 'auto 100%',
       },
     },
     screens: {
-      'sm': '480px',
-      'md': '768px',
-      'lg': '992px',
-      'xl': '1200px',
+      sm: '480px',
+      md: '768px',
+      lg: '992px',
+      xl: '1200px',
     },
     fontSize: {
-      'xs': '0.75rem',
-      'sm': '0.875rem',
-      'base': '1rem',
-      'lg': '1.2rem',
-      'xl': '1.4rem',
+      xs: '0.75rem',
+      sm: '0.875rem',
+      base: '1rem',
+      lg: '1.2rem',
+      xl: '1.4rem',
       '2xl': '1.625rem',
       '3xl': '1.953rem',
       '4xl': '2.441rem',
@@ -118,16 +123,16 @@ module.exports = {
   },
   plugins: [
     addDynamicIconSelectors(),
-    plugin(function({ addUtilities }) {
-      res = {}
+    plugin(function ({ addUtilities }) {
+      res = {};
 
       for (const [key, value] of Object.entries(inlineSvgs)) {
         res[`.inline-svg-${key}`] = {
           'background-image': `url(${inlineSvg({ svg: value })})`,
-        }
+        };
       }
 
-      addUtilities(res)
-    })
+      addUtilities(res);
+    }),
   ],
-}
+};