diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index b6b7af587..08899173e 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -18,17 +18,12 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v2
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
         with:
-          node-version: 12
-
-      # ESLint and Prettier must be in `package.json`
-      - name: Install Node.js dependencies
-        run: yarn --frozen-lockfile
+          node-version: '14'
+          cache: 'yarn'
+      - run: yarn --frozen-lockfile
 
       - name: Run linters
         uses: wearerequired/lint-action@v1
diff --git a/.github/workflows/test-client.yaml b/.github/workflows/test-client.yaml
index 139574b1b..085a7512e 100644
--- a/.github/workflows/test-client.yaml
+++ b/.github/workflows/test-client.yaml
@@ -1,11 +1,15 @@
 name: Test Frontend
 on: push
 jobs:
-  build:
+  test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Install modules
-        run: yarn --frozen-lockfile
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+          cache: 'yarn'
+      - run: yarn install --frozen-lockfile
+
       - name: Run tests
         run: yarn test:client
diff --git a/api/http/handler/endpoints/endpoint_list.go b/api/http/handler/endpoints/endpoint_list.go
index 00107278c..ddede499f 100644
--- a/api/http/handler/endpoints/endpoint_list.go
+++ b/api/http/handler/endpoints/endpoint_list.go
@@ -80,6 +80,7 @@ func (handler *Handler) endpointList(w http.ResponseWriter, r *http.Request) *ht
 	}
 
 	filteredEndpoints := security.FilterEndpoints(endpoints, endpointGroups, securityContext)
+	totalAvailableEndpoints := len(filteredEndpoints)
 
 	if endpointIDs != nil {
 		filteredEndpoints = filteredEndpointsByIds(filteredEndpoints, endpointIDs)
@@ -127,6 +128,7 @@ func (handler *Handler) endpointList(w http.ResponseWriter, r *http.Request) *ht
 	}
 
 	w.Header().Set("X-Total-Count", strconv.Itoa(filteredEndpointCount))
+	w.Header().Set("X-Total-Available", strconv.Itoa(totalAvailableEndpoints))
 	return response.JSON(w, paginatedEndpoints)
 }
 
diff --git a/app/__mocks__/axios-progress-bar.ts b/app/__mocks__/axios-progress-bar.ts
new file mode 100644
index 000000000..2b3d7f6b4
--- /dev/null
+++ b/app/__mocks__/axios-progress-bar.ts
@@ -0,0 +1 @@
+export function loadProgressBar() {}
diff --git a/app/app.js b/app/app.js
index 10996f0d8..0443e8ddf 100644
--- a/app/app.js
+++ b/app/app.js
@@ -38,7 +38,7 @@ export function onStartupAngular($rootScope, $state, $interval, LocalStorage, En
 
 function ping(EndpointProvider, SystemService) {
   const endpoint = EndpointProvider.currentEndpoint();
-  if (endpoint !== undefined && endpoint.Type == PortainerEndpointTypes.EdgeAgentOnDockerEnvironment) {
+  if (endpoint && endpoint.Type == PortainerEndpointTypes.EdgeAgentOnDockerEnvironment) {
     SystemService.ping(endpoint.Id);
   }
 }
diff --git a/app/assets/css/app.css b/app/assets/css/app.css
index 158289a19..f014936e2 100644
--- a/app/assets/css/app.css
+++ b/app/assets/css/app.css
@@ -375,10 +375,6 @@ a[ng-click] {
   background-color: var(--white-color) fff;
 }
 
-.pagination-controls {
-  margin-left: 10px;
-}
-
 .user-box {
   margin-right: 25px;
 }
@@ -832,6 +828,18 @@ json-tree .branch-preview {
   align-items: center;
 }
 
+.space-x-2 > * + * {
+  margin-left: 0.5rem;
+}
+
+.space-x-3 > * + * {
+  margin-left: 0.75rem;
+}
+
+.space-x-4 > * + * {
+  margin-left: 1rem;
+}
+
 .space-y-8 > * + * {
   margin-top: 2rem;
 }
diff --git a/app/assets/css/vendor-override.css b/app/assets/css/vendor-override.css
index 646c4fcf2..65adf7942 100644
--- a/app/assets/css/vendor-override.css
+++ b/app/assets/css/vendor-override.css
@@ -222,33 +222,6 @@ json-tree .branch-preview {
   background-color: var(--bg-progress-color);
 }
 
-.pagination > .disabled > span,
-.pagination > .disabled > span:hover,
-.pagination > .disabled > span:focus,
-.pagination > .disabled > a,
-.pagination > .disabled > a:hover,
-.pagination > .disabled > a:focus {
-  color: var(--text-pagination-color);
-  background-color: var(--bg-pagination-color);
-  border-color: var(--border-pagination-color);
-}
-
-.pagination > li > a,
-.pagination > li > span {
-  background-color: var(--bg-pagination-span-color);
-  border-color: var(--border-pagination-span-color);
-  color: var(--text-pagination-span-color);
-}
-
-.pagination > li > a:hover,
-.pagination > li > span:hover,
-.pagination > li > a:focus,
-.pagination > li > span:focus {
-  background-color: var(--bg-pagination-hover-color);
-  border-color: var(--border-pagination-hover-color);
-  color: var(--text-pagination-span-hover-color);
-}
-
 .ui-select-bootstrap .ui-select-choices-row > span {
   color: var(--text-ui-select-color);
 }
diff --git a/app/docker/containers/components/ContainersDatatable/ContainersDatatable.tsx b/app/docker/containers/components/ContainersDatatable/ContainersDatatable.tsx
index 0e8ef9cdf..09beab68b 100644
--- a/app/docker/containers/components/ContainersDatatable/ContainersDatatable.tsx
+++ b/app/docker/containers/components/ContainersDatatable/ContainersDatatable.tsx
@@ -30,8 +30,8 @@ import { ColumnVisibilityMenu } from '@/portainer/components/datatables/componen
 import { useRepeater } from '@/portainer/components/datatables/components/useRepeater';
 import { useDebounce } from '@/portainer/hooks/useDebounce';
 import {
-  useSearchBarContext,
   SearchBar,
+  useSearchBarState,
 } from '@/portainer/components/datatables/components/SearchBar';
 import type {
   ContainersTableSettings,
@@ -63,7 +63,7 @@ export function ContainersDatatable({
 }: ContainerTableProps) {
   const { settings, setTableSettings } =
     useTableSettings<ContainersTableSettings>();
-  const [searchBarValue, setSearchBarValue] = useSearchBarContext();
+  const [searchBarValue, setSearchBarValue] = useSearchBarState('containers');
 
   const columns = useColumns();
 
diff --git a/app/docker/containers/components/ContainersDatatable/ContainersDatatableContainer.tsx b/app/docker/containers/components/ContainersDatatable/ContainersDatatableContainer.tsx
index 3b2dae099..03dbc678b 100644
--- a/app/docker/containers/components/ContainersDatatable/ContainersDatatableContainer.tsx
+++ b/app/docker/containers/components/ContainersDatatable/ContainersDatatableContainer.tsx
@@ -1,7 +1,6 @@
 import { react2angular } from '@/react-tools/react2angular';
 import { EnvironmentProvider } from '@/portainer/environments/useEnvironment';
 import { TableSettingsProvider } from '@/portainer/components/datatables/components/useTableSettings';
-import { SearchBarProvider } from '@/portainer/components/datatables/components/SearchBar';
 import type { Environment } from '@/portainer/environments/types';
 
 import {
@@ -30,10 +29,8 @@ export function ContainersDatatableContainer({
   return (
     <EnvironmentProvider environment={endpoint}>
       <TableSettingsProvider defaults={defaultSettings} storageKey={tableKey}>
-        <SearchBarProvider storageKey={tableKey}>
-          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-          <ContainersDatatable {...props} />
-        </SearchBarProvider>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <ContainersDatatable {...props} />
       </TableSettingsProvider>
     </EnvironmentProvider>
   );
diff --git a/app/edge/devices/components/EdgeDevicesDatatable/EdgeDevicesDatatable.tsx b/app/edge/devices/components/EdgeDevicesDatatable/EdgeDevicesDatatable.tsx
index 01dbd97a6..33476e8da 100644
--- a/app/edge/devices/components/EdgeDevicesDatatable/EdgeDevicesDatatable.tsx
+++ b/app/edge/devices/components/EdgeDevicesDatatable/EdgeDevicesDatatable.tsx
@@ -8,6 +8,7 @@ import {
   usePagination,
 } from 'react-table';
 import { useRowSelectColumn } from '@lineup-lite/hooks';
+import _ from 'lodash';
 
 import { Environment } from '@/portainer/environments/types';
 import { PaginationControls } from '@/portainer/components/pagination-controls';
@@ -27,7 +28,7 @@ import { ColumnVisibilityMenu } from '@/portainer/components/datatables/componen
 import { useRepeater } from '@/portainer/components/datatables/components/useRepeater';
 import { useDebounce } from '@/portainer/hooks/useDebounce';
 import {
-  useSearchBarContext,
+  useSearchBarState,
   SearchBar,
 } from '@/portainer/components/datatables/components/SearchBar';
 import { useRowSelect } from '@/portainer/components/datatables/components/useRowSelect';
@@ -38,34 +39,39 @@ import { EdgeDevicesDatatableSettings } from '@/edge/devices/components/EdgeDevi
 import { EdgeDevicesDatatableActions } from '@/edge/devices/components/EdgeDevicesDatatable/EdgeDevicesDatatableActions';
 import { AMTDevicesDatatable } from '@/edge/devices/components/AMTDevicesDatatable/AMTDevicesDatatable';
 import { TextTip } from '@/portainer/components/Tip/TextTip';
+import { EnvironmentGroup } from '@/portainer/environment-groups/types';
 
 import { RowProvider } from './columns/RowContext';
 import { useColumns } from './columns';
 import styles from './EdgeDevicesDatatable.module.css';
 
 export interface EdgeDevicesTableProps {
+  storageKey: string;
   isEnabled: boolean;
   isFdoEnabled: boolean;
   isOpenAmtEnabled: boolean;
   disableTrustOnFirstConnect: boolean;
   mpsServer: string;
   dataset: Environment[];
+  groups: EnvironmentGroup[];
   onRefresh(): Promise<void>;
   setLoadingMessage(message: string): void;
 }
 
 export function EdgeDevicesDatatable({
+  storageKey,
   isFdoEnabled,
   isOpenAmtEnabled,
   disableTrustOnFirstConnect,
   mpsServer,
   dataset,
+  groups,
   onRefresh,
   setLoadingMessage,
 }: EdgeDevicesTableProps) {
   const { settings, setTableSettings } =
     useTableSettings<EdgeDeviceTableSettings>();
-  const [searchBarValue, setSearchBarValue] = useSearchBarContext();
+  const [searchBarValue, setSearchBarValue] = useSearchBarState(storageKey);
 
   const columns = useColumns();
 
@@ -131,6 +137,8 @@ export function EdgeDevicesDatatable({
       environment.AMTDeviceGUID && environment.AMTDeviceGUID !== ''
   );
 
+  const groupsById = _.groupBy(groups, 'Id');
+
   return (
     <TableContainer>
       <TableTitle icon="fa-plug" label="Edge Devices">
@@ -201,12 +209,13 @@ export function EdgeDevicesDatatable({
           {page.map((row) => {
             prepareRow(row);
             const { key, className, role, style } = row.getRowProps();
-
+            const group = groupsById[row.original.GroupId];
             return (
               <RowProvider
                 key={key}
                 disableTrustOnFirstConnect={disableTrustOnFirstConnect}
                 isOpenAmtEnabled={isOpenAmtEnabled}
+                groupName={group[0]?.Name}
               >
                 <TableRow<Environment>
                   cells={row.cells}
diff --git a/app/edge/devices/components/EdgeDevicesDatatable/EdgeDevicesDatatableContainer.tsx b/app/edge/devices/components/EdgeDevicesDatatable/EdgeDevicesDatatableContainer.tsx
index 83d28db75..0fde89a25 100644
--- a/app/edge/devices/components/EdgeDevicesDatatable/EdgeDevicesDatatableContainer.tsx
+++ b/app/edge/devices/components/EdgeDevicesDatatable/EdgeDevicesDatatableContainer.tsx
@@ -1,6 +1,5 @@
 import { react2angular } from '@/react-tools/react2angular';
 import { TableSettingsProvider } from '@/portainer/components/datatables/components/useTableSettings';
-import { SearchBarProvider } from '@/portainer/components/datatables/components/SearchBar';
 
 import {
   EdgeDevicesDatatable,
@@ -18,12 +17,12 @@ export function EdgeDevicesDatatableContainer({
     sortBy: { id: 'state', desc: false },
   };
 
+  const storageKey = 'edgeDevices';
+
   return (
-    <TableSettingsProvider defaults={defaultSettings} storageKey="edgeDevices">
-      <SearchBarProvider storageKey="edgeDevices">
-        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-        <EdgeDevicesDatatable {...props} />
-      </SearchBarProvider>
+    <TableSettingsProvider defaults={defaultSettings} storageKey={storageKey}>
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      <EdgeDevicesDatatable {...props} storageKey={storageKey} />
     </TableSettingsProvider>
   );
 }
@@ -31,6 +30,7 @@ export function EdgeDevicesDatatableContainer({
 export const EdgeDevicesDatatableAngular = react2angular(
   EdgeDevicesDatatableContainer,
   [
+    'groups',
     'dataset',
     'onRefresh',
     'setLoadingMessage',
diff --git a/app/edge/devices/components/EdgeDevicesDatatable/columns/RowContext.tsx b/app/edge/devices/components/EdgeDevicesDatatable/columns/RowContext.tsx
index bd81f0e89..808a1bb6c 100644
--- a/app/edge/devices/components/EdgeDevicesDatatable/columns/RowContext.tsx
+++ b/app/edge/devices/components/EdgeDevicesDatatable/columns/RowContext.tsx
@@ -3,23 +3,26 @@ import { createContext, useContext, useMemo, PropsWithChildren } from 'react';
 interface RowContextState {
   disableTrustOnFirstConnect: boolean;
   isOpenAmtEnabled: boolean;
+  groupName?: string;
 }
 
 const RowContext = createContext<RowContextState | null>(null);
 
 export interface RowProviderProps {
   disableTrustOnFirstConnect: boolean;
+  groupName?: string;
   isOpenAmtEnabled: boolean;
 }
 
 export function RowProvider({
   disableTrustOnFirstConnect,
+  groupName,
   isOpenAmtEnabled,
   children,
 }: PropsWithChildren<RowProviderProps>) {
   const state = useMemo(
-    () => ({ disableTrustOnFirstConnect, isOpenAmtEnabled }),
-    [disableTrustOnFirstConnect, isOpenAmtEnabled]
+    () => ({ disableTrustOnFirstConnect, groupName, isOpenAmtEnabled }),
+    [disableTrustOnFirstConnect, groupName, isOpenAmtEnabled]
   );
 
   return <RowContext.Provider value={state}>{children}</RowContext.Provider>;
diff --git a/app/edge/devices/components/EdgeDevicesDatatable/columns/group.tsx b/app/edge/devices/components/EdgeDevicesDatatable/columns/group.tsx
index 194caab3b..d876d2116 100644
--- a/app/edge/devices/components/EdgeDevicesDatatable/columns/group.tsx
+++ b/app/edge/devices/components/EdgeDevicesDatatable/columns/group.tsx
@@ -3,10 +3,19 @@ import { Column } from 'react-table';
 import { Environment } from '@/portainer/environments/types';
 import { DefaultFilter } from '@/portainer/components/datatables/components/Filter';
 
+import { useRowContext } from './RowContext';
+
 export const group: Column<Environment> = {
   Header: 'Group',
-  accessor: (row) => row.GroupName || '-',
+  accessor: (row) => row.GroupId,
+  Cell: GroupCell,
   id: 'groupName',
   Filter: DefaultFilter,
   canHide: true,
 };
+
+function GroupCell() {
+  const { groupName } = useRowContext();
+
+  return groupName;
+}
diff --git a/app/edge/views/edge-devices/edgeDevicesView/edgeDevicesView.html b/app/edge/views/edge-devices/edgeDevicesView/edgeDevicesView.html
index ae55a784b..752b76d81 100644
--- a/app/edge/views/edge-devices/edgeDevicesView/edgeDevicesView.html
+++ b/app/edge/views/edge-devices/edgeDevicesView/edgeDevicesView.html
@@ -28,6 +28,7 @@
   <div class="col-sm-12">
     <edge-devices-datatable
       dataset="($ctrl.edgeDevices)"
+      groups="($ctrl.groups)"
       is-fdo-enabled="($ctrl.isFDOEnabled)"
       is-open-amt-enabled="($ctrl.isOpenAMTEnabled)"
       disable-trust-on-first-connect="($ctrl.disableTrustOnFirstConnect)"
diff --git a/app/edge/views/edge-devices/edgeDevicesView/edgeDevicesViewController.js b/app/edge/views/edge-devices/edgeDevicesView/edgeDevicesViewController.js
index 5e5564f03..2a09d477e 100644
--- a/app/edge/views/edge-devices/edgeDevicesView/edgeDevicesViewController.js
+++ b/app/edge/views/edge-devices/edgeDevicesView/edgeDevicesViewController.js
@@ -1,4 +1,3 @@
-import EndpointHelper from 'Portainer/helpers/endpointHelper';
 import { getEndpoints } from 'Portainer/environments/environment.service';
 import { EnvironmentType } from 'Portainer/environments/types';
 
@@ -13,7 +12,7 @@ export function EdgeDevicesViewController($q, $async, EndpointService, GroupServ
     return $async(async () => {
       try {
         const [endpointsResponse, groups] = await Promise.all([getEndpoints(0, 100, { types: [EnvironmentType.EdgeAgentOnDocker] }), GroupService.groups()]);
-        EndpointHelper.mapGroupNameToEndpoint(endpointsResponse.value, groups);
+        ctrl.groups = groups;
         ctrl.edgeDevices = endpointsResponse.value;
       } catch (err) {
         Notifications.error('Failure', err, 'Unable to retrieve edge devices');
diff --git a/app/kubernetes/components/datatables/resource-pools-datatable/resourcePoolsDatatable.js b/app/kubernetes/components/datatables/resource-pools-datatable/resourcePoolsDatatable.js
index 520b50a8a..aacd0c3c4 100644
--- a/app/kubernetes/components/datatables/resource-pools-datatable/resourcePoolsDatatable.js
+++ b/app/kubernetes/components/datatables/resource-pools-datatable/resourcePoolsDatatable.js
@@ -2,6 +2,7 @@ angular.module('portainer.kubernetes').component('kubernetesResourcePoolsDatatab
   templateUrl: './resourcePoolsDatatable.html',
   controller: 'KubernetesResourcePoolsDatatableController',
   bindings: {
+    endpoint: '<',
     titleText: '@',
     titleIcon: '@',
     dataset: '<',
@@ -10,6 +11,5 @@ angular.module('portainer.kubernetes').component('kubernetesResourcePoolsDatatab
     reverseOrder: '<',
     removeAction: '<',
     refreshCallback: '<',
-    endpoint: '<',
   },
 });
diff --git a/app/kubernetes/components/helm/helm-templates/helm-add-repository/helm-add-repository.controller.js b/app/kubernetes/components/helm/helm-templates/helm-add-repository/helm-add-repository.controller.js
index ac9ba546f..f8c762a87 100644
--- a/app/kubernetes/components/helm/helm-templates/helm-add-repository/helm-add-repository.controller.js
+++ b/app/kubernetes/components/helm/helm-templates/helm-add-repository/helm-add-repository.controller.js
@@ -1,11 +1,10 @@
 export default class HelmAddRepositoryController {
   /* @ngInject */
-  constructor($state, $async, HelmService, Notifications, EndpointProvider) {
+  constructor($state, $async, HelmService, Notifications) {
     this.$state = $state;
     this.$async = $async;
     this.HelmService = HelmService;
     this.Notifications = Notifications;
-    this.EndpointProvider = EndpointProvider;
   }
 
   doesRepoExist() {
@@ -19,7 +18,7 @@ export default class HelmAddRepositoryController {
   async addRepository() {
     this.state.isAddingRepo = true;
     try {
-      await this.HelmService.addHelmRepository(this.EndpointProvider.currentEndpoint().Id, { url: this.state.repository });
+      await this.HelmService.addHelmRepository(this.endpoint.Id, { url: this.state.repository });
       this.Notifications.success('Helm repository added successfully');
       this.$state.reload(this.$state.current);
     } catch (err) {
diff --git a/app/kubernetes/components/helm/helm-templates/helm-templates.html b/app/kubernetes/components/helm/helm-templates/helm-templates.html
index 3ccc2ead0..389ad54d3 100644
--- a/app/kubernetes/components/helm/helm-templates/helm-templates.html
+++ b/app/kubernetes/components/helm/helm-templates/helm-templates.html
@@ -146,7 +146,7 @@
 
 <div class="row">
   <div class="col-sm-12">
-    <helm-add-repository repos="$ctrl.state.repos"></helm-add-repository>
+    <helm-add-repository repos="$ctrl.state.repos" endpoint="$ctrl.endpoint"></helm-add-repository>
   </div>
 </div>
 
diff --git a/app/kubernetes/rest/kubeconfig.js b/app/kubernetes/rest/kubeconfig.js
deleted file mode 100644
index 5db0930ca..000000000
--- a/app/kubernetes/rest/kubeconfig.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import angular from 'angular';
-
-angular.module('portainer.kubernetes').factory('KubernetesConfig', KubernetesConfigFactory);
-
-/* @ngInject */
-function KubernetesConfigFactory($http, EndpointProvider, API_ENDPOINT_KUBERNETES) {
-  return { get };
-
-  async function get(environmentIDs) {
-    return $http({
-      method: 'GET',
-      url: `${API_ENDPOINT_KUBERNETES}/config`,
-      params: { ids: JSON.stringify(environmentIDs.map((x) => parseInt(x))) },
-      responseType: 'blob',
-      headers: {
-        Accept: 'text/yaml',
-      },
-    });
-  }
-}
diff --git a/app/kubernetes/services/kubeconfig.service.ts b/app/kubernetes/services/kubeconfig.service.ts
new file mode 100644
index 000000000..92e8cfd99
--- /dev/null
+++ b/app/kubernetes/services/kubeconfig.service.ts
@@ -0,0 +1,43 @@
+import { saveAs } from 'file-saver';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/portainer/environments/types';
+import { publicSettings } from '@/portainer/settings/settings.service';
+
+const baseUrl = 'kubernetes';
+
+export async function downloadKubeconfigFile(environmentIds: EnvironmentId[]) {
+  try {
+    const { headers, data } = await axios.get<Blob>(`${baseUrl}/config`, {
+      params: { ids: JSON.stringify(environmentIds) },
+      responseType: 'blob',
+      headers: {
+        Accept: 'text/yaml',
+      },
+    });
+    const contentDispositionHeader = headers['content-disposition'];
+    const filename = contentDispositionHeader.replace('attachment;', '').trim();
+    saveAs(data, filename);
+  } catch (e) {
+    throw parseAxiosError(e as Error, '');
+  }
+}
+
+export async function expiryMessage() {
+  const settings = await publicSettings();
+
+  const prefix = 'Kubeconfig file will';
+  switch (settings.KubeconfigExpiry) {
+    case '24h':
+      return `${prefix} expire in 1 day.`;
+    case '168h':
+      return `${prefix} expire in 7 days.`;
+    case '720h':
+      return `${prefix} expire in 30 days.`;
+    case '8640h':
+      return `${prefix} expire in 1 year.`;
+    case '0':
+    default:
+      return `${prefix} not expire.`;
+  }
+}
diff --git a/app/kubernetes/services/kubeconfigService.js b/app/kubernetes/services/kubeconfigService.js
deleted file mode 100644
index ed277bc6e..000000000
--- a/app/kubernetes/services/kubeconfigService.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import angular from 'angular';
-
-class KubernetesConfigService {
-  /* @ngInject */
-  constructor(KubernetesConfig, FileSaver, SettingsService) {
-    this.KubernetesConfig = KubernetesConfig;
-    this.FileSaver = FileSaver;
-    this.SettingsService = SettingsService;
-  }
-
-  async downloadKubeconfigFile(environmentIDs) {
-    const response = await this.KubernetesConfig.get(environmentIDs);
-    const headers = response.headers();
-    const contentDispositionHeader = headers['content-disposition'];
-    const filename = contentDispositionHeader.replace('attachment;', '').trim();
-    return this.FileSaver.saveAs(response.data, filename);
-  }
-
-  async expiryMessage() {
-    const settings = await this.SettingsService.publicSettings();
-    const expiryDays = settings.KubeconfigExpiry;
-    const prefix = 'Kubeconfig file will ';
-    switch (expiryDays) {
-      case '0':
-        return prefix + 'not expire.';
-      case '24h':
-        return prefix + 'expire in 1 day.';
-      case '168h':
-        return prefix + 'expire in 7 days.';
-      case '720h':
-        return prefix + 'expire in 30 days.';
-      case '8640h':
-        return prefix + 'expire in 1 year.';
-    }
-    return '';
-  }
-}
-
-export default KubernetesConfigService;
-angular.module('portainer.kubernetes').service('KubernetesConfigService', KubernetesConfigService);
diff --git a/app/kubernetes/services/persistentVolumeClaimService.js b/app/kubernetes/services/persistentVolumeClaimService.js
index a19fcdf0d..e95c6d1b8 100644
--- a/app/kubernetes/services/persistentVolumeClaimService.js
+++ b/app/kubernetes/services/persistentVolumeClaimService.js
@@ -6,9 +6,8 @@ import { KubernetesCommonParams } from 'Kubernetes/models/common/params';
 
 class KubernetesPersistentVolumeClaimService {
   /* @ngInject */
-  constructor($async, EndpointProvider, KubernetesPersistentVolumeClaims) {
+  constructor($async, KubernetesPersistentVolumeClaims) {
     this.$async = $async;
-    this.EndpointProvider = EndpointProvider;
     this.KubernetesPersistentVolumeClaims = KubernetesPersistentVolumeClaims;
 
     this.getAsync = this.getAsync.bind(this);
@@ -18,7 +17,7 @@ class KubernetesPersistentVolumeClaimService {
     this.deleteAsync = this.deleteAsync.bind(this);
   }
 
-  async getAsync(namespace, name) {
+  async getAsync(namespace, storageClasses, name) {
     try {
       const params = new KubernetesCommonParams();
       params.id = name;
@@ -26,28 +25,28 @@ class KubernetesPersistentVolumeClaimService {
         this.KubernetesPersistentVolumeClaims(namespace).get(params).$promise,
         this.KubernetesPersistentVolumeClaims(namespace).getYaml(params).$promise,
       ]);
-      const storageClasses = this.EndpointProvider.currentEndpoint().Kubernetes.Configuration.StorageClasses;
+
       return KubernetesPersistentVolumeClaimConverter.apiToPersistentVolumeClaim(raw, storageClasses, yaml);
     } catch (err) {
       throw new PortainerError('Unable to retrieve persistent volume claim', err);
     }
   }
 
-  async getAllAsync(namespace) {
+  async getAllAsync(namespace, storageClasses) {
     try {
       const data = await this.KubernetesPersistentVolumeClaims(namespace).get().$promise;
-      const storageClasses = this.EndpointProvider.currentEndpoint().Kubernetes.Configuration.StorageClasses;
+
       return _.map(data.items, (item) => KubernetesPersistentVolumeClaimConverter.apiToPersistentVolumeClaim(item, storageClasses));
     } catch (err) {
       throw new PortainerError('Unable to retrieve persistent volume claims', err);
     }
   }
 
-  get(namespace, name) {
+  get(namespace, storageClasses, name) {
     if (name) {
-      return this.$async(this.getAsync, namespace, name);
+      return this.$async(this.getAsync, namespace, storageClasses, name);
     }
-    return this.$async(this.getAllAsync, namespace);
+    return this.$async(this.getAllAsync, namespace, storageClasses);
   }
 
   /**
diff --git a/app/kubernetes/services/volumeService.js b/app/kubernetes/services/volumeService.js
index 7b00aa6e2..916b91968 100644
--- a/app/kubernetes/services/volumeService.js
+++ b/app/kubernetes/services/volumeService.js
@@ -19,28 +19,28 @@ class KubernetesVolumeService {
   /**
    * GET
    */
-  async getAsync(namespace, name) {
-    const [pvc, pool] = await Promise.all([this.KubernetesPersistentVolumeClaimService.get(namespace, name), this.KubernetesResourcePoolService.get(namespace)]);
+  async getAsync(namespace, storageClasses, name) {
+    const [pvc, pool] = await Promise.all([this.KubernetesPersistentVolumeClaimService.get(namespace, storageClasses, name), this.KubernetesResourcePoolService.get(namespace)]);
     return KubernetesVolumeConverter.pvcToVolume(pvc, pool);
   }
 
-  async getAllAsync(namespace) {
+  async getAllAsync(namespace, storageClasses) {
     const data = await this.KubernetesResourcePoolService.get(namespace);
     const pools = data instanceof Array ? data : [data];
     const res = await Promise.all(
       _.map(pools, async (pool) => {
-        const pvcs = await this.KubernetesPersistentVolumeClaimService.get(pool.Namespace.Name);
+        const pvcs = await this.KubernetesPersistentVolumeClaimService.get(pool.Namespace.Name, storageClasses);
         return _.map(pvcs, (pvc) => KubernetesVolumeConverter.pvcToVolume(pvc, pool));
       })
     );
     return _.flatten(res);
   }
 
-  get(namespace, name) {
+  get(namespace, storageClasses, name) {
     if (name) {
-      return this.$async(this.getAsync, namespace, name);
+      return this.$async(this.getAsync, namespace, storageClasses, name);
     }
-    return this.$async(this.getAllAsync, namespace);
+    return this.$async(this.getAllAsync, namespace, storageClasses);
   }
 
   /**
diff --git a/app/kubernetes/views/applications/create/createApplicationController.js b/app/kubernetes/views/applications/create/createApplicationController.js
index 15f41a3d9..911ceb561 100644
--- a/app/kubernetes/views/applications/create/createApplicationController.js
+++ b/app/kubernetes/views/applications/create/createApplicationController.js
@@ -932,7 +932,8 @@ class KubernetesCreateApplicationController {
   refreshVolumes(namespace) {
     return this.$async(async () => {
       try {
-        const volumes = await this.KubernetesVolumeService.get(namespace);
+        const storageClasses = this.endpoint.Kubernetes.Configuration.StorageClasses;
+        const volumes = await this.KubernetesVolumeService.get(namespace, storageClasses);
         _.forEach(volumes, (volume) => {
           volume.Applications = KubernetesVolumeHelper.getUsingApplications(volume, this.applications);
         });
@@ -1045,9 +1046,11 @@ class KubernetesCreateApplicationController {
     return this.$async(async () => {
       try {
         const namespace = this.$state.params.namespace;
+        const storageClasses = this.endpoint.Kubernetes.Configuration.StorageClasses;
+
         [this.application, this.persistentVolumeClaims] = await Promise.all([
           this.KubernetesApplicationService.get(namespace, this.$state.params.name),
-          this.KubernetesPersistentVolumeClaimService.get(namespace),
+          this.KubernetesPersistentVolumeClaimService.get(namespace, storageClasses),
         ]);
       } catch (err) {
         this.Notifications.error('Failure', err, 'Unable to retrieve application details');
diff --git a/app/kubernetes/views/applications/edit/applicationController.js b/app/kubernetes/views/applications/edit/applicationController.js
index c41950860..9d2c8b78f 100644
--- a/app/kubernetes/views/applications/edit/applicationController.js
+++ b/app/kubernetes/views/applications/edit/applicationController.js
@@ -348,12 +348,6 @@ class KubernetesApplicationController {
   }
 
   async onInit() {
-    const endpointId = this.LocalStorage.getEndpointID();
-    const endpoints = this.LocalStorage.getEndpoints();
-    const endpoint = _.find(endpoints, function (item) {
-      return item.Id === endpointId;
-    });
-
     this.state = {
       activeTab: 0,
       currentName: this.$state.$current.name,
@@ -372,7 +366,7 @@ class KubernetesApplicationController {
       expandedNote: false,
       useIngress: false,
       useServerMetrics: this.endpoint.Kubernetes.Configuration.UseServerMetrics,
-      publicUrl: endpoint.PublicURL,
+      publicUrl: this.endpoint.PublicURL,
     };
 
     this.state.activeTab = this.LocalStorage.getActiveTab('application');
diff --git a/app/kubernetes/views/dashboard/dashboardController.js b/app/kubernetes/views/dashboard/dashboardController.js
index 8ec79a0b4..d3ecc3183 100644
--- a/app/kubernetes/views/dashboard/dashboardController.js
+++ b/app/kubernetes/views/dashboard/dashboardController.js
@@ -33,13 +33,14 @@ class KubernetesDashboardController {
 
   async getAllAsync() {
     const isAdmin = this.Authentication.isAdmin();
+    const storageClasses = this.endpoint.Kubernetes.Configuration.StorageClasses;
 
     try {
       const [pools, applications, configurations, volumes, tags] = await Promise.all([
         this.KubernetesResourcePoolService.get(),
         this.KubernetesApplicationService.get(),
         this.KubernetesConfigurationService.get(),
-        this.KubernetesVolumeService.get(),
+        this.KubernetesVolumeService.get(undefined, storageClasses),
         this.TagService.tags(),
       ]);
       this.applications = applications;
diff --git a/app/kubernetes/views/resource-pools/resourcePools.html b/app/kubernetes/views/resource-pools/resourcePools.html
index 10043b953..b113a9b85 100644
--- a/app/kubernetes/views/resource-pools/resourcePools.html
+++ b/app/kubernetes/views/resource-pools/resourcePools.html
@@ -6,6 +6,7 @@
   <div class="row">
     <div class="col-sm-12">
       <kubernetes-resource-pools-datatable
+        endpoint="ctrl.endpoint"
         dataset="ctrl.resourcePools"
         table-key="kubernetes.resourcePools"
         order-by="Namespace.Name"
diff --git a/app/kubernetes/views/volumes/edit/volume.js b/app/kubernetes/views/volumes/edit/volume.js
index a3d850a65..d46ee39ea 100644
--- a/app/kubernetes/views/volumes/edit/volume.js
+++ b/app/kubernetes/views/volumes/edit/volume.js
@@ -4,5 +4,6 @@ angular.module('portainer.kubernetes').component('kubernetesVolumeView', {
   controllerAs: 'ctrl',
   bindings: {
     $transition$: '<',
+    endpoint: '<',
   },
 });
diff --git a/app/kubernetes/views/volumes/edit/volumeController.js b/app/kubernetes/views/volumes/edit/volumeController.js
index 0a6e77c51..09803bb5c 100644
--- a/app/kubernetes/views/volumes/edit/volumeController.js
+++ b/app/kubernetes/views/volumes/edit/volumeController.js
@@ -116,9 +116,10 @@ class KubernetesVolumeController {
   }
 
   async getVolumeAsync() {
+    const storageClasses = this.endpoint.Kubernetes.Configuration.StorageClasses;
     try {
       const [volume, applications] = await Promise.all([
-        this.KubernetesVolumeService.get(this.state.namespace, this.state.name),
+        this.KubernetesVolumeService.get(this.state.namespace, storageClasses, this.state.name),
         this.KubernetesApplicationService.get(this.state.namespace),
       ]);
       volume.Applications = KubernetesVolumeHelper.getUsingApplications(volume, applications);
diff --git a/app/kubernetes/views/volumes/volumesController.js b/app/kubernetes/views/volumes/volumesController.js
index dcf10856a..053f61357 100644
--- a/app/kubernetes/views/volumes/volumesController.js
+++ b/app/kubernetes/views/volumes/volumesController.js
@@ -71,9 +71,10 @@ class KubernetesVolumesController {
   }
 
   async getVolumesAsync() {
+    const storageClasses = this.endpoint.Kubernetes.Configuration.StorageClasses;
     try {
       const [volumes, applications, storages] = await Promise.all([
-        this.KubernetesVolumeService.get(),
+        this.KubernetesVolumeService.get(undefined, storageClasses),
         this.KubernetesApplicationService.get(),
         this.KubernetesStorageService.get(this.endpoint.Id),
       ]);
diff --git a/app/portainer/__module.js b/app/portainer/__module.js
index 933fe0f11..1a9e4e8aa 100644
--- a/app/portainer/__module.js
+++ b/app/portainer/__module.js
@@ -7,6 +7,7 @@ import featureFlagModule from './feature-flags';
 import userActivityModule from './user-activity';
 import servicesModule from './services';
 import teamsModule from './teams';
+import homeModule from './home';
 
 async function initAuthentication(authManager, Authentication, $rootScope, $state) {
   authManager.checkAuthOnRefresh();
@@ -25,6 +26,7 @@ async function initAuthentication(authManager, Authentication, $rootScope, $stat
 
 angular
   .module('portainer.app', [
+    homeModule,
     'portainer.oauth',
     'portainer.rbac',
     componentsModule,
@@ -74,7 +76,7 @@ angular
         parent: 'root',
         abstract: true,
         resolve: {
-          endpoint: /* @ngInject */ function endpoint($async, $state, $transition$, EndpointService, Notifications) {
+          endpoint: /* @ngInject */ function endpoint($async, $state, $transition$, EndpointProvider, EndpointService, Notifications) {
             return $async(async () => {
               try {
                 const endpointId = +$transition$.params().endpointId;
@@ -85,6 +87,8 @@ angular
                   return;
                 }
 
+                EndpointProvider.setCurrentEndpoint(endpoint);
+
                 return endpoint;
               } catch (e) {
                 Notifications.error('Failed loading environment', e);
@@ -322,8 +326,7 @@ angular
         url: '/home',
         views: {
           'content@': {
-            templateUrl: './views/home/home.html',
-            controller: 'HomeController',
+            component: 'homeView',
           },
         },
       };
diff --git a/app/portainer/components/Button/Button.tsx b/app/portainer/components/Button/Button.tsx
index 0c1b033af..ec6250430 100644
--- a/app/portainer/components/Button/Button.tsx
+++ b/app/portainer/components/Button/Button.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { MouseEventHandler, PropsWithChildren } from 'react';
 import clsx from 'clsx';
 
 type Type = 'submit' | 'button' | 'reset';
@@ -13,7 +13,7 @@ export interface Props {
   className?: string;
   dataCy?: string;
   type?: Type;
-  onClick?: () => void;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
 }
 
 export function Button({
diff --git a/app/portainer/components/Button/index.ts b/app/portainer/components/Button/index.ts
index 1ba16921f..216ec6bfc 100644
--- a/app/portainer/components/Button/index.ts
+++ b/app/portainer/components/Button/index.ts
@@ -3,5 +3,3 @@ import { AddButton } from './AddButton';
 import { ButtonGroup } from './ButtonGroup';
 
 export { Button, AddButton, ButtonGroup };
-
-export default Button;
diff --git a/app/portainer/components/InformationPanel/InformationPanel.tsx b/app/portainer/components/InformationPanel/InformationPanel.tsx
new file mode 100644
index 000000000..d38863cb4
--- /dev/null
+++ b/app/portainer/components/InformationPanel/InformationPanel.tsx
@@ -0,0 +1,47 @@
+import { PropsWithChildren } from 'react';
+
+import { Button } from '../Button';
+import { Widget, WidgetBody } from '../widget';
+
+interface Props {
+  title: string;
+  onDismiss?(): void;
+  bodyClassName?: string;
+  wrapperStyle?: Record<string, string>;
+}
+
+export function InformationPanel({
+  title,
+  onDismiss,
+  wrapperStyle,
+  bodyClassName,
+  children,
+}: PropsWithChildren<Props>) {
+  return (
+    <div className="row">
+      <div className="col-sm-12">
+        <Widget>
+          <WidgetBody className={bodyClassName}>
+            <div style={wrapperStyle}>
+              <div className="col-sm-12 form-section-title">
+                <span style={{ float: 'left' }}>{title}</span>
+                {!!onDismiss && (
+                  <span
+                    className="small"
+                    style={{ float: 'right' }}
+                    ng-if="dismissAction"
+                  >
+                    <Button color="link" onClick={() => onDismiss()}>
+                      <i className="fa fa-times" /> dismiss
+                    </Button>
+                  </span>
+                )}
+              </div>
+              <div className="form-group">{children}</div>
+            </div>
+          </WidgetBody>
+        </Widget>
+      </div>
+    </div>
+  );
+}
diff --git a/app/portainer/components/information-panel/informationPanel.html b/app/portainer/components/InformationPanel/InformationPanelAngular.html
similarity index 100%
rename from app/portainer/components/information-panel/informationPanel.html
rename to app/portainer/components/InformationPanel/InformationPanelAngular.html
diff --git a/app/portainer/components/InformationPanel/InformationPanelAngular.js b/app/portainer/components/InformationPanel/InformationPanelAngular.js
new file mode 100644
index 000000000..acbf9e7c1
--- /dev/null
+++ b/app/portainer/components/InformationPanel/InformationPanelAngular.js
@@ -0,0 +1,8 @@
+export const InformationPanelAngular = {
+  templateUrl: './InformationPanelAngular.html',
+  bindings: {
+    titleText: '@',
+    dismissAction: '&?',
+  },
+  transclude: true,
+};
diff --git a/app/portainer/components/InformationPanel/index.ts b/app/portainer/components/InformationPanel/index.ts
new file mode 100644
index 000000000..95218ede0
--- /dev/null
+++ b/app/portainer/components/InformationPanel/index.ts
@@ -0,0 +1,3 @@
+export { InformationPanel } from './InformationPanel';
+
+export { InformationPanelAngular } from './InformationPanelAngular';
diff --git a/app/portainer/components/PageHeader/HeaderContainer.css b/app/portainer/components/PageHeader/HeaderContainer.css
index 08bc8c123..921c89b7c 100644
--- a/app/portainer/components/PageHeader/HeaderContainer.css
+++ b/app/portainer/components/PageHeader/HeaderContainer.css
@@ -7,7 +7,7 @@ body.hamburg .row.header .meta {
 }
 
 .row.header {
-  height: 60px;
+  min-height: 60px;
   background: var(--bg-row-header-color);
   margin-bottom: 15px;
 }
diff --git a/app/portainer/components/PageHeader/HeaderContent.test.tsx b/app/portainer/components/PageHeader/HeaderContent.test.tsx
index c1bf7fab1..28402476e 100644
--- a/app/portainer/components/PageHeader/HeaderContent.test.tsx
+++ b/app/portainer/components/PageHeader/HeaderContent.test.tsx
@@ -6,11 +6,17 @@ import { HeaderContainer } from './HeaderContainer';
 import { HeaderContent } from './HeaderContent';
 
 test('should not render without a wrapping HeaderContainer', async () => {
+  const consoleErrorFn = jest
+    .spyOn(console, 'error')
+    .mockImplementation(() => jest.fn());
+
   function renderComponent() {
     return render(<HeaderContent />);
   }
 
   expect(renderComponent).toThrowErrorMatchingSnapshot();
+
+  consoleErrorFn.mockRestore();
 });
 
 test('should display a HeaderContent', async () => {
diff --git a/app/portainer/components/PageHeader/HeaderTitle.test.tsx b/app/portainer/components/PageHeader/HeaderTitle.test.tsx
index e021f1f44..ca4374c8c 100644
--- a/app/portainer/components/PageHeader/HeaderTitle.test.tsx
+++ b/app/portainer/components/PageHeader/HeaderTitle.test.tsx
@@ -6,12 +6,18 @@ import { HeaderContainer } from './HeaderContainer';
 import { HeaderTitle } from './HeaderTitle';
 
 test('should not render without a wrapping HeaderContainer', async () => {
+  const consoleErrorFn = jest
+    .spyOn(console, 'error')
+    .mockImplementation(() => jest.fn());
+
   const title = 'title';
   function renderComponent() {
     return render(<HeaderTitle title={title} />);
   }
 
   expect(renderComponent).toThrowErrorMatchingSnapshot();
+
+  consoleErrorFn.mockRestore();
 });
 
 test('should display a HeaderTitle', async () => {
diff --git a/app/portainer/components/PageHeader/PageHeader.module.css b/app/portainer/components/PageHeader/PageHeader.module.css
new file mode 100644
index 000000000..bc4eb823d
--- /dev/null
+++ b/app/portainer/components/PageHeader/PageHeader.module.css
@@ -0,0 +1,4 @@
+.reloadButton {
+  padding: 0;
+  margin: 0;
+}
diff --git a/app/portainer/components/PageHeader/PageHeader.tsx b/app/portainer/components/PageHeader/PageHeader.tsx
index 8818a5e3d..e42432d3a 100644
--- a/app/portainer/components/PageHeader/PageHeader.tsx
+++ b/app/portainer/components/PageHeader/PageHeader.tsx
@@ -7,6 +7,7 @@ import { Crumb } from './Breadcrumbs/Breadcrumbs';
 import { HeaderContainer } from './HeaderContainer';
 import { HeaderContent } from './HeaderContent';
 import { HeaderTitle } from './HeaderTitle';
+import styles from './PageHeader.module.css';
 
 interface Props {
   reload?: boolean;
@@ -20,7 +21,12 @@ export function PageHeader({ title, breadcrumbs = [], reload }: Props) {
     <HeaderContainer>
       <HeaderTitle title={title}>
         {reload && (
-          <Button color="link" onClick={() => router.stateService.reload()}>
+          <Button
+            color="link"
+            size="medium"
+            onClick={() => router.stateService.reload()}
+            className={styles.reloadButton}
+          >
             <i className="fa fa-sync" aria-hidden="true" />
           </Button>
         )}
diff --git a/app/portainer/components/datatables/components/SearchBar.tsx b/app/portainer/components/datatables/components/SearchBar.tsx
index a9c65de7b..b90da20c1 100644
--- a/app/portainer/components/datatables/components/SearchBar.tsx
+++ b/app/portainer/components/datatables/components/SearchBar.tsx
@@ -1,13 +1,16 @@
-import { useContext, createContext, PropsWithChildren } from 'react';
-
 import { useLocalStorage } from '@/portainer/hooks/useLocalStorage';
 
 interface Props {
   value: string;
+  placeholder?: string;
   onChange(value: string): void;
 }
 
-export function SearchBar({ value, onChange }: Props) {
+export function SearchBar({
+  value,
+  placeholder = 'Search...',
+  onChange,
+}: Props) {
   return (
     <div className="searchBar">
       <i className="fa fa-search searchIcon" aria-hidden="true" />
@@ -16,44 +19,21 @@ export function SearchBar({ value, onChange }: Props) {
         className="searchInput"
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        placeholder="Search..."
+        placeholder={placeholder}
       />
     </div>
   );
 }
 
-const SearchBarContext = createContext<
-  [string, (value: string) => void] | null
->(null);
+export function useSearchBarState(
+  key: string
+): [string, (value: string) => void] {
+  const filterKey = keyBuilder(key);
+  const [value, setValue] = useLocalStorage(filterKey, '', sessionStorage);
 
-interface SearchBarProviderProps {
-  defaultValue?: string;
-  storageKey: string;
-}
+  return [value, setValue];
 
-export function SearchBarProvider({
-  children,
-  storageKey,
-  defaultValue = '',
-}: PropsWithChildren<SearchBarProviderProps>) {
-  const state = useLocalStorage(
-    `datatable_text_filter_${storageKey}`,
-    defaultValue,
-    sessionStorage
-  );
-
-  return (
-    <SearchBarContext.Provider value={state}>
-      {children}
-    </SearchBarContext.Provider>
-  );
-}
-
-export function useSearchBarContext() {
-  const context = useContext(SearchBarContext);
-  if (context === null) {
-    throw new Error('should be used under SearchBarProvider');
+  function keyBuilder(key: string) {
+    return `datatable_text_filter_${key}`;
   }
-
-  return context;
 }
diff --git a/app/portainer/components/datatables/components/TableActions.tsx b/app/portainer/components/datatables/components/TableActions.tsx
index eedb0e4dd..11b7dc4cd 100644
--- a/app/portainer/components/datatables/components/TableActions.tsx
+++ b/app/portainer/components/datatables/components/TableActions.tsx
@@ -1,9 +1,17 @@
+import clsx from 'clsx';
 import { PropsWithChildren } from 'react';
 
 import { useTableContext } from './TableContainer';
 
-export function TableActions({ children }: PropsWithChildren<unknown>) {
+interface Props {
+  className?: string;
+}
+
+export function TableActions({
+  children,
+  className,
+}: PropsWithChildren<Props>) {
   useTableContext();
 
-  return <div className="actionBar">{children}</div>;
+  return <div className={clsx('actionBar', className)}>{children}</div>;
 }
diff --git a/app/portainer/components/datatables/datatable.css b/app/portainer/components/datatables/datatable.css
index 9d07c0f98..74c4d26a8 100644
--- a/app/portainer/components/datatables/datatable.css
+++ b/app/portainer/components/datatables/datatable.css
@@ -87,8 +87,20 @@
   margin: 0;
 }
 
+.datatable .pagination > li.disabled > a,
+.datatable .pagination > li.disabled > button {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.datatable .pagination > li.disabled {
+  cursor: not-allowed;
+}
+
 .datatable .pagination > li > a,
+.datatable .pagination > li > button,
 .pagination > li > span {
+  user-select: none;
   float: none;
 }
 
diff --git a/app/portainer/components/endpoint-list/endpoint-item/endpoint-item-controller.js b/app/portainer/components/endpoint-list/endpoint-item/endpoint-item-controller.js
deleted file mode 100644
index bd2892c5d..000000000
--- a/app/portainer/components/endpoint-list/endpoint-item/endpoint-item-controller.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import angular from 'angular';
-import _ from 'lodash-es';
-import PortainerEndpointTagHelper from 'Portainer/helpers/tagHelper';
-
-class EndpointItemController {
-  /* @ngInject */
-  constructor() {
-    this.editEndpoint = this.editEndpoint.bind(this);
-  }
-
-  editEndpoint(event) {
-    event.stopPropagation();
-    this.onEdit(this.model.Id);
-  }
-
-  joinTags() {
-    if (!this.tags) {
-      return 'Loading tags...';
-    }
-
-    if (!this.model.TagIds || !this.model.TagIds.length) {
-      return '';
-    }
-
-    const tagNames = PortainerEndpointTagHelper.idsToTagNames(this.tags, this.model.TagIds);
-    return _.join(tagNames, ',');
-  }
-
-  isEdgeEndpoint() {
-    return this.model.Type === 4 || this.model.Type === 7;
-  }
-
-  calcIsCheckInValid() {
-    if (!this.isEdgeEndpoint()) {
-      return false;
-    }
-    const checkInInterval = this.model.EdgeCheckinInterval;
-
-    // give checkIn some wiggle room
-    return this.endpointInitTime - this.model.LastCheckInDate <= checkInInterval * 2 + 20;
-  }
-
-  $onInit() {
-    this.endpointTags = this.joinTags();
-    this.isCheckInValid = this.calcIsCheckInValid();
-  }
-
-  $onChanges({ tags, model }) {
-    if ((!tags && !model) || (!tags.currentValue && !model.currentValue)) {
-      return;
-    }
-    this.endpointTags = this.joinTags();
-
-    if (model) {
-      this.isCheckInValid = this.calcIsCheckInValid();
-    }
-  }
-}
-
-angular.module('portainer.app').controller('EndpointItemController', EndpointItemController);
-export default EndpointItemController;
diff --git a/app/portainer/components/endpoint-list/endpoint-item/endpointItem.html b/app/portainer/components/endpoint-list/endpoint-item/endpointItem.html
deleted file mode 100644
index 1f7b3d94d..000000000
--- a/app/portainer/components/endpoint-list/endpoint-item/endpointItem.html
+++ /dev/null
@@ -1,140 +0,0 @@
-<div class="blocklist-item" ng-click="$ctrl.onSelect($ctrl.model)">
-  <div class="blocklist-item-box">
-    <span ng-class="['blocklist-item-logo', 'endpoint-item', { azure: $ctrl.model.Type === 3 }]">
-      <i
-        ng-if="$ctrl.model.Type !== 4 && $ctrl.model.Type !== 5 && $ctrl.model.Type !== 6 && $ctrl.model.Type !== 7"
-        ng-class="$ctrl.model.Type | endpointtypeicon"
-        class="fa-4x blue-icon"
-        aria-hidden="true"
-      ></i>
-      <img ng-if="$ctrl.model.Type === 4" src="~@/assets/images/edge_endpoint.png" />
-      <img ng-if="$ctrl.model.Type === 5 || $ctrl.model.Type === 6" src="~@/assets/images/kubernetes_endpoint.png" />
-      <img ng-if="$ctrl.model.Type === 7" src="~@/assets/images/kubernetes_edge_endpoint.png" />
-    </span>
-
-    <span class="col-sm-12">
-      <div class="blocklist-item-line endpoint-item">
-        <span>
-          <span class="blocklist-item-title endpoint-item">
-            {{ $ctrl.model.Name }}
-          </span>
-          <span class="space-left blocklist-item-subtitle">
-            <span ng-if="$ctrl.isEdgeEndpoint()">
-              <span ng-if="!$ctrl.model.EdgeID" class="label label-default"><s>associated</s></span>
-              <span ng-if="$ctrl.model.EdgeID">
-                <span class="label" ng-class="{ 'label-danger': !$ctrl.isCheckInValid, 'label-success': $ctrl.isCheckInValid }">heartbeat</span>
-                <span class="space-left small text-muted" ng-if="$ctrl.model.LastCheckInDate">
-                  {{ $ctrl.model.LastCheckInDate | getisodatefromtimestamp }}
-                </span>
-              </span>
-            </span>
-
-            <span ng-if="!$ctrl.isEdgeEndpoint()">
-              <span class="label label-{{ $ctrl.model.Status | endpointstatusbadge }}">
-                {{ $ctrl.model.Status === 1 ? 'up' : 'down' }}
-              </span>
-              <span class="space-left small text-muted" ng-if="$ctrl.model.Snapshots[0]">
-                {{ $ctrl.model.Snapshots[0].Time | getisodatefromtimestamp }}
-              </span>
-              <span class="space-left small text-muted" ng-if="$ctrl.model.Kubernetes.Snapshots[0]">
-                {{ $ctrl.model.Kubernetes.Snapshots[0].Time | getisodatefromtimestamp }}
-              </span>
-            </span>
-          </span>
-        </span>
-        <span>
-          <span class="small" ng-if="$ctrl.model.GroupName"> Group: {{ $ctrl.model.GroupName }} </span>
-          <button ng-if="$ctrl.isAdmin" class="btn btn-link btn-xs" ng-click="$ctrl.editEndpoint($event)"><i class="fa fa-pencil-alt"></i> </button>
-        </span>
-      </div>
-
-      <div class="blocklist-item-line endpoint-item" ng-if="$ctrl.model.Snapshots[0]">
-        <span class="blocklist-item-desc">
-          <span>
-            <span style="padding: 0 7px 0 0">
-              <i class="fa fa-th-list space-right" aria-hidden="true"></i>{{ $ctrl.model.Snapshots[0].StackCount }}
-              {{ $ctrl.model.Snapshots[0].StackCount === 1 ? 'stack' : 'stacks' }}
-            </span>
-            <span style="padding: 0 7px 0 7px" ng-if="$ctrl.model.Snapshots[0].Swarm">
-              <i class="fa fa-list-alt space-right" aria-hidden="true"></i>{{ $ctrl.model.Snapshots[0].ServiceCount }}
-              {{ $ctrl.model.Snapshots[0].ServiceCount === 1 ? 'service' : 'services' }}
-            </span>
-            <span style="padding: 0 7px 0 7px">
-              <i class="fa fa-cubes space-right" aria-hidden="true"></i>{{ $ctrl.model.Snapshots[0].RunningContainerCount + $ctrl.model.Snapshots[0].StoppedContainerCount }}
-              {{ $ctrl.model.Snapshots[0].RunningContainerCount + $ctrl.model.Snapshots[0].StoppedContainerCount === 1 ? 'container' : 'containers' }}
-              <span ng-if="$ctrl.model.Snapshots[0].RunningContainerCount > 0 || $ctrl.model.Snapshots[0].StoppedContainerCount > 0">
-                -
-                <i class="fa fa-power-off green-icon" aria-hidden="true"></i> {{ $ctrl.model.Snapshots[0].RunningContainerCount }}
-                <i class="fa fa-power-off red-icon" aria-hidden="true"></i> {{ $ctrl.model.Snapshots[0].StoppedContainerCount }}
-                /
-                <i class="fa fa-heartbeat green-icon" aria-hidden="true"></i> {{ $ctrl.model.Snapshots[0].HealthyContainerCount }}
-                <i class="fa fa-heartbeat orange-icon" aria-hidden="true"></i> {{ $ctrl.model.Snapshots[0].UnhealthyContainerCount }}
-              </span>
-            </span>
-            <span style="padding: 0 7px 0 7px">
-              <i class="fa fa-hdd space-right" aria-hidden="true"></i>{{ $ctrl.model.Snapshots[0].VolumeCount }}
-              {{ $ctrl.model.Snapshots[0].VolumeCount === 1 ? 'volume' : 'volumes' }}
-            </span>
-            <span style="padding: 0 7px 0 7px">
-              <i class="fa fa-clone space-right" aria-hidden="true"></i>{{ $ctrl.model.Snapshots[0].ImageCount }}
-              {{ $ctrl.model.Snapshots[0].ImageCount === 1 ? 'image' : 'images' }}
-            </span>
-          </span>
-        </span>
-        <span class="small text-muted">
-          {{ $ctrl.model.Snapshots[0].Swarm ? 'Swarm' : 'Standalone' }} {{ $ctrl.model.Snapshots[0].DockerVersion }}
-          <span ng-if="$ctrl.model.Type === 2">+ <i class="fa fa-bolt" aria-hidden="true"></i> Agent</span>
-          <span style="padding: 0 7px 0 0" ng-if="$ctrl.model.Snapshots[0].Swarm">
-            <i class="fa fa-hdd space-left space-right" aria-hidden="true"></i>{{ $ctrl.model.Snapshots[0].NodeCount }}
-            {{ $ctrl.model.Snapshots[0].NodeCount === 1 ? 'node' : 'nodes' }}
-          </span>
-        </span>
-      </div>
-
-      <div class="blocklist-item-line endpoint-item" ng-if="!$ctrl.model.Snapshots[0] && $ctrl.model.Type !== 5 && $ctrl.model.Type !== 6 && $ctrl.model.Type !== 7">
-        <span class="blocklist-item-desc"> No snapshot available </span>
-      </div>
-
-      <div class="blocklist-item-line endpoint-item" ng-if="$ctrl.model.Kubernetes.Snapshots[0] && ($ctrl.model.Type === 5 || $ctrl.model.Type === 6 || $ctrl.model.Type === 7)">
-        <span class="blocklist-item-desc">
-          <span>
-            <span style="padding: 0 7px 0 0"> <i class="fa fa-microchip space-right" aria-hidden="true"></i>{{ $ctrl.model.Kubernetes.Snapshots[0].TotalCPU }} CPU </span>
-            <span style="padding: 0 7px 0 7px">
-              <i class="fa fa-memory space-right" aria-hidden="true"></i>{{ $ctrl.model.Kubernetes.Snapshots[0].TotalMemory | humansize }} RAM
-            </span>
-          </span>
-        </span>
-        <span class="small text-muted">
-          Kubernetes {{ $ctrl.model.Kubernetes.Snapshots[0].KubernetesVersion }}
-          <span style="padding: 0 0 0 7px">
-            <i class="fa fa-hdd space-left space-right" aria-hidden="true"></i>
-            {{ $ctrl.model.Kubernetes.Snapshots[0].NodeCount }} {{ $ctrl.model.Kubernetes.Snapshots[0].NodeCount === 1 ? 'node' : 'nodes' }}
-          </span>
-        </span>
-      </div>
-
-      <div class="blocklist-item-line endpoint-item" ng-if="!$ctrl.model.Kubernetes.Snapshots[0] && ($ctrl.model.Type === 5 || $ctrl.model.Type === 6 || $ctrl.model.Type === 7)">
-        <span class="blocklist-item-desc"> - </span>
-      </div>
-
-      <div class="blocklist-item-line endpoint-item">
-        <span class="small text-muted">
-          <span ng-if="$ctrl.model.Type === 1 || $ctrl.model.Type === 2 || $ctrl.model.Type === 4">
-            <span class="small text-muted">
-              <i class="fa fa-microchip"></i> {{ $ctrl.model.Snapshots[0].TotalCPU }}<i class="fa fa-memory space-left"></i> {{ $ctrl.model.Snapshots[0].TotalMemory | humansize }}
-            </span>
-            <span class="space-left space-right">-</span>
-          </span>
-          <span ng-if="$ctrl.endpointTags.length === 0"> <i class="fa fa-tags" aria-hidden="true"></i> No tags </span>
-          <span ng-if="$ctrl.endpointTags.length > 0">
-            <i class="fa fa-tags" aria-hidden="true"></i>
-            {{ $ctrl.endpointTags }}
-          </span>
-        </span>
-        <span class="small text-muted" ng-if="$ctrl.model.Type !== 4 && $ctrl.model.Type !== 7">
-          {{ $ctrl.model.URL | stripprotocol }}
-        </span>
-      </div>
-    </span>
-  </div>
-</div>
diff --git a/app/portainer/components/endpoint-list/endpoint-item/endpointItem.js b/app/portainer/components/endpoint-list/endpoint-item/endpointItem.js
deleted file mode 100644
index a22f5f0e3..000000000
--- a/app/portainer/components/endpoint-list/endpoint-item/endpointItem.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import angular from 'angular';
-
-import EndpointItemController from './endpoint-item-controller';
-
-angular.module('portainer.app').component('endpointItem', {
-  templateUrl: './endpointItem.html',
-  bindings: {
-    model: '<',
-    onSelect: '<',
-    onEdit: '<',
-    isAdmin: '<',
-    tags: '<',
-    endpointInitTime: '<',
-  },
-  controller: EndpointItemController,
-});
diff --git a/app/portainer/components/endpoint-list/endpoint-list-controller.js b/app/portainer/components/endpoint-list/endpoint-list-controller.js
deleted file mode 100644
index 41ae6829d..000000000
--- a/app/portainer/components/endpoint-list/endpoint-list-controller.js
+++ /dev/null
@@ -1,185 +0,0 @@
-import _ from 'lodash-es';
-import { PortainerEndpointTypes } from '@/portainer/models/endpoint/models';
-
-const ENDPOINTS_POLLING_INTERVAL = 30000; // in ms
-const ENDPOINTS_CACHE_SIZE = 100;
-
-angular.module('portainer.app').controller('EndpointListController', [
-  'DatatableService',
-  'PaginationService',
-  'ModalService',
-  'KubernetesConfigService',
-  'Notifications',
-  function EndpointListController(DatatableService, PaginationService, ModalService, KubernetesConfigService, Notifications) {
-    this.state = {
-      totalFilteredEndpoints: null,
-      textFilter: '',
-      filteredEndpoints: [],
-      paginatedItemLimit: '10',
-      pageNumber: 1,
-      loading: true,
-      pollingTimeout: null,
-    };
-
-    this.onTextFilterChange = function (init = false) {
-      this.state.loading = true;
-      var filterValue = this.state.textFilter;
-      DatatableService.setDataTableTextFilters(this.tableKey, filterValue);
-      if (!init && this.hasBackendPagination()) {
-        this.paginationChangedAction();
-      } else {
-        this.state.filteredEndpoints = frontEndpointFilter(this.endpoints, this.tags, filterValue);
-        this.state.loading = false;
-        if (filterValue) {
-          this.state.totalFilteredEndpoints = this.state.filteredEndpoints.length;
-        } else {
-          this.state.totalFilteredEndpoints = this.endpoints.length;
-        }
-      }
-    };
-
-    function frontEndpointFilter(endpoints, tags, filterValue) {
-      if (!endpoints || !endpoints.length || !filterValue) {
-        return endpoints;
-      }
-      var keywords = filterValue.split(' ');
-      return _.filter(endpoints, function (endpoint) {
-        var statusString = convertStatusToString(endpoint.Status);
-        return _.every(keywords, function (keyword) {
-          var lowerCaseKeyword = keyword.toLowerCase();
-          return (
-            _.includes(endpoint.Name.toLowerCase(), lowerCaseKeyword) ||
-            _.includes(endpoint.GroupName.toLowerCase(), lowerCaseKeyword) ||
-            _.includes(endpoint.URL.toLowerCase(), lowerCaseKeyword) ||
-            _.some(endpoint.TagIds, (tagId) => {
-              const tag = tags.find((t) => t.Id === tagId);
-              if (!tag) {
-                return false;
-              }
-              return _.includes(tag.Name.toLowerCase(), lowerCaseKeyword);
-            }) ||
-            _.includes(statusString, keyword)
-          );
-        });
-      });
-    }
-
-    this.hasBackendPagination = function () {
-      return this.totalCount && this.totalCount > ENDPOINTS_CACHE_SIZE;
-    };
-
-    this.clearPollTimeout = function () {
-      if (this.state.pollingTimeout) {
-        clearTimeout(this.state.pollingTimeout);
-        this.state.pollingTimeout = 0;
-      }
-    };
-
-    this.$onDestory = function () {
-      this.clearPollTimeout();
-    };
-
-    this.getCurrentPage = async function (start, paginatedItemLimit, textFilter, init = false) {
-      try {
-        const { totalCount, endpoints } = await this.retrievePage(start, paginatedItemLimit, textFilter);
-        if (init) {
-          this.totalCount = totalCount;
-          this.endpoints = endpoints;
-          this.onTextFilterChange(init);
-        } else {
-          this.state.filteredEndpoints = endpoints;
-          this.state.totalFilteredEndpoints = totalCount;
-        }
-        this.state.loading = false;
-
-        const hasOfflineEndpoint = endpoints.some((e) => e.Status !== 1);
-        if (hasOfflineEndpoint) {
-          this.state.pollingTimeout = setTimeout(() => this.getCurrentPage(start, paginatedItemLimit, textFilter), ENDPOINTS_POLLING_INTERVAL);
-        }
-      } catch (err) {
-        Notifications.error('Failed loading page data', err);
-      }
-    };
-
-    this.paginationChangedAction = async function (init = false) {
-      this.clearPollTimeout();
-      if (init || this.hasBackendPagination()) {
-        this.state.loading = true;
-        this.state.filteredEndpoints = [];
-        const start = (this.state.pageNumber - 1) * this.state.paginatedItemLimit + 1;
-        if (init) {
-          await this.getCurrentPage(start, ENDPOINTS_CACHE_SIZE, null, init);
-        } else {
-          await this.getCurrentPage(start, this.state.paginatedItemLimit, this.state.textFilter);
-        }
-      }
-    };
-
-    this.pageChangeHandler = function (newPageNumber) {
-      this.state.pageNumber = newPageNumber;
-      this.paginationChangedAction();
-    };
-
-    this.changePaginationLimit = function () {
-      PaginationService.setPaginationLimit(this.tableKey, this.state.paginatedItemLimit);
-      this.paginationChangedAction();
-    };
-
-    function convertStatusToString(status) {
-      return status === 1 ? 'up' : 'down';
-    }
-
-    this.showKubeconfigButton = function () {
-      if (window.location.protocol !== 'https:') {
-        return false;
-      }
-      return _.some(this.endpoints, (endpoint) => isKubernetesMode(endpoint));
-    };
-
-    function isKubernetesMode(endpoint) {
-      return [
-        PortainerEndpointTypes.KubernetesLocalEnvironment,
-        PortainerEndpointTypes.AgentOnKubernetesEnvironment,
-        PortainerEndpointTypes.EdgeAgentOnKubernetesEnvironment,
-      ].includes(endpoint.Type);
-    }
-
-    this.showKubeconfigModal = async function () {
-      const kubeEnvironments = _.filter(this.endpoints, (endpoint) => isKubernetesMode(endpoint));
-      const options = kubeEnvironments.map(function (environment) {
-        return {
-          text: `${environment.Name} (${environment.URL})`,
-          value: environment.Id,
-        };
-      });
-
-      let expiryMessage = '';
-      try {
-        expiryMessage = await KubernetesConfigService.expiryMessage();
-      } catch (e) {
-        Notifications.error('Failed fetching kubeconfig expiry time', e);
-      }
-
-      ModalService.confirmKubeconfigSelection(options, expiryMessage, async function (selectedEnvironmentIDs) {
-        if (selectedEnvironmentIDs.length === 0) {
-          Notifications.warning('No environment was selected');
-          return;
-        }
-        try {
-          await KubernetesConfigService.downloadKubeconfigFile(selectedEnvironmentIDs);
-        } catch (e) {
-          Notifications.error('Failed downloading kubeconfig file', e);
-        }
-      });
-    };
-
-    this.$onInit = function () {
-      var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
-      this.state.paginatedItemLimit = PaginationService.getPaginationLimit(this.tableKey);
-      if (textFilter) {
-        this.state.textFilter = textFilter;
-      }
-      this.paginationChangedAction(true);
-    };
-  },
-]);
diff --git a/app/portainer/components/endpoint-list/endpoint-list.js b/app/portainer/components/endpoint-list/endpoint-list.js
deleted file mode 100644
index 0ba2b6078..000000000
--- a/app/portainer/components/endpoint-list/endpoint-list.js
+++ /dev/null
@@ -1,17 +0,0 @@
-angular.module('portainer.app').component('endpointList', {
-  templateUrl: './endpointList.html',
-  controller: 'EndpointListController',
-  bindings: {
-    titleText: '@',
-    titleIcon: '@',
-    tags: '<',
-    tableKey: '@',
-    dashboardAction: '<',
-    snapshotAction: '<',
-    showSnapshotAction: '<',
-    editAction: '<',
-    isAdmin: '<',
-    retrievePage: '<',
-    endpointInitTime: '<',
-  },
-});
diff --git a/app/portainer/components/endpoint-list/endpointList.html b/app/portainer/components/endpoint-list/endpointList.html
deleted file mode 100644
index 2e22d1096..000000000
--- a/app/portainer/components/endpoint-list/endpointList.html
+++ /dev/null
@@ -1,87 +0,0 @@
-<div class="datatable">
-  <rd-widget>
-    <rd-widget-body classes="no-padding">
-      <div class="toolBar">
-        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
-      </div>
-
-      <div class="actionBar" ng-if="$ctrl.showSnapshotAction || $ctrl.showKubeconfigButton()">
-        <div style="margin-bottom: 10px" ng-if="$ctrl.endpoints.length">
-          <i class="fa fa-exclamation-circle blue-icon" style="margin-right: 5px"></i>Click on an environment to manage
-        </div>
-        <button type="button" ng-if="$ctrl.showSnapshotAction" class="btn btn-sm btn-primary" ng-click="$ctrl.snapshotAction()" data-cy="home-refreshEndpointsButton">
-          <i class="fa fa-sync space-right" aria-hidden="true"></i>Refresh
-        </button>
-        <button
-          ng-if="$ctrl.showKubeconfigButton()"
-          type="button"
-          class="btn btn-sm btn-primary"
-          ng-click="$ctrl.showKubeconfigModal()"
-          analytics-on
-          analytics-category="kubernetes"
-          analytics-event="kubernetes-kubectl-kubeconfig-multi"
-        >
-          <i class="fas fa-download space-right"></i> kubeconfig
-        </button>
-      </div>
-
-      <div class="searchBar">
-        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input
-          type="text"
-          class="searchInput"
-          ng-model="$ctrl.state.textFilter"
-          ng-change="$ctrl.onTextFilterChange()"
-          ng-model-options="{ debounce: 300 }"
-          placeholder="Search by name, group, tag, status, URL..."
-          auto-focus
-          data-cy="home-endpointsSearchInput"
-        />
-      </div>
-
-      <div class="blocklist" data-cy="home-endpointList">
-        <endpoint-item
-          ng-if="$ctrl.hasBackendPagination()"
-          dir-paginate="endpoint in $ctrl.state.filteredEndpoints | itemsPerPage: $ctrl.state.paginatedItemLimit"
-          model="endpoint"
-          total-items="$ctrl.state.totalFilteredEndpoints"
-          on-select="($ctrl.dashboardAction)"
-          on-edit="($ctrl.editAction)"
-          is-admin="$ctrl.isAdmin"
-          tags="$ctrl.tags"
-          endpoint-init-time="$ctrl.endpointInitTime"
-        ></endpoint-item>
-        <endpoint-item
-          ng-if="!$ctrl.hasBackendPagination()"
-          dir-paginate="endpoint in $ctrl.state.filteredEndpoints | itemsPerPage: $ctrl.state.paginatedItemLimit"
-          model="endpoint"
-          on-select="($ctrl.dashboardAction)"
-          on-edit="($ctrl.editAction)"
-          is-admin="$ctrl.isAdmin"
-          tags="$ctrl.tags"
-          endpoint-init-time="$ctrl.endpointInitTime"
-        ></endpoint-item>
-        <div ng-if="$ctrl.state.loading" class="text-center text-muted" data-cy="home-loadingEndpoints"> Loading... </div>
-        <div ng-if="!$ctrl.state.loading && !$ctrl.state.filteredEndpoints.length" class="text-center text-muted" data-cy="home-noEndpoints"> No environment available. </div>
-      </div>
-
-      <div class="footer" ng-if="$ctrl.endpoints">
-        <div class="paginationControls">
-          <form class="form-inline">
-            <span class="limitSelector">
-              <span style="margin-right: 5px"> Items per page </span>
-              <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="home-paginationSelect">
-                <option value="0" ng-if="!$ctrl.hasBackendPagination()">All</option>
-                <option value="10">10</option>
-                <option value="25">25</option>
-                <option value="50">50</option>
-                <option value="100">100</option>
-              </select>
-            </span>
-            <dir-pagination-controls max-size="5" on-page-change="$ctrl.pageChangeHandler(newPageNumber, oldPageNumber)"></dir-pagination-controls>
-          </form>
-        </div>
-      </div>
-    </rd-widget-body>
-  </rd-widget>
-</div>
diff --git a/app/portainer/components/group-association-table/group-association-table.js b/app/portainer/components/group-association-table/group-association-table.js
index 8c8b17a74..25a795922 100644
--- a/app/portainer/components/group-association-table/group-association-table.js
+++ b/app/portainer/components/group-association-table/group-association-table.js
@@ -1,5 +1,5 @@
 import _ from 'lodash-es';
-import PortainerEndpointTagHelper from 'Portainer/helpers/tagHelper';
+import { idsToTagNames } from 'Portainer/helpers/tagHelper';
 
 angular.module('portainer.app').component('groupAssociationTable', {
   templateUrl: './groupAssociationTable.html',
@@ -42,7 +42,7 @@ angular.module('portainer.app').component('groupAssociationTable', {
     };
 
     this.tagIdsToTagNames = function tagIdsToTagNames(tagIds) {
-      return PortainerEndpointTagHelper.idsToTagNames(this.tags, tagIds).join(', ') || '-';
+      return idsToTagNames(this.tags, tagIds).join(', ') || '-';
     };
 
     this.groupIdToGroupName = function groupIdToGroupName(groupId) {
diff --git a/app/portainer/components/index.js b/app/portainer/components/index.js
index 3f9889f8c..df484f8d8 100644
--- a/app/portainer/components/index.js
+++ b/app/portainer/components/index.js
@@ -13,9 +13,11 @@ import headerModule from './PageHeader';
 import { ReactExampleAngular } from './ReactExample';
 import { TooltipAngular } from './Tip/Tooltip';
 import { beFeatureIndicatorAngular } from './BEFeatureIndicator';
+import { InformationPanelAngular } from './InformationPanel';
 
 export default angular
   .module('portainer.app.components', [headerModule, boxSelectorModule, widgetModule, sidebarModule, gitFormModule, porAccessManagementModule, formComponentsModule])
+  .component('informationPanel', InformationPanelAngular)
   .component('portainerTooltip', TooltipAngular)
   .component('reactExample', ReactExampleAngular)
   .component('beFeatureIndicator', beFeatureIndicatorAngular)
diff --git a/app/portainer/components/information-panel/information-panel.js b/app/portainer/components/information-panel/information-panel.js
deleted file mode 100644
index 84fc7b965..000000000
--- a/app/portainer/components/information-panel/information-panel.js
+++ /dev/null
@@ -1,8 +0,0 @@
-angular.module('portainer.app').component('informationPanel', {
-  templateUrl: './informationPanel.html',
-  bindings: {
-    titleText: '@',
-    dismissAction: '&?',
-  },
-  transclude: true,
-});
diff --git a/app/portainer/components/motd-panel/motd-panel.js b/app/portainer/components/motd-panel/motd-panel.js
deleted file mode 100644
index 68f65c0c1..000000000
--- a/app/portainer/components/motd-panel/motd-panel.js
+++ /dev/null
@@ -1,8 +0,0 @@
-angular.module('portainer.app').component('motdPanel', {
-  templateUrl: './motdPanel.html',
-  bindings: {
-    motd: '<',
-    dismissAction: '&?',
-  },
-  transclude: true,
-});
diff --git a/app/portainer/components/motd-panel/motdPanel.html b/app/portainer/components/motd-panel/motdPanel.html
deleted file mode 100644
index 043eff1e7..000000000
--- a/app/portainer/components/motd-panel/motdPanel.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<div class="row">
-  <div class="col-sm-12">
-    <rd-widget>
-      <rd-widget-body classes="motd-body">
-        <style ng-if="$ctrl.motd.Style">
-          {{ $ctrl.motd.Style }}
-        </style>
-        <div ng-style="{{ $ctrl.motd.ContentLayout ? $ctrl.motd.ContentLayout : {} }}">
-          <div class="col-sm-12 form-section-title">
-            <span style="float: left">
-              {{ $ctrl.motd.Title }}
-            </span>
-            <span class="small" style="float: right" ng-if="$ctrl.dismissAction">
-              <a ng-click="$ctrl.dismissAction()"><i class="fa fa-times"></i> dismiss</a>
-            </span>
-          </div>
-          <div class="form-group">
-            <span class="text-muted">
-              <p ng-bind-html="$ctrl.motd.Message"></p>
-            </span>
-          </div>
-        </div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
diff --git a/app/portainer/environment-groups/environment-groups.service.ts b/app/portainer/environment-groups/environment-groups.service.ts
new file mode 100644
index 000000000..a0c664cf9
--- /dev/null
+++ b/app/portainer/environment-groups/environment-groups.service.ts
@@ -0,0 +1,35 @@
+import axios, { parseAxiosError } from '../services/axios';
+
+import { EnvironmentGroup, EnvironmentGroupId } from './types';
+
+export async function getGroup(id: EnvironmentGroupId) {
+  try {
+    const { data: group } = await axios.get<EnvironmentGroup>(buildUrl(id));
+    return group;
+  } catch (e) {
+    throw parseAxiosError(e as Error, '');
+  }
+}
+
+export async function getGroups() {
+  try {
+    const { data: groups } = await axios.get<EnvironmentGroup[]>(buildUrl());
+    return groups;
+  } catch (e) {
+    throw parseAxiosError(e as Error, '');
+  }
+}
+
+function buildUrl(id?: EnvironmentGroupId, action?: string) {
+  let url = '/endpoint_groups';
+
+  if (id) {
+    url += `/${id}`;
+  }
+
+  if (action) {
+    url += `/${action}`;
+  }
+
+  return url;
+}
diff --git a/app/portainer/environment-groups/queries.ts b/app/portainer/environment-groups/queries.ts
new file mode 100644
index 000000000..d480c95c4
--- /dev/null
+++ b/app/portainer/environment-groups/queries.ts
@@ -0,0 +1,29 @@
+import { useQuery } from 'react-query';
+
+import { error as notifyError } from '@/portainer/services/notifications';
+
+import { EnvironmentGroup, EnvironmentGroupId } from './types';
+import { getGroup, getGroups } from './environment-groups.service';
+
+export function useGroups() {
+  return useQuery<EnvironmentGroup[]>(['environment-groups'], getGroups);
+}
+
+export function useGroup<T = EnvironmentGroup>(
+  groupId: EnvironmentGroupId,
+  select?: (group: EnvironmentGroup) => T
+) {
+  const { data } = useQuery(
+    ['environment-groups', groupId],
+    () => getGroup(groupId),
+    {
+      staleTime: 50,
+      select,
+      onError(error) {
+        notifyError('Failed loading group', error as Error);
+      },
+    }
+  );
+
+  return data;
+}
diff --git a/app/portainer/environment-groups/types.ts b/app/portainer/environment-groups/types.ts
new file mode 100644
index 000000000..6752441f4
--- /dev/null
+++ b/app/portainer/environment-groups/types.ts
@@ -0,0 +1,14 @@
+import { TagId } from '@/portainer/tags/types';
+
+export type EnvironmentGroupId = number;
+
+export interface EnvironmentGroup {
+  // Environment(Endpoint) group Identifier
+  Id: EnvironmentGroupId;
+  // Environment(Endpoint) group name
+  Name: string;
+  // Description associated to the environment(endpoint) group
+  Description: string;
+  // List of tags associated to this environment(endpoint) group
+  TagIds: TagId[];
+}
diff --git a/app/portainer/environments/environment.service/create.ts b/app/portainer/environments/environment.service/create.ts
index c9dc16176..b5910bf25 100644
--- a/app/portainer/environments/environment.service/create.ts
+++ b/app/portainer/environments/environment.service/create.ts
@@ -1,12 +1,9 @@
 import PortainerError from '@/portainer/error';
 import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { type EnvironmentGroupId } from '@/portainer/environment-groups/types';
+import { type TagId } from '@/portainer/tags/types';
 
-import {
-  Environment,
-  EnvironmentGroupId,
-  EnvironmentCreationTypes,
-  TagId,
-} from '../types';
+import { type Environment, EnvironmentCreationTypes } from '../types';
 
 import { arrayToJson, buildUrl, json2formData } from './utils';
 
diff --git a/app/portainer/environments/environment.service/index.ts b/app/portainer/environments/environment.service/index.ts
index 1371a76d8..a9a44de93 100644
--- a/app/portainer/environments/environment.service/index.ts
+++ b/app/portainer/environments/environment.service/index.ts
@@ -1,14 +1,14 @@
 import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { type EnvironmentGroupId } from '@/portainer/environment-groups/types';
+import { type TagId } from '@/portainer/tags/types';
+import { UserId } from '@/portainer/users/types';
+import { TeamId } from '@/portainer/teams/types';
 
-import {
+import type {
   Environment,
-  EnvironmentGroupId,
   EnvironmentId,
   EnvironmentType,
   EnvironmentSettings,
-  TagId,
-  TeamId,
-  UserId,
 } from '../types';
 
 import { arrayToJson, buildUrl } from './utils';
@@ -51,9 +51,14 @@ export async function getEndpoints(
   try {
     const response = await axios.get<Environment[]>(url, { params });
 
-    const totalCount = response.headers['X-Total-Count'];
+    const totalCount = response.headers['x-total-count'];
+    const totalAvailable = response.headers['x-total-available'];
 
-    return { totalCount: parseInt(totalCount, 10), value: response.data };
+    return {
+      totalCount: parseInt(totalCount, 10),
+      value: response.data,
+      totalAvailable: parseInt(totalAvailable, 10),
+    };
   } catch (e) {
     throw parseAxiosError(e as Error);
   }
diff --git a/app/portainer/environments/queries.ts b/app/portainer/environments/queries.ts
new file mode 100644
index 000000000..c7dd38c5c
--- /dev/null
+++ b/app/portainer/environments/queries.ts
@@ -0,0 +1,46 @@
+import { useQuery } from 'react-query';
+
+import { getEndpoints } from '@/portainer/environments/environment.service';
+import { EnvironmentStatus } from '@/portainer/environments/types';
+import { error as notifyError } from '@/portainer/services/notifications';
+
+const ENVIRONMENTS_POLLING_INTERVAL = 30000; // in ms
+
+export function useEnvironmentList(
+  page: number,
+  pageLimit: number,
+  textFilter: string,
+  refetchOffline = false
+) {
+  const { isLoading, data } = useQuery(
+    ['environments', page, pageLimit, textFilter],
+    async () => {
+      const start = (page - 1) * pageLimit + 1;
+      return getEndpoints(start, pageLimit, { search: textFilter });
+    },
+    {
+      keepPreviousData: true,
+      refetchInterval: (data) => {
+        if (!data || !refetchOffline) {
+          return false;
+        }
+
+        const hasOfflineEnvironment = data.value.some(
+          (env) => env.Status === EnvironmentStatus.Down
+        );
+
+        return hasOfflineEnvironment && ENVIRONMENTS_POLLING_INTERVAL;
+      },
+      onError(error) {
+        notifyError('Failed loading environments', error as Error);
+      },
+    }
+  );
+
+  return {
+    isLoading,
+    environments: data ? data.value : [],
+    totalCount: data ? data.totalCount : 0,
+    totalAvailable: data ? data.totalAvailable : 0,
+  };
+}
diff --git a/app/portainer/environments/types.ts b/app/portainer/environments/types.ts
index c8c76f0a2..f25c11106 100644
--- a/app/portainer/environments/types.ts
+++ b/app/portainer/environments/types.ts
@@ -1,3 +1,8 @@
+import { TagId } from '@/portainer/tags/types';
+import { EnvironmentGroupId } from '@/portainer/environment-groups/types';
+import { UserId } from '@/portainer/users/types';
+import { TeamId } from '@/portainer/teams/types';
+
 export type EnvironmentId = number;
 
 export enum EnvironmentType {
@@ -17,13 +22,6 @@ export enum EnvironmentType {
   EdgeAgentOnKubernetes,
 }
 
-export type TagId = number;
-
-export interface Tag {
-  Id: TagId;
-  Name: string;
-}
-
 export enum EnvironmentStatus {
   Up = 1,
   Down,
@@ -55,14 +53,14 @@ export interface KubernetesSnapshot {
 }
 
 export interface KubernetesSettings {
-  Snapshots: KubernetesSnapshot[];
+  Snapshots?: KubernetesSnapshot[] | null;
 }
 
 export type Environment = {
   Id: EnvironmentId;
   Type: EnvironmentType;
   TagIds: TagId[];
-  GroupName: string;
+  GroupId: EnvironmentGroupId;
   EdgeID?: string;
   EdgeCheckinInterval?: number;
   LastCheckInDate?: number;
@@ -88,8 +86,6 @@ export enum EnvironmentCreationTypes {
   LocalKubernetesEnvironment,
 }
 
-export type EnvironmentGroupId = number;
-
 export enum PlatformType {
   Docker,
   Kubernetes,
@@ -117,11 +113,9 @@ export interface EnvironmentSettings {
   enableHostManagementFeatures: boolean;
 }
 
-export type UserId = number;
-export type TeamId = number;
 export type RoleId = number;
 interface AccessPolicy {
   RoleId: RoleId;
 }
-export type UserAccessPolicies = Record<UserId, AccessPolicy>; // map[UserID]AccessPolicy
+export type UserAccessPolicies = Record<UserId, AccessPolicy>;
 export type TeamAccessPolicies = Record<TeamId, AccessPolicy>;
diff --git a/app/portainer/environments/utils.ts b/app/portainer/environments/utils.ts
index 3a5914295..029a3eebe 100644
--- a/app/portainer/environments/utils.ts
+++ b/app/portainer/environments/utils.ts
@@ -17,6 +17,14 @@ export function getPlatformType(envType: EnvironmentType) {
   }
 }
 
+export function isDockerEnvironment(envType: EnvironmentType) {
+  return getPlatformType(envType) === PlatformType.Docker;
+}
+
+export function isKubernetesEnvironment(envType: EnvironmentType) {
+  return getPlatformType(envType) === PlatformType.Kubernetes;
+}
+
 export function isEdgeEnvironment(envType: EnvironmentType) {
   return [
     EnvironmentType.EdgeAgentOnDocker,
diff --git a/app/portainer/filters/filters.js b/app/portainer/filters/filters.js
index aac2bff73..7519a184a 100644
--- a/app/portainer/filters/filters.js
+++ b/app/portainer/filters/filters.js
@@ -92,7 +92,7 @@ export function endpointTypeName(type) {
   return '';
 }
 
-export function endpointTypeIcon(type) {
+export function environmentTypeIcon(type) {
   if (type === 3) {
     return 'fab fa-microsoft';
   } else if (type === 4) {
@@ -131,10 +131,3 @@ export function truncate(text, length, end) {
     return String(text).substring(0, length - end.length) + end;
   }
 }
-
-export function endpointStatusBadge(status) {
-  if (status === 2) {
-    return 'danger';
-  }
-  return 'success';
-}
diff --git a/app/portainer/filters/index.js b/app/portainer/filters/index.js
index 3f8cd6177..28a9e1742 100644
--- a/app/portainer/filters/index.js
+++ b/app/portainer/filters/index.js
@@ -3,8 +3,7 @@ import _ from 'lodash-es';
 
 import {
   arrayToStr,
-  endpointStatusBadge,
-  endpointTypeIcon,
+  environmentTypeIcon,
   endpointTypeName,
   getPairKey,
   getPairValue,
@@ -35,6 +34,5 @@ angular
   .filter('arraytostr', () => arrayToStr)
   .filter('labelsToStr', () => labelsToStr)
   .filter('endpointtypename', () => endpointTypeName)
-  .filter('endpointtypeicon', () => endpointTypeIcon)
-  .filter('ownershipicon', () => ownershipIcon)
-  .filter('endpointstatusbadge', () => endpointStatusBadge);
+  .filter('endpointtypeicon', () => environmentTypeIcon)
+  .filter('ownershipicon', () => ownershipIcon);
diff --git a/app/portainer/helpers/strings.ts b/app/portainer/helpers/strings.ts
new file mode 100644
index 000000000..dc130b0e5
--- /dev/null
+++ b/app/portainer/helpers/strings.ts
@@ -0,0 +1,7 @@
+export function pluralize(val: number, word: string, plural = `${word}s`) {
+  return [1, -1].includes(Number(val)) ? word : plural;
+}
+
+export function addPlural(value: number, word: string, plural = `${word}s`) {
+  return `${value} ${pluralize(value, word, plural)}`;
+}
diff --git a/app/portainer/helpers/tagHelper.js b/app/portainer/helpers/tagHelper.js
index 3075b9cfa..133d56a61 100644
--- a/app/portainer/helpers/tagHelper.js
+++ b/app/portainer/helpers/tagHelper.js
@@ -1,9 +1,7 @@
 import _ from 'lodash';
 
-export default class PortainerEndpointTagHelper {
-  static idsToTagNames(tags, ids) {
-    const filteredTags = _.filter(tags, (tag) => _.includes(ids, tag.Id));
-    const tagNames = _.map(filteredTags, 'Name');
-    return tagNames;
-  }
+export function idsToTagNames(tags, ids) {
+  const filteredTags = _.filter(tags, (tag) => _.includes(ids, tag.Id));
+  const tagNames = _.map(filteredTags, 'Name');
+  return tagNames;
 }
diff --git a/app/portainer/home/BackupFailedPanel.test.tsx b/app/portainer/home/BackupFailedPanel.test.tsx
new file mode 100644
index 000000000..7fb888144
--- /dev/null
+++ b/app/portainer/home/BackupFailedPanel.test.tsx
@@ -0,0 +1,38 @@
+import { server, rest } from '@/setup-tests/server';
+import { renderWithQueryClient } from '@/react-tools/test-utils';
+import { isoDate } from '@/portainer/filters/filters';
+
+import { BackupFailedPanel } from './BackupFailedPanel';
+
+test('when backup failed, should show message', async () => {
+  const timestamp = 1500;
+  server.use(
+    rest.get('/api/backup/s3/status', (req, res, ctx) =>
+      res(ctx.json({ Failed: true, TimestampUTC: timestamp }))
+    )
+  );
+
+  const { findByText } = renderWithQueryClient(<BackupFailedPanel />);
+
+  await expect(
+    findByText(
+      `The latest automated backup has failed at ${isoDate(
+        timestamp
+      )}. For details please see the log files and have a look at the`,
+      { exact: false }
+    )
+  ).resolves.toBeVisible();
+});
+
+test("when user is using less nodes then allowed he shouldn't see message", async () => {
+  server.use(
+    rest.get('/api/backup/s3/status', (req, res, ctx) =>
+      res(ctx.json({ Failed: false }))
+    )
+  );
+  const { findByText } = renderWithQueryClient(<BackupFailedPanel />);
+
+  await expect(
+    findByText('The latest automated backup has failed at', { exact: false })
+  ).rejects.toBeTruthy();
+});
diff --git a/app/portainer/home/BackupFailedPanel.tsx b/app/portainer/home/BackupFailedPanel.tsx
new file mode 100644
index 000000000..ed7917bd3
--- /dev/null
+++ b/app/portainer/home/BackupFailedPanel.tsx
@@ -0,0 +1,42 @@
+import { useQuery } from 'react-query';
+
+import { error as notifyError } from '@/portainer/services/notifications';
+
+import { InformationPanel } from '../components/InformationPanel';
+import { TextTip } from '../components/Tip/TextTip';
+import { getBackupStatus } from '../services/api/backup.service';
+import { isoDate } from '../filters/filters';
+import { Link } from '../components/Link';
+
+export function BackupFailedPanel() {
+  const { status, isLoading } = useBackupStatus();
+
+  if (isLoading || !status || !status.Failed) {
+    return null;
+  }
+
+  return (
+    <InformationPanel title="Information">
+      <TextTip>
+        The latest automated backup has failed at {isoDate(status.TimestampUTC)}
+        . For details please see the log files and have a look at the{' '}
+        <Link to="portainer.settings">settings</Link> to verify the backup
+        configuration.
+      </TextTip>
+    </InformationPanel>
+  );
+}
+
+function useBackupStatus() {
+  const { data, isLoading } = useQuery(
+    ['backup', 'status'],
+    () => getBackupStatus(),
+    {
+      onError(error) {
+        notifyError('Failure', error as Error, 'Failed to get license info');
+      },
+    }
+  );
+
+  return { status: data, isLoading };
+}
diff --git a/app/portainer/home/EdgeLoadingSpinner.module.css b/app/portainer/home/EdgeLoadingSpinner.module.css
new file mode 100644
index 000000000..82dc7f30c
--- /dev/null
+++ b/app/portainer/home/EdgeLoadingSpinner.module.css
@@ -0,0 +1,9 @@
+.root {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/app/portainer/home/EdgeLoadingSpinner.tsx b/app/portainer/home/EdgeLoadingSpinner.tsx
new file mode 100644
index 000000000..881146eef
--- /dev/null
+++ b/app/portainer/home/EdgeLoadingSpinner.tsx
@@ -0,0 +1,12 @@
+import clsx from 'clsx';
+
+import styles from './EdgeLoadingSpinner.module.css';
+
+export function EdgeLoadingSpinner() {
+  return (
+    <div className={clsx('row', styles.root)}>
+      Connecting to the Edge environment...
+      <i className="fa fa-cog fa-spin space-left" />
+    </div>
+  );
+}
diff --git a/app/portainer/home/EnvironmentList/EnvironmentItem/EdgeIndicator.test.tsx b/app/portainer/home/EnvironmentList/EnvironmentItem/EdgeIndicator.test.tsx
new file mode 100644
index 000000000..75c090584
--- /dev/null
+++ b/app/portainer/home/EnvironmentList/EnvironmentItem/EdgeIndicator.test.tsx
@@ -0,0 +1,34 @@
+import { render } from '@/react-tools/test-utils';
+
+import { EdgeIndicator } from './EdgeIndicator';
+
+test('when edge id is not set, should show unassociated label', () => {
+  const { queryByLabelText } = renderComponent();
+
+  const unassociatedLabel = queryByLabelText('unassociated');
+
+  expect(unassociatedLabel).toBeVisible();
+});
+
+test('given edge id and last checkin is set, should show heartbeat', () => {
+  const { queryByLabelText } = renderComponent('id', 1);
+
+  expect(queryByLabelText('edge-heartbeat')).toBeVisible();
+  expect(queryByLabelText('edge-last-checkin')).toBeVisible();
+});
+
+function renderComponent(
+  edgeId = '',
+  lastCheckInDate = 0,
+  checkInInterval = 0,
+  homepageLoadTime = 0
+) {
+  return render(
+    <EdgeIndicator
+      edgeId={edgeId}
+      lastCheckInDate={lastCheckInDate}
+      checkInInterval={checkInInterval}
+      homepageLoadTime={homepageLoadTime}
+    />
+  );
+}
diff --git a/app/portainer/home/EnvironmentList/EnvironmentItem/EdgeIndicator.tsx b/app/portainer/home/EnvironmentList/EnvironmentItem/EdgeIndicator.tsx
new file mode 100644
index 000000000..206c33a91
--- /dev/null
+++ b/app/portainer/home/EnvironmentList/EnvironmentItem/EdgeIndicator.tsx
@@ -0,0 +1,55 @@
+import clsx from 'clsx';
+
+import { isoDateFromTimestamp } from '@/portainer/filters/filters';
+
+interface Props {
+  checkInInterval?: number;
+  edgeId?: string;
+  homepageLoadTime?: number;
+  lastCheckInDate?: number;
+}
+
+export function EdgeIndicator({
+  edgeId,
+  lastCheckInDate,
+  checkInInterval,
+  homepageLoadTime,
+}: Props) {
+  if (!edgeId) {
+    return (
+      <span className="label label-default" aria-label="unassociated">
+        <s>associated</s>
+      </span>
+    );
+  }
+
+  // give checkIn some wiggle room
+  let isCheckValid = false;
+  if (checkInInterval && homepageLoadTime && lastCheckInDate) {
+    isCheckValid =
+      homepageLoadTime - lastCheckInDate <= checkInInterval * 2 + 20;
+  }
+
+  return (
+    <span>
+      <span
+        className={clsx('label', {
+          'label-danger': !isCheckValid,
+          'label-success': isCheckValid,
+        })}
+        aria-label="edge-heartbeat"
+      >
+        heartbeat
+      </span>
+
+      {!!lastCheckInDate && (
+        <span
+          className="space-left small text-muted"
+          aria-label="edge-last-checkin"
+        >
+          {isoDateFromTimestamp(lastCheckInDate)}
+        </span>
+      )}
+    </span>
+  );
+}
diff --git a/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentIcon.tsx b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentIcon.tsx
new file mode 100644
index 000000000..d55dcc223
--- /dev/null
+++ b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentIcon.tsx
@@ -0,0 +1,34 @@
+import clsx from 'clsx';
+
+import { environmentTypeIcon } from '@/portainer/filters/filters';
+import dockerEdge from '@/assets/images/edge_endpoint.png';
+import kube from '@/assets/images/kubernetes_endpoint.png';
+import kubeEdge from '@/assets/images/kubernetes_edge_endpoint.png';
+import { EnvironmentType } from '@/portainer/environments/types';
+
+interface Props {
+  type: EnvironmentType;
+}
+
+export function EnvironmentIcon({ type }: Props) {
+  switch (type) {
+    case EnvironmentType.EdgeAgentOnDocker:
+      return (
+        <img src={dockerEdge} alt="docker edge endpoint" aria-hidden="true" />
+      );
+    case EnvironmentType.KubernetesLocal:
+    case EnvironmentType.AgentOnKubernetes:
+      return <img src={kube} alt="kubernetes endpoint" aria-hidden="true" />;
+    case EnvironmentType.EdgeAgentOnKubernetes:
+      return (
+        <img src={kubeEdge} alt="kubernetes edge endpoint" aria-hidden="true" />
+      );
+    default:
+      return (
+        <i
+          className={clsx('fa-4x', 'blue-icon', environmentTypeIcon(type))}
+          aria-hidden="true"
+        />
+      );
+  }
+}
diff --git a/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.module.css b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.module.css
new file mode 100644
index 000000000..b77ac9865
--- /dev/null
+++ b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.module.css
@@ -0,0 +1,23 @@
+.root {
+  position: relative;
+}
+
+.wrapperButton {
+  width: 100%;
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.item {
+  display: block;
+  text-decoration: none;
+  outline: initial;
+  color: inherit;
+}
+
+.edit-button {
+  position: absolute;
+  right: 0;
+  top: 7px;
+}
diff --git a/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.stories.tsx b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.stories.tsx
new file mode 100644
index 000000000..482a9c6f4
--- /dev/null
+++ b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.stories.tsx
@@ -0,0 +1,81 @@
+import { Story } from '@storybook/react';
+
+import {
+  Environment,
+  EnvironmentStatus,
+  EnvironmentType,
+} from '@/portainer/environments/types';
+
+import { EnvironmentItem } from './EnvironmentItem';
+
+export default {
+  component: EnvironmentItem,
+  title: 'Home/EnvironmentList/EnvironmentItem',
+};
+
+interface Args {
+  environment: Environment;
+  homepageLoadTime: number;
+}
+
+function Template({ environment, homepageLoadTime = 1 }: Args) {
+  return (
+    <EnvironmentItem
+      environment={environment}
+      homepageLoadTime={homepageLoadTime}
+      onClick={() => {}}
+    />
+  );
+}
+
+export const DockerEnvironment: Story<Args> = Template.bind({});
+DockerEnvironment.args = {
+  environment: mockEnvironment(EnvironmentType.Docker),
+};
+
+export const DockerAgentEnvironment: Story<Args> = Template.bind({});
+DockerAgentEnvironment.args = {
+  environment: mockEnvironment(EnvironmentType.AgentOnDocker),
+};
+
+export const DockerEdgeEnvironment: Story<Args> = Template.bind({});
+DockerEdgeEnvironment.args = {
+  environment: mockEnvironment(EnvironmentType.EdgeAgentOnDocker),
+};
+
+export const AzureEnvironment: Story<Args> = Template.bind({});
+AzureEnvironment.args = {
+  environment: mockEnvironment(EnvironmentType.Azure),
+};
+
+export const KubernetesLocalEnvironment: Story<Args> = Template.bind({});
+KubernetesLocalEnvironment.args = {
+  environment: mockEnvironment(EnvironmentType.KubernetesLocal),
+};
+
+export const KubernetesAgentEnvironment: Story<Args> = Template.bind({});
+KubernetesAgentEnvironment.args = {
+  environment: mockEnvironment(EnvironmentType.AgentOnKubernetes),
+};
+
+export const KubernetesEdgeEnvironment: Story<Args> = Template.bind({});
+KubernetesEdgeEnvironment.args = {
+  environment: mockEnvironment(EnvironmentType.EdgeAgentOnKubernetes),
+};
+
+function mockEnvironment(type: EnvironmentType): Environment {
+  return {
+    Id: 1,
+    Name: 'environment',
+    GroupId: 1,
+    Snapshots: [],
+    Status: EnvironmentStatus.Up,
+    TagIds: [],
+    Type: type,
+    Kubernetes: {
+      Snapshots: [],
+    },
+    URL: 'url',
+    UserTrusted: false,
+  };
+}
diff --git a/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.test.tsx b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.test.tsx
new file mode 100644
index 000000000..cf203c7cf
--- /dev/null
+++ b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.test.tsx
@@ -0,0 +1,74 @@
+import {
+  EnvironmentGroup,
+  EnvironmentGroupId,
+} from '@/portainer/environment-groups/types';
+import { Environment } from '@/portainer/environments/types';
+import { UserContext } from '@/portainer/hooks/useUser';
+import { UserViewModel } from '@/portainer/models/user';
+import { Tag } from '@/portainer/tags/types';
+import { renderWithQueryClient } from '@/react-tools/test-utils';
+import { server, rest } from '@/setup-tests/server';
+
+import { EnvironmentItem } from './EnvironmentItem';
+
+test('loads component', async () => {
+  const env: Environment = {
+    TagIds: [],
+    GroupId: 1,
+    Type: 1,
+    Name: 'environment',
+    Status: 1,
+    URL: 'url',
+    Snapshots: [],
+    Kubernetes: { Snapshots: [] },
+    Id: 3,
+    UserTrusted: false,
+  };
+  const { getByText } = renderComponent(env);
+
+  expect(getByText(env.Name)).toBeInTheDocument();
+});
+
+test('shows group name', async () => {
+  const groupName = 'group-name';
+  const groupId: EnvironmentGroupId = 14;
+
+  const env: Environment = {
+    TagIds: [],
+    GroupId: groupId,
+    Type: 1,
+    Name: 'environment',
+    Status: 1,
+    URL: 'url',
+    Snapshots: [],
+    Kubernetes: { Snapshots: [] },
+    Id: 3,
+    UserTrusted: false,
+  };
+
+  const { findByText } = renderComponent(env, { Name: groupName });
+
+  await expect(findByText(groupName)).resolves.toBeVisible();
+});
+
+function renderComponent(
+  env: Environment,
+  group: Partial<EnvironmentGroup> = { Name: 'group' },
+  isAdmin = false,
+  tags: Tag[] = []
+) {
+  const user = new UserViewModel({ Username: 'test', Role: isAdmin ? 1 : 2 });
+
+  server.use(rest.get('/api/tags', (req, res, ctx) => res(ctx.json(tags))));
+
+  return renderWithQueryClient(
+    <UserContext.Provider value={{ user }}>
+      <EnvironmentItem
+        onClick={() => {}}
+        environment={env}
+        groupName={group.Name}
+        homepageLoadTime={0}
+      />
+    </UserContext.Provider>
+  );
+}
diff --git a/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx
new file mode 100644
index 000000000..2cdbc42da
--- /dev/null
+++ b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx
@@ -0,0 +1,203 @@
+import clsx from 'clsx';
+import _ from 'lodash';
+
+import {
+  isoDateFromTimestamp,
+  humanize,
+  stripProtocol,
+} from '@/portainer/filters/filters';
+import { type Environment, PlatformType } from '@/portainer/environments/types';
+import {
+  getPlatformType,
+  isDockerEnvironment,
+  isEdgeEnvironment,
+} from '@/portainer/environments/utils';
+import type { TagId } from '@/portainer/tags/types';
+import { Button } from '@/portainer/components/Button';
+import { Link } from '@/portainer/components/Link';
+import { useIsAdmin } from '@/portainer/hooks/useUser';
+import { useTags } from '@/portainer/tags/queries';
+
+import { EnvironmentIcon } from './EnvironmentIcon';
+import { EdgeIndicator } from './EdgeIndicator';
+import { EnvironmentStats } from './EnvironmentStats';
+import styles from './EnvironmentItem.module.css';
+import { EnvironmentStatusBadge } from './EnvironmentStatusBadge';
+
+interface Props {
+  homepageLoadTime?: number;
+  environment: Environment;
+  groupName?: string;
+  onClick(environment: Environment): void;
+}
+
+export function EnvironmentItem({
+  environment,
+  onClick,
+  homepageLoadTime,
+  groupName,
+}: Props) {
+  const isAdmin = useIsAdmin();
+  const isEdge = isEdgeEnvironment(environment.Type);
+
+  const snapshotTime = getSnapshotTime(environment);
+
+  const tags = useEnvironmentTagNames(environment.TagIds);
+  const route = getRoute(environment);
+
+  return (
+    <div className={styles.root}>
+      <button
+        type="button"
+        color="link"
+        onClick={() => onClick(environment)}
+        className={styles.wrapperButton}
+      >
+        <Link
+          className={clsx('blocklist-item', styles.item)}
+          to={route}
+          params={{
+            endpointId: environment.Id,
+            id: environment.Id,
+          }}
+        >
+          <div className="blocklist-item-box">
+            <span className={clsx('blocklist-item-logo', 'endpoint-item')}>
+              <EnvironmentIcon type={environment.Type} />
+            </span>
+            <span className="col-sm-12">
+              <div className="blocklist-item-line endpoint-item">
+                <span>
+                  <span className="blocklist-item-title endpoint-item">
+                    {environment.Name}
+                  </span>
+                  <span className="space-left blocklist-item-subtitle">
+                    {isEdge ? (
+                      <EdgeIndicator
+                        edgeId={environment.EdgeID}
+                        checkInInterval={environment.EdgeCheckinInterval}
+                        lastCheckInDate={environment.LastCheckInDate}
+                        homepageLoadTime={homepageLoadTime}
+                      />
+                    ) : (
+                      <>
+                        <EnvironmentStatusBadge status={environment.Status} />
+                        <span className="space-left small text-muted">
+                          {snapshotTime}
+                        </span>
+                      </>
+                    )}
+                  </span>
+                </span>
+                {groupName && (
+                  <span className="small">
+                    <span>Group: </span>
+                    <span>{groupName}</span>
+                  </span>
+                )}
+              </div>
+              <EnvironmentStats environment={environment} />
+              <div className="blocklist-item-line endpoint-item">
+                <span className="small text-muted">
+                  {isDockerEnvironment(environment.Type) && (
+                    <span>
+                      {environment.Snapshots.length > 0 && (
+                        <span className="small text-muted">
+                          <i className="fa fa-microchip space-right" />
+                          {environment.Snapshots[0].TotalCPU}
+                          <i className="fa fa-memory space-left space-right" />
+                          {humanize(environment.Snapshots[0].TotalMemory)}
+                        </span>
+                      )}
+                      <span className="space-left space-right">-</span>
+                    </span>
+                  )}
+                  <span>
+                    <i className="fa fa-tags space-right" aria-hidden="true" />
+                    {tags}
+                  </span>
+                </span>
+                {!isEdge && (
+                  <span className="small text-muted">
+                    {stripProtocol(environment.URL)}
+                  </span>
+                )}
+              </div>
+            </span>
+          </div>
+        </Link>
+      </button>
+      {isAdmin && (
+        <Link
+          to="portainer.endpoints.endpoint"
+          params={{ id: environment.Id }}
+          className={styles.editButton}
+        >
+          <Button color="link">
+            <i className="fa fa-pencil-alt" />
+          </Button>
+        </Link>
+      )}
+    </div>
+  );
+}
+
+function useEnvironmentTagNames(tagIds?: TagId[]) {
+  const { tags, isLoading } = useTags((tags) => {
+    if (!tagIds) {
+      return [];
+    }
+    return _.compact(
+      tagIds
+        .map((id) => tags.find((tag) => tag.ID === id))
+        .map((tag) => tag?.Name)
+    );
+  });
+
+  if (tags) {
+    return tags.join(', ');
+  }
+
+  if (isLoading) {
+    return 'Loading tags...';
+  }
+
+  return 'No tags';
+}
+
+function getSnapshotTime(environment: Environment) {
+  const platform = getPlatformType(environment.Type);
+
+  switch (platform) {
+    case PlatformType.Docker:
+      return environment.Snapshots.length > 0
+        ? isoDateFromTimestamp(environment.Snapshots[0].Time)
+        : null;
+    case PlatformType.Kubernetes:
+      return environment.Kubernetes.Snapshots &&
+        environment.Kubernetes.Snapshots.length > 0
+        ? isoDateFromTimestamp(environment.Kubernetes.Snapshots[0].Time)
+        : null;
+    default:
+      return null;
+  }
+}
+
+function getRoute(environment: Environment) {
+  if (isEdgeEnvironment(environment.Type) && !environment.EdgeID) {
+    return 'portainer.endpoints.endpoint';
+  }
+
+  const platform = getPlatformType(environment.Type);
+
+  switch (platform) {
+    case PlatformType.Azure:
+      return 'azure.dashboard';
+    case PlatformType.Docker:
+      return 'docker.dashboard';
+    case PlatformType.Kubernetes:
+      return 'kubernetes.dashboard';
+    default:
+      return '';
+  }
+}
diff --git a/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStats.tsx b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStats.tsx
new file mode 100644
index 000000000..d4dc3fcc8
--- /dev/null
+++ b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStats.tsx
@@ -0,0 +1,34 @@
+import { Environment, PlatformType } from '@/portainer/environments/types';
+import { getPlatformType } from '@/portainer/environments/utils';
+
+import { EnvironmentStatsDocker } from './EnvironmentStatsDocker';
+import { EnvironmentStatsKubernetes } from './EnvironmentStatsKubernetes';
+
+interface Props {
+  environment: Environment;
+}
+
+export function EnvironmentStats({ environment }: Props) {
+  const platform = getPlatformType(environment.Type);
+  switch (platform) {
+    case PlatformType.Kubernetes:
+      return (
+        <EnvironmentStatsKubernetes
+          snapshots={environment.Kubernetes.Snapshots || []}
+        />
+      );
+    case PlatformType.Docker:
+      return (
+        <EnvironmentStatsDocker
+          snapshots={environment.Snapshots}
+          type={environment.Type}
+        />
+      );
+    default:
+      return (
+        <div className="blocklist-item-line endpoint-item">
+          <span className="blocklist-item-desc">-</span>
+        </div>
+      );
+  }
+}
diff --git a/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsDocker.tsx b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsDocker.tsx
new file mode 100644
index 000000000..dc1f99329
--- /dev/null
+++ b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsDocker.tsx
@@ -0,0 +1,96 @@
+import {
+  DockerSnapshot,
+  EnvironmentType,
+} from '@/portainer/environments/types';
+import { addPlural } from '@/portainer/helpers/strings';
+
+import { Stat } from './EnvironmentStatsItem';
+
+interface Props {
+  snapshots: DockerSnapshot[];
+  type: EnvironmentType;
+}
+
+export function EnvironmentStatsDocker({ snapshots = [], type }: Props) {
+  if (snapshots.length === 0) {
+    return (
+      <div className="blocklist-item-line endpoint-item">
+        <span className="blocklist-item-desc">No snapshot available</span>
+      </div>
+    );
+  }
+
+  const snapshot = snapshots[0];
+
+  return (
+    <div className="blocklist-item-line endpoint-item">
+      <span className="blocklist-item-desc space-x-4">
+        <Stat
+          value={addPlural(snapshot.StackCount, 'stack')}
+          icon="fa-th-list"
+        />
+
+        {!!snapshot.Swarm && (
+          <Stat
+            value={addPlural(snapshot.ServiceCount, 'service')}
+            icon="fa-list-alt"
+          />
+        )}
+
+        <ContainerStats
+          running={snapshot.RunningContainerCount}
+          stopped={snapshot.StoppedContainerCount}
+          healthy={snapshot.HealthyContainerCount}
+          unhealthy={snapshot.UnhealthyContainerCount}
+        />
+
+        <Stat value={addPlural(snapshot.VolumeCount, 'volume')} icon="fa-hdd" />
+        <Stat value={addPlural(snapshot.ImageCount, 'image')} icon="fa-clone" />
+      </span>
+
+      <span className="small text-muted space-x-3">
+        <span>{snapshot.Swarm ? 'Swarm' : 'Standalone'}</span>
+        <span>{snapshot.DockerVersion}</span>
+        {type === EnvironmentType.AgentOnDocker && (
+          <span>
+            + <i className="fa fa-bolt" aria-hidden="true" /> Agent
+          </span>
+        )}
+        {snapshot.Swarm && (
+          <Stat value={addPlural(snapshot.NodeCount, 'node')} icon="fa-hdd" />
+        )}
+      </span>
+    </div>
+  );
+}
+
+interface ContainerStatsProps {
+  running: number;
+  stopped: number;
+  healthy: number;
+  unhealthy: number;
+}
+
+function ContainerStats({
+  running,
+  stopped,
+  healthy,
+  unhealthy,
+}: ContainerStatsProps) {
+  const containersCount = running + stopped;
+
+  return (
+    <Stat value={addPlural(containersCount, 'container')} icon="fa-cubes">
+      {containersCount > 0 && (
+        <span className="space-x-2">
+          <span>-</span>
+          <Stat value={running} icon="fa-power-off green-icon" />
+          <Stat value={stopped} icon="fa-power-off red-icon" />
+          <span>/</span>
+          <Stat value={healthy} icon="fa-heartbeat green-icon" />
+          <Stat value={unhealthy} icon="fa-heartbeat orange-icon" />
+        </span>
+      )}
+    </Stat>
+  );
+}
diff --git a/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsItem.tsx b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsItem.tsx
new file mode 100644
index 000000000..3992dae56
--- /dev/null
+++ b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsItem.tsx
@@ -0,0 +1,17 @@
+import clsx from 'clsx';
+import { PropsWithChildren } from 'react';
+
+interface Props {
+  value: string | number;
+  icon: string;
+}
+
+export function Stat({ value, icon, children }: PropsWithChildren<Props>) {
+  return (
+    <span>
+      <i className={clsx('fa  space-right', icon)} aria-hidden="true" />
+      <span>{value}</span>
+      {children && <span className="space-left">{children}</span>}
+    </span>
+  );
+}
diff --git a/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsKubernetes.tsx b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsKubernetes.tsx
new file mode 100644
index 000000000..4ff6ea003
--- /dev/null
+++ b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatsKubernetes.tsx
@@ -0,0 +1,38 @@
+import { KubernetesSnapshot } from '@/portainer/environments/types';
+import { humanize } from '@/portainer/filters/filters';
+import { addPlural } from '@/portainer/helpers/strings';
+
+import { Stat } from './EnvironmentStatsItem';
+
+interface Props {
+  snapshots?: KubernetesSnapshot[];
+}
+
+export function EnvironmentStatsKubernetes({ snapshots = [] }: Props) {
+  if (snapshots.length === 0) {
+    return (
+      <div className="blocklist-item-line endpoint-item">
+        <span className="blocklist-item-desc">No snapshot available</span>
+      </div>
+    );
+  }
+
+  const snapshot = snapshots[0];
+
+  return (
+    <div className="blocklist-item-line endpoint-item">
+      <span className="blocklist-item-desc space-x-4">
+        <Stat icon="fa-microchip" value={`${snapshot.TotalCPU} CPU`} />
+        <Stat
+          icon="fa-memory"
+          value={`${humanize(snapshot.TotalMemory)} RAM`}
+        />
+      </span>
+
+      <span className="small text-muted space-x-3">
+        <span>Kubernetes {snapshot.KubernetesVersion}</span>
+        <Stat value={addPlural(snapshot.NodeCount, 'node')} icon="fa-hdd" />
+      </span>
+    </div>
+  );
+}
diff --git a/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatusBadge.tsx b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatusBadge.tsx
new file mode 100644
index 000000000..778d88779
--- /dev/null
+++ b/app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentStatusBadge.tsx
@@ -0,0 +1,22 @@
+import clsx from 'clsx';
+
+import { EnvironmentStatus } from '@/portainer/environments/types';
+
+interface Props {
+  status: EnvironmentStatus;
+}
+
+export function EnvironmentStatusBadge({ status }: Props) {
+  return (
+    <span className={clsx('label', `label-${environmentStatusBadge(status)}`)}>
+      {status === EnvironmentStatus.Up ? 'up' : 'down'}
+    </span>
+  );
+}
+
+function environmentStatusBadge(status: EnvironmentStatus) {
+  if (status === EnvironmentStatus.Down) {
+    return 'danger';
+  }
+  return 'success';
+}
diff --git a/app/portainer/home/EnvironmentList/EnvironmentItem/index.ts b/app/portainer/home/EnvironmentList/EnvironmentItem/index.ts
new file mode 100644
index 000000000..86e32a538
--- /dev/null
+++ b/app/portainer/home/EnvironmentList/EnvironmentItem/index.ts
@@ -0,0 +1 @@
+export { EnvironmentItem } from './EnvironmentItem';
diff --git a/app/portainer/home/EnvironmentList/EnvironmentList.module.css b/app/portainer/home/EnvironmentList/EnvironmentList.module.css
new file mode 100644
index 000000000..196c25fbb
--- /dev/null
+++ b/app/portainer/home/EnvironmentList/EnvironmentList.module.css
@@ -0,0 +1,7 @@
+.actionBar .description {
+  margin-bottom: 10px;
+}
+
+.refresh-environments-button {
+  margin-left: 0 !important;
+}
diff --git a/app/portainer/home/EnvironmentList/EnvironmentList.test.tsx b/app/portainer/home/EnvironmentList/EnvironmentList.test.tsx
new file mode 100644
index 000000000..8db69b86c
--- /dev/null
+++ b/app/portainer/home/EnvironmentList/EnvironmentList.test.tsx
@@ -0,0 +1,58 @@
+import { Environment } from '@/portainer/environments/types';
+import { UserContext } from '@/portainer/hooks/useUser';
+import { UserViewModel } from '@/portainer/models/user';
+import { renderWithQueryClient } from '@/react-tools/test-utils';
+import { rest, server } from '@/setup-tests/server';
+
+import { EnvironmentList } from './EnvironmentList';
+
+test('when no environments for query should show empty list message', async () => {
+  const { findByText } = await renderComponent(false, []);
+
+  await expect(findByText('No environments available.')).resolves.toBeVisible();
+});
+
+test('when user is not admin and no environments at all should show empty list info message', async () => {
+  const { findByText } = await renderComponent(false, []);
+
+  await expect(
+    findByText(
+      'You do not have access to any environment. Please contact your administrator.'
+    )
+  ).resolves.toBeVisible();
+});
+
+test('when user is an admin and no environments at all should show empty list info message', async () => {
+  const { findByText } = await renderComponent(true);
+
+  await expect(
+    findByText(/No environment available for management. Please head over the/)
+  ).resolves.toBeVisible();
+});
+
+async function renderComponent(
+  isAdmin = false,
+  environments: Environment[] = []
+) {
+  const user = new UserViewModel({ Username: 'test', Role: isAdmin ? 1 : 2 });
+
+  server.use(
+    rest.get('/api/endpoints', (req, res, ctx) =>
+      res(
+        ctx.set('x-total-available', environments.length.toString()),
+        ctx.set('x-total-count', environments.length.toString()),
+        ctx.json(environments)
+      )
+    )
+  );
+
+  const queries = renderWithQueryClient(
+    <UserContext.Provider value={{ user }}>
+      <EnvironmentList onClickItem={jest.fn()} onRefresh={jest.fn()} />
+    </UserContext.Provider>
+  );
+
+  await expect(queries.findByText('Environments')).resolves.toBeVisible();
+
+  return queries;
+}
diff --git a/app/portainer/home/EnvironmentList/EnvironmentList.tsx b/app/portainer/home/EnvironmentList/EnvironmentList.tsx
new file mode 100644
index 000000000..f1e09df8e
--- /dev/null
+++ b/app/portainer/home/EnvironmentList/EnvironmentList.tsx
@@ -0,0 +1,159 @@
+import { ReactNode, useEffect, useState } from 'react';
+import clsx from 'clsx';
+
+import { PaginationControls } from '@/portainer/components/pagination-controls';
+import { usePaginationLimitState } from '@/portainer/hooks/usePaginationLimitState';
+import { Environment } from '@/portainer/environments/types';
+import { Button } from '@/portainer/components/Button';
+import { useIsAdmin } from '@/portainer/hooks/useUser';
+import {
+  SearchBar,
+  useSearchBarState,
+} from '@/portainer/components/datatables/components/SearchBar';
+import {
+  TableActions,
+  TableContainer,
+  TableTitle,
+} from '@/portainer/components/datatables/components';
+import { TableFooter } from '@/portainer/components/datatables/components/TableFooter';
+import { useDebounce } from '@/portainer/hooks/useDebounce';
+import { useEnvironmentList } from '@/portainer/environments/queries';
+import { useGroups } from '@/portainer/environment-groups/queries';
+
+import { EnvironmentItem } from './EnvironmentItem';
+import { KubeconfigButton } from './KubeconfigButton';
+import styles from './EnvironmentList.module.css';
+import { NoEnvironmentsInfoPanel } from './NoEnvironmentsInfoPanel';
+
+interface Props {
+  onClickItem(environment: Environment): void;
+  onRefresh(): void;
+}
+
+export function EnvironmentList({ onClickItem, onRefresh }: Props) {
+  const homepageLoadTime = usePageLoadingTime();
+
+  const isAdmin = useIsAdmin();
+  const storageKey = 'home_endpoints';
+
+  const [searchBarValue, setSearchBarValue] = useSearchBarState(storageKey);
+  const [pageLimit, setPageLimit] = usePaginationLimitState(storageKey);
+  const [page, setPage] = useState(1);
+
+  const debouncedTextFilter = useDebounce(searchBarValue);
+
+  useEffect(() => {
+    setPage(1);
+  }, [searchBarValue]);
+
+  const groupsQuery = useGroups();
+
+  const { isLoading, environments, totalCount, totalAvailable } =
+    useEnvironmentList(page, pageLimit, debouncedTextFilter, true);
+
+  return (
+    <>
+      {totalAvailable === 0 && <NoEnvironmentsInfoPanel isAdmin={isAdmin} />}
+      <div className="row">
+        <div className="col-sm-12">
+          <TableContainer>
+            <TableTitle icon="fa-plug" label="Environments" />
+
+            <TableActions className={styles.actionBar}>
+              <div className={styles.description}>
+                <i className="fa fa-exclamation-circle blue-icon space-right" />
+                Click on an environment to manage
+              </div>
+
+              {isAdmin && (
+                <Button
+                  onClick={onRefresh}
+                  data-cy="home-refreshEndpointsButton"
+                  className={clsx(styles.refreshEnvironmentsButton)}
+                >
+                  <i className="fa fa-sync space-right" aria-hidden="true" />
+                  Refresh
+                </Button>
+              )}
+
+              <KubeconfigButton environments={environments} />
+            </TableActions>
+
+            <SearchBar
+              value={searchBarValue}
+              onChange={setSearchBarValue}
+              placeholder="Search by name, group, tag, status, URL..."
+              data-cy="home-endpointsSearchInput"
+            />
+
+            <div className="blocklist" data-cy="home-endpointList">
+              {renderItems(
+                isLoading,
+                totalCount,
+                environments.map((env) => (
+                  <EnvironmentItem
+                    key={env.Id}
+                    environment={env}
+                    groupName={
+                      groupsQuery.data?.find((g) => g.Id === env.GroupId)?.Name
+                    }
+                    onClick={onClickItem}
+                    homepageLoadTime={homepageLoadTime}
+                  />
+                ))
+              )}
+            </div>
+
+            <TableFooter>
+              <PaginationControls
+                showAll={totalCount <= 100}
+                pageLimit={pageLimit}
+                page={page}
+                onPageChange={setPage}
+                totalCount={totalCount}
+                onPageLimitChange={setPageLimit}
+              />
+            </TableFooter>
+          </TableContainer>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function renderItems(
+  isLoading: boolean,
+  totalCount: number,
+
+  items: ReactNode
+) {
+  if (isLoading) {
+    return (
+      <div className="text-center text-muted" data-cy="home-loadingEndpoints">
+        Loading...
+      </div>
+    );
+  }
+
+  if (!totalCount) {
+    return (
+      <div className="text-center text-muted" data-cy="home-noEndpoints">
+        No environments available.
+      </div>
+    );
+  }
+
+  return items;
+}
+
+function usePageLoadingTime() {
+  const [homepageLoadTime, setHomepageLoadTime] = useState<
+    number | undefined
+  >();
+
+  useEffect(() => {
+    setHomepageLoadTime(Math.floor(Date.now() / 1000));
+  }, []);
+
+  return homepageLoadTime;
+}
diff --git a/app/portainer/home/EnvironmentList/KubeconfigButton.tsx b/app/portainer/home/EnvironmentList/KubeconfigButton.tsx
new file mode 100644
index 000000000..f39a0c76b
--- /dev/null
+++ b/app/portainer/home/EnvironmentList/KubeconfigButton.tsx
@@ -0,0 +1,81 @@
+import * as kcService from '@/kubernetes/services/kubeconfig.service';
+import * as notifications from '@/portainer/services/notifications';
+import { confirmKubeconfigSelection } from '@/portainer/services/modal.service/prompt';
+import { Environment } from '@/portainer/environments/types';
+import { isKubernetesEnvironment } from '@/portainer/environments/utils';
+import { trackEvent } from '@/angulartics.matomo/analytics-services';
+import { Button } from '@/portainer/components/Button';
+
+interface Props {
+  environments?: Environment[];
+}
+
+export function KubeconfigButton({ environments }: Props) {
+  if (!environments) {
+    return null;
+  }
+
+  if (!isKubeconfigButtonVisible(environments)) {
+    return null;
+  }
+
+  return (
+    <Button onClick={handleClick}>
+      <i className="fas fa-download space-right" /> kubeconfig
+    </Button>
+  );
+
+  function handleClick() {
+    if (!environments) {
+      return;
+    }
+
+    trackEvent('kubernetes-kubectl-kubeconfig-multi', {
+      category: 'kubernetes',
+    });
+
+    showKubeconfigModal(environments);
+  }
+}
+
+function isKubeconfigButtonVisible(environments: Environment[]) {
+  if (window.location.protocol !== 'https:') {
+    return false;
+  }
+  return environments.some((env) => isKubernetesEnvironment(env.Type));
+}
+
+async function showKubeconfigModal(environments: Environment[]) {
+  const kubeEnvironments = environments.filter((env) =>
+    isKubernetesEnvironment(env.Type)
+  );
+  const options = kubeEnvironments.map((environment) => ({
+    text: `${environment.Name} (${environment.URL})`,
+    value: `${environment.Id}`,
+  }));
+
+  let expiryMessage = '';
+  try {
+    expiryMessage = await kcService.expiryMessage();
+  } catch (e) {
+    notifications.error('Failed fetching kubeconfig expiry time', e as Error);
+  }
+
+  confirmKubeconfigSelection(
+    options,
+    expiryMessage,
+    async (selectedEnvironmentIDs: string[]) => {
+      if (selectedEnvironmentIDs.length === 0) {
+        notifications.warning('No environment was selected', '');
+        return;
+      }
+      try {
+        await kcService.downloadKubeconfigFile(
+          selectedEnvironmentIDs.map((id) => parseInt(id, 10))
+        );
+      } catch (e) {
+        notifications.error('Failed downloading kubeconfig file', e as Error);
+      }
+    }
+  );
+}
diff --git a/app/portainer/home/EnvironmentList/NoEnvironmentsInfoPanel.tsx b/app/portainer/home/EnvironmentList/NoEnvironmentsInfoPanel.tsx
new file mode 100644
index 000000000..3270007b4
--- /dev/null
+++ b/app/portainer/home/EnvironmentList/NoEnvironmentsInfoPanel.tsx
@@ -0,0 +1,24 @@
+import { InformationPanel } from '@/portainer/components/InformationPanel';
+import { Link } from '@/portainer/components/Link';
+import { TextTip } from '@/portainer/components/Tip/TextTip';
+
+export function NoEnvironmentsInfoPanel({ isAdmin }: { isAdmin: boolean }) {
+  return (
+    <InformationPanel title="Information">
+      <TextTip>
+        {isAdmin ? (
+          <span>
+            No environment available for management. Please head over the
+            <Link to="portainer.endpoints.new"> environments view </Link>
+            to add an environment.
+          </span>
+        ) : (
+          <span>
+            You do not have access to any environment. Please contact your
+            administrator.
+          </span>
+        )}
+      </TextTip>
+    </InformationPanel>
+  );
+}
diff --git a/app/portainer/home/EnvironmentList/index.ts b/app/portainer/home/EnvironmentList/index.ts
new file mode 100644
index 000000000..ac5df9c70
--- /dev/null
+++ b/app/portainer/home/EnvironmentList/index.ts
@@ -0,0 +1,13 @@
+import { react2angular } from '@/react-tools/react2angular';
+
+import { EnvironmentList } from './EnvironmentList';
+
+export { EnvironmentList };
+
+export const EnvironmentListAngular = react2angular(EnvironmentList, [
+  'tags',
+  'onClickItem',
+  'onRefresh',
+  'homepageLoadTime',
+  'groups',
+]);
diff --git a/app/portainer/home/HomeView.tsx b/app/portainer/home/HomeView.tsx
new file mode 100644
index 000000000..5084a00fc
--- /dev/null
+++ b/app/portainer/home/HomeView.tsx
@@ -0,0 +1,88 @@
+import { useRouter } from '@uirouter/react';
+import { useState } from 'react';
+
+import { r2a } from '@/react-tools/react2angular';
+
+import { PageHeader } from '../components/PageHeader';
+import * as notifications from '../services/notifications';
+import { Environment } from '../environments/types';
+import { snapshotEndpoints } from '../environments/environment.service';
+import { isEdgeEnvironment } from '../environments/utils';
+import { confirmAsync } from '../services/modal.service/confirm';
+
+import { EnvironmentList } from './EnvironmentList';
+import { EdgeLoadingSpinner } from './EdgeLoadingSpinner';
+import { MotdPanel } from './MotdPanel';
+import { LicenseNodePanel } from './LicenseNodePanel';
+import { BackupFailedPanel } from './BackupFailedPanel';
+
+export function HomeView() {
+  const [connectingToEdgeEndpoint, setConnectingToEdgeEndpoint] =
+    useState(false);
+
+  const router = useRouter();
+  return (
+    <>
+      <PageHeader
+        reload
+        title="Home"
+        breadcrumbs={[{ label: 'Environments' }]}
+      />
+
+      {process.env.PORTAINER_EDITION !== 'CE' && <LicenseNodePanel />}
+
+      <MotdPanel />
+
+      {process.env.PORTAINER_EDITION !== 'CE' && <BackupFailedPanel />}
+
+      {connectingToEdgeEndpoint ? (
+        <EdgeLoadingSpinner />
+      ) : (
+        <EnvironmentList
+          onClickItem={handleClickItem}
+          onRefresh={confirmTriggerSnapshot}
+        />
+      )}
+    </>
+  );
+
+  async function confirmTriggerSnapshot() {
+    const result = await confirmEndpointSnapshot();
+    if (!result) {
+      return;
+    }
+    try {
+      await snapshotEndpoints();
+      notifications.success('Success', 'Environments updated');
+      router.stateService.reload();
+    } catch (err) {
+      notifications.error(
+        'Failure',
+        err as Error,
+        'An error occurred during environment snapshot'
+      );
+    }
+  }
+
+  function handleClickItem(environment: Environment) {
+    if (isEdgeEnvironment(environment.Type)) {
+      setConnectingToEdgeEndpoint(true);
+    }
+  }
+}
+
+export const HomeViewAngular = r2a(HomeView, []);
+
+async function confirmEndpointSnapshot() {
+  return confirmAsync({
+    title: 'Are you sure?',
+    message:
+      'Triggering a manual refresh will poll each environment to retrieve its information, this may take a few moments.',
+    buttons: {
+      confirm: {
+        label: 'Continue',
+        className: 'btn-primary',
+      },
+    },
+  });
+}
diff --git a/app/portainer/home/LicenseNodePanel.test.tsx b/app/portainer/home/LicenseNodePanel.test.tsx
new file mode 100644
index 000000000..3878f99e3
--- /dev/null
+++ b/app/portainer/home/LicenseNodePanel.test.tsx
@@ -0,0 +1,48 @@
+import { server, rest } from '@/setup-tests/server';
+import { renderWithQueryClient } from '@/react-tools/test-utils';
+
+import { LicenseType } from '../license-management/types';
+
+import { LicenseNodePanel } from './LicenseNodePanel';
+
+test('when user is using more nodes then allowed he should see message', async () => {
+  const allowed = 2;
+  const used = 5;
+  server.use(
+    rest.get('/api/licenses/info', (req, res, ctx) =>
+      res(ctx.json({ nodes: allowed, type: LicenseType.Subscription }))
+    ),
+    rest.get('/api/status/nodes', (req, res, ctx) =>
+      res(ctx.json({ nodes: used }))
+    )
+  );
+
+  const { findByText } = renderWithQueryClient(<LicenseNodePanel />);
+
+  await expect(
+    findByText(
+      /The number of nodes for your license has been exceeded. Please contact your administrator./
+    )
+  ).resolves.toBeVisible();
+});
+
+test("when user is using less nodes then allowed he shouldn't see message", async () => {
+  const allowed = 5;
+  const used = 2;
+  server.use(
+    rest.get('/api/licenses/info', (req, res, ctx) =>
+      res(ctx.json({ nodes: allowed, type: LicenseType.Subscription }))
+    ),
+    rest.get('/api/status/nodes', (req, res, ctx) =>
+      res(ctx.json({ nodes: used }))
+    )
+  );
+
+  const { findByText } = renderWithQueryClient(<LicenseNodePanel />);
+
+  await expect(
+    findByText(
+      /The number of nodes for your license has been exceeded. Please contact your administrator./
+    )
+  ).rejects.toBeTruthy();
+});
diff --git a/app/portainer/home/LicenseNodePanel.tsx b/app/portainer/home/LicenseNodePanel.tsx
new file mode 100644
index 000000000..96e653287
--- /dev/null
+++ b/app/portainer/home/LicenseNodePanel.tsx
@@ -0,0 +1,56 @@
+import { useQuery } from 'react-query';
+
+import { error as notifyError } from '@/portainer/services/notifications';
+
+import { InformationPanel } from '../components/InformationPanel';
+import { TextTip } from '../components/Tip/TextTip';
+import { LicenseType } from '../license-management/types';
+import { useLicenseInfo } from '../license-management/use-license.service';
+import { getNodesCount } from '../services/api/status.service';
+
+export function LicenseNodePanel() {
+  const nodesValid = useNodesValid();
+
+  if (nodesValid) {
+    return null;
+  }
+
+  return (
+    <InformationPanel title="License node allowance exceeded">
+      <TextTip>
+        The number of nodes for your license has been exceeded. Please contact
+        your administrator.
+      </TextTip>
+    </InformationPanel>
+  );
+}
+
+function useNodesValid() {
+  const { isLoading: isLoadingNodes, nodesCount } = useNodesCounts();
+
+  const { isLoading: isLoadingLicense, info } = useLicenseInfo();
+  if (
+    isLoadingLicense ||
+    isLoadingNodes ||
+    !info ||
+    info.type === LicenseType.Trial
+  ) {
+    return true;
+  }
+
+  return nodesCount <= info.nodes;
+}
+
+function useNodesCounts() {
+  const { isLoading, data } = useQuery(
+    ['status', 'nodes'],
+    () => getNodesCount(),
+    {
+      onError(error) {
+        notifyError('Failure', error as Error, 'Failed to get nodes count');
+      },
+    }
+  );
+
+  return { nodesCount: data || 0, isLoading };
+}
diff --git a/app/portainer/home/MotdPanel.tsx b/app/portainer/home/MotdPanel.tsx
new file mode 100644
index 000000000..e91a741b2
--- /dev/null
+++ b/app/portainer/home/MotdPanel.tsx
@@ -0,0 +1,56 @@
+import { useQuery } from 'react-query';
+import _ from 'lodash-es';
+
+import { useUIState } from '@/portainer/hooks/UIStateProvider';
+
+import { InformationPanel } from '../components/InformationPanel/InformationPanel';
+
+import { getMotd } from './home.service';
+
+export function MotdPanel() {
+  const motd = useMotd();
+
+  const [uiState, setUIState] = useUIState();
+
+  if (!motd || motd.Message === '' || motd.Hash === uiState.dismissedInfoHash) {
+    return null;
+  }
+
+  return (
+    <>
+      {!!motd.Style && <style>{motd.Style}</style>}
+      <InformationPanel
+        onDismiss={() => onDismiss(motd.Hash)}
+        title={motd.Title}
+        wrapperStyle={camelCaseKeys(motd.ContentLayout)}
+        bodyClassName="motd-body"
+      >
+        <span className="text-muted">
+          {/* eslint-disable-next-line react/no-danger */}
+          <p dangerouslySetInnerHTML={{ __html: motd.Message }} />
+        </span>
+      </InformationPanel>
+    </>
+  );
+
+  function onDismiss(hash: string) {
+    setUIState({
+      ...uiState,
+      dismissedInfoHash: hash,
+    });
+  }
+}
+
+function useMotd() {
+  const { data } = useQuery('motd', () => getMotd());
+  return data;
+}
+
+function camelCaseKeys(obj: Record<string, string> = {}) {
+  return Object.fromEntries(
+    Object.entries(obj).map(([key, value]) => {
+      const camelCased = _.camelCase(key);
+      return [camelCased, value];
+    })
+  );
+}
diff --git a/app/portainer/home/home.service.ts b/app/portainer/home/home.service.ts
new file mode 100644
index 000000000..41eaa8c20
--- /dev/null
+++ b/app/portainer/home/home.service.ts
@@ -0,0 +1,15 @@
+import axios, { parseAxiosError } from '../services/axios';
+
+import { Motd } from './types';
+
+export async function getMotd() {
+  try {
+    const { data } = await axios.get<Motd>('/motd');
+    return data;
+  } catch (err) {
+    throw parseAxiosError(
+      err as Error,
+      'Unable to retrieve information message'
+    );
+  }
+}
diff --git a/app/portainer/home/index.ts b/app/portainer/home/index.ts
new file mode 100644
index 000000000..14d09b3e9
--- /dev/null
+++ b/app/portainer/home/index.ts
@@ -0,0 +1,9 @@
+import angular from 'angular';
+
+import { EnvironmentListAngular } from './EnvironmentList';
+import { HomeViewAngular } from './HomeView';
+
+export default angular
+  .module('portainer.app.home', [])
+  .component('homeView', HomeViewAngular)
+  .component('environmentList', EnvironmentListAngular).name;
diff --git a/app/portainer/home/types.ts b/app/portainer/home/types.ts
new file mode 100644
index 000000000..b18b96981
--- /dev/null
+++ b/app/portainer/home/types.ts
@@ -0,0 +1,7 @@
+export interface Motd {
+  Title: string;
+  Message: string;
+  Hash: string;
+  Style?: string;
+  ContentLayout?: Record<string, string>;
+}
diff --git a/app/portainer/hooks/UIStateProvider.tsx b/app/portainer/hooks/UIStateProvider.tsx
new file mode 100644
index 000000000..b0209dca2
--- /dev/null
+++ b/app/portainer/hooks/UIStateProvider.tsx
@@ -0,0 +1,28 @@
+import { createContext, PropsWithChildren, useContext } from 'react';
+
+import { useLocalStorage } from '@/portainer/hooks/useLocalStorage';
+
+interface UIState {
+  dismissedInfoPanels: Record<string, string>;
+  dismissedInfoHash: string;
+}
+
+type UIStateService = [UIState, (state: UIState) => void];
+
+const Context = createContext<null | UIStateService>(null);
+
+export function useUIState() {
+  const context = useContext(Context);
+
+  if (context == null) {
+    throw new Error('Should be nested under a UIStateProvider component');
+  }
+
+  return context;
+}
+
+export function UIStateProvider({ children }: PropsWithChildren<unknown>) {
+  const service = useLocalStorage<UIState>('UI_STATE', {} as UIState);
+
+  return <Context.Provider value={service}>{children}</Context.Provider>;
+}
diff --git a/app/portainer/hooks/useLocalStorage.ts b/app/portainer/hooks/useLocalStorage.ts
index 19d8c1634..364b3d26f 100644
--- a/app/portainer/hooks/useLocalStorage.ts
+++ b/app/portainer/hooks/useLocalStorage.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 
 const localStoragePrefix = 'portainer';
 
@@ -21,7 +21,7 @@ export function useLocalStorage<T>(
     [key, storage]
   );
 
-  return [value, handleChange];
+  return useMemo(() => [value, handleChange], [value, handleChange]);
 }
 
 export function get<T>(
diff --git a/app/portainer/hooks/usePaginationLimitState.ts b/app/portainer/hooks/usePaginationLimitState.ts
new file mode 100644
index 000000000..bfb234748
--- /dev/null
+++ b/app/portainer/hooks/usePaginationLimitState.ts
@@ -0,0 +1,14 @@
+import { useLocalStorage } from './useLocalStorage';
+
+export function usePaginationLimitState(
+  key: string
+): [number, (value: number) => void] {
+  const paginationKey = paginationKeyBuilder(key);
+  const [pageLimit, setPageLimit] = useLocalStorage(paginationKey, 10);
+
+  return [pageLimit, setPageLimit];
+
+  function paginationKeyBuilder(key: string) {
+    return `datatable_pagination_${key}`;
+  }
+}
diff --git a/app/portainer/hooks/useUser.tsx b/app/portainer/hooks/useUser.tsx
index 65251f0e8..3172955cd 100644
--- a/app/portainer/hooks/useUser.tsx
+++ b/app/portainer/hooks/useUser.tsx
@@ -123,3 +123,8 @@ export function UserProvider({ children }: UserProviderProps) {
 export function isAdmin(user?: UserViewModel | null): boolean {
   return !!user && user.Role === 1;
 }
+
+export function useIsAdmin() {
+  const { user } = useUser();
+  return !!user && isAdmin(user);
+}
diff --git a/app/portainer/license-management/license.service.test.ts b/app/portainer/license-management/license.service.test.ts
new file mode 100644
index 000000000..2bbf2b3f9
--- /dev/null
+++ b/app/portainer/license-management/license.service.test.ts
@@ -0,0 +1,43 @@
+import { server, rest } from '@/setup-tests/server';
+
+import { getLicenses } from './license.service';
+import type { License } from './types';
+
+describe('getLicenses', () => {
+  it('on success should return the server body', async () => {
+    const catchFn = jest.fn();
+    const thenFn = jest.fn();
+
+    const data: License[] = [];
+    server.use(
+      rest.get('/api/licenses', (req, res, ctx) => res(ctx.json(data)))
+    );
+
+    const promise = getLicenses();
+
+    await promise.then(thenFn).catch(catchFn);
+
+    expect(catchFn).not.toHaveBeenCalled();
+    expect(thenFn).toHaveBeenCalledWith(data);
+  });
+
+  it('on failure should return the server message', async () => {
+    const catchFn = jest.fn();
+    const thenFn = jest.fn();
+
+    const message = 'message';
+    const details = 'details';
+
+    server.use(
+      rest.get('/api/licenses', (req, res, ctx) =>
+        res(ctx.status(400), ctx.json({ message, details }))
+      )
+    );
+
+    const promise = getLicenses();
+    await promise.then(thenFn, catchFn);
+
+    expect(catchFn).toHaveBeenCalledWith(new Error(message));
+    expect(thenFn).not.toHaveBeenCalled();
+  });
+});
diff --git a/app/portainer/license-management/license.service.ts b/app/portainer/license-management/license.service.ts
new file mode 100644
index 000000000..e00a592fc
--- /dev/null
+++ b/app/portainer/license-management/license.service.ts
@@ -0,0 +1,130 @@
+import _ from 'lodash-es';
+import { AxiosError } from 'axios';
+
+import axios from '@/portainer/services/axios';
+
+import { License, LicenseInfo } from './types';
+
+type Listener = (info: LicenseInfo) => void;
+
+interface Store {
+  data?: LicenseInfo;
+  lastLoaded?: number;
+  invalidated: boolean;
+  listeners: Listener[];
+}
+
+const store: Store = {
+  listeners: [],
+  invalidated: true,
+};
+
+export async function getLicenses() {
+  try {
+    const { data } = await axios.get<License[]>(buildUrl());
+
+    return data;
+  } catch (e) {
+    const axiosError = e as AxiosError;
+    throw new Error(axiosError.response?.data.message);
+  }
+}
+
+interface AttachResponse {
+  licenses: License[];
+  failedKeys: Record<string, string>;
+}
+
+export async function attachLicense(licenseKeys: string[]) {
+  try {
+    const { data } = await axios.post<AttachResponse>(buildUrl(), {
+      licenseKeys,
+    });
+
+    if (Object.keys(data.failedKeys).length === licenseKeys.length) {
+      return data;
+    }
+
+    store.invalidated = true;
+    getLicenseInfo();
+    return data;
+  } catch (e) {
+    const axiosError = e as AxiosError;
+    throw new Error(axiosError.response?.data.message);
+  }
+}
+
+interface RemoveResponse {
+  failedKeys: Record<string, string>;
+}
+
+export async function removeLicense(licenseKeys: string[]) {
+  try {
+    const { data } = await axios.post<RemoveResponse>(buildUrl('remove'), {
+      licenseKeys,
+    });
+    if (Object.keys(data.failedKeys).length === licenseKeys.length) {
+      return data;
+    }
+
+    store.invalidated = true;
+    getLicenseInfo();
+    return data;
+  } catch (e) {
+    const axiosError = e as AxiosError;
+    throw new Error(axiosError.response?.data.message);
+  }
+}
+
+export async function getLicenseInfo() {
+  try {
+    if (
+      store.data &&
+      !store.invalidated &&
+      store.lastLoaded &&
+      Math.abs(store.lastLoaded - Date.now()) < 1000 * 30
+    ) {
+      return store.data;
+    }
+
+    const { data: info } = await axios.get<LicenseInfo>(buildUrl('info'));
+    store.data = info;
+    store.lastLoaded = Date.now();
+    store.invalidated = false;
+    store.listeners.forEach((listener) => listener(info));
+
+    return info;
+  } catch (e) {
+    const axiosError = e as AxiosError;
+    throw new Error(axiosError.response?.data.message);
+  }
+}
+
+export function subscribe(listener: Listener) {
+  store.listeners.push(listener);
+}
+
+export function unsubscribe(listener: Listener) {
+  _.remove<Listener>(store.listeners, listener);
+}
+
+/* @ngInject */
+export function LicenseService() {
+  return {
+    licenses: getLicenses,
+    attach: attachLicense,
+    remove: removeLicense,
+    info: getLicenseInfo,
+    subscribe,
+    unsubscribe,
+  };
+}
+
+function buildUrl(action = '') {
+  let url = 'licenses';
+
+  if (action) {
+    url += `/${action}`;
+  }
+  return url;
+}
diff --git a/app/portainer/license-management/types.ts b/app/portainer/license-management/types.ts
new file mode 100644
index 000000000..da30c6c2a
--- /dev/null
+++ b/app/portainer/license-management/types.ts
@@ -0,0 +1,43 @@
+// matches https://github.com/portainer/liblicense/blob/master/liblicense.go#L66-L74
+export enum Edition {
+  CE = 1,
+  BE,
+  EE,
+}
+
+// matches https://github.com/portainer/liblicense/blob/master/liblicense.go#L60-L64
+
+export enum LicenseType {
+  Trial = 1,
+  Subscription,
+}
+
+// matches https://github.com/portainer/liblicense/blob/master/liblicense.go#L35-L50
+export interface License {
+  id: string;
+  company: string;
+  created: number;
+  email: string;
+  expiresAfter: number;
+  licenseKey: string;
+  nodes: number;
+  productEdition: Edition;
+  revoked: boolean;
+  revokedAt: number;
+  type: LicenseType;
+  version: number;
+  reference: string;
+  expiresAt: number;
+}
+
+// matches https://github.com/portainer/portainer-ee/blob/c4575bf528583fe1682267db4ee40a11a905f611/api/portainer.go#L588-L597
+export interface LicenseInfo {
+  productEdition: Edition;
+  company: string;
+  email: string;
+  createdAt: number;
+  expiresAt: number;
+  nodes: number;
+  type: LicenseType;
+  valid: boolean;
+}
diff --git a/app/portainer/license-management/use-license.service.ts b/app/portainer/license-management/use-license.service.ts
new file mode 100644
index 000000000..39dc43ea8
--- /dev/null
+++ b/app/portainer/license-management/use-license.service.ts
@@ -0,0 +1,20 @@
+import { useQuery } from 'react-query';
+
+import { error as notifyError } from '@/portainer/services/notifications';
+
+import { getLicenseInfo } from './license.service';
+import { LicenseInfo } from './types';
+
+export function useLicenseInfo() {
+  const { isLoading, data: info } = useQuery<LicenseInfo, Error>(
+    'licenseInfo',
+    () => getLicenseInfo(),
+    {
+      onError(error) {
+        notifyError('Failure', error as Error, 'Failed to get license info');
+      },
+    }
+  );
+
+  return { isLoading, info };
+}
diff --git a/app/portainer/models/motd.js b/app/portainer/models/motd.js
deleted file mode 100644
index 872b2dfe8..000000000
--- a/app/portainer/models/motd.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export function MotdViewModel(data) {
-  this.Title = data.Title;
-  this.Message = data.Message;
-  this.Hash = data.Hash;
-  this.Style = data.Style;
-  this.ContentLayout = data.ContentLayout;
-}
diff --git a/app/portainer/rest/backup.js b/app/portainer/rest/backup.js
index 50526c5b0..65e7fa6f1 100644
--- a/app/portainer/rest/backup.js
+++ b/app/portainer/rest/backup.js
@@ -20,7 +20,6 @@ angular.module('portainer.app').factory('Backup', [
         saveS3Settings: { method: 'POST', params: { subResource: 's3', action: 'settings' } },
         exportS3Backup: { method: 'POST', params: { subResource: 's3', action: 'execute' } },
         restoreS3Backup: { method: 'POST', params: { subResource: 's3', action: 'restore' } },
-        getBackupStatus: { method: 'GET', params: { subResource: 's3', action: 'status' } },
       }
     );
   },
diff --git a/app/portainer/rest/motd.js b/app/portainer/rest/motd.js
deleted file mode 100644
index 1842f0f3e..000000000
--- a/app/portainer/rest/motd.js
+++ /dev/null
@@ -1,17 +0,0 @@
-angular.module('portainer.app').factory('Motd', [
-  '$resource',
-  'API_ENDPOINT_MOTD',
-  function MotdFactory($resource, API_ENDPOINT_MOTD) {
-    'use strict';
-    return $resource(
-      API_ENDPOINT_MOTD,
-      {},
-      {
-        get: {
-          method: 'GET',
-          ignoreLoadingBar: true,
-        },
-      }
-    );
-  },
-]);
diff --git a/app/portainer/services/api/backup.service.ts b/app/portainer/services/api/backup.service.ts
new file mode 100644
index 000000000..bceeb228f
--- /dev/null
+++ b/app/portainer/services/api/backup.service.ts
@@ -0,0 +1,29 @@
+import axios, { parseAxiosError } from '../axios';
+
+interface StatusResponse {
+  Failed: boolean;
+  TimestampUTC: string;
+}
+
+export async function getBackupStatus() {
+  try {
+    const { data } = await axios.get<StatusResponse>(buildUrl('s3', 'status'));
+    return data;
+  } catch (error) {
+    throw parseAxiosError(error as Error, 'Unable to retrieve backup status');
+  }
+}
+
+function buildUrl(resource?: string, action?: string) {
+  let url = '/backup';
+
+  if (resource) {
+    url += `/${resource}`;
+  }
+
+  if (action) {
+    url += `/${action}`;
+  }
+
+  return url;
+}
diff --git a/app/portainer/services/api/backupService.js b/app/portainer/services/api/backupService.js
index 1ff04cda0..ca1637ebf 100644
--- a/app/portainer/services/api/backupService.js
+++ b/app/portainer/services/api/backupService.js
@@ -71,20 +71,6 @@ angular.module('portainer.app').factory('BackupService', [
       return deferred.promise;
     };
 
-    service.getBackupStatus = function () {
-      var deferred = $q.defer();
-
-      Backup.getBackupStatus()
-        .$promise.then(function success(data) {
-          deferred.resolve(data);
-        })
-        .catch(function error(err) {
-          deferred.reject({ msg: 'Unable to retrieve backup status', err: err });
-        });
-
-      return deferred.promise;
-    };
-
     return service;
   },
 ]);
diff --git a/app/portainer/services/api/motdService.js b/app/portainer/services/api/motdService.js
deleted file mode 100644
index a4ad680a8..000000000
--- a/app/portainer/services/api/motdService.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { MotdViewModel } from '../../models/motd';
-
-angular.module('portainer.app').factory('MotdService', [
-  '$q',
-  'Motd',
-  function MotdServiceFactory($q, Motd) {
-    'use strict';
-    var service = {};
-
-    service.motd = function () {
-      var deferred = $q.defer();
-
-      Motd.get()
-        .$promise.then(function success(data) {
-          var motd = new MotdViewModel(data);
-          deferred.resolve(motd);
-        })
-        .catch(function error(err) {
-          deferred.reject({ msg: 'Unable to retrieve information message', err: err });
-        });
-
-      return deferred.promise;
-    };
-
-    return service;
-  },
-]);
diff --git a/app/portainer/services/api/status.service.ts b/app/portainer/services/api/status.service.ts
new file mode 100644
index 000000000..ac5240aad
--- /dev/null
+++ b/app/portainer/services/api/status.service.ts
@@ -0,0 +1,24 @@
+import axios, { parseAxiosError } from '../axios';
+
+interface NodesCountResponse {
+  nodes: number;
+}
+
+export async function getNodesCount() {
+  try {
+    const { data } = await axios.get<NodesCountResponse>(buildUrl('nodes'));
+    return data.nodes;
+  } catch (error) {
+    throw parseAxiosError(error as Error);
+  }
+}
+
+function buildUrl(action?: string) {
+  let url = '/status';
+
+  if (action) {
+    url += `/${action}`;
+  }
+
+  return url;
+}
diff --git a/app/portainer/services/api/userService.js b/app/portainer/services/api/userService.js
index bf8b461b5..da5cf2486 100644
--- a/app/portainer/services/api/userService.js
+++ b/app/portainer/services/api/userService.js
@@ -1,10 +1,9 @@
 import _ from 'lodash-es';
 
-import axios from '@/portainer/services/axios';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
 
 const BASE_URL = '/users';
 
-import PortainerError from '@/portainer/error';
 import { filterNonAdministratorUsers } from '@/portainer/helpers/userHelper';
 import { UserViewModel, UserTokenModel } from '../../models/user';
 import { TeamMembershipModel } from '../../models/teamMembership';
@@ -21,12 +20,7 @@ export async function getUsers(includeAdministrators) {
 
     return filterNonAdministratorUsers(users);
   } catch (e) {
-    let err = e;
-    if (err.isAxiosError) {
-      err = new Error(e.response.data.message);
-    }
-
-    throw new PortainerError('Unable to retrieve users', err);
+    throw parseAxiosError(e, 'Unable to retrieve users');
   }
 }
 
@@ -36,12 +30,7 @@ export async function getUser(id) {
 
     return new UserViewModel(user);
   } catch (e) {
-    let err = e;
-    if (err.isAxiosError) {
-      err = new Error(e.response.data.message);
-    }
-
-    throw new PortainerError('Unable to retrieve user details', err);
+    throw parseAxiosError(e, 'Unable to retrieve user details');
   }
 }
 
diff --git a/app/portainer/services/axios.ts b/app/portainer/services/axios.ts
index 57155cfd7..e2bc821be 100644
--- a/app/portainer/services/axios.ts
+++ b/app/portainer/services/axios.ts
@@ -2,8 +2,8 @@ import axiosOrigin, { AxiosError, AxiosRequestConfig } from 'axios';
 import { loadProgressBar } from 'axios-progress-bar';
 import 'axios-progress-bar/dist/nprogress.css';
 
-import PortainerError from '../error';
-import { get as localStorageGet } from '../hooks/useLocalStorage';
+import PortainerError from '@/portainer/error';
+import { get as localStorageGet } from '@/portainer/hooks/useLocalStorage';
 
 import {
   portainerAgentManagerOperation,
diff --git a/app/portainer/services/endpointProvider.js b/app/portainer/services/endpointProvider.js
index ea18ca01d..eca896f61 100644
--- a/app/portainer/services/endpointProvider.js
+++ b/app/portainer/services/endpointProvider.js
@@ -1,10 +1,10 @@
-import _ from 'lodash-es';
-
 angular.module('portainer.app').factory(
   'EndpointProvider',
   /* @ngInject */
   function EndpointProviderFactory(LocalStorage, $uiRouterGlobals) {
-    'use strict';
+    const state = {
+      currentEndpoint: null,
+    };
     var service = {};
     var endpoint = {};
 
@@ -108,11 +108,11 @@ angular.module('portainer.app').factory(
     };
 
     service.currentEndpoint = function () {
-      var endpointId = endpoint.ID;
-      var endpoints = LocalStorage.getEndpoints();
-      return _.find(endpoints, function (item) {
-        return item.Id === endpointId;
-      });
+      return state.currentEndpoint;
+    };
+
+    service.setCurrentEndpoint = function (endpoint) {
+      state.currentEndpoint = endpoint;
     };
 
     return service;
diff --git a/app/portainer/services/modal.service/confirm.ts b/app/portainer/services/modal.service/confirm.ts
index 592fb25bd..01b653259 100644
--- a/app/portainer/services/modal.service/confirm.ts
+++ b/app/portainer/services/modal.service/confirm.ts
@@ -189,21 +189,6 @@ export function confirmDeletionAsync(message: string) {
   });
 }
 
-export function confirmEndpointSnapshot(callback: ConfirmCallback) {
-  confirm({
-    title: 'Are you sure?',
-    message:
-      'Triggering a manual refresh will poll each environment to retrieve its information, this may take a few moments.',
-    buttons: {
-      confirm: {
-        label: 'Continue',
-        className: 'btn-primary',
-      },
-    },
-    callback,
-  });
-}
-
 export function confirmImageExport(callback: ConfirmCallback) {
   confirm({
     title: 'Caution',
diff --git a/app/portainer/services/modal.service/index.ts b/app/portainer/services/modal.service/index.ts
index 1f70e610a..69e301e45 100644
--- a/app/portainer/services/modal.service/index.ts
+++ b/app/portainer/services/modal.service/index.ts
@@ -9,7 +9,6 @@ import {
   confirmDeletion,
   confirmDetachment,
   confirmDeletionAsync,
-  confirmEndpointSnapshot,
   confirmChangePassword,
   confirmImageExport,
   confirmImageForceRemoval,
@@ -54,7 +53,6 @@ export function ModalServiceAngular() {
     confirmRedeploy,
     confirmDeletionAsync,
     confirmContainerRecreation,
-    confirmEndpointSnapshot,
     confirmChangePassword,
     confirmImageExport,
     confirmServiceForceUpdate,
diff --git a/app/portainer/services/notifications.test.ts b/app/portainer/services/notifications.test.ts
index 693178338..b8e319b1d 100644
--- a/app/portainer/services/notifications.test.ts
+++ b/app/portainer/services/notifications.test.ts
@@ -4,6 +4,10 @@ import { error, success, warning } from './notifications';
 
 jest.mock('toastr');
 
+afterEach(() => {
+  jest.resetAllMocks();
+});
+
 it('calling success should show success message', () => {
   const title = 'title';
   const text = 'text';
@@ -14,6 +18,9 @@ it('calling success should show success message', () => {
 });
 
 it('calling error with Error should show error message', () => {
+  const consoleErrorFn = jest
+    .spyOn(console, 'error')
+    .mockImplementation(() => jest.fn());
   const title = 'title';
   const errorMessage = 'message';
   const fallback = 'fallback';
@@ -25,9 +32,14 @@ it('calling error with Error should show error message', () => {
     title,
     expect.anything()
   );
+
+  consoleErrorFn.mockRestore();
 });
 
 it('calling error without Error should show fallback message', () => {
+  const consoleErrorFn = jest
+    .spyOn(console, 'error')
+    .mockImplementation(() => jest.fn());
   const title = 'title';
 
   const fallback = 'fallback';
@@ -35,6 +47,7 @@ it('calling error without Error should show fallback message', () => {
   error(title, undefined, fallback);
 
   expect(toastr.error).toHaveBeenCalledWith(fallback, title, expect.anything());
+  consoleErrorFn.mockRestore();
 });
 
 it('calling warning should show warning message', () => {
diff --git a/app/portainer/settings/settings.service.ts b/app/portainer/settings/settings.service.ts
new file mode 100644
index 000000000..f9528fd50
--- /dev/null
+++ b/app/portainer/settings/settings.service.ts
@@ -0,0 +1,28 @@
+import { PublicSettingsViewModel } from '@/portainer/models/settings';
+
+import axios, { parseAxiosError } from '../services/axios';
+
+export async function publicSettings() {
+  try {
+    const { data } = await axios.get(buildUrl('public'));
+    return new PublicSettingsViewModel(data);
+  } catch (e) {
+    throw parseAxiosError(
+      e as Error,
+      'Unable to retrieve application settings'
+    );
+  }
+}
+
+function buildUrl(subResource?: string, action?: string) {
+  let url = 'settings';
+  if (subResource) {
+    url += `/${subResource}`;
+  }
+
+  if (action) {
+    url += `/${action}`;
+  }
+
+  return url;
+}
diff --git a/app/portainer/tags/queries.ts b/app/portainer/tags/queries.ts
new file mode 100644
index 000000000..e3d5c74b8
--- /dev/null
+++ b/app/portainer/tags/queries.ts
@@ -0,0 +1,18 @@
+import { useQuery } from 'react-query';
+
+import { error as notifyError } from '@/portainer/services/notifications';
+
+import { getTags } from './tags.service';
+import { Tag } from './types';
+
+export function useTags<T = Tag>(select?: (tags: Tag[]) => T[]) {
+  const { data, isLoading } = useQuery('tags', () => getTags(), {
+    staleTime: 50,
+    select,
+    onError(error) {
+      notifyError('Failed loading tags', error as Error);
+    },
+  });
+
+  return { tags: data, isLoading };
+}
diff --git a/app/portainer/tags/tags.service.ts b/app/portainer/tags/tags.service.ts
new file mode 100644
index 000000000..7fe24ca26
--- /dev/null
+++ b/app/portainer/tags/tags.service.ts
@@ -0,0 +1,38 @@
+import axios, { parseAxiosError } from '../services/axios';
+
+import { Tag, TagId } from './types';
+
+export async function getTags() {
+  try {
+    const { data } = await axios.get<Tag[]>(buildUrl());
+    return data;
+  } catch (err) {
+    throw parseAxiosError(err as Error, 'Unable to retrieve tags');
+  }
+}
+
+export async function createTag(name: string) {
+  try {
+    const { data: tag } = await axios.post(buildUrl(), { name });
+    return tag;
+  } catch (err) {
+    throw parseAxiosError(err as Error, 'Unable to create tag');
+  }
+}
+
+export async function deleteTag(id: TagId) {
+  try {
+    await axios.delete(buildUrl(id));
+  } catch (err) {
+    throw parseAxiosError(err as Error, 'Unable to delte tag');
+  }
+}
+
+function buildUrl(id?: TagId) {
+  let url = '/tags';
+  if (id) {
+    url += `/${id}`;
+  }
+
+  return url;
+}
diff --git a/app/portainer/tags/types.ts b/app/portainer/tags/types.ts
new file mode 100644
index 000000000..f7c0de9a0
--- /dev/null
+++ b/app/portainer/tags/types.ts
@@ -0,0 +1,6 @@
+export type TagId = number;
+
+export interface Tag {
+  ID: TagId;
+  Name: string;
+}
diff --git a/app/portainer/views/home/home.html b/app/portainer/views/home/home.html
deleted file mode 100644
index 0db84548d..000000000
--- a/app/portainer/views/home/home.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<!-- <react-example text="'text'"></react-example> -->
-
-<rd-header>
-  <rd-header-title title-text="Home">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="portainer.home" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Environments</rd-header-content>
-</rd-header>
-
-<motd-panel ng-if="motd && motd.Message !== '' && applicationState.UI.dismissedInfoHash !== motd.Hash" motd="motd" dismiss-action="dismissImportantInformation(motd.Hash)">
-</motd-panel>
-
-<kubernetes-feedback-panel></kubernetes-feedback-panel>
-
-<information-panel ng-if="!isAdmin && endpoints.length === 0" title-text="Information">
-  <span class="small text-muted">
-    <p>
-      <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
-      You do not have access to any environment. Please contact your administrator.
-    </p>
-  </span>
-</information-panel>
-
-<div
-  class="row"
-  style="width: 100%; height: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center"
-  ng-if="state.connectingToEdgeEndpoint"
->
-  Connecting to the Edge environment...
-  <i class="fa fa-cog fa-spin" style="margin-left: 5px"></i>
-</div>
-
-<information-panel ng-if="isAdmin && endpoints.length === 0" title-text="Information">
-  <span class="small text-muted">
-    <p>
-      <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
-      No environment available for management. Please head over the
-      <a ui-sref="portainer.endpoints.new"> environments view </a>
-      to add an environment.
-    </p>
-  </span>
-</information-panel>
-
-<div class="row" ng-if="!state.connectingToEdgeEndpoint">
-  <div class="col-sm-12">
-    <endpoint-list
-      title-text="Environments"
-      title-icon="fa-plug"
-      table-key="home_endpoints"
-      tags="tags"
-      dashboard-action="goToDashboard"
-      show-snapshot-action="isAdmin"
-      snapshot-action="triggerSnapshot"
-      edit-action="goToEdit"
-      is-admin="isAdmin"
-      retrieve-page="getPaginatedEndpoints"
-      endpoint-init-time="state.homepageLoadTime"
-    ></endpoint-list>
-  </div>
-</div>
diff --git a/app/portainer/views/home/homeController.js b/app/portainer/views/home/homeController.js
deleted file mode 100644
index 210db8747..000000000
--- a/app/portainer/views/home/homeController.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import EndpointHelper from 'Portainer/helpers/endpointHelper';
-import { getEndpoints } from 'Portainer/environments/environment.service';
-
-angular
-  .module('portainer.app')
-  .controller(
-    'HomeController',
-    function ($q, $scope, $state, TagService, Authentication, EndpointService, GroupService, Notifications, EndpointProvider, StateManager, ModalService, MotdService) {
-      $scope.state = {
-        connectingToEdgeEndpoint: false,
-        homepageLoadTime: '',
-      };
-
-      $scope.goToEdit = function (id) {
-        $state.go('portainer.endpoints.endpoint', { id: id });
-      };
-
-      $scope.goToDashboard = function (endpoint) {
-        if (endpoint.Type === 3) {
-          $state.go('azure.dashboard', { endpointId: endpoint.Id });
-          return;
-        }
-        if (endpoint.Type === 4 || endpoint.Type === 7) {
-          if (!endpoint.EdgeID) {
-            $state.go('portainer.endpoints.endpoint', { id: endpoint.Id });
-            return;
-          }
-          $scope.state.connectingToEdgeEndpoint = true;
-        }
-        if (endpoint.Type === 5 || endpoint.Type === 6 || endpoint.Type === 7) {
-          $state.go('kubernetes.dashboard', { endpointId: endpoint.Id });
-          return;
-        }
-        $state.go('docker.dashboard', { endpointId: endpoint.Id });
-      };
-
-      $scope.dismissImportantInformation = function (hash) {
-        StateManager.dismissImportantInformation(hash);
-      };
-
-      $scope.dismissInformationPanel = function (id) {
-        StateManager.dismissInformationPanel(id);
-      };
-
-      $scope.triggerSnapshot = function () {
-        ModalService.confirmEndpointSnapshot(function (result) {
-          if (!result) {
-            return;
-          }
-          triggerSnapshot();
-        });
-      };
-
-      function triggerSnapshot() {
-        EndpointService.snapshotEndpoints()
-          .then(function success() {
-            Notifications.success('Success', 'Environments updated');
-            $state.reload();
-          })
-          .catch(function error(err) {
-            Notifications.error('Failure', err, 'An error occured during environment snapshot');
-          });
-      }
-
-      $scope.getPaginatedEndpoints = getPaginatedEndpoints;
-      function getPaginatedEndpoints(lastId, limit, search) {
-        const deferred = $q.defer();
-        $q.all({
-          endpoints: getEndpoints(lastId, limit, { search, edgeDeviceFilter: false }),
-          groups: GroupService.groups(),
-        })
-          .then(function success(data) {
-            var endpoints = data.endpoints.value;
-            var groups = data.groups;
-            EndpointHelper.mapGroupNameToEndpoint(endpoints, groups);
-            EndpointProvider.setEndpoints(endpoints);
-            deferred.resolve({ endpoints: endpoints, totalCount: data.endpoints.totalCount });
-          })
-          .catch(function error(err) {
-            Notifications.error('Failure', err, 'Unable to retrieve environment information');
-          });
-        return deferred.promise;
-      }
-
-      async function initView() {
-        $scope.state.homepageLoadTime = Math.floor(Date.now() / 1000);
-        $scope.isAdmin = Authentication.isAdmin();
-
-        MotdService.motd().then(function success(data) {
-          $scope.motd = data;
-        });
-
-        try {
-          $scope.tags = await TagService.tags();
-        } catch (err) {
-          Notifications.error('Failed loading page data', err);
-        }
-      }
-
-      initView();
-    }
-  );
diff --git a/app/react-tools/RootProvider.tsx b/app/react-tools/RootProvider.tsx
index 1a1dc3201..7a880124a 100644
--- a/app/react-tools/RootProvider.tsx
+++ b/app/react-tools/RootProvider.tsx
@@ -4,6 +4,7 @@ import { UIRouterContextComponent } from '@uirouter/react-hybrid';
 import { PropsWithChildren, StrictMode, useState, useEffect } from 'react';
 
 import { UserProvider } from '@/portainer/hooks/useUser';
+import { UIStateProvider } from '@/portainer/hooks/UIStateProvider';
 
 const queryClient = new QueryClient();
 
@@ -18,9 +19,11 @@ export function RootProvider({ children }: PropsWithChildren<unknown>) {
   return (
     <StrictMode>
       <QueryClientProvider client={queryClient}>
-        <UIRouterContextComponent>
-          <UserProvider>{children}</UserProvider>
-        </UIRouterContextComponent>
+        <UIStateProvider>
+          <UIRouterContextComponent>
+            <UserProvider>{children}</UserProvider>
+          </UIRouterContextComponent>
+        </UIStateProvider>
         {showReactQueryDevtools && <ReactQueryDevtools />}
       </QueryClientProvider>
     </StrictMode>
diff --git a/app/setup-tests/server-handlers.ts b/app/setup-tests/server-handlers.ts
index e3fec1e57..267b20da1 100644
--- a/app/setup-tests/server-handlers.ts
+++ b/app/setup-tests/server-handlers.ts
@@ -1,9 +1,28 @@
 import { rest } from 'msw';
 
+import {
+  Edition,
+  LicenseInfo,
+  LicenseType,
+} from '@/portainer/license-management/types';
+import { EnvironmentGroup } from '@/portainer/environment-groups/types';
+import { Tag } from '@/portainer/tags/types';
+
 import { createMockTeams, createMockUsers } from '../react-tools/test-mocks';
 
 import { azureHandlers } from './setup-handlers/azure';
 
+const licenseInfo: LicenseInfo = {
+  nodes: 1000,
+  type: LicenseType.Subscription,
+  company: 'company',
+  createdAt: 0,
+  email: 'email@company.com',
+  expiresAt: Number.MAX_SAFE_INTEGER,
+  productEdition: Edition.EE,
+  valid: true,
+};
+
 export const handlers = [
   rest.get('/api/teams', async (req, res, ctx) =>
     res(ctx.json(createMockTeams(10)))
@@ -12,4 +31,28 @@ export const handlers = [
     res(ctx.json(createMockUsers(10)))
   ),
   ...azureHandlers,
+  rest.get('/api/licenses/info', (req, res, ctx) => res(ctx.json(licenseInfo))),
+  rest.get('/api/status/nodes', (req, res, ctx) => res(ctx.json({ nodes: 3 }))),
+  rest.get('/api/backup/s3/status', (req, res, ctx) =>
+    res(ctx.json({ Failed: false }))
+  ),
+  rest.get('/api/endpoint_groups', (req, res, ctx) => res(ctx.json([]))),
+  rest.get('/api/endpoint_groups/:groupId', (req, res, ctx) => {
+    if (req.params.groupId instanceof Array) {
+      throw new Error('should be string');
+    }
+    const id = parseInt(req.params.groupId, 10);
+    const group: Partial<EnvironmentGroup> = {
+      Id: id,
+      Name: `group${id}`,
+    };
+    return res(ctx.json(group));
+  }),
+  rest.get('/api/tags', (req, res, ctx) => {
+    const tags: Tag[] = [
+      { ID: 1, Name: 'tag1' },
+      { ID: 2, Name: 'tag2' },
+    ];
+    return res(ctx.json(tags));
+  }),
 ];
diff --git a/babel.config.js b/babel.config.js
index 5ed0f63ea..c60d9a6bb 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['lodash', 'angularjs-annotate', ['i18next-extract', { outputPath: 'translations/{{locale}}/{{ns}}.json' }]],
+  plugins: ['lodash', 'angularjs-annotate'],
   presets: [
     [
       '@babel/preset-env',
diff --git a/package.json b/package.json
index 1aa351e52..e3dfac081 100644
--- a/package.json
+++ b/package.json
@@ -103,6 +103,7 @@
     "codemirror": "~5.64.0",
     "core-js": "^3.19.3",
     "fast-json-patch": "^3.1.0",
+    "file-saver": "^2.0.5",
     "filesize": "~3.3.0",
     "filesize-parser": "^1.5.0",
     "formik": "^2.2.9",
@@ -159,9 +160,11 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/angular": "^1.8.3",
     "@types/bootbox": "^5.2.2",
+    "@types/file-saver": "^2.0.4",
     "@types/jest": "^27.0.3",
     "@types/jquery": "^3.5.10",
     "@types/lodash-es": "^4.17.5",
+    "@types/nprogress": "^0.2.0",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
     "@types/react-table": "^7.7.6",
diff --git a/yarn.lock b/yarn.lock
index 476cb5b96..018dcce2f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3184,6 +3184,11 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
+"@types/file-saver@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@types/file-saver/-/file-saver-2.0.4.tgz#aaf9b96296150d737b2fefa535ced05ed8013d84"
+  integrity sha512-sPZYQEIF/SOnLAvaz9lTuydniP+afBMtElRTdYkeV1QtEgvtJ7qolCPjly6O32QI8CbEmP5O/fztMXEDWfEcrg==
+
 "@types/fined@*":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@types/fined/-/fined-1.1.3.tgz#83f03e8f0a8d3673dfcafb18fce3571f6250e1bc"
@@ -3371,6 +3376,11 @@
   resolved "https://registry.yarnpkg.com/@types/npmlog/-/npmlog-4.1.4.tgz#30eb872153c7ead3e8688c476054ddca004115f6"
   integrity sha512-WKG4gTr8przEZBiJ5r3s8ZIAoMXNbOgQ+j/d5O4X3x6kZJRLNvyUJuUK/KoG3+8BaOHPhp2m7WC6JKKeovDSzQ==
 
+"@types/nprogress@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@types/nprogress/-/nprogress-0.2.0.tgz#86c593682d4199212a0509cc3c4d562bbbd6e45f"
+  integrity sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==
+
 "@types/overlayscrollbars@^1.12.0":
   version "1.12.1"
   resolved "https://registry.yarnpkg.com/@types/overlayscrollbars/-/overlayscrollbars-1.12.1.tgz#fb637071b545834fb12aea94ee309a2ff4cdc0a8"
@@ -8409,6 +8419,11 @@ file-saver@^1.3.3:
   resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-1.3.8.tgz#e68a30c7cb044e2fb362b428469feb291c2e09d8"
   integrity sha512-spKHSBQIxxS81N/O21WmuXA2F6wppUCsutpzenOeZzOCCJ5gEfcbqJP983IrpLXzYmXnMUa6J03SubcNPdKrlg==
 
+file-saver@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
+  integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
+
 file-sync-cmp@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/file-sync-cmp/-/file-sync-cmp-0.1.1.tgz#a5e7a8ffbfa493b43b923bbd4ca89a53b63b612b"