diff --git a/library/src/skins/default/src/sass/modules/tool/dashboard/_base.scss b/library/src/skins/default/src/sass/modules/tool/dashboard/_base.scss
index 51aff613ddf0..e3e5188407a8 100644
--- a/library/src/skins/default/src/sass/modules/tool/dashboard/_base.scss
+++ b/library/src/skins/default/src/sass/modules/tool/dashboard/_base.scss
@@ -1,3 +1,6 @@
+// Configuration
+@import "bootstrap/scss/mixins";
+
 html {
   --sakai-dashboard-container-padding: 40px;
   --sakai-dashboard-welcome-font-size: 32px;
@@ -8,6 +11,12 @@ html {
   --sakai-motd-message-font-size: 12px;
 }
 
+@include media-breakpoint-down(md) {
+  sakai-course-dashboard-template-picker {
+    padding: 2rem;
+  }
+}
+
 #course-dashboard-container {
   padding: var(--sakai-dashboard-container-padding);
   background-color: var(--sakai-tool-bg-color);
@@ -16,6 +25,14 @@ html {
 #course-dashboard-programme {
   font-style: italic;
   font-weight: bold;
+  font-size: small;
+  margin: -0.5em 0 0.5em 0;
+}
+
+@include media-breakpoint-up(lg) {
+  .sakai-course-list {
+    border-right: solid 1px var(--sakai-border-color);
+  }
 }
 
 #course-dashboard-widgets {
@@ -52,15 +69,6 @@ sakai-editor div {
   margin-top: 0px;
 }
 
-#course-dashboard-l1-overview-and-widgets-block {
-  display: flex;
-}
-
-#course-dashboard-l1-overview-block {
-  flex: 2;
-  margin-right: 16px;
-}
-
 #course-dashboard-l1-widgets {
   flex: 1;
 }
@@ -69,13 +77,37 @@ sakai-editor div {
   flex: 3;
 }
 
-#course-dashboard-l3-overview-and-widgets-block {
-  display: flex;
+@include media-breakpoint-down(lg) {
+  #course-dashboard-l1-overview-and-widgets-block {
+    display: block;
+  }
+  #course-dashboard-l1-overview-block {
+    margin-bottom: 16px;
+  }
+
+  #course-dashboard-l3-overview-and-widgets-block {
+    display: block;
+  }
+  #course-dashboard-l3-overview-block {
+    margin-bottom: 16px;
+  }
 }
+@include media-breakpoint-up(lg) {
+  #course-dashboard-l1-overview-and-widgets-block {
+    display: flex;
+  }
+  #course-dashboard-l1-overview-block {
+    flex: 2;
+    margin-right: 16px;
+  }
 
-#course-dashboard-l3-overview-block {
-  flex: 2;
-  margin-right: 16px;
+  #course-dashboard-l3-overview-and-widgets-block {
+    display: flex;
+  }
+  #course-dashboard-l3-overview-block {
+    flex: 2;
+    margin-right: 16px;
+  }
 }
 
 #course-dashboard-l3-widgets {
@@ -83,7 +115,7 @@ sakai-editor div {
 }
 
 
-@media (min-width: 576px) {
+@include media-breakpoint-up(sm) {
   #course-dashboard-l2-header-block {
     flex: 1;
   }
diff --git a/library/src/skins/default/src/sass/webcomponents/course-card/_course-card.scss b/library/src/skins/default/src/sass/webcomponents/course-card/_course-card.scss
index 88dd8d7e1a56..2972dea725b6 100644
--- a/library/src/skins/default/src/sass/webcomponents/course-card/_course-card.scss
+++ b/library/src/skins/default/src/sass/webcomponents/course-card/_course-card.scss
@@ -22,6 +22,7 @@ sakai-course-card {
     padding: 1rem;
     border-top-left-radius: var(--bs-border-radius);
     border-top-right-radius: var(--bs-border-radius);
+    border: solid 1px var(--sakai-border-color);
 
     a {
       color: var(--sakai-text-color-inverse, white);
diff --git a/webcomponents/tool/src/main/frontend/packages/sakai-announcements/src/SakaiAnnouncements.js b/webcomponents/tool/src/main/frontend/packages/sakai-announcements/src/SakaiAnnouncements.js
index 947634f32d01..edeabf506c38 100644
--- a/webcomponents/tool/src/main/frontend/packages/sakai-announcements/src/SakaiAnnouncements.js
+++ b/webcomponents/tool/src/main/frontend/packages/sakai-announcements/src/SakaiAnnouncements.js
@@ -116,7 +116,7 @@ export class SakaiAnnouncements extends SakaiPageableElement {
         </div>
         ` : nothing }
         <div id="sorting">
-          <select aria-label="${this._i18n.announcement_sort_label}" @change=${this._sortChanged}>
+          <select class="w-100 mb-3" aria-label="${this._i18n.announcement_sort_label}" @change=${this._sortChanged}>
             <option value="${EARLIEST_FIRST}">${this._i18n.earliest_first}</option>
             <option value="${LATEST_FIRST}">${this._i18n.latest_first}</option>
             <option value="${TITLE_A_TO_Z}">${this._i18n.title_a_to_z}</option>
@@ -188,16 +188,14 @@ export class SakaiAnnouncements extends SakaiPageableElement {
       }
 
       #site-filter {
-      margin-bottom: 12px;
+        margin-bottom: 0.25rem;
+      }
+      #site-filter sakai-site-picker::part(select) {
+        width: 100%;
       }
       #filter {
         flex: 1;
       }
-      #filter-and-sort-block {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 6px;
-      }
       #sorting {
         margin-left: auto;
       }
diff --git a/webcomponents/tool/src/main/frontend/packages/sakai-calendar/src/calendar-styles.js b/webcomponents/tool/src/main/frontend/packages/sakai-calendar/src/calendar-styles.js
index a2044e1bf627..7ec52a9ccb41 100644
--- a/webcomponents/tool/src/main/frontend/packages/sakai-calendar/src/calendar-styles.js
+++ b/webcomponents/tool/src/main/frontend/packages/sakai-calendar/src/calendar-styles.js
@@ -4,11 +4,15 @@ export const calendarStyles = css`
   .calendar-msg {
     color: var(--infoBanner-color);
     background-color: var(--infoBanner-bgcolor);
-    padding: 4px;
+    margin-bottom: 1rem !important;
+    padding: 0.5rem !important;
   }
 
   #site-filter {
-    margin-bottom: 12px;
+    margin-bottom: 0.25rem;
+  }
+  #site-filter sakai-site-picker::part(select) {
+    width: 100%;
   }
 
   .calendar__navigation {
diff --git a/webcomponents/tool/src/main/frontend/packages/sakai-course-dashboard/src/SakaiCourseDashboard.js b/webcomponents/tool/src/main/frontend/packages/sakai-course-dashboard/src/SakaiCourseDashboard.js
index 421c01e0a9e3..372f9bae038e 100644
--- a/webcomponents/tool/src/main/frontend/packages/sakai-course-dashboard/src/SakaiCourseDashboard.js
+++ b/webcomponents/tool/src/main/frontend/packages/sakai-course-dashboard/src/SakaiCourseDashboard.js
@@ -233,7 +233,7 @@ export class SakaiCourseDashboard extends SakaiElement {
     return html`
       ${this.titleBlock()}
       <div id="course-dashboard-l2-header-and-overview-block" class="d-sm-flex mb-4">
-        <div id="course-dashboard-l2-header-block" class="me-3 mb-3 mb-sm-0">
+        <div id="course-dashboard-l2-header-block" class="me-sm-3 mb-3 mb-sm-0">
           <sakai-course-header .site=${this.data} @image-edited=${this.imageEdited} ?editing=${this.editing}></sakai-course-header>
         </div>
         <div id="course-dashboard-l2-overview-block">
diff --git a/webcomponents/tool/src/main/frontend/packages/sakai-course-dashboard/src/SakaiCourseDashboardTemplatePicker.js b/webcomponents/tool/src/main/frontend/packages/sakai-course-dashboard/src/SakaiCourseDashboardTemplatePicker.js
index 49edf41e0599..a82832c3edb4 100644
--- a/webcomponents/tool/src/main/frontend/packages/sakai-course-dashboard/src/SakaiCourseDashboardTemplatePicker.js
+++ b/webcomponents/tool/src/main/frontend/packages/sakai-course-dashboard/src/SakaiCourseDashboardTemplatePicker.js
@@ -75,22 +75,37 @@ export class SakaiCourseDashboardTemplatePicker extends SakaiDialogContent {
   static styles = [
     SakaiDialogContent.styles,
     css`
-    #instruction {
-      width: 745px;
-      margin-bottom: 20px;
+    @media (max-width: 767px) {
+      .selected {
+        margin-bottom: 1rem;
+      }
+      .thumbnail {
+        width: 149px;
+        height: 99px;
+      }
     }
-
-    #template-block {
-      display: flex;
+    @media (min-width: 768px) {
+      #instruction {
+        width: 745px;
+      }
+      #template-block {
+        display: flex;
+      }
+      #template-block div {
+        flex: 1;
+      }
+      .thumbnail {
+        width: 199px;
+        height: 132px;
+      }
     }
+
     #template-block div {
-      flex: 1;
       text-align: center;
+      padding-top: 1rem;
     }
-
-    .thumbnail {
-      width: 199px;
-      height: 132px;
+    #instruction {
+      margin-bottom: 20px;
     }
 
     .selected {
diff --git a/webcomponents/tool/src/main/frontend/packages/sakai-course-list/src/SakaiCourseList.js b/webcomponents/tool/src/main/frontend/packages/sakai-course-list/src/SakaiCourseList.js
index c0f5aa908ab3..fa5ace010a05 100644
--- a/webcomponents/tool/src/main/frontend/packages/sakai-course-list/src/SakaiCourseList.js
+++ b/webcomponents/tool/src/main/frontend/packages/sakai-course-list/src/SakaiCourseList.js
@@ -140,32 +140,26 @@ export class SakaiCourseList extends SakaiElement {
   render() {
 
     return html`
-      <div class="d-flex justify-space-between">
-        <div class="me-1">
-          <select aria-label="${this._i18n.course_filter_label}" @change=${this._siteFilterChanged} .value=${this._currentFilter} ?disabled=${this.sites.length === 0}>
-            <option value="pinned">${this._i18n.all_pinned_sites}</option>
-            <option value="projects">${this._i18n.pinned_projects}</option>
-            <option value="courses">${this._i18n.pinned_courses}</option>
-            <option value="active">${this._i18n.pinned_activity}</option>
-          </select>
-        </div>
-        <div class="mx-1">
-          <select id="course-list-term-filter"
-              aria-label="${this._i18n.term_filter_label}" @change=${this._termSelected} .value=${this._currentTermFilter} ?disabled=${this._availableTerms.length === 0}>
-            <option value="none">${this._i18n.term_filter_none_option}</option>
-            ${this._availableTerms.map(term => html`
-              <option value="${term.id}">${term.name}</option>
-            `)}
-          </select>
-        </div>
-        <div class="ms-1">
-          <select aria-label="${this._i18n.course_sort_label}" @change=${this._siteSortChanged} ?disabled=${this.sites.length === 0}>
-            <option value="title_a_to_z">${this._i18n.title_a_to_z}</option>
-            <option value="title_z_to_a">${this._i18n.title_z_to_a}</option>
-            <option value="code_a_to_z">${this._i18n.code_a_to_z}</option>
-            <option value="code_z_to_a">${this._i18n.code_z_to_a}</option>
-          </select>
-        </div>
+      <div>
+        <select class="w-100 mb-1" aria-label="${this._i18n.course_filter_label}" @change=${this._siteFilterChanged} .value=${this._currentFilter} ?disabled=${this.sites.length === 0}>
+          <option value="pinned">${this._i18n.all_pinned_sites}</option>
+          <option value="projects">${this._i18n.pinned_projects}</option>
+          <option value="courses">${this._i18n.pinned_courses}</option>
+          <option value="active">${this._i18n.pinned_activity}</option>
+        </select>
+        <select class="w-100 mb-1" id="course-list-term-filter"
+            aria-label="${this._i18n.term_filter_label}" @change=${this._termSelected} .value=${this._currentTermFilter} ?disabled=${this._availableTerms.length === 0}>
+          <option value="none">${this._i18n.term_filter_none_option}</option>
+          ${this._availableTerms.map(term => html`
+            <option value="${term.id}">${term.name}</option>
+          `)}
+        </select>
+        <select class="w-100" aria-label="${this._i18n.course_sort_label}" @change=${this._siteSortChanged} ?disabled=${this.sites.length === 0}>
+          <option value="title_a_to_z">${this._i18n.title_a_to_z}</option>
+          <option value="title_z_to_a">${this._i18n.title_z_to_a}</option>
+          <option value="code_a_to_z">${this._i18n.code_a_to_z}</option>
+          <option value="code_z_to_a">${this._i18n.code_z_to_a}</option>
+        </select>
       </div>
       <div>
         ${this.sites.length === 0 ? html`
diff --git a/webcomponents/tool/src/main/frontend/packages/sakai-forums/src/SakaiForums.js b/webcomponents/tool/src/main/frontend/packages/sakai-forums/src/SakaiForums.js
index e5db47c9fd65..cd6102ee05ca 100644
--- a/webcomponents/tool/src/main/frontend/packages/sakai-forums/src/SakaiForums.js
+++ b/webcomponents/tool/src/main/frontend/packages/sakai-forums/src/SakaiForums.js
@@ -171,7 +171,10 @@ export class SakaiForums extends SakaiPageableElement {
         color: var(--link-visited-color);
       }
       #site-filter {
-        margin-bottom: 12px;
+        margin-bottom: 0.25rem;
+      }
+      #site-filter sakai-site-picker::part(select) {
+        width: 100%;
       }
       .messages {
         display: grid;
diff --git a/webcomponents/tool/src/main/frontend/packages/sakai-grades/src/SakaiGrades.js b/webcomponents/tool/src/main/frontend/packages/sakai-grades/src/SakaiGrades.js
index 09433503ad3b..4db3e9d1e24d 100644
--- a/webcomponents/tool/src/main/frontend/packages/sakai-grades/src/SakaiGrades.js
+++ b/webcomponents/tool/src/main/frontend/packages/sakai-grades/src/SakaiGrades.js
@@ -126,12 +126,9 @@ export class SakaiGrades extends SakaiPageableElement {
         </sakai-site-picker>
       </div>
       ` : nothing}
-      ${this.secret ? html `
-      <div class="score-msg">${this._i18n.score_reveal_msg}</div>
-      ` : nothing}
-      <div id="topbar">
+      <div id="topbar" class="mt-0 mb-3">
         <div id="filter">
-          <select @change=${this.sortChanged}
+          <select class="w-100" @change=${this.sortChanged}
               title="${this._i18n.sort_tooltip}"
               aria-label="${this._i18n.sort_tooltip}">
             <option value="${NEW_LOW_TO_HIGH}">${this._i18n.sort_new_low_to_high}</option>
@@ -147,6 +144,9 @@ export class SakaiGrades extends SakaiPageableElement {
           </select>
         </div>
       </div>
+      ${this.secret ? html `
+        <div class="score-msg mb-3 p-2">${this._i18n.score_reveal_msg}</div>
+      ` : nothing}
 
       <div id="grades" aria-live="polite">
         <div class="header">${this._i18n.course_assignment}</div>
@@ -164,7 +164,7 @@ export class SakaiGrades extends SakaiPageableElement {
           `}
         </div>
         <div class="score cell ${i % 2 === 0 ? "even" : "odd"}${this.secret ? " blurred" : ""}" aria-hidden="${this.secret ? "true" : "false"}">
-            ${a.notGradedYet ? "-" : a.score} ${!a.notGradedYet && a.siteRole === "Instructor" ? html`${this._i18n.course_average}` : nothing}
+            <span>${a.notGradedYet ? "-" : a.score} ${!a.notGradedYet && a.siteRole === "Instructor" ? html`${this._i18n.course_average}` : nothing}</span>
         </div>
         <div class="next cell ${i % 2 === 0 ? "even" : "odd"}">
           <a href="${a.url}"
@@ -211,7 +211,10 @@ export class SakaiGrades extends SakaiPageableElement {
       }
 
       #site-filter {
-        margin-bottom: 12px;
+        margin-bottom: 0.25rem;
+      }
+      #site-filter sakai-site-picker::part(select) {
+        width: 100%;
       }
 
       #grades {
@@ -252,6 +255,7 @@ export class SakaiGrades extends SakaiPageableElement {
           text-align: center;
           color: red;
           background-color: var(--sakai-background-color-2);
+          border-radius: 4px;
         }
         .even {
           background-color: var(--sakai-table-even-color);
@@ -261,7 +265,7 @@ export class SakaiGrades extends SakaiPageableElement {
           justify-content: right;
           align-items: center;
         }
-        .blurred {
+        .blurred span {
           filter: blur(3px);
         }
     `,
diff --git a/webcomponents/tool/src/main/frontend/packages/sakai-home-dashboard/src/SakaiHomeDashboard.js b/webcomponents/tool/src/main/frontend/packages/sakai-home-dashboard/src/SakaiHomeDashboard.js
index 1778a76bf5eb..223fb06dead1 100644
--- a/webcomponents/tool/src/main/frontend/packages/sakai-home-dashboard/src/SakaiHomeDashboard.js
+++ b/webcomponents/tool/src/main/frontend/packages/sakai-home-dashboard/src/SakaiHomeDashboard.js
@@ -105,8 +105,8 @@ export class SakaiHomeDashboard extends SakaiElement {
     return html`
 
       <div>
-        <div class="d-lg-flex flex-wrap align-items-center justify-content-between">
-          <div class="fs-2">${this._i18n.welcome} ${this._data.givenName}</div>
+        <div class="d-lg-flex flex-wrap align-items-center justify-content-between mb-4">
+          <h2 class="my-2">${this._i18n.welcome} ${this._data.givenName}</h2>
           <div class="d-flex mb-2 mb-lg-0">
           ${this._editing ? html`
             <div class="me-1">
@@ -116,22 +116,22 @@ export class SakaiHomeDashboard extends SakaiElement {
               <sakai-button @click=${this.cancel} title="${this._i18n.cancel_tooltip}" aria-label="${this._i18n.cancel_tooltip}">${this._i18n.cancel}</sakai-button>
             </div>
           ` : html`
+            ${this._data.worksiteSetupUrl ? html`
+              <div class="me-1">
+                <sakai-button href="${this._data.worksiteSetupUrl}" title="${this._i18n.worksite_setup_tooltip}" aria-label="${this._i18n.worksite_setup_tooltip}">
+                  <div class="d-flex justify-content-between text-center">
+                    <div><sakai-icon type="add" size="small" class="me-3"></sakai-icon></div>
+                    <div>${this._i18n.worksite_setup}</div>
+                  </div>
+                </sakai-button>
+              </div>
+            ` : nothing}
             <div>
               <sakai-button slot="invoker" @click=${this.edit} title="${this._i18n.edit_tooltip}" arial-label="${this._i18n.edit_tooltip}">${this._i18n.edit}</sakai-button>
             </div>
           `}
           </div>
         </div>
-        ${this._data.worksiteSetupUrl ? html`
-          <div class="d-flex justify-content-end mt-4">
-            <sakai-button href="${this._data.worksiteSetupUrl}" title="${this._i18n.worksite_setup_tooltip}" aria-label="${this._i18n.worksite_setup_tooltip}">
-              <div class="d-flex justify-content-between text-center">
-                <div><sakai-icon type="add" size="small" class="me-3"></sakai-icon></div>
-                <div>${this._i18n.worksite_setup}</div>
-              </div>
-            </sakai-button>
-          </div>
-        ` : nothing}
         ${this._data.motd ? html`
           <div class="p-3 mt-2 mb-3 border border-1 rounded-1 fs-5 fw-normal">
             <div class="d-flex mb-4 align-items-center" @click=${this._toggleMotd}>
@@ -149,7 +149,7 @@ export class SakaiHomeDashboard extends SakaiElement {
         ` : nothing}
         <div class="d-lg-flex">
           ${this.showSites ? html`
-            <div class="me-lg-3 mb-4 mb-lg-0">
+            <div class="me-lg-3 pe-lg-3 mb-4 mb-lg-0 sakai-course-list">
               <sakai-course-list user-id="${this.userId}"></sakai-course-list>
             </div>
           ` : nothing}
diff --git a/webcomponents/tool/src/main/frontend/packages/sakai-site-picker/src/SakaiSitePicker.js b/webcomponents/tool/src/main/frontend/packages/sakai-site-picker/src/SakaiSitePicker.js
index 89a03751c8bd..4a53c98305af 100644
--- a/webcomponents/tool/src/main/frontend/packages/sakai-site-picker/src/SakaiSitePicker.js
+++ b/webcomponents/tool/src/main/frontend/packages/sakai-site-picker/src/SakaiSitePicker.js
@@ -61,7 +61,7 @@ export class SakaiSitePicker extends SakaiShadowElement {
   render() {
 
     return html`
-      <select aria-label="${this._i18n.site_selector_label}" @change=${this._siteChanged} ?multiple=${this.multiple}>
+      <select part="select" aria-label="${this._i18n.site_selector_label}" @change=${this._siteChanged} ?multiple=${this.multiple}>
         <option value="${SakaiSitePicker.ALL}" ?selected=${!this.selectedSites}>${this._i18n.all_pinned_sites}</option>
         ${this.sites.map(s => html`
           <option value="${s.siteId}" ?selected=${this.siteId === s.siteId || (this.selectedSites?.includes(s.siteId))}>${s.title}</option>
diff --git a/webcomponents/tool/src/main/frontend/packages/sakai-tasks/src/SakaiTasks.js b/webcomponents/tool/src/main/frontend/packages/sakai-tasks/src/SakaiTasks.js
index 5d1e10d3434f..ea37d51054e5 100644
--- a/webcomponents/tool/src/main/frontend/packages/sakai-tasks/src/SakaiTasks.js
+++ b/webcomponents/tool/src/main/frontend/packages/sakai-tasks/src/SakaiTasks.js
@@ -302,7 +302,7 @@ export class SakaiTasks extends SakaiPageableElement {
 
       <div id="controls">
         <div id="filter">
-          <select @change=${this.filterChanged} .value=${this._currentFilter} aria-label="${this._i18n.filter_label}">
+          <select class="w-100 mb-1" @change=${this.filterChanged} .value=${this._currentFilter} aria-label="${this._i18n.filter_label}">
             <option value="current">${this._i18n.filter_current}</option>
             <option value="${constants.PRIORITY_5}">${this._i18n.filter_priority_5}</option>
             <option value="${constants.PRIORITY_4}">${this._i18n.filter_priority_4}</option>
@@ -315,7 +315,7 @@ export class SakaiTasks extends SakaiPageableElement {
           </select>
         </div>
         <div id="sort">
-          <select @change=${this.sortChanged} aria-label="${this._i18n.sort_label}">
+          <select class="w-100 mb-3" @change=${this.sortChanged} aria-label="${this._i18n.sort_label}">
             <option value="none">${this._i18n.sort_none}</option>
             <option value="due_latest_first">${this._i18n.sort_due_latest_first}</option>
             <option value="due_earliest_first">${this._i18n.sort_due_earliest_first}</option>
@@ -434,10 +434,6 @@ export class SakaiTasks extends SakaiPageableElement {
           color: var(--button-primary-text-color);
         }
 
-      #controls {
-        display: flex;
-        margin-bottom: 10px;
-      }
         #filter {
           flex: 1;
         }
diff --git a/webcomponents/tool/src/main/frontend/packages/sakai-widgets/src/SakaiDashboardWidget.js b/webcomponents/tool/src/main/frontend/packages/sakai-widgets/src/SakaiDashboardWidget.js
index 8e800d18b195..77df121023f4 100644
--- a/webcomponents/tool/src/main/frontend/packages/sakai-widgets/src/SakaiDashboardWidget.js
+++ b/webcomponents/tool/src/main/frontend/packages/sakai-widgets/src/SakaiDashboardWidget.js
@@ -72,7 +72,7 @@ export class SakaiDashboardWidget extends SakaiShadowElement {
                     @click=${this.moveUp}
                     title="${this._baseI18n.up}"
                     arial-label="${this._baseI18n.up}">
-                  <i class="si si-up fs-6"></i>
+                  <span class="si si-up fs-6" aria-hidden="true"></span>
                 </button>
               </div>
               <div class="${ifDefined(this.disableRightAndDown ? "d-none" : undefined)}">
@@ -81,7 +81,7 @@ export class SakaiDashboardWidget extends SakaiShadowElement {
                     @click=${this.moveDown}
                     title="${this._baseI18n.down}"
                     arial-label="${this._baseI18n.down}">
-                  <i class="si si-down fs-6"></i>
+                  <span class="si si-down fs-6" aria-hidden="true"></span>
                 </button>
               </div>
               <div class="${ifDefined(this.disableLeftAndUp ? "d-none" : undefined)}">
@@ -90,7 +90,7 @@ export class SakaiDashboardWidget extends SakaiShadowElement {
                     @click=${this.moveLeft}
                     title="${this._baseI18n.left}"
                     arial-label="${this._baseI18n.left}">
-                  <i class="si si-left fs-6"></i>
+                  <span class="si si-left fs-6" aria-hidden="true"></span>
                 </button>
               </div>
               <div class="${ifDefined(this.disableRightAndDown ? "d-none" : undefined)}">
@@ -99,16 +99,16 @@ export class SakaiDashboardWidget extends SakaiShadowElement {
                     @click=${this.moveRight}
                     title="${this._baseI18n.right}"
                     arial-label="${this._baseI18n.right}">
-                  <i class="si si-right fs-6"></i>
+                  <span class="si si-right fs-6" aria-hidden="true"></span>
                 </button>
               </div>
               <div>
                 <button type="button"
-                    class="btn btn-icon btn-sm"
+                    class="btn btn-icon btn-sm bg-danger"
                     @click=${this.remove}
                     title="${this._baseI18n.remove} ${this.title}"
                     aria-label="${this._baseI18n.remove} ${this.title}">
-                  <i class="si si-close fs-6 text-danger"></i>
+                  <span class="si si-close fs-6" aria-hidden="true"></span>
                 </button>
               </div>
             </div>
@@ -172,10 +172,13 @@ export class SakaiDashboardWidget extends SakaiShadowElement {
       #widget-mover {
         display: flex;
       }
-        #widget-mover div {
-          padding: 5px;
-          flex: 1;
-        }
+      #widget-mover .btn {
+        --bs-btn-color: var(--sakai-text-color-2);
+      }
+      #widget-mover div {
+        padding: 5px;
+        flex: 1;
+      }
     `
   ];
 }