diff --git a/frontend/playwright/ui/specs/dashboard.spec.js b/frontend/playwright/ui/specs/dashboard.spec.js
index 044ed5226a..d20b90cfd4 100644
--- a/frontend/playwright/ui/specs/dashboard.spec.js
+++ b/frontend/playwright/ui/specs/dashboard.spec.js
@@ -131,9 +131,9 @@ test("Bug 9443, Admin can not demote owner", async ({ page }) => {
   await dashboardPage.goToSecondTeamMembersSection();
 
   await expect(page.getByRole("heading", { name: "Members" })).toBeVisible();
-  await expect(page.getByRole("combobox", { name: "Admin" })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Admin" })).toBeVisible();
   await expect(page.getByText("Owner")).toBeVisible();
-  await expect(page.getByRole("combobox", { name: "Owner" })).toHaveCount(0);
+  await expect(page.getByRole("button", { name: "Owner" })).toHaveCount(0);
 });
 
 test("Bug 9927, Don't show the banner to invite team members if the user has dismissed it", async ({
diff --git a/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js
index 320d855e64..17d3ba0faf 100644
--- a/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js
+++ b/frontend/playwright/ui/visual-specs/visual-dashboard.spec.js
@@ -514,3 +514,90 @@ test.describe("Dashboard sidebar controls", () => {
     ).toHaveScreenshot(shot);
   });
 });
+
+test.describe("Team pages controls", () => {
+  const shot = { maxDiffPixelRatio: 0, threshold: 0 };
+
+  // The row menu button: a raw button with the menu-btn class before the DS
+  // migration, a DS icon button named "Options" after it.
+  const openRowMenu = (page) => {
+    const rows = page.locator("[class*='table-rows']");
+    return rows
+      .locator("[class*='menu-btn']")
+      .or(rows.getByRole("button", { name: "Options" }))
+      .first()
+      .click();
+  };
+
+  test("Members role and actions menus", async ({ page }) => {
+    const dashboardPage = new DashboardPage(page);
+    await dashboardPage.setupDashboardFull();
+    // Han Solo owns the team; the logged-in user is an admin.
+    await dashboardPage.mockRPC(
+      "get-team-members?team-id=*",
+      "dashboard/get-team-members-admin.json",
+    );
+    await dashboardPage.goToSecondTeamMembersSection();
+    await expect(page.getByText("role")).toBeVisible();
+
+    await page.locator("[class*='has-priv']").first().click();
+    await expect(page.locator("[class*='roles-dropdown']")).toBeVisible();
+    await expect(page).toHaveScreenshot(shot);
+
+    await page.keyboard.press("Escape");
+    await page.mouse.click(10, 700);
+    await openRowMenu(page);
+    await expect(page.locator("[class*='actions-dropdown']")).toBeVisible();
+    await expect(page).toHaveScreenshot(shot);
+  });
+
+  test("Invitations role menu and resend modal", async ({ page }) => {
+    const dashboardPage = new DashboardPage(page);
+    await dashboardPage.setupDashboardFull();
+    await dashboardPage.setupTeamInvitations();
+    await dashboardPage.goToSecondTeamInvitationsSection();
+    await expect(page.getByText("test1@mail.com")).toBeVisible();
+
+    await page.locator("[class*='has-priv']").first().click();
+    await expect(page.locator("[class*='roles-dropdown']")).toBeVisible();
+    await expect(page).toHaveScreenshot(shot);
+
+    await page.mouse.click(10, 700);
+    await page.getByText("test1@mail.com").click();
+    await page.getByRole("button", { name: "Resend invitation" }).click();
+    await expect(page.getByText("Resend invitations")).toBeVisible();
+    await page.mouse.move(10, 700);
+    await expect(page).toHaveScreenshot(shot);
+  });
+
+  test("Webhooks actions menu and modal", async ({ page }) => {
+    const dashboardPage = new DashboardPage(page);
+    await dashboardPage.setupDashboardFull();
+    await dashboardPage.setupTeamWebhooks();
+    await dashboardPage.goToSecondTeamWebhooksSection();
+    await expect(page.getByText("https://www.google.com")).toBeVisible();
+
+    await openRowMenu(page);
+    await expect(
+      page.locator("[class*='webhook-actions-dropdown']"),
+    ).toBeVisible();
+    await expect(page).toHaveScreenshot(shot);
+
+    await page.mouse.click(10, 700);
+    await page.getByText("Create webhook").click();
+    await expect(page.getByText("Payload URL")).toBeVisible();
+    await page.mouse.move(10, 700);
+    await expect(page).toHaveScreenshot(shot);
+  });
+
+  test("Team settings image overlay", async ({ page }) => {
+    const dashboardPage = new DashboardPage(page);
+    await dashboardPage.setupDashboardFull();
+    await dashboardPage.setupTeamSettings();
+    await dashboardPage.goToSecondTeamSettingsSection();
+    await expect(page.getByText("TEAM INFO")).toBeVisible();
+
+    await page.locator("[class*='team-icon']").hover();
+    await expect(page.locator("[class*='team-icon']")).toHaveScreenshot(shot);
+  });
+});
diff --git a/frontend/src/app/main/ui/dashboard/team.cljs b/frontend/src/app/main/ui/dashboard/team.cljs
index b84ed95f0b..8888c6d4e3 100644
--- a/frontend/src/app/main/ui/dashboard/team.cljs
+++ b/frontend/src/app/main/ui/dashboard/team.cljs
@@ -52,33 +52,6 @@
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
-(def ^:private arrow-icon
-  (deprecated-icon/icon-xref :arrow (stl/css :arrow-icon)))
-
-(def ^:private menu-icon
-  (deprecated-icon/icon-xref :menu (stl/css :menu-icon)))
-
-(def ^:private organization-menu-icon
-  (deprecated-icon/icon-xref :menu (stl/css :organization-menu-icon)))
-
-(def ^:private warning-icon
-  (deprecated-icon/icon-xref :msg-warning (stl/css :warning-icon)))
-
-(def ^:private success-icon
-  (deprecated-icon/icon-xref :msg-success (stl/css :success-icon)))
-
-(def ^:private image-icon
-  (deprecated-icon/icon-xref :img (stl/css :image-icon)))
-
-(def ^:private user-icon
-  (deprecated-icon/icon-xref :user (stl/css :user-icon)))
-
-(def ^:private document-icon
-  (deprecated-icon/icon-xref :document (stl/css :document-icon)))
-
-(def ^:private group-icon
-  (deprecated-icon/icon-xref :group (stl/css :group-icon)))
-
 (mf/defc header*
   {::mf/wrap [mf/memo]}
   [{:keys [section team profile]}]
@@ -323,8 +296,11 @@
       [:div {:class (stl/css :modal-restricted-header)}
        [:h2 {:class (stl/css :modal-restricted-title)}
         (tr "modals.invite-restricted-members.title")]
-       [:button {:class (stl/css :modal-close-btn)
-                 :on-click modal/hide!} deprecated-icon/close]]
+       [:> icon-button* {:variant "ghost"
+                         :tooltip-class (stl/css :modal-close-btn)
+                         :aria-label (tr "labels.close")
+                         :icon i/close
+                         :on-click modal/hide!}]]
 
       [:div {:class (stl/css :modal-restricted-content)}
        [:p (tr "modals.invite-restricted-members.description")]
@@ -409,13 +385,14 @@
         on-hide          (mf/use-fn #(reset! show? false))]
     [:*
      (if (and can-change-rol not-superior (not (and is-you is-owner)))
-       [:div {:class (stl/css :rol-selector :has-priv)
-              :role "combobox"
-              :aria-labelledby "role-label-id"
-              :on-click on-show}
-        [:span {:class (stl/css :rol-label)
-                :id "role-label-id"} role]
-        arrow-icon]
+       [:button {:class (stl/css :rol-selector :has-priv)
+                 :type "button"
+                 :aria-haspopup "listbox"
+                 :aria-expanded @show?
+                 :on-click on-show}
+        [:span {:class (stl/css :rol-label)} role]
+        [:> icon* {:icon-id i/arrow-down
+                   :class (stl/css :arrow-icon)}]]
        [:div {:class (stl/css :rol-selector)}
         [:span {:class (stl/css :rol-label)} role]])
 
@@ -451,9 +428,12 @@
 
     (when (or is-you? (and can-delete? (not (and is-owner? (not owner?)))))
       [:*
-       [:button {:class (stl/css :menu-btn)
-                 :on-click on-show}
-        menu-icon]
+       [:> icon-button* {:variant "ghost"
+                         :aria-label (tr "labels.options")
+                         :aria-haspopup "menu"
+                         :aria-expanded @show?
+                         :icon i/menu
+                         :on-click on-show}]
 
        [:& dropdown {:show @show? :on-close on-hide :dropdown-id (str "member-actions-" (:id member))}
         [:ul {:class (stl/css :actions-dropdown)}
@@ -691,10 +671,14 @@
 
     [:*
      (if (and can-invite (= status :pending))
-       [:div {:class (stl/css :rol-selector :has-priv)
-              :on-click on-show}
+       [:button {:class (stl/css :rol-selector :has-priv)
+                 :type "button"
+                 :aria-haspopup "listbox"
+                 :aria-expanded @show?
+                 :on-click on-show}
         [:span {:class (stl/css :rol-label)} label]
-        arrow-icon]
+        [:> icon* {:icon-id i/arrow-down
+                   :class (stl/css :arrow-icon)}]]
        [:div {:class (stl/css :rol-selector)}
         [:span {:class (stl/css :rol-label)} label]])
 
@@ -872,8 +856,11 @@
         (tr "dashboard.invitation-modal.title.delete-invitations")
         (tr "dashboard.invitation-modal.title.resend-invitations"))]
 
-     [:button {:class (stl/css :modal-close-btn)
-               :on-click modal/hide!} deprecated-icon/close]]
+     [:> icon-button* {:variant "ghost"
+                       :tooltip-class (stl/css :modal-close-btn)
+                       :aria-label (tr "labels.close")
+                       :icon i/close
+                       :on-click modal/hide!}]]
 
     [:div {:class (stl/css :modal-invitation-content)}
      [:p
@@ -1000,8 +987,11 @@
        [:h2 {:class (stl/css :modal-select-organization-title)}
         title]
 
-       [:button {:class (stl/css :modal-close-btn)
-                 :on-click modal/hide!} deprecated-icon/close]]
+       [:> icon-button* {:variant "ghost"
+                         :tooltip-class (stl/css :modal-close-btn)
+                         :aria-label (tr "labels.close")
+                         :icon i/close
+                         :on-click modal/hide!}]]
 
       (when text
         [:div {:class (stl/css :modal-content :modal-select-organization-text)} text])
@@ -1380,8 +1370,11 @@
            (tr "modals.edit-webhook.title")
            (tr "modals.create-webhook.title"))]
 
-        [:button {:class (stl/css :modal-close-btn)
-                  :on-click modal/hide!} deprecated-icon/close]]
+        [:> icon-button* {:variant "ghost"
+                          :tooltip-class (stl/css :modal-close-btn)
+                          :aria-label (tr "labels.close")
+                          :icon i/close
+                          :on-click modal/hide!}]]
 
        [:div {:class (stl/css :modal-content)}
         [:div {:class (stl/css :fields-row)}
@@ -1422,8 +1415,10 @@
     (tr "labels.webhooks")]
    [:> i18n/tr-html* {:class (stl/css :hero-desc)
                       :content (tr "dashboard.webhooks.description")}]
-   [:button {:class (stl/css :hero-btn)
-             :on-click #(st/emit! (modal/show :webhook {}))}
+   [:> button* {:variant "primary"
+                :type "button"
+                :class (stl/css :hero-btn)
+                :on-click #(st/emit! (modal/show :webhook {}))}
     (tr "dashboard.webhooks.create")]])
 
 (mf/defc webhook-actions*
@@ -1434,9 +1429,12 @@
         on-hide (mf/use-fn #(reset! show? false))]
     (if can-edit
       [:*
-       [:button {:class (stl/css :menu-btn)
-                 :on-click on-show}
-        menu-icon]
+       [:> icon-button* {:variant "ghost"
+                         :aria-label (tr "labels.options")
+                         :aria-haspopup "menu"
+                         :aria-expanded @show?
+                         :icon i/menu
+                         :on-click on-show}]
        [:& dropdown {:show @show? :on-close on-hide :dropdown-id "webhook-actions"}
         [:ul {:class (stl/css :webhook-actions-dropdown)}
          [:li {:on-click on-edit
@@ -1502,8 +1500,10 @@
      [:div {:class (stl/css :table-field :last-delivery)
             :title last-delivery-text}
       (if (nil? error-code)
-        success-icon
-        warning-icon)]
+        [:> icon* {:icon-id i/msg-success
+                   :class (stl/css :success-icon)}]
+        [:> icon* {:icon-id i/msg-warning
+                   :class (stl/css :warning-icon)}])]
      [:div {:class (stl/css :table-field :uri)}
       [:div (dm/str (:uri webhook))]]
      [:div {:class (stl/css :table-field :active)}
@@ -1657,7 +1657,9 @@
          (when can-edit
            [:button {:class (stl/css :update-overlay)
                      :on-click on-image-click}
-            image-icon])
+            [:> icon* {:icon-id i/img
+                       :size "l"
+                       :class (stl/css :image-icon)}]])
          [:img {:class (stl/css :team-image)
                 :src (cfg/resolve-team-photo-url team)}]
          (when can-edit
@@ -1688,7 +1690,8 @@
                                 :type "button"
                                 :class (stl/css-case :organization-options-btn (not show-organization-options-menu?) :organization-options-btn-open show-organization-options-menu?)
                                 :on-click on-show-options-click}
-                    organization-menu-icon
+                    [:> icon* {:icon-id i/menu
+                               :class (stl/css :organization-menu-icon)}]
 
                     [:& dropdown {:show show-organization-options-menu? :on-close close-organization-options-menu :dropdown-id "organization-options"}
                      [:ul {:class (stl/css :organization-dropdown)
@@ -1720,7 +1723,8 @@
           (str (:name owner) " ("  (tr "labels.owner") ")")]]
 
         [:div {:class (stl/css :block-content)}
-         user-icon
+         [:> icon* {:icon-id i/user
+                    :class (stl/css :user-icon)}]
          [:span {:class (stl/css :block-text)}
           (tr "dashboard.num-of-members" (count members))]]]
 
@@ -1729,12 +1733,14 @@
          (tr "dashboard.team-projects")]
 
         [:div {:class (stl/css :block-content)}
-         group-icon
+         [:> icon* {:icon-id i/group
+                    :class (stl/css :group-icon)}]
          [:span {:class (stl/css :block-text)}
           (tr "labels.num-of-projects" (i18n/c (dec (:projects stats))))]]
 
         [:div {:class (stl/css :block-content)}
-         document-icon
+         [:> icon* {:icon-id i/document
+                    :class (stl/css :document-icon)}]
          [:span {:class (stl/css :block-text)}
           (tr "labels.num-of-files" (i18n/c (:files stats)))]]]
 
diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss
index 2a8b754496..b51bd9d071 100644
--- a/frontend/src/app/main/ui/dashboard/team.scss
+++ b/frontend/src/app/main/ui/dashboard/team.scss
@@ -4,10 +4,13 @@
 //
 // Copyright (c) KALEIDOS SUBSIDIARY SL
 
+// refactor/ stays for the component-family placeholders: %input-checkbox
+// and %checkbox-icon (checkboxes, #12380) and %modal-* (modals). The shared
+// dashboard header (common-dashboard) moves in its own change.
 @use "refactor/common-refactor.scss" as deprecated;
 @use "common/refactor/common-dashboard";
 @use "ds/_utils.scss" as *;
-@use "ds/typography.scss" as t;
+@use "ds/typography.scss" as *;
 @use "ds/_sizes.scss" as *;
 @use "ds/_borders.scss" as *;
 @use "ds/mixins.scss" as *;
@@ -44,7 +47,7 @@
 }
 
 .block-label {
-  @include t.use-typography("headline-small");
+  @include use-typography("headline-small");
 
   color: var(--color-foreground-secondary);
 }
@@ -75,11 +78,9 @@
   align-items: center;
   block-size: $sz-16;
   inline-size: $sz-16;
-  color: transparent;
-  fill: none;
   stroke-width: $b-1;
   margin: 0 auto;
-  stroke: var(--color-foreground-secondary);
+  color: var(--color-foreground-secondary);
 }
 
 .team-icon {
@@ -98,8 +99,8 @@
 
 .team-image {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   border-radius: 50%;
   inline-size: $sz-120;
   block-size: $sz-120;
@@ -114,8 +115,8 @@
   justify-content: center;
   align-items: center;
   position: absolute;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   block-size: 100%;
   inline-size: 100%;
   z-index: var(--z-index-set);
@@ -124,17 +125,8 @@
 }
 
 .image-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  block-size: $sz-16;
-  inline-size: $sz-16;
-  color: transparent;
-  fill: none;
   stroke-width: $b-1;
-  min-inline-size: $sz-24;
-  min-block-size: $sz-24;
-  stroke: var(--color-foreground-primary);
+  color: var(--color-foreground-primary);
 }
 
 // TEAM MEMBERS PAGE
@@ -150,11 +142,6 @@
   scrollbar-gutter: stable;
 }
 
-.dashboard-team-members.dashboard-top-cta {
-  flex-direction: column;
-  justify-content: flex-start;
-}
-
 .team-members {
   display: grid;
   grid-template-rows: auto 1fr;
@@ -164,7 +151,7 @@
 }
 
 .table-header {
-  @include t.use-typography("headline-small");
+  @include use-typography("headline-small");
 
   display: grid;
   align-items: center;
@@ -184,7 +171,7 @@
   inline-size: 100%;
   block-size: 100%;
   max-inline-size: $sz-1000;
-  margin-top: var(--sp-l);
+  margin-block-start: var(--sp-l);
   color: var(--color-foreground-secondary);
 }
 
@@ -250,23 +237,23 @@
 .member-name,
 .member-email {
   @include text-ellipsis;
-  @include t.use-typography("body-large");
+  @include use-typography("body-large");
 }
 
 .member-email {
-  @include t.use-typography("body-small");
+  @include use-typography("body-small");
 
   color: var(--color-foreground-secondary);
 }
 
 .you {
   color: var(--color-foreground-secondary);
-  margin-left: px2rem(6);
+  margin-inline-start: px2rem(6);
 }
 
 // ROL INFO
 .rol-selector {
-  @include t.use-typography("body-medium");
+  @include use-typography("body-medium");
 
   position: relative;
   display: grid;
@@ -282,6 +269,9 @@
 }
 
 .has-priv {
+  border: none;
+  color: inherit;
+  text-align: start;
   cursor: pointer;
 }
 
@@ -302,13 +292,13 @@
   background-color: var(--color-background-tertiary);
   border: $b-2 solid var(--color-background-quaternary);
   margin: 0;
-  bottom: calc(-1 * px2rem(76));
+  inset-block-end: calc(-1 * px2rem(76));
   inline-size: fit-content;
   min-inline-size: $sz-160;
 }
 
 .rol-dropdown-item {
-  @include t.use-typography("body-small");
+  @include use-typography("body-small");
 
   display: flex;
   align-items: center;
@@ -325,24 +315,6 @@
 }
 
 // MEMBER ACTIONS
-.menu-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  block-size: $sz-16;
-  inline-size: $sz-16;
-  color: transparent;
-  fill: none;
-  stroke-width: $b-1;
-  stroke: var(--color-foreground-primary);
-}
-
-.menu-btn {
-  border: none;
-  background: none;
-  cursor: pointer;
-}
-
 .input-checkbox {
   // TODO: remove this extended class.
   @extend %input-checkbox;
@@ -363,15 +335,17 @@
   background-color: var(--color-background-tertiary);
   border: $b-2 solid var(--color-background-quaternary);
   margin: 0;
-  bottom: calc(-1 * var(--sp-xxxl));
-  right: 0;
-  left: unset;
+
+  // Opens below the button, whatever the menu and button heights.
+  inset-block-start: calc(100% + var(--sp-xs));
+  inset-inline-end: 0;
+  inset-inline-start: unset;
   inline-size: fit-content;
   min-inline-size: $sz-160;
 }
 
 .action-dropdown-item {
-  @include t.use-typography("body-small");
+  @include use-typography("body-small");
 
   display: flex;
   align-items: center;
@@ -409,21 +383,17 @@
 }
 
 .invitations-actions {
-  @include t.use-typography("body-medium");
+  @include use-typography("body-medium");
 
   display: flex;
   justify-content: end;
   align-items: center;
   gap: var(--sp-l);
-  color: var(--title-foreground-color);
+  color: var(--color-foreground-secondary);
   block-size: $sz-40;
   margin-block-end: px2rem(36);
 }
 
-.error-notification {
-  margin-block-end: var(--sp-xxl);
-}
-
 .table-row-invitations {
   grid-template-columns: 43% 1fr $sz-88 var(--sp-xxl);
   align-items: center;
@@ -431,7 +401,7 @@
 
 .empty-invitations {
   inline-size: 100%;
-  margin-top: var(--sp-l);
+  margin-block-start: var(--sp-l);
   border: $b-1 solid var(--color-background-quaternary);
   border-radius: $br-8;
   color: var(--color-foreground-secondary);
@@ -439,11 +409,6 @@
   text-align: center;
 }
 
-.empty-invitations-buttons {
-  inline-size: fit-content;
-  margin: auto;
-}
-
 .no-permission-text {
   max-inline-size: $sz-512;
   margin: auto;
@@ -468,18 +433,13 @@
 
 .field-email {
   @include text-ellipsis;
-  @include t.use-typography("body-large");
+  @include use-typography("body-large");
 
   display: flex;
   gap: var(--sp-l);
   align-items: center;
 }
 
-.invitations-dropdown {
-  bottom: calc(-1 * px2rem(112));
-  right: calc(-1 * var(--sp-xl));
-}
-
 // WEBHOOKS SECTION
 .dashboard-team-webhooks {
   display: grid;
@@ -515,7 +475,7 @@
 }
 
 .webhooks-hero {
-  @include t.use-typography("body-medium");
+  @include use-typography("body-medium");
 
   display: grid;
   grid-template-rows: auto 1fr auto;
@@ -527,24 +487,20 @@
 }
 
 .hero-title {
-  @include t.use-typography("title-large");
+  @include use-typography("title-large");
 
   color: var(--color-foreground-primary);
 }
 
 .hero-desc {
-  @include t.use-typography("body-large");
+  @include use-typography("body-large");
 
   color: var(--color-foreground-secondary);
-  margin-bottom: 0;
+  margin-block-end: 0;
   max-inline-size: $sz-512;
 }
 
 .hero-btn {
-  // TODO: Remove this extended class using a DS component
-  @extend %button-primary;
-
-  block-size: $sz-32;
   max-inline-size: $sz-512;
 }
 
@@ -584,14 +540,16 @@
   background-color: var(--color-background-tertiary);
   border: $b-2 solid var(--color-background-quaternary);
   margin: 0;
-  right: calc(-1 * var(--sp-l));
-  bottom: calc(-1 * $sz-40);
+  inset-inline-end: calc(-1 * var(--sp-l));
+
+  // Opens below the button, whatever the menu and button heights.
+  inset-block-start: calc(100% + var(--sp-xs));
   inline-size: fit-content;
   min-inline-size: $sz-160;
 }
 
 .webhook-dropdown-item {
-  @include t.use-typography("body-small");
+  @include use-typography("body-small");
 
   display: flex;
   align-items: center;
@@ -613,10 +571,8 @@
   align-items: center;
   block-size: $sz-16;
   inline-size: $sz-16;
-  color: transparent;
-  fill: none;
   stroke-width: $b-1;
-  stroke: var(--color-accent-success);
+  color: var(--color-accent-success);
 }
 
 .warning-icon {
@@ -625,10 +581,8 @@
   align-items: center;
   block-size: $sz-16;
   inline-size: $sz-16;
-  color: transparent;
-  fill: none;
   stroke-width: $b-1;
-  stroke: var(--color-accent-warning);
+  color: var(--color-accent-warning);
 }
 
 // INVITE MEMBERS MODAL
@@ -641,22 +595,22 @@
   max-block-size: $sz-512;
   box-shadow: var(--el-shadow-dark);
   position: fixed;
-  top: px2rem(72);
-  right: var(--sp-m);
-  left: unset;
+  inset-block-start: px2rem(72);
+  inset-inline-end: var(--sp-m);
+  inset-inline-start: unset;
   inline-size: $sz-400;
   padding: var(--sp-xxxl);
   background-color: var(--color-background-primary);
   z-index: var(--z-index-set);
 
   &.hero {
-    top: px2rem(216);
-    right: var(--sp-xxxl);
+    inset-block-start: px2rem(216);
+    inset-inline-end: var(--sp-xxxl);
   }
 }
 
 .modal-team-container-workspace {
-  top: $sz-40;
+  inset-block-start: $sz-40;
   z-index: var(--z-index-set);
 }
 
@@ -687,11 +641,8 @@
   align-items: center;
   block-size: $sz-16;
   inline-size: $sz-16;
-  color: transparent;
-  fill: none;
   stroke-width: $b-1;
-  stroke: var(--color-foreground-secondary);
-  transform: rotate(90deg);
+  color: var(--color-foreground-secondary);
 }
 
 .action-buttons {
@@ -711,12 +662,12 @@
   justify-content: center;
   align-items: center;
   position: fixed;
-  left: 0;
-  top: 0;
+  inset-inline-start: 0;
+  inset-block-start: 0;
   block-size: 100%;
   inline-size: 100%;
   z-index: var(--z-index-set);
-  background-color: var(--overlay-color);
+  background-color: var(--color-overlay-default);
 }
 
 .modal-container {
@@ -732,27 +683,29 @@
 }
 
 .modal-header {
-  margin-bottom: var(--sp-xxl);
+  margin-block-end: var(--sp-xxl);
 }
 
 .modal-title {
-  @include t.use-typography("title-small");
+  @include use-typography("title-small");
 
   color: var(--color-foreground-primary);
 }
 
+// Tooltip wrapper of the modal close buttons: it places them in the corner.
 .modal-close-btn {
-  // TODO remove extended class creating a modal component
-  @extend %modal-close-btn-base;
+  position: absolute;
+  inset-block-start: var(--sp-s);
+  inset-inline-end: var(--sp-xs);
 }
 
 .modal-content {
-  @include t.use-typography("body-small");
+  @include use-typography("body-small");
 
   display: flex;
   flex-direction: column;
   gap: var(--sp-xxl);
-  margin-bottom: var(--sp-xxl);
+  margin-block-end: var(--sp-xxl);
 }
 
 .fields-row {
@@ -762,7 +715,7 @@
 }
 
 .select-title {
-  @include t.use-typography("body-small");
+  @include use-typography("body-small");
 
   color: var(--color-foreground-primary);
 }
@@ -790,7 +743,7 @@
   display: flex;
   align-items: center;
 
-  @include t.use-typography("body-large");
+  @include use-typography("body-large");
 
   label {
     display: flex;
@@ -815,7 +768,7 @@
 
   span {
     @extend %checkbox-icon;
-    @include t.use-typography("body-small");
+    @include use-typography("body-small");
 
     color: var(--color-foreground-secondary);
   }
@@ -823,7 +776,7 @@
   input {
     margin: 0;
 
-    @include t.use-typography("body-small");
+    @include use-typography("body-small");
 
     color: var(--color-foreground-secondary);
   }
@@ -842,13 +795,13 @@
 }
 
 .modal-invitation-title {
-  @include t.use-typography("headline-large");
+  @include use-typography("headline-large");
 
   color: var(--color-foreground-primary);
 }
 
 .modal-invitation-content {
-  @include t.use-typography("body-medium");
+  @include use-typography("body-medium");
 
   overflow: auto;
   color: var(--color-foreground-secondary);
@@ -877,13 +830,13 @@
 }
 
 .modal-restricted-title {
-  @include t.use-typography("headline-large");
+  @include use-typography("headline-large");
 
   color: var(--color-foreground-primary);
 }
 
 .modal-restricted-content {
-  @include t.use-typography("body-medium");
+  @include use-typography("body-medium");
 
   margin-block-end: 0;
 }
@@ -955,13 +908,13 @@
 }
 
 .modal-select-organization-content {
-  @include t.use-typography("body-medium");
+  @include use-typography("body-medium");
 
   color: var(--color-foreground-secondary);
 }
 
 .modal-select-organization-info {
-  @include t.use-typography("body-medium");
+  @include use-typography("body-medium");
 
   display: flex;
   flex-direction: column;
@@ -971,13 +924,13 @@
 }
 
 .modal-select-organization-title {
-  @include t.use-typography("headline-large");
+  @include use-typography("headline-large");
 
   color: var(--color-foreground-primary);
 }
 
 .modal-select-organization-text {
-  @include t.use-typography("body-medium");
+  @include use-typography("body-medium");
 
   color: var(--color-foreground-secondary);
 }
@@ -1023,10 +976,8 @@
   align-items: center;
   block-size: $sz-16;
   inline-size: $sz-16;
-  color: transparent;
-  fill: none;
   stroke-width: $b-1;
-  stroke: var(--stroke-color);
+  color: var(--stroke-color);
 }
 
 .organization-dropdown {
@@ -1042,13 +993,13 @@
   background-color: var(--color-background-tertiary);
   border: $b-2 solid var(--color-background-quaternary);
   margin: 0;
-  top: var(--sp-xxxl);
+  inset-block-start: var(--sp-xxxl);
   inline-size: fit-content;
   min-inline-size: $sz-160;
 }
 
 .organization-dropdown-item {
-  @include t.use-typography("body-small");
+  @include use-typography("body-small");
 
   display: flex;
   align-items: center;
@@ -1071,5 +1022,5 @@
 }
 
 a {
-  color: var(--modal-link-foreground-color);
+  color: var(--color-accent-primary);
 }