diff --git a/.changeset/brown-foxes-join.md b/.changeset/brown-foxes-join.md
new file mode 100644
index 00000000..049cb4e1
--- /dev/null
+++ b/.changeset/brown-foxes-join.md
@@ -0,0 +1,5 @@
+---
+'openscript-ch-website': patch
+---
+
+Add references page
diff --git a/astro.config.ts b/astro.config.ts
index 99174ea5..af8a00d1 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -62,4 +62,7 @@ export default defineConfig({
     mdx(),
     sitemap({ i18n: { defaultLocale: C.DEFAULT_LOCALE, locales: C.LOCALES } }),
   ],
+  image: {
+    responsiveStyles: true,
+  },
 });
diff --git a/src/components/Button.astro b/src/components/Button.astro
index b4b0d7de..4b158c22 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -1,15 +1,26 @@
 ---
+import { resolveSimplePath } from '../utils/paths';
 import Sprite from './Sprite.astro';
+import { currentLocale } from 'astro-nanostores-i18n:runtime';
 
 type Props = {
   href: string;
   withArrow?: boolean;
+  resolvePath?: boolean;
+  navigationSpace?: 'main' | 'footer';
 };
 
-const { href, withArrow } = Astro.props;
+const { href, resolvePath = false, navigationSpace = 'main', withArrow } = Astro.props;
+
+let path;
+
+if (resolvePath) {
+  const locale = currentLocale.get();
+  path = await resolveSimplePath(navigationSpace, href, locale);
+}
 ---
 
-<a href={href} class="button">
+<a href={path ?? href} class="button">
   <slot />
   {withArrow && <Sprite name="arrow" />}
 </a>
diff --git a/src/components/Tile.astro b/src/components/Tile.astro
new file mode 100644
index 00000000..a76b8e0f
--- /dev/null
+++ b/src/components/Tile.astro
@@ -0,0 +1,123 @@
+---
+type Props = {
+  id: string;
+  variant: 'default' | 'turnable';
+  crease?: boolean;
+  color?: 'white' | 'beige';
+};
+
+const { id, variant, color = 'white', crease = false }: Props = Astro.props;
+---
+
+<turnable-tile
+  {id}
+  class:list={['tile', color]}
+  data-crease={crease}
+  data-id={id}
+  data-variant={variant}
+>
+  <div class="tile-front">
+    <slot name="front" />
+  </div>
+  {variant === 'turnable' && (
+    <div class="tile-back">
+      <slot name="back" />
+    </div>
+  )}
+</turnable-tile>
+
+<style>
+  .tile {
+    color: inherit;
+    font-weight: 600;
+    display: grid;
+    grid-template-areas: 'stack';
+    position: relative;
+    perspective: 1000px;
+    transform-style: preserve-3d;
+    transition: rotate 500ms linear;
+  }
+
+  .tile[data-variant='turnable'] {
+    cursor: pointer;
+  }
+
+  .tile.show {
+    rotate: y 180deg;
+  }
+
+  .tile-front,
+  .tile-back {
+    grid-area: stack;
+    padding: var(--size-gutter);
+    display: grid;
+    place-content: center;
+    backface-visibility: hidden;
+    text-align: center;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  .white .tile-front,
+  .white .tile-back {
+    background-color: var(--color-white);
+  }
+
+  .beige .tile-front,
+  .beige .tile-back {
+    background-color: var(--color-background);
+  }
+
+  .tile-back {
+    rotate: y 180deg;
+  }
+
+  .tile-front {
+    grid-area: stack;
+    padding: var(--size-gutter-medium);
+    display: grid;
+    place-content: center;
+    backface-visibility: hidden;
+    text-align: center;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  .tile[data-crease='true'] .tile-front {
+    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%);
+  }
+
+  .tile[data-crease='true'] .tile-front::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 0;
+    height: 0;
+
+    border-style: solid;
+    border-width: 13px 13px 0 0;
+    border-color: #d0d0d0 transparent transparent transparent;
+  }
+</style>
+
+<script>
+  class Tile extends HTMLElement {
+    connectedCallback() {
+      const id = this.dataset.id;
+      if (!id) return;
+
+      const tile = document.getElementById(id);
+
+      tile?.addEventListener('click', function () {
+        if (tile?.dataset.variant === 'turnable') {
+          tile?.classList.toggle('show');
+        }
+      });
+    }
+  }
+
+  if (!customElements.get('turnable-tile')) {
+    customElements.define('turnable-tile', Tile);
+  }
+</script>
diff --git a/src/components/accordion/Accordion.astro b/src/components/accordion/Accordion.astro
new file mode 100644
index 00000000..631b24ed
--- /dev/null
+++ b/src/components/accordion/Accordion.astro
@@ -0,0 +1,44 @@
+---
+import type { AccordionItem } from '../../types/AccordionItem';
+
+/**
+ * Accordion Component
+ *
+ * @description A fully accessible accordion component that follows WAI-ARIA guidelines
+ */
+
+interface Props {
+  /**
+   * Additional classes to apply to the accordion container
+   */
+  class?: string;
+  /**
+   * Accordion items to render
+   */
+  children: AccordionItem | AccordionItem[];
+  /**
+   * HTML attributes to spread on the accordion
+   */
+  [key: string]: string | number | boolean | undefined | AccordionItem | AccordionItem[];
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<ul class:list={['accordion', className]} {...rest}>
+  <slot />
+</ul>
+
+<style>
+  :where(.accordion) {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  :global(:where(.accordion > .item:first-child .wrapper)) {
+    border-block-start: none !important;
+  }
+</style>
diff --git a/src/components/accordion/AccordionItem.astro b/src/components/accordion/AccordionItem.astro
new file mode 100644
index 00000000..605f4354
--- /dev/null
+++ b/src/components/accordion/AccordionItem.astro
@@ -0,0 +1,266 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import Heading from './Heading.astro';
+import { useI18n } from 'astro-nanostores-i18n:runtime';
+
+/**
+ * Accordion Item Component
+ *
+ * @description An individual accordion item that can be expanded/collapsed with smooth animations
+ */
+
+type Props = HTMLAttributes<'li'> & {
+  /**
+   * Id of the item
+   */
+  id: string;
+
+  /**
+   * Additional classes to apply to the item
+   */
+  class?: string;
+  /**
+   * Optional name attribute for the details element
+   */
+  name?: string;
+  /**
+   * Heading level for the title (h1-h6)
+   * @default 'h3'
+   */
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /**
+   * Visual size of the heading (can differ from semantic level)
+   * @default 'h6'
+   */
+  headingSize?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /**
+   * Visual style variant of the accordion
+   * @default 'chevron'
+   */
+  variant?: 'minimal' | 'chevron';
+  /**
+   * Whether the accordion item is initially open
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Allow item to be opened by the id in the url
+   */
+  openOnUrlReference?: boolean;
+};
+
+const translations = useI18n('accordion.item', {
+  more: 'Mehr anzeigen',
+  less: 'Weniger anzeigen',
+});
+
+const {
+  id,
+  class: className,
+  name,
+  headingLevel = 'h3',
+  headingSize = 'h6',
+  variant = 'chevron',
+  open = false,
+  openOnUrlReference = true,
+  ...rest
+}: Props = Astro.props;
+---
+
+<li id={id} class:list={['item', className]} {...rest} data-dynamic={openOnUrlReference}>
+  <slot name="pretext" />
+  <details class:list={['wrapper', `variant-${variant}`]} name={name} {...(open ? { open } : {})}>
+    <summary class="header">
+      <div class="title">
+        {variant === 'chevron' && (
+          <Heading level={headingLevel} size={headingSize}>
+            <>
+              <slot name="title" />
+              <span class="icon-chevron">
+                <svg
+                  aria-hidden="true"
+                  width="12"
+                  height="8"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M1.4 1.6L6 6.2l4.6-4.6"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </span>
+            </>
+          </Heading>
+        )}
+        {variant === 'minimal' && (
+          <>
+            <span class="toggle-text more">{translations.more}</span>
+            <span class="toggle-text less">{translations.less}</span>
+          </>
+        )}
+      </div>
+      <div class="preview">
+        <slot name="preview" />
+      </div>
+    </summary>
+    <div class="content">
+      <slot />
+    </div>
+  </details>
+</li>
+
+<style>
+  :where(.wrapper) {
+    --transition-duration: 0.3s;
+    --transition-easing: cubic-bezier(0.165, 0.84, 0.44, 1);
+    padding-block: 0;
+  }
+
+  .title :global(.heading) {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    min-inline-size: 100%;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    :where(.wrapper) {
+      interpolate-size: allow-keywords;
+    }
+  }
+
+  details::details-content {
+    overflow: hidden;
+    max-height: 0;
+    opacity: 0;
+    transition:
+      max-height var(--transition-duration) var(--transition-easing),
+      opacity var(--transition-duration) var(--transition-easing);
+  }
+
+  details[open]::details-content {
+    max-height: 10000px;
+    opacity: 1;
+  }
+
+  details summary .toggle-text {
+    color: var(--color-primary);
+
+    &:hover {
+      color: var(--color-primary-90);
+      text-decoration: underline;
+    }
+  }
+
+  details summary .less {
+    display: none;
+  }
+
+  details[open] summary {
+    .more {
+      display: none;
+    }
+
+    .less {
+      display: block;
+    }
+  }
+
+  .wrapper.variant-chevron .header :global(.heading) {
+    justify-content: space-between;
+  }
+
+  .wrapper.variant-chevron .content {
+    padding-block-end: 2.2rem;
+  }
+
+  .wrapper.variant-minimal {
+    display: flex;
+    flex-direction: column;
+    padding-top: calc(var(--size-gutter-medium) / 2);
+
+    .content {
+      order: 2;
+    }
+
+    summary {
+      order: 1;
+    }
+  }
+
+  :where(.header) {
+    display: flex;
+    flex-direction: column;
+    padding-block: 0.75rem;
+    list-style: none;
+  }
+
+  :where(header)::marker,
+  :where(.header)::-webkit-details-marker {
+    display: none;
+    content: '';
+  }
+
+  :where(.header .title:hover),
+  :where(.header .title:focus-visible) {
+    cursor: pointer;
+    color: var(--color-secondary);
+  }
+
+  :where(.icon-chevron) {
+    flex-shrink: 0;
+    display: flex;
+    height: 100%;
+    align-items: center;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    :where(.icon-chevron svg) {
+      transition: transform var(--transition-duration) var(--transition-easing);
+    }
+  }
+
+  :where(.content a) {
+    display: inline-block;
+  }
+
+  :where(.content > *:not(:first-child)) {
+    margin-block-start: 0.75rem;
+  }
+
+  :where(.wrapper[open] .icon-chevron svg) {
+    transform: scaleY(-1);
+  }
+</style>
+
+<script>
+  const setInitialOpenAccordion = () => {
+    const hash = window.location.hash;
+
+    if (!hash) return;
+
+    const id = hash.split('#')[1];
+
+    if (!id) return;
+    const element = document.getElementById(id);
+
+    if (!element) return;
+
+    const dynamicOpening = element.dataset.dynamic;
+
+    if (!dynamicOpening) return;
+
+    const details = element.getElementsByTagName('details');
+
+    if (details.length === 1) {
+      details[0]?.setAttribute('open', '');
+    }
+  };
+
+  setInitialOpenAccordion();
+</script>
diff --git a/src/components/accordion/Heading.astro b/src/components/accordion/Heading.astro
new file mode 100644
index 00000000..07e94cfb
--- /dev/null
+++ b/src/components/accordion/Heading.astro
@@ -0,0 +1,40 @@
+---
+/**
+ * Heading Component
+ * @description A versatile heading component that handles all heading levels with proper accessibility
+ */
+const headingOptions = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+};
+
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'> {
+  /**
+   * The tag name of the heading
+   */
+  level?: keyof typeof headingOptions;
+  /**
+   * The size of the heading
+   */
+  size?: keyof typeof headingOptions;
+}
+
+const { level = 'h2', size = level, ...rest } = Astro.props;
+const Tag = headingOptions[level];
+---
+
+<Tag class:list={['heading', size]} {...rest}>
+  <slot />
+</Tag>
+
+<style>
+  :where(.heading) {
+    text-wrap: balance;
+  }
+</style>
diff --git a/src/content.config.ts b/src/content.config.ts
index ca8c9a1c..158e90cf 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -7,7 +7,7 @@ import {
 } from 'astro-loader-i18n';
 import { defineCollection, type ImageFunction } from 'astro:content';
 import { localeSlugs } from './site.config';
-import { glob, file } from 'astro/loaders';
+import { glob } from 'astro/loaders';
 import { z } from 'astro/zod';
 
 const localized = <T extends z.ZodType>(schema: T) => localizedSchema(schema, localeSlugs);
@@ -57,15 +57,18 @@ const sectionsCollection = defineCollection({
 });
 
 const referenceCompaniesCollection = defineCollection({
-  loader: file('./src/content/references/companies/index.yaml'),
+  loader: i18nLoader({ pattern: '**/[^_]*.{md,mdx}', base: './src/content/references/companies' }),
   schema: ({ image }) =>
-    z.object({
-      id: z.string(),
-      companyName: z.string(),
-      logo: image(),
-      url: z.url().optional(),
-      archived: z.boolean().optional().default(false),
-    }),
+    extendI18nLoaderSchema(
+      z.object({
+        id: z.string(),
+        companyName: z.string(),
+        logo: image(),
+        url: z.url().optional(),
+        archived: z.boolean().optional().default(false),
+        details: z.string().optional(),
+      }),
+    ),
 });
 
 const referenceProjectsCollection = defineCollection({
@@ -78,6 +81,7 @@ const referenceProjectsCollection = defineCollection({
         summary: z.string(),
         logo: image(),
         path: z.url().optional(),
+        featured: z.boolean().optional().default(false),
       }),
     ),
 });
diff --git a/src/content/pages/de/past/references.mdx b/src/content/pages/de/past/references.mdx
index 9d7673da..37883d14 100644
--- a/src/content/pages/de/past/references.mdx
+++ b/src/content/pages/de/past/references.mdx
@@ -2,3 +2,29 @@
 path: referenzen
 title: Referenzen
 ---
+
+import Divider from '../../../../components/Divider.astro';
+import ReferencesSection from '../../../../layouts/sections/ReferencesSection.astro';
+import CompaniesSection from '../../../../layouts/sections/CompaniesSection.astro';
+
+<section class="spotlight">
+  Als Firma haben wir bereits mit vielen Kunden in verschiedensten Projekten gearbeitet. Wir haben
+  daher bereits Erfahrung mit Webapplikationen, Handy-Apps, Kurse im Bereich IT und weiteres.
+</section>
+
+<Divider firstSegmentColor="var(--color-white)" fixAntialiasingBottom />
+
+<section class="white-background">
+  <ReferencesSection />
+</section>
+
+<Divider
+  firstSegmentColor="var(--color-white)"
+  secondSegmentColor="var(--color-primary)"
+  flipVertical
+  fixAntialiasingBottom
+/>
+
+<section>
+  <CompaniesSection />
+</section>
diff --git a/src/content/pages/en/past/references.mdx b/src/content/pages/en/past/references.mdx
index 4ae6d730..1176a891 100644
--- a/src/content/pages/en/past/references.mdx
+++ b/src/content/pages/en/past/references.mdx
@@ -2,3 +2,32 @@
 path: references
 title: References
 ---
+
+import Divider from '../../../../components/Divider.astro';
+import ReferencesSection from '../../../../layouts/sections/ReferencesSection.astro';
+import CompaniesSection from '../../../../layouts/sections/CompaniesSection.astro';
+
+<section class="spotlight">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec risus sit amet nisl consectetur
+  suscipit. Duis diam dui, ultricies ut dolor vel, venenatis egestas ex. Ut vitae nibh arcu.
+  Suspendisse varius risus id blandit fermentum. Pellentesque dictum viverra nisi, id congue ex
+  elementum sed. Donec bibendum libero vitae dui accumsan, ac rhoncus mi pellentesque. Aliquam erat
+  volutpat. Morbi bibendum feugiat dolor non tristique. Aliquam erat volutpat.
+</section>
+
+<Divider firstSegmentColor="var(--color-white)" fixAntialiasingBottom />
+
+<section class="white-background">
+  <ReferencesSection />
+</section>
+
+<Divider
+  firstSegmentColor="var(--color-white)"
+  secondSegmentColor="var(--color-primary)"
+  flipVertical
+  fixAntialiasingBottom
+/>
+
+<section>
+  <CompaniesSection />
+</section>
diff --git a/src/content/references/companies/astra.de.md b/src/content/references/companies/astra.de.md
new file mode 100644
index 00000000..0e5ce7c6
--- /dev/null
+++ b/src/content/references/companies/astra.de.md
@@ -0,0 +1,7 @@
+---
+id: astra
+companyName: Bundesamt für Strassen ASTRA
+logo: ./astra.svg
+url: https://www.astra.admin.ch
+details: de text
+---
diff --git a/src/content/references/companies/astra.en.md b/src/content/references/companies/astra.en.md
new file mode 100644
index 00000000..7fa05409
--- /dev/null
+++ b/src/content/references/companies/astra.en.md
@@ -0,0 +1,7 @@
+---
+id: astra
+companyName: Bundesamt für Strassen ASTRA
+logo: ./astra.svg
+url: https://www.astra.admin.ch
+details: en text
+---
diff --git a/src/content/references/companies/dogli.de.md b/src/content/references/companies/dogli.de.md
new file mode 100644
index 00000000..53f23566
--- /dev/null
+++ b/src/content/references/companies/dogli.de.md
@@ -0,0 +1,7 @@
+---
+id: dogli
+companyName: DOGLi GmbH
+logo: ./dogli.svg
+url: https://dogli.app
+details: de text
+---
diff --git a/src/content/references/companies/dogli.en.md b/src/content/references/companies/dogli.en.md
new file mode 100644
index 00000000..3ff72d2e
--- /dev/null
+++ b/src/content/references/companies/dogli.en.md
@@ -0,0 +1,7 @@
+---
+id: dogli
+companyName: DOGLi GmbH
+logo: ./dogli.svg
+url: https://dogli.app
+details: en text
+---
diff --git a/src/content/references/companies/haslerrail.de.md b/src/content/references/companies/haslerrail.de.md
new file mode 100644
index 00000000..365706c6
--- /dev/null
+++ b/src/content/references/companies/haslerrail.de.md
@@ -0,0 +1,7 @@
+---
+id: haslerrail
+companyName: HaslerRail AG
+logo: ./haslerrail.svg
+url: https://www.haslerrail.com
+details: de text
+---
diff --git a/src/content/references/companies/haslerrail.en.md b/src/content/references/companies/haslerrail.en.md
new file mode 100644
index 00000000..56198ee3
--- /dev/null
+++ b/src/content/references/companies/haslerrail.en.md
@@ -0,0 +1,7 @@
+---
+id: haslerrail
+companyName: HaslerRail AG
+logo: ./haslerrail.svg
+url: https://www.haslerrail.com
+details: en text
+---
diff --git a/src/content/references/companies/hydrowatt.de.md b/src/content/references/companies/hydrowatt.de.md
new file mode 100644
index 00000000..9c4cf5d3
--- /dev/null
+++ b/src/content/references/companies/hydrowatt.de.md
@@ -0,0 +1,7 @@
+---
+id: hydrowatt
+companyName: Hydrowatt AG
+logo: ./hydrowatt.svg
+url: https://www.hydrowatt.com
+details: de text
+---
diff --git a/src/content/references/companies/hydrowatt.en.md b/src/content/references/companies/hydrowatt.en.md
new file mode 100644
index 00000000..4092ebb7
--- /dev/null
+++ b/src/content/references/companies/hydrowatt.en.md
@@ -0,0 +1,7 @@
+---
+id: hydrowatt
+companyName: Hydrowatt AG
+logo: ./hydrowatt.svg
+url: https://www.hydrowatt.com
+details: en text
+---
diff --git a/src/content/references/companies/index.yaml b/src/content/references/companies/index.yaml
deleted file mode 100644
index 1633596f..00000000
--- a/src/content/references/companies/index.yaml
+++ /dev/null
@@ -1,47 +0,0 @@
-- id: astra
-  companyName: Bundesamt für Strassen ASTRA
-  logo: ./astra.svg
-  url: https://www.astra.admin.ch
-- id: dogli
-  companyName: DOGLi GmbH
-  logo: ./dogli.svg
-  url: https://dogli.app
-- id: haslerrail
-  companyName: HaslerRail AG
-  logo: ./haslerrail.svg
-  url: https://www.haslerrail.com
-- id: hydrowatt
-  companyName: Hydrowatt AG
-  logo: ./hydrowatt.svg
-  url: https://www.hydrowatt.com
-- id: schalthalle
-  companyName: Verein Schalthalle
-  logo: ./schalthalle.svg
-  url: https://www.schalthalle.ch
-- id: sto
-  companyName: STO Innenausbau AG
-  logo: ./sto.svg
-  url: https://sto-innenausbau.ch
-  archived: true
-- id: uzh
-  companyName: Universität Zürich
-  logo: ./uzh.svg
-  url: https://www.uzh.ch
-- id: wagner
-  companyName: Wagner Unternehmungen AG
-  logo: ./wagner.svg
-  url: https://wagner-rohbau.ch
-- id: wiegand
-  companyName: Wiegand AG
-  logo: ./wiegand.png
-  url: https://wiegand.ch
-  archived: true
-- id: yaver
-  companyName: YAVER Infrastructure & Services GmbH
-  logo: ./yaver.svg
-  url: https://yaver.ch
-  archived: true
-- id: zli
-  companyName: Zürcher Lehrbetriebsverband ICT
-  logo: ./zli.svg
-  url: https://zli.ch
diff --git a/src/content/references/companies/innenausbau.de.md b/src/content/references/companies/innenausbau.de.md
new file mode 100644
index 00000000..00849aa0
--- /dev/null
+++ b/src/content/references/companies/innenausbau.de.md
@@ -0,0 +1,8 @@
+---
+id: sto
+companyName: STO Innenausbau AG
+logo: ./sto.svg
+url: https://sto-innenausbau.ch
+details: text
+archived: true
+---
diff --git a/src/content/references/companies/innenausbau.en.md b/src/content/references/companies/innenausbau.en.md
new file mode 100644
index 00000000..00849aa0
--- /dev/null
+++ b/src/content/references/companies/innenausbau.en.md
@@ -0,0 +1,8 @@
+---
+id: sto
+companyName: STO Innenausbau AG
+logo: ./sto.svg
+url: https://sto-innenausbau.ch
+details: text
+archived: true
+---
diff --git a/src/content/references/companies/schalthalle.de.md b/src/content/references/companies/schalthalle.de.md
new file mode 100644
index 00000000..d35e1dfc
--- /dev/null
+++ b/src/content/references/companies/schalthalle.de.md
@@ -0,0 +1,7 @@
+---
+id: schalthalle
+companyName: Verein Schalthalle
+logo: ./schalthalle.svg
+url: https://www.schalthalle.ch
+details: de text
+---
diff --git a/src/content/references/companies/schalthalle.en.md b/src/content/references/companies/schalthalle.en.md
new file mode 100644
index 00000000..d35e1dfc
--- /dev/null
+++ b/src/content/references/companies/schalthalle.en.md
@@ -0,0 +1,7 @@
+---
+id: schalthalle
+companyName: Verein Schalthalle
+logo: ./schalthalle.svg
+url: https://www.schalthalle.ch
+details: de text
+---
diff --git a/src/content/references/companies/uzh.de.md b/src/content/references/companies/uzh.de.md
new file mode 100644
index 00000000..4f0afd64
--- /dev/null
+++ b/src/content/references/companies/uzh.de.md
@@ -0,0 +1,7 @@
+---
+id: uzh
+companyName: Universität Zürich
+logo: ./uzh.svg
+url: https://www.uzh.ch
+details: de text
+---
diff --git a/src/content/references/companies/uzh.en.md b/src/content/references/companies/uzh.en.md
new file mode 100644
index 00000000..bd51f2e5
--- /dev/null
+++ b/src/content/references/companies/uzh.en.md
@@ -0,0 +1,7 @@
+---
+id: uzh
+companyName: Universität Zürich
+logo: ./uzh.svg
+url: https://www.uzh.ch
+details: en text
+---
diff --git a/src/content/references/companies/wagner.de.md b/src/content/references/companies/wagner.de.md
new file mode 100644
index 00000000..b4904b29
--- /dev/null
+++ b/src/content/references/companies/wagner.de.md
@@ -0,0 +1,7 @@
+---
+id: wagner
+companyName: Wagner Unternehmungen AG
+logo: ./wagner.svg
+url: https://wagner-rohbau.ch
+details: de text
+---
diff --git a/src/content/references/companies/wagner.en.md b/src/content/references/companies/wagner.en.md
new file mode 100644
index 00000000..2546ba41
--- /dev/null
+++ b/src/content/references/companies/wagner.en.md
@@ -0,0 +1,7 @@
+---
+id: wagner
+companyName: Wagner Unternehmungen AG
+logo: ./wagner.svg
+url: https://wagner-rohbau.ch
+details: en text
+---
diff --git a/src/content/references/companies/wiegand.de.md b/src/content/references/companies/wiegand.de.md
new file mode 100644
index 00000000..1fc1e844
--- /dev/null
+++ b/src/content/references/companies/wiegand.de.md
@@ -0,0 +1,7 @@
+---
+id: wiegand
+companyName: Wiegand AG
+logo: ./wiegand.png
+url: https://wiegand.ch
+archived: true
+---
diff --git a/src/content/references/companies/wiegand.en.md b/src/content/references/companies/wiegand.en.md
new file mode 100644
index 00000000..1fc1e844
--- /dev/null
+++ b/src/content/references/companies/wiegand.en.md
@@ -0,0 +1,7 @@
+---
+id: wiegand
+companyName: Wiegand AG
+logo: ./wiegand.png
+url: https://wiegand.ch
+archived: true
+---
diff --git a/src/content/references/companies/yaver.de.md b/src/content/references/companies/yaver.de.md
new file mode 100644
index 00000000..1b95ec86
--- /dev/null
+++ b/src/content/references/companies/yaver.de.md
@@ -0,0 +1,7 @@
+---
+id: yaver
+companyName: YAVER Infrastructure & Services GmbH
+logo: ./yaver.svg
+url: https://yaver.ch
+archived: true
+---
diff --git a/src/content/references/companies/yaver.en.md b/src/content/references/companies/yaver.en.md
new file mode 100644
index 00000000..1b95ec86
--- /dev/null
+++ b/src/content/references/companies/yaver.en.md
@@ -0,0 +1,7 @@
+---
+id: yaver
+companyName: YAVER Infrastructure & Services GmbH
+logo: ./yaver.svg
+url: https://yaver.ch
+archived: true
+---
diff --git a/src/content/references/companies/zli.de.md b/src/content/references/companies/zli.de.md
new file mode 100644
index 00000000..69b55215
--- /dev/null
+++ b/src/content/references/companies/zli.de.md
@@ -0,0 +1,7 @@
+---
+id: zli
+companyName: Zürcher Lehrbetriebsverband ICT
+logo: ./zli.svg
+url: https://zli.ch
+details: de text
+---
diff --git a/src/content/references/companies/zli.en.md b/src/content/references/companies/zli.en.md
new file mode 100644
index 00000000..f5c95ab1
--- /dev/null
+++ b/src/content/references/companies/zli.en.md
@@ -0,0 +1,7 @@
+---
+id: zli
+companyName: Zürcher Lehrbetriebsverband ICT
+logo: ./zli.svg
+url: https://zli.ch
+details: en text
+---
diff --git a/src/content/references/projects/certification.de.md b/src/content/references/projects/certification.de.md
deleted file mode 100644
index e5569855..00000000
--- a/src/content/references/projects/certification.de.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-softwareName: Zertifizierungstool
-title: Unbeaufsichtigtes Online-Zertifizierungstool für eine internationale Organisation
-logo: ./certification.svg
-summary: Mit diesem Tool können Sie Ihren Zertifizierungsprozess organisieren. Es ermöglicht Personen periodisch zur Zertifizierung einzuladen, es führt den Zertifizierungsprozess durch und übergibt Ihnen nach erfolgreicher Zertifizierung schön formatierte PDF-Dokumente.
----
diff --git a/src/content/references/projects/certification.de.mdx b/src/content/references/projects/certification.de.mdx
new file mode 100644
index 00000000..fa4cb4b2
--- /dev/null
+++ b/src/content/references/projects/certification.de.mdx
@@ -0,0 +1,23 @@
+---
+softwareName: Zertifizierungstool
+title: Unbeaufsichtigtes Online-Zertifizierungstool für eine internationale Organisation
+logo: ./certification.svg
+summary: Mit diesem Tool können Sie Ihren Zertifizierungsprozess organisieren. Es ermöglicht Personen periodisch zur Zertifizierung einzuladen, es führt den Zertifizierungsprozess durch und übergibt Ihnen nach erfolgreicher Zertifizierung schön formatierte PDF-Dokumente.
+featured: true
+---
+
+import { Image } from 'astro:assets';
+import image from './placeholder.png';
+
+<p>
+  Mit diesem Tool können Sie Ihren Zertifizierungsprozess organisieren. Es ermöglicht Personen
+  periodisch zur Zertifizierung einzuladen, es führt den Zertifizierungsprozess durch und übergibt
+  Ihnen nach erfolgreicher Zertifizierung schön formatierte PDF-Dokumente.
+</p>
+
+<Image
+  src={image}
+  alt="Zertifizierungstool"
+  widths={[300, 400, 800, 1200, 1800, 2200]}
+  sizes="(max-width: 800px) 100vw, 75vw"
+/>
diff --git a/src/content/references/projects/certification.en.md b/src/content/references/projects/certification.en.md
deleted file mode 100644
index f28d5c6f..00000000
--- a/src/content/references/projects/certification.en.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-softwareName: Certification Tool
-title: Unattended online certification tool for an international organization
-logo: ./certification.svg
-summary: With this tool you can organize your certification process. It lets you invite people periodically to get certified, runs the certification process and hands you nicely designed PDF documents upon successful certification.
----
diff --git a/src/content/references/projects/certification.en.mdx b/src/content/references/projects/certification.en.mdx
new file mode 100644
index 00000000..8fe56372
--- /dev/null
+++ b/src/content/references/projects/certification.en.mdx
@@ -0,0 +1,23 @@
+---
+softwareName: Certification Tool
+title: Unattended online certification tool for an international organization
+logo: ./certification.svg
+summary: With this tool you can organize your certification process. It lets you invite people periodically to get certified, runs the certification process and hands you nicely designed PDF documents upon successful certification.
+featured: true
+---
+
+import { Image } from 'astro:assets';
+import image from './placeholder.png';
+
+<p>
+  With this tool you can organize your certification process. It lets you invite people periodically
+  to get certified, runs the certification process and hands you nicely designed PDF documents upon
+  successful certification.
+</p>
+
+<Image
+  src={image}
+  alt="Certification Tool"
+  widths={[300, 400, 800, 1200, 1800, 2200]}
+  sizes="(max-width: 800px) 100vw, 75vw"
+/>
diff --git a/src/content/references/projects/placeholder.png b/src/content/references/projects/placeholder.png
new file mode 100644
index 00000000..0458f612
Binary files /dev/null and b/src/content/references/projects/placeholder.png differ
diff --git a/src/content/references/projects/timelet.de.md b/src/content/references/projects/timelet.de.md
deleted file mode 100644
index 282b5f9c..00000000
--- a/src/content/references/projects/timelet.de.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-softwareName: Timelet
-title: Minimales Open-Source Zeiterfassungstool
-logo: ./timelet.svg
-summary: Dieses Produkt ist ein minimalistisches, einfach zu bedienendes Open-Source-Tool zur effizienten Zeiterfassung. Da es völlig kostenlos ist, bietet es jedem die Möglichkeit, sein Zeitmanagement professionell zu gestalten.
----
diff --git a/src/content/references/projects/timelet.de.mdx b/src/content/references/projects/timelet.de.mdx
new file mode 100644
index 00000000..1e60fc84
--- /dev/null
+++ b/src/content/references/projects/timelet.de.mdx
@@ -0,0 +1,23 @@
+---
+softwareName: Timelet
+title: Minimales Open-Source Zeiterfassungstool
+logo: ./timelet.svg
+summary: Dieses Produkt ist ein minimalistisches, einfach zu bedienendes Open-Source-Tool zur effizienten Zeiterfassung. Da es völlig kostenlos ist, bietet es jedem die Möglichkeit, sein Zeitmanagement professionell zu gestalten.
+featured: true
+---
+
+import { Image } from 'astro:assets';
+import image from './placeholder.png';
+
+<p>
+  Dieses Produkt ist ein minimalistisches, einfach zu bedienendes Open-Source-Tool zur effizienten
+  Zeiterfassung. Da es völlig kostenlos ist, bietet es jedem die Möglichkeit, sein Zeitmanagement
+  professionell zu gestalten.
+</p>
+
+<Image
+  src={image}
+  alt="Timelet"
+  widths={[300, 400, 800, 1200, 1800, 2200]}
+  sizes="(max-width: 800px) 100vw, 75vw"
+/>
diff --git a/src/content/references/projects/timelet.en.md b/src/content/references/projects/timelet.en.md
deleted file mode 100644
index 65c52993..00000000
--- a/src/content/references/projects/timelet.en.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-softwareName: Timelet
-title: Minimal opensource time tracking tool
-logo: ./timelet.svg
-summary: This product is a minimalist, easy-to-use, opensource tool to track time efficiently. By it being completely free to use it gives everyone the change to handle their time management professionally.
----
diff --git a/src/content/references/projects/timelet.en.mdx b/src/content/references/projects/timelet.en.mdx
new file mode 100644
index 00000000..02e1a01a
--- /dev/null
+++ b/src/content/references/projects/timelet.en.mdx
@@ -0,0 +1,23 @@
+---
+softwareName: Timelet
+title: Minimal opensource time tracking tool
+logo: ./timelet.svg
+summary: This product is a minimalist, easy-to-use, opensource tool to track time efficiently. By it being completely free to use it gives everyone the change to handle their time management professionally.
+featured: true
+---
+
+import { Image } from 'astro:assets';
+import image from './placeholder.png';
+
+<p>
+  This product is a minimalist, easy-to-use, opensource tool to track time efficiently. By it being
+  completely free to use it gives everyone the change to handle their time management
+  professionally.
+</p>
+
+<Image
+  src={image}
+  alt="Timelet"
+  widths={[300, 400, 800, 1200, 1800, 2200]}
+  sizes="(max-width: 800px) 100vw, 75vw"
+/>
diff --git a/src/content/references/projects/vialibera.de.md b/src/content/references/projects/vialibera.de.md
deleted file mode 100644
index 563c27d0..00000000
--- a/src/content/references/projects/vialibera.de.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-softwareName: ViaLibera
-title: Mobiles Protokollmanagement-Tool für eine Regierungsorganisation
-logo: ./vialibera.svg
-summary: Es handelt sich um eine progressive Webanwendung, die offlinefähig ist. Nachdem das Gerät, auf dem die Anwendung läuft, wieder online ist, werden die Daten synchronisiert. Es hilft dabei, den Strassenzustand zu protokollieren und daraus Statistiken zu erstellen.
----
diff --git a/src/content/references/projects/vialibera.de.mdx b/src/content/references/projects/vialibera.de.mdx
new file mode 100644
index 00000000..ebfa8d03
--- /dev/null
+++ b/src/content/references/projects/vialibera.de.mdx
@@ -0,0 +1,23 @@
+---
+softwareName: ViaLibera
+title: Mobiles Protokollmanagement-Tool für eine Regierungsorganisation
+logo: ./vialibera.svg
+summary: Es handelt sich um eine progressive Webanwendung, die offlinefähig ist. Nachdem das Gerät, auf dem die Anwendung läuft, wieder online ist, werden die Daten synchronisiert. Es hilft dabei, den Strassenzustand zu protokollieren und daraus Statistiken zu erstellen.
+featured: true
+---
+
+import { Image } from 'astro:assets';
+import image from './placeholder.png';
+
+<p>
+  Es handelt sich um eine progressive Webanwendung, die offlinefähig ist. Nachdem das Gerät, auf dem
+  die Anwendung läuft, wieder online ist, werden die Daten synchronisiert. Es hilft dabei, den
+  Strassenzustand zu protokollieren und daraus Statistiken zu erstellen.
+</p>
+
+<Image
+  src={image}
+  alt="ViaLibera"
+  widths={[300, 400, 800, 1200, 1800, 2200]}
+  sizes="(max-width: 800px) 100vw, 75vw"
+/>
diff --git a/src/content/references/projects/vialibera.en.md b/src/content/references/projects/vialibera.en.md
deleted file mode 100644
index 36ac1a9e..00000000
--- a/src/content/references/projects/vialibera.en.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-softwareName: ViaLibera
-title: Mobile protocol management tool for a government organization
-logo: ./vialibera.svg
-summary: It's a progressive web application, which has offline capabilities. After the device which runs the application comes back online the data is synchronized. It helps you to log street condition and makes statistics out of it.
----
diff --git a/src/content/references/projects/vialibera.en.mdx b/src/content/references/projects/vialibera.en.mdx
new file mode 100644
index 00000000..b841980a
--- /dev/null
+++ b/src/content/references/projects/vialibera.en.mdx
@@ -0,0 +1,23 @@
+---
+softwareName: ViaLibera
+title: Mobile protocol management tool for a government organization
+logo: ./vialibera.svg
+summary: It's a progressive web application, which has offline capabilities. After the device which runs the application comes back online the data is synchronized. It helps you to log street condition and makes statistics out of it.
+featured: true
+---
+
+import { Image } from 'astro:assets';
+import image from './placeholder.png';
+
+<p>
+  It's a progressive web application, which has offline capabilities. After the device which runs
+  the application comes back online the data is synchronized. It helps you to log street condition
+  and makes statistics out of it.
+</p>
+
+<Image
+  src={image}
+  alt="ViaLibera"
+  widths={[300, 400, 800, 1200, 1800, 2200]}
+  sizes="(max-width: 800px) 100vw, 75vw"
+/>
diff --git a/src/content/sections/de/Featured.mdx b/src/content/sections/de/Featured.mdx
new file mode 100644
index 00000000..d2839272
--- /dev/null
+++ b/src/content/sections/de/Featured.mdx
@@ -0,0 +1,5 @@
+import FeaturedSection from '../../../layouts/sections/FeaturedSection.astro';
+
+<FeaturedSection>
+  <h2 slot="title">Wer uns vertraut</h2>
+</FeaturedSection>
diff --git a/src/content/sections/de/References.mdx b/src/content/sections/de/References.mdx
deleted file mode 100644
index 6706e9c1..00000000
--- a/src/content/sections/de/References.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-import ReferencesSection from '../../../layouts/sections/ReferencesSection.astro';
-
-<ReferencesSection>
-  <h2 slot="title">Wer uns vertraut</h2>
-</ReferencesSection>
diff --git a/src/content/sections/de/Spotlight.mdx b/src/content/sections/de/Spotlight.mdx
index 525f710d..b4cd2582 100644
--- a/src/content/sections/de/Spotlight.mdx
+++ b/src/content/sections/de/Spotlight.mdx
@@ -16,14 +16,14 @@ import ReferenceIcon from '../../../../res/dogli.svg';
   <div data-slide-id="0" class="align-end">
     <h3>Gemeinsam auf dem richtigen Weg</h3>
     <p>Finden wir gemeinsam den richtigen Weg, um Ihre Software Wirklichkeit werden zu lassen.</p>
-    <Button href="/future/collaboration" withArrow>
+    <Button resolvePath href="/future/collaboration" withArrow>
       Mit uns zusammenarbeiten
     </Button>
   </div>
   <div data-slide-id="1" class="align-center">
     <h3>Nahtlos</h3>
     <p>Wir entwickeln Software, die sich nahtlos in Ihren bestehenden Arbeitsablauf integriert.</p>
-    <Button href="/present/values" withArrow>
+    <Button resolvePath href="/present/values" withArrow>
       Unsere Werte entdecken
     </Button>
   </div>
diff --git a/src/content/sections/en/Featured.mdx b/src/content/sections/en/Featured.mdx
new file mode 100644
index 00000000..aad6904e
--- /dev/null
+++ b/src/content/sections/en/Featured.mdx
@@ -0,0 +1,5 @@
+import FeaturedSection from '../../../layouts/sections/FeaturedSection.astro';
+
+<FeaturedSection>
+  <h2 slot="title">Who trusts us</h2>
+</FeaturedSection>
diff --git a/src/content/sections/en/References.mdx b/src/content/sections/en/References.mdx
deleted file mode 100644
index d35e380c..00000000
--- a/src/content/sections/en/References.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-import ReferencesSection from '../../../layouts/sections/ReferencesSection.astro';
-
-<ReferencesSection>
-  <h2 slot="title">Who trusts us</h2>
-</ReferencesSection>
diff --git a/src/content/sections/en/Spotlight.mdx b/src/content/sections/en/Spotlight.mdx
index 856cde0c..52887079 100644
--- a/src/content/sections/en/Spotlight.mdx
+++ b/src/content/sections/en/Spotlight.mdx
@@ -16,21 +16,21 @@ import ReferenceIcon from '../../../../res/dogli.svg';
   <div data-slide-id="0" class="align-end">
     <h3>Together on the right path</h3>
     <p>Let's find together the right path to bring your software to reality.</p>
-    <Button href="/future/collaboration" withArrow>
+    <Button resolvePath href="/future/collaboration" withArrow>
       Collaborate with us
     </Button>
   </div>
   <div data-slide-id="1" class="align-center">
     <h3>Seamless</h3>
     <p>We build software that integrates seamlessly into your existing workflow.</p>
-    <Button href="/present/values" withArrow>
+    <Button resolvePath href="/present/values" withArrow>
       Discover our values
     </Button>
   </div>
   <div data-slide-id="2" class="align-start">
     <h3>Ultimate dog enrichment app</h3>
     <p>A smartphone app with social media features to enrich your best friends life.</p>
-    <Button href="/past/references/dogli" withArrow>
+    <Button resolvePath href="/past/references#dogli" withArrow>
       Check out DOGLi
     </Button>
   </div>
diff --git a/src/layouts/sections/CompaniesSection.astro b/src/layouts/sections/CompaniesSection.astro
new file mode 100644
index 00000000..845bb744
--- /dev/null
+++ b/src/layouts/sections/CompaniesSection.astro
@@ -0,0 +1,81 @@
+---
+import { currentLocale } from 'astro-nanostores-i18n:runtime';
+import { getCollection } from 'astro:content';
+import { Image } from 'astro:assets';
+import Tile from '../../components/Tile.astro';
+
+const locale = currentLocale.get();
+const companies = await getCollection(
+  'referenceCompanies',
+  (entry) => entry.data.locale === locale && !entry.data.archived && entry.data.details,
+);
+---
+
+<div class="grid">
+  {companies.map((c) => (
+    <Tile variant="turnable" id={c.data.id} crease>
+      <div slot="front">
+        <div class="card front-card">
+          <Image src={c.data.logo} alt={c.data.companyName} />
+          <span>{c.data.companyName}</span>
+        </div>
+      </div>
+      <div class="card" slot="back">
+        {c.data.details}
+      </div>
+    </Tile>
+  ))}
+</div>
+
+<style>
+  .grid {
+    min-height: fit-content;
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: var(--size-gutter-big);
+
+    .front-card {
+      display: flex;
+      flex-direction: column;
+      gap: var(--size-gutter);
+    }
+
+    :global(.tile) {
+      aspect-ratio: 6 / 3;
+    }
+
+    .card {
+      font-weight: 600;
+      font-size: var(--font-size);
+    }
+  }
+
+  img {
+    height: 4rem;
+    width: auto;
+    max-width: 100%;
+    object-fit: contain;
+  }
+
+  @media screen and (max-width: 2200px) {
+    .grid {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  @media screen and (max-width: 1000px) {
+    .grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media screen and (max-width: 500px) {
+    .grid {
+      grid-template-columns: 1fr;
+    }
+
+    img {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/src/layouts/sections/FeaturedSection.astro b/src/layouts/sections/FeaturedSection.astro
new file mode 100644
index 00000000..e72bc353
--- /dev/null
+++ b/src/layouts/sections/FeaturedSection.astro
@@ -0,0 +1,127 @@
+---
+import { currentLocale } from 'astro-nanostores-i18n:runtime';
+import { Image } from 'astro:assets';
+import { getCollection } from 'astro:content';
+import Tile from '../../components/Tile.astro';
+
+const locale = currentLocale.get();
+const companies = await getCollection(
+  'referenceCompanies',
+  (entry) => entry.data.locale === locale && !entry.data.archived,
+);
+const projects = await getCollection(
+  'referenceProjects',
+  (entry) => entry.data.locale === locale && entry.data.featured,
+);
+---
+
+<section class="page-padding">
+  <header>
+    <slot name="title" />
+  </header>
+  <div class="references-projects">
+    {projects.map((p) => (
+      <div>
+        <Image src={p.data.logo} alt={p.data.softwareName} />
+        <h3>{p.data.title}</h3>
+        <p>{p.data.summary}</p>
+      </div>
+    ))}
+  </div>
+  <div class="references-companies">
+    {companies.map((c) => (
+      <Tile id={c.data.id} variant="default" color="beige">
+        <a
+          slot="front"
+          href={c.data.url || '#'}
+          target="_blank"
+          rel="noopener"
+          aria-label={c.data.companyName}
+        >
+          <Image src={c.data.logo} alt={c.data.companyName} />
+          {c.data.companyName}
+        </a>
+      </Tile>
+    ))}
+  </div>
+</section>
+<style>
+  section {
+    background-color: var(--color-white);
+    z-index: 1;
+  }
+
+  img {
+    height: 4rem;
+    width: auto;
+    max-width: 100%;
+    object-fit: contain;
+  }
+
+  :where(.references-projects) {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-rows: auto auto 1fr;
+    gap: var(--size-gutter-big);
+    margin-block-end: var(--size-gutter-big);
+
+    img {
+      height: 8rem;
+    }
+
+    div:first-child {
+      grid-column: span 2;
+    }
+
+    h3 {
+      margin: 0;
+    }
+
+    > div {
+      display: grid;
+      grid-row: span 3;
+      grid-template-rows: subgrid;
+      background-color: var(--color-background);
+      padding: var(--size-gutter-big);
+      justify-items: center;
+      align-items: start;
+    }
+  }
+
+  :where(.references-companies) {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: var(--size-gutter-big);
+
+    a {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      gap: var(--size-gutter);
+      color: inherit;
+      font-weight: 600;
+    }
+  }
+
+  @media screen and (max-width: 1600px) {
+    .references-companies {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media screen and (max-width: 800px) {
+    .references-companies {
+      grid-template-columns: 1fr;
+    }
+
+    .references-projects {
+      grid-template-columns: 1fr;
+
+      div:first-child {
+        grid-column: span 1;
+      }
+    }
+  }
+</style>
diff --git a/src/layouts/sections/ReferencesSection.astro b/src/layouts/sections/ReferencesSection.astro
index 31f82e32..f186d5cd 100644
--- a/src/layouts/sections/ReferencesSection.astro
+++ b/src/layouts/sections/ReferencesSection.astro
@@ -1,114 +1,114 @@
 ---
 import { currentLocale } from 'astro-nanostores-i18n:runtime';
+import { getCollection, render } from 'astro:content';
+import Accordion from '../../components/accordion/Accordion.astro';
+import AccordionItem from '../../components/accordion/AccordionItem.astro';
+import Heading from '../../components/accordion/Heading.astro';
 import { Image } from 'astro:assets';
-import { getCollection } from 'astro:content';
 
 const locale = currentLocale.get();
-const companies = await getCollection('referenceCompanies', (entry) => !entry.data.archived);
-const projects = await getCollection('referenceProjects', (entry) => entry.data.locale === locale);
+const rawProjects = await getCollection(
+  'referenceProjects',
+  (entry) => entry.data.locale === locale,
+);
+
+const projects = await Promise.all(
+  rawProjects.map(async (project) => {
+    const { Content, headings } = await render(project);
+    return {
+      ...project,
+      Content,
+      headings,
+    };
+  }),
+);
 ---
 
-<section class="page-padding">
-  <header>
-    <slot name="title" />
-  </header>
-  <div class="references-projects">
-    {projects.map((p) => (
-      <div>
-        <Image src={p.data.logo} alt={p.data.softwareName} />
-        <h3>{p.data.title}</h3>
-        <p>{p.data.summary}</p>
+<Accordion>
+  {projects.map(({ id, data, Content }, i) => (
+    <AccordionItem id={id} name={data.softwareName} variant="minimal" open={i === 0}>
+      <div slot="pretext">
+        <Heading level="h3" size="h6" class="title" slot="title">
+          {data.softwareName}
+          <div class="title-icon">
+            <Image height="30" src={data.logo} alt={data.softwareName} />
+          </div>
+        </Heading>
+        <div class="preview">
+          <span>{data.summary}</span>
+          <div class="image">
+            <Image height={120} src={data.logo} alt={data.softwareName} />
+          </div>
+        </div>
       </div>
-    ))}
-  </div>
-  <div class="references-companies">
-    {companies.map((c) => (
-      <a href={c.data.url || '#'} target="_blank" rel="noopener" aria-label={c.data.companyName}>
-        <Image src={c.data.logo} alt={c.data.companyName} />
-        {c.data.companyName}
-      </a>
-    ))}
-  </div>
-</section>
-<style>
-  section {
-    background-color: var(--color-white);
-    z-index: 1;
-  }
-
-  img {
-    height: 4rem;
-    width: auto;
-    max-width: 100%;
-    object-fit: contain;
-  }
+      <div class="content">
+        <Content />
+      </div>
+    </AccordionItem>
+  ))}
+</Accordion>
 
-  :where(.references-projects) {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    grid-template-rows: auto auto 1fr;
-    gap: var(--size-gutter-big);
-    margin-block-end: var(--size-gutter-big);
+<style>
+  .preview {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--size-gutter-huge);
 
-    img {
-      height: 8rem;
+    span {
+      width: 75%;
     }
 
-    div:first-child {
-      grid-column: span 2;
+    .image {
+      display: flex;
+      flex-grow: 1;
+      justify-content: center;
     }
+  }
 
-    h3 {
-      margin: 0;
-    }
+  .content {
+    width: 75%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-gutter-medium);
 
-    > div {
-      display: grid;
-      grid-row: span 3;
-      grid-template-rows: subgrid;
-      background-color: var(--color-background);
-      padding: var(--size-gutter-big);
-      justify-items: center;
-      align-items: start;
+    img {
+      max-width: 100%;
+      height: auto;
     }
   }
 
-  :where(.references-companies) {
-    display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap: var(--size-gutter-big);
+  .title {
+    display: flex;
+    justify-content: space-between;
 
-    a {
+    .title-icon {
       display: flex;
-      flex-direction: column;
-      align-items: center;
       justify-content: center;
-      text-align: center;
-      padding: var(--size-gutter-big);
-      gap: var(--size-gutter);
-      color: inherit;
-      font-weight: 600;
-      background-color: var(--color-background);
-    }
-  }
+      width: 30px;
 
-  @media screen and (max-width: 1600px) {
-    .references-companies {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+      img {
+        display: none;
+      }
     }
   }
 
   @media screen and (max-width: 800px) {
-    .references-companies {
-      grid-template-columns: 1fr;
+    .title .title-icon img {
+      display: block;
     }
 
-    .references-projects {
-      grid-template-columns: 1fr;
+    .preview {
+      span {
+        width: 100%;
+      }
 
-      div:first-child {
-        grid-column: span 1;
+      .image {
+        display: none;
       }
     }
+
+    .content {
+      width: 100%;
+    }
   }
 </style>
diff --git a/src/pages/[...locale]/index.astro b/src/pages/[...locale]/index.astro
index e7855808..fab6a98d 100644
--- a/src/pages/[...locale]/index.astro
+++ b/src/pages/[...locale]/index.astro
@@ -19,8 +19,8 @@ const { Content: ServicesSection } = await render(
 const { Content: TechnologiesSection } = await render(
   await getEntry('sections', `${locale}/technologies`)!,
 );
-const { Content: ReferencesSection } = await render(
-  await getEntry('sections', `${locale}/references`)!,
+const { Content: FeaturedSection } = await render(
+  await getEntry('sections', `${locale}/featured`)!,
 );
 const { Content: QuestionsSection } = await render(
   await getEntry('sections', `${locale}/questions`)!,
@@ -41,7 +41,7 @@ const { Content: QuestionsSection } = await render(
   <Divider kind="single" firstSegmentColor="var(--color-white)" flipVertical fixAntialiasingTop />
   <TechnologiesSection />
   <Divider kind="single" firstSegmentColor="var(--color-white)" fixAntialiasingBottom />
-  <ReferencesSection />
+  <FeaturedSection />
   <Divider kind="single" firstSegmentColor="var(--color-white)" flipVertical fixAntialiasingTop />
   <QuestionsSection />
 </Shell>
diff --git a/src/translations/de.json b/src/translations/de.json
index 0967ef42..81fe188a 100644
--- a/src/translations/de.json
+++ b/src/translations/de.json
@@ -1 +1,6 @@
-{}
+{
+  "accordion.item": {
+    "more": "Mehr anzeigen",
+    "less": "Weniger anzeigen"
+  }
+}
diff --git a/src/translations/en.json b/src/translations/en.json
index 0967ef42..c2173412 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -1 +1,6 @@
-{}
+{
+  "accordion.item": {
+    "more": "Show more",
+    "less": "Show less"
+  }
+}
diff --git a/src/types/AccordionItem.ts b/src/types/AccordionItem.ts
new file mode 100644
index 00000000..1301dae3
--- /dev/null
+++ b/src/types/AccordionItem.ts
@@ -0,0 +1,10 @@
+export type AccordionItem = {
+  class?: string;
+  title: string;
+  name?: string;
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  headingSize?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  variant?: 'default' | 'chevron';
+  open?: boolean;
+  children?: unknown;
+} & Record<string, unknown>;
diff --git a/src/utils/paths.ts b/src/utils/paths.ts
index c0106649..fbab59e6 100644
--- a/src/utils/paths.ts
+++ b/src/utils/paths.ts
@@ -9,6 +9,7 @@ import type { ImageMetadata } from 'astro';
 import { parseLocale } from './i18n';
 
 const PROTOCOL_DELIMITER = '://';
+const ID_DELIMITER = '#';
 
 export const defaultPropsAndParamsOptions = {
   defaultLocale: C.DEFAULT_LOCALE,
@@ -26,6 +27,52 @@ export const resolvePath = (...path: Array<string | number | undefined>) => {
   return originalResolvePath(import.meta.env.BASE_URL, ...path);
 };
 
+export const resolveSimplePath = async <E extends keyof DataEntryMap['navigation'] | (string & {})>(
+  id: E,
+  path: string,
+  currentLocale: Locale,
+) => {
+  const navigation = await getEntry('navigation', `${id}/${currentLocale}`);
+  if (!navigation) throw new Error(`Navigation entry not found`);
+
+  const items = navigation.data.items;
+
+  if (!Array.isArray(items)) {
+    throw new Error(`Navigation entry not found`);
+  }
+
+  const [cleansedPath, param] = path.split(ID_DELIMITER);
+
+  for (const item of items) {
+    const reference = findReference(item, `${currentLocale}${cleansedPath}`);
+
+    if (reference) {
+      const resolved = await convertReferenceToPath(reference);
+
+      return param ? `${resolved}#${param}` : resolved;
+    }
+  }
+
+  throw new Error(`Path could not be resolved`);
+};
+
+const findReference = (item: NavigationItem, path: string): string | undefined => {
+  const [collection, reference] = item.path.split(PROTOCOL_DELIMITER);
+  if (!collection || !reference) throw new Error('Invalid path');
+
+  if (reference === path) {
+    return item.path;
+  }
+
+  if (item.children) {
+    for (const child of item.children) {
+      const result = findReference(child, path);
+      if (result) return result;
+    }
+  }
+  return undefined;
+};
+
 export const generateGetStaticIndexPaths = (routePattern: string) => {
   return async () => {
     const collection = createI18nCollection({