diff --git a/cypress/e2e/clusters/cluster.cy.ts b/cypress/e2e/clusters/cluster.cy.ts
index 9fdf5b05..bab4e6ab 100644
--- a/cypress/e2e/clusters/cluster.cy.ts
+++ b/cypress/e2e/clusters/cluster.cy.ts
@@ -153,15 +153,28 @@ describe('Cluster', () => {
       cy.get('#idc').should('exist').click();
 
       // Click the button to show more idc.
-      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)').should('be.visible').and('have.text', 'Hangzhou')
-      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)').should('be.visible').and('have.text', 'Shanghai')
-      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)').should('not.be.visible');
-      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)').should('not.be.visible');
-
+      cy.get(
+        ':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)',
+      )
+        .should('be.visible')
+        .and('have.text', 'Hangzhou');
+      cy.get(
+        ':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)',
+      )
+        .should('be.visible')
+        .and('have.text', 'Shanghai');
+      cy.get(
+        ':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)',
+      ).should('not.be.visible');
+      cy.get(
+        ':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)',
+      ).should('not.be.visible');
 
-      cy.get('.MuiDialogContent-root').should('exist')
+      cy.get('.MuiDialogContent-root').should('exist');
 
-      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .css-gg4vpm > .MuiChip-root > .MuiChip-label').should('contain', 'Total: 4')
+      cy.get(
+        ':nth-child(2) > .information_cidrsContainer__joiB7 > .css-gg4vpm > .MuiChip-root > .MuiChip-label',
+      ).should('contain', 'Total: 4');
 
       cy.get('body').click('topLeft');
 
@@ -172,7 +185,9 @@ describe('Cluster', () => {
         .should('be.visible')
         .and('contain', '192.168.0.0/16');
 
-      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .css-gg4vpm > .MuiChip-root > .MuiChip-label').should('contain', 'Total: 4')
+      cy.get(
+        ':nth-child(3) > .information_cidrsContainer__joiB7 > .css-gg4vpm > .MuiChip-root > .MuiChip-label',
+      ).should('contain', 'Total: 4');
 
       // Click the button to show more cidrs.
       cy.get('#cidrs').should('exist').click();
@@ -184,23 +199,42 @@ describe('Cluster', () => {
 
       cy.get('body').click('topLeft');
 
-      // The number of CIDRs displayed is 2.  
-      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)').should('have.text', '10.0.0.0/8');
-      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)').should('have.text', '192.168.0.0/16');
-      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)').should('not.be.visible');
-      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)').should('not.be.visible');
+      // The number of CIDRs displayed is 2.
+      cy.get(
+        ':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)',
+      ).should('have.text', '10.0.0.0/8');
+      cy.get(
+        ':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)',
+      ).should('have.text', '192.168.0.0/16');
+      cy.get(
+        ':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)',
+      ).should('not.be.visible');
+      cy.get(
+        ':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)',
+      ).should('not.be.visible');
 
-      // The number of hostnames displayed is 2.  
-      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)').should('have.text', 'cluster-1');
-      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)').should('have.text', 'cluster-2');
-      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)').should('not.be.visible');
-      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)').should('not.be.visible');
+      // The number of hostnames displayed is 2.
+      cy.get(
+        ':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)',
+      ).should('have.text', 'cluster-1');
+      cy.get(
+        ':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)',
+      ).should('have.text', 'cluster-2');
+      cy.get(
+        ':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)',
+      ).should('not.be.visible');
+      cy.get(
+        ':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)',
+      ).should('not.be.visible');
 
       cy.get(':nth-child(4) > .MuiPaper-root > .information_cidrsTags__4sKxa')
         .should('be.visible')
         .and('contain', 'cluster-1');
 
-      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .css-gg4vpm > .MuiChip-root').should('contain', 'Total: 4')
+      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .css-gg4vpm > .MuiChip-root').should(
+        'contain',
+        'Total: 4',
+      );
 
       // Click the button to show more cidrs.
       cy.get('#hostnames').should('exist').click();
@@ -210,55 +244,114 @@ describe('Cluster', () => {
 
       cy.get('body').click('topLeft');
 
-      cy.get('.MuiDialogContent-root').should('not.be.visible')
+      cy.get('.MuiDialogContent-root').should('not.be.visible');
     });
 
     it('the visible width of the screen is 1920px. Display scopes', () => {
       cy.viewport(1920, 1080);
 
-      // The number of idc displayed is 3.  
-      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)').should('be.visible').and('have.text', 'Hangzhou')
-      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)').should('be.visible').and('have.text', 'Shanghai')
-      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)').should('be.visible').and('have.text', 'Beijing')
-      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)').should('not.be.visible');
-
-
-      // The number of CIDRs displayed is 3.  
-      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)').should('have.text', '10.0.0.0/8');
-      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)').should('have.text', '192.168.0.0/16');
-      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)').should('have.text', '172.16.0.0/12');
-      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)').should('not.be.visible');
+      // The number of idc displayed is 3.
+      cy.get(
+        ':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)',
+      )
+        .should('be.visible')
+        .and('have.text', 'Hangzhou');
+      cy.get(
+        ':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)',
+      )
+        .should('be.visible')
+        .and('have.text', 'Shanghai');
+      cy.get(
+        ':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)',
+      )
+        .should('be.visible')
+        .and('have.text', 'Beijing');
+      cy.get(
+        ':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)',
+      ).should('not.be.visible');
 
-      // The number of hostnames displayed is 3.  
-      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)').should('have.text', 'cluster-1');
-      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)').should('have.text', 'cluster-2');
-      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)').should('have.text', 'cluster-3');
-      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)').should('not.be.visible');
+      // The number of CIDRs displayed is 3.
+      cy.get(
+        ':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)',
+      ).should('have.text', '10.0.0.0/8');
+      cy.get(
+        ':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)',
+      ).should('have.text', '192.168.0.0/16');
+      cy.get(
+        ':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)',
+      ).should('have.text', '172.16.0.0/12');
+      cy.get(
+        ':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)',
+      ).should('not.be.visible');
 
-    })
+      // The number of hostnames displayed is 3.
+      cy.get(
+        ':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)',
+      ).should('have.text', 'cluster-1');
+      cy.get(
+        ':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)',
+      ).should('have.text', 'cluster-2');
+      cy.get(
+        ':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)',
+      ).should('have.text', 'cluster-3');
+      cy.get(
+        ':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)',
+      ).should('not.be.visible');
+    });
 
     it('the visible width of the screen is 1920px. Display scopes', () => {
       cy.viewport(2560, 1080);
 
-      // The number of idc displayed is 4.  
-      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)').should('be.visible').and('have.text', 'Hangzhou')
-      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)').should('be.visible').and('have.text', 'Shanghai')
-      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)').should('be.visible').and('have.text', 'Beijing')
-      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)').should('be.visible').and('have.text', 'Xiamen')
-
+      // The number of idc displayed is 4.
+      cy.get(
+        ':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)',
+      )
+        .should('be.visible')
+        .and('have.text', 'Hangzhou');
+      cy.get(
+        ':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)',
+      )
+        .should('be.visible')
+        .and('have.text', 'Shanghai');
+      cy.get(
+        ':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)',
+      )
+        .should('be.visible')
+        .and('have.text', 'Beijing');
+      cy.get(
+        ':nth-child(2) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)',
+      )
+        .should('be.visible')
+        .and('have.text', 'Xiamen');
 
-      // The number of CIDRs displayed is 4.  
-      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)').should('have.text', '10.0.0.0/8');
-      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)').should('have.text', '192.168.0.0/16');
-      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)').should('have.text', '172.16.0.0/12');
-      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)').should('have.text', '173.16.0.1/11');
+      // The number of CIDRs displayed is 4.
+      cy.get(
+        ':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)',
+      ).should('have.text', '10.0.0.0/8');
+      cy.get(
+        ':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)',
+      ).should('have.text', '192.168.0.0/16');
+      cy.get(
+        ':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)',
+      ).should('have.text', '172.16.0.0/12');
+      cy.get(
+        ':nth-child(3) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)',
+      ).should('have.text', '173.16.0.1/11');
 
-      // The number of hostnames displayed is 4.  
-      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)').should('have.text', 'cluster-1');
-      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)').should('have.text', 'cluster-2');
-      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)').should('have.text', 'cluster-3');
-      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)').should('have.text', 'cluster-4');
-    })
+      // The number of hostnames displayed is 4.
+      cy.get(
+        ':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(1)',
+      ).should('have.text', 'cluster-1');
+      cy.get(
+        ':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(2)',
+      ).should('have.text', 'cluster-2');
+      cy.get(
+        ':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(3)',
+      ).should('have.text', 'cluster-3');
+      cy.get(
+        ':nth-child(4) > .information_cidrsContainer__joiB7 > .information_cidrsTags__4sKxa > .information_cidrWrapper__wLuys > :nth-child(4)',
+      ).should('have.text', 'cluster-4');
+    });
 
     it('can display config', () => {
       cy.get('.MuiPaper-root > :nth-child(1) > .MuiTypography-body1').should('be.visible').and('have.text', '300');
@@ -316,30 +409,30 @@ describe('Cluster', () => {
           req.reply({
             statusCode: 200,
             body: {
-              "id": 1,
-              "name": "cluster-1",
-              "bio": "",
-              "scopes": {
-                "idc": "",
-                "location": "",
-                "cidrs": null,
-                "hostnames": null
+              id: 1,
+              name: 'cluster-1',
+              bio: '',
+              scopes: {
+                idc: '',
+                location: '',
+                cidrs: null,
+                hostnames: null,
               },
-              "scheduler_cluster_id": 1,
-              "seed_peer_cluster_id": 1,
-              "scheduler_cluster_config": {
-                "candidate_parent_limit": 4,
-                "filter_parent_limit": 15
+              scheduler_cluster_id: 1,
+              seed_peer_cluster_id: 1,
+              scheduler_cluster_config: {
+                candidate_parent_limit: 4,
+                filter_parent_limit: 15,
               },
-              "seed_peer_cluster_config": {
-                "load_limit": 500
+              seed_peer_cluster_config: {
+                load_limit: 500,
               },
-              "peer_cluster_config": {
-                "load_limit": 200
+              peer_cluster_config: {
+                load_limit: 200,
               },
-              "created_at": "2024-04-07T06:30:14Z",
-              "updated_at": "2024-04-07T06:30:14Z",
-              "is_default": true
+              created_at: '2024-04-07T06:30:14Z',
+              updated_at: '2024-04-07T06:30:14Z',
+              is_default: true,
             },
           });
         },
@@ -380,25 +473,29 @@ describe('Cluster', () => {
     });
 
     it('unable to display scopes', () => {
-
       // Show location.
       cy.get('.information_locationTextContainer__ZdjKa').should('have.text', '-');
 
       // Show idc.
       cy.get('#idc').should('not.exist');
       cy.get(':nth-child(2) > .MuiPaper-root > .information_cidrsTags__4sKxa').should('have.text', '-');
-      cy.get(':nth-child(2) > .information_cidrsContainer__joiB7 > .css-gg4vpm > .MuiChip-root > .MuiChip-label').should('have.text', 'Total: 0')
+      cy.get(
+        ':nth-child(2) > .information_cidrsContainer__joiB7 > .css-gg4vpm > .MuiChip-root > .MuiChip-label',
+      ).should('have.text', 'Total: 0');
 
       // Show cidrs.
       cy.get('#cidrs').should('not.exist');
       cy.get(':nth-child(3) > .MuiPaper-root > .information_cidrsTags__4sKxa').should('have.text', '-');
-      cy.get(':nth-child(3) > .information_cidrsContainer__joiB7 > .css-gg4vpm > .MuiChip-root > .MuiChip-label').should('have.text', 'Total: 0')
+      cy.get(
+        ':nth-child(3) > .information_cidrsContainer__joiB7 > .css-gg4vpm > .MuiChip-root > .MuiChip-label',
+      ).should('have.text', 'Total: 0');
 
       // Show hostnames.
       cy.get('#hostnames').should('not.exist');
       cy.get(':nth-child(4) > .MuiPaper-root > .information_cidrsTags__4sKxa').should('have.text', '-');
-      cy.get(':nth-child(4) > .information_cidrsContainer__joiB7 > .css-gg4vpm > .MuiChip-root > .MuiChip-label').should('have.text', 'Total: 0')
-
+      cy.get(
+        ':nth-child(4) > .information_cidrsContainer__joiB7 > .css-gg4vpm > .MuiChip-root > .MuiChip-label',
+      ).should('have.text', 'Total: 0');
     });
 
     it('unable to display config', () => {
diff --git a/cypress/e2e/clusters/update-cluster.cy.ts b/cypress/e2e/clusters/update-cluster.cy.ts
index d1564caf..56fe8e59 100644
--- a/cypress/e2e/clusters/update-cluster.cy.ts
+++ b/cypress/e2e/clusters/update-cluster.cy.ts
@@ -58,7 +58,7 @@ describe('Update cluster', () => {
 
     cy.get(':nth-child(2) > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root')
       .should('contain', 'Hangzhou')
-      .and('contain', 'Shanghai')
+      .and('contain', 'Shanghai');
 
     cy.get(':nth-child(3) > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root')
       .should('contain', '10.0.0.0/8')
@@ -87,30 +87,30 @@ describe('Update cluster', () => {
         req.reply({
           statusCode: 200,
           body: {
-            "id": 0,
-            "name": "",
-            "bio": "",
-            "scopes": {
-              "idc": "",
-              "location": "",
-              "cidrs": null,
-              "hostnames": null
+            id: 0,
+            name: '',
+            bio: '',
+            scopes: {
+              idc: '',
+              location: '',
+              cidrs: null,
+              hostnames: null,
             },
-            "scheduler_cluster_id": 1,
-            "seed_peer_cluster_id": 1,
-            "scheduler_cluster_config": {
-              "candidate_parent_limit": 0,
-              "filter_parent_limit": 0
+            scheduler_cluster_id: 1,
+            seed_peer_cluster_id: 1,
+            scheduler_cluster_config: {
+              candidate_parent_limit: 0,
+              filter_parent_limit: 0,
             },
-            "seed_peer_cluster_config": {
-              "load_limit": 0
+            seed_peer_cluster_config: {
+              load_limit: 0,
             },
-            "peer_cluster_config": {
-              "load_limit": 0
+            peer_cluster_config: {
+              load_limit: 0,
             },
-            "created_at": "2023-03-08T02:39:03Z",
-            "updated_at": "2023-03-08T02:39:03Z",
-            "is_default": true
+            created_at: '2023-03-08T02:39:03Z',
+            updated_at: '2023-03-08T02:39:03Z',
+            is_default: false,
           },
         });
       },
diff --git a/cypress/e2e/schedulers/scheduler.cy.ts b/cypress/e2e/schedulers/scheduler.cy.ts
index 3075d1a2..be140f89 100644
--- a/cypress/e2e/schedulers/scheduler.cy.ts
+++ b/cypress/e2e/schedulers/scheduler.cy.ts
@@ -63,13 +63,12 @@ describe('Scheduler', () => {
   it('click the hostname', () => {
     cy.visit('/clusters/1');
 
-    cy.get(
-      ':nth-child(6) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(1) > :nth-child(2) > .MuiTypography-root',
-    ).should('have.text', 'scheduler-7');
+    cy.get('#scheduler-table-body > :nth-child(1) > :nth-child(2) > .MuiTypography-root').should(
+      'have.text',
+      'scheduler-7',
+    );
 
-    cy.get(
-      ':nth-child(6) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(1) > :nth-child(2) > .MuiTypography-root',
-    ).click();
+    cy.get('#scheduler-table-body > :nth-child(1) > :nth-child(2) > .MuiTypography-root').click();
 
     // Then I see that the current page is the clusters/1/schedulers/7!
     cy.url().should('include', '/clusters/1/schedulers/7');
diff --git a/cypress/e2e/schedulers/schedulers.cy.ts b/cypress/e2e/schedulers/schedulers.cy.ts
index 22c61b42..c32cfac5 100644
--- a/cypress/e2e/schedulers/schedulers.cy.ts
+++ b/cypress/e2e/schedulers/schedulers.cy.ts
@@ -62,16 +62,12 @@ describe('Schedulers', () => {
 
     it('can display schedulers table', () => {
       // Show hostname.
-      cy.get(
-        ':nth-child(6) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(1) > :nth-child(2) > .MuiTypography-root',
-      )
+      cy.get('#scheduler-table-body > :nth-child(1) > :nth-child(2) > .MuiTypography-root')
         .should('be.visible')
         .and('contain', 'scheduler-7');
 
       // Show ip.
-      cy.get(
-        ':nth-child(6) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(1) > :nth-child(3) > .show_ipContainer__pzOmv',
-      )
+      cy.get('#scheduler-table-body > :nth-child(1) > :nth-child(3) > .show_ipContainer__pzOmv')
         .should('be.visible')
         .and('contain', '30.44.98.202');
 
@@ -82,27 +78,21 @@ describe('Schedulers', () => {
         .and('have.css', 'background-color', 'rgb(46, 143, 121)');
 
       // Show features.
-      cy.get(':nth-child(6) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(1) > :nth-child(6)')
+      cy.get('#scheduler-table-body > :nth-child(1) > :nth-child(6)')
         .should('be.visible')
         .and('contain', 'Schedule')
         .and('contain', 'Preheat');
 
       // Show scheduler-5 information.
-      cy.get(
-        ':nth-child(6) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(2) > :nth-child(2) > .MuiTypography-root',
-      )
+      cy.get('#scheduler-table-body > :nth-child(2) > :nth-child(2) > .MuiTypography-root')
         .should('be.visible')
         .and('contain', 'scheduler-5');
 
-      cy.get(
-        ':nth-child(6) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(2) > :nth-child(3) > .show_ipContainer__pzOmv',
-      )
+      cy.get('#scheduler-table-body > :nth-child(2) > :nth-child(3)')
         .should('be.visible')
         .and('contain', '20.14.28.202');
 
-      cy.get(
-        ':nth-child(6) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(5) > :nth-child(2) > .MuiTypography-root',
-      )
+      cy.get('#scheduler-table-body > :nth-child(5) > :nth-child(2)')
         .scrollIntoView()
         .should('be.visible')
         .and('contain', 'scheduler-10');
@@ -141,9 +131,7 @@ describe('Schedulers', () => {
     });
 
     it('there should be a message indicating that there is no scheduler', () => {
-      cy.get(
-        ':nth-child(6) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > .MuiTableCell-root',
-      )
+      cy.get('#scheduler-table-body > .MuiTableRow-root > .MuiTableCell-root')
         .should('be.visible')
         .and('contain', `You don't have scheduler cluster.`);
     });
@@ -180,9 +168,7 @@ describe('Schedulers', () => {
     });
 
     it('there should be a message indicating that there is no scheduler', () => {
-      cy.get(
-        ':nth-child(6) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > .MuiTableCell-root',
-      )
+      cy.get('#scheduler-table-body > .MuiTableRow-root > .MuiTableCell-root')
         .should('be.visible')
         .and('contain', `You don't have scheduler cluster.`);
     });
@@ -204,19 +190,14 @@ describe('Schedulers', () => {
         .and('have.text', 'scheduler-7');
 
       // Go to next page.
-      cy.get(':nth-child(7) > .MuiPagination-root > .MuiPagination-ul > :nth-child(3) > .MuiButtonBase-root').click();
-
-      cy.get(
-        ':nth-child(6) > .css-8atqhb > .MuiTable-root > .MuiTableHead-root > .MuiTableRow-root > :nth-child(2)',
-      ).scrollIntoView();
+      cy.get('#scheduler-pagination > .MuiPagination-ul > :nth-child(3) > .MuiButtonBase-root').click();
 
       // Check the current page number.
       cy.get('#scheduler-pagination > .MuiPagination-ul .Mui-selected').should('have.text', '2');
 
       // Show scheduler information.
-      cy.get(
-        ':nth-child(6) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(1) > :nth-child(2) > .MuiTypography-root',
-      )
+      cy.get('#scheduler-table-body > :nth-child(1) > :nth-child(2)')
+        .scrollIntoView()
         .should('be.visible')
         .and('contain', 'scheduler-11');
 
@@ -230,9 +211,7 @@ describe('Schedulers', () => {
       // Check the current page number.
       cy.get('#scheduler-pagination > .MuiPagination-ul .Mui-selected').should('have.text', '3');
 
-      cy.get(
-        ':nth-child(6) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > :nth-child(2) > .MuiTypography-root',
-      )
+      cy.get('#scheduler-table-body > .MuiTableRow-root > :nth-child(2)')
         .should('be.visible')
         .and('contain', 'scheduler-2');
     });
@@ -244,9 +223,7 @@ describe('Schedulers', () => {
       // Check the current page number.
       cy.get('#scheduler-pagination > .MuiPagination-ul .Mui-selected').should('have.text', '3');
 
-      cy.get(
-        ':nth-child(6) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > :nth-child(2) > .MuiTypography-root',
-      )
+      cy.get('#scheduler-table-body > .MuiTableRow-root > .MuiTableCell-root')
         .should('be.visible')
         .and('contain', 'scheduler-2');
 
@@ -270,9 +247,7 @@ describe('Schedulers', () => {
       // Check the current page number.
       cy.get('#scheduler-pagination > .MuiPagination-ul .Mui-selected').should('have.text', '3');
 
-      cy.get(
-        ':nth-child(6) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > :nth-child(2) > .MuiTypography-root',
-      )
+      cy.get('#scheduler-table-body > .MuiTableRow-root > .MuiTableCell-root')
         .should('be.visible')
         .and('contain', 'scheduler-2');
 
@@ -288,9 +263,7 @@ describe('Schedulers', () => {
       // Check the current page number.
       cy.get('#scheduler-pagination > .MuiPagination-ul .Mui-selected').should('have.text', '3');
 
-      cy.get(
-        ':nth-child(6) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > :nth-child(2) > .MuiTypography-root',
-      )
+      cy.get('#scheduler-table-body > .MuiTableRow-root > .MuiTableCell-root')
         .should('be.visible')
         .and('contain', 'scheduler-2');
     });
@@ -313,9 +286,7 @@ describe('Schedulers', () => {
 
       cy.get('#scheduler-table-body').children().should('have.length', 5);
 
-      cy.get(
-        ':nth-child(6) > .show_searchContainer__6kD-7 > .MuiStack-root > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root',
-      ).type('scheduler-8{enter}');
+      cy.get('#free-solo-demo').type('scheduler-8{enter}');
 
       cy.get('#scheduler-table-body').children().should('have.length', 1);
 
@@ -323,9 +294,7 @@ describe('Schedulers', () => {
       cy.get('#scheduler-pagination > .MuiPagination-ul').should('not.exist');
 
       // Clear search box.
-      cy.get(
-        ':nth-child(6) > .show_searchContainer__6kD-7 > .MuiStack-root > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root',
-      ).clear();
+      cy.get('#free-solo-demo').clear();
 
       // If the search is empty, all schedulers will be displayed.
       cy.get('#scheduler-button').click();
@@ -348,14 +317,10 @@ describe('Schedulers', () => {
         },
       );
 
-      cy.get(
-        ':nth-child(6) > .show_searchContainer__6kD-7 > .MuiStack-root > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root',
-      ).type('scheduler-12{enter}');
+      cy.get('#free-solo-demo').type('scheduler-12{enter}');
 
       // No scheduler.
-      cy.get(
-        ':nth-child(6) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > .MuiTableCell-root',
-      )
+      cy.get('#scheduler-table-body > .MuiTableRow-root > .MuiTableCell-root')
         .should('be.visible')
         .and('contain', `You don't have scheduler cluster.`);
 
@@ -376,9 +341,7 @@ describe('Schedulers', () => {
         },
       );
 
-      cy.get(
-        ':nth-child(6) > .show_searchContainer__6kD-7 > .MuiStack-root > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root',
-      ).type('scheduler-12{enter}');
+      cy.get('#free-solo-demo').type('scheduler-12{enter}');
 
       // Show error message.
       cy.get('.MuiAlert-message').should('have.text', 'Failed to fetch');
@@ -446,9 +409,7 @@ describe('Schedulers', () => {
       // Go to next page.
       cy.get('#scheduler-pagination > .MuiPagination-ul > :nth-child(3) > .MuiButtonBase-root').click();
       cy.get('#scheduler-pagination > .MuiPagination-ul .Mui-selected').should('have.text', '2');
-      cy.get(
-        ':nth-child(6) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(5) > :nth-child(2) > .MuiTypography-root',
-      )
+      cy.get('#scheduler-table-body > :nth-child(5) > :nth-child(2)')
         .should('be.visible')
         .and('contain', 'scheduler-4');
       cy.get('#scheduler-4').click();
@@ -515,9 +476,7 @@ describe('Schedulers', () => {
         },
       ).as('delete');
 
-      cy.get(
-        ':nth-child(6) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(1) > :nth-child(2) > .MuiTypography-root',
-      )
+      cy.get('#scheduler-table-body > :nth-child(1) > :nth-child(2)')
         .should('be.visible')
         .and('contain', 'scheduler-7');
 
@@ -542,9 +501,7 @@ describe('Schedulers', () => {
         },
       ).as('delete');
 
-      cy.get(
-        ':nth-child(6) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(1) > :nth-child(2) > .MuiTypography-root',
-      )
+      cy.get('#scheduler-table-body > :nth-child(1) > :nth-child(2)')
         .should('be.visible')
         .and('contain', 'scheduler-7');
 
diff --git a/cypress/e2e/seed-peers/seed-peers.cy.ts b/cypress/e2e/seed-peers/seed-peers.cy.ts
index 36b17be5..3cbe3b51 100644
--- a/cypress/e2e/seed-peers/seed-peers.cy.ts
+++ b/cypress/e2e/seed-peers/seed-peers.cy.ts
@@ -63,39 +63,27 @@ describe('Seed peers', () => {
 
     it('can display seed peers table', () => {
       // Show hostname.
-      cy.get(
-        ':nth-child(9) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(1) > :nth-child(2) > .MuiTypography-root',
-      )
+      cy.get('#seed-peer-table-body > :nth-child(1) > :nth-child(2)')
         .scrollIntoView()
         .should('be.visible')
         .and('contain', 'seed-peer-10');
 
       // Show ip.
-      cy.get(
-        ':nth-child(9) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(1) > :nth-child(3) > .show_ipContainer__pzOmv',
-      )
+      cy.get('#seed-peer-table-body > :nth-child(1) > :nth-child(3)')
         .should('be.visible')
         .and('contain', '192.168.255.255');
 
       // Show port.
-      cy.get(':nth-child(9) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(1) > :nth-child(4)')
-        .should('be.visible')
-        .and('contain', '65006');
+      cy.get('#seed-peer-table-body > :nth-child(1) > :nth-child(4)').should('be.visible').and('contain', '65006');
 
       // Show download port.
-      cy.get(':nth-child(9) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(1) > :nth-child(5)')
-        .should('be.visible')
-        .and('contain', '65002');
+      cy.get('#seed-peer-table-body > :nth-child(1) > :nth-child(5)').should('be.visible').and('contain', '65002');
 
       // Show object storage port.
-      cy.get(':nth-child(9) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(1) > :nth-child(6)')
-        .should('be.visible')
-        .and('contain', '443');
+      cy.get('#seed-peer-table-body > :nth-child(1) > :nth-child(6)').should('be.visible').and('contain', '443');
 
       // Show type.
-      cy.get(':nth-child(9) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(1) > :nth-child(7)')
-        .should('be.visible')
-        .and('contain', 'Super');
+      cy.get('#seed-peer-table-body > :nth-child(1) > :nth-child(7)').should('be.visible').and('contain', 'Super');
 
       // Show state.
       cy.get(':nth-child(1) > :nth-child(8) > .MuiChip-root')
@@ -132,9 +120,7 @@ describe('Seed peers', () => {
     });
 
     it('there should be a message indicating that there is no seed peer', () => {
-      cy.get(
-        ':nth-child(8) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > .MuiTableCell-root',
-      )
+      cy.get('#seed-peer-table-body > .MuiTableRow-root > .MuiTableCell-root')
         .scrollIntoView()
         .should('be.visible')
         .and('contain', `You don't have seed peer cluster.`);
@@ -172,9 +158,7 @@ describe('Seed peers', () => {
     });
 
     it('there should be a message indicating that there is no seed peer', () => {
-      cy.get(
-        ':nth-child(8) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > .MuiTableCell-root',
-      )
+      cy.get('#seed-peer-table-body > .MuiTableRow-root > .MuiTableCell-root')
         .scrollIntoView()
         .should('be.visible')
         .and('contain', `You don't have seed peer cluster.`);
@@ -201,9 +185,7 @@ describe('Seed peers', () => {
       cy.get('#seed-peer-pagination > .MuiPagination-ul .Mui-selected').scrollIntoView().should('have.text', '2');
 
       // Show seed peer information.
-      cy.get(
-        ':nth-child(9) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(4) > :nth-child(2) > .MuiTypography-root',
-      )
+      cy.get('#seed-peer-table-body > :nth-child(4) > :nth-child(2)')
         .should('be.visible')
         .and('contain', 'seed-peer-11');
 
@@ -218,9 +200,7 @@ describe('Seed peers', () => {
       // Check the current page number.
       cy.get('#seed-peer-pagination > .MuiPagination-ul .Mui-selected').scrollIntoView().should('have.text', '3');
 
-      cy.get(
-        ':nth-child(9) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > :nth-child(2) > .MuiTypography-root',
-      )
+      cy.get('#seed-peer-table-body > .MuiTableRow-root > :nth-child(2)')
         .should('be.visible')
         .and('contain', 'seed-peer-3');
 
@@ -239,9 +219,7 @@ describe('Seed peers', () => {
       cy.get('#seed-peer-pagination > .MuiPagination-ul .Mui-selected').should('have.text', '3');
 
       // show hostname.
-      cy.get(
-        ':nth-child(9) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > :nth-child(2) > .MuiTypography-root',
-      )
+      cy.get('#seed-peer-table-body > .MuiTableRow-root > :nth-child(2)')
         .should('be.visible')
         .and('contain', 'seed-peer-3');
 
@@ -266,9 +244,7 @@ describe('Seed peers', () => {
       cy.get('#seed-peer-pagination > .MuiPagination-ul .Mui-selected').should('have.text', '3');
 
       // show hostname.
-      cy.get(
-        ':nth-child(9) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > :nth-child(2) > .MuiTypography-root',
-      )
+      cy.get('#seed-peer-table-body > .MuiTableRow-root > :nth-child(2)')
         .should('be.visible')
         .and('contain', 'seed-peer-3');
 
@@ -281,16 +257,12 @@ describe('Seed peers', () => {
       // Go back to the last page。
       cy.go('back');
 
+      cy.get('.css-1o0u1hg-MuiPaper-root > .MuiChip-root > .MuiChip-label').scrollIntoView();
+
       // Check the current page number.
       cy.get('#seed-peer-pagination > .MuiPagination-ul .Mui-selected').should('have.text', '3');
 
-      // show hostname.
-      cy.get(
-        ':nth-child(9) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > :nth-child(2) > .MuiTypography-root',
-      )
-        .scrollIntoView()
-        .should('be.visible')
-        .and('contain', 'seed-peer-3');
+      cy.get('#seed-peer-table-body > .MuiTableRow-root > :nth-child(1)').should('have.text', 3);
     });
   });
 
@@ -311,9 +283,7 @@ describe('Seed peers', () => {
 
       cy.get('#seed-peer-table-body').children().should('have.length', 5);
 
-      cy.get(
-        ':nth-child(9) > .show_searchContainer__6kD-7 > .MuiStack-root > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root',
-      ).type('seed-peer-4{enter}');
+      cy.get('#seedPeerSearch').type('seed-peer-4{enter}');
 
       cy.get('#seed-peer-table-body').children().should('have.length', 1);
 
@@ -344,14 +314,10 @@ describe('Seed peers', () => {
         },
       );
 
-      cy.get(
-        ':nth-child(9) > .show_searchContainer__6kD-7 > .MuiStack-root > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root',
-      ).type('seed-peer-12{enter}');
+      cy.get('#seedPeerSearch').type('seed-peer-12{enter}');
 
       // No seed peer.
-      cy.get(
-        ':nth-child(9) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > .MuiTableCell-root',
-      )
+      cy.get('#seed-peer-table-body > .MuiTableRow-root > .MuiTableCell-root')
         .should('be.visible')
         .and('contain', `You don't have seed peer cluster.`);
 
@@ -372,9 +338,7 @@ describe('Seed peers', () => {
         },
       );
 
-      cy.get(
-        ':nth-child(9) > .show_searchContainer__6kD-7 > .MuiStack-root > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root',
-      ).type('seed-peer-3{enter}');
+      cy.get('#seedPeerSearch').type('seed-peer-3{enter}');
 
       // Show error message.
       cy.get('.MuiAlert-message').should('have.text', 'Failed to fetch').should('be.visible');
@@ -394,9 +358,7 @@ describe('Seed peers', () => {
       // Check the current page number.
       cy.get('#seed-peer-pagination > .MuiPagination-ul .Mui-selected').should('have.text', '3');
 
-      cy.get(
-        ':nth-child(9) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > :nth-child(2) > .MuiTypography-root',
-      )
+      cy.get('#seed-peer-table-body > .MuiTableRow-root > :nth-child(2)')
         .should('be.visible')
         .and('contain', 'seed-peer-3');
 
@@ -441,9 +403,7 @@ describe('Seed peers', () => {
       // Check if the total number of pages is 4.
       cy.get('#seed-peer-pagination > .MuiPagination-ul').children().should('have.length', 4);
 
-      cy.get(
-        ':nth-child(9) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(5) > :nth-child(2) > .MuiTypography-root',
-      )
+      cy.get('#seed-peer-table-body > :nth-child(5) > :nth-child(2)')
         .scrollIntoView()
         .should('be.visible')
         .and('contain', 'seed-peer-9');
@@ -459,9 +419,7 @@ describe('Seed peers', () => {
       // Check if the total number of pages is 5.
       cy.get('#seed-peer-pagination > .MuiPagination-ul').children().should('have.length', 5);
 
-      cy.get(
-        ':nth-child(9) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(5) > :nth-child(2) > .MuiTypography-root',
-      )
+      cy.get('#seed-peer-table-body > :nth-child(5) > :nth-child(2)')
         .scrollIntoView()
         .should('be.visible')
         .and('contain', 'seed-peer-9');
@@ -511,9 +469,7 @@ describe('Seed peers', () => {
     it('try to delete seed peer using guest user', () => {
       cy.guestSignin();
 
-      cy.get(
-        ':nth-child(9) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(1) > :nth-child(2) > .MuiTypography-root',
-      )
+      cy.get('#seed-peer-table-body > :nth-child(1) > :nth-child(2)')
         .scrollIntoView()
         .should('be.visible')
         .and('contain', 'seed-peer-10');
@@ -539,9 +495,7 @@ describe('Seed peers', () => {
     });
 
     it('should handle API error response', () => {
-      cy.get(
-        ':nth-child(9) > .css-8atqhb > .MuiTable-root > .MuiTableBody-root > :nth-child(1) > :nth-child(2) > .MuiTypography-root',
-      )
+      cy.get('#seed-peer-table-body > :nth-child(1) > :nth-child(2)')
         .scrollIntoView()
         .should('be.visible')
         .and('contain', 'seed-peer-10');
diff --git a/src/components/clusters/edit.tsx b/src/components/clusters/edit.tsx
index 67f5c6d2..4bc8a8d1 100644
--- a/src/components/clusters/edit.tsx
+++ b/src/components/clusters/edit.tsx
@@ -12,6 +12,7 @@ import {
   Tooltip,
   Typography,
   Paper,
+  Skeleton,
 } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 import styles from './edit.module.css';
@@ -21,11 +22,14 @@ import { getCluster, updateCluster, getClusterResponse } from '../../lib/api';
 import CancelIcon from '@mui/icons-material/Cancel';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { useNavigate, useParams } from 'react-router-dom';
+import LoadingBackdrop from '../loading-backdrop';
 
 export default function EditCluster() {
   const [successMessage, setSuccessMessage] = useState(false);
   const [errorMessage, setErrorMessage] = useState(false);
   const [errorMessageText, setErrorMessageText] = useState('');
+  const [pageLoding, setPageLoding] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [bioError, setBioError] = useState(false);
   const [seedPeerLoadLimitError, setSeedPeerLoadLimitError] = useState(false);
   const [peerLoadLimitError, setPeerLoadLimitError] = useState(false);
@@ -82,12 +86,19 @@ export default function EditCluster() {
   useEffect(() => {
     (async function () {
       try {
+        setPageLoding(true);
+        setIsLoading(true);
+
         if (typeof params.id === 'string') {
           const cluster = await getCluster(params.id);
           setCluster(cluster);
+          setPageLoding(false);
+          setIsLoading(false);
         }
       } catch (error) {
         if (error instanceof Error) {
+          setPageLoding(false);
+          setIsLoading(false);
           setErrorMessage(true);
           setErrorMessageText(error.message);
         }
@@ -584,11 +595,11 @@ export default function EditCluster() {
 
     const canSubmit = Boolean(
       !informationForm.filter((item) => item.syncError).length &&
-      !scopesForm.filter((item) => item.syncError).length &&
-      !configForm.filter((item) => item.syncError).length &&
-      Boolean(!idcText) &&
-      Boolean(!cidrsText) &&
-      Boolean(!hostnamesText),
+        !scopesForm.filter((item) => item.syncError).length &&
+        !configForm.filter((item) => item.syncError).length &&
+        Boolean(!idcText) &&
+        Boolean(!cidrsText) &&
+        Boolean(!hostnamesText),
     );
 
     const formdata = {
@@ -632,6 +643,7 @@ export default function EditCluster() {
 
   return (
     <Grid>
+      <LoadingBackdrop open={pageLoding} />
       <Snackbar
         open={successMessage}
         autoHideDuration={3000}
@@ -659,12 +671,30 @@ export default function EditCluster() {
       <Paper variant="outlined" sx={{ display: 'inline-flex', alignItems: 'center', mb: '1rem', p: '1rem' }}>
         <Box component="img" src="/icons/cluster/cluster.svg" sx={{ width: '2.6rem', height: '2.6rem', mr: '1rem' }} />
         <Box>
-          <Typography component="div" variant="body1" fontFamily="mabry-bold">
-            ID:&nbsp;&nbsp;{cluster.id}
-          </Typography>
-          <Typography component="div" variant="body1" fontFamily="mabry-bold">
-            Name:&nbsp;&nbsp;{cluster.name}
-          </Typography>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography component="span" variant="body1" fontFamily="mabry-bold">
+              ID:&nbsp;&nbsp;
+            </Typography>
+            {isLoading ? (
+              <Skeleton sx={{ width: '2rem' }} />
+            ) : (
+              <Typography component="div" variant="body1" fontFamily="mabry-bold">
+                {cluster.id}
+              </Typography>
+            )}
+          </Box>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography component="span" variant="body1" fontFamily="mabry-bold">
+              Name:&nbsp;&nbsp;
+            </Typography>
+            {isLoading ? (
+              <Skeleton sx={{ width: '4rem' }} />
+            ) : (
+              <Typography component="div" variant="body1" fontFamily="mabry-bold">
+                {cluster.name}
+              </Typography>
+            )}
+          </Box>
         </Box>
       </Paper>
       <Grid component="form" noValidate onSubmit={handleSubmit}>
diff --git a/src/components/clusters/index.tsx b/src/components/clusters/index.tsx
index 236f37b7..bfd7fd3e 100644
--- a/src/components/clusters/index.tsx
+++ b/src/components/clusters/index.tsx
@@ -34,6 +34,7 @@ import MoreTimeIcon from '@mui/icons-material/MoreTime';
 import ArrowCircleRightIcon from '@mui/icons-material/ArrowCircleRight';
 import { useNavigate } from 'react-router-dom';
 import { DEFAULT_PAGE_SIZE, MAX_PAGE_SIZE } from '../../lib/constants';
+import LoadingBackdrop from '../loading-backdrop';
 
 const theme = createTheme({
   breakpoints: {
@@ -58,6 +59,7 @@ const theme = createTheme({
 export default function Clusters() {
   const [errorMessage, setErrorMessage] = useState(false);
   const [errorMessageText, setErrorMessageText] = useState('');
+  const [pageLoding, setPageLoding] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [clusterIsLoading, setClusterIsLoading] = useState(true);
   const [clusterPage, setClusterPage] = useState(1);
@@ -68,7 +70,6 @@ export default function Clusters() {
   const [scheduler, setScheduler] = useState<getSchedulersResponse[]>([]);
   const [seedPeer, setSeedPeer] = useState<getSeedPeersResponse[]>([]);
   const [allClusters, setAllClusters] = useState<getClustersResponse[]>([]);
-  
   const navigate = useNavigate();
   const query = useQuery();
   const page = query.get('page') ? parseInt(query.get('page') as string, 10) || 1 : 1;
@@ -76,6 +77,7 @@ export default function Clusters() {
   useEffect(() => {
     (async function () {
       try {
+        setPageLoding(true);
         setIsLoading(true);
         setClusterIsLoading(true);
         setClusterPage(page);
@@ -90,12 +92,14 @@ export default function Clusters() {
         setScheduler(scheduler);
         setSeedPeer(seedPeer);
         setClusterCount(cluster);
+        setPageLoding(false);
         setIsLoading(false);
         setClusterIsLoading(false);
       } catch (error) {
         if (error instanceof Error) {
           setErrorMessage(true);
           setErrorMessageText(error.message);
+          setPageLoding(false);
           setIsLoading(false);
         }
       }
@@ -175,6 +179,7 @@ export default function Clusters() {
 
   return (
     <Box flex="1">
+      <LoadingBackdrop open={pageLoding} />
       <Snackbar
         open={errorMessage}
         autoHideDuration={3000}
diff --git a/src/components/clusters/show.tsx b/src/components/clusters/show.tsx
index 7e72605b..6a73183b 100644
--- a/src/components/clusters/show.tsx
+++ b/src/components/clusters/show.tsx
@@ -52,11 +52,13 @@ import {
   DEFAULT_SEED_PEER_TABLE_PAGE_SIZE,
 } from '../../lib/constants';
 import { getPaginatedList, useQuery } from '../../lib/utils';
+import LoadingBackdrop from '../loading-backdrop';
 
 export default function ShowCluster() {
   const [successMessage, setSuccessMessage] = useState(false);
   const [errorMessage, setErrorMessage] = useState(false);
   const [errorMessageText, setErrorMessageText] = useState('');
+  const [pageLoding, setPageLoding] = useState(false);
   const [informationIsLoading, setInformationIsLoading] = useState(true);
   const [schedulerTableIsLoading, setSchedulerTableIsLoading] = useState(true);
   const [seedPeerTableIsLoading, setSeedPeerTableIsLoading] = useState(true);
@@ -130,6 +132,7 @@ export default function ShowCluster() {
   useEffect(() => {
     (async function () {
       try {
+        setPageLoding(true);
         setInformationIsLoading(true);
         setSeedPeerTableIsLoading(true);
         setSchedulerTableIsLoading(true);
@@ -162,7 +165,7 @@ export default function ShowCluster() {
             setScheduler(scheduler);
             setSchedulerCount(scheduler);
           }
-
+          setPageLoding(false);
           setSchedulerTableIsLoading(false);
           setSeedPeerTableIsLoading(false);
           setInformationIsLoading(false);
@@ -171,6 +174,7 @@ export default function ShowCluster() {
         if (error instanceof Error) {
           setErrorMessage(true);
           setErrorMessageText(error.message);
+          setPageLoding(false);
           setInformationIsLoading(false);
         }
       }
@@ -365,16 +369,16 @@ export default function ShowCluster() {
 
       const schedulers = searchSchedulers
         ? await getSchedulers({
-          scheduler_cluster_id: String(cluster.scheduler_cluster_id),
-          page: 1,
-          per_page: MAX_PAGE_SIZE,
-          host_name: searchSchedulers,
-        })
+            scheduler_cluster_id: String(cluster.scheduler_cluster_id),
+            page: 1,
+            per_page: MAX_PAGE_SIZE,
+            host_name: searchSchedulers,
+          })
         : await getSchedulers({
-          scheduler_cluster_id: String(cluster.scheduler_cluster_id),
-          page: 1,
-          per_page: MAX_PAGE_SIZE,
-        });
+            scheduler_cluster_id: String(cluster.scheduler_cluster_id),
+            page: 1,
+            per_page: MAX_PAGE_SIZE,
+          });
 
       if (schedulers.length > 0) {
         setScheduler(schedulers);
@@ -399,16 +403,16 @@ export default function ShowCluster() {
       setSeedPeerTableIsLoading(true);
       const seedPeers = searchSeedPeers
         ? await getSeedPeers({
-          seed_peer_cluster_id: String(cluster.seed_peer_cluster_id),
-          page: 1,
-          per_page: MAX_PAGE_SIZE,
-          host_name: searchSeedPeers,
-        })
+            seed_peer_cluster_id: String(cluster.seed_peer_cluster_id),
+            page: 1,
+            per_page: MAX_PAGE_SIZE,
+            host_name: searchSeedPeers,
+          })
         : await getSeedPeers({
-          seed_peer_cluster_id: String(cluster.seed_peer_cluster_id),
-          page: 1,
-          per_page: MAX_PAGE_SIZE,
-        });
+            seed_peer_cluster_id: String(cluster.seed_peer_cluster_id),
+            page: 1,
+            per_page: MAX_PAGE_SIZE,
+          });
 
       if (seedPeers.length > 0) {
         setSeedPeer(seedPeers);
@@ -430,6 +434,7 @@ export default function ShowCluster() {
 
   return (
     <ThemeProvider theme={theme}>
+      <LoadingBackdrop open={pageLoding} />
       <Snackbar
         open={successMessage}
         autoHideDuration={3000}
@@ -896,7 +901,8 @@ export default function ShowCluster() {
             onChange={(_event: any, newPage: number) => {
               setSchedulerPage(newPage);
               navigate(
-                `/clusters/${params.id}${newPage > 1 ? `?schedulerPage=${newPage}` : ''}${seedPeerPage > 1 ? `${newPage > 1 ? '&' : '?'}seedPeerPage=${seedPeerPage}` : ''
+                `/clusters/${params.id}${newPage > 1 ? `?schedulerPage=${newPage}` : ''}${
+                  seedPeerPage > 1 ? `${newPage > 1 ? '&' : '?'}seedPeerPage=${seedPeerPage}` : ''
                 }`,
               );
             }}
@@ -1182,7 +1188,8 @@ export default function ShowCluster() {
             onChange={(_event: any, newPage: number) => {
               setSeedPeerPage(newPage);
               navigate(
-                `/clusters/${params.id}${schedulerPage > 1 ? `?schedulerPage=${schedulerPage}` : ''}${newPage > 1 ? `${schedulerPage > 1 ? '&' : '?'}seedPeerPage=${newPage}` : ''
+                `/clusters/${params.id}${schedulerPage > 1 ? `?schedulerPage=${schedulerPage}` : ''}${
+                  newPage > 1 ? `${schedulerPage > 1 ? '&' : '?'}seedPeerPage=${newPage}` : ''
                 }`,
               );
             }}
diff --git a/src/components/developer/tokens/edit.tsx b/src/components/developer/tokens/edit.tsx
index 6d70e16d..f0cf41b5 100644
--- a/src/components/developer/tokens/edit.tsx
+++ b/src/components/developer/tokens/edit.tsx
@@ -18,6 +18,7 @@ import {
   FormGroup,
   FormHelperText,
   Paper,
+  Skeleton,
 } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { formatDate, getExpiredTime } from '../../../lib/utils';
@@ -27,6 +28,7 @@ import { getToken, updateTokens } from '../../../lib/api';
 import HelpIcon from '@mui/icons-material/Help';
 import CancelIcon from '@mui/icons-material/Cancel';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import LoadingBackdrop from '../../loading-backdrop';
 
 const theme = createTheme({
   palette: {
@@ -40,6 +42,8 @@ export default function UpdateTokens() {
   const [successMessage, setSuccessMessage] = useState(false);
   const [errorMessage, setErrorMessage] = useState(false);
   const [errorMessageText, setErrorMessageText] = useState('');
+  const [pageLoding, setPageLoding] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [bioError, setBioError] = useState(false);
   const [selectedTime, setSelectedTime] = useState('');
   const [expiredTime, setExpiredTime] = useState('');
@@ -96,6 +100,9 @@ export default function UpdateTokens() {
   useEffect(() => {
     (async function () {
       try {
+        setPageLoding(true);
+        setIsLoading(true);
+
         if (params?.id) {
           const tokens = await getToken(params?.id);
           setTokens(tokens);
@@ -103,9 +110,13 @@ export default function UpdateTokens() {
           setPreheat(tokens.scopes.includes('preheat'));
           setJob(tokens.scopes.includes('job'));
           setCluster(tokens.scopes.includes('cluster'));
+          setPageLoding(false);
+          setIsLoading(false);
         }
       } catch (error) {
         if (error instanceof Error) {
+          setPageLoding(false);
+          setIsLoading(false);
           setErrorMessage(true);
           setErrorMessageText(error.message);
         }
@@ -184,6 +195,7 @@ export default function UpdateTokens() {
 
   return (
     <Box>
+      <LoadingBackdrop open={pageLoding} />
       <Snackbar
         open={successMessage}
         autoHideDuration={3000}
@@ -215,12 +227,30 @@ export default function UpdateTokens() {
         >
           <Box component="img" src="/icons/tokens/key.svg" sx={{ width: '2.6rem', height: '2.6rem', mr: '1rem' }} />
           <Box>
-            <Typography component="div" variant="body1" fontFamily="mabry-bold">
-              ID:&nbsp;&nbsp;{tokens.id}
-            </Typography>
-            <Typography component="div" variant="body1" fontFamily="mabry-bold">
-              Name:&nbsp;&nbsp;{tokens.name}
-            </Typography>
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Typography component="span" variant="body1" fontFamily="mabry-bold">
+                ID:&nbsp;&nbsp;
+              </Typography>
+              {isLoading ? (
+                <Skeleton sx={{ width: '2rem' }} />
+              ) : (
+                <Typography component="div" variant="body1" fontFamily="mabry-bold">
+                  {tokens.id}
+                </Typography>
+              )}
+            </Box>
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Typography component="span" variant="body1" fontFamily="mabry-bold">
+                Name:&nbsp;&nbsp;
+              </Typography>
+              {isLoading ? (
+                <Skeleton sx={{ width: '3rem' }} />
+              ) : (
+                <Typography component="div" variant="body1" fontFamily="mabry-bold">
+                  {tokens.name}
+                </Typography>
+              )}
+            </Box>
           </Box>
         </Paper>
         <Box component="form" onSubmit={handleSubmit} noValidate>
diff --git a/src/components/developer/tokens/index.tsx b/src/components/developer/tokens/index.tsx
index 75eca797..68135eb7 100644
--- a/src/components/developer/tokens/index.tsx
+++ b/src/components/developer/tokens/index.tsx
@@ -28,6 +28,7 @@ import AddIcon from '@mui/icons-material/Add';
 import CancelIcon from '@mui/icons-material/Cancel';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { DEFAULT_PAGE_SIZE, MAX_PAGE_SIZE } from '../../../lib/constants';
+import LoadingBackdrop from '../../loading-backdrop';
 
 const theme = createTheme({
   palette: {
@@ -44,6 +45,7 @@ export default function PersonalAccessTokens() {
   const [successMessage, setSuccessMessage] = useState(false);
   const [errorMessage, setErrorMessage] = useState(false);
   const [errorMessageText, setErrorMessageText] = useState('');
+  const [pageLoding, setPageLoding] = useState(false);
   const [openDeletToken, setOpenDeletToken] = useState(false);
   const [deleteLoadingButton, setDeleteLoadingButton] = useState(false);
   const [tokenSelectedID, setTokenSelectedID] = useState('');
@@ -62,7 +64,6 @@ export default function PersonalAccessTokens() {
 
   useEffect(() => {
     const token = localStorage.getItem('token');
-
     setTokensPage(page);
 
     if (token) {
@@ -74,11 +75,15 @@ export default function PersonalAccessTokens() {
 
     (async function () {
       try {
+        setPageLoding(true);
+
         const token = await getTokens({ page: 1, per_page: MAX_PAGE_SIZE });
 
         setToken(token);
+        setPageLoding(false);
       } catch (error) {
         if (error instanceof Error) {
+          setPageLoding(false);
           setErrorMessage(true);
           setErrorMessageText(error.message);
         }
@@ -105,8 +110,6 @@ export default function PersonalAccessTokens() {
     }
   }, [token, tokensPage]);
 
-  console.log(token, allTokens);
-
   const handleDeleteClose = async (row: any) => {
     setOpenDeletToken(true);
     setTokenSelectedID(row.id);
@@ -153,6 +156,7 @@ export default function PersonalAccessTokens() {
 
   return (
     <ThemeProvider theme={theme}>
+      <LoadingBackdrop open={pageLoding} />
       <Snackbar
         open={successMessage}
         autoHideDuration={3000}
diff --git a/src/components/insight/peers/index.tsx b/src/components/insight/peers/index.tsx
index 7def832b..f66f5fa5 100644
--- a/src/components/insight/peers/index.tsx
+++ b/src/components/insight/peers/index.tsx
@@ -43,6 +43,7 @@ import { MAX_PAGE_SIZE } from '../../../lib/constants';
 import styles from './inde.module.css';
 import { LoadingButton } from '@mui/lab';
 import { exportCSVFile } from '../../../lib/utils';
+import LoadingBackdrop from '../../loading-backdrop';
 
 ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, Title);
 Chart.defaults.font.family = 'mabry-light';
@@ -70,6 +71,7 @@ const theme = createTheme({
 export default function Peer() {
   const [errorMessage, setErrorMessage] = useState(false);
   const [errorMessageText, setErrorMessageText] = useState('');
+  const [pageLoding, setPageLoding] = useState(false);
   const [peer, setPeer] = useState<getPeersResponse[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [openExport, setOpenExport] = useState(false);
@@ -100,6 +102,8 @@ export default function Peer() {
     (async function () {
       try {
         setIsLoading(true);
+        setPageLoding(true);
+
         const peer = await getPeers({ page: 1, per_page: MAX_PAGE_SIZE });
         const clusterNames = Array.from(new Set(peer.map((item) => item.scheduler_cluster.name)));
 
@@ -157,11 +161,13 @@ export default function Peer() {
         const active = (peer.filter((item) => item.state === 'active').length / peer.length) * 100;
 
         setClusterActive(Number(active.toFixed(2)));
+        setPageLoding(false);
         setIsLoading(false);
       } catch (error) {
         if (error instanceof Error) {
           setErrorMessage(true);
           setErrorMessageText(error.message);
+          setPageLoding(false);
           setIsLoading(false);
         }
       }
@@ -550,6 +556,7 @@ export default function Peer() {
 
   return (
     <Box>
+      <LoadingBackdrop open={pageLoding} />
       <Snackbar
         open={errorMessage}
         autoHideDuration={3000}
diff --git a/src/components/job/preheats/index.tsx b/src/components/job/preheats/index.tsx
index 9f3f2192..935103b8 100644
--- a/src/components/job/preheats/index.tsx
+++ b/src/components/job/preheats/index.tsx
@@ -25,10 +25,12 @@ import { useEffect, useState } from 'react';
 import { getJobs, JobsResponse } from '../../../lib/api';
 import { DEFAULT_PAGE_SIZE } from '../../../lib/constants';
 import { getDatetime, useQuery } from '../../../lib/utils';
+import LoadingBackdrop from '../../loading-backdrop';
 
 export default function Preheats() {
   const [errorMessage, setErrorMessage] = useState(false);
   const [errorMessageText, setErrorMessageText] = useState('');
+  const [pageLoding, setPageLoding] = useState(false);
   const [preheatPage, setPreheatPage] = useState(1);
   const [preheatTotalPages, setPreheatTotalPages] = useState(1);
   const [isLoading, setIsLoading] = useState(false);
@@ -55,6 +57,7 @@ export default function Preheats() {
   useEffect(() => {
     (async function () {
       try {
+        setPageLoding(true);
         setIsLoading(true);
         setPreheatPage(page);
 
@@ -74,10 +77,13 @@ export default function Preheats() {
         states === 0 ? setShouldPoll(false) : setShouldPoll(true);
 
         setIsLoading(false);
+        setPageLoding(false);
       } catch (error) {
         if (error instanceof Error) {
           setErrorMessage(true);
           setErrorMessageText(error.message);
+          setPageLoding(false);
+          setIsLoading(false);
         }
       }
     })();
@@ -142,6 +148,7 @@ export default function Preheats() {
 
   return (
     <ThemeProvider theme={theme}>
+      <LoadingBackdrop open={pageLoding} />
       <Snackbar
         open={errorMessage}
         autoHideDuration={3000}
diff --git a/src/components/job/preheats/new.tsx b/src/components/job/preheats/new.tsx
index 377812b7..9418fd95 100644
--- a/src/components/job/preheats/new.tsx
+++ b/src/components/job/preheats/new.tsx
@@ -34,10 +34,12 @@ import { createJob, getClusters } from '../../../lib/api';
 import { MAX_PAGE_SIZE } from '../../../lib/constants';
 import styles from './new.module.css';
 import AddIcon from '@mui/icons-material/Add';
+import LoadingBackdrop from '../../loading-backdrop';
 
 export default function NewPreheat() {
   const [successMessage, setSuccessMessage] = useState(false);
   const [errorMessage, setErrorMessage] = useState(false);
+  const [pageLoding, setPageLoding] = useState(false);
   const [errorMessageText, setErrorMessageText] = useState('');
   const [bioError, setBioError] = useState(false);
   const [urlError, setURLError] = useState(false);
@@ -64,8 +66,18 @@ export default function NewPreheat() {
 
   useEffect(() => {
     (async function () {
-      const cluster = await getClusters({ page: 1, per_page: MAX_PAGE_SIZE });
-      setCluster(cluster);
+      try {
+        setPageLoding(true);
+        const cluster = await getClusters({ page: 1, per_page: MAX_PAGE_SIZE });
+        setCluster(cluster);
+        setPageLoding(false);
+      } catch (error) {
+        if (error instanceof Error) {
+          setErrorMessage(true);
+          setErrorMessageText(error.message);
+          setPageLoding(false);
+        }
+      }
     })();
   }, []);
 
@@ -200,8 +212,8 @@ export default function NewPreheat() {
 
       formProps: {
         id: 'filteredQueryParams',
-      name: 'filteredQueryParams',
-      label: 'Filter Query Params',
+        name: 'filteredQueryParams',
+        label: 'Filter Query Params',
         placeholder: 'Press the Enter key to confirm the entered value',
         error: filterError,
         helperText: filterError ? filterHelperText : '',
@@ -351,6 +363,7 @@ export default function NewPreheat() {
 
   return (
     <ThemeProvider theme={theme}>
+      <LoadingBackdrop open={pageLoding} />
       <Snackbar
         open={successMessage}
         autoHideDuration={3000}
diff --git a/src/components/job/preheats/show.tsx b/src/components/job/preheats/show.tsx
index e3a66332..456700fc 100644
--- a/src/components/job/preheats/show.tsx
+++ b/src/components/job/preheats/show.tsx
@@ -25,11 +25,13 @@ import MoreTimeIcon from '@mui/icons-material/MoreTime';
 import { getDatetime } from '../../../lib/utils';
 import styles from './show.module.css';
 import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
+import LoadingBackdrop from '../../loading-backdrop';
 
 export default function ShowPreheat() {
   const [errorMessage, setErrorMessage] = useState(false);
   const [errorMessageText, setErrorMessageText] = useState('');
   const [isLoading, setIsLoading] = useState(false);
+  const [pageLoding, setPageLoding] = useState(false);
   const [shouldPoll, setShouldPoll] = useState(false);
   const [errorLog, setErrorLog] = useState(false);
   const [preheat, setPreheat] = useState<getJobResponse>();
@@ -49,13 +51,14 @@ export default function ShowPreheat() {
 
   useEffect(() => {
     setIsLoading(true);
+    setPageLoding(true);
     (async function () {
       try {
         if (typeof params.id === 'string') {
           const job = await getJob(params.id);
           setPreheat(job);
           setIsLoading(false);
-
+          setPageLoding(false);
           if (job.result.State !== 'SUCCESS' && job.result.State !== 'FAILURE') {
             setShouldPoll(true);
           }
@@ -65,6 +68,7 @@ export default function ShowPreheat() {
           setErrorMessage(true);
           setErrorMessageText(error.message);
           setIsLoading(false);
+          setPageLoding(false);
         }
       }
     })();
@@ -112,6 +116,7 @@ export default function ShowPreheat() {
 
   return (
     <ThemeProvider theme={theme}>
+      <LoadingBackdrop open={pageLoding} />
       <Snackbar
         open={errorMessage}
         autoHideDuration={3000}
diff --git a/src/components/loading-backdrop.tsx b/src/components/loading-backdrop.tsx
new file mode 100644
index 00000000..80a43ad3
--- /dev/null
+++ b/src/components/loading-backdrop.tsx
@@ -0,0 +1,21 @@
+import { Backdrop, Box } from '@mui/material';
+
+interface LoadingBackdropProps {
+  open: boolean;
+}
+
+const LoadingBackdrop: React.FC<LoadingBackdropProps> = ({ open }) => {
+  return (
+    <Backdrop
+      open={open}
+      sx={{
+        zIndex: (theme) => theme.zIndex.drawer + 1,
+        backgroundColor: 'rgba(0,0,0,0.3)',
+      }}
+    >
+      <Box component="img" sx={{ width: '4rem', height: '4rem' }} src="/icons/cluster/page-loading.svg" />
+    </Backdrop>
+  );
+};
+
+export default LoadingBackdrop;
diff --git a/src/components/menu/index.tsx b/src/components/menu/index.tsx
index 5380f1b7..dbc91c7b 100644
--- a/src/components/menu/index.tsx
+++ b/src/components/menu/index.tsx
@@ -29,6 +29,7 @@ import { ROLE_ROOT, ROLE_GUEST } from '../../lib/constants';
 interface MyContextType {
   user: getUserResponse;
   role: string;
+  pageLoding: boolean;
   handleUserUpdate: (newUser: getUserResponse) => void;
 }
 
@@ -47,6 +48,7 @@ export const MyContext = createContext<MyContextType>({
     bio: '',
   },
   role: '',
+  pageLoding: false,
   handleUserUpdate: () => {
     return;
   },
@@ -94,26 +96,28 @@ export default function Layout(props: any) {
   const navigate = useNavigate();
 
   useEffect(() => {
-    setPageLoding(true);
-    const payload = getJwtPayload();
-    setPageTitle(location.pathname);
-
     (async function () {
       try {
+        setPageLoding(true);
+        const payload = getJwtPayload();
+        setPageTitle(location.pathname);
+
         if (payload?.id) {
           const [user, userRoles] = await Promise.all([getUser(payload?.id), getUserRoles(payload?.id)]);
           setUser(user);
           setRole(userRoles.includes(ROLE_ROOT) ? ROLE_ROOT : ROLE_GUEST);
+          setPageLoding(false);
         } else {
+          setPageLoding(false);
           navigate('/signin');
         }
       } catch (error) {
         if (error instanceof Error) {
+          setPageLoding(false);
           setErrorMessage(true);
           setErrorMessageText(error.message);
         }
       }
-      setPageLoding(false);
     })();
 
     if (location.state?.firstLogin) {
@@ -239,16 +243,7 @@ export default function Layout(props: any) {
   };
 
   return (
-    <MyContext.Provider value={{ user, role, handleUserUpdate }}>
-      <Backdrop
-        open={pageLoding}
-        sx={{
-          zIndex: (theme) => theme.zIndex.drawer + 1,
-          backgroundColor: 'rgba(0,0,0,0.3)',
-        }}
-      >
-        <Box component="img" sx={{ width: '4rem', height: '4rem' }} src="/icons/cluster/page-loading.svg" />
-      </Backdrop>
+    <MyContext.Provider value={{ user, role, handleUserUpdate, pageLoding }}>
       <Snackbar
         open={firstLogin}
         autoHideDuration={60000}
diff --git a/src/components/profile/index.tsx b/src/components/profile/index.tsx
index e392db3c..7c8ab832 100644
--- a/src/components/profile/index.tsx
+++ b/src/components/profile/index.tsx
@@ -28,6 +28,7 @@ import styles from './index.module.css';
 import { getDatetime } from '../../lib/utils';
 import { useNavigate } from 'react-router-dom';
 import { MyContext } from '../menu/index';
+import LoadingBackdrop from '../loading-backdrop';
 
 export default function Profile() {
   const [successMessage, setSuccessMessage] = useState(false);
@@ -67,7 +68,7 @@ export default function Profile() {
     new_password: '',
   });
 
-  const { user, handleUserUpdate } = useContext(MyContext);
+  const { user, handleUserUpdate, pageLoding } = useContext(MyContext);
 
   const navigate = useNavigate();
 
@@ -508,6 +509,7 @@ export default function Profile() {
 
   return (
     <Box>
+      <LoadingBackdrop open={pageLoding} />
       <Snackbar
         open={successMessage}
         autoHideDuration={3000}
diff --git a/src/components/schedulers/show.tsx b/src/components/schedulers/show.tsx
index ee4f99aa..3f0ce55b 100644
--- a/src/components/schedulers/show.tsx
+++ b/src/components/schedulers/show.tsx
@@ -8,9 +8,11 @@ import { getDatetime } from '../../lib/utils';
 import styles from './show.module.css';
 import _ from 'lodash';
 import { useParams, Link, useLocation } from 'react-router-dom';
+import LoadingBackdrop from '../loading-backdrop';
 
 export default function Schedulers() {
   const [isLoading, setIsLoading] = useState(false);
+  const [pageLoding, setPageLoding] = useState(false);
   const [errorMessage, setErrorMessage] = useState(false);
   const [errorMessageText, setErrorMessageText] = useState('');
   const [scheduler, setScheduler] = useState<getSchedulerResponse>();
@@ -46,17 +48,21 @@ export default function Schedulers() {
   useEffect(() => {
     (async function () {
       try {
+        setPageLoding(true);
         setIsLoading(true);
 
         if (typeof params.id === 'string') {
           const scheduler = await getScheduler(params.id);
+
           setScheduler(scheduler);
+          setPageLoding(false);
           setIsLoading(false);
         }
       } catch (error) {
         if (error instanceof Error) {
           setErrorMessage(true);
           setErrorMessageText(error.message);
+          setPageLoding(false);
           setIsLoading(false);
         }
       }
@@ -73,6 +79,7 @@ export default function Schedulers() {
 
   return (
     <Box>
+      <LoadingBackdrop open={pageLoding} />
       <Snackbar
         open={errorMessage}
         autoHideDuration={3000}
diff --git a/src/components/seed-peers/show.tsx b/src/components/seed-peers/show.tsx
index 1af0574c..7bd05ab1 100644
--- a/src/components/seed-peers/show.tsx
+++ b/src/components/seed-peers/show.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import Paper from '@mui/material/Paper';
 import { Alert, Box, Breadcrumbs, Chip, Link as RouterLink, Skeleton, Snackbar, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
@@ -8,10 +7,12 @@ import MoreTimeIcon from '@mui/icons-material/MoreTime';
 import HistoryIcon from '@mui/icons-material/History';
 import styles from './show.module.css';
 import _ from 'lodash';
-import { useParams, Link, useLocation, useNavigate, useMatch } from 'react-router-dom';
+import { useParams, Link, useLocation } from 'react-router-dom';
+import LoadingBackdrop from '../loading-backdrop';
 
 export default function SeedPeer() {
   const [isLoading, setIsLoading] = useState(false);
+  const [pageLoding, setPageLoding] = useState(false);
   const [errorMessage, setErrorMessage] = useState(false);
   const [errorMessageText, setErrorMessageText] = useState('');
   const [seedPeer, setSeedPeer] = useState<getSeedPeerResponse>();
@@ -56,17 +57,20 @@ export default function SeedPeer() {
   useEffect(() => {
     (async function () {
       try {
+        setPageLoding(true);
         setIsLoading(true);
 
         if (typeof params.id === 'string') {
           const seedPeer = await getSeedPeer(params.id);
           setSeedPeer(seedPeer);
+          setPageLoding(false);
           setIsLoading(false);
         }
       } catch (error) {
         if (error instanceof Error) {
           setErrorMessage(true);
           setErrorMessageText(error.message);
+          setPageLoding(false);
           setIsLoading(false);
         }
       }
@@ -83,6 +87,7 @@ export default function SeedPeer() {
 
   return (
     <Box>
+      <LoadingBackdrop open={pageLoding} />
       <Snackbar
         open={errorMessage}
         autoHideDuration={3000}
diff --git a/src/components/users/index.tsx b/src/components/users/index.tsx
index e7dd068d..74ec271c 100644
--- a/src/components/users/index.tsx
+++ b/src/components/users/index.tsx
@@ -45,6 +45,7 @@ import styles from './index.module.css';
 import _ from 'lodash';
 import { ROLE_ROOT, ROLE_GUEST, DEFAULT_PAGE_SIZE, MAX_PAGE_SIZE } from '../../lib/constants';
 import { useNavigate } from 'react-router-dom';
+import LoadingBackdrop from '../loading-backdrop';
 
 const useStyles = makeStyles((theme: any) => ({
   tableRow: {
@@ -83,6 +84,7 @@ const theme = createTheme({
 
 export default function Users() {
   const [isLoading, setIsLoading] = useState(true);
+  const [pageLoding, setPageLoding] = useState(false);
   const [successMessage, setSuccessMessage] = useState(false);
   const [errorMessage, setErrorMessage] = useState(false);
   const [errorMessageText, setErrorMessageText] = useState('');
@@ -118,16 +120,19 @@ export default function Users() {
     (async function () {
       try {
         setUserPage(page);
+        setPageLoding(true);
         setIsLoading(true);
 
         const user = await getUsers({ page: 1, per_page: MAX_PAGE_SIZE });
 
         setUsers(user);
+        setPageLoding(false);
         setIsLoading(false);
       } catch (error) {
         if (error instanceof Error) {
           setErrorMessage(true);
           setErrorMessageText(error.message);
+          setPageLoding(false);
           setIsLoading(false);
         }
       }
@@ -243,6 +248,7 @@ export default function Users() {
 
   return (
     <ThemeProvider theme={theme}>
+      <LoadingBackdrop open={pageLoding} />
       <Snackbar
         open={successMessage}
         autoHideDuration={3000}