diff --git a/cypress/e2e/clusters/cluster.cy.ts b/cypress/e2e/clusters/cluster.cy.ts
index ffa3715..6b2e1d9 100644
--- a/cypress/e2e/clusters/cluster.cy.ts
+++ b/cypress/e2e/clusters/cluster.cy.ts
@@ -214,11 +214,11 @@ describe('Cluster', () => {
       // Click the copy scheduler cluster id icon.
       cy.get('#copy-scheduler-cluster-id').click();
       cy.get('#schedulerClusterIDCopyIcon').should('exist');
-      cy.get('#schedulerClusterIDTooltip').should('exist');
+      cy.get('#schedulerClusterIDTooltip').should('not.exist');
       cy.wait(1000);
 
       // Display successful copy icon.
-      cy.get('#schedulerClusterIDCopyIcon').should('not.exist');
+      cy.get('#schedulerClusterIDCopyIcon').should('exist');
       cy.get('#schedulerClusterIDTooltip').should('not.exist');
 
       // Let's check the copied text.
@@ -230,11 +230,11 @@ describe('Cluster', () => {
       // Click the copy seed peer cluster id icon.
       cy.get('#copy-seed-peer-cluster-id').click();
       cy.get('#seedPeerClusterIDCopyIcon').should('exist');
-      cy.get('#seedPeerClusterIDTooltip').should('exist');
+      cy.get('#seedPeerClusterIDTooltip').should('not.exist');
       cy.wait(1000);
 
       // Display successful copy icon.
-      cy.get('#seedPeerClusterIDCopyIcon').should('not.exist');
+      cy.get('#seedPeerClusterIDCopyIcon').should('exist');
       cy.get('#seedPeerClusterIDTooltip').should('not.exist');
 
       // Let's check the copied text.
diff --git a/cypress/e2e/clusters/clusters.cy.ts b/cypress/e2e/clusters/clusters.cy.ts
index 9be4181..3389e09 100644
--- a/cypress/e2e/clusters/clusters.cy.ts
+++ b/cypress/e2e/clusters/clusters.cy.ts
@@ -43,7 +43,7 @@ describe('Clusters', () => {
     );
 
     cy.visit('/clusters');
-    cy.viewport(1440, 1080);
+    cy.viewport(1440, 1480);
   });
 
   describe('when data is loaded', () => {
@@ -86,7 +86,7 @@ describe('Clusters', () => {
       cy.get('#default-cluster-1')
         .should('be.visible')
         .and('contain', 'Default')
-        .and('have.css', 'background-color', 'rgb(46, 143, 121)');
+        .and('have.css', 'background-color', 'rgb(31, 125, 83)');
 
       // Show cluster name.
       cy.get('#cluster-name-1').should('be.visible').and('contain', 'cluster-1');
@@ -108,7 +108,7 @@ describe('Clusters', () => {
       cy.get('#default-cluster-2')
         .should('be.visible')
         .and('contain', 'Non-Default')
-        .and('have.css', 'background-color', 'rgb(28, 41, 58)');
+        .and('have.css', 'background-color', 'rgb(24, 35, 15)');
     });
   });
 
@@ -183,8 +183,6 @@ describe('Clusters', () => {
 
   describe('pagination', () => {
     it('pagination updates results and page number', () => {
-      cy.get('.Mui-selected').invoke('text').should('eq', 'Cluster1');
-
       // Check number of pagination.
       cy.get('#clusterPagination > .MuiPagination-ul').children().should('have.length', 7);
 
@@ -193,8 +191,6 @@ describe('Clusters', () => {
     });
 
     it('when pagination changes, different page results are rendered', () => {
-      cy.get('.Mui-selected').invoke('text').should('eq', 'Cluster1');
-
       // Go to last page.
       cy.get('.MuiPagination-ul > :nth-child(3) > .MuiButtonBase-root').click();
 
@@ -205,7 +201,7 @@ describe('Clusters', () => {
       cy.get('#default-cluster-8')
         .should('be.visible')
         .and('contain', 'Non-Default')
-        .and('have.css', 'background-color', 'rgb(28, 41, 58)');
+        .and('have.css', 'background-color', 'rgb(24, 35, 15)');
 
       cy.get('#cluster-name-8').should('be.visible').and('contain', 'cluster-8');
 
@@ -268,7 +264,7 @@ describe('Clusters', () => {
 
       cy.get('#clusterPagination > .MuiPagination-ul .Mui-selected').should('have.text', '5');
 
-      cy.get('#clusters').children().should('have.length', 1);
+      cy.get('#clustersCard').children().should('have.length', 1);
 
       cy.get('#cluster-name-37').should('have.text', 'cluster-37');
 
@@ -384,7 +380,7 @@ describe('Clusters', () => {
       cy.get('#free-solo-demo').type('cluster-47');
 
       // No clusters card.
-      cy.get('#clusters').should('not.exist');
+      cy.get('#clustersCard').should('not.exist');
 
       // Pagination has been hidden.
       cy.get('#clusterPagination > .MuiPagination-ul').should('not.exist');
diff --git a/cypress/e2e/clusters/create-cluster.cy.ts b/cypress/e2e/clusters/create-cluster.cy.ts
index 3504202..e8ba95b 100644
--- a/cypress/e2e/clusters/create-cluster.cy.ts
+++ b/cypress/e2e/clusters/create-cluster.cy.ts
@@ -192,7 +192,7 @@ describe('Create cluster', () => {
     // Show error message.
     cy.get('.MuiAlert-message').should('be.visible').and('contain', 'Conflict');
     cy.get('.MuiAlert-action > .MuiButtonBase-root').click();
-    cy.get('.MuiPaper-root').should('not.exist');
+    cy.get('.MuiPaper-message').should('not.exist');
   });
 
   it('click the `CANCEL button', () => {
diff --git a/cypress/e2e/developer/tokens/create-token.cy.ts b/cypress/e2e/developer/tokens/create-token.cy.ts
index 583b259..067503f 100644
--- a/cypress/e2e/developer/tokens/create-token.cy.ts
+++ b/cypress/e2e/developer/tokens/create-token.cy.ts
@@ -27,7 +27,7 @@ describe('Create token', () => {
     cy.visit('/developer/personal-access-tokens');
 
     // Click the `ADD PERSONAL ACCESS TOKENS` button.
-    cy.get('.css-1qdyvok > .MuiButtonBase-root').click();
+    cy.get('#new-tokens-button').click();
 
     // Then I see that the current page is the developer/personal-access-tokens/new!
     cy.url().should('include', '/developer/personal-access-tokens/new');
@@ -140,7 +140,7 @@ describe('Create token', () => {
     // Show error message.
     cy.get('.MuiAlert-message').should('be.visible').and('contain', 'Conflict');
     cy.get('.MuiAlert-action > .MuiButtonBase-root').click();
-    cy.get('.MuiPaper-root').should('not.exist');
+    cy.get('.MuiAlert-message').should('not.exist');
   });
 
   it('click the `CANCEL button', () => {
diff --git a/cypress/e2e/developer/tokens/tokens.cy.ts b/cypress/e2e/developer/tokens/tokens.cy.ts
index 1c943a0..fdfab7a 100644
--- a/cypress/e2e/developer/tokens/tokens.cy.ts
+++ b/cypress/e2e/developer/tokens/tokens.cy.ts
@@ -25,12 +25,7 @@ describe('Tokens', () => {
 
   it('when data is loaded', () => {
     cy.get('[data-testid="isloading"]').should('be.exist');
-    cy.get('.css-1qdyvok > .MuiTypography-root').should('have.text', 'Personal access tokens');
-
-    cy.get('.MuiList-root > :nth-child(2) > .MuiButtonBase-root > .MuiTypography-root').click();
-
-    // Whether the style selected by menu is Personal access tokens.
-    cy.get('.MuiCollapse-wrapperInner > .MuiList-root > .MuiButtonBase-root').should('have.class', 'Mui-selected');
+    cy.get('#token-title').should('have.text', 'Personal access tokens');
 
     // Show token name.
     cy.get('#root-11').should('be.visible').and('have.text', 'root-11');
@@ -69,7 +64,7 @@ describe('Tokens', () => {
       },
     );
 
-    cy.get('.MuiPaper-root').should('be.visible').and('have.text', `You don't have any tokens.`);
+    cy.get('#no-tokens').should('be.visible').and('have.text', `You don't have any tokens.`);
   });
 
   it('should handle API error response', () => {
@@ -97,7 +92,7 @@ describe('Tokens', () => {
     cy.get('#tokens-list').should('not.exist');
 
     // Show You don't have any preheat tokens.
-    cy.get('.MuiPaper-root').should('be.visible').and('have.text', `You don't have any tokens.`);
+    cy.get('#no-tokens').should('be.visible').and('have.text', `You don't have any tokens.`);
   });
 
   describe('pagination', () => {
@@ -120,9 +115,9 @@ describe('Tokens', () => {
       cy.get('#tokens-pagination > .MuiPagination-ul .Mui-selected').should('have.text', '2');
 
       // Show token name.
-      cy.get('.MuiTypography-inherit').should('be.visible').and('have.text', 'root-1');
+      cy.get('#root-1').should('be.visible').and('have.text', 'root-1');
 
-      cy.get('span.css-189ppmh-MuiTypography-root').should('be.visible').and('have.text', 'Thu, Dec 1 2033.');
+      cy.get('#expired-at-1').should('be.visible').and('have.text', 'Thu, Dec 1 2033.');
     });
 
     it('when you click refresh, the paginated results and page numbers remain unchanged.', () => {
diff --git a/cypress/e2e/job/preheats/create-preheat.cy.ts b/cypress/e2e/job/preheats/create-preheat.cy.ts
index bdce6b0..7ccd5dc 100644
--- a/cypress/e2e/job/preheats/create-preheat.cy.ts
+++ b/cypress/e2e/job/preheats/create-preheat.cy.ts
@@ -46,7 +46,7 @@ describe('Create preheat', () => {
 
   it('can create preheat', () => {
     cy.visit('/jobs/preheats');
-    cy.get('.css-1g5t85q > .MuiButtonBase-root').click();
+    cy.get('#new-preheat').click();
 
     cy.url().should('include', '/jobs/preheats/new');
 
@@ -321,7 +321,6 @@ describe('Create preheat', () => {
     it('try to verify header', () => {
       const characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
       const key = _.times(101, () => _.sample(characters)).join('');
-      const value = _.times(1001, () => _.sample(characters)).join('');
 
       // Select a cluster.
       cy.get('#select-cluster').click();
@@ -344,13 +343,11 @@ describe('Create preheat', () => {
       // Show  header value verification error message.
       cy.get('.new_headersValueInput__zn-9E > .MuiFormHelperText-root')
         .should('be.visible')
-        .and('have.text', 'Fill in the characters, the length is 1-1000.');
+        .and('have.text', 'Fill in the characters, the length is 1-10000.');
 
       // Verification passed.
       cy.get('.new_headersKeyInput__aZcds > .MuiInputBase-root > .MuiInputBase-input').type('key');
       cy.get('.new_headersKeyInput__aZcds > .MuiFormHelperText-root').should('not.exist');
-      cy.get('.new_headersValueInput__zn-9E > .MuiInputBase-root').type('value');
-      cy.get('.new_headersValueInput__zn-9E > .MuiFormHelperText-root').should('not.exist');
 
       // Incorrect header key entered.
       cy.get('.new_headersKeyInput__aZcds > .MuiInputBase-root > .MuiInputBase-input').clear();
@@ -371,19 +368,6 @@ describe('Create preheat', () => {
       cy.get('.new_headersKeyInput__aZcds > .MuiInputBase-root > .MuiInputBase-input').type('key');
       cy.get('.new_headersKeyInput__aZcds > .MuiFormHelperText-root').should('not.exist');
 
-      // Incorrect header value entered.
-      cy.get('.new_headersValueInput__zn-9E > .MuiInputBase-root').type(value);
-
-      // Show header value verification error message.
-      cy.get('.new_headersValueInput__zn-9E > .MuiFormHelperText-root')
-        .should('be.visible')
-        .and('have.text', 'Fill in the characters, the length is 1-1000.');
-
-      // Show header value verification error message.
-      cy.get('.new_headersValueInput__zn-9E > .MuiFormHelperText-root')
-        .should('be.visible')
-        .and('have.text', 'Fill in the characters, the length is 1-1000.');
-
       cy.get('#save').click();
 
       // Preheat creation failed, the page is still in preheat/new!
diff --git a/cypress/e2e/job/preheats/preheat.cy.ts b/cypress/e2e/job/preheats/preheat.cy.ts
index 3b4fa71..2fbcbc6 100644
--- a/cypress/e2e/job/preheats/preheat.cy.ts
+++ b/cypress/e2e/job/preheats/preheat.cy.ts
@@ -44,14 +44,14 @@ describe('Preheat', () => {
   it('click the breadcrumb', () => {
     cy.get('[data-testid="isloading"]').should('be.exist');
 
-    cy.get(':nth-child(6) > .css-1mlhis1 > .css-1ozvesn > .MuiTypography-root > .MuiBox-root').click();
+    cy.get('#preheat-6').click();
 
     cy.url().should('include', '/jobs/preheats/6');
 
     // Check for breadcrumb.
-    cy.get('.MuiBreadcrumbs-ol > :nth-child(3) > .MuiTypography-root').should('exist').and('contain', 'preheats');
+    cy.get(':nth-child(3) > .MuiTypography-root').should('exist').and('contain', 'Preheat');
 
-    cy.get('.MuiBreadcrumbs-ol > :nth-child(3) > .MuiTypography-root').click();
+    cy.get(':nth-child(3) > .MuiTypography-root').click();
 
     cy.get('[data-testid="isloading"]').should('not.exist');
 
@@ -244,7 +244,7 @@ describe('Preheat', () => {
     });
 
     it('unable to display breadcrumb', () => {
-      cy.get('.MuiBreadcrumbs-ol').should('be.visible').and('contain', 'preheats');
+      cy.get('.MuiBreadcrumbs-ol').should('be.visible').and('contain', 'Preheat');
 
       cy.get('.MuiBreadcrumbs-ol > :nth-child(5) > .MuiTypography-root').should('have.text', '-');
     });
@@ -303,7 +303,7 @@ describe('Preheat', () => {
     });
 
     it('unable to display breadcrumb', () => {
-      cy.get('.MuiBreadcrumbs-ol').should('be.visible').and('contain', 'preheats');
+      cy.get('.MuiBreadcrumbs-ol').should('be.visible').and('contain', 'Preheat');
 
       cy.get('.MuiBreadcrumbs-ol > :nth-child(5) > .MuiTypography-root').should('have.text', '-');
     });
diff --git a/cypress/e2e/job/preheats/preheats.cy.ts b/cypress/e2e/job/preheats/preheats.cy.ts
index e3f9c3f..ba35709 100644
--- a/cypress/e2e/job/preheats/preheats.cy.ts
+++ b/cypress/e2e/job/preheats/preheats.cy.ts
@@ -67,30 +67,32 @@ describe('Preheats', () => {
       ).as('preheats');
       cy.get('[data-testid="isloading"]').should('be.exist');
       cy.wait(120000);
+
       // Executed every 3 seconds, it should be executed 2 times after 6 seconds.
       cy.get('@preheats').then(() => {
         expect(interceptCount).to.be.greaterThan(0);
         expect(interceptCount).to.be.closeTo(2, 1);
       });
+      
       cy.get('[data-testid="isloading"]').should('not.exist');
       cy.get('.MuiList-root > :nth-child(3) > .MuiButtonBase-root').click();
-      // Whether the style selected by menu is Preheat.
-      cy.get(
-        ':nth-child(3) > .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiList-root > .MuiButtonBase-root',
-      ).should('have.class', 'Mui-selected');
-      cy.get('.css-1g5t85q > .MuiTypography-root').should('be.visible').and('have.text', 'Preheats');
+
       // The preheating status is displayed as PENDING.
       cy.get('#PENDING-11').should('exist');
       cy.get('#id-11').should('have.text', 11);
+
       // cy.get('#created_at-11').should('have.text', '2023-03-23 16:29:18');
       cy.get('#description-11').should('have.text', 'This is a preheat task with status pending');
+
       // The preheating status is displayed as FAILURE.
       cy.get('#FAILURE-10').should('exist');
       cy.get('#description-10').should('have.text', 'This is a preheat task with status failure');
+
       // The preheating status is displayed as SUCCESS.
       cy.get('#list-8 > .css-1mlhis1').should('exist').find('#SUCCESS-8').should('exist');
       cy.get('#description-8').should('have.text', 'This is a preheat task with status success');
     });
+
     it('should display preheat success list', () => {
       cy.intercept(
         {
@@ -113,6 +115,7 @@ describe('Preheats', () => {
       cy.get('#preheats-list').children().should('have.length', 6);
       cy.get('#preheat-pagination').should('not.exist');
     });
+
     it('should display preheat failure list', () => {
       cy.intercept(
         {
@@ -134,6 +137,7 @@ describe('Preheats', () => {
       // Check how many preheat tasks are in success failure.
       cy.get('#preheats-list').children().should('have.length', 4);
     });
+
     it('should display preheat pending list', () => {
       let interceptCount = 0;
       cy.intercept(
@@ -288,7 +292,7 @@ describe('Preheats', () => {
       cy.get('#list-1').should('exist').find('#SUCCESS-1').should('exist');
 
       // Go to show preheat page.
-      cy.get('#preheat-1 > .MuiBox-root').click();
+      cy.get('#preheat-1').click();
 
       // Then I see that the current page is the show update personal-access-tokens.
       cy.url().should('include', '/jobs/preheats/1');
diff --git a/cypress/e2e/job/task/clear.cy.ts b/cypress/e2e/job/task/clear.cy.ts
index 5e80fd5..149baae 100644
--- a/cypress/e2e/job/task/clear.cy.ts
+++ b/cypress/e2e/job/task/clear.cy.ts
@@ -16,6 +16,20 @@ describe('Clear', () => {
   it('when no data is loaded', () => {
     cy.get('#no-task').should('not.exist');
 
+    cy.get('#light').should('exist');
+    cy.get('#no-task-image').should('exist');
+
+    cy.get('#dark').click();
+    // Dark mode should show a different no-task-image.
+
+    cy.get('.Mui-selected').invoke('text').should('contain', 'Dark');
+
+    cy.get('.Mui-selected').invoke('text').should('not.contain', 'Light');
+
+    cy.get('#no-task-image').should('not.exist');
+
+    cy.get('#dark-no-task-image').should('exist');
+
     cy.intercept(
       {
         method: 'post',
@@ -299,6 +313,12 @@ describe('Clear', () => {
         expect(interceptCount).to.be.closeTo(2, 1);
       });
 
+      // Executed every 1 minute and once after 1 minute.
+      cy.get('@cache').then(() => {
+        expect(interceptCount).to.be.greaterThan(0);
+        expect(interceptCount).to.be.closeTo(2, 1);
+      });
+
       cy.intercept(
         {
           method: 'GET',
@@ -314,13 +334,6 @@ describe('Clear', () => {
 
       // Preheat API error response after three seconds.
       cy.wait(60000);
-
-      // Show error message.
-      cy.get('.MuiAlert-message').should('be.visible').and('contain', 'Unauthorized');
-
-      // Close error message.
-      cy.get('.MuiAlert-action > .MuiButtonBase-root').click();
-      cy.get('.MuiAlert-message').should('not.exist');
     });
 
     it('Delete cache API error response', () => {
diff --git a/cypress/e2e/job/task/execution.cy.ts b/cypress/e2e/job/task/execution.cy.ts
index 4b40d91..03c941e 100644
--- a/cypress/e2e/job/task/execution.cy.ts
+++ b/cypress/e2e/job/task/execution.cy.ts
@@ -43,12 +43,12 @@ describe('Executions', () => {
     // Show isloading.
     cy.get('[data-testid="isloading"]').should('be.exist');
 
-    cy.get('#execution-9 > .MuiBox-root').click();
+    cy.get('#execution-9').click();
 
     cy.url().should('include', '/jobs/task/executions/9');
 
     // Check for breadcrumb.
-    cy.get('.MuiBreadcrumbs-ol').should('exist').and('contain', 'executions').and('contain', '9');
+    cy.get('.MuiBreadcrumbs-ol').should('exist').and('contain', 'Executions').and('contain', '9');
 
     cy.get('.MuiBreadcrumbs-ol > :nth-child(5) > .MuiTypography-root').click();
 
diff --git a/cypress/e2e/job/task/executions.cy.ts b/cypress/e2e/job/task/executions.cy.ts
index 998109d..eda6ddb 100644
--- a/cypress/e2e/job/task/executions.cy.ts
+++ b/cypress/e2e/job/task/executions.cy.ts
@@ -84,13 +84,6 @@ describe('Executions', () => {
 
       cy.get('.MuiList-root > :nth-child(3) > .MuiButtonBase-root').click();
 
-      // Whether the style selected by menu is Task.
-      cy.get(
-        ':nth-child(3) > .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiList-root > .MuiButtonBase-root',
-      ).should('have.class', 'Mui-selected');
-
-      cy.get('.MuiList-root > .Mui-selected').should('be.visible').and('have.text', 'Task');
-
       // The executions status is displayed as PENDING.
       cy.get('#list-11 > .css-1mlhis1').should('exist').find('#PENDING-11').should('exist');
       cy.get('#id-11').should('have.text', 11);
@@ -318,7 +311,7 @@ describe('Executions', () => {
       cy.get('#list-1').should('exist').find('#SUCCESS-1').should('exist');
 
       // Go to show executions page.
-      cy.get('#execution-1 > .MuiBox-root').click();
+      cy.get('#execution-1').click();
 
       // Then I see that the current page is the show update personal-access-tokens.
       cy.url().should('include', '/jobs/task/executions/1');
diff --git a/cypress/e2e/menu/menu.cy.ts b/cypress/e2e/menu/menu.cy.ts
index 2229fe0..a0e8e1d 100644
--- a/cypress/e2e/menu/menu.cy.ts
+++ b/cypress/e2e/menu/menu.cy.ts
@@ -3,14 +3,39 @@ import seedPeers from '../../fixtures/seed-peers/seed-peers.json';
 import schedulers from '../../fixtures/schedulers/schedulers.json';
 
 describe('Menu', () => {
+  beforeEach(() => {
+    cy.viewport(1440, 1080);
+  });
+
   it('user not signin', () => {
     // redirect when not signin.
     cy.visit('/');
 
     // Then I see that the current page is the signin!
     cy.url().should('include', '/signin');
+  });
 
-    cy.viewport(1440, 1080);
+  it('should switch to dark mode', () => {
+    cy.guestSignin();
+    cy.visit('/');
+
+    // Click the Toggle Dark button.
+    cy.get('#dark').click();
+
+    cy.get('.Mui-selected').invoke('text').should('contain', 'Dark');
+
+    cy.get('.Mui-selected').invoke('text').should('not.contain', 'Light');
+
+    cy.get('#main').should('have.css', 'background-color', 'rgb(31, 36, 48)');
+
+    // Click the Toggle Light button.
+    cy.get('#light').click();
+
+    cy.get('.Mui-selected').invoke('text').should('not.contain', 'Dark');
+
+    cy.get('.Mui-selected').invoke('text').should('contain', 'Light');
+
+    cy.get('#main').should('have.css', 'background-color', 'rgb(244, 246, 248)');
   });
 
   describe('try to signin as guest user', () => {
@@ -32,32 +57,36 @@ describe('Menu', () => {
     });
 
     it('should navigate to the tokens page', () => {
-      cy.get('.MuiList-root > :nth-child(2) > .MuiButtonBase-root').click();
-      cy.get('.MuiCollapse-wrapperInner > .MuiList-root > .MuiButtonBase-root').click();
+      cy.get('#developer').click();
+      cy.get('#personal-access-tokens').click();
 
       // Then I see that the current page is the tokens!
       cy.url().should('include', '/developer/personal-access-tokens');
 
       // The selected menu is tokens.
-      cy.get('.MuiCollapse-wrapperInner > .MuiList-root > .MuiButtonBase-root').should('have.class', 'Mui-selected');
+      cy.get('#personal-access-tokens').should('have.class', 'Mui-selected');
+
+      cy.get('#dragonfly').click();
+      // Then I see that the current page is the clusters!
+      cy.url().should('include', '/clusters');
     });
 
     it('should navigate to the preheats page and task page', () => {
-      cy.get('.MuiList-root > :nth-child(3) > .MuiButtonBase-root').click();
-      cy.get('[href="/jobs/preheats"]').click();
+      cy.get('#jobs').click();
+      cy.get('#preheats').click();
 
       // Then I see that the current page is the preheats!
       cy.url().should('include', '/jobs/preheats');
 
       // The selected menu is preheats.
-      cy.get('[href="/jobs/preheats"]').should('have.class', 'Mui-selected');
+      cy.get('#preheats').should('have.class', 'Mui-selected');
 
-      cy.get('[href="/jobs/task/clear"]').click();
+      cy.get('#task').click();
 
       // Then I see that the current page is the task!
       cy.url().should('include', '/jobs/task/clear');
 
-      cy.get('[href="/jobs/task/clear"]').should('have.class', 'Mui-selected');
+      cy.get('#task').should('have.class', 'Mui-selected');
     });
   });
 
@@ -114,46 +143,42 @@ describe('Menu', () => {
     });
 
     it('should navigate to the tokens page', () => {
-      cy.get('.MuiList-root > :nth-child(2) > .MuiButtonBase-root').click();
-      cy.get('.MuiCollapse-wrapperInner > .MuiList-root > .MuiButtonBase-root').click();
+      cy.get('#developer').click();
+      cy.get('#personal-access-tokens').click();
 
       // Then I see that the current page is the tokens!
       cy.url().should('include', '/developer/personal-access-tokens');
 
       // The selected menu is tokens.
-      cy.get('.MuiCollapse-wrapperInner > .MuiList-root > .MuiButtonBase-root').should('have.class', 'Mui-selected');
+      cy.get('#personal-access-tokens').should('have.class', 'Mui-selected');
     });
 
     it('should navigate to the preheats page and task page', () => {
-      cy.get('.MuiList-root > :nth-child(3) > .MuiButtonBase-root').click();
-      cy.get('[href="/jobs/preheats"]').click();
-
-      // Show page loading.
-      cy.get('#page-loading').should('be.visible');
+      cy.get('#jobs').click();
+      cy.get('#preheats').click();
 
       // Then I see that the current page is the preheats!
       cy.url().should('include', '/jobs/preheats');
 
       // The selected menu is preheats.
-      cy.get('[href="/jobs/preheats"]').should('have.class', 'Mui-selected');
+      cy.get('#preheats').should('have.class', 'Mui-selected');
 
-      cy.get('[href="/jobs/task/clear"]').click();
+      cy.get('#task').click();
 
       // Then I see that the current page is the task!
       cy.url().should('include', '/jobs/task/clear');
 
-      // The selected menu is task.
-      cy.get('[href="/jobs/task/clear"]').should('have.class', 'Mui-selected');
+      cy.get('#task').should('have.class', 'Mui-selected');
     });
 
     it('should navigate to the users page', () => {
-      cy.get('[href="/users"]').click();
+      cy.get('#users').click();
 
       // Then I see that the current page is the users!
       cy.url().should('include', '/users');
 
       // The selected menu is users.
-      cy.get('[href="/users"]').should('have.class', 'Mui-selected');
+      cy.get('#users').should('have.class', 'Mui-selected');
     });
 
     it('should navigate to the profile page', () => {
@@ -167,6 +192,42 @@ describe('Menu', () => {
       cy.url().should('include', '/profile');
     });
 
+    it('The menu should be smaller', () => {
+      // The menu should be smaller.
+      cy.get('#closure').should('exist').click();
+      cy.get('#expand').should('exist');
+      cy.get('#closure').should('not.exist');
+
+      // Go to tokens page.
+      cy.get('#developer').click();
+
+      cy.get('#personal-access-tokens').click();
+
+      // Then I see that the current page is the tokens!
+      cy.url().should('include', '/developer/personal-access-tokens');
+
+      // Go to jobs page.
+      cy.get('#jobs').click();
+      cy.get('#preheats').click();
+
+      // Then I see that the current page is the preheats!
+      cy.url().should('include', '/jobs/preheats');
+
+      // Go to task page.
+      cy.get('#jobs').click();
+      cy.get('#task').click();
+
+      // Then I see that the current page is the task!
+      cy.url().should('include', '/jobs/task/clear');
+
+      // Go to user page.
+
+      cy.get('#users').click();
+
+      // Then I see that the current page is the users!
+      cy.url().should('include', '/users');
+    });
+
     it('can logout', () => {
       cy.intercept(
         {
diff --git a/cypress/e2e/peers/peers.cy.ts b/cypress/e2e/peers/peers.cy.ts
index 100ef86..438ec57 100644
--- a/cypress/e2e/peers/peers.cy.ts
+++ b/cypress/e2e/peers/peers.cy.ts
@@ -250,8 +250,6 @@ describe('Peers', () => {
   });
 
   describe('refresh', () => {
-    beforeEach(() => {});
-
     it('can refresh peers and return new data', () => {
       cy.get('#total').should('have.text', 10);
       cy.get('#git-version').should('have.text', 4);
@@ -261,7 +259,7 @@ describe('Peers', () => {
 
       // Click refresh button.
       cy.get('#refresh').click();
-      cy.get('.css-70qvj9 > .MuiTypography-root').should('be.visible').and('have.text', 'Refresh');
+      cy.get('#refresh-title').should('be.visible').and('have.text', 'Refresh');
 
       cy.get('#cancel').click();
       cy.get('#refresh').click();
@@ -316,7 +314,7 @@ describe('Peers', () => {
 
       // Click refresh button.
       cy.get('#refresh').click();
-      cy.get('.css-70qvj9 > .MuiTypography-root').should('be.visible').and('have.text', 'Refresh');
+      cy.get('#refresh-title').should('be.visible').and('have.text', 'Refresh');
 
       cy.intercept(
         {
@@ -355,7 +353,7 @@ describe('Peers', () => {
 
       // Click refresh button.
       cy.get('#refresh').click();
-      cy.get('.css-70qvj9 > .MuiTypography-root').should('be.visible').and('have.text', 'Refresh');
+      cy.get('#refresh-title').should('be.visible').and('have.text', 'Refresh');
 
       cy.get('#cancel').click();
       cy.get('#refresh').click();
diff --git a/cypress/e2e/profile/profile.cy.ts b/cypress/e2e/profile/profile.cy.ts
index 58005d3..3c122c7 100644
--- a/cypress/e2e/profile/profile.cy.ts
+++ b/cypress/e2e/profile/profile.cy.ts
@@ -46,27 +46,9 @@ describe('Profile', () => {
     cy.viewport(1440, 1080);
   });
 
-  it('opens user profile page from the home page', () => {
-    cy.visit('/');
-
-    cy.get('#unfold-more').click();
-
-    // Go to profil page.
-    cy.get('#profile-menu').click();
-
-    // Then I see that the current page is the profile!
-    cy.url().should('include', '/profile');
-
-    cy.get('#my-profile').should('contain', 'My Profile');
-  });
-
   it('when data is loaded', () => {
-    cy.get('#menu-name').should('be.visible').and('have.text', 'root');
-
-    cy.get('#menu-email').should('be.visible').and('have.text', 'root@example.com');
-
     // Show user name.
-    cy.get('.css-70qvj9 > .MuiBox-root > .MuiTypography-h5').should('be.visible').and('have.text', 'root');
+    cy.get('#name-title').should('be.visible').and('have.text', 'root');
 
     // Show user description.
     cy.get('#description').should('be.visible').and('have.text', 'I am root');
@@ -74,14 +56,14 @@ describe('Profile', () => {
     cy.get('#name').should('be.visible').and('have.text', 'root');
     cy.get('#email').should('be.visible').and('have.text', 'root@example.com');
     cy.get('#location').should('be.visible').and('have.text', 'Hangzhou');
-    cy.get('#phone').should('be.visible').and('have.text', 1234567890);
+    cy.get('#phone').should('be.visible').and('have.text', '+86 153 1234 5678');
     cy.get('#created_at').should('be.visible').and('have.text', '2023-11-06 06:09:04');
 
     // Check Update Personal Information form.
     cy.get('.MuiGrid-root > .MuiButtonBase-root').click();
 
     cy.get('#bio').should('have.value', 'I am root');
-    cy.get('#phone').should('have.value', 1234567890);
+    cy.get('#phone').should('have.value', '+86 153 1234 5678');
     cy.get('#location').should('have.value', 'Hangzhou');
     cy.get('#email').should('have.value', 'root@example.com');
   });
@@ -100,11 +82,8 @@ describe('Profile', () => {
       },
     );
 
-    cy.get('#menu-name').should('be.visible').and('have.text', '-');
-    cy.get('#menu-email').should('be.visible').and('have.text', '-');
-
     // Show user name.
-    cy.get('.MuiTypography-caption').should('be.visible').and('have.text', '-');
+    cy.get('#name-title').should('be.visible').and('have.text', '-');
 
     // Show user description.
     cy.get('#description').should('be.visible').and('have.text', '-');
@@ -119,7 +98,7 @@ describe('Profile', () => {
     cy.get('.MuiGrid-root > .MuiButtonBase-root').click();
 
     cy.get('#bio').should('have.value', '');
-    cy.get('#phone').should('have.value', '');
+    cy.get('#phone').should('have.value', '+86');
     cy.get('#location').should('have.value', '');
     cy.get('#email').should('have.value', '');
   });
@@ -144,7 +123,7 @@ describe('Profile', () => {
     cy.get('.MuiGrid-root > .MuiButtonBase-root').click();
 
     cy.get('#bio').should('have.value', '');
-    cy.get('#phone').should('have.value', '');
+    cy.get('#phone').should('have.value', '+86');
     cy.get('#location').should('have.value', '');
     cy.get('#email').should('have.value', '');
   });
@@ -193,9 +172,6 @@ describe('Profile', () => {
 
       cy.get('#save').click();
 
-      // Check whether the navigation bar email has changed.
-      cy.get('.MuiTypography-caption').should('have.text', 'root@gmail.com');
-
       // Check if profile description is updated.
       cy.get('#description').should('be.visible').and('have.text', 'I am root, I will change the description');
 
@@ -206,7 +182,7 @@ describe('Profile', () => {
       cy.get('#location').should('be.visible').and('have.text', 'Shanghai');
 
       // Check if profile phone is updated.
-      cy.get('#phone').should('be.visible').and('have.text', 15123456789);
+      cy.get('#phone').should('be.visible').and('have.text', '+86 153 1234 5678');
     });
 
     it('click the `CANCEL button', () => {
@@ -222,7 +198,6 @@ describe('Profile', () => {
       cy.get('#description').should('be.visible').and('have.text', 'I am root');
 
       // Check whether the navigation bar email has changed.
-      cy.get('.MuiTypography-caption').should('have.text', 'root@example.com');
       cy.get('#email').should('be.visible').and('have.text', 'root@example.com');
 
       // Click EDIT button.
@@ -301,7 +276,7 @@ describe('Profile', () => {
 
       // Should display message phone the validation error.
       cy.get('#phone').clear();
-      cy.get('#phone').type('1234567890');
+      cy.get('#phone').type('+86 153 1234 123123');
 
       // Show verification error message.
       cy.get('#phone-helper-text').should('be.visible').and('have.text', 'Invalid phone number.');
@@ -309,7 +284,7 @@ describe('Profile', () => {
       cy.get('.css-1033rfx > .MuiTypography-root').should('exist').and('have.text', 'Update Personal Information');
 
       cy.get('#phone').clear();
-      cy.get('#phone').type('15123456789');
+      cy.get('#phone').type('+86 151 2345 6789');
 
       // Verification passed.
       cy.get('#phone-helper-text').should('not.exist');
@@ -353,8 +328,21 @@ describe('Profile', () => {
           });
       });
 
-      // Click change password button.
-      cy.get('.css-1a9getn > .MuiButtonBase-root').click();
+      // Click change password tab.
+      cy.get('#tab-password').click();
+
+      cy.get('#oldPassword').type('dragonfly1');
+      cy.get('#newPassword').type('dragonfly2');
+      cy.get('#confirmNewPassword').type('dragonfly2');
+
+      // Click cancel password button.
+      cy.get('#cancel-change-password').click();
+
+      // Input should be cleared.
+      cy.get('#oldPassword').should('have.value', '');
+      cy.get('#newPassword').should('have.value', '');
+      cy.get('#confirmNewPassword').should('have.value', '');
+
       cy.get('#oldPassword').type('dragonfly1');
       cy.get('#newPassword').type('dragonfly2');
       cy.get('#confirmNewPassword').type('dragonfly2');
@@ -366,24 +354,20 @@ describe('Profile', () => {
       cy.url().should('include', 'signin');
     });
 
-    it('click the `CANCEL button', () => {
+    it('click the Profile tab', () => {
       // Click change password button.
-      cy.get('.css-1a9getn > .MuiButtonBase-root').click();
-      cy.get('.profile_profileContainer__l5i6P > .MuiGrid-root > .MuiTypography-root')
-        .should('be.visible')
-        .and('have.text', 'Change Password');
+      cy.get('#tab-password').click();
+      cy.get('#change-password-title').should('be.visible').and('have.text', 'Change Password');
       cy.get('#oldPassword').type('dragonfly1');
       cy.get('#newPassword').type('dragonfly2');
       cy.get('#confirmNewPassword').type('dragonfly2');
 
       // Click cancel button.
-      cy.get('#cancel-change-password').click();
-      cy.get('.profile_profileContainer__l5i6P > .MuiGrid-root > .MuiTypography-root').should('not.exist');
+      cy.get('#tab-profile').click();
+      cy.get('#change-password-title').should('not.exist');
 
-      cy.get('.css-1a9getn > .MuiButtonBase-root').click();
-      cy.get('.profile_profileContainer__l5i6P > .MuiGrid-root > .MuiTypography-root')
-        .should('be.visible')
-        .and('have.text', 'Change Password');
+      cy.get('#tab-password').click();
+      cy.get('#change-password-title').should('be.visible').and('have.text', 'Change Password');
 
       // Check if old password is empty.
       cy.get('#oldPassword').should('have.text', '');
@@ -415,7 +399,7 @@ describe('Profile', () => {
       cy.visit('/profile');
 
       // Click change password button.
-      cy.get('.css-1a9getn > .MuiButtonBase-root').click();
+      cy.get('#tab-password').click();
       cy.get('#oldPassword').type('dragonfly1');
       cy.get('#newPassword').type('dragonfly2');
       cy.get('#confirmNewPassword').type('dragonfly2');
@@ -434,7 +418,7 @@ describe('Profile', () => {
       });
 
       // Click change password button.
-      cy.get('.css-1a9getn > .MuiButtonBase-root').click();
+      cy.get('#tab-password').click();
       cy.get('#oldPassword').type('dragonfly1');
       cy.get('#newPassword').type('dragonfly2');
       cy.get('#confirmNewPassword').type('dragonfly2');
@@ -454,7 +438,7 @@ describe('Profile', () => {
       });
 
       // Click change password button.
-      cy.get('.css-1a9getn > .MuiButtonBase-root').click();
+      cy.get('#tab-password').click();
       cy.get('#oldPassword').type('dragonfly1');
       cy.get('#newPassword').type('dragonfly2');
       cy.get('#confirmNewPassword').type('dragonfly2');
@@ -466,7 +450,7 @@ describe('Profile', () => {
 
     it('cannot change password without required attributes', () => {
       // Click change password button.
-      cy.get('.css-1a9getn > .MuiButtonBase-root').click();
+      cy.get('#tab-password').click();
       cy.get('#change-password').click();
 
       // Show error message.
@@ -490,7 +474,7 @@ describe('Profile', () => {
       const newPasswordLengthIsInsufficient = _.times(7, () => _.sample(characters)).join('');
 
       // Click change password button.
-      cy.get('.css-1a9getn > .MuiButtonBase-root').click();
+      cy.get('#tab-password').click();
 
       // Should display message old password the validation error.
       cy.get('#oldPassword').type(oldPassword);
@@ -543,7 +527,7 @@ describe('Profile', () => {
     });
 
     it('click the password hide butto', () => {
-      cy.get('.css-1a9getn > .MuiButtonBase-root').click();
+      cy.get('#tab-password').click();
 
       // Verify the display status of the content of the old password input box.
       cy.get('#oldPassword').type('dragonfly1');
diff --git a/cypress/e2e/schedulers/scheduler.cy.ts b/cypress/e2e/schedulers/scheduler.cy.ts
index 2315b3e..9588501 100644
--- a/cypress/e2e/schedulers/scheduler.cy.ts
+++ b/cypress/e2e/schedulers/scheduler.cy.ts
@@ -119,7 +119,7 @@ describe('Scheduler', () => {
       cy.get('#status')
         .should('be.visible')
         .and('contain', 'Active')
-        .and('have.css', 'background-color', 'rgb(46, 143, 121)');
+        .and('have.css', 'background-color', 'rgb(31, 125, 83)');
 
       // Show features.
       cy.get('#features').should('be.visible').and('contain', 'Schedule').and('contain', 'Preheat');
@@ -154,7 +154,7 @@ describe('Scheduler', () => {
       cy.get('#status')
         .should('be.visible')
         .and('contain', 'Inactive')
-        .and('have.css', 'background-color', 'rgb(28, 41, 58)');
+        .and('have.css', 'background-color', 'rgb(24, 35, 15)');
     });
   });
 
diff --git a/cypress/e2e/schedulers/schedulers.cy.ts b/cypress/e2e/schedulers/schedulers.cy.ts
index 0199a82..e54d91f 100644
--- a/cypress/e2e/schedulers/schedulers.cy.ts
+++ b/cypress/e2e/schedulers/schedulers.cy.ts
@@ -65,17 +65,22 @@ describe('Schedulers', () => {
 
       // Show idloading.
       cy.get('.MuiPagination-ul > :nth-child(3) > .MuiButtonBase-root').click();
+
       // Show hostname.
       cy.get('#hostname-scheduler-7').should('be.visible').and('contain', 'scheduler-7');
+
       // Show ip.
       cy.get('#ip-7').should('be.visible').and('contain', '30.44.98.202');
+
       // Show state.
       cy.get('#state-7')
         .should('be.visible')
         .and('contain', 'Active')
-        .and('have.css', 'background-color', 'rgb(46, 143, 121)');
+        .and('have.css', 'background-color', 'rgb(31, 125, 83)');
+
       // Show features.
       cy.get('#features-7').should('be.visible').and('contain', 'Schedule');
+
       // Show scheduler-5 information.
       cy.get('#hostname-scheduler-5').should('be.visible').and('contain', 'scheduler-5');
       cy.get('#ip-5').should('be.visible').and('contain', '20.14.28.202');
@@ -83,7 +88,15 @@ describe('Schedulers', () => {
       cy.get('#state-43')
         .should('be.visible')
         .and('contain', 'Inactive')
-        .and('have.css', 'background-color', 'rgb(28, 41, 58)');
+        .and('have.css', 'background-color', 'rgb(24, 35, 15)');
+
+      // Click scheduler-18 operation button.
+      cy.get('#operation-18').click();
+
+      cy.get(':nth-child(12) > .MuiPaper-root > .MuiList-root > .schedulers_menu__mxj5m > #view-scheduler-18').click();
+
+      // Then I see that the current page is the scheduler 18.
+      cy.url().should('include', 'clusters/1/schedulers/18');
     });
 
     it('can display schedulers card', () => {
@@ -97,7 +110,7 @@ describe('Schedulers', () => {
         .should('be.visible')
         .and('have.text', 'Active')
         .and('have.css', 'background-color', 'rgba(0, 167, 111, 0.1)');
-      cy.get(':nth-child(4) > .MuiButtonBase-root').click();
+      cy.get('.MuiPagination-ul > :nth-child(4) > .MuiButtonBase-root').click();
       cy.get('#card-hostname-scheduler-41').should('be.visible').and('have.text', 'scheduler-41');
       // Show status.
       cy.get('#card-state-41')
@@ -615,7 +628,7 @@ describe('Schedulers', () => {
 
       cy.get('[value="inactive"]').click();
 
-      cy.get(':nth-child(4) > .MuiButtonBase-root').click();
+      cy.get('.MuiPagination-ul > :nth-child(4) > .MuiButtonBase-root').click();
 
       cy.get('#operation-10').click();
 
@@ -792,7 +805,7 @@ describe('Schedulers', () => {
       // Close delete inactive schedulers.
       cy.get('#close-delete-icon').click();
       cy.get('#delete-all-inactive-instances').click();
-      cy.get('.css-pbbh6n > .css-70qvj9 > .MuiTypography-root').should('have.text', 'Delete inactive instances');
+      cy.get('#delete-inactive-instances-title').should('have.text', 'Delete inactive instances');
       cy.get('#schedulerTotal').should('have.text', '0 inactive');
       cy.get('#back-button').should('be.disabled');
       // Check next button.
@@ -869,7 +882,7 @@ describe('Schedulers', () => {
       }
 
       cy.get('#delete-all-inactive-instances').click();
-      cy.get('.css-pbbh6n > .css-70qvj9 > .MuiTypography-root').should('have.text', 'Delete inactive instances');
+      cy.get('#delete-inactive-instances-title').should('have.text', 'Delete inactive instances');
       cy.get('#schedulerTotal').should('have.text', '34 inactive');
       cy.get('#back-button').should('be.disabled');
       cy.get('#next-button').should('not.be.disabled');
diff --git a/cypress/e2e/seed-peers/seed-peer.cy.ts b/cypress/e2e/seed-peers/seed-peer.cy.ts
index cc027c5..a0afdc3 100644
--- a/cypress/e2e/seed-peers/seed-peer.cy.ts
+++ b/cypress/e2e/seed-peers/seed-peer.cy.ts
@@ -56,7 +56,7 @@ describe('Seed peer', () => {
   it('click the hostname', () => {
     cy.visit('/clusters/1/seed-peers');
 
-    cy.get(':nth-child(4) > .MuiButtonBase-root').click();
+    cy.get('.MuiPagination-ul > :nth-child(4) > .MuiButtonBase-root').click();
 
     cy.get('#card-hostname-seed-peer-10').should('have.text', 'seed-peer-10');
     cy.get('#card-hostname-seed-peer-10').click();
@@ -121,7 +121,7 @@ describe('Seed peer', () => {
       cy.get('#status')
         .should('be.visible')
         .and('contain', 'Active')
-        .and('have.css', 'background-color', 'rgb(46, 143, 121)');
+        .and('have.css', 'background-color', 'rgb(31, 125, 83)');
 
       // Show Created At.
       cy.get('#created-at').should('have.text', '2023-11-11 20:09:08');
@@ -147,7 +147,7 @@ describe('Seed peer', () => {
       cy.get('#status')
         .should('be.visible')
         .and('contain', 'Inactive')
-        .and('have.css', 'background-color', 'rgb(28, 41, 58)');
+        .and('have.css', 'background-color', 'rgb(24, 35, 15)');
     });
   });
 
@@ -196,7 +196,7 @@ describe('Seed peer', () => {
       cy.get('#type').should('contain', '-');
 
       // Show Start.
-      cy.get(':nth-child(6) > .css-1ltbflq-MuiTypography-root').should('contain', '-');
+      cy.get('#status').should('contain', '-');
 
       // Show Created At.
       cy.get('#created-at').should('contain', '-');
@@ -260,7 +260,7 @@ describe('Seed peer', () => {
       cy.get('#type').should('contain', '-');
 
       // Show Start.
-      cy.get(':nth-child(6) > .css-1ltbflq-MuiTypography-root').should('contain', '-');
+      cy.get('#status').should('contain', '-');
 
       // Show Created At.
       cy.get('#created-at').should('contain', '-');
diff --git a/cypress/e2e/seed-peers/seed-peers.cy.ts b/cypress/e2e/seed-peers/seed-peers.cy.ts
index 765242b..4393833 100644
--- a/cypress/e2e/seed-peers/seed-peers.cy.ts
+++ b/cypress/e2e/seed-peers/seed-peers.cy.ts
@@ -74,11 +74,11 @@ describe('Seed peers', () => {
       cy.get(':nth-child(1) > :nth-child(8) > .MuiChip-root')
         .should('be.visible')
         .and('contain', 'Active')
-        .and('have.css', 'background-color', 'rgb(46, 143, 121)');
+        .and('have.css', 'background-color', 'rgb(31, 125, 83)');
     });
 
     it('can display seed peers card', () => {
-      cy.get(':nth-child(4) > .MuiButtonBase-root').click();
+      cy.get('.MuiPagination-ul > :nth-child(4) > .MuiButtonBase-root').click();
       cy.get('#card-id-7').should('be.visible').and('have.text', '7');
 
       // Show hostname.
@@ -329,7 +329,7 @@ describe('Seed peers', () => {
       cy.get(':nth-child(5) > :nth-child(8) > .MuiChip-root')
         .should('be.visible')
         .and('contain', 'Inactive')
-        .and('have.css', 'background-color', 'rgb(28, 41, 58)');
+        .and('have.css', 'background-color', 'rgb(24, 35, 15)');
 
       // Go to last page.
       cy.get(':nth-child(7) > .MuiButtonBase-root').click();
@@ -554,7 +554,7 @@ describe('Seed peers', () => {
       cy.get('#card').click();
 
       // Go to last page.
-      cy.get(':nth-child(4) > .MuiButtonBase-root').click();
+      cy.get('.MuiPagination-ul > :nth-child(4) > .MuiButtonBase-root').click();
 
       // Check the current page number.
       cy.get('#seed-peer-pagination > .MuiPagination-ul .Mui-selected').should('have.text', '3');
@@ -895,7 +895,7 @@ describe('Seed peers', () => {
       cy.get('#close-delete-icon').click();
       cy.get('#delete-all-inactive-instances').click();
 
-      cy.get('.css-pbbh6n > .css-70qvj9 > .MuiTypography-root').should('have.text', 'Delete inactive instances');
+      cy.get('#delete-inactive-instances-title').should('have.text', 'Delete inactive instances');
       cy.get('#seedPeerTotal').should('have.text', '0 inactive');
       cy.get('#back-button').should('be.disabled');
 
@@ -983,7 +983,7 @@ describe('Seed peers', () => {
 
       cy.get('#delete-all-inactive-instances').click();
 
-      cy.get('.css-pbbh6n > .css-70qvj9 > .MuiTypography-root').should('have.text', 'Delete inactive instances');
+      cy.get('#delete-inactive-instances-title').should('have.text', 'Delete inactive instances');
       cy.get('#seedPeerTotal').should('have.text', '20 inactive');
       cy.get('#back-button').should('be.disabled');
       cy.get('#next-button').should('not.be.disabled');
diff --git a/cypress/e2e/signin/signin.cy.ts b/cypress/e2e/signin/signin.cy.ts
index e278024..8457982 100644
--- a/cypress/e2e/signin/signin.cy.ts
+++ b/cypress/e2e/signin/signin.cy.ts
@@ -136,12 +136,12 @@ describe('Signin', () => {
   });
 
   it('click the `Create an account` button', () => {
-    cy.get('.MuiTypography-inherit > .MuiTypography-root').click();
+    cy.get('#create-account').click();
 
     // Then I see that the current page is the signup!
     cy.url().should('include', '/signup');
 
-    cy.get('.MuiTypography-inherit > .MuiTypography-root').click();
+    cy.get('#sign-in').click();
 
     // Then I see that the current page is the signin!
     cy.url().should('include', '/signin');
diff --git a/cypress/e2e/signup/signup.cy.ts b/cypress/e2e/signup/signup.cy.ts
index 988494c..9e3499f 100644
--- a/cypress/e2e/signup/signup.cy.ts
+++ b/cypress/e2e/signup/signup.cy.ts
@@ -98,12 +98,12 @@ describe('Signup', () => {
   });
 
   it('click the `Sign in` button', () => {
-    cy.get('.MuiTypography-inherit > .MuiTypography-root').click();
+    cy.get('#sign-in').click();
 
     // Then I see that the current page is the signin!
     cy.url().should('include', '/signin');
 
-    cy.get('.MuiTypography-inherit > .MuiTypography-root').click();
+    cy.get('#create-account').click();
 
     // Then I see that the current page is the signup!
     cy.url().should('include', '/signup');
diff --git a/cypress/e2e/users/create.user.cy.ts b/cypress/e2e/users/create.user.cy.ts
new file mode 100644
index 0000000..8debb46
--- /dev/null
+++ b/cypress/e2e/users/create.user.cy.ts
@@ -0,0 +1,252 @@
+import _ from 'lodash';
+import createUsers from '../../fixtures/users/create-user.json';
+import users from '../../fixtures/users/users.json';
+
+describe('Create user', () => {
+  beforeEach(() => {
+    cy.signin();
+
+    cy.visit('/users/new');
+
+    cy.viewport(1440, 1080);
+  });
+
+  it('can create user', () => {
+    cy.visit('/users');
+
+    cy.intercept(
+      {
+        method: 'GET',
+        url: '/api/v1/users?page=1&per_page=10000000',
+      },
+      (req) => {
+        req.reply({
+          statusCode: 200,
+          body: users,
+        });
+      },
+    );
+
+    // Go to last page.
+    cy.get('.MuiPagination-ul > :nth-child(3) > .MuiButtonBase-root').click();
+
+    // There is only one piece of data on the last pag.
+    cy.get('#user-table-body').children().should('have.length', 1);
+
+    cy.get('#create-user').click();
+
+    // Then I see that the current page is the New user!
+    cy.url().should('include', '/users/new');
+
+    cy.get('.MuiBreadcrumbs-ol').should('contain', 'New user');
+
+    cy.get('#account').type('billy');
+
+    cy.get('#email').type('billy@example.com');
+
+    cy.get('#bio').type('I am billy');
+
+    cy.get('#phone').type('18012341234');
+
+    cy.get('#location').type('ParisFrance');
+
+    cy.get('#password').type('Dragonfly1');
+
+    cy.get('#confirmPassword').type('Dragonfly1');
+
+    cy.intercept('POST', '/api/v1/users/signup', (req) => {
+      req.reply({
+        statusCode: 200,
+        body: [],
+      });
+    });
+
+    cy.intercept(
+      {
+        method: 'GET',
+        url: '/api/v1/users?page=1&per_page=10000000',
+      },
+      (req) => {
+        req.reply({
+          statusCode: 200,
+          body: createUsers,
+        });
+      },
+    );
+
+    cy.get('#save').click();
+
+    // Go to last page.
+    cy.get('.MuiPagination-ul > :nth-child(3) > .MuiButtonBase-root').click();
+
+    // There is only one piece of data on the last pag.
+    cy.get('#user-table-body').children().should('have.length', 2);
+
+    cy.get('#user-table-body > :nth-child(2) > :nth-child(2)').should('have.text', 'billy');
+  });
+
+  it('cannot create account with existing email', () => {
+    cy.intercept('POST', '/api/v1/users/signup', (req) => {
+      req.reply({
+        statusCode: 409,
+        body: {
+          message: 'Conflict',
+        },
+      });
+    });
+
+    cy.get('#account').type('root-1');
+    cy.get('#email').type('lucy@example.com');
+    cy.get('#phone').type('18012341234');
+    cy.get('#password').type('dragonfly1');
+    cy.get('#confirmPassword').type(`dragonfly1{enter}`);
+
+    // Show error message.
+    cy.get('.MuiAlert-message').should('be.visible').and('contain', 'Conflict');
+
+    // Close error message.
+    cy.get('.MuiAlert-action > .MuiButtonBase-root').click();
+    cy.get('.MuiSnackbar-root > .MuiPaper-root').should('not.exist');
+  });
+
+  it('cannot create account with existing account', () => {
+    cy.intercept('POST', '/api/v1/users/signup', (req) => {
+      req.reply({
+        statusCode: 409,
+        body: {
+          message: 'Conflict',
+        },
+      });
+    });
+
+    cy.get('#account').type('root');
+    cy.get('#email').type('root@console.co');
+    cy.get('#phone').type('18012341234');
+    cy.get('#password').type('dragonfly1');
+    cy.get('#confirmPassword').type(`dragonfly1{enter}`);
+
+    // Show error message.
+    cy.get('.MuiAlert-message').should('be.visible').and('contain', 'Conflict');
+    cy.get('.MuiAlert-action > .MuiButtonBase-root').click();
+    cy.get('.MuiSnackbar-root > .MuiPaper-root').should('not.exist');
+  });
+
+  it('click the password hide butto and confirm password hide butto', () => {
+    cy.get('#password').type('dragonfly1');
+    cy.get('#confirmPassword').type(`dragonfly1{enter}`);
+
+    cy.get('.MuiInputBase-root > .MuiButtonBase-root > [data-testid="VisibilityOffIcon"] > path').click();
+    cy.get('#confirmPassword').should('have.value', 'dragonfly1');
+
+    cy.get('[data-testid="VisibilityOffIcon"]').click();
+    cy.get('#confirmPassword').should('have.value', 'dragonfly1');
+  });
+
+  it('should handle API error response', () => {
+    cy.intercept('POST', '/api/v1/users/signup', (req) => {
+      req.reply({
+        forceNetworkError: true,
+      });
+    });
+
+    cy.get('#account').type('root-1');
+    cy.get('#email').type('root@console.com');
+    cy.get('#phone').type('18012341234');
+    cy.get('#password').type('dragonfly1');
+    cy.get('#confirmPassword').type(`dragonfly1{enter}`);
+
+    // Show error message.
+    cy.get('.MuiAlert-message').should('be.visible').and('contain', 'Failed to fetch');
+    cy.get('.MuiAlert-action > .MuiButtonBase-root').click();
+    cy.get('.MuiSnackbar-root > .MuiPaper-root').should('not.exist');
+  });
+
+  it('click the `CANCEL button', () => {
+    cy.get('#cancel').click();
+
+    // Then I see that the current page is the users!
+    cy.url().should('include', '/users');
+  });
+
+  it('cannot signup with invalid attributes', () => {
+    const nameNotLongEnough = _.times(2, () => _.sample('abcdefghijklmnopqrstuvwxyz')).join('');
+    const nameLengthExceeds = _.times(11, () => _.sample('abcdefghijklmnopqrstuvwxyz')).join('');
+    const passsword = _.times(8, () => _.sample('abcdefghijklmnopqrstuvwxyz')).join('');
+    const location = _.times(101, () => _.sample('abcdefghijklmnopqrstuvwxyz')).join('');
+
+    // Should display message account the validation error.
+    cy.get('#account').type(nameNotLongEnough);
+    cy.get('#account-helper-text').should('be.visible').and('contain', 'Fill in the characters, the length is 3-10.');
+
+    cy.get('#account').type(nameLengthExceeds);
+    cy.get('#account-helper-text').should('be.visible').and('contain', 'Fill in the characters, the length is 3-10.');
+
+    cy.get('#account').clear();
+
+    cy.get('#account').type('root');
+
+    // Verification passed.
+    cy.get('#account-helper-text').should('not.exist');
+
+    // Should display message email the validation error.
+    cy.get('#email').type('root');
+    cy.get('#email-helper-text').should('be.visible').and('contain', 'Email is invalid or already taken.');
+
+    cy.get('#email').clear();
+
+    cy.get('#email').type('root@console.com');
+
+    // Verification passed.
+    cy.get('#email-helper-text').should('not.exist');
+
+    // Should display message phone the validation error.
+    cy.get('#phone').type('001');
+    cy.get('#phone-helper-text').should('be.visible').and('contain', 'Enter a valid phone number.');
+
+    cy.get('#phone').clear();
+
+    cy.get('#phone').type('+86 19101011212');
+
+    cy.get('#phone-helper-text').should('not.exist');
+
+    // Should display message location the validation error.
+    cy.get('#location').clear();
+    cy.get('#location').type(location);
+
+    // Show verification error message.
+    cy.get('#location-helper-text')
+      .should('be.visible')
+      .and('have.text', 'Fill in the characters, the length is 0-100.');
+    cy.get('#location').clear();
+    cy.get('#location').type('Shanghai');
+    cy.get('#location-helper-text').should('not.exist');
+
+    // Should display message password the validation error.
+    cy.get('#password').type(passsword);
+
+    // Missing number.
+    cy.get('#password-helper-text')
+      .should('be.visible')
+      .and('contain', 'At least 8-16 characters, with at least 1 lowercase letter and 1 number.');
+
+    cy.get('#password').clear();
+
+    cy.get('#password').type('dragonfly1');
+
+    // Verification passed.
+    cy.get('#password-helper-text').should('not.exist');
+
+    // Should display message confirm password the validation error.
+    cy.get('#confirmPassword').type(`dragonfly`);
+
+    // Confirm password verification error when the two passwords are not the same.
+    cy.get('#confirmPassword-helper-text').should('be.visible').and('contain', 'Please enter the same password.');
+
+    cy.get('#confirmPassword').clear();
+
+    cy.get('#confirmPassword').type('dragonfly1');
+
+    // verification passed.
+    cy.get('#confirmPassword-helper-text').should('not.exist');
+  });
+});
diff --git a/cypress/e2e/users/users.cy.ts b/cypress/e2e/users/users.cy.ts
index bfd649b..3c57f04 100644
--- a/cypress/e2e/users/users.cy.ts
+++ b/cypress/e2e/users/users.cy.ts
@@ -141,13 +141,13 @@ describe('Users', () => {
       cy.get('#name').should('have.text', 'root');
       cy.get('#role').should('have.text', 'root');
       cy.get('#email').should('have.text', 'root@example.com');
-      cy.get('#phone').should('have.text', '1234567890');
+      cy.get('#phone').should('have.text', '+86 153 1234 5678');
       cy.get('#location').should('have.text', 'Hangzhou');
       cy.get('#created-at').should('contain', '2023-11-06 06:09:04');
       cy.get('#updated-at').should('contain', '2023-11-06 06:09:04');
 
       // closure user details.
-      cy.get('.MuiListSubheader-root > .MuiButtonBase-root').click();
+      cy.get('#closure-user-detail').click();
 
       cy.get('#action-jack').click();
 
@@ -177,7 +177,7 @@ describe('Users', () => {
       cy.get('#name').should('have.text', 'jack');
       cy.get('#role').should('have.text', 'guest');
       cy.get('#email').should('have.text', 'jack@example.com');
-      cy.get('#phone').should('have.text', '1234567890');
+      cy.get('#phone').should('have.text', '+86 153 1234 5678');
       cy.get('#location').should('have.text', 'Shanghai');
       cy.get('#created-at').should('contain', '2023-11-07 06:09:04');
       cy.get('.MuiList-root > :nth-child(17)').should('contain', '2023-11-07 06:09:04');
@@ -375,7 +375,7 @@ describe('Users', () => {
       // Check the current page number.
       cy.get('#user-pagination > .MuiPagination-ul .Mui-selected').should('have.text', '2');
 
-      cy.get('[href="/clusters"]').click();
+      cy.get('#clusters').click();
 
       // Then I see that the current page is the show update personal-access-tokens.
       cy.url().should('include', '/clusters');
diff --git a/cypress/fixtures/users/create-user.json b/cypress/fixtures/users/create-user.json
new file mode 100644
index 0000000..49a78ff
--- /dev/null
+++ b/cypress/fixtures/users/create-user.json
@@ -0,0 +1,170 @@
+[
+  {
+    "id": 1,
+    "created_at": "2023-12-07T12:26:52Z",
+    "updated_at": "2023-12-07T12:26:52Z",
+    "is_del": 0,
+    "email": "root@example.com",
+    "name": "root",
+    "avatar": "",
+    "phone": "",
+    "state": "enable",
+    "location": "Shanghai",
+    "bio": "",
+    "configs": null
+  },
+  {
+    "id": 2,
+    "created_at": "2023-11-06T06:09:04Z",
+    "updated_at": "2023-11-06T06:09:04Z",
+    "is_del": 0,
+    "email": "lucy@example.com",
+    "name": "lucy",
+    "avatar": "https://example.com/avatar.png",
+    "phone": "+86 153 1234 5678",
+    "state": "enable",
+    "location": "Hangzhou",
+    "bio": "I am lucy",
+    "configs": null
+  },
+  {
+    "id": 3,
+    "created_at": "2023-11-07T06:09:04Z",
+    "updated_at": "2023-11-07T06:09:04Z",
+    "is_del": 0,
+    "email": "jack@example.com",
+    "name": "jack",
+    "avatar": "https://example.com/avatar.png",
+    "phone": "+86 153 1234 5678",
+    "state": "enable",
+    "location": "Shanghai",
+    "bio": "I am jack",
+    "configs": null
+  },
+  {
+    "id": 4,
+    "created_at": "2023-12-05T07:17:47Z",
+    "updated_at": "2023-12-12T06:37:49Z",
+    "is_del": 0,
+    "email": "mary@example.com",
+    "name": "mary",
+    "avatar": "",
+    "phone": "+86 153 1234 5678",
+    "state": "enable",
+    "location": "shanghaiHongqiao",
+    "bio": "I am mary",
+    "configs": null
+  },
+  {
+    "id": 5,
+    "created_at": "2023-12-05T07:17:47Z",
+    "updated_at": "2023-12-12T06:37:49Z",
+    "is_del": 0,
+    "email": "lip@example.com",
+    "name": "lip",
+    "avatar": "",
+    "phone": "+86 153 1234 9876",
+    "state": "enable",
+    "location": "Chengdu",
+    "bio": "I am lip",
+    "configs": null
+  },
+  {
+    "id": 6,
+    "created_at": "2023-12-05T07:17:47Z",
+    "updated_at": "2023-12-12T06:37:49Z",
+    "is_del": 0,
+    "email": "carl@example.com",
+    "name": "carl",
+    "avatar": "",
+    "phone": "+86 153 1234 5678",
+    "state": "enable",
+    "location": "shanghaiHuangpu",
+    "bio": "I am carl",
+    "configs": null
+  },
+  {
+    "id": 7,
+    "created_at": "2023-12-05T07:17:47Z",
+    "updated_at": "2023-12-12T06:37:49Z",
+    "is_del": 0,
+    "email": "david@example.com",
+    "name": "david",
+    "avatar": "",
+    "phone": "+86 153 1234 5678",
+    "state": "enable",
+    "location": "Hangzhou",
+    "bio": "I am david",
+    "configs": null
+  },
+  {
+    "id": 8,
+    "created_at": "2023-12-05T07:17:47Z",
+    "updated_at": "2023-12-12T06:37:49Z",
+    "is_del": 0,
+    "email": "debbie@example.com",
+    "name": "debbie",
+    "avatar": "",
+    "phone": "+86 153 1234 5678",
+    "state": "enable",
+    "location": "Tianjing",
+    "bio": "I am debbie",
+    "configs": null
+  },
+  {
+    "id": 9,
+    "created_at": "2023-12-05T07:17:47Z",
+    "updated_at": "2023-12-12T06:37:49Z",
+    "is_del": 0,
+    "email": "allen@example.com",
+    "name": "allen",
+    "avatar": "",
+    "phone": "+86 153 1234 5678",
+    "state": "enable",
+    "location": "Fuzhou",
+    "bio": "I am allen",
+    "configs": null
+  },
+  {
+    "id": 10,
+    "created_at": "2023-12-05T07:17:47Z",
+    "updated_at": "2023-12-12T06:37:49Z",
+    "is_del": 0,
+    "email": "liam@example.com",
+    "name": "liam",
+    "avatar": "",
+    "phone": "+86 153 1234 9876",
+    "state": "enable",
+    "location": "Nanjing",
+    "bio": "I am liam",
+    "configs": null
+  },
+  {
+    "id": 11,
+    "created_at": "2023-12-05T07:17:47Z",
+    "updated_at": "2023-12-12T06:37:49Z",
+    "is_del": 0,
+    "email": "noah@example.com",
+    "name": "noah",
+    "avatar": "",
+    "phone": "+86 153 1234 5678",
+    "state": "enable",
+    "location": "Shengyang",
+    "bio": "I am noah",
+    "configs": null
+  },
+  {
+    "id": 12,
+    "created_at": "2024-12-05T07:17:47Z",
+    "updated_at": "2023-12-12T06:37:49Z",
+    "is_del": 0,
+    "email": "billy@example.com",
+    "name": "billy",
+    "avatar": "",
+    "phone": "+86 153 1234 5678",
+    "state": "enable",
+    "location": "ParisFrance",
+    "bio": "I am billy",
+    "configs": null
+  }
+]
diff --git a/cypress/fixtures/users/guest-user.json b/cypress/fixtures/users/guest-user.json
index 17dcac5..45a19e3 100644
--- a/cypress/fixtures/users/guest-user.json
+++ b/cypress/fixtures/users/guest-user.json
@@ -6,7 +6,7 @@
   "email": "jack@example.com",
   "name": "jack",
   "avatar": "https://example.com/avatar.png",
-  "phone": "1234567890",
+  "phone": "+86 153 1234 5678",
   "state": "enable",
   "location": "Shanghai",
   "bio": "I am jack",
diff --git a/cypress/fixtures/users/update-user.json b/cypress/fixtures/users/update-user.json
index 4eb7399..0c52ae1 100644
--- a/cypress/fixtures/users/update-user.json
+++ b/cypress/fixtures/users/update-user.json
@@ -6,7 +6,7 @@
   "email": "root@gmail.com",
   "name": "root",
   "avatar": "https://example.com/avatar.png",
-  "phone": "15123456789",
+  "phone": "+86 153 1234 5678",
   "state": "enable",
   "location": "Shanghai",
   "bio": "I am root, I will change the description",
diff --git a/cypress/fixtures/users/user.json b/cypress/fixtures/users/user.json
index be8a7bf..ad2e8be 100644
--- a/cypress/fixtures/users/user.json
+++ b/cypress/fixtures/users/user.json
@@ -6,7 +6,7 @@
   "email": "root@example.com",
   "name": "root",
   "avatar": "https://example.com/avatar.png",
-  "phone": "1234567890",
+  "phone": "+86 153 1234 5678",
   "state": "enable",
   "location": "Hangzhou",
   "bio": "I am root",
diff --git a/cypress/fixtures/users/users.json b/cypress/fixtures/users/users.json
index c73cb65..1afa77a 100644
--- a/cypress/fixtures/users/users.json
+++ b/cypress/fixtures/users/users.json
@@ -21,7 +21,7 @@
     "email": "lucy@example.com",
     "name": "lucy",
     "avatar": "https://example.com/avatar.png",
-    "phone": "1234567890",
+    "phone": "+86 153 1234 5678",
     "state": "enable",
     "location": "Hangzhou",
     "bio": "I am lucy",
@@ -35,7 +35,7 @@
     "email": "jack@example.com",
     "name": "jack",
     "avatar": "https://example.com/avatar.png",
-    "phone": "1234567890",
+    "phone": "+86 153 1234 5678",
     "state": "enable",
     "location": "Shanghai",
     "bio": "I am jack",
@@ -49,7 +49,7 @@
     "email": "mary@example.com",
     "name": "mary",
     "avatar": "",
-    "phone": "15170017449",
+    "phone": "+86 153 1234 5678",
     "state": "enable",
     "location": "shanghaiHongqiao",
     "bio": "I am mary",
@@ -63,7 +63,7 @@
     "email": "lip@example.com",
     "name": "lip",
     "avatar": "",
-    "phone": "15170017449",
+    "phone": "+86 153 1234 5678",
     "state": "enable",
     "location": "Chengdu",
     "bio": "I am lip",
@@ -77,7 +77,7 @@
     "email": "carl@example.com",
     "name": "carl",
     "avatar": "",
-    "phone": "15170017449",
+    "phone": "+86 153 1234 5678",
     "state": "enable",
     "location": "shanghaiHuangpu",
     "bio": "I am carl",
@@ -91,7 +91,7 @@
     "email": "david@example.com",
     "name": "david",
     "avatar": "",
-    "phone": "15170017449",
+    "phone": "+86 153 1234 5678",
     "state": "enable",
     "location": "Hangzhou",
     "bio": "I am david",
@@ -105,7 +105,7 @@
     "email": "debbie@example.com",
     "name": "debbie",
     "avatar": "",
-    "phone": "15170017449",
+    "phone": "+86 153 1234 5678",
     "state": "enable",
     "location": "Tianjing",
     "bio": "I am debbie",
@@ -119,7 +119,7 @@
     "email": "allen@example.com",
     "name": "allen",
     "avatar": "",
-    "phone": "15170017449",
+    "phone": "+86 153 1234 5678",
     "state": "enable",
     "location": "Fuzhou",
     "bio": "I am allen",
@@ -133,7 +133,7 @@
     "email": "liam@example.com",
     "name": "liam",
     "avatar": "",
-    "phone": "18170017449",
+    "phone": "+86 153 1234 9876",
     "state": "enable",
     "location": "Nanjing",
     "bio": "I am liam",
@@ -147,7 +147,7 @@
     "email": "noah@example.com",
     "name": "noah",
     "avatar": "",
-    "phone": "15170017449",
+    "phone": "+86 153 1234 5678",
     "state": "enable",
     "location": "Shengyang",
     "bio": "I am noah",
diff --git a/package.json b/package.json
index 8b6e8d1..9877411 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "jsonwebtoken": "^9.0.1",
     "lodash.upperfirst": "^4.3.1",
     "lottie-react": "^2.4.0",
+    "mui-tel-input": "^6.0.0",
     "node-polyfill-webpack-plugin": "^4.0.0",
     "process": "^0.11.10",
     "query-string": "^9.0.0",
diff --git a/public/fonts/cluster/active.svg b/public/fonts/cluster/active.svg
deleted file mode 100644
index 6493c93..0000000
--- a/public/fonts/cluster/active.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#2E8F79" d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512zm51.2-256H460.8a25.6 25.6 0 1 0 0 51.2h102.4a25.6 25.6 0 1 0 0-51.2zM512 691.2c70.784 0 98.56-11.392 101.171-65.229 9.037-11.417 19.559-22.349 39.424-41.83l1.741-1.69c64.486-63.13 88.064-100.096 88.064-167.424C742.4 284.928 639.386 179.2 512 179.2S281.6 284.928 281.6 415.027c0 57.549 18.074 98.995 53.709 135.86 10.445 10.803 20.608 19.763 38.477 34.483l9.395 7.705c17.152 14.183 28.109 23.987 37.58 34.227C424.96 679.578 448.872 691.2 512 691.2z"/></svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/cidrs.svg b/public/fonts/cluster/cidrs.svg
deleted file mode 100644
index 6a38f27..0000000
--- a/public/fonts/cluster/cidrs.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#2E8F79" d="M650.9 362.3c-15.6-6.9-38.3-10.3-68.1-10.3h-77v272.8h63.7v-94.2H599c31.1 0 56-8.2 74.6-24.7 18.6-16.5 28-38 28-64.7 0-17.6-4.6-33.4-13.7-47.5-9.1-14-21.5-24.5-37-31.4zm-49.4 108.2h-33.4v-54.3h36.3c23.4 0 35.2 8.8 35.2 26.3-.1 18.7-12.7 28-38.1 28zM370.6 624.9H433V352.1h-62.4v272.8zm554.2-287.3c-22.6-53.3-54.9-101.3-96-142.4-41.2-41.2-89.1-73.5-142.4-96C631.2 75.8 572.5 64 512 64S392.8 75.8 337.6 99.2c-53.3 22.6-101.3 54.9-142.4 96-41.1 41.1-73.5 89.1-96 142.4C75.8 392.8 64 451.5 64 512s11.8 119.2 35.2 174.4c22.6 53.3 54.9 101.3 96 142.4 41.2 41.2 89.1 73.5 142.4 96C392.8 948.2 451.5 960 512 960s119.2-11.8 174.4-35.2c53.3-22.6 101.3-54.9 142.4-96 41.1-41.1 73.5-89.1 96-142.4C948.2 631.2 960 572.5 960 512s-11.8-119.2-35.2-174.4zM793.9 653.7c0 41.1-33.6 74.7-74.7 74.7H304.7c-41.1 0-74.7-33.6-74.7-74.7V317.9c0-41.1 33.6-74.7 74.7-74.7h414.6c41.1 0 74.7 33.6 74.7 74.7v335.8z"/></svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/cluster-id.svg b/public/fonts/cluster/cluster-id.svg
deleted file mode 100644
index a129b17..0000000
--- a/public/fonts/cluster/cluster-id.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#2E8F79" d="M1024 975.3H780.8v-244h92.6V587.2H536.2v142.2h92.2v244.4H389.1V730.9h93.6V587.1h-338v142.7h93.4V974H0V731.7h93.2V535.4h389.4v-97.5H241.9V47.5h534.2v388.7H536.6v98h387V731H1024v244.3zM387.8 194.7v98.7H485v-98.7h-97.2zm240.8 99.4v-97.7h-98v97.7h98z"/></svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/cluster.svg b/public/fonts/cluster/cluster.svg
deleted file mode 100644
index 17ad213..0000000
--- a/public/fonts/cluster/cluster.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#2c2c2c" d="M888 680h-54V540H546v-92h238c8.8 0 16-7.2 16-16V168c0-8.8-7.2-16-16-16H240c-8.8 0-16 7.2-16 16v264c0 8.8 7.2 16 16 16h238v92H190v140h-54c-4.4 0-8 3.6-8 8v176c0 4.4 3.6 8 8 8h176c4.4 0 8-3.6 8-8V688c0-4.4-3.6-8-8-8h-54v-72h220v72h-54c-4.4 0-8 3.6-8 8v176c0 4.4 3.6 8 8 8h176c4.4 0 8-3.6 8-8V688c0-4.4-3.6-8-8-8h-54v-72h220v72h-54c-4.4 0-8 3.6-8 8v176c0 4.4 3.6 8 8 8h176c4.4 0 8-3.6 8-8V688c0-4.4-3.6-8-8-8zM256 805.3c0 1.5-1.2 2.7-2.7 2.7h-58.7c-1.5 0-2.7-1.2-2.7-2.7v-58.7c0-1.5 1.2-2.7 2.7-2.7h58.7c1.5 0 2.7 1.2 2.7 2.7v58.7zm288 0c0 1.5-1.2 2.7-2.7 2.7h-58.7c-1.5 0-2.7-1.2-2.7-2.7v-58.7c0-1.5 1.2-2.7 2.7-2.7h58.7c1.5 0 2.7 1.2 2.7 2.7v58.7zM288 384V216h448v168H288zm544 421.3c0 1.5-1.2 2.7-2.7 2.7h-58.7c-1.5 0-2.7-1.2-2.7-2.7v-58.7c0-1.5 1.2-2.7 2.7-2.7h58.7c1.5 0 2.7 1.2 2.7 2.7v58.7z"/><path fill="#2c2c2c" d="M360 300a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z"/></svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/default.svg b/public/fonts/cluster/default.svg
deleted file mode 100644
index e6852bb..0000000
--- a/public/fonts/cluster/default.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#2E8F79" d="M511.351 34.133c263.612 0 478.516 213.64 478.516 477.218 0 263.612-214.904 478.516-478.516 478.516-263.543 0-477.218-214.904-477.218-478.516 0-263.543 213.64-477.218 477.218-477.218zm250.505 290.134-297.95 339.968L308.224 481.28a6.827 6.827 0 0 0-10.65.307l-42.871 56.798a6.827 6.827 0 0 0 .614 8.909l165.41 166.263-.102.137 31.403 31.368 3.003 2.458a23.893 23.893 0 0 0 30.823-2.492l25.293-25.327-.649-.75 317.713-328.295-66.355-66.39z"/></svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/delete-inactive-error.svg b/public/fonts/cluster/delete-inactive-error.svg
deleted file mode 100644
index d43ddc7..0000000
--- a/public/fonts/cluster/delete-inactive-error.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024"><path fill="#1c293a" d="M262.74 73.23h234.574c20.118 0 36.614-16.498 36.614-36.615S517.432 0 497.314 0H262.739c-20.117 0-36.614 16.497-36.614 36.615 0 20.52 16.497 36.614 36.614 36.614zm460.699 90.932H36.615C16.497 164.162 0 180.659 0 200.776s16.497 36.615 36.615 36.615H63.17l49.892 494.9c4.024 41.443 39.03 72.826 80.472 72.826h375.802c41.443 0 76.046-31.383 80.471-72.826l49.893-494.9h23.739c20.118 0 36.614-16.497 36.614-36.615-.402-20.52-16.496-36.614-36.614-36.614zM416.44 587.844c0 20.118-16.497 36.615-36.614 36.615s-36.615-16.497-36.615-36.615v-187.9c0-20.118 16.497-36.615 36.615-36.615s36.614 16.497 36.614 36.614v187.901z" data-spm-anchor-id="a313x.search_index.0.i6.44de3a81lGptBA"/><path fill="#D81E06" d="M747.58 402.358c-151.688 0-274.408 123.121-274.408 274.407 0 151.69 123.122 274.408 274.408 274.408s274.408-123.121 274.408-274.408S898.867 402.358 747.58 402.358zm17.302 440.983c-10.462 6.438-23.74 6.438-34.603 0-10.864-6.437-17.301-17.703-17.301-30.176 0-12.473 6.437-24.142 17.301-30.177 10.461-6.438 23.74-6.438 34.603 0 10.863 6.438 17.703 17.704 17.301 30.177 0 12.473-6.438 23.739-17.301 30.176zm17.301-153.7c0 18.91-15.692 34.603-34.603 34.603-18.91 0-34.602-15.692-34.602-34.603V540.366c0-18.91 15.692-34.603 34.602-34.603 18.911 0 34.603 15.692 34.603 34.603v149.275z" class="selected" data-spm-anchor-id="a313x.search_index.0.i7.44de3a81lGptBA"/></svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/delete-warning.svg b/public/fonts/cluster/delete-warning.svg
deleted file mode 100644
index dbe425c..0000000
--- a/public/fonts/cluster/delete-warning.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024"><path fill="#D81E06" d="m934.4 770.133-328.533-588.8C586.667 147.2 550.4 128 512 128c-38.4 0-74.667 21.333-93.867 53.333L89.6 770.133c-19.2 34.134-19.2 76.8 0 110.934s55.467 57.6 93.867 57.6h657.066c38.4 0 74.667-21.334 93.867-57.6 19.2-34.134 19.2-76.8 0-110.934zM878.933 851.2c-8.533 14.933-23.466 23.467-38.4 23.467H183.467c-14.934 0-29.867-8.534-38.4-23.467-8.534-14.933-8.534-34.133 0-49.067l328.533-588.8C482.133 200.533 497.067 192 512 192s29.867 8.533 38.4 21.333l328.533 588.8c8.534 14.934 8.534 32 0 49.067z"/><path fill="#D81E06" d="M469.33299999999997 746.667a42.667 42.667 0 1 0 85.334 0 42.667 42.667 0 1 0-85.334 0ZM512 629.333c17.067 0 32-14.933 32-32v-192c0-17.066-14.933-32-32-32s-32 14.934-32 32v192c0 17.067 14.933 32 32 32z"/></svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/delete.svg b/public/fonts/cluster/delete.svg
deleted file mode 100644
index 2657438..0000000
--- a/public/fonts/cluster/delete.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#231815" d="M755.5 959.5h-485c-9.9 0-18.1-7.7-18.6-17.6L214.6 289c-.6-10.3 7.3-19.1 17.6-19.7 10.5-.4 19.1 7.3 19.7 17.6l36.3 635.3h449.7l36.3-635.3c.6-10.3 9.6-17.9 19.7-17.6 10.3.6 18.1 9.4 17.6 19.7l-37.3 652.8c-.7 9.9-8.8 17.7-18.7 17.7z"/><path fill="#231815" d="M867.4 288H158.6c-10.3 0-18.7-8.3-18.7-18.7v-74.6c0-9.1 6.6-16.9 15.6-18.4L367.2 141l15.3-62.7c2-8.4 9.5-14.2 18.1-14.2h224.2c8.6 0 16 5.8 18.1 14.1l15.7 62.7 211.8 35.3c9 1.5 15.6 9.3 15.6 18.4v74.6c.1 10.4-8.3 18.8-18.6 18.8zm-690.2-37.3h671.5v-40.2l-208.3-34.7c-7.3-1.2-13.2-6.7-15-13.9l-15.1-60.5h-195l-14.8 60.4c-1.8 7.2-7.7 12.8-15 14l-208.3 34.7v40.2z"/><path fill="#2E8F79" d="M548.8 700.7c-110.6 0-213-34.6-297.3-93.5l19.1 333.6h485l16.6-290.4c-67.8 32.2-143.5 50.3-223.4 50.3z" class="selected" data-spm-anchor-id="a313x.7781069.0.i3"/><path fill="#231815" d="M755.5 959.5h-485c-9.9 0-18.1-7.7-18.6-17.6l-19.1-333.6c-.4-7.1 3.3-13.9 9.5-17.3 6.2-3.5 13.9-3.1 19.8 1 84.4 59 183.5 90.1 286.6 90.1 75.3 0 147.7-16.3 215.3-48.5 5.9-2.9 13-2.3 18.4 1.3 5.5 3.7 8.6 10 8.2 16.5L774 941.8c-.5 9.9-8.6 17.7-18.5 17.7zm-467.4-37.3h449.7l13.8-242.4c-64.4 26.3-132.5 39.6-203 39.6-98.2 0-193.1-26.3-276.6-76.5l16.1 279.3z"/><path fill="#231815" d="M625.7 847.5h-.8c-10.3-.4-18.3-9.1-17.9-19.4l18.7-447.7c.4-10.3 8.6-18.6 19.4-17.9 10.3.4 18.3 9.1 17.9 19.4l-18.7 447.7c-.4 10.1-8.6 17.9-18.6 17.9zm-223.8 0c-9.9 0-18.2-7.9-18.6-17.9L364.6 382c-.4-10.3 7.6-19 17.9-19.4 10.4-.8 19 7.6 19.4 17.9l18.7 447.7c.4 10.3-7.6 19-17.9 19.4-.3-.1-.6-.1-.8-.1zm111.9 0c-10.3 0-18.7-8.3-18.7-18.7V381.2c0-10.3 8.4-18.7 18.7-18.7 10.3 0 18.7 8.3 18.7 18.7v447.7c0 10.3-8.4 18.6-18.7 18.6z"/></svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/hostname.svg b/public/fonts/cluster/hostname.svg
deleted file mode 100644
index c556344..0000000
--- a/public/fonts/cluster/hostname.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="70.063" height="64" class="icon" viewBox="0 0 1121 1024"><path fill="#2E8F79" d="M1089.894 766.788H31.548A31.07 31.07 0 0 0 .393 797.79V984.31a31.087 31.087 0 0 0 31.01 31.156h1058.491a31.087 31.087 0 0 0 31.113-31.062V797.841a31.095 31.095 0 0 0-31.113-31.053zM187.17 953.25H62.652V828.91h124.57v124.34h-.052zm186.744 0H249.48V828.91h124.475v124.34h-.042zm186.777 0H436.215V828.91h124.476v124.34zm529.203-932.463H31.548A31.087 31.087 0 0 0 .393 51.797v186.556a31.078 31.078 0 0 0 31.052 31.113h1058.45a31.087 31.087 0 0 0 31.112-31.062V51.9a31.095 31.095 0 0 0-31.061-31.113h-.052zM187.17 207.25H62.652V82.961h124.57v124.34l-.052-.052zm186.744 0H249.48V82.961h124.475v124.34l-.042-.052zm186.777 0H436.215V82.961h124.476v124.34-.052zm529.203 186.513H31.548a31.087 31.087 0 0 0-31.155 31.01v186.565a31.078 31.078 0 0 0 31.052 31.112h1058.45a31.087 31.087 0 0 0 31.112-31.061V424.875a31.087 31.087 0 0 0-31.061-31.113h-.052zM187.17 580.275H62.652V455.936h124.57v124.34h-.052zm186.744 0H249.48V455.936h124.475v124.34h-.042zm186.777 0H436.215V455.936h124.476v124.34z"/></svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/hostnames.svg b/public/fonts/cluster/hostnames.svg
deleted file mode 100644
index 44dbe28..0000000
--- a/public/fonts/cluster/hostnames.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024"><path fill="#2E8F79" d="M213.333 426.667h597.334V256H213.333v170.667zM128 192a21.333 21.333 0 0 1 21.333-21.333h725.334A21.333 21.333 0 0 1 896 192v298.667A21.333 21.333 0 0 1 874.667 512H149.333A21.333 21.333 0 0 1 128 490.667V192zm85.333 618.667h597.334V640H213.333v170.667zM128 576a21.333 21.333 0 0 1 21.333-21.333h725.334A21.333 21.333 0 0 1 896 576v298.667A21.333 21.333 0 0 1 874.667 896H149.333A21.333 21.333 0 0 1 128 874.667V576zm170.667-256a21.333 21.333 0 0 1 42.666 0v42.667a21.333 21.333 0 0 1-42.666 0V320zM320 682.667A21.333 21.333 0 0 0 298.667 704v42.667a21.333 21.333 0 0 0 42.666 0V704A21.333 21.333 0 0 0 320 682.667zM384 320a21.333 21.333 0 0 1 42.667 0v42.667a21.333 21.333 0 0 1-42.667 0V320zm21.333 362.667A21.333 21.333 0 0 0 384 704v42.667a21.333 21.333 0 0 0 42.667 0V704a21.333 21.333 0 0 0-21.334-21.333zm298.667-384A21.333 21.333 0 0 1 725.333 320v42.667A21.333 21.333 0 0 1 704 384h-85.333a21.333 21.333 0 0 1-21.334-21.333V320a21.333 21.333 0 0 1 21.334-21.333H704zM725.333 704A21.333 21.333 0 0 0 704 682.667h-85.333A21.333 21.333 0 0 0 597.333 704v42.667A21.333 21.333 0 0 0 618.667 768H704a21.333 21.333 0 0 0 21.333-21.333V704z"/></svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/idc.svg b/public/fonts/cluster/idc.svg
deleted file mode 100644
index ae27f73..0000000
--- a/public/fonts/cluster/idc.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#2E8F79" d="M512 123.19c-19.73 0-39.47 3.71-54.46 11.21L140.06 293.15c-30 15-30 39.48 0 54.46l317.45 158.76c15.05 7.49 34.79 11.21 54.52 11.21s39.48-3.72 54.46-11.21L884 347.61c30-15 30-39.47 0-54.46L566.49 134.4c-15-7.5-34.72-11.21-54.46-11.21zm0 588.36c-24.36 0-48.67-4.87-68.1-14.56L132.87 541.52A30.48 30.48 0 0 1 160.16 487l311 155.53c21.44 10.72 60.31 10.72 81.75 0L863.9 487a30.47 30.47 0 0 1 27.24 54.52L580.14 697A155.78 155.78 0 0 1 512 711.55zm0 188.85c-24.36 0-48.67-4.87-68.1-14.56l-311-155.53a30.44 30.44 0 1 1 27.23-54.46l311 155.53c21.44 10.72 60.31 10.72 81.75 0l311-155.53a30.47 30.47 0 1 1 27.24 54.52l-311 155.47c-19.41 9.75-43.72 14.56-68.12 14.56z" opacity=".8"/></svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/ip.svg b/public/fonts/cluster/ip.svg
deleted file mode 100644
index 269c70d..0000000
--- a/public/fonts/cluster/ip.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#2c2c2c" d="M554.667 682.667V768h128v42.667H384V768h128v-85.333H170.667V213.333H896v469.334H554.667zm0-42.667h298.666V256h-640v384h341.334z"/></svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/location.svg b/public/fonts/cluster/location.svg
deleted file mode 100644
index aaaf98a..0000000
--- a/public/fonts/cluster/location.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#2E8F79" d="M364.032 125.312a293.973 293.973 0 0 1 300.117 2.475c91.478 56.832 147.03 158.293 146.518 267.306-2.134 108.374-61.739 210.304-136.235 289.067a799.019 799.019 0 0 1-143.275 120.32 50.048 50.048 0 0 1-17.408 6.144 34.987 34.987 0 0 1-16.64-5.077A789.973 789.973 0 0 1 290.645 611.54a395.947 395.947 0 0 1-77.312-221.824c-.042-109.312 57.472-210.261 150.699-264.405zm53.845 309.675a101.461 101.461 0 0 0 93.782 63.872 99.797 99.797 0 0 0 71.808-29.91c19.029-19.37 29.696-45.653 29.61-73.088A103.381 103.381 0 0 0 550.7 300.16a100.096 100.096 0 0 0-110.678 22.187 104.747 104.747 0 0 0-22.144 112.64z"/><path fill="#2E8F79" d="M298.667 896a213.333 42.667 0 1 0 426.666 0 213.333 42.667 0 1 0-426.666 0Z" opacity=".4"/></svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/logo.svg b/public/fonts/cluster/logo.svg
deleted file mode 100644
index 9f9ef72..0000000
--- a/public/fonts/cluster/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#2c2c2c" d="m621.093 219.292 204.495-118.227a78.697 78.697 0 0 1 86.172 1.22c46.014 29.615 96.642 55.987 96.642 55.987L763.27 302.795zM618.9 506.794l142.903-81.558 246.847 142.655-112.221 66.455s-30.682 22.158-93.724-19.069S618.9 506.794 618.9 506.794zM435.476 613.122l77.42-43.82 76.676 44.926-19.355 376.82-58.064 32.513-57.684-33.599-18.993-376.84zM13.425 158.501 368.85 363.472s52.077 23.016 78.888 53.145c24.961 28.05-11.69 75.017-11.69 75.017l219.064-129.668L186.761 91.302s-34.095-16.933-85.696 14.607-87.64 52.592-87.64 52.592z"/><path fill="#2c2c2c" d="m15.446 568.253 115.958 65.502a6.522 6.522 0 0 0 .896.439c4.481 1.906 38.977 15.16 79.822-14.34 41.8-30.186 207.623-119.276 222.84-127.438a9.382 9.382 0 0 0 2.154-1.582c6.808-6.732 45.575-49.046-2.67-88.404-.571-.458-3.05-2.822-3.813-2.917l-21.357-14.111-14.664-8.963-20.976-10.984c-2.917-1.62-6.483.306-9.382 1.907zM647.103 84.59 507.976 1.697 369.231 84.952l139.108 81.806L647.103 84.59z"/></svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/page-loading.svg b/public/fonts/cluster/page-loading.svg
deleted file mode 100644
index f9f48f1..0000000
--- a/public/fonts/cluster/page-loading.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="67.5" height="64" class="icon" viewBox="0 0 1080 1024"><animateTransform attributeName="transform" attributeType="XML" dur="0.8s" from="0 0 0" repeatCount="indefinite" to="360 0 0" type="rotate"/><path fill="#2E8F79" d="M227.783 165.32c5.973-4.097 11.549-8.08 17.01-11.492 5.347-3.528 10.524-6.543 15.246-9.444l6.94-3.982 6.258-3.47 2.845-1.48 2.617-1.308 4.721-2.446 2.105-1.081 2.39-1.138 4.21-2.105 7.736-3.754a64.74 64.74 0 1 0-66.446-110.65l-6.94 5.064-3.812 2.73-2.275 1.593-2.788 2.105-6.258 4.665-3.413 2.617a35856.668 35856.668 0 0 1-10.809 8.533c-2.503 2.105-5.177 4.153-7.85 6.543-5.348 4.608-11.208 9.557-17.124 15.189-6.087 5.404-12.231 11.605-18.774 17.977-6.257 6.599-12.913 13.426-19.512 20.992A541.64 541.64 0 0 0 57.8 212.082c-11.379 22.243-21.22 45.283-29.356 68.95-1.137 3.014-2.048 6.03-3.015 9.101l-2.844 9.103c-1.877 6.087-3.584 12.288-5.29 18.432l-2.276 9.33c-.74 3.128-1.593 6.2-2.219 9.33l-1.991 9.386-.967 4.665-.854 4.721a514.33 514.33 0 0 0-8.135 75.264C.512 436.565.57 442.71.57 448.854v4.55l.057 4.608.284 9.103.114 4.55.284 4.495.57 8.932.34 4.778.399 4.267.853 8.363.455 4.21.57 4.437 1.137 8.704.569 4.323.683 4.21 1.422 8.306a507.676 507.676 0 0 0 24.291 88.746l2.447 6.429 1.137 3.072 1.309 3.072 4.95 11.776c3.526 7.566 6.655 14.791 10.068 21.333a487.822 487.822 0 0 0 31.403 54.045l4.836 7.11-3.584-7.85a471.893 471.893 0 0 1-21.618-57.685c-2.162-6.827-3.982-14.336-6.144-22.073l-2.845-12.06-.682-3.073-.57-3.185-1.308-6.372a472.747 472.747 0 0 1-8.59-86.585v-11.719l.228-3.982.284-7.794.17-3.925.285-4.153.854-12.63v-.284.114l.113-.569.057-.967.228-2.048.853-8.135.455-4.096.57-4.096 1.137-8.192.569-4.096.74-4.096c1.023-5.462 1.877-10.923 3.071-16.384a461.634 461.634 0 0 1 18.376-64.57l1.422-3.981 1.536-3.869 3.072-7.737c.967-2.617 2.162-5.12 3.242-7.68l3.3-7.623c2.39-5.006 4.722-10.012 7.168-14.905l3.755-7.281c1.251-2.447 2.446-4.836 3.811-7.225a445.724 445.724 0 0 1 72.42-97.565c12.117-12.345 24.974-23.893 38.457-34.702 6.2-5.12 12.401-9.557 18.204-13.88z" opacity=".2"/><path fill="#2E8F79" d="m1060.181 487.595-.967-8.534-1.138-10.24-.682-6.599-1.252-8.76-3.015-20.367-4.551-22.471c-.796-3.982-1.934-8.078-3.015-12.288l-3.3-12.914c-.569-2.218-1.137-4.437-1.82-6.656l-2.105-6.826-4.38-13.995-1.138-3.584-1.252-3.584-2.674-7.225c-1.82-4.836-3.584-9.785-5.518-14.791l-6.371-15.076-3.3-7.623-3.584-7.68-7.566-15.417a65.536 65.536 0 0 0-1.991-3.868l-2.105-3.869-4.267-7.736-4.266-7.851c-1.48-2.617-3.13-5.12-4.665-7.68l-9.558-15.53a577.422 577.422 0 0 0-45.17-59.848 573.554 573.554 0 0 0-54.385-53.817 567.353 567.353 0 0 0-60.985-44.714c-21.106-13.085-42.667-24.349-64-34.02l-16.043-6.656c-2.617-1.08-5.234-2.276-7.907-3.186l-7.965-2.844-7.85-2.845-3.869-1.365a57.458 57.458 0 0 0-3.868-1.308l-15.474-4.665c-2.56-.74-5.006-1.593-7.566-2.276l-7.567-1.82-14.677-3.641-14.336-2.845-6.94-1.365-3.414-.683-3.413-.512-13.369-1.934-6.371-.91c-2.105-.285-4.267-.398-6.315-.626l-12.06-1.138c-3.983-.398-7.737-.796-11.378-.91l-20.708-.91-17.465.114h-7.395l-6.6.398-10.353.626-8.534.512 8.534.967 10.24 1.138 6.485.682 7.282 1.195 17.01 2.787 19.74 4.21c3.527.683 7.111 1.707 10.809 2.73l11.378 3.073c1.934.569 3.925.967 5.86 1.593l5.973 1.934 12.288 3.982 3.185 1.024 3.13 1.195 6.314 2.39c4.267 1.649 8.647 3.242 13.028 5.005l13.14 5.746 6.714 2.958c2.275.968 4.437 2.162 6.656 3.243l13.54 6.77c1.137.569 2.275 1.138 3.413 1.82l3.356 1.878 6.827 3.811 6.826 3.812c2.276 1.308 4.438 2.844 6.713 4.21l13.54 8.533c17.806 12.06 35.442 25.43 52.11 40.22 16.612 15.019 32.2 31.175 46.706 48.242 14.051 17.067 26.908 35.1 38.57 53.874 11.265 18.603 20.879 37.603 29.128 56.32l5.632 14.051c.91 2.276 1.877 4.552 2.73 6.94l2.39 6.941 2.332 6.884 1.195 3.413 1.138 3.414 3.868 13.482c.569 2.276 1.308 4.438 1.877 6.656l1.536 6.6 3.072 12.8 2.276 12.515 1.138 6.087.569 2.958.398 3.015 1.479 11.606.796 5.575c.228 1.82.285 3.64.455 5.461l.854 10.525c.284 3.413.626 6.712.626 9.898l.568 17.977-.34 14.109-.115 6.03-.398 6.428-.569 10.354-.569 8.533a64.74 64.74 0 1 0 128.967-3.242h.057z"/><path fill="#2E8F79" d="m910.962 758.556-5.234 6.315c-1.877 2.276-3.698 4.551-5.803 6.884-4.153 4.721-8.533 9.841-13.596 15.018-4.836 5.348-10.354 10.695-16.043 16.327-5.86 5.519-11.946 11.378-18.66 17.067a477.013 477.013 0 0 1-98.53 65.991 463.644 463.644 0 0 1-60.872 25.145c-2.617.967-5.29 1.707-7.964 2.56l-8.022 2.446c-5.404 1.536-10.809 2.959-16.213 4.38l-8.192 1.935c-2.73.569-5.405 1.308-8.192 1.82l-8.249 1.65-4.096.797-4.153.682a449.281 449.281 0 0 1-65.934 6.429c-5.405.227-10.809.057-16.157.057h-4.039c-1.308 0-2.56-.114-3.868-.171l-7.566-.341-3.812-.171-4.267-.284-8.533-.57-2.162-.17h-1.08l-.57-.114h.57-.285l-3.868-.455-7.68-.853a437.248 437.248 0 0 1-106.78-26.624l-5.462-2.219-2.73-1.024-2.618-1.138-10.24-4.494c-6.485-3.129-12.743-5.916-18.375-8.931a424.107 424.107 0 0 1-28.843-16.27l-1.479-.854a1167.588 1167.588 0 0 0-3.697-2.446l-4.438-2.902-1.99-1.308-2.163-1.422-3.868-2.617-7.168-4.836a64.74 64.74 0 1 0-62.805 112.697l7.85 3.584 4.267 1.934 2.56 1.138 3.186 1.366 7.168 3.128 3.982 1.707 2.048.853 2.048.797c10.98 4.323 24.348 9.443 39.993 14.222 7.737 2.56 16.156 4.779 24.974 7.282l13.653 3.3 3.47.853 3.585.74 7.281 1.535a537.43 537.43 0 0 0 134.258 10.127l9.216-.57 4.608-.284h1.309l.512-.057 1.024-.113 2.161-.228 8.534-.853 4.266-.455 4.836-.57 9.671-1.25 4.892-.627 4.665-.796c6.258-1.024 12.516-1.934 18.717-3.3a521.671 521.671 0 0 0 73.842-20.081l4.55-1.593 4.438-1.707 8.932-3.413c2.958-1.081 5.86-2.39 8.817-3.584l8.704-3.698c5.746-2.674 11.492-5.234 17.18-7.965l8.363-4.21c2.845-1.422 5.576-2.787 8.306-4.266a510.066 510.066 0 0 0 112.64-81.636 501.76 501.76 0 0 0 40.391-43.633c5.86-7.055 11.094-14.052 16.1-20.708 4.835-6.827 9.443-13.084 13.426-19.342 4.21-6.087 7.737-12.004 11.093-17.408 1.707-2.674 3.186-5.405 4.665-7.908l4.153-7.225a482.987 482.987 0 0 0 11.264-21.617l3.811-7.737-5.063 6.997c-3.186 4.551-8.192 11.093-14.62 19.285z" opacity=".6"/></svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/round.svg b/public/fonts/cluster/round.svg
deleted file mode 100644
index a63f6f0..0000000
--- a/public/fonts/cluster/round.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#e4e5e5" d="M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512Z"/></svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/scheduler-id.svg b/public/fonts/cluster/scheduler-id.svg
deleted file mode 100644
index c263955..0000000
--- a/public/fonts/cluster/scheduler-id.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="72" height="64" class="icon" viewBox="0 0 1152 1024"><path fill="#2E8F79" d="M1056 64H96c-53 0-96 43-96 96v32h1152v-32c0-53-43-96-96-96zM0 864c0 53 43 96 96 96h960c53 0 96-43 96-96V256H0v608zm704-464c0-8.8 7.2-16 16-16h288c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H720c-8.8 0-16-7.2-16-16v-32zm0 128c0-8.8 7.2-16 16-16h288c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H720c-8.8 0-16-7.2-16-16v-32zm0 128c0-8.8 7.2-16 16-16h288c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H720c-8.8 0-16-7.2-16-16v-32zM352 384c70.6 0 128 57.4 128 128s-57.4 128-128 128-128-57.4-128-128 57.4-128 128-128zM134.2 792.4C151 741 199.2 704 256 704h16.4c24.6 10.2 51.4 16 79.6 16s55.2-5.8 79.6-16H448c56.8 0 105 37 121.8 88.4 6.4 19.8-10.4 39.6-31.2 39.6H165.4c-20.8 0-37.6-20-31.2-39.6z"/></svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/scheduler-ip.svg b/public/fonts/cluster/scheduler-ip.svg
deleted file mode 100644
index 6ca262a..0000000
--- a/public/fonts/cluster/scheduler-ip.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#2E8F79" d="M526.741 709.829h413.66c9.922 0 17.968-8.045 17.968-17.969V116.325c0-9.782-8.044-17.967-17.969-17.967H77.114c-9.923 0-17.967 8.044-17.967 17.967V691.86c0 9.784 8.043 17.969 17.967 17.969h413.66V871.689H284.058c-15.139 0-27.082 12.082-27.082 26.975 0 14.998 12.12 26.976 27.082 26.976h449.4c15.14 0 27.082-12.082 27.082-26.976 0-14.997-12.118-26.975-27.082-26.975H526.741V709.83zM113.101 592.93c0-14.894 12.118-26.977 27.01-26.977h737.293c14.91 0 27.01 11.978 27.01 26.977 0 14.894-12.12 26.976-27.01 26.976H140.112c-14.911 0-27.012-11.978-27.012-26.976z"/></svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/scheduler.svg b/public/fonts/cluster/scheduler.svg
deleted file mode 100644
index 9ac40a8..0000000
--- a/public/fonts/cluster/scheduler.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#2c2c2c" d="M780.04 641.67c64.22 0 116.13-51.91 116.13-116.13s-51.91-116.13-116.13-116.13c-40.47 0-76.54 21.11-96.78 51.91l-90.62-73.9c2.64-9.68 4.4-20.23 4.4-30.79v-2.64l86.22-56.31c21.11 31.67 56.31 51.91 96.78 51.91 64.22 0 116.13-51.91 116.13-116.13s-51.91-117.01-116.13-117.01c-61.58 0-112.61 48.39-116.13 109.09l-91.5 59.82c-21.11-28.15-54.55-45.75-92.38-45.75-64.22 0-116.13 51.91-116.13 116.13 0 13.2 2.64 26.39 7.04 38.71l-62.46 41.35c-21.11-20.23-49.27-32.55-80.94-32.55-65.1 0-117.89 51.91-117.89 116.13s51.91 116.13 116.13 116.13c26.39 0 50.15-8.8 70.38-23.75l71.26 42.23c-2.64 9.68-4.4 20.23-4.4 30.79 0 64.22 51.91 116.13 116.13 116.13 32.55 0 61.58-13.2 82.7-34.31l102.05 51.91c4.4 59.82 54.55 107.33 116.13 107.33 64.22 0 116.13-51.91 116.13-116.13s-51.91-116.13-116.13-116.13c-42.23 0-78.3 21.99-99.41 55.43L594.4 705.9c.88-6.16 1.76-12.32 1.76-19.36 0-10.56-1.76-21.99-4.4-31.67l96.78-56.31c22 26.39 54.55 43.11 91.5 43.11zm0-454.84c25.51 0 45.75 21.11 45.75 45.75s-21.11 45.75-45.75 45.75c-24.63 0-45.75-21.11-45.75-45.75s20.24-45.75 45.75-45.75zm0 576.25c25.51 0 45.75 21.11 45.75 45.75s-21.11 45.75-45.75 45.75c-24.63 0-45.75-21.11-45.75-45.75s20.24-45.75 45.75-45.75zm0-284.17c25.51 0 45.75 21.11 45.75 45.75 0 25.51-21.11 45.75-45.75 45.75-24.63 0-45.75-21.11-45.75-45.75-.87-24.63 20.24-45.75 45.75-45.75zm-439.01 19.36 72.14-46.63c19.36 13.2 42.23 21.99 67.74 21.99 28.15 0 53.67-9.68 73.9-26.39l105.57 87.1-106.44 62.46c-20.23-15.84-45.75-26.39-73.02-26.39-28.15 0-53.67 9.68-73.9 26.39l-69.5-42.23c3.52-11.44 5.28-22.87 5.28-35.19-.01-7.04-.89-14.07-1.77-21.11zm139.01-188.28c25.51 0 45.75 21.11 45.75 45.75 0 24.63-21.11 45.75-45.75 45.75s-45.75-21.11-45.75-45.75c0-24.63 20.24-45.75 45.75-45.75zM226.66 565.13c-25.51 0-45.75-21.11-45.75-45.75 0-25.51 21.11-45.75 45.75-45.75s45.75 21.11 45.75 45.75c0 25.52-20.23 45.75-45.75 45.75zm253.38 167.16c-25.51 0-45.75-21.11-45.75-45.75s21.11-45.75 45.75-45.75 45.75 21.11 45.75 45.75c0 24.63-20.24 45.75-45.75 45.75zm180.35-198.83 3.52-4.4c0 3.52 0 7.04.88 11.44l-4.4-7.04z"/></svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/seed-peer.svg b/public/fonts/cluster/seed-peer.svg
deleted file mode 100644
index f31e6dd..0000000
--- a/public/fonts/cluster/seed-peer.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#2c2c2c" d="M687 620H337c-19.3 0-35 15.7-35 35s15.7 35 35 35h350c19.3 0 35-15.7 35-35s-15.7-35-35-35zm-77-218c16.6 0 30-13.4 30-30V262c0-16.6-13.4-30-30-30s-30 13.4-30 30v110c0 16.6 13.4 30 30 30z"/><path fill="#2c2c2c" d="M852 112H172c-33.1 0-60 26.9-60 60v680c0 33.1 26.9 60 60 60h680c33.1 0 60-26.9 60-60V172c0-33.1-26.9-60-60-60zm-520 70h360v256c0 7.7-6.3 14-14 14H346c-7.7 0-14-6.3-14-14V182zm510 630c0 16.6-13.4 30-30 30H212c-16.6 0-30-13.4-30-30V212c0-16.6 13.4-30 30-30h50v300c0 16.6 13.4 30 30 30h440c16.6 0 30-13.4 30-30V182h50c16.6 0 30 13.4 30 30v600z"/></svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/total.svg b/public/fonts/cluster/total.svg
deleted file mode 100644
index 80d5011..0000000
--- a/public/fonts/cluster/total.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#2e8f79" d="M288 96a192 192 0 1 0 0 384h160a32 32 0 0 0 32-32V288A192 192 0 0 0 288 96zm160 448H288a192 192 0 1 0 192 192V576a32 32 0 0 0-32-32zM736 96a192 192 0 0 0-192 192v160a32 32 0 0 0 32 32h160a192 192 0 0 0 0-384z" class="selected" data-spm-anchor-id="a313x.search_index.0.i37.bb293a814rmzNg"/><path fill="#2e8f79" d="M736 544H576a32 32 0 0 0-32 32v160a192 192 0 1 0 192-192z" class="selected" data-spm-anchor-id="a313x.search_index.0.i38.bb293a814rmzNg"/></svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/user.svg b/public/fonts/cluster/user.svg
deleted file mode 100644
index bdf1878..0000000
--- a/public/fonts/cluster/user.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path d="M512 74.667C270.933 74.667 74.667 270.933 74.667 512S270.933 949.333 512 949.333 949.333 753.067 949.333 512 753.067 74.667 512 74.667zm-224 736c0-123.734 100.267-224 224-224s224 100.266 224 224c-61.867 46.933-140.8 74.666-224 74.666S349.867 857.6 288 810.667zm128-384c0-53.334 42.667-96 96-96s96 42.666 96 96-42.667 96-96 96-96-42.667-96-96zM793.6 755.2c-19.2-96-85.333-174.933-174.933-211.2 32-29.867 51.2-70.4 51.2-117.333 0-87.467-72.534-160-160-160s-160 72.533-160 160c0 46.933 19.2 87.466 51.2 117.333-89.6 36.267-155.734 115.2-174.934 211.2C170.667 689.067 134.4 605.867 134.4 512c0-204.8 168.533-373.333 373.333-373.333S885.333 307.2 885.333 512c0 93.867-34.133 177.067-91.733 243.2z"/></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/active.svg b/public/icons/cluster/active.svg
deleted file mode 100644
index 6493c93..0000000
--- a/public/icons/cluster/active.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#2E8F79" d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512zm51.2-256H460.8a25.6 25.6 0 1 0 0 51.2h102.4a25.6 25.6 0 1 0 0-51.2zM512 691.2c70.784 0 98.56-11.392 101.171-65.229 9.037-11.417 19.559-22.349 39.424-41.83l1.741-1.69c64.486-63.13 88.064-100.096 88.064-167.424C742.4 284.928 639.386 179.2 512 179.2S281.6 284.928 281.6 415.027c0 57.549 18.074 98.995 53.709 135.86 10.445 10.803 20.608 19.763 38.477 34.483l9.395 7.705c17.152 14.183 28.109 23.987 37.58 34.227C424.96 679.578 448.872 691.2 512 691.2z"/></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/cluster.svg b/public/icons/cluster/cluster.svg
deleted file mode 100644
index 17ad213..0000000
--- a/public/icons/cluster/cluster.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#2c2c2c" d="M888 680h-54V540H546v-92h238c8.8 0 16-7.2 16-16V168c0-8.8-7.2-16-16-16H240c-8.8 0-16 7.2-16 16v264c0 8.8 7.2 16 16 16h238v92H190v140h-54c-4.4 0-8 3.6-8 8v176c0 4.4 3.6 8 8 8h176c4.4 0 8-3.6 8-8V688c0-4.4-3.6-8-8-8h-54v-72h220v72h-54c-4.4 0-8 3.6-8 8v176c0 4.4 3.6 8 8 8h176c4.4 0 8-3.6 8-8V688c0-4.4-3.6-8-8-8h-54v-72h220v72h-54c-4.4 0-8 3.6-8 8v176c0 4.4 3.6 8 8 8h176c4.4 0 8-3.6 8-8V688c0-4.4-3.6-8-8-8zM256 805.3c0 1.5-1.2 2.7-2.7 2.7h-58.7c-1.5 0-2.7-1.2-2.7-2.7v-58.7c0-1.5 1.2-2.7 2.7-2.7h58.7c1.5 0 2.7 1.2 2.7 2.7v58.7zm288 0c0 1.5-1.2 2.7-2.7 2.7h-58.7c-1.5 0-2.7-1.2-2.7-2.7v-58.7c0-1.5 1.2-2.7 2.7-2.7h58.7c1.5 0 2.7 1.2 2.7 2.7v58.7zM288 384V216h448v168H288zm544 421.3c0 1.5-1.2 2.7-2.7 2.7h-58.7c-1.5 0-2.7-1.2-2.7-2.7v-58.7c0-1.5 1.2-2.7 2.7-2.7h58.7c1.5 0 2.7 1.2 2.7 2.7v58.7z"/><path fill="#2c2c2c" d="M360 300a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/default.svg b/public/icons/cluster/default.svg
deleted file mode 100644
index e6852bb..0000000
--- a/public/icons/cluster/default.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#2E8F79" d="M511.351 34.133c263.612 0 478.516 213.64 478.516 477.218 0 263.612-214.904 478.516-478.516 478.516-263.543 0-477.218-214.904-477.218-478.516 0-263.543 213.64-477.218 477.218-477.218zm250.505 290.134-297.95 339.968L308.224 481.28a6.827 6.827 0 0 0-10.65.307l-42.871 56.798a6.827 6.827 0 0 0 .614 8.909l165.41 166.263-.102.137 31.403 31.368 3.003 2.458a23.893 23.893 0 0 0 30.823-2.492l25.293-25.327-.649-.75 317.713-328.295-66.355-66.39z"/></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/delete-inactive.svg b/public/icons/cluster/delete-inactive.svg
deleted file mode 100644
index 7559f98..0000000
--- a/public/icons/cluster/delete-inactive.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="199.727" height="185.595"><g fill="none" fill-rule="nonzero"><path fill="#1C293A" d="M51.266 14.289h45.77c3.926 0 7.145-3.22 7.145-7.145 0-3.925-3.219-7.144-7.144-7.144h-45.77c-3.926 0-7.145 3.219-7.145 7.144a7.12 7.12 0 0 0 7.144 7.145Zm89.893 17.743H7.144C3.22 32.032 0 35.25 0 39.176 0 43.1 3.219 46.32 7.144 46.32h5.182l9.735 96.566c.785 8.086 7.615 14.21 15.702 14.21h73.327c8.086 0 14.838-6.124 15.702-14.21l9.735-96.566h4.632c3.925 0 7.144-3.219 7.144-7.144-.078-4.004-3.219-7.144-7.144-7.144Zm-59.902 82.67c0 3.925-3.22 7.144-7.145 7.144-3.925 0-7.144-3.22-7.144-7.145V78.038c0-3.926 3.219-7.145 7.144-7.145 3.926 0 7.145 3.22 7.145 7.145V114.7Z"/><path fill="#FFF" d="M173.818 103.475c-19.862 10.441-32.424 41.766-32.424 41.766l-7.772-15.387-15.937 9.97c6.751 2.512 16.487 10.442 24.73 20.883 5.81-10.912 23.71-33.287 32.424-35.328-3.454-7.93-1.492-14.446-1.02-21.904Z"/><path fill="#4caf50" d="M146.183 78.509c-29.597 0-53.543 24.023-53.543 53.543 0 29.598 24.024 53.543 53.543 53.543 29.598 0 53.544-24.024 53.544-53.543.078-29.52-23.946-53.543-53.544-53.543Zm-3.847 82.198c-8.243-10.441-17.9-18.37-24.73-20.883l15.937-9.97 7.773 15.387s12.561-31.325 32.424-41.766c-.471 7.458-2.434 13.896.942 21.904-8.636 2.04-26.536 24.337-32.346 35.328Z"/></g></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/delete.svg b/public/icons/cluster/delete.svg
deleted file mode 100644
index 2657438..0000000
--- a/public/icons/cluster/delete.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#231815" d="M755.5 959.5h-485c-9.9 0-18.1-7.7-18.6-17.6L214.6 289c-.6-10.3 7.3-19.1 17.6-19.7 10.5-.4 19.1 7.3 19.7 17.6l36.3 635.3h449.7l36.3-635.3c.6-10.3 9.6-17.9 19.7-17.6 10.3.6 18.1 9.4 17.6 19.7l-37.3 652.8c-.7 9.9-8.8 17.7-18.7 17.7z"/><path fill="#231815" d="M867.4 288H158.6c-10.3 0-18.7-8.3-18.7-18.7v-74.6c0-9.1 6.6-16.9 15.6-18.4L367.2 141l15.3-62.7c2-8.4 9.5-14.2 18.1-14.2h224.2c8.6 0 16 5.8 18.1 14.1l15.7 62.7 211.8 35.3c9 1.5 15.6 9.3 15.6 18.4v74.6c.1 10.4-8.3 18.8-18.6 18.8zm-690.2-37.3h671.5v-40.2l-208.3-34.7c-7.3-1.2-13.2-6.7-15-13.9l-15.1-60.5h-195l-14.8 60.4c-1.8 7.2-7.7 12.8-15 14l-208.3 34.7v40.2z"/><path fill="#2E8F79" d="M548.8 700.7c-110.6 0-213-34.6-297.3-93.5l19.1 333.6h485l16.6-290.4c-67.8 32.2-143.5 50.3-223.4 50.3z" class="selected" data-spm-anchor-id="a313x.7781069.0.i3"/><path fill="#231815" d="M755.5 959.5h-485c-9.9 0-18.1-7.7-18.6-17.6l-19.1-333.6c-.4-7.1 3.3-13.9 9.5-17.3 6.2-3.5 13.9-3.1 19.8 1 84.4 59 183.5 90.1 286.6 90.1 75.3 0 147.7-16.3 215.3-48.5 5.9-2.9 13-2.3 18.4 1.3 5.5 3.7 8.6 10 8.2 16.5L774 941.8c-.5 9.9-8.6 17.7-18.5 17.7zm-467.4-37.3h449.7l13.8-242.4c-64.4 26.3-132.5 39.6-203 39.6-98.2 0-193.1-26.3-276.6-76.5l16.1 279.3z"/><path fill="#231815" d="M625.7 847.5h-.8c-10.3-.4-18.3-9.1-17.9-19.4l18.7-447.7c.4-10.3 8.6-18.6 19.4-17.9 10.3.4 18.3 9.1 17.9 19.4l-18.7 447.7c-.4 10.1-8.6 17.9-18.6 17.9zm-223.8 0c-9.9 0-18.2-7.9-18.6-17.9L364.6 382c-.4-10.3 7.6-19 17.9-19.4 10.4-.8 19 7.6 19.4 17.9l18.7 447.7c.4 10.3-7.6 19-17.9 19.4-.3-.1-.6-.1-.8-.1zm111.9 0c-10.3 0-18.7-8.3-18.7-18.7V381.2c0-10.3 8.4-18.7 18.7-18.7 10.3 0 18.7 8.3 18.7 18.7v447.7c0 10.3-8.4 18.6-18.7 18.6z"/></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/features.svg b/public/icons/cluster/features.svg
deleted file mode 100644
index 3345b77..0000000
--- a/public/icons/cluster/features.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1725979953165" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="142288" width="200" height="200"><path d="M564.347047 354.155164l106.189578 106.199751c8.352332-8.576146 16.857265-17.47784 25.545318-26.196413q40.754498-40.886752 81.631077-81.651423c9.105161-9.105161 17.854255-18.607084 27.468084-27.12219a71.864647 71.864647 0 0 1 18.780031-11.801103c12.401331-5.371536 23.897233-2.807849 33.572102 6.734767 7.986091 7.843664 15.850102 15.799235 23.76498 23.70394q61.325041 61.314868 122.639908 122.639908c27.223923 27.24427 27.193403 63.858209-0.081387 91.143172q-223.101883 223.173096-446.163072 446.447927c-24.416075 24.416075-59.605742 25.311331-82.587372 7.385862a95.629626 95.629626 0 0 1-8.67788-7.823317Q243.397745 780.836243 20.397596 557.805573C-2.034673 535.352958-6.368526 505.30084 9.430709 480.009855a72.230888 72.230888 0 0 1 10.254751-12.553931q223.814018-223.966619 447.739944-447.800984c26.2778-26.267627 63.339367-26.165893 89.678207 0.152601q70.196215 70.094481 140.127922 140.392429a75.455844 75.455844 0 0 1 12.146998 16.134956c5.839511 10.437872 5.41223 21.364065-1.342884 31.272923a140.890924 140.890924 0 0 1-15.911143 19.726153q-42.33137 42.901078-85.18158 85.293488c-14.05959 13.937509-28.373513 27.681725-42.595877 41.527674z m267.956246 48.323481c-18.993671 19.075058-38.09925 38.323064-57.265868 57.510029q-40.439124 40.469644-81.000328 80.827381c-12.380985 12.279251-28.078486 13.815429-42.555184 4.252466a78.863921 78.863921 0 0 1-12.208037-9.908857q-61.386081-61.243654-122.589042-122.670428c-9.939377-9.94955-20.051701-19.7465-29.889344-29.807958-14.832765-15.17866-16.124783-31.201709-3.723452-48.394695a137.889782 137.889782 0 0 1 14.100283-16.643624q60.684119-60.857066 121.653093-121.439452a26.03364 26.03364 0 0 1 3.987958-2.848542L511.130177 81.631076c-12.024917 12.208037-24.314341 24.833183-36.756365 37.295555Q340.583895 252.8488 206.743113 386.70993 146.160727 447.322835 85.456261 507.854354a14.710685 14.710685 0 0 1-4.211772 2.421261l431.961055 431.910188L943.172619 513.337797z" p-id="142289"></path><path d="M556.483036 736.734708c-9.746083-0.325548-18.312056-3.397904-25.504625-10.010591-3.11305-2.868889-6.104019-5.920898-9.054294-8.911867Q412.947037 608.886036 304.020824 499.959823c-11.923183-11.91301-15.951835-25.819999-10.010591-41.771834 8.718573-23.398738 37.722835-31.53743 57.652456-16.429984a56.075585 56.075585 0 0 1 5.686911 5.086682q111.998569 111.907009 223.956445 223.956446c17.213333 17.223506 16.857265 41.893915-0.701962 56.970841-6.958581 5.910725-15.168486 8.627013-24.121047 8.962734z" p-id="142290" data-spm-anchor-id="a313x.search_index.0.i134.51023a81s87Dcz" class="selected" fill="#2e8f79"></path></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/id.svg b/public/icons/cluster/id.svg
deleted file mode 100644
index de4dd20..0000000
--- a/public/icons/cluster/id.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1732761620376" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30696" width="200" height="200"><path d="M848.3 198.7c32.1 0 57.8 8.2 77 24.5 19.2 16.3 28.8 41.1 28.8 74.2v438.2c0 14.2-2.6 27.6-7.9 40.3-5.3 12.6-12.5 23.7-21.7 33.2-9.2 9.5-20 17-32.4 22.5-12.4 5.5-25.4 8.3-39.1 8.3H164.5c-13.7 0-26.6-2.6-38.7-7.9-12.1-5.3-22.6-12.2-31.6-20.9-8.9-8.7-16.1-18.8-21.3-30.4-5.2-11.7-7.9-24.1-7.9-37.2V295.8c0-28.4 8.7-51.7 26.1-69.9 17.4-18.2 41.8-27.2 73.4-27.2h683.8z m-561.4 146c-10 0-19.5 1.8-28.4 5.5-8.9 3.7-16.8 8.8-23.7 15.4-6.8 6.6-12.2 14.5-16.2 23.7s-5.9 19.1-5.9 29.6 2 20.3 5.9 29.2c3.9 8.9 9.3 16.8 16.2 23.7 6.8 6.8 14.7 12.2 23.7 16.2 8.9 3.9 18.4 5.9 28.4 5.9 11.1 0 21.2-2 30.4-5.9 9.2-4 17.1-9.3 23.7-16.2 6.6-6.8 11.8-14.7 15.8-23.7 3.9-8.9 5.9-18.7 5.9-29.2 0-21.6-7.1-39.3-21.3-53.3-14.2-13.9-32.4-20.9-54.5-20.9z m124 273.2c0-10-2-19.6-5.9-28.8-3.9-9.2-9.2-17.1-15.8-23.7-6.6-6.6-14.5-11.8-23.7-15.8-9.2-3.9-18.8-5.9-28.8-5.9H238c-20.5 0-37.9 7.2-52.1 21.7-14.2 14.5-21.3 32-21.3 52.5v74.3h246.3v-74.3z m366.3 78.2c10.5 0 18.3-2.6 23.3-7.9 5-5.3 7.5-11.6 7.5-18.9 0-7.4-2.9-13.8-8.7-19.3-5.8-5.5-13.9-8.3-24.5-8.3H539.5c-10.5 0-18.4 2.8-23.7 8.3-5.3 5.5-7.9 12-7.9 19.3 0 7.4 2.6 13.7 7.9 18.9 5.3 5.3 12.9 7.9 22.9 7.9h238.5z m0.8-101.9c10.5 0 18.2-2.6 22.9-7.9 4.7-5.3 7.1-11.6 7.1-18.9 0-7.9-2.2-14.5-6.7-19.7-4.5-5.3-12-7.9-22.5-7.9H537.2c-10.5 0-18.2 2.6-22.9 7.9-4.7 5.3-7.1 11.8-7.1 19.7 0 7.4 2.2 13.7 6.7 18.9 4.5 5.3 12 7.9 22.5 7.9H778z m0.8-100.2c7.9 0 14.7-2.6 20.5-7.9 5.8-5.3 8.7-11.6 8.7-18.9 0-7.4-2.9-13.3-8.7-17.8-5.8-4.5-12.6-6.7-20.5-6.7H618.5c-7.9 0-14.6 2.2-20.1 6.7-5.5 4.5-8.3 10.4-8.3 17.8s2.8 13.7 8.3 18.9c5.5 5.3 12.2 7.9 20.1 7.9h160.3z" fill="#919EAB" p-id="30697"></path></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/inactive-total.svg b/public/icons/cluster/inactive-total.svg
deleted file mode 100644
index 620e6cb..0000000
--- a/public/icons/cluster/inactive-total.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 1024 1024"><path fill="#D81E06" d="M192 512a320 320 0 1 0 640 0 320 320 0 1 0-640 0Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/logo.svg b/public/icons/cluster/logo.svg
deleted file mode 100644
index 9f9ef72..0000000
--- a/public/icons/cluster/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#2c2c2c" d="m621.093 219.292 204.495-118.227a78.697 78.697 0 0 1 86.172 1.22c46.014 29.615 96.642 55.987 96.642 55.987L763.27 302.795zM618.9 506.794l142.903-81.558 246.847 142.655-112.221 66.455s-30.682 22.158-93.724-19.069S618.9 506.794 618.9 506.794zM435.476 613.122l77.42-43.82 76.676 44.926-19.355 376.82-58.064 32.513-57.684-33.599-18.993-376.84zM13.425 158.501 368.85 363.472s52.077 23.016 78.888 53.145c24.961 28.05-11.69 75.017-11.69 75.017l219.064-129.668L186.761 91.302s-34.095-16.933-85.696 14.607-87.64 52.592-87.64 52.592z"/><path fill="#2c2c2c" d="m15.446 568.253 115.958 65.502a6.522 6.522 0 0 0 .896.439c4.481 1.906 38.977 15.16 79.822-14.34 41.8-30.186 207.623-119.276 222.84-127.438a9.382 9.382 0 0 0 2.154-1.582c6.808-6.732 45.575-49.046-2.67-88.404-.571-.458-3.05-2.822-3.813-2.917l-21.357-14.111-14.664-8.963-20.976-10.984c-2.917-1.62-6.483.306-9.382 1.907zM647.103 84.59 507.976 1.697 369.231 84.952l139.108 81.806L647.103 84.59z"/></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/peer/export-file.svg b/public/icons/cluster/peer/export-file.svg
deleted file mode 100644
index 758a536..0000000
--- a/public/icons/cluster/peer/export-file.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-
-<svg width="240px" height="240px" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="编组" transform="translate(67, 57)" fill="#1C293A" fill-rule="nonzero">
-            <path d="M102.533066,33.1284638 L69.6771667,2.34474918 C68.1421859,0.905925821 66.0955447,0.106579508 63.9392621,0.106579508 L12.316394,0 C12.316394,0 0,0.781583061 0,11.7237459 L0,113.276254 C0,113.276254 0.548207449,125 12.316394,125 L92.683606,125 C92.683606,125 105,124.449339 105,113.276254 L105,38.7061248 C105,36.6100611 104.104595,34.6028137 102.533066,33.1284638 Z M69.841629,13.2691488 L91.3679081,33.5903084 L73.9349112,33.5903084 C73.9349112,33.5903084 69.8233554,33.4126759 69.8233554,29.6823931 C69.841629,25.9521103 69.841629,13.2691488 69.841629,13.2691488 Z M96.7951619,113.258491 C96.7951619,117.184169 92.683606,117.166407 92.683606,117.166407 L12.316394,117.166407 C8.47894187,117.166407 8.20483815,113.258491 8.20483815,113.258491 L8.20483815,11.7059827 C8.20483815,8.06451613 12.316394,7.79806736 12.316394,7.79806736 L61.6367908,7.79806736 L61.6367908,29.6646298 C61.6367908,40.5002132 73.9531848,41.3883757 73.9531848,41.3883757 L96.7951619,41.3883757 L96.7951619,113.258491 L96.7951619,113.258491 Z" id="形状"></path>
-            <path d="M26,56.887218 C26,59.0428571 27.861913,60.7744361 30.1478261,60.7744361 L74.8521739,60.7744361 C77.138087,60.7744361 79,59.025188 79,56.887218 C79,54.7492481 77.138087,53 74.8521739,53 L30.1478261,53 C27.861913,53 26,54.7492481 26,56.887218 Z M74.8521739,72.612782 L30.1478261,72.612782 C27.861913,72.612782 26,74.3620301 26,76.5 C26,78.6379699 27.861913,80.387218 30.1478261,80.387218 L74.8521739,80.387218 C77.138087,80.387218 79,78.6379699 79,76.5 C79,74.3620301 77.138087,72.612782 74.8521739,72.612782 Z M74.8521739,92.2255639 L30.1478261,92.2255639 C27.861913,92.2255639 26,93.974812 26,96.112782 C26,98.2507519 27.861913,100 30.1478261,100 L74.8521739,100 C77.138087,100 79,98.2507519 79,96.112782 C79,93.974812 77.138087,92.2255639 74.8521739,92.2255639 Z" id="形状"></path>
-        </g>
-        <rect id="矩形" stroke="#D3D3D3" stroke-width="3" x="1.5" y="1.5" width="237" height="237" rx="28"></rect>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/peer/git-commits.svg b/public/icons/cluster/peer/git-commits.svg
deleted file mode 100644
index 4d7477a..0000000
--- a/public/icons/cluster/peer/git-commits.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg t="1731307951236" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    p-id="31750" width="200" height="200">
-    <path
-        d="M874.666667 469.333333h85.333333a64 64 0 0 1 0 128h-85.333333a64 64 0 0 1 0-128z m-810.666667 0h85.333333a64 64 0 0 1 0 128h-85.333333a64 64 0 0 1 0-128z"
-        fill="#00a76f" opacity=".3" p-id="31751" data-spm-anchor-id="a313x.search_index.0.i33.4f803a81GzHQyW"
-        class="selected"></path>
-    <path
-        d="M512 682.666667a128 128 0 1 0 0-256 128 128 0 0 0 0 256z m0 85.333333a213.333333 213.333333 0 1 1 0-426.666667 213.333333 213.333333 0 0 1 0 426.666667z"
-        fill="#2e8f79" p-id="31752" data-spm-anchor-id="a313x.search_index.0.i32.4f803a81GzHQyW" class=""></path>
-</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/peer/refresh-dialog.svg b/public/icons/cluster/peer/refresh-dialog.svg
deleted file mode 100644
index c5c951a..0000000
--- a/public/icons/cluster/peer/refresh-dialog.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<!-- <svg t="1731409619496" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    p-id="33971" data-spm-anchor-id="a313x.search_index.0.i45.43e13a81MrmXsx" width="200" height="200">
-    <path d="M307.2 563.2m-307.2 0a307.2 307.2 0 1 0 614.4 0 307.2 307.2 0 1 0-614.4 0Z" fill="#2e8f79" p-id="33972"
-        data-spm-anchor-id="a313x.search_index.0.i46.43e13a81MrmXsx" class="selected"></path>
-    <path
-        d="M676.4544 270.1824a317.5936 317.5936 0 0 0-179.2-3.2256c-152.32 40.8576-251.904 184.32-232.6528 335.36 19.2 151.04 151.1424 262.912 308.48 261.5296 157.3376-1.4336 291.328-115.6608 313.2416-267.0592a29.0816 29.0816 0 0 1 45.7728-18.688 26.7776 26.7776 0 0 1 10.7008 25.4464c-20.992 144.1792-129.2288 263.5264-274.3296 302.4896-180.0192 48.1792-366.6432-39.8336-436.224-205.7728-69.632-165.888-0.7168-358.4 161.1264-449.8944a382.464 382.464 0 0 1 294.7584-34.816l-11.6736 54.6304z"
-        fill="#1c293a" p-id="33973" data-spm-anchor-id="a313x.search_index.0.i44.43e13a81MrmXsx" class=""></path>
-    <path
-        d="M655.7184 262.1952L501.5552 114.944A45.4656 45.4656 0 0 1 501.6576 49.1008l2.7648-2.6112a46.08 46.08 0 0 1 63.5392 0.1024l154.1632 147.2512a45.4656 45.4656 0 0 1-0.1024 65.792l-2.7648 2.6624a46.08 46.08 0 0 1-63.5392-0.1024z"
-        fill="#1c293a" p-id="33974" data-spm-anchor-id="a313x.search_index.0.i43.43e13a81MrmXsx" class=""></path>
-    <path
-        d="M646.656 187.904L492.544 335.1552a45.4656 45.4656 0 0 0 0.1024 65.8432l2.7648 2.6112a46.08 46.08 0 0 0 63.5904-0.0512l154.112-147.3024a45.4656 45.4656 0 0 0-0.0512-65.792l-2.816-2.6624a46.08 46.08 0 0 0-63.5392 0.1024z"
-        fill="#1c293a" p-id="33975" data-spm-anchor-id="a313x.search_index.0.i42.43e13a81MrmXsx" class=""></path>
-</svg> -->
-
-<svg t="1731409725644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    p-id="37638" width="200" height="200">
-    <path
-        d="M336.888708 337.305392c84.795117-84.795117 214.383723-96.878942 312.512716-36.876501-33.33469 32.918006-71.461241 71.252899-71.461241 71.252899-26.876094 32.084639 3.125127 50.835402 18.542421 50.210377h248.343439c9.375381 0 17.084028-7.708647 17.084028-17.29237V158.339776c1.250051-22.500916-23.542625-44.376806-49.168667-19.167446 0 0-42.293388 41.251679-71.252899 70.002848-149.172737-108.962767-359.597965-96.6706-494.395117 38.126551-78.753204 78.753204-115.421363 183.132452-111.046186 286.053307h127.296847c-4.375178-70.21119 19.792472-142.089115 73.544659-196.049644z"
-        fill="#1c293a" p-id="37639" data-spm-anchor-id="a313x.search_index.0.i50.43e13a81MrmXsx" class=""></path>
-    <path
-        d="M760.655951 490.644964c4.58352 70.419532-19.792472 142.297457-73.544659 196.049644-84.795117 84.795117-214.383723 96.878942-312.512716 36.876501 33.33469-32.918006 71.461241-71.252899 71.461241-71.252899 26.667752-32.292981-3.333469-50.835402-18.542421-50.210377H179.173957c-9.583723 0-17.29237 7.708647-17.29237 17.084029v246.26002c-1.041709 22.500916 23.750966 44.376806 49.168667 19.167447 0 0 42.293388-41.043337 71.461241-70.002849 149.172737 109.171109 359.597965 96.6706 494.186776-38.126551 78.753204-78.544863 115.421363-182.92411 111.046185-286.053306l-127.088505 0.208341z"
-        fill="#2e8f79" p-id="37640" data-spm-anchor-id="a313x.search_index.0.i51.43e13a81MrmXsx" class="selected">
-    </path>
-</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/peer/total.svg b/public/icons/cluster/peer/total.svg
deleted file mode 100644
index a661cba..0000000
--- a/public/icons/cluster/peer/total.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg t="1731061839385" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    p-id="20132" width="200" height="200">
-    <path d="M518.8 540.7m-450 0a450 450 0 1 0 900 0 450 450 0 1 0-900 0Z" fill="#9CD9AE" opacity=".6" p-id="20133"
-        data-spm-anchor-id="a313x.search_index.0.i23.4f803a81GzHQyW" class="selected"></path>
-    <path
-        d="M495.4 326.9h-0.9c-129.8 0-235.1 105.3-235.1 235.1s105.3 235.1 235.1 235.1c129.6 0 234.7-104.8 235.1-234.3H495.4V326.9z"
-        fill="#2e8f79" p-id="20134" data-spm-anchor-id="a313x.search_index.0.i21.4f803a81GzHQyW" class=""></path>
-    <path d="M543.1 284.3h-1v234.4h236.1c-0.4-129.5-105.5-234.4-235.1-234.4z" fill="#2e8f79" p-id="20135"
-        data-spm-anchor-id="a313x.search_index.0.i22.4f803a81GzHQyW" class=""></path>
-</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/preheat.svg b/public/icons/cluster/preheat.svg
deleted file mode 100644
index e339227..0000000
--- a/public/icons/cluster/preheat.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1725980910269" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="162613" width="200" height="200"><path d="M76.16 872.32V151.68c0-41.6 33.92-76.16 75.52-76.16h445.76v94.72c0 83.84 68.48 151.68 151.68 151.68h113.92v154.688h75.52V301.44c0-41.6-14.72-80-43.52-108.16L745.28 43.52c-30.08-28.8-68.48-43.52-108.16-43.52H151.68C68.48 0 0 67.84 0 151.68v720.64C0 955.52 68.48 1024 151.68 1024H512v-76.16H151.68c-41.6 0-75.52-33.92-75.52-75.52z m597.44-787.2c5.12 3.84 10.88 7.68 16.64 13.44l147.84 147.84h-88.96c-41.6 0-75.52-33.92-75.52-76.16V85.12z" fill="#1b283a" p-id="162614"></path><path d="M855.936 766.464h-30.848c-4.48 0-8.064-3.136-8.064-7.616v-113.984a8 8 0 0 0-8.064-8.064h-50.048a8 8 0 0 0-8.064 8.064v113.984c0 4.48-3.584 7.616-8.064 7.616h-30.4c-5.824 0-9.856 6.272-7.616 11.2l16.576 34.432 55.424 114.432a7.808 7.808 0 0 0 14.336 0l72-148.864c2.24-4.928-1.344-11.2-7.168-11.2z" fill="#1b283a" p-id="162615"></path><path d="M784 544c-17.984 0-35.968 1.792-52.8 6.016a251.52 251.52 0 0 0-67.2 25.792A240.448 240.448 0 0 0 544 784 239.936 239.936 0 0 0 784 1024 239.936 239.936 0 0 0 1024 784a239.936 239.936 0 0 0-240-240z m0 423.616a183.616 183.616 0 0 1-183.616-183.616c0-55.168 24.576-105.024 63.616-138.624 19.2-16.768 41.984-30.016 67.2-37.184a183.616 183.616 0 1 1 52.8 359.424z" fill="#1b283a" p-id="162616"></path></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/round.svg b/public/icons/cluster/round.svg
deleted file mode 100644
index a63f6f0..0000000
--- a/public/icons/cluster/round.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#e4e5e5" d="M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/scheduler.svg b/public/icons/cluster/scheduler.svg
deleted file mode 100644
index 9ac40a8..0000000
--- a/public/icons/cluster/scheduler.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#2c2c2c" d="M780.04 641.67c64.22 0 116.13-51.91 116.13-116.13s-51.91-116.13-116.13-116.13c-40.47 0-76.54 21.11-96.78 51.91l-90.62-73.9c2.64-9.68 4.4-20.23 4.4-30.79v-2.64l86.22-56.31c21.11 31.67 56.31 51.91 96.78 51.91 64.22 0 116.13-51.91 116.13-116.13s-51.91-117.01-116.13-117.01c-61.58 0-112.61 48.39-116.13 109.09l-91.5 59.82c-21.11-28.15-54.55-45.75-92.38-45.75-64.22 0-116.13 51.91-116.13 116.13 0 13.2 2.64 26.39 7.04 38.71l-62.46 41.35c-21.11-20.23-49.27-32.55-80.94-32.55-65.1 0-117.89 51.91-117.89 116.13s51.91 116.13 116.13 116.13c26.39 0 50.15-8.8 70.38-23.75l71.26 42.23c-2.64 9.68-4.4 20.23-4.4 30.79 0 64.22 51.91 116.13 116.13 116.13 32.55 0 61.58-13.2 82.7-34.31l102.05 51.91c4.4 59.82 54.55 107.33 116.13 107.33 64.22 0 116.13-51.91 116.13-116.13s-51.91-116.13-116.13-116.13c-42.23 0-78.3 21.99-99.41 55.43L594.4 705.9c.88-6.16 1.76-12.32 1.76-19.36 0-10.56-1.76-21.99-4.4-31.67l96.78-56.31c22 26.39 54.55 43.11 91.5 43.11zm0-454.84c25.51 0 45.75 21.11 45.75 45.75s-21.11 45.75-45.75 45.75c-24.63 0-45.75-21.11-45.75-45.75s20.24-45.75 45.75-45.75zm0 576.25c25.51 0 45.75 21.11 45.75 45.75s-21.11 45.75-45.75 45.75c-24.63 0-45.75-21.11-45.75-45.75s20.24-45.75 45.75-45.75zm0-284.17c25.51 0 45.75 21.11 45.75 45.75 0 25.51-21.11 45.75-45.75 45.75-24.63 0-45.75-21.11-45.75-45.75-.87-24.63 20.24-45.75 45.75-45.75zm-439.01 19.36 72.14-46.63c19.36 13.2 42.23 21.99 67.74 21.99 28.15 0 53.67-9.68 73.9-26.39l105.57 87.1-106.44 62.46c-20.23-15.84-45.75-26.39-73.02-26.39-28.15 0-53.67 9.68-73.9 26.39l-69.5-42.23c3.52-11.44 5.28-22.87 5.28-35.19-.01-7.04-.89-14.07-1.77-21.11zm139.01-188.28c25.51 0 45.75 21.11 45.75 45.75 0 24.63-21.11 45.75-45.75 45.75s-45.75-21.11-45.75-45.75c0-24.63 20.24-45.75 45.75-45.75zM226.66 565.13c-25.51 0-45.75-21.11-45.75-45.75 0-25.51 21.11-45.75 45.75-45.75s45.75 21.11 45.75 45.75c0 25.52-20.23 45.75-45.75 45.75zm253.38 167.16c-25.51 0-45.75-21.11-45.75-45.75s21.11-45.75 45.75-45.75 45.75 21.11 45.75 45.75c0 24.63-20.24 45.75-45.75 45.75zm180.35-198.83 3.52-4.4c0 3.52 0 7.04.88 11.44l-4.4-7.04z"/></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/scheduler/active.svg b/public/icons/cluster/scheduler/active.svg
deleted file mode 100644
index 4465845..0000000
--- a/public/icons/cluster/scheduler/active.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-
-<svg width="135px" height="135px" viewBox="0 0 135 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <circle id="椭圆形" fill="#B2E4C1" cx="67.5" cy="67.5" r="67.5"></circle>
-        <g id="编组" transform="translate(27, 26)" fill="#2E8F79" fill-rule="nonzero">
-            <path d="M41,0 C18.3453453,0 0,18.3453453 0,41 C0,63.6546547 18.3453453,82 41,82 C63.6546547,82 82,63.6546547 82,41 C82,18.3863864 63.6546547,0 41,0 L41,0 Z M62.956957,38.6606607 C62.7107107,40.7947948 60.9459459,40.6306306 60.9459459,40.6306306 C59.5095095,40.6306306 59.017017,39.4814815 59.017017,39.4814815 L56.0620621,32.955956 L50.6036036,56.5135135 C50.1521522,58.2372372 48.5515516,58.0730731 48.5515516,58.0730731 C47.1561562,58.0730731 46.7047047,56.8828829 46.7047047,56.8828829 L38.988989,38.5375375 L32.7097097,52.983984 C32.012012,54.1331331 30.8628629,54.1331331 30.8628629,54.1331331 C29.5085085,54.1331331 28.9339339,52.983984 28.9339339,52.983984 L24.8708709,45.022022 L20.1511512,50.6446446 C19.6996997,51.4654655 18.4684685,51.4654655 18.4684685,51.4654655 C16.5395395,51.4654655 16.4164164,49.5365365 16.4164164,49.5365365 C16.4164164,48.7567568 16.9499499,48.1411411 16.9499499,48.1411411 L23.6806807,40.2202202 C24.2962963,39.4404404 25.2812813,39.3993994 25.2812813,39.3993994 C26.6356356,39.3993994 27.2102102,40.5895896 27.2102102,40.5895896 L30.6576577,47.4024024 L37.1831832,32.5045045 C37.8398398,31.2732733 38.988989,31.3553554 38.988989,31.3553554 C40.3023023,31.3553554 40.8768769,32.5455455 40.8768769,32.5455455 L48.0590591,49.5365365 L53.3943944,26.3073073 C53.7637638,24.6656657 55.4874875,24.6656657 55.4874875,24.6656657 C56.6776777,24.6656657 57.2932933,25.8148148 57.2932933,25.8148148 L62.7517518,37.9219219 C62.997998,38.045045 62.956957,38.6606607 62.956957,38.6606607 L62.956957,38.6606607 Z" id="形状"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/scheduler/cluster-id.svg b/public/icons/cluster/scheduler/cluster-id.svg
deleted file mode 100644
index ac18edb..0000000
--- a/public/icons/cluster/scheduler/cluster-id.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1734589725752" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="56184" width="200" height="200"><path d="M888 680h-54V540H546v-92h238c8.8 0 16-7.2 16-16V168c0-8.8-7.2-16-16-16H240c-8.8 0-16 7.2-16 16v264c0 8.8 7.2 16 16 16h238v92H190v140h-54c-4.4 0-8 3.6-8 8v176c0 4.4 3.6 8 8 8h176c4.4 0 8-3.6 8-8V688c0-4.4-3.6-8-8-8h-54v-72h220v72h-54c-4.4 0-8 3.6-8 8v176c0 4.4 3.6 8 8 8h176c4.4 0 8-3.6 8-8V688c0-4.4-3.6-8-8-8h-54v-72h220v72h-54c-4.4 0-8 3.6-8 8v176c0 4.4 3.6 8 8 8h176c4.4 0 8-3.6 8-8V688c0-4.4-3.6-8-8-8zM256 805.3c0 1.5-1.2 2.7-2.7 2.7h-58.7c-1.5 0-2.7-1.2-2.7-2.7v-58.7c0-1.5 1.2-2.7 2.7-2.7h58.7c1.5 0 2.7 1.2 2.7 2.7v58.7z m288 0c0 1.5-1.2 2.7-2.7 2.7h-58.7c-1.5 0-2.7-1.2-2.7-2.7v-58.7c0-1.5 1.2-2.7 2.7-2.7h58.7c1.5 0 2.7 1.2 2.7 2.7v58.7zM288 384V216h448v168H288z m544 421.3c0 1.5-1.2 2.7-2.7 2.7h-58.7c-1.5 0-2.7-1.2-2.7-2.7v-58.7c0-1.5 1.2-2.7 2.7-2.7h58.7c1.5 0 2.7 1.2 2.7 2.7v58.7z" p-id="56185" fill="#515151"></path><path d="M400 300m-40 0a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z" p-id="56186" fill="#515151"></path></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/scheduler/created-at.svg b/public/icons/cluster/scheduler/created-at.svg
deleted file mode 100644
index 90a4cce..0000000
--- a/public/icons/cluster/scheduler/created-at.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1694488945708" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="39963" width="64" height="64"><path d="M512 895.936c-211.776 0-384-172.224-384-384C128 300.224 300.16 128 512 128c211.648 0 384 172.288 384 384a32 32 0 1 0 64 0C960 264.96 759.04 64 512 64 265.216 64 64 264.96 64 512c0 246.912 201.024 447.936 448 447.936a32 32 0 0 0 0-64zM512 190.912a32 32 0 0 0-32.064 32.064v275.776L361.28 617.344a32 32 0 0 0 45.312 45.248L534.208 535.04a30.912 30.912 0 0 0 5.184-6.72s0-0.128 0.128-0.128l0.64-1.152c0-0.128 0.128-0.128 0.128-0.192l0.64-1.216v-0.192c0.256-0.448 0.512-0.832 0.512-1.216 0-0.064 0.192-0.064 0.192-0.192l0.448-1.28 0.128-0.256c0.064-0.384 0.32-0.768 0.384-1.28l0.128-0.192 0.256-1.28c0-0.128 0-0.192 0.128-0.192a26.24 26.24 0 0 0 0.384-1.664c0.128-0.32 0.128-0.768 0.192-1.152 0-0.192 0-0.32 0.128-0.512l0.064-1.088c0-0.256 0-0.448 0.128-0.704l0.064-0.832v-290.56a32.128 32.128 0 0 0-32.064-32z m415.552 544.96h-127.872v-128a32 32 0 1 0-64.064 0v128h-128a32 32 0 1 0 0 64.064h128.064v128a32 32 0 0 0 64 0v-128.064h128.064a32 32 0 0 0 32.064-32.064 32.32 32.32 0 0 0-32.256-31.936z" fill="#515151" p-id="39964"></path></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/scheduler/features.svg b/public/icons/cluster/scheduler/features.svg
deleted file mode 100644
index 512bf9a..0000000
--- a/public/icons/cluster/scheduler/features.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1734589263069" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="48477" width="200" height="200"><path d="M563.126857 354.377143l105.910857 105.984c8.338286-8.557714 16.822857-17.408 25.526857-26.112 27.062857-27.209143 54.272-54.345143 81.408-81.481143 9.142857-9.069714 17.846857-18.578286 27.428572-27.062857a71.606857 71.606857 0 0 1 18.724571-11.776c12.434286-5.339429 23.844571-2.779429 33.499429 6.729143 8.045714 7.826286 15.872 15.725714 23.771428 23.625143l122.368 122.368c27.062857 27.209143 27.062857 63.707429-0.146285 90.916571l-445.147429 445.44c-24.356571 24.429714-59.465143 25.307429-82.432 7.460571a95.085714 95.085714 0 0 1-8.630857-7.826285A3481755.794286 3481755.794286 0 0 1 20.333714 557.568c-22.381714-22.381714-26.697143-52.370286-10.971428-77.531429a72.045714 72.045714 0 0 1 10.24-12.580571L466.505143 20.626286c26.185143-26.185143 63.195429-26.112 89.453714 0.146285C602.550857 67.437714 649.142857 114.102857 695.588571 160.914286c4.754286 4.827429 8.850286 10.24 12.141715 16.091428a28.233143 28.233143 0 0 1-1.316572 31.232 140.873143 140.873143 0 0 1-15.872 19.748572c-28.16 28.525714-56.539429 56.832-84.992 85.065143-14.043429 13.897143-28.306286 27.574857-42.496 41.398857z m267.337143 48.274286l-57.124571 57.344-80.822858 80.676571a31.817143 31.817143 0 0 1-42.422857 4.242286 78.848 78.848 0 0 1-12.214857-9.874286A56587.922286 56587.922286 0 0 1 515.510857 412.525714c-9.874286-9.947429-19.968-19.748571-29.769143-29.769143-14.848-15.140571-16.091429-31.085714-3.730285-48.274285a137.508571 137.508571 0 0 1 14.043428-16.603429c40.374857-40.448 80.822857-80.822857 121.417143-121.124571a25.892571 25.892571 0 0 1 3.949714-2.925715L510.025143 82.578286c-11.995429 12.141714-24.283429 24.722286-36.717714 37.156571a929953.426286 929953.426286 0 0 1-388.022858 388.096 14.628571 14.628571 0 0 1-4.242285 2.413714l431.030857 430.957715 429.056-427.885715-110.665143-110.592z m-275.236571 333.531428a38.034286 38.034286 0 0 1-25.453715-10.020571 1191036.050286 1191036.050286 0 0 1-226.450285-226.304c-11.849143-11.849143-15.872-25.746286-9.947429-41.691429a37.302857 37.302857 0 0 1 57.490286-16.384 55.442286 55.442286 0 0 1 5.705143 5.12L580.022857 670.354286c17.188571 17.188571 16.822857 41.764571-0.731428 56.832a38.326857 38.326857 0 0 1-24.064 8.923428z" fill="#515151" p-id="48478"></path></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/scheduler/hostname.svg b/public/icons/cluster/scheduler/hostname.svg
deleted file mode 100644
index b4ba2b5..0000000
--- a/public/icons/cluster/scheduler/hostname.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1734589666101" class="icon" viewBox="0 0 1191 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="51432" width="200" height="200"><path d="M1081.527579 542.078644A108.415332 108.415332 0 0 1 1189.942911 651.155045v264.42764a107.754263 107.754263 0 0 1-108.415332 108.415332H108.433866A107.754263 107.754263 0 0 1 0.018534 914.260546v-264.427639A108.415332 108.415332 0 0 1 108.433866 542.078644z m0 80.65043H108.433866a28.425971 28.425971 0 0 0-27.764902 27.103833v264.427639a27.103833 27.103833 0 0 0 27.103833 27.764903h973.754782a27.764902 27.764902 0 0 0 27.764902-27.103833v-264.42764a28.425971 28.425971 0 0 0-27.103833-28.425971zM207.594231 727.177992a33.714524 33.714524 0 0 1 34.375593 33.714524v37.680938a34.375593 34.375593 0 0 1-66.10691 0v-37.680938a33.714524 33.714524 0 0 1 31.731317-33.714524z m154.690169 0a33.714524 33.714524 0 0 1 34.375593 33.714524v37.680938a34.375593 34.375593 0 0 1-66.10691 0v-37.680938a33.714524 33.714524 0 0 1 31.731317-33.714524zM925.515272 727.177992a52.885528 52.885528 0 1 1 0 105.109986h-27.764902a52.885528 52.885528 0 1 1 0-105.109986z m156.012307-727.176009A107.754263 107.754263 0 0 1 1189.942911 108.417315v264.42764a108.415332 108.415332 0 0 1-108.415332 108.415332H108.433866A108.415332 108.415332 0 0 1 0.018534 372.183886v-264.42764A107.754263 107.754263 0 0 1 108.433866 0.001983z m0 80.65043H108.433866a27.764902 27.764902 0 0 0-27.764902 27.103833v264.42764a27.764902 27.764902 0 0 0 27.103833 27.764902h973.754782a27.764902 27.764902 0 0 0 27.764902-27.103833v-264.42764a27.764902 27.764902 0 0 0-27.103833-27.764902zM207.594231 185.7624a34.375593 34.375593 0 0 1 34.375593 34.375593v37.01987a34.375593 34.375593 0 1 1-66.10691 0v-37.01987a33.714524 33.714524 0 0 1 31.731317-34.375593z m154.690169 0a34.375593 34.375593 0 0 1 34.375593 34.375593v37.01987a34.375593 34.375593 0 1 1-66.10691 0v-37.01987a33.714524 33.714524 0 0 1 31.731317-34.375593z m561.247665 0a52.885528 52.885528 0 0 1 0 105.771056h-27.764903a52.885528 52.885528 0 1 1 0-105.771056z" fill="#515151" p-id="51433"></path></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/scheduler/port.svg b/public/icons/cluster/scheduler/port.svg
deleted file mode 100644
index a4a1545..0000000
--- a/public/icons/cluster/scheduler/port.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1734589137652" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="45479" width="200" height="200"><path d="M883.84 940.8H144.64c-42.88 0-80.64-37.76-80.64-80.64V415.36c0-42.88 37.76-80.64 80.64-80.64h21.12v-48c0-48 37.76-85.76 85.76-85.76h69.76v-42.88c0-42.88 32-74.88 74.88-74.88h230.4c42.88 0 74.88 32 74.88 74.88v42.88h69.76c48 0 85.76 37.76 85.76 85.76v48h21.12c42.88 0 80.64 37.76 80.64 80.64v444.8c5.12 42.88-32 80.64-74.88 80.64zM144.64 394.24c-10.88 0-21.12 10.88-21.12 21.12v444.8c0 10.88 10.88 21.12 21.12 21.12h739.2c10.88 0 21.12-10.88 21.12-21.12V415.36c0-10.88-10.88-21.12-21.12-21.12h-48c-16 0-26.88-10.88-26.88-26.88V286.72c0-16-10.88-32-32-32h-101.76c-16 0-26.88-10.88-26.88-26.88V158.08c0-10.88-10.88-21.12-21.12-21.12H401.28c-10.88 5.12-21.12 10.88-21.12 21.12v69.76c0 16-10.88 26.88-26.88 26.88H251.52c-16 5.12-26.88 16-26.88 32v74.88c0 16-10.88 26.88-26.88 26.88-5.12 5.76-53.12 5.76-53.12 5.76z m0 0" fill="#515151" p-id="45480"></path><path d="M755.2 517.12h85.76v273.28H755.2V517.12z m-139.52 0h85.76v273.28H615.68V517.12z m-138.88 0h85.76v273.28H476.8V517.12z m-139.52 0h85.76v273.28H337.28V517.12z m-139.52 0h85.76v273.28H197.76V517.12z m0 0" fill="#515151" p-id="45481"></path></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/scheduler/scheduler-id.svg b/public/icons/cluster/scheduler/scheduler-id.svg
deleted file mode 100644
index f2f864a..0000000
--- a/public/icons/cluster/scheduler/scheduler-id.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1694488637106" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28840" width="64" height="64"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32z m-40 632H136V232h752v560z" p-id="28841" fill="#515151"></path><path d="M610.3 476h123.4c1.3 0 2.3-3.6 2.3-8v-48c0-4.4-1-8-2.3-8H610.3c-1.3 0-2.3 3.6-2.3 8v48c0 4.4 1 8 2.3 8zM615.1 620h185.7c3.9 0 7.1-3.6 7.1-8v-48c0-4.4-3.2-8-7.1-8H615.1c-3.9 0-7.1 3.6-7.1 8v48c0 4.4 3.2 8 7.1 8zM224 673h43.9c4.2 0 7.6-3.3 7.9-7.5 3.8-50.5 46-90.5 97.2-90.5s93.4 40 97.2 90.5c0.3 4.2 3.7 7.5 7.9 7.5H522c4.6 0 8.2-3.8 8-8.4-2.8-53.3-32-99.7-74.6-126.1 18.1-19.9 29.1-46.4 29.1-75.5 0-61.9-49.9-112-111.4-112s-111.4 50.1-111.4 112c0 29.1 11 55.5 29.1 75.5-42.7 26.5-71.8 72.8-74.6 126.1-0.4 4.6 3.2 8.4 7.8 8.4z m149-262c28.5 0 51.7 23.3 51.7 52s-23.2 52-51.7 52-51.7-23.3-51.7-52 23.2-52 51.7-52z" p-id="28842" fill="#515151"></path></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/scheduler/scheduler-ip.svg b/public/icons/cluster/scheduler/scheduler-ip.svg
deleted file mode 100644
index 076be07..0000000
--- a/public/icons/cluster/scheduler/scheduler-ip.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1734589694524" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="53329" width="200" height="200"><path d="M537.362229 1024c-9.510836 0-15.851393-3.170279-22.19195-9.510836l-282.154799-278.98452c-120.470588-123.640867-158.513932-307.517028-91.938081-466.03096S362.996904 6.340557 534.19195 6.340557s329.708978 104.619195 393.114552 263.133127c66.575851 158.513932 28.532508 342.390093-91.938081 466.03096L559.55418 1014.489164c-6.340557 6.340557-12.681115 9.510836-22.191951 9.510836z m0-957.424149C391.529412 66.575851 258.377709 155.343653 201.312693 291.665635c-57.065015 136.321981-25.362229 291.665635 79.256966 396.284829l259.962849 256.79257 259.962848-259.962848c104.619195-104.619195 136.321981-259.962848 79.256966-396.28483-60.235294-133.151703-193.386997-221.919505-342.390093-221.919505z m0 0" fill="#515151" p-id="53330"></path><path d="M382.018576 285.325077h63.405573v342.390093h-63.405573V285.325077z m244.111455 342.390093h-63.405573V317.027864c0-15.851393 12.681115-31.702786 31.702787-31.702787h66.575851c60.235294 0 107.789474 47.55418 107.789474 107.789474s-47.55418 107.789474-107.789474 107.789474h-34.873065v126.811145z m0-187.046439h34.873065c25.362229 0 47.55418-22.19195 47.55418-47.55418s-22.19195-47.55418-47.55418-47.554179h-34.873065v95.108359z m0 0" fill="#515151" p-id="53331"></path></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/scheduler/tab-scheduler.svg b/public/icons/cluster/scheduler/tab-scheduler.svg
deleted file mode 100644
index 96d1022..0000000
--- a/public/icons/cluster/scheduler/tab-scheduler.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg t="1734421733229" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    p-id="40495" width="200" height="200">
-    <path
-        d="M244.309333 155.029333v148.16h521.706667V155.029333h157.525333a35.370667 35.370667 0 0 1 34.026667 36.736v780.885334a35.370667 35.370667 0 0 1-34.026667 36.736H100.8a35.370667 35.370667 0 0 1-34.005333-36.736V191.786667a34.688 34.688 0 0 1 31.296-36.736h146.218666z m139.712 585.685334a62.933333 62.933333 0 0 0-59.946666 47.424h-15.36a15.914667 15.914667 0 0 0-16.469334 6.890666 16.426667 16.426667 0 0 0 0 18.048 15.914667 15.914667 0 0 0 16.448 6.890667h15.381334a62.933333 62.933333 0 0 0 59.946666 48.064 62.933333 62.933333 0 0 0 60.565334-47.424h271.424a15.914667 15.914667 0 0 0 16.448-6.890667 16.426667 16.426667 0 0 0 0-18.048 15.914667 15.914667 0 0 0-16.426667-6.890666v-0.64H444.586667A62.933333 62.933333 0 0 0 384 740.693333z m256.682667-159.146667a62.933333 62.933333 0 0 0-60.565333 47.424H308.693333v0.64a15.914667 15.914667 0 0 0-16.448 6.869333 16.426667 16.426667 0 0 0 0 18.069334 15.914667 15.914667 0 0 0 16.448 6.869333h271.445334a62.933333 62.933333 0 0 0 60.565333 47.445333 62.933333 62.933333 0 0 0 59.946667-48.064h15.04a15.914667 15.914667 0 0 0 16.469333-6.890666 16.426667 16.426667 0 0 0 0-18.069334 15.914667 15.914667 0 0 0-16.469333-6.869333h-15.061334a62.933333 62.933333 0 0 0-59.946666-47.445333zM384 422.4a62.933333 62.933333 0 0 0-59.946667 47.424h-15.36a15.914667 15.914667 0 0 0-16.469333 6.890667 16.426667 16.426667 0 0 0 0 18.048 15.914667 15.914667 0 0 0 16.448 6.890666h15.381333a62.933333 62.933333 0 0 0 59.946667 48.064 62.933333 62.933333 0 0 0 60.565333-47.424h271.424a16.170667 16.170667 0 0 0 12.864-15.914666 16.170667 16.170667 0 0 0-12.864-15.914667v-0.64H444.586667A62.933333 62.933333 0 0 0 384 422.4zM638.762667 68.437333a51.008 51.008 0 0 0-55.104-46.933333h-157.802667a51.008 51.008 0 0 0-55.104 46.933333v31.296h-82.069333v157.824h432.618666V100.416h-82.538666V68.437333zM502.72 194.986667a57.813333 57.813333 0 1 1 59.178667-57.813334 55.104 55.104 0 0 1-56.469334 57.130667l-2.709333 0.682667z"
-        fill="#919EAB" p-id="40496"></path>
-</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/scheduler/updated-at.svg b/public/icons/cluster/scheduler/updated-at.svg
deleted file mode 100644
index 6af943d..0000000
--- a/public/icons/cluster/scheduler/updated-at.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1734589469165" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="50355" width="200" height="200"><path d="M736 544H512c-17.6 0-32-14.4-32-32V224c0-17.6 14.4-32 32-32s32 14.4 32 32v256h192c17.6 0 32 14.4 32 32s-14.4 32-32 32z m161.6-153.6c-17.6 0-32-14.4-32-32V185.6c0-17.6 14.4-32 32-32s32 14.4 32 32v172.8c0 17.6-14.4 32-32 32zM512 960C265.6 960 64 758.4 64 512S265.6 64 512 64c184 0 347.2 110.4 416 281.6 6.4 16-1.6 35.2-17.6 41.6-16 6.4-35.2-1.6-41.6-17.6C809.6 222.4 670.4 128 512 128c-211.2 0-384 172.8-384 384s172.8 384 384 384c158.4 0 297.6-94.4 356.8-241.6 6.4-16 25.6-24 41.6-17.6 16 6.4 24 25.6 17.6 41.6C859.2 849.6 696 960 512 960z" fill="#515151" p-id="50356"></path></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/seed-peer.svg b/public/icons/cluster/seed-peer.svg
deleted file mode 100644
index f31e6dd..0000000
--- a/public/icons/cluster/seed-peer.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#2c2c2c" d="M687 620H337c-19.3 0-35 15.7-35 35s15.7 35 35 35h350c19.3 0 35-15.7 35-35s-15.7-35-35-35zm-77-218c16.6 0 30-13.4 30-30V262c0-16.6-13.4-30-30-30s-30 13.4-30 30v110c0 16.6 13.4 30 30 30z"/><path fill="#2c2c2c" d="M852 112H172c-33.1 0-60 26.9-60 60v680c0 33.1 26.9 60 60 60h680c33.1 0 60-26.9 60-60V172c0-33.1-26.9-60-60-60zm-520 70h360v256c0 7.7-6.3 14-14 14H346c-7.7 0-14-6.3-14-14V182zm510 630c0 16.6-13.4 30-30 30H212c-16.6 0-30-13.4-30-30V212c0-16.6 13.4-30 30-30h50v300c0 16.6 13.4 30 30 30h440c16.6 0 30-13.4 30-30V182h50c16.6 0 30 13.4 30 30v600z"/></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/seed-peer/download-port.svg b/public/icons/cluster/seed-peer/download-port.svg
deleted file mode 100644
index 7c425c6..0000000
--- a/public/icons/cluster/seed-peer/download-port.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
-<svg width="175px" height="175px" viewBox="0 0 175 175" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M131.25,0 L131.25,29.1812501 L175,29.1812501 L175,175 L131.25,175 L131.25,145.833333 L145.833333,145.833333 L145.833333,58.3479168 L29.1812501,58.3479168 L29.1812501,145.833333 L43.7645834,145.833333 L43.7645834,175 L0,175 L0,29.1812501 L43.7645834,29.1812501 L43.7645834,0 L131.25,0 Z M101.103641,73 C102.543065,73 103.720775,74.72 103.720775,76.8222222 L103.720775,109.024444 C103.720775,111.126667 104.898485,112.846667 106.337909,112.846667 L113.731313,112.846667 C116.086734,112.846667 117.199016,116.955556 115.563307,119.344444 L89.1956798,157.853333 C88.1488261,159.382222 86.5131172,159.382222 85.4662635,157.853333 L59.0986359,119.344444 C57.462927,116.86 58.6406374,112.751111 60.9960582,112.751111 L68.3894625,112.751111 C69.8288863,112.751111 71.0065967,111.031111 71.0065967,108.928889 L71.0065967,76.8222222 C71.0065967,74.72 72.1843071,73 73.623731,73 L101.103641,73 Z" id="形状" fill="#919EAB" fill-rule="nonzero"></path>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/seed-peer/object-storage-port.svg b/public/icons/cluster/seed-peer/object-storage-port.svg
deleted file mode 100644
index 5ff105b..0000000
--- a/public/icons/cluster/seed-peer/object-storage-port.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
-<svg width="201px" height="199.9468px" viewBox="0 0 201 199.9468" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="编组" fill="#515151" fill-rule="nonzero">
-            <path d="M87.8699189,100.841487 C86.9908119,100.835062 86.1310924,100.582443 85.3882506,100.112277 L2.84631659,53.0664321 C0.450439308,51.6282501 -0.393070387,48.5616096 0.930247957,46.1004261 C2.2535663,43.6392426 5.27690485,42.6517122 7.79789178,43.8572081 L90.3045414,91.2676579 C92.8047171,92.6580408 93.747559,95.7834836 92.4333658,98.3245345 C91.6149754,100.060599 89.7748928,101.07549 87.8699189,100.841487 L87.8699189,100.841487 Z" id="路径"></path>
-            <path d="M88.2227629,100.841487 C86.2992891,100.767469 84.5528176,99.6982009 83.6122701,98.0187366 C82.2847186,95.4789349 83.2304798,92.3438148 85.7410945,90.9618599 L171.105779,43.1985663 C173.626766,41.9930704 176.650105,42.9806008 177.973423,45.4417843 C179.296741,47.9029678 178.453232,50.9696083 176.057354,52.4077903 L90.6926697,100.171084 C89.9859473,100.703316 89.1015979,100.943354 88.2227629,100.841487 L88.2227629,100.841487 Z" id="路径"></path>
-            <path d="M173.211081,53.0781937 C172.346925,53.0086596 171.504302,52.7730446 170.729412,52.3842675 L86.0468926,9.92539288 C83.6140232,8.4892725 82.5667754,5.51131695 83.5652242,2.86851631 C84.9881435,0.419638144 87.9795752,-0.632348714 90.6221008,0.386847954 L175.304621,42.8457226 C177.753499,44.2686419 178.805486,47.2600736 177.786289,49.9025991 C177.159075,51.8928272 175.258862,53.201647 173.175796,53.0781937 L173.211081,53.0781937 Z" id="路径"></path>
-            <path d="M6.76288319,52.7253499 C4.32945482,52.7115243 2.232814,51.007825 1.72138815,48.6287058 C1.2099623,46.2495865 2.42127443,43.8347953 4.63405878,42.8221995 L86.1056998,0.669122954 C87.3618232,0.00847818194 88.8362891,-0.0993674473 90.1751718,0.371472964 C91.5140544,0.842313376 92.5964618,1.84932613 93.1625765,3.15079131 C93.8494849,4.40219308 93.9713816,5.88678808 93.4977966,7.23347535 C93.0242115,8.58016262 91.9999005,9.66167452 90.6809082,10.2076679 L9.24455155,51.9961392 C8.49892564,52.4601233 7.64098733,52.712219 6.76288319,52.7253499 L6.76288319,52.7253499 Z M88.610891,199.884751 C87.6208075,199.823733 86.6511461,199.57633 85.752856,199.155541 L3.9401326,149.298707 C1.40681912,147.736497 0.619584171,144.416419 2.18179413,141.883106 C3.74400408,139.349792 7.06408182,138.562557 9.5973953,140.124767 L91.4336416,190.028647 C93.8826878,191.657721 94.6577492,194.901687 93.2096223,197.46189 C92.2337351,199.06103 90.4713571,200.009657 88.5991295,199.943559 L88.610891,199.884751 Z" id="形状"></path>
-            <path d="M89.9987433,199.884751 C88.0752696,199.810733 86.328798,198.741465 85.3882506,197.062 C84.0606991,194.522199 85.0064604,191.387079 87.5170752,190.005124 L116.191517,174.091867 C118.712504,172.886372 121.735842,173.873902 123.05916,176.335085 C124.382478,178.796269 123.538969,181.862909 121.143092,183.301091 L92.4686502,199.214348 C91.762288,199.757872 90.8728154,200.006587 89.986982,199.908274 L89.9987433,199.884751 Z M173.587447,78.5417569 C170.689185,78.4675649 168.357221,76.1356001 168.283029,73.237338 L168.283029,48.8205448 C168.468886,46.0342268 170.783176,43.8691652 173.575686,43.8691652 C176.368196,43.8691652 178.682486,46.0342268 178.868344,48.8205448 L178.868344,73.2020536 C178.812693,76.1140848 176.475523,78.4668011 173.563925,78.5417569 L173.587447,78.5417569 Z" id="形状"></path>
-            <path d="M89.9987433,199.884751 C87.1004812,199.810559 84.7685165,197.478594 84.6943244,194.580332 L84.6943244,96.525031 C84.8801818,93.738713 87.1944721,91.5736513 89.9869819,91.5736513 C92.7794917,91.5736513 95.093782,93.738713 95.2796394,96.525031 L95.2796394,194.521525 C95.2054474,197.419787 92.8734826,199.751752 89.9752205,199.825944 L89.9987433,199.884751 Z M5.31622342,148.945863 C2.41796128,148.871671 0.0859965559,146.539706 0.0118044786,143.641444 L0.0118044786,51.2904517 C-0.119941777,49.3153518 0.859032399,47.4312189 2.55092548,46.4036615 C4.24281856,45.3761041 6.36610543,45.3761041 8.05799852,46.4036615 C9.7498916,47.4312189 10.7288658,49.3153518 10.5971195,51.2904517 L10.5971195,143.570875 C10.5534995,146.487987 8.20945885,148.84762 5.29270057,148.910579 L5.31622342,148.945863 Z M69.7925533,121.353475 C68.8184527,121.288009 67.8632287,121.053183 66.9698025,120.659549 L27.2748713,97.7011771 C26.005596,97.0001317 25.0914907,95.795563 24.7579187,94.384445 C24.2148943,92.2329076 25.0407051,89.9679304 26.8411112,88.6708079 C28.6415172,87.3736854 31.0514338,87.3074469 32.9203726,88.5037146 L72.591781,111.497371 C73.8610563,112.198416 74.7751616,113.402985 75.1087336,114.814103 C75.4311145,116.228455 75.1681265,117.713065 74.379523,118.930614 C73.4165895,120.518717 71.6590659,121.449436 69.8043146,121.353475 L69.7925533,121.353475 Z" id="形状"></path>
-            <path d="M131,130 C128.6,130 127,128 127,125 L127,120 C127,117 128.6,115 131,115 C133.4,115 135,117 135,120 L135,125 C135,128 133.4,130 131,130 Z M147,130 C144.6,130 143,128 143,125 L143,120 C143,117 144.6,115 147,115 C149.4,115 151,117 151,120 L151,125 C151,128 149.4,130 147,130 Z M164,130 C161.6,130 160,128 160,125 L160,120 C160,117 161.6,115 164,115 C166.4,115 168,117 168,120 L168,125 C168,128 166.4,130 164,130 Z M181,130 C178.6,130 177,128 177,125 L177,120 C177,117 178.6,115 181,115 C183.4,115 185,117 185,120 L185,125 C185,128 183.4,130 181,130 Z" id="形状"></path>
-            <path d="M172.125,165 L139.875,165 C136.875,165 133.875,163.027778 132.75,159.872222 L127.125,145.277778 L118.5,145.277778 C114.375,145.277778 111,141.727778 111,137.388889 L111,101.888889 C111,97.55 114.375,94 118.5,94 L193.5,94 C197.625,94 201,97.55 201,101.888889 L201,137.388889 C201,141.727778 197.625,145.277778 193.5,145.277778 L184.875,145.277778 L179.25,159.872222 C178.125,163.027778 175.125,165 172.125,165 Z M119,101 L119,136.357143 L127.625,136.357143 C130.625,136.357143 133.625,138.321428 134.75,141.464286 L140.375,156 L172.625,156 L178.25,141.464286 C179.375,138.321429 182,136.357143 185.375,136.357143 L194,136.357143 L194,101 L119,101 Z" id="形状"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/seed-peer/port.svg b/public/icons/cluster/seed-peer/port.svg
deleted file mode 100644
index 5257369..0000000
--- a/public/icons/cluster/seed-peer/port.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1732867295209" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="58870" width="200" height="200"><path d="M960 865.7c0 51.9-42.4 94.3-94.3 94.3H158.3c-51.9 0-94.3-42.4-94.3-94.3V323.4c0-51.9 42.4-94.3 94.3-94.3h113.2l63.7-134.4C342.3 75.8 361.1 64 380 64h264c21.2 0 37.7 11.8 44.8 30.7l63.7 134.4h113.2c51.9 0 94.3 42.4 94.3 94.3v542.3z m-104.2-80.6V427.5c0-25.9-21.2-47.2-47.2-47.2H215.3c-25.9 0-47.2 21.2-47.2 47.2v357.6c0 25.9 21.2 47.2 47.2 47.2h593.4c25.9 0 47.1-21.3 47.1-47.2z m-108-84.5c0 14.1-9.4 23.6-23.6 23.6h-35.4v-82.5c0-18.9-16.5-35.4-35.4-35.4S618 622.8 618 641.7v82.5h-70.7v-82.5c0-18.9-16.5-35.4-35.4-35.4s-35.4 16.5-35.4 35.4v82.5h-70.7v-82.5c0-18.9-16.5-35.4-35.4-35.4S335 622.8 335 641.7v82.5h-35.4c-14.1 0-23.6-9.4-23.6-23.6V512c0-14.1 9.4-23.6 23.6-23.6H724c14.1 0 23.6 9.4 23.6 23.6v188.6z" fill="#919EAB" p-id="58871"></path></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/seed-peer/seed-peer-download-port.svg b/public/icons/cluster/seed-peer/seed-peer-download-port.svg
deleted file mode 100644
index 7317f0c..0000000
--- a/public/icons/cluster/seed-peer/seed-peer-download-port.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-
-<svg width="168.842561px" height="157.5px" viewBox="0 0 168.842561 157.5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <polygon id="路径" fill="#515151" fill-rule="nonzero" points="91.5603161 53 91.5603161 109.599416 117.520383 85.7060223 127.75 95.1126608 84.4188852 135 84.2548253 134.840415 84.0811148 135 40.75 95.1126608 50.9892679 85.7148881 77.0844426 109.714672 77.0844426 53"></polygon>
-        <g id="编组" fill="#515151" fill-rule="nonzero">
-            <path d="M154.630057,157.5 L15.2095138,157.5 C7.12191517,157.5 0,150.565299 0,142.690299 L0,61.0018657 C0,53.1268657 7.12191517,46.1921642 15.2095138,46.1921642 L19.1929578,46.1921642 L19.1929578,37.3768657 C19.1929578,28.5615672 26.314873,21.6268657 35.368155,21.6268657 L48.5255915,21.6268657 L48.5255915,13.7518657 C48.5255915,5.87686567 54.5611128,0 62.6487114,0 L106.104465,0 C114.192064,0 120.227585,5.87686567 120.227585,13.7518657 L120.227585,21.6268657 L133.385021,21.6268657 C142.438303,21.6268657 149.560219,28.5615672 149.560219,37.3768657 L149.560219,46.1921642 L153.543663,46.1921642 C161.631261,46.1921642 168.753176,53.1268657 168.753176,61.0018657 L168.753176,142.690299 C169.71886,150.565299 162.717655,157.5 154.630057,157.5 Z M15.2095138,57.1231343 C13.1574365,57.1231343 11.2260697,59.1212687 11.2260697,61.0018657 L11.2260697,142.690299 C11.2260697,144.688433 13.2781469,146.56903 15.2095138,146.56903 L154.630057,146.56903 C156.682134,146.56903 158.613501,144.570896 158.613501,142.690299 L158.613501,61.0018657 C158.613501,59.0037313 156.561423,57.1231343 154.630057,57.1231343 L145.576775,57.1231343 C142.559014,57.1231343 140.506937,55.125 140.506937,52.1865672 L140.506937,37.3768657 C140.506937,34.4384328 138.454859,31.5 134.471415,31.5 L115.278457,31.5 C112.260697,31.5 110.20862,29.5018657 110.20862,26.5634328 L110.20862,13.7518657 C110.20862,11.7537313 108.156542,9.87313433 106.225175,9.87313433 L63.6143948,9.87313433 C61.5623176,10.8134328 59.6309508,11.8712687 59.6309508,13.7518657 L59.6309508,26.5634328 C59.6309508,29.5018657 57.5788735,31.5 54.5611128,31.5 L35.368155,31.5 C32.3503943,32.4402985 30.2983171,34.4384328 30.2983171,37.3768657 L30.2983171,51.1287313 C30.2983171,54.0671642 28.2462398,56.0652985 25.2284792,56.0652985 C24.2627958,57.1231343 15.2095138,57.1231343 15.2095138,57.1231343 Z" id="形状"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/seed-peer/seed-peer-type.svg b/public/icons/cluster/seed-peer/seed-peer-type.svg
deleted file mode 100644
index 4678f17..0000000
--- a/public/icons/cluster/seed-peer/seed-peer-type.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1734590607204" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="58368" width="200" height="200"><path d="M161.066667 128c-18.24 0-33.066667 14.826667-33.066667 33.066667v285.866666c0 18.24 14.826667 33.066667 33.066667 33.066667h285.866666c18.24 0 33.066667-14.826667 33.066667-33.066667V161.066667c0-18.24-14.826667-33.066667-33.066667-33.066667H161.066667z m254.933333 288H192V192h224v224zM128 862.933333c0 18.24 14.826667 33.066667 33.066667 33.066667h285.866666c18.24 0 33.066667-14.826667 33.066667-33.066667V577.066667c0-18.24-14.826667-33.066667-33.066667-33.066667H161.066667c-18.24 0-33.066667 14.826667-33.066667 33.066667v285.866666z m64-254.933333h224v224H192V608zM577.066667 128c-18.24 0-33.066667 14.826667-33.066667 33.066667v285.866666c0 18.24 14.826667 33.066667 33.066667 33.066667h285.866666c18.24 0 33.066667-14.826667 33.066667-33.066667V161.066667c0-18.24-14.826667-33.066667-33.066667-33.066667H577.066667z m254.933333 288H608V192h224v224zM743.36 514.133333c-6.293333-6.293333-14.506667-9.706667-23.36-9.706666s-17.173333 3.413333-23.36 9.706666L514.133333 696.64c-6.293333 6.293333-9.706667 14.506667-9.706666 23.36s3.413333 17.173333 9.706666 23.36L696.64 925.866667c6.293333 6.293333 14.506667 9.706667 23.36 9.706666s17.173333-3.413333 23.36-9.706666L925.866667 743.36c6.293333-6.293333 9.706667-14.506667 9.706666-23.36s-3.413333-17.173333-9.706666-23.36L743.36 514.133333zM720 858.773333L581.226667 720 720 581.226667 858.773333 720 720 858.773333z" p-id="58369" fill="#515151"></path></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/statistics.svg b/public/icons/cluster/statistics.svg
deleted file mode 100644
index 89336d6..0000000
--- a/public/icons/cluster/statistics.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#2E8F79" d="M256 960H64V64h192v896zm256-704H320v704h192V256zm256-128H576v832h192V128zm256 256H832v576h192V384z"/></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/tab-cluster.svg b/public/icons/cluster/tab-cluster.svg
deleted file mode 100644
index 3fddc51..0000000
--- a/public/icons/cluster/tab-cluster.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1734008317859" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26236" width="200" height="200"><path d="M914.1990408 699.69288571h-53.62653877v-160.87961632h-321.75923264v-107.25307754H619.25307755a80.43980815 80.43980815 0 0 0 80.43980816-80.43980818V136.61422861A80.43980815 80.43980815 0 0 0 619.25307755 56.17442045h-214.5061551A80.43980815 80.43980815 0 0 0 324.30711429 136.61422861v214.50615506a80.43980815 80.43980815 0 0 0 80.43980816 80.43980818h80.43980816v107.25307754h-321.75923264v160.87961632h-53.62653877a53.62653878 53.62653878 0 0 0-53.62653875 53.62653877v160.87961632a53.62653878 53.62653878 0 0 0 53.62653875 53.62653875h160.87961632a53.62653878 53.62653878 0 0 0 53.62653877-53.62653875v-160.87961632a53.62653878 53.62653878 0 0 0-53.62653877-53.62653877h-53.62653877v-107.25307756h268.13269386v107.25307756h-53.62653876a53.62653878 53.62653878 0 0 0-53.62653879 53.62653877v160.87961632a53.62653878 53.62653878 0 0 0 53.62653879 53.62653875h160.8796163a53.62653878 53.62653878 0 0 0 53.62653879-53.62653875v-160.87961632a53.62653878 53.62653878 0 0 0-53.62653879-53.62653877h-53.62653876v-107.25307756h268.13269386v107.25307756h-53.62653877a53.62653878 53.62653878 0 0 0-53.62653877 53.62653877v160.87961632a53.62653878 53.62653878 0 0 0 53.62653877 53.62653875h160.87961632a53.62653878 53.62653878 0 0 0 53.62653875-53.62653875v-160.87961632a53.62653878 53.62653878 0 0 0-53.62653875-53.62653877z" p-id="26237" fill="#919EAB"></path></svg>
\ No newline at end of file
diff --git a/public/icons/cluster/unfoldMore.svg b/public/icons/cluster/unfoldMore.svg
deleted file mode 100644
index 6717ad9..0000000
--- a/public/icons/cluster/unfoldMore.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024"><path fill="#707070" d="m521.062 948.736 299.674-299.648a12.8 12.8 0 0 0 0-18.125l-54.323-54.272a12.8 12.8 0 0 0-18.1 0L512 812.928 275.66 576.64a12.8 12.8 0 0 0-18.098 0l-54.324 54.272a12.8 12.8 0 0 0 0 18.125l299.7 299.699a12.8 12.8 0 0 0 18.124 0zM275.661 447.36 512 211.02l236.34 236.34a12.8 12.8 0 0 0 18.098 0l54.324-54.298a12.8 12.8 0 0 0 0-18.124l-299.7-299.674a12.8 12.8 0 0 0-18.124 0L203.264 374.938a12.8 12.8 0 0 0 0 18.124l54.323 54.272a12.8 12.8 0 0 0 18.1 0z"/></svg>
\ No newline at end of file
diff --git a/public/icons/insight/insight.svg b/public/icons/insight/insight.svg
deleted file mode 100644
index ad034ff..0000000
--- a/public/icons/insight/insight.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg t="1695816714607" class="icon" viewBox="0 0 1105 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9162"
-    width="64" height="64">
-    <path
-        d="M1105.829941 959.086308a61.926477 61.926477 0 0 0-18.799109-44.970418l-89.572225-89.572225a63.400917 63.400917 0 1 0-88.097785 91.046665l89.572225 89.940836a63.032307 63.032307 0 0 0 44.970418 18.430499 64.506747 64.506747 0 0 0 44.970417-18.430499 61.926477 61.926477 0 0 0 16.956059-46.444858z"
-        fill="#2c2c2c" p-id="9163"></path>
-    <path
-        d="M25.434089 584.947178a25.065479 25.065479 0 0 1-25.434089-24.328259 26.171309 26.171309 0 0 1 25.434089-25.802698H140.071793l112.794654-190.20275a25.434089 25.434089 0 0 1 34.649338-9.21525 23.591039 23.591039 0 0 1 9.215249 8.84664l110.582994 176.19557 54.922887-57.503157a25.434089 25.434089 0 0 1 36.860998 0 22.853819 22.853819 0 0 1 5.52915 8.10942l63.769527 128.276273 78.882536-331.748982a25.434089 25.434089 0 0 1 30.963238-18.799109 23.959649 23.959649 0 0 1 12.164129 7.003589l116.112144 117.586584a26.060726 26.060726 0 0 1-36.860998 36.860998l-83.674465-84.411685-84.780296 356.814461a22.853819 22.853819 0 0 1-13.638569 16.956059 24.696869 24.696869 0 0 1-33.174898-9.21525v-1.84305l-78.882536-159.976731-51.974008 53.817057a15.850229 15.850229 0 0 1-5.897759 5.16054 25.802699 25.802699 0 0 1-36.860998-8.10942l-105.422455-172.509471-98.418864 165.137272a23.959649 23.959649 0 0 1-22.485209 13.638569z"
-        fill="#2c2c2c" p-id="9164"></path>
-    <path
-        d="M583.140989 1.437579a462.605525 462.605525 0 0 0-396.255729 170.666421 32.437678 32.437678 0 0 0 25.802699 52.711227 32.806288 32.806288 0 0 0 25.434088-12.532739c8.47803-10.321079 17.693279-20.273549 27.277139-30.226019a399.941829 399.941829 0 0 1 565.0791 0A399.573219 399.573219 0 1 1 265.399186 747.135569c-9.583859-9.952469-18.799109-19.904939-27.277139-30.594628a32.806288 32.806288 0 0 0-25.434088-12.532739 32.437678 32.437678 0 0 0-25.802699 52.711227c10.321079 12.532739 21.010769 24.696869 32.437678 36.860998A464.448575 464.448575 0 1 0 583.140989 1.437579z"
-        fill="#2c2c2c" p-id="9165"></path>
-</svg>
\ No newline at end of file
diff --git a/public/icons/insight/selected-insight.svg b/public/icons/insight/selected-insight.svg
deleted file mode 100644
index e1bd7d2..0000000
--- a/public/icons/insight/selected-insight.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg t="1695816714607" class="icon" viewBox="0 0 1105 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9162"
-    width="64" height="64">
-    <path
-        d="M1105.829941 959.086308a61.926477 61.926477 0 0 0-18.799109-44.970418l-89.572225-89.572225a63.400917 63.400917 0 1 0-88.097785 91.046665l89.572225 89.940836a63.032307 63.032307 0 0 0 44.970418 18.430499 64.506747 64.506747 0 0 0 44.970417-18.430499 61.926477 61.926477 0 0 0 16.956059-46.444858z"
-        fill="#2e8f79" p-id="9163"></path>
-    <path
-        d="M25.434089 584.947178a25.065479 25.065479 0 0 1-25.434089-24.328259 26.171309 26.171309 0 0 1 25.434089-25.802698H140.071793l112.794654-190.20275a25.434089 25.434089 0 0 1 34.649338-9.21525 23.591039 23.591039 0 0 1 9.215249 8.84664l110.582994 176.19557 54.922887-57.503157a25.434089 25.434089 0 0 1 36.860998 0 22.853819 22.853819 0 0 1 5.52915 8.10942l63.769527 128.276273 78.882536-331.748982a25.434089 25.434089 0 0 1 30.963238-18.799109 23.959649 23.959649 0 0 1 12.164129 7.003589l116.112144 117.586584a26.060726 26.060726 0 0 1-36.860998 36.860998l-83.674465-84.411685-84.780296 356.814461a22.853819 22.853819 0 0 1-13.638569 16.956059 24.696869 24.696869 0 0 1-33.174898-9.21525v-1.84305l-78.882536-159.976731-51.974008 53.817057a15.850229 15.850229 0 0 1-5.897759 5.16054 25.802699 25.802699 0 0 1-36.860998-8.10942l-105.422455-172.509471-98.418864 165.137272a23.959649 23.959649 0 0 1-22.485209 13.638569z"
-        fill="#2e8f79" p-id="9164"></path>
-    <path
-        d="M583.140989 1.437579a462.605525 462.605525 0 0 0-396.255729 170.666421 32.437678 32.437678 0 0 0 25.802699 52.711227 32.806288 32.806288 0 0 0 25.434088-12.532739c8.47803-10.321079 17.693279-20.273549 27.277139-30.226019a399.941829 399.941829 0 0 1 565.0791 0A399.573219 399.573219 0 1 1 265.399186 747.135569c-9.583859-9.952469-18.799109-19.904939-27.277139-30.594628a32.806288 32.806288 0 0 0-25.434088-12.532739 32.437678 32.437678 0 0 0-25.802699 52.711227c10.321079 12.532739 21.010769 24.696869 32.437678 36.860998A464.448575 464.448575 0 1 0 583.140989 1.437579z"
-        fill="#2e8f79" p-id="9165"></path>
-</svg>
\ No newline at end of file
diff --git a/public/icons/job/preheat/created-at.svg b/public/icons/job/preheat/created-at.svg
deleted file mode 100644
index 90a4cce..0000000
--- a/public/icons/job/preheat/created-at.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1694488945708" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="39963" width="64" height="64"><path d="M512 895.936c-211.776 0-384-172.224-384-384C128 300.224 300.16 128 512 128c211.648 0 384 172.288 384 384a32 32 0 1 0 64 0C960 264.96 759.04 64 512 64 265.216 64 64 264.96 64 512c0 246.912 201.024 447.936 448 447.936a32 32 0 0 0 0-64zM512 190.912a32 32 0 0 0-32.064 32.064v275.776L361.28 617.344a32 32 0 0 0 45.312 45.248L534.208 535.04a30.912 30.912 0 0 0 5.184-6.72s0-0.128 0.128-0.128l0.64-1.152c0-0.128 0.128-0.128 0.128-0.192l0.64-1.216v-0.192c0.256-0.448 0.512-0.832 0.512-1.216 0-0.064 0.192-0.064 0.192-0.192l0.448-1.28 0.128-0.256c0.064-0.384 0.32-0.768 0.384-1.28l0.128-0.192 0.256-1.28c0-0.128 0-0.192 0.128-0.192a26.24 26.24 0 0 0 0.384-1.664c0.128-0.32 0.128-0.768 0.192-1.152 0-0.192 0-0.32 0.128-0.512l0.064-1.088c0-0.256 0-0.448 0.128-0.704l0.064-0.832v-290.56a32.128 32.128 0 0 0-32.064-32z m415.552 544.96h-127.872v-128a32 32 0 1 0-64.064 0v128h-128a32 32 0 1 0 0 64.064h128.064v128a32 32 0 0 0 64 0v-128.064h128.064a32 32 0 0 0 32.064-32.064 32.32 32.32 0 0 0-32.256-31.936z" fill="#515151" p-id="39964"></path></svg>
\ No newline at end of file
diff --git a/public/icons/job/preheat/detail.svg b/public/icons/job/preheat/detail.svg
deleted file mode 100644
index ae86f2c..0000000
--- a/public/icons/job/preheat/detail.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1690881157905" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1010" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M512 0C228.693333 0 0 228.693333 0 512s228.693333 512 512 512 512-228.693333 512-512S795.306667 0 512 0m49.493333 738.986667H291.84c-20.48 0-35.84-18.773333-35.84-42.666667s17.066667-42.666667 35.84-42.666667h267.946667c20.48 0 35.84 18.773333 35.84 42.666667 1.706667 23.893333-15.36 42.666667-34.133334 42.666667m168.96-184.32H293.546667C273.066667 554.666667 256 535.893333 256 512s17.066667-42.666667 37.546667-42.666667h435.2c20.48 0 37.546667 18.773333 37.546666 42.666667s-15.36 42.666667-35.84 42.666667m0-184.32H293.546667c-20.48 0-37.546667-18.773333-37.546667-42.666667s17.066667-42.666667 37.546667-42.666667h435.2c20.48 0 37.546667 18.773333 37.546666 42.666667 1.706667 22.186667-15.36 42.666667-35.84 42.666667" fill="#1C293A" p-id="1011"></path></svg>
\ No newline at end of file
diff --git a/public/icons/job/preheat/failure.svg b/public/icons/job/preheat/failure.svg
deleted file mode 100644
index 977efa8..0000000
--- a/public/icons/job/preheat/failure.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg t="1693299916783" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2887"
-    width="64" height="64">
-    <path
-        d="M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m-86.474667 296.96a30.570667 30.570667 0 1 0-43.232 43.232L468.768 512l-86.474667 86.474667a30.570667 30.570667 0 1 0 43.232 43.232L512 555.232l86.474667 86.474667a30.570667 30.570667 0 1 0 43.232-43.232L555.232 512l86.474667-86.474667a30.570667 30.570667 0 1 0-43.232-43.232L512 468.768z"
-        fill="#d81e06" p-id="2888"></path>
-</svg>
\ No newline at end of file
diff --git a/public/icons/job/preheat/filter.svg b/public/icons/job/preheat/filter.svg
deleted file mode 100644
index dc37724..0000000
--- a/public/icons/job/preheat/filter.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1694488862258" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="36069" width="64" height="64"><path d="M844.653714 121.904762C889.831619 121.904762 926.47619 159.061333 926.47619 204.897524c0 19.139048-6.534095 37.692952-18.480761 52.516571L654.409143 572.001524V926.47619l-69.485714-31.987809V527.043048L844.653714 204.897524H179.346286l255.951238 328.289524V825.539048l-74.044953-34.084572V571.977143L115.175619 256.365714a83.772952 83.772952 0 0 1 13.409524-116.565333A81.115429 81.115429 0 0 1 179.370667 121.904762h665.307428z" p-id="36070" fill="#515151"></path></svg>
\ No newline at end of file
diff --git a/public/icons/job/preheat/id.svg b/public/icons/job/preheat/id.svg
deleted file mode 100644
index f2f864a..0000000
--- a/public/icons/job/preheat/id.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1694488637106" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28840" width="64" height="64"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32z m-40 632H136V232h752v560z" p-id="28841" fill="#515151"></path><path d="M610.3 476h123.4c1.3 0 2.3-3.6 2.3-8v-48c0-4.4-1-8-2.3-8H610.3c-1.3 0-2.3 3.6-2.3 8v48c0 4.4 1 8 2.3 8zM615.1 620h185.7c3.9 0 7.1-3.6 7.1-8v-48c0-4.4-3.2-8-7.1-8H615.1c-3.9 0-7.1 3.6-7.1 8v48c0 4.4 3.2 8 7.1 8zM224 673h43.9c4.2 0 7.6-3.3 7.9-7.5 3.8-50.5 46-90.5 97.2-90.5s93.4 40 97.2 90.5c0.3 4.2 3.7 7.5 7.9 7.5H522c4.6 0 8.2-3.8 8-8.4-2.8-53.3-32-99.7-74.6-126.1 18.1-19.9 29.1-46.4 29.1-75.5 0-61.9-49.9-112-111.4-112s-111.4 50.1-111.4 112c0 29.1 11 55.5 29.1 75.5-42.7 26.5-71.8 72.8-74.6 126.1-0.4 4.6 3.2 8.4 7.8 8.4z m149-262c28.5 0 51.7 23.3 51.7 52s-23.2 52-51.7 52-51.7-23.3-51.7-52 23.2-52 51.7-52z" p-id="28842" fill="#515151"></path></svg>
\ No newline at end of file
diff --git a/public/icons/job/preheat/pending.svg b/public/icons/job/preheat/pending.svg
deleted file mode 100644
index 1e68bb8..0000000
--- a/public/icons/job/preheat/pending.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg width="16" height="16" fill="none" class="anim-rotate mr-3 flex-shrink-0 ml-1" xmlns="http://www.w3.org/2000/svg">
-    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 0" to="360 0 0" dur="0.8s"
-        repeatCount="indefinite" />
-    <path opacity=".5" d="M8 15A7 7 0 108 1a7 7 0 000 14v0z" stroke="#DBAB0A" stroke-width="2"></path>
-    <path d="M15 8a7 7 0 01-7 7" stroke="#DBAB0A" stroke-width="2"></path>
-    <path d="M8 12a4 4 0 100-8 4 4 0 000 8z" fill="#DBAB0A"></path>
-</svg>
\ No newline at end of file
diff --git a/public/icons/job/preheat/selected-job.svg b/public/icons/job/preheat/selected-job.svg
deleted file mode 100644
index b0ae812..0000000
--- a/public/icons/job/preheat/selected-job.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg t="1693465155383" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2331"
-    width="64" height="64">
-    <path
-        d="M224 800.256L223.712 224H320v31.68c0 35.456 28.64 64.32 63.872 64.32h256.256A64.16 64.16 0 0 0 704 255.68V224l96-0.256L800.256 800 224 800.256zM640 192.32L640.128 256 384 255.68V192.32L383.872 192 640 192.32zM799.84 160H695.04c-11.072-19.04-31.424-32-54.912-32h-256.256c-23.488 0-43.808 12.928-54.912 32H223.712A63.776 63.776 0 0 0 160 223.744v576.512C160 835.392 188.608 864 223.744 864h576.512A63.84 63.84 0 0 0 864 800.256V223.744A64 64 0 0 0 799.84 160z"
-        fill="#2e8f79" p-id="2332"></path>
-    <path
-        d="M619.072 429.088l-151.744 165.888-62.112-69.6a32 32 0 1 0-47.744 42.624l85.696 96a32 32 0 0 0 23.68 10.688h0.192c8.96 0 17.536-3.776 23.616-10.4l175.648-192a32 32 0 0 0-47.232-43.2"
-        fill="#2e8f79" p-id="2333"></path>
-</svg>
\ No newline at end of file
diff --git a/public/icons/job/task/clear-cache.svg b/public/icons/job/task/clear-cache.svg
deleted file mode 100644
index 14e0bf4..0000000
--- a/public/icons/job/task/clear-cache.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1734621890610" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="86832" width="200" height="200"><path d="M189.824 574.464h679.168c22.4 0 33.088-15.872 23.488-35.328L812.352 376.32c-9.6-19.456-35.776-35.328-58.176-35.328H613.76v-238.08c0-21.504-18.176-38.912-41.088-38.912H491.52c-22.4 0-41.152 17.408-41.152 38.912v238.592H305.152c-22.4 0-48.64 15.872-58.24 35.328l-80 162.816c-10.24 18.944 0.512 34.816 22.912 34.816z m660.992 57.856H224c3.2 60.416 2.112 132.608-50.176 175.616-73.152 59.904-48.64 125.952 3.2 152.064h106.24c10.688-13.824 68.352-91.648 84.928-170.496 2.624-16.384 4.224-27.136 4.224-27.136-0.512 9.216-2.112 17.92-4.224 27.136-8.064 50.176-26.24 153.6-39.552 170.496h76.864c10.688-13.824 68.352-91.648 84.928-170.496 2.688-16.384 4.288-27.136 4.288-27.136-0.576 9.216-2.176 17.92-4.288 27.136-8 50.176-26.176 153.6-39.488 170.496h97.152c10.688-13.824 68.352-91.648 84.864-170.496 2.688-16.384 4.288-27.136 4.288-27.136-0.512 9.216-2.112 17.92-4.288 27.136-8 50.176-26.112 153.6-39.488 170.496h97.152c10.688-13.824 68.352-91.648 84.928-170.496 2.624-16.384 4.224-27.136 4.224-27.136-0.512 9.216-2.112 17.92-4.224 27.136-8 50.176-26.176 153.6-39.552 170.496h98.24s64.64-22.016 54.464-93.696c-12.8-101.376-18.688-158.208-37.888-233.984z" fill="#919EAB" p-id="86833"></path></svg>
\ No newline at end of file
diff --git a/public/icons/job/task/error-log.svg b/public/icons/job/task/error-log.svg
deleted file mode 100644
index 77f907e..0000000
--- a/public/icons/job/task/error-log.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1730701461286" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19549" width="200" height="200"><path d="M851.2 115.2v-32c-12.8-19.2-44.8-32-64-32H108.8C70.4 51.2 32 89.6 32 128v800c12.8 19.2 19.2 38.4 44.8 38.4H512C448 908.8 396.8 825.6 390.4 736H217.6c-25.6 0-44.8-19.2-44.8-44.8s19.2-32 44.8-32h172.8c6.4-38.4 12.8-76.8 32-108.8H217.6c-19.2 0-38.4-19.2-38.4-38.4 0-25.6 12.8-44.8 38.4-44.8h275.2c57.6-57.6 147.2-89.6 236.8-89.6 44.8 0 83.2 12.8 121.6 25.6v-288zM704 320c0 25.6-12.8 38.4-38.4 38.4h-448c-25.6 0-38.4-19.2-38.4-38.4 0-25.6 12.8-38.4 38.4-38.4h448c25.6 0 38.4 12.8 38.4 38.4z m160 172.8c-38.4-19.2-76.8-32-128-32-25.6 0-57.6 6.4-83.2 12.8-44.8 19.2-83.2 44.8-115.2 83.2-25.6 32-44.8 70.4-51.2 115.2 0 12.8-6.4 32-6.4 51.2v32c12.8 121.6 108.8 211.2 230.4 224h51.2c32 0 57.6-12.8 89.6-25.6 83.2-38.4 147.2-128 147.2-230.4C992 620.8 940.8 537.6 864 492.8z m-128 384c-19.2 0-32-12.8-32-32s12.8-32 32-32 32 12.8 32 32-12.8 32-32 32z m32-134.4c0 19.2-12.8 32-32 32s-32-12.8-32-32V595.2c0-19.2 19.2-38.4 38.4-38.4 12.8 0 19.2 6.4 25.6 12.8 0 6.4 6.4 12.8 6.4 25.6L768 742.4z" p-id="19550" fill="#2c2c2c"></path></svg>
\ No newline at end of file
diff --git a/public/icons/job/task/executions.svg b/public/icons/job/task/executions.svg
deleted file mode 100644
index a724275..0000000
--- a/public/icons/job/task/executions.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1734622047782" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="99745" width="200" height="200"><path d="M512 22C241.38 22 22 241.38 22 512s219.38 490 490 490 490-219.38 490-490S782.62 22 512 22z m166.21 533.29h-0.02l-240.7 160.47a52.004 52.004 0 0 1-53.45 2.59 51.972 51.972 0 0 1-27.43-45.94v-320.8a51.994 51.994 0 0 1 27.42-45.96 52 52 0 0 1 53.46 2.58l240.72 160.48A52.016 52.016 0 0 1 701.4 512a52.04 52.04 0 0 1-23.19 43.29z" fill="#919EAB" p-id="99746"></path></svg>
\ No newline at end of file
diff --git a/public/icons/job/task/failure.svg b/public/icons/job/task/failure.svg
deleted file mode 100644
index 2839a1e..0000000
--- a/public/icons/job/task/failure.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1729770117937" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="32879" width="200" height="200"><path d="M512 512m-447.616766 0a438 438 0 1 0 895.233533 0 438 438 0 1 0-895.233533 0Z" fill="#D81E06" p-id="32880"></path></svg>
\ No newline at end of file
diff --git a/public/icons/job/task/hostname.svg b/public/icons/job/task/hostname.svg
deleted file mode 100644
index d7eb382..0000000
--- a/public/icons/job/task/hostname.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1730211671411" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="108226" width="200" height="200"><path d="M907.190857 73.142857H116.955429A43.812571 43.812571 0 0 0 73.142857 117.028571v225.572572c0 24.210286 19.602286 43.885714 43.812572 43.885714H906.971429c24.210286 0 43.812571-19.675429 43.812571-43.885714V117.028571A43.666286 43.666286 0 0 0 907.190857 73.142857z m-26.770286 242.688H143.652571V143.725714h736.694858v172.105143h0.073142z m26.624 160.182857H117.028571a43.885714 43.885714 0 0 0-43.885714 43.885715v226.889142c0 24.137143 19.748571 43.885714 43.885714 43.885715h789.942858a43.885714 43.885714 0 0 0 43.885714-43.885715V519.972571a43.812571 43.812571 0 0 0-43.812572-43.885714z m-26.624 244.077715H143.652571V546.596571h736.694858v173.494858h0.073142z m35.108572 160.182857H108.544a35.254857 35.254857 0 1 0 0 70.582857h807.131429a35.254857 35.254857 0 1 0 0-70.582857z" fill="#515155" p-id="108227"></path><path d="M754.980571 229.814857a35.254857 35.254857 0 1 0 70.509715 0 35.254857 35.254857 0 0 0-70.509715 0z m0 403.529143a35.254857 35.254857 0 1 0 70.509715 0 35.254857 35.254857 0 0 0-70.509715 0z" fill="#515155" p-id="108228"></path></svg>
\ No newline at end of file
diff --git a/public/icons/job/task/no-task.svg b/public/icons/job/task/no-task.svg
deleted file mode 100644
index d13c11c..0000000
--- a/public/icons/job/task/no-task.svg
+++ /dev/null
@@ -1,60 +0,0 @@
-
-<svg width="806.324528px" height="803.599391px" viewBox="0 0 806.324528 803.599391" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <circle id="椭圆形" stroke="#D8D8D8" stroke-width="0.6" cx="400" cy="403.599391" r="399.7"></circle>
-        <circle id="椭圆形" stroke="#D8D8D8" stroke-width="0.6" cx="396" cy="401.599391" r="324.7"></circle>
-        <circle id="椭圆形" stroke="#D8D8D8" stroke-width="0.6" cx="396" cy="403.599391" r="249.7"></circle>
-        <circle id="椭圆形" stroke="#D8D8D8" stroke-width="0.6" cx="397" cy="403.599391" r="174.7"></circle>
-        <circle id="椭圆形" stroke="#D8D8D8" stroke-width="0.6" cx="396" cy="401.599391" r="99.7"></circle>
-        <polygon id="三角形" fill="#FFFFFF" transform="translate(173.8599, 647.7444) rotate(37) translate(-173.8599, -647.7444)" points="173.859896 570.244419 266.859896 725.244419 80.8598958 725.244419"></polygon>
-        <polygon id="三角形" fill="#FFFFFF" transform="translate(401.5235, 97.1085) rotate(181) translate(-401.5235, -97.1085)" points="401.523492 1.60852869 494.523492 192.608529 308.523492 192.608529"></polygon>
-        <polygon id="三角形" fill="#FFFFFF" transform="translate(663, 531.0994) rotate(-57) translate(-663, -531.0994)" points="663 420.599391 756 641.599391 570 641.599391"></polygon>
-        <g id="编组" transform="translate(359, 361.5994)" fill="#1C293A" fill-rule="nonzero">
-            <path d="M27.2338933,9.65435209 L49.6675999,9.65435209 C50.7780889,9.65435209 51.6926408,9.28958291 52.4112558,8.56004453 C53.1293325,7.83050616 53.4883709,6.9016299 53.4883709,5.77341576 L53.4883709,0.000820320511 L23.5116291,0.000820320511 L23.5116291,5.77341576 C23.5116291,6.8349105 23.8709366,7.73042705 24.5895516,8.45996543 C25.3076283,9.1895038 26.1890755,9.58763269 27.2338933,9.65435209 Z M65.9300994,0 L60.5421018,0 L60.5421018,10.2515454 C60.4764307,12.1092979 59.8396355,13.6517739 58.6317164,14.8789734 C57.423259,16.1067198 55.9047474,16.7536792 54.0761818,16.8198518 L22.9238182,16.8198518 C21.0952526,16.7536792 19.5770102,16.1067198 18.3690911,14.8789734 C17.1606336,13.6517739 16.5235693,12.1092979 16.4578982,10.2515454 L16.4578982,0 L11.0699006,0 C7.93544734,0.0661725212 5.32313382,1.16075352 3.23296003,3.28374301 C1.14332452,5.40727937 0.0656711827,8.06128966 0,11.2457739 L0,72.7534058 C0.0656711827,75.9384369 1.14332452,78.5924472 3.23296003,80.7154367 C5.32313382,82.838973 7.93544734,83.9338275 11.0699006,84 L65.9300994,84 C69.0645527,83.9338275 71.6768662,82.838973 73.76704,80.7154367 C75.8566755,78.5924472 76.9343288,75.9384369 77,72.7534058 L77,11.2457739 C76.9343288,8.06074278 75.8566755,5.40673249 73.76704,3.28374301 C71.6768662,1.16075352 69.0645527,0.0661725212 65.9300994,0 Z M47.2186569,59.5175344 L19.789365,59.5175344 C18.8096801,59.4508149 18.0095144,59.0690925 17.3888679,58.3723669 C16.7682214,57.6756414 16.4578982,56.8296175 16.4578982,55.8342953 L16.4578982,55.2371019 C16.4578982,54.2423266 16.7518036,53.3965761 17.3396145,52.6998506 C17.9274254,52.003125 18.7111733,51.5883163 19.6908582,51.4554244 L47.1209576,51.4554244 C48.1006425,51.5215969 48.9008081,51.9030459 49.5214546,52.5997715 C50.1415629,53.296497 50.451617,54.1425209 50.451617,55.1378431 L50.451617,55.7350365 C50.5167499,56.7303587 50.2389931,57.5763826 49.6183465,58.2731081 C48.9982383,58.9698337 48.1983418,59.3846424 47.2186569,59.5175344 L47.2186569,59.5175344 Z M60.5421018,43.4933935 L20.1809698,43.4933935 C19.136152,43.427221 18.2708534,43.0457719 17.585074,42.3490464 C16.8992946,41.6523208 16.5235693,40.7729372 16.4578982,39.7108956 L16.4578982,39.1145226 C16.5235693,38.1192004 16.8992946,37.2564966 17.585074,36.5264114 C18.2708534,35.7963261 19.136152,35.4312835 20.1809698,35.4312835 L60.5421018,35.4312835 C61.5212484,35.4312835 62.3701292,35.7963261 63.0887442,36.5264114 C63.8073592,37.2564966 64.1666667,38.1192004 64.1666667,39.1145226 L64.264366,39.7108956 C64.1992331,40.7729372 63.823777,41.6523208 63.1379976,42.3490464 C62.4522182,43.0457719 61.5869196,43.427221 60.5421018,43.4933935 Z" id="形状"></path>
-        </g>
-        <rect id="矩形" fill="#EEEEEE" x="523" y="307.599391" width="60" height="60" rx="10"></rect>
-        <rect id="矩形" fill="#F3F3F3" x="663" y="240.599391" width="50" height="50" rx="8"></rect>
-        <rect id="矩形" fill="#F8F8F8" x="533" y="94.5993911" width="50" height="50" rx="8"></rect>
-        <rect id="矩形" fill="#F8F8F8" x="126" y="167.599391" width="50" height="50" rx="8"></rect>
-        <rect id="矩形" fill="#F2F2F2" x="658" y="510.599391" width="50" height="50" rx="8"></rect>
-        <rect id="矩形" fill="#F2F2F2" x="114" y="569.599391" width="50" height="50" rx="8"></rect>
-        <g id="编组" transform="translate(128, 582.5994)" fill="#1B283A" fill-rule="nonzero">
-            <path d="M18.5445026,0 L3.45549738,0 C1.55497382,0 0,1.6875 0,3.75 L0,21.25 C0,23.3125 1.55497382,25 3.45549738,25 L18.5445026,25 C20.4450262,25 22,23.3125 22,21.25 L22,3.75 C22,1.6875 20.4450262,0 18.5445026,0 Z M20.8481675,21.25 C20.8481675,22.625 19.8115183,23.75 18.5445026,23.75 L3.45549738,23.75 C2.18848168,23.75 1.15183246,22.625 1.15183246,21.25 L1.15183246,3.75 C1.15183246,2.375 2.18848168,1.25 3.45549738,1.25 L18.5445026,1.25 C19.8115183,1.25 20.8481675,2.375 20.8481675,3.75 L20.8481675,21.25 Z" id="形状"></path>
-            <path d="M17.3971226,15.1416845 L7.97031286,15.1416845 C7.64147066,15.1416845 7.42224252,15.395757 7.42224252,15.7768657 C7.42224252,16.1579745 7.64147066,16.412047 7.97031286,16.412047 L17.4519297,16.412047 C17.7807719,16.412047 18,16.1579745 18,15.7768657 C18,15.395757 17.7259648,15.1416845 17.3971226,15.1416845 L17.3971226,15.1416845 Z M4.95592601,13.5537315 C3.91459237,13.5537315 3.03767984,14.5700214 3.03767984,15.7768657 C3.03767984,16.9837101 3.91459237,18 4.95592601,18 C5.99725965,18 6.87417219,16.9837101 6.87417219,15.7768657 C6.81936515,14.5700214 5.99725965,13.5537315 4.95592601,13.5537315 Z M4.95592601,16.7296376 C4.51746974,16.7296376 4.13382051,16.2850107 4.13382051,15.7768657 C4.13382051,15.2687208 4.46266271,14.8240939 4.95592601,14.8240939 C5.39438228,14.8240939 5.77803151,15.2687208 5.77803151,15.7768657 C5.72322448,16.2850107 5.39438228,16.7296376 4.95592601,16.7296376 L4.95592601,16.7296376 Z M17.3971226,5.80452062 L7.97031286,5.80452062 C7.64147066,5.80452062 7.42224252,6.05859311 7.42224252,6.43970184 C7.42224252,6.82081057 7.64147066,7.07488305 7.97031286,7.07488305 L17.4519297,7.07488305 C17.7807719,7.07488305 18,6.82081057 18,6.43970184 C18,6.05859311 17.7259648,5.80452062 17.3971226,5.80452062 L17.3971226,5.80452062 Z M4.62708381,8.02765488 C4.73669788,8.091173 4.84631194,8.15469112 4.95592601,8.15469112 L5.06554008,8.15469112 C5.22996118,8.091173 5.33957525,8.02765488 5.39438228,7.83710052 L6.76455812,4.97878504 C6.92897922,4.66119443 6.81936515,4.2800857 6.54532998,4.08953133 C6.27129482,3.89897697 5.94245261,4.02601321 5.77803151,4.34360382 L4.68189084,6.56673808 L3.85978534,5.93155686 C3.58575017,5.7410025 3.25690797,5.80452062 3.09248687,6.12211123 C2.92806577,6.43970184 2.9828728,6.82081057 3.25690797,7.01136493 L4.62708381,8.02765488 Z" id="形状"></path>
-        </g>
-        <rect id="矩形" fill="#EEEEEE" x="217" y="465.599391" width="60" height="60" rx="13"></rect>
-        <rect id="矩形" fill="#F4F4F4" x="273" y="232.599391" width="60" height="60" rx="11"></rect>
-        <g id="编组" transform="translate(289, 247.5994)" fill="#1B283A" fill-rule="nonzero">
-            <path d="M23,5.58437161 L16.4956122,0 L0,0 L0,26 L23,26 L23,5.58437161 Z M2.24677854,24.0017845 L2.24677854,1.9982155 L14.5790677,1.9982155 L14.5790677,7.4523342 L20.7531857,7.4523342 L20.7531857,24.0017845 L2.24677854,24.0017845 Z" id="形状"></path>
-            <path d="M24.7519424,8 L24.7519424,27.1355933 L4,27.1355933 L4,29 L27,29 L27,8 L24.7519424,8 Z M4.10582378,10.6337572 L17.9455202,10.6337572 L17.9455202,12.4515631 L4.10582378,12.4515631 L4.10582378,10.6337572 Z" id="形状"></path>
-            <path d="M4,15 L18,15 L18,16.7724899 L4,16.7724899 L4,15 Z M4,19.2275101 L18,19.2275101 L18,21 L4,21 L4,19.2275101 Z" id="形状"></path>
-        </g>
-        <g id="编组" transform="translate(232, 481.5994)" fill="#1B283A" fill-rule="nonzero">
-            <path d="M29.1421419,16.4927172 L16.4145042,22.4002432 C15.1959176,22.9475827 14.7106947,22.9475827 13.5859707,22.4002432 L0.857858137,16.4927172 C0.182196061,16.1221263 0,14.7508702 0,14.002648 C0.849615033,14.5036812 2.04438832,15.0623697 1.99998417,15.0340324 L15.000017,21.2223388 L28.0004907,15.0340324 C28.0224384,15.028358 29.1815255,14.4252197 30,14.002648 C30,14.7683489 29.7701772,16.1901847 29.1421419,16.4927172 Z M29.1421419,10.3038854 L16.4145042,16.2119018 C15.1959176,16.7592763 14.7106947,16.7592763 13.5859707,16.2119018 L0.857858137,10.3038854 C-0.141896492,9.75605543 -0.110789856,8.03077648 0.857858137,7.38651588 L13.5859707,0.447115053 C14.7106947,-0.1328701 15.4142747,-0.164990315 16.4145042,0.447115053 L29.1421419,7.38651588 C30.1107559,7.9343458 30.0787334,9.85248611 29.1421419,10.3038854 Z M14.999983,1.62501944 L1.99995026,8.84520063 L14.999983,14.5017547 L28.0004907,8.84520063 L14.999983,1.62501944 Z M14.999983,27.4115559 L28.0004568,21.2223038 C28.0224045,21.2166293 29.1814916,20.613491 29.9999661,20.1909194 C29.9999661,20.9566553 29.7701772,22.3784911 29.142108,22.6810235 L16.4145042,28.5894953 C15.1959176,29.1368349 14.7106947,29.1368349 13.5859707,28.5894953 L0.857858137,22.6809885 C0.182196061,22.3103977 0,20.939632 0,20.1909194 C0.849615033,20.6919526 2.04438832,21.250641 1.99998417,21.2222688 L14.999983,27.4115559 Z" id="形状"></path>
-        </g>
-        <g id="编组" transform="translate(665, 523.5994)" fill="#1B283A" fill-rule="nonzero">
-            <polygon id="路径" points="17.1924743 2.21813986e-15 18.7998845 2.21813986e-15 18.7998845 24.9990816 17.1924743 24.9990816 17.1924743 0"></polygon>
-            <path d="M0.304950711,24.5784045 L0.305361527,24.5789236 L0,24.9976041 L0.610024671,24.9976041 L0.611092801,24.9990815 L1.49213456,24.9990815 L2.08864328,24.9990815 L14.7915678,24.9990815 L14.7915678,23.4359277 L14.7915678,7.55118407 L14.7915678,6.73147265 L14.7915678,4.68083644 L1.13677638,23.4359676 L0.304950711,24.5784045 Z M3.22016115,23.4336915 L3.68381113,22.8045327 L3.68504358,22.8062897 L13.314387,9.58093613 L13.314387,22.843346 L13.3145102,22.843346 L13.3145102,23.4359277 L13.3145102,23.4361274 L13.1738459,23.4361274 L13.1738459,23.436367 L4.33298679,23.436367 L3.57625878,23.436367 L3.57625878,23.4359277 L3.57625878,23.4345701 L3.22016115,23.4336915 Z" id="形状"></path>
-            <path d="M35.3815125,24.9988819 L36,24.9966059 L35.5711875,24.419278 L21.2032149,4.69792711 L21.2032149,6.74708583 L21.2032149,7.56559928 L21.2032149,24.9990417 L34.5006761,24.9990417 L35.0622653,24.9990417 L35.0592252,25 L35.323546,24.9990417 L35.3813892,24.9990417 L35.3815125,24.9988819 Z M31.7814673,23.4378444 L31.7820424,23.436327 L22.8185539,23.436327 L22.8185539,23.4349294 L22.6815049,23.4349294 L22.6815049,22.9709268 L22.6803956,22.9709268 L22.6803956,9.59387389 L32.1970104,22.6551095 L32.1982839,22.6551095 L32.4630565,23.0223185 L32.4630565,23.0243949 L32.7627488,23.4378444 L31.7814673,23.4378444 Z" id="形状"></path>
-        </g>
-        <g id="编组" transform="translate(673, 250.5994)" fill="#1B283A" fill-rule="nonzero">
-            <path d="M15.8823529,23.5714286 L15.8823529,27.8571428 L21.1764706,27.8571428 L21.1764706,30 L8.8235294,30 L8.8235294,27.8571428 L14.1176471,27.8571428 L14.1176471,23.5714286 L0,23.5714286 L0,0 L30,0 L30,23.5714286 L15.8823529,23.5714286 Z M15.8823529,21.4285714 L28.2352941,21.4285714 L28.2352941,2.14285716 L1.76470586,2.14285716 L1.76470586,21.4285714 L15.8823529,21.4285714 Z" id="形状"></path>
-        </g>
-        <g id="编组" transform="translate(136, 177.5994)" fill="#1B283A" fill-rule="nonzero">
-            <path d="M22.8139482,14.0185105 L15.9810344,14.0185105 L15.9810344,7.18581856 C15.9810344,5.70076493 16.425481,4.28436342 17.2637866,3.0919846 C18.0442781,1.98271097 19.128294,1.11191311 20.3965927,0.573536002 C21.6215307,0.0532252437 22.9404167,-0.116598407 24.2123287,0.0785181278 C25.5818022,0.288087739 26.8501008,0.927636379 27.879916,1.92489867 L27.9774774,2.02245693 L28.0750389,2.1200152 C29.0723335,3.14979691 29.7119029,4.41805438 29.9214793,5.78748339 C30.1166022,7.05574087 29.946773,8.37819738 29.4264454,9.60309562 C28.8880508,10.8713531 28.0172247,11.9553338 26.907915,12.7358 C25.7154975,13.5776917 24.29905,14.0185105 22.8139482,14.0185105 L22.8139482,14.0185105 Z M17.5709245,12.4286721 L22.8139482,12.4286721 C23.9702318,12.4286721 25.0687013,12.0854115 25.9937283,11.4386364 C26.860941,10.8279939 27.543871,9.97887561 27.9630239,8.98522659 C28.3677232,8.03132354 28.5014185,7.01238164 28.3496562,6.0331857 C28.1870538,4.97449783 27.7100868,4.03143458 26.9332087,3.22928883 C26.907915,3.20399595 26.8826213,3.17508979 26.8537142,3.14979691 C26.8284205,3.12450403 26.7995134,3.09921114 26.7742197,3.07030499 C25.9720479,2.29345212 25.0253407,1.81650059 23.9702318,1.65390348 C22.9910041,1.50214617 21.9720291,1.63583713 21.0180951,2.04052328 C20.0244139,2.46327577 19.175268,3.14257037 18.5646057,4.00975497 C17.9141962,4.9311386 17.5745378,6.02957243 17.5745378,7.18943182 L17.5709245,12.4286721 L17.5709245,12.4286721 Z M14.0189656,14.0185105 L7.18605181,14.0185105 C5.70094998,14.0185105 4.2845025,13.5740784 3.09208497,12.7358 C1.98277533,11.9553338 1.1119492,10.8713531 0.573554619,9.60309562 C0.0532269714,8.37819738 -0.116602191,7.05935414 0.0785206765,5.79109666 C0.28809709,4.42166765 0.927666491,3.15341018 1.92496115,2.12362847 L2.02252258,2.0260702 L2.12008402,1.92851194 C3.14989915,0.931249648 4.4181978,0.291701008 5.78767126,0.0821313969 C7.0559699,-0.112985137 8.37846934,0.0568385129 9.60340734,0.577149271 C10.871706,1.11552638 11.9557219,1.98632424 12.7362134,3.09559787 C13.574519,4.28797669 14.0189656,5.7043782 14.0189656,7.18943182 L14.0189656,14.0185105 Z M6.82109978,1.5924779 C6.55732257,1.5924779 6.29354536,1.61415752 6.03338154,1.65390348 C4.97465931,1.81650059 4.03156545,2.29345212 3.22939366,3.07030499 C3.20409995,3.09559787 3.17519286,3.12089076 3.14989915,3.14979691 L3.07040465,3.22928883 C2.29352657,4.03143458 1.81655956,4.9781111 1.65395717,6.0331857 C1.50219494,7.01238164 1.63589023,8.03132354 2.04058952,8.98522659 C2.46335573,9.97887561 3.14267238,10.8279939 4.00988513,11.4386364 C4.93129867,12.0890248 6.02976815,12.4286721 7.1896652,12.4286721 L12.4326889,12.4286721 L12.4326889,7.18581856 C12.4326889,6.02957243 12.0894172,4.9311386 11.442621,4.0061417 C10.8319587,3.1389571 9.98281292,2.45604923 8.98913165,2.03691001 C8.28452129,1.74423521 7.54739046,1.5924779 6.82109978,1.5924779 Z M6.82109978,30 C6.47421468,30 6.13094297,29.9747071 5.79128465,29.9205081 C4.42181118,29.7109385 3.15351254,29.0713898 2.1236974,28.0741275 L2.02613597,27.9765693 L1.92857454,27.879011 C0.931279877,26.8492293 0.291710477,25.5809718 0.082134063,24.2115428 C-0.112988805,22.9432853 0.0568403579,21.6208288 0.577168006,20.3959306 C1.11556259,19.1276731 1.98638872,18.0436924 3.09569836,17.2632262 C4.28811588,16.4249478 5.70456337,15.9805157 7.1896652,15.9805157 L14.022579,15.9805157 L14.022579,22.8132077 C14.022579,24.2982613 13.5781324,25.7146628 12.7398268,26.9070416 C11.9557219,28.0163152 10.871706,28.8907264 9.60340734,29.4254902 C8.70728751,29.8048835 7.76058026,30 6.82109978,30 Z M7.18605181,17.5739674 C6.02976815,17.5739674 4.93129867,17.9172279 4.00627174,18.5640031 C3.139059,19.1746456 2.45612896,20.0237639 2.03697613,21.0174129 C1.63227685,21.9713159 1.49858155,22.9902578 1.65034378,23.9694538 C1.81294617,25.0281416 2.28991318,25.9712049 3.06679127,26.7733506 C3.09208497,26.7986435 3.11737868,26.8275497 3.14628577,26.8528426 L3.22578027,26.9323345 C4.02795206,27.7091874 4.97465931,28.1861389 6.02976815,28.348736 C7.00899588,28.5004933 8.02797085,28.3668023 8.98190488,27.9621162 C9.97558615,27.5393637 10.824732,26.8600691 11.4353943,25.9928845 C12.0858038,25.0715009 12.4254622,23.973067 12.4254622,22.8132077 L12.4254622,17.5739674 L7.18605181,17.5739674 Z M23.1789002,30 C22.2394197,30 21.2927125,29.8048835 20.3965927,29.4254902 C19.128294,28.8871131 18.0442781,28.0163152 17.2637866,26.9070416 C16.425481,25.7146628 15.9810344,24.2982613 15.9810344,22.8132077 L15.9810344,15.9841289 L22.8139482,15.9841289 C24.29905,15.9841289 25.7154975,16.4285611 26.907915,17.2668395 C28.0172247,18.0473056 28.8880508,19.1312864 29.4264454,20.3995439 C29.946773,21.6244421 30.1166022,22.9432853 29.9214793,24.2151561 C29.7119029,25.5845851 29.0723335,26.8528426 28.0750389,27.8826243 L27.9774774,27.9801825 L27.879916,28.0777408 C26.8501008,29.0750031 25.5818022,29.7145517 24.2123287,29.9241213 C23.869057,29.9747071 23.5257853,30 23.1789002,30 L23.1789002,30 Z M17.5709245,17.5739674 L17.5709245,22.8132077 C17.5709245,23.9694538 17.9141962,25.0678876 18.5609923,25.9928845 C19.1716547,26.8600691 20.0208005,27.5393637 21.0144817,27.9621162 C21.9684158,28.3668023 22.9873907,28.5004933 23.9666185,28.348736 C25.0253407,28.1861389 25.9684346,27.7091874 26.7706063,26.9323345 C26.7959,26.9070416 26.8248071,26.8817487 26.8501008,26.8528426 C26.8753946,26.8275497 26.9006883,26.7986435 26.9295953,26.7733506 C27.7064734,25.9712049 28.1834404,25.0245284 28.3460428,23.9694538 C28.4978051,22.9902578 28.3641098,21.9713159 27.9594105,21.0174129 C27.5366443,20.0237639 26.8573276,19.1746456 25.9901149,18.5640031 C25.0687013,17.9136147 23.9702318,17.5739674 22.8103348,17.5739674 L17.5709245,17.5739674 L17.5709245,17.5739674 Z" id="形状"></path>
-        </g>
-        <g id="编组" transform="translate(536, 323.5994)" fill="#1B283A" fill-rule="nonzero">
-            <path d="M32.7272891,4.16531875 L18.80501,4.16531875 C17.9600112,4.16531875 17.2645341,3.58190491 17.1778648,2.83348578 C17.175958,2.7980152 17.1733316,2.76277392 17.1700577,2.72766363 C17.1694101,2.71037049 17.1686545,2.69307738 17.1686545,2.67562047 L17.1686545,2.68066429 L17.1654885,2.68066429 C17.0009284,1.17527773 15.6056568,0 13.9091473,0 L3.27274689,0 C1.46557121,0 0,1.33363434 0,2.97933107 L0,25.0207017 C0,26.6661037 1.46549928,28 3.27274689,28 L32.7272891,28 C34.5344288,28 36,26.6661036 36,25.0207017 L36,7.14468256 C36,5.49898583 34.5345007,4.16531875 32.7272891,4.16531875 Z M34.3636805,25.0207017 C34.3636805,25.8434026 33.6308589,26.5103345 32.727325,26.5103345 L3.27274689,26.5103345 C2.36892519,26.5103345 1.63639143,25.8434027 1.63639143,25.0207017 L1.63639143,8.63431532 L34.3636805,8.63431532 L34.3636805,25.0207017 Z M1.63639143,7.14468256 L1.63639143,2.97936381 C1.63639143,2.15679385 2.36892519,1.48969828 3.27274689,1.48969828 L13.9091473,1.48969828 C14.7546858,1.48969828 15.4503788,2.07373441 15.5364005,2.82267758 C15.5382713,2.8575586 15.5408257,2.89227588 15.5439917,2.92682939 C15.5446753,2.94428627 15.5454668,2.96174316 15.5454668,2.97936381 L15.5492084,2.97936381 C15.7163589,4.48232671 17.1104073,5.65498428 18.804974,5.65498428 L32.727325,5.65498428 C33.6308229,5.65498428 34.3636445,6.32207986 34.3636445,7.14468256 L1.63639143,7.14468256 L1.63639143,7.14468256 Z" id="形状"></path>
-        </g>
-        <text id="No-Caching" font-family="mabry-bold, Mabry Pro" font-size="34" font-weight="bold" fill="#000000">
-            <tspan x="309" y="638.599391">No Caching</tspan>
-        </text>
-        <text id="Please-enter-the-tas" font-family="mabry-light, Mabry Pro" font-size="30" font-weight="300" fill="#565656">
-            <tspan x="155.711426" y="708.599391">Please enter the task id in your search </tspan>
-            <tspan x="246.854004" y="744.599391">box to search for cache.</tspan>
-        </text>
-        <g id="编组" transform="translate(543, 104.5994)" fill="#1B283A" fill-rule="nonzero">
-            <path d="M27.4285714,0 C28.8487322,0 30,1.1851286 30,2.64705882 L30,27.3529412 C30,28.8148714 28.8487322,30 27.4285714,30 L2.57142857,30 C1.15126779,30 0,28.8148714 0,27.3529412 L0,2.64705882 C0,1.1851286 1.15126779,0 2.57142857,0 L27.4285714,0 Z M27.8571429,20.7352941 L2.14285541,20.7352941 L2.14285541,27.3529412 C2.14222438,27.5842384 2.31522887,27.7767712 2.53928571,27.7941194 L27.4285714,27.7941194 C27.6532601,27.794769 27.840292,27.6166762 27.8571429,27.3860294 L27.8571429,20.7352941 Z M18.4285714,23.1617647 L18.4285714,25.3676471 L5.14285714,25.3676471 L5.14285714,23.1617647 L18.4285714,23.1617647 Z M23.7857143,23.1617647 C24.3774479,23.1617647 24.8571429,23.6555683 24.8571429,24.2647059 C24.8571429,24.8738435 24.3774479,25.3676471 23.7857143,25.3676471 C23.1939806,25.3676471 22.7142857,24.8738435 22.7142857,24.2647059 C22.7142857,23.6555683 23.1939806,23.1617647 23.7857143,23.1617647 Z M27.8571429,11.4705882 L2.14285714,11.4705882 L2.14285714,18.5294118 L27.8571429,18.5294118 L27.8571429,11.4705882 Z M18.4285714,13.8970588 L18.4285714,16.1029412 L5.14285714,16.1029412 L5.14285714,13.8970588 L18.4285714,13.8970588 Z M23.7857143,13.8970588 C24.3774479,13.8970588 24.8571429,14.3908624 24.8571429,15 C24.8571429,15.6091376 24.3774479,16.1029412 23.7857143,16.1029412 C23.1939806,16.1029412 22.7142857,15.6091376 22.7142857,15 C22.7142857,14.3908624 23.1939806,13.8970588 23.7857143,13.8970588 Z M27.4285714,2.20588057 L2.57142857,2.20588057 C2.34673986,2.20523098 2.15970797,2.38332384 2.14285714,2.61397059 L2.14285714,9.26470588 L27.8571446,9.26470588 L27.8571446,2.64705882 C27.8577756,2.41576162 27.6847711,2.2232288 27.4607143,2.20588057 L27.4285714,2.20588057 Z M18.4285714,4.63235294 L18.4285714,6.83823529 L5.14285714,6.83823529 L5.14285714,4.63235294 L18.4285714,4.63235294 Z M23.7857143,4.63235294 C24.3774479,4.63235294 24.8571429,5.12615653 24.8571429,5.73529412 C24.8571429,6.34443171 24.3774479,6.83823529 23.7857143,6.83823529 C23.1939806,6.83823529 22.7142857,6.34443171 22.7142857,5.73529412 C22.7142857,5.12615653 23.1939806,4.63235294 23.7857143,4.63235294 Z" id="形状"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/public/icons/job/task/task-id.svg b/public/icons/job/task/task-id.svg
deleted file mode 100644
index 4f0fd44..0000000
--- a/public/icons/job/task/task-id.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1730360049129" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9414" width="200" height="200"><path d="M224 800.256L223.712 224H320v31.68c0 35.456 28.64 64.32 63.872 64.32h256.256A64.16 64.16 0 0 0 704 255.68V224l96-0.256L800.256 800 224 800.256zM640 192.32L640.128 256 384 255.68V192.32L383.872 192 640 192.32zM799.84 160H695.04c-11.072-19.04-31.424-32-54.912-32h-256.256c-23.488 0-43.808 12.928-54.912 32H223.712A63.776 63.776 0 0 0 160 223.744v576.512C160 835.392 188.608 864 223.744 864h576.512A63.84 63.84 0 0 0 864 800.256V223.744A64 64 0 0 0 799.84 160z" fill="#2c2c2c" p-id="9415"></path><path d="M619.072 429.088l-151.744 165.888-62.112-69.6a32 32 0 1 0-47.744 42.624l85.696 96a32 32 0 0 0 23.68 10.688h0.192c8.96 0 17.536-3.776 23.616-10.4l175.648-192a32 32 0 0 0-47.232-43.2" fill="#2c2c2c" p-id="9416"></path></svg>
\ No newline at end of file
diff --git a/public/icons/job/task/type.svg b/public/icons/job/task/type.svg
deleted file mode 100644
index d2692fa..0000000
--- a/public/icons/job/task/type.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1728873539830" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5595" width="200" height="200"><path d="M161.066667 128c-18.24 0-33.066667 14.826667-33.066667 33.066667v285.866666c0 18.24 14.826667 33.066667 33.066667 33.066667h285.866666c18.24 0 33.066667-14.826667 33.066667-33.066667V161.066667c0-18.24-14.826667-33.066667-33.066667-33.066667H161.066667z m254.933333 288H192V192h224v224zM128 862.933333c0 18.24 14.826667 33.066667 33.066667 33.066667h285.866666c18.24 0 33.066667-14.826667 33.066667-33.066667V577.066667c0-18.24-14.826667-33.066667-33.066667-33.066667H161.066667c-18.24 0-33.066667 14.826667-33.066667 33.066667v285.866666z m64-254.933333h224v224H192V608zM577.066667 128c-18.24 0-33.066667 14.826667-33.066667 33.066667v285.866666c0 18.24 14.826667 33.066667 33.066667 33.066667h285.866666c18.24 0 33.066667-14.826667 33.066667-33.066667V161.066667c0-18.24-14.826667-33.066667-33.066667-33.066667H577.066667z m254.933333 288H608V192h224v224zM743.36 514.133333c-6.293333-6.293333-14.506667-9.706667-23.36-9.706666s-17.173333 3.413333-23.36 9.706666L514.133333 696.64c-6.293333 6.293333-9.706667 14.506667-9.706666 23.36s3.413333 17.173333 9.706666 23.36L696.64 925.866667c6.293333 6.293333 14.506667 9.706667 23.36 9.706666s17.173333-3.413333 23.36-9.706666L925.866667 743.36c6.293333-6.293333 9.706667-14.506667 9.706666-23.36s-3.413333-17.173333-9.706666-23.36L743.36 514.133333zM720 858.773333L581.226667 720 720 581.226667 858.773333 720 720 858.773333z" p-id="5596" fill="#515151"></path></svg>
\ No newline at end of file
diff --git a/public/icons/profile/created-at.svg b/public/icons/profile/created-at.svg
deleted file mode 100644
index 90a4cce..0000000
--- a/public/icons/profile/created-at.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1694488945708" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="39963" width="64" height="64"><path d="M512 895.936c-211.776 0-384-172.224-384-384C128 300.224 300.16 128 512 128c211.648 0 384 172.288 384 384a32 32 0 1 0 64 0C960 264.96 759.04 64 512 64 265.216 64 64 264.96 64 512c0 246.912 201.024 447.936 448 447.936a32 32 0 0 0 0-64zM512 190.912a32 32 0 0 0-32.064 32.064v275.776L361.28 617.344a32 32 0 0 0 45.312 45.248L534.208 535.04a30.912 30.912 0 0 0 5.184-6.72s0-0.128 0.128-0.128l0.64-1.152c0-0.128 0.128-0.128 0.128-0.192l0.64-1.216v-0.192c0.256-0.448 0.512-0.832 0.512-1.216 0-0.064 0.192-0.064 0.192-0.192l0.448-1.28 0.128-0.256c0.064-0.384 0.32-0.768 0.384-1.28l0.128-0.192 0.256-1.28c0-0.128 0-0.192 0.128-0.192a26.24 26.24 0 0 0 0.384-1.664c0.128-0.32 0.128-0.768 0.192-1.152 0-0.192 0-0.32 0.128-0.512l0.064-1.088c0-0.256 0-0.448 0.128-0.704l0.064-0.832v-290.56a32.128 32.128 0 0 0-32.064-32z m415.552 544.96h-127.872v-128a32 32 0 1 0-64.064 0v128h-128a32 32 0 1 0 0 64.064h128.064v128a32 32 0 0 0 64 0v-128.064h128.064a32 32 0 0 0 32.064-32.064 32.32 32.32 0 0 0-32.256-31.936z" fill="#515151" p-id="39964"></path></svg>
\ No newline at end of file
diff --git a/public/icons/profile/email.svg b/public/icons/profile/email.svg
deleted file mode 100644
index c8b78d4..0000000
--- a/public/icons/profile/email.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1735025790420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7715" width="200" height="200"><path d="M874.666667 181.333333H149.333333c-40.533333 0-74.666667 34.133333-74.666666 74.666667v512c0 40.533333 34.133333 74.666667 74.666666 74.666667h725.333334c40.533333 0 74.666667-34.133333 74.666666-74.666667V256c0-40.533333-34.133333-74.666667-74.666666-74.666667z m-725.333334 64h725.333334c6.4 0 10.666667 4.266667 10.666666 10.666667v25.6L512 516.266667l-373.333333-234.666667V256c0-6.4 4.266667-10.666667 10.666666-10.666667z m725.333334 533.333334H149.333333c-6.4 0-10.666667-4.266667-10.666666-10.666667V356.266667l356.266666 224c4.266667 4.266667 10.666667 4.266667 17.066667 4.266666s12.8-2.133333 17.066667-4.266666l356.266666-224V768c0 6.4-4.266667 10.666667-10.666666 10.666667z" fill="#515151" p-id="7716"></path></svg>
\ No newline at end of file
diff --git a/public/icons/profile/id.svg b/public/icons/profile/id.svg
deleted file mode 100644
index f2f864a..0000000
--- a/public/icons/profile/id.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1694488637106" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28840" width="64" height="64"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32z m-40 632H136V232h752v560z" p-id="28841" fill="#515151"></path><path d="M610.3 476h123.4c1.3 0 2.3-3.6 2.3-8v-48c0-4.4-1-8-2.3-8H610.3c-1.3 0-2.3 3.6-2.3 8v48c0 4.4 1 8 2.3 8zM615.1 620h185.7c3.9 0 7.1-3.6 7.1-8v-48c0-4.4-3.2-8-7.1-8H615.1c-3.9 0-7.1 3.6-7.1 8v48c0 4.4 3.2 8 7.1 8zM224 673h43.9c4.2 0 7.6-3.3 7.9-7.5 3.8-50.5 46-90.5 97.2-90.5s93.4 40 97.2 90.5c0.3 4.2 3.7 7.5 7.9 7.5H522c4.6 0 8.2-3.8 8-8.4-2.8-53.3-32-99.7-74.6-126.1 18.1-19.9 29.1-46.4 29.1-75.5 0-61.9-49.9-112-111.4-112s-111.4 50.1-111.4 112c0 29.1 11 55.5 29.1 75.5-42.7 26.5-71.8 72.8-74.6 126.1-0.4 4.6 3.2 8.4 7.8 8.4z m149-262c28.5 0 51.7 23.3 51.7 52s-23.2 52-51.7 52-51.7-23.3-51.7-52 23.2-52 51.7-52z" p-id="28842" fill="#515151"></path></svg>
\ No newline at end of file
diff --git a/public/icons/profile/location.svg b/public/icons/profile/location.svg
deleted file mode 100644
index 678a275..0000000
--- a/public/icons/profile/location.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1735025813169" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9674" width="200" height="200"><path d="M854.6 289.1c-18.8-43.4-45.7-82.3-79.9-115.7-34.2-33.4-73.9-59.5-118.2-77.8C610.7 76.6 562.1 67 512 67c-50.1 0-98.7 9.6-144.5 28.5-44.3 18.3-84 44.5-118.2 77.8-34.2 33.4-61.1 72.4-79.9 115.7-19.5 45-29.4 92.8-29.4 142 0 70.6 16.9 140.9 50.1 208.7 26.7 54.5 64 107.6 111 158.1 80.3 86.2 164.5 138.9 188.4 153 6.9 4.1 14.7 6.1 22.4 6.1 7.8 0 15.5-2 22.4-6.1 23.9-14.1 108.1-66.8 188.4-153 47-50.4 84.3-103.6 111-158.1C867.1 572 884 501.8 884 431.1c0-49.2-9.9-97-29.4-142zM512 880.2c-65.9-41.9-300-207.8-300-449.1 0-77.9 31.1-151.1 87.6-206.3C356.3 169.5 431.7 139 512 139s155.7 30.5 212.4 85.9C780.9 280 812 353.2 812 431.1c0 241.3-234.1 407.2-300 449.1z" p-id="9675" fill="#515151"></path><path d="M512 263c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m79.2 255.2C570 539.3 541.9 551 512 551c-29.9 0-58-11.7-79.2-32.8C411.7 497 400 468.9 400 439c0-29.9 11.7-58 32.8-79.2C454 338.6 482.1 327 512 327c29.9 0 58 11.6 79.2 32.8C612.4 381 624 409.1 624 439c0 29.9-11.6 58-32.8 79.2z" p-id="9676" fill="#515151"></path></svg>
\ No newline at end of file
diff --git a/public/icons/profile/name.svg b/public/icons/profile/name.svg
deleted file mode 100644
index 4d609a8..0000000
--- a/public/icons/profile/name.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1735028375597" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14663" width="200" height="200"><path d="M514.592 71.104c-144.096 0-260.992 118.464-260.992 264.544a264.832 264.832 0 0 0 109.696 214.912c-135.36 59.36-230.144 195.872-230.144 354.944h0.896c1.536 21.376 18.656 38.368 40.128 38.368s38.56-17.056 40.128-38.368h0.64c0-0.928-0.096-1.792-0.096-2.72v-0.16l-0.064-0.192c0.064-159.968 120-291.04 273.024-304.928 8.96 0.928 17.6 2.72 26.848 2.72 144.096 0 260.992-118.464 260.992-264.544s-116.928-264.544-261.024-264.544z m0 447.36c-99.776 0-180.704-81.984-180.704-183.168s80.864-183.168 180.704-183.168c99.712 0 180.64 81.984 180.64 183.168s-80.864 183.168-180.64 183.168z m381.44 384.16c0-0.352-0.192-0.64-0.192-0.992a388.224 388.224 0 0 0-111.36-269.12 38.88 38.88 0 0 0-28-11.968c-21.568 0-39.136 17.76-39.136 39.68 0 11.136 4.576 21.12 11.84 28.32l-0.096 0.064a308.64 308.64 0 0 1 85.312 213.856c0 1.056-0.16 1.984-0.16 3.04h0.992c1.504 21.376 18.688 38.368 40.128 38.368 21.472 0 38.56-17.056 40.128-38.368h0.608c0-0.8-0.096-1.504-0.096-2.272-0.064-0.16 0.064-0.352 0.064-0.544z" p-id="14664" fill="#515151"></path></svg>
\ No newline at end of file
diff --git a/public/icons/profile/phone.svg b/public/icons/profile/phone.svg
deleted file mode 100644
index ae86d79..0000000
--- a/public/icons/profile/phone.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1735025834391" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11589" width="200" height="200"><path d="M942.08 738.304c-25.6-23.552-55.296-47.104-76.8-61.44-27.648-19.456-57.344-38.912-84.992-51.2-43.008-21.504-59.392-25.6-70.656-25.6-19.456 0-35.84 10.24-51.2 29.696-8.192 12.288-17.408 29.696-23.552 45.056-4.096 10.24-12.288 27.648-17.408 33.792-8.192-2.048-31.744-12.288-70.656-37.888-35.84-25.6-74.752-57.344-104.448-84.992-29.696-29.696-59.392-68.608-84.992-104.448-25.6-37.888-35.84-61.44-37.888-70.656 6.144-4.096 23.552-12.288 33.792-17.408 15.36-6.144 31.744-12.288 45.056-23.552 21.504-15.36 29.696-31.744 29.696-51.2 0-10.24-2.048-27.648-25.6-70.656-12.288-25.6-31.744-55.296-51.2-84.992-15.36-21.504-38.912-51.2-61.44-76.8-27.648-27.648-47.104-40.96-66.56-40.96-47.104 0-100.352 68.608-114.688 87.04-19.456 25.6-66.56 96.256-66.56 159.744 0 59.392 40.96 138.24 74.752 194.56 45.056 72.704 108.544 153.6 177.152 224.256l21.504 21.504 0 0c70.656 68.608 149.504 132.096 224.256 177.152 23.552 15.36 51.2 29.696 78.848 43.008l0 0c4.096 2.048 6.144 2.048 10.24 2.048 15.36 0 27.648-12.288 27.648-27.648 0-10.24-6.144-21.504-17.408-25.6-21.504-10.24-45.056-23.552-70.656-38.912-70.656-43.008-145.408-102.4-212.992-168.96l-21.504-21.504c-66.56-68.608-125.952-143.36-168.96-212.992-43.008-68.608-66.56-128-66.56-163.84 0-31.744 19.456-78.848 53.248-123.904 15.36-19.456 29.696-37.888 45.056-51.2 15.36-13.312 23.552-17.408 27.648-17.408 10.24 4.096 43.008 31.744 87.04 98.304 17.408 25.6 33.792 51.2 45.056 74.752 15.36 27.648 17.408 40.96 17.408 43.008 0 0-4.096 4.096-10.24 8.192-8.192 4.096-21.504 10.24-31.744 15.36-15.36 6.144-27.648 12.288-40.96 19.456-19.456 12.288-27.648 27.648-27.648 45.056 0 8.192 0 33.792 49.152 104.448 25.6 37.888 59.392 80.896 92.16 112.64l0 0c31.744 31.744 74.752 66.56 112.64 92.16 70.656 47.104 96.256 49.152 104.448 49.152l0 0c17.408 0 31.744-8.192 45.056-27.648 8.192-10.24 12.288-25.6 19.456-40.96 4.096-10.24 10.24-23.552 15.36-31.744 6.144-4.096 10.24-6.144 10.24-6.144 2.048 0 15.36 2.048 43.008 17.408 21.504 12.288 49.152 27.648 74.752 45.056 63.488 45.056 94.208 76.8 98.304 87.04-2.048 4.096-6.144 12.288-17.408 27.648-12.288 15.36-31.744 31.744-51.2 45.056-29.696 21.504-61.44 38.912-87.04 47.104l0 0c-10.24 4.096-17.408 15.36-17.408 25.6 0 15.36 12.288 27.648 27.648 27.648 2.048 0 4.096 0 6.144-2.048l0 0c2.048 0 2.048 0 4.096-2.048l0 0c45.056-15.36 82.944-40.96 102.4-55.296 21.504-15.36 87.04-70.656 87.04-115.712C982.016 785.408 969.728 765.952 942.08 738.304z" fill="#515151" p-id="11590"></path></svg>
\ No newline at end of file
diff --git a/public/icons/tokens/developer.svg b/public/icons/tokens/developer.svg
deleted file mode 100644
index 3ff7340..0000000
--- a/public/icons/tokens/developer.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1691993251100"
-    class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25172"
-    xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
-    <path
-        d="M318.592 819.2L17.088 512l301.44-307.2 45.568 45.504L96.64 512l267.392 261.696-45.504 45.504z m386.816 0l-45.504-45.504L927.296 512 659.84 250.304l45.504-45.504L1006.912 512l-301.44 307.2zM540.8 221.888l55.68 11.136-113.28 569.088-55.808-11.072L540.8 221.888z"
-        fill="#000000" p-id="25173"></path>
-</svg>
\ No newline at end of file
diff --git a/public/icons/tokens/done.svg b/public/icons/tokens/done.svg
deleted file mode 100644
index 71606dd..0000000
--- a/public/icons/tokens/done.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1691945744781" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3407" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M846.933333 309.333333l-452.266666 452.266667a21.333333 21.333333 0 0 1-30.293334 0l-229.973333-229.973333a21.333333 21.333333 0 0 1 0-30.293334l29.866667-29.866666a21.333333 21.333333 0 0 1 30.293333 0l184.746667 184.746666 407.466666-407.466666a21.76 21.76 0 0 1 30.293334 0l29.866666 30.293333a21.333333 21.333333 0 0 1 0 30.293333z" p-id="3408" fill="#2e8f79"></path></svg>
\ No newline at end of file
diff --git a/public/icons/tokens/key.svg b/public/icons/tokens/key.svg
deleted file mode 100644
index 106b812..0000000
--- a/public/icons/tokens/key.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1734941615670" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="122466" width="200" height="200"><path d="M704 0c-176.736 0-320 143.264-320 320 0 20.032 1.856 39.616 5.376 58.624l-389.376 389.376 0 192c0 35.36 28.64 64 64 64l64 0 0-64 128 0 0-128 128 0 0-128 128 0 83.04-83.04c34.016 12.32 70.688 19.04 108.96 19.04 176.736 0 320-143.264 320-320s-143.264-320-320-320zM799.872 320.128c-53.024 0-96-42.976-96-96s42.976-96 96-96 96 42.976 96 96-42.976 96-96 96z" fill="#1c293a" p-id="122467"></path></svg>
\ No newline at end of file
diff --git a/public/icons/tokens/selected-developer.svg b/public/icons/tokens/selected-developer.svg
deleted file mode 100644
index 8d57800..0000000
--- a/public/icons/tokens/selected-developer.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1691993251100"
-    class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25172"
-    xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
-    <path
-        d="M318.592 819.2L17.088 512l301.44-307.2 45.568 45.504L96.64 512l267.392 261.696-45.504 45.504z m386.816 0l-45.504-45.504L927.296 512 659.84 250.304l45.504-45.504L1006.912 512l-301.44 307.2zM540.8 221.888l55.68 11.136-113.28 569.088-55.808-11.072L540.8 221.888z"
-        fill="#2e8f79" p-id="25173"></path>
-</svg>
\ No newline at end of file
diff --git a/public/icons/user/bio.svg b/public/icons/user/bio.svg
deleted file mode 100644
index 5c150dc..0000000
--- a/public/icons/user/bio.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688108590072" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20288" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M376.8 619.8h272.4c15 0 27.2 12.2 27.2 27.2s-12.2 27.2-27.2 27.2H376.8c-15 0-27.2-12.2-27.2-27.2s12.1-27.2 27.2-27.2z m0-272.5h109c15 0 27.2 12.2 27.2 27.2s-12.2 27.2-27.2 27.2h-109c-15 0-27.2-12.2-27.2-27.2-0.1-15 12.1-27.2 27.2-27.2z m0 136.2h272.4c15 0 27.2 12.2 27.2 27.2s-12.2 27.2-27.2 27.2H376.8c-15 0-27.2-12.2-27.2-27.2-0.1-15 12.1-27.2 27.2-27.2z m-109-326.9h365.1l179.8 163.5v490.4c0 30.1-24.4 54.5-54.5 54.5H267.8c-30.1 0-54.5-24.4-54.5-54.5V211.1c0-30.1 24.4-54.5 54.5-54.5z m490.8 218v-27.2l-109.4-97.1v124.3h109.4z m0 54.5h-137c-15 0-27.2-12.2-27.2-27.2 0-1.6 0.1-3.2 0.4-4.8v-186h-300c-15 0-27.2 12.2-27.2 27.2v544.9c0 15 12.2 27.2 27.2 27.2h436.6c15 0 27.2-12.2 27.2-27.2V429.1z" p-id="20289" fill="#1C293A"></path></svg>
\ No newline at end of file
diff --git a/public/icons/user/created-at.svg b/public/icons/user/created-at.svg
deleted file mode 100644
index e600a88..0000000
--- a/public/icons/user/created-at.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1734335138637" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17714" width="200" height="200"><path d="M502.897778 75.093333C257.137778 75.093333 59.164444 273.066667 59.164444 518.826667s200.248889 443.733333 443.733334 443.733333c245.76 0 443.733333-197.973333 443.733333-443.733333S746.382222 75.093333 502.897778 75.093333z m288.995555 577.991111c-6.826667 13.653333-18.204444 20.48-31.857777 20.48-4.551111 0-9.102222 0-13.653334-2.275555l-261.688889-118.328889c-11.377778-4.551111-20.48-18.204444-20.48-31.857778V275.342222c0-18.204444 15.928889-34.133333 34.133334-34.133333s34.133333 15.928889 34.133333 34.133333V500.622222L773.688889 609.848889c18.204444 6.826667 25.031111 25.031111 18.204444 43.235555z" fill="#919EAB" p-id="17715"></path></svg>
\ No newline at end of file
diff --git a/public/icons/user/detail-role.svg b/public/icons/user/detail-role.svg
deleted file mode 100644
index dc3ba2d..0000000
--- a/public/icons/user/detail-role.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1734334612934" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34545" width="200" height="200"><path d="M410.112 100.864a215.456 215.456 0 0 0-213.504 217.088v0.512a214.912 214.912 0 0 0 203.776 224.768c117.76 5.632 218.112-85.504 224.256-203.776a143.648 143.648 0 0 0 0-20.992 216.448 216.448 0 0 0-214.528-217.6z m138.752 429.056a250.784 250.784 0 0 1-138.24 41.984A244.576 244.576 0 0 1 273.92 529.92a324.896 324.896 0 0 0-181.76 291.328c0 97.28 326.656 123.904 511.488 82.432v-101.376l-44.544-44.544-18.432-17.408 18.432-17.408 44.544-44.544v-89.6h27.136a320.448 320.448 0 0 0-81.92-58.88z m331.264 261.632l51.712-52.224-51.712-52.736v-73.216h-74.24l-51.712-52.224-51.712 52.224h-74.24v73.216l-51.712 52.736 51.712 52.736v73.216h74.24l51.712 52.736 51.712-52.736h74.24v-73.728z" p-id="34546" fill="#919EAB"></path></svg>
\ No newline at end of file
diff --git a/public/icons/user/edit.svg b/public/icons/user/edit.svg
deleted file mode 100644
index 7928eb1..0000000
--- a/public/icons/user/edit.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688109865749" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23067" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M833.163636 788.169697H206.351515c-15.515152 0-27.927273 12.412121-27.927273 27.927273v31.030303c0 3.10303 3.10303 6.206061 6.206061 6.20606h670.254545c3.10303 0 6.206061-3.10303 6.206061-6.20606v-31.030303c0-15.515152-12.412121-27.927273-27.927273-27.927273z m-530.618181-71.369697h6.20606l142.739394-24.824242c3.10303 0 3.10303 0 3.10303-3.103031l363.054546-363.054545c3.10303-3.10303 3.10303-9.309091 0-12.412121l-142.739394-139.636364c0-3.10303-3.10303-3.10303-6.206061-3.10303s-3.10303 0-6.20606 3.10303L302.545455 533.721212l-3.103031 3.10303-24.824242 142.739394c-3.10303 15.515152 9.309091 31.030303 24.824242 34.133334 0 3.10303 3.10303 3.10303 3.103031 3.10303z" p-id="23068" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/public/icons/user/location.svg b/public/icons/user/location.svg
deleted file mode 100644
index 9954cb4..0000000
--- a/public/icons/user/location.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1734334727577" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="42424" width="200" height="200"><path d="M364.032 125.312a293.973333 293.973333 0 0 1 300.117333 2.474667C755.626667 184.618667 811.178667 286.08 810.666667 395.093333c-2.133333 108.373333-61.738667 210.304-136.234667 289.066667a798.976 798.976 0 0 1-143.274667 120.32A50.090667 50.090667 0 0 1 513.706667 810.666667a34.986667 34.986667 0 0 1-16.64-5.077334 789.973333 789.973333 0 0 1-206.464-194.005333A395.946667 395.946667 0 0 1 213.333333 389.717333l0.213334-11.648c3.84-104.789333 60.586667-200.533333 150.485333-252.757333z m186.666667 174.848a100.096 100.096 0 0 0-110.677334 22.186667 104.746667 104.746667 0 0 0-22.144 112.64 101.461333 101.461333 0 0 0 93.781334 63.872 99.797333 99.797333 0 0 0 71.808-29.952c19.029333-19.328 29.696-45.653333 29.610666-73.045334a103.381333 103.381333 0 0 0-62.378666-95.701333z" fill="#919EAB" p-id="42425"></path><path d="M298.666667 896a213.333333 42.666667 0 1 0 426.666666 0 213.333333 42.666667 0 1 0-426.666666 0Z" fill="#919EAB" opacity=".4" p-id="42426"></path></svg>
\ No newline at end of file
diff --git a/public/icons/user/phone.svg b/public/icons/user/phone.svg
deleted file mode 100644
index 9976a99..0000000
--- a/public/icons/user/phone.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1734334664950" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="40450" width="200" height="200"><path d="M398.652952 165.692952c-32.280381-46.006857-58.172952-61.318095-92.867047-54.808381-14.969905 2.80381-24.210286 7.850667-41.20381 22.528l-12.946285 11.361524-25.185524 20.894476-6.582857 5.753905c-3.705905 3.413333-6.38781 6.217143-9.825524 10.118095-64 72.46019-81.724952 185.782857-44.470857 292.327619 26.794667 76.55619 74.605714 152.624762 142.774857 228.644572 72.289524 80.62781 133.046857 131.364571 202.922666 168.374857 54.857143 29.013333 96.865524 41.74019 145.676191 43.227429 59.001905 1.828571 110.957714-11.50781 153.648762-39.15581a162.133333 162.133333 0 0 0 19.553524-15.189333l8.289523-7.558095 16.335239-15.213715 5.534476-4.924952 10.922666-9.435429c22.040381-19.651048 29.184-31.939048 30.646858-51.370666 2.194286-29.647238-11.215238-52.736-49.737143-85.699048l-26.063238-21.820952-12.117334-10.581334-11.459047-9.825524c-37.229714-30.744381-64.804571-40.69181-100.205715-35.35238-24.283429 3.632762-38.278095 12.141714-63.073523 38.107428l-10.947048 11.654095c-18.041905 19.017143-28.330667 26.258286-43.544381 29.305905-22.25981 4.461714-44.373333-7.046095-80.262095-36.205714-46.250667-37.546667-84.626286-80.676571-117.613715-131.949714-22.869333-35.766857-31.890286-62.902857-24.941714-87.600762 2.82819-9.99619 9.679238-17.042286 24.064-28.184381l14.994286-11.312762 2.413714-1.877334 22.747429-18.553904c20.114286-16.822857 28.281905-28.281905 32.572952-45.836191 8.899048-36.10819 0.487619-66.072381-32.426667-117.638095l-15.62819-24.234667-5.558857-8.533333-6.436572-9.435429z" p-id="40451" fill="#919EAB"></path></svg>
\ No newline at end of file
diff --git a/public/icons/user/role.svg b/public/icons/user/role.svg
deleted file mode 100644
index 4f6f374..0000000
--- a/public/icons/user/role.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688988795450" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3796" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M928 400A240 240 0 0 0 567.68 192a224 224 0 1 0-366.4 256l-3.52 3.2-15.68 13.76-5.12 5.44-12.8 14.08-4.16 8.32-10.88 14.4-5.12 7.68-8.96 15.04-7.04 8.64-8.32 16.96-3.2 7.68c-2.24 5.44-4.16 10.56-6.72 18.24 0 2.56 0 5.12-2.56 7.68s-2.88 11.2-4.8 19.2l-1.92 7.68c0 6.08-1.92 12.16-3.2 21.12V896h312.64A96 96 0 0 0 480 928h352a96 96 0 0 0 96-96v-288a96 96 0 0 0-17.28-54.72A235.84 235.84 0 0 0 928 400z" fill="#FFFFFF" p-id="3797"></path><path d="M688 400m-208 0a208 208 0 1 0 416 0 208 208 0 1 0-416 0Z" fill="#E9EAEB" p-id="3798"></path><path d="M384 416a256 256 0 0 1 256 256v192H128v-192a256 256 0 0 1 256-256z" fill="#A3D4FF" p-id="3799"></path><path d="M352 450.56v-32A256 256 0 0 0 128 672v192h224v-32H160v-160a224 224 0 0 1 192-221.44z" fill="#2A5082" p-id="3800"></path><path d="M384 320m-192 0a192 192 0 1 0 384 0 192 192 0 1 0-384 0Z" fill="#FFFFFF" p-id="3801"></path><path d="M384 160a160 160 0 1 1-160 160 160 160 0 0 1 160-160m0-32a192 192 0 1 0 192 192 192 192 0 0 0-192-192z" fill="#2A5082" p-id="3802"></path><path d="M416 480m64 0l352 0q64 0 64 64l0 288q0 64-64 64l-352 0q-64 0-64-64l0-288q0-64 64-64Z" fill="#FFFFFF" p-id="3803"></path><path d="M480 480h352a64 64 0 0 1 64 64v64H416v-64a64 64 0 0 1 64-64z" fill="#A3D4FF" p-id="3804"></path><path d="M832 512a32 32 0 0 1 32 32v288a32 32 0 0 1-32 32H480a32 32 0 0 1-32-32v-288a32 32 0 0 1 32-32h352m0-32H480a64 64 0 0 0-64 64v288a64 64 0 0 0 64 64h352a64 64 0 0 0 64-64v-288a64 64 0 0 0-64-64z" fill="#2A5082" p-id="3805"></path><path d="M832 576H480v32h352v-32zM576 672h-96v32h96v-32zM832 768h-96v32h96v-32zM832 672h-224v32h224v-32z" fill="#2A5082" p-id="3806"></path><path d="M608 672v32h-32v-32h32m32-32h-96v96h96v-96zM704 768h-224v32h224v-32z" fill="#2A5082" p-id="3807"></path><path d="M736 768v32h-32v-32h32m32-32h-96v96h96v-96z" fill="#2A5082" p-id="3808"></path></svg>
\ No newline at end of file
diff --git a/public/icons/user/selected-user.svg b/public/icons/user/selected-user.svg
deleted file mode 100644
index d6d33d3..0000000
--- a/public/icons/user/selected-user.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg t="1730970107299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8272"
-    width="200" height="200">
-    <path
-        d="M512 74.666667C270.933333 74.666667 74.666667 270.933333 74.666667 512S270.933333 949.333333 512 949.333333 949.333333 753.066667 949.333333 512 753.066667 74.666667 512 74.666667zM288 810.666667c0-123.733333 100.266667-224 224-224S736 686.933333 736 810.666667c-61.866667 46.933333-140.8 74.666667-224 74.666666s-162.133333-27.733333-224-74.666666z m128-384c0-53.333333 42.666667-96 96-96s96 42.666667 96 96-42.666667 96-96 96-96-42.666667-96-96z m377.6 328.533333c-19.2-96-85.333333-174.933333-174.933333-211.2 32-29.866667 51.2-70.4 51.2-117.333333 0-87.466667-72.533333-160-160-160s-160 72.533333-160 160c0 46.933333 19.2 87.466667 51.2 117.333333-89.6 36.266667-155.733333 115.2-174.933334 211.2-55.466667-66.133333-91.733333-149.333333-91.733333-243.2 0-204.8 168.533333-373.333333 373.333333-373.333333S885.333333 307.2 885.333333 512c0 93.866667-34.133333 177.066667-91.733333 243.2z"
-        fill="#2e8f79" p-id="8273"></path>
-</svg>
\ No newline at end of file
diff --git a/public/icons/user/updated-at.svg b/public/icons/user/updated-at.svg
deleted file mode 100644
index fff20bf..0000000
--- a/public/icons/user/updated-at.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1734335047461" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15135" width="200" height="200"><path d="M857.6 0c-19.2 0-38.4 19.2-38.4 38.4v102.4c-192-166.4-486.4-147.2-659.2 38.4-185.6 198.4-172.8 505.6 25.6 684.8 198.4 185.6 505.6 172.8 684.8-25.6 12.8-12.8 12.8-32 0-44.8-12.8-12.8-32-12.8-44.8 0-160 172.8-422.4 179.2-595.2 19.2C57.6 652.8 51.2 390.4 211.2 217.6 352 64 601.6 44.8 774.4 185.6h-96c-19.2 0-38.4 19.2-38.4 38.4 0 12.8 19.2 32 38.4 32h166.4c25.6 0 51.2-25.6 51.2-57.6V38.4c0-19.2-19.2-38.4-38.4-38.4z" p-id="15136" fill="#919EAB"></path><path d="M614.4 185.6c-32-12.8-64-19.2-102.4-19.2C320 166.4 166.4 320 166.4 512S320 857.6 512 857.6c192 0 345.6-153.6 345.6-345.6 0-89.6-32-172.8-89.6-230.4h-108.8c-25.6 0-51.2-25.6-51.2-57.6 0-19.2 6.4-32 6.4-38.4zM492.8 294.4c25.6 0 51.2 19.2 51.2 44.8v160c0 6.4 0 12.8 6.4 12.8l96 57.6c25.6 6.4 38.4 38.4 25.6 57.6-12.8 25.6-38.4 32-64 25.6L460.8 576c-12.8-6.4-19.2-12.8-19.2-25.6V339.2c0-25.6 25.6-44.8 51.2-44.8z" p-id="15137" fill="#919EAB"></path></svg>
\ No newline at end of file
diff --git a/public/icons/user/user.svg b/public/icons/user/user.svg
deleted file mode 100644
index ef82479..0000000
--- a/public/icons/user/user.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg t="1730970107299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8272"
-    width="200" height="200">
-    <path
-        d="M512 74.666667C270.933333 74.666667 74.666667 270.933333 74.666667 512S270.933333 949.333333 512 949.333333 949.333333 753.066667 949.333333 512 753.066667 74.666667 512 74.666667zM288 810.666667c0-123.733333 100.266667-224 224-224S736 686.933333 736 810.666667c-61.866667 46.933333-140.8 74.666667-224 74.666666s-162.133333-27.733333-224-74.666666z m128-384c0-53.333333 42.666667-96 96-96s96 42.666667 96 96-42.666667 96-96 96-96-42.666667-96-96z m377.6 328.533333c-19.2-96-85.333333-174.933333-174.933333-211.2 32-29.866667 51.2-70.4 51.2-117.333333 0-87.466667-72.533333-160-160-160s-160 72.533333-160 160c0 46.933333 19.2 87.466667 51.2 117.333333-89.6 36.266667-155.733333 115.2-174.933334 211.2-55.466667-66.133333-91.733333-149.333333-91.733333-243.2 0-204.8 168.533333-373.333333 373.333333-373.333333S885.333333 307.2 885.333333 512c0 93.866667-34.133333 177.066667-91.733333 243.2z"
-        fill="#2c2c2c" p-id="8273"></path>
-</svg>
\ No newline at end of file
diff --git a/public/images/404/404.svg b/public/images/404/404.svg
deleted file mode 100644
index 5fb3fdf..0000000
--- a/public/images/404/404.svg
+++ /dev/null
@@ -1,62 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="517px" height="255px" viewBox="0 0 517 255" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>切片</title>
-    <defs>
-        <filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-1">
-            <feGaussianBlur stdDeviation="0" in="SourceGraphic"></feGaussianBlur>
-        </filter>
-        <linearGradient x1="12.2515839%" y1="50%" x2="100%" y2="50%" id="linearGradient-2">
-            <stop stop-color="#EEEEEE" stop-opacity="0.190067745" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="console-LandingPage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="文件分发" transform="translate(459, 218.5) rotate(9) translate(-459, -218.5)translate(441, 197)" fill="#2C2C2C" fill-rule="nonzero">
-            <path d="M12.9626432,5.51282051 L23.0373568,5.51282051 C24.4229786,5.51282051 25.5483871,4.27936939 25.5483871,2.76061386 C25.5483871,1.24185834 24.415353,0 23.0220607,0 L12.9626432,0 C11.5769765,0 10.4516129,1.23350029 10.4516129,2.75225582 C10.4516129,4.27101134 11.5616804,5.51282051 12.9626432,5.51282051 Z" id="路径"></path>
-            <path d="M30.8604954,3.30769231 L28.2946392,3.30769231 L28.2946392,8.59628652 L7.70531494,8.59628652 L7.70531494,3.30769231 L5.13950456,3.30769231 C2.29986962,3.30769231 -4.67740132e-13,5.67430391 -4.67740132e-13,8.59628652 L-4.67740132e-13,37.711453 C-4.67740132e-13,40.6334356 2.29986962,43 5.13950456,43 L30.8604954,43 C33.7001304,43 36,40.6334356 36,37.711453 L36,8.60435178 C36,5.682322 33.7001304,3.30769231 30.8604954,3.30769231 L30.8604954,3.30769231 Z M25.4706344,12.9188889 L25.4706344,10.2464105 L29.1003911,15.003688 L25.4706344,19.9139225 L25.4706344,17.0965996 C25.4706344,17.0965996 18.0390982,15.1807936 13.4237288,23.069326 L12.641445,23.069326 C14.1120946,11.7436248 25.4706344,12.9188889 25.4706344,12.9188889 Z M28.6075619,34.7975356 L10.8735027,34.7975356 C10.3885114,34.7975356 9.89568224,34.5399189 9.77834196,34.2179688 L6.82136673,26.120117 C6.70402644,25.7981197 7.00127322,25.5405502 7.49410243,25.5405502 L25.2282075,25.5405502 C25.7131987,25.5405502 26.2060279,25.7981197 26.3233682,26.120117 L29.2803435,34.2179216 C29.3976838,34.5399189 29.092599,34.7975356 28.6076078,34.7975356 L28.6075619,34.7975356 Z M29.3898,31.9721474 L27.1603345,25.8705655 C27.0038961,25.460039 26.6909734,25.2024695 26.3624206,25.0253639 C26.0260756,24.8483055 25.6427487,24.7436458 25.2203237,24.7436458 L9.88784428,24.7436458 L9.88784428,23.850147 C9.88784428,23.4154719 10.2868013,23.0613079 10.7718383,23.0613079 L12.641445,23.0613079 L12.641445,23.0773913 C12.6023468,23.3591094 12.6805431,24.4699458 12.8057214,24.2123762 C12.9956776,23.8224049 13.2018712,23.4410346 13.4237288,23.069326 L21.4810646,23.069326 C21.7783572,21.9101924 22.3650587,20.445192 23.3741851,20.5015545 L28.0208605,20.5015545 C29.3037657,20.5015545 29.3898,22.2724216 29.3898,22.2724216 L29.3898,31.9721474 Z" id="形状"></path>
-        </g>
-        <polygon id="路径" fill="#31665A" fill-rule="nonzero" transform="translate(399.9218, 119.3649) rotate(8) translate(-399.9218, -119.3649)" points="401.335056 70.3648664 389.921822 70.3648664 389.921822 131.964656 398.508589 131.964656 398.508589 148.054978 389.921822 148.054978 389.921822 168.364866 401.335056 168.364866 401.335056 148.054978 409.921822 148.054978 409.921822 131.964656 401.335056 131.964656"></polygon>
-        <path d="M244.551456,165.609258 C244.684118,165.618431 244.81678,165.624546 244.953344,165.630662 C245.046988,165.63372 245.132828,165.639835 245.226472,165.642893 C245.374741,165.645951 245.52301,165.649009 245.675182,165.649009 L262.269644,165.649009 C262.023829,165.649009 261.785817,165.639835 261.547806,165.630662 C261.411242,165.624546 261.274678,165.618431 261.142016,165.609258 C260.974238,165.600084 260.806459,165.584795 260.638681,165.569507 C260.50992,165.557276 260.38116,165.545044 260.256302,165.529756 C260.072916,165.505293 259.893432,165.480831 259.713948,165.450254 C259.620304,165.438022 259.526661,165.422734 259.433017,165.407445 C259.202809,165.364636 258.972601,165.318769 258.750197,165.26373 C258.711179,165.257614 258.672161,165.251498 258.637044,165.239267 C258.37172,165.175054 258.110298,165.104726 257.856679,165.022166 C257.782545,165.000761 257.712312,164.973241 257.638177,164.948779 C257.462595,164.890682 257.287013,164.829526 257.119235,164.762255 C256.838303,164.652176 256.561274,164.532923 256.292048,164.404496 C256.268637,164.392265 256.245226,164.376976 256.217913,164.364745 C255.976,164.245492 255.74189,164.117066 255.507781,163.979466 C255.386824,163.903022 255.261966,163.82352 255.141009,163.744018 C255.051267,163.682862 254.953722,163.624765 254.86398,163.560552 C254.735219,163.471876 254.614263,163.374028 254.489404,163.279237 C254.407466,163.215024 254.321626,163.156926 254.239688,163.089655 C254.103124,162.979575 253.974364,162.860322 253.845603,162.744127 C253.779272,162.682972 253.712941,162.63099 253.650512,162.569834 C253.459323,162.389426 253.272035,162.199844 253.092551,162.001089 C252.913067,161.805392 252.741387,161.600521 252.573608,161.386477 C252.515081,161.313091 252.464357,161.236646 252.409732,161.16326 C252.300481,161.019545 252.187328,160.872772 252.081978,160.719883 C252.023451,160.62815 251.961022,160.533359 251.902494,160.438569 C251.808851,160.294853 251.715207,160.154196 251.629367,160.007423 C251.566937,159.903459 251.50841,159.793379 251.445981,159.683299 C251.352337,159.515122 251.25089,159.343887 251.161148,159.163478 C251.040191,158.924972 250.923136,158.671177 250.806082,158.414325 C250.782671,158.353169 250.755358,158.295072 250.728045,158.233916 C250.618794,157.974006 250.505641,157.711038 250.400292,157.435838 C250.388586,157.402203 250.376881,157.36551 250.361274,157.331874 C250.26763,157.078079 250.173986,156.818169 250.084244,156.549085 C250.060833,156.484872 250.037422,156.420659 250.017913,156.353388 C249.920367,156.059842 249.826723,155.757123 249.736982,155.44523 C249.717472,155.387132 249.701865,155.329035 249.686258,155.270937 C249.608221,154.989622 249.534087,154.702192 249.45605,154.408646 C249.440443,154.344433 249.424836,154.283277 249.409228,154.219064 C249.354603,154.00502 249.307781,153.781803 249.257057,153.561644 C249.218039,153.387351 249.175119,153.213058 249.1361,153.029592 C249.089279,152.809432 249.046358,152.5801 249.003438,152.350767 C248.968322,152.167301 248.929304,151.986892 248.898089,151.800368 C248.851267,151.558804 248.812249,151.308067 248.773231,151.060388 C248.742016,150.876922 248.710802,150.693455 248.679587,150.503874 C248.640569,150.243963 248.605452,149.971822 248.566434,149.69968 C248.543023,149.513156 248.51571,149.332748 248.488397,149.143166 C248.449379,148.846562 248.418165,148.53467 248.383048,148.225835 C248.363539,148.057658 248.34403,147.88948 248.324521,147.718245 C248.285503,147.357428 248.254288,146.981323 248.219172,146.608275 C248.207466,146.479848 248.195761,146.35448 248.184055,146.226053 C248.141135,145.718464 248.102117,145.198643 248.070902,144.669649 C248.063099,144.562627 248.059197,144.452547 248.051393,144.345525 C248.02408,143.917437 248.000669,143.486292 247.98116,143.045973 C247.98116,142.993991 247.977258,142.945066 247.973357,142.893084 C247.953847,142.437476 247.934338,141.975753 247.922633,141.504857 C247.914829,141.342795 247.910927,141.180733 247.907026,141.015613 C247.89532,140.633392 247.887516,140.245055 247.883615,139.850603 C247.879713,139.688541 247.875811,139.526479 247.875811,139.36136 C247.868007,138.817077 247.864105,138.266678 247.864105,137.704048 C247.864105,137.116957 247.868007,136.545154 247.875811,135.979466 C247.875811,135.796 247.883615,135.615592 247.883615,135.432125 C247.891418,135.05602 247.899222,134.676856 247.910927,134.306866 C247.914829,134.098938 247.922633,133.894067 247.930437,133.686139 C247.942142,133.349784 247.953847,133.016487 247.969455,132.686248 C247.977258,132.47832 247.988964,132.270391 247.996768,132.062463 C248.016277,131.741397 248.031884,131.426447 248.051393,131.114554 C248.063099,130.912741 248.074804,130.713986 248.08651,130.515231 C248.10992,130.194165 248.133331,129.879215 248.160644,129.564265 C248.17235,129.389972 248.187957,129.212621 248.199662,129.038328 C248.234779,128.662223 248.269895,128.292232 248.305012,127.928358 C248.316717,127.827451 248.324521,127.723487 248.336226,127.625639 C248.38695,127.160857 248.437674,126.70525 248.496201,126.261873 C248.504005,126.200718 248.511808,126.14262 248.519612,126.081465 C248.570336,125.71759 248.62106,125.362889 248.671783,125.014303 C248.687391,124.913397 248.702998,124.81249 248.718605,124.711584 C248.781034,124.320189 248.843464,123.931852 248.913696,123.555747 C248.9215,123.512938 248.929304,123.470129 248.937107,123.42732 C248.999537,123.087908 249.065868,122.757669 249.1361,122.433545 C249.15561,122.341812 249.175119,122.250079 249.194628,122.158346 C249.272664,121.803644 249.350701,121.455059 249.436541,121.115646 C249.444345,121.091184 249.448246,121.066722 249.45605,121.039202 C249.534087,120.724252 249.619927,120.418475 249.705767,120.118813 C249.729178,120.036253 249.752589,119.953694 249.776,119.871134 C249.842331,119.650974 249.908662,119.439988 249.974993,119.225944 C250.017913,119.097518 250.056931,118.966034 250.099851,118.840665 C250.173986,118.626621 250.248121,118.421751 250.326157,118.21688 C250.365175,118.115974 250.400292,118.008952 250.43931,117.908045 C250.544659,117.629788 250.657812,117.360705 250.770965,117.097736 C250.782671,117.076332 250.790474,117.054928 250.798278,117.036581 C250.927038,116.743035 251.063602,116.46172 251.200166,116.189579 C251.325024,115.944957 251.453785,115.709509 251.590348,115.480176 C251.629367,115.412905 251.668385,115.348692 251.707403,115.284479 C251.812752,115.110186 251.918102,114.938951 252.031255,114.770773 C252.066371,114.715734 252.101487,114.660694 252.140506,114.605654 C252.284873,114.394668 252.433143,114.192855 252.585314,113.9941 C252.624332,113.945175 252.66335,113.899309 252.702369,113.850385 C252.827227,113.697496 252.952085,113.547665 253.080846,113.40395 C253.139373,113.336679 253.1979,113.272466 253.256428,113.208253 C253.373482,113.085942 253.490537,112.963631 253.607592,112.847436 C253.673923,112.783223 253.740254,112.722067 253.802683,112.660912 C253.931443,112.541659 254.060204,112.428522 254.192866,112.318442 C254.251393,112.26646 254.30992,112.214478 254.368448,112.165553 C254.746925,111.859776 255.148813,111.575404 255.578014,111.318551 C255.648246,111.2788 255.714577,111.242107 255.78481,111.202356 C255.93308,111.119796 256.081349,111.037236 256.23352,110.957734 C256.315459,110.917983 256.397397,110.878232 256.479335,110.838481 C256.627605,110.768152 256.779776,110.700881 256.931947,110.636668 C257.013885,110.603033 257.095824,110.569397 257.177762,110.535762 C257.353344,110.465433 257.53673,110.40122 257.724017,110.340065 C257.782545,110.31866 257.841072,110.297256 257.895698,110.278909 C258.141513,110.199407 258.391229,110.129078 258.644848,110.067923 C258.707277,110.052634 258.769706,110.040403 258.832136,110.025114 C259.027227,109.979248 259.222318,109.936439 259.425213,109.899746 C259.514955,109.881399 259.608599,109.869168 259.702243,109.853879 C259.881727,109.823301 260.061211,109.795782 260.244596,109.774377 C260.342142,109.762146 260.443589,109.749915 260.541135,109.740742 C260.736226,109.719337 260.931318,109.704048 261.126409,109.691817 C261.216151,109.685702 261.305893,109.676529 261.395635,109.673471 C261.68437,109.658182 261.973105,109.649009 262.269644,109.649009 L245.679083,109.649009 C245.382545,109.649009 245.09381,109.658182 244.805075,109.673471 C244.711431,109.676529 244.621689,109.685702 244.531947,109.691817 C244.336856,109.704048 244.141764,109.719337 243.950575,109.740742 C243.849128,109.749915 243.751582,109.762146 243.650134,109.774377 C243.47065,109.795782 243.287265,109.823301 243.111683,109.853879 C243.018039,109.869168 242.924395,109.884457 242.830751,109.899746 C242.631758,109.936439 242.432765,109.979248 242.237674,110.025114 C242.175245,110.040403 242.112815,110.052634 242.050386,110.067923 C241.796768,110.129078 241.547051,110.199407 241.305138,110.278909 C241.24661,110.297256 241.188083,110.31866 241.129555,110.340065 C240.94617,110.40122 240.762784,110.465433 240.5833,110.535762 C240.501362,110.56634 240.423325,110.603033 240.341387,110.636668 C240.185314,110.700881 240.033143,110.768152 239.884873,110.838481 C239.802935,110.878232 239.724898,110.917983 239.64296,110.957734 C239.490789,111.034178 239.338618,111.116738 239.190348,111.202356 C239.124017,111.242107 239.053785,111.2788 238.987454,111.318551 C238.776755,111.44392 238.569958,111.575404 238.370965,111.716061 C238.164168,111.859776 237.969077,112.009607 237.777888,112.165553 C237.715459,112.214478 237.656931,112.26646 237.598404,112.318442 C237.465742,112.428522 237.340883,112.541659 237.212123,112.657854 C237.145792,112.71901 237.083363,112.783223 237.017032,112.847436 C236.899977,112.963631 236.782922,113.082884 236.665868,113.208253 C236.60734,113.272466 236.544911,113.336679 236.486384,113.400892 C236.357623,113.547665 236.232765,113.697496 236.111808,113.850385 C236.07279,113.899309 236.02987,113.945175 235.994754,113.9941 C235.98695,114.006331 235.975245,114.015504 235.967441,114.027735 C235.823073,114.214259 235.682608,114.406899 235.549946,114.605654 C235.510927,114.660694 235.475811,114.715734 235.440695,114.770773 C235.327542,114.938951 235.222192,115.110186 235.116843,115.284479 C235.077825,115.348692 235.038807,115.412905 234.999788,115.480176 C234.863224,115.709509 234.734464,115.944957 234.609606,116.189579 C234.593999,116.214041 234.582293,116.241561 234.570588,116.269081 C234.445729,116.513702 234.324773,116.770555 234.207718,117.036581 C234.199914,117.054928 234.192111,117.070216 234.184307,117.088563 C234.067252,117.354589 233.954099,117.626731 233.844848,117.908045 C233.80583,118.008952 233.770713,118.115974 233.731695,118.21688 C233.65756,118.421751 233.583426,118.626621 233.509291,118.840665 C233.466371,118.966034 233.427353,119.097518 233.384433,119.225944 C233.341513,119.366602 233.294691,119.501144 233.247869,119.647917 C233.22836,119.721303 233.204949,119.800805 233.181538,119.874192 C233.158127,119.953694 233.134716,120.036253 233.115207,120.115755 C233.025465,120.418475 232.943527,120.727309 232.86549,121.045317 C232.857686,121.06978 232.849883,121.091184 232.845981,121.115646 C232.760141,121.455059 232.678202,121.803644 232.604068,122.161403 C232.580657,122.250079 232.565049,122.341812 232.54554,122.433545 C232.475308,122.757669 232.408976,123.087908 232.346547,123.42732 C232.338744,123.470129 232.33094,123.512938 232.323136,123.555747 C232.252903,123.93491 232.186572,124.320189 232.128045,124.714641 C232.112438,124.81249 232.09683,124.913397 232.081223,125.011245 C232.030499,125.359831 231.979776,125.714532 231.929052,126.078407 C231.921248,126.139562 231.913445,126.200718 231.905641,126.264931 L231.893936,126.332202 C231.843212,126.754174 231.792488,127.18532 231.745666,127.625639 C231.733961,127.723487 231.726157,127.827451 231.714452,127.928358 C231.675433,128.292232 231.644219,128.662223 231.609102,129.038328 C231.593495,129.212621 231.58179,129.386914 231.566182,129.564265 C231.542771,129.879215 231.51936,130.197223 231.495949,130.518289 C231.484244,130.713986 231.472538,130.912741 231.456931,131.108439 C231.437422,131.423389 231.421815,131.741397 231.406207,132.065521 C231.394502,132.270391 231.386698,132.47832 231.374993,132.686248 C231.359386,133.016487 231.34768,133.349784 231.335975,133.686139 C231.328171,133.894067 231.320367,134.098938 231.316465,134.306866 C231.30476,134.676856 231.296956,135.05602 231.293055,135.432125 C231.289153,135.615592 231.285251,135.796 231.281349,135.979466 C231.273545,136.545154 231.269644,137.120014 231.269644,137.704048 C231.269644,138.266678 231.273545,138.817077 231.281349,139.36136 C231.281349,139.526479 231.285251,139.688541 231.289153,139.850603 C231.296956,140.245055 231.30476,140.633392 231.312564,141.015613 C231.316465,141.180733 231.324269,141.342795 231.328171,141.504857 C231.343778,141.975753 231.359386,142.437476 231.378895,142.893084 C231.382796,142.945066 231.382796,142.993991 231.386698,143.045973 C231.386698,143.055146 231.386698,143.067377 231.386698,143.079608 C231.406207,143.510754 231.429618,143.929668 231.456931,144.348583 C231.464735,144.455605 231.468637,144.562627 231.472538,144.669649 C231.507655,145.198643 231.546673,145.718464 231.589593,146.226053 C231.601299,146.363653 231.613004,146.492079 231.628611,146.626621 C231.659826,146.993554 231.694942,147.360486 231.730059,147.718245 C231.749568,147.901711 231.772979,148.079062 231.792488,148.262528 C231.827605,148.556074 231.858819,148.855736 231.893936,149.140108 C231.921248,149.338863 231.948561,149.528445 231.975874,149.721085 C232.01099,149.984053 232.046107,150.250079 232.085125,150.503874 C232.11634,150.699571 232.147554,150.886095 232.182671,151.075677 C232.221689,151.317241 232.256805,151.561862 232.303627,151.800368 C232.334842,151.98995 232.37386,152.170358 232.408976,152.356882 C232.455798,152.583157 232.494817,152.81249 232.541639,153.029592 C232.580657,153.213058 232.623577,153.387351 232.662595,153.564702 C232.705515,153.742052 232.740632,153.934692 232.787454,154.112042 C232.795257,154.145678 232.806963,154.182371 232.814766,154.216007 C232.830374,154.283277 232.845981,154.344433 232.861588,154.408646 C232.935723,154.702192 233.013759,154.989622 233.091796,155.267879 C233.111305,155.325977 233.126912,155.387132 233.14252,155.44523 C233.232262,155.757123 233.325905,156.059842 233.423451,156.353388 C233.44296,156.420659 233.466371,156.484872 233.489782,156.549085 C233.579524,156.815111 233.673168,157.078079 233.766812,157.331874 C233.782419,157.36551 233.794124,157.402203 233.80583,157.435838 C233.911179,157.70798 234.024332,157.974006 234.133583,158.233916 C234.160896,158.295072 234.188209,158.353169 234.21162,158.414325 C234.328674,158.671177 234.445729,158.924972 234.570588,159.163478 C234.5979,159.221576 234.625213,159.279674 234.656428,159.334714 C234.718857,159.453967 234.78909,159.567104 234.855421,159.686357 C234.913948,159.793379 234.972476,159.900401 235.034905,160.004365 C235.124647,160.154196 235.214389,160.294853 235.308032,160.438569 C235.36656,160.530302 235.425087,160.62815 235.487516,160.719883 C235.592866,160.872772 235.706019,161.019545 235.81527,161.166318 C235.869895,161.239704 235.920619,161.313091 235.975245,161.383419 C236.143023,161.594406 236.314703,161.799276 236.494187,161.994973 L236.501991,162.004147 C236.677573,162.202902 236.864861,162.389426 237.05605,162.569834 C237.118479,162.63099 237.18481,162.686029 237.251141,162.744127 C237.379902,162.86338 237.508662,162.979575 237.645226,163.089655 C237.723262,163.156926 237.809102,163.215024 237.891041,163.279237 C238.015899,163.377085 238.136856,163.471876 238.265616,163.560552 C238.355358,163.624765 238.452903,163.682862 238.546547,163.744018 C238.644093,163.811289 238.741639,163.881618 238.846988,163.942773 C238.866497,163.955004 238.889908,163.967235 238.913319,163.979466 C239.143527,164.117066 239.381538,164.245492 239.623451,164.364745 C239.646862,164.376976 239.670273,164.392265 239.693684,164.404496 C239.96291,164.53598 240.239939,164.655233 240.520871,164.765313 C240.54038,164.771429 240.559889,164.780602 240.579398,164.789775 C240.727667,164.847873 240.88374,164.896797 241.039813,164.948779 C241.113948,164.973241 241.184181,165.000761 241.258316,165.025224 C241.508032,165.101668 241.765553,165.175054 242.026975,165.239267 L242.038681,165.242325 C242.077699,165.251498 242.116717,165.257614 242.155735,165.266787 C242.378139,165.318769 242.604445,165.367694 242.834653,165.407445 C242.928297,165.425791 243.025842,165.438022 243.119486,165.453311 C243.248246,165.471658 243.373105,165.49612 243.509669,165.514467 C243.556491,165.520582 243.611116,165.52364 243.66184,165.529756 C243.786698,165.545044 243.915459,165.557276 244.044219,165.569507 C244.215899,165.584795 244.379776,165.600084 244.551456,165.609258 Z" id="路径" fill="#474747" fill-rule="nonzero" transform="translate(246.7696, 137.649) rotate(-3) translate(-246.7696, -137.649)"></path>
-        <path d="M294.372179,142.78192 C294.413545,142.31183 294.44739,141.824221 294.481234,141.342452 C294.503797,141.024192 294.530121,140.711772 294.548923,140.387672 C294.579007,139.841667 294.60157,139.283983 294.620373,138.723378 C294.631654,138.448916 294.646696,138.183212 294.654217,137.90291 C294.680541,137.062004 294.691823,136.203578 294.691823,135.333473 C294.691823,134.586001 294.680541,133.850208 294.661738,133.120254 C294.654217,132.892508 294.646696,132.670602 294.639175,132.442857 C294.627894,132.127517 294.620373,131.806337 294.605331,131.493917 C294.594049,131.274931 294.579007,131.064704 294.567726,130.848638 C294.556444,130.685129 294.548923,130.518699 294.537642,130.355189 C294.496276,129.680712 294.44739,129.012075 294.387221,128.355116 C294.3797,128.270442 294.372179,128.185767 294.360898,128.098173 C294.30449,127.51129 294.240562,126.933167 294.169112,126.363803 C294.150309,126.209053 294.135267,126.054303 294.112704,125.902472 C294.029973,125.271792 293.939721,124.646952 293.838187,124.036711 C293.826906,123.946196 293.808103,123.858602 293.793061,123.771008 C293.702809,123.227922 293.601275,122.693596 293.495981,122.168029 C293.469658,122.027878 293.439574,121.884807 293.40949,121.744656 C293.296674,121.195731 293.176338,120.652646 293.04472,120.11832 C293.037199,120.080362 293.025918,120.045324 293.014636,120.007367 C292.995834,119.922692 292.973271,119.843857 292.950708,119.762102 C292.82285,119.248215 292.683712,118.746007 292.540812,118.249638 C292.506968,118.138685 292.476884,118.024812 292.443039,117.91386 C292.281337,117.373694 292.112115,116.842288 291.93161,116.319641 C291.894005,116.214527 291.8564,116.109414 291.818795,116.004301 C291.653333,115.531291 291.476589,115.06704 291.296084,114.611549 C291.269761,114.535634 291.239677,114.459719 291.209593,114.386723 C291.006525,113.884515 290.795937,113.393987 290.574067,112.912217 C290.52518,112.804184 290.472533,112.696151 290.419886,112.585198 C290.198016,112.112188 289.968625,111.647937 289.731713,111.192446 C289.724192,111.177847 289.716671,111.163248 289.70915,111.148649 C289.70915,111.142809 289.70539,111.13697 289.701629,111.13405 C289.543688,110.833309 289.374465,110.547167 289.205242,110.258106 C289.084906,110.044959 288.96833,109.823053 288.844234,109.615746 C288.656208,109.303326 288.456901,109.005505 288.261355,108.704764 C288.144779,108.523736 288.031964,108.336868 287.911628,108.158759 C287.685997,107.8259 287.449085,107.50764 287.212173,107.189381 C287.11064,107.052149 287.012867,106.909078 286.911333,106.771847 C286.565366,106.325115 286.208118,105.887143 285.839588,105.46377 C285.512424,105.084194 285.170218,104.719217 284.824251,104.363 C284.745281,104.281245 284.66631,104.19949 284.587339,104.117736 C284.241373,103.770278 283.891646,103.431579 283.530637,103.10456 C283.48175,103.060763 283.432864,103.022805 283.387738,102.979008 C283.056813,102.684107 282.718367,102.397965 282.372401,102.120582 C282.289669,102.053427 282.206938,101.986271 282.124207,101.922035 C281.744396,101.621294 281.357064,101.332232 280.95845,101.05193 C280.88324,100.999374 280.804269,100.946817 280.725298,100.89426 C280.36805,100.648996 280.003281,100.409571 279.630991,100.178906 C279.555781,100.135108 279.484331,100.085472 279.409121,100.041674 C279.371516,100.015396 279.333911,99.9920375 279.292545,99.968679 C278.897692,99.7292542 278.491557,99.5044285 278.081662,99.2825226 C277.980128,99.2299659 277.874834,99.1774093 277.7733,99.1248526 C277.416052,98.9409043 277.051283,98.7627956 276.682753,98.5905265 C276.532333,98.520451 276.381912,98.4503754 276.235253,98.3861395 C275.878004,98.2255497 275.516996,98.0737194 275.152227,97.9277286 C275.020609,97.875172 274.892752,97.8196955 274.761134,97.7700586 C274.704726,97.7496199 274.65584,97.7262614 274.603193,97.7058227 C274.189537,97.5481527 273.760839,97.402162 273.335902,97.2590911 C273.238128,97.2269731 273.140355,97.1948552 273.046342,97.1627372 C272.542435,97.0021474 272.034766,96.8473972 271.515816,96.7072461 C271.463169,96.6926471 271.410522,96.6809678 271.357875,96.6663687 C271.087118,96.5933734 270.816362,96.520378 270.538084,96.4532223 C270.297412,96.3977458 270.052979,96.3422693 269.808546,96.2897126 C269.744617,96.2751136 269.676928,96.2575947 269.609239,96.2429956 C269.075247,96.126203 268.526213,96.0240095 267.973418,95.9276556 C267.871884,95.9101367 267.770351,95.8926179 267.665057,95.8780188 C267.194993,95.7991838 266.721169,95.7261884 266.236064,95.6648723 C266.160854,95.6531931 266.081883,95.6473534 266.002912,95.6356742 C265.886337,95.6210751 265.769761,95.6093958 265.653185,95.5947968 C265.126714,95.5334807 264.592722,95.480924 264.047449,95.4371268 C263.972238,95.4283673 263.893268,95.4225277 263.818058,95.4166881 C263.223897,95.369971 262.618456,95.3349333 262.009254,95.3115748 C261.870115,95.3057351 261.730976,95.2998955 261.591837,95.2940559 C261.422614,95.2911361 261.253392,95.2794568 261.084169,95.276537 C260.625387,95.2648577 260.159084,95.2590181 259.689021,95.2590181 L243.695583,95.2590181 C244.33863,95.2590181 244.974156,95.2736172 245.5984,95.2940559 C245.737538,95.2998955 245.876677,95.3057351 246.015816,95.3115748 C246.625018,95.3349333 247.23046,95.369971 247.82086,95.4166881 C247.89983,95.4225277 247.978801,95.4283673 248.054011,95.4371268 C248.595524,95.480924 249.129516,95.5334807 249.659748,95.5947968 C249.776323,95.6093958 249.892899,95.6210751 250.009475,95.6356742 C250.56979,95.7057497 251.126345,95.7875045 251.671619,95.8780188 C251.773153,95.8926179 251.874686,95.9101367 251.97622,95.9276556 C252.532775,96.0240095 253.078049,96.1291228 253.615801,96.2429956 C253.68349,96.2575947 253.747419,96.2721938 253.815108,96.2897126 C254.337819,96.4065052 254.856769,96.5320573 255.364437,96.6663687 C255.417084,96.6809678 255.469731,96.6926471 255.518618,96.7072461 C256.037568,96.8473972 256.548997,97.0021474 257.049144,97.165657 C257.146918,97.1948552 257.244691,97.2269731 257.338704,97.2590911 C257.823809,97.4196809 258.297633,97.5890301 258.763936,97.7700586 C258.895554,97.8196955 259.027171,97.875172 259.155029,97.9277286 C259.523558,98.0737194 259.884567,98.2255497 260.238055,98.3861395 C260.388475,98.4532953 260.538895,98.520451 260.689316,98.5905265 C261.057845,98.7627956 261.422614,98.9409043 261.779863,99.1277724 C261.881396,99.1803291 261.986691,99.2299659 262.088224,99.2825226 C262.539485,99.5248672 262.983225,99.7788911 263.419444,100.041674 C263.494654,100.088391 263.566104,100.135108 263.637553,100.181825 C264.009843,100.412491 264.374613,100.648996 264.731861,100.89718 C264.810832,100.949737 264.889802,101.002293 264.968773,101.05485 C265.363626,101.335152 265.750958,101.624214 266.13453,101.922035 C266.217261,101.989191 266.296232,102.056346 266.378963,102.120582 C266.72493,102.400885 267.063375,102.687026 267.3943,102.981928 C267.443187,103.022805 267.492073,103.063682 267.537199,103.10456 C267.898208,103.431579 268.247935,103.773197 268.593902,104.117736 C268.672873,104.19949 268.751843,104.281245 268.830814,104.363 C269.17678,104.722137 269.518987,105.087114 269.846151,105.46377 C270.21468,105.890063 270.571929,106.325115 270.917895,106.774767 C271.030711,106.920758 271.136005,107.078428 271.245059,107.227338 C271.47445,107.536838 271.703841,107.840499 271.91819,108.158759 C272.057329,108.360226 272.181426,108.573373 272.316804,108.780679 C272.497308,109.058062 272.681573,109.329605 272.850796,109.615746 C272.989935,109.843492 273.114032,110.082917 273.245649,110.316502 C273.403591,110.590965 273.565293,110.865427 273.715713,111.148649 C273.726994,111.166168 273.734515,111.183687 273.742036,111.198286 C273.982709,111.650857 274.208339,112.118028 274.430209,112.588118 C274.479096,112.696151 274.531743,112.807104 274.58439,112.918057 C274.802499,113.399826 275.013088,113.887435 275.216155,114.386723 C275.25,114.462639 275.276323,114.541474 275.306407,114.617389 C275.486912,115.07288 275.659895,115.534211 275.825357,116.004301 C275.862962,116.112334 275.900568,116.217447 275.938173,116.322561 C276.118677,116.845207 276.2879,117.376614 276.449602,117.916779 C276.483446,118.027732 276.517291,118.141605 276.547375,118.255478 C276.694035,118.748926 276.829413,119.254054 276.961031,119.762102 C276.979833,119.846777 277.002396,119.925612 277.024959,120.010286 C277.164098,120.57965 277.295716,121.157774 277.419812,121.747576 C277.449897,121.887727 277.47622,122.030798 277.506304,122.173869 C277.611598,122.699436 277.709372,123.230842 277.799624,123.768088 C277.814666,123.858602 277.833468,123.949116 277.84851,124.039631 C277.950044,124.649872 278.036536,125.271792 278.119267,125.902472 C278.14183,126.057222 278.156872,126.211973 278.179435,126.366723 C278.250885,126.939006 278.311053,127.51421 278.36746,128.098173 C278.378742,128.185767 278.390023,128.270442 278.397544,128.360956 C278.457712,129.017914 278.506599,129.683632 278.547965,130.358109 C278.555486,130.524539 278.566767,130.690968 278.574288,130.854478 C278.604372,131.380044 278.626935,131.911451 278.645738,132.445777 C278.653259,132.670602 278.66454,132.895428 278.668301,133.123174 C278.687103,133.853127 278.702145,134.588921 278.702145,135.339313 C278.702145,136.209418 278.687103,137.064923 278.66454,137.90875 C278.653259,138.186132 278.638217,138.454755 278.630696,138.729218 C278.608133,139.286902 278.58933,139.844587 278.555486,140.390592 C278.536683,140.714692 278.51036,141.027112 278.487797,141.345372 C278.453952,141.830061 278.420107,142.31475 278.378742,142.78776 C278.348658,143.120619 278.311053,143.444718 278.277208,143.774657 C278.228322,144.215549 278.183195,144.662281 278.130548,145.094414 C278.089183,145.427272 278.040296,145.751372 277.99517,146.075471 C277.935002,146.493005 277.878594,146.913458 277.810905,147.319312 C277.758258,147.646332 277.69809,147.964591 277.641682,148.285771 C277.570233,148.679946 277.498783,149.074121 277.419812,149.456617 C277.355884,149.774876 277.284434,150.084377 277.216745,150.396797 C277.134014,150.770533 277.047522,151.144269 276.95727,151.509246 C276.88206,151.815827 276.803089,152.116568 276.720358,152.414389 C276.626345,152.770606 276.528572,153.123904 276.427039,153.471362 C276.325505,153.81298 276.220211,154.148759 276.114916,154.478698 C276.043467,154.694764 275.975778,154.91083 275.904328,155.121057 C275.77271,155.500633 275.637332,155.871449 275.498193,156.242266 C275.434265,156.417455 275.370336,156.592643 275.302647,156.761993 C275.095819,157.296319 274.87771,157.818966 274.648319,158.329933 C274.640798,158.341612 274.633277,158.356211 274.625756,158.37081 C274.403886,158.867179 274.170734,159.348948 273.926301,159.821958 C273.854852,159.95919 273.779641,160.093501 273.704431,160.230732 C273.527687,160.566511 273.343423,160.89937 273.155397,161.223469 C273.061385,161.384059 272.967372,161.541729 272.873359,161.699399 C272.689094,162.00014 272.501069,162.295041 272.309283,162.587023 C272.21527,162.733013 272.117497,162.881924 272.019724,163.024995 C271.794094,163.352014 271.560942,163.673194 271.32403,163.985614 C271.256341,164.076128 271.192412,164.172482 271.120963,164.262996 C270.797559,164.67761 270.466634,165.086384 270.120668,165.477639 C264.400936,171.997585 255.590068,175.259018 243.691823,175.259018 L259.68526,175.259018 C271.583505,175.259018 280.390613,171.997585 286.114105,165.477639 C286.441269,165.103903 286.757152,164.721407 287.065514,164.324312 C287.084316,164.303874 287.099358,164.280515 287.1144,164.262996 C287.182089,164.172482 287.246018,164.076128 287.317468,163.985614 C287.55438,163.673194 287.783771,163.352014 288.009401,163.024995 C288.110935,162.879004 288.204947,162.733013 288.302721,162.587023 C288.494506,162.295041 288.682532,162.00014 288.863036,161.699399 C288.960809,161.541729 289.054822,161.384059 289.148835,161.223469 C289.33686,160.89937 289.517364,160.569431 289.697869,160.230732 C289.769318,160.093501 289.844529,159.95919 289.915978,159.821958 C289.938541,159.778161 289.964865,159.734364 289.987428,159.690567 C290.205537,159.261354 290.416126,158.823382 290.615433,158.37665 C290.622954,158.359131 290.630475,158.344532 290.637996,158.327013 C290.867387,157.818966 291.085496,157.296319 291.296084,156.761993 C291.363774,156.592643 291.423942,156.417455 291.48787,156.242266 C291.627009,155.874369 291.766148,155.500633 291.897766,155.118137 C291.969215,154.90791 292.036904,154.694764 292.104593,154.481617 C292.172283,154.274311 292.243732,154.075763 292.307661,153.865537 C292.345266,153.737065 292.379111,153.602753 292.416716,153.471362 C292.518249,153.123904 292.616022,152.770606 292.713796,152.414389 C292.792766,152.116568 292.875497,151.815827 292.950708,151.509246 C293.04096,151.144269 293.123691,150.770533 293.210183,150.393877 C293.277872,150.084377 293.349321,149.774876 293.41325,149.459536 C293.48846,149.074121 293.56367,148.679946 293.631359,148.285771 C293.691528,147.964591 293.747935,147.646332 293.804343,147.322232 C293.868271,146.913458 293.92844,146.495925 293.984847,146.078391 C294.022452,145.827287 294.063818,145.582023 294.097662,145.327999 C294.105183,145.252084 294.112704,145.173249 294.120225,145.097333 C294.176633,144.662281 294.221759,144.218469 294.266885,143.774657 C294.30073,143.441798 294.342095,143.117699 294.372179,142.78192 Z" id="路径" fill="#474747" fill-rule="nonzero" transform="translate(269.1918, 135.259) rotate(-3) translate(-269.1918, -135.259)"></path>
-        <polygon id="路径" fill="#31665A" fill-rule="nonzero" transform="translate(171.8865, 136.0735) rotate(-7) translate(-171.8865, -136.0735)" points="181.886474 148.673244 173.296645 148.673244 173.296645 87.0734549 161.886474 87.0734549 161.886474 148.673244 170.47362 148.673244 170.47362 164.763566 161.886474 164.763566 161.886474 185.073455 173.296645 185.073455 173.296645 164.763566 181.886474 164.763566"></polygon>
-        <path d="M129.237516,114.972158 C129.148062,115.283291 129.052837,115.589562 128.960498,115.895834 C128.709451,116.72228 128.452633,117.539003 128.187157,118.355727 C128.097704,118.627968 128.011136,118.905071 127.921682,119.177312 C127.569639,120.232246 127.206053,121.28718 126.830926,122.332392 C126.793413,122.439344 126.753014,122.546296 126.712616,122.653247 C126.317289,123.747073 125.907534,124.831176 125.48335,125.905557 L111.421822,161.749018 L123.691393,161.749018 L137.752921,125.905557 C138.17999,124.831176 138.58686,123.742212 138.985072,122.653247 C139.022585,122.546296 139.062984,122.439344 139.103382,122.332392 C139.126467,122.264332 139.152437,122.196271 139.175522,122.128211 C139.527565,121.15106 139.86518,120.169047 140.194139,119.177312 C140.283592,118.905071 140.37016,118.632829 140.459614,118.355727 C140.725089,117.539003 140.981908,116.717419 141.232955,115.895834 C141.325294,115.589562 141.417633,115.283291 141.507087,114.97702 C141.824503,113.907501 142.133262,112.82826 142.421822,111.749018 L130.152251,111.749018 C129.860805,112.82826 129.554932,113.90264 129.237516,114.972158 Z" id="路径" fill="#31665A" fill-rule="nonzero" transform="translate(126.9218, 136.749) rotate(9) translate(-126.9218, -136.749)"></path>
-        <path d="M355.782491,88.0165493 C355.615126,88.3027914 355.436963,88.584561 355.2642,88.8663306 C354.794499,89.6266611 354.314,90.3780466 353.817304,91.1294322 C353.649939,91.379894 353.487973,91.6348284 353.320609,91.8852902 C352.661947,92.8558298 351.98169,93.8263694 351.279838,94.787964 C351.209653,94.8863597 351.134069,94.9847554 351.058484,95.0831512 C350.31884,96.0894711 349.552201,97.0868459 348.758568,98.0752756 L322.449902,131.05126 L345.405873,131.05126 L371.71454,98.0752756 C372.513571,97.0868459 373.274811,96.0849985 374.019855,95.0831512 C374.09004,94.9847554 374.165624,94.8863597 374.241208,94.787964 C374.284399,94.7253485 374.332989,94.6627331 374.37618,94.6001176 C375.034841,93.7011385 375.666508,92.7976869 376.281979,91.8852902 C376.449344,91.6348284 376.61131,91.3843665 376.778674,91.1294322 C377.27537,90.3780466 377.755869,89.6221886 378.22557,88.8663306 C378.398334,88.584561 378.571097,88.3027914 378.738462,88.0210219 C379.332337,87.0370646 379.910016,86.0441624 380.449902,85.0512601 L357.493931,85.0512601 C356.948645,86.0441624 356.376366,87.0325921 355.782491,88.0165493 Z" id="路径" fill="#31665A" fill-rule="nonzero" filter="url(#filter-1)" transform="translate(351.4499, 108.0513) rotate(9) translate(-351.4499, -108.0513)"></path>
-        <path d="M162.266094,153.474933 L176,153.474933 L176,169.565254 L162.266094,169.565254 L162.266094,189.875143 L138.699571,189.875143 L138.699571,169.565254 L90,169.565254 L90,155.150241 L140.025751,91.8751432 L162.266094,91.8751432 L162.266094,153.474933 Z M139.384059,125.088832 C139.637185,119.798534 139.839687,116.728536 140,115.875143 L139.384059,115.875143 C137.447642,119.617511 135.161067,123.2158 132.558083,126.636761 L112,153.875143 L139.000151,153.875143 L139.000151,137.19519 C139.000151,134.420739 139.126714,130.382824 139.384059,125.088832" id="形状" fill="#2E8F79" fill-rule="nonzero" transform="translate(133, 140.8751) rotate(-7) translate(-133, -140.8751)"></path>
-        <path d="M391.266094,126.59979 L405,126.59979 L405,142.690111 L391.266094,142.690111 L391.266094,163 L367.699571,163 L367.699571,142.690111 L319,142.690111 L319,128.275098 L369.025751,65 L391.266094,65 L391.266094,126.59979 Z M368.384059,98.2136885 C368.637185,92.923391 368.839687,89.853393 369,89 L368.384059,89 C366.447642,92.7423683 364.161067,96.3406572 361.558083,99.7616177 L341,127 L368.000151,127 L368.000151,110.320047 C368.000151,107.545596 368.126714,103.50768 368.384059,98.2136885" id="形状" fill="#2E8F79" fill-rule="nonzero" transform="translate(362, 114) rotate(8) translate(-362, -114)"></path>
-        <path d="M278.639003,106.204752 C284.215367,113.00792 287.003548,122.967408 287,136.077375 C287,149.651593 284.30061,159.695755 278.898286,166.218621 C273.495962,172.738567 265.17759,175.99708 253.939619,176 C243.046175,176 234.830806,172.630534 229.297064,165.894522 C223.763322,159.161429 220.996452,149.22238 221,136.077375 C221,122.365926 223.692286,112.257528 229.069747,105.755101 C234.454313,99.2526735 242.74427,96.0029198 253.939619,96 C264.82596,96 273.059087,99.401584 278.639003,106.204752 Z M263.906941,156.785302 C265.955042,152.643592 266.977336,145.897033 266.973832,136.551413 C266.973832,127.104494 265.94099,120.31452 263.878837,116.187282 C261.816684,112.060043 258.503889,109.996424 253.94748,109.999315 C249.299731,109.999315 245.979911,112.062937 243.980992,116.187282 C241.975048,120.31452 240.973832,127.104494 240.973832,136.551413 C240.973832,146.004121 241.964509,152.773835 243.945862,156.863448 C245.927215,160.955955 249.261088,162.999315 253.94748,162.999315 C258.542533,162.999315 261.865866,160.929907 263.906941,156.785302" id="形状" fill="#2C2C2C" fill-rule="nonzero" transform="translate(254, 136) rotate(-3) translate(-254, -136)"></path>
-        <g id="预热中" transform="translate(175, 34.5) rotate(19) translate(-175, -34.5)translate(162, 18)" fill="#2E8F79" fill-rule="nonzero">
-            <path d="M9.66121167,33 C9.66121167,33 -4.78780299,29.7806667 1.65457451,13.805 C1.65457451,13.805 3.14099187,15.576 2.91858528,16.4376667 C2.91858528,16.4376667 4.06768599,12.4043333 6.54010589,9.999 C8.6640888,7.92366667 10.8288463,2.101 8.8383073,0 C8.8383073,0 18.7057462,2.101 19.7955385,12.6206667 C19.7955385,12.6206667 21.0595493,9.26933333 23.6468793,8.94666667 C23.1490663,10.4410345 23.1490663,12.0539655 23.6468793,13.5483333 C23.6468793,13.5483333 31.8203214,27.742 17.7012098,32.5416667 C17.7012098,32.5416667 21.9232282,27.676 12.9676563,19.3123333 C12.9676563,19.3123333 10.8547937,23.782 9.5944897,25.3623333 C9.5944897,25.3623333 6.07305206,29.3773333 9.5944897,32.9853333 L9.66121167,33 Z" id="路径"></path>
-        </g>
-        <g id="cluster" transform="translate(472.3758, 65.3019)" fill="#1C293A" fill-rule="nonzero">
-            <path d="M22.2179953,12.9838205 L22.2179953,16.1302119 C28.0624324,16.5512048 32.9192647,20.317993 34.6572002,25.4124133 L36.4367551,25.4124133 C37.6448601,25.4124133 38.6242355,26.3398206 38.6242355,27.4838205 L38.6242355,31.6266723 C38.6242355,32.7707096 37.6448601,33.6981169 36.4367551,33.6981169 L32.0617551,33.6981169 C30.8536108,33.6981169 29.8742355,32.7707096 29.8742355,31.6266723 L29.8742355,27.4838578 C29.8742355,26.3398206 30.8536108,25.4124133 32.0617551,25.4124133 L32.3353329,25.4124133 C30.7116638,21.4754158 26.842003,18.6034472 22.2179953,18.2088153 L22.2179953,25.4124133 L23.3117551,25.4124133 C24.5198601,25.4124133 25.4992355,26.3398206 25.4992355,27.4838205 L25.4992355,31.6266723 C25.4992355,32.7707096 24.5198601,33.6981169 23.3117551,33.6981169 L18.9367158,33.6981169 C17.7286108,33.6981169 16.7492355,32.7707096 16.7492355,31.6266723 L16.7492355,27.4838578 C16.7492355,26.3398206 17.7286108,25.4124133 18.9367158,25.4124133 L20.0304756,25.4124133 L20.0304756,18.2088153 C15.4064679,18.6034472 11.5368071,21.4754158 9.91313799,25.4124133 L10.1867158,25.4124133 C11.3948601,25.4124133 12.3742355,26.3398206 12.3742355,27.4838205 L12.3742355,31.6266723 C12.3742355,32.7707096 11.3948601,33.6981169 10.1867158,33.6981169 L5.81175514,33.6981169 C4.60361081,33.6981169 3.62423545,32.7707096 3.62423545,31.6266723 L3.62423545,27.4838578 C3.62423545,26.3398206 4.60361081,25.4124133 5.81171577,25.4124133 L7.59127067,25.4124133 C9.32920616,20.317993 14.1860385,16.5512048 20.0304756,16.1302119 L20.0304756,12.9838205 L18.9367158,12.9838205 C17.7286108,12.9838205 16.7492355,12.0564132 16.7492355,10.9124133 L16.7492355,6.76956144 C16.7492355,5.62552419 17.7286108,4.69811689 18.9367158,4.69811689 L23.3117551,4.69811689 C24.5198601,4.69811689 25.4992355,5.62552419 25.4992355,6.76956144 L25.4992355,10.912376 C25.4992355,12.0564132 24.5198601,12.9838205 23.3117551,12.9838205 L22.2179953,12.9838205 L22.2179953,12.9838205 Z" id="路径" transform="translate(21.1242, 19.1981) rotate(-18) translate(-21.1242, -19.1981)"></path>
-        </g>
-        <g id="提供服务-(1)" transform="translate(420, 27) rotate(11) translate(-420, -27)translate(405, 12)" fill="#2E8F79" fill-rule="nonzero">
-            <path d="M6.96249999,0.00187470455 C3.11721743,0.00187470455 0,3.11876756 0,6.96364962 C0,10.8085317 3.11721743,13.9254244 6.96249999,13.9254244 L13.92875,13.9254244 L13.92875,6.96364962 C13.9284185,5.11694065 13.1944219,3.34599974 11.888231,2.0404137 C10.5820401,0.734827666 8.81065135,0.00154330496 6.96375001,0.00187470455 L6.96249999,0.00187470455 L6.96249999,0.00187470455 Z M30,6.96364962 C30,3.11773213 26.8819431,0 23.035625,0 C19.1893069,0 16.07125,3.11773213 16.07125,6.96364962 L16.07125,13.9254244 L23.0375,13.9254244 C26.8827826,13.9254244 30,10.8085317 30,6.96364962 Z M0,23.0357254 C0,26.8809526 3.11749725,29.9981252 6.963125,29.9981252 C10.8087528,29.9981252 13.92625,26.8809526 13.92625,23.0357254 L13.92625,16.0739506 L6.96249999,16.0739506 C3.11770554,16.0739506 0.000690279091,19.1900816 0,23.0344755 L0,23.0357254 Z M23.03375,16.0739506 L16.0687499,16.0739506 L16.0687499,23.0357254 C16.0680597,26.8812977 19.1852771,29.9993095 23.0312499,29.9999999 C26.8772228,30.00069 29.9955594,26.8837974 29.9962499,23.0382251 C29.9969402,19.1926528 26.8797228,16.074641 23.03375,16.0739506 L23.03375,16.0739506 Z" id="形状"></path>
-        </g>
-        <g id="版本" transform="translate(289, 50)" fill="#1C293A" fill-rule="nonzero">
-            <path d="M30.1134744,17.6300744 L16.9609932,23.9451004 C15.7025289,24.5315354 15.2015045,24.5315354 14.0390068,23.9451004 L0.886555886,17.6300744 C0.189057248,17.2341663 0,15.7680789 0,14.9683509 C0.878987541,15.5036019 2.11202224,16.1013393 2.06706628,16.0708227 L15.5,22.6855247 L28.9329337,16.0708227 C28.9568497,16.0645256 30.1540104,15.4202868 31,14.9683509 C31,15.7871316 30.7614761,17.3061789 30.1134744,17.6300744 L30.1134744,17.6300744 Z M30.1134744,11.0136286 L16.9609932,17.3303984 C15.7025289,17.9152187 15.2015045,17.9152187 14.0390068,17.3303984 L0.886555886,11.0136286 C-0.145554403,10.4288083 -0.11397927,8.58441231 0.886555886,7.89535125 L14.0390068,0.477788812 C15.2015045,-0.142327391 15.9274601,-0.175976356 16.9609932,0.477788812 L30.1134441,7.89535125 C31.1140095,8.48188307 31.0810116,10.5329522 30.1134744,11.0136286 L30.1134744,11.0136286 Z M15.5,1.73736453 C15.6126485,1.78073815 15.6525349,1.95452454 15.5,1.73736453 L15.5,1.73736453 Z M15.5,29.3019705 L28.9329337,22.6854924 C28.9568497,22.6806485 30.1540104,22.0349565 31,21.5830206 C31,22.4019628 30.7614458,23.9226247 30.1134441,24.2445827 L16.9609932,30.5613848 C15.7025289,31.1462051 15.2015045,31.1462051 14.0390068,30.5613848 L0.886555886,24.244615 C0.189057248,23.8490297 0,22.3842341 0,21.5830206 C0.878987541,22.1199185 2.11202224,22.7160413 2.06706628,22.6855247 L15.5,29.3019705 L15.5,29.3019705 Z" id="形状"></path>
-        </g>
-        <g id="15安全" transform="translate(39, 57) rotate(-9) translate(-39, -57)translate(8, 28)" fill-rule="nonzero">
-            <g id="bg" fill="#2E8F79">
-                <path d="M32.8053143,55.7584099 C45.6027678,58.4673821 61.7264902,45.0735044 62,28.9642687 C61.2293819,13.1641404 48.5871178,-0.112390628 31.430588,0.000717425236 C14.2740583,0.113825479 2.98351726,16.7369528 2.23590242,28.9642687 C1.36332701,42.8958097 15.3721279,54.3387555 32.8053143,55.7584099 Z" id="1" opacity="0.200000003"></path>
-                <path d="M27.4654482,57.9776186 C42.2260461,58.6213044 55.2553298,45.2611206 54.9308964,33.3500578 C53.3941336,17.7573702 42.6341964,5.4950478 27.4654482,6.57439838 C12.2967,7.65374898 0,18.6798836 0,31.2019591 C0.404406342,41.1896852 12.8418015,56.2468992 27.4654482,57.9776186 Z" id="2" opacity="0.300000012"></path>
-                <path d="M29.4187643,52.8312608 C46.5745539,55.7582322 58.4150068,42.9672866 58.3480567,28.9243337 C59.4147307,15.6705233 42.9546215,1.34068325 27.7750125,1.81952215 C11.8725943,1.81952215 2.02971657,13.786173 2.19939487,26.3136557 C3.06435426,33.0966257 6.84983704,50.3645724 29.4187643,52.8312608 Z" id="3" opacity="0.400000006"></path>
-                <path d="M27.3330137,52.2793115 C42.6638375,55.3008656 54.6588028,51.4746036 54.4915449,28.9270945 C51.1110551,12.1572385 38.5561637,6.27883381 28.5640661,6.37614919 C10.3981525,7.08445923 3.35655869,16.7831616 2.63658513,28.9270945 C3.85514851,36.1076198 10.9032477,50.5639166 27.3330137,52.2793115 Z" id="4" opacity="0.400000006"></path>
-                <path d="M27.6512699,46.8505602 C42.2624687,44.9186368 52.1105816,36.1303502 52.3494109,25.9807095 C54.1698754,11.3179076 43.2535869,3.26983689 28.7498879,4.0261536 C15.7141675,7.02246237 8.41814291,14.9706748 6.6151887,25.9807095 C6.59842333,35.4672271 5.16509208,50.6098628 27.6512699,46.8505602 Z" id="5" opacity="0.600000024"></path>
-            </g>
-            <path d="M30.99998,27.6608975 L30.99998,45.4901961 C30.7933899,45.4386245 30.5895984,45.3780335 30.3892955,45.3086341 L30.2695383,45.2659392 C30.0378148,45.1804946 29.8163752,45.0730304 29.6088007,44.9452875 L29.6080817,44.9453916 C28.5688218,44.2169083 27.5460873,43.4686298 26.5405305,42.7010434 L26.1642532,42.4122944 C25.2669509,41.7221075 24.412728,40.9857522 23.6056604,40.2067644 L23.4334398,40.0391865 C22.7056961,39.3246144 22.0440781,38.5552949 21.4554524,37.7392937 L21.3459411,37.585747 C20.7755698,36.7670424 20.2867146,35.9025722 19.8852848,35.0029183 L19.8153519,34.8437902 C19.3666848,33.7995744 19.0175677,32.7212964 18.7719689,31.6212066 C18.5047689,30.4564098 18.3021898,29.1356363 18.1627812,27.6608975 L30.99998,27.6608975 Z M31,13.6470588 L31,25.5761847 L18.0241074,25.5761847 C17.977638,24.6992389 17.9427859,23.7854758 17.919551,22.8342273 C17.8956135,21.8136234 17.8839947,20.7926879 17.8846409,19.7717303 C17.8846409,19.5024866 18.1129702,19.3288495 18.5701791,19.2500972 L18.6151374,19.2427726 C19.1254996,19.1676505 19.6376298,19.1031997 20.151134,19.0494679 L20.4594001,19.0185154 C21.2779866,18.9316402 22.0907463,18.803139 22.8939557,18.633599 C23.7415232,18.458519 24.5461249,18.1311857 25.3077638,17.6498112 L25.398954,17.5913068 C25.8981043,17.285482 26.3744437,16.949232 26.8247953,16.5848289 L26.9470028,16.484724 L27.6332176,15.9150333 L27.6332176,15.9150333 L28.3207609,15.346702 C28.6882244,15.0424503 29.0674298,14.7505016 29.4576359,14.4714235 L29.6255385,14.3526082 C30.0448501,14.0581916 30.5076929,13.8206016 31,13.6470588 Z" id="形状结合" fill="url(#linearGradient-2)"></path>
-            <path d="M32.1929949,26.1568627 L44.1153846,26.1568627 C44.0068946,27.7417197 43.8394127,29.1496006 43.6122626,30.3783461 C43.3844332,31.6078131 43.0921868,32.7336821 42.7348496,33.7559602 L42.7348494,33.7559606 C42.3897839,34.7522521 41.9432314,35.7055986 41.4031316,36.5990543 L41.4031318,36.5990542 C40.8398963,37.517198 40.2098662,38.3872135 39.5187945,39.2011491 L39.5187955,39.2011479 C38.7211323,40.1398116 37.8809226,41.0367712 37.0011448,41.8888499 L37.0011528,41.8888421 C35.9371919,42.926005 34.8653864,43.9540764 33.7858289,44.9729518 L33.7858289,44.9729518 C33.2917749,45.2545964 32.7503179,45.4303494 32.1923077,45.4901961 L32.1923077,26.1568627" id="路径" fill="#FFFFFF"></path>
-            <path d="M37.2063551,17.2339831 L37.2063553,17.2339833 C37.8528349,17.6745038 38.596078,17.9703654 39.3802954,18.0993618 C40.1759417,18.2327108 40.9240125,18.3216102 41.6252351,18.3653653 C42.3264578,18.4098148 42.9171545,18.4487084 43.3965948,18.4820457 C43.8753009,18.5153829 44.1153846,18.6424812 44.1153846,18.864034 C44.1153846,21.1712485 44.0802502,23.2228796 44.0099814,25.0196078 L31,25.0196078 L31,12.5098039 C31.5841092,12.643153 32.1345491,12.8917922 32.6483893,13.258502 L32.6483904,13.2585027 C33.1752277,13.6347449 33.6732406,14.0460106 34.1386682,14.4892007 C34.618105,14.9441143 35.1033986,15.4156997 35.5938184,15.9032569 C36.0849691,16.3915076 36.6229643,16.8353099 37.2070735,17.23397" id="路径" fill="#FFFFFF"></path>
-        </g>
-        <g id="孵化器1" transform="translate(348, 205) rotate(6) translate(-348, -205)translate(333, 190)" fill="#2E8F79" fill-rule="nonzero">
-            <path d="M15,0 C4.995,0 0,4.995 0,15 C0,25.005 4.995,30 15,30 C25.005,30 30,25.005 30,15 C30,4.995 25.005,0 15,0 Z M19.59,8.85 C19.785,8.655 20.1,8.655 20.295,8.85 L20.31,8.865 C20.49,9.06 20.49,9.345 20.295,9.525 L19.035,10.74 C18.825,10.485 18.6,10.26 18.345,10.035 L19.59,8.85 Z M14.49,7.605 C14.49,7.335 14.715,7.125 14.985,7.125 C15.255,7.125 15.48,7.335 15.48,7.605 L15.48,9.24 C15.315,9.225 15.165,9.21 15,9.21 L14.97,9.21 C14.805,9.21 14.64,9.21 14.49,9.24 L14.49,7.605 L14.49,7.605 Z M9.705,8.85 C9.9,8.655 10.215,8.655 10.41,8.85 L11.655,10.05 C11.4,10.26 11.175,10.5 10.965,10.755 L9.705,9.54 L9.69,9.525 C9.51,9.33 9.51,9.03 9.705,8.85 Z M7.5,13.95 C7.5,13.68 7.725,13.47 7.995,13.47 L9.78,13.47 C9.75,13.695 9.735,13.92 9.735,14.145 L9.735,14.415 L7.995,14.415 C7.725,14.43 7.5,14.22 7.5,13.95 L7.5,13.95 Z M10.41,19.05 C10.215,19.23 9.9,19.23 9.705,19.05 L9.69,19.035 C9.51,18.84 9.51,18.555 9.705,18.375 L10.695,17.43 C10.89,17.715 11.115,17.955 11.325,18.18 L10.41,19.05 Z M16.275,22.875 L13.725,22.875 C13.455,22.875 13.245,22.665 13.245,22.41 C13.245,22.155 13.455,21.96 13.725,21.96 L16.275,21.96 C16.53,21.96 16.755,22.155 16.755,22.41 C16.755,22.665 16.545,22.875 16.275,22.875 Z M16.275,21.72 L13.725,21.72 C13.455,21.72 13.245,21.525 13.245,21.27 C13.245,21.015 13.455,20.805 13.725,20.805 L16.275,20.805 C16.53,20.805 16.755,21 16.755,21.27 C16.755,21.51 16.545,21.72 16.275,21.72 Z M17.565,18.135 C17.505,18.21 17.49,18.285 17.475,18.33 C17.385,18.735 17.385,19.26 17.385,19.38 L17.385,19.41 C17.385,19.995 16.89,20.475 16.275,20.475 L15.345,20.475 L15.345,16.32 L16.575,15.12 L16.59,15.105 C16.725,14.955 16.725,14.73 16.575,14.595 C16.425,14.445 16.185,14.445 16.035,14.595 L14.955,15.645 L13.875,14.595 C13.725,14.445 13.485,14.445 13.335,14.595 L13.32,14.61 C13.185,14.76 13.185,14.985 13.335,15.12 L14.565,16.32 L14.565,20.475 L13.71,20.475 C13.095,20.475 12.6,19.995 12.6,19.41 L12.6,19.365 C12.6,19.245 12.6,18.72 12.51,18.315 C12.495,18.24 12.435,18.135 12.33,17.985 C12.225,17.85 12.06,17.685 11.88,17.505 C11.505,17.13 11.055,16.635 10.755,15.915 C10.56,15.435 10.425,14.85 10.425,14.13 C10.425,13.14 10.77,12.225 11.355,11.475 C11.88,10.815 12.57,10.305 13.365,10.02 L13.365,9.99 L13.695,9.9 C13.965,9.825 14.235,9.78 14.52,9.75 L14.565,9.75 C14.7,9.765 14.85,9.75 14.985,9.75 L15.015,9.75 C15.165,9.75 15.315,9.765 15.45,9.78 L15.495,9.78 C15.765,9.81 16.05,9.855 16.32,9.93 L16.665,10.035 L16.665,10.065 C17.46,10.35 18.15,10.86 18.66,11.52 C19.245,12.255 19.59,13.17 19.59,14.175 C19.59,15.105 19.365,15.825 19.05,16.38 C18.735,16.935 18.345,17.325 18.045,17.64 C17.82,17.82 17.655,18 17.565,18.135 L17.565,18.135 Z M20.295,19.05 C20.1,19.23 19.785,19.23 19.59,19.05 L18.675,18.18 C18.885,17.955 19.095,17.715 19.305,17.43 L20.295,18.375 L20.31,18.39 C20.49,18.57 20.49,18.87 20.295,19.05 Z M22.005,14.43 L20.265,14.43 L20.265,14.16 C20.265,13.935 20.25,13.71 20.22,13.485 L22.005,13.485 C22.275,13.485 22.5,13.695 22.5,13.965 C22.5,14.22 22.275,14.43 22.005,14.43 L22.005,14.43 Z" id="形状"></path>
-        </g>
-        <g id="沙箱环境" transform="translate(215, 228) rotate(-4) translate(-215, -228)translate(201, 213)" fill="#2E8F79" fill-rule="nonzero">
-            <path d="M0,9.57479831 L12.4855308,16.355391 L12.4855308,30 L0.341488057,23.2679094 C0.133152954,23.1528846 0.00452838685,22.9399082 0.00404127878,22.7091653 L0.00404127878,9.57479831 L0,9.57479831 Z M27.9979794,10.2227863 L28,22.7091653 C28,22.9400352 27.8726997,23.1534445 27.6645739,23.2679094 L15.851916,29.813752 L15.851916,16.2021244 L27.9979794,10.2227863 Z M14.6738832,0.173152474 L27.0705059,7.04492911 L14.0212167,13.4782468 L1.54780977,6.70153428 L13.3281374,0.173152474 C13.7443891,-0.0577174915 14.2576315,-0.0577174915 14.6738832,0.173152474 Z" id="形状"></path>
-        </g>
-        <g id="token-(1)" transform="translate(49, 219) rotate(5) translate(-49, -219)translate(31, 196)" fill="#2C2C2C" fill-rule="nonzero">
-            <path d="M13.773913,17.6438356 C13.773913,20.1643836 15.8086957,22.2123288 18.3130435,22.2123288 C20.8173913,22.2123288 22.8521739,20.1643836 22.8521739,17.6438356 C22.8521739,15.1232877 20.8173913,13.0753425 18.3130435,13.0753425 C15.8086957,13.0753425 13.773913,15.1232877 13.773913,17.6438356 L13.773913,17.6438356 Z" id="路径"></path>
-            <path d="M18,0 C12.0521739,4.09589041 5.94782609,6.14383562 0,6.14383562 L0,20.6369863 C0,28.8287671 4.06956522,36.390411 10.6434783,40.9589041 L18,46 L25.3565217,40.9589041 C31.9304348,36.390411 36,28.6712329 36,20.6369863 L36,6.14383562 C29.8956522,6.14383562 23.9478261,4.09589041 18,0 Z M19.7217391,25.2054795 L19.7217391,28.1986301 L24.2608696,28.1986301 L24.2608696,31.3493151 L19.7217391,31.3493151 L19.7217391,36.2328767 L16.7478261,36.2328767 L16.7478261,25.3630137 C13.3043478,24.5753425 10.6434783,21.5821918 10.6434783,17.8013699 C10.6434783,13.5479452 14.0869565,10.0821918 18.3130435,10.0821918 C22.5391304,10.0821918 25.9826087,13.5479452 25.9826087,17.8013699 C25.9826087,21.4246575 23.3217391,24.4178082 19.7217391,25.2054795 Z" id="形状"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/public/images/login/features.svg b/public/images/login/features.svg
deleted file mode 100644
index 9ad6d39..0000000
--- a/public/images/login/features.svg
+++ /dev/null
@@ -1,654 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="672px" height="756px" viewBox="0 0 672 756" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>矩形</title>
-    <defs>
-        <linearGradient x1="12.2515839%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
-            <stop stop-color="#EEEEEE" stop-opacity="0.190067745" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.0001082%" y1="0.000324107449%" x2="50.0001082%" y2="100.00005%" id="linearGradient-2">
-            <stop stop-color="#F4F2FB" offset="9.590021e-06%"></stop>
-            <stop stop-color="#E1EEF5" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.0005536%" y1="100.003053%" x2="50.0005536%" y2="0.00141495383%" id="linearGradient-3">
-            <stop stop-color="#B0B9E1" offset="0%"></stop>
-            <stop stop-color="#EAF0F8" offset="86.57%"></stop>
-        </linearGradient>
-        <linearGradient x1="49.9921147%" y1="100.007397%" x2="49.9921147%" y2="0.000645013314%" id="linearGradient-4">
-            <stop stop-color="#B7ACE0" offset="22.67%"></stop>
-            <stop stop-color="#E8E7FA" offset="78.93%"></stop>
-        </linearGradient>
-        <linearGradient x1="49.865%" y1="0.000463177397%" x2="49.865%" y2="100.002647%" id="linearGradient-5">
-            <stop stop-color="#ECF1FB" offset="0%"></stop>
-            <stop stop-color="#AFB0E7" offset="81.8%"></stop>
-        </linearGradient>
-        <linearGradient x1="49.9746373%" y1="99.9995251%" x2="49.9746373%" y2="0.00340022881%" id="linearGradient-6">
-            <stop stop-color="#CCD4F4" offset="22.67%"></stop>
-            <stop stop-color="#ECF1FB" offset="78.93%"></stop>
-        </linearGradient>
-        <linearGradient x1="49.640625%" y1="-0.0158273381%" x2="49.640625%" y2="99.996814%" id="linearGradient-7">
-            <stop stop-color="#ECF1FB" offset="0%"></stop>
-            <stop stop-color="#A6A8E2" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="74.9961151%" y1="11.8003701%" x2="24.9899281%" y2="88.2074996%" id="linearGradient-8">
-            <stop stop-color="#FFDB80" offset="0%"></stop>
-            <stop stop-color="#FFBB24" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.0078658%" y1="0.00208840933%" x2="50.0078658%" y2="99.9916464%" id="linearGradient-9">
-            <stop stop-color="#F9FAFE" offset="0%"></stop>
-            <stop stop-color="#E5EDF7" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="49.9874191%" y1="100.00647%" x2="49.9874191%" y2="-0.023364486%" id="linearGradient-10">
-            <stop stop-color="#AFB0E7" offset="22.67%"></stop>
-            <stop stop-color="#ECF1FB" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="49.56%" y1="0.0160714286%" x2="49.56%" y2="100.00692%" id="linearGradient-11">
-            <stop stop-color="#DDE1F6" offset="9.590021e-06%"></stop>
-            <stop stop-color="#A6A8E2" offset="81.8%"></stop>
-        </linearGradient>
-        <linearGradient x1="-0.000602094241%" y1="50.0007246%" x2="99.999712%" y2="50.0007246%" id="linearGradient-12">
-            <stop stop-color="#C8CBF2" offset="0%"></stop>
-            <stop stop-color="#AFB0E7" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="9.40725131%" y1="26.5407285%" x2="90.5918325%" y2="76.0040087%" id="linearGradient-13">
-            <stop stop-color="#DEE4FF" offset="11.57%"></stop>
-            <stop stop-color="#BACBEE" offset="84.72%"></stop>
-        </linearGradient>
-        <linearGradient x1="-0.000649803656%" y1="50.0003475%" x2="100.000241%" y2="50.0003475%" id="linearGradient-14">
-            <stop stop-color="#C8CBF2" offset="0%"></stop>
-            <stop stop-color="#AFB0E7" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="33.0595538%" y1="45.8582092%" x2="63.6021439%" y2="54.9998888%" id="linearGradient-15">
-            <stop stop-color="#DEE4FF" offset="11.57%"></stop>
-            <stop stop-color="#C6D5F4" offset="84.72%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.000875%" y1="0.0177852349%" x2="50.000875%" y2="100.011074%" id="linearGradient-16">
-            <stop stop-color="#C8CBF2" offset="0%"></stop>
-            <stop stop-color="#AFB0E7" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="26.0505624%" y1="10.9293817%" x2="75.1440814%" y2="88.6834042%" id="linearGradient-17">
-            <stop stop-color="#DEE4FF" offset="11.57%"></stop>
-            <stop stop-color="#BACBEE" offset="84.72%"></stop>
-        </linearGradient>
-        <linearGradient x1="25.0346656%" y1="10.3322982%" x2="75.0432873%" y2="89.6381587%" id="linearGradient-18">
-            <stop stop-color="#DEE4FF" offset="11.57%"></stop>
-            <stop stop-color="#BACBEE" offset="84.72%"></stop>
-        </linearGradient>
-        <linearGradient x1="25.2781869%" y1="11.8519018%" x2="74.3978992%" y2="88.5402481%" id="linearGradient-19">
-            <stop stop-color="#DEE4FF" offset="11.57%"></stop>
-            <stop stop-color="#BACBEE" offset="84.72%"></stop>
-        </linearGradient>
-        <linearGradient x1="25.0808443%" y1="9.33064468%" x2="75.1039732%" y2="90.68386%" id="linearGradient-20">
-            <stop stop-color="#DEE4FF" offset="11.57%"></stop>
-            <stop stop-color="#BACBEE" offset="84.72%"></stop>
-        </linearGradient>
-        <linearGradient x1="24.9743975%" y1="10.4054321%" x2="74.7820824%" y2="89.5260538%" id="linearGradient-21">
-            <stop stop-color="#DEE4FF" offset="11.57%"></stop>
-            <stop stop-color="#BACBEE" offset="84.72%"></stop>
-        </linearGradient>
-        <linearGradient x1="25.0717704%" y1="10.4444882%" x2="74.9863116%" y2="89.6007138%" id="linearGradient-22">
-            <stop stop-color="#DEE4FF" offset="11.57%"></stop>
-            <stop stop-color="#BACBEE" offset="84.72%"></stop>
-        </linearGradient>
-        <linearGradient x1="24.950557%" y1="10.4181826%" x2="74.7298823%" y2="89.3749741%" id="linearGradient-23">
-            <stop stop-color="#DEE4FF" offset="11.57%"></stop>
-            <stop stop-color="#BACBEE" offset="84.72%"></stop>
-        </linearGradient>
-        <linearGradient x1="25.0327749%" y1="10.4196926%" x2="74.9439792%" y2="89.5711859%" id="linearGradient-24">
-            <stop stop-color="#DEE4FF" offset="11.57%"></stop>
-            <stop stop-color="#BACBEE" offset="84.72%"></stop>
-        </linearGradient>
-        <linearGradient x1="24.9815519%" y1="10.4365854%" x2="74.7608773%" y2="89.3933768%" id="linearGradient-25">
-            <stop stop-color="#DEE4FF" offset="11.57%"></stop>
-            <stop stop-color="#BACBEE" offset="84.72%"></stop>
-        </linearGradient>
-        <linearGradient x1="25.0228123%" y1="10.3789862%" x2="74.9340167%" y2="89.5413591%" id="linearGradient-26">
-            <stop stop-color="#DEE4FF" offset="11.57%"></stop>
-            <stop stop-color="#BACBEE" offset="84.72%"></stop>
-        </linearGradient>
-        <linearGradient x1="49.9926088%" y1="99.9977515%" x2="49.9926088%" y2="-0.00374742365%" id="linearGradient-27">
-            <stop stop-color="#4F5C7C" offset="0%"></stop>
-            <stop stop-color="#274168" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.0010679%" y1="100.010863%" x2="50.0010679%" y2="0.00720462789%" id="linearGradient-28">
-            <stop stop-color="#C3D5FD" offset="0%"></stop>
-            <stop stop-color="#1A90FC" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="49.9990147%" y1="0.0174305788%" x2="49.9990147%" y2="100.030307%" id="linearGradient-29">
-            <stop stop-color="#F4AE98" offset="0%"></stop>
-            <stop stop-color="#FAD1BB" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="49.986954%" y1="100.016027%" x2="49.9878946%" y2="0.014401563%" id="linearGradient-30">
-            <stop stop-color="#C3D5FD" offset="0%"></stop>
-            <stop stop-color="#1A90FC" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.0600546%" y1="99.9694164%" x2="50.0589789%" y2="-0.0321273218%" id="linearGradient-31">
-            <stop stop-color="#C3D5FD" offset="0%"></stop>
-            <stop stop-color="#1A90FC" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.0027927%" y1="100.002043%" x2="50.0027927%" y2="6.12663721e-05%" id="linearGradient-32">
-            <stop stop-color="#4F5C7C" offset="0%"></stop>
-            <stop stop-color="#274168" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="51.569857%" y1="10.4617832%" x2="48.5590666%" y2="89.1976168%" id="linearGradient-33">
-            <stop stop-color="#F4B9A4" offset="0%"></stop>
-            <stop stop-color="#FAD1BB" offset="65.2%"></stop>
-        </linearGradient>
-        <linearGradient x1="49.9992635%" y1="99.9672334%" x2="49.9992635%" y2="-0.0194118852%" id="linearGradient-34">
-            <stop stop-color="#4F5C7C" offset="0%"></stop>
-            <stop stop-color="#274168" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.0007779%" y1="-0.00496919102%" x2="50.0007779%" y2="99.9962234%" id="linearGradient-35">
-            <stop stop-color="#2E8F79" offset="0%"></stop>
-            <stop stop-color="#013F7C" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="99.9888039%" y1="49.9627531%" x2="0.0218462303%" y2="49.9627531%" id="linearGradient-36">
-            <stop stop-color="#F4B9A4" offset="0%"></stop>
-            <stop stop-color="#FAD1BB" offset="65.2%"></stop>
-        </linearGradient>
-        <linearGradient x1="0.0020679212%" y1="49.9928004%" x2="100.003907%" y2="49.9928004%" id="linearGradient-37">
-            <stop stop-color="#18264B" offset="0%"></stop>
-            <stop stop-color="#2D3C65" offset="65.2%"></stop>
-        </linearGradient>
-        <linearGradient x1="50.0167948%" y1="0.028520576%" x2="50.0167948%" y2="100.004364%" id="linearGradient-38">
-            <stop stop-color="#FFDB80" offset="0%"></stop>
-            <stop stop-color="#FFBB24" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="-0.0017133949%" y1="49.9627531%" x2="99.9658056%" y2="49.9627531%" id="linearGradient-39">
-            <stop stop-color="#F4B9A4" offset="0%"></stop>
-            <stop stop-color="#FAD1BB" offset="65.2%"></stop>
-        </linearGradient>
-        <linearGradient x1="-0.0065195948%" y1="49.9928004%" x2="99.99532%" y2="49.9928004%" id="linearGradient-40">
-            <stop stop-color="#445677" offset="0%"></stop>
-            <stop stop-color="#293861" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="49.9766686%" y1="0.028520576%" x2="49.9766686%" y2="100.004364%" id="linearGradient-41">
-            <stop stop-color="#FFDB80" offset="0%"></stop>
-            <stop stop-color="#FFBB24" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-42">
-            <stop stop-color="#BAD7F5" offset="0%"></stop>
-            <stop stop-color="#E2F0FF" offset="100%"></stop>
-        </linearGradient>
-        <ellipse id="path-43" cx="36" cy="33.5" rx="36" ry="33.5"></ellipse>
-    </defs>
-    <g id="console-LandingPage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <rect id="矩形" fill="#F6F7F9" x="0" y="0" width="672" height="756"></rect>
-        <g id="15安全" transform="translate(486, 242)" fill-rule="nonzero">
-            <g id="bg" fill="#2E8F79">
-                <path d="M38.096494,63.449225 C52.9580529,66.5318486 71.6823757,51.2905395 72,32.9593403 C71.1050887,14.9798839 56.4237497,-0.127892784 36.5000377,0.000816380441 C16.5763257,0.129525545 3.46472973,19.045498 2.59653185,32.9593403 C1.58321846,48.8124731 17.8515034,61.8337562 38.096494,63.449225 Z" id="1" opacity="0.200000003"></path>
-                <path d="M31.8953592,65.9745315 C49.0366987,66.7070015 64.1674797,51.5040338 63.7907184,37.9500658 C62.0060906,20.2066626 49.5106797,6.25298543 31.8953592,7.48121196 C14.2800387,8.7094385 0,21.2564192 0,35.5056776 C0.469633172,46.8710211 14.9130598,64.0050922 31.8953592,65.9745315 Z" id="2" opacity="0.300000012"></path>
-                <path d="M34.1637262,60.1183312 C54.0865787,63.4490228 67.8367821,48.8938088 67.7590336,32.913897 C68.9977518,17.8319748 49.8827863,1.52560508 32.2548533,2.07049072 C13.7875288,2.07049072 2.35709021,15.6877141 2.55413597,29.9431254 C3.55860494,37.6616776 7.95464947,57.31141 34.1637262,60.1183312 Z" id="3" opacity="0.400000006"></path>
-                <path d="M31.7415643,59.490251 C49.5451017,62.9285712 63.4747387,58.5745489 63.2805038,32.9170386 C59.3547737,13.8340989 44.7748998,7.14487986 33.1711736,7.25561804 C12.0752739,8.06162602 3.89793912,19.0980805 3.0618408,32.9170386 C4.47694666,41.0879812 12.661836,57.5382499 31.7415643,59.490251 Z" id="4" opacity="0.400000006"></path>
-                <path d="M32.1111522,53.3127065 C49.0789959,51.1143108 60.5155141,41.1138468 60.7928643,29.5642556 C62.906952,12.8789983 50.2299719,3.72084887 33.3869666,4.58148513 C18.2487106,7.99107787 9.77590789,17.0355954 7.68215462,29.5642556 C7.66268516,40.3592585 5.99817145,57.5905335 32.1111522,53.3127065 Z" id="5" opacity="0.600000024"></path>
-            </g>
-            <path d="M35.5538225,30.9461484 L35.5538225,51.4761905 C35.3095494,51.416807 35.0685853,51.3470378 34.8317463,51.2671259 L34.6901448,51.2179637 C34.4161538,51.119576 34.1543226,50.9958335 33.9088855,50.8487403 L33.9080354,50.8488602 C32.6792097,50.0100278 31.4699236,49.1484017 30.2809485,48.264543 L29.8360365,47.9320549 C28.775062,47.13732 27.7650249,46.2894232 26.8107443,45.392436 L26.6071099,45.1994738 C25.7466223,44.3766598 24.9643221,43.4908056 24.2683283,42.5511983 L24.1388416,42.3743925 C23.4644319,41.4316724 22.8864072,40.4362541 22.4117547,39.4003225 L22.3290657,39.2170902 C21.7985597,38.0146987 21.385762,36.7730856 21.0953648,35.5063565 C20.7794263,34.1651189 20.5398958,32.6442775 20.3750584,30.9461484 L35.5538225,30.9461484 Z M35.5538462,14.8095238 L35.5538462,28.5456478 L20.2110899,28.5456478 C20.1561443,27.5358641 20.114935,26.4836862 20.0874619,25.3883446 C20.0591581,24.2131419 20.0454199,23.0375573 20.046184,21.8619473 C20.046184,21.551919 20.3161617,21.3519798 20.8567676,21.2612983 L20.9099264,21.2528641 C21.5133812,21.1663627 22.1189263,21.092149 22.7260961,21.0302781 L23.0905913,20.994637 C24.0584918,20.8946021 25.0195027,20.7466359 25.9692214,20.5514143 C26.9713891,20.3498135 27.922754,19.9728965 28.8233194,19.4186044 L28.9311431,19.3512379 C29.5213407,18.9990875 30.0845667,18.611903 30.6170646,18.192301 L30.7615632,18.0770324 L31.5729468,17.4210462 L31.5729468,17.4210462 L32.3859013,16.7666252 C32.8203918,16.4162862 33.2687661,16.0801137 33.7301476,15.7587614 L33.9286765,15.6219483 C34.4244725,15.2829341 34.97174,15.0093544 35.5538462,14.8095238 Z" id="形状结合" fill="url(#linearGradient-1)"></path>
-            <path d="M36.6623684,29.4761905 L51.0615385,29.4761905 C50.9305105,31.2796484 50.7282356,32.8817198 50.4538969,34.2799474 C50.1787378,35.6789961 49.8257796,36.9601574 49.3942084,38.1234393 L49.3942082,38.1234398 C48.9774581,39.2571508 48.438138,40.3419933 47.7858368,41.3586844 L47.785837,41.3586842 C47.1055938,42.4034686 46.3446801,43.3934862 45.5100439,44.3196887 L45.510045,44.3196874 C44.5466737,45.387822 43.5319172,46.4085 42.4693727,47.3781069 L42.4693824,47.378098 C41.1843921,48.5583179 39.8899277,49.7281922 38.5861008,50.8876021 L38.5861008,50.8876021 C37.9894111,51.2080943 37.3354708,51.4080891 36.6615385,51.4761905 L36.6615385,29.4761905" id="路径" fill="#FFFFFF"></path>
-            <path d="M42.8922696,19.9525957 L42.8922698,19.9525959 C43.6566703,20.4321774 44.5354844,20.754273 45.4627468,20.8947075 C46.4035227,21.0398806 47.2880451,21.1366627 48.117174,21.1842976 C48.946303,21.2326884 49.6447455,21.2750306 50.211638,21.311324 C50.7776623,21.3476172 51.0615385,21.4859853 51.0615385,21.7271832 C51.0615385,24.2389782 51.0199953,26.4725274 50.9369092,28.4285714 L35.5538462,28.4285714 L35.5538462,14.8095238 C36.2444996,14.9546969 36.8953423,15.225383 37.5029094,15.6246089 L37.5029107,15.6246097 C38.1258456,16.0342132 38.7146983,16.4819458 39.2650221,16.9644336 C39.8319105,17.4596843 40.4057239,17.9730852 40.9855986,18.5038741 C41.5663375,19.035418 42.2024655,19.5185722 42.8931189,19.9525815" id="路径" fill="#FFFFFF"></path>
-        </g>
-        <g id="文件夹" transform="translate(96, 454.4911)" fill-rule="nonzero">
-            <g id="Layer_3_2_" transform="translate(0.9114, 1.5089)" fill="#9FCCFF" opacity="0.42">
-                <path d="M70.1772152,28.8596745 C70.1772152,18.1532797 60.91084,9.47505913 49.4807933,9.47505913 C49.3026922,9.47505913 49.1274363,9.48261333 48.9510423,9.48730215 C45.3417934,3.80784116 38.7253113,0 31.1560171,0 C19.7254014,0 10.4590262,8.67926252 10.4590262,19.3853969 C10.4590262,19.5244985 10.4672769,19.6615161 10.4704065,19.7998363 C4.21866168,23.1348883 0,29.4288449 0,36.650406 C0,47.3557589 9.26637517,56.0334585 20.6969909,56.0334585 C21.3470882,56.0334585 21.9892192,56.0024602 22.6242376,55.9474968 C26.4204072,60.2544366 32.4442624,63 38.8732547,63 C49.4389708,63 57.8674745,55.5841134 59.1267001,46.0092867 C65.6970921,42.7609778 70.1772152,36.3021311 70.1772152,28.8596745 Z" id="路径"></path>
-            </g>
-            <g id="Layer_2" transform="translate(3.6456, -0)">
-                <g id="编组">
-                    <g>
-                        <polygon id="矩形" fill="#FFFFFF" transform="translate(21.037, 21.2633) rotate(147.3095) translate(-21.037, -21.2633)" points="4.61483936 8.70097839 36.3030525 10.1840733 37.4591271 33.8255653 5.77091391 32.3424704"></polygon>
-                        <path d="M14.1729371,39.2210821 C14.1421717,39.2210821 14.1114064,39.2179767 14.0809286,39.2122834 C13.9690807,39.1902868 13.8716092,39.1292136 13.8100785,39.0427795 L0.0683202922,19.7700529 C0.00650207581,19.6833601 -0.0144873651,19.5782935 0.00995239486,19.4776263 C0.0341046283,19.3769591 0.101960903,19.2892311 0.19828231,19.2338512 L27.668285,3.36724792 C27.868691,3.2513124 28.1355157,3.3035869 28.2640401,3.48421857 L42.0060858,22.7564276 C42.0679041,22.8431204 42.0888935,22.948187 42.0644537,23.0488542 C42.040014,23.1495214 41.9721577,23.2372494 41.8761238,23.2926293 L14.4058336,39.1594914 C14.3356771,39.2001206 14.2548821,39.2210821 14.1729371,39.2210821 Z M1.02722146,19.677408 L14.3028991,38.2964446 L41.0471847,22.8490725 L27.7712195,4.23029466 L1.02722146,19.677408 Z" id="形状" fill="#CCCCDE"></path>
-                    </g>
-                    <polygon id="矩形" fill="#81D0E8" opacity="0.29" transform="translate(20.6597, 20.9091) rotate(147.3095) translate(-20.6597, -20.9091)" points="6.25441357 10.7152422 34.1317785 12.019979 35.0649447 31.1030385 7.1875797 29.7983017"></polygon>
-                    <polygon id="路径" fill="#FFE5B0" opacity="0.29" points="23.1078258 23.2840894 23.3300838 23.5954073 10.711692 30.8838177 14.6516688 36.4093871 38.817991 22.4500266 34.6554686 16.613398"></polygon>
-                    <g opacity="0.29" transform="translate(28.1734, 17.8145)" fill="#85B385" id="路径">
-                        <path d="M3.26007805,0.140456839 C3.71005716,0.771373769 3.12292787,1.03740437 2.08035646,1.63933742 C1.03778505,2.24152925 0.513336553,2.61754332 0.0636449697,1.98688518 C-0.200016911,1.61759951 0.405226556,0.659837593 0.967341036,0.335062882 C1.58667331,-0.0230950471 3.08554941,-0.104094636 3.26007805,0.140456839 Z"></path>
-                    </g>
-                    <polygon id="矩形" fill="#E6CE9E" opacity="0.29" transform="translate(22.9876, 24.1744) rotate(147.3095) translate(-22.9876, -24.1744)" points="9.01251673 22.7807962 36.8901608 24.0855461 36.9626564 25.5680653 9.08501227 24.2633154"></polygon>
-                    <path d="M25.0759453,20.7063357 C25.9321995,21.9070964 25.2343724,22.1702804 24.04545,22.8570948 C22.8565276,23.5436504 22.2872249,24.0123094 21.4309707,22.8118075 C20.9303869,22.1097248 21.3855415,20.687962 22.0261508,20.3179 C22.7326036,19.9095379 24.7438521,20.2407822 25.0759453,20.7063357 Z" id="路径" fill="#85B385" opacity="0.29"></path>
-                    <polygon id="路径" fill="#B3A889" opacity="0.29" points="13.4923616 27.386861 13.5349156 26.2347518 16.0547986 24.7796058 17.2693109 25.2472296"></polygon>
-                    <polygon id="路径" fill="#B3A889" opacity="0.29" points="14.4032459 26.8672214 14.5455715 24.9020109 16.6031118 25.6242789"></polygon>
-                    <polygon id="路径" fill="#E4CBB4" opacity="0.29" points="17.6413703 25.7842078 18.7034935 25.7135595 19.2095403 26.4239234 18.4214299 26.8788667"></polygon>
-                    <polygon id="路径" fill="#E66C6C" opacity="0.29" points="18.7034935 25.7135595 19.492754 25.2578398 19.6514687 24.6023383 18.8811849 25.0678919"></polygon>
-                    <polygon id="路径" fill="#E66C6C" opacity="0.29" points="20.2995536 24.5917282 20.7296934 24.5849998 21.7811781 23.9776322 22.0871064 23.2998753 20.5750041 24.1732734"></polygon>
-                    <polygon id="路径" fill="#E4CBB4" opacity="0.29" points="22.0871064 23.2998753 23.520714 23.0982821 23.9425155 23.6898637 19.2095403 26.4239234 18.7034935 25.7135595 19.492754 25.2578398 19.6514687 24.6023383 20.7296934 24.5849998 21.7811781 23.9776322"></polygon>
-                    <polygon id="矩形" fill="#C9B39F" opacity="0.29" transform="translate(19.347, 25.8415) rotate(147.3047) translate(-19.347, -25.8415)" points="18.8705083 25.3845195 19.7808327 25.4271288 19.823442 26.2984202 18.9131176 26.2558109"></polygon>
-                    <path d="M9.10758117,27.1803508 C8.8473696,27.3307047 8.63344982,27.5201351 8.46610935,27.7351851 L10.852005,31.0810116 C11.1389565,31.0333952 11.4195825,30.9376449 11.679794,30.7875498 C14.4173347,29.2061169 13.0760231,28.8404542 12.36612,27.8443922 C11.6553543,26.8480714 10.1967319,26.5509866 9.10758117,27.1803508 Z" id="路径" fill="#B4CFB4" opacity="0.29"></path>
-                    <polygon id="矩形" fill="#C9B39F" opacity="0.29" transform="translate(21.4984, 24.6243) rotate(147.3016) translate(-21.4984, -24.6243)" points="20.871436 24.178419 22.0845354 24.2352033 22.1253662 25.0700916 20.9122668 25.0133073"></polygon>
-                    <polygon id="矩形" fill="#8B7256" opacity="0.29" transform="translate(23.9349, 22.7747) rotate(147.3047) translate(-23.9349, -22.7747)" points="23.6887936 22.3829342 24.1438162 22.4042324 24.1810944 23.1665121 23.7260718 23.145214"></polygon>
-                    <polygon id="路径" fill="#DDDDDD" opacity="0.29" points="15.7583587 28.4173414 14.58295 26.7688833 13.4923616 27.386861 14.6740959 29.0436002"></polygon>
-                    <polygon id="路径" fill="#F7F7F7" opacity="0.29" points="17.26011 25.2503351 18.4214299 26.8788667 15.7583587 28.4173414 14.58295 26.7688833"></polygon>
-                    <polygon id="路径" fill="#968D73" opacity="0.29" points="14.5455715 24.9020109 14.2839223 25.0663392 13.9575797 27.1340284 14.4092839 26.8731735"></polygon>
-                    <polygon id="矩形" fill="#3F3F3F" opacity="0.29" transform="translate(15.5898, 26.9344) rotate(147.2889) translate(-15.5898, -26.9344)" points="15.3223987 26.6491903 15.830417 26.6729756 15.8571559 27.2196187 15.3491375 27.1958334"></polygon>
-                    <polygon id="矩形" fill="#3F3F3F" opacity="0.29" transform="translate(16.3296, 26.5074) rotate(147.3223) translate(-16.3296, -26.5074)" points="16.0622319 26.2222119 16.570269 26.245984 16.5969931 26.7925863 16.088956 26.7688141"></polygon>
-                    <polygon id="矩形" fill="#3F3F3F" opacity="0.29" transform="translate(17.0738, 26.08) rotate(147.3016) translate(-17.0738, -26.08)" points="16.8062606 25.7949444 17.3145565 25.8187373 17.3412762 26.3650882 16.8329803 26.3412953"></polygon>
-                    <polygon id="矩形" fill="#3F3F3F" opacity="0.29" transform="translate(20.2521, 25.1599) rotate(147.2682) translate(-20.2521, -25.1599)" points="19.8866399 24.8697634 20.5908593 24.9027468 20.6176329 25.4499401 19.9134136 25.4169568"></polygon>
-                    <polygon id="矩形" fill="#3F3F3F" opacity="0.29" transform="translate(22.6696, 23.7594) rotate(147.3174) translate(-22.6696, -23.7594)" points="22.3042048 23.469478 23.0082316 23.5024238 23.0349723 24.0493272 22.3309455 24.0163815"></polygon>
-                    <polygon id="矩形" fill="#E4CBB4" opacity="0.29" transform="translate(22.646, 23.8031) rotate(147.2889) translate(-22.646, -23.8031)" points="22.6261747 23.3968747 22.6261747 23.3968747 22.6659171 24.2093583 22.6659171 24.2093583"></polygon>
-                    <polygon id="矩形" fill="#3F3F3F" opacity="0.29" transform="translate(14.3699, 27.6401) rotate(147.3016) translate(-14.3699, -27.6401)" points="14.1028344 27.354882 14.6102929 27.3786358 14.6370257 27.9252539 14.1295672 27.9015001"></polygon>
-                    <path d="M14.6821467,27.4971032 C15.5386884,28.6981227 14.8408613,28.9615654 13.6519389,29.6481211 C12.463304,30.3349355 11.8940013,30.8035944 11.0377472,29.6023162 C10.5371634,28.9002335 10.9914554,27.4787295 11.6326397,27.1089263 C12.3390925,26.7005641 14.350916,27.0315497 14.6821467,27.4971032 Z" id="路径" fill="#85B385" opacity="0.29"></path>
-                    <g opacity="0.29" transform="translate(24.8222, 19.8033)" fill="#85B385" id="路径">
-                        <path d="M2.51688018,0.348458326 C3.05944285,1.10876757 2.60371321,1.28370598 1.82537873,1.73321488 C1.04704426,2.18272379 0.672684643,2.48783087 0.130409498,1.72726284 C-0.187019855,1.28241206 0.12350886,0.369161097 0.542722625,0.126938683 C1.00564043,-0.140385841 2.30641072,0.0534438476 2.51688018,0.348458326 Z"></path>
-                    </g>
-                    <g opacity="0.29" transform="translate(26.6666, 19.4802)" fill="#85B385" id="路径">
-                        <path d="M2.65929277,0.0443093934 C2.91576649,0.40402003 2.44134762,0.635891059 1.58164312,1.13223998 C0.722513678,1.62833012 0.280585312,1.92593244 0.0241115958,1.56622181 C-0.12540223,1.35608869 0.450801052,0.676261461 0.914581439,0.408419369 C1.42551619,0.11340489 2.56038363,-0.0951755225 2.65929277,0.0443093934 Z"></path>
-                    </g>
-                    <g opacity="0.29" transform="translate(29.7077, 16.3685)" fill="#85B385" id="路径">
-                        <path d="M4.84197259,0.0311039754 C5.15825183,0.473366909 4.30228518,0.916406196 2.72893969,1.82525782 C1.1555942,2.73410944 0.334993321,3.25918346 0.0195766536,2.81692052 C-0.165015416,2.55787711 0.995154367,1.46114784 1.8433578,0.971268538 C2.77839427,0.43092623 4.71948626,-0.140729019 4.84197259,0.0311039754 Z"></path>
-                    </g>
-                    <polygon id="矩形" fill="#85B385" opacity="0.29" transform="translate(30.3031, 19.1388) rotate(147.3095) translate(-30.3031, -19.1388)" points="25.2632238 18.6555973 35.3187603 19.1262239 35.3430082 19.622089 25.2874717 19.1514625"></polygon>
-                    <g opacity="0.29" transform="translate(4.9744, 10.5788)" fill="#FFFFFF" id="路径">
-                        <g opacity="0.73" transform="translate(17.0025, 0)">
-                            <path d="M9.14288824,1.07550892 L1.40238497,5.54704856 C0.88311195,5.84723873 0.285344174,5.85034414 0.0745871846,5.55403574 C-0.136457331,5.25798612 0.115991013,4.77095345 0.634688978,4.47076328 L8.37519225,0"></path>
-                        </g>
-                        <g opacity="0.28" transform="translate(0, 7.9889)">
-                            <path d="M0,4.27079513 L6.98545846,0.235825169 C7.50415642,-0.0641062175 8.09301087,-0.0801508646 8.29284185,0.200371675 C8.49267283,0.480894214 8.23131116,0.955246442 7.71203814,1.25517783 L0.726867214,5.289889"></path>
-                        </g>
-                        <g opacity="0.55" transform="translate(7.722, 9.5825)">
-                            <path d="M6.4309335,0.219983784 C6.64169048,0.516033401 6.38981719,1.00332486 5.87054418,1.30325625 L1.40209347,3.88437415 C0.88310798,4.18404675 0.28562773,4.18741095 0.0745832146,3.89162012 C-0.136461301,3.5955705 0.115987043,3.10802026 0.634972535,2.80834766 L5.10342324,0.227229753 C5.62240873,-0.072960418 6.21988898,-0.0760658336 6.4309335,0.219983784 Z"></path>
-                        </g>
-                    </g>
-                    <polygon id="矩形" fill="#F2D9A6" opacity="0.29" transform="translate(23.8365, 25.3636) rotate(147.3095) translate(-23.8365, -25.3636)" points="9.86155026 23.9695262 37.7389152 25.2742629 37.81145 26.7575836 9.93408499 25.4528468"></polygon>
-                    <path d="M14.7106118,36.7626281 C14.5685737,36.7626281 14.4294108,36.6997435 14.3471782,36.5843255 L2.73944229,20.304702 C2.67762408,20.2182679 2.65663464,20.1129426 2.6810744,20.0122754 C2.70522663,19.9116081 2.77308291,19.8238801 2.86940431,19.7685002 L26.9773586,5.84381683 C27.07368,5.78817814 27.1907033,5.76928686 27.3022637,5.79128355 C27.4141115,5.81302146 27.511583,5.87409463 27.5731137,5.96078749 L39.1808496,22.2401522 C39.309374,22.4205251 39.2512936,22.6606773 39.0508876,22.776354 L14.9429333,36.7010374 C14.8710516,36.7427017 14.7902567,36.7626281 14.7106118,36.7626281 Z M3.69834347,20.2120571 L14.8399988,35.8379906 L38.2216609,22.3325384 L27.0800056,6.70660479 L3.69834347,20.2120571 Z" id="形状" fill="#CCCCDE"></path>
-                </g>
-                <g id="编组" transform="translate(26.6412, 2.5089)">
-                    <g>
-                        <polygon id="路径" fill="#FFFFFF" points="10.066598 14.995216 18.7418502 0.388117544 34.7372418 8.08307853 39.4587159 22.0926433 36.2053526 27.5705963 32.6178833 33.6101121 26.569474 43.7938048 0.431294481 31.2184245 6.47912873 21.0347317"></polygon>
-                        <path d="M26.5691865,44.1819818 C26.5004676,44.1819818 26.4308862,44.1672311 26.3661927,44.1361769 L0.228013183,31.5607966 C0.0181187737,31.4596118 -0.0612385646,31.2243765 0.0508968048,31.0354638 L18.3614525,0.20515681 C18.4741629,0.015985245 18.7360997,-0.0549217437 18.9451315,0.0457454775 L34.9405231,7.74070647 C35.0414449,7.78935798 35.1167769,7.87191027 35.15013,7.97024843 L39.8718916,21.9798132 C39.9049572,22.0784101 39.8934561,22.1847706 39.8396886,22.275604 L26.9504467,43.9767656 C26.8722395,44.1077106 26.7233007,44.1819818 26.5691865,44.1819818 Z M1.01497345,31.059272 L26.3923576,43.268472 L38.9940729,22.0514965 L34.3763959,8.3496267 L18.9189666,0.913450344 L1.01497345,31.059272 Z" id="形状" fill="#CCCCDE"></path>
-                    </g>
-                    <g transform="translate(28.4771, 7.9658)" id="路径">
-                        <polyline fill="#FFFFFF" points="10.5744822 14.4733068 0.431406712 9.59340504 6.02092358 0.182960734"></polyline>
-                        <path d="M10.3712009,14.8156789 L0.228125414,9.9357771 C0.127203582,9.88712559 0.0518716157,9.8045733 0.0185185315,9.70623514 C-0.0145470261,9.60763819 -0.00304596262,9.50127771 0.0507215093,9.4104443 L5.63995085,0 L6.40074621,0.365921468 L1.01479816,9.43425249 L10.7774759,14.1311935 L10.3712009,14.8156789 Z" fill="#CCCCDE"></path>
-                    </g>
-                    <polygon id="矩形" fill="#CCCCDE" transform="translate(24.9092, 7.1963) rotate(28.1257) translate(-24.9092, -7.1963)" points="20.7075617 6.97789808 29.1466586 6.61921202 29.1108115 7.41471382 20.6717146 7.77339987"></polygon>
-                    <polygon id="矩形" fill="#CCCCDE" transform="translate(23.375, 9.78) rotate(28.1257) translate(-23.375, -9.78)" points="19.1735149 9.56160885 27.6123307 9.20293475 27.5764836 9.99843654 19.1376678 10.3571106"></polygon>
-                    <polygon id="矩形" fill="#CCCCDE" transform="translate(21.8622, 12.3266) rotate(28.1257) translate(-21.8622, -12.3266)" points="17.6605571 12.1081601 26.099654 11.7494741 26.0638069 12.5449759 17.6247101 12.9036619"></polygon>
-                    <polygon id="矩形" fill="#CCCCDE" transform="translate(25.5375, 17.755) rotate(28.1257) translate(-25.5375, -17.755)" points="15.3867856 17.7894308 35.7240589 16.9250378 35.6882118 17.7205396 15.3509385 18.5849326"></polygon>
-                    <polygon id="矩形" fill="#CCCCDE" transform="translate(20.1687, 18.8246) rotate(28.1257) translate(-20.1687, -18.8246)" points="14.0992141 18.6855389 26.2740268 18.1680741 26.2381798 18.9635759 14.063367 19.4810407"></polygon>
-                    <polygon id="矩形" fill="#CCCCDE" transform="translate(29.7138, 23.4174) rotate(28.1257) translate(-29.7138, -23.4174)" points="27.8637005 23.0990658 31.5996976 22.9402751 31.5638505 23.7357769 27.8278534 23.8945676"></polygon>
-                    <polygon id="矩形" fill="#CCCCDE" transform="translate(20.5255, 22.8165) rotate(28.1257) translate(-20.5255, -22.8165)" points="12.1042807 22.7774414 28.9824745 22.0600693 28.9466274 22.8555711 12.0684336 23.5729432"></polygon>
-                    <polygon id="矩形" fill="#CCCCDE" transform="translate(14.4085, 23.9315) rotate(28.1257) translate(-14.4085, -23.9315)" points="10.6908646 23.69255 18.1620152 23.3750045 18.1261681 24.1705063 10.6550175 24.4880518"></polygon>
-                    <polygon id="矩形" fill="#CCCCDE" transform="translate(22.147, 27.6554) rotate(28.1308) translate(-22.147, -27.6554)" points="20.7812506 27.3164011 23.5485677 27.1987673 23.5127147 27.9943129 20.7453976 28.1119467"></polygon>
-                    <polygon id="矩形" fill="#CCCCDE" transform="translate(26.8846, 29.9362) rotate(28.1385) translate(-26.8846, -29.9362)" points="25.6573742 29.5913748 28.1476319 29.4854981 28.1117739 30.2810207 25.6215162 30.3868975"></polygon>
-                    <polygon id="矩形" fill="#CCCCDE" transform="translate(15.7727, 28.1191) rotate(28.1257) translate(-15.7727, -28.1191)" points="8.73499216 28.0212766 22.8462597 27.4215069 22.8104126 28.2170087 8.69914506 28.8167784"></polygon>
-                    <polygon id="矩形" fill="#CCCCDE" transform="translate(25.8811, 32.9845) rotate(28.118) translate(-25.8811, -32.9845)" points="24.6534902 32.6395187 27.1444732 32.533665 27.1086192 33.329455 24.6176361 33.4353086"></polygon>
-                    <polygon id="矩形" fill="#CCCCDE" transform="translate(12.3512, 29.5558) rotate(28.1257) translate(-12.3512, -29.5558)" points="7.5268372 29.3638243 17.2113601 28.9522041 17.175513 29.7477059 7.4909901 30.1593261"></polygon>
-                    <polygon id="矩形" fill="#CCCCDE" transform="translate(20.7141, 33.5802) rotate(28.1308) translate(-20.7141, -33.5802)" points="19.163752 33.2489441 22.3002134 33.1156187 22.2643484 33.9114295 19.127887 34.0447549"></polygon>
-                    <polygon id="矩形" fill="#CCCCDE" transform="translate(8.7696, 30.7221) rotate(28.1385) translate(-8.7696, -30.7221)" points="6.43560474 30.4243365 11.1394874 30.2243444 11.1036294 31.0198671 6.39974672 31.2198592"></polygon>
-                </g>
-                <g id="Layer_2_1_" transform="translate(15.037, 10.742)">
-                    <g id="编组">
-                        <polygon id="矩形" fill="#FFFFFF" transform="translate(21.2757, 19.5753) rotate(-158.8008) translate(-21.2757, -19.5753)" points="4.77886594 7.94994754 38.6733581 6.79252262 37.7724895 31.2006499 3.87799735 32.3580748"></polygon>
-                        <path d="M32.4519044,36.7668888 C32.3989995,36.7668888 32.3460946,36.7580901 32.296065,36.7404927 L0.275379025,25.5625494 C0.168706661,25.5252844 0.0830237374,25.4515308 0.0367319567,25.3573332 C-0.00955982394,25.2631356 -0.0121475632,25.1562575 0.0292562654,25.0605072 L9.69590015,2.62905545 C9.7818706,2.42927371 10.0317312,2.32938284 10.2539893,2.4075358 L42.2743877,13.5854791 C42.4963583,13.6628557 42.6067685,13.8877396 42.5205105,14.0877801 L32.8541541,36.5189731 C32.8127503,36.6149822 32.7308052,36.6923588 32.6261455,36.7337643 C32.5706529,36.755761 32.5111349,36.7668888 32.4519044,36.7668888 Z M0.989307543,24.9789901 L32.2054941,35.8761521 L41.5598842,14.1687797 L10.3439851,3.27161768 L0.989307543,24.9789901 Z" id="形状" fill="#CCCCDE"></path>
-                    </g>
-                    <g id="Layer_2_2_" transform="translate(3.7109, 3.216)" fill="#D6F1FF">
-                        <polygon id="矩形" transform="translate(17.5977, 16.2952) rotate(-158.8008) translate(-17.5977, -16.2952)" points="3.53357412 6.78170184 32.4004173 5.79596045 31.661775 25.8087293 2.79493183 26.7944707"></polygon>
-                    </g>
-                    <g id="Layer_3_1_" opacity="0.47" transform="translate(3.7343, 12.4978)">
-                        <path d="M4.65936836,0.575064375 C4.65936836,0.575064375 6.30258281,-0.395377989 8.96594159,0.534176404 C11.6298754,1.46398958 10.5211729,-0.798823228 13.7173185,0.316797314 C16.9126014,1.43215907 19.557271,0.700833706 22.8140847,3.38184248 C26.0706108,6.06285125 32.6477815,8.43357725 32.6477815,8.43357725 L30.6569474,13.2813897 L2.71770131,5.08076358 L4.65936836,0.575064375 L4.65936836,0.575064375 Z" id="路径" fill="#000000" opacity="0.08"></path>
-                        <polygon id="路径" fill="#FFE5B0" points="17.2774727 5.88454864 1.3798401 8.18592036 0 11.3881214 27.3578673 20.9377918"></polygon>
-                        <path d="M3.18493202,3.99645598 C3.18493202,3.99645598 8.08294744,3.31895781 10.5039213,4.40171271 C12.9243201,5.48420882 7.38483289,7.31588643 7.38483289,7.31588643 L1.3798401,8.18566157 L3.18493202,3.99645598 Z" id="路径" fill="#FFE5B0"></path>
-                        <path d="M10.5039213,4.40197149 C10.5039213,4.40197149 11.2230253,5.05074456 9.07577675,5.04867428 C6.92881572,5.04582765 5.09065824,7.68983022 8.72729453,7.36609065 C12.3636433,7.04235108 17.2777602,5.88480742 17.2777602,5.88480742 C17.2777602,5.88480742 13.9082361,6.4712134 10.5039213,4.40197149 Z" id="路径" fill="#F2D9A6"></path>
-                        <path d="M21.1245784,7.30424112 C21.1245784,7.30424112 25.3949233,6.58870162 31.8165421,10.2756063 L31.1250407,12.1968233 L21.1245784,7.30424112 Z" id="路径" fill="#FFE5B0"></path>
-                        <path d="M8.727007,7.36583187 C10.2543482,7.22971115 12.0053852,6.94660076 13.5258258,6.66452552 C10.9619512,5.50827579 10.8673549,4.61288097 10.8673549,4.61288097 C10.8673549,4.61288097 10.8670674,4.61210461 10.8664923,4.61184583 C10.7457312,4.54456182 10.6246825,4.47520754 10.5036338,4.40197149 C10.5036338,4.40197149 11.2233128,5.05100335 9.07577675,5.04893307 C6.92881572,5.04582765 5.09037071,7.68983022 8.727007,7.36583187 Z" id="路径" fill="#D6C093"></path>
-                        <path d="M22.6645708,7.26412951 C22.6645708,7.26412951 27.7785187,9.0608712 31.4726603,11.2279337 L31.1244656,12.1965646 L22.6645708,7.26412951 Z" id="路径" fill="#D6C093" opacity="0.42"></path>
-                        <g id="编组" transform="translate(16.8436, 5.7016)" fill="#D6C093">
-                            <path d="M3.55010562,0.559477844 C3.55010562,0.559477844 -0.990226731,-1.42358878 0.198408184,2.0772497 C1.38733063,5.57886454 10.5145746,15.2369657 10.5145746,15.2369657 L14.2814605,6.49599727 C14.2808854,6.49522091 6.85004827,1.71106945 3.55010562,0.559477844 Z" id="路径"></path>
-                        </g>
-                        <path d="M1.11905348,8.79070004 C1.11905348,8.79070004 8.95904096,9.96506469 14.177361,6.94168386 C14.177361,6.94168386 10.7638453,9.73060582 0.49972121,10.2285074 L1.11905348,8.79070004 Z" id="路径" fill="#D6C093" opacity="0.27"></path>
-                        <path d="M17.3375657,8.47161859 C17.3375657,8.47161859 21.8793357,15.5059024 21.8393695,19.0111402 L27.3578673,20.9377918 L17.3375657,8.47161859 Z" id="路径" fill="#D6C093" opacity="0.25"></path>
-                        <g id="编组" transform="translate(16.8426, 5.7021)" fill="#C7B289">
-                            <path d="M1.3782966,3.3319015 C-0.0288585259,-0.716525258 5.27916982,1.5959742 5.27916982,1.5959742 C5.87061201,1.80248434 6.50173287,2.02503912 7.14866769,2.25458109 C5.79010456,1.52247937 4.49968523,0.890786082 3.54998491,0.559541755 C3.54998491,0.559541755 -0.990634963,-1.42378365 0.198575005,2.0775724 C0.724748661,3.62924504 2.81104158,6.38944191 4.97094131,8.98298148 C3.38206939,6.99137496 1.92143432,4.8910789 1.3782966,3.3319015 Z M14.1088238,6.38426622 L10.3715532,15.0582095 C10.3715532,15.0582095 10.153033,14.8372074 9.78471145,14.4511007 C10.2421663,14.9466733 10.5153165,15.2362533 10.5153165,15.2362533 L14.2822023,6.49554361 C14.2819148,6.49476726 14.2203841,6.45543199 14.1088238,6.38426622 Z" id="形状"></path>
-                        </g>
-                        <g id="编组" transform="translate(6.6604, 4.4017)" fill="#C7B289">
-                            <path d="M3.05452444,0.870033928 C3.866212,0.870551497 4.26788664,0.778682953 4.45362881,0.663523793 C4.22562023,0.37834313 4.20721853,0.210650689 4.20721853,0.210650689 C4.20721853,0.210650689 4.206931,0.209874335 4.20635595,0.209615551 C4.08530726,0.142849116 3.96483361,0.0732360504 3.84407245,0 C3.84407245,0 4.56317644,0.648773069 2.41592789,0.646702792 C0.550455383,0.643856161 -1.08240811,2.64037959 0.911013724,2.949886 C0.0245692531,2.33786035 1.4535764,0.867963651 3.05452444,0.870033928 Z" id="路径"></path>
-                        </g>
-                    </g>
-                    <path d="M31.0927663,33.822696 C31.0407239,33.822696 30.9881066,33.8144149 30.9369268,33.7963 L3.58049715,24.2466296 C3.35852663,24.1689942 3.24811642,23.9441103 3.33437439,23.7445874 L11.2338799,5.41331929 C11.2752837,5.31731019 11.3572288,5.24019237 11.4618885,5.19852804 C11.5668357,5.15686372 11.6852966,5.15479344 11.791969,5.19179964 L39.1481111,14.7414701 C39.2547835,14.7787351 39.340754,14.8524887 39.3867582,14.9466863 C39.43305,15.0408839 39.4356377,15.1477619 39.3942339,15.243771 L31.4944409,33.5747803 C31.4285973,33.7287572 31.2655697,33.822696 31.0927663,33.822696 Z M4.2947132,23.6630702 L30.8466435,32.9319593 L38.4347577,15.3245118 L11.8825399,6.05562274 L4.2947132,23.6630702 Z" id="形状" fill="#CCCCDE"></path>
-                </g>
-            </g>
-            <g id="Layer_1_1_" transform="translate(0, 26.5089)">
-                <g id="编组" transform="translate(38.1333, 19.7703)">
-                    <g>
-                        <rect id="矩形" fill="#FFD6D6" x="0.428884374" y="0.393041153" width="5.34805384" height="19.4430824"></rect>
-                        <path d="M5.77665249,20.2296892 L0.428598641,20.2296892 C0.192012191,20.2296892 0,20.0534893 0,19.8363858 L0,0.393303355 C0,0.176199903 0.192012191,0 0.428598641,0 L5.77665249,0 C6.01323894,0 6.20525113,0.176199903 6.20525113,0.393303355 L6.20525113,19.8363858 C6.20525113,20.0534893 6.01352467,20.2296892 5.77665249,20.2296892 Z M0.857483015,19.4430824 L5.34833958,19.4430824 L5.34833958,0.78660671 L0.857483015,0.78660671 L0.857483015,19.4430824 Z" id="形状" fill="#CCCCDE"></path>
-                    </g>
-                    <path d="M5.77665249,3.60160992 L0.428598641,3.60160992 C0.192012191,3.60160992 0,3.42541002 0,3.20830657 C0,2.99120311 0.192012191,2.81500321 0.428598641,2.81500321 L5.77665249,2.81500321 C6.01323894,2.81500321 6.20525113,2.99120311 6.20525113,3.20830657 C6.20525113,3.42541002 6.01352467,3.60160992 5.77665249,3.60160992 Z" id="路径" fill="#CCCCDE"></path>
-                    <path d="M5.77665249,17.3402205 L0.428598641,17.3402205 C0.192012191,17.3402205 0,17.1640206 0,16.9469172 C0,16.7298137 0.192012191,16.5536138 0.428598641,16.5536138 L5.77665249,16.5536138 C6.01323894,16.5536138 6.20525113,16.7298137 6.20525113,16.9469172 C6.20525113,17.1640206 6.01352467,17.3402205 5.77665249,17.3402205 Z" id="路径" fill="#CCCCDE"></path>
-                </g>
-                <g id="编组" transform="translate(32.7089, 19.7703)">
-                    <g>
-                        <rect id="矩形" fill="#FFFFFF" x="0.428598641" y="0.393041153" width="5.49034859" height="19.4430824"></rect>
-                        <path d="M5.91894723,20.2296892 L0.428598641,20.2296892 C0.191726459,20.2296892 0,20.0534893 0,19.8363858 L0,0.393303355 C0,0.176199903 0.191726459,0 0.428598641,0 L5.91894723,0 C6.15553368,0 6.34754588,0.176199903 6.34754588,0.393303355 L6.34754588,19.8363858 C6.34754588,20.0534893 6.15553368,20.2296892 5.91894723,20.2296892 Z M0.857197282,19.4430824 L5.49034859,19.4430824 L5.49034859,0.78660671 L0.857197282,0.78660671 L0.857197282,19.4430824 Z" id="形状" fill="#CCCCDE"></path>
-                    </g>
-                    <path d="M5.91894723,3.60160992 L0.428598641,3.60160992 C0.191726459,3.60160992 0,3.42541002 0,3.20830657 C0,2.99120311 0.191726459,2.81500321 0.428598641,2.81500321 L5.91894723,2.81500321 C6.15553368,2.81500321 6.34754588,2.99120311 6.34754588,3.20830657 C6.34754588,3.42541002 6.15553368,3.60160992 5.91894723,3.60160992 Z" id="路径" fill="#CCCCDE"></path>
-                    <path d="M5.95837831,17.3402205 L0.428598641,17.3402205 C0.191726459,17.3402205 0,17.1640206 0,16.9469172 C0,16.7298137 0.191726459,16.5536138 0.428598641,16.5536138 L5.95837831,16.5536138 C6.19496476,16.5536138 6.38697695,16.7298137 6.38697695,16.9469172 C6.38697695,17.1640206 6.19496476,17.3402205 5.95837831,17.3402205 Z" id="路径" fill="#CCCCDE"></path>
-                </g>
-                <g id="编组" transform="translate(43.2873, 19.7703)">
-                    <g>
-                        <rect id="矩形" fill="#DBF8FF" x="0.428598641" y="0.393041153" width="5.34805384" height="19.4430824"></rect>
-                        <path d="M5.77665249,20.2296892 L0.428598641,20.2296892 C0.192012191,20.2296892 0,20.0534893 0,19.8363858 L0,0.393303355 C0,0.176199903 0.192012191,0 0.428598641,0 L5.77665249,0 C6.01323894,0 6.20525113,0.176199903 6.20525113,0.393303355 L6.20525113,19.8363858 C6.20525113,20.0534893 6.01323894,20.2296892 5.77665249,20.2296892 Z M0.857197282,19.4430824 L5.34805384,19.4430824 L5.34805384,0.78660671 L0.857197282,0.78660671 L0.857197282,19.4430824 Z" id="形状" fill="#CCCCDE"></path>
-                    </g>
-                    <path d="M5.77665249,3.60160992 L0.428598641,3.60160992 C0.192012191,3.60160992 0,3.42541002 0,3.20830657 C0,2.99120311 0.192012191,2.81500321 0.428598641,2.81500321 L5.77665249,2.81500321 C6.01323894,2.81500321 6.20525113,2.99120311 6.20525113,3.20830657 C6.20525113,3.42541002 6.01323894,3.60160992 5.77665249,3.60160992 Z" id="路径" fill="#CCCCDE"></path>
-                    <path d="M5.77665249,17.3402205 L0.428598641,17.3402205 C0.192012191,17.3402205 0,17.1640206 0,16.9469172 C0,16.7298137 0.192012191,16.5536138 0.428598641,16.5536138 L5.77665249,16.5536138 C6.01323894,16.5536138 6.20525113,16.7298137 6.20525113,16.9469172 C6.20525113,17.1640206 6.01323894,17.3402205 5.77665249,17.3402205 Z" id="路径" fill="#CCCCDE"></path>
-                </g>
-                <g id="编组" transform="translate(48.3796, 19.7703)">
-                    <g>
-                        <rect id="矩形" fill="#FFFDE6" x="0.428598641" y="0.393041153" width="5.34833958" height="19.4430824"></rect>
-                        <path d="M5.77693822,20.2296892 L0.428598641,20.2296892 C0.192012191,20.2296892 0,20.0534893 0,19.8363858 L0,0.393303355 C0,0.176199903 0.192012191,0 0.428598641,0 L5.77693822,0 C6.01352467,0 6.20553686,0.176199903 6.20553686,0.393303355 L6.20553686,19.8363858 C6.20553686,20.0534893 6.01352467,20.2296892 5.77693822,20.2296892 Z M0.857197282,19.4430824 L5.34833958,19.4430824 L5.34833958,0.78660671 L0.857197282,0.78660671 L0.857197282,19.4430824 Z" id="形状" fill="#CCCCDE"></path>
-                    </g>
-                    <path d="M5.77665249,3.60160992 L0.428598641,3.60160992 C0.192012191,3.60160992 0,3.42541002 0,3.20830657 C0,2.99120311 0.192012191,2.81500321 0.428598641,2.81500321 L5.77665249,2.81500321 C6.01323894,2.81500321 6.20525113,2.99120311 6.20525113,3.20830657 C6.20525113,3.42541002 6.01323894,3.60160992 5.77665249,3.60160992 Z" id="路径" fill="#CCCCDE"></path>
-                    <path d="M5.77665249,17.3402205 L0.428598641,17.3402205 C0.192012191,17.3402205 0,17.1640206 0,16.9469172 C0,16.7298137 0.192012191,16.5536138 0.428598641,16.5536138 L5.77665249,16.5536138 C6.01323894,16.5536138 6.20525113,16.7298137 6.20525113,16.9469172 C6.20525113,17.1640206 6.01323894,17.3402205 5.77665249,17.3402205 Z" id="路径" fill="#CCCCDE"></path>
-                </g>
-            </g>
-            <g id="Layer_5" transform="translate(3.6456, 25.5089)">
-                <rect id="矩形" fill="#CCCCDE" x="8.951099" y="40.2249332" width="52.5893409" height="1"></rect>
-                <rect id="矩形" fill="#CCCCDE" x="65.4566523" y="40.2249332" width="1.98638569" height="1"></rect>
-                <rect id="矩形" fill="#CCCCDE" x="0" y="40.2249332" width="3.91621239" height="1"></rect>
-                <g id="编组" transform="translate(13.0168, 0)">
-                    <path d="M40.3959056,9.28555855 L27.5484894,9.28555855 L21.1740927,2.50191561 C20.0815664,1.33931542 17.8109647,0.387533397 16.1289743,0.387533397 L3.48562514,0.387533397 C1.80306636,0.387533397 0.426324014,1.63874956 0.426324014,3.1682147 L0.426324014,35.9783422 C0.426324014,38.5272786 2.72023143,40.612725 5.52459079,40.612725 L40.3959056,40.612725 C43.1994124,40.612725 45.4941724,38.5277953 45.4941724,35.9783422 L45.4941724,13.9194246 C45.4941724,11.3707466 43.1996966,9.28555855 40.3959056,9.28555855 Z" id="路径" fill="#FFF2B5"></path>
-                    <path d="M43.6223258,13.085711 C43.1721276,13.7481348 43.7343069,34.3072982 42.9674921,36.1478235 C42.3220375,37.3176577 42.3695016,38.4288451 40.4294431,38.4288451 L5.20285827,38.4288451 C0.878511685,38.4288451 0.0528641778,34.1295496 0.0528641778,31.6738796 L0.0528641778,35.9620658 C0.0528641778,38.4190276 2.37036152,40.4282591 5.20285827,40.4282591 L40.4297274,40.4282591 C43.2630768,40.4282591 45.5797214,38.4190276 45.5797214,35.9620658 L45.3657068,13.9207163 C45.365991,14.7409954 44.0725239,12.4222539 43.6223258,13.085711 Z" id="路径" fill="#FF4D00" opacity="0.15"></path>
-                    <polygon id="路径" fill="#FF4D00" opacity="0.15" points="7.56412488 9.28555855 7.56412488 7.52744871 23.6848569 7.52744871 25.3367204 9.28555855"></polygon>
-                    <path d="M40.0943525,9.51730352 L27.4291186,9.51730352 L21.1453869,2.73417729 C20.067924,1.57106039 17.8294387,0.61979508 16.1713225,0.61979508 L3.70646098,0.61979508 C2.04806056,0.61979508 0.691213335,1.87101124 0.691213335,3.40021803 L0.691213335,5.8127426 C0.691213335,4.28353582 1.20877069,1.50647149 2.8671711,1.50647149 L15.33118,1.50647149 C16.9895804,1.50647149 19.2280657,2.45799516 20.3052444,3.62085371 L27.428266,11.9300865 L40.0934998,11.9300865 C42.8575005,11.9300865 45.119576,14.0150161 45.119576,16.5644692 L45.119576,14.1524613 C45.1204284,11.6030083 42.8583532,9.51730352 40.0943525,9.51730352 Z" id="路径" fill="#FFF0A6"></path>
-                    <polygon id="路径" fill="#FFF0A6" points="27.5487736 11.7828238 7.56412488 11.7828238 7.56412488 9.65578212 25.5504508 9.65578212"></polygon>
-                    <rect id="矩形" fill="#6E6E96" x="7.56412488" y="8.89802516" width="19.9846487" height="1"></rect>
-                    <path d="M40.3959056,41 L5.52459079,41 C2.4783636,41 0,38.7471392 0,35.9780839 L0,3.1682147 C0,1.42121415 1.56347227,0 3.48562514,0 L16.1284059,0 C17.9240826,0 20.3328133,1.00939532 21.498099,2.2500189 L27.7448826,8.8977668 L40.3959056,8.8977668 C43.4421328,8.8977668 45.9204964,11.1503693 45.9204964,13.9194246 L45.9204964,35.9783422 C45.9204964,38.7473975 43.4421328,41 40.3959056,41 Z M3.48562514,0.774808439 C2.03384976,0.774808439 0.852648029,1.8485343 0.852648029,3.1682147 L0.852648029,35.9783422 C0.852648029,38.319819 2.94845688,40.2251916 5.52459079,40.2251916 L40.3959056,40.2251916 C42.9720396,40.2251916 45.0678484,38.3200774 45.0678484,35.9783422 L45.0678484,13.9194246 C45.0678484,11.5779478 42.9717553,9.67283359 40.3959056,9.67283359 L27.3518119,9.67283359 L20.8498022,2.75329561 C19.8425407,1.68086152 17.6805095,0.774808439 16.1284059,0.774808439 L3.48562514,0.774808439 L3.48562514,0.774808439 Z" id="形状" fill="#6E6E96"></path>
-                </g>
-            </g>
-        </g>
-        <g id="工作1" transform="translate(492, 469)">
-            <polygon id="矩形_11" stroke="#A8D1F8" stroke-width="10" fill="#D6ECFD" stroke-linejoin="round" points="2.84810127 0 62.6582278 0 62.6582278 37.6071429 2.84810127 37.6071429"></polygon>
-            <rect id="矩形_12" fill="#A8D1F8" fill-rule="nonzero" x="30.3797468" y="0" width="1.89873418" height="38.5714286"></rect>
-            <g id="zhiwu" transform="translate(53.1646, 14.4643)">
-                <ellipse id="椭圆_3_拷贝" fill="#CA6B41" fill-rule="nonzero" cx="11.2003319" cy="37.3365879" rx="4.98779633" ry="1"></ellipse>
-                <polygon id="形状_64" fill="#CA6B41" points="20.8935965 26.5056631 15.9999095 37.3365879 6.40075434 37.3365879 1.31884864 26.505866 20.8935965 26.505866"></polygon>
-                <ellipse id="椭圆_3" fill="#70371D" fill-rule="nonzero" cx="11.1062226" cy="26.5059336" rx="9.97559267" ry="1"></ellipse>
-                <path d="M10.9180038,26.9117661 C10.9180038,26.9117661 4.574468,24.8259225 3.24677309,21.7469391 C1.91907817,18.6679557 0,12.290366 0,12.290366 C2.08226381,18.596191 4.87844125,16.0123233 8.16728122,21.3945412 C9.47436619,23.5328726 10.9180038,26.9117661 10.9180038,26.9117661 Z" id="形状_65" fill="#41754E"></path>
-                <path d="M12.6119724,26.9117661 C12.6119724,26.9117661 17.9711243,25.3860389 19.0928138,23.133804 C20.2145033,20.881569 21.835443,16.2165247 21.835443,16.2165247 C20.0763508,20.8290813 17.7140175,18.9390518 14.9354385,22.8759651 C13.8315357,24.4401787 12.6119724,26.9117661 12.6119724,26.9117661 Z" id="形状_65_拷贝_3" fill="#41754E"></path>
-                <path d="M11.4880243,27.1736633 C11.4880243,27.1736633 5.43509814,21.8862749 6.20990055,16.4504195 C6.98470295,11.014564 9.59388508,0 9.59388508,0 C7.23766892,10.9448961 12.6125371,7.5359709 12.4278004,17.3232975 C12.3544892,21.2122548 11.4880243,27.1736633 11.4880243,27.1736633 Z" id="形状_65_拷贝" fill="#4E855C"></path>
-                <path d="M11.3808337,27.1755572 C11.3808337,27.1755572 17.9438326,23.8294685 17.8823792,20.4830415 C17.8209258,17.1366145 16.6850257,10.3696962 16.6850257,10.3696962 C17.5835819,17.0970459 12.7879569,15.0638252 11.7209449,21.105318 C11.2970764,23.5057494 11.3808337,27.1755572 11.3808337,27.1755572 Z" id="形状_65_拷贝_2" fill="#599F5F"></path>
-            </g>
-            <g id="zhuo" transform="translate(0, 29.8929)" fill-rule="nonzero">
-                <rect id="矩形_6" fill="#EC8F51" x="0" y="0" width="60.7594937" height="1.65306122"></rect>
-                <rect id="矩形_6_拷贝" fill="#CB6724" x="0" y="0" width="16.8884216" height="1.65306122"></rect>
-                <rect id="矩形_7" fill="#6A7888" x="43.094593" y="1.65306122" width="1.94119788" height="17.7704082"></rect>
-                <rect id="矩形_7_拷贝" fill="#6A7888" x="56.6829781" y="1.65306122" width="1.94119788" height="20.5255102"></rect>
-                <rect id="矩形_7_拷贝_2" fill="#8794A4" x="2.32943746" y="1.65306122" width="1.94119788" height="17.7704082"></rect>
-                <rect id="矩形_7_拷贝_3" fill="#8794A4" x="15.9178226" y="1.65306122" width="1.94119788" height="20.5255102"></rect>
-            </g>
-            <g id="diannao" transform="translate(12.3418, 14.4643)">
-                <rect id="矩形_8" fill="#363636" fill-rule="nonzero" x="11.5166866" y="6.89298011" width="2.58750333" height="9.49987704"></rect>
-                <path d="M1.611098,0.000131845739 L21.8805641,0.000131845739 C22.8475988,0.0104387585 23.6461106,0.577443755 23.7253698,1.31008623 L24.5639615,10.4802792 C24.6024151,10.8201519 24.4498154,11.1565167 24.1439264,11.4061335 C23.8380374,11.6557503 23.4074416,11.7952947 22.9586985,11.7902336 L2.68923241,11.7902336 C1.72219773,11.7799267 0.923685952,11.2129217 0.844426782,10.4802792 L0.00583500333,1.31008623 C-0.0325877163,0.970219114 0.120022411,0.633867792 0.425904714,0.384256441 C0.731787018,0.134645091 1.16236436,-0.00490627879 1.611098,0.000131845739 Z" id="圆角矩形_6" fill="#363636"></path>
-                <path d="M2.67411658,0.000131845739 L22.9435827,0.000131845739 C23.9106545,0.0104014035 24.7092218,0.577416216 24.7884846,1.31008623 L25.6270764,10.4802792 C25.6654991,10.8201463 25.512889,11.1564977 25.2070067,11.406109 C24.9011244,11.6557204 24.470547,11.7952717 24.0218134,11.7902336 L3.75234727,11.7902336 C2.78527549,11.779964 1.98670821,11.2129492 1.90744536,10.4802792 L1.06885358,1.31008623 C1.03043086,0.970219114 1.18304099,0.633867792 1.48892329,0.384256441 C1.7948056,0.134645091 2.22538294,-0.00490627879 2.67411658,0.000131845739 Z" id="圆角矩形_6_拷贝" stroke="#555555" stroke-width="4" fill="#E7EFFF" stroke-linejoin="round"></path>
-                <g id="组_5" transform="translate(6.6546, 2.781)" fill="#2E8F79" fill-rule="nonzero">
-                    <rect id="矩形_14" x="0" y="0" width="1.15535033" height="4.24454494"></rect>
-                    <rect id="矩形_14_拷贝" x="1.73302549" y="1.46363619" width="1.15535033" height="2.78090876"></rect>
-                    <rect id="矩形_14_拷贝_2" x="5.19907647" y="2.63454514" width="1.15535033" height="1.60999981"></rect>
-                    <rect id="矩形_14_拷贝_3" x="3.46605098" y="1.46363619" width="1.15535033" height="2.78090876"></rect>
-                    <ellipse id="椭圆_6" cx="13.3828079" cy="2.41499971" rx="2.40697985" ry="1.82954523"></ellipse>
-                </g>
-            </g>
-            <g id="ren" transform="translate(21.8354, 5.7857)">
-                <path d="M3.88410612,44.1491496 C3.88410612,44.1491496 0.577201185,44.2190638 0.0301214726,45.1251822 C-0.51695824,46.0313005 6.54767867,46.8406731 8.25958065,45.7890558 C8.85842163,44.6042488 7.92604038,43.1393702 7.92604038,43.1393702 L3.88410612,44.1491496 Z" id="形状_71" fill="#483020"></path>
-                <path d="M17.2509191,26.809808 C17.2509191,26.809808 5.45759035,28.8152596 4.45600022,31.2356321 C3.98859796,32.3650471 3.09896338,43.6832625 3.09896338,43.6832625 C3.09896338,43.6832625 4.47228467,44.0981835 5.81303707,44.0981835 C7.18606757,44.0981835 8.52711077,43.2683415 8.52711077,43.2683415 L9.49642281,33.1719302 C9.49642281,33.1719302 28.414195,32.9275417 28.4949387,27.63965 C28.5756824,22.3517584 17.2509191,26.809808 17.2509191,26.809808 Z" id="形状_70" fill="#343434"></path>
-                <path d="M13.3009725,43.9806226 C13.3009725,43.9806226 10.0006589,43.9708719 9.41403128,44.8641969 C8.82740364,45.7575218 15.8357235,46.7370811 17.5901783,45.7263336 C18.2405867,44.5554956 17.3769297,43.0675197 17.3769297,43.0675197 L13.3009725,43.9806226 Z" id="形状_71_拷贝" fill="#483020"></path>
-                <path d="M25.8099444,28.9857921 C25.8099444,28.9857921 14.0465674,30.9935949 13.0474974,33.4165953 C12.5812584,34.5473242 11.8873279,43.9397528 11.8873279,43.9397528 C11.8873279,43.9397528 12.8704041,44.6320485 14.2072793,44.6320485 C15.5768203,44.6320485 17.3012264,43.9397528 17.3012264,43.9397528 L18.0748343,35.3550371 C18.0748343,35.3550371 36.944044,35.1104412 37.0248846,29.8165331 C37.1057252,24.5226251 25.8099444,28.9857921 25.8099444,28.9857921 Z" id="形状_70_拷贝" fill="#343434"></path>
-                <path d="M22.235897,1.36194167 C15.5864165,1.36194167 18.0920881,8.27915901 22.235897,8.27915901 C26.379706,8.27915901 28.8853776,1.36194167 22.235897,1.36194167 Z" id="lian" fill="#F5B08A"></path>
-                <path d="M24.5607919,7.0339119 L25.9148239,9.38312552 C25.9148239,9.38312552 24.5885143,11.0216486 22.8201014,10.9031886 C22.5450106,10.8847938 22.6399063,10.0418126 22.433249,9.10671897 C22.2681174,8.41876475 21.7928903,7.78802878 21.0797016,7.31024929 L24.5607919,7.0339119 Z" id="bo" fill="#E4875E"></path>
-                <path d="M26.9440394,8.13836248 C34.9186665,10.2129675 30.4335628,26.533194 30.4335628,26.533194 C30.4335628,26.533194 29.8125245,28.1548436 25.7258081,28.062662 C18.4762264,27.8990448 16.8285898,26.54087 16.8285898,26.54087 C16.8285898,26.54087 16.1325269,14.9309652 20.54658,9.79804653 C22.2115673,7.86174847 25.6113323,7.79162682 26.9440394,8.13836248 Z" id="yi" fill="#2E8F79"></path>
-                <path d="M17.0365073,1.91523884 C16.8922736,3.70050564 18.2406836,4.05657703 19.4404011,5.40382555 C19.6868002,5.68043956 20.176012,4.32012102 20.5461923,5.3722224 C20.8022845,7.26903381 22.0333108,7.76285897 22.6786788,7.72344147 C24.064795,7.63865928 25.2958213,7.67593301 27.0585152,8.0024067 C26.5681402,6.24673759 29.7479684,5.0167734 28.1068262,1.49962629 C22.5955118,-1.8136563 21.4771196,1.30890093 17.0365073,1.91523884 Z" id="fa" fill="#393939"></path>
-                <path d="M5.61917467,22.2456769 C5.61917467,22.2456769 3.66436309,21.9805424 2.51737615,22.6605979 C1.37038922,23.3406534 1.85494831,23.9629658 2.12965134,24.0436679 C2.40435437,24.1243701 6.39462429,23.9053609 6.39462429,23.9053609 L5.61917467,22.2456769 Z" id="形状_74" fill="#F5B08A"></path>
-                <path d="M18.9956808,12.7024936 C17.9834282,13.9361229 18.7321248,17.9127259 16.7808028,20.1495651 C10.1700947,21.5127189 5.48696051,21.2954386 5.23426086,22.5509204 C4.83228716,24.5487651 8.15431336,24.1707029 8.15431336,24.1707029 C8.15431336,24.1707029 21.1005418,23.8766622 22.4322796,21.8733544 C26.4232281,15.8695857 23.3847256,12.1456696 22.9493107,11.9792171 C22.0609362,11.6393968 19.9583045,11.5291661 18.9956808,12.7024936 Z" id="ge" fill="#E2E2E2"></path>
-            </g>
-            <g id="yizi" transform="translate(31.3291, 20.25)">
-                <path d="M20.533879,0.127907335 C20.533879,0.127907335 30.275881,-0.340926626 32.0294413,2.00324318 C32.6272106,2.80233718 32.5247247,14.6561341 27.3532804,18.211503 C22.1818361,21.7668719 2.80343553,20.9240423 0.270515027,19.6849812 C-2.26240548,18.44592 13.7165235,19.6955634 18.0009585,15.6664043 C23.0083475,10.9579718 20.533879,0.127907335 20.533879,0.127907335 Z" id="形状_69" fill="#3A2828"></path>
-                <path d="M20.144199,1.33348038 C20.144199,1.33348038 21.6145593,13.5687072 15.078358,16.3361671 C12.460682,17.4444906 7.05377355,18.2443214 3.43802954,18.4890527 C0.809247734,18.6669417 -0.235484554,18.8163658 0.465355066,19.417076 C1.22912802,20.0717022 6.73628171,19.637361 13.5196377,18.0775504 C23.8609675,15.6994906 22.2874394,1.23301596 21.3132392,0.261859895 C20.339039,-0.709296168 20.144199,1.33348038 20.144199,1.33348038 Z" id="形状_68" fill="#493434"></path>
-                <ellipse id="椭圆_5" fill="#768394" fill-rule="nonzero" cx="19.7545189" cy="32.7453558" rx="4.09164081" ry="1.0046442"></ellipse>
-                <rect id="矩形_13" fill="#8794A4" fill-rule="nonzero" x="18.7803187" y="19.5510286" width="1.75356035" height="12.9933984"></rect>
-            </g>
-            <path d="M7.98243348,7.71428571 L16.7011108,7.71428571 C16.9151194,7.71428571 17.0886076,7.83763583 17.0886076,7.98979592 L17.0886076,11.8469388 C17.0886076,11.9990989 16.9151194,12.122449 16.7011108,12.122449 L7.98243348,12.122449 C7.76842492,12.122449 7.59493671,11.9990989 7.59493671,11.8469388 L7.59493671,7.98979592 C7.59493671,7.83763583 7.76842492,7.71428571 7.98243348,7.71428571 Z M13.794885,11.7091837 L15.3448721,13.5 L15.5386205,11.5714286 L13.794885,11.7091837 Z" id="形状_75" fill="#598FF0"></path>
-        </g>
-        <g id="系统开发中" transform="translate(284, 444)" fill-rule="nonzero">
-            <g id="编组">
-                <path d="M59.8271045,15.3019784 C54.6068815,19.1725164 43.4004763,19.6223115 35.1789992,15.0183008 C26.9575222,10.4142901 11.7784688,11.0084797 7.66704996,19.4740836 C3.55563118,27.9396875 12.7267344,36.2557857 9.4057638,42.3446313 C6.08479316,48.433477 -4.98284146,57.046031 2.60736549,67.4411537 C10.1975724,77.8362764 19.8312443,75.1873411 25.6296781,74.1433564 C37.0809726,72.0822214 51.4505309,88.9239814 67.6173044,76.2044913 C76.9326202,68.8761535 90.8055975,81.5828652 96.210848,65.8080908 C100.670554,52.7921449 84.5554791,47.9824041 89.4124497,39.2254556 C94.5768923,29.9126524 93.5850908,18.8773384 87.9893709,13.5334658 C82.7773109,8.55505181 68.8403903,8.61894316 59.8271045,15.3019784 Z" id="路径" fill="url(#linearGradient-2)"></path>
-                <polygon id="路径" fill="url(#linearGradient-3)" points="51.2070021 48.8270477 83.5487121 48.3159169 79.0032951 65.474578 49.1444903 65.474578"></polygon>
-                <g transform="translate(5.7948, 41.096)" id="路径">
-                    <path d="M4.0490363,0.0309086846 C4.0490363,0.0309086846 4.01910539,-0.0419274547 3.97829051,0.0360199927 C3.6109566,0.737547019 0.284543982,8.33678423 0.0206077657,14.2020102 C0.0206077657,14.2020102 -0.534474586,17.57164 4.1170611,17.5269161 C7.99991657,17.4898591 7.89651887,14.3834616 7.88291391,13.3369213 C7.82985457,9.09197999 4.0490363,0.0309086846 4.0490363,0.0309086846 Z" fill="url(#linearGradient-4)"></path>
-                    <path d="M3.94291762,21.2581709 C3.86809034,21.2581709 3.80686802,21.2006687 3.80686802,21.1303882 L3.80686802,2.07415407 C3.80686802,2.00387358 3.86809034,1.94637137 3.94291762,1.94637137 C4.01774489,1.94637137 4.07896721,2.00387358 4.07896721,2.07415407 L4.07896721,21.1303882 C4.07896721,21.2019465 4.01774489,21.2581709 3.94291762,21.2581709 Z" fill="url(#linearGradient-5)"></path>
-                </g>
-                <g transform="translate(75.3779, 35.643)" id="路径">
-                    <path d="M2.60640787,0.0199217517 C2.60640787,0.0199217517 2.58736093,-0.0273578475 2.56151151,0.0237552327 C2.32478521,0.474828166 0.183364571,5.3689056 0.0133025764,9.1448844 C0.0133025764,9.1448844 -0.344507861,11.3146347 2.65130424,11.2865225 C5.15189581,11.2635216 5.08523151,9.26244449 5.07570804,8.58902966 C5.04169564,5.85447986 2.60640787,0.0199217517 2.60640787,0.0199217517 Z" fill="url(#linearGradient-6)"></path>
-                    <path d="M2.53838308,13.6888372 C2.48940522,13.6888372 2.45131133,13.6517803 2.45131133,13.6070563 L2.45131133,1.3373614 C2.45131133,1.29135962 2.49076572,1.25558047 2.53838308,1.25558047 C2.58600043,1.25558047 2.62545482,1.29263745 2.62545482,1.3373614 L2.62545482,13.6070563 C2.62545482,13.6517803 2.58600043,13.6888372 2.53838308,13.6888372 Z" fill="url(#linearGradient-7)"></path>
-                </g>
-                <ellipse id="椭圆形" fill="url(#linearGradient-8)" cx="54.5891951" cy="4.44044885" rx="4.72772346" ry="4.44044885"></ellipse>
-                <path d="M57.2788956,6.86193102 L52.5756611,6.86193102 C52.2722705,5.50615657 50.9906833,4.48772845 49.4560438,4.48772845 C47.9214044,4.48772845 46.6411777,5.50615657 46.3364266,6.86193102 L45.1051778,6.86193102 C43.6453656,6.86193102 42.4603736,7.97364052 42.4603736,9.34602672 L42.4603736,9.34602672 C42.4603736,10.7171351 43.6440051,11.8301224 45.1051778,11.8301224 L57.2775351,11.8301224 C58.7373473,11.8301224 59.9223404,10.7184129 59.9223404,9.34602672 L59.9223404,9.34602672 C59.9236998,7.97491835 58.7400683,6.86193102 57.2788956,6.86193102 Z" id="路径" fill="url(#linearGradient-9)"></path>
-                <g transform="translate(85.6289, 54.7779)">
-                    <ellipse id="椭圆形" fill="url(#linearGradient-10)" cx="1.89244988" cy="1.77745737" rx="1.89244988" ry="1.77745737"></ellipse>
-                    <path d="M1.89925236,6.17190444 C1.86660046,6.17190444 1.84075103,6.14762573 1.84075103,6.11695788 L1.84075103,0.502186013 C1.84075103,0.471518165 1.86660046,0.447239452 1.89925236,0.447239452 C1.93190426,0.447239452 1.95775369,0.471518165 1.95775369,0.502186013 L1.95775369,6.11695788 C1.95639319,6.14762573 1.93054377,6.17190444 1.89925236,6.17190444 Z" id="路径" fill="url(#linearGradient-11)"></path>
-                </g>
-            </g>
-            <g id="编组" transform="translate(17.46, 21)">
-                <path d="M56.9436122,33.9298516 L5.2864134,33.9298516 L5.2864134,3.52470886 C5.2864134,1.5786141 6.93619829,0 8.97003145,0 L53.2599942,0 C55.2938274,0 56.9436122,1.5786141 56.9436122,3.52470886 L56.9436122,33.9298516 Z" id="路径" fill="url(#linearGradient-12)"></path>
-                <path d="M56.9436122,33.9298516 L5.2864134,33.9298516 L5.2864134,4.56245354 C5.2864134,2.61635878 6.93619829,1.03774468 8.97003145,1.03774468 L53.2599942,1.03774468 C55.2938274,1.03774468 56.9436122,2.61635878 56.9436122,4.56245354 L56.9436122,33.9298516 Z" id="路径" fill="url(#linearGradient-13)"></path>
-                <path d="M49.580433,31.5839275 L12.6495927,31.5839275 C10.1532788,31.5839275 8.1302639,29.6481843 8.1302639,27.2595601 L8.1302639,7.63169342 C8.1302639,5.24306913 10.1532788,3.30732594 12.6495927,3.30732594 L49.580433,3.30732594 C52.0767468,3.30732594 54.0997617,5.24306913 54.0997617,7.63169342 L54.0997617,27.2595601 C54.0997617,29.6481843 52.0767468,31.5839275 49.580433,31.5839275 Z" id="路径" fill="#FFFFFF"></path>
-                <path d="M61.596817,42.208518 L57.2018982,35.8280704 L5.02812741,35.8280704 L0.583174198,42.112766 C-0.870529696,44.4146959 0.64943605,47 2.34384626,47 L59.8090993,47 C61.4981003,47 62.8341556,44.5026842 61.596817,42.208518 Z" id="路径" fill="url(#linearGradient-14)"></path>
-                <path d="M61.4034406,41.7077609 L56.94226,33.9298516 L5.28506112,33.9298516 L0.756266382,41.6935275 C-0.0943194311,43.1518046 0.948290525,44.9905019 2.62782563,44.9905019 L59.5237676,44.9905019 C61.1965413,44.9905019 62.2405035,43.166038 61.4034406,41.7077609 Z" id="路径" fill="url(#linearGradient-15)"></path>
-                <path d="M39.1070035,42.6135231 L23.1230221,42.6135231 C22.6037456,42.6135231 22.2846068,42.0428929 22.5510065,41.5951876 L24.0479835,39.0836385 C24.1683366,38.8817829 24.3860541,38.7575641 24.619999,38.7575641 L37.6086743,38.7575641 C37.8426192,38.7575641 38.0603367,38.8817829 38.1806899,39.0836385 L39.6776668,41.5951876 C39.9454188,42.0428929 39.6249278,42.6135231 39.1070035,42.6135231 Z" id="路径" fill="url(#linearGradient-16)"></path>
-                <ellipse id="椭圆形" fill="#FFFFFF" cx="39.6965988" cy="25.4674449" rx="1" ry="1"></ellipse>
-                <g transform="translate(18.1401, 6.5966)">
-                    <g transform="translate(9.6631, 2.8143)" id="形状">
-                        <path d="M11.1657982,6.38950527 C11.1874347,6.27175619 11.2090712,6.14106764 11.1779687,6.02978829 C11.054911,5.56655563 11.2861513,5.28318146 11.6539722,5.0282741 C11.9920429,4.79406987 12.2949542,4.51457754 12.6235589,4.24543678 C12.1543168,3.43801448 11.695893,2.64741348 11.2212418,1.83222751 C10.691147,2.00044049 10.1624044,2.15700796 9.64448016,2.33816039 C9.39566014,2.42485478 9.18335176,2.44685186 8.97915708,2.25793574 C8.91965664,2.20359001 8.84392881,2.15053823 8.76549641,2.13242298 C8.24216301,2.01208601 8.07988909,1.6601327 8.03661604,1.18913636 C8.00010441,0.790600997 7.90003549,0.395947471 7.82701222,0 C6.83849357,0 5.84862264,0 4.860104,0 C4.73028486,0.588745423 4.6099317,1.17878479 4.46794201,1.76494232 C4.42331669,1.95127054 3.32120629,2.43003056 3.12647758,2.3692151 C2.65858777,2.22170526 2.18528883,2.08713487 1.726865,1.9189219 C1.50373835,1.8374033 1.3982603,1.87233984 1.28466856,2.07290147 C0.930370492,2.70046527 0.554435904,3.31638356 0.182558163,3.93488974 C0.132523704,4.01899623 0.0608527211,4.09016326 0,4.16780002 C0,4.20791234 0,4.24802467 0,4.28813699 C0.478708073,4.66079344 0.961472994,5.0282741 1.43206737,5.40998816 C1.4848064,5.45268838 1.50509064,5.58596482 1.4766927,5.65325001 C1.32523704,6.01943672 1.70252391,6.45679046 1.30900965,6.78545274 C0.9844618,7.0571814 0.658561671,7.32761611 0.334013825,7.59934477 C0.278570235,7.64463288 0.223126644,7.68992099 0.15551251,7.74426672 C0.631516017,8.57498004 1.09534898,9.38369628 1.57540934,10.2208793 C2.08792448,10.0526664 2.5936782,9.89739284 3.08996595,9.71882829 C3.29145607,9.64636732 3.44832086,9.65542494 3.61059479,9.78740743 C3.69849316,9.85857446 3.79450523,9.94268095 3.89998328,9.96597197 C4.40844158,10.0798392 4.53285158,10.4421441 4.60046572,10.8704402 C4.66267072,11.2676816 4.76814877,11.6584533 4.85739943,12.0634584 C5.84321351,12.0634584 6.81550477,12.0634584 7.80943255,12.0634584 C7.91896744,11.5161193 8.02579778,10.9739559 8.13398039,10.4330865 C8.14750322,10.3645073 8.14750322,10.2635796 8.19212855,10.2364067 C8.45041454,10.0837211 8.74926902,9.98279327 8.98050936,9.80164083 C9.27801155,9.56614266 9.53088841,9.71882829 9.79999267,9.80422873 C10.2164957,9.93750516 10.628942,10.0772513 11.0616724,10.2208793 C11.5782444,9.39534179 12.0839981,8.58533161 12.6073315,7.74814856 C12.1854193,7.42466206 11.7743254,7.09988162 11.3497086,6.79192247 C11.2023098,6.68452496 11.1333434,6.57065771 11.1657982,6.38950527 Z M9.79052669,6.96272334 C9.79323126,7.07141481 9.85273169,7.21116097 9.93657322,7.27844616 C10.2814053,7.5553506 10.6465216,7.81025796 11.0278654,8.0897503 C10.8804665,8.33689398 10.7425337,8.56851031 10.5924303,8.82082978 C10.1637567,8.66296837 9.7431968,8.51416458 9.32939829,8.34983344 C9.16982894,8.28643009 9.05082806,8.27607852 8.90207696,8.39123971 C8.39226639,8.78589324 7.83106907,9.09644027 7.21037131,9.31123531 C7.10624555,9.34746579 7.0007675,9.49497564 6.97642641,9.60754894 C6.88988032,10.0203177 6.83714129,10.4382623 6.77087944,10.8626765 C6.46526355,10.8626765 6.18263647,10.8626765 5.86485004,10.8626765 C5.8053496,10.4706109 5.73232633,10.0785453 5.69040557,9.6825978 C5.66741676,9.46650882 5.57546154,9.36558104 5.36721,9.2659472 C4.82494465,9.00845195 4.29890668,8.71602015 3.78233469,8.41453074 C3.61465164,8.31619084 3.49159391,8.27090273 3.29956977,8.35242133 C2.89658953,8.5232222 2.48143874,8.66555626 2.0392423,8.83247529 C1.8904912,8.58533161 1.75526293,8.35889106 1.59975042,8.10139581 C1.95269621,7.84390056 2.29211916,7.57864163 2.65182636,7.34184952 C2.82627083,7.22668832 2.8519642,7.10117556 2.84655507,6.9135534 C2.82897539,6.33386559 2.83032767,5.75288385 2.84790735,5.17319605 C2.85331648,4.99721939 2.83167996,4.88076425 2.66940603,4.77077885 C2.30969884,4.53010489 1.96757132,4.26355202 1.59434129,3.99052942 C1.75120609,3.74209179 1.89590033,3.51306335 2.05546969,3.26074388 C2.47602961,3.42119318 2.88577126,3.56999697 3.28875151,3.73432811 C3.46049141,3.80420119 3.59301511,3.80678909 3.74582306,3.68645211 C4.25292907,3.2866228 4.81547867,2.97866366 5.4375287,2.76775046 C5.52813165,2.73669576 5.62414372,2.61247694 5.64307567,2.51801889 C5.72962177,2.09489855 5.79047449,1.66660243 5.86214547,1.22666079 C6.16776136,1.22666079 6.45714985,1.22666079 6.76817487,1.22666079 C6.83173216,1.64719324 6.88041434,2.06643174 6.96560815,2.47920051 C6.98859695,2.59047986 7.09948413,2.73410787 7.20631447,2.77292625 C7.81348939,2.99160312 8.37198215,3.28274096 8.86556533,3.68386422 C9.00214588,3.79384963 9.12114676,3.81584671 9.29018209,3.74467968 C9.7039806,3.57258486 10.1258928,3.42119318 10.5748507,3.24909837 C10.724954,3.48847837 10.8737051,3.72527049 11.0359791,3.98405969 C10.6613967,4.26096413 10.2962804,4.51328359 9.9541529,4.79148198 C9.86354996,4.8652369 9.79864039,5.01404069 9.79593582,5.13049583 C9.77700386,5.74123833 9.77835615,6.35327478 9.79052669,6.96272334 Z" fill="url(#linearGradient-17)"></path>
-                        <path d="M6.31921702,3.78477236 C5.01696879,3.77961622 3.95272231,4.79795171 3.95542173,6.04402169 C3.95813144,7.29397352 5.02508248,8.30842717 6.32462615,8.2980756 C7.62281754,8.28772403 8.66001836,7.29656141 8.6721889,6.05307932 C8.68571173,4.80959722 7.62687438,3.78867384 6.31921702,3.78477236 Z M6.30298963,7.17234259 C5.65795078,7.16069708 5.11433314,6.62629739 5.1332651,6.02202461 C5.15219706,5.41257605 5.68229187,4.9131129 6.31245561,4.91051551 C6.95208532,4.90793712 7.50246438,5.43457314 7.49842981,6.04660959 C7.4929984,6.65993998 6.93856249,7.18269416 6.30298963,7.17234259 Z" fill="url(#linearGradient-18)"></path>
-                    </g>
-                    <path d="M9.84435483,3.8158329 C9.91061668,4.13543756 9.98228767,4.45374828 10.0404358,4.77464688 C10.0931748,5.07096051 9.99175365,5.22364614 9.69154689,5.29481317 C9.42649948,5.35821652 9.15198609,5.38927122 8.88829097,5.4617322 C8.79498346,5.48761112 8.70167596,5.57948128 8.65299378,5.66488172 C8.58267508,5.79039448 8.56509541,5.94178616 8.50153812,6.07118076 C8.42986714,6.21739665 8.46502649,6.31703049 8.57726595,6.42830985 C8.74089216,6.59134704 8.89234782,6.76602975 9.03704206,6.94330035 C9.22365708,7.17232879 9.21689566,7.36771463 8.98835989,7.56310048 C8.47584475,8.00304211 7.95386363,8.43522007 7.42782566,8.8609283 C7.20469902,9.04208074 7.00861803,9.02914128 6.80036649,8.83116754 C6.62727431,8.66554246 6.45823897,8.49215369 6.30813559,8.30711942 C6.20400982,8.17901876 6.09717949,8.18678244 5.94437155,8.19454612 C5.49270913,8.2165432 5.23847998,8.41322299 5.18709324,8.84669489 C5.18033183,8.9088043 5.14787704,8.96703187 5.12488824,9.02655338 C4.94909149,9.48202237 4.79628354,9.55189545 4.30946177,9.39532799 C3.75367359,9.21676344 3.1978854,9.04078679 2.64615406,8.85445857 C2.19449164,8.70177294 2.12282066,8.55038126 2.26886719,8.11173357 C2.29456056,8.03409681 2.32160622,7.957754 2.34865187,7.88011724 C2.5339146,7.3470115 2.53661916,7.3444236 2.11876381,6.93941851 C2.06737707,6.88895462 1.95513761,6.86566359 1.87805749,6.87601516 C1.57920302,6.92000932 1.28440539,6.98729451 0.986903199,7.03646446 C0.652889374,7.09210414 0.48520632,7.01187949 0.41488762,6.70521429 C0.263431958,6.05177157 0.129555972,5.39574095 0.0119073776,4.7358285 C-0.0408316474,4.43951487 0.0808737949,4.30235659 0.391898814,4.23118957 C0.667764483,4.16908016 0.950391566,4.13543756 1.22355267,4.06427053 C1.31145104,4.04227345 1.3777129,3.94263961 1.45073616,3.87535442 C1.46290671,3.86500285 1.45884986,3.83912393 1.46696355,3.82359658 C1.6819765,3.43929462 1.57785074,3.13004153 1.22625724,2.87642812 C1.17487049,2.83890369 1.13565429,2.78455795 1.09238125,2.73668195 C0.738083183,2.34849816 0.746196879,2.17769729 1.14782484,1.8348016 C1.58461215,1.46214516 2.02410402,1.09078266 2.46765275,0.724595947 C2.8070757,0.445103615 3.01127039,0.464512804 3.31012486,0.787999301 C3.33581823,0.815172166 3.35880704,0.843638978 3.38314813,0.870811844 C3.85779935,1.40003575 3.85779935,1.40391759 4.56233864,1.2072378 C4.63400962,1.18782861 4.71108973,1.10501607 4.73948767,1.03514298 C4.84090887,0.791881139 4.91528442,0.539561672 5.01129649,0.293711935 C5.104604,0.0530379814 5.30068499,-0.0517716434 5.55220957,0.0245711697 C6.23511233,0.234190419 6.91531052,0.452867291 7.59009958,0.685777568 C7.84973786,0.775059841 7.93763624,0.975621468 7.84297645,1.23570461 C7.76183949,1.45696937 7.6671797,1.67694019 7.61444067,1.90467469 C7.59145187,2.00560247 7.63742948,2.13758496 7.69152079,2.23333697 C7.92681797,2.64092995 8.26488865,2.67845438 8.72331248,2.56458714 C9.49005677,2.37308313 9.56443231,2.448132 9.71859254,3.19603278 C9.7605133,3.40047624 9.80243407,3.60362576 9.84435483,3.80806923 C9.84570711,3.8158329 9.84435483,3.8158329 9.84435483,3.8158329 Z M3.32364769,5.0735484 C3.51161498,5.98319243 4.42170124,6.56805601 5.37100369,6.38949147 C6.32841983,6.20963298 6.95993585,5.31422235 6.76385486,4.41104806 C6.57047843,3.51563744 5.64686936,2.91912834 4.70432832,3.08216553 C3.77260554,3.24261483 3.13432811,4.16131648 3.32364769,5.0735484 Z" id="形状" fill="url(#linearGradient-19)"></path>
-                    <path d="M9.21148653,19.5722132 C9.01675782,19.5722132 8.82202912,19.5722132 8.62730041,19.5722132 C8.49071986,19.5709192 8.39876463,19.5062219 8.41904887,19.3729455 C8.47584475,19.0093467 8.34602561,18.7634969 7.96873874,18.6496297 C7.9092383,18.6315144 7.86190841,18.5810505 7.80646481,18.5487019 C7.68611166,18.4788288 7.56711078,18.4658893 7.44134849,18.54482 C7.35615468,18.5991658 7.26555174,18.6470418 7.1749488,18.6910359 C7.06270933,18.7453817 6.9639927,18.7272664 6.89637856,18.618575 C6.69488844,18.2886187 6.49339832,17.9573686 6.29326048,17.6274123 C6.22294178,17.5122512 6.25404428,17.419087 6.36763603,17.349214 C6.45418212,17.2961622 6.54072822,17.2431104 6.63133116,17.1978223 C6.76385486,17.131831 6.80848019,17.0270214 6.80577562,16.892451 C6.80307106,16.7371775 6.80442334,16.5831979 6.80577562,16.4279244 C6.80712791,16.2920601 6.75844573,16.1885444 6.62592202,16.1238471 C6.53531908,16.0798529 6.44606843,16.0280951 6.35952233,15.9750433 C6.252692,15.9090521 6.22023722,15.8197698 6.28785135,15.7097844 C6.48798919,15.3785342 6.68947931,15.048578 6.88961715,14.7173278 C6.9639927,14.594403 7.08434586,14.5607604 7.18982391,14.6448669 C7.49138295,14.8855408 7.77130546,14.857074 8.0579894,14.6280456 C8.10667157,14.5892272 8.17158114,14.568524 8.2297293,14.5426451 C8.35549159,14.4857115 8.41363974,14.3886655 8.41499203,14.257977 C8.41499203,14.1648129 8.41904887,14.0716488 8.41499203,13.9784847 C8.40687833,13.8283869 8.48395844,13.7520441 8.63406182,13.7507502 C9.02892837,13.7468683 9.42244263,13.7481623 9.81730918,13.7507502 C9.95929886,13.7520441 10.0404358,13.827093 10.036379,13.9655452 C10.0187993,14.4960631 10.0336744,14.4598326 10.4799277,14.6746276 C10.5326667,14.7005065 10.5827012,14.7315612 10.6300311,14.7664978 C10.7598502,14.8583679 10.8910216,14.8544861 11.0221931,14.7742614 C11.5401173,14.4546568 11.4995488,14.6293395 11.7078004,14.9631776 C11.8551992,15.1986757 11.9958366,15.4367618 12.136474,15.6748479 C12.2311338,15.8352972 12.2067927,15.9129339 12.0418142,16.006098 C11.9958366,16.0319769 11.949859,16.0604438 11.8998245,16.0811469 C11.6996867,16.1639594 11.6158452,16.2985298 11.6510045,16.5133249 C11.6712887,16.6336618 11.6591182,16.7617625 11.6469477,16.8846873 C11.6320726,17.0321972 11.6888684,17.1357129 11.8227444,17.2029981 C11.8322104,17.2081738 11.8416764,17.2133496 11.8511423,17.2185254 C12.2622363,17.4501417 12.2622363,17.4501417 12.0201777,17.8525589 C11.8714266,18.0984087 11.7253801,18.3455524 11.5752767,18.5914021 C11.4887306,18.7337362 11.4035368,18.7570272 11.2534334,18.6793904 C10.8409872,18.4671833 10.8869648,18.3830768 10.4177227,18.6910359 C10.3690405,18.7233846 10.3149492,18.7492635 10.2595056,18.7686727 C10.0999363,18.8243124 10.0336744,18.9317099 10.0377313,19.0908653 C10.0539586,19.6343226 10.0133902,19.5735071 9.51980699,19.5748011 C9.4170335,19.5722132 9.31426002,19.5722132 9.21148653,19.5722132 Z M9.22636164,17.6261184 C9.78350211,17.6261184 10.2351645,17.1939404 10.2365198,16.6621286 C10.2378691,16.1341987 9.7767407,15.694257 9.22365708,15.6955481 C8.66786889,15.6968449 8.21755875,16.1316108 8.218908,16.6647165 C8.22026332,17.2029981 8.66245976,17.6261184 9.22636164,17.6261184 Z" id="形状" fill="url(#linearGradient-20)"></path>
-                    <g transform="translate(15.6597, 14.5024)">
-                        <path d="M4.84740724,7.1310425 C4.32542612,7.16986088 3.803445,7.20867926 3.28146388,7.24879159 C3.22331572,7.14398196 3.15029246,7.04434812 3.10972398,6.93436271 C3.07997376,6.85284412 3.09079202,6.75709211 3.08267832,6.66780984 C3.05563267,6.33008994 3.05563267,6.33008994 2.72161884,6.22786821 C2.71080058,6.22398637 2.69863004,6.22657426 2.67564123,6.22528031 C2.53906068,6.38055383 2.40112785,6.54100313 2.25778588,6.6975706 C2.11173935,6.8580199 1.99003391,6.86966541 1.82370314,6.73638898 C1.49915529,6.47630583 1.17731201,6.21234085 0.856821012,5.94578798 C0.69995622,5.81509944 0.690490241,5.69605641 0.823013945,5.54207683 C0.965003627,5.37645175 1.11645929,5.21859034 1.25980125,5.06072893 C1.09347048,4.71783324 1.09347048,4.71783324 0.731058722,4.74500611 C0.625580672,4.75276978 0.520102622,4.76312135 0.414624572,4.76829713 C0.200963906,4.7786487 0.114417814,4.71006957 0.0954858564,4.50821399 C0.0670879199,4.1989609 0.0440991141,3.88970781 0.018405743,3.58045472 C-0.0289241513,3.0059427 -0.0289241513,3.0059427 0.578250777,2.96065459 C0.940662539,2.93348173 0.940662539,2.93348173 1.05019744,2.60611339 C1.052902,2.59576183 1.04884515,2.58411631 1.04749287,2.56858896 C0.887923514,2.43919436 0.724297308,2.30850582 0.566080233,2.17522938 C0.391635766,2.02901348 0.378112939,1.91255835 0.522807187,1.74693326 C0.791911443,1.44156201 1.06236798,1.1374847 1.33688137,0.835995287 C1.48157562,0.676839931 1.60328106,0.667782309 1.77096411,0.801058746 C1.94270401,0.93821702 2.10903478,1.08055108 2.27266099,1.21641541 C2.3267523,1.19053649 2.36461621,1.16724546 2.40518469,1.154306 C2.58098144,1.10384211 2.64994786,1.00550221 2.60937938,0.823055827 C2.57827688,0.678133877 2.57827688,0.526742197 2.57016318,0.377938409 C2.5606972,0.213607269 2.64048188,0.113973428 2.81357407,0.0997400219 C3.25441823,0.0648034803 3.69526238,0.0298669387 4.13745882,0.00140012706 C4.32542612,-0.0115393328 4.41197221,0.0648034803 4.43360873,0.247249864 C4.44577928,0.353353435 4.45254069,0.460750952 4.46065439,0.568148468 C4.48905232,0.907162316 4.48770004,0.907162316 4.82036158,1.00938405 C4.83117984,1.01326589 4.84335039,1.01197194 4.8582255,1.01455983 C4.9988629,0.857992369 5.1395003,0.698837013 5.28419455,0.542269549 C5.43565021,0.377938409 5.55600337,0.368880787 5.7331524,0.511214845 C6.04823427,0.764828258 6.36061157,1.02102956 6.67163659,1.27852481 C6.85284247,1.42862255 6.86095616,1.54119585 6.70003452,1.71976039 C6.55939712,1.87632786 6.41199831,2.02771954 6.27677004,2.17264149 C6.45932821,2.51812507 6.45932821,2.51812507 6.82850138,2.48965826 C6.90963834,2.48318853 6.9907753,2.48318853 7.07055998,2.47024907 C7.2179588,2.44566409 7.33966424,2.48060063 7.43973316,2.58799815 C7.48030164,3.0874613 7.52087012,3.58692445 7.56279088,4.0863876 C7.45460827,4.14202728 7.3504825,4.21190036 7.23418619,4.25071874 C7.14899238,4.27918555 7.04892346,4.26883398 6.95561595,4.27530371 C6.60267017,4.30118263 6.60267017,4.30118263 6.49583984,4.62078729 C6.49178299,4.63113886 6.49313527,4.64278437 6.49178299,4.66478146 C6.65405691,4.79547 6.82173997,4.92745249 6.98536617,5.06590471 C7.15845836,5.21082666 7.16657205,5.32469391 7.01646867,5.49549478 C6.75142127,5.79698419 6.48502158,6.09588571 6.21456504,6.39219935 C6.05770025,6.56429416 5.93869937,6.57205784 5.75208436,6.41937221 C5.58845815,6.28480183 5.43024108,6.14376172 5.27878542,6.01436712 C4.91772594,6.19034377 4.91772594,6.19034377 4.94747616,6.54229708 C4.95423757,6.62510962 4.97993094,6.711804 4.96370355,6.79073471 C4.94206702,6.90977774 4.88797572,7.01976315 4.84740724,7.1310425 Z M5.8656761,3.46529353 C5.77507316,2.35379393 4.76627027,1.52955033 3.60465944,1.61883261 C2.45386687,1.70682093 1.5924628,2.6682228 1.67765661,3.76937083 C1.7642027,4.88216438 2.77030102,5.71028981 3.93055957,5.62488938 C5.09352269,5.54078289 5.95627904,4.57808707 5.8656761,3.46529353 Z" id="形状" fill="url(#linearGradient-21)"></path>
-                        <path d="M4.93260105,3.53904845 C4.97993094,4.14590912 4.49310917,4.68677854 3.85753631,4.73206665 C3.22331572,4.77735476 2.65806156,4.3115342 2.61073166,3.70337959 C2.56340177,3.09651892 3.05022354,2.5556495 3.6857964,2.51036139 C4.32136927,2.46507328 4.88527115,2.93089384 4.93260105,3.53904845 Z" id="路径" fill="url(#linearGradient-22)"></path>
-                    </g>
-                    <g transform="translate(22.1894, 12.3254)">
-                        <path d="M2.54358672,3.73758693 C2.26907333,3.75829007 1.99591223,3.7789932 1.72139884,3.79969634 C1.69029634,3.74535061 1.65243242,3.69229882 1.63214818,3.6353652 C1.61592079,3.59266498 1.62268221,3.54220109 1.61862536,3.49561903 C1.60375025,3.31834843 1.60375025,3.31834843 1.42930578,3.26529665 C1.42389665,3.2640027 1.41713524,3.2640027 1.40496469,3.2640027 C1.33329371,3.3455213 1.26162273,3.42962779 1.1858949,3.51244033 C1.10881478,3.59654682 1.0452575,3.60301655 0.957359121,3.53314347 C0.786971502,3.39598519 0.617936165,3.25882692 0.450253112,3.1177868 C0.367763867,3.04920767 0.362354737,2.98709826 0.432673437,2.90557966 C0.507048985,2.81888528 0.586833664,2.73607274 0.661209212,2.6532602 C0.574663119,2.4734017 0.574663119,2.4734017 0.38399126,2.48763511 C0.328547669,2.49151695 0.273104079,2.49669273 0.217660489,2.49928062 C0.105421025,2.50445641 0.0594434136,2.46951987 0.0499774348,2.3634163 C0.0351023251,2.20167305 0.0229317809,2.03863585 0.00940895399,1.8768926 C-0.0149321345,1.57540319 -0.0149321345,1.57540319 0.302854298,1.55211216 C0.492173875,1.53787876 0.493526158,1.53787876 0.550322031,1.36578394 C0.551674314,1.36060816 0.550322031,1.35413843 0.548969748,1.34637475 C0.465128221,1.27779561 0.379934412,1.21051042 0.296092885,1.14063734 C0.204137662,1.06429453 0.197376248,1.00218512 0.273104079,0.915490738 C0.413741479,0.755041436 0.557083444,0.59588608 0.70042541,0.43802467 C0.77615324,0.355212127 0.84106281,0.350036343 0.928961185,0.419909426 C1.01956412,0.491076455 1.10611022,0.566125322 1.19265631,0.638586298 C1.22105425,0.625646838 1.24133849,0.612707378 1.26162273,0.606237648 C1.35357795,0.579064782 1.39008958,0.527306943 1.36845306,0.432848886 C1.35222567,0.356506073 1.35222567,0.277575368 1.34816882,0.198644663 C1.34275969,0.113244228 1.38468045,0.0601924424 1.47663567,0.0524287665 C1.70787602,0.0343135227 1.93911636,0.0161982789 2.17170898,0.000670927133 C2.27042562,-0.00579880279 2.31505094,0.0343135227 2.32722149,0.130065526 C2.3339829,0.185705203 2.33668747,0.242638826 2.3420966,0.298278504 C2.35697171,0.475549103 2.35697171,0.475549103 2.53141617,0.529894835 C2.53682531,0.531188781 2.54358672,0.531188781 2.55170042,0.532482727 C2.62607596,0.449670184 2.69909923,0.366857641 2.77482706,0.285339044 C2.85461174,0.198644663 2.91681674,0.194762825 3.01012425,0.269811692 C3.17510274,0.403088128 3.33872894,0.537658511 3.50235515,0.672228893 C3.59701494,0.751159598 3.60107178,0.809387168 3.51723026,0.903845224 C3.44285471,0.986657767 3.3657746,1.06558847 3.2954559,1.14193129 C3.39146797,1.32308372 3.39146797,1.32308372 3.58484439,1.30885032 C3.62676516,1.30626243 3.6700382,1.30626243 3.71195896,1.29849875 C3.78903908,1.28555929 3.85394865,1.30367453 3.90533539,1.36060816 C3.92697191,1.62327919 3.94860844,1.88465628 3.97024496,2.14732732 C3.91344909,2.17708807 3.8580055,2.21331856 3.79850506,2.23272775 C3.75387973,2.2482551 3.7011407,2.24178537 3.65245853,2.24566721 C3.4671958,2.25990062 3.4671958,2.25990062 3.41175221,2.42681965 C3.41039992,2.43199543 3.41039992,2.43846516 3.40904764,2.45011068 C3.49424145,2.51868981 3.58213983,2.5885629 3.66868592,2.65972993 C3.75928886,2.73607274 3.76334571,2.79559425 3.68491331,2.88487653 C3.54562819,3.04273794 3.40634308,3.1993054 3.26435339,3.35587287 C3.18186415,3.44644908 3.11965915,3.45033092 3.02229479,3.37010627 C2.9357487,3.30023319 2.85325946,3.22518432 2.77347478,3.15789913 C2.5841552,3.24976929 2.5841552,3.24976929 2.59903031,3.43480357 C2.60308716,3.47879773 2.61660998,3.52408584 2.60714401,3.56549211 C2.5922689,3.62113179 2.56387096,3.67806542 2.54358672,3.73758693 Z M3.07773838,1.81348925 C3.03040849,1.22991961 2.50031367,0.797741654 1.89178646,0.844323709 C1.28866838,0.890905765 0.835653679,1.3955447 0.880279008,1.97264461 C0.926256619,2.55621425 1.45364687,2.9909801 2.06217408,2.94698593 C2.67205357,2.90169782 3.12506828,2.39705889 3.07773838,1.81348925 Z" id="形状" fill="url(#linearGradient-23)"></path>
-                        <path d="M2.58821205,1.85230763 C2.61255314,2.17061834 2.35832399,2.45399251 2.02431017,2.47857749 C1.69164862,2.50186852 1.39549871,2.25860667 1.36980534,1.93900201 C1.34546425,1.6206913 1.5996934,1.33731713 1.93370722,1.31273216 C2.26636877,1.28944113 2.56251868,1.53270297 2.58821205,1.85230763 Z" id="路径" fill="url(#linearGradient-24)"></path>
-                    </g>
-                    <g transform="translate(19.4618, 0.3319)">
-                        <path d="M2.54358672,3.73758693 C2.26907333,3.75829007 1.99591223,3.7789932 1.72139884,3.79969634 C1.69029634,3.74535061 1.65243242,3.69229882 1.63214818,3.6353652 C1.61592079,3.59266498 1.62268221,3.54220109 1.61862536,3.49561903 C1.60375025,3.31834843 1.60375025,3.31834843 1.42930578,3.26529665 C1.42389665,3.2640027 1.41713524,3.2640027 1.40496469,3.2640027 C1.33329371,3.3455213 1.26162273,3.42962779 1.1858949,3.51244033 C1.10881478,3.59654682 1.0452575,3.60301655 0.957359121,3.53314347 C0.786971502,3.39598519 0.617936165,3.25882692 0.450253112,3.1177868 C0.367763867,3.04920767 0.362354737,2.98709826 0.432673437,2.90557966 C0.507048985,2.81888528 0.586833664,2.73607274 0.661209212,2.6532602 C0.574663119,2.4734017 0.574663119,2.4734017 0.38399126,2.48763511 C0.328547669,2.49151695 0.273104079,2.49669273 0.217660489,2.49928062 C0.105421025,2.50445641 0.0594434136,2.46951987 0.0499774348,2.3634163 C0.0351023251,2.20167305 0.0229317809,2.03863585 0.00940895399,1.8768926 C-0.0149321345,1.57540319 -0.0149321345,1.57540319 0.302854298,1.55211216 C0.492173875,1.53787876 0.493526158,1.53787876 0.550322031,1.36578394 C0.551674314,1.36060816 0.550322031,1.35413843 0.548969748,1.34637475 C0.465128221,1.27779561 0.379934412,1.21051042 0.296092885,1.14063734 C0.204137662,1.06429453 0.197376248,1.00218512 0.273104079,0.915490738 C0.413741479,0.755041436 0.557083444,0.59588608 0.70042541,0.43802467 C0.77615324,0.355212127 0.84106281,0.350036343 0.928961185,0.419909426 C1.01956412,0.491076455 1.10611022,0.566125322 1.19265631,0.638586298 C1.22105425,0.625646838 1.24133849,0.612707378 1.26162273,0.606237648 C1.35357795,0.579064782 1.39008958,0.527306943 1.36845306,0.432848886 C1.35222567,0.356506073 1.35222567,0.277575368 1.34816882,0.198644663 C1.34275969,0.113244228 1.38468045,0.0601924424 1.47663567,0.0524287665 C1.70787602,0.0343135227 1.93911636,0.0161982789 2.17170898,0.000670927133 C2.27042562,-0.00579880279 2.31505094,0.0343135227 2.32722149,0.130065526 C2.3339829,0.185705203 2.33668747,0.242638826 2.3420966,0.298278504 C2.35697171,0.475549103 2.35697171,0.475549103 2.53141617,0.529894835 C2.53682531,0.531188781 2.54358672,0.531188781 2.55170042,0.532482727 C2.62607596,0.449670184 2.69909923,0.366857641 2.77482706,0.285339044 C2.85461174,0.198644663 2.91681674,0.194762825 3.01012425,0.269811692 C3.17510274,0.403088128 3.33872894,0.537658511 3.50235515,0.672228893 C3.59701494,0.751159598 3.60107178,0.809387168 3.51723026,0.903845224 C3.44285471,0.986657767 3.3657746,1.06558847 3.2954559,1.14193129 C3.39146797,1.32308372 3.39146797,1.32308372 3.58484439,1.30885032 C3.62676516,1.30626243 3.6700382,1.30626243 3.71195896,1.29849875 C3.78903908,1.28555929 3.85394865,1.30367453 3.90533539,1.36060816 C3.92697191,1.62327919 3.94860844,1.88465628 3.97024496,2.14732732 C3.91344909,2.17708807 3.8580055,2.21331856 3.79850506,2.23272775 C3.75387973,2.2482551 3.7011407,2.24178537 3.65245853,2.24566721 C3.4671958,2.25990062 3.4671958,2.25990062 3.41175221,2.42681965 C3.41039992,2.43199543 3.41039992,2.43846516 3.40904764,2.45011068 C3.49424145,2.51868981 3.58213983,2.5885629 3.66868592,2.65972993 C3.75928886,2.73607274 3.76334571,2.79559425 3.68491331,2.88487653 C3.54562819,3.04273794 3.40634308,3.1993054 3.26435339,3.35587287 C3.18186415,3.44644908 3.11965915,3.45033092 3.02229479,3.37010627 C2.9357487,3.30023319 2.85325946,3.22518432 2.77347478,3.15789913 C2.5841552,3.24976929 2.5841552,3.24976929 2.59903031,3.43480357 C2.60308716,3.47879773 2.61660998,3.52408584 2.60714401,3.56549211 C2.59362118,3.62113179 2.56522324,3.67935936 2.54358672,3.73758693 Z M3.07909067,1.8147832 C3.03176077,1.23121356 2.50166596,0.7990356 1.89313874,0.845617655 C1.29002066,0.892199711 0.837005962,1.39683864 0.88163129,1.97393855 C0.927608902,2.55750819 1.45499915,2.99227404 2.06352636,2.94827988 C2.67340586,2.90299177 3.12642056,2.39835284 3.07909067,1.8147832 Z" id="形状" fill="url(#linearGradient-25)"></path>
-                        <path d="M2.58956433,1.85360158 C2.61390542,2.17191229 2.35967627,2.45528646 2.02566245,2.47987143 C1.69300091,2.50316246 1.396851,2.25990062 1.37115762,1.94029596 C1.34681654,1.62198525 1.60104568,1.33861108 1.93505951,1.3140261 C2.26772105,1.28944113 2.56387096,1.53399692 2.58956433,1.85360158 Z" id="路径" fill="url(#linearGradient-26)"></path>
-                    </g>
-                </g>
-            </g>
-            <g id="编组" transform="translate(17.46, 47)">
-                <path d="M5.93679954,2.56343801 C5.93679954,2.56343801 4.41642647,2.90871578 4.12339,4.14750804 C3.5097217,4.28858927 1.4440117,5.33556055 3.00380672,7.6485503 C3.79093158,8.55567789 3.91051149,8.70913468 3.91051149,8.70913468 L8.41643998,7.45672932 L8.41643998,2.10430522 L5.93679954,2.56343801 Z" id="路径" fill="url(#linearGradient-27)"></path>
-                <path d="M7.44008977,5.4791169 C7.44008977,5.4791169 4.91577113,5.14992735 4.09579464,6.24268815 C3.27581815,7.33544896 2.97621136,10.131085 2.97621136,10.131085 L4.87634918,10.0370309 L4.71603326,13.2942749 L8.22195838,15.2298104 L13.2154049,12.7002486 L12.4558754,9.74868063 L14.0511502,9.35637579 C14.0511502,9.35637579 13.5754587,5.07319896 11.3560031,5.70558941 C10.2167089,5.820682 9.8566551,5.80088112 9.8566551,5.80088112 C9.8566551,5.80088112 9.5570483,6.70182095 8.52682143,6.62509256 C7.49659456,6.54836416 7.44008977,5.4791169 7.44008977,5.4791169 Z" id="路径" fill="url(#linearGradient-28)"></path>
-                <path d="M7.69239023,4.13265738 L7.16807834,6.33550475 C7.14311111,6.43945935 7.20092996,6.5446515 7.30474109,6.58425325 C7.57543846,6.68820785 8.11814725,6.86517817 8.67662483,6.86517817 C9.25481338,6.86517817 9.80146437,6.56692748 10.0524508,6.40728293 C10.139179,6.35283052 10.1746588,6.25011348 10.1418072,6.15729688 L9.3402276,3.90989753 C9.30343378,3.80718049 9.19305233,3.74654031 9.08004275,3.76510363 L7.87767338,3.96558749 C7.78568884,3.98167571 7.71341527,4.0472661 7.69239023,4.13265738 Z" id="路径" fill="url(#linearGradient-29)"></path>
-                <path d="M4.55834548,5.8615213 C5.29290775,5.63133613 6.28896893,5.78603047 6.32970494,7.33792407 C6.37044096,8.88981767 4.75545521,11.3636895 5.33364376,12.22379 C5.9197167,13.0962661 7.1733346,14.3338208 7.96965792,15.039227 C7.78437477,15.8683886 7.28371605,16.5651319 7.28371605,16.5651319 C7.28371605,16.5651319 4.34546697,15.2879755 3.06556777,14.0095815 C1.78566857,12.7311875 2.43218849,9.79818282 3.02483176,7.71166559 C3.47161382,6.13873356 4.55834548,5.8615213 4.55834548,5.8615213 Z" id="路径" fill="url(#linearGradient-30)"></path>
-                <path d="M12.2587657,5.8615213 C11.5242034,5.63133613 10.5281423,5.78603047 10.4874062,7.33792407 C10.4466702,8.88981767 12.061656,11.3636895 11.4834674,12.22379 C10.8973945,13.0962661 9.64377659,14.3338208 8.84745326,15.039227 C9.03273641,15.8683886 9.53339513,16.5651319 9.53339513,16.5651319 C9.53339513,16.5651319 12.4716442,15.2879755 13.7515434,14.0095815 C15.0314426,12.7311875 14.3849227,9.79818282 13.7922794,7.71166559 C13.3441833,6.13873356 12.2587657,5.8615213 12.2587657,5.8615213 Z" id="路径" fill="url(#linearGradient-31)"></path>
-                <path d="M9.04324893,3.76510363 C9.04324893,3.76510363 9.57675928,5.28482081 9.44272466,6.12883312 C9.3100041,6.97160787 9.49660132,8.18564904 10.6293252,8.55567789 C11.7620492,8.92570675 12.8422105,8.30074163 13.2285456,7.24015724 C13.6148807,6.17957286 13.2416862,5.4135265 12.2955595,4.72297097 C12.4558754,4.0720172 11.676635,2.8889149 10.2902965,2.46690875 C8.93155342,2.28746331 9.04324893,3.76510363 9.04324893,3.76510363 Z" id="路径" fill="url(#linearGradient-32)"></path>
-                <path d="M6.98936552,1.8097672 C6.98936552,1.8097672 6.12339676,2.38523014 6.14179366,3.20077869 C6.16019057,4.01632724 6.8553309,3.86410801 6.8553309,3.86410801 C6.8553309,3.86410801 7.06558128,5.0719614 8.43220876,5.11403826 C9.79883624,5.15611512 9.99068971,3.86534556 9.99068971,3.86534556 C9.99068971,3.86534556 10.6766316,3.94702417 10.6924004,3.20449135 C10.7081691,2.46195853 10.1089556,1.46572699 9.51368416,1.18232696 C8.91841277,0.90016449 7.45454449,1.24296714 6.98936552,1.8097672 Z" id="路径" fill="url(#linearGradient-33)"></path>
-                <path d="M7.86978899,1.55483093 C7.86978899,1.55483093 7.59646349,2.2961262 6.90920756,2.42359433 C6.22195162,2.55106247 6.16150464,2.88148957 6.16150464,3.19087825 C6.16150464,3.41858831 6.24297666,3.63516039 6.30079552,3.73911498 C5.93022922,3.547294 5.42431424,3.08939876 5.74626013,1.82709296 C6.05769351,0.60810158 7.01564681,0.0153128763 8.30605853,0.0338761968 C9.38621987,-0.234673174 10.9854368,1.12787456 10.846146,2.90005289 C10.6161846,2.6129402 10.4033061,2.54611225 10.2429902,2.49413495 C10.0826743,2.44215765 9.75021584,2.13029387 9.70947983,1.81719253 C9.42958401,1.87412004 8.4492916,2.00158818 7.86978899,1.55483093 Z" id="路径" fill="url(#linearGradient-34)"></path>
-                <path d="M4.91445706,17.9190168 L12.0485153,17.9190168 C12.3717753,17.9190168 12.6608696,17.6888316 12.7725651,17.3410787 L14.2101521,12.8858818 C14.3967493,12.3079438 14.0235548,11.6928791 13.4861023,11.6928791 L3.54125926,11.6928791 C3.00906298,11.6928791 2.63586855,12.2968058 2.81326731,12.8735063 L4.18646512,17.3287032 C4.2955325,17.6826438 4.58725491,17.9190168 4.91445706,17.9190168 Z" id="路径" fill="url(#linearGradient-35)"></path>
-                <g transform="translate(0, 14.9042)" id="路径">
-                    <path d="M4.63061905,5.06298283 C4.63061905,5.06298283 4.5202376,4.83403521 4.43613744,4.80928412 C4.35203729,4.78453303 3.13127101,4.7387435 2.68580302,4.62983869 C2.24033502,4.52093387 0.957807691,4.34891377 0.407214504,4.83898543 C-0.0711051142,5.26594181 -0.230106965,6.2634109 0.499199046,6.83763628 C0.772524542,7.06163368 1.04190784,7.12722408 2.05505187,7.08267211 C3.0681959,7.03812014 4.53732044,7.04802058 4.85926634,6.60621355 C4.84875382,5.87605628 4.63061905,5.06298283 4.63061905,5.06298283 Z" fill="#FFFFFF"></path>
-                    <path d="M5.76202891,4.81052167 C5.76202891,4.81052167 4.58462678,5.05927017 4.16281195,5.02338108 C3.74231118,4.98625444 4.09448057,6.58517512 4.09448057,6.58517512 C4.09448057,6.58517512 5.21932012,6.65819085 6.21406723,6.38716637 C6.55046784,5.16198721 5.76202891,4.81052167 5.76202891,4.81052167 Z" fill="url(#linearGradient-36)"></path>
-                    <path d="M5.34021408,4.7523566 L5.95256832,6.54557337 C5.95256832,6.54557337 19.1103,4.91323871 17.2298732,0.892423479 C15.6582516,-2.47001265 5.34021408,4.7523566 5.34021408,4.7523566 Z" fill="url(#linearGradient-37)"></path>
-                    <path d="M4.47687345,4.89096273 C4.47687345,4.89096273 4.95913527,5.06917061 5.01958225,5.70156106 C5.0813433,6.33518907 4.88160544,6.75967033 3.85663483,6.87723803 C2.83166422,6.99480573 2.57147937,6.95025376 1.92890164,6.96510442 C1.28632391,6.97995507 0.353337844,7.03812014 0.215361031,5.88719427 C0.0773842178,4.73626839 1.32705992,4.44296793 2.6227279,4.73626839 C3.03140208,4.81052167 4.47687345,4.89096273 4.47687345,4.89096273 Z" fill="url(#linearGradient-38)"></path>
-                </g>
-                <g transform="translate(0.0577, 14.9042)" id="路径">
-                    <path d="M12.7831851,5.06298283 C12.7831851,5.06298283 12.8935665,4.83403521 12.9776667,4.80928412 C13.0630809,4.78453303 14.2825331,4.7387435 14.7280011,4.62983869 C15.1734691,4.52093387 16.3692681,4.34025089 16.973738,4.82537233 C17.5335296,5.27584224 17.5703235,6.27207378 16.933002,6.82154807 C16.6596765,7.04554547 16.3718963,7.12722408 15.3587523,7.08267211 C14.3456082,7.03812014 12.8764837,7.04802058 12.5545378,6.60621355 C12.5650503,5.87605628 12.7831851,5.06298283 12.7831851,5.06298283 Z" fill="#FFFFFF"></path>
-                    <path d="M11.6517752,4.81052167 C11.6517752,4.81052167 12.8291773,5.05927017 13.2509922,5.02338108 C13.6714929,4.98625444 13.3193235,6.58517512 13.3193235,6.58517512 C13.3193235,6.58517512 12.194484,6.65819085 11.1997369,6.38716637 C10.8633363,5.16198721 11.6517752,4.81052167 11.6517752,4.81052167 Z" fill="url(#linearGradient-39)"></path>
-                    <path d="M12.07359,4.7523566 L11.4612358,6.54557337 C11.4612358,6.54557337 -1.6964959,4.91323871 0.183930952,0.892423479 C1.75555256,-2.47001265 12.07359,4.7523566 12.07359,4.7523566 Z" fill="url(#linearGradient-40)"></path>
-                    <path d="M12.9369307,4.89096273 C12.9369307,4.89096273 12.4546689,5.06917061 12.3942219,5.70156106 C12.3324608,6.33518907 12.5321987,6.75967033 13.5571693,6.87723803 C14.5821399,6.99480573 14.8423248,6.95025376 15.4849025,6.96510442 C16.1274802,6.97995507 17.0604663,7.03812014 17.1984431,5.88719427 C17.3364199,4.73626839 16.0867442,4.44296793 14.7910762,4.73626839 C14.382402,4.81052167 12.9369307,4.89096273 12.9369307,4.89096273 Z" fill="url(#linearGradient-41)"></path>
-                </g>
-            </g>
-        </g>
-        <text id="P2P-File-Distributio" font-family="mabry-bold, Mabry Pro" font-size="15" font-weight="bold" letter-spacing="0.3">
-            <tspan x="53" y="337" fill="#2E8F79">P2P File Distribution</tspan>
-            <tspan x="53" y="355" font-family="Times-Roman, Times" font-size="21" font-weight="normal" letter-spacing="1.1" fill="#1B1B1B"></tspan>
-        </text>
-        <text id="Ecosystem" font-family="mabry-bold, Mabry Pro" font-size="15" font-weight="bold" letter-spacing="0.285714">
-            <tspan x="294" y="549" fill="#2E8F79">Ecosystem</tspan>
-            <tspan x="371.512832" y="549" font-family="ComicSansMS, Comic Sans MS" font-weight="normal" letter-spacing="0.785714286" fill="#1B1B1B"></tspan>
-        </text>
-        <text id="Peer-Level-Control" font-family="mabry-bold, Mabry Pro" font-size="15" font-weight="bold" letter-spacing="0.285714">
-            <tspan x="462" y="549" fill="#2E8F79">Peer Level Control</tspan>
-            <tspan x="462" y="567" font-family="ComicSansMS, Comic Sans MS" font-weight="normal" letter-spacing="0.785714286" fill="#1B1B1B"></tspan>
-        </text>
-        <text id="Consistency" font-family="mabry-bold, Mabry Pro" font-size="15" font-weight="bold" letter-spacing="0.285714">
-            <tspan x="85" y="549" fill="#2E8F79">Consistency</tspan>
-            <tspan x="85" y="567" font-family="Times-Roman, Times" font-weight="normal" letter-spacing="0.785714286" fill="#239B56"></tspan>
-            <tspan x="85" y="585" font-family="Times-Roman, Times" font-size="21" font-weight="normal" letter-spacing="1.1" fill="#1B1B1B"></tspan>
-        </text>
-        <text id="Isolate-Abnormal-Pee" font-family="mabry-bold, Mabry Pro" font-size="15" font-weight="bold" letter-spacing="0.285714" fill="#2E8F79">
-            <tspan x="436" y="337">Isolate Abnormal Peers</tspan>
-            <tspan x="603.110903" y="337" letter-spacing="-0.014286"></tspan>
-        </text>
-        <text id="Noninvasive" font-family="mabry-bold, Mabry Pro" font-size="15" font-weight="bold" letter-spacing="0.3">
-            <tspan x="287" y="337" fill="#2E8F79">Noninvasive</tspan>
-            <tspan x="374.059766" y="337" letter-spacing="1.285714" fill="#239B56"></tspan>
-            <tspan x="287" y="355" font-family="Times-Roman, Times" font-weight="normal" letter-spacing="0.785714286" fill="#239B56"></tspan>
-            <tspan x="287" y="373" font-family="Times-Roman, Times" font-size="21" font-weight="normal" letter-spacing="1.1" fill="#1B1B1B"></tspan>
-        </text>
-        <text id="Use-P2P-technology-f" font-family="mabry-light, Mabry Pro" font-size="12" font-weight="300" letter-spacing="0.4" fill="#5A5A5A" fill-opacity="0.85">
-            <tspan x="57.6427734" y="366">Use P2P technology for file </tspan>
-            <tspan x="57.8917969" y="380">transfer, improve download </tspan>
-            <tspan x="50.3814453" y="394">efficiency, and save bandwidth </tspan>
-            <tspan x="101.421094" y="408">across IDC.</tspan>
-        </text>
-        <text id="Support-for-host-lev" font-family="mabry-light, Mabry Pro" font-size="12" font-weight="300" letter-spacing="0.428571" fill="#5A5A5A" fill-opacity="0.85">
-            <tspan x="454.987869" y="582">Support for host-level limits </tspan>
-            <tspan x="516.145928" y="596">speed.</tspan>
-        </text>
-        <text id="Automatically-isolat" font-family="mabry-light, Mabry Pro" font-size="12" font-weight="300" letter-spacing="0.4" fill="#5A5A5A" fill-opacity="0.85">
-            <tspan x="444.350586" y="367">Automatically isolate abnormal </tspan>
-            <tspan x="454.083984" y="381">peers to improve download </tspan>
-            <tspan x="506.838867" y="395">stability.</tspan>
-        </text>
-        <text id="Harbor-can-distribut" font-family="mabry-light, Mabry Pro" font-size="12" font-weight="300" letter-spacing="0.428571" fill="#5A5A5A" fill-opacity="0.85">
-            <tspan x="265.854777" y="582">Harbor can distribute and </tspan>
-            <tspan x="267.513816" y="596">warm up images based on </tspan>
-            <tspan x="311.292134" y="610">Dragonfly.</tspan>
-        </text>
-        <text id="It-can-ensure-that-t" font-family="mabry-light, Mabry Pro" font-size="12" font-weight="300" letter-spacing="0.428571" fill="#5A5A5A" fill-opacity="0.85">
-            <tspan x="61.7523774" y="581">It can ensure that the same </tspan>
-            <tspan x="59.3487788" y="595">file is consistent in the peer-</tspan>
-            <tspan x="79.2509811" y="609">to-peer transmission.</tspan>
-        </text>
-        <text id="Supports-multiple-co" font-family="mabry-light, Mabry Pro" font-size="12" font-weight="300" letter-spacing="0.428571" fill="#5A5A5A" fill-opacity="0.85">
-            <tspan x="250.351569" y="366">Supports multiple containers </tspan>
-            <tspan x="266.656953" y="380">for distributing images.</tspan>
-        </text>
-        <text id="Features" font-family="mabry-bold, Mabry Pro" font-size="24" font-weight="bold" fill="#000000">
-            <tspan x="40" y="62">Features</tspan>
-        </text>
-        <text id="Dragonfly-provides-a" font-family="mabry-light, Mabry Pro" font-size="14" font-weight="300" letter-spacing="0.175" fill="#5D5D5D">
-            <tspan x="41" y="95">Dragonfly provides a one-stop solution for large-scale file distribution. The basic capabilities </tspan>
-            <tspan x="41" y="112">provided by Dragonfly include:</tspan>
-        </text>
-        <g id="文件传输" transform="translate(99, 239)">
-            <ellipse id="椭圆形" fill="url(#linearGradient-42)" fill-rule="nonzero" cx="36" cy="33.5" rx="36" ry="33.5"></ellipse>
-            <path d="M72,33.5 C72,52.0013656 55.8820645,67 36,67 C16.1179355,67 0,52.0013656 0,33.5 C0,22.7576667 4.4523871,12.2984624 12.9019355,6.16760215 C19.004129,1.73983871 27.6619355,0 36,0 C55.8820645,0 72,14.9986344 72,33.5 Z" id="路径"></path>
-            <g id="Clipped">
-                <mask id="mask-44" fill="white">
-                    <use xlink:href="#path-43"></use>
-                </mask>
-                <g id="SVGID_2_"></g>
-                <g id="编组" mask="url(#mask-44)">
-                    <g transform="translate(-44.5587, 17.1181)">
-                        <g id="编组" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(81.1363, 0)">
-                            <polygon id="路径" fill="#EFAE47" fill-rule="nonzero" points="19.3045161 3.53226882 15.5163871 0 0 0 0 3.53226882 0 3.82692473 0 42.4700753 55.9316129 42.4700753 55.9316129 3.53226882"></polygon>
-                            <path d="M51.312,40.6192903 L4.76980645,40.6192903 C3.51174194,40.6192903 2.49212903,39.6704839 2.49212903,38.4997849 L2.49212903,8.75898925 C2.49212903,7.58829032 3.51174194,6.63948387 4.76980645,6.63948387 L51.312,6.63948387 C52.5700645,6.63948387 53.5896774,7.58829032 53.5896774,8.75898925 L53.5896774,38.4997849 C53.5896774,39.6704839 52.5700645,40.6192903 51.312,40.6192903 Z" id="路径" fill="#FFFFFF" fill-rule="nonzero"></path>
-                        </g>
-                        <g id="编组" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(73.9726, 10.5824)">
-                            <polygon id="路径" fill="#FACD79" fill-rule="nonzero" points="55.7489032 0 0 0 5.80954839 25.862 16.3997419 25.862"></polygon>
-                            <polygon id="路径" fill="#EBC172" fill-rule="nonzero" points="61.7419355 25.862 55.9316129 0 55.7489032 0 16.3997419 25.862"></polygon>
-                            <polygon id="路径" fill="#F6C575" fill-rule="nonzero" points="7.23174194 31.8876774 16.3997419 25.862 5.80954839 25.862 7.1636129 31.8876774"></polygon>
-                            <polygon id="路径" fill="#E8BA6F" fill-rule="nonzero" points="7.23174194 31.8876774 63.0952258 31.8876774 61.7419355 25.862 16.3997419 25.862"></polygon>
-                        </g>
-                        <g id="编组" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(7.1636, 0)">
-                            <polygon id="路径" fill="#EFAE47" fill-rule="nonzero" points="19.3045161 3.53226882 15.5156129 0 0 0 0 3.53226882 0 3.82692473 0 42.4700753 55.9316129 42.4700753 55.9316129 3.53226882"></polygon>
-                            <path d="M51.312,40.6192903 L4.76980645,40.6192903 C3.51174194,40.6192903 2.49212903,39.6704839 2.49212903,38.4997849 L2.49212903,8.75898925 C2.49212903,7.58829032 3.51174194,6.63948387 4.76980645,6.63948387 L51.312,6.63948387 C52.5700645,6.63948387 53.5896774,7.58829032 53.5896774,8.75898925 L53.5896774,38.4997849 C53.5896774,39.6704839 52.5700645,40.6192903 51.312,40.6192903 Z" id="路径" fill="#FFFFFF" fill-rule="nonzero"></path>
-                        </g>
-                        <ellipse id="椭圆形" fill="#2E8F79" fill-rule="nonzero" cx="60.2043871" cy="23.4420753" rx="2.29393548" ry="2.13463441"></ellipse>
-                        <g id="编组" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(0, 10.5824)">
-                            <polygon id="路径" fill="#FACD79" fill-rule="nonzero" points="55.748129 0 0 0 5.80954839 25.862 16.3989677 25.862"></polygon>
-                            <polygon id="路径" fill="#EBC172" fill-rule="nonzero" points="61.7411613 25.862 55.9316129 0 55.748129 0 16.3989677 25.862"></polygon>
-                            <polygon id="路径" fill="#F6C575" fill-rule="nonzero" points="7.23096774 31.8876774 16.3989677 25.862 5.80954839 25.862 7.1636129 31.8876774"></polygon>
-                            <polygon id="路径" fill="#E8BA6F" fill-rule="nonzero" points="7.23096774 31.8876774 63.0952258 31.8876774 61.7411613 25.862 16.3989677 25.862"></polygon>
-                        </g>
-                    </g>
-                </g>
-            </g>
-            <g id="编组" transform="translate(26, 31)" fill="#2E8F79" fill-rule="nonzero">
-                <path d="M23.6572536,11.1520013 L24.3286268,10.5217775 C24.3555433,10.4965108 24.3816907,10.4712441 24.407069,10.4445336 C24.4193737,10.4322612 24.4301403,10.4192669 24.4416759,10.4069945 C24.4547496,10.3932783 24.4678233,10.379562 24.480128,10.3651239 C24.4947398,10.3485201 24.5078135,10.3319163 24.5216562,10.3153124 C24.5308847,10.3044838 24.5401132,10.2936552 24.5485727,10.2828267 C24.5631844,10.2640571 24.5770272,10.2452876 24.5908699,10.226518 C24.5977913,10.2164113 24.6054817,10.2070266 24.6124031,10.1969199 C24.6262458,10.1774284 24.6393196,10.157937 24.6523933,10.1384455 C24.6593146,10.1283388 24.666236,10.1182321 24.6723883,10.1081255 C24.684693,10.088634 24.6962286,10.0691425 24.7085333,10.0496511 C24.7154547,10.0388225 24.721607,10.027272 24.7285284,10.0164434 C24.7316045,10.0113901 24.7346807,10.0063367 24.7377569,10.0005615 C24.7454473,9.98756718 24.7515996,9.97385097 24.75929,9.96013476 C24.7662114,9.94714045 24.7731328,9.93414615 24.7800541,9.92115184 C24.7885136,9.9038261 24.7969731,9.88650036 24.8046635,9.86917462 C24.8115848,9.8540146 24.8192753,9.83885458 24.8261966,9.82297265 C24.8285038,9.81864121 24.8308109,9.81358787 24.832349,9.80925644 C24.8369632,9.79842785 24.8408084,9.78759926 24.8454227,9.77677067 C24.8531131,9.75872303 24.8600345,9.74139729 24.8669558,9.72334964 C24.8723391,9.70963343 24.8769534,9.69591722 24.8815676,9.68220101 C24.888489,9.66198765 24.8954104,9.64249619 24.9023317,9.62228283 C24.9061769,9.61001043 24.9100221,9.59773803 24.9130983,9.58546563 C24.9192506,9.56380845 24.926172,9.54215128 24.9315553,9.5197722 C24.9323244,9.51688458 24.9330934,9.51471886 24.9338624,9.51183123 C24.9361696,9.50316836 24.9377076,9.49450549 24.9400148,9.48584262 C24.9453981,9.46346354 24.9507813,9.44036256 24.9561646,9.41726157 C24.9569337,9.41509585 24.9569337,9.41293014 24.9577027,9.41076442 C24.9592408,9.40137964 24.9607789,9.39199487 24.963086,9.38261009 C24.9677003,9.36023101 24.9715455,9.33713002 24.9753907,9.31475094 C24.9776978,9.30103473 24.9792359,9.28804043 24.980774,9.27432422 C24.9838501,9.25338895 24.9869263,9.23245368 24.9892334,9.2107965 C24.9892334,9.20935269 24.9900025,9.20718697 24.9900025,9.20574316 C24.9915405,9.18913933 24.9923096,9.1732574 24.9938477,9.15665357 C24.9953858,9.14004973 24.9969238,9.12272399 24.9976929,9.10612016 C24.9976929,9.10539825 24.9976929,9.10395444 24.9976929,9.10323253 C24.999231,9.06858105 25,9.03465148 25,9 C25,8.96534852 24.999231,8.93141895 24.9976929,8.89676747 C24.9976929,8.89604556 24.9976929,8.89460175 24.9976929,8.89387984 C24.9969238,8.8765541 24.9953858,8.85995027 24.9938477,8.84334643 C24.9923096,8.8267426 24.9915405,8.81013877 24.9900025,8.79425684 C24.9900025,8.79281303 24.9892334,8.79064731 24.9892334,8.7892035 C24.9869263,8.76826823 24.9838501,8.74733296 24.980774,8.72567578 C24.9792359,8.71195957 24.9776978,8.69896527 24.9753907,8.68524906 C24.9715455,8.66214807 24.9677003,8.63976899 24.963086,8.61738991 C24.9615479,8.60800513 24.9600098,8.59862036 24.9577027,8.58923558 C24.9569337,8.58706986 24.9569337,8.58490415 24.9561646,8.58273843 C24.9515504,8.55963744 24.9461671,8.53725836 24.9400148,8.51415738 C24.9377076,8.50549451 24.9361696,8.49683164 24.9338624,8.48816877 C24.9330934,8.48528114 24.9323244,8.48311542 24.9315553,8.4802278 C24.925403,8.45857063 24.9192506,8.43619155 24.9130983,8.41453437 C24.9092531,8.40226197 24.9061769,8.38998957 24.9023317,8.37771717 C24.8961794,8.35750381 24.888489,8.33729045 24.8815676,8.31779899 C24.8769534,8.30408278 24.8723391,8.29036657 24.8669558,8.27665036 C24.8600345,8.25860271 24.8531131,8.24127697 24.8454227,8.22322933 C24.8408084,8.21240074 24.8369632,8.20157215 24.832349,8.19074356 C24.8300418,8.18641213 24.8277347,8.18135879 24.8261966,8.17702735 C24.8192753,8.16186733 24.8123539,8.14670731 24.8046635,8.13082538 C24.796204,8.11349964 24.7885136,8.0961739 24.7800541,8.07884816 C24.7731328,8.06585385 24.7662114,8.05285955 24.75929,8.03986524 C24.7523686,8.02614903 24.7454473,8.01315473 24.7377569,7.99943852 C24.7346807,7.99438518 24.7316045,7.98860993 24.7285284,7.98355659 C24.722376,7.9720061 24.7154547,7.96117751 24.7085333,7.95034892 C24.6969977,7.93085746 24.684693,7.91136601 24.6723883,7.89187455 C24.666236,7.88176787 24.6593146,7.87166119 24.6523933,7.8615545 C24.6393196,7.84206305 24.6262458,7.82257159 24.6124031,7.80308013 C24.6054817,7.79297345 24.5977913,7.78358867 24.5908699,7.77348199 C24.5770272,7.75471244 24.5631844,7.73594289 24.5485727,7.71717334 C24.5401132,7.70634475 24.5308847,7.69551616 24.5216562,7.68468758 C24.5078135,7.66808374 24.4947398,7.65147991 24.480128,7.63487607 C24.4678233,7.62043796 24.4547496,7.60672175 24.4416759,7.59300553 C24.4301403,7.58073314 24.4186047,7.56773883 24.407069,7.55546643 C24.3816907,7.52947782 24.3555433,7.50348921 24.3286268,7.47822251 L17.0334994,0.630223791 C16.1383352,-0.210074597 14.687923,-0.210074597 13.7927587,0.630223791 L13.7927587,0.630223791 C12.8975944,1.47052218 12.8975944,2.83203658 13.7927587,3.67233496 L17.1757721,6.84799872 L2.29174357,6.84799872 C1.02590132,6.84799872 0,7.8110211 0,8.99927809 C0,10.1875351 1.02590132,11.1505575 2.29174357,11.1505575 L9.42383413,11.1505575 L17.1757721,11.1505575 L23.6572536,11.1505575 L23.6572536,11.1520013 Z" id="路径"></path>
-                <path d="M13.7927587,14.327665 C12.8975944,15.1679634 12.8975944,16.5294778 13.7927587,17.3697762 L13.7927587,17.3697762 C14.687923,18.2100746 16.1383352,18.2100746 17.0334994,17.3697762 L23.6572536,11.1520013 L17.1757721,11.1520013 L13.7927587,14.327665 Z" id="路径"></path>
-            </g>
-            <ellipse id="椭圆形" fill="#2E8F79" fill-rule="nonzero" cx="22.5" cy="40" rx="2.5" ry="2"></ellipse>
-        </g>
-        <g id="安全" transform="translate(300, 239)" fill-rule="nonzero">
-            <g id="Layer_3_2_" transform="translate(1, 0)" fill="#BAB8D4" opacity="0.3">
-                <path d="M67,31.1500578 C67,19.5943864 58.1528854,10.2272534 47.2405261,10.2272534 C47.0708334,10.2272534 46.9030879,10.2355209 46.7345078,10.2405405 C43.2889096,4.11015293 36.9716085,0 29.7451992,0 C18.8320054,0 9.98544719,9.3683141 9.98544719,20.9239854 C9.98544719,21.0739824 9.99295819,21.2216172 9.99601822,21.3713189 C4.02728288,24.971246 -1.48246698e-15,31.7645138 -1.48246698e-15,39.5584504 C-1.48246698e-15,51.1138264 8.84683637,60.4797784 19.7600302,60.4797784 C20.3803826,60.4797784 20.9937803,60.4464129 21.5999452,60.3876543 C25.2246945,65.0366742 30.9756111,68 37.113761,68 C47.2013021,68 55.2480787,59.9955362 56.4503938,49.6605094 C62.7229071,46.1547734 67,39.1828674 67,31.1500578 Z" id="路径"></path>
-            </g>
-            <g id="Layer_4" transform="translate(1, 28)">
-                <g id="编组" transform="translate(35.6876, 0)">
-                    <path d="M7.97821989,28.5422525 L7.97821989,17.4924535 C7.97821989,11.61118 12.2370142,6.79976328 17.4417392,6.79976328 C22.6470258,6.79976328 26.9052585,11.6114739 26.9052585,17.4924535 L26.9052585,28.5422525" id="路径" fill="#E86D8F"></path>
-                    <path d="M28.7507922,30.5358896 C28.7507922,31.7703398 27.6796358,32.779062 26.3701015,32.779062 L8.51393847,32.779062 C7.20384261,32.779062 6.13324776,31.769752 6.13324776,30.5358896 C6.13324776,29.3026151 7.20384261,28.2927172 8.51393847,28.2927172 L26.3701015,28.2927172 C27.679355,28.2927172 28.7507922,29.3026151 28.7507922,30.5358896 Z" id="路径" fill="#FFFFFF"></path>
-                    <path d="M7.97821989,28.5422525 L7.97821989,17.4924535 C7.97821989,11.61118 12.2370142,6.79976328 17.4417392,6.79976328 C22.6470258,6.79976328 26.9052585,11.6114739 26.9052585,17.4924535 L26.9052585,28.5422525" id="路径" fill="#FFFFFF" opacity="0.65"></path>
-                    <path d="M27.4668084,28.5422525 L26.3437086,28.5422525 L26.3437086,17.4924535 C26.3437086,11.9206743 22.3502467,7.38759671 17.4417392,7.38759671 C12.5332317,7.38759671 8.53976976,11.9206743 8.53976976,17.4924535 L8.53976976,28.5422525 L7.41667001,28.5422525 L7.41667001,17.4924535 C7.41667001,11.272294 11.914123,6.21192984 17.4417392,6.21192984 C22.9693554,6.21192984 27.4668084,11.272294 27.4668084,17.4924535 L27.4668084,28.5422525 Z" id="路径" fill="#CCCCDE"></path>
-                    <g transform="translate(5.7118, 27.8518)">
-                        <path d="M23.0389876,2.68404747 C23.0389876,3.91849769 21.9678312,4.92721987 20.6582969,4.92721987 L2.80213389,4.92721987 C1.49203802,4.92721987 0.421443183,3.91790985 0.421443183,2.68404747 C0.421443183,1.45077292 1.49203802,0.440875077 2.80213389,0.440875077 L20.6582969,0.440875077 C21.9675504,0.440875077 23.0389876,1.45077292 23.0389876,2.68404747 Z" id="路径" fill="#F2F2FF"></path>
-                        <path d="M20.6580161,5.36809494 L2.80185311,5.36809494 C1.25674863,5.36809494 0,4.16391815 0,2.68404747 C0,1.20417679 1.2570294,0 2.80185311,0 L20.6580161,0 C22.2031206,0 23.4598692,1.20417679 23.4598692,2.68404747 C23.4598692,4.16391815 22.2031206,5.36809494 20.6580161,5.36809494 Z M2.80213389,0.881750155 C1.72143115,0.881750155 0.842605591,1.69031505 0.842605591,2.68404747 C0.842605591,3.6777799 1.72171192,4.48634479 2.80213389,4.48634479 L20.6582969,4.48634479 C21.7389996,4.48634479 22.6178252,3.6777799 22.6178252,2.68404747 C22.6178252,1.69031505 21.7387189,0.881750155 20.6582969,0.881750155 L2.80213389,0.881750155 Z" id="形状" fill="#CCCCDE"></path>
-                    </g>
-                    <rect id="矩形" fill="#CCCCDE" x="16.7347479" y="0" width="1" height="3.26512082"></rect>
-                    <polygon id="矩形" fill="#CCCCDE" transform="translate(9.8437, 2.6614) rotate(59.9993) translate(-9.8437, -2.6614)" points="7.21181572 2.18393405 12.4584641 2.28666493 12.4755356 3.13882777 7.22888727 3.03609689"></polygon>
-                    <polygon id="矩形" fill="#CCCCDE" transform="translate(5.0786, 8.4716) rotate(33.6678) translate(-5.0786, -8.4716)" points="3.10718595 7.99494721 7.03179822 8.07849924 7.04998939 8.94816859 3.12537712 8.86461655"></polygon>
-                    <rect id="矩形" fill="#CCCCDE" x="0" y="15.4770666" width="5.06882997" height="1"></rect>
-                    <rect id="矩形" fill="#CCCCDE" x="29.2432714" y="15.4770666" width="5.06911075" height="1"></rect>
-                    <polygon id="矩形" fill="#CCCCDE" transform="translate(29.0757, 8.7177) rotate(59.9943) translate(-29.0757, -8.7177)" points="28.605838 7.01507031 29.4777528 7.03214442 29.5456338 10.420241 28.6737189 10.4031669"></polygon>
-                    <polygon id="矩形" fill="#CCCCDE" transform="translate(24.4659, 2.6656) rotate(30.0057) translate(-24.4659, -2.6656)" points="23.9884246 0.0336157811 24.840633 0.0506898887 24.9433793 5.2975828 24.0911709 5.28050869"></polygon>
-                </g>
-                <g id="编组" transform="translate(0, 4.454)">
-                    <path d="M23.7698448,28.7562239 C23.7698448,30.597906 22.3305924,32.1054049 20.5712567,32.1054049 L3.61975051,32.1054049 C1.86069552,32.1054049 0.421162408,30.5984939 0.421162408,28.7562239 L0.421162408,17.0130753 C0.421162408,15.1713932 1.86041474,13.6647761 3.61975051,13.6647761 L20.5712567,13.6647761 C22.3303117,13.6647761 23.7698448,15.1713932 23.7698448,17.0130753 L23.7698448,28.7562239 L23.7698448,28.7562239 Z" id="路径" fill="#FFFFFF"></path>
-                    <g transform="translate(3.3401, 0)">
-                        <path d="M2.21727969,13.6647761 L2.21727969,10.0028677 C2.21727969,5.76693993 5.14997393,2.32106032 8.75540492,2.32106032 C12.3605551,2.32106032 15.2938109,5.76693993 15.2938109,10.0019859 L15.2938109,13.6638943 L17.0899282,13.6638943 L17.0899282,10.0019859 C17.0899282,4.72970783 13.3514099,0.440875077 8.75540492,0.440875077 C4.15996149,0.440875077 0.421162408,4.73029566 0.421162408,10.0028677 L0.421162408,13.6647761 L2.21727969,13.6647761 L2.21727969,13.6647761 Z" id="路径" fill="#FFFFFF"></path>
-                        <path d="M2.6384421,14.1056511 L0,14.1056511 L0,10.0028677 C0,4.48722654 3.92776062,0 8.75540492,0 C13.58333,0 17.5110906,4.48693262 17.5110906,10.0019859 L17.5110906,14.1047694 L14.8726485,14.1047694 L14.8726485,10.0019859 C14.8726485,6.00971514 12.128635,2.7619354 8.75540492,2.7619354 C5.38245558,2.7619354 2.6384421,6.01030297 2.6384421,10.0028677 L2.6384421,14.1056511 Z M0.842324816,13.223901 L1.79611728,13.223901 L1.79611728,10.0028677 C1.79611728,5.52416472 4.91805383,1.88018525 8.75540492,1.88018525 C12.592756,1.88018525 15.7149733,5.52357689 15.7149733,10.0019859 L15.7149733,13.2230192 L16.6687658,13.2230192 L16.6687658,10.0019859 C16.6687658,4.97307087 13.1186475,0.881750155 8.75540492,0.881750155 C4.39216237,0.881750155 0.842324816,4.97365871 0.842324816,10.0028677 L0.842324816,13.223901 Z" id="形状" fill="#CCCCDE"></path>
-                    </g>
-                    <path d="M20.5712567,32.5459861 L3.61975051,32.5459861 C1.62372147,32.5459861 0,30.8459718 0,28.75593 L0,17.0127814 C0,14.9236214 1.62372147,13.2236071 3.61975051,13.2236071 L20.5712567,13.2236071 C22.5672857,13.2236071 24.1910072,14.9233275 24.1910072,17.0127814 L24.1910072,28.75593 C24.1910072,30.8459718 22.5672857,32.5459861 20.5712567,32.5459861 Z M3.61975051,14.1056511 C2.08812322,14.1056511 0.842324816,15.4100535 0.842324816,17.0130753 L0.842324816,28.7562239 C0.842324816,30.3598335 2.088404,31.6645298 3.61975051,31.6645298 L20.5712567,31.6645298 C22.102884,31.6645298 23.3486824,30.3601274 23.3486824,28.7562239 L23.3486824,17.0130753 C23.3486824,15.4100535 22.1026032,14.1056511 20.5712567,14.1056511 L3.61975051,14.1056511 Z" id="形状" fill="#CCCCDE"></path>
-                </g>
-            </g>
-            <g id="Layer_2" transform="translate(1, 0)">
-                <path d="M14.3415329,38 C12.3292377,38 10.691929,36.5592731 10.691929,34.7885926 L10.691929,32.6293069 C10.691929,32.0479029 11.1357385,31.5765836 11.6832074,31.5765836 C12.2306763,31.5765836 12.6744858,32.0479029 12.6744858,32.6293069 L12.6744858,34.7885926 C12.6744858,35.3107433 13.3873566,35.8945535 14.3415329,35.8945535 C15.2450124,35.8945535 16.00858,34.8556661 16.00858,33.6260854 L16.00858,17.8499751 C16.00858,17.2685711 16.4523895,16.7972518 16.9998584,16.7972518 C17.5473273,16.7972518 17.9911368,17.2685711 17.9911368,17.8499751 L17.9911368,33.6260854 C17.9911368,36.0377239 16.3538281,38 14.3415329,38 Z" id="路径" fill="#CCCCDE"></path>
-                <g id="编组">
-                    <path d="M33.5751664,18.0536018 C33.5751664,8.33215397 26.1541729,0.451167098 16.9998584,0.451167098 C7.84582705,0.451167098 0.424833607,8.33215397 0.424833607,18.0536018 L33.5751664,18.0536018 Z" id="路径" fill="#D6EBDE"></path>
-                    <path d="M34,18.5047689 L0,18.5047689 L0,18.0536018 C0,8.09875019 7.62604647,0 16.9998584,0 C26.3736703,0 34,8.09875019 34,18.0536018 L34,18.5047689 Z M0.855331662,17.6024347 L33.1449516,17.6024347 C32.9189401,8.35260688 25.763326,0.902334196 16.9998584,0.902334196 C8.23639075,0.902334196 1.0807767,8.35260688 0.855331662,17.6024347 Z" id="形状" fill="#CCCCDE"></path>
-                </g>
-                <g id="编组" transform="translate(8.7799, 0)">
-                    <path d="M15.1657101,18.0536018 C15.1657101,8.33215397 11.8658859,0.451167098 7.79513024,0.451167098 C3.72465784,0.451167098 0.424833607,8.33215397 0.424833607,18.0536018 L15.1657101,18.0536018 Z" id="路径" fill="#FFFFFF"></path>
-                    <path d="M15.5905437,18.5047689 L0,18.5047689 L0,18.0536018 C0,7.93001369 3.42387565,0 7.79513024,0 C12.1663848,0 15.5905437,7.93001369 15.5905437,18.0536018 L15.5905437,18.5047689 L15.5905437,18.5047689 Z M0.852216215,17.6024347 L14.7383275,17.6024347 C14.6375003,8.50419902 11.4991128,0.902334196 7.79513024,0.902334196 C4.09143086,0.902334196 0.953043391,8.50419902 0.852216215,17.6024347 Z" id="形状" fill="#CCCCDE"></path>
-                </g>
-            </g>
-            <g id="Layer_1_1_" transform="translate(0, 11)">
-                <rect id="矩形" fill="#6E6E96" x="26.6966071" y="9.20981678" width="1" height="10.5603452"></rect>
-                <rect id="矩形" fill="#6E6E96" x="36.2527278" y="19.533679" width="1" height="10.5603452"></rect>
-                <rect id="矩形" fill="#6E6E96" x="17.8611192" y="19.533679" width="1" height="10.5603452"></rect>
-                <rect id="矩形" fill="#FFFFFF" opacity="0.15" x="35.0519543" y="21.227241" width="1.17208321" height="7.01694689"></rect>
-                <rect id="矩形" fill="#6E6E96" opacity="0.15" x="52.7223674" y="21.227241" width="1.35238207" height="7.01694689"></rect>
-                <g id="编组" transform="translate(9.6313, 0.1081)">
-                    <path d="M23.5642655,0.150573895 C23.5642655,0.150573895 15.7582532,13.9290423 0.145384798,13.9290423 C0.145384798,13.9290423 -0.862432371,44.9311141 23.5642655,59.5048641 C23.5642655,59.5048641 49.5261759,46.2558928 49.5261759,12.6042635 C49.5261759,12.6042635 32.0827537,14.9886285 23.5642655,0.150573895 Z" id="路径" fill="#2E8F79"></path>
-                    <path d="M23.5642655,59.652851 C23.540357,59.652851 23.5164484,59.6466355 23.49479,59.6336127 C10.8367414,52.0812492 5.12399599,40.0546497 2.56043314,31.2953051 C-0.215775471,21.8090488 0.00221456675,14.0018518 0.00502734144,13.9240107 C0.00755883865,13.8440978 0.0697211592,13.7810554 0.145666076,13.7810554 C15.5008844,13.7810554 23.3659649,0.211840472 23.4435975,0.0748046015 C23.4689125,0.0301125575 23.5144794,0.00258699396 23.5639843,0.00258699396 C23.6157393,-0.0107318271 23.6593373,0.0295206099 23.6849336,0.0742126539 C30.1740048,11.3771562 42.018599,12.5974561 46.8101607,12.5974561 C48.4553526,12.5974561 49.4659825,12.46338 49.5081741,12.4574605 C49.5481155,12.4533169 49.5886195,12.4651559 49.6192787,12.4932734 C49.6493754,12.5213909 49.6670959,12.5619393 49.6670959,12.6042635 C49.6670959,30.0350486 42.5881859,41.8941269 36.6495747,48.773446 C30.2153526,56.2272502 23.6911217,59.6049032 23.6261466,59.6380523 C23.6061759,59.6481154 23.5853614,59.652851 23.5642655,59.652851 Z M0.283210758,14.0764372 C0.267740497,15.1762759 0.273366046,22.4797254 2.83214718,31.2177599 C5.37686443,39.9075508 11.0389799,51.8323352 23.5684847,59.3373429 C24.2677405,58.9641199 30.3964953,55.5802515 36.4487425,48.5653764 C42.3316608,41.7473239 49.3405328,30.0104828 49.3849746,12.7700089 C49.0330965,12.8087814 48.1178196,12.8934299 46.8098794,12.8934299 C41.9994721,12.8934299 30.1498149,11.6737219 23.5620153,0.431157059 C22.504412,2.14514134 14.6626775,14.0006679 0.283210758,14.0764372 Z" id="形状" fill="#6E6E96"></path>
-                </g>
-                <path d="M33.6869147,4.39491498 C41.7435453,17.6900581 57.9229065,14.1573148 59.6485438,13.9661158 C59.7483973,12.5356744 59.6485438,13.9661158 59.6485438,12.4539856 C59.6485438,12.4539856 42.2054029,14.8383506 33.6869147,0 C33.6869147,0 25.8806212,13.7787644 10.2677527,13.7787644 C10.2677527,13.7787644 10.2145913,12.7697897 10.4339877,15.5010359 C27.2481922,16.7849703 33.6869147,4.39491498 33.6869147,4.39491498 Z" id="路径" fill="#B0EDC1"></path>
-                <path d="M33.3741342,0.550215297 C33.3741342,0.550215297 25.5681219,14.3289797 9.95525344,14.3289797 C9.95525344,14.3289797 9.1929915,45.3313474 33.6199707,59.9042095 C33.6199707,59.9042095 60.4150249,46.6555342 59.3360445,13.0042009 C59.3360445,13.0039049 41.8926223,15.3882699 33.3741342,0.550215297 Z M33.5921242,55.3257908 C13.3592734,43.2547953 14.1941049,17.058746 14.1941049,17.058746 C26.7216408,16.6331357 33.5921242,6.16335844 33.5921242,6.16335844 C40.6476883,16.7686917 55.0952241,15.9612752 55.0957867,15.9612752 C55.0957867,43.8351999 33.5921242,55.3257908 33.5921242,55.3257908 Z" id="形状" fill="#F0F0FF"></path>
-                <path d="M33.3741342,0.265784474 L33.3741342,59.6200747 C33.3741342,59.6200747 60.9595781,45.5784856 59.3360445,12.7197701 C59.3360445,12.7194741 40.8102666,14.9830818 33.3741342,0.265784474 Z" id="路径" fill="#6E6E96" opacity="0.15"></path>
-                <path d="M41.4527044,62 L25.7658599,62 C25.5326809,62 25.3439437,61.8011056 25.3439437,61.5560393 C25.3439437,61.310973 25.5326809,61.1120786 25.7658599,61.1120786 L41.4529856,61.1120786 C41.6858834,61.1120786 41.8749018,61.310973 41.8749018,61.5560393 C41.8749018,61.8011056 41.6858834,62 41.4527044,62 Z" id="路径" fill="#6E6E96" opacity="0.38"></path>
-                <path d="M52.5417873,62 L47.9440258,62 C47.711128,62 47.5221096,61.8011056 47.5221096,61.5560393 C47.5221096,61.310973 47.711128,61.1120786 47.9440258,61.1120786 L52.5417873,61.1120786 C52.774685,61.1120786 52.9637035,61.310973 52.9637035,61.5560393 C52.9637035,61.8011056 52.774685,62 52.5417873,62 Z" id="路径" fill="#6E6E96" opacity="0.14"></path>
-                <path d="M19.5454087,62 L16.299748,62 C16.066569,62 15.8778318,61.8011056 15.8778318,61.5560393 C15.8778318,61.310973 16.066569,61.1120786 16.299748,61.1120786 L19.5454087,61.1120786 C19.7785878,61.1120786 19.9673249,61.310973 19.9673249,61.5560393 C19.9673249,61.8011056 19.7785878,62 19.5454087,62 Z" id="路径" fill="#6E6E96" opacity="0.14"></path>
-                <g id="编组" transform="translate(24.8122, 22.1335)">
-                    <path d="M0.852073925,7.22738426 C0.275736392,7.91167569 0.274330004,9.06005404 0.848979872,9.77867843 L6.67029836,17.0560823 C7.24494823,17.7747067 8.20804228,17.7954248 8.81053862,17.1022542 L21.0899878,2.97364878 C21.6927654,2.28047814 21.7287689,1.29725317 21.1709957,0.788770181 C20.6132225,0.279991216 19.5845908,0.341553767 18.885335,0.925214104 L8.98661831,9.18998654 C8.28736253,9.77394285 7.11640443,9.8118275 6.38452045,9.27433907 L3.23111875,6.95952797 C2.4989535,6.42203955 1.42841146,6.54279686 0.852073925,7.22738426 Z" id="路径" fill="#FFFFFF"></path>
-                    <path d="M7.75771705,18.052922 C7.22272731,18.052922 6.70883337,17.793649 6.3476731,17.341993 L0.526354616,10.0645891 C-0.179370552,9.18229122 -0.174870113,7.77730358 0.536480605,6.93289033 C0.939551217,6.45430069 1.54176628,6.179637 2.18898573,6.179637 C2.65843783,6.179637 3.10229367,6.3231843 3.4727361,6.59518422 L6.6261378,8.90999532 C6.88941351,9.10326621 7.24241673,9.20981678 7.6210162,9.20981678 C8.04265113,9.20981678 8.44487791,9.07574065 8.72446771,8.84221732 L18.6231844,0.577444887 C19.0628211,0.210437373 19.6352207,0 20.1932752,0 C20.6815729,0 21.1268351,0.160713774 21.4474914,0.45313589 C21.7687103,0.74585398 21.9596977,1.16732067 21.9858565,1.63969486 C22.0173596,2.21418001 21.8044326,2.8096793 21.4013619,3.27347025 L9.12219405,17.4020756 C8.7570959,17.8217665 8.27245482,18.052922 7.75771705,18.052922 Z M2.18870445,7.06755841 C1.78310235,7.06755841 1.41097225,7.23330374 1.16794852,7.52158222 C0.730562058,8.04101624 0.732531,8.94373634 1.17160513,9.49276774 L6.99292362,16.7701716 C7.1965685,17.024709 7.46800126,17.1650006 7.75743578,17.1650006 C8.03252514,17.1650006 8.29608213,17.035956 8.49888318,16.8024327 L20.7783323,2.67382732 C21.0286693,2.38584481 21.161151,2.02771651 21.1428679,1.69089833 C21.1338671,1.52722482 21.0832371,1.29636525 20.8942187,1.12381252 C20.7271398,0.971386017 20.4782093,0.887625431 20.1927127,0.887625431 C19.8217077,0.887625431 19.4402954,1.02791701 19.1472043,1.27268735 L9.24848764,9.53716381 C8.81588289,9.89854782 8.23785769,10.0974422 7.62045365,10.0974422 C7.07111875,10.0974422 6.546255,9.93436065 6.14290311,9.63809087 L2.98950141,7.32327977 C2.76476071,7.15842236 2.48038919,7.06755841 2.18870445,7.06755841 Z" id="形状" fill="#6E6E96"></path>
-                </g>
-                <path d="M14.2658306,19.533679 C14.2658306,19.533679 27.729458,18.5824192 33.3741342,10.8983473 C33.3741342,10.8983473 42.7637386,19.3466235 54.9554292,18.3953637 L55.096068,15.6768443 C55.096068,15.6768443 43.9338529,17.3014445 33.3741342,6.18999609 C33.3741342,6.18999609 25.4764254,16.7740192 14.1941049,16.7740192 L14.2658306,19.533679 Z" id="路径" fill="#6E6E96" opacity="0.15"></path>
-                <path d="M14.8306358,20.1279943 C14.8306358,20.1279943 16.3349077,43.1994482 33.3389745,52.1641986 C33.3389745,52.1641986 53.1763493,41.2602278 54.9554292,18.3950677 C54.9554292,18.3950677 54.0995019,41.8580949 33.6447231,54.6240369 C33.6447231,54.6240369 17.0130677,46.5756213 14.8306358,20.1279943 Z" id="路径" fill="#FFFFFF" opacity="0.36"></path>
-                <path d="M44.0683035,24.854104 L33.7127923,36.7691213 C33.1102959,37.462292 32.1474832,37.4412778 31.572552,36.7229494 L25.6643188,29.3608971 C25.2595605,29.4224596 24.2880281,30.2310601 24.7743569,31.3525048 C25.1352359,32.1850791 25.1765837,33.1854706 25.7515148,33.903799 L31.5728333,41.1814988 C32.1474832,41.9001232 33.1105772,41.9205454 33.7130735,41.2273747 L45.9925227,27.0990653 C46.595019,26.4058947 46.541295,23.4301741 45.9835218,22.9216911 C45.496068,22.4780263 45.9832406,22.922283 44.0683035,24.854104 Z" id="路径" fill="#6E6E96" opacity="0.15"></path>
-                <path d="M59.3278875,13.5322182 C58.5594374,44.6497198 33.6014064,57.5633527 33.6014064,57.5633527 C13.7142455,45.698059 10.5237152,22.3756194 10.024729,14.3277958 C9.99519484,14.3277958 9.96622326,14.3289797 9.93668913,14.3289797 C9.93668913,14.3289797 9.17442719,45.3313474 33.6014064,59.9042095 C33.6014064,59.9042095 60.1095576,46.7919782 59.3278875,13.5322182 Z" id="路径" fill="#6E6E96" opacity="0.15"></path>
-                <path d="M33.5094287,0.83464612 C33.5094287,0.83464612 25.7034163,14.6134105 10.0902666,14.6134105 C27.2535365,14.6134105 33.5094287,3.37883692 33.5094287,3.37883692 C41.1562379,16.6991379 60.342174,13.2883358 59.4710577,13.2883358 C59.4707764,13.2886317 42.0279168,15.6729967 33.5094287,0.83464612 Z M10.0902666,14.6134105 C10.0902666,14.6134105 10.0871726,14.7371275 10.0877351,14.9715388 C10.0877351,14.7383114 10.0902666,14.6134105 10.0902666,14.6134105 Z" id="形状" fill="#FFFFFF" opacity="0.61"></path>
-                <path d="M33.6199707,60.3484662 C33.5479637,60.3484662 33.4762379,60.3292279 33.4118254,60.2907513 C20.6741752,52.6916239 14.8596074,40.5948787 12.2248813,31.7852185 C9.37385292,22.2524943 9.53123489,14.3958697 9.53333724,14.3177326 C9.53924407,14.0771059 9.72629358,13.8853149 9.95525344,13.8853149 C25.1526751,13.8853149 32.9347788,0.458759392 33.0115675,0.323203391 C33.0875125,0.189127259 33.2244946,0.106550569 33.3727278,0.106550569 C33.3730091,0.106550569 33.3735716,0.106550569 33.3738529,0.106550569 C33.5215236,0.106550569 33.6585057,0.187943364 33.7350132,0.321131575 C40.1501084,11.4953265 51.8765661,12.7017157 56.6203106,12.7017157 C58.2520012,12.7017157 59.271632,12.5658637 59.281758,12.5643838 C59.399332,12.5489932 59.5183123,12.585398 59.6088837,12.6664948 C59.699455,12.7475916 59.7537416,12.8647973 59.7573982,12.9896982 C60.3196718,30.5231862 53.2351362,42.4535942 47.1930149,49.3743496 C40.6485321,56.870478 33.8669323,60.2729929 33.7991444,60.3067339 C33.7423264,60.3345554 33.6812892,60.3484662 33.6199707,60.3484662 Z M10.3757633,14.7696846 C10.3878582,16.5203697 10.6007852,23.4100478 13.0386171,31.5472556 C15.6159625,40.1500301 21.2800469,51.9442901 33.6340346,59.401646 C34.7768649,58.7934198 40.7767946,55.4202064 46.595019,48.7465891 C52.4649985,42.0134811 59.338576,30.4518565 58.9279109,13.4940376 C58.4635218,13.5360658 57.6677879,13.5890452 56.6205919,13.5890452 C51.8186229,13.5890452 40.0685379,12.3841358 33.3642895,1.37391039 C31.6355582,4.01902825 23.9043657,14.5551036 10.3757633,14.7696846 Z M33.5921242,55.7697515 C33.5203985,55.7697515 33.4483914,55.7505132 33.3839789,55.7120366 C22.8110401,49.4042429 18.0414181,39.223928 15.9020217,31.7943937 C13.5879519,23.7592969 13.7702197,17.1099495 13.77247,17.0439473 C13.7797832,16.810128 13.9583944,16.6227766 14.1806036,16.6150813 C26.3399473,16.2019019 33.1775212,6.0135957 33.2453091,5.91059682 C33.3237855,5.7910234 33.4531732,5.71939774 33.5909991,5.71939774 C33.5912804,5.71939774 33.591843,5.71939774 33.5921242,5.71939774 C33.7299502,5.71939774 33.8590565,5.78983951 33.9378142,5.908525 C35.4395546,8.16591718 41.3528509,15.5315212 54.389499,15.5315212 C54.8237914,15.5315212 55.0670964,15.5184984 55.0735658,15.5179064 C55.188327,15.511395 55.3019631,15.5551991 55.386065,15.6392557 C55.470167,15.7230163 55.5177029,15.839334 55.5177029,15.9612752 C55.5177029,30.4995083 49.612845,40.5336121 44.6592675,46.3912296 C39.2924934,52.7372039 33.8376795,55.6925023 33.7831116,55.7215077 C33.7229183,55.7537689 33.6576619,55.7697515 33.5921242,55.7697515 Z M14.6118019,17.4852443 C14.6137709,19.0391067 14.7648169,24.798165 16.7177263,31.565014 C18.8003047,38.7823351 23.4188808,48.6521735 33.5988749,54.8184917 C34.6134427,54.2327595 39.3616877,51.3286646 44.0517082,45.7738283 C48.8455201,40.0964588 54.5501084,30.4133799 54.6721828,16.4173708 C54.5889247,16.4182587 54.4946967,16.4191466 54.3897803,16.4191466 C52.9620158,16.4191466 49.193179,16.2755993 45.0457427,14.9451971 C40.0924465,13.3564097 36.239789,10.6547609 33.5845297,6.9095084 C32.0251275,8.98842838 25.3855728,16.9299974 14.6118019,17.4852443 Z" id="形状" fill="#6E6E96"></path>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/public/images/login/login.svg b/public/images/login/login.svg
deleted file mode 100644
index 0567f41..0000000
--- a/public/images/login/login.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688697413647" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="724" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M621.093184 219.292365l204.494898-118.227188a78.697356 78.697356 0 0 1 86.172365 1.22041C957.773706 131.89959 1008.401639 158.271881 1008.401639 158.271881l-245.130727 144.523203zM618.900261 506.79419L761.802607 425.236499l246.846927 142.654451-112.220484 66.455121s-30.681862 22.158063-93.72365-19.068902-183.80514-108.48298-183.805139-108.482979zM435.476499 613.122384l77.419739-43.820336 76.676053 44.926332-19.354935 376.820559-58.064805 32.512476-57.683426-33.599404-18.992626-376.839627zM13.424507 158.500708l355.425251 204.97162s52.077169 23.016164 78.888045 53.145028c24.961192 28.050354-11.689236 75.017058-11.689237 75.017057l219.063538-129.668528L186.760819 91.301899S152.665624 74.368715 101.065177 105.908678 13.424507 158.500708 13.424507 158.500708z" fill="#2E8F79" p-id="725"></path><path d="M15.44581 568.253259l115.957989 65.501676a6.521564 6.521564 0 0 0 0.896238 0.438585c4.481192 1.90689 38.976834 15.159777 79.822421-14.339814 41.799032-30.186071 207.622197-119.275978 222.839181-127.437468a9.381899 9.381899 0 0 0 2.154786-1.582718c6.807598-6.731322 45.574674-49.045214-2.669647-88.403427-0.572067-0.457654-3.051024-2.822197-3.81378-2.917542l-21.357169-14.110987-14.663985-8.962383-20.975792-10.983688c-2.917542-1.620857-6.483426 0.305102-9.381899 1.906891z" fill="#2E8F79" p-id="726"></path><path d="M647.103166 84.589646L507.976462 1.697132l-138.745326 83.254823 139.107635 81.805587 138.764395-82.167896z" fill="#2E8F79" p-id="727"></path></svg>
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 12b715e..cf0e0fb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,58 @@
 import Main from './layouts/main';
+import { createTheme, ThemeProvider } from '@mui/material';
+import { createContext, useEffect, useMemo, useState } from 'react';
+
+export const ColorModeContext = createContext({ toggleColorMode: () => {} });
 
 function App() {
-  return <Main></Main>;
+  const [mode, setMode] = useState<'light' | 'dark'>(() => {
+    const dataTheme = localStorage.getItem('data-theme');
+    return (dataTheme as 'light' | 'dark') || 'light';
+  });
+
+  const colorMode = useMemo(
+    () => ({
+      toggleColorMode: () => {
+        setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+      },
+    }),
+    [],
+  );
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', mode);
+
+    localStorage.setItem('data-theme', mode);
+  }, [mode]);
+
+  const theme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode,
+          primary: {
+            main: mode === 'light' ? '#1C293A' : 'rgba(255, 255, 255, 0.8)',
+          },
+          text: {
+            primary: mode === 'light' ? '#1C293A' : 'rgba(255, 255, 255, 0.8)',
+          },
+          success: {
+            main: mode === 'light' ? '#1f7d53' : '#008170',
+          },
+        },
+        typography: {
+          fontFamily: 'mabry-light',
+        },
+      }),
+    [mode],
+  );
+  return (
+    <ColorModeContext.Provider value={colorMode}>
+      <ThemeProvider theme={theme}>
+        <Main />
+      </ThemeProvider>
+    </ColorModeContext.Provider>
+  );
 }
 
 export default App;
diff --git a/src/assets/images/404/404.svg b/src/assets/images/404/404.svg
new file mode 100644
index 0000000..831425c
--- /dev/null
+++ b/src/assets/images/404/404.svg
@@ -0,0 +1,132 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="517px" height="255px" viewBox="0 0 517 255" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <defs>
+        <filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-1">
+            <feGaussianBlur stdDeviation="0" in="SourceGraphic"></feGaussianBlur>
+        </filter>
+        <linearGradient x1="12.2515839%" y1="50%" x2="100%" y2="50%" id="linearGradient-2">
+            <stop stop-color="#EEEEEE" stop-opacity="0.190067745" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="console-LandingPage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="文件分发" transform="translate(459, 218.5) rotate(9) translate(-459, -218.5)translate(441, 197)"
+            fill="#2C2C2C" fill-rule="nonzero">
+            <path
+                d="M12.9626432,5.51282051 L23.0373568,5.51282051 C24.4229786,5.51282051 25.5483871,4.27936939 25.5483871,2.76061386 C25.5483871,1.24185834 24.415353,0 23.0220607,0 L12.9626432,0 C11.5769765,0 10.4516129,1.23350029 10.4516129,2.75225582 C10.4516129,4.27101134 11.5616804,5.51282051 12.9626432,5.51282051 Z"
+                id="路径"></path>
+            <path
+                d="M30.8604954,3.30769231 L28.2946392,3.30769231 L28.2946392,8.59628652 L7.70531494,8.59628652 L7.70531494,3.30769231 L5.13950456,3.30769231 C2.29986962,3.30769231 -4.67740132e-13,5.67430391 -4.67740132e-13,8.59628652 L-4.67740132e-13,37.711453 C-4.67740132e-13,40.6334356 2.29986962,43 5.13950456,43 L30.8604954,43 C33.7001304,43 36,40.6334356 36,37.711453 L36,8.60435178 C36,5.682322 33.7001304,3.30769231 30.8604954,3.30769231 L30.8604954,3.30769231 Z M25.4706344,12.9188889 L25.4706344,10.2464105 L29.1003911,15.003688 L25.4706344,19.9139225 L25.4706344,17.0965996 C25.4706344,17.0965996 18.0390982,15.1807936 13.4237288,23.069326 L12.641445,23.069326 C14.1120946,11.7436248 25.4706344,12.9188889 25.4706344,12.9188889 Z M28.6075619,34.7975356 L10.8735027,34.7975356 C10.3885114,34.7975356 9.89568224,34.5399189 9.77834196,34.2179688 L6.82136673,26.120117 C6.70402644,25.7981197 7.00127322,25.5405502 7.49410243,25.5405502 L25.2282075,25.5405502 C25.7131987,25.5405502 26.2060279,25.7981197 26.3233682,26.120117 L29.2803435,34.2179216 C29.3976838,34.5399189 29.092599,34.7975356 28.6076078,34.7975356 L28.6075619,34.7975356 Z M29.3898,31.9721474 L27.1603345,25.8705655 C27.0038961,25.460039 26.6909734,25.2024695 26.3624206,25.0253639 C26.0260756,24.8483055 25.6427487,24.7436458 25.2203237,24.7436458 L9.88784428,24.7436458 L9.88784428,23.850147 C9.88784428,23.4154719 10.2868013,23.0613079 10.7718383,23.0613079 L12.641445,23.0613079 L12.641445,23.0773913 C12.6023468,23.3591094 12.6805431,24.4699458 12.8057214,24.2123762 C12.9956776,23.8224049 13.2018712,23.4410346 13.4237288,23.069326 L21.4810646,23.069326 C21.7783572,21.9101924 22.3650587,20.445192 23.3741851,20.5015545 L28.0208605,20.5015545 C29.3037657,20.5015545 29.3898,22.2724216 29.3898,22.2724216 L29.3898,31.9721474 Z"
+                id="形状"></path>
+        </g>
+        <polygon id="路径" fill="#31665A" fill-rule="nonzero"
+            transform="translate(399.9218, 119.3649) rotate(8) translate(-399.9218, -119.3649)"
+            points="401.335056 70.3648664 389.921822 70.3648664 389.921822 131.964656 398.508589 131.964656 398.508589 148.054978 389.921822 148.054978 389.921822 168.364866 401.335056 168.364866 401.335056 148.054978 409.921822 148.054978 409.921822 131.964656 401.335056 131.964656">
+        </polygon>
+        <path
+            d="M244.551456,165.609258 C244.684118,165.618431 244.81678,165.624546 244.953344,165.630662 C245.046988,165.63372 245.132828,165.639835 245.226472,165.642893 C245.374741,165.645951 245.52301,165.649009 245.675182,165.649009 L262.269644,165.649009 C262.023829,165.649009 261.785817,165.639835 261.547806,165.630662 C261.411242,165.624546 261.274678,165.618431 261.142016,165.609258 C260.974238,165.600084 260.806459,165.584795 260.638681,165.569507 C260.50992,165.557276 260.38116,165.545044 260.256302,165.529756 C260.072916,165.505293 259.893432,165.480831 259.713948,165.450254 C259.620304,165.438022 259.526661,165.422734 259.433017,165.407445 C259.202809,165.364636 258.972601,165.318769 258.750197,165.26373 C258.711179,165.257614 258.672161,165.251498 258.637044,165.239267 C258.37172,165.175054 258.110298,165.104726 257.856679,165.022166 C257.782545,165.000761 257.712312,164.973241 257.638177,164.948779 C257.462595,164.890682 257.287013,164.829526 257.119235,164.762255 C256.838303,164.652176 256.561274,164.532923 256.292048,164.404496 C256.268637,164.392265 256.245226,164.376976 256.217913,164.364745 C255.976,164.245492 255.74189,164.117066 255.507781,163.979466 C255.386824,163.903022 255.261966,163.82352 255.141009,163.744018 C255.051267,163.682862 254.953722,163.624765 254.86398,163.560552 C254.735219,163.471876 254.614263,163.374028 254.489404,163.279237 C254.407466,163.215024 254.321626,163.156926 254.239688,163.089655 C254.103124,162.979575 253.974364,162.860322 253.845603,162.744127 C253.779272,162.682972 253.712941,162.63099 253.650512,162.569834 C253.459323,162.389426 253.272035,162.199844 253.092551,162.001089 C252.913067,161.805392 252.741387,161.600521 252.573608,161.386477 C252.515081,161.313091 252.464357,161.236646 252.409732,161.16326 C252.300481,161.019545 252.187328,160.872772 252.081978,160.719883 C252.023451,160.62815 251.961022,160.533359 251.902494,160.438569 C251.808851,160.294853 251.715207,160.154196 251.629367,160.007423 C251.566937,159.903459 251.50841,159.793379 251.445981,159.683299 C251.352337,159.515122 251.25089,159.343887 251.161148,159.163478 C251.040191,158.924972 250.923136,158.671177 250.806082,158.414325 C250.782671,158.353169 250.755358,158.295072 250.728045,158.233916 C250.618794,157.974006 250.505641,157.711038 250.400292,157.435838 C250.388586,157.402203 250.376881,157.36551 250.361274,157.331874 C250.26763,157.078079 250.173986,156.818169 250.084244,156.549085 C250.060833,156.484872 250.037422,156.420659 250.017913,156.353388 C249.920367,156.059842 249.826723,155.757123 249.736982,155.44523 C249.717472,155.387132 249.701865,155.329035 249.686258,155.270937 C249.608221,154.989622 249.534087,154.702192 249.45605,154.408646 C249.440443,154.344433 249.424836,154.283277 249.409228,154.219064 C249.354603,154.00502 249.307781,153.781803 249.257057,153.561644 C249.218039,153.387351 249.175119,153.213058 249.1361,153.029592 C249.089279,152.809432 249.046358,152.5801 249.003438,152.350767 C248.968322,152.167301 248.929304,151.986892 248.898089,151.800368 C248.851267,151.558804 248.812249,151.308067 248.773231,151.060388 C248.742016,150.876922 248.710802,150.693455 248.679587,150.503874 C248.640569,150.243963 248.605452,149.971822 248.566434,149.69968 C248.543023,149.513156 248.51571,149.332748 248.488397,149.143166 C248.449379,148.846562 248.418165,148.53467 248.383048,148.225835 C248.363539,148.057658 248.34403,147.88948 248.324521,147.718245 C248.285503,147.357428 248.254288,146.981323 248.219172,146.608275 C248.207466,146.479848 248.195761,146.35448 248.184055,146.226053 C248.141135,145.718464 248.102117,145.198643 248.070902,144.669649 C248.063099,144.562627 248.059197,144.452547 248.051393,144.345525 C248.02408,143.917437 248.000669,143.486292 247.98116,143.045973 C247.98116,142.993991 247.977258,142.945066 247.973357,142.893084 C247.953847,142.437476 247.934338,141.975753 247.922633,141.504857 C247.914829,141.342795 247.910927,141.180733 247.907026,141.015613 C247.89532,140.633392 247.887516,140.245055 247.883615,139.850603 C247.879713,139.688541 247.875811,139.526479 247.875811,139.36136 C247.868007,138.817077 247.864105,138.266678 247.864105,137.704048 C247.864105,137.116957 247.868007,136.545154 247.875811,135.979466 C247.875811,135.796 247.883615,135.615592 247.883615,135.432125 C247.891418,135.05602 247.899222,134.676856 247.910927,134.306866 C247.914829,134.098938 247.922633,133.894067 247.930437,133.686139 C247.942142,133.349784 247.953847,133.016487 247.969455,132.686248 C247.977258,132.47832 247.988964,132.270391 247.996768,132.062463 C248.016277,131.741397 248.031884,131.426447 248.051393,131.114554 C248.063099,130.912741 248.074804,130.713986 248.08651,130.515231 C248.10992,130.194165 248.133331,129.879215 248.160644,129.564265 C248.17235,129.389972 248.187957,129.212621 248.199662,129.038328 C248.234779,128.662223 248.269895,128.292232 248.305012,127.928358 C248.316717,127.827451 248.324521,127.723487 248.336226,127.625639 C248.38695,127.160857 248.437674,126.70525 248.496201,126.261873 C248.504005,126.200718 248.511808,126.14262 248.519612,126.081465 C248.570336,125.71759 248.62106,125.362889 248.671783,125.014303 C248.687391,124.913397 248.702998,124.81249 248.718605,124.711584 C248.781034,124.320189 248.843464,123.931852 248.913696,123.555747 C248.9215,123.512938 248.929304,123.470129 248.937107,123.42732 C248.999537,123.087908 249.065868,122.757669 249.1361,122.433545 C249.15561,122.341812 249.175119,122.250079 249.194628,122.158346 C249.272664,121.803644 249.350701,121.455059 249.436541,121.115646 C249.444345,121.091184 249.448246,121.066722 249.45605,121.039202 C249.534087,120.724252 249.619927,120.418475 249.705767,120.118813 C249.729178,120.036253 249.752589,119.953694 249.776,119.871134 C249.842331,119.650974 249.908662,119.439988 249.974993,119.225944 C250.017913,119.097518 250.056931,118.966034 250.099851,118.840665 C250.173986,118.626621 250.248121,118.421751 250.326157,118.21688 C250.365175,118.115974 250.400292,118.008952 250.43931,117.908045 C250.544659,117.629788 250.657812,117.360705 250.770965,117.097736 C250.782671,117.076332 250.790474,117.054928 250.798278,117.036581 C250.927038,116.743035 251.063602,116.46172 251.200166,116.189579 C251.325024,115.944957 251.453785,115.709509 251.590348,115.480176 C251.629367,115.412905 251.668385,115.348692 251.707403,115.284479 C251.812752,115.110186 251.918102,114.938951 252.031255,114.770773 C252.066371,114.715734 252.101487,114.660694 252.140506,114.605654 C252.284873,114.394668 252.433143,114.192855 252.585314,113.9941 C252.624332,113.945175 252.66335,113.899309 252.702369,113.850385 C252.827227,113.697496 252.952085,113.547665 253.080846,113.40395 C253.139373,113.336679 253.1979,113.272466 253.256428,113.208253 C253.373482,113.085942 253.490537,112.963631 253.607592,112.847436 C253.673923,112.783223 253.740254,112.722067 253.802683,112.660912 C253.931443,112.541659 254.060204,112.428522 254.192866,112.318442 C254.251393,112.26646 254.30992,112.214478 254.368448,112.165553 C254.746925,111.859776 255.148813,111.575404 255.578014,111.318551 C255.648246,111.2788 255.714577,111.242107 255.78481,111.202356 C255.93308,111.119796 256.081349,111.037236 256.23352,110.957734 C256.315459,110.917983 256.397397,110.878232 256.479335,110.838481 C256.627605,110.768152 256.779776,110.700881 256.931947,110.636668 C257.013885,110.603033 257.095824,110.569397 257.177762,110.535762 C257.353344,110.465433 257.53673,110.40122 257.724017,110.340065 C257.782545,110.31866 257.841072,110.297256 257.895698,110.278909 C258.141513,110.199407 258.391229,110.129078 258.644848,110.067923 C258.707277,110.052634 258.769706,110.040403 258.832136,110.025114 C259.027227,109.979248 259.222318,109.936439 259.425213,109.899746 C259.514955,109.881399 259.608599,109.869168 259.702243,109.853879 C259.881727,109.823301 260.061211,109.795782 260.244596,109.774377 C260.342142,109.762146 260.443589,109.749915 260.541135,109.740742 C260.736226,109.719337 260.931318,109.704048 261.126409,109.691817 C261.216151,109.685702 261.305893,109.676529 261.395635,109.673471 C261.68437,109.658182 261.973105,109.649009 262.269644,109.649009 L245.679083,109.649009 C245.382545,109.649009 245.09381,109.658182 244.805075,109.673471 C244.711431,109.676529 244.621689,109.685702 244.531947,109.691817 C244.336856,109.704048 244.141764,109.719337 243.950575,109.740742 C243.849128,109.749915 243.751582,109.762146 243.650134,109.774377 C243.47065,109.795782 243.287265,109.823301 243.111683,109.853879 C243.018039,109.869168 242.924395,109.884457 242.830751,109.899746 C242.631758,109.936439 242.432765,109.979248 242.237674,110.025114 C242.175245,110.040403 242.112815,110.052634 242.050386,110.067923 C241.796768,110.129078 241.547051,110.199407 241.305138,110.278909 C241.24661,110.297256 241.188083,110.31866 241.129555,110.340065 C240.94617,110.40122 240.762784,110.465433 240.5833,110.535762 C240.501362,110.56634 240.423325,110.603033 240.341387,110.636668 C240.185314,110.700881 240.033143,110.768152 239.884873,110.838481 C239.802935,110.878232 239.724898,110.917983 239.64296,110.957734 C239.490789,111.034178 239.338618,111.116738 239.190348,111.202356 C239.124017,111.242107 239.053785,111.2788 238.987454,111.318551 C238.776755,111.44392 238.569958,111.575404 238.370965,111.716061 C238.164168,111.859776 237.969077,112.009607 237.777888,112.165553 C237.715459,112.214478 237.656931,112.26646 237.598404,112.318442 C237.465742,112.428522 237.340883,112.541659 237.212123,112.657854 C237.145792,112.71901 237.083363,112.783223 237.017032,112.847436 C236.899977,112.963631 236.782922,113.082884 236.665868,113.208253 C236.60734,113.272466 236.544911,113.336679 236.486384,113.400892 C236.357623,113.547665 236.232765,113.697496 236.111808,113.850385 C236.07279,113.899309 236.02987,113.945175 235.994754,113.9941 C235.98695,114.006331 235.975245,114.015504 235.967441,114.027735 C235.823073,114.214259 235.682608,114.406899 235.549946,114.605654 C235.510927,114.660694 235.475811,114.715734 235.440695,114.770773 C235.327542,114.938951 235.222192,115.110186 235.116843,115.284479 C235.077825,115.348692 235.038807,115.412905 234.999788,115.480176 C234.863224,115.709509 234.734464,115.944957 234.609606,116.189579 C234.593999,116.214041 234.582293,116.241561 234.570588,116.269081 C234.445729,116.513702 234.324773,116.770555 234.207718,117.036581 C234.199914,117.054928 234.192111,117.070216 234.184307,117.088563 C234.067252,117.354589 233.954099,117.626731 233.844848,117.908045 C233.80583,118.008952 233.770713,118.115974 233.731695,118.21688 C233.65756,118.421751 233.583426,118.626621 233.509291,118.840665 C233.466371,118.966034 233.427353,119.097518 233.384433,119.225944 C233.341513,119.366602 233.294691,119.501144 233.247869,119.647917 C233.22836,119.721303 233.204949,119.800805 233.181538,119.874192 C233.158127,119.953694 233.134716,120.036253 233.115207,120.115755 C233.025465,120.418475 232.943527,120.727309 232.86549,121.045317 C232.857686,121.06978 232.849883,121.091184 232.845981,121.115646 C232.760141,121.455059 232.678202,121.803644 232.604068,122.161403 C232.580657,122.250079 232.565049,122.341812 232.54554,122.433545 C232.475308,122.757669 232.408976,123.087908 232.346547,123.42732 C232.338744,123.470129 232.33094,123.512938 232.323136,123.555747 C232.252903,123.93491 232.186572,124.320189 232.128045,124.714641 C232.112438,124.81249 232.09683,124.913397 232.081223,125.011245 C232.030499,125.359831 231.979776,125.714532 231.929052,126.078407 C231.921248,126.139562 231.913445,126.200718 231.905641,126.264931 L231.893936,126.332202 C231.843212,126.754174 231.792488,127.18532 231.745666,127.625639 C231.733961,127.723487 231.726157,127.827451 231.714452,127.928358 C231.675433,128.292232 231.644219,128.662223 231.609102,129.038328 C231.593495,129.212621 231.58179,129.386914 231.566182,129.564265 C231.542771,129.879215 231.51936,130.197223 231.495949,130.518289 C231.484244,130.713986 231.472538,130.912741 231.456931,131.108439 C231.437422,131.423389 231.421815,131.741397 231.406207,132.065521 C231.394502,132.270391 231.386698,132.47832 231.374993,132.686248 C231.359386,133.016487 231.34768,133.349784 231.335975,133.686139 C231.328171,133.894067 231.320367,134.098938 231.316465,134.306866 C231.30476,134.676856 231.296956,135.05602 231.293055,135.432125 C231.289153,135.615592 231.285251,135.796 231.281349,135.979466 C231.273545,136.545154 231.269644,137.120014 231.269644,137.704048 C231.269644,138.266678 231.273545,138.817077 231.281349,139.36136 C231.281349,139.526479 231.285251,139.688541 231.289153,139.850603 C231.296956,140.245055 231.30476,140.633392 231.312564,141.015613 C231.316465,141.180733 231.324269,141.342795 231.328171,141.504857 C231.343778,141.975753 231.359386,142.437476 231.378895,142.893084 C231.382796,142.945066 231.382796,142.993991 231.386698,143.045973 C231.386698,143.055146 231.386698,143.067377 231.386698,143.079608 C231.406207,143.510754 231.429618,143.929668 231.456931,144.348583 C231.464735,144.455605 231.468637,144.562627 231.472538,144.669649 C231.507655,145.198643 231.546673,145.718464 231.589593,146.226053 C231.601299,146.363653 231.613004,146.492079 231.628611,146.626621 C231.659826,146.993554 231.694942,147.360486 231.730059,147.718245 C231.749568,147.901711 231.772979,148.079062 231.792488,148.262528 C231.827605,148.556074 231.858819,148.855736 231.893936,149.140108 C231.921248,149.338863 231.948561,149.528445 231.975874,149.721085 C232.01099,149.984053 232.046107,150.250079 232.085125,150.503874 C232.11634,150.699571 232.147554,150.886095 232.182671,151.075677 C232.221689,151.317241 232.256805,151.561862 232.303627,151.800368 C232.334842,151.98995 232.37386,152.170358 232.408976,152.356882 C232.455798,152.583157 232.494817,152.81249 232.541639,153.029592 C232.580657,153.213058 232.623577,153.387351 232.662595,153.564702 C232.705515,153.742052 232.740632,153.934692 232.787454,154.112042 C232.795257,154.145678 232.806963,154.182371 232.814766,154.216007 C232.830374,154.283277 232.845981,154.344433 232.861588,154.408646 C232.935723,154.702192 233.013759,154.989622 233.091796,155.267879 C233.111305,155.325977 233.126912,155.387132 233.14252,155.44523 C233.232262,155.757123 233.325905,156.059842 233.423451,156.353388 C233.44296,156.420659 233.466371,156.484872 233.489782,156.549085 C233.579524,156.815111 233.673168,157.078079 233.766812,157.331874 C233.782419,157.36551 233.794124,157.402203 233.80583,157.435838 C233.911179,157.70798 234.024332,157.974006 234.133583,158.233916 C234.160896,158.295072 234.188209,158.353169 234.21162,158.414325 C234.328674,158.671177 234.445729,158.924972 234.570588,159.163478 C234.5979,159.221576 234.625213,159.279674 234.656428,159.334714 C234.718857,159.453967 234.78909,159.567104 234.855421,159.686357 C234.913948,159.793379 234.972476,159.900401 235.034905,160.004365 C235.124647,160.154196 235.214389,160.294853 235.308032,160.438569 C235.36656,160.530302 235.425087,160.62815 235.487516,160.719883 C235.592866,160.872772 235.706019,161.019545 235.81527,161.166318 C235.869895,161.239704 235.920619,161.313091 235.975245,161.383419 C236.143023,161.594406 236.314703,161.799276 236.494187,161.994973 L236.501991,162.004147 C236.677573,162.202902 236.864861,162.389426 237.05605,162.569834 C237.118479,162.63099 237.18481,162.686029 237.251141,162.744127 C237.379902,162.86338 237.508662,162.979575 237.645226,163.089655 C237.723262,163.156926 237.809102,163.215024 237.891041,163.279237 C238.015899,163.377085 238.136856,163.471876 238.265616,163.560552 C238.355358,163.624765 238.452903,163.682862 238.546547,163.744018 C238.644093,163.811289 238.741639,163.881618 238.846988,163.942773 C238.866497,163.955004 238.889908,163.967235 238.913319,163.979466 C239.143527,164.117066 239.381538,164.245492 239.623451,164.364745 C239.646862,164.376976 239.670273,164.392265 239.693684,164.404496 C239.96291,164.53598 240.239939,164.655233 240.520871,164.765313 C240.54038,164.771429 240.559889,164.780602 240.579398,164.789775 C240.727667,164.847873 240.88374,164.896797 241.039813,164.948779 C241.113948,164.973241 241.184181,165.000761 241.258316,165.025224 C241.508032,165.101668 241.765553,165.175054 242.026975,165.239267 L242.038681,165.242325 C242.077699,165.251498 242.116717,165.257614 242.155735,165.266787 C242.378139,165.318769 242.604445,165.367694 242.834653,165.407445 C242.928297,165.425791 243.025842,165.438022 243.119486,165.453311 C243.248246,165.471658 243.373105,165.49612 243.509669,165.514467 C243.556491,165.520582 243.611116,165.52364 243.66184,165.529756 C243.786698,165.545044 243.915459,165.557276 244.044219,165.569507 C244.215899,165.584795 244.379776,165.600084 244.551456,165.609258 Z"
+            id="路径" fill="#474747" fill-rule="nonzero"
+            transform="translate(246.7696, 137.649) rotate(-3) translate(-246.7696, -137.649)"></path>
+        <path
+            d="M294.372179,142.78192 C294.413545,142.31183 294.44739,141.824221 294.481234,141.342452 C294.503797,141.024192 294.530121,140.711772 294.548923,140.387672 C294.579007,139.841667 294.60157,139.283983 294.620373,138.723378 C294.631654,138.448916 294.646696,138.183212 294.654217,137.90291 C294.680541,137.062004 294.691823,136.203578 294.691823,135.333473 C294.691823,134.586001 294.680541,133.850208 294.661738,133.120254 C294.654217,132.892508 294.646696,132.670602 294.639175,132.442857 C294.627894,132.127517 294.620373,131.806337 294.605331,131.493917 C294.594049,131.274931 294.579007,131.064704 294.567726,130.848638 C294.556444,130.685129 294.548923,130.518699 294.537642,130.355189 C294.496276,129.680712 294.44739,129.012075 294.387221,128.355116 C294.3797,128.270442 294.372179,128.185767 294.360898,128.098173 C294.30449,127.51129 294.240562,126.933167 294.169112,126.363803 C294.150309,126.209053 294.135267,126.054303 294.112704,125.902472 C294.029973,125.271792 293.939721,124.646952 293.838187,124.036711 C293.826906,123.946196 293.808103,123.858602 293.793061,123.771008 C293.702809,123.227922 293.601275,122.693596 293.495981,122.168029 C293.469658,122.027878 293.439574,121.884807 293.40949,121.744656 C293.296674,121.195731 293.176338,120.652646 293.04472,120.11832 C293.037199,120.080362 293.025918,120.045324 293.014636,120.007367 C292.995834,119.922692 292.973271,119.843857 292.950708,119.762102 C292.82285,119.248215 292.683712,118.746007 292.540812,118.249638 C292.506968,118.138685 292.476884,118.024812 292.443039,117.91386 C292.281337,117.373694 292.112115,116.842288 291.93161,116.319641 C291.894005,116.214527 291.8564,116.109414 291.818795,116.004301 C291.653333,115.531291 291.476589,115.06704 291.296084,114.611549 C291.269761,114.535634 291.239677,114.459719 291.209593,114.386723 C291.006525,113.884515 290.795937,113.393987 290.574067,112.912217 C290.52518,112.804184 290.472533,112.696151 290.419886,112.585198 C290.198016,112.112188 289.968625,111.647937 289.731713,111.192446 C289.724192,111.177847 289.716671,111.163248 289.70915,111.148649 C289.70915,111.142809 289.70539,111.13697 289.701629,111.13405 C289.543688,110.833309 289.374465,110.547167 289.205242,110.258106 C289.084906,110.044959 288.96833,109.823053 288.844234,109.615746 C288.656208,109.303326 288.456901,109.005505 288.261355,108.704764 C288.144779,108.523736 288.031964,108.336868 287.911628,108.158759 C287.685997,107.8259 287.449085,107.50764 287.212173,107.189381 C287.11064,107.052149 287.012867,106.909078 286.911333,106.771847 C286.565366,106.325115 286.208118,105.887143 285.839588,105.46377 C285.512424,105.084194 285.170218,104.719217 284.824251,104.363 C284.745281,104.281245 284.66631,104.19949 284.587339,104.117736 C284.241373,103.770278 283.891646,103.431579 283.530637,103.10456 C283.48175,103.060763 283.432864,103.022805 283.387738,102.979008 C283.056813,102.684107 282.718367,102.397965 282.372401,102.120582 C282.289669,102.053427 282.206938,101.986271 282.124207,101.922035 C281.744396,101.621294 281.357064,101.332232 280.95845,101.05193 C280.88324,100.999374 280.804269,100.946817 280.725298,100.89426 C280.36805,100.648996 280.003281,100.409571 279.630991,100.178906 C279.555781,100.135108 279.484331,100.085472 279.409121,100.041674 C279.371516,100.015396 279.333911,99.9920375 279.292545,99.968679 C278.897692,99.7292542 278.491557,99.5044285 278.081662,99.2825226 C277.980128,99.2299659 277.874834,99.1774093 277.7733,99.1248526 C277.416052,98.9409043 277.051283,98.7627956 276.682753,98.5905265 C276.532333,98.520451 276.381912,98.4503754 276.235253,98.3861395 C275.878004,98.2255497 275.516996,98.0737194 275.152227,97.9277286 C275.020609,97.875172 274.892752,97.8196955 274.761134,97.7700586 C274.704726,97.7496199 274.65584,97.7262614 274.603193,97.7058227 C274.189537,97.5481527 273.760839,97.402162 273.335902,97.2590911 C273.238128,97.2269731 273.140355,97.1948552 273.046342,97.1627372 C272.542435,97.0021474 272.034766,96.8473972 271.515816,96.7072461 C271.463169,96.6926471 271.410522,96.6809678 271.357875,96.6663687 C271.087118,96.5933734 270.816362,96.520378 270.538084,96.4532223 C270.297412,96.3977458 270.052979,96.3422693 269.808546,96.2897126 C269.744617,96.2751136 269.676928,96.2575947 269.609239,96.2429956 C269.075247,96.126203 268.526213,96.0240095 267.973418,95.9276556 C267.871884,95.9101367 267.770351,95.8926179 267.665057,95.8780188 C267.194993,95.7991838 266.721169,95.7261884 266.236064,95.6648723 C266.160854,95.6531931 266.081883,95.6473534 266.002912,95.6356742 C265.886337,95.6210751 265.769761,95.6093958 265.653185,95.5947968 C265.126714,95.5334807 264.592722,95.480924 264.047449,95.4371268 C263.972238,95.4283673 263.893268,95.4225277 263.818058,95.4166881 C263.223897,95.369971 262.618456,95.3349333 262.009254,95.3115748 C261.870115,95.3057351 261.730976,95.2998955 261.591837,95.2940559 C261.422614,95.2911361 261.253392,95.2794568 261.084169,95.276537 C260.625387,95.2648577 260.159084,95.2590181 259.689021,95.2590181 L243.695583,95.2590181 C244.33863,95.2590181 244.974156,95.2736172 245.5984,95.2940559 C245.737538,95.2998955 245.876677,95.3057351 246.015816,95.3115748 C246.625018,95.3349333 247.23046,95.369971 247.82086,95.4166881 C247.89983,95.4225277 247.978801,95.4283673 248.054011,95.4371268 C248.595524,95.480924 249.129516,95.5334807 249.659748,95.5947968 C249.776323,95.6093958 249.892899,95.6210751 250.009475,95.6356742 C250.56979,95.7057497 251.126345,95.7875045 251.671619,95.8780188 C251.773153,95.8926179 251.874686,95.9101367 251.97622,95.9276556 C252.532775,96.0240095 253.078049,96.1291228 253.615801,96.2429956 C253.68349,96.2575947 253.747419,96.2721938 253.815108,96.2897126 C254.337819,96.4065052 254.856769,96.5320573 255.364437,96.6663687 C255.417084,96.6809678 255.469731,96.6926471 255.518618,96.7072461 C256.037568,96.8473972 256.548997,97.0021474 257.049144,97.165657 C257.146918,97.1948552 257.244691,97.2269731 257.338704,97.2590911 C257.823809,97.4196809 258.297633,97.5890301 258.763936,97.7700586 C258.895554,97.8196955 259.027171,97.875172 259.155029,97.9277286 C259.523558,98.0737194 259.884567,98.2255497 260.238055,98.3861395 C260.388475,98.4532953 260.538895,98.520451 260.689316,98.5905265 C261.057845,98.7627956 261.422614,98.9409043 261.779863,99.1277724 C261.881396,99.1803291 261.986691,99.2299659 262.088224,99.2825226 C262.539485,99.5248672 262.983225,99.7788911 263.419444,100.041674 C263.494654,100.088391 263.566104,100.135108 263.637553,100.181825 C264.009843,100.412491 264.374613,100.648996 264.731861,100.89718 C264.810832,100.949737 264.889802,101.002293 264.968773,101.05485 C265.363626,101.335152 265.750958,101.624214 266.13453,101.922035 C266.217261,101.989191 266.296232,102.056346 266.378963,102.120582 C266.72493,102.400885 267.063375,102.687026 267.3943,102.981928 C267.443187,103.022805 267.492073,103.063682 267.537199,103.10456 C267.898208,103.431579 268.247935,103.773197 268.593902,104.117736 C268.672873,104.19949 268.751843,104.281245 268.830814,104.363 C269.17678,104.722137 269.518987,105.087114 269.846151,105.46377 C270.21468,105.890063 270.571929,106.325115 270.917895,106.774767 C271.030711,106.920758 271.136005,107.078428 271.245059,107.227338 C271.47445,107.536838 271.703841,107.840499 271.91819,108.158759 C272.057329,108.360226 272.181426,108.573373 272.316804,108.780679 C272.497308,109.058062 272.681573,109.329605 272.850796,109.615746 C272.989935,109.843492 273.114032,110.082917 273.245649,110.316502 C273.403591,110.590965 273.565293,110.865427 273.715713,111.148649 C273.726994,111.166168 273.734515,111.183687 273.742036,111.198286 C273.982709,111.650857 274.208339,112.118028 274.430209,112.588118 C274.479096,112.696151 274.531743,112.807104 274.58439,112.918057 C274.802499,113.399826 275.013088,113.887435 275.216155,114.386723 C275.25,114.462639 275.276323,114.541474 275.306407,114.617389 C275.486912,115.07288 275.659895,115.534211 275.825357,116.004301 C275.862962,116.112334 275.900568,116.217447 275.938173,116.322561 C276.118677,116.845207 276.2879,117.376614 276.449602,117.916779 C276.483446,118.027732 276.517291,118.141605 276.547375,118.255478 C276.694035,118.748926 276.829413,119.254054 276.961031,119.762102 C276.979833,119.846777 277.002396,119.925612 277.024959,120.010286 C277.164098,120.57965 277.295716,121.157774 277.419812,121.747576 C277.449897,121.887727 277.47622,122.030798 277.506304,122.173869 C277.611598,122.699436 277.709372,123.230842 277.799624,123.768088 C277.814666,123.858602 277.833468,123.949116 277.84851,124.039631 C277.950044,124.649872 278.036536,125.271792 278.119267,125.902472 C278.14183,126.057222 278.156872,126.211973 278.179435,126.366723 C278.250885,126.939006 278.311053,127.51421 278.36746,128.098173 C278.378742,128.185767 278.390023,128.270442 278.397544,128.360956 C278.457712,129.017914 278.506599,129.683632 278.547965,130.358109 C278.555486,130.524539 278.566767,130.690968 278.574288,130.854478 C278.604372,131.380044 278.626935,131.911451 278.645738,132.445777 C278.653259,132.670602 278.66454,132.895428 278.668301,133.123174 C278.687103,133.853127 278.702145,134.588921 278.702145,135.339313 C278.702145,136.209418 278.687103,137.064923 278.66454,137.90875 C278.653259,138.186132 278.638217,138.454755 278.630696,138.729218 C278.608133,139.286902 278.58933,139.844587 278.555486,140.390592 C278.536683,140.714692 278.51036,141.027112 278.487797,141.345372 C278.453952,141.830061 278.420107,142.31475 278.378742,142.78776 C278.348658,143.120619 278.311053,143.444718 278.277208,143.774657 C278.228322,144.215549 278.183195,144.662281 278.130548,145.094414 C278.089183,145.427272 278.040296,145.751372 277.99517,146.075471 C277.935002,146.493005 277.878594,146.913458 277.810905,147.319312 C277.758258,147.646332 277.69809,147.964591 277.641682,148.285771 C277.570233,148.679946 277.498783,149.074121 277.419812,149.456617 C277.355884,149.774876 277.284434,150.084377 277.216745,150.396797 C277.134014,150.770533 277.047522,151.144269 276.95727,151.509246 C276.88206,151.815827 276.803089,152.116568 276.720358,152.414389 C276.626345,152.770606 276.528572,153.123904 276.427039,153.471362 C276.325505,153.81298 276.220211,154.148759 276.114916,154.478698 C276.043467,154.694764 275.975778,154.91083 275.904328,155.121057 C275.77271,155.500633 275.637332,155.871449 275.498193,156.242266 C275.434265,156.417455 275.370336,156.592643 275.302647,156.761993 C275.095819,157.296319 274.87771,157.818966 274.648319,158.329933 C274.640798,158.341612 274.633277,158.356211 274.625756,158.37081 C274.403886,158.867179 274.170734,159.348948 273.926301,159.821958 C273.854852,159.95919 273.779641,160.093501 273.704431,160.230732 C273.527687,160.566511 273.343423,160.89937 273.155397,161.223469 C273.061385,161.384059 272.967372,161.541729 272.873359,161.699399 C272.689094,162.00014 272.501069,162.295041 272.309283,162.587023 C272.21527,162.733013 272.117497,162.881924 272.019724,163.024995 C271.794094,163.352014 271.560942,163.673194 271.32403,163.985614 C271.256341,164.076128 271.192412,164.172482 271.120963,164.262996 C270.797559,164.67761 270.466634,165.086384 270.120668,165.477639 C264.400936,171.997585 255.590068,175.259018 243.691823,175.259018 L259.68526,175.259018 C271.583505,175.259018 280.390613,171.997585 286.114105,165.477639 C286.441269,165.103903 286.757152,164.721407 287.065514,164.324312 C287.084316,164.303874 287.099358,164.280515 287.1144,164.262996 C287.182089,164.172482 287.246018,164.076128 287.317468,163.985614 C287.55438,163.673194 287.783771,163.352014 288.009401,163.024995 C288.110935,162.879004 288.204947,162.733013 288.302721,162.587023 C288.494506,162.295041 288.682532,162.00014 288.863036,161.699399 C288.960809,161.541729 289.054822,161.384059 289.148835,161.223469 C289.33686,160.89937 289.517364,160.569431 289.697869,160.230732 C289.769318,160.093501 289.844529,159.95919 289.915978,159.821958 C289.938541,159.778161 289.964865,159.734364 289.987428,159.690567 C290.205537,159.261354 290.416126,158.823382 290.615433,158.37665 C290.622954,158.359131 290.630475,158.344532 290.637996,158.327013 C290.867387,157.818966 291.085496,157.296319 291.296084,156.761993 C291.363774,156.592643 291.423942,156.417455 291.48787,156.242266 C291.627009,155.874369 291.766148,155.500633 291.897766,155.118137 C291.969215,154.90791 292.036904,154.694764 292.104593,154.481617 C292.172283,154.274311 292.243732,154.075763 292.307661,153.865537 C292.345266,153.737065 292.379111,153.602753 292.416716,153.471362 C292.518249,153.123904 292.616022,152.770606 292.713796,152.414389 C292.792766,152.116568 292.875497,151.815827 292.950708,151.509246 C293.04096,151.144269 293.123691,150.770533 293.210183,150.393877 C293.277872,150.084377 293.349321,149.774876 293.41325,149.459536 C293.48846,149.074121 293.56367,148.679946 293.631359,148.285771 C293.691528,147.964591 293.747935,147.646332 293.804343,147.322232 C293.868271,146.913458 293.92844,146.495925 293.984847,146.078391 C294.022452,145.827287 294.063818,145.582023 294.097662,145.327999 C294.105183,145.252084 294.112704,145.173249 294.120225,145.097333 C294.176633,144.662281 294.221759,144.218469 294.266885,143.774657 C294.30073,143.441798 294.342095,143.117699 294.372179,142.78192 Z"
+            id="路径" fill="#474747" fill-rule="nonzero"
+            transform="translate(269.1918, 135.259) rotate(-3) translate(-269.1918, -135.259)"></path>
+        <polygon id="路径" fill="#31665A" fill-rule="nonzero"
+            transform="translate(171.8865, 136.0735) rotate(-7) translate(-171.8865, -136.0735)"
+            points="181.886474 148.673244 173.296645 148.673244 173.296645 87.0734549 161.886474 87.0734549 161.886474 148.673244 170.47362 148.673244 170.47362 164.763566 161.886474 164.763566 161.886474 185.073455 173.296645 185.073455 173.296645 164.763566 181.886474 164.763566">
+        </polygon>
+        <path
+            d="M129.237516,114.972158 C129.148062,115.283291 129.052837,115.589562 128.960498,115.895834 C128.709451,116.72228 128.452633,117.539003 128.187157,118.355727 C128.097704,118.627968 128.011136,118.905071 127.921682,119.177312 C127.569639,120.232246 127.206053,121.28718 126.830926,122.332392 C126.793413,122.439344 126.753014,122.546296 126.712616,122.653247 C126.317289,123.747073 125.907534,124.831176 125.48335,125.905557 L111.421822,161.749018 L123.691393,161.749018 L137.752921,125.905557 C138.17999,124.831176 138.58686,123.742212 138.985072,122.653247 C139.022585,122.546296 139.062984,122.439344 139.103382,122.332392 C139.126467,122.264332 139.152437,122.196271 139.175522,122.128211 C139.527565,121.15106 139.86518,120.169047 140.194139,119.177312 C140.283592,118.905071 140.37016,118.632829 140.459614,118.355727 C140.725089,117.539003 140.981908,116.717419 141.232955,115.895834 C141.325294,115.589562 141.417633,115.283291 141.507087,114.97702 C141.824503,113.907501 142.133262,112.82826 142.421822,111.749018 L130.152251,111.749018 C129.860805,112.82826 129.554932,113.90264 129.237516,114.972158 Z"
+            id="路径" fill="#31665A" fill-rule="nonzero"
+            transform="translate(126.9218, 136.749) rotate(9) translate(-126.9218, -136.749)"></path>
+        <path
+            d="M355.782491,88.0165493 C355.615126,88.3027914 355.436963,88.584561 355.2642,88.8663306 C354.794499,89.6266611 354.314,90.3780466 353.817304,91.1294322 C353.649939,91.379894 353.487973,91.6348284 353.320609,91.8852902 C352.661947,92.8558298 351.98169,93.8263694 351.279838,94.787964 C351.209653,94.8863597 351.134069,94.9847554 351.058484,95.0831512 C350.31884,96.0894711 349.552201,97.0868459 348.758568,98.0752756 L322.449902,131.05126 L345.405873,131.05126 L371.71454,98.0752756 C372.513571,97.0868459 373.274811,96.0849985 374.019855,95.0831512 C374.09004,94.9847554 374.165624,94.8863597 374.241208,94.787964 C374.284399,94.7253485 374.332989,94.6627331 374.37618,94.6001176 C375.034841,93.7011385 375.666508,92.7976869 376.281979,91.8852902 C376.449344,91.6348284 376.61131,91.3843665 376.778674,91.1294322 C377.27537,90.3780466 377.755869,89.6221886 378.22557,88.8663306 C378.398334,88.584561 378.571097,88.3027914 378.738462,88.0210219 C379.332337,87.0370646 379.910016,86.0441624 380.449902,85.0512601 L357.493931,85.0512601 C356.948645,86.0441624 356.376366,87.0325921 355.782491,88.0165493 Z"
+            id="路径" fill="#31665A" fill-rule="nonzero" filter="url(#filter-1)"
+            transform="translate(351.4499, 108.0513) rotate(9) translate(-351.4499, -108.0513)"></path>
+        <path
+            d="M162.266094,153.474933 L176,153.474933 L176,169.565254 L162.266094,169.565254 L162.266094,189.875143 L138.699571,189.875143 L138.699571,169.565254 L90,169.565254 L90,155.150241 L140.025751,91.8751432 L162.266094,91.8751432 L162.266094,153.474933 Z M139.384059,125.088832 C139.637185,119.798534 139.839687,116.728536 140,115.875143 L139.384059,115.875143 C137.447642,119.617511 135.161067,123.2158 132.558083,126.636761 L112,153.875143 L139.000151,153.875143 L139.000151,137.19519 C139.000151,134.420739 139.126714,130.382824 139.384059,125.088832"
+            id="形状" fill="#2E8F79" fill-rule="nonzero"
+            transform="translate(133, 140.8751) rotate(-7) translate(-133, -140.8751)"></path>
+        <path
+            d="M391.266094,126.59979 L405,126.59979 L405,142.690111 L391.266094,142.690111 L391.266094,163 L367.699571,163 L367.699571,142.690111 L319,142.690111 L319,128.275098 L369.025751,65 L391.266094,65 L391.266094,126.59979 Z M368.384059,98.2136885 C368.637185,92.923391 368.839687,89.853393 369,89 L368.384059,89 C366.447642,92.7423683 364.161067,96.3406572 361.558083,99.7616177 L341,127 L368.000151,127 L368.000151,110.320047 C368.000151,107.545596 368.126714,103.50768 368.384059,98.2136885"
+            id="形状" fill="#2E8F79" fill-rule="nonzero" transform="translate(362, 114) rotate(8) translate(-362, -114)">
+        </path>
+        <path
+            d="M278.639003,106.204752 C284.215367,113.00792 287.003548,122.967408 287,136.077375 C287,149.651593 284.30061,159.695755 278.898286,166.218621 C273.495962,172.738567 265.17759,175.99708 253.939619,176 C243.046175,176 234.830806,172.630534 229.297064,165.894522 C223.763322,159.161429 220.996452,149.22238 221,136.077375 C221,122.365926 223.692286,112.257528 229.069747,105.755101 C234.454313,99.2526735 242.74427,96.0029198 253.939619,96 C264.82596,96 273.059087,99.401584 278.639003,106.204752 Z M263.906941,156.785302 C265.955042,152.643592 266.977336,145.897033 266.973832,136.551413 C266.973832,127.104494 265.94099,120.31452 263.878837,116.187282 C261.816684,112.060043 258.503889,109.996424 253.94748,109.999315 C249.299731,109.999315 245.979911,112.062937 243.980992,116.187282 C241.975048,120.31452 240.973832,127.104494 240.973832,136.551413 C240.973832,146.004121 241.964509,152.773835 243.945862,156.863448 C245.927215,160.955955 249.261088,162.999315 253.94748,162.999315 C258.542533,162.999315 261.865866,160.929907 263.906941,156.785302"
+            id="形状" fill="#2C2C2C" fill-rule="nonzero" transform="translate(254, 136) rotate(-3) translate(-254, -136)">
+        </path>
+        <g id="预热中" transform="translate(175, 34.5) rotate(19) translate(-175, -34.5)translate(162, 18)" fill="#2E8F79"
+            fill-rule="nonzero">
+            <path
+                d="M9.66121167,33 C9.66121167,33 -4.78780299,29.7806667 1.65457451,13.805 C1.65457451,13.805 3.14099187,15.576 2.91858528,16.4376667 C2.91858528,16.4376667 4.06768599,12.4043333 6.54010589,9.999 C8.6640888,7.92366667 10.8288463,2.101 8.8383073,0 C8.8383073,0 18.7057462,2.101 19.7955385,12.6206667 C19.7955385,12.6206667 21.0595493,9.26933333 23.6468793,8.94666667 C23.1490663,10.4410345 23.1490663,12.0539655 23.6468793,13.5483333 C23.6468793,13.5483333 31.8203214,27.742 17.7012098,32.5416667 C17.7012098,32.5416667 21.9232282,27.676 12.9676563,19.3123333 C12.9676563,19.3123333 10.8547937,23.782 9.5944897,25.3623333 C9.5944897,25.3623333 6.07305206,29.3773333 9.5944897,32.9853333 L9.66121167,33 Z"
+                id="路径"></path>
+        </g>
+        <g id="cluster" transform="translate(472.3758, 65.3019)" fill="#1C293A" fill-rule="nonzero">
+            <path
+                d="M22.2179953,12.9838205 L22.2179953,16.1302119 C28.0624324,16.5512048 32.9192647,20.317993 34.6572002,25.4124133 L36.4367551,25.4124133 C37.6448601,25.4124133 38.6242355,26.3398206 38.6242355,27.4838205 L38.6242355,31.6266723 C38.6242355,32.7707096 37.6448601,33.6981169 36.4367551,33.6981169 L32.0617551,33.6981169 C30.8536108,33.6981169 29.8742355,32.7707096 29.8742355,31.6266723 L29.8742355,27.4838578 C29.8742355,26.3398206 30.8536108,25.4124133 32.0617551,25.4124133 L32.3353329,25.4124133 C30.7116638,21.4754158 26.842003,18.6034472 22.2179953,18.2088153 L22.2179953,25.4124133 L23.3117551,25.4124133 C24.5198601,25.4124133 25.4992355,26.3398206 25.4992355,27.4838205 L25.4992355,31.6266723 C25.4992355,32.7707096 24.5198601,33.6981169 23.3117551,33.6981169 L18.9367158,33.6981169 C17.7286108,33.6981169 16.7492355,32.7707096 16.7492355,31.6266723 L16.7492355,27.4838578 C16.7492355,26.3398206 17.7286108,25.4124133 18.9367158,25.4124133 L20.0304756,25.4124133 L20.0304756,18.2088153 C15.4064679,18.6034472 11.5368071,21.4754158 9.91313799,25.4124133 L10.1867158,25.4124133 C11.3948601,25.4124133 12.3742355,26.3398206 12.3742355,27.4838205 L12.3742355,31.6266723 C12.3742355,32.7707096 11.3948601,33.6981169 10.1867158,33.6981169 L5.81175514,33.6981169 C4.60361081,33.6981169 3.62423545,32.7707096 3.62423545,31.6266723 L3.62423545,27.4838578 C3.62423545,26.3398206 4.60361081,25.4124133 5.81171577,25.4124133 L7.59127067,25.4124133 C9.32920616,20.317993 14.1860385,16.5512048 20.0304756,16.1302119 L20.0304756,12.9838205 L18.9367158,12.9838205 C17.7286108,12.9838205 16.7492355,12.0564132 16.7492355,10.9124133 L16.7492355,6.76956144 C16.7492355,5.62552419 17.7286108,4.69811689 18.9367158,4.69811689 L23.3117551,4.69811689 C24.5198601,4.69811689 25.4992355,5.62552419 25.4992355,6.76956144 L25.4992355,10.912376 C25.4992355,12.0564132 24.5198601,12.9838205 23.3117551,12.9838205 L22.2179953,12.9838205 L22.2179953,12.9838205 Z"
+                id="路径" transform="translate(21.1242, 19.1981) rotate(-18) translate(-21.1242, -19.1981)"></path>
+        </g>
+        <g id="提供服务-(1)" transform="translate(420, 27) rotate(11) translate(-420, -27)translate(405, 12)" fill="#2E8F79"
+            fill-rule="nonzero">
+            <path
+                d="M6.96249999,0.00187470455 C3.11721743,0.00187470455 0,3.11876756 0,6.96364962 C0,10.8085317 3.11721743,13.9254244 6.96249999,13.9254244 L13.92875,13.9254244 L13.92875,6.96364962 C13.9284185,5.11694065 13.1944219,3.34599974 11.888231,2.0404137 C10.5820401,0.734827666 8.81065135,0.00154330496 6.96375001,0.00187470455 L6.96249999,0.00187470455 L6.96249999,0.00187470455 Z M30,6.96364962 C30,3.11773213 26.8819431,0 23.035625,0 C19.1893069,0 16.07125,3.11773213 16.07125,6.96364962 L16.07125,13.9254244 L23.0375,13.9254244 C26.8827826,13.9254244 30,10.8085317 30,6.96364962 Z M0,23.0357254 C0,26.8809526 3.11749725,29.9981252 6.963125,29.9981252 C10.8087528,29.9981252 13.92625,26.8809526 13.92625,23.0357254 L13.92625,16.0739506 L6.96249999,16.0739506 C3.11770554,16.0739506 0.000690279091,19.1900816 0,23.0344755 L0,23.0357254 Z M23.03375,16.0739506 L16.0687499,16.0739506 L16.0687499,23.0357254 C16.0680597,26.8812977 19.1852771,29.9993095 23.0312499,29.9999999 C26.8772228,30.00069 29.9955594,26.8837974 29.9962499,23.0382251 C29.9969402,19.1926528 26.8797228,16.074641 23.03375,16.0739506 L23.03375,16.0739506 Z"
+                id="形状"></path>
+        </g>
+        <g id="版本" transform="translate(289, 50)" fill="#1C293A" fill-rule="nonzero">
+            <path
+                d="M30.1134744,17.6300744 L16.9609932,23.9451004 C15.7025289,24.5315354 15.2015045,24.5315354 14.0390068,23.9451004 L0.886555886,17.6300744 C0.189057248,17.2341663 0,15.7680789 0,14.9683509 C0.878987541,15.5036019 2.11202224,16.1013393 2.06706628,16.0708227 L15.5,22.6855247 L28.9329337,16.0708227 C28.9568497,16.0645256 30.1540104,15.4202868 31,14.9683509 C31,15.7871316 30.7614761,17.3061789 30.1134744,17.6300744 L30.1134744,17.6300744 Z M30.1134744,11.0136286 L16.9609932,17.3303984 C15.7025289,17.9152187 15.2015045,17.9152187 14.0390068,17.3303984 L0.886555886,11.0136286 C-0.145554403,10.4288083 -0.11397927,8.58441231 0.886555886,7.89535125 L14.0390068,0.477788812 C15.2015045,-0.142327391 15.9274601,-0.175976356 16.9609932,0.477788812 L30.1134441,7.89535125 C31.1140095,8.48188307 31.0810116,10.5329522 30.1134744,11.0136286 L30.1134744,11.0136286 Z M15.5,1.73736453 C15.6126485,1.78073815 15.6525349,1.95452454 15.5,1.73736453 L15.5,1.73736453 Z M15.5,29.3019705 L28.9329337,22.6854924 C28.9568497,22.6806485 30.1540104,22.0349565 31,21.5830206 C31,22.4019628 30.7614458,23.9226247 30.1134441,24.2445827 L16.9609932,30.5613848 C15.7025289,31.1462051 15.2015045,31.1462051 14.0390068,30.5613848 L0.886555886,24.244615 C0.189057248,23.8490297 0,22.3842341 0,21.5830206 C0.878987541,22.1199185 2.11202224,22.7160413 2.06706628,22.6855247 L15.5,29.3019705 L15.5,29.3019705 Z"
+                id="形状"></path>
+        </g>
+        <g id="15安全" transform="translate(39, 57) rotate(-9) translate(-39, -57)translate(8, 28)" fill-rule="nonzero">
+            <g id="bg" fill="#2E8F79">
+                <path
+                    d="M32.8053143,55.7584099 C45.6027678,58.4673821 61.7264902,45.0735044 62,28.9642687 C61.2293819,13.1641404 48.5871178,-0.112390628 31.430588,0.000717425236 C14.2740583,0.113825479 2.98351726,16.7369528 2.23590242,28.9642687 C1.36332701,42.8958097 15.3721279,54.3387555 32.8053143,55.7584099 Z"
+                    id="1" opacity="0.200000003"></path>
+                <path
+                    d="M27.4654482,57.9776186 C42.2260461,58.6213044 55.2553298,45.2611206 54.9308964,33.3500578 C53.3941336,17.7573702 42.6341964,5.4950478 27.4654482,6.57439838 C12.2967,7.65374898 0,18.6798836 0,31.2019591 C0.404406342,41.1896852 12.8418015,56.2468992 27.4654482,57.9776186 Z"
+                    id="2" opacity="0.300000012"></path>
+                <path
+                    d="M29.4187643,52.8312608 C46.5745539,55.7582322 58.4150068,42.9672866 58.3480567,28.9243337 C59.4147307,15.6705233 42.9546215,1.34068325 27.7750125,1.81952215 C11.8725943,1.81952215 2.02971657,13.786173 2.19939487,26.3136557 C3.06435426,33.0966257 6.84983704,50.3645724 29.4187643,52.8312608 Z"
+                    id="3" opacity="0.400000006"></path>
+                <path
+                    d="M27.3330137,52.2793115 C42.6638375,55.3008656 54.6588028,51.4746036 54.4915449,28.9270945 C51.1110551,12.1572385 38.5561637,6.27883381 28.5640661,6.37614919 C10.3981525,7.08445923 3.35655869,16.7831616 2.63658513,28.9270945 C3.85514851,36.1076198 10.9032477,50.5639166 27.3330137,52.2793115 Z"
+                    id="4" opacity="0.400000006"></path>
+                <path
+                    d="M27.6512699,46.8505602 C42.2624687,44.9186368 52.1105816,36.1303502 52.3494109,25.9807095 C54.1698754,11.3179076 43.2535869,3.26983689 28.7498879,4.0261536 C15.7141675,7.02246237 8.41814291,14.9706748 6.6151887,25.9807095 C6.59842333,35.4672271 5.16509208,50.6098628 27.6512699,46.8505602 Z"
+                    id="5" opacity="0.600000024"></path>
+            </g>
+            <path
+                d="M30.99998,27.6608975 L30.99998,45.4901961 C30.7933899,45.4386245 30.5895984,45.3780335 30.3892955,45.3086341 L30.2695383,45.2659392 C30.0378148,45.1804946 29.8163752,45.0730304 29.6088007,44.9452875 L29.6080817,44.9453916 C28.5688218,44.2169083 27.5460873,43.4686298 26.5405305,42.7010434 L26.1642532,42.4122944 C25.2669509,41.7221075 24.412728,40.9857522 23.6056604,40.2067644 L23.4334398,40.0391865 C22.7056961,39.3246144 22.0440781,38.5552949 21.4554524,37.7392937 L21.3459411,37.585747 C20.7755698,36.7670424 20.2867146,35.9025722 19.8852848,35.0029183 L19.8153519,34.8437902 C19.3666848,33.7995744 19.0175677,32.7212964 18.7719689,31.6212066 C18.5047689,30.4564098 18.3021898,29.1356363 18.1627812,27.6608975 L30.99998,27.6608975 Z M31,13.6470588 L31,25.5761847 L18.0241074,25.5761847 C17.977638,24.6992389 17.9427859,23.7854758 17.919551,22.8342273 C17.8956135,21.8136234 17.8839947,20.7926879 17.8846409,19.7717303 C17.8846409,19.5024866 18.1129702,19.3288495 18.5701791,19.2500972 L18.6151374,19.2427726 C19.1254996,19.1676505 19.6376298,19.1031997 20.151134,19.0494679 L20.4594001,19.0185154 C21.2779866,18.9316402 22.0907463,18.803139 22.8939557,18.633599 C23.7415232,18.458519 24.5461249,18.1311857 25.3077638,17.6498112 L25.398954,17.5913068 C25.8981043,17.285482 26.3744437,16.949232 26.8247953,16.5848289 L26.9470028,16.484724 L27.6332176,15.9150333 L27.6332176,15.9150333 L28.3207609,15.346702 C28.6882244,15.0424503 29.0674298,14.7505016 29.4576359,14.4714235 L29.6255385,14.3526082 C30.0448501,14.0581916 30.5076929,13.8206016 31,13.6470588 Z"
+                id="形状结合" fill="url(#linearGradient-2)"></path>
+            <path
+                d="M32.1929949,26.1568627 L44.1153846,26.1568627 C44.0068946,27.7417197 43.8394127,29.1496006 43.6122626,30.3783461 C43.3844332,31.6078131 43.0921868,32.7336821 42.7348496,33.7559602 L42.7348494,33.7559606 C42.3897839,34.7522521 41.9432314,35.7055986 41.4031316,36.5990543 L41.4031318,36.5990542 C40.8398963,37.517198 40.2098662,38.3872135 39.5187945,39.2011491 L39.5187955,39.2011479 C38.7211323,40.1398116 37.8809226,41.0367712 37.0011448,41.8888499 L37.0011528,41.8888421 C35.9371919,42.926005 34.8653864,43.9540764 33.7858289,44.9729518 L33.7858289,44.9729518 C33.2917749,45.2545964 32.7503179,45.4303494 32.1923077,45.4901961 L32.1923077,26.1568627"
+                id="路径" fill="#FFFFFF"></path>
+            <path
+                d="M37.2063551,17.2339831 L37.2063553,17.2339833 C37.8528349,17.6745038 38.596078,17.9703654 39.3802954,18.0993618 C40.1759417,18.2327108 40.9240125,18.3216102 41.6252351,18.3653653 C42.3264578,18.4098148 42.9171545,18.4487084 43.3965948,18.4820457 C43.8753009,18.5153829 44.1153846,18.6424812 44.1153846,18.864034 C44.1153846,21.1712485 44.0802502,23.2228796 44.0099814,25.0196078 L31,25.0196078 L31,12.5098039 C31.5841092,12.643153 32.1345491,12.8917922 32.6483893,13.258502 L32.6483904,13.2585027 C33.1752277,13.6347449 33.6732406,14.0460106 34.1386682,14.4892007 C34.618105,14.9441143 35.1033986,15.4156997 35.5938184,15.9032569 C36.0849691,16.3915076 36.6229643,16.8353099 37.2070735,17.23397"
+                id="路径" fill="#FFFFFF"></path>
+        </g>
+        <g id="孵化器1" transform="translate(348, 205) rotate(6) translate(-348, -205)translate(333, 190)" fill="#2E8F79"
+            fill-rule="nonzero">
+            <path
+                d="M15,0 C4.995,0 0,4.995 0,15 C0,25.005 4.995,30 15,30 C25.005,30 30,25.005 30,15 C30,4.995 25.005,0 15,0 Z M19.59,8.85 C19.785,8.655 20.1,8.655 20.295,8.85 L20.31,8.865 C20.49,9.06 20.49,9.345 20.295,9.525 L19.035,10.74 C18.825,10.485 18.6,10.26 18.345,10.035 L19.59,8.85 Z M14.49,7.605 C14.49,7.335 14.715,7.125 14.985,7.125 C15.255,7.125 15.48,7.335 15.48,7.605 L15.48,9.24 C15.315,9.225 15.165,9.21 15,9.21 L14.97,9.21 C14.805,9.21 14.64,9.21 14.49,9.24 L14.49,7.605 L14.49,7.605 Z M9.705,8.85 C9.9,8.655 10.215,8.655 10.41,8.85 L11.655,10.05 C11.4,10.26 11.175,10.5 10.965,10.755 L9.705,9.54 L9.69,9.525 C9.51,9.33 9.51,9.03 9.705,8.85 Z M7.5,13.95 C7.5,13.68 7.725,13.47 7.995,13.47 L9.78,13.47 C9.75,13.695 9.735,13.92 9.735,14.145 L9.735,14.415 L7.995,14.415 C7.725,14.43 7.5,14.22 7.5,13.95 L7.5,13.95 Z M10.41,19.05 C10.215,19.23 9.9,19.23 9.705,19.05 L9.69,19.035 C9.51,18.84 9.51,18.555 9.705,18.375 L10.695,17.43 C10.89,17.715 11.115,17.955 11.325,18.18 L10.41,19.05 Z M16.275,22.875 L13.725,22.875 C13.455,22.875 13.245,22.665 13.245,22.41 C13.245,22.155 13.455,21.96 13.725,21.96 L16.275,21.96 C16.53,21.96 16.755,22.155 16.755,22.41 C16.755,22.665 16.545,22.875 16.275,22.875 Z M16.275,21.72 L13.725,21.72 C13.455,21.72 13.245,21.525 13.245,21.27 C13.245,21.015 13.455,20.805 13.725,20.805 L16.275,20.805 C16.53,20.805 16.755,21 16.755,21.27 C16.755,21.51 16.545,21.72 16.275,21.72 Z M17.565,18.135 C17.505,18.21 17.49,18.285 17.475,18.33 C17.385,18.735 17.385,19.26 17.385,19.38 L17.385,19.41 C17.385,19.995 16.89,20.475 16.275,20.475 L15.345,20.475 L15.345,16.32 L16.575,15.12 L16.59,15.105 C16.725,14.955 16.725,14.73 16.575,14.595 C16.425,14.445 16.185,14.445 16.035,14.595 L14.955,15.645 L13.875,14.595 C13.725,14.445 13.485,14.445 13.335,14.595 L13.32,14.61 C13.185,14.76 13.185,14.985 13.335,15.12 L14.565,16.32 L14.565,20.475 L13.71,20.475 C13.095,20.475 12.6,19.995 12.6,19.41 L12.6,19.365 C12.6,19.245 12.6,18.72 12.51,18.315 C12.495,18.24 12.435,18.135 12.33,17.985 C12.225,17.85 12.06,17.685 11.88,17.505 C11.505,17.13 11.055,16.635 10.755,15.915 C10.56,15.435 10.425,14.85 10.425,14.13 C10.425,13.14 10.77,12.225 11.355,11.475 C11.88,10.815 12.57,10.305 13.365,10.02 L13.365,9.99 L13.695,9.9 C13.965,9.825 14.235,9.78 14.52,9.75 L14.565,9.75 C14.7,9.765 14.85,9.75 14.985,9.75 L15.015,9.75 C15.165,9.75 15.315,9.765 15.45,9.78 L15.495,9.78 C15.765,9.81 16.05,9.855 16.32,9.93 L16.665,10.035 L16.665,10.065 C17.46,10.35 18.15,10.86 18.66,11.52 C19.245,12.255 19.59,13.17 19.59,14.175 C19.59,15.105 19.365,15.825 19.05,16.38 C18.735,16.935 18.345,17.325 18.045,17.64 C17.82,17.82 17.655,18 17.565,18.135 L17.565,18.135 Z M20.295,19.05 C20.1,19.23 19.785,19.23 19.59,19.05 L18.675,18.18 C18.885,17.955 19.095,17.715 19.305,17.43 L20.295,18.375 L20.31,18.39 C20.49,18.57 20.49,18.87 20.295,19.05 Z M22.005,14.43 L20.265,14.43 L20.265,14.16 C20.265,13.935 20.25,13.71 20.22,13.485 L22.005,13.485 C22.275,13.485 22.5,13.695 22.5,13.965 C22.5,14.22 22.275,14.43 22.005,14.43 L22.005,14.43 Z"
+                id="形状"></path>
+        </g>
+        <g id="沙箱环境" transform="translate(215, 228) rotate(-4) translate(-215, -228)translate(201, 213)" fill="#2E8F79"
+            fill-rule="nonzero">
+            <path
+                d="M0,9.57479831 L12.4855308,16.355391 L12.4855308,30 L0.341488057,23.2679094 C0.133152954,23.1528846 0.00452838685,22.9399082 0.00404127878,22.7091653 L0.00404127878,9.57479831 L0,9.57479831 Z M27.9979794,10.2227863 L28,22.7091653 C28,22.9400352 27.8726997,23.1534445 27.6645739,23.2679094 L15.851916,29.813752 L15.851916,16.2021244 L27.9979794,10.2227863 Z M14.6738832,0.173152474 L27.0705059,7.04492911 L14.0212167,13.4782468 L1.54780977,6.70153428 L13.3281374,0.173152474 C13.7443891,-0.0577174915 14.2576315,-0.0577174915 14.6738832,0.173152474 Z"
+                id="形状"></path>
+        </g>
+        <g id="token-(1)" transform="translate(49, 219) rotate(5) translate(-49, -219)translate(31, 196)" fill="#2C2C2C"
+            fill-rule="nonzero">
+            <path
+                d="M13.773913,17.6438356 C13.773913,20.1643836 15.8086957,22.2123288 18.3130435,22.2123288 C20.8173913,22.2123288 22.8521739,20.1643836 22.8521739,17.6438356 C22.8521739,15.1232877 20.8173913,13.0753425 18.3130435,13.0753425 C15.8086957,13.0753425 13.773913,15.1232877 13.773913,17.6438356 L13.773913,17.6438356 Z"
+                id="路径"></path>
+            <path
+                d="M18,0 C12.0521739,4.09589041 5.94782609,6.14383562 0,6.14383562 L0,20.6369863 C0,28.8287671 4.06956522,36.390411 10.6434783,40.9589041 L18,46 L25.3565217,40.9589041 C31.9304348,36.390411 36,28.6712329 36,20.6369863 L36,6.14383562 C29.8956522,6.14383562 23.9478261,4.09589041 18,0 Z M19.7217391,25.2054795 L19.7217391,28.1986301 L24.2608696,28.1986301 L24.2608696,31.3493151 L19.7217391,31.3493151 L19.7217391,36.2328767 L16.7478261,36.2328767 L16.7478261,25.3630137 C13.3043478,24.5753425 10.6434783,21.5821918 10.6434783,17.8013699 C10.6434783,13.5479452 14.0869565,10.0821918 18.3130435,10.0821918 C22.5391304,10.0821918 25.9826087,13.5479452 25.9826087,17.8013699 C25.9826087,21.4246575 23.3217391,24.4178082 19.7217391,25.2054795 Z"
+                id="形状"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/404/background-image.png b/src/assets/images/404/background-image.png
similarity index 100%
rename from public/images/404/background-image.png
rename to src/assets/images/404/background-image.png
diff --git a/public/images/404/logo.svg b/src/assets/images/404/logo.svg
similarity index 100%
rename from public/images/404/logo.svg
rename to src/assets/images/404/logo.svg
diff --git a/src/assets/images/cluster/active.svg b/src/assets/images/cluster/active.svg
new file mode 100644
index 0000000..0ae7918
--- /dev/null
+++ b/src/assets/images/cluster/active.svg
@@ -0,0 +1,22 @@
+<svg width="240px" height="240px" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill-rule="nonzero">
+            <path
+                d="M0,120 C0,162.87187 22.87187,202.487113 60,223.923048 C97.128129,245.358984 142.871871,245.358984 180,223.923048 C217.12813,202.487113 240,162.87187 240,120 C240,53.7258296 186.27417,0 120,0 C53.72583,0 0,53.7258296 0,120 Z"
+                id="路径" fill="currentColor"></path>
+            <path
+                d="M141.17,186.369999 L98.65,186.369999 C95.34,186.369999 92.65,183.679999 92.65,180.369999 C92.65,177.059999 95.34,174.369999 98.65,174.369999 L141.17,174.369999 C144.48,174.369999 147.17,177.059999 147.17,180.369999 C147.17,183.679999 144.48,186.369999 141.17,186.369999 L141.17,186.369999 Z M120.99,53.1699987 C92.8,52.2499987 68.85,75.4099987 68.85,103.619999 C68.85,121.709999 78.37,137.559999 92.66,146.469999 L92.66,157.959999 C92.66,162.779999 96.57,166.679999 101.38,166.679999 L138.12,166.679999 C142.94,166.679999 146.84,162.769999 146.84,157.959999 L146.84,145.919999 C160.66,136.909999 169.800003,121.329999 169.800003,103.609999 C169.81,76.2999987 148.1,54.0499987 120.99,53.1699987 L120.99,53.1699987 Z M105.93,86.8299987 C105.77,86.9899987 97.93,94.5699987 97.5,105.849999 C97.37,109.349999 94.48,112.099999 91.01,112.099999 L90.76,112.099999 C87.1716947,111.95857 84.3753954,108.938566 84.51,105.349999 C85.16,88.4899987 96.6,77.7499987 97.09,77.2999987 C99.7310381,74.8674617 103.843067,75.0330167 106.28,77.6699987 C108.708241,80.2978038 108.551683,84.3951491 105.93,86.8299987 L105.93,86.8299987 Z"
+                id="形状" fill="#FFFFFF"></path>
+            <path
+                d="M163.46,88.8999987 C163.46,85.0999987 163.17,81.3699987 162.65,77.7099987 C154.1,63.4399987 138.7,53.7399987 120.99,53.1699987 C92.8,52.2499987 68.85,75.4099987 68.85,103.619999 C68.85,121.709999 78.37,137.559999 92.66,146.469999 L92.66,157.959999 C92.66,161.769999 95.11,165.009999 98.52,166.189999 C135.41,159.779999 163.46,127.619999 163.46,88.8999987 L163.46,88.8999987 Z M105.93,86.8299987 C105.77,86.9899987 97.93,94.5699987 97.5,105.849999 C97.37,109.349999 94.48,112.099999 91.01,112.099999 L90.76,112.099999 C87.1716947,111.95857 84.3753954,108.938566 84.51,105.349999 C85.16,88.4899987 96.6,77.7499987 97.09,77.2999987 C99.7310381,74.8674617 103.843067,75.0330167 106.28,77.6699987 C108.708241,80.2978038 108.551683,84.3951491 105.93,86.8299987 L105.93,86.8299987 Z"
+                id="形状" fill="#FFFFFF"></path>
+            <path
+                d="M68.85,103.619999 C68.85,116.589999 73.77,128.409999 81.81,137.339999 C116.32,129.089999 141.99,98.0599987 141.99,61.0199987 C141.99,60.1699987 141.95,59.3199987 141.93,58.4699987 C135.422499,55.1990012 128.279803,53.3868791 121,53.1599987 C92.8,52.2499987 68.85,75.4099987 68.85,103.619999 L68.85,103.619999 Z M105.93,86.8299987 C105.77,86.9899987 97.93,94.5699987 97.5,105.849999 C97.37,109.349999 94.48,112.099999 91.01,112.099999 L90.76,112.099999 C87.1716947,111.95857 84.3753954,108.938566 84.51,105.349999 C85.16,88.4899987 96.6,77.7499987 97.09,77.2999987 C99.7310381,74.8674617 103.843067,75.0330167 106.28,77.6699987 C108.708241,80.2978038 108.551683,84.3951491 105.93,86.8299987 L105.93,86.8299987 Z"
+                id="形状" fill="#FFFFFF"></path>
+            <path
+                d="M97.09,77.2999987 C98.6020418,75.906458 100.683656,75.309345 102.704479,75.6894802 C104.725301,76.0696154 106.447667,77.3822919 107.35,79.2299987 C112.96,71.4799987 117.21,62.6699987 119.7,53.1499987 C92.07,52.9899987 68.85,75.8499987 68.85,103.619999 C68.85,104.949999 68.92,106.259999 69.02,107.559999 C74.6548486,105.646664 80.0530716,103.096851 85.11,99.9599987 C87.58,86.2299987 96.66,77.6999987 97.09,77.2999987 L97.09,77.2999987 Z"
+                id="路径" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/cluster/arrow-circle-right.svg b/src/assets/images/cluster/arrow-circle-right.svg
new file mode 100644
index 0000000..358cac5
--- /dev/null
+++ b/src/assets/images/cluster/arrow-circle-right.svg
@@ -0,0 +1,13 @@
+<svg width="166.666667px" height="166.666667px" viewBox="0 0 166.666667 166.666667" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill-rule="nonzero">
+            <path
+                d="M83.3333334,2.77555756e-15 C129.333333,2.77555756e-15 166.666667,37.3333334 166.666667,83.3333334 C166.666667,129.333333 129.333333,166.666667 83.3333334,166.666667 C37.3333334,166.666667 2.77555756e-15,129.333333 2.77555756e-15,83.3333334 C2.77555756e-15,37.3333334 37.3333334,2.77555756e-15 83.3333334,2.77555756e-15 Z"
+                id="形状" fill="currentColor"></path>
+            <polygon id="路径" fill-opacity="0.92" fill="#FFFFFF"
+                points="83.3333334 75 50 75 50 91.6666668 83.3333334 91.6666668 83.3333334 116.666667 116.666667 83.3333334 83.3333334 50">
+            </polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/card-features.svg b/src/assets/images/cluster/card-features.svg
similarity index 100%
rename from public/icons/cluster/card-features.svg
rename to src/assets/images/cluster/card-features.svg
diff --git a/public/icons/cluster/cidrs.svg b/src/assets/images/cluster/cidrs.svg
similarity index 96%
rename from public/icons/cluster/cidrs.svg
rename to src/assets/images/cluster/cidrs.svg
index 9e65dcf..d2c4e21 100644
--- a/public/icons/cluster/cidrs.svg
+++ b/src/assets/images/cluster/cidrs.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024">
-    <path fill="#1c293a"
+    <path fill="currentColor"
         d="M650.9 362.3c-15.6-6.9-38.3-10.3-68.1-10.3h-77v272.8h63.7v-94.2H599c31.1 0 56-8.2 74.6-24.7 18.6-16.5 28-38 28-64.7 0-17.6-4.6-33.4-13.7-47.5-9.1-14-21.5-24.5-37-31.4zm-49.4 108.2h-33.4v-54.3h36.3c23.4 0 35.2 8.8 35.2 26.3-.1 18.7-12.7 28-38.1 28zM370.6 624.9H433V352.1h-62.4v272.8zm554.2-287.3c-22.6-53.3-54.9-101.3-96-142.4-41.2-41.2-89.1-73.5-142.4-96C631.2 75.8 572.5 64 512 64S392.8 75.8 337.6 99.2c-53.3 22.6-101.3 54.9-142.4 96-41.1 41.1-73.5 89.1-96 142.4C75.8 392.8 64 451.5 64 512s11.8 119.2 35.2 174.4c22.6 53.3 54.9 101.3 96 142.4 41.2 41.2 89.1 73.5 142.4 96C392.8 948.2 451.5 960 512 960s119.2-11.8 174.4-35.2c53.3-22.6 101.3-54.9 142.4-96 41.1-41.1 73.5-89.1 96-142.4C948.2 631.2 960 572.5 960 512s-11.8-119.2-35.2-174.4zM793.9 653.7c0 41.1-33.6 74.7-74.7 74.7H304.7c-41.1 0-74.7-33.6-74.7-74.7V317.9c0-41.1 33.6-74.7 74.7-74.7h414.6c41.1 0 74.7 33.6 74.7 74.7v335.8z" />
 </svg>
\ No newline at end of file
diff --git a/public/icons/cluster/selected-cluster.svg b/src/assets/images/cluster/cluster.svg
similarity index 88%
rename from public/icons/cluster/selected-cluster.svg
rename to src/assets/images/cluster/cluster.svg
index dc96533..f2d3ee4 100644
--- a/public/icons/cluster/selected-cluster.svg
+++ b/src/assets/images/cluster/cluster.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024">
-    <path fill="#2e8f79"
+    <path fill="currentColor"
         d="M888 680h-54V540H546v-92h238c8.8 0 16-7.2 16-16V168c0-8.8-7.2-16-16-16H240c-8.8 0-16 7.2-16 16v264c0 8.8 7.2 16 16 16h238v92H190v140h-54c-4.4 0-8 3.6-8 8v176c0 4.4 3.6 8 8 8h176c4.4 0 8-3.6 8-8V688c0-4.4-3.6-8-8-8h-54v-72h220v72h-54c-4.4 0-8 3.6-8 8v176c0 4.4 3.6 8 8 8h176c4.4 0 8-3.6 8-8V688c0-4.4-3.6-8-8-8h-54v-72h220v72h-54c-4.4 0-8 3.6-8 8v176c0 4.4 3.6 8 8 8h176c4.4 0 8-3.6 8-8V688c0-4.4-3.6-8-8-8zM256 805.3c0 1.5-1.2 2.7-2.7 2.7h-58.7c-1.5 0-2.7-1.2-2.7-2.7v-58.7c0-1.5 1.2-2.7 2.7-2.7h58.7c1.5 0 2.7 1.2 2.7 2.7v58.7zm288 0c0 1.5-1.2 2.7-2.7 2.7h-58.7c-1.5 0-2.7-1.2-2.7-2.7v-58.7c0-1.5 1.2-2.7 2.7-2.7h58.7c1.5 0 2.7 1.2 2.7 2.7v58.7zM288 384V216h448v168H288zm544 421.3c0 1.5-1.2 2.7-2.7 2.7h-58.7c-1.5 0-2.7-1.2-2.7-2.7v-58.7c0-1.5 1.2-2.7 2.7-2.7h58.7c1.5 0 2.7 1.2 2.7 2.7v58.7z" />
-    <path fill="#2e8f79" d="M360 300a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z" />
+    <path fill="currentColor" d="M360 300a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z" />
 </svg>
\ No newline at end of file
diff --git a/src/assets/images/cluster/default.svg b/src/assets/images/cluster/default.svg
new file mode 100644
index 0000000..f15be56
--- /dev/null
+++ b/src/assets/images/cluster/default.svg
@@ -0,0 +1,13 @@
+<svg width="180px" height="180px" viewBox="0 0 180 180" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill-rule="nonzero">
+            <path
+                d="M180,90 C180,139.707692 139.707692,180 90,180 C40.2923077,180 0,139.707692 0,90 C0,40.2923077 40.2923077,0 90,0 C139.707692,0 180,40.2923077 180,90 Z"
+                id="路径" fill="currentColor"></path>
+            <path
+                d="M143.4,52.9333332 C147.299378,56.8375672 147.299378,63.1624326 143.4,67.0666666 L83.4,127.066667 C79.495766,130.966045 73.1709006,130.966045 69.2666666,127.066667 L35.9333332,93.7333332 C32.2618822,89.7932031 32.3702156,83.6532039 36.1783764,79.845043 C39.9865373,76.0368822 46.1265365,75.9285489 50.0666666,79.6 L76.3333332,105.853333 L129.266667,52.92 C133.170901,49.0206216 139.495766,49.0206216 143.4,52.92 L143.4,52.9333332 Z"
+                id="路径" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/delete-inactive-error.svg b/src/assets/images/cluster/delete-inactive-error.svg
similarity index 100%
rename from public/icons/cluster/delete-inactive-error.svg
rename to src/assets/images/cluster/delete-inactive-error.svg
diff --git a/public/fonts/cluster/delete-inactive.svg b/src/assets/images/cluster/delete-inactive.svg
similarity index 100%
rename from public/fonts/cluster/delete-inactive.svg
rename to src/assets/images/cluster/delete-inactive.svg
diff --git a/public/icons/cluster/delete-warning.svg b/src/assets/images/cluster/delete-warning.svg
similarity index 100%
rename from public/icons/cluster/delete-warning.svg
rename to src/assets/images/cluster/delete-warning.svg
diff --git a/src/assets/images/cluster/delete.svg b/src/assets/images/cluster/delete.svg
new file mode 100644
index 0000000..547fc77
--- /dev/null
+++ b/src/assets/images/cluster/delete.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024">
+    <path fill="currentColor"
+        d="M755.5 959.5h-485c-9.9 0-18.1-7.7-18.6-17.6L214.6 289c-.6-10.3 7.3-19.1 17.6-19.7 10.5-.4 19.1 7.3 19.7 17.6l36.3 635.3h449.7l36.3-635.3c.6-10.3 9.6-17.9 19.7-17.6 10.3.6 18.1 9.4 17.6 19.7l-37.3 652.8c-.7 9.9-8.8 17.7-18.7 17.7z" />
+    <path fill="currentColor"
+        d="M867.4 288H158.6c-10.3 0-18.7-8.3-18.7-18.7v-74.6c0-9.1 6.6-16.9 15.6-18.4L367.2 141l15.3-62.7c2-8.4 9.5-14.2 18.1-14.2h224.2c8.6 0 16 5.8 18.1 14.1l15.7 62.7 211.8 35.3c9 1.5 15.6 9.3 15.6 18.4v74.6c.1 10.4-8.3 18.8-18.6 18.8zm-690.2-37.3h671.5v-40.2l-208.3-34.7c-7.3-1.2-13.2-6.7-15-13.9l-15.1-60.5h-195l-14.8 60.4c-1.8 7.2-7.7 12.8-15 14l-208.3 34.7v40.2z" />
+    <path fill="#2E8F79"
+        d="M548.8 700.7c-110.6 0-213-34.6-297.3-93.5l19.1 333.6h485l16.6-290.4c-67.8 32.2-143.5 50.3-223.4 50.3z"
+        class="selected" data-spm-anchor-id="a313x.7781069.0.i3" />
+    <path fill="currentColor"
+        d="M755.5 959.5h-485c-9.9 0-18.1-7.7-18.6-17.6l-19.1-333.6c-.4-7.1 3.3-13.9 9.5-17.3 6.2-3.5 13.9-3.1 19.8 1 84.4 59 183.5 90.1 286.6 90.1 75.3 0 147.7-16.3 215.3-48.5 5.9-2.9 13-2.3 18.4 1.3 5.5 3.7 8.6 10 8.2 16.5L774 941.8c-.5 9.9-8.6 17.7-18.5 17.7zm-467.4-37.3h449.7l13.8-242.4c-64.4 26.3-132.5 39.6-203 39.6-98.2 0-193.1-26.3-276.6-76.5l16.1 279.3z" />
+    <path fill="currentColor"
+        d="M625.7 847.5h-.8c-10.3-.4-18.3-9.1-17.9-19.4l18.7-447.7c.4-10.3 8.6-18.6 19.4-17.9 10.3.4 18.3 9.1 17.9 19.4l-18.7 447.7c-.4 10.1-8.6 17.9-18.6 17.9zm-223.8 0c-9.9 0-18.2-7.9-18.6-17.9L364.6 382c-.4-10.3 7.6-19 17.9-19.4 10.4-.8 19 7.6 19.4 17.9l18.7 447.7c.4 10.3-7.6 19-17.9 19.4-.3-.1-.6-.1-.8-.1zm111.9 0c-10.3 0-18.7-8.3-18.7-18.7V381.2c0-10.3 8.4-18.7 18.7-18.7 10.3 0 18.7 8.3 18.7 18.7v447.7c0 10.3-8.4 18.6-18.7 18.6z" />
+</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/features-schedule.svg b/src/assets/images/cluster/features-schedule.svg
similarity index 100%
rename from public/icons/cluster/features-schedule.svg
rename to src/assets/images/cluster/features-schedule.svg
diff --git a/src/assets/images/cluster/features.svg b/src/assets/images/cluster/features.svg
new file mode 100644
index 0000000..cfa12b6
--- /dev/null
+++ b/src/assets/images/cluster/features.svg
@@ -0,0 +1,13 @@
+<svg width="200.064296px" height="199.993276px" viewBox="0 0 200.064296 199.993276" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill-rule="nonzero">
+            <path
+                d="M110.223002,69.1687176 L130.963154,89.9108565 C132.594469,88.235828 134.255588,86.4972159 135.952474,84.7943696 C141.259049,79.4705737 146.573572,74.1547259 151.896044,68.846826 C153.674395,67.0684743 155.383203,65.2126299 157.260904,63.5495233 C158.356917,62.5960362 159.59431,61.8184764 160.928878,61.2446204 C163.351013,60.1954922 165.596307,60.6962123 167.48593,62.5600045 C169.045713,64.0919702 170.581653,65.6457926 172.127527,67.1896803 C180.112559,75.1733871 188.096928,83.1577561 196.080634,91.1427873 C201.397807,96.4639338 201.391846,103.615094 196.064738,108.944188 C167.015014,138.003185 137.967939,167.068805 108.923513,196.141049 C104.154749,200.909814 97.281767,201.084668 92.7931673,197.5836 C92.1975859,197.109291 91.6315636,196.599008 91.0982689,196.055608 C62.0578172,167.02178 33.0193525,137.98464 3.98287476,108.944188 C-0.398427776,104.558912 -1.24488344,98.6893575 1.84090465,93.749712 C2.41441645,92.8598367 3.08627313,92.0373455 3.8437857,91.2977723 C32.986236,62.1354521 62.1359719,32.9817422 91.2929935,3.83664262 C96.4253763,-1.29375328 103.663964,-1.27388336 108.808268,3.8664475 C117.9484,12.993333 127.071312,22.1334651 136.177003,31.2868438 C137.105465,32.2262387 137.903431,33.2861835 138.549464,34.4382024 C139.689993,36.4768493 139.60654,38.6108713 138.287182,40.5461952 C137.369143,41.9211982 136.329055,43.2106683 135.179536,44.3989594 C129.667639,49.9850373 124.121964,55.5379987 118.542509,61.0578438 C115.796495,63.7800135 113.000807,66.4644307 110.223002,69.1687176 Z M162.558206,78.6068975 C158.848505,82.3324948 155.116946,86.0918709 151.373466,89.839325 C146.107955,95.1088099 140.834497,100.371009 135.55309,105.625923 C133.134929,108.024214 130.069011,108.324249 127.24153,106.456483 C126.384252,105.892413 125.585489,105.244084 124.857148,104.521159 C116.864169,96.5467249 108.883111,88.5603689 100.913976,80.5620911 C98.9726914,78.6188196 96.9976281,76.7053528 95.0762134,74.7402243 C92.179189,71.7756422 91.9268418,68.6461405 94.3489767,65.2881354 C95.1796814,64.1335418 96.1005493,63.0465722 97.1029382,62.0374276 C105.004516,54.1133304 112.924639,46.2071161 120.863308,38.3187846 C121.104869,38.109253 121.365657,37.9229759 121.642206,37.7624287 L99.829082,15.9413567 C97.4804654,18.3257389 95.0801873,20.7915877 92.6501045,23.2256448 C75.2295423,40.6634272 57.8056687,58.0972357 40.3784836,75.5270704 C32.490152,83.4193757 24.5938726,91.3063825 16.6896453,99.1880907 C16.4435453,99.3902257 16.1655513,99.5500387 15.8670336,99.6609932 L100.234427,184.018452 L184.212371,100.259076 L162.558206,78.6068975 Z"
+                id="形状" fill="currentColor"></path>
+            <path
+                d="M108.687062,143.891285 C106.78353,143.827701 105.110489,143.227632 103.70569,141.936091 C103.097673,141.375761 102.513499,140.779666 101.937273,140.195492 C87.7475494,126.012391 73.5611371,111.829291 59.3780365,97.6461901 C57.0492898,95.3194303 56.2624437,92.6032215 57.4228429,89.4876287 C59.1256892,84.9175627 64.7905841,83.3279745 68.6830882,86.2786475 C69.0754564,86.58421 69.4465568,86.9161424 69.793813,87.2721401 C84.37696,101.843365 98.9574578,116.423863 113.535306,131.013633 C116.897285,134.377599 116.827741,139.196039 113.398204,142.140751 C112.039106,143.295189 110.435609,143.825714 108.687062,143.891285 L108.687062,143.891285 Z"
+                id="路径" fill="#2E8F79"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/hostnames.svg b/src/assets/images/cluster/hostnames.svg
similarity index 97%
rename from public/icons/cluster/hostnames.svg
rename to src/assets/images/cluster/hostnames.svg
index a0ad10b..656d7aa 100644
--- a/public/icons/cluster/hostnames.svg
+++ b/src/assets/images/cluster/hostnames.svg
@@ -2,5 +2,5 @@
     p-id="18685" width="200" height="200">
     <path
         d="M515.26784 610.21696c-94.2976 0-188.5952 0.02944-282.8928-0.01536-36.80768-0.01792-47.26016-10.54976-47.3024-47.46752-0.04096-33.5424-0.11008-67.0848 0.02432-100.62336 0.10624-26.87872 12.0384-39.27424 38.8032-40.67328 3.78624-0.19712 7.59424-0.05248 11.38944-0.05248 187.32928 0 374.65856-0.01408 561.98784 0.06272 6.90944 0 13.9712 0.16 20.70016 1.5296 18.50496 3.76832 28.56064 15.01312 28.544 34.4448-0.032 36.70528 0.15104 73.4144-0.0256 110.11968-0.14464 30.41664-12.16128 42.56384-42.64064 42.61632-96.19584 0.15744-192.39168 0.05504-288.58752 0.05888z m247.17568-140.4352h-101.43104v92.4032h101.43104v-92.4032zM515.55584 846.5408c-95.57376 0-191.1488 0.03968-286.72384-0.02304-32.77568-0.02304-43.58784-10.60352-43.73376-42.87616-0.15744-35.44192-0.19712-70.89024 0.02048-106.33216 0.1536-25.11872 11.45088-36.91776 36.54528-38.77376 5.04064-0.3712 10.12224-0.19328 15.18464-0.19328 186.08512-0.00768 372.17024-0.00768 558.25664 0.00768 5.69216 0.00384 11.42528-0.18176 17.07136 0.38272 22.88256 2.2912 34.04416 14.05568 34.26176 37.10976 0.34048 36.07552 0.2368 72.15616 0.0576 108.23168-0.15232 31.296-11.21408 42.40384-42.31808 42.43328-96.20608 0.08832-192.41472 0.03328-288.62208 0.03328z m145.36192-141.7472v93.05344h101.27744V704.7936h-101.27744zM513.89056 373.26336c-93.74848 0-187.49568 0.04864-281.24416-0.02176-37.632-0.02944-47.54432-9.8944-47.57504-46.86336-0.02944-33.57312-0.24064-67.14496 0.0704-100.71296 0.26368-28.26368 12.40064-40.50432 40.83968-40.52224 193.1968-0.14848 386.39488-0.14848 579.59168 0 28.39936 0.02304 40.59648 12.28544 40.8832 40.52992 0.34048 33.568 0.10752 67.14368 0.07936 100.7168-0.032 36.92032-9.98912 46.8224-47.60064 46.85184-95.0144 0.0704-190.03136 0.02176-285.04448 0.02176z m248.01664-47.71712v-91.30112h-100.43648v91.30112h100.43648z"
-        p-id="18686" fill="#1c293a"></path>
+        p-id="18686" fill="currentColor"></path>
 </svg>
\ No newline at end of file
diff --git a/public/icons/user/id.svg b/src/assets/images/cluster/id.svg
similarity index 100%
rename from public/icons/user/id.svg
rename to src/assets/images/cluster/id.svg
diff --git a/public/icons/cluster/idc.svg b/src/assets/images/cluster/idc.svg
similarity index 87%
rename from public/icons/cluster/idc.svg
rename to src/assets/images/cluster/idc.svg
index ddbd8e9..6484717 100644
--- a/public/icons/cluster/idc.svg
+++ b/src/assets/images/cluster/idc.svg
@@ -1,7 +1,7 @@
 <svg t="1734951146568" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
     p-id="10977" width="200" height="200">
-    <path d="M0 0h1024v1024H0z" fill="#1c293a" fill-opacity="0" p-id="10978"></path>
+    <path d="M0 0h1024v1024H0z" fill="currentColor" fill-opacity="0" p-id="10978"></path>
     <path
         d="M811.572 648.996l103.703 47.154c10.055 4.573 14.5 16.43 9.928 26.485a20 20 0 0 1-9.928 9.928l-386.718 175.84a40 40 0 0 1-33.114 0l-386.718-175.84c-10.055-4.572-14.5-16.43-9.928-26.485a20 20 0 0 1 9.928-9.928l103.703-47.154 256.212 116.5a104.751 104.751 0 0 0 86.72 0l256.212-116.5z m0.163-201.998l103.441 47.015c10.137 4.607 14.62 16.56 10.012 26.695a20.16 20.16 0 0 1-10.012 10.011l-386.49 175.663a40.326 40.326 0 0 1-33.372 0l-386.49-175.663c-10.137-4.607-14.62-16.56-10.012-26.695a20.16 20.16 0 0 1 10.012-10.01l103.441-47.016 256.352 116.514a104.848 104.848 0 0 0 86.766 0l256.352-116.514zM528.685 115.62l386.491 175.99c10.137 4.616 14.62 16.59 10.012 26.745a20.18 20.18 0 0 1-10.012 10.03l-386.49 175.99a40.258 40.258 0 0 1-33.372 0l-386.49-175.99c-10.137-4.616-14.62-16.59-10.012-26.745a20.18 20.18 0 0 1 10.012-10.03l386.49-175.99a40.258 40.258 0 0 1 33.372 0z"
-        fill="#1c293a" p-id="10979"></path>
+        fill="currentColor" p-id="10979"></path>
 </svg>
\ No newline at end of file
diff --git a/public/fonts/cluster/inactive-total.svg b/src/assets/images/cluster/inactive-total.svg
similarity index 100%
rename from public/fonts/cluster/inactive-total.svg
rename to src/assets/images/cluster/inactive-total.svg
diff --git a/public/icons/cluster/information-cluster.svg b/src/assets/images/cluster/information-cluster.svg
similarity index 88%
rename from public/icons/cluster/information-cluster.svg
rename to src/assets/images/cluster/information-cluster.svg
index 61c5b2e..e09347d 100644
--- a/public/icons/cluster/information-cluster.svg
+++ b/src/assets/images/cluster/information-cluster.svg
@@ -1,36 +1,36 @@
-<svg t="1734940611750" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    p-id="120294" width="200" height="200">
+<svg t="1739968268693" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="20606" width="200" height="200">
     <path
         d="M275.115324 984.404021L54.614285 856.062859 53.931619 600.745866l220.501039 128.341162 0.682666 255.316993z"
-        p-id="120295" fill="#1c293a"></path>
+        p-id="20607" fill="currentColor"></path>
     <path
         d="M275.115324 1023.998635a40.959945 40.959945 0 0 1-19.797307-5.461326L34.816978 887.465483a38.229282 38.229282 0 0 1-20.479973-30.719959V600.745866a40.27728 40.27728 0 0 1 19.797307-34.133288 40.959945 40.959945 0 0 1 39.594614 0l220.501039 128.341162a40.27728 40.27728 0 0 1 19.797307 34.133288v255.316993a38.911948 38.911948 0 0 1-19.797307 34.133288 40.959945 40.959945 0 0 1-19.114641 5.461326z m-181.589091-190.463746l141.994477 82.602556V750.932332L93.526233 669.695107z"
-        p-id="120296" fill="#1c293a"></path>
+        p-id="20608" fill="currentColor"></path>
     <path
         d="M274.432658 768.681642a40.959945 40.959945 0 0 1-19.797307-5.461326L34.134312 634.879153A38.911948 38.911948 0 0 1 14.337005 600.745866a40.27728 40.27728 0 0 1 19.797307-34.133288l221.866371-128.341162a40.959945 40.959945 0 0 1 39.594614 0L516.779002 566.612578a41.642611 41.642611 0 0 1 19.114641 34.133288 39.594614 39.594614 0 0 1-19.114641 34.133287L294.229965 763.220316a40.959945 40.959945 0 0 1-19.797307 5.461326zM132.438181 600.745866L274.432658 682.665756l144.042475-81.91989-142.677143-82.602557z"
-        p-id="120297" fill="#1c293a"></path>
+        p-id="20609" fill="currentColor"></path>
     <path
         d="M275.115324 1023.998635a40.959945 40.959945 0 0 1-19.797307-5.461326 39.594614 39.594614 0 0 1-19.114641-34.133288v-255.316993a40.27728 40.27728 0 0 1 19.797307-34.133288L477.184388 566.612578a39.594614 39.594614 0 0 1 38.911948 0 40.27728 40.27728 0 0 1 19.797307 34.133288v255.316993a36.863951 36.863951 0 0 1-19.114641 34.133287l-221.866371 128.341163a40.959945 40.959945 0 0 1-19.797307 5.461326z m38.911948-273.066303v165.205113l143.359809-83.285222V669.012441z"
-        p-id="120298" fill="#1c293a"></path>
+        p-id="20610" fill="currentColor"></path>
     <path
         d="M747.520027 984.404021l-220.501039-128.341162L526.336322 600.745866l220.50104 128.341162 0.682665 255.316993z"
-        p-id="120299" fill="#1c293a"></path>
+        p-id="20611" fill="currentColor"></path>
     <path
         d="M748.202693 1023.998635a37.546617 37.546617 0 0 1-19.797307-5.461326L507.221681 887.465483a38.229282 38.229282 0 0 1-19.797307-33.450622V600.745866a40.27728 40.27728 0 0 1 19.797307-34.133288 40.959945 40.959945 0 0 1 39.594614 0l218.453042 128.341162a40.27728 40.27728 0 0 1 19.797307 34.133288v255.316993a38.911948 38.911948 0 0 1-19.797307 34.133288 40.959945 40.959945 0 0 1-17.066644 5.461326z m-181.589091-190.463746l141.994477 82.602556V750.932332L565.930936 669.695107z"
-        p-id="120300" fill="#1c293a"></path>
+        p-id="20612" fill="currentColor"></path>
     <path
         d="M746.837362 768.681642a40.959945 40.959945 0 0 1-19.797307-5.461326L506.539015 634.879153a38.911948 38.911948 0 0 1-19.797307-34.133287 40.27728 40.27728 0 0 1 19.797307-34.133288l222.549037-128.341162a40.959945 40.959945 0 0 1 39.594614 0l220.501039 128.341162a40.27728 40.27728 0 0 1 19.797307 34.133288 38.911948 38.911948 0 0 1-19.797307 34.133287L765.269337 763.220316a40.959945 40.959945 0 0 1-18.431975 5.461326zM604.842884 600.745866l142.677143 81.91989 143.359809-83.285222-142.677143-81.237225z"
-        p-id="120301" fill="#1c293a"></path>
+        p-id="20613" fill="currentColor"></path>
     <path
         d="M748.202693 1023.998635a40.959945 40.959945 0 0 1-19.797307-5.461326 38.911948 38.911948 0 0 1-19.797307-34.133288v-255.316993a40.27728 40.27728 0 0 1 19.797307-34.133288L949.589091 566.612578a40.959945 40.959945 0 0 1 39.594614 0 40.27728 40.27728 0 0 1 19.797307 34.133288v255.316993a38.911948 38.911948 0 0 1-19.797307 34.133287L765.269337 1018.537309a40.959945 40.959945 0 0 1-17.066644 5.461326z m38.229282-273.066303v165.205113l143.359809-83.285222V669.012441zM511.317676 551.593931L290.816636 423.252769l-0.682666-255.316993 220.50104 128.341162 0.682666 255.316993z"
-        p-id="120302" fill="#1c293a"></path>
+        p-id="20614" fill="currentColor"></path>
     <path
         d="M511.317676 590.505879A40.27728 40.27728 0 0 1 492.203034 585.727219L271.019329 457.386057a40.27728 40.27728 0 0 1-19.797307-34.133288V167.935776A38.911948 38.911948 0 0 1 270.336664 136.533151a37.546617 37.546617 0 0 1 39.594613 0l220.50104 125.610499a38.229282 38.229282 0 0 1 19.797307 33.450623v255.999658a38.229282 38.229282 0 0 1-39.594614 38.911948zM330.41125 400.042133L471.723062 482.64469v-163.839782L329.728584 236.202352z"
-        p-id="120303" fill="#1c293a"></path>
+        p-id="20615" fill="currentColor"></path>
     <path
         d="M510.63501 335.188886A40.27728 40.27728 0 0 1 492.203034 330.410226L270.336664 204.799727a40.27728 40.27728 0 0 1-19.797307-34.133288 38.911948 38.911948 0 0 1 19.797307-34.133288L492.203034 5.461326a36.181285 36.181285 0 0 1 38.911949 0L752.981353 136.533151a38.911948 38.911948 0 0 1 19.797307 34.133288 40.27728 40.27728 0 0 1-19.797307 34.133288L530.432317 330.410226a40.27728 40.27728 0 0 1-19.797307 4.77866zM368.640532 167.935776l141.994478 82.602557 144.042474-82.602557-142.677143-83.285222z"
-        p-id="120304" fill="#1c293a"></path>
+        p-id="20616" fill="currentColor"></path>
     <path
         d="M511.317676 590.505879A36.181285 36.181285 0 0 1 492.203034 585.727219a40.27728 40.27728 0 0 1-19.797307-34.133288V296.276938a39.594614 39.594614 0 0 1 19.797307-34.133288L713.386739 136.533151a37.546617 37.546617 0 0 1 39.594614 0 41.642611 41.642611 0 0 1 19.797307 34.133288v252.58633a40.27728 40.27728 0 0 1-19.797307 34.133288L531.114983 585.727219a40.27728 40.27728 0 0 1-19.797307 4.77866z m38.911948-273.066302v165.887779L697.002761 400.042133V235.519686z"
-        p-id="120305" fill="#1c293a"></path>
+        p-id="20617" fill="currentColor"></path>
 </svg>
\ No newline at end of file
diff --git a/public/icons/cluster/ip.svg b/src/assets/images/cluster/ip.svg
similarity index 100%
rename from public/icons/cluster/ip.svg
rename to src/assets/images/cluster/ip.svg
diff --git a/public/icons/cluster/location.svg b/src/assets/images/cluster/location.svg
similarity index 81%
rename from public/icons/cluster/location.svg
rename to src/assets/images/cluster/location.svg
index 33e499f..bea4f39 100644
--- a/public/icons/cluster/location.svg
+++ b/src/assets/images/cluster/location.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024">
-    <path fill="#1c293a"
+    <path fill="currentColor"
         d="M364.032 125.312a293.973 293.973 0 0 1 300.117 2.475c91.478 56.832 147.03 158.293 146.518 267.306-2.134 108.374-61.739 210.304-136.235 289.067a799.019 799.019 0 0 1-143.275 120.32 50.048 50.048 0 0 1-17.408 6.144 34.987 34.987 0 0 1-16.64-5.077A789.973 789.973 0 0 1 290.645 611.54a395.947 395.947 0 0 1-77.312-221.824c-.042-109.312 57.472-210.261 150.699-264.405zm53.845 309.675a101.461 101.461 0 0 0 93.782 63.872 99.797 99.797 0 0 0 71.808-29.91c19.029-19.37 29.696-45.653 29.61-73.088A103.381 103.381 0 0 0 550.7 300.16a100.096 100.096 0 0 0-110.678 22.187 104.747 104.747 0 0 0-22.144 112.64z" />
-    <path fill="#1c293a" d="M298.667 896a213.333 42.667 0 1 0 426.666 0 213.333 42.667 0 1 0-426.666 0Z" opacity=".4" />
+    <path fill="currentColor" d="M298.667 896a213.333 42.667 0 1 0 426.666 0 213.333 42.667 0 1 0-426.666 0Z" opacity=".4" />
 </svg>
\ No newline at end of file
diff --git a/public/icons/cluster/name.svg b/src/assets/images/cluster/name.svg
similarity index 100%
rename from public/icons/cluster/name.svg
rename to src/assets/images/cluster/name.svg
diff --git a/public/icons/cluster/no-cluster.svg b/src/assets/images/cluster/no-cluster.svg
similarity index 100%
rename from public/icons/cluster/no-cluster.svg
rename to src/assets/images/cluster/no-cluster.svg
diff --git a/public/icons/cluster/peer/active.svg b/src/assets/images/cluster/peer/active.svg
similarity index 96%
rename from public/icons/cluster/peer/active.svg
rename to src/assets/images/cluster/peer/active.svg
index 2a7cbd7..fb5acd9 100644
--- a/public/icons/cluster/peer/active.svg
+++ b/src/assets/images/cluster/peer/active.svg
@@ -2,5 +2,5 @@
     p-id="53964" width="64" height="64">
     <path
         d="M121.344 455.168c-1.024 0-2.56 0-4.096-0.512-10.752-2.048-17.92-12.8-15.872-23.552 15.872-81.92 55.808-156.16 115.2-215.04s133.632-98.816 215.552-114.176c10.752-2.048 21.504 5.12 23.552 15.872 2.048 10.752-5.12 21.504-15.872 23.552-73.728 14.336-141.312 50.176-195.072 103.424-53.76 53.248-89.6 120.832-103.936 194.56-1.536 9.216-10.24 15.872-19.456 15.872zM443.392 924.16c-1.024 0-2.048 0-3.584-0.512-172.032-29.696-308.224-164.864-338.944-336.384-2.048-10.752 5.12-21.504 15.872-23.552 10.752-2.048 21.504 5.12 23.552 15.872 28.16 155.136 151.552 276.992 306.688 304.128 10.752 1.536 18.432 12.288 16.384 23.04-2.048 10.24-10.24 17.408-19.968 17.408z m135.168 0c-9.728 0-18.432-6.656-19.968-16.896-1.536-10.752 5.632-20.992 16.384-23.04 77.824-13.312 147.968-49.664 204.288-105.472s92.16-126.976 105.472-204.288c1.536-10.752 12.288-18.432 23.04-16.384 10.752 1.536 18.432 12.288 16.384 23.04-14.336 86.016-54.784 163.84-116.224 225.792s-139.776 102.4-225.792 116.736c-1.024 0.512-2.048 0.512-3.584 0.512z m325.12-463.872c-9.728 0-17.92-6.656-19.456-16.384C870.4 368.128 834.56 299.52 780.288 244.736c-54.784-54.784-122.88-91.136-198.656-104.96-10.752-2.048-18.432-12.288-15.872-23.552 2.048-10.752 12.288-18.432 23.552-15.872 83.456 15.36 159.232 55.808 219.648 116.224 60.416 60.416 100.352 136.704 115.2 220.16 2.048 10.752-5.12 21.504-15.872 23.552h-4.608zM259.072 512c0 139.776 113.152 252.928 252.928 252.928S764.928 651.776 764.928 512 651.776 259.072 512 259.072C372.224 258.56 259.072 372.224 259.072 512z"
-        fill="rgb(36,110,93)" p-id="53965"></path>
+        fill="currentColor" p-id="53965"></path>
 </svg>
\ No newline at end of file
diff --git a/src/assets/images/cluster/peer/export-file.svg b/src/assets/images/cluster/peer/export-file.svg
new file mode 100644
index 0000000..309c45c
--- /dev/null
+++ b/src/assets/images/cluster/peer/export-file.svg
@@ -0,0 +1,14 @@
+<svg width="240px" height="240px" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" transform="translate(67, 57)" fill="currentColor" fill-rule="nonzero">
+            <path
+                d="M102.533066,33.1284638 L69.6771667,2.34474918 C68.1421859,0.905925821 66.0955447,0.106579508 63.9392621,0.106579508 L12.316394,0 C12.316394,0 0,0.781583061 0,11.7237459 L0,113.276254 C0,113.276254 0.548207449,125 12.316394,125 L92.683606,125 C92.683606,125 105,124.449339 105,113.276254 L105,38.7061248 C105,36.6100611 104.104595,34.6028137 102.533066,33.1284638 Z M69.841629,13.2691488 L91.3679081,33.5903084 L73.9349112,33.5903084 C73.9349112,33.5903084 69.8233554,33.4126759 69.8233554,29.6823931 C69.841629,25.9521103 69.841629,13.2691488 69.841629,13.2691488 Z M96.7951619,113.258491 C96.7951619,117.184169 92.683606,117.166407 92.683606,117.166407 L12.316394,117.166407 C8.47894187,117.166407 8.20483815,113.258491 8.20483815,113.258491 L8.20483815,11.7059827 C8.20483815,8.06451613 12.316394,7.79806736 12.316394,7.79806736 L61.6367908,7.79806736 L61.6367908,29.6646298 C61.6367908,40.5002132 73.9531848,41.3883757 73.9531848,41.3883757 L96.7951619,41.3883757 L96.7951619,113.258491 L96.7951619,113.258491 Z"
+                id="形状"></path>
+            <path
+                d="M26,56.887218 C26,59.0428571 27.861913,60.7744361 30.1478261,60.7744361 L74.8521739,60.7744361 C77.138087,60.7744361 79,59.025188 79,56.887218 C79,54.7492481 77.138087,53 74.8521739,53 L30.1478261,53 C27.861913,53 26,54.7492481 26,56.887218 Z M74.8521739,72.612782 L30.1478261,72.612782 C27.861913,72.612782 26,74.3620301 26,76.5 C26,78.6379699 27.861913,80.387218 30.1478261,80.387218 L74.8521739,80.387218 C77.138087,80.387218 79,78.6379699 79,76.5 C79,74.3620301 77.138087,72.612782 74.8521739,72.612782 Z M74.8521739,92.2255639 L30.1478261,92.2255639 C27.861913,92.2255639 26,93.974812 26,96.112782 C26,98.2507519 27.861913,100 30.1478261,100 L74.8521739,100 C77.138087,100 79,98.2507519 79,96.112782 C79,93.974812 77.138087,92.2255639 74.8521739,92.2255639 Z"
+                id="形状"></path>
+        </g>
+        <rect id="矩形" stroke="#D3D3D3" stroke-width="3" x="1.5" y="1.5" width="237" height="237" rx="28"></rect>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/peer/export.svg b/src/assets/images/cluster/peer/export.svg
similarity index 59%
rename from public/icons/cluster/peer/export.svg
rename to src/assets/images/cluster/peer/export.svg
index ac414cf..24559a6 100644
--- a/public/icons/cluster/peer/export.svg
+++ b/src/assets/images/cluster/peer/export.svg
@@ -1,13 +1,3 @@
-<!-- <svg t="1731406407126" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
-    p-id="22071" width="200" height="200">
-    <path d="M179.2 192h409.6l76.8 102.4h281.6v460.8H179.2v-563.2z" fill="#2e8f79" p-id="22072"
-        data-spm-anchor-id="a313x.search_index.0.i31.43e13a81MrmXsx" class="selected"></path>
-    <path d="M76.8 268.8h435.2l76.8 102.4h281.6v460.8H76.8v-563.2z" fill="#1c293a" p-id="22073"
-        data-spm-anchor-id="a313x.search_index.0.i30.43e13a81MrmXsx" class=""></path>
-    <path
-        d="M281.6 616.0128h-22.4v-112H281.6v112z m44.8 0h-22.4v-112h22.4v112z m67.2 0h-44.8v-112h44.8v112z m268.8-56.0128l-179.2 179.2v-123.2128H416v-112h67.2v-123.1872l179.2 179.2z"
-        fill="#FFFFFF" p-id="22074"></path>
-</svg> -->
 <svg t="1731411519246" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1469"
     width="200" height="200">
     <path
diff --git a/src/assets/images/cluster/peer/git-commits.svg b/src/assets/images/cluster/peer/git-commits.svg
new file mode 100644
index 0000000..61cbced
--- /dev/null
+++ b/src/assets/images/cluster/peer/git-commits.svg
@@ -0,0 +1,16 @@
+<svg width="200px" height="85.333333px" viewBox="0 0 200 85.333333" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill-rule="nonzero">
+            <path
+                d="M170.833333,30 L187.5,30 C194.403559,30 200,35.5964406 200,42.5 C200,49.4035594 194.403559,55 187.5,55 L170.833333,55 C163.929774,55 158.333333,49.4035594 158.333333,42.5 C158.333333,35.5964406 163.929774,30 170.833333,30 L170.833333,30 Z"
+                id="路径" fill="#9CD9AE"></path>
+            <path
+                d="M12.5,30 L29.1666666,30 C36.070226,30 41.6666666,35.5964406 41.6666666,42.5 C41.6666666,49.4035594 36.070226,55 29.1666666,55 L12.5,55 C5.59644063,55 0,49.4035594 0,42.5 C0,35.5964406 5.59644063,30 12.5,30 L12.5,30 Z"
+                id="路径" fill="#9CD9AE"></path>
+            <path
+                d="M99.9999998,68.2666665 C114.138489,68.2666665 125.6,56.8051561 125.6,42.6666666 C125.6,28.5281771 114.138489,17.0666667 99.9999998,17.0666667 C85.8615103,17.0666667 74.3999999,28.5281771 74.3999999,42.6666666 C74.3999999,56.8051561 85.8615103,68.2666665 99.9999998,68.2666665 Z M99.9999998,85.333333 C76.4358506,85.333333 57.3333333,66.2308157 57.3333333,42.6666665 C57.3333333,19.1025173 76.4358506,0 99.9999998,0 C123.564149,0 142.666666,19.1025173 142.666666,42.6666665 C142.666666,66.2308157 123.564149,85.333333 99.9999998,85.333333 Z"
+                id="形状" fill="#2E8F79"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/peer/git-versions.svg b/src/assets/images/cluster/peer/git-versions.svg
similarity index 100%
rename from public/icons/cluster/peer/git-versions.svg
rename to src/assets/images/cluster/peer/git-versions.svg
diff --git a/src/assets/images/cluster/peer/refresh-dialog.svg b/src/assets/images/cluster/peer/refresh-dialog.svg
new file mode 100644
index 0000000..ff9e12b
--- /dev/null
+++ b/src/assets/images/cluster/peer/refresh-dialog.svg
@@ -0,0 +1,10 @@
+<svg t="1731409725644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="37638" width="200" height="200">
+    <path
+        d="M336.888708 337.305392c84.795117-84.795117 214.383723-96.878942 312.512716-36.876501-33.33469 32.918006-71.461241 71.252899-71.461241 71.252899-26.876094 32.084639 3.125127 50.835402 18.542421 50.210377h248.343439c9.375381 0 17.084028-7.708647 17.084028-17.29237V158.339776c1.250051-22.500916-23.542625-44.376806-49.168667-19.167446 0 0-42.293388 41.251679-71.252899 70.002848-149.172737-108.962767-359.597965-96.6706-494.395117 38.126551-78.753204 78.753204-115.421363 183.132452-111.046186 286.053307h127.296847c-4.375178-70.21119 19.792472-142.089115 73.544659-196.049644z"
+        fill="currentColor" p-id="37639" data-spm-anchor-id="a313x.search_index.0.i50.43e13a81MrmXsx" class=""></path>
+    <path
+        d="M760.655951 490.644964c4.58352 70.419532-19.792472 142.297457-73.544659 196.049644-84.795117 84.795117-214.383723 96.878942-312.512716 36.876501 33.33469-32.918006 71.461241-71.252899 71.461241-71.252899 26.667752-32.292981-3.333469-50.835402-18.542421-50.210377H179.173957c-9.583723 0-17.29237 7.708647-17.29237 17.084029v246.26002c-1.041709 22.500916 23.750966 44.376806 49.168667 19.167447 0 0 42.293388-41.043337 71.461241-70.002849 149.172737 109.171109 359.597965 96.6706 494.186776-38.126551 78.753204-78.544863 115.421363-182.92411 111.046185-286.053306l-127.088505 0.208341z"
+        fill="#2e8f79" p-id="37640" data-spm-anchor-id="a313x.search_index.0.i51.43e13a81MrmXsx" class="selected">
+    </path>
+</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/peer/refresh-loading.svg b/src/assets/images/cluster/peer/refresh-loading.svg
similarity index 96%
rename from public/icons/cluster/peer/refresh-loading.svg
rename to src/assets/images/cluster/peer/refresh-loading.svg
index eb6b420..42d85fe 100644
--- a/public/icons/cluster/peer/refresh-loading.svg
+++ b/src/assets/images/cluster/peer/refresh-loading.svg
@@ -4,5 +4,5 @@
         repeatCount="indefinite" />
     <path
         d="M936.571429 603.428571q0 2.857143-0.571429 4-36.571429 153.142857-153.142857 248.285714t-273.142857 95.142857q-83.428571 0-161.428571-31.428571t-139.142857-89.714286l-73.714286 73.714286q-10.857143 10.857143-25.714286 10.857143t-25.714286-10.857143-10.857143-25.714286l0-256q0-14.857143 10.857143-25.714286t25.714286-10.857143l256 0q14.857143 0 25.714286 10.857143t10.857143 25.714286-10.857143 25.714286l-78.285714 78.285714q40.571429 37.714286 92 58.285714t106.857143 20.571429q76.571429 0 142.857143-37.142857t106.285714-102.285714q6.285714-9.714286 30.285714-66.857143 4.571429-13.142857 17.142857-13.142857l109.714286 0q7.428571 0 12.857143 5.428571t5.428571 12.857143zm14.285714-457.142857l0 256q0 14.857143-10.857143 25.714286t-25.714286 10.857143l-256 0q-14.857143 0-25.714286-10.857143t-10.857143-25.714286 10.857143-25.714286l78.857143-78.857143q-84.571429-78.285714-199.428571-78.285714-76.571429 0-142.857143 37.142857t-106.285714 102.285714q-6.285714 9.714286-30.285714 66.857143-4.571429 13.142857-17.142857 13.142857l-113.714286 0q-7.428571 0-12.857143-5.428571t-5.428571-12.857143l0-4q37.142857-153.142857 154.285714-248.285714t274.285714-95.142857q83.428571 0 162.285714 31.714286t140 89.428571l74.285714-73.714286q10.857143-10.857143 25.714286-10.857143t25.714286 10.857143 10.857143 25.714286z"
-        p-id="26636" fill="#ffffff"></path>
+        p-id="26636" fill="currentColor"></path>
 </svg>
\ No newline at end of file
diff --git a/public/icons/cluster/peer/refresh.svg b/src/assets/images/cluster/peer/refresh.svg
similarity index 96%
rename from public/icons/cluster/peer/refresh.svg
rename to src/assets/images/cluster/peer/refresh.svg
index 041b35a..27c8486 100644
--- a/public/icons/cluster/peer/refresh.svg
+++ b/src/assets/images/cluster/peer/refresh.svg
@@ -2,5 +2,5 @@
     p-id="26635" width="200" height="200">
     <path
         d="M936.571429 603.428571q0 2.857143-0.571429 4-36.571429 153.142857-153.142857 248.285714t-273.142857 95.142857q-83.428571 0-161.428571-31.428571t-139.142857-89.714286l-73.714286 73.714286q-10.857143 10.857143-25.714286 10.857143t-25.714286-10.857143-10.857143-25.714286l0-256q0-14.857143 10.857143-25.714286t25.714286-10.857143l256 0q14.857143 0 25.714286 10.857143t10.857143 25.714286-10.857143 25.714286l-78.285714 78.285714q40.571429 37.714286 92 58.285714t106.857143 20.571429q76.571429 0 142.857143-37.142857t106.285714-102.285714q6.285714-9.714286 30.285714-66.857143 4.571429-13.142857 17.142857-13.142857l109.714286 0q7.428571 0 12.857143 5.428571t5.428571 12.857143zm14.285714-457.142857l0 256q0 14.857143-10.857143 25.714286t-25.714286 10.857143l-256 0q-14.857143 0-25.714286-10.857143t-10.857143-25.714286 10.857143-25.714286l78.857143-78.857143q-84.571429-78.285714-199.428571-78.285714-76.571429 0-142.857143 37.142857t-106.285714 102.285714q-6.285714 9.714286-30.285714 66.857143-4.571429 13.142857-17.142857 13.142857l-113.714286 0q-7.428571 0-12.857143-5.428571t-5.428571-12.857143l0-4q37.142857-153.142857 154.285714-248.285714t274.285714-95.142857q83.428571 0 162.285714 31.714286t140 89.428571l74.285714-73.714286q10.857143-10.857143 25.714286-10.857143t25.714286 10.857143 10.857143 25.714286z"
-        p-id="26636" fill="#ffffff"></path>
+        p-id="26636" fill="currentColor"></path>
 </svg>
\ No newline at end of file
diff --git a/public/icons/cluster/peer/statistics.svg b/src/assets/images/cluster/peer/statistics.svg
similarity index 69%
rename from public/icons/cluster/peer/statistics.svg
rename to src/assets/images/cluster/peer/statistics.svg
index cba51a0..347d005 100644
--- a/public/icons/cluster/peer/statistics.svg
+++ b/src/assets/images/cluster/peer/statistics.svg
@@ -2,18 +2,18 @@
     p-id="57208" width="64" height="64">
     <path
         d="M897.4 892.4h-72.6c-20.6 0-37.5-16.9-37.5-37.5V608.4c0-20.6 16.9-37.5 37.5-37.5h72.6c20.6 0 37.5 16.9 37.5 37.5V855c0 20.6-16.9 37.4-37.5 37.4z"
-        fill="#2e8f79" p-id="57209" data-spm-anchor-id="a313x.search_index.0.i105.5caf3a81aFGzSu" class="selected">
+        fill="currentColor" p-id="57209" data-spm-anchor-id="a313x.search_index.0.i105.5caf3a81aFGzSu" class="selected">
     </path>
     <path
         d="M659.2 892.4h-72.6c-20.6 0-37.5-16.9-37.5-37.5V330.4c0-20.6 16.9-37.5 37.5-37.5h72.6c20.6 0 37.5 16.9 37.5 37.5V855c-0.1 20.6-16.9 37.4-37.5 37.4z"
-        fill="#e6e6e6" p-id="57210" data-spm-anchor-id="a313x.search_index.0.i100.5caf3a81aFGzSu" class=""></path>
+        fill="#dcdcdc" p-id="57210" data-spm-anchor-id="a313x.search_index.0.i100.5caf3a81aFGzSu" class=""></path>
     <path
         d="M420.9 892.4h-72.6c-20.6 0-37.5-16.9-37.5-37.5V82.7c0-20.6 16.9-37.5 37.5-37.5h72.6c20.6 0 37.5 16.9 37.5 37.5V855c-0.1 20.6-16.9 37.4-37.5 37.4z"
-        fill="#2e8f79" p-id="57211" data-spm-anchor-id="a313x.search_index.0.i104.5caf3a81aFGzSu" class="selected">
+        fill="currentColor" p-id="57211" data-spm-anchor-id="a313x.search_index.0.i104.5caf3a81aFGzSu" class="selected">
     </path>
     <path
         d="M182.6 892.4H110c-20.6 0-37.5-16.9-37.5-37.5V506.3c0-20.6 16.9-37.5 37.5-37.5h72.6c20.6 0 37.5 16.9 37.5 37.5V855c0 20.6-16.9 37.4-37.5 37.4z"
-        fill="#e6e6e6" p-id="57212" data-spm-anchor-id="a313x.search_index.0.i101.5caf3a81aFGzSu" class=""></path>
-    <path d="M0.3 939.7h1022.2v37.5H0.3z" fill="#2e8f79" p-id="57213"
+        fill="#dcdcdc" p-id="57212" data-spm-anchor-id="a313x.search_index.0.i101.5caf3a81aFGzSu" class=""></path>
+    <path d="M0.3 939.7h1022.2v37.5H0.3z" fill="currentColor" p-id="57213"
         data-spm-anchor-id="a313x.search_index.0.i106.5caf3a81aFGzSu" class="selected"></path>
 </svg>
\ No newline at end of file
diff --git a/public/icons/cluster/peer/tab-peer.svg b/src/assets/images/cluster/peer/tab-peer.svg
similarity index 98%
rename from public/icons/cluster/peer/tab-peer.svg
rename to src/assets/images/cluster/peer/tab-peer.svg
index 83e808e..6fb9d05 100644
--- a/public/icons/cluster/peer/tab-peer.svg
+++ b/src/assets/images/cluster/peer/tab-peer.svg
@@ -1,7 +1,7 @@
 <svg width="192.569392px" height="179.75px" viewBox="0 0 192.569392 179.75" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="编组" fill="#919EAB" fill-rule="nonzero">
+        <g id="编组" fill="currentColor" fill-rule="nonzero">
             <path
                 d="M118.356892,116.2 C97.1767719,116.2 80.0068921,99.0301202 80.0068921,77.85 C80.0068921,56.6698798 97.1767719,39.5 118.356892,39.5 C139.537012,39.5 156.706892,56.6698798 156.706892,77.85 C156.594099,98.9832234 139.490115,116.087207 118.356892,116.2 L118.356892,116.2 Z"
                 id="形状"></path>
diff --git a/src/assets/images/cluster/peer/total.svg b/src/assets/images/cluster/peer/total.svg
new file mode 100644
index 0000000..5fbdfbe
--- /dev/null
+++ b/src/assets/images/cluster/peer/total.svg
@@ -0,0 +1,16 @@
+<svg width="175.78125px" height="175.781251px" viewBox="0 0 175.78125 175.781251" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill-rule="nonzero">
+            <path
+                d="M0,87.890625 C0,119.290921 16.7518579,148.305992 43.9453121,164.00614 C71.1387663,179.706288 104.642484,179.706288 131.835938,164.00614 C159.029392,148.305992 175.78125,119.290921 175.78125,87.890625 C175.78125,39.3499732 136.431277,0 87.890625,0 C39.3499732,0 0,39.3499732 0,87.890625 Z"
+                id="路径" fill="#B2E4C1"></path>
+            <path
+                d="M83.3203125,46.1328125 L83.1445313,46.1328125 C57.7929688,46.1328125 37.2265625,66.6992187 37.2265625,92.0507812 C37.2265625,117.402344 57.7929688,137.96875 83.1445313,137.96875 C108.457031,137.96875 128.984375,117.5 129.0625,92.2070312 L83.3203125,92.2070312 L83.3203125,46.1328125 Z"
+                id="路径" fill="currentColor"></path>
+            <path
+                d="M92.6367188,37.8125 L92.4414063,37.8125 L92.4414063,83.59375 L138.554688,83.59375 C138.476563,58.3007812 117.949219,37.8125 92.6367188,37.8125 L92.6367188,37.8125 Z"
+                id="路径" fill="currentColor"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/cluster/preheat.svg b/src/assets/images/cluster/preheat.svg
new file mode 100644
index 0000000..1086d07
--- /dev/null
+++ b/src/assets/images/cluster/preheat.svg
@@ -0,0 +1,12 @@
+<svg t="1725980910269" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="162613" width="200" height="200">
+    <path
+        d="M76.16 872.32V151.68c0-41.6 33.92-76.16 75.52-76.16h445.76v94.72c0 83.84 68.48 151.68 151.68 151.68h113.92v154.688h75.52V301.44c0-41.6-14.72-80-43.52-108.16L745.28 43.52c-30.08-28.8-68.48-43.52-108.16-43.52H151.68C68.48 0 0 67.84 0 151.68v720.64C0 955.52 68.48 1024 151.68 1024H512v-76.16H151.68c-41.6 0-75.52-33.92-75.52-75.52z m597.44-787.2c5.12 3.84 10.88 7.68 16.64 13.44l147.84 147.84h-88.96c-41.6 0-75.52-33.92-75.52-76.16V85.12z"
+        fill="#1b283a" p-id="162614"></path>
+    <path
+        d="M855.936 766.464h-30.848c-4.48 0-8.064-3.136-8.064-7.616v-113.984a8 8 0 0 0-8.064-8.064h-50.048a8 8 0 0 0-8.064 8.064v113.984c0 4.48-3.584 7.616-8.064 7.616h-30.4c-5.824 0-9.856 6.272-7.616 11.2l16.576 34.432 55.424 114.432a7.808 7.808 0 0 0 14.336 0l72-148.864c2.24-4.928-1.344-11.2-7.168-11.2z"
+        fill="#1b283a" p-id="162615"></path>
+    <path
+        d="M784 544c-17.984 0-35.968 1.792-52.8 6.016a251.52 251.52 0 0 0-67.2 25.792A240.448 240.448 0 0 0 544 784 239.936 239.936 0 0 0 784 1024 239.936 239.936 0 0 0 1024 784a239.936 239.936 0 0 0-240-240z m0 423.616a183.616 183.616 0 0 1-183.616-183.616c0-55.168 24.576-105.024 63.616-138.624 19.2-16.768 41.984-30.016 67.2-37.184a183.616 183.616 0 1 1 52.8 359.424z"
+        fill="#1b283a" p-id="162616"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/cluster/round.svg b/src/assets/images/cluster/round.svg
new file mode 100644
index 0000000..d291bdf
--- /dev/null
+++ b/src/assets/images/cluster/round.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024">
+    <path fill="currentColor" d="M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512Z" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/cluster/scheduler.svg b/src/assets/images/cluster/scheduler.svg
new file mode 100644
index 0000000..4e536fa
--- /dev/null
+++ b/src/assets/images/cluster/scheduler.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024">
+    <path fill="currentColor"
+        d="M780.04 641.67c64.22 0 116.13-51.91 116.13-116.13s-51.91-116.13-116.13-116.13c-40.47 0-76.54 21.11-96.78 51.91l-90.62-73.9c2.64-9.68 4.4-20.23 4.4-30.79v-2.64l86.22-56.31c21.11 31.67 56.31 51.91 96.78 51.91 64.22 0 116.13-51.91 116.13-116.13s-51.91-117.01-116.13-117.01c-61.58 0-112.61 48.39-116.13 109.09l-91.5 59.82c-21.11-28.15-54.55-45.75-92.38-45.75-64.22 0-116.13 51.91-116.13 116.13 0 13.2 2.64 26.39 7.04 38.71l-62.46 41.35c-21.11-20.23-49.27-32.55-80.94-32.55-65.1 0-117.89 51.91-117.89 116.13s51.91 116.13 116.13 116.13c26.39 0 50.15-8.8 70.38-23.75l71.26 42.23c-2.64 9.68-4.4 20.23-4.4 30.79 0 64.22 51.91 116.13 116.13 116.13 32.55 0 61.58-13.2 82.7-34.31l102.05 51.91c4.4 59.82 54.55 107.33 116.13 107.33 64.22 0 116.13-51.91 116.13-116.13s-51.91-116.13-116.13-116.13c-42.23 0-78.3 21.99-99.41 55.43L594.4 705.9c.88-6.16 1.76-12.32 1.76-19.36 0-10.56-1.76-21.99-4.4-31.67l96.78-56.31c22 26.39 54.55 43.11 91.5 43.11zm0-454.84c25.51 0 45.75 21.11 45.75 45.75s-21.11 45.75-45.75 45.75c-24.63 0-45.75-21.11-45.75-45.75s20.24-45.75 45.75-45.75zm0 576.25c25.51 0 45.75 21.11 45.75 45.75s-21.11 45.75-45.75 45.75c-24.63 0-45.75-21.11-45.75-45.75s20.24-45.75 45.75-45.75zm0-284.17c25.51 0 45.75 21.11 45.75 45.75 0 25.51-21.11 45.75-45.75 45.75-24.63 0-45.75-21.11-45.75-45.75-.87-24.63 20.24-45.75 45.75-45.75zm-439.01 19.36 72.14-46.63c19.36 13.2 42.23 21.99 67.74 21.99 28.15 0 53.67-9.68 73.9-26.39l105.57 87.1-106.44 62.46c-20.23-15.84-45.75-26.39-73.02-26.39-28.15 0-53.67 9.68-73.9 26.39l-69.5-42.23c3.52-11.44 5.28-22.87 5.28-35.19-.01-7.04-.89-14.07-1.77-21.11zm139.01-188.28c25.51 0 45.75 21.11 45.75 45.75 0 24.63-21.11 45.75-45.75 45.75s-45.75-21.11-45.75-45.75c0-24.63 20.24-45.75 45.75-45.75zM226.66 565.13c-25.51 0-45.75-21.11-45.75-45.75 0-25.51 21.11-45.75 45.75-45.75s45.75 21.11 45.75 45.75c0 25.52-20.23 45.75-45.75 45.75zm253.38 167.16c-25.51 0-45.75-21.11-45.75-45.75s21.11-45.75 45.75-45.75 45.75 21.11 45.75 45.75c0 24.63-20.24 45.75-45.75 45.75zm180.35-198.83 3.52-4.4c0 3.52 0 7.04.88 11.44l-4.4-7.04z" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/cluster/scheduler/active.svg b/src/assets/images/cluster/scheduler/active.svg
new file mode 100644
index 0000000..5c56099
--- /dev/null
+++ b/src/assets/images/cluster/scheduler/active.svg
@@ -0,0 +1,11 @@
+<svg width="135px" height="135px" viewBox="0 0 135 135" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="椭圆形" fill="#B2E4C1" cx="67.5" cy="67.5" r="67.5"></circle>
+        <g id="编组" transform="translate(27, 26)" fill="currentColor" fill-rule="nonzero">
+            <path
+                d="M41,0 C18.3453453,0 0,18.3453453 0,41 C0,63.6546547 18.3453453,82 41,82 C63.6546547,82 82,63.6546547 82,41 C82,18.3863864 63.6546547,0 41,0 L41,0 Z M62.956957,38.6606607 C62.7107107,40.7947948 60.9459459,40.6306306 60.9459459,40.6306306 C59.5095095,40.6306306 59.017017,39.4814815 59.017017,39.4814815 L56.0620621,32.955956 L50.6036036,56.5135135 C50.1521522,58.2372372 48.5515516,58.0730731 48.5515516,58.0730731 C47.1561562,58.0730731 46.7047047,56.8828829 46.7047047,56.8828829 L38.988989,38.5375375 L32.7097097,52.983984 C32.012012,54.1331331 30.8628629,54.1331331 30.8628629,54.1331331 C29.5085085,54.1331331 28.9339339,52.983984 28.9339339,52.983984 L24.8708709,45.022022 L20.1511512,50.6446446 C19.6996997,51.4654655 18.4684685,51.4654655 18.4684685,51.4654655 C16.5395395,51.4654655 16.4164164,49.5365365 16.4164164,49.5365365 C16.4164164,48.7567568 16.9499499,48.1411411 16.9499499,48.1411411 L23.6806807,40.2202202 C24.2962963,39.4404404 25.2812813,39.3993994 25.2812813,39.3993994 C26.6356356,39.3993994 27.2102102,40.5895896 27.2102102,40.5895896 L30.6576577,47.4024024 L37.1831832,32.5045045 C37.8398398,31.2732733 38.988989,31.3553554 38.988989,31.3553554 C40.3023023,31.3553554 40.8768769,32.5455455 40.8768769,32.5455455 L48.0590591,49.5365365 L53.3943944,26.3073073 C53.7637638,24.6656657 55.4874875,24.6656657 55.4874875,24.6656657 C56.6776777,24.6656657 57.2932933,25.8148148 57.2932933,25.8148148 L62.7517518,37.9219219 C62.997998,38.045045 62.956957,38.6606607 62.956957,38.6606607 L62.956957,38.6606607 Z"
+                id="形状"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/scheduler/card.svg b/src/assets/images/cluster/scheduler/card.svg
similarity index 100%
rename from public/icons/cluster/scheduler/card.svg
rename to src/assets/images/cluster/scheduler/card.svg
diff --git a/src/assets/images/cluster/scheduler/cluster-id.svg b/src/assets/images/cluster/scheduler/cluster-id.svg
new file mode 100644
index 0000000..655ca79
--- /dev/null
+++ b/src/assets/images/cluster/scheduler/cluster-id.svg
@@ -0,0 +1,7 @@
+<svg t="1734589725752" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="56184" width="200" height="200">
+    <path
+        d="M888 680h-54V540H546v-92h238c8.8 0 16-7.2 16-16V168c0-8.8-7.2-16-16-16H240c-8.8 0-16 7.2-16 16v264c0 8.8 7.2 16 16 16h238v92H190v140h-54c-4.4 0-8 3.6-8 8v176c0 4.4 3.6 8 8 8h176c4.4 0 8-3.6 8-8V688c0-4.4-3.6-8-8-8h-54v-72h220v72h-54c-4.4 0-8 3.6-8 8v176c0 4.4 3.6 8 8 8h176c4.4 0 8-3.6 8-8V688c0-4.4-3.6-8-8-8h-54v-72h220v72h-54c-4.4 0-8 3.6-8 8v176c0 4.4 3.6 8 8 8h176c4.4 0 8-3.6 8-8V688c0-4.4-3.6-8-8-8zM256 805.3c0 1.5-1.2 2.7-2.7 2.7h-58.7c-1.5 0-2.7-1.2-2.7-2.7v-58.7c0-1.5 1.2-2.7 2.7-2.7h58.7c1.5 0 2.7 1.2 2.7 2.7v58.7z m288 0c0 1.5-1.2 2.7-2.7 2.7h-58.7c-1.5 0-2.7-1.2-2.7-2.7v-58.7c0-1.5 1.2-2.7 2.7-2.7h58.7c1.5 0 2.7 1.2 2.7 2.7v58.7zM288 384V216h448v168H288z m544 421.3c0 1.5-1.2 2.7-2.7 2.7h-58.7c-1.5 0-2.7-1.2-2.7-2.7v-58.7c0-1.5 1.2-2.7 2.7-2.7h58.7c1.5 0 2.7 1.2 2.7 2.7v58.7z"
+        p-id="56185" fill="currentColor"></path>
+    <path d="M400 300m-40 0a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z" p-id="56186" fill="#515151"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/cluster/scheduler/created-at.svg b/src/assets/images/cluster/scheduler/created-at.svg
new file mode 100644
index 0000000..93ed18f
--- /dev/null
+++ b/src/assets/images/cluster/scheduler/created-at.svg
@@ -0,0 +1,6 @@
+<svg t="1694488945708" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="39963" width="64" height="64">
+    <path
+        d="M512 895.936c-211.776 0-384-172.224-384-384C128 300.224 300.16 128 512 128c211.648 0 384 172.288 384 384a32 32 0 1 0 64 0C960 264.96 759.04 64 512 64 265.216 64 64 264.96 64 512c0 246.912 201.024 447.936 448 447.936a32 32 0 0 0 0-64zM512 190.912a32 32 0 0 0-32.064 32.064v275.776L361.28 617.344a32 32 0 0 0 45.312 45.248L534.208 535.04a30.912 30.912 0 0 0 5.184-6.72s0-0.128 0.128-0.128l0.64-1.152c0-0.128 0.128-0.128 0.128-0.192l0.64-1.216v-0.192c0.256-0.448 0.512-0.832 0.512-1.216 0-0.064 0.192-0.064 0.192-0.192l0.448-1.28 0.128-0.256c0.064-0.384 0.32-0.768 0.384-1.28l0.128-0.192 0.256-1.28c0-0.128 0-0.192 0.128-0.192a26.24 26.24 0 0 0 0.384-1.664c0.128-0.32 0.128-0.768 0.192-1.152 0-0.192 0-0.32 0.128-0.512l0.064-1.088c0-0.256 0-0.448 0.128-0.704l0.064-0.832v-290.56a32.128 32.128 0 0 0-32.064-32z m415.552 544.96h-127.872v-128a32 32 0 1 0-64.064 0v128h-128a32 32 0 1 0 0 64.064h128.064v128a32 32 0 0 0 64 0v-128.064h128.064a32 32 0 0 0 32.064-32.064 32.32 32.32 0 0 0-32.256-31.936z"
+        fill="currentColor" p-id="39964"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/cluster/scheduler/features.svg b/src/assets/images/cluster/scheduler/features.svg
new file mode 100644
index 0000000..2070445
--- /dev/null
+++ b/src/assets/images/cluster/scheduler/features.svg
@@ -0,0 +1,6 @@
+<svg t="1734589263069" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="48477" width="200" height="200">
+    <path
+        d="M563.126857 354.377143l105.910857 105.984c8.338286-8.557714 16.822857-17.408 25.526857-26.112 27.062857-27.209143 54.272-54.345143 81.408-81.481143 9.142857-9.069714 17.846857-18.578286 27.428572-27.062857a71.606857 71.606857 0 0 1 18.724571-11.776c12.434286-5.339429 23.844571-2.779429 33.499429 6.729143 8.045714 7.826286 15.872 15.725714 23.771428 23.625143l122.368 122.368c27.062857 27.209143 27.062857 63.707429-0.146285 90.916571l-445.147429 445.44c-24.356571 24.429714-59.465143 25.307429-82.432 7.460571a95.085714 95.085714 0 0 1-8.630857-7.826285A3481755.794286 3481755.794286 0 0 1 20.333714 557.568c-22.381714-22.381714-26.697143-52.370286-10.971428-77.531429a72.045714 72.045714 0 0 1 10.24-12.580571L466.505143 20.626286c26.185143-26.185143 63.195429-26.112 89.453714 0.146285C602.550857 67.437714 649.142857 114.102857 695.588571 160.914286c4.754286 4.827429 8.850286 10.24 12.141715 16.091428a28.233143 28.233143 0 0 1-1.316572 31.232 140.873143 140.873143 0 0 1-15.872 19.748572c-28.16 28.525714-56.539429 56.832-84.992 85.065143-14.043429 13.897143-28.306286 27.574857-42.496 41.398857z m267.337143 48.274286l-57.124571 57.344-80.822858 80.676571a31.817143 31.817143 0 0 1-42.422857 4.242286 78.848 78.848 0 0 1-12.214857-9.874286A56587.922286 56587.922286 0 0 1 515.510857 412.525714c-9.874286-9.947429-19.968-19.748571-29.769143-29.769143-14.848-15.140571-16.091429-31.085714-3.730285-48.274285a137.508571 137.508571 0 0 1 14.043428-16.603429c40.374857-40.448 80.822857-80.822857 121.417143-121.124571a25.892571 25.892571 0 0 1 3.949714-2.925715L510.025143 82.578286c-11.995429 12.141714-24.283429 24.722286-36.717714 37.156571a929953.426286 929953.426286 0 0 1-388.022858 388.096 14.628571 14.628571 0 0 1-4.242285 2.413714l431.030857 430.957715 429.056-427.885715-110.665143-110.592z m-275.236571 333.531428a38.034286 38.034286 0 0 1-25.453715-10.020571 1191036.050286 1191036.050286 0 0 1-226.450285-226.304c-11.849143-11.849143-15.872-25.746286-9.947429-41.691429a37.302857 37.302857 0 0 1 57.490286-16.384 55.442286 55.442286 0 0 1 5.705143 5.12L580.022857 670.354286c17.188571 17.188571 16.822857 41.764571-0.731428 56.832a38.326857 38.326857 0 0 1-24.064 8.923428z"
+        fill="currentColor" p-id="48478"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/cluster/scheduler/hostname.svg b/src/assets/images/cluster/scheduler/hostname.svg
new file mode 100644
index 0000000..0178589
--- /dev/null
+++ b/src/assets/images/cluster/scheduler/hostname.svg
@@ -0,0 +1,6 @@
+<svg t="1734589666101" class="icon" viewBox="0 0 1191 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="51432" width="200" height="200">
+    <path
+        d="M1081.527579 542.078644A108.415332 108.415332 0 0 1 1189.942911 651.155045v264.42764a107.754263 107.754263 0 0 1-108.415332 108.415332H108.433866A107.754263 107.754263 0 0 1 0.018534 914.260546v-264.427639A108.415332 108.415332 0 0 1 108.433866 542.078644z m0 80.65043H108.433866a28.425971 28.425971 0 0 0-27.764902 27.103833v264.427639a27.103833 27.103833 0 0 0 27.103833 27.764903h973.754782a27.764902 27.764902 0 0 0 27.764902-27.103833v-264.42764a28.425971 28.425971 0 0 0-27.103833-28.425971zM207.594231 727.177992a33.714524 33.714524 0 0 1 34.375593 33.714524v37.680938a34.375593 34.375593 0 0 1-66.10691 0v-37.680938a33.714524 33.714524 0 0 1 31.731317-33.714524z m154.690169 0a33.714524 33.714524 0 0 1 34.375593 33.714524v37.680938a34.375593 34.375593 0 0 1-66.10691 0v-37.680938a33.714524 33.714524 0 0 1 31.731317-33.714524zM925.515272 727.177992a52.885528 52.885528 0 1 1 0 105.109986h-27.764902a52.885528 52.885528 0 1 1 0-105.109986z m156.012307-727.176009A107.754263 107.754263 0 0 1 1189.942911 108.417315v264.42764a108.415332 108.415332 0 0 1-108.415332 108.415332H108.433866A108.415332 108.415332 0 0 1 0.018534 372.183886v-264.42764A107.754263 107.754263 0 0 1 108.433866 0.001983z m0 80.65043H108.433866a27.764902 27.764902 0 0 0-27.764902 27.103833v264.42764a27.764902 27.764902 0 0 0 27.103833 27.764902h973.754782a27.764902 27.764902 0 0 0 27.764902-27.103833v-264.42764a27.764902 27.764902 0 0 0-27.103833-27.764902zM207.594231 185.7624a34.375593 34.375593 0 0 1 34.375593 34.375593v37.01987a34.375593 34.375593 0 1 1-66.10691 0v-37.01987a33.714524 33.714524 0 0 1 31.731317-34.375593z m154.690169 0a34.375593 34.375593 0 0 1 34.375593 34.375593v37.01987a34.375593 34.375593 0 1 1-66.10691 0v-37.01987a33.714524 33.714524 0 0 1 31.731317-34.375593z m561.247665 0a52.885528 52.885528 0 0 1 0 105.771056h-27.764903a52.885528 52.885528 0 1 1 0-105.771056z"
+        fill="currentColor" p-id="51433"></path>
+</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/scheduler/ic-content.svg b/src/assets/images/cluster/scheduler/ic-content.svg
similarity index 100%
rename from public/icons/cluster/scheduler/ic-content.svg
rename to src/assets/images/cluster/scheduler/ic-content.svg
diff --git a/public/icons/cluster/scheduler/inactive.svg b/src/assets/images/cluster/scheduler/inactive.svg
similarity index 91%
rename from public/icons/cluster/scheduler/inactive.svg
rename to src/assets/images/cluster/scheduler/inactive.svg
index da1605b..25956ae 100644
--- a/public/icons/cluster/scheduler/inactive.svg
+++ b/src/assets/images/cluster/scheduler/inactive.svg
@@ -2,7 +2,7 @@
     xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <circle id="椭圆形" fill="#B2E4C1" cx="67.5" cy="67.5" r="67.5"></circle>
-        <g id="编组" transform="translate(26, 26)" fill="#2E8F79" fill-rule="nonzero">
+        <g id="编组" transform="translate(26, 26)" fill="currentColor" fill-rule="nonzero">
             <path
                 d="M41,0 C63.6714542,0 82,18.3285458 82,41 C82,63.6714542 63.6714542,82 41,82 C18.3285458,82 0,63.6714542 0,41 C0,18.3285458 18.3285458,0 41,0 Z"
                 id="形状"></path>
diff --git a/src/assets/images/cluster/scheduler/number.svg b/src/assets/images/cluster/scheduler/number.svg
new file mode 100644
index 0000000..541d97c
--- /dev/null
+++ b/src/assets/images/cluster/scheduler/number.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
+    class="iconify iconify--eva minimal__iconify__root css-7ji9xq" width="1em" height="1em" viewBox="0 0 24 24">
+    <path fill="currentColor"
+        d="M21 7a.8.8 0 0 0 0-.21a.6.6 0 0 0-.05-.17a1 1 0 0 0-.09-.14a.8.8 0 0 0-.14-.17l-.12-.07a.7.7 0 0 0-.19-.1h-.2A.7.7 0 0 0 20 6h-5a1 1 0 0 0 0 2h2.83l-4 4.71l-4.32-2.57a1 1 0 0 0-1.28.22l-5 6a1 1 0 0 0 .13 1.41A1 1 0 0 0 4 18a1 1 0 0 0 .77-.36l4.45-5.34l4.27 2.56a1 1 0 0 0 1.27-.21L19 9.7V12a1 1 0 0 0 2 0z">
+    </path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/cluster/scheduler/port.svg b/src/assets/images/cluster/scheduler/port.svg
new file mode 100644
index 0000000..25ca984
--- /dev/null
+++ b/src/assets/images/cluster/scheduler/port.svg
@@ -0,0 +1,9 @@
+<svg t="1734589137652" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="45479" width="200" height="200">
+    <path
+        d="M883.84 940.8H144.64c-42.88 0-80.64-37.76-80.64-80.64V415.36c0-42.88 37.76-80.64 80.64-80.64h21.12v-48c0-48 37.76-85.76 85.76-85.76h69.76v-42.88c0-42.88 32-74.88 74.88-74.88h230.4c42.88 0 74.88 32 74.88 74.88v42.88h69.76c48 0 85.76 37.76 85.76 85.76v48h21.12c42.88 0 80.64 37.76 80.64 80.64v444.8c5.12 42.88-32 80.64-74.88 80.64zM144.64 394.24c-10.88 0-21.12 10.88-21.12 21.12v444.8c0 10.88 10.88 21.12 21.12 21.12h739.2c10.88 0 21.12-10.88 21.12-21.12V415.36c0-10.88-10.88-21.12-21.12-21.12h-48c-16 0-26.88-10.88-26.88-26.88V286.72c0-16-10.88-32-32-32h-101.76c-16 0-26.88-10.88-26.88-26.88V158.08c0-10.88-10.88-21.12-21.12-21.12H401.28c-10.88 5.12-21.12 10.88-21.12 21.12v69.76c0 16-10.88 26.88-26.88 26.88H251.52c-16 5.12-26.88 16-26.88 32v74.88c0 16-10.88 26.88-26.88 26.88-5.12 5.76-53.12 5.76-53.12 5.76z m0 0"
+        fill="currentColor" p-id="45480"></path>
+    <path
+        d="M755.2 517.12h85.76v273.28H755.2V517.12z m-139.52 0h85.76v273.28H615.68V517.12z m-138.88 0h85.76v273.28H476.8V517.12z m-139.52 0h85.76v273.28H337.28V517.12z m-139.52 0h85.76v273.28H197.76V517.12z m0 0"
+        fill="currentColor" p-id="45481"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/cluster/scheduler/scheduler-id.svg b/src/assets/images/cluster/scheduler/scheduler-id.svg
new file mode 100644
index 0000000..bdd8386
--- /dev/null
+++ b/src/assets/images/cluster/scheduler/scheduler-id.svg
@@ -0,0 +1,9 @@
+<svg t="1694488637106" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="28840" width="64" height="64">
+    <path
+        d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32z m-40 632H136V232h752v560z"
+        p-id="28841" fill="currentColor"></path>
+    <path
+        d="M610.3 476h123.4c1.3 0 2.3-3.6 2.3-8v-48c0-4.4-1-8-2.3-8H610.3c-1.3 0-2.3 3.6-2.3 8v48c0 4.4 1 8 2.3 8zM615.1 620h185.7c3.9 0 7.1-3.6 7.1-8v-48c0-4.4-3.2-8-7.1-8H615.1c-3.9 0-7.1 3.6-7.1 8v48c0 4.4 3.2 8 7.1 8zM224 673h43.9c4.2 0 7.6-3.3 7.9-7.5 3.8-50.5 46-90.5 97.2-90.5s93.4 40 97.2 90.5c0.3 4.2 3.7 7.5 7.9 7.5H522c4.6 0 8.2-3.8 8-8.4-2.8-53.3-32-99.7-74.6-126.1 18.1-19.9 29.1-46.4 29.1-75.5 0-61.9-49.9-112-111.4-112s-111.4 50.1-111.4 112c0 29.1 11 55.5 29.1 75.5-42.7 26.5-71.8 72.8-74.6 126.1-0.4 4.6 3.2 8.4 7.8 8.4z m149-262c28.5 0 51.7 23.3 51.7 52s-23.2 52-51.7 52-51.7-23.3-51.7-52 23.2-52 51.7-52z"
+        p-id="28842" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/cluster/scheduler/scheduler-ip.svg b/src/assets/images/cluster/scheduler/scheduler-ip.svg
new file mode 100644
index 0000000..4f9673c
--- /dev/null
+++ b/src/assets/images/cluster/scheduler/scheduler-ip.svg
@@ -0,0 +1,9 @@
+<svg t="1734589694524" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="53329" width="200" height="200">
+    <path
+        d="M537.362229 1024c-9.510836 0-15.851393-3.170279-22.19195-9.510836l-282.154799-278.98452c-120.470588-123.640867-158.513932-307.517028-91.938081-466.03096S362.996904 6.340557 534.19195 6.340557s329.708978 104.619195 393.114552 263.133127c66.575851 158.513932 28.532508 342.390093-91.938081 466.03096L559.55418 1014.489164c-6.340557 6.340557-12.681115 9.510836-22.191951 9.510836z m0-957.424149C391.529412 66.575851 258.377709 155.343653 201.312693 291.665635c-57.065015 136.321981-25.362229 291.665635 79.256966 396.284829l259.962849 256.79257 259.962848-259.962848c104.619195-104.619195 136.321981-259.962848 79.256966-396.28483-60.235294-133.151703-193.386997-221.919505-342.390093-221.919505z m0 0"
+        fill="currentColor" p-id="53330"></path>
+    <path
+        d="M382.018576 285.325077h63.405573v342.390093h-63.405573V285.325077z m244.111455 342.390093h-63.405573V317.027864c0-15.851393 12.681115-31.702786 31.702787-31.702787h66.575851c60.235294 0 107.789474 47.55418 107.789474 107.789474s-47.55418 107.789474-107.789474 107.789474h-34.873065v126.811145z m0-187.046439h34.873065c25.362229 0 47.55418-22.19195 47.55418-47.55418s-22.19195-47.55418-47.55418-47.554179h-34.873065v95.108359z m0 0"
+        fill="currentColor" p-id="53331"></path>
+</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/scheduler/status.svg b/src/assets/images/cluster/scheduler/status.svg
similarity index 87%
rename from public/icons/cluster/scheduler/status.svg
rename to src/assets/images/cluster/scheduler/status.svg
index 63d9f6a..2035be5 100644
--- a/public/icons/cluster/scheduler/status.svg
+++ b/src/assets/images/cluster/scheduler/status.svg
@@ -2,8 +2,8 @@
     width="64" height="64">
     <path
         d="M268.780203 512.006305A243.638379 243.638379 0 1 0 512.418581 268.367927 244.142806 244.142806 0 0 0 268.780203 512.006305z m412.117092 0A167.974286 167.974286 0 1 1 512.418581 344.032019 168.478713 168.478713 0 0 1 680.392867 512.006305z"
-        fill="#515151" p-id="7190"></path>
+        fill="currentColor" p-id="7190"></path>
     <path
         d="M947.739329 476.696395v7.061982a34.301055 34.301055 0 0 0 40.354182 30.770065 40.85861 40.85861 0 0 0 34.301056-44.389601A511.993695 511.993695 0 1 0 512.418581 1024a514.515831 514.515831 0 0 0 478.197067-329.391017 37.832046 37.832046 0 0 0-70.61982-27.239074 436.329602 436.329602 0 1 1 27.239073-190.673514z"
-        fill="#515151" p-id="7191"></path>
+        fill="currentColor" p-id="7191"></path>
 </svg>
\ No newline at end of file
diff --git a/src/assets/images/cluster/scheduler/tab-scheduler.svg b/src/assets/images/cluster/scheduler/tab-scheduler.svg
new file mode 100644
index 0000000..c5b9719
--- /dev/null
+++ b/src/assets/images/cluster/scheduler/tab-scheduler.svg
@@ -0,0 +1,6 @@
+<svg t="1739862113900" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5228"
+    width="200" height="200">
+    <path
+        d="M672 170.667H352c-29.867 0-53.333-23.467-53.333-53.334S322.133 64 352 64h320c29.867 0 53.333 23.467 53.333 53.333S701.867 170.667 672 170.667z m202.667 0h-72.534c-17.066 49.066-64 85.333-119.466 85.333H341.333c-55.466 0-102.4-36.267-119.466-85.333h-72.534c-23.466 0-42.666 19.2-42.666 42.666v725.334c0 23.466 19.2 42.666 42.666 42.666h725.334c23.466 0 42.666-19.2 42.666-42.666V213.333c0-23.466-19.2-42.666-42.666-42.666z m-72.534 605.866c0 19.2-17.066 38.4-38.4 38.4h-268.8c-17.066 38.4-53.333 61.867-96 61.867s-78.933-25.6-96-61.867h-42.666c-19.2 0-38.4-17.066-38.4-38.4V774.4c0-19.2 17.066-38.4 38.4-38.4h42.666c17.067-36.267 53.334-61.867 96-61.867s78.934 25.6 96 61.867h268.8c21.334 0 38.4 19.2 38.4 40.533z m0-311.466c0 19.2-17.066 38.4-38.4 38.4h-42.666c-17.067 38.4-53.334 61.866-96 61.866s-78.934-25.6-96-61.866H262.4c-19.2 0-38.4-17.067-38.4-38.4v-2.134c0-19.2 17.067-38.4 38.4-38.4h268.8c17.067-36.266 53.333-61.866 96-61.866s78.933 25.6 96 61.866h42.667c19.2 0 36.266 19.2 36.266 40.534z"
+        p-id="5229" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/scheduler/table.svg b/src/assets/images/cluster/scheduler/table.svg
similarity index 100%
rename from public/icons/cluster/scheduler/table.svg
rename to src/assets/images/cluster/scheduler/table.svg
diff --git a/src/assets/images/cluster/scheduler/updated-at.svg b/src/assets/images/cluster/scheduler/updated-at.svg
new file mode 100644
index 0000000..d0184b1
--- /dev/null
+++ b/src/assets/images/cluster/scheduler/updated-at.svg
@@ -0,0 +1,6 @@
+<svg t="1734589469165" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="50355" width="200" height="200">
+    <path
+        d="M736 544H512c-17.6 0-32-14.4-32-32V224c0-17.6 14.4-32 32-32s32 14.4 32 32v256h192c17.6 0 32 14.4 32 32s-14.4 32-32 32z m161.6-153.6c-17.6 0-32-14.4-32-32V185.6c0-17.6 14.4-32 32-32s32 14.4 32 32v172.8c0 17.6-14.4 32-32 32zM512 960C265.6 960 64 758.4 64 512S265.6 64 512 64c184 0 347.2 110.4 416 281.6 6.4 16-1.6 35.2-17.6 41.6-16 6.4-35.2-1.6-41.6-17.6C809.6 222.4 670.4 128 512 128c-211.2 0-384 172.8-384 384s172.8 384 384 384c158.4 0 297.6-94.4 356.8-241.6 6.4-16 25.6-24 41.6-17.6 16 6.4 24 25.6 17.6 41.6C859.2 849.6 696 960 512 960z"
+        fill="currentColor" p-id="50356"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/cluster/seed-peer.svg b/src/assets/images/cluster/seed-peer.svg
new file mode 100644
index 0000000..fccfb3f
--- /dev/null
+++ b/src/assets/images/cluster/seed-peer.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024">
+    <path fill="currentColor"
+        d="M687 620H337c-19.3 0-35 15.7-35 35s15.7 35 35 35h350c19.3 0 35-15.7 35-35s-15.7-35-35-35zm-77-218c16.6 0 30-13.4 30-30V262c0-16.6-13.4-30-30-30s-30 13.4-30 30v110c0 16.6 13.4 30 30 30z" />
+    <path fill="currentColor"
+        d="M852 112H172c-33.1 0-60 26.9-60 60v680c0 33.1 26.9 60 60 60h680c33.1 0 60-26.9 60-60V172c0-33.1-26.9-60-60-60zm-520 70h360v256c0 7.7-6.3 14-14 14H346c-7.7 0-14-6.3-14-14V182zm510 630c0 16.6-13.4 30-30 30H212c-16.6 0-30-13.4-30-30V212c0-16.6 13.4-30 30-30h50v300c0 16.6 13.4 30 30 30h440c16.6 0 30-13.4 30-30V182h50c16.6 0 30 13.4 30 30v600z" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/cluster/seed-peer/download-port.svg b/src/assets/images/cluster/seed-peer/download-port.svg
new file mode 100644
index 0000000..908826f
--- /dev/null
+++ b/src/assets/images/cluster/seed-peer/download-port.svg
@@ -0,0 +1,8 @@
+<svg width="175px" height="175px" viewBox="0 0 175 175" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path
+            d="M131.25,0 L131.25,29.1812501 L175,29.1812501 L175,175 L131.25,175 L131.25,145.833333 L145.833333,145.833333 L145.833333,58.3479168 L29.1812501,58.3479168 L29.1812501,145.833333 L43.7645834,145.833333 L43.7645834,175 L0,175 L0,29.1812501 L43.7645834,29.1812501 L43.7645834,0 L131.25,0 Z M101.103641,73 C102.543065,73 103.720775,74.72 103.720775,76.8222222 L103.720775,109.024444 C103.720775,111.126667 104.898485,112.846667 106.337909,112.846667 L113.731313,112.846667 C116.086734,112.846667 117.199016,116.955556 115.563307,119.344444 L89.1956798,157.853333 C88.1488261,159.382222 86.5131172,159.382222 85.4662635,157.853333 L59.0986359,119.344444 C57.462927,116.86 58.6406374,112.751111 60.9960582,112.751111 L68.3894625,112.751111 C69.8288863,112.751111 71.0065967,111.031111 71.0065967,108.928889 L71.0065967,76.8222222 C71.0065967,74.72 72.1843071,73 73.623731,73 L101.103641,73 Z"
+            id="形状" fill="#919EAB" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/cluster/seed-peer/object-storage-port.svg b/src/assets/images/cluster/seed-peer/object-storage-port.svg
new file mode 100644
index 0000000..86e3b6d
--- /dev/null
+++ b/src/assets/images/cluster/seed-peer/object-storage-port.svg
@@ -0,0 +1,31 @@
+<svg width="201px" height="199.9468px" viewBox="0 0 201 199.9468" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="currentColor" fill-rule="nonzero">
+            <path
+                d="M87.8699189,100.841487 C86.9908119,100.835062 86.1310924,100.582443 85.3882506,100.112277 L2.84631659,53.0664321 C0.450439308,51.6282501 -0.393070387,48.5616096 0.930247957,46.1004261 C2.2535663,43.6392426 5.27690485,42.6517122 7.79789178,43.8572081 L90.3045414,91.2676579 C92.8047171,92.6580408 93.747559,95.7834836 92.4333658,98.3245345 C91.6149754,100.060599 89.7748928,101.07549 87.8699189,100.841487 L87.8699189,100.841487 Z"
+                id="路径"></path>
+            <path
+                d="M88.2227629,100.841487 C86.2992891,100.767469 84.5528176,99.6982009 83.6122701,98.0187366 C82.2847186,95.4789349 83.2304798,92.3438148 85.7410945,90.9618599 L171.105779,43.1985663 C173.626766,41.9930704 176.650105,42.9806008 177.973423,45.4417843 C179.296741,47.9029678 178.453232,50.9696083 176.057354,52.4077903 L90.6926697,100.171084 C89.9859473,100.703316 89.1015979,100.943354 88.2227629,100.841487 L88.2227629,100.841487 Z"
+                id="路径"></path>
+            <path
+                d="M173.211081,53.0781937 C172.346925,53.0086596 171.504302,52.7730446 170.729412,52.3842675 L86.0468926,9.92539288 C83.6140232,8.4892725 82.5667754,5.51131695 83.5652242,2.86851631 C84.9881435,0.419638144 87.9795752,-0.632348714 90.6221008,0.386847954 L175.304621,42.8457226 C177.753499,44.2686419 178.805486,47.2600736 177.786289,49.9025991 C177.159075,51.8928272 175.258862,53.201647 173.175796,53.0781937 L173.211081,53.0781937 Z"
+                id="路径"></path>
+            <path
+                d="M6.76288319,52.7253499 C4.32945482,52.7115243 2.232814,51.007825 1.72138815,48.6287058 C1.2099623,46.2495865 2.42127443,43.8347953 4.63405878,42.8221995 L86.1056998,0.669122954 C87.3618232,0.00847818194 88.8362891,-0.0993674473 90.1751718,0.371472964 C91.5140544,0.842313376 92.5964618,1.84932613 93.1625765,3.15079131 C93.8494849,4.40219308 93.9713816,5.88678808 93.4977966,7.23347535 C93.0242115,8.58016262 91.9999005,9.66167452 90.6809082,10.2076679 L9.24455155,51.9961392 C8.49892564,52.4601233 7.64098733,52.712219 6.76288319,52.7253499 L6.76288319,52.7253499 Z M88.610891,199.884751 C87.6208075,199.823733 86.6511461,199.57633 85.752856,199.155541 L3.9401326,149.298707 C1.40681912,147.736497 0.619584171,144.416419 2.18179413,141.883106 C3.74400408,139.349792 7.06408182,138.562557 9.5973953,140.124767 L91.4336416,190.028647 C93.8826878,191.657721 94.6577492,194.901687 93.2096223,197.46189 C92.2337351,199.06103 90.4713571,200.009657 88.5991295,199.943559 L88.610891,199.884751 Z"
+                id="形状"></path>
+            <path
+                d="M89.9987433,199.884751 C88.0752696,199.810733 86.328798,198.741465 85.3882506,197.062 C84.0606991,194.522199 85.0064604,191.387079 87.5170752,190.005124 L116.191517,174.091867 C118.712504,172.886372 121.735842,173.873902 123.05916,176.335085 C124.382478,178.796269 123.538969,181.862909 121.143092,183.301091 L92.4686502,199.214348 C91.762288,199.757872 90.8728154,200.006587 89.986982,199.908274 L89.9987433,199.884751 Z M173.587447,78.5417569 C170.689185,78.4675649 168.357221,76.1356001 168.283029,73.237338 L168.283029,48.8205448 C168.468886,46.0342268 170.783176,43.8691652 173.575686,43.8691652 C176.368196,43.8691652 178.682486,46.0342268 178.868344,48.8205448 L178.868344,73.2020536 C178.812693,76.1140848 176.475523,78.4668011 173.563925,78.5417569 L173.587447,78.5417569 Z"
+                id="形状"></path>
+            <path
+                d="M89.9987433,199.884751 C87.1004812,199.810559 84.7685165,197.478594 84.6943244,194.580332 L84.6943244,96.525031 C84.8801818,93.738713 87.1944721,91.5736513 89.9869819,91.5736513 C92.7794917,91.5736513 95.093782,93.738713 95.2796394,96.525031 L95.2796394,194.521525 C95.2054474,197.419787 92.8734826,199.751752 89.9752205,199.825944 L89.9987433,199.884751 Z M5.31622342,148.945863 C2.41796128,148.871671 0.0859965559,146.539706 0.0118044786,143.641444 L0.0118044786,51.2904517 C-0.119941777,49.3153518 0.859032399,47.4312189 2.55092548,46.4036615 C4.24281856,45.3761041 6.36610543,45.3761041 8.05799852,46.4036615 C9.7498916,47.4312189 10.7288658,49.3153518 10.5971195,51.2904517 L10.5971195,143.570875 C10.5534995,146.487987 8.20945885,148.84762 5.29270057,148.910579 L5.31622342,148.945863 Z M69.7925533,121.353475 C68.8184527,121.288009 67.8632287,121.053183 66.9698025,120.659549 L27.2748713,97.7011771 C26.005596,97.0001317 25.0914907,95.795563 24.7579187,94.384445 C24.2148943,92.2329076 25.0407051,89.9679304 26.8411112,88.6708079 C28.6415172,87.3736854 31.0514338,87.3074469 32.9203726,88.5037146 L72.591781,111.497371 C73.8610563,112.198416 74.7751616,113.402985 75.1087336,114.814103 C75.4311145,116.228455 75.1681265,117.713065 74.379523,118.930614 C73.4165895,120.518717 71.6590659,121.449436 69.8043146,121.353475 L69.7925533,121.353475 Z"
+                id="形状"></path>
+            <path
+                d="M131,130 C128.6,130 127,128 127,125 L127,120 C127,117 128.6,115 131,115 C133.4,115 135,117 135,120 L135,125 C135,128 133.4,130 131,130 Z M147,130 C144.6,130 143,128 143,125 L143,120 C143,117 144.6,115 147,115 C149.4,115 151,117 151,120 L151,125 C151,128 149.4,130 147,130 Z M164,130 C161.6,130 160,128 160,125 L160,120 C160,117 161.6,115 164,115 C166.4,115 168,117 168,120 L168,125 C168,128 166.4,130 164,130 Z M181,130 C178.6,130 177,128 177,125 L177,120 C177,117 178.6,115 181,115 C183.4,115 185,117 185,120 L185,125 C185,128 183.4,130 181,130 Z"
+                id="形状"></path>
+            <path
+                d="M172.125,165 L139.875,165 C136.875,165 133.875,163.027778 132.75,159.872222 L127.125,145.277778 L118.5,145.277778 C114.375,145.277778 111,141.727778 111,137.388889 L111,101.888889 C111,97.55 114.375,94 118.5,94 L193.5,94 C197.625,94 201,97.55 201,101.888889 L201,137.388889 C201,141.727778 197.625,145.277778 193.5,145.277778 L184.875,145.277778 L179.25,159.872222 C178.125,163.027778 175.125,165 172.125,165 Z M119,101 L119,136.357143 L127.625,136.357143 C130.625,136.357143 133.625,138.321428 134.75,141.464286 L140.375,156 L172.625,156 L178.25,141.464286 C179.375,138.321429 182,136.357143 185.375,136.357143 L194,136.357143 L194,101 L119,101 Z"
+                id="形状"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/cluster/seed-peer/port.svg b/src/assets/images/cluster/seed-peer/port.svg
new file mode 100644
index 0000000..d15977d
--- /dev/null
+++ b/src/assets/images/cluster/seed-peer/port.svg
@@ -0,0 +1,6 @@
+<svg t="1732867295209" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="58870" width="200" height="200">
+    <path
+        d="M960 865.7c0 51.9-42.4 94.3-94.3 94.3H158.3c-51.9 0-94.3-42.4-94.3-94.3V323.4c0-51.9 42.4-94.3 94.3-94.3h113.2l63.7-134.4C342.3 75.8 361.1 64 380 64h264c21.2 0 37.7 11.8 44.8 30.7l63.7 134.4h113.2c51.9 0 94.3 42.4 94.3 94.3v542.3z m-104.2-80.6V427.5c0-25.9-21.2-47.2-47.2-47.2H215.3c-25.9 0-47.2 21.2-47.2 47.2v357.6c0 25.9 21.2 47.2 47.2 47.2h593.4c25.9 0 47.1-21.3 47.1-47.2z m-108-84.5c0 14.1-9.4 23.6-23.6 23.6h-35.4v-82.5c0-18.9-16.5-35.4-35.4-35.4S618 622.8 618 641.7v82.5h-70.7v-82.5c0-18.9-16.5-35.4-35.4-35.4s-35.4 16.5-35.4 35.4v82.5h-70.7v-82.5c0-18.9-16.5-35.4-35.4-35.4S335 622.8 335 641.7v82.5h-35.4c-14.1 0-23.6-9.4-23.6-23.6V512c0-14.1 9.4-23.6 23.6-23.6H724c14.1 0 23.6 9.4 23.6 23.6v188.6z"
+        fill="#919EAB" p-id="58871"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/cluster/seed-peer/seed-peer-download-port.svg b/src/assets/images/cluster/seed-peer/seed-peer-download-port.svg
new file mode 100644
index 0000000..40326cb
--- /dev/null
+++ b/src/assets/images/cluster/seed-peer/seed-peer-download-port.svg
@@ -0,0 +1,13 @@
+<svg width="168.842561px" height="157.5px" viewBox="0 0 168.842561 157.5" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="路径" fill="currentColor" fill-rule="nonzero"
+            points="91.5603161 53 91.5603161 109.599416 117.520383 85.7060223 127.75 95.1126608 84.4188852 135 84.2548253 134.840415 84.0811148 135 40.75 95.1126608 50.9892679 85.7148881 77.0844426 109.714672 77.0844426 53">
+        </polygon>
+        <g id="编组" fill="currentColor" fill-rule="nonzero">
+            <path
+                d="M154.630057,157.5 L15.2095138,157.5 C7.12191517,157.5 0,150.565299 0,142.690299 L0,61.0018657 C0,53.1268657 7.12191517,46.1921642 15.2095138,46.1921642 L19.1929578,46.1921642 L19.1929578,37.3768657 C19.1929578,28.5615672 26.314873,21.6268657 35.368155,21.6268657 L48.5255915,21.6268657 L48.5255915,13.7518657 C48.5255915,5.87686567 54.5611128,0 62.6487114,0 L106.104465,0 C114.192064,0 120.227585,5.87686567 120.227585,13.7518657 L120.227585,21.6268657 L133.385021,21.6268657 C142.438303,21.6268657 149.560219,28.5615672 149.560219,37.3768657 L149.560219,46.1921642 L153.543663,46.1921642 C161.631261,46.1921642 168.753176,53.1268657 168.753176,61.0018657 L168.753176,142.690299 C169.71886,150.565299 162.717655,157.5 154.630057,157.5 Z M15.2095138,57.1231343 C13.1574365,57.1231343 11.2260697,59.1212687 11.2260697,61.0018657 L11.2260697,142.690299 C11.2260697,144.688433 13.2781469,146.56903 15.2095138,146.56903 L154.630057,146.56903 C156.682134,146.56903 158.613501,144.570896 158.613501,142.690299 L158.613501,61.0018657 C158.613501,59.0037313 156.561423,57.1231343 154.630057,57.1231343 L145.576775,57.1231343 C142.559014,57.1231343 140.506937,55.125 140.506937,52.1865672 L140.506937,37.3768657 C140.506937,34.4384328 138.454859,31.5 134.471415,31.5 L115.278457,31.5 C112.260697,31.5 110.20862,29.5018657 110.20862,26.5634328 L110.20862,13.7518657 C110.20862,11.7537313 108.156542,9.87313433 106.225175,9.87313433 L63.6143948,9.87313433 C61.5623176,10.8134328 59.6309508,11.8712687 59.6309508,13.7518657 L59.6309508,26.5634328 C59.6309508,29.5018657 57.5788735,31.5 54.5611128,31.5 L35.368155,31.5 C32.3503943,32.4402985 30.2983171,34.4384328 30.2983171,37.3768657 L30.2983171,51.1287313 C30.2983171,54.0671642 28.2462398,56.0652985 25.2284792,56.0652985 C24.2627958,57.1231343 15.2095138,57.1231343 15.2095138,57.1231343 Z"
+                id="形状"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/cluster/seed-peer/seed-peer-type.svg b/src/assets/images/cluster/seed-peer/seed-peer-type.svg
new file mode 100644
index 0000000..edd47b4
--- /dev/null
+++ b/src/assets/images/cluster/seed-peer/seed-peer-type.svg
@@ -0,0 +1,6 @@
+<svg t="1734590607204" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="58368" width="200" height="200">
+    <path
+        d="M161.066667 128c-18.24 0-33.066667 14.826667-33.066667 33.066667v285.866666c0 18.24 14.826667 33.066667 33.066667 33.066667h285.866666c18.24 0 33.066667-14.826667 33.066667-33.066667V161.066667c0-18.24-14.826667-33.066667-33.066667-33.066667H161.066667z m254.933333 288H192V192h224v224zM128 862.933333c0 18.24 14.826667 33.066667 33.066667 33.066667h285.866666c18.24 0 33.066667-14.826667 33.066667-33.066667V577.066667c0-18.24-14.826667-33.066667-33.066667-33.066667H161.066667c-18.24 0-33.066667 14.826667-33.066667 33.066667v285.866666z m64-254.933333h224v224H192V608zM577.066667 128c-18.24 0-33.066667 14.826667-33.066667 33.066667v285.866666c0 18.24 14.826667 33.066667 33.066667 33.066667h285.866666c18.24 0 33.066667-14.826667 33.066667-33.066667V161.066667c0-18.24-14.826667-33.066667-33.066667-33.066667H577.066667z m254.933333 288H608V192h224v224zM743.36 514.133333c-6.293333-6.293333-14.506667-9.706667-23.36-9.706666s-17.173333 3.413333-23.36 9.706666L514.133333 696.64c-6.293333 6.293333-9.706667 14.506667-9.706666 23.36s3.413333 17.173333 9.706666 23.36L696.64 925.866667c6.293333 6.293333 14.506667 9.706667 23.36 9.706666s17.173333-3.413333 23.36-9.706666L925.866667 743.36c6.293333-6.293333 9.706667-14.506667 9.706666-23.36s-3.413333-17.173333-9.706666-23.36L743.36 514.133333zM720 858.773333L581.226667 720 720 581.226667 858.773333 720 720 858.773333z"
+        p-id="58369" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/seed-peer/tab-seed-peer.svg b/src/assets/images/cluster/seed-peer/tab-seed-peer.svg
similarity index 98%
rename from public/icons/cluster/seed-peer/tab-seed-peer.svg
rename to src/assets/images/cluster/seed-peer/tab-seed-peer.svg
index aacb812..1604dae 100644
--- a/public/icons/cluster/seed-peer/tab-seed-peer.svg
+++ b/src/assets/images/cluster/seed-peer/tab-seed-peer.svg
@@ -1,7 +1,7 @@
 <svg width="166.35px" height="165.325px" viewBox="0 0 166.35 165.325" version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="编组" fill="#919EAB" fill-rule="nonzero">
+        <g id="编组" fill="currentColor" fill-rule="nonzero">
             <path
                 d="M89.1375,116.2 C67.9573798,116.2 50.7875,99.0301202 50.7875,77.85 C50.7875,56.6698798 67.9573798,39.5 89.1375,39.5 C110.31762,39.5 127.4875,56.6698798 127.4875,77.85 C127.374707,98.9832234 110.270723,116.087207 89.1375,116.2 L89.1375,116.2 Z"
                 id="形状"></path>
diff --git a/public/icons/cluster/seed-peer/type.svg b/src/assets/images/cluster/seed-peer/type.svg
similarity index 100%
rename from public/icons/cluster/seed-peer/type.svg
rename to src/assets/images/cluster/seed-peer/type.svg
diff --git a/public/fonts/cluster/statistics.svg b/src/assets/images/cluster/statistics.svg
similarity index 100%
rename from public/fonts/cluster/statistics.svg
rename to src/assets/images/cluster/statistics.svg
diff --git a/public/icons/cluster/status.svg b/src/assets/images/cluster/status.svg
similarity index 96%
rename from public/icons/cluster/status.svg
rename to src/assets/images/cluster/status.svg
index e603e64..f45845e 100644
--- a/public/icons/cluster/status.svg
+++ b/src/assets/images/cluster/status.svg
@@ -2,5 +2,5 @@
     p-id="44653" width="200" height="200">
     <path
         d="M121.344 455.168c-1.024 0-2.56 0-4.096-0.512-10.752-2.048-17.92-12.8-15.872-23.552 15.872-81.92 55.808-156.16 115.2-215.04s133.632-98.816 215.552-114.176c10.752-2.048 21.504 5.12 23.552 15.872 2.048 10.752-5.12 21.504-15.872 23.552-73.728 14.336-141.312 50.176-195.072 103.424-53.76 53.248-89.6 120.832-103.936 194.56-1.536 9.216-10.24 15.872-19.456 15.872zM443.392 924.16c-1.024 0-2.048 0-3.584-0.512-172.032-29.696-308.224-164.864-338.944-336.384-2.048-10.752 5.12-21.504 15.872-23.552 10.752-2.048 21.504 5.12 23.552 15.872 28.16 155.136 151.552 276.992 306.688 304.128 10.752 1.536 18.432 12.288 16.384 23.04-2.048 10.24-10.24 17.408-19.968 17.408z m135.168 0c-9.728 0-18.432-6.656-19.968-16.896-1.536-10.752 5.632-20.992 16.384-23.04 77.824-13.312 147.968-49.664 204.288-105.472s92.16-126.976 105.472-204.288c1.536-10.752 12.288-18.432 23.04-16.384 10.752 1.536 18.432 12.288 16.384 23.04-14.336 86.016-54.784 163.84-116.224 225.792s-139.776 102.4-225.792 116.736c-1.024 0.512-2.048 0.512-3.584 0.512z m325.12-463.872c-9.728 0-17.92-6.656-19.456-16.384C870.4 368.128 834.56 299.52 780.288 244.736c-54.784-54.784-122.88-91.136-198.656-104.96-10.752-2.048-18.432-12.288-15.872-23.552 2.048-10.752 12.288-18.432 23.552-15.872 83.456 15.36 159.232 55.808 219.648 116.224 60.416 60.416 100.352 136.704 115.2 220.16 2.048 10.752-5.12 21.504-15.872 23.552h-4.608zM259.072 512c0 139.776 113.152 252.928 252.928 252.928S764.928 651.776 764.928 512 651.776 259.072 512 259.072C372.224 258.56 259.072 372.224 259.072 512z"
-        fill="#2e8f79" p-id="44654"></path>
+        fill="currentColor" p-id="44654"></path>
 </svg>
\ No newline at end of file
diff --git a/src/assets/images/cluster/tab-cluster.svg b/src/assets/images/cluster/tab-cluster.svg
new file mode 100644
index 0000000..09d083e
--- /dev/null
+++ b/src/assets/images/cluster/tab-cluster.svg
@@ -0,0 +1,6 @@
+<svg t="1734008317859" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="26236" width="200" height="200">
+    <path
+        d="M914.1990408 699.69288571h-53.62653877v-160.87961632h-321.75923264v-107.25307754H619.25307755a80.43980815 80.43980815 0 0 0 80.43980816-80.43980818V136.61422861A80.43980815 80.43980815 0 0 0 619.25307755 56.17442045h-214.5061551A80.43980815 80.43980815 0 0 0 324.30711429 136.61422861v214.50615506a80.43980815 80.43980815 0 0 0 80.43980816 80.43980818h80.43980816v107.25307754h-321.75923264v160.87961632h-53.62653877a53.62653878 53.62653878 0 0 0-53.62653875 53.62653877v160.87961632a53.62653878 53.62653878 0 0 0 53.62653875 53.62653875h160.87961632a53.62653878 53.62653878 0 0 0 53.62653877-53.62653875v-160.87961632a53.62653878 53.62653878 0 0 0-53.62653877-53.62653877h-53.62653877v-107.25307756h268.13269386v107.25307756h-53.62653876a53.62653878 53.62653878 0 0 0-53.62653879 53.62653877v160.87961632a53.62653878 53.62653878 0 0 0 53.62653879 53.62653875h160.8796163a53.62653878 53.62653878 0 0 0 53.62653879-53.62653875v-160.87961632a53.62653878 53.62653878 0 0 0-53.62653879-53.62653877h-53.62653876v-107.25307756h268.13269386v107.25307756h-53.62653877a53.62653878 53.62653878 0 0 0-53.62653877 53.62653877v160.87961632a53.62653878 53.62653878 0 0 0 53.62653877 53.62653875h160.87961632a53.62653878 53.62653878 0 0 0 53.62653875-53.62653875v-160.87961632a53.62653878 53.62653878 0 0 0-53.62653875-53.62653877z"
+        p-id="26237" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/public/icons/cluster/total.svg b/src/assets/images/cluster/total.svg
similarity index 100%
rename from public/icons/cluster/total.svg
rename to src/assets/images/cluster/total.svg
diff --git a/public/fonts/cluster/unfoldMore.svg b/src/assets/images/cluster/unfoldMore.svg
similarity index 100%
rename from public/fonts/cluster/unfoldMore.svg
rename to src/assets/images/cluster/unfoldMore.svg
diff --git a/src/assets/images/job/preheat/created-at.svg b/src/assets/images/job/preheat/created-at.svg
new file mode 100644
index 0000000..93ed18f
--- /dev/null
+++ b/src/assets/images/job/preheat/created-at.svg
@@ -0,0 +1,6 @@
+<svg t="1694488945708" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="39963" width="64" height="64">
+    <path
+        d="M512 895.936c-211.776 0-384-172.224-384-384C128 300.224 300.16 128 512 128c211.648 0 384 172.288 384 384a32 32 0 1 0 64 0C960 264.96 759.04 64 512 64 265.216 64 64 264.96 64 512c0 246.912 201.024 447.936 448 447.936a32 32 0 0 0 0-64zM512 190.912a32 32 0 0 0-32.064 32.064v275.776L361.28 617.344a32 32 0 0 0 45.312 45.248L534.208 535.04a30.912 30.912 0 0 0 5.184-6.72s0-0.128 0.128-0.128l0.64-1.152c0-0.128 0.128-0.128 0.128-0.192l0.64-1.216v-0.192c0.256-0.448 0.512-0.832 0.512-1.216 0-0.064 0.192-0.064 0.192-0.192l0.448-1.28 0.128-0.256c0.064-0.384 0.32-0.768 0.384-1.28l0.128-0.192 0.256-1.28c0-0.128 0-0.192 0.128-0.192a26.24 26.24 0 0 0 0.384-1.664c0.128-0.32 0.128-0.768 0.192-1.152 0-0.192 0-0.32 0.128-0.512l0.064-1.088c0-0.256 0-0.448 0.128-0.704l0.064-0.832v-290.56a32.128 32.128 0 0 0-32.064-32z m415.552 544.96h-127.872v-128a32 32 0 1 0-64.064 0v128h-128a32 32 0 1 0 0 64.064h128.064v128a32 32 0 0 0 64 0v-128.064h128.064a32 32 0 0 0 32.064-32.064 32.32 32.32 0 0 0-32.256-31.936z"
+        fill="currentColor" p-id="39964"></path>
+</svg>
\ No newline at end of file
diff --git a/public/icons/job/preheat/description.svg b/src/assets/images/job/preheat/description.svg
similarity index 88%
rename from public/icons/job/preheat/description.svg
rename to src/assets/images/job/preheat/description.svg
index c1adfe6..4d4c163 100644
--- a/public/icons/job/preheat/description.svg
+++ b/src/assets/images/job/preheat/description.svg
@@ -2,8 +2,8 @@
     p-id="52110" width="64" height="64">
     <path
         d="M320 345.6h356.8c16 0 30.4-12.8 30.4-30.4s-12.8-30.4-30.4-30.4H320c-16 0-30.4 12.8-30.4 30.4s12.8 30.4 30.4 30.4z m0 128h302.4c16 0 30.4-12.8 30.4-30.4s-12.8-30.4-30.4-30.4H320c-16 0-30.4 12.8-30.4 30.4s12.8 30.4 30.4 30.4z m356.8 121.6c16 0 30.4-12.8 30.4-30.4s-12.8-30.4-30.4-30.4H320c-16 0-30.4 12.8-30.4 30.4 0 16 12.8 30.4 30.4 30.4h356.8z"
-        p-id="52111" fill="#515151"></path>
+        p-id="52111" fill="currentColor"></path>
     <path
         d="M843.2 96H180.8c-16 0-30.4 12.8-30.4 30.4v772.8c0 16 12.8 30.4 30.4 30.4H640c8 0 14.4-3.2 19.2-8l201.6-174.4c6.4-6.4 11.2-14.4 11.2-22.4V126.4c0-17.6-12.8-30.4-28.8-30.4zM212.8 158.4h598.4v520H625.6c-16 0-30.4 12.8-30.4 30.4v158.4h-384l1.6-708.8zM656 844.8v-105.6h121.6L656 844.8z"
-        p-id="52112" fill="#515151"></path>
+        p-id="52112" fill="currentColor"></path>
 </svg>
\ No newline at end of file
diff --git a/src/assets/images/job/preheat/detail.svg b/src/assets/images/job/preheat/detail.svg
new file mode 100644
index 0000000..1b644f8
--- /dev/null
+++ b/src/assets/images/job/preheat/detail.svg
@@ -0,0 +1,13 @@
+<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组">
+            <path
+                d="M32,0 C14.2933333,0 0,14.2933333 0,32 C0,49.7066667 14.2933333,64 32,64 C49.7066667,64 64,49.7066667 64,32 C64,14.2933333 49.7066667,0 32,0"
+                id="形状" fill="currentColor" fill-rule="nonzero"></path>
+            <rect id="矩形" fill="#FFFFFF" x="17" y="40" width="21" height="6" rx="3"></rect>
+            <rect id="矩形" fill="#FFFFFF" x="17" y="28" width="32" height="6" rx="3"></rect>
+            <rect id="矩形" fill="#FFFFFF" x="17" y="16" width="32" height="6" rx="3"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/icons/job/preheat/error-log.svg b/src/assets/images/job/preheat/error-log.svg
similarity index 100%
rename from public/icons/job/preheat/error-log.svg
rename to src/assets/images/job/preheat/error-log.svg
diff --git a/src/assets/images/job/preheat/failure.svg b/src/assets/images/job/preheat/failure.svg
new file mode 100644
index 0000000..3f7022a
--- /dev/null
+++ b/src/assets/images/job/preheat/failure.svg
@@ -0,0 +1,13 @@
+<svg width="53.3333334px" height="53.3333334px" viewBox="0 0 53.3333334 53.3333334" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill-rule="nonzero">
+            <path
+                d="M26.6666667,8.8817842e-16 C41.394,8.8817842e-16 53.3333334,11.9393333 53.3333334,26.6666667 C53.3333334,41.3940001 41.394,53.3333334 26.6666667,53.3333334 C11.9393334,53.3333334 8.8817842e-16,41.394 8.8817842e-16,26.6666667 C8.8817842e-16,11.9393334 11.9393334,8.8817842e-16 26.6666667,8.8817842e-16 Z"
+                id="形状" fill="#D42536"></path>
+            <path
+                d="M21.262,18.56 C20.7806735,18.0707188 20.0738969,17.8771936 19.4104544,18.0530214 C18.7470119,18.2288492 18.2288492,18.7470119 18.0530214,19.4104544 C17.8771936,20.0738969 18.0707188,20.7806735 18.56,21.262 L23.9646667,26.6666667 L18.56,32.0713334 C18.0707188,32.5526599 17.8771936,33.2594365 18.0530214,33.922879 C18.2288492,34.5863215 18.7470119,35.1044842 19.4104544,35.280312 C20.0738969,35.4561398 20.7806735,35.2626146 21.262,34.7733334 L26.6666667,29.3686667 L32.0713334,34.7733334 C32.5526599,35.2626146 33.2594365,35.4561398 33.922879,35.280312 C34.5863215,35.1044842 35.1044842,34.5863215 35.280312,33.922879 C35.4561398,33.2594365 35.2626146,32.5526599 34.7733334,32.0713334 L29.3686667,26.6666667 L34.7733334,21.262 C35.2626146,20.7806735 35.4561398,20.0738969 35.280312,19.4104544 C35.1044842,18.7470119 34.5863215,18.2288492 33.922879,18.0530214 C33.2594365,17.8771936 32.5526599,18.0707188 32.0713334,18.56 L26.6666667,23.9646667 L21.262,18.56 Z"
+                id="路径" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/icons/job/preheat/headers.svg b/src/assets/images/job/preheat/headers.svg
similarity index 93%
rename from public/icons/job/preheat/headers.svg
rename to src/assets/images/job/preheat/headers.svg
index 84a3010..16a73e4 100644
--- a/public/icons/job/preheat/headers.svg
+++ b/src/assets/images/job/preheat/headers.svg
@@ -2,11 +2,11 @@
     p-id="34878" width="64" height="64">
     <path
         d="M374.784 172.096a49.088 49.088 0 0 0-50.944 0 49.92 49.92 0 0 0-25.792 44.224 51.2 51.2 0 1 0 76.8-44.224z m-132.672 0a50.048 50.048 0 0 0-51.52 0 51.072 51.072 0 0 0-25.792 44.224c0 18.496 10.048 35.264 25.792 44.224a50.048 50.048 0 0 0 51.456 0 51.072 51.072 0 0 0 25.792-44.224 51.072 51.072 0 0 0-25.728-44.224z"
-        fill="#515151" p-id="34879"></path>
+        fill="currentColor" p-id="34879"></path>
     <path
         d="M867.584 64H156.416C105.472 64 64 105.408 64 156.416v711.168C64 918.528 105.408 960 156.416 960h711.168c50.944 0 92.416-41.472 92.416-92.416V156.416C960 105.472 918.528 64 867.584 64zM126.72 156.416c0-17.344 13.44-30.784 30.784-30.784H866.56c17.344 0 30.784 13.44 30.784 30.72v148.48H126.72v-148.48zM898.368 391.04v476.544a31.104 31.104 0 0 1-30.72 30.848H156.352a31.104 31.104 0 0 1-30.784-30.848V366.4h772.736v24.64z"
-        fill="#515151" p-id="34880"></path>
+        fill="currentColor" p-id="34880"></path>
     <path
         d="M284.352 630.784c10.048-10.048 16.064-14.08 28.16-14.08s18.112 6.016 18.112 28.16v94.592h50.368V638.848c0-40.32-16.128-66.432-50.368-66.432-22.144 0-38.208 12.032-50.304 22.144l1.984-28.16V512h-50.304v229.504h50.304v-110.72h2.048z m152.96 50.304c0 38.272 16.128 64.448 56.384 64.448 16.128 0 28.16-4.032 36.224-6.08l-8.064-36.224c-1.984 0-8 2.048-14.08 2.048-12.032 0-20.096-8.064-20.096-26.24v-62.336h38.208v-40.32H487.68v-42.24h-42.24l-6.08 42.24-24.192 2.048v38.272h22.144v64.384z m126.848 0c0 38.272 16.128 64.448 58.368 64.448 16.128 0 28.16-4.032 36.224-6.08l-8.064-36.224c-3.968 2.048-10.048 2.048-14.08 2.048-12.032 0-20.096-8.064-20.096-26.24v-62.336h38.208v-40.32h-38.208v-42.24h-42.24l-6.08 42.24-24.192 2.048v38.272h22.144v64.384h-1.984z m179.2 72.512l-2.048-26.24a55.04 55.04 0 0 0 38.272 16.128c34.176 0 68.416-32.192 68.416-88.576 0-50.304-24.128-82.56-64.448-82.56-16.064 0-32.192 8.064-46.272 20.16h-1.984v-14.08h-42.304v221.44h50.304v-46.272z m0-124.8c8-10.112 16.064-14.08 26.112-14.08 18.112 0 26.24 14.08 26.24 42.24 0 32.192-12.16 46.272-28.224 46.272a31.872 31.872 0 0 1-24.192-10.048V628.736z"
-        fill="#515151" p-id="34881"></path>
+        fill="currentColor" p-id="34881"></path>
 </svg>
\ No newline at end of file
diff --git a/src/assets/images/job/preheat/id.svg b/src/assets/images/job/preheat/id.svg
new file mode 100644
index 0000000..bdd8386
--- /dev/null
+++ b/src/assets/images/job/preheat/id.svg
@@ -0,0 +1,9 @@
+<svg t="1694488637106" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="28840" width="64" height="64">
+    <path
+        d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32z m-40 632H136V232h752v560z"
+        p-id="28841" fill="currentColor"></path>
+    <path
+        d="M610.3 476h123.4c1.3 0 2.3-3.6 2.3-8v-48c0-4.4-1-8-2.3-8H610.3c-1.3 0-2.3 3.6-2.3 8v48c0 4.4 1 8 2.3 8zM615.1 620h185.7c3.9 0 7.1-3.6 7.1-8v-48c0-4.4-3.2-8-7.1-8H615.1c-3.9 0-7.1 3.6-7.1 8v48c0 4.4 3.2 8 7.1 8zM224 673h43.9c4.2 0 7.6-3.3 7.9-7.5 3.8-50.5 46-90.5 97.2-90.5s93.4 40 97.2 90.5c0.3 4.2 3.7 7.5 7.9 7.5H522c4.6 0 8.2-3.8 8-8.4-2.8-53.3-32-99.7-74.6-126.1 18.1-19.9 29.1-46.4 29.1-75.5 0-61.9-49.9-112-111.4-112s-111.4 50.1-111.4 112c0 29.1 11 55.5 29.1 75.5-42.7 26.5-71.8 72.8-74.6 126.1-0.4 4.6 3.2 8.4 7.8 8.4z m149-262c28.5 0 51.7 23.3 51.7 52s-23.2 52-51.7 52-51.7-23.3-51.7-52 23.2-52 51.7-52z"
+        p-id="28842" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/job/preheat/pending.svg b/src/assets/images/job/preheat/pending.svg
new file mode 100644
index 0000000..a213867
--- /dev/null
+++ b/src/assets/images/job/preheat/pending.svg
@@ -0,0 +1,14 @@
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 0" to="360 0 0" dur="0.8s"
+        repeatCount="indefinite" />
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path
+            d="M9,17 C13.418278,17 17,13.418278 17,9 C17,4.581722 13.418278,1 9,1 C4.581722,1 1,4.581722 1,9 C1,13.418278 4.581722,17 9,17 L9,17 Z"
+            id="路径" stroke="currentColor" stroke-width="2" opacity="0.5"></path>
+        <path d="M17,9 C17,13.418278 13.418278,17 9,17" id="路径" stroke="currentColor" stroke-width="2"></path>
+        <path
+            d="M9,13.5714286 C11.5247303,13.5714286 13.5714286,11.5247303 13.5714286,9 C13.5714286,6.47526972 11.5247303,4.42857143 9,4.42857143 C6.47526972,4.42857143 4.42857143,6.47526972 4.42857143,9 C4.42857143,11.5247303 6.47526972,13.5714286 9,13.5714286 Z"
+            id="路径" fill="currentColor" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/icons/job/preheat/scope.svg b/src/assets/images/job/preheat/scope.svg
similarity index 93%
rename from public/icons/job/preheat/scope.svg
rename to src/assets/images/job/preheat/scope.svg
index 1faa845..cc72b44 100644
--- a/public/icons/job/preheat/scope.svg
+++ b/src/assets/images/job/preheat/scope.svg
@@ -2,8 +2,8 @@
     p-id="11900" width="200" height="200">
     <path
         d="M793.144889 348.899556c0 134.485333-158.321778 308.110222-281.031111 434.631111-122.652444-126.464-280.974222-289.109333-280.974222-434.631111 0-159.232 126.065778-288.711111 281.031111-288.711112 154.908444 0 280.974222 129.536 280.974222 288.711112z m-127.886222-7.793778A153.429333 153.429333 0 0 0 512.113778 187.733333a153.372444 153.372444 0 0 0 0 306.631111 153.429333 153.429333 0 0 0 153.144889-153.315555zM512.113778 0C323.697778 0 170.951111 156.216889 170.951111 348.899556c-11.377778 226.929778 341.162667 519.452444 341.162667 519.452444S853.333333 584.305778 853.333333 348.842667C853.333333 156.216889 700.472889 0 512.113778 0z m0 434.289778A93.070222 93.070222 0 0 1 419.271111 341.105778c0-51.484444 41.528889-93.184 92.899556-93.184 51.313778 0 92.956444 41.756444 92.956444 93.184 0 51.484444-41.642667 93.184-92.956444 93.184z"
-        fill="#515151" p-id="11901"></path>
+        fill="currentColor" p-id="11901"></path>
     <path
         d="M807.708444 659.342222c97.564444 35.84 159.402667 89.258667 159.402667 148.821334 0 108.088889-203.776 195.697778-455.111111 195.697777s-455.111111-87.608889-455.111111-195.697777c0-61.44 65.820444-116.337778 168.846222-152.234667l45.738667 58.538667c-79.872 22.528-130.503111 56.149333-130.503111 93.696 0 67.925333 166.115556 123.050667 371.029333 123.050666 204.913778 0 371.029333-55.125333 371.029333-123.050666 0-36.864-48.753778-69.916444-126.065777-92.444445l50.744888-56.376889z"
-        fill="#515151" p-id="11902"></path>
+        fill="currentColor" p-id="11902"></path>
 </svg>
\ No newline at end of file
diff --git a/public/icons/job/preheat/status-failure.svg b/src/assets/images/job/preheat/status-failure.svg
similarity index 100%
rename from public/icons/job/preheat/status-failure.svg
rename to src/assets/images/job/preheat/status-failure.svg
diff --git a/public/icons/job/preheat/status-pending.svg b/src/assets/images/job/preheat/status-pending.svg
similarity index 100%
rename from public/icons/job/preheat/status-pending.svg
rename to src/assets/images/job/preheat/status-pending.svg
diff --git a/public/icons/job/preheat/status-success.svg b/src/assets/images/job/preheat/status-success.svg
similarity index 100%
rename from public/icons/job/preheat/status-success.svg
rename to src/assets/images/job/preheat/status-success.svg
diff --git a/public/icons/job/preheat/status.svg b/src/assets/images/job/preheat/status.svg
similarity index 87%
rename from public/icons/job/preheat/status.svg
rename to src/assets/images/job/preheat/status.svg
index 63d9f6a..2035be5 100644
--- a/public/icons/job/preheat/status.svg
+++ b/src/assets/images/job/preheat/status.svg
@@ -2,8 +2,8 @@
     width="64" height="64">
     <path
         d="M268.780203 512.006305A243.638379 243.638379 0 1 0 512.418581 268.367927 244.142806 244.142806 0 0 0 268.780203 512.006305z m412.117092 0A167.974286 167.974286 0 1 1 512.418581 344.032019 168.478713 168.478713 0 0 1 680.392867 512.006305z"
-        fill="#515151" p-id="7190"></path>
+        fill="currentColor" p-id="7190"></path>
     <path
         d="M947.739329 476.696395v7.061982a34.301055 34.301055 0 0 0 40.354182 30.770065 40.85861 40.85861 0 0 0 34.301056-44.389601A511.993695 511.993695 0 1 0 512.418581 1024a514.515831 514.515831 0 0 0 478.197067-329.391017 37.832046 37.832046 0 0 0-70.61982-27.239074 436.329602 436.329602 0 1 1 27.239073-190.673514z"
-        fill="#515151" p-id="7191"></path>
+        fill="currentColor" p-id="7191"></path>
 </svg>
\ No newline at end of file
diff --git a/public/icons/job/preheat/success.svg b/src/assets/images/job/preheat/success.svg
similarity index 100%
rename from public/icons/job/preheat/success.svg
rename to src/assets/images/job/preheat/success.svg
diff --git a/public/icons/job/preheat/tag-scope.svg b/src/assets/images/job/preheat/tag-scope.svg
similarity index 100%
rename from public/icons/job/preheat/tag-scope.svg
rename to src/assets/images/job/preheat/tag-scope.svg
diff --git a/public/icons/job/preheat/tag.svg b/src/assets/images/job/preheat/tag.svg
similarity index 90%
rename from public/icons/job/preheat/tag.svg
rename to src/assets/images/job/preheat/tag.svg
index 3d13fdf..c61fa56 100644
--- a/public/icons/job/preheat/tag.svg
+++ b/src/assets/images/job/preheat/tag.svg
@@ -2,8 +2,8 @@
     p-id="37181" width="64" height="64">
     <path
         d="M323.008 786.752c-52.928 0-96-43.072-96-96s43.072-96 96-96 96 43.072 96 96-43.072 96-96 96z m0-128c-17.632 0-32 14.336-32 32s14.368 32 32 32 32-14.336 32-32-14.368-32-32-32z"
-        p-id="37182" fill="#515151"></path>
+        p-id="37182" fill="currentColor"></path>
     <path
         d="M416.096 927.072H284.224c-159.936 0-186.912-59.232-186.912-192v-140.8c0-74.272 14.304-96.256 70.72-150.976l327.04-319.904C531.648 87.904 600.96 88 637.376 123.296l263.072 256.032c18.336 17.792 28.864 43.552 28.864 70.656 0 27.296-10.656 53.28-29.248 71.264L610.048 815.84c-65.504 64.576-112.832 111.232-193.952 111.232zM566.24 159.488c-10.496 0-20.16 3.52-26.528 9.696L212.672 489.12c-49.952 48.48-51.36 54.528-51.36 105.152v140.8c0 110.272 8.352 128 122.912 128h131.872c52.672 0 83.744-28.48 148.992-92.8l26.656-26.144 263.232-268.256c6.784-6.592 10.336-15.808 10.336-25.888 0-9.888-3.424-18.88-9.472-24.736L592.768 169.216c-6.336-6.176-16.032-9.728-26.528-9.728z"
-        p-id="37183" fill="#515151"></path>
+        p-id="37183" fill="currentColor"></path>
 </svg>
\ No newline at end of file
diff --git a/public/icons/job/preheat/url.svg b/src/assets/images/job/preheat/url.svg
similarity index 91%
rename from public/icons/job/preheat/url.svg
rename to src/assets/images/job/preheat/url.svg
index 3e03b8a..d181139 100644
--- a/public/icons/job/preheat/url.svg
+++ b/src/assets/images/job/preheat/url.svg
@@ -2,8 +2,8 @@
     p-id="41168" width="64" height="64">
     <path
         d="M578.133 675.627c-3.306-3.307-8.746-3.307-12.053 0L442.133 799.573c-57.386 57.387-154.24 63.467-217.6 0-63.466-63.466-57.386-160.213 0-217.6L348.48 458.027c3.307-3.307 3.307-8.747 0-12.054l-42.453-42.453c-3.307-3.307-8.747-3.307-12.054 0L170.027 527.467c-90.24 90.24-90.24 236.266 0 326.4s236.266 90.24 326.4 0L620.373 729.92c3.307-3.307 3.307-8.747 0-12.053l-42.24-42.24z m275.84-505.6c-90.24-90.24-236.266-90.24-326.4 0L403.52 293.973c-3.307 3.307-3.307 8.747 0 12.054l42.347 42.346c3.306 3.307 8.746 3.307 12.053 0l123.947-123.946c57.386-57.387 154.24-63.467 217.6 0 63.466 63.466 57.386 160.213 0 217.6L675.52 565.973c-3.307 3.307-3.307 8.747 0 12.054l42.453 42.453c3.307 3.307 8.747 3.307 12.054 0l123.946-123.947c90.134-90.24 90.134-236.266 0-326.506z"
-        p-id="41169" fill="#515151"></path>
+        p-id="41169" fill="currentColor"></path>
     <path
         d="M616.64 362.987c-3.307-3.307-8.747-3.307-12.053 0l-241.6 241.493c-3.307 3.307-3.307 8.747 0 12.053l42.24 42.24c3.306 3.307 8.746 3.307 12.053 0L658.773 417.28c3.307-3.307 3.307-8.747 0-12.053l-42.133-42.24z"
-        p-id="41170" fill="#515151"></path>
+        p-id="41170" fill="currentColor"></path>
 </svg>
\ No newline at end of file
diff --git a/src/assets/images/job/task/clear-cache.svg b/src/assets/images/job/task/clear-cache.svg
new file mode 100644
index 0000000..c8fe2da
--- /dev/null
+++ b/src/assets/images/job/task/clear-cache.svg
@@ -0,0 +1,6 @@
+<svg t="1734621890610" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="86832" width="200" height="200">
+    <path
+        d="M189.824 574.464h679.168c22.4 0 33.088-15.872 23.488-35.328L812.352 376.32c-9.6-19.456-35.776-35.328-58.176-35.328H613.76v-238.08c0-21.504-18.176-38.912-41.088-38.912H491.52c-22.4 0-41.152 17.408-41.152 38.912v238.592H305.152c-22.4 0-48.64 15.872-58.24 35.328l-80 162.816c-10.24 18.944 0.512 34.816 22.912 34.816z m660.992 57.856H224c3.2 60.416 2.112 132.608-50.176 175.616-73.152 59.904-48.64 125.952 3.2 152.064h106.24c10.688-13.824 68.352-91.648 84.928-170.496 2.624-16.384 4.224-27.136 4.224-27.136-0.512 9.216-2.112 17.92-4.224 27.136-8.064 50.176-26.24 153.6-39.552 170.496h76.864c10.688-13.824 68.352-91.648 84.928-170.496 2.688-16.384 4.288-27.136 4.288-27.136-0.576 9.216-2.176 17.92-4.288 27.136-8 50.176-26.176 153.6-39.488 170.496h97.152c10.688-13.824 68.352-91.648 84.864-170.496 2.688-16.384 4.288-27.136 4.288-27.136-0.512 9.216-2.112 17.92-4.288 27.136-8 50.176-26.112 153.6-39.488 170.496h97.152c10.688-13.824 68.352-91.648 84.928-170.496 2.624-16.384 4.224-27.136 4.224-27.136-0.512 9.216-2.112 17.92-4.224 27.136-8 50.176-26.176 153.6-39.552 170.496h98.24s64.64-22.016 54.464-93.696c-12.8-101.376-18.688-158.208-37.888-233.984z"
+        fill="currentColor" p-id="86833"></path>
+</svg>
\ No newline at end of file
diff --git a/public/icons/job/task/created.svg b/src/assets/images/job/task/created.svg
similarity index 100%
rename from public/icons/job/task/created.svg
rename to src/assets/images/job/task/created.svg
diff --git a/src/assets/images/job/task/dark-no-task.svg b/src/assets/images/job/task/dark-no-task.svg
new file mode 100644
index 0000000..c780320
--- /dev/null
+++ b/src/assets/images/job/task/dark-no-task.svg
@@ -0,0 +1,112 @@
+<svg width="806.024484px" height="803.299507px" viewBox="0 0 806.024484 803.299507" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组">
+            <circle id="椭圆形" stroke="#ADADAD" stroke-width="0.6" cx="399.7" cy="403.599507" r="399.7"></circle>
+            <circle id="椭圆形" stroke="#ADADAD" stroke-width="0.6" cx="395.7" cy="401.599507" r="324.7"></circle>
+            <circle id="椭圆形" stroke="#ADADAD" stroke-width="0.6" cx="395.7" cy="403.599507" r="249.7"></circle>
+            <circle id="椭圆形" stroke="#ADADAD" stroke-width="0.6" cx="396.7" cy="403.599507" r="174.7"></circle>
+            <circle id="椭圆形" stroke="#ADADAD" stroke-width="0.6" cx="395.7" cy="401.599507" r="99.7"></circle>
+            <path
+                d="M173.559906,570.244525 C206.848262,595.692068 229.047918,617.674969 240.158873,636.193227 C251.269827,654.711485 260.070172,684.395251 266.559906,725.244525 L80.5599062,725.244525 C81.6806375,708.097785 88.8876979,688.446591 102.181087,666.290942 C115.474477,644.135293 139.267416,612.11982 173.559906,570.244525 Z"
+                id="三角形" fill="#0D121E" fill-rule="nonzero"
+                transform="translate(173.5599, 647.7445) rotate(37) translate(-173.5599, -647.7445)"></path>
+            <path
+                d="M401.223492,1.60852869 C435.251376,42.1692215 458.103657,74.440135 469.780335,98.4212693 C481.457013,122.402404 489.604732,153.798157 494.223492,192.608529 L308.223492,192.608529 C310.941627,169.244507 318.634005,144.555377 331.300624,118.541137 C343.967243,92.5268981 367.274865,53.5493619 401.223492,1.60852869 Z"
+                id="三角形" fill="#0D121E" fill-rule="nonzero"
+                transform="translate(401.2235, 97.1085) rotate(-179) translate(-401.2235, -97.1085)"></path>
+            <path
+                d="M662.699956,420.599539 C692.2646,467.034337 712.278405,502.683541 722.741372,527.547151 C733.204339,552.410761 744.190534,590.428223 755.699956,641.599539 L569.699956,641.599539 C583.7109,593.932654 596.094177,557.319696 606.849788,531.760665 C612.005788,519.508235 616.354454,504.249052 625.123469,486.713598 C631.472456,474.017489 643.997951,451.97947 662.699956,420.599539 Z"
+                id="三角形" fill="#0D121E" fill-rule="nonzero"
+                transform="translate(662.7, 531.0995) rotate(-57) translate(-662.7, -531.0995)"></path>
+            <g id="形状" transform="translate(358.7, 361.5996)" fill="#B7B7B7" fill-rule="nonzero">
+                <path
+                    d="M27.2338933,9.65435209 L49.6675999,9.65435209 C50.7780889,9.65435209 51.6926408,9.28958291 52.4112558,8.56004453 C53.1293325,7.83050616 53.4883709,6.9016299 53.4883709,5.77341576 L53.4883709,0.000820320511 L23.5116291,0.000820320511 L23.5116291,5.77341576 C23.5116291,6.8349105 23.8709366,7.73042705 24.5895516,8.45996543 C25.3076283,9.1895038 26.1890755,9.58763269 27.2338933,9.65435209 Z M65.9300994,0 L60.5421018,0 L60.5421018,10.2515454 C60.4764307,12.1092979 59.8396355,13.6517739 58.6317164,14.8789734 C57.423259,16.1067198 55.9047474,16.7536792 54.0761818,16.8198518 L22.9238182,16.8198518 C21.0952526,16.7536792 19.5770102,16.1067198 18.3690911,14.8789734 C17.1606336,13.6517739 16.5235693,12.1092979 16.4578982,10.2515454 L16.4578982,0 L11.0699006,0 C7.93544734,0.0661725212 5.32313382,1.16075352 3.23296003,3.28374301 C1.14332452,5.40727937 0.0656711827,8.06128966 0,11.2457739 L0,72.7534058 C0.0656711827,75.9384369 1.14332452,78.5924472 3.23296003,80.7154367 C5.32313382,82.838973 7.93544734,83.9338275 11.0699006,84 L65.9300994,84 C69.0645527,83.9338275 71.6768662,82.838973 73.76704,80.7154367 C75.8566755,78.5924472 76.9343288,75.9384369 77,72.7534058 L77,11.2457739 C76.9343288,8.06074278 75.8566755,5.40673249 73.76704,3.28374301 C71.6768662,1.16075352 69.0645527,0.0661725212 65.9300994,0 Z M47.2186569,59.5175344 L19.789365,59.5175344 C18.8096801,59.4508149 18.0095144,59.0690925 17.3888679,58.3723669 C16.7682214,57.6756414 16.4578982,56.8296175 16.4578982,55.8342953 L16.4578982,55.2371019 C16.4578982,54.2423266 16.7518036,53.3965761 17.3396145,52.6998506 C17.9274254,52.003125 18.7111733,51.5883163 19.6908582,51.4554244 L47.1209576,51.4554244 C48.1006425,51.5215969 48.9008081,51.9030459 49.5214546,52.5997715 C50.1415629,53.296497 50.451617,54.1425209 50.451617,55.1378431 L50.451617,55.7350365 C50.5167499,56.7303587 50.2389931,57.5763826 49.6183465,58.2731081 C48.9982383,58.9698337 48.1983418,59.3846424 47.2186569,59.5175344 L47.2186569,59.5175344 Z M60.5421018,43.4933935 L20.1809698,43.4933935 C19.136152,43.427221 18.2708534,43.0457719 17.585074,42.3490464 C16.8992946,41.6523208 16.5235693,40.7729372 16.4578982,39.7108956 L16.4578982,39.1145226 C16.5235693,38.1192004 16.8992946,37.2564966 17.585074,36.5264114 C18.2708534,35.7963261 19.136152,35.4312835 20.1809698,35.4312835 L60.5421018,35.4312835 C61.5212484,35.4312835 62.3701292,35.7963261 63.0887442,36.5264114 C63.8073592,37.2564966 64.1666667,38.1192004 64.1666667,39.1145226 L64.264366,39.7108956 C64.1992331,40.7729372 63.823777,41.6523208 63.1379976,42.3490464 C62.4522182,43.0457719 61.5869196,43.427221 60.5421018,43.4933935 Z">
+                </path>
+            </g>
+            <rect id="矩形" fill="#ADADAD" fill-rule="nonzero" x="522.7" y="307.599507" width="60" height="60" rx="10">
+            </rect>
+            <rect id="矩形" fill="#ADADAD" fill-rule="nonzero" x="662.7" y="240.599507" width="50" height="50" rx="8">
+            </rect>
+            <rect id="矩形" fill="#ADADAD" fill-rule="nonzero" x="532.7" y="94.5995061" width="50" height="50" rx="8">
+            </rect>
+            <rect id="矩形" fill="#ADADAD" fill-rule="nonzero" x="125.7" y="167.599507" width="50" height="50" rx="8">
+            </rect>
+            <rect id="矩形" fill="#ADADAD" fill-rule="nonzero" x="657.7" y="510.599507" width="50" height="50" rx="8">
+            </rect>
+            <rect id="矩形" fill="#ADADAD" fill-rule="nonzero" x="113.7" y="569.599507" width="50" height="50" rx="8">
+            </rect>
+            <rect id="矩形" fill="#ADADAD" fill-rule="nonzero" x="216.7" y="465.599507" width="60" height="60" rx="13">
+            </rect>
+            <rect id="矩形" fill="#ADADAD" fill-rule="nonzero" x="272.7" y="232.599507" width="60" height="60" rx="11">
+            </rect>
+            <g id="形状" transform="translate(127.7, 582.5996)" fill="#1B283A" fill-rule="nonzero">
+                <path
+                    d="M18.5445026,0 L3.45549738,0 C1.55497382,0 0,1.6875 0,3.75 L0,21.25 C0,23.3125 1.55497382,25 3.45549738,25 L18.5445026,25 C20.4450262,25 22,23.3125 22,21.25 L22,3.75 C22,1.6875 20.4450262,0 18.5445026,0 Z M20.8481675,21.25 C20.8481675,22.625 19.8115183,23.75 18.5445026,23.75 L3.45549738,23.75 C2.18848168,23.75 1.15183246,22.625 1.15183246,21.25 L1.15183246,3.75 C1.15183246,2.375 2.18848168,1.25 3.45549738,1.25 L18.5445026,1.25 C19.8115183,1.25 20.8481675,2.375 20.8481675,3.75 L20.8481675,21.25 Z">
+                </path>
+                <path
+                    d="M17.3971226,15.1416845 L7.97031286,15.1416845 C7.64147066,15.1416845 7.42224252,15.395757 7.42224252,15.7768657 C7.42224252,16.1579745 7.64147066,16.412047 7.97031286,16.412047 L17.4519297,16.412047 C17.7807719,16.412047 18,16.1579745 18,15.7768657 C18,15.395757 17.7259648,15.1416845 17.3971226,15.1416845 L17.3971226,15.1416845 Z M4.95592601,13.5537315 C3.91459237,13.5537315 3.03767984,14.5700214 3.03767984,15.7768657 C3.03767984,16.9837101 3.91459237,18 4.95592601,18 C5.99725965,18 6.87417219,16.9837101 6.87417219,15.7768657 C6.81936515,14.5700214 5.99725965,13.5537315 4.95592601,13.5537315 Z M4.95592601,16.7296376 C4.51746974,16.7296376 4.13382051,16.2850107 4.13382051,15.7768657 C4.13382051,15.2687208 4.46266271,14.8240939 4.95592601,14.8240939 C5.39438228,14.8240939 5.77803151,15.2687208 5.77803151,15.7768657 C5.72322448,16.2850107 5.39438228,16.7296376 4.95592601,16.7296376 L4.95592601,16.7296376 Z M17.3971226,5.80452062 L7.97031286,5.80452062 C7.64147066,5.80452062 7.42224252,6.05859311 7.42224252,6.43970184 C7.42224252,6.82081057 7.64147066,7.07488305 7.97031286,7.07488305 L17.4519297,7.07488305 C17.7807719,7.07488305 18,6.82081057 18,6.43970184 C18,6.05859311 17.7259648,5.80452062 17.3971226,5.80452062 L17.3971226,5.80452062 Z M4.62708381,8.02765488 C4.73669788,8.091173 4.84631194,8.15469112 4.95592601,8.15469112 L5.06554008,8.15469112 C5.22996118,8.091173 5.33957525,8.02765488 5.39438228,7.83710052 L6.76455812,4.97878504 C6.92897922,4.66119443 6.81936515,4.2800857 6.54532998,4.08953133 C6.27129482,3.89897697 5.94245261,4.02601321 5.77803151,4.34360382 L4.68189084,6.56673808 L3.85978534,5.93155686 C3.58575017,5.7410025 3.25690797,5.80452062 3.09248687,6.12211123 C2.92806577,6.43970184 2.9828728,6.82081057 3.25690797,7.01136493 L4.62708381,8.02765488 Z">
+                </path>
+            </g>
+            <g id="形状" transform="translate(288.7, 247.5996)" fill="#1B283A" fill-rule="nonzero">
+                <path
+                    d="M23,5.58437161 L16.4956122,0 L0,0 L0,26 L23,26 L23,5.58437161 Z M2.24677854,24.0017845 L2.24677854,1.9982155 L14.5790677,1.9982155 L14.5790677,7.4523342 L20.7531857,7.4523342 L20.7531857,24.0017845 L2.24677854,24.0017845 Z">
+                </path>
+                <path
+                    d="M24.7519424,8 L24.7519424,27.1355933 L4,27.1355933 L4,29 L27,29 L27,8 L24.7519424,8 Z M4.10582378,10.6337572 L17.9455202,10.6337572 L17.9455202,12.4515631 L4.10582378,12.4515631 L4.10582378,10.6337572 Z">
+                </path>
+                <path
+                    d="M4,15 L18,15 L18,16.7724899 L4,16.7724899 L4,15 Z M4,19.2275101 L18,19.2275101 L18,21 L4,21 L4,19.2275101 Z">
+                </path>
+            </g>
+            <g id="形状" transform="translate(231.7, 481.5996)" fill="#1B283A" fill-rule="nonzero">
+                <path
+                    d="M29.1421419,16.4927172 L16.4145042,22.4002432 C15.1959176,22.9475827 14.7106947,22.9475827 13.5859707,22.4002432 L0.857858137,16.4927172 C0.182196061,16.1221263 0,14.7508702 0,14.002648 C0.849615033,14.5036812 2.04438832,15.0623697 1.99998417,15.0340324 L15.000017,21.2223388 L28.0004907,15.0340324 C28.0224384,15.028358 29.1815255,14.4252197 30,14.002648 C30,14.7683489 29.7701772,16.1901847 29.1421419,16.4927172 Z M29.1421419,10.3038854 L16.4145042,16.2119018 C15.1959176,16.7592763 14.7106947,16.7592763 13.5859707,16.2119018 L0.857858137,10.3038854 C-0.141896492,9.75605543 -0.110789856,8.03077648 0.857858137,7.38651588 L13.5859707,0.447115053 C14.7106947,-0.1328701 15.4142747,-0.164990315 16.4145042,0.447115053 L29.1421419,7.38651588 C30.1107559,7.9343458 30.0787334,9.85248611 29.1421419,10.3038854 Z M14.999983,1.62501944 L1.99995026,8.84520063 L14.999983,14.5017547 L28.0004907,8.84520063 L14.999983,1.62501944 Z M14.999983,27.4115559 L28.0004568,21.2223038 C28.0224045,21.2166293 29.1814916,20.613491 29.9999661,20.1909194 C29.9999661,20.9566553 29.7701772,22.3784911 29.142108,22.6810235 L16.4145042,28.5894953 C15.1959176,29.1368349 14.7106947,29.1368349 13.5859707,28.5894953 L0.857858137,22.6809885 C0.182196061,22.3103977 0,20.939632 0,20.1909194 C0.849615033,20.6919526 2.04438832,21.250641 1.99998417,21.2222688 L14.999983,27.4115559 Z">
+                </path>
+            </g>
+            <g transform="translate(664.7, 523.5996)" fill="#1B283A" fill-rule="nonzero">
+                <polygon id="路径"
+                    points="17.1924743 2.21813986e-15 18.7998845 2.21813986e-15 18.7998845 24.9990816 17.1924743 24.9990816 17.1924743 0">
+                </polygon>
+                <path
+                    d="M0.304950711,24.5784045 L0.305361527,24.5789236 L0,24.9976041 L0.610024671,24.9976041 L0.611092801,24.9990815 L1.49213456,24.9990815 L2.08864328,24.9990815 L14.7915678,24.9990815 L14.7915678,23.4359277 L14.7915678,7.55118407 L14.7915678,6.73147265 L14.7915678,4.68083644 L1.13677638,23.4359676 L0.304950711,24.5784045 Z M3.22016115,23.4336915 L3.68381113,22.8045327 L3.68504358,22.8062897 L13.314387,9.58093613 L13.314387,22.843346 L13.3145102,22.843346 L13.3145102,23.4359277 L13.3145102,23.4361274 L13.1738459,23.4361274 L13.1738459,23.436367 L4.33298679,23.436367 L3.57625878,23.436367 L3.57625878,23.4359277 L3.57625878,23.4345701 L3.22016115,23.4336915 Z"
+                    id="形状"></path>
+                <path
+                    d="M35.3815125,24.9988819 L36,24.9966059 L35.5711875,24.419278 L21.2032149,4.69792711 L21.2032149,6.74708583 L21.2032149,7.56559928 L21.2032149,24.9990417 L34.5006761,24.9990417 L35.0622653,24.9990417 L35.0592252,25 L35.323546,24.9990417 L35.3813892,24.9990417 L35.3815125,24.9988819 Z M31.7814673,23.4378444 L31.7820424,23.436327 L22.8185539,23.436327 L22.8185539,23.4349294 L22.6815049,23.4349294 L22.6815049,22.9709268 L22.6803956,22.9709268 L22.6803956,9.59387389 L32.1970104,22.6551095 L32.1982839,22.6551095 L32.4630565,23.0223185 L32.4630565,23.0243949 L32.7627488,23.4378444 L31.7814673,23.4378444 Z"
+                    id="形状"></path>
+            </g>
+            <g id="形状" transform="translate(672.7, 250.5996)" fill="#1B283A" fill-rule="nonzero">
+                <path
+                    d="M15.8823529,23.5714286 L15.8823529,27.8571428 L21.1764706,27.8571428 L21.1764706,30 L8.8235294,30 L8.8235294,27.8571428 L14.1176471,27.8571428 L14.1176471,23.5714286 L0,23.5714286 L0,0 L30,0 L30,23.5714286 L15.8823529,23.5714286 Z M15.8823529,21.4285714 L28.2352941,21.4285714 L28.2352941,2.14285716 L1.76470586,2.14285716 L1.76470586,21.4285714 L15.8823529,21.4285714 Z">
+                </path>
+            </g>
+            <g id="形状" transform="translate(135.7, 177.5996)" fill="#1B283A" fill-rule="nonzero">
+                <path
+                    d="M22.8139482,14.0185105 L15.9810344,14.0185105 L15.9810344,7.18581856 C15.9810344,5.70076493 16.425481,4.28436342 17.2637866,3.0919846 C18.0442781,1.98271097 19.128294,1.11191311 20.3965927,0.573536002 C21.6215307,0.053225244 22.9404167,-0.116598407 24.2123287,0.0785181281 C25.5818022,0.288087739 26.8501008,0.927636379 27.879916,1.92489867 L27.9774774,2.02245693 L28.0750389,2.1200152 C29.0723335,3.14979691 29.7119029,4.41805438 29.9214793,5.78748339 C30.1166022,7.05574087 29.946773,8.37819738 29.4264454,9.60309562 C28.8880508,10.8713531 28.0172247,11.9553338 26.907915,12.7358 C25.7154975,13.5776917 24.29905,14.0185105 22.8139482,14.0185105 L22.8139482,14.0185105 Z M17.5709245,12.4286721 L22.8139482,12.4286721 C23.9702318,12.4286721 25.0687013,12.0854115 25.9937283,11.4386364 C26.860941,10.8279939 27.543871,9.97887561 27.9630239,8.98522659 C28.3677232,8.03132354 28.5014185,7.01238164 28.3496562,6.0331857 C28.1870538,4.97449783 27.7100868,4.03143458 26.9332087,3.22928883 C26.907915,3.20399595 26.8826213,3.17508979 26.8537142,3.14979691 C26.8284205,3.12450403 26.7995134,3.09921114 26.7742197,3.07030499 C25.9720479,2.29345212 25.0253407,1.81650059 23.9702318,1.65390348 C22.9910041,1.50214617 21.9720291,1.63583713 21.0180951,2.04052328 C20.0244139,2.46327577 19.175268,3.14257037 18.5646057,4.00975497 C17.9141962,4.9311386 17.5745378,6.02957243 17.5745378,7.18943182 L17.5709245,12.4286721 L17.5709245,12.4286721 Z M14.0189656,14.0185105 L7.18605181,14.0185105 C5.70094998,14.0185105 4.2845025,13.5740784 3.09208497,12.7358 C1.98277533,11.9553338 1.1119492,10.8713531 0.573554619,9.60309562 C0.0532269711,8.37819738 -0.116602191,7.05935414 0.0785206762,5.79109666 C0.28809709,4.42166765 0.927666491,3.15341018 1.92496115,2.12362847 L2.02252258,2.0260702 L2.12008402,1.92851194 C3.14989915,0.931249648 4.4181978,0.291701008 5.78767126,0.0821313972 C7.0559699,-0.112985137 8.37846934,0.0568385132 9.60340734,0.577149271 C10.871706,1.11552638 11.9557219,1.98632424 12.7362134,3.09559787 C13.574519,4.28797669 14.0189656,5.7043782 14.0189656,7.18943182 L14.0189656,14.0185105 Z M6.82109978,1.5924779 C6.55732257,1.5924779 6.29354536,1.61415752 6.03338154,1.65390348 C4.97465931,1.81650059 4.03156545,2.29345212 3.22939366,3.07030499 C3.20409995,3.09559787 3.17519286,3.12089076 3.14989915,3.14979691 L3.07040465,3.22928883 C2.29352657,4.03143458 1.81655956,4.9781111 1.65395717,6.0331857 C1.50219494,7.01238164 1.63589023,8.03132354 2.04058952,8.98522659 C2.46335573,9.97887561 3.14267238,10.8279939 4.00988513,11.4386364 C4.93129867,12.0890248 6.02976815,12.4286721 7.1896652,12.4286721 L12.4326889,12.4286721 L12.4326889,7.18581856 C12.4326889,6.02957243 12.0894172,4.9311386 11.442621,4.0061417 C10.8319587,3.1389571 9.98281292,2.45604923 8.98913165,2.03691001 C8.28452129,1.74423521 7.54739046,1.5924779 6.82109978,1.5924779 Z M6.82109978,30 C6.47421468,30 6.13094297,29.9747071 5.79128465,29.9205081 C4.42181118,29.7109385 3.15351254,29.0713898 2.1236974,28.0741275 L2.02613597,27.9765693 L1.92857454,27.879011 C0.931279877,26.8492293 0.291710477,25.5809718 0.0821340627,24.2115428 C-0.112988805,22.9432853 0.0568403576,21.6208288 0.577168006,20.3959306 C1.11556259,19.1276731 1.98638872,18.0436924 3.09569836,17.2632262 C4.28811588,16.4249478 5.70456337,15.9805157 7.1896652,15.9805157 L14.022579,15.9805157 L14.022579,22.8132077 C14.022579,24.2982613 13.5781324,25.7146628 12.7398268,26.9070416 C11.9557219,28.0163152 10.871706,28.8907264 9.60340734,29.4254902 C8.70728751,29.8048835 7.76058026,30 6.82109978,30 Z M7.18605181,17.5739674 C6.02976815,17.5739674 4.93129867,17.9172279 4.00627174,18.5640031 C3.139059,19.1746456 2.45612896,20.0237639 2.03697613,21.0174129 C1.63227685,21.9713159 1.49858155,22.9902578 1.65034378,23.9694538 C1.81294617,25.0281416 2.28991318,25.9712049 3.06679127,26.7733506 C3.09208497,26.7986435 3.11737868,26.8275497 3.14628577,26.8528426 L3.22578027,26.9323345 C4.02795206,27.7091874 4.97465931,28.1861389 6.02976815,28.348736 C7.00899588,28.5004933 8.02797085,28.3668023 8.98190488,27.9621162 C9.97558615,27.5393637 10.824732,26.8600691 11.4353943,25.9928845 C12.0858038,25.0715009 12.4254622,23.973067 12.4254622,22.8132077 L12.4254622,17.5739674 L7.18605181,17.5739674 Z M23.1789002,30 C22.2394197,30 21.2927125,29.8048835 20.3965927,29.4254902 C19.128294,28.8871131 18.0442781,28.0163152 17.2637866,26.9070416 C16.425481,25.7146628 15.9810344,24.2982613 15.9810344,22.8132077 L15.9810344,15.9841289 L22.8139482,15.9841289 C24.29905,15.9841289 25.7154975,16.4285611 26.907915,17.2668395 C28.0172247,18.0473056 28.8880508,19.1312864 29.4264454,20.3995439 C29.946773,21.6244421 30.1166022,22.9432853 29.9214793,24.2151561 C29.7119029,25.5845851 29.0723335,26.8528426 28.0750389,27.8826243 L27.9774774,27.9801825 L27.879916,28.0777408 C26.8501008,29.0750031 25.5818022,29.7145517 24.2123287,29.9241213 C23.869057,29.9747071 23.5257853,30 23.1789002,30 L23.1789002,30 Z M17.5709245,17.5739674 L17.5709245,22.8132077 C17.5709245,23.9694538 17.9141962,25.0678876 18.5609923,25.9928845 C19.1716547,26.8600691 20.0208005,27.5393637 21.0144817,27.9621162 C21.9684158,28.3668023 22.9873907,28.5004933 23.9666185,28.348736 C25.0253407,28.1861389 25.9684346,27.7091874 26.7706063,26.9323345 C26.7959,26.9070416 26.8248071,26.8817487 26.8501008,26.8528426 C26.8753946,26.8275497 26.9006883,26.7986435 26.9295953,26.7733506 C27.7064734,25.9712049 28.1834404,25.0245284 28.3460428,23.9694538 C28.4978051,22.9902578 28.3641098,21.9713159 27.9594105,21.0174129 C27.5366443,20.0237639 26.8573276,19.1746456 25.9901149,18.5640031 C25.0687013,17.9136147 23.9702318,17.5739674 22.8103348,17.5739674 L17.5709245,17.5739674 L17.5709245,17.5739674 Z">
+                </path>
+            </g>
+            <g id="形状" transform="translate(535.7, 323.5996)" fill="#1B283A" fill-rule="nonzero">
+                <path
+                    d="M32.7272891,4.16531875 L18.80501,4.16531875 C17.9600112,4.16531875 17.2645341,3.58190491 17.1778648,2.83348578 C17.175958,2.7980152 17.1733316,2.76277392 17.1700577,2.72766363 C17.1694101,2.71037049 17.1686545,2.69307738 17.1686545,2.67562047 L17.1686545,2.68066429 L17.1654885,2.68066429 C17.0009284,1.17527773 15.6056568,0 13.9091473,0 L3.27274689,0 C1.46557121,0 0,1.33363434 0,2.97933107 L0,25.0207017 C0,26.6661037 1.46549928,28 3.27274689,28 L32.7272891,28 C34.5344288,28 36,26.6661036 36,25.0207017 L36,7.14468256 C36,5.49898583 34.5345007,4.16531875 32.7272891,4.16531875 Z M34.3636805,25.0207017 C34.3636805,25.8434026 33.6308589,26.5103345 32.727325,26.5103345 L3.27274689,26.5103345 C2.36892519,26.5103345 1.63639143,25.8434027 1.63639143,25.0207017 L1.63639143,8.63431532 L34.3636805,8.63431532 L34.3636805,25.0207017 Z M1.63639143,7.14468256 L1.63639143,2.97936381 C1.63639143,2.15679385 2.36892519,1.48969828 3.27274689,1.48969828 L13.9091473,1.48969828 C14.7546858,1.48969828 15.4503788,2.07373441 15.5364005,2.82267758 C15.5382713,2.8575586 15.5408257,2.89227588 15.5439917,2.92682939 C15.5446753,2.94428627 15.5454668,2.96174316 15.5454668,2.97936381 L15.5492084,2.97936381 C15.7163589,4.48232671 17.1104073,5.65498428 18.804974,5.65498428 L32.727325,5.65498428 C33.6308229,5.65498428 34.3636445,6.32207986 34.3636445,7.14468256 L1.63639143,7.14468256 L1.63639143,7.14468256 Z">
+                </path>
+            </g>
+            <text id="No-Caching" fill="#DBDBDB" fill-rule="nonzero" font-family="MabryPro-Bold, Mabry Pro"
+                font-size="34" font-weight="bold">
+                <tspan x="308.7" y="638.599507">No Caching</tspan>
+            </text>
+            <text id="Please-enter-the-task-id-in-your-search" fill="#ADADAD" fill-rule="nonzero"
+                font-family="MabryPro-Light, Mabry Pro" font-size="30" font-weight="300">
+                <tspan x="155.411426" y="708.599507">Please enter the task id in your search</tspan>
+            </text>
+            <text id="box-to-search-for-cache." fill="#ADADAD" fill-rule="nonzero"
+                font-family="MabryPro-Light, Mabry Pro" font-size="30" font-weight="300">
+                <tspan x="246.554004" y="744.599507">box to search for cache.</tspan>
+            </text>
+            <g id="形状" transform="translate(542.7, 104.5996)" fill="#1B283A" fill-rule="nonzero">
+                <path
+                    d="M27.4285714,0 C28.8487322,0 30,1.1851286 30,2.64705882 L30,27.3529412 C30,28.8148714 28.8487322,30 27.4285714,30 L2.57142857,30 C1.15126779,30 0,28.8148714 0,27.3529412 L0,2.64705882 C0,1.1851286 1.15126779,0 2.57142857,0 L27.4285714,0 Z M27.8571429,20.7352941 L2.14285198,20.7352941 L2.14285198,27.3529412 C2.14222438,27.5842384 2.31522887,27.7767712 2.53928571,27.794123 L27.4285714,27.794123 C27.6532601,27.794769 27.840292,27.6166762 27.8571429,27.3860294 L27.8571429,20.7352941 Z M18.4285714,23.1617647 L18.4285714,25.3676471 L5.14285714,25.3676471 L5.14285714,23.1617647 L18.4285714,23.1617647 Z M23.7857143,23.1617647 C24.3774479,23.1617647 24.8571429,23.6555683 24.8571429,24.2647059 C24.8571429,24.8738435 24.3774479,25.3676471 23.7857143,25.3676471 C23.1939806,25.3676471 22.7142857,24.8738435 22.7142857,24.2647059 C22.7142857,23.6555683 23.1939806,23.1617647 23.7857143,23.1617647 Z M27.8571429,11.4705882 L2.14285714,11.4705882 L2.14285714,18.5294118 L27.8571429,18.5294118 L27.8571429,11.4705882 Z M18.4285714,13.8970588 L18.4285714,16.1029412 L5.14285714,16.1029412 L5.14285714,13.8970588 L18.4285714,13.8970588 Z M23.7857143,13.8970588 C24.3774479,13.8970588 24.8571429,14.3908624 24.8571429,15 C24.8571429,15.6091376 24.3774479,16.1029412 23.7857143,16.1029412 C23.1939806,16.1029412 22.7142857,15.6091376 22.7142857,15 C22.7142857,14.3908624 23.1939806,13.8970588 23.7857143,13.8970588 Z M27.4285714,2.20587704 L2.57142857,2.20587704 C2.34673986,2.20523098 2.15970797,2.38332384 2.14285714,2.61397059 L2.14285714,9.26470588 L27.857148,9.26470588 L27.857148,2.64705882 C27.8577756,2.41576162 27.6847711,2.2232288 27.4607143,2.20587704 L27.4285714,2.20587704 Z M18.4285714,4.63235294 L18.4285714,6.83823529 L5.14285714,6.83823529 L5.14285714,4.63235294 L18.4285714,4.63235294 Z M23.7857143,4.63235294 C24.3774479,4.63235294 24.8571429,5.12615653 24.8571429,5.73529412 C24.8571429,6.34443171 24.3774479,6.83823529 23.7857143,6.83823529 C23.1939806,6.83823529 22.7142857,6.34443171 22.7142857,5.73529412 C22.7142857,5.12615653 23.1939806,4.63235294 23.7857143,4.63235294 Z">
+                </path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/job/task/error-log.svg b/src/assets/images/job/task/error-log.svg
new file mode 100644
index 0000000..8d0a83f
--- /dev/null
+++ b/src/assets/images/job/task/error-log.svg
@@ -0,0 +1,9 @@
+<svg t="1739345988441" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7118"
+    width="200" height="200">
+    <path
+        d="M574.336 1014.59H99.395C44.477 1014.59 0 969.79 0 914.62V99.84C0 44.8 44.483 0 99.395 0h654.848c54.845 0 99.328 44.8 99.328 99.968v375.296a291.84 291.84 0 0 0-193.92 16.445c-139.648 62.464-217.283 202.88-186.307 351.232a324.736 324.736 0 0 0 100.992 171.648z m-452.29-751.867v22.405c0 15.744 12.677 28.544 28.354 28.544h411.008c15.683 0 28.355-12.8 28.355-28.544v-22.405a28.416 28.416 0 0 0-28.355-28.544h-410.88a28.472 28.472 0 0 0-28.483 28.544z m0 159.17v22.4c0 15.806 8.575 28.544 19.2 28.544h277.631c10.691 0 19.2-12.8 19.2-28.544v-22.405c0-15.744-8.509-28.544-19.2-28.544H141.256c-10.63 0-19.2 12.8-19.2 28.544z"
+        p-id="7119" fill="currentColor"></path>
+    <path
+        d="M778.24 532.48c-135.731 0-245.76 110.029-245.76 245.76S642.509 1024 778.24 1024 1024 913.971 1024 778.24 913.971 532.48 778.24 532.48z m112.686 315.003c3.748 3.748 3.748 9.825 0 13.573l-29.87 29.87a9.6 9.6 0 0 1-13.578 0l-69.238-69.243-69.238 69.243a9.6 9.6 0 0 1-13.578 0l-29.87-29.87a9.6 9.6 0 0 1 0-13.573l69.243-69.243-69.243-69.238a9.6 9.6 0 0 1 0-13.578l29.87-29.87a9.6 9.6 0 0 1 13.578 0l69.238 69.243 69.243-69.243a9.6 9.6 0 0 1 13.573 0l29.87 29.87c3.748 3.748 3.748 9.83 0 13.573l-69.243 69.243 69.243 69.243z"
+        p-id="7120" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/job/task/executions.svg b/src/assets/images/job/task/executions.svg
new file mode 100644
index 0000000..93421a9
--- /dev/null
+++ b/src/assets/images/job/task/executions.svg
@@ -0,0 +1,6 @@
+<svg t="1734622047782" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="99745" width="200" height="200">
+    <path
+        d="M512 22C241.38 22 22 241.38 22 512s219.38 490 490 490 490-219.38 490-490S782.62 22 512 22z m166.21 533.29h-0.02l-240.7 160.47a52.004 52.004 0 0 1-53.45 2.59 51.972 51.972 0 0 1-27.43-45.94v-320.8a51.994 51.994 0 0 1 27.42-45.96 52 52 0 0 1 53.46 2.58l240.72 160.48A52.016 52.016 0 0 1 701.4 512a52.04 52.04 0 0 1-23.19 43.29z"
+        fill="currentColor" p-id="99746"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/job/task/failure.svg b/src/assets/images/job/task/failure.svg
new file mode 100644
index 0000000..db8e73d
--- /dev/null
+++ b/src/assets/images/job/task/failure.svg
@@ -0,0 +1,5 @@
+<svg t="1729770117937" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="32879" width="200" height="200">
+    <path d="M512 512m-447.616766 0a438 438 0 1 0 895.233533 0 438 438 0 1 0-895.233533 0Z" fill="#D81E06" p-id="32880">
+    </path>
+</svg>ƒ
\ No newline at end of file
diff --git a/src/assets/images/job/task/hostname.svg b/src/assets/images/job/task/hostname.svg
new file mode 100644
index 0000000..330f90e
--- /dev/null
+++ b/src/assets/images/job/task/hostname.svg
@@ -0,0 +1,9 @@
+<svg t="1730211671411" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="108226" width="200" height="200">
+    <path
+        d="M907.190857 73.142857H116.955429A43.812571 43.812571 0 0 0 73.142857 117.028571v225.572572c0 24.210286 19.602286 43.885714 43.812572 43.885714H906.971429c24.210286 0 43.812571-19.675429 43.812571-43.885714V117.028571A43.666286 43.666286 0 0 0 907.190857 73.142857z m-26.770286 242.688H143.652571V143.725714h736.694858v172.105143h0.073142z m26.624 160.182857H117.028571a43.885714 43.885714 0 0 0-43.885714 43.885715v226.889142c0 24.137143 19.748571 43.885714 43.885714 43.885715h789.942858a43.885714 43.885714 0 0 0 43.885714-43.885715V519.972571a43.812571 43.812571 0 0 0-43.812572-43.885714z m-26.624 244.077715H143.652571V546.596571h736.694858v173.494858h0.073142z m35.108572 160.182857H108.544a35.254857 35.254857 0 1 0 0 70.582857h807.131429a35.254857 35.254857 0 1 0 0-70.582857z"
+        fill="#515155" p-id="108227"></path>
+    <path
+        d="M754.980571 229.814857a35.254857 35.254857 0 1 0 70.509715 0 35.254857 35.254857 0 0 0-70.509715 0z m0 403.529143a35.254857 35.254857 0 1 0 70.509715 0 35.254857 35.254857 0 0 0-70.509715 0z"
+        fill="#515155" p-id="108228"></path>
+</svg>
\ No newline at end of file
diff --git a/public/icons/job/task/ip.svg b/src/assets/images/job/task/ip.svg
similarity index 100%
rename from public/icons/job/task/ip.svg
rename to src/assets/images/job/task/ip.svg
diff --git a/public/icons/job/task/no-search.svg b/src/assets/images/job/task/no-search.svg
similarity index 100%
rename from public/icons/job/task/no-search.svg
rename to src/assets/images/job/task/no-search.svg
diff --git a/src/assets/images/job/task/no-task.svg b/src/assets/images/job/task/no-task.svg
new file mode 100644
index 0000000..d755a41
--- /dev/null
+++ b/src/assets/images/job/task/no-task.svg
@@ -0,0 +1,109 @@
+<svg width="806.02452px" height="803.299449px" viewBox="0 0 806.02452 803.299449" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组">
+            <circle id="椭圆形" stroke="#D8D8D8" stroke-width="0.6" cx="399.7" cy="403.599449" r="399.7"></circle>
+            <circle id="椭圆形" stroke="#D8D8D8" stroke-width="0.6" cx="395.7" cy="401.599449" r="324.7"></circle>
+            <circle id="椭圆形" stroke="#D8D8D8" stroke-width="0.6" cx="395.7" cy="403.599449" r="249.7"></circle>
+            <circle id="椭圆形" stroke="#D8D8D8" stroke-width="0.6" cx="396.7" cy="403.599449" r="174.7"></circle>
+            <circle id="椭圆形" stroke="#D8D8D8" stroke-width="0.6" cx="395.7" cy="401.599449" r="99.7"></circle>
+            <polygon id="三角形" fill="#FFFFFF" fill-rule="nonzero"
+                transform="translate(173.5599, 647.7445) rotate(37) translate(-173.5599, -647.7445)"
+                points="173.559885 570.24447 266.559885 725.24447 80.5598852 725.24447"></polygon>
+            <polygon id="三角形" fill="#FFFFFF" fill-rule="nonzero"
+                transform="translate(401.2235, 97.1085) rotate(-179) translate(-401.2235, -97.1085)"
+                points="401.223509 1.60852869 494.223509 192.608529 308.223509 192.608529"></polygon>
+            <polygon id="三角形" fill="#FFFFFF" fill-rule="nonzero"
+                transform="translate(662.7, 531.0995) rotate(-57) translate(-662.7, -531.0995)"
+                points="662.699992 420.599453 755.699992 641.599453 569.699992 641.599453"></polygon>
+            <g transform="translate(358.7, 361.5995)" fill="#1C293A" fill-rule="nonzero" id="形状">
+                <path
+                    d="M27.2338933,9.65435209 L49.6675999,9.65435209 C50.7780889,9.65435209 51.6926408,9.28958291 52.4112558,8.56004453 C53.1293325,7.83050616 53.4883709,6.9016299 53.4883709,5.77341576 L53.4883709,0.000820320511 L23.5116291,0.000820320511 L23.5116291,5.77341576 C23.5116291,6.8349105 23.8709366,7.73042705 24.5895516,8.45996543 C25.3076283,9.1895038 26.1890755,9.58763269 27.2338933,9.65435209 Z M65.9300994,0 L60.5421018,0 L60.5421018,10.2515454 C60.4764307,12.1092979 59.8396355,13.6517739 58.6317164,14.8789734 C57.423259,16.1067198 55.9047474,16.7536792 54.0761818,16.8198518 L22.9238182,16.8198518 C21.0952526,16.7536792 19.5770102,16.1067198 18.3690911,14.8789734 C17.1606336,13.6517739 16.5235693,12.1092979 16.4578982,10.2515454 L16.4578982,0 L11.0699006,0 C7.93544734,0.0661725212 5.32313382,1.16075352 3.23296003,3.28374301 C1.14332452,5.40727937 0.0656711827,8.06128966 0,11.2457739 L0,72.7534058 C0.0656711827,75.9384369 1.14332452,78.5924472 3.23296003,80.7154367 C5.32313382,82.838973 7.93544734,83.9338275 11.0699006,84 L65.9300994,84 C69.0645527,83.9338275 71.6768662,82.838973 73.76704,80.7154367 C75.8566755,78.5924472 76.9343288,75.9384369 77,72.7534058 L77,11.2457739 C76.9343288,8.06074278 75.8566755,5.40673249 73.76704,3.28374301 C71.6768662,1.16075352 69.0645527,0.0661725212 65.9300994,0 Z M47.2186569,59.5175344 L19.789365,59.5175344 C18.8096801,59.4508149 18.0095144,59.0690925 17.3888679,58.3723669 C16.7682214,57.6756414 16.4578982,56.8296175 16.4578982,55.8342953 L16.4578982,55.2371019 C16.4578982,54.2423266 16.7518036,53.3965761 17.3396145,52.6998506 C17.9274254,52.003125 18.7111733,51.5883163 19.6908582,51.4554244 L47.1209576,51.4554244 C48.1006425,51.5215969 48.9008081,51.9030459 49.5214546,52.5997715 C50.1415629,53.296497 50.451617,54.1425209 50.451617,55.1378431 L50.451617,55.7350365 C50.5167499,56.7303587 50.2389931,57.5763826 49.6183465,58.2731081 C48.9982383,58.9698337 48.1983418,59.3846424 47.2186569,59.5175344 L47.2186569,59.5175344 Z M60.5421018,43.4933935 L20.1809698,43.4933935 C19.136152,43.427221 18.2708534,43.0457719 17.585074,42.3490464 C16.8992946,41.6523208 16.5235693,40.7729372 16.4578982,39.7108956 L16.4578982,39.1145226 C16.5235693,38.1192004 16.8992946,37.2564966 17.585074,36.5264114 C18.2708534,35.7963261 19.136152,35.4312835 20.1809698,35.4312835 L60.5421018,35.4312835 C61.5212484,35.4312835 62.3701292,35.7963261 63.0887442,36.5264114 C63.8073592,37.2564966 64.1666667,38.1192004 64.1666667,39.1145226 L64.264366,39.7108956 C64.1992331,40.7729372 63.823777,41.6523208 63.1379976,42.3490464 C62.4522182,43.0457719 61.5869196,43.427221 60.5421018,43.4933935 Z">
+                </path>
+            </g>
+            <rect id="矩形" fill="#EEEEEE" fill-rule="nonzero" x="522.7" y="307.599449" width="60" height="60" rx="10">
+            </rect>
+            <rect id="矩形" fill="#F3F3F3" fill-rule="nonzero" x="662.7" y="240.599449" width="50" height="50" rx="8">
+            </rect>
+            <rect id="矩形" fill="#F8F8F8" fill-rule="nonzero" x="532.7" y="94.5994486" width="50" height="50" rx="8">
+            </rect>
+            <rect id="矩形" fill="#F8F8F8" fill-rule="nonzero" x="125.7" y="167.599449" width="50" height="50" rx="8">
+            </rect>
+            <rect id="矩形" fill="#F2F2F2" fill-rule="nonzero" x="657.7" y="510.599449" width="50" height="50" rx="8">
+            </rect>
+            <rect id="矩形" fill="#F2F2F2" fill-rule="nonzero" x="113.7" y="569.599449" width="50" height="50" rx="8">
+            </rect>
+            <g transform="translate(127.7, 582.5995)" fill="#1B283A" fill-rule="nonzero" id="形状">
+                <path
+                    d="M18.5445026,0 L3.45549738,0 C1.55497382,0 0,1.6875 0,3.75 L0,21.25 C0,23.3125 1.55497382,25 3.45549738,25 L18.5445026,25 C20.4450262,25 22,23.3125 22,21.25 L22,3.75 C22,1.6875 20.4450262,0 18.5445026,0 Z M20.8481675,21.25 C20.8481675,22.625 19.8115183,23.75 18.5445026,23.75 L3.45549738,23.75 C2.18848168,23.75 1.15183246,22.625 1.15183246,21.25 L1.15183246,3.75 C1.15183246,2.375 2.18848168,1.25 3.45549738,1.25 L18.5445026,1.25 C19.8115183,1.25 20.8481675,2.375 20.8481675,3.75 L20.8481675,21.25 Z">
+                </path>
+                <path
+                    d="M17.3971226,15.1416845 L7.97031286,15.1416845 C7.64147066,15.1416845 7.42224252,15.395757 7.42224252,15.7768657 C7.42224252,16.1579745 7.64147066,16.412047 7.97031286,16.412047 L17.4519297,16.412047 C17.7807719,16.412047 18,16.1579745 18,15.7768657 C18,15.395757 17.7259648,15.1416845 17.3971226,15.1416845 L17.3971226,15.1416845 Z M4.95592601,13.5537315 C3.91459237,13.5537315 3.03767984,14.5700214 3.03767984,15.7768657 C3.03767984,16.9837101 3.91459237,18 4.95592601,18 C5.99725965,18 6.87417219,16.9837101 6.87417219,15.7768657 C6.81936515,14.5700214 5.99725965,13.5537315 4.95592601,13.5537315 Z M4.95592601,16.7296376 C4.51746974,16.7296376 4.13382051,16.2850107 4.13382051,15.7768657 C4.13382051,15.2687208 4.46266271,14.8240939 4.95592601,14.8240939 C5.39438228,14.8240939 5.77803151,15.2687208 5.77803151,15.7768657 C5.72322448,16.2850107 5.39438228,16.7296376 4.95592601,16.7296376 L4.95592601,16.7296376 Z M17.3971226,5.80452062 L7.97031286,5.80452062 C7.64147066,5.80452062 7.42224252,6.05859311 7.42224252,6.43970184 C7.42224252,6.82081057 7.64147066,7.07488305 7.97031286,7.07488305 L17.4519297,7.07488305 C17.7807719,7.07488305 18,6.82081057 18,6.43970184 C18,6.05859311 17.7259648,5.80452062 17.3971226,5.80452062 L17.3971226,5.80452062 Z M4.62708381,8.02765488 C4.73669788,8.091173 4.84631194,8.15469112 4.95592601,8.15469112 L5.06554008,8.15469112 C5.22996118,8.091173 5.33957525,8.02765488 5.39438228,7.83710052 L6.76455812,4.97878504 C6.92897922,4.66119443 6.81936515,4.2800857 6.54532998,4.08953133 C6.27129482,3.89897697 5.94245261,4.02601321 5.77803151,4.34360382 L4.68189084,6.56673808 L3.85978534,5.93155686 C3.58575017,5.7410025 3.25690797,5.80452062 3.09248687,6.12211123 C2.92806577,6.43970184 2.9828728,6.82081057 3.25690797,7.01136493 L4.62708381,8.02765488 Z">
+                </path>
+            </g>
+            <rect id="矩形" fill="#EEEEEE" fill-rule="nonzero" x="216.7" y="465.599449" width="60" height="60" rx="13">
+            </rect>
+            <rect id="矩形" fill="#F4F4F4" fill-rule="nonzero" x="272.7" y="232.599449" width="60" height="60" rx="11">
+            </rect>
+            <g transform="translate(288.7, 247.5995)" fill="#1B283A" fill-rule="nonzero" id="形状">
+                <path
+                    d="M23,5.58437161 L16.4956122,0 L0,0 L0,26 L23,26 L23,5.58437161 Z M2.24677854,24.0017845 L2.24677854,1.9982155 L14.5790677,1.9982155 L14.5790677,7.4523342 L20.7531857,7.4523342 L20.7531857,24.0017845 L2.24677854,24.0017845 Z">
+                </path>
+                <path
+                    d="M24.7519424,8 L24.7519424,27.1355933 L4,27.1355933 L4,29 L27,29 L27,8 L24.7519424,8 Z M4.10582378,10.6337572 L17.9455202,10.6337572 L17.9455202,12.4515631 L4.10582378,12.4515631 L4.10582378,10.6337572 Z">
+                </path>
+                <path
+                    d="M4,15 L18,15 L18,16.7724899 L4,16.7724899 L4,15 Z M4,19.2275101 L18,19.2275101 L18,21 L4,21 L4,19.2275101 Z">
+                </path>
+            </g>
+            <g transform="translate(231.7, 481.5995)" fill="#1B283A" fill-rule="nonzero" id="形状">
+                <path
+                    d="M29.1421419,16.4927172 L16.4145042,22.4002432 C15.1959176,22.9475827 14.7106947,22.9475827 13.5859707,22.4002432 L0.857858137,16.4927172 C0.182196061,16.1221263 0,14.7508702 0,14.002648 C0.849615033,14.5036812 2.04438832,15.0623697 1.99998417,15.0340324 L15.000017,21.2223388 L28.0004907,15.0340324 C28.0224384,15.028358 29.1815255,14.4252197 30,14.002648 C30,14.7683489 29.7701772,16.1901847 29.1421419,16.4927172 Z M29.1421419,10.3038854 L16.4145042,16.2119018 C15.1959176,16.7592763 14.7106947,16.7592763 13.5859707,16.2119018 L0.857858137,10.3038854 C-0.141896492,9.75605543 -0.110789856,8.03077648 0.857858137,7.38651588 L13.5859707,0.447115053 C14.7106947,-0.1328701 15.4142747,-0.164990315 16.4145042,0.447115053 L29.1421419,7.38651588 C30.1107559,7.9343458 30.0787334,9.85248611 29.1421419,10.3038854 Z M14.999983,1.62501944 L1.99995026,8.84520063 L14.999983,14.5017547 L28.0004907,8.84520063 L14.999983,1.62501944 Z M14.999983,27.4115559 L28.0004568,21.2223038 C28.0224045,21.2166293 29.1814916,20.613491 29.9999661,20.1909194 C29.9999661,20.9566553 29.7701772,22.3784911 29.142108,22.6810235 L16.4145042,28.5894953 C15.1959176,29.1368349 14.7106947,29.1368349 13.5859707,28.5894953 L0.857858137,22.6809885 C0.182196061,22.3103977 0,20.939632 0,20.1909194 C0.849615033,20.6919526 2.04438832,21.250641 1.99998417,21.2222688 L14.999983,27.4115559 Z">
+                </path>
+            </g>
+            <g transform="translate(664.7, 523.5995)" fill="#1B283A" fill-rule="nonzero">
+                <polygon id="路径"
+                    points="17.1924743 2.21813986e-15 18.7998845 2.21813986e-15 18.7998845 24.9990816 17.1924743 24.9990816 17.1924743 0">
+                </polygon>
+                <path
+                    d="M0.304950711,24.5784045 L0.305361527,24.5789236 L0,24.9976041 L0.610024671,24.9976041 L0.611092801,24.9990815 L1.49213456,24.9990815 L2.08864328,24.9990815 L14.7915678,24.9990815 L14.7915678,23.4359277 L14.7915678,7.55118407 L14.7915678,6.73147265 L14.7915678,4.68083644 L1.13677638,23.4359676 L0.304950711,24.5784045 Z M3.22016115,23.4336915 L3.68381113,22.8045327 L3.68504358,22.8062897 L13.314387,9.58093613 L13.314387,22.843346 L13.3145102,22.843346 L13.3145102,23.4359277 L13.3145102,23.4361274 L13.1738459,23.4361274 L13.1738459,23.436367 L4.33298679,23.436367 L3.57625878,23.436367 L3.57625878,23.4359277 L3.57625878,23.4345701 L3.22016115,23.4336915 Z"
+                    id="形状"></path>
+                <path
+                    d="M35.3815125,24.9988819 L36,24.9966059 L35.5711875,24.419278 L21.2032149,4.69792711 L21.2032149,6.74708583 L21.2032149,7.56559928 L21.2032149,24.9990417 L34.5006761,24.9990417 L35.0622653,24.9990417 L35.0592252,25 L35.323546,24.9990417 L35.3813892,24.9990417 L35.3815125,24.9988819 Z M31.7814673,23.4378444 L31.7820424,23.436327 L22.8185539,23.436327 L22.8185539,23.4349294 L22.6815049,23.4349294 L22.6815049,22.9709268 L22.6803956,22.9709268 L22.6803956,9.59387389 L32.1970104,22.6551095 L32.1982839,22.6551095 L32.4630565,23.0223185 L32.4630565,23.0243949 L32.7627488,23.4378444 L31.7814673,23.4378444 Z"
+                    id="形状"></path>
+            </g>
+            <g transform="translate(672.7, 250.5995)" fill="#1B283A" fill-rule="nonzero" id="形状">
+                <path
+                    d="M15.8823529,23.5714286 L15.8823529,27.8571428 L21.1764706,27.8571428 L21.1764706,30 L8.8235294,30 L8.8235294,27.8571428 L14.1176471,27.8571428 L14.1176471,23.5714286 L0,23.5714286 L0,0 L30,0 L30,23.5714286 L15.8823529,23.5714286 Z M15.8823529,21.4285714 L28.2352941,21.4285714 L28.2352941,2.14285716 L1.76470586,2.14285716 L1.76470586,21.4285714 L15.8823529,21.4285714 Z">
+                </path>
+            </g>
+            <g transform="translate(135.7, 177.5995)" fill="#1B283A" fill-rule="nonzero" id="形状">
+                <path
+                    d="M22.8139482,14.0185105 L15.9810344,14.0185105 L15.9810344,7.18581856 C15.9810344,5.70076493 16.425481,4.28436342 17.2637866,3.0919846 C18.0442781,1.98271097 19.128294,1.11191311 20.3965927,0.573536002 C21.6215307,0.0532252439 22.9404167,-0.116598407 24.2123287,0.078518128 C25.5818022,0.288087739 26.8501008,0.927636379 27.879916,1.92489867 L27.9774774,2.02245693 L28.0750389,2.1200152 C29.0723335,3.14979691 29.7119029,4.41805438 29.9214793,5.78748339 C30.1166022,7.05574087 29.946773,8.37819738 29.4264454,9.60309562 C28.8880508,10.8713531 28.0172247,11.9553338 26.907915,12.7358 C25.7154975,13.5776917 24.29905,14.0185105 22.8139482,14.0185105 L22.8139482,14.0185105 Z M17.5709245,12.4286721 L22.8139482,12.4286721 C23.9702318,12.4286721 25.0687013,12.0854115 25.9937283,11.4386364 C26.860941,10.8279939 27.543871,9.97887561 27.9630239,8.98522659 C28.3677232,8.03132354 28.5014185,7.01238164 28.3496562,6.0331857 C28.1870538,4.97449783 27.7100868,4.03143458 26.9332087,3.22928883 C26.907915,3.20399595 26.8826213,3.17508979 26.8537142,3.14979691 C26.8284205,3.12450403 26.7995134,3.09921114 26.7742197,3.07030499 C25.9720479,2.29345212 25.0253407,1.81650059 23.9702318,1.65390348 C22.9910041,1.50214617 21.9720291,1.63583713 21.0180951,2.04052328 C20.0244139,2.46327577 19.175268,3.14257037 18.5646057,4.00975497 C17.9141962,4.9311386 17.5745378,6.02957243 17.5745378,7.18943182 L17.5709245,12.4286721 L17.5709245,12.4286721 Z M14.0189656,14.0185105 L7.18605181,14.0185105 C5.70094998,14.0185105 4.2845025,13.5740784 3.09208497,12.7358 C1.98277533,11.9553338 1.1119492,10.8713531 0.573554619,9.60309562 C0.0532269712,8.37819738 -0.116602191,7.05935414 0.0785206763,5.79109666 C0.28809709,4.42166765 0.927666491,3.15341018 1.92496115,2.12362847 L2.02252258,2.0260702 L2.12008402,1.92851194 C3.14989915,0.931249648 4.4181978,0.291701008 5.78767126,0.0821313971 C7.0559699,-0.112985137 8.37846934,0.0568385131 9.60340734,0.577149271 C10.871706,1.11552638 11.9557219,1.98632424 12.7362134,3.09559787 C13.574519,4.28797669 14.0189656,5.7043782 14.0189656,7.18943182 L14.0189656,14.0185105 Z M6.82109978,1.5924779 C6.55732257,1.5924779 6.29354536,1.61415752 6.03338154,1.65390348 C4.97465931,1.81650059 4.03156545,2.29345212 3.22939366,3.07030499 C3.20409995,3.09559787 3.17519286,3.12089076 3.14989915,3.14979691 L3.07040465,3.22928883 C2.29352657,4.03143458 1.81655956,4.9781111 1.65395717,6.0331857 C1.50219494,7.01238164 1.63589023,8.03132354 2.04058952,8.98522659 C2.46335573,9.97887561 3.14267238,10.8279939 4.00988513,11.4386364 C4.93129867,12.0890248 6.02976815,12.4286721 7.1896652,12.4286721 L12.4326889,12.4286721 L12.4326889,7.18581856 C12.4326889,6.02957243 12.0894172,4.9311386 11.442621,4.0061417 C10.8319587,3.1389571 9.98281292,2.45604923 8.98913165,2.03691001 C8.28452129,1.74423521 7.54739046,1.5924779 6.82109978,1.5924779 Z M6.82109978,30 C6.47421468,30 6.13094297,29.9747071 5.79128465,29.9205081 C4.42181118,29.7109385 3.15351254,29.0713898 2.1236974,28.0741275 L2.02613597,27.9765693 L1.92857454,27.879011 C0.931279877,26.8492293 0.291710477,25.5809718 0.0821340628,24.2115428 C-0.112988805,22.9432853 0.0568403577,21.6208288 0.577168006,20.3959306 C1.11556259,19.1276731 1.98638872,18.0436924 3.09569836,17.2632262 C4.28811588,16.4249478 5.70456337,15.9805157 7.1896652,15.9805157 L14.022579,15.9805157 L14.022579,22.8132077 C14.022579,24.2982613 13.5781324,25.7146628 12.7398268,26.9070416 C11.9557219,28.0163152 10.871706,28.8907264 9.60340734,29.4254902 C8.70728751,29.8048835 7.76058026,30 6.82109978,30 Z M7.18605181,17.5739674 C6.02976815,17.5739674 4.93129867,17.9172279 4.00627174,18.5640031 C3.139059,19.1746456 2.45612896,20.0237639 2.03697613,21.0174129 C1.63227685,21.9713159 1.49858155,22.9902578 1.65034378,23.9694538 C1.81294617,25.0281416 2.28991318,25.9712049 3.06679127,26.7733506 C3.09208497,26.7986435 3.11737868,26.8275497 3.14628577,26.8528426 L3.22578027,26.9323345 C4.02795206,27.7091874 4.97465931,28.1861389 6.02976815,28.348736 C7.00899588,28.5004933 8.02797085,28.3668023 8.98190488,27.9621162 C9.97558615,27.5393637 10.824732,26.8600691 11.4353943,25.9928845 C12.0858038,25.0715009 12.4254622,23.973067 12.4254622,22.8132077 L12.4254622,17.5739674 L7.18605181,17.5739674 Z M23.1789002,30 C22.2394197,30 21.2927125,29.8048835 20.3965927,29.4254902 C19.128294,28.8871131 18.0442781,28.0163152 17.2637866,26.9070416 C16.425481,25.7146628 15.9810344,24.2982613 15.9810344,22.8132077 L15.9810344,15.9841289 L22.8139482,15.9841289 C24.29905,15.9841289 25.7154975,16.4285611 26.907915,17.2668395 C28.0172247,18.0473056 28.8880508,19.1312864 29.4264454,20.3995439 C29.946773,21.6244421 30.1166022,22.9432853 29.9214793,24.2151561 C29.7119029,25.5845851 29.0723335,26.8528426 28.0750389,27.8826243 L27.9774774,27.9801825 L27.879916,28.0777408 C26.8501008,29.0750031 25.5818022,29.7145517 24.2123287,29.9241213 C23.869057,29.9747071 23.5257853,30 23.1789002,30 L23.1789002,30 Z M17.5709245,17.5739674 L17.5709245,22.8132077 C17.5709245,23.9694538 17.9141962,25.0678876 18.5609923,25.9928845 C19.1716547,26.8600691 20.0208005,27.5393637 21.0144817,27.9621162 C21.9684158,28.3668023 22.9873907,28.5004933 23.9666185,28.348736 C25.0253407,28.1861389 25.9684346,27.7091874 26.7706063,26.9323345 C26.7959,26.9070416 26.8248071,26.8817487 26.8501008,26.8528426 C26.8753946,26.8275497 26.9006883,26.7986435 26.9295953,26.7733506 C27.7064734,25.9712049 28.1834404,25.0245284 28.3460428,23.9694538 C28.4978051,22.9902578 28.3641098,21.9713159 27.9594105,21.0174129 C27.5366443,20.0237639 26.8573276,19.1746456 25.9901149,18.5640031 C25.0687013,17.9136147 23.9702318,17.5739674 22.8103348,17.5739674 L17.5709245,17.5739674 L17.5709245,17.5739674 Z">
+                </path>
+            </g>
+            <g transform="translate(535.7, 323.5995)" fill="#1B283A" fill-rule="nonzero" id="形状">
+                <path
+                    d="M32.7272891,4.16531875 L18.80501,4.16531875 C17.9600112,4.16531875 17.2645341,3.58190491 17.1778648,2.83348578 C17.175958,2.7980152 17.1733316,2.76277392 17.1700577,2.72766363 C17.1694101,2.71037049 17.1686545,2.69307738 17.1686545,2.67562047 L17.1686545,2.68066429 L17.1654885,2.68066429 C17.0009284,1.17527773 15.6056568,0 13.9091473,0 L3.27274689,0 C1.46557121,0 0,1.33363434 0,2.97933107 L0,25.0207017 C0,26.6661037 1.46549928,28 3.27274689,28 L32.7272891,28 C34.5344288,28 36,26.6661036 36,25.0207017 L36,7.14468256 C36,5.49898583 34.5345007,4.16531875 32.7272891,4.16531875 Z M34.3636805,25.0207017 C34.3636805,25.8434026 33.6308589,26.5103345 32.727325,26.5103345 L3.27274689,26.5103345 C2.36892519,26.5103345 1.63639143,25.8434027 1.63639143,25.0207017 L1.63639143,8.63431532 L34.3636805,8.63431532 L34.3636805,25.0207017 Z M1.63639143,7.14468256 L1.63639143,2.97936381 C1.63639143,2.15679385 2.36892519,1.48969828 3.27274689,1.48969828 L13.9091473,1.48969828 C14.7546858,1.48969828 15.4503788,2.07373441 15.5364005,2.82267758 C15.5382713,2.8575586 15.5408257,2.89227588 15.5439917,2.92682939 C15.5446753,2.94428627 15.5454668,2.96174316 15.5454668,2.97936381 L15.5492084,2.97936381 C15.7163589,4.48232671 17.1104073,5.65498428 18.804974,5.65498428 L32.727325,5.65498428 C33.6308229,5.65498428 34.3636445,6.32207986 34.3636445,7.14468256 L1.63639143,7.14468256 L1.63639143,7.14468256 Z">
+                </path>
+            </g>
+            <text id="No-Caching" fill="#000000" fill-rule="nonzero" font-family="MabryPro-Bold, Mabry Pro"
+                font-size="34" font-weight="bold">
+                <tspan x="308.7" y="638.599449">No Caching</tspan>
+            </text>
+            <text id="Please-enter-the-task-id-in-your-search" fill="#565656" fill-rule="nonzero"
+                font-family="MabryPro-Light, Mabry Pro" font-size="30" font-weight="300">
+                <tspan x="155.411426" y="708.599449">Please enter the task id in your search</tspan>
+            </text>
+            <text id="box-to-search-for-cache." fill="#565656" fill-rule="nonzero"
+                font-family="MabryPro-Light, Mabry Pro" font-size="30" font-weight="300">
+                <tspan x="246.554004" y="744.599449">box to search for cache.</tspan>
+            </text>
+            <g transform="translate(542.7, 104.5995)" fill="#1B283A" fill-rule="nonzero" id="形状">
+                <path
+                    d="M27.4285714,0 C28.8487322,0 30,1.1851286 30,2.64705882 L30,27.3529412 C30,28.8148714 28.8487322,30 27.4285714,30 L2.57142857,30 C1.15126779,30 0,28.8148714 0,27.3529412 L0,2.64705882 C0,1.1851286 1.15126779,0 2.57142857,0 L27.4285714,0 Z M27.8571429,20.7352941 L2.14285369,20.7352941 L2.14285369,27.3529412 C2.14222438,27.5842384 2.31522887,27.7767712 2.53928571,27.7941212 L27.4285714,27.7941212 C27.6532601,27.794769 27.840292,27.6166762 27.8571429,27.3860294 L27.8571429,20.7352941 Z M18.4285714,23.1617647 L18.4285714,25.3676471 L5.14285714,25.3676471 L5.14285714,23.1617647 L18.4285714,23.1617647 Z M23.7857143,23.1617647 C24.3774479,23.1617647 24.8571429,23.6555683 24.8571429,24.2647059 C24.8571429,24.8738435 24.3774479,25.3676471 23.7857143,25.3676471 C23.1939806,25.3676471 22.7142857,24.8738435 22.7142857,24.2647059 C22.7142857,23.6555683 23.1939806,23.1617647 23.7857143,23.1617647 Z M27.8571429,11.4705882 L2.14285714,11.4705882 L2.14285714,18.5294118 L27.8571429,18.5294118 L27.8571429,11.4705882 Z M18.4285714,13.8970588 L18.4285714,16.1029412 L5.14285714,16.1029412 L5.14285714,13.8970588 L18.4285714,13.8970588 Z M23.7857143,13.8970588 C24.3774479,13.8970588 24.8571429,14.3908624 24.8571429,15 C24.8571429,15.6091376 24.3774479,16.1029412 23.7857143,16.1029412 C23.1939806,16.1029412 22.7142857,15.6091376 22.7142857,15 C22.7142857,14.3908624 23.1939806,13.8970588 23.7857143,13.8970588 Z M27.4285714,2.2058788 L2.57142857,2.2058788 C2.34673986,2.20523098 2.15970797,2.38332384 2.14285714,2.61397059 L2.14285714,9.26470588 L27.8571463,9.26470588 L27.8571463,2.64705882 C27.8577756,2.41576162 27.6847711,2.2232288 27.4607143,2.2058788 L27.4285714,2.2058788 Z M18.4285714,4.63235294 L18.4285714,6.83823529 L5.14285714,6.83823529 L5.14285714,4.63235294 L18.4285714,4.63235294 Z M23.7857143,4.63235294 C24.3774479,4.63235294 24.8571429,5.12615653 24.8571429,5.73529412 C24.8571429,6.34443171 24.3774479,6.83823529 23.7857143,6.83823529 C23.1939806,6.83823529 22.7142857,6.34443171 22.7142857,5.73529412 C22.7142857,5.12615653 23.1939806,4.63235294 23.7857143,4.63235294 Z">
+                </path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/icons/job/task/scheduler-cluster.svg b/src/assets/images/job/task/scheduler-cluster.svg
similarity index 100%
rename from public/icons/job/task/scheduler-cluster.svg
rename to src/assets/images/job/task/scheduler-cluster.svg
diff --git a/public/icons/job/task/search.svg b/src/assets/images/job/task/search.svg
similarity index 100%
rename from public/icons/job/task/search.svg
rename to src/assets/images/job/task/search.svg
diff --git a/public/icons/job/task/success.svg b/src/assets/images/job/task/success.svg
similarity index 100%
rename from public/icons/job/task/success.svg
rename to src/assets/images/job/task/success.svg
diff --git a/public/icons/job/preheat/job.svg b/src/assets/images/job/task/task-id.svg
similarity index 72%
rename from public/icons/job/preheat/job.svg
rename to src/assets/images/job/task/task-id.svg
index ed3405b..6d46fde 100644
--- a/public/icons/job/preheat/job.svg
+++ b/src/assets/images/job/task/task-id.svg
@@ -1,9 +1,9 @@
-<svg t="1693465155383" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2331"
-    width="64" height="64">
+<svg t="1730360049129" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9414"
+    width="200" height="200">
     <path
         d="M224 800.256L223.712 224H320v31.68c0 35.456 28.64 64.32 63.872 64.32h256.256A64.16 64.16 0 0 0 704 255.68V224l96-0.256L800.256 800 224 800.256zM640 192.32L640.128 256 384 255.68V192.32L383.872 192 640 192.32zM799.84 160H695.04c-11.072-19.04-31.424-32-54.912-32h-256.256c-23.488 0-43.808 12.928-54.912 32H223.712A63.776 63.776 0 0 0 160 223.744v576.512C160 835.392 188.608 864 223.744 864h576.512A63.84 63.84 0 0 0 864 800.256V223.744A64 64 0 0 0 799.84 160z"
-        fill="#000000" p-id="2332"></path>
+        fill="currentColor" p-id="9415"></path>
     <path
         d="M619.072 429.088l-151.744 165.888-62.112-69.6a32 32 0 1 0-47.744 42.624l85.696 96a32 32 0 0 0 23.68 10.688h0.192c8.96 0 17.536-3.776 23.616-10.4l175.648-192a32 32 0 0 0-47.232-43.2"
-        fill="#000000" p-id="2333"></path>
+        fill="currentColor" p-id="9416"></path>
 </svg>
\ No newline at end of file
diff --git a/src/assets/images/job/task/type.svg b/src/assets/images/job/task/type.svg
new file mode 100644
index 0000000..4a9fcd1
--- /dev/null
+++ b/src/assets/images/job/task/type.svg
@@ -0,0 +1,6 @@
+<svg t="1728873539830" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5595"
+    width="200" height="200">
+    <path
+        d="M161.066667 128c-18.24 0-33.066667 14.826667-33.066667 33.066667v285.866666c0 18.24 14.826667 33.066667 33.066667 33.066667h285.866666c18.24 0 33.066667-14.826667 33.066667-33.066667V161.066667c0-18.24-14.826667-33.066667-33.066667-33.066667H161.066667z m254.933333 288H192V192h224v224zM128 862.933333c0 18.24 14.826667 33.066667 33.066667 33.066667h285.866666c18.24 0 33.066667-14.826667 33.066667-33.066667V577.066667c0-18.24-14.826667-33.066667-33.066667-33.066667H161.066667c-18.24 0-33.066667 14.826667-33.066667 33.066667v285.866666z m64-254.933333h224v224H192V608zM577.066667 128c-18.24 0-33.066667 14.826667-33.066667 33.066667v285.866666c0 18.24 14.826667 33.066667 33.066667 33.066667h285.866666c18.24 0 33.066667-14.826667 33.066667-33.066667V161.066667c0-18.24-14.826667-33.066667-33.066667-33.066667H577.066667z m254.933333 288H608V192h224v224zM743.36 514.133333c-6.293333-6.293333-14.506667-9.706667-23.36-9.706666s-17.173333 3.413333-23.36 9.706666L514.133333 696.64c-6.293333 6.293333-9.706667 14.506667-9.706666 23.36s3.413333 17.173333 9.706666 23.36L696.64 925.866667c6.293333 6.293333 14.506667 9.706667 23.36 9.706666s17.173333-3.413333 23.36-9.706666L925.866667 743.36c6.293333-6.293333 9.706667-14.506667 9.706666-23.36s-3.413333-17.173333-9.706666-23.36L743.36 514.133333zM720 858.773333L581.226667 720 720 581.226667 858.773333 720 720 858.773333z"
+        p-id="5596" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/login/dark-dragonfly.svg b/src/assets/images/login/dark-dragonfly.svg
new file mode 100644
index 0000000..afc10da
--- /dev/null
+++ b/src/assets/images/login/dark-dragonfly.svg
@@ -0,0 +1,160 @@
+<svg width="672px" height="756px" viewBox="0 0 672 756" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <rect id="path-kxnp6eis6--1" x="0" y="0" width="131" height="127" rx="3"></rect>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="dragonfly">
+            <rect id="矩形" fill="#1f2430" fill-rule="nonzero" x="0" y="0" width="672" height="756"></rect>
+            <text id="Provides-an-efficient,-stable,-and-secure-file-distribution-and-image" fill="#FFF9F9"
+                fill-rule="nonzero" opacity="0.8" font-family="MabryPro-Light, Mabry Pro" font-size="14"
+                font-weight="300">
+                <tspan x="40" y="535">Provides an efficient, stable, and secure file distribution and image</tspan>
+            </text>
+            <text id="acceleration-system-based-on-P2P-technology,-and-is-a-standard-solution-and" fill="#FFF9F9"
+                fill-rule="nonzero" opacity="0.8" font-family="MabryPro-Light, Mabry Pro" font-size="14"
+                font-weight="300">
+                <tspan x="40" y="552">acceleration system based on P2P technology, and is a standard solution and
+                </tspan>
+            </text>
+            <text id="best-practice-in-the-field-of-image-acceleration-in-the-cloud-native" fill="#FFF9F9"
+                fill-rule="nonzero" opacity="0.8" font-family="MabryPro-Light, Mabry Pro" font-size="14"
+                font-weight="300">
+                <tspan x="40" y="569">best practice in the field of image acceleration in the cloud native</tspan>
+            </text>
+            <text id="architecture." fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Light, Mabry Pro" font-size="14" font-weight="300">
+                <tspan x="40" y="586">architecture.</tspan>
+            </text>
+            <g id="kuaishou_1" opacity="0.8" transform="translate(355, 660)" fill="#FFF9F9" fill-rule="nonzero">
+                <path
+                    d="M8.05140294,12.0753113 C8.15190892,12.0688654 15.25069,11.4994779 15.7226311,11.5725314 C16.1945722,11.6477335 18.0845216,11.5918691 18.1784729,12.315958 C18.2724241,13.0314525 18.1784729,13.7276092 18.1784729,13.7276092 C18.1784729,13.7276092 13.9834407,14.4516981 13.8894894,14.5462379 C13.7955382,14.6386291 13.4546918,14.9738157 13.474356,15.4744469 C13.4940202,15.9772268 13.4940202,17.9281845 13.5114995,17.984049 C13.5311638,18.0399134 13.625115,18.4116267 14.3439512,18.3364246 C14.9098436,18.2784115 15.4735511,18.0807374 15.6898574,18.001238 C15.7444802,17.9797517 15.7794388,17.9281845 15.7728841,17.8701715 L15.7335557,17.3673916 C15.7270009,17.2900409 15.6527139,17.2341764 15.576242,17.2492169 L14.4947102,17.4619314 L14.4947102,15.4551092 L17.99931,14.832006 C18.0735971,14.8191142 18.1435143,14.87283 18.1456992,14.9480321 L18.2614995,18.3471678 C18.2614995,18.3471678 18.4603266,19.1915801 16.9876955,19.4902399 C15.5150644,19.7888998 11.9820607,20.6612443 11.6412144,20.6784334 C11.300368,20.6977711 10.7344756,20.6977711 10.148919,20.5473668 C9.73597056,20.4420839 9.22688592,20.2530043 8.96469641,20.1520186 C8.875115,20.1176404 8.84452622,20.0080602 8.90133395,19.9328581 L10.1904324,18.2096553 C10.2385005,18.147345 10.2625345,18.0699942 10.2625345,17.9926435 L10.2625345,16.0932529 C10.2625345,15.9944158 10.2232061,15.9020247 10.1554738,15.8311198 L7.39592916,12.9777367 C7.32164213,12.9003859 7.28886845,12.7951029 7.30416283,12.68982 C7.33693652,12.4642136 7.48332567,12.1075407 8.05140294,12.0753113 Z M6.18330267,13.2420184 C6.13523459,13.1925998 6.07187213,13.162519 6.00413983,13.1517758 L1.04657314,12.4362814 C0.976655934,12.4233896 0.904553818,12.4298355 0.841191352,12.4599164 C0.624885005,12.5587534 0.152943882,12.8509674 0,13.5750563 L0,19.303309 C0,19.303309 0.0699172033,20.4463811 1.67145814,20.9749446 C3.27299908,21.503508 5.22849586,21.9783557 5.22849586,21.9783557 C5.22849586,21.9783557 6.31876725,22.186773 6.7601196,21.3101311 C7.19928703,20.4313407 9.29680313,17.9238873 9.29680313,17.9238873 L9.29680313,16.4048045 L6.18330267,13.2420184 Z M4.88983441,20.0703705 C4.37856486,20.0574788 2.30071297,19.776008 1.64523919,19.1915801 C1.05094296,18.6630167 1.34809108,14.4946708 1.34809108,14.4946708 C1.34809108,14.4946708 1.35901564,14.0112286 1.64523919,14.0627958 L4.94664213,14.6472236 C4.94664213,14.6472236 5.3574057,14.8835731 5.3574057,15.2187597 L5.3574057,19.7201435 C5.3574057,19.7222922 5.40110396,20.085411 4.88983441,20.0703705 L4.88983441,20.0703705 Z M19,6.74670415 C19,4.52287014 17.2542548,2.71801935 15.099931,2.71801935 C13.8720101,2.71801935 12.775184,3.30459586 12.0607176,4.22206168 C11.4882705,1.79625627 9.44100736,0 7.00264489,0 C4.12293008,0 1.78725851,2.50530479 1.78725851,5.59503746 C1.78725851,8.68477012 4.12293008,11.1900749 7.00264489,11.1900749 C7.15340386,11.1900749 7.30416283,11.1814804 7.45273689,11.16644 L15.2463201,10.7710917 C15.2812787,10.7689431 15.3140524,10.7689431 15.349011,10.7667944 L15.4582567,10.7603485 L15.4560718,10.7581999 C17.4421573,10.5712689 19,8.84591752 19,6.74670415 Z M7.99896504,8.73848592 C6.54162833,8.73848592 5.35959062,7.40203688 5.35959062,5.75188759 C5.35959062,4.10173829 6.54162833,2.76528925 7.99896504,2.76528925 C9.45630175,2.76528925 10.6383395,4.10173829 10.6383395,5.75188759 C10.6383395,7.40203688 9.45630175,8.73848592 7.99896504,8.73848592 L7.99896504,8.73848592 Z M15.7182613,8.60097348 C14.7568997,8.60097348 13.9768859,7.7200344 13.9768859,6.63067803 C13.9768859,5.54132166 14.7568997,4.66038258 15.7182613,4.66038258 C16.6796228,4.66038258 17.4596366,5.54132166 17.4596366,6.63067803 C17.4596366,7.7200344 16.6796228,8.60097348 15.7182613,8.60097348 Z"
+                    id="形状"></path>
+            </g>
+            <rect id="矩形" fill="#FDFEFD" fill-rule="nonzero" opacity="0.1" x="202" y="98" width="164" height="141"
+                rx="4"></rect>
+            <rect id="矩形" fill="#FFFFFE" fill-rule="nonzero" opacity="0.1" x="170" y="322" width="180" height="106"
+                rx="4"></rect>
+            <text id="Dragonfly" fill-opacity="0.8" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Bold, Mabry Pro" font-size="26" font-weight="bold">
+                <tspan x="40" y="61">Dragonfly</tspan>
+            </text>
+            <text id="Welcome-To-Dragonfly-Console-!" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Light, Mabry Pro" font-size="19" font-weight="300">
+                <tspan x="40" y="510">Welcome To Dragonfly Console !</tspan>
+            </text>
+            <g id="矩形" opacity="0.1" transform="translate(336, 212)" fill-rule="nonzero">
+                <g id="path-1-link" fill="#000000">
+                    <rect id="path-1" x="0" y="0" width="149" height="148" rx="4"></rect>
+                </g>
+                <g id="path-1-link" fill="#FBFBFB">
+                    <rect id="path-1" x="0" y="0" width="149" height="148" rx="4"></rect>
+                </g>
+            </g>
+            <text id="Partners" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8" font-family="MabryPro-Bold, Mabry Pro"
+                font-size="14" font-weight="bold">
+                <tspan x="253" y="171">Partners</tspan>
+            </text>
+            <g id="路径" transform="translate(358, 246)" fill-rule="nonzero">
+                <polygon fill="#2E8F79"
+                    points="5.99016393 27.9769737 0 27.9769737 0 42 13.9770492 42 13.9770492 35.9901316 5.99016393 35.9901316">
+                </polygon>
+                <polygon fill="#2E8F79"
+                    points="36.0098361 35.9901316 28.0229508 35.9901316 28.0229508 42 42 42 42 27.9769737 36.0098361 28.0460526">
+                </polygon>
+                <polygon fill="#2E8F79"
+                    points="0 14.0230263 6.05901639 14.0230263 5.99016393 13.9539474 5.99016393 6.00986842 13.9770492 6.00986842 13.9770492 0 0 0">
+                </polygon>
+                <path
+                    d="M28.0229508,0 L28.0229508,6.00986842 L36.0098361,6.00986842 L36.0098361,14.0230263 L42,14.0230263 L42,0 C41.9311475,0 28.0229508,0 28.0229508,0 Z"
+                    fill="#2E8F79"></path>
+                <polygon fill="#00A76F"
+                    points="27.1967213 14.0230263 19.2098361 6.00986842 27.9540984 6.00986842 27.9540984 0 13.9770492 0 13.9770492 6.00986842 21.9639344 14.0230263">
+                </polygon>
+                <polygon fill="#00A76F"
+                    points="20.0360656 27.9769737 14.8032787 27.9769737 21.4131148 34.6085526 22.7213115 35.9901316 13.9770492 35.9901316 13.9770492 42 28.0229508 42 28.0229508 35.9210526 24.0295082 31.9835526">
+                </polygon>
+                <polygon fill="#00A76F"
+                    points="36.0098361 14.0230263 36.0098361 22.7269737 34.6327869 21.3453947 28.0229508 14.7138158 28.0229508 20.0328947 31.947541 23.9703947 35.9409836 27.9769737 42 27.9769737 42 14.0230263">
+                </polygon>
+                <polygon fill="#00A76F"
+                    points="13.9770492 21.9671053 6.05901639 14.0230263 0 14.0230263 0 27.9769737 5.99016393 27.9769737 5.99016393 19.2730263 13.9770492 27.2861842">
+                </polygon>
+            </g>
+            <text id="Provide" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8" font-family="MabryPro-Bold, Mabry Pro"
+                font-size="14" font-weight="bold">
+                <tspan x="253" y="353">Provide</tspan>
+            </text>
+            <text id="CNCF" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8" font-family="MabryPro-Bold, Mabry Pro"
+                font-size="14" font-weight="bold">
+                <tspan x="358" y="309.530762">CNCF</tspan>
+            </text>
+            <text id="Incubating" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Light, Mabry Pro" font-size="12" font-weight="300">
+                <tspan x="358" y="329">Incubating</tspan>
+            </text>
+            <text id="From-5-companies" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Light, Mabry Pro" font-size="12" font-weight="300">
+                <tspan x="236" y="207">From 5 companies</tspan>
+            </text>
+            <text id="Efficient,stable," fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Light, Mabry Pro" font-size="12" font-weight="300">
+                <tspan x="253" y="373">Efficient,stable,</tspan>
+            </text>
+            <text id="secure-file" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Light, Mabry Pro" font-size="12" font-weight="300">
+                <tspan x="253" y="389">secure file</tspan>
+            </text>
+            <text id="distribution" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Light, Mabry Pro" font-size="12" font-weight="300">
+                <tspan x="253" y="405">distribution</tspan>
+            </text>
+            <g id="path-3-Clipped" transform="translate(345, 223)">
+                <mask id="mask-kxnp6eis6--2" fill="white">
+                    <use xlink:href="#path-kxnp6eis6--1"></use>
+                </mask>
+                <g id="path-npb9p13qta-1"></g>
+                <path
+                    d="M3,0 L128,0 C129.656854,0 131,1.34314575 131,3 L131,124 C131,125.656854 129.656854,127 128,127 L3,127 C1.34314575,127 0,125.656854 0,124 L0,3 C0,1.34314575 1.34314575,0 3,0 Z"
+                    id="path-3" stroke="#797979" stroke-width="2" mask="url(#mask-kxnp6eis6--2)"></path>
+            </g>
+            <line x1="239.5" y1="187.329215" x2="325.5" y2="187.5" id="路径-6" stroke="#797979"></line>
+            <g id="ANT-black" opacity="0.8" transform="translate(211, 657)" fill="#FFF9F9" fill-rule="nonzero">
+                <path
+                    d="M13.7856176,0 C14.9664118,0 14.6810392,1.57146073 13.8668333,2.08935594 C13.0526275,2.60742372 12.4887745,3.11013238 12.1000196,3.99681865 C11.8711924,4.51747415 11.7061755,5.06028238 11.6080686,5.61504699 C15.8402255,6.50328642 19,10.009304 19,14.1987155 C19,19.0594406 14.7467941,23 9.5,23 C4.25320591,23 0,19.0594406 0,14.1987155 C0,11.2987785 1.51385294,8.72638736 3.84917647,7.12300039 C3.27917648,6.23942045 2.87794117,5.31425012 2.64509804,4.3469717 C2.27497058,2.80968067 2.55009803,1.49639096 3.36951963,1.27653142 C4.18875493,1.05667188 4.83848041,1.8499955 4.67381373,3.04835079 C4.50914705,4.24670609 4.2450098,4.46777365 4.4256961,5.40174527 C4.51622551,5.87011166 4.6361863,6.25495216 4.78539216,6.55609414 C4.90506142,6.49253139 5.02623149,6.43142521 5.14881374,6.37282032 C5.41798041,6.24407996 5.87006863,6.02145922 6.13122551,5.73912783 C6.50004904,5.34013625 6.74909806,4.84346769 7.1739902,4.746481 C7.62868627,4.64259133 7.96696078,5.09939525 8.47567649,5.30493112 C8.64034316,5.37137219 8.92739218,5.41192713 9.0842353,5.40571446 C9.59379982,5.38544592 10.1042967,5.40258431 10.6109412,5.45696901 C10.7640588,4.06567576 11.0047255,2.97707765 11.3327549,2.19082958 C11.8517157,0.947432406 12.6046373,0 13.7856176,0 Z M17.7659314,10.919633 C16.3014412,7.87214504 12.7905392,6.36022239 9.92396079,7.54270087 C7.05756862,8.72483418 5.92092157,12.1538837 7.38559806,15.2015442 C8.85008824,18.2488595 12.3609902,19.7609547 15.2275686,18.5784763 C18.0939608,17.3959978 19.2306079,13.9671209 17.7659314,10.919633 Z M10.567353,8.03281163 C13.0578431,7.00547737 16.1453432,8.39625291 17.4634216,11.1388022 C18.7815,13.8815241 17.8311274,16.9378133 15.340451,17.9651475 C12.8499608,18.9923092 9.76246078,17.6017062 8.44456864,14.8589844 C7.12611766,12.1164351 8.07686275,9.06014586 10.567353,8.03281163 Z"
+                    id="形状"></path>
+            </g>
+            <g id="alibabaalibaba" opacity="0.8" transform="translate(253, 663)" fill="#FFF9F9" fill-rule="nonzero">
+                <path
+                    d="M20.9942579,13.6091954 C19.5652573,13.7011494 19.7035477,12.9973475 20.552497,11.9752431 C22.4885622,9.59858532 26.0725879,6.36958444 26.2339266,4.01061008 C26.4567278,0.947833775 23.1108689,0 19.6651337,0 C17.2681005,0.0565870911 14.7865565,0.668435013 13.0963408,1.22369584 C7.27277931,3.1158267 3.6234499,6.08664898 1.30708608,9.42882405 C-1.08994713,12.7320955 -0.344715649,15.908046 4.83349071,16 C8.74403527,15.8514589 11.3830766,14.8505747 14.041325,13.5879752 C14.060532,13.5879752 6.64663121,15.5366932 3.90387206,14.1078691 C3.60040151,13.959328 3.30077236,13.7541998 3.22010297,13.1812555 C3.22010297,12.0106101 5.31750703,10.7869142 6.54675483,10.397878 L6.54675483,8.39257294 C9.02445743,9.19186561 11.9477624,8.96905393 14.4485133,7.26083112 C14.5291827,7.46595933 14.6098521,7.72413793 14.5906451,8.00353669 L15.0131991,8.00353669 C15.1130754,7.20424403 14.5291827,6.42617153 13.5611501,6.36958444 C13.8415722,6.57471264 14.0451664,6.74093722 14.1450428,6.88947834 L14.1066288,6.92484527 L14.0874218,6.94252874 C10.8644877,9.02210433 7.73758864,8.05658709 7.43795948,8 L9.23189299,6.38373121 L8.72866967,5.21308576 C12.2973297,4.06366048 15.2398416,3.22546419 20.1337844,2.42970822 L19.0389856,1.61626879 L19.6036713,1.30150309 C22.5039278,2.04420866 24.4592001,2.5994695 24.3593237,4.01061008 C24.3209097,4.25110522 24.217192,4.53050398 24.0558532,4.82758621 C23.1915383,6.40495137 20.6523733,8.94783378 19.6228783,10.0442087 C18.9583162,10.7692308 18.2937541,11.4376658 17.8289448,12.1061008 C17.3065145,12.7922193 17.0414579,13.4252874 17.0222509,13.9982317 C17.1221273,18.6595933 32.0574881,11.8090186 35,10.005305 C30.7091569,11.6958444 26.0533809,13.3121132 20.9942579,13.6091954 Z M24.2594473,2.89655172 C24.3670065,3.08045977 24.4169447,3.30680813 24.4169447,3.57206012 C24.4131033,3.33156499 24.3631651,3.10167993 24.2594473,2.89655172 Z"
+                    id="形状"></path>
+            </g>
+            <g id="baidu" opacity="0.8" transform="translate(396, 661)" fill="#FFF9F9" fill-rule="nonzero">
+                <path
+                    d="M3.50507787,10.607464 C6.24840145,10.1376375 5.874088,7.52115593 5.79035998,6.94910773 C5.65491762,6.06646294 4.35713347,4.52527468 2.59392011,4.64715436 C0.375127868,4.80638427 0.0500661968,7.36585761 0.0500661968,7.36585761 C-0.247907016,8.54927001 0.76914203,11.0772905 3.50507787,10.607464 Z M6.41585746,15.1563283 C6.33459203,15.3411136 6.15728566,15.8109402 6.30996614,16.2198268 C6.61532711,17.1378561 7.61513804,17.1791379 7.61513804,17.1791379 L9.05082714,17.1791379 L9.05082714,14.377871 L7.51417193,14.377871 C6.82464714,14.5429983 6.48973511,14.9735088 6.41585746,15.1563283 L6.41585746,15.1563283 Z M8.59278567,6.22176124 C10.1097402,6.22176124 11.3311841,4.82997389 11.3311841,3.10989772 C11.3311841,1.39178735 10.1097402,0 8.59278567,0 C7.08075632,0 5.85438726,1.39178735 5.85438726,3.10989772 C5.85438726,4.82997389 7.08075632,6.22176124 8.59278567,6.22176124 L8.59278567,6.22176124 Z M15.1161826,6.42620458 C17.1404303,6.63654534 18.4431396,4.91057175 18.6992488,3.60331385 C18.9627458,2.29998757 17.6575739,0.782388935 16.2243474,0.522903165 C14.7886583,0.259485789 12.9958939,2.09554423 12.8333631,3.29271724 C12.6388186,4.75723923 13.0943975,6.21782964 15.1161826,6.42620458 L15.1161826,6.42620458 Z M20.0758358,14.1085562 C20.0758358,14.1085562 16.9434233,12.1742077 15.1161826,10.0845609 C12.6388186,7.00218435 9.11731703,8.25636561 7.94019973,9.82310929 C6.76800761,11.389853 4.94076694,12.3825826 4.68219514,12.6440342 C4.41869816,12.90352 0.899659212,14.4191528 1.68029979,17.1889669 C2.46094034,19.9568152 5.20672651,19.9057043 5.20672651,19.9057043 C5.20672651,19.9057043 7.22851167,20.0649343 9.57535848,19.6462186 C11.9222053,19.2294687 13.9415279,19.750406 13.9415279,19.750406 C13.9415279,19.750406 19.4232499,21.214928 20.9229662,18.3940031 C22.42022,15.5711124 20.0758358,14.1085562 20.0758358,14.1085562 Z M10.6958362,18.3075079 L7.1324707,18.3075079 C5.5933529,18.0617827 4.98016836,17.2243513 4.90136552,17.0808478 C4.82502528,16.9353785 4.38914711,16.2611087 4.62063043,15.1150465 C5.28552932,13.3969361 7.18172246,13.2730906 7.18172248,13.2730906 L9.07791562,13.2730906 L9.07791562,11.4114768 L10.6933737,11.4311348 L10.6958362,18.3075079 L10.6958362,18.3075079 Z M17.3349748,18.2878499 L13.2323024,18.2878499 C11.6414702,17.9615268 11.5675926,17.059224 11.5675926,17.059224 L11.5675926,13.4382179 L13.2323024,13.4165941 L13.2323024,16.6699954 C13.3332685,17.0159764 13.875038,17.0808478 13.875038,17.0808478 L15.5643737,17.0808478 L15.5643737,13.4382179 L17.3349748,13.4382179 L17.3349748,18.2878499 L17.3349748,18.2878499 Z M23.1392959,8.62003887 C23.1392959,7.99491404 22.4891725,6.11167637 20.0758358,6.11167637 C17.6575739,6.11167637 17.3349748,7.88876077 17.3349748,9.14490782 C17.3349748,10.3440466 17.4630294,12.0189094 20.4649248,11.9638669 C23.4692828,11.9127561 23.1392959,9.2490953 23.1392959,8.62003887 Z"
+                    id="形状"></path>
+            </g>
+            <g id="didi" opacity="0.8" transform="translate(441, 661)" fill="#FFF9F9" fill-rule="nonzero">
+                <path
+                    d="M0,1.09375 C0,0.46875 0.39375,0 0.91875,0 L16.93125,0 L16.93125,4.375 L4.4625,4.375 C4.2,4.375 3.9375,4.53125 3.9375,4.84375 L3.9375,8.125 C3.9375,10.3125 4.725,12.34375 6.16875,13.75 C7.35,15 9.05625,15.78125 10.7625,15.625 C12.73125,15.46875 14.56875,14.375 15.75,12.5 C16.5375,11.25 17.0625,9.53125 16.93125,7.96875 L16.93125,4.375 L21,4.375 L21,8.4375 C21,11.25 19.95,14.0625 18.24375,16.09375 C16.275,18.59375 13.3875,20 10.5,20 C8.4,20 6.3,19.21875 4.59375,17.8125 C3.01875,16.5625 1.70625,14.84375 0.91875,12.8125 C0.2625,11.40625 0,9.84375 0,8.28125 L0,1.09375 Z"
+                    id="路径"></path>
+            </g>
+            <g id="douyin_1" opacity="0.8" transform="translate(310, 659)" fill="#FFF9F9" fill-rule="nonzero">
+                <path
+                    d="M16.9760928,8.69326172 C15.3025899,8.69326172 13.6749092,8.13339844 12.3361069,7.09775391 L12.3361069,14.3226562 C12.3361069,18.0120117 9.57482714,21 6.16805344,21 C2.76127974,21 0,18.0120117 0,14.3226562 C0,10.6333008 2.76127974,7.6453125 6.16805344,7.6453125 C6.50873081,7.6453125 6.83944685,7.67607422 7.16219384,7.73349609 L7.16219384,11.5602539 C6.85339271,11.4351562 6.52466893,11.371582 6.19395289,11.371582 C4.67385445,11.371582 3.44064221,12.7045898 3.44064221,14.3513672 C3.44064221,15.9960938 4.67385445,17.3311523 6.19395289,17.3311523 C7.71205906,17.3311523 8.9452713,15.9960937 8.9452713,14.3513672 L8.9452713,0 L12.3859135,0 C12.3859135,2.75830078 14.4518927,4.99365234 17,4.99365234 L17,8.69121094 L16.9760928,8.69326172"
+                    id="路径"></path>
+            </g>
+            <line x1="240.5" y1="399.5" x2="240.5" y2="350.5" id="路径-7" stroke="#797979"></line>
+            <g id="提供服务-(1)" transform="translate(183, 352)" fill="#00A76F" fill-rule="nonzero">
+                <path
+                    d="M9.28333332,0.00249930675 C4.1562899,0.00249930675 0,4.15835675 0,9.28486616 C0,14.4113756 4.1562899,18.5672326 9.28333332,18.5672326 L18.5716667,18.5672326 L18.5716667,9.28486616 C18.5712247,6.82258753 17.5925625,4.46133299 15.8509747,2.72055161 C14.1093868,0.979770221 11.7475351,0.00205773995 9.28500002,0.00249930675 L9.28333332,0.00249930675 L9.28333332,0.00249930675 Z M40,9.28486616 C40,4.15697617 35.8425908,0 30.7141667,0 C25.5857425,0 21.4283333,4.15697617 21.4283333,9.28486616 L21.4283333,18.5672326 L30.7166667,18.5672326 C35.8437101,18.5672326 40,14.4113756 40,9.28486616 Z M0,30.7143006 C0,35.8412702 4.156663,39.9975002 9.28416667,39.9975002 C14.4116703,39.9975002 18.5683333,35.8412702 18.5683333,30.7143006 L18.5683333,21.4319342 L9.28333332,21.4319342 C4.15694071,21.4319342 0.000920372121,25.5867755 0,30.712634 L0,30.7143006 Z M30.7116666,21.4319342 L21.4249994,21.4319342 L21.4249994,30.7143006 C21.4240796,35.8417302 25.5803694,39.9990793 30.7083332,40.0000002 C35.836297,40.0009201 39.9940792,35.8450631 39.9950003,30.7176335 C39.9959202,25.5902038 35.8396304,21.4328546 30.7116666,21.4319342 L30.7116666,21.4319342 Z"
+                    id="形状"></path>
+            </g>
+            <g id="形状" transform="translate(260, 115)" fill="#00A76F" fill-rule="nonzero">
+                <path
+                    d="M39.9829833,11.9138717 C39.8429265,14.435326 38.9225533,16.4735015 38.1422369,17.4610712 C37.5820097,18.1754832 36.1014093,19.8774649 35.2810767,20.7599739 L26.2374095,10.8632657 L21.6355434,15.3388471 L21.6155353,15.3598592 C19.614724,17.3770227 16.9736531,17.5030954 16.9536449,17.5030954 L16.9136287,17.5030954 C16.8135881,17.5030954 16.6935395,17.5241075 16.5934989,17.5241075 C14.4326227,17.5241075 12.3117627,15.8221258 11.3513732,14.960629 C13.3721927,12.7543564 20.8152108,4.70671473 23.676371,2.10121193 C24.736801,1.13465444 26.9176853,0 29.5187401,0 C32.2398435,0 34.7008414,1.1976908 36.8217014,3.57206028 C39.6428454,6.68185394 40.103032,9.83367184 39.9829833,11.9138717 Z M9.3505619,15.0026532 L9.83075662,15.5279562 C9.97081341,15.675041 13.1120872,19.0579922 16.6335151,19.0579922 C16.7735719,19.0579922 16.9136287,19.0579922 17.0536855,19.0369801 C17.3337991,19.015968 20.315008,18.8268589 22.6559572,16.4735015 L26.1773852,13.027514 L31.1794135,18.5116771 L35.7812795,23.6176221 L35.8012876,23.6386342 C36.4415473,24.311022 36.401531,25.6557977 35.7012471,26.4542582 C34.9009225,27.294743 33.7004357,27.3998036 33.040168,26.7064036 L27.0177259,20.7179496 L26.4374906,21.3693253 L25.9973121,21.831592 L31.8396812,27.9671308 C32.4999489,28.6605307 32.3999084,29.9212579 31.5995838,30.7617427 C31.1994216,31.1819851 30.6992188,31.4341305 30.1790078,31.4551426 C29.6988131,31.4971669 29.2586346,31.3290699 28.9385048,30.992876 L22.9560789,24.7312644 L21.915657,25.8238946 L27.7780342,32.2115789 C28.0781559,32.5477728 28.2382208,32.9890273 28.2182127,33.5143303 C28.1781965,34.0606454 27.9380991,34.5859484 27.5379369,35.0061908 C27.1377746,35.4264332 26.6375718,35.6785786 26.1173608,35.6995907 C25.6371661,35.741615 25.1969876,35.573518 24.8768578,35.2373241 L24.2365982,34.5649363 C25.1969876,33.5143303 25.3770606,31.9384214 24.7167929,30.6566821 C24.0565251,29.3749428 22.6759653,28.702555 21.3154136,28.9757125 C21.4154542,28.0301672 21.1353406,27.0846218 20.5350972,26.3702097 C19.9348538,25.6557977 19.0745049,25.2565674 18.1541317,25.2565674 C17.9540506,25.2565674 17.7539695,25.2775795 17.5538883,25.3196038 C17.6539289,24.311022 17.313791,23.3024403 16.6335151,22.5880283 C15.8531987,21.7685556 14.7327444,21.4323617 13.6723144,21.7055193 C13.8123712,20.6759254 13.4722332,19.6253194 12.7519412,18.8898953 C12.1516978,18.2595317 11.3513732,17.9233378 10.5110325,17.9233378 C9.67069171,17.9233378 8.85035907,18.2805438 8.25011567,18.9109074 L5.40896359,21.9156404 L5.62905283,21.663495 C4.8287283,20.9280708 2.60782773,18.7848347 1.92755188,17.5661317 C1.88753565,17.5030954 1.86752754,17.440059 1.82751131,17.3770227 C-1.01364077,12.4391746 -0.533446054,7.69043567 3.20807113,3.65610876 C5.8891583,0.756436295 8.95039963,0.336193909 11.0512515,0.483278744 C13.8323793,0.672387818 16.073288,1.91210286 17.1537261,2.92068458 C17.5138721,3.25687849 18.1141155,3.86622995 18.9744644,4.74873897 C15.012858,8.82509011 10.1108702,14.1621684 9.83075662,14.4773502 L9.3505619,15.0026532 Z M9.33055379,20.0035376 C9.6506836,19.6673437 10.0908621,19.4782346 10.5510487,19.4782346 C11.0112353,19.4782346 11.4314057,19.6673437 11.7515355,20.0035376 C12.0716653,20.3397315 12.2517383,20.8019981 12.2517383,21.2642647 C12.2517383,21.7475435 12.0716653,22.188798 11.7515355,22.546004 L7.26971812,27.294743 C6.94958831,27.6309369 6.50940982,27.820046 6.04922321,27.820046 C5.58903661,27.820046 5.16886623,27.6309369 4.84873641,27.294743 C4.5286066,26.9585491 4.34853358,26.4962825 4.34853358,26.0340158 C4.34853358,25.5507371 4.5286066,25.1094826 4.84873641,24.7522766 L9.33055379,20.0035376 Z M13.2121278,23.7016706 C13.5322576,23.3654767 13.9724361,23.1763676 14.4326227,23.1763676 C14.8928093,23.1763676 15.3129797,23.3654767 15.6331095,23.7016706 C15.9532393,24.0378645 16.1333123,24.5001311 16.1333123,24.9623977 C16.1333123,25.4456765 15.9532393,25.886931 15.6331095,26.244137 L11.1512921,30.992876 C10.8311623,31.3290699 10.3909838,31.518179 9.93079718,31.518179 C9.47061058,31.518179 9.0504402,31.3290699 8.73031039,30.992876 C8.41018058,30.6566821 8.23010756,30.1944155 8.23010756,29.7321488 C8.23010756,29.2488701 8.41018058,28.8076156 8.73031039,28.4504096 L13.2121278,23.7016706 Z M16.9536449,27.3577793 C17.2737748,27.0215854 17.7139532,26.8324764 18.1741398,26.8324764 C18.8744238,26.8324764 19.4946753,27.2737309 19.7547808,27.9461187 C20.0148863,28.6185065 19.8748295,29.3959549 19.3946348,29.9002458 L14.9128174,34.6489847 C14.5926876,34.9851787 14.1525091,35.1742877 13.6923225,35.1742877 C13.2321359,35.1742877 12.8119655,34.9851787 12.4918357,34.6489847 C12.1717059,34.3127908 11.9916328,33.8505242 11.9916328,33.3882576 C11.9916328,32.9049788 12.1717059,32.4637243 12.4918357,32.1065183 L16.9536449,27.3577793 L16.9536449,27.3577793 Z M20.7351783,31.0138881 C21.0553082,30.6776942 21.4954866,30.4885851 21.9556733,30.4885851 C22.4158599,30.4885851 22.8360302,30.6776942 23.1561601,31.0138881 C23.8364359,31.707288 23.8364359,32.8629546 23.1561601,33.5563545 L18.6743427,38.3050935 C18.3542129,38.6412874 17.9140344,38.8303965 17.4538478,38.8303965 C16.9936612,38.8303965 16.5734908,38.6412874 16.253361,38.3050935 C15.9332312,37.9688996 15.7531581,37.506633 15.7531581,37.0443664 C15.7531581,36.5610876 15.9332312,36.1198331 16.253361,35.7626271 L20.7351783,31.0138881 Z M23.7163872,36.5400755 C24.376655,37.2334754 24.2966225,38.4731905 23.496298,39.3136752 C22.7159816,40.1331479 21.5355029,40.2382085 20.855227,39.5237964 L20.2149674,38.8514086 L23.0561195,35.8466756 L23.7163872,36.5400755 L23.7163872,36.5400755 Z">
+                </path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/login/dark-milestones.svg b/src/assets/images/login/dark-milestones.svg
new file mode 100644
index 0000000..67e5405
--- /dev/null
+++ b/src/assets/images/login/dark-milestones.svg
@@ -0,0 +1,152 @@
+<svg width="672px" height="756px" viewBox="0 0 672 756" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <rect id="path-oxvshbn4z7-1" x="0" y="0" width="170" height="129" rx="4"></rect>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="milestones">
+            <rect id="矩形" fill="#1f2430" fill-rule="nonzero" x="0" y="0" width="672" height="756"></rect>
+            <rect id="矩形" fill="#FFFFFF" fill-rule="nonzero" opacity="0.1" x="158" y="158" width="162" height="115"
+                rx="4"></rect>
+            <path
+                d="M137,298 L319,298 C321.209139,298 323,299.790861 323,302 L323,464 C323,466.209139 321.209139,468 319,468 L137,468 C134.790861,468 133,466.209139 133,464 L133,302 C133,299.790861 134.790861,298 137,298 Z"
+                id="矩形" fill="#FBFBFB" fill-rule="nonzero" opacity="0.1"></path>
+            <path
+                d="M146,308 L310,308 C311.656854,308 313,309.343146 313,311 L313,452 C313,453.656854 311.656854,455 310,455 L146,455 C144.343146,455 143,453.656854 143,452 L143,311 C143,309.343146 144.343146,308 146,308 Z"
+                id="path-1" fill="#FBFBFB" fill-rule="nonzero" opacity="0.1"></path>
+            <rect id="矩形" fill="#FFFFFF" fill-rule="nonzero" opacity="0.1" x="341" y="360" width="172" height="115"
+                rx="4"></rect>
+            <g id="优投投资孵化" transform="translate(208, 324)" fill="#00A76F" fill-rule="nonzero">
+                <path
+                    d="M18.9996858,21.8156926 C17.2615256,21.8156926 15.8469924,20.3784584 15.8469924,18.6119354 C15.8469924,16.8454124 17.2608971,15.4081782 18.9996858,15.4081782 C20.7384744,15.4081782 22.1530077,16.8454124 22.1530077,18.6119354 C22.1530077,20.3784585 20.7384745,21.8156926 18.9996858,21.8156926 M18.9996858,13.9591837 C16.4860773,13.9591837 14.44,16.04633 14.44,18.6119354 C14.44,21.1775409 16.4854489,23.2653061 18.9996858,23.2653061 C21.5139227,23.2653061 23.56,21.1775409 23.56,18.6119354 C23.56,16.04633 21.5139227,13.9591837 18.9996858,13.9591837"
+                    id="形状"></path>
+                <path
+                    d="M11.9212441,17.9300292 C11.5325559,17.9300292 11.2158002,18.2361515 11.2158002,18.612828 C11.2158002,18.9895044 11.5325559,19.2956268 11.9212441,19.2956268 C12.3099323,19.2956268 12.626057,18.9895044 12.626057,18.6134111 C12.626057,18.2361516 12.3099323,17.9300292 11.9212441,17.9300292 M8.84013285,17.9300292 C8.45081363,17.9300292 8.13468899,18.2361515 8.13468899,18.612828 C8.13468899,18.9895044 8.45081367,19.2956268 8.84013285,19.2956268 C9.22882105,19.2956268 9.54494573,18.9895044 9.54494573,18.6134111 C9.54494573,18.2361516 9.22882105,17.9300292 8.84013285,17.9300292 M3.23696513,20.3498542 C2.23117127,20.3498542 1.41278069,19.5708455 1.41278069,18.612828 C1.41278069,17.6553936 2.23117127,16.8763848 3.23696513,16.8763848 C4.24275899,16.8763848 5.06114958,17.6553936 5.06114958,18.612828 C5.06114958,19.5708455 4.24275899,20.3504374 3.23759611,20.3504374 M3.22939326,15.5107872 C1.44874696,15.5102041 0,16.9026239 0,18.6122449 C0,20.323032 1.45190191,21.7142858 3.23696513,21.7142858 C5.01761145,21.7142858 6.4663584,20.323032 6.4663584,18.6122449 C6.4663584,16.9020408 5.01382551,15.5102041 3.22939326,15.5102041 M28.9351871,17.9300292 C28.5464989,17.9300292 28.2297432,18.2361515 28.2297432,18.612828 C28.2297432,18.9895044 28.5464989,19.2956268 28.9351871,19.2956268 C29.3238753,19.2956268 29.64,18.9895044 29.64,18.6134111 C29.64,18.2361516 29.3245063,17.9300292 28.9351871,17.9300292 M25.8540759,17.9300292 C25.4653876,17.9300292 25.148632,18.2361515 25.148632,18.612828 C25.148632,18.9895044 25.4653876,19.2956268 25.8540759,19.2956268 C26.2427641,19.2956268 26.5588887,18.9895044 26.5588887,18.6134111 C26.5588887,18.2361516 26.2427641,17.9300292 25.8540759,17.9300292"
+                    id="形状"></path>
+                <path
+                    d="M34.7387704,20.8269585 C33.7248014,20.8269585 32.9009118,20.0076176 32.9009118,19 C32.9009118,17.9929957 33.7248014,17.1736548 34.7381347,17.1736548 C35.7521037,17.1736548 36.5766291,17.9929957 36.5766291,19 C36.5766291,20.0076176 35.7521037,20.8275717 34.7387704,20.8275717 M34.7387704,15.7373551 C32.9403262,15.7373551 31.4775407,17.2012524 31.4775407,19 C31.4775407,20.7993609 32.9403262,22.2626448 34.7387704,22.2626448 C36.5365789,22.2626448 38,20.7993609 38,19 C38,17.2012524 36.5365789,15.7373551 34.7387704,15.7373551 M18.9691677,25.288564 C18.5775659,25.288564 18.2590715,25.6105355 18.2590715,26.0061006 C18.2590715,26.4022788 18.5775659,26.7242504 18.9691677,26.7242504 C19.3607695,26.7242504 19.6798996,26.4022788 19.6798996,26.0067138 C19.6798996,25.6105355 19.3607695,25.288564 18.9691677,25.288564 M18.9691677,28.3850102 C18.5775659,28.3850102 18.2590715,28.7069817 18.2590715,29.1025467 C18.2590715,29.498725 18.5775659,29.8206966 18.9691677,29.8206966 C19.3607695,29.8206966 19.6798996,29.498725 19.6798996,29.10316 C19.6798996,28.7069817 19.3607695,28.3850102 18.9691677,28.3850102 M18.9691677,36.5637003 C17.9558344,36.5637003 17.1319448,35.7443594 17.1319448,34.7373552 C17.1319448,33.7297376 17.9558344,32.9103967 18.9691677,32.9103967 C19.982501,32.9103967 20.8070264,33.7297376 20.8070264,34.7373552 C20.8070264,35.7443594 19.982501,36.5637003 18.9698034,36.5637003 M18.9698034,31.4820697 C17.1707235,31.4820697 15.7085738,32.9453536 15.7085738,34.7447145 C15.7085738,36.5397825 17.1707235,38 18.9698034,38 C20.7676119,38 22.231033,36.5361028 22.231033,34.7373551 C22.231033,32.9422872 20.7676119,31.4820697 18.9698034,31.4820697 M18.9691677,11.2757496 C18.5775659,11.2757496 18.2590715,11.5977212 18.2590715,11.9938994 C18.2590715,12.3900777 18.5775659,12.7114361 18.9691677,12.7114361 C19.3607695,12.7114361 19.6798996,12.3900777 19.6798996,11.9938994 C19.6798996,11.5977212 19.3607695,11.2763629 18.9691677,11.2763629 M18.9691677,8.17930344 C18.5775659,8.17930344 18.2590715,8.50127498 18.2590715,8.89684 C18.2590715,9.29301829 18.5775659,9.6149898 18.9691677,9.6149898 C19.3607695,9.6149898 19.6798996,9.29301829 19.6798996,8.89745328 C19.6798996,8.50127498 19.3607695,8.17930344 18.9691677,8.17930344 M18.9691677,5.09021658 C17.9558344,5.09021658 17.1319448,4.27026241 17.1319448,3.26264483 C17.1319448,2.25564054 17.9558344,1.43629966 18.9691677,1.43629966 C19.982501,1.43629966 20.8070264,2.25564054 20.8070264,3.26325814 C20.8070264,4.27026244 19.982501,5.08960331 18.9698034,5.08960331 M18.9698034,0 C17.1707235,0 15.7085738,1.46389723 15.7085738,3.26264483 C15.7085738,4.1322746 16.0493182,4.95038892 16.6685069,5.56673445 C17.26874,6.17378674 18.1001767,6.5176664 18.9698034,6.51854361 C20.7676119,6.51854361 22.231033,5.05464638 22.231033,3.25589878 C22.231033,1.45960427 20.7676119,0 18.9698034,0 M14.5121539,23.445047 C14.378329,23.3128414 14.1951241,23.2379483 14.0035801,23.2371454 C13.8160435,23.2371454 13.6412212,23.3107388 13.5115349,23.4432071 C13.2268432,23.7295525 13.226003,24.1812807 13.5096278,24.4686098 C13.6392169,24.6019736 13.8201775,24.6777418 14.0096623,24.6779757 C14.1991471,24.6782063 14.3803068,24.6028821 14.5102467,24.4698364 C14.7943556,24.1834074 14.7949155,23.7321312 14.5115182,23.445047 M11.8167127,25.4216456 C11.4251108,25.4216456 11.1066164,25.7436171 11.1066164,26.1391821 C11.1066164,26.5353604 11.4251108,26.8573319 11.8167127,26.8573319 C12.2083144,26.8573319 12.5274446,26.5353604 12.5274446,26.1397954 C12.5274446,25.7436171 12.2083145,25.4216456 11.8167127,25.4216456 M9.11936428,31.4195152 C8.78053639,31.7623802 8.31099799,31.9565083 7.81995816,31.9567477 C7.32941229,31.9567962 6.8603521,31.7625807 6.52245922,31.4195152 C5.81299874,30.7093381 5.81299874,29.55576 6.52245922,28.8486491 C6.86139564,28.5060102 7.33092001,28.3121095 7.82186534,28.31203 C8.3132748,28.31203 8.77353409,28.5021465 9.11936428,28.8492625 C9.83391047,29.5526936 9.83454621,30.7068849 9.11936428,31.4195152 M7.81932244,26.8714334 C6.95105582,26.8706605 6.1202525,27.2125689 5.51993306,27.817727 C4.24277706,29.0902812 4.24277706,31.1600981 5.51993306,32.432039 C6.12025419,33.0398511 6.95224366,33.3842126 7.82250105,33.3850747 C8.69256816,33.3841884 9.52435116,33.0398172 10.1244333,32.432039 C11.4015893,31.1600981 11.4015893,29.0896678 10.1244333,27.817727 C9.52153745,27.2128626 8.68915327,26.8711538 7.81932244,26.8714334 M26.1241656,11.1432814 C25.7325637,11.1432814 25.4140694,11.4646396 25.4140694,11.8608179 C25.4140694,12.2569962 25.7325637,12.5783544 26.1241656,12.5783544 C26.5157674,12.5783544 26.8348976,12.2569962 26.8348976,11.8608179 C26.8348976,11.4646396 26.5157675,11.1432814 26.1241656,11.1432814 M23.9379339,13.3253284 C23.5463321,13.3253284 23.2278377,13.6479133 23.2278377,14.0434783 C23.2278377,14.4396566 23.5463321,14.7616281 23.9379339,14.7616281 C24.3301715,14.7616281 24.6486658,14.4396566 24.6486658,14.0434783 C24.6486658,13.6479133 24.3301715,13.3259417 23.9379339,13.3259417 M31.4184191,9.15196413 C31.0795259,9.49466327 30.6099736,9.68858326 30.119013,9.68858326 C29.6286726,9.68853586 29.1598468,9.4943223 28.8221498,9.15135082 C28.1063321,8.44914622 28.1056963,7.29495494 28.8221498,6.58048483 C29.1608904,6.23793976 29.6301803,6.04404097 30.1209201,6.04386561 C30.6116939,6.04386561 31.0725889,6.23398214 31.4190547,6.58048483 C32.1278796,7.29127534 32.1272438,8.44485331 31.4190547,9.15196413 M32.4209452,5.56734772 C31.8207112,4.9598555 30.9889703,4.61572339 30.119013,4.61492528 C29.2490403,4.61565171 28.4172713,4.95979541 27.8170807,5.56734772 C26.5399248,6.83990187 26.5399248,8.90971884 27.8170807,10.182273 C28.4177835,10.7889947 29.2496274,11.1322317 30.1193309,11.1322317 C30.9890343,11.1322317 31.8208782,10.7889947 32.4215809,10.182273 C33.698737,8.90971884 33.698737,6.83990187 32.4215809,5.56734772 M26.1241656,25.4216456 C25.7325637,25.4216456 25.4140694,25.7436171 25.4140694,26.1391821 C25.4140694,26.5353604 25.7325637,26.8573319 26.1241656,26.8573319 C26.5157674,26.8573319 26.8348976,26.5353604 26.8348976,26.1397954 C26.8348976,25.7436171 26.5157675,25.4216456 26.1241656,25.4216456 M24.4357006,23.4444337 C24.3060724,23.3110705 24.1249018,23.2355636 23.9353911,23.2359151 C23.7465601,23.2358042 23.566032,23.3107912 23.436353,23.4432071 C23.1541875,23.7309552 23.1539084,24.1811498 23.4357173,24.4692231 C23.5657766,24.6022159 23.746955,24.6775459 23.9364819,24.6774302 C24.1260088,24.6773137 24.3070878,24.6017619 24.436972,24.4686098 C24.7182164,24.1810303 24.7179375,23.731688 24.4363362,23.4444337 M31.4260477,31.4195152 C31.0873722,31.7622261 30.6180962,31.9563407 30.1272773,31.956748 C29.6365259,31.9568921 29.1672313,31.7626747 28.8291426,31.4195152 C28.1196821,30.7093381 28.1196821,29.5563733 28.8291426,28.8486491 C29.1679924,28.5058898 29.6375728,28.3119659 30.1285487,28.3120299 C30.6199582,28.3120299 31.0808532,28.5021465 31.4266834,28.8492625 C32.1405939,29.5526936 32.1412296,30.7068849 31.4266834,31.4195152 M32.4209452,27.817727 C31.8212764,27.2123957 30.9907737,26.8704219 30.1228272,26.8714306 C29.252491,26.8711226 28.4196243,27.2130625 27.816445,27.8183403 C26.5399248,29.0902812 26.5399248,31.1607114 27.816445,32.432039 C28.4166795,33.0399713 29.2487249,33.3843559 30.119013,33.3850747 C30.9889703,33.3842766 31.8207112,33.0401445 32.4209452,32.4326523 C33.6987369,31.1600981 33.6987369,29.0902812 32.4209452,27.817727 M14.0029443,13.3253284 C13.6113426,13.3253284 13.2922125,13.6479133 13.2922125,14.0434783 C13.2922125,14.4396566 13.6113426,14.7616281 14.0029443,14.7616281 C14.3945462,14.7616281 14.7130405,14.4396566 14.7130405,14.0434783 C14.7130405,13.6479133 14.3951819,13.3259417 14.0029443,13.3259417 M11.8167127,11.1432814 C11.4251108,11.1432814 11.1066164,11.4646396 11.1066164,11.8608179 C11.1066164,12.2569962 11.4251108,12.5783544 11.8167127,12.5783544 C12.2083144,12.5783544 12.5274446,12.2569962 12.5274446,11.8608179 C12.5274446,11.4646396 12.2083145,11.1432814 11.8167127,11.1432814 M9.11173566,9.15196413 C8.77284252,9.49466326 8.30329013,9.68858338 7.81232958,9.68858338 C7.32178369,9.68863181 6.85272347,9.49441631 6.5148306,9.15135082 C5.79901295,8.44914622 5.79837724,7.29495494 6.5148306,6.58048483 C6.85368042,6.23772546 7.32326088,6.04380156 7.81423671,6.04386556 C8.30501046,6.04386556 8.76590546,6.23398214 9.11173566,6.58048483 C9.82119614,7.29127534 9.82119614,8.44485331 9.11173566,9.15196413 M7.81932244,4.61492528 C6.94938045,4.61579503 6.11766741,4.95991557 5.51739021,5.56734772 C4.24086993,6.83990187 4.24086993,8.90971884 5.51739021,10.182273 C6.11710284,10.7879845 6.9478821,11.1301993 7.81614385,11.1291829 C8.68657409,11.1293303 9.51945467,10.7871634 10.1225261,10.1816597 C11.3990464,8.90971884 11.3990464,6.8392886 10.1225261,5.56734772 C9.52194405,4.9596076 8.68970617,4.61546001 7.81932244,4.61492528"
+                    id="形状"></path>
+            </g>
+            <rect id="矩形" fill="#FBFBFB" fill-rule="nonzero" opacity="0.10265532" x="331" y="168" width="190"
+                height="152" rx="4"></rect>
+            <g id="path-3-Clipped" transform="translate(342, 180)">
+                <mask id="mask-oxvshbn4z7-2" fill="white">
+                    <use xlink:href="#path-oxvshbn4z7-1"></use>
+                </mask>
+                <g id="path-s5dhkvqxjm-3"></g>
+                <path
+                    d="M4,0 L166,0 C168.209139,0 170,1.790861 170,4 L170,125 C170,127.209139 168.209139,129 166,129 L4,129 C1.790861,129 0,127.209139 0,125 L0,4 C0,1.790861 1.790861,0 4,0 Z"
+                    id="path-3" stroke="#A5A7A7" stroke-width="2" mask="url(#mask-oxvshbn4z7-2)"></path>
+            </g>
+            <text id="In-November-2017," fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Light, Mabry Pro" font-size="12" font-weight="300">
+                <tspan x="175" y="228">In November 2017,</tspan>
+            </text>
+            <text id="Dragonfly-1.x-project-was" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Light, Mabry Pro" font-size="12" font-weight="300">
+                <tspan x="175" y="242">Dragonfly 1.x project was</tspan>
+            </text>
+            <text id="open-source." fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Light, Mabry Pro" font-size="12" font-weight="300">
+                <tspan x="175" y="256">open source.</tspan>
+            </text>
+            <text id="In-October-2018,-became" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Light, Mabry Pro" font-size="12" font-weight="300">
+                <tspan x="356" y="257">In October 2018, became</tspan>
+            </text>
+            <text id="the-third-project-in-China-to" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Light, Mabry Pro" font-size="12" font-weight="300">
+                <tspan x="356" y="271">the third project in China to</tspan>
+            </text>
+            <text id="enter-the-CNCF-Sandbox." fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Light, Mabry Pro" font-size="12" font-weight="300">
+                <tspan x="356" y="285">enter the CNCF Sandbox.</tspan>
+            </text>
+            <text id="Officially-settled-in" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Light, Mabry Pro" font-size="12" font-weight="300">
+                <tspan x="178.573242" y="413">Officially settled in</tspan>
+            </text>
+            <text id="CNCF-Incubating-in" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Light, Mabry Pro" font-size="12" font-weight="300">
+                <tspan x="173.789062" y="427">CNCF Incubating in</tspan>
+            </text>
+            <text id="April-2020." fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Light, Mabry Pro" font-size="12" font-weight="300">
+                <tspan x="196.432617" y="441">April 2020.</tspan>
+            </text>
+            <text id="In-April-2021,-it-was" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Light, Mabry Pro" font-size="12" font-weight="300">
+                <tspan x="362" y="430">In April 2021, it was</tspan>
+            </text>
+            <text id="updated-to-Dragonfly-2." fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Light, Mabry Pro" font-size="12" font-weight="300">
+                <tspan x="362" y="444">updated to Dragonfly 2.</tspan>
+            </text>
+            <text id="Milestones" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Bold, Mabry Pro" font-size="24" font-weight="bold">
+                <tspan x="41" y="63">Milestones</tspan>
+            </text>
+            <text id="More-Application-Scenarios" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Light, Mabry Pro" font-size="19" font-weight="300">
+                <tspan x="42" y="566">More Application Scenarios</tspan>
+            </text>
+            <text id=":" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8" font-family="MabryPro-Bold, Mabry Pro"
+                font-size="19" font-weight="bold">
+                <tspan x="279.759766" y="566">:</tspan>
+            </text>
+            <text id="Dragonfly-1.x" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Bold, Mabry Pro" font-size="14" font-weight="bold">
+                <tspan x="206" y="185">Dragonfly 1.x</tspan>
+            </text>
+            <text id="CNCF-SandBox" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Bold, Mabry Pro" font-size="14" font-weight="bold">
+                <tspan x="397" y="210">CNCF SandBox</tspan>
+            </text>
+            <text id="Dragonfly-2" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Bold, Mabry Pro" font-size="14" font-weight="bold">
+                <tspan x="390" y="389">Dragonfly 2</tspan>
+            </text>
+            <text id="CNCF-Incubating" fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Bold, Mabry Pro" font-size="14" font-weight="bold">
+                <tspan x="169" y="382">CNCF Incubating</tspan>
+            </text>
+            <g id="接入沙箱环境_icon-(1)" transform="translate(352, 190)" fill="#00A76F" fill-rule="nonzero">
+                <path
+                    d="M22.6460475,11.4071216 C23.0778656,11.4071216 23.5096838,11.7590122 23.5096838,12.2868482 L23.5096838,14.4861647 L27.2233202,14.4861647 C27.6551384,14.4861647 28.0005929,14.8380553 28.0869565,15.2779186 C28.0869565,15.717782 27.9142292,16.0696727 27.4824111,16.1576452 L23.5096838,16.1576452 L23.5096838,18.3569617 C23.5096838,18.796825 23.1642292,19.2366883 22.6460475,19.2366883 L15.8233202,19.2366883 C15.3915019,19.2366883 14.9596838,18.8847977 14.9596838,18.3569617 L14.9596838,16.1576452 L10.7278656,16.1576452 L10.7278656,23.5473487 L13.3187748,23.5473487 L13.3187748,21.3480322 C13.3187748,20.9081689 13.6642292,20.4683057 14.1824111,20.4683056 L24.3733202,20.4683056 C24.8051384,20.4683056 25.2369565,20.8201962 25.2369565,21.3480322 L25.2369565,27.4181458 C25.2369565,27.8580091 24.8915019,28.2978723 24.3733202,28.2978723 L14.1824111,28.2978723 C13.7505929,28.2978723 13.3187748,27.9459817 13.3187748,27.4181458 L13.3187748,25.2188293 L10.2096838,25.2188293 C9.6051384,25.1308565 9.17332017,24.6909933 9.08695652,24.0751846 L9.08695652,15.5418366 C9.17332017,14.926028 9.6051383,14.4861647 10.2096838,14.398192 L14.9596838,14.398192 L14.9596838,12.1988755 C14.9596838,11.7590122 15.3051384,11.3191489 15.8233202,11.3191489 L22.6460475,11.3191489 L22.6460475,11.4071216 Z M23.5096838,22.2277588 L15.0460475,22.2277588 L15.0460475,26.6263918 L23.5096838,26.6263918 L23.5096838,22.2277588 L23.5096838,22.2277588 Z M21.7824111,13.1665748 L16.6869565,13.1665748 L16.6869565,17.5652078 L21.7824111,17.5652078 L21.7824111,13.1665748 Z"
+                    id="形状"></path>
+                <path
+                    d="M19,0 C29.5363636,0 38,8.46363636 38,19 C38,29.5363636 29.5363636,38 19,38 C8.46363636,38 0,29.5363636 0,19 C0,8.46363636 8.46363636,0 19,0 Z M19,1.72727275 C9.5,1.72727275 1.72727275,9.5 1.72727275,19 C1.72727275,28.5 9.5,36.2727273 19,36.2727273 C28.5,36.2727273 36.2727273,28.5 36.2727273,19 C36.2727273,9.5 28.5,1.72727275 19,1.72727275 Z"
+                    id="形状"></path>
+            </g>
+            <text id="So-far,-dragonflies-have-experienced-the-following-stages-of-development." fill="#FFF9F9"
+                fill-rule="nonzero" opacity="0.8" font-family="MabryPro-Light, Mabry Pro" font-size="14"
+                font-weight="300">
+                <tspan x="42" y="99">So far, dragonflies have experienced the following stages of development.</tspan>
+            </text>
+            <text id="Dragonfly-supports-different-types-of-storage-sources,-such-as-HDFS,-S3,-GCS,-Azure-Blob,"
+                fill="#FFF9F9" fill-rule="nonzero" opacity="0.8" font-family="MabryPro-Light, Mabry Pro" font-size="14"
+                font-weight="300">
+                <tspan x="42" y="593">Dragonfly supports different types of storage sources, such as HDFS, S3, GCS,
+                    Azure Blob,</tspan>
+            </text>
+            <text id="OSS,-etc." fill="#FFF9F9" fill-rule="nonzero" opacity="0.8"
+                font-family="MabryPro-Light, Mabry Pro" font-size="14" font-weight="300">
+                <tspan x="42" y="610">OSS, etc.</tspan>
+            </text>
+            <line x1="383.5" y1="404.5" x2="475.983981" y2="404.34588" id="路径-5" stroke="#797979"></line>
+            <line x1="178.5" y1="395.329215" x2="276" y2="395.329215" id="路径-6" stroke="#797979"></line>
+            <line x1="402.5" y1="228.5" x2="494" y2="228.329215" id="路径-6" stroke="#797979"></line>
+            <line x1="205.5" y1="201.329215" x2="294.499995" y2="201.505958" id="路径-6" stroke="#797979"></line>
+            <g id="版本更新-(1)" transform="translate(349, 373)" fill="#00A76F" fill-rule="nonzero">
+                <path
+                    d="M27.3596866,10.0994071 C26.1982543,13.0820448 24.4988802,15.706534 22.1180166,17.8742751 C21.9391698,18.0236254 21.8521353,18.2560874 21.8889201,18.4861726 C21.9715688,19.2894693 22.0382677,20.092766 22.1209165,20.8946126 C22.3152135,22.765105 21.6554735,24.2962987 20.1373467,25.3837942 C18.5090216,26.5481394 16.8154474,27.624035 15.134923,28.7158804 C14.0764391,29.4031776 12.774359,28.7796802 12.6554608,27.5312354 C12.5206128,26.0986413 12.4133145,24.6616972 12.313266,23.2262031 C12.2639668,22.5070061 12.2842665,22.5012061 11.5824771,22.4098564 C9.72360546,22.1662574 8.26782767,21.2890111 7.26879293,19.6983676 C6.75405079,18.8776709 6.50030463,17.9728747 6.41040602,17.0202287 C6.38285643,16.7360298 6.2668582,16.6620801 5.99571232,16.6475801 C4.49165678,16.5679165 2.98843752,16.4731789 1.48628107,16.3633813 C0.234950138,16.2691317 -0.398690197,14.9612371 0.271199612,13.8679416 C0.742442435,13.0994447 1.24268481,12.3497978 1.72842738,11.591451 C2.25186941,10.7736544 2.77241145,9.95440777 3.29585349,9.13806108 C4.25718883,7.64456723 5.64046773,6.83837056 7.41379071,6.82387063 C8.42732526,6.81517067 9.44375976,6.99351992 10.4587443,7.10226947 C10.6501413,7.12256938 10.7849893,7.0964695 10.9183873,6.94857012 C13.2731514,4.33423087 16.186157,2.56958814 19.4848567,1.38929301 C21.3495283,0.722295762 23.267849,0.287297543 25.236919,0.0842983823 C26.2287038,-0.0172012125 27.2277387,-0.0534510616 28.2180736,0.127798184 C28.7589153,0.229297779 28.7864649,0.249597686 28.8705636,0.774495524 C28.9532124,1.29649337 29.0184613,1.8242912 28.9952617,2.35788899 C28.9111629,5.03457798 28.3297218,7.60686737 27.3596866,10.0994071 Z M20.117047,5.64502546 C18.3002248,5.6160256 16.7284487,6.9268202 16.6849494,8.97421176 C16.6486999,10.6823048 18.2074261,12.2294484 19.9444997,12.2424983 C20.8273062,12.2541054 21.6784796,11.9141067 22.3103418,11.29747 C22.9422038,10.6808331 23.3028638,9.83819868 23.3127983,8.95536183 C23.335998,7.19216909 21.8642704,5.67402534 20.117047,5.64502546 Z M3.79029595,19.0270204 C4.23543915,19.0342704 4.4819354,19.2300195 4.64143299,19.6795177 C5.22839284,21.4063399 6.44949463,22.8456596 8.0575809,23.7061511 C8.42297534,23.9077003 8.80576949,24.0700996 9.20306343,24.204949 C9.91645256,24.447098 10.07885,25.1372952 9.55105814,25.669443 C8.76662009,26.4553398 7.97348219,27.2325366 7.19049413,28.0184333 C6.9309481,28.2794323 6.64675241,28.4012318 6.28135797,28.2663823 C5.91161361,28.1300829 5.73326634,27.857484 5.71441662,27.4761356 C5.7028168,27.2354365 5.70861671,26.9932876 5.7028168,26.7511386 C5.69266695,26.3059904 5.68831703,26.3016404 5.27652329,26.4379398 L2.63611354,27.3108362 C2.37511752,27.396386 2.1141215,27.4311858 1.86182534,27.2890863 C1.48918103,27.0788372 1.34853316,26.7047388 1.49933088,26.2436406 C1.79077644,25.3446444 2.09817176,24.451448 2.39686719,23.5539017 C2.52736521,23.1653033 2.51866534,23.1566033 2.09527181,23.1508034 C1.84007569,23.1464534 1.58487958,23.1508034 1.32968347,23.1392034 C0.982427248,23.1411188 0.672390149,22.9219924 0.558295223,22.5940057 C0.423447267,22.2532571 0.508995969,21.9560083 0.759842163,21.7066093 C1.57762971,20.8888126 2.39831718,20.075366 3.22045465,19.2619194 C3.36478232,19.1010152 3.57450703,19.0145629 3.79029595,19.0270204"
+                    id="形状"></path>
+            </g>
+            <g id="版本" transform="translate(169, 171)" fill="#00A76F" fill-rule="nonzero">
+                <path
+                    d="M28.1706696,16.4926503 L15.8667356,22.4002552 C14.6894626,22.9488557 14.2207622,22.9488557 13.1332644,22.4002552 L0.829358729,16.4926503 C0.176860007,16.1222846 0,14.7507835 0,14.0026508 C0.822278667,14.5033695 1.97576274,15.0625432 1.93370716,15.0339954 L14.5,21.2219425 L27.0662928,15.0339954 C27.0886658,15.0281046 28.2085904,14.4254296 29,14.0026508 C29,14.768607 28.7768647,16.1896513 28.1706696,16.4926503 L28.1706696,16.4926503 Z M28.1706696,10.303072 L15.8667356,16.2123082 C14.6894626,16.7593982 14.2207622,16.7593982 13.1332644,16.2123082 L0.829358729,10.303072 C-0.136163797,9.75598199 -0.106625768,8.03057925 0.829358729,7.38597375 L13.1332644,0.446963727 C14.2207622,-0.133144978 14.899882,-0.164623043 15.8667356,0.446963727 L28.1706413,7.38597375 C29.1066541,7.93466481 29.075785,9.8534069 28.1706696,10.303072 L28.1706696,10.303072 Z M14.5,1.62527649 C14.5933373,1.66585182 14.6263861,1.82842618 14.5,1.62527649 L14.5,1.62527649 Z M14.5,27.4115208 L27.0662928,21.2219123 C27.0886658,21.2173809 28.2085904,20.6133464 29,20.1905676 C29,20.9566748 28.7768364,22.3792296 28.1706413,22.6804161 L15.8667356,28.5896825 C14.6894626,29.1367725 14.2207622,29.1367725 13.1332644,28.5896825 L0.829358729,22.6804463 C0.176860007,22.3103826 0,20.9400899 0,20.1905676 C0.822278667,20.692827 1.97576274,21.2504902 1.93370716,21.2219425 L14.5,27.4115208 L14.5,27.4115208 Z"
+                    id="形状"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/login/dragonfly.svg b/src/assets/images/login/dragonfly.svg
similarity index 100%
rename from public/images/login/dragonfly.svg
rename to src/assets/images/login/dragonfly.svg
diff --git a/src/assets/images/login/login.svg b/src/assets/images/login/login.svg
new file mode 100644
index 0000000..415523c
--- /dev/null
+++ b/src/assets/images/login/login.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024">
+    <path fill="currentColor"
+        d="m621.093 219.292 204.495-118.227a78.7 78.7 0 0 1 86.172 1.22c46.014 29.615 96.642 55.987 96.642 55.987L763.27 302.795zM618.9 506.794l142.903-81.558 246.847 142.655-112.221 66.455s-30.682 22.158-93.724-19.069S618.9 506.794 618.9 506.794M435.476 613.122l77.42-43.82 76.676 44.926-19.355 376.82-58.064 32.513-57.684-33.599zM13.425 158.501 368.85 363.472s52.077 23.016 78.888 53.145c24.961 28.05-11.69 75.017-11.69 75.017l219.064-129.668L186.761 91.302s-34.095-16.933-85.696 14.607-87.64 52.592-87.64 52.592" />
+    <path fill="currentColor"
+        d="m15.446 568.253 115.958 65.502a6.5 6.5 0 0 0 .896.439c4.481 1.906 38.977 15.16 79.822-14.34 41.8-30.186 207.623-119.276 222.84-127.438a9.4 9.4 0 0 0 2.154-1.582c6.808-6.732 45.575-49.046-2.67-88.404-.571-.458-3.05-2.822-3.813-2.917l-21.357-14.111-14.664-8.963-20.976-10.984c-2.917-1.62-6.483.306-9.382 1.907zM647.103 84.59 507.976 1.697 369.231 84.952l139.108 81.806z" />
+</svg>
\ No newline at end of file
diff --git a/public/images/login/milestones.svg b/src/assets/images/login/milestones.svg
similarity index 100%
rename from public/images/login/milestones.svg
rename to src/assets/images/login/milestones.svg
diff --git a/src/assets/images/login/page-loading.svg b/src/assets/images/login/page-loading.svg
new file mode 100644
index 0000000..356ff54
--- /dev/null
+++ b/src/assets/images/login/page-loading.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="67.5" height="64" class="icon" viewBox="0 0 1080 1024">
+    <animateTransform attributeName="transform" attributeType="XML" dur="0.8s" from="0 0 0" repeatCount="indefinite"
+        to="360 0 0" type="rotate" />
+    <path fill="#2E8F79"
+        d="M227.783 165.32c5.973-4.097 11.549-8.08 17.01-11.492 5.347-3.528 10.524-6.543 15.246-9.444l6.94-3.982 6.258-3.47 2.845-1.48 2.617-1.308 4.721-2.446 2.105-1.081 2.39-1.138 4.21-2.105 7.736-3.754a64.74 64.74 0 1 0-66.446-110.65l-6.94 5.064-3.812 2.73-2.275 1.593-2.788 2.105-6.258 4.665-3.413 2.617a35856.668 35856.668 0 0 1-10.809 8.533c-2.503 2.105-5.177 4.153-7.85 6.543-5.348 4.608-11.208 9.557-17.124 15.189-6.087 5.404-12.231 11.605-18.774 17.977-6.257 6.599-12.913 13.426-19.512 20.992A541.64 541.64 0 0 0 57.8 212.082c-11.379 22.243-21.22 45.283-29.356 68.95-1.137 3.014-2.048 6.03-3.015 9.101l-2.844 9.103c-1.877 6.087-3.584 12.288-5.29 18.432l-2.276 9.33c-.74 3.128-1.593 6.2-2.219 9.33l-1.991 9.386-.967 4.665-.854 4.721a514.33 514.33 0 0 0-8.135 75.264C.512 436.565.57 442.71.57 448.854v4.55l.057 4.608.284 9.103.114 4.55.284 4.495.57 8.932.34 4.778.399 4.267.853 8.363.455 4.21.57 4.437 1.137 8.704.569 4.323.683 4.21 1.422 8.306a507.676 507.676 0 0 0 24.291 88.746l2.447 6.429 1.137 3.072 1.309 3.072 4.95 11.776c3.526 7.566 6.655 14.791 10.068 21.333a487.822 487.822 0 0 0 31.403 54.045l4.836 7.11-3.584-7.85a471.893 471.893 0 0 1-21.618-57.685c-2.162-6.827-3.982-14.336-6.144-22.073l-2.845-12.06-.682-3.073-.57-3.185-1.308-6.372a472.747 472.747 0 0 1-8.59-86.585v-11.719l.228-3.982.284-7.794.17-3.925.285-4.153.854-12.63v-.284.114l.113-.569.057-.967.228-2.048.853-8.135.455-4.096.57-4.096 1.137-8.192.569-4.096.74-4.096c1.023-5.462 1.877-10.923 3.071-16.384a461.634 461.634 0 0 1 18.376-64.57l1.422-3.981 1.536-3.869 3.072-7.737c.967-2.617 2.162-5.12 3.242-7.68l3.3-7.623c2.39-5.006 4.722-10.012 7.168-14.905l3.755-7.281c1.251-2.447 2.446-4.836 3.811-7.225a445.724 445.724 0 0 1 72.42-97.565c12.117-12.345 24.974-23.893 38.457-34.702 6.2-5.12 12.401-9.557 18.204-13.88z"
+        opacity=".2" />
+    <path fill="#2E8F79"
+        d="m1060.181 487.595-.967-8.534-1.138-10.24-.682-6.599-1.252-8.76-3.015-20.367-4.551-22.471c-.796-3.982-1.934-8.078-3.015-12.288l-3.3-12.914c-.569-2.218-1.137-4.437-1.82-6.656l-2.105-6.826-4.38-13.995-1.138-3.584-1.252-3.584-2.674-7.225c-1.82-4.836-3.584-9.785-5.518-14.791l-6.371-15.076-3.3-7.623-3.584-7.68-7.566-15.417a65.536 65.536 0 0 0-1.991-3.868l-2.105-3.869-4.267-7.736-4.266-7.851c-1.48-2.617-3.13-5.12-4.665-7.68l-9.558-15.53a577.422 577.422 0 0 0-45.17-59.848 573.554 573.554 0 0 0-54.385-53.817 567.353 567.353 0 0 0-60.985-44.714c-21.106-13.085-42.667-24.349-64-34.02l-16.043-6.656c-2.617-1.08-5.234-2.276-7.907-3.186l-7.965-2.844-7.85-2.845-3.869-1.365a57.458 57.458 0 0 0-3.868-1.308l-15.474-4.665c-2.56-.74-5.006-1.593-7.566-2.276l-7.567-1.82-14.677-3.641-14.336-2.845-6.94-1.365-3.414-.683-3.413-.512-13.369-1.934-6.371-.91c-2.105-.285-4.267-.398-6.315-.626l-12.06-1.138c-3.983-.398-7.737-.796-11.378-.91l-20.708-.91-17.465.114h-7.395l-6.6.398-10.353.626-8.534.512 8.534.967 10.24 1.138 6.485.682 7.282 1.195 17.01 2.787 19.74 4.21c3.527.683 7.111 1.707 10.809 2.73l11.378 3.073c1.934.569 3.925.967 5.86 1.593l5.973 1.934 12.288 3.982 3.185 1.024 3.13 1.195 6.314 2.39c4.267 1.649 8.647 3.242 13.028 5.005l13.14 5.746 6.714 2.958c2.275.968 4.437 2.162 6.656 3.243l13.54 6.77c1.137.569 2.275 1.138 3.413 1.82l3.356 1.878 6.827 3.811 6.826 3.812c2.276 1.308 4.438 2.844 6.713 4.21l13.54 8.533c17.806 12.06 35.442 25.43 52.11 40.22 16.612 15.019 32.2 31.175 46.706 48.242 14.051 17.067 26.908 35.1 38.57 53.874 11.265 18.603 20.879 37.603 29.128 56.32l5.632 14.051c.91 2.276 1.877 4.552 2.73 6.94l2.39 6.941 2.332 6.884 1.195 3.413 1.138 3.414 3.868 13.482c.569 2.276 1.308 4.438 1.877 6.656l1.536 6.6 3.072 12.8 2.276 12.515 1.138 6.087.569 2.958.398 3.015 1.479 11.606.796 5.575c.228 1.82.285 3.64.455 5.461l.854 10.525c.284 3.413.626 6.712.626 9.898l.568 17.977-.34 14.109-.115 6.03-.398 6.428-.569 10.354-.569 8.533a64.74 64.74 0 1 0 128.967-3.242h.057z" />
+    <path fill="#2E8F79"
+        d="m910.962 758.556-5.234 6.315c-1.877 2.276-3.698 4.551-5.803 6.884-4.153 4.721-8.533 9.841-13.596 15.018-4.836 5.348-10.354 10.695-16.043 16.327-5.86 5.519-11.946 11.378-18.66 17.067a477.013 477.013 0 0 1-98.53 65.991 463.644 463.644 0 0 1-60.872 25.145c-2.617.967-5.29 1.707-7.964 2.56l-8.022 2.446c-5.404 1.536-10.809 2.959-16.213 4.38l-8.192 1.935c-2.73.569-5.405 1.308-8.192 1.82l-8.249 1.65-4.096.797-4.153.682a449.281 449.281 0 0 1-65.934 6.429c-5.405.227-10.809.057-16.157.057h-4.039c-1.308 0-2.56-.114-3.868-.171l-7.566-.341-3.812-.171-4.267-.284-8.533-.57-2.162-.17h-1.08l-.57-.114h.57-.285l-3.868-.455-7.68-.853a437.248 437.248 0 0 1-106.78-26.624l-5.462-2.219-2.73-1.024-2.618-1.138-10.24-4.494c-6.485-3.129-12.743-5.916-18.375-8.931a424.107 424.107 0 0 1-28.843-16.27l-1.479-.854a1167.588 1167.588 0 0 0-3.697-2.446l-4.438-2.902-1.99-1.308-2.163-1.422-3.868-2.617-7.168-4.836a64.74 64.74 0 1 0-62.805 112.697l7.85 3.584 4.267 1.934 2.56 1.138 3.186 1.366 7.168 3.128 3.982 1.707 2.048.853 2.048.797c10.98 4.323 24.348 9.443 39.993 14.222 7.737 2.56 16.156 4.779 24.974 7.282l13.653 3.3 3.47.853 3.585.74 7.281 1.535a537.43 537.43 0 0 0 134.258 10.127l9.216-.57 4.608-.284h1.309l.512-.057 1.024-.113 2.161-.228 8.534-.853 4.266-.455 4.836-.57 9.671-1.25 4.892-.627 4.665-.796c6.258-1.024 12.516-1.934 18.717-3.3a521.671 521.671 0 0 0 73.842-20.081l4.55-1.593 4.438-1.707 8.932-3.413c2.958-1.081 5.86-2.39 8.817-3.584l8.704-3.698c5.746-2.674 11.492-5.234 17.18-7.965l8.363-4.21c2.845-1.422 5.576-2.787 8.306-4.266a510.066 510.066 0 0 0 112.64-81.636 501.76 501.76 0 0 0 40.391-43.633c5.86-7.055 11.094-14.052 16.1-20.708 4.835-6.827 9.443-13.084 13.426-19.342 4.21-6.087 7.737-12.004 11.093-17.408 1.707-2.674 3.186-5.405 4.665-7.908l4.153-7.225a482.987 482.987 0 0 0 11.264-21.617l3.811-7.737-5.063 6.997c-3.186 4.551-8.192 11.093-14.62 19.285z"
+        opacity=".6" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/closure.svg b/src/assets/images/menu/closure.svg
new file mode 100644
index 0000000..599d4e8
--- /dev/null
+++ b/src/assets/images/menu/closure.svg
@@ -0,0 +1,8 @@
+<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path
+            d="M166,0 C184.777681,-3.44940413e-15 200,15.2223185 200,34 L200,166 C200,184.777681 184.777681,200 166,200 L34,200 C15.2223185,200 2.29960275e-15,184.777681 0,166 L0,34 C-2.29960275e-15,15.2223185 15.2223185,3.44940413e-15 34,0 L166,0 Z M82,20 L38,20 C28.0588745,20 20,28.0588745 20,38 L20,162 C20,171.941125 28.0588745,180 38,180 L82,180 C91.9411255,180 100,171.941125 100,162 L100,38 C100,28.0588745 91.9411255,20 82,20 Z"
+            id="形状结合" fill="currentColor" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/cluster.svg b/src/assets/images/menu/cluster.svg
new file mode 100644
index 0000000..23072bd
--- /dev/null
+++ b/src/assets/images/menu/cluster.svg
@@ -0,0 +1,13 @@
+<svg width="48px" height="45px" viewBox="0 0 48 45" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="currentColor" fill-rule="nonzero">
+            <path
+                d="M47.5,33 L44.125,33 L44.125,24.25 L26.125,24.25 L26.125,18.5 L41,18.5 C41.55,18.5 42,18.05 42,17.5 L42,1 C42,0.45 41.55,0 41,0 L7,0 C6.45,0 6,0.45 6,1 L6,17.5 C6,18.05 6.45,18.5 7,18.5 L21.875,18.5 L21.875,24.25 L3.875,24.25 L3.875,33 L0.5,33 C0.225,33 0,33.225 0,33.5 L0,44.5 C0,44.775 0.225,45 0.5,45 L11.5,45 C11.775,45 12,44.775 12,44.5 L12,33.5 C12,33.225 11.775,33 11.5,33 L8.125,33 L8.125,28.5 L21.875,28.5 L21.875,33 L18.5,33 C18.225,33 18,33.225 18,33.5 L18,44.5 C18,44.775 18.225,45 18.5,45 L29.5,45 C29.775,45 30,44.775 30,44.5 L30,33.5 C30,33.225 29.775,33 29.5,33 L26.125,33 L26.125,28.5 L39.875,28.5 L39.875,33 L36.5,33 C36.225,33 36,33.225 36,33.5 L36,44.5 C36,44.775 36.225,45 36.5,45 L47.5,45 C47.775,45 48,44.775 48,44.5 L48,33.5 C48,33.225 47.775,33 47.5,33 Z M8,40.83125 C8,40.925 7.925,41 7.83125,41 L4.1625,41 C4.06875,41 3.99375,40.925 3.99375,40.83125 L3.99375,37.1625 C3.99375,37.06875 4.06875,36.99375 4.1625,36.99375 L7.83125,36.99375 C7.925,36.99375 8,37.06875 8,37.1625 L8,40.83125 Z M26,40.83125 C26,40.925 25.925,41 25.83125,41 L22.1625,41 C22.06875,41 21.99375,40.925 21.99375,40.83125 L21.99375,37.1625 C21.99375,37.06875 22.06875,36.99375 22.1625,36.99375 L25.83125,36.99375 C25.925,36.99375 26,37.06875 26,37.1625 L26,40.83125 Z M10,14.5 L10,4 L38,4 L38,14.5 L10,14.5 Z M44,40.83125 C44,40.925 43.925,41 43.83125,41 L40.1625,41 C40.06875,41 39.99375,40.925 39.99375,40.83125 L39.99375,37.1625 C39.99375,37.06875 40.06875,36.99375 40.1625,36.99375 L43.83125,36.99375 C43.925,36.99375 44,37.06875 44,37.1625 L44,40.83125 Z"
+                id="形状"></path>
+            <path
+                d="M14.5,9.25 C14.5,10.6307119 15.6192881,11.75 17,11.75 C18.3807119,11.75 19.5,10.6307119 19.5,9.25 C19.5,7.86928813 18.3807119,6.75 17,6.75 C15.6192881,6.75 14.5,7.86928813 14.5,9.25 Z"
+                id="路径"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/menu/cyan-blur.png b/src/assets/images/menu/cyan-blur.png
similarity index 100%
rename from public/images/menu/cyan-blur.png
rename to src/assets/images/menu/cyan-blur.png
diff --git a/src/assets/images/menu/dark.svg b/src/assets/images/menu/dark.svg
new file mode 100644
index 0000000..07a88d8
--- /dev/null
+++ b/src/assets/images/menu/dark.svg
@@ -0,0 +1,10 @@
+<svg width="195.893943px" height="200px" viewBox="0 0 195.893943 200" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="currentColor" fill-rule="nonzero">
+            <path
+                d="M166.698916,36.5504242 L173.364867,20.6892512 L179.802304,36.5504242 L195.893943,36.5504242 L182.790556,47.3550062 L189.227993,66.2063848 L174.745712,54.02291 L158.65212,66.2063848 L163.94113,47.3550062 L150.607276,36.5504242 L166.698916,36.5504242 L166.698916,36.5504242 Z M166.698916,143.447818 L159.572033,137.930294 L150.607276,143.447818 L154.054508,134.481109 L148.308471,129.883497 L156.353314,129.883497 L159.572033,121.838654 L161.870838,129.883497 L169.917634,129.883497 L163.021217,134.481109 L166.698916,143.447818 L166.698916,143.447818 Z M118.19353,78.620326 L121.412249,67.5852775 L125.320414,78.620326 L135.664063,78.620326 L126.240327,85.516743 L129.918025,96.7803049 L120.492336,89.8838879 L111.52758,96.7803049 L114.974812,85.516743 L106.929968,78.620326 L118.19353,78.620326 L118.19353,78.620326 Z M99.8030849,200 C72.5234034,199.384772 49.5346956,190.26572 30.8369616,172.640892 C12.1405296,155.017366 1.8724007,132.565763 0.032574917,105.286081 C-0.580700343,78.0063997 7.46544503,54.6732943 24.171011,35.2867648 C40.875275,15.9002354 62.7910765,4.59761139 89.9184157,1.37889277 L106.929968,0 L96.1253864,13.1033877 C87.542137,23.3715166 81.7947972,34.7125517 78.8833673,47.126493 C75.9719374,59.5404342 76.0487596,72.1835399 79.1138339,85.05581 C84.1710762,104.980095 94.3623829,120.957152 109.687754,132.986983 C125.013125,145.016813 142.94394,151.185373 163.480197,151.492661 L190.145953,151.492661 L179.802304,163.217156 C169.534175,175.017822 157.503693,184.098463 143.710859,190.459078 C129.918025,196.819693 115.2821,200 99.8030849,200 L99.8030849,200 Z M74.9752025,18.8494254 C56.1251262,24.519943 41.1448037,35.0947094 30.0342351,50.5737248 C18.9223644,66.0527403 13.5962445,83.9835548 14.0558755,104.366168 C15.8957013,127.815158 24.7849374,147.125516 40.7235837,162.297243 C56.6622302,177.46897 76.3553972,185.361471 99.8030849,185.974746 C110.530845,185.822404 120.760562,184.060051 130.492238,180.687689 C140.223914,177.316628 149.15091,172.259386 157.273227,165.515962 C134.744801,164.137069 115.166216,156.512794 98.5374724,142.643138 C81.9100306,128.773482 70.7610509,110.727434 65.0905333,88.5049951 C62.1791034,76.3983425 61.6048902,64.367861 63.3678939,52.4135506 C65.1295954,40.4592403 68.9986983,29.2711986 74.9752025,18.8494254 Z"
+                id="形状"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/developer.svg b/src/assets/images/menu/developer.svg
new file mode 100644
index 0000000..30e6090
--- /dev/null
+++ b/src/assets/images/menu/developer.svg
@@ -0,0 +1,10 @@
+<svg width="174.921875px" height="174.921875px" viewBox="0 0 174.921875 174.921875" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="currentColor" fill-rule="nonzero">
+            <path
+                d="M160.332031,3.55271368e-15 L14.5703125,3.55271368e-15 C6.5234375,3.55271368e-15 0,6.5234375 0,14.5703125 L0,123.90625 C0,131.953125 6.5234375,138.476562 14.5703125,138.476562 L65.5859375,138.476562 L65.5859375,160.351562 L51.015625,160.351562 C46.9921875,160.351562 43.7304687,163.613281 43.7304687,167.636719 C43.7304687,171.660156 46.9921875,174.921875 51.015625,174.921875 L123.90625,174.921875 C127.929687,174.921875 131.191406,171.660156 131.191406,167.636719 C131.191406,163.613281 127.929687,160.351562 123.90625,160.351562 L109.335937,160.351562 L109.335937,138.496094 L160.351562,138.496094 C168.398438,138.496094 174.921875,131.972656 174.921875,123.925781 L174.921875,14.5898438 C174.921875,6.54296875 168.378906,3.55271368e-15 160.332031,3.55271368e-15 L160.332031,3.55271368e-15 Z M94.7460937,160.351562 L80.1757812,160.351562 L80.1757812,138.496094 L94.7460937,138.496094 L94.7460937,160.351562 Z M160.332031,123.90625 L14.5703125,123.90625 L14.5703125,14.5898437 L160.332031,14.5898437 L160.332031,123.90625 L160.332031,123.90625 Z M121.894531,55.9960938 L138.75,70.078125 L121.621094,86.6601562 C119.53125,88.6914062 119.472656,92.0117188 121.503906,94.1015625 C122.539062,95.15625 123.90625,95.703125 125.292969,95.703125 C126.621094,95.703125 127.929687,95.2148438 128.964844,94.21875 L150.292969,73.5742188 C151.367187,72.5390625 151.953125,71.09375 151.894531,69.609375 C151.835938,68.125 151.152344,66.71875 150.019531,65.78125 L128.691406,47.9492188 C126.464844,46.09375 123.144531,46.3867188 121.269531,48.59375 C119.375,50.8203125 119.667969,54.140625 121.894531,55.9960938 L121.894531,55.9960938 Z M45.9570312,94.21875 C46.9726562,95.2148438 48.3007812,95.703125 49.6289062,95.703125 C50.9960938,95.703125 52.3828125,95.1757812 53.4179688,94.1015625 C55.4492187,92.0117188 55.390625,88.6914062 53.3007812,86.6601562 L36.1523437,70.078125 L53.0078125,55.9960938 C55.234375,54.140625 55.5273437,50.8203125 53.671875,48.59375 C51.796875,46.3671875 48.4765625,46.0742188 46.25,47.9492188 L24.921875,65.78125 C23.7695312,66.7382812 23.0859375,68.125 23.046875,69.609375 C22.9882812,71.09375 23.5742187,72.5390625 24.6484375,73.5742188 L45.9570312,94.21875 L45.9570312,94.21875 Z M74.0234375,95.0195312 C74.8046875,95.46875 75.703125,95.703125 76.6015625,95.703125 C78.4375,95.703125 80.234375,94.7460938 81.2109375,93.0273438 L102.890625,54.5507812 C104.316406,52.0117188 103.417969,48.8085938 100.878906,47.4023437 C98.3398438,45.9765625 95.1367188,46.875 93.7109375,49.4140625 L72.03125,87.890625 C70.5859375,90.390625 71.5039062,93.59375 74.0234375,95.0195312 L74.0234375,95.0195312 Z"
+                id="形状"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/expand.svg b/src/assets/images/menu/expand.svg
new file mode 100644
index 0000000..8239599
--- /dev/null
+++ b/src/assets/images/menu/expand.svg
@@ -0,0 +1,20 @@
+<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path
+            d="M166,0 C184.777681,-3.44940413e-15 200,15.2223185 200,34 L200,166 C200,184.777681 184.777681,200 166,200 L34,200 C15.2223185,200 2.29960275e-15,184.777681 0,166 L0,34 C-2.29960275e-15,15.2223185 15.2223185,3.44940413e-15 34,0 L166,0 Z M162,20 L118,20 C108.058875,20 100,28.0588745 100,38 L100,162 C100,171.941125 108.058875,180 118,180 L162,180 C171.941125,180 180,171.941125 180,162 L180,38 C180,28.0588745 171.941125,20 162,20 Z M61.1075424,75.4360715 C59.6900409,74.0997272 58.5169363,73.6960398 57.5882284,74.2250095 C56.6595206,74.7539791 56.170727,75.9928817 56.1218476,77.9417171 C56.1218476,79.0553374 56.0851881,80.3777615 56.011869,81.9089894 C55.93855,83.4402172 55.9018905,84.7626413 55.9018905,85.8762616 C55.9018905,87.3796489 55.3642175,88.3401464 54.2888716,88.757754 C53.2135256,89.1753616 51.7471448,89.3563249 49.8897291,89.3006439 C48.5699864,89.3006439 46.7858897,89.2867237 44.5374391,89.2588832 C42.2889885,89.2310426 39.9794387,89.2171224 37.6087897,89.2171224 C35.2381407,89.2171224 33.00191,89.2032021 30.9000974,89.1753616 C28.7982849,89.1475211 27.2585851,89.1336009 26.2809979,89.1336009 C24.130306,89.1336009 22.5539466,89.5372882 21.5519197,90.3446629 C20.5498928,91.1520376 20.0488794,92.7250263 20.0488794,95.0636288 C20,96.7897402 19.9877802,98.3488086 20.0122198,99.740834 C20.0366595,101.132859 20.0488794,102.580566 20.0488794,104.083953 C20.0488794,105.364616 20.2199571,106.380795 20.5621126,107.132489 C20.9042682,107.884182 21.3564023,108.454913 21.9185149,108.84468 C22.4806276,109.234447 23.1038394,109.498932 23.7881505,109.638134 C24.4724615,109.777337 25.1323329,109.846938 25.7677646,109.846938 C27.2341454,109.846938 29.1404405,109.860858 31.4866498,109.888699 C33.8328591,109.916539 36.2523874,109.930459 38.7452348,109.930459 C41.2380822,109.930459 43.6331709,109.94438 45.9305009,109.97222 C47.8996408,109.996084 49.5455785,110.00972 50.8683139,110.013129 L51.502748,110.013981 C52.7736114,110.013981 53.7756383,110.194944 54.5088287,110.556871 C55.2420191,110.918797 55.6086143,111.795773 55.6086143,113.187799 C55.6086143,113.855971 55.6208341,114.593744 55.6452738,115.401119 C55.6697135,116.208494 55.6819333,117.029789 55.6819333,117.865004 L55.6819333,122.291644 C55.633054,124.296161 56.1585071,125.493303 57.2582927,125.88307 C58.3580783,126.272837 59.76336,125.688186 61.4741376,124.129118 C63.0382771,122.737093 64.8223738,121.136263 66.8264276,119.326631 C68.8304814,117.516998 70.8711947,115.693444 72.9485675,113.855971 C75.0259404,112.018497 77.0299942,110.236705 78.9607289,108.510594 C80.8914637,106.784482 82.5655818,105.253254 83.9830832,103.91691 C85.3517053,102.636247 86.0237965,101.397344 86,100.200202 C85.9749172,99.0030605 85.2539466,97.7363175 83.8364451,96.3999732 C82.2723056,95.0079478 80.4882089,93.3792782 78.4841551,91.5139642 C76.4801013,89.6486502 74.4271682,87.7554958 72.3253557,85.8345008 C70.2235432,83.9135058 68.1950497,82.0342716 66.2398753,80.1967982 C64.2847008,78.3593247 62.5739232,76.7724158 61.1075424,75.4360715 Z"
+            id="形状结合" fill="currentColor" fill-rule="nonzero"></path>
+    </g>
+</svg>
+
+
+<!-- <svg width="134px" height="114px" viewBox="0 0 134 114" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="矩形" stroke="currentColor" stroke-width="10" x="5" y="5" width="124" height="104" rx="28"></rect>
+        <rect id="矩形" fill="currentColor" x="78" y="20" width="30" height="73" rx="12"></rect>
+        <path
+            d="M50.0276107,39.9942033 C49.0611413,39.0690419 48.2613046,38.789566 47.6281006,39.1557758 C46.9948966,39.5219855 46.6616313,40.3796873 46.6283047,41.7288811 C46.6283047,42.499849 46.6033098,43.4153733 46.55332,44.4754542 C46.5033302,45.535535 46.4783354,46.4510594 46.4783354,47.2220273 C46.4783354,48.2628338 46.1117435,48.9277937 45.3785599,49.2169066 C44.6453762,49.5060196 43.6455804,49.6313018 42.3791723,49.5927535 C41.4793561,49.5927535 40.2629377,49.5831164 38.7299174,49.5638422 C37.1968971,49.5445679 35.6222186,49.5349309 34.005882,49.5349309 C32.3895453,49.5349309 30.8648567,49.5252937 29.4318159,49.5060196 C27.9987751,49.4867454 26.9489895,49.4771083 26.282459,49.4771083 C24.8160917,49.4771083 23.7413111,49.7565841 23.0581173,50.3155358 C22.3749234,50.8744876 22.0333266,51.9634797 22.0333266,53.5825122 C22,54.7775124 21.9916684,55.8568675 22.0083316,56.8205774 C22.0249949,57.784287 22.0333266,58.7865457 22.0333266,59.8273521 C22.0333266,60.7139649 22.1499694,61.4174734 22.383255,61.937877 C22.6165408,62.4582798 22.9248112,62.8534013 23.3080662,63.12324 C23.6913214,63.3930787 24.1162346,63.5761837 24.582806,63.6725543 C25.0493774,63.7689256 25.4992855,63.8171109 25.9325304,63.8171109 C26.9323263,63.8171109 28.2320609,63.8267478 29.8317343,63.8460224 C31.4314076,63.8652962 33.0810708,63.8749331 34.7807237,63.8749331 C36.4803767,63.8749331 38.1133766,63.8845707 39.6797235,63.9038446 C41.0223065,63.9203658 42.1445263,63.9298061 43.046383,63.9321662 L43.4789478,63.9327561 C44.3454375,63.9327561 45.0286314,64.0580381 45.5285293,64.308603 C46.0284272,64.5591671 46.2783762,65.1663044 46.2783762,66.1300147 C46.2783762,66.5925953 46.2867078,67.1033612 46.303371,67.6623131 C46.3200343,68.221265 46.3283659,68.7898539 46.3283659,69.3680797 L46.3283659,72.4326766 C46.2950394,73.8204191 46.6532996,74.6492097 47.4031465,74.9190484 C48.1529934,75.1888871 49.1111311,74.7841287 50.2775596,73.704774 C51.3440085,72.7410643 52.5604268,71.6327974 53.9268145,70.3799753 C55.2932022,69.1271524 56.6845848,67.864692 58.1009622,66.5925953 C59.5173397,65.3204979 60.8837274,64.0869496 62.2001253,62.8919497 C63.5165232,61.6969491 64.6579568,60.6368681 65.6244261,59.7117069 C66.5575689,58.8250941 67.0158086,57.967392 67,57.1386014 C66.9824821,56.3098111 66.4909158,55.4328352 65.5244465,54.5076737 C64.4579976,53.5439638 63.2415793,52.4164234 61.8751916,51.1250521 C60.5088039,49.8336809 59.1090897,48.5230355 57.676049,47.1931159 C56.2430083,45.8631963 54.8599573,44.562188 53.5268962,43.2900911 C52.193835,42.017994 51.0274065,40.9193648 50.0276107,39.9942033 Z"
+            id="形状结合-path" fill="currentColor" fill-rule="nonzero"></path>
+    </g>
+</svg> -->
\ No newline at end of file
diff --git a/src/assets/images/menu/job.svg b/src/assets/images/menu/job.svg
new file mode 100644
index 0000000..26b9b9d
--- /dev/null
+++ b/src/assets/images/menu/job.svg
@@ -0,0 +1,13 @@
+<svg width="44px" height="46px" viewBox="0 0 44 46" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="currentColor" fill-rule="nonzero">
+            <path
+                d="M4,42.016 L3.982,6 L10,6 L10,7.98 C10,10.196 11.79,12 13.992,12 L30.008,12 C32.2195367,11.9900797 34.0055374,10.191552 34,7.98 L34,6 L40,5.984 L40.016,42 L4,42.016 Z M30,4.02 L30.008,8 L14,7.98 L14,4.02 L13.992,4 L30,4.02 Z M39.99,2 L33.44,2 C32.748,0.81 31.476,0 30.008,0 L13.992,0 C12.524,0 11.254,0.808 10.56,2 L3.982,2 C1.7829359,2.00220651 0.00110228749,3.78493507 0,5.984 L0,42.016 C0,44.212 1.788,46 3.984,46 L40.016,46 C42.2149324,45.9966958 43.9966958,44.2149324 44,42.016 L44,5.984 C43.9911797,3.77720404 42.1968066,1.99446534 39.99,2 Z"
+                id="形状"></path>
+            <path
+                d="M28.692,18.818 L19.208,29.186 L15.326,24.836 C14.5903567,24.0119912 13.3260088,23.9403567 12.502,24.676 C11.6779912,25.4116433 11.6063567,26.6759912 12.342,27.5 L17.698,33.5 C18.0746834,33.9219236 18.6124042,34.1646247 19.178,34.168 L19.19,34.168 C19.75,34.168 20.286,33.932 20.666,33.518 L31.644,21.518 C32.3895844,20.7028277 32.3331723,19.4375844 31.518,18.692 C30.7028277,17.9464156 29.4375844,18.0028277 28.692,18.818"
+                id="路径"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/layout.svg b/src/assets/images/menu/layout.svg
new file mode 100644
index 0000000..643fca8
--- /dev/null
+++ b/src/assets/images/menu/layout.svg
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 14 14'>
+    <path d='M1 1v4a8 8 0 0 0 8 8h4' stroke='#efefef' stroke-width='2' stroke-linecap='round' />
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/light.svg b/src/assets/images/menu/light.svg
new file mode 100644
index 0000000..efdcc6b
--- /dev/null
+++ b/src/assets/images/menu/light.svg
@@ -0,0 +1,6 @@
+<svg t="1741781661619" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1819"
+    width="200" height="200">
+    <path
+        d="M512 224c159.058 0 288 128.942 288 288S671.058 800 512 800 224 671.058 224 512s128.942-288 288-288z m0 64c-123.712 0-224 100.288-224 224s100.288 224 224 224 224-100.288 224-224-100.288-224-224-224z m0 576c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32zM263.098 760.902c12.497 12.496 12.497 32.758 0 45.254l-45.254 45.255c-12.497 12.497-32.758 12.497-45.255 0s-12.497-32.758 0-45.255l45.255-45.254c12.496-12.497 32.758-12.497 45.254 0z m543.058 0l45.255 45.254c12.497 12.497 12.497 32.758 0 45.255s-32.758 12.497-45.255 0l-45.254-45.255c-12.497-12.496-12.497-32.758 0-45.254 12.496-12.497 32.758-12.497 45.254 0zM128 480c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H64c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32h64z m832 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32h-64c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32h64zM217.844 172.589l45.254 45.255c12.497 12.496 12.497 32.758 0 45.254-12.496 12.497-32.758 12.497-45.254 0l-45.255-45.254c-12.497-12.497-12.497-32.758 0-45.255s32.758-12.497 45.255 0z m633.567 0c12.497 12.497 12.497 32.758 0 45.255l-45.255 45.254c-12.496 12.497-32.758 12.497-45.254 0-12.497-12.496-12.497-32.758 0-45.254l45.254-45.255c12.497-12.497 32.758-12.497 45.255 0zM512 32c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32-17.673 0-32-14.327-32-32V64c0-17.673 14.327-32 32-32z"
+        fill="currentColor" p-id="1820"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/logo.svg b/src/assets/images/menu/logo.svg
new file mode 100644
index 0000000..5ade25a
--- /dev/null
+++ b/src/assets/images/menu/logo.svg
@@ -0,0 +1,13 @@
+<svg width="62.2015625px" height="63.8665px" viewBox="0 0 62.2015625 63.8665" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="currentColor" fill-rule="nonzero">
+            <path
+                d="M37.97925,13.5996875 L50.7601875,6.2105 C52.411056,5.16332103 54.5253761,5.193255 56.1459375,6.28675 C59.0218125,8.1376875 62.1860625,9.7859375 62.1860625,9.7859375 L46.8653125,18.818625 L37.97925,13.5996875 Z M37.8421875,31.5685625 L46.773625,26.4711875 L62.2015625,35.387125 L55.18775,39.5405625 C55.18775,39.5405625 53.270125,40.9254375 49.33,38.34875 C45.389875,35.7720625 37.8421875,31.5685625 37.8421875,31.5685625 Z M26.3781875,38.2140625 L31.2169375,35.4753125 L36.0091875,38.2831875 L34.7995,61.8344375 L31.1705,63.8665 L27.56525,61.7665625 L26.3781875,38.2140625 L26.3781875,38.2140625 Z M0,9.80025 L22.2140625,22.6109375 C22.2140625,22.6109375 25.468875,24.0494375 27.1445625,25.9325 C28.704625,27.685625 26.4139375,30.6210625 26.4139375,30.6210625 L40.1054375,22.5168125 L10.8335,5.6003125 C10.8335,5.6003125 8.7025625,4.542 5.4775,6.51325 C2.2524375,8.4845 0,9.80025 0,9.80025 L0,9.80025 Z"
+                id="形状"></path>
+            <path
+                d="M0.1263125,35.40975 L7.3736875,39.503625 C7.39162617,39.5141874 7.41034761,39.52336 7.4296875,39.5310625 C7.70975,39.6501875 9.86575,40.4785625 12.4185625,38.6348125 C15.0310625,36.7481875 25.395,31.1800625 26.3460625,30.6699375 C26.3954258,30.6435723 26.4407607,30.6102762 26.4806875,30.5710625 C26.9061875,30.1503125 29.329125,27.5056875 26.3138125,25.0458125 C26.278125,25.0171875 26.1231875,24.8694375 26.0755,24.8635 L24.7406875,23.9815625 L23.8241875,23.421375 L22.5131875,22.734875 C22.330875,22.633625 22.108,22.754 21.9268125,22.8540625 L0.1263125,35.40975 Z M39.604875,5.1808125 L30.9094375,0 L22.237875,5.2034375 L30.932125,10.3163125 L39.604875,5.1808125 Z"
+                id="形状"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/menu/red-blur.png b/src/assets/images/menu/red-blur.png
similarity index 100%
rename from public/images/menu/red-blur.png
rename to src/assets/images/menu/red-blur.png
diff --git a/src/assets/images/menu/selected-cluster.svg b/src/assets/images/menu/selected-cluster.svg
new file mode 100644
index 0000000..23072bd
--- /dev/null
+++ b/src/assets/images/menu/selected-cluster.svg
@@ -0,0 +1,13 @@
+<svg width="48px" height="45px" viewBox="0 0 48 45" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="currentColor" fill-rule="nonzero">
+            <path
+                d="M47.5,33 L44.125,33 L44.125,24.25 L26.125,24.25 L26.125,18.5 L41,18.5 C41.55,18.5 42,18.05 42,17.5 L42,1 C42,0.45 41.55,0 41,0 L7,0 C6.45,0 6,0.45 6,1 L6,17.5 C6,18.05 6.45,18.5 7,18.5 L21.875,18.5 L21.875,24.25 L3.875,24.25 L3.875,33 L0.5,33 C0.225,33 0,33.225 0,33.5 L0,44.5 C0,44.775 0.225,45 0.5,45 L11.5,45 C11.775,45 12,44.775 12,44.5 L12,33.5 C12,33.225 11.775,33 11.5,33 L8.125,33 L8.125,28.5 L21.875,28.5 L21.875,33 L18.5,33 C18.225,33 18,33.225 18,33.5 L18,44.5 C18,44.775 18.225,45 18.5,45 L29.5,45 C29.775,45 30,44.775 30,44.5 L30,33.5 C30,33.225 29.775,33 29.5,33 L26.125,33 L26.125,28.5 L39.875,28.5 L39.875,33 L36.5,33 C36.225,33 36,33.225 36,33.5 L36,44.5 C36,44.775 36.225,45 36.5,45 L47.5,45 C47.775,45 48,44.775 48,44.5 L48,33.5 C48,33.225 47.775,33 47.5,33 Z M8,40.83125 C8,40.925 7.925,41 7.83125,41 L4.1625,41 C4.06875,41 3.99375,40.925 3.99375,40.83125 L3.99375,37.1625 C3.99375,37.06875 4.06875,36.99375 4.1625,36.99375 L7.83125,36.99375 C7.925,36.99375 8,37.06875 8,37.1625 L8,40.83125 Z M26,40.83125 C26,40.925 25.925,41 25.83125,41 L22.1625,41 C22.06875,41 21.99375,40.925 21.99375,40.83125 L21.99375,37.1625 C21.99375,37.06875 22.06875,36.99375 22.1625,36.99375 L25.83125,36.99375 C25.925,36.99375 26,37.06875 26,37.1625 L26,40.83125 Z M10,14.5 L10,4 L38,4 L38,14.5 L10,14.5 Z M44,40.83125 C44,40.925 43.925,41 43.83125,41 L40.1625,41 C40.06875,41 39.99375,40.925 39.99375,40.83125 L39.99375,37.1625 C39.99375,37.06875 40.06875,36.99375 40.1625,36.99375 L43.83125,36.99375 C43.925,36.99375 44,37.06875 44,37.1625 L44,40.83125 Z"
+                id="形状"></path>
+            <path
+                d="M14.5,9.25 C14.5,10.6307119 15.6192881,11.75 17,11.75 C18.3807119,11.75 19.5,10.6307119 19.5,9.25 C19.5,7.86928813 18.3807119,6.75 17,6.75 C15.6192881,6.75 14.5,7.86928813 14.5,9.25 Z"
+                id="路径"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/selected-developer.svg b/src/assets/images/menu/selected-developer.svg
new file mode 100644
index 0000000..de3f1e9
--- /dev/null
+++ b/src/assets/images/menu/selected-developer.svg
@@ -0,0 +1,16 @@
+<svg width="147px" height="118px" viewBox="0 0 147 118" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="currentColor" fill-rule="nonzero">
+            <path
+                d="M43.8298859,91.9360911 C46.6296357,95.295527 46.7085019,100.83737 44.0270514,104.319413 C41.3258843,107.801456 36.8699445,107.899542 34.0701947,104.564627 L2.14910372,66.3111972 C0.768945367,64.6682614 0,62.3877684 0,60.0091897 C0,57.6306111 0.788661915,55.3501181 2.14910372,53.7071823 L34.0701947,15.4537521 C36.8699445,12.0943162 41.3258843,12.1924019 44.0270514,15.6989664 C46.7282184,19.1810094 46.6493523,24.7228525 43.8298859,28.0822884 L17.1533966,60.0091897 L43.8298859,91.9360911 L43.8298859,91.9360911 Z"
+                id="路径"></path>
+            <path
+                d="M96.5054595,11.9045856 L64.586434,112.502267 C63.1472191,116.957585 59.0858731,119.148725 55.4779783,117.395813 C51.8700835,115.642901 50.0759937,110.627624 51.4757781,106.14796 L83.4145189,5.55027904 C84.3214214,2.65310478 86.4309555,0.559348597 88.9150798,0.0967745563 C91.3992041,-0.365799485 93.9227589,0.851500624 95.4802654,3.28610084 C97.0377719,5.72070106 97.4320773,9.00741135 96.5054595,11.9045856 Z"
+                id="路径"></path>
+            <path
+                d="M144.851473,66.303434 L112.924601,104.546888 C110.126072,107.905448 105.672076,107.807387 102.972088,104.301738 C100.272099,100.820603 100.350931,95.2802048 103.169167,91.9216451 L129.81431,59.9785551 L103.169167,28.0599802 C100.370639,24.7014205 100.291807,19.1610227 102.972088,15.6798878 C105.672076,12.1987529 110.126072,12.1006928 112.924601,15.4347374 L144.851473,53.6781913 C146.231029,55.3206986 147,57.6005968 147,59.9785551 C147.019347,62.3810285 146.231029,64.6609267 144.851473,66.303434 L144.851473,66.303434 Z"
+                id="路径"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/selected-job.svg b/src/assets/images/menu/selected-job.svg
new file mode 100644
index 0000000..26b9b9d
--- /dev/null
+++ b/src/assets/images/menu/selected-job.svg
@@ -0,0 +1,13 @@
+<svg width="44px" height="46px" viewBox="0 0 44 46" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="currentColor" fill-rule="nonzero">
+            <path
+                d="M4,42.016 L3.982,6 L10,6 L10,7.98 C10,10.196 11.79,12 13.992,12 L30.008,12 C32.2195367,11.9900797 34.0055374,10.191552 34,7.98 L34,6 L40,5.984 L40.016,42 L4,42.016 Z M30,4.02 L30.008,8 L14,7.98 L14,4.02 L13.992,4 L30,4.02 Z M39.99,2 L33.44,2 C32.748,0.81 31.476,0 30.008,0 L13.992,0 C12.524,0 11.254,0.808 10.56,2 L3.982,2 C1.7829359,2.00220651 0.00110228749,3.78493507 0,5.984 L0,42.016 C0,44.212 1.788,46 3.984,46 L40.016,46 C42.2149324,45.9966958 43.9966958,44.2149324 44,42.016 L44,5.984 C43.9911797,3.77720404 42.1968066,1.99446534 39.99,2 Z"
+                id="形状"></path>
+            <path
+                d="M28.692,18.818 L19.208,29.186 L15.326,24.836 C14.5903567,24.0119912 13.3260088,23.9403567 12.502,24.676 C11.6779912,25.4116433 11.6063567,26.6759912 12.342,27.5 L17.698,33.5 C18.0746834,33.9219236 18.6124042,34.1646247 19.178,34.168 L19.19,34.168 C19.75,34.168 20.286,33.932 20.666,33.518 L31.644,21.518 C32.3895844,20.7028277 32.3331723,19.4375844 31.518,18.692 C30.7028277,17.9464156 29.4375844,18.0028277 28.692,18.818"
+                id="路径"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/selected-user.svg b/src/assets/images/menu/selected-user.svg
new file mode 100644
index 0000000..7d457c4
--- /dev/null
+++ b/src/assets/images/menu/selected-user.svg
@@ -0,0 +1,10 @@
+<svg width="170.833333px" height="170.833333px" viewBox="0 0 170.833333 170.833333" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="currentColor" fill-rule="nonzero">
+            <path
+                d="M85.4166666,-5.32907052e-15 C38.3333332,-5.32907052e-15 -5.32907052e-15,38.3333332 -5.32907052e-15,85.4166666 C-5.32907052e-15,132.5 38.3333332,170.833333 85.4166666,170.833333 C132.5,170.833333 170.833333,132.5 170.833333,85.4166666 C170.833333,38.3333332 132.5,-5.32907052e-15 85.4166666,-5.32907052e-15 Z M41.6666666,143.75 C41.6666666,119.583333 61.25,100 85.4166666,100 C109.583333,100 129.166667,119.583333 129.166667,143.75 C117.083333,152.916667 101.666667,158.333333 85.4166666,158.333333 C69.1666666,158.333333 53.75,152.916667 41.6666666,143.75 Z M66.6666666,68.75 C66.6666666,58.3333334 75,50 85.4166666,50 C95.8333332,50 104.166667,58.3333334 104.166667,68.75 C104.166667,79.1666666 95.8333332,87.5 85.4166666,87.5 C75,87.5 66.6666666,79.1666666 66.6666666,68.75 Z M140.416667,132.916667 C136.666667,114.166667 123.75,98.75 106.25,91.6666666 C112.5,85.8333332 116.25,77.9166666 116.25,68.75 C116.25,51.6666666 102.083333,37.5 85,37.5 C67.9166666,37.5 53.75,51.6666666 53.75,68.75 C53.75,77.9166666 57.5,85.8333334 63.75,91.6666666 C46.25,98.75 33.3333334,114.166667 29.5833332,132.916667 C18.7499998,120 11.6666666,103.75 11.6666666,85.4166666 C11.6666666,45.4166666 44.5833332,12.5 84.5833332,12.5 C124.583333,12.5 158.333333,45.4166666 158.333333,85.4166666 C158.333333,103.75 151.666667,120 140.416667,132.916667 Z"
+                id="形状"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/sidebar-closure.svg b/src/assets/images/menu/sidebar-closure.svg
new file mode 100644
index 0000000..66d05c2
--- /dev/null
+++ b/src/assets/images/menu/sidebar-closure.svg
@@ -0,0 +1,10 @@
+<svg width="200.035538px" height="117.302516px" viewBox="0 0 200.035538 117.302516" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="currentColor" fill-rule="nonzero">
+            <path
+                d="M194.590602,33.8598329 C187.538993,41.0864816 113.597124,111.527552 113.597124,111.527552 C110.038854,115.217857 105.132889,117.302516 100.006523,117.302516 C94.8801572,117.302516 89.9741914,115.217857 86.4159223,111.527552 C86.4159223,111.527552 12.4990585,41.0864816 5.44744976,33.8598329 C-1.81581659,25.9947492 -1.81581659,13.8685612 5.44744976,6.00347756 C12.9491612,-1.69827958 23.4515573,-2.27341072 32.6036452,6.00347756 L100.019026,70.6432248 L167.4094,6.00347756 C176.6115,-2.29841646 187.08889,-1.69827958 194.590602,6.00347756 C201.850517,13.8602613 201.850517,25.9780434 194.590602,33.8348271 L194.590602,33.8598329 Z"
+                id="路径"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/sidebar-expand.svg b/src/assets/images/menu/sidebar-expand.svg
new file mode 100644
index 0000000..d928b5a
--- /dev/null
+++ b/src/assets/images/menu/sidebar-expand.svg
@@ -0,0 +1,12 @@
+<svg width="117.302516px" height="200.035538px" viewBox="0 0 117.302516 200.035538" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组"
+            transform="translate(58.6513, 100.0178) rotate(-90) translate(-58.6513, -100.0178)translate(-41.3665, 41.3665)"
+            fill="currentColor" fill-rule="nonzero">
+            <path
+                d="M194.590602,33.8598329 C187.538993,41.0864816 113.597124,111.527552 113.597124,111.527552 C110.038854,115.217857 105.132889,117.302516 100.006523,117.302516 C94.8801572,117.302516 89.9741914,115.217857 86.4159223,111.527552 C86.4159223,111.527552 12.4990585,41.0864816 5.44744976,33.8598329 C-1.81581659,25.9947492 -1.81581659,13.8685612 5.44744976,6.00347756 C12.9491612,-1.69827958 23.4515573,-2.27341072 32.6036452,6.00347756 L100.019026,70.6432248 L167.4094,6.00347756 C176.6115,-2.29841646 187.08889,-1.69827958 194.590602,6.00347756 C201.850517,13.8602613 201.850517,25.9780434 194.590602,33.8348271 L194.590602,33.8598329 Z"
+                id="路径"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/menu/user.svg b/src/assets/images/menu/user.svg
new file mode 100644
index 0000000..a6976d1
--- /dev/null
+++ b/src/assets/images/menu/user.svg
@@ -0,0 +1,10 @@
+<svg width="170.833333px" height="170.833333px" viewBox="0 0 170.833333 170.833333" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="currentColor" fill-rule="nonzero">
+            <path
+                d="M85.4166666,0 C38.3333332,0 0,38.3333332 0,85.4166666 C0,132.5 38.3333332,170.833333 85.4166666,170.833333 C132.5,170.833333 170.833333,132.5 170.833333,85.4166666 C170.833333,38.3333332 132.5,0 85.4166666,0 Z M41.6666666,143.75 C41.6666666,119.583333 61.25,100 85.4166666,100 C109.583333,100 129.166667,119.583333 129.166667,143.75 C117.083333,152.916667 101.666667,158.333333 85.4166666,158.333333 C69.1666666,158.333333 53.75,152.916667 41.6666666,143.75 Z M66.6666666,68.75 C66.6666666,58.3333334 75,50 85.4166666,50 C95.8333332,50 104.166667,58.3333334 104.166667,68.75 C104.166667,79.1666666 95.8333332,87.5 85.4166666,87.5 C75,87.5 66.6666666,79.1666666 66.6666666,68.75 Z M140.416667,132.916667 C136.666667,114.166667 123.75,98.75 106.25,91.6666666 C112.5,85.8333332 116.25,77.9166666 116.25,68.75 C116.25,51.6666666 102.083333,37.5 85,37.5 C67.9166666,37.5 53.75,51.6666666 53.75,68.75 C53.75,77.9166666 57.5,85.8333334 63.75,91.6666666 C46.25,98.75 33.3333334,114.166667 29.5833332,132.916667 C18.7499998,120 11.6666666,103.75 11.6666666,85.4166666 C11.6666666,45.4166666 44.5833332,12.5 84.5833332,12.5 C124.583333,12.5 158.333333,45.4166666 158.333333,85.4166666 C158.333333,103.75 151.666667,120 140.416667,132.916667 Z"
+                id="形状"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/profile/created-at.svg b/src/assets/images/profile/created-at.svg
new file mode 100644
index 0000000..93ed18f
--- /dev/null
+++ b/src/assets/images/profile/created-at.svg
@@ -0,0 +1,6 @@
+<svg t="1694488945708" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="39963" width="64" height="64">
+    <path
+        d="M512 895.936c-211.776 0-384-172.224-384-384C128 300.224 300.16 128 512 128c211.648 0 384 172.288 384 384a32 32 0 1 0 64 0C960 264.96 759.04 64 512 64 265.216 64 64 264.96 64 512c0 246.912 201.024 447.936 448 447.936a32 32 0 0 0 0-64zM512 190.912a32 32 0 0 0-32.064 32.064v275.776L361.28 617.344a32 32 0 0 0 45.312 45.248L534.208 535.04a30.912 30.912 0 0 0 5.184-6.72s0-0.128 0.128-0.128l0.64-1.152c0-0.128 0.128-0.128 0.128-0.192l0.64-1.216v-0.192c0.256-0.448 0.512-0.832 0.512-1.216 0-0.064 0.192-0.064 0.192-0.192l0.448-1.28 0.128-0.256c0.064-0.384 0.32-0.768 0.384-1.28l0.128-0.192 0.256-1.28c0-0.128 0-0.192 0.128-0.192a26.24 26.24 0 0 0 0.384-1.664c0.128-0.32 0.128-0.768 0.192-1.152 0-0.192 0-0.32 0.128-0.512l0.064-1.088c0-0.256 0-0.448 0.128-0.704l0.064-0.832v-290.56a32.128 32.128 0 0 0-32.064-32z m415.552 544.96h-127.872v-128a32 32 0 1 0-64.064 0v128h-128a32 32 0 1 0 0 64.064h128.064v128a32 32 0 0 0 64 0v-128.064h128.064a32 32 0 0 0 32.064-32.064 32.32 32.32 0 0 0-32.256-31.936z"
+        fill="currentColor" p-id="39964"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/profile/email.svg b/src/assets/images/profile/email.svg
new file mode 100644
index 0000000..321f7f9
--- /dev/null
+++ b/src/assets/images/profile/email.svg
@@ -0,0 +1,6 @@
+<svg t="1735025790420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7715"
+    width="200" height="200">
+    <path
+        d="M874.666667 181.333333H149.333333c-40.533333 0-74.666667 34.133333-74.666666 74.666667v512c0 40.533333 34.133333 74.666667 74.666666 74.666667h725.333334c40.533333 0 74.666667-34.133333 74.666666-74.666667V256c0-40.533333-34.133333-74.666667-74.666666-74.666667z m-725.333334 64h725.333334c6.4 0 10.666667 4.266667 10.666666 10.666667v25.6L512 516.266667l-373.333333-234.666667V256c0-6.4 4.266667-10.666667 10.666666-10.666667z m725.333334 533.333334H149.333333c-6.4 0-10.666667-4.266667-10.666666-10.666667V356.266667l356.266666 224c4.266667 4.266667 10.666667 4.266667 17.066667 4.266666s12.8-2.133333 17.066667-4.266666l356.266666-224V768c0 6.4-4.266667 10.666667-10.666666 10.666667z"
+        fill="currentColor" p-id="7716"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/profile/id.svg b/src/assets/images/profile/id.svg
new file mode 100644
index 0000000..bdd8386
--- /dev/null
+++ b/src/assets/images/profile/id.svg
@@ -0,0 +1,9 @@
+<svg t="1694488637106" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="28840" width="64" height="64">
+    <path
+        d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32z m-40 632H136V232h752v560z"
+        p-id="28841" fill="currentColor"></path>
+    <path
+        d="M610.3 476h123.4c1.3 0 2.3-3.6 2.3-8v-48c0-4.4-1-8-2.3-8H610.3c-1.3 0-2.3 3.6-2.3 8v48c0 4.4 1 8 2.3 8zM615.1 620h185.7c3.9 0 7.1-3.6 7.1-8v-48c0-4.4-3.2-8-7.1-8H615.1c-3.9 0-7.1 3.6-7.1 8v48c0 4.4 3.2 8 7.1 8zM224 673h43.9c4.2 0 7.6-3.3 7.9-7.5 3.8-50.5 46-90.5 97.2-90.5s93.4 40 97.2 90.5c0.3 4.2 3.7 7.5 7.9 7.5H522c4.6 0 8.2-3.8 8-8.4-2.8-53.3-32-99.7-74.6-126.1 18.1-19.9 29.1-46.4 29.1-75.5 0-61.9-49.9-112-111.4-112s-111.4 50.1-111.4 112c0 29.1 11 55.5 29.1 75.5-42.7 26.5-71.8 72.8-74.6 126.1-0.4 4.6 3.2 8.4 7.8 8.4z m149-262c28.5 0 51.7 23.3 51.7 52s-23.2 52-51.7 52-51.7-23.3-51.7-52 23.2-52 51.7-52z"
+        p-id="28842" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/profile/location.svg b/src/assets/images/profile/location.svg
new file mode 100644
index 0000000..381126c
--- /dev/null
+++ b/src/assets/images/profile/location.svg
@@ -0,0 +1,9 @@
+<svg t="1735025813169" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9674"
+    width="200" height="200">
+    <path
+        d="M854.6 289.1c-18.8-43.4-45.7-82.3-79.9-115.7-34.2-33.4-73.9-59.5-118.2-77.8C610.7 76.6 562.1 67 512 67c-50.1 0-98.7 9.6-144.5 28.5-44.3 18.3-84 44.5-118.2 77.8-34.2 33.4-61.1 72.4-79.9 115.7-19.5 45-29.4 92.8-29.4 142 0 70.6 16.9 140.9 50.1 208.7 26.7 54.5 64 107.6 111 158.1 80.3 86.2 164.5 138.9 188.4 153 6.9 4.1 14.7 6.1 22.4 6.1 7.8 0 15.5-2 22.4-6.1 23.9-14.1 108.1-66.8 188.4-153 47-50.4 84.3-103.6 111-158.1C867.1 572 884 501.8 884 431.1c0-49.2-9.9-97-29.4-142zM512 880.2c-65.9-41.9-300-207.8-300-449.1 0-77.9 31.1-151.1 87.6-206.3C356.3 169.5 431.7 139 512 139s155.7 30.5 212.4 85.9C780.9 280 812 353.2 812 431.1c0 241.3-234.1 407.2-300 449.1z"
+        p-id="9675" fill="currentColor"></path>
+    <path
+        d="M512 263c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m79.2 255.2C570 539.3 541.9 551 512 551c-29.9 0-58-11.7-79.2-32.8C411.7 497 400 468.9 400 439c0-29.9 11.7-58 32.8-79.2C454 338.6 482.1 327 512 327c29.9 0 58 11.6 79.2 32.8C612.4 381 624 409.1 624 439c0 29.9-11.6 58-32.8 79.2z"
+        p-id="9676" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/profile/myj.jpg b/src/assets/images/profile/myj.jpg
new file mode 100644
index 0000000..5d8cc89
Binary files /dev/null and b/src/assets/images/profile/myj.jpg differ
diff --git a/src/assets/images/profile/name.svg b/src/assets/images/profile/name.svg
new file mode 100644
index 0000000..ca0aa8c
--- /dev/null
+++ b/src/assets/images/profile/name.svg
@@ -0,0 +1,6 @@
+<svg t="1735028375597" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="14663" width="200" height="200">
+    <path
+        d="M514.592 71.104c-144.096 0-260.992 118.464-260.992 264.544a264.832 264.832 0 0 0 109.696 214.912c-135.36 59.36-230.144 195.872-230.144 354.944h0.896c1.536 21.376 18.656 38.368 40.128 38.368s38.56-17.056 40.128-38.368h0.64c0-0.928-0.096-1.792-0.096-2.72v-0.16l-0.064-0.192c0.064-159.968 120-291.04 273.024-304.928 8.96 0.928 17.6 2.72 26.848 2.72 144.096 0 260.992-118.464 260.992-264.544s-116.928-264.544-261.024-264.544z m0 447.36c-99.776 0-180.704-81.984-180.704-183.168s80.864-183.168 180.704-183.168c99.712 0 180.64 81.984 180.64 183.168s-80.864 183.168-180.64 183.168z m381.44 384.16c0-0.352-0.192-0.64-0.192-0.992a388.224 388.224 0 0 0-111.36-269.12 38.88 38.88 0 0 0-28-11.968c-21.568 0-39.136 17.76-39.136 39.68 0 11.136 4.576 21.12 11.84 28.32l-0.096 0.064a308.64 308.64 0 0 1 85.312 213.856c0 1.056-0.16 1.984-0.16 3.04h0.992c1.504 21.376 18.688 38.368 40.128 38.368 21.472 0 38.56-17.056 40.128-38.368h0.608c0-0.8-0.096-1.504-0.096-2.272-0.064-0.16 0.064-0.352 0.064-0.544z"
+        p-id="14664" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/profile/phone.svg b/src/assets/images/profile/phone.svg
new file mode 100644
index 0000000..af0cfa2
--- /dev/null
+++ b/src/assets/images/profile/phone.svg
@@ -0,0 +1,6 @@
+<svg t="1735025834391" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="11589" width="200" height="200">
+    <path
+        d="M942.08 738.304c-25.6-23.552-55.296-47.104-76.8-61.44-27.648-19.456-57.344-38.912-84.992-51.2-43.008-21.504-59.392-25.6-70.656-25.6-19.456 0-35.84 10.24-51.2 29.696-8.192 12.288-17.408 29.696-23.552 45.056-4.096 10.24-12.288 27.648-17.408 33.792-8.192-2.048-31.744-12.288-70.656-37.888-35.84-25.6-74.752-57.344-104.448-84.992-29.696-29.696-59.392-68.608-84.992-104.448-25.6-37.888-35.84-61.44-37.888-70.656 6.144-4.096 23.552-12.288 33.792-17.408 15.36-6.144 31.744-12.288 45.056-23.552 21.504-15.36 29.696-31.744 29.696-51.2 0-10.24-2.048-27.648-25.6-70.656-12.288-25.6-31.744-55.296-51.2-84.992-15.36-21.504-38.912-51.2-61.44-76.8-27.648-27.648-47.104-40.96-66.56-40.96-47.104 0-100.352 68.608-114.688 87.04-19.456 25.6-66.56 96.256-66.56 159.744 0 59.392 40.96 138.24 74.752 194.56 45.056 72.704 108.544 153.6 177.152 224.256l21.504 21.504 0 0c70.656 68.608 149.504 132.096 224.256 177.152 23.552 15.36 51.2 29.696 78.848 43.008l0 0c4.096 2.048 6.144 2.048 10.24 2.048 15.36 0 27.648-12.288 27.648-27.648 0-10.24-6.144-21.504-17.408-25.6-21.504-10.24-45.056-23.552-70.656-38.912-70.656-43.008-145.408-102.4-212.992-168.96l-21.504-21.504c-66.56-68.608-125.952-143.36-168.96-212.992-43.008-68.608-66.56-128-66.56-163.84 0-31.744 19.456-78.848 53.248-123.904 15.36-19.456 29.696-37.888 45.056-51.2 15.36-13.312 23.552-17.408 27.648-17.408 10.24 4.096 43.008 31.744 87.04 98.304 17.408 25.6 33.792 51.2 45.056 74.752 15.36 27.648 17.408 40.96 17.408 43.008 0 0-4.096 4.096-10.24 8.192-8.192 4.096-21.504 10.24-31.744 15.36-15.36 6.144-27.648 12.288-40.96 19.456-19.456 12.288-27.648 27.648-27.648 45.056 0 8.192 0 33.792 49.152 104.448 25.6 37.888 59.392 80.896 92.16 112.64l0 0c31.744 31.744 74.752 66.56 112.64 92.16 70.656 47.104 96.256 49.152 104.448 49.152l0 0c17.408 0 31.744-8.192 45.056-27.648 8.192-10.24 12.288-25.6 19.456-40.96 4.096-10.24 10.24-23.552 15.36-31.744 6.144-4.096 10.24-6.144 10.24-6.144 2.048 0 15.36 2.048 43.008 17.408 21.504 12.288 49.152 27.648 74.752 45.056 63.488 45.056 94.208 76.8 98.304 87.04-2.048 4.096-6.144 12.288-17.408 27.648-12.288 15.36-31.744 31.744-51.2 45.056-29.696 21.504-61.44 38.912-87.04 47.104l0 0c-10.24 4.096-17.408 15.36-17.408 25.6 0 15.36 12.288 27.648 27.648 27.648 2.048 0 4.096 0 6.144-2.048l0 0c2.048 0 2.048 0 4.096-2.048l0 0c45.056-15.36 82.944-40.96 102.4-55.296 21.504-15.36 87.04-70.656 87.04-115.712C982.016 785.408 969.728 765.952 942.08 738.304z"
+        fill="currentColor" p-id="11590"></path>
+</svg>
\ No newline at end of file
diff --git a/public/icons/tokens/copy.svg b/src/assets/images/tokens/copy.svg
similarity index 100%
rename from public/icons/tokens/copy.svg
rename to src/assets/images/tokens/copy.svg
diff --git a/src/assets/images/tokens/done.svg b/src/assets/images/tokens/done.svg
new file mode 100644
index 0000000..1832098
--- /dev/null
+++ b/src/assets/images/tokens/done.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="icon" viewBox="0 0 1024 1024">
+    <path
+        d="M846.933333 309.333333l-452.266666 452.266667a21.333333 21.333333 0 0 1-30.293334 0l-229.973333-229.973333a21.333333 21.333333 0 0 1 0-30.293334l29.866667-29.866666a21.333333 21.333333 0 0 1 30.293333 0l184.746667 184.746666 407.466666-407.466666a21.76 21.76 0 0 1 30.293334 0l29.866666 30.293333a21.333333 21.333333 0 0 1 0 30.293333z"
+        p-id="3408" fill="#2e8f79"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/tokens/key.svg b/src/assets/images/tokens/key.svg
new file mode 100644
index 0000000..653da00
--- /dev/null
+++ b/src/assets/images/tokens/key.svg
@@ -0,0 +1,6 @@
+<svg t="1734941615670" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="122466" width="200" height="200">
+    <path
+        d="M704 0c-176.736 0-320 143.264-320 320 0 20.032 1.856 39.616 5.376 58.624l-389.376 389.376 0 192c0 35.36 28.64 64 64 64l64 0 0-64 128 0 0-128 128 0 0-128 128 0 83.04-83.04c34.016 12.32 70.688 19.04 108.96 19.04 176.736 0 320-143.264 320-320s-143.264-320-320-320zM799.872 320.128c-53.024 0-96-42.976-96-96s42.976-96 96-96 96 42.976 96 96-42.976 96-96 96z"
+        fill="currentColor" p-id="122467"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/user/bio.svg b/src/assets/images/user/bio.svg
new file mode 100644
index 0000000..0d55286
--- /dev/null
+++ b/src/assets/images/user/bio.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688108590072"
+    class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20288"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
+    <path
+        d="M376.8 619.8h272.4c15 0 27.2 12.2 27.2 27.2s-12.2 27.2-27.2 27.2H376.8c-15 0-27.2-12.2-27.2-27.2s12.1-27.2 27.2-27.2z m0-272.5h109c15 0 27.2 12.2 27.2 27.2s-12.2 27.2-27.2 27.2h-109c-15 0-27.2-12.2-27.2-27.2-0.1-15 12.1-27.2 27.2-27.2z m0 136.2h272.4c15 0 27.2 12.2 27.2 27.2s-12.2 27.2-27.2 27.2H376.8c-15 0-27.2-12.2-27.2-27.2-0.1-15 12.1-27.2 27.2-27.2z m-109-326.9h365.1l179.8 163.5v490.4c0 30.1-24.4 54.5-54.5 54.5H267.8c-30.1 0-54.5-24.4-54.5-54.5V211.1c0-30.1 24.4-54.5 54.5-54.5z m490.8 218v-27.2l-109.4-97.1v124.3h109.4z m0 54.5h-137c-15 0-27.2-12.2-27.2-27.2 0-1.6 0.1-3.2 0.4-4.8v-186h-300c-15 0-27.2 12.2-27.2 27.2v544.9c0 15 12.2 27.2 27.2 27.2h436.6c15 0 27.2-12.2 27.2-27.2V429.1z"
+        p-id="20289" fill="#1C293A"></path>
+</svg>
\ No newline at end of file
diff --git a/public/icons/user/change-password.svg b/src/assets/images/user/change-password.svg
similarity index 100%
rename from public/icons/user/change-password.svg
rename to src/assets/images/user/change-password.svg
diff --git a/src/assets/images/user/created-at.svg b/src/assets/images/user/created-at.svg
new file mode 100644
index 0000000..0abe79a
--- /dev/null
+++ b/src/assets/images/user/created-at.svg
@@ -0,0 +1,6 @@
+<svg t="1734335138637" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="17714" width="200" height="200">
+    <path
+        d="M502.897778 75.093333C257.137778 75.093333 59.164444 273.066667 59.164444 518.826667s200.248889 443.733333 443.733334 443.733333c245.76 0 443.733333-197.973333 443.733333-443.733333S746.382222 75.093333 502.897778 75.093333z m288.995555 577.991111c-6.826667 13.653333-18.204444 20.48-31.857777 20.48-4.551111 0-9.102222 0-13.653334-2.275555l-261.688889-118.328889c-11.377778-4.551111-20.48-18.204444-20.48-31.857778V275.342222c0-18.204444 15.928889-34.133333 34.133334-34.133333s34.133333 15.928889 34.133333 34.133333V500.622222L773.688889 609.848889c18.204444 6.826667 25.031111 25.031111 18.204444 43.235555z"
+        fill="currentColor" p-id="17715"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/user/detail-role.svg b/src/assets/images/user/detail-role.svg
new file mode 100644
index 0000000..1984011
--- /dev/null
+++ b/src/assets/images/user/detail-role.svg
@@ -0,0 +1,6 @@
+<svg t="1734334612934" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="34545" width="200" height="200">
+    <path
+        d="M410.112 100.864a215.456 215.456 0 0 0-213.504 217.088v0.512a214.912 214.912 0 0 0 203.776 224.768c117.76 5.632 218.112-85.504 224.256-203.776a143.648 143.648 0 0 0 0-20.992 216.448 216.448 0 0 0-214.528-217.6z m138.752 429.056a250.784 250.784 0 0 1-138.24 41.984A244.576 244.576 0 0 1 273.92 529.92a324.896 324.896 0 0 0-181.76 291.328c0 97.28 326.656 123.904 511.488 82.432v-101.376l-44.544-44.544-18.432-17.408 18.432-17.408 44.544-44.544v-89.6h27.136a320.448 320.448 0 0 0-81.92-58.88z m331.264 261.632l51.712-52.224-51.712-52.736v-73.216h-74.24l-51.712-52.224-51.712 52.224h-74.24v73.216l-51.712 52.736 51.712 52.736v73.216h74.24l51.712 52.736 51.712-52.736h74.24v-73.728z"
+        p-id="34546" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/public/icons/user/detail.svg b/src/assets/images/user/detail.svg
similarity index 100%
rename from public/icons/user/detail.svg
rename to src/assets/images/user/detail.svg
diff --git a/src/assets/images/user/edit.svg b/src/assets/images/user/edit.svg
new file mode 100644
index 0000000..3041d96
--- /dev/null
+++ b/src/assets/images/user/edit.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688109865749"
+    class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23067"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
+    <path
+        d="M833.163636 788.169697H206.351515c-15.515152 0-27.927273 12.412121-27.927273 27.927273v31.030303c0 3.10303 3.10303 6.206061 6.206061 6.20606h670.254545c3.10303 0 6.206061-3.10303 6.206061-6.20606v-31.030303c0-15.515152-12.412121-27.927273-27.927273-27.927273z m-530.618181-71.369697h6.20606l142.739394-24.824242c3.10303 0 3.10303 0 3.10303-3.103031l363.054546-363.054545c3.10303-3.10303 3.10303-9.309091 0-12.412121l-142.739394-139.636364c0-3.10303-3.10303-3.10303-6.206061-3.10303s-3.10303 0-6.20606 3.10303L302.545455 533.721212l-3.103031 3.10303-24.824242 142.739394c-3.10303 15.515152 9.309091 31.030303 24.824242 34.133334 0 3.10303 3.10303 3.10303 3.103031 3.10303z"
+        p-id="23068" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/public/icons/user/email.svg b/src/assets/images/user/email.svg
similarity index 94%
rename from public/icons/user/email.svg
rename to src/assets/images/user/email.svg
index ea2b5a2..c53181f 100644
--- a/public/icons/user/email.svg
+++ b/src/assets/images/user/email.svg
@@ -2,5 +2,5 @@
     p-id="38521" width="200" height="200">
     <path
         d="M926.47619 355.644952V780.190476a73.142857 73.142857 0 0 1-73.142857 73.142857H170.666667a73.142857 73.142857 0 0 1-73.142857-73.142857V355.644952l304.103619 257.828572a170.666667 170.666667 0 0 0 220.745142 0L926.47619 355.644952zM853.333333 170.666667a74.044952 74.044952 0 0 1 26.087619 4.778666 72.704 72.704 0 0 1 30.622477 22.186667 73.508571 73.508571 0 0 1 10.678857 17.67619c3.169524 7.509333 5.12 15.652571 5.607619 24.210286L926.47619 243.809524v24.380952L559.469714 581.241905a73.142857 73.142857 0 0 1-91.306666 2.901333l-3.632762-2.925714L97.52381 268.190476v-24.380952a72.899048 72.899048 0 0 1 40.155428-65.292191A72.97219 72.97219 0 0 1 170.666667 170.666667h682.666666z"
-        p-id="38522" fill="#919EAB"></path>
+        p-id="38522" fill="currentColor"></path>
 </svg>
\ No newline at end of file
diff --git a/src/assets/images/user/guest.svg b/src/assets/images/user/guest.svg
new file mode 100644
index 0000000..db021eb
--- /dev/null
+++ b/src/assets/images/user/guest.svg
@@ -0,0 +1,10 @@
+<svg width="152.11875px" height="167.16875px" viewBox="0 0 152.11875 167.16875" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="currentColor" fill-rule="nonzero">
+            <path
+                d="M75.58125,0 C98.7224265,0 117.48125,18.7597659 117.48125,41.8970099 C117.48125,65.0402341 98.7224265,83.8 75.58125,83.8 C52.4400735,83.8 33.68125,65.0402341 33.68125,41.8970099 C33.68125,18.7537858 52.4459559,0 75.58125,0 L75.58125,0 Z M57.50625,94.18125 L94.6125,94.18125 C126.375,94.18125 152.11875,119.5 152.11875,150.74375 L152.11875,154.3875 C152.11875,166.7 126.36875,167.16875 94.6125,167.16875 L57.50625,167.16875 C25.74375,167.16875 0,167.15 0,154.3875 L0,150.74375 C0,119.5 25.74375,94.18125 57.50625,94.18125 L57.50625,94.18125 Z"
+                id="形状"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/user/id.svg b/src/assets/images/user/id.svg
new file mode 100644
index 0000000..e8777e7
--- /dev/null
+++ b/src/assets/images/user/id.svg
@@ -0,0 +1,6 @@
+<svg t="1732761620376" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="30696" width="200" height="200">
+    <path
+        d="M848.3 198.7c32.1 0 57.8 8.2 77 24.5 19.2 16.3 28.8 41.1 28.8 74.2v438.2c0 14.2-2.6 27.6-7.9 40.3-5.3 12.6-12.5 23.7-21.7 33.2-9.2 9.5-20 17-32.4 22.5-12.4 5.5-25.4 8.3-39.1 8.3H164.5c-13.7 0-26.6-2.6-38.7-7.9-12.1-5.3-22.6-12.2-31.6-20.9-8.9-8.7-16.1-18.8-21.3-30.4-5.2-11.7-7.9-24.1-7.9-37.2V295.8c0-28.4 8.7-51.7 26.1-69.9 17.4-18.2 41.8-27.2 73.4-27.2h683.8z m-561.4 146c-10 0-19.5 1.8-28.4 5.5-8.9 3.7-16.8 8.8-23.7 15.4-6.8 6.6-12.2 14.5-16.2 23.7s-5.9 19.1-5.9 29.6 2 20.3 5.9 29.2c3.9 8.9 9.3 16.8 16.2 23.7 6.8 6.8 14.7 12.2 23.7 16.2 8.9 3.9 18.4 5.9 28.4 5.9 11.1 0 21.2-2 30.4-5.9 9.2-4 17.1-9.3 23.7-16.2 6.6-6.8 11.8-14.7 15.8-23.7 3.9-8.9 5.9-18.7 5.9-29.2 0-21.6-7.1-39.3-21.3-53.3-14.2-13.9-32.4-20.9-54.5-20.9z m124 273.2c0-10-2-19.6-5.9-28.8-3.9-9.2-9.2-17.1-15.8-23.7-6.6-6.6-14.5-11.8-23.7-15.8-9.2-3.9-18.8-5.9-28.8-5.9H238c-20.5 0-37.9 7.2-52.1 21.7-14.2 14.5-21.3 32-21.3 52.5v74.3h246.3v-74.3z m366.3 78.2c10.5 0 18.3-2.6 23.3-7.9 5-5.3 7.5-11.6 7.5-18.9 0-7.4-2.9-13.8-8.7-19.3-5.8-5.5-13.9-8.3-24.5-8.3H539.5c-10.5 0-18.4 2.8-23.7 8.3-5.3 5.5-7.9 12-7.9 19.3 0 7.4 2.6 13.7 7.9 18.9 5.3 5.3 12.9 7.9 22.9 7.9h238.5z m0.8-101.9c10.5 0 18.2-2.6 22.9-7.9 4.7-5.3 7.1-11.6 7.1-18.9 0-7.9-2.2-14.5-6.7-19.7-4.5-5.3-12-7.9-22.5-7.9H537.2c-10.5 0-18.2 2.6-22.9 7.9-4.7 5.3-7.1 11.8-7.1 19.7 0 7.4 2.2 13.7 6.7 18.9 4.5 5.3 12 7.9 22.5 7.9H778z m0.8-100.2c7.9 0 14.7-2.6 20.5-7.9 5.8-5.3 8.7-11.6 8.7-18.9 0-7.4-2.9-13.3-8.7-17.8-5.8-4.5-12.6-6.7-20.5-6.7H618.5c-7.9 0-14.6 2.2-20.1 6.7-5.5 4.5-8.3 10.4-8.3 17.8s2.8 13.7 8.3 18.9c5.5 5.3 12.2 7.9 20.1 7.9h160.3z"
+        fill="currentColor" p-id="30697"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/user/location.svg b/src/assets/images/user/location.svg
new file mode 100644
index 0000000..5f51556
--- /dev/null
+++ b/src/assets/images/user/location.svg
@@ -0,0 +1,8 @@
+<svg t="1734334727577" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="42424" width="200" height="200">
+    <path
+        d="M364.032 125.312a293.973333 293.973333 0 0 1 300.117333 2.474667C755.626667 184.618667 811.178667 286.08 810.666667 395.093333c-2.133333 108.373333-61.738667 210.304-136.234667 289.066667a798.976 798.976 0 0 1-143.274667 120.32A50.090667 50.090667 0 0 1 513.706667 810.666667a34.986667 34.986667 0 0 1-16.64-5.077334 789.973333 789.973333 0 0 1-206.464-194.005333A395.946667 395.946667 0 0 1 213.333333 389.717333l0.213334-11.648c3.84-104.789333 60.586667-200.533333 150.485333-252.757333z m186.666667 174.848a100.096 100.096 0 0 0-110.677334 22.186667 104.746667 104.746667 0 0 0-22.144 112.64 101.461333 101.461333 0 0 0 93.781334 63.872 99.797333 99.797333 0 0 0 71.808-29.952c19.029333-19.328 29.696-45.653333 29.610666-73.045334a103.381333 103.381333 0 0 0-62.378666-95.701333z"
+        fill="currentColor" p-id="42425"></path>
+    <path d="M298.666667 896a213.333333 42.666667 0 1 0 426.666666 0 213.333333 42.666667 0 1 0-426.666666 0Z"
+        fill="currentColor" opacity=".4" p-id="42426"></path>
+</svg>
\ No newline at end of file
diff --git a/public/icons/user/name.svg b/src/assets/images/user/name.svg
similarity index 93%
rename from public/icons/user/name.svg
rename to src/assets/images/user/name.svg
index bafbb09..6541deb 100644
--- a/public/icons/user/name.svg
+++ b/src/assets/images/user/name.svg
@@ -2,5 +2,5 @@
     p-id="32166" width="200" height="200">
     <path
         d="M492.642454 544.492238c138.576752 0 250.922119-112.345367 250.922119-250.924119 0-138.576752-112.344367-250.922119-250.922119-250.922119-138.578752 0-250.924119 112.345367-250.924119 250.923119 0 138.577752 112.345367 250.923119 250.924119 250.923119m329.666273 152.226433C763.454107 634.645126 743.657571 613.336625 635.847097 607.485762H349.42681c-107.810473 5.851863-127.607009 27.159363-186.461629 89.231909-62.510535 64.169496-112.295368 145.404592-88.694922 246.144231 26.184386 65.876456 96.935728 81.138098 163.83616 81.138098h509.062069c66.899432 0 137.699773-15.261642 163.885159-81.138098 23.599447-100.739639-26.185386-181.974735-88.74492-246.144231"
-        fill="#919EAB" p-id="32167"></path>
+        fill="currentColor" p-id="32167"></path>
 </svg>
\ No newline at end of file
diff --git a/src/assets/images/user/phone.svg b/src/assets/images/user/phone.svg
new file mode 100644
index 0000000..d1579d5
--- /dev/null
+++ b/src/assets/images/user/phone.svg
@@ -0,0 +1,6 @@
+<svg t="1734334664950" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="40450" width="200" height="200">
+    <path
+        d="M398.652952 165.692952c-32.280381-46.006857-58.172952-61.318095-92.867047-54.808381-14.969905 2.80381-24.210286 7.850667-41.20381 22.528l-12.946285 11.361524-25.185524 20.894476-6.582857 5.753905c-3.705905 3.413333-6.38781 6.217143-9.825524 10.118095-64 72.46019-81.724952 185.782857-44.470857 292.327619 26.794667 76.55619 74.605714 152.624762 142.774857 228.644572 72.289524 80.62781 133.046857 131.364571 202.922666 168.374857 54.857143 29.013333 96.865524 41.74019 145.676191 43.227429 59.001905 1.828571 110.957714-11.50781 153.648762-39.15581a162.133333 162.133333 0 0 0 19.553524-15.189333l8.289523-7.558095 16.335239-15.213715 5.534476-4.924952 10.922666-9.435429c22.040381-19.651048 29.184-31.939048 30.646858-51.370666 2.194286-29.647238-11.215238-52.736-49.737143-85.699048l-26.063238-21.820952-12.117334-10.581334-11.459047-9.825524c-37.229714-30.744381-64.804571-40.69181-100.205715-35.35238-24.283429 3.632762-38.278095 12.141714-63.073523 38.107428l-10.947048 11.654095c-18.041905 19.017143-28.330667 26.258286-43.544381 29.305905-22.25981 4.461714-44.373333-7.046095-80.262095-36.205714-46.250667-37.546667-84.626286-80.676571-117.613715-131.949714-22.869333-35.766857-31.890286-62.902857-24.941714-87.600762 2.82819-9.99619 9.679238-17.042286 24.064-28.184381l14.994286-11.312762 2.413714-1.877334 22.747429-18.553904c20.114286-16.822857 28.281905-28.281905 32.572952-45.836191 8.899048-36.10819 0.487619-66.072381-32.426667-117.638095l-15.62819-24.234667-5.558857-8.533333-6.436572-9.435429z"
+        p-id="40451" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/user/role.svg b/src/assets/images/user/role.svg
new file mode 100644
index 0000000..b2984ad
--- /dev/null
+++ b/src/assets/images/user/role.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688988795450"
+    class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3796"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
+    <path
+        d="M928 400A240 240 0 0 0 567.68 192a224 224 0 1 0-366.4 256l-3.52 3.2-15.68 13.76-5.12 5.44-12.8 14.08-4.16 8.32-10.88 14.4-5.12 7.68-8.96 15.04-7.04 8.64-8.32 16.96-3.2 7.68c-2.24 5.44-4.16 10.56-6.72 18.24 0 2.56 0 5.12-2.56 7.68s-2.88 11.2-4.8 19.2l-1.92 7.68c0 6.08-1.92 12.16-3.2 21.12V896h312.64A96 96 0 0 0 480 928h352a96 96 0 0 0 96-96v-288a96 96 0 0 0-17.28-54.72A235.84 235.84 0 0 0 928 400z"
+        fill="#FFFFFF" p-id="3797"></path>
+    <path d="M688 400m-208 0a208 208 0 1 0 416 0 208 208 0 1 0-416 0Z" fill="#e6e6e6" p-id="3798"></path>
+    <path d="M384 416a256 256 0 0 1 256 256v192H128v-192a256 256 0 0 1 256-256z" fill="#c3ffeb" p-id="3799"></path>
+    <path d="M352 450.56v-32A256 256 0 0 0 128 672v192h224v-32H160v-160a224 224 0 0 1 192-221.44z" fill="currentColor"
+        p-id="3800"></path>
+    <path d="M384 320m-192 0a192 192 0 1 0 384 0 192 192 0 1 0-384 0Z" fill="#FFFFFF" p-id="3801"></path>
+    <path d="M384 160a160 160 0 1 1-160 160 160 160 0 0 1 160-160m0-32a192 192 0 1 0 192 192 192 192 0 0 0-192-192z"
+        fill="currentColor" p-id="3802"></path>
+    <path d="M416 480m64 0l352 0q64 0 64 64l0 288q0 64-64 64l-352 0q-64 0-64-64l0-288q0-64 64-64Z" fill="#FFFFFF"
+        p-id="3803"></path>
+    <path d="M480 480h352a64 64 0 0 1 64 64v64H416v-64a64 64 0 0 1 64-64z" fill="#c3ffeb" p-id="3804"></path>
+    <path
+        d="M832 512a32 32 0 0 1 32 32v288a32 32 0 0 1-32 32H480a32 32 0 0 1-32-32v-288a32 32 0 0 1 32-32h352m0-32H480a64 64 0 0 0-64 64v288a64 64 0 0 0 64 64h352a64 64 0 0 0 64-64v-288a64 64 0 0 0-64-64z"
+        fill="currentColor" p-id="3805"></path>
+    <path d="M832 576H480v32h352v-32zM576 672h-96v32h96v-32zM832 768h-96v32h96v-32zM832 672h-224v32h224v-32z"
+        fill="currentColor" p-id="3806"></path>
+    <path d="M608 672v32h-32v-32h32m32-32h-96v96h96v-96zM704 768h-224v32h224v-32z" fill="currentColor" p-id="3807">
+    </path>
+    <path d="M736 768v32h-32v-32h32m32-32h-96v96h96v-96z" fill="currentColor" p-id="3808"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/user/root.svg b/src/assets/images/user/root.svg
new file mode 100644
index 0000000..b018c9a
--- /dev/null
+++ b/src/assets/images/user/root.svg
@@ -0,0 +1,10 @@
+<svg t="1741597128844" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="105187" width="200" height="200">
+    <path
+        d="M597.2736 983.808a51.8656 51.8656 0 0 1-3.4816-68.5056l0.1536-0.2048-0.3584-0.1024a50.8416 50.8416 0 0 1-44.8512-50.8928v-58.7776c0-26.2144 19.3536-48.1792 44.9536-50.8928h0.1024a51.968 51.968 0 0 1 3.2768-68.3008l40.0384-41.3184a49.664 49.664 0 0 1 67.584-3.584h0.0512a50.176 50.176 0 0 1 46.08-45.0048 353.536 353.536 0 0 0-144.1792-30.8224H399.6928C207.2832 565.4016 50.816 717.8752 50.816 905.6256v20.2752C50.816 1024 204.7744 1024 399.6928 1024H636.6976l-39.424-40.192zM492.8256 539.392c152.3712 0 276.2752-120.9856 276.2752-269.7216S645.1968 0 492.8256 0 216.5504 120.9856 216.5504 269.7216s123.9552 269.6704 276.2752 269.6704z"
+        fill="currentColor" p-id="105188"></path>
+    <path
+        d="M734.592 829.9008c0-15.4112 5.12-28.2112 15.5136-38.8096a51.2 51.2 0 0 1 38.0928-15.8208c15.1552 0 27.6992 5.2224 38.144 15.8208s15.5648 23.3984 15.5648 38.8096c0 15.5136-5.12 28.5184-15.5648 39.1168a51.5584 51.5584 0 0 1-38.144 15.8208 51.0976 51.0976 0 0 1-38.0928-15.8208 54.2208 54.2208 0 0 1-15.5136-39.1168m-75.776 35.584c3.1232 11.52 7.8336 22.6816 13.568 33.024l-35.3792 44.288 40.0896 40.8064 43.3664-35.9936c10.24 5.7856 21.4528 10.5984 32.6656 13.9776l5.8368 56.4224h57.8048l5.8368-56.4224c11.264-3.3792 21.8624-8.192 32.6656-13.9776l43.2128 35.9936 40.448-40.8064-35.5328-44.1856c5.4784-10.3936 10.3936-21.6064 13.7728-33.024L972.416 859.392v-58.88l-55.3472-5.9904a186.9312 186.9312 0 0 0-13.7728-32.9216l35.5328-44.288-40.448-41.216-43.2128 36.1984a209.664 209.664 0 0 0-32.6656-13.9776l-5.8368-56.4224H758.912l-5.8368 56.4224a164.352 164.352 0 0 0-32.6656 13.9776l-43.3664-36.1984-40.0896 41.216 35.3792 44.288c-5.4784 10.9056-10.24 21.504-13.568 32.9216l-55.6032 5.9904v58.88l55.6544 6.0928"
+        fill="currentColor" p-id="105189" data-spm-anchor-id="a313x.search_index.0.i88.25483a81VWNBfr" class="selected">
+    </path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/user/updated-at.svg b/src/assets/images/user/updated-at.svg
new file mode 100644
index 0000000..49edaf4
--- /dev/null
+++ b/src/assets/images/user/updated-at.svg
@@ -0,0 +1,9 @@
+<svg t="1734335047461" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="15135" width="200" height="200">
+    <path
+        d="M857.6 0c-19.2 0-38.4 19.2-38.4 38.4v102.4c-192-166.4-486.4-147.2-659.2 38.4-185.6 198.4-172.8 505.6 25.6 684.8 198.4 185.6 505.6 172.8 684.8-25.6 12.8-12.8 12.8-32 0-44.8-12.8-12.8-32-12.8-44.8 0-160 172.8-422.4 179.2-595.2 19.2C57.6 652.8 51.2 390.4 211.2 217.6 352 64 601.6 44.8 774.4 185.6h-96c-19.2 0-38.4 19.2-38.4 38.4 0 12.8 19.2 32 38.4 32h166.4c25.6 0 51.2-25.6 51.2-57.6V38.4c0-19.2-19.2-38.4-38.4-38.4z"
+        p-id="15136" fill="currentColor"></path>
+    <path
+        d="M614.4 185.6c-32-12.8-64-19.2-102.4-19.2C320 166.4 166.4 320 166.4 512S320 857.6 512 857.6c192 0 345.6-153.6 345.6-345.6 0-89.6-32-172.8-89.6-230.4h-108.8c-25.6 0-51.2-25.6-51.2-57.6 0-19.2 6.4-32 6.4-38.4zM492.8 294.4c25.6 0 51.2 19.2 51.2 44.8v160c0 6.4 0 12.8 6.4 12.8l96 57.6c25.6 6.4 38.4 38.4 25.6 57.6-12.8 25.6-38.4 32-64 25.6L460.8 576c-12.8-6.4-19.2-12.8-19.2-25.6V339.2c0-25.6 25.6-44.8 51.2-44.8z"
+        p-id="15137" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/public/icons/user/user-edit.svg b/src/assets/images/user/user-edit.svg
similarity index 100%
rename from public/icons/user/user-edit.svg
rename to src/assets/images/user/user-edit.svg
diff --git a/src/components/404/index.module.css b/src/components/404/index.module.css
index f353ce2..5d2af60 100644
--- a/src/components/404/index.module.css
+++ b/src/components/404/index.module.css
@@ -1,7 +1,7 @@
 .container {
   height: 100vh;
   overflow: hidden;
-  background: url(../../../public/images/404/background-image.png);
+  background: url(../../assets/images/404/background-image.png);
 }
 
 .content {
@@ -18,3 +18,13 @@
   display: flex;
   align-items: center;
 }
+
+.logoIcon {
+  width: 1.8rem;
+  height: 1.8rem;
+  margin-right: 0.4rem;
+}
+
+.notFound {
+  width: 38rem;
+}
diff --git a/src/components/404/index.tsx b/src/components/404/index.tsx
index 1c5822a..46a0e52 100644
--- a/src/components/404/index.tsx
+++ b/src/components/404/index.tsx
@@ -1,6 +1,8 @@
-import { Box, Typography, Grid, CssBaseline, Button } from '@mui/material';
+import { Box, Typography, Grid, Button } from '@mui/material';
 import styles from './index.module.css';
 import { useNavigate } from 'react-router-dom';
+import { ReactComponent as Logo } from '../../assets/images/404/logo.svg';
+import { ReactComponent as NotFoundImg } from '../../assets/images/404/404.svg';
 
 export default function NotFound() {
   const navigate = useNavigate();
@@ -8,18 +10,17 @@ export default function NotFound() {
   return (
     <Grid className={styles.container}>
       <Box className={styles.logoContainer}>
-        <Box component="img" sx={{ width: '1.8rem', height: '1.8rem', mr: '0.4rem' }} src="/images/404/logo.svg" />
-        <Typography variant="h6" sx={{ fontFamily: 'mabry-bold' }}>
+        <Logo className={styles.logoIcon} />
+        <Typography variant="h6" fontFamily="mabry-bold" color="#1c293a">
           Dragonfly
         </Typography>
       </Box>
-      <CssBaseline />
       <Box className={styles.content}>
-        <Box component="img" src="/images/404/404.svg" sx={{ width: '38rem' }} />
-        <Typography variant="h4" gutterBottom mt="2rem">
+        <NotFoundImg className={styles.notFound} />
+        <Typography variant="h4" gutterBottom mt="2rem" color="#1c293a">
           Something gone wrong!
         </Typography>
-        <Typography variant="body1" fontFamily="mabry-light" mb="2rem">
+        <Typography variant="body1" fontFamily="mabry-light" mb="2rem" color="#1c293a">
           The page you were looking for doesn't exist.
         </Typography>
         <Button
@@ -28,10 +29,9 @@ export default function NotFound() {
           size="large"
           sx={{
             width: '12rem',
-            '&.MuiButton-root': {
-              backgroundColor: 'var(--button-color)',
-              color: '#fff',
-            },
+            background: '#1c293a',
+            color: 'var(--palette-button-text-color)',
+            ':hover': { backgroundColor: '#1c293a' },
           }}
           onClick={() => {
             navigate(`/clusters`);
diff --git a/src/components/card.tsx b/src/components/card.tsx
index b1182ec..36399f9 100644
--- a/src/components/card.tsx
+++ b/src/components/card.tsx
@@ -12,10 +12,13 @@ const Card: React.FC<CardProps> = ({ children, className, id }) => {
     <Paper
       sx={{
         backgroundColor: 'var(--palette-background-paper)',
-        boxShadow: 'rgba(145, 158, 171, 0.3) 0px 0px 2px 0px, rgba(145, 158, 171, 0.2) 0px 2px 24px -4px',
-        borderRadius: '0.8rem',
+        boxShadow: 'var(--palette-card-box-shadow)',
+        borderRadius: '0.6rem',
         transition: 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1)',
         zIndex: 0,
+        color: 'var(--palette-color)',
+        backgroundImage: 'none',
+        overflow: 'hidden',
       }}
       id={id}
       className={className}
diff --git a/src/components/circular-progress.tsx b/src/components/circular-progress.tsx
index 772b3cc..f9fa4bf 100644
--- a/src/components/circular-progress.tsx
+++ b/src/components/circular-progress.tsx
@@ -10,11 +10,8 @@ const SearchCircularProgress: React.FC<CardProps> = (props: CircularProgressProp
     <Box sx={{ position: 'relative', display: 'flex' }} className={className}>
       <CircularProgress
         variant="determinate"
-        sx={(theme) => ({
+        sx={() => ({
           color: '#DAF9F2',
-          ...theme.applyStyles('dark', {
-            color: 'var(--description-color)',
-          }),
         })}
         size={20}
         thickness={4}
@@ -25,16 +22,13 @@ const SearchCircularProgress: React.FC<CardProps> = (props: CircularProgressProp
         variant="indeterminate"
         disableShrink
         sx={(theme) => ({
-          color: 'var(--description-color)',
+          color: 'var(--palette-description-color)',
           animationDuration: '550ms',
           position: 'absolute',
           left: 0,
           [`& .${circularProgressClasses.circle}`]: {
             strokeLinecap: 'round',
           },
-          ...theme.applyStyles('dark', {
-            color: '#308fe8',
-          }),
         })}
         size={20}
         thickness={4}
diff --git a/src/components/clusters/edit.module.css b/src/components/clusters/edit.module.css
index 451d21b..629ca13 100644
--- a/src/components/clusters/edit.module.css
+++ b/src/components/clusters/edit.module.css
@@ -62,8 +62,16 @@
 .descriptionIcon {
   width: 0.8rem !important ;
   height: 0.8rem !important;
+  color: var(--palette-grey-300Channel);
 }
 
 .descriptionIcon:hover {
-  color: var(--description-color);
+  color: var(--palette-description-color);
+}
+
+.informationIcon {
+  width: 2.6rem;
+  height: 2.6rem;
+  margin-right: 1rem;
+  color: var(--palette-button-color);
 }
diff --git a/src/components/clusters/edit.tsx b/src/components/clusters/edit.tsx
index a084511..652b98f 100644
--- a/src/components/clusters/edit.tsx
+++ b/src/components/clusters/edit.tsx
@@ -12,15 +12,18 @@ import {
   Tooltip,
   Typography,
   Skeleton,
+  Breadcrumbs,
+  Link as RouterLink,
 } from '@mui/material';
 import styles from './edit.module.css';
 import HelpIcon from '@mui/icons-material/Help';
 import { useEffect, useState } from 'react';
 import { getCluster, updateCluster, getClusterResponse } from '../../lib/api';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import { useNavigate, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import { CancelLoadingButton, SavelLoadingButton } from '../loading-button';
 import Card from '../card';
+import { ReactComponent as Information } from '../../assets/images/cluster/information-cluster.svg';
 
 export default function EditCluster() {
   const [successMessage, setSuccessMessage] = useState(false);
@@ -155,7 +158,7 @@ export default function EditCluster() {
               }
               placement="top"
             >
-              <HelpIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </Tooltip>
           ),
         },
@@ -205,12 +208,12 @@ export default function EditCluster() {
             placement="top"
           >
             <HelpIcon
-              color="disabled"
               sx={{
+                color: 'var(--palette-grey-300Channel)',
                 width: '0.8rem',
                 height: '0.8rem',
                 mr: '0.3rem',
-                ':hover': { color: 'var(--description-color)' },
+                ':hover': { color: 'var(--palette-description-color)' },
               }}
             />
           </Tooltip>
@@ -268,12 +271,12 @@ export default function EditCluster() {
             placement="top"
           >
             <HelpIcon
-              color="disabled"
               sx={{
+                color: 'var(--palette-grey-300Channel)',
                 width: '0.8rem',
                 height: '0.8rem',
                 mr: '0.3rem',
-                ':hover': { color: 'var(--description-color)' },
+                ':hover': { color: 'var(--palette-description-color)' },
               }}
             />
           </Tooltip>
@@ -332,12 +335,12 @@ export default function EditCluster() {
             placement="top"
           >
             <HelpIcon
-              color="disabled"
               sx={{
+                color: 'var(--palette-grey-300Channel)',
                 width: '0.8rem',
                 height: '0.8rem',
                 mr: '0.3rem',
-                ':hover': { color: 'var(--description-color)' },
+                ':hover': { color: 'var(--palette-description-color)' },
               }}
             />
           </Tooltip>
@@ -385,7 +388,7 @@ export default function EditCluster() {
               title={`If other peers download from the seed peer, the load of the seed peer will increase. When the load limit of the seed peer is reached, the scheduler will no longer schedule other peers to download from the seed peer until the it has the free load.`}
               placement="top"
             >
-              <HelpIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </Tooltip>
           ),
         },
@@ -426,7 +429,7 @@ export default function EditCluster() {
               }
               placement="top"
             >
-              <HelpIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </Tooltip>
           ),
         },
@@ -467,7 +470,7 @@ export default function EditCluster() {
               title={`The maximum number of parents that the scheduler can schedule for download peer.`}
               placement="top"
             >
-              <HelpIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </Tooltip>
           ),
         },
@@ -509,7 +512,7 @@ export default function EditCluster() {
               title={`The scheduler will randomly select the  number of parents from all the parents according to the filter parent limit and evaluate the optimal parents in selecting parents for the peer to download task. The number of optimal parent is the scheduling parent limit.`}
               placement="top"
             >
-              <HelpIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </Tooltip>
           ),
         },
@@ -550,7 +553,7 @@ export default function EditCluster() {
               title={`The rate limit(requests per second) for job Open API, default value is 10.`}
               placement="top"
             >
-              <HelpIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </Tooltip>
           ),
         },
@@ -702,13 +705,26 @@ export default function EditCluster() {
         </Alert>
       </Snackbar>
       <Typography variant="h5">Update Cluster</Typography>
+      <Breadcrumbs
+        separator={
+          <Box
+            sx={{ width: '0.3rem', height: '0.3rem', backgroundColor: '#919EAB', borderRadius: '50%', m: '0 0.4rem' }}
+          />
+        }
+        aria-label="breadcrumb"
+        sx={{ mb: '2rem', mt: '1rem' }}
+      >
+        <RouterLink component={Link} underline="hover" color="text.primary" to={`/clusters`}>
+          Cluster
+        </RouterLink>
+        <RouterLink component={Link} underline="hover" color="text.primary" to={`/clusters/${params.id}`}>
+          {cluster?.name}
+        </RouterLink>
+        <Typography color="inherit">Edit cluster</Typography>
+      </Breadcrumbs>
       <Divider sx={{ mt: '1rem', mb: '1rem' }} />
       <Card className={styles.header}>
-        <Box
-          component="img"
-          src="/icons/cluster/information-cluster.svg"
-          sx={{ width: '2.6rem', height: '2.6rem', mr: '1rem' }}
-        />
+        <Information className={styles.informationIcon} />
         <Box>
           <Box sx={{ display: 'flex', alignItems: 'center' }}>
             <Typography component="span" variant="body1" fontFamily="mabry-bold">
@@ -743,7 +759,7 @@ export default function EditCluster() {
               Information
             </Typography>
             <Tooltip title="The information of cluster." placement="top">
-              <HelpIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </Tooltip>
           </Box>
           <Box className={styles.defaultContainer}>
@@ -754,7 +770,7 @@ export default function EditCluster() {
                   onChange={(event: { target: { checked: any } }) => {
                     setCluster({ ...cluster, is_default: event.target.checked });
                   }}
-                  sx={{ '&.MuiCheckbox-root': { color: 'var(--button-color)' } }}
+                  sx={{ '&.MuiCheckbox-root': { color: 'var(--palette-button-color)' } }}
                 />
               }
               label="Set cluster as your default cluster"
@@ -765,7 +781,7 @@ export default function EditCluster() {
               title="When peer does not find a matching cluster based on scopes, the default cluster will be used."
               placement="top"
             >
-              <HelpIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </Tooltip>
           </Box>
           {informationForm.map((item) => (
@@ -786,7 +802,7 @@ export default function EditCluster() {
             the scope."
               placement="top"
             >
-              <HelpIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </Tooltip>
           </Box>
           <Grid className={styles.scopesContainer}>
@@ -825,7 +841,7 @@ export default function EditCluster() {
               Config
             </Typography>
             <Tooltip title=" The configuration for P2P downloads." placement="top">
-              <HelpIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </Tooltip>
           </Box>
           <Grid className={styles.configContainer}>
@@ -848,7 +864,7 @@ export default function EditCluster() {
             loading={loadingButton}
             onClick={() => {
               setLoadingButton(true);
-              navigate(`/clusters/${id}`);
+              navigate(`/clusters/${params.id}`);
             }}
           />
           <SavelLoadingButton loading={loadingButton} endIcon={<CheckCircleIcon />} id="save" text="Save" />
diff --git a/src/components/clusters/index.module.css b/src/components/clusters/index.module.css
index f9d5a25..2916bc0 100644
--- a/src/components/clusters/index.module.css
+++ b/src/components/clusters/index.module.css
@@ -12,49 +12,47 @@
 .clusterSmallCircleIcon {
   width: 0.4rem;
   height: 0.4rem;
+  color: var(--palette-grey-400Channel);
 }
 
 .button {
-  background-color: var(--button-color);
+  background-color: var(--palette-button-color);
   border-radius: 0;
 }
 
 .clusterBigCircleIcon {
-  width: 2rem;
-  height: 2rem;
+  width: 1.8rem;
+  height: 1.8rem;
+  color: var(--palette-grey-400Channel);
 }
 
 .clusterIcon {
-  width: 1.8rem;
-  height: 1.8rem;
+  width: 1.6rem;
+  height: 1.6rem;
   position: absolute;
   left: 0.8rem;
   top: 0.3rem;
+  color: var(--palette-grey-200Channel);
 }
 
 .clusterHeaderContainer {
-  display: flex;
-  margin-top: 2rem;
+  display: grid;
+  gap: calc(1.5rem);
+  grid-template-columns: repeat(3, 1fr);
+  margin-top: 1.5rem;
 }
 
 .clusterContainer {
-  width: 33.3333%;
-  margin-right: 1.6rem;
+  padding: 1rem;
 }
 
 .clusterIconTitle {
-  margin-left: 1rem !important;
-  margin-top: 0.2rem !important;
+  margin-left: 0.7rem !important;
   font-family: 'mabry-bold' !important;
 }
 
-.seedPeerContainer {
-  width: 33%;
-}
-
 .seedPseerIconTitle {
-  margin-left: 1rem !important;
-  margin-top: 0.2rem !important;
+  margin-left: 0.7rem !important;
   font-family: 'mabry-bold' !important;
 }
 
@@ -62,19 +60,25 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
-  margin-top: 0.6rem;
+  margin-top: 0.8rem;
+  margin-left: 0.6rem;
 }
 
 .clusterBottomContainer {
   display: flex;
   align-items: center;
   padding-top: 0.4rem;
-  margin-left: -0.3rem;
+  margin-left: -0.2rem;
 }
 
 .clusterBottomIcon {
-  width: 1.2rem;
-  height: 1.2rem;
+  width: 1.1rem;
+  height: 1.1rem;
+  color: var(--palette-description-color);
+}
+
+.statistics {
+  color: var(--palette-description-color);
 }
 
 .clusterBottomContentContainer {
@@ -83,13 +87,13 @@
 }
 
 .clusterBottomContent {
-  margin-left: 0.8rem;
+  padding-left: 0.7rem;
+  font-family: 'mabry-bold' !important;
 }
 
 .clusterBottomContentMsg {
-  font-size: 1rem;
-  margin-left: 0.4rem;
-  color: var(--table-title-text-color);
+  padding-left: 0.4rem;
+  color: var(--palette-table-title-text-color);
 }
 
 .searchContainer {
@@ -101,21 +105,18 @@
   width: 23rem;
 }
 
-/* .clusterListContent {
-  padding: 1.6rem;
-} */
-
 .nameText {
   font-family: 'mabry-bold' !important;
 }
 
 .idText {
-  color: var(--table-title-text-color);
+  color: var(--palette-table-title-text-color);
+  padding-left: 0.4rem;
 }
 
 .idIcon {
-  width: 1.8rem;
-  padding-right: 0.5rem;
+  width: 1.4rem;
+  height: 1.4rem;
 }
 
 .descriptionText {
@@ -131,6 +132,12 @@
   margin-top: 1rem;
 }
 
+.arrowCircleRightIcon {
+  width: 1.9rem;
+  height: 1.9rem;
+  color: var(--palette-button-color);
+}
+
 .buttonContent {
   padding: 0;
 }
@@ -206,8 +213,8 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  background-color: rgba(var(--no-data-color) / 0.04) !important;
-  border: dashed 1px rgba(var(--no-data-color) / 0.08);
+  background-color: rgba(var(--palette-no-data-color) / 0.04) !important;
+  border: dashed 1px rgba(var(--palette-no-data-color) / 0.08);
 }
 
 .nodataIcon {
diff --git a/src/components/clusters/index.tsx b/src/components/clusters/index.tsx
index 6c1e8d2..aee6c88 100644
--- a/src/components/clusters/index.tsx
+++ b/src/components/clusters/index.tsx
@@ -1,7 +1,6 @@
 import {
   Alert,
   Box,
-  Breadcrumbs,
   Button,
   Chip,
   Grid,
@@ -17,8 +16,6 @@ import {
   TextField,
   Divider,
 } from '@mui/material';
-import SearchIcon from '@mui/icons-material/Search';
-import AddIcon from '@mui/icons-material/Add';
 import {
   getSchedulers,
   getSeedPeers,
@@ -27,46 +24,33 @@ import {
   getSchedulersResponse,
   getSeedPeersResponse,
 } from '../../lib/api';
+import SearchIcon from '@mui/icons-material/Search';
+import AddIcon from '@mui/icons-material/Add';
 import styles from './index.module.css';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { fuzzySearch, getDatetime, getPaginatedList, useQuery } from '../../lib/utils';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
 import MoreTimeIcon from '@mui/icons-material/MoreTime';
-import ArrowCircleRightIcon from '@mui/icons-material/ArrowCircleRight';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { MAX_PAGE_SIZE } from '../../lib/constants';
 import Card from '../card';
 import debounce from 'lodash/debounce';
 import SearchCircularProgress from '../circular-progress';
-
-const theme = createTheme({
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 600,
-      md: 900,
-      lg: 1135,
-      xl: 1441,
-    },
-  },
-  palette: {
-    secondary: {
-      main: '#2E8F79',
-    },
-    primary: {
-      main: '#1C293A',
-    },
-  },
-  typography: {
-    fontFamily: 'mabry-light,sans-serif',
-  },
-});
+import { ReactComponent as Round } from '../../assets/images/cluster/round.svg';
+import { ReactComponent as Default } from '../../assets/images/cluster/default.svg';
+import { ReactComponent as Statistics } from '../../assets/images/cluster/peer/statistics.svg';
+import { ReactComponent as Active } from '../../assets/images/cluster/active.svg';
+import { ReactComponent as ClusterID } from '../../assets/images/cluster/id.svg';
+import { ReactComponent as IcContent } from '../../assets/images/cluster/scheduler/ic-content.svg';
+import { ReactComponent as NoCluster } from '../../assets/images/cluster/no-cluster.svg';
+import { ReactComponent as ArrowCircleRightIcon } from '../../assets/images/cluster/arrow-circle-right.svg';
+import { ReactComponent as Cluster } from '../../assets/images/cluster/cluster.svg';
+import { ReactComponent as Scheduler } from '../../assets/images/cluster/scheduler.svg';
+import { ReactComponent as SeedPeer } from '../../assets/images/cluster/seed-peer.svg';
 
 export default function Clusters() {
   const [errorMessage, setErrorMessage] = useState(false);
   const [errorMessageText, setErrorMessageText] = useState('');
   const [isLoading, setIsLoading] = useState(true);
-  const [clusterIsLoading, setClusterIsLoading] = useState(true);
   const [clusterPage, setClusterPage] = useState(1);
   const [totalPages, setTotalPages] = useState<number>(1);
   const [pageSize, setPageSize] = useState<number>(9);
@@ -87,7 +71,6 @@ export default function Clusters() {
     (async function () {
       try {
         setIsLoading(true);
-        setClusterIsLoading(true);
         setClusterPage(page);
 
         const [cluster, scheduler, seedPeer] = await Promise.all([
@@ -101,7 +84,6 @@ export default function Clusters() {
         setSeedPeer(seedPeer);
         setClusterCount(cluster);
         setIsLoading(false);
-        setClusterIsLoading(false);
       } catch (error) {
         if (error instanceof Error) {
           setErrorMessage(true);
@@ -209,7 +191,7 @@ export default function Clusters() {
   };
 
   return (
-    <ThemeProvider theme={theme}>
+    <Box>
       <Snackbar
         open={errorMessage}
         autoHideDuration={30000}
@@ -221,22 +203,15 @@ export default function Clusters() {
         </Alert>
       </Snackbar>
       <Box className={styles.clusterTitle}>
-        <Breadcrumbs
-          separator={
-            <Box
-              sx={{ width: '0.3rem', height: '0.3rem', backgroundColor: '#919EAB', borderRadius: '50%', m: '0 0.4rem' }}
-            />
-          }
-          aria-label="breadcrumb"
-        >
-          <Typography variant="h5" color="text.primary">
-            Cluster
-          </Typography>
-        </Breadcrumbs>
+        <Typography variant="h5">Cluster</Typography>
         <Button
           id="create-cluster"
           size="small"
-          sx={{ background: 'var(--button-color)' }}
+          sx={{
+            background: 'var(--palette-button-color)',
+            color: 'var(--palette-button-text-color)',
+            ':hover': { backgroundColor: 'var(--palette-hover-button-text-color)' },
+          }}
           variant="contained"
           onClick={() => {
             navigate(`/clusters/new`);
@@ -247,130 +222,120 @@ export default function Clusters() {
         </Button>
       </Box>
       <Grid className={styles.clusterHeaderContainer}>
-        <Box className={styles.clusterContainer}>
-          <Card>
-            <Box p="1.2rem">
-              <Box display="flex">
-                <Box className={styles.clusterIconContainer}>
-                  <Box component="img" className={styles.clusterSmallCircleIcon} src="/icons/cluster/round.svg" />
-                  <Box component="img" className={styles.clusterBigCircleIcon} src="/icons/cluster/round.svg" />
-                  <Box component="img" className={styles.clusterIcon} src="/icons/cluster/cluster.svg" />
-                </Box>
-                <Typography variant="h6" className={styles.clusterIconTitle}>
-                  Cluster
-                </Typography>
-              </Box>
-              <Box className={styles.clusterContentContainer}>
-                <Box marginLeft="0.6rem">
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                    <Typography id="total-clusters" variant="h5" sx={{ mr: '0.8rem' }}>
-                      {isLoading ? (
-                        <Skeleton data-testid="isloading" sx={{ width: '1rem' }} />
-                      ) : (
-                        clusterCount?.length || 0
-                      )}
-                    </Typography>
-                    <Typography variant="subtitle2">number of clusters</Typography>
-                  </Box>
-                  <Grid className={styles.clusterBottomContainer}>
-                    <Box component="img" className={styles.clusterBottomIcon} src="/icons/cluster/default.svg" />
-                    <Box className={styles.clusterBottomContentContainer}>
-                      <span id="default-clusters" className={styles.clusterBottomContent}>
-                        {isLoading ? (
-                          <Skeleton data-testid="isloading" sx={{ width: '1rem' }} />
-                        ) : (
-                          numberOfDefaultClusters || 0
-                        )}
-                      </span>
-                      <span className={styles.clusterBottomContentMsg}>default</span>
-                    </Box>
-                  </Grid>
-                </Box>
-                <Box component="img" src="/icons/cluster/peer/statistics.svg" />
-              </Box>
+        <Card className={styles.clusterContainer}>
+          <Box display="flex" alignItems="flex-end">
+            <Box className={styles.clusterIconContainer}>
+              <Round className={styles.clusterSmallCircleIcon} />
+              <Round className={styles.clusterBigCircleIcon} />
+              <Cluster className={styles.clusterIcon} />
             </Box>
-          </Card>
-        </Box>
-        <Box className={styles.clusterContainer}>
-          <Card>
-            <Box p="1.2rem">
-              <Box display="flex">
-                <Box className={styles.clusterIconContainer}>
-                  <Box component="img" className={styles.clusterSmallCircleIcon} src="/icons/cluster/round.svg" />
-                  <Box component="img" className={styles.clusterBigCircleIcon} src="/icons/cluster/round.svg" />
-                  <Box component="img" className={styles.clusterIcon} src="/icons/cluster/scheduler.svg" />
-                </Box>
-                <Typography variant="h6" className={styles.clusterIconTitle}>
-                  Scheduler
+            <Typography variant="body1" className={styles.clusterIconTitle}>
+              Cluster
+            </Typography>
+          </Box>
+          <Box className={styles.clusterContentContainer}>
+            <Box>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                <Typography id="total-clusters" variant="h5" sx={{ mr: '0.6rem' }}>
+                  {isLoading ? <Skeleton data-testid="isloading" sx={{ width: '1rem' }} /> : clusterCount?.length || 0}
                 </Typography>
+                <Typography variant="body2">number of clusters</Typography>
               </Box>
-              <Box className={styles.clusterContentContainer}>
-                <Box sx={{ ml: '0.6rem' }}>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                    <Typography id="total-schedulers" variant="h5" sx={{ mr: '0.8rem' }}>
-                      {isLoading ? <Skeleton data-testid="isloading" sx={{ width: '1rem' }} /> : scheduler?.length || 0}
-                    </Typography>
-                    <Typography variant="subtitle2">number of schedulers</Typography>
-                  </Box>
-                  <Grid className={styles.clusterBottomContainer}>
-                    <Box component="img" className={styles.clusterBottomIcon} src="/icons/cluster/active.svg" />
-                    <Box className={styles.clusterBottomContentContainer}>
-                      <span id="active-schedulers" className={styles.clusterBottomContent}>
-                        {isLoading ? (
-                          <Skeleton data-testid="isloading" sx={{ width: '1rem' }} />
-                        ) : (
-                          numberOfActiveSchedulers || 0
-                        )}
-                      </span>
-                      <span className={styles.clusterBottomContentMsg}>active</span>
-                    </Box>
-                  </Grid>
+              <Grid className={styles.clusterBottomContainer}>
+                <Default className={styles.clusterBottomIcon} />
+                <Box className={styles.clusterBottomContentContainer}>
+                  <Typography variant="body2" id="default-clusters" className={styles.clusterBottomContent}>
+                    {isLoading ? (
+                      <Skeleton data-testid="isloading" sx={{ width: '1rem' }} />
+                    ) : (
+                      numberOfDefaultClusters || 0
+                    )}
+                  </Typography>
+                  <Typography className={styles.clusterBottomContentMsg} variant="body2" display="block">
+                    default
+                  </Typography>
                 </Box>
-                <Box component="img" src="/icons/cluster/peer/statistics.svg" />
-              </Box>
+              </Grid>
             </Box>
-          </Card>
-        </Box>
-        <Box className={styles.seedPeerContainer}>
-          <Card>
-            <Box p="1.2rem">
-              <Box display="flex">
-                <Box className={styles.clusterIconContainer}>
-                  <Box component="img" className={styles.clusterSmallCircleIcon} src="/icons/cluster/round.svg" />
-                  <Box component="img" className={styles.clusterBigCircleIcon} src="/icons/cluster/round.svg" />
-                  <Box component="img" className={styles.clusterIcon} src="/icons/cluster/seed-peer.svg" />
-                </Box>
-                <Typography variant="h6" className={styles.seedPseerIconTitle}>
-                  Seed Peer
+            <Statistics className={styles.statistics} />
+          </Box>
+        </Card>
+        <Card className={styles.clusterContainer}>
+          <Box display="flex" alignItems="flex-end">
+            <Box className={styles.clusterIconContainer}>
+              <Round className={styles.clusterSmallCircleIcon} />
+              <Round className={styles.clusterBigCircleIcon} />
+              <Scheduler className={styles.clusterIcon} />
+            </Box>
+            <Typography variant="body1" className={styles.clusterIconTitle}>
+              Scheduler
+            </Typography>
+          </Box>
+          <Box className={styles.clusterContentContainer}>
+            <Box>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                <Typography id="total-schedulers" variant="h5" sx={{ mr: '0.6rem' }}>
+                  {isLoading ? <Skeleton data-testid="isloading" sx={{ width: '1rem' }} /> : scheduler?.length || 0}
                 </Typography>
+                <Typography variant="body2">number of schedulers</Typography>
               </Box>
-              <Box className={styles.clusterContentContainer}>
-                <Box sx={{ ml: '0.6rem' }}>
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                    <Typography id="total-seed-peer" variant="h5" sx={{ mr: '0.8rem' }}>
-                      {isLoading ? <Skeleton data-testid="isloading" sx={{ width: '1rem' }} /> : seedPeer.length || 0}
-                    </Typography>
-                    <Typography variant="subtitle2">number of seed peers</Typography>
-                  </Box>
-                  <Grid className={styles.clusterBottomContainer}>
-                    <Box component="img" className={styles.clusterBottomIcon} src="/icons/cluster/active.svg" />
-                    <Box className={styles.clusterBottomContentContainer}>
-                      <span id="active-seed-peer" className={styles.clusterBottomContent}>
-                        {isLoading ? (
-                          <Skeleton data-testid="isloading" sx={{ width: '1rem' }} />
-                        ) : (
-                          numberOfActiveSeedPeers || 0
-                        )}
-                      </span>
-                      <span className={styles.clusterBottomContentMsg}>active</span>
-                    </Box>
-                  </Grid>
+              <Grid className={styles.clusterBottomContainer}>
+                <Active className={styles.clusterBottomIcon} />
+                <Box className={styles.clusterBottomContentContainer}>
+                  <Typography variant="body2" id="active-schedulers" className={styles.clusterBottomContent}>
+                    {isLoading ? (
+                      <Skeleton data-testid="isloading" sx={{ width: '1rem' }} />
+                    ) : (
+                      numberOfActiveSchedulers || 0
+                    )}
+                  </Typography>
+                  <Typography className={styles.clusterBottomContentMsg} variant="body2" display="block">
+                    active
+                  </Typography>
                 </Box>
-                <Box component="img" src="/icons/cluster/peer/statistics.svg" />
-              </Box>
+              </Grid>
             </Box>
-          </Card>
-        </Box>
+            <Statistics className={styles.statistics} />
+          </Box>
+        </Card>
+        <Card className={styles.clusterContainer}>
+          <Box display="flex" alignItems="flex-end">
+            <Box className={styles.clusterIconContainer}>
+              <Round className={styles.clusterSmallCircleIcon} />
+              <Round className={styles.clusterBigCircleIcon} />
+              <SeedPeer className={styles.clusterIcon} />
+            </Box>
+            <Typography variant="body1" className={styles.seedPseerIconTitle}>
+              Seed Peer
+            </Typography>
+          </Box>
+          <Box className={styles.clusterContentContainer}>
+            <Box>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                <Typography id="total-seed-peer" variant="h5" sx={{ mr: '0.6rem' }}>
+                  {isLoading ? <Skeleton data-testid="isloading" sx={{ width: '1rem' }} /> : seedPeer.length || 0}
+                </Typography>
+                <Typography variant="body2">number of seed peers</Typography>
+              </Box>
+              <Grid className={styles.clusterBottomContainer}>
+                <Active className={styles.clusterBottomIcon} />
+                <Box className={styles.clusterBottomContentContainer}>
+                  <Typography variant="body2" id="active-seed-peer" className={styles.clusterBottomContent}>
+                    {isLoading ? (
+                      <Skeleton data-testid="isloading" sx={{ width: '1rem' }} />
+                    ) : (
+                      numberOfActiveSeedPeers || 0
+                    )}
+                  </Typography>
+                  <Typography className={styles.clusterBottomContentMsg} variant="body2">
+                    active
+                  </Typography>
+                </Box>
+              </Grid>
+            </Box>
+            <Statistics className={styles.statistics} />
+          </Box>
+        </Card>
       </Grid>
       <Box className={styles.searchContainer}>
         <Stack spacing={2} sx={{ width: '20rem' }}>
@@ -426,19 +391,19 @@ export default function Clusters() {
       </Box>
       <Box>
         {isLoading ? (
-          <Box id="clusters" className={styles.loadingCard}>
+          <Box id="clustersCard" className={styles.loadingCard}>
             <Card>
               <Box className={styles.clusterListContent}>
                 <Box p="1.2rem 1.2rem 0 1.2rem">
-                  <Box display="flex" mb="0.5rem">
-                    <img className={styles.idIcon} src="/icons/cluster/id.svg" alt="" />
-                    <Skeleton data-testid="isloading" sx={{ width: '1rem' }} />
+                  <Box display="flex" mb="0.5rem" alignItems="center">
+                    <ClusterID className={styles.idIcon} />
+                    <Skeleton data-testid="isloading" sx={{ width: '1rem', ml: '0.4rem' }} />
                   </Box>
                   <Typography variant="h6" mb="0.5rem" className={styles.nameText}>
                     <Skeleton data-testid="isloading" sx={{ width: '6rem' }} />
                   </Typography>
                   <Box display="flex">
-                    <Skeleton data-testid="isloading" sx={{ width: '6rem' }} />
+                    <Skeleton data-testid="isloading" sx={{ width: '15rem' }} />
                   </Box>
                 </Box>
                 <Divider
@@ -461,14 +426,14 @@ export default function Clusters() {
           </Box>
         ) : Array.isArray(clusterCount) && clusterCount.length === 0 ? (
           <Card className={styles.noData}>
-            <Box component="img" className={styles.nodataIcon} src="/icons/cluster/scheduler/ic-content.svg" />
+            <IcContent className={styles.nodataIcon} />
             <Typography variant="h6" className={styles.nodataText}>
               You have no clusters.
             </Typography>
           </Card>
         ) : Array.isArray(allClusters) && allClusters.length === 0 ? (
           <Box id="no-clusters" className={styles.noClusterContainer}>
-            <Box component="img" className={styles.noClusterIcon} src="/icons/cluster/no-cluster.svg" />
+            <NoCluster className={styles.noClusterIcon} />
             <Box fontSize="1.2rem">
               No results for&nbsp;
               <Typography variant="h6" component="span">
@@ -483,15 +448,11 @@ export default function Clusters() {
                 <Card key={item.id} id="clusters" className={styles.card}>
                   <Box className={styles.clusterListContent}>
                     <Box p="1.2rem 1.2rem 0 1.2rem">
-                      <Box display="flex" mb="0.5rem">
-                        <img className={styles.idIcon} src="/icons/cluster/id.svg" alt="" />
-                        {clusterIsLoading ? (
-                          <Skeleton data-testid="isloading" sx={{ width: '1rem' }} />
-                        ) : (
-                          <Typography id={`cluster-id-${item.id}`} variant="subtitle1" className={styles.idText}>
-                            {item.id}
-                          </Typography>
-                        )}
+                      <Box display="flex" mb="0.5rem" alignItems="center">
+                        <ClusterID className={styles.idIcon} />
+                        <Typography id={`cluster-id-${item.id}`} variant="subtitle1" className={styles.idText}>
+                          {item.id}
+                        </Typography>
                       </Box>
                       <Typography
                         id={`cluster-name-${item.id || 0}`}
@@ -499,7 +460,7 @@ export default function Clusters() {
                         mb="0.5rem"
                         className={styles.nameText}
                       >
-                        {clusterIsLoading ? <Skeleton data-testid="isloading" sx={{ width: '6rem' }} /> : item.name}
+                        {item.name}
                       </Typography>
                       <Box display="flex">
                         <Tooltip title={item.bio || '-'} placement="top">
@@ -508,11 +469,7 @@ export default function Clusters() {
                             variant="caption"
                             className={styles.descriptionText}
                           >
-                            {clusterIsLoading ? (
-                              <Skeleton data-testid="isloading" sx={{ width: '6rem' }} />
-                            ) : (
-                              item.bio || '-'
-                            )}
+                            {item.bio || '-'}
                           </Typography>
                         </Tooltip>
                       </Box>
@@ -520,61 +477,44 @@ export default function Clusters() {
                     <Divider
                       sx={{
                         borderStyle: 'dashed',
-                        borderColor: 'var(--palette-divider)',
+                        borderColor: 'var(--palette-palette-divider)',
                         borderWidth: '0px 0px thin',
                         m: '1rem 0',
                       }}
                     />
                     <Box p="0 1.2rem 1.2rem 1.2rem">
-                      {clusterIsLoading ? (
-                        <Skeleton data-testid="isloading" sx={{ width: '4rem', height: '1.4rem', mb: '0.8rem' }} />
-                      ) : (
-                        <Paper
-                          elevation={0}
-                          id={`default-cluster-${item.id || 0}`}
-                          sx={{
-                            height: '1.4rem',
-                            background: item.is_default ? 'var(--description-color)' : 'var(--button-color)',
-                            color: item.is_default ? '#FFFFFF' : '#FFFFFF',
-                            display: 'inline-flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            padding: '0.4rem',
-                          }}
-                        >
-                          <Typography variant="subtitle2">{`${
-                            item.is_default ? 'Default' : 'Non-Default'
-                          }`}</Typography>
-                        </Paper>
-                      )}
+                      <Paper
+                        elevation={0}
+                        id={`default-cluster-${item.id || 0}`}
+                        sx={{
+                          height: '1.4rem',
+                          background: item.is_default
+                            ? 'var(--palette-description-color)'
+                            : 'var(--palette-dark-300Channel)',
+                          color: item.is_default ? '#FFFFFF' : '#FFFFFF',
+                          display: 'inline-flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          padding: '0.4rem',
+                        }}
+                      >
+                        <Typography variant="body2">{`${item.is_default ? 'Default' : 'Non-Default'}`}</Typography>
+                      </Paper>
                       <Box className={styles.creatTimeContainer}>
                         <Chip
                           avatar={<MoreTimeIcon />}
-                          label={
-                            clusterIsLoading ? (
-                              <Skeleton data-testid="isloading" sx={{ width: '6rem' }} />
-                            ) : (
-                              getDatetime(item.created_at)
-                            )
-                          }
+                          label={getDatetime(item.created_at)}
                           variant="outlined"
                           size="small"
                         />
                         <IconButton
                           id={`show-cluster-${item.id}`}
                           className={styles.buttonContent}
-                          sx={{
-                            '&.MuiButton-root': {
-                              backgroundColor: '#fff',
-                              p: 0,
-                            },
-                            p: 0,
-                          }}
                           onClick={() => {
                             navigate(`/clusters/${item.id}`);
                           }}
                         >
-                          <ArrowCircleRightIcon fontSize="large" sx={{ color: 'var(--button-color)' }} />
+                          <ArrowCircleRightIcon className={styles.arrowCircleRightIcon} />
                         </IconButton>
                       </Box>
                     </Box>
@@ -585,7 +525,7 @@ export default function Clusters() {
         )}
       </Box>
       {totalPages > 1 ? (
-        <Box display="flex" justifyContent="flex-end" sx={{ marginTop: theme.spacing(2) }}>
+        <Box display="flex" justifyContent="flex-end" sx={{ marginTop: '2rem' }}>
           <Pagination
             count={totalPages}
             page={clusterPage}
@@ -611,6 +551,6 @@ export default function Clusters() {
       ) : (
         <></>
       )}
-    </ThemeProvider>
+    </Box>
   );
 }
diff --git a/src/components/clusters/information.module.css b/src/components/clusters/information.module.css
index 5aa556a..ec61691 100644
--- a/src/components/clusters/information.module.css
+++ b/src/components/clusters/information.module.css
@@ -31,6 +31,12 @@
   width: 2.8rem;
   height: 2.8rem;
   margin-right: 1rem;
+  color: var(--palette-button-color);
+}
+
+.copyIcon {
+  width: 1rem;
+  height: 1rem;
 }
 
 .updateClusterIcon {
@@ -44,7 +50,7 @@
   height: 6rem;
 }
 
-.className {
+.name {
   padding-bottom: 0.4rem;
   font-family: 'mabry-bold' !important;
 }
@@ -79,20 +85,21 @@
 .descriptionIcon {
   width: 0.9rem !important ;
   height: 0.9rem !important;
+  color: var(--palette-grey-300Channel);
 }
 
 .descriptionIcon:hover {
-  color: var(--description-color);
+  color: var(--palette-description-color);
 }
 
 .configLable {
-  color: var(--table-title-text-color);
+  color: var(--palette-table-title-text-color);
   margin-right: 0.2rem !important;
   font-family: 'mabry-bold' !important;
 }
 
 .scopesLable {
-  color: var(--button-color) !important;
+  color: var(--palette-button-color) !important;
   font-family: 'mabry-bold' !important;
   margin-right: 0.2rem !important;
   padding-left: 0.4rem;
@@ -116,13 +123,14 @@
 .scopesIcon {
   width: 1.6rem;
   height: 1.6rem;
+  color: var(--palette-button-color);
 }
 
 .totalContainer {
   display: flex;
   align-items: center;
   padding: 0.3rem;
-  background-color: var(--menu-background-color) !important;
+  background-color: var(--palette-grey-background-color) !important;
 }
 
 .totalIcon {
@@ -220,7 +228,7 @@
   align-items: center;
   justify-content: center;
   margin-top: 0.4rem;
-  padding: 0.5rem;
+  padding: 0.2rem 0.4rem;
 }
 
 .cidrsText {
@@ -266,42 +274,36 @@
 }
 
 .idcDialogContainer {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  gap: calc(1.5rem);
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
 }
 
 .cidrsDialogContent {
-  width: 45%;
   background-color: #f7f7f8 !important;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   padding: 0.4rem 0.8rem;
-  margin-bottom: 0.8rem;
-  margin-right: 0.5rem;
-  margin-left: 0.5rem;
 }
 
 .cidrsDialogContainer {
-  display: flex;
-  flex-wrap: wrap;
+  gap: calc(1.5rem);
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
 }
 
 .idcDialogContent {
-  width: 45%;
   background-color: #f7f7f8 !important;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   padding: 0.4rem 0.8rem;
-  margin-bottom: 0.8rem;
-  margin-right: 0.5rem;
-  margin-left: 0.5rem;
 }
 
 .cidrsIcon {
   width: 1.6rem;
   height: 1.6rem;
   margin-right: 0.3rem;
+  color: var(--palette-save-color);
 }
diff --git a/src/components/clusters/information.tsx b/src/components/clusters/information.tsx
index 94c3a9b..d47bbc0 100644
--- a/src/components/clusters/information.tsx
+++ b/src/components/clusters/information.tsx
@@ -15,11 +15,21 @@ import Dialog from '@mui/material/Dialog';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import styles from './information.module.css';
 import Card from '../card';
-import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined';
+import HelpIcon from '@mui/icons-material/Help';
 import { useContext, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { MyContext } from './show';
-import { CancelLoadingButton, DeleteLoadingButton, SavelLoadingButton } from '../loading-button';
+import { ReactComponent as InformationCluster } from '../../assets/images/cluster/information-cluster.svg';
+import { ReactComponent as Done } from '../../assets/images/tokens/done.svg';
+import { ReactComponent as Copy } from '../../assets/images/tokens/copy.svg';
+import { ReactComponent as Edit } from '../../assets/images/user/edit.svg';
+import { ReactComponent as Location } from '../../assets/images/cluster/location.svg';
+import { ReactComponent as IDC } from '../../assets/images/cluster/idc.svg';
+import { ReactComponent as Total } from '../../assets/images/cluster/total.svg';
+import { ReactComponent as CIDRs } from '../../assets/images/cluster/cidrs.svg';
+import { ReactComponent as Hostnames } from '../../assets/images/cluster/hostnames.svg';
+import { ReactComponent as Delete } from '../../assets/images/cluster/delete.svg';
+import { CancelLoadingButton, DeleteLoadingButton } from '../loading-button';
 import {
   Chart as ChartJS,
   ArcElement,
@@ -109,6 +119,7 @@ export default function Information() {
       }
     }
   };
+
   return (
     <Box>
       <Snackbar
@@ -145,14 +156,13 @@ export default function Information() {
             variant="contained"
             className={styles.updateButton}
             sx={{
-              '&.MuiButton-root': {
-                backgroundColor: 'var(--button-color)',
-                color: '#fff',
-              },
+              background: 'var(--palette-button-color)',
+              color: 'var(--palette-button-text-color)',
+              ':hover': { backgroundColor: 'var(--palette-hover-button-text-color)' },
               mr: '1.5rem',
             }}
           >
-            <Box component="img" className={styles.updateClusterIcon} src="/icons/user/edit.svg" />
+            <Edit className={styles.updateClusterIcon} />
             Update
           </Button>
           <Button
@@ -164,10 +174,9 @@ export default function Information() {
             }}
             className={styles.deleteButton}
             sx={{
-              '&.MuiButton-root': {
-                backgroundColor: 'var(--button-color)',
-                color: '#fff',
-              },
+              background: 'var(--palette-button-color)',
+              color: 'var(--palette-button-text-color)',
+              ':hover': { backgroundColor: 'var(--palette-hover-button-text-color)' },
             }}
           >
             <DeleteIcon fontSize="small" sx={{ mr: '0.4rem' }} />
@@ -178,12 +187,17 @@ export default function Information() {
       <Box>
         <Card className={styles.informationWrapper}>
           <Box className={styles.classNameWrapper}>
-            <Box component="img" className={styles.clusterIcon} src="/icons/cluster/information-cluster.svg" />
+            <InformationCluster className={styles.clusterIcon} />
             <Box>
-              <Typography id="name" variant="h6" component="div" className={styles.className}>
+              <Typography id="name" variant="h6" component="div" className={styles.name}>
                 {isLoading ? <Skeleton sx={{ width: '8rem' }} /> : cluster.name || '-'}
               </Typography>
-              <Typography id="description" variant="body2" component="div" color="var(--text---palette-text-secondary)">
+              <Typography
+                id="description"
+                variant="caption"
+                component="div"
+                color="var(--palette-text-palette-text-secondary)"
+              >
                 {isLoading ? <Skeleton data-testid="cluster-loading" sx={{ width: '8rem' }} /> : cluster?.bio || '-'}
               </Typography>
             </Box>
@@ -198,7 +212,7 @@ export default function Information() {
                   title="When peer does not find a matching cluster based on scopes, the default cluster will be used."
                   placement="top"
                 >
-                  <HelpOutlineOutlinedIcon color="disabled" className={styles.descriptionIcon} />
+                  <HelpIcon className={styles.descriptionIcon} />
                 </MuiTooltip>
               </Box>
               <Box sx={{ display: 'flex', alignItems: 'center' }}>
@@ -206,7 +220,9 @@ export default function Information() {
                   sx={{
                     width: '0.8rem',
                     height: '0.8rem',
-                    backgroundColor: cluster.is_default ? 'var(--description-color)' : 'var(--button-color)',
+                    backgroundColor: cluster.is_default
+                      ? 'var(--palette-description-color)'
+                      : 'var(--palette-dark-300Channel)',
                     borderRadius: '0.2rem',
                     mr: '0.5rem',
                   }}
@@ -222,7 +238,6 @@ export default function Information() {
                 </Typography>
               </Box>
             </Box>
-
             <Box className={styles.clusterWrap}>
               <Box className={styles.clusterTitle}>
                 <Typography variant="body2" component="div" className={styles.configLable}>
@@ -232,7 +247,7 @@ export default function Information() {
                   title="When the scheduler is deployed, the schedulerClusterID must be filled with this scheduler cluster ID in scheduler configuration. In this way, the scheduler will become the scheduling service of this cluster."
                   placement="top"
                 >
-                  <HelpOutlineOutlinedIcon color="disabled" className={styles.descriptionIcon} />
+                  <HelpIcon className={styles.descriptionIcon} />
                 </MuiTooltip>
               </Box>
               <Box className={styles.schedulerClusterID}>
@@ -257,6 +272,7 @@ export default function Information() {
                     sx={{
                       width: '1.2rem',
                       height: '1.2rem',
+                      p: 0,
                     }}
                     onClick={() => {
                       copyClusterID('schedulerClusterID', cluster?.scheduler_cluster_id || 0);
@@ -276,15 +292,10 @@ export default function Information() {
                         title="copied!"
                         id="schedulerClusterIDTooltip"
                       >
-                        <Box
-                          component="img"
-                          id="schedulerClusterIDCopyIcon"
-                          sx={{ width: '1rem', height: '1rem' }}
-                          src="/icons/tokens/done.svg"
-                        />
+                        <Done id="schedulerClusterDoneIcon" className={styles.copyIcon} />
                       </MuiTooltip>
                     ) : (
-                      <Box component="img" sx={{ width: '1rem', height: '1rem' }} src="/icons/tokens/copy.svg" />
+                      <Copy id="schedulerClusterIDCopyIcon" className={styles.copyIcon} />
                     )}
                   </IconButton>
                 )}
@@ -299,7 +310,7 @@ export default function Information() {
                   title="When the seed peer is deployed, the clusterID must be filled with this seed peer cluster ID in scheduler configuration. In this way, the seed peer will become the seed peer service of this cluster."
                   placement="top"
                 >
-                  <HelpOutlineOutlinedIcon color="disabled" className={styles.descriptionIcon} />
+                  <HelpIcon className={styles.descriptionIcon} />
                 </MuiTooltip>
               </Box>
               <Box className={styles.schedulerClusterID}>
@@ -325,6 +336,7 @@ export default function Information() {
                     sx={{
                       width: '1.2rem',
                       height: '1.2rem',
+                      p: 0,
                     }}
                     onClick={() => {
                       copyClusterID('seedPeerClusterID', cluster?.seed_peer_cluster_id || 0);
@@ -343,15 +355,10 @@ export default function Information() {
                         title="copied!"
                         id="seedPeerClusterIDTooltip"
                       >
-                        <Box
-                          component="img"
-                          id="seedPeerClusterIDCopyIcon"
-                          sx={{ width: '1rem', height: '1rem' }}
-                          src="/icons/tokens/done.svg"
-                        />
+                        <Done id="seedPeerClusterDoneIcon" className={styles.copyIcon} />
                       </MuiTooltip>
                     ) : (
-                      <Box component="img" sx={{ width: '1rem', height: '1rem' }} src="/icons/tokens/copy.svg" />
+                      <Copy id="seedPeerClusterIDCopyIcon" className={styles.copyIcon} />
                     )}
                   </IconButton>
                 )}
@@ -363,7 +370,7 @@ export default function Information() {
                   Create At
                 </Typography>
                 <MuiTooltip title="Cluster name." placement="top">
-                  <HelpOutlineOutlinedIcon color="disabled" className={styles.descriptionIcon} />
+                  <HelpIcon className={styles.descriptionIcon} />
                 </MuiTooltip>
               </Box>
               <Typography id="name" variant="body2" component="div" className={styles.clusterContent}>
@@ -382,7 +389,7 @@ export default function Information() {
                   peers in the scope."
               placement="top"
             >
-              <HelpOutlineOutlinedIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </MuiTooltip>
           </Box>
           <Box className={styles.configTitle}>
@@ -390,7 +397,7 @@ export default function Information() {
               Config
             </Typography>
             <MuiTooltip title="The configuration for P2P downloads." placement="top">
-              <HelpOutlineOutlinedIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </MuiTooltip>
           </Box>
         </Box>
@@ -399,7 +406,7 @@ export default function Information() {
             <Card className={styles.cidrsContainer}>
               <Box className={styles.scopesTitle}>
                 <Box className={styles.locationTitle}>
-                  <Box component="img" className={styles.scopesIcon} src="/icons/cluster/location.svg" />
+                  <Location className={styles.scopesIcon} />
                   <Typography variant="body2" component="div" className={styles.scopesLable}>
                     Location
                   </Typography>
@@ -407,7 +414,7 @@ export default function Information() {
                     title={`The cluster needs to serve all peers in the location. When the location in the peer configuration matches the location in the cluster, the peer will preferentially use the scheduler and the seed peer of the cluster. It separated by "|", for example "area|country|province|city".`}
                     placement="top"
                   >
-                    <HelpOutlineOutlinedIcon color="disabled" className={styles.descriptionIcon} />
+                    <HelpIcon className={styles.descriptionIcon} />
                   </MuiTooltip>
                 </Box>
               </Box>
@@ -432,7 +439,7 @@ export default function Information() {
             <Card className={styles.cidrsContainer}>
               <Box className={styles.scopesTitle}>
                 <Box className={styles.cidrsTitle}>
-                  <Box component="img" className={styles.scopesIcon} src="/icons/cluster/idc.svg" />
+                  <IDC className={styles.scopesIcon} />
                   <Typography variant="body2" component="p" className={styles.scopesLable}>
                     IDC
                   </Typography>
@@ -440,12 +447,12 @@ export default function Information() {
                     title={`The cluster needs to serve all peers in the IDC. When the IDC in the peer configuration matches the IDC in the cluster, the peer will preferentially use the scheduler and the seed peer of the cluster. IDC has higher priority than location in the scopes.`}
                     placement="top"
                   >
-                    <HelpOutlineOutlinedIcon color="disabled" className={styles.descriptionIcon} />
+                    <HelpIcon className={styles.descriptionIcon} />
                   </MuiTooltip>
                 </Box>
                 <Paper id="idc-total" elevation={0} className={styles.totalContainer}>
-                  <Box component="img" className={styles.totalIcon} src="/icons/cluster/total.svg" />
-                  <Typography variant="body2" component="div" color="var(--description-color)" pl="0.3rem">
+                  <Total className={styles.totalIcon} />
+                  <Typography variant="body2" component="div" color="var(--palette-description-color)" pl="0.3rem">
                     {`Total: ${cluster?.scopes?.idc !== '' ? cluster?.scopes?.idc.split('|').length : 0}`}
                   </Typography>
                 </Paper>
@@ -503,7 +510,7 @@ export default function Information() {
                           setOpenIDC(true);
                         }}
                       >
-                        <MoreVertIcon sx={{ color: 'var(--button-color)' }} />
+                        <MoreVertIcon sx={{ color: 'var(--palette-color)' }} />
                       </IconButton>
                     ) : (
                       <></>
@@ -527,7 +534,7 @@ export default function Information() {
                 <DialogContent dividers className={styles.idcDialogContainer}>
                   {cluster?.scopes?.idc.split('|').map((item: any, id: any) => (
                     <Paper key={id} elevation={0} className={styles.idcDialogContent}>
-                      <Box component="img" className={styles.cidrsIcon} src="/icons/cluster/idc.svg" />
+                      <IDC className={styles.cidrsIcon} />
                       <MuiTooltip title={item} placement="top">
                         <Typography variant="body2" component="div" className={styles.cidrsText} alignSelf="center">
                           {item}
@@ -541,7 +548,7 @@ export default function Information() {
             <Card className={styles.cidrsContainer}>
               <Box className={styles.scopesTitle}>
                 <Box className={styles.cidrsTitle}>
-                  <Box component="img" className={styles.scopesIcon} src="/icons/cluster/cidrs.svg" />
+                  <CIDRs className={styles.scopesIcon} />
                   <Typography variant="body2" component="div" className={styles.scopesLable}>
                     CIDRs
                   </Typography>
@@ -549,12 +556,12 @@ export default function Information() {
                     title={`The cluster needs to serve all peers in the CIDRs. The advertise IP will be reported in the peer configuration when the peer is started, and if the advertise IP is empty in the peer configuration, peer will automatically get expose IP as advertise IP. When advertise IP of the peer matches the CIDRs in cluster, the peer will preferentially use the scheduler and the seed peer of the cluster. CIDRs has higher priority than IDC in the scopes. CIDRs has higher priority than IDC in the scopes. CIDRs has priority equal to hostname in the scopes.`}
                     placement="top"
                   >
-                    <HelpOutlineOutlinedIcon color="disabled" className={styles.descriptionIcon} />
+                    <HelpIcon className={styles.descriptionIcon} />
                   </MuiTooltip>
                 </Box>
                 <Paper id="cidrs-total" elevation={0} className={styles.totalContainer}>
-                  <Box component="img" className={styles.totalIcon} src="/icons/cluster/total.svg" />
-                  <Typography variant="body2" component="div" color="var(--description-color)" pl="0.3rem">
+                  <Total className={styles.totalIcon} />
+                  <Typography variant="body2" component="div" color="var(--palette-description-color)" pl="0.3rem">
                     {`Total: ${cluster?.scopes?.cidrs?.length || 0}`}
                   </Typography>
                 </Paper>
@@ -615,7 +622,7 @@ export default function Information() {
                             setOpenCIDRs(true);
                           }}
                         >
-                          <MoreVertIcon sx={{ color: 'var(--button-color)' }} />
+                          <MoreVertIcon sx={{ color: 'var(--palette-color)' }} />
                         </IconButton>
                       ) : (
                         <></>
@@ -641,7 +648,7 @@ export default function Information() {
               <DialogContent dividers className={styles.cidrsDialogContainer}>
                 {cluster?.scopes?.cidrs?.map((item: any, id: any) => (
                   <Paper key={id} elevation={0} className={styles.cidrsDialogContent}>
-                    <Box component="img" className={styles.cidrsIcon} src="/icons/cluster/cidrs.svg" />
+                    <CIDRs className={styles.cidrsIcon} />
                     <MuiTooltip title={item} placement="top">
                       <Typography variant="body2" component="div" className={styles.cidrsText} alignSelf="center">
                         {item}
@@ -654,7 +661,7 @@ export default function Information() {
             <Card className={styles.cidrsContainer}>
               <Box className={styles.scopesTitle}>
                 <Box className={styles.cidrsTitle}>
-                  <Box component="img" className={styles.scopesIcon} src="/icons/cluster/hostnames.svg" />
+                  <Hostnames className={styles.scopesIcon} />
                   <Typography variant="body2" component="div" className={styles.scopesLable}>
                     Hostnames
                   </Typography>
@@ -664,12 +671,12 @@ export default function Information() {
                     }
                     placement="top"
                   >
-                    <HelpOutlineOutlinedIcon color="disabled" className={styles.descriptionIcon} />
+                    <HelpIcon className={styles.descriptionIcon} />
                   </MuiTooltip>
                 </Box>
                 <Paper id="hostnames-total" elevation={0} className={styles.totalContainer}>
-                  <Box component="img" className={styles.totalIcon} src="/icons/cluster/total.svg" />
-                  <Typography variant="body2" component="div" color="var(--description-color)" pl="0.3rem">
+                  <Total className={styles.totalIcon} />
+                  <Typography variant="body2" component="div" color="var(--palette-description-color)" pl="0.3rem">
                     {`Total: ${cluster?.scopes?.idc !== '' ? cluster?.scopes?.idc.split('|').length : 0}`}
                   </Typography>
                 </Paper>
@@ -730,7 +737,7 @@ export default function Information() {
                             setOpenHostnames(true);
                           }}
                         >
-                          <MoreVertIcon sx={{ color: 'var(--button-color)' }} />
+                          <MoreVertIcon sx={{ color: 'var(--palette-color)' }} />
                         </IconButton>
                       ) : (
                         <></>
@@ -756,7 +763,7 @@ export default function Information() {
               <DialogContent dividers className={styles.cidrsDialogContainer}>
                 {cluster?.scopes?.hostnames?.map((item: any, id: any) => (
                   <Paper key={id} elevation={0} className={styles.cidrsDialogContent}>
-                    <Box component="img" className={styles.cidrsIcon} src="/icons/cluster/hostnames.svg" />
+                    <Hostnames className={styles.cidrsIcon} />
                     <MuiTooltip title={item} placement="top">
                       <Typography variant="body2" component="div" className={styles.cidrsText} alignSelf="center">
                         {item}
@@ -777,7 +784,7 @@ export default function Information() {
                   title="If other peers download from the seed peer, the load of the seed peer will increase. When the load limit of the seed peer is reached, the scheduler will no longer schedule other peers to download from the seed peer until the it has the free load.	seed_peer_cluster_config.load_limit"
                   placement="top"
                 >
-                  <HelpOutlineOutlinedIcon color="disabled" className={styles.descriptionIcon} />
+                  <HelpIcon className={styles.descriptionIcon} />
                 </MuiTooltip>
               </Box>
               {isLoading ? (
@@ -799,7 +806,7 @@ export default function Information() {
                   title={`If other peers download from the peer, the load of the peer will increase. When the load limit of the peer is reached, the scheduler will no longer schedule other peers to download from the peer until the it has the free load.`}
                   placement="top"
                 >
-                  <HelpOutlineOutlinedIcon color="disabled" className={styles.descriptionIcon} />
+                  <HelpIcon className={styles.descriptionIcon} />
                 </MuiTooltip>
               </Box>
               {isLoading ? (
@@ -821,7 +828,7 @@ export default function Information() {
                   title="The maximum number of parents that the scheduler can schedule for download peer."
                   placement="top"
                 >
-                  <HelpOutlineOutlinedIcon color="disabled" className={styles.descriptionIcon} />
+                  <HelpIcon className={styles.descriptionIcon} />
                 </MuiTooltip>
               </Box>
               {isLoading ? (
@@ -843,7 +850,7 @@ export default function Information() {
                   title="The scheduler will randomly select the  number of parents from all the parents according to the filter parent limit and evaluate the optimal parents in selecting parents for the peer to download task. The number of optimal parent is the scheduling parent limit."
                   placement="top"
                 >
-                  <HelpOutlineOutlinedIcon color="disabled" className={styles.descriptionIcon} />
+                  <HelpIcon className={styles.descriptionIcon} />
                 </MuiTooltip>
               </Box>
               {isLoading ? (
@@ -865,7 +872,7 @@ export default function Information() {
                   title="The rate limit(requests per second) for job Open API, default value is 10."
                   placement="top"
                 >
-                  <HelpOutlineOutlinedIcon color="disabled" className={styles.descriptionIcon} />
+                  <HelpIcon className={styles.descriptionIcon} />
                 </MuiTooltip>
               </Box>
               {isLoading ? (
@@ -889,7 +896,7 @@ export default function Information() {
       >
         <DialogContent>
           <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-            <Box component="img" className={styles.deleteClusterIcon} src="/icons/cluster/delete.svg" />
+            <Delete className={styles.deleteClusterIcon} />
             <Typography pt="1rem">Are you sure you want to delet this cluster?</Typography>
           </Box>
           <Box sx={{ display: 'flex', justifyContent: 'space-between', pt: '1.2rem' }}>
diff --git a/src/components/clusters/new.module.css b/src/components/clusters/new.module.css
index c8addb4..5713c6d 100644
--- a/src/components/clusters/new.module.css
+++ b/src/components/clusters/new.module.css
@@ -49,8 +49,20 @@
 .descriptionIcon {
   width: 0.8rem !important ;
   height: 0.8rem !important;
+  color: var(--palette-grey-300Channel);
 }
 
 .descriptionIcon:hover {
-  color: var(--description-color);
+  color: var(--palette-description-color);
+}
+
+.card {
+  padding: 2rem;
+  margin: auto;
+  width: 60%;
+}
+
+.buttonContainer {
+  margin: auto;
+  width: 60%;
 }
diff --git a/src/components/clusters/new.tsx b/src/components/clusters/new.tsx
index 65f99db..41939df 100644
--- a/src/components/clusters/new.tsx
+++ b/src/components/clusters/new.tsx
@@ -2,6 +2,7 @@ import {
   Alert,
   Autocomplete,
   Box,
+  Breadcrumbs,
   Checkbox,
   Chip,
   Divider,
@@ -11,12 +12,13 @@ import {
   TextField,
   Tooltip,
   Typography,
+  Link as RouterLink,
 } from '@mui/material';
 import styles from './new.module.css';
 import { useState } from 'react';
 import HelpIcon from '@mui/icons-material/Help';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { createCluster } from '../../lib/api';
 import { CancelLoadingButton, SavelLoadingButton } from '../loading-button';
 
@@ -116,7 +118,7 @@ export default function NewCluster() {
               title={`The cluster needs to serve all peers in the location. When the location in the peer configuration matches the location in the cluster, the peer will preferentially use the scheduler and the seed peer of the cluster. It separated by "|", for example "area|country|province|city".`}
               placement="top"
             >
-              <HelpIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </Tooltip>
           ),
         },
@@ -167,12 +169,12 @@ export default function NewCluster() {
               placement="top"
             >
               <HelpIcon
-                color="disabled"
                 sx={{
+                  color: 'var(--palette-grey-300Channel)',
                   width: '0.8rem',
                   height: '0.8rem',
                   mr: '0.3rem',
-                  ':hover': { color: 'var(--description-color)' },
+                  ':hover': { color: 'var(--palette-description-color)' },
                 }}
               />
             </Tooltip>
@@ -234,12 +236,12 @@ export default function NewCluster() {
             placement="top"
           >
             <HelpIcon
-              color="disabled"
               sx={{
+                color: 'var(--palette-grey-300Channel)',
                 width: '0.8rem',
                 height: '0.8rem',
                 mr: '0.3rem',
-                ':hover': { color: 'var(--description-color)' },
+                ':hover': { color: 'var(--palette-description-color)' },
               }}
             />
           </Tooltip>
@@ -299,12 +301,12 @@ export default function NewCluster() {
             placement="top"
           >
             <HelpIcon
-              color="disabled"
               sx={{
+                color: 'var(--palette-grey-300Channel)',
                 width: '0.8rem',
                 height: '0.8rem',
                 mr: '0.3rem',
-                ':hover': { color: 'var(--description-color)' },
+                ':hover': { color: 'var(--palette-description-color)' },
               }}
             />
           </Tooltip>
@@ -349,7 +351,7 @@ export default function NewCluster() {
               title={`If other peers download from the seed peer, the load of the seed peer will increase. When the load limit of the seed peer is reached, the scheduler will no longer schedule other peers to download from the seed peer until the it has the free load.`}
               placement="top"
             >
-              <HelpIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </Tooltip>
           ),
         },
@@ -386,7 +388,7 @@ export default function NewCluster() {
               }
               placement="top"
             >
-              <HelpIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </Tooltip>
           ),
         },
@@ -421,7 +423,7 @@ export default function NewCluster() {
               title={`The maximum number of parents that the scheduler can schedule for download peer.`}
               placement="top"
             >
-              <HelpIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </Tooltip>
           ),
         },
@@ -457,7 +459,7 @@ export default function NewCluster() {
               title={`The scheduler will randomly select the  number of parents from all the parents according to the filter parent limit and evaluate the optimal parents in selecting parents for the peer to download task. The number of optimal parent is the scheduling parent limit.`}
               placement="top"
             >
-              <HelpIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </Tooltip>
           ),
         },
@@ -490,7 +492,7 @@ export default function NewCluster() {
         InputProps: {
           endAdornment: (
             <Tooltip title="The rate limit(requests per second) for job Open API, default value is 10." placement="top">
-              <HelpIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </Tooltip>
           ),
         },
@@ -656,7 +658,23 @@ export default function NewCluster() {
           {errorMessageText}
         </Alert>
       </Snackbar>
-      <Typography variant="h5">Create Cluster</Typography>
+      <Typography variant="h5" mb="1rem">
+        Create Cluster
+      </Typography>
+      <Breadcrumbs
+        separator={
+          <Box
+            sx={{ width: '0.3rem', height: '0.3rem', backgroundColor: '#919EAB', borderRadius: '50%', m: '0 0.4rem' }}
+          />
+        }
+        aria-label="breadcrumb"
+        sx={{ mt: '1rem' }}
+      >
+        <RouterLink component={Link} underline="hover" color="text.primary" to={`/clusters`}>
+          Cluster
+        </RouterLink>
+        <Typography color="inherit">New cluster</Typography>
+      </Breadcrumbs>
       <Divider sx={{ mt: 2, mb: 2 }} />
       <Box component="form" onSubmit={handleSubmit} noValidate>
         <Box className={styles.container}>
@@ -665,12 +683,12 @@ export default function NewCluster() {
               Information
             </Typography>
             <Tooltip title="The information of cluster." placement="top">
-              <HelpIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </Tooltip>
           </Box>
           <Box className={styles.defaultContainer}>
             <FormControlLabel
-              control={<Checkbox sx={{ '&.MuiCheckbox-root': { color: 'var(--button-color)' } }} />}
+              control={<Checkbox sx={{ '&.MuiCheckbox-root': { color: 'var(--palette-button-color)' } }} />}
               label="Set cluster as your default cluster"
               name="isDefault"
               sx={{ '&.MuiFormControlLabel-root': { mr: '0.6rem' } }}
@@ -679,7 +697,7 @@ export default function NewCluster() {
               title="When peer does not find a matching cluster based on scopes, the default cluster will be used."
               placement="top"
             >
-              <HelpIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </Tooltip>
           </Box>
           <Box sx={{ display: 'flex', flexDirection: 'column' }}>
@@ -712,7 +730,7 @@ export default function NewCluster() {
             the scope."
               placement="top"
             >
-              <HelpIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </Tooltip>
           </Box>
           <Grid className={styles.scopesContainer}>
@@ -751,7 +769,7 @@ export default function NewCluster() {
               Config
             </Typography>
             <Tooltip title=" The configuration for P2P downloads." placement="top">
-              <HelpIcon color="disabled" className={styles.descriptionIcon} />
+              <HelpIcon className={styles.descriptionIcon} />
             </Tooltip>
           </Box>
           <Grid sx={{ display: 'flex', flexWrap: 'wrap' }}>
diff --git a/src/components/clusters/peers/inde.module.css b/src/components/clusters/peers/inde.module.css
index 9555ca5..0104d41 100644
--- a/src/components/clusters/peers/inde.module.css
+++ b/src/components/clusters/peers/inde.module.css
@@ -9,7 +9,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .headerTitle {
@@ -17,6 +17,30 @@
   align-items: center;
 }
 
+.navigationContainer {
+  display: grid;
+  gap: calc(1.5rem);
+  grid-template-columns: repeat(3, 1fr);
+  margin-bottom: 2rem;
+}
+
+.navigationCount {
+  display: flex;
+  align-items: center;
+}
+
+.navigationCountIcon {
+  background-color: rgba(34 197 94 / 0.18);
+  color: var(--palette-description-color);
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 0.5rem;
+}
+
 .navigationContent {
   display: flex;
   justify-content: space-between;
@@ -29,24 +53,25 @@
 }
 
 .navigation {
-  top: -3rem;
+  top: -2rem;
   width: 160px;
   z-index: -1;
   height: 160px;
-  right: -5rem;
+  right: -6rem;
   opacity: 0.12;
   border-radius: 24px;
   position: absolute;
   transform: rotate(34deg);
-  background: linear-gradient(to right, #22c55e 0%, rgba(34 197 94 / 0) 100%);
+  background: linear-gradient(to right, var(--palette-text-color) 0%, transparent 100%);
 }
 
 .navigationIcon {
-  width: 2.4rem;
-  height: 2.4rem;
-  top: 1.4rem;
-  right: 1.8rem;
+  width: 2rem;
+  height: 2rem;
+  top: 2.4rem;
+  right: 1.2rem;
   position: absolute;
+  color: var(--palette-text-color);
 }
 
 .dashboard {
@@ -91,6 +116,7 @@
   width: 1.8rem;
   height: 1.8rem;
   margin-right: 0.6rem;
+  color: var(--palette-text-color);
 }
 
 .activeContent {
@@ -101,7 +127,7 @@
 
 .linearProgress {
   width: 100%;
-  color: var(--description-color);
+  color: var(--palette-description-color);
 }
 
 .descriptionIcon {
@@ -111,42 +137,24 @@
 }
 
 .descriptionIcon:hover {
-  color: var(--description-color);
+  color: var(--palette-description-color);
 }
 
 .exportIcon {
   width: 1.8rem;
-}
-
-.featuresIconWrapper {
-  width: 2.4rem;
-  height: 2.4rem;
-  border-radius: 50%;
-  background-color: #fbfbfb;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 0.6rem;
-}
-
-.featuresIconContainer {
-  width: 1.8rem;
   height: 1.8rem;
-  border-radius: 50%;
-  background-color: #efefef;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
-.featuresIcon {
-  width: 1.2rem;
-  height: 1.2rem;
+.exportFileICon {
+  width: 2.8rem;
+  height: 2.8rem;
+  margin-bottom: 0.8rem;
+  color: var(--palette-color);
 }
 
 .divider {
   border-width: 0px 0px thin;
-  border-color: var(--palette-divider) !important;
+  border-color: var(--palette-palette-divider) !important;
   border-style: dashed !important;
 }
 
@@ -165,3 +173,15 @@
   justify-content: center;
   padding: 1rem 2rem;
 }
+
+.refreshIcon {
+  width: 1.2rem;
+  height: 1.2rem;
+  color: var(--palette-button-text-color);
+}
+
+.deleteWarning {
+  width: 1.4rem;
+  height: 1.4rem;
+  padding-right: 0.2rem;
+}
diff --git a/src/components/clusters/peers/index.tsx b/src/components/clusters/peers/index.tsx
index c628c11..5271ef5 100644
--- a/src/components/clusters/peers/index.tsx
+++ b/src/components/clusters/peers/index.tsx
@@ -1,7 +1,6 @@
 import {
   Box,
   Button,
-  Paper,
   Typography,
   Divider,
   FormControl,
@@ -11,14 +10,13 @@ import {
   Dialog,
   DialogContent,
   LinearProgress,
-  createTheme,
-  ThemeProvider,
   Skeleton,
   Snackbar,
   Alert,
   Tooltip as MuiTooltip,
   IconButton,
   Link,
+  useTheme,
 } from '@mui/material';
 import {
   Chart as ChartJS,
@@ -45,33 +43,22 @@ import { CancelLoadingButton, SavelLoadingButton } from '../../loading-button';
 import { MyContext } from '../../clusters/show';
 import _ from 'lodash';
 import Card from '../../card';
+import { ReactComponent as RefreshLoading } from '../../../assets/images/cluster/peer/refresh-loading.svg';
+import { ReactComponent as Refresh } from '../../../assets/images/cluster/peer/refresh.svg';
+import { ReactComponent as RefreshDialog } from '../../../assets/images/cluster/peer/refresh-dialog.svg';
+import { ReactComponent as DeleteWarning } from '../../../assets/images/cluster/delete-warning.svg';
+import { ReactComponent as Total } from '../../../assets/images/cluster/peer/total.svg';
+import { ReactComponent as GitVersion } from '../../../assets/images/cluster/peer/git-versions.svg';
+import { ReactComponent as GitCommit } from '../../../assets/images/cluster/peer/git-commits.svg';
+import { ReactComponent as Active } from '../../../assets/images/cluster/peer/active.svg';
+import { ReactComponent as Export } from '../../../assets/images/cluster/peer/export.svg';
+import { ReactComponent as ExportFile } from '../../../assets/images/cluster/peer/export-file.svg';
+import { ReactComponent as Count } from '../../../assets/images/cluster/scheduler/number.svg';
+import { ColorModeContext } from '../../../App';
 
 ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, Title);
 Chart.defaults.font.family = 'mabry-light';
 
-const theme = createTheme({
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 600,
-      md: 900,
-      lg: 1135,
-      xl: 1441,
-    },
-  },
-  palette: {
-    secondary: {
-      main: '#2E8F79',
-    },
-    primary: {
-      main: '#1C293A',
-    },
-  },
-  typography: {
-    fontFamily: 'mabry-light,sans-serif',
-  },
-});
-
 export default function Peer() {
   const [errorMessage, setErrorMessage] = useState(false);
   const [errorMessageText, setErrorMessageText] = useState('');
@@ -98,6 +85,9 @@ export default function Peer() {
   const [disabled, setDisabled] = useState(false);
 
   const { cluster } = useContext(MyContext);
+  const theme = useTheme();
+  const colorMode = useContext(ColorModeContext);
+
   useEffect(() => {
     (async function () {
       try {
@@ -246,29 +236,32 @@ export default function Peer() {
     datasets: [
       {
         data: gitVersion.map((item) => item.count),
-        backgroundColor: 'rgb(46,143,121)',
-        borderColor: 'rgb(46,143,121)',
-        borderWidth: 1,
+        backgroundColor: theme.palette.mode === 'dark' ? '#01A76F' : 'rgb(31, 125, 83)',
         borderRadius: 5,
         barPercentage: 0.6,
       },
     ],
   };
 
+  const doughnutBackgroundColor = [
+    'rgb(31, 125, 83)',
+    'rgba(31, 125, 83,0.8)',
+    'rgba(31, 125, 83,0.6)',
+    'rgba(31, 125, 83,0.4)',
+    'rgba(31, 125, 83,0.2)',
+  ];
+
+  const darkDoughnutBackgroundColor = ['#01A76F', '#5BE49B', '#C8FAD6', '#004B50', '#007868'];
+
   const gitVersionDoughnut = {
     labels: gitVersion.map((item) => item.name),
     datasets: [
       {
         label: 'Git Version',
         data: gitVersion.map((item) => item.count),
-        backgroundColor: [
-          'rgb(46,143,121)',
-          'rgba(46,143,121,0.8)',
-          'rgba(46,143,121,0.6)',
-          'rgba(46,143,121,0.4)',
-          'rgba(46,143,121,0.2)',
-        ],
-        borderWidth: 1,
+        backgroundColor: theme.palette.mode === 'dark' ? darkDoughnutBackgroundColor : doughnutBackgroundColor,
+        borderWidth: 0,
+        borderColor: 'rgba(255, 255, 255, 0.6)',
       },
     ],
   };
@@ -278,9 +271,8 @@ export default function Peer() {
     datasets: [
       {
         data: gitCommit.map((item) => item.count),
-        backgroundColor: 'rgb(46,143,121)',
-        borderColor: 'rgb(46,143,121)',
-        borderWidth: 1,
+        backgroundColor: theme.palette.mode === 'dark' ? '#01A76F' : 'rgb(31, 125, 83)',
+        borderWidth: 0,
         borderRadius: 5,
         barPercentage: 0.6,
       },
@@ -293,14 +285,9 @@ export default function Peer() {
       {
         label: 'Git Commit',
         data: gitCommit.map((item) => item.count),
-        backgroundColor: [
-          'rgb(46,143,121)',
-          'rgba(46,143,121,0.8)',
-          'rgba(46,143,121,0.6)',
-          'rgba(46,143,121,0.4)',
-          'rgba(46,143,121,0.2)',
-        ],
-        borderWidth: 1,
+        backgroundColor: theme.palette.mode === 'dark' ? darkDoughnutBackgroundColor : doughnutBackgroundColor,
+        borderWidth: 0,
+        borderColor: 'rgba(255, 255, 255, 0.6)',
       },
     ],
   };
@@ -441,534 +428,523 @@ export default function Peer() {
   };
 
   return (
-    <ThemeProvider theme={theme}>
-      <Box>
-        <Snackbar
-          open={errorMessage}
-          autoHideDuration={3000}
-          onClose={handleClose}
-          anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-        >
-          <Alert onClose={handleClose} severity="error" sx={{ width: '100%' }}>
-            {errorMessageText}
-          </Alert>
-        </Snackbar>
-        <Box className={styles.header}>
-          <Box className={styles.headerTitle}>
-            <Typography variant="h6" fontFamily="mabry-bold" pr="0.4rem">
-              Peers
-            </Typography>
-            <MuiTooltip
-              title={
-                <Typography variant="body2">
-                  Peer statistics are only supported in the Rust client, refer to&nbsp;
-                  <Link
-                    underline="hover"
-                    href="https://github.com/dragonflyoss/client"
-                    target="_blank"
-                    style={{ color: 'var(--menu-color)' }}
-                  >
-                    dragonflyoss/client
-                  </Link>
-                  .
+    <Box>
+      <Snackbar
+        open={errorMessage}
+        autoHideDuration={3000}
+        onClose={handleClose}
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      >
+        <Alert onClose={handleClose} severity="error" sx={{ width: '100%' }}>
+          {errorMessageText}
+        </Alert>
+      </Snackbar>
+      <Box className={styles.header}>
+        <Box className={styles.headerTitle}>
+          <Typography variant="h6" fontFamily="mabry-bold" pr="0.4rem">
+            Peers
+          </Typography>
+          <MuiTooltip
+            title={
+              <Typography variant="body2">
+                Peer statistics are only supported in the Rust client, refer to&nbsp;
+                <Link
+                  underline="hover"
+                  href="https://github.com/dragonflyoss/client"
+                  target="_blank"
+                  style={{ color: 'var(--palette-menu-color)' }}
+                >
+                  dragonflyoss/client
+                </Link>
+                .
+              </Typography>
+            }
+            placement="top"
+          >
+            <HelpOutlineOutlinedIcon className={styles.descriptionIcon} />
+          </MuiTooltip>
+        </Box>
+        <Box>
+          <Button
+            id="refresh"
+            disabled={disabled}
+            size="small"
+            sx={{
+              background: 'var(--palette-button-color)',
+              ':hover': {
+                backgroundColor: 'var(--palette-button-color)',
+                borderColor: 'var(--palette-button-color)',
+              },
+              color: 'var(--palette-button-text-color)',
+              mr: '1rem',
+            }}
+            variant="contained"
+            onClick={() => {
+              setOpenRefresh(true);
+            }}
+            startIcon={
+              refresh ? <RefreshLoading className={styles.refreshIcon} /> : <Refresh className={styles.refreshIcon} />
+            }
+          >
+            refresh
+          </Button>
+          <Button
+            id="export"
+            size="small"
+            sx={{
+              background: 'var(--palette-button-color)',
+              ':hover': {
+                backgroundColor: 'var(--palette-button-color)',
+                borderColor: 'var(--palette-button-color)',
+              },
+              color: 'var(--palette-button-text-color)',
+            }}
+            variant="contained"
+            onClick={() => {
+              setOpenExport(true);
+            }}
+            startIcon={<GetAppIcon />}
+          >
+            Export
+          </Button>
+        </Box>
+      </Box>
+      <Box className={styles.navigationContainer}>
+        <Card className={styles.navigationWrapper}>
+          <Box className={styles.navigationContent}>
+            <Box>
+              <Typography variant="subtitle2" fontFamily="mabry-bold" color="var(--palette-table-title-text-color)">
+                Total
+              </Typography>
+              {isLoading ? (
+                <Skeleton height={40} data-testid="cluster-loading" width="2rem" />
+              ) : (
+                <Typography id="total" variant="h5" fontFamily="mabry-bold" p="0.5rem 0">
+                  {peer.length}
                 </Typography>
-              }
-              placement="top"
-            >
-              <HelpOutlineOutlinedIcon className={styles.descriptionIcon} />
-            </MuiTooltip>
+              )}
+              <Box className={styles.navigationCount}>
+                <span className={styles.navigationCountIcon}>
+                  <Count />
+                </span>
+                <Typography variant="body2" color="var(--palette-table-title-text-color)">
+                  number of peers
+                </Typography>
+              </Box>
+            </Box>
+            <Box className={styles.navigation}></Box>
+            <Total className={styles.navigationIcon} />
           </Box>
-          <Box>
-            <Button
-              id="refresh"
-              disabled={disabled}
-              size="small"
-              sx={{
-                background: 'var(--button-color)',
-                ':hover': {
-                  backgroundColor: 'var(--button-color)',
-                  borderColor: 'var(--button-color)',
-                },
-                mr: '1rem',
-              }}
-              variant="contained"
-              onClick={() => {
-                setOpenRefresh(true);
-              }}
-              startIcon={
-                refresh ? (
-                  <Box component="img" sx={{ width: '1.2rem' }} src="/icons/cluster/peer/refresh-loading.svg" />
-                ) : (
-                  <Box component="img" sx={{ width: '1.2rem' }} src="/icons/cluster/peer/refresh.svg" />
-                )
-              }
-            >
-              refresh
-            </Button>
-            <Button
-              id="export"
-              size="small"
-              sx={{
-                background: 'var(--button-color)',
-                ':hover': {
-                  backgroundColor: 'var(--button-color)',
-                  borderColor: 'var(--button-color)',
-                },
-              }}
-              variant="contained"
-              onClick={() => {
-                setOpenExport(true);
-              }}
-              startIcon={<GetAppIcon />}
-            >
-              Export
-            </Button>
+        </Card>
+        <Card className={styles.navigationWrapper}>
+          <Box className={styles.navigationContent}>
+            <Box>
+              <Typography variant="subtitle2" fontFamily="mabry-bold" color="var(--palette-table-title-text-color)">
+                Git Version
+              </Typography>
+              {isLoading ? (
+                <Skeleton height={40} data-testid="cluster-loading" width="2rem" />
+              ) : (
+                <Typography id="git-version" variant="h5" fontFamily="mabry-bold" p="0.5rem 0">
+                  {gitVersionCount}
+                </Typography>
+              )}
+              <Box className={styles.navigationCount}>
+                <span className={styles.navigationCountIcon}>
+                  <Count />
+                </span>
+                <Typography variant="body2" color="var(--palette-table-title-text-color)">
+                  number of git versions
+                </Typography>
+              </Box>
+            </Box>
+            <Box className={styles.navigation} />
+            <GitVersion className={styles.navigationIcon} />
           </Box>
-        </Box>
-        <Box sx={{ display: 'flex', mb: '3rem' }}>
-          <Box sx={{ width: '33.33%', mr: '1.6rem' }}>
-            <Card className={styles.navigationWrapper}>
-              <Box className={styles.navigationContent}>
+        </Card>
+        <Card className={styles.navigationWrapper}>
+          <Box className={styles.navigationContent}>
+            <Box>
+              <Typography variant="subtitle2" fontFamily="mabry-bold" color="var(--palette-table-title-text-color)">
+                Git Commit
+              </Typography>
+              {isLoading ? (
+                <Skeleton height={40} data-testid="cluster-loading" width="2rem" />
+              ) : (
+                <Typography id="git-commit" variant="h5" fontFamily="mabry-bold" p="0.5rem 0">
+                  {gitCommitCount}
+                </Typography>
+              )}
+              <Box className={styles.navigationCount}>
+                <span className={styles.navigationCountIcon}>
+                  <Count />
+                </span>
+                <Typography variant="body2" color="var(--palette-table-title-text-color)">
+                  number of git commits
+                </Typography>
+              </Box>
+            </Box>
+            <Box className={styles.navigation} />
+            <GitCommit className={styles.navigationIcon} />
+          </Box>
+        </Card>
+      </Box>
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', justifyContent: 'space-between' }}>
+        <Box className={styles.visualizationWrapper}>
+          <Box className={styles.dashboard}>
+            <Card className={styles.barContainer}>
+              <Box className={styles.barTitle}>
                 <Box>
-                  <Typography variant="subtitle1" fontFamily="mabry-bold" color="#637381">
-                    Total
+                  <Typography variant="subtitle1" component="span" sx={{ fontFamily: 'mabry-bold' }}>
+                    Peer Statistics&nbsp;
                   </Typography>
-                  {isLoading ? (
-                    <Skeleton data-testid="cluster-loading" width="2rem" />
-                  ) : (
-                    <Typography id="total" variant="h5" fontFamily="mabry-bold" p="0.5rem 0">
-                      {peer.length}
-                    </Typography>
-                  )}
-                  <Typography variant="body2" color="var(--table-title-text-color)">
-                    number of peers
+                  <Typography variant="subtitle1" component="span" sx={{ fontFamily: 'mabry-bold', color: '#8a8a8a' }}>
+                    by Git Version
                   </Typography>
                 </Box>
-                <Box className={styles.navigation}></Box>
-                <Box component="img" className={styles.navigationIcon} src="/icons/cluster/peer/total.svg" />
+                <MuiTooltip title="Number of peer under different git version" placement="top">
+                  <HelpOutlineOutlinedIcon className={styles.descriptionIcon} />
+                </MuiTooltip>
+              </Box>
+              <Box className={styles.barContent}>
+                <Bar options={barOptions} data={gitVersionBar} />
               </Box>
             </Card>
-          </Box>
-          <Box sx={{ width: '33.33%', mr: '1.6rem' }}>
-            <Card className={styles.navigationWrapper}>
-              <Box className={styles.navigationContent}>
-                <Box>
-                  <Typography variant="subtitle1" fontFamily="mabry-bold" color="#637381">
-                    Git Version
-                  </Typography>
-                  {isLoading ? (
-                    <Skeleton data-testid="cluster-loading" width="2rem" />
-                  ) : (
-                    <Typography id="git-version" variant="h5" fontFamily="mabry-bold" p="0.5rem 0">
-                      {gitVersionCount}
-                    </Typography>
-                  )}
-                  <Typography variant="body2" color="var(--table-title-text-color)">
-                    number of git versions
-                  </Typography>
-                </Box>
-                <Box className={styles.navigation} />
-                <Box component="img" className={styles.navigationIcon} src="/icons/cluster/peer/git-versions.svg" />
-              </Box>
-            </Card>
-          </Box>
-          <Box sx={{ width: '33.33%' }}>
-            <Card className={styles.navigationWrapper}>
-              <Box className={styles.navigationContent}>
-                <Box>
-                  <Typography variant="subtitle1" fontFamily="mabry-bold" color="#637381">
-                    Git Commit
-                  </Typography>
-                  {isLoading ? (
-                    <Skeleton data-testid="cluster-loading" width="2rem" />
-                  ) : (
-                    <Typography id="git-commit" variant="h5" fontFamily="mabry-bold" p="0.5rem 0">
-                      {gitCommitCount}
-                    </Typography>
-                  )}
-                  <Typography variant="body2" color="var(--table-title-text-color)">
-                    number of git commits
-                  </Typography>
-                </Box>
-                <Box className={styles.navigation} />
-                <Box component="img" className={styles.navigationIcon} src="/icons/cluster/peer/git-commits.svg" />
-              </Box>
-            </Card>
-          </Box>
-        </Box>
-        <Box sx={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', justifyContent: 'space-between' }}>
-          <Box className={styles.visualizationWrapper}>
-            <Box className={styles.dashboard}>
-              <Card className={styles.barContainer}>
-                <Box className={styles.barTitle}>
+            <Card className={styles.doughnutContainer}>
+              <Box>
+                <Box className={styles.doughnutTitle}>
                   <Box>
-                    <Typography variant="subtitle1" component="span" sx={{ fontFamily: 'mabry-bold' }}>
+                    <Typography variant="subtitle2" component="span" sx={{ fontFamily: 'mabry-bold' }}>
                       Peer Statistics&nbsp;
                     </Typography>
                     <Typography
-                      variant="subtitle1"
+                      variant="subtitle2"
                       component="span"
                       sx={{ fontFamily: 'mabry-bold', color: '#8a8a8a' }}
                     >
                       by Git Version
                     </Typography>
                   </Box>
-                  <MuiTooltip title="Number of peer under different git version" placement="top">
+                  <MuiTooltip title="Number of peer and active proportion under different git version" placement="top">
                     <HelpOutlineOutlinedIcon className={styles.descriptionIcon} />
                   </MuiTooltip>
                 </Box>
-                <Box className={styles.barContent}>
-                  <Bar options={barOptions} data={gitVersionBar} />
+                <Divider className={styles.divider} />
+                <Box className={styles.pieWrapper}>
+                  <Pie data={gitVersionDoughnut} options={doughnutOptions} />
                 </Box>
-              </Card>
-              <Card className={styles.doughnutContainer}>
-                <Box>
-                  <Box className={styles.doughnutTitle}>
-                    <Box>
-                      <Typography variant="subtitle2" component="span" sx={{ fontFamily: 'mabry-bold' }}>
-                        Peer Statistics&nbsp;
-                      </Typography>
-                      <Typography
-                        variant="subtitle2"
-                        component="span"
-                        sx={{ fontFamily: 'mabry-bold', color: '#8a8a8a' }}
-                      >
-                        by Git Version
-                      </Typography>
-                    </Box>
-                    <MuiTooltip
-                      title="Number of peer and active proportion under different git version"
-                      placement="top"
-                    >
-                      <HelpOutlineOutlinedIcon className={styles.descriptionIcon} />
-                    </MuiTooltip>
-                  </Box>
-                  <Divider className={styles.divider} />
-                  <Box className={styles.pieWrapper}>
-                    <Pie data={gitVersionDoughnut} options={doughnutOptions} />
+              </Box>
+              <Box className={styles.activeContainer}>
+                <Active className={styles.activeIcon} />
+                <Box sx={{ width: '100%' }}>
+                  <Box className={styles.activeContent}>
+                    <Typography variant="subtitle2" fontFamily="mabry-light">
+                      Active
+                    </Typography>
+                    <Typography id="git-version-active" variant="subtitle1" fontFamily="mabry-bold">
+                      {isLoading ? <Skeleton width="2rem" /> : gitVersionActive ? `${gitVersionActive}%` : '0'}
+                    </Typography>
                   </Box>
+                  <LinearProgress
+                    sx={{
+                      bgcolor: '#e0e0e0',
+                      '& .MuiLinearProgress-bar': {
+                        bgcolor: 'var(--palette-description-color)',
+                      },
+                    }}
+                    variant="determinate"
+                    value={gitVersionActive ? gitVersionActive : 0}
+                  />
                 </Box>
-                <Box className={styles.activeContainer}>
-                  <Box component="img" className={styles.activeIcon} src="/icons/cluster/peer/active.svg" />
-                  <Box sx={{ width: '100%' }}>
-                    <Box className={styles.activeContent}>
-                      <Typography variant="subtitle2" fontFamily="mabry-light">
-                        Active
-                      </Typography>
-                      <Typography id="git-version-active" variant="subtitle1" fontFamily="mabry-bold">
-                        {isLoading ? <Skeleton width="2rem" /> : gitVersionActive ? `${gitVersionActive}%` : '0'}
-                      </Typography>
-                    </Box>
-                    <LinearProgress
-                      sx={{
-                        bgcolor: '#e0e0e0',
-                        '& .MuiLinearProgress-bar': {
-                          bgcolor: 'var(--description-color)',
-                        },
-                      }}
-                      variant="determinate"
-                      value={gitVersionActive ? gitVersionActive : 0}
-                    />
-                  </Box>
-                </Box>
-              </Card>
+              </Box>
+            </Card>
+          </Box>
+        </Box>
+        <Box className={styles.visualizationWrapperCommit}>
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', mb: '1rem' }}>
+            <Box>
+              <FormControl sx={{ width: '10rem' }} size="small">
+                <InputLabel id="git-version-select">Git Version</InputLabel>
+                <Select
+                  id="git-version-select"
+                  value={selectedGitCommitByVersion}
+                  label="changeGitCommit"
+                  onChange={(e) => {
+                    setSelectedGitGitCommitByVersion(e.target.value);
+                  }}
+                >
+                  <Typography variant="body2" fontFamily="mabry-bold" sx={{ ml: '1rem', mt: '0.4rem', mb: '0.4rem' }}>
+                    Filter by git version
+                  </Typography>
+                  <Divider />
+                  <MenuItem key="All" value="All">
+                    All
+                  </MenuItem>
+                  {selectedGitVersions.map((item) => (
+                    <MenuItem key={item} value={item}>
+                      {item}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
             </Box>
           </Box>
-          <Box className={styles.visualizationWrapperCommit}>
-            <Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', mb: '1rem' }}>
-              <Box>
-                <FormControl sx={{ width: '10rem' }} size="small">
-                  <InputLabel id="git-version-select">Git Version</InputLabel>
-                  <Select
-                    id="git-version-select"
-                    value={selectedGitCommitByVersion}
-                    label="changeGitCommit"
-                    onChange={(e) => {
-                      setSelectedGitGitCommitByVersion(e.target.value);
-                    }}
-                  >
-                    <Typography variant="body2" fontFamily="mabry-bold" sx={{ ml: '1rem', mt: '0.4rem', mb: '0.4rem' }}>
-                      Filter by git version
-                    </Typography>
-                    <Divider />
-                    <MenuItem key="All" value="All">
-                      All
-                    </MenuItem>
-                    {selectedGitVersions.map((item) => (
-                      <MenuItem key={item} value={item}>
-                        {item}
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
+          <Box className={styles.dashboard}>
+            <Card className={styles.barContainer}>
+              <Box className={styles.barTitle}>
+                <Box>
+                  <Typography variant="subtitle1" component="span" sx={{ fontFamily: 'mabry-bold' }}>
+                    Peer Statistics&nbsp;
+                  </Typography>
+                  <Typography variant="subtitle1" component="span" sx={{ fontFamily: 'mabry-bold', color: '#8a8a8a' }}>
+                    by Git Commit
+                  </Typography>
+                </Box>
+                <MuiTooltip title="Number of peer under different git commit" placement="top">
+                  <HelpOutlineOutlinedIcon className={styles.descriptionIcon} />
+                </MuiTooltip>
               </Box>
-            </Box>
-            <Box className={styles.dashboard}>
-              <Card className={styles.barContainer}>
-                <Box className={styles.barTitle}>
+              <Box className={styles.barContent}>
+                <Bar options={barOptions} data={gitCommitBar} />
+              </Box>
+            </Card>
+            <Card className={styles.doughnutContainer}>
+              <Box>
+                <Box className={styles.doughnutTitle}>
                   <Box>
-                    <Typography variant="subtitle1" component="span" sx={{ fontFamily: 'mabry-bold' }}>
+                    <Typography variant="subtitle2" component="span" sx={{ fontFamily: 'mabry-bold' }}>
                       Peer Statistics&nbsp;
                     </Typography>
                     <Typography
-                      variant="subtitle1"
+                      variant="subtitle2"
                       component="span"
                       sx={{ fontFamily: 'mabry-bold', color: '#8a8a8a' }}
                     >
                       by Git Commit
                     </Typography>
                   </Box>
-                  <MuiTooltip title="Number of peer under different git commit" placement="top">
+                  <MuiTooltip title="Number of peer and active proportion under different git commit" placement="top">
                     <HelpOutlineOutlinedIcon className={styles.descriptionIcon} />
                   </MuiTooltip>
                 </Box>
-                <Box className={styles.barContent}>
-                  <Bar options={barOptions} data={gitCommitBar} />
+                <Divider className={styles.divider} />
+                <Box className={styles.pieWrapper}>
+                  <Pie data={gitCommitDoughnut} options={doughnutOptions} />
                 </Box>
-              </Card>
-              <Card className={styles.doughnutContainer}>
-                <Box>
-                  <Box className={styles.doughnutTitle}>
-                    <Box>
-                      <Typography variant="subtitle2" component="span" sx={{ fontFamily: 'mabry-bold' }}>
-                        Peer Statistics&nbsp;
-                      </Typography>
-                      <Typography
-                        variant="subtitle2"
-                        component="span"
-                        sx={{ fontFamily: 'mabry-bold', color: '#8a8a8a' }}
-                      >
-                        by Git Commit
-                      </Typography>
-                    </Box>
-                    <MuiTooltip title="Number of peer and active proportion under different git commit" placement="top">
-                      <HelpOutlineOutlinedIcon className={styles.descriptionIcon} />
-                    </MuiTooltip>
-                  </Box>
-                  <Divider className={styles.divider} />
-                  <Box className={styles.pieWrapper}>
-                    <Pie data={gitCommitDoughnut} options={doughnutOptions} />
+              </Box>
+              <Box className={styles.activeContainer}>
+                <Active className={styles.activeIcon} />
+                <Box sx={{ width: '100%' }}>
+                  <Box className={styles.activeContent}>
+                    <Typography variant="subtitle2" fontFamily="mabry-light">
+                      Active
+                    </Typography>
+                    <Typography id="git-commit-active" variant="subtitle1" fontFamily="mabry-bold">
+                      {isLoading ? <Skeleton width="2rem" /> : gitCommitActive ? `${gitCommitActive}%` : '0'}
+                    </Typography>
                   </Box>
+                  <LinearProgress
+                    sx={{
+                      bgcolor: '#e0e0e0',
+                      '& .MuiLinearProgress-bar': {
+                        bgcolor: 'var(--palette-description-color)',
+                      },
+                    }}
+                    variant="determinate"
+                    value={gitCommitActive}
+                  />
                 </Box>
-                <Box className={styles.activeContainer}>
-                  <Box component="img" className={styles.activeIcon} src="/icons/cluster/peer/active.svg" />
-                  <Box sx={{ width: '100%' }}>
-                    <Box className={styles.activeContent}>
-                      <Typography variant="subtitle2" fontFamily="mabry-light">
-                        Active
-                      </Typography>
-                      <Typography id="git-commit-active" variant="subtitle1" fontFamily="mabry-bold">
-                        {isLoading ? <Skeleton width="2rem" /> : gitCommitActive ? `${gitCommitActive}%` : '0'}
-                      </Typography>
-                    </Box>
-                    <LinearProgress
-                      sx={{
-                        bgcolor: '#e0e0e0',
-                        '& .MuiLinearProgress-bar': {
-                          bgcolor: 'var(--description-color)',
-                        },
-                      }}
-                      variant="determinate"
-                      value={gitCommitActive}
-                    />
-                  </Box>
-                </Box>
-              </Card>
-            </Box>
+              </Box>
+            </Card>
           </Box>
         </Box>
-        <Dialog
-          open={openExport}
-          onClose={handleClose}
-          aria-labelledby="alert-dialog-title"
-          aria-describedby="alert-dialog-description"
-          sx={{
-            '& .MuiDialog-paper': {
-              minWidth: '32rem',
-            },
-          }}
-        >
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', p: '1rem' }}>
+      </Box>
+      <Dialog
+        open={openExport}
+        onClose={handleClose}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+        sx={{
+          '& .MuiDialog-paper': {
+            minWidth: '32rem',
+          },
+        }}
+      >
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', p: '1rem' }}>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Export className={styles.exportIcon} />
+            <Typography variant="h6" fontFamily="mabry-bold" pl="0.5rem">
+              Export
+            </Typography>
+          </Box>
+          <IconButton
+            aria-label="close"
+            id="close-export"
+            onClick={() => {
+              setOpenExport(false);
+              setExportSelectedVersion('All');
+              setExportSelectedCommit('All');
+            }}
+            sx={{
+              color: (theme) => theme.palette.grey[500],
+              p: 0,
+            }}
+          >
+            <CloseIcon />
+          </IconButton>
+        </Box>
+        <Divider />
+        <DialogContent>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              flexDirection: 'column',
+              pb: '1rem',
+            }}
+          >
+            <ExportFile className={styles.exportFileICon} />
+            <Typography variant="subtitle1" fontFamily="mabry-bold">
+              Export Your Data With Fun
+            </Typography>
+          </Box>
+          <Box
+            noValidate
+            component="form"
+            sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', mt: '1rem' }}
+          >
             <Box sx={{ display: 'flex', alignItems: 'center' }}>
-              <Box component="img" className={styles.exportIcon} src="/icons/cluster/peer/export.svg" />
-              <Typography variant="h6" fontFamily="mabry-bold" pl="0.5rem">
-                Export
-              </Typography>
+              <FormControl sx={{ width: '14rem' }} size="small">
+                <InputLabel id="git-version-label">Git Version</InputLabel>
+                <Select
+                  id="export-git-version"
+                  value={exportSelectedVersion}
+                  label="changeGitVersion"
+                  onChange={(e) => setExportSelectedVersion(e.target.value)}
+                >
+                  <Typography variant="body1" fontFamily="mabry-bold" sx={{ ml: '1rem', mt: '0.4rem', mb: '0.4rem' }}>
+                    Filter by git version
+                  </Typography>
+                  <Divider />
+                  <MenuItem id="all" key="All" value="All">
+                    All
+                  </MenuItem>
+                  {exportSelectedGitVersion.map((item) => (
+                    <MenuItem id={`select-${item}`} key={item} value={item}>
+                      {item}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+              <FormControl sx={{ width: '14rem', ml: '1rem' }} size="small">
+                <InputLabel id="git-commit-label">Git Commit</InputLabel>
+                <Select
+                  id="export-git-commit"
+                  value={exportSelectedCommit}
+                  label="changeGitCommit"
+                  onChange={(e) => setExportSelectedCommit(e.target.value)}
+                >
+                  <Typography variant="body1" fontFamily="mabry-bold" sx={{ ml: '1rem', mt: '0.4rem', mb: '0.4rem' }}>
+                    Filter by git commit
+                  </Typography>
+                  <Divider />
+                  <MenuItem key="All" value="All">
+                    All
+                  </MenuItem>
+                  {exportSelectedGitCommit.map((item) => (
+                    <MenuItem id={`select-${item}`} key={item} value={item}>
+                      {item}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
             </Box>
-            <IconButton
-              aria-label="close"
-              id="close-export"
+          </Box>
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', pt: '2rem' }}>
+            <CancelLoadingButton
+              id="cancel"
+              loading={loadingButton}
               onClick={() => {
                 setOpenExport(false);
                 setExportSelectedVersion('All');
                 setExportSelectedCommit('All');
               }}
-              sx={{
-                color: (theme) => theme.palette.grey[500],
-                p: 0,
-              }}
-            >
-              <CloseIcon />
-            </IconButton>
+            />
+            <SavelLoadingButton
+              loading={loadingButton}
+              endIcon={<CheckCircleIcon />}
+              id="save"
+              text="Save"
+              onClick={ExportCSV}
+            />
           </Box>
-          <Divider />
-          <DialogContent>
-            <Box
-              sx={{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                flexDirection: 'column',
-                pb: '1rem',
-              }}
-            >
-              <Box component="img" sx={{ width: '2.8rem', pb: '0.8rem' }} src="/icons/cluster/peer/export-file.svg" />
-              <Typography variant="subtitle1" fontFamily="mabry-bold">
-                Export Your Data With Fun
+        </DialogContent>
+      </Dialog>
+      <Dialog
+        open={openRefresh}
+        onClose={handleClose}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+        sx={{
+          '& .MuiDialog-paper': {
+            minWidth: '34rem',
+          },
+        }}
+      >
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', p: '1rem' }}>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <RefreshDialog className={styles.exportIcon} />
+            <Typography id="refresh-title" variant="h6" fontFamily="mabry-bold" pl="0.5rem">
+              Refresh
+            </Typography>
+          </Box>
+          <IconButton
+            aria-label="close"
+            id="close-delete-icon"
+            onClick={() => {
+              setOpenRefresh(false);
+            }}
+            sx={{
+              color: (theme) => theme.palette.grey[500],
+              p: 0,
+            }}
+          >
+            <CloseIcon />
+          </IconButton>
+        </Box>
+        <Divider />
+        <DialogContent>
+          <Box display="flex" alignItems="flex-start" pb="1rem">
+            <DeleteWarning className={styles.deleteWarning} />
+            <Box>
+              <Typography variant="body1" fontFamily="mabry-bold" component="span" sx={{ color: '#D81E06' }}>
+                WARNING:&nbsp;
+              </Typography>
+              <Typography variant="body1" component="span" sx={{ color: '#D81E06' }}>
+                This action CANNOT be undone.
               </Typography>
             </Box>
-            <Box
-              noValidate
-              component="form"
-              sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', mt: '1rem' }}
-            >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                <FormControl sx={{ width: '14rem' }} size="small">
-                  <InputLabel id="git-version-label">Git Version</InputLabel>
-                  <Select
-                    id="export-git-version"
-                    value={exportSelectedVersion}
-                    label="changeGitVersion"
-                    onChange={(e) => setExportSelectedVersion(e.target.value)}
-                  >
-                    <Typography variant="body1" fontFamily="mabry-bold" sx={{ ml: '1rem', mt: '0.4rem', mb: '0.4rem' }}>
-                      Filter by git version
-                    </Typography>
-                    <Divider />
-                    <MenuItem id="all" key="All" value="All">
-                      All
-                    </MenuItem>
-                    {exportSelectedGitVersion.map((item) => (
-                      <MenuItem id={`select-${item}`} key={item} value={item}>
-                        {item}
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
-                <FormControl sx={{ width: '14rem', ml: '1rem' }} size="small">
-                  <InputLabel id="git-commit-label">Git Commit</InputLabel>
-                  <Select
-                    id="export-git-commit"
-                    value={exportSelectedCommit}
-                    label="changeGitCommit"
-                    onChange={(e) => setExportSelectedCommit(e.target.value)}
-                  >
-                    <Typography variant="body1" fontFamily="mabry-bold" sx={{ ml: '1rem', mt: '0.4rem', mb: '0.4rem' }}>
-                      Filter by git commit
-                    </Typography>
-                    <Divider />
-                    <MenuItem key="All" value="All">
-                      All
-                    </MenuItem>
-                    {exportSelectedGitCommit.map((item) => (
-                      <MenuItem id={`select-${item}`} key={item} value={item}>
-                        {item}
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
-              </Box>
-            </Box>
-            <Box sx={{ display: 'flex', justifyContent: 'space-between', pt: '2rem' }}>
-              <CancelLoadingButton
-                id="cancel"
-                loading={loadingButton}
-                onClick={() => {
-                  setOpenExport(false);
-                  setExportSelectedVersion('All');
-                  setExportSelectedCommit('All');
-                }}
-              />
-              <SavelLoadingButton
-                loading={loadingButton}
-                endIcon={<CheckCircleIcon />}
-                id="save"
-                text="Save"
-                onClick={ExportCSV}
-              />
-            </Box>
-          </DialogContent>
-        </Dialog>
-        <Dialog
-          open={openRefresh}
-          onClose={handleClose}
-          aria-labelledby="alert-dialog-title"
-          aria-describedby="alert-dialog-description"
-          sx={{
-            '& .MuiDialog-paper': {
-              minWidth: '34rem',
-            },
-          }}
-        >
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', p: '1rem' }}>
-            <Box sx={{ display: 'flex', alignItems: 'center' }}>
-              <Box component="img" className={styles.exportIcon} src="/icons/cluster/peer/refresh-dialog.svg" />
-              <Typography variant="h6" fontFamily="mabry-bold" pl="0.5rem">
-                Refresh
-              </Typography>
-            </Box>
-            <IconButton
-              aria-label="close"
-              id="close-delete-icon"
+          </Box>
+          The peer data will be forced to refresh.
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', pt: '2rem' }}>
+            <CancelLoadingButton
+              id="cancel"
+              loading={loadingButton}
               onClick={() => {
                 setOpenRefresh(false);
               }}
-              sx={{
-                color: (theme) => theme.palette.grey[500],
-                p: 0,
-              }}
-            >
-              <CloseIcon />
-            </IconButton>
+            />
+            <SavelLoadingButton
+              loading={loadingButton}
+              endIcon={<CheckCircleIcon />}
+              id="save"
+              text="Save"
+              onClick={handleRefresh}
+            />
           </Box>
-          <Divider />
-
-          <DialogContent>
-            <Box display="flex" alignItems="flex-start" pb="1rem">
-              <Box
-                component="img"
-                src="/icons/cluster/delete-warning.svg"
-                sx={{ width: '1.4rem', height: '1.4rem', pr: '0.2rem' }}
-              />
-              <Box>
-                <Typography variant="body1" fontFamily="mabry-bold" component="span" sx={{ color: '#D81E06' }}>
-                  WARNING:&nbsp;
-                </Typography>
-                <Typography variant="body1" component="span" sx={{ color: '#D81E06' }}>
-                  This action CANNOT be undone.
-                </Typography>
-              </Box>
-            </Box>
-            The peer data will be forced to refresh.
-            <Box sx={{ display: 'flex', justifyContent: 'space-between', pt: '2rem' }}>
-              <CancelLoadingButton
-                id="cancel"
-                loading={loadingButton}
-                onClick={() => {
-                  setOpenRefresh(false);
-                }}
-              />
-              <SavelLoadingButton
-                loading={loadingButton}
-                endIcon={<CheckCircleIcon />}
-                id="save"
-                text="Save"
-                onClick={handleRefresh}
-              />
-            </Box>
-          </DialogContent>
-        </Dialog>
-      </Box>
-    </ThemeProvider>
+        </DialogContent>
+      </Dialog>
+    </Box>
   );
 }
diff --git a/src/components/clusters/schedulers/index.module.css b/src/components/clusters/schedulers/index.module.css
index 49fb364..8372f72 100644
--- a/src/components/clusters/schedulers/index.module.css
+++ b/src/components/clusters/schedulers/index.module.css
@@ -12,7 +12,7 @@
 .schedulerInactiveListTitle {
   display: flex;
   padding: 0.8rem 1rem;
-  background-color: var(--table-title-color) !important;
+  background-color: var(--palette-table-title-color) !important;
 }
 
 .noInactiveScheduler {
@@ -26,12 +26,12 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .logHeaderWrapper {
   display: flex;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .deleteInactiveWrapper {
@@ -70,11 +70,16 @@
   justify-content: center;
 }
 
+.featuresHeaderIcon {
+  width: 1.6rem;
+  height: 1.6rem;
+}
+
 .featuresIconWrapper {
   width: 2.4rem;
   height: 2.4rem;
   border-radius: 50%;
-  background-color: #fbfbfb;
+  background-color: var(--palette-white-500Channel);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -85,7 +90,7 @@
   width: 1.8rem;
   height: 1.8rem;
   border-radius: 50%;
-  background-color: #efefef;
+  background-color: var(--palette-white-400Channel);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -94,24 +99,28 @@
 .featuresIcon {
   width: 1rem;
   height: 1rem;
+  color: var(--palette-save-color);
 }
 
 .menu {
-  background-image: url(../../../../public/images/menu/cyan-blur.png), url(../../../../public/images/menu/red-blur.png);
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: var(--palette-background-menu);
+  background-image: url(../../../assets/images/menu/cyan-blur.png), url(../../../assets/images/menu/red-blur.png);
   background-repeat: no-repeat, no-repeat;
   padding: 0.2rem;
   background-size: 50%, 50%;
-  box-shadow: rgba(145, 158, 171, 0.24) 0px 0px 2px 0px, rgba(145, 158, 171, 0.24) -20px 20px 40px -4px;
   transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
   outline: 0px;
   background-position: right top, left bottom;
-  border-radius: 10px;
+  border-radius: var(--menu-border-radius);
   overflow: inherit;
 }
 
+.menuItem {
+  border-radius: var(--menu-border-radius) !important;
+}
+
 .menuItemIcon {
-  color: var(--button-color);
+  color: var(--palette-button-color);
 }
 
 .menuText {
@@ -135,7 +144,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-bottom: 2rem;
+  padding-bottom: 1.5rem;
 }
 
 .idIcon {
@@ -148,6 +157,7 @@
   width: 1rem;
   height: 1rem;
   margin-right: 0.4rem;
+  color: var(--palette-text-color);
 }
 
 .circularProgressWrapper {
@@ -195,6 +205,11 @@
   align-items: center;
 }
 
+.schedulerInactiveTable {
+  font-family: 'mabry-bold';
+  color: var(--palette-table-title-text-color);
+}
+
 .schedulerInactiveHeaderIP {
   width: 25%;
   white-space: nowrap;
@@ -232,7 +247,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5rem;
+  padding: 0.6rem;
 }
 
 .featuresEdit:nth-last-child(2n) {
@@ -308,8 +323,8 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  background-color: rgba(var(--no-data-color) / 0.04) !important;
-  border: dashed 1px rgba(var(--no-data-color) / 0.08);
+  background-color: rgba(var(--palette-no-data-color) / 0.04) !important;
+  border: dashed 1px rgba(var(--palette-no-data-color) / 0.08);
 }
 
 .nodataIcon {
@@ -322,6 +337,13 @@
   font-family: 'mabry-bold';
 }
 
+.navigationContainer {
+  display: grid;
+  gap: calc(1.5rem);
+  grid-template-columns: repeat(3, 1fr);
+  margin-bottom: 1.5rem;
+}
+
 .navigationWrapper {
   padding: 1.2rem;
   position: relative;
@@ -330,33 +352,55 @@
 }
 
 .navigation {
-  top: -3rem;
+  top: -2rem;
   width: 160px;
   z-index: -1;
   height: 160px;
-  right: -5rem;
+  right: -6rem;
   opacity: 0.12;
   border-radius: 24px;
   position: absolute;
   transform: rotate(34deg);
-  background: linear-gradient(to right, #22c55e 0%, rgba(34 197 94 / 0) 100%);
+  background: linear-gradient(to right, var(--palette-text-color) 0%, transparent 100%);
+}
+
+.navigationCount {
+  display: flex;
+  align-items: center;
+}
+
+.navigationCountIcon {
+  background-color: rgba(31, 125, 83, 0.2);
+  color: var(--palette-text-color);
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 0.5rem;
 }
 
 .navigationIcon {
-  width: 2.4rem;
-  height: 2.4rem;
-  top: 1.4rem;
-  right: 1.8rem;
+  width: 2rem;
+  height: 2rem;
+  top: 2.4rem;
+  right: 1.2rem;
   position: absolute;
-}
-
-.tableHeader {
-  color: var(--table-title-text-color);
-  font-family: 'mabry-bold' !important;
+  color: var(--palette-text-color);
 }
 
 .tableRow {
-  border-bottom: dashed var(--palette-divider);
+  border-bottom: dashed var(--palette-palette-divider);
+}
+
+.tableHeader {
+  border-color: var(--palette-palette-divider) !important;
+}
+
+.tableHeaderText {
+  color: var(--palette-table-title-text-color);
+  font-family: 'mabry-bold' !important;
 }
 
 .tableRow:last-child {
@@ -365,7 +409,43 @@
 
 .divider {
   border-width: 0px 0px thin;
-  border-color: var(--palette-divider);
+  border-color: var(--palette-palette-divider);
   border-style: dashed;
   margin: 0;
 }
+
+.deleteInactiveInstances {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+}
+
+.deleteInactiveHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.deleteIcon {
+  width: 1.8rem;
+  height: 1.8rem;
+  margin-right: 0.4rem;
+}
+
+.inactiveTotalIcon {
+  width: 0.6rem;
+  height: 0.6rem;
+}
+
+.deleteWarning {
+  width: 1.4rem;
+  height: 1.4rem;
+  padding-right: 0.2rem;
+}
+
+.failureIcon {
+  width: 1.2rem;
+  height: 1.2rem;
+  margin-right: 0.4rem;
+}
diff --git a/src/components/clusters/schedulers/index.tsx b/src/components/clusters/schedulers/index.tsx
index b15bc2e..72e4728 100644
--- a/src/components/clusters/schedulers/index.tsx
+++ b/src/components/clusters/schedulers/index.tsx
@@ -1,5 +1,4 @@
 import Paper from '@mui/material/Paper';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
 import {
   Alert,
   Box,
@@ -86,20 +85,26 @@ import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import Card from '../../card';
-
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: '#1C293A',
-    },
-    secondary: {
-      main: '#2E8F79',
-    },
-  },
-  typography: {
-    fontFamily: 'mabry-light,sans-serif',
-  },
-});
+import { ReactComponent as Total } from '../../../assets/images/cluster/peer/total.svg';
+import { ReactComponent as Active } from '../../../assets/images/cluster/scheduler/active.svg';
+import { ReactComponent as Inactive } from '../../../assets/images/cluster/scheduler/inactive.svg';
+import { ReactComponent as SelectCard } from '../../../assets/images/cluster/scheduler/card.svg';
+import { ReactComponent as SelectTable } from '../../../assets/images/cluster/scheduler/table.svg';
+import { ReactComponent as ID } from '../../../assets/images/cluster/id.svg';
+import { ReactComponent as Status } from '../../../assets/images/cluster/status.svg';
+import { ReactComponent as IP } from '../../../assets/images/cluster/ip.svg';
+import { ReactComponent as CardFeatures } from '../../../assets/images/cluster/card-features.svg';
+import { ReactComponent as Delete } from '../../../assets/images/cluster/delete.svg';
+import { ReactComponent as IcContent } from '../../../assets/images/cluster/scheduler/ic-content.svg';
+import { ReactComponent as InactiveTotal } from '../../../assets/images/cluster/inactive-total.svg';
+import { ReactComponent as DeleteWarning } from '../../../assets/images/cluster/delete-warning.svg';
+import { ReactComponent as DeleteInactive } from '../../../assets/images/cluster/delete-inactive.svg';
+import { ReactComponent as DeleteInactiveError } from '../../../assets/images/cluster/delete-inactive-error.svg';
+import { ReactComponent as Failure } from '../../../assets/images/job/preheat/failure.svg';
+import { ReactComponent as Features } from '../../../assets/images/cluster/features.svg';
+import { ReactComponent as Preheat } from '../../../assets/images/cluster/preheat.svg';
+import { ReactComponent as Schedule } from '../../../assets/images/cluster/scheduler.svg';
+import { ReactComponent as Count } from '../../../assets/images/cluster/scheduler/number.svg';
 
 ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, Title);
 Chart.defaults.font.family = 'mabry-light';
@@ -123,6 +128,7 @@ function CircularProgressWithLabel(props: LinearProgressProps & { value: number
     </Box>
   );
 }
+
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
   [`& .${toggleButtonGroupClasses.grouped}`]: {
     margin: theme.spacing(0.5),
@@ -566,7 +572,7 @@ export default function ShowCluster() {
   };
 
   return (
-    <ThemeProvider theme={theme}>
+    <Box>
       <Snackbar
         open={successMessage}
         autoHideDuration={3000}
@@ -601,10 +607,9 @@ export default function ShowCluster() {
             }}
             className={styles.deleteButton}
             sx={{
-              '&.MuiButton-root': {
-                backgroundColor: 'var(--button-color)',
-                color: '#fff',
-              },
+              background: 'var(--palette-button-color)',
+              color: 'var(--palette-button-text-color)',
+              ':hover': { backgroundColor: 'var(--palette-hover-button-text-color)' },
             }}
           >
             <DeleteIcon fontSize="small" sx={{ mr: '0.4rem' }} />
@@ -612,82 +617,89 @@ export default function ShowCluster() {
           </Button>
         </MuiTooltip>
       </Box>
-      <Box sx={{ display: 'flex', mb: '2rem' }}>
-        <Box sx={{ width: '33.33%', mr: '1.6rem' }}>
-          <Card className={styles.navigationWrapper}>
-            <Box className={styles.navigationContent}>
-              <Box>
-                <Typography variant="subtitle1" fontFamily="mabry-bold" color="#637381">
-                  Total
+      <Box className={styles.navigationContainer}>
+        <Card className={styles.navigationWrapper}>
+          <Box>
+            <Typography variant="subtitle2" fontFamily="mabry-bold" color="var(--palette-table-title-text-color)">
+              Total
+            </Typography>
+            {isLoading ? (
+              <Box p="0.4rem 0">
+                <Skeleton height={40} data-testid="isloading" width="2rem" />
+              </Box>
+            ) : (
+              <Typography id="total" variant="h5" p="0.5rem 0">
+                {schedulerCount.length}
+              </Typography>
+            )}
+            <Box className={styles.navigationCount}>
+              <span className={styles.navigationCountIcon}>
+                <Count />
+              </span>
+              <Typography variant="body2" color="var(--palette-table-title-text-color)">
+                number of schedulers
+              </Typography>
+            </Box>
+          </Box>
+          <Box className={styles.navigation} />
+          <Total className={styles.navigationIcon} />
+        </Card>
+        <Card className={styles.navigationWrapper}>
+          <Box className={styles.navigationContent}>
+            <Box>
+              <Typography variant="subtitle2" fontFamily="mabry-bold" color="var(--palette-table-title-text-color)">
+                Active
+              </Typography>
+              {isLoading ? (
+                <Box p="0.4rem 0">
+                  <Skeleton height={40} data-testid="isloading" width="2rem" />
+                </Box>
+              ) : (
+                <Typography id="active" variant="h5" p="0.5rem 0">
+                  {numberOfActiveSchedulers}
                 </Typography>
-                {isLoading ? (
-                  <Box p="0.4rem 0">
-                    <Skeleton height={40} data-testid="isloading" width="2rem" />
-                  </Box>
-                ) : (
-                  <Typography id="total" variant="h5" fontFamily="mabry-bold" p="0.5rem 0">
-                    {schedulerCount.length}
-                  </Typography>
-                )}
-                <Typography variant="body2" color="var(--table-title-text-color)">
-                  number of schedulers
+              )}
+              <Box className={styles.navigationCount}>
+                <span className={styles.navigationCountIcon}>
+                  <Count />
+                </span>
+                <Typography variant="body2" color="var(--palette-table-title-text-color)">
+                  number of active schedulers{' '}
                 </Typography>
               </Box>
-              <Box className={styles.navigation} />
-              <Box component="img" className={styles.navigationIcon} src="/icons/cluster/peer/total.svg" />
             </Box>
-          </Card>
-        </Box>
-        <Box sx={{ width: '33.33%', mr: '1.6rem' }}>
-          <Card className={styles.navigationWrapper}>
-            <Box className={styles.navigationContent}>
-              <Box>
-                <Typography variant="subtitle1" fontFamily="mabry-bold" color="#637381">
-                  Active
+            <Box className={styles.navigation} />
+            <Active className={styles.navigationIcon} />
+          </Box>
+        </Card>
+        <Card className={styles.navigationWrapper}>
+          <Box className={styles.navigationContent}>
+            <Box>
+              <Typography variant="subtitle2" fontFamily="mabry-bold" color="var(--palette-table-title-text-color)">
+                Inactive
+              </Typography>
+              {isLoading ? (
+                <Box p="0.4rem 0">
+                  <Skeleton height={40} data-testid="isloading" width="2rem" />
+                </Box>
+              ) : (
+                <Typography id="inactive" variant="h5" p="0.5rem 0">
+                  {numberOfInactiveSchedulers}
                 </Typography>
-                {isLoading ? (
-                  <Box p="0.4rem 0">
-                    <Skeleton height={40} data-testid="isloading" width="2rem" />
-                  </Box>
-                ) : (
-                  <Typography id="active" variant="h5" fontFamily="mabry-bold" p="0.5rem 0">
-                    {numberOfActiveSchedulers}
-                  </Typography>
-                )}
-                <Typography variant="body2" color="var(--table-title-text-color)">
-                  number of active schedulers
-                </Typography>
-              </Box>
-              <Box className={styles.navigation} />
-              <Box component="img" className={styles.navigationIcon} src="/icons/cluster/scheduler/active.svg" />
-            </Box>
-          </Card>
-        </Box>
-        <Box sx={{ width: '33.33%' }}>
-          <Card className={styles.navigationWrapper}>
-            <Box className={styles.navigationContent}>
-              <Box>
-                <Typography variant="subtitle1" fontFamily="mabry-bold" color="#637381">
-                  Inactive
-                </Typography>
-                {isLoading ? (
-                  <Box p="0.4rem 0">
-                    <Skeleton height={40} data-testid="isloading" width="2rem" />
-                  </Box>
-                ) : (
-                  <Typography id="inactive" variant="h5" fontFamily="mabry-bold" p="0.5rem 0">
-                    {numberOfInactiveSchedulers}
-                  </Typography>
-                )}
-                <Typography variant="body2" color="var(--table-title-text-color)">
+              )}
+              <Box className={styles.navigationCount}>
+                <span className={styles.navigationCountIcon}>
+                  <Count />
+                </span>
+                <Typography variant="body2" color="var(--palette-table-title-text-color)">
                   number of inactive schedulers
                 </Typography>
               </Box>
-              <Box className={styles.navigation} />
-              <Box component="img" className={styles.navigationIcon} src="/icons/cluster/scheduler/inactive.svg" />
             </Box>
-          </Card>
-        </Box>
+            <Box className={styles.navigation} />
+            <Inactive className={styles.navigationIcon} />
+          </Box>
+        </Card>
       </Box>
       <Box className={styles.searchWrapper}>
         <Stack spacing={2} sx={{ width: '20rem' }}>
@@ -740,7 +752,7 @@ export default function ShowCluster() {
           />
         </Stack>
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          <List component="nav" aria-label="Device settings" sx={{ bgcolor: 'background.paper' }}>
+          <List component="nav" aria-label="Device settings">
             <ListItemButton
               id="lock-button"
               aria-haspopup="listbox"
@@ -767,6 +779,10 @@ export default function ShowCluster() {
               role: 'listbox',
             }}
             sx={{
+              '& .MuiMenu-paper': {
+                boxShadow: 'var(--custom-shadows-dropdown)',
+                borderRadius: '0.6rem',
+              },
               '& .MuiMenu-list': {
                 p: 0,
                 width: '10rem',
@@ -779,7 +795,12 @@ export default function ShowCluster() {
               </Typography>
               <Divider sx={{ mb: '0.2rem' }} />
               {statusList.map((item, index) => (
-                <MenuItem key={item.name} value={item.name} onClick={() => handleMenuItemClick(item)}>
+                <MenuItem
+                  className={styles.menuItem}
+                  key={item.name}
+                  value={item.name}
+                  onClick={() => handleMenuItemClick(item)}
+                >
                   {item.lable}
                 </MenuItem>
               ))}
@@ -792,6 +813,7 @@ export default function ShowCluster() {
               border: `1px solid var(--palette-action-hover)`,
               flexWrap: 'wrap',
               ml: '1rem',
+              backgroundColor: 'var(--palette-background-paper)',
             })}
           >
             <StyledToggleButtonGroup
@@ -802,10 +824,10 @@ export default function ShowCluster() {
               aria-label="text alignment"
             >
               <ToggleButton id="card" value="card" aria-label="centered">
-                <Box component="img" src="/icons/cluster/scheduler/card.svg" />
+                <SelectCard />
               </ToggleButton>
               <ToggleButton id="table" value="table" aria-label="left aligned">
-                <Box component="img" src="/icons/cluster/scheduler/table.svg" />
+                <SelectTable />
               </ToggleButton>
             </StyledToggleButtonGroup>
           </Paper>
@@ -816,9 +838,9 @@ export default function ShowCluster() {
           {isLoading ? (
             <Card className={styles.loadingCard}>
               <Box className={styles.clusterListContent}>
-                <Box p="1.2rem 1.2rem 0 1.2rem">
+                <Box p="1.2rem">
                   <Box display="flex" mb="0.5rem">
-                    <img className={styles.idIcon} src="/icons/cluster/id.svg" alt="" />
+                    <ID className={styles.idIcon} />
                     <Skeleton data-testid="isloading" sx={{ width: '1rem' }} />
                   </Box>
                   <Typography variant="h6" mb="0.5rem" className={styles.nameText}>
@@ -831,12 +853,11 @@ export default function ShowCluster() {
                 <Divider
                   sx={{
                     borderStyle: 'dashed',
-                    borderColor: 'var(--palette-divider)',
+                    borderColor: 'var(--palette-palette-divider)',
                     borderWidth: '0px 0px thin',
-                    m: '1rem 0',
                   }}
                 />
-                <Box p="0 1.2rem 1.2rem 1.2rem">
+                <Box p="1.2rem">
                   <Skeleton data-testid="isloading" sx={{ width: '4rem', height: '1.4rem', mb: '0.8rem' }} />
                   <Skeleton data-testid="isloading" sx={{ width: '6rem' }} />
                 </Box>
@@ -847,7 +868,7 @@ export default function ShowCluster() {
               {Array.isArray(allSchedulers) &&
                 allSchedulers.map((item: any) => (
                   <Card className={styles.card}>
-                    <Box p="1.5rem 1.5rem 1rem 1.5rem" position="relative">
+                    <Box p="1.2rem" position="relative">
                       <IconButton
                         id={`operation-${item?.id}`}
                         onClick={(event: any) => {
@@ -861,7 +882,7 @@ export default function ShowCluster() {
                         aria-expanded={Boolean(schedulerAnchorElement) ? 'true' : undefined}
                         className={styles.moreVertIcon}
                       >
-                        <MoreVertIcon color="action" />
+                        <MoreVertIcon sx={{ color: 'var(--palette-color)' }} />
                       </IconButton>
                       <Menu
                         anchorEl={schedulerAnchorElement}
@@ -878,18 +899,18 @@ export default function ShowCluster() {
                         }}
                         sx={{
                           '& .MuiMenu-paper': {
-                            boxShadow:
-                              '0 0.075rem 0.2rem -0.0625rem #32325d40, 0 0.0625rem 0.0145rem -0.0625rem #0000004d;',
+                            boxShadow: 'var(--custom-shadows-dropdown)',
+                            borderRadius: '0.6rem',
                           },
                           '& .MuiMenu-list': {
-                            p: 0,
                             width: '11rem',
+                            p: '0',
                           },
-                          right: 0,
                         }}
                       >
                         <Box className={styles.menu}>
                           <MenuItem
+                            className={styles.menuItem}
                             id={`view-${schedulerSelectedRow?.id}`}
                             onClick={() => {
                               navigate(`/clusters/${params.id}/schedulers/${schedulerSelectedRow?.id}`);
@@ -905,6 +926,7 @@ export default function ShowCluster() {
                           </MenuItem>
                           {schedulerFeatures && schedulerFeatures.length > 0 ? (
                             <MenuItem
+                              className={styles.menuItem}
                               id={`edit-${schedulerSelectedRow?.id}`}
                               onClick={() => {
                                 setOpenSchedulerEditFeatures(true);
@@ -922,6 +944,7 @@ export default function ShowCluster() {
                             ''
                           )}
                           <MenuItem
+                            className={styles.menuItem}
                             id={`delete-${schedulerSelectedRow?.id}`}
                             onClick={() => {
                               openHandleScheduler(schedulerSelectedRow);
@@ -929,16 +952,20 @@ export default function ShowCluster() {
                             }}
                           >
                             <ListItemIcon>
-                              <DeleteIcon fontSize="small" sx={{ color: 'var(--delete-button-color)' }} />
+                              <DeleteIcon fontSize="small" sx={{ color: 'var(--palette-delete-button-color)' }} />
                             </ListItemIcon>
-                            <Typography variant="body2" className={styles.menuText} color="var(--delete-button-color)">
+                            <Typography
+                              variant="body2"
+                              className={styles.menuText}
+                              color="var(--palette-delete-button-color)"
+                            >
                               Delete
                             </Typography>
                           </MenuItem>
                         </Box>
                       </Menu>
                       <Box display="flex">
-                        <img className={styles.idIcon} src="/icons/cluster/id.svg" alt="" />
+                        <ID className={styles.idIcon} />
                         {isLoading ? (
                           <Skeleton data-testid="isloading" sx={{ width: '1rem' }} />
                         ) : (
@@ -964,7 +991,7 @@ export default function ShowCluster() {
                         </RouterLink>
                       </MuiTooltip>
                       <Box sx={{ display: 'flex', width: '50%', alignItems: 'center' }}>
-                        <Box component="img" className={styles.statusIcon} src="/icons/cluster/status.svg" />
+                        <Status className={styles.statusIcon} />
                         <Chip
                           label={_.upperFirst(item?.state) || ''}
                           size="small"
@@ -974,10 +1001,12 @@ export default function ShowCluster() {
                             borderRadius: '0.2rem',
                             backgroundColor:
                               item?.state === 'active'
-                                ? 'var(--menu-background-color)'
+                                ? 'var(--palette-grey-background-color)'
                                 : 'var(--palette-background-inactive)',
                             color:
-                              item?.state === 'active' ? 'var(--description-color)' : 'var(--table-title-text-color)',
+                              item?.state === 'active'
+                                ? 'var(--palette-text-color)'
+                                : 'var(--palette-table-title-text-color)',
                             border: 0,
                             fontFamily: 'mabry-bold',
                           }}
@@ -987,14 +1016,14 @@ export default function ShowCluster() {
                     <Divider
                       sx={{
                         borderStyle: 'dashed',
-                        borderColor: 'var(--palette-divider)',
+                        borderColor: 'var(--palette-palette-divider)',
                         borderWidth: '0px 0px thin',
                       }}
                     />
-                    <Box p="1.5rem">
+                    <Box p="1.2rem">
                       <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
                         <Box sx={{ display: 'flex', alignItems: 'center', mb: '1rem' }}>
-                          <Box component="img" className={styles.statusIcon} src="/icons/cluster/ip.svg" />
+                          <IP className={styles.statusIcon} />
                           <Typography
                             id={`card-ip-${item.id}`}
                             variant="caption"
@@ -1004,7 +1033,7 @@ export default function ShowCluster() {
                           </Typography>
                         </Box>
                         <Box sx={{ display: 'flex', width: '100%', alignItems: 'center' }}>
-                          <Box component="img" className={styles.statusIcon} src="/icons/cluster/card-features.svg" />
+                          <CardFeatures className={styles.statusIcon} />
                           <Box className={styles.features} id={`card-features-${item.id}`}>
                             {Array.isArray(item.features) &&
                               item.features.map((features: string, id: any) => (
@@ -1016,7 +1045,7 @@ export default function ShowCluster() {
                                   sx={{
                                     borderRadius: '0.2rem',
                                     background: 'var(--palette-background-inactive)',
-                                    color: 'var(--table-title-text-color)',
+                                    color: 'var(--palette-table-title-text-color)',
                                     mr: '0.4rem',
                                     border: '0',
                                     fontFamily: 'mabry-bold',
@@ -1032,7 +1061,7 @@ export default function ShowCluster() {
             </Box>
           ) : (
             <Card className={styles.noData}>
-              <Box component="img" className={styles.nodataIcon} src="/icons/cluster/scheduler/ic-content.svg" />
+              <IcContent className={styles.nodataIcon} />
               <Typography id="no-scheduler" variant="h6" className={styles.nodataText}>
                 You don't have scheduler cluster.
               </Typography>
@@ -1041,270 +1070,274 @@ export default function ShowCluster() {
         </Box>
       ) : (
         <Card>
-          <Box width="100%">
-            <Table sx={{ minWidth: 650 }} aria-label="a dense table" id="scheduler-table">
-              <TableHead sx={{ backgroundColor: 'var(--table-title-color)' }}>
-                <TableRow>
+          <Table sx={{ minWidth: 650 }} aria-label="a dense table" id="scheduler-table">
+            <TableHead sx={{ backgroundColor: 'var(--palette-table-title-color)' }}>
+              <TableRow>
+                <TableCell align="center" className={styles.tableHeader}>
+                  <Typography variant="subtitle1" className={styles.tableHeaderText}>
+                    ID
+                  </Typography>
+                </TableCell>
+                <TableCell align="center" className={styles.tableHeader}>
+                  <Typography variant="subtitle1" className={styles.tableHeaderText}>
+                    Hostname
+                  </Typography>
+                </TableCell>
+                <TableCell align="center" className={styles.tableHeader}>
+                  <Typography variant="subtitle1" className={styles.tableHeaderText}>
+                    IP
+                  </Typography>
+                </TableCell>
+                <TableCell align="center" className={styles.tableHeader}>
+                  <Typography variant="subtitle1" className={styles.tableHeaderText}>
+                    Port
+                  </Typography>
+                </TableCell>
+                <TableCell align="center" className={styles.tableHeader}>
+                  <Typography variant="subtitle1" className={styles.tableHeaderText}>
+                    Status
+                  </Typography>
+                </TableCell>
+                <TableCell align="center" className={styles.tableHeader}>
+                  <Typography variant="subtitle1" className={styles.tableHeaderText}>
+                    Features
+                  </Typography>
+                </TableCell>
+                <TableCell align="center" className={styles.tableHeader}>
+                  <Typography variant="subtitle1" className={styles.tableHeaderText}>
+                    Operation
+                  </Typography>
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody id="scheduler-table-body" sx={{ border: 'none' }}>
+              {isLoading ? (
+                <TableRow
+                  sx={{
+                    '&:last-child td, &:last-child th': { border: 0 },
+                  }}
+                >
                   <TableCell align="center">
-                    <Typography variant="subtitle1" className={styles.tableHeader}>
-                      ID
-                    </Typography>
+                    <Skeleton data-testid="isloading" />
                   </TableCell>
                   <TableCell align="center">
-                    <Typography variant="subtitle1" className={styles.tableHeader}>
-                      Hostname
-                    </Typography>
+                    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                      <Skeleton data-testid="isloading" width="4rem" />
+                    </Box>
                   </TableCell>
                   <TableCell align="center">
-                    <Typography variant="subtitle1" className={styles.tableHeader}>
-                      IP
-                    </Typography>
+                    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                      <Skeleton data-testid="isloading" width="4rem" />
+                    </Box>
                   </TableCell>
                   <TableCell align="center">
-                    <Typography variant="subtitle1" className={styles.tableHeader}>
-                      Port
-                    </Typography>
+                    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                      <Skeleton data-testid="isloading" width="2rem" />
+                    </Box>
                   </TableCell>
                   <TableCell align="center">
-                    <Typography variant="subtitle1" className={styles.tableHeader}>
-                      Status
-                    </Typography>
+                    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                      <Skeleton data-testid="isloading" width="3.5rem" height="2.6rem" />
+                    </Box>
                   </TableCell>
                   <TableCell align="center">
-                    <Typography variant="subtitle1" className={styles.tableHeader}>
-                      Features
-                    </Typography>
+                    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                      <Skeleton data-testid="isloading" width="3.8rem" height="2.8rem" />
+                    </Box>
                   </TableCell>
                   <TableCell align="center">
-                    <Typography variant="subtitle1" className={styles.tableHeader}>
-                      Operation
-                    </Typography>
+                    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                      <Skeleton data-testid="isloading" width="2.5rem" height="2.5rem" />
+                    </Box>
                   </TableCell>
                 </TableRow>
-              </TableHead>
-              <TableBody id="scheduler-table-body" sx={{ border: 'none' }}>
-                {isLoading ? (
-                  <TableRow
-                    sx={{
-                      '&:last-child td, &:last-child th': { border: 0 },
-                    }}
-                  >
-                    <TableCell align="center">
-                      <Skeleton data-testid="isloading" />
-                    </TableCell>
-                    <TableCell align="center">
-                      <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-                        <Skeleton data-testid="isloading" width="4rem" />
-                      </Box>
-                    </TableCell>
-                    <TableCell align="center">
-                      <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-                        <Skeleton data-testid="isloading" width="4rem" />
-                      </Box>
-                    </TableCell>
-                    <TableCell align="center">
-                      <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-                        <Skeleton data-testid="isloading" width="2rem" />
-                      </Box>
-                    </TableCell>
-                    <TableCell align="center">
-                      <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-                        <Skeleton data-testid="isloading" width="3.5rem" height="2.6rem" />
-                      </Box>
-                    </TableCell>
-                    <TableCell align="center">
-                      <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-                        <Skeleton data-testid="isloading" width="3.8rem" height="2.8rem" />
-                      </Box>
-                    </TableCell>
-                    <TableCell align="center">
-                      <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-                        <Skeleton data-testid="isloading" width="2.5rem" height="2.5rem" />
-                      </Box>
-                    </TableCell>
-                  </TableRow>
-                ) : allSchedulers.length === 0 ? (
-                  <TableCell id="no-scheduler-table" colSpan={9} align="center" sx={{ border: 0 }}>
-                    You don't have scheduler cluster.
-                  </TableCell>
-                ) : (
-                  <>
-                    {Array.isArray(allSchedulers) &&
-                      allSchedulers.map((item: any) => {
-                        return (
-                          <TableRow
-                            key={item?.id}
-                            selected={schedulerSelectedRow === item}
-                            sx={{
-                              '&:last-child td, &:last-child th': { border: 0 },
-                              ':hover': { backgroundColor: 'var(--palette-action-hover)' },
-                            }}
-                            className={styles.tableRow}
-                          >
-                            <TableCell align="center" id={`id-${item?.id}`}>
-                              {item?.id}
-                            </TableCell>
-                            <TableCell align="center" id={`hostname-${item?.host_name}`}>
-                              <RouterLink
-                                component={Link}
-                                to={`/clusters/${params.id}/schedulers/${item?.id}`}
-                                underline="hover"
-                                sx={{ color: 'var(--description-color)' }}
-                              >
-                                {item?.host_name}
-                              </RouterLink>
-                            </TableCell>
-                            <TableCell align="center" id={`ip-${item?.id}`}>
-                              {item?.ip}
-                            </TableCell>
-                            <TableCell align="center" id={`port-${item?.port}`}>
-                              {item?.port}
-                            </TableCell>
-                            <TableCell align="center">
-                              <Chip
-                                id={`state-${item?.id}`}
-                                label={_.upperFirst(item?.state) || ''}
-                                size="small"
-                                variant="outlined"
-                                sx={{
-                                  borderRadius: '0.2rem',
-                                  backgroundColor:
-                                    item?.state === 'active' ? 'var(--description-color)' : 'var(--button-color)',
-                                  color: item?.state === 'active' ? '#FFFFFF' : '#FFFFFF',
-                                  borderColor:
-                                    item?.state === 'active' ? 'var(--description-color)' : 'var(--button-color)',
-                                  fontWeight: 'bold',
-                                }}
-                              />
-                            </TableCell>
-                            <TableCell align="center" id={`features-${item?.id}`}>
-                              <Box className={styles.features}>
-                                {Array.isArray(item.features) &&
-                                  item.features.map((features: string, id: any) => (
-                                    <Chip
-                                      key={id}
-                                      label={_.upperFirst(features) || ''}
-                                      size="small"
-                                      variant="outlined"
-                                      sx={{
-                                        borderRadius: '0.2rem',
-                                        background: 'var(--button-color)',
-                                        color: '#FFFFFF',
-                                        m: '0 0.4rem',
-                                        borderColor: 'var(--button-color)',
-                                        fontWeight: 'bold',
-                                      }}
-                                    />
-                                  ))}
-                              </Box>
-                            </TableCell>
-                            <TableCell align="center">
-                              <IconButton
-                                id={`operation-${item?.id}`}
-                                onClick={(event: any) => {
-                                  setSchedulerAnchorElement(event.currentTarget);
-                                  setSchedulerSelectedRow(item);
-                                  setSchedulerSelectedID(item.id);
-                                }}
-                                size="small"
-                                aria-controls={Boolean(schedulerAnchorElement) ? item?.host_name : undefined}
-                                aria-haspopup="true"
-                                aria-expanded={Boolean(schedulerAnchorElement) ? 'true' : undefined}
-                              >
-                                <MoreVertIcon color="action" />
-                              </IconButton>
-                              <Menu
-                                anchorEl={schedulerAnchorElement}
-                                id={schedulerSelectedRow?.host_name}
-                                open={Boolean(schedulerAnchorElement)}
-                                onClose={handleClose}
-                                anchorOrigin={{
-                                  vertical: 'bottom',
-                                  horizontal: 'right',
-                                }}
-                                transformOrigin={{
-                                  vertical: 'top',
-                                  horizontal: 'right',
-                                }}
-                                sx={{
-                                  '& .MuiMenu-paper': {
-                                    boxShadow:
-                                      '0 0.075rem 0.2rem -0.0625rem #32325d40, 0 0.0625rem 0.0145rem -0.0625rem #0000004d;',
-                                  },
-                                  '& .MuiMenu-list': {
-                                    p: 0,
-                                    width: '11rem',
-                                  },
-                                }}
-                              >
-                                <Box className={styles.menu}>
-                                  <MenuItem
-                                    id={`view-${schedulerSelectedRow?.host_name}`}
-                                    onClick={() => {
-                                      navigate(`/clusters/${params.id}/schedulers/${schedulerSelectedRow?.id}`);
-                                      setSchedulerAnchorElement(null);
+              ) : allSchedulers.length === 0 ? (
+                <TableCell id="no-scheduler-table" colSpan={9} align="center" sx={{ border: 0 }}>
+                  You don't have scheduler cluster.
+                </TableCell>
+              ) : (
+                <>
+                  {Array.isArray(allSchedulers) &&
+                    allSchedulers.map((item: any) => {
+                      return (
+                        <TableRow
+                          key={item?.id}
+                          selected={schedulerSelectedRow === item}
+                          sx={{
+                            '&:last-child td, &:last-child th': { border: 0 },
+                            ':hover': { backgroundColor: 'var(--palette-action-hover)' },
+                          }}
+                          className={styles.tableRow}
+                        >
+                          <TableCell align="center" id={`id-${item?.id}`}>
+                            {item?.id}
+                          </TableCell>
+                          <TableCell align="center" id={`hostname-${item?.host_name}`}>
+                            <RouterLink
+                              color="inherit"
+                              component={Link}
+                              to={`/clusters/${params.id}/schedulers/${item?.id}`}
+                              underline="hover"
+                              sx={{ color: 'var(--palette-description-color)' }}
+                            >
+                              {item?.host_name}
+                            </RouterLink>
+                          </TableCell>
+                          <TableCell align="center" id={`ip-${item?.id}`}>
+                            {item?.ip}
+                          </TableCell>
+                          <TableCell align="center" id={`port-${item?.port}`}>
+                            {item?.port}
+                          </TableCell>
+                          <TableCell align="center">
+                            <Chip
+                              id={`state-${item?.id}`}
+                              label={_.upperFirst(item?.state) || ''}
+                              size="small"
+                              variant="outlined"
+                              sx={{
+                                borderRadius: '0.2rem',
+                                backgroundColor:
+                                  item?.state === 'active'
+                                    ? 'var(--palette-description-color)'
+                                    : 'var(--palette-dark-300Channel)',
+                                color: item?.state === 'active' ? '#FFFFFF' : '#FFFFFF',
+                                borderColor:
+                                  item?.state === 'active'
+                                    ? 'var(--palette-description-color)'
+                                    : 'var(--palette-dark-300Channel)',
+                                fontWeight: 'bold',
+                              }}
+                            />
+                          </TableCell>
+                          <TableCell align="center" id={`features-${item?.id}`}>
+                            <Box className={styles.features}>
+                              {Array.isArray(item.features) &&
+                                item.features.map((features: string, id: any) => (
+                                  <Chip
+                                    key={id}
+                                    label={_.upperFirst(features) || ''}
+                                    size="small"
+                                    variant="outlined"
+                                    sx={{
+                                      borderRadius: '0.2rem',
+                                      background: 'var(--palette-dark-300Channel)',
+                                      color: '#FFFFFF',
+                                      m: '0 0.4rem',
+                                      borderColor: 'var(--palette-dark-300Channel)',
+                                      fontWeight: 'bold',
                                     }}
-                                  >
-                                    <ListItemIcon>
-                                      <RemoveRedEyeIcon fontSize="small" className={styles.menuItemIcon} />
-                                    </ListItemIcon>
-                                    <Typography variant="body2" className={styles.menuText}>
-                                      View
-                                    </Typography>
-                                  </MenuItem>
-                                  {schedulerFeatures && schedulerFeatures.length > 0 ? (
-                                    <MenuItem
-                                      className={styles.menuItem}
-                                      id={`edit-${schedulerSelectedRow?.host_name}`}
-                                      onClick={() => {
-                                        setOpenSchedulerEditFeatures(true);
-                                        setSchedulerAnchorElement(null);
-                                      }}
-                                    >
-                                      <ListItemIcon>
-                                        <ModeEditIcon fontSize="small" className={styles.menuItemIcon} />
-                                      </ListItemIcon>
-                                      <Typography variant="body2" className={styles.menuText}>
-                                        Edit Features
-                                      </Typography>
-                                    </MenuItem>
-                                  ) : (
-                                    ''
-                                  )}
+                                  />
+                                ))}
+                            </Box>
+                          </TableCell>
+                          <TableCell align="center">
+                            <IconButton
+                              id={`operation-${item?.id}`}
+                              onClick={(event: any) => {
+                                setSchedulerAnchorElement(event.currentTarget);
+                                setSchedulerSelectedRow(item);
+                                setSchedulerSelectedID(item.id);
+                              }}
+                              size="small"
+                              aria-controls={Boolean(schedulerAnchorElement) ? item?.host_name : undefined}
+                              aria-haspopup="true"
+                              aria-expanded={Boolean(schedulerAnchorElement) ? 'true' : undefined}
+                            >
+                              <MoreVertIcon sx={{ color: 'var(--palette-color)' }} />
+                            </IconButton>
+                            <Menu
+                              anchorEl={schedulerAnchorElement}
+                              id={schedulerSelectedRow?.host_name}
+                              open={Boolean(schedulerAnchorElement)}
+                              onClose={handleClose}
+                              anchorOrigin={{
+                                vertical: 'bottom',
+                                horizontal: 'right',
+                              }}
+                              transformOrigin={{
+                                vertical: 'top',
+                                horizontal: 'right',
+                              }}
+                              sx={{
+                                '& .MuiMenu-paper': {
+                                  boxShadow: 'var(--custom-shadows-dropdown)',
+                                  borderRadius: '0.6rem',
+                                },
+                                '& .MuiMenu-list': {
+                                  width: '11rem',
+                                  p: '0',
+                                },
+                              }}
+                            >
+                              <Box className={styles.menu}>
+                                <MenuItem
+                                  className={styles.menuItem}
+                                  id={`view-${schedulerSelectedRow?.host_name}`}
+                                  onClick={() => {
+                                    navigate(`/clusters/${params.id}/schedulers/${schedulerSelectedRow?.id}`);
+                                    setSchedulerAnchorElement(null);
+                                  }}
+                                >
+                                  <ListItemIcon>
+                                    <RemoveRedEyeIcon fontSize="small" className={styles.menuItemIcon} />
+                                  </ListItemIcon>
+                                  <Typography variant="body2" className={styles.menuText}>
+                                    View
+                                  </Typography>
+                                </MenuItem>
+                                {schedulerFeatures && schedulerFeatures.length > 0 ? (
                                   <MenuItem
                                     className={styles.menuItem}
-                                    id={`delete-${schedulerSelectedRow?.host_name}`}
+                                    id={`edit-${schedulerSelectedRow?.host_name}`}
                                     onClick={() => {
-                                      openHandleScheduler(schedulerSelectedRow);
+                                      setOpenSchedulerEditFeatures(true);
                                       setSchedulerAnchorElement(null);
                                     }}
                                   >
                                     <ListItemIcon>
-                                      <DeleteIcon fontSize="small" sx={{ color: 'var(--delete-button-color)' }} />
+                                      <ModeEditIcon fontSize="small" className={styles.menuItemIcon} />
                                     </ListItemIcon>
-                                    <Typography
-                                      variant="body2"
-                                      className={styles.menuText}
-                                      color="var(--delete-button-color)"
-                                    >
-                                      Delete
+                                    <Typography variant="body2" className={styles.menuText}>
+                                      Edit Features
                                     </Typography>
                                   </MenuItem>
-                                </Box>
-                              </Menu>
-                            </TableCell>
-                          </TableRow>
-                        );
-                      })}
-                  </>
-                )}
-              </TableBody>
-            </Table>
-          </Box>
+                                ) : (
+                                  ''
+                                )}
+                                <MenuItem
+                                  className={styles.menuItem}
+                                  id={`delete-${schedulerSelectedRow?.host_name}`}
+                                  onClick={() => {
+                                    openHandleScheduler(schedulerSelectedRow);
+                                    setSchedulerAnchorElement(null);
+                                  }}
+                                >
+                                  <ListItemIcon>
+                                    <DeleteIcon fontSize="small" sx={{ color: 'var(--palette-delete-button-color)' }} />
+                                  </ListItemIcon>
+                                  <Typography
+                                    variant="body2"
+                                    className={styles.menuText}
+                                    color="var(--palette-delete-button-color)"
+                                  >
+                                    Delete
+                                  </Typography>
+                                </MenuItem>
+                              </Box>
+                            </Menu>
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })}
+                </>
+              )}
+            </TableBody>
+          </Table>
         </Card>
       )}
       {schedulerTotalPages > 1 ? (
-        <Box id="pagination" display="flex" justifyContent="flex-end" sx={{ marginTop: theme.spacing(2) }}>
+        <Box id="pagination" display="flex" justifyContent="flex-end" sx={{ marginTop: '2rem' }}>
           <Pagination
             count={schedulerTotalPages}
             page={schedulerPage}
@@ -1347,26 +1380,10 @@ export default function ShowCluster() {
           position: 'absolute',
         }}
       >
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'flex-start',
-            justifyContent: 'space-between',
-            p: '1rem',
-          }}
-        >
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-            }}
-          >
-            <Box
-              component="img"
-              src="/icons/cluster/delete.svg"
-              sx={{ width: '1.8rem', height: '1.8rem', mr: '0.4rem' }}
-            />
-            <Typography variant="h6" component="div" fontFamily="mabry-bold">
+        <Box className={styles.deleteInactiveInstances}>
+          <Box className={styles.deleteInactiveHeader}>
+            <Delete className={styles.deleteIcon} />
+            <Typography variant="h6" component="div" id="delete-inactive-instances-title" fontFamily="mabry-bold">
               Delete inactive instances
             </Typography>
           </Box>
@@ -1414,15 +1431,15 @@ export default function ShowCluster() {
                               <Typography component="div" variant="h5" fontFamily="mabry-bold">
                                 {deleteInactiveSchedulerSuccessful || '0'}
                               </Typography>
-                              <Typography color="var(--table-title-text-color)" component="div" variant="subtitle2">
+                              <Typography
+                                color="var(--palette-table-title-text-color)"
+                                component="div"
+                                variant="subtitle2"
+                              >
                                 number of deleted schedulers
                               </Typography>
                             </Box>
-                            <Box
-                              component="img"
-                              className={styles.headerErrorIcon}
-                              src="/icons/cluster/delete-inactive.svg"
-                            />
+                            <DeleteInactive className={styles.headerErrorIcon} />
                           </Card>
                           <Card className={styles.headerContainer}>
                             <Box>
@@ -1438,11 +1455,7 @@ export default function ShowCluster() {
                                 number of delete error
                               </Typography>
                             </Box>
-                            <Box
-                              component="img"
-                              className={styles.headerErrorIcon}
-                              src="/icons/cluster/delete-inactive-error.svg"
-                            />
+                            <DeleteInactiveError className={styles.headerErrorIcon} />
                           </Card>
                         </Box>
                         <Paper variant="outlined" className={styles.deleteInactiveWrapper}>
@@ -1478,11 +1491,7 @@ export default function ShowCluster() {
                               id="inactive-header"
                             >
                               <Box display="flex" alignItems="center">
-                                <Box
-                                  component="img"
-                                  sx={{ width: '1.2rem', height: '1.2rem', mr: '0.4rem' }}
-                                  src="/icons/job/preheat/failure.svg"
-                                />
+                                <Failure className={styles.failureIcon} />
                                 <Typography variant="body2" fontFamily="mabry-bold">
                                   Error log
                                 </Typography>
@@ -1522,10 +1531,9 @@ export default function ShowCluster() {
                       size="small"
                       onClick={handleReset}
                       sx={{
-                        '&.MuiButton-root': {
-                          backgroundColor: 'var(--button-color)',
-                          color: '#fff',
-                        },
+                        background: 'var(--palette-button-color)',
+                        color: 'var(--palette-button-text-color)',
+                        ':hover': { backgroundColor: 'var(--palette-hover-button-text-color)' },
                       }}
                     >
                       Cancel
@@ -1553,11 +1561,7 @@ export default function ShowCluster() {
                           alignItems: 'center',
                         }}
                       >
-                        <Box
-                          component="img"
-                          sx={{ width: '0.6rem', height: '0.6rem' }}
-                          src="/icons/cluster/inactive-total.svg"
-                        />
+                        <InactiveTotal className={styles.inactiveTotalIcon} />
                         <Typography
                           id="schedulerTotal"
                           variant="caption"
@@ -1574,32 +1578,17 @@ export default function ShowCluster() {
                     <Box>
                       <ListSubheader color="inherit" className={styles.schedulerInactiveListTitle}>
                         <Box className={styles.schedulerInactiveHeaderID}>
-                          <Typography
-                            variant="body2"
-                            fontFamily="mabry-bold"
-                            color="var(--table-title-text-color)"
-                            component="div"
-                          >
+                          <Typography variant="body2" className={styles.schedulerInactiveTable} component="div">
                             ID
                           </Typography>
                         </Box>
                         <Box className={styles.schedulerInactiveHeaderHostname}>
-                          <Typography
-                            variant="body2"
-                            fontFamily="mabry-bold"
-                            color="var(--table-title-text-color)"
-                            component="div"
-                          >
+                          <Typography variant="body2" className={styles.schedulerInactiveTable} component="div">
                             Hostname
                           </Typography>
                         </Box>
                         <Box className={styles.schedulerInactiveHeaderIP}>
-                          <Typography
-                            variant="body2"
-                            fontFamily="mabry-bold"
-                            color="var(--table-title-text-color)"
-                            component="div"
-                          >
+                          <Typography variant="body2" className={styles.schedulerInactiveTable} component="div">
                             IP
                           </Typography>
                         </Box>
@@ -1696,21 +1685,21 @@ export default function ShowCluster() {
                 ) : activeStep === 1 ? (
                   <Box>
                     <Box display="flex" alignItems="flex-start" pb="1rem">
-                      <Box
-                        component="img"
-                        src="/icons/cluster/delete-warning.svg"
-                        sx={{ width: '1.4rem', height: '1.4rem', pr: '0.2rem' }}
-                      />
+                      <DeleteWarning className={styles.deleteWarning} />
                       <Box>
                         <Typography
                           variant="body1"
                           fontFamily="mabry-bold"
                           component="span"
-                          sx={{ color: 'var(--delete-button-color)' }}
+                          sx={{ color: 'var(--palette-delete-button-color)' }}
                         >
                           WARNING:&nbsp;
                         </Typography>
-                        <Typography variant="body1" component="span" sx={{ color: 'var(--delete-button-color)' }}>
+                        <Typography
+                          variant="body1"
+                          component="span"
+                          sx={{ color: 'var(--palette-delete-button-color)' }}
+                        >
                           This action CANNOT be undone.
                         </Typography>
                       </Box>
@@ -1750,8 +1739,9 @@ export default function ShowCluster() {
                     onClick={handleBack}
                     sx={{
                       '&.MuiButton-root': {
-                        backgroundColor: activeStep === 0 ? '' : 'var(--button-color)',
-                        color: '#fff',
+                        backgroundColor: activeStep === 0 ? '' : 'var(--palette-button-color)',
+                        color: 'var(--palette-button-text-color)',
+                        ':hover': { backgroundColor: 'var(--palette-hover-button-text-color)' },
                       },
                     }}
                   >
@@ -1767,9 +1757,9 @@ export default function ShowCluster() {
                       id="save-delete"
                       sx={{
                         '&.MuiLoadingButton-root': {
-                          backgroundColor: 'var(--delete-button-color)',
-                          color: '#fff',
-                          borderColor: 'var(--save-color)',
+                          backgroundColor: 'var(--palette-delete-button-color)',
+                          color: 'var(--palette-button-text-color)',
+                          borderColor: 'var(--palette-save-color)',
                         },
                       }}
                     >
@@ -1788,8 +1778,9 @@ export default function ShowCluster() {
                           backgroundColor:
                             Array.isArray(schedulerInactive) && schedulerInactive.length === 0
                               ? ''
-                              : 'var(--button-color)',
-                          color: '#fff',
+                              : 'var(--palette-button-color)',
+                          color: 'var(--palette-button-text-color)',
+                          ':hover': { backgroundColor: 'var(--palette-hover-button-text-color)' },
                         },
                       }}
                     >
@@ -1810,7 +1801,7 @@ export default function ShowCluster() {
       >
         <DialogContent>
           <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-            <Box component="img" className={styles.deleteClusterIcon} src="/icons/cluster/delete.svg" />
+            <Delete className={styles.deleteClusterIcon} />
             <Typography fontFamily="mabry-bold" pt="1rem">
               Are you sure you want to delet this scheduler?
             </Typography>
@@ -1847,7 +1838,7 @@ export default function ShowCluster() {
       >
         <Box sx={{ display: 'flex', justifyContent: 'space-between', p: '0.8rem 1rem' }}>
           <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <Box component="img" sx={{ width: '1.6rem' }} src="/icons/cluster/features.svg" />
+            <Features className={styles.featuresHeaderIcon} />
             <Typography variant="h6" fontFamily="mabry-bold" pl="0.5rem">
               Featrues
             </Typography>
@@ -1873,14 +1864,14 @@ export default function ShowCluster() {
             <Box sx={{ display: 'flex', alignItems: 'center' }}>
               <Box className={styles.featuresIconWrapper}>
                 <Box className={styles.featuresIconContainer}>
-                  <Box component="img" className={styles.featuresIcon} src="/icons/cluster/scheduler.svg" />
+                  <Schedule className={styles.featuresIcon} />
                 </Box>
               </Box>
               <Box>
                 <Typography component="div" variant="body2" fontFamily="mabry-bold">
                   Schedule
                 </Typography>
-                <Typography component="div" variant="caption" color="rgb(82 82 82 / 87%)">
+                <Typography component="div" variant="caption" color="var(--palette-text-palette-text-secondary)">
                   If schedule feature is enabled, the scheduler can schedule download tasks.
                 </Typography>
               </Box>
@@ -1899,14 +1890,14 @@ export default function ShowCluster() {
             <Box sx={{ display: 'flex', alignItems: 'center' }}>
               <Box className={styles.featuresIconWrapper}>
                 <Box className={styles.featuresIconContainer}>
-                  <Box component="img" className={styles.featuresIcon} src="/icons/cluster/preheat.svg" />
+                  <Preheat className={styles.featuresIcon} />
                 </Box>
               </Box>
               <Box>
                 <Typography component="div" variant="body2" fontFamily="mabry-bold">
                   Preheat
                 </Typography>
-                <Typography component="div" variant="caption" color="rgb(82 82 82 / 87%)">
+                <Typography component="div" variant="caption" color="var(--palette-text-palette-text-secondary)">
                   If preheat feature is enabled, the scheduler can execute preheating job.
                 </Typography>
               </Box>
@@ -1940,6 +1931,6 @@ export default function ShowCluster() {
           </Box>
         </DialogContent>
       </Dialog>
-    </ThemeProvider>
+    </Box>
   );
 }
diff --git a/src/components/clusters/schedulers/show.module.css b/src/components/clusters/schedulers/show.module.css
index e27b401..a00d833 100644
--- a/src/components/clusters/schedulers/show.module.css
+++ b/src/components/clusters/schedulers/show.module.css
@@ -23,6 +23,7 @@
 .headerIcon {
   width: 1.4rem;
   height: 1.4rem;
+  color: var(var(--palette-detail-lable-color));
 }
 
 .hostname {
@@ -36,9 +37,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--button-color);
-  color: var(--save-size-color);
+  background-color: var(--palette-text-color);
+  color: var(--palette-button-text-color);
   border-radius: 0.3rem;
   min-width: 1.6rem;
   padding: 0.2rem 0.4rem;
 }
+
diff --git a/src/components/clusters/schedulers/show.tsx b/src/components/clusters/schedulers/show.tsx
index 1c100b7..3625485 100644
--- a/src/components/clusters/schedulers/show.tsx
+++ b/src/components/clusters/schedulers/show.tsx
@@ -17,6 +17,15 @@ import styles from './show.module.css';
 import _ from 'lodash';
 import { useParams, Link, useLocation } from 'react-router-dom';
 import Card from '../../card';
+import { ReactComponent as ID } from '../../../assets/images/cluster/scheduler/scheduler-id.svg';
+import { ReactComponent as Hostname } from '../../../assets/images/cluster/scheduler/hostname.svg';
+import { ReactComponent as ClusterID } from '../../../assets/images/cluster/scheduler/cluster-id.svg';
+import { ReactComponent as IP } from '../../../assets/images/cluster/scheduler/scheduler-ip.svg';
+import { ReactComponent as Status } from '../../../assets/images/cluster/scheduler/status.svg';
+import { ReactComponent as Features } from '../../../assets/images/cluster/scheduler/features.svg';
+import { ReactComponent as Port } from '../../../assets/images/cluster/scheduler/port.svg';
+import { ReactComponent as CreatedAt } from '../../../assets/images/cluster/scheduler/created-at.svg';
+import { ReactComponent as UpdatedAt } from '../../../assets/images/cluster/scheduler/updated-at.svg';
 
 export default function Schedulers() {
   const [isLoading, setIsLoading] = useState(false);
@@ -29,29 +38,6 @@ export default function Schedulers() {
   const pathSegments = location.pathname.split('/');
   const clusterID = pathSegments[pathSegments.length - 3];
 
-  const schedulerLabel = [
-    {
-      label: 'Port',
-      name: 'port',
-    },
-    {
-      label: 'State',
-      name: 'state',
-    },
-    {
-      label: 'Features',
-      name: 'features',
-    },
-    {
-      label: 'Created At',
-      name: 'created_at',
-    },
-    {
-      label: 'Updated At',
-      name: 'updated_at',
-    },
-  ];
-
   useEffect(() => {
     (async function () {
       try {
@@ -93,6 +79,7 @@ export default function Schedulers() {
           {errorMessageText}
         </Alert>
       </Snackbar>
+      <Typography variant="h5">Scheduler</Typography>
       <Breadcrumbs
         separator={
           <Box
@@ -100,7 +87,7 @@ export default function Schedulers() {
           />
         }
         aria-label="breadcrumb"
-        sx={{ mb: '1rem' }}
+        sx={{ mb: '2rem', mt: '1rem' }}
       >
         <RouterLink component={Link} underline="hover" color="inherit" to={`/clusters`}>
           clusters
@@ -113,13 +100,10 @@ export default function Schedulers() {
         </RouterLink>
         <Typography color="text.primary">{scheduler?.host_name || '-'}</Typography>
       </Breadcrumbs>
-      <Typography variant="h6" sx={{ p: '1rem 0 2rem 0', fontFamily: 'mabry-bold' }}>
-        Scheduler
-      </Typography>
       <Card className={styles.container}>
         <Box className={styles.headerContainer}>
           <Box className={styles.headerContent}>
-            <Box component="img" className={styles.headerIcon} src="/icons/cluster/scheduler/scheduler-id.svg" />
+            <ID className={styles.headerIcon} />
             <Typography className={styles.headerTitle} variant="body1" component="div">
               ID
             </Typography>
@@ -130,7 +114,7 @@ export default function Schedulers() {
         </Box>
         <Box className={styles.headerContainer}>
           <Box className={styles.headerContent}>
-            <Box component="img" className={styles.headerIcon} src="/icons/cluster/scheduler/hostname.svg" />
+            <Hostname className={styles.headerIcon} />
             <Typography className={styles.headerTitle} variant="body1" component="div">
               Hostname
             </Typography>
@@ -143,13 +127,13 @@ export default function Schedulers() {
         </Box>
         <Box className={styles.headerContainer}>
           <Box className={styles.headerContent}>
-            <Box component="img" className={styles.headerIcon} src="/icons/cluster/scheduler/cluster-id.svg" />
+            <ClusterID className={styles.headerIcon} />
             <Typography className={styles.headerTitle} variant="body1" component="div">
               Cluster ID
             </Typography>
           </Box>
           <Box id="cluster-id" className={styles.clusterID}>
-            <Typography component="div" variant="body2" className={styles.headerText}>
+            <Typography component="div" variant="body2" fontFamily="mabry-bold" className={styles.headerText}>
               {isLoading ? (
                 <Skeleton data-testid="isloading" sx={{ width: '8rem' }} />
               ) : (
@@ -160,7 +144,7 @@ export default function Schedulers() {
         </Box>
         <Box className={styles.headerContainer}>
           <Box className={styles.headerContent}>
-            <Box component="img" className={styles.headerIcon} src="/icons/cluster/scheduler/scheduler-ip.svg" />
+            <IP className={styles.headerIcon} />
             <Typography className={styles.headerTitle} variant="body1" component="div">
               IP
             </Typography>
@@ -171,7 +155,7 @@ export default function Schedulers() {
         </Box>
         <Box className={styles.headerContainer}>
           <Box className={styles.headerContent}>
-            <Box component="img" className={styles.headerIcon} src="/icons/cluster/scheduler/status.svg" />
+            <Status className={styles.headerIcon} />
             <Typography className={styles.headerTitle} variant="body1" component="div">
               Status
             </Typography>
@@ -187,9 +171,11 @@ export default function Schedulers() {
                 id="status"
                 sx={{
                   borderRadius: '0.25rem',
-                  backgroundColor: scheduler?.state === 'active' ? 'var(--description-color)' : 'var(--button-color)',
+                  backgroundColor:
+                    scheduler?.state === 'active' ? 'var(--palette-text-color)' : 'var(--palette-dark-300Channel)',
                   color: scheduler?.state === 'active' ? '#FFFFFF' : '#FFFFFF',
-                  borderColor: scheduler?.state === 'active' ? 'var(--description-color)' : 'var(--button-color)',
+                  borderColor:
+                    scheduler?.state === 'active' ? 'var(--palette-text-color)' : 'var(--palette-dark-300Channel)',
                   fontWeight: 'bold',
                 }}
               />
@@ -202,7 +188,7 @@ export default function Schedulers() {
         </Box>
         <Box className={styles.headerContainer}>
           <Box className={styles.headerContent}>
-            <Box component="img" className={styles.headerIcon} src="/icons/cluster/scheduler/features.svg" />
+            <Features className={styles.headerIcon} />
             <Typography className={styles.headerTitle} variant="body1" component="div">
               Features
             </Typography>
@@ -219,10 +205,10 @@ export default function Schedulers() {
                   variant="outlined"
                   sx={{
                     borderRadius: '0.25rem',
-                    background: 'var(--button-color)',
+                    background: 'var(--palette-dark-300Channel)',
                     color: '#FFFFFF',
                     mr: '0.4rem',
-                    borderColor: 'var(--button-color)',
+                    borderColor: 'var(--palette-dark-300Channel)',
                     fontWeight: 'bold',
                   }}
                 />
@@ -234,7 +220,7 @@ export default function Schedulers() {
         </Box>
         <Box className={styles.headerContainer}>
           <Box className={styles.headerContent}>
-            <Box component="img" className={styles.headerIcon} src="/icons/cluster/scheduler/port.svg" />
+            <Port className={styles.headerIcon} />
             <Typography className={styles.headerTitle} variant="body1" component="div">
               Port
             </Typography>
@@ -245,7 +231,7 @@ export default function Schedulers() {
         </Box>
         <Box className={styles.headerContainer}>
           <Box className={styles.headerContent}>
-            <Box component="img" className={styles.headerIcon} src="/icons/cluster/scheduler/created-at.svg" />
+            <CreatedAt className={styles.headerIcon} />
             <Typography className={styles.headerTitle} variant="body1" component="div">
               Created At
             </Typography>
@@ -267,7 +253,7 @@ export default function Schedulers() {
         </Box>
         <Box className={styles.headerContainer}>
           <Box className={styles.headerContent}>
-            <Box component="img" className={styles.headerIcon} src="/icons/cluster/scheduler/updated-at.svg" />
+            <UpdatedAt className={styles.headerIcon} />
             <Typography className={styles.headerTitle} variant="body1" component="div">
               Updated At
             </Typography>
diff --git a/src/components/clusters/seed-peers/index.module.css b/src/components/clusters/seed-peers/index.module.css
index ec2a4cf..fda8b03 100644
--- a/src/components/clusters/seed-peers/index.module.css
+++ b/src/components/clusters/seed-peers/index.module.css
@@ -1,18 +1,18 @@
-.schedulerInactiveCountWrapper {
+.seedPeerInactiveCountWrapper {
   display: flex;
   align-items: center;
   padding: 0.8rem 1rem;
 }
 
-.schedulerInactiveList {
+.seedPeerInactiveList {
   display: flex;
   padding: 0.8rem 1rem !important;
 }
 
-.schedulerInactiveListTitle {
+.seedPeerInactiveListTitle {
   display: flex;
   padding: 0.8rem 1rem;
-  background-color: var(--table-title-color) !important;
+  background-color: var(--palette-table-title-color) !important;
 }
 
 .noInactiveScheduler {
@@ -26,7 +26,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .logHeaderWrapper {
@@ -56,6 +56,7 @@
   width: 3rem;
   height: 3rem;
   margin-right: '0.5rem';
+  color: var(var(--palette-detail-lable-color));
 }
 
 .headerErrorIcon {
@@ -69,27 +70,25 @@
   margin-bottom: 0.4rem;
 }
 
-.menuItem:hover {
-  background-color: var(--button-color) !important;
-  color: var(--save-size-color);
-}
-
 .menu {
-  background-image: url(../../../../public/images/menu/cyan-blur.png), url(../../../../public/images/menu/red-blur.png);
-  background-color: rgba(255, 255, 255, 0.9);
+  background-image: url(../../../assets/images/menu/cyan-blur.png), url(../../../assets/images/menu/red-blur.png);
+  background-color: var(--palette-background-menu);
   background-repeat: no-repeat, no-repeat;
   padding: 0.2rem;
   background-size: 50%, 50%;
-  box-shadow: rgba(145, 158, 171, 0.24) 0px 0px 2px 0px, rgba(145, 158, 171, 0.24) -20px 20px 40px -4px;
   transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
   outline: 0px;
   background-position: right top, left bottom;
-  border-radius: 10px;
+  border-radius: var(--menu-border-radius);
   overflow: inherit;
 }
 
+.menuItem {
+  border-radius: var(--menu-border-radius) !important;
+}
+
 .menuItemIcon {
-  color: var(--button-color);
+  color: var(--palette-button-color);
 }
 
 .menuText {
@@ -105,7 +104,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-bottom: 2rem;
+  padding-bottom: 1.5rem;
 }
 
 .idIcon {
@@ -128,7 +127,7 @@
   margin-bottom: 2rem;
 }
 
-.schedulerInactiveHeaderID {
+.seedPeerInactiveHeaderID {
   width: 20%;
   white-space: nowrap;
   overflow: hidden;
@@ -137,7 +136,7 @@
   align-items: center;
 }
 
-.schedulerInactiveHeaderHostname {
+.seedPeerInactiveHeaderHostname {
   width: 50%;
   white-space: nowrap;
   overflow: hidden;
@@ -146,7 +145,12 @@
   align-items: center;
 }
 
-.schedulerInactiveHeaderIP {
+.seedPeerInactiveTableHeaderText {
+  font-family: 'mabry-bold';
+  color: var(var(--palette-table-title-text-color));
+}
+
+.seedPeerInactiveHeaderIP {
   width: 25%;
   white-space: nowrap;
   overflow: hidden;
@@ -155,7 +159,7 @@
   align-items: center;
 }
 
-.schedulerInactiveID {
+.seedPeerInactiveID {
   display: flex;
   align-items: center;
   width: 20%;
@@ -164,7 +168,7 @@
   text-overflow: ellipsis;
 }
 
-.schedulerInactiveHostname {
+.seedPeerInactiveHostname {
   width: 50%;
   white-space: nowrap;
   overflow: hidden;
@@ -172,29 +176,17 @@
   padding-right: 1rem;
 }
 
-.schedulerInactiveIP {
+.seedPeerInactiveIP {
   width: 25%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.seedPeerHeader {
-  width: 33.3333%;
-  padding: 1.2rem;
-  display: flex;
-  justify-content: space-between;
-  position: relative;
-  z-index: 0;
-  overflow: hidden;
-}
-
 .activeHeader {
-  width: 33.3333%;
   padding: 1.2rem;
   display: flex;
   justify-content: space-between;
-  margin-left: 1.6rem;
   position: relative;
   z-index: 0;
   overflow: hidden;
@@ -204,6 +196,7 @@
   width: 1rem;
   height: 1rem;
   margin-right: 0.4rem;
+  color: var(--palette-text-color);
 }
 
 .hostnameCardText {
@@ -292,8 +285,8 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  background-color: rgba(var(--no-data-color) / 0.04) !important;
-  border: dashed 1px rgba(var(--no-data-color) / 0.08);
+  background-color: rgba(var(--palette-no-data-color) / 0.04) !important;
+  border: dashed 1px rgba(var(--palette-no-data-color) / 0.08);
 }
 
 .nodataIcon {
@@ -306,34 +299,63 @@
   font-family: 'mabry-bold';
 }
 
+.navigationContainer {
+  display: grid;
+  gap: calc(1.5rem);
+  grid-template-columns: repeat(3, 1fr);
+  margin-bottom: 1.5rem;
+}
+
+.navigationCount {
+  display: flex;
+  align-items: center;
+}
+
+.navigationCountIcon {
+  background-color: rgba(34 197 94 / 0.18);
+  color: var(--palette-description-color);
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 0.5rem;
+}
+
 .navigation {
-  top: -3rem;
+  top: -2rem;
   width: 160px;
   z-index: -1;
   height: 160px;
-  right: -5rem;
+  right: -6rem;
   opacity: 0.12;
   border-radius: 24px;
   position: absolute;
   transform: rotate(34deg);
-  background: linear-gradient(to right, #22c55e 0%, rgba(34 197 94 / 0) 100%);
+  background: linear-gradient(to right, var(--palette-text-color) 0%, transparent 100%);
 }
 
 .navigationIcon {
-  width: 2.4rem;
-  height: 2.4rem;
-  top: 1.4rem;
-  right: 1.8rem;
+  width: 2rem;
+  height: 2rem;
+  top: 2.4rem;
+  right: 1.2rem;
   position: absolute;
+  color: var(--palette-text-color);
 }
 
 .tableHeader {
-  color: var(--table-title-text-color);
+  border-color: var(--palette-palette-divider) !important;
+}
+
+.tableHeaderText {
+  color: var(--palette-table-title-text-color);
   font-family: 'mabry-bold' !important;
 }
 
 .tableRow {
-  border-bottom: dashed var(--palette-divider);
+  border-bottom: dashed var(--palette-palette-divider);
 }
 
 .tableRow:last-child {
@@ -342,7 +364,43 @@
 
 .divider {
   border-width: 0px 0px thin;
-  border-color: var(--palette-divider);
+  border-color: var(--palette-palette-divider);
   border-style: dashed;
   margin: 0;
 }
+
+.deleteInactiveInstances {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+}
+
+.deleteInactiveHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.deleteIcon {
+  width: 1.8rem;
+  height: 1.8rem;
+  margin-right: 0.4rem;
+}
+
+.inactiveTotalIcon {
+  width: 0.6rem;
+  height: 0.6rem;
+}
+
+.deleteWarning {
+  width: 1.4rem;
+  height: 1.4rem;
+  padding-right: 0.2rem;
+}
+
+.failureIcon {
+  width: 1.2rem;
+  height: 1.2rem;
+  margin-right: 0.4rem;
+}
diff --git a/src/components/clusters/seed-peers/index.tsx b/src/components/clusters/seed-peers/index.tsx
index f8d43d3..a5d6c40 100644
--- a/src/components/clusters/seed-peers/index.tsx
+++ b/src/components/clusters/seed-peers/index.tsx
@@ -1,5 +1,4 @@
 import Paper from '@mui/material/Paper';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
 import {
   Alert,
   Box,
@@ -66,20 +65,25 @@ import Card from '../../card';
 import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: '#1C293A',
-    },
-    secondary: {
-      main: '#2E8F79',
-    },
-  },
-  typography: {
-    fontFamily: 'mabry-light,sans-serif',
-  },
-});
+import { ReactComponent as Total } from '../../../assets/images/cluster/peer/total.svg';
+import { ReactComponent as Active } from '../../../assets/images/cluster/scheduler/active.svg';
+import { ReactComponent as Inactive } from '../../../assets/images/cluster/scheduler/inactive.svg';
+import { ReactComponent as SelectCard } from '../../../assets/images/cluster/scheduler/card.svg';
+import { ReactComponent as SelectTable } from '../../../assets/images/cluster/scheduler/table.svg';
+import { ReactComponent as ID } from '../../../assets/images/cluster/id.svg';
+import { ReactComponent as Status } from '../../../assets/images/cluster/status.svg';
+import { ReactComponent as IP } from '../../../assets/images/cluster/ip.svg';
+import { ReactComponent as Type } from '../../../assets/images/cluster/seed-peer/type.svg';
+import { ReactComponent as Port } from '../../../assets/images/cluster/seed-peer/port.svg';
+import { ReactComponent as DownloadPort } from '../../../assets/images/cluster/seed-peer/download-port.svg';
+import { ReactComponent as Delete } from '../../../assets/images/cluster/delete.svg';
+import { ReactComponent as IcContent } from '../../../assets/images/cluster/scheduler/ic-content.svg';
+import { ReactComponent as InactiveTotal } from '../../../assets/images/cluster/inactive-total.svg';
+import { ReactComponent as DeleteWarning } from '../../../assets/images/cluster/delete-warning.svg';
+import { ReactComponent as DeleteInactive } from '../../../assets/images/cluster/delete-inactive.svg';
+import { ReactComponent as DeleteInactiveError } from '../../../assets/images/cluster/delete-inactive-error.svg';
+import { ReactComponent as Failure } from '../../../assets/images/job/preheat/failure.svg';
+import { ReactComponent as Count } from '../../../assets/images/cluster/scheduler/number.svg';
 
 function CircularProgressWithLabel(props: LinearProgressProps & { value: number }) {
   return (
@@ -505,7 +509,7 @@ export default function ShowCluster() {
   };
 
   return (
-    <ThemeProvider theme={theme}>
+    <Box>
       <Snackbar
         open={successMessage}
         autoHideDuration={3000}
@@ -540,10 +544,9 @@ export default function ShowCluster() {
             }}
             className={styles.deleteButton}
             sx={{
-              '&.MuiButton-root': {
-                backgroundColor: 'var(--button-color)',
-                color: '#fff',
-              },
+              background: 'var(--palette-button-color)',
+              color: 'var(--palette-button-text-color)',
+              ':hover': { backgroundColor: 'var(--palette-hover-button-text-color)' },
             }}
           >
             <DeleteIcon fontSize="small" sx={{ mr: '0.4rem' }} />
@@ -563,26 +566,10 @@ export default function ShowCluster() {
           position: 'absolute',
         }}
       >
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'flex-start',
-            justifyContent: 'space-between',
-            p: '1rem',
-          }}
-        >
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-            }}
-          >
-            <Box
-              component="img"
-              src="/icons/cluster/delete.svg"
-              sx={{ width: '1.8rem', height: '1.8rem', mr: '0.4rem' }}
-            />
-            <Typography variant="h6" component="div" fontFamily="mabry-bold">
+        <Box className={styles.deleteInactiveInstances}>
+          <Box className={styles.deleteInactiveHeader}>
+            <Delete className={styles.deleteIcon} />
+            <Typography variant="h6" component="div" id="delete-inactive-instances-title" fontFamily="mabry-bold">
               Delete inactive instances
             </Typography>
           </Box>
@@ -634,11 +621,7 @@ export default function ShowCluster() {
                                 number of deleted seed peers
                               </Typography>
                             </Box>
-                            <Box
-                              component="img"
-                              className={styles.headerErrorIcon}
-                              src="/icons/cluster/delete-inactive.svg"
-                            />
+                            <DeleteInactive className={styles.headerErrorIcon} />
                           </Paper>
                           <Paper variant="outlined" className={styles.headerContainer}>
                             <Box>
@@ -654,11 +637,7 @@ export default function ShowCluster() {
                                 number of delete error
                               </Typography>
                             </Box>
-                            <Box
-                              component="img"
-                              className={styles.headerErrorIcon}
-                              src="/icons/cluster/delete-inactive-error.svg"
-                            />
+                            <DeleteInactiveError className={styles.headerErrorIcon} />
                           </Paper>
                         </Box>
                         <Paper variant="outlined" className={styles.deleteInactiveWrapper}>
@@ -694,11 +673,7 @@ export default function ShowCluster() {
                               id="inactive-header"
                             >
                               <Box display="flex" alignItems="center">
-                                <Box
-                                  component="img"
-                                  sx={{ width: '1.2rem', height: '1.2rem', mr: '0.4rem' }}
-                                  src="/icons/job/preheat/failure.svg"
-                                />
+                                <Failure className={styles.failureIcon} />
                                 <Typography variant="body2" fontFamily="mabry-bold">
                                   Error log
                                 </Typography>
@@ -738,10 +713,9 @@ export default function ShowCluster() {
                       size="small"
                       onClick={handleReset}
                       sx={{
-                        '&.MuiButton-root': {
-                          backgroundColor: 'var(--button-color)',
-                          color: '#fff',
-                        },
+                        background: 'var(--palette-button-color)',
+                        color: 'var(--palette-button-text-color)',
+                        ':hover': { backgroundColor: 'var(--palette-hover-button-text-color)' },
                       }}
                     >
                       Cancel
@@ -755,7 +729,7 @@ export default function ShowCluster() {
               <Fragment>
                 {activeStep === 0 ? (
                   <Card>
-                    <Box className={styles.schedulerInactiveCountWrapper}>
+                    <Box className={styles.seedPeerInactiveCountWrapper}>
                       <Typography fontFamily="mabry-bold" variant="subtitle1" component="div">
                         Seed peers
                       </Typography>
@@ -769,11 +743,7 @@ export default function ShowCluster() {
                           alignItems: 'center',
                         }}
                       >
-                        <Box
-                          component="img"
-                          sx={{ width: '0.6rem', height: '0.6rem' }}
-                          src="/icons/cluster/inactive-total.svg"
-                        />
+                        <InactiveTotal className={styles.inactiveTotalIcon} />
                         <Typography
                           id="seedPeerTotal"
                           variant="caption"
@@ -788,19 +758,19 @@ export default function ShowCluster() {
                     </Box>
                     <Box>
                       <hr className={styles.divider} />
-                      <ListSubheader color="inherit" className={styles.schedulerInactiveListTitle}>
-                        <Box className={styles.schedulerInactiveHeaderID}>
-                          <Typography variant="body2" fontFamily="mabry-bold" color="#515155" component="div">
+                      <ListSubheader color="inherit" className={styles.seedPeerInactiveListTitle}>
+                        <Box className={styles.seedPeerInactiveHeaderID}>
+                          <Typography variant="body2" className={styles.seedPeerInactiveTableHeaderText}>
                             ID
                           </Typography>
                         </Box>
-                        <Box className={styles.schedulerInactiveHeaderHostname}>
-                          <Typography variant="body2" fontFamily="mabry-bold" color="#515155" component="div">
+                        <Box className={styles.seedPeerInactiveHeaderHostname}>
+                          <Typography variant="body2" className={styles.seedPeerInactiveTableHeaderText}>
                             Hostname
                           </Typography>
                         </Box>
-                        <Box className={styles.schedulerInactiveHeaderIP}>
-                          <Typography variant="body2" fontFamily="mabry-bold" color="#515155" component="div">
+                        <Box className={styles.seedPeerInactiveHeaderIP}>
+                          <Typography variant="body2" className={styles.seedPeerInactiveTableHeaderText}>
                             IP
                           </Typography>
                         </Box>
@@ -810,7 +780,7 @@ export default function ShowCluster() {
                         <List
                           sx={{
                             width: '100%',
-                            bgcolor: 'background.paper',
+                            bgcolor: 'background.Card',
                             overflow: 'auto',
                             maxHeight: 300,
                             padding: '0',
@@ -821,13 +791,9 @@ export default function ShowCluster() {
                             seedPeerInactive.map((item, index) => {
                               return index !== seedPeerInactive.length - 1 ? (
                                 <Box key={item.id}>
-                                  <ListItem className={styles.schedulerInactiveList}>
+                                  <ListItem className={styles.seedPeerInactiveList}>
                                     <MuiTooltip title={item.id || '-'} placement="top">
-                                      <Typography
-                                        variant="body2"
-                                        component="div"
-                                        className={styles.schedulerInactiveID}
-                                      >
+                                      <Typography variant="body2" component="div" className={styles.seedPeerInactiveID}>
                                         {item.id}
                                       </Typography>
                                     </MuiTooltip>
@@ -835,17 +801,13 @@ export default function ShowCluster() {
                                       <Typography
                                         variant="body2"
                                         component="div"
-                                        className={styles.schedulerInactiveHostname}
+                                        className={styles.seedPeerInactiveHostname}
                                       >
                                         {item.host_name}
                                       </Typography>
                                     </MuiTooltip>
                                     <MuiTooltip title={item.ip || '-'} placement="top">
-                                      <Typography
-                                        variant="body2"
-                                        component="div"
-                                        className={styles.schedulerInactiveIP}
-                                      >
+                                      <Typography variant="body2" component="div" className={styles.seedPeerInactiveIP}>
                                         {item.ip}
                                       </Typography>
                                     </MuiTooltip>
@@ -854,13 +816,9 @@ export default function ShowCluster() {
                                 </Box>
                               ) : (
                                 <Box key={item.id}>
-                                  <ListItem className={styles.schedulerInactiveList}>
+                                  <ListItem className={styles.seedPeerInactiveList}>
                                     <MuiTooltip title={item.id || '-'} placement="top">
-                                      <Typography
-                                        variant="body2"
-                                        component="div"
-                                        className={styles.schedulerInactiveID}
-                                      >
+                                      <Typography variant="body2" component="div" className={styles.seedPeerInactiveID}>
                                         {item.id}
                                       </Typography>
                                     </MuiTooltip>
@@ -868,17 +826,13 @@ export default function ShowCluster() {
                                       <Typography
                                         variant="body2"
                                         component="div"
-                                        className={styles.schedulerInactiveHostname}
+                                        className={styles.seedPeerInactiveHostname}
                                       >
                                         {item.host_name}
                                       </Typography>
                                     </MuiTooltip>
                                     <MuiTooltip title={item.ip || '-'} placement="top">
-                                      <Typography
-                                        variant="body2"
-                                        component="div"
-                                        className={styles.schedulerInactiveIP}
-                                      >
+                                      <Typography variant="body2" component="div" className={styles.seedPeerInactiveIP}>
                                         {item.ip}
                                       </Typography>
                                     </MuiTooltip>
@@ -897,21 +851,21 @@ export default function ShowCluster() {
                 ) : activeStep === 1 ? (
                   <Box>
                     <Box display="flex" alignItems="flex-start" pb="1rem">
-                      <Box
-                        component="img"
-                        src="/icons/cluster/delete-warning.svg"
-                        sx={{ width: '1.4rem', height: '1.4rem', pr: '0.2rem' }}
-                      />
+                      <DeleteWarning className={styles.deleteWarning} />
                       <Box>
                         <Typography
                           variant="body1"
                           fontFamily="mabry-bold"
                           component="span"
-                          sx={{ color: 'var(--delete-button-color)' }}
+                          sx={{ color: 'var(--palette-delete-button-color)' }}
                         >
                           WARNING:&nbsp;
                         </Typography>
-                        <Typography variant="body1" component="span" sx={{ color: 'var(--delete-button-color)' }}>
+                        <Typography
+                          variant="body1"
+                          component="span"
+                          sx={{ color: 'var(--palette-delete-button-color)' }}
+                        >
                           This action CANNOT be undone.
                         </Typography>
                       </Box>
@@ -951,8 +905,9 @@ export default function ShowCluster() {
                     onClick={handleBack}
                     sx={{
                       '&.MuiButton-root': {
-                        backgroundColor: activeStep === 0 ? '' : 'var(--button-color)',
-                        color: '#fff',
+                        backgroundColor: activeStep === 0 ? '' : 'var(--palette-button-color)',
+                        color: 'var(--palette-button-text-color)',
+                        ':hover': { backgroundColor: 'var(--palette-hover-button-text-color)' },
                       },
                     }}
                   >
@@ -968,9 +923,9 @@ export default function ShowCluster() {
                       id="save-delete"
                       sx={{
                         '&.MuiLoadingButton-root': {
-                          backgroundColor: 'var(--delete-button-color)',
+                          backgroundColor: 'var(--palette-delete-button-color)',
                           color: '#fff',
-                          borderColor: 'var(--save-color)',
+                          borderColor: 'var(--palette-save-color)',
                         },
                       }}
                     >
@@ -989,8 +944,9 @@ export default function ShowCluster() {
                           backgroundColor:
                             Array.isArray(seedPeerInactive) && seedPeerInactive.length === 0
                               ? ''
-                              : 'var(--button-color)',
-                          color: '#fff',
+                              : 'var(--palette-button-color)',
+                          color: 'var(--palette-button-text-color)',
+                          ':hover': { backgroundColor: 'var(--palette-hover-button-text-color)' },
                         },
                       }}
                     >
@@ -1003,11 +959,11 @@ export default function ShowCluster() {
           </Box>
         </DialogContent>
       </Dialog>
-      <Box sx={{ display: 'flex', mb: '2rem' }}>
-        <Card className={styles.seedPeerHeader}>
+      <Box className={styles.navigationContainer}>
+        <Card className={styles.activeHeader}>
           <Box sx={{ display: 'flex', width: '70%' }}>
             <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
-              <Typography variant="subtitle1" fontFamily="mabry-bold" color="#637381">
+              <Typography variant="subtitle2" fontFamily="mabry-bold" color="var(--palette-table-title-text-color)">
                 Total
               </Typography>
               <Box>
@@ -1020,20 +976,24 @@ export default function ShowCluster() {
                     {seedPeerCount?.length || 0}
                   </Typography>
                 )}
-
-                <Typography variant="body2" color="var(--table-title-text-color)">
-                  number of seed peers
-                </Typography>
+                <Box className={styles.navigationCount}>
+                  <span className={styles.navigationCountIcon}>
+                    <Count />
+                  </span>
+                  <Typography variant="body2" color="var(--palette-table-title-text-color)">
+                    number of seed peers
+                  </Typography>
+                </Box>
               </Box>
             </Box>
           </Box>
           <Box className={styles.navigation} />
-          <Box component="img" className={styles.navigationIcon} src="/icons/cluster/peer/total.svg" />
+          <Total className={styles.navigationIcon} />
         </Card>
         <Card className={styles.activeHeader}>
           <Box sx={{ display: 'flex', width: '70%' }}>
             <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
-              <Typography variant="subtitle1" fontFamily="mabry-bold" color="#637381">
+              <Typography variant="subtitle2" fontFamily="mabry-bold" color="var(--palette-table-title-text-color)">
                 Active
               </Typography>
               <Box>
@@ -1046,19 +1006,24 @@ export default function ShowCluster() {
                     {numberOfActiveSeedPeers}
                   </Typography>
                 )}
-                <Typography variant="body2" color="var(--table-title-text-color)">
-                  number of active seed peers
-                </Typography>
+                <Box className={styles.navigationCount}>
+                  <span className={styles.navigationCountIcon}>
+                    <Count />
+                  </span>
+                  <Typography variant="body2" color="var(--palette-table-title-text-color)">
+                    number of active seed peers
+                  </Typography>
+                </Box>
               </Box>
             </Box>
           </Box>
           <Box className={styles.navigation} />
-          <Box component="img" className={styles.navigationIcon} src="/icons/cluster/scheduler/active.svg" />
+          <Active className={styles.navigationIcon} />
         </Card>
         <Card className={styles.activeHeader}>
           <Box sx={{ display: 'flex' }}>
             <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
-              <Typography variant="subtitle1" fontFamily="mabry-bold" color="#637381">
+              <Typography variant="subtitle2" fontFamily="mabry-bold" color="var(--palette-table-title-text-color)">
                 Inactive
               </Typography>
               <Box>
@@ -1071,14 +1036,20 @@ export default function ShowCluster() {
                     {numberOfInactiveSeedPeers}
                   </Typography>
                 )}
-                <Typography variant="body2" color="var(--table-title-text-color)">
-                  number of inactive seed peers
-                </Typography>
+
+                <Box className={styles.navigationCount}>
+                  <span className={styles.navigationCountIcon}>
+                    <Count />
+                  </span>
+                  <Typography variant="body2" color="var(--palette-table-title-text-color)">
+                    number of inactive seed peers
+                  </Typography>
+                </Box>
               </Box>
             </Box>
           </Box>
           <Box className={styles.navigation} />
-          <Box component="img" className={styles.navigationIcon} src="/icons/cluster/scheduler/inactive.svg" />
+          <Inactive className={styles.navigationIcon} />
         </Card>
       </Box>
       <Box className={styles.searchContainer}>
@@ -1132,7 +1103,7 @@ export default function ShowCluster() {
           />
         </Stack>
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          <List component="nav" aria-label="Device settings" sx={{ bgcolor: 'background.paper' }}>
+          <List component="nav" aria-label="Device settings">
             <ListItemButton
               id="lock-button"
               aria-haspopup="listbox"
@@ -1159,6 +1130,10 @@ export default function ShowCluster() {
               role: 'listbox',
             }}
             sx={{
+              '& .MuiMenu-paper': {
+                boxShadow: 'var(--custom-shadows-dropdown)',
+                borderRadius: '0.6rem',
+              },
               '& .MuiMenu-list': {
                 p: 0,
                 width: '10rem',
@@ -1171,7 +1146,12 @@ export default function ShowCluster() {
               </Typography>
               <Divider sx={{ mb: '0.2rem' }} />
               {statusList.map((item, index) => (
-                <MenuItem key={item.name} value={item.name} onClick={() => handleMenuItemClick(item)}>
+                <MenuItem
+                  className={styles.menuItem}
+                  key={item.name}
+                  value={item.name}
+                  onClick={() => handleMenuItemClick(item)}
+                >
                   {item.lable}
                 </MenuItem>
               ))}
@@ -1184,6 +1164,7 @@ export default function ShowCluster() {
               border: `1px solid var(--palette-action-hover)`,
               flexWrap: 'wrap',
               ml: '1rem',
+              backgroundColor: 'var(--palette-background-paper)',
             })}
           >
             <StyledToggleButtonGroup
@@ -1194,10 +1175,10 @@ export default function ShowCluster() {
               aria-label="text alignment"
             >
               <ToggleButton id="card" value="card" aria-label="centered">
-                <Box component="img" src="/icons/cluster/scheduler/card.svg" />
+                <SelectCard />
               </ToggleButton>
               <ToggleButton id="table" value="table" aria-label="left aligned">
-                <Box component="img" src="/icons/cluster/scheduler/table.svg" />
+                <SelectTable />
               </ToggleButton>
             </StyledToggleButtonGroup>
           </Paper>
@@ -1208,9 +1189,9 @@ export default function ShowCluster() {
           {isLoading ? (
             <Card className={styles.loadingCard}>
               <Box className={styles.clusterListContent}>
-                <Box p="1.2rem 1.2rem 0 1.2rem">
+                <Box p="1.2rem">
                   <Box display="flex" mb="0.5rem">
-                    <img className={styles.idIcon} src="/icons/cluster/id.svg" alt="" />
+                    <ID className={styles.idIcon} />
                     <Skeleton data-testid="isloading" sx={{ width: '1rem' }} />
                   </Box>
                   <Typography variant="h6" mb="0.5rem" className={styles.nameText}>
@@ -1223,12 +1204,11 @@ export default function ShowCluster() {
                 <Divider
                   sx={{
                     borderStyle: 'dashed',
-                    borderColor: 'var(--palette-divider)',
+                    borderColor: 'var(--palette-palette-divider)',
                     borderWidth: '0px 0px thin',
-                    m: '1rem 0',
                   }}
                 />
-                <Box p="0 1.2rem 1.2rem 1.2rem">
+                <Box p="1.2rem">
                   <Skeleton data-testid="isloading" sx={{ width: '4rem', height: '1.4rem', mb: '0.8rem' }} />
                   <Skeleton data-testid="isloading" sx={{ width: '6rem' }} />
                 </Box>
@@ -1239,7 +1219,7 @@ export default function ShowCluster() {
               {Array.isArray(allseedPeers) &&
                 allseedPeers.map((item: any) => (
                   <Card className={styles.card}>
-                    <Box p="1.5rem 1.5rem 1rem 1.5rem" position="relative">
+                    <Box p="1.2rem" position="relative">
                       <IconButton
                         onClick={(event: any) => {
                           setSeedPeerAnchorElement(event.currentTarget);
@@ -1253,7 +1233,7 @@ export default function ShowCluster() {
                         aria-expanded={Boolean(seedPeerAnchorElement) ? 'true' : undefined}
                         className={styles.moreVertIcon}
                       >
-                        <MoreVertIcon color="action" />
+                        <MoreVertIcon sx={{ color: 'var(--palette-color)' }} />
                       </IconButton>
                       <Menu
                         anchorEl={seedPeerAnchorElement}
@@ -1270,17 +1250,18 @@ export default function ShowCluster() {
                         }}
                         sx={{
                           '& .MuiMenu-paper': {
-                            boxShadow:
-                              '0 0.075rem 0.2rem -0.0625rem #32325d40, 0 0.0625rem 0.0145rem -0.0625rem #0000004d',
+                            boxShadow: 'var(--custom-shadows-dropdown)',
+                            borderRadius: '0.6rem',
                           },
                           '& .MuiMenu-list': {
-                            p: 0,
                             width: '9rem',
+                            p: '0',
                           },
                         }}
                       >
                         <Box className={styles.menu}>
                           <MenuItem
+                            className={styles.menuItem}
                             id={`view-${seedPeerSelectedRow?.host_name}`}
                             onClick={() => {
                               navigate(`/clusters/${params.id}/seed-peers/${seedPeerSelectedRow?.id}`);
@@ -1295,6 +1276,7 @@ export default function ShowCluster() {
                             </Typography>
                           </MenuItem>
                           <MenuItem
+                            className={styles.menuItem}
                             id={`delete-${seedPeerSelectedRow?.host_name}`}
                             onClick={() => {
                               openHandleSeedPeer(seedPeerSelectedRow);
@@ -1302,12 +1284,12 @@ export default function ShowCluster() {
                             }}
                           >
                             <ListItemIcon>
-                              <DeleteIcon fontSize="small" sx={{ color: 'var(--delete-button-color)' }} />
+                              <DeleteIcon fontSize="small" sx={{ color: 'var(--palette-delete-button-color)' }} />
                             </ListItemIcon>
                             <Typography
                               variant="body1"
                               className={styles.menuText}
-                              sx={{ color: 'var(--delete-button-color)' }}
+                              sx={{ color: 'var(--palette-delete-button-color)' }}
                             >
                               Delete
                             </Typography>
@@ -1315,7 +1297,7 @@ export default function ShowCluster() {
                         </Box>
                       </Menu>
                       <Box display="flex">
-                        <img className={styles.idIcon} src="/icons/cluster/id.svg" alt="" />
+                        <ID className={styles.idIcon} />{' '}
                         {isLoading ? (
                           <Skeleton data-testid="isloading" sx={{ width: '1rem' }} />
                         ) : (
@@ -1341,7 +1323,7 @@ export default function ShowCluster() {
                         </RouterLink>
                       </MuiTooltip>
                       <Box sx={{ display: 'flex', width: '50%', alignItems: 'center' }}>
-                        <Box component="img" className={styles.statusIcon} src="/icons/cluster/status.svg" />
+                        <Status className={styles.statusIcon} />
                         <Chip
                           label={_.upperFirst(item?.state) || ''}
                           size="small"
@@ -1351,10 +1333,12 @@ export default function ShowCluster() {
                             borderRadius: '0.2rem',
                             backgroundColor:
                               item?.state === 'active'
-                                ? 'var(--menu-background-color)'
+                                ? 'var(--palette-grey-background-color)'
                                 : 'var(--palette-background-inactive)',
                             color:
-                              item?.state === 'active' ? 'var(--description-color)' : 'var(--table-title-text-color)',
+                              item?.state === 'active'
+                                ? 'var(--palette-description-color)'
+                                : 'var(--palette-table-title-text-color)',
                             border: 0,
                             fontFamily: 'mabry-bold',
                           }}
@@ -1364,36 +1348,32 @@ export default function ShowCluster() {
                     <Divider
                       sx={{
                         borderStyle: 'dashed',
-                        borderColor: 'var(--palette-divider)',
+                        borderColor: 'var(--palette-palette-divider)',
                         borderWidth: '0px 0px thin',
                       }}
                     />
-                    <Box p="1.5rem">
+                    <Box p="1.2rem">
                       <Box className={styles.cardContent}>
                         <Box className={styles.portContainer}>
-                          <Box component="img" className={styles.portIcon} src="/icons/cluster/ip.svg" />
+                          <IP className={styles.portIcon} />
                           <Typography id={`card-ip-${item.id}`} variant="caption" sx={{ color: '#919EAB' }}>
                             {item.ip}
                           </Typography>
                         </Box>
                         <Box className={styles.portContainer}>
-                          <Box component="img" className={styles.portIcon} src="/icons/cluster/seed-peer/type.svg" />
+                          <Type className={styles.portIcon} />
                           <Typography id={`card-type-${item.id}`} variant="caption" sx={{ color: '#919EAB' }}>
                             {_.upperFirst(item?.type) || ''}
                           </Typography>
                         </Box>
                         <Box className={styles.portContainer}>
-                          <Box component="img" className={styles.portIcon} src="/icons/cluster/seed-peer/port.svg" />
+                          <Port className={styles.portIcon} />
                           <Typography id={`card-port-${item.id}`} variant="caption" sx={{ color: '#919EAB' }}>
                             {_.upperFirst(item?.port) || ''}
                           </Typography>
                         </Box>
                         <Box className={styles.portContainer}>
-                          <Box
-                            component="img"
-                            className={styles.portIcon}
-                            src="/icons/cluster/seed-peer/download-port.svg"
-                          />
+                          <DownloadPort className={styles.portIcon} />
                           <Typography id={`card-download-port-${item.id}`} variant="caption" sx={{ color: '#919EAB' }}>
                             {_.upperFirst(item?.download_port) || ''}
                           </Typography>
@@ -1405,7 +1385,7 @@ export default function ShowCluster() {
             </Box>
           ) : (
             <Card className={styles.noData}>
-              <Box component="img" className={styles.nodataIcon} src="/icons/cluster/scheduler/ic-content.svg" />
+              <IcContent className={styles.nodataIcon} />
               <Typography id="no-seed-peer" variant="h6" className={styles.nodataText}>
                 You don't have seed peer cluster.
               </Typography>
@@ -1416,50 +1396,50 @@ export default function ShowCluster() {
         <Card>
           <Box width="100%">
             <Table sx={{ minWidth: 650 }} aria-label="a dense table" id="seed-peer-table">
-              <TableHead sx={{ backgroundColor: 'var(--table-title-color)' }}>
+              <TableHead sx={{ backgroundColor: 'var(--palette-table-title-color)' }}>
                 <TableRow>
-                  <TableCell align="center">
-                    <Typography variant="subtitle1" className={styles.tableHeader}>
+                  <TableCell align="center" className={styles.tableHeader}>
+                    <Typography variant="subtitle1" className={styles.tableHeaderText}>
                       ID
                     </Typography>
                   </TableCell>
-                  <TableCell align="center">
-                    <Typography variant="subtitle1" className={styles.tableHeader}>
+                  <TableCell align="center" className={styles.tableHeader}>
+                    <Typography variant="subtitle1" className={styles.tableHeaderText}>
                       Hostname
                     </Typography>
                   </TableCell>
-                  <TableCell align="center">
-                    <Typography variant="subtitle1" className={styles.tableHeader}>
+                  <TableCell align="center" className={styles.tableHeader}>
+                    <Typography variant="subtitle1" className={styles.tableHeaderText}>
                       IP
                     </Typography>
                   </TableCell>
-                  <TableCell align="center">
-                    <Typography variant="subtitle1" className={styles.tableHeader}>
+                  <TableCell align="center" className={styles.tableHeader}>
+                    <Typography variant="subtitle1" className={styles.tableHeaderText}>
                       Port
                     </Typography>
                   </TableCell>
-                  <TableCell align="center">
-                    <Typography variant="subtitle1" className={styles.tableHeader}>
+                  <TableCell align="center" className={styles.tableHeader}>
+                    <Typography variant="subtitle1" className={styles.tableHeaderText}>
                       Download Port
                     </Typography>
                   </TableCell>
-                  <TableCell align="center">
-                    <Typography variant="subtitle1" className={styles.tableHeader}>
+                  <TableCell align="center" className={styles.tableHeader}>
+                    <Typography variant="subtitle1" className={styles.tableHeaderText}>
                       Object Storage Port
                     </Typography>
                   </TableCell>
-                  <TableCell align="center">
-                    <Typography variant="subtitle1" className={styles.tableHeader}>
+                  <TableCell align="center" className={styles.tableHeader}>
+                    <Typography variant="subtitle1" className={styles.tableHeaderText}>
                       Type
                     </Typography>
                   </TableCell>
-                  <TableCell align="center">
-                    <Typography variant="subtitle1" className={styles.tableHeader}>
+                  <TableCell align="center" className={styles.tableHeader}>
+                    <Typography variant="subtitle1" className={styles.tableHeaderText}>
                       Status
                     </Typography>
                   </TableCell>
-                  <TableCell align="center">
-                    <Typography variant="subtitle1" className={styles.tableHeader}>
+                  <TableCell align="center" className={styles.tableHeader}>
+                    <Typography variant="subtitle1" className={styles.tableHeaderText}>
                       Operation
                     </Typography>
                   </TableCell>
@@ -1540,7 +1520,7 @@ export default function ShowCluster() {
                                 component={Link}
                                 to={`/clusters/${params.id}/seed-peers/${item?.id}`}
                                 underline="hover"
-                                sx={{ color: 'var(--description-color)' }}
+                                color="var(--palette-description-color)"
                               >
                                 {item?.host_name}
                               </RouterLink>
@@ -1568,51 +1548,60 @@ export default function ShowCluster() {
                                 sx={{
                                   borderRadius: '0.2rem',
                                   backgroundColor:
-                                    item?.state === 'active' ? 'var(--description-color)' : 'var(--button-color)',
+                                    item?.state === 'active'
+                                      ? 'var(--palette-description-color)'
+                                      : 'var(--palette-dark-300Channel)',
                                   color: item?.state === 'active' ? '#FFFFFF' : '#FFFFFF',
                                   borderColor:
-                                    item?.state === 'active' ? 'var(--description-color)' : 'var(--button-color)',
+                                    item?.state === 'active'
+                                      ? 'var(--palette-description-color)'
+                                      : 'var(--palette-dark-300Channel)',
                                   fontWeight: 'bold',
                                 }}
                               />
                             </TableCell>
                             <TableCell align="center">
                               <IconButton
+                                id={`operation-${item?.id}`}
                                 onClick={(event: any) => {
                                   setSeedPeerAnchorElement(event.currentTarget);
                                   setSeedPeerSelectedRow(item);
                                   setSeedPeerSelectedID(item.id);
                                 }}
                                 size="small"
-                                id={`operation-${item?.id}`}
                                 aria-controls={Boolean(seedPeerAnchorElement) ? item?.host_name : undefined}
                                 aria-haspopup="true"
                                 aria-expanded={Boolean(seedPeerAnchorElement) ? 'true' : undefined}
-                                sx={{ position: 'relative' }}
                               >
-                                <MoreVertIcon color="action" />
+                                <MoreVertIcon sx={{ color: 'var(--palette-color)' }} />
                               </IconButton>
                               <Menu
                                 anchorEl={seedPeerAnchorElement}
                                 id={seedPeerSelectedRow?.host_name}
                                 open={Boolean(seedPeerAnchorElement)}
                                 onClose={handleClose}
+                                anchorOrigin={{
+                                  vertical: 'bottom',
+                                  horizontal: 'right',
+                                }}
+                                transformOrigin={{
+                                  vertical: 'top',
+                                  horizontal: 'right',
+                                }}
                                 sx={{
-                                  position: 'absolute',
-                                  left: '-4.5rem',
-
                                   '& .MuiMenu-paper': {
-                                    boxShadow:
-                                      '0 0.075rem 0.2rem -0.0625rem #32325d40, 0 0.0625rem 0.0145rem -0.0625rem #0000004d',
+                                    boxShadow: 'var(--custom-shadows-dropdown)',
+                                    borderRadius: '0.6rem',
                                   },
                                   '& .MuiMenu-list': {
-                                    p: 0,
-                                    width: '9rem',
+                                    width: '11rem',
+                                    p: '0',
                                   },
                                 }}
                               >
                                 <Box className={styles.menu}>
                                   <MenuItem
+                                    className={styles.menuItem}
                                     id={`view-${seedPeerSelectedRow?.host_name}`}
                                     onClick={() => {
                                       navigate(`/clusters/${params.id}/seed-peers/${seedPeerSelectedRow?.id}`);
@@ -1627,6 +1616,7 @@ export default function ShowCluster() {
                                     </Typography>
                                   </MenuItem>
                                   <MenuItem
+                                    className={styles.menuItem}
                                     id={`delete-${seedPeerSelectedRow?.host_name}`}
                                     onClick={() => {
                                       openHandleSeedPeer(seedPeerSelectedRow);
@@ -1634,12 +1624,15 @@ export default function ShowCluster() {
                                     }}
                                   >
                                     <ListItemIcon>
-                                      <DeleteIcon fontSize="small" sx={{ color: 'var(--delete-button-color)' }} />
+                                      <DeleteIcon
+                                        fontSize="small"
+                                        sx={{ color: 'var(--palette-delete-button-color)' }}
+                                      />
                                     </ListItemIcon>
                                     <Typography
                                       variant="body2"
                                       className={styles.menuText}
-                                      sx={{ color: 'var(--delete-button-color)' }}
+                                      sx={{ color: 'var(--palette-delete-button-color)' }}
                                     >
                                       Delete
                                     </Typography>
@@ -1665,7 +1658,7 @@ export default function ShowCluster() {
       >
         <DialogContent>
           <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-            <Box component="img" className={styles.deleteClusterIcon} src="/icons/cluster/delete.svg" />
+            <Delete className={styles.deleteClusterIcon} />
             <Typography fontFamily="mabry-bold" pt="1rem">
               Are you sure you want to delet this seed peer?
             </Typography>
@@ -1690,7 +1683,7 @@ export default function ShowCluster() {
         </DialogContent>
       </Dialog>
       {seedPeerTotalPages > 1 ? (
-        <Box display="flex" justifyContent="flex-end" sx={{ marginTop: theme.spacing(2) }}>
+        <Box display="flex" justifyContent="flex-end" sx={{ marginTop: '2rem' }}>
           <Pagination
             count={seedPeerTotalPages}
             page={seedPeerPage}
@@ -1721,6 +1714,6 @@ export default function ShowCluster() {
       ) : (
         <></>
       )}
-    </ThemeProvider>
+    </Box>
   );
 }
diff --git a/src/components/clusters/seed-peers/show.module.css b/src/components/clusters/seed-peers/show.module.css
index 96dfcc1..7ed79de 100644
--- a/src/components/clusters/seed-peers/show.module.css
+++ b/src/components/clusters/seed-peers/show.module.css
@@ -35,8 +35,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--button-color);
-  color: var(--save-size-color);
+  background-color: var(--palette-button-color);
+  color: var(--palette-button-text-color);
   border-radius: 0.3rem;
   min-width: 1.6rem;
   padding: 0.2rem 0.4rem;
diff --git a/src/components/clusters/seed-peers/show.tsx b/src/components/clusters/seed-peers/show.tsx
index 099d15a..4caad62 100644
--- a/src/components/clusters/seed-peers/show.tsx
+++ b/src/components/clusters/seed-peers/show.tsx
@@ -1,4 +1,3 @@
-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';
 import { getSeedPeer, getSeedPeerResponse } from '../../../lib/api';
@@ -8,6 +7,17 @@ import styles from './show.module.css';
 import _ from 'lodash';
 import { useParams, Link, useLocation } from 'react-router-dom';
 import Card from '../../card';
+import { ReactComponent as ID } from '../../../assets/images/cluster/scheduler/scheduler-id.svg';
+import { ReactComponent as Hostname } from '../../../assets/images/cluster/scheduler/hostname.svg';
+import { ReactComponent as IP } from '../../../assets/images/cluster/scheduler/scheduler-ip.svg';
+import { ReactComponent as ClusterID } from '../../../assets/images/cluster/scheduler/cluster-id.svg';
+import { ReactComponent as Type } from '../../../assets/images/cluster/seed-peer/seed-peer-type.svg';
+import { ReactComponent as Status } from '../../../assets/images/cluster/scheduler/status.svg';
+import { ReactComponent as Port } from '../../../assets/images/cluster/scheduler/port.svg';
+import { ReactComponent as DownloadPort } from '../../../assets/images/cluster/seed-peer/seed-peer-download-port.svg';
+import { ReactComponent as ObjectStoragePort } from '../../../assets/images/cluster/seed-peer/object-storage-port.svg';
+import { ReactComponent as CreatedAt } from '../../../assets/images/cluster/scheduler/created-at.svg';
+import { ReactComponent as UpdatedAt } from '../../../assets/images/cluster/scheduler/updated-at.svg';
 
 export default function SeedPeer() {
   const [isLoading, setIsLoading] = useState(false);
@@ -61,6 +71,7 @@ export default function SeedPeer() {
           {errorMessageText}
         </Alert>
       </Snackbar>
+      <Typography variant="h5">Seed-Peer</Typography>
       <Breadcrumbs
         separator={
           <Box
@@ -68,7 +79,7 @@ export default function SeedPeer() {
           />
         }
         aria-label="breadcrumb"
-        sx={{ mb: '1rem' }}
+        sx={{ mb: '2rem', mt: '1rem' }}
       >
         <RouterLink component={Link} underline="hover" color="inherit" to={`/clusters`}>
           clusters
@@ -81,13 +92,10 @@ export default function SeedPeer() {
         </RouterLink>
         <Typography color="text.primary">{seedPeer?.host_name || '-'}</Typography>
       </Breadcrumbs>
-      <Typography variant="h6" sx={{ p: '1rem 0 2rem 0', fontFamily: 'mabry-bold' }}>
-        Seed-Peer
-      </Typography>
       <Card className={styles.container}>
         <Box className={styles.headerContainer}>
           <Box className={styles.headerContent}>
-            <Box component="img" className={styles.headerIcon} src="/icons/cluster/scheduler/scheduler-id.svg" />
+            <ID className={styles.headerIcon} />
             <Typography className={styles.headerTitle} variant="body1" component="div">
               ID
             </Typography>
@@ -98,7 +106,7 @@ export default function SeedPeer() {
         </Box>
         <Box className={styles.headerContainer}>
           <Box className={styles.headerContent}>
-            <Box component="img" className={styles.headerIcon} src="/icons/cluster/scheduler/hostname.svg" />
+            <Hostname className={styles.headerIcon} />
             <Typography className={styles.headerTitle} variant="body1" component="div">
               Hostname
             </Typography>
@@ -109,7 +117,7 @@ export default function SeedPeer() {
         </Box>
         <Box className={styles.headerContainer}>
           <Box className={styles.headerContent}>
-            <Box component="img" className={styles.headerIcon} src="/icons/cluster/scheduler/scheduler-ip.svg" />
+            <IP className={styles.headerIcon} />
             <Typography className={styles.headerTitle} variant="body1" component="div">
               IP
             </Typography>
@@ -120,7 +128,7 @@ export default function SeedPeer() {
         </Box>
         <Box className={styles.headerContainer}>
           <Box className={styles.headerContent}>
-            <Box component="img" className={styles.headerIcon} src="/icons/cluster/scheduler/cluster-id.svg" />
+            <ClusterID className={styles.headerIcon} />
             <Typography className={styles.headerTitle} variant="body1" component="div">
               Cluster ID
             </Typography>
@@ -137,7 +145,7 @@ export default function SeedPeer() {
         </Box>
         <Box className={styles.headerContainer}>
           <Box className={styles.headerContent}>
-            <Box component="img" className={styles.headerIcon} src="/icons/cluster/seed-peer/seed-peer-type.svg" />
+            <Type className={styles.headerIcon} />
             <Typography className={styles.headerTitle} variant="body1" component="div">
               Type
             </Typography>
@@ -152,7 +160,7 @@ export default function SeedPeer() {
         </Box>
         <Box className={styles.headerContainer}>
           <Box className={styles.headerContent}>
-            <Box component="img" className={styles.headerIcon} src="/icons/cluster/scheduler/status.svg" />
+            <Status className={styles.headerIcon} />
             <Typography className={styles.headerTitle} variant="body1" component="div">
               Status
             </Typography>
@@ -168,20 +176,38 @@ export default function SeedPeer() {
                 variant="outlined"
                 sx={{
                   borderRadius: '0.25rem',
-                  backgroundColor: seedPeer?.state === 'active' ? 'var(--description-color)' : 'var(--button-color)',
+                  backgroundColor:
+                    seedPeer?.state === 'active'
+                      ? 'var(--palette-description-color)'
+                      : 'var(--palette-dark-300Channel)',
                   color: seedPeer?.state === 'active' ? '#FFFFFF' : '#FFFFFF',
-                  borderColor: seedPeer?.state === 'active' ? 'var(--description-color)' : 'var(--button-color)',
+                  borderColor:
+                    seedPeer?.state === 'active'
+                      ? 'var(--palette-description-color)'
+                      : 'var(--palette-dark-300Channel)',
                   fontWeight: 'bold',
                 }}
               />
             ) : (
-              '-'
+              <Chip
+                label={'-'}
+                size="small"
+                id="status"
+                variant="outlined"
+                sx={{
+                  borderRadius: '0.25rem',
+                  backgroundColor: 'var(--palette-description-color)',
+                  color: '#FFFFFF',
+                  borderColor: 'var(--palette-description-color)',
+                  fontWeight: 'bold',
+                }}
+              />
             )}
           </Typography>
         </Box>
         <Box className={styles.headerContainer}>
           <Box className={styles.headerContent}>
-            <Box component="img" className={styles.headerIcon} src="/icons/cluster/scheduler/port.svg" />
+            <Port className={styles.headerIcon} />
             <Typography className={styles.headerTitle} variant="body1" component="div">
               Port
             </Typography>
@@ -192,11 +218,7 @@ export default function SeedPeer() {
         </Box>
         <Box className={styles.headerContainer}>
           <Box className={styles.headerContent}>
-            <Box
-              component="img"
-              className={styles.headerIcon}
-              src="/icons/cluster/seed-peer/seed-peer-download-port.svg"
-            />
+            <DownloadPort className={styles.headerIcon} />
             <Typography className={styles.headerTitle} variant="body1" component="div">
               Download Port
             </Typography>
@@ -207,7 +229,7 @@ export default function SeedPeer() {
         </Box>
         <Box className={styles.headerContainer}>
           <Box className={styles.headerContent}>
-            <Box component="img" className={styles.headerIcon} src="/icons/cluster/seed-peer/object-storage-port.svg" />
+            <ObjectStoragePort className={styles.headerIcon} />
             <Typography className={styles.headerTitle} variant="body1" component="div">
               Object Storage Port
             </Typography>
@@ -222,7 +244,7 @@ export default function SeedPeer() {
         </Box>
         <Box className={styles.headerContainer}>
           <Box className={styles.headerContent}>
-            <Box component="img" className={styles.headerIcon} src="/icons/cluster/scheduler/created-at.svg" />
+            <CreatedAt className={styles.headerIcon} />
             <Typography className={styles.headerTitle} variant="body1" component="div">
               Created At
             </Typography>
@@ -244,7 +266,7 @@ export default function SeedPeer() {
         </Box>
         <Box className={styles.headerContainer}>
           <Box className={styles.headerContent}>
-            <Box component="img" className={styles.headerIcon} src="/icons/cluster/scheduler/updated-at.svg" />
+            <UpdatedAt className={styles.headerIcon} />
             <Typography className={styles.headerTitle} variant="body1" component="div">
               Updated At
             </Typography>
diff --git a/src/components/clusters/show.module.css b/src/components/clusters/show.module.css
index dfb3879..4b6aa3f 100644
--- a/src/components/clusters/show.module.css
+++ b/src/components/clusters/show.module.css
@@ -5,231 +5,7 @@
   align-items: center;
 }
 
-.updateClusterIcon {
+.tableIcon {
   width: 1.4rem;
   height: 1.4rem;
-  margin-right: 0.4rem;
-}
-
-.deleteClusterIcon {
-  width: 6rem;
-  height: 6rem;
-}
-
-.ipContainer {
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-}
-
-.ipIcon {
-  width: 1.4rem;
-  height: 1.4rem;
-  margin-right: 0.4rem;
-}
-
-.searchContainer {
-  display: flex;
-  justify-content: flex-start;
-  margin-right: 1rem;
-  margin-top: 0.6rem;
-  margin-bottom: 0.6rem;
-}
-
-.openDeleteInactiveDialog {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: 1rem 0;
-}
-
-.successfulLog {
-  padding: 0rem !important;
-}
-
-.deleteInactiveWrapper {
-  padding: 1rem;
-}
-
-.schedulerInactiveCountWrapper {
-  display: flex;
-  align-items: center;
-  padding: 0.8rem 1rem;
-}
-
-.schedulerInactiveList {
-  display: flex;
-  padding: 0.8rem 1rem !important;
-}
-
-.schedulerInactiveListTitle {
-  display: flex;
-  padding: 0.6rem 1rem;
-  background-color: #f7f7f7 !important;
-}
-
-.noInactiveScheduler {
-  padding: 1rem 0;
-  display: flex;
-  justify-content: center;
-  margin: auto;
-}
-
-.schedulerInactiveHeaderID {
-  width: 20%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: flex;
-  align-items: center;
-}
-
-.schedulerInactiveHeaderHostname {
-  width: 50%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: flex;
-  align-items: center;
-}
-
-.schedulerInactiveHeaderIP {
-  width: 25%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: flex;
-  align-items: center;
-}
-
-.schedulerInactiveID {
-  display: flex;
-  align-items: center;
-  width: 20%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.schedulerInactiveHostname {
-  width: 50%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-right: 1rem;
-}
-
-.schedulerInactiveIP {
-  width: 25%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.circularProgressWrapper {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin: 1rem auto;
-}
-
-.logHeaderWrapper {
-  display: flex;
-  margin-bottom: 2rem;
-}
-
-.headerContainer {
-  width: 33.333%;
-  margin-right: 0.6rem;
-  padding: 0.8rem;
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-}
-
-.headerContainer:last-child {
-  margin-right: 0;
-  position: relative;
-}
-
-.successHeaderContainer {
-  width: 50%;
-  margin-right: 1rem;
-  padding: 1rem;
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-}
-
-.successHeaderContainer:last-child {
-  margin-right: 0;
-}
-
-.headerIcon {
-  width: 3rem;
-  height: 3rem;
-  margin-right: '0.5rem';
-}
-
-.headerErrorIcon {
-  width: 2.2rem;
-  height: 2.2rem;
-}
-
-.headerContent {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.4rem;
-}
-
-.doughnut {
-  width: 6rem;
-  height: 6rem;
-}
-
-.hostnameText {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.featuresIconWrapper {
-  width: 2.4rem;
-  height: 2.4rem;
-  border-radius: 50%;
-  background-color: #fbfbfb;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 0.6rem;
-}
-
-.featuresIconContainer {
-  width: 1.8rem;
-  height: 1.8rem;
-  border-radius: 50%;
-  background-color: #efefef;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.featuresIcon {
-  width: 1.2rem;
-  height: 1.2rem;
-}
-
-.menuItem:hover {
-  background-color: var(--button-color) !important;
-  color: var(--save-size-color);
-}
-
-.menuItemIcon {
-  color: var(--button-color);
-}
-
-.menuItem:hover .menuItemIcon {
-  color: var(--save-size-color);
 }
diff --git a/src/components/clusters/show.tsx b/src/components/clusters/show.tsx
index 3909876..47952cf 100644
--- a/src/components/clusters/show.tsx
+++ b/src/components/clusters/show.tsx
@@ -1,13 +1,4 @@
-import {
-  Breadcrumbs,
-  createTheme,
-  styled,
-  ThemeProvider,
-  Typography,
-  Link as RouterLink,
-  Snackbar,
-  Alert,
-} from '@mui/material';
+import { Breadcrumbs, styled, Typography, Link as RouterLink, Snackbar, Alert } from '@mui/material';
 import { Link, Outlet, useLocation, useParams } from 'react-router-dom';
 import * as React from 'react';
 import Box from '@mui/material/Box';
@@ -15,17 +6,11 @@ import Tabs from '@mui/material/Tabs';
 import Tab, { TabProps } from '@mui/material/Tab';
 import { createContext, useEffect, useState } from 'react';
 import { getCluster, getClusterResponse } from '../../lib/api';
-
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: '#2e8f79',
-    },
-  },
-  typography: {
-    fontFamily: 'mabry-light,sans-serif',
-  },
-});
+import { ReactComponent as TabCluster } from '../../assets/images/cluster/tab-cluster.svg';
+import { ReactComponent as TabScheduler } from '../../assets/images/cluster/scheduler/tab-scheduler.svg';
+import { ReactComponent as TabSeedPeer } from '../../assets/images/cluster/seed-peer/tab-seed-peer.svg';
+import { ReactComponent as TabPeer } from '../../assets/images/cluster/peer/tab-peer.svg';
+import styles from './show.module.css';
 
 interface MyContextType {
   cluster: getClusterResponse;
@@ -139,60 +124,62 @@ export default function NavTabs() {
     setValue(newValue);
   };
 
-  const AntTab = styled((props: StyledTabProps) => <Tab disableRipple iconPosition="start" {...props} />)(
-    ({ theme }) => ({
-      textTransform: 'none',
+  const AntTab = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(({ theme }) => ({
+    textTransform: 'none',
+    minWidth: 0,
+    [theme.breakpoints.up('sm')]: {
       minWidth: 0,
-      [theme.breakpoints.up('sm')]: {
-        minWidth: 0,
-      },
-      fontWeight: theme.typography.fontWeightRegular,
-      marginRight: theme.spacing(1),
-      color: 'rgba(0, 0, 0, 0.85)',
-      fontSize: '0.9rem',
-      '&:hover': {
-        color: 'primary',
-        opacity: 1,
-      },
-      '&.Mui-selected': {
-        color: '#000',
-        fontFamily: 'mabry-bold',
-      },
-    }),
-  );
+    },
+    minHeight: '3rem',
+    fontWeight: theme.typography.fontWeightRegular,
+    color: 'var(--palette-grey-tab)',
+    padding: '0',
+    marginRight: '2rem',
+    fontFamily: 'mabry-bold',
+    fontSize: '0.9rem',
+    '&:hover': {
+      color: 'primary',
+      opacity: 1,
+    },
+    '&.Mui-selected': {
+      color: 'var(--palette-text-color)',
+      fontFamily: 'mabry-bold',
+    },
+  }));
 
   const AntTabs = styled(Tabs)({
-    borderBottom: '1px solid #e8e8e8',
+    borderBottom: '1px solid var(--palette-tab-border-color)',
     '& .MuiTabs-indicator': {
-      backgroundColor: 'primary',
+      backgroundColor: 'var(--palette-text-color)',
+      borderRadius: '1rem',
     },
   });
 
   const tabList = [
     {
       id: 'tab-cluster',
-      icon: <Box component="img" sx={{ width: '1.3rem' }} src="/icons/cluster/tab-cluster.svg" />,
+      icon: <TabCluster className={styles.tableIcon} />,
       label: 'Cluster',
       component: Link,
       to: `/clusters/${params.id}`,
     },
     {
       id: 'tab-cluster',
-      icon: <Box component="img" sx={{ width: '1.3rem' }} src="/icons/cluster/scheduler/tab-scheduler.svg" />,
+      icon: <TabScheduler className={styles.tableIcon} />,
       label: 'Schedulers',
       component: Link,
       to: `/clusters/${params.id}/schedulers`,
     },
     {
       id: 'tab-cluster',
-      icon: <Box component="img" sx={{ width: '1.3rem' }} src="/icons/cluster/seed-peer/tab-seed-peer.svg" />,
+      icon: <TabSeedPeer className={styles.tableIcon} />,
       label: 'Seed Peers',
       component: Link,
       to: `/clusters/${params.id}/seed-peers`,
     },
     {
       id: 'tab-cluster',
-      icon: <Box component="img" sx={{ width: '1.3rem' }} src="/icons/cluster/peer/tab-peer.svg" />,
+      icon: <TabPeer className={styles.tableIcon} />,
       label: 'Peers',
       component: Link,
       to: `/clusters/${params.id}/peers`,
@@ -209,49 +196,65 @@ export default function NavTabs() {
 
   return (
     <MyContext.Provider value={{ cluster, isLoading }}>
-      <ThemeProvider theme={theme}>
-        <Snackbar
-          open={errorMessage}
-          autoHideDuration={3000}
-          onClose={handleClose}
-          anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-        >
-          <Alert id="errorMessage" onClose={handleClose} severity="error" sx={{ width: '100%' }}>
-            {errorMessageText}
-          </Alert>
-        </Snackbar>
-        <Breadcrumbs
-          separator={
-            <Box
-              sx={{ width: '0.3rem', height: '0.3rem', backgroundColor: '#919EAB', borderRadius: '50%', m: '0 0.4rem' }}
-            />
-          }
-          aria-label="breadcrumb"
-          sx={{ mb: '1rem' }}
-        >
-          <RouterLink underline="hover" component={Link} color="text.primary" to={`/clusters`}>
-            clusters
-          </RouterLink>
-          <RouterLink component={Link} underline="hover" color="text.primary" to={`clusters/${params.id}`}>
+      <Snackbar
+        open={errorMessage}
+        autoHideDuration={3000}
+        onClose={handleClose}
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      >
+        <Alert id="errorMessage" onClose={handleClose} severity="error" sx={{ width: '100%' }}>
+          {errorMessageText}
+        </Alert>
+      </Snackbar>
+      <Breadcrumbs
+        separator={
+          <Box
+            sx={{ width: '0.3rem', height: '0.3rem', backgroundColor: '#919EAB', borderRadius: '50%', m: '0 0.4rem' }}
+          />
+        }
+        aria-label="breadcrumb"
+        sx={{ mb: '1rem' }}
+      >
+        <RouterLink variant="body1" component={Link} underline="hover" color="text.primary" to={`/clusters`}>
+          Cluster
+        </RouterLink>
+        {location.pathname.split('/')[3] ? (
+          <RouterLink
+            variant="body1"
+            component={Link}
+            underline="hover"
+            color="text.primary"
+            to={`clusters/${params.id}`}
+          >
             {cluster?.name || '-'}
           </RouterLink>
-          {location.pathname.split('/')[3] && (
-            <Typography color="inherit">{location.pathname.split('/')[3]}</Typography>
-          )}
-        </Breadcrumbs>
-        <AntTabs
-          value={value}
-          onChange={handleChange}
-          aria-label="nav tabs example"
-          sx={{ mb: '2rem' }}
-          scrollButtons="auto"
-        >
-          {tabList.map((item) => {
-            return <AntTab {...item} />;
-          })}
-        </AntTabs>
-        <Outlet />
-      </ThemeProvider>
+        ) : (
+          <Typography variant="body1" color="inherit">
+            {cluster?.name || '-'}
+          </Typography>
+        )}
+        {location.pathname.split('/')[3] && (
+          <Typography variant="body1" color="inherit">
+            {location.pathname.split('/')[3] === 'schedulers'
+              ? 'Schedulers'
+              : location.pathname.split('/')[3] === 'seed-peers'
+              ? 'Seed Peers'
+              : 'Peers'}
+          </Typography>
+        )}
+      </Breadcrumbs>
+      <AntTabs
+        value={value}
+        onChange={handleChange}
+        aria-label="nav tabs example"
+        sx={{ mb: '1.5rem' }}
+        scrollButtons="auto"
+      >
+        {tabList.map((item) => {
+          return <AntTab iconPosition="start" {...item} />;
+        })}
+      </AntTabs>
+      <Outlet />
     </MyContext.Provider>
   );
 }
diff --git a/src/components/dark-layout.module.css b/src/components/dark-layout.module.css
new file mode 100644
index 0000000..1baef12
--- /dev/null
+++ b/src/components/dark-layout.module.css
@@ -0,0 +1,15 @@
+.github {
+  width: 2rem;
+  height: 2rem;
+  color: var(--palette-secondary-dark);
+}
+
+.icon {
+  width: 1.2rem;
+  height: 1.2rem;
+}
+
+.darkModeIcon {
+  width: 1.2rem;
+  height: 1.2rem;
+}
diff --git a/src/components/dark-layout.tsx b/src/components/dark-layout.tsx
new file mode 100644
index 0000000..52e6adb
--- /dev/null
+++ b/src/components/dark-layout.tsx
@@ -0,0 +1,191 @@
+import {
+  Box,
+  FormControl,
+  FormControlLabel,
+  IconButton,
+  Link,
+  Paper,
+  styled,
+  Switch,
+  ToggleButton,
+  ToggleButtonGroup,
+  toggleButtonGroupClasses,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { ReactComponent as Dark } from '../assets/images/menu/dark.svg';
+import { ReactComponent as Light } from '../assets/images/menu/light.svg';
+import { useContext, useState } from 'react';
+import { ColorModeContext } from '../App';
+import styles from './dark-layout.module.css';
+
+interface layoutProps {
+  className?: string;
+}
+
+const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
+  [`& .${toggleButtonGroupClasses.grouped}`]: {
+    margin: theme.spacing(0.5),
+    border: 0,
+    borderRadius: theme.shape.borderRadius,
+    [`&.${toggleButtonGroupClasses.disabled}`]: {
+      border: 0,
+    },
+  },
+  [`& .${toggleButtonGroupClasses.middleButton},& .${toggleButtonGroupClasses.lastButton}`]: {
+    marginLeft: -1,
+  },
+  width: '100%',
+}));
+
+const VerticalToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
+  [`& .${toggleButtonGroupClasses.grouped}`]: {
+    margin: theme.spacing(0.5),
+    border: 0,
+    borderRadius: theme.shape.borderRadius,
+    [`&.${toggleButtonGroupClasses.disabled}`]: {
+      border: 0,
+    },
+  },
+  [`& .${toggleButtonGroupClasses.middleButton},& .${toggleButtonGroupClasses.lastButton}`]: {
+    marginTop: -1,
+  },
+}));
+
+export const HeaderLayout: React.FC<layoutProps> = ({ className }) => {
+  const theme = useTheme();
+  const colorMode = useContext(ColorModeContext);
+
+  return (
+    <Box className={className}>
+      <Paper
+        elevation={0}
+        sx={() => ({
+          display: 'inline-flex',
+          flexWrap: 'wrap',
+          bgcolor: 'var(--palette-grey-600Channel)',
+          borderRadius: '1.2rem',
+          width: '100%',
+        })}
+      >
+        <StyledToggleButtonGroup
+          size="small"
+          value={theme.palette.mode}
+          exclusive
+          onClick={colorMode.toggleColorMode}
+          aria-label="text alignment"
+        >
+          <ToggleButton
+            sx={{
+              width: '50%',
+              p: '0.4rem !important',
+              borderRadius: '1.3rem !important',
+              textTransform: 'none',
+              '&.Mui-selected': {
+                boxShadow: 'var(--palette-card-box-shadow)',
+                bgcolor: 'var(--palette-main-background-paper)',
+              },
+              '&.Mui-selected:hover': {
+                boxShadow: 'var(--palette-card-box-shadow)',
+                bgcolor: 'var(--palette-main-background-paper)',
+              },
+            }}
+            id="light"
+            value="light"
+            aria-label="left aligned"
+          >
+            <Light className={styles.darkModeIcon} />
+            <Typography variant="body2" pl="0.4rem" fontFamily="mabry-bold">
+              Light
+            </Typography>
+          </ToggleButton>
+          <ToggleButton
+            sx={{
+              width: '50%',
+              p: '0.4rem !important',
+              borderRadius: '1.3rem !important',
+              textTransform: 'none',
+              '&.Mui-selected': {
+                boxShadow: 'var(--palette-card-box-shadow)',
+                bgcolor: 'var(--palette-main-background-paper)',
+              },
+              '&.Mui-selected:hover': {
+                boxShadow: 'var(--palette-card-box-shadow)',
+                bgcolor: 'var(--palette-main-background-paper)',
+              },
+            }}
+            id="dark"
+            value="dark"
+            aria-label="centered"
+          >
+            <Dark className={styles.darkModeIcon} />
+            <Typography variant="body2" pl="0.4rem" fontFamily="mabry-bold">
+              Dark
+            </Typography>
+          </ToggleButton>
+        </StyledToggleButtonGroup>
+      </Paper>
+    </Box>
+  );
+};
+
+export const ShrinkDarkMode: React.FC<layoutProps> = ({ className }) => {
+  const theme = useTheme();
+  const colorMode = useContext(ColorModeContext);
+
+  return (
+    <Box className={className}>
+      <Paper
+        elevation={0}
+        sx={() => ({
+          display: 'inline-flex',
+          flexWrap: 'wrap',
+          backgroundColor: 'var(--palette-grey-600Channel)',
+          borderRadius: '1.2rem',
+        })}
+      >
+        <VerticalToggleButtonGroup
+          size="small"
+          value={theme.palette.mode}
+          exclusive
+          onClick={colorMode.toggleColorMode}
+          aria-label="text alignment"
+          orientation="vertical"
+        >
+          <ToggleButton
+            sx={{
+              borderRadius: '50% !important',
+              p: '0.4rem !important',
+              textTransform: 'none',
+              '&.Mui-selected': {
+                boxShadow: 'var(--palette-card-box-shadow)',
+                bgcolor: 'var(--palette-main-background-paper)',
+              },
+            }}
+            id="light"
+            value="light"
+            aria-label="left aligned"
+          >
+            <Light id="light" className={styles.icon} />
+          </ToggleButton>
+          <ToggleButton
+            sx={{
+              borderRadius: '50% !important',
+              p: '0.4rem !important',
+              textTransform: 'none',
+              '&.Mui-selected': {
+                boxShadow: 'var(--palette-card-box-shadow)',
+                bgcolor: 'var(--palette-main-background-paper)',
+              },
+            }}
+            id="dark"
+            value="dark"
+            aria-label="centered"
+          >
+            <Dark id="dark" className={styles.icon} />
+          </ToggleButton>
+        </VerticalToggleButtonGroup>
+      </Paper>
+    </Box>
+  );
+};
diff --git a/src/components/developer/tokens/edit.module.css b/src/components/developer/tokens/edit.module.css
index c669bb1..9b1c3af 100644
--- a/src/components/developer/tokens/edit.module.css
+++ b/src/components/developer/tokens/edit.module.css
@@ -1,6 +1,13 @@
 .header {
-    display: inline-flex;
-    align-items: center;
-    padding: 1rem;
-    margin-bottom: 1rem;
-  }
\ No newline at end of file
+  display: inline-flex;
+  align-items: center;
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.tokenIcon {
+  width: 2.6rem;
+  height: 2.6rem;
+  margin-right: 1rem;
+  color: var(--palette-button-color);
+}
diff --git a/src/components/developer/tokens/edit.tsx b/src/components/developer/tokens/edit.tsx
index 9d7bea0..517b783 100644
--- a/src/components/developer/tokens/edit.tsx
+++ b/src/components/developer/tokens/edit.tsx
@@ -9,37 +9,26 @@ import {
   SelectChangeEvent,
   FormControlLabel,
   Checkbox,
-  createTheme,
-  ThemeProvider,
   Snackbar,
   Alert,
   Tooltip,
   InputLabel,
   FormGroup,
   FormHelperText,
-  Paper,
   Skeleton,
+  Breadcrumbs,
+  Link as RouterLink,
 } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { formatDate, getExpiredTime } from '../../../lib/utils';
-import { useNavigate, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import { getToken, updateTokens } from '../../../lib/api';
 import HelpIcon from '@mui/icons-material/Help';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { CancelLoadingButton, SavelLoadingButton } from '../../loading-button';
 import Card from '../../card';
 import styles from './edit.module.css';
-
-const theme = createTheme({
-  palette: {
-    secondary: {
-      main: '#1c293a',
-    },
-  },
-  typography: {
-    fontFamily: 'mabry-light,sans-serif',
-  },
-});
+import { ReactComponent as Token } from '../../../assets/images/tokens/key.svg';
 
 export default function UpdateTokens() {
   const [successMessage, setSuccessMessage] = useState(false);
@@ -74,8 +63,12 @@ export default function UpdateTokens() {
           endAdornment: (
             <Tooltip title="Personal access token description." placement="top">
               <HelpIcon
-                color="disabled"
-                sx={{ width: '0.8rem', height: '0.8rem', ':hover': { color: 'var(--description-color)' } }}
+                sx={{
+                  color: 'var(--palette-grey-300Channel)',
+                  width: '0.8rem',
+                  height: '0.8rem',
+                  ':hover': { color: 'var(--palette-description-color)' },
+                }}
               />
             </Tooltip>
           ),
@@ -214,187 +207,211 @@ export default function UpdateTokens() {
           {errorMessageText}
         </Alert>
       </Snackbar>
-      <ThemeProvider theme={theme}>
-        <Typography variant="h5">Update personal access token</Typography>
-        <Divider sx={{ mt: 2, mb: 2 }} />
-        <Card className={styles.header}>
-          <Box component="img" src="/icons/tokens/key.svg" sx={{ width: '2.6rem', height: '2.6rem', mr: '1rem' }} />
-          <Box>
-            <Box sx={{ display: 'flex', alignItems: 'center' }}>
-              <Typography component="span" variant="body1" fontFamily="mabry-bold">
-                ID:&nbsp;&nbsp;
+      <Typography variant="h5">Update personal access token</Typography>
+      <Breadcrumbs
+        separator={
+          <Box
+            sx={{ width: '0.3rem', height: '0.3rem', backgroundColor: '#919EAB', borderRadius: '50%', m: '0 0.4rem' }}
+          />
+        }
+        aria-label="breadcrumb"
+        sx={{ m: '1rem 0' }}
+      >
+        <Typography color="text.primary">Developer</Typography>
+        <RouterLink component={Link} underline="hover" color="text.primary" to={`/developer/personal-access-tokens`}>
+          Personal access tokens
+        </RouterLink>
+        <Typography color="inherit">{tokens.name || ''} </Typography>
+      </Breadcrumbs>
+      <Divider sx={{ mt: 2, mb: 2 }} />
+      <Card className={styles.header}>
+        <Token className={styles.tokenIcon} />
+        <Box>
+          <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>
-              {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>
-        </Card>
-        <Box component="form" onSubmit={handleSubmit} noValidate>
-          <FormControl fullWidth>
-            <Box sx={{ display: 'flex', alignItems: 'center' }}>
-              <Typography variant="h6" fontFamily="mabry-bold" mr="0.4rem">
-                Information
+          <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>
-              <Tooltip title="  The information of personal access token." placement="top">
-                <HelpIcon
-                  color="disabled"
-                  sx={{ width: '0.8rem', height: '0.8rem', ':hover': { color: 'var(--description-color)' } }}
-                />
-              </Tooltip>
-            </Box>
-            {formList.map((item) => (
-              <TextField
-                margin="normal"
-                color="success"
-                size="small"
-                key={item.formProps.name}
-                {...item.formProps}
-                sx={{ width: '36rem' }}
-              />
-            ))}
-            <Box sx={{ display: 'flex', alignItems: 'center', mb: '1.4rem', mt: '1rem' }}>
-              <Typography variant="h6" fontFamily="mabry-bold" mr="0.4rem">
-                Expiration
-              </Typography>
-              <Tooltip title="Expiration of personal access token." placement="top">
-                <HelpIcon
-                  color="disabled"
-                  sx={{ width: '0.8rem', height: '0.8rem', ':hover': { color: 'var(--description-color)' } }}
-                />
-              </Tooltip>
-            </Box>
-            <FormControl size="small" error={expiredTimeError}>
-              <InputLabel color="secondary" required id="demo-simple-select-label">
-                Expiration
-              </InputLabel>
-              <Box display="flex" alignItems="center">
-                <Box>
-                  <Select
-                    labelId="demo-simple-select-label"
-                    id="demo-simple-select"
-                    value={selectedTime}
-                    label="Expiration"
-                    onChange={handleSelectExpiredTime}
-                    color="secondary"
-                    sx={{ width: '10rem' }}
-                  >
-                    <MenuItem value={7}>7 days</MenuItem>
-                    <MenuItem value={30}>30 days</MenuItem>
-                    <MenuItem value={60}>60 days</MenuItem>
-                    <MenuItem value={90}>90 days</MenuItem>
-                    <MenuItem value={'3650'}>10 years</MenuItem>
-                  </Select>
-                  {expiredTimeError && <FormHelperText>Please select an option.</FormHelperText>}
-                </Box>
-                <Typography variant="body2" color="text.primary" ml="1rem">
-                  The token expires on {formatDate(expiredTime) || ''}.
-                </Typography>
-              </Box>
-            </FormControl>
-            <Box sx={{ display: 'flex', alignItems: 'center', mb: '0.8rem', mt: '1rem' }}>
-              <Typography variant="h6" fontFamily="mabry-bold" mr="0.4rem">
-                Select scopes
-              </Typography>
-              <Tooltip title="Scopes define the access for personal tokens." placement="top">
-                <HelpIcon
-                  color="disabled"
-                  sx={{ width: '0.8rem', height: '0.8rem', ':hover': { color: 'var(--description-color)' } }}
-                />
-              </Tooltip>
-            </Box>
-            <Box sx={{ display: 'flex', flexDirection: 'column', ml: 3 }}>
-              <FormGroup>
-                <Box display="flex" alignItems="center">
-                  <Box width="10%">
-                    <FormControlLabel
-                      label="preheat"
-                      control={
-                        <Checkbox
-                          checked={preheat}
-                          onChange={(event: any) => {
-                            setPreheat(event.target.checked);
-                          }}
-                          sx={{ color: 'var(--button-color)!important' }}
-                        />
-                      }
-                    />
-                  </Box>
-                  <Typography variant="body2" color="rgb(82 82 82 / 87%)" ml="1rem">
-                    Full control of preheating, it's used for preheating of harbor.
-                  </Typography>
-                </Box>
-                <Box display="flex" alignItems="center">
-                  <Box width="10%">
-                    <FormControlLabel
-                      label="job"
-                      control={
-                        <Checkbox
-                          checked={job}
-                          onChange={(event: any) => {
-                            setJob(event.target.checked);
-                          }}
-                          sx={{ color: 'var(--button-color)!important' }}
-                        />
-                      }
-                    />
-                  </Box>
-                  <Typography variant="body2" color="rgb(82 82 82 / 87%)" ml="1rem">
-                    Full control of job. If you need to call preheat job through open API, it is recommended to use
-                    preheat job.
-                  </Typography>
-                </Box>
-                <Box display="flex" alignItems="center">
-                  <Box width="10%">
-                    <FormControlLabel
-                      label="cluster"
-                      control={
-                        <Checkbox
-                          checked={cluster}
-                          onChange={(event: any) => {
-                            setCluster(event.target.checked);
-                          }}
-                          sx={{ color: 'var(--button-color)!important' }}
-                        />
-                      }
-                    />
-                  </Box>
-                  <Typography variant="body2" color="rgb(82 82 82 / 87%)" ml="1rem">
-                    Full control of cluster.
-                  </Typography>
-                </Box>
-              </FormGroup>
-            </Box>
-            <Divider sx={{ mt: '1.5rem', mb: '2rem' }} />
-            <Box>
-              <CancelLoadingButton
-                id="cancel"
-                loading={loadingButton}
-                onClick={() => {
-                  navigate('/developer/personal-access-tokens');
+            )}
+          </Box>
+        </Box>
+      </Card>
+      <Box component="form" onSubmit={handleSubmit} noValidate>
+        <FormControl fullWidth>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography variant="h6" fontFamily="mabry-bold" mr="0.4rem">
+              Information
+            </Typography>
+            <Tooltip title="  The information of personal access token." placement="top">
+              <HelpIcon
+                sx={{
+                  color: 'var(--palette-grey-300Channel)',
+                  width: '0.8rem',
+                  height: '0.8rem',
+                  ':hover': { color: 'var(--palette-description-color)' },
                 }}
               />
-              <SavelLoadingButton loading={loadingButton} endIcon={<CheckCircleIcon />} id="save" text="Save" />
+            </Tooltip>
+          </Box>
+          {formList.map((item) => (
+            <TextField
+              margin="normal"
+              color="success"
+              size="small"
+              key={item.formProps.name}
+              {...item.formProps}
+              sx={{ width: '36rem' }}
+            />
+          ))}
+          <Box sx={{ display: 'flex', alignItems: 'center', mb: '1.4rem', mt: '1rem' }}>
+            <Typography variant="h6" fontFamily="mabry-bold" mr="0.4rem">
+              Expiration
+            </Typography>
+            <Tooltip title="Expiration of personal access token." placement="top">
+              <HelpIcon
+                sx={{
+                  color: 'var(--palette-grey-300Channel)',
+                  width: '0.8rem',
+                  height: '0.8rem',
+                  ':hover': { color: 'var(--palette-description-color)' },
+                }}
+              />
+            </Tooltip>
+          </Box>
+          <FormControl size="small" color="success" error={expiredTimeError}>
+            <InputLabel required id="demo-simple-select-label">
+              Expiration
+            </InputLabel>
+            <Box display="flex" alignItems="center">
+              <Box>
+                <Select
+                  labelId="demo-simple-select-label"
+                  id="demo-simple-select"
+                  value={selectedTime}
+                  label="Expiration"
+                  onChange={handleSelectExpiredTime}
+                  sx={{ width: '10rem' }}
+                >
+                  <MenuItem value={7}>7 days</MenuItem>
+                  <MenuItem value={30}>30 days</MenuItem>
+                  <MenuItem value={60}>60 days</MenuItem>
+                  <MenuItem value={90}>90 days</MenuItem>
+                  <MenuItem value={'3650'}>10 years</MenuItem>
+                </Select>
+                {expiredTimeError && <FormHelperText>Please select an option.</FormHelperText>}
+              </Box>
+              <Typography variant="body2" color="text.primary" ml="1rem">
+                The token expires on {formatDate(expiredTime) || ''}.
+              </Typography>
             </Box>
           </FormControl>
-        </Box>
-      </ThemeProvider>
+          <Box sx={{ display: 'flex', alignItems: 'center', mb: '0.8rem', mt: '1rem' }}>
+            <Typography variant="h6" fontFamily="mabry-bold" mr="0.4rem">
+              Select scopes
+            </Typography>
+            <Tooltip title="Scopes define the access for personal tokens." placement="top">
+              <HelpIcon
+                sx={{
+                  color: 'var(--palette-grey-300Channel)',
+                  width: '0.8rem',
+                  height: '0.8rem',
+                  ':hover': { color: 'var(--palette-description-color)' },
+                }}
+              />
+            </Tooltip>
+          </Box>
+          <Box sx={{ display: 'flex', flexDirection: 'column', ml: 3 }}>
+            <FormGroup>
+              <Box display="flex" alignItems="center">
+                <Box width="10%">
+                  <FormControlLabel
+                    label="preheat"
+                    control={
+                      <Checkbox
+                        checked={preheat}
+                        onChange={(event: any) => {
+                          setPreheat(event.target.checked);
+                        }}
+                        sx={{ color: 'var(--palette-button-color)!important' }}
+                      />
+                    }
+                  />
+                </Box>
+                <Typography variant="body2" color="var(--palette-text-palette-text-secondary)" ml="1rem">
+                  Full control of preheating, it's used for preheating of harbor.
+                </Typography>
+              </Box>
+              <Box display="flex" alignItems="center">
+                <Box width="10%">
+                  <FormControlLabel
+                    label="job"
+                    control={
+                      <Checkbox
+                        checked={job}
+                        onChange={(event: any) => {
+                          setJob(event.target.checked);
+                        }}
+                        sx={{ color: 'var(--palette-button-color)!important' }}
+                      />
+                    }
+                  />
+                </Box>
+                <Typography variant="body2" color="var(--palette-text-palette-text-secondary)" ml="1rem">
+                  Full control of job. If you need to call preheat job through open API, it is recommended to use
+                  preheat job.
+                </Typography>
+              </Box>
+              <Box display="flex" alignItems="center">
+                <Box width="10%">
+                  <FormControlLabel
+                    label="cluster"
+                    control={
+                      <Checkbox
+                        checked={cluster}
+                        onChange={(event: any) => {
+                          setCluster(event.target.checked);
+                        }}
+                        sx={{ color: 'var(--palette-button-color)!important' }}
+                      />
+                    }
+                  />
+                </Box>
+                <Typography variant="body2" color="var(--palette-text-palette-text-secondary)" ml="1rem">
+                  Full control of cluster.
+                </Typography>
+              </Box>
+            </FormGroup>
+          </Box>
+          <Divider sx={{ mt: '1.5rem', mb: '2rem' }} />
+          <Box>
+            <CancelLoadingButton
+              id="cancel"
+              loading={loadingButton}
+              onClick={() => {
+                navigate('/developer/personal-access-tokens');
+              }}
+            />
+            <SavelLoadingButton loading={loadingButton} endIcon={<CheckCircleIcon />} id="save" text="Save" />
+          </Box>
+        </FormControl>
+      </Box>
     </Box>
   );
 }
diff --git a/src/components/developer/tokens/index.module.css b/src/components/developer/tokens/index.module.css
index 56f9234..b2c39a2 100644
--- a/src/components/developer/tokens/index.module.css
+++ b/src/components/developer/tokens/index.module.css
@@ -5,8 +5,8 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  background-color: rgba(var(--no-data-color) / 0.04) !important;
-  border: dashed 1px rgba(var(--no-data-color) / 0.08);
+  background-color: rgba(var(--palette-no-data-color) / 0.04) !important;
+  border: dashed 1px rgba(var(--palette-no-data-color) / 0.08);
 }
 
 .nodataIcon {
@@ -23,6 +23,16 @@
   display: flex;
   align-items: center;
   padding: 0.8rem;
-  background-color: var(--menu-background-color) !important;
+  background-color: var(--palette-grey-background-color) !important;
   margin-bottom: 1rem;
 }
+
+.copyIcon {
+  width: 1.4rem;
+  height: 1.4rem;
+}
+
+.deleteIcon {
+  width: 6rem;
+  height: 6rem;
+}
diff --git a/src/components/developer/tokens/index.tsx b/src/components/developer/tokens/index.tsx
index d384a50..0f7335c 100644
--- a/src/components/developer/tokens/index.tsx
+++ b/src/components/developer/tokens/index.tsx
@@ -25,6 +25,10 @@ import { DEFAULT_PAGE_SIZE, MAX_PAGE_SIZE } from '../../../lib/constants';
 import { CancelLoadingButton, DeleteLoadingButton } from '../../loading-button';
 import Card from '../../card';
 import styles from './index.module.css';
+import { ReactComponent as Done } from '../../../assets/images/tokens/done.svg';
+import { ReactComponent as Copy } from '../../../assets/images/tokens/copy.svg';
+import { ReactComponent as IcContent } from '../../../assets/images/cluster/scheduler/ic-content.svg';
+import { ReactComponent as Delete } from '../../../assets/images/cluster/delete.svg';
 
 export default function PersonalAccessTokens() {
   const [successMessage, setSuccessMessage] = useState(false);
@@ -165,27 +169,17 @@ export default function PersonalAccessTokens() {
           {errorMessageText}
         </Alert>
       </Snackbar>
-      <Breadcrumbs
-        separator={
-          <Box
-            sx={{ width: '0.3rem', height: '0.3rem', backgroundColor: '#919EAB', borderRadius: '50%', m: '0 0.4rem' }}
-          />
-        }
-        aria-label="breadcrumb"
-        sx={{ mb: '1rem' }}
-      >
-        <Typography color="#1C293A">developer</Typography>
-        <Typography color="inherit">personal access tokens</Typography>
-      </Breadcrumbs>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
-        <Typography variant="h5">Personal access tokens</Typography>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: '1rem' }}>
+        <Typography variant="h5" id="token-title">
+          Personal access tokens
+        </Typography>
         <Button
+          id="new-tokens-button"
           size="small"
           sx={{
-            '&.MuiButton-root': {
-              backgroundColor: 'var(--button-color)',
-              color: '#fff',
-            },
+            background: 'var(--palette-button-color)',
+            color: 'var(--palette-button-text-color)',
+            ':hover': { backgroundColor: 'var(--palette-hover-button-text-color)' },
           }}
           variant="contained"
           onClick={() => {
@@ -196,7 +190,19 @@ export default function PersonalAccessTokens() {
           Add Personal access tokens
         </Button>
       </Box>
-      <Typography variant="subtitle2" mb="1.5rem" mt="1rem" color="var(--text---palette-text-secondary)">
+      <Breadcrumbs
+        separator={
+          <Box
+            sx={{ width: '0.3rem', height: '0.3rem', backgroundColor: '#919EAB', borderRadius: '50%', m: '0 0.4rem' }}
+          />
+        }
+        aria-label="breadcrumb"
+        sx={{ mb: '1rem' }}
+      >
+        <Typography color="text.primary">Developer</Typography>
+        <Typography color="inherit">Personal access tokens</Typography>
+      </Breadcrumbs>
+      <Typography variant="body2" mb="1.5rem" mt="1rem" color="var(--palette-text-palette-text-secondary)">
         Tokens you have generated that can be used to access the Dragonfly API.
       </Typography>
       {showCopyColumn ? (
@@ -226,15 +232,10 @@ export default function PersonalAccessTokens() {
                 disableTouchListener
                 title="copied!"
               >
-                <Box
-                  component="img"
-                  id="done"
-                  sx={{ width: '1.2rem', height: '1.2rem' }}
-                  src="/icons/tokens/done.svg"
-                />
+                <Done id="done" className={styles.copyIcon} />
               </Tooltip>
             ) : (
-              <Box component="img" id="copy" sx={{ width: '1.2rem', height: '1.2rem' }} src="/icons/tokens/copy.svg" />
+              <Copy id="copy" className={styles.copyIcon} />
             )}
           </IconButton>
         </Card>
@@ -261,8 +262,8 @@ export default function PersonalAccessTokens() {
         </Card>
       ) : allTokens.length === 0 ? (
         <Card className={styles.noData}>
-          <Box component="img" className={styles.nodataIcon} src="/icons/cluster/scheduler/ic-content.svg" />
-          <Typography id="no-scheduler" variant="h6" className={styles.nodataText}>
+          <IcContent className={styles.nodataIcon} />
+          <Typography id="no-tokens" variant="h6" className={styles.nodataText}>
             You don't have any tokens.
           </Typography>
         </Card>
@@ -282,7 +283,7 @@ export default function PersonalAccessTokens() {
                           component={Link}
                           to={`/developer/personal-access-tokens/${item?.id}`}
                           underline="hover"
-                          sx={{ color: 'var(--description-color)' }}
+                          sx={{ color: 'var(--palette-description-color)' }}
                         >
                           {item.name}
                         </RouterLink>
@@ -304,10 +305,9 @@ export default function PersonalAccessTokens() {
                         size="small"
                         id={`delete-token-${item?.id}`}
                         sx={{
-                          '&.MuiButton-root': {
-                            backgroundColor: 'var(--button-color)',
-                            color: '#fff',
-                          },
+                          background: 'var(--palette-button-color)',
+                          color: 'var(--palette-button-text-color)',
+                          ':hover': { backgroundColor: 'var(--palette-hover-button-text-color)' },
                         }}
                         variant="contained"
                         onClick={() => {
@@ -321,7 +321,7 @@ export default function PersonalAccessTokens() {
                   <Divider
                     sx={{
                       borderStyle: 'dashed',
-                      borderColor: 'var(--palette-divider)',
+                      borderColor: 'var(--palette-palette-divider)',
                       borderWidth: '0px 0px thin',
                     }}
                   />
@@ -338,7 +338,7 @@ export default function PersonalAccessTokens() {
                           component={Link}
                           to={`/developer/personal-access-tokens/${item?.id}`}
                           underline="hover"
-                          sx={{ color: 'var(--description-color)' }}
+                          sx={{ color: 'var(--palette-description-color)' }}
                         >
                           {item.name}
                         </RouterLink>
@@ -360,10 +360,9 @@ export default function PersonalAccessTokens() {
                         size="small"
                         id={`delete-token-${item?.id}`}
                         sx={{
-                          '&.MuiButton-root': {
-                            backgroundColor: 'var(--button-color)',
-                            color: '#fff',
-                          },
+                          background: 'var(--palette-button-color)',
+                          color: 'var(--palette-button-text-color)',
+                          ':hover': { backgroundColor: 'var(--palette-hover-button-text-color)' },
                         }}
                         variant="contained"
                         onClick={() => {
@@ -389,12 +388,7 @@ export default function PersonalAccessTokens() {
               setTokensPage(newPage);
               navigate(`/developer/personal-access-tokens${newPage > 1 ? `?page=${newPage}` : ''}`);
             }}
-            sx={{
-              '& .Mui-selected': {
-                backgroundColor: 'var(--button-color)!important',
-                color: '#FFF',
-              },
-            }}
+            color="primary"
             size="small"
           />
         </Box>
@@ -411,7 +405,7 @@ export default function PersonalAccessTokens() {
       >
         <DialogContent>
           <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-            <Box component="img" sx={{ width: '6rem', height: '6rem' }} src="/icons/cluster/delete.svg" />
+            <Delete className={styles.deleteIcon} />
             <Typography fontFamily="mabry-bold" pt="1rem">
               Are you sure you want to delete this token?
             </Typography>
diff --git a/src/components/developer/tokens/new.tsx b/src/components/developer/tokens/new.tsx
index 7a91389..38746d0 100644
--- a/src/components/developer/tokens/new.tsx
+++ b/src/components/developer/tokens/new.tsx
@@ -16,28 +16,18 @@ import {
   Tooltip,
   FormGroup,
   InputLabel,
+  Breadcrumbs,
+  Link as RouterLink,
 } from '@mui/material';
 import { useContext, useEffect, useState } from 'react';
 import { formatDate, getExpiredTime } from '../../../lib/utils';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { createTokens } from '../../../lib/api';
 import HelpIcon from '@mui/icons-material/Help';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { MyContext } from '../../menu';
 import { CancelLoadingButton, SavelLoadingButton } from '../../loading-button';
 
-const theme = createTheme({
-  palette: {
-    secondary: {
-      contrastText: '#fff',
-      main: '#1c293a',
-    },
-  },
-  typography: {
-    fontFamily: 'mabry-light,sans-serif',
-  },
-});
-
 export default function CreateTokens() {
   const [successMessage, setSuccessMessage] = useState(false);
   const [errorMessage, setErrorMessage] = useState(false);
@@ -68,8 +58,12 @@ export default function CreateTokens() {
           endAdornment: (
             <Tooltip title={`What’s this token for?`} placement="top">
               <HelpIcon
-                color="disabled"
-                sx={{ width: '0.8rem', height: '0.8rem', ':hover': { color: 'var(--description-color)' } }}
+                sx={{
+                  color: 'var(--palette-grey-300Channel)',
+                  width: '0.8rem',
+                  height: '0.8rem',
+                  ':hover': { color: 'var(--palette-description-color)' },
+                }}
               />
             </Tooltip>
           ),
@@ -102,8 +96,12 @@ export default function CreateTokens() {
           endAdornment: (
             <Tooltip title={'Personal access token description.'} placement="top">
               <HelpIcon
-                color="disabled"
-                sx={{ width: '0.8rem', height: '0.8rem', ':hover': { color: 'var(--description-color)' } }}
+                sx={{
+                  color: 'var(--palette-grey-300Channel)',
+                  width: '0.8rem',
+                  height: '0.8rem',
+                  ':hover': { color: 'var(--palette-description-color)' },
+                }}
               />
             </Tooltip>
           ),
@@ -220,166 +218,192 @@ export default function CreateTokens() {
           {errorMessageText}
         </Alert>
       </Snackbar>
-      <ThemeProvider theme={theme}>
-        <Typography variant="h5">Create personal access token</Typography>
-        <Divider sx={{ mt: 2, mb: 2 }} />
-        <Box component="form" onSubmit={handleSubmit} noValidate>
-          <FormControl fullWidth>
-            <Box sx={{ display: 'flex', alignItems: 'center' }}>
-              <Typography variant="h6" fontFamily="mabry-bold" mr="0.4rem">
-                Information
-              </Typography>
-              <Tooltip title="  The information of personal access token." placement="top">
-                <HelpIcon
-                  color="disabled"
-                  sx={{ width: '0.8rem', height: '0.8rem', ':hover': { color: 'var(--description-color)' } }}
-                />
-              </Tooltip>
-            </Box>
-            {formList.map((item) => {
-              return item?.formProps?.name === 'bio' ? (
-                <TextField
-                  margin="normal"
-                  color="success"
-                  size="small"
-                  key={item.formProps.name}
-                  {...item.formProps}
-                  sx={{ width: '36rem' }}
-                />
-              ) : (
-                <TextField
-                  margin="normal"
-                  color="success"
-                  size="small"
-                  key={item.formProps.name}
-                  {...item.formProps}
-                  sx={{ width: '18rem' }}
-                />
-              );
-            })}
-            <Box sx={{ display: 'flex', alignItems: 'center', mb: '1.4rem', mt: '1rem' }}>
-              <Typography variant="h6" fontFamily="mabry-bold" mr="0.4rem">
-                Expiration
-              </Typography>
-              <Tooltip title="Expiration of personal access token." placement="top">
-                <HelpIcon
-                  color="disabled"
-                  sx={{ width: '0.8rem', height: '0.8rem', ':hover': { color: 'var(--description-color)' } }}
-                />
-              </Tooltip>
-            </Box>
-            <FormControl size="small">
-              <InputLabel color="secondary" required id="demo-simple-select-label">
-                Expiration
-              </InputLabel>
-              <Box display="flex" alignItems="center">
-                <Select
-                  labelId="demo-simple-select-label"
-                  id="demo-simple-select"
-                  value={selectedTime}
-                  label="Expiration"
-                  onChange={handleSelectExpiredTime}
-                  color="secondary"
-                  sx={{ width: '10rem' }}
-                >
-                  <MenuItem value={7}>7 days</MenuItem>
-                  <MenuItem value={30}>30 days</MenuItem>
-                  <MenuItem value={60}>60 days</MenuItem>
-                  <MenuItem value={90}>90 days</MenuItem>
-                  <MenuItem value={'3650'}>10 years</MenuItem>
-                </Select>
-                <Typography variant="body2" color="text.primary" ml="1rem">
-                  The token expires on {formatDate(expiredTime) || ''}.
-                </Typography>
-              </Box>
-            </FormControl>
-            <Box sx={{ display: 'flex', alignItems: 'center', mb: '0.8rem', mt: '1rem' }}>
-              <Typography variant="h6" fontFamily="mabry-bold" mr="0.4rem">
-                Select scopes
-              </Typography>
-              <Tooltip title="Scopes define the access for personal tokens." placement="top">
-                <HelpIcon
-                  color="disabled"
-                  sx={{ width: '0.8rem', height: '0.8rem', ':hover': { color: 'var(--description-color)' } }}
-                />
-              </Tooltip>
-            </Box>
-            <Box sx={{ display: 'flex', flexDirection: 'column', ml: 3 }}>
-              <FormGroup>
-                <Box display="flex" alignItems="center">
-                  <Box width="10%">
-                    <FormControlLabel
-                      label="preheat"
-                      control={
-                        <Checkbox
-                          checked={preheat}
-                          onChange={(event: any) => {
-                            setPreheat(event.target.checked);
-                          }}
-                          sx={{ color: 'var(--button-color)!important' }}
-                        />
-                      }
-                    />
-                  </Box>
-                  <Typography variant="body2" color="rgb(82 82 82 / 87%)" ml="1rem">
-                    Full control of preheating, it's used for preheating of harbor.
-                  </Typography>
-                </Box>
-                <Box display="flex" alignItems="center">
-                  <Box width="10%">
-                    <FormControlLabel
-                      label="job"
-                      control={
-                        <Checkbox
-                          checked={job}
-                          onChange={(event: any) => {
-                            setJob(event.target.checked);
-                          }}
-                          sx={{ color: 'var(--button-color)!important' }}
-                        />
-                      }
-                    />
-                  </Box>
-                  <Typography variant="body2" color="rgb(82 82 82 / 87%)" ml="1rem">
-                    Full control of job. If you need to call preheat job through open API, it is recommended to use
-                    preheat job.
-                  </Typography>
-                </Box>
-                <Box display="flex" alignItems="center">
-                  <Box width="10%">
-                    <FormControlLabel
-                      label="cluster"
-                      control={
-                        <Checkbox
-                          checked={cluster}
-                          onChange={(event: any) => {
-                            setCluster(event.target.checked);
-                          }}
-                          sx={{ color: 'var(--button-color)!important' }}
-                        />
-                      }
-                    />
-                  </Box>
-                  <Typography variant="body2" color="rgb(82 82 82 / 87%)" ml="1rem">
-                    Full control of cluster.
-                  </Typography>
-                </Box>
-              </FormGroup>
-            </Box>
-            <Divider sx={{ mt: '1.5rem', mb: '2rem' }} />
-            <Box>
-              <CancelLoadingButton
-                id="cancel"
-                loading={loadingButton}
-                onClick={() => {
-                  navigate('/developer/personal-access-tokens');
+      <Typography variant="h5">Create personal access token</Typography>
+      <Breadcrumbs
+        separator={
+          <Box
+            sx={{ width: '0.3rem', height: '0.3rem', backgroundColor: '#919EAB', borderRadius: '50%', m: '0 0.4rem' }}
+          />
+        }
+        aria-label="breadcrumb"
+        sx={{ m: '1rem 0' }}
+      >
+        <Typography color="text.primary">Developer</Typography>
+        <RouterLink component={Link} underline="hover" color="text.primary" to={`/developer/personal-access-tokens`}>
+          Personal access tokens
+        </RouterLink>
+        <Typography color="inherit">New token</Typography>
+      </Breadcrumbs>
+      <Divider sx={{ mt: 2, mb: 2 }} />
+      <Box component="form" onSubmit={handleSubmit} noValidate>
+        <FormControl fullWidth>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography variant="h6" fontFamily="mabry-bold" mr="0.4rem">
+              Information
+            </Typography>
+            <Tooltip title="  The information of personal access token." placement="top">
+              <HelpIcon
+                sx={{
+                  color: 'var(--palette-grey-300Channel)',
+                  width: '0.8rem',
+                  height: '0.8rem',
+                  ':hover': { color: 'var(--palette-description-color)' },
                 }}
               />
-              <SavelLoadingButton loading={loadingButton} endIcon={<CheckCircleIcon />} id="save" text="Save" />
+            </Tooltip>
+          </Box>
+          {formList.map((item) => {
+            return item?.formProps?.name === 'bio' ? (
+              <TextField
+                margin="normal"
+                color="success"
+                size="small"
+                key={item.formProps.name}
+                {...item.formProps}
+                sx={{ width: '36rem' }}
+              />
+            ) : (
+              <TextField
+                margin="normal"
+                color="success"
+                size="small"
+                key={item.formProps.name}
+                {...item.formProps}
+                sx={{ width: '18rem' }}
+              />
+            );
+          })}
+          <Box sx={{ display: 'flex', alignItems: 'center', mb: '1.4rem', mt: '1rem' }}>
+            <Typography variant="h6" fontFamily="mabry-bold" mr="0.4rem">
+              Expiration
+            </Typography>
+            <Tooltip title="Expiration of personal access token." placement="top">
+              <HelpIcon
+                sx={{
+                  color: 'var(--palette-grey-300Channel)',
+                  width: '0.8rem',
+                  height: '0.8rem',
+                  ':hover': { color: 'var(--palette-description-color)' },
+                }}
+              />
+            </Tooltip>
+          </Box>
+          <FormControl size="small" color="success" >
+            <InputLabel required id="demo-simple-select-label">
+              Expiration
+            </InputLabel>
+            <Box display="flex" alignItems="center">
+              <Select
+                labelId="demo-simple-select-label"
+                id="demo-simple-select"
+                value={selectedTime}
+                label="Expiration"
+                onChange={handleSelectExpiredTime}
+                sx={{
+                  width: '10rem',
+                }}
+              >
+                <MenuItem value={7}>7 days</MenuItem>
+                <MenuItem value={30}>30 days</MenuItem>
+                <MenuItem value={60}>60 days</MenuItem>
+                <MenuItem value={90}>90 days</MenuItem>
+                <MenuItem value={'3650'}>10 years</MenuItem>
+              </Select>
+              <Typography variant="body2" color="text.primary" ml="1rem">
+                The token expires on {formatDate(expiredTime) || ''}.
+              </Typography>
             </Box>
           </FormControl>
-        </Box>
-      </ThemeProvider>
+          <Box sx={{ display: 'flex', alignItems: 'center', mb: '0.8rem', mt: '1rem' }}>
+            <Typography variant="h6" fontFamily="mabry-bold" mr="0.4rem">
+              Select scopes
+            </Typography>
+            <Tooltip title="Scopes define the access for personal tokens." placement="top">
+              <HelpIcon
+                sx={{
+                  color: 'var(--palette-grey-300Channel)',
+                  width: '0.8rem',
+                  height: '0.8rem',
+                  ':hover': { color: 'var(--palette-description-color)' },
+                }}
+              />
+            </Tooltip>
+          </Box>
+          <Box sx={{ display: 'flex', flexDirection: 'column', ml: 3 }}>
+            <FormGroup>
+              <Box display="flex" alignItems="center">
+                <Box width="10%">
+                  <FormControlLabel
+                    label="preheat"
+                    control={
+                      <Checkbox
+                        checked={preheat}
+                        onChange={(event: any) => {
+                          setPreheat(event.target.checked);
+                        }}
+                        sx={{ color: 'var(--palette-button-color)!important' }}
+                      />
+                    }
+                  />
+                </Box>
+                <Typography variant="body2" color="var(--palette-text-palette-text-secondary)" ml="1rem">
+                  Full control of preheating, it's used for preheating of harbor.
+                </Typography>
+              </Box>
+              <Box display="flex" alignItems="center">
+                <Box width="10%">
+                  <FormControlLabel
+                    label="job"
+                    control={
+                      <Checkbox
+                        checked={job}
+                        onChange={(event: any) => {
+                          setJob(event.target.checked);
+                        }}
+                        sx={{ color: 'var(--palette-button-color)!important' }}
+                      />
+                    }
+                  />
+                </Box>
+                <Typography variant="body2" color="var(--palette-text-palette-text-secondary)" ml="1rem">
+                  Full control of job. If you need to call preheat job through open API, it is recommended to use
+                  preheat job.
+                </Typography>
+              </Box>
+              <Box display="flex" alignItems="center">
+                <Box width="10%">
+                  <FormControlLabel
+                    label="cluster"
+                    control={
+                      <Checkbox
+                        checked={cluster}
+                        onChange={(event: any) => {
+                          setCluster(event.target.checked);
+                        }}
+                        sx={{ color: 'var(--palette-button-color)!important' }}
+                      />
+                    }
+                  />
+                </Box>
+                <Typography variant="body2" color="var(--palette-text-palette-text-secondary)" ml="1rem">
+                  Full control of cluster.
+                </Typography>
+              </Box>
+            </FormGroup>
+          </Box>
+          <Divider sx={{ mt: '1.5rem', mb: '2rem' }} />
+          <Box>
+            <CancelLoadingButton
+              id="cancel"
+              loading={loadingButton}
+              onClick={() => {
+                navigate('/developer/personal-access-tokens');
+              }}
+            />
+            <SavelLoadingButton loading={loadingButton} endIcon={<CheckCircleIcon />} id="save" text="Save" />
+          </Box>
+        </FormControl>
+      </Box>
     </Box>
   );
 }
diff --git a/src/components/job/preheats/index.module.css b/src/components/job/preheats/index.module.css
index 40e76fb..2ea682c 100644
--- a/src/components/job/preheats/index.module.css
+++ b/src/components/job/preheats/index.module.css
@@ -16,6 +16,18 @@
   font-family: 'mabry-bold';
 }
 
+.statusIcon {
+  width: 1.3rem;
+  height: 1.3rem;
+  margin: 0.1rem;
+}
+
+.pendingIcon {
+  width: 1.3rem;
+  height: 1.3rem;
+  color: #dbab0a;
+}
+
 .description {
   width: 90%;
   overflow: hidden;
@@ -37,3 +49,22 @@
   justify-content: space-between;
   margin-left: 0.6rem;
 }
+
+.detailIcon {
+  width: 2rem;
+  height: 2rem;
+  color: var(--palette-button-color);
+}
+
+.menu {
+  background-color: var(--palette-background-menu);
+  background-image: url(../../../assets/images/menu/cyan-blur.png), url(../../../assets/images/menu/red-blur.png);
+  background-repeat: no-repeat, no-repeat;
+  padding: 0.2rem;
+  background-size: 50%, 50%;
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  outline: 0px;
+  background-position: right top, left bottom;
+  border-radius: var(--menu-border-radius);
+  overflow: inherit;
+}
diff --git a/src/components/job/preheats/index.tsx b/src/components/job/preheats/index.tsx
index 44e6e82..04762c4 100644
--- a/src/components/job/preheats/index.tsx
+++ b/src/components/job/preheats/index.tsx
@@ -27,6 +27,11 @@ import { DEFAULT_PAGE_SIZE } from '../../../lib/constants';
 import { getBJTDatetime, useQuery } from '../../../lib/utils';
 import styles from './index.module.css';
 import Card from '../../card';
+import { ReactComponent as IcContent } from '../../../assets/images/cluster/scheduler/ic-content.svg';
+import { ReactComponent as Success } from '../../../assets/images/job/preheat/success.svg';
+import { ReactComponent as Failure } from '../../../assets/images/job/preheat/failure.svg';
+import { ReactComponent as Pending } from '../../../assets/images/job/preheat/pending.svg';
+import { ReactComponent as Detail } from '../../../assets/images/job/preheat/detail.svg';
 
 export default function Preheats() {
   const [errorMessage, setErrorMessage] = useState(false);
@@ -43,17 +48,6 @@ export default function Preheats() {
   const query = useQuery();
   const page = query.get('page') ? parseInt(query.get('page') as string, 10) || 1 : 1;
 
-  const theme = createTheme({
-    palette: {
-      primary: {
-        main: '#1C293A',
-      },
-    },
-    typography: {
-      fontFamily: 'mabry-light,sans-serif',
-    },
-  });
-
   useEffect(() => {
     (async function () {
       try {
@@ -70,7 +64,7 @@ export default function Preheats() {
         setPreheatTotalPages(jobs.total_page || 1);
 
         const states = jobs.data.filter(
-          (obj) => obj.result.state !== 'SUCCESS' && obj.result.state !== 'FAILURE',
+          (obj) => obj?.result?.state !== 'SUCCESS' && obj?.result?.state !== 'FAILURE',
         ).length;
 
         states === 0 ? setShouldPoll(false) : setShouldPoll(true);
@@ -101,7 +95,7 @@ export default function Preheats() {
             setPreheatTotalPages(jobs.total_page || 1);
 
             const states = jobs.data.filter(
-              (obj) => obj.result.state !== 'SUCCESS' && obj.result.state !== 'FAILURE',
+              (obj) => obj?.result?.state !== 'SUCCESS' && obj?.result?.state !== 'FAILURE',
             ).length;
 
             states === 0 ? setShouldPoll(false) : setShouldPoll(true);
@@ -144,7 +138,7 @@ export default function Preheats() {
   };
 
   return (
-    <ThemeProvider theme={theme}>
+    <Box>
       <Snackbar
         open={errorMessage}
         autoHideDuration={3000}
@@ -155,27 +149,15 @@ export default function Preheats() {
           {errorMessageText}
         </Alert>
       </Snackbar>
-      <Breadcrumbs
-        separator={
-          <Box
-            sx={{ width: '0.3rem', height: '0.3rem', backgroundColor: '#919EAB', borderRadius: '50%', m: '0 0.4rem' }}
-          />
-        }
-        aria-label="breadcrumb"
-        sx={{ mb: '1rem' }}
-      >
-        <Typography color="text.primary">jobs</Typography>
-        <Typography color="inherit">preheats</Typography>
-      </Breadcrumbs>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: '2rem' }}>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: '1rem' }}>
         <Typography variant="h5">Preheats</Typography>
         <Button
+          id="new-preheat"
           size="small"
           sx={{
-            '&.MuiButton-root': {
-              backgroundColor: 'var(--button-color)',
-              color: '#fff',
-            },
+            background: 'var(--palette-button-color)',
+            color: 'var(--palette-button-text-color)',
+            ':hover': { backgroundColor: 'var(--palette-hover-button-text-color)' },
           }}
           startIcon={<AddIcon />}
           variant="contained"
@@ -186,11 +168,23 @@ export default function Preheats() {
           add preheat
         </Button>
       </Box>
+      <Breadcrumbs
+        separator={
+          <Box
+            sx={{ width: '0.3rem', height: '0.3rem', backgroundColor: '#919EAB', borderRadius: '50%', m: '0 0.4rem' }}
+          />
+        }
+        aria-label="breadcrumb"
+        sx={{ mb: '1.5rem' }}
+      >
+        <Typography color="text.primary">Job</Typography>
+        <Typography color="inherit">Preheat</Typography>
+      </Breadcrumbs>
       <Card>
         <Box
           sx={{
             p: '0.8rem',
-            backgroundColor: 'var(--table-title-color)',
+            backgroundColor: 'var(--palette-table-title-color)',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'space-between',
@@ -248,7 +242,7 @@ export default function Preheats() {
           </Box>
         ) : allPreheats.length === 0 ? (
           <Box className={styles.noData}>
-            <Box component="img" className={styles.nodataIcon} src="/icons/cluster/scheduler/ic-content.svg" />
+            <IcContent className={styles.nodataIcon} />
             <Typography id="no-preheat" variant="h6" className={styles.nodataText}>
               You don't have any preheat tasks.
             </Typography>
@@ -261,27 +255,12 @@ export default function Preheats() {
                   <Box key={item.id} id={`list-${item.id}`}>
                     <Box sx={{ display: 'flex', p: '0.8rem', alignItems: 'center' }}>
                       <Box className={styles.information}>
-                        {item.result.state === 'SUCCESS' ? (
-                          <Box
-                            id={`SUCCESS-${item.id}`}
-                            component="img"
-                            sx={{ width: '1.3rem', height: '1.3rem' }}
-                            src="/icons/job/preheat/success.svg"
-                          />
-                        ) : item.result.state === 'FAILURE' ? (
-                          <Box
-                            id={`FAILURE-${item.id}`}
-                            component="img"
-                            sx={{ width: '1.3rem', height: '1.3rem' }}
-                            src="/icons/job/preheat/failure.svg"
-                          />
+                        {item?.result?.state === 'SUCCESS' ? (
+                          <Success id={`SUCCESS-${item.id}`} className={styles.statusIcon} />
+                        ) : item?.result?.state === 'FAILURE' ? (
+                          <Failure id={`FAILURE-${item.id}`} className={styles.statusIcon} />
                         ) : (
-                          <Box
-                            id={`PENDING-${item.id}`}
-                            component="img"
-                            sx={{ width: '1.3rem', height: '1.3rem' }}
-                            src="/icons/job/preheat/pending.svg"
-                          />
+                          <Pending id={`PENDING-${item.id}`} className={styles.pendingIcon} />
                         )}
                         <Box className={styles.informationContent}>
                           <Typography id={`id-${item?.id}`} variant="body1" fontFamily="mabry-bold">
@@ -313,20 +292,16 @@ export default function Preheats() {
                           id={`preheat-${item?.id}`}
                           to={`/jobs/preheats/${item?.id}`}
                           underline="hover"
-                          sx={{ color: 'var(--description-color)' }}
+                          sx={{ color: 'var(--palette-description-color)' }}
                         >
-                          <Box
-                            component="img"
-                            sx={{ width: '2rem', height: '2rem' }}
-                            src="/icons/job/preheat/detail.svg"
-                          />
+                          <Detail className={styles.detailIcon} />
                         </RouterLink>
                       </Box>
                     </Box>
                     <Divider
                       sx={{
                         borderStyle: 'dashed',
-                        borderColor: 'var(--palette-divider)',
+                        borderColor: 'var(--palette-palette-divider)',
                         borderWidth: '0px 0px thin',
                       }}
                     />
@@ -334,27 +309,12 @@ export default function Preheats() {
                 ) : (
                   <Box key={item.id} id={`list-${item.id}`} sx={{ display: 'flex', p: '0.8rem', alignItems: 'center' }}>
                     <Box className={styles.information}>
-                      {item.result.state === 'SUCCESS' ? (
-                        <Box
-                          id={`SUCCESS-${item.id}`}
-                          component="img"
-                          sx={{ width: '1.3rem', height: '1.3rem' }}
-                          src="/icons/job/preheat/success.svg"
-                        />
-                      ) : item.result.state === 'FAILURE' ? (
-                        <Box
-                          id={`FAILURE-${item.id}`}
-                          component="img"
-                          sx={{ width: '1.3rem', height: '1.3rem' }}
-                          src="/icons/job/preheat/failure.svg"
-                        />
+                      {item?.result?.state === 'SUCCESS' ? (
+                        <Success id={`SUCCESS-${item.id}`} className={styles.statusIcon} />
+                      ) : item?.result?.state === 'FAILURE' ? (
+                        <Failure id={`FAILURE-${item.id}`} className={styles.statusIcon} />
                       ) : (
-                        <Box
-                          id={`PENDING-${item.id}`}
-                          component="img"
-                          sx={{ width: '1.3rem', height: '1.3rem' }}
-                          src="/icons/job/preheat/pending.svg"
-                        />
+                        <Pending id={`PENDING-${item.id}`} className={styles.pendingIcon} />
                       )}
                       <Box className={styles.informationContent}>
                         <Typography id={`id-${item?.id}`} variant="body1" fontFamily="mabry-bold">
@@ -386,13 +346,9 @@ export default function Preheats() {
                         id={`preheat-${item?.id}`}
                         to={`/jobs/preheats/${item?.id}`}
                         underline="hover"
-                        sx={{ color: 'var(--description-color)' }}
+                        sx={{ color: 'var(--palette-description-color)' }}
                       >
-                        <Box
-                          component="img"
-                          sx={{ width: '2rem', height: '2rem' }}
-                          src="/icons/job/preheat/detail.svg"
-                        />
+                        <Detail className={styles.detailIcon} />
                       </RouterLink>
                     </Box>
                   </Box>
@@ -402,7 +358,7 @@ export default function Preheats() {
         )}
       </Card>
       {preheatTotalPages > 1 ? (
-        <Box display="flex" justifyContent="flex-end" sx={{ marginTop: theme.spacing(2) }}>
+        <Box display="flex" justifyContent="flex-end" sx={{ marginTop: '2rem' }}>
           <Pagination
             count={preheatTotalPages}
             page={preheatPage}
@@ -419,6 +375,6 @@ export default function Preheats() {
       ) : (
         <></>
       )}
-    </ThemeProvider>
+    </Box>
   );
 }
diff --git a/src/components/job/preheats/new.module.css b/src/components/job/preheats/new.module.css
index 7abfe5a..11fb65c 100644
--- a/src/components/job/preheats/new.module.css
+++ b/src/components/job/preheats/new.module.css
@@ -27,3 +27,18 @@
 .argsWrapper:nth-child(n + 3) {
   width: 100%;
 }
+
+.argsWrapper {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: calc(1.5rem);
+  padding: 1.5rem;
+}
+
+.headersWrapper {
+  padding: 1rem;
+  width: 37rem;
+  margin-top: 1rem;
+  border-radius: 0.25rem !important;
+  background-color: var(--palette-background-paper) !important;
+}
diff --git a/src/components/job/preheats/new.tsx b/src/components/job/preheats/new.tsx
index e8ad85b..6c1b85f 100644
--- a/src/components/job/preheats/new.tsx
+++ b/src/components/job/preheats/new.tsx
@@ -13,8 +13,7 @@ import {
   MenuItem,
   Checkbox,
   ListItemText,
-  createTheme,
-  ThemeProvider,
+  Link as RouterLink,
   FormHelperText,
   Grid,
   Chip,
@@ -23,17 +22,19 @@ import {
   Alert,
   Paper,
   SelectChangeEvent,
+  Breadcrumbs,
 } from '@mui/material';
 import { useEffect, useState } from 'react';
 import HelpIcon from '@mui/icons-material/Help';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import ClearIcon from '@mui/icons-material/Clear';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 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 { CancelLoadingButton, SavelLoadingButton } from '../../loading-button';
+import Card from '../../card';
 
 export default function NewPreheat() {
   const [successMessage, setSuccessMessage] = useState(false);
@@ -55,17 +56,6 @@ export default function NewPreheat() {
 
   const navigate = useNavigate();
 
-  const theme = createTheme({
-    palette: {
-      secondary: {
-        main: '#1c293a',
-      },
-    },
-    typography: {
-      fontFamily: 'mabry-light,sans-serif',
-    },
-  });
-
   useEffect(() => {
     (async function () {
       try {
@@ -96,8 +86,12 @@ export default function NewPreheat() {
           endAdornment: (
             <Tooltip title={'Preheat description.'} placement="top">
               <HelpIcon
-                color="disabled"
-                sx={{ width: '0.8rem', height: '0.8rem', ':hover': { color: 'var(--description-color)' } }}
+                sx={{
+                  color: 'var(--palette-grey-300Channel)',
+                  width: '0.8rem',
+                  height: '0.8rem',
+                  ':hover': { color: 'var(--palette-description-color)' },
+                }}
               />
             </Tooltip>
           ),
@@ -137,8 +131,12 @@ export default function NewPreheat() {
               placement="top"
             >
               <HelpIcon
-                color="disabled"
-                sx={{ width: '0.8rem', height: '0.8rem', ':hover': { color: 'var(--description-color)' } }}
+                sx={{
+                  color: 'var(--palette-grey-300Channel)',
+                  width: '0.8rem',
+                  height: '0.8rem',
+                  ':hover': { color: 'var(--palette-description-color)' },
+                }}
               />
             </Tooltip>
           ),
@@ -169,8 +167,12 @@ export default function NewPreheat() {
           endAdornment: (
             <Tooltip title={'URL address used to specify the resource to be preheat.'} placement="top">
               <HelpIcon
-                color="disabled"
-                sx={{ width: '0.8rem', height: '0.8rem', ':hover': { color: 'var(--description-color)' } }}
+                sx={{
+                  color: 'var(--palette-grey-300Channel)',
+                  width: '0.8rem',
+                  height: '0.8rem',
+                  ':hover': { color: 'var(--palette-description-color)' },
+                }}
               />
             </Tooltip>
           ),
@@ -261,7 +263,7 @@ export default function NewPreheat() {
   };
 
   const headersValueValidate = (value: any) => {
-    const regex = /^.{1,1000}$/;
+    const regex = /^.{1,10000}$/;
     return regex.test(value);
   };
 
@@ -374,7 +376,7 @@ export default function NewPreheat() {
   };
 
   return (
-    <ThemeProvider theme={theme}>
+    <Box>
       <Snackbar
         open={successMessage}
         autoHideDuration={3000}
@@ -398,6 +400,23 @@ export default function NewPreheat() {
       <Typography variant="h5" fontFamily="mabry-bold">
         Create Preheat
       </Typography>
+      <Breadcrumbs
+        separator={
+          <Box
+            sx={{ width: '0.3rem', height: '0.3rem', backgroundColor: '#919EAB', borderRadius: '50%', m: '0 0.4rem' }}
+          />
+        }
+        aria-label="breadcrumb"
+        sx={{ mt: '1rem' }}
+      >
+        <Typography color="text.primary">Job</Typography>
+        <RouterLink component={Link} underline="hover" color="text.primary" to={`/developer/personal-access-tokens`}>
+          Preheat
+        </RouterLink>
+        <Typography variant="body2" color="inherit">
+          New preheat
+        </Typography>
+      </Breadcrumbs>
       <Divider sx={{ mt: 2, mb: 2 }} />
       <Box component="form" onSubmit={handleSubmit} noValidate>
         <FormControl fullWidth>
@@ -408,8 +427,12 @@ export default function NewPreheat() {
               </Typography>
               <Tooltip title=" The information of preheat." placement="top">
                 <HelpIcon
-                  color="disabled"
-                  sx={{ width: '0.8rem', height: '0.8rem', ':hover': { color: 'var(--description-color)' } }}
+                  sx={{
+                    color: 'var(--palette-grey-300Channel)',
+                    width: '0.8rem',
+                    height: '0.8rem',
+                    ':hover': { color: 'var(--palette-description-color)' },
+                  }}
                 />
               </Tooltip>
             </Box>
@@ -431,19 +454,16 @@ export default function NewPreheat() {
               </Typography>
               <Tooltip title="Used for clusters that need to be preheating." placement="top">
                 <HelpIcon
-                  color="disabled"
-                  sx={{ width: '0.8rem', height: '0.8rem', ':hover': { color: 'var(--description-color)' } }}
+                  sx={{
+                    color: 'var(--palette-grey-300Channel)',
+                    width: '0.8rem',
+                    height: '0.8rem',
+                    ':hover': { color: 'var(--palette-description-color)' },
+                  }}
                 />
               </Tooltip>
             </Box>
-            <FormControl
-              className={styles.textField}
-              margin="normal"
-              required
-              size="small"
-              color="secondary"
-              error={clusterError}
-            >
+            <FormControl className={styles.textField} margin="normal" required size="small" error={clusterError}>
               <InputLabel id="select-clusters">Clusters</InputLabel>
               <Select
                 labelId="select-clusters"
@@ -468,7 +488,7 @@ export default function NewPreheat() {
                     <Checkbox
                       id={`cluster-${item.id}`}
                       size="small"
-                      sx={{ '&.MuiCheckbox-root': { color: 'var(--button-color)' } }}
+                      sx={{ '&.MuiCheckbox-root': { color: 'var(--palette-button-color)' } }}
                       checked={clusterName.indexOf(item.name) > -1}
                     />
                     <ListItemText primary={item.name} />
@@ -485,13 +505,17 @@ export default function NewPreheat() {
               </Typography>
               <Tooltip title="Args used to pass additional configuration options to the preheat task." placement="top">
                 <HelpIcon
-                  color="disabled"
-                  sx={{ width: '0.8rem', height: '0.8rem', ':hover': { color: 'var(--description-color)' } }}
+                  sx={{
+                    color: 'var(--palette-grey-300Channel)',
+                    width: '0.8rem',
+                    height: '0.8rem',
+                    ':hover': { color: 'var(--palette-description-color)' },
+                  }}
                 />
               </Tooltip>
             </Box>
             <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
-              <FormControl className={styles.textField} margin="normal" required size="small" color="secondary">
+              <FormControl className={styles.textField} margin="normal" color="success" required size="small">
                 <InputLabel id="scope">Scope</InputLabel>
                 <Select
                   id="select-scope"
@@ -515,81 +539,86 @@ export default function NewPreheat() {
                 </Select>
               </FormControl>
               {argsForm.map((item) => {
-                return (
-                  <>
-                    {item.id === 'filteredQueryParams' ? (
-                      <Autocomplete
-                        freeSolo
-                        multiple
-                        disableClearable
-                        {...item.filterFormProps}
-                        size="small"
-                        className={styles.filterInput}
-                        renderInput={(params) => (
-                          <TextField
-                            margin="normal"
-                            {...params}
-                            InputProps={{
-                              ...params.InputProps,
-                              endAdornment: (
-                                <>
-                                  {params.InputProps.endAdornment}
-                                  <Tooltip
-                                    title={
-                                      'By setting the filter parameter, you can specify the file type of the resource that needs to be preheated. The filter is used to generate a unique preheat task and filter unnecessary query parameters in the URL, separated by & characters.'
-                                    }
-                                    placement="top"
-                                  >
-                                    <HelpIcon
-                                      color="disabled"
-                                      sx={{
-                                        width: '0.8rem',
-                                        height: '0.8rem',
-                                        mr: '0.3rem',
-                                        ':hover': { color: 'var(--description-color)' },
-                                      }}
-                                    />
-                                  </Tooltip>
-                                </>
-                              ),
-                            }}
-                            color="success"
-                            {...item.formProps}
-                          />
-                        )}
-                      />
-                    ) : item.formProps.id === 'tag' ? (
-                      <TextField
-                        color="success"
-                        margin="normal"
-                        size="small"
-                        {...item.formProps}
-                        sx={{ marginLeft: '1rem' }}
-                        className={styles.textField}
-                      />
-                    ) : (
-                      <TextField
-                        color="success"
-                        margin="normal"
-                        size="small"
-                        {...item.formProps}
-                        className={styles.filterInput}
-                      />
-                    )}
-                  </>
+                return item.id === 'filteredQueryParams' ? (
+                  <Box key={item.formProps.id} sx={{ width: '100%' }}>
+                    <Autocomplete
+                      freeSolo
+                      multiple
+                      disableClearable
+                      {...item.filterFormProps}
+                      size="small"
+                      className={styles.filterInput}
+                      renderInput={(params) => (
+                        <TextField
+                          margin="normal"
+                          {...params}
+                          InputProps={{
+                            ...params.InputProps,
+                            endAdornment: (
+                              <>
+                                {params.InputProps.endAdornment}
+                                <Tooltip
+                                  title={
+                                    'By setting the filter parameter, you can specify the file type of the resource that needs to be preheated. The filter is used to generate a unique preheat task and filter unnecessary query parameters in the URL, separated by & characters.'
+                                  }
+                                  placement="top"
+                                >
+                                  <HelpIcon
+                                    sx={{
+                                      color: 'var(--palette-grey-300Channel)',
+                                      width: '0.8rem',
+                                      height: '0.8rem',
+                                      mr: '0.3rem',
+                                      ':hover': { color: 'var(--palette-description-color)' },
+                                    }}
+                                  />
+                                </Tooltip>
+                              </>
+                            ),
+                          }}
+                          color="success"
+                          {...item.formProps}
+                        />
+                      )}
+                    />
+                  </Box>
+                ) : item.formProps.id === 'tag' ? (
+                  <TextField
+                    key={item.formProps.id}
+                    color="success"
+                    margin="normal"
+                    size="small"
+                    {...item.formProps}
+                    sx={{ marginLeft: '1rem' }}
+                    className={styles.textField}
+                  />
+                ) : (
+                  <Box key={item.formProps.id} sx={{ width: '100%' }}>
+                    <TextField
+                      color="success"
+                      margin="normal"
+                      size="small"
+                      {...item.formProps}
+                      className={styles.filterInput}
+                    />
+                  </Box>
                 );
               })}
             </Box>
             {headers.length > 0 ? (
-              <Paper id="header" variant="outlined" sx={{ p: '1rem', width: '37rem', mt: '1rem' }}>
+              <Paper variant="outlined" id="header" className={styles.headersWrapper}>
                 <Box sx={{ display: 'flex', alignItems: 'center' }}>
                   <Typography variant="body1" fontFamily="mabry-bold" mr="0.4rem">
                     Headers
                   </Typography>
                   <Tooltip title="Add headers for preheat request." placement="top">
                     <HelpIcon
-                      color="disabled"
-                      sx={{ width: '0.8rem', height: '0.8rem', ':hover': { color: 'var(--description-color)' } }}
+                      sx={{
+                        color: 'var(--palette-grey-300Channel)',
+                        width: '0.8rem',
+                        height: '0.8rem',
+                        ':hover': { color: 'var(--palette-description-color)' },
+                      }}
                     />
                   </Tooltip>
                 </Box>
@@ -618,7 +647,7 @@ export default function NewPreheat() {
                       multiline
                       maxRows={3}
                       error={!headersValueValidate(item.value)}
-                      helperText={!headersValueValidate(item.value) && 'Fill in the characters, the length is 1-1000.'}
+                      helperText={!headersValueValidate(item.value) && 'Fill in the characters, the length is 1-10000.'}
                       className={styles.headersValueInput}
                       value={item.value}
                       onChange={(event) => {
@@ -639,15 +668,15 @@ export default function NewPreheat() {
                         setheaders(newheaders);
                       }}
                     >
-                      <ClearIcon sx={{ width: '1.2rem', height: '1.2rem', color: 'var(--button-color)' }} />
+                      <ClearIcon sx={{ width: '1.2rem', height: '1.2rem', color: 'var(--palette-button-color)' }} />
                     </IconButton>
                   </Grid>
                 ))}
                 <Button
                   sx={{
                     '&.MuiButton-root': {
-                      backgroundColor: 'var(--description-color)',
-                      borderColor: 'var(--description-color)',
+                      backgroundColor: 'var(--palette-description-color)',
+                      borderColor: 'var(--palette-description-color)',
                       color: '#FFF',
                       display: 'inline-flex',
                       alignItems: 'center',
@@ -669,8 +698,8 @@ export default function NewPreheat() {
               <Button
                 sx={{
                   '&.MuiButton-root': {
-                    backgroundColor: 'var(--description-color)',
-                    borderColor: 'var(--description-color)',
+                    backgroundColor: 'var(--palette-description-color)',
+                    borderColor: 'var(--palette-description-color)',
                     color: '#FFF',
                   },
                   width: '8rem',
@@ -699,6 +728,6 @@ export default function NewPreheat() {
           </Box>
         </FormControl>
       </Box>
-    </ThemeProvider>
+    </Box>
   );
 }
diff --git a/src/components/job/preheats/show.module.css b/src/components/job/preheats/show.module.css
index 97d5b44..cab8ef7 100644
--- a/src/components/job/preheats/show.module.css
+++ b/src/components/job/preheats/show.module.css
@@ -3,9 +3,16 @@
 }
 
 .statusIcon {
-  width: 1.3rem !important;
-  height: 1.3rem !important;
+  margin-right: 0.5rem;
+  width: 1rem !important;
+  height: 1rem !important;
+}
+
+.pendingIcon {
+  width: 1.3rem;
+  height: 1.3rem;
   margin-right: 0.4rem;
+  color: var(--palette-button-text-color);
 }
 
 .informationContainer {
@@ -23,11 +30,12 @@
 .informationTitleIcon {
   width: 1.4rem !important;
   height: 1.4rem !important;
+  color: var(--palette-detail-lable-color);
 }
 
 .informationTitleText {
   margin-left: 1rem !important;
-  color: #515151;
+  color: var(--palette-detail-lable-color);
   font-family: 'mabry-bold' !important;
 }
 
@@ -84,8 +92,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--button-color);
-  color: var(--save-size-color);
+  background-color: var(--palette-button-color);
+  color: var(--palette-button-text-color);
   border-radius: 0.3rem;
   min-width: 1.6rem;
   margin-right: 0.5rem;
@@ -95,8 +103,8 @@
 .scopeContent {
   display: inline-flex;
   align-items: center;
-  background-color: var(--button-color);
-  color: var(--save-size-color);
+  background-color: var(--palette-button-color);
+  color: var(--palette-scopes-icon-color);
   border-radius: 0.3rem;
   min-width: 1.6rem;
   margin-right: 0.5rem;
@@ -105,8 +113,8 @@
 
 .tagContent {
   display: inline-flex;
-  background-color: var(--description-color);
-  color: var(--save-size-color);
+  background-color: var(--palette-description-color);
+  color: var(--palette-scopes-icon-color);
   border-radius: 0.3rem;
   min-width: 1.6rem;
   padding: 0.2rem 0.4rem;
@@ -119,3 +127,8 @@
   white-space: nowrap;
   font-style: italic;
 }
+
+.errorIcon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
diff --git a/src/components/job/preheats/show.tsx b/src/components/job/preheats/show.tsx
index ada9098..ac03223 100644
--- a/src/components/job/preheats/show.tsx
+++ b/src/components/job/preheats/show.tsx
@@ -2,7 +2,6 @@ import {
   Box,
   Chip,
   Divider,
-  Paper,
   Typography,
   Breadcrumbs,
   Link as RouterLink,
@@ -15,8 +14,6 @@ import {
   AccordionDetails,
   AccordionSummary,
   Accordion,
-  ThemeProvider,
-  createTheme,
   styled,
   tooltipClasses,
   TooltipProps,
@@ -29,17 +26,19 @@ import { getBJTDatetime } from '../../../lib/utils';
 import styles from './show.module.css';
 import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
 import Card from '../../card';
-
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: '#1C293A',
-    },
-  },
-  typography: {
-    fontFamily: 'mabry-light,sans-serif',
-  },
-});
+import { ReactComponent as PreheatID } from '../../../assets/images/job/preheat/id.svg';
+import { ReactComponent as Description } from '../../../assets/images/job/preheat/description.svg';
+import { ReactComponent as Status } from '../../../assets/images/job/preheat/status.svg';
+import { ReactComponent as URL } from '../../../assets/images/job/preheat/url.svg';
+import { ReactComponent as Scope } from '../../../assets/images/job/preheat/scope.svg';
+import { ReactComponent as Tag } from '../../../assets/images/job/preheat/tag.svg';
+import { ReactComponent as Headers } from '../../../assets/images/job/preheat/headers.svg';
+import { ReactComponent as SchedulerClustersID } from '../../../assets/images/job/preheat/id.svg';
+import { ReactComponent as CreatedAt } from '../../../assets/images/job/preheat/created-at.svg';
+import { ReactComponent as Failure } from '../../../assets/images/job/preheat/failure.svg';
+import { ReactComponent as Pending } from '../../../assets/images/job/preheat/pending.svg';
+import { ReactComponent as ErrorLog } from '../../../assets/images/job/preheat/error-log.svg';
+import { ReactComponent as TagScope } from '../../../assets/images/job/preheat/tag-scope.svg';
 
 const CustomWidthTooltip = styled(({ className, ...props }: TooltipProps) => (
   <Tooltip {...props} classes={{ popper: className }} />
@@ -132,7 +131,7 @@ export default function ShowPreheat() {
   const scope = preheat?.args?.scope && scopeList.find((item) => item.name === preheat?.args?.scope);
 
   return (
-    <ThemeProvider theme={theme}>
+    <Box>
       <Snackbar
         open={errorMessage}
         autoHideDuration={3000}
@@ -143,6 +142,9 @@ export default function ShowPreheat() {
           {errorMessageText}
         </Alert>
       </Snackbar>
+      <Typography variant="h5" id="preheat-title">
+        Preheat
+      </Typography>
       <Breadcrumbs
         separator={
           <Box
@@ -150,22 +152,19 @@ export default function ShowPreheat() {
           />
         }
         aria-label="breadcrumb"
-        sx={{ mb: '1rem' }}
+        sx={{ mb: '1.5rem', mt: '1rem' }}
       >
-        <Typography>jobs</Typography>
-        <RouterLink component={Link} underline="hover" color="inherit" to={`/jobs/preheats`}>
-          preheats
+        <Typography color="text.primary">Job</Typography>
+        <RouterLink component={Link} underline="hover" color="text.primary" to={`/jobs/preheats`}>
+          Preheat
         </RouterLink>
-        <Typography color="text.primary">{preheat?.id || '-'}</Typography>
+        <Typography>{preheat?.id || '-'}</Typography>
       </Breadcrumbs>
-      <Typography variant="h5" mb="2rem">
-        Preheat
-      </Typography>
       <Box width="100%">
         <Card className={styles.container}>
           <Box className={styles.informationContainer}>
             <Box className={styles.informationTitle}>
-              <Box component="img" className={styles.informationTitleIcon} src="/icons/job/preheat/id.svg" />
+              <PreheatID className={styles.informationTitleIcon} />
               <Typography
                 variant="body1"
                 fontFamily="mabry-bold"
@@ -181,7 +180,7 @@ export default function ShowPreheat() {
           </Box>
           <Box className={styles.informationContainer}>
             <Box className={styles.informationTitle}>
-              <Box component="img" className={styles.informationTitleIcon} src="/icons/job/preheat/description.svg" />
+              <Description className={styles.informationTitleIcon} />
               <Typography
                 variant="body1"
                 fontFamily="mabry-bold"
@@ -197,7 +196,7 @@ export default function ShowPreheat() {
           </Box>
           <Box className={styles.informationContainer}>
             <Box className={styles.informationTitle}>
-              <Box component="img" className={styles.informationTitleIcon} src="/icons/job/preheat/status.svg" />
+              <Status className={styles.informationTitleIcon} />
               <Typography
                 variant="body1"
                 fontFamily="mabry-bold"
@@ -234,12 +233,7 @@ export default function ShowPreheat() {
                     ) : preheat.result.state === 'FAILURE' ? (
                       <></>
                     ) : (
-                      <Box
-                        component="img"
-                        id="pending-icon"
-                        className={styles.statusIcon}
-                        src="/icons/job/preheat/status-pending.svg"
-                      />
+                      <Pending id="pending-icon" className={styles.pendingIcon} />
                     )}
                     <Typography
                       variant="body2"
@@ -269,12 +263,7 @@ export default function ShowPreheat() {
                               setErrorLog(true);
                             }}
                           >
-                            <Box
-                              id="error-log-icon"
-                              component="img"
-                              sx={{ width: '1.2rem', height: '1.2rem' }}
-                              src="/icons/job/preheat/error-log.svg"
-                            />
+                            <ErrorLog id="error-log-icon" className={styles.errorIcon} />
                           </IconButton>
                         </Tooltip>
                       </>
@@ -290,7 +279,7 @@ export default function ShowPreheat() {
           </Box>
           <Box className={styles.informationContainer}>
             <Box className={styles.informationTitle}>
-              <Box component="img" className={styles.informationTitleIcon} src="/icons/job/preheat/url.svg" />
+              <URL className={styles.informationTitleIcon} />
               <Typography
                 variant="body1"
                 fontFamily="mabry-bold"
@@ -314,7 +303,7 @@ export default function ShowPreheat() {
           </Box>
           <Box className={styles.informationContainer}>
             <Box className={styles.informationTitle}>
-              <Box component="img" className={styles.informationTitleIcon} src="/icons/job/preheat/scope.svg" />
+              <Scope className={styles.informationTitleIcon} />
               <Typography
                 variant="body1"
                 fontFamily="mabry-bold"
@@ -329,7 +318,7 @@ export default function ShowPreheat() {
                 <Skeleton data-testid="preheat-isloading" sx={{ width: '2rem' }} />
               ) : scope ? (
                 <Box className={styles.scopeContent}>
-                  <Box component="img" className={styles.informationTitleIcon} src="/icons/job/preheat/tag-scope.svg" />
+                  <TagScope className={styles.informationTitleIcon} />
                   <Typography variant="body2" component="div" fontFamily="mabry-bold" pl="0.2rem">
                     {scope.label || '-'}
                   </Typography>
@@ -341,7 +330,7 @@ export default function ShowPreheat() {
           </Box>
           <Box className={styles.informationContainer}>
             <Box className={styles.informationTitle}>
-              <Box component="img" className={styles.informationTitleIcon} src="/icons/job/preheat/tag.svg" />
+              <Tag className={styles.informationTitleIcon} />
               <Typography
                 variant="body1"
                 fontFamily="mabry-bold"
@@ -369,7 +358,7 @@ export default function ShowPreheat() {
           </Box>
           <Box className={styles.informationContainer}>
             <Box className={styles.informationTitle}>
-              <Box component="img" className={styles.informationTitleIcon} src="/icons/job/preheat/headers.svg" />
+              <Headers className={styles.informationTitleIcon} />
               <Typography
                 variant="body1"
                 fontFamily="mabry-bold"
@@ -412,7 +401,7 @@ export default function ShowPreheat() {
           </Box>
           <Box className={styles.informationContainer}>
             <Box className={styles.informationTitle}>
-              <Box component="img" className={styles.informationTitleIcon} src="/icons/job/preheat/id.svg" />
+              <SchedulerClustersID className={styles.informationTitleIcon} />
               <Typography
                 variant="body1"
                 fontFamily="mabry-bold"
@@ -436,7 +425,7 @@ export default function ShowPreheat() {
           </Box>
           <Box className={styles.informationContainer}>
             <Box className={styles.informationTitle}>
-              <Box component="img" className={styles.informationTitleIcon} src="/icons/job/preheat/created-at.svg" />
+              <CreatedAt className={styles.informationTitleIcon} />
               <Typography
                 variant="body1"
                 fontFamily="mabry-bold"
@@ -500,12 +489,8 @@ export default function ShowPreheat() {
                     aria-controls="panel1d-content"
                     id="panel1d-header"
                   >
-                    <Box display="flex">
-                      <Box
-                        component="img"
-                        sx={{ width: '1.4rem', height: '1.4rem', mr: '0.6rem' }}
-                        src="/icons/job/preheat/failure.svg"
-                      />
+                    <Box display="flex" alignItems="center">
+                      <Failure className={styles.statusIcon} />
                       <Typography variant="body2" fontFamily="mabry-bold" sx={{ color: '#d0d7de' }}>
                         Preheat
                       </Typography>
@@ -531,6 +516,6 @@ export default function ShowPreheat() {
           </Box>
         </Drawer>
       </Box>
-    </ThemeProvider>
+    </Box>
   );
 }
diff --git a/src/components/job/task/clear/index.module.css b/src/components/job/task/clear/index.module.css
index ba05b97..397aa9a 100644
--- a/src/components/job/task/clear/index.module.css
+++ b/src/components/job/task/clear/index.module.css
@@ -23,7 +23,7 @@
 }
 
 .hostnameTitle {
-  color: #515155;
+  color: var(--palette-table-title-text-color);
 }
 
 .filterInput {
@@ -54,5 +54,37 @@
 }
 
 .circularProgress {
+  width: 2.2rem;
+  height: 2.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.schedulerClusterIcon {
+  width: 0.6rem;
+  height: 0.6rem;
+}
+
+.noSearch {
+  width: 4rem;
+  height: 4rem;
+  margin-bottom: 3rem;
+}
+
+.noTask {
+  width: 30rem;
+  height: 30rem;
+}
+
+.deleteIcon {
+  width: 1.8rem;
+  height: 1.8rem;
   margin-right: 0.4rem;
 }
+
+.deleteWarningIcon {
+  width: 1.4rem;
+  height: 1.4rem;
+  padding-right: 0.2rem;
+}
diff --git a/src/components/job/task/clear/index.tsx b/src/components/job/task/clear/index.tsx
index 83fbc58..7a5179a 100644
--- a/src/components/job/task/clear/index.tsx
+++ b/src/components/job/task/clear/index.tsx
@@ -11,8 +11,6 @@ import {
   Alert,
   Tooltip,
   Divider,
-  createTheme,
-  ThemeProvider,
   TextField,
   styled,
   Autocomplete,
@@ -20,6 +18,7 @@ import {
   ToggleButton,
   toggleButtonGroupClasses,
   Pagination,
+  useTheme,
 } from '@mui/material';
 import styles from './index.module.css';
 import { useEffect, useState } from 'react';
@@ -39,10 +38,16 @@ import SearchCircularProgress from '../../../circular-progress';
 import AssignmentOutlinedIcon from '@mui/icons-material/AssignmentOutlined';
 import LinkOutlinedIcon from '@mui/icons-material/LinkOutlined';
 import Card from '../../../card';
+import { ReactComponent as SchedulerCluster } from '../../../../assets/images/job/task/scheduler-cluster.svg';
+import { ReactComponent as NoSearch } from '../../../../assets/images/job/task/no-search.svg';
+import { ReactComponent as NoTask } from '../../../../assets/images/job/task/no-task.svg';
+import { ReactComponent as DarkNoTask } from '../../../../assets/images/job/task/dark-no-task.svg';
+import { ReactComponent as Delete } from '../../../../assets/images/cluster/delete.svg';
+import { ReactComponent as DeleteWarning } from '../../../../assets/images/cluster/delete-warning.svg';
 
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
   [`& .${toggleButtonGroupClasses.grouped}`]: {
-    margin: theme.spacing(0.5),
+    margin: theme.spacing(0.7),
     border: 0,
     borderRadius: theme.shape.borderRadius,
     [`&.${toggleButtonGroupClasses.disabled}`]: {
@@ -51,28 +56,16 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
   },
   [`& .${toggleButtonGroupClasses.middleButton},& .${toggleButtonGroupClasses.lastButton}`]: {
     marginLeft: -1,
-    borderLeft: '1px solid transparent',
+    border: 0,
   },
 }));
 
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: '#1C293A',
-    },
-    success: {
-      main: '#2e8f79',
-    },
-  },
-  typography: {
-    fontFamily: 'mabry-light,sans-serif',
-  },
-});
-
 export default function Clear() {
   const [errorMessage, setErrorMessage] = useState(false);
   const [errorMessageText, setErrorMessageText] = useState('');
   const [isLoading, setIsLoading] = useState(false);
+  const [searchTaskISLodaing, setSearchTaskISLodaing] = useState(false);
+  const [searchIconISLodaing, setSearchIconISLodaing] = useState(false);
   const [openDeleteTask, setOpenDeleteTask] = useState(false);
   const [deleteLoadingButton, setDeleteLoadingButton] = useState(false);
   const [searchTask, setSearchTask] = useState('');
@@ -95,6 +88,7 @@ export default function Clear() {
 
   const { url, tag, application, filtered_query_params } = searchData;
   const navigate = useNavigate();
+  const theme = useTheme();
 
   useEffect(() => {
     const fetchJob = async () => {
@@ -102,9 +96,12 @@ export default function Clear() {
         if (searchID) {
           const job = await getTaskJob(searchID);
 
-          if (job.type === 'get_task') {
+          if (job?.type === 'get_task') {
             if ((job?.result?.state && job?.result?.state === 'SUCCESS') || job?.result?.state === 'FAILURE') {
               setIsLoading(false);
+              setSearchIconISLodaing(false);
+              setSearchTaskISLodaing(false);
+
               setTask(job);
             } else {
               setShouldPoll(true);
@@ -116,6 +113,8 @@ export default function Clear() {
           setErrorMessage(true);
           setErrorMessageText(error.message);
           setIsLoading(false);
+          setSearchIconISLodaing(false);
+          setSearchTaskISLodaing(false);
         }
       }
     };
@@ -133,6 +132,8 @@ export default function Clear() {
               setTask(job);
               setShouldPoll(false);
               setIsLoading(false);
+              setSearchIconISLodaing(false);
+              setSearchTaskISLodaing(false);
             }
           } catch (error) {
             if (error instanceof Error) {
@@ -140,6 +141,8 @@ export default function Clear() {
               setErrorMessageText(error.message);
               setShouldPoll(false);
               setIsLoading(false);
+              setSearchIconISLodaing(false);
+              setSearchTaskISLodaing(false);
             }
           }
         };
@@ -165,7 +168,15 @@ export default function Clear() {
       helperText: urlError ? 'Fill in the characters, the length is 0-1000.' : '',
       error: urlError,
       InputProps: {
-        startAdornment: <SearchIcon className={styles.circularProgress} sx={{ color: '#919EAB' }} />,
+        startAdornment: searchIconISLodaing ? (
+          <Box className={styles.circularProgress}>
+            <SearchCircularProgress />
+          </Box>
+        ) : (
+          <Box className={styles.circularProgress}>
+            <SearchIcon sx={{ color: '#919EAB' }} />
+          </Box>
+        ),
         endAdornment: searchTask ? (
           <IconButton type="button" sx={{ p: 0 }} aria-label="search">
             <ClearIcon />
@@ -208,8 +219,12 @@ export default function Clear() {
             placement="top"
           >
             <HelpIcon
-              color="disabled"
-              sx={{ width: '0.8rem', height: '0.8rem', ':hover': { color: 'var(--description-color)' } }}
+              sx={{
+                color: 'var(--palette-grey-300Channel)',
+                width: '0.8rem',
+                height: '0.8rem',
+                ':hover': { color: 'var(--palette-description-color)' },
+              }}
             />
           </Tooltip>
         ),
@@ -240,8 +255,12 @@ export default function Clear() {
         InputProps: (
           <Tooltip title={'Caller application which is used for statistics and access control.'} placement="top">
             <HelpIcon
-              color="disabled"
-              sx={{ width: '0.8rem', height: '0.8rem', ':hover': { color: 'var(--description-color)' } }}
+              sx={{
+                color: 'var(--palette-grey-300Channel)',
+                width: '0.8rem',
+                height: '0.8rem',
+                ':hover': { color: 'var(--palette-description-color)' },
+              }}
             />
           </Tooltip>
         ),
@@ -321,10 +340,14 @@ export default function Clear() {
       helperText: taskIDError ? 'Fill in the characters, the length is 0-1000.' : '',
       error: taskIDError,
       InputProps: {
-        startAdornment: isLoading ? (
-          <SearchCircularProgress className={styles.circularProgress} />
+        startAdornment: searchTaskISLodaing ? (
+          <Box className={styles.circularProgress}>
+            <SearchCircularProgress />
+          </Box>
         ) : (
-          <SearchIcon className={styles.circularProgress} sx={{ color: '#9BA0A6' }} />
+          <Box className={styles.circularProgress}>
+            <SearchIcon sx={{ color: '#9BA0A6' }} />
+          </Box>
         ),
         endAdornment: searchTask ? (
           <IconButton
@@ -434,6 +457,9 @@ export default function Clear() {
   };
 
   const handleSearchByTaskID = async (event: any) => {
+    setIsLoading(true);
+    setSearchTaskISLodaing(true);
+    setSearchIconISLodaing(false);
     try {
       event.preventDefault();
       const data = new FormData(event.currentTarget);
@@ -443,7 +469,6 @@ export default function Clear() {
       taskIDList.syncError = !taskIDList.validate(taskIDValue as string);
 
       if (searchTask !== '' && !taskIDList.syncError) {
-        setIsLoading(true);
         const data = {
           args: {
             task_id: searchTask,
@@ -457,19 +482,23 @@ export default function Clear() {
         navigate('/jobs/task/clear');
         setTask(null);
         setIsLoading(false);
+        setSearchTaskISLodaing(false);
       }
     } catch (error) {
       if (error instanceof Error) {
         setErrorMessage(true);
         setErrorMessageText(error.message);
         setIsLoading(false);
+        setSearchTaskISLodaing(false);
       }
     }
   };
 
   const handleSearchByURL = async (event: any) => {
+    setSearchTaskISLodaing(false);
     setLoadingButton(true);
     setIsLoading(true);
+    setSearchIconISLodaing(true);
     event.preventDefault();
 
     const data = new FormData(event.currentTarget);
@@ -525,6 +554,7 @@ export default function Clear() {
       } catch (error) {
         if (error instanceof Error) {
           setIsLoading(false);
+          setSearchIconISLodaing(false);
           setLoadingButton(false);
           setErrorMessage(true);
           setErrorMessageText(error.message);
@@ -532,6 +562,7 @@ export default function Clear() {
       }
     } else {
       setIsLoading(false);
+      setSearchIconISLodaing(false);
       setLoadingButton(false);
     }
   };
@@ -569,7 +600,7 @@ export default function Clear() {
   };
 
   return (
-    <ThemeProvider theme={theme}>
+    <Box>
       <Snackbar
         open={errorMessage}
         autoHideDuration={3000}
@@ -581,13 +612,14 @@ export default function Clear() {
         </Alert>
       </Snackbar>
       <Paper
-        variant="outlined"
-        sx={(theme) => ({
+        elevation={0}
+        sx={{
           display: 'inline-flex',
           flexWrap: 'wrap',
           mb: '2rem',
-          backgroundColor: '#EEEEEE',
-        })}
+          backgroundColor: 'var(--palette-grey-600Channel)',
+          borderRadius: '0.4rem',
+        }}
       >
         <StyledToggleButtonGroup
           size="small"
@@ -602,18 +634,20 @@ export default function Clear() {
             size="small"
             sx={{
               '&.Mui-selected': {
-                backgroundColor: 'var(--button-color)',
-                color: 'var(--table-title-color)',
+                backgroundColor: 'var(--palette-save-color)',
+                color: '#FFFFFF',
                 boxShadow: 'rgba(145, 158, 171, 0.2) 0px 0px 2px 0px, rgba(145, 158, 171, 0.12) 0px 12px 24px -4px',
                 '&:hover': {
-                  backgroundColor: 'var(--button-color)',
+                  backgroundColor: 'var(--palette-save-color)',
                 },
               },
               '&:hover': {
                 backgroundColor: 'transparent',
               },
-              p: '0.3rem 0.6rem',
-              width: '11.5rem',
+              // textTransform: 'none',
+              p: '0.3rem 0.5rem',
+              // width: '11.5rem',
+              color: 'var(--palette-dark-400Channel)',
             }}
           >
             <LinkOutlinedIcon sx={{ mr: '0.4rem' }} />
@@ -625,18 +659,20 @@ export default function Clear() {
             size="small"
             sx={{
               '&.Mui-selected': {
-                backgroundColor: 'var(--button-color)',
-                color: 'var(--table-title-color)',
+                backgroundColor: 'var(--palette-save-color)',
+                color: '#FFFFFF',
                 boxShadow: 'rgba(145, 158, 171, 0.2) 0px 0px 2px 0px, rgba(145, 158, 171, 0.12) 0px 12px 24px -4px',
                 '&:hover': {
-                  backgroundColor: 'var(--button-color)',
+                  backgroundColor: 'var(--palette-save-color)',
                 },
               },
               '&:hover': {
                 backgroundColor: 'transparent',
               },
-              p: '0.3rem 0.6rem',
-              width: '11.5rem',
+              // textTransform: 'none',
+              p: '0.3rem 0.5rem',
+              // width: '11.5rem',
+              color: 'var(--palette-dark-400Channel)',
             }}
           >
             <AssignmentOutlinedIcon fontSize="small" sx={{ mr: '0.4rem' }} />
@@ -646,7 +682,7 @@ export default function Clear() {
       </Paper>
       {search === 'task-id' ? (
         <Box component="form" onSubmit={handleSearchByTaskID} sx={{ width: '38rem', height: '3rem' }}>
-          <TextField fullWidth size="small" {...taskIDList.formProps} />
+          <TextField fullWidth variant="outlined" size="small" {...taskIDList.formProps} sx={{ p: 0 }} />
         </Box>
       ) : (
         <>
@@ -660,6 +696,7 @@ export default function Clear() {
                 borderRadius: '0.2rem',
                 width: optional ? '45rem' : '36rem',
                 position: 'absolute',
+                backgroundColor: 'var(--palette-background-menu-paper)',
               }}
             >
               <TextField
@@ -677,7 +714,7 @@ export default function Clear() {
                   <Typography variant="subtitle1" fontFamily="mabry-bold" component="div">
                     Optional
                   </Typography>
-                  <Paper elevation={0} sx={{ top: '2rem', backgroundColor: '#FFF' }}>
+                  <Box>
                     <Box className={styles.optionalContainer}>
                       {formList.map((item) => {
                         return (
@@ -694,12 +731,12 @@ export default function Clear() {
                                   placement="top"
                                 >
                                   <HelpIcon
-                                    color="disabled"
                                     sx={{
+                                      color: 'var(--palette-grey-300Channel)',
                                       width: '0.8rem',
                                       height: '0.8rem',
                                       mr: '0.3rem',
-                                      ':hover': { color: 'var(--description-color)' },
+                                      ':hover': { color: 'var(--palette-description-color)' },
                                     }}
                                   />
                                 </Tooltip>
@@ -739,7 +776,7 @@ export default function Clear() {
                         text="search"
                       />
                     </Box>
-                  </Paper>
+                  </Box>
                 </>
               ) : (
                 ''
@@ -754,14 +791,14 @@ export default function Clear() {
         </Box>
       ) : task && task?.type === 'get_task' ? (
         <Box sx={{ width: '100%', typography: 'body1', mt: '2rem' }}>
-          {peers && peers?.length > 0 ? (
+          {Array.isArray(peers) && peers?.length > 0 ? (
             <>
               <Typography variant="h6" m="1rem 0" fontFamily="mabry-bold">
                 Cache
               </Typography>
               <Box id="cache">
                 {peers.map((peer: any, index: any) => {
-                  const peerId = peer.scheduler_cluster_id;
+                  const peerId = peer?.scheduler_cluster_id;
                   const totalPage = Math.ceil(peer?.peers.length / 5);
                   const taskPage = taskPages[peerId] || 1;
                   const currentPageData = getPaginatedList(peer?.peers, taskPage, 5);
@@ -789,11 +826,7 @@ export default function Clear() {
                                 alignItems: 'center',
                               }}
                             >
-                              <Box
-                                component="img"
-                                sx={{ width: '0.6rem', height: '0.6rem' }}
-                                src="/icons/job/task/scheduler-cluster.svg"
-                              />
+                              <SchedulerCluster className={styles.schedulerClusterIcon} />
                               <Typography
                                 id="schedulerTotal"
                                 variant="subtitle2"
@@ -808,7 +841,11 @@ export default function Clear() {
                           </Box>
                           <Button
                             size="small"
-                            sx={{ background: 'var(--button-color)' }}
+                            sx={{
+                              background: 'var(--palette-button-color)',
+                              color: 'var(--palette-button-text-color)',
+                              ':hover': { backgroundColor: 'var(--palette-hover-button-text-color)' },
+                            }}
                             variant="contained"
                             onClick={(event) => {
                               event.stopPropagation();
@@ -826,7 +863,7 @@ export default function Clear() {
                             p: '1rem 0.8rem',
                             display: 'flex',
                             alignItems: 'center',
-                            backgroundColor: 'var(--table-title-color)',
+                            backgroundColor: 'var(--palette-table-title-color)',
                           }}
                         >
                           <Box width="20%" sx={{ display: 'flex', alignItems: 'center' }}>
@@ -891,13 +928,13 @@ export default function Clear() {
                                         borderRadius: '0.2rem',
                                         backgroundColor:
                                           item?.host_type === 'super'
-                                            ? 'var( --description-color)'
-                                            : 'var(--button-color)',
+                                            ? 'var( --palette-description-color)'
+                                            : 'var(--palette-button-color)',
                                         color: item?.host_type === 'super' ? '#FFFFFF' : '#FFFFFF',
                                         borderColor:
                                           item?.host_type === 'super'
-                                            ? 'var( --description-color)'
-                                            : 'var(--button-color)',
+                                            ? 'var( --palette-description-color)'
+                                            : 'var(--palette-button-color)',
                                         fontWeight: 'bold',
                                       }}
                                     />
@@ -947,13 +984,13 @@ export default function Clear() {
                                       borderRadius: '0.2rem',
                                       backgroundColor:
                                         item?.host_type === 'super'
-                                          ? 'var( --description-color)'
-                                          : 'var(--button-color)',
+                                          ? 'var( --palette-description-color)'
+                                          : 'var(--palette-button-color)',
                                       color: item?.host_type === 'super' ? '#FFFFFF' : '#FFFFFF',
                                       borderColor:
                                         item?.host_type === 'super'
-                                          ? 'var( --description-color)'
-                                          : 'var(--button-color)',
+                                          ? 'var( --palette-description-color)'
+                                          : 'var(--palette-button-color)',
                                       fontWeight: 'bold',
                                     }}
                                   />
@@ -972,7 +1009,7 @@ export default function Clear() {
                         </Box>
                       </Card>
                       {totalPage > 1 ? (
-                        <Box display="flex" justifyContent="flex-end" sx={{ marginTop: theme.spacing(2) }}>
+                        <Box display="flex" justifyContent="flex-end" sx={{ marginTop: '2rem' }}>
                           <Pagination
                             id={`pagination-${index}`}
                             count={totalPage}
@@ -992,7 +1029,7 @@ export default function Clear() {
             </>
           ) : (
             <Box id="no-task" sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', mt: '6rem' }}>
-              <Box component="img" sx={{ width: '4rem', mb: '3rem' }} src="/icons/job/task/no-search.svg" />
+              <NoSearch className={styles.noSearch} />
               <Box>
                 <Typography variant="h5" component="span">
                   You don't find any results!
@@ -1010,7 +1047,11 @@ export default function Clear() {
             p: '3rem 2rem 2rem 2rem',
           }}
         >
-          <Box component="img" style={{ width: '30rem', height: '30rem' }} src="/icons/job/task/no-task.svg" />
+          {theme.palette.mode === 'light' ? (
+            <NoTask id="no-task-image" className={styles.noTask} />
+          ) : (
+            <DarkNoTask id="dark-no-task-image" className={styles.noTask} />
+          )}
         </Box>
       )}
       <Dialog
@@ -1038,11 +1079,7 @@ export default function Clear() {
               alignItems: 'center',
             }}
           >
-            <Box
-              component="img"
-              src="/icons/cluster/delete.svg"
-              sx={{ width: '1.8rem', height: '1.8rem', mr: '0.4rem' }}
-            />
+            <Delete className={styles.deleteIcon} />
             <Typography variant="h6" component="div" fontFamily="mabry-bold">
               Delete
             </Typography>
@@ -1063,21 +1100,17 @@ export default function Clear() {
         <DialogContent>
           <Box component="form" onSubmit={handleDeleteTask}>
             <Box display="flex" alignItems="flex-start" pb="1rem">
-              <Box
-                component="img"
-                src="/icons/cluster/delete-warning.svg"
-                sx={{ width: '1.4rem', height: '1.4rem', pr: '0.2rem' }}
-              />
+              <DeleteWarning className={styles.deleteWarningIcon} />
               <Box>
                 <Typography
                   variant="body1"
                   fontFamily="mabry-bold"
                   component="span"
-                  sx={{ color: 'var(--delete-button-color)' }}
+                  sx={{ color: 'var(--palette-delete-button-color)' }}
                 >
                   WARNING:&nbsp;
                 </Typography>
-                <Typography variant="body1" component="span" sx={{ color: 'var(--delete-button-color)' }}>
+                <Typography variant="body1" component="span" sx={{ color: 'var(--palette-delete-button-color)' }}>
                   This action CANNOT be undone.
                 </Typography>
               </Box>
@@ -1115,6 +1148,6 @@ export default function Clear() {
           </Box>
         </DialogContent>
       </Dialog>
-    </ThemeProvider>
+    </Box>
   );
 }
diff --git a/src/components/job/task/executions/index.module.css b/src/components/job/task/executions/index.module.css
index 8e01cc3..d0600ac 100644
--- a/src/components/job/task/executions/index.module.css
+++ b/src/components/job/task/executions/index.module.css
@@ -3,7 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: var(--table-title-color);
+  background-color: var(--palette-table-title-color);
 }
 
 .listWrapper {
@@ -51,3 +51,20 @@
   color: var(--palette-text-disabled);
   font-family: 'mabry-bold';
 }
+
+.stateIcon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
+
+.pendingIcon {
+  width: 1.3rem;
+  height: 1.3rem;
+  color: #dbab0a;
+}
+
+.detailIcon {
+  width: 2rem;
+  height: 2rem;
+  color: var(--palette-button-color);
+}
diff --git a/src/components/job/task/executions/index.tsx b/src/components/job/task/executions/index.tsx
index 36e3913..378bdd2 100644
--- a/src/components/job/task/executions/index.tsx
+++ b/src/components/job/task/executions/index.tsx
@@ -23,6 +23,11 @@ import {
 } from '@mui/material';
 import MoreTimeIcon from '@mui/icons-material/MoreTime';
 import Card from '../../../card';
+import { ReactComponent as IcContent } from '../../../../assets/images/cluster/scheduler/ic-content.svg';
+import { ReactComponent as Success } from '../../../../assets/images/job/preheat/success.svg';
+import { ReactComponent as Failure } from '../../../../assets/images/job/preheat/failure.svg';
+import { ReactComponent as Pending } from '../../../../assets/images/job/preheat/pending.svg';
+import { ReactComponent as Detail } from '../../../../assets/images/job/preheat/detail.svg';
 
 export default function Executions() {
   const [errorMessage, setErrorMessage] = useState(false);
@@ -119,17 +124,6 @@ export default function Executions() {
     setStatus(event.target.value);
   };
 
-  const theme = createTheme({
-    palette: {
-      primary: {
-        main: '#1C293A',
-      },
-    },
-    typography: {
-      fontFamily: 'mabry-light,sans-serif',
-    },
-  });
-
   const handleClose = (_event: any, reason?: string) => {
     if (reason === 'clickaway') {
       return;
@@ -139,7 +133,7 @@ export default function Executions() {
   };
 
   return (
-    <ThemeProvider theme={theme}>
+    <Box>
       <Snackbar
         open={errorMessage}
         autoHideDuration={3000}
@@ -203,7 +197,7 @@ export default function Executions() {
           </Box>
         ) : executions && executions.length === 0 ? (
           <Box id="no-executions" className={styles.noData}>
-            <Box component="img" className={styles.nodataIcon} src="/icons/cluster/scheduler/ic-content.svg" />
+            <IcContent className={styles.nodataIcon} />
             <Typography variant="h6" className={styles.nodataText}>
               You don't have any executions.
             </Typography>
@@ -217,26 +211,11 @@ export default function Executions() {
                     <Box sx={{ display: 'flex', p: '0.8rem', alignItems: 'center' }}>
                       <Box className={styles.statusContainer}>
                         {item.result.state === 'SUCCESS' ? (
-                          <Box
-                            id={`SUCCESS-${item.id}`}
-                            component="img"
-                            sx={{ width: '1.3rem', height: '1.3rem' }}
-                            src="/icons/job/preheat/success.svg"
-                          />
+                          <Success id={`SUCCESS-${item.id}`} className={styles.stateIcon} />
                         ) : item.result.state === 'FAILURE' ? (
-                          <Box
-                            id={`FAILURE-${item.id}`}
-                            component="img"
-                            sx={{ width: '1.3rem', height: '1.3rem' }}
-                            src="/icons/job/preheat/failure.svg"
-                          />
+                          <Failure id={`FAILURE-${item.id}`} className={styles.stateIcon} />
                         ) : (
-                          <Box
-                            id={`PENDING-${item.id}`}
-                            component="img"
-                            sx={{ width: '1.3rem', height: '1.3rem' }}
-                            src="/icons/job/preheat/pending.svg"
-                          />
+                          <Pending id={`PENDING-${item.id}`} className={styles.pendingIcon} />
                         )}
                         <Box
                           sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}
@@ -264,20 +243,16 @@ export default function Executions() {
                           id={`execution-${item?.id}`}
                           to={`/jobs/task/executions/${item?.id}`}
                           underline="hover"
-                          sx={{ color: 'var(--description-color)' }}
+                          sx={{ color: 'var(--palette-description-color)' }}
                         >
-                          <Box
-                            component="img"
-                            sx={{ width: '2rem', height: '2rem' }}
-                            src="/icons/job/preheat/detail.svg"
-                          />
+                          <Detail className={styles.detailIcon} />
                         </RouterLink>
                       </Box>
                     </Box>
                     <Divider
                       sx={{
                         borderStyle: 'dashed',
-                        borderColor: 'var(--palette-divider)',
+                        borderColor: 'var(--palette-palette-divider)',
                         borderWidth: '0px 0px thin',
                       }}
                     />
@@ -286,26 +261,11 @@ export default function Executions() {
                   <Box key={item.id} id={`list-${item.id}`} className={styles.listWrapper}>
                     <Box className={styles.statusContainer}>
                       {item.result.state === 'SUCCESS' ? (
-                        <Box
-                          id={`SUCCESS-${item.id}`}
-                          component="img"
-                          sx={{ width: '1.3rem', height: '1.3rem' }}
-                          src="/icons/job/preheat/success.svg"
-                        />
+                        <Success id={`SUCCESS-${item.id}`} className={styles.stateIcon} />
                       ) : item.result.state === 'FAILURE' ? (
-                        <Box
-                          id={`FAILURE-${item.id}`}
-                          component="img"
-                          sx={{ width: '1.3rem', height: '1.3rem' }}
-                          src="/icons/job/preheat/failure.svg"
-                        />
+                        <Failure id={`FAILURE-${item.id}`} className={styles.stateIcon} />
                       ) : (
-                        <Box
-                          id={`PENDING-${item.id}`}
-                          component="img"
-                          sx={{ width: '1.3rem', height: '1.3rem' }}
-                          src="/icons/job/preheat/pending.svg"
-                        />
+                        <Pending id={`PENDING-${item.id}`} className={styles.pendingIcon} />
                       )}
                       <Box
                         sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}
@@ -331,13 +291,9 @@ export default function Executions() {
                         id={`execution-${item?.id}`}
                         to={`/jobs/task/executions/${item?.id}`}
                         underline="hover"
-                        sx={{ color: 'var(--description-color)' }}
+                        sx={{ color: 'var(--palette-description-color)' }}
                       >
-                        <Box
-                          component="img"
-                          sx={{ width: '2rem', height: '2rem' }}
-                          src="/icons/job/preheat/detail.svg"
-                        />
+                        <Detail className={styles.detailIcon} />
                       </RouterLink>
                     </Box>
                   </Box>
@@ -347,7 +303,7 @@ export default function Executions() {
         )}
       </Card>
       {totalPages > 1 ? (
-        <Box display="flex" justifyContent="flex-end" sx={{ marginTop: theme.spacing(2) }}>
+        <Box display="flex" justifyContent="flex-end" sx={{ marginTop: '2rem' }}>
           <Pagination
             count={totalPages}
             page={executionsPage}
@@ -364,6 +320,6 @@ export default function Executions() {
       ) : (
         <></>
       )}
-    </ThemeProvider>
+    </Box>
   );
 }
diff --git a/src/components/job/task/executions/show.module.css b/src/components/job/task/executions/show.module.css
index 64b5e81..7c0a99a 100644
--- a/src/components/job/task/executions/show.module.css
+++ b/src/components/job/task/executions/show.module.css
@@ -32,18 +32,15 @@
 .informationTitleIcon {
   width: 1.4rem !important;
   height: 1.4rem !important;
+  color: var(--palette-detail-lable-color);
 }
 
 .informationTitleText {
   margin-left: 1rem !important;
-  color: #515151;
+  color: var(--palette-detail-lable-color);
   font-family: 'mabry-bold' !important;
 }
 
-.statusIcon {
-  margin-right: 0.2rem;
-}
-
 .schedulerClustersID {
   width: 70%;
   display: flex;
@@ -54,10 +51,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--button-color);
-  color: var(--save-size-color);
-  border-radius: 0.3rem;
+  background-color: var(--palette-button-color);
+  color: var(--palette-button-text-color);
+  border-radius: 0.4rem;
   min-width: 1.6rem;
+  height: 1.6rem;
   margin-right: 0.5rem;
   padding: 0.2rem 0.4rem;
 }
@@ -78,9 +76,39 @@
 }
 
 .tableRow {
-  border-bottom: dashed var(--palette-divider);
+  border-bottom: dashed var(--palette-palette-divider);
 }
 
 .tableRow:last-child {
   border-bottom: none;
 }
+
+.statusIcon {
+  margin-right: 0.5rem;
+  width: 1rem !important;
+  height: 1rem !important;
+}
+
+.pendingIcon {
+  width: 1.3rem;
+  height: 1.3rem;
+  margin-right: 0.4rem;
+  color: var(--palette-button-text-color);
+}
+
+.errorIcon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
+
+.errorLogIcon {
+  width: 1.8rem;
+  height: 1.8rem;
+  color: var(--palette-button-color);
+}
+
+.IPIcon {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding-right: 0.4rem;
+}
diff --git a/src/components/job/task/executions/show.tsx b/src/components/job/task/executions/show.tsx
index efa911a..36c02cb 100644
--- a/src/components/job/task/executions/show.tsx
+++ b/src/components/job/task/executions/show.tsx
@@ -34,17 +34,18 @@ import { getBJTDatetime, getPaginatedList, useQuery } from '../../../../lib/util
 import _ from 'lodash';
 import { DEFAULT_SCHEDULER_TABLE_PAGE_SIZE } from '../../../../lib/constants';
 import Card from '../../../card';
-
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: '#1C293A',
-    },
-  },
-  typography: {
-    fontFamily: 'mabry-light,sans-serif',
-  },
-});
+import { ReactComponent as PreheatID } from '../../../../assets/images/job/preheat/id.svg';
+import { ReactComponent as Status } from '../../../../assets/images/job/preheat/status.svg';
+import { ReactComponent as URL } from '../../../../assets/images/job/preheat/url.svg';
+import { ReactComponent as Tag } from '../../../../assets/images/job/preheat/tag.svg';
+import { ReactComponent as CreatedAt } from '../../../../assets/images/job/preheat/created-at.svg';
+import { ReactComponent as Failure } from '../../../../assets/images/job/preheat/failure.svg';
+import { ReactComponent as Pending } from '../../../../assets/images/job/preheat/pending.svg';
+import { ReactComponent as ErrorLog } from '../../../../assets/images/job/preheat/error-log.svg';
+import { ReactComponent as TaskID } from '../../../../assets/images/job/task/task-id.svg';
+import { ReactComponent as Application } from '../../../../assets/images/job/task/type.svg';
+import { ReactComponent as IP } from '../../../../assets/images/job/task/ip.svg';
+import { ReactComponent as CheckLog } from '../../../../assets/images/job/task/error-log.svg';
 
 const CustomWidthTooltip = styled(({ className, ...props }: TooltipProps) => (
   <Tooltip {...props} classes={{ popper: className }} />
@@ -173,7 +174,7 @@ export default function ShowExecutions() {
   const errorlog = Array.from(new Set(jobStates.filter((items: string) => items !== '')));
 
   return (
-    <ThemeProvider theme={theme}>
+    <Box>
       <Snackbar
         open={errorMessage}
         autoHideDuration={3000}
@@ -220,12 +221,8 @@ export default function ShowExecutions() {
                 aria-controls="panel1d-content"
                 id="panel1d-header"
               >
-                <Box display="flex">
-                  <Box
-                    component="img"
-                    sx={{ width: '1.2rem', height: '1.2rem', mr: '0.4rem' }}
-                    src="/icons/job/preheat/failure.svg"
-                  />
+                <Box display="flex" alignItems="center">
+                  <Failure id="error-log-icon" className={styles.statusIcon} />
                   <Typography variant="body2" fontFamily="mabry-bold" sx={{ color: '#d0d7de' }}>
                     Error log
                   </Typography>
@@ -255,7 +252,7 @@ export default function ShowExecutions() {
       <Card className={styles.container}>
         <Box className={styles.informationContainer}>
           <Box className={styles.informationTitle}>
-            <Box component="img" className={styles.informationTitleIcon} src="/icons/job/preheat/id.svg" />
+            <PreheatID className={styles.informationTitleIcon} />
             <Typography variant="body1" component="div" className={styles.informationTitleText}>
               ID
             </Typography>
@@ -266,7 +263,7 @@ export default function ShowExecutions() {
         </Box>
         <Box className={styles.informationContainer}>
           <Box className={styles.informationTitle}>
-            <Box component="img" className={styles.informationTitleIcon} src="/icons/job/preheat/status.svg" />
+            <Status className={styles.informationTitleIcon} />
             <Typography variant="body1" component="div" className={styles.informationTitleText}>
               Status
             </Typography>
@@ -287,6 +284,7 @@ export default function ShowExecutions() {
                       : executions?.result.state === 'FAILURE'
                       ? '#D42536'
                       : '#DBAB0A',
+                  color: 'var(var(--palette-button-text-color)',
                 }}
                 id="status"
               >
@@ -295,12 +293,7 @@ export default function ShowExecutions() {
                 ) : executions?.result?.state === 'FAILURE' ? (
                   <></>
                 ) : (
-                  <Box
-                    component="img"
-                    id="pending-icon"
-                    className={styles.statusIcon}
-                    src="/icons/job/preheat/status-pending.svg"
-                  />
+                  <Pending id="pending-icon" className={styles.pendingIcon} />
                 )}
                 <Typography
                   variant="body2"
@@ -337,12 +330,7 @@ export default function ShowExecutions() {
                           setErrorLogText(errorlog.toString() || '');
                         }}
                       >
-                        <Box
-                          id="error-log-icon"
-                          component="img"
-                          sx={{ width: '1.2rem', height: '1.2rem' }}
-                          src="/icons/job/preheat/error-log.svg"
-                        />
+                        <ErrorLog id="error-log-icon" className={styles.errorIcon} />
                       </IconButton>
                     </Tooltip>
                   </>
@@ -357,7 +345,7 @@ export default function ShowExecutions() {
         </Box>
         <Box className={styles.informationContainer}>
           <Box className={styles.informationTitle}>
-            <Box component="img" className={styles.informationTitleIcon} src="/icons/job/task/task-id.svg" />
+            <TaskID className={styles.informationTitleIcon} />
             <Typography variant="body1" component="div" className={styles.informationTitleText}>
               Task ID
             </Typography>
@@ -372,7 +360,7 @@ export default function ShowExecutions() {
         </Box>
         <Box className={styles.informationContainer}>
           <Box className={styles.informationTitle}>
-            <Box component="img" className={styles.informationTitleIcon} src="/icons/job/preheat/url.svg" />
+            <URL className={styles.informationTitleIcon} />
             <Typography variant="body1" component="div" className={styles.informationTitleText}>
               URL
             </Typography>
@@ -389,7 +377,7 @@ export default function ShowExecutions() {
         </Box>
         <Box className={styles.informationContainer}>
           <Box className={styles.informationTitle}>
-            <Box component="img" className={styles.informationTitleIcon} src="/icons/job/preheat/tag.svg" />
+            <Tag className={styles.informationTitleIcon} />
             <Typography variant="body1" component="div" className={styles.informationTitleText}>
               Tag
             </Typography>
@@ -404,10 +392,10 @@ export default function ShowExecutions() {
                 variant="outlined"
                 sx={{
                   borderRadius: '0.3rem',
-                  background: 'var(--button-color)',
+                  background: 'var(--palette-button-color)',
                   color: '#FFFFFF',
                   mr: '0.4rem',
-                  borderColor: 'var(--button-color)',
+                  borderColor: 'var(--palette-button-color)',
                   fontWeight: 'bold',
                 }}
               />
@@ -420,7 +408,7 @@ export default function ShowExecutions() {
         </Box>
         <Box className={styles.informationContainer}>
           <Box className={styles.informationTitle}>
-            <Box component="img" className={styles.informationTitleIcon} src="/icons/job/task/type.svg" />
+            <Application className={styles.informationTitleIcon} />
             <Typography variant="body1" component="div" className={styles.informationTitleText}>
               Application
             </Typography>
@@ -437,7 +425,7 @@ export default function ShowExecutions() {
         </Box>
         <Box className={styles.informationContainer}>
           <Box className={styles.informationTitle}>
-            <Box component="img" className={styles.informationTitleIcon} src="/icons/job/preheat/id.svg" />
+            <PreheatID className={styles.informationTitleIcon} />
             <Typography variant="body1" component="div" className={styles.informationTitleText}>
               Scheduler Clusters ID
             </Typography>
@@ -460,7 +448,7 @@ export default function ShowExecutions() {
         </Box>
         <Box className={styles.informationContainer}>
           <Box className={styles.informationTitle}>
-            <Box component="img" className={styles.informationTitleIcon} src="/icons/job/preheat/created-at.svg" />
+            <CreatedAt className={styles.informationTitleIcon} />
             <Typography variant="body1" component="div" className={styles.informationTitleText}>
               Created At
             </Typography>
@@ -502,7 +490,7 @@ export default function ShowExecutions() {
           </Box>
           <Card>
             <Table sx={{ minWidth: 650 }} aria-label="a dense table" id="scheduler-table">
-              <TableHead sx={{ backgroundColor: 'var(--table-title-color)' }}>
+              <TableHead sx={{ backgroundColor: 'var(--palette-table-title-color)' }}>
                 <TableRow>
                   <TableCell align="center">
                     <Typography variant="subtitle1" fontFamily="mabry-bold">
@@ -539,7 +527,7 @@ export default function ShowExecutions() {
                     </TableCell>
                     <TableCell align="center">
                       <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-                        <Box component="img" className={styles.ipIcon} src="/icons/cluster/ip.svg" />
+                        <IP className={styles.informationTitleIcon} />
                         <Skeleton data-testid="scheduler-loading" width="4rem" />
                       </Box>
                     </TableCell>
@@ -585,11 +573,7 @@ export default function ShowExecutions() {
                             </TableCell>
                             <TableCell align="center">
                               <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                                <Box
-                                  component="img"
-                                  sx={{ width: '1.5rem', mr: '0.4rem' }}
-                                  src="/icons/job/task/ip.svg"
-                                />
+                                <IP className={styles.IPIcon} />
                                 <Typography variant="body2" component="div">
                                   {item?.ip}
                                 </Typography>
@@ -603,10 +587,14 @@ export default function ShowExecutions() {
                                 sx={{
                                   borderRadius: '0.2rem',
                                   backgroundColor:
-                                    item?.host_type === 'super' ? 'var( --description-color)' : 'var(--button-color)',
+                                    item?.host_type === 'super'
+                                      ? 'var( --palette-description-color)'
+                                      : 'var(--palette-button-color)',
                                   color: item?.host_type === 'super' ? '#FFFFFF' : '#FFFFFF',
                                   borderColor:
-                                    item?.host_type === 'super' ? 'var( --description-color)' : 'var(--button-color)',
+                                    item?.host_type === 'super'
+                                      ? 'var( --palette-description-color)'
+                                      : 'var(--palette-button-color)',
                                   fontWeight: 'bold',
                                 }}
                               />
@@ -618,12 +606,7 @@ export default function ShowExecutions() {
                                   setErrorLog(true);
                                 }}
                               >
-                                <Box
-                                  id="error-log-icon"
-                                  component="img"
-                                  sx={{ width: '1.8rem', height: '1.8rem' }}
-                                  src="/icons/job/task/error-log.svg"
-                                />
+                                <CheckLog id="error-log-icon" className={styles.errorLogIcon} />
                               </IconButton>
                             </TableCell>
                           </TableRow>
@@ -635,7 +618,7 @@ export default function ShowExecutions() {
             </Table>
           </Card>
           {totalPages > 1 ? (
-            <Box display="flex" justifyContent="flex-end" sx={{ marginTop: theme.spacing(2) }}>
+            <Box display="flex" justifyContent="flex-end" sx={{ marginTop: '2rem' }}>
               <Pagination
                 count={totalPages}
                 page={page}
@@ -655,6 +638,6 @@ export default function ShowExecutions() {
       ) : (
         <></>
       )}
-    </ThemeProvider>
+    </Box>
   );
 }
diff --git a/src/components/job/task/index.module.css b/src/components/job/task/index.module.css
new file mode 100644
index 0000000..6af2499
--- /dev/null
+++ b/src/components/job/task/index.module.css
@@ -0,0 +1,4 @@
+.tabIcon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
diff --git a/src/components/job/task/index.tsx b/src/components/job/task/index.tsx
index 7a98ad6..fa7b4d7 100644
--- a/src/components/job/task/index.tsx
+++ b/src/components/job/task/index.tsx
@@ -1,21 +1,13 @@
-import { Breadcrumbs, createTheme, styled, ThemeProvider, Typography, Link as RouterLink } from '@mui/material';
+import { Breadcrumbs, styled, Typography, Link as RouterLink } from '@mui/material';
 import { Link, Outlet, useLocation, useParams } from 'react-router-dom';
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Tabs from '@mui/material/Tabs';
 import Tab, { TabProps } from '@mui/material/Tab';
 import { useEffect } from 'react';
-
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: '#2e8f79',
-    },
-  },
-  typography: {
-    fontFamily: 'mabry-light,sans-serif',
-  },
-});
+import styles from './index.module.css';
+import { ReactComponent as Clear } from '../../../assets/images/job/task/clear-cache.svg';
+import { ReactComponent as Executions } from '../../../assets/images/job/task/executions.svg';
 
 export default function NavTabs() {
   const [value, setValue] = React.useState(1);
@@ -47,29 +39,33 @@ export default function NavTabs() {
     [theme.breakpoints.up('sm')]: {
       minWidth: 0,
     },
+    minHeight: '3rem',
     fontWeight: theme.typography.fontWeightRegular,
-    marginRight: theme.spacing(1),
-    color: 'rgba(0, 0, 0, 0.85)',
+    color: 'var(--palette-grey-tab)',
+    padding: '0',
+    marginRight: '2rem',
     fontSize: '0.9rem',
+    fontFamily: 'mabry-bold',
     '&:hover': {
       color: 'primary',
       opacity: 1,
     },
     '&.Mui-selected': {
-      color: '#000',
+      color: 'var(--palette-description-color)',
       fontFamily: 'mabry-bold',
     },
   }));
 
   const AntTabs = styled(Tabs)({
-    borderBottom: '1px solid #e8e8e8',
+    borderBottom: '1px solid var(--palette-tab-border-color)',
     '& .MuiTabs-indicator': {
-      backgroundColor: 'primary',
+      backgroundColor: 'var(--palette-description-color)',
+      borderRadius: '1rem',
     },
   });
 
   return (
-    <ThemeProvider theme={theme}>
+    <Box>
       <Breadcrumbs
         separator={
           <Box
@@ -79,8 +75,8 @@ export default function NavTabs() {
         aria-label="breadcrumb"
         sx={{ mb: '1rem' }}
       >
-        <Typography color="text.primary">jobs</Typography>
-        <Typography color="text.primary">task</Typography>
+        <Typography color="text.primary">Job</Typography>
+        <Typography color="text.primary">Task</Typography>
         {location.pathname.split('/')[3] === 'executions' ? (
           <RouterLink
             component={Link}
@@ -88,12 +84,12 @@ export default function NavTabs() {
             color={breadcrumbsColor === 5 ? 'text.primary' : 'inherit'}
             to={`/jobs/task/executions`}
           >
-            executions
+            Executions
           </RouterLink>
         ) : (
-          <Typography color="inherit">{location.pathname.split('/')[3]}</Typography>
+          <Typography color="inherit">Clear</Typography>
         )}
-        {params?.id ? <Typography color="inherit"> {params?.id}</Typography> : ''}
+        {params?.id ? <Typography color="inherit">{params?.id || '-'}</Typography> : ''}
       </Breadcrumbs>
       <AntTabs
         value={value}
@@ -103,7 +99,7 @@ export default function NavTabs() {
         scrollButtons="auto"
       >
         <AntTab
-          icon={<Box component="img" sx={{ width: '1.5rem' }} src="/icons/job/task/clear-cache.svg" />}
+          icon={<Clear className={styles.tabIcon} />}
           iconPosition="start"
           label="Clear"
           component={Link}
@@ -112,7 +108,7 @@ export default function NavTabs() {
           id="tab-clear"
         />
         <AntTab
-          icon={<Box component="img" sx={{ width: '1.5rem' }} src="/icons/job/task/executions.svg" />}
+          icon={<Executions className={styles.tabIcon} />}
           iconPosition="start"
           label="Executions"
           component={Link}
@@ -121,6 +117,6 @@ export default function NavTabs() {
         />
       </AntTabs>
       <Outlet />
-    </ThemeProvider>
+    </Box>
   );
 }
diff --git a/src/components/loading-backdrop.tsx b/src/components/loading-backdrop.tsx
deleted file mode 100644
index 80a43ad..0000000
--- a/src/components/loading-backdrop.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-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/loading-button.tsx b/src/components/loading-button.tsx
index 559ff89..9f4477b 100644
--- a/src/components/loading-button.tsx
+++ b/src/components/loading-button.tsx
@@ -12,7 +12,7 @@ interface cancelLoadingButtonProps extends ButtonProps {
 export const CancelLoadingButton: React.FC<cancelLoadingButtonProps> = ({ loading, onClick, id, ...rest }) => (
   <LoadingButton
     loading={loading}
-    endIcon={<CancelIcon sx={{ color: 'var(--button-color)' }} />}
+    endIcon={<CancelIcon sx={{ color: 'var(--palette-secondary-dark)' }} />}
     size="small"
     variant="outlined"
     type="reset"
@@ -20,17 +20,17 @@ export const CancelLoadingButton: React.FC<cancelLoadingButtonProps> = ({ loadin
     id={id}
     sx={{
       '&.MuiLoadingButton-root': {
-        color: 'var(--calcel-size-color)',
-        borderColor: 'var(--calcel-color)',
+        color: 'var(--palette-secondary-dark)',
+        borderColor: 'var(--palette-secondary-dark)',
+        backgroundColor: 'var(--palette-calcel-background-color)',
       },
       ':hover': {
-        backgroundColor: 'var(--calcel-hover-corlor)',
-        borderColor: 'var(--calcel-hover-corlor)',
+        backgroundColor: 'var(--palette-calcel-hover-corlor)',
+        borderColor: 'var(--palette-secondary-dark)',
       },
       '&.MuiLoadingButton-loading': {
-        backgroundColor: 'var(--button-loading-color)',
-        color: 'var(--button-loading-size-color)',
-        borderColor: 'var(--button-loading-color)',
+        backgroundColor: 'var(--palette-button-loading-color)',
+        color: 'var(--palette-button-loading-size-color)',
       },
       mr: '1rem',
       width: '7rem',
@@ -75,18 +75,18 @@ export const SavelLoadingButton: React.FC<saveLoadingButtonProps> = ({
       id={id}
       sx={{
         '&.MuiLoadingButton-root': {
-          backgroundColor: 'var(--save-color)',
-          color: 'var(--save-size-color)',
-          borderColor: 'var(--save-color)',
+          background: 'var(--palette-button-color)',
+          color: 'var(--palette-button-text-color)',
+          borderColor: 'var(--palette-button-color)',
         },
         ':hover': {
-          backgroundColor: 'var(--save-hover-corlor)',
-          borderColor: 'var(--save-hover-corlor)',
+          backgroundColor: 'var(--palette-hover-button-text-color)',
+          borderColor: 'var(--palette-hover-button-text-color)',
         },
         '&.MuiLoadingButton-loading': {
-          backgroundColor: 'var(--button-loading-color)',
-          color: 'var(--button-loading-size-color)',
-          borderColor: 'var(--button-loading-color)',
+          backgroundColor: 'var(--palette-button-loading-color)',
+          color: 'var(--palette-button-loading-size-color)',
+          borderColor: 'var(--palette-button-loading-color)',
         },
         width: '7rem',
       }}
@@ -123,18 +123,18 @@ export const DeleteLoadingButton: React.FC<saveLoadingButtonProps> = ({
       id={id}
       sx={{
         '&.MuiLoadingButton-root': {
-          backgroundColor: 'var(--delete-button-color)',
-          color: 'var(--save-size-color)',
-          borderColor: 'var(--delete-button-color)',
+          backgroundColor: 'var(--palette-delete-button-color)',
+          color: 'var(--palette-common-white)',
+          borderColor: 'var(--palette-delete-button-color)',
         },
         ':hover': {
-          backgroundColor: 'var(--delete-button-hover-color)',
-          borderColor: 'var(--delete-button-hover-color)',
+          backgroundColor: 'var(--palette-delete-button-hover-color)',
+          borderColor: 'var(--palette-delete-button-hover-color)',
         },
         '&.MuiLoadingButton-loading': {
-          backgroundColor: 'var(--delete-button-color)',
+          backgroundColor: 'var(--palette-delete-button-color)',
 
-          borderColor: 'var(--delete-button-color)',
+          borderColor: 'var(--palette-delete-button-color)',
         },
         width: '7rem',
       }}
diff --git a/src/components/menu/index.module.css b/src/components/menu/index.module.css
index de958c3..4f9d356 100644
--- a/src/components/menu/index.module.css
+++ b/src/components/menu/index.module.css
@@ -1,85 +1,261 @@
 .container {
   display: flex;
-  flex-direction: row;
+  flex: 1 1 auto;
+  flex-direction: column;
+  background-color: var(--palette-sidebar-background-color);
+  height: 100vh;
+}
+
+.layout {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  background-color: var(--palette-sidebar-background-color);
+}
+
+.main {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  padding: 1.5rem 2rem;
+  margin: 0.8rem 0.8rem 0.8rem 1.2rem;
+  overflow-y: auto !important;
+  background-color: var(--palette-main-background-paper);
+  box-shadow: var(--palette-card-box-shadow);
+  border-radius: 0.6rem;
 }
 
 .navigationBarContainer {
   background-size: cover;
   background-position: center;
-  height: 100vh;
-  max-width: 16rem;
+  height: 100%;
+  position: fixed;
   display: flex;
   flex-direction: column;
+  z-index: 1101;
+  background-color: var(--palette-sidebar-background-color);
+}
+
+.sidebarTitle {
+  padding: 1.5rem 0 1rem 0.3rem;
+  display: flex;
+  align-items: center;
   justify-content: space-between;
 }
 
-.title {
+.expandIcon {
+  width: 1rem;
+  height: 1rem;
+  color: var(--palette-sidebar-menu-color);
+}
+
+.liMenu {
   display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.shrinkLiMenu {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  align-items: center;
+}
+
+.sidebarExpand {
+  width: 0.6rem;
+  height: 0.6rem;
+}
+
+.list {
+  margin-left: 1.25rem !important;
+  padding-left: 0.75rem !important;
+  padding-top: 0.8rem !important;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.list:before {
+  top: 0px;
+  left: 0px;
+  width: 2px;
+  content: '';
+  position: absolute;
+  background-color: var(--paletteexpandable-sidebar-navigation);
+  bottom: 1rem;
+  bottom: calc(36px - 2px - 12px / 2);
+}
+
+.expandable:before {
+  left: 0px;
+  content: '';
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background-color: var(--paletteexpandable-sidebar-navigation);
+  mask: url(../../assets/images/menu/layout.svg) 50% 50% / 100% no-repeat;
+  transform: translate(calc(12px * -1), calc(12px * -0.4));
+}
+
+.shrinkMenu {
+  background-color: var(--palette-background-menu);
+  background-image: url(../../assets/images/menu/cyan-blur.png), url(../../assets/images/menu/red-blur.png);
+  background-repeat: no-repeat, no-repeat;
+  padding: 0.2rem;
+  background-size: 50%, 50%;
+  box-shadow: var(--custom-sidebar-shadows-dropdown);
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  outline: 0px;
+  background-position: right top, left bottom;
+  border-radius: var(--menu-border-radius);
+  overflow: inherit;
+  min-width: 10rem;
+}
+
+.title {
+  display: inline-flex;
   align-items: center;
-  margin-left: 0.4rem;
-  margin-top: 2rem;
 }
 
 .logo {
   width: 1.8rem;
   height: 1.8rem;
-  margin-right: 0.8rem;
+  color: var(--palette-description-color);
 }
 
 .menuIcon {
-  width: 1.6rem;
-  height: 1.6rem;
-}
-
-.avatar {
-  width: 2.6rem !important;
-  height: 2.6rem !important;
-  margin-right: 0.6rem;
-  background: var(--button-color) !important;
-}
-
-.menu {
-  padding-top: 0.4rem;
-  padding-bottom: 0.4rem;
-  width: 14rem;
-}
-
-.expandMenu {
-  padding-top: 0.4rem;
-  padding-bottom: 0.4rem;
-  width: 14rem;
-  float: right;
+  width: 1rem;
+  height: 1rem;
 }
 
 .menuText {
   font-family: 'mabry-bold' !important;
+  margin-left: 0.5rem !important;
+}
+
+.avatarMenu {
+  font-family: 'mabry-bold' !important;
+  color: var(--palette-color);
+}
+
+.avatarButton {
+  position: relative;
+  transition: transform 0.6s easel;
+  margin-left: 0.3rem;
+  padding: 0.3rem;
+}
+
+.avatarButton:hover {
+  transform: scale(1.06);
+}
+
+.avatarWrapper {
+  background: conic-gradient(#73bafb, #ffd666, #73bafb);
+  width: 2.7rem;
+  height: 2.7rem;
+  animation: rotate 4s linear infinite;
+  position: absolute;
+  border-radius: 50%;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.avatar {
+  width: 2.35rem !important;
+  height: 2.35rem !important;
+  background: var(--palette-secondary-dark) !important;
 }
 
 .profileMenu {
-  background-image: url(../../../public/images/menu/cyan-blur.png), url(../../../public/images/menu/red-blur.png);
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: var(--palette-background-menu);
+  background-image: url(../../assets/images/menu/cyan-blur.png), url(../../assets/images/menu/red-blur.png);
   background-repeat: no-repeat, no-repeat;
   padding: 0.2rem;
   background-size: 50%, 50%;
-  box-shadow: rgba(145, 158, 171, 0.24) 0px 0px 2px 0px, rgba(145, 158, 171, 0.24) -20px 20px 40px -4px;
   transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
   outline: 0px;
   background-position: right top, left bottom;
-  border-radius: 10px;
+  border-radius: var(--menu-border-radius);
   overflow: inherit;
+  min-width: 10rem;
+}
+
+.avatarContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0.8rem;
+}
+
+.menuAvatar {
+  width: 3rem !important;
+  height: 3rem !important;
+  background: var(--palette-secondary-dark) !important;
+}
+
+.menuUserName {
+  font-family: 'mabry-bold' !important;
+  padding-top: 0.6rem;
+  color: var(--palette-color);
+}
+
+.menuUserEmail {
+  width: 100%;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-top: 0.6rem;
+  color: var(--palette-text-palette-text-secondary);
 }
 
 .menuItemIcon {
-  color: var(--button-color);
+  color: var(--palette-button-color);
 }
 
 .pageContainer {
-  position: relative;
-  width: 100%;
+  overflow-y: auto;
+  height: 100vh;
 }
 
 .pageloading {
   width: 100%;
   position: absolute;
   top: 0;
+  z-index: 1200;
+}
+
+.sidebarUser {
+  padding: 0.4rem 0.6rem 0.4rem 0.7rem;
+  margin-bottom: 0.8rem;
+  display: flex;
+  align-items: center;
+  position: relative;
+  background-color: var(--palette-sidebar-user-background-paper) !important;
+}
+
+.shrinkSidebarUser {
+  padding-bottom: 0.8rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.shrinkDarkMode {
+  margin-bottom: 1rem;
+}
+
+.darkMode {
+  margin-bottom: 1rem;
+  width: 100%;
 }
diff --git a/src/components/menu/index.tsx b/src/components/menu/index.tsx
index fcda29e..9bf2df1 100644
--- a/src/components/menu/index.tsx
+++ b/src/components/menu/index.tsx
@@ -2,7 +2,6 @@ import styles from './index.module.css';
 import {
   Alert,
   Avatar,
-  Backdrop,
   Collapse,
   Divider,
   Grid,
@@ -12,8 +11,9 @@ import {
   Menu,
   MenuItem,
   Snackbar,
-  Tooltip,
   Typography,
+  Link as RouterLink,
+  Tooltip,
 } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
@@ -21,14 +21,23 @@ import Box from '@mui/material/Box';
 import List from '@mui/material/List';
 import { ListItemButton, ListItemIcon } from '@mui/material';
 import { createContext, useEffect, useState } from 'react';
-import { ExpandLess, ExpandMore, Logout, PersonAdd } from '@mui/icons-material';
-import ChevronRightOutlinedIcon from '@mui/icons-material/ChevronRightOutlined';
+import { Logout, PersonAdd } from '@mui/icons-material';
 import { getUserRoles, getUser, signOut, getUserResponse } from '../../lib/api';
-import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
 import { getJwtPayload, setPageTitle } from '../../lib/utils';
 import { Link, useLocation, useNavigate, Outlet } from 'react-router-dom';
 import { ROLE_ROOT, ROLE_GUEST } from '../../lib/constants';
-import LoadingBackdrop from '../loading-backdrop';
+import { ReactComponent as Cluster } from '../../assets/images/menu/cluster.svg';
+import { ReactComponent as Developer } from '../../assets/images/menu/developer.svg';
+import { ReactComponent as Job } from '../../assets/images/menu/job.svg';
+import { ReactComponent as User } from '../../assets/images/menu/user.svg';
+import { ReactComponent as Logo } from '../../assets/images/menu/logo.svg';
+import { ReactComponent as Expand } from '../../assets/images/menu/expand.svg';
+import { ReactComponent as Closure } from '../../assets/images/menu/closure.svg';
+import { ReactComponent as SidebarExpand } from '../../assets/images/menu/sidebar-expand.svg';
+import { ReactComponent as SidebarClosure } from '../../assets/images/menu/sidebar-closure.svg';
+import { HeaderLayout, ShrinkDarkMode } from '../dark-layout';
+import Card from '../card';
+import _ from 'lodash';
 
 interface MyContextType {
   user: getUserResponse;
@@ -56,28 +65,15 @@ export const MyContext = createContext<MyContextType>({
   },
 });
 
-const Main = styled('div')(({ theme }) => ({
-  flexGrow: 1,
-  overflow: 'auto',
-  minHeight: '100%',
-  height: '100vh',
-  paddingBottom: theme.spacing(8),
-  [theme.breakpoints.up('lg')]: {
-    paddingTop: '1.5rem',
-    paddingLeft: theme.spacing(4),
-    paddingRight: theme.spacing(4),
-  },
-  fontFamily: 'mabry-light,sans-serif',
-}));
-
 const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
   borderRadius: 5,
+  height: '3px',
   [`&.${linearProgressClasses.colorPrimary}`]: {
     backgroundColor: 'rgba(0, 167, 111, 0.4)',
   },
   [`& .${linearProgressClasses.bar}`]: {
     borderRadius: 3,
-    backgroundColor: 'var(--description-color)',
+    backgroundColor: 'var(--palette-description-color)',
   },
 }));
 
@@ -104,6 +100,11 @@ export default function Layout(props: any) {
   const [expandDeveloper, setExpandDeveloper] = useState(false);
   const [expandJob, setExpandJob] = useState(false);
   const [progress, setProgress] = useState(0);
+  const [expandedMenu, setExpandedMenu] = useState<any | null>(null);
+  const [compactLayout, setCompactLayout] = useState(() => {
+    const storedValue = localStorage.getItem('compactLayout');
+    return storedValue === 'true';
+  });
 
   const openProfile = Boolean(anchorElement);
   const location = useLocation();
@@ -164,6 +165,14 @@ export default function Layout(props: any) {
     }
   }, [location.pathname, navigate, location.state?.firstLogin]);
 
+  const handleMouseLeave = () => {
+    setExpandedMenu(null);
+  };
+
+  useEffect(() => {
+    localStorage.setItem('compactLayout', compactLayout ? 'true' : 'false');
+  }, [compactLayout]);
+
   const handleUserUpdate = (newUser: getUserResponse) => {
     setUser(newUser);
   };
@@ -173,15 +182,13 @@ export default function Layout(props: any) {
       label: 'clusters',
       href: '/clusters',
       text: 'Cluster',
-      icon: <Box component="img" className={styles.menuIcon} src="/icons/cluster/cluster.svg" />,
-      selectedIcon: <Box component="img" className={styles.menuIcon} src="/icons/cluster/selected-cluster.svg" />,
+      icon: <Cluster className={styles.menuIcon} />,
     },
     {
       label: 'developer',
       href: '/tokens',
       text: 'Developer',
-      icon: <Box component="img" className={styles.menuIcon} src="/icons/tokens/developer.svg" />,
-      selectedIcon: <Box component="img" className={styles.menuIcon} src="/icons/tokens/selected-developer.svg" />,
+      icon: <Developer className={styles.menuIcon} />,
       expand: expandDeveloper,
       setExpand: setExpandDeveloper,
       menuProps: [
@@ -196,8 +203,7 @@ export default function Layout(props: any) {
       label: 'jobs',
       href: '/jobs',
       text: 'Job',
-      icon: <Box component="img" className={styles.menuIcon} src="/icons/job/preheat/job.svg" />,
-      selectedIcon: <Box component="img" className={styles.menuIcon} src="/icons/job/preheat/selected-job.svg" />,
+      icon: <Job className={styles.menuIcon} />,
       expand: expandJob,
       setExpand: setExpandJob,
       menuProps: [
@@ -220,8 +226,7 @@ export default function Layout(props: any) {
       label: 'users',
       href: '/users',
       text: 'User',
-      icon: <Box component="img" className={styles.menuIcon} src="/icons/user/user.svg" />,
-      selectedIcon: <Box component="img" className={styles.menuIcon} src="/icons/user/selected-user.svg" />,
+      icon: <User className={styles.menuIcon} />,
     });
   }
 
@@ -244,6 +249,7 @@ export default function Layout(props: any) {
     if (reason === 'clickaway') {
       return;
     }
+
     setFirstLogin(false);
     setErrorMessage(false);
   };
@@ -282,216 +288,472 @@ export default function Layout(props: any) {
         {location.pathname === '/signin' || location.pathname === '/signup' ? (
           <main>{props.children}</main>
         ) : (
-          <Box className={styles.container}>
+          <Box>
             <CssBaseline />
-            <Box className={styles.navigationBarContainer}>
-              <Grid sx={{ pl: '1rem', pr: '1rem' }}>
-                <Box className={styles.title}>
-                  <picture>
-                    <Box component="img" className={styles.logo} src="/icons/cluster/logo.svg" />
-                  </picture>
-                  <Typography variant="h6" gutterBottom sx={{ fontFamily: 'mabry-bold' }}>
-                    Dragonfly
-                  </Typography>
-                </Box>
-                <List component="nav" aria-label="main mailbox folders">
-                  {menu.map((items) =>
-                    items?.menuProps ? (
-                      <Box key={items.href} className={styles.menu}>
-                        <ListItemButton
-                          selected={(location.pathname.split('/')[1] || '') === items.label}
+            <Box className={styles.container}>
+              <Box className={styles.navigationBarContainer}>
+                {compactLayout ? (
+                  <Grid
+                    sx={{
+                      width: '4rem',
+                      pl: '1.2rem',
+                      height: '100%',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      justifyContent: 'space-between',
+                    }}
+                  >
+                    <Box>
+                      <Box sx={{ display: 'flex', justifyContent: 'center', p: '1.5rem 0 1rem 0' }}>
+                        <IconButton
                           onClick={() => {
-                            items?.setExpand(!items?.expand);
-                          }}
-                          sx={{
-                            '&.Mui-selected': {
-                              backgroundColor: 'var(--menu-background-color)',
-                              color: 'var(--description-color)',
-                            },
-                            '&.Mui-selected:hover': {
-                              backgroundColor: 'var(--hover-menu-background-color)',
-                              color: 'var(--description-color)',
-                            },
-                            height: '2.6rem',
-                            borderRadius: '0.2rem',
+                            setCompactLayout((e: any) => !e);
                           }}
                         >
-                          {(location.pathname.split('/')[1] || '') === items.label ? items.selectedIcon : items.icon}
-                          <Typography
-                            variant="subtitle1"
-                            sx={{ fontFamily: 'mabry-bold', ml: '0.4rem', width: '100%' }}
-                          >
-                            {items.text}
-                          </Typography>
-                          {items.expand ? <ExpandMore /> : <ChevronRightOutlinedIcon />}
-                        </ListItemButton>
-                        <Collapse in={items.expand} timeout="auto" unmountOnExit>
-                          <List component="div" disablePadding>
-                            {items.menuProps?.map((item) => {
-                              return (
-                                <ListItemButton
-                                  className={styles.expandMenu}
-                                  selected={(location.pathname.split('/')[2] || '') === item.label}
-                                  component={Link}
-                                  to={item.href || ''}
-                                  sx={{
-                                    '&.Mui-selected': {
-                                      backgroundColor: '#fff',
-                                      color: 'var(--description-color)',
-                                    },
-                                    '&.Mui-selected:hover': {
-                                      backgroundColor: '#fff',
-                                      color: 'var(--description-color)',
-                                    },
-                                    height: '2.4rem',
-                                    borderRadius: '0.2rem',
-                                    pl: '1rem',
-                                    mt: '0.8rem',
-                                  }}
-                                >
-                                  <Typography variant="body1" sx={{ fontFamily: 'mabry-bold', ml: '2rem' }}>
-                                    {item.text}
-                                  </Typography>
-                                </ListItemButton>
-                              );
-                            })}
-                          </List>
-                        </Collapse>
+                          <Expand id="expand" className={styles.expandIcon} />
+                        </IconButton>
                       </Box>
-                    ) : (
-                      <ListItemButton
-                        className={styles.menu}
-                        key={items.href}
-                        selected={(location.pathname.split('/')[1] || '') === items.label}
-                        component={Link}
-                        to={items.href}
+                      <List component="nav" aria-label="main mailbox folders" className={styles.shrinkLiMenu}>
+                        {menu.map((items, index) => {
+                          return items?.menuProps ? (
+                            <ListItemButton
+                              id={items.label}
+                              key={index}
+                              selected={(location.pathname.split('/')[1] || '') === items.label}
+                              onMouseEnter={() => {
+                                setExpandedMenu(items.label);
+                              }}
+                              sx={{
+                                '&.Mui-selected': {
+                                  backgroundColor: 'var(--palette-menu-background-color)',
+                                  color: 'var(--palette-secondary-dark)',
+                                },
+                                '&.Mui-selected:hover': {
+                                  backgroundColor: 'var(--palette-hover-menu-background-color)',
+                                  color: 'var(--palette-secondary-dark)',
+                                },
+                                borderRadius: '0.6rem',
+                                color: 'var(--palette-sidebar-menu-color)',
+                                p: '0.5rem',
+                                justifyContent: 'center',
+                                position: 'relative !important',
+                                width: '2.4rem',
+                                height: '2.4rem',
+                              }}
+                            >
+                              {items.icon}
+                              {items?.menuProps && expandedMenu === items.label && (
+                                <Box
+                                  id={items.label}
+                                  key={items.label}
+                                  onMouseLeave={handleMouseLeave}
+                                  sx={{
+                                    position: 'absolute ',
+                                    left: '60px',
+                                  }}
+                                  className={styles.shrinkMenu}
+                                >
+                                  {items.menuProps.map((subItem) => (
+                                    <MenuItem
+                                      id={subItem.label}
+                                      sx={{ borderRadius: 'var(--menu-border-radius)' }}
+                                      key={subItem.label}
+                                      onClick={() => {
+                                        setExpandedMenu(null);
+                                      }}
+                                      component={Link}
+                                      to={subItem.href}
+                                    >
+                                      <Typography variant="body2" className={styles.avatarMenu}>
+                                        {subItem.text}
+                                      </Typography>
+                                    </MenuItem>
+                                  ))}
+                                </Box>
+                              )}
+                            </ListItemButton>
+                          ) : (
+                            <ListItemButton
+                              id={items.label}
+                              key={index}
+                              selected={(location.pathname.split('/')[1] || '') === items.label}
+                              component={Link}
+                              to={items.href}
+                              className={
+                                (location.pathname.split('/')[1] || '') === items.label ? styles.listButton : ''
+                              }
+                              onMouseEnter={handleMouseLeave}
+                              sx={{
+                                '&.Mui-selected': {
+                                  backgroundColor: 'var(--palette-menu-background-color)',
+                                  color: 'var(--palette-secondary-dark)',
+                                },
+                                '&.Mui-selected:hover': {
+                                  backgroundColor: 'var(--palette-hover-menu-background-color)',
+                                  color: 'var(--palette-secondary-dark)',
+                                },
+                                borderRadius: '0.6rem',
+                                color: 'var(--palette-sidebar-menu-color)',
+                                p: '0.5rem',
+                                justifyContent: 'center',
+                                width: '2.4rem',
+                                height: '2.4rem',
+                              }}
+                            >
+                              {items.icon}
+                            </ListItemButton>
+                          );
+                        })}
+                      </List>
+                    </Box>
+                    <Box className={styles.shrinkSidebarUser}>
+                      <ShrinkDarkMode className={styles.shrinkDarkMode} />
+                      <IconButton
+                        id="unfold-more"
+                        className={styles.avatarButton}
+                        onClick={(event: any) => {
+                          setAnchorElement(event.currentTarget);
+                        }}
+                        sx={{ p: '0.3rem' }}
+                      >
+                        <Box className={styles.avatarWrapper} />
+                        <Avatar className={styles.avatar} src={user?.avatar} />
+                      </IconButton>
+                      <Menu
+                        anchorEl={anchorElement}
+                        id="account-menu"
+                        open={openProfile}
+                        onClose={() => {
+                          setAnchorElement(null);
+                        }}
+                        anchorOrigin={{
+                          vertical: 'top',
+                          horizontal: 'left',
+                        }}
+                        transformOrigin={{
+                          vertical: 'bottom',
+                          horizontal: 'left',
+                        }}
                         sx={{
-                          '&.Mui-selected': {
-                            backgroundColor: 'var(--menu-background-color)',
-                            color: 'var(--description-color)',
+                          '& .MuiMenu-paper': {
+                            boxShadow: 'var(--custom-shadows-dropdown)',
+                            borderRadius: 'var(--menu-border-radius)',
                           },
-                          '&.Mui-selected:hover': {
-                            backgroundColor: 'var(--hover-menu-background-color)',
-                            color: 'var(--description-color)',
+                          '& .MuiMenu-list': {
+                            width: '14rem',
+                            p: '0',
                           },
-                          height: '2.6rem',
-                          borderRadius: '0.2rem',
-                          mb: '0.4rem',
-                          mt: '0.4rem',
                         }}
                       >
-                        {(location.pathname.split('/')[1] || '') === items.label ? items.selectedIcon : items.icon}
-                        <Typography variant="subtitle1" sx={{ fontFamily: 'mabry-bold', ml: '0.4rem' }}>
-                          {items.text}
-                        </Typography>
-                      </ListItemButton>
-                    ),
-                  )}
-                </List>
-              </Grid>
-              <Grid sx={{ mb: '4rem', pl: '1rem', pr: '1rem' }}>
-                <Box
-                  sx={{
-                    display: 'flex',
-                    alignItems: 'flex-start',
-                    justifyContent: 'space-between',
-                  }}
-                >
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                    <Avatar className={styles.avatar} src={user?.avatar} />
-                    <Box
-                      sx={{
-                        width: '7rem',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        justifyContent: 'space-between',
-                      }}
-                    >
-                      <Typography id="menu-name" component="div" fontFamily="mabry-bold">
-                        {user?.name || '-'}
-                      </Typography>
-                      <Tooltip title={user?.email || '-'} placement="top">
-                        <Typography
-                          id="menu-email"
-                          component="div"
-                          variant="caption"
-                          sx={{
-                            width: '7rem',
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
+                        <Box className={styles.profileMenu}>
+                          <Box className={styles.avatarContainer}>
+                            <Avatar className={styles.menuAvatar} src={user?.avatar} />
+                            <Typography variant="body1" className={styles.menuUserName}>
+                              {user?.name}
+                            </Typography>
+                            <Tooltip title={user?.email || '-'} placement="top">
+                              <Typography variant="body1" className={styles.menuUserEmail}>
+                                {user?.email || '-'}
+                              </Typography>
+                            </Tooltip>
+                          </Box>
+                          <Divider
+                            sx={{
+                              borderStyle: 'dashed',
+                              borderColor: 'var(--palette-palette-divider)',
+                              borderWidth: '0px 0px thin',
+                              m: '0.2rem 0',
+                            }}
+                          />
+                          <MenuItem
+                            id="profile-menu"
+                            onClick={() => {
+                              setAnchorElement(null);
+                              navigate('/profile');
+                            }}
+                            sx={{ borderRadius: 'var(--menu-border-radius)' }}
+                          >
+                            <ListItemIcon>
+                              <PersonAdd fontSize="small" className={styles.menuItemIcon} />
+                            </ListItemIcon>
+                            <Typography variant="body2" className={styles.avatarMenu}>
+                              Profile
+                            </Typography>
+                          </MenuItem>
+                          <MenuItem
+                            sx={{ borderRadius: 'var(--menu-border-radius)' }}
+                            id="logout-menu"
+                            onClick={handleLogout}
+                          >
+                            <ListItemIcon>
+                              <Logout fontSize="small" className={styles.menuItemIcon} />
+                            </ListItemIcon>
+                            <Typography variant="body2" className={styles.avatarMenu}>
+                              Logout
+                            </Typography>
+                          </MenuItem>
+                        </Box>
+                      </Menu>
+                    </Box>
+                  </Grid>
+                ) : (
+                  <Grid
+                    sx={{
+                      width: '13.5rem',
+                      pl: '1.2rem',
+                      height: '100%',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      justifyContent: 'space-between',
+                    }}
+                  >
+                    <Box>
+                      <Box className={styles.sidebarTitle}>
+                        <RouterLink id="dragonfly" href="/" color="inherit" underline="none" className={styles.title}>
+                          <Logo className={styles.logo} />
+                          <Typography variant="h6" sx={{ fontFamily: 'mabry-bold', pl: '0.6rem' }}>
+                            Dragonfly
+                          </Typography>
+                        </RouterLink>
+                        <IconButton
+                          onClick={() => {
+                            setCompactLayout((e: any) => !e);
                           }}
                         >
-                          {user?.email || '-'}
-                        </Typography>
-                      </Tooltip>
+                          <Closure id="closure" className={styles.expandIcon} />
+                        </IconButton>
+                      </Box>
+                      <List component="nav" aria-label="main mailbox folders" className={styles.liMenu}>
+                        {menu.map((items) =>
+                          items?.menuProps ? (
+                            <Box key={items.href}>
+                              <ListItemButton
+                                id={items.label}
+                                selected={(location.pathname.split('/')[1] || '') === items.label}
+                                onClick={() => {
+                                  items?.setExpand(!items?.expand);
+                                }}
+                                className={
+                                  (location.pathname.split('/')[1] || '') === items.label ? styles.listButton : ''
+                                }
+                                sx={{
+                                  '&.Mui-selected': {
+                                    backgroundColor: 'var(--palette-menu-background-color)',
+                                    color: 'var(--palette-secondary-dark)',
+                                  },
+                                  '&.Mui-selected:hover': {
+                                    color: 'var(--palette-secondary-dark)',
+                                  },
+                                  borderRadius: '0.6rem',
+                                  color: 'var(--palette-sidebar-menu-color)',
+                                  p: '0.5rem 0.7rem',
+                                  justifyContent: 'space-between',
+                                }}
+                              >
+                                <Box display="flex" alignItems="center">
+                                  {items.icon}
+                                  <Typography variant="body1" className={styles.menuText}>
+                                    {items.text}
+                                  </Typography>
+                                </Box>
+                                {items.expand ? (
+                                  <SidebarClosure className={styles.sidebarExpand} />
+                                ) : (
+                                  <SidebarExpand className={styles.sidebarExpand} />
+                                )}
+                              </ListItemButton>
+                              <Collapse in={items.expand} timeout="auto" unmountOnExit sx={{ position: 'relative' }}>
+                                <List component="ul" disablePadding className={styles.list}>
+                                  {items.menuProps?.map((item) => {
+                                    return (
+                                      <ListItemButton
+                                        className={styles.expandable}
+                                        id={item.label}
+                                        selected={(location.pathname.split('/')[2] || '') === item.label}
+                                        component={Link}
+                                        to={item.href || ''}
+                                        sx={{
+                                          '&.Mui-selected': {
+                                            backgroundColor: 'var(--palette-menu-background-color)',
+                                            color: 'var(--palette-secondary-dark)',
+                                          },
+                                          '&.Mui-selected:hover': {
+                                            color: 'var(--palette-secondary-dark)',
+                                          },
+                                          borderRadius: '0.6rem',
+                                          p: '0.4rem 0.7rem',
+                                          color: 'var(--palette-sidebar-menu-color)',
+                                        }}
+                                      >
+                                        <Typography variant="body1" sx={{ fontFamily: 'mabry-bold' }}>
+                                          {item.text}
+                                        </Typography>
+                                      </ListItemButton>
+                                    );
+                                  })}
+                                </List>
+                              </Collapse>
+                            </Box>
+                          ) : (
+                            <ListItemButton
+                              id={items.label}
+                              key={items.href}
+                              selected={(location.pathname.split('/')[1] || '') === items.label}
+                              component={Link}
+                              to={items.href}
+                              className={
+                                (location.pathname.split('/')[1] || '') === items.label ? styles.listButton : ''
+                              }
+                              sx={{
+                                '&.Mui-selected': {
+                                  backgroundColor: 'var(--palette-menu-background-color)',
+                                  color: 'var(--palette-secondary-dark)',
+                                },
+                                '&.Mui-selected:hover': {
+                                  color: 'var(--palette-secondary-dark)',
+                                },
+                                borderRadius: '0.6rem',
+                                color: 'var(--palette-sidebar-menu-color)',
+                                p: '0.5rem 0.7rem',
+                              }}
+                            >
+                              {items.icon}
+                              <Typography variant="body1" className={styles.menuText}>
+                                {items.text}
+                              </Typography>
+                            </ListItemButton>
+                          ),
+                        )}
+                      </List>
                     </Box>
-                  </Box>
-                  <IconButton
-                    onClick={(event: any) => {
-                      setAnchorElement(event.currentTarget);
-                    }}
-                    size="small"
-                    id="unfold-more"
-                    aria-controls={openProfile ? 'account-menu' : undefined}
-                    aria-haspopup="true"
-                    aria-expanded={openProfile ? 'true' : undefined}
-                    sx={{ position: 'relative', padding: '0' }}
-                  >
-                    <UnfoldMoreIcon />
-                  </IconButton>
-                </Box>
-                <Menu
-                  anchorEl={anchorElement}
-                  id="account-menu"
-                  open={openProfile}
-                  onClose={() => {
-                    setAnchorElement(null);
-                  }}
-                  sx={{
-                    position: 'absolute',
-                    top: '-6rem',
-                    left: '-5.2rem',
-                    '& .MuiMenu-paper': {
-                      boxShadow: '0 0.075rem 0.2rem -0.0625rem #32325d40, 0 0.0625rem 0.0145rem -0.0625rem #0000004d;',
-                    },
-                    '& .MuiMenu-list': {
-                      p: 0,
-                    },
-                  }}
-                >
-                  <Box className={styles.profileMenu}>
-                    <MenuItem
-                      id="profile-menu"
-                      onClick={() => {
-                        setAnchorElement(null);
-
-                        navigate('/profile');
-                      }}
-                    >
-                      <ListItemIcon>
-                        <PersonAdd fontSize="small" className={styles.menuItemIcon} />
-                      </ListItemIcon>
-                      <Typography variant="body2" className={styles.menuText}>
-                        Profile
-                      </Typography>
-                    </MenuItem>
-                    <MenuItem id="logout-menu" onClick={handleLogout}>
-                      <ListItemIcon>
-                        <Logout fontSize="small" className={styles.menuItemIcon} />
-                      </ListItemIcon>
-                      <Typography variant="body2" className={styles.menuText}>
-                        Logout
-                      </Typography>
-                    </MenuItem>
-                  </Box>
-                </Menu>
-              </Grid>
+                    <Box>
+                      <HeaderLayout className={styles.darkMode} />
+                      <Card className={styles.sidebarUser}>
+                        <IconButton
+                          onClick={(event: any) => {
+                            setAnchorElement(event.currentTarget);
+                          }}
+                          id="unfold-more"
+                          className={styles.avatarButton}
+                          sx={{ p: '0.3rem' }}
+                        >
+                          <Box className={styles.avatarWrapper} />
+                          <Avatar className={styles.avatar} src={user?.avatar} />
+                        </IconButton>
+                        <Box
+                          sx={{
+                            pl: '0.5rem',
+                          }}
+                        >
+                          <Typography variant="body1" id="menu-name" component="div" fontFamily="mabry-bold">
+                            {user?.name || '-'}
+                          </Typography>
+                          <Tooltip title={user?.email || '-'} placement="top">
+                            <Typography
+                              id="menu-email"
+                              component="div"
+                              variant="caption"
+                              sx={{
+                                width: '7.2rem',
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                              }}
+                            >
+                              {user?.email || '-'}
+                            </Typography>
+                          </Tooltip>
+                        </Box>
+                        <Menu
+                          anchorEl={anchorElement}
+                          id="account-menu"
+                          open={openProfile}
+                          onClose={() => {
+                            setAnchorElement(null);
+                          }}
+                          anchorOrigin={{
+                            vertical: 'top',
+                            horizontal: 'left',
+                          }}
+                          transformOrigin={{
+                            vertical: 'bottom',
+                            horizontal: 'left',
+                          }}
+                          sx={{
+                            '& .MuiMenu-paper': {
+                              boxShadow: 'var(--custom-shadows-dropdown)',
+                              borderRadius: 'var(--menu-border-radius);',
+                            },
+                            '& .MuiMenu-list': {
+                              width: '14rem',
+                              p: '0',
+                            },
+                          }}
+                        >
+                          <Box className={styles.profileMenu}>
+                            <Box className={styles.avatarContainer}>
+                              <Avatar className={styles.menuAvatar} src={user?.avatar} />
+                              <Typography variant="body1" className={styles.menuUserName}>
+                                {user?.name}
+                              </Typography>
+                              <Tooltip title={user?.email || '-'} placement="top">
+                                <Typography variant="body1" className={styles.menuUserEmail}>
+                                  {user?.email || '-'}
+                                </Typography>
+                              </Tooltip>
+                            </Box>
+                            <Divider
+                              sx={{
+                                borderStyle: 'dashed',
+                                borderColor: 'var(--palette-palette-divider)',
+                                borderWidth: '0px 0px thin',
+                                m: '0.2rem 0',
+                              }}
+                            />
+                            <MenuItem
+                              id="profile-menu"
+                              onClick={() => {
+                                setAnchorElement(null);
+                                navigate('/profile');
+                              }}
+                              sx={{ borderRadius: 'var(--menu-border-radius)' }}
+                            >
+                              <ListItemIcon>
+                                <PersonAdd fontSize="small" className={styles.menuItemIcon} />
+                              </ListItemIcon>
+                              <Typography variant="body2" className={styles.avatarMenu}>
+                                Profile
+                              </Typography>
+                            </MenuItem>
+                            <MenuItem
+                              sx={{ borderRadius: 'var(--menu-border-radius)' }}
+                              id="logout-menu"
+                              onClick={handleLogout}
+                            >
+                              <ListItemIcon>
+                                <Logout fontSize="small" className={styles.menuItemIcon} />
+                              </ListItemIcon>
+                              <Typography variant="body2" className={styles.avatarMenu}>
+                                Logout
+                              </Typography>
+                            </MenuItem>
+                          </Box>
+                        </Menu>
+                      </Card>
+                    </Box>
+                  </Grid>
+                )}
+              </Box>
+              <Box
+                id="main"
+                className={styles.layout}
+                sx={{ paddingLeft: compactLayout ? '4rem !important' : '13.5rem !important' }}
+              >
+                <main onMouseEnter={handleMouseLeave} className={styles.main}>
+                  <Outlet />
+                </main>
+              </Box>
             </Box>
-            <Divider orientation="vertical" flexItem sx={{ borderColor: 'rgba(145 158 171 / 0.12)' }} />
-            <Main>
-              <Outlet />
-            </Main>
           </Box>
         )}
       </Box>
diff --git a/src/components/profile/index.module.css b/src/components/profile/index.module.css
index 85827b9..b05a642 100644
--- a/src/components/profile/index.module.css
+++ b/src/components/profile/index.module.css
@@ -1,30 +1,78 @@
 .userIcon {
-  width: 1.6rem;
-  height: 1.6rem;
+  width: 1.4rem;
+  height: 1.4rem;
+  color: var(--palette-detail-lable-color);
 }
 
 .profileContainer {
   margin-bottom: 2rem;
-  padding: 2rem;
+  position: relative;
+  height: 14rem;
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  border-radius: 16px;
+  z-index: 0;
+}
+
+.profileImage {
+  background-color: #155939;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  height: 100%;
+}
+
+.profileContent {
+  left: 24px;
+  bottom: 24px;
+  z-index: 10;
+  position: absolute;
+  display: inline-flex;
+}
+
+.tabs {
+  position: absolute;
+  width: 100%;
+  bottom: 0px;
+  z-index: 9;
+  background-color: var(--palette-profile-background-paper);
+  display: flex;
+  justify-content: flex-end;
 }
 
 .textField {
-  width: 22rem;
+  width: 24rem;
   max-width: 28rem;
   margin-top: 0.8rem !important;
   margin-bottom: 0.8rem !important;
 }
 
 .avatarContainer {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
+  position: relative;
+  transition: transform 0.6s easel;
+  margin-left: 0.3rem;
+  padding: 0.3rem;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  color: #000;
+}
+
+.avatarWrapper {
+  background-color: #fff;
+  width: 7.25rem;
+  height: 7.25rem;
+  animation: rotate 4s linear infinite;
+  position: absolute;
+  border-radius: 50%;
 }
 
 .avatarContent {
-  width: 5rem !important;
-  height: 5rem !important;
-  background-color: var(--button-color) !important;
+  box-shadow: var(--palette-main-box-shadow) !important;
+  width: 7rem !important;
+  height: 7rem !important;
+  background: var(--palette-secondary-dark) !important;
 }
 
 .informationHeader {
@@ -44,10 +92,6 @@
   padding-bottom: 1rem;
 }
 
-.editIcon {
-  color: var(--palette-text-disabled);
-}
-
 .informationLable {
   width: 30%;
   display: flex;
@@ -59,3 +103,38 @@
   color: var(--palette-detail-lable-color);
   font-family: 'mabry-bold' !important;
 }
+
+.textFieldIcon {
+  width: 1.4rem;
+  height: 1.4rem;
+  margin-right: 0.4rem;
+  color: var(--palette-grey-tab);
+}
+
+.editIcon {
+  width: 1.4rem;
+  height: 1.4rem;
+  margin-right: 0.4rem;
+  color: var(--palette-scopes-icon-color);
+}
+
+.passwordWrapper {
+  padding: 2rem;
+}
+
+.passwordTextField {
+  width: 50rem;
+  max-width: 28rem;
+  margin-top: 0.8rem !important;
+  margin-bottom: 0.8rem !important;
+}
+
+.tabIcon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.profileForm {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/src/components/profile/index.tsx b/src/components/profile/index.tsx
index c6b3cc4..9897bcb 100644
--- a/src/components/profile/index.tsx
+++ b/src/components/profile/index.tsx
@@ -1,6 +1,7 @@
 import {
   Alert,
   Box,
+  Breadcrumbs,
   Button,
   Chip,
   Divider,
@@ -9,6 +10,10 @@ import {
   InputAdornment,
   Paper,
   Snackbar,
+  styled,
+  Tab,
+  TabProps,
+  Tabs,
   TextField,
   Typography,
 } from '@mui/material';
@@ -16,7 +21,6 @@ import Avatar from '@mui/material/Avatar';
 import Stack from '@mui/material/Stack';
 import { useState, useEffect, useContext } from 'react';
 import { updateUser, getUser, updatePassword, signOut, getUserResponse } from '../../lib/api';
-import LocalPhoneIcon from '@mui/icons-material/LocalPhone';
 import EmailIcon from '@mui/icons-material/Email';
 import LocationOnIcon from '@mui/icons-material/LocationOn';
 import DescriptionIcon from '@mui/icons-material/Description';
@@ -31,6 +35,51 @@ import { MyContext } from '../menu/index';
 import { CancelLoadingButton, SavelLoadingButton } from '../loading-button';
 import Card from '../card';
 import MoreTimeIcon from '@mui/icons-material/MoreTime';
+import { ReactComponent as Name } from '../../assets/images/profile/name.svg';
+import { ReactComponent as ID } from '../../assets/images/profile/id.svg';
+import { ReactComponent as Email } from '../../assets/images/profile/email.svg';
+import { ReactComponent as Location } from '../../assets/images/profile/location.svg';
+import { ReactComponent as Phone } from '../../assets/images/profile/phone.svg';
+import { ReactComponent as CreatedAt } from '../../assets/images/profile/created-at.svg';
+import { ReactComponent as Edit } from '../../assets/images/user/edit.svg';
+import { ReactComponent as UserID } from '../../assets/images/user/id.svg';
+import { ReactComponent as DetailRole } from '../../assets/images/user/detail-role.svg';
+import TabPanel from '@mui/lab/TabPanel';
+import { TabContext } from '@mui/lab';
+import _ from 'lodash';
+import { matchIsValidTel, MuiTelInput } from 'mui-tel-input';
+
+type StyledTabProps = Omit<TabProps, 'component'> & {};
+
+const AntTab = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(({ theme }) => ({
+  textTransform: 'none',
+  minWidth: 0,
+  [theme.breakpoints.up('sm')]: {
+    minWidth: 0,
+  },
+  minHeight: '3rem',
+  fontWeight: theme.typography.fontWeightRegular,
+  color: 'var(--palette-grey-tab)',
+  padding: '0',
+  marginRight: '2rem',
+  fontSize: '0.9rem',
+  fontFamily: 'mabry-bold',
+  '&:hover': {
+    color: 'primary',
+    opacity: 1,
+  },
+  '&.Mui-selected': {
+    color: 'var(--palette-description-color)',
+    fontFamily: 'mabry-bold',
+  },
+}));
+
+const AntTabs = styled(Tabs)({
+  '& .MuiTabs-indicator': {
+    backgroundColor: 'var(--palette-description-color)',
+    borderRadius: '1rem',
+  },
+});
 
 export default function Profile() {
   const [successMessage, setSuccessMessage] = useState(false);
@@ -49,9 +98,9 @@ export default function Profile() {
   const [showNewPassword, setShowNewPassword] = useState(false);
   const [passwordLoadingButton, setPasswordLoadingButton] = useState(false);
   const [personalLoadingButton, setPersonalLoadingButton] = useState(false);
-  const [showMyProfile, setShowMyProfile] = useState(true);
   const [showPersonalInformation, setShowPersonalInformation] = useState(true);
-  const [location, setLocation] = useState('');
+  const [phone, setPhone] = useState('');
+  const [value, setValue] = useState('1');
 
   const [users, setUsers] = useState<getUserResponse>({
     id: 0,
@@ -71,47 +120,59 @@ export default function Profile() {
     new_password: '',
   });
 
-  const { user, handleUserUpdate } = useContext(MyContext);
+  const { user, handleUserUpdate, role } = useContext(MyContext);
 
   const navigate = useNavigate();
 
   useEffect(() => {
     setUsers(user);
-    setLocation(user?.location);
+    setPhone(user.phone);
   }, [user]);
 
   const { old_password, new_password } = password;
 
+  const handleChangePhone = (newValue: string, data: any, cb?: () => void) => {
+    setPhone(newValue);
+    const { setError } = data;
+    setError(
+      !matchIsValidTel(newValue, {
+        onlyCountries: ['FR', 'BE', 'CN', 'US', 'CA', 'JP', 'KR', 'TW', 'HK', 'MO', 'SG', 'MY', 'TH', 'VN'],
+      }),
+    );
+
+    cb && cb();
+  };
+
   const userLable = [
     {
       name: 'id',
       label: 'ID',
-      icon: <Box component="img" className={styles.userIcon} src="/icons/profile/id.svg" />,
+      icon: <ID className={styles.userIcon} />,
     },
     {
       name: 'name',
       label: 'Name',
-      icon: <Box component="img" className={styles.userIcon} src="/icons/profile/name.svg" />,
+      icon: <Name className={styles.userIcon} />,
     },
     {
       name: 'email',
       label: 'Email',
-      icon: <Box component="img" className={styles.userIcon} src="/icons/profile/email.svg" />,
+      icon: <Email className={styles.userIcon} />,
     },
     {
       name: 'location',
       label: 'Location',
-      icon: <Box component="img" className={styles.userIcon} src="/icons/profile/location.svg" />,
+      icon: <Location className={styles.userIcon} />,
     },
     {
       name: 'phone',
       label: 'Phone',
-      icon: <Box component="img" className={styles.userIcon} src="/icons/profile/phone.svg" />,
+      icon: <Phone className={styles.userIcon} />,
     },
     {
       name: 'created_at',
       label: 'Created At',
-      icon: <Box component="img" className={styles.userIcon} src="/icons/profile/created-at.svg" />,
+      icon: <CreatedAt className={styles.userIcon} />,
     },
   ];
 
@@ -137,7 +198,7 @@ export default function Profile() {
         InputProps: {
           startAdornment: (
             <InputAdornment position="start">
-              <DescriptionIcon className={styles.editIcon} />:
+              <DescriptionIcon className={styles.textFieldIcon} />:
             </InputAdornment>
           ),
         },
@@ -157,31 +218,17 @@ export default function Profile() {
         label: 'Phone',
         name: 'phone',
         autoComplete: 'family-name',
-        value: users.phone,
+        value: phone,
         placeholder: 'Enter your Phone',
         helperText: phoneError ? 'Invalid phone number.' : '',
         error: phoneError,
 
         onChange: (e: any) => {
-          setUsers({ ...users, phone: e.target.value });
-          changeValidate(e.target.value, profileForm[1]);
-        },
-
-        InputProps: {
-          startAdornment: (
-            <InputAdornment position="start">
-              <LocalPhoneIcon className={styles.editIcon} />:
-            </InputAdornment>
-          ),
+          handleChangePhone(e, profileForm[1]);
         },
       },
       syncError: false,
       setError: setPhoneError,
-
-      validate: (value: string) => {
-        const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$|^$/;
-        return reg.test(value);
-      },
     },
     {
       formProps: {
@@ -202,7 +249,7 @@ export default function Profile() {
         InputProps: {
           startAdornment: (
             <InputAdornment position="start">
-              <LocationOnIcon className={styles.editIcon} />:
+              <LocationOnIcon className={styles.textFieldIcon} />:
             </InputAdornment>
           ),
         },
@@ -235,7 +282,7 @@ export default function Profile() {
         InputProps: {
           startAdornment: (
             <InputAdornment position="start">
-              <EmailIcon className={styles.editIcon} />:
+              <EmailIcon className={styles.textFieldIcon} />:
             </InputAdornment>
           ),
         },
@@ -271,7 +318,7 @@ export default function Profile() {
         InputProps: {
           startAdornment: (
             <InputAdornment position="start">
-              <VpnKeyIcon className={styles.editIcon} />
+              <VpnKeyIcon className={styles.textFieldIcon} />
             </InputAdornment>
           ),
 
@@ -284,9 +331,9 @@ export default function Profile() {
               edge="end"
             >
               {showOldPassword ? (
-                <Visibility className={styles.editIcon} />
+                <Visibility className={styles.textFieldIcon} />
               ) : (
-                <VisibilityOff className={styles.editIcon} />
+                <VisibilityOff className={styles.textFieldIcon} />
               )}
             </IconButton>
           ),
@@ -322,7 +369,7 @@ export default function Profile() {
         InputProps: {
           startAdornment: (
             <InputAdornment position="start">
-              <LockIcon className={styles.editIcon} />
+              <LockIcon className={styles.textFieldIcon} />
             </InputAdornment>
           ),
           endAdornment: (
@@ -334,9 +381,9 @@ export default function Profile() {
               edge="end"
             >
               {showNewPassword ? (
-                <Visibility className={styles.editIcon} />
+                <Visibility className={styles.textFieldIcon} />
               ) : (
-                <VisibilityOff className={styles.editIcon} />
+                <VisibilityOff className={styles.textFieldIcon} />
               )}
             </IconButton>
           ),
@@ -367,7 +414,7 @@ export default function Profile() {
         InputProps: {
           startAdornment: (
             <InputAdornment position="start">
-              <LockIcon className={styles.editIcon} />
+              <LockIcon className={styles.textFieldIcon} />
             </InputAdornment>
           ),
 
@@ -380,9 +427,9 @@ export default function Profile() {
               edge="end"
             >
               {showConfirmPassword ? (
-                <Visibility className={styles.editIcon} />
+                <Visibility className={styles.textFieldIcon} />
               ) : (
-                <VisibilityOff className={styles.editIcon} />
+                <VisibilityOff className={styles.textFieldIcon} />
               )}
             </IconButton>
           ),
@@ -422,8 +469,20 @@ export default function Profile() {
 
     profileForm.forEach((item) => {
       const value = data.get(item.formProps.name);
-      item.setError(!item.validate(value as string));
-      item.syncError = !item.validate(value as string);
+      if (item.validate) {
+        item.setError(!item.validate(value as string));
+        item.syncError = !item.validate(value as string);
+      } else {
+        item.setError(
+          !matchIsValidTel(phone, {
+            onlyCountries: ['FR', 'BE', 'CN', 'US', 'CA', 'JP', 'KR', 'TW', 'HK', 'MO', 'SG', 'MY', 'TH', 'VN'],
+          }),
+        );
+
+        item.syncError = !matchIsValidTel(phone, {
+          onlyCountries: ['FR', 'BE', 'CN', 'US', 'CA', 'JP', 'KR', 'TW', 'HK', 'MO', 'SG', 'MY', 'TH', 'VN'],
+        });
+      }
     });
 
     const canSubmit = Boolean(!profileForm.filter((item) => item.syncError).length);
@@ -432,7 +491,7 @@ export default function Profile() {
       bio: users.bio,
       email: users.email,
       location: users.location,
-      phone: users.phone,
+      phone: phone,
     };
 
     if (canSubmit) {
@@ -461,7 +520,6 @@ export default function Profile() {
 
   const cancelHandlePersonalInformation = async () => {
     setUsers(user);
-    setLocation(user?.location);
     setShowPersonalInformation(true);
   };
 
@@ -507,7 +565,6 @@ export default function Profile() {
   };
 
   const cancelChangePassword = () => {
-    setShowMyProfile(true);
     setPassword({ ...password, old_password: '', new_password: '' });
   };
 
@@ -520,6 +577,10 @@ export default function Profile() {
     setErrorMessage(false);
   };
 
+  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
+    setValue(newValue);
+  };
+
   return (
     <Box>
       <Snackbar
@@ -542,189 +603,220 @@ export default function Profile() {
           {errorMessageText}
         </Alert>
       </Snackbar>
-      <Typography id="my-profile" sx={{ mb: '2rem', fontFamily: 'mabry-bold' }} variant="h6">
+      <Typography variant="h5" mb="2rem">
         My Profile
       </Typography>
-      <Card className={styles.profileContainer}>
-        {showMyProfile ? (
-          <Box className={styles.avatarContainer}>
-            <Box display="flex" alignItems="center">
-              <Stack direction="row" spacing={2}>
-                <Avatar alt="Remy Sharp" src={users?.avatar} className={styles.avatarContent} />
-              </Stack>
-              <Box sx={{ pl: '1rem' }}>
-                <Typography id="name-title" variant="h5">
+      <TabContext value={value}>
+        <Card className={styles.profileContainer}>
+          <Box className={styles.profileImage}>
+            <Box className={styles.profileContent}>
+              <Box className={styles.avatarContainer}>
+                <Box className={styles.avatarWrapper} />
+                <Avatar alt="Remy Sharp" src={user?.avatar} className={styles.avatarContent} />
+              </Box>
+              <Box sx={{ pl: '1rem', pt: '1.4rem' }}>
+                <Typography id="name-title" variant="h5" color="#FFFFFF">
                   {users?.name || '-'}
                 </Typography>
-                <Box sx={{ display: 'flex', alignItems: 'center', pt: '0.3rem' }}>
-                  <Box component="img" className={styles.userIcon} src="/icons/user/location.svg" />
-                  <Typography variant="body2" component="div" ml="0.5rem" color="#919EAB" fontFamily="mabry-bold">
-                    {location || '-'}
-                  </Typography>
-                </Box>
+                <Paper
+                  // elevation={0}
+                  id="state"
+                  sx={{
+                    borderRadius: '0.2rem',
+                    // color: '#FFFFFF',
+                    // display: 'inline-flex',
+                    // alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: '0.1rem 0.4rem',
+                    mt: '0.4rem',
+                    // boxShadow: 'var(--palette-card-box-shadow)',
+                    background: '#18230f',
+                    color: '#FFF',
+                  }}
+                >
+                  <Typography variant="body2">{_.upperFirst(user?.state) || ''}</Typography>
+                </Paper>
+                {/* <Typography id="name-title" variant="body2" color="#FFFFFF">
+                  {_.upperFirst(user?.state) || ''}
+                </Typography> */}
               </Box>
             </Box>
-            <Box sx={{ justifyContent: 'flex-end' }}>
-              <Button
-                size="small"
-                sx={{
-                  background: 'var(--button-color)',
-                  ':hover': { background: 'var(--button-color)' },
-                }}
-                variant="contained"
-                onClick={() => {
-                  setShowMyProfile(false);
-                }}
-              >
-                <Box
-                  component="img"
-                  sx={{ width: '1.4rem', height: '1.4rem', mr: '0.4rem' }}
-                  src="/icons/user/change-password.svg"
-                />
-                Change Password
-              </Button>
-            </Box>
           </Box>
-        ) : (
-          <Grid sx={{ width: '40rem' }} onSubmit={handleChangePassword} component="form" noValidate>
-            <Typography variant="subtitle1" fontFamily="mabry-bold" mb="1rem">
-              Change Password
-            </Typography>
-            {passwordForm.map((item) => (
-              <Box key={item.formProps.name}>
-                <TextField size="small" margin="normal" color="success" fullWidth required {...item.formProps} />
-              </Box>
-            ))}
-            <Box mt="2rem">
-              <CancelLoadingButton
-                id="cancel-change-password"
-                loading={passwordLoadingButton}
+          <Box className={styles.tabs}>
+            <AntTabs value={value} onChange={handleChange} aria-label="nav tabs example" scrollButtons="auto">
+              <AntTab
+                icon={<UserID className={styles.tabIcon} />}
+                key="1"
+                iconPosition="start"
+                label="Profile"
+                sx={{ textTransform: 'none' }}
+                id="tab-profile"
+                value="1"
                 onClick={cancelChangePassword}
               />
-              <SavelLoadingButton
-                loading={passwordLoadingButton}
-                endIcon={<CheckCircleIcon />}
-                id="change-password"
-                text="Save"
+              <AntTab
+                icon={<VpnKeyIcon className={styles.tabIcon} />}
+                key="2"
+                iconPosition="start"
+                label="Security"
+                id="tab-password"
+                value="2"
               />
-            </Box>
-          </Grid>
-        )}
-      </Card>
-      <Card>
-        {showPersonalInformation ? (
-          <Box>
-            <Grid className={styles.informationHeader}>
-              <Typography variant="subtitle1" fontFamily="mabry-bold">
-                About me
-              </Typography>
-              <Button
-                size="small"
-                variant="contained"
-                sx={{
-                  background: 'var(--button-color)',
-                  ':hover': { background: 'var(--button-color)' },
-                }}
-                onClick={() => {
-                  setShowPersonalInformation(false);
-                }}
-              >
-                <Box
-                  component="img"
-                  sx={{ width: '1.4rem', height: '1.4rem', mr: '0.4rem' }}
-                  src="/icons/user/edit.svg"
-                />
-                Edit
-              </Button>
-            </Grid>
-            <Divider
-              sx={{
-                borderStyle: 'dashed',
-                borderColor: 'var(--palette-divider)',
-                borderWidth: '0px 0px thin',
-              }}
-            />
-            <Box sx={{ p: '1.5rem 2rem 0 2rem' }}>
-              <Typography id="description" variant="subtitle1" component="div" pb="1.5rem">
-                {user?.bio || '-'}
-              </Typography>
-              <Typography variant="subtitle1" fontFamily="mabry-bold">
-                Personal Details
-              </Typography>
-            </Box>
-            <Box className={styles.informationContainer}>
-              {userLable.map((item) => {
-                return (
-                  <Box className={styles.informationContent} key={item.name}>
-                    <Box display="flex" alignItems="center">
-                      <Box className={styles.informationLable}>
-                        {item.icon}
-                        <Typography component="div" variant="body1" className={styles.informationLableText}>
-                          {item.label}
-                        </Typography>
-                      </Box>
-                      <Box ml="0.6rem">
-                        {item.name === 'created_at' ? (
-                          users?.[item.name] ? (
-                            <Chip
-                              id={item.name}
-                              avatar={<MoreTimeIcon />}
-                              label={getDatetime(users?.[item.name]) || '-'}
-                              variant="outlined"
-                              size="small"
-                            />
-                          ) : (
-                            <Typography id={item.name} component="div" variant="body1" fontFamily="mabry-bold">
-                              -
-                            </Typography>
-                          )
-                        ) : (
-                          <Typography id={item.name} component="div" variant="body1" fontFamily="mabry-bold">
-                            {users?.[item?.name as keyof typeof users] || '-'}
-                          </Typography>
-                        )}
-                      </Box>
-                    </Box>
-                  </Box>
-                );
-              })}
-            </Box>
+            </AntTabs>
           </Box>
-        ) : (
-          <Box p="2rem">
-            <Typography variant="subtitle1" fontFamily="mabry-bold" mb="1rem">
-              Update Personal Information
-            </Typography>
-            <Box component="form" onSubmit={handlePersonalInformation} noValidate>
-              {profileForm.map((item) => (
-                <Box key={item.formProps.name}>
-                  <TextField
+        </Card>
+        <TabPanel value="1" key="1" sx={{ p: 0 }}>
+          <Card>
+            {showPersonalInformation ? (
+              <Box>
+                <Grid className={styles.informationHeader}>
+                  <Typography variant="h6" fontFamily="mabry-bold">
+                    About me
+                  </Typography>
+                  <Button
                     size="small"
-                    margin="dense"
-                    color="success"
-                    variant="outlined"
-                    {...item.formProps}
-                    className={styles.textField}
-                  />
+                    variant="contained"
+                    sx={{
+                      background: 'var(--palette-button-color)',
+                      color: 'var(--palette-button-text-color)',
+                      ':hover': { backgroundColor: 'var(--palette-hover-button-text-color)' },
+                    }}
+                    onClick={() => {
+                      setShowPersonalInformation(false);
+                    }}
+                  >
+                    <Edit className={styles.editIcon} />
+                    Edit
+                  </Button>
+                </Grid>
+                <Divider
+                  sx={{
+                    borderStyle: 'dashed',
+                    borderColor: 'var(--palette-palette-divider)',
+                    borderWidth: '0px 0px thin',
+                  }}
+                />
+                <Box sx={{ p: '1.5rem 2rem 0 2rem' }}>
+                  <Typography id="description" variant="subtitle1" component="div">
+                    {user?.bio || '-'}
+                  </Typography>
+                </Box>
+                <Box className={styles.informationContainer}>
+                  {userLable.map((item) => {
+                    return (
+                      <Box className={styles.informationContent} key={item.name}>
+                        <Box display="flex" alignItems="center">
+                          <Box className={styles.informationLable}>
+                            {item.icon}
+                            <Typography component="div" variant="body1" className={styles.informationLableText}>
+                              {item.label}
+                            </Typography>
+                          </Box>
+                          <Box ml="0.6rem">
+                            {item.name === 'created_at' ? (
+                              users?.[item.name] ? (
+                                <Chip
+                                  id={item.name}
+                                  avatar={<MoreTimeIcon />}
+                                  label={getDatetime(users?.[item.name]) || '-'}
+                                  variant="outlined"
+                                  size="small"
+                                />
+                              ) : (
+                                <Typography id={item.name} component="div" variant="body1" fontFamily="mabry-bold">
+                                  -
+                                </Typography>
+                              )
+                            ) : item.label === 'Name' || item?.label === 'ID' ? (
+                              <Typography id={item.name} component="div" fontFamily="mabry-bold" variant="body1">
+                                {users?.[item?.name as keyof typeof users] || '-'}
+                              </Typography>
+                            ) : (
+                              <Typography id={item.name} component="div" variant="body1">
+                                {users?.[item?.name as keyof typeof users] || '-'}
+                              </Typography>
+                            )}
+                          </Box>
+                        </Box>
+                      </Box>
+                    );
+                  })}
+                </Box>
+              </Box>
+            ) : (
+              <Box p="2rem">
+                <Typography variant="subtitle1" fontFamily="mabry-bold" mb="1rem">
+                  Update Personal Information
+                </Typography>
+                <Box component="form" onSubmit={handlePersonalInformation} noValidate className={styles.profileForm}>
+                  {profileForm.map((item) =>
+                    item.formProps.id === 'phone' ? (
+                      <MuiTelInput
+                        defaultCountry="CN"
+                        color="success"
+                        size="small"
+                        key={item.formProps.name}
+                        {...item.formProps}
+                        className={styles.textField}
+                      />
+                    ) : (
+                      <TextField
+                        key={item.formProps.name}
+                        size="small"
+                        margin="dense"
+                        color="success"
+                        variant="outlined"
+                        {...item.formProps}
+                        className={styles.textField}
+                      />
+                    ),
+                  )}
+                  <Box mt="2rem">
+                    <CancelLoadingButton
+                      id="cancel"
+                      loading={personalLoadingButton}
+                      onClick={cancelHandlePersonalInformation}
+                    />
+                    <SavelLoadingButton
+                      loading={personalLoadingButton}
+                      endIcon={<CheckCircleIcon />}
+                      id="save"
+                      text="Save"
+                    />
+                  </Box>
+                </Box>
+              </Box>
+            )}
+          </Card>
+        </TabPanel>
+        <TabPanel value="2" key="2" sx={{ p: 0 }}>
+          <Card className={styles.passwordWrapper}>
+            <Grid onSubmit={handleChangePassword} component="form" noValidate width="40rem">
+              <Typography variant="subtitle1" id="change-password-title" fontFamily="mabry-bold" mb="1rem">
+                Change Password
+              </Typography>
+              {passwordForm.map((item) => (
+                <Box key={item.formProps.name}>
+                  <TextField size="small" margin="normal" color="success" fullWidth required {...item.formProps} />
                 </Box>
               ))}
               <Box mt="2rem">
                 <CancelLoadingButton
-                  id="cancel"
-                  loading={personalLoadingButton}
-                  onClick={cancelHandlePersonalInformation}
+                  id="cancel-change-password"
+                  loading={passwordLoadingButton}
+                  onClick={cancelChangePassword}
                 />
                 <SavelLoadingButton
-                  loading={personalLoadingButton}
+                  loading={passwordLoadingButton}
                   endIcon={<CheckCircleIcon />}
-                  id="save"
+                  id="change-password"
                   text="Save"
                 />
               </Box>
-            </Box>
-          </Box>
-        )}
-      </Card>
+            </Grid>
+          </Card>
+        </TabPanel>
+      </TabContext>
     </Box>
   );
 }
diff --git a/src/components/rotation.tsx b/src/components/rotation.tsx
index 40d61d0..0a43e51 100644
--- a/src/components/rotation.tsx
+++ b/src/components/rotation.tsx
@@ -1,90 +1,80 @@
-import { Box, Grid, MobileStepper, ThemeProvider, createTheme } from '@mui/material';
+import { Grid, MobileStepper, useTheme } from '@mui/material';
 import { useState } from 'react';
 import { autoPlay } from 'react-swipeable-views-utils';
 import SwipeableViews from 'react-swipeable-views';
+import { ReactComponent as Dragonfly } from '../assets/images/login/dragonfly.svg';
+import { ReactComponent as DarkDragonfly } from '../assets/images/login/dark-dragonfly.svg';
+import { ReactComponent as Features } from '../assets/images/login/features.svg';
+import { ReactComponent as DarkFeatures } from '../assets/images/login/dark-features.svg';
+import { ReactComponent as Milestones } from '../assets/images/login/milestones.svg';
+import { ReactComponent as DarkMilestones } from '../assets/images/login/dark-milestones.svg';
 
 const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
 
-const rotationChart = [
-  {
-    label: 'Dragonfly',
-    imageURL: '/images/login/dragonfly.svg',
-  },
-  {
-    label: 'Features',
-    imageURL: '/images/login/features.svg',
-  },
-  {
-    label: 'Milestones',
-    imageURL: '/images/login/milestones.svg',
-  },
-];
-
-const theme = createTheme({
-  components: {
-    MuiMobileStepper: {
-      styleOverrides: {
-        dotActive: {
-          backgroundColor: 'var(--description-color)',
-        },
-      },
-    },
-  },
-});
-
 export default function Rotation() {
-  const [imageList] = useState(rotationChart);
   const [imageIndex, setImageIndex] = useState(0);
+  const theme = useTheme();
+
+  const rotationChart = [
+    {
+      label: 'Dragonfly',
+      imageURL: <Dragonfly style={{ width: '100%', height: '100vh' }} />,
+    },
+    {
+      label: 'Milestones',
+      imageURL: <Milestones style={{ width: '100%', height: '100vh' }} />,
+    },
+  ];
+
+  const darkRotationChart = [
+    {
+      label: 'Dragonfly',
+      imageURL: <DarkDragonfly style={{ width: '100%', height: '100vh' }} />,
+    },
+    {
+      label: 'Milestones',
+      imageURL: <DarkMilestones style={{ width: '100%', height: '100vh' }} />,
+    },
+  ];
 
   const handleStepChange = (step: number) => {
     setImageIndex(step);
   };
 
   return (
-    <ThemeProvider theme={theme}>
-      <Grid sx={{ backgroundColor: '#f6f7f9' }}>
-        <AutoPlaySwipeableViews
-          axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
-          index={imageIndex}
-          onChangeIndex={handleStepChange}
-          enableMouseEvents
-        >
-          {imageList.map((step, index) => {
-            return (
-              <picture key={step.label}>
-                <div>
-                  {Math.abs(imageIndex - index) <= 2 ? (
-                    <Box
-                      component="img"
-                      sx={{
-                        width: '100%',
-                        height: '100vh',
-                      }}
-                      src={step.imageURL}
-                    />
-                  ) : null}
-                </div>
-              </picture>
-            );
-          })}
-        </AutoPlaySwipeableViews>
-        {
-          <MobileStepper
-            sx={{
-              width: '50%',
-              height: '6%',
-              display: 'flex',
-              alignItems: 'flex-start',
-              justifyContent: 'center',
-              backgroundColor: '#f6f7f9',
-            }}
-            backButton={undefined}
-            nextButton={undefined}
-            activeStep={imageIndex}
-            steps={imageList?.length}
-          />
-        }
-      </Grid>
-    </ThemeProvider>
+    <Grid sx={{ backgroundColor: 'var(--palette-background-rotation)' }}>
+      <AutoPlaySwipeableViews index={imageIndex} onChangeIndex={handleStepChange} enableMouseEvents>
+        {theme.palette.mode === 'light'
+          ? rotationChart.map((step, index) => {
+              return (
+                <picture key={step.label}>
+                  <div>{Math.abs(imageIndex - index) <= 2 ? step.imageURL : null}</div>
+                </picture>
+              );
+            })
+          : darkRotationChart.map((step, index) => {
+              return (
+                <picture key={step.label}>
+                  <div>{Math.abs(imageIndex - index) <= 2 ? step.imageURL : null}</div>
+                </picture>
+              );
+            })}
+      </AutoPlaySwipeableViews>
+      <MobileStepper
+        sx={{
+          width: '50%',
+          p: 0,
+          height: '6%',
+          display: 'flex',
+          alignItems: 'flex-start',
+          justifyContent: 'center',
+          backgroundColor: 'var(--palette-background-rotation)',
+        }}
+        backButton={undefined}
+        nextButton={undefined}
+        activeStep={imageIndex}
+        steps={theme.palette.mode === 'light' ? rotationChart?.length : darkRotationChart?.length}
+      />
+    </Grid>
   );
 }
diff --git a/src/components/signin/index.module.css b/src/components/signin/index.module.css
index bb8f9f1..15bbd87 100644
--- a/src/components/signin/index.module.css
+++ b/src/components/signin/index.module.css
@@ -1,6 +1,12 @@
 .page {
   height: 100vh;
   overflow: hidden;
+  position: relative;
+}
+
+.pageLoading {
+  width: 4rem;
+  height: 4rem;
 }
 
 .container {
@@ -8,17 +14,35 @@
   align-items: center;
   justify-content: center;
   margin-bottom: 7rem;
+  position: relative;
+}
+
+.header {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  width: 11rem;
+}
+
+.githubContainer {
+  z-index: 9;
+  right: 1.6rem;
+  bottom: 1.6rem;
+  width: 2rem;
+  height: 2rem;
+  position: absolute;
 }
 
 .logo {
   width: 3rem;
   height: 3rem;
   margin-bottom: 1rem;
+  color: var(--palette-description-color);
 }
 
 .separationLineContainer {
-  margin-top: 1.2rem;
-  margin-bottom: 0.8rem;
+  margin-top: 1rem;
+  margin-bottom: 0.6rem;
   height: 2rem;
   display: flex;
   justify-content: space-evenly;
@@ -35,3 +59,9 @@
   margin: 0, 15;
   vertical-align: middle;
 }
+
+.github {
+  width: 2rem;
+  height: 2rem;
+  color: var(--palette-secondary-dark);
+}
diff --git a/src/components/signin/index.tsx b/src/components/signin/index.tsx
index 39aa4fa..37ee3ac 100644
--- a/src/components/signin/index.tsx
+++ b/src/components/signin/index.tsx
@@ -1,10 +1,8 @@
-import CssBaseline from '@mui/material/CssBaseline';
 import TextField from '@mui/material/TextField';
 import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Container from '@mui/material/Container';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
 import IconButton from '@mui/material/IconButton';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import Visibility from '@mui/icons-material/Visibility';
@@ -15,6 +13,9 @@ import styles from './index.module.css';
 import { Alert, Backdrop, Snackbar, Link as RouterLink, Button } from '@mui/material';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { setPageTitle } from '../../lib/utils';
+import { ReactComponent as Login } from '../../assets/images/login/login.svg';
+import { ReactComponent as PageLoading } from '../../assets/images/login/page-loading.svg';
+import { HeaderLayout } from '../dark-layout';
 
 export default function SignIn() {
   const [errorMessage, setErrorMessage] = useState(false);
@@ -93,15 +94,6 @@ export default function SignIn() {
     setPageTitle(location.pathname);
   }, [location]);
 
-  const theme = createTheme({
-    palette: {
-      secondary: {
-        contrastText: '#fff',
-        main: '#2E8F79',
-      },
-    },
-  });
-
   const changeValidate = (value: string, data: any) => {
     const { setError, validate } = data;
     setError(!validate(value));
@@ -175,87 +167,96 @@ export default function SignIn() {
           backgroundColor: 'rgba(0,0,0,0.3)',
         }}
       >
-        <Box component="img" sx={{ width: '4rem', height: '4rem' }} src="/icons/cluster/page-loading.svg" />
+        <PageLoading className={styles.pageLoading} />
       </Backdrop>
       <Grid item xs={6}>
         <Rotation />
       </Grid>
       <Grid item xs={6} className={styles.container}>
-        <ThemeProvider theme={theme}>
-          <Container component="main" maxWidth="xs">
-            <CssBaseline />
-            <Box
-              sx={{
-                marginTop: '5rem',
-                display: 'flex',
-                flexDirection: 'column',
-              }}
-            >
-              <Box component="img" className={styles.logo} src="/images/login/login.svg" />
-              <Typography variant="h4" gutterBottom>
-                Welcome back!
-              </Typography>
-              <Typography variant="body1" gutterBottom fontFamily="mabry-light,sans-serif">
-                Through which you can easily configure clusters and view cluster information.
-              </Typography>
-            </Box>
-            <Box
-              sx={{
-                mt: '0.2rem',
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-              }}
-            >
-              <Box component="form" onSubmit={handleSubmit} noValidate>
-                {formList.map((item) => (
-                  <TextField
-                    margin="normal"
-                    color="success"
-                    required
-                    fullWidth
-                    key={item.formProps.name}
-                    {...item.formProps}
-                  />
-                ))}
-                <Button type="submit" fullWidth variant="contained" color="secondary" sx={{ mt: '1.4rem' }}>
-                  <Typography variant="button">Sign In</Typography>
-                </Button>
-                <Box className={styles.separationLineContainer}>
-                  <Typography component="span" className={styles.separationLine}></Typography>
-                  <Typography component="span" className={styles.text}>
-                    or
+        <HeaderLayout className={styles.header} />
+        <Container component="main" maxWidth="xs">
+          <Box
+            sx={{
+              marginTop: '5rem',
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            <Login className={styles.logo} />
+            <Typography variant="h4" gutterBottom>
+              Welcome back!
+            </Typography>
+            <Typography variant="body1" gutterBottom fontFamily="mabry-light,sans-serif">
+              Through which you can easily configure clusters and view cluster information.
+            </Typography>
+          </Box>
+          <Box
+            sx={{
+              mt: '0.2rem',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+            }}
+          >
+            <Box component="form" onSubmit={handleSubmit} noValidate>
+              {formList.map((item) => (
+                <TextField
+                  margin="normal"
+                  color="success"
+                  required
+                  fullWidth
+                  key={item.formProps.name}
+                  {...item.formProps}
+                />
+              ))}
+              <Button
+                type="submit"
+                fullWidth
+                variant="contained"
+                sx={{
+                  mt: '1.4rem',
+                  background: 'var(--palette-description-color)',
+                  color: 'var(--palette-button-text-color)',
+                  ':hover': { backgroundColor: 'var(--palette-sign-hover-button-text-color)' },
+                }}
+              >
+                <Typography variant="button">Sign In</Typography>
+              </Button>
+              <Box className={styles.separationLineContainer}>
+                <Typography component="span" className={styles.separationLine}></Typography>
+                <Typography component="span" className={styles.text}>
+                  or
+                </Typography>
+                <Typography component="span" className={styles.separationLine}></Typography>
+              </Box>
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                }}
+              >
+                <Grid>
+                  <Typography component="span" fontFamily="-moz-initial">
+                    New to Dragnfly?
                   </Typography>
-                  <Typography component="span" className={styles.separationLine}></Typography>
-                </Box>
-                <Box
-                  sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                  }}
-                >
-                  <Grid>
-                    <Typography component="span" fontFamily="-moz-initial">
-                      New to Dragnfly?
-                    </Typography>
-                    <RouterLink
-                      underline="hover"
-                      component={Link}
-                      to="/signup"
-                      onClick={() => {
-                        setPageLoding(true);
-                      }}
-                      sx={{ color: '#2E8F79', ml: '0.4rem' }}
-                    >
-                      <Typography component="span">Create an account.</Typography>
-                    </RouterLink>
-                  </Grid>
-                </Box>
+                  <RouterLink
+                    id="create-account"
+                    underline="hover"
+                    component={Link}
+                    to="/signup"
+                    onClick={() => {
+                      setPageLoding(true);
+                    }}
+                    sx={{ color: '#2E8F79', ml: '0.4rem' }}
+                  >
+                    <Typography component="span">Create an account.</Typography>
+                  </RouterLink>
+                </Grid>
               </Box>
             </Box>
-          </Container>
-        </ThemeProvider>
+          </Box>
+        </Container>
       </Grid>
     </Grid>
   );
diff --git a/src/components/signup/index.module.css b/src/components/signup/index.module.css
index bb8f9f1..532fb7e 100644
--- a/src/components/signup/index.module.css
+++ b/src/components/signup/index.module.css
@@ -1,6 +1,12 @@
 .page {
   height: 100vh;
   overflow: hidden;
+  position: relative;
+}
+
+.pageLoading {
+  width: 4rem;
+  height: 4rem;
 }
 
 .container {
@@ -8,12 +14,36 @@
   align-items: center;
   justify-content: center;
   margin-bottom: 7rem;
+  position: relative;
+}
+
+.header {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  width: 11rem;
+}
+
+.githubContainer {
+  z-index: 9;
+  right: 1.6rem;
+  bottom: 1.6rem;
+  width: 2rem;
+  height: 2rem;
+  position: absolute;
+}
+
+.headerContent {
+  width: 2rem;
+  height: 2rem;
+  color: var(--palette-secondary-dark);
 }
 
 .logo {
   width: 3rem;
   height: 3rem;
   margin-bottom: 1rem;
+  color: var(--palette-description-color);
 }
 
 .separationLineContainer {
diff --git a/src/components/signup/index.tsx b/src/components/signup/index.tsx
index 870ba88..e3d3a6d 100644
--- a/src/components/signup/index.tsx
+++ b/src/components/signup/index.tsx
@@ -1,11 +1,8 @@
-import * as React from 'react';
 import Button from '@mui/material/Button';
-import CssBaseline from '@mui/material/CssBaseline';
 import TextField from '@mui/material/TextField';
 import { useEffect, useState } from 'react';
 import Typography from '@mui/material/Typography';
 import Container from '@mui/material/Container';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
 import IconButton from '@mui/material/IconButton';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import Visibility from '@mui/icons-material/Visibility';
@@ -15,6 +12,9 @@ import { signUp } from '../../lib/api';
 import styles from './index.module.css';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { setPageTitle } from '../../lib/utils';
+import { ReactComponent as Login } from '../../assets/images/login/login.svg';
+import { ReactComponent as PageLoading } from '../../assets/images/login/page-loading.svg';
+import { HeaderLayout } from '../dark-layout';
 
 export default function SignUp() {
   const [errorMessage, setErrorMessage] = useState(false);
@@ -160,15 +160,6 @@ export default function SignUp() {
     setPageTitle(location.pathname);
   }, [location]);
 
-  const theme = createTheme({
-    palette: {
-      secondary: {
-        contrastText: '#fff',
-        main: '#2E8F79',
-      },
-    },
-  });
-
   const handlePassword = (type: 'password' | 'confirmPassword') => {
     if (type === 'password') {
       setShowPassword((show) => !show);
@@ -244,78 +235,87 @@ export default function SignUp() {
           backgroundColor: 'rgba(0,0,0,0.3)',
         }}
       >
-        <Box component="img" sx={{ width: '4rem', height: '4rem' }} src="/icons/cluster/page-loading.svg" />
+        <PageLoading className={styles.pageLoading} />
       </Backdrop>
       <Grid item xs={6}>
         <Rotation />
       </Grid>
       <Grid item xs={6} className={styles.container}>
-        <ThemeProvider theme={theme}>
-          <Container component="main" maxWidth="xs">
-            <CssBaseline />
-            <Box
-              sx={{
-                mt: '5rem',
-                display: 'flex',
-                flexDirection: 'column',
-              }}
-            >
-              <Box component="img" className={styles.logo} src="/images/login/login.svg" />
-              <Typography variant="h5" gutterBottom>
-                Registered Account
-              </Typography>
-            </Box>
-            <Box
-              sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-              }}
-            >
-              <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: '1rem' }}>
-                <Grid container spacing={3}>
-                  {formList.map((item) => (
-                    <Grid item key={item.formProps.name} xs={12}>
-                      <TextField required fullWidth color="success" {...item.formProps} />
-                    </Grid>
-                  ))}
-                </Grid>
-                <Button type="submit" fullWidth variant="contained" color="secondary" sx={{ mt: '1.4rem' }}>
-                  <Typography variant="button">Sign Up</Typography>
-                </Button>
-                <Box className={styles.separationLineContainer}>
-                  <Typography component="span" className={styles.separationLine}></Typography>
-                  <Typography component="span" className={styles.text}>
-                    or
-                  </Typography>
-                  <Typography component="span" className={styles.separationLine}></Typography>
-                </Box>
-                <Box
-                  sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                  }}
-                >
-                  <Grid>
-                    <Typography component="span">Already have an account?</Typography>
-                    <RouterLink
-                      underline="hover"
-                      component={Link}
-                      to="/signin"
-                      onClick={() => {
-                        setPageLoding(true);
-                      }}
-                      sx={{ color: '#2E8F79', ml: '0.4rem' }}
-                    >
-                      <Typography component="span">Sign in</Typography>
-                    </RouterLink>
+        <HeaderLayout className={styles.header} />
+        <Container component="main" maxWidth="xs">
+          <Box
+            sx={{
+              mt: '5rem',
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            <Login className={styles.logo} />
+            <Typography variant="h5" gutterBottom>
+              Registered Account
+            </Typography>
+          </Box>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+            }}
+          >
+            <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: '1rem' }}>
+              <Grid container spacing={3}>
+                {formList.map((item) => (
+                  <Grid item key={item.formProps.name} xs={12}>
+                    <TextField required fullWidth color="success" {...item.formProps} />
                   </Grid>
-                </Box>
+                ))}
+              </Grid>
+              <Button
+                type="submit"
+                fullWidth
+                variant="contained"
+                sx={{
+                  mt: '1.4rem',
+                  background: 'var(--palette-description-color)',
+                  color: 'var(--palette-button-text-color)',
+                  ':hover': { backgroundColor: 'var(--palette-sign-hover-button-text-color)' },
+                }}
+              >
+                <Typography variant="button">Sign Up</Typography>
+              </Button>
+              <Box className={styles.separationLineContainer}>
+                <Typography component="span" className={styles.separationLine}></Typography>
+                <Typography component="span" className={styles.text}>
+                  or
+                </Typography>
+                <Typography component="span" className={styles.separationLine}></Typography>
+              </Box>
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                }}
+              >
+                <Grid>
+                  <Typography component="span">Already have an account?</Typography>
+                  <RouterLink
+                    id="sign-in"
+                    underline="hover"
+                    component={Link}
+                    to="/signin"
+                    onClick={() => {
+                      setPageLoding(true);
+                    }}
+                    sx={{ color: '#2E8F79', ml: '0.4rem' }}
+                  >
+                    <Typography component="span">Sign in</Typography>
+                  </RouterLink>
+                </Grid>
               </Box>
             </Box>
-          </Container>
-        </ThemeProvider>
+          </Box>
+        </Container>
       </Grid>
     </Grid>
   );
diff --git a/src/components/users/index.module.css b/src/components/users/index.module.css
index 636a269..45d4e44 100644
--- a/src/components/users/index.module.css
+++ b/src/components/users/index.module.css
@@ -1,7 +1,6 @@
 .changeRoleContainer {
   display: flex;
   flex-direction: column;
-  align-items: center;
 }
 
 .roleIcon {
@@ -19,6 +18,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 0.2rem 0rem 0.7rem 1rem;
 }
 
 .detailContentWrap {
@@ -41,10 +41,11 @@
 .detailIcon {
   width: 1.4rem;
   height: 1.4rem;
+  color: var(--palette-table-title-text-color);
 }
 
 .menuItemIcon {
-  color: var(--button-color);
+  color: var(--palette-button-color);
   width: 2rem;
 }
 
@@ -53,22 +54,21 @@
 }
 
 .menu {
-  background-image: url(../../../public/images/menu/cyan-blur.png), url(../../../public/images/menu/red-blur.png);
-  background-color: rgba(255, 255, 255, 0.9);
+  background-image: url(../../assets/images/menu/cyan-blur.png), url(../../assets/images/menu/red-blur.png);
+  background-color: var(--palette-background-menu);
   background-repeat: no-repeat, no-repeat;
   padding: 0.2rem;
   background-size: 50%, 50%;
-  box-shadow: rgba(145, 158, 171, 0.24) 0px 0px 2px 0px, rgba(145, 158, 171, 0.24) -20px 20px 40px -4px;
   transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
   outline: 0px;
   background-position: right top, left bottom;
-  border-radius: 10px;
+  border-radius: var(--menu-border-radius);
   overflow: inherit;
 }
 
 .detailTitle {
   padding-left: 0.8rem;
-  color: var(--text---palette-text-secondary);
+  color: var(--palette-table-title-text-color);
 }
 
 .detailContent {
@@ -76,14 +76,72 @@
 }
 
 .tableHeader {
-  color: var(--table-title-text-color);
+  color: var(--palette-table-title-text-color);
   font-family: 'mabry-bold' !important;
 }
 
 .tableRow {
-  border-bottom: dashed var(--palette-divider);
+  border-bottom: dashed var(--palette-palette-divider);
 }
 
 .tableRow:last-child {
   border-bottom: none;
 }
+
+.tableHeaderText {
+  border-color: var(--palette-palette-divider) !important;
+}
+
+.searchWrapper {
+  display: flex;
+  margin-bottom: 2rem;
+}
+
+.roleContainer {
+  display: flex;
+  align-items: center;
+}
+
+.editRoleHeader {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.8rem 1rem;
+}
+
+.editRoleHeaderIcon {
+  width: 2rem;
+  height: 2rem;
+  color: var(--palette-button-color);
+}
+
+.roleEdit {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.6rem;
+  background-color: var(--palette-background-paper);
+  box-shadow: var(--palette-card-box-shadow);
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 0.6rem;
+  border: solid;
+  color: var(--palette-color);
+  overflow: hidden;
+  border-width: 1px;
+}
+
+.roleEdit:nth-last-child(2n) {
+  margin-bottom: 1rem;
+}
+
+.roleIcon {
+  width: 1.5rem;
+  height: 1.5rem;
+  color: var(--palette-secondary-dark);
+}
+
+.roleText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--palette-text-palette-text-secondary);
+}
diff --git a/src/components/users/index.tsx b/src/components/users/index.tsx
index 92bb61c..14252e3 100644
--- a/src/components/users/index.tsx
+++ b/src/components/users/index.tsx
@@ -4,19 +4,15 @@ import {
   Box,
   Alert,
   Avatar,
-  Breadcrumbs,
   Chip,
   Dialog,
   DialogContent,
   Drawer,
   FormControl,
-  FormControlLabel,
   FormLabel,
   IconButton,
   ListItemAvatar,
-  ListSubheader,
   Radio,
-  RadioGroup,
   Skeleton,
   Snackbar,
   Tooltip,
@@ -29,64 +25,42 @@ import {
   ListItem,
   List,
   Pagination,
-  ThemeProvider,
-  createTheme,
   MenuItem,
   Menu,
   ListItemIcon,
+  Button,
+  Stack,
+  Autocomplete,
+  TextField,
 } from '@mui/material';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import CloseIcon from '@mui/icons-material/Close';
+import SearchIcon from '@mui/icons-material/Search';
 import { getUserRoles, getUsers, getUser, deleteUserRole, putUserRole, getUsersResponse } from '../../lib/api';
-import { makeStyles } from '@mui/styles';
-import { getDatetime, getPaginatedList, useQuery } from '../../lib/utils';
+import { fuzzySearch, getDatetime, getPaginatedList, useQuery } from '../../lib/utils';
+import AddIcon from '@mui/icons-material/Add';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import styles from './index.module.css';
-import _ from 'lodash';
+import _, { debounce } from 'lodash';
 import { ROLE_ROOT, ROLE_GUEST, DEFAULT_PAGE_SIZE, MAX_PAGE_SIZE } from '../../lib/constants';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { CancelLoadingButton, SavelLoadingButton } from '../loading-button';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import ModeEditIcon from '@mui/icons-material/ModeEdit';
 import PersonIcon from '@mui/icons-material/Person';
 import Card from '../card';
-
-const useStyles = makeStyles((theme: any) => ({
-  tableRow: {
-    '&$selected': {
-      backgroundColor: 'var(--button-color)',
-    },
-  },
-  hover: {
-    backgroundColor: theme.palette.action.hover,
-  },
-  selected: {},
-  tableCell: {
-    color: theme.palette.text.primary,
-  },
-
-  selectedTableCell: {
-    color: '#fff',
-  },
-  selectedTableAvatar: {
-    color: 'var(--button-color)!important',
-    backgroundColor: '#fff!important',
-  },
-  selectedButton: {
-    color: 'var(--button-color)!important',
-    backgroundColor: '#fff!important',
-  },
-}));
-
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: '#1C293A',
-    },
-  },
-  typography: {
-    fontFamily: 'mabry-light,sans-serif',
-  },
-});
+import { ReactComponent as Role } from '../../assets/images/user/role.svg';
+import { ReactComponent as UserID } from '../../assets/images/user/id.svg';
+import { ReactComponent as Name } from '../../assets/images/user/name.svg';
+import { ReactComponent as DetailRole } from '../../assets/images/user/detail-role.svg';
+import { ReactComponent as Email } from '../../assets/images/user/email.svg';
+import { ReactComponent as Phone } from '../../assets/images/user/phone.svg';
+import { ReactComponent as Location } from '../../assets/images/user/location.svg';
+import { ReactComponent as CreatedAt } from '../../assets/images/user/created-at.svg';
+import { ReactComponent as UpdatedAt } from '../../assets/images/user/updated-at.svg';
+import { ReactComponent as Root } from '../../assets/images/user/root.svg';
+import { ReactComponent as Guest } from '../../assets/images/user/guest.svg';
+import SearchCircularProgress from '../circular-progress';
 
 export default function Users() {
   const [isLoading, setIsLoading] = useState(true);
@@ -103,6 +77,7 @@ export default function Users() {
   const [userTotalPages, setUserTotalPages] = useState<number>(1);
   const [users, setUsers] = useState<getUsersResponse[]>([]);
   const [allUsers, setAllUsers] = useState<getUsersResponse[]>([]);
+  const [userCount, setUserCount] = useState<getUsersResponse[]>([]);
   const [user, setUser] = useState({
     id: 0,
     email: '',
@@ -116,11 +91,14 @@ export default function Users() {
   const [detailRole, setDetailRole] = useState('');
   const [updateRole, setUpdatelRole] = useState('');
   const [anchorElement, setAnchorElement] = useState(null);
+  const [searchUser, setSearchUser] = useState('');
+  const [searchIconISLodaing, setSearchIconISLodaing] = useState(false);
 
-  const classes = useStyles();
   const navigate = useNavigate();
   const query = useQuery();
   const page = query.get('page') ? parseInt(query.get('page') as string, 10) || 1 : 1;
+  const search = query.get('search') ? (query.get('search') as string) : '';
+  const location = useLocation();
 
   useEffect(() => {
     (async function () {
@@ -131,6 +109,7 @@ export default function Users() {
         const user = await getUsers({ page: 1, per_page: MAX_PAGE_SIZE });
 
         setUsers(user);
+        setUserCount(user);
         setIsLoading(false);
       } catch (error) {
         if (error instanceof Error) {
@@ -143,11 +122,16 @@ export default function Users() {
   }, [userPage, page]);
 
   useEffect(() => {
-    const totalPage = Math.ceil(users.length / DEFAULT_PAGE_SIZE);
-    const currentPageData = getPaginatedList(users, userPage, DEFAULT_PAGE_SIZE);
+    if (Array.isArray(users) && users.length > 0) {
+      const totalPage = Math.ceil(users.length / DEFAULT_PAGE_SIZE);
+      const currentPageData = getPaginatedList(users, userPage, DEFAULT_PAGE_SIZE);
 
-    setUserTotalPages(totalPage || 1);
-    setAllUsers(currentPageData);
+      setUserTotalPages(totalPage || 1);
+      setAllUsers(currentPageData);
+    } else if (users === null || users) {
+      setUserTotalPages(1);
+      setAllUsers([]);
+    }
   }, [users, userPage]);
 
   const handleChange = async (row: any) => {
@@ -248,8 +232,43 @@ export default function Users() {
     setErrorMessage(false);
   };
 
+  const debounced = useMemo(
+    () =>
+      debounce(async (currentSearch) => {
+        if (currentSearch && userCount.length > 0) {
+          const user = fuzzySearch(currentSearch, userCount);
+
+          setUsers(user);
+          setSearchIconISLodaing(false);
+        } else if (currentSearch === '' && userCount.length > 0) {
+          setUsers(userCount);
+          setSearchIconISLodaing(false);
+        }
+      }, 500),
+    [userCount],
+  );
+
+  const handleInputChange = useCallback(
+    (newSearch: any) => {
+      setSearchUser(newSearch);
+      setSearchIconISLodaing(true);
+      debounced(newSearch);
+
+      const queryString = newSearch ? `?search=${newSearch}` : '';
+      navigate(`${location.pathname}${queryString}`);
+    },
+    [debounced, location.pathname, navigate],
+  );
+
+  useEffect(() => {
+    if (search) {
+      setSearchUser(search);
+      debounced(search);
+    }
+  }, [search, debounced]);
+
   return (
-    <ThemeProvider theme={theme}>
+    <Box>
       <Snackbar
         open={successMessage}
         autoHideDuration={3000}
@@ -270,44 +289,105 @@ export default function Users() {
           {errorMessageText}
         </Alert>
       </Snackbar>
-      <Breadcrumbs
-        separator={
-          <Box
-            sx={{ width: '0.3rem', height: '0.3rem', backgroundColor: '#919EAB', borderRadius: '50%', m: '0 0.4rem' }}
-          />
-        }
-        sx={{ mb: '2rem' }}
-      >
-        <Typography variant="h5" fontFamily="mabry-bold" color="text.primary">
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: '1.5rem' }}>
+        <Typography variant="h5" fontFamily="mabry-bold">
           User
         </Typography>
-      </Breadcrumbs>
+        <Button
+          id="create-user"
+          size="small"
+          sx={{
+            background: 'var(--palette-button-color)',
+            color: 'var(--palette-button-text-color)',
+            ':hover': { backgroundColor: 'var(--palette-hover-button-text-color)' },
+          }}
+          variant="contained"
+          onClick={() => {
+            navigate(`/users/new`);
+          }}
+        >
+          <AddIcon fontSize="small" sx={{ mr: '0.4rem' }} />
+          Add User
+        </Button>
+      </Box>
+      <Box className={styles.searchWrapper}>
+        <Stack spacing={2} sx={{ width: '20rem' }}>
+          <Autocomplete
+            color="secondary"
+            id="free-solo-demo"
+            size="small"
+            freeSolo
+            inputValue={searchUser}
+            onInputChange={(_event, newInputValue) => {
+              handleInputChange(newInputValue);
+            }}
+            options={(Array.isArray(allUsers) && allUsers.map((option) => option?.name)) || ['']}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                sx={{ padding: 0 }}
+                label="Search"
+                InputProps={{
+                  ...params.InputProps,
+                  startAdornment: searchIconISLodaing ? (
+                    <Box
+                      sx={{
+                        width: '2.2rem',
+                        height: '2.2rem',
+                        pl: '0.5rem',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                      }}
+                    >
+                      <SearchCircularProgress />
+                    </Box>
+                  ) : (
+                    <Box
+                      sx={{
+                        width: '2.2rem',
+                        height: '2.2rem',
+                        pl: '0.5rem',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                      }}
+                    >
+                      <SearchIcon sx={{ color: '#919EAB' }} />
+                    </Box>
+                  ),
+                }}
+              />
+            )}
+          />
+        </Stack>
+      </Box>
       <Card>
         <Table sx={{ minWidth: 650 }} aria-label="simple table">
-          <TableHead sx={{ backgroundColor: 'var(--table-title-color)' }}>
+          <TableHead sx={{ backgroundColor: 'var(--palette-table-title-color)' }}>
             <TableRow>
-              <TableCell align="center"></TableCell>
-              <TableCell align="center">
+              <TableCell className={styles.tableHeaderText} align="center"></TableCell>
+              <TableCell align="center" className={styles.tableHeaderText}>
                 <Typography variant="subtitle1" className={styles.tableHeader}>
                   Name
                 </Typography>
               </TableCell>
-              <TableCell align="center">
+              <TableCell align="center" className={styles.tableHeaderText}>
                 <Typography variant="subtitle1" className={styles.tableHeader}>
                   Email
                 </Typography>
               </TableCell>
-              <TableCell align="center">
+              <TableCell align="center" className={styles.tableHeaderText}>
                 <Typography variant="subtitle1" className={styles.tableHeader}>
                   Location
                 </Typography>
               </TableCell>
-              <TableCell align="center">
+              <TableCell align="center" className={styles.tableHeaderText}>
                 <Typography variant="subtitle1" className={styles.tableHeader}>
                   State
                 </Typography>
               </TableCell>
-              <TableCell align="center">
+              <TableCell align="center" className={styles.tableHeaderText}>
                 <Typography variant="subtitle1" className={styles.tableHeader}>
                   Operation
                 </Typography>
@@ -367,8 +447,7 @@ export default function Users() {
                         alt="Remy Sharp"
                         sx={{
                           '&.MuiAvatar-root': {
-                            background: 'var(--button-color)',
-                            color: '#fff',
+                            background: 'var(--palette-secondary-dark)',
                           },
                         }}
                         src={item?.avatar}
@@ -376,7 +455,7 @@ export default function Users() {
                     </Box>
                   </TableCell>
                   <TableCell align="center">
-                    <Typography variant="body1" fontFamily="mabry-bold" color="text.primary">
+                    <Typography variant="body1" fontFamily="mabry-bold">
                       {item?.name || '-'}
                     </Typography>
                   </TableCell>
@@ -389,9 +468,15 @@ export default function Users() {
                       variant="outlined"
                       sx={{
                         borderRadius: '0.2rem',
-                        backgroundColor: item?.state === 'enable' ? 'var( --description-color)' : 'var(--button-color)',
+                        backgroundColor:
+                          item?.state === 'enable'
+                            ? 'var( --palette-description-color)'
+                            : 'var(--palette-dark-300Channel)',
                         color: item?.state === 'enable' ? '#FFFFFF' : '#FFFFFF',
-                        borderColor: item?.state === 'enable' ? 'var( --description-color)' : 'var(--button-color)',
+                        borderColor:
+                          item?.state === 'enable'
+                            ? 'var( --palette-description-color)'
+                            : 'var(--palette-dark-300Channel)',
                         fontWeight: 'bold',
                       }}
                     />
@@ -404,21 +489,26 @@ export default function Users() {
                       }}
                       id={`action-${item?.name}`}
                       aria-haspopup="true"
-                      sx={{ position: 'relative' }}
                     >
-                      <MoreVertIcon sx={{ color: 'var(--button-color)' }} />
+                      <MoreVertIcon sx={{ color: 'var(--palette-color)' }} />
                     </IconButton>
                     <Menu
                       anchorEl={anchorElement}
                       id="account-menu"
                       open={Boolean(anchorElement)}
                       onClose={closeAllPopups}
+                      anchorOrigin={{
+                        vertical: 'bottom',
+                        horizontal: 'right',
+                      }}
+                      transformOrigin={{
+                        vertical: 'top',
+                        horizontal: 'right',
+                      }}
                       sx={{
-                        position: 'absolute',
-                        left: '-6.5rem',
                         '& .MuiMenu-paper': {
-                          boxShadow:
-                            '0 0.075rem 0.2rem -0.0625rem #32325d40, 0 0.0625rem 0.0145rem -0.0625rem #0000004d',
+                          boxShadow: 'var(--custom-shadows-dropdown)',
+                          borderRadius: 'var(--menu-border-radius)',
                         },
                         '& .MuiMenu-list': {
                           p: 0,
@@ -427,6 +517,7 @@ export default function Users() {
                     >
                       <Box className={styles.menu}>
                         <MenuItem
+                          sx={{ borderRadius: 'var(--menu-border-radius)' }}
                           id={`detail-${selectedRow?.name}`}
                           onClick={() => {
                             handleChange(selectedRow);
@@ -444,6 +535,7 @@ export default function Users() {
                           <></>
                         ) : (
                           <MenuItem
+                            sx={{ borderRadius: 'var(--menu-border-radius)' }}
                             id={`edit-${selectedRow?.name}`}
                             onClick={() => {
                               openSwitchUser(selectedRow);
@@ -487,54 +579,115 @@ export default function Users() {
       <Dialog
         open={switchUser}
         onClose={closeAllPopups}
-        maxWidth="xs"
-        fullWidth
         aria-labelledby="alert-dialog-title"
         aria-describedby="alert-dialog-description"
+        sx={{
+          '& .MuiDialog-paper': {
+            minWidth: '37rem',
+          },
+        }}
       >
+        <Box className={styles.editRoleHeader}>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Role className={styles.editRoleHeaderIcon} />
+            <Typography variant="h6" fontFamily="mabry-bold" pl="0.7rem">
+              Role
+            </Typography>
+          </Box>
+          <IconButton
+            aria-label="close"
+            id="close-delete-icon"
+            onClick={closeAllPopups}
+            sx={{
+              color: (theme) => theme.palette.grey[500],
+              p: '0.2rem',
+            }}
+          >
+            <CloseIcon />
+          </IconButton>
+        </Box>
+        <Divider />
         <DialogContent>
           <Box className={styles.changeRoleContainer}>
-            <Box component="img" className={styles.roleIcon} src="/icons/user/role.svg" />
             <FormControl>
-              <FormLabel color="success" id="demo-controlled-radio-buttons-group"></FormLabel>
-              <RadioGroup
-                row
-                aria-labelledby="demo-controlled-radio-buttons-group"
-                name="controlled-radio-buttons-group"
-                value={updateRole}
-                onChange={(e: any) => {
-                  setUpdatelRole(e.target.value);
+              <Box
+                sx={{
+                  borderColor:
+                    updateRole === 'root' ? 'var(--palette-description-color)' : 'var(--palette-background-paper)',
                 }}
+                className={styles.roleEdit}
               >
-                <FormControlLabel
+                <Box className={styles.roleContainer}>
+                  <Root className={styles.roleIcon} />
+                  <Box pl="0.7rem">
+                    <Typography variant="body2" fontFamily="mabry-bold">
+                      Root
+                    </Typography>
+                    <Tooltip
+                      title="The root user is the super user of the system and has the highest authority."
+                      placement="top"
+                    >
+                      <Typography component="div" className={styles.roleText} variant="caption">
+                        The root user is the super user of the system and has the highest authority.
+                      </Typography>
+                    </Tooltip>
+                  </Box>
+                </Box>
+                <Radio
+                  size="small"
                   value="root"
-                  control={
-                    <Radio
-                      id="role-root"
-                      sx={{
-                        '&.MuiRadio-root': {
-                          color: 'var(--button-color)',
-                        },
-                      }}
-                    />
-                  }
-                  label="root"
+                  id="role-root"
+                  name="radio-buttons"
+                  checked={updateRole === 'root'}
+                  sx={{
+                    '&.Mui-checked': {
+                      color: 'var(--palette-description-color)',
+                    },
+                  }}
+                  onChange={(e: any) => {
+                    setUpdatelRole(e.target.value);
+                  }}
                 />
-                <FormControlLabel
+              </Box>
+              <Box
+                sx={{
+                  borderColor:
+                    updateRole === 'guest' ? 'var(--palette-description-color)' : 'var(--palette-background-paper)',
+                }}
+                className={styles.roleEdit}
+              >
+                <Box className={styles.roleContainer}>
+                  <Guest className={styles.roleIcon} />
+                  <Box pl="0.7rem">
+                    <Typography variant="body2" fontFamily="mabry-bold">
+                      Guest
+                    </Typography>
+                    <Tooltip
+                      title="The guest user has limited permissions and is intended for general user access."
+                      placement="top"
+                    >
+                      <Typography component="div" className={styles.roleText} variant="caption">
+                        The guest user has limited permissions and is intended for general user access.
+                      </Typography>
+                    </Tooltip>
+                  </Box>
+                </Box>
+                <Radio
+                  size="small"
                   value="guest"
-                  control={
-                    <Radio
-                      id="role-guest"
-                      sx={{
-                        '&.MuiRadio-root': {
-                          color: 'var(--button-color)',
-                        },
-                      }}
-                    />
-                  }
-                  label="guest"
+                  id="role-guest"
+                  name="radio-buttons"
+                  checked={updateRole === 'guest'}
+                  sx={{
+                    '&.Mui-checked': {
+                      color: 'var(--palette-description-color)',
+                    },
+                  }}
+                  onChange={(e: any) => {
+                    setUpdatelRole(e.target.value);
+                  }}
                 />
-              </RadioGroup>
+              </Box>
             </FormControl>
           </Box>
           <Box sx={{ display: 'flex', justifyContent: 'space-between', pt: '1.2rem' }}>
@@ -552,11 +705,12 @@ export default function Users() {
       <Drawer anchor="right" open={userDetail} onClose={closeAllPopups}>
         <Box role="presentation" sx={{ width: 350 }}>
           <List>
-            <ListSubheader component="div" color="inherit" className={styles.detailWrapper}>
+            <Box className={styles.detailWrapper}>
               <Typography variant="h6" fontFamily="mabry-bold">
                 User Detail
               </Typography>
               <IconButton
+                id="closure-user-detail"
                 onClick={() => {
                   setUserDetail(false);
                   setSwitchUser(false);
@@ -564,19 +718,19 @@ export default function Users() {
                   setDetailIsLoading(true);
                 }}
               >
-                <ClearOutlinedIcon sx={{ color: 'var(--button-color)' }} />
+                <ClearOutlinedIcon sx={{ color: 'var(--palette-secondary-dark)' }} />
               </IconButton>
-            </ListSubheader>
+            </Box>
             <Divider
               sx={{
                 borderStyle: 'dashed',
-                borderColor: 'var(--palette-divider)',
+                borderColor: 'var(--palette-palette-divider)',
                 borderWidth: '0px 0px thin',
               }}
             />
             <ListItem className={styles.detailContentWrap}>
               <ListItemAvatar className={styles.detailContentLabelContainer}>
-                <Box component="img" className={styles.detailIcon} src="/icons/user/id.svg" />
+                <UserID className={styles.detailIcon} />
                 <Typography variant="body2" className={styles.detailTitle}>
                   ID
                 </Typography>
@@ -588,13 +742,13 @@ export default function Users() {
             <Divider
               sx={{
                 borderStyle: 'dashed',
-                borderColor: 'var(--palette-divider)',
+                borderColor: 'var(--palette-palette-divider)',
                 borderWidth: '0px 0px thin',
               }}
             />
             <ListItem className={styles.detailContentWrap}>
               <ListItemAvatar className={styles.detailContentLabelContainer}>
-                <Box component="img" className={styles.detailIcon} src="/icons/user/name.svg" />
+                <Name className={styles.detailIcon} />
                 <Typography variant="body2" className={styles.detailTitle}>
                   Name
                 </Typography>
@@ -610,13 +764,13 @@ export default function Users() {
             <Divider
               sx={{
                 borderStyle: 'dashed',
-                borderColor: 'var(--palette-divider)',
+                borderColor: 'var(--palette-palette-divider)',
                 borderWidth: '0px 0px thin',
               }}
             />
             <ListItem className={styles.detailContentWrap}>
               <ListItemAvatar className={styles.detailContentLabelContainer}>
-                <Box component="img" className={styles.detailIcon} src="/icons/user/detail-role.svg" />
+                <DetailRole className={styles.detailIcon} />
                 <Typography variant="body2" className={styles.detailTitle}>
                   Role
                 </Typography>
@@ -631,10 +785,10 @@ export default function Users() {
                     variant="outlined"
                     sx={{
                       borderRadius: '0.2rem',
-                      background: 'var(--button-color)',
+                      background: 'var(--palette-button-color)',
                       color: '#FFFFFF',
                       mr: '0.4rem',
-                      borderColor: 'var(--button-color)',
+                      borderColor: 'var(--palette-button-color)',
                       fontWeight: 'bold',
                     }}
                   />
@@ -648,13 +802,13 @@ export default function Users() {
             <Divider
               sx={{
                 borderStyle: 'dashed',
-                borderColor: 'var(--palette-divider)',
+                borderColor: 'var(--palette-palette-divider)',
                 borderWidth: '0px 0px thin',
               }}
             />
             <ListItem className={styles.detailContentWrap}>
               <ListItemAvatar className={styles.detailContentLabelContainer}>
-                <Box component="img" className={styles.detailIcon} src="/icons/user/email.svg" />
+                <Email className={styles.detailIcon} />
                 <Typography variant="body2" className={styles.detailTitle}>
                   Email
                 </Typography>
@@ -672,13 +826,13 @@ export default function Users() {
             <Divider
               sx={{
                 borderStyle: 'dashed',
-                borderColor: 'var(--palette-divider)',
+                borderColor: 'var(--palette-palette-divider)',
                 borderWidth: '0px 0px thin',
               }}
             />
             <ListItem className={styles.detailContentWrap}>
               <ListItemAvatar className={styles.detailContentLabelContainer}>
-                <Box component="img" className={styles.detailIcon} src="/icons/user/phone.svg" />
+                <Phone className={styles.detailIcon} />
                 <Typography variant="body2" className={styles.detailTitle}>
                   Phone
                 </Typography>
@@ -694,13 +848,13 @@ export default function Users() {
             <Divider
               sx={{
                 borderStyle: 'dashed',
-                borderColor: 'var(--palette-divider)',
+                borderColor: 'var(--palette-palette-divider)',
                 borderWidth: '0px 0px thin',
               }}
             />
             <ListItem className={styles.detailContentWrap}>
               <ListItemAvatar className={styles.detailContentLabelContainer}>
-                <Box component="img" className={styles.detailIcon} src="/icons/user/location.svg" />
+                <Location className={styles.detailIcon} />
                 <Typography variant="body2" className={styles.detailTitle}>
                   Location
                 </Typography>
@@ -720,13 +874,13 @@ export default function Users() {
             <Divider
               sx={{
                 borderStyle: 'dashed',
-                borderColor: 'var(--palette-divider)',
+                borderColor: 'var(--palette-palette-divider)',
                 borderWidth: '0px 0px thin',
               }}
             />
             <ListItem className={styles.detailContentWrap}>
               <ListItemAvatar className={styles.detailContentLabelContainer}>
-                <Box component="img" className={styles.detailIcon} src="/icons/user/created-at.svg" />
+                <CreatedAt className={styles.detailIcon} />
                 <Typography variant="body2" className={styles.detailTitle}>
                   Created At
                 </Typography>
@@ -750,13 +904,13 @@ export default function Users() {
             <Divider
               sx={{
                 borderStyle: 'dashed',
-                borderColor: 'var(--palette-divider)',
+                borderColor: 'var(--palette-palette-divider)',
                 borderWidth: '0px 0px thin',
               }}
             />
             <ListItem className={styles.detailContentWrap}>
               <ListItemAvatar className={styles.detailContentLabelContainer}>
-                <Box component="img" className={styles.detailIcon} src="/icons/user/updated-at.svg" />
+                <UpdatedAt className={styles.detailIcon} />
                 <Typography variant="body2" className={styles.detailTitle}>
                   Updated At
                 </Typography>
@@ -780,6 +934,6 @@ export default function Users() {
           </List>
         </Box>
       </Drawer>
-    </ThemeProvider>
+    </Box>
   );
 }
diff --git a/src/components/users/new.module.css b/src/components/users/new.module.css
new file mode 100644
index 0000000..4b7fbc6
--- /dev/null
+++ b/src/components/users/new.module.css
@@ -0,0 +1,57 @@
+.container {
+  display: flex;
+  gap: calc(3 * 0.5rem) calc(3 * 0.5rem);
+  align-items: flex-start;
+}
+
+.textField:nth-child(3) {
+  grid-column: span 2;
+}
+
+.formData {
+  width: 65%;
+  padding: 2rem 1.5rem;
+}
+
+.textFieldContainer {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: calc(1.5rem);
+}
+
+.uploadWrapper {
+  width: 35%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 4rem 2rem;
+  flex-direction: column;
+}
+
+.uploadText {
+  text-align: center;
+  padding-top: 2rem;
+}
+
+.submitWrapper {
+  padding-top: 2rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.form {
+  display: flex;
+  flex-wrap: wrap;
+  width: 70%;
+}
+
+.input {
+  width: 20rem !important;
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
+  margin-right: 1rem !important;
+}
+
+.input:nth-child(3) {
+  width: 41rem !important;
+}
diff --git a/src/components/users/new.tsx b/src/components/users/new.tsx
new file mode 100644
index 0000000..9586742
--- /dev/null
+++ b/src/components/users/new.tsx
@@ -0,0 +1,406 @@
+import TextField from '@mui/material/TextField';
+import { useState } from 'react';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import Visibility from '@mui/icons-material/Visibility';
+import {
+  Alert,
+  Backdrop,
+  Box,
+  Grid,
+  InputAdornment,
+  Snackbar,
+  Link as RouterLink,
+  Divider,
+  styled,
+  Breadcrumbs,
+} from '@mui/material';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { matchIsValidTel, MuiTelInput } from 'mui-tel-input';
+import styles from './new.module.css';
+import { CancelLoadingButton, SavelLoadingButton } from '../loading-button';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import { signUp } from '../../lib/api';
+
+export default function NewUser() {
+  const [errorMessage, setErrorMessage] = useState(false);
+  const [errorMessageText, setErrorMessageText] = useState('');
+  const [accountError, setAccountError] = useState(false);
+  const [emailError, setEmailError] = useState(false);
+  const [phoneError, setPhoneError] = useState(false);
+  const [locationError, setLocationError] = useState(false);
+  const [bioError, setBioError] = useState(false);
+  const [passwordError, setPasswordError] = useState(false);
+  const [confirmPassworError, setConfirmPassworError] = useState(false);
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [loadingButton, setLoadingButton] = useState(false);
+  const [successMessage, setSuccessMessage] = useState(false);
+  const [phone, setPhone] = useState('');
+
+  const navigate = useNavigate();
+
+  const changeValidate = (value: string, data: any, cb?: () => void) => {
+    const { setError, validate } = data;
+    setError(!validate(value));
+    cb && cb();
+  };
+
+  const handlePassword = (type: 'password' | 'confirmPassword') => {
+    if (type === 'password') {
+      setShowPassword((show) => !show);
+    } else {
+      setShowConfirmPassword((show) => !show);
+    }
+  };
+
+  const handleChange = (newValue: string, data: any, cb?: () => void) => {
+    setPhone(newValue);
+    const { setError } = data;
+    setError(
+      !matchIsValidTel(newValue, {
+        onlyCountries: ['FR', 'BE', 'CN', 'US', 'CA', 'JP', 'KR', 'TW', 'HK', 'MO', 'SG', 'MY', 'TH', 'VN'],
+      }),
+    );
+
+    cb && cb();
+  };
+
+  const formList = [
+    {
+      formProps: {
+        name: 'username',
+        label: 'Account',
+        autoComplete: 'family-name',
+        id: 'account',
+        required: true,
+        placeholder: 'Enter your account',
+        error: accountError,
+        helperText: accountError ? 'Fill in the characters, the length is 3-10.' : '',
+
+        onChange: (e: any) => {
+          changeValidate(e.target.value, formList[0]);
+        },
+      },
+      syncError: false,
+      setError: setAccountError,
+
+      validate: (value: string) => {
+        const reg = /^(?=.*[A-Za-z0-9@$!%*?&._-])[A-Za-z0-9@$!%*?&._-]{3,10}$/;
+        return reg.test(value);
+      },
+    },
+    {
+      formProps: {
+        name: 'email',
+        label: 'Email',
+        autoComplete: 'email',
+        id: 'email',
+        required: true,
+        placeholder: 'Enter your email',
+        error: emailError,
+        helperText: emailError ? 'Email is invalid or already taken.' : '',
+
+        onChange: (e: any) => {
+          changeValidate(e.target.value, formList[1]);
+        },
+      },
+      syncError: false,
+      setError: setEmailError,
+
+      validate: (value: string) => {
+        const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
+        return reg.test(value);
+      },
+    },
+    {
+      formProps: {
+        name: 'bio',
+        label: 'Description',
+        autoComplete: 'bio',
+        id: 'bio',
+        placeholder: 'Enter your description',
+        error: bioError,
+        helperText: bioError ? 'Fill in the characters, the length is 0-1000.' : '',
+
+        onChange: (e: any) => {
+          changeValidate(e.target.value, formList[2]);
+        },
+      },
+      syncError: false,
+      setError: setBioError,
+
+      validate: (value: string) => {
+        const reg = /^.{0,1000}$/;
+        return reg.test(value);
+      },
+    },
+    {
+      formProps: {
+        name: 'phone',
+        label: 'Phone',
+        autoComplete: 'phone',
+        id: 'phone',
+        placeholder: 'Enter your phone',
+        error: phoneError,
+        helperText: phoneError ? 'Enter a valid phone number.' : '',
+        value: phone,
+        onChange: (newValue: any) => {
+          handleChange(newValue, formList[3]);
+        },
+      },
+      syncError: false,
+      setError: setPhoneError,
+    },
+    {
+      formProps: {
+        name: 'location',
+        label: 'Location',
+        autoComplete: 'location',
+        id: 'location',
+        placeholder: 'Enter your location',
+        error: locationError,
+        helperText: locationError ? 'Fill in the characters, the length is 0-100.' : '',
+
+        onChange: (e: any) => {
+          changeValidate(e.target.value, formList[4]);
+        },
+      },
+      syncError: false,
+      setError: setLocationError,
+
+      validate: (value: string) => {
+        const reg = /^[A-Za-z0-9]{0,100}$/;
+        return reg.test(value);
+      },
+    },
+    {
+      formProps: {
+        name: 'password',
+        label: 'Password',
+        id: 'password',
+        required: true,
+        placeholder: 'Enter your password',
+        autoComplete: 'new-password',
+        helperText: passwordError ? `At least 8-16 characters, with at least 1 lowercase letter and 1 number.` : '',
+        type: showPassword ? 'text' : 'password',
+        error: passwordError,
+        InputProps: {
+          endAdornment: (
+            <IconButton
+              aria-label="toggle password visibility"
+              onClick={() => {
+                handlePassword('password');
+              }}
+              edge="end"
+            >
+              {showPassword ? <Visibility /> : <VisibilityOff />}
+            </IconButton>
+          ),
+        },
+
+        onChange: (e: any) => {
+          changeValidate(e.target.value, formList[5], () => {
+            setPassword(e.target.value);
+          });
+        },
+      },
+      syncError: false,
+      setError: setPasswordError,
+
+      validate: (value: string) => {
+        const reg = /^(?=.*[a-z])(?=.*\d)[^]{8,16}$/;
+        return reg.test(value);
+      },
+    },
+    {
+      formProps: {
+        name: 'confirmPassword',
+        label: 'ConfirmPassword',
+        id: 'confirmPassword',
+        required: true,
+        type: showConfirmPassword ? 'text' : 'password',
+        autoComplete: 'new-password',
+        placeholder: 'Repeat your new password',
+        error: confirmPassworError,
+        helperText: confirmPassworError ? 'Please enter the same password.' : '',
+
+        InputProps: {
+          endAdornment: (
+            <InputAdornment position="end">
+              <IconButton
+                aria-label="toggle password visibility"
+                onClick={() => {
+                  handlePassword('confirmPassword');
+                }}
+                edge="end"
+              >
+                {showConfirmPassword ? <Visibility /> : <VisibilityOff />}
+              </IconButton>
+            </InputAdornment>
+          ),
+        },
+
+        onChange: (e: any) => {
+          changeValidate(e.target.value, formList[6]);
+        },
+      },
+
+      syncError: false,
+      setError: setConfirmPassworError,
+
+      validate: (value: string) => {
+        const reg = /^(?=.*[a-z])(?=.*\d)[^]{8,16}$/;
+        return value === password && reg.test(value);
+      },
+    },
+  ];
+
+  const handleClose = (_event: any, reason?: string) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setSuccessMessage(false);
+    setErrorMessage(false);
+  };
+
+  const handleSubmit = async (event: any) => {
+    setLoadingButton(true);
+    event.preventDefault();
+    const account = event.currentTarget.elements.account.value;
+    const password = event.currentTarget.elements.password.value;
+    const email = event.currentTarget.elements.email.value;
+    const phone = event.currentTarget.elements.phone.value;
+    const location = event.currentTarget.elements.location.value;
+    const bio = event.currentTarget.elements.bio.value;
+
+    const data = new FormData(event.currentTarget);
+
+    formList.forEach((item) => {
+      const value = data.get(item.formProps.name);
+
+      if (item.validate) {
+        item.setError(!item.validate(value as string));
+        item.syncError = !item.validate(value as string);
+      } else {
+        item.setError(
+          !matchIsValidTel(phone, {
+            onlyCountries: ['FR', 'BE', 'CN', 'US', 'CA', 'JP', 'KR', 'TW', 'HK', 'MO', 'SG', 'MY', 'TH', 'VN'],
+          }),
+        );
+
+        item.syncError = !matchIsValidTel(phone, {
+          onlyCountries: ['FR', 'BE', 'CN', 'US', 'CA', 'JP', 'KR', 'TW', 'HK', 'MO', 'SG', 'MY', 'TH', 'VN'],
+        });
+      }
+    });
+
+    const canSubmit = Boolean(!formList.filter((item) => item.syncError).length);
+
+    if (canSubmit) {
+      try {
+        await signUp({
+          name: account,
+          password: password,
+          email: email,
+          bio: bio,
+          phone: phone,
+          location: location,
+        });
+        setLoadingButton(false);
+        navigate(`/users`);
+      } catch (error) {
+        if (error instanceof Error) {
+          setLoadingButton(false);
+          setErrorMessage(true);
+          setErrorMessageText(error.message);
+        }
+      }
+    } else {
+      setLoadingButton(false);
+    }
+  };
+
+  return (
+    <Box>
+      <Snackbar
+        open={successMessage}
+        autoHideDuration={3000}
+        onClose={handleClose}
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      >
+        <Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
+          Submission successful!
+        </Alert>
+      </Snackbar>
+      <Snackbar
+        open={errorMessage}
+        autoHideDuration={3000}
+        onClose={handleClose}
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      >
+        <Alert onClose={handleClose} severity="error" sx={{ width: '100%' }}>
+          {errorMessageText}
+        </Alert>
+      </Snackbar>
+      <Typography variant="h5">Create a new user</Typography>
+      <Breadcrumbs
+        sx={{ m: '1rem 0' }}
+        separator={
+          <Box
+            sx={{ width: '0.3rem', height: '0.3rem', backgroundColor: '#919EAB', borderRadius: '50%', m: '0 0.4rem' }}
+          />
+        }
+        aria-label="breadcrumb"
+      >
+        <RouterLink variant="body2" component={Link} underline="hover" color="text.primary" to={`/users`}>
+          User
+        </RouterLink>
+        <Typography variant="body2" color="inherit">
+          New user
+        </Typography>
+      </Breadcrumbs>
+      <Box component="form" onSubmit={handleSubmit} sx={{ mt: '2rem' }}>
+        <Divider sx={{ mt: 2, mb: 2 }} />
+        <Box className={styles.form}>
+          {formList.map((item) =>
+            item.formProps.id === 'phone' ? (
+              <MuiTelInput
+                defaultCountry="CN"
+                color="success"
+                size="small"
+                key={item.formProps.name}
+                {...item.formProps}
+                className={styles.input}
+                fullWidth
+              />
+            ) : (
+              <TextField
+                color="success"
+                size="small"
+                key={item.formProps.name}
+                className={styles.input}
+                {...item.formProps}
+                fullWidth
+              />
+            ),
+          )}
+        </Box>
+        <Divider sx={{ mt: 2, mb: 2 }} />
+        <Box sx={{ display: 'flex', mt: '2rem' }}>
+          <CancelLoadingButton
+            id="cancel"
+            loading={loadingButton}
+            onClick={() => {
+              navigate(`/users`);
+            }}
+          />
+          <SavelLoadingButton loading={loadingButton} endIcon={<CheckCircleIcon />} id="save" text="Save" />
+        </Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/index.css b/src/index.css
index 70a79c4..4bcc102 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8,40 +8,145 @@
   src: url('../public/fonts/MabryPro-Bold.ttf') format('woff');
 }
 
-:root {
-  --button-color: #1c293a;
-  --description-color: #2e8f79;
-  --save-color: #1c293a;
-  --save-size-color: #ffffff;
-  --save-hover-corlor: #555555;
-  --calcel-color: #979797;
-  --calcel-size-color: #000000;
-  --calcel-hover-corlor: #f4f3f6;
-  --button-loading-color: #dedede;
-  --button-loading-size-color: #000000;
-  --scopes-icon-color: #edeff2;
-  --table-title-color: #f4f6f8;
-  --title-light-color: #7a7a7a;
-  --menu-background-color: rgba(0, 167, 111, 0.1);
-  --hover-menu-background-color: rgba(0, 167, 111, 0.2);
-  --menu-color: #00a76f;
-  --table-title-text-color: #637381;
-  --palette-background-paper: #ffffff;
-  --no-data-color: 145 158 171;
+body {
+  color: #18230f !important;
+  background-color: rgba(255, 255, 255, 0.9) !important;
+  --palette-description-color: #1f7d53;
+  --palette-text-color: #1f7d53;
+  --palette-color: #18230f;
+  --palette-button-text-color: #fff;
+  --palette-button-color: #18230f;
+  --palette-secondary-dark: #18230f;
+  --palette-sign-hover-button-text-color: rgb(32, 100, 84);
+  --palette-hover-button-text-color: #1d3048;
+  --palette-delete-button-color: #d42536;
+  --palette-delete-button-hover-color: #d42537b8;
+  --palette-button-loading-color: #dedede;
+  --palette-button-loading-size-color: #000000;
+  --palette-save-color: #18230f;
+  --palette-calcel-hover-corlor: #f7f7f7;
+  --palette-calcel-background-color: rgb(255, 255, 255);
+  --palette-scopes-icon-color: #edeff2;
+  --palette-table-title-color: #f4f6f8;
+  --palette-table-title-text-color: #637381;
+  --palette-main-background-paper: rgba(255, 255, 255, 0.9);
+  --palette-menu-color: #00a76f;
+  --palette-sidebar-menu-background-color: #18230f;
+  --palette-menu-background-color: rgba(145 158 171 / 0.16);
+  --palette-grey-background-color: #00a76f1a;
+  --palette-sidebar-expand-background-color: rgba(255, 255, 255, 0.9);
+  --palette-hover-menu-background-color: #00a76f26;
+  --palette-background-menu-paper: #fff;
+  --palette-header-background-color: #f9fafb;
+  --palette-sidebar-background-color: #f4f6f8;
+  --palette-sidebar-menu-color: #637381;
+  --paletteexpandable-sidebar-navigation: #e2e5e9;
+  --menu-border-radius: 0.4rem;
+  --palette-background-menu: rgba(255, 255, 255);
+  --palette-common-white: #fff;
+  --palette-background-paper: rgba(255, 255, 255, 0.9);
+  --palette-profile-background-paper: rgba(255, 255, 255, 1);
+  --palette-sidebar-user-background-paper: #fff;
+  --palette-no-data-color: 145 158 171;
   --palette-text-disabled: #919eab;
-  --text---palette-text-secondary: #637381;
-  --palette-divider: rgba(145 158 171 / 0.4);
-  --palette-background-neutral: #f4f6f8;
+  --palette-text-palette-text-secondary: #637381;
+  --palette-palette-divider: rgba(145 158 171 / 0.4);
   --palette-background-inactive: rgb(145 158 171 / 0.16);
   --palette-card-hover-background-color: #f4f6f8;
   --palette-detail-lable-color: #515151;
   --palette-action-hover: rgba(145 158 171 / 0.08);
-  --delete-button-color: #d42536;
-  --delete-button-hover-color: #d42537b8;
+  --palette-background-rotation: #f6f7f9;
+  --palette-background--hover-rotation: #e7e8ea;
+  --palette-tab-border-color: #e8e8e8;
+  --palette-text-secondary: #18230f;
+  --palette-grey-600Channel: rgba(145 158 171 / 0.16);
+  --palette-grey-500Channel: 145 158 171;
+  --palette-grey-400Channel: #e4e5e5;
+  --palette-grey-300Channel: rgba(0, 0, 0, 0.198);
+  --palette-grey-200Channel: #18230f;
+  --palette-grey-100Channel: rgb(232, 232, 232);
+  --palette-grey-tab: #919eab;
+  --palette-white-500Channel: #f7f7f7;
+  --palette-white-400Channel: #efefef;
+  --palette-dark-500Channel: 134 134 134;
+  --palette-dark-400Channel: rgba(0, 0, 0, 0.7);
+  --palette-dark-300Channel: #18230f;
+  --palette-dark-200Channel: #e9e9e9;
+  --palette-green-500Channel: rgb(237, 247, 237);
+  --palette-color-neutral-200: #e8e8e8;
+  --palette-main-box-shadow: 0 0.125rem 0.2rem -0.0625rem #32325d40, 0 0.0625rem 0.245rem -1.0625rem #0000004d;
+  --palette-card-box-shadow: 0 0 2px 0 rgba(145 158 171 / 0.2), 0 12px 24px -4px rgba(145 158 171 / 0.12);
+  --palette-menu-shadow: 0 0.02rem 0.08rem 0.004rem #32325d6b, 0 0.0625rem 0.0145rem -0.0625rem #0000004d;
+  --custom-shadows-dropdown: 0 0 2px 0 rgba(145 158 171 / 0.24), 2px 5px 0px -5px rgba(145 158 171 / 0.24);
+  --custom-sidebar-shadows-dropdown: 0 0 2px 0 rgba(0 0 0 / 0.24), 2px 5px 0px -5px rgba(145 158 171 / 0.24);
+}
+
+[data-theme='dark'] body {
+  color: rgba(255, 255, 255, 0.8) !important;
+  background-color: #0d121e !important;
+  --palette-main-background-paper: #0d121e;
+  --palette-color: rgba(255, 255, 255, 0.7);
+  --palette-secondary-dark: #ececec;
+  --palette-description-color: #008170;
+  --palette-text-color: #008170;
+  --palette-background-paper: #1f2430;
+  --palette-profile-background-paper: #1f2430;
+  --palette-sidebar-user-background-paper: #161b23;
+  --palette-background-menu-paper: #161b23;
+  --palette-menu-shadow: none;
+  --palette-menu-background-color: rgba(145 158 171 / 0.16);
+  --palette-grey-background-color: rgba(0, 129, 112, 0.2);
+  --palette-sidebar-expand-background-color: #2a2f3b;
+  --palette-hover-menu-background-color: #2d323d;
+  --palette-background-menu: rgba(28, 37, 46);
+  --palette-text-secondary: #919eab;
+  --palette-header-background-color: #161b23;
+  --palette-sidebar-menu-background-color: rgba(255, 255, 255, 0.9);
+  --palette-sidebar-background-color: #1f2430;
+  --palette-sidebar-menu-color: rgba(255, 255, 255, 0.8);
+  --paletteexpandable-sidebar-navigation: #303540;
+  --palette-grey-tab: #6b7681;
+  --palette-button-text-color: rgba(255, 255, 255, 0.8);
+  --palette-button-color: #008170;
+  --palette-sign-hover-button-text-color: #039b87;
+  --palette-hover-button-text-color: #039b87;
+  --palette-save-color: #161b23;
+  --palette-calcel-hover-corlor: rgba(145 158 171 / 0.3);
+  --palette-calcel-background-color: rgba(145 158 171 / 0.2);
+  --palette-card-hover-background-color: #1a202d;
+  --palette-table-title-color: rgba(255, 255, 255, 0.1);
+  --palette-table-title-text-color: #919eab;
+  --palette-detail-lable-color: #a1a0a2;
+  --palette-background-rotation: #1f2430;
+  --palette-background--hover-rotation: #25303c;
+  --palette-tab-border-color: #343536;
+  --palette-grey-600Channel: #2a2f3b;
+  --palette-grey-400Channel: #474747;
+  --palette-grey-300Channel: #c6c6c6;
+  --palette-grey-200Channel: rgba(255, 255, 255, 0.7);
+  --palette-grey-100Channel: #4b4e51;
+  --palette-white-500Channel: #e8e8e8;
+  --palette-white-400Channel: #d1d1d1;
+  --palette-dark-500Channel: 145 158 171;
+  --palette-dark-400Channel: #7d8893;
+  --palette-dark-300Channel: #5d5f61;
+  --palette-dark-200Channel: #28323d;
+  --palette-green-500Channel: rgb(12, 19, 13);
+  --palette-color-neutral-200: #1f2430;
+  --palette-main-box-shadow: rgb(255 255 255 / 23%) 0px 0px 0px 0px, rgb(202 204 206 / 32%) 0px 1px 1px -3px;
+  --custom-shadows-dropdown: 0 0 1px 0 rgb(93 94 95 / 20%), 1px 2px 0px -2px rgb(103 108 112 / 24%);
+  --custom-sidebar-shadows-dropdown: 0 0 2px 0 rgba(0 0 0 / 0.34), -20px 20px 40px -4px rgba(0 0 0 / 0.24);
+  --palette-card-box-shadow: 0 0 2px 0 rgba(0 0 0 / 0.2), 0 12px 24px -4px rgba(0 0 0 / 0.12);
 }
 
 body {
   font-family: 'mabry-light' !important;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  overflow-y: hidden;
 }
 
 h2 {
diff --git a/src/index.tsx b/src/index.tsx
index 89022ac..a76b0cc 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,22 +3,13 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import { BrowserRouter as Routers } from 'react-router-dom';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
-const theme = createTheme({
-  typography: {
-    fontFamily: 'mabry-light,sans-serif',
-  },
-});
-
 root.render(
   <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <Routers>
-        <App />
-      </Routers>
-    </ThemeProvider>
+    <Routers>
+      <App />
+    </Routers>
   </React.StrictMode>,
 );
diff --git a/src/layouts/main.tsx b/src/layouts/main.tsx
index 6555a9d..5da592d 100644
--- a/src/layouts/main.tsx
+++ b/src/layouts/main.tsx
@@ -15,6 +15,7 @@ import ShowSeedPeer from '../components/clusters/seed-peers/show';
 import Peers from '../components/clusters/peers';
 import Profile from '../components/profile';
 import Users from '../components/users';
+import NewUser from '../components/users/new';
 import Tokens from '../components/developer/tokens';
 import NewTokens from '../components/developer/tokens/new';
 import EditTokens from '../components/developer/tokens/edit';
@@ -53,7 +54,7 @@ function Main() {
   return (
     <Routes>
       <Route path="*" element={<NotFound />} />
-      <Route path="/" element={<Navigate to="/clusters" replace />} />
+      <Route path="" element={<Navigate to="/clusters" replace />} />
       <Route path="/signin" element={<SignIn />} />
       <Route path="/signup" element={<SignUp />} />
       <Route element={<Layout />}>
@@ -81,6 +82,7 @@ function Main() {
           <Route path="/jobs/task/executions/:id" element={<ShowTask />} />
         </Route>
         {isRoot && <Route path="/users" element={<Users />} />}
+        <Route path="/users/new" element={<NewUser />} />
       </Route>
     </Routes>
   );
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 2a223f3..aa3752f 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -178,6 +178,9 @@ interface signUpRequset {
   name: string;
   password: string;
   email: string;
+  bio?: string;
+  location?: string;
+  phone?: string;
 }
 
 interface signUpResponse {
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 3520206..093db18 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -125,7 +125,7 @@ export const exportCSVFile = (headers: Header[], items: getPeersResponse[], file
   }
 };
 
-export const fuzzySearch = (keyword: string, data: getClustersResponse[]) => {
+export const fuzzySearch = (keyword: string, data: any[]) => {
   if (!data || !Array.isArray(data)) return [];
 
   return data.filter((item) => item.name && typeof item.name === 'string' && item.name.includes(keyword));