diff --git a/cypress/e2e/clusters/cluster.cy.ts b/cypress/e2e/clusters/cluster.cy.ts
index dc1229bb..9cde9a31 100644
--- a/cypress/e2e/clusters/cluster.cy.ts
+++ b/cypress/e2e/clusters/cluster.cy.ts
@@ -577,7 +577,7 @@ describe('Cluster', () => {
         ':nth-child(1) > .css-q5fqw0 > .clusters_clusterContentContainer__ZxKuh > .css-zm3ms > .css-70qvj9 > .MuiTypography-root',
       )
         .should('be.visible')
-        .and('contain', 11);
+        .and('contain', 16);
       cy.get(
         ':nth-child(1) > .css-q5fqw0 > .clusters_clusterContentContainer__ZxKuh > .css-zm3ms > .MuiGrid-root > .clusters_clusterBottomContentContainer__KII0M > .clusters_clusterBottomContent__k3P4u',
       )
@@ -647,7 +647,7 @@ describe('Cluster', () => {
         ':nth-child(1) > .css-q5fqw0 > .clusters_clusterContentContainer__ZxKuh > .css-zm3ms > .css-70qvj9 > .MuiTypography-root',
       )
         .should('be.visible')
-        .and('contain', 10);
+        .and('contain', 15);
 
       // Display the default number after deletion.
       cy.get(
diff --git a/cypress/e2e/clusters/clusters.cy.ts b/cypress/e2e/clusters/clusters.cy.ts
index 80dd8586..1d04e01e 100644
--- a/cypress/e2e/clusters/clusters.cy.ts
+++ b/cypress/e2e/clusters/clusters.cy.ts
@@ -53,7 +53,7 @@ describe('Clusters', () => {
         ':nth-child(1) > .css-q5fqw0 > .clusters_clusterContentContainer__ZxKuh > .css-zm3ms > .css-70qvj9 > .MuiTypography-root',
       )
         .should('be.visible')
-        .and('contain', '11');
+        .and('contain', '16');
 
       cy.get(
         ':nth-child(1) > .css-q5fqw0 > .clusters_clusterContentContainer__ZxKuh > .css-zm3ms > .MuiGrid-root > .clusters_clusterBottomContentContainer__KII0M > .clusters_clusterBottomContent__k3P4u',
@@ -290,12 +290,14 @@ describe('Clusters', () => {
       // Go to last page.
       cy.get('.MuiPagination-ul > :nth-child(3) > .MuiButtonBase-root').click();
 
-      cy.get('.clusters_clusterListContent__UwWjF > .MuiTypography-h6')
+      cy.get(':nth-child(2) > .MuiPaper-root > .clusters_clusterListContent__UwWjF > .MuiTypography-h6')
         .should('be.visible')
         .and('contain', 'cluster-8');
 
       // Go to show cluster page.
-      cy.get('.clusters_creatTimeContainer__k6XfL > .MuiButtonBase-root').click();
+      cy.get(
+        ':nth-child(2) > .MuiPaper-root > .clusters_clusterListContent__UwWjF > .clusters_creatTimeContainer__k6XfL > .MuiButtonBase-root',
+      ).click();
 
       // Then I see that the current page is the show cluster.
       cy.url().should('include', '/clusters/8');
@@ -306,7 +308,7 @@ describe('Clusters', () => {
       // Check the current page number.
       cy.get('#clusterPagination > .MuiPagination-ul .Mui-selected').should('have.text', '2');
 
-      cy.get('.clusters_clusterListContent__UwWjF > .MuiTypography-h6')
+      cy.get(':nth-child(2) > .MuiPaper-root > .clusters_clusterListContent__UwWjF > .MuiTypography-h6')
         .should('be.visible')
         .and('contain', 'cluster-8');
     });
@@ -481,4 +483,43 @@ describe('Clusters', () => {
       cy.get('.MuiAlert-message').should('be.visible').and('contain', 'Failed to fetch');
     });
   });
+
+  it('call onChange when changing page size', () => {
+    // The viewport will now be changed to 1440px x 1080px
+    cy.viewport(1440, 1080);
+
+    // Check if the number of page size is 9.
+    cy.get('#clustersCard').should('exist').children().should('have.length', 9);
+
+    // The viewport will now be changed to 1600px x 1080px
+    cy.viewport(1600, 1080);
+    cy.wait(1000);
+
+    // Check if the number of page size is 9.
+    cy.get('#clustersCard').should('exist').children().should('have.length', 9);
+
+    // The viewport will now be changed to 1920px x 1080px
+    cy.viewport(1920, 1080);
+    cy.wait(1000);
+
+    // Check if the number of page size is 12.
+    cy.get('#clustersCard').should('exist').children().should('have.length', 12);
+
+    // The viewport will now be changed to 2048px x 1080px
+    cy.viewport(2048, 1080);
+    cy.wait(1000);
+
+    // Check if the number of page size is 12.
+    cy.get('#clustersCard').should('exist').children().should('have.length', 12);
+
+    // The viewport will now be changed to 2560px x 1080px
+    cy.viewport(2560, 1080);
+    cy.wait(1000);
+
+    // Check if the number of page size is 15.
+    cy.get('#clustersCard').should('exist').children().should('have.length', 15);
+    // cy.get('#clusters').should('have.length', 9);
+
+    // cy.get('#clusters').children().should('have.length', 9);
+  });
 });
diff --git a/cypress/e2e/clusters/create-cluster.cy.ts b/cypress/e2e/clusters/create-cluster.cy.ts
index a28939de..7f7a2332 100644
--- a/cypress/e2e/clusters/create-cluster.cy.ts
+++ b/cypress/e2e/clusters/create-cluster.cy.ts
@@ -56,7 +56,7 @@ describe('Create cluster', () => {
       ':nth-child(1) > .css-q5fqw0 > .clusters_clusterContentContainer__ZxKuh > .css-zm3ms > .css-70qvj9 > .MuiTypography-root',
     )
       .should('be.visible')
-      .and('contain', '11');
+      .and('contain', '16');
 
     // Show number of cluster default.
     cy.get(
@@ -72,7 +72,7 @@ describe('Create cluster', () => {
 
     // Add Information.
     cy.get('.PrivateSwitchBase-input').click();
-    cy.get('#name').type('cluster-12');
+    cy.get('#name').type('cluster-17');
     cy.get('#description').type('Add new cluster case');
     cy.get('#location').type('China|Hang|Zhou');
 
@@ -127,14 +127,14 @@ describe('Create cluster', () => {
     // Displays successfully added clusters.
     cy.get(':nth-child(8) > .MuiPaper-root > .clusters_clusterListContent__UwWjF > .MuiTypography-h6')
       .should('be.visible')
-      .and('contain', 'cluster-12');
+      .and('contain', 'cluster-17');
 
     // The number of clusters has been increased.
     cy.get(
       ':nth-child(1) > .css-q5fqw0 > .clusters_clusterContentContainer__ZxKuh > .css-zm3ms > .css-70qvj9 > .MuiTypography-root',
     )
       .should('be.visible')
-      .and('contain', '12');
+      .and('contain', '17');
 
     // The default number of clusters has been increased.
     cy.get(
@@ -210,7 +210,7 @@ describe('Create cluster', () => {
         });
     });
 
-    cy.get('#name').type('cluster-12{enter}');
+    cy.get('#name').type('cluster-17{enter}');
 
     // Show error message.
     cy.get('.MuiAlert-message').should('be.visible').and('contain', 'permission deny');
@@ -231,7 +231,7 @@ describe('Create cluster', () => {
         });
     });
 
-    cy.get('#name').type('cluster-12');
+    cy.get('#name').type('cluster-17');
     cy.get('#save').click();
     cy.get('.MuiAlert-message').should('be.visible').and('contain', 'Failed to fetch');
   });
diff --git a/cypress/fixtures/clusters/cluster/delete-clusters.json b/cypress/fixtures/clusters/cluster/delete-clusters.json
index d740a873..8b33ba77 100644
--- a/cypress/fixtures/clusters/cluster/delete-clusters.json
+++ b/cypress/fixtures/clusters/cluster/delete-clusters.json
@@ -7,7 +7,7 @@
       "idc": "Hangzhou|Shanghai|Beijing",
       "location": "China|Hang|Zhou",
       "cidrs": ["10.0.0.0/8", "192.168.0.0/16", "172.16.0.0/12"],
-      "hostnames": ["cluster-1"]
+      "hostnames": null
     },
     "scheduler_cluster_id": 1,
     "seed_peer_cluster_id": 1,
@@ -53,7 +53,7 @@
   {
     "id": 3,
     "name": "cluster-3",
-    "bio": "Cluster-3 is a high-performance computing cluster located in Korea, specifically in Seoul data centers. ",
+    "bio": "Cluster-3 is a high-performance computing cluster located in Korea, specifically in Seoul data centers.",
     "scopes": {
       "idc": "Korea",
       "location": "Seoul|Korea",
@@ -78,7 +78,7 @@
   {
     "id": 4,
     "name": "cluster-4",
-    "bio": "Cluster-4 is a high-performance computing cluster located in China, specifically in Hangzhou data centers. ",
+    "bio": "Cluster-4 is a high-performance computing cluster located in China, specifically in Hangzhou data centers.",
     "scopes": {
       "idc": "hz|dl",
       "location": "China|Hang|Zhou",
@@ -103,7 +103,7 @@
   {
     "id": 5,
     "name": "cluster-5",
-    "bio": "Cluster-5 is a high-performance computing cluster located in China, specifically in Chongqing data centers. ",
+    "bio": "Cluster-5 is a high-performance computing cluster located in China, specifically in Chongqing data centers.",
     "scopes": {
       "idc": "cq|cd",
       "location": "China|Chong|Qing",
@@ -128,7 +128,7 @@
   {
     "id": 6,
     "name": "cluster-6",
-    "bio": "Cluster-6 is a high-performance computing cluster located in China, specifically in Chongdu data centers. ",
+    "bio": "Cluster-6 is a high-performance computing cluster located in China, specifically in Chongdu data centers.",
     "scopes": {
       "idc": "cq|cd",
       "location": "China|Chong|Du",
@@ -153,7 +153,7 @@
   {
     "id": 7,
     "name": "cluster-7",
-    "bio": "Cluster-7 is a high-performance computing cluster located in China, specifically in Chongdu data centers. ",
+    "bio": "Cluster-7 is a high-performance computing cluster located in China, specifically in Chongdu data centers.",
     "scopes": {
       "idc": "cd",
       "location": "China|Cheng|Du",
@@ -178,7 +178,7 @@
   {
     "id": 8,
     "name": "cluster-8",
-    "bio": "Cluster-8 is a high-performance computing cluster located in China, specifically in Jiangsu data centers. ",
+    "bio": "Cluster-8 is a high-performance computing cluster located in China, specifically in Jiangsu data centers.",
     "scopes": {
       "idc": "js",
       "location": "China|Jiang|Su",
@@ -203,7 +203,7 @@
   {
     "id": 9,
     "name": "cluster-9",
-    "bio": "Cluster-9 is a high-performance computing cluster located in China, specifically in Hangzhou data centers. ",
+    "bio": "Cluster-9 is a high-performance computing cluster located in China, specifically in Hangzhou data centers.",
     "scopes": {
       "idc": "hz|hf",
       "location": "China|Hang|Zhou",
@@ -249,5 +249,130 @@
     "created_at": "2023-11-01T10:19:36Z",
     "updated_at": "2023-11-01T10:19:36Z",
     "is_default": false
+  },
+  {
+    "id": 12,
+    "name": "cluster-12",
+    "bio": "Cluster-12 is a high-performance computing cluster located in France, specifically in Paris data centers.",
+    "scopes": {
+      "idc": "Paris",
+      "location": "Paris|France",
+      "cidrs": ["192.168.0.0", "10.0.0.0"]
+    },
+    "scheduler_cluster_id": 12,
+    "seed_peer_cluster_id": 12,
+    "scheduler_cluster_config": {
+      "candidate_parent_limit": 4,
+      "filter_parent_limit": 40
+    },
+    "seed_peer_cluster_config": {
+      "load_limit": 300
+    },
+    "peer_cluster_config": {
+      "load_limit": 50
+    },
+    "created_at": "2023-12-01T10:19:36Z",
+    "updated_at": "2023-12-01T10:19:36Z",
+    "is_default": false
+  },
+  {
+    "id": 13,
+    "name": "cluster-13",
+    "bio": "Cluster-13 is a high-performance computing cluster located in France, specifically in Paris data centers.",
+    "scopes": {
+      "idc": "Paris",
+      "location": "Paris|France",
+      "cidrs": ["192.168.0.0", "10.0.0.0"]
+    },
+    "scheduler_cluster_id": 13,
+    "seed_peer_cluster_id": 13,
+    "scheduler_cluster_config": {
+      "candidate_parent_limit": 4,
+      "filter_parent_limit": 40
+    },
+    "seed_peer_cluster_config": {
+      "load_limit": 300
+    },
+    "peer_cluster_config": {
+      "load_limit": 50
+    },
+    "created_at": "2023-12-03T10:19:36Z",
+    "updated_at": "2023-12-03T10:19:36Z",
+    "is_default": false
+  },
+  {
+    "id": 14,
+    "name": "cluster-14",
+    "bio": "Cluster-14 is a high-performance computing cluster located in France, specifically in Paris data centers.",
+    "scopes": {
+      "idc": "Paris",
+      "location": "Paris|France",
+      "cidrs": ["192.168.0.0", "10.0.0.0"]
+    },
+    "scheduler_cluster_id": 14,
+    "seed_peer_cluster_id": 14,
+    "scheduler_cluster_config": {
+      "candidate_parent_limit": 4,
+      "filter_parent_limit": 40
+    },
+    "seed_peer_cluster_config": {
+      "load_limit": 300
+    },
+    "peer_cluster_config": {
+      "load_limit": 50
+    },
+    "created_at": "2023-12-04T10:19:36Z",
+    "updated_at": "2023-12-04T10:19:36Z",
+    "is_default": false
+  },
+  {
+    "id": 15,
+    "name": "cluster-15",
+    "bio": "Cluster-15 is a high-performance computing cluster located in France, specifically in Paris data centers.",
+    "scopes": {
+      "idc": "Paris",
+      "location": "Paris|France",
+      "cidrs": ["192.168.0.0", "10.0.0.0"]
+    },
+    "scheduler_cluster_id": 15,
+    "seed_peer_cluster_id": 15,
+    "scheduler_cluster_config": {
+      "candidate_parent_limit": 4,
+      "filter_parent_limit": 40
+    },
+    "seed_peer_cluster_config": {
+      "load_limit": 300
+    },
+    "peer_cluster_config": {
+      "load_limit": 50
+    },
+    "created_at": "2023-12-05T10:19:36Z",
+    "updated_at": "2023-12-05T10:19:36Z",
+    "is_default": false
+  },
+  {
+    "id": 16,
+    "name": "cluster-16",
+    "bio": "Cluster-10 is a high-performance computing cluster located in France, specifically in Paris data centers.",
+    "scopes": {
+      "idc": "Paris",
+      "location": "Paris|France",
+      "cidrs": ["192.168.0.0", "10.0.0.0"]
+    },
+    "scheduler_cluster_id": 16,
+    "seed_peer_cluster_id": 16,
+    "scheduler_cluster_config": {
+      "candidate_parent_limit": 4,
+      "filter_parent_limit": 40
+    },
+    "seed_peer_cluster_config": {
+      "load_limit": 300
+    },
+    "peer_cluster_config": {
+      "load_limit": 50
+    },
+    "created_at": "2023-12-06T10:19:36Z",
+    "updated_at": "2023-12-06T10:19:36Z",
+    "is_default": false
   }
 ]
diff --git a/cypress/fixtures/clusters/clusters.json b/cypress/fixtures/clusters/clusters.json
index 466f6830..8c876543 100644
--- a/cypress/fixtures/clusters/clusters.json
+++ b/cypress/fixtures/clusters/clusters.json
@@ -274,5 +274,130 @@
     "created_at": "2023-11-01T10:19:36Z",
     "updated_at": "2023-11-01T10:19:36Z",
     "is_default": false
+  },
+  {
+    "id": 12,
+    "name": "cluster-12",
+    "bio": "Cluster-12 is a high-performance computing cluster located in France, specifically in Paris data centers.",
+    "scopes": {
+      "idc": "Paris",
+      "location": "Paris|France",
+      "cidrs": ["192.168.0.0", "10.0.0.0"]
+    },
+    "scheduler_cluster_id": 12,
+    "seed_peer_cluster_id": 12,
+    "scheduler_cluster_config": {
+      "candidate_parent_limit": 4,
+      "filter_parent_limit": 40
+    },
+    "seed_peer_cluster_config": {
+      "load_limit": 300
+    },
+    "peer_cluster_config": {
+      "load_limit": 50
+    },
+    "created_at": "2023-12-01T10:19:36Z",
+    "updated_at": "2023-12-01T10:19:36Z",
+    "is_default": false
+  },
+  {
+    "id": 13,
+    "name": "cluster-13",
+    "bio": "Cluster-13 is a high-performance computing cluster located in France, specifically in Paris data centers.",
+    "scopes": {
+      "idc": "Paris",
+      "location": "Paris|France",
+      "cidrs": ["192.168.0.0", "10.0.0.0"]
+    },
+    "scheduler_cluster_id": 13,
+    "seed_peer_cluster_id": 13,
+    "scheduler_cluster_config": {
+      "candidate_parent_limit": 4,
+      "filter_parent_limit": 40
+    },
+    "seed_peer_cluster_config": {
+      "load_limit": 300
+    },
+    "peer_cluster_config": {
+      "load_limit": 50
+    },
+    "created_at": "2023-12-03T10:19:36Z",
+    "updated_at": "2023-12-03T10:19:36Z",
+    "is_default": false
+  },
+  {
+    "id": 14,
+    "name": "cluster-14",
+    "bio": "Cluster-14 is a high-performance computing cluster located in France, specifically in Paris data centers.",
+    "scopes": {
+      "idc": "Paris",
+      "location": "Paris|France",
+      "cidrs": ["192.168.0.0", "10.0.0.0"]
+    },
+    "scheduler_cluster_id": 14,
+    "seed_peer_cluster_id": 14,
+    "scheduler_cluster_config": {
+      "candidate_parent_limit": 4,
+      "filter_parent_limit": 40
+    },
+    "seed_peer_cluster_config": {
+      "load_limit": 300
+    },
+    "peer_cluster_config": {
+      "load_limit": 50
+    },
+    "created_at": "2023-12-04T10:19:36Z",
+    "updated_at": "2023-12-04T10:19:36Z",
+    "is_default": false
+  },
+  {
+    "id": 15,
+    "name": "cluster-15",
+    "bio": "Cluster-15 is a high-performance computing cluster located in France, specifically in Paris data centers.",
+    "scopes": {
+      "idc": "Paris",
+      "location": "Paris|France",
+      "cidrs": ["192.168.0.0", "10.0.0.0"]
+    },
+    "scheduler_cluster_id": 15,
+    "seed_peer_cluster_id": 15,
+    "scheduler_cluster_config": {
+      "candidate_parent_limit": 4,
+      "filter_parent_limit": 40
+    },
+    "seed_peer_cluster_config": {
+      "load_limit": 300
+    },
+    "peer_cluster_config": {
+      "load_limit": 50
+    },
+    "created_at": "2023-12-05T10:19:36Z",
+    "updated_at": "2023-12-05T10:19:36Z",
+    "is_default": false
+  },
+  {
+    "id": 16,
+    "name": "cluster-16",
+    "bio": "Cluster-10 is a high-performance computing cluster located in France, specifically in Paris data centers.",
+    "scopes": {
+      "idc": "Paris",
+      "location": "Paris|France",
+      "cidrs": ["192.168.0.0", "10.0.0.0"]
+    },
+    "scheduler_cluster_id": 16,
+    "seed_peer_cluster_id": 16,
+    "scheduler_cluster_config": {
+      "candidate_parent_limit": 4,
+      "filter_parent_limit": 40
+    },
+    "seed_peer_cluster_config": {
+      "load_limit": 300
+    },
+    "peer_cluster_config": {
+      "load_limit": 50
+    },
+    "created_at": "2023-12-06T10:19:36Z",
+    "updated_at": "2023-12-06T10:19:36Z",
+    "is_default": false
   }
 ]
diff --git a/cypress/fixtures/clusters/create-cluster.json b/cypress/fixtures/clusters/create-cluster.json
index 8c0fd931..3e6a66b3 100644
--- a/cypress/fixtures/clusters/create-cluster.json
+++ b/cypress/fixtures/clusters/create-cluster.json
@@ -32,8 +32,7 @@
     "scopes": {
       "idc": "",
       "location": "",
-      "cidrs": [],
-      "hostnames": []
+      "cidrs": []
     },
     "scheduler_cluster_id": 2,
     "seed_peer_cluster_id": 2,
@@ -58,8 +57,7 @@
     "scopes": {
       "idc": "Korea",
       "location": "Seoul|Korea",
-      "cidrs": ["192.168.0.0/16", "172.16.0.0/12"],
-      "hostnames": []
+      "cidrs": ["192.168.0.0/16", "172.16.0.0/12"]
     },
     "scheduler_cluster_id": 3,
     "seed_peer_cluster_id": 3,
@@ -84,8 +82,7 @@
     "scopes": {
       "idc": "hz|dl",
       "location": "China|Hang|Zhou",
-      "cidrs": ["10.0.0.0/8", "192.168.0.0/16"],
-      "hostnames": []
+      "cidrs": ["10.0.0.0/8", "192.168.0.0/16"]
     },
     "scheduler_cluster_id": 4,
     "seed_peer_cluster_id": 4,
@@ -110,8 +107,7 @@
     "scopes": {
       "idc": "cq|cd",
       "location": "China|Chong|Qing",
-      "cidrs": ["10.0.0.0/8", "192.168.0.0/16"],
-      "hostnames": []
+      "cidrs": ["10.0.0.0/8", "192.168.0.0/16"]
     },
     "scheduler_cluster_id": 5,
     "seed_peer_cluster_id": 5,
@@ -136,8 +132,7 @@
     "scopes": {
       "idc": "cq|cd",
       "location": "China|Chong|Du",
-      "cidrs": ["10.0.0.0/8", "192.168.0.0/16"],
-      "hostnames": []
+      "cidrs": ["10.0.0.0/8", "192.168.0.0/16"]
     },
     "scheduler_cluster_id": 6,
     "seed_peer_cluster_id": 6,
@@ -162,8 +157,7 @@
     "scopes": {
       "idc": "cd",
       "location": "China|Cheng|Du",
-      "cidrs": ["10.0.0.0/8", "172.16.0.0/19"],
-      "hostnames": []
+      "cidrs": ["10.0.0.0/8", "172.16.0.0/19"]
     },
     "scheduler_cluster_id": 7,
     "seed_peer_cluster_id": 7,
@@ -188,8 +182,7 @@
     "scopes": {
       "idc": "js",
       "location": "China|Jiang|Su",
-      "cidrs": ["10.0.0.0/5", "172.16.0.0/19"],
-      "hostnames": []
+      "cidrs": ["10.0.0.0/5", "172.16.0.0/19"]
     },
     "scheduler_cluster_id": 8,
     "seed_peer_cluster_id": 8,
@@ -214,8 +207,7 @@
     "scopes": {
       "idc": "hz|hf",
       "location": "China|Hang|Zhou",
-      "cidrs": ["10.0.0.0/8", "192.168.0.0/16"],
-      "hostnames": []
+      "cidrs": ["10.0.0.0/8", "192.168.0.0/16"]
     },
     "scheduler_cluster_id": 9,
     "seed_peer_cluster_id": 9,
@@ -240,8 +232,7 @@
     "scopes": {
       "idc": "London",
       "location": "London|England",
-      "cidrs": ["192.168.255.255"],
-      "hostnames": []
+      "cidrs": ["192.168.255.255"]
     },
     "scheduler_cluster_id": 10,
     "seed_peer_cluster_id": 10,
@@ -266,8 +257,7 @@
     "scopes": {
       "idc": "Paris",
       "location": "Paris|France",
-      "cidrs": ["192.168.0.0", "10.0.0.0"],
-      "hostnames": []
+      "cidrs": ["192.168.0.0", "10.0.0.0"]
     },
     "scheduler_cluster_id": 11,
     "seed_peer_cluster_id": 11,
@@ -288,6 +278,131 @@
   {
     "id": 12,
     "name": "cluster-12",
+    "bio": "Cluster-12 is a high-performance computing cluster located in France, specifically in Paris data centers.",
+    "scopes": {
+      "idc": "Paris",
+      "location": "Paris|France",
+      "cidrs": ["192.168.0.0", "10.0.0.0"]
+    },
+    "scheduler_cluster_id": 12,
+    "seed_peer_cluster_id": 12,
+    "scheduler_cluster_config": {
+      "candidate_parent_limit": 4,
+      "filter_parent_limit": 40
+    },
+    "seed_peer_cluster_config": {
+      "load_limit": 300
+    },
+    "peer_cluster_config": {
+      "load_limit": 50
+    },
+    "created_at": "2023-12-01T10:19:36Z",
+    "updated_at": "2023-12-01T10:19:36Z",
+    "is_default": false
+  },
+  {
+    "id": 13,
+    "name": "cluster-13",
+    "bio": "Cluster-13 is a high-performance computing cluster located in France, specifically in Paris data centers.",
+    "scopes": {
+      "idc": "Paris",
+      "location": "Paris|France",
+      "cidrs": ["192.168.0.0", "10.0.0.0"]
+    },
+    "scheduler_cluster_id": 13,
+    "seed_peer_cluster_id": 13,
+    "scheduler_cluster_config": {
+      "candidate_parent_limit": 4,
+      "filter_parent_limit": 40
+    },
+    "seed_peer_cluster_config": {
+      "load_limit": 300
+    },
+    "peer_cluster_config": {
+      "load_limit": 50
+    },
+    "created_at": "2023-12-03T10:19:36Z",
+    "updated_at": "2023-12-03T10:19:36Z",
+    "is_default": false
+  },
+  {
+    "id": 14,
+    "name": "cluster-14",
+    "bio": "Cluster-14 is a high-performance computing cluster located in France, specifically in Paris data centers.",
+    "scopes": {
+      "idc": "Paris",
+      "location": "Paris|France",
+      "cidrs": ["192.168.0.0", "10.0.0.0"]
+    },
+    "scheduler_cluster_id": 14,
+    "seed_peer_cluster_id": 14,
+    "scheduler_cluster_config": {
+      "candidate_parent_limit": 4,
+      "filter_parent_limit": 40
+    },
+    "seed_peer_cluster_config": {
+      "load_limit": 300
+    },
+    "peer_cluster_config": {
+      "load_limit": 50
+    },
+    "created_at": "2023-12-04T10:19:36Z",
+    "updated_at": "2023-12-04T10:19:36Z",
+    "is_default": false
+  },
+  {
+    "id": 15,
+    "name": "cluster-15",
+    "bio": "Cluster-15 is a high-performance computing cluster located in France, specifically in Paris data centers.",
+    "scopes": {
+      "idc": "Paris",
+      "location": "Paris|France",
+      "cidrs": ["192.168.0.0", "10.0.0.0"]
+    },
+    "scheduler_cluster_id": 15,
+    "seed_peer_cluster_id": 15,
+    "scheduler_cluster_config": {
+      "candidate_parent_limit": 4,
+      "filter_parent_limit": 40
+    },
+    "seed_peer_cluster_config": {
+      "load_limit": 300
+    },
+    "peer_cluster_config": {
+      "load_limit": 50
+    },
+    "created_at": "2023-12-05T10:19:36Z",
+    "updated_at": "2023-12-05T10:19:36Z",
+    "is_default": false
+  },
+  {
+    "id": 16,
+    "name": "cluster-16",
+    "bio": "Cluster-10 is a high-performance computing cluster located in France, specifically in Paris data centers.",
+    "scopes": {
+      "idc": "Paris",
+      "location": "Paris|France",
+      "cidrs": ["192.168.0.0", "10.0.0.0"]
+    },
+    "scheduler_cluster_id": 16,
+    "seed_peer_cluster_id": 16,
+    "scheduler_cluster_config": {
+      "candidate_parent_limit": 4,
+      "filter_parent_limit": 40
+    },
+    "seed_peer_cluster_config": {
+      "load_limit": 300
+    },
+    "peer_cluster_config": {
+      "load_limit": 50
+    },
+    "created_at": "2023-12-06T10:19:36Z",
+    "updated_at": "2023-12-06T10:19:36Z",
+    "is_default": false
+  },
+  {
+    "id": 17,
+    "name": "cluster-17",
     "bio": "Add new cluster case",
     "scopes": {
       "idc": "hz|sh",
@@ -295,8 +410,8 @@
       "cidrs": ["10.0.0.0/8", "172.16.0.0/12", "192.168.0.0/16"],
       "hostnames": []
     },
-    "scheduler_cluster_id": 12,
-    "seed_peer_cluster_id": 12,
+    "scheduler_cluster_id": 17,
+    "seed_peer_cluster_id": 17,
     "scheduler_cluster_config": {
       "candidate_parent_limit": 4,
       "filter_parent_limit": 40
diff --git a/src/components/clusters/index.tsx b/src/components/clusters/index.tsx
index 8a7de964..c8998ca0 100644
--- a/src/components/clusters/index.tsx
+++ b/src/components/clusters/index.tsx
@@ -33,7 +33,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
 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 { MAX_PAGE_SIZE } from '../../lib/constants';
 
 const theme = createTheme({
   breakpoints: {
@@ -62,6 +62,7 @@ export default function Clusters() {
   const [clusterIsLoading, setClusterIsLoading] = useState(true);
   const [clusterPage, setClusterPage] = useState(1);
   const [totalPages, setTotalPages] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(9);
   const [searchClusters, setSearchClusters] = useState('');
   const [clusterCount, setClusterCount] = useState<getClustersResponse[]>([]);
   const [cluster, setCluster] = useState<getClustersResponse[]>([]);
@@ -115,9 +116,27 @@ export default function Clusters() {
         }
       });
 
-      const totalPage = Math.ceil(cluster.length / DEFAULT_PAGE_SIZE);
+      const updatePageSize = () => {
+        if (window.matchMedia('(max-width: 1440px)').matches) {
+          setPageSize(9);
+        } else if (window.matchMedia('(max-width: 1600px)').matches) {
+          setPageSize(9);
+        } else if (window.matchMedia('(max-width: 1920px)').matches) {
+          setPageSize(12);
+        } else if (window.matchMedia('(max-width: 2048px)').matches) {
+          setPageSize(12);
+        } else if (window.matchMedia('(max-width: 2560px)').matches) {
+          setPageSize(15);
+        }
+      };
+
+      updatePageSize();
+
+      window.addEventListener('resize', updatePageSize);
+
+      const totalPage = Math.ceil(cluster.length / pageSize);
 
-      const currentPageData = getPaginatedList(cluster, clusterPage, DEFAULT_PAGE_SIZE);
+      const currentPageData = getPaginatedList(cluster, clusterPage, pageSize);
 
       setTotalPages(totalPage);
       setAllClusters(currentPageData);
@@ -126,7 +145,7 @@ export default function Clusters() {
       setTotalPages(1);
       setAllClusters([]);
     }
-  }, [cluster, clusterPage]);
+  }, [cluster, clusterPage, pageSize]);
 
   const numberOfDefaultClusters =
     Array.isArray(clusterCount) && clusterCount?.filter((item: any) => item?.is_default === true).length;
@@ -334,7 +353,7 @@ export default function Clusters() {
             <SearchIcon sx={{ color: 'rgba(0,0,0,0.6)' }} />
           </IconButton>
         </Box>
-        <Box className={styles.clusterListContainer}>
+        <Box id="clustersCard" className={styles.clusterListContainer}>
           {allClusters.length === 0 ? (
             <></>
           ) : (