diff --git a/frontend/src/js/components/__snapshots__/App.test.tsx.snap b/frontend/src/js/components/__snapshots__/App.test.tsx.snap
index f915bf1a8..b077e266e 100644
--- a/frontend/src/js/components/__snapshots__/App.test.tsx.snap
+++ b/frontend/src/js/components/__snapshots__/App.test.tsx.snap
@@ -123,10 +123,6 @@ exports[`App Component > is embedded in working providers 1`] = `
   }
 }
 
-.emotion-0.service-provider {
-  grid-template-columns: 1fr max-content;
-}
-
 .emotion-0 #logo {
   min-width: 142px;
   height: 48px;
@@ -158,13 +154,13 @@ exports[`App Component > is embedded in working providers 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-transition: all 0.1s ease;
-  transition: all 0.1s ease;
 }
 
 .emotion-2 .MuiTextField-root {
   width: 220px;
   max-width: 640px;
+  -webkit-transition: width 0.1s ease;
+  transition: width 0.1s ease;
 }
 
 .emotion-2 .MuiTextField-root:focus-within {
@@ -194,13 +190,13 @@ exports[`App Component > is embedded in working providers 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-transition: all 0.1s ease;
-  transition: all 0.1s ease;
 }
 
 .emotion-3 .MuiTextField-root {
   width: 220px;
   max-width: 640px;
+  -webkit-transition: width 0.1s ease;
+  transition: width 0.1s ease;
 }
 
 .emotion-3 .MuiTextField-root:focus-within {
@@ -685,43 +681,106 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   height: 100%;
   border-bottom-width: 0;
   border-right-width: thin;
-  color: #5f5f60;
   height: 24px;
 }
 
-.emotion-17:hover {
-  color: #5f5f60;
-}
-
 .emotion-18 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
   margin: 0;
-  font: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  color: #1d8faf;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  text-decoration-color: var(--Link-underlineColor);
-  --Link-underlineColor: rgba(29, 143, 175, 0.4);
-  color: #5f5f60;
-  color: #5f5f60;
-  height: 24px;
+  border-radius: 0;
+  padding: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: inherit;
+  text-transform: none;
+  font-family: Red Hat Text;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.75;
+  text-transform: uppercase;
+  min-width: 64px;
+  padding: 6px 16px;
+  border: 0;
+  border-radius: 4px;
+  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  padding: 6px 8px;
+  color: var(--variant-textColor);
+  background-color: var(--variant-textBg);
+  color: inherit;
+  border-color: currentColor;
+  --variant-containedBg: #dededf;
+  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  text-transform: none;
+  box-shadow: none;
+  text-transform: none;
 }
 
-.emotion-18:hover {
-  text-decoration-color: inherit;
+.emotion-18::-moz-focus-inner {
+  border-style: none;
+}
+
+.emotion-18.Mui-disabled {
+  pointer-events: none;
+  cursor: default;
+}
+
+@media print {
+  .emotion-18 {
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+  }
 }
 
 .emotion-18:hover {
-  color: #5f5f60;
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
-.emotion-20 {
-  margin: 0;
-  font-family: Red Hat Text;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.57;
+.emotion-18.Mui-disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+@media (hover: hover) {
+  .emotion-18:hover {
+    --variant-containedBg: #f5f5f5;
+    --variant-textBg: rgba(31, 31, 32, 0.04);
+    --variant-outlinedBg: rgba(31, 31, 32, 0.04);
+  }
+}
+
+.emotion-18.MuiButton-loading {
+  color: transparent;
+}
+
+.emotion-18:hover:not(.MuiButton-colorInfo) {
+  box-shadow: none;
 }
 
 .emotion-22 {
@@ -783,8 +842,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   box-shadow: none;
   text-transform: none;
   color: #5f5f60;
-  height: 24px;
-  height: 100%;
+  max-width: 250px;
 }
 
 .emotion-22::-moz-focus-inner {
@@ -851,15 +909,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
 }
 
 .emotion-25 {
+  margin: 0;
+  font-family: Red Hat Text;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.57;
+}
+
+.emotion-26 {
   background-color: rgb(234, 234, 234);
   position: relative;
 }
 
-.emotion-25 .MuiList-root {
+.emotion-26 .MuiList-root {
   padding-top: 0;
 }
 
-.emotion-25::after {
+.emotion-26::after {
   content: "";
   position: absolute;
   top: 0;
@@ -870,7 +936,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   z-index: 1;
 }
 
-.emotion-26 {
+.emotion-27 {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -879,7 +945,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   padding-bottom: 8px;
 }
 
-.emotion-27 {
+.emotion-28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -909,12 +975,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   border-bottom: 1px solid transparent;
 }
 
-.emotion-27:hover {
+.emotion-28:hover {
   background-color: #fff;
   color: #1f1f20;
 }
 
-.emotion-27.active {
+.emotion-28.active {
   background-color: #fff;
   border-top: 1px solid rgba(0, 0, 0, 0.12);
   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
@@ -922,7 +988,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   z-index: 2;
 }
 
-.emotion-28 {
+.emotion-29 {
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
@@ -931,15 +997,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   margin-bottom: 4px;
 }
 
-.MuiTypography-root:where(.emotion-28 .MuiListItemText-primary) {
+.MuiTypography-root:where(.emotion-29 .MuiListItemText-primary) {
   display: block;
 }
 
-.MuiTypography-root:where(.emotion-28 .MuiListItemText-secondary) {
+.MuiTypography-root:where(.emotion-29 .MuiListItemText-secondary) {
   display: block;
 }
 
-.emotion-29 {
+.emotion-30 {
   margin: 0;
   font-family: Red Hat Text;
   font-weight: 400;
@@ -947,7 +1013,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   line-height: 1.5;
 }
 
-.emotion-42 {
+.emotion-43 {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -959,7 +1025,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   padding-right: 16px;
 }
 
-.emotion-43 {
+.emotion-44 {
   margin: 0;
   font-family: Red Hat Text;
   font-weight: 400;
@@ -972,11 +1038,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   --Link-underlineColor: rgba(29, 143, 175, 0.4);
 }
 
-.emotion-43:hover {
+.emotion-44:hover {
   text-decoration-color: inherit;
 }
 
-.emotion-47 {
+.emotion-48 {
   margin: 0;
   font-weight: 500;
   font-family: Red Hat Text;
@@ -984,7 +1050,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   line-height: 1.334;
 }
 
-.emotion-48 {
+.emotion-49 {
   -webkit-column-gap: 48px;
   column-gap: 48px;
   display: -webkit-box;
@@ -998,7 +1064,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   margin-bottom: 48px;
 }
 
-.emotion-48 .dashboard {
+.emotion-49 .dashboard {
   -webkit-column-gap: 32px;
   column-gap: 32px;
   row-gap: 32px;
@@ -1008,7 +1074,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   flex-wrap: wrap;
 }
 
-.emotion-48 .dashboard .widget {
+.emotion-49 .dashboard .widget {
   border-radius: 4px;
   border: 1px solid #dededf;
   display: grid;
@@ -1019,7 +1085,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   padding: 16px 24px;
 }
 
-.emotion-48 .dashboard .widget.chart-widget {
+.emotion-49 .dashboard .widget.chart-widget {
   padding: 16px;
   width: 19vw;
   min-height: 235px;
@@ -1027,7 +1093,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   min-width: 375px;
 }
 
-.emotion-49 {
+.emotion-50 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -1048,12 +1114,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
 }
 
 @media (min-width:1536px) {
-  .emotion-49 {
+  .emotion-50 {
     min-width: 50vw;
   }
 }
 
-.emotion-53 {
+.emotion-54 {
   display: block;
   background-color: rgba(31, 31, 32, 0.11);
   height: 1.2em;
@@ -1061,110 +1127,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   animation: animation-0 2s ease-in-out 0.5s infinite;
 }
 
-.emotion-54 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  position: relative;
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: transparent;
-  background-color: transparent;
-  outline: 0;
-  border: 0;
-  margin: 0;
-  border-radius: 0;
-  padding: 0;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: inherit;
-  text-transform: none;
-  font-family: Red Hat Text;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.75;
-  text-transform: uppercase;
-  min-width: 64px;
-  padding: 6px 16px;
-  border: 0;
-  border-radius: 4px;
-  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  padding: 6px 8px;
-  color: var(--variant-textColor);
-  background-color: var(--variant-textBg);
-  color: inherit;
-  border-color: currentColor;
-  --variant-containedBg: #dededf;
-  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  text-transform: none;
-  box-shadow: none;
-  text-transform: none;
-}
-
-.emotion-54::-moz-focus-inner {
-  border-style: none;
-}
-
-.emotion-54.Mui-disabled {
-  pointer-events: none;
-  cursor: default;
-}
-
-@media print {
-  .emotion-54 {
-    -webkit-print-color-adjust: exact;
-    color-adjust: exact;
-  }
-}
-
-.emotion-54:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-54.Mui-disabled {
-  color: rgba(0, 0, 0, 0.26);
-}
-
-@media (hover: hover) {
-  .emotion-54:hover {
-    --variant-containedBg: #f5f5f5;
-    --variant-textBg: rgba(31, 31, 32, 0.04);
-    --variant-outlinedBg: rgba(31, 31, 32, 0.04);
-  }
-}
-
-.emotion-54.MuiButton-loading {
-  color: transparent;
-}
-
-.emotion-54:hover:not(.MuiButton-colorInfo) {
-  box-shadow: none;
-}
-
-.emotion-56 {
+.emotion-57 {
   gap: 16px;
 }
 
-.emotion-57 {
+.emotion-58 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1238,28 +1205,28 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   box-shadow: none;
 }
 
-.emotion-57::-moz-focus-inner {
+.emotion-58::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-57.Mui-disabled {
+.emotion-58.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-57 {
+  .emotion-58 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-57.Mui-disabled {
+.emotion-58.Mui-disabled {
   opacity: 0.38;
   pointer-events: none;
 }
 
-.emotion-57 .MuiChip-avatar {
+.emotion-58 .MuiChip-avatar {
   margin-left: 5px;
   margin-right: -6px;
   width: 24px;
@@ -1268,12 +1235,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   font-size: 0.75rem;
 }
 
-.emotion-57 .MuiChip-icon {
+.emotion-58 .MuiChip-icon {
   margin-left: 5px;
   margin-right: -6px;
 }
 
-.emotion-57 .MuiChip-deleteIcon {
+.emotion-58 .MuiChip-deleteIcon {
   -webkit-tap-highlight-color: transparent;
   color: rgba(31, 31, 32, 0.26);
   font-size: 22px;
@@ -1281,27 +1248,27 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   margin: 0 5px 0 -6px;
 }
 
-.emotion-57 .MuiChip-deleteIcon:hover {
+.emotion-58 .MuiChip-deleteIcon:hover {
   color: rgba(31, 31, 32, 0.4);
 }
 
-.emotion-57 .MuiChip-icon {
+.emotion-58 .MuiChip-icon {
   color: #5f5f60;
 }
 
-.emotion-57:hover {
+.emotion-58:hover {
   background-color: rgba(0, 0, 0, 0.12);
 }
 
-.emotion-57.Mui-focusVisible {
+.emotion-58.Mui-focusVisible {
   background-color: rgba(0, 0, 0, 0.2);
 }
 
-.emotion-57:active {
+.emotion-58:active {
   box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-58 {
+.emotion-59 {
   overflow: hidden;
   text-overflow: ellipsis;
   padding-left: 12px;
@@ -1309,16 +1276,16 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   white-space: nowrap;
 }
 
-.emotion-59 {
+.emotion-60 {
   margin: auto;
   margin-left: 0;
 }
 
-.emotion-59:hover svg {
+.emotion-60:hover svg {
   color: #015969;
 }
 
-.emotion-60 {
+.emotion-61 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1336,11 +1303,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   color: #1d8faf;
 }
 
-.emotion-60.read {
+.emotion-61.read {
   color: #9c9c9d;
 }
 
-.emotion-61 {
+.emotion-62 {
   position: absolute;
   top: -4px;
   bottom: -4px;
@@ -1350,15 +1317,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   border-radius: 50%;
 }
 
-.emotion-61.read {
+.emotion-62.read {
   border-color: #9c9c9d;
 }
 
-.emotion-61:hover {
+.emotion-62:hover {
   border-color: #015969;
 }
 
-.emotion-65 {
+.emotion-66 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -1369,28 +1336,28 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   padding-top: 0;
 }
 
-.emotion-65 .deployments .dashboard>h4 {
+.emotion-66 .deployments .dashboard>h4 {
   margin-top: 48px;
 }
 
-.emotion-65 .deployments .dashboard>h4.margin-top-none {
+.emotion-66 .deployments .dashboard>h4.margin-top-none {
   margin-top: 0;
 }
 
 @media (min-width:1536px) {
-  .emotion-65 {
+  .emotion-66 {
     border-left: 1px solid #9c9c9d;
     margin-top: -16px;
     padding-left: 48px;
     padding-top: 16px;
   }
 
-  .emotion-65 .deployments .dashboard>h4 {
+  .emotion-66 .deployments .dashboard>h4 {
     margin-top: 0;
   }
 }
 
-.emotion-66 {
+.emotion-67 {
   margin: 0;
   font-weight: 500;
   font-family: Red Hat Text;
@@ -1398,7 +1365,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   line-height: 1.75;
 }
 
-.emotion-68 {
+.emotion-69 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1414,11 +1381,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   padding-left: 12px;
 }
 
-.emotion-68>div:last-child {
+.emotion-69>div:last-child {
   width: 100%;
 }
 
-.emotion-70 {
+.emotion-71 {
   margin: 0;
   font-family: Red Hat Text;
   font-weight: 400;
@@ -1426,7 +1393,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   line-height: 1.43;
 }
 
-.emotion-71 {
+.emotion-72 {
   position: relative;
   overflow: hidden;
   display: block;
@@ -1436,13 +1403,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
 }
 
 @media print {
-  .emotion-71 {
+  .emotion-72 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-72 {
+.emotion-73 {
   width: 100%;
   position: absolute;
   left: 0;
@@ -1457,7 +1424,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   animation: animation-1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
 }
 
-.emotion-73 {
+.emotion-74 {
   width: 100%;
   position: absolute;
   left: 0;
@@ -1473,11 +1440,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   animation: animation-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
 }
 
-.emotion-104 {
+.emotion-105 {
   margin-top: -10px;
 }
 
-.emotion-105 {
+.emotion-106 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1488,13 +1455,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   max-width: 500px;
 }
 
-.emotion-105>time {
+.emotion-106>time {
   -webkit-align-self: flex-end;
   -ms-flex-item-align: flex-end;
   align-self: flex-end;
 }
 
-.emotion-106 {
+.emotion-107 {
   margin: 0;
   font-family: Red Hat Text;
   font-weight: 400;
@@ -1502,20 +1469,20 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   line-height: 1.66;
 }
 
-.emotion-110 {
+.emotion-111 {
   background: #fff;
   border-radius: 4px;
   padding: 4px;
 }
 
-.emotion-110>.flexbox {
+.emotion-111>.flexbox {
   -webkit-box-pack: space-evenly;
   -ms-flex-pack: space-evenly;
   -webkit-justify-content: space-evenly;
   justify-content: space-evenly;
 }
 
-.emotion-132 {
+.emotion-133 {
   position: fixed;
   display: grid;
   bottom: 0;
@@ -1624,7 +1591,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
             class=""
           >
             <div
-              aria-label="View device limits"
+              aria-label="View device count and limits"
               class=""
               data-mui-internal-clone-element="true"
             >
@@ -1680,34 +1647,37 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
           </div>
           <div
             aria-orientation="vertical"
-            class="MuiDivider-root MuiDivider-fullWidth MuiDivider-vertical margin-left-small margin-right-small emotion-17"
+            class="MuiDivider-root MuiDivider-fullWidth MuiDivider-vertical margin-left-x-small margin-right-x-small emotion-17"
             role="separator"
           />
           <a
-            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways flexbox align-items-center emotion-18"
+            aria-label="Deployments in progress"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-sizeMedium MuiButton-colorInherit emotion-18"
             data-discover="true"
+            data-mui-internal-clone-element="true"
             href="/deployments/active"
+            tabindex="0"
           >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall flip-horizontal margin-right-x-small emotion-13"
-              data-testid="SyncIcon"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8m0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4z"
-              />
-            </svg>
-            <h6
-              class="MuiTypography-root MuiTypography-subtitle2 emotion-20"
+            <span
+              class="MuiButton-icon MuiButton-startIcon emotion-12"
             >
-              3
-            </h6>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall emotion-13"
+                data-testid="SyncOutlinedIcon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8m0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4z"
+                />
+              </svg>
+            </span>
+            3
           </a>
           <div
             aria-orientation="vertical"
-            class="MuiDivider-root MuiDivider-fullWidth MuiDivider-vertical margin-left-small margin-right-small emotion-17"
+            class="MuiDivider-root MuiDivider-fullWidth MuiDivider-vertical margin-left-x-small margin-right-x-small emotion-17"
             role="separator"
           />
           <button
@@ -1730,88 +1700,92 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
                 />
               </svg>
             </span>
-            a2@b.com
+            <h6
+              class="MuiTypography-root MuiTypography-subtitle2 text-overflow emotion-25"
+            >
+              a2@b.com
+            </h6>
           </button>
         </div>
       </div>
     </div>
     <div
-      class="leftFixed leftNav flexbox column space-between emotion-25"
+      class="leftFixed leftNav flexbox column space-between emotion-26"
     >
       <ul
-        class="MuiList-root MuiList-padding emotion-26"
+        class="MuiList-root MuiList-padding emotion-27"
       >
         <a
           aria-current="page"
-          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-27 active"
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-28 active"
           data-discover="true"
           href="/"
         >
           <div
-            class="MuiListItemText-root emotion-28"
+            class="MuiListItemText-root emotion-29"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-29"
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
             >
               Dashboard
             </span>
           </div>
         </a>
         <a
-          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-27"
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-28"
           data-discover="true"
           href="/devices"
         >
           <div
-            class="MuiListItemText-root emotion-28"
+            class="MuiListItemText-root emotion-29"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-29"
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
             >
               Devices
             </span>
           </div>
         </a>
         <a
-          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-27"
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-28"
           data-discover="true"
           href="/software"
         >
           <div
-            class="MuiListItemText-root emotion-28"
+            class="MuiListItemText-root emotion-29"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-29"
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
             >
               Software
             </span>
           </div>
         </a>
         <a
-          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-27"
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-28"
           data-discover="true"
           href="/deployments"
         >
           <div
-            class="MuiListItemText-root emotion-28"
+            class="MuiListItemText-root emotion-29"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-29"
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
             >
               Deployments
             </span>
           </div>
         </a>
         <a
-          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-27"
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-28"
           data-discover="true"
           href="/auditlog"
         >
           <div
-            class="MuiListItemText-root emotion-28"
+            class="MuiListItemText-root emotion-29"
           >
             <span
-              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-29"
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
             >
               Audit log
             </span>
@@ -1819,10 +1793,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
         </a>
       </ul>
       <ul
-        class="MuiList-root MuiList-padding flexbox column padding-bottom emotion-42"
+        class="MuiList-root MuiList-padding flexbox column padding-bottom emotion-43"
       >
         <a
-          class="MuiTypography-root MuiTypography-body2 MuiLink-root MuiLink-underlineAlways emotion-43"
+          class="MuiTypography-root MuiTypography-body2 MuiLink-root MuiLink-underlineAlways emotion-44"
           data-discover="true"
           href="/help"
         >
@@ -1836,7 +1810,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
           Version: next
         </div>
         <a
-          class="MuiTypography-root MuiTypography-body2 MuiLink-root MuiLink-underlineAlways emotion-43"
+          class="MuiTypography-root MuiTypography-body2 MuiLink-root MuiLink-underlineAlways emotion-44"
           href="https://docs.mender.io/release-information/release-notes-changelog/mender-server"
           rel=""
           target="_blank"
@@ -1844,7 +1818,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
           Release information
         </a>
         <a
-          class="MuiTypography-root MuiTypography-body2 MuiLink-root MuiLink-underlineAlways emotion-43"
+          class="MuiTypography-root MuiTypography-body2 MuiLink-root MuiLink-underlineAlways emotion-44"
           href="https://docs.mender.io/release-information/supported-releases#mender-client"
           rel=""
           target="_blank"
@@ -1852,7 +1826,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
           Supported Mender client releases
         </a>
         <a
-          class="MuiTypography-root MuiTypography-body2 MuiLink-root MuiLink-underlineAlways emotion-43"
+          class="MuiTypography-root MuiTypography-body2 MuiLink-root MuiLink-underlineAlways emotion-44"
           href="https://docs.mender.io/release-information/open-source-licenses"
           rel=""
           target="_blank"
@@ -1865,16 +1839,16 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
       class="rightFluid container"
     >
       <h5
-        class="MuiTypography-root MuiTypography-h5 margin-bottom-small emotion-47"
+        class="MuiTypography-root MuiTypography-h5 margin-bottom-small emotion-48"
       >
         Dashboard
       </h5>
       <div
-        class="emotion-48"
+        class="emotion-49"
         style=""
       >
         <div
-          class="emotion-49"
+          class="emotion-50"
         >
           <div
             class="dashboard flexbox"
@@ -1883,7 +1857,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
               class="widget clickable relative "
             >
               <p
-                class="MuiTypography-root MuiTypography-body1 flexbox widgetHeader full-width align-items-center emotion-29"
+                class="MuiTypography-root MuiTypography-body1 flexbox widgetHeader full-width align-items-center emotion-30"
               >
                 Accepted devices 
                 <svg
@@ -1905,7 +1879,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
                   class="full-width"
                 >
                   <h5
-                    class="MuiTypography-root MuiTypography-h5 emotion-47"
+                    class="MuiTypography-root MuiTypography-h5 emotion-48"
                   >
                     2
                   </h5>
@@ -1913,7 +1887,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
                     class="flexbox column full-width margin-top-x-small"
                   >
                     <span
-                      class="MuiSkeleton-root MuiSkeleton-rectangular MuiSkeleton-pulse margin-bottom-x-small emotion-53"
+                      class="MuiSkeleton-root MuiSkeleton-rectangular MuiSkeleton-pulse margin-bottom-x-small emotion-54"
                       style="height: 47px;"
                     />
                   </div>
@@ -1928,7 +1902,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
                 class="flexbox centered"
               >
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-sizeMedium MuiButton-colorInherit emotion-54"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-sizeMedium MuiButton-colorInherit emotion-18"
                   style="max-width: 200px;"
                   tabindex="0"
                   type="button"
@@ -1956,7 +1930,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
               class="widget clickable relative"
             >
               <div
-                class="flexbox align-items-center  emotion-56"
+                class="flexbox align-items-center  emotion-57"
                 style="align-items: end;"
               >
                 <div
@@ -1964,24 +1938,24 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
                   data-mui-internal-clone-element="true"
                 >
                   <div
-                    class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable emotion-57"
+                    class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable emotion-58"
                     role="button"
                     tabindex="0"
                   >
                     <span
-                      class="MuiChip-label emotion-58"
+                      class="MuiChip-label emotion-59"
                     >
                       Enterprise
                     </span>
                   </div>
                 </div>
                 <div
-                  class="relative flexbox emotion-59  "
+                  class="relative flexbox emotion-60  "
                   data-mui-internal-clone-element="true"
                 >
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-60"
+                    class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-61"
                     data-testid="HelpIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -1991,7 +1965,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
                     />
                   </svg>
                   <div
-                    class="emotion-61 "
+                    class="emotion-62 "
                   />
                 </div>
               </div>
@@ -1999,7 +1973,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
                 class="flexbox centered"
               >
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-sizeMedium MuiButton-colorInherit emotion-54"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-sizeMedium MuiButton-colorInherit emotion-18"
                   tabindex="0"
                   type="button"
                 >
@@ -2025,31 +1999,31 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
           </div>
         </div>
         <div
-          class="emotion-65 deployments relative"
+          class="emotion-66 deployments relative"
         >
           <div
             class="dashboard flexbox column"
             style="grid-template-columns: 1fr; row-gap: 10px;"
           >
             <h6
-              class="MuiTypography-root MuiTypography-subtitle1 margin-bottom-none emotion-66"
+              class="MuiTypography-root MuiTypography-subtitle1 margin-bottom-none emotion-67"
             >
               Recent deployments
             </h6>
             <h6
-              class="MuiTypography-root MuiTypography-subtitle2 margin-bottom-none margin-top emotion-20"
+              class="MuiTypography-root MuiTypography-subtitle2 margin-bottom-none margin-top emotion-25"
             >
               Pending
             </h6>
             <div
-              class="clickable emotion-68"
+              class="clickable emotion-69"
             >
               <div>
                 <p
-                  class="MuiTypography-root MuiTypography-body1 emotion-29"
+                  class="MuiTypography-root MuiTypography-body1 emotion-30"
                 />
                 <p
-                  class="MuiTypography-root MuiTypography-body2 emotion-70"
+                  class="MuiTypography-root MuiTypography-body2 emotion-71"
                   title="Test"
                 >
                   Test
@@ -2059,27 +2033,27 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
                 class=""
               >
                 <span
-                  class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate emotion-71"
+                  class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate emotion-72"
                   role="progressbar"
                 >
                   <span
-                    class="MuiLinearProgress-bar MuiLinearProgress-bar1 emotion-72"
+                    class="MuiLinearProgress-bar MuiLinearProgress-bar1 emotion-73"
                   />
                   <span
-                    class="MuiLinearProgress-bar MuiLinearProgress-bar2 emotion-73"
+                    class="MuiLinearProgress-bar MuiLinearProgress-bar2 emotion-74"
                   />
                 </span>
               </div>
             </div>
             <div
-              class="clickable emotion-68"
+              class="clickable emotion-69"
             >
               <div>
                 <p
-                  class="MuiTypography-root MuiTypography-body1 emotion-29"
+                  class="MuiTypography-root MuiTypography-body1 emotion-30"
                 />
                 <p
-                  class="MuiTypography-root MuiTypography-body2 emotion-70"
+                  class="MuiTypography-root MuiTypography-body2 emotion-71"
                   title="test deployment"
                 >
                   test deployment
@@ -2089,29 +2063,29 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
                 class=""
               >
                 <span
-                  class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate emotion-71"
+                  class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate emotion-72"
                   role="progressbar"
                 >
                   <span
-                    class="MuiLinearProgress-bar MuiLinearProgress-bar1 emotion-72"
+                    class="MuiLinearProgress-bar MuiLinearProgress-bar1 emotion-73"
                   />
                   <span
-                    class="MuiLinearProgress-bar MuiLinearProgress-bar2 emotion-73"
+                    class="MuiLinearProgress-bar MuiLinearProgress-bar2 emotion-74"
                   />
                 </span>
               </div>
             </div>
             <div
-              class="clickable emotion-68"
+              class="clickable emotion-69"
             >
               <div>
                 <p
-                  class="MuiTypography-root MuiTypography-body1 emotion-29"
+                  class="MuiTypography-root MuiTypography-body1 emotion-30"
                 >
                   r1
                 </p>
                 <p
-                  class="MuiTypography-root MuiTypography-body2 emotion-70"
+                  class="MuiTypography-root MuiTypography-body2 emotion-71"
                   title="test deployment 2"
                 >
                   test deployment 2
@@ -2121,7 +2095,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
                 class=""
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body2 flexbox align-items-center emotion-70"
+                  class="MuiTypography-root MuiTypography-body2 flexbox align-items-center emotion-71"
                 >
                   <svg
                     aria-hidden="true"
@@ -2158,19 +2132,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
               </div>
             </div>
             <h6
-              class="MuiTypography-root MuiTypography-subtitle2 margin-bottom-none margin-top emotion-20"
+              class="MuiTypography-root MuiTypography-subtitle2 margin-bottom-none margin-top emotion-25"
             >
               In Progress
             </h6>
             <div
-              class="clickable emotion-68"
+              class="clickable emotion-69"
             >
               <div>
                 <p
-                  class="MuiTypography-root MuiTypography-body1 emotion-29"
+                  class="MuiTypography-root MuiTypography-body1 emotion-30"
                 />
                 <p
-                  class="MuiTypography-root MuiTypography-body2 emotion-70"
+                  class="MuiTypography-root MuiTypography-body2 emotion-71"
                   title="Test"
                 >
                   Test
@@ -2180,27 +2154,27 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
                 class=""
               >
                 <span
-                  class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate emotion-71"
+                  class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate emotion-72"
                   role="progressbar"
                 >
                   <span
-                    class="MuiLinearProgress-bar MuiLinearProgress-bar1 emotion-72"
+                    class="MuiLinearProgress-bar MuiLinearProgress-bar1 emotion-73"
                   />
                   <span
-                    class="MuiLinearProgress-bar MuiLinearProgress-bar2 emotion-73"
+                    class="MuiLinearProgress-bar MuiLinearProgress-bar2 emotion-74"
                   />
                 </span>
               </div>
             </div>
             <div
-              class="clickable emotion-68"
+              class="clickable emotion-69"
             >
               <div>
                 <p
-                  class="MuiTypography-root MuiTypography-body1 emotion-29"
+                  class="MuiTypography-root MuiTypography-body1 emotion-30"
                 />
                 <p
-                  class="MuiTypography-root MuiTypography-body2 emotion-70"
+                  class="MuiTypography-root MuiTypography-body2 emotion-71"
                   title="test deployment"
                 >
                   test deployment
@@ -2210,29 +2184,29 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
                 class=""
               >
                 <span
-                  class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate emotion-71"
+                  class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate emotion-72"
                   role="progressbar"
                 >
                   <span
-                    class="MuiLinearProgress-bar MuiLinearProgress-bar1 emotion-72"
+                    class="MuiLinearProgress-bar MuiLinearProgress-bar1 emotion-73"
                   />
                   <span
-                    class="MuiLinearProgress-bar MuiLinearProgress-bar2 emotion-73"
+                    class="MuiLinearProgress-bar MuiLinearProgress-bar2 emotion-74"
                   />
                 </span>
               </div>
             </div>
             <div
-              class="clickable emotion-68"
+              class="clickable emotion-69"
             >
               <div>
                 <p
-                  class="MuiTypography-root MuiTypography-body1 emotion-29"
+                  class="MuiTypography-root MuiTypography-body1 emotion-30"
                 >
                   r1
                 </p>
                 <p
-                  class="MuiTypography-root MuiTypography-body2 emotion-70"
+                  class="MuiTypography-root MuiTypography-body2 emotion-71"
                   title="test deployment 2"
                 >
                   test deployment 2
@@ -2242,7 +2216,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
                 class=""
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body2 flexbox align-items-center emotion-70"
+                  class="MuiTypography-root MuiTypography-body2 flexbox align-items-center emotion-71"
                 >
                   <svg
                     aria-hidden="true"
@@ -2279,123 +2253,123 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
               </div>
             </div>
             <h6
-              class="MuiTypography-root MuiTypography-subtitle2 margin-bottom-none margin-top emotion-20"
+              class="MuiTypography-root MuiTypography-subtitle2 margin-bottom-none margin-top emotion-25"
             >
               Finished
             </h6>
             <div
-              class="emotion-104"
+              class="emotion-105"
             >
               <div
-                class="emotion-105 margin-bottom-x-small"
+                class="emotion-106 margin-bottom-x-small"
               >
                 <time
-                  class="MuiTypography-root MuiTypography-caption slightly-smaller align-right emotion-106"
+                  class="MuiTypography-root MuiTypography-caption slightly-smaller align-right emotion-107"
                   datetime="2019-01-13T13:00:00+00:00"
                 >
                   2019-01-13 13:00
                 </time>
                 <div
-                  class="clickable emotion-68"
+                  class="clickable emotion-69"
                 >
                   <div>
                     <p
-                      class="MuiTypography-root MuiTypography-body1 emotion-29"
+                      class="MuiTypography-root MuiTypography-body1 emotion-30"
                     />
                     <p
-                      class="MuiTypography-root MuiTypography-body2 emotion-70"
+                      class="MuiTypography-root MuiTypography-body2 emotion-71"
                       title="Test"
                     >
                       Test
                     </p>
                   </div>
                   <div
-                    class="emotion-110"
+                    class="emotion-111"
                   >
                     <span
-                      class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate emotion-71"
+                      class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate emotion-72"
                       role="progressbar"
                     >
                       <span
-                        class="MuiLinearProgress-bar MuiLinearProgress-bar1 emotion-72"
+                        class="MuiLinearProgress-bar MuiLinearProgress-bar1 emotion-73"
                       />
                       <span
-                        class="MuiLinearProgress-bar MuiLinearProgress-bar2 emotion-73"
+                        class="MuiLinearProgress-bar MuiLinearProgress-bar2 emotion-74"
                       />
                     </span>
                   </div>
                 </div>
               </div>
               <div
-                class="emotion-105 margin-bottom-x-small"
+                class="emotion-106 margin-bottom-x-small"
               >
                 <time
-                  class="MuiTypography-root MuiTypography-caption slightly-smaller align-right emotion-106"
+                  class="MuiTypography-root MuiTypography-caption slightly-smaller align-right emotion-107"
                   datetime="2019-01-13T13:00:00+00:00"
                 >
                   2019-01-13 13:00
                 </time>
                 <div
-                  class="clickable emotion-68"
+                  class="clickable emotion-69"
                 >
                   <div>
                     <p
-                      class="MuiTypography-root MuiTypography-body1 emotion-29"
+                      class="MuiTypography-root MuiTypography-body1 emotion-30"
                     />
                     <p
-                      class="MuiTypography-root MuiTypography-body2 emotion-70"
+                      class="MuiTypography-root MuiTypography-body2 emotion-71"
                       title="test deployment"
                     >
                       test deployment
                     </p>
                   </div>
                   <div
-                    class="emotion-110"
+                    class="emotion-111"
                   >
                     <span
-                      class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate emotion-71"
+                      class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate emotion-72"
                       role="progressbar"
                     >
                       <span
-                        class="MuiLinearProgress-bar MuiLinearProgress-bar1 emotion-72"
+                        class="MuiLinearProgress-bar MuiLinearProgress-bar1 emotion-73"
                       />
                       <span
-                        class="MuiLinearProgress-bar MuiLinearProgress-bar2 emotion-73"
+                        class="MuiLinearProgress-bar MuiLinearProgress-bar2 emotion-74"
                       />
                     </span>
                   </div>
                 </div>
               </div>
               <div
-                class="emotion-105 margin-bottom-x-small"
+                class="emotion-106 margin-bottom-x-small"
               >
                 <time
-                  class="MuiTypography-root MuiTypography-caption slightly-smaller align-right emotion-106"
+                  class="MuiTypography-root MuiTypography-caption slightly-smaller align-right emotion-107"
                   datetime="2019-01-13T13:00:00+00:00"
                 >
                   2019-01-13 13:00
                 </time>
                 <div
-                  class="clickable emotion-68"
+                  class="clickable emotion-69"
                 >
                   <div>
                     <p
-                      class="MuiTypography-root MuiTypography-body1 emotion-29"
+                      class="MuiTypography-root MuiTypography-body1 emotion-30"
                     >
                       r1
                     </p>
                     <p
-                      class="MuiTypography-root MuiTypography-body2 emotion-70"
+                      class="MuiTypography-root MuiTypography-body2 emotion-71"
                       title="test deployment 2"
                     >
                       test deployment 2
                     </p>
                   </div>
                   <div
-                    class="emotion-110"
+                    class="emotion-111"
                   >
                     <p
-                      class="MuiTypography-root MuiTypography-body2 flexbox align-items-center emotion-70"
+                      class="MuiTypography-root MuiTypography-body2 flexbox align-items-center emotion-71"
                     >
                       <svg
                         aria-hidden="true"
@@ -2446,7 +2420,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
     </div>
   </div>
   <div
-    class="emotion-132"
+    class="emotion-133"
   />
 </div>
 `;
@@ -2492,10 +2466,6 @@ exports[`App Component > renders correctly 1`] = `
   }
 }
 
-.emotion-0.service-provider {
-  grid-template-columns: 1fr max-content;
-}
-
 .emotion-0 #logo {
   min-width: 142px;
   height: 48px;
@@ -2527,13 +2497,13 @@ exports[`App Component > renders correctly 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-transition: all 0.1s ease;
-  transition: all 0.1s ease;
 }
 
 .emotion-2 .MuiTextField-root {
   width: 220px;
   max-width: 640px;
+  -webkit-transition: width 0.1s ease;
+  transition: width 0.1s ease;
 }
 
 .emotion-2 .MuiTextField-root:focus-within {
@@ -2563,13 +2533,13 @@ exports[`App Component > renders correctly 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-transition: all 0.1s ease;
-  transition: all 0.1s ease;
 }
 
 .emotion-3 .MuiTextField-root {
   width: 220px;
   max-width: 640px;
+  -webkit-transition: width 0.1s ease;
+  transition: width 0.1s ease;
 }
 
 .emotion-3 .MuiTextField-root:focus-within {
@@ -3054,43 +3024,106 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   height: 100%;
   border-bottom-width: 0;
   border-right-width: thin;
-  color: #5f5f60;
   height: 24px;
 }
 
-.emotion-17:hover {
-  color: #5f5f60;
-}
-
 .emotion-18 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
   margin: 0;
-  font: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  color: #1d8faf;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  text-decoration-color: var(--Link-underlineColor);
-  --Link-underlineColor: rgba(29, 143, 175, 0.4);
-  color: #5f5f60;
-  color: #5f5f60;
-  height: 24px;
+  border-radius: 0;
+  padding: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: inherit;
+  text-transform: none;
+  font-family: Red Hat Text;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.75;
+  text-transform: uppercase;
+  min-width: 64px;
+  padding: 6px 16px;
+  border: 0;
+  border-radius: 4px;
+  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  padding: 6px 8px;
+  color: var(--variant-textColor);
+  background-color: var(--variant-textBg);
+  color: inherit;
+  border-color: currentColor;
+  --variant-containedBg: #dededf;
+  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  text-transform: none;
+  box-shadow: none;
+  text-transform: none;
 }
 
-.emotion-18:hover {
-  text-decoration-color: inherit;
+.emotion-18::-moz-focus-inner {
+  border-style: none;
+}
+
+.emotion-18.Mui-disabled {
+  pointer-events: none;
+  cursor: default;
+}
+
+@media print {
+  .emotion-18 {
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+  }
 }
 
 .emotion-18:hover {
-  color: #5f5f60;
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
-.emotion-20 {
-  margin: 0;
-  font-family: Red Hat Text;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.57;
+.emotion-18.Mui-disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+@media (hover: hover) {
+  .emotion-18:hover {
+    --variant-containedBg: #f5f5f5;
+    --variant-textBg: rgba(31, 31, 32, 0.04);
+    --variant-outlinedBg: rgba(31, 31, 32, 0.04);
+  }
+}
+
+.emotion-18.MuiButton-loading {
+  color: transparent;
+}
+
+.emotion-18:hover:not(.MuiButton-colorInfo) {
+  box-shadow: none;
 }
 
 .emotion-22 {
@@ -3152,8 +3185,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   box-shadow: none;
   text-transform: none;
   color: #5f5f60;
-  height: 24px;
-  height: 100%;
+  max-width: 250px;
 }
 
 .emotion-22::-moz-focus-inner {
@@ -3220,15 +3252,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
 }
 
 .emotion-25 {
+  margin: 0;
+  font-family: Red Hat Text;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.57;
+}
+
+.emotion-26 {
   background-color: rgb(234, 234, 234);
   position: relative;
 }
 
-.emotion-25 .MuiList-root {
+.emotion-26 .MuiList-root {
   padding-top: 0;
 }
 
-.emotion-25::after {
+.emotion-26::after {
   content: "";
   position: absolute;
   top: 0;
@@ -3239,7 +3279,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   z-index: 1;
 }
 
-.emotion-26 {
+.emotion-27 {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -3248,7 +3288,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   padding-bottom: 8px;
 }
 
-.emotion-27 {
+.emotion-28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3278,12 +3318,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   border-bottom: 1px solid transparent;
 }
 
-.emotion-27:hover {
+.emotion-28:hover {
   background-color: #fff;
   color: #1f1f20;
 }
 
-.emotion-27.active {
+.emotion-28.active {
   background-color: #fff;
   border-top: 1px solid rgba(0, 0, 0, 0.12);
   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
@@ -3291,7 +3331,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   z-index: 2;
 }
 
-.emotion-28 {
+.emotion-29 {
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
@@ -3300,15 +3340,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   margin-bottom: 4px;
 }
 
-.MuiTypography-root:where(.emotion-28 .MuiListItemText-primary) {
+.MuiTypography-root:where(.emotion-29 .MuiListItemText-primary) {
   display: block;
 }
 
-.MuiTypography-root:where(.emotion-28 .MuiListItemText-secondary) {
+.MuiTypography-root:where(.emotion-29 .MuiListItemText-secondary) {
   display: block;
 }
 
-.emotion-29 {
+.emotion-30 {
   margin: 0;
   font-family: Red Hat Text;
   font-weight: 400;
@@ -3316,7 +3356,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   line-height: 1.5;
 }
 
-.emotion-42 {
+.emotion-43 {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -3328,7 +3368,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   padding-right: 16px;
 }
 
-.emotion-43 {
+.emotion-44 {
   margin: 0;
   font-family: Red Hat Text;
   font-weight: 400;
@@ -3341,11 +3381,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   --Link-underlineColor: rgba(29, 143, 175, 0.4);
 }
 
-.emotion-43:hover {
+.emotion-44:hover {
   text-decoration-color: inherit;
 }
 
-.emotion-47 {
+.emotion-48 {
   margin: 0;
   font-weight: 500;
   font-family: Red Hat Text;
@@ -3353,7 +3393,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   line-height: 1.334;
 }
 
-.emotion-48 {
+.emotion-49 {
   -webkit-column-gap: 48px;
   column-gap: 48px;
   display: -webkit-box;
@@ -3367,7 +3407,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   margin-bottom: 48px;
 }
 
-.emotion-48 .dashboard {
+.emotion-49 .dashboard {
   -webkit-column-gap: 32px;
   column-gap: 32px;
   row-gap: 32px;
@@ -3377,7 +3417,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   flex-wrap: wrap;
 }
 
-.emotion-48 .dashboard .widget {
+.emotion-49 .dashboard .widget {
   border-radius: 4px;
   border: 1px solid #dededf;
   display: grid;
@@ -3388,7 +3428,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   padding: 16px 24px;
 }
 
-.emotion-48 .dashboard .widget.chart-widget {
+.emotion-49 .dashboard .widget.chart-widget {
   padding: 16px;
   width: 19vw;
   min-height: 235px;
@@ -3396,7 +3436,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   min-width: 375px;
 }
 
-.emotion-49 {
+.emotion-50 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -3417,12 +3457,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
 }
 
 @media (min-width:1536px) {
-  .emotion-49 {
+  .emotion-50 {
     min-width: 50vw;
   }
 }
 
-.emotion-53 {
+.emotion-54 {
   background-color: #fff;
   color: #1f1f20;
   -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
@@ -3435,7 +3475,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   border-radius: 4px;
 }
 
-.emotion-54 {
+.emotion-55 {
   margin: 0;
   font-family: Red Hat Text;
   font-weight: 500;
@@ -3444,7 +3484,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   color: #1f1f20;
 }
 
-.emotion-55 {
+.emotion-56 {
   margin: 0;
   font-family: Red Hat Text;
   font-weight: 400;
@@ -3453,7 +3493,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   color: #1f1f20;
 }
 
-.emotion-56 {
+.emotion-57 {
   position: relative;
   overflow: hidden;
   display: block;
@@ -3463,13 +3503,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
 }
 
 @media print {
-  .emotion-56 {
+  .emotion-57 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-57 {
+.emotion-58 {
   width: 100%;
   position: absolute;
   left: 0;
@@ -3483,110 +3523,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   transition: transform .4s linear 0ms;
 }
 
-.emotion-58 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  position: relative;
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: transparent;
-  background-color: transparent;
-  outline: 0;
-  border: 0;
-  margin: 0;
-  border-radius: 0;
-  padding: 0;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: inherit;
-  text-transform: none;
-  font-family: Red Hat Text;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.75;
-  text-transform: uppercase;
-  min-width: 64px;
-  padding: 6px 16px;
-  border: 0;
-  border-radius: 4px;
-  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  padding: 6px 8px;
-  color: var(--variant-textColor);
-  background-color: var(--variant-textBg);
-  color: inherit;
-  border-color: currentColor;
-  --variant-containedBg: #dededf;
-  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  text-transform: none;
-  box-shadow: none;
-  text-transform: none;
-}
-
-.emotion-58::-moz-focus-inner {
-  border-style: none;
-}
-
-.emotion-58.Mui-disabled {
-  pointer-events: none;
-  cursor: default;
-}
-
-@media print {
-  .emotion-58 {
-    -webkit-print-color-adjust: exact;
-    color-adjust: exact;
-  }
-}
-
-.emotion-58:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-58.Mui-disabled {
-  color: rgba(0, 0, 0, 0.26);
-}
-
-@media (hover: hover) {
-  .emotion-58:hover {
-    --variant-containedBg: #f5f5f5;
-    --variant-textBg: rgba(31, 31, 32, 0.04);
-    --variant-outlinedBg: rgba(31, 31, 32, 0.04);
-  }
-}
-
-.emotion-58.MuiButton-loading {
-  color: transparent;
-}
-
-.emotion-58:hover:not(.MuiButton-colorInfo) {
-  box-shadow: none;
-}
-
-.emotion-60 {
+.emotion-61 {
   gap: 16px;
 }
 
-.emotion-61 {
+.emotion-62 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3660,28 +3601,28 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   box-shadow: none;
 }
 
-.emotion-61::-moz-focus-inner {
+.emotion-62::-moz-focus-inner {
   border-style: none;
 }
 
-.emotion-61.Mui-disabled {
+.emotion-62.Mui-disabled {
   pointer-events: none;
   cursor: default;
 }
 
 @media print {
-  .emotion-61 {
+  .emotion-62 {
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
   }
 }
 
-.emotion-61.Mui-disabled {
+.emotion-62.Mui-disabled {
   opacity: 0.38;
   pointer-events: none;
 }
 
-.emotion-61 .MuiChip-avatar {
+.emotion-62 .MuiChip-avatar {
   margin-left: 5px;
   margin-right: -6px;
   width: 24px;
@@ -3690,12 +3631,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   font-size: 0.75rem;
 }
 
-.emotion-61 .MuiChip-icon {
+.emotion-62 .MuiChip-icon {
   margin-left: 5px;
   margin-right: -6px;
 }
 
-.emotion-61 .MuiChip-deleteIcon {
+.emotion-62 .MuiChip-deleteIcon {
   -webkit-tap-highlight-color: transparent;
   color: rgba(31, 31, 32, 0.26);
   font-size: 22px;
@@ -3703,27 +3644,27 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   margin: 0 5px 0 -6px;
 }
 
-.emotion-61 .MuiChip-deleteIcon:hover {
+.emotion-62 .MuiChip-deleteIcon:hover {
   color: rgba(31, 31, 32, 0.4);
 }
 
-.emotion-61 .MuiChip-icon {
+.emotion-62 .MuiChip-icon {
   color: #5f5f60;
 }
 
-.emotion-61:hover {
+.emotion-62:hover {
   background-color: rgba(0, 0, 0, 0.12);
 }
 
-.emotion-61.Mui-focusVisible {
+.emotion-62.Mui-focusVisible {
   background-color: rgba(0, 0, 0, 0.2);
 }
 
-.emotion-61:active {
+.emotion-62:active {
   box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
 }
 
-.emotion-62 {
+.emotion-63 {
   overflow: hidden;
   text-overflow: ellipsis;
   padding-left: 12px;
@@ -3731,16 +3672,16 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   white-space: nowrap;
 }
 
-.emotion-63 {
+.emotion-64 {
   margin: auto;
   margin-left: 0;
 }
 
-.emotion-63:hover svg {
+.emotion-64:hover svg {
   color: #015969;
 }
 
-.emotion-64 {
+.emotion-65 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -3758,11 +3699,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   color: #1d8faf;
 }
 
-.emotion-64.read {
+.emotion-65.read {
   color: #9c9c9d;
 }
 
-.emotion-65 {
+.emotion-66 {
   position: absolute;
   top: -4px;
   bottom: -4px;
@@ -3772,15 +3713,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   border-radius: 50%;
 }
 
-.emotion-65.read {
+.emotion-66.read {
   border-color: #9c9c9d;
 }
 
-.emotion-65:hover {
+.emotion-66:hover {
   border-color: #015969;
 }
 
-.emotion-69 {
+.emotion-70 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -3791,28 +3732,28 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   padding-top: 0;
 }
 
-.emotion-69 .deployments .dashboard>h4 {
+.emotion-70 .deployments .dashboard>h4 {
   margin-top: 48px;
 }
 
-.emotion-69 .deployments .dashboard>h4.margin-top-none {
+.emotion-70 .deployments .dashboard>h4.margin-top-none {
   margin-top: 0;
 }
 
 @media (min-width:1536px) {
-  .emotion-69 {
+  .emotion-70 {
     border-left: 1px solid #9c9c9d;
     margin-top: -16px;
     padding-left: 48px;
     padding-top: 16px;
   }
 
-  .emotion-69 .deployments .dashboard>h4 {
+  .emotion-70 .deployments .dashboard>h4 {
     margin-top: 0;
   }
 }
 
-.emotion-70 {
+.emotion-71 {
   margin: 0;
   font-weight: 500;
   font-family: Red Hat Text;
@@ -3820,7 +3761,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
   line-height: 1.75;
 }
 
-.emotion-74 {
+.emotion-75 {
   margin-top: -10px;
 }
 
@@ -3916,7 +3857,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
           class=""
         >
           <div
-            aria-label="View device limits"
+            aria-label="View device count and limits"
             class=""
             data-mui-internal-clone-element="true"
           >
@@ -3972,34 +3913,37 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
         </div>
         <div
           aria-orientation="vertical"
-          class="MuiDivider-root MuiDivider-fullWidth MuiDivider-vertical margin-left-small margin-right-small emotion-17"
+          class="MuiDivider-root MuiDivider-fullWidth MuiDivider-vertical margin-left-x-small margin-right-x-small emotion-17"
           role="separator"
         />
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways flexbox align-items-center emotion-18"
+          aria-label="Deployments in progress"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-sizeMedium MuiButton-colorInherit emotion-18"
           data-discover="true"
+          data-mui-internal-clone-element="true"
           href="/deployments/active"
+          tabindex="0"
         >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall flip-horizontal margin-right-x-small emotion-13"
-            data-testid="SyncIcon"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8m0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4z"
-            />
-          </svg>
-          <h6
-            class="MuiTypography-root MuiTypography-subtitle2 emotion-20"
+          <span
+            class="MuiButton-icon MuiButton-startIcon emotion-12"
           >
-            0
-          </h6>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall emotion-13"
+              data-testid="SyncOutlinedIcon"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8m0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4z"
+              />
+            </svg>
+          </span>
+          0
         </a>
         <div
           aria-orientation="vertical"
-          class="MuiDivider-root MuiDivider-fullWidth MuiDivider-vertical margin-left-small margin-right-small emotion-17"
+          class="MuiDivider-root MuiDivider-fullWidth MuiDivider-vertical margin-left-x-small margin-right-x-small emotion-17"
           role="separator"
         />
         <button
@@ -4022,88 +3966,92 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
               />
             </svg>
           </span>
-          a@b.com
+          <h6
+            class="MuiTypography-root MuiTypography-subtitle2 text-overflow emotion-25"
+          >
+            a@b.com
+          </h6>
         </button>
       </div>
     </div>
   </div>
   <div
-    class="leftFixed leftNav flexbox column space-between emotion-25"
+    class="leftFixed leftNav flexbox column space-between emotion-26"
   >
     <ul
-      class="MuiList-root MuiList-padding emotion-26"
+      class="MuiList-root MuiList-padding emotion-27"
     >
       <a
         aria-current="page"
-        class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-27 active"
+        class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-28 active"
         data-discover="true"
         href="/"
       >
         <div
-          class="MuiListItemText-root emotion-28"
+          class="MuiListItemText-root emotion-29"
         >
           <span
-            class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-29"
+            class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
           >
             Dashboard
           </span>
         </div>
       </a>
       <a
-        class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-27"
+        class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-28"
         data-discover="true"
         href="/devices"
       >
         <div
-          class="MuiListItemText-root emotion-28"
+          class="MuiListItemText-root emotion-29"
         >
           <span
-            class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-29"
+            class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
           >
             Devices
           </span>
         </div>
       </a>
       <a
-        class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-27"
+        class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-28"
         data-discover="true"
         href="/software"
       >
         <div
-          class="MuiListItemText-root emotion-28"
+          class="MuiListItemText-root emotion-29"
         >
           <span
-            class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-29"
+            class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
           >
             Software
           </span>
         </div>
       </a>
       <a
-        class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-27"
+        class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-28"
         data-discover="true"
         href="/deployments"
       >
         <div
-          class="MuiListItemText-root emotion-28"
+          class="MuiListItemText-root emotion-29"
         >
           <span
-            class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-29"
+            class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
           >
             Deployments
           </span>
         </div>
       </a>
       <a
-        class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-27"
+        class="MuiListItem-root MuiListItem-gutters MuiListItem-padding navLink leftNav emotion-28"
         data-discover="true"
         href="/auditlog"
       >
         <div
-          class="MuiListItemText-root emotion-28"
+          class="MuiListItemText-root emotion-29"
         >
           <span
-            class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-29"
+            class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary emotion-30"
           >
             Audit log
           </span>
@@ -4111,10 +4059,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
       </a>
     </ul>
     <ul
-      class="MuiList-root MuiList-padding flexbox column padding-bottom emotion-42"
+      class="MuiList-root MuiList-padding flexbox column padding-bottom emotion-43"
     >
       <a
-        class="MuiTypography-root MuiTypography-body2 MuiLink-root MuiLink-underlineAlways emotion-43"
+        class="MuiTypography-root MuiTypography-body2 MuiLink-root MuiLink-underlineAlways emotion-44"
         data-discover="true"
         href="/help"
       >
@@ -4128,7 +4076,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
         Version: next
       </div>
       <a
-        class="MuiTypography-root MuiTypography-body2 MuiLink-root MuiLink-underlineAlways emotion-43"
+        class="MuiTypography-root MuiTypography-body2 MuiLink-root MuiLink-underlineAlways emotion-44"
         href="https://docs.mender.io/release-information/release-notes-changelog/mender-server"
         rel=""
         target="_blank"
@@ -4136,7 +4084,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
         Release information
       </a>
       <a
-        class="MuiTypography-root MuiTypography-body2 MuiLink-root MuiLink-underlineAlways emotion-43"
+        class="MuiTypography-root MuiTypography-body2 MuiLink-root MuiLink-underlineAlways emotion-44"
         href="https://docs.mender.io/release-information/supported-releases#mender-client"
         rel=""
         target="_blank"
@@ -4144,7 +4092,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
         Supported Mender client releases
       </a>
       <a
-        class="MuiTypography-root MuiTypography-body2 MuiLink-root MuiLink-underlineAlways emotion-43"
+        class="MuiTypography-root MuiTypography-body2 MuiLink-root MuiLink-underlineAlways emotion-44"
         href="https://docs.mender.io/release-information/open-source-licenses"
         rel=""
         target="_blank"
@@ -4157,15 +4105,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
     class="rightFluid container"
   >
     <h5
-      class="MuiTypography-root MuiTypography-h5 margin-bottom-small emotion-47"
+      class="MuiTypography-root MuiTypography-h5 margin-bottom-small emotion-48"
     >
       Dashboard
     </h5>
     <div
-      class="emotion-48"
+      class="emotion-49"
     >
       <div
-        class="emotion-49"
+        class="emotion-50"
       >
         <div
           class="dashboard flexbox"
@@ -4174,7 +4122,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
             class="widget clickable relative "
           >
             <p
-              class="MuiTypography-root MuiTypography-body1 flexbox widgetHeader full-width align-items-center emotion-29"
+              class="MuiTypography-root MuiTypography-body1 flexbox widgetHeader full-width align-items-center emotion-30"
             >
               Accepted devices 
               <svg
@@ -4196,7 +4144,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
                 class="full-width"
               >
                 <h5
-                  class="MuiTypography-root MuiTypography-h5 emotion-47"
+                  class="MuiTypography-root MuiTypography-h5 emotion-48"
                 >
                   2
                 </h5>
@@ -4209,7 +4157,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
                     data-mui-internal-clone-element="true"
                   >
                     <div
-                      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 flexbox column padding-x-small emotion-53"
+                      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 flexbox column padding-x-small emotion-54"
                       style="--Paper-shadow: none;"
                     >
                       <div
@@ -4219,13 +4167,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
                           class="flexbox"
                         >
                           <h6
-                            class="MuiTypography-root MuiTypography-subtitle2 capitalized-start emotion-54"
+                            class="MuiTypography-root MuiTypography-subtitle2 capitalized-start emotion-55"
                           >
                             standard
                           </h6>
                         </div>
                         <p
-                          class="MuiTypography-root MuiTypography-body2 emotion-55"
+                          class="MuiTypography-root MuiTypography-body2 emotion-56"
                           data-testid="device-limit-standard"
                         >
                           2/500
@@ -4238,11 +4186,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
                           aria-valuemax="100"
                           aria-valuemin="0"
                           aria-valuenow="0"
-                          class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-determinate emotion-56"
+                          class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-determinate emotion-57"
                           role="progressbar"
                         >
                           <span
-                            class="MuiLinearProgress-bar MuiLinearProgress-bar1 emotion-57"
+                            class="MuiLinearProgress-bar MuiLinearProgress-bar1 emotion-58"
                             style="transform: translateX(-100%);"
                           />
                         </span>
@@ -4261,7 +4209,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
               class="flexbox centered"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-sizeMedium MuiButton-colorInherit emotion-58"
+                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-sizeMedium MuiButton-colorInherit emotion-18"
                 style="max-width: 200px;"
                 tabindex="0"
                 type="button"
@@ -4289,7 +4237,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
             class="widget clickable relative"
           >
             <div
-              class="flexbox align-items-center  emotion-60"
+              class="flexbox align-items-center  emotion-61"
               style="align-items: end;"
             >
               <div
@@ -4297,24 +4245,24 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
                 data-mui-internal-clone-element="true"
               >
                 <div
-                  class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable emotion-61"
+                  class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable emotion-62"
                   role="button"
                   tabindex="0"
                 >
                   <span
-                    class="MuiChip-label emotion-62"
+                    class="MuiChip-label emotion-63"
                   >
                     Enterprise
                   </span>
                 </div>
               </div>
               <div
-                class="relative flexbox emotion-63  "
+                class="relative flexbox emotion-64  "
                 data-mui-internal-clone-element="true"
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-64"
+                  class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium emotion-65"
                   data-testid="HelpIcon"
                   focusable="false"
                   viewBox="0 0 24 24"
@@ -4324,7 +4272,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
                   />
                 </svg>
                 <div
-                  class="emotion-65 "
+                  class="emotion-66 "
                 />
               </div>
             </div>
@@ -4332,7 +4280,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
               class="flexbox centered"
             >
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-sizeMedium MuiButton-colorInherit emotion-58"
+                class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-sizeMedium MuiButton-colorInherit emotion-18"
                 tabindex="0"
                 type="button"
               >
@@ -4358,34 +4306,34 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p
         </div>
       </div>
       <div
-        class="emotion-69 deployments relative"
+        class="emotion-70 deployments relative"
       >
         <div
           class="dashboard flexbox column"
           style="grid-template-columns: 1fr; row-gap: 10px;"
         >
           <h6
-            class="MuiTypography-root MuiTypography-subtitle1 margin-bottom-none emotion-70"
+            class="MuiTypography-root MuiTypography-subtitle1 margin-bottom-none emotion-71"
           >
             Recent deployments
           </h6>
           <h6
-            class="MuiTypography-root MuiTypography-subtitle2 margin-bottom-none margin-top emotion-20"
+            class="MuiTypography-root MuiTypography-subtitle2 margin-bottom-none margin-top emotion-25"
           >
             Pending
           </h6>
           <h6
-            class="MuiTypography-root MuiTypography-subtitle2 margin-bottom-none margin-top emotion-20"
+            class="MuiTypography-root MuiTypography-subtitle2 margin-bottom-none margin-top emotion-25"
           >
             In Progress
           </h6>
           <h6
-            class="MuiTypography-root MuiTypography-subtitle2 margin-bottom-none margin-top emotion-20"
+            class="MuiTypography-root MuiTypography-subtitle2 margin-bottom-none margin-top emotion-25"
           >
             Finished
           </h6>
           <div
-            class="emotion-74"
+            class="emotion-75"
           />
           <a
             class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways margin-bottom-large emotion-1"
diff --git a/frontend/src/js/components/header/DeploymentNotifications.tsx b/frontend/src/js/components/header/DeploymentNotifications.tsx
index 8ccd2bef3..2c168a5d9 100644
--- a/frontend/src/js/components/header/DeploymentNotifications.tsx
+++ b/frontend/src/js/components/header/DeploymentNotifications.tsx
@@ -11,28 +11,20 @@
 //    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 //    See the License for the specific language governing permissions and
 //    limitations under the License.
+import { Link as RouterLink } from 'react-router';
+
 // material ui
-import { Sync as RefreshIcon } from '@mui/icons-material';
-import { Typography } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
+import { SyncOutlined as RefreshIcon } from '@mui/icons-material';
+import { Button, Tooltip } from '@mui/material';
 
-import { Link } from '@northern.tech/common-ui/Link';
 import { DEPLOYMENT_ROUTES } from '@northern.tech/store/constants';
 
-const useStyles = makeStyles()(theme => ({
-  root: {
-    color: theme.palette.text.secondary
-  }
-}));
-
-const DeploymentNotifications = ({ className = '', inprogress }) => {
-  const { classes } = useStyles();
-  return (
-    <Link to={DEPLOYMENT_ROUTES.active.route} className={`flexbox align-items-center ${classes.root} ${className}`}>
-      <RefreshIcon className="flip-horizontal margin-right-x-small" fontSize="small" />
-      <Typography variant="subtitle2">{inprogress}</Typography>
-    </Link>
-  );
-};
+const DeploymentNotifications = ({ className = '', inprogress }) => (
+  <Tooltip title="Deployments in progress">
+    <Button className={className} color="inherit" component={RouterLink} startIcon={<RefreshIcon fontSize="small" />} to={DEPLOYMENT_ROUTES.active.route}>
+      {inprogress}
+    </Button>
+  </Tooltip>
+);
 
 export default DeploymentNotifications;
diff --git a/frontend/src/js/components/header/DeviceNotifications.tsx b/frontend/src/js/components/header/DeviceNotifications.tsx
index b934f3b43..c9898a329 100644
--- a/frontend/src/js/components/header/DeviceNotifications.tsx
+++ b/frontend/src/js/components/header/DeviceNotifications.tsx
@@ -186,7 +186,8 @@ const DeviceNotifications = ({ className = '', total, pending }) => {
   return (
     <div className={className}>
       <Tooltip
-        title="View device limits"
+        arrow
+        title="View device count and limits"
         open={!anchorEl && tooltip}
         disableFocusListener
         disableTouchListener
diff --git a/frontend/src/js/components/header/Header.tsx b/frontend/src/js/components/header/Header.tsx
index ffa4d3b74..05d70012e 100644
--- a/frontend/src/js/components/header/Header.tsx
+++ b/frontend/src/js/components/header/Header.tsx
@@ -29,7 +29,6 @@ import {
   MenuItem,
   Toolbar,
   Typography,
-  accordionClasses,
   textFieldClasses
 } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
@@ -105,50 +104,37 @@ const cookies = new Cookies();
 
 const useStyles = makeStyles()(theme => ({
   accordion: {
-    ul: { paddingInlineStart: 0 },
-    [`&.${accordionClasses.disabled}, &.${accordionClasses.expanded}`]: {
-      backgroundColor: theme.palette.background.paper
-    },
-    border: 'none',
-    '&:hover': {
-      border: 'none'
-    }
+    border: 'none'
   },
+  accountButton: { maxWidth: 250 },
   demoAnnouncementIcon: {
-    height: 16,
-    '&.MuiButton-text.MuiButton-colorPrimary': {
-      height: 'inherit'
-    }
+    height: 16
   },
   demoTrialAnnouncement: {
-    fontSize: 14,
-    height: 'auto'
-  },
-  dropDown: {
-    height: '100%'
+    fontSize: 14
   },
-  exitIcon: { color: theme.palette.grey[600], fill: theme.palette.grey[600] },
+  exitIcon: { color: theme.palette.grey[600] },
   header: {
     borderBottom: `1px solid ${theme.palette.divider}`,
     color: theme.palette.text.secondary,
     display: 'grid',
     gridTemplateColumns: 'max-content 1fr max-content',
-    '&.service-provider': {
-      gridTemplateColumns: '1fr max-content'
-    },
     '#logo': {
       minWidth: 142,
       height: theme.spacing(6),
       marginRight: 25
     }
   },
+  divider: {
+    height: theme.spacing(3)
+  },
   headerSection: {
     color: theme.palette.text.secondary,
-    height: theme.spacing(3),
     '&:hover': {
       color: theme.palette.text.secondary
     }
   },
+  menuPaper: { marginTop: theme.spacing() },
   organization: { marginBottom: theme.spacing() },
   redAnnouncementIcon: {
     color: theme.palette.error.dark
@@ -156,14 +142,17 @@ const useStyles = makeStyles()(theme => ({
   search: {
     justifyContent: 'center',
     display: 'flex',
-    transition: 'all 0.1s ease',
     [`& .${textFieldClasses.root}`]: {
       width: 220,
       maxWidth: 640,
+      transition: 'width 0.1s ease',
       '&:focus-within': {
         width: '100%'
       }
     }
+  },
+  serviceProvider: {
+    gridTemplateColumns: '1fr max-content'
   }
 }));
 
@@ -199,20 +188,22 @@ const AccountMenu = ({ className }) => {
   return (
     <>
       <Button
-        className={`flexbox align-items-center ${className} ${classes.dropDown}`}
+        className={`flexbox align-items-center ${className} ${classes.accountButton}`}
         onClick={e => setAnchorEl(e.currentTarget)}
         startIcon={<AccountCircleIcon />}
         variant="text"
       >
-        {email}
+        <Typography variant="subtitle2" className="text-overflow">
+          {email}
+        </Typography>
       </Button>
       <Menu
         anchorEl={anchorEl}
-        className={classes.dropDown}
         onClose={handleClose}
         open={Boolean(anchorEl)}
         anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
         transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+        slotProps={{ paper: { className: classes.menuPaper } }}
       >
         <MenuItem component={RouterLink} to="/settings/my-profile" onClick={handleClose}>
           My profile
@@ -230,7 +221,7 @@ const AccountMenu = ({ className }) => {
         )}
         {tenants.length > 1 && (
           <div>
-            <Divider style={{ marginBottom: 0 }} />
+            <Divider className="margin-bottom-none" />
             <Accordion
               className={`padding-left-none padding-right-none ${classes.accordion}`}
               disableGutters
@@ -384,7 +375,7 @@ export const Header = ({ isDarkMode }) => {
         />
       )}
       {showOffer && <OfferHeader onHide={setHideOffer} />}
-      <Toolbar className={`${classes.header} ${isSp ? 'service-provider' : ''}`}>
+      <Toolbar className={`${classes.header} ${isSp ? classes.serviceProvider : ''}`}>
         <div className="flexbox align-items-center">
           <Link to="/">
             <img id="logo" src={headerLogo} />
@@ -392,21 +383,19 @@ export const Header = ({ isDarkMode }) => {
           {organization.trial && <TrialNotification expiration={organization.trial_expiration} sectionClassName={classes.demoTrialAnnouncement} />}
         </div>
         {isSp ? (
-          <>
-            <div className="flexbox align-items-center">
-              <Chip label="Service Provider" />
-              <Divider className={`margin-left-small margin-right-small ${classes.headerSection}`} orientation="vertical" />
-              <AccountMenu className={classes.headerSection} />
-            </div>
-          </>
+          <div className="flexbox align-items-center">
+            <Chip label="Service Provider" />
+            <Divider className={`margin-left-small margin-right-small ${classes.headerSection}`} orientation="vertical" />
+            <AccountMenu className={classes.headerSection} />
+          </div>
         ) : (
           <>
             <Search className={classes.search} searchTerm={searchTerm} onSearch={onSearch} trigger={refreshTrigger} />
-            <div className={`flexbox align-items-center`}>
+            <div className="flexbox align-items-center">
               <DeviceNotifications pending={pendingDevices} total={acceptedDevices} />
-              <Divider className={`margin-left-small margin-right-small ${classes.headerSection}`} orientation="vertical" />
-              <DeploymentNotifications className={classes.headerSection} inprogress={inProgress} />
-              <Divider className={`margin-left-small margin-right-small ${classes.headerSection}`} orientation="vertical" />
+              <Divider className={`margin-left-x-small margin-right-x-small ${classes.divider}`} orientation="vertical" />
+              <DeploymentNotifications inprogress={inProgress} />
+              <Divider className={`margin-left-x-small margin-right-x-small ${classes.divider}`} orientation="vertical" />
               <AccountMenu className={classes.headerSection} />
             </div>
           </>
diff --git a/frontend/src/js/components/header/__snapshots__/DeploymentNotifications.test.tsx.snap b/frontend/src/js/components/header/__snapshots__/DeploymentNotifications.test.tsx.snap
index 53728f086..efbfacf3d 100644
--- a/frontend/src/js/components/header/__snapshots__/DeploymentNotifications.test.tsx.snap
+++ b/frontend/src/js/components/header/__snapshots__/DeploymentNotifications.test.tsx.snap
@@ -2,23 +2,118 @@
 
 exports[`DeploymentNotifications Component > renders correctly 1`] = `
 .emotion-0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
   margin: 0;
-  font: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  color: #1976d2;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  text-decoration-color: var(--Link-underlineColor);
-  --Link-underlineColor: rgba(25, 118, 210, 0.4);
-  color: rgba(0, 0, 0, 0.6);
+  border-radius: 0;
+  padding: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: inherit;
+  font-family: "Roboto","Helvetica","Arial",sans-serif;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.75;
+  letter-spacing: 0.02857em;
+  text-transform: uppercase;
+  min-width: 64px;
+  padding: 6px 16px;
+  border: 0;
+  border-radius: 4px;
+  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  padding: 6px 8px;
+  color: var(--variant-textColor);
+  background-color: var(--variant-textBg);
+  color: inherit;
+  border-color: currentColor;
+  --variant-containedBg: #e0e0e0;
+  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.emotion-0::-moz-focus-inner {
+  border-style: none;
+}
+
+.emotion-0.Mui-disabled {
+  pointer-events: none;
+  cursor: default;
+}
+
+@media print {
+  .emotion-0 {
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+  }
 }
 
 .emotion-0:hover {
-  text-decoration-color: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-0.Mui-disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+@media (hover: hover) {
+  .emotion-0:hover {
+    --variant-containedBg: #f5f5f5;
+    --variant-textBg: rgba(0, 0, 0, 0.04);
+    --variant-outlinedBg: rgba(0, 0, 0, 0.04);
+  }
+}
+
+.emotion-0.MuiButton-loading {
+  color: transparent;
 }
 
 .emotion-1 {
+  display: inherit;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-right: 8px;
+  margin-left: -4px;
+}
+
+.emotion-1::before {
+  content: "\\200b";
+  width: 0;
+  overflow: hidden;
+}
+
+.emotion-1>*:nth-of-type(1) {
+  font-size: 20px;
+}
+
+.emotion-2 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -35,33 +130,28 @@ exports[`DeploymentNotifications Component > renders correctly 1`] = `
   font-size: 1.25rem;
 }
 
-.emotion-2 {
-  margin: 0;
-  font-family: "Roboto","Helvetica","Arial",sans-serif;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.57;
-  letter-spacing: 0.00714em;
-}
-
 <a
-  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways flexbox align-items-center emotion-0"
+  aria-label="Deployments in progress"
+  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-sizeMedium MuiButton-colorInherit emotion-0"
   data-discover="true"
+  data-mui-internal-clone-element="true"
   href="/deployments/active"
+  tabindex="0"
 >
-  <svg
-    aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall flip-horizontal margin-right-x-small emotion-1"
-    data-testid="SyncIcon"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <span
+    class="MuiButton-icon MuiButton-startIcon emotion-1"
   >
-    <path
-      d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8m0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4z"
-    />
-  </svg>
-  <h6
-    class="MuiTypography-root MuiTypography-subtitle2 emotion-2"
-  />
+    <svg
+      aria-hidden="true"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall emotion-2"
+      data-testid="SyncOutlinedIcon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8m0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4z"
+      />
+    </svg>
+  </span>
 </a>
 `;
diff --git a/frontend/src/js/components/header/__snapshots__/DeviceNotifications.test.tsx.snap b/frontend/src/js/components/header/__snapshots__/DeviceNotifications.test.tsx.snap
index 4e5937c9f..7b39e6c06 100644
--- a/frontend/src/js/components/header/__snapshots__/DeviceNotifications.test.tsx.snap
+++ b/frontend/src/js/components/header/__snapshots__/DeviceNotifications.test.tsx.snap
@@ -847,7 +847,7 @@ exports[`DeviceNotifications Component > renders correctly 1`] = `
   class=""
 >
   <div
-    aria-label="View device limits"
+    aria-label="View device count and limits"
     class=""
     data-mui-internal-clone-element="true"
   >
@@ -1145,7 +1145,7 @@ exports[`DeviceNotifications Component > renders correctly at limit 1`] = `
   class=""
 >
   <div
-    aria-label="View device limits"
+    aria-label="View device count and limits"
     class=""
     data-mui-internal-clone-element="true"
   >
@@ -1443,7 +1443,7 @@ exports[`DeviceNotifications Component > renders correctly close to limits 1`] =
   class=""
 >
   <div
-    aria-label="View device limits"
+    aria-label="View device count and limits"
     class=""
     data-mui-internal-clone-element="true"
   >
@@ -1737,7 +1737,7 @@ exports[`DeviceNotifications Component > renders correctly with limits 1`] = `
   class=""
 >
   <div
-    aria-label="View device limits"
+    aria-label="View device count and limits"
     class=""
     data-mui-internal-clone-element="true"
   >
@@ -2031,7 +2031,7 @@ exports[`DeviceNotifications Component > renders correctly without limits 1`] =
   class=""
 >
   <div
-    aria-label="View device limits"
+    aria-label="View device count and limits"
     class=""
     data-mui-internal-clone-element="true"
   >