From b60e270f4c4f6b3a4da8ac8b9dd5b5edd31e49fc Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Sun, 15 Feb 2026 20:30:02 +0100
Subject: [PATCH] refactor(webapp): vue3 migration os button as prop, remove
 obsolete buttons & inline single user buttons (#9214)

---
 .../the_unread_counter_is_removed.js          |   2 +-
 packages/ui/PROJEKT.md                        | 215 +++++++-----------
 .../src/components/OsButton/OsButton.spec.ts  |  59 +++++
 .../components/OsButton/OsButton.stories.ts   |  46 +++-
 .../OsButton/OsButton.visual.spec.ts          |   9 +
 .../ui/src/components/OsButton/OsButton.vue   |  36 ++-
 .../__screenshots__/chromium/polymorphic.png  | Bin 0 -> 19003 bytes
 .../JoinLeaveButton.spec.js.snap              |   2 +-
 webapp/components/Chat/Chat.vue               |  26 +--
 .../ChatNotificationMenu.vue                  |  33 +--
 .../components/CustomButton/CustomButton.vue  |  68 +++---
 webapp/components/Editor/Editor.vue           |  28 ++-
 webapp/components/Editor/LinkInput.vue        |  33 ---
 webapp/components/Emotions/Emotions.spec.js   | 124 ----------
 webapp/components/Emotions/Emotions.vue       | 120 ----------
 .../Empty/CallToAction/CtaUnblockAuthor.vue   |  18 +-
 .../CtaJoinLeaveGroup.spec.js.snap            |   2 +-
 .../CtaUnblockAuthor.spec.js.snap             |   8 +-
 .../components/FilterMenu/CategoriesMenu.vue  |  50 ----
 webapp/components/Group/GroupButton.vue       |  28 ---
 webapp/components/Group/GroupForm.vue         |   6 +-
 webapp/components/Group/GroupLink.vue         |  15 --
 webapp/components/HeaderMenu/HeaderMenu.vue   |  82 ++++++-
 webapp/components/Map/MapButton.vue           |  41 ----
 .../NotificationMenu/NotificationMenu.vue     |  63 ++---
 .../UserTeaser/UserTeaserPopover.vue          |  12 +-
 .../users/__snapshots__/index.spec.js.snap    |  48 ++--
 webapp/pages/admin/users/index.vue            |  18 +-
 .../_id/__snapshots__/_slug.spec.js.snap      | 156 ++++++-------
 webapp/pages/groups/_id/_slug.vue             |  32 ++-
 webapp/pages/groups/index.vue                 |  36 +--
 webapp/pages/index.vue                        |  45 ++--
 .../_id/__snapshots__/_slug.spec.js.snap      |  88 +++----
 webapp/pages/profile/_id/_slug.vue            |  46 ++--
 webapp/pages/terms-and-conditions-confirm.vue |  14 +-
 35 files changed, 640 insertions(+), 969 deletions(-)
 create mode 100644 packages/ui/src/components/OsButton/__screenshots__/chromium/polymorphic.png
 delete mode 100644 webapp/components/Editor/LinkInput.vue
 delete mode 100644 webapp/components/Emotions/Emotions.spec.js
 delete mode 100644 webapp/components/Emotions/Emotions.vue
 delete mode 100644 webapp/components/FilterMenu/CategoriesMenu.vue
 delete mode 100644 webapp/components/Group/GroupButton.vue
 delete mode 100644 webapp/components/Group/GroupLink.vue
 delete mode 100644 webapp/components/Map/MapButton.vue

diff --git a/cypress/support/step_definitions/Notification.Mention/the_unread_counter_is_removed.js b/cypress/support/step_definitions/Notification.Mention/the_unread_counter_is_removed.js
index 771d66c3c..60f43bb43 100644
--- a/cypress/support/step_definitions/Notification.Mention/the_unread_counter_is_removed.js
+++ b/cypress/support/step_definitions/Notification.Mention/the_unread_counter_is_removed.js
@@ -1,6 +1,6 @@
 import { defineStep } from '@badeball/cypress-cucumber-preprocessor'
 
 defineStep('the unread counter is removed', () => {
-  cy.get('.notifications-menu .counter-icon')
+  cy.get('.notifications-menu .counter-icon .count')
     .should('not.exist')
 })
diff --git a/packages/ui/PROJEKT.md b/packages/ui/PROJEKT.md
index adc35f605..96fedf07e 100644
--- a/packages/ui/PROJEKT.md
+++ b/packages/ui/PROJEKT.md
@@ -106,114 +106,47 @@ OsButton Features:
 ├─ variant:     ✅ primary, secondary, danger, warning, success, info, default
 ├─ appearance:  ✅ filled, outline, ghost
 ├─ size:        ✅ sm, md, lg, xl
-├─ disabled:    ✅ mit hover/active-Override
+├─ disabled:    ✅ mit hover/active-Override (nur as="button")
 ├─ icon:        ✅ slot-basiert (icon-system-agnostisch)
 ├─ circle:      ✅ rounded-full, größenabhängig (p-1.5 bis p-3)
-└─ loading:     ✅ animated SVG spinner, aria-busy (Milestone 4b)
+├─ loading:     ✅ animated SVG spinner, aria-busy (Milestone 4b)
+└─ as:          ✅ polymorphes Rendering (button/a/NuxtLink/RouterLink)
+
+as-Prop Migration:  15 <nuxt-link>/<a>-Wrapper in 15 Webapp-Dateien → as="nuxt-link"/as="a"
 ```
 
 ---
 
 ## Aktueller Stand
 
-**Letzte Aktualisierung:** 2026-02-13 (Session 19)
+**Letzte Aktualisierung:** 2026-02-14 (Session 20)
 
-**Aktuelle Phase:** Phase 3 ✅ ABGESCHLOSSEN + Code-Review-Feedback eingearbeitet
+**Aktuelle Phase:** Phase 3 ✅ ABGESCHLOSSEN + Code-Review-Feedback + `as`-Prop-Migration
 
-**Zuletzt abgeschlossen:**
-- [x] Projektordner erstellt
-- [x] Planungsdokument erstellt
-- [x] Tech-Stack entschieden
-- [x] Branding-Architektur definiert
-- [x] Migrationsstrategie definiert
-- [x] **Phase 0: Komponenten-Analyse** (177 Komponenten katalogisiert)
-- [x] Button-Familie detailiert analysiert (Props, Styles, Konsolidierung)
-- [x] Modal-Familie detailiert analysiert (Architektur erkannt)
-- [x] Menu-Familie detailiert analysiert (3 Patterns identifiziert)
-- [x] Priorisierung erstellt (15 Komponenten in 4 Tiers)
-- [x] Konsolidierungsplan finalisiert
-- [x] **Phase 1: Vue 2.7 Upgrade** ✅
-  - Vue 2.6.14 → 2.7.16
-  - vue-template-compiler entfernt
-  - @vue/composition-api entfernt
-  - @nuxtjs/composition-api entfernt
-  - Webpack-Alias für @vue/composition-api → vue
-  - Webpack-Regel für ESM .mjs Module
-  - **Unit-Tests: 157 Suites, 979 passed, 87 Snapshots** ✅
-  - **Integrationstests: bestanden** ✅
-- [x] **Phase 2: Projekt-Setup** ✅
-  - Vite + Vue 3 Projekt initialisiert
-  - vue-demi für Vue 2/3 Kompatibilität
-  - Vitest konfiguriert (integriert in vite.config.ts)
-  - npm Package-Struktur mit korrekten exports
-  - README.md Grundgerüst
-  - LICENSE (Apache 2.0)
-  - Plugin-Tests geschrieben
-  - Tailwind CSS v4 mit @tailwindcss/vite
-  - Dual-Build (style.css + tailwind.preset)
-  - Dark Mode Grundstruktur (via Tailwind dark: Prefix)
-  - Prop-Types definiert (Size, Rounded, Shadow, Variant)
-  - Branding-Architektur (keine Defaults, validateCssVariables)
-  - eslint-config-it4c eingerichtet (v0.8.0)
-  - ESLint Flat Config mit Vue 3 + Vitest Modulen
-  - Prettier-Integration via eslint-plugin-prettier
-  - GitHub Workflows (ui-lint.yml, ui-test.yml, ui-build.yml)
-  - 100% Test-Coverage Requirement
-  - .tool-versions (Node 25.5.0, konsistent mit Dockerfiles)
-  - Example Apps für Kompatibilitätstests (4er-Matrix)
-  - GitHub Workflow ui-compatibility.yml für Vue 2/3 Tests (inkl. Lint)
-  - Eigene ESLint + Prettier Configs für Example Apps
-  - Type Assertions für CI-Kompatibilität (`as unknown as Plugin`)
-  - Bundle Size Check (size-limit) mit ui-size.yml Workflow
-  - Package-Validierung (publint, arethetypeswrong) mit CJS/ESM Types
-  - Kompatibilitätstest-Workflow mit 4 Example Apps (Vue 2/3 × Tailwind/CSS)
-  - release-please Manifest-Konfiguration (Monorepo-Setup)
-  - npm Publish Workflow (ui-release.yml)
-  - CONTRIBUTING.md (Entwickler-Leitfaden)
-  - Dependabot für UI-Package und Example Apps konfiguriert
-  - CSS-Build separat via Tailwind CLI (closeBundle Hook)
-  - CVA (class-variance-authority) für typsichere Varianten
-  - cn() Utility für Tailwind-Klassen-Merge (clsx + tailwind-merge)
-  - OsButton Komponente mit CVA-Varianten implementiert
-  - ESLint-Konfiguration angepasst (vue/max-attributes-per-line, import-x/no-relative-parent-imports)
-  - Storybook 10 für Dokumentation eingerichtet (Wasserfarben-Theme)
-  - OsButton.stories.ts mit Playground + allen Varianten/Appearances/Sizes
-  - Storybook Build-Konfiguration (viteFinal entfernt Library-Plugins)
-  - Docker Setup (Dockerfile, docker-compose, ui-docker.yml)
-  - Visual Regression Tests (Playwright, colocated) mit integriertem A11y-Check
-  - Completeness Check (verify Script prüft Story, Visual, checkA11y, Keyboard, Varianten)
-  - ESLint Plugins: vuejs-accessibility, playwright, storybook, jsdoc
+**Abgeschlossene Phasen:**
+- [x] Phase 0: Analyse (177 Komponenten katalogisiert)
+- [x] Phase 1: Vue 2.7 Upgrade (2.6.14 → 2.7.16, 979 Tests ✅)
+- [x] Phase 2: Projekt-Setup (Vite, vue-demi, Tailwind v4, CVA, Storybook 10, CI/CD, 100% Coverage)
+- [x] Phase 3: Webapp-Integration — 133 os-button in 79 Dateien, 0 base-button/ds-button verbleibend
 
-**Zuvor abgeschlossen (Session 18 - CodeRabbit Review Feedback: data-test Selektoren, Accessibility, Bugfixes):**
-- [x] Cypress-Selektoren: `.user-content-menu button` → `[data-test="content-menu-button"]` (2 Step-Definitions)
-- [x] Cypress-Selektoren: `.content-menu button` → `[data-test="content-menu-button"]` (Admin.PinPost + ReportContent)
-- [x] muted-users.vue: `data-test="unmute-btn"` + `aria-label` auf Unmute-Button
-- [x] blocked-users.vue: `data-test="unblock-btn"` + `aria-label` auf Unblock-Button
-- [x] ProfileList.vue: `data-test="load-all-connections-btn"` + FollowList.spec.js Selektoren aktualisiert
-- [x] FollowButton.vue: `data-test="follow-btn"` + Spec-Selektoren aktualisiert
-- [x] JoinLeaveButton.vue: `data-test="join-leave-btn"` + `.native` von `@mouseenter`/`@mouseleave` entfernt
-- [x] LoginButton.vue: `data-test="login-btn"` + `aria-label="$t('login.login')"` + Spec-Selektoren aktualisiert
-- [x] ReportRow.spec.js: `button[data-variant="danger"]` → `[data-test="confirm"]`
-- [x] CtaJoinLeaveGroup.spec.js: Selektor auf `[data-test="join-leave-btn"]` aktualisiert
-- [x] DisableModal.vue: `finally { this.loading = false }` für Loading-State-Reset
-- [x] ReleaseModal.vue: `:loading="loading"` + `this.loading = true` + `finally { this.loading = false }`
-- [x] ChangePassword.vue: `:disabled="errors"` → `:disabled="!!errors"` (Boolean-Cast)
-- [x] Password/Change.vue: Unbenutzte `disabled: true` aus data() entfernt + 2 tote Tests entfernt
-- [x] MenuBar.vue: Unbenutztes `ref="linkButton"` entfernt
-- [x] GroupForm.vue: Cancel-Button `variant="default" appearance="filled"` (per User-Anweisung)
-- [x] `appearance="filled"` ergänzt: donations.vue, LoginForm.vue, EnterNonce.vue
-- [x] LoginForm.vue: CSS `.login-form button` → `.login-form button[type='submit']`
-- [x] pages/index.vue: Redundantes `class="my-filter-button"` von `<base-icon>` entfernt
-- [x] MySomethingList.vue: `:title` + `:aria-label` auf Edit/Delete-Buttons (Tooltip beibehalten)
-- [x] A11y aria-label auf icon-only Buttons: admin/users (search + edit), AddChatRoomByUserSearch (close), EmbedComponent (close), groups/index (create), profile/_id/_slug (new post), groups/_id/_slug (new post), CustomButton (2x tooltip), HeaderMenu (hamburger), ImageUploader (crop-cancel), ContentMenu (menu), HeaderButton (filter-remove), InviteButton (invite)
-- [x] post/_id/_slug/index.vue: Zustandsabhängiges `aria-label` (`post.sensitiveContent.show/hide`)
-- [x] ComponentSlider.vue: `aria-label` mit Interpolation (`component-slider.step`)
-- [x] i18n: `actions.search`, `actions.close`, `actions.menu` in allen 9 Sprachdateien
-- [x] i18n: `site.navigation` in allen 9 Sprachdateien
-- [x] i18n: `post.sensitiveContent.show/hide` in allen 9 Sprachdateien
-- [x] i18n: `component-slider.step` in allen 9 Sprachdateien
+**Zuletzt abgeschlossen (Session 20 - `as`-Prop + nuxt-link Migration):**
+- [x] OsButton: `as` Prop implementiert (polymorphe Komponente: `button`, `a`, `nuxt-link`, `router-link`, Custom-Komponenten)
+- [x] Naming-Konvention: `tag` → `as` (moderner Standard: Headless UI, Radix Vue, Chakra UI, PrimeVue)
+- [x] `disabled`/`type`/`loading` nur bei `as="button"` (Links haben kein natives `disabled`-Attribut)
+- [x] Stories: `Polymorphic` Story + Playground `as`-Selektor (button/a)
+- [x] Visual Test: `polymorphic` Screenshot + a11y-Check
+- [x] 15 `<nuxt-link>`/`<a>`-Wrapper in 15 Webapp-Dateien → `as="nuxt-link"` / `as="a"` migriert:
+  - GroupButton.vue, CtaUnblockAuthor.vue, terms-and-conditions-confirm.vue
+  - CustomButton.vue (v-if/v-else → computed `linkTag`/`linkProps` konsolidiert)
+  - groups/index.vue, GroupForm.vue, admin/users/index.vue
+  - pages/index.vue (CSS `button.post-add-button-*` → `.post-add-button-*`)
+  - profile/_id/_slug.vue (v-if auf ds-grid-item, symmetrisches Padding `$space-x-small`)
+  - groups/_id/_slug.vue, MapButton.vue
+  - ChatNotificationMenu.vue, Chat.vue, UserTeaserPopover.vue
+  - NotificationMenu.vue (3 Instanzen, 2 zu einem Button konsolidiert via counter-icon)
+- [x] Verifiziert: 0 verbleibende `<nuxt-link>`/`<a>`-Wrapper um `<os-button>` in Webapp
 
-**Zuletzt abgeschlossen (Session 19 - CodeRabbit Review Feedback: Cleanup, Accessibility, Bugfixes):**
+**Zuvor abgeschlossen (Session 19 - CodeRabbit Review Feedback: Cleanup, Accessibility, Bugfixes):**
 - [x] donations.vue: Redundantes `:checked="showDonations"` entfernt (v-model setzt checked bereits)
 - [x] MySomethingList.vue: Disabled-Logik vereinfacht `!(!isEditing || (isEditing && !disabled))` → `isEditing && disabled`
 - [x] button.variants.ts: Hardcoded Fallback `#e5e3e8` entfernt → `var(--color-disabled)` (konsistent mit filled/index.css)
@@ -253,7 +186,36 @@ OsButton Features:
 - [x] HeaderMenu.vue: `beforeDestroy`-Hook ergänzt — Scroll-Listener wird jetzt entfernt (Memory-Leak)
 - [x] MenuLegend.vue: `variant="primary"` auf Trigger-Button (konsistent mit Toolbar-Buttons in MenuBar.vue)
 
-**Zuvor abgeschlossen (Session 18 - Code-Review Feedback, OsButton Refactoring, Accessibility):**
+**Zuvor abgeschlossen (Session 18 - CodeRabbit Review Feedback: data-test Selektoren, Accessibility, Bugfixes):**
+- [x] Cypress-Selektoren: `.user-content-menu button` → `[data-test="content-menu-button"]` (2 Step-Definitions)
+- [x] Cypress-Selektoren: `.content-menu button` → `[data-test="content-menu-button"]` (Admin.PinPost + ReportContent)
+- [x] muted-users.vue: `data-test="unmute-btn"` + `aria-label` auf Unmute-Button
+- [x] blocked-users.vue: `data-test="unblock-btn"` + `aria-label` auf Unblock-Button
+- [x] ProfileList.vue: `data-test="load-all-connections-btn"` + FollowList.spec.js Selektoren aktualisiert
+- [x] FollowButton.vue: `data-test="follow-btn"` + Spec-Selektoren aktualisiert
+- [x] JoinLeaveButton.vue: `data-test="join-leave-btn"` + `.native` von `@mouseenter`/`@mouseleave` entfernt
+- [x] LoginButton.vue: `data-test="login-btn"` + `aria-label="$t('login.login')"` + Spec-Selektoren aktualisiert
+- [x] ReportRow.spec.js: `button[data-variant="danger"]` → `[data-test="confirm"]`
+- [x] CtaJoinLeaveGroup.spec.js: Selektor auf `[data-test="join-leave-btn"]` aktualisiert
+- [x] DisableModal.vue: `finally { this.loading = false }` für Loading-State-Reset
+- [x] ReleaseModal.vue: `:loading="loading"` + `this.loading = true` + `finally { this.loading = false }`
+- [x] ChangePassword.vue: `:disabled="errors"` → `:disabled="!!errors"` (Boolean-Cast)
+- [x] Password/Change.vue: Unbenutzte `disabled: true` aus data() entfernt + 2 tote Tests entfernt
+- [x] MenuBar.vue: Unbenutztes `ref="linkButton"` entfernt
+- [x] GroupForm.vue: Cancel-Button `variant="default" appearance="filled"` (per User-Anweisung)
+- [x] `appearance="filled"` ergänzt: donations.vue, LoginForm.vue, EnterNonce.vue
+- [x] LoginForm.vue: CSS `.login-form button` → `.login-form button[type='submit']`
+- [x] pages/index.vue: Redundantes `class="my-filter-button"` von `<base-icon>` entfernt
+- [x] MySomethingList.vue: `:title` + `:aria-label` auf Edit/Delete-Buttons (Tooltip beibehalten)
+- [x] A11y aria-label auf icon-only Buttons: admin/users (search + edit), AddChatRoomByUserSearch (close), EmbedComponent (close), groups/index (create), profile/_id/_slug (new post), groups/_id/_slug (new post), CustomButton (2x tooltip), HeaderMenu (hamburger), ImageUploader (crop-cancel), ContentMenu (menu), HeaderButton (filter-remove), InviteButton (invite)
+- [x] post/_id/_slug/index.vue: Zustandsabhängiges `aria-label` (`post.sensitiveContent.show/hide`)
+- [x] ComponentSlider.vue: `aria-label` mit Interpolation (`component-slider.step`)
+- [x] i18n: `actions.search`, `actions.close`, `actions.menu` in allen 9 Sprachdateien
+- [x] i18n: `site.navigation` in allen 9 Sprachdateien
+- [x] i18n: `post.sensitiveContent.show/hide` in allen 9 Sprachdateien
+- [x] i18n: `component-slider.step` in allen 9 Sprachdateien
+
+**Zuvor abgeschlossen (Session 17 - Code-Review Feedback, OsButton Refactoring, Accessibility):**
 - [x] OsButton.vue vereinfacht: `vueAttrs()` Helper, Einmal-Variablen durch `cn()` ersetzt, `children` Array inline (217→227 Zeilen, aber lesbarer)
 - [x] OsButton: `@import "./animations.css"` vor `@source`-Direktiven verschoben (CSS-Spec-Konformität)
 - [x] CustomButton.vue: `isEmpty` aus `data()` entfernt → direkter Import im Computed
@@ -368,13 +330,13 @@ OsButton Features:
 - [x] `data-appearance` Attribut: robuste CSS-Selektoren statt fragile escaped Tailwind-Klassen
 - [x] Code-Review Feedback eingearbeitet (Unit-Tests, Testnamen, CSS-Selektoren)
 
-**Zuvor abgeschlossen (Milestone 5 + Analyse):**
+**Zuvor abgeschlossen (Sessions 9-10 - Milestone 5, Analyse, Disabled-Styles):**
 - [x] Visuelle Validierung: 16/16 Buttons validiert ✅
 - [x] OsButton Features: `appearance` (outline, ghost), `xs` size, focus/active states
 - [x] Disabled-Styles: CSS-Variablen, hover/active-Override, Border-Fix
 - [x] Codebase-Analyse: 14 weitere migrierbare Buttons identifiziert (Scope: 16/35)
 
-**Zuletzt erledigt (Phase 3):**
+**Zuvor abgeschlossen (Sessions 1-8 - Phase 3 Webapp-Integration):**
 - [x] vue-demi zur Webapp hinzugefügt (Vue 2.7 Kompatibilität)
 - [x] Webpack-Alias für vue-demi (nutzt Webapp's Vue 2.7 statt UI-Library's Vue 3)
 - [x] Webpack-Alias für @ocelot-social/ui (dist Pfade mit $ für exakten Match)
@@ -419,23 +381,11 @@ OsButton Features:
   - Verhindert Layout-Sprung wenn Button disabled wird
 
 **Nächste Schritte:**
-1. ~~Phase 0: Komponenten-Analyse~~ ✅
-2. ~~Phase 1: Vue 2.7 Upgrade~~ ✅
-3. ~~**Phase 2: Projekt-Setup**~~ ✅ ABGESCHLOSSEN
-4. ~~**Phase 3: Webapp-Integration**~~ ✅ ABGESCHLOSSEN — 133 Buttons in 79 Dateien
-   - [x] yarn link / Webpack-Alias in Webapp
-   - [x] CSS-Variablen definieren (ocelot-ui-variables.scss)
-   - [x] 16 Buttons migriert & validiert ✅
-   - [x] Docker Build + CI-Kompatibilität
-   - [x] **Milestone 4a:** 14 weitere Buttons (ohne neue Props) ✅
-   - [x] **Milestone 4b:** icon/circle/loading Props implementieren ✅
-   - [x] **Milestone 4c:** Alle verbleibenden Buttons migriert ✅
-   - [x] **Code-Review Feedback:** Refactoring, A11y, Vue 3 Compat, CSS-Scoping ✅
-5. **Nächstes:**
-   - [ ] GroupButton + MapButton in HeaderMenu inlinen (keine eigene Komponente nötig)
-   - [ ] `compat/` Verzeichnis in packages/ui anlegen (temporäre Migrations-Wrapper)
-   - [ ] BaseIcon nach `compat/` verschieben (131 Nutzungen, Voraussetzung für weitere Migrationen)
-   - [ ] Snapshots/Tests aktualisieren, BaseButton-Komponente ggf. entfernen
+- [ ] Snapshots/Tests aktualisieren (nach `as`-Prop-Migration)
+- [ ] GroupButton + MapButton in HeaderMenu inlinen (keine eigene Komponente nötig)
+- [ ] `compat/` Verzeichnis in packages/ui anlegen (temporäre Migrations-Wrapper)
+- [ ] BaseIcon nach `compat/` verschieben (131 Nutzungen, Voraussetzung für weitere Migrationen)
+- [ ] BaseButton-Komponente ggf. entfernen
 
 **Manuelle Setup-Aufgaben (außerhalb Code):**
 - [ ] `NPM_TOKEN` als GitHub Secret einrichten (für npm publish in ui-release.yml)
@@ -722,8 +672,6 @@ Jeder migrierte Button muss manuell geprüft werden: Normal, Hover, Focus, Activ
 
 ---
 
----
-
 # VISION
 
 ## 1. Projektziel & Vision
@@ -782,7 +730,7 @@ Migration vorbereiten - schrittweise neue Komponenten in Vue 3 entwickeln, die d
 | Dateinamen | **PascalCase** | OsButton.vue, OsCard.vue |
 | i18n | **Nur Props** | Keine Default-Texte in Komponenten |
 | Breakpoints | **Tailwind Standard** | sm:640, md:768, lg:1024, xl:1280, 2xl:1536 |
-| Size Props | **Tailwind-Skala (vollständig)** | xs, sm, md, lg, xl, 2xl |
+| Size Props | **Tailwind-Skala** | sm, md, lg, xl (komponentenspezifisch) |
 | Rounded Props | **Tailwind-Skala (vollständig)** | none, sm, md, lg, xl, 2xl, 3xl, full |
 | Shadow Props | **Tailwind-Skala (vollständig)** | none, sm, md, lg, xl, 2xl |
 | Variant Props | **Semantisch (vollständig)** | primary, secondary, danger, warning, success, info |
@@ -1217,8 +1165,8 @@ Alle grün → Merge erlaubt
 **Storybook Deploy (Webhook):**
 1. GitHub sendet Webhook bei Release-Event
 2. Server empfängt Webhook
-3. Server führt `scripts/deploy-histoire.sh` aus (Teil des Repos)
-4. Script: git pull → npm ci → histoire build → copy to webroot
+3. Server führt `scripts/deploy-storybook.sh` aus (Teil des Repos)
+4. Script: git pull → npm ci → storybook build → copy to webroot
 
 ### GitHub Workflows (vollständige Liste)
 
@@ -1230,7 +1178,7 @@ Alle grün → Merge erlaubt
 | **test-a11y** | Push/PR | axe-core | Accessibility-Tests |
 | **test-visual** | Push/PR | Playwright | Visual Regression Screenshots |
 | **build** | Push/PR | Vite | Build verifizieren |
-| **build-histoire** | Push/PR | Storybook | Dokumentation bauen |
+| **build-storybook** | Push/PR | Storybook | Dokumentation bauen |
 | **size-check** | Push/PR | size-limit | Bundle-Größe prüfen |
 | **release** | Push main | release-please | Release-PR erstellen |
 | **publish** | Release | npm | Auf npm veröffentlichen |
@@ -1288,7 +1236,7 @@ Die Komponenten werden über Storybook dokumentiert und auf einer öffentlichen
 
 **Hosting:**
 - Eigener Server (öffentlich zugänglich)
-- Static Build via `histoire build`
+- Static Build via `storybook build`
 - Deployment bei jedem Release
 
 **Workflow:**
@@ -1403,7 +1351,7 @@ Bei der Migration werden:
 
 ## 11. Entscheidungen
 
-> 70 Entscheidungen in 9 Kategorien
+> 73 Entscheidungen in 9 Kategorien
 
 ### Vision & Ziele
 
@@ -1472,7 +1420,7 @@ Bei der Migration werden:
 | 29 | Dark Mode | Ja, von Anfang an | Alle Komponenten mit Light/Dark |
 | 30 | Icons | Hybrid-Architektur | System-Icons in Library, Feature-Icons in App |
 | 51 | Icon-Architektur | Hybrid | ~10 System-Icons in Library, Rest in App (siehe §4) |
-| 59 | Size Props | Tailwind-Skala (xs, sm, md, lg, xl, 2xl) | Konsistenz mit Tailwind, intuitive Benennung |
+| 59 | Size Props | Tailwind-Skala (sm, md, lg, xl) | Komponentenspezifisch, OsButton nutzt sm-xl |
 | 60 | Rounded Props | Tailwind-Skala (none, sm, md, lg, xl, 2xl, 3xl, full) | Konsistenz mit Tailwind border-radius |
 | 61 | Shadow Props | Tailwind-Skala (none, sm, md, lg, xl, 2xl) | Konsistenz mit Tailwind box-shadow |
 | 62 | Variant Props | Semantisch (primary, secondary, danger, warning, success, info) | Übliche UI-Farbvarianten |
@@ -1482,8 +1430,8 @@ Bei der Migration werden:
 | 66 | Branding-Hierarchie | Webapp → Spezialisiertes Branding | Default-Branding in Webapp, Overrides pro Instanz |
 | 67 | Variable-Validierung | Runtime-Check in Development | `validateCssVariables()` warnt bei fehlenden Variablen |
 | 68 | Branding-Test (Webapp) | CI-Test in Webapp | Webapp testet, dass Default-Branding alle Library-Variablen definiert |
-| 69 | Webapp ↔ Maintenance Sharing | Webapp als Source of Truth | Kein separates "shared" Package, maintenance importiert aus webapp/ (siehe §16a) |
-| 70 | Daten-Entkopplung | ViewModel/Mapper Pattern | Komponenten kennen nur ViewModels, Mapper transformieren API-Daten (siehe §16b) |
+| 72 | Webapp ↔ Maintenance Sharing | Webapp als Source of Truth | Kein separates "shared" Package, maintenance importiert aus webapp/ (siehe §16a) |
+| 73 | Daten-Entkopplung | ViewModel/Mapper Pattern | Komponenten kennen nur ViewModels, Mapper transformieren API-Daten (siehe §16b) |
 
 ### Komponenten-API & Konventionen
 
@@ -1748,6 +1696,15 @@ Bei der Migration werden:
 | 2026-02-13 | **CSS-Selektoren** | LoginForm: `.login-form button` → `.login-form button[type='submit']`; pages/index: redundante Klasse auf BaseIcon entfernt |
 | 2026-02-13 | **JoinLeaveButton** | `.native` von `@mouseenter`/`@mouseleave` entfernt (Vue 3 Kompatibilität) |
 | 2026-02-13 | **MySomethingList** | `:title` + `:aria-label` auf Edit/Delete-Buttons (Tooltip beibehalten neben Accessibility) |
+| 2026-02-14 | **`as` Prop** | Polymorphe OsButton-Komponente: `as` Prop für dynamischen Tag/Komponente (`button`, `a`, `nuxt-link`, `router-link`); moderner Standard (Headless UI, Radix Vue) |
+| 2026-02-14 | **Naming: tag → as** | `tag` → `as` umbenannt nach Recherche moderner UI-Libraries (Headless UI, Radix Vue, Chakra UI, PrimeVue nutzen `as`) |
+| 2026-02-14 | **Disabled nur für button** | `disabled`/`type`/`loading` nur bei `as="button"` (Links haben kein natives `disabled`); `aria-disabled`/`tabindex` Logik entfernt |
+| 2026-02-14 | **Polymorphic Story** | Neue Story `Polymorphic` mit Varianten, Icons, disabled-Vergleich; Playground mit `as`-Selektor (button/a) |
+| 2026-02-14 | **nuxt-link Migration** | 15 `<nuxt-link>`/`<a>`-Wrapper → `as="nuxt-link"`/`as="a"` in 15 Webapp-Dateien; invalides HTML (`<button>` in `<a>`) eliminiert |
+| 2026-02-14 | **CustomButton konsolidiert** | v-if/v-else für `<a>`/`<nuxt-link>` Wrapper → einzelner `<os-button :as="linkTag" v-bind="linkProps">` mit Computed Properties |
+| 2026-02-14 | **NotificationMenu konsolidiert** | 2 separate Buttons (kein Badge / mit Badge) zu einem zusammengeführt — counter-icon zeigt bei `count=0` kein Badge |
+| 2026-02-14 | **CSS-Selektor Fix** | pages/index.vue: `button.post-add-button-top/bottom` → `.post-add-button-top/bottom` (nuxt-link rendert `<a>`, nicht `<button>`) |
+| 2026-02-14 | **Profil-Spacing** | profile/_id/_slug.vue: `v-if` auf ds-grid-item (kein leerer Abstand), symmetrisches Padding `$space-x-small` |
 
 ---
 
@@ -2268,7 +2225,7 @@ Phase 3 (später): @ocelot-social/auth, @ocelot-social/posts, etc.
 
 | # | Datum | Entscheidung |
 |---|-------|--------------|
-| 68 | 2026-02-09 | Webapp als Source of Truth für geteilte Business-Komponenten |
+| 72 | 2026-02-09 | Webapp als Source of Truth für geteilte Business-Komponenten |
 
 ---
 
@@ -2462,7 +2419,7 @@ webapp/
 
 | # | Datum | Entscheidung |
 |---|-------|--------------|
-| 70 | 2026-02-09 | ViewModel/Mapper Pattern für Daten-Entkopplung |
+| 73 | 2026-02-09 | ViewModel/Mapper Pattern für Daten-Entkopplung |
 
 ---
 
diff --git a/packages/ui/src/components/OsButton/OsButton.spec.ts b/packages/ui/src/components/OsButton/OsButton.spec.ts
index 603a7cfe5..f4f4fe335 100644
--- a/packages/ui/src/components/OsButton/OsButton.spec.ts
+++ b/packages/ui/src/components/OsButton/OsButton.spec.ts
@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
+import { defineComponent, h } from 'vue-demi'
 
 import OsButton from './OsButton.vue'
 
@@ -548,6 +549,64 @@ describe('osButton', () => {
     })
   })
 
+  describe('as prop', () => {
+    it('renders as <button> by default', () => {
+      const wrapper = mount(OsButton)
+
+      expect((wrapper.element as HTMLElement).tagName).toBe('BUTTON')
+      expect(wrapper.attributes('type')).toBe('button')
+    })
+
+    it('renders as <a> when as="a"', () => {
+      const wrapper = mount(OsButton, {
+        props: { as: 'a' },
+        attrs: { href: '/test' },
+        slots: { default: 'Link' },
+      })
+
+      expect((wrapper.element as HTMLElement).tagName).toBe('A')
+      expect(wrapper.attributes('href')).toBe('/test')
+      expect(wrapper.attributes('type')).toBeUndefined()
+    })
+
+    it('renders a component passed as as', () => {
+      const FakeLink = defineComponent({
+        props: { to: { type: String, default: undefined } },
+        setup(props, { slots }) {
+          return () => h('a', { href: props.to }, slots.default?.())
+        },
+      })
+      const wrapper = mount(OsButton, {
+        props: { as: FakeLink },
+        attrs: { to: '/groups' },
+        slots: { default: 'Groups' },
+      })
+
+      expect((wrapper.element as HTMLElement).tagName).toBe('A')
+      expect(wrapper.text()).toBe('Groups')
+    })
+
+    it('ignores disabled prop on non-button tags', () => {
+      const wrapper = mount(OsButton, {
+        props: { as: 'a', disabled: true },
+        attrs: { href: '/test' },
+      })
+
+      expect(wrapper.attributes('disabled')).toBeUndefined()
+      expect(wrapper.attributes('aria-disabled')).toBeUndefined()
+      expect(wrapper.attributes('tabindex')).toBeUndefined()
+    })
+
+    it('applies variant classes regardless of as', () => {
+      const wrapper = mount(OsButton, {
+        props: { as: 'a', variant: 'primary', appearance: 'filled' },
+      })
+
+      expect(wrapper.classes()).toContain('os-button')
+      expect(wrapper.classes()).toContain('bg-[var(--color-primary)]')
+    })
+  })
+
   describe('keyboard accessibility', () => {
     it('renders as native button element for keyboard support', () => {
       const wrapper = mount(OsButton)
diff --git a/packages/ui/src/components/OsButton/OsButton.stories.ts b/packages/ui/src/components/OsButton/OsButton.stories.ts
index ac8fc1fca..a7518f3c9 100644
--- a/packages/ui/src/components/OsButton/OsButton.stories.ts
+++ b/packages/ui/src/components/OsButton/OsButton.stories.ts
@@ -42,6 +42,7 @@ type Story = StoryObj<typeof OsButton>
 
 /** Custom args for Playground (icon selector + label are not real component props) */
 interface PlaygroundArgs {
+  as: string
   variant: string
   appearance: string
   size: string
@@ -62,6 +63,10 @@ const iconMap: Record<string, (() => ReturnType<typeof h>) | null> = {
 
 export const Playground: StoryObj<PlaygroundArgs> = {
   argTypes: {
+    as: {
+      control: 'select',
+      options: ['button', 'a'],
+    },
     variant: {
       control: 'select',
       options: ['default', 'primary', 'secondary', 'danger', 'warning', 'success', 'info'],
@@ -95,6 +100,7 @@ export const Playground: StoryObj<PlaygroundArgs> = {
     },
   },
   args: {
+    as: 'button',
     variant: 'primary',
     appearance: 'filled',
     size: 'md',
@@ -117,7 +123,7 @@ export const Playground: StoryObj<PlaygroundArgs> = {
       return { buttonProps, IconComponent, label }
     },
     template: `
-      <OsButton v-bind="buttonProps">
+      <OsButton v-bind="buttonProps" :href="buttonProps.as === 'a' ? '#' : undefined">
         <template v-if="IconComponent" #icon><component :is="IconComponent" /></template>
         {{ label }}
       </OsButton>
@@ -663,6 +669,44 @@ export const CircleAppearances: Story = {
   }),
 }
 
+export const Polymorphic: Story = {
+  render: () => ({
+    components: { OsButton, CheckIcon, PlusIcon },
+    template: `
+      <div class="flex flex-col gap-4">
+        <div>
+          <h3 class="text-sm font-bold mb-2">as="a" (anchor element)</h3>
+          <div class="flex flex-wrap gap-2">
+            <OsButton as="a" href="#" variant="primary">Primary Link</OsButton>
+            <OsButton as="a" href="#" variant="primary" appearance="outline">Outline Link</OsButton>
+            <OsButton as="a" href="#" variant="primary" appearance="ghost">Ghost Link</OsButton>
+            <OsButton as="a" href="#" variant="danger">Danger Link</OsButton>
+          </div>
+        </div>
+        <div>
+          <h3 class="text-sm font-bold mb-2">as="a" with icon</h3>
+          <div class="flex flex-wrap gap-2">
+            <OsButton as="a" href="#" variant="primary">
+              <template #icon><CheckIcon /></template>
+              Save
+            </OsButton>
+            <OsButton as="a" href="#" variant="success" circle aria-label="Add">
+              <template #icon><PlusIcon /></template>
+            </OsButton>
+          </div>
+        </div>
+        <div>
+          <h3 class="text-sm font-bold mb-2">as="button" (default)</h3>
+          <div class="flex flex-wrap gap-2">
+            <OsButton variant="primary">Button (default)</OsButton>
+            <OsButton as="button" variant="primary">Button (explicit)</OsButton>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+}
+
 export const Loading: Story = {
   render: () => ({
     components: { OsButton, CheckIcon },
diff --git a/packages/ui/src/components/OsButton/OsButton.visual.spec.ts b/packages/ui/src/components/OsButton/OsButton.visual.spec.ts
index 3d25065c3..d5caa00ea 100644
--- a/packages/ui/src/components/OsButton/OsButton.visual.spec.ts
+++ b/packages/ui/src/components/OsButton/OsButton.visual.spec.ts
@@ -218,6 +218,15 @@ test.describe('OsButton visual regression', () => {
     await checkA11y(page)
   })
 
+  test('polymorphic', async ({ page }) => {
+    await page.goto(`${STORY_URL}--polymorphic&viewMode=story`)
+    const root = page.locator(STORY_ROOT)
+    await root.waitFor()
+    await waitForFonts(page)
+    await expect(root.locator('.flex-col').first()).toHaveScreenshot('polymorphic.png')
+    await checkA11y(page)
+  })
+
   test('loading', async ({ page }) => {
     await page.goto(`${STORY_URL}--loading&viewMode=story`)
     const root = page.locator(STORY_ROOT)
diff --git a/packages/ui/src/components/OsButton/OsButton.vue b/packages/ui/src/components/OsButton/OsButton.vue
index b00668564..f552d03bc 100644
--- a/packages/ui/src/components/OsButton/OsButton.vue
+++ b/packages/ui/src/components/OsButton/OsButton.vue
@@ -6,10 +6,19 @@
   import { buttonVariants } from './button.variants'
 
   import type { ButtonVariants } from './button.variants'
-  import type { PropType } from 'vue-demi'
+  import type { Component, PropType } from 'vue-demi'
 
   /**
    * Flexible button component with optional icon slot.
+   *
+   * Use the `as` prop to render as a different element or component (e.g. nuxt-link)
+   * without creating a dependency on any router library:
+   *
+   * ```vue
+   * <os-button :as="NuxtLink" to="/groups">Groups</os-button>
+   * <os-button as="a" href="/external">External</os-button>
+   * ```
+   *
    * @slot default - Button content (text or HTML)
    * @slot icon - Optional icon (rendered left of text). Use aria-label for icon-only buttons.
    */
@@ -68,6 +77,15 @@
     name: 'OsButton',
     inheritAttrs: false,
     props: {
+      /**
+       * Element or component to render as (e.g. 'a', NuxtLink, RouterLink).
+       * Note: `disabled` and `type` apply only when as="button" (default).
+       * `loading` shows the spinner for any tag, but only disables native buttons.
+       */
+      as: {
+        type: [String, Object, Function] as PropType<string | Component>,
+        default: 'button',
+      },
       variant: {
         type: String as PropType<ButtonVariants['variant']>,
         default: 'default',
@@ -184,14 +202,20 @@
           props.circle && CIRCLE_WIDTHS[size], // eslint-disable-line security/detect-object-injection
         )
 
-        const buttonData = {
-          type: props.type,
-          disabled: isDisabled || undefined,
+        const tag = props.as
+        const isNativeButton = tag === 'button'
+
+        const buttonData: Record<string, unknown> = {
           'data-variant': props.variant,
           'data-appearance': props.appearance,
           'aria-busy': isLoading || undefined,
         }
 
+        if (isNativeButton) {
+          buttonData.type = props.type
+          buttonData.disabled = isDisabled || undefined
+        }
+
         /* v8 ignore start -- Vue 2 branch tested in webapp Jest tests */
         if (isVue2) {
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -201,7 +225,7 @@
           const parentDynClass = proxy?.$vnode?.data?.class
 
           return h(
-            'button',
+            tag,
             {
               class: [buttonClass, parentClass, parentDynClass].filter(Boolean),
               attrs: { ...buttonData, ...attrs },
@@ -214,7 +238,7 @@
 
         const { class: attrClass, ...restAttrs } = attrs as Record<string, unknown>
         return h(
-          'button',
+          tag,
           {
             ...buttonData,
             class: cn(buttonClass, attrClass || ''),
diff --git a/packages/ui/src/components/OsButton/__screenshots__/chromium/polymorphic.png b/packages/ui/src/components/OsButton/__screenshots__/chromium/polymorphic.png
new file mode 100644
index 0000000000000000000000000000000000000000..e3d7a65f479241da9649621f60f47e6da2aae24d
GIT binary patch
literal 19003
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

literal 0
HcmV?d00001

diff --git a/webapp/components/Button/__snapshots__/JoinLeaveButton.spec.js.snap b/webapp/components/Button/__snapshots__/JoinLeaveButton.spec.js.snap
index beb1379d2..9bb9b1f2a 100755
--- a/webapp/components/Button/__snapshots__/JoinLeaveButton.spec.js.snap
+++ b/webapp/components/Button/__snapshots__/JoinLeaveButton.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`JoinLeaveButton.vue shallowMount renders 1`] = `
-<os-button-stub variant="primary" appearance="outline" size="md" fullwidth="true" type="button" data-original-title="null" class=" has-tooltip">
+<os-button-stub as="button" variant="primary" appearance="outline" size="md" fullwidth="true" type="button" data-original-title="null" class=" has-tooltip">
   group.joinLeaveButton.join
 </os-button-stub>
 `;
diff --git a/webapp/components/Chat/Chat.vue b/webapp/components/Chat/Chat.vue
index 4e024a8af..986c8d748 100644
--- a/webapp/components/Chat/Chat.vue
+++ b/webapp/components/Chat/Chat.vue
@@ -34,19 +34,19 @@
     <div v-if="selectedRoom && selectedRoom.roomId" slot="room-options" class="chat-room-options">
       <ds-flex v-if="singleRoom">
         <ds-flex-item centered class="single-chat-bubble">
-          <nuxt-link :to="{ name: 'chat' }">
-            <os-button
-              variant="primary"
-              appearance="ghost"
-              circle
-              size="sm"
-              :aria-label="$t('chat.expandChat')"
-            >
-              <template #icon>
-                <base-icon name="expand" />
-              </template>
-            </os-button>
-          </nuxt-link>
+          <os-button
+            as="nuxt-link"
+            :to="{ name: 'chat' }"
+            variant="primary"
+            appearance="ghost"
+            circle
+            size="sm"
+            :aria-label="$t('chat.expandChat')"
+          >
+            <template #icon>
+              <base-icon name="expand" />
+            </template>
+          </os-button>
         </ds-flex-item>
         <ds-flex-item centered>
           <div class="vac-svg-button vac-room-options">
diff --git a/webapp/components/ChatNotificationMenu/ChatNotificationMenu.vue b/webapp/components/ChatNotificationMenu/ChatNotificationMenu.vue
index be07c05c4..9da7241d5 100644
--- a/webapp/components/ChatNotificationMenu/ChatNotificationMenu.vue
+++ b/webapp/components/ChatNotificationMenu/ChatNotificationMenu.vue
@@ -1,20 +1,21 @@
 <template>
-  <nuxt-link class="chat-notification-menu" :to="{ name: 'chat' }">
-    <os-button
-      variant="primary"
-      appearance="ghost"
-      circle
-      :aria-label="$t('header.chats.tooltip')"
-      v-tooltip="{
-        content: $t('header.chats.tooltip'),
-        placement: 'bottom-start',
-      }"
-    >
-      <template #icon>
-        <counter-icon icon="chat-bubble" :count="unreadRoomCount" danger />
-      </template>
-    </os-button>
-  </nuxt-link>
+  <os-button
+    as="nuxt-link"
+    :to="{ name: 'chat' }"
+    class="chat-notification-menu"
+    variant="primary"
+    appearance="ghost"
+    circle
+    :aria-label="$t('header.chats.tooltip')"
+    v-tooltip="{
+      content: $t('header.chats.tooltip'),
+      placement: 'bottom-start',
+    }"
+  >
+    <template #icon>
+      <counter-icon icon="chat-bubble" :count="unreadRoomCount" danger />
+    </template>
+  </os-button>
 </template>
 
 <script>
diff --git a/webapp/components/CustomButton/CustomButton.vue b/webapp/components/CustomButton/CustomButton.vue
index 640b8312a..89c0bded0 100644
--- a/webapp/components/CustomButton/CustomButton.vue
+++ b/webapp/components/CustomButton/CustomButton.vue
@@ -1,45 +1,25 @@
 <template>
   <div>
-    <a v-if="settings.url" :href="settings.url" :target="settings.target">
-      <os-button
-        class="custom-button"
-        variant="primary"
-        appearance="ghost"
-        circle
-        :aria-label="$t(settings.toolTipIdent)"
-        v-tooltip="{
-          content: $t(settings.toolTipIdent),
-          placement: 'bottom-start',
-        }"
-      >
-        <img
-          class="logo-svg"
-          :src="settings.iconPath"
-          :alt="settings.iconAltText"
-          :style="logoWidthStyle"
-        />
-      </os-button>
-    </a>
-    <nuxt-link v-else :to="settings.path">
-      <os-button
-        class="custom-button"
-        variant="primary"
-        appearance="ghost"
-        circle
-        :aria-label="$t(settings.toolTipIdent)"
-        v-tooltip="{
-          content: $t(settings.toolTipIdent),
-          placement: 'bottom-start',
-        }"
-      >
-        <img
-          class="logo-svg"
-          :src="settings.iconPath"
-          :alt="settings.iconAltText"
-          :style="logoWidthStyle"
-        />
-      </os-button>
-    </nuxt-link>
+    <os-button
+      :as="linkTag"
+      v-bind="linkProps"
+      class="custom-button"
+      variant="primary"
+      appearance="ghost"
+      circle
+      :aria-label="$t(settings.toolTipIdent)"
+      v-tooltip="{
+        content: $t(settings.toolTipIdent),
+        placement: 'bottom-start',
+      }"
+    >
+      <img
+        class="logo-svg"
+        :src="settings.iconPath"
+        :alt="settings.iconAltText"
+        :style="logoWidthStyle"
+      />
+    </os-button>
   </div>
 </template>
 
@@ -54,6 +34,14 @@ export default {
     settings: { type: Object, required: true },
   },
   computed: {
+    linkTag() {
+      return this.settings.url ? 'a' : 'nuxt-link'
+    },
+    linkProps() {
+      return this.settings.url
+        ? { href: this.settings.url, target: this.settings.target }
+        : { to: this.settings.path }
+    },
     logoWidthStyle() {
       const width = isEmpty(this.settings.iconWidth) ? '26px' : this.settings.iconWidth
       return `width: ${width};`
diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue
index 755761259..17003161c 100644
--- a/webapp/components/Editor/Editor.vue
+++ b/webapp/components/Editor/Editor.vue
@@ -11,12 +11,17 @@
       :query="query"
       :select-item="selectItem"
     />
-    <link-input
-      v-show="isLinkInputActive"
-      ref="linkInput"
-      :toggle-link-input="toggleLinkInput"
-      :set-link-url="setLinkUrl"
-    />
+    <div v-show="isLinkInputActive" ref="linkInput">
+      <ds-input
+        id="linkInputId"
+        v-model="linkUrl"
+        class="editor-menu-link-input"
+        placeholder="https://"
+        @blur.native.capture="toggleLinkInput()"
+        @keydown.native.esc.prevent="toggleLinkInput()"
+        @keydown.native.enter.prevent="enterLink()"
+      />
+    </div>
   </div>
 </template>
 
@@ -35,7 +40,6 @@ import Mention from './nodes/Mention'
 import MenuBar from './MenuBar'
 import ContextMenu from './ContextMenu'
 import SuggestionList from './SuggestionList'
-import LinkInput from './LinkInput'
 
 let throttleInputEvent
 
@@ -43,7 +47,6 @@ export default {
   components: {
     ContextMenu,
     EditorContent,
-    LinkInput,
     MenuBar,
     SuggestionList,
   },
@@ -58,6 +61,7 @@ export default {
       lastValueHash: null,
       editor: null,
       isLinkInputActive: false,
+      linkUrl: null,
       suggestionType: '',
       query: null,
       suggestionRange: null,
@@ -247,16 +251,20 @@ export default {
     insertReply(message) {
       this.editor.commands.mention({ id: message.id, label: message.slug })
     },
+    enterLink() {
+      this.setLinkUrl(this.linkUrl)
+      this.linkUrl = null
+    },
     toggleLinkInput(attrs, element) {
       if (this.$refs.contextMenu.menu) {
         this.$refs.contextMenu.hideContextMenu()
         this.isLinkInputActive = false
         this.editor.focus()
       } else if (attrs && element) {
-        this.$refs.linkInput.linkUrl = attrs.href
+        this.linkUrl = attrs.href
         this.isLinkInputActive = true
         this.$nextTick(() => {
-          this.$refs.contextMenu.displayContextMenu(element, this.$refs.linkInput.$el, 'link')
+          this.$refs.contextMenu.displayContextMenu(element, this.$refs.linkInput, 'link')
         })
       } else {
         this.isLinkInputActive = false
diff --git a/webapp/components/Editor/LinkInput.vue b/webapp/components/Editor/LinkInput.vue
deleted file mode 100644
index dede19302..000000000
--- a/webapp/components/Editor/LinkInput.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <div>
-    <ds-input
-      id="linkInputId"
-      v-model="linkUrl"
-      class="editor-menu-link-input"
-      placeholder="https://"
-      @blur.native.capture="toggleLinkInput()"
-      @keydown.native.esc.prevent="toggleLinkInput()"
-      @keydown.native.enter.prevent="enterLink()"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    toggleLinkInput: Function,
-    setLinkUrl: Function,
-  },
-  data() {
-    return {
-      linkUrl: null,
-    }
-  },
-  methods: {
-    enterLink() {
-      this.setLinkUrl(this.linkUrl)
-      this.linkUrl = null
-    },
-  },
-}
-</script>
diff --git a/webapp/components/Emotions/Emotions.spec.js b/webapp/components/Emotions/Emotions.spec.js
deleted file mode 100644
index b7a2bbe34..000000000
--- a/webapp/components/Emotions/Emotions.spec.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import { mount } from '@vue/test-utils'
-import Emotions from './Emotions.vue'
-
-import Vuex from 'vuex'
-import PostMutations from '~/graphql/PostMutations.js'
-
-const localVue = global.localVue
-
-describe('Emotions.vue', () => {
-  let wrapper
-  let mocks
-  let propsData
-  let getters
-  let funnyButton
-  let funnyImage
-  const funnyImageSrc = '/img/svg/emoji/funny_color.svg'
-
-  beforeEach(() => {
-    mocks = {
-      $apollo: {
-        mutate: jest
-          .fn()
-          .mockResolvedValueOnce({
-            data: {
-              AddPostEmotions: {
-                to: { id: 'p143' },
-                data: { emotion: 'happy' },
-              },
-            },
-          })
-          .mockResolvedValueOnce({
-            data: {
-              RemovePostEmotions: {
-                from: { id: 'u176' },
-                to: { id: 'p143' },
-                data: { emotion: 'happy' },
-              },
-            },
-          }),
-        query: jest.fn().mockResolvedValue({
-          data: {
-            PostsEmotionsCountByEmotion: 1,
-          },
-        }),
-      },
-      $t: jest.fn(),
-    }
-    propsData = {
-      post: { id: 'p143' },
-    }
-    getters = {
-      'auth/user': () => {
-        return { id: 'u176' }
-      },
-    }
-  })
-  describe('mount', () => {
-    const Wrapper = () => {
-      const store = new Vuex.Store({
-        getters,
-      })
-      return mount(Emotions, { mocks, propsData, store, localVue })
-    }
-    beforeEach(() => {
-      wrapper = Wrapper()
-    })
-
-    it("queries the post's emotions count for each of the 5 emotions", () => {
-      expect(mocks.$apollo.query).toHaveBeenCalledTimes(5)
-    })
-
-    describe('adding emotions', () => {
-      let expectedParams
-      beforeEach(() => {
-        wrapper.vm.PostsEmotionsCountByEmotion.funny = 0
-        funnyButton = wrapper.findAll('button').at(0)
-        funnyButton.trigger('click')
-      })
-
-      it('shows the colored image when the button is active', () => {
-        funnyImage = wrapper.findAll('img').at(0)
-        expect(funnyImage.attributes().src).toEqual(funnyImageSrc)
-      })
-
-      it('sends the AddPostEmotionsMutation for an emotion when clicked', () => {
-        expectedParams = {
-          mutation: PostMutations().AddPostEmotionsMutation,
-          variables: { to: { id: 'p143' }, data: { emotion: 'funny' } },
-        }
-        expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
-      })
-
-      it('increases the PostsEmotionsCountByEmotion for the emotion clicked', () => {
-        expect(wrapper.vm.PostsEmotionsCountByEmotion.funny).toEqual(1)
-      })
-
-      it('adds an emotion to selectedEmotions to show the colored image when the button is active', () => {
-        expect(wrapper.vm.selectedEmotions).toEqual(['funny'])
-      })
-
-      describe('removing emotions', () => {
-        beforeEach(() => {
-          funnyButton.trigger('click')
-        })
-
-        it('sends the RemovePostEmotionsMutation when a user clicks on an active emotion', () => {
-          expectedParams = {
-            mutation: PostMutations().RemovePostEmotionsMutation,
-            variables: { to: { id: 'p143' }, data: { emotion: 'funny' } },
-          }
-          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
-        })
-
-        it('decreases the PostsEmotionsCountByEmotion for the emotion clicked', async () => {
-          expect(wrapper.vm.PostsEmotionsCountByEmotion.funny).toEqual(0)
-        })
-
-        it('removes an emotion from selectedEmotions to show the default image', async () => {
-          expect(wrapper.vm.selectedEmotions).toEqual([])
-        })
-      })
-    })
-  })
-})
diff --git a/webapp/components/Emotions/Emotions.vue b/webapp/components/Emotions/Emotions.vue
deleted file mode 100644
index b4dc14a61..000000000
--- a/webapp/components/Emotions/Emotions.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <div class="emotions-button-group">
-    <emotion-button
-      v-for="emotion in Object.keys(PostsEmotionsCountByEmotion)"
-      :key="emotion"
-      :emojiPath="iconPath(emotion)"
-      :emotion="emotion"
-      :emotionCount="PostsEmotionsCountByEmotion[emotion]"
-      @toggleEmotion="toggleEmotion"
-    />
-  </div>
-</template>
-
-<script>
-import gql from 'graphql-tag'
-import { mapGetters } from 'vuex'
-import EmotionButton from '~/components/EmotionButton/EmotionButton'
-import { PostsEmotionsByCurrentUser } from '~/graphql/PostQuery.js'
-import PostMutations from '~/graphql/PostMutations.js'
-
-export default {
-  components: {
-    EmotionButton,
-  },
-  props: {
-    post: { type: Object, default: () => {} },
-  },
-  data() {
-    return {
-      selectedEmotions: [],
-      PostsEmotionsCountByEmotion: { funny: 0, happy: 0, surprised: 0, cry: 0, angry: 0 },
-    }
-  },
-  computed: {
-    ...mapGetters({
-      currentUser: 'auth/user',
-    }),
-  },
-  created() {
-    Object.keys(this.PostsEmotionsCountByEmotion).map((emotion) => {
-      this.emotionsCount(emotion)
-    })
-  },
-  methods: {
-    iconPath(emotion) {
-      if (this.isActive(emotion)) {
-        return `/img/svg/emoji/${emotion}_color.svg`
-      }
-      return `/img/svg/emoji/${emotion}.svg`
-    },
-    toggleEmotion(emotion) {
-      this.$apollo
-        .mutate({
-          mutation: this.isActive(emotion)
-            ? PostMutations().RemovePostEmotionsMutation
-            : PostMutations().AddPostEmotionsMutation,
-          variables: {
-            to: { id: this.post.id },
-            data: { emotion },
-          },
-        })
-        .then(() => {
-          this.isActive(emotion)
-            ? this.PostsEmotionsCountByEmotion[emotion]--
-            : this.PostsEmotionsCountByEmotion[emotion]++
-
-          const index = this.selectedEmotions.indexOf(emotion)
-          if (index > -1) {
-            this.selectedEmotions.splice(index, 1)
-          } else {
-            this.selectedEmotions.push(emotion)
-          }
-        })
-    },
-    isActive(emotion) {
-      const index = this.selectedEmotions.indexOf(emotion)
-      if (index > -1) {
-        return true
-      }
-      return false
-    },
-    emotionsCount(emotion) {
-      this.$apollo
-        .query({
-          query: gql`
-            query ($postId: ID!, $data: _EMOTEDInput!) {
-              PostsEmotionsCountByEmotion(postId: $postId, data: $data)
-            }
-          `,
-          variables: { postId: this.post.id, data: { emotion } },
-          fetchPolicy: 'no-cache',
-        })
-        .then(({ data: { PostsEmotionsCountByEmotion } }) => {
-          this.PostsEmotionsCountByEmotion[emotion] = PostsEmotionsCountByEmotion
-        })
-    },
-  },
-  apollo: {
-    PostsEmotionsByCurrentUser: {
-      query() {
-        return PostsEmotionsByCurrentUser()
-      },
-      variables() {
-        return {
-          postId: this.post.id,
-        }
-      },
-      update({ PostsEmotionsByCurrentUser }) {
-        this.selectedEmotions = PostsEmotionsByCurrentUser
-      },
-    },
-  },
-}
-</script>
-
-<style lang="scss">
-.emotions-button-group {
-  display: flex;
-}
-</style>
diff --git a/webapp/components/Empty/CallToAction/CtaUnblockAuthor.vue b/webapp/components/Empty/CallToAction/CtaUnblockAuthor.vue
index 75785fc40..f56994de7 100644
--- a/webapp/components/Empty/CallToAction/CtaUnblockAuthor.vue
+++ b/webapp/components/Empty/CallToAction/CtaUnblockAuthor.vue
@@ -7,16 +7,14 @@
     <ds-text>
       {{ $t('contribution.comment.commenting-disabled.blocked-author.call-to-action') }}
     </ds-text>
-    <nuxt-link :to="authorLink">
-      <os-button variant="primary" appearance="filled">
-        <template #icon><base-icon name="arrow-right" /></template>
-        {{
-          $t('contribution.comment.commenting-disabled.blocked-author.button-label', {
-            name: author.name,
-          })
-        }}
-      </os-button>
-    </nuxt-link>
+    <os-button as="nuxt-link" :to="authorLink" variant="primary" appearance="filled">
+      <template #icon><base-icon name="arrow-right" /></template>
+      {{
+        $t('contribution.comment.commenting-disabled.blocked-author.button-label', {
+          name: author.name,
+        })
+      }}
+    </os-button>
   </ds-space>
 </template>
 
diff --git a/webapp/components/Empty/CallToAction/__snapshots__/CtaJoinLeaveGroup.spec.js.snap b/webapp/components/Empty/CallToAction/__snapshots__/CtaJoinLeaveGroup.spec.js.snap
index 4e8f04ea3..8e8a61916 100644
--- a/webapp/components/Empty/CallToAction/__snapshots__/CtaJoinLeaveGroup.spec.js.snap
+++ b/webapp/components/Empty/CallToAction/__snapshots__/CtaJoinLeaveGroup.spec.js.snap
@@ -11,7 +11,7 @@ exports[`CtaJoinLeaveGroup.vue mount renders 1`] = `
   </h4>
   <p class="ds-text">
     contribution.comment.commenting-disabled.no-group-member.call-to-action
-  </p> <button type="button" data-variant="primary" data-appearance="filled" class="os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] px-[16px] py-0 text-[15px] leading-[normal] rounded-[5px] align-middle w-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] has-tooltip" data-original-title="null"><span class="inline-flex items-center gap-2"><span class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&amp;>svg]:h-full [&amp;>svg]:w-auto [&amp;>svg]:fill-current -ml-1"><span class="base-icon"><!----></span></span>
+  </p> <button data-variant="primary" data-appearance="filled" type="button" class="os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] px-[16px] py-0 text-[15px] leading-[normal] rounded-[5px] align-middle w-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] has-tooltip" data-original-title="null"><span class="inline-flex items-center gap-2"><span class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&amp;>svg]:h-full [&amp;>svg]:w-auto [&amp;>svg]:fill-current -ml-1"><span class="base-icon"><!----></span></span>
     group.joinLeaveButton.join
     </span></button>
 </div>
diff --git a/webapp/components/Empty/CallToAction/__snapshots__/CtaUnblockAuthor.spec.js.snap b/webapp/components/Empty/CallToAction/__snapshots__/CtaUnblockAuthor.spec.js.snap
index d0f8c102c..50fe40ff5 100755
--- a/webapp/components/Empty/CallToAction/__snapshots__/CtaUnblockAuthor.spec.js.snap
+++ b/webapp/components/Empty/CallToAction/__snapshots__/CtaUnblockAuthor.spec.js.snap
@@ -9,10 +9,8 @@ exports[`CtaUnblockAuthor.vue shallowMount renders 1`] = `
   <ds-text-stub tag="p">
     contribution.comment.commenting-disabled.blocked-author.call-to-action
   </ds-text-stub>
-  <nuxt-link-stub to="[object Object]">
-    <os-button-stub variant="primary" appearance="filled" size="md" type="button">
-      contribution.comment.commenting-disabled.blocked-author.button-label
-    </os-button-stub>
-  </nuxt-link-stub>
+  <os-button-stub as="nuxt-link" variant="primary" appearance="filled" size="md" type="button" to="[object Object]">
+    contribution.comment.commenting-disabled.blocked-author.button-label
+  </os-button-stub>
 </ds-space-stub>
 `;
diff --git a/webapp/components/FilterMenu/CategoriesMenu.vue b/webapp/components/FilterMenu/CategoriesMenu.vue
deleted file mode 100644
index 2a389cf93..000000000
--- a/webapp/components/FilterMenu/CategoriesMenu.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <dropdown ref="category-menu" placement="top-start" :offset="8" class="category-menu">
-    <a href="#" slot="default" slot-scope="{ toggleMenu }" @click.prevent="toggleMenu()">
-      <ds-text bold size="large">{{ $t('admin.categories.name') }}</ds-text>
-    </a>
-    <template #popover>
-      <div class="category-menu-options">
-        <h2 class="title">{{ $t('filter-menu.filter-by') }}</h2>
-        <categories-filter v-if="categoriesActive" />
-      </div>
-    </template>
-  </dropdown>
-</template>
-
-<script>
-import Dropdown from '~/components/Dropdown'
-import { mapGetters } from 'vuex'
-import CategoriesFilter from './CategoriesFilter'
-import GetCategories from '~/mixins/getCategoriesMixin.js'
-
-export default {
-  name: 'CategoriesMenu',
-  mixins: [GetCategories],
-  components: {
-    Dropdown,
-    CategoriesFilter,
-  },
-  props: {
-    placement: { type: String },
-    offset: { type: [String, Number] },
-  },
-  computed: {
-    ...mapGetters({
-      // TODO: implement visibility of active filter later on
-      filterActive: 'posts/isActive',
-    }),
-  },
-}
-</script>
-
-<style lang="scss">
-.category-menu-options {
-  max-width: $size-max-width-filter-menu;
-  padding: $space-small $space-x-small;
-
-  > .title {
-    font-size: $font-size-large;
-  }
-}
-</style>
diff --git a/webapp/components/Group/GroupButton.vue b/webapp/components/Group/GroupButton.vue
deleted file mode 100644
index 699f1e896..000000000
--- a/webapp/components/Group/GroupButton.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <div>
-    <nuxt-link to="/groups">
-      <os-button
-        variant="primary"
-        appearance="ghost"
-        circle
-        :aria-label="$t('header.groups.tooltip')"
-        v-tooltip="{
-          content: $t('header.groups.tooltip'),
-          placement: 'bottom-start',
-        }"
-      >
-        <template #icon>
-          <base-icon name="users" />
-        </template>
-      </os-button>
-    </nuxt-link>
-  </div>
-</template>
-
-<script>
-import { OsButton } from '@ocelot-social/ui'
-
-export default {
-  components: { OsButton },
-}
-</script>
diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 4d6736c14..30cfdf480 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -132,9 +132,9 @@
         </div>
         <!-- submit -->
         <ds-space margin-top="large">
-          <nuxt-link to="/groups">
-            <os-button variant="default" appearance="filled">{{ $t('actions.cancel') }}</os-button>
-          </nuxt-link>
+          <os-button as="nuxt-link" to="/groups" variant="default" appearance="filled">
+            {{ $t('actions.cancel') }}
+          </os-button>
           <os-button
             variant="primary"
             appearance="filled"
diff --git a/webapp/components/Group/GroupLink.vue b/webapp/components/Group/GroupLink.vue
deleted file mode 100644
index 4fcc7983d..000000000
--- a/webapp/components/Group/GroupLink.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div>
-    <div>
-      <ds-space><h3>Link zur Gruppe</h3></ds-space>
-      <ds-space>
-        <ds-copy-field>Copy Link for Invite Member please!</ds-copy-field>
-      </ds-space>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'GroupLink',
-}
-</script>
diff --git a/webapp/components/HeaderMenu/HeaderMenu.vue b/webapp/components/HeaderMenu/HeaderMenu.vue
index 0f09d9342..45ad8a6b8 100644
--- a/webapp/components/HeaderMenu/HeaderMenu.vue
+++ b/webapp/components/HeaderMenu/HeaderMenu.vue
@@ -84,11 +84,42 @@
               </div>
               <!-- group button -->
               <client-only v-if="SHOW_GROUP_BUTTON_IN_HEADER">
-                <group-button />
+                <os-button
+                  as="nuxt-link"
+                  to="/groups"
+                  variant="primary"
+                  appearance="ghost"
+                  circle
+                  :aria-label="$t('header.groups.tooltip')"
+                  v-tooltip="{
+                    content: $t('header.groups.tooltip'),
+                    placement: 'bottom-start',
+                  }"
+                >
+                  <template #icon>
+                    <base-icon name="users" />
+                  </template>
+                </os-button>
               </client-only>
               <!-- map button -->
               <client-only v-if="!isEmpty(this.$env.MAPBOX_TOKEN)">
-                <map-button />
+                <os-button
+                  as="nuxt-link"
+                  to="/map"
+                  class="map-button"
+                  variant="primary"
+                  appearance="ghost"
+                  circle
+                  :aria-label="$t('header.map.tooltip')"
+                  v-tooltip="{
+                    content: $t('header.map.tooltip'),
+                    placement: 'bottom-start',
+                  }"
+                >
+                  <template #icon>
+                    <base-icon name="globe-detailed" size="large" />
+                  </template>
+                </os-button>
               </client-only>
               <!-- custom button -->
               <client-only v-if="!isEmpty(customButton)">
@@ -202,7 +233,22 @@
           >
             <client-only>
               <div @click="toggleMobileMenuView">
-                <group-button />
+                <os-button
+                  as="nuxt-link"
+                  to="/groups"
+                  variant="primary"
+                  appearance="ghost"
+                  circle
+                  :aria-label="$t('header.groups.tooltip')"
+                  v-tooltip="{
+                    content: $t('header.groups.tooltip'),
+                    placement: 'bottom-start',
+                  }"
+                >
+                  <template #icon>
+                    <base-icon name="users" />
+                  </template>
+                </os-button>
               </div>
             </client-only>
           </ds-flex-item>
@@ -214,7 +260,23 @@
           >
             <client-only>
               <div @click="toggleMobileMenuView">
-                <map-button />
+                <os-button
+                  as="nuxt-link"
+                  to="/map"
+                  class="map-button"
+                  variant="primary"
+                  appearance="ghost"
+                  circle
+                  :aria-label="$t('header.map.tooltip')"
+                  v-tooltip="{
+                    content: $t('header.map.tooltip'),
+                    placement: 'bottom-start',
+                  }"
+                >
+                  <template #icon>
+                    <base-icon name="globe-detailed" size="large" />
+                  </template>
+                </os-button>
               </div>
             </client-only>
           </ds-flex-item>
@@ -290,12 +352,10 @@ import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
 import ChatNotificationMenu from '~/components/ChatNotificationMenu/ChatNotificationMenu'
 import CustomButton from '~/components/CustomButton/CustomButton'
 import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
-import GroupButton from '~/components/Group/GroupButton'
 import headerMenuBranded from '~/constants/headerMenuBranded.js'
 import InviteButton from '~/components/InviteButton/InviteButton'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import Logo from '~/components/Logo/Logo'
-import MapButton from '~/components/Map/MapButton'
 import SearchField from '~/components/features/SearchField/SearchField.vue'
 import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
 import links from '~/constants/links.js'
@@ -310,11 +370,9 @@ export default {
     ChatNotificationMenu,
     CustomButton,
     FilterMenu,
-    GroupButton,
     InviteButton,
     LocaleSwitch,
     Logo,
-    MapButton,
     NotificationMenu,
     PageParamsLink,
     SearchField,
@@ -473,4 +531,12 @@ export default {
 .hide-mobile-menu {
   display: none;
 }
+.map-button {
+  margin-left: 3px;
+  margin-right: 3px;
+
+  .base-icon > .svg.--large {
+    margin-left: 0;
+  }
+}
 </style>
diff --git a/webapp/components/Map/MapButton.vue b/webapp/components/Map/MapButton.vue
deleted file mode 100644
index b0fcc4da3..000000000
--- a/webapp/components/Map/MapButton.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <div>
-    <nuxt-link to="/map">
-      <os-button
-        class="map-button"
-        variant="primary"
-        appearance="ghost"
-        circle
-        :aria-label="$t('header.map.tooltip')"
-        v-tooltip="{
-          content: $t('header.map.tooltip'),
-          placement: 'bottom-start',
-        }"
-      >
-        <template #icon>
-          <base-icon name="globe-detailed" size="large" />
-        </template>
-      </os-button>
-    </nuxt-link>
-  </div>
-</template>
-
-<script>
-import { OsButton } from '@ocelot-social/ui'
-
-export default {
-  name: 'MapButton',
-  components: { OsButton },
-}
-</script>
-
-<style lang="scss">
-.map-button {
-  margin-left: 3px;
-  margin-right: 3px;
-
-  .base-icon > .svg.--large {
-    margin-left: 0;
-  }
-}
-</style>
diff --git a/webapp/components/NotificationMenu/NotificationMenu.vue b/webapp/components/NotificationMenu/NotificationMenu.vue
index 269b81140..e51290871 100644
--- a/webapp/components/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/NotificationMenu/NotificationMenu.vue
@@ -1,40 +1,22 @@
 <template>
-  <nuxt-link
-    v-if="!unreadNotificationsCount"
-    class="notifications-menu"
+  <os-button
+    v-if="!unreadNotificationsCount || noMenu"
+    as="nuxt-link"
     :to="{ name: 'notifications' }"
+    class="notifications-menu"
+    variant="primary"
+    appearance="ghost"
+    circle
+    :aria-label="$t('header.notifications.tooltip')"
+    v-tooltip="{
+      content: $t('header.notifications.tooltip'),
+      placement: 'bottom-start',
+    }"
   >
-    <os-button
-      variant="primary"
-      appearance="ghost"
-      circle
-      :aria-label="$t('header.notifications.tooltip')"
-      v-tooltip="{
-        content: $t('header.notifications.tooltip'),
-        placement: 'bottom-start',
-      }"
-    >
-      <template #icon>
-        <base-icon name="bell" />
-      </template>
-    </os-button>
-  </nuxt-link>
-  <nuxt-link v-else-if="noMenu" class="notifications-menu" :to="{ name: 'notifications' }">
-    <os-button
-      variant="primary"
-      appearance="ghost"
-      circle
-      :aria-label="$t('header.notifications.tooltip')"
-      v-tooltip="{
-        content: $t('header.notifications.tooltip'),
-        placement: 'bottom-start',
-      }"
-    >
-      <template #icon>
-        <counter-icon icon="bell" :count="unreadNotificationsCount" danger />
-      </template>
-    </os-button>
-  </nuxt-link>
+    <template #icon>
+      <counter-icon icon="bell" :count="unreadNotificationsCount" danger />
+    </template>
+  </os-button>
   <dropdown
     v-else
     class="notifications-menu"
@@ -63,11 +45,14 @@
     <template #popover="{ closeMenu }">
       <ds-flex class="notifications-link-container">
         <ds-flex-item>
-          <nuxt-link :to="{ name: 'notifications' }">
-            <os-button appearance="ghost" variant="primary">
-              {{ $t('notifications.pageLink') }}
-            </os-button>
-          </nuxt-link>
+          <os-button
+            as="nuxt-link"
+            :to="{ name: 'notifications' }"
+            appearance="ghost"
+            variant="primary"
+          >
+            {{ $t('notifications.pageLink') }}
+          </os-button>
           <os-button
             appearance="ghost"
             variant="primary"
diff --git a/webapp/components/UserTeaser/UserTeaserPopover.vue b/webapp/components/UserTeaser/UserTeaserPopover.vue
index c2cbd1fdf..7cf1766e6 100644
--- a/webapp/components/UserTeaser/UserTeaserPopover.vue
+++ b/webapp/components/UserTeaser/UserTeaserPopover.vue
@@ -27,9 +27,15 @@
         />
       </li>
     </ul>
-    <nuxt-link v-if="isTouchDevice && userLink" :to="userLink" class="link">
-      <os-button variant="primary">{{ $t('user-teaser.popover.open-profile') }}</os-button>
-    </nuxt-link>
+    <os-button
+      v-if="isTouchDevice && userLink"
+      as="nuxt-link"
+      :to="userLink"
+      class="link"
+      variant="primary"
+    >
+      {{ $t('user-teaser.popover.open-profile') }}
+    </os-button>
   </div>
 </template>
 
diff --git a/webapp/pages/admin/users/__snapshots__/index.spec.js.snap b/webapp/pages/admin/users/__snapshots__/index.spec.js.snap
index 65337fcbb..7756c53e5 100644
--- a/webapp/pages/admin/users/__snapshots__/index.spec.js.snap
+++ b/webapp/pages/admin/users/__snapshots__/index.spec.js.snap
@@ -739,29 +739,25 @@ exports[`Users given badges are enabled renders 1`] = `
               class="ds-table-col ds-table-col-right"
             >
               <nuxt-link-stub
+                aria-label="actions.edit"
+                class="os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px]"
+                data-appearance="filled"
+                data-variant="primary"
                 to="[object Object]"
               >
-                <button
-                  aria-label="actions.edit"
-                  class="os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px]"
-                  data-appearance="filled"
-                  data-variant="primary"
-                  type="button"
+                <span
+                  class="inline-flex items-center"
                 >
                   <span
-                    class="inline-flex items-center"
+                    class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
                   >
                     <span
-                      class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
+                      class="base-icon"
                     >
-                      <span
-                        class="base-icon"
-                      >
-                        <!---->
-                      </span>
+                      <!---->
                     </span>
                   </span>
-                </button>
+                </span>
               </nuxt-link-stub>
             </td>
           </tr>
@@ -841,29 +837,25 @@ exports[`Users given badges are enabled renders 1`] = `
               class="ds-table-col ds-table-col-right"
             >
               <nuxt-link-stub
+                aria-label="actions.edit"
+                class="os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px]"
+                data-appearance="filled"
+                data-variant="primary"
                 to="[object Object]"
               >
-                <button
-                  aria-label="actions.edit"
-                  class="os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px]"
-                  data-appearance="filled"
-                  data-variant="primary"
-                  type="button"
+                <span
+                  class="inline-flex items-center"
                 >
                   <span
-                    class="inline-flex items-center"
+                    class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
                   >
                     <span
-                      class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
+                      class="base-icon"
                     >
-                      <span
-                        class="base-icon"
-                      >
-                        <!---->
-                      </span>
+                      <!---->
                     </span>
                   </span>
-                </button>
+                </span>
               </nuxt-link-stub>
             </td>
           </tr>
diff --git a/webapp/pages/admin/users/index.vue b/webapp/pages/admin/users/index.vue
index 3d3f244cd..c809cabec 100644
--- a/webapp/pages/admin/users/index.vue
+++ b/webapp/pages/admin/users/index.vue
@@ -73,21 +73,19 @@
           </template>
         </template>
         <template #badges="scope">
-          <nuxt-link
+          <os-button
+            as="nuxt-link"
             :to="{
               name: 'admin-users-id',
               params: { id: scope.row.id },
             }"
+            variant="primary"
+            appearance="filled"
+            circle
+            :aria-label="$t('actions.edit')"
           >
-            <os-button
-              variant="primary"
-              appearance="filled"
-              circle
-              :aria-label="$t('actions.edit')"
-            >
-              <template #icon><base-icon name="pencil" /></template>
-            </os-button>
-          </nuxt-link>
+            <template #icon><base-icon name="pencil" /></template>
+          </os-button>
         </template>
       </ds-table>
       <pagination-buttons :hasNext="hasNext" :hasPrevious="hasPrevious" @next="next" @back="back" />
diff --git a/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap b/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap
index 14280ff8a..63e729b6a 100644
--- a/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap
+++ b/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap
@@ -934,30 +934,26 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
           style="margin-bottom: 32px;"
         >
           <nuxt-link-stub
+            aria-label="contribution.newPost"
+            class="profile-post-add-button os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px] profile-post-add-button has-tooltip"
+            data-appearance="filled"
+            data-original-title="null"
+            data-variant="primary"
             to="[object Object]"
           >
-            <button
-              aria-label="contribution.newPost"
-              class="profile-post-add-button os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px] profile-post-add-button has-tooltip"
-              data-appearance="filled"
-              data-original-title="null"
-              data-variant="primary"
-              type="button"
+            <span
+              class="inline-flex items-center"
             >
               <span
-                class="inline-flex items-center"
+                class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
               >
                 <span
-                  class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
+                  class="base-icon"
                 >
-                  <span
-                    class="base-icon"
-                  >
-                    <!---->
-                  </span>
+                  <!---->
                 </span>
               </span>
-            </button>
+            </span>
           </nuxt-link-stub>
         </div>
          
@@ -2930,30 +2926,26 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
           style="margin-bottom: 32px;"
         >
           <nuxt-link-stub
+            aria-label="contribution.newPost"
+            class="profile-post-add-button os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px] profile-post-add-button has-tooltip"
+            data-appearance="filled"
+            data-original-title="null"
+            data-variant="primary"
             to="[object Object]"
           >
-            <button
-              aria-label="contribution.newPost"
-              class="profile-post-add-button os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px] profile-post-add-button has-tooltip"
-              data-appearance="filled"
-              data-original-title="null"
-              data-variant="primary"
-              type="button"
+            <span
+              class="inline-flex items-center"
             >
               <span
-                class="inline-flex items-center"
+                class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
               >
                 <span
-                  class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
+                  class="base-icon"
                 >
-                  <span
-                    class="base-icon"
-                  >
-                    <!---->
-                  </span>
+                  <!---->
                 </span>
               </span>
-            </button>
+            </span>
           </nuxt-link-stub>
         </div>
          
@@ -3945,30 +3937,26 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
           style="margin-bottom: 32px;"
         >
           <nuxt-link-stub
+            aria-label="contribution.newPost"
+            class="profile-post-add-button os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px] profile-post-add-button has-tooltip"
+            data-appearance="filled"
+            data-original-title="null"
+            data-variant="primary"
             to="[object Object]"
           >
-            <button
-              aria-label="contribution.newPost"
-              class="profile-post-add-button os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px] profile-post-add-button has-tooltip"
-              data-appearance="filled"
-              data-original-title="null"
-              data-variant="primary"
-              type="button"
+            <span
+              class="inline-flex items-center"
             >
               <span
-                class="inline-flex items-center"
+                class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
               >
                 <span
-                  class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
+                  class="base-icon"
                 >
-                  <span
-                    class="base-icon"
-                  >
-                    <!---->
-                  </span>
+                  <!---->
                 </span>
               </span>
-            </button>
+            </span>
           </nuxt-link-stub>
         </div>
          
@@ -6543,30 +6531,26 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
           style="margin-bottom: 32px;"
         >
           <nuxt-link-stub
+            aria-label="contribution.newPost"
+            class="profile-post-add-button os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px] profile-post-add-button has-tooltip"
+            data-appearance="filled"
+            data-original-title="null"
+            data-variant="primary"
             to="[object Object]"
           >
-            <button
-              aria-label="contribution.newPost"
-              class="profile-post-add-button os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px] profile-post-add-button has-tooltip"
-              data-appearance="filled"
-              data-original-title="null"
-              data-variant="primary"
-              type="button"
+            <span
+              class="inline-flex items-center"
             >
               <span
-                class="inline-flex items-center"
+                class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
               >
                 <span
-                  class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
+                  class="base-icon"
                 >
-                  <span
-                    class="base-icon"
-                  >
-                    <!---->
-                  </span>
+                  <!---->
                 </span>
               </span>
-            </button>
+            </span>
           </nuxt-link-stub>
         </div>
          
@@ -7623,30 +7607,26 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
           style="margin-bottom: 32px;"
         >
           <nuxt-link-stub
+            aria-label="contribution.newPost"
+            class="profile-post-add-button os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px] profile-post-add-button has-tooltip"
+            data-appearance="filled"
+            data-original-title="null"
+            data-variant="primary"
             to="[object Object]"
           >
-            <button
-              aria-label="contribution.newPost"
-              class="profile-post-add-button os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px] profile-post-add-button has-tooltip"
-              data-appearance="filled"
-              data-original-title="null"
-              data-variant="primary"
-              type="button"
+            <span
+              class="inline-flex items-center"
             >
               <span
-                class="inline-flex items-center"
+                class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
               >
                 <span
-                  class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
+                  class="base-icon"
                 >
-                  <span
-                    class="base-icon"
-                  >
-                    <!---->
-                  </span>
+                  <!---->
                 </span>
               </span>
-            </button>
+            </span>
           </nuxt-link-stub>
         </div>
          
@@ -8644,30 +8624,26 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
           style="margin-bottom: 32px;"
         >
           <nuxt-link-stub
+            aria-label="contribution.newPost"
+            class="profile-post-add-button os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px] profile-post-add-button has-tooltip"
+            data-appearance="filled"
+            data-original-title="null"
+            data-variant="primary"
             to="[object Object]"
           >
-            <button
-              aria-label="contribution.newPost"
-              class="profile-post-add-button os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px] profile-post-add-button has-tooltip"
-              data-appearance="filled"
-              data-original-title="null"
-              data-variant="primary"
-              type="button"
+            <span
+              class="inline-flex items-center"
             >
               <span
-                class="inline-flex items-center"
+                class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
               >
                 <span
-                  class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
+                  class="base-icon"
                 >
-                  <span
-                    class="base-icon"
-                  >
-                    <!---->
-                  </span>
+                  <!---->
                 </span>
               </span>
-            </button>
+            </span>
           </nuxt-link-stub>
         </div>
          
diff --git a/webapp/pages/groups/_id/_slug.vue b/webapp/pages/groups/_id/_slug.vue
index 7da8ec47e..0f9e6ecfe 100644
--- a/webapp/pages/groups/_id/_slug.vue
+++ b/webapp/pages/groups/_id/_slug.vue
@@ -218,28 +218,26 @@
           </base-card>
         </ds-space>
         <ds-space v-if="isGroupMemberNonePending" centered>
-          <nuxt-link
+          <os-button
+            as="nuxt-link"
             :to="{
               name: 'post-create-type',
               query: { groupId: group.id },
             }"
+            class="profile-post-add-button"
+            variant="primary"
+            appearance="filled"
+            circle
+            :aria-label="$t('contribution.newPost')"
+            v-tooltip="{
+              content: $t('contribution.newPost'),
+              placement: 'left',
+            }"
           >
-            <os-button
-              class="profile-post-add-button"
-              variant="primary"
-              appearance="filled"
-              circle
-              :aria-label="$t('contribution.newPost')"
-              v-tooltip="{
-                content: $t('contribution.newPost'),
-                placement: 'left',
-              }"
-            >
-              <template #icon>
-                <base-icon name="plus" />
-              </template>
-            </os-button>
-          </nuxt-link>
+            <template #icon>
+              <base-icon name="plus" />
+            </template>
+          </os-button>
         </ds-space>
         <masonry-grid>
           <!-- TapNavigation -->
diff --git a/webapp/pages/groups/index.vue b/webapp/pages/groups/index.vue
index 5d67fba96..e71960f26 100644
--- a/webapp/pages/groups/index.vue
+++ b/webapp/pages/groups/index.vue
@@ -7,24 +7,24 @@
     <ds-space>
       <!-- create group -->
       <ds-space centered>
-        <nuxt-link :to="{ name: 'groups-create' }">
-          <os-button
-            class="group-add-button"
-            variant="primary"
-            appearance="filled"
-            circle
-            size="xl"
-            :aria-label="$t('group.createNewGroup.tooltip')"
-            v-tooltip="{
-              content: $t('group.createNewGroup.tooltip'),
-              placement: 'left',
-            }"
-          >
-            <template #icon>
-              <base-icon name="plus" />
-            </template>
-          </os-button>
-        </nuxt-link>
+        <os-button
+          as="nuxt-link"
+          :to="{ name: 'groups-create' }"
+          class="group-add-button"
+          variant="primary"
+          appearance="filled"
+          circle
+          size="xl"
+          :aria-label="$t('group.createNewGroup.tooltip')"
+          v-tooltip="{
+            content: $t('group.createNewGroup.tooltip'),
+            placement: 'left',
+          }"
+        >
+          <template #icon>
+            <base-icon name="plus" />
+          </template>
+        </os-button>
       </ds-space>
       <!-- group list -->
       <ds-space centered v-if="showPagination">
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 0fbcdc80f..9c76ec10e 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -3,24 +3,27 @@
     <!-- create post -->
     <div :class="POST_ADD_BUTTON_POSITION_TOP ? 'box-add-button-top' : ''">
       <client-only>
-        <nuxt-link :to="{ name: 'post-create-type' }" :class="{ 'hide-filter': hideByScroll }">
-          <os-button
-            v-tooltip="{
-              content: $t('contribution.newPost'),
-              placement: 'left',
-            }"
-            class="post-add-button"
-            :class="POST_ADD_BUTTON_POSITION_TOP ? 'post-add-button-top' : 'post-add-button-bottom'"
-            variant="primary"
-            appearance="filled"
-            circle
-            size="xl"
-          >
-            <template #icon>
-              <base-icon name="plus" />
-            </template>
-          </os-button>
-        </nuxt-link>
+        <os-button
+          as="nuxt-link"
+          :to="{ name: 'post-create-type' }"
+          v-tooltip="{
+            content: $t('contribution.newPost'),
+            placement: 'left',
+          }"
+          class="post-add-button"
+          :class="[
+            POST_ADD_BUTTON_POSITION_TOP ? 'post-add-button-top' : 'post-add-button-bottom',
+            { 'hide-filter': hideByScroll },
+          ]"
+          variant="primary"
+          appearance="filled"
+          circle
+          size="xl"
+        >
+          <template #icon>
+            <base-icon name="plus" />
+          </template>
+        </os-button>
       </client-only>
     </div>
     <div>
@@ -356,7 +359,7 @@ export default {
   float: right;
 }
 
-button.post-add-button-bottom {
+.post-add-button-bottom {
   height: 54px !important;
   width: 54px !important;
   min-height: 54px !important;
@@ -370,7 +373,7 @@ button.post-add-button-bottom {
   box-shadow: $box-shadow-x-large !important;
 }
 
-button.post-add-button-top {
+.post-add-button-top {
   height: 54px !important;
   width: 54px !important;
   min-height: 54px !important;
@@ -467,7 +470,7 @@ button.post-add-button-top {
   .box-add-button-top {
     padding-right: 40px;
   }
-  button.post-add-button-top {
+  .post-add-button-top {
     height: 44px !important;
     width: 44px !important;
     min-height: 44px !important;
diff --git a/webapp/pages/profile/_id/__snapshots__/_slug.spec.js.snap b/webapp/pages/profile/_id/__snapshots__/_slug.spec.js.snap
index 63a804067..0b1d82f8a 100644
--- a/webapp/pages/profile/_id/__snapshots__/_slug.spec.js.snap
+++ b/webapp/pages/profile/_id/__snapshots__/_slug.spec.js.snap
@@ -558,20 +558,7 @@ exports[`ProfileSlug given an authenticated user given another profile user and
             </article>
           </div>
            
-          <div
-            style="grid-row-end: span 2; grid-column-start: 1; grid-column-end: -1;"
-          >
-            <div
-              class="ds-space ds-space-centered"
-              style="margin-bottom: 32px;"
-            >
-              <nuxt-link-stub
-                to="[object Object]"
-              >
-                <!---->
-              </nuxt-link-stub>
-            </div>
-          </div>
+          <!---->
            
           <div
             style="grid-row-end: span 4; grid-column-start: 1; grid-column-end: -1;"
@@ -1264,20 +1251,7 @@ exports[`ProfileSlug given an authenticated user given another profile user and
             </article>
           </div>
            
-          <div
-            style="grid-row-end: span 2; grid-column-start: 1; grid-column-end: -1;"
-          >
-            <div
-              class="ds-space ds-space-centered"
-              style="margin-bottom: 32px;"
-            >
-              <nuxt-link-stub
-                to="[object Object]"
-              >
-                <!---->
-              </nuxt-link-stub>
-            </div>
-          </div>
+          <!---->
            
           <div
             style="grid-row-end: span 4; grid-column-start: 1; grid-column-end: -1;"
@@ -1845,34 +1819,29 @@ exports[`ProfileSlug given an authenticated user given the logged in user as pro
             style="grid-row-end: span 2; grid-column-start: 1; grid-column-end: -1;"
           >
             <div
-              class="ds-space ds-space-centered"
-              style="margin-bottom: 32px;"
+              class="profile-post-add-button-container"
             >
               <nuxt-link-stub
+                aria-label="contribution.newPost"
+                class="profile-post-add-button os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px] profile-post-add-button has-tooltip"
+                data-appearance="filled"
+                data-original-title="null"
+                data-variant="primary"
                 to="[object Object]"
               >
-                <button
-                  aria-label="contribution.newPost"
-                  class="profile-post-add-button os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px] profile-post-add-button has-tooltip"
-                  data-appearance="filled"
-                  data-original-title="null"
-                  data-variant="primary"
-                  type="button"
+                <span
+                  class="inline-flex items-center"
                 >
                   <span
-                    class="inline-flex items-center"
+                    class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
                   >
                     <span
-                      class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
+                      class="base-icon"
                     >
-                      <span
-                        class="base-icon"
-                      >
-                        <!---->
-                      </span>
+                      <!---->
                     </span>
                   </span>
-                </button>
+                </span>
               </nuxt-link-stub>
             </div>
           </div>
@@ -2485,34 +2454,29 @@ exports[`ProfileSlug given an authenticated user given the logged in user as pro
             style="grid-row-end: span 2; grid-column-start: 1; grid-column-end: -1;"
           >
             <div
-              class="ds-space ds-space-centered"
-              style="margin-bottom: 32px;"
+              class="profile-post-add-button-container"
             >
               <nuxt-link-stub
+                aria-label="contribution.newPost"
+                class="profile-post-add-button os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px] profile-post-add-button has-tooltip"
+                data-appearance="filled"
+                data-original-title="null"
+                data-variant="primary"
                 to="[object Object]"
               >
-                <button
-                  aria-label="contribution.newPost"
-                  class="profile-post-add-button os-button inline-flex items-center justify-center [white-space-collapse:collapse] relative appearance-none font-semibold tracking-[0.05em] transition-[color,background-color] duration-[80ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] cursor-pointer select-none border-[0.8px] border-solid focus:outline-1 disabled:pointer-events-none disabled:cursor-default focus:outline-dashed focus:outline-[var(--color-primary)] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)] disabled:bg-[var(--color-disabled)] disabled:text-[var(--color-disabled-contrast)] disabled:border-[var(--color-disabled)] disabled:shadow-[inset_0_0_0_1px_transparent] h-[36px] min-w-[36px] text-[15px] leading-[normal] align-middle bg-[var(--color-primary)] text-[var(--color-primary-contrast)] border-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] hover:border-[var(--color-primary-hover)] hover:text-[var(--color-primary-contrast)] active:bg-[var(--color-primary-active)] active:border-[var(--color-primary-active)] active:text-[var(--color-primary-contrast)] rounded-full p-0 w-[36px] profile-post-add-button has-tooltip"
-                  data-appearance="filled"
-                  data-original-title="null"
-                  data-variant="primary"
-                  type="button"
+                <span
+                  class="inline-flex items-center"
                 >
                   <span
-                    class="inline-flex items-center"
+                    class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
                   >
                     <span
-                      class="os-button__icon inline-flex items-center shrink-0 h-[1.2em] [&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current"
+                      class="base-icon"
                     >
-                      <span
-                        class="base-icon"
-                      >
-                        <!---->
-                      </span>
+                      <!---->
                     </span>
                   </span>
-                </button>
+                </span>
               </nuxt-link-stub>
             </div>
           </div>
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 593d35833..1a02ad3cf 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -145,27 +145,26 @@
           <tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch-tab="handleTab" />
 
           <!-- feed -->
-          <ds-grid-item :row-span="2" column-span="fullWidth">
-            <ds-space centered>
-              <nuxt-link :to="{ name: 'post-create-type' }">
-                <os-button
-                  v-if="myProfile"
-                  v-tooltip="{
-                    content: $t('contribution.newPost'),
-                    placement: 'left',
-                  }"
-                  class="profile-post-add-button"
-                  variant="primary"
-                  appearance="filled"
-                  circle
-                  :aria-label="$t('contribution.newPost')"
-                >
-                  <template #icon>
-                    <base-icon name="plus" />
-                  </template>
-                </os-button>
-              </nuxt-link>
-            </ds-space>
+          <ds-grid-item v-if="myProfile" :row-span="2" column-span="fullWidth">
+            <div class="profile-post-add-button-container">
+              <os-button
+                as="nuxt-link"
+                :to="{ name: 'post-create-type' }"
+                v-tooltip="{
+                  content: $t('contribution.newPost'),
+                  placement: 'left',
+                }"
+                class="profile-post-add-button"
+                variant="primary"
+                appearance="filled"
+                circle
+                :aria-label="$t('contribution.newPost')"
+              >
+                <template #icon>
+                  <base-icon name="plus" />
+                </template>
+              </os-button>
+            </div>
           </ds-grid-item>
 
           <template v-if="posts.length">
@@ -505,6 +504,11 @@ export default {
     right: $space-x-small;
   }
 }
+.profile-post-add-button-container {
+  display: flex;
+  justify-content: center;
+  padding: $space-x-small 0;
+}
 .profile-post-add-button {
   box-shadow: $box-shadow-x-large !important;
 }
diff --git a/webapp/pages/terms-and-conditions-confirm.vue b/webapp/pages/terms-and-conditions-confirm.vue
index effddafd5..8f2416644 100644
--- a/webapp/pages/terms-and-conditions-confirm.vue
+++ b/webapp/pages/terms-and-conditions-confirm.vue
@@ -3,11 +3,15 @@
     <base-card>
       <base-icon name="balance-scale" />
       <h2 class="title">{{ $t(`termsAndConditions.newTermsAndConditions`) }}</h2>
-      <nuxt-link :to="{ name: 'terms-and-conditions' }" target="_blank">
-        <os-button appearance="outline" variant="primary">
-          {{ $t(`termsAndConditions.termsAndConditionsNewConfirmText`) }}
-        </os-button>
-      </nuxt-link>
+      <os-button
+        as="nuxt-link"
+        :to="{ name: 'terms-and-conditions' }"
+        target="_blank"
+        appearance="outline"
+        variant="primary"
+      >
+        {{ $t(`termsAndConditions.termsAndConditionsNewConfirmText`) }}
+      </os-button>
       <label for="checkbox">
         <input id="checkbox" type="checkbox" v-model="checked" :checked="checked" />
         {{ $t('termsAndConditions.termsAndConditionsNewConfirm') }}