diff --git a/package.json b/package.json
index 83864ba4a..ecfd184f5 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@astrojs/sitemap": "^3.3.0",
     "@astrojs/tailwind": "^5.1.4",
     "@fontsource-variable/inter": "^5.1.1",
+    "@fortawesome/fontawesome-free": "^6.7.2",
     "@tailwindcss/typography": "^0.5.16",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1b9a1447a..15eb290db 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       '@fontsource-variable/inter':
         specifier: ^5.1.1
         version: 5.2.5
+      '@fortawesome/fontawesome-free':
+        specifier: ^6.7.2
+        version: 6.7.2
       '@tailwindcss/typography':
         specifier: ^0.5.16
         version: 0.5.16(tailwindcss@3.4.17)
@@ -604,6 +607,10 @@ packages:
   '@fontsource-variable/inter@5.2.5':
     resolution: {integrity: sha512-TrWffUAFOnT8zroE9YmGybagoOgM/HjRqMQ8k9R0vVgXlnUh/vnpbGPAS/Caz1KIlOPnPGh6fvJbb7DHbFCncA==}
 
+  '@fortawesome/fontawesome-free@6.7.2':
+    resolution: {integrity: sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==}
+    engines: {node: '>=6'}
+
   '@img/sharp-darwin-arm64@0.33.5':
     resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -3498,6 +3505,8 @@ snapshots:
 
   '@fontsource-variable/inter@5.2.5': {}
 
+  '@fortawesome/fontawesome-free@6.7.2': {}
+
   '@img/sharp-darwin-arm64@0.33.5':
     optionalDependencies:
       '@img/sharp-libvips-darwin-arm64': 1.0.4
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index 372114db3..2b48d6061 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -1,8 +1,4 @@
 ---
-// Import the global.css file here so that it is included on
-// all pages through the use of the <BaseHead /> component.
-import "../styles/global.css";
-import "@fontsource-variable/inter";
 
 interface Props {
   title: string;
@@ -58,8 +54,3 @@ const { title, description, image = "/social-card.png" } = Astro.props;
   is:inline
   data-domain="ep2025.europython.eu"
   src="https://plausible.io/js/script.js"></script>
-
-<script
-  is:inline
-  src="https://kit.fontawesome.com/14a4971ab3.js"
-  crossorigin="anonymous"></script>
diff --git a/src/components/footer.astro b/src/components/Footer.astro
similarity index 98%
rename from src/components/footer.astro
rename to src/components/Footer.astro
index 83f15a299..594df4740 100644
--- a/src/components/footer.astro
+++ b/src/components/Footer.astro
@@ -8,6 +8,7 @@ const buildTimestamp = import.meta.env.TIMESTAMP;
 const gitVersion = import.meta.env.GIT_VERSION;
 ---
 
+      <div class="mt-auto">
 <Fullbleed className="bg-primary text-white">
   <footer
     class="max-w-4xl lg:max-w-6xl mx-auto py-16 lg:grid grid-cols-2 px-6 gap-60"
@@ -106,3 +107,4 @@ const gitVersion = import.meta.env.GIT_VERSION;
     </article>
   </footer>
 </Fullbleed>
+</div>
diff --git a/src/components/header/header.astro b/src/components/Header.astro
similarity index 80%
rename from src/components/header/header.astro
rename to src/components/Header.astro
index 2f4d0d4a4..de0d13ed0 100644
--- a/src/components/header/header.astro
+++ b/src/components/Header.astro
@@ -1,10 +1,10 @@
 ---
 import { promises as fs } from "fs";
-import { NavItems } from "../nav-items";
-import HeaderActions from "./header-actions.astro";
-import HeaderLogo from "./header-logo.astro";
+import { NavItems } from "@components/nav-items";
+import HeaderActions from "@components/header/header-actions.astro";
+import HeaderLogo from "@components/header/header-logo.astro";
 
-const links = JSON.parse(await fs.readFile("./src/data/links.json", "utf-8"));
+import links from "../data/links.json";
 ---
 
 <header class="p-6 flex items-center justify-between relative z-40">
@@ -27,7 +27,7 @@ const links = JSON.parse(await fs.readFile("./src/data/links.json", "utf-8"));
   <div
     class="fixed bg-body-background top-0 left-0 w-screen h-screen overflow-scroll hidden peer-checked:block xl:peer-checked:hidden z-50 p-6"
   >
-    <div class="flex items-center">
+    <div class="flex items-center justify-between">
       <HeaderLogo />
       <HeaderActions mobile />
     </div>
diff --git a/src/components/Modal.astro b/src/components/Modal.astro
new file mode 100644
index 000000000..18ffc94c0
--- /dev/null
+++ b/src/components/Modal.astro
@@ -0,0 +1,115 @@
+---
+import Button from '@ui/Button.astro';
+const { id = 'modal', open = false, closeOnOutsideClick = false } = Astro.props;
+---
+<div
+  id={id}
+  class={`fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-300 ${
+    open ? 'opacity-100 visible bg-black/50' : 'opacity-0 invisible'
+  }`}
+  data-modal-wrapper
+  data-close-on-outside-click={closeOnOutsideClick.toString()}
+>
+  <div
+    class="relative bg-white dark:bg-gray-800 p-6 lg:rounded-2xl lg:shadow-xl lg:max-w-4xl lg:mx-4 h-full lg:h-[80vh] w-full lg:w-[70vw] max-h-full overflow-y-auto"
+    data-modal-content
+  >
+    <Button
+      id="search-close"
+      clear
+      icon="close"
+      iconSize="fa-xl"
+      data-close-modal
+      class="w-[3em] h-[3em] absolute top-4 right-4 text-primary hover:text-black "
+    />
+    <slot />
+  </div>
+</div>
+<script is:inline>
+  document.addEventListener('DOMContentLoaded', () => {
+    // Function to toggle body scroll
+    const toggleBodyScroll = (disable) => {
+      if (disable) {
+        // Save the current scroll position
+        const scrollY = window.scrollY;
+        document.body.style.position = 'fixed';
+        document.body.style.top = `-${scrollY}px`;
+        document.body.style.width = '100%';
+        document.body.dataset.scrollPosition = scrollY.toString();
+      } else {
+        // Restore scroll position
+        const scrollY = parseInt(document.body.dataset.scrollPosition || '0');
+        document.body.style.position = '';
+        document.body.style.top = '';
+        document.body.style.width = '';
+        window.scrollTo(0, scrollY);
+        delete document.body.dataset.scrollPosition;
+      }
+    };
+
+    // Function to open modal
+    const openModal = (modal) => {
+      if (modal) {
+        // Disable body scroll
+        toggleBodyScroll(true);
+        // Show modal
+        modal.classList.remove('opacity-0', 'invisible');
+        modal.classList.add('opacity-100', 'visible');
+      }
+    };
+
+    // Function to close modal
+    const closeModal = (modal) => {
+      if (modal) {
+        // Enable body scroll
+        toggleBodyScroll(false);
+        // Hide modal
+        modal.classList.remove('opacity-100', 'visible');
+        modal.classList.add('opacity-0', 'invisible');
+      }
+    };
+
+    // Open modal buttons
+    document.querySelectorAll('[data-open-modal]').forEach(button => {
+      button.addEventListener('click', () => {
+        const modal = document.getElementById(button.dataset.openModal);
+        openModal(modal);
+      });
+    });
+
+    // Close modal buttons
+    document.querySelectorAll('[data-close-modal]').forEach(button => {
+      button.addEventListener('click', () => {
+        const modal = button.closest('[data-modal-wrapper]');
+        closeModal(modal);
+      });
+    });
+
+    // Close when clicking outside the modal content - only if enabled
+    document.querySelectorAll('[data-modal-wrapper]').forEach(modal => {
+      const closeOnOutsideClick = modal.dataset.closeOnOutsideClick === 'true';
+
+      if (closeOnOutsideClick) {
+        modal.addEventListener('click', (event) => {
+          // Check if the click was on the wrapper but not on the content
+          if (event.target === modal) {
+            closeModal(modal);
+          }
+        });
+      }
+
+      // Initialize any modal that's set to open by default
+      if (modal.classList.contains('opacity-100') && modal.classList.contains('visible')) {
+        toggleBodyScroll(true);
+      }
+    });
+
+    // Handle escape key to close all modals
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') {
+        const visibleModals = document.querySelectorAll('[data-modal-wrapper].visible, [data-modal-wrapper].opacity-100');
+        visibleModals.forEach(modal => closeModal(modal));
+      }
+    });
+  });
+</script>
diff --git a/src/components/Search.astro b/src/components/Search.astro
new file mode 100644
index 000000000..f93fa29c5
--- /dev/null
+++ b/src/components/Search.astro
@@ -0,0 +1,143 @@
+---
+import SearchComponent from "astro-pagefind/components/Search";
+import Button from "@ui/Button.astro";
+import Modal from "@components/Modal.astro";
+
+---
+
+
+<Modal id="modal-search" closeOnOutsideClick=true>
+  <h2 class="text-xl font-bold mb-2 py-2">Search</h2>
+  <SearchComponent
+    id="search"
+    className="pagefind-ui"
+    uiOptions={{
+      showImages: false,
+      translations: {
+        zero_results: "Couldn't find [SEARCH_TERM]",
+      },
+    }}
+  />
+  </div>
+</div>
+</Modal>
+
+
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+  const searchContainer = document.querySelector(".pagefind-ui") as HTMLElement | null;
+  const searchInput = searchContainer?.querySelector("input") as HTMLInputElement | null;
+  const searchButton = document.getElementById("searchButton") as HTMLElement | null;
+  const openModal = document.querySelector('[data-open-modal="modal-search"]') as HTMLElement;
+  const closeButton = document.querySelector('#search-close') as HTMLElement | null;
+
+  let selectedIndex = -1;
+
+  function openSearch() {
+    console.log("open");
+    openModal.click();
+      if (searchInput) {
+        searchInput.value = "Tips";
+        const inputEvent = new Event("input", { bubbles: true });
+        searchInput.dispatchEvent(inputEvent);
+        setTimeout(() => {
+          searchInput.value = "";
+          searchInput.placeholder = "Tips for You";
+        }, 100);
+        searchInput.focus();
+      }
+  }
+
+function closeSearch() {
+  closeButton?.click();
+}
+
+  function updateSelection() {
+    const results = searchContainer?.querySelectorAll(".pagefind-ui__result");
+    if (!results) return;
+
+    results.forEach((result, index) => {
+      if (result instanceof HTMLElement) {
+        if (index === selectedIndex) {
+          result.classList.add("selected");
+          result.scrollIntoView({ block: "nearest", behavior: "smooth" });
+        } else {
+          result.classList.remove("selected");
+        }
+      }
+    });
+  }
+
+  function makeResultsClickable() {
+    const results = searchContainer?.querySelectorAll(".pagefind-ui__result");
+    if (!results) return;
+
+    results.forEach((result) => {
+      const link = result.querySelector(".pagefind-ui__result-link") as HTMLAnchorElement | null;
+      if (link && !result.hasAttribute("data-clickable")) {
+        if (result instanceof HTMLElement) {
+          result.style.cursor = "pointer";
+          result.addEventListener("click", (e) => {
+            if (!(e.target instanceof HTMLElement) || !e.target.closest("a")) {
+              link.click();
+            }
+          });
+          result.setAttribute("data-clickable", "true");
+        }
+      }
+    });
+  }
+
+  if (searchButton) {
+    searchButton.addEventListener("click", openSearch);
+  }
+
+  document.addEventListener("keydown", function (event) {
+    if (!searchContainer || !searchInput) return;
+
+    const results = searchContainer.querySelectorAll(".pagefind-ui__result");
+
+    if (event.ctrlKey && event.key === "k") {
+      event.preventDefault();
+      openSearch();
+    } else if (event.key === "Escape") {
+      closeSearch();
+    } else if (document.activeElement === searchInput) {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        selectedIndex = (selectedIndex + 1) % results.length;
+        updateSelection();
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        selectedIndex = (selectedIndex - 1 + results.length) % results.length;
+        updateSelection();
+      } else if (event.key === "Enter") {
+        event.preventDefault();
+        if (results.length > 0) {
+          const indexToOpen = selectedIndex === -1 ? 0 : selectedIndex;
+          const link = results[indexToOpen]?.querySelector("a") as HTMLAnchorElement | null;
+          link?.click();
+        }
+      }
+    }
+  });
+
+  const resultsObserver = new MutationObserver(() => {
+    const results = searchContainer?.querySelectorAll(".pagefind-ui__result");
+    if (results && results.length > 0) {
+      selectedIndex = 0;
+      updateSelection();
+      makeResultsClickable();
+    }
+  });
+
+  if (searchContainer) {
+    resultsObserver.observe(searchContainer, {
+      childList: true,
+      subtree: true,
+    });
+  }
+
+  closeButton?.addEventListener("click", closeSearch);
+});
+</script>
diff --git a/src/components/header/header-actions.astro b/src/components/header/header-actions.astro
index 60bcfdb9c..0b2407237 100644
--- a/src/components/header/header-actions.astro
+++ b/src/components/header/header-actions.astro
@@ -1,7 +1,7 @@
 ---
 import Button from "@ui/Button.astro";
 import HeaderButton from "./header-button.astro";
-import Search from "astro-pagefind/components/Search";
+import Icon from "@ui/Icon.astro";
 
 export interface Props {
   mobile?: boolean;
@@ -10,148 +10,103 @@ export interface Props {
 const { mobile = false }: Props = Astro.props;
 
 const IS_LIVE = false;
+
+
+      //<Button id="searchButton" icon="search" iconSize="fa-xl" clear title="Search (Crtl+K)"></Button>
 ---
 
-<div class="flex items-center justify-end gap-2 w-1/3">
-  <Search
-    id="search"
-    className="pagefind-ui"
-    uiOptions={{
-      showImages: false,
-      translations: {
-        zero_results: "Couldn't find [SEARCH_TERM]",
-      },
-    }}
-  />
+<div class="flex items-center justify-end gap-2 h-[85px] w-1/3">
+<div class="ml-auto justify-end flex items-center w-full">
   {
-    !mobile ? (
+    !mobile ?
       <>
-      <Button url="/tickets" icon="ticket">Register Now!</Button>
-        {IS_LIVE && <Button url="/live">Live</Button>}
+
+        <button
+          id="searchButton"
+          class="mx-6 md:mx-2"
+            data-open-modal="modal-search"
+            aria-label="Search"
+            aria-keyshortcuts="Control+K"
+          >
+            <Icon name="search" />
+            <span class="hidden md:block" aria-hidden="true">Search</span>
+            <kbd class="hidden md:flex" >
+              <kbd>Ctrl</kbd><kbd>K</kbd>
+            </kbd>
+          </button>
+      <Button url="/tickets" icon="ticket" class="w-full max-w-48 max-xl:hidden">Register Now!</Button>
+      {IS_LIVE && <Button url="/live">Live</Button>}
       </>
-    ) : null
+     : null
   }
 
+
   <label for="nav_toggle" class="flex xl:hidden">
-    <HeaderButton variant="menu">
-      {mobile ? "Close Menu" : "Menu"}
-    </HeaderButton>
+      <span class="w-[3em] h-[3em] font-bold text-lg px-4 py-4 rounded-lg inline-flex items-center justify-center leading-4 transition-colors duration-200 not-prose border hover:text-black bg-primary text-white hover:bg-primary-hover border-transparent">
+      {mobile ? <Icon name="close" size="fa-xl" /> : <Icon name="bars" size="fa-xl" />}
+      </span>
   </label>
 </div>
-<script>
-  document.addEventListener("DOMContentLoaded", function () {
-    const searchContainer = document.querySelector(".pagefind-ui");
-    const searchInput = searchContainer?.querySelector("input");
-    let selectedIndex = -1;
 
-    function updateSelection() {
-      const results = searchContainer?.querySelectorAll(".pagefind-ui__result");
-      if (!results) return;
+<style>
+	button[data-open-modal] {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		border: 0;
+		background-color: transparent;
+    color: grey;
+		cursor: pointer;
+		height: 2.5rem;
+		font-size: 28px;
+	}
 
-      results.forEach((result, index) => {
-        if (index === selectedIndex) {
-          result.classList.add("selected");
-          result.scrollIntoView({ block: "nearest", behavior: "smooth" });
-        } else {
-          result.classList.remove("selected");
-        }
-      });
-    }
+	@media (min-width: 45rem) {
+		button[data-open-modal] {
+			border: 1px solid #ccc;
+			border-radius: 0.5rem;
+			padding-inline-start: 0.75rem;
+			padding-inline-end: 0.5rem;
+			background-color: #fff;
+			font-size: 16px;
+      width:100%;
+			min-width: 10rem;
+			max-width: 22rem;
+			color: #5f3d1b;
+		}
+		button[data-open-modal]:hover {
+			border-color: #5f3d1b;
+      color: #000;
+		}
 
-    document.addEventListener("keydown", function (event) {
-      if (!searchContainer || !searchInput) return;
+		button[data-open-modal] > :last-child {
+			margin-inline-start: auto;
+		}
+	}
 
-      const results = searchContainer.querySelectorAll(".pagefind-ui__result");
-      if (document.activeElement === searchInput) {
-        if (event.key === "ArrowDown") {
-          event.preventDefault();
-          selectedIndex = (selectedIndex + 1) % results.length;
-          updateSelection();
-        } else if (event.key === "ArrowUp") {
-          event.preventDefault();
-          selectedIndex = (selectedIndex - 1 + results.length) % results.length;
-          updateSelection();
-        } else if (event.key === "Enter" && selectedIndex >= 0) {
-          event.preventDefault();
-          results[selectedIndex].querySelector("a")?.click();
-        }
-      }
-    });
+	button > kbd {
+		border-radius: 0.25rem;
+			font-size: 16px;
+		gap: 0.25em;
+		padding-inline: 0.375rem;
+		background-color: #F1E1D4;
+    color: #5f3d1b;
+	}
 
-    // Reset selection when the search query changes
-    searchInput?.addEventListener("input", function () {
-      selectedIndex = -1;
-    });
-  });
-</script>
-<style is:global>
-  .pagefind-ui__result.selected {
-    background-color: #f5f5f5;
-    background-image: linear-gradient(to right, #3684b6 7px, transparent 5px);
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-  .pagefind-ui__drawer {
-  }
-  .pagefind-ui__message {
-    margin: 1em;
-  }
-  .pagefind-ui__result mark {
-    background: #f9eb5d;
-    background-image: linear-gradient(to right, #f9eb5d 10%, #fcf4a7 100%);
-    margin: 4px;
-    padding-right: 6px;
-    padding-left: 6px;
-    padding-top: 2px;
-    padding-bottom: 2px;
-    color: #000000;
-    font-family: monospace;
-    border-radius: 4px;
-  }
-  .pagefind-ui {
-    --pagefind-ui-scale: 1;
-    --pagefind-ui-primary: #141f36;
-    --pagefind-ui-text: black;
-    --pagefind-ui-border: #d8d8d8;
-    --pagefind-ui-border-width: 2px;
-    --pagefind-ui-border-radius: 0;
-    width:50%;
-    min-width: 10vw;
-  }
-  .pagefind-ui.yellow {
-    --pagefind-ui-background: #efc302;
-  }
-  .pagefind-ui.red {
-    --pagefind-ui-background: #ffb9bb;
-    width: 50%;
-  }
-  .pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
-    position: absolute;
-    left: auto;
-    right: 0;
-    margin-top: 0px;
-    width: 50vw;
-    z-index: 9999;
-    overflow-y: auto;
-    box-shadow:
-      0 10px 10px -5px rgba(0, 0, 0, 0.2),
-      0 2px 2px 0 rgba(0, 0, 0, 0.1);
-    border-bottom-right-radius: var(--pagefind-ui-border-radius);
-    border-bottom-left-radius: var(--pagefind-ui-border-radius);
-    background-color: var(--pagefind-ui-background);
-  }
-  .pagefind-ui__result {
-    padding: 0 2em 1em !important;
-  }
-  .pagefind-ui .pagefind-ui__result-link {
-    color: var(--pagefind-ui-primary);
-  }
-  .pagefind-ui .pagefind-ui__result-excerpt {
-    color: var(--pagefind-ui-text);
-  }
-  @media (max-width: 1280px) {
-    .pagefind-ui {
-      display: none;
-    }
-  }
+	kbd {
+		font-family: var(--__sl-font);
+	}
+
+	button[data-close-modal] {
+		position: absolute;
+		z-index: 1;
+		align-items: center;
+		align-self: flex-end;
+		height: calc(64px * var(--pagefind-ui-scale));
+		padding: 0.25rem;
+		border: 0;
+		background: transparent;
+		cursor: pointer;
+		color: #333;
+	}
 </style>
diff --git a/src/components/ui/Button.astro b/src/components/ui/Button.astro
index 2300cda31..665d35baa 100644
--- a/src/components/ui/Button.astro
+++ b/src/components/ui/Button.astro
@@ -1,16 +1,22 @@
 ---
 import Icon from "@ui/Icon.astro";
 
+// Destructure known props, rest goes into `restProps`
 const {
   url,
+  id,
   class: className = "",
   secondary = false,
   outline = false,
   disabled = false,
+  clear = false,
   isExternal,
   icon,
   iconSvg = false,
-  iconRight = true
+  iconRight = true,
+  iconSize = "",
+  title = "",
+  ...restProps // all data-*, aria-* and custom attributes
 } = Astro.props;
 
 const resolvedIsExternal = isExternal ?? url?.startsWith("http");
@@ -18,38 +24,49 @@ const resolvedIsExternal = isExternal ?? url?.startsWith("http");
 const baseClasses = "font-bold text-lg px-4 py-4 rounded-lg inline-flex items-center justify-center leading-4 transition-colors duration-200 not-prose border hover:text-black";
 const primaryClasses = "bg-button text-text-inverted hover:bg-button-hover border-transparent";
 const secondaryClasses = "bg-primary text-white hover:bg-primary-hover border-transparent";
+const clearClasses = "bg-transparent text-primary hover:bg-transparent hover:text-primary-active border-transparent";
 const outlineClasses = "border-gray-500 text-gray-700 hover:bg-gray-100 hover:bg-button-hover";
 const disabledClasses = "opacity-50 pointer-events-none";
 const iconClasses = "mx-2 ";
 
+const idName = id;
+const slotContent = await Astro.slots.render('default');
 ---
 
 {url ? (
   <a
+    id={idName}
     href={disabled ? undefined : url}
+    title={title}
+    aria-label={title ? title : slotContent}
     class={`${baseClasses}
-      ${outline ? outlineClasses : secondary ? secondaryClasses : primaryClasses}
+      ${clear ? clearClasses : outline ? outlineClasses : secondary ? secondaryClasses : primaryClasses}
       ${disabled ? disabledClasses : ""}
       ${className}`}
     aria-disabled={disabled}
     {...(resolvedIsExternal ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+    {...restProps}
   >
-    {!iconRight && icon && <Icon name={icon} svg={iconSvg} class={iconClasses} />}
+    {!iconRight && icon && <Icon name={icon} svg={iconSvg} size={iconSize} class={iconClasses} />}
     <slot />
-    {iconRight && icon && <Icon name={icon} svg={iconSvg} class={iconClasses} />}
-    {resolvedIsExternal && <Icon name="external-link" svg={iconSvg} class={iconClasses} />}
+    {iconRight && icon && <Icon name={icon} svg={iconSvg} size={iconSize} class={iconClasses} />}
+    {resolvedIsExternal && <Icon name="external-link" svg={iconSvg} size={iconSize} class={iconClasses} />}
   </a>
 ) : (
   <button
+    id={idName}
+    title={title}
+    aria-label={title ? title : slotContent}
     class={`${baseClasses}
-      ${outline ? outlineClasses : secondary ? secondaryClasses : primaryClasses}
+      ${clear ? clearClasses : outline ? outlineClasses : secondary ? secondaryClasses : primaryClasses}
       ${disabled ? disabledClasses : ""}
       ${className}`}
     disabled={disabled}
     aria-disabled={disabled}
+    {...restProps}
   >
-    {!iconRight && icon && <Icon name={icon} svg={iconSvg} class={iconClasses} />}
+    {!iconRight && icon && <Icon name={icon} svg={iconSvg} size={iconSize} class={iconClasses} />}
     <slot />
-    {iconRight && icon && <Icon name={icon} svg={iconSvg} class={iconClasses} />}
+    {iconRight && icon && <Icon name={icon} svg={iconSvg} size={iconSize} class={iconClasses} />}
   </button>
 )}
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
new file mode 100644
index 000000000..e0777e0e0
--- /dev/null
+++ b/src/layouts/BaseLayout.astro
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <slot name="head" />
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
diff --git a/src/layouts/HomePageLayout.astro b/src/layouts/HomePageLayout.astro
index c11f772ff..d03256a1b 100644
--- a/src/layouts/HomePageLayout.astro
+++ b/src/layouts/HomePageLayout.astro
@@ -1,12 +1,5 @@
 ---
-import Header from "../components/header/header.astro";
-import Footer from "../components/footer.astro";
-import BaseHead from "../components/BaseHead.astro";
-
-export interface Props {
-  title: string;
-  description: string;
-}
+import Layout from "@layouts/Layout.astro";
 
 const { title, description } = Astro.props;
 const jsonLd = JSON.stringify({
@@ -38,24 +31,7 @@ const jsonLd = JSON.stringify({
 });
 ---
 
-<!doctype html>
-<html lang="en">
-  <head>
-    <BaseHead title={title} description={description} />
-    <script type="application/ld+json" is:inline set:html={jsonLd} />
-  </head>
-
-  <div class="flex flex-col items-stretch min-h-screen">
-    <a href="#main-content" class="sr-only"> Skip to main content</a>
-
-    <Header />
-
-    <main id="main-content" class="layout-wrapper overflow-x-clip">
-      <slot />
-    </main>
-
-    <div class="mt-auto">
-      <Footer />
-    </div>
-  </div>
-</html>
+<Layout title={title} description={description}>
+  <script type="application/ld+json" is:inline set:html={jsonLd} slot="head" />
+  <slot />
+</Layout>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index f2e786a9d..3d063112c 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,7 +1,15 @@
 ---
-import Header from "../components/header/header.astro";
-import Footer from "../components/footer.astro";
-import BaseHead from "../components/BaseHead.astro";
+import BaseHead from "@components/BaseHead.astro";
+import Header from "@components/Header.astro";
+import Footer from "@components/Footer.astro";
+import Search from "@components/Search.astro";
+
+
+import "@src/styles/global.css";
+import "@src/styles/search.css";
+import "@fontsource-variable/inter";
+import "@fortawesome/fontawesome-free/css/all.min.css";
+
 
 export interface Props {
   title: string;
@@ -15,19 +23,19 @@ const { title, description } = Astro.props;
 <html lang="en">
   <head>
     <BaseHead title={title} description={description} />
+    <slot name="head" />
   </head>
+  <body>
+      <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 bg-white text-blue-600 p-2 z-50"> Skip to main content</a>
 
-  <div class="flex flex-col items-stretch min-h-screen">
-    <a href="#main-content" class="sr-only"> Skip to main content</a>
+      <Search />
+      <Header />
 
-    <Header />
+      <main id="main-content" role="main" class="layout-wrapper overflow-x-clip">
+        <slot />
+      </main>
 
-    <main id="main-content" class="layout-wrapper overflow-x-clip">
-      <slot />
-    </main>
-
-    <div class="mt-auto">
       <Footer />
-    </div>
-  </div>
+
+  </body>
 </html>
diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro
new file mode 100644
index 000000000..3bf24ab4c
--- /dev/null
+++ b/src/layouts/MarkdownLayout.astro
@@ -0,0 +1,11 @@
+---
+import Layout from "@layouts/Layout.astro";
+
+import "../styles/markdown.css";
+
+const { title, description } = Astro.props;
+---
+
+<Layout title={title} description={description}>
+  <slot />
+</Layout>
diff --git a/src/pages/[...slug].astro b/src/pages/[...slug].astro
index b31905805..8fc02504e 100644
--- a/src/pages/[...slug].astro
+++ b/src/pages/[...slug].astro
@@ -1,6 +1,6 @@
 ---
 import { type CollectionEntry, getCollection } from "astro:content";
-import Layout from "../layouts/Layout.astro";
+import Layout from "@layouts/MarkdownLayout.astro";
 
 import Prose from "../components/prose/prose.astro";
 import ButtonLink from "../components/button-link/button-link.astro";
diff --git a/src/pages/test_components.astro b/src/pages/test_components.astro
index b3551752e..738795d55 100644
--- a/src/pages/test_components.astro
+++ b/src/pages/test_components.astro
@@ -22,6 +22,7 @@ import Icon from "@ui/Icon.astro"
     <div class="grid gap-2 w-[200px]">
       <Button>Primary Button</Button>
       <Button secondary>Secondary Button</Button>
+      <Button clear>Clear Button</Button>
       <Button outline>Outline Button</Button>
       <Button disabled>Disabled Button</Button>
       <Button url="/about">Internal Link</Button>
@@ -43,6 +44,10 @@ import Icon from "@ui/Icon.astro"
       <Button icon="arrow-left" iconRight={false} >Prev</Button>
       <Button icon="clock" iconRight={false} size="fa-2xl">Prev</Button>
 
+      <Button icon="arrow-right" iconRight={true} iconSize="fa-3xl">Next</Button>
+      <Button icon="arrow-left" iconRight={false} iconSize="fa-xl">Prev</Button>
+      <Button icon="clock" iconRight={false} iconSize="fa-2xl">Prev</Button>
+
     </div>
 </section>
 </Layout>
diff --git a/src/styles/global.css b/src/styles/global.css
index ae6493815..130de2383 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,7 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 :root {
   --color-primary: #151f38;
   --color-primary-hover: #7a7ebd;
@@ -50,104 +46,6 @@ body {
   grid-column: 1 / 4;
 }
 
-.prose :is(h1, h2, h3, h4, h5, h6) a {
-  text-decoration: none !important;
-}
-
-.prose :is(h1, h2, h3, h4, h5, h6) a:hover {
-  text-decoration: underline !important;
-}
-
-.prose :is(h1, h2, h3, h4, h5, h6) a:focus {
-  outline: 4px solid #0073e6;
-  outline-offset: 5px;
-}
-
-ul.milestone-done li {
-  position: relative;
-  list-style: none;
-}
-
-ul.milestone-done li::before {
-  content: "\2705  " !important;
-  background: none !important;
-}
-
-ul.milestone-todo li {
-  position: relative;
-  list-style: none;
-}
-
-ul.milestone-todo li::before {
-  content: "\1F4DD  " !important;
-  background: none !important;
-}
-
-img.findaid-accent-round-marker {
-  width: 120px;
-  min-width: 70px;
-  padding: 0 10px;
-  display: inline-block;
-  margin: 0;
-}
-
-table.finaid-timeline td {
-  padding-bottom: 1rem;
-}
-
-div.finaid-sponsor {
-  width: 50%;
-  margin: 0 auto 2rem auto;
-}
-
-summary h4::after {
-  content: "👇";
-}
-
-.list-disc li {
-  list-style: none;
-  position: relative;
-}
-
-ul.list-disc li::before {
-  content: "";
-  display: inline-block;
-  width: 25px;
-  height: 20px;
-  /*background-image: url(/img/list-item.svg);*/
-  background-size: 100%;
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
-  position: absolute;
-  left: -30px;
-  top: 0.2em;
-}
-
-ul ul.list-disc li {
-  list-style: disc;
-}
-ul ul.list-disc li::before {
-  display: none;
-}
-
-p.tick::before {
-  content: "\2705  ";
-  padding: 0.5rem;
-}
-
-p.cross::before {
-  content: "\274C  ";
-  padding: 0.5rem;
-}
-
-p.tick::after,
-p.cross::after {
-  content: "\23EC";
-  display: inline-block;
-  font-size: 1.3em;
-  margin-left: 0.4em;
-}
-
 /* typography */
 .prose {
   h1,
diff --git a/src/styles/markdown.css b/src/styles/markdown.css
new file mode 100644
index 000000000..ddaf57a36
--- /dev/null
+++ b/src/styles/markdown.css
@@ -0,0 +1,203 @@
+.prose :is(h1, h2, h3, h4, h5, h6) a {
+  text-decoration: none !important;
+}
+
+.prose :is(h1, h2, h3, h4, h5, h6) a:hover {
+  text-decoration: underline !important;
+}
+
+.prose :is(h1, h2, h3, h4, h5, h6) a:focus {
+  outline: 4px solid #0073e6;
+  outline-offset: 5px;
+}
+
+ul.milestone-done li {
+  position: relative;
+  list-style: none;
+}
+
+ul.milestone-done li::before {
+  content: "\2705  " !important;
+  background: none !important;
+}
+
+ul.milestone-todo li {
+  position: relative;
+  list-style: none;
+}
+
+ul.milestone-todo li::before {
+  content: "\1F4DD  " !important;
+  background: none !important;
+}
+
+img.findaid-accent-round-marker {
+  width: 120px;
+  min-width: 70px;
+  padding: 0 10px;
+  display: inline-block;
+  margin: 0;
+}
+
+table.finaid-timeline td {
+  padding-bottom: 1rem;
+}
+
+div.finaid-sponsor {
+  width: 50%;
+  margin: 0 auto 2rem auto;
+}
+
+summary h4::after {
+  content: "👇";
+}
+
+.list-disc li {
+  list-style: none;
+  position: relative;
+}
+
+ul.list-disc li::before {
+  content: "";
+  display: inline-block;
+  width: 25px;
+  height: 20px;
+  /*background-image: url(/img/list-item.svg);*/
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  position: absolute;
+  left: -30px;
+  top: 0.2em;
+}
+
+ul ul.list-disc li {
+  list-style: disc;
+}
+ul ul.list-disc li::before {
+  display: none;
+}
+
+p.tick::before {
+  content: "\2705  ";
+  padding: 0.5rem;
+}
+
+p.cross::before {
+  content: "\274C  ";
+  padding: 0.5rem;
+}
+
+p.tick::after,
+p.cross::after {
+  content: "\23EC";
+  display: inline-block;
+  font-size: 1.3em;
+  margin-left: 0.4em;
+}
+
+/* typography */
+.prose {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    position: relative;
+
+    span.heading-link {
+      font-size: 0.5em;
+      margin-left: 0.2em;
+      vertical-align: text-top;
+
+      @media (min-width: 768px) {
+        font-size: 1em;
+        margin-left: 0;
+        vertical-align: unset;
+        position: absolute;
+        left: -1em;
+        padding-right: 0.5rem;
+        color: var(--color-text);
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  /* Breaking all links because we sometimes have very long links that break mobile */
+
+  a {
+    word-break: break-word;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: bold;
+    font-family: var(--font-display);
+    line-height: 1.25;
+
+    /* https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/ */
+
+    --min-fs: 1;
+    --max-fs: 1.5;
+    --min-vw: 20;
+    --max-vw: 45;
+
+    --min-fs-rem: var(--min-fs) * 1rem;
+    --max-fs-rem: var(--max-fs) * 1rem;
+    --min-vw-rem: var(--min-vw) * 1rem;
+
+    --slope: (var(--max-fs) - var(--min-fs)) * (100vw - var(--min-vw-rem)) /
+      (var(--max-vw) - var(--min-vw));
+
+    font-size: clamp(
+      var(--min-fs-rem),
+      var(--min-fs-rem) + var(--slope),
+      var(--max-fs-rem)
+    );
+  }
+
+  h1 {
+    /* 36 px, 48px */
+    --min-fs: 2.25;
+    --max-fs: 3;
+  }
+
+  h2 {
+    /* 32px, 40px */
+    --min-fs: 2;
+    --max-fs: 2.5;
+  }
+
+  h3 {
+    /* 28px, 36px */
+    --min-fs: 1.75;
+    --max-fs: 2.25;
+  }
+
+  h4 {
+    /* 24px, 32px */
+    --min-fs: 1.5;
+    --max-fs: 2;
+  }
+
+  h5 {
+    /* 20px, 28px */
+    --min-fs: 1.25;
+    --max-fs: 1.75;
+  }
+
+  h6 {
+    /* 16px, 24px */
+    --min-fs: 1;
+    --max-fs: 1.5;
+  }
+}
diff --git a/src/styles/search.css b/src/styles/search.css
new file mode 100644
index 000000000..11c59e733
--- /dev/null
+++ b/src/styles/search.css
@@ -0,0 +1,67 @@
+#search {
+  padding: 10px;
+  position: relative;
+  width: 100%;
+  max-width: 48rem;
+  margin: auto;
+  overflow: auto;
+  transition: background ease-out 0.2s;
+  z-index: 2;
+}
+
+.pagefind-ui__search-input {
+  border: 1px solid #ccc;
+  border-radius: 20px;
+  padding-inline-start: 0.75rem;
+  padding-inline-end: 0.5rem;
+  background-color: #fff;
+  font-size: 16px;
+  color: #000000;
+}
+
+.pagefind-ui__result.selected {
+  background-color: #f8f8f8;
+  background-image: linear-gradient(to right, #3684b6 7px, transparent 5px);
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+.pagefind-ui__result:hover {
+  background-color: #f8f8f8;
+}
+.pagefind-ui__message {
+  margin: 1em;
+}
+.pagefind-ui__result mark {
+  background: #f9eb5d;
+  background-image: linear-gradient(to right, #f9eb5d 10%, #fcf4a7 100%);
+  margin: 4px;
+  padding-right: 6px;
+  padding-left: 6px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  color: #000000;
+  font-family: monospace;
+  border-radius: 4px;
+}
+.pagefind-ui {
+  --pagefind-ui-scale: 1;
+  --pagefind-ui-primary: #141f36;
+  --pagefind-ui-text: black;
+  --pagefind-ui-border: #d8d8d8;
+  --pagefind-ui-border-width: 2px;
+  --pagefind-ui-border-radius: 0.5rem;
+}
+.pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
+  z-index: 9999;
+  position: relative;
+  overflow: auto;
+}
+.pagefind-ui__result {
+  padding: 0 2em 1em !important;
+}
+.pagefind-ui .pagefind-ui__result-link {
+  color: var(--pagefind-ui-primary);
+}
+.pagefind-ui .pagefind-ui__result-excerpt {
+  color: var(--pagefind-ui-text);
+}