diff --git a/assets/css/custom.css b/assets/css/custom.css
index 7a75b3730..3695df795 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,9 +1,16 @@
 /* custom classes: */
 .header-bg {
-  background-image: url(/img/home/header-background.avif), linear-gradient(to bottom, rgb(4.31% 5.88% 9.02%) 0%, rgb(7.84% 20.39% 32.94%) 38%, rgb(24.71% 54.51% 85.1%) 72%, rgb(60.39% 78.04% 96.08%) 90%);
+  background-image: url(/img/home/header-background.avif), linear-gradient(to bottom, #1e2b33 0%, rgb(7.84% 20.39% 32.94%) 38%, rgb(24.71% 54.51% 85.1%) 72%, rgb(60.39% 78.04% 96.08%) 90%);
   background-size: auto 100%;
 }
 
+.header-bg-hub {
+  background-image: url(/img/hub/header-clouds.png), url(/img/home/header-background.avif), linear-gradient(to bottom, #ffffff 0%, #eef3f7 55%, #dce8ee 100%);
+  background-size: auto 240px, auto 620px, 100% 100%;
+  background-repeat: repeat-x;
+  background-position: 50% 70px, bottom, center;
+}
+
 .container-prose {
   @apply w-full mx-auto;
   max-width: 768px;
@@ -62,6 +69,15 @@
   @apply bg-primary text-white transition transform duration-200 ease-in-out;
 }
 
+.btn-outline-tertiary2 {
+  @apply border border-tertiary2 text-tertiary2;
+}
+
+.btn-outline-tertiary2:hover,
+.btn-outline-tertiary2:focus {
+  @apply bg-tertiary2 text-white transition transform duration-200 ease-in-out;
+}
+
 .btn-outline-secondary {
   @apply border border-secondary text-secondary;
 }
@@ -99,6 +115,10 @@
   @apply text-primary no-underline hover:underline;
 }
 
+.text-link-tertiary2 {
+  @apply text-tertiary2 no-underline hover:underline;
+}
+
 .font-h1 {
   @apply font-headline font-medium text-3xl md:text-4xl leading-tight text-balance;
 }
diff --git a/assets/css/finder-hero.css b/assets/css/finder-hero.css
new file mode 100644
index 000000000..430593dff
--- /dev/null
+++ b/assets/css/finder-hero.css
@@ -0,0 +1,75 @@
+/* Finder-window hero styles — loaded only by layouts/for-individuals/single.html
+   as a separate Tailwind sheet, so other pages do not ship the split-flap rules.
+
+   @reference imports Tailwind and the shared theme/utilities for @apply
+   resolution only — nothing from them is re-emitted here. Hugo pipes this file
+   to the Tailwind CLI with the project root as cwd and does not rewrite
+   @reference like it does @import, so the theme path is root-relative. The
+   @layer components wrapper keeps these rules in the same cascade layer they
+   would have inside main.css, so utility classes in the markup still win over
+   component rules. */
+@reference "tailwindcss";
+@reference "./assets/css/theme.css";
+
+/* Re-declare main.css's cascade layer order: layer order is fixed by first
+   occurrence per document, so without this a bare `@layer components` block
+   would corrupt the order if this sheet were ever loaded before main.css. */
+@layer properties, theme, base, components, utilities;
+
+@layer components {
+  /* Two stacked icons per slot; `.is-locked` on the .finder-hero root decides
+     which face shows. finder-hero.js toggles the class on each flap cycle. */
+  .finder-swap-icon {
+    position: relative;
+    display: inline-flex;
+    flex: 0 0 auto;
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .finder-swap-icon i,
+  .finder-swap-icon img {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    object-fit: contain;
+    transition: opacity 0.4s ease;
+  }
+
+  .finder-hero.is-locked .finder-when-unlocked,
+  .finder-hero:not(.is-locked) .finder-when-locked {
+    opacity: 0;
+  }
+
+  .finder-hero.is-locked .finder-flap-name {
+    @apply font-mono text-[13px] text-gray-600;
+  }
+
+  /* The title-bar path flips as one whole panel (departure-board segment)
+     between its locked and unlocked label instead of per-letter flapping. */
+  .finder-path {
+    display: inline-flex;
+    min-width: 0;
+    perspective: 400px;
+  }
+
+  .finder-path-inner {
+    transform-style: preserve-3d;
+    transition: transform 0.6s ease-in-out;
+  }
+
+  .finder-path-front,
+  .finder-path-back {
+    backface-visibility: hidden;
+  }
+
+  .finder-path-back {
+    transform: rotateX(180deg);
+  }
+
+  .finder-hero:not(.is-locked) .finder-path-inner {
+    transform: rotateX(180deg);
+  }
+}
diff --git a/assets/css/hub-scene.css b/assets/css/hub-scene.css
new file mode 100644
index 000000000..0764752e3
--- /dev/null
+++ b/assets/css/hub-scene.css
@@ -0,0 +1,51 @@
+/* Page-scoped sheet for the for-teams hero, so other pages do not ship these
+   rules. See assets/css/finder-hero.css for the @reference/@layer rationale. */
+@reference "tailwindcss";
+@reference "./assets/css/theme.css";
+
+@layer properties, theme, base, components, utilities;
+
+@layer components {
+  /* Crossfade rotator for exactly three children: the 12s cycle is carved into
+     4s slots by the :nth-child delays, so a fourth child would never show. */
+  .idp-swap {
+    display: inline-grid;
+    place-items: center;
+  }
+
+  .idp-swap > * {
+    grid-area: 1 / 1;
+    opacity: 0;
+    animation: idp-cycle 12s infinite backwards;
+  }
+
+  .idp-swap > :nth-child(2) {
+    animation-delay: 4s;
+  }
+
+  .idp-swap > :nth-child(3) {
+    animation-delay: 8s;
+  }
+
+  @keyframes idp-cycle {
+    0% { opacity: 0; }
+    4% { opacity: 1; }
+    33% { opacity: 1; }
+    37% { opacity: 0; }
+    100% { opacity: 0; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ad-pulse {
+      display: none;
+    }
+
+    .idp-swap > * {
+      animation: none;
+    }
+
+    .idp-swap > :first-child {
+      opacity: 1;
+    }
+  }
+}
diff --git a/assets/js/finder-hero.js b/assets/js/finder-hero.js
new file mode 100644
index 000000000..dd7780735
--- /dev/null
+++ b/assets/js/finder-hero.js
@@ -0,0 +1,87 @@
+/* Split-flap animation for the for-individuals finder hero: every element with
+   a `finder-flap` class cycles between its data-locked and data-unlocked text
+   like an airport departure board, while `.is-locked` on the `.finder-hero`
+   root swaps the accompanying icons and flips the title-bar path panel (see
+   finder-hero.css). */
+
+class FinderFlap {
+  constructor(el) {
+    this.el = el;
+    this.chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+    this.raf = null;
+  }
+
+  setText(newText) {
+    const oldText = this.el.textContent;
+    const length = Math.max(oldText.length, newText.length);
+    this.queue = [];
+    for (let i = 0; i < length; i++) {
+      const from = oldText[i] || '';
+      const to = newText[i] || '';
+      const start = Math.floor(i * 0.8);
+      const end = start + 8 + Math.floor(Math.random() * 8);
+      this.queue.push({ from, to, start, end, char: null });
+    }
+    cancelAnimationFrame(this.raf);
+    this.frame = 0;
+    this.update();
+  }
+
+  update() {
+    let output = '';
+    let complete = 0;
+    for (const item of this.queue) {
+      if (this.frame >= item.end) {
+        complete++;
+        output += item.to;
+      } else if (this.frame >= item.start) {
+        if (!item.char || Math.random() < 0.35) {
+          item.char = this.chars[Math.floor(Math.random() * this.chars.length)];
+        }
+        output += item.char;
+      } else {
+        output += item.from;
+      }
+    }
+    this.el.textContent = output;
+    if (complete < this.queue.length) {
+      this.frame++;
+      this.raf = requestAnimationFrame(() => this.update());
+    }
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const root = document.querySelector('.finder-hero');
+  if (!root) {
+    return;
+  }
+  const flaps = Array.from(root.querySelectorAll('.finder-flap')).map((el) => ({ el, flap: new FinderFlap(el) }));
+  const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const providers = [
+    { name: 'Google Drive', src: '/img/clouds/google-drive.svg' },
+    { name: 'iCloud Drive', src: '/img/clouds/icloud.svg' },
+    { name: 'OneDrive', src: '/img/clouds/onedrive.svg' },
+    { name: 'Dropbox', src: '/img/clouds/dropbox.svg' },
+  ];
+  const providerName = root.querySelector('[data-finder-provider-name]');
+  const providerIcon = root.querySelector('[data-finder-provider-icon]');
+  if (reducedMotion) {
+    return;
+  }
+  let providerIndex = 0;
+  let locked = true;
+  setInterval(() => {
+    locked = !locked;
+    if (locked && providerName && providerIcon) {
+      providerIndex = (providerIndex + 1) % providers.length;
+      providerName.textContent = providers[providerIndex].name;
+      providerIcon.src = providers[providerIndex].src;
+    }
+    root.classList.toggle('is-locked', locked);
+    flaps.forEach(({ el, flap }, index) => {
+      const text = locked ? el.dataset.locked : el.dataset.unlocked;
+      setTimeout(() => flap.setText(text), index * 140);
+    });
+  }, 5000);
+});
diff --git a/content/for-individuals.de.html b/content/for-individuals.de.html
index 82885156c..81e49ae00 100644
--- a/content/for-individuals.de.html
+++ b/content/for-individuals.de.html
@@ -1,4 +1,6 @@
 ---
 title: "Cryptomator"
 type: for-individuals
+darkNav: true
+flushHero: true
 ---
diff --git a/content/for-individuals.en.html b/content/for-individuals.en.html
index 82885156c..81e49ae00 100644
--- a/content/for-individuals.en.html
+++ b/content/for-individuals.en.html
@@ -1,4 +1,6 @@
 ---
 title: "Cryptomator"
 type: for-individuals
+darkNav: true
+flushHero: true
 ---
diff --git a/content/for-teams.de.html b/content/for-teams.de.html
index ec6251bd3..6379dd8ce 100644
--- a/content/for-teams.de.html
+++ b/content/for-teams.de.html
@@ -1,5 +1,6 @@
 ---
 title: "Cryptomator Hub"
 type: for-teams
+hubNav: true
 aliases: ["/hub"]
 ---
diff --git a/content/for-teams.en.html b/content/for-teams.en.html
index ec6251bd3..6379dd8ce 100644
--- a/content/for-teams.en.html
+++ b/content/for-teams.en.html
@@ -1,5 +1,6 @@
 ---
 title: "Cryptomator Hub"
 type: for-teams
+hubNav: true
 aliases: ["/hub"]
 ---
diff --git a/i18n/de.yaml b/i18n/de.yaml
index 7f9db8e59..6058fbf97 100644
--- a/i18n/de.yaml
+++ b/i18n/de.yaml
@@ -225,13 +225,64 @@
 - id: for_individuals_header_title
   translation: "Deine Daten in der Cloud gehören dir allein"
 - id: for_individuals_header_description
-  translation: "Daten in der Cloud sind oft nicht ausreichend geschützt. Cryptomator verschlüsselt deine Dokumente, Fotos und persönlichen Dateien mit wenigen Klicks – so hast nur du Zugriff. Niemand sonst."
+  translation: "Cryptomator verschlüsselt deine Dokumente, Fotos und persönlichen Dateien mit wenigen Klicks – so hast nur du Zugriff. Niemand sonst."
 - id: for_individuals_header_cta
   translation: "Jetzt herunterladen"
 - id: for_individuals_header_cta_description
   translation: "Verfügbar für Windows, macOS, Linux, Android und iOS."
-- id: for_individuals_header_woman_laptop_alt
-  translation: "Person, die vor einem Laptop sitzt, während Cryptobot neben der Person auf den Laptop zeigt"
+- id: for_individuals_header_link
+  translation: "So funktioniert's"
+
+- id: for_individuals_finder_locked_path_suffix
+  translation: " › Tresor"
+- id: for_individuals_finder_unlocked_path
+  translation: "Dein Laufwerk › Tresor"
+- id: for_individuals_finder_col_name
+  translation: "Name"
+- id: for_individuals_finder_col_size
+  translation: "Größe"
+- id: for_individuals_finder_col_modified
+  translation: "Geändert"
+- id: for_individuals_finder_file_1_name
+  translation: "Urlaubsfotos"
+- id: for_individuals_finder_file_1_modified
+  translation: "Heute, 09:41"
+- id: for_individuals_finder_file_2_name
+  translation: "Steuererklärung-2025.pdf"
+- id: for_individuals_finder_file_2_size
+  translation: "2,4 MB"
+- id: for_individuals_finder_file_2_modified
+  translation: "Gestern, 18:07"
+- id: for_individuals_finder_file_3_name
+  translation: "Reisepass-Scan.jpg"
+- id: for_individuals_finder_file_3_size
+  translation: "1,8 MB"
+- id: for_individuals_finder_file_3_modified
+  translation: "12.07.2026"
+- id: for_individuals_finder_file_4_name
+  translation: "Finanzen.xlsx"
+- id: for_individuals_finder_file_4_size
+  translation: "96 KB"
+- id: for_individuals_finder_file_4_modified
+  translation: "08.07.2026"
+- id: for_individuals_finder_file_5_name
+  translation: "Mietvertrag.pdf"
+- id: for_individuals_finder_file_5_size
+  translation: "640 KB"
+- id: for_individuals_finder_file_5_modified
+  translation: "27.06.2026"
+- id: for_individuals_finder_file_7_name
+  translation: "Bewerbung.docx"
+- id: for_individuals_finder_file_7_size
+  translation: "88 KB"
+- id: for_individuals_finder_file_7_modified
+  translation: "05.06.2026"
+- id: for_individuals_hero_pill
+  translation: "Ende-zu-Ende verschlüsselt – nur du hast den Schlüssel"
+- id: for_individuals_finder_items
+  translation: "6 Objekte"
+- id: for_individuals_stats_title
+  translation: "Vertraut von Millionen weltweit"
 
 - id: for_individuals_downloads_title
   translation: "3M+"
@@ -403,15 +454,49 @@
 - id: hub_header_title
   translation: "Souveräne Zusammenarbeit in der Cloud"
 - id: hub_header_description
-  translation: "Cryptomator Hub verschlüsselt deine vertraulichen Unternehmensdaten wie personenbezogene Kundendaten oder interne Geschäftsdokumente – DSGVO-konform, einfach und unter deiner Kontrolle."
+  translation: "Cryptomator Hub verschlüsselt die vertraulichen Daten deines Unternehmens – DSGVO-konform, einfach und unter deiner Kontrolle."
 - id: hub_header_managed_cta
-  translation: "Jetzt anmelden"
+  translation: "Kostenlos testen"
 - id: hub_header_managed_cta_description
   translation: "Startet eure kostenlose 30-Tage-Testversion noch heute, keine Kreditkarte erforderlich."
 - id: hub_header_kicker_early_access
   translation: "Hub 2.0.0 Early Access*"
 - id: hub_header_early_access_note
   translation: "<a class=\"text-link\" href=\"https://docs.cryptomator.org/hub/early-access/\" target=\"_blank\">Early Access</a> beinhaltet brandneue Features und eine verlängerte kostenlose 60-Tage-Testphase."
+- id: hub_header_link
+  translation: "So funktioniert's"
+- id: hub_hero_scene_vault
+  translation: "Gemeinsamer Tresor"
+- id: hub_hero_card_vault_name
+  translation: "Finanzen"
+- id: hub_hero_group_name
+  translation: "Team Buchhaltung"
+- id: hub_hero_group_subtitle
+  translation: "Gruppe · 8 Mitglieder"
+- id: hub_hero_tile_audit
+  translation: "Audit-Log"
+- id: hub_hero_tile_devices
+  translation: "Geräte"
+- id: hub_hero_ad_row_users
+  translation: "128 Benutzer"
+- id: hub_hero_ad_row_groups
+  translation: "12 Gruppen"
+- id: hub_hero_node_revoked
+  translation: "Zugriff entzogen"
+- id: hub_hero_audit_row_1
+  translation: "Zugriff erteilt · Lena"
+- id: hub_hero_audit_row_2
+  translation: "Gerät registriert · Jonas"
+- id: hub_hero_audit_row_3
+  translation: "Zugriff entzogen · Michael"
+- id: hub_hero_row_owner_desc
+  translation: "CFO"
+- id: hub_hero_tag_external
+  translation: "Extern"
+- id: hub_hero_tag_owner
+  translation: "Owner"
+- id: hub_hero_row_external_desc
+  translation: "Steuerberaterin"
 - id: hub_header_group_magic_alt
   translation: "Cryptobot verbindet eine Gruppe von Menschen mit seinen magischen Fähigkeiten durch Zero-Knowledge-Verschlüsselung"
 
@@ -438,6 +523,12 @@
   translation: "Ladet euren Tresor über Cryptomator Hub herunter und öffnet ihn direkt in der Cryptomator App als bestehenden Tresor. Statt ein Passwort einzugeben, erfolgt die Authentifizierung sicher über Hub – so bleibt alles geschützt und trotzdem komfortabel zugänglich."
 - id: hub_workflow_step_3_alt
   translation: "Cryptomator-App-Oberfläche mit mehreren Tresoren"
+- id: hub_workflow_step_4_title
+  translation: "4. Lückenlos nachvollziehbar"
+- id: hub_workflow_step_4_description
+  translation: "Wer hat wann welchen Tresor entsperrt, ein Gerät registriert oder Zugriff erhalten? Das Audit-Log protokolliert alle sicherheitsrelevanten Ereignisse. Compliance-Nachweise gibt es damit auf Knopfdruck."
+- id: hub_workflow_step_4_alt
+  translation: "Audit-Log in Cryptomator Hub mit protokollierten Ereignissen"
 
 - id: hub_features_title
   translation: "Warum Cryptomator Hub?"
@@ -719,6 +810,38 @@
 - id: hub_demo_contact_us_button
   translation: "Kontaktiere uns"
 
+# Hub CE Registration
+- id: hub_ce_registration_description
+  translation: "Registriere deine Cryptomator-Hub-Instanz für eine kostenlose Community-Edition-Lizenz."
+
+- id: hub_ce_registration_steps_title
+  translation: "Schritt <span x-text=\"feedbackData.currentStep + 1\"></span> von <span x-text=\"steps.length\"></span>"
+- id: hub_ce_registration_steps_next
+  translation: "Weiter"
+
+- id: hub_ce_registration_step_1_nav_title
+  translation: "E-Mail-Adresse"
+- id: hub_ce_registration_step_1_title
+  translation: "Wie lautet deine E-Mail-Adresse?"
+- id: hub_ce_registration_step_1_email_placeholder
+  translation: "E-Mail-Adresse"
+
+- id: hub_ce_registration_step_2_confirmation_nav_title
+  translation: "Bestätigung"
+- id: hub_ce_registration_step_2_confirmation_title
+  translation: "Bitte bestätige deine E-Mail-Adresse"
+- id: hub_ce_registration_step_2_instructions
+  translation: "Wir senden eine Bestätigungs-E-Mail an <span x-text=\"submitData.email\"></span>"
+- id: hub_ce_registration_step_2_check_email
+  translation: "Bitte prüfe deine E-Mails."
+
+- id: hub_ce_registration_step_3_license_nav_title
+  translation: "Lizenzschlüssel"
+- id: hub_ce_registration_step_3_license_title
+  translation: "Deine Community-Edition-Lizenz"
+- id: hub_ce_registration_step_3_success
+  translation: "Deine E-Mail-Adresse wurde erfolgreich verifiziert. Kehre zu deiner Hub-Instanz zurück, sie holt deinen Lizenzschlüssel automatisch ab."
+
 # Hub Managed
 - id: hub_managed_description
   translation: "Beantrage Zugang zu einer Managed-Instanz von Cryptomator Hub und hol dein Team mit der clientseitigen Verschlüsselung für deinen Cloud-Speicher an Bord."
diff --git a/i18n/en.yaml b/i18n/en.yaml
index 5bff01f76..0cdf0f71e 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -225,13 +225,64 @@
 - id: for_individuals_header_title
   translation: "Keep your cloud data truly yours"
 - id: for_individuals_header_description
-  translation: "Data in the cloud is often not sufficiently protected. Cryptomator encrypts your documents, photos, and personal files with just a few clicks – ensuring that only you have access. No one else."
+  translation: "Cryptomator encrypts your documents, photos, and personal files in just a few clicks – so only you have access. No one else."
 - id: for_individuals_header_cta
   translation: "Download Now"
 - id: for_individuals_header_cta_description
   translation: "Available for Windows, macOS, Linux, Android, and iOS."
-- id: for_individuals_header_woman_laptop_alt
-  translation: "Person sitting in front of a laptop while Cryptobot next to the person is pointing at the laptop"
+- id: for_individuals_header_link
+  translation: "See how it works"
+
+- id: for_individuals_finder_locked_path_suffix
+  translation: " › Vault"
+- id: for_individuals_finder_unlocked_path
+  translation: "Your Drive › Vault"
+- id: for_individuals_finder_col_name
+  translation: "Name"
+- id: for_individuals_finder_col_size
+  translation: "Size"
+- id: for_individuals_finder_col_modified
+  translation: "Date Modified"
+- id: for_individuals_finder_file_1_name
+  translation: "Vacation Photos"
+- id: for_individuals_finder_file_1_modified
+  translation: "Today, 9:41 AM"
+- id: for_individuals_finder_file_2_name
+  translation: "Tax-Return-2025.pdf"
+- id: for_individuals_finder_file_2_size
+  translation: "2.4 MB"
+- id: for_individuals_finder_file_2_modified
+  translation: "Yesterday, 6:07 PM"
+- id: for_individuals_finder_file_3_name
+  translation: "Passport-Scan.jpg"
+- id: for_individuals_finder_file_3_size
+  translation: "1.8 MB"
+- id: for_individuals_finder_file_3_modified
+  translation: "07/12/2026"
+- id: for_individuals_finder_file_4_name
+  translation: "Finances.xlsx"
+- id: for_individuals_finder_file_4_size
+  translation: "96 KB"
+- id: for_individuals_finder_file_4_modified
+  translation: "07/08/2026"
+- id: for_individuals_finder_file_5_name
+  translation: "Lease-Agreement.pdf"
+- id: for_individuals_finder_file_5_size
+  translation: "640 KB"
+- id: for_individuals_finder_file_5_modified
+  translation: "06/27/2026"
+- id: for_individuals_finder_file_7_name
+  translation: "Resume.docx"
+- id: for_individuals_finder_file_7_size
+  translation: "88 KB"
+- id: for_individuals_finder_file_7_modified
+  translation: "06/05/2026"
+- id: for_individuals_hero_pill
+  translation: "End-to-end encrypted – only you hold the key"
+- id: for_individuals_finder_items
+  translation: "6 items"
+- id: for_individuals_stats_title
+  translation: "Trusted by millions worldwide"
 
 - id: for_individuals_downloads_title
   translation: "3M+"
@@ -403,15 +454,49 @@
 - id: hub_header_title
   translation: "Secure collaboration in the cloud"
 - id: hub_header_description
-  translation: "Cryptomator Hub encrypts your company's confidential data, from personal customer information to internal documents – fully GDPR-compliant, simple to use, and always under your control."
+  translation: "Cryptomator Hub encrypts your company's confidential data – GDPR-compliant, simple to use, and always under your control."
 - id: hub_header_managed_cta
-  translation: "Sign Up Now"
+  translation: "Start Free Trial"
 - id: hub_header_managed_cta_description
   translation: "Start your free 30-day trial today, no credit card required."
 - id: hub_header_kicker_early_access
   translation: "Hub 2.0.0 Early Access*"
 - id: hub_header_early_access_note
   translation: "<a class=\"text-link\" href=\"https://docs.cryptomator.org/hub/early-access/\" target=\"_blank\">Early access</a> includes brand new features and an extended 60-day free trial."
+- id: hub_header_link
+  translation: "See how it works"
+- id: hub_hero_scene_vault
+  translation: "Shared Vault"
+- id: hub_hero_card_vault_name
+  translation: "Finance"
+- id: hub_hero_group_name
+  translation: "Accounting Team"
+- id: hub_hero_group_subtitle
+  translation: "Group · 8 members"
+- id: hub_hero_tile_audit
+  translation: "Audit Log"
+- id: hub_hero_tile_devices
+  translation: "Devices"
+- id: hub_hero_ad_row_users
+  translation: "128 users"
+- id: hub_hero_ad_row_groups
+  translation: "12 groups"
+- id: hub_hero_node_revoked
+  translation: "Access revoked"
+- id: hub_hero_audit_row_1
+  translation: "Access granted · Lena"
+- id: hub_hero_audit_row_2
+  translation: "Device registered · Jonas"
+- id: hub_hero_audit_row_3
+  translation: "Access revoked · Michael"
+- id: hub_hero_row_owner_desc
+  translation: "CFO"
+- id: hub_hero_tag_external
+  translation: "External"
+- id: hub_hero_tag_owner
+  translation: "Owner"
+- id: hub_hero_row_external_desc
+  translation: "Tax Advisor"
 - id: hub_header_group_magic_alt
   translation: "Cryptobot connects a group of people with its magical abilities through zero-knowledge encryption"
 
@@ -438,6 +523,12 @@
   translation: "Download your vault via Cryptomator Hub and open it directly in the Cryptomator app as an existing vault. Instead of entering a password, authentication is securely handled through Hub – keeping everything protected while ensuring easy access."
 - id: hub_workflow_step_3_alt
   translation: "Cryptomator app interface with multiple vaults"
+- id: hub_workflow_step_4_title
+  translation: "4. Fully Traceable"
+- id: hub_workflow_step_4_description
+  translation: "Who unlocked which vault, registered a device, or was granted access, and when? The audit log records all security-relevant events and gives you compliance evidence at the push of a button."
+- id: hub_workflow_step_4_alt
+  translation: "Audit log in Cryptomator Hub with recorded events"
 
 - id: hub_features_title
   translation: "Why Cryptomator Hub?"
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 8dee484d9..4d85a931c 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -49,14 +49,7 @@
       <meta property="og:locale:alternate" content="{{ replace .Language.Locale "-" "_" }}" />
     {{ end }}
     <meta name="apple-itunes-app" content="app-id=1560822163">
-    {{ if hugo.IsDevelopment }}
-      {{ $css := resources.Get "css/main.css" | css.TailwindCSS }}
-      <link rel="stylesheet" href="{{ $css.RelPermalink }}" media="screen" />
-    {{ else }}
-      {{ $tailwindOpts := dict "minify" true }}
-      {{ $css := resources.Get "css/main.css" | css.TailwindCSS $tailwindOpts | fingerprint }}
-      <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}" media="screen" />
-    {{ end }}
+    {{ partial "page-css.html" "css/main.css" }}
     {{ block "styles" . }}
       <!-- optional additional page-specific stylesheets, loaded after the main stylesheet -->
     {{ end }}
diff --git a/layouts/for-individuals/single.html b/layouts/for-individuals/single.html
index b871b534a..90fc79a05 100644
--- a/layouts/for-individuals/single.html
+++ b/layouts/for-individuals/single.html
@@ -1,40 +1,159 @@
 {{ define "preloads" }}
   <link rel="prefetch" href="{{ .Site.LanguagePrefix }}/downloads/">
+  <link rel="preload" fetchpriority="high" as="image" href="/img/home/header-background.avif" type="image/avif">
+  {{- /* Rotation icons for the finder hero; google-drive.svg is the initial src in the markup. */ -}}
+  <link rel="preload" fetchpriority="low" as="image" href="/img/clouds/icloud.svg" type="image/svg+xml">
+  <link rel="preload" fetchpriority="low" as="image" href="/img/clouds/onedrive.svg" type="image/svg+xml">
+  <link rel="preload" fetchpriority="low" as="image" href="/img/clouds/dropbox.svg" type="image/svg+xml">
   {{ partial "altcha-css.html" . }}
 {{ end }}
+{{ define "styles" }}
+  {{ partial "page-css.html" "css/finder-hero.css" }}
+{{ end }}
 {{ define "main" }}
-  <section class="flex items-center md:min-h-[66vh]">
-    <header class="container flex items-center py-12 md:py-16 lg:py-20">
-      <div class="hidden pr-6 md:block md:w-1/3 lg:w-2/5">
-        <img data-src="/img/home/woman-laptop.png" class="lazyload object-scale-down mx-auto lg:w-3/4" alt="{{ i18n "for_individuals_header_woman_laptop_alt" . }}"/>
-      </div>
-      <div class="w-full md:w-2/3 lg:w-3/5">
-        <div class="flex flex-wrap items-center gap-4 mb-4">
-          <div class="flex items-center">
-            <img src="/img/logo.svg" class="h-8 aspect-1110/942" alt="Logo"/>
-            <span class="font-headline font-bold text-primary ml-2 pb-px">CRYPTOMATOR</span>
+  {{- /* baseof emits no padding for flush heroes, so the hero self-clears the fixed nav + banners (mirrors index.html). */ -}}
+  {{- $showWebinarBanner := .Scratch.Get "webinarBannerActive" -}}
+  {{- $showSaleBanner := .Scratch.Get "saleBannerActive" -}}
+  {{- $showAnniversaryBanner := .Scratch.Get "anniversaryBannerActive" -}}
+  {{- $showThinStrip := or $showWebinarBanner $showSaleBanner -}}
+  {{- $heroTopPad := "pt-16 md:pt-20" -}}
+  {{- if and $showThinStrip $showAnniversaryBanner -}}
+    {{- $heroTopPad = "pt-40 md:pt-40" -}}
+  {{- else if or $showThinStrip $showAnniversaryBanner -}}
+    {{- $heroTopPad = "pt-28 md:pt-28" -}}
+  {{- end -}}
+  {{- /* The webinar banner hides itself client-side when no webinar is live/upcoming; collapse its reserved padding to match (mirrors baseof.html). */ -}}
+  {{- $webinarIsThinStrip := and $showWebinarBanner (not $showSaleBanner) -}}
+  {{- $heroPadNoStrip := cond $showAnniversaryBanner "pt-28 md:pt-28" "pt-16 md:pt-20" -}}
+  <header class="header-bg bg-dark bg-center bg-repeat-x relative{{ if not $webinarIsThinStrip }} {{ $heroTopPad }}{{ end }}"{{ if $webinarIsThinStrip }} :class="webinar.state === 'none' ? '{{ $heroPadNoStrip }}' : '{{ $heroTopPad }}'"{{ end }}>
+    <div class="container flex flex-col items-center text-center text-white pt-6 md:pt-8">
+    {{ if .Site.Params.paddleDesktopSalePriceId }}
+    <div class="px-4 py-1 rounded-full text-xs lg:text-sm font-medium bg-red-600 text-white mb-6">
+      {{ i18n "for_individuals_header_kicker_sale" . }}
+    </div>
+    {{ end }}
+    <h1 class="font-headline font-medium text-4xl md:text-5xl leading-tight tracking-tight text-balance mb-5">{{ i18n "for_individuals_header_title" . | safeHTML }}</h1>
+    <p class="text-lg leading-relaxed text-balance text-gray-300 max-w-2xl mb-6">{{ i18n "for_individuals_header_description" . | safeHTML }}</p>
+    <div class="flex flex-col md:flex-row items-center gap-4 md:gap-6 mb-4">
+      <a href="{{ .Site.LanguagePrefix }}/downloads/" role="button" class="btn btn-primary text-lg min-w-[16rem] py-3" data-umami-event="for-individuals-header-cta">{{ i18n "for_individuals_header_cta" . }}</a>
+      <a href="#how-it-works" class="group inline-flex items-center gap-1.5 text-sm text-gray-300 no-underline hover:text-white" data-umami-event="for-individuals-header-how-it-works">
+        {{ i18n "for_individuals_header_link" . }}
+        <i class="fa-solid fa-arrow-right text-xs group-hover:translate-x-1 transition-transform duration-200" aria-hidden="true"></i>
+      </a>
+    </div>
+    <p class="text-sm text-gray-400">{{ i18n "for_individuals_header_cta_description" . | safeHTML }}</p>
+    {{ if .Site.Params.paddleDesktopSalePriceId }}
+    <p class="text-sm text-gray-400 mt-2">* {{ i18n "pricing_discount_note" }}</p>
+    {{ end }}
+    </div>
+
+    <svg class="absolute -bottom-px inset-x-0 w-full h-16 md:h-24 text-gray-100 pointer-events-none" viewBox="0 0 1440 120" preserveAspectRatio="none" fill="currentColor" aria-hidden="true">
+      <path d="M0,88 C320,112 640,56 920,68 C1140,78 1300,96 1440,78 L1440,120 L0,120 Z"/>
+    </svg>
+    {{- $finderRow := "grid grid-cols-[minmax(0,1fr)_4.5rem_6.5rem] md:grid-cols-[minmax(0,1fr)_5rem_8.5rem] gap-3 items-center px-5" -}}
+    <div class="finder-hero is-locked relative z-10 mt-16 md:mt-20 -mb-20 md:-mb-24 w-full max-w-xl mx-auto px-4 md:px-0">
+      <div class="relative text-left">
+        <div class="absolute inset-x-0 -top-12 flex justify-center gap-10 translate-x-12 pointer-events-none" aria-hidden="true">
+          <div class="relative w-20 h-24 rounded-md bg-white shadow-md ring-1 ring-black/5 -rotate-6 p-2.5 [clip-path:polygon(0_0,calc(100%-14px)_0,100%_14px,100%_100%,0_100%)]">
+            <span class="absolute top-0 right-0 w-3.5 h-3.5 bg-gray-200 rounded-bl-md"></span>
+            <div class="h-1.5 w-9 rounded bg-gray-200 mb-2 mt-1"></div>
+            <div class="h-1.5 w-12 rounded bg-gray-100 mb-2"></div>
+            <div class="h-1.5 w-7 rounded bg-gray-100 mb-2"></div>
+            <div class="h-1.5 w-10 rounded bg-gray-100"></div>
           </div>
-          {{ if .Site.Params.paddleDesktopSalePriceId }}
-          <div class="px-4 py-1 rounded-full text-xs lg:text-sm font-medium bg-red-600 text-white">
-            {{ i18n "for_individuals_header_kicker_sale" . }}
+          <div class="relative w-20 h-24 rounded-md bg-white shadow-md ring-1 ring-black/5 rotate-3 mt-1.5 p-2.5">
+            <span class="absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-white text-[9px] ring-2 ring-white" aria-hidden="true"><i class="fa-solid fa-lock"></i></span>
+            <p class="font-mono text-[7px] leading-[1.8] tracking-wide break-all text-center m-0 mt-1"><span class="text-gray-500">Zk5r7q.c9r</span><br/><span class="text-gray-400">9M3t8J1cRw</span><br/><span class="text-gray-400">4xA6vB_pZk</span></p>
           </div>
-          {{ end }}
         </div>
-        <h1 class="font-h1 mb-6">{{ i18n "for_individuals_header_title" . | safeHTML }}</h1>
-        <p class="lead mb-6">{{ i18n "for_individuals_header_description" . | safeHTML }}</p>
-        <div class="flex flex-col md:flex-row gap-6 mb-4">
-          <a href="{{ .Site.LanguagePrefix }}/downloads/" role="button" class="btn btn-primary text-lg w-full md:w-64" data-umami-event="for-individuals-header-cta">{{ i18n "for_individuals_header_cta" . }}</a>
+
+        <div class="relative z-10 rounded-2xl bg-white shadow-xl ring-1 ring-black/5 overflow-hidden">
+          <div class="flex items-center gap-1.5 px-5 pt-4" aria-hidden="true">
+            <span class="h-2.5 w-2.5 rounded-full bg-[#ff5f57]"></span>
+            <span class="h-2.5 w-2.5 rounded-full bg-[#febc2e]"></span>
+            <span class="h-2.5 w-2.5 rounded-full bg-[#28c840]"></span>
+          </div>
+          <div class="flex items-center gap-3 px-5 pt-3 pb-3.5 border-b border-gray-100">
+            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gray-100">
+              <span class="finder-swap-icon"><img src="/img/clouds/google-drive.svg" class="finder-when-locked" data-finder-provider-icon alt="" aria-hidden="true"/><img src="/img/logo.svg" class="finder-when-unlocked" alt="" aria-hidden="true"/></span>
+            </span>
+            <div class="min-w-0">
+              <span class="finder-path min-w-0 font-headline font-medium text-gray-800 leading-tight">
+                <span class="finder-path-inner inline-grid">
+                  <span class="finder-path-front col-start-1 row-start-1 truncate"><span data-finder-provider-name>Google Drive</span>{{ i18n "for_individuals_finder_locked_path_suffix" }}</span>
+                  <span class="finder-path-back col-start-1 row-start-1 truncate">{{ i18n "for_individuals_finder_unlocked_path" }}</span>
+                </span>
+              </span>
+              <p class="text-xs text-gray-500 leading-tight">{{ i18n "for_individuals_finder_items" }}</p>
+            </div>
+            <span class="finder-swap-icon ml-auto text-gray-400"><i class="fa-solid fa-lock finder-when-locked" aria-hidden="true"></i><i class="fa-solid fa-lock-open finder-when-unlocked" aria-hidden="true"></i></span>
+          </div>
+          <div class="{{ $finderRow }} py-1.5 text-xs text-gray-500 border-b border-gray-100">
+            <span>{{ i18n "for_individuals_finder_col_name" }}</span>
+            <span class="text-right">{{ i18n "for_individuals_finder_col_size" }}</span>
+            <span>{{ i18n "for_individuals_finder_col_modified" }}</span>
+          </div>
+          <ul class="divide-y divide-gray-100 text-sm text-gray-700 pb-4">
+            <li class="{{ $finderRow }} py-2.5">
+              <span class="flex items-center gap-2.5 min-w-0">
+                <span class="finder-swap-icon"><i class="fa-solid fa-folder text-gray-400 finder-when-locked" aria-hidden="true"></i><i class="fa-solid fa-folder text-secondary finder-when-unlocked" aria-hidden="true"></i></span>
+                <span class="finder-flap finder-flap-name truncate" data-locked="T6KQ3ZVW9J2RXA5M4YD7CB" data-unlocked="{{ i18n "for_individuals_finder_file_1_name" }}">T6KQ3ZVW9J2RXA5M4YD7CB</span>
+              </span>
+              <span class="text-right text-gray-500">&mdash;</span>
+              <span class="finder-flap text-gray-500 truncate" data-locked="&mdash;" data-unlocked="{{ i18n "for_individuals_finder_file_1_modified" }}">&mdash;</span>
+            </li>
+            <li class="{{ $finderRow }} py-2.5">
+              <span class="flex items-center gap-2.5 min-w-0">
+                <span class="finder-swap-icon"><i class="fa-solid fa-file text-gray-400 finder-when-locked" aria-hidden="true"></i><i class="fa-solid fa-file-pdf text-red-400 finder-when-unlocked" aria-hidden="true"></i></span>
+                <span class="finder-flap finder-flap-name truncate" data-locked="ZK5R7Q2W9M3T8J1C4XA6VB.c9r" data-unlocked="{{ i18n "for_individuals_finder_file_2_name" }}">ZK5R7Q2W9M3T8J1C4XA6VB.c9r</span>
+              </span>
+              <span class="finder-flap text-right text-gray-500" data-locked="&mdash;" data-unlocked="{{ i18n "for_individuals_finder_file_2_size" }}">&mdash;</span>
+              <span class="finder-flap text-gray-500 truncate" data-locked="&mdash;" data-unlocked="{{ i18n "for_individuals_finder_file_2_modified" }}">&mdash;</span>
+            </li>
+            <li class="{{ $finderRow }} py-2.5">
+              <span class="flex items-center gap-2.5 min-w-0">
+                <span class="finder-swap-icon"><i class="fa-solid fa-file text-gray-400 finder-when-locked" aria-hidden="true"></i><i class="fa-solid fa-file-image text-secondary finder-when-unlocked" aria-hidden="true"></i></span>
+                <span class="finder-flap finder-flap-name truncate" data-locked="P8W2NM4KQ7ZR5TC1J9XY3A.c9r" data-unlocked="{{ i18n "for_individuals_finder_file_3_name" }}">P8W2NM4KQ7ZR5TC1J9XY3A.c9r</span>
+              </span>
+              <span class="finder-flap text-right text-gray-500" data-locked="&mdash;" data-unlocked="{{ i18n "for_individuals_finder_file_3_size" }}">&mdash;</span>
+              <span class="finder-flap text-gray-500 truncate" data-locked="&mdash;" data-unlocked="{{ i18n "for_individuals_finder_file_3_modified" }}">&mdash;</span>
+            </li>
+            <li class="{{ $finderRow }} py-2.5">
+              <span class="flex items-center gap-2.5 min-w-0">
+                <span class="finder-swap-icon"><i class="fa-solid fa-file text-gray-400 finder-when-locked" aria-hidden="true"></i><i class="fa-solid fa-file-excel text-primary finder-when-unlocked" aria-hidden="true"></i></span>
+                <span class="finder-flap finder-flap-name truncate" data-locked="C4XJ9A1MT5ZK2Q8RW6VN0B.c9r" data-unlocked="{{ i18n "for_individuals_finder_file_4_name" }}">C4XJ9A1MT5ZK2Q8RW6VN0B.c9r</span>
+              </span>
+              <span class="finder-flap text-right text-gray-500" data-locked="&mdash;" data-unlocked="{{ i18n "for_individuals_finder_file_4_size" }}">&mdash;</span>
+              <span class="finder-flap text-gray-500 truncate" data-locked="&mdash;" data-unlocked="{{ i18n "for_individuals_finder_file_4_modified" }}">&mdash;</span>
+            </li>
+            <li class="{{ $finderRow }} py-2.5">
+              <span class="flex items-center gap-2.5 min-w-0">
+                <span class="finder-swap-icon"><i class="fa-solid fa-file text-gray-400 finder-when-locked" aria-hidden="true"></i><i class="fa-solid fa-file-pdf text-red-400 finder-when-unlocked" aria-hidden="true"></i></span>
+                <span class="finder-flap finder-flap-name truncate" data-locked="V0BN6W3RQ8ZT2MK5AJ7XC9.c9r" data-unlocked="{{ i18n "for_individuals_finder_file_5_name" }}">V0BN6W3RQ8ZT2MK5AJ7XC9.c9r</span>
+              </span>
+              <span class="finder-flap text-right text-gray-500" data-locked="&mdash;" data-unlocked="{{ i18n "for_individuals_finder_file_5_size" }}">&mdash;</span>
+              <span class="finder-flap text-gray-500 truncate" data-locked="&mdash;" data-unlocked="{{ i18n "for_individuals_finder_file_5_modified" }}">&mdash;</span>
+            </li>
+            <li class="{{ $finderRow }} py-2.5">
+              <span class="flex items-center gap-2.5 min-w-0">
+                <span class="finder-swap-icon"><i class="fa-solid fa-file text-gray-400 finder-when-locked" aria-hidden="true"></i><i class="fa-solid fa-file-word text-tertiary2 finder-when-unlocked" aria-hidden="true"></i></span>
+                <span class="finder-flap finder-flap-name truncate" data-locked="X9AT4CJ1WQ6ZK3RB8MV2N5.c9r" data-unlocked="{{ i18n "for_individuals_finder_file_7_name" }}">X9AT4CJ1WQ6ZK3RB8MV2N5.c9r</span>
+              </span>
+              <span class="finder-flap text-right text-gray-500" data-locked="&mdash;" data-unlocked="{{ i18n "for_individuals_finder_file_7_size" }}">&mdash;</span>
+              <span class="finder-flap text-gray-500 truncate" data-locked="&mdash;" data-unlocked="{{ i18n "for_individuals_finder_file_7_modified" }}">&mdash;</span>
+            </li>
+          </ul>
+        </div>
+
+        <div class="absolute z-20 -bottom-4 left-1/2 -translate-x-1/2 inline-flex items-center gap-2 w-max max-w-[calc(100vw-2.5rem)] justify-center text-center md:whitespace-nowrap rounded-full bg-white px-4 py-2 text-xs font-medium text-gray-700 shadow-lg ring-1 ring-black/5">
+          <i class="fa-solid fa-key text-primary" aria-hidden="true"></i> {{ i18n "for_individuals_hero_pill" }}
+        </div>
       </div>
-      <p class="font-p">{{ i18n "for_individuals_header_cta_description" . | safeHTML }}</p>
-      {{ if .Site.Params.paddleDesktopSalePriceId }}
-      <p class="text-sm mt-6">
-        * {{ i18n "pricing_discount_note" }}
-      </p>
-      {{ end }}
-    </header>
-  </section>
+    </div>
+  </header>
 
-  <section class="container py-12 text-center">
+  <section class="container pt-32 md:pt-40 pb-16 md:pb-20 text-center">
+    <h2 class="text-sm font-medium uppercase tracking-widest text-gray-500 mb-10">{{ i18n "for_individuals_stats_title" }}</h2>
     <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
       <div>
         <h2 class="font-bold text-2xl lg:text-3xl leading-relaxed">{{ i18n "for_individuals_downloads_title" }}</h2>
@@ -59,7 +178,10 @@ <h2 class="font-bold text-2xl lg:text-3xl leading-relaxed">{{ i18n "for_individu
     </div>
   </section>
 
-  <section class="container py-12">
+  <section id="how-it-works" class="mt-10 md:mt-12 scroll-mt-24">
+    <div class="h-12 md:h-16 bg-gradient-to-b from-gray-100 to-white" aria-hidden="true"></div>
+    <div class="bg-white">
+    <div class="container pb-16 md:pb-20">
     <div class="flex flex-wrap mb-24">
       <figure class="w-full mb-12 md:w-1/2 md:mb-0 md:pr-6">
         <img data-src="/img/for-individuals/screenshot-1.png" class="lazyload w-full h-auto" alt="{{i18n "for_individuals_workflow_step_1_alt" }}"/>
@@ -89,6 +211,9 @@ <h2 class="font-h2 mb-6">{{ i18n "for_individuals_workflow_step_3_title" }}</h2>
         <p class="lead">{{ i18n "for_individuals_workflow_step_3_description" }}</p>
       </div>
     </div>
+    </div>
+    </div>
+    <div class="h-16 md:h-24 bg-gradient-to-t from-gray-100 to-white" aria-hidden="true"></div>
   </section>
 
   <section class="container py-12">
@@ -213,6 +338,8 @@ <h2 id="newsletter" class="font-h2 mb-4">{{ i18n "home_newsletter_title" . }}</h
 {{ end }}
 {{ define "script" }}
   {{ if hugo.IsDevelopment }}
+    {{ $finderJs := resources.Get "js/finder-hero.js" }}
+    <script type="text/javascript" src="{{ $finderJs.RelPermalink }}" defer></script>
     {{ $newsletterJs := resources.Get "js/newsletter.js" }}
     <script type="text/javascript" src="{{ $newsletterJs.RelPermalink }}" defer></script>
     {{ $altchaJs := resources.Get "js/altcha/altcha.js" }}
@@ -220,6 +347,8 @@ <h2 id="newsletter" class="font-h2 mb-4">{{ i18n "home_newsletter_title" . }}</h
     {{ $altchaWorkerJs := resources.Get "js/altcha/worker.js" }}
     <script type="module" src="{{ $altchaWorkerJs.RelPermalink }}" defer></script>
   {{ else }}
+    {{ $finderJs := resources.Get "js/finder-hero.js" | minify | fingerprint }}
+    <script type="text/javascript" src="{{ $finderJs.RelPermalink }}" integrity="{{ $finderJs.Data.Integrity }}" defer></script>
     {{ $newsletterJs := resources.Get "js/newsletter.js" | minify | fingerprint }}
     <script type="text/javascript" src="{{ $newsletterJs.RelPermalink }}" integrity="{{ $newsletterJs.Data.Integrity }}" defer></script>
     {{ $altchaJs := resources.Get "js/altcha/altcha.js" }}
diff --git a/layouts/for-teams/single.html b/layouts/for-teams/single.html
index 49f66c73e..49cfeca41 100644
--- a/layouts/for-teams/single.html
+++ b/layouts/for-teams/single.html
@@ -3,34 +3,156 @@
   <link rel="prefetch" href="{{ .Site.LanguagePrefix }}/hub/self-hosted/">
   {{ partial "altcha-css.html" . }}
 {{ end }}
+{{ define "styles" }}
+  {{ partial "page-css.html" "css/hub-scene.css" }}
+{{ end }}
 {{ define "main" }}
-  <section class="flex items-center md:min-h-[66vh]">
-    <header class="container flex items-center py-12 md:py-16 lg:py-20">
-      <div class="hidden pr-6 md:block md:w-1/3 lg:w-2/5">
-        <img data-src="/img/hub/group-magic.png" class="lazyload object-scale-down mx-auto lg:w-3/4" alt="{{ i18n "hub_header_group_magic_alt" . }}"/>
-      </div>
-      <div class="w-full md:w-2/3 lg:w-3/5">
-        <div class="flex flex-wrap items-center gap-4 mb-4">
-          <div class="flex items-center">
-            <img src="/img/zero-knowledge-bot.svg" class="h-8 aspect-988/877" alt="Logo"/>
-            <span class="font-headline font-bold text-primary ml-2 pb-px">CRYPTOMATOR HUB</span>
+  <div class="header-bg-hub relative overflow-x-clip pb-24 md:pb-32">
+  <header class="container flex flex-col items-center text-center pt-10 md:pt-12">
+    <div class="px-4 py-1 rounded-full text-xs lg:text-sm font-medium bg-red-600 text-white mb-6">
+      {{ i18n "hub_header_kicker_early_access" . }}
+    </div>
+    <h1 class="font-headline font-medium text-4xl md:text-5xl leading-tight tracking-tight text-balance text-gray-800 mb-5">{{ i18n "hub_header_title" . | safeHTML }}</h1>
+    <p class="text-lg leading-relaxed text-balance text-gray-600 max-w-2xl mb-6">{{ i18n "hub_header_description" . | safeHTML }}</p>
+    <div class="flex flex-col md:flex-row items-center gap-4 md:gap-6 mb-4">
+      <a href="{{ .Site.LanguagePrefix }}/hub/managed/" role="button" class="btn btn-tertiary2 text-lg min-w-[16rem] py-3" data-umami-event="hub-header-managed-cta">{{ i18n "hub_header_managed_cta" . }}</a>
+      <a href="#introduction" class="group inline-flex items-center gap-1.5 text-sm text-gray-600 no-underline hover:text-tertiary2" data-umami-event="hub-header-how-it-works">
+        {{ i18n "hub_header_link" . }}
+        <i class="fa-solid fa-arrow-right text-xs group-hover:translate-x-1 transition-transform duration-200" aria-hidden="true"></i>
+      </a>
+    </div>
+    <p class="text-sm text-gray-500">* {{ i18n "hub_header_early_access_note" . | safeHTML }}</p>
+
+    <div class="relative mt-8 mb-6 h-[200px] md:h-[368px] overflow-visible">
+        <div class="absolute left-1/2 top-0 -translate-x-1/2 w-[720px] h-[400px] origin-top scale-[0.5] md:scale-100">
+          <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[640px] h-[360px] bg-[radial-gradient(ellipse_at_center,rgba(53,73,96,0.07),transparent_70%)] pointer-events-none" aria-hidden="true"></div>
+          <svg class="absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 720 400" aria-hidden="true">
+            <path d="M360 175 C330 105 288 55 248 40" fill="none" stroke="#cbd5e1" stroke-width="1.5"/>
+            <path d="M360 175 C390 105 432 55 472 40" fill="none" stroke="#cbd5e1" stroke-width="1.5"/>
+            <path d="M360 175 C280 168 175 140 112 118" fill="none" stroke="#cbd5e1" stroke-width="1.5"/>
+            <path d="M360 175 C420 195 470 235 492 272" fill="none" stroke="#cbd5e1" stroke-width="1.5"/>
+            <path d="M360 168 C430 160 490 158 553 160" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="0.1 7" stroke-linecap="round" opacity="0.8"/>
+            <path d="M332 302 C305 300 275 296 246 292" fill="none" stroke="url(#severed-ad)" stroke-width="2" stroke-dasharray="0.1 7" stroke-linecap="round"/>
+            <path d="M388 302 C415 300 445 296 474 292" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="0.1 7" stroke-linecap="round" opacity="0.8"/>
+            <circle class="ad-pulse" r="2.5" fill="#8fa3b8">
+              <animateMotion dur="3.5s" repeatCount="indefinite" path="M388 302 C415 300 445 296 474 292"/>
+              <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.15;0.8;1" dur="3.5s" repeatCount="indefinite"/>
+            </circle>
+            <defs>
+              <linearGradient id="severed-ad" gradientUnits="userSpaceOnUse" x1="332" y1="302" x2="246" y2="292">
+                <stop offset="0" stop-color="#cbd5e1" stop-opacity="0.8"/>
+                <stop offset="0.85" stop-color="#cbd5e1" stop-opacity="0"/>
+              </linearGradient>
+              <linearGradient id="severed" gradientUnits="userSpaceOnUse" x1="360" y1="175" x2="238" y2="270">
+                <stop offset="0" stop-color="#b3bfce" stop-opacity="1"/>
+                <stop offset="0.85" stop-color="#b3bfce" stop-opacity="0"/>
+              </linearGradient>
+            </defs>
+            <path d="M360 175 C305 195 258 232 238 270" fill="none" stroke="url(#severed)" stroke-width="1.5" stroke-dasharray="4 5"/>
+            <path d="M270 222 L278 230 M278 222 L270 230" stroke="#9ca3af" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+
+          <div class="absolute left-[360px] top-[175px] -translate-x-1/2 -translate-y-1/2 flex flex-col items-center z-10">
+            <span class="absolute -top-10 left-1/2 -translate-x-1/2 flex gap-2 pointer-events-none" aria-hidden="true">
+              <span class="relative block w-12 h-14 bg-white shadow-sm ring-1 ring-black/5 -rotate-6 p-1.5 [clip-path:polygon(0_0,calc(100%-10px)_0,100%_10px,100%_100%,0_100%)]">
+                <span class="absolute top-0 right-0 w-[10px] h-[10px] bg-gray-300 [clip-path:polygon(0_0,0_100%,100%_100%)]"></span>
+                <span class="block h-1 w-6 rounded bg-gray-200 mb-1 mt-1"></span>
+                <span class="block h-1 w-8 rounded bg-gray-100 mb-1"></span>
+                <span class="block h-1 w-5 rounded bg-gray-100"></span>
+              </span>
+              <span class="relative block w-12 h-14 rotate-3 mt-1">
+                <span class="absolute inset-0 flex items-center justify-center bg-white shadow-sm ring-1 ring-black/5 [clip-path:polygon(0_0,calc(100%-10px)_0,100%_10px,100%_100%,0_100%)]">
+                  <span class="absolute top-0 right-0 w-[10px] h-[10px] bg-gray-300 [clip-path:polygon(0_0,0_100%,100%_100%)]"></span>
+                  <span class="block font-mono text-[6px] leading-[1.7] tracking-wide text-gray-400 text-center">Zk5r7q<br/>.c9r</span>
+                </span>
+                <span class="absolute -top-1.5 -left-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-white text-[8px] ring-2 ring-white"><i class="fa-solid fa-lock"></i></span>
+              </span>
+            </span>
+            <span class="relative flex flex-col items-center justify-center rounded-2xl bg-white shadow-xl ring-1 ring-black/5 px-6 py-4">
+              <span class="absolute -top-2 -right-2 flex h-6 w-6 items-center justify-center rounded-full bg-white shadow-sm ring-1 ring-black/5" aria-hidden="true">
+                <span class="idp-swap"><img src="/img/clouds/sharepoint.svg" class="h-3.5 w-3.5" alt=""/><img src="/img/clouds/onedrive.svg" class="h-3 w-auto" alt=""/><img src="/img/clouds/google-drive.svg" class="h-3.5 w-auto" alt=""/></span>
+              </span>
+              <i class="fa-solid fa-lock text-tertiary2 text-3xl" aria-hidden="true"></i>
+              <span class="mt-2 text-xs font-semibold text-gray-700 leading-tight">{{ i18n "hub_hero_card_vault_name" }}</span>
+              <span class="text-[10px] text-gray-500 leading-tight">{{ i18n "hub_hero_scene_vault" }}</span>
+            </span>
+          </div>
+
+          <div class="absolute left-[220px] top-[55px] -translate-x-1/2 -translate-y-1/2 flex flex-col items-center z-10 w-32 text-center">
+            <span class="relative">
+              <img src="/img/hub/avatar-1.svg" class="w-14 h-14 rounded-full ring-4 ring-white shadow-md" alt=""/>
+              <span class="absolute -bottom-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-white text-[10px] ring-2 ring-white"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
+            </span>
+            <span class="mt-1.5 text-xs font-medium text-gray-700 leading-tight">Anna</span>
+            <span class="text-[10px] text-gray-500 leading-tight">{{ i18n "hub_hero_row_owner_desc" }}</span>
+            <span class="mt-1 rounded border border-tertiary2/40 bg-tertiary2/5 px-1 text-[8px] uppercase tracking-wide text-tertiary2">{{ i18n "hub_hero_tag_owner" }}</span>
           </div>
-          <div class="px-4 py-1 rounded-full text-xs lg:text-sm font-medium bg-red-600 text-white">
-            {{ i18n "hub_header_kicker_early_access" . }}
+
+          <div class="absolute left-[500px] top-[55px] -translate-x-1/2 -translate-y-1/2 flex flex-col items-center z-10 w-32 text-center">
+            <span class="relative">
+              <img src="/img/hub/avatar-3.svg" class="w-14 h-14 rounded-full ring-4 ring-white shadow-md" alt=""/>
+              <span class="absolute -bottom-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-white text-[10px] ring-2 ring-white"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
+            </span>
+            <span class="mt-1.5 text-xs font-medium text-gray-700 leading-tight">Lena</span>
+            <span class="text-[10px] text-gray-500 leading-tight">{{ i18n "hub_hero_row_external_desc" }}</span>
+            <span class="mt-1 rounded border border-tertiary2/40 bg-tertiary2/5 px-1 text-[8px] uppercase tracking-wide text-tertiary2">{{ i18n "hub_hero_tag_external" }}</span>
           </div>
+
+          <div class="absolute left-[85px] top-[160px] -translate-x-1/2 -translate-y-1/2 flex flex-col items-center z-10 w-28 text-center">
+            <span class="relative">
+              <img src="/img/hub/avatar-2.svg" class="w-14 h-14 rounded-full ring-4 ring-white shadow-md" alt=""/>
+              <span class="absolute -bottom-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-white text-[10px] ring-2 ring-white"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
+            </span>
+            <span class="mt-1.5 text-xs font-medium text-gray-700 leading-tight">Jonas</span>
+            <div class="relative mt-2 w-full rounded-lg bg-white shadow-sm ring-1 ring-gray-200 p-2.5 text-left">
+              <span class="absolute -top-[5px] left-1/2 -translate-x-1/2 h-2.5 w-2.5 rotate-45 bg-white border-t border-l border-gray-200" aria-hidden="true"></span>
+              <div class="flex items-center gap-1.5 mb-2 text-[9px] font-semibold uppercase tracking-wide text-gray-400"><i class="fa-solid fa-laptop" aria-hidden="true"></i>Jonas' {{ i18n "hub_hero_tile_devices" }}</div>
+              <div class="flex items-center gap-1.5 mb-1 text-[9px] text-gray-500"><i class="fa-solid fa-laptop text-[8px] text-gray-300" aria-hidden="true"></i>MacBook Pro<i class="fa-solid fa-check text-[7px] text-primary ml-auto" aria-hidden="true"></i></div>
+              <div class="flex items-center gap-1.5 text-[9px] text-gray-500"><i class="fa-solid fa-mobile-screen text-[8px] text-gray-300" aria-hidden="true"></i>iPhone 15<i class="fa-solid fa-check text-[7px] text-primary ml-auto" aria-hidden="true"></i></div>
+            </div>
+          </div>
+
+          <div class="absolute left-[505px] top-[310px] -translate-x-1/2 -translate-y-1/2 flex flex-col items-center z-10 w-32 text-center">
+            <span class="relative">
+              <span class="flex w-14 h-14 items-center justify-center rounded-full bg-[#ebedef] text-tertiary2 text-lg ring-4 ring-white shadow-md"><i class="fa-solid fa-users" aria-hidden="true"></i></span>
+              <span class="absolute -bottom-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-white text-[10px] ring-2 ring-white"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
+            </span>
+            <span class="mt-1.5 text-xs font-medium text-gray-700 leading-tight">{{ i18n "hub_hero_group_name" }}</span>
+            <span class="text-[10px] text-gray-500 leading-tight">{{ i18n "hub_hero_group_subtitle" }}</span>
+          </div>
+
+          <div class="absolute left-[360px] top-[320px] -translate-x-1/2 -translate-y-1/2 flex flex-col items-center z-10 w-44 text-center">
+            <span class="absolute left-1/2 top-6 -translate-x-1/2 -translate-y-1/2 w-[220px] h-[130px] bg-[radial-gradient(ellipse_at_center,rgba(53,73,96,0.09),transparent_70%)] pointer-events-none" aria-hidden="true"></span>
+            <span class="flex w-14 h-14 items-center justify-center rounded-full bg-[#ebedef] text-tertiary2 text-lg ring-4 ring-white shadow-md"><i class="fa-solid fa-sitemap" aria-hidden="true"></i></span>
+            <span class="mt-1.5 text-xs font-medium text-gray-700 leading-tight idp-swap"><span>Active Directory</span><span>Entra ID</span><span>Okta</span></span>
+            <span class="text-[10px] text-gray-500 leading-tight">{{ i18n "hub_hero_ad_row_users" }} · {{ i18n "hub_hero_ad_row_groups" }}</span>
+          </div>
+
+          <div class="absolute left-[215px] top-[310px] -translate-x-1/2 -translate-y-1/2 flex flex-col items-center z-10 w-36 text-center">
+            <span class="relative">
+              <img src="/img/hub/avatar-4.svg" class="w-14 h-14 rounded-full ring-4 ring-white shadow-md grayscale opacity-60" alt=""/>
+              <span class="absolute -bottom-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-gray-400 text-white text-[10px] ring-2 ring-white"><i class="fa-solid fa-xmark" aria-hidden="true"></i></span>
+            </span>
+            <span class="mt-1.5 text-xs font-medium text-gray-400 leading-tight">Michael</span>
+            <span class="text-[10px] text-gray-400 leading-tight">{{ i18n "hub_hero_node_revoked" }}</span>
+          </div>
+
+          <div class="absolute left-[635px] top-[160px] -translate-x-1/2 -translate-y-1/2 z-10 w-40">
+            <div class="rounded-lg bg-white shadow-sm ring-1 ring-gray-200 p-2.5 text-left">
+              <div class="flex items-center gap-1.5 mb-2 text-[9px] font-semibold uppercase tracking-wide text-gray-400"><i class="fa-solid fa-clock-rotate-left" aria-hidden="true"></i>{{ i18n "hub_hero_tile_audit" }}</div>
+              <div class="flex items-center gap-1.5 mb-1 text-[9px] text-gray-500"><span class="h-1.5 w-1.5 shrink-0 rounded-full bg-primary/70"></span>{{ i18n "hub_hero_audit_row_1" }}</div>
+              <div class="flex items-center gap-1.5 mb-1 text-[9px] text-gray-500"><span class="h-1.5 w-1.5 shrink-0 rounded-full bg-primary/70"></span>{{ i18n "hub_hero_audit_row_2" }}</div>
+              <div class="flex items-center gap-1.5 text-[9px] text-gray-500"><span class="h-1.5 w-1.5 shrink-0 rounded-full bg-gray-300"></span>{{ i18n "hub_hero_audit_row_3" }}</div>
+            </div>
+          </div>
+
         </div>
-        <h1 class="font-h1 mb-6">{{ i18n "hub_header_title" . | safeHTML }}</h1>
-        <p class="lead mb-6">{{ i18n "hub_header_description" . | safeHTML }}</p>
-        <div class="flex flex-col md:flex-row gap-6 mb-4">
-          <a href="{{ .Site.LanguagePrefix }}/hub/managed/" role="button" class="btn btn-primary text-lg w-full md:w-64" data-umami-event="hub-header-managed-cta">{{ i18n "hub_header_managed_cta" . }}</a>
-        </div>
-        <p class="font-p">{{ i18n "hub_header_managed_cta_description" . | safeHTML }}</p>
-        <p class="text-sm mt-6">
-          * {{ i18n "hub_header_early_access_note" . | safeHTML }}
-        </p>
-      </div>
-    </header>
-  </section>
+    </div>
+  </header>
+  <svg class="absolute -bottom-px inset-x-0 w-full h-16 md:h-24 text-gray-100 pointer-events-none" viewBox="0 0 1440 120" preserveAspectRatio="none" fill="currentColor" aria-hidden="true">
+    <path d="M0,88 C320,112 640,56 920,68 C1140,78 1300,96 1440,78 L1440,120 L0,120 Z"/>
+  </svg>
+  </div>
 
   {{ $walbuschPage := .Site.GetPage (printf "/success-stories/walbusch.%s.html" .Language.Lang) }}
   {{ if $walbuschPage }}
@@ -48,7 +170,7 @@ <h1 class="font-h1 mb-6">{{ i18n "hub_header_title" . | safeHTML }}</h1>
         </cite>
       </p>
       <p class="font-p">
-        <a href="{{ $walbuschPage.RelPermalink }}" class="text-link" data-umami-event="hub-success-story-link">
+        <a href="{{ $walbuschPage.RelPermalink }}" class="text-link-tertiary2" data-umami-event="hub-success-story-link">
           {{ i18n "success_story_read_link" . }} <i class="fa-solid fa-arrow-right"></i>
         </a>
       </p>
@@ -58,7 +180,7 @@ <h1 class="font-h1 mb-6">{{ i18n "hub_header_title" . | safeHTML }}</h1>
 
   <section class="container py-12">
     <header class="text-center">
-      <h2 id="introduction" class="font-h2 mb-4">{{ i18n "hub_video_title" . }}</h2>
+      <h2 id="introduction" class="font-h2 mb-4 scroll-mt-24">{{ i18n "hub_video_title" . }}</h2>
       <p class="font-p mb-4">{{ i18n "hub_video_description" . }}</p>
     </header>
 
@@ -72,7 +194,7 @@ <h2 id="introduction" class="font-h2 mb-4">{{ i18n "hub_video_title" . }}</h2>
   <section class="container py-12">
     <div class="flex flex-wrap mb-24">
       <figure class="w-full mb-12 md:w-1/2 md:mb-0 md:pr-6">
-        <img data-src="/img/hub/screenshot-1.png" class="lazyload w-full h-auto" alt="{{i18n "hub_workflow_step_1_alt" }}"/>
+        <img data-src="/img/hub/workflow-1-vaults.png" class="lazyload w-full h-auto" alt="{{i18n "hub_workflow_step_1_alt" }}"/>
       </figure>
       <div class="w-full md:w-1/2 md:pl-6">
         <h2 class="font-h2 mb-6">{{ i18n "hub_workflow_step_1_title" }}</h2>
@@ -82,7 +204,7 @@ <h2 class="font-h2 mb-6">{{ i18n "hub_workflow_step_1_title" }}</h2>
     
     <div class="flex flex-wrap mb-24 md:flex-row-reverse">
       <figure class="w-full mb-12 md:w-1/2 md:mb-0 md:pl-6">
-        <img data-src="/img/hub/screenshot-2.png" class="lazyload w-full h-auto" alt="{{i18n "hub_workflow_step_2_alt" }}"/>
+        <img data-src="/img/hub/workflow-2-access.png" class="lazyload w-full h-auto" alt="{{i18n "hub_workflow_step_2_alt" }}"/>
       </figure>
       <div class="w-full md:w-1/2 md:pr-6">
         <h2 class="font-h2 mb-6">{{ i18n "hub_workflow_step_2_title" }}</h2>
@@ -92,13 +214,23 @@ <h2 class="font-h2 mb-6">{{ i18n "hub_workflow_step_2_title" }}</h2>
     
     <div class="flex flex-wrap">
       <figure class="w-full mb-12 md:w-1/2 md:mb-0 md:pr-6">
-        <img data-src="/img/hub/screenshot-3.png" class="lazyload w-full h-auto" alt="{{i18n "hub_workflow_step_3_alt" }}"/>
+        <img data-src="/img/hub/workflow-3-unlock.png" class="lazyload w-full h-auto" alt="{{i18n "hub_workflow_step_3_alt" }}"/>
       </figure>
       <div class="w-full md:w-1/2 md:pl-6">
         <h2 class="font-h2 mb-6">{{ i18n "hub_workflow_step_3_title" }}</h2>
         <p class="lead">{{ i18n "hub_workflow_step_3_description" }}</p>
       </div>
     </div>
+
+    <div class="flex flex-wrap mt-24 md:flex-row-reverse">
+      <figure class="w-full mb-12 md:w-1/2 md:mb-0 md:pl-6">
+        <img data-src="/img/hub/workflow-4-audit.png" class="lazyload w-full h-auto" alt="{{i18n "hub_workflow_step_4_alt" }}"/>
+      </figure>
+      <div class="w-full md:w-1/2 md:pr-6">
+        <h2 class="font-h2 mb-6">{{ i18n "hub_workflow_step_4_title" }}</h2>
+        <p class="lead">{{ i18n "hub_workflow_step_4_description" }}</p>
+      </div>
+    </div>
   </section>
 
   <section class="container py-12">
@@ -109,8 +241,8 @@ <h2 id="features" class="font-h2 mb-4">{{ i18n "hub_features_title" . }}</h2>
 
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
       <div class="white-box">
-        <div class="px-4 py-2 border-b border-primary">
-          <h3 class="font-h3"><i class="fa-solid fa-key text-primary"></i> {{ i18n "hub_features_feature_1_title" . }}</h3>
+        <div class="px-4 py-2 border-b border-tertiary2">
+          <h3 class="font-h3"><i class="fa-solid fa-key text-tertiary2"></i> {{ i18n "hub_features_feature_1_title" . }}</h3>
         </div>
         <div class="p-4">
           <p class="font-p">{{ i18n "hub_features_feature_1_description" . | safeHTML }}</p>
@@ -118,8 +250,8 @@ <h3 class="font-h3"><i class="fa-solid fa-key text-primary"></i> {{ i18n "hub_fe
       </div>
     
       <div class="white-box">
-        <div class="px-4 py-2 border-b border-primary">
-          <h3 class="font-h3"><i class="fa-solid fa-shield-check text-primary"></i> {{ i18n "hub_features_feature_2_title" . }}</h3>
+        <div class="px-4 py-2 border-b border-tertiary2">
+          <h3 class="font-h3"><i class="fa-solid fa-shield-check text-tertiary2"></i> {{ i18n "hub_features_feature_2_title" . }}</h3>
         </div>
         <div class="p-4">
           <p class="font-p">{{ i18n "hub_features_feature_2_description" . | safeHTML }}</p>
@@ -127,8 +259,8 @@ <h3 class="font-h3"><i class="fa-solid fa-shield-check text-primary"></i> {{ i18
       </div>
     
       <div class="white-box">
-        <div class="px-4 py-2 border-b border-primary">
-          <h3 class="font-h3"><i class="fa-solid fa-lock-alt text-primary"></i> {{ i18n "hub_features_feature_3_title" . }}</h3>
+        <div class="px-4 py-2 border-b border-tertiary2">
+          <h3 class="font-h3"><i class="fa-solid fa-lock-alt text-tertiary2"></i> {{ i18n "hub_features_feature_3_title" . }}</h3>
         </div>
         <div class="p-4">
           <p class="font-p">{{ i18n "hub_features_feature_3_description" . | safeHTML }}</p>
@@ -136,8 +268,8 @@ <h3 class="font-h3"><i class="fa-solid fa-lock-alt text-primary"></i> {{ i18n "h
       </div>
 
       <div class="white-box">
-        <div class="px-4 py-2 border-b border-primary">
-          <h3 class="font-h3"><i class="fa-solid fa-cloud text-primary"></i> {{ i18n "hub_features_feature_4_title" . }}</h3>
+        <div class="px-4 py-2 border-b border-tertiary2">
+          <h3 class="font-h3"><i class="fa-solid fa-cloud text-tertiary2"></i> {{ i18n "hub_features_feature_4_title" . }}</h3>
         </div>
         <div class="p-4">
           <p class="font-p">{{ i18n "hub_features_feature_4_description" . | safeHTML }}</p>
@@ -145,8 +277,8 @@ <h3 class="font-h3"><i class="fa-solid fa-cloud text-primary"></i> {{ i18n "hub_
       </div>
     
       <div class="white-box">
-        <div class="px-4 py-2 border-b border-primary">
-          <h3 class="font-h3"><i class="fa-solid fa-code text-primary"></i> {{ i18n "hub_features_feature_5_title" . }}</h3>
+        <div class="px-4 py-2 border-b border-tertiary2">
+          <h3 class="font-h3"><i class="fa-solid fa-code text-tertiary2"></i> {{ i18n "hub_features_feature_5_title" . }}</h3>
         </div>
         <div class="p-4">
           <p class="font-p">{{ i18n "hub_features_feature_5_description" . | safeHTML }}</p>
@@ -154,8 +286,8 @@ <h3 class="font-h3"><i class="fa-solid fa-code text-primary"></i> {{ i18n "hub_f
       </div>
     
       <div class="white-box">
-        <div class="px-4 py-2 border-b border-primary">
-          <h3 class="font-h3"><i class="fa-solid fa-shield-alt text-primary"></i> {{ i18n "hub_features_feature_6_title" . }}</h3>
+        <div class="px-4 py-2 border-b border-tertiary2">
+          <h3 class="font-h3"><i class="fa-solid fa-shield-alt text-tertiary2"></i> {{ i18n "hub_features_feature_6_title" . }}</h3>
         </div>
         <div class="p-4">
           <p class="font-p">{{ i18n "hub_features_feature_6_description" . | safeHTML }}</p>
@@ -168,7 +300,7 @@ <h3 class="font-h3"><i class="fa-solid fa-shield-alt text-primary"></i> {{ i18n
     <div class="max-w-3xl mx-auto">
       <h2 id="pricing-plans" class="font-h2 mb-4">{{ i18n "hub_pricing_title" . }}</h2>
       <p class="font-p mb-4">{{ i18n "hub_pricing_description" . }}</p>
-      <a href="{{ .Site.LanguagePrefix }}/pricing/" role="button" class="btn btn-primary px-8" data-umami-event="hub-pricing">
+      <a href="{{ .Site.LanguagePrefix }}/pricing/" role="button" class="btn btn-tertiary2 px-8" data-umami-event="hub-pricing">
         {{ i18n "hub_pricing_button" . }}
       </a>
     </div>
@@ -179,9 +311,9 @@ <h2 id="deployment" class="text-center font-h2 mb-4">{{ i18n "hub_deployment_tit
 
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
       <div class="flex flex-col white-box ring-2 ring-secondary">
-        <div class="flex justify-between items-center p-4 border-b border-primary">
+        <div class="flex justify-between items-center p-4 border-b border-tertiary2">
           <h3 class="font-h3">
-            <i class="fa-solid fa-cloud text-primary"></i> {{ i18n "pricing_hub_managed_title" . }}
+            <i class="fa-solid fa-cloud text-tertiary2"></i> {{ i18n "pricing_hub_managed_title" . }}
           </h3>
           <div class="inline-flex items-center gap-x-1.5 px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-secondary text-white">
             <i class="fa-solid fa-star"></i>
@@ -195,29 +327,29 @@ <h4 class="font-medium lg:text-lg leading-relaxed">
             </h4>
             <ul role="list" class="fa-ul text-sm lg:text-base ml-7 lg:ml-8 space-y-4">
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-tertiary2"></i></span>
                 <span>{{ i18n "hub_deployment_managed_benefit_1" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-tertiary2"></i></span>
                 <span>{{ i18n "hub_deployment_managed_benefit_2" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-tertiary2"></i></span>
                 <span>{{ i18n "hub_deployment_managed_benefit_3" . }}</span>
               </li>
             </ul>
           </div>
-          <a href="{{ .Site.LanguagePrefix }}/hub/managed/" role="button" class="btn btn-primary w-full lg:w-96" data-umami-event="hub-deployment-managed-cta">
+          <a href="{{ .Site.LanguagePrefix }}/hub/managed/" role="button" class="btn btn-tertiary2 w-full lg:w-96" data-umami-event="hub-deployment-managed-cta">
             {{ i18n "pricing_hub_managed_cta" . }}
           </a>
         </div>
       </div>
 
       <div class="flex flex-col white-box">
-        <div class="p-4 border-b border-primary">
+        <div class="p-4 border-b border-tertiary2">
           <h3 class="font-h3">
-            <i class="fa-solid fa-server text-primary"></i> {{ i18n "pricing_hub_self_hosted_title" . }}
+            <i class="fa-solid fa-server text-tertiary2"></i> {{ i18n "pricing_hub_self_hosted_title" . }}
           </h3>
         </div>
         <div class="flex flex-col justify-between h-full gap-8 px-4 py-8">
@@ -227,20 +359,20 @@ <h4 class="font-medium lg:text-lg leading-relaxed">
             </h4>
             <ul role="list" class="fa-ul text-sm lg:text-base ml-7 lg:ml-8 space-y-4">
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-tertiary2"></i></span>
                 <span>{{ i18n "hub_deployment_self_hosted_benefit_1" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-tertiary2"></i></span>
                 <span>{{ i18n "hub_deployment_self_hosted_benefit_2" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-tertiary2"></i></span>
                 <span>{{ i18n "hub_deployment_self_hosted_benefit_3" . }}</span>
               </li>
             </ul>
           </div>
-          <a href="{{ .Site.LanguagePrefix }}/hub/self-hosted/" role="button" class="btn btn-primary w-full lg:w-96" data-umami-event="hub-deployment-self-hosted-cta">
+          <a href="{{ .Site.LanguagePrefix }}/hub/self-hosted/" role="button" class="btn btn-tertiary2 w-full lg:w-96" data-umami-event="hub-deployment-self-hosted-cta">
             {{ i18n "pricing_hub_self_hosted_cta" . }}
           </a>
         </div>
@@ -272,7 +404,7 @@ <h2 id="faq" class="font-h2 mb-4">{{ i18n "faq_title" . }}</h2>
   <section class="container text-center py-12">
     <h2 id="contact" class="font-h2 mb-4">{{ i18n "hub_contact_us_title" . }}</h2>
     <p class="font-p mb-4">{{ i18n "hub_contact_us_description" . | safeHTML }}</p>
-    <a href="{{ .Site.LanguagePrefix }}/contact-sales/" role="button" class="btn btn-outline-primary px-8" data-umami-event="hub-contact-us">
+    <a href="{{ .Site.LanguagePrefix }}/contact-sales/" role="button" class="btn btn-outline-tertiary2 px-8" data-umami-event="hub-contact-us">
       <i class="fa-solid fa-envelope"></i> {{ i18n "hub_contact_us_button" . }}
     </a>
   </section>
@@ -284,7 +416,7 @@ <h2 id="newsletter" class="font-h2 mb-4">{{ i18n "hub_newsletter_title" . }}</h2
       <p class="font-p mb-4">{{ i18n "hub_newsletter_instruction" . | safeHTML }}</p>
       <div class="flex justify-center items-center rounded-sm bg-gray-300 mb-4">
         <input x-model="data.email" x-ref="email" @blur="$refs.email.classList.add('show-invalid')" type="email" class="grow input-box rounded-r-none focus:border-secondary" placeholder="{{ i18n "hub_newsletter_email_placeholder" }}" required/>
-        <button :disabled="data.inProgress || !data.acceptTerms || captchaState == 'verifying'" type="submit" class="shrink-0 flex items-center gap-1 btn btn-primary rounded-l-none px-4" data-umami-event="hub-newsletter-form">
+        <button :disabled="data.inProgress || !data.acceptTerms || captchaState == 'verifying'" type="submit" class="shrink-0 flex items-center gap-1 btn btn-tertiary2 rounded-l-none px-4" data-umami-event="hub-newsletter-form">
           <i :class="{'fa-envelope': !data.inProgress, 'fa-spinner fa-spin': data.inProgress}" class="fa-solid" aria-hidden="true"></i> {{ i18n "hub_newsletter_subscribe" }}
         </button>
 
@@ -300,8 +432,8 @@ <h2 id="newsletter" class="font-h2 mb-4">{{ i18n "hub_newsletter_title" . }}</h2
     </div>
 
     <div class="flex justify-center gap-2">
-      <a class="text-gray-600 hover:text-primary" href="https://mastodon.online/@cryptomator" aria-label="Cryptomator on Mastodon" target="_blank" rel="noopener" data-umami-event="hub-mastodon"><i class="fa-brands fa-mastodon text-2xl"></i></a>
-      <a class="text-gray-600 hover:text-primary" href="https://www.linkedin.com/company/skymatic/" aria-label="Skymatic on LinkedIn" target="_blank" rel="noopener" data-umami-event="hub-linkedin"><i class="fa-brands fa-linkedin text-2xl"></i></a>
+      <a class="text-gray-600 hover:text-tertiary2" href="https://mastodon.online/@cryptomator" aria-label="Cryptomator on Mastodon" target="_blank" rel="noopener" data-umami-event="hub-mastodon"><i class="fa-brands fa-mastodon text-2xl"></i></a>
+      <a class="text-gray-600 hover:text-tertiary2" href="https://www.linkedin.com/company/skymatic/" aria-label="Skymatic on LinkedIn" target="_blank" rel="noopener" data-umami-event="hub-linkedin"><i class="fa-brands fa-linkedin text-2xl"></i></a>
     </div>
   </section>
 {{ end }}
diff --git a/layouts/hub-billing/single.html b/layouts/hub-billing/single.html
index 5c2b7e5e5..585387433 100644
--- a/layouts/hub-billing/single.html
+++ b/layouts/hub-billing/single.html
@@ -60,7 +60,7 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4">
                     {{ i18n "hub_billing_createsession_found_description" . }}
                     <span x-text="subscriptionData.redactedEmail" class="font-medium whitespace-nowrap"></span>
                   </p>
-                  <button :disabled="subscriptionData.inProgress || captchaState == 'verifying'" type="submit" class="btn btn-primary w-full md:w-64">
+                  <button :disabled="subscriptionData.inProgress || captchaState == 'verifying'" type="submit" class="btn btn-tertiary2 w-full md:w-64">
                     <i :class="{'fa-paper-plane': !subscriptionData.inProgress, 'fa-spinner fa-spin': subscriptionData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                     {{ i18n "hub_billing_createsession_submit" . }}
                   </button>
@@ -74,7 +74,7 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4">
                   </p>
                   <div class="flex justify-center items-center rounded-sm bg-gray-300 mb-4">
                     <input x-model="subscriptionData.email" :required="subscriptionData.needsEmail" type="email" class="grow rounded-l border-gray-300 focus:ring-0 focus:border-secondary" placeholder="{{ i18n "hub_billing_createsession_email_placeholder" . }}"/>
-                    <button :disabled="subscriptionData.inProgress || captchaState == 'verifying'" type="submit" class="shrink-0 flex items-center gap-1 btn btn-primary rounded-l-none px-4">
+                    <button :disabled="subscriptionData.inProgress || captchaState == 'verifying'" type="submit" class="shrink-0 flex items-center gap-1 btn btn-tertiary2 rounded-l-none px-4">
                       <i :class="{'fa-paper-plane': !subscriptionData.inProgress, 'fa-spinner fa-spin': subscriptionData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                       {{ i18n "hub_billing_createsession_submit" . }}
                     </button>
@@ -148,7 +148,7 @@ <h1 class="font-h1">{{ .Title }}</h1>
                   {{ i18n "hub_billing_manage_status_quantity_description" . }}: <span x-text="subscriptionData.details.quantity"></span>
                 </p>
                 <p class="mt-2">
-                  <button :disabled="!subscriptionData.details.next_payment || subscriptionData.inProgress" @click.prevent="hubSubscription.openChangeSeatsModal()" class="text-xs text-btn text-primary">
+                  <button :disabled="!subscriptionData.details.next_payment || subscriptionData.inProgress" @click.prevent="hubSubscription.openChangeSeatsModal()" class="text-xs text-btn text-tertiary2">
                     <i class="fa-solid fa-arrows-v"></i>
                     {{ i18n "hub_billing_manage_status_quantity_action" . }}
                   </button>
@@ -175,11 +175,11 @@ <h1 class="font-h1">{{ .Title }}</h1>
                   </div>
                 </template>
                 <p class="mt-2">
-                  <button x-show="subscriptionData.details.next_payment" :disabled="subscriptionData.inProgress" @click.prevent="hubSubscription.pause()" class="text-xs text-btn text-primary">
+                  <button x-show="subscriptionData.details.next_payment" :disabled="subscriptionData.inProgress" @click.prevent="hubSubscription.pause()" class="text-xs text-btn text-tertiary2">
                     <i class="fa-solid fa-pause"></i>
                     {{ i18n "hub_billing_manage_next_payment_pause_action" . }}
                   </button>
-                  <button x-show="!subscriptionData.details.next_payment" :disabled="subscriptionData.inProgress || subscriptionData.details.state == 'deleted'" @click.prevent="subscriptionData.details.state == 'paused' ? hubSubscription.askForRestartConfirmation() : hubSubscription.restart()" class="text-xs text-btn text-primary">
+                  <button x-show="!subscriptionData.details.next_payment" :disabled="subscriptionData.inProgress || subscriptionData.details.state == 'deleted'" @click.prevent="subscriptionData.details.state == 'paused' ? hubSubscription.askForRestartConfirmation() : hubSubscription.restart()" class="text-xs text-btn text-tertiary2">
                     <i class="fa-solid fa-play"></i>
                     {{ i18n "hub_billing_manage_next_payment_restart_action" . }}
                   </button>
@@ -212,7 +212,7 @@ <h1 class="font-h1">{{ .Title }}</h1>
                   </p>
                 </template>
                 <p class="mt-2">
-                  <button :disabled="subscriptionData.inProgress || subscriptionData.details.state == 'deleted'" @click.prevent="hubSubscription.updatePaymentMethod('{{ .Site.Language.Lang }}')" class="text-xs text-btn text-primary">
+                  <button :disabled="subscriptionData.inProgress || subscriptionData.details.state == 'deleted'" @click.prevent="hubSubscription.updatePaymentMethod('{{ .Site.Language.Lang }}')" class="text-xs text-btn text-tertiary2">
                     <i class="fa-solid fa-external-link"></i>
                     {{ i18n "hub_billing_manage_payment_info_update_action" . }}
                   </button>
@@ -229,10 +229,10 @@ <h2 class="font-h2 mb-4 mt-12">
             {{ i18n "hub_billing_manage_license_key_instruction" . }}
           </p>
           <textarea x-model="subscriptionData.token" class="input-box w-full text-sm md:text-base leading-relaxed break-all" rows="6" readonly></textarea>
-          <button x-show="!subscriptionData.token && !subscriptionData.needsTokenRefresh" :disabled="subscriptionData.inProgress" @click.prevent="subscriptionData.errorMessage = ''; subscriptionData.needsTokenRefresh = true" class="btn btn-primary text-center w-full md:w-64 mt-4">
+          <button x-show="!subscriptionData.token && !subscriptionData.needsTokenRefresh" :disabled="subscriptionData.inProgress" @click.prevent="subscriptionData.errorMessage = ''; subscriptionData.needsTokenRefresh = true" class="btn btn-tertiary2 text-center w-full md:w-64 mt-4">
             {{ i18n "hub_billing_manage_license_key_retry_action" . }}
           </button>
-          <button x-show="subscriptionData.token" :disabled="subscriptionData.inProgress" class="btn btn-primary text-center w-full md:w-64 mt-4" @click.prevent="hubSubscription.transferTokenToHub()">
+          <button x-show="subscriptionData.token" :disabled="subscriptionData.inProgress" class="btn btn-tertiary2 text-center w-full md:w-64 mt-4" @click.prevent="hubSubscription.transferTokenToHub()">
             {{ i18n "hub_billing_manage_license_key_transfer_action" . }}
           </button>
           <template x-if="subscriptionData.needsTokenRefresh && !subscriptionData.inProgress">
@@ -254,9 +254,9 @@ <h2 class="font-h2 mb-4 mt-12">
                   <div class="p-4">
                     <div class="md:flex md:items-start">
                       <div class="shrink-0 text-center">
-                        <div class="fa-stack text-2xl text-primary-l2 md:text-xl">
+                        <div class="fa-stack text-2xl text-tertiary2/15 md:text-xl">
                           <i class="fa-solid fa-circle fa-stack-2x"></i>
-                          <i class="fa-solid fa-play fa-stack-1x text-primary"></i>
+                          <i class="fa-solid fa-play fa-stack-1x text-tertiary2"></i>
                         </div>
                       </div>
                       <div class="mt-3 text-center md:mt-0 md:ml-4 md:text-left">
@@ -268,14 +268,14 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4" id="restart-m
                           {{ i18n "hub_billing_manage_restart_subscription_warning" . }}
                         </p>
                         <p class="font-p mb-4">
-                          <i class="fa-solid fa-credit-card text-primary"></i>
+                          <i class="fa-solid fa-credit-card text-tertiary2"></i>
                           {{ i18n "hub_billing_manage_modal_charge_amount_description" . }}: <span x-text="subscriptionData.restartModal.nextPayment ? subscriptionData.restartModal.nextPayment.amount.toLocaleString('{{ .Site.Language.Lang }}', { style: 'currency', currency: subscriptionData.restartModal.nextPayment.currency }) : '…'"></span>
                         </p>
                       </div>
                     </div>
                   </div>
-                  <div class="border-t border-primary p-4 md:flex md:flex-row-reverse md:items-center">
-                    <button :disabled="subscriptionData.inProgress" @click.prevent="hubSubscription.restart()" type="button" class="btn btn-primary shrink-0 w-full mb-4 md:w-auto md:ml-3 md:mb-0">
+                  <div class="border-t border-tertiary2 p-4 md:flex md:flex-row-reverse md:items-center">
+                    <button :disabled="subscriptionData.inProgress" @click.prevent="hubSubscription.restart()" type="button" class="btn btn-tertiary2 shrink-0 w-full mb-4 md:w-auto md:ml-3 md:mb-0">
                       <i :class="{'fa-check': !subscriptionData.inProgress, 'fa-spinner fa-spin': subscriptionData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                       {{ i18n "hub_billing_manage_modal_confirm" . }}
                     </button>
@@ -297,9 +297,9 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4" id="restart-m
                   <div class="p-4">
                     <div class="md:flex md:items-start">
                       <div class="shrink-0 text-center">
-                        <div class="fa-stack text-2xl text-primary-l2 md:text-xl">
+                        <div class="fa-stack text-2xl text-tertiary2/15 md:text-xl">
                           <i class="fa-solid fa-circle fa-stack-2x"></i>
-                          <i class="fa-solid fa-arrows-v fa-stack-1x text-primary"></i>
+                          <i class="fa-solid fa-arrows-v fa-stack-1x text-tertiary2"></i>
                         </div>
                       </div>
                       <div class="mt-3 text-center md:mt-0 md:ml-4 md:text-left">
@@ -328,7 +328,7 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4" id="change-se
                               {{ i18n "hub_billing_manage_change_quantity_confirmation_increase_warning" . }}
                             </p>
                             <p class="font-p mb-4">
-                              <i class="fa-solid fa-credit-card text-primary"></i>
+                              <i class="fa-solid fa-credit-card text-tertiary2"></i>
                               {{ i18n "hub_billing_manage_modal_charge_amount_description" . }}: <span x-text="subscriptionData.changeSeatsModal.immediatePayment ? subscriptionData.changeSeatsModal.immediatePayment.amount.toLocaleString('{{ .Site.Language.Lang }}', { style: 'currency', currency: subscriptionData.changeSeatsModal.immediatePayment.currency }) : '…'"></span>
                             </p>
                           </div>
@@ -340,12 +340,12 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4" id="change-se
                       </div>
                     </div>
                   </div>
-                  <div class="border-t border-primary p-4 md:flex md:flex-row-reverse md:items-center">
-                    <button x-show="!subscriptionData.changeSeatsModal.confirmation" :disabled="subscriptionData.quantity == subscriptionData.details.quantity" @click.prevent="hubSubscription.askForChangeSeatsConfirmation()" type="button" class="btn btn-primary shrink-0 w-full mb-4 md:w-auto md:ml-3 md:mb-0">
+                  <div class="border-t border-tertiary2 p-4 md:flex md:flex-row-reverse md:items-center">
+                    <button x-show="!subscriptionData.changeSeatsModal.confirmation" :disabled="subscriptionData.quantity == subscriptionData.details.quantity" @click.prevent="hubSubscription.askForChangeSeatsConfirmation()" type="button" class="btn btn-tertiary2 shrink-0 w-full mb-4 md:w-auto md:ml-3 md:mb-0">
                       <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
                       {{ i18n "hub_billing_manage_modal_continue" . }}
                     </button>
-                    <button x-show="subscriptionData.changeSeatsModal.confirmation" :disabled="subscriptionData.inProgress" @click.prevent="hubSubscription.changeQuantity()" type="button" class="btn btn-primary shrink-0 w-full mb-4 md:w-auto md:ml-3 md:mb-0">
+                    <button x-show="subscriptionData.changeSeatsModal.confirmation" :disabled="subscriptionData.inProgress" @click.prevent="hubSubscription.changeQuantity()" type="button" class="btn btn-tertiary2 shrink-0 w-full mb-4 md:w-auto md:ml-3 md:mb-0">
                       <i :class="{'fa-check': !subscriptionData.inProgress, 'fa-spinner fa-spin': subscriptionData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                       {{ i18n "hub_billing_manage_modal_confirm" . }}
                     </button>
@@ -381,8 +381,8 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
             </div>
             <div class="hidden md:block"></div>
             <div x-show="subscriptionData.oldLicense && !subscriptionData.customBilling?.managed" class="flex flex-col white-box">
-              <div class="p-4 border-b border-primary">
-                <h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark mb-4">
+              <div class="p-4 border-b border-tertiary2">
+                <h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide uppercase bg-tertiary2/10 text-tertiary2 mb-4">
                   {{ i18n "hub_billing_checkout_community_title" . }}
                 </h2>
                 <div x-show="!subscriptionData.customBilling?.override?.prices" class="lg:h-[22px]"></div>
@@ -399,15 +399,15 @@ <h3 class="font-h3 mb-4 md:mb-0">
                     {{ i18n "hub_billing_checkout_community_subtitle" . }}
                   </h3>
                   <div class="mb-4 md:my-auto lg:max-w-sm">
-                    <div class="fa-stack text-5xl text-primary-l2 mb-4">
+                    <div class="fa-stack text-5xl text-tertiary2/15 mb-4">
                       <i class="fa-solid fa-circle fa-stack-2x"></i>
-                      <i class="fa-solid fa-people-group fa-stack-1x text-primary"></i>
+                      <i class="fa-solid fa-people-group fa-stack-1x text-tertiary2"></i>
                     </div>
                     <p class="font-p">
                       {{ i18n "hub_billing_checkout_community_cta" . }}
                     </p>
                   </div>
-                  <a :href="`{{ "hub/register" | relLangURL }}#oldLicense=${encodeURIComponent(subscriptionData.oldLicense)}&returnUrl=${encodeURIComponent(subscriptionData.returnUrl)}`" role="button" class="btn btn-primary w-full">
+                  <a :href="`{{ "hub/register" | relLangURL }}#oldLicense=${encodeURIComponent(subscriptionData.oldLicense)}&returnUrl=${encodeURIComponent(subscriptionData.returnUrl)}`" role="button" class="btn btn-tertiary2 w-full">
                     <i class="fa-solid fa-user-plus"></i>
                     {{ i18n "hub_billing_checkout_community_action" . }}
                   </a>
@@ -415,15 +415,15 @@ <h3 class="font-h3 mb-4 md:mb-0">
               </div>
             </div>
             <div class="white-box">
-              <div class="p-4 border-b border-primary">
-                <h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark mb-4">
+              <div class="p-4 border-b border-tertiary2">
+                <h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide uppercase bg-tertiary2/10 text-tertiary2 mb-4">
                   {{ i18n "hub_billing_checkout_standard_title" . }}
                 </h2>
                 <div x-show="!subscriptionData.customBilling?.override?.prices" class="flex items-center gap-2">
                   <span class="uppercase tracking-wide text-xs font-bold cursor-pointer" :class="subscriptionData.billingInterval === 'monthly' ? 'text-gray-700' : 'text-gray-500'" @click="subscriptionData.billingInterval = 'monthly'">
                     {{ i18n "hub_billing_monthly" . }}
                   </span>
-                  <button type="button" class="relative inline-flex h-4 w-8 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-primary transition-colors duration-200 ease-in-out focus:outline-hidden focus:ring-1 focus:ring-primary focus:ring-offset-1" role="switch" @click.prevent="subscriptionData.billingInterval = subscriptionData.billingInterval === 'monthly' ? 'yearly' : 'monthly'">
+                  <button type="button" class="relative inline-flex h-4 w-8 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-tertiary2 transition-colors duration-200 ease-in-out focus:outline-hidden focus:ring-1 focus:ring-tertiary2 focus:ring-offset-1" role="switch" @click.prevent="subscriptionData.billingInterval = subscriptionData.billingInterval === 'monthly' ? 'yearly' : 'monthly'">
                     <span class="sr-only">Toggle billing interval</span>
                     <span aria-hidden="true" class="pointer-events-none inline-block size-3 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out" :class="subscriptionData.billingInterval === 'monthly' ? 'translate-x-0' : 'translate-x-4'"></span>
                   </button>
@@ -495,7 +495,7 @@ <h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide
                   </p>
                   <p x-show="subscriptionData.customBilling?.managed" class="font-p mb-4">{{ partial "checkbox.html" (dict "context" . "alpineVariable" "acceptTerms" "label" (i18n "accept_hub_managed_terms_and_privacy" | safeHTML)) }}</p>
                   <p x-show="!subscriptionData.customBilling?.managed" class="font-p mb-4">{{ partial "checkbox.html" (dict "context" . "alpineVariable" "acceptTerms" "label" (i18n "accept_terms_and_privacy" | safeHTML)) }}</p>
-                  <button :disabled="subscriptionData.inProgress || !acceptTerms" @click.prevent="hubSubscription.checkout('{{ .Site.Language.Lang }}')" type="button" class="btn btn-primary w-full" :class="!(subscriptionData.oldLicense && !subscriptionData.customBilling?.managed) && 'lg:w-1/2'">
+                  <button :disabled="subscriptionData.inProgress || !acceptTerms" @click.prevent="hubSubscription.checkout('{{ .Site.Language.Lang }}')" type="button" class="btn btn-tertiary2 w-full" :class="!(subscriptionData.oldLicense && !subscriptionData.customBilling?.managed) && 'lg:w-1/2'">
                     <i :class="{'fa-shopping-cart': !subscriptionData.inProgress, 'fa-check': !subscriptionData.inProgress, 'fa-spinner fa-spin': subscriptionData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                     {{ i18n "hub_billing_checkout_standard_submit" . }}
                   </button>
@@ -504,8 +504,8 @@ <h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide
               </div>
             </div>
             <div class="flex flex-col white-box">
-              <div class="p-4 border-b border-primary">
-                <h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark mb-4">
+              <div class="p-4 border-b border-tertiary2">
+                <h2 class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide uppercase bg-tertiary2/10 text-tertiary2 mb-4">
                   {{ i18n "hub_billing_checkout_enterprise_title" . }}
                 </h2>
                 <div x-show="!subscriptionData.customBilling?.override?.prices" class="lg:h-[22px]"></div>
@@ -522,15 +522,15 @@ <h3 class="font-h3 mb-4 md:mb-0">
                     {{ i18n "hub_billing_checkout_enterprise_subtitle" . }}
                   </h3>
                   <div class="mb-4 md:my-auto lg:max-w-sm">
-                    <div class="fa-stack text-5xl text-primary-l2 mb-4">
+                    <div class="fa-stack text-5xl text-tertiary2/15 mb-4">
                       <i class="fa-solid fa-circle fa-stack-2x"></i>
-                      <i class="fa-solid fa-building fa-stack-1x text-primary"></i>
+                      <i class="fa-solid fa-building fa-stack-1x text-tertiary2"></i>
                     </div>
                     <p class="font-p">
                       {{ i18n "hub_billing_checkout_enterprise_cta" . }}
                     </p>
                   </div>
-                  <a href="mailto:hub@cryptomator.org" role="button" class="btn btn-primary w-full" :class="!(subscriptionData.oldLicense && !subscriptionData.customBilling?.managed) && 'lg:w-1/2'">
+                  <a href="mailto:hub@cryptomator.org" role="button" class="btn btn-tertiary2 w-full" :class="!(subscriptionData.oldLicense && !subscriptionData.customBilling?.managed) && 'lg:w-1/2'">
                     <i class="fa-solid fa-envelope"></i>
                     {{ i18n "hub_billing_checkout_enterprise_action" . }}
                   </a>
@@ -565,7 +565,7 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4">
             <i class="fa-solid fa-info-circle"></i>
             {{ i18n "hub_billing_manualinvoice_description" . }}
           </p>
-          <a href="mailto:hub@cryptomator.org" role="button" class="btn btn-primary w-full lg:w-1/2">
+          <a href="mailto:hub@cryptomator.org" role="button" class="btn btn-tertiary2 w-full lg:w-1/2">
             <i class="fa-solid fa-envelope"></i>
             {{ i18n "hub_billing_manualinvoice_action" . }}
           </a>
diff --git a/layouts/hub-demo/single.html b/layouts/hub-demo/single.html
index 5809ba7f5..6f08e9172 100644
--- a/layouts/hub-demo/single.html
+++ b/layouts/hub-demo/single.html
@@ -61,7 +61,7 @@ <h3 class="font-h3">
         <p class="font-p mb-4">
           {{ i18n "hub_demo_instruction" }}
         </p>
-        <button :disabled="feedbackData.inProgress || captchaState == 'verifying'" type="submit" class="btn btn-primary w-full md:w-64" x-cloak>
+        <button :disabled="feedbackData.inProgress || captchaState == 'verifying'" type="submit" class="btn btn-tertiary2 w-full md:w-64" x-cloak>
           <i :class="{'fa-paper-plane': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fa-solid" aria-hidden="true"></i> {{ i18n "hub_demo_submit" }}
         </button>
         {{ $challengeUrl := printf "%s/connect/store/challenge" .Site.Params.apiBaseUrl }}
@@ -74,7 +74,7 @@ <h3 class="font-h3">
   <section class="container text-center py-12">
     <h2 class="font-h2 mb-4">{{ i18n "hub_demo_contact_us_title" . }}</h2>
     <p class="font-p mb-4">{{ i18n "hub_demo_contact_us_description" . | safeHTML }}</p>
-    <a href="mailto:hub@cryptomator.org" role="button" class="btn btn-outline-primary px-8">
+    <a href="mailto:hub@cryptomator.org" role="button" class="btn btn-outline-tertiary2 px-8">
       <i class="fa-solid fa-envelope"></i> {{ i18n "hub_demo_contact_us_button" . }}
     </a>
   </section>
diff --git a/layouts/hub-managed/single.html b/layouts/hub-managed/single.html
index ff2f6a416..b75c3e3bb 100644
--- a/layouts/hub-managed/single.html
+++ b/layouts/hub-managed/single.html
@@ -24,7 +24,7 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
                       <a href="#" class="group" @click.prevent="feedbackData.currentStep = index" :data-umami-event="`hub-managed-nav-step-${index + 1}`">
                         <span class="flex items-center gap-3">
                           <div class="relative flex w-5 h-5 shrink-0 items-center justify-center">
-                            <svg class="w-full h-full text-primary group-hover:text-secondary" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <svg class="w-full h-full text-tertiary2 group-hover:text-dark" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                               <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
                             </svg>
                           </div>
@@ -37,10 +37,10 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
                     <template x-if="index === feedbackData.currentStep">
                       <div class="flex items-center gap-3" aria-current="step">
                         <div class="relative flex w-5 h-5 shrink-0 items-center justify-center" aria-hidden="true">
-                          <span class="absolute w-4 h-4 rounded-full bg-primary-l2"></span>
-                          <span class="relative block w-2 h-2 rounded-full bg-primary"></span>
+                          <span class="absolute w-4 h-4 rounded-full bg-tertiary2/15"></span>
+                          <span class="relative block w-2 h-2 rounded-full bg-tertiary2"></span>
                         </div>
-                        <p class="hidden md:block font-p text-sm font-medium text-primary" x-text="step"></p>
+                        <p class="hidden md:block font-p text-sm font-medium text-tertiary2" x-text="step"></p>
                       </div>
                     </template>
 
@@ -72,7 +72,7 @@ <h2 class="font-h2 mb-6">
                 <input type="email" id="email" class="block input-box w-full mb-8" placeholder="{{ i18n "hub_managed_step_1_email_placeholder" }}" x-init="$el.focus()" x-model="submitData.email" @blur="$el.classList.add('show-invalid')" required>
                 <div class="mt-auto">
                   <p :class="{'hidden': !feedbackData.errorMessage}" class="text-sm text-red-600 mb-2" x-text="feedbackData.errorMessage"></p>
-                  <button :disabled="feedbackData.inProgress" @click.prevent="hubManaged.validateEmail()" class="btn btn-primary w-full md:w-64" data-umami-event="hub-managed-step-1">
+                  <button :disabled="feedbackData.inProgress" @click.prevent="hubManaged.validateEmail()" class="btn btn-tertiary2 w-full md:w-64" data-umami-event="hub-managed-step-1">
                     <i :class="{'fa-chevron-right': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                     {{ i18n "hub_managed_steps_next" }}
                   </button>
@@ -101,7 +101,7 @@ <h2 class="font-h2 mb-6">
                 <input type="text" class="block input-box w-full mb-8" :value="submitData.subdomain ? subdomainToURL(submitData.subdomain) : 'https://<{{ i18n "hub_managed_step_2_subdomain_placeholder" }}>.{{ .Site.Params.hubManagedDomain }}'" readonly>
                 <div class="mt-auto">
                   <p :class="{'hidden': !feedbackData.errorMessage}" class="text-sm text-red-600 mb-2" x-text="feedbackData.errorMessage"></p>
-                  <button :disabled="feedbackData.inProgress" @click.prevent="hubManaged.validateSubdomain()" class="btn btn-primary w-full md:w-64" data-umami-event="hub-managed-step-2">
+                  <button :disabled="feedbackData.inProgress" @click.prevent="hubManaged.validateSubdomain()" class="btn btn-tertiary2 w-full md:w-64" data-umami-event="hub-managed-step-2">
                     <i :class="{'fa-chevron-right': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                     {{ i18n "hub_managed_steps_next" }}
                   </button>
@@ -126,7 +126,7 @@ <h2 class="font-h2 mb-6">
                 <input type="number" id="quantity" min="1" max="10000" step="1" class="block input-box w-full mb-8" placeholder="{{ i18n "hub_managed_step_3_quantity_placeholder" }}" x-init="$el.focus()" x-model="submitData.quantity" @blur="$el.classList.add('show-invalid')" required>
                 <div class="mt-auto">
                   <p :class="{'hidden': !feedbackData.errorMessage}" class="text-sm text-red-600 mb-2" x-text="feedbackData.errorMessage"></p>
-                  <button :disabled="feedbackData.inProgress" @click.prevent="submitData.quantity > 0 && submitData.quantity < 3 ? lowQuantityModalIsOpen = true : hubManaged.validateQuantity()" class="btn btn-primary w-full md:w-64" data-umami-event="hub-managed-step-3">
+                  <button :disabled="feedbackData.inProgress" @click.prevent="submitData.quantity > 0 && submitData.quantity < 3 ? lowQuantityModalIsOpen = true : hubManaged.validateQuantity()" class="btn btn-tertiary2 w-full md:w-64" data-umami-event="hub-managed-step-3">
                     <i :class="{'fa-chevron-right': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                     {{ i18n "hub_managed_steps_next" }}
                   </button>
@@ -196,7 +196,7 @@ <h2 class="font-h2 mb-6">
                 </p>
                 <div class="mt-auto">
                   <p :class="{'hidden': !feedbackData.errorMessage}" class="text-sm text-red-600 mb-2" x-text="feedbackData.errorMessage"></p>
-                  <button :disabled="feedbackData.inProgress || !acceptTerms || captchaState == 'verifying'" type="submit" class="btn btn-primary w-full md:w-64" data-umami-event="hub-managed-form" x-cloak>
+                  <button :disabled="feedbackData.inProgress || !acceptTerms || captchaState == 'verifying'" type="submit" class="btn btn-tertiary2 w-full md:w-64" data-umami-event="hub-managed-form" x-cloak>
                     <i :class="{'fa-paper-plane': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                     {{ i18n "hub_managed_step_4_submit" }}
                   </button>
@@ -232,7 +232,7 @@ <h3 class="font-h3">
   <section class="container text-center pt-12 pb-24">
     <h2 class="font-h2 mb-4">{{ i18n "hub_managed_contact_us_title" . }}</h2>
     <p class="font-p mb-4">{{ i18n "hub_managed_contact_us_description" . | safeHTML }}</p>
-    <a href="{{ .Site.LanguagePrefix }}/contact-sales/" role="button" class="btn btn-outline-primary px-8" data-umami-event="hub-managed-contact-us">
+    <a href="{{ .Site.LanguagePrefix }}/contact-sales/" role="button" class="btn btn-outline-tertiary2 px-8" data-umami-event="hub-managed-contact-us">
       <i class="fa-solid fa-envelope"></i> {{ i18n "hub_managed_contact_us_button" . }}
     </a>
   </section>
diff --git a/layouts/hub-register/single.html b/layouts/hub-register/single.html
index d9f4a4f04..873b44566 100644
--- a/layouts/hub-register/single.html
+++ b/layouts/hub-register/single.html
@@ -23,7 +23,7 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
                   <a href="#" class="group" @click.prevent="feedbackData.currentStep = index" :data-umami-event="`hub-managed-nav-step-${index + 1}`">
                     <span class="flex items-center gap-3">
                       <div class="relative flex w-5 h-5 shrink-0 items-center justify-center">
-                        <svg class="w-full h-full text-primary group-hover:text-secondary" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <svg class="w-full h-full text-tertiary2 group-hover:text-dark" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                           <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
                         </svg>
                       </div>
@@ -35,7 +35,7 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
                 <template x-if="index < feedbackData.currentStep &amp;&amp; (feedbackData.success || feedbackData.emailSent)">
                   <span class="flex items-center gap-3">
                     <div class="relative flex w-5 h-5 shrink-0 items-center justify-center">
-                      <svg class="w-full h-full text-primary group-hover:text-secondary" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                      <svg class="w-full h-full text-tertiary2 group-hover:text-dark" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                         <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
                       </svg>
                     </div>
@@ -47,10 +47,10 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
                 <template x-if="index === feedbackData.currentStep">
                   <div class="flex items-center gap-3" aria-current="step">
                     <div class="relative flex w-5 h-5 shrink-0 items-center justify-center" aria-hidden="true">
-                      <span class="absolute w-4 h-4 rounded-full bg-primary-l2"></span>
-                      <span class="relative block w-2 h-2 rounded-full bg-primary"></span>
+                      <span class="absolute w-4 h-4 rounded-full bg-tertiary2/15"></span>
+                      <span class="relative block w-2 h-2 rounded-full bg-tertiary2"></span>
                     </div>
-                    <p class="hidden md:block font-p text-sm font-medium text-primary" x-text="step"></p>
+                    <p class="hidden md:block font-p text-sm font-medium text-tertiary2" x-text="step"></p>
                   </div>
                 </template>
 
@@ -83,7 +83,7 @@ <h2 class="font-h2 mb-6">
               <input type="email" id="email" class="block input-box w-full mb-8" placeholder="{{ i18n "hub_ce_registration_step_1_email_placeholder" }}" x-init="$el.focus()" x-model="submitData.email" @blur="$el.classList.add('show-invalid')" required>
               <div class="mt-auto">
                 <p :class="{'hidden': !feedbackData.errorMessage}" class="text-sm text-red-600 mb-2" x-text="feedbackData.errorMessage"></p>
-                <button :disabled="feedbackData.inProgress || !submitData.hubId || !submitData.returnUrl" @click.prevent="hubCE.validateEmail()" class="btn btn-primary w-full md:w-64" data-umami-event="hub-ce-registration-step-1">
+                <button :disabled="feedbackData.inProgress || !submitData.hubId || !submitData.returnUrl" @click.prevent="hubCE.validateEmail()" class="btn btn-tertiary2 w-full md:w-64" data-umami-event="hub-ce-registration-step-1">
                   <i :class="{'fa-chevron-right': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                   {{ i18n "hub_ce_registration_steps_next" }}
                 </button>
@@ -111,7 +111,7 @@ <h2 class="font-h2 mb-6">
               </p>
               <div class="mt-auto">
                 <p :class="{'hidden': !feedbackData.errorMessage}" class="text-sm text-red-600 mb-2" x-text="feedbackData.errorMessage"></p>
-                <button :disabled="feedbackData.inProgress || !acceptTerms || captchaState == 'verifying'" type="submit" class="btn btn-primary w-full md:w-64" data-umami-event="hub-managed-form" x-cloak>
+                <button :disabled="feedbackData.inProgress || !acceptTerms || captchaState == 'verifying'" type="submit" class="btn btn-tertiary2 w-full md:w-64" data-umami-event="hub-managed-form" x-cloak>
                   <i :class="{'fa-paper-plane': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fa-solid" aria-hidden="true"></i>
                   {{ i18n "hub_managed_step_4_submit" }}
                 </button>
@@ -159,11 +159,11 @@ <h2 class="font-h2 mb-6">
 
               <div class="mt-auto">
                 <!-- Disabled while the challenge is solved and the registration request runs -->
-                <button x-show="!(feedbackData.sessionVerified &amp;&amp; feedbackData.registered)" disabled class="btn btn-primary w-full md:w-64">
+                <button x-show="!(feedbackData.sessionVerified &amp;&amp; feedbackData.registered)" disabled class="btn btn-tertiary2 w-full md:w-64">
                   <i x-show="!feedbackData.errorMessage" class="fa-solid fa-spinner fa-spin mr-2" aria-hidden="true"></i>
                   {{ i18n "hub_billing_manage_license_key_transfer_action" }}
                 </button>
-                <a x-show="feedbackData.sessionVerified &amp;&amp; feedbackData.registered" :href="submitData.returnUrl + '?session=' + encodeURIComponent(submitData.session)" class="btn btn-primary w-full md:w-64" data-umami-event="hub-ce-registration-return-to-hub">
+                <a x-show="feedbackData.sessionVerified &amp;&amp; feedbackData.registered" :href="submitData.returnUrl + '?session=' + encodeURIComponent(submitData.session)" class="btn btn-tertiary2 w-full md:w-64" data-umami-event="hub-ce-registration-return-to-hub">
                   <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
                   {{ i18n "hub_billing_manage_license_key_transfer_action" }}
                 </a>
diff --git a/layouts/hub-self-hosted/single.html b/layouts/hub-self-hosted/single.html
index ee3cac463..be5bfff65 100644
--- a/layouts/hub-self-hosted/single.html
+++ b/layouts/hub-self-hosted/single.html
@@ -53,7 +53,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
           </label>
           <div class="mt-2 flex items-start">
             <div class="h-5 flex items-center">
-              <input id="k8sIncludeIngress" type="checkbox" class="rounded-sm text-primary focus:ring-0 focus:ring-offset-0 focus:border-secondary" x-model="cfg.k8s.includeIngress">
+              <input id="k8sIncludeIngress" type="checkbox" class="rounded-sm text-tertiary2 focus:ring-0 focus:ring-offset-0 focus:border-secondary" x-model="cfg.k8s.includeIngress">
             </div>
             <div class="ml-3 text-sm">
               <label for="k8sIncludeIngress" class="font-medium text-gray-700">
@@ -70,7 +70,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
           </label>
           <div class="mt-2 flex items-start">
             <div class="h-5 flex items-center">
-              <input id="composeIncludeTraefik" type="checkbox" class="rounded-sm text-primary focus:ring-0 focus:ring-offset-0 focus:border-secondary" x-model="cfg.compose.includeTraefik">
+              <input id="composeIncludeTraefik" type="checkbox" class="rounded-sm text-tertiary2 focus:ring-0 focus:ring-offset-0 focus:border-secondary" x-model="cfg.compose.includeTraefik">
             </div>
             <div class="ml-3 text-sm">
               <label for="composeIncludeTraefik" class="font-medium text-gray-700">
@@ -170,7 +170,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
             </label>
             <div class="mt-2 flex items-start">
               <div class="h-5 flex items-center">
-                <input id="externalKeycloak" type="checkbox" class="rounded-sm text-primary focus:ring-0 focus:ring-offset-0 focus:border-secondary" x-model="cfg.keycloak.useExternal" @change="cfg.keycloak.publicUrl">
+                <input id="externalKeycloak" type="checkbox" class="rounded-sm text-tertiary2 focus:ring-0 focus:ring-offset-0 focus:border-secondary" x-model="cfg.keycloak.useExternal" @change="cfg.keycloak.publicUrl">
               </div>
               <div class="ml-3 text-sm">
                 <label for="externalKeycloak" class="font-medium text-gray-700">
@@ -269,7 +269,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
       </section>
 
       <div class="text-center">
-        <div class="fa-stack text-2xl text-primary">
+        <div class="fa-stack text-2xl text-tertiary2">
           <i class="fa-regular fa-circle fa-stack-2x"></i>
           <i class="fa-solid fa-chevron-double-down fa-stack-1x"></i>
         </div>
@@ -309,7 +309,7 @@ <h2 class="text-lg font-medium leading-6 text-gray-900">
     <section class="container text-center py-12">
       <h2 class="font-h2 mb-4">{{ i18n "hub_setup_contact_us_title" . }}</h2>
       <p class="font-p mb-4">{{ i18n "hub_setup_contact_us_description" . | safeHTML }}</p>
-      <a href="mailto:hub@cryptomator.org" role="button" class="btn btn-outline-primary px-8" data-umami-event="hub-self-hosted-contact-us">
+      <a href="mailto:hub@cryptomator.org" role="button" class="btn btn-outline-tertiary2 px-8" data-umami-event="hub-self-hosted-contact-us">
         <i class="fa-solid fa-envelope"></i> {{ i18n "hub_setup_contact_us_button" . }}
       </a>
     </section>
diff --git a/layouts/index.html b/layouts/index.html
index ece9d22c9..0fec04ac0 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -4,8 +4,6 @@
   <link rel="prefetch" href="{{ .Site.LanguagePrefix }}/downloads/">
   <link rel="prefetch" href="{{ .Site.LanguagePrefix }}/hub/managed/">
   <link rel="preload" fetchpriority="high" as="image" href="/img/for-individuals/screenshot-1.png" type="image/png">
-  <link rel="preload" fetchpriority="low" as="image" href="/img/hub/screenshot-1.png" type="image/png">
-  <link rel="preload" fetchpriority="low" as="image" href="/img/hub/screenshot-2.png" type="image/png">
   <link rel="preload" fetchpriority="auto" href="/fonts/opensans-regular.reduced.woff2" as="font" type="font/woff2" crossorigin="anonymous">
   <link rel="preload" fetchpriority="auto" href="/fonts/opensans-medium.reduced.woff2" as="font" type="font/woff2" crossorigin="anonymous">
   <link rel="preload" fetchpriority="auto" href="/fonts/opensans-bold.reduced.woff2" as="font" type="font/woff2" crossorigin="anonymous">
@@ -15,14 +13,7 @@
   {{ partial "altcha-css.html" . }}
 {{ end }}
 {{ define "styles" }}
-  {{ if hugo.IsDevelopment }}
-    {{ $heroCss := resources.Get "css/hero.css" | css.TailwindCSS }}
-    <link rel="stylesheet" href="{{ $heroCss.RelPermalink }}" media="screen" />
-  {{ else }}
-    {{ $tailwindOpts := dict "minify" true }}
-    {{ $heroCss := resources.Get "css/hero.css" | css.TailwindCSS $tailwindOpts | fingerprint }}
-    <link rel="stylesheet" href="{{ $heroCss.RelPermalink }}" integrity="{{ $heroCss.Data.Integrity }}" media="screen" />
-  {{ end }}
+  {{ partial "page-css.html" "css/hero.css" }}
 {{ end }}
 {{ define "main" }}
   {{- /* baseof emits no padding for flush heroes, so the hero self-clears the fixed nav + banners; desktop padding already covers all banner combos, so only the mobile value scales below */ -}}
@@ -30,16 +21,16 @@
   {{- $showSaleBanner := .Scratch.Get "saleBannerActive" -}}
   {{- $showAnniversaryBanner := .Scratch.Get "anniversaryBannerActive" -}}
   {{- $showThinStrip := or $showWebinarBanner $showSaleBanner -}}
-  {{- $heroTopPad := "pt-16" -}}
+  {{- $heroTopPad := "pt-16 md:pt-24" -}}
   {{- if and $showThinStrip $showAnniversaryBanner -}}
-    {{- $heroTopPad = "pt-40" -}}
+    {{- $heroTopPad = "pt-40 md:pt-40" -}}
   {{- else if or $showThinStrip $showAnniversaryBanner -}}
-    {{- $heroTopPad = "pt-28" -}}
+    {{- $heroTopPad = "pt-28 md:pt-28" -}}
   {{- end -}}
   {{- /* The webinar banner hides itself client-side when no webinar is live/upcoming; collapse its reserved padding to match (mirrors baseof.html). */ -}}
   {{- $webinarIsThinStrip := and $showWebinarBanner (not $showSaleBanner) -}}
-  {{- $heroPadNoStrip := cond $showAnniversaryBanner "pt-28" "pt-16" -}}
-  <header class="hero-split-contrast relative overflow-hidden{{ if not $webinarIsThinStrip }} {{ $heroTopPad }}{{ end }} md:pt-24 lg:pt-24"{{ if $webinarIsThinStrip }} :class="webinar.state === 'none' ? '{{ $heroPadNoStrip }}' : '{{ $heroTopPad }}'"{{ end }}>
+  {{- $heroPadNoStrip := cond $showAnniversaryBanner "pt-28 md:pt-28" "pt-16 md:pt-24" -}}
+  <header class="hero-split-contrast relative overflow-hidden{{ if not $webinarIsThinStrip }} {{ $heroTopPad }}{{ end }}"{{ if $webinarIsThinStrip }} :class="webinar.state === 'none' ? '{{ $heroPadNoStrip }}' : '{{ $heroTopPad }}'"{{ end }}>
     <div class="hero-aura-wrap absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
       <div class="hero-aura hero-aura-primary"></div>
       <div class="hero-aura hero-aura-secondary"></div>
@@ -185,7 +176,7 @@ <h2 id="get-started" class="text-center font-h2 mb-4">{{ i18n "home_get_started_
         <div class="flex justify-between items-center p-4 border-b border-primary">
           <h3>
             <div class="flex items-center">
-              <img src="/img/logo.svg" class="hidden md:block h-8 mr-2 aspect-1110/942" alt="Logo"/>
+              <img src="/img/logo.svg" class="hidden md:block h-8 mr-2 aspect-1110/942" alt=""/>
               <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR</span>
             </div>
           </h3>
@@ -223,8 +214,7 @@ <h4 class="font-medium lg:text-lg leading-relaxed">
         <div class="flex justify-between items-center p-4 border-b border-tertiary2">
           <h3>
             <div class="flex items-center">
-              <img src="/img/zero-knowledge-bot.svg" class="hidden md:block h-8 mr-2 aspect-988/877" alt="Logo"/>
-              <span class="font-headline font-bold text-tertiary2 pb-px">CRYPTOMATOR HUB</span>
+              {{ partial "hub-wordmark.html" "hidden md:block h-8 mr-2" }}
             </div>
           </h3>
           <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-tertiary2/10 text-tertiary2">
diff --git a/layouts/partials/hub-managed-low-quantity.html b/layouts/partials/hub-managed-low-quantity.html
index 79156ca3d..961debabf 100644
--- a/layouts/partials/hub-managed-low-quantity.html
+++ b/layouts/partials/hub-managed-low-quantity.html
@@ -7,9 +7,9 @@
         <div class="p-4">
           <div class="md:flex md:items-start">
             <div class="shrink-0 text-center">
-              <div class="fa-stack text-2xl text-primary-l2 md:text-xl">
+              <div class="fa-stack text-2xl text-tertiary2/15 md:text-xl">
                 <i class="fa-solid fa-circle fa-stack-2x"></i>
-                <i class="fa-solid fa-lightbulb-on fa-stack-1x text-primary"></i>
+                <i class="fa-solid fa-lightbulb-on fa-stack-1x text-tertiary2"></i>
               </div>
             </div>
             <div class="mt-3 text-center md:ml-4 md:mt-0 md:text-left">
@@ -32,8 +32,8 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4" id="low-quant
             </div>
           </div>
         </div>
-        <div class="border-t border-primary p-4 md:flex md:flex-row-reverse md:items-center">
-          <a href="{{ .Site.LanguagePrefix }}/downloads/" role="button" class="btn btn-primary shrink-0 w-full mb-4 md:w-auto md:ml-3 md:mb-0">
+        <div class="border-t border-tertiary2 p-4 md:flex md:flex-row-reverse md:items-center">
+          <a href="{{ .Site.LanguagePrefix }}/downloads/" role="button" class="btn btn-tertiary2 shrink-0 w-full mb-4 md:w-auto md:ml-3 md:mb-0">
             {{ i18n "hub_managed_low_quantity_submit" }}
           </a>
           <button type="button" class="btn btn-outline-gray-500 shrink-0 w-full md:w-auto" @click.prevent="{{ .isOpen }} = false">
diff --git a/layouts/partials/hub-wordmark.html b/layouts/partials/hub-wordmark.html
new file mode 100644
index 000000000..77343b7ae
--- /dev/null
+++ b/layouts/partials/hub-wordmark.html
@@ -0,0 +1,5 @@
+{{- /* Hub brand lockup; context is the logo's class string ("" renders the
+   wordmark alone). The logo is decorative next to its own wordmark, hence
+   the empty alt. */ -}}
+{{- with . }}<img src="/img/zero-knowledge-bot.svg" class="{{ . }} aspect-988/877" alt=""/>{{ end -}}
+<span class="font-headline font-bold text-tertiary2 pb-px">CRYPTOMATOR HUB</span>
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index 9425561c3..3da429a09 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -37,8 +37,13 @@
       </button>
 
       <a class="flex items-center hover:no-underline p-2 lg:mr-2" href="{{ .Site.LanguagePrefix }}/">
-        <img src="/img/logo.svg" class="h-8 aspect-1110/942" alt="Logo"/>
-        <span class="{{ if not (or (in .RelPermalink "/downloads") (in .RelPermalink "/for-individuals") (in .RelPermalink "/for-teams")) }}hidden{{ end }} md:block font-headline font-bold ml-2 pb-px">CRYPTOMATOR</span>
+        {{- $hubNav := or .Params.hubNav (in .RelPermalink "/hub/") (eq .Type "solutions") -}}
+        {{ if $hubNav }}
+        <img src="/img/zero-knowledge-bot.svg" class="h-8 aspect-988/877" alt=""/>
+        {{ else }}
+        <img src="/img/logo.svg" class="h-8 aspect-1110/942" alt=""/>
+        {{ end }}
+        <span class="{{ if not (or (in .RelPermalink "/downloads") (in .RelPermalink "/for-individuals") (in .RelPermalink "/for-teams") $hubNav) }}hidden{{ end }} md:block font-headline font-bold{{ if and $hubNav (not .Params.darkNav) }} text-tertiary2{{ end }} ml-2 pb-px">CRYPTOMATOR{{ if $hubNav }} HUB{{ end }}</span>
       </a>
 
       <ul class="hidden lg:flex items-stretch list-none m-0">
diff --git a/layouts/partials/page-css.html b/layouts/partials/page-css.html
new file mode 100644
index 000000000..a52952fa3
--- /dev/null
+++ b/layouts/partials/page-css.html
@@ -0,0 +1,9 @@
+{{- /* Context is the asset path: {{ partial "page-css.html" "css/hero.css" }} */ -}}
+{{ if hugo.IsDevelopment }}
+  {{ $css := resources.Get . | css.TailwindCSS }}
+  <link rel="stylesheet" href="{{ $css.RelPermalink }}" media="screen" />
+{{ else }}
+  {{ $tailwindOpts := dict "minify" true }}
+  {{ $css := resources.Get . | css.TailwindCSS $tailwindOpts | fingerprint }}
+  <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}" media="screen" />
+{{ end }}
diff --git a/layouts/pricing/single.html b/layouts/pricing/single.html
index 52db0ea8f..454a070b2 100644
--- a/layouts/pricing/single.html
+++ b/layouts/pricing/single.html
@@ -58,11 +58,11 @@ <h2 class="text-center font-h2 mb-4">
           <div class="flex justify-between items-center p-4 border-b border-primary">
             <h3>
               <div class="flex items-center">
-                <img src="/img/logo.svg" class="hidden md:block h-8 mr-2 aspect-1110/942" alt="Logo"/>
+                <img src="/img/logo.svg" class="hidden md:block h-8 mr-2 aspect-1110/942" alt=""/>
                 <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR</span>
               </div>
             </h3>
-            <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark">
+            <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-primary/10 text-primary">
               {{ i18n "pricing_individual_title" . }}
             </div>
           </div>
@@ -159,14 +159,13 @@ <h3>
 
         {{/* Standard Card */}}
         <div class="white-box" :class="hosting === 'managed' && 'ring-2 ring-secondary'">
-          <div class="flex justify-between items-center p-4 border-b border-primary">
+          <div class="flex justify-between items-center p-4 border-b border-tertiary2">
             <h3>
               <div class="flex items-center">
-                <img src="/img/zero-knowledge-bot.svg" class="hidden md:block h-8 mr-2 aspect-988/877" alt="Logo"/>
-                <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR HUB</span>
+                {{ partial "hub-wordmark.html" "hidden md:block h-8 mr-2" }}
               </div>
             </h3>
-            <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark">
+            <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-tertiary2/10 text-tertiary2">
               {{ i18n "pricing_hub_standard_title" . }}
             </div>
           </div>
@@ -183,41 +182,41 @@ <h3>
             <p class="text-sm md:text-base lg:text-lg text-gray-500 mb-4">
               {{ i18n "pricing_hub_standard_price_description" . }}
             </p>
-            <a x-show="hosting === 'managed'" href="{{ .Site.LanguagePrefix }}/hub/managed/" role="button" class="btn btn-primary w-full" data-umami-event="pricing-hub-standard-managed-cta">
+            <a x-show="hosting === 'managed'" href="{{ .Site.LanguagePrefix }}/hub/managed/" role="button" class="btn btn-tertiary2 w-full" data-umami-event="pricing-hub-standard-managed-cta">
               {{ i18n "pricing_hub_managed_cta" . }}
             </a>
-            <a x-show="hosting === 'self-hosted'" href="{{ .Site.LanguagePrefix }}/hub/self-hosted/" role="button" class="btn btn-primary w-full" data-umami-event="pricing-hub-standard-self-hosted-cta">
+            <a x-show="hosting === 'self-hosted'" href="{{ .Site.LanguagePrefix }}/hub/self-hosted/" role="button" class="btn btn-tertiary2 w-full" data-umami-event="pricing-hub-standard-self-hosted-cta">
               {{ i18n "pricing_hub_self_hosted_cta" . }}
             </a>
           </div>
           <div class="px-4 py-8">
             <ul role="list" class="fa-ul text-sm lg:text-base ml-7 lg:ml-8 space-y-4">
               <li>
-                <span class="fa-li"><i class="fa-solid fa-plus text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-plus text-tertiary2"></i></span>
                 <span>{{ i18n "pricing_hub_standard_benefit_1" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-tertiary2"></i></span>
                 <span>{{ i18n "pricing_hub_standard_benefit_2" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-tertiary2"></i></span>
                 <span>{{ i18n "pricing_hub_standard_benefit_3" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-tertiary2"></i></span>
                 <span>{{ i18n "pricing_hub_standard_benefit_4" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-tertiary2"></i></span>
                 <span>{{ i18n "pricing_hub_standard_benefit_5" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid" :class="hosting === 'managed' ? 'fa-check text-primary' : 'fa-times text-red-600'"></i></span>
+                <span class="fa-li"><i class="fa-solid" :class="hosting === 'managed' ? 'fa-check text-tertiary2' : 'fa-times text-red-600'"></i></span>
                 <span :class="hosting === 'self-hosted' && 'text-gray-500'">{{ i18n "pricing_hub_standard_managed_benefit_1" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid" :class="hosting === 'managed' ? 'fa-check text-primary' : 'fa-times text-red-600'"></i></span>
+                <span class="fa-li"><i class="fa-solid" :class="hosting === 'managed' ? 'fa-check text-tertiary2' : 'fa-times text-red-600'"></i></span>
                 <span :class="hosting === 'self-hosted' && 'text-gray-500'">{{ i18n "pricing_hub_standard_managed_benefit_2" . }}</span>
               </li>
             </ul>
@@ -226,14 +225,13 @@ <h3>
 
         {{/* Enterprise Card */}}
         <div class="white-box">
-          <div class="flex justify-between items-center p-4 border-b border-primary">
+          <div class="flex justify-between items-center p-4 border-b border-tertiary2">
             <h3>
               <div class="flex items-center">
-                <img src="/img/zero-knowledge-bot.svg" class="hidden md:block h-8 mr-2 aspect-988/877" alt="Logo"/>
-                <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR HUB</span>
+                {{ partial "hub-wordmark.html" "hidden md:block h-8 mr-2" }}
               </div>
             </h3>
-            <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark">
+            <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-tertiary2/10 text-tertiary2">
               {{ i18n "pricing_hub_enterprise_title" . }}
             </div>
           </div>
@@ -247,7 +245,7 @@ <h3>
             <p class="text-sm md:text-base lg:text-lg text-gray-500 mb-4">
               {{ i18n "pricing_hub_enterprise_price_description" . }}
             </p>
-            <a href="{{ .Site.LanguagePrefix }}/contact-sales/" role="button" class="btn btn-primary w-full" data-umami-event="pricing-hub-enterprise-cta">
+            <a href="{{ .Site.LanguagePrefix }}/contact-sales/" role="button" class="btn btn-tertiary2 w-full" data-umami-event="pricing-hub-enterprise-cta">
               <i class="fa-solid fa-envelope"></i>
               {{ i18n "pricing_hub_enterprise_cta" . }}
             </a>
@@ -255,26 +253,26 @@ <h3>
           <div class="px-4 py-8">
             <ul role="list" class="fa-ul text-sm lg:text-base ml-7 lg:ml-8 space-y-4">
               <li>
-                <span class="fa-li"><i class="fa-solid fa-plus text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-plus text-tertiary2"></i></span>
                 <span>{{ i18n "pricing_hub_enterprise_benefit_1" . }}</span>
               </li>
               <li class="flex items-center">
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-tertiary2"></i></span>
                 <span>{{ i18n "pricing_hub_enterprise_benefit_2" . }}</span>
-                <span class="px-2 py-0.5 rounded-full text-xs font-medium bg-primary-l2 text-dark ml-2">
+                <span class="px-2 py-0.5 rounded-full text-xs font-medium bg-tertiary2/10 text-tertiary2 ml-2">
                   {{ i18n "coming_soon" . }}
                 </span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-tertiary2"></i></span>
                 <span>{{ i18n "pricing_hub_enterprise_benefit_3" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-tertiary2"></i></span>
                 <span>{{ i18n "pricing_hub_enterprise_benefit_4" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-tertiary2"></i></span>
                 <span>{{ i18n "pricing_hub_enterprise_benefit_5" . }}</span>
               </li>
             </ul>
@@ -286,11 +284,11 @@ <h3>
       <section class="mt-8 mb-4">
         <div class="white-box">
           {{/* Mobile: card header (matches other pricing cards) */}}
-          <div class="md:hidden flex justify-between items-center p-4 border-b border-primary">
+          <div class="md:hidden flex justify-between items-center p-4 border-b border-tertiary2">
             <h3>
-              <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR HUB</span>
+              {{ partial "hub-wordmark.html" "" }}
             </h3>
-            <div class="inline-flex px-4 py-1 rounded-full text-xs font-medium tracking-wide uppercase bg-primary-l2 text-dark">
+            <div class="inline-flex px-4 py-1 rounded-full text-xs font-medium tracking-wide uppercase bg-tertiary2/10 text-tertiary2">
               {{ i18n "pricing_hub_community_title" . }}
             </div>
           </div>
@@ -298,7 +296,7 @@ <h3>
           <div class="md:hidden p-4 border-b border-gray-200">
             <p class="font-p mb-6">{{ i18n "pricing_hub_community_subtitle" . }}</p>
             <p class="font-bold text-2xl leading-relaxed">{{ i18n "pricing_free" . }}</p>
-            <a href="{{ .Site.LanguagePrefix }}/hub/self-hosted/" role="button" class="btn btn-outline-primary w-full mt-4" data-umami-event="pricing-hub-community-self-hosted-cta">
+            <a href="{{ .Site.LanguagePrefix }}/hub/self-hosted/" role="button" class="btn btn-outline-tertiary2 w-full mt-4" data-umami-event="pricing-hub-community-self-hosted-cta">
               {{ i18n "pricing_hub_self_hosted_cta" . }}
             </a>
           </div>
@@ -306,11 +304,11 @@ <h3>
           <div class="md:hidden px-4 py-8">
             <ul role="list" class="fa-ul text-sm ml-7 space-y-4">
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-tertiary2"></i></span>
                 <span>{{ i18n "pricing_hub_community_benefit_1" . }}</span>
               </li>
               <li>
-                <span class="fa-li"><i class="fa-solid fa-check text-primary"></i></span>
+                <span class="fa-li"><i class="fa-solid fa-check text-tertiary2"></i></span>
                 <span>{{ i18n "pricing_hub_community_benefit_2" . }}</span>
               </li>
             </ul>
@@ -320,28 +318,27 @@ <h3>
             <div class="flex-1">
               <div class="flex items-center gap-3 mb-3">
                 <div class="flex items-center">
-                  <img src="/img/zero-knowledge-bot.svg" class="h-8 mr-2 aspect-988/877" alt="Logo"/>
-                  <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR HUB</span>
+                  {{ partial "hub-wordmark.html" "h-8 mr-2" }}
                 </div>
-                <div class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark">
+                <div class="inline-flex px-4 py-1 rounded-full text-sm font-medium tracking-wide uppercase bg-tertiary2/10 text-tertiary2">
                   {{ i18n "pricing_hub_community_title" . }}
                 </div>
               </div>
               <p class="font-p mb-4">{{ i18n "pricing_hub_community_subtitle" . }}</p>
               <div class="flex flex-wrap gap-x-6 gap-y-2 text-base">
                 <div class="flex items-center gap-2">
-                  <i class="fa-solid fa-check text-primary"></i>
+                  <i class="fa-solid fa-check text-tertiary2"></i>
                   <span>{{ i18n "pricing_hub_community_benefit_1" . }}</span>
                 </div>
                 <div class="flex items-center gap-2">
-                  <i class="fa-solid fa-check text-primary"></i>
+                  <i class="fa-solid fa-check text-tertiary2"></i>
                   <span>{{ i18n "pricing_hub_community_benefit_2" . }}</span>
                 </div>
               </div>
             </div>
             <div class="shrink-0 flex flex-col items-end text-right">
               <p class="font-bold text-3xl lg:text-4xl leading-relaxed">{{ i18n "pricing_free" . }}</p>
-              <a href="{{ .Site.LanguagePrefix }}/hub/self-hosted/" role="button" class="btn btn-outline-primary px-8 mt-4" data-umami-event="pricing-hub-community-self-hosted-cta">
+              <a href="{{ .Site.LanguagePrefix }}/hub/self-hosted/" role="button" class="btn btn-outline-tertiary2 px-8 mt-4" data-umami-event="pricing-hub-community-self-hosted-cta">
                 {{ i18n "pricing_hub_self_hosted_cta" . }}
               </a>
             </div>
@@ -374,10 +371,10 @@ <h2 class="font-h2">{{ i18n "faq_title" . }}</h2>
           <div>
             <h3 class="flex items-center gap-3 mb-4">
               <div class="flex items-center">
-                <img src="/img/logo.svg" class="hidden md:block h-8 mr-2 aspect-1110/942" alt="Logo"/>
+                <img src="/img/logo.svg" class="hidden md:block h-8 mr-2 aspect-1110/942" alt=""/>
                 <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR</span>
               </div>
-              <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark">
+              <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-primary/10 text-primary">
                 {{ i18n "pricing_faq_individual_badge" . }}
               </div>
             </h3>
@@ -398,10 +395,9 @@ <h3 class="flex items-center gap-3 mb-4">
           <div>
             <h3 class="flex items-center gap-3 mb-4">
               <div class="flex items-center">
-                <img src="/img/zero-knowledge-bot.svg" class="hidden md:block h-8 mr-2 aspect-988/877" alt="Logo"/>
-                <span class="font-headline font-bold text-primary pb-px">CRYPTOMATOR HUB</span>
+                {{ partial "hub-wordmark.html" "hidden md:block h-8 mr-2" }}
               </div>
-              <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-primary-l2 text-dark">
+              <div class="inline-flex px-4 py-1 rounded-full text-xs lg:text-sm font-medium tracking-wide uppercase bg-tertiary2/10 text-tertiary2">
                 {{ i18n "pricing_faq_teams_badge" . }}
               </div>
             </h3>
diff --git a/layouts/solutions/list.html b/layouts/solutions/list.html
index 46668ada7..1dc1fd704 100644
--- a/layouts/solutions/list.html
+++ b/layouts/solutions/list.html
@@ -13,25 +13,25 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
             <figure class="h-48 w-full relative flex-shrink-0">
             {{ if .Params.comingsoon }}
               <div class="absolute top-4 left-4 z-20">
-                <div class="inline-flex items-center gap-x-1.5 px-4 py-1 rounded-full text-xs font-medium tracking-wide uppercase border border-primary text-primary bg-transparent">
+                <div class="inline-flex items-center gap-x-1.5 px-4 py-1 rounded-full text-xs font-medium tracking-wide uppercase border border-tertiary2 text-tertiary2 bg-transparent">
                   <i class="fa-solid fa-hourglass-half"></i>
                   <span>{{ i18n "coming_soon" . }}</span>
                 </div>
               </div>
-              <div class="w-full h-full bg-primary-l2 opacity-50 flex items-center justify-center">
-                <i class="{{ $iconClass }} text-primary text-5xl opacity-60"></i>
+              <div class="w-full h-full bg-tertiary2/10 opacity-50 flex items-center justify-center">
+                <i class="{{ $iconClass }} text-tertiary2 text-5xl opacity-60"></i>
               </div>
             {{ else }}
               <a href="{{ .RelPermalink }}" class="block h-full group">
-                <div class="w-full h-full bg-primary-l2 flex items-center justify-center group-hover:bg-primary/90 transition-colors duration-300">
-                  <i class="{{ $iconClass }} text-primary group-hover:text-white text-5xl opacity-80 transition-colors duration-300"></i>
+                <div class="w-full h-full bg-tertiary2/10 flex items-center justify-center group-hover:bg-tertiary2/90 transition-colors duration-300">
+                  <i class="{{ $iconClass }} text-tertiary2 group-hover:text-white text-5xl opacity-80 transition-colors duration-300"></i>
                 </div>
               </a>
             {{ end }}
             </figure>
 
             <div class="p-6 {{ if .Params.comingsoon }}opacity-70{{ end }} flex-1 flex flex-col">
-              <h2 class="font-h2 mb-4 {{ if not .Params.comingsoon }}group-hover:text-primary transition-colors duration-200{{ end }}">
+              <h2 class="font-h2 mb-4 {{ if not .Params.comingsoon }}group-hover:text-tertiary2 transition-colors duration-200{{ end }}">
                 {{ if .Params.comingsoon }}
                   <span class="text-gray-600">{{ .Params.cardtitle }}</span>
                 {{ else }}
@@ -52,7 +52,7 @@ <h3 class="font-h2 mb-4 text-dark">{{ i18n "solutions_contact_title" . }}</h3>
       <p class="font-p text-gray-700 mb-6 max-w-2xl mx-auto">
         {{ i18n "solutions_contact_description" . }}
       </p>
-      <a href="/contact-sales/" class="btn btn-outline-primary px-8">
+      <a href="{{ .Site.LanguagePrefix }}/contact-sales/" class="btn btn-outline-tertiary2 px-8">
         <i class="fa-solid fa-envelope mr-2"></i>
         {{ i18n "solutions_contact_button" . }}
       </a>
diff --git a/layouts/solutions/single.html b/layouts/solutions/single.html
index e5bba49cc..8a4a7bea6 100644
--- a/layouts/solutions/single.html
+++ b/layouts/solutions/single.html
@@ -4,16 +4,15 @@
       <div class="max-w-4xl mx-auto">
         <div class="flex flex-wrap items-center justify-center gap-4 mb-6">
           <div class="flex items-center">
-            <img src="/img/zero-knowledge-bot.svg" class="h-8 aspect-988/877" alt="Logo"/>
-            <span class="font-headline font-bold text-primary ml-2 pb-px">CRYPTOMATOR HUB</span>
+            {{ partial "hub-wordmark.html" "h-8 mr-2" }}
           </div>
-          <span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">{{ .Title }}</span>
+          <span class="bg-tertiary2 text-white px-3 py-1 rounded-full text-sm font-medium">{{ .Title }}</span>
         </div>
         <h1 class="font-h1 mb-6">{{ .Params.hero_title | default .Title }}</h1>
         <p class="lead mb-8 max-w-4xl mx-auto">{{ .Params.hero_description | default .Description | safeHTML }}</p>
         <div class="flex flex-col md:flex-row gap-6 mb-6 justify-center">
-          <a href="{{ .Site.LanguagePrefix }}/for-teams/" role="button" class="btn btn-primary text-lg w-full md:w-64" data-umami-event="solutions-get-started">{{ i18n "solutions_hero_get_started" . }}</a>
-          <a href="{{ .Site.LanguagePrefix }}/book-a-demo/" role="button" class="btn btn-outline-primary text-lg w-full md:w-64" data-umami-event="solutions-book-demo">{{ i18n "solutions_hero_book_demo" . }}</a>
+          <a href="{{ .Site.LanguagePrefix }}/for-teams/" role="button" class="btn btn-tertiary2 text-lg w-full md:w-64" data-umami-event="solutions-get-started">{{ i18n "solutions_hero_get_started" . }}</a>
+          <a href="{{ .Site.LanguagePrefix }}/book-a-demo/" role="button" class="btn btn-outline-tertiary2 text-lg w-full md:w-64" data-umami-event="solutions-book-demo">{{ i18n "solutions_hero_book_demo" . }}</a>
         </div>
       </div>
     </header>
@@ -29,9 +28,9 @@ <h2 class="font-h2 mb-4">{{ .Params.use_cases_title | default "Use Cases" }}</h2
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
         {{ range .Params.use_cases }}
         <div class="white-box">
-          <div class="px-6 py-4 border-b border-primary">
+          <div class="px-6 py-4 border-b border-tertiary2">
             <h3 class="font-h3">
-              <i class="{{ .icon | default "fa-solid fa-building" }} text-primary mr-2"></i>
+              <i class="{{ .icon | default "fa-solid fa-building" }} text-tertiary2 mr-2"></i>
               {{ .title }}
             </h3>
           </div>
@@ -40,7 +39,7 @@ <h3 class="font-h3">
             <ul class="space-y-2">
               {{ range .features }}
               <li class="flex items-start">
-                <i class="fa-solid fa-check text-primary mt-1 mr-2 flex-shrink-0"></i>
+                <i class="fa-solid fa-check text-tertiary2 mt-1 mr-2 flex-shrink-0"></i>
                 <span class="font-p text-sm">{{ . }}</span>
               </li>
               {{ end }}
@@ -71,7 +70,7 @@ <h3 class="font-h2 mb-6">{{ .title }}</h3>
         <ul class="space-y-3">
           {{ range .details }}
           <li class="flex items-start">
-            <i class="fa-solid fa-check text-primary mt-1 mr-3 flex-shrink-0"></i>
+            <i class="fa-solid fa-check text-tertiary2 mt-1 mr-3 flex-shrink-0"></i>
             <span class="font-p">{{ . }}</span>
           </li>
           {{ end }}
@@ -97,7 +96,7 @@ <h3 class="font-h2 mb-6">{{ .title }}</h3>
         <ul class="space-y-3">
           {{ range .details }}
           <li class="flex items-start">
-            <i class="fa-solid fa-arrow-right text-primary mt-1 mr-3 flex-shrink-0"></i>
+            <i class="fa-solid fa-arrow-right text-tertiary2 mt-1 mr-3 flex-shrink-0"></i>
             <span class="font-p">{{ . }}</span>
           </li>
           {{ end }}
@@ -121,22 +120,22 @@ <h2 class="font-h2 mb-4">{{ .Params.success_stories_title }}</h2>
         <figure class="aspect-video relative">
           {{ if .comingsoon }}
             <div class="absolute top-4 left-4 z-20">
-              <div class="inline-flex items-center gap-x-1.5 px-4 py-1 rounded-full text-xs font-medium tracking-wide uppercase border border-primary text-primary bg-transparent">
+              <div class="inline-flex items-center gap-x-1.5 px-4 py-1 rounded-full text-xs font-medium tracking-wide uppercase border border-tertiary2 text-tertiary2 bg-transparent">
                 <i class="fa-solid fa-hourglass-half"></i>
                 <span>{{ i18n "coming_soon" . }}</span>
               </div>
             </div>
-            <div class="w-full h-full bg-primary-l2 opacity-50 flex items-center justify-center">
-              <i class="fa-solid fa-image text-primary text-4xl opacity-60"></i>
+            <div class="w-full h-full bg-tertiary2/10 opacity-50 flex items-center justify-center">
+              <i class="fa-solid fa-image text-tertiary2 text-4xl opacity-60"></i>
             </div>
           {{ else }}
-            <div class="w-full h-full bg-primary-l2 flex items-center justify-center">
-              <i class="fa-solid fa-image text-primary text-4xl opacity-80"></i>
+            <div class="w-full h-full bg-tertiary2/10 flex items-center justify-center">
+              <i class="fa-solid fa-image text-tertiary2 text-4xl opacity-80"></i>
             </div>
           {{ end }}
         </figure>
         <div class="p-6 {{ if .comingsoon }}opacity-70{{ end }}">
-          <h3 class="font-h2 mb-4 {{ if not .comingsoon }}group-hover:text-primary transition-colors duration-200{{ end }}">
+          <h3 class="font-h2 mb-4 {{ if not .comingsoon }}group-hover:text-tertiary2 transition-colors duration-200{{ end }}">
             {{ if .comingsoon }}
               <span class="text-gray-600">{{ .title }}</span>
             {{ else }}
@@ -180,7 +179,7 @@ <h2 id="faq" class="font-h2 mb-4">{{ i18n "faq_title" $ }}</h2>
   <section class="container text-center py-12">
     <h2 id="contact" class="font-h2 mb-4">{{ i18n "solutions_single_contact_title" . }}</h2>
     <p class="font-p text-gray-700 mb-6 max-w-3xl mx-auto">{{ i18n "solutions_single_contact_description" . | safeHTML }}</p>
-    <a href="{{ .Site.LanguagePrefix }}/contact-sales/" role="button" class="btn btn-outline-primary px-8" data-umami-event="solutions-implementation-contact">
+    <a href="{{ .Site.LanguagePrefix }}/contact-sales/" role="button" class="btn btn-outline-tertiary2 px-8" data-umami-event="solutions-implementation-contact">
       <i class="fa-solid fa-envelope"></i> {{ i18n "solutions_single_contact_button" . }}
     </a>
   </section>
diff --git a/static/img/clouds/dropbox.svg b/static/img/clouds/dropbox.svg
new file mode 100644
index 000000000..4ceb780ea
--- /dev/null
+++ b/static/img/clouds/dropbox.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 43 40" xmlns="http://www.w3.org/2000/svg">
+<path fill="#0061ff" d="M12.6 0 0 8.3l8.7 7 12.8-7.9zM0 22.1l12.6 8.3 8.9-7.3-12.8-7.9zm21.5 1 8.9 7.3 12.6-8.3-8.7-6.9zM43 8.3 30.4 0l-8.9 7.4 12.8 7.9zM21.5 24.7l-8.9 7.3-3.8-2.5v2.8L21.5 40l12.7-7.7v-2.8l-3.8 2.5z"/>
+</svg>
diff --git a/static/img/clouds/google-drive.svg b/static/img/clouds/google-drive.svg
new file mode 100644
index 000000000..7907720b5
--- /dev/null
+++ b/static/img/clouds/google-drive.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 87.3 78" xmlns="http://www.w3.org/2000/svg">
+<path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/>
+<path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0-1.2 4.5h27.5z" fill="#00ac47"/>
+<path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.5l5.85 11.5z" fill="#ea4335"/>
+<path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d"/>
+<path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc"/>
+<path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/>
+</svg>
diff --git a/static/img/clouds/icloud.svg b/static/img/clouds/icloud.svg
new file mode 100644
index 000000000..cd83f9f86
--- /dev/null
+++ b/static/img/clouds/icloud.svg
@@ -0,0 +1,48 @@
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   viewBox="0 0 80 52"
+   version="1.1"
+   id="svg2">
+  <defs
+     id="defs57">
+    <pattern
+       y="0"
+       x="0"
+       height="6"
+       width="6"
+       patternUnits="userSpaceOnUse"
+       id="EMFhbasepattern" />
+    <linearGradient
+       xlink:href="#linearGradient1070"
+       id="linearGradient1072"
+       x1="-108.90347"
+       y1="2124.834"
+       x2="-1137.1982"
+       y2="2110.6506"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.07740541,0,0,0.07740541,88.373952,-128.02586)" />
+    <linearGradient
+       id="linearGradient1070">
+      <stop
+         style="stop-color:#3e82f4;stop-opacity:1"
+         offset="0"
+         id="stop1066" />
+      <stop
+         style="stop-color:#93dcf7;stop-opacity:1"
+         offset="1"
+         id="stop1068" />
+    </linearGradient>
+  </defs>
+  <g
+     id="#ffffffff"
+     transform="translate(0,-1089)" />
+  <g
+     id="#2acbffff-4"
+     transform="matrix(0.74035173,0,0,0.75447038,-840.95699,-775.15387)"
+     style="fill:#00ff00" />
+  <path
+     style="opacity:1;fill:url(#linearGradient1072);fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 45.864371,0.751258 A 21.518704,21.518704 0 0 0 27.127725,11.764594 11.804325,11.804325 0 0 0 21.976186,10.573131 11.804325,11.804325 0 0 0 10.35494,20.48888 16.255137,16.255137 0 0 0 0.37795502,35.481798 16.255137,16.255137 0 0 0 16.640956,51.721206 16.255137,16.255137 0 0 0 18.679799,51.57426 h 45.187983 a 15.130063,15.202083 0 0 0 0.712824,0.03447 15.130063,15.202083 0 0 0 0.679264,-0.03447 h 1.082164 V 51.49383 A 15.130063,15.202083 0 0 0 79.703385,36.406573 V 36.3774 A 15.130063,15.202083 0 0 0 67.386251,21.477308 21.518704,21.518704 0 0 0 45.864371,0.751258 Z"
+     id="rect955" />
+</svg>
diff --git a/static/img/clouds/onedrive.svg b/static/img/clouds/onedrive.svg
new file mode 100644
index 000000000..f961628b7
--- /dev/null
+++ b/static/img/clouds/onedrive.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 5.5 32 20.5"><g id="STYLE_COLOR"><path d="M12.20245,11.19292l.00031-.0011,6.71765,4.02379,4.00293-1.68451.00018.00068A6.4768,6.4768,0,0,1,25.5,13c.14764,0,.29358.0067.43878.01639a10.00075,10.00075,0,0,0-18.041-3.01381C7.932,10.00215,7.9657,10,8,10A7.96073,7.96073,0,0,1,12.20245,11.19292Z" fill="#0364b8"/><path d="M12.20276,11.19182l-.00031.0011A7.96073,7.96073,0,0,0,8,10c-.0343,0-.06805.00215-.10223.00258A7.99676,7.99676,0,0,0,1.43732,22.57277l5.924-2.49292,2.63342-1.10819,5.86353-2.46746,3.06213-1.28859Z" fill="#0078d4"/><path d="M25.93878,13.01639C25.79358,13.0067,25.64764,13,25.5,13a6.4768,6.4768,0,0,0-2.57648.53178l-.00018-.00068-4.00293,1.68451,1.16077.69528L23.88611,18.19l1.66009.99438,5.67633,3.40007a6.5002,6.5002,0,0,0-5.28375-9.56805Z" fill="#1490df"/><path d="M25.5462,19.18437,23.88611,18.19l-3.80493-2.2791-1.16077-.69528L15.85828,16.5042,9.99475,18.97166,7.36133,20.07985l-5.924,2.49292A7.98889,7.98889,0,0,0,8,26H25.5a6.49837,6.49837,0,0,0,5.72253-3.41556Z" fill="#28a8ea"/></g></svg>
diff --git a/static/img/clouds/sharepoint.svg b/static/img/clouds/sharepoint.svg
new file mode 100644
index 000000000..d2676da0a
--- /dev/null
+++ b/static/img/clouds/sharepoint.svg
@@ -0,0 +1,41 @@
+<svg version="1.1" id="Livello_1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1992.333 1946"
+	 enable-background="new 0 0 1992.333 1946" xml:space="preserve">
+<circle fill="#036C70" cx="1019.333" cy="556" r="556"/>
+<circle fill="#1A9BA1" cx="1482.667" cy="1065.667" r="509.667"/>
+<circle fill="#37C6D0" cx="1088.833" cy="1552.167" r="393.833"/>
+<path opacity="0.1" enable-background="new    " d="M1112,501.79v988.753c-0.23,34.357-21.05,65.222-52.82,78.303
+	c-10.116,4.279-20.987,6.484-31.97,6.487H695.463c-0.463-7.877-0.463-15.29-0.463-23.167c-0.154-7.734,0.155-15.47,0.927-23.167
+	c8.48-148.106,99.721-278.782,235.837-337.77v-86.18c-302.932-48.005-509.592-332.495-461.587-635.427
+	c0.333-2.098,0.677-4.195,1.034-6.289c2.306-15.626,5.556-31.099,9.73-46.333h546.27C1073.964,417.178,1111.822,455.036,1112,501.79
+	z"/>
+<path opacity="0.2" enable-background="new    " d="M980.877,463.333H471.21c-51.486,302.386,151.908,589.256,454.293,640.742
+	c9.156,1.559,18.35,2.888,27.573,3.986c-143.633,68.11-248.3,261.552-257.196,420.938c-0.771,7.697-1.081,15.433-0.927,23.167
+	c0,7.877,0,15.29,0.463,23.167c0.836,15.574,2.85,31.063,6.023,46.333h279.39c34.357-0.23,65.222-21.05,78.303-52.82
+	c4.279-10.115,6.485-20.987,6.487-31.97V548.123C1065.443,501.387,1027.613,463.537,980.877,463.333z"/>
+<path opacity="0.2" enable-background="new    " d="M980.877,463.333H471.21c-51.475,302.414,151.95,589.297,454.364,640.773
+	c6.186,1.053,12.389,2.001,18.607,2.844c-139,73.021-239.543,266-248.254,422.05h284.95c46.681-0.353,84.437-38.109,84.79-84.79
+	V548.123C1065.489,501.369,1027.631,463.511,980.877,463.333z"/>
+<path opacity="0.2" enable-background="new    " d="M934.543,463.333H471.21c-48.606,285.482,130.279,560.404,410.977,631.616
+	C775.901,1216.384,710.711,1368.301,695.927,1529h238.617c46.754-0.178,84.612-38.036,84.79-84.79V548.123
+	C1019.308,501.306,981.361,463.359,934.543,463.333z"/>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="177.0788" y1="1551.0284" x2="842.2545" y2="398.9716" gradientTransform="matrix(1 0 0 -1 0 1948)">
+	<stop  offset="0" style="stop-color:#058F92"/>
+	<stop  offset="0.5" style="stop-color:#038489"/>
+	<stop  offset="1" style="stop-color:#026D71"/>
+</linearGradient>
+<path fill="url(#SVGID_1_)" d="M84.929,463.333h849.475c46.905,0,84.929,38.024,84.929,84.929v849.475
+	c0,46.905-38.024,84.929-84.929,84.929H84.929c-46.905,0-84.929-38.024-84.929-84.929V548.262
+	C0,501.357,38.024,463.333,84.929,463.333z"/>
+<path fill="#FFFFFF" d="M379.331,962.621c-19.903-13.202-36.528-30.777-48.604-51.384c-11.701-21.542-17.533-45.781-16.912-70.288
+	c-1.042-33.181,10.155-65.586,31.46-91.045c22.388-25.49,51.326-44.366,83.678-54.581c36.871-12.136,75.49-18.116,114.304-17.699
+	c51.043-1.865,102.015,5.272,150.583,21.082v106.567c-21.103-12.784-44.088-22.166-68.11-27.8
+	c-26.065-6.392-52.81-9.597-79.647-9.545c-28.3-1.039-56.419,4.913-81.871,17.329c-19.65,8.475-32.392,27.807-32.433,49.206
+	c-0.08,12.981,4.907,25.481,13.9,34.843c10.622,11.037,23.187,20.021,37.067,26.503c15.444,7.691,38.611,17.916,69.5,30.673
+	c3.401,1.075,6.716,2.407,9.915,3.985c30.401,11.881,59.729,26.344,87.663,43.229c21.154,13.043,38.908,30.924,51.801,52.171
+	c13.218,24.085,19.625,51.315,18.533,78.767c1.509,34.066-8.913,67.591-29.468,94.798c-20.488,25.012-47.88,43.446-78.767,53.005
+	c-36.329,11.387-74.245,16.892-112.312,16.309c-34.154,0.155-68.258-2.635-101.933-8.34c-28.434-4.653-56.182-12.807-82.612-24.279
+	v-112.358c25.264,18.043,53.489,31.529,83.4,39.847c29.81,9.289,60.798,14.251,92.018,14.734c28.895,1.83,57.739-4.291,83.4-17.699
+	c17.976-10.144,28.909-29.358,28.449-49.994c0.12-14.359-5.56-28.158-15.753-38.271c-12.676-12.444-27.352-22.671-43.414-30.256
+	c-18.533-9.267-45.824-21.483-81.871-36.65C432.618,993.951,405.161,979.594,379.331,962.621z"/>
+</svg>
diff --git a/static/img/hub/avatar-1.svg b/static/img/hub/avatar-1.svg
new file mode 100644
index 000000000..17f86f798
--- /dev/null
+++ b/static/img/hub/avatar-1.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs><clipPath id="c"><circle cx="32" cy="32" r="32"/></clipPath></defs>
+  <g clip-path="url(#c)">
+    <rect width="64" height="64" fill="#ebf5eb"/>
+    <path d="M19.5 26 Q19.5 14 32 14 Q44.5 14 44.5 26 L44.5 41 Q44.5 45 40 45 H24 Q19.5 45 19.5 41 Z" fill="#2f4f4f"/>
+    <path d="M8 66 Q9 41 32 41 Q55 41 55 66 Z" fill="#1e2b33"/>
+    <rect x="28.5" y="32" width="7" height="10" rx="2.5" fill="#f2c9a7"/>
+    <circle cx="32" cy="27.5" r="9.5" fill="#f2c9a7"/>
+    <path d="M21.2 27 Q21.2 15.8 32 15.8 Q42.8 15.8 42.8 27 Q42.8 21.5 32 21.5 Q21.2 21.5 21.2 27 Z" fill="#2f4f4f"/>
+    
+  </g>
+</svg>
diff --git a/static/img/hub/avatar-2.svg b/static/img/hub/avatar-2.svg
new file mode 100644
index 000000000..afc130f19
--- /dev/null
+++ b/static/img/hub/avatar-2.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs><clipPath id="c"><circle cx="32" cy="32" r="32"/></clipPath></defs>
+  <g clip-path="url(#c)">
+    <rect width="64" height="64" fill="#e8eef4"/>
+    
+    <path d="M8 66 Q9 41 32 41 Q55 41 55 66 Z" fill="#49b04a"/>
+    <rect x="28.5" y="32" width="7" height="10" rx="2.5" fill="#e0ac69"/>
+    <circle cx="32" cy="27.5" r="9.5" fill="#e0ac69"/>
+    <path d="M21.2 27 Q21.2 15.8 32 15.8 Q42.8 15.8 42.8 27 Q42.8 21.5 32 21.5 Q21.2 21.5 21.2 27 Z" fill="#1e2b33"/>
+    
+  </g>
+</svg>
diff --git a/static/img/hub/avatar-3.svg b/static/img/hub/avatar-3.svg
new file mode 100644
index 000000000..79418e0ff
--- /dev/null
+++ b/static/img/hub/avatar-3.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs><clipPath id="c"><circle cx="32" cy="32" r="32"/></clipPath></defs>
+  <g clip-path="url(#c)">
+    <rect width="64" height="64" fill="#eef4f0"/>
+    
+    <path d="M8 66 Q9 41 32 41 Q55 41 55 66 Z" fill="#008a7b"/>
+    <rect x="28.5" y="32" width="7" height="10" rx="2.5" fill="#eab68a"/>
+    <circle cx="32" cy="27.5" r="9.5" fill="#eab68a"/>
+    <path d="M21.2 27 Q21.2 15.8 32 15.8 Q42.8 15.8 42.8 27 Q42.8 21.5 32 21.5 Q21.2 21.5 21.2 27 Z" fill="#233042"/>
+    <circle cx="32" cy="13.5" r="4.5" fill="#233042"/>
+  </g>
+</svg>
diff --git a/static/img/hub/avatar-4.svg b/static/img/hub/avatar-4.svg
new file mode 100644
index 000000000..0eddf573d
--- /dev/null
+++ b/static/img/hub/avatar-4.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs><clipPath id="c"><circle cx="32" cy="32" r="32"/></clipPath></defs>
+  <g clip-path="url(#c)">
+    <rect width="64" height="64" fill="#f1f3f5"/>
+    
+    <path d="M8 66 Q9 41 32 41 Q55 41 55 66 Z" fill="#354960"/>
+    <rect x="28.5" y="32" width="7" height="10" rx="2.5" fill="#c68642"/>
+    <circle cx="32" cy="27.5" r="9.5" fill="#c68642"/>
+    <path d="M21.2 27 Q21.2 15.8 32 15.8 Q42.8 15.8 42.8 27 Q42.8 21.5 32 21.5 Q21.2 21.5 21.2 27 Z" fill="#14202b"/>
+    
+  </g>
+</svg>
diff --git a/static/img/hub/avatar-6.svg b/static/img/hub/avatar-6.svg
new file mode 100644
index 000000000..5472d77d3
--- /dev/null
+++ b/static/img/hub/avatar-6.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs><clipPath id="c"><circle cx="32" cy="32" r="32"/></clipPath></defs>
+  <g clip-path="url(#c)">
+    <rect width="64" height="64" fill="#ebf5eb"/>
+    <path d="M19.5 26 Q19.5 13.5 32 13.5 Q44.5 13.5 44.5 26 L44.5 31 Q44.5 36 39.5 36 H24.5 Q19.5 36 19.5 31 Z" fill="#10181f"/>
+    <path d="M8 66 Q9 41 32 41 Q55 41 55 66 Z" fill="#2f5d50"/>
+    <rect x="28.5" y="32" width="7" height="10" rx="2.5" fill="#8d5524"/>
+    <circle cx="32" cy="27.5" r="9.5" fill="#8d5524"/>
+    <path d="M21.2 27 Q21.2 15.8 32 15.8 Q42.8 15.8 42.8 27 Q42.8 21.5 32 21.5 Q21.2 21.5 21.2 27 Z" fill="#10181f"/>
+    
+  </g>
+</svg>
diff --git a/static/img/hub/header-clouds.png b/static/img/hub/header-clouds.png
new file mode 100644
index 000000000..e304b0c7b
Binary files /dev/null and b/static/img/hub/header-clouds.png differ
diff --git a/static/img/hub/workflow-1-vaults.png b/static/img/hub/workflow-1-vaults.png
new file mode 100644
index 000000000..8fe4c11d9
Binary files /dev/null and b/static/img/hub/workflow-1-vaults.png differ
diff --git a/static/img/hub/workflow-2-access.png b/static/img/hub/workflow-2-access.png
new file mode 100644
index 000000000..9f49a036d
Binary files /dev/null and b/static/img/hub/workflow-2-access.png differ
diff --git a/static/img/hub/workflow-3-unlock.png b/static/img/hub/workflow-3-unlock.png
new file mode 100644
index 000000000..3e26f4714
Binary files /dev/null and b/static/img/hub/workflow-3-unlock.png differ
diff --git a/static/img/hub/workflow-4-audit.png b/static/img/hub/workflow-4-audit.png
new file mode 100644
index 000000000..26cf176cf
Binary files /dev/null and b/static/img/hub/workflow-4-audit.png differ