diff --git a/.storybook/main.js b/.storybook/main.js
index d1776b26..eb6f4aaf 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -7,7 +7,7 @@ module.exports = {
     name: '@storybook/addon-coverage',
     options: {
       istanbul: {
-        exclude: ['**/lib-franklin.js', '**/scripts.js']
+        exclude: ['**/aem.js', '**/scripts.js']
       }
     }
   }, '@storybook/addon-mdx-gfm'],
diff --git a/404.html b/404.html
index c21fc249..291959fe 100644
--- a/404.html
+++ b/404.html
@@ -11,7 +11,7 @@
   <meta property="og:title" content="Page not found">
   <script src="/scripts/scripts.js" type="module" crossorigin="use-credentials"></script>
   <script type="module">
-    import { sampleRUM } from '/scripts/lib-franklin.js';
+    import { sampleRUM } from '/scripts/aem.js';
 
     window.addEventListener('load', () => {
       if (document.referrer) {
diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js
index 75d713dd..151d5964 100644
--- a/blocks/footer/footer.js
+++ b/blocks/footer/footer.js
@@ -1,5 +1,5 @@
-import { readBlockConfig, decorateIcons } from '../../scripts/lib-franklin.js';
-import { createTag } from '../../scripts/scripts.js';
+import { readBlockConfig } from '../../scripts/aem.js';
+import { createTag, decorateIcons } from '../../scripts/scripts.js';
 
 /**
  * loads and decorates the footer
diff --git a/blocks/footer/footer.stories.js b/blocks/footer/footer.stories.js
index 20f2e4c0..6f24b5b4 100644
--- a/blocks/footer/footer.stories.js
+++ b/blocks/footer/footer.stories.js
@@ -5,7 +5,7 @@ import {
   buildBlock,
   loadBlock,
   decorateBlock,
-} from '../../scripts/lib-franklin.js';
+} from '../../scripts/aem.js';
 import _style from './footer.css';
 import { createTag } from '../../scripts/scripts.js';
 
diff --git a/blocks/header/header.js b/blocks/header/header.js
index 9721d3fd..db8d436c 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -1,5 +1,5 @@
-import { readBlockConfig, decorateIcons } from '../../scripts/lib-franklin.js';
-import { isMobile, createTag } from '../../scripts/scripts.js';
+import { readBlockConfig } from '../../scripts/aem.js';
+import { isMobile, createTag, decorateIcons } from '../../scripts/scripts.js';
 
 /**
  * collapses all open nav sections
diff --git a/blocks/header/header.stories.js b/blocks/header/header.stories.js
index 469090a3..2d06801d 100644
--- a/blocks/header/header.stories.js
+++ b/blocks/header/header.stories.js
@@ -6,7 +6,7 @@ import {
   buildBlock,
   loadBlock,
   decorateBlock,
-} from '../../scripts/lib-franklin.js';
+} from '../../scripts/aem.js';
 import _style from './header.css';
 import { createTag } from '../../scripts/scripts.js';
 
diff --git a/components/avatar/avatar.js b/components/avatar/avatar.js
index 03e8609f..e2471eba 100644
--- a/components/avatar/avatar.js
+++ b/components/avatar/avatar.js
@@ -1,4 +1,4 @@
-import { loadCSS, toCamelCase } from '../../scripts/lib-franklin.js';
+import { loadCSS, toCamelCase } from '../../scripts/aem.js';
 import { createTag } from '../../scripts/scripts.js';
 
 class Avatar extends HTMLElement {
diff --git a/components/tag/tag.js b/components/tag/tag.js
index 43063bb5..879ad07d 100644
--- a/components/tag/tag.js
+++ b/components/tag/tag.js
@@ -1,5 +1,5 @@
-import { loadCSS, decorateIcons } from '../../scripts/lib-franklin.js';
-import { createTag } from '../../scripts/scripts.js';
+import { loadCSS } from '../../scripts/aem.js';
+import { createTag, decorateIcons } from '../../scripts/scripts.js';
 
 class Tag extends HTMLElement {
   constructor() {
diff --git a/docs/developers/buttons.mdx b/docs/developers/buttons.mdx
index 70ad0d35..529861fd 100644
--- a/docs/developers/buttons.mdx
+++ b/docs/developers/buttons.mdx
@@ -69,7 +69,7 @@ To include an icon in a button you can use the `decorateIcons` function to decor
 The HTMLElement above should then be passed into the `decorateIcons` function to load the icon inside the span. Below is a full example.
 
 ```javascript
-import { decorateIcons } from 'lib-franklin.js';
+import { decorateIcons } from 'scripts.js';
 
 const container = document.createElement('p');
 container.classList.add('button-container');
diff --git a/docs/stories/components/buttons.stories.js b/docs/stories/components/buttons.stories.js
index 9caf39c7..719ab158 100644
--- a/docs/stories/components/buttons.stories.js
+++ b/docs/stories/components/buttons.stories.js
@@ -2,8 +2,7 @@
 import { within, waitFor, userEvent } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 import { FranklinTemplate } from '@dylandepass/franklin-storybook-addon';
-import { decorateIcons } from '../../../scripts/lib-franklin.js';
-import { createTag, loadPage } from '../../../scripts/scripts.js';
+import { createTag, loadPage, decorateIcons } from '../../../scripts/scripts.js';
 
 function decorate(block) {
   decorateIcons(block);
@@ -76,6 +75,10 @@ export const AuthoredButtons = {
       expect(canvas.getByText('Authored Buttons')).toBeInTheDocument();
     });
 
+    await waitFor(() => {
+      expect(canvas.getByTitle('Primary')).toBeInTheDocument();
+    });
+
     const primary = canvas.getByTitle('Primary');
     expect(primary).toBeInTheDocument();
 
diff --git a/head.html b/head.html
index cbcc647d..9086bf1f 100644
--- a/head.html
+++ b/head.html
@@ -1,5 +1,5 @@
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
-<script src="/scripts/lib-franklin.js" type="module"></script>
+<script src="/scripts/aem.js" type="module"></script>
 <script src="/scripts/scripts.js" type="module"></script>
 <link id="theme" rel="stylesheet" href="/styles/themes/rosalind-light.css" />
 <link rel="stylesheet" href="/styles/system.css">
diff --git a/scripts/lib-franklin.js b/scripts/aem.js
similarity index 53%
rename from scripts/lib-franklin.js
rename to scripts/aem.js
index 4a568001..af8f44a9 100644
--- a/scripts/lib-franklin.js
+++ b/scripts/aem.js
@@ -1,5 +1,5 @@
 /*
- * Copyright 2022 Adobe. All rights reserved.
+ * Copyright 2023 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License. You may obtain a copy
  * of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -10,16 +10,21 @@
  * governing permissions and limitations under the License.
  */
 
+/* eslint-env browser */
+
 /**
  * log RUM if part of the sample.
  * @param {string} checkpoint identifies the checkpoint in funnel
  * @param {Object} data additional data for RUM sample
+ * @param {string} data.source DOM node that is the source of a checkpoint event,
+ * identified by #id or .classname
+ * @param {string} data.target subject of the checkpoint event,
+ * for instance the href of a link, or a search term
  */
-export function sampleRUM(checkpoint, data = {}) {
+function sampleRUM(checkpoint, data = {}) {
   sampleRUM.defer = sampleRUM.defer || [];
   const defer = (fnname) => {
-    sampleRUM[fnname] = sampleRUM[fnname]
-      || ((...args) => sampleRUM.defer.push({ fnname, args }));
+    sampleRUM[fnname] = sampleRUM[fnname] || ((...args) => sampleRUM.defer.push({ fnname, args }));
   };
   sampleRUM.drain = sampleRUM.drain
     || ((dfnname, fn) => {
@@ -28,27 +33,72 @@ export function sampleRUM(checkpoint, data = {}) {
         .filter(({ fnname }) => dfnname === fnname)
         .forEach(({ fnname, args }) => sampleRUM[fnname](...args));
     });
-  sampleRUM.on = (chkpnt, fn) => { sampleRUM.cases[chkpnt] = fn; };
+  sampleRUM.always = sampleRUM.always || [];
+  sampleRUM.always.on = (chkpnt, fn) => {
+    sampleRUM.always[chkpnt] = fn;
+  };
+  sampleRUM.on = (chkpnt, fn) => {
+    sampleRUM.cases[chkpnt] = fn;
+  };
   defer('observe');
   defer('cwv');
   try {
     window.hlx = window.hlx || {};
     if (!window.hlx.rum) {
       const usp = new URLSearchParams(window.location.search);
-      const weight = (usp.get('rum') === 'on') ? 1 : 100; // with parameter, weight is 1. Defaults to 100.
-      // eslint-disable-next-line no-bitwise
-      const hashCode = (s) => s.split('').reduce((a, b) => (((a << 5) - a) + b.charCodeAt(0)) | 0, 0);
-      const id = `${hashCode(window.location.href)}-${new Date().getTime()}-${Math.random().toString(16).substr(2, 14)}`;
+      const weight = usp.get('rum') === 'on' ? 1 : 100; // with parameter, weight is 1. Defaults to 100.
+      const id = Array.from({ length: 75 }, (_, i) => String.fromCharCode(48 + i))
+        .filter((a) => /\d|[A-Z]/i.test(a))
+        .filter(() => Math.random() * 75 > 70)
+        .join('');
       const random = Math.random();
-      const isSelected = (random * weight < 1);
-      // eslint-disable-next-line object-curly-newline
-      window.hlx.rum = { weight, id, random, isSelected, sampleRUM };
+      const isSelected = random * weight < 1;
+      const firstReadTime = Date.now();
+      const urlSanitizers = {
+        full: () => window.location.href,
+        origin: () => window.location.origin,
+        path: () => window.location.href.replace(/\?.*$/, ''),
+      };
+      // eslint-disable-next-line object-curly-newline, max-len
+      window.hlx.rum = {
+        weight,
+        id,
+        random,
+        isSelected,
+        firstReadTime,
+        sampleRUM,
+        sanitizeURL: urlSanitizers[window.hlx.RUM_MASK_URL || 'path'],
+      };
     }
-    const { weight, id } = window.hlx.rum;
+    const { weight, id, firstReadTime } = window.hlx.rum;
     if (window.hlx && window.hlx.rum && window.hlx.rum.isSelected) {
+      const knownProperties = [
+        'weight',
+        'id',
+        'referer',
+        'checkpoint',
+        't',
+        'source',
+        'target',
+        'cwv',
+        'CLS',
+        'FID',
+        'LCP',
+        'INP',
+      ];
       const sendPing = (pdata = data) => {
         // eslint-disable-next-line object-curly-newline, max-len, no-use-before-define
-        const body = JSON.stringify({ weight, id, referer: window.location.href, generation: window.hlx.RUM_GENERATION, checkpoint, ...data });
+        const body = JSON.stringify(
+          {
+            weight,
+            id,
+            referer: window.hlx.rum.sanitizeURL(),
+            checkpoint,
+            t: Date.now() - firstReadTime,
+            ...data,
+          },
+          knownProperties,
+        );
         const url = `https://rum.hlx.page/.rum/${weight}`;
         // eslint-disable-next-line no-unused-expressions
         navigator.sendBeacon(url, body);
@@ -66,7 +116,12 @@ export function sampleRUM(checkpoint, data = {}) {
         },
       };
       sendPing(data);
-      if (sampleRUM.cases[checkpoint]) { sampleRUM.cases[checkpoint](); }
+      if (sampleRUM.cases[checkpoint]) {
+        sampleRUM.cases[checkpoint]();
+      }
+    }
+    if (sampleRUM.always[checkpoint]) {
+      sampleRUM.always[checkpoint](data);
     }
   } catch (error) {
     // something went wrong
@@ -74,132 +129,66 @@ export function sampleRUM(checkpoint, data = {}) {
 }
 
 /**
- * Loads a CSS file.
- * @param {string} href The path to the CSS file
+ * Setup block utils.
  */
-export function loadCSS(href, callback) {
-  if (!document.querySelector(`head > link[href="${href}"]`)) {
-    const link = document.createElement('link');
-    link.setAttribute('rel', 'stylesheet');
-    link.setAttribute('href', href);
-    if (typeof callback === 'function') {
-      link.onload = (e) => callback(e.type);
-      link.onerror = (e) => callback(e.type);
+function setup() {
+  window.hlx = window.hlx || {};
+  window.hlx.RUM_MASK_URL = 'full';
+  window.hlx.codeBasePath = '';
+  window.hlx.lighthouse = new URLSearchParams(window.location.search).get('lighthouse') === 'on';
+
+  const scriptEl = document.querySelector('script[src$="/scripts/scripts.js"]');
+  if (scriptEl) {
+    try {
+      [window.hlx.codeBasePath] = new URL(scriptEl.src).pathname.split('/scripts/scripts.js');
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
     }
-    document.head.appendChild(link);
-  } else if (typeof callback === 'function') {
-    callback('noop');
   }
 }
 
 /**
- * Retrieves the content of metadata tags.
- * @param {string} name The metadata name (or property)
- * @returns {string} The metadata value(s)
+ * Auto initializiation.
  */
-export function getMetadata(name) {
-  const attr = name && name.includes(':') ? 'property' : 'name';
-  const meta = [...document.head.querySelectorAll(`meta[${attr}="${name}"]`)].map((m) => m.content).join(', ');
-  return meta || '';
-}
 
-/**
- * Sanitizes a name for use as class name.
- * @param {string} name The unsanitized name
- * @returns {string} The class name
- */
-export function toClassName(name) {
-  return typeof name === 'string'
-    ? name.toLowerCase().replace(/[^0-9a-z]/gi, '-').replace(/-+/g, '-').replace(/^-|-$/g, '')
-    : '';
-}
+function init() {
+  setup();
+  sampleRUM('top');
 
-/*
- * Sanitizes a name for use as a js property name.
- * @param {string} name The unsanitized name
- * @returns {string} The camelCased name
- */
-export function toCamelCase(name) {
-  return toClassName(name).replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-}
+  window.addEventListener('load', () => sampleRUM('load'));
 
-/**
- * Replace icons with inline SVG and prefix with codeBasePath.
- * @param {Element} element
- */
-export function decorateIcons(element = document) {
-  element.querySelectorAll('span.icon').forEach(async (span) => {
-    if (span.classList.length < 2 || !span.classList[1].startsWith('icon-')) {
-      return;
-    }
-    const icon = span.classList[1].substring(5);
-    // eslint-disable-next-line no-use-before-define
-    const resp = await fetch(`${(!window.__STORYBOOK_PREVIEW__) ? window.hlx.codeBasePath : ''}/icons/${icon}.svg`); // eslint-disable-line no-underscore-dangle
-    if (resp.ok) {
-      const iconHTML = await resp.text();
-      if (iconHTML.match(/<style/i)) {
-        const img = document.createElement('img');
-        img.src = `data:image/svg+xml,${encodeURIComponent(iconHTML)}`;
-        span.appendChild(img);
-      } else {
-        span.innerHTML = iconHTML;
-      }
-    }
+  window.addEventListener('unhandledrejection', (event) => {
+    sampleRUM('error', { source: event.reason.sourceURL, target: event.reason.line });
+  });
+
+  window.addEventListener('error', (event) => {
+    sampleRUM('error', { source: event.filename, target: event.lineno });
   });
 }
 
 /**
- * Gets placeholders object
- * @param {string} prefix
+ * Sanitizes a string for use as class name.
+ * @param {string} name The unsanitized string
+ * @returns {string} The class name
  */
-export async function fetchPlaceholders(prefix = 'default') {
-  window.placeholders = window.placeholders || {};
-  const loaded = window.placeholders[`${prefix}-loaded`];
-  if (!loaded) {
-    window.placeholders[`${prefix}-loaded`] = new Promise((resolve, reject) => {
-      try {
-        fetch(`${prefix === 'default' ? '' : prefix}/placeholders.json`)
-          .then((resp) => resp.json())
-          .then((json) => {
-            const placeholders = {};
-            json.data.forEach((placeholder) => {
-              placeholders[toCamelCase(placeholder.Key)] = placeholder.Text;
-            });
-            window.placeholders[prefix] = placeholders;
-            resolve();
-          });
-      } catch (error) {
-        // error loading placeholders
-        window.placeholders[prefix] = {};
-        reject();
-      }
-    });
-  }
-  await window.placeholders[`${prefix}-loaded`];
-  return window.placeholders[prefix];
+function toClassName(name) {
+  return typeof name === 'string'
+    ? name
+      .toLowerCase()
+      .replace(/[^0-9a-z]/gi, '-')
+      .replace(/-+/g, '-')
+      .replace(/^-|-$/g, '')
+    : '';
 }
 
 /**
- * Decorates a block.
- * @param {Element} block The block element
+ * Sanitizes a string for use as a js property name.
+ * @param {string} name The unsanitized string
+ * @returns {string} The camelCased name
  */
-export function decorateBlock(block) {
-  const shortBlockName = block.classList[0];
-
-  if (shortBlockName === 'library-metadata') {
-    block.remove();
-    return;
-  }
-
-  if (shortBlockName) {
-    block.classList.add('block');
-    block.setAttribute('data-block-name', shortBlockName);
-    block.setAttribute('data-block-status', 'initialized');
-    const blockWrapper = block.parentElement;
-    blockWrapper.classList.add(`${shortBlockName}-wrapper`);
-    const section = block.closest('.section');
-    if (section) section.classList.add(`${shortBlockName}-container`);
-  }
+function toCamelCase(name) {
+  return toClassName(name).replace(/-([a-z])/g, (g) => g[1].toUpperCase());
 }
 
 /**
@@ -207,9 +196,10 @@ export function decorateBlock(block) {
  * @param {Element} block The block element
  * @returns {object} The block config
  */
-export function readBlockConfig(block) {
+// eslint-disable-next-line import/prefer-default-export
+function readBlockConfig(block) {
   const config = {};
-  block.querySelectorAll(':scope>div').forEach((row) => {
+  block.querySelectorAll(':scope > div').forEach((row) => {
     if (row.children) {
       const cols = [...row.children];
       if (cols[1]) {
@@ -245,11 +235,197 @@ export function readBlockConfig(block) {
   return config;
 }
 
+/**
+ * Loads a CSS file.
+ * @param {string} href URL to the CSS file
+ */
+async function loadCSS(href) {
+  return new Promise((resolve, reject) => {
+    if (!document.querySelector(`head > link[href="${href}"]`)) {
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = href;
+      link.onload = resolve;
+      link.onerror = reject;
+      document.head.append(link);
+    } else {
+      resolve();
+    }
+  });
+}
+
+/**
+ * Loads a non module JS file.
+ * @param {string} src URL to the JS file
+ * @param {Object} attrs additional optional attributes
+ */
+async function loadScript(src, attrs) {
+  return new Promise((resolve, reject) => {
+    if (!document.querySelector(`head > script[src="${src}"]`)) {
+      const script = document.createElement('script');
+      script.src = src;
+      if (attrs) {
+        // eslint-disable-next-line no-restricted-syntax, guard-for-in
+        for (const attr in attrs) {
+          script.setAttribute(attr, attrs[attr]);
+        }
+      }
+      script.onload = resolve;
+      script.onerror = reject;
+      document.head.append(script);
+    } else {
+      resolve();
+    }
+  });
+}
+
+/**
+ * Retrieves the content of metadata tags.
+ * @param {string} name The metadata name (or property)
+ * @param {Document} doc Document object to query for metadata. Defaults to the window's document
+ * @returns {string} The metadata value(s)
+ */
+function getMetadata(name, doc = document) {
+  const attr = name && name.includes(':') ? 'property' : 'name';
+  const meta = [...doc.head.querySelectorAll(`meta[${attr}="${name}"]`)]
+    .map((m) => m.content)
+    .join(', ');
+  return meta || '';
+}
+
+/**
+ * Returns a picture element with webp and fallbacks
+ * @param {string} src The image URL
+ * @param {string} [alt] The image alternative text
+ * @param {boolean} [eager] Set loading attribute to eager
+ * @param {Array} [breakpoints] Breakpoints and corresponding params (eg. width)
+ * @returns {Element} The picture element
+ */
+function createOptimizedPicture(
+  src,
+  alt = '',
+  eager = false,
+  breakpoints = [{ media: '(min-width: 600px)', width: '2000' }, { width: '750' }],
+) {
+  const url = new URL(src, window.location.href);
+  const picture = document.createElement('picture');
+  const { pathname } = url;
+  const ext = pathname.substring(pathname.lastIndexOf('.') + 1);
+
+  // webp
+  breakpoints.forEach((br) => {
+    const source = document.createElement('source');
+    if (br.media) source.setAttribute('media', br.media);
+    source.setAttribute('type', 'image/webp');
+    source.setAttribute('srcset', `${pathname}?width=${br.width}&format=webply&optimize=medium`);
+    picture.appendChild(source);
+  });
+
+  // fallback
+  breakpoints.forEach((br, i) => {
+    if (i < breakpoints.length - 1) {
+      const source = document.createElement('source');
+      if (br.media) source.setAttribute('media', br.media);
+      source.setAttribute('srcset', `${pathname}?width=${br.width}&format=${ext}&optimize=medium`);
+      picture.appendChild(source);
+    } else {
+      const img = document.createElement('img');
+      img.setAttribute('loading', eager ? 'eager' : 'lazy');
+      img.setAttribute('alt', alt);
+      picture.appendChild(img);
+      img.setAttribute('src', `${pathname}?width=${br.width}&format=${ext}&optimize=medium`);
+    }
+  });
+
+  return picture;
+}
+
+/**
+ * Set template (page structure) and theme (page styles).
+ */
+function decorateTemplateAndTheme() {
+  const addClasses = (element, classes) => {
+    classes.split(',').forEach((c) => {
+      element.classList.add(toClassName(c.trim()));
+    });
+  };
+  const template = getMetadata('template');
+  if (template) addClasses(document.body, template);
+  const theme = getMetadata('theme');
+  if (theme) addClasses(document.body, theme);
+}
+
+/**
+ * Decorates paragraphs containing a single link as buttons.
+ * @param {Element} element container element
+ */
+function decorateButtons(element) {
+  element.querySelectorAll('a').forEach((a) => {
+    a.title = a.title || a.textContent;
+    if (a.href !== a.textContent) {
+      const up = a.parentElement;
+      const twoup = a.parentElement.parentElement;
+      if (!a.querySelector('img')) {
+        if (up.childNodes.length === 1 && (up.tagName === 'P' || up.tagName === 'DIV')) {
+          a.className = 'button'; // default
+          up.classList.add('button-container');
+        }
+        if (
+          up.childNodes.length === 1
+          && up.tagName === 'STRONG'
+          && twoup.childNodes.length === 1
+          && twoup.tagName === 'P'
+        ) {
+          a.className = 'button primary';
+          twoup.classList.add('button-container');
+        }
+        if (
+          up.childNodes.length === 1
+          && up.tagName === 'EM'
+          && twoup.childNodes.length === 1
+          && twoup.tagName === 'P'
+        ) {
+          a.className = 'button secondary';
+          twoup.classList.add('button-container');
+        }
+      }
+    }
+  });
+}
+
+/**
+ * Add <img> for icon, prefixed with codeBasePath and optional prefix.
+ * @param {span} [element] span element with icon classes
+ * @param {string} [prefix] prefix to be added to icon the src
+ */
+function decorateIcon(span, prefix = '') {
+  const iconName = Array.from(span.classList)
+    .find((c) => c.startsWith('icon-'))
+    .substring(5);
+  const img = document.createElement('img');
+  img.dataset.iconName = iconName;
+  img.src = `${window.hlx.codeBasePath}${prefix}/icons/${iconName}.svg`;
+  img.loading = 'lazy';
+  span.append(img);
+}
+
+/**
+ * Add <img> for icons, prefixed with codeBasePath and optional prefix.
+ * @param {Element} [element] Element containing icons
+ * @param {string} [prefix] prefix to be added to icon the src
+ */
+function decorateIcons(element, prefix = '') {
+  const icons = [...element.querySelectorAll('span.icon')];
+  icons.forEach((span) => {
+    decorateIcon(span, prefix);
+  });
+}
+
 /**
  * Decorates all sections in a container element.
- * @param {Element} $main The container element
+ * @param {Element} main The container element
  */
-export function decorateSections(main) {
+function decorateSections(main) {
   main.querySelectorAll(':scope > div').forEach((section) => {
     const wrappers = [];
     let defaultContent = false;
@@ -264,9 +440,10 @@ export function decorateSections(main) {
     });
     wrappers.forEach((wrapper) => section.append(wrapper));
     section.classList.add('section');
-    section.setAttribute('data-section-status', 'initialized');
+    section.dataset.sectionStatus = 'initialized';
+    section.style.display = 'none';
 
-    /* process section metadata */
+    // Process section metadata
     const sectionMeta = section.querySelector('div.section-metadata');
     if (sectionMeta) {
       const meta = readBlockConfig(sectionMeta);
@@ -283,43 +460,73 @@ export function decorateSections(main) {
   });
 }
 
+/**
+ * Gets placeholders object.
+ * @param {string} [prefix] Location of placeholders
+ * @returns {object} Window placeholders object
+ */
+// eslint-disable-next-line import/prefer-default-export
+async function fetchPlaceholders(prefix = 'default') {
+  window.placeholders = window.placeholders || {};
+  if (!window.placeholders[prefix]) {
+    window.placeholders[prefix] = new Promise((resolve) => {
+      fetch(`${prefix === 'default' ? '' : prefix}/placeholders.json`)
+        .then((resp) => {
+          if (resp.ok) {
+            return resp.json();
+          }
+          return {};
+        })
+        .then((json) => {
+          const placeholders = {};
+          json.data
+            .filter((placeholder) => placeholder.Key)
+            .forEach((placeholder) => {
+              placeholders[toCamelCase(placeholder.Key)] = placeholder.Text;
+            });
+          window.placeholders[prefix] = placeholders;
+          resolve(window.placeholders[prefix]);
+        })
+        .catch(() => {
+          // error loading placeholders
+          window.placeholders[prefix] = {};
+          resolve(window.placeholders[prefix]);
+        });
+    });
+  }
+  return window.placeholders[`${prefix}`];
+}
+
 /**
  * Updates all section status in a container element.
  * @param {Element} main The container element
  */
-export function updateSectionsStatus(main) {
+function updateSectionsStatus(main) {
   const sections = [...main.querySelectorAll(':scope > div.section')];
   for (let i = 0; i < sections.length; i += 1) {
     const section = sections[i];
-    const status = section.getAttribute('data-section-status');
+    const status = section.dataset.sectionStatus;
     if (status !== 'loaded') {
-      const loadingBlock = section.querySelector('.block[data-block-status="initialized"], .block[data-block-status="loading"]');
+      const loadingBlock = section.querySelector(
+        '.block[data-block-status="initialized"], .block[data-block-status="loading"]',
+      );
       if (loadingBlock) {
-        section.setAttribute('data-section-status', 'loading');
+        section.dataset.sectionStatus = 'loading';
         break;
       } else {
-        section.setAttribute('data-section-status', 'loaded');
+        section.dataset.sectionStatus = 'loaded';
+        section.style.display = null;
       }
     }
   }
 }
 
 /**
- * Decorates all blocks in a container element.
- * @param {Element} main The container element
- */
-export function decorateBlocks(main) {
-  main
-    .querySelectorAll('div.section > div > div')
-    .forEach(decorateBlock);
-}
-
-/**
- * Builds a block DOM Element from a two dimensional array
+ * Builds a block DOM Element from a two dimensional array, string, or object
  * @param {string} blockName name of the block
- * @param {any} content two dimensional array or string or object of content
+ * @param {*} content two dimensional array or string or object of content
  */
-export function buildBlock(blockName, content) {
+function buildBlock(blockName, content) {
   const table = Array.isArray(content) ? content : [[content]];
   const blockEl = document.createElement('div');
   // build image block nested div structure
@@ -342,26 +549,26 @@ export function buildBlock(blockName, content) {
     });
     blockEl.appendChild(rowEl);
   });
-  return (blockEl);
+  return blockEl;
 }
 
 /**
  * Loads JS and CSS for a block.
  * @param {Element} block The block element
  */
-export async function loadBlock(block, path = window.hlx.codeBasePath) {
-  const status = block.getAttribute('data-block-status');
+async function loadBlock(block) {
+  const status = block.dataset.blockStatus;
   if (status !== 'loading' && status !== 'loaded') {
-    block.setAttribute('data-block-status', 'loading');
-    const blockName = block.getAttribute('data-block-name');
+    block.dataset.blockStatus = 'loading';
+    const { blockName } = block.dataset;
     try {
-      const cssLoaded = new Promise((resolve) => {
-        loadCSS(`${path}/blocks/${blockName}/${blockName}.css`, resolve);
-      });
+      const cssLoaded = loadCSS(`${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.css`);
       const decorationComplete = new Promise((resolve) => {
         (async () => {
           try {
-            const mod = await import(`../blocks/${blockName}/${blockName}.js`);
+            const mod = await import(
+              `${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.js`
+            );
             if (mod.default) {
               await mod.default(block);
             }
@@ -377,15 +584,16 @@ export async function loadBlock(block, path = window.hlx.codeBasePath) {
       // eslint-disable-next-line no-console
       console.log(`failed to load block ${blockName}`, error);
     }
-    block.setAttribute('data-block-status', 'loaded');
+    block.dataset.blockStatus = 'loaded';
   }
+  return block;
 }
 
 /**
  * Loads JS and CSS for all blocks in a container element.
  * @param {Element} main The container element
  */
-export async function loadBlocks(main) {
+async function loadBlocks(main) {
   updateSectionsStatus(main);
   const blocks = [...main.querySelectorAll('div.block')];
   for (let i = 0; i < blocks.length; i += 1) {
@@ -396,129 +604,66 @@ export async function loadBlocks(main) {
 }
 
 /**
- * Returns a picture element with webp and fallbacks
- * @param {string} src The image URL
- * @param {boolean} eager load image eager
- * @param {Array} breakpoints breakpoints and corresponding params (eg. width)
+ * Decorates a block.
+ * @param {Element} block The block element
  */
-export function createOptimizedPicture(src, alt = '', eager = false, breakpoints = [{ media: '(min-width: 400px)', width: '2000' }, { width: '750' }]) {
-  const url = new URL(src, window.location.href);
-  const picture = document.createElement('picture');
-  const { pathname } = url;
-  const ext = pathname.substring(pathname.lastIndexOf('.') + 1);
-
-  // webp
-  breakpoints.forEach((br) => {
-    const source = document.createElement('source');
-    if (br.media) source.setAttribute('media', br.media);
-    source.setAttribute('type', 'image/webp');
-    source.setAttribute('srcset', `${pathname}?width=${br.width}&format=webply&optimize=medium`);
-    picture.appendChild(source);
-  });
-
-  // fallback
-  breakpoints.forEach((br, i) => {
-    if (i < breakpoints.length - 1) {
-      const source = document.createElement('source');
-      if (br.media) source.setAttribute('media', br.media);
-      source.setAttribute('srcset', `${pathname}?width=${br.width}&format=${ext}&optimize=medium`);
-      picture.appendChild(source);
-    } else {
-      const img = document.createElement('img');
-      img.setAttribute('loading', eager ? 'eager' : 'lazy');
-      img.setAttribute('alt', alt);
-      picture.appendChild(img);
-      img.setAttribute('src', `${pathname}?width=${br.width}&format=${ext}&optimize=medium`);
-    }
-  });
-
-  return picture;
+function decorateBlock(block) {
+  const shortBlockName = block.classList[0];
+  if (shortBlockName) {
+    block.classList.add('block');
+    block.dataset.blockName = shortBlockName;
+    block.dataset.blockStatus = 'initialized';
+    const blockWrapper = block.parentElement;
+    blockWrapper.classList.add(`${shortBlockName}-wrapper`);
+    const section = block.closest('.section');
+    if (section) section.classList.add(`${shortBlockName}-container`);
+  }
 }
 
 /**
- * Normalizes all headings within a container element.
- * @param {Element} el The container element
- * @param {[string]} allowedHeadings The list of allowed headings (h1 ... h6)
+ * Decorates all blocks in a container element.
+ * @param {Element} main The container element
  */
-export function normalizeHeadings(el, allowedHeadings) {
-  const allowed = allowedHeadings.map((h) => h.toLowerCase());
-  el.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach((tag) => {
-    const h = tag.tagName.toLowerCase();
-    if (allowed.indexOf(h) === -1) {
-      // current heading is not in the allowed list -> try first to "promote" the heading
-      let level = parseInt(h.charAt(1), 10) - 1;
-      while (allowed.indexOf(`h${level}`) === -1 && level > 0) {
-        level -= 1;
-      }
-      if (level === 0) {
-        // did not find a match -> try to "downgrade" the heading
-        while (allowed.indexOf(`h${level}`) === -1 && level < 7) {
-          level += 1;
-        }
-      }
-      if (level !== 7) {
-        tag.outerHTML = `<h${level} id="${tag.id}">${tag.textContent}</h${level}>`;
-      }
-    }
-  });
+function decorateBlocks(main) {
+  main.querySelectorAll('div.section > div > div').forEach(decorateBlock);
 }
 
 /**
- * Set template (page structure) and theme (page styles).
+ * Loads a block named 'header' into header
+ * @param {Element} header header element
+ * @returns {Promise}
  */
-export function decorateTemplateAndTheme() {
-  const addClasses = (elem, classes) => {
-    classes.split(',').forEach((v) => {
-      elem.classList.add(toClassName(v.trim()));
-    });
-  };
-  const template = getMetadata('template');
-  if (template) addClasses(document.body, template);
-  const theme = getMetadata('theme');
-  if (theme) addClasses(document.body, theme);
+async function loadHeader(header) {
+  const headerBlock = buildBlock('header', '');
+  header.append(headerBlock);
+  decorateBlock(headerBlock);
+  return loadBlock(headerBlock);
 }
 
 /**
- * decorates paragraphs containing a single link as buttons.
- * @param {Element} element container element
+ * Loads a block named 'footer' into footer
+ * @param footer footer element
+ * @returns {Promise}
  */
-
-export function decorateButtons(element) {
-  element.querySelectorAll('a').forEach((a) => {
-    a.title = a.title || a.textContent;
-    if (a.href !== a.textContent) {
-      const up = a.parentElement;
-      const twoup = a.parentElement.parentElement;
-      if (!a.querySelector('img')) {
-        if (up.childNodes.length === 1 && (up.tagName === 'P' || up.tagName === 'DIV')) {
-          a.className = 'button primary'; // default
-          up.classList.add('button-container');
-        }
-        if (up.childNodes.length === 1 && up.tagName === 'STRONG'
-          && twoup.childNodes.length === 1 && twoup.tagName === 'P') {
-          a.className = 'button primary';
-          twoup.classList.add('button-container');
-        }
-        if (up.childNodes.length === 1 && up.tagName === 'EM'
-          && twoup.childNodes.length === 1 && twoup.tagName === 'P') {
-          a.className = 'button secondary';
-          twoup.classList.add('button-container');
-        }
-      }
-    }
-  });
+async function loadFooter(footer) {
+  const footerBlock = buildBlock('footer', '');
+  footer.append(footerBlock);
+  decorateBlock(footerBlock);
+  return loadBlock(footerBlock);
 }
 
 /**
- * load LCP block and/or wait for LCP in default content.
+ * Load LCP block and/or wait for LCP in default content.
+ * @param {Array} lcpBlocks Array of blocks
  */
-export async function waitForLCP(lcpBlocks) {
+async function waitForLCP(lcpBlocks) {
   const block = document.querySelector('.block');
-  const hasLCPBlock = (block && lcpBlocks.includes(block.getAttribute('data-block-name')));
+  const hasLCPBlock = block && lcpBlocks.includes(block.dataset.blockName);
   if (hasLCPBlock) await loadBlock(block);
 
-  document.querySelector('body').classList.add('appear');
+  document.body.style.display = null;
   const lcpCandidate = document.querySelector('main img');
+
   await new Promise((resolve) => {
     if (lcpCandidate && !lcpCandidate.complete) {
       lcpCandidate.setAttribute('loading', 'eager');
@@ -530,61 +675,30 @@ export async function waitForLCP(lcpBlocks) {
   });
 }
 
-/**
- * loads a block named 'header' into header
- */
-
-export function loadHeader(header) {
-  if (header) {
-    const headerBlock = buildBlock('header', '');
-    header.append(headerBlock);
-    decorateBlock(headerBlock);
-    loadBlock(headerBlock);
-  }
-}
-
-/**
- * loads a block named 'footer' into footer
- */
-
-export function loadFooter(footer) {
-  if (footer) {
-    const footerBlock = buildBlock('footer', '');
-    footer.append(footerBlock);
-    decorateBlock(footerBlock);
-    loadBlock(footerBlock);
-  }
-}
-
-/**
- * init block utils
- */
-
-function init() {
-  window.hlx = window.hlx || {};
-  window.hlx.codeBasePath = '';
-
-  const scriptEl = document.querySelector('script[src$="/scripts/scripts.js"]');
-  if (scriptEl) {
-    try {
-      [window.hlx.codeBasePath] = new URL(scriptEl.src).pathname.split('/scripts/scripts.js');
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.log(error);
-    }
-  }
-
-  sampleRUM('top');
-
-  window.addEventListener('load', () => sampleRUM('load'));
-
-  window.addEventListener('unhandledrejection', (event) => {
-    sampleRUM('error', { source: event.reason.sourceURL, target: event.reason.line });
-  });
-
-  window.addEventListener('error', (event) => {
-    sampleRUM('error', { source: event.filename, target: event.lineno });
-  });
-}
-
 init();
+
+export {
+  buildBlock,
+  createOptimizedPicture,
+  decorateBlock,
+  decorateBlocks,
+  decorateButtons,
+  decorateIcons,
+  decorateSections,
+  decorateTemplateAndTheme,
+  fetchPlaceholders,
+  getMetadata,
+  loadBlock,
+  loadBlocks,
+  loadCSS,
+  loadFooter,
+  loadHeader,
+  loadScript,
+  readBlockConfig,
+  sampleRUM,
+  setup,
+  toCamelCase,
+  toClassName,
+  updateSectionsStatus,
+  waitForLCP,
+};
diff --git a/scripts/delayed.js b/scripts/delayed.js
index 920b4ad8..4f632597 100644
--- a/scripts/delayed.js
+++ b/scripts/delayed.js
@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-cycle
-import { sampleRUM } from './lib-franklin.js';
+import { sampleRUM } from './aem.js';
 
 // Core Web Vitals RUM collection
 sampleRUM('cwv');
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 96682918..c45acded 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -6,12 +6,11 @@ import {
   decorateSections,
   decorateBlocks,
   decorateTemplateAndTheme,
-  decorateIcons,
   waitForLCP,
   loadBlocks,
   loadCSS,
   getMetadata,
-} from './lib-franklin.js';
+} from './aem.js';
 
 const LCP_BLOCKS = ['hero']; // add your LCP blocks to the list
 window.hlx.RUM_GENERATION = 'project-1'; // add your RUM generation information here
@@ -174,6 +173,27 @@ export function isMobile() {
   return window.innerWidth < 900;
 }
 
+export function decorateIcons(element = document) {
+  element.querySelectorAll('span.icon').forEach(async (span) => {
+    if (span.classList.length < 2 || !span.classList[1].startsWith('icon-')) {
+      return;
+    }
+    const icon = span.classList[1].substring(5);
+    // eslint-disable-next-line no-use-before-define
+    const resp = await fetch(`${(!window.__STORYBOOK_PREVIEW__) ? window.hlx.codeBasePath : ''}/icons/${icon}.svg`); // eslint-disable-line no-underscore-dangle
+    if (resp.ok) {
+      const iconHTML = await resp.text();
+      if (iconHTML.match(/<style/i)) {
+        const img = document.createElement('img');
+        img.src = `data:image/svg+xml,${encodeURIComponent(iconHTML)}`;
+        span.appendChild(img);
+      } else {
+        span.innerHTML = iconHTML;
+      }
+    }
+  });
+}
+
 /**
  * Are we currently rendering an isolated block as part of the block library or storybook?
  * @returns {boolean} True if rendering block in isolation
@@ -193,6 +213,7 @@ async function loadEager(doc) {
   await decorateTemplate(main);
   if (main && !window.hlx.suppressBlockLoader) {
     decorateMain(main);
+    document.body.classList.add('appear');
     await waitForLCP(LCP_BLOCKS);
   } else {
     document.querySelector('body').classList.add('appear');
diff --git a/templates/blog-post/blog-post.js b/templates/blog-post/blog-post.js
index fb7b6f27..1d128740 100644
--- a/templates/blog-post/blog-post.js
+++ b/templates/blog-post/blog-post.js
@@ -1,5 +1,4 @@
-import { decorateIcons } from '../../scripts/lib-franklin.js';
-import { createTag } from '../../scripts/scripts.js';
+import { createTag, decorateIcons } from '../../scripts/scripts.js';
 
 function renderSidebar() {
   return /* html */`
diff --git a/templates/hero-image/hero-image.js b/templates/hero-image/hero-image.js
index 306cde8f..59bbdb2a 100644
--- a/templates/hero-image/hero-image.js
+++ b/templates/hero-image/hero-image.js
@@ -1,4 +1,4 @@
-import { buildBlock } from '../../scripts/lib-franklin.js';
+import { buildBlock } from '../../scripts/aem.js';
 import { createTag } from '../../scripts/scripts.js';
 
 export default function decorate(main) {
diff --git a/templates/hero-image/hero-image.stories.js b/templates/hero-image/hero-image.stories.js
index 9062841e..4ab4a8a1 100644
--- a/templates/hero-image/hero-image.stories.js
+++ b/templates/hero-image/hero-image.stories.js
@@ -5,7 +5,7 @@ import { within, waitFor, userEvent } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 import decorate from './hero-image.js';
 import { loadPage, createTag } from '../../scripts/scripts.js';
-import { decorateSections } from '../../scripts/lib-franklin.js';
+import { decorateSections } from '../../scripts/aem.js';
 import hero from './hero-image.css';
 import footer from '../../blocks/footer/footer.css';
 import header from '../../blocks/header/header.css';
diff --git a/test/scripts/block-utils.test.js b/test/scripts/block-utils.test.js
deleted file mode 100644
index b18a0410..00000000
--- a/test/scripts/block-utils.test.js
+++ /dev/null
@@ -1,130 +0,0 @@
-/* eslint-disable no-unused-expressions */
-/* global describe before it */
-
-import { readFile } from '@web/test-runner-commands';
-import { expect } from '@esm-bundle/chai';
-import sinon from 'sinon';
-
-let blockUtils;
-
-document.body.innerHTML = await readFile({ path: './dummy.html' });
-document.head.innerHTML = await readFile({ path: './head.html' });
-
-describe('Utils methods', () => {
-  before(async () => {
-    blockUtils = await import('../../scripts/lib-franklin.js');
-    document.body.innerHTML = await readFile({ path: './body.html' });
-  });
-
-  it('Sanitizes class name', async () => {
-    expect(blockUtils.toClassName('Hello world')).to.equal('hello-world');
-    expect(blockUtils.toClassName(null)).to.equal('');
-  });
-
-  it('Extracts metadata', async () => {
-    expect(blockUtils.getMetadata('description')).to.equal('Lorem ipsum dolor sit amet.');
-    expect(blockUtils.getMetadata('og:title')).to.equal('Foo');
-  });
-
-  it('Loads CSS', async () => {
-    // loads a css file and calls callback
-    const load = await new Promise((resolve) => {
-      blockUtils.loadCSS('/test/scripts/test.css', (e) => resolve(e));
-    });
-    expect(load).to.equal('load');
-    expect(getComputedStyle(document.body).color).to.equal('rgb(255, 0, 0)');
-
-    // does nothing if css already loaded
-    const noop = await new Promise((resolve) => {
-      blockUtils.loadCSS('/test/scripts/test.css', (e) => resolve(e));
-    });
-    expect(noop).to.equal('noop');
-
-    // calls callback in case of error
-    const error = await new Promise((resolve) => {
-      blockUtils.loadCSS('/test/scripts/nope.css', (e) => resolve(e));
-    });
-    expect(error).to.equal('error');
-  });
-
-  it('Collects RUM data', async () => {
-    const sendBeacon = sinon.stub(navigator, 'sendBeacon');
-    // turn on RUM
-    window.history.pushState({}, '', `${window.location.href}&rum=on`);
-    delete window.hlx;
-
-    // sends checkpoint beacon
-    await blockUtils.sampleRUM('test', { foo: 'bar' });
-    expect(sendBeacon.called).to.be.true;
-    sendBeacon.resetHistory();
-
-    // sends cwv beacon
-    await blockUtils.sampleRUM('cwv', { foo: 'bar' });
-    expect(sendBeacon.called).to.be.true;
-
-    // test error handling
-    sendBeacon.throws();
-    await blockUtils.sampleRUM('error', { foo: 'bar' });
-
-    sendBeacon.restore();
-  });
-
-  it('Creates optimized picture', async () => {
-    const $picture = blockUtils.createOptimizedPicture('/test/scripts/mock.png');
-    expect($picture.querySelector(':scope source[type="image/webp"]')).to.exist; // webp
-    expect($picture.querySelector(':scope source:not([type="image/webp"])')).to.exist; // fallback
-    expect($picture.querySelector(':scope img').src).to.include('format=png&optimize=medium'); // default
-  });
-
-  it('Normalizes headings', async () => {
-    const numHeadings = document.querySelectorAll('h1, h2, h3, h4, h5, h6').length;
-    blockUtils.normalizeHeadings(document.querySelector('main'), ['h1', 'h2', 'h3']);
-    expect(document.querySelectorAll('h1, h2, h3, h4, h5, h6').length).to.equal(numHeadings);
-    expect(document.querySelectorAll('h4, h5, h6').length).to.equal(0);
-  });
-});
-
-describe('Sections and blocks', () => {
-  it('Decorates sections', async () => {
-    blockUtils.decorateSections(document.querySelector('main'));
-    expect(document.querySelectorAll('main .section').length).to.equal(2);
-  });
-
-  it('Decorates blocks', async () => {
-    blockUtils.decorateBlocks(document.querySelector('main'));
-    expect(document.querySelectorAll('main .block').length).to.equal(1);
-  });
-
-  it('Loads blocks', async () => {
-    await blockUtils.loadBlocks(document.querySelector('main'));
-    document.querySelectorAll('main .block').forEach(($block) => {
-      expect($block.dataset.blockStatus).to.equal('loaded');
-    });
-  });
-
-  it('Updates section status', async () => {
-    blockUtils.updateSectionsStatus(document.querySelector('main'));
-    document.querySelectorAll('main .section').forEach(($section) => {
-      expect($section.dataset.sectionStatus).to.equal('loaded');
-    });
-
-    // test section with block still loading
-    const $section = document.querySelector('main .section');
-    delete $section.dataset.sectionStatus;
-    $section.querySelector(':scope .block').dataset.blockStatus = 'loading';
-    blockUtils.updateSectionsStatus(document.querySelector('main'));
-    expect($section.dataset.sectionStatus).to.equal('loading');
-  });
-
-  it('Reads block config', async () => {
-    document.querySelector('main .section > div').innerHTML += await readFile({ path: './config.html' });
-    const cfg = blockUtils.readBlockConfig(document.querySelector('main .config'));
-    expect(cfg).to.deep.include({
-      'prop-0': 'Plain text',
-      'prop-1': 'Paragraph',
-      'prop-2': ['First paragraph', 'Second paragraph'],
-      'prop-3': 'https://www.adobe.com/',
-      'prop-4': ['https://www.adobe.com/', 'https://www.hlx.live/'],
-    });
-  });
-});
diff --git a/test/scripts/config.html b/test/scripts/config.html
deleted file mode 100644
index 8a3d5ae6..00000000
--- a/test/scripts/config.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<div class="config">
-    <div>
-        <div>Prop 0</div>
-        <div>Plain text</div>
-    </div>
-    <div>
-        <div>Prop 1</div>
-        <div><p>Paragraph</p></div>
-    </div>
-    <div>
-        <div>Prop 2</div>
-        <div><p>First paragraph</p><p>Second paragraph</p></div>
-    </div>
-    <div>
-        <div>Prop 3</div>
-        <div><a href="https://www.adobe.com/">Link</a></div>
-    </div>
-    <div>
-        <div>Prop 4</div>
-        <div>
-            <a href="https://www.adobe.com/">First link</a>
-            <a href="https://www.hlx.live/">Second link</a>
-        </div>
-    </div>
-</div>
diff --git a/test/scripts/dummy.html b/test/scripts/dummy.html
deleted file mode 100644
index fbe89155..00000000
--- a/test/scripts/dummy.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<!-- dummy html to run scripts.js against in a first pass -->
-<header></header>
-<main></main>
-<footer></footer>
diff --git a/test/scripts/head.html b/test/scripts/head.html
deleted file mode 100644
index 7068482f..00000000
--- a/test/scripts/head.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<title>Foo</title>
-<link rel="canonical" href="https://foo.bar/">
-<meta name="description" content="Lorem ipsum dolor sit amet.">
-<meta property="og:title" content="Foo">
-<meta property="og:description" content="Lorem ipsum dolor sit amet.">
-<meta property="og:url" content="https://foo.bar/">
-<meta property="og:image" content="https://foo.bar/media_12637fbb67cddc5d293b20975e89028d919270ac0.jpeg?width=1200&amp;format=pjpg&amp;optimize=medium">
-<meta property="og:image:secure_url" content="https://foo.bar/media_12637fbb67cddc5d293b20975e89028d919270ac0.jpeg?width=1200&amp;format=pjpg&amp;optimize=medium"">
-<meta name="twitter:title" content="Foo">
-<meta name="twitter:description" content="Lorem ipsum dolor sit amet.">
-<meta name="twitter:image" content="https://foo.bar/media_12637fbb67cddc5d293b20975e89028d919270ac0.jpeg?width=1200&amp;format=pjpg&amp;optimize=medium">
-<meta name="viewport" content="width=device-width, initial-scale=1">
diff --git a/test/scripts/media_mock.png b/test/scripts/media_mock.png
deleted file mode 100644
index 4faad891..00000000
Binary files a/test/scripts/media_mock.png and /dev/null differ
diff --git a/test/scripts/scripts.test.js b/test/scripts/scripts.test.js
deleted file mode 100644
index 7988036b..00000000
--- a/test/scripts/scripts.test.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/* eslint-disable no-unused-expressions */
-/* global describe before it */
-
-import { readFile } from '@web/test-runner-commands';
-import { expect } from '@esm-bundle/chai';
-
-let scripts;
-
-document.body.innerHTML = await readFile({ path: './dummy.html' });
-document.head.innerHTML = await readFile({ path: './head.html' });
-
-describe('Core Helix features', () => {
-  before(async () => {
-    scripts = await import('../../scripts/scripts.js');
-    document.body.innerHTML = await readFile({ path: './body.html' });
-  });
-
-  it('Initializes window.hlx', async () => {
-    // simulate code base path and turn on lighthouse
-    /* needs fixing
-    document.head.appendChild(document.createElement('script')).src = '/foo/scripts/scripts.js';
-    window.history.pushState({}, '', `${window.location.href}&lighthouse=on`);
-
-    expect(window.hlx.codeBasePath).to.equal('/foo');
-    expect(window.hlx.lighthouse).to.equal(true);
-
-    // test error handling
-    const url = sinon.stub(window, 'URL');
-
-    // cleanup
-    url.restore();
-    window.hlx.codeBasePath = '';
-    window.hlx.lighthouse = false;
-    Array.from(document.querySelectorAll('script')).pop().remove();
-    */
-  });
-
-  it('Adds favicon', async () => {
-    scripts.addFavIcon('/foo.svg');
-    const $favIcon = document.querySelector('link[rel="icon"]');
-    expect($favIcon.getAttribute('href')).to.equal('/foo.svg');
-  });
-});
diff --git a/test/scripts/test.css b/test/scripts/test.css
deleted file mode 100644
index b05faf8e..00000000
--- a/test/scripts/test.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-    color: red;
-}